:root {
  --fullHeight: 100dvh;
}

#content .wrapper .inner {
  position: relative;
  z-index: 2;
}

#sec1 {
  margin: 53px 0 0;
  position: relative;
}
#sec1::before {
  content: "";
  position: absolute;
  right: 0;
  background: url("../img/about/deco2.png") no-repeat left center/100% auto;
  width: 408px;
  height: 334px;
  top: 99px;
}
@media screen and (max-width: 390px) {
  #sec1::before {
    display: none;
  }
}
@media screen and (max-width: 390px) {
  #sec1 {
    margin: 46px 0 0;
  }
}
#sec1 h2 {
  text-align: center;
  position: relative;
  z-index: 2;
}
#sec1 h2 img {
  width: 369px;
}
@media screen and (max-width: 390px) {
  #sec1 h2 img {
    width: 268.5px;
  }
}
#sec1 .txt {
  width: 406px;
  margin: 27px auto 47px;
  position: relative;
  z-index: 2;
  max-width: calc(100% - 40px);
}
@media screen and (max-width: 390px) {
  #sec1 .txt {
    margin: 20px auto 49px;
  }
}
#sec1 .deco {
  width: 278px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#sec1 .deco img {
  width: 215px;
}

#sec2 {
  margin: 19.5px 0 0;
  position: relative;
}
@media screen and (max-width: 390px) {
  #sec2 {
    margin-top: 46.5px;
  }
}
#sec2::before {
  content: "";
  position: absolute;
  left: 0;
  background: url("../img/about/deco4.png") no-repeat right center/100% auto;
  width: 285px;
  height: 281px;
  bottom: 15px;
}
@media screen and (max-width: 1280px) {
  #sec2::before {
    bottom: 18px;
  }
}
@media screen and (max-width: 390px) {
  #sec2::before {
    width: 226px;
    height: 223px;
    bottom: 63px;
  }
}
#sec2 h2 {
  text-align: center;
  position: relative;
  z-index: 2;
}
#sec2 h2 img {
  width: 284.5px;
}
@media screen and (max-width: 390px) {
  #sec2 h2 img {
    width: 207px;
  }
}
#sec2 .txt {
  width: 380px;
  margin: 21.5px auto 40px;
  position: relative;
  z-index: 2;
  max-width: calc(100% - 40px);
}
@media screen and (max-width: 390px) {
  #sec2 .txt {
    margin: 20px auto 37px;
  }
}
#sec2 .deco {
  width: 251px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#sec2 .group-img {
  position: relative;
  margin: 0 0 67px;
}
@media screen and (max-width: 1280px) {
  #sec2 .group-img {
    margin-bottom: 119px;
  }
}
#sec2 .group-img .img2 {
  width: 396.5px;
  margin: 0 auto;
  max-width: calc(100% - 60px);
}
#sec2 .group-img .img {
  width: 749px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -40.5px;
}
@media screen and (max-width: 500px) {
  #sec2 .group-img .img {
    width: 452px;
    top: -12px;
  }
}

#sec3 {
  margin: 30.5px 0 0;
  position: relative;
}
#sec3::before {
  content: "";
  position: absolute;
  left: 0;
  background: url("../img/about/deco6.png") no-repeat right center/100% auto;
  width: 600px;
  height: 508px;
  max-width: 100%;
  top: -61.5px;
}
@media screen and (max-width: 390px) {
  #sec3::before {
    top: 38px;
  }
}
#sec3 h2 {
  text-align: center;
  position: relative;
  z-index: 2;
}
#sec3 h2 img {
  width: 327px;
}
@media screen and (max-width: 390px) {
  #sec3 h2 img {
    width: 238px;
  }
}
#sec3 .txt {
  width: 380px;
  margin: 19px auto 26px;
  position: relative;
  z-index: 2;
  max-width: calc(100% - 40px);
}
@media screen and (max-width: 390px) {
  #sec3 .txt {
    margin: 20px auto 10px;
  }
}
#sec3 .s3-slide {
  width: 701px;
  max-width: calc(100% - 80px);
  position: relative;
  z-index: 2;
  margin: 0 auto;
}
@media screen and (max-width: 390px) {
  #sec3 .s3-slide {
    max-width: calc(100% - 30px);
  }
}
#sec3 .group-img {
  margin: 26px 50px 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 390px) {
  #sec3 .group-img {
    margin: 31px 20px 0;
  }
}
#sec3 .group-img .img2 {
  width: 118px;
  cursor: pointer;
}
#sec3 .group-img .img2.active {
  opacity: 0.8;
}
#sec3 .group-img .img2:nth-child(1) {
  width: 117px;
}
#sec3 .group-img .img2:nth-child(2) {
  width: 122px;
}

#sec4 {
  padding: 67px 0 120px;
  position: relative;
}
@media screen and (max-width: 390px) {
  #sec4 {
    padding: 183px 0 60px;
  }
}
#sec4::before {
  content: "";
  position: absolute;
  background: url("../img/about/deco7.png") no-repeat left center/100% auto;
  width: 248px;
  height: 281px;
  top: -74px;
  right: 0;
}
@media screen and (max-width: 390px) {
  #sec4::before {
    width: 215px;
    height: 244px;
    top: -61px;
  }
}
#sec4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 84px;
  background: url("../img/about/deco8.png") no-repeat right center/100% auto;
  width: 600px;
  max-width: 100%;
  height: 508px;
}
@media screen and (max-width: 390px) {
  #sec4:after {
    display: none;
  }
}
#sec4 .group-txt {
  position: relative;
  z-index: 2;
  width: 561px;
  padding: 57px 0 58px;
  background: url("../img/about/bg.png") no-repeat top center/100% 100%;
  margin: 0 auto;
  max-width: calc(100% - 40px);
}
@media screen and (max-width: 600px) {
  #sec4 .group-txt {
    max-width: calc(100% + 40px);
    padding: 43px 0 74px;
    margin: 0 -20px;
  }
}
#sec4 .group-txt .img {
  width: 449px;
  margin: 0 auto;
  -webkit-mask-image: url("../img/about/mask_img8.png");
          mask-image: url("../img/about/mask_img8.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@media screen and (max-width: 600px) {
  #sec4 .group-txt .img {
    width: 266.5px;
  }
}
#sec4 .group-txt .txt {
  width: 396px;
  margin: 39px auto 0;
}
@media screen and (max-width: 600px) {
  #sec4 .group-txt .txt {
    width: 270px;
    margin: 34px auto 0;
  }
}