html.lock {overflow: hidden;}
.bg-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 99;}

.sub .xgap1 {--x-gap:1rem}
.sub .xgap2 {--x-gap:2rem}
.sub .xgap3 {--x-gap:3rem}
.sub .xgap4 {--x-gap:4rem}
.sub .xgap5 {--x-gap:5rem}
.sub .xgap6 {--x-gap:6rem}

.sub .ygap0 {--y-gap:0rem}
.sub .ygap1 {--y-gap:1rem}
.sub .ygap2 {--y-gap:2rem}
.sub .ygap3 {--y-gap:3rem}
.sub .ygap4 {--y-gap:4rem}
.sub .ygap5 {--y-gap:5rem}

.sub .enTit {font-family: var(--pointfont); color:var(--pointcolor);}
.sub .enTit.Light {color:#febe98;}
.sub .subTit span {color:var(--pointcolor); font-weight: 700;}

.sub img {border-radius: .75rem; overflow: hidden;}
.sub .NonRadius {border-radius: 0;}
.sub .colorBg {background-image: linear-gradient(0deg, #fff8f4, #fff);}
.sub .RadiusBt {background-image: linear-gradient(0deg, #f2efee, #fff); position: relative; border-radius: 0 0 3.125rem 3.125rem; z-index: 3;}
.sub .BgTop {margin-top: -3.125rem;}

.sub .MoreBtn {color:var(--pointcolor); font-weight: 400; display: flex; align-items: baseline; cursor: pointer;}
.sub .MoreBtn .MoreImg {display: flex; align-items: center;}
.sub .MoreBtn .moreArrow {width: 1.5rem; transform: translateX(.8125rem); transition: .3s;}
.sub .MoreBtn .moreDot {width: 1.5rem;}
.sub .MoreBtn:hover {filter: brightness(0.5);}
.sub .MoreBtn:hover .moreArrow {transform: translateX(1rem); transition: .3s;}

.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum:after {content:'· '; font-weight: 700; color:#febe98; position: absolute; left: 0; top:0;}
.sub .zum.Dark:after {color:var(--pointcolor)}

.sub .swiper-pagination {position: relative; height: .125rem; background-color: #fff;}
.sub .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}


/* subtop */
#subTop {width: 100%; height: 31.25rem; background:no-repeat center / cover; position: relative;}
#subTop.Lg {height: 50rem;}
#subTop .inner {max-width: var(--layoutwidth); width: 90%; margin: auto; position: relative; top:50%; transform: translateY(-50%);}
#subTop .enTxt {color:#fbe0cf; font-family: var(--pointfont);}
#subTop .List {display: flex; align-items: center; justify-content: center; gap:1rem; flex-wrap: wrap;}
#subTop .List li {background-color: rgba(254,190,152,.2); padding: .23rem 1rem;}
#subTop .List li p {position: relative; padding-left: 1rem;}
#subTop .List li p:after {content:'·'; color:#febe98; font-weight: 700; position: absolute; top:0; left: 0;}

#subTop .mouse-cursor {width: 1.625rem; margin: auto; z-index: 10; animation: ani-mouse 1.5s linear infinite both; position: absolute; left: 50%; transform: translateX(-50%); bottom:3rem;}

@keyframes ani-mouse {
  0%, 100% {transform: translate(-50%, 0);}
  50% {transform: translate(-50%, 15px);}
}


.subtop {width: 100%; overflow: hidden;}
.subtop .wrap {position: relative; width: 100%; height: 546px; background-position: center; background-size: cover; background-color: #000;}
.subtop .bg-video {position: absolute; left: 50%; transform: translateX(-50%); opacity: 0.5;}
.subtop img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;}



/* 장비 */
.sub #equipment .flexList.tab-contents {--y-gap: 3.5rem; display: none;}
.sub #equipment .flexList.tab-contents.on {display: flex;}
.sub #equipment .box {cursor: pointer; border-radius: 12px;}
.sub #equipment .box:hover {background-image: url("/img/sub/Kskin/equipment_bg.png"); background-repeat: no-repeat; background-size: cover; }
.sub #equipment .box .bg {transition: 0.3s;}
.sub #equipment .box:hover .bg {opacity: 0;}
.sub #equipment .box:hover .more-btn {display: none;}
.sub #equipment .box .txt {position: absolute; left: 2rem; right: 2rem; top: 4.375rem;}
.sub #equipment .box:hover .txt.wrap {top: 2.5rem;}
.sub #equipment .box .desc {opacity: 0; transition: 0.3s; }
.sub #equipment .box:hover .desc {opacity: 1;}
.sub #equipment .box .point {position: absolute; left: 0; width: 100%; top: -3%; z-index: 11;}


.sub #equipment .tab {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dbd2c3;}
.sub #equipment .tab li {padding: 1rem; cursor: pointer;}
.sub #equipment .tab li.on {font-weight: 700; color: var(--pointcolor);}


@media(max-width:990px) {
    .sub #equipment .tab {flex-wrap: wrap; padding-bottom: 1rem;}
    .sub #equipment .tab li {width: calc(100% / 4); text-align: center;}
    .sub #equipment .box .point {top: -1.25rem;}
}

@media(max-width:768px) {
    .sub #equipment .tab {justify-content: flex-start;}
    .sub #equipment .tab li {width: calc(100% / 3); text-align: center;}
    .sub #equipment .desc br {display: none !important;}
}

@media(max-width:580px) {
    .sub #equipment .flexList.tab-contents {--count: 1;}
    .sub #equipment .desc br {display: block !important;}
    .sub #equipment .desc {font-size: 1.5rem;}
    .sub #equipment .box .point {top: -3.5%;}
    .sub #equipment .tab li {width: calc(100% / 2);}
}

/* 의료진 */
.sub #doctor .box {cursor: pointer;}
.sub #doctor .tit img {width: 4rem;}
.sub #doctor .txt {position: absolute; z-index: 1; right: 2rem; top: 4.375rem;}

@media(max-width:580px) {
    .sub #doctor .flexList {--count: 1;}
}

.sub .pop-doctor {position: fixed; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 70vw; z-index: 100; background-image: url("/img/sub/Kskin/pop_bg.jpg"); background-size: cover; }
.sub .pop-doctor .close {position: absolute; left: 2rem; top: 2rem; cursor: pointer;}
.sub .pop-doctor .txtbox {margin: 6.25rem 3.5rem 2.5rem 0; height: 31.5rem; overflow-y: auto; padding: 0 1rem 0 3.5rem; width: calc(50% - 4.5rem);}
.sub .pop-doctor .imgbox {background-size: cover; background-position: center; width: 50%;}

/* 의료진이미지 */
.sub .pop-doctor#doctor01 .imgbox {background-image: url("/img/sub/Kskin/pop-doctor01.jpg");}
.sub .pop-doctor#doctor02 .imgbox {background-image: url("/img/sub/Kskin/pop-doctor02.jpg");}
.sub .pop-doctor#doctor03 .imgbox {background-image: url("/img/sub/Kskin/pop-doctor03.jpg");}
.sub .pop-doctor#doctor04 .imgbox {background-image: url("/img/sub/Kskin/pop-doctor04.jpg");}
.sub .pop-doctor#doctor05 .imgbox {background-image: url("/img/sub/Kskin/pop-doctor05.jpg");}

.sub .pop-doctor ul li {margin-top: 0.375rem; display: block; padding-left: 1rem; position: relative;}
.sub .pop-doctor ul li.mt-20 {margin-top: 1.25rem !important;}
.sub .pop-doctor ul li:after {position: absolute; left: 0; top: 0; content: "·";}

.sub .pop-doctor ::-webkit-scrollbar {width: 3px;}
.sub .pop-doctor ::-webkit-scrollbar-track {background-color: #f7eee9;}

@media(min-width:1920px) {
    .sub .pop-doctor {width: 76.875rem;}
}


@media(max-width:990px) {
    .sub .pop-doctor {width: 90vw;}
}

@media(max-width:580px) {
    .sub .pop-doctor {width: 80vw;}
    .sub .pop-doctor > .flex {flex-direction: column;}
    .sub .pop-doctor .txtbox {width: calc(100% - 4.5rem); height: 18rem; margin: 4.5rem 3.5rem 2.5rem 0;}
    .sub .pop-doctor .txtbox br {display: none;}
    .sub .pop-doctor .imgbox {width: 100%; height: 35rem; background-position: center top;}
}

@media(max-width:480px) {
    .sub .pop-doctor {width: 90vw;}
}

/* special page */
/* special_why */
.sub .special_why .Img img {margin-left: auto; margin-right: 2rem; width: 26.375rem;}
@media(max-width:768px) {
    .sub .special_why .Img img {margin-right: auto;}
}

/* proof */
.sub .proof .box {position: relative;}
.sub .proof .Txt {position: absolute; color:#fff; left: 2rem; bottom: 2rem;}


/* adjust */
.sub .adjust .Inner {background: no-repeat 35% / cover url('/img/sub/Kskin/adjustBg.jpg'); padding: 9.375rem 0; border-radius: .75rem; overflow: hidden; position: relative;}
.sub .adjust .TxtBox {max-width: 47.1875rem; width: 90%; margin-left: auto; position: relative; z-index: 3;}
@media(max-width:1440px) {
    .sub .adjust .Inner:after {content:''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; left: 0; top:0;}
}


/* principle */
.sub .principle .Img {min-height: 19.6875rem; background: no-repeat center / cover; border-radius: .75rem;}
.sub .principle .Desc {padding-left: 4rem;}
.sub .principle .Desc.L {max-width: 35.625rem; margin-left: auto;}
@media(max-width:768px) {
    .sub .principle .Desc {order: 2; padding-bottom: 2rem; padding-left: 2rem;}
    .sub .principle .Desc.L {max-width: 100%;}
}


/* place */
.sub .place {background: no-repeat center / cover url('/img/sub/Kskin/placeBg.jpg');}
.sub .place .box {border-radius: .75rem; backdrop-filter: blur(15px) brightness(115%); background-color: rgba(255,255,255,.7); padding: 3rem 3rem 3.5rem;}
/* special page 끝*/


/* Definition */
.sub .Definition {background-image: linear-gradient(0deg, #fff8f4, #fff);}
.sub .Definition.NonBg {background-image: none;}
.sub .Definition .ImgBox {height: 31.625rem; background: no-repeat center / cover; border-radius: .75rem;}
.sub .Definition .BgBox {background: no-repeat center / cover; border-radius: .75rem; padding: 3rem 1rem;}
.sub .Definition .BgBox .box {padding: 1rem;}
.sub .Definition .BgBox .Line {border-right: 1px solid var(--pointcolor);}

.sub .Definition .Desc {color:#fff; position: absolute; left: 3rem; bottom:1rem; font-family: var(--pointfont);}

.sub .Definition .ImgBox2 {max-width: 548px;}
@media(max-width:1240px) {
    .sub .Definition .SlideInner {padding-left: 5%; width: 100%; max-width: 100%;}
    .sub .Definition .flexList.swiper-wrapper {flex-wrap: nowrap; --x-gap:0; justify-content: flex-start;} 
}
@media(max-width:500px) {
    .sub .Definition .ImgBox {height: 24.625rem;} 
    .sub .Definition .BgBox .Line {border-bottom:1px solid var(--pointcolor); border-right: none;}
}


/* DefinitionSlide */
.sub .DefinitionSlide {background-image: linear-gradient(0deg, #fff8f4, #fff);}
.sub .DefinitionSlide .flexBox {display: flex; justify-content: space-between; gap:3rem 2rem;}
.sub .DefinitionSlide .Img img {border-radius: 1.25rem;}
.sub .DefinitionSlide .Desc {max-width: 59.0625rem; width:55%;}

.sub .DefinitionSlide .swiper-pagination {max-width: 43.125rem; width: 90%; margin-top: 2rem;}

@media(max-width:990px) {
    .sub .DefinitionSlide .Img {padding-right: 5%;}
    .sub .DefinitionSlide .Desc {max-width: 100%; width: 100%;}
}



/* Differentiation */
.sub .Differentiation {background: no-repeat center / cover;}

.sub .Differentiation .Inner {max-width: 1170px; margin: auto;}
.sub .Differentiation .box {aspect-ratio: 12/15; background: no-repeat center bottom / cover; border-radius: .75rem; overflow: hidden;}
.sub .Differentiation .Desc {width: 80%; position: absolute; left: 50%; transform: translateX(-50%); top:2.5rem;}
@media(max-width:768px) {
    .sub .Differentiation .box {max-width: 370px; margin: auto;}
}


/* Precise */
.sub .Precise .flexBox {display: flex; gap:5rem 2rem; align-items: center; justify-content: space-between;}
.sub .Precise .flexBox .Img {max-width: 59rem;}
.sub .Precise .flexBox .Img img {border-radius: .75rem 0 0 .75rem;}
@media(max-width:990px) {
    .sub .Precise .flexBox {align-items: flex-start;}
    .sub .Precise .flexBox .Img img {border-radius: .75rem}
}


/* KnowHow */
.sub .KnowHow .DescBox {background-color: #fff; border-radius: .75rem; padding: 2.5rem 2rem;}
.sub .KnowHow .Desc {padding-left: 2rem;}

.sub .KnowHow .Inner {max-width: 33.75rem; width: 100%; margin: auto;}
.sub .KnowHow .KnowHowList {display: flex; flex-direction: column; gap:1rem;}
.sub .KnowHow .KnowHowList li {border-radius: .25rem; background-color: #f2efee; padding: .5rem 2rem; text-align: left;}
.sub .KnowHow .KnowHowList p {position: relative; padding-left: 1.5rem;}
.sub .KnowHow .KnowHowList p:after {content:'·'; font-weight: 800; color:var(--pointcolor); position: absolute; top:0; left: 0;}

.sub .KnowHow .flexBox {display: flex; align-items: center; gap:2rem; background-color: #fff; border-radius: .75rem; padding: 2.5rem 2rem;}

.sub.Hairloss .KnowHow {background: no-repeat center / cover url('/img/sub/Dermatopathy/Hairloss_KnowHowBg.jpg');}
@media(max-width:990px) {
    .sub .KnowHow .DescBox {max-width: 80%; max-width: 665px; margin: auto;}
    .sub .KnowHow .Inner {max-width: 100%;}
}
@media(max-width:500px) {
    .sub .KnowHow .Desc {padding-left: 0;}
    .sub .KnowHow .DescBox img {margin-right: auto; margin-left: 0;}

    .sub .KnowHow .flexBox {flex-direction: column;}
    .sub .KnowHow .flexBox img {margin-right: auto; margin-left: 0;}
}


/* HowTo */
.sub .HowTo .w1170 {max-width: 1170px; margin: auto; background-color: #fff; padding: 3rem; border-radius: .75rem;} 
.sub .HowTo .PoreHowList {display: flex; flex-direction: column; gap:5rem}
.sub .HowTo .PoreHowList li {background-color: #fff8f4; border-radius: 4.375rem; padding: 1rem; position: relative;}
.sub .HowTo .PoreHowList li:after {content:'+'; font-weight: 700; font-size: 2rem; color:var(--pointcolor); position: absolute; left: 50%; transform: translateX(-50%); bottom:-4rem;}
.sub .HowTo .PoreHowList li:last-child:after {display: none;}
@media(max-width:768px) {
    .sub .HowTo .Img img {margin: auto;}
}



/* KnowHow2 */
.sub .KnowHow2 .flexBox {background-color: #fff; border-radius: .75rem; padding: 2.5rem 3rem; display: flex; gap:3rem 2rem;}
.sub .KnowHow2 ul {display: flex; flex-direction: column; gap:1rem; justify-content: space-between; height: 100%; padding-left: 2rem;}
.sub .KnowHow2 ul li {display: flex; align-items: baseline; gap: .7rem 1.5rem;}
.sub .KnowHow2 .Tit {color:#fff; max-width: 7.1875rem; width: 100%; border-radius: 1.25rem; padding: .2rem .5rem; text-align: center; background-color: var(--pointcolor);}
@media(max-width:990px) {
    .sub .KnowHow2 .flexBox {padding: 4rem 3rem;}
    .sub .KnowHow2 ul {max-width: 660px; width: 100%; margin: auto; padding-left: 0; gap:1.5rem;}
}
@media(max-width:500px) {
    .sub .KnowHow2 ul li {flex-direction: column;}
}



/* Equipment */
.sub .Equipment {background: no-repeat center bottom / cover url('/img/sub/EquipmentBg.jpg');}
.sub .Equipment .flexBox {display: flex; gap:5rem 2rem;}
.sub .Equipment .zum {position: relative; padding-left: 1.5rem;}
.sub .Equipment .zum:after {content:'·'; font-weight: 700; position: absolute; left: 0; top:0;}
.sub .Equipment ul {display: flex; flex-direction: column; gap:.5rem;}
.sub .Equipment ul li {background-color: #fff7f2; border-radius: .25rem; padding: .6rem 0 .6rem 2rem; max-width: 30rem; width: 90%;}

.sub .EquipmentSwiper .Name {position: absolute; left: 2.5rem; bottom:1.7rem; color:#fff;}
.sub .Equipment .NameIn {position: absolute; left: 3rem; bottom:2rem; color:#fff;}
.sub .Equipment .xxs-Slide {flex-wrap: nowrap; gap:0 20px;}
.sub .Equipment .xxs-Slide .swiper-slide {width: fit-content;}
@media(max-width:1340px) {
    .sub .Equipment .flexBox {flex-direction: column;}
    .sub .Equipment .flexBox .width60 {width: 100%;} 
    .sub .Equipment .flexBox .width40 {width: 90%;}
    .sub .Equipment ul li {max-width: 34rem;}
}
@media(max-width:768px) {
    .sub .Equipment .xxs-Slide {gap:0;}
}



/* AntiPoint */
.sub .AntiPoint {background: no-repeat center bottom / cover;}
.sub .AntiPoint .flexBox {display: flex; gap:3rem 5rem;}

.sub .AntiPoint .DescBox {background-color: #fff; border-radius: .75rem; padding:3rem 2.5rem;}

.sub .AntiPoint .DescTB {border-spacing: .3rem;}
.sub .AntiPoint .DescTB tr, .sub .AntiPoint .DescTB td {vertical-align: baseline;}
.sub .AntiPoint .DescTB .Tit {max-width: 132px; padding-right: 2rem; font-weight: 500; white-space: nowrap;}

.sub .AntiPoint .zum:after {color:var(--pointcolor)}



/* Point */
.sub .Point {background-image: linear-gradient(180deg, #fff8f4, #fff);}
.sub .Point .box {aspect-ratio: 1 / 1; border-radius: 50%; max-width: 420px; border:1px solid var(--pointcolor); display: flex; align-items: center; justify-content: center; position: relative;}
.sub .Point .box.L {right: -3rem;}
.sub .Point .box.R {left:-3rem;}
.sub .Point .Tit {background-color: var(--pointcolor); border-radius: 1.125rem; width: 6.625rem; white-space: nowrap; padding: .5rem 1rem 0; line-height: 1.3; margin: auto; font-family: var(--pointfont); color:#fff;}

.sub .Point.Bg {background: no-repeat center / cover url('/img/sub/Laser/Melasma_pointBg.jpg'); }

@media(max-width:768px) {
    .sub .Point .box.L {right: -2rem;}
    .sub .Point .box.C {left:-2rem;}
    .sub .Point .box.R {left:0; top:-8rem;}
}
@media(max-width:500px) {
    .sub .Point .box.L {right: 0; bottom:-4rem;}
    .sub .Point .box.C {left:0;}
    .sub .Point .box.R {left:0; top:-4rem;}
}


/* PointPlus */
.sub .PointPlus {background-image: linear-gradient(180deg, #fff8f4, #fff);}
.sub .PointPlus .Inner {max-width: 1170px; margin: auto;}
.sub .PointPlus .box {padding: 3rem; border-radius: .75rem; position: relative; background-image: linear-gradient(180deg, #f5ece7, #fbf8f7);}
.sub .PointPlus .Plus:after {content:'+'; font-weight: 700; color:var(--pointcolor); height: fit-content; font-size: 3rem; position: absolute; right: -3.5rem; top:50%; transform: translateY(-0%); margin: auto;}
.sub .PointPlus .PointPlusList {display: flex; flex-direction: column; gap:1rem;}
.sub .PointPlus .PointPlusList li {border-radius: 1.5625rem; padding: .7rem 2rem; background-color: #fff;}
@media(max-width:768px) {
    .sub .PointPlus .Plus:after {left: 50%; transform: translateX(-50%); top:auto; bottom: -4.5rem;}
}



/* Process */
.sub .Process .flexList {--x-gap:6rem; --y-gap:3rem;}
.sub .Process .box {position: relative;}
.sub .Process .box:after {content:''; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: #febe98; background-image: url('/img/sub/arrow.png'); background-repeat: no-repeat; background-size: 1rem; background-position: center; position: absolute; top:40%; transform: translateY(-50%); z-index: 3; right:-4.2rem;}
.sub .Process .box:last-child:after {display: none;} 
.sub .Process .flexBox {display: flex; gap:1rem;}
.sub .Process .Tit {width: 20%; white-space: nowrap;}
@media(max-width:990px) {
    .sub .Process .box:nth-child(2):after {display: none;} 
    .sub .Process .flexBox4 {justify-content: center;}
    .sub .Process .flexBox4 .box {max-width: 277px;}
}
@media(max-width:768px) {
    .sub .Process .flexList {--y-gap:6rem;}
    .sub .Process .flexBox3 .box {width: 100%; max-width: 404px; margin: auto;}
    .sub .Process .flexBox3 .box:after {left: 50%; right: 0; transform: translateX(-50%) rotate(90deg); top: auto; bottom:-4rem;}
    .sub .Process .flexBox3 .box:nth-child(2):after {display: block;} 
    .sub .Process .Tit {width: fit-content;}
}
@media(max-width:500px) {
    .sub .Process .flexBox4 .box:after {left: 50%; right: 0; transform: translateX(-50%) rotate(90deg); top: auto; bottom:-4rem;}
    .sub .Process .flexBox4 .box:nth-child(2):after {display: block;} 
}



/* Before */
.sub .Before {background: no-repeat center / cover url('/img/sub/BeforeBg.jpg');}
.sub .Before .MoreBtn {position: absolute; right:0; bottom:0;}

.sub .Before .SlideBox {max-width: 1920px; width: 100%;}
.sub .Before .BeforeSwiper .swiper-slide {border-radius: .75rem; overflow: hidden; opacity: .4;}
.sub .Before .BeforeSwiper .swiper-slide-active {opacity: 1;}
.sub .Before .BeforeSwiper img {border-radius:0;}
.sub .Before .Login {color:#fff; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(10px); position: absolute; width: -webkit-fill-available; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center;}

.sub .Before .ArrowBtn {width: 2.5rem; height: 2.5rem; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgba(255,255,255,.7); display: flex;align-items: center;justify-content: center;}
.sub .Before .ArrowBtn img {width: 1rem;}
@media(max-width:768px) {
    .sub .Before .MoreBtn {position: relative; margin-top: 3rem;}
    .sub .Before .SlideBox {width: 100%; padding-left: 5%;}
}

/* Counsel */
.sub .Counsel .Desc {background: no-repeat center /cover url('/img/sub/CounselBg.jpg'); padding-left: calc((100% - 1410px) / 2); aspect-ratio: 12 / 10; display: flex; align-items: center;}
.sub .Counsel .Img {background: no-repeat center /cover url('/img/sub/CounselImg.jpg'); align-self: stretch;}
@media(max-width:1410px) {
    .sub .Counsel .Desc {justify-content: center; aspect-ratio: 12 / 11;}
}
@media(max-width:990px) {
    .sub .Counsel .Desc {aspect-ratio: 12 / 8;}
    .sub .Counsel .Img {aspect-ratio: 12 / 10;}
}


/* pointBg */
.sub .pointBg {background: no-repeat center / cover url('/img/sub/Signature/pointBg.jpg');}
.sub.Conscious .pointBg {background-image: url('/img/sub/Pain/pointBg.jpg');}


/* Product */
.sub .Product .ProductBox {border-radius: .75rem; background-color: #fff;}
.sub .Product .ImgBox {background: no-repeat center / cover; align-self: stretch; border-radius: .75rem;}
.sub .Product .Desc {padding: 2.5rem 1rem;}
@media(max-width:990px) {
    .sub .Product .ProductBox {max-width: 691px; width: 100%; margin: auto;}
}
@media(max-width:500px) {
    .sub .Product .ImgBox {aspect-ratio: 12 / 8;}
    .sub .Product .Desc {padding: 3rem;}
}



/* result */
.sub .result {background-image: linear-gradient(180deg, #fff8f4, #fff); }
.sub .result .Img img {border-radius: 0 .75rem .75rem 0; overflow: hidden;} 
.sub .result .Desc > div {max-width: 32.75rem; width: 100%;}
@media(max-width:990px) {
    .sub .result .Img  {order:2;}
    .sub .result .Desc {padding-left: 5%; justify-content: flex-start;}
}
@media(max-width:500px) {
    .sub .result .Desc > div {max-width: 100%;}
}


/* Recommendation */
.sub .Recommendation .flexBox {display: flex; align-items: center; gap:3rem 2rem;}
.sub .Recommendation .flexList.Lg {max-width: 995px; width: 95%;} 
.sub .Recommendation .Txt {position: absolute; width: 80%; bottom:3vw; left: 3vw;}
.sub .Recommendation .enTxt {color:rgba(255,255,255,.5); font-family: var(--pointfont);}



/* Speciality */
.sub .Speciality .Dot {position: relative; padding-top: .7rem;}
.sub .Speciality .Dot:after {content:''; width: .4rem; height: .4rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; top:0; left: 0; right:0; margin: auto;}

.sub .Speciality .box {background: no-repeat 70% center / cover; color:#fff; padding: 9.375rem 0; border-radius: .75rem; position: relative;}
.sub .Speciality .Inner {max-width: 1260px; width: 90%; margin: auto; position: relative; z-index: 3;}
.sub .Speciality .RoundBox {background-color: rgba(58,40,28,.5); border-radius: .25rem; width: fit-content; padding: .5rem 1.5rem;}

.sub .Speciality .certificate {position: absolute; max-width: 54.4375rem; width: 70%; right:-3rem; top:0; bottom:0; margin: auto;}
@media(max-width:990px) {
    .sub .Speciality .certificate {position: relative; margin-top: 3rem; width: 100%; right:0;} 
}
@media(max-width:768px) {
    .sub .Speciality .box:after {content:''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; left: 0; top:0;}
    .sub .Speciality .RoundBox {background-color: rgba(58,40,28,.7);}
}


/* PointHalf */
.sub .PointHalf {background-image: linear-gradient(180deg, #fff8f4, #fff);}
.sub .PointHalf .flexBox {display: flex; align-items: center; justify-content: space-between; gap:3rem 2rem;}
.sub .PointHalf .Img img {border-radius: 0 .75rem .75rem 0;}
.sub .PointHalf .Desc {display: flex; align-items: center; justify-content: flex-end;}
.sub .PointHalf .Desc > div {max-width: 35.625rem; width: 100%;}
@media(max-width:990px) {
    .sub .PointHalf .section-right_mini {padding-left: 5%;}
    .sub .PointHalf .flexBox {align-items: flex-start;}
    .sub .PointHalf .Desc {justify-content: flex-start;}
    .sub .PointHalf .Desc > div {max-width: 100%;}
    .sub .PointHalf .Img {order:2;}
    .sub .PointHalf .Img img {border-radius: .75rem}
}


/* Factor */
.sub .Factor .Desc {color:#fff; position: absolute; left: 2rem; bottom:2rem;} 
@media(max-width:990px) {
    .sub .Factor .flexList {max-width: 680px; margin-left: auto; margin-right: auto;}
}
@media(max-width:500px) {
    .sub .Factor .box {width: fit-content;}
}



/* Case */
.sub .Case {background: no-repeat center / cover url('/img/sub/Laser/Hair_CaseBg.jpg');}
.sub .Case .Line {width: 1px; height: 2.5rem; background-color: var(--pointcolor); margin: 2rem auto;}
.sub .Case .box {border-radius: .25rem; background-color: #fff; padding: .55rem 5%; display: flex; gap:1rem; align-items: baseline;}
.sub .Case .enTit {white-space: nowrap;}
@media(max-width:500px) {
    .sub .Case .box {flex-direction: column; gap:.3rem; padding: 1rem 5%;}
}


/* How */
.sub.Volume .How {background: no-repeat center / cover;}
.sub .How .box {border-radius: .75rem; background-color: #fff; padding: 2.5rem 2rem;}
.sub.Stretch .How .box {padding: 2.5rem 1.5rem;}
.sub .How .HowArrow {width: 1.9375rem; margin: 3rem auto; border-radius: 0;}
@media(max-width:768px) {
    .sub .How .box {padding: 2rem;}
}
@media(max-width:500px) {
    .sub.Stretch .How .box {padding: 2.5rem 1rem;}
}


/* Order */
.sub .Order .Img {width: fit-content;}
.sub .Order .Txt {color:#fff; position: absolute; bottom:2rem; width: max-content; left: 50%; transform: translateX(-50%);}

.sub .Order .Desc {max-width: 37.5rem; margin-left: auto;}
.sub .Order .OrderList {display: flex; flex-direction: column; gap:1rem;}
.sub .Order .OrderList li {display: flex; align-items: baseline; gap:0 2rem; border-radius: .25rem; background-color: #f6f3f2; padding: .5rem 2rem;}
.sub .Order .OrderList .enTit {white-space: nowrap;}
@media(max-width:990px) {
    .sub .Order .Desc {margin-left: 0; max-width: 630px;}
}


/* different */
.sub .different .flexList {background-image: linear-gradient(0deg, #fbf9f9, #f6f3f2); border-radius: .75rem;}
.sub .different .Img {padding: 3rem 0 3rem 4rem;} 
.sub .different .Desc {max-width: 31.875rem; width: 100%; margin: auto;}
@media(max-width:990px) {
    .sub .different .Img {padding: 0;}
    .sub .different .Img img {margin: auto;}
    .sub .different .flexList {padding: 3rem 5%;}
    .sub .different .Desc {padding: 2rem 0; max-width: 100%;}
}


/* with */
.sub .with .flexBox {display: flex; gap:3rem 2rem; align-items: center;}

.sub .with .Desc {position: absolute; bottom:3rem; left: 3rem;} 
.sub.Anesthesia .with .Desc {left: 2rem;}
.sub .with .enTxt {font-family: var(--pointfont); color:rgba(255,255,255,.5);}

.sub .with .swiper-pagination {margin-top: 2rem; max-width: 52.5rem; width: 90%; background-color: #f0eeeb;}



/* Three */
.sub .Three .Inner {max-width: 1170px; margin: auto;}
.sub .Three .ThreeTB {width: 100%; border-spacing: 0; border-radius: 12px; border-collapse:collapse; outline:2px solid var(--pointcolor); overflow: hidden; background-color: #fff;} 

.sub .Three .ThreeTB th {padding: 1rem; font-weight: 700; border-right:1px solid var(--pointcolor);}
.sub .Three .ThreeTB td {padding: 1rem 2rem; border:1px solid var(--pointcolor)}


.sub .Three .ThreeTB .NoneLeft {border-left: none;}
.sub .Three .ThreeTB .NoneRight {border-right: none;}
.sub .Three .ThreeTB tr:last-child td {border-bottom: none;}
.sub .Three .ThreeTB .TitBg {background-color: rgba(124,101,85,.1);}
.sub .Three .ThreeTB .TitBg2 {background-color: rgba(124,101,85,.2);}
.sub .Three .ThreeTB .TitBg3 {background-color: #f2e9e4;}
.sub .Three .ThreeTB .DescBg {background-color: #fff8f4;}
@media(max-width:768px) {
    .sub .Three .scrollBox {overflow-x: scroll; width: 100%; padding: 1rem .5rem;}
    .sub .Three .scrollBox::-webkit-scrollbar {display: none;}
    .sub .Three .ThreeTB {min-width: 800px;}
}

/* Principles */
.sub .Principles .Inner {background: no-repeat right center / cover; border-radius: .75rem; position: relative; overflow: hidden;}
.sub .Principles .Txt {max-width: 50.625rem; width: 100%; position: relative; z-index: 3;}

@media(max-width:768px) {
    .sub .Principles .Inner:after {content:''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; left: 0; top:0;} 
}



/* Effect */
.sub .Effect .Inner {background: no-repeat right center / cover url('/img/sub/Anti/EffectBg.jpg'); display: flex; align-items: center; gap:3rem 2rem; padding: 3rem; border-radius: .75rem; position: relative; overflow: hidden;}
.sub .Effect .EffectList {display: flex; flex-direction: column; gap:.7rem; max-width: 392px; width: 100%;}
.sub .Effect .EffectList li {background-color: #fff7f2; border-radius: .25rem; padding: .7rem 2rem;}
.sub .Effect .EffectList .zum:after {color:var(--pointcolor)}
@media(max-width:768px) {
    .sub .Effect .Inner {flex-direction: column; align-items: flex-start; padding: 3rem 2rem;}
    .sub .Effect .EffectList {max-width: 100%;}
}


/* PointArrow */
.sub .PointArrow {background-image: linear-gradient(180deg, #fff8f4, #fff);}
.sub .PointArrow .Inner {max-width: 1230px; margin-left: auto; margin-right: auto;}

.sub .PointArrow .Dot {width: 13.125rem; position: relative; height: 13.125rem; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: auto;}
.sub .PointArrow .Dot1 {background-color: #d8c8be;}
.sub .PointArrow .Dot2 {background-color: #c2afa1;}
.sub .PointArrow .Dot3 {background-color: #a69081;}
.sub .PointArrow .Dot4 {background-color: #7c6555;}

.sub .PointArrow .Dot img {width: 6.625rem;}

.sub .PointArrow .Dot:after {content:''; width: 100%; height: 1px; border-bottom: 1px dotted var(--pointcolor); position: absolute; top:0; bottom:0; left: 100%; margin: auto;}
.sub .PointArrow .box:last-child .Dot:after {display: none;}

.sub .PointArrow .RoundBox {max-width: 16rem; border-radius: 20px; border:1px solid var(--pointcolor); padding: .3rem 0; color:var(--pointcolor); margin: 1.5rem auto; text-align: center;}
.sub .PointArrow .RoundBox.MD {max-width: 12rem;}
.sub.AntiFiller .PointArrow .RoundBox {max-width: fit-content; padding: .3rem 2rem;}
.sub .PointArrow .zum:after {color: var(--pointcolor);}

.sub .PointArrow .DotList {display: flex; flex-direction: column; gap:.5rem;}
.sub .PointArrow .DotList li {display: flex; gap:.5rem; text-align: left;}
.sub .PointArrow .DotList li .zum {white-space: nowrap; max-width: 6.25rem;}

@media(max-width:990px) {
    .sub .PointArrow .Dot:after {display: none;}
    .sub.AntiFiller .PointArrow .Dot:after {display: block;}
    .sub .PointArrow .DotList {align-items: center;}
}
@media(max-width:768px) {
    .sub.AntiFiller .PointArrow .Dot:after {display: none;}
}



/* Procedure */
.sub .TabMenu {display: flex; align-items: center; justify-content: center; gap:1rem;}
.sub .TabMenu li {border-radius: 1.5625rem; padding: .5rem 2rem; border:1px solid var(--pointcolor); color:var(--pointcolor); cursor: pointer;}
.sub .TabMenu li.active {background-color: var(--pointcolor); color:#fff; font-weight: 700;}

.sub .Procedure .TabInner {background: no-repeat center / cover url('/img/sub/Anti/ProcedureTabBg.jpg'); border-radius: .75rem; display: flex; padding: 3rem; min-height: 650px;}
.sub .Procedure .Desc {background-color: #fff; border-radius: .75rem; padding: 3rem 2rem;}
.sub .Procedure .Desc_wrap {align-self: center;}

.sub .Procedure .ProcedureImg {position: absolute; left: 50%; transform: translateX(-50%); bottom:-3rem; width: 20.375rem; border-radius: 0;}
.sub .Procedure .Tit {color:#fff; position: absolute; left: 0; bottom:0;}

.sub .Procedure .Line {border-right: 1px solid rgba(124,101,85,.3);}
.sub .Procedure .MiniFlex {display: flex; flex-direction: column; gap:1rem;}
.sub .Procedure .MiniFlex li {display: flex; gap:1rem; text-align: left;}
.sub .Procedure .MiniFlex .Img {max-width: 6.625rem;}

.sub .Procedure .radius4 {border-radius: .25rem; overflow: hidden;}

.sub .Procedure .Desc .box {padding: 1rem;}

@media(max-width:1240px) {
    .sub .Procedure .Line2 {border-bottom: 1px solid var(--pointcolor); border-right: none;}
    .sub .Procedure .MiniFlex {flex-direction: row; justify-content: space-between;}
    .sub .Procedure .MiniFlex li {width: 30%; flex-direction: column; text-align: center;}
    .sub .Procedure .MiniFlex .Img {margin: auto;}
    .sub .Procedure .Img2 {width: 50%; margin-left: auto; margin-right: auto;}
}
@media(max-width:990px) {
    .sub .Procedure .TabInner {flex-direction: column;}
    .sub .Procedure .ProcedureImg {position: relative; bottom:0;}
    .sub .Procedure .Tit {bottom:3rem;}
}
@media(max-width:768px) {
    .sub .Procedure .MiniFlex {flex-direction: column;}
    .sub .Procedure .MiniFlex li {flex-direction: row; width: 100%; text-align: left;}
    .sub .Procedure .MiniFlex .Img {width: 6.625rem;}
    .sub .Procedure .MiniFlex .ImgDesc {width: calc(100% - 7rem);}
}
@media(max-width:500px) {
    .sub .Procedure .Line {border-bottom: 1px solid var(--pointcolor); border-right: none;}
    .sub .Procedure .Tab3 .Desc img {width: 50%; margin-bottom: 1rem;}
    .sub .Procedure .Desc {padding: 2rem 1.5rem;}
}



/* type */
.sub .type .Txt {color:#fff; position: absolute; bottom: 2rem; left: 2rem;}
.sub .type .Txt2 {color:#fff; position: absolute; top:1.7rem; right:2rem;}
@media(max-width:768px) {
    .sub.Botox .type .flexList {justify-content: flex-start;}
}
@media(max-width:500px) {
    .sub .type .xxsImg .box {max-width: 331px; width: 100%; margin: auto;}
}


/* disease */
.sub .disease .Desc {background-color: #fff; padding: 2rem 3rem; border-radius: 0 0 .75rem .75rem;}



/* Vaccination */
.sub .Vaccination {background: no-repeat center / cover url('/img/sub/Dermatopathy/VaccinationBg.jpg');}
.sub .Vaccination ul {display: flex; flex-direction: column; gap:.5rem;}
.sub .Vaccination ul li {background-color: #fff7f2; border-radius: .25rem; padding: .6rem 2rem; max-width: 30rem; width: 100%; display: flex;}
.sub .Vaccination .zum {width: 60%;}
.sub .Vaccination .Desc {width: 40%;}
@media(max-width:768px) {
    .sub .Vaccination ul li {max-width: 35rem;}  
}