:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .Tit_en {font-family: var(--pointfont); letter-spacing: 0;}

.sub .xgap0 {--x-gap:0}
.sub .xgap2 {--x-gap:2rem}
.sub .xgap3 {--x-gap:3rem}
.sub .xgap4 {--x-gap:4rem}

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

.sub .borderBox {box-shadow: 0 0 0 3px var(--pointcolor) inset;}

@keyframes spinCircle{100% {transform: rotate(360deg);}}

/* sub Top */
.subTop {height:58.5625rem; position:Relative; top:0; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:transform 2s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}

.subTop .inner {position: relative; text-align: center; max-width: 1410px; padding: 0 2rem; top:21rem; margin: auto; z-index: 3;}
.subTop .subTab {display: flex; align-items: center; justify-content: center; margin-top: 9rem; gap:1rem 0; padding-bottom: 1rem;}
.subTop .subTab li {width: fit-content; padding: 0 2.5%; position: relative;}
.subTop .subTab li:after {content:''; height: 100%; width: 1px; background-color: #c6b797; position: absolute; right: 0; top:0; bottom:0; margin: auto;}
.subTop .subTab li:last-child:after {display: none;}
.subTop .subTab li a {color:#fff; position: relative; padding-bottom: .3rem;}
.subTop .subTab li a.on {color:var(--pointcolor); font-weight: 600;}
.subTop .subTab li a.on:after {content:''; position: absolute; width: 100%; height: 3px; background-color: var(--pointcolor); bottom:0; right:0; left:0; margin: auto;}
@media(max-width:500px) {
    .subTop .inner {top:17rem;}
    .subTop .subTab {flex-wrap: wrap;}
    .subTop .subTab li {width: 50%;}
    .subTop .subTab li:nth-child(even):after {display: none;}
}


/* intro */
.sub .intro .Desc {background-size: cover; margin-right: 13%; padding: 7rem 0;}
.sub.pigment.freckle .intro .Desc {background: no-repeat right url('/img/sub/pigment/freckle.jpg');}
.sub.scar.laser .intro .Desc  {background: no-repeat right url('/img/sub/scar/laser.jpg');}
.sub.acne.acneTreatment .intro .Desc  {background: no-repeat right url('/img/sub/acne/acneTreatment.jpg');}
.sub.skinCare.medical .intro .Desc  {background: no-repeat right url('/img/sub/skinCare/medical.jpg');}

.sub.pigment .intro .Desc {background: no-repeat center url('/img/sub/pigment/toning.jpg');}
.sub.lifting .intro .Desc {background: no-repeat center url('/img/sub/lifting/lifting.jpg');}
.sub.scar .intro .Desc {background: no-repeat center url('/img/sub/scar/scar.jpg');}
.sub.acne .intro .Desc {background: no-repeat center url('/img/sub/acne/acne.jpg');}
.sub.mans .intro .Desc {background: no-repeat center url('/img/sub/mans/mans.jpg');}
.sub.skinCare .intro .Desc {background: no-repeat center url('/img/sub/skinCare/skinCare.jpg');}
.sub.dermatopathy .intro .Desc {background: no-repeat center url('/img/sub/dermatopathy/dermatopathy.jpg');}
.sub.beauty .intro .Desc {background: no-repeat center url('/img/sub/beauty/beauty.jpg');}


.sub .intro .Txt {margin-left: 13%; padding: 0 2rem;}
@media(max-width:990px) {
    .sub .intro .Desc {margin-right: 0;}
    .sub .intro .Txt {margin-left: 0;}
}


/* Definition */
.sub .Definition .Definition_wrap {display: flex; justify-content: space-between; gap:3rem 0;}
.sub .Definition .Desc {/* max-width: 610px;  */width: 100%; margin-right: 2rem;}
.sub .Definition .Desc .box {position: relative; padding-left: 2rem;}
.sub .Definition .Desc .box:after {content:''; width: .3125rem; height: 90%; background-color: var(--pointcolor); position: absolute; left: 0; top:0; bottom:0; margin: auto;}
@media(max-width:990px) {
    .sub .Definition .Definition_wrap {flex-direction: column;}
    .sub .Definition .Desc2 {/* max-width: 610px;  */width: 100%; margin-left: 2rem; margin-right: 0;}
}
@media(max-width:500px) {
    .sub .Definition .Desc {width: 90%;}
}



/* Equipment */
.sub .Equipment .Desc {padding-right: 2rem;}
.sub .Equipment .swiper-slide {background-color: #fff; padding: 3rem 2rem 0 2rem;}
.sub.mansUlthera .Equipment .swiper-slide {background-color: transparent; padding: 0;}
.sub .Equipment .swiper-pagination {position: relative; max-width: 1410px; margin-top: 3rem; height: 8px; background-color: #fff;}
.sub .Equipment .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}




/* Solution */
.sub .Solution .Solution_wrap {max-width: 1200px; width: 90%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap:0 1rem; margin-top: -1.5rem;}
.sub .Solution .Title {background-color: #f7f7f7; padding: .7rem 1rem; margin-top: 2rem;}
.sub .Solution .plus {max-width: 3.125rem; width: 100%; height: 3.125rem; border-radius: 50%; background-color: #f4f4f4; font-size: 1.875rem; font-weight: 600;}
.sub .Solution img {width: 12.75rem;}
@media(max-width:768px) {
    .sub .Solution .Solution_wrap {flex-wrap: wrap; margin-top: 0;}
    .sub .Solution .box {width: 48%;}
    .sub .Solution .plus {display: none;}
}

.sub .cont_box hr.line { display: block; width: 75%; margin: .75rem auto; }

/* Speciality */
.sub .Speciality .flexList {max-width: 1100px; margin: 3rem auto 0;}
.sub .Speciality .box {background-color: #f7f7f7; padding: 5rem 2rem;}
.sub .Speciality .borderTit {color:var(--pointcolor); border-bottom: 3px solid var(--pointcolor); display: inline-block; padding-bottom: .3rem;}

.sub .Speciality .boxColor1 { background-color: #f7f7f7; }
.sub .Speciality .boxColor2 { background-color: #fcf5f1; }
.sub .Speciality .boxColor3 { background-color: #ffebe1; }


/* CheckList */
.sub .CheckList .Line {width: 12.5rem; height: 1px; background-color: #000; margin: 1rem auto 2rem;}
.sub .CheckList .box {background-color: #f7f7f7; padding: 5rem 1rem;}



/* subCommon */
.sub .subCommon {position: relative;}
.sub .subCommon:after {background: url('/img/sub/subCommonBg.jpg') no-repeat; background-size: cover; content:''; display: inline-block; width: 100%; height: 30.5rem; position: absolute; top:0; left:0; right:0; margin: auto; z-index: -1;}
.sub .subCommon .flexList {max-width: 1100px; margin: 5rem auto 0;}
@media(max-width:500px) {
    .sub .subCommon:after {height: 26rem;}
}

/* subCommon2 */
.sub .subCommon2 {position: relative;}
.sub .subCommon2:after {background: url('/img/sub/subCommon2_Bg.jpg') no-repeat; background-size: cover; content:''; display: inline-block; width: 100%; height: 100%; position: absolute; top:0; left:0; right:0; margin: auto; z-index: -1;}
.sub .subCommon2 .flexList {max-width: 1100px; margin: 5rem auto 0;}



/* Comparison */
.sub .Comparison table {width: 100%; border-spacing: 0;}
.sub .Comparison table td, th {padding: 1.7rem 0;}
.sub .Comparison table .borderTB {border-top: 1px dotted #a3a3a3; border-bottom: 1px dotted #a3a3a3;}



/* Treatment */
.sub .Treatment .box {padding: 4rem 1rem; aspect-ratio: 2/1.7; display: flex; align-items: center; justify-content: center; position: relative;}
.sub .Treatment .box > div {position: relative; z-index: 3;}
.sub .Treatment .BgImg {position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; z-index: 1; width: 10.3125rem;}




/* Points */
.sub .Points ul li {background-color: #f7f7f7; padding: 1.5rem 2.5rem; border-left: 5px solid var(--pointcolor);}
.sub .Points ul li + li {margin-top: 1.5rem;}
.sub .Points .Num {position: relative; padding-left: 2rem;}
.sub .Points .Num:after {content:''; width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: var(--pointcolor); color:#fff; font-size: .9375rem; position: absolute; top:5px; left: 0; margin: auto; line-height: 1.2; text-align: center;}
.sub .Points .Num.Num1:after {content:'1';} 
.sub .Points .Num.Num2:after {content:'2';} 
.sub .Points .Num.Num3:after {content:'3';} 



/* Anti */
.sub .Anti .boxWrap {width: 100%; height: 50rem; position: relative;}
.sub .Anti .circle {position: absolute; width: 43.375rem; top:0; bottom: 0; left: 0; right:0; margin: auto; animation: spinCircle 30s linear infinite;}
.sub .Anti .LogoBg {position: absolute; width: 13.1875rem; top:0; bottom: 0; left: 0; right:0; margin: auto;}

.sub .Anti .Txt_wrap li {max-width: 31.875rem; width: 100%; height: fit-content; background-color: #f7f7f7; padding: 3rem 0; position: absolute; z-index: 3;}
.sub .Anti .Txt_wrap li:nth-child(1) {top:0; left:0; right:0; margin: auto;}
.sub .Anti .Txt_wrap li:nth-child(2) {top:0; bottom:0; right:0; margin: auto;}
.sub .Anti .Txt_wrap li:nth-child(3) {bottom:0; left:0; right:0; margin: auto;}
.sub .Anti .Txt_wrap li:nth-child(4) {top:0; bottom:0; left:0; margin: auto;}
/* .sub .Anti .Txt_wrap li img {width: 4.5rem;} */
@media(max-width:990px) {
    .sub .Anti .Txt_wrap li {width: 90%; padding: 3rem 1rem;}
}
@media(max-width:768px) {
    .sub .Anti .Txt_wrap li {position: relative;}
    .sub .Anti .Txt_wrap li:nth-child(n+2) {margin: 1rem auto 0;}
}



/* Principle */
.sub .Principle .Title {position: relative; padding-left: 1.3rem;}
.sub .Principle .Title:after {position: absolute; content:''; height: 70%; width: 4px; background-color: #000; top:.3125rem; bottom:0; left: 0; margin: auto;}




/* Certified */
.sub .Certified .Desc > div {max-width: 600px; width: 100%; margin-left: 7%;}
.sub .Certified .spin_Logo {position: absolute; z-index: -1; top:-7rem; left:30rem; width: 13.8125rem; animation: spinCircle 15s linear infinite;}
@media(max-width:990px) {
    .sub .Certified .Desc {order:-1;}
    .sub .Certified .spin_Logo {top:-5rem;}
}



/* synergy */
.sub .synergy {background: no-repeat center url('/img/sub/lifting/synergyBg.jpg'); background-size: cover;}

/* LDMcure */
.sub .LDMcure {background: no-repeat center url('/img/sub/skinCare/LDMcureBg.jpg'); background-size: cover;}

/* versus */
.sub .versus .vs {position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; width: 4.75rem; height: 4.75rem; border-radius: 50%; background-color: #a3a3a3; color:#fff;}


/* Toning */
.dotLines .boxColor1 { color: #ababab; }
.dotLines .boxColor2 { color: #febe9b; }
.dotLines .boxColor3 { color: var(--pointcolor); }

.dotLines .dotLine { position: relative; margin: 3rem 0; width: 100%; height: 1px; background-color: #ababab; }
.dotLines .dotLine::before { position: absolute; content: ''; width: 12px; height: 12px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.dotLines .dotLine::after { position: absolute; content: ''; width: 1.5rem; height: .5px; background-color: #ababab; top: 50%; right: -1.5rem; transform: translateY(-50%); }
.dotLines .box:last-child .dotLine::after { display: none; }

.dotLines .boxColor1 .dotLine::before { background-color: #ababab; }
.dotLines .boxColor2 .dotLine::before { background-color: #febe9b; }
.dotLines .boxColor3 .dotLine::before { background-color: var(--pointcolor); }
@media(max-width:768px) {
    .dotLines .dotLine, .dotLines .dotLine::after { opacity: 0; }
    .dotLines .dotLine { margin: 0; }
    .dotLines .box:not(:first-child) { margin-top: 2rem; }
}

/* rubyStar */
.sub .rubyStar {background: no-repeat left url('/img/sub/pigment/rubyStar_bg.jpg'); background-size: cover;}
.sub .rubyStar .rejuranH_wrap {display: flex; align-items: center; gap: 5rem 2rem}
.sub .rubyStar img {width: 20.625rem; margin-top: 13.25rem;}

.sub .rubyStar2 {background: no-repeat left url('/img/sub/pigment/rubyStar_bg.jpg'); background-size: auto;}
.sub .rubyStar2 .rubyStar_wrap { display: flex; align-items: center; }

@media(max-width:768px) {
    .sub .rubyStar .rubyStar_wrap, .sub .rubyStar2 .rubyStar_wrap {flex-direction: column;}
}

/* acneTreatment */
.sub .acneTreatment { background: no-repeat left url('/img/sub/acne/acneTreatment_bg.jpg'); background-size: cover; }
.sub .acneTreatment .acneTreatment_wrap { display: flex; align-items: center; }
@media(max-width:768px) {
    .sub .acneTreatment { background: no-repeat right url('/img/sub/acne/acneTreatment_bg.jpg'); background-size: cover; }
    .sub .acneTreatment .acneTreatment_wrap { flex-direction: column; }
}

/* customFit */
.sub .customFit { background: no-repeat left url('/img/sub/lifting/customFit_bg.jpg'); background-size: cover; }
.sub .customFit .customFit_wrap { display: flex; align-items: center; }
@media(max-width:768px) {
    .sub .customFit { background: no-repeat right url('/img/sub/lifting/customFit_bg.jpg'); background-size: cover; }
    .sub .customFit .customFit_wrap { flex-direction: column; }
}

/* skinBotoxFDA */
.sub .skinBotoxFDA {background: no-repeat left url('/img/sub/lifting/skinBotoxFDABg.jpg'); background-size: cover;}
.sub .skinBotoxFDA .skinBotoxFDA_wrap {display: flex; align-items: center; gap: 5rem 2rem}
.sub .skinBotoxFDA img {width: 18.0625rem;}
@media(max-width:768px) {
    .sub .skinBotoxFDA .skinBotoxFDA_wrap {flex-direction: column;}
}

/* antianging */
.sub .antiagingCenter {background: no-repeat left url('/img/sub/skinCare/antiagingCenter_bg.jpg'); background-size: cover;}
.sub .antiagingCenter .antiagingCenter_wrap {display: flex; align-items: center; gap: 5rem 2rem}
.sub .antiagingCenter img {width: 28.75rem;}
@media(max-width:768px) {
    .sub .antiagingCenter .antiagingCenter_wrap {flex-direction: column;}
}

/* rejuran */
.sub .rejuranH {background: no-repeat left url('/img/sub/skinCare/rejuranH_bg.jpg'); background-size: cover;}
.sub .rejuranH .rejuranH_wrap {display: flex; align-items: center; gap: 5rem 2rem}
.sub .rejuranH img {width: 20.625rem; margin-top: 9.25rem;}
@media(max-width:768px) {
    .sub .rejuranH .rejuranH_wrap {flex-direction: column;}
    .sub .rejuranH img {margin-top: 0;}


}

/* juveLook */
.sub .juveLookSafety .flex-between {gap: 2rem;}
@media(max-width:768px) {
    .sub .juveLookSafety .flex-between {flex-wrap: wrap;}
    .sub .juveLookSafety .box.width50 {width: 100%;}
    .sub .juveLookSafety .box.width30 {width: 60%;}
    .sub .juveLookSafety .box.width20 {width: 30%;}

}


/* DOELens */
.sub .DOELens .grayBox {padding: 3.5rem 1.7rem 1.7rem; position: relative;}
.sub .boxTitle {font-size: 1.375rem; color:#fff; width: 11rem; text-align: left; padding: .5rem 2rem; background-color: var(--pointcolor); position: absolute; left: 0; top:-1.4rem}
.sub .boxTitle.Gr {background-color: #adafae;}



/* Customized */
.sub .Customized ul li {display: flex; gap:2rem; align-items: center; padding: 3rem 2rem;}
.sub .Customized ul li + li {margin-top: 2rem;}
@media(max-width:500px) {
    .sub .Customized ul li {flex-wrap: wrap;}
}



/* whitening */
.sub .whitening {background: no-repeat center url('/img/sub/mans/whiteningBg.jpg'); background-size: cover;}


/* safety */
.sub .safety {background: no-repeat center url('/img/sub/mans/safetyBg.jpg'); background-size: cover;}



/* Different */
.sub .Different .Desc {display: flex; align-items: center;}
.sub .Different .Desc > div {padding: 2rem 0; max-width: 600px; width: 100%; letter-spacing: -1px;}
.sub .Different .DescL > div {margin-left: auto; margin-right: 10%; padding-left: 2rem;}
.sub .Different .DescR > div {margin-right: auto; margin-left: 10%; padding-right: 2rem;}

@media(max-width:1240px) {
    .sub .Different .flexList {padding: 3rem 0;}
}
@media(max-width:768px) {
    .sub .Different .flexList {padding: 0;}
    .sub .Different .Img {order:2;}
    .sub .Different .Desc {padding: 5rem 1rem;}
    .sub .Different .Desc > div {width: 90%;}
    .sub .Different .DescL > div {padding-left: 0; margin-right: auto;}
    .sub .Different .DescR > div {padding-right: 0; margin-left: auto;}
}



/* relaxed */
.sub .relaxed .box .Desc {max-width: 535px; width: 100%; padding: 0 1rem;}



/* cycle */
.sub .cycle .box {filter: grayscale(1); opacity: .5; transition: .5s;}
.sub .cycle .box.on {filter: grayscale(0); opacity: 1;}
.sub .cycle .box .Line {width: 100%; height: 1px; background-color: var(--pointcolor); margin: 3rem 0;}
.sub .cycle .box .Line span {width: 10px; height: 10px; border-radius: 50%; background-color: var(--pointcolor); display: block; position: relative;}
.sub .cycle .box .Line span:after {content:''; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(236, 105, 35, .2); position: absolute; top:0; left: 0; bottom:0; right:0; margin: auto; transition: .5s;} 
.sub .cycle .box.on .Line span:after {transform: scale(2); transition: .5s;}



/* specialBox */
.sub .specialBox .flexBox {display: flex; gap:0 2rem; align-items: center;}
.sub .specialBox .BgBox {background: no-repeat center url('/img/sub/sooan/specialBoxBg.jpg'); background-size: cover; aspect-ratio: 50/32;}
.sub .specialBox .BgBox > div {width: fit-content; padding: 4rem 2rem;}

.sub .specialBox .sooanTxt {width: 17.625rem;}
.sub .specialBox .spin_Logo {position: absolute; top:-13rem; left:21rem; width: 13.8125rem; animation: spinCircle 15s linear infinite;}
@media(max-width:990px) {
    .sub .specialBox .flexBox {flex-direction: column; gap: 4rem 0;}
    .sub .specialBox .width40 {padding: 4rem 0;}
    .sub .specialBox .spin_Logo {top:-1rem; left: auto; right:1rem;}
    .sub .specialBox .BgBox > div {padding: 4rem;}

    .sub .specialBox2 .width60 {order:-1;}
}
@media(max-width:500px) {
    .sub .specialBox .BgBox {aspect-ratio: 50/56;}
}



/* minimize */
.sub .minimize {background: no-repeat center url('/img/sub/sooan/minimizeBg.jpg'); background-size: cover;}



/* sincerity */
.sub .sincerity .box.box2 {margin-top: 12rem;}
.sub .sincerity .box.box4 {margin-top: 5rem;}
.sub .sincerity .box.box4 > div {width: fit-content; margin-left: auto;}
@media(max-width:500px) {
    .sub .sincerity .box.box2, .sub .sincerity .box.box3, .sub .sincerity .box.box4 {margin-top: 3rem;}
}


/* TxtBgBox */
.sub .TxtBgBox .TxtBg {position: absolute; z-index: -1; top:0; bottom:0; left:0; right:0; margin: auto;}




/* doctorBox */
.sub .doctorBox .boxWrap {position: relative; padding: 5rem 0; overflow: hidden;}
.sub .doctorBox .boxWrap:after {content:''; width: 70%; height: 100%; background-color: #f7f7f7; position: absolute; z-index: -1; right:0; top:0;}
.sub .doctorBox .LogoBg {position: absolute; top:-3rem; right:0; z-index: 1; width: 40.9375rem;}
.sub .doctorBox .Desc {position: relative; z-index: 3;}
@media(max-width:990px) {
    .sub .doctorBox .boxWrap:after {width: 100%; height: 80%; top:auto; bottom:0;}
    .sub .doctorBox .Desc > div {width: fit-content; margin:3rem auto 3rem 10%;}
    .sub .doctorBox .LogoBg {top:auto; bottom:0; }
}
@media(max-width:500px) {
    .sub .doctorBox .Desc > div {width: fit-content; margin:3rem;}
}




/* interior */
.around{overflow: visible}
.around .slide-btn{position: absolute;width:4.375rem;height: 4.375rem;background: var(--pointcolor); top: 50%;left: 0;z-index: 9; display: flex; align-items: center; justify-content: center;border-radius: 50%;transform: translate(-50%,-50%);cursor: pointer;transition:border 0.2s,background 0.5s}
.around .button-prev img {transform: rotate(180deg);}
.around .button-next{right: 0;left: auto;transform: translate(50%,-50%);}




/* equipment */
.sub.equipment .Img img {width: 35.625rem;}
.sub.equipment .ImgR img {margin-left: auto;}
.sub.equipment .ImgL img {margin-right: auto;}

.sub.equipment .dotList > .box {position: relative;}
.sub.equipment .dotList > .box:after {content:''; width: 30%; height: 1px; border-bottom: 1px dashed var(--pointcolor); position: absolute; top:0; bottom:0; right:-2rem; margin: auto; z-index: -1;}
.sub.equipment .dotList > .box:last-child:after {display: none;} 
.sub.equipment .dotList .dot {width: 9rem; height: 9rem; border-radius: 50%; background-color: var(--pointcolor); text-align: center; color:#fff; position: relative;}
@media(max-width:1240px) {
    .sub.equipment .ImgRight .Img {order:-1;}
    .sub.equipment .dotList > .box:after {width: 70%;}
    .sub.equipment .ImgR img {margin-left: auto; margin-right: auto;}
    .sub.equipment .ImgL img {margin-right: auto; margin-left: auto;}
}
@media(max-width:500px) {
    .sub.equipment .dotList .dot {width: 7.5rem; height: 7.5rem;}
}