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

/* sub Top */
.subTop {height:50rem; 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; max-width: 1400px; width: 90%; top:24rem; margin: auto; padding-left: 6rem;}
.subTop .subTit {letter-spacing: .1rem;}
.sub.dermatology .subTop .subTit {font-family: var(--pointfont);}

.subTop .subLogo {position: absolute; left: 0; bottom:2rem; width:15.25rem}
@media(max-width:500px) {
    .subTop .inner {padding-left: 2rem;}
}

.sub .sub_path {width: 55%;}
.sub .one_check {width: 2rem;}

.sub .sub_en {font-family: var(--pointfont); letter-spacing: .1rem;}
.sub .subLogoSM {width: 5.063rem;}
.sub .subShadow {box-shadow: inset 2px -2px 15px 2px rgba(0,0,0,.1);}
.sub .line_w span {border-bottom: 1px solid #000;}
.sub .line_b {border-bottom: 1px solid #000; display: block; width: 100%;}
.sub .h-line {height: 7.5rem; width: 1px; background-color: #000; margin: 3rem auto;}

.sub ul.hyphenList li {position: relative; padding-left: 1.25rem;}
.sub ul.hyphenList li + li {margin-top: .5rem;}
.sub ul.hyphenList li:after {content:'-'; position: absolute; left: 0; top:0;}

.sub .swiper-button-next, .sub .swiper-button-prev {position: relative; transition: all .3s; margin-top: 0; width: 3.75rem; height: 3.75rem; border-radius: 50%; border:1px solid #000}
.sub .swiper-button-prev img {transform: rotate(180deg);}
.sub .swiper-button-prev {left: 0;}
.sub .swiper-button-next {right: 0;}

.sub .num {position: relative; padding-left:1.875rem;}
.sub .num:after {content:''; position: absolute; left:0; top:0; font-family: var(--pointfont);}
.sub .num.num1:after {content:'01';}
.sub .num.num2:after {content:'02';}
.sub .num.num3:after {content:'03';}
.sub .num.num4:after {content:'04';}
.sub .num.num5:after {content:'05';}
.sub .num.num6:after {content:'06';}
.sub .num.num7:after {content:'07';}
.sub .num.num8:after {content:'08';}

.sub .dot {position: relative; padding-left: 1rem;}
.sub .dot:after {content:'·'; position: absolute; left: 0; top:0;}

/* introPage */
.sub.hillsIntro .subTop, .sub.pigmentIntro .subTop, .sub.flushIntro .subTop, .sub.skincareIntro .subTop, .sub.dermatopathyIntro .subTop, 
.sub.acneIntro .subTop, .sub.antiIntro .subTop, .sub.depilationIntro .subTop  
{height: 37.5rem;}
.sub.hillsIntro .subTop .inner, .sub.pigmentIntro .subTop .inner,  .sub.skincareIntro .subTop .inner, .sub.dermatopathyIntro .subTop .inner,
.sub.flushIntro .subTop .inner, .sub.acneIntro .subTop .inner, .sub.antiIntro .subTop .inner,  
.sub.depilationIntro .subTop .inner 
{top:18rem;}
.sub.hillsIntro .subTop .subLogo, .sub.pigmentIntro .subTop .subLogo, .sub.skincareIntro .subTop .subLogo, .sub.dermatopathyIntro .subTop .subLogo,
.sub.flushIntro .subTop .subLogo, .sub.acneIntro .subTop .subLogo, .sub.antiIntro .subTop .subLogo, 
.sub.depilationIntro .subTop .subLogo 
{top:0; bottom:0; margin: auto;}

.sub #introPage .sub_en {letter-spacing: 10px; text-align: center;}
.sub #introPage .box {position: relative; display: block; background-color: #ddd; padding: 7rem; background: no-repeat center; background-size: cover; transition: .5s;}

.sub.hillsIntro #introPage .box.box1 {background-image: url('/img/sub/hills/hills_introPageBg01.jpg');}
.sub.hillsIntro #introPage .box.box2 {background-image: url('/img/sub/hills/hills_introPageBg02.jpg');}
.sub.hillsIntro #introPage .box.box3 {background-image: url('/img/sub/hills/hills_introPageBg03.jpg');}
.sub.hillsIntro #introPage .box.box4 {background-image: url('/img/sub/hills/hills_introPageBg04.jpg');}
.sub.hillsIntro #introPage .box.box5 {background-image: url('/img/sub/hills/hills_introPageBg05.jpg');}

.sub.pigmentIntro #introPage .box.box1 {background-image: url('/img/sub/pigment/introPageBg01.jpg');}
.sub.pigmentIntro #introPage .box.box2 {background-image: url('/img/sub/pigment/introPageBg02.jpg');}
.sub.pigmentIntro #introPage .box.box3 {background-image: url('/img/sub/pigment/introPageBg03.jpg');}

.sub.flushIntro #introPage .box.box1 {background-image: url('/img/sub/flush/introPageBg01.jpg');}
.sub.flushIntro #introPage .box.box2 {background-image: url('/img/sub/flush/introPageBg02.jpg');}

.sub.acneIntro #introPage .box.box1 {background-image: url('/img/sub/acne/introPageBg01.jpg');}
.sub.acneIntro #introPage .box.box2 {background-image: url('/img/sub/acne/introPageBg02.jpg');}
.sub.acneIntro #introPage .box.box3 {background-image: url('/img/sub/acne/introPageBg03.jpg');}

.sub.antiIntro #introPage .box.box1 {background-image: url('/img/sub/anti/introPageBg01.jpg');}
.sub.antiIntro #introPage .box.box2 {background-image: url('/img/sub/anti/introPageBg02.jpg');}
.sub.antiIntro #introPage .box.box3 {background-image: url('/img/sub/anti/introPageBg03.jpg');}
.sub.antiIntro #introPage .box.box4 {background-image: url('/img/sub/anti/introPageBg04.jpg');}
.sub.antiIntro #introPage .box.box5 {background-image: url('/img/sub/anti/introPageBg05.jpg');}
.sub.antiIntro #introPage .box.box6 {background-image: url('/img/sub/anti/introPageBg06.jpg');}
.sub.antiIntro #introPage .box.box7 {background-image: url('/img/sub/anti/introPageBg07.jpg');}

.sub.depilationIntro #introPage .box.box1 {background-image: url('/img/sub/depilation/introPageBg01.jpg');}
.sub.depilationIntro #introPage .box.box2 {background-image: url('/img/sub/depilation/introPageBg02.jpg');}

.sub.skincareIntro #introPage .box.box1 {background-image: url('/img/sub/skincare/introPageBg01.jpg');}
.sub.skincareIntro #introPage .box.box2 {background-image: url('/img/sub/skincare/introPageBg02.jpg');}
.sub.skincareIntro #introPage .box.box3 {background-image: url('/img/sub/skincare/introPageBg03.jpg');}
.sub.skincareIntro #introPage .box.box4 {background-image: url('/img/sub/skincare/introPageBg04.jpg');}
.sub.skincareIntro #introPage .box.box5 {background-image: url('/img/sub/skincare/introPageBg05.jpg');}
.sub.skincareIntro #introPage .box.box6 {background-image: url('/img/sub/skincare/introPageBg06.jpg');}
.sub.skincareIntro #introPage .box.box7 {background-image: url('/img/sub/skincare/introPageBg07.jpg');}

.sub.dermatopathyIntro #introPage .box.box1 {background-image: url('/img/sub/dermatopathy/introPageBg01.jpg');}
.sub.dermatopathyIntro #introPage .box.box2 {background-image: url('/img/sub/dermatopathy/introPageBg02.jpg');}
.sub.dermatopathyIntro #introPage .box.box3 {background-image: url('/img/sub/dermatopathy/introPageBg03.jpg');}
.sub.dermatopathyIntro #introPage .box.box4 {background-image: url('/img/sub/dermatopathy/introPageBg04.jpg');}
.sub.dermatopathyIntro #introPage .box.box5 {background-image: url('/img/sub/dermatopathy/introPageBg05.jpg');}
.sub.dermatopathyIntro #introPage .box.box6 {background-image: url('/img/sub/dermatopathy/introPageBg06.jpg');}
.sub.dermatopathyIntro #introPage .box.box7 {background-image: url('/img/sub/dermatopathy/introPageBg07.jpg');}

.sub #introPage .box .Desc {display: flex; align-items: center; flex-wrap: wrap;}
.sub #introPage .box .cover {position: absolute; width: 100%; height: 100%; top:0; left: 0; transition: .5s;}
.sub #introPage .box:hover .cover {background-color: rgba(0, 0, 0, .8); background-blend-mode: multiply;}
.sub #introPage .box:hover .Desc {color:#fff; z-index: 3; position: relative;}
.sub #introPage .box:hover .Btn_box {opacity: 1;}
.sub #introPage .box + .box {margin-top: 2rem;}

.sub #introPage .Btn_box {display: flex; align-items: center; opacity: 0;}
.sub #introPage .Btn_box:hover .one {transform: scale(1.1);}
.sub #introPage .Line {width: 3.8rem; height: 1px; background-color: #fff; margin: auto 2rem;}
.sub #introPage .one {width: 3.75rem; height: 3.75rem; border-radius: 50%; border:1px solid #fff; transition: .3s; display: flex; align-items: center; justify-content: center; color:#fff;}

@media(max-width:990px) {
    .sub #introPage .box .DescBox {width: 100%;}
    .sub #introPage .Btn_box {justify-content: flex-end; margin-top: 3rem;}
}
@media(max-width:768px) {
    .sub #introPage .box {padding: 7rem 4rem; background: no-repeat 78% #c1c1c1; background-size: cover;}
	.sub.dermatopathy  #introPage .box {background-blend-mode: overlay; background: no-repeat 80% #c1c1c1;}
}


/* info */
.sub.info {position: relative;}
.sub.info .subLogo {position: absolute; width: 10rem; top:0; bottom:0; margin: auto;}

/* intro */
.sub .intro {position: relative; z-index: 5;}


/* why */
.sub .why {position: relative; overflow: hidden; margin-top: -3rem;}
.sub .why .container {position: relative; z-index: 3;}
.sub .why .sub_path {position: absolute; top:0; bottom:0; left: -1rem; height: fit-content; margin: auto;}
.sub .why .box.smBox {padding: 3rem 1rem; border-radius: 1.875rem; background-color: #f8f8f8;}
.sub .why .box.mdBox {padding:5rem 3rem; border-radius: 1.875rem; background-color: #f8f8f8;}
.sub .why .flexList {--y-gap: 3rem;}


.sub .why .box.width62 {width: 62%; padding: 5rem 3rem;}
.sub .why .box.width35 {width: 35%; padding: 5rem 3rem;}
@media(max-width:768px) {
    .sub .why .width30, .sub .why .width70 {width: 100%;}
    .sub .why .width70 {margin-top: 2rem;}
}
@media(max-width:500px) {
    .sub .why .box.smBox {padding: 2rem;}
    .sub .why .sub_path {bottom: auto; left:auto;}
    .sub .why .box.width62, .sub .why .box.width35 {width: 100%;}
    .sub .why .box.width35 {margin-top: 2rem;}
}

/* who */
.sub .who .Desc {max-width: 32rem; margin: auto; padding: 0 1rem;}
.sub .who.onda .Desc {max-width: 33rem;}
.sub.fatMelting .who .Desc {max-width: 34rem; margin: auto; padding: 0 1rem;}
.sub .who .Desc li {padding-bottom: .3rem; color:#ccc; transition: .3s;}
.sub .who .Desc li.on {border-bottom: 1px solid #000; color:#000;}
.sub .who .Desc li + li {margin-top: .5rem;} 


/* program */
.sub .program {position: relative; overflow: hidden;}
.sub .program .box.Tit {width: 25%;}
.sub .program .box.Slide {width: 75%;}
.sub .program .btn_Wrap {display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; max-width: 1000px; width: 90%; padding: 1rem 0;}
.sub .program .swiper-pagination-progressbar {position: relative; max-width: 800px; background: rgba(0,0,0,.05);}
.sub .program .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #000;}
.sub .program .swiper-pagination-lock {display: block;}
.sub .program .swiper-button-lock {display: flex;}
.sub .program .swiper-button-prev {left: 0.625rem; opacity: .5;}
.sub .program .subLogoGR {position: absolute; top:3rem; left:6rem; width: 37.875rem; z-index:-1;}
@media(max-width:900px) {
    .sub .program .box.Tit {width: 100%;}
    .sub .program .box.Slide {width: 100%;}
    .sub .program .subLogoGR {left:0; width:27rem;}
}


/* precautions */
.sub .precautions {background: no-repeat center url('/img/sub/pigment/precautionsBG.jpg'); background-size: cover;}
.sub .precautions .numList {width: fit-content; padding: 0 1rem; margin: auto;}

.sub .numList li + li {margin-top: 1rem;}
.sub .Mark_point {background-color: #dfd8d2; display: inline-block; padding: .3rem 1.5rem;}


/* philosophy */
.sub .philosophy .swiperLine {width: 4rem; height: 1px; background-color: #000; margin: 1rem;}
.sub .philosophy .box.Desc {padding: 4rem 0;}
@media(max-width:768px) {
    .sub .philosophy .box.Desc {order:-1;}
}



/* certification */
.sub .certification {background: no-repeat center url('/img/sub/certificationBG.jpg'); background-size: cover;}
.sub .certificationImg {width: 16.25rem;}
@media(max-width:768px) {
    .sub .certification .flex {flex-direction: column; align-items: center;}
}



/* relax */
.sub .relax {background: no-repeat center url('/img/sub/anti/relaxBG.jpg'); background-size: cover;}



/* seif */
.sub .seif .flexList {--x-gap: 3.5rem;}
.sub .seif .box {background-color: #f4f1ee; border-radius: 1.875rem; padding: 0 3rem; height: 7.25rem;}



/* difference */
.sub .difference .flexList {--x-gap: 3.5rem;}
.sub .difference .box {border-radius: 1.875rem; overflow: hidden;}
.sub .difference .box.left {background-color: #e1d5c9;}
.sub .difference .box.right {background-color: #f4f1ee;}
.sub .difference .Desc {padding: 2.5rem 2rem 3rem;}
@media(max-width:990px) {
    .sub .difference .flexList {padding: 0 3rem;}
}


/* process */
.sub .process .flexList {--x-gap:3.3rem; --y-gap:3rem;}



/* type */
.sub .type .flexList {--x-gap:2rem;}
.sub .type .box img {width: 15rem;}


/* effect */
.sub .effect .box {border-radius: 1.875rem; background-color:#f4f1ee; padding:4rem 3rem;}


/* still */
.sub.woman .still {background: no-repeat left url('/img/sub/depilation/woman_stillBg.jpg'); background-size: cover; background-color: #d0d0d0;}
.sub.man .still {background: no-repeat left url('/img/sub/depilation/man_stillBg.jpg'); background-size: cover; background-color: #bababa;}
.sub .still .stillWrap {max-width: 800px; padding-left:1rem; padding-right: 3rem;  margin-left: auto;}
@media(max-width:1200px) {
    .sub .still {background-blend-mode: lighten;}
    .sub .still .stillWrap {margin-left: auto; padding-right: 1rem;}
}


/* principle */
.sub .principle .flexList {position: relative; --x-gap:5rem}
.sub .principle .arrows {position: absolute; top:0; bottom:0; right:0; left:0; margin: auto; width: 3.75rem; height: 3.75rem;}



/* wavelength */
.sub .wavelength .flexList {--x-gap:3rem; --y-gap:3rem;}
.sub .wavelength img {width: 12.813rem;}



/* principleTab */
.sub .principleTab .tab-menu {display: flex; align-items: center; justify-content: center;}
.sub .principleTab .tab-menu li {width: 17.5rem; padding: 1rem; background-color: #f8f8f8; color:#ccc; transition: .3s; cursor: pointer;}
.sub .principleTab .tab-menu li.active {background-color: #000; color:#fff;}
.sub .principleTab .tab-content {padding:6rem 2rem; border:1px solid #000;}
.sub .principleTab .Desc {padding: 0 1rem;}
.sub .principleTab .Desc .TitBox {width: 4.938rem; background-color:#aea788; color:#fff; padding: .5rem; margin-right: 1.5rem; text-align: center;}
.sub .principleTab .Desc ul li + li {margin-top: 1rem;}
@media(max-width:768px) {
    .sub .principleTab .width45, .sub .principleTab .width55 {width: 100%;}
    .sub .principleTab .width55 {margin-top: 2rem;}
}


/* solution */
.sub .solution .line_GR {width: 80%; height: 1px; background-color:#ccc; position: absolute; top:4px; left:0; right:0; margin: auto; z-index: -1;}
.sub .solution .box .one {width:10px; height: 10px; background-color: #000; border-radius: 50%; /* position: absolute; right: 0; left:0; top:-2.063rem;*/ margin: auto;}
.sub .solution .box .one:before {content: "";display: block;position: relative; ;width: 10px;height: 10px; top:0; right:0; left:0; margin: auto; background: radial-gradient(circle, #fefefe 0%, #ebebeb 100%);border-radius: 50%;-webkit-transition: 0.4s ease-in-out;transition: 0.4s ease-in-out;z-index: -1;}
.sub .solution .box.on .one:before {transform: scale(4.5);}

.sub .solution .dot {position: relative; padding-left: .6rem; text-align: left;}
.sub .solution .dot:after {content:'·'; position: absolute; left: 0; top:0; }

@media(max-width:768px) {
    .sub .solution .box {display: flex; justify-content: center;}
    .sub .solution .line_GR {display: none;}
    .sub .solution .box .one {margin: auto 3rem auto 1rem;}
    .sub .solution .box .one:after {content:''; width: 1px; height:80%; top:0; bottom:0; margin: auto; background-color: #ccc; position: absolute; z-index: -1;}
}



/* hillsIntro */
.sub .hillsIntro .flexList {--x-gap:4rem; --y-gap:10rem;}
.sub .hillsIntro .box {display: flex; flex-direction: column; justify-content: space-between;}
@media(max-width:500px) {
    .sub .hillsIntro .imgBox {order:2; margin-top: 3rem;}  	
}



/* doctor */
.sub .doctor {background: no-repeat 20% url('/img/sub/hills/doctorBg.jpg') #9e9791; background-size: cover; transition: .3s;}
.sub .doctor .doctorDesc {max-width: 47rem; margin-left: auto; padding: 0 1rem;}
@media(max-width:1200px) {
    .sub .doctor {background-blend-mode: multiply;}
}



/* doctorDesc */
.sub .doctorDesc .Desc {position: relative;}
.sub .doctorDesc .DescLogo {width: 22rem; position: absolute; top:0; left:0;}
@media(max-width:768px) {
    .sub .doctorDesc .Desc {padding-top: 3rem;}
}



/* interior */
.sub .aroundSlide .swiperWrap {max-width: 73.75rem; width:90%; margin-left: auto; margin-right: auto;}
.sub .aroundSlide .swiper-button-next, .sub .aroundSlide .swiper-button-prev {position: absolute;}
.sub .aroundSlide .arrow_line {width: 3.125rem; height: 1px; background-color: #000; position: absolute;}
.sub .aroundSlide .swiper-button-next .arrow_line {left:-4.7rem;} 
.sub .aroundSlide .swiper-button-prev .arrow_line {right:-4.7rem;}
@media(max-width:768px) {
    .sub .aroundSlide .container {padding-bottom: 5rem;}
    .sub .aroundSlide .swiperWrap {width: 100%;}
    .sub .aroundSlide .swiper-button-next, .sub.interior .swiper-button-prev {top:auto; bottom:0;}
}


/* Modal */
.sub .Modal .flexList {--y-gap:4rem;}

.awesome-modal {display: none; background-color: #fff; box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.5); width: 75rem; max-width: 90%; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); overflow: hidden; z-index: 9999; animation: 0.4s ease forwards;}
.awesome-modal * {backface-visibility: hidden;}
.awesome-overlay {display: none; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9998; overflow: hidden; cursor: default;}

.awesome-modal .Desc {padding: 5rem; display: flex; flex-direction: column; justify-content: center;}
.awesome-modal .DescTit {position: relative; padding: 2.7rem;}
.awesome-modal .DescLogo {width: 7.625rem; position: absolute; top:0; left: 0;}


.close-icon {position: absolute; width: 1.5rem; height: 1.5rem; top: 0.7rem; right: 0.7rem; 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 {display: block;}
:target ~ .awesome-overlay {display: block;}

@media(max-width:768px) {
    .awesome-modal {width:47rem; max-width: 80%;}
    .awesome-modal .flexList {--y-gap:0;}
    .awesome-modal .Desc {padding: 3rem;}
}

  
#close {position: fixed; top: 50%; transform: translateY(-50%);}
  
  
.sub .handpiece {background-image: url("/img/sub/anti/handpiece_bg.jpg"); background-size: cover; background-position: 80%;}
.sub .handpiece .txt {display: flex; flex-direction: column; align-items: center;}
.sub .handpiece .desc p {position: relative; padding-left: 1.5rem;}
.sub .handpiece .desc p:after {position: absolute; left: 0; top: 0; content: "·";}

@media(max-width:990px) {
    .sub .handpiece {background-image: url("/img/sub/anti/handpiece_bg_m.jpg"); background-position: center;}
    .sub .handpiece .flexList.width60 {width: 100%;}
}