@charset "UTF-8";

body{
  color:var(--clr-bl);
  background: linear-gradient(45deg,#068728, #fff, #1c8735 );
    background-size: 200% 200%;
    animation: bggradient 10s ease infinite;
}

@keyframes bggradient {
  0% {
      background-position: 0% 70%;
    }
  
    50% {
      background-position: 100% 70%;
    }
  
    100% {
      background-position: 0% 70%;
    }
}
.work{
  padding-bottom:100px ;
}
.work h3{
  margin:10px 0;
  color: var(--clr-shadow);
  font-family: "LXGW WenKai TC", cursive;
  font-weight: 400;
  font-style: normal;
}
.work p{
  font-size: 18px;
}
.hero{
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 150px auto;
}
.hero img{ 
  display: block;
 width: min(90%, 1032px);
  max-width: 1200px;
  min-width: 700px;
  height: auto;
}
.hero-text {
  position: absolute;
  top: -80px; 
  left: 50%;  transform: translateX(-50%);
  font-size: 60px;
  font-weight: bold;
  color: var(--clr-deepgreen);
  background:var(--clr-wh);
  padding: 32px 150px 25px 150px;
  font-family:var(--font-sans);
  white-space: nowrap;
  box-shadow: 0 0 10px 10px var(--clr-wh);
}
.matter {
  display: flex;
  gap:3px;
  padding-top: 100px;
  width: 99vw;
  margin: 0 auto;
}
.matter img{
  width: 50%;
}
.sentence{
  width: 80%;
  max-width:1200px ;
  min-width: 700px;
  margin:0 auto;
  padding:3vw 0 8vw 0 ;
}
@media (max-width: 767px){
.work p{
  font-size: 16px;
}
.work_container{
  width:95%;
}
.hero {
  width: 100vw;
  margin: 200px auto 100px auto;
}

.hero img {
  width: 90%;
  max-width: none;
  min-width: 0;
}

.hero-text {
  top: -50px;
  font-size: 30px;
  padding: 10px 100px 10px 100px;
}

.matter{
  flex-direction: column;
  padding-top: 20px;
}
.matter img {
  width:100%;
}
.sentence {
  width: 95%;
  max-width:none;
  min-width:0;
}

}