#key {
  height: 80vw;
  background-image: url("../img/herbalpeeling/key.jpg");
  background-size: cover;
  background-position: center;
  position: relative; }
  @media only screen and (min-width: 768px) {
    #key {
      height: 930px; } }

#sec1 {
  padding: 13vw 0; }
  #sec1 h2 {
    position: relative; }
  #sec1 .sec1-deco1 {
    position: absolute;
    top: -5vw;
    right: -3%;
    width: 50%; }
  #sec1 .sec1-img {
    margin: 5vw 0 7vw; }
  #sec1 .sec1-deco2 {
    width: 50%;
    margin: -9vw 0 0 auto; }
  @media only screen and (min-width: 768px) {
    #sec1 {
      padding: 223px 0 105px; }
      #sec1 h2 {
        position: relative;
        padding-top: 54px;
        margin: 0 -70px 0 auto;
        width: 600px;
        z-index: 1; }
      #sec1 .sec1-deco1 {
        position: absolute;
        top: 0;
        right: -114px;
        width: 333px; }
      #sec1 .sec1-img {
        margin: 0;
        position: absolute;
        top: -46px;
        left: -250px; }
      #sec1 .sec1-deco2 {
        width: 333px;
        margin: 0;
        position: absolute;
        bottom: -55px;
        left: 350px; }
      #sec1 .sec1-txt {
        width: 432px;
        margin: 64px -51px 0 auto;
        position: relative;
        z-index: 1; } }
  @media screen and (max-width: 1280px) and (min-width: 768px) {
    #sec1 .sec1-img {
      width: 80%; }
      #sec1 .sec1-img img {
        width: 100%;
        height: auto; }
    #sec1 .sec1-txt {
      margin-right: 0; } }
  @media screen and (max-width: 1180px) and (min-width: 768px) {
    #sec1 {
      padding-top: 170px; }
      #sec1 h2 {
        margin-right: 0; }
      #sec1 .sec1-img {
        top: 0; }
      #sec1 .sec1-txt {
        margin: 30px 80px 0 0; } }

#sec2 {
  background: url("../img/herbalpeeling/sec2_bg.jpg") repeat top center/345px auto;
  padding: 15vw 0; }
  #sec2 .wrap {
    z-index: 0; }
  #sec2 h2 {
    text-align: center; }
  #sec2 .sec2-deco {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 50%; }
  #sec2 .sec2-img1 {
    position: relative;
    margin: 5vw 0 7vw; }
  #sec2 .sec2-txt1 {
    position: absolute;
    z-index: 1;
    top: 5vw;
    right: 2%;
    font-size: 5vw;
    line-height: 1.4; }
    #sec2 .sec2-txt1 span {
      display: block;
      margin-top: 20vw; }
  #sec2 .sec2-img2 {
    margin: 10vw 2%;
    position: relative;
    z-index: 0; }
    #sec2 .sec2-img2:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 5vw;
      left: 7%;
      right: 7%;
      height: 100%;
      border: 1px solid #8c7467; }
#sec2 .sec2-img2 .df{
      justify-content: center;
    gap: 3vw;
}
    #sec2 .sec2-img2 p {
      width: 33%;
      text-align: center;
      margin-bottom: 5vw; }
      #sec2 .sec2-img2 p span {
        display: block;
        margin-top: 5px; }
  @media only screen and (min-width: 768px) {
    #sec2 {
      background: url("../img/herbalpeeling/sec2_bg.jpg") repeat top center;
      padding: 107px 30px 121px; }
      #sec2 .sec2-deco {
        top: -27px;
        right: -308px;
        width: 659px; }
      #sec2 h2 {
        margin-bottom: 56px; }
      #sec2 .sec2-img1 {
        order: 2;
        margin: 0 -66px 0 0;
        width: 680px; }
      #sec2 .sec2-txt1 {
        top: 51px;
        right: 59px;
        font-size: 32px;
        line-height: 45px;
        letter-spacing: 2px; }
        #sec2 .sec2-txt1 span {
          margin-top: 134px; }
      #sec2 .sec2-txt2 {
        width: 325px;
        margin: 77px 20px 0 0; }
      #sec2 .sec2-img2 {
        width: 908px;
        margin: 75px 0 0 -8px; }
        #sec2 .sec2-img2:before {
                 top: 70px;
        left: -750px;
        right: auto;
        height: calc(100% - 50px);
        width: calc(100% + 850px);
    }
        #sec2 .sec2-img2 li {
          width: 83.7%; }
          #sec2 .sec2-img2 li:nth-child(1) {
            margin-left: auto; }
          #sec2 .sec2-img2 li div {
            width: 47.4%; }
        #sec2 .sec2-img2 p {
          width: 45%;
          margin-bottom: 14px;
          font-size: 17px; }
          #sec2 .sec2-img2 p span {
            margin-top: 3px; } }
  @media screen and (max-width: 1180px) and (min-width: 768px) {
    #sec2 .sec2-img1 {
      width: 68%;
      margin-right: -5%; }
      #sec2 .sec2-img1 img {
        width: 100%;
        height: auto; }
    #sec2 .sec2-txt1 {
      right: 17%; } }

#sec3 {
  background: #180a01;
  padding: 15vw 0; }
  #sec3 h2 {
    text-align: center;
    margin-bottom: 7vw; }
  #sec3 .wrap {
    z-index: 0; }
  #sec3 .sec3-deco {
    position: absolute;
    z-index: -1;
    left: -8%;
    top: -7vw;
    width: 50%; }
  #sec3 .sec3-txt1 {
    margin: 5vw 0; }
  #sec3 ul {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center; }
    #sec3 ul li {
      margin: 5vw 0 0;
      background: url("../img/herbalpeeling/sec3_label.png") no-repeat center/100% 100%;
      width: 31vw;
      height: 31vw;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 4.5vw;
      line-height: 1.4;
      letter-spacing: 0.02em;
      font-weight: 500; }

  @media only screen and (max-width: 767px) {
#sec3 .sec3-img{
  margin: 0 10%;
}
}
  @media only screen and (min-width: 768px) {
    #sec3 {
      padding: 112px 30px 50px; }
      #sec3 h2 {
        float: left;
        width: 50%;
        margin-bottom: 57px;
        margin-top: 18px;
        line-height: 62px; }
      #sec3 .sec3-deco {
        left: -190px;
        top: -25px;
        width: 396px; }
      #sec3 .sec3-group {
        float: right;
        width: 60.7%;
        margin-right: -15.5%; }
      #sec3 .sec3-txt1 {
        margin: 20px 0 0 5px;
        max-width: 435px; }
      #sec3 .sec3-txt2 {
        float: left;
        width: 50%;
        text-align: center; }
      #sec3 ul {
        position: absolute;
        left: -29px;
        top: 439px;
        justify-content: flex-start; }
        #sec3 ul li {
          margin: 0 12px 0 0;
          width: 163px;
          height: 163px;
          font-size: 25px;
          letter-spacing: 1px;
          box-sizing: border-box;
          padding-bottom: 7px; } }
  @media screen and (max-width: 1180px) and (min-width: 768px) {
    #sec3 h2, #sec3 .sec3-txt2 {
      width: 40%; }
    #sec3 .sec3-group {
      margin-right: -6%; }
    #sec3 .sec3-txt1 {
      padding-right: 80px; } }

.box {
  border: 4px solid #3e2a1f;
  background: #180a01;
  box-sizing: border-box; }

#sec4 {
  background: url("../img/herbalpeeling/sec2_bg.jpg") repeat top center/345px auto;
  padding: 15vw 0; }
  #sec4 .wrap {
    z-index: 0; }
  #sec4 h2 {
    text-align: center; }
    #sec4 h2 span {
      display: block; }
  #sec4 .sec4-deco {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 50%; }
  #sec4 .sec4-txt {
    margin: 7vw 0 7vw; }
  #sec4 .sec4-group .df {
    margin-bottom: 10vw;
    justify-content: center;
    padding: 5vw 10vw; }
    #sec4 .sec4-group .df p:nth-child(1) {
      margin-right: 40px; }
  @media only screen and (min-width: 768px) {
    #sec4 {
      background: url("../img/herbalpeeling/sec2_bg.jpg") repeat top center;
      padding: 85px 0 118px; }
      #sec4 h2 {
        margin-bottom: 47px; }
      #sec4 .sec4-deco {
        top: -10px;
        right: 57px;
        width: 360px; }
      #sec4 .sec4-txt {
        margin: 0 0 26px; }
      #sec4 .sec4-group {
        order: 2;
        width: 45%;
        margin-top: 3px; }
        #sec4 .sec4-group .df {
          margin-bottom: 0;
          padding: 20px;
          font-size: 17px;
          line-height: 32px; }
          #sec4 .sec4-group .df p:nth-child(1) {
            margin-right: 60px; }
      #sec4 .sec4-img {
        width: 48.3%;
        margin-left: -3.6%; } }
  @media screen and (max-width: 1180px) and (min-width: 1081px) {
    #sec4 .df-pc {
      justify-content: flex-start; }
    #sec4 .sec4-group {
      margin-left: 60px; } }
  @media screen and (max-width: 1080px) and (min-width: 768px) {
    #sec4 .sec4-group {
      margin-right: 90px; }
    #sec4 .sec4-img {
      width: 44%; }
    #sec4 .sec4-group {
      margin-top: 0; } }

#sec5 {
  background: #180a01;
  padding: 15vw 0; }
  #sec5 .wrap {
    z-index: 0; }
  #sec5 .sec5-deco1 {
    position: absolute;
    z-index: -1;
    bottom: -23vw;
    left: -5%;
    width: 70%; }
  #sec5 .sec5-img {
    position: relative;
    margin-bottom: 10vw; }
  #sec5 .sec5-txt {
    position: absolute;
    top: -5vw;
    right: 5%;
    font-size: 6vw;
    line-height: 1.4;
    letter-spacing: 0.05em; }
  #sec5 .box {
    padding: 7vw 5%;
    position: relative;
    text-align: center;
    font-size: 25px;
    line-height: 1.5; }
  #sec5 i {
    margin: 0 auto;
    width: 36%;
    display: block; }
  #sec5 h2 {
    margin: 5vw 0;
    color: #bc9376;
    font-size: 8.5vw;
    line-height: 1.5;
    letter-spacing: 0.04em; }
  #sec5 .sec5-txt2 {
    margin: 2vw 0; }
  #sec5 .sec5-arrow {
    margin: 0 auto;
    width: 15px; }
  #sec5 .fz23 {
    font-size: 76%; }
  #sec5 .fz40 {
    font-size: 135%; }
  #sec5 .fz17, #sec5 .sec5-txt4 {
    font-size: 57%; }
  #sec5 .sec5-txt4 {
    margin-top: 11vw; }
  #sec5 .sec5-deco2 {
    position: absolute;
    left: -10%;
    bottom: 14vw;
    width: 110%; }
  @media only screen and (min-width: 768px) {
    #sec5 {
      padding: 90px 0 155px; }
      #sec5 .sec5-deco1 {
        bottom: -185px;
        left: -155px;
        width: 742px; }
      #sec5 .wrap {
        align-items: flex-start; }
      #sec5 .sec5-img {
        order: 2;
        margin: 87px -70px 0 0;
        width: 749px; }
      #sec5 .sec5-txt {
        top: -42px;
        right: 75px;
        font-size: 32px;
        letter-spacing: 0.05em; }
      #sec5 .box {
        padding: 10px 10px 50px;
        width: 430px;
        font-size: 30px;
        margin: 0 -65px 0 -50px;
        z-index: 2;
        letter-spacing: 2px; }
      #sec5 i {
        width: 97px; }
      #sec5 h2 {
        margin: 20px 0 26px;
        font-size: 40px;
        line-height: 60px;
        letter-spacing: 1px; }
      #sec5 .sec5-txt2 {
        margin: 10px 0 -4px; }
      #sec5 .sec5-arrow {
        margin: 0 auto -2px; }
      #sec5 .fz23 {
        font-size: 23px; }
      #sec5 .fz40 {
        font-size: 40px; }
      #sec5 .fz17 {
        font-size: 17px; }
      #sec5 .sec5-txt4 {
        margin-top: 30px;
        font-size: 16px; }
      #sec5 .sec5-deco2 {
        left: -107px;
        bottom: 78px;
        width: 473px; }
      #sec5 .sec5-txt3 {
        position: relative;
        z-index: 1; } }
  @media screen and (max-width: 1140px) and (min-width: 768px) {
    #sec5 .sec5-img {
      margin-right: 0;
      width: 64%; }
    #sec5 .sec5-info {
      margin-left: 0; } }

#sec6 {
  background: url("../img/herbalpeeling/sec6_bg.jpg") repeat-x top center/350px auto;
  padding: 15vw 0; }
  #sec6 h2 {
    text-align: center;
    line-height: 1;
    margin-bottom: 10vw; }
    #sec6 h2 i {
      display: block;
      margin: 0 auto;
      width: 15vw; }
    #sec6 h2 p {
      margin-top: -5vw;
      position: relative;
      z-index: 1; }
  #sec6 .swiper-container {
    overflow: visible;
    margin-top: 20vw; }
    #sec6 .swiper-container .img {
      transition: all 1s ease; }
    #sec6 .swiper-container .info {
      opacity: 0;
      width: 68vw;
      margin: 7vw 0 0 -14vw;
      transition: all 1s ease;
      font-weight: 500; }
    #sec6 .swiper-container .swiper-slide {
      transition: all 200ms linear; }
    #sec6 .swiper-container .swiper-button-next, #sec6 .swiper-container .swiper-button-prev {
      width: 17px; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-prev {
      left: 4%; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-prev img {
      -o-object-position: left 5vw top 0px;
      object-position: left 5vw top 0px; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-next {
      right: 9%; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-next img {
      -o-object-position: left 5vw top 0px;
      object-position: left 5vw top 0px; }
    #sec6 .swiper-container .swiper-slide .img {
      position: relative;
      top: -6vw; }
      #sec6 .swiper-container .swiper-slide .img img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-active .info {
      opacity: 1; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-active .img {
      transform: scale(1.9);
      top: 0; }
    #sec6 .swiper-container .sec6-num {
      width: 70px;
      margin: 0 10px 0 auto; }
  #sec6 .swiper-button-prev {
    background: url("../img/herbalpeeling/arrow_left.png") no-repeat center/100% auto; }
  #sec6 .swiper-button-next {
    background: url("../img/herbalpeeling/arrow_right.png") no-repeat center/100% auto; }
  #sec6 .sec6-info {
    margin: 8vw 3% 0;
    position: relative;
    background: url("../img/herbalpeeling/sec6_line.jpg") repeat-x top center, url("../img/herbalpeeling/sec6_line.jpg") repeat-x bottom center;
    text-align: center;
    padding: 10vw 0;
    z-index: 0; }
    #sec6 .sec6-info p {
          text-align: center;}
    #sec6 .sec6-info h3 {
      margin-bottom: 5vw;
      font-size: 7vw;
      letter-spacing: 0.08em; }
  #sec6 .sec6-deco {
    position: absolute;
    z-index: -1;
    width: 50%;
    left: -10%;
    top: 0; }
  @media only screen and (min-width: 768px) {
    #sec6 {
      background: url("../img/herbalpeeling/sec6_bg.jpg") repeat-x top center;
      padding: 80px 0 112px; }
      #sec6 h2 {
        margin-bottom: 83px; }
        #sec6 h2 i {
          width: 110px; }
        #sec6 h2 p {
          margin-top: -36px; }
      #sec6 .swiper-container {
        margin-top: 20px; }
        #sec6 .swiper-container .info {
          max-width: 600px;
          margin: -18px auto 0;
          font-size: 25px;
          line-height: 40px; }
        #sec6 .swiper-container .sec6-num {
          margin-right: -15px;
          margin-bottom: -40px;
          width: 129px; }
          #sec6 .swiper-container .sec6-num img {
            width: 100%;
            height: auto; }
        #sec6 .swiper-container .swiper-slide .img {
          top: 0;
          transform: translateY(26.5%) scale(0.52); }
        #sec6 .swiper-container .swiper-slide.swiper-slide-prev {
          left: 69px;
          margin-top: -5%; }
        #sec6 .swiper-container .swiper-slide.swiper-slide-prev img {
          -webkit-clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
          clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
          -o-object-position: left 138px top 0px;
          object-position: left 138px top 0px; }
        #sec6 .swiper-container .swiper-slide.swiper-slide-next {
          right: 181px;
          margin-top: -5%; }
        #sec6 .swiper-container .swiper-slide.swiper-slide-next img {
          -webkit-clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
          clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
          -o-object-position: left 138px top 0px;
          object-position: left 138px top 0px; }
        #sec6 .swiper-container .swiper-slide.swiper-slide-active .img {
          transform: scale(1.05);
          max-width: 640px;
          text-align: center;
          margin: 0 auto;
    }
        #sec6 .swiper-container .swiper-button-prev,
        #sec6 .swiper-container .swiper-button-next {
          width: 37px;
          height: 80px;
          top: 43.5%; }
        #sec6 .swiper-container .swiper-button-prev:hover,
        #sec6 .swiper-container .swiper-button-next:hover {
          opacity: 0.8; }
        #sec6 .swiper-container .swiper-button-prev {
          left: 19%; }
        #sec6 .swiper-container .swiper-button-next {
          right: 19%; }
      #sec6 .sec6-info {
        margin: 80px auto 0;
        width: 900px;
        padding: 43px 0 35px;
        z-index: 0; }
        #sec6 .sec6-info p {
          text-align: center; }
        #sec6 .sec6-info h3 {
          margin-bottom: 30px;
          font-size: 30px;
          letter-spacing: 1px; }
      #sec6 .sec6-deco {
        width: 426px;
        left: -180px;
        top: -77px; } }
  @media screen and (max-width: 1340px) and (min-width: 768px) {
    #sec6 .swiper-container .swiper-button-prev, #sec6 .swiper-container .swiper-button-next {
      width: 24px;
      height: 55px; }
    #sec6 .swiper-container .swiper-button-next {
      right: 20%; }
    #sec6 .swiper-container .swiper-button-prev {
      left: 20%; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-next {
      right: 150px; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-prev {
      left: 58px; } }
  @media screen and (max-width: 1200px) and (min-width: 768px) {
    #sec6 .swiper-container .info {
      margin-top: 0;
      width: 100%; }
    #sec6 .swiper-container .sec6-num {
      width: 8vw; } }
  @media screen and (max-width: 1150px) and (min-width: 768px) {
    #sec6 .swiper-container .swiper-slide.swiper-slide-next {
      right: 120px; }
    #sec6 .swiper-container .swiper-slide.swiper-slide-prev {
      left: 47px; } }


/*  @media screen and (min-width: 1501px) {
        #sec6 .swiper-container .swiper-slide.swiper-slide-active .img {
          transform: scale(1);
    }
}*/