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



.sub .ygap0 {--y-gap:0;}
.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 .ygap6 {--y-gap:6rem;}
.sub .ygap8 {--y-gap:8rem;}

.sub .xgap1 {--x-gap:1rem;}
.sub .xgap2 {--x-gap:2rem;}
.sub .xgap3 {--x-gap:3rem;}
.sub .xgap4 {--x-gap:4rem;}
.sub .xgap8 {--x-gap:8rem;} 


.subTit {font-size: 3.125rem; font-weight: 800; position: relative;}
.subTit > span {color:var(--pointcolor)}
.subTitEn {font-family: var(--pointfont); font-weight: 700;}
.subEn {color:#a1b1d1; font-family: var(--pointfont); font-weight: 600;}

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

.sub .op05 {opacity: .5;}
.sub .check {width: 1.5625rem;}

.sub .bsBtn {position: relative; display: flex; align-items: center; justify-content: center; white-space: nowrap; border:1px solid #fff; background-color: transparent; padding: .5rem 1.5rem;  color: transparent; font-size: 1.125rem; width: fit-content; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; text-shadow: -50px 0 0 transparent, 0 0 0 #fff; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);}
.sub .bsBtn:before {width: 100%; height: 100%; top: 0; left: 0; background-color: var(--pointcolor); transform: translate(-100%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.sub .bsBtn:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; border:1px solid var(--pointcolor)}
.sub .bsBtn:hover:before {transform: translate(0, 0);}

.sub .swiper-button-next:after, .sub .swiper-button-prev:after {content:'';}
.sub .swiper-button-next, .sub .swiper-button-prev {position: relative; width: auto; height: auto; top:auto; margin-top: 0; color:#fff; padding: 0 .7rem;}


.sub .Btn_wrap {display: flex; align-items: center; justify-content: center; width: fit-content; gap:0 .5rem; margin: auto; /* margin-top: -4rem; */}
.sub .swiper-button-next {color:var(--pointcolor);}
.sub .swiper-button-prev {color:#dfdfdf;}
.sub .swiper-pagination {position: relative; bottom: 0; color:#dfdfdf; font-family: var(--pointfont); font-weight: 700; font-size: 1.125rem;}
.sub .swiper-pagination span {padding: 0 .7rem;}
.sub .swiper-pagination .swiper-pagination-current {color:var(--pointcolor)}

/* sub Top */
.subTop {/* height:58.125rem; */ height: 100vh; 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.1); transition:transform 3s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}

.subTop .subTopTxt {display: grid; grid-template-rows: 1fr 1fr; grid-template-columns:  1fr 1fr; max-width: 1400px; width: 90%; margin: auto; top:40%; position: relative;}

.subTop .subTopTit {font-size: 3.75rem; font-weight: 700;}
.subTop .subTopLink {display: flex; gap:0 1.5rem; margin-top: 3rem;}
.subTop .subTopLink a {color:#fff; border:1px solid #fff; padding: .7rem 2rem; transition: .3s;}
.subTop .subTopLink a:hover {color: var(--subcolor); border-color:var(--subcolor);}
.subTop .En {font-size: 6.875rem; font-family: var(--enfont); color:rgba(93,131,202,.4); text-align: center; line-height: 0.8;}

.subTop .Desc {font-size: 1.875rem; text-align: center; font-weight: 300; /* margin-top: -2.5rem; */}

.subTop .box1 {grid-column: 1 / 2; grid-row: 1 / 2;}
.subTop .box2 {grid-column: 1 / 2; grid-row: 2 / 3;}
.subTop .box3 {grid-column: 2 / 3; grid-row: 1 / 4; padding-left: 15%;}

.liposuction .subTop p:nth-child(4){display: none;}
.fattransplantation .subTop p:nth-child(1){display: none;}
.fattransplantation .subTop p:nth-child(2){color: #717171 !important; margin-top: 0;}
.fattransplantation .subTop p:nth-child(3){color: var(--pointcolor) !important;}

@media(max-width:768px) {
    .subTop .subTopTxt {grid-template-rows: 1fr 1fr 1fr; grid-template-columns:  1fr; top:33%;}

    .subTop .subTopTit {display: flex; justify-content: center; white-space: nowrap}
    .subTop .subTopLink {justify-content: center;}

    .subTop .box1 {grid-column: 1 / 2; grid-row: 1 / 2; /* margin: 2rem 0; */}
    .subTop .box2 {grid-column: 1 / 2; grid-row: 3 / 4; margin-top: 2rem;}
    .subTop .box3 {grid-column: 1 / 2; grid-row: 2 / 2; padding-left: 0; margin-top: 2rem; min-height: 15rem;}
}
@media(max-width:500px) {
    .subTop .subTopTxt {top: 28%;}
    .subTop .xsSubTopTit {font-size: 3.2rem;}
    .subTop .En {font-size: 6rem;}
    .subTop .box2 {margin-top:0;}
    .subTop .box3 {min-height: 14rem; margin-top: 4rem;}
}



/* whySlide */
.sub .whySlide .flexBox {display: flex; gap:0 1rem;}
.sub .whySlide .Tit {width: 30%; position: relative;}
.sub .whySlide .Slide {width: 70%;}
.sub .whySlide .swiper-slide {display: flex; align-items: center;}
.sub .whySlide .img {width: 55%;}
.sub .whySlide .Desc {padding: 3em; max-width: 430px; width: 45%;}
.sub .whySlide .Line {width: 1.375rem; height: 2px; background-color: #a1b1d1;}
.sub .whySlide .enTit {color:#a1b1d1; font-family: var(--pointfont); font-weight: 500;}

.sub .whySlide .Btn_wrap {position: absolute; bottom:0; left: -1rem;}

#rolling-wrap {white-space: nowrap; position: absolute; bottom:0;}
#rolling-wrap .rolling-text {display: inline-block; font-size: 6.25rem; line-height: 1.3; font-weight: 700; font-family: var(--pointfont); color:#f4f4f5;}
@media(max-width:1340px) {
    .sub .whySlide .flexBox {flex-direction: column;}
    .sub .whySlide .Tit, .sub .whySlide .Slide {width: 100%;}
    .sub .whySlide .Slide  {margin-top: 3rem;}

    .sub .whySlide .Btn_wrap {right: 0; left: auto;}
}
@media(max-width:768px) {
    .sub .whySlide .swiper-slide {flex-direction: column;}
    .sub .whySlide .img {width: 100%;}
    .sub .whySlide .Desc {width: 100%; max-width: 100%;}
}
@media(max-width:500px) {
    .sub .whySlide .Tit {padding-bottom: 3rem;}
    .sub .whySlide .Desc {padding: 3em;}
    .sub .whySlide .Slide {margin-top: 2rem;}
}



/* for */
.sub .for {padding-top: 6.25rem;}

/* GSAP scrollTrigger */
.sub .for .blank {display: inline-block; width: calc(1.1667vw + 4.5rem);}
.sub .for .ani_txt {position: absolute; bottom: 0; right: 0; width: 20rem; font-size: 3.125rem; color:var(--pointcolor); z-index: 90;}
.sub .for .mo_txt {display: none; }

.sub .for .ani_wr .Img img {filter: grayscale(.8);}
.sub .for .ani_wr.on .Img img {filter: grayscale(0);}

.sub .for .ani_wr .ani_box {transform: matrix(1, 0, 0, 1, -500, 0);}
.sub .for .ani_wr .ani_box.n1 {transform: matrix(1, 0, 0, 1, 0, 0);}

.ani_load {
    transition: transform .7s ease, opacity .7s ease, filter .7s ease;
    opacity: 0;
    filter: blur(15px);
}
.ani_load.ani_view {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
}

@media(max-width:768px) {    
    .sub .for .Desc {padding: 2rem;}
    .sub .for .Img {padding-bottom: 2rem;}

    .sub .for .ani_wr .ani_box {transform: none;}
    .sub .for .mo_txt {display: inline-block;}
    /* .sub .for .blank {display: none;} */
}



/* snsSlide */
.sub .snsSlide .snsBg {background-color: #f8f8f8; border-radius: 6.25rem 6.25rem 0 0;}

#rolling-wrap2 {white-space: nowrap; position: relative; padding-bottom: 3rem;}
#rolling-wrap2 .rolling-text {display: inline-block; font-size: 6.25rem; line-height: 1.3; font-weight: 700; font-family: var(--pointfont); color:#f1f1f1;}



/* name */
.sub .name {background: no-repeat center url('/img/sub/BSsum/nameBg.jpg'); background-size: cover;}
.sub .name .Line {width: 6.25rem; height: 3px; background-color: var(--subcolor); margin-right: 1rem;}



/* ImgSlide */
.sub .ImgSlideSwiper .swiper-wrapper { -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
.sub .ImgSlideSwiper .swiper-slide {width: auto !important;}
.sub .ImgSlideSwiper .swiper-slide img {object-fit: cover;}
@media(max-width:500px) {
	.sub .ImgSlideSwiper  .swiper-slide img {height:180px}
}



/* subCommon */
.sub .subCommon .box {background: no-repeat center; background-size: cover; aspect-ratio: 4/6; background-color: #a0a0a0; position: relative;}
.sub .subCommon .box:hover {background-blend-mode: multiply;}
.sub .subCommon .box1 {background-image: url('/img/sub/subCommon01.jpg');}
.sub .subCommon .box2 {background-image: url('/img/sub/subCommon02.jpg');}
.sub .subCommon .box3 {background-image: url('/img/sub/subCommon03.jpg');}
.sub .subCommon .box4 {background-image: url('/img/sub/subCommon04.jpg');}

.sub .subCommon .Txt {position: absolute; width: 90%; height: fit-content; left: 0; right:0; bottom:10%; margin: auto; padding:0 1rem;}
.sub .subCommon .sumBtn {margin-left: auto;}
.sub .subCommon .sumBtn:after {width: 26px; height: 26px;}
@media(max-width:990px) {
    .sub .subCommon .box {aspect-ratio: 4 / 5;}
}
@media(max-width:500px) {
    .sub .subCommon .box {aspect-ratio: 4 / 6;}
}


/* yourStory */
.sub .yourStory {background: no-repeat center url('/img/sub/BSsum/yourStoryBg.jpg'); background-size: cover;}
.sub .yourStory .LogoImg {width: 4.4375rem;}



/* DrPark */
.sub .DrPark {background: no-repeat center url('/img/sub/BSsum/yourStoryBg.jpg'); background-size: cover;}
.sub .DrPark .Bgbox {border-radius: 6.25rem 6.25rem 0 0; background-color: #fff; margin-top: -5.5rem;}
.sub .DrPark .Img {padding: 0 2rem;}
.sub .DrPark .doctorImg {width: 30.0625rem;}
@media(max-width:768px) {
    .sub .DrPark .Img {order: 2;}
    .sub .DrPark .Desc {display: flex; align-items: center; justify-content: center;}
    .sub .DrPark .doctorImg {width: 23.0625rem;}
}



/* doctors */
.sub .doctors .Bgbox {background: no-repeat center url('/img/sub/BSsum/doctorsBg.jpg'); background-size: cover; border-radius: 6.25rem 6.25rem 0 0; overflow: hidden;}
.sub .doctors .Img {padding: 0 2rem;}
.sub .doctors .doctorsImg {width: 54rem;}
@media(max-width:768px) {
        .sub .doctors .Desc {display: flex; align-items: center; justify-content: center; padding-bottom: 3rem;}
}


/* BSinfo */
.sub .BSinfo .TbTit {width: 9rem; letter-spacing: -0.125rem; /* white-space: nowrap; */ text-align: justify; padding-right: 2rem; height: 1.875rem; display: block; position: relative; padding-left: 1rem;}
.sub .BSinfo .TbTit:after {content:''; display: inline-block; width: 100%;}
.sub .BSinfo .TbTit:before {content:'· '; position: absolute; top:0; left: 0;}
.sub .BSinfo table span {padding: .2rem 1rem; border-radius: 15px; background-color: var(--subcolor); color:var(--pointcolor); font-weight: 800; font-size: 1.125rem;}

.sub .BSinfo .roundBox {display: flex; align-items: center; gap:0 2rem}
.sub .BSinfo .roundBox li {padding: .5rem 2rem; color:#fff; border-radius: 1.75rem; background: linear-gradient(365deg, #0e295e, #12377f); box-shadow: 0 1px 0 #fff, 0 -1px 0 #000;}
.sub .BSinfo .Line {width: 100%; height: 1px; background-color: #b7c0d2; margin: 5rem auto;}
.sub .BSinfo .checkTxt {display: flex; align-items: baseline; justify-content: center; background-color: #f5f8fe; padding: 1.25rem 2rem;}
.sub .BSinfo .checkTxt img {width: 1.875rem;}

.sub .BSinfo .counselList .box {padding: 2.5rem; border-radius: 20px; background-color: #f8f8f8; gap:0 1rem}
.sub .BSinfo .counselList .box img {width: 5.625rem;}
.sub .BSinfo .enTxt {font-family: var(--pointfont); color:#cacaca; font-weight: 500;}
.sub .BSinfo .info_icon {width: 2.0625rem;}

/* mapInfo */
.sub .mapInfo #map {width: 100%; height: 34.375rem;}
.sub .mapInfo .Btn_wrap {display: flex; align-items: center; position: absolute; bottom: 0; left: 0; z-index: 9;}
.sub .mapInfo .map_cover {width: 100%; height: 100%; background-color: rgba(255,255,255,.1); position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto; z-index: 1; mix-blend-mode: color;}
.sub .mapInfo .mapBtn {padding: .5rem 1.5rem; display: flex; align-items: center;}
.sub .mapInfo .mapBtn.N {background-color: #fff;}
.sub .mapInfo .mapBtn.K {background-color: #fbe100;}

.sub .mapInfo .roundBox {padding: .5rem 2rem; width: fit-content; color:#fff; border-radius: 1.75rem; background: linear-gradient(365deg, #0e295e, #12377f); box-shadow: 0 1px 0 #fff, 0 -1px 0 #000;}
.sub .mapInfo .busImg {width: 1.25rem;}
.sub .mapInfo .hyphen {position: relative; padding-left: 2.5rem;}
.sub .mapInfo .hyphen:after {content:''; width: 1.375rem; height: 2px; background-color: var(--pointcolor); position: absolute; top:1rem; left:0;}
@media(max-width:500px) {
    .sub .mapInfo #map {height: 40rem;}
}


/* thanks */
.sub .thanksSwiper .swiper-wrapper { -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
.sub .thanksSwiper .swiper-slide {width: auto !important;}
.sub .thanksSwiper .swiper-slide img {object-fit: cover;}
@media(max-width:500px) {
	.sub .thanksSwiper  .swiper-slide img {height:180px}
}


/* equip */
.sub .equip .inner {max-width: 1170px; margin: auto;}
.sub .equip .enTit {font-family:var(--pointfont); color:#a1b1d1; font-weight: 600; position: relative; padding-left: 2.5rem;}
.sub .equip .enTit:after {content:''; width: 1.375rem; height: 2px; background-color: #a1b1d1; position: absolute; top:1rem; left: 0;}
.sub .equip .Btn_wrap {position: absolute; bottom: 0; left: 50%;}
@media(max-width:768px) {
    .sub .equip .Btn_wrap {position: relative; margin-top: 5rem; left: 0;}    
}


/* nonbenefit */
.sub .nonbenefit table {border-spacing:0; width:100%; border:1px solid #ddd; border-collapse : collapse;}
.sub .nonbenefit th {border:1px solid #ddd; padding:.5rem 1rem; text-align: center; font-weight: 500;}
.sub .nonbenefit td {border:1px solid #ddd; padding:.5rem 1rem;}
.sub .nonbenefit .bgBox {background-color: var(--pointcolor); color:#fff;}



/* intro */
.sub .intro .Img {max-width: 600px; width: 100%; overflow: hidden;}
.sub .intro .Desc {max-width: 600px; width: 100%; margin-left: auto; display:block;}

.fattransplantation .intro .Desc{max-width: 100%;}

/* need */
.sub .treatment .inner {max-width: 1050px; width: 100%; margin: auto;}
.sub .treatment .box {background-color: #f8f8f8; border-radius: 20px; padding: 4rem 1rem;}
.sub .treatment .Line {width: 9.375rem; height: 1px; background-color: #b1bfd8; margin: 1rem auto 1.5rem;}


/* point */
.sub .point .TxtBox {background-color: #f8faff; padding: 2rem 3rem;}
.sub .point .TxtBox p {position: relative; padding-left: 2.5rem;}
.sub .point .TxtBox p:after {content:''; width: 1.3125rem; height: 2px; background-color: var(--pointcolor); position: absolute; left: 0; top:.875rem;}

.sub .point .roundList .roundBox {background: linear-gradient(180deg, #12377e, #0e2147); color:#fff; border-radius: 1.875rem; width: 11.125rem; text-align: center; padding: .5rem 1rem; font-weight: 700;} 
.sub .point .roundList li {display: flex; align-items: center; gap:0 2rem; padding: 1rem 0;}
.sub .point .roundList li p {width: 70%;}

.sub .point .slideWrap {display: flex; align-items: center; gap:0 1rem;}
.sub .point .swiper-pagination {color:#989898; display: flex; flex-direction: column; gap:1.5rem 0;}
.sub .point .swiper-pagination-bullet {width: 100%; height: auto; white-space: nowrap; font-size: 1.375rem; display: flex; opacity: 1; margin: 0; background-color: transparent;}
.sub .point .swiper-pagination-bullet .Num {position: relative; padding-left: 3rem; padding-right: 2rem;}
.sub .point .swiper-pagination-bullet .Num:after {content:''; font-family: var(--pointfont); font-size: 1.125rem; font-weight: 600; position: absolute; height: fit-content; left: 0; top:0; bottom:0; margin: auto;}
.sub .point .swiper-pagination-bullet .Num1:after {content:'01';}
.sub .point .swiper-pagination-bullet .Num2:after {content:'02';}
.sub .point .swiper-pagination-bullet .Num3:after {content:'03';}
.sub .point .swiper-pagination-bullet .Num4:after {content:'04';}
.sub .point .swiper-pagination-bullet .Num5:after {content:'05';}
.sub .point .swiper-pagination-bullet .Num6:after {content:'06';}
.sub .point .swiper-pagination-bullet .Num7:after {content:'07';}
.sub .point .swiper-pagination-bullet-active {color:var(--pointcolor)}
.sub .point .swiper-pagination-bullet-active .Num:before {content:''; width: .625rem; height: .625rem; border-right: 2px solid var(--pointcolor); border-bottom: 2px solid var(--pointcolor); position: absolute; right: 10px; top: .75rem; transform: rotate(-45deg);}


.sub .point .arrowBox .box {position: relative;}
.sub .point .arrowBox .box:after {content:''; width: .625rem; height: .625rem; border-right: 2px solid var(--pointcolor); border-bottom: 2px solid var(--pointcolor); position: absolute; right: -1rem; top: 0; bottom:0; margin: auto; transform: rotate(-45deg);}
.sub .point .arrowBox .box:last-child:after {display: none;}
.sub .point .arrowBox .TitBox {background-color: #f8f8f8; padding: 2rem;}


.sub .point .rowBox {display: flex; flex-direction: column; gap:2rem 0}
.sub .point .rowBox li {display: flex; align-items: center; gap:0 2rem; background-color: #f8f8f8; position: relative;} 
.sub .point .rowBox .img {width: 35%; background: no-repeat center / cover; min-height: 14.25rem;} 
.sub .point .rowBox .Desc {padding: 1rem 2rem; width: 65%;}
.sub .point .rowBox li:after {content:''; width: .625rem; height: .625rem; border-right: 2px solid var(--pointcolor); border-bottom: 2px solid var(--pointcolor); position: absolute; right: 0; left:0; bottom:-1.25rem; margin: auto; transform: rotate(45deg);}
.sub .point .rowBox li:last-child:after {display: none;}


.sub .point .stepBox .box {border-radius: 20px; background-color: #f8f8f8; text-align: center; padding: 2.5rem 1rem; position: relative;}
.sub .point .stepBox .Line {width: 9.375rem; height: 1px; background-color: #b1bfd8; margin: 1rem auto 1.5rem;}
.sub .point .stepBox .enTxt {font-size: 1.125rem; font-weight: 500; color:#a1b1d1; font-family: var(--pointfont);}
.sub .point .stepBox .box:after {content:''; width: .625rem; height: .625rem; border-right: 2px solid var(--pointcolor); border-bottom: 2px solid var(--pointcolor); position: absolute; right: -1rem; top: 0; bottom:0; margin: auto; transform: rotate(-45deg);}
.sub .point .stepBox .box:last-child:after {display: none;}

.sub .point .caseBox .Desc {padding: 1.5rem; background-color: #f8f8f8;}


.sub .point .NumBox {background-color: #f8f8f8; padding: 4rem 2rem;}
.sub .point .NumBox ul {display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1rem; margin-top: 2rem;}
.sub .point .NumBox li {display: flex; align-items: center; background-color: #fff; max-width: 46.875rem; width: 100%; overflow: hidden;}
.sub .point .NumBox img {width: 30.3125rem;}
.sub .point .NumBox .Num {background-color: var(--pointcolor); color:#fff; width: fit-content; padding: .5rem 1rem; max-width: 3.75rem; width: 100%; text-align: center;} 
.sub .point .NumBox .Desc {padding: .5rem 1rem; background-color: #fff;}

.sub .point .oneBox .box:nth-child(n+2) {margin-left: -1rem;}
.sub .point .oneBox .one {aspect-ratio: 1/1; width: 115%; border-radius: 50%; background-color: rgba(14,53,127,.8);position: relative;}
.sub .point .oneBox .one.B {background-color: rgba(6,21,50,.9); position: relative; z-index: 3;}
.sub .point .oneBox .one:after {content:'+'; font-weight: 700; position: absolute; right: 1rem; z-index: 4;}
.sub .point .oneBox .box:last-child .one:after {display: none;}


.sub .point .pointTb table {width: 100%; border-spacing: 0; border-bottom:1px solid #b6c2d8;}
.sub .point .pointTb table td {font-weight: 700; text-align: center; padding: 1.3rem 1rem; border-top:1px solid #b6c2d8;}
.sub .point .pointTb table .Tit.L {background-color: #f8faff; color:var(--pointcolor);}
.sub .point .pointTb table .Tit.R {background-color: #f7f7f7;}
.sub .point .pointTb table .BgGray {background-color: #f1f1f1; font-weight: 400;}


.sub .point .abBox .TxtL {background-color: #b6c2d8; padding: 1rem;}
.sub .point .abBox .TxtR {background-color: var(--pointcolor); padding: 1rem;}


@media(max-width:990px) {
    .sub .point .arrowBox .box:after {display: none;}

    .sub .point .NumBox .Num {padding: 1.5rem 1rem;}

    .sub .point .oneBox .one {width: 105%;}
    .sub .point .oneBox .one:after {display: none;}
    .sub .point .oneBox .box:nth-child(3) {margin-left: 0;}
    .sub .point .oneBox .box:last-child {margin-top: -6.5rem;}
}
@media(max-width:768px) {
    .sub .point .swiper-pagination {flex-direction: row; flex-wrap: wrap; gap:1rem; margin-bottom: 2rem;}
    .sub .point .swiper-pagination-bullet {width: fit-content;}
}
@media(max-width:500px) {
    .sub .point .oneBox {margin-left: -2rem;}
    .sub .point .oneBox .one {width: 110%;}
    .sub .point .oneBox .box:last-child {margin-top: -5rem;}

    .sub .point .rowBox .Desc {padding: 1rem;}

    .sub .point .stepBox .box:after {display: none;}
}



/* need */
.sub .need {background-color: #000; position: relative; z-index: 0;}

.sub .need .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute;top: 0;left: 0;width: 100%;height: 100%; z-index: -1;}
.sub .need .bg {position: fixed;display: block;top: 0;left: 0;width: 100%;height: 100vh; background-position: center;background-repeat: no-repeat;background-size: cover;transform: translateZ(0);will-change: transform;}

.sub .need .txt_wrap {width: 50%; float: right;}

.sub.EpidermalCyst .need .bg {background-image: url('/img/sub/ecphyma/need_EpidermalCyst.jpg');}
.sub.Pilomatrixoma .need .bg {background-image: url('/img/sub/ecphyma/need_Pilomatrixoma.jpg');}
.sub.Neurofibromatosis .need .bg {background-image: url('/img/sub/ecphyma/need_Neurofibromatosis.jpg');}
.sub.Lipoma .need .bg {background-image: url('/img/sub/ecphyma/need_Lipoma.jpg');}
.sub.SkinCancer .need .bg {background-image: url('/img/sub/ecphyma/need_SkinCancer.jpg');}
.sub.SkinTumor .need .bg {background-image: url('/img/sub/ecphyma/need_SkinTumor.jpg');}
.sub.melaninNevus .need .bg {background-image: url('/img/sub/mole/need_melaninNevus.jpg');}
.sub.blueNevus .need .bg {background-image: url('/img/sub/mole/need_blueNevus.jpg');}
.sub.dysplasticNevus .need .bg {background-image: url('/img/sub/mole/need_dysplasticNevus.jpg');}
.sub.sebaceousNevus .need .bg {background-image: url('/img/sub/mole/need_sebaceousNevus.jpg');}
.sub.stages .need .bg {background-image: url('/img/sub/burn/need_stages.jpg');}
.sub.scalding .need .bg {background-image: url('/img/sub/burn/need_scalding.jpg');}
.sub.steam .need .bg {background-image: url('/img/sub/burn/need_steam.jpg');}
.sub.friction .need .bg {background-image: url('/img/sub/burn/need_friction.jpg');}
.sub.contact .need .bg {background-image: url('/img/sub/burn/need_contact.jpg');}
.sub.flame .need .bg {background-image: url('/img/sub/burn/need_flame.jpg');}
.sub.laceration .need .bg {background-image: url('/img/sub/sore/need_laceration.jpg');}
.sub.Abrasion .need .bg {background-image: url('/img/sub/sore/need_Abrasion.jpg');}
.sub.ChronicWound .need .bg {background-image: url('/img/sub/sore/need_ChronicWound.jpg');}
.sub.reconstruction .need .bg {background-image: url('/img/sub/sore/need_reconstruction.jpg');}
.sub.complications .need .bg {background-image: url('/img/sub/sore/need_complications.jpg');}
.sub.keloid .need .bg {background-image: url('/img/sub/scar/need_keloid.jpg');}
.sub.hypertropicScar .need .bg {background-image: url('/img/sub/scar/need_hypertropicScar.jpg');}
.sub.ScarRepair .need .bg {background-image: url('/img/sub/scar/need_ScarRepair.jpg');}
.sub.laser .need .bg {background-image: url('/img/sub/beauty/need_laser.jpg');}
.sub.fillerBotox .need .bg {background-image: url('/img/sub/beauty/need_fillerBotox.jpg');}
.sub.liposuction .need .bg {background-image: url('/img/sub/beauty/need_liposuction.jpg');}
.sub.fattransplantation .need .bg {background-image: url('/img/sub/beauty/need_fattransplantation.jpg');}

@media(max-width:768px) {
    .sub .need .txt_wrap {width: 100%; float: left; text-align: center;}
}

/* prosess */
.sub .prosess .txtwrap {max-width: 700px; width: 100%; margin: 5rem auto 0; position: relative; display: flex; justify-content: center; gap:0 1rem;}
.sub .prosess .txtwrap:after {content:''; z-index: -1; width: 140%; height: 1.6px; background: linear-gradient(to right, transparent, #b6c2d8, transparent); position: absolute; top:.4rem; margin: auto;}
.sub .prosess .txt .one {width: .9375rem; height: .9375rem; border-radius: 50%; background-color: var(--pointcolor); margin: auto; position: relative;}
.sub .prosess .txt.active .one:before {display: block; content: ''; clear: both; position: absolute; left: 0; top: 0; bottom:0; right:0; margin: auto; width: .4375rem; height: .4375rem; background-color: #fff; border-radius: 50%;}
.sub .prosess .txt.active .one:after {background: var(--pointcolor); width: 40px; height: 40px; display: block; content: ''; clear: both; position: absolute; left: 50%; top: 50%; border-radius: 50%; z-index: -1; -webkit-animation: ripple 1.8s infinite; animation: ripple 1.8s infinite; margin: -20px 0 0 -20px; opacity: 0;}

@keyframes ripple {
    0% {opacity: 1; -webkit-transform: scale(0); transform: scale(0);}
    100% {opacity: 0; -webkit-transform: scale(1); transform: scale(1);}
}

.sub .prosess .txt {flex: 1;}
.sub .prosess .txt.active {color:var(--pointcolor); font-weight: 700;}

.sub .prosess .slide_inner {display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; position: relative; gap:0 2rem}
.sub .prosess .prosess-slide2, .sub .prosess .prosess-slide3 {width: 33%; height: 350px; flex-shrink: 0; overflow: hidden; border-radius: 5rem; filter: grayscale(1) brightness(2);}
.sub .prosess .prosess-slide1 {max-width: 31.875rem; width: 100%; flex-shrink: 0; overflow: hidden; border-radius: 7.5rem; aspect-ratio: 10/14;}

.sub .prosess .prosess-slide2 .Desc, .sub .prosess .prosess-slide3 .Desc {display: none;}
.sub .prosess .Desc {position: absolute; height: fit-content; width: fit-content; top:0; left: 0; bottom:0; right:0; margin: auto;}
.sub .prosess .Line {width: 1px; height: 3.125rem; background-color: #c2b5a8; margin: 2rem auto;}
.sub .prosess .Desc .dot {position: relative; padding-left: 1rem;}
.sub .prosess .Desc .dot:after {content:''; width: .4375rem; height: .4375rem; background-color: var(--subcolor); border-radius: 50%; position: absolute; left: 0; top: .875rem;}
.sub .prosess .Desc .dot.Wh {padding-left: 2rem;}
.sub .prosess .Desc .dot.Wh:after {background-color: #fff; left: 1rem;}

.sub .prosess .swiper-slide {overflow: hidden; background: no-repeat center; background-size: cover; transition: .3s;}

.sub.ecphyma .prosess .slide1 {background-image: url('/img/sub/ecphyma/prosess01.jpg');}
.sub.ecphyma .prosess .slide2 {background-image: url('/img/sub/ecphyma/prosess02.jpg');}
.sub.ecphyma .prosess .slide3 {background-image: url('/img/sub/ecphyma/prosess03.jpg');}

.sub.melaninNevus .prosess .slide1 {background-image: url('/img/sub/mole/melaninNevus_prosess01.jpg');}
.sub.melaninNevus .prosess .slide2 {background-image: url('/img/sub/mole/melaninNevus_prosess02.jpg');}
.sub.melaninNevus .prosess .slide3 {background-image: url('/img/sub/mole/melaninNevus_prosess03.jpg');}
.sub.melaninNevus .prosess .slide4 {background-image: url('/img/sub/mole/melaninNevus_prosess04.jpg');}

.sub.blueNevus .prosess .slide1 {background-image: url('/img/sub/mole/blueNevus_prosess01.jpg');}
.sub.blueNevus .prosess .slide2 {background-image: url('/img/sub/mole/blueNevus_prosess02.jpg');}
.sub.blueNevus .prosess .slide3 {background-image: url('/img/sub/mole/blueNevus_prosess03.jpg');}
.sub.blueNevus .prosess .slide4 {background-image: url('/img/sub/mole/blueNevus_prosess04.jpg');}

.sub.dysplasticNevus .prosess .slide1 {background-image: url('/img/sub/mole/dysplasticNevus_prosess01.jpg');}
.sub.dysplasticNevus .prosess .slide2 {background-image: url('/img/sub/mole/dysplasticNevus_prosess02.jpg');}
.sub.dysplasticNevus .prosess .slide3 {background-image: url('/img/sub/mole/dysplasticNevus_prosess03.jpg');}
.sub.dysplasticNevus .prosess .slide4 {background-image: url('/img/sub/mole/dysplasticNevus_prosess04.jpg');}

.sub.sebaceousNevus .prosess .slide1 {background-image: url('/img/sub/mole/sebaceousNevus_prosess01.jpg');}
.sub.sebaceousNevus .prosess .slide2 {background-image: url('/img/sub/mole/sebaceousNevus_prosess02.jpg');}
.sub.sebaceousNevus .prosess .slide3 {background-image: url('/img/sub/mole/sebaceousNevus_prosess03.jpg');}

.sub.stages .prosess .slide1 {background-image: url('/img/sub/burn/stages_prosess01.jpg');}
.sub.stages .prosess .slide2 {background-image: url('/img/sub/burn/stages_prosess02.jpg');}
.sub.stages .prosess .slide3 {background-image: url('/img/sub/burn/stages_prosess03.jpg');}
.sub.stages .prosess .slide4 {background-image: url('/img/sub/burn/stages_prosess04.jpg');}

.sub.burn .prosess.burn .slide1 {background-image: url('/img/sub/burn/burn_prosess01.jpg');}
.sub.burn .prosess.burn .slide2 {background-image: url('/img/sub/burn/burn_prosess02.jpg');}
.sub.burn .prosess.burn .slide3 {background-image: url('/img/sub/burn/burn_prosess03.jpg');}
.sub.burn .prosess.burn .slide4 {background-image: url('/img/sub/burn/burn_prosess04.jpg');}

.sub.laceration .prosess .slide1 {background-image: url('/img/sub/sore/laceration_prosess01.jpg');}
.sub.laceration .prosess .slide2 {background-image: url('/img/sub/sore/laceration_prosess02.jpg');}
.sub.laceration .prosess .slide3 {background-image: url('/img/sub/sore/laceration_prosess03.jpg');}
.sub.laceration .prosess .slide4 {background-image: url('/img/sub/sore/laceration_prosess04.jpg');}

.sub.Abrasion .prosess .slide1 {background-image: url('/img/sub/sore/Abrasion_prosess01.jpg');}
.sub.Abrasion .prosess .slide2 {background-image: url('/img/sub/sore/Abrasion_prosess02.jpg');}
.sub.Abrasion .prosess .slide3 {background-image: url('/img/sub/sore/Abrasion_prosess03.jpg');}
.sub.Abrasion .prosess .slide4 {background-image: url('/img/sub/sore/Abrasion_prosess04.jpg');}

.sub.ChronicWound .prosess .slide1 {background-image: url('/img/sub/sore/ChronicWound_prosess01.jpg');}
.sub.ChronicWound .prosess .slide2 {background-image: url('/img/sub/sore/ChronicWound_prosess02.jpg');}
.sub.ChronicWound .prosess .slide3 {background-image: url('/img/sub/sore/ChronicWound_prosess03.jpg');}

.sub.reconstruction .prosess .slide1 {background-image: url('/img/sub/sore/reconstruction_prosess01.jpg');}
.sub.reconstruction .prosess .slide2 {background-image: url('/img/sub/sore/reconstruction_prosess02.jpg');}
.sub.reconstruction .prosess .slide3 {background-image: url('/img/sub/sore/reconstruction_prosess03.jpg');}
.sub.reconstruction .prosess .slide4 {background-image: url('/img/sub/sore/reconstruction_prosess04.jpg');}

.sub.scar .prosess .slide1 {background-image: url('/img/sub/scar/scar_prosess01.jpg');}
.sub.scar .prosess .slide2 {background-image: url('/img/sub/scar/scar_prosess02.jpg');}
.sub.scar .prosess .slide3 {background-image: url('/img/sub/scar/scar_prosess03.jpg');}
.sub.scar .prosess .slide4 {background-image: url('/img/sub/scar/scar_prosess04.jpg');}

.sub.fillerBotox .prosess .slide1 {background-image: url('/img/sub/beauty/fillerBotox_prosess01.jpg');}
.sub.fillerBotox .prosess .slide2 {background-image: url('/img/sub/beauty/fillerBotox_prosess02.jpg');}
.sub.fillerBotox .prosess .slide3 {background-image: url('/img/sub/beauty/fillerBotox_prosess03.jpg');}
.sub.fillerBotox .prosess .slide4 {background-image: url('/img/sub/beauty/fillerBotox_prosess04.jpg');}

.sub.laser .prosess .slide1 {background-image: url('/img/sub/beauty/laser_prosess01.jpg');}
.sub.laser .prosess .slide2 {background-image: url('/img/sub/beauty/laser_prosess02.jpg');}
.sub.laser .prosess .slide3 {background-image: url('/img/sub/beauty/laser_prosess03.jpg');}
.sub.laser .prosess .slide4 {background-image: url('/img/sub/beauty/laser_prosess04.jpg');}

.sub .prosess .swiper-button-next, .sub .prosess .swiper-button-prev {position: relative; z-index: 9; width: fit-content; left:auto; right:auto;}
.sub .prosess .swiper-button-next img, .sub .prosess .swiper-button-prev img {position: absolute;}
.sub .prosess .swiper-button-prev img {transform: rotate(180deg); opacity: .3;}

@media(max-width:1024px) {
    .sub .prosess .txtwrap:after {width: 110%;}
}
@media(max-width:400px) {
    .sub .prosess .prosess-slide2 {max-width: 28rem;}  
}


/* philosophy */
.sub .philosophy .bgBox {background: no-repeat center url('/img/sub/philosophyBg.jpg'); background-size: cover; padding: 7rem;}
.sub .philosophy .TxtBox {background-color: #fff; padding: 5rem; max-width: 45rem; margin-left: auto;}
@media(max-width:768px) {    
    .sub .philosophy .bgBox {padding: 50% 2rem 5rem; background-image: url('/img//sub/philosophyBg_m.jpg');}
    .sub .philosophy .TxtBox {padding: 5rem 2rem; margin-right: auto; display: flex; align-items: center; justify-content: center;}
}
@media(max-width:500px) {
    .sub .philosophy .container_Lg {width: 100%;}
}



/* before */
.sub .before .Tit {padding: 1rem; position: relative; z-index: 3;}
.sub .before .Tit.B {background-color: #b4bbca;}
.sub .before .LoginBox {background-color: rgba(0,0,0,.8); width: 100%; height: 100%; position: absolute; top:0; left:0;}



/* notandum */
.sub .notandum .flexBox {display: flex; justify-content: space-between;}
.sub .notandum .TitBox {width: 35%;}
.sub .notandum .ListBox {width: 50%;}

.sub .notandum .BgBox {background: linear-gradient(to bottom, #fbfbfb, #fefefe); border-radius: 6.25rem 6.25rem 0 0;}
.sub .notandum ul li {display: flex; align-items: center; gap:0 3rem; padding: 1.5rem; border-bottom:1px solid #a1b1d1}
.sub .notandum .Tit {font-family: var(--pointfont); color:#a1b1d1; font-weight: 600; width: 16%; white-space: nowrap;}
.sub .notandum .Tit.Ko {color:var(--pointcolor); font-weight: 800;}
.sub .notandum .Desc {width: 75%;}
@media(max-width:1240px) {
    .sub .notandum .ListBox {width: 60%;}
}
@media(max-width:990px) {
    .sub .notandum .TitBox {width: 100%;}
    .sub .notandum .ListBox {width: 100%; margin-top: 3rem;}
}



/* promise */
.sub .special .flexBox {display: flex;}

.sub .special .swiper-slide {display: flex; align-items: center;}
.sub .special .img {width: 45%;}
.sub .special .Desc {width: 55%;}
.sub .special .Desc {padding: 2rem 3rem;}
.sub .special .enTit {font-family: var(--pointfont); color:#a1b1d1; font-weight: 500;}

.sub .special .Btn_wrap {position: absolute; bottom:0; left: -1rem;}


@media (max-width:1580px) {
   

}

@media(max-width:1240px) {
    .sub .special .Slide {margin-top: 3rem;}
    .sub .special .Btn_wrap {right: 0; left: auto;}
}
@media (max-width:990px) {
   

}
@media(max-width:768px) {
    .sub .special .img, .sub .special .Desc {width: 50%;}
   
}
@media(max-width:500px) {
    .sub .special .swiper-slide {flex-direction: column;}
    .sub .special .img, .sub .special .Desc {width: 100%;}
    .sub .special .swiper-slide .Desc {opacity: 0;}
    .sub .special .swiper-slide-active .Desc {padding: 2rem 0; opacity: 1;}
    .sub .special .Btn_wrap {margin: 0; position: relative; left: -2rem; margin-top: 3rem;}
}



/* medical */
.sub .medical ul {background: no-repeat center url('/img/sub/medicalBg01.jpg'); background-size: cover; transition: ease-in-out .5s;}
.sub .medical ul li {padding: 10rem 1rem 10.4rem; position: relative; border-right: 1px solid rgba(255,255,255,.5); background: no-repeat center; background-size: cover;}
.sub .medical ul li:last-child {border-right: none;}
.sub .medical ul li .Txt {font-size: 1.875rem; margin-top: 1.25rem; font-weight: 700;}
.sub .medical ul li .medicalIcon, .sub .medical ul li .Txt {opacity: .4; transition: .3s;}
.sub .medical .medicalIcon {width: 6.875rem; margin: auto;}

.sub .medical .plusBtn {display: flex; align-items: center; color:#fff; justify-content: center; position: absolute; right:0; left:0; bottom:6rem; margin: auto; opacity: 0; transition: .3s;}
.sub .medical .plusBtn > span {width: 3rem; height: 3rem; border-radius: 50%; border:.125rem solid #fff; display: flex; align-items: center; justify-content: center; margin-left: 1.5rem; transition: .3s;}
.sub .medical .plusBtn:hover > span {transform: scale(1.1); transition: .3s;}
.sub .medical .material-symbols-outlined {font-size: 1.375rem;}

.sub .medical li:hover .Txt, .sub .medical li:hover .medicalIcon {opacity: 1; transform: translateY(-1.5rem);}
.sub .medical ul li:hover .plusBtn {opacity: 1; transition: .3s;} 
@media(max-width:768px) {
    .sub .medical ul li {display: flex; align-items: center; justify-content: space-between; padding: 4rem 2.5rem; border-right:none;}
    .sub .medical ul li .medicalIcon, .sub .medical ul li .Txt {opacity: 1; margin-top: 0;}
    .sub .medical li:hover .Txt, .sub .medical li:hover .medicalIcon {transform: none;}
    .sub .medical .medicalIcon {margin: 0; width: 5.5rem;}
    .sub .medical .plusBtn {opacity: 1; position: relative; bottom:0; margin: 0;}
}



/* difference */
.sub .difference ul {border:1px solid #b1bfd8; border-radius: 20px; overflow: hidden;}
.sub .difference ul.point {border-color: var(--pointcolor);}

.sub .difference ul li {padding: 1.2rem 1rem;}
.sub .difference ul li:nth-child(3) {border-top:1px dashed #b1bfd8; border-bottom:1px dashed #b1bfd8;}
.sub .difference ul.point li:nth-child(3) {border-color:var(--pointcolor)}
.sub .difference ul .Tit {font-size: 1.875rem; font-weight: 700; background-color: #b1bfd8; color:#fff;}
.sub .difference ul.point .Tit {background-color: var(--pointcolor);}



/* cause */
.sub .cause .Tit_wrap {display: flex; align-items: end; justify-content: space-between;}
.sub .cause .causeSwiper {margin-top: 4rem;}
.sub .cause .swiper-slide img {filter: grayscale(1);}
.sub .cause .swiper-slide-active img {filter: grayscale(0);}
.sub .cause .DescBox {background-color: #f8faff; padding: 1.5rem; display: flex; gap:1rem;}
.sub .cause .Btn_wrap {margin: 0; height: fit-content;}
.sub .cause .inner {padding: 0 1.7rem;}

@media(max-width:500px) {
    .sub .cause .Tit_wrap {flex-direction: column; align-items: flex-start;}
    .sub .cause .Btn_wrap {/* margin-left: auto;  */margin-top: 2rem; margin-left: -2rem;}
    .sub .cause .causeSwiper {margin-top: 2rem;}
}



/* case */
.sub .case .Desc {background-color: #f8f8f8; padding: 3rem 1rem; min-height: 21.6875rem;}
.sub .case .Desc.A {background-color: #f8faff;}
.sub .case .Tit {font-family: var(--pointfont); font-weight: 600; color:#bcbcbc;}
.sub .case .Desc.A .Tit {color:#a1b1d1;}



/* Kind */
.sub .Kind ul {display: flex; flex-direction: column; gap:2rem 0;}
.sub .Kind ul li {background-color: #f8f8f8; display: flex; align-items: center;}
.sub .Kind .Img {padding: 3rem;}
.sub .Kind .Desc {background-color: #f8faff; padding: 4.5rem 4rem;}
.sub .Kind .enTxt {font-family: var(--pointfont); font-weight: 600; color:#a1b1d1;}
@media(max-width:500px) {
    .sub .Kind .Img {padding: 5rem;}
}


/* step */
.sub .step .inner {background-color: #f8faff; max-width: 1720px; margin: auto;}
.sub .step .btnBox {display: flex; align-items: center; gap:0 1rem;}
.sub .step .btnBox a {font-size: 1.25rem; padding: .5rem 2rem; border:1px solid #8397bf; color:var(--pointcolor); transition: .3s;}
.sub .step .btnBox a:hover {border-color:var(--pointcolor);}
.sub .step ul li {display: flex; align-items: center; gap:0 2rem; padding: 1.5rem; border-bottom:1px solid #a1b1d1}
.sub .step .Tit {font-family: var(--pointfont); color:#a1b1d1; font-weight: 600; width: 16%; white-space: nowrap;}
.sub .step .checkBox {width: 10%;}
@media(max-width:500px) {
    .sub .step ul li {gap:0 1rem}
}


/* accordion */
.sub .accordion .accList {position: relative; flex-direction: column; align-items: flex-start; padding: 1.5rem 2.5rem 1.5rem 1.5rem; transition: all 0.2s ease-in-out;}
.sub .accordion .accList.active {background-color: #ecf1fb;}
.sub .accordion .hiddenDesc {display: none;}
.sub .accordion .hiddenDesc p {position: relative; padding-left: 3rem; margin-top: 1rem;}
.sub .accordion .hiddenDesc p:after {content:'-'; position: absolute; left: 2rem; top:0;}

.sub .accordion a {margin-left: -1rem; cursor: pointer; position: relative; width: 100%;}
.sub .accordion a span {width: 0; height: 2px; background-color: var(--pointcolor); display: inline-block; position: relative; bottom:.6875rem; margin-right: .5rem; transition: all 0.2s ease-in-out;}
.sub .accordion a.active span {width: 1.375rem; margin-left: 1rem;} 

.sub .accordion a:after {content:''; width: 16px; height: 2px; background-color: var(--pointcolor); position: absolute; right:-28px; top:0; bottom:0; margin: auto; transition: all 0.2s ease-in-out;}
.sub .accordion a:before {content:''; width: 2px; height: 16px; background-color: var(--pointcolor); position: absolute; right:-22px; top: 0; bottom:0; margin: auto; transition: all 0.2s ease-in-out;}
.sub .accordion a.active:before {transform: rotate(90deg);}



/* way */
.sub .way .Desc {padding: 2rem;}
@media(max-width:768px) {
    .sub .way .Desc {order:-1; justify-content: flex-start;}
}



/* kindSlide */
.sub .kindSlide .thumbsBox {display: flex; flex-direction: column; justify-content: space-between;}
.sub .kindSlide .Tit {color:var(--pointcolor); position: relative; padding-left: 2rem;}
.sub .kindSlide .Tit:after {content:''; width: 1.375rem; height: 2px; background-color: var(--pointcolor); position: absolute; top:1.5rem; left: 0;}
.sub .kindSlide .txt {display: none; transition: .3s;}
.sub .kindSlide .txt.active {display: block; transition: .3s;}

.sub .kindSlide .Btn_wrap {margin: 0; margin-left: -2rem; padding: 4rem 0 2rem;}
.sub .kindSlide .kind-slide-thumbs .swiper-slide {filter: grayscale(1);}
@media(max-width:768px) {
    .sub .kindSlide .thumbsBox {order: -1;}
    .sub .kindSlide .kind-slide-thumbs {display: none;}
    .sub .kindSlide .txtwrap {margin-top: 3rem;}
}



/* kindBox */
.sub .kindBox .box {background-color: #f8f8f8; padding: 3rem 1.5rem;}
.sub .kindBox .box img {width: 11.25em;}


.BGSwiper .swiper-slide .box { aspect-ratio: 1/1; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 1rem; overflow: hidden; }


/* sub-nav */
.sub .sub-nav ul {gap: 8rem;}
.sub .sub-nav ul li {position: relative; padding-bottom: 0.5rem;}
.sub .sub-nav ul li:after {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 2px; background: var(--pointcolor); content: ""; transition: 0.3s;}
.sub .sub-nav ul li.on:After {width: 100%;}
.sub .sub-nav ul li a {color: #747474; transition: 0.3s;}
.sub .sub-nav ul li.on a {color: var(--pointcolor);}
.sub .sub-nav ul li:hover:after {width: 100%;}
.sub .sub-nav ul li:hover a {color: var(--pointcolor);}

@media(max-width:360px) {
    .sub .sub-nav ul {gap: 5rem;}
}

/* notandum_지방 */
.sub .notandum.fat .Tit {width: 20%;}
.sub .notandum.fat ul li {border-color: var(--pointcolor);}


/* part */
.sub .part .tabs li {opacity: 0.2; cursor: pointer;}
.sub .part .tabs li .flex-between {}
.sub .part .tabs li .progress {width: 100%; height: 2px; background: #3f3f3e; position: relative; overflow: hidden;}
.sub .part .tabs li .progress .progress-bar {position: absolute; left: 0; top: 0; width: 0%; height: 2px; background: var(--pointcolor); transition: none; }
.sub .part .tabs li a {padding: 1.5rem 0; width: 3.625rem;}
.sub .part .tabs li a img,
.sub .part .tabs li a:After {opacity: 0;}
.sub .part .tabs li p {padding: 1.5rem 0; width: calc(100% - 3.625rem);}
.sub .part .sumBtn:after {right: -0.45rem;}
.sub .part li:hover .sumBtn:after {
    transform: scale(1.3);
    transition: .3s;
}

.sub .part .tabs li.current {opacity: 1; color: var(--pointcolor); font-weight: 600;}
.sub .part .tabs li.current .progress {background: var(--gray);}
.sub .part .tabs li.current .progress .progress-bar {transition: width 5s linear;}
.sub .part .tabs li.current a img,
.sub .part .tabs li.current a:After {opacity: 1;}

.sub .part .tab-contents {position: relative; display: none;}
.sub .part .tab-contents.current {display: inherit;}
.sub .part .tab-contents:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 85%; border-radius: 0 40px 40px 0; background: #f7faff; content: ""; z-index: -1;}
.sub .part .tab-contents .imgbox {position: relative;}
.sub .part .tab-contents .imgbox img {border-radius: 40px;}
.sub .part .tab-contents .txtbox {border-radius: 0 40px 40px 0; padding-left: 3.5rem;}


@media(max-width:1440px) {
    .sub .part .box.width60 {width: 65%;}
}

@media(max-width:1240px) {
    .sub .part .contbox.flex-between {flex-direction: column; gap: 3.5rem;}
    .sub .part .contbox .box.width25,
    .sub .part .contbox .box.width60 {width: 100%;}
    .sub .part .tabs li a {width: 4rem;}
    .sub .part .tabs li p {width: calc(100% - 4rem);}
    
}

@media(max-width:1024px) {
    .sub .part .tabs li a {width: 5rem;}
    .sub .part .tabs li p {width: calc(100% - 5rem);}
}

@media(max-width:768px) {
    .sub .part .tabs li a {width: 5.5rem;}
    .sub .part .tabs li p {width: calc(100% - 5.5rem);}
}

@media(max-width:600px) {
    .sub .part .tab-contents:after  {top: 0; transform: translateY(0); border-radius: 0; height: 60%;}
    .sub .part .tab-contents > .flex {flex-direction: column;}
    .sub .part .tab-contents .imgbox {order: 2; width: 90%;}
    .sub .part .tab-contents .txtbox {width: 100%; border-radius: 0; padding: 4.5rem 3.5rem;}
}

/* knowhow */
.sub .knowhow {background: #f8f8f8;}
.sub .knowhow .Btn_wrap {margin: 0 !important; position: relative; transform: translateX(-1rem);}
.sub .knowhow .box.txtbox {display: flex; flex-direction: column; justify-content: space-between;}
.sub .knowhow .knowhowSwiper .swiper-slide {background: rgba(255,255,255,0.5); padding: 4.5rem 2.5rem; border-radius: 40px; margin-top: 1.5rem; transition: 0.45s;}
.sub .knowhow .knowhowSwiper .swiper-slide.slide04 {padding: 2.5rem 2.5rem;}
.sub .knowhow .knowhowSwiper .swiper-slide.swiper-slide-active {margin-top: 0; filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.01)); background: #fff;}
.sub .knowhow .knowhowSwiper h3 {border: 1px solid var(--pointcolor); border-radius: 100px; padding: 0.35rem 1rem; width: fit-content;}
.sub .knowhow .knowhowSwiper p.check-mark {position: relative;}
.sub .knowhow .knowhowSwiper p.check-mark:after {position: absolute; left: 0; top: 0; content: url("/img/sub/check-mark.png");}

@media(max-width:1240px) {
    .sub .knowhow .box.width25 {width: 35%;} 
    .sub .knowhow .box.width75 {width: 65%;} 
}

@media(max-width:768px) {
    .sub .knowhow .cont_box.flex {flex-direction: column;}
    .sub .knowhow .box.width25 {width: 100%; padding-right: 0; flex-direction: row; align-items: flex-end;} 
    .sub .knowhow .box.width75 {width: 100%;} 
}

@media(max-width:340px) {
    .sub .knowhow .box.width25 {flex-direction: column; align-items: flex-start;}
    .sub .knowhow .Btn_wrap {margin-top: 3.5rem !important;}
}

/* target */
.sub .target .box {background: #f8f8f8; aspect-ratio: 1 / 1; cursor: pointer;}
.sub .target .check-cir {width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--gray); margin: auto; position: relative; transition: 0.2s;}
.sub .target .check-cir:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: url("/img/sub/check-mark.png"); filter: brightness(0) invert(1); z-index: 1; opacity: 0; transition: 0.2s;}
.sub .target .check-cir.on {background: var(--pointcolor);}
.sub .target .check-cir.on:after {opacity: 1;}

@media(max-width:1240px) {
    .sub .target .check-cir:after { transform: translate(-50%, -45%) scale(0.8);}
}

@media(max-width:990px) {
    .sub .target .check-cir:after { transform: translate(-50%, -40%) scale(0.6);}
}

/* progress */
.sub .progress .cont_box:after {position: absolute; left: 0; top: 0.3125rem; width: 100%; height: 1px; background: var(--gray); content: ""; z-index: -1;}
.sub .progress .cont_box .flex {justify-content: space-around;}
.sub .progress .box .dot {width: 10px; height: 10px; background: #000; border-radius: 50%; position: relative;}

.sub .progress .box .dot::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: #becff0; content: "";  opacity: 0; z-index: -1;}

.sub .progress .box.active .dot { background: var(--pointcolor); }
.sub .progress .box.active .dot:before { animation: 2s cir-bounce2 forwards infinite ease-in-out;}

@keyframes cir-bounce2 {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.3;}
    50% {opacity: 1;}
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0;}
}

@media(max-width:768px) {
    .sub .progress .cont_box:after {display: none;}
    .sub .progress .cont_box .flex {flex-wrap: wrap; justify-content: center; row-gap: 3.5rem;}
    .sub .progress .cont_box .box {width: calc(100% / 3); text-align: center; position: relative;}
    .sub .progress .cont_box .box:after {position: absolute; left: 0; top: 5px; width: 100%; height: 1px; content: ""; background: var(--gray); z-index: -1;}

    .sub .progress .cont_box .box .dot {margin: auto;}
}

.sub .s_target{background-color: #f8faff; padding: 8rem 0; max-width: 90%; margin: auto;}
.sub .s_target .ListBox ul li{padding: 1.2rem 0; border-bottom: 1px solid #b1bfd8;}

.sub .s_sysyem .box{background-color: #f8faff; padding: 2rem 1rem; border-radius: 20px;}

.sw_pro .swiper-progress-bar{position: absolute; left: -190px;}
.sw_pro .visual_control {width:380px; display: flex; align-items: center; position: absolute; bottom: 0; left: 5%;z-index: 5; transition: opacity 0.5s, transform 0.5s; will-change: transform, opacity;}
.sw_pro .swiper-pagination-current{font-size: 1.2rem;}
.sw_pro .swiper-pagination-total{opacity: 1 !important; color: #3f3f3e; float: right;}
.sw_pro .swiper-pagination {position: static; top: 50px; margin: 0; text-align: left; }
.sw_pro .swiper-pagination-bullet {background-color: transparent; font-weight: 500; opacity: 1; display: inline-flex; align-items: center; width: auto; height: auto; color: #3f3f3e;}
.sw_pro .swiper-pagination .swiper-pagination-current{color: #3f3f3e;}

.sw_pro .swiper-pagination-bullet .line {opacity: 1; display: block; position: relative; width: 0; height: 0.125rem; margin: 0 .5rem; transition: width 0.3s;}
.sw_pro .swiper-pagination-bullet > span {opacity: 0.3;}
.sw_pro .swiper-pagination-bullet-active > span {opacity: 1;}

.sw_pro .swiper-pagination-bullet .line::before, .sw_pro .swiper-pagination-bullet .line::after { content: ""; position: absolute; display: block; width: 100%; height: 100%;}

.sw_pro .swiper-pagination-bullet .line::before {background-color: #fff;opacity: 0.3;}
.sw_pro .swiper-pagination-bullet .line::after {width: 0; background-color: var(--pointcolor);}

.sw_pro .swiper-pagination-bullet-active .line {width: 10rem;}
._on.sw_pro .swiper-pagination-bullet-active .line {animation-name: width-slide;}
._off.sw_pro .swiper-pagination-bullet-active .line::after {
    animation-name: none;
    width: 0;
    animation-play-state: paused;
}
.sw_pro .p_page{float: right; color: #3f3f3e;}
.sw_pro .swiper-progress-bar {position: relative;    width: 180px;    display: block;    z-index: 1;    height: 2px;    margin: 0 auto;  background-color: #656565;}
.sw_pro .swiper-progress-bar .slide_progress-bar {position: absolute;    height: 2px;    background: rgba(255, 255, 255, 0.3);    width: auto;    clear: both;    opacity: 0;    bottom:0;    left: 0;    right: 0;  }
.sw_pro .swiper-progress-bar .slide_progress-bar:after {position: absolute;    top: 0; bottom: 0;    left: 0;    background: var(--pointcolor);    height: 100%;    width: 0;    content: "";    transition: 0.1s width linear;  }
.sw_pro .swiper-progress-bar.active .slide_progress-bar {opacity: 1;  }
.sw_pro .swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;    transition-delay: unset;    width: 100%;    transition-duration: 2s;  }
.sw_pro .swiper-pagination-bullet-active .line::after {animation-name: widthSlide; animation-duration: 7s; animation-iteration-count: 1; animation-play-state: play; animation-timing-function: linear;}
    
.s_process .visual_control{left: auto; right: -15%;}

.s_knowhow .s_title{position: relative;}
.s_knowhow .s_title:after{content: ''; display: block; width: 65%; height: 2px; background-color: var(--pointcolor); position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
@media(max-width: 1240px){
    .s_knowhow .swiper-slide .flex{flex-direction: column;}
    .s_knowhow .visual_control{left: 55%; transform: translateX(-50%);}
    .sub.fattransplantation .need .bg{background-position: 45%;}

    .s_knowhow .s_title:after{display: none;}
}

/* system */
.sub .system .swiper-slide .imgbox { border-radius: 50px;}
.sub .system .swiper-slide .imgbox img {border-radius: 50px; width: 100%;}
.sub .system .swiper-slide .txt {opacity: 0; transition: 0.3s;}
.sub .system .swiper-slide.swiper-slide-active .txt {opacity: 1;}
.sub .system .swiper-slide-prev,
.sub .system .swiper-slide-next {position: relative; transform: scale(0.8); opacity: 0.5;}

.sub .system .swiper_Btn {position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); width: calc(52% + 6.25rem); display: flex; justify-content: space-between; z-index: 1;}
.sub .system .swiper_Btn .swiper-button-prev:After,
.sub .system .swiper_Btn .swiper-button-next:After {
    font-size: 20px; border-radius: 50%; width: 6.25rem; height: 6.25rem; line-height: 6.25rem; text-align: center; color: var(--pointcolor); border: 1px solid var(--pointcolor); transition: 0.3s;
}
.sub .system .swiper_Btn .swiper-button-prev:hover:After,
.sub .system .swiper_Btn .swiper-button-next:hover:After {
    color: #fff; background: rgba(14,53,127,0.5); border-color: transparent;
}
.sub .system .swiper_Btn .swiper-button-prev:After {content: 'PREV'; }
.sub .system .swiper_Btn .swiper-button-next:After {content: 'NEXT'; }

.sub .system .Btn_wrap {display: none;}

@media(max-width:990px) {
    .sub .system .swiper_Btn {width: calc(70% + 6.25rem);}
    .s_process .visual_control{left: 0; right: auto; top: auto;}
    .s_process .flex-between{flex-direction: column;}
    .s_process .s_title{width: 100%; padding-bottom: 50px;}

    .s_knowhow .txt.ml-50{margin-left: 0;}
    .sub.fattransplantation .need .bg{background-position: 32%;}
}

@media(max-width:768px) {
    .sub .system .swiper_Btn .swiper-button-prev:After,
    .sub .system .swiper_Btn .swiper-button-next:After {font-size: 16px;}

    .sub.fattransplantation .need .bg{background-position: 4%;}
}

@media(max-width:680px) {
    .sub .system .swiper_Btn {top: 32%;}
}

@media(max-width:580px) {
    .sub .system .swiper_Btn {width: calc(87% + 6.25rem);} 
    .sub .system .swiper-slide .imgbox {width: 80%; margin: auto;}

    .sub.fattransplantation .need .bg{background-position: 11%;}
}

@media(max-width:500px) {
    .sub .system .Btn_wrap {display: flex; margin-bottom: 3.5rem;}

    .s_info .width80{width: 100%;}

    .sub.fattransplantation .need .bg{background-position: 15%;}
}

.sub {overflow: hidden;}
.sub .rolling-wrap {white-space: nowrap;}
.sub .rolling-wrap .rolling-text {display: inline-block; font-size: 6.25rem; line-height: 1; font-weight: 700; font-family: var(--pointfont); color:#f4f4f5;}

.sub .recovery .flexList {--x-gap:3rem; --y-gap:5rem;}

@media(max-width:1240px) {
    .sub .recovery .flexList.width90 {width: 100%;}
}

@media(max-width:768px) {
    .sub .recovery .box.pl-100 {padding-left: 0;}
    .sub .recovery .box.box1 {order: 1;}
    .sub .recovery .box.box2 {order: 2;}
    .sub .recovery .box.box3 {order: 4;}
    .sub .recovery .box.box4 {order: 3;}
    .sub .recovery .box.box7 {order: 8;}
    .sub .recovery .box.box8 {order: 7;}
    .sub .recovery .box {display: flex; justify-content: center; align-items: center;}
}

/* 커서 커스텀 */
#customCursor {position: fixed; z-index: 1000; left: 0;top: 0;pointer-events: none;will-change: transform; mix-blend-mode: normal;}
  
@media (hover: hover) and (pointer: fine) {
    .cursor_circle {width: 0; height: 0; margin-top: -50%; mix-blend-mode: normal; background-color: transparent;  margin-left: -50%; border-radius: 50%; transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); }

    /* 인테리어 */
    #customCursor.scroll .cursor_circle {mix-blend-mode: normal; width: 80px; height: 80px; border-radius: 50%; background-color: rgba(33,34,36,0.1); }
    #customCursor.scroll:before {position: absolute; top: 50%; left: 50%; width: 126px; height: 126px; transform: translate(-50%, -50%); display: block; margin-left: -50%; z-index: 1; margin-top: 25px;}
    #customCursor.scroll:after {content: "ROLLING"; font-size: 15px; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); display: block;  z-index: 1; margin-left: -50%; text-align: center; margin-top: 10px;}
    #customCursor.scroll:before {content: url("/img/sub/cir_arrow.png");}

}

/* 모바일 숨김 */
@media (pointer:coarse) {
    #customCursor {display: none;}
}