@charset "utf-8";

/* ===================================
    공통
====================================== */
:root {
    /* Color */
    --pointcolor2: #eeeae1;
}
.sub {font-weight: 300;}
.sub-bg      {background-color: var(--pointcolor2)}

.subTit_en {font-size: 2.500rem; font-weight: bold; font-family: var(--pointfont); color:var(--pointcolor); text-transform: uppercase;}
.subTit_en_w {font-size: 2.500rem; font-weight: bold; font-family: var(--pointfont); color:#fff; text-transform: uppercase;}
.sub .num {font-size: 3.750rem; font-family: var(--pointfont); line-height: 1.3; font-weight: 600;}
.sub .line {border-bottom:1px solid #000; display:inline-block;}
.sub .line_b {width: 100%; height: 1px; background-color: #000; margin: 20px 0;}

/* sub Top */
:root{--ani:cubic-bezier(.32,.94,.6,1)}
.subTop {height:37.500em;position:Relative;top:0;left:0;overflow:hidden;}
.subTop .subTopImg {position:absolute;top:0;left:0;width:100%;height:37.500em;opacity:0;transform:scale(1.05);transition:transform 2s var(--ani)}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}
.subTop .inner {position: relative; max-width: 1400px; margin: auto; color:#fff; top:16em;}

.sub .bgHalf { background: linear-gradient(180deg, #f7f7f7 58%, #ffffff 42%);}


/* intro */
.sub .what .box_wrap3 .box {position: relative; padding-left: 2em;}
.sub .what .box_wrap3 .box:after {content:''; position: absolute; height: 90%; width: 1px; background-color: #000; top:1.5rem; bottom:0; left:0;}
@media (max-width:500px) {
    .sub .what .box_wrap3 .box {width: 100%; margin-right: 0;}
    .sub .what .box_wrap3 .box:nth-child(n+2) {margin-top: 2em;}
}



/* division */
.sub .division .box_wrap2 .box .txt {padding: 2rem 3rem;}
@media (max-width:768px) {
    .sub .division .box_wrap2 .box {width: 100%; margin-right:0;}
    .sub .division .box_wrap2 .box:last-child {margin-top: 2em;}
}


/* cause */
@media (max-width:900px) {
    .sub .cause .box_wrap7 {justify-content: center;}
    .sub .cause .box_wrap7 .box {width: 23%; margin-right: 2%;}
    .sub .cause .box_wrap7 .box:nth-child(n+5) {margin-top: 2em;}
}
@media (max-width:768px) {
    .sub .cause .box_wrap4 {justify-content: center;}
    .sub .cause .box_wrap4 .box {width: 23%; margin-right: 2%;}
    .sub .cause .box_wrap4 .box:nth-child(n+5) {margin-top: 2em;}

    .sub .cause .box_wrap3 .box {width: 48%; margin-right: 4%;}
    .sub .cause .box_wrap3 .box:nth-child(2n) {margin-right: 0;}
    .sub .cause .box_wrap3 .box:nth-child(n+3) {margin-top: 4%;}

    .sub .cause .box_wrap4 .box {width: 48%; margin-right: 4%;}
    .sub .cause .box_wrap4 .box:nth-child(2n) {margin-right: 0;}
    .sub .cause .box_wrap4 .box:nth-child(n+3) {margin-top: 4%;}
}



/* recommend */
.sub .recommend .box {border-bottom: 3px solid #000; padding-bottom:2em;}
@media (max-width:900px) {
    .sub .recommend .box {width: 48%; margin-right:4%;}
    .sub .recommend .box:nth-child(2n) {margin-right:0;}
    .sub .recommend .box:nth-child(n+3) {margin-top:2em;}
}


/* treatment */
.sub.pigmentation .treatment {background: no-repeat center url('/img/sub/pigmentation/treatmentBg.jpg'); background-size: cover; background-attachment: fixed;}
.sub.acne .treatment {background: no-repeat center url('/img/sub/acne/treatmentBg.jpg'); background-size: cover; background-attachment: fixed;}
.sub.scar .treatment {background: no-repeat center url('/img/sub/scar/treatmentBg.jpg'); background-size: cover; background-attachment: fixed;}
.sub.bloodVessel .treatment {background: no-repeat center url('/img/sub/bloodVessel/treatmentBg.jpg'); background-size: cover; background-attachment: fixed;}
.sub.petit .treatment {background: no-repeat center url('/img/sub/petit/treatmentBg.jpg'); background-size: cover; background-attachment: fixed;}
@media (max-width:768px) {
    .sub .treatment {background-attachment: scroll;}
}


/* program */
.sub.aesthetic .program {background: no-repeat center url('/img/sub/aesthetic/programBg.jpg'); background-size: cover; background-attachment: fixed;}




/* process */
.sub .process .box_wrap4 {overflow: hidden;}
.sub .process .line_w {width: 110%; height: 1px; background-color: var(--pointcolor);}
.sub .process .box .dot {position: relative; width: 10px; height: 10px; border-radius: 50%; background-color: var(--pointcolor); margin:30px auto; display: block; top:-5px; left: -5%;}
.sub .process .box .dot:before {content:''; position: absolute; width: 10px; height: 10px; border-radius: 50px; background-color:rgba(237,231,218,.4); right: 0; left:0; top:0; bottom:0; margin: auto; transition:all .5s;}
.sub .process .box.on .dot:before {transform: scale(2);}
.sub .process .box {width: 23.5%; margin-right: 2%;}
.sub .process .box:nth-child(4n) {margin-right: 0;}
@media (max-width:900px) {
    .sub .process .box {width: 49%; margin-right: 2%;}
    .sub .process .box:nth-child(2n) {margin-right:0;}
    .sub .process .box:nth-child(n+3) {margin-top:2em;}
  
} 


/* Laser */
.sub .laser canvas {opacity:1;}
.sub .laser.jquery-ripples {z-index: 1;}
.sub .laser .swiper-button-next:after, .sub .laser .swiper-button-prev:after {display: none;}
.sub .laser .swiper-button-next, .sub .laser .swiper-button-prev {position: relative; opacity: 1; width: fit-content;}
.sub .laser .swiper-button-next {right:0;}
.sub .laser .swiper-button-prev {left:0; margin-right: 10px;}
.sub .laser .btn_wrap {display: flex; align-items: center; margin-top: 5em;}
.sub .laser .LaserSwiper .swiper-scrollbar {background-color: #f2f2f2; opacity: 1; height: 7px; margin-top: 5em; border-radius:0;}
.sub .laser .LaserSwiper .swiper-scrollbar-drag {background-color: #ddd6c6; border-radius:0;}
@media (max-width:1200px) {
    .sub .laser .flex {flex-direction: column;}
    .sub .laser .width25, .sub .laser .width75 {width: 100%;}
    .sub .laser .LaserSwiper img {width: 85%;}
}
@media (max-width:900px) {
    .sub .laser .LaserSwiper img {width: 70%;}
}


/* special */
.sub .special .specialBox {display: flex; align-items: center; opacity: .3; transition: .5s;}
.sub .special .specialBox.on {opacity: 1;}
.sub .special .txt {position: relative; padding-right: 1em;}
.sub .special .txt:after {content:''; position: absolute; z-index: -1; right:-7rem; top:0; bottom:0; margin: auto; font-family: var(--koSerif); font-size: 17em; color:#f4f0ed; line-height:.4; font-weight:700;}
.sub .special .specialBox:nth-child(1) .txt:after {content:'01';}
.sub .special .specialBox:nth-child(2) .txt:after {content:'02';}
.sub .special .specialBox:nth-child(3) .txt:after {content:'03';}
.sub .special .specialBox img {margin-left: auto;}
.sub .special .specialBox:nth-child(n+2) {margin-top: 5em;}
@media (max-width:1200px) {
    .sub .special .flex {flex-direction: column;}
    .sub .special .width25, .sub .special .width75 {width: 100%;}
    .sub .special .width75 {margin-top: 3em;}
    .sub .special .txt:after {right: -5rem;}
}
@media (max-width:500px) {
    .sub .special .specialBox {flex-direction: column;}
    .sub .special .specialBox .width60, .sub .special .specialBox .width40 {width: 100%;}
    .sub .special .specialBox .width40 {margin-top: 2em;}
    .sub .special .txt:after {right:0;}
    .sub .special .specialBox img {width: 100%;}
}



/* precautions */
.sub .precautions .box {padding: 2em; width: 49%; margin-right: 2%; height:6.250rem; display:flex; align-items:center;}
.sub .precautions .box:nth-child(2n) {margin-right: 0;}
.sub .precautions .box:nth-child(n+3) {margin-top:2%;}
@media (max-width:768px) {
    .sub .precautions .box {width: 100%; margin-right:0;}
    .sub .precautions .box:nth-child(n+2) {margin-top:2%;}
}



/* period */
.sub .period .txt {padding: 3rem;}
@media (max-width:900px) {
    .sub .period .flex {flex-direction: column;}
    .sub .period .width40, .sub .period .width60, .sub .period .width50 {width: 100%;}
    .sub .period .width60, .sub .period .width50.img {margin-top: 3em;}
}



/* principle */
.sub .principle .tit {background-color: #000; color:#fff; font-family: var(--pointfont); font-weight: 500; padding:.2em 0;}
.sub .principle .box {position: relative;}
.sub .principle .box:after {content:url('/img/sub/pigmentation/arrow.png'); position: absolute; right: -1.65rem; height: fit-content; top:0; bottom:20%; margin: auto;}
.sub .principle .box:last-child:after {display: none;} 
@media (max-width:768px) {
    .sub .principle .box {width: 48%; margin-right: 4%;}
    .sub .principle .box:nth-child(2n) {margin-right: 0;}
    .sub .principle .box:nth-child(n+3) {margin-top: 4%;}
    .sub .principle .box:after {display: none;}
}



/* intro */
.sub .intro .desc {position: relative; padding: 1em 0;}
.sub .intro .desc:before {content:''; position: absolute; width: 130%; height: 100%; background-color:#eeeae1; right:0; bottom:0; z-index: -1;}
@media (max-width:900px) {
    .sub .intro .flex {flex-direction: column;}
    .sub .intro .width50 {width: 100%;}
}



/* why */
.sub .why .txt {padding: 1em;}
.sub .why .txt:nth-child(n+2) {margin-top: 1em;}
@media (max-width:900px) {
    .sub .why .flex {flex-direction: column;}
    .sub .why .width50 {width: 100%;}
    .sub .why .width50.desc {margin-top: 2em;}
}



/* tab */
.sub .tab-menu {display: flex; flex-direction: column;}
.sub .tab-menu li {padding: .3em 1em; position: relative; cursor: pointer; display: flex; align-items: center; width: fit-content;}
.sub .tab-menu li.active {border-bottom:1px solid #000;}
.sub .tab-menu li.active .arrow {display: block;}
.sub .tab-menu li .arrow {display: none;}
.sub .tab_btn {display: block; margin: auto; width: fit-content; font-weight: 500; border-bottom: 1px solid #000;}



/* difference */
.sub .difference .cont_box {overflow-x: scroll;}
.sub .difference .cont_box::-webkit-scrollbar{display:none;}
.sub .jayTb {width: 100%; border-spacing: 0;}
.sub .jayTb th {padding:.3em;}
.sub .jayTb th.img {padding:.3em 0;}
.sub .jayTb th.img:first-child {padding-right: .2em;}
.sub .jayTb td {padding:1em; background-color: #f3f0ec;}
.sub .jayTb .darkBg {background-color: #ddd6c6;}
.sub .jayTb .bd-right {border-right:5px solid #fff;}
.sub .jayTb .bd-bottom {position: relative;}
.sub .jayTb .bd-bottom:after {content:''; position: absolute; width: 80%; height: 1px; background-color: #fff; bottom:0; left:0; right:0; margin: auto;}
@media (max-width:768px) {
    .sub .difference .jayTb {width:900px;}
}



/* advantage */ 
.sub .advantage .advTit {max-width:13.2rem; width:100%;}
@media (max-width:768px) {
    .sub .advantage .flex {flex-direction: column; align-items: flex-start;}
}
@media (max-width:500px) {
    .sub .advantage .flex {flex-direction: row;}
    .sub .advantage .box {width: 100%; margin-right: 0;}
    .sub .advantage .box:nth-child(n+2) {margin-top:2em;}
}


/* kind */
.sub .kind .kindBox {display: flex; align-items: center;}
.sub .kind .kindBox .txt {padding: 2rem 3rem;}
.sub .kind .kindBox:nth-child(n+2) {margin-top: 2em;} 
@media (max-width:600px) {
    .sub .kind .kindBox {flex-direction: column;}
    .sub .kind .kindBox .width50 {width: 100%;}
}


/* kind_effect */
.sub .kind_effect .box {width: 32%; margin-right: 2%;}
.sub .kind_effect .box:nth-child(3n) {margin-right: 0;}
.sub .kind_effect .zum {position: relative; padding-left: 20px;} 
.sub .kind_effect .zum:after {content:'ㆍ'; position: absolute; left:0;}
@media (max-width:768px) {
    .sub .kind_effect .box {width: 48%; margin-right: 4%;}
    .sub .kind_effect .box:nth-child(2n) {margin-right: 0;}
    .sub .kind_effect .box:nth-child(n+3) {margin-top: 2em;}
}
@media (max-width:500px) {
    .sub .kind_effect .flex {flex-direction: column;}
    .sub .kind_effect .width50 {width: 100%;}
    .sub .kind_effect .width50.desc {margin-top: .5em;}
}



/* solution */
.sub .solution .tit {padding: .3em 1em;}
.sub .solution .solution_wrap {display: flex; justify-content: space-between; position: relative;}
.sub .solution .solutionBox {width: 49%;}
.sub .solution .BoxTit {background-color: #000; color:#fff; padding: .5rem;}
.sub .solution .plus {position: relative;}
.sub .solution .plus:after {content:'+'; position: absolute; width:4rem; height: 4rem; background-color: #000; color:#fff; font-weight: 500; font-size: 2.625rem; bottom:50%; right:0; left:0; margin: auto;}
@media (max-width:768px) {
    .sub .solution .solution_wrap {flex-wrap: wrap;}
    .sub .solution .solution_wrap.plus:after {display: none;}
    .sub .solution .solutionBox {width: 100%;}
    .sub .solution .solutionBox:last-child {margin-top: 2rem;}
}
@media (max-width:500px) {
    .sub .solution .box_wrap3 .box {width: 48%; margin-right:4%;}
    .sub .solution .box_wrap3 .box:nth-child(2n) {margin-right:0;}
    .sub .solution .box_wrap3 .box:nth-child(n+3) {margin-top:4%;}
}




/* symptom */
.sub .symptom .roundBox {width: 20rem; padding: .5em .5em; border-radius: 55px; border:1px solid #000; margin: auto; height: 7rem; display: flex; align-items: center; justify-content: center;}
@media (max-width:768px) {
    .sub .symptom .box {width: 48%; margin-right: 4%;}
    .sub .symptom .box:nth-child(2n) {margin-right: 0;}
    .sub .symptom .box:nth-child(n+3) {margin-top: 4%;}
}
@media (max-width:500px) {
    .sub .symptom .roundBox {width: 16rem;}
}



/* area */
.sub .area .flexList {--y-gap:3rem;}
.sub .area .areaList {display: flex; flex-wrap: wrap; max-width: 37.500rem; width:100%; position:relative;}
.sub .area .areaList li {width: 47%; margin-right: 6%; border-bottom: 1px solid #000; background-color:transparent; border-radius:0; height:auto; text-align:left;}
.sub .area .areaList.border2 li {border-bottom: 2px solid}
.sub .area .areaList li:nth-child(2n) {margin-right: 0;}
.sub .area .areaList li:nth-child(n+3) {margin-top: 2em;}
@media (max-width:1200px) {
	.sub .area .areaList {max-width: 34rem;}
}
@media (max-width:500px) {
	.sub .area .areaList {max-width: 90%;}
}
@media (max-width:990px) {
	/* .sub .area .flex {flex-direction: column;}
	.sub .area .areaSwiper {margin-top:2rem;}
	.sub .area .width45 {width:100%;} 
	.sub .area .width55 {width:100%; max-width:600px;} */
}

/* special */

#fp-nav.fp-right {left: 17px;}
.fp-warning, .fp-watermark {display: none !important;}
.sub.special #fullpage .section {position: relative; width: 100%; height: 100vh; background-attachment: fixed; color:#fff;}
.sub.special #section01 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg01.jpg'); background-size: cover;}
.sub.special #section02 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg02.jpg'); background-size: cover;}
.sub.special #section03 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg03.jpg'); background-size: cover;}
.sub.special #section04 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg04.jpg'); background-size: cover;}
.sub.special #section05 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg05.jpg'); background-size: cover;}
.sub.special #section06 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg06.jpg'); background-size: cover;}
.sub.special #section07 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg07.jpg'); background-size: cover;}
.sub.special #section08 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg08.jpg'); background-size: cover;}
.sub.special #section09 {background: no-repeat center url('/img/sub/jsclinic/special/fullBg09.jpg'); background-size: cover;}


.sub.special #fullpage .inner {position: absolute; top: 50%; transform: translateY(-50%); right:0; left:0; z-index: 10;}
.sub.special #fullpage .section .txt{opacity:0; position:absolute;left:50%;top:50%;transform:translate(-50%,200%);}
.sub.special #fullpage .section .Box{opacity:0; position:relative; transform:translateY(50%);}
.sub.special #fullpage .section.active .txt {opacity:1;transform:translate(-50%,-50%);transition:all 1.5s ease}
.sub.special #fullpage .section.active .Box {opacity:1;transform:translateY(40%);transition:all 1.5s ease}
.sub.special #fullpage .section.active .Box.Box10 {opacity:1;transform:translateY(10%);transition:all 1.5s ease}


.sub.special #fullpage .desc {max-width: 610px;}
.sub.special #fullpage .desc.desc_left {margin-left: auto;}
.sub.special #fullpage .desc .right {margin-right: auto;}
.sub.special #fullpage .tit {padding-right: 1em;}
.sub.special #section06 {position:relative;}
/* .sub.special #section06:after {content:''; position:absolute; height:100%; width:1px; background-color:#fff; right:0; left:0; top:0; bottom:0; margin:auto; opacity:.2;} */
.sub.special #section06 .system_list li {background-color: #fff; color:#000; padding: 10px 2rem;}
.sub.special #section06 .system_list li:nth-child(n+2) {margin-top: 10px;}

.sub.special #section09 .roundBoxList {display: flex; flex-wrap: wrap; margin-top: 1rem; max-width:600px;}
.sub.special #section09 .roundBoxList li {width: fit-content; padding: .5rem 1.5rem; border-radius: 26px; border:1px solid #fff; margin-top: 1rem; margin-right: 1rem;}


@media (max-width:1100px) {
    .sub.special #fullpage .section.active .Box.Box20 {opacity:1;transform:translateY(20%);transition:all 1.5s ease}
    .sub.special #section06 .flex, .sub.special #section09 .flex {flex-direction: column;}
    .sub.special #section06 .width50, .sub.special #section09 .width50 {width: 100%;}
    .sub.special #fullpage .desc {padding-left: 0; margin-top: 3em;}
    .sub.special #fullpage .desc.desc_left {margin-left: 0;}
    .sub.special #fullpage .desc.desc_right {margin-right: 0;}

    .sub.special #section09 .width50.tit {order:-1;}
    .sub.special #section09 .width50.desc {margin-top: 2rem;}
    .sub.special #section09 .roundBoxList {max-width: 900px; width: 100%;}    
}
@media (max-width:500px) {
    #fp-nav.fp-right {display: none;}
    .sub.special #fullpage .section.active .Box.Box20 {opacity:1;transform:translateY(10%);transition:all 1.5s ease}
    .sub.special #section09 .roundBoxList {display:none}
}

/* doctor */
.sub.doctor {background-color:#eeeae1;}
.sub.doctor .section {padding-top: 0;}
.sub.doctor .doctor_wrap {display: flex; height: 100vh;}
.sub.doctor .img {background: no-repeat right top url('/img/sub/jsclinic/doctor/bg_logo.png') #dcd6c6; display: flex; justify-content: center; position: fixed; right:0; bottom:0; height: 100vh;}
.sub.doctor .img img {align-self: flex-end;}
.sub.doctor .txt {display: flex; align-items: center; justify-content: center;}
.sub.doctor .desc {max-width: 630px; }
/* @media (max-width:1300px) {
    .sub.doctor .img img {width: 85%;}
} */
@media (max-width:990px) {
    .fp-scrollable .fp-section, .fp-scrollable .fp-slide {height: auto;}
    .sub.doctor #doctor01 {height: fit-content; padding-top: 100px !important; padding-bottom: 0;}
    .sub.doctor #doctor02 {padding-bottom: 0;}
    .sub.doctor .doctor_wrap {flex-direction: column; height: auto;}
    .sub.doctor .width50 {width: 100%;}
    .sub.doctor .desc {width: 100%;}
    .sub.doctor .txt {padding: 3em 2em;}
    .sub.doctor .img {position: relative; height: auto;}
    .sub.doctor .img.hidden-img {display: none;}
    .sub.doctor .img img {width: 50%; margin-top: 3em;}
}



/* ultheraDesc */
.sub .ultheraDesc .box .txt {max-width: 600px; margin-left: auto;}
@media (max-width:990px) {
    .sub .ultheraDesc .box .txt {margin-right: auto; margin-top: 2rem;}
    .sub .ultheraDesc .box_wrap2 .box {width: 100%;}
}



/* system */
.sub .system .box {padding:1rem; margin-top: 2%;}
.sub .system .box:nth-child(-n+2) {margin-top:0;}
@media (max-width:1200px) {
    .sub .system .box img {width: 90px;}
}
@media (max-width:990px) {
    .sub .system .box {width: 100%; margin-right: 0;}
    .sub .system .box:nth-child(2) {margin-top:2%;}
}
@media (max-width:768px) {
    .sub .system .box img {width: 60px;}
}



/* mode */
.sub .mode .box {padding: 1rem; position: relative;}
.sub .mode .box:after {content:''; position: absolute; height:60%; width: 1px; background-color: #000; top:0; bottom:0; right:0; margin: auto;}
.sub .mode .box:last-child:after {display: none;}
@media (max-width:900px) {
    .sub .mode .box {width: 100%; margin-right: 0;}
    .sub .mode .box:after {width: 100%; height: 1px; left:0; right:auto; bottom: 0; top:auto;}
    .sub .mode .box:last-child:after {display: block;}
}


/* 장비/스킨부스터 모달 */

.awesome-modal {/*display: none;*/ background-color: #faf9f6; border-radius: 4px; width: 100%; height:100vh; position: fixed; top: 0; right: -100%; overflow: hidden; z-index: 999; transition: .7s ease;    }
.awesome-modal * {backface-visibility: hidden;}

.awesome-overlay {display: block; position: relative; /*background:no-repeat right url('/img/sub/jsclinic/equipment/modal_rightBg.jpg'); background-size: contain;*/  z-index: 998; overflow: hidden; cursor: default; width:100%; height:100vh; }
.awesome-overlay .box.img {background:no-repeat right url('/img/sub/jsclinic/equipment/modal_rightBg.jpg'); background-size: cover; height: 100vh; padding-top:5rem;}
.awesome-overlay .box.img.fullImg {padding-top:0;}
.awesome-overlay .box.img.fullImg img {height:100%;}
.awesome-overlay .modalWrap {display:flex; align-items:center; justify-content:center; height:100%;}
.awesome-overlay .modalWrap .box {display:flex; align-items:center;}
.awesome-overlay .modalWrap .descBox {max-width:550px; width:100%; margin:auto; padding:2rem;}

.close-icon {position: absolute; width: 1rem; height: 1rem; top: 22%; right: 2rem; transition: opacity 0.2s ease;}
.close-icon::before, .close-icon::after {content: ""; position: absolute; top: 50%; left: 50%; width: inherit; height: 2px; background-color: #000;}
.close-icon::before {transform: translate(-50%, -50%) rotate(45deg);}
.close-icon::after {transform: translate(-50%, -50%) rotate(135deg);}

.modal-title {margin-top: 0;}

:target {right: 0;}
:target ~ .awesome-overlay {display: block;}

#close {position: fixed;top: 50%;transform: translateY(-50%);}

/* body.stop-scrolling {height: 100%;overflow: hidden;} */
/* .btn {padding: 0.5rem 1rem; display: inline-block; text-decoration: none; border-radius: 0.3rem; transition: 0.2s;} */
/* .btn:hover {background-color: #76c79f;} */
.btn:active {transform: scale3d(0.9, 0.9, 1);}
.btn + .btn {margin-left: 1.5rem;}
@media(max-width:1300px) {
    .awesome-overlay .modalWrap .img {padding:2rem 4rem;}
    .awesome-overlay .modalWrap .img.fullImg {padding: 0;}
}
@media(max-width:768px) {
    .awesome-overlay .modalWrap .box {width:100%; height:50vh;}
    .awesome-overlay .modalWrap .box.img img {height:100%;}
    .antiaging .awesome-overlay .modalWrap .box.img img {height:auto;}
    .awesome-overlay .modalWrap .box.desc {margin-top: 3rem;}
}


/* reepot */
.sub .reepot {position: relative; background: no-repeat center url('/img/sub/pigmentation/reepotBg.jpg'); background-size: cover;}
.sub .reepot .img {position: absolute; bottom:12.5rem;}
.sub .reepot .desc {max-width: 800px; margin-left: auto;}
.sub .reepot .reepotList li {display: flex; padding: 2.3rem 0; border-bottom:1px solid #fff;}
.sub .reepot .reepotList li:last-child {border: none;}
.sub .reepot .reepotList li .imgBox {width: 25%;}
.sub .reepot .reepotList li .txtBox {width: 75%;}
@media(max-width:1660px) {
    .sub .reepot .img img {width: 27rem;}
}
@media(max-width:1440px) {
    .sub .reepot .img img {width: 22rem;}
}
@media(max-width:1240px) {
    .sub .reepot .flex {flex-direction: column;}
    .sub .reepot .img {position: relative; bottom:0; top:2rem; margin: auto;}
    .sub .reepot .desc {margin-right: auto;}
}


/* gentle */

.sub .gentle .flexList {--x-gap:8rem;}
@media(max-width:990px) {
    .sub .gentle .flexList {--x-gap:4rem;}
}

@media(max-width:768px) {
    .sub .gentle .flexList {--y-gap:2rem;}
    .sub .gentle .box.Img {order:2;}
}