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

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

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

.sub .subTit {font-family: var(--koSerif); font-size: 2.5rem; font-weight: 100;}
.sub .enTit {font-family: var(--pointfont); letter-spacing: .1rem;}
.sub .gold {color:#988d71;}

.sub .introTb {max-width: 16.25rem; width: 100%;}
.sub .introTb td {padding: 7px 10px;}
.sub .introTb .Img {padding: 5px 0; margin-right: 10px;}
.sub .introTb .Img img {width: 1.3125rem;}

.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum:after {content:''; width: .5rem; height: .5rem; background-color: #fff; border-radius: 50%; position: absolute; left: 0; top:.625rem;}
.sub .zum.Gr:after {background-color: var(--pointcolor);} 

.sub .checkList {display: flex; flex-direction: column; gap:.5rem;}
.sub .checkList li {display: flex; align-items: baseline; gap: 0 1rem;}
.sub .check_sm {width: 1.1875rem;}

@media(max-width:768px) {
    .sub .font-16 {font-size: 1.2rem;}
}


/* sub Top */
.subTop {height:38.8125rem; position:Relative; top:0; left:0; overflow: hidden; z-index: 3;}
.subTop.Mini {height: 30rem;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden;}

.subTop .inner {position: relative; max-width: 1500px; width: 90%; top:14rem; margin: auto;}
.subTop .subTopLogo {position: absolute; left:0; right:0; bottom:2rem; margin: auto;}

#subnav {display: flex; align-items: center; justify-content: center; gap:0 1rem; margin-top: 3rem;}
#subnav li {position: relative; padding-right: 1.5rem;}
#subnav li:after {content:''; width: .3125rem; height: .3125rem; border-radius: 50%; background-color: #fff; position: absolute; top:0; bottom:0; right:0; margin: auto;}
#subnav li:last-child {padding-right: 0;}
#subnav li:last-child:after {display: none;}
#subnav li img {width: 1.25rem;}

#subnav.Gr {justify-content: flex-start;}
#subnav.Gr li:after {background-color: var(--pointcolor);}
.subTop.border {height: 35rem;}
.subTop.border .inner {top:12rem; max-width:var(--layoutwidth);}
.subTop.border #rollingTxt {overflow: visible; padding-bottom: 2rem; border:none;}
.subTop.border #rollingTxt p {color:#f6f6f6;}

/* intro */
.sub .intro .Txt {font-family: var(--koSerif); color:#fff; margin-top: 3rem; font-weight: 100; white-space: nowrap;}
.sub .intro .Txt.Pt {padding-top: 3rem;}
.sub .intro .TxtBox {padding: 5rem 6rem; position: absolute; background-color: #f5f6f6; width: 115%; right:-40%; bottom:-4rem; line-height: 1.5; min-height: 25rem; display: flex; align-items: center;}
.sub .intro .ImgBox {position: absolute; top:6rem; left: 0; right:0; margin: auto; z-index: -1; max-width: 32.5rem;}
.sub .intro .introTb {margin-top: 7rem;}
.sub .intro .introTb.SM {margin-top: 3rem;}
.sub .intro .blank {height: 13.4375rem;}
.sub .intro .blank.Lg {height: 17.4375rem;}
@media(max-width:990px) {
    .sub .intro .Txt.Pt {padding-top: 0;}
    .sub .intro .blank, .sub .intro .blank.Lg {height: 0;}
    .sub .intro .ImgBox {position: relative; top:0; z-index: 3; width: 90%;}
    .sub .intro .box.R {display: flex; align-items: center; justify-content: center;}
    .sub .intro .TxtBox {width: auto; background-color: transparent; right: auto; position: relative; padding: 1rem 1rem 4rem; bottom:0;}

    .sub .intro .introTb {margin-top: 3rem;}

    .sub .intro .flexList  {position: relative;}
    .sub .intro .flexList:after {position: absolute; content:''; width: 120%; height: 40%; background-color: #f5f6f6; z-index: -1; bottom:0; left: -10%; right:0; margin: auto;}
}


/* target */
.sub .target .box {display: flex; gap:2rem; border-radius: 1.25rem; border:1px solid #d9d9d9; padding: 1.5rem 2rem;}
.sub .target .Num {font-family: var(--pointfont); color:var(--pointcolor)}

.sub .targetList {display: flex; flex-direction: column; gap:1rem;}
.sub .targetList .box.non {border:none;}

/* solution */
.sub .solution .tab-menu li {color:#595959; font-family: var(--koSerif); text-align: center; padding: 1rem; border-bottom: 1px solid #d9d9d9; position: relative; cursor: pointer;}
.sub .solution .tab-menu li:after {content:''; width: 0px; height: 4px; background-color: var(--pointcolor); left: 0; bottom:-2px; position: absolute; transition: .3s;}
.sub .solution .tab-menu li.active:after {width: 100%; transition: .3s;} 
.sub .solution .tab-menu li.active {color:var(--pointcolor);}

.sub .solution .Line {width: 100%; height: 1px; background-color: #d9d9d9; margin: 2rem 0;}
.sub .solution .flexBox {display: flex; align-items: baseline; gap:2rem; line-height: 1.6;}
.sub .solution .roundBox {border-radius: 1.125rem; padding:.2rem 1.5rem; background-color: var(--pointcolor2); color:#fff; font-weight: 600;} 
.sub .solution .Num {width: 1.125rem; height: 1.125rem; aspect-ratio: 1/1; border-radius: 50%; border:1.5px solid var(--pointcolor2); color:var(--pointcolor2); font-size: .8rem; text-align: center; font-weight: 500; display: flex; align-items: center; justify-content: center;}

@media(max-width:1240px) {
    .sub .solution .tab-content .flexList {--x-gap:3rem}
}
@media(max-width:768px) {
    .sub .solution .Img img {margin: auto;}
    .sub .solution .inner {max-width: 90%; width: fit-content;  margin: auto;}
}


/* part */
.sub .part {background-color: #988d71;}
.sub .part .flexList {--x-gap:5rem;}
.sub .part .TxtBox {background-color: rgba(0,0,0,.2); border-radius: 1.25rem; border:1px solid rgba(255,255,255,.5); padding: 2rem;}
@media(max-width:768px) {
    .sub .part .flexList {--x-gap:3rem;}
}



/* question */
#accordion .Tit {width: 100%; font-size: 1.5rem; display: block; cursor: pointer; user-select: none; padding: 2.4rem 3rem 2.7rem 2rem; border-bottom:.5px solid #595959; position: relative;}
#accordion .Tit:after {content:''; width: 2.625rem; height: 1px; background-color: var(--pointcolor); position: absolute; right: 10px; top:3.75rem; margin: auto; transition: all 0.2s ease-in-out;}
#accordion .Tit:before {content:''; width: 2.625rem; height: 1px; background-color: var(--pointcolor); position: absolute; right: 10px; top:3.75rem; margin: auto; transform: rotate(90deg); transition: all 0.2s ease-in-out;}
#accordion .Tit.active:before{transform: rotate(0deg); transition: all 0.2s ease-in-out;}

#accordion .Q {position: relative; padding-left: 4rem; padding-right: 2rem; padding-top: .25rem;}
#accordion .Q:after {content:''; font-size: 1.875rem; font-family: var(--pointfont); color:var(--pointcolor); position: absolute; left: 0; top:0;}
#accordion .Q1:after {content:'Q1';}
#accordion .Q2:after {content:'Q2';}
#accordion .Q3:after {content:'Q3';}
#accordion .Q4:after {content:'Q4';}

#accordion .Desc {display: none; background-color: #f6f6f6; padding: 2.7rem 6rem; line-height: 1.5;}


/* why */
.sub .why {background: no-repeat center url('/img/sub/whyBg.jpg'); background-size: cover; border-radius: 3.125rem 3.125rem 0 0; overflow: hidden;}
.sub .why .gridBox {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1, auto; gap:0 8rem;}
.sub .why .Tit_sm {font-size: 1.25rem; letter-spacing: .1rem; font-family: var(--pointfont); position: relative; padding-left: 1rem;}
.sub .why .Tit_sm:after {content:''; width: .5rem; height: .5rem; border-radius: 50%; background-color: #fff; position: absolute; left: 0; top:0; bottom:0; margin: auto;}
.sub .why .boxTit {display: flex; padding-left: 3.5rem;}
.sub .why .Desc {padding: 3rem 4rem 6rem; position: relative; max-width: 38.5625rem; width: 100%;}
.sub .why .Line {width: .25rem; height: 8.3125rem; background-color: #fff; position: absolute; left: 2.6rem; top:-15%;}
.sub .why .box2, .sub .why .box4 {margin-top: -17rem;}

@media(max-width:768px) {
    .sub .why .gridBox {display: flex; flex-direction: column; gap:3rem;}
    .sub .why .boxTit {order: 1; margin-bottom: 2rem;}
    .sub .why .box1 {order: 2;}
    .sub .why .box2 {order: 3; margin-top: 0;}
    .sub .why .box3 {order: 4;}
    .sub .why .box4 {order: 5; margin-top: 0;}
}


/* notandum */
.sub .notandum .flexBox {display: flex; gap:3rem 1.5rem;}
.sub .notandum li {padding: 1rem 0;}
.sub .notandum .Num {position: relative; padding-left: 3rem;}
.sub .notandum .Num:after {content:''; font-family: var(--pointfont); color:var(--pointcolor); position: absolute; left: 0; top:0;}

.sub .notandum .Num1:after {content:'01';}
.sub .notandum .Num2:after {content:'02';}
.sub .notandum .Num3:after {content:'03';}
.sub .notandum .Num4:after {content:'04';}
.sub .notandum .Num5:after {content:'05';}
.sub .notandum .Num6:after {content:'06';}
.sub .notandum .Num7:after {content:'07';}
.sub .notandum .Num8:after {content:'08';}
.sub .notandum .Num9:after {content:'09';}
.sub .notandum .Num10:after {content:'10';}
.sub .notandum .Num11:after {content:'11';}
.sub .notandum .Num12:after {content:'12';}
.sub .notandum .Num13:after {content:'13';}
@media(max-width:768px) {
    .sub .notandum .subTit {text-align: center;}
}



/* time */
.sub .time {background: no-repeat center url('/img/sub/Revision/timeBg.jpg'); background-size: cover;}
.sub .time .box {border-radius: 1.25rem; background-color: rgba(255,255,255,.2); border:1px solid #fff; padding: 4rem 1.5rem;}


/* find */
.sub .find {background-color: #f4f0ed;}
.sub.autologous .find {background-color: #fff;}

.sub .find .box.Desc {padding: 2rem 4rem; background: no-repeat right center / cover; background-color: #fff; border:1px solid #d9d9d9; min-height: 21.875rem; display: flex; align-items: center;}
.sub .find .Num {width: 3.125rem; height: 3.125rem; border-radius: 50%; background-color: #988d71; color:#fff; font-family: var(--pointfont); display: flex; align-items: center; justify-content: center;}

@media(max-width:1024px) {
    .sub .find .box.Desc {background-position: 25%;}
}
@media(max-width:768px) {
    .sub .find .box.Tit {margin-bottom: 3rem;}
}



/* solutionNum */
.sub .solutionNum {background-color: #f6f6f6;}
.sub .solutionNum.MD {background: no-repeat center / cover url('/img/sub/Nose/solutionNumBg.jpg');}
.sub .solutionNum .box {background-color: #fff; border:1px solid #d9d9d9; padding:2rem 4rem; min-height: 21.875rem; display: flex; align-items: center;}
.sub .solutionNum.MD .box {min-height: 18.75rem;}
.sub .solutionNum .Num {width: 3.125rem; height: 3.125rem; border-radius: 50%; background-color: var(--pointcolor); color:#fff; font-family: var(--pointfont); display: flex; align-items: center; justify-content: center;}



/* effect */
.sub .effect {background-color: #988d71;}
.sub .effect .inner {max-width:1060px; margin: auto;}
.sub .effect .box {background-color: #fff; border:1px solid #d9d9d9; padding:2rem 1rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;}

.sub .effect .check {width: 2.625rem;}



/* cause */
.sub .cause .roundBox {box-shadow: 0 0 15px rgb(0 0 0 / 5%); padding: 3rem; height: 100%;}
.sub .cause .TitBox {display: flex; align-items: center; gap:1rem;}
.sub .cause .roundTit {background-color: var(--pointcolor); border-radius: 1rem; padding: .1rem 1.3rem; font-family: var(--pointfont); color:#fff;}

.sub .cause .box.Line {position: relative;}
.sub .cause .box.Line:after {content:''; width: 1px; height: 60%; background-color: #d9d9d9; position: absolute; right:-2rem; top:0; bottom:0; margin: auto;}
.sub .cause .box.Line:nth-child(3):after {display: none;}
@media(max-width:990px) {
    .sub .cause .box.Line:nth-child(2):after {display: none;}
    .sub .cause .box.Line:nth-child(3):after {width: 60%; display: block; height: 1px; left: 0; right:0; top:-2rem; bottom: auto;} 
}
@media(max-width:768px) {
    .sub .cause .box.Line:nth-child(1):after {display: none;}
    .sub .cause .box.Line:nth-child(2):after {width: 60%; display: block; height: 1px; left: 0; right:0; top:-2rem; bottom: auto;}
}



/* way */
.sub .way.Gr {background-color: #f6f6f6;}
.sub .way .TitBox {display: flex; align-items: center; gap: 1rem;}
.sub .way .roundBox {color:#fff; background-color: var(--pointcolor); width: fit-content; display: block; font-family: var(--pointfont); padding: .1rem 1rem; border-radius: 1.0625rem;}
.sub .way .flexList {--x-gap:5rem; --y-gap:4rem;}
.sub .way .Desc {background-color: #595959; border-radius: 1.25rem; padding:2rem 1rem; color:#fff; text-align: center;}
@media(max-width:1024px) {
    .sub .way .flexList {--x-gap:3rem;}  
}
@media(max-width:500px) {
    .sub .way .flexList {--x-gap:1.5rem;}  
}



/* position */
.sub .position {background-color: #cbc4b1;}
.sub .position .flexList {--x-gap:5rem; --y-gap:4rem;}
.sub .position .Desc {padding: 3rem 1rem; max-height: 12.6875rem; height: 100%; background-color: var(--pointcolor2); border-radius: 1.25rem 1.25rem 0 0; color:#fff;}
@media(max-width:1024px) {
    .sub .position .flexList {--x-gap:3rem;}  
}
@media(max-width:500px) {
    .sub .position .flexList {--x-gap:1.5rem;}  
}


/* selfDiagnosis */
.sub .selfDiagnosis {background-color: #016241;}



/* reductionBreast_self */
.sub .Breast_self {background: no-repeat center url('/img/sub/Breast/Breast_selfBg.jpg');}
.sub .Breast_selfTb {width: 100%; border-spacing: 0; border-top:2px solid #fff; border-bottom: 2px solid #fff; align-self: stretch; height: 100%;}
.sub .Breast_selfTb td {padding:1rem .5rem; border-right: 1px solid #fff; border-bottom: 1px solid #fff;}
.sub .Breast_selfTb tr td:last-child {border-right:none;}
.sub .Breast_selfTb .BgBox {background-color: rgba(0,53,35,.8);}
@media(max-width:768px) {
    .sub .Breast_self .Img {order: -1;}
    .sub .Breast_self .Img img {margin-right: auto; width: 100%;}
}


/* 3D-CT */
.sub .nose_3D-CT {background: #988d71; position: relative;}
.sub .nose_3D-CT:after {content:''; width: 64%; height: 100%; background-color: #cbc4b1; position: absolute; right: 0; top:0;}
.sub .nose_3D-CT .flexList {position: relative; z-index: 3;}
.sub .nose_3D-CT .nose_3D-CTImg {width: 39.625rem;}
.sub .nose_3D-CT .point {color:#003523; border-bottom:1px solid #003523; font-weight: 700;}
@media(max-width:990px) {
    .sub .nose_3D-CT .Img {order:2;}   
    .sub .nose_3D-CT:after {width: 100%; height: 65%;}    
}
@media(max-width:500px) {
    .sub .nose_3D-CT .nose_3D-CTImg {width: 29rem;}
}


/* insurance */
.sub .insurance {background-color: #f5f6f6;}
.sub .insurance .box {background-color: #fff; border:1px solid #d9d9d9; padding: 1.7rem; position: relative;}
.sub .insurance .box:after {content:''; width: 1.75rem; height: 1.25rem; background-image: url('/img/sub/arrow.png'); background-size: contain; background-repeat: no-repeat; position: absolute; top:0; bottom:0; right:-2.7rem; margin: auto;}
.sub .insurance .box:last-child:after {display: none;}
.sub .insurance .roundBox {color:#fff; background-color: var(--pointcolor); width: fit-content; margin: auto; display: block; font-family: var(--pointfont); padding: .1rem 1rem; letter-spacing: 0; border-radius: 1.0625rem;}

.sub .insurance.Wh {background-color: #fff;}
.sub .insurance.Wh .box {padding: 3.5rem 0; align-self: stretch;}
.sub .insurance.Wh .box:after {right:-3.8rem}

.sub .presa {position: relative; padding-left: 1rem; color:var(--gray); line-height: 1.6;}
.sub .presa:after {content:'※'; left: 0; top:0; position: absolute; color:var(--gray);}
@media(max-width:768px) {
    .sub .insurance.Wh .box:nth-child(2n):after {display: none;}
}
@media(max-width:500px) {
    .sub .insurance .box:after {width: 1.5rem;}
    .sub .insurance .box:nth-child(2n):after {display: none;}
}



/* kind */
.sub .kind {background-color: #cbc4b1;}
.sub .kind .TitBox {display: flex; align-items: center; gap: 1rem;}
.sub .kind .roundBox {color:#988d71; background-color: #fff; width: fit-content; display: block; font-family: var(--pointfont); padding: .1rem 1rem; border-radius: 1.0625rem;}


/* case */
.sub .case {background: no-repeat center url('/img/sub/Eye/caseBg.jpg'); background-size: cover;}
.sub .case .flexList {position: relative;}
.sub .case .flexList:after {content:''; width: .6875rem; height: .6875rem; border-radius: 50%; background-color: var(--pointcolor2); position: absolute; left: 32%; top:.5rem; bottom:0; margin: auto;}
.sub .case .flexList:before {content:''; width: .6875rem; height: .6875rem; border-radius: 50%; background-color: var(--pointcolor2); position: absolute; right: 32%; top:.5rem; bottom:0; margin: auto;}
.sub .case .box {position: relative;}
.sub .case .box:after {content:''; width: 1px; height: 100%; background-color: #988d71; position: absolute; top:0; bottom:0; right:-2rem; margin: auto;}
.sub .case .box:nth-child(3n):after {display: none;}
.sub .case .box:nth-child(-n+3):before {content:''; width: 100%; height: 1px; background-color: #988d71; position: absolute; bottom:-2rem; right: 0; left: 0; margin: auto;}

.sub .case .box3 img {border:.3125rem solid var(--pointcolor2);}
@media(max-width:768px) {
    .sub .case .box1 {order:1;}
    .sub .case .box2 {order:4;}
    .sub .case .box3 {order:5;}
    .sub .case .box4 {order:2;}
    .sub .case .box5 {order:3;}
    .sub .case .box6 {order:6;}
    .sub .case .box:before {content:''; width: 100%; height: 1px; background-color: #988d71; position: absolute; bottom:-2rem; right: 0; left: 0; margin: auto;}
    .sub .case .box:nth-child(2n):after {display: none;}
    .sub .case .box:nth-child(3n):after {display: block;}
    .sub .case .box.box3:before, .sub .case .box.box6:before, .sub .case .box.box6:after {display: none;}
    .sub .case .flexList:before {top:35%; left: 0; right:0;}
    .sub .case .flexList:after {bottom:36.5%; left: 0; right:0;}
}


/* age */
.sub .age {background-color: #f5f6f6;}
.sub .age .flexBox {display: flex; align-items: center; gap:2rem 3rem; padding: .5rem;}
.sub .age .round {border:1px solid #003523; color:#003523; text-align: center; padding: 2rem;}
.sub .age .round_fill {background-color: #003523; color:#fff; font-family: var(--pointfont); text-align: center; padding: 2rem;}
.sub .age .check {position: relative; padding-left: 2rem;}
.sub .age .check:after {content:''; width: 1.0625rem; height: .8125rem; background-image: url('/img/sub/check_sm.png'); background-size: contain; position: absolute; left: 0; top:.5625rem;}



/* process */
.sub .process .flexList {--x-gap:6.8125rem;}
.sub .process .roundBox {color:#fff; background-color: var(--pointcolor); width: fit-content; margin: auto; display: block; font-family: var(--pointfont); padding: .1rem 1rem; letter-spacing: 0; border-radius: 1.0625rem;}
.sub .process .Desc {padding: 2rem; border:1px solid #d9d9d9;}
.sub .process .box {position: relative;}
.sub .process .box:after {content:''; width: 1.75rem; height: 1.25rem; background-image: url('/img/sub/arrow.png'); background-size: contain; background-repeat: no-repeat; position: absolute; top:0; bottom:0; right:-4.2rem; margin: auto;}
.sub .process .box:last-child:after {display: none;}
@media(max-width:1100px) {
    .sub .process .flexList {--x-gap:4rem;}
    .sub .process .box:after {right:-2.7rem;}
}
@media(max-width:768px) {
    .sub .process .flexList {--x-gap:6rem;}
    .sub .process .box:after {right:-3.7rem;}
    .sub .process .box:nth-child(2n):after {display: none;}
}
@media(max-width:400px) {
    .sub .process .flexList {--x-gap:4rem;}
    .sub .process .box:after {right:-2.7rem;}
}


/* constituent */
.sub .constituent .inner {max-width: 32.5rem; width: 100%; height: 32.5rem; margin-left: auto; margin-right: auto;}

.sub .constituent .ImgBox {width: 32.5rem; height: 32.5rem; padding: 2rem; border-radius: 50%; border:1px solid var(--pointcolor); margin: auto; position: relative;}
.sub .constituent .rejuranBgImg {position: absolute; top:8.75rem; bottom:0; left: 0; right:0; margin: auto; z-index: 1; width: 23.8125rem;}

.sub .constituent .box {max-width: 28.375rem; width: 100%; position: absolute; z-index: 3;}
.sub .constituent .box1 {top:1.5rem; right: -20.5rem;}
.sub .constituent .box2 {top: 23.8rem; right: -25.5rem;}
.sub .constituent .box3 {top:15rem; left: -28rem;}

.sub .constituent .Tit {position: relative; cursor: pointer; padding-left: 2.5rem; font-family: var(--koSerif); color:var(--pointcolor); display: flex; align-items: center; gap:0 1rem;}
.sub .constituent .Tit:after {content:''; width: .625rem; height: .625rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; left: 0; top:0; bottom:0; margin: auto;}
.sub .constituent .Tit.Re {padding-right: 2.5rem; text-align: right; justify-content: flex-end;}
.sub .constituent .Tit.Re:after {right:0; left: auto;}


.sub .constituent .plus {width: 1.25rem; height: 1.25rem; margin-top: .1875rem; border-radius: 50%; background-color: var(--pointcolor); display: flex; align-items: center; justify-content: center; position: relative; transform: rotate(0);}
.sub .constituent .plus.on {border: 1px solid var(--pointcolor); background-color: #fff; transform: rotate(45deg);}
.sub .constituent .plus img {filter: invert(1) brightness(3); width: .5rem;}
.sub .constituent .plus.on img {filter: none;}

.sub .constituent .hiddenBox {background-color: var(--pointcolor); padding: 3rem; display: none; opacity: 0; transition: .3s;}
.sub .constituent .hiddenBox.on {opacity: 1; display: block; transition: .3s;}
@media(max-width:1140px) {
    .sub .constituent .hiddenBox {position: absolute; max-width: 28.375rem; width: 100%;}
    .sub .constituent .box2 .hiddenBox {right:2rem}
    .sub .constituent .box3 .hiddenBox {left:4rem}
}
@media(max-width:990px) {   
    .sub .constituent .box1 .hiddenBox {right:3rem}
    .sub .constituent .box2 .hiddenBox {right:7rem}
    .sub .constituent .box3 .hiddenBox {left:10rem}
}
@media(max-width:768px) {
    .sub .constituent .box1 .hiddenBox {right:10rem}
    .sub .constituent .box2 .hiddenBox {right:15rem}
    .sub .constituent .box3 .hiddenBox {left:19rem}
}
@media(max-width:500px) {
    .sub .constituent .inner {height: auto;}
    .sub .constituent .box {position: relative; top:auto; right: auto; left: auto; max-width: 100%;}
    .sub .constituent .box .hiddenBox {position: relative; top:auto; left: auto; right: auto; max-width: 100%;}
    .sub .constituent .Desc {display: flex; flex-direction: column; gap:2rem; margin-top: 1rem;} 
    .sub .constituent .Tit.Re {padding-left: 2.5rem; text-align: left; justify-content: flex-end; flex-flow: row-reverse;}
    .sub .constituent .Tit.Re:after {right:auto; left: 0;}
}



/* partModel */
.sub .Area {background-color: #f6f6f6;}
.sub .Area .ImgBox {width: 38.9375rem; margin: auto; position: relative; right:3rem;}
.sub.qofill .Area .ImgBox {width: 38.9375rem; margin: auto; position: relative; right:2rem;}

.sub .Area .AreaBox {position: absolute; width: fit-content; height: fit-content; display: flex; flex-direction: column; gap:1.5rem; z-index: 3;}
.sub .Area .LeftArea {left: 0; top:0; bottom: 0; margin: auto;}
.sub .Area .RightArea {right:0; top:0; bottom: 0; margin: auto;}

.sub .Area .Btn {display: flex; align-items: center; border-radius: 1.25rem; background-color: #fff; width: 24.0625rem; height: 5rem; cursor: pointer;}
.sub .Area .Btn.on {box-shadow: 0 0 15px rgb(0 53 53 / 40%);}
.sub .Area .round {border-radius: 1.25rem; width: 40%; background-color: var(--pointcolor); white-space: nowrap; color:#fff; font-family: var(--pointfont); letter-spacing: 0; align-self: stretch; height: 100%; padding: 0 1rem;}
.sub .Area .Txt {width: 60%;}
.sub .Area .Btn.on .Txt {font-weight: 600;}

.sub .Area .ripple {width: .5813rem; height: .5813rem; border-radius: 50%; background-color: rgba(255,255,255,.95); position: absolute;}
.sub .Area .ripple:after {content:''; width: 1.4375rem; height: 1.4375rem; border-radius: 50%; background-color: rgba(255,255,255,.4); position: absolute; left: -0.4375rem; bottom:-0.4375rem;}
.sub .Area .ripple:before {content:''; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: rgba(255,255,255,.6); position: absolute; left: -0.9375rem; bottom:-0.9375rem; animation: ripple 1.8s infinite;}

.sub.graftedFat .Area .ripple.Btn1 {left: .4375rem; right:0; margin: auto; top:28%;}
.sub.graftedFat .Area .ripple.Btn2 {left: 15rem; right:0; margin: auto; top:46%;}
.sub.graftedFat .Area .ripple.Btn3 {left: 10rem; right:0; margin: auto; top:57%;}
.sub.graftedFat .Area .ripple.Btn4 {left: 1.5625rem; right:0; margin: auto; top:38%;}
.sub.graftedFat .Area .ripple.Btn5 {left: 0; right:5rem; margin: auto; top:53%;}
.sub.graftedFat .Area .ripple.Btn6 {left: 5rem; right:0; margin: auto; bottom:26%;}

.sub.qofill .Area .ripple.Btn1 {left: 0; right:1.875rem; margin: auto; top:28%;}
.sub.qofill .Area .ripple.Btn2 {left: 0; right: 10.6875rem; margin: auto; top:64%;}
.sub.qofill .Area .ripple.Btn3 {left: 13.8rem; right:0; margin: auto; top:40%;}
.sub.qofill .Area .ripple.Btn4 {left: 10rem; right:0; margin: auto; top:50%;}
.sub.qofill .Area .ripple.Btn5 {left: 0; right:-3rem; margin: auto; bottom:39%;}
.sub.qofill .Area .ripple.Btn6 {left: 0; right: 3.125rem; margin: auto; bottom:22.5%;}


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

@media(max-width:990px) {
    .sub .Area .Btn {max-width: 22rem;} 
}
@media(max-width:768px) {
    .sub .Area .inner {display: flex; flex-direction: column; gap:2rem;}
    .sub .Area .AreaBox_wrap {display: flex; gap:1rem;}
    .sub .Area .AreaBox {position: relative; width: 50%;}
    .sub .Area .LeftArea .Btn {margin-left: auto;}
    .sub .Area .Btn {width: 100%; height: 4rem;}
    .sub .Area .round {width: 43%;}
}





/* ola1 */
.sub.ola {background-color: var(--pointcolor2);}
.sub .ola1 .inner {max-width: 1600px; width: 95%; margin: auto; position: relative;}
.sub .ola1 .image-wrap {transition: 1s ease-out; transition-delay: 0.2s; position: relative; width: 100%; height: 33.75rem; overflow: hidden; visibility: hidden;}

.sub .ola1 .image-wrap.TB {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); height: 100%;}
.sub .ola1 .image-wrap.LR {clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}
.sub .ola1 .image-wrap.RL {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); height: 100%;}


.sub .ola1 .image-wrap .img {width: 100%; height: 33.75rem; transform: scale(1.3);transition: 2s ease-out; background: no-repeat center right; background-size: cover;} 
.sub .ola1 .image-wrap .img.img3 {height: 31.25rem;} 
.sub .ola1 .image-wrap .img.TB,.sub .ola1 .image-wrap .img.RL {height: 100%;}
.sub .ola1 .image-wrap .img.RL img {margin-left: auto;}
.sub .ola1 .image-wrap .img.img1 {background-image: url('/img/sub/ola/olaBg.jpg');}
.sub .ola1 .image-wrap .img.img2 {background-image: url('/img/sub/ola/doctorBg.jpg');}
.sub .ola1 .image-wrap .img.img3 {background-image: url('/img/sub/ola/doctorBg2.jpg');}
/* 진료안내페이지 지도부분 */
.sub .ola1 .image-wrap .img.map .root_daum_roughmap {width: 100%; height: 33.75rem;}
.sub .ola1 .image-wrap .img.map .root_daum_roughmap .wrap_map {width: 100%; height: 33.75rem;}
.sub .ola1 .image-wrap .img.map .root_daum_roughmap .cont, .sub .ola1 .image-wrap .img.map .root_daum_roughmap .wrap_controllers {display: none;}
.sub .ola1 .image-wrap .img.map .infoBox {position: absolute; display: flex; justify-content: space-between; align-items: center; width: 80%; padding: 1rem 1rem; background-color: rgba(152,141,113,.3); border-radius: 40px; bottom:2rem; left: 0; right:0; margin: auto; z-index: 3;} 
.sub .ola1 .image-wrap .img.map .infoBox img {width: 2.5625rem;}
.sub .ola1 .image-wrap .img.map .infoBtn {display: flex; align-items: center; gap:0 .5rem; width: fit-content; background-color: #fff; border-radius: 1.5625rem; padding: .3rem 2rem .3rem .5rem;}
.sub .ola1 .image-wrap .img.map .btnFlex {display: flex; align-items: center; gap:1rem;}
.sub .ola1 .image-wrap .img.map .map_cover{position: absolute;top:0;width:100%; height: 100%; left: 0; background-color: rgb(255, 255, 255, .01); filter: sepia(1); color:#333; opacity: 0; z-index: 3;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}

/* 진료안내페이지 지도부분 끝*/
.sub .ola1 .animating .image-wrap {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; transform: skewY(0);}  
.sub .ola1 .animating .img {transform: scale(1); transition: 4s ease-out;}  


.sub .ola1 .circle_wrap {position: absolute; right:0; left:0; margin: auto; top:0; z-index: 3;}
.sub .ola1 .textBg {animation: textRotation 8s linear infinite; position: relative;}
.sub .ola1 .textBg img {width: 9.5625rem;}
@keyframes textRotation {to {transform: rotate(360deg);}}
.sub .ola1 .circle .Logo {position: absolute; top:0; bottom:0; left: 0; right:0; margin: auto; width: 6.75rem; height: 6.75rem; border-radius: 50%; background-color: #988d71; display: flex; align-items: center; justify-content: center;}
.sub .ola1 .circle .Logo img {width: 3.3125rem;}

.sub .ola1 .DescBox {padding: 9.375rem 0;}
@media(max-width:768px) {
    .sub .ola1 .image-wrap, .sub .ola1 .animating .img {height: 23rem;}
    .sub .ola1 .image-wrap.map, .sub .ola1 .animating .img.map {height: 45rem;}
    .sub .ola1 .image-wrap .img.map .root_daum_roughmap,
    .sub .ola1 .image-wrap .img.map .root_daum_roughmap .wrap_map {height: 45rem;}

    .sub .ola1 .Desc {order:-1;}
    .sub .ola1 .DescBox {padding: 0;}
    .sub .ola1 .olaBgImg {width: 80%;}

    .sub .ola1 .image-wrap .img.map .infoBox {width: 93%; flex-direction: column; gap:1rem;}
}


/* ola2 */
.sub .ola2 {border-radius: 50px 50px 0 0; background-color: #fff;}
.sub .ola2 .Desc {padding-bottom: 5rem;}
.sub .ola2 .ImgBox {position: absolute; width: 63%; right: 0; bottom:0;}
.sub .ola2 .olaDoctor {position: relative; z-index: 3; width: 38rem;}
.sub .ola2 .BgTxt {font-size: 6.25rem; line-height: 1; letter-spacing: 7px; text-align: right; height: fit-content; font-family: var(--pointfont); color:#f8f8f8; position: absolute; right: 0; top:25%; margin: auto; z-index: 1;}
@media(max-width:990px) {
    .sub .ola2 .olaDoctor {width: 36rem; left: -2rem;}
}
@media(max-width:768px) {
    .sub .ola2 .flexBox {display: flex; flex-direction: column;}
    .sub .ola2 .Desc {width: 100%; padding-bottom: 0;}
    .sub .ola2 .ImgBox {width: 100%; position: relative;}
    .sub .ola2 .olaDoctor {margin: auto; left: -4rem;}
}
@media(max-width:500px) {
    .sub .ola2 .olaDoctor {width: 29rem;}
    .sub .ola2 .BgTxt {font-size: 4rem;}
}

/* question */
.sub .question.Wh .zum {width: fit-content; margin: auto;}


#accordion.Wh .Tit {font-family: var(--koSerif); color:#cbc4b1; border-bottom-color:#fff;}
#accordion.Wh .Tit span {color:#fff;}
#accordion.Wh .Tit:after, #accordion.Wh .Tit:before {background-color: #fff;}
#accordion.Wh .Desc {background-color: transparent; color:#fff; padding: 2.7rem 2rem 0;}
#accordion.Wh .Desc .flexBox {display: flex; gap:3rem; align-items: center;}

#accordion .N {position: relative; padding-left: 4rem; padding-right: 2rem;}
#accordion .N:after {content:''; font-size: 1.875rem; font-family: var(--pointfont); color:#fff; position: absolute; left: 0; top:0;}
#accordion .N1:after {content:'01';}
#accordion .N2:after {content:'02';}
#accordion .N3:after {content:'03';}
#accordion .N4:after {content:'04';}
#accordion .N5:after {content:'05';}



/* olaDocter */
.sub .olaDocter .subTit.Gr {color:#748880;}
.sub .olaDocter .flexList {padding: 4rem 0; position: relative;}
.sub .olaDocter .Line{width: 1px; height: 230%; background-color: #fff; position: absolute; top:0; left:0; right:0; margin: auto;}
.sub .olaDocter .doctor_sm {position: absolute; right: 60%; bottom:-3rem;}

.sub .olaDocter .TitBox {display: flex; align-items: center; gap:0 1.5rem;}
.sub .olaDocter .roundBox {border-radius: 1rem; padding: .3rem 1rem; font-size: 1rem; background-color: #fff; color:var(--pointcolor)}
.sub .olaDocter .Desc {padding-left: 7rem;}

.sub .olaDocter .doctor_lg {width: 24.0625rem;}
.sub .olaDocter .doctor_md {width: 32.5rem;}
.sub .olaDocter .doctor_sm {width: 15.625rem;}
@media(max-width:768px) {
    .sub .olaDocter .Line {display: none;}
    /* .sub .olaDocter .Desc2 {order:-1;}  */
    .sub .olaDocter .doctor_md {margin-left: auto; margin-right: 0;}
    .sub .olaDocter .Desc {display: flex; align-items: center; justify-content: center; padding-left: 0;}
    .sub .olaDocter .xsDesc {padding-left: 4rem;}
}
@media(max-width:500px) {
    .sub .olaDocter .doctor_md {margin-right: auto;}
}


/* olaDocter2 */
.sub .olaDocter2 {border-radius: 50px 50px 0 0; background-color: #fff;}
@media(max-width:768px) {
    .sub .olaDocter2 .Desc {padding-right: 5%;}
}


/* wayBox */
.sub .wayBox .TitFlex {display: flex; align-items: center; gap:0 1.5rem;}
.sub .wayBox .Dot {width: 4.375rem; height: 4.375rem; border-radius: 50%; background-color: #fff;}
.sub .wayBox .square {width: 4.375rem; height: 4.375rem; border-radius: .625rem; background-color: #fff;}
.sub .wayBox .info_icon {width: 2.125rem;}

.sub .wayBox .Line {width: 95%; max-width: 1600px; height: 1px; background-color: rgba(255,255,255,.3); margin: 2rem auto 3rem;}
.sub .wayBox .DescFlex {display: flex; align-items: flex-start; gap:0 1.5rem;}

.sub .wayBox .NumBox {display: flex; align-items: center; gap:0 .5rem}
.sub .wayBox .Num {max-width: 1.5625rem; width: 100%; height: 1.5625rem; display:flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; border-radius: 50%; background-color: #f27d00;}
.sub .wayBox .Num.Gr {background-color: #0caa2c;}


/* open */
.sub .open {border-radius: 50px 50px 0 0; background-color: #fff;}
.sub .open .TitFlex {display: flex; align-items: center; gap:0 2rem;}
.sub .open .Dot {width: 4.375rem; height: 4.375rem; border-radius: 50%; background-color: var(--pointcolor);}
.sub .open .Dot img {width: 2rem;}


.sub .open .TbTit {width: 7.5rem; text-align: justify; padding-right: 2rem; height: 1.875rem; display: block; color:var(--pointcolor);}
.sub .open .TbTit:after {content:''; display: inline-block; width: 100%;}



/* Nonbenefit */
.sub.Nonbenefit .tab-menu {display: flex; align-items: center; gap:.5rem;}
.sub.Nonbenefit .tab-menu li {display:block; padding:5px 15px;border-radius:30px;border:1px solid #a6a6a6;color:#a6a6a6; cursor: pointer;}
.sub.Nonbenefit .tab-menu li.active  {background:transparent ;color:var(--pointcolor); font-weight:bold;border:1px solid var(--pointcolor);}

.sub.Nonbenefit .NonTb {border-spacing: 0; width: 100%; border-collapse:collapse; text-align: center;}
.sub.Nonbenefit .NonTb th {background-color: var(--pointcolor2); padding: 1rem .3rem; color:#fff; border:1px solid #fff; font-weight: 500;}
.sub.Nonbenefit .NonTb th:first-child {border-left: 1px solid var(--pointcolor2);}
.sub.Nonbenefit .NonTb th:last-child {border-right: 1px solid var(--pointcolor2);}
.sub.Nonbenefit .NonTb td {border:1px solid #d3d3d3; padding: 1rem .3rem;}




/* solutionList */
.sub .solutionList .flexBox {display: flex; justify-content: space-between; padding-bottom: 5rem;}
.sub .solutionList .flexBox .box {width: 48%;}

.sub .solutionList .ImgList {position: relative; width: 100%; aspect-ratio: 60/35; /* height: 21.875rem; */}
.sub .solutionList .ImgList img {position: absolute; top:0; left: 0; width: 100%; height: 100%; /* object-fit: cover; */}

.sub .solutionList .TxtBox {padding-top: 10rem;}
.sub .solutionList .ListBox {display: flex; align-items: center; padding: 7rem 0 9rem; border-bottom:1px solid #d9d9d9; border-top:1px solid #d9d9d9;}
.sub .solutionList .Tit {display: flex; align-items: center; gap:0 1rem}
.sub .solutionList .round {background-color: var(--pointcolor2); color:#fff; padding: .5rem 1.8rem; font-size: 1rem; font-weight: 600; line-height: 1; width: fit-content; border-radius: 1.25rem;}


.sub .solutionList .ImgList img {opacity: 0; transition: opacity .45s ease; pointer-events: none;}
.sub .solutionList .ImgList img.active {opacity: 1; pointer-events: auto;}

.sub .solutionList .TxtList .ListBox {opacity: 0; transition: opacity 0.4s ease;}
.sub .solutionList .TxtList .ListBox.active,
.sub .solutionList .TxtList .ListBox.next-active {opacity: 1;}

@media(max-width:768px) {
    .sub .solutionList .flexBox {flex-direction: column;}
    .sub .solutionList .flexBox .box {width: 100%;}
    .sub .solutionList .ImgBox {z-index: 3; background-color: #fff;}

    .sub .solutionList .ImgList img { display:block; width:100%; height:auto; }
    
    .sub .solutionList .TxtBox {padding-top: 3rem;}
    .sub .solutionList .ListBox {padding: 4rem 0 5rem;}
}



/* relax */
.sub .relax .Inner {width: 100%; position: relative;}

.sub .relax .Round_inner {max-width: 66.875rem; width: 90%; margin: auto; position: relative; min-height: 15.625rem;}
.sub .relax .Round {max-width: 35rem; width: 90%; aspect-ratio: 27/12; border-radius: 8.125rem; border:1px solid #003523; background-color: #fff; position: absolute; display: flex; align-items: center; justify-content: center;}
.sub .relax .Round.Right {background: no-repeat center / cover url('/img/sub/Nose/relaxBg.jpg'); right:0; box-shadow: 0 0 15px rgb(1 98 65 / 55%);}
.sub .relax .Round.Left {left: 0;}

.sub .relax .Desc {display: flex; align-items: center; gap:1rem;}
.sub .relax .Dot {aspect-ratio: 1/1; width: 4.375rem; border-radius: 50%; background-color: var(--pointcolor2); color:#fff; display: flex; align-items: center; justify-content: center;}
.sub .relax .Dot.Wh {background-color: #fff; color:var(--pointcolor2)}

.sub .relax .Line {width: 100%; height: 1px; background-color: var(--pointcolor2); position: absolute; top:0; bottom:0; margin: auto; z-index: -1;}
@media(max-width:768px) {
    .sub .relax .Round_inner {display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .sub .relax .Round {position: relative;}
    .sub .relax .Round.Right {order:-1; margin-bottom: -3rem; z-index: 1;}
}



/* signature */
.sub .signature {position: relative; overflow: hidden;}
.sub .signature .Line {width: 1px; height: 100%; background-color: #ccc; position: absolute; top:0; left: 50%; transform: translateX(-50%);}
.sub .signature .Dot {position: absolute; width: .625rem; height: .625rem; border-radius: 50%; background-color: var(--pointcolor2); left: 7.5%; top:35%;}
.sub .signature .Img img {width: 32.5rem; max-width: 90%;}

.sub .signature .box .Inner {padding: 7.5rem; padding-right: 0;}
.sub .signature .box.box1 .Inner {padding:14rem 7.5rem;}

.sub .signature .box2 .Img {border-right: 1px solid #ccc; padding: 7.5rem 0; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;}
.sub .signature .Line_w {width: 150%; height: 1px; background-color: #ccc; position: absolute;}
.sub .signature .Line_T {left: 0; top:0;}
.sub .signature .Line_B {right: -25%; bottom:0; width: 250%; z-index: -1;}


.sub .signature .box3 {margin-top: -22rem;}
.sub .signature .box3 .Img {width: fit-content; padding-bottom: 3.25rem;}
.sub .signature .BigDot {width: 12.5rem; height: 12.5rem; border-radius: 50%; background-color: #988d71; text-align: center; position: absolute; bottom:-3.25rem; right: -4.25rem;} 
.sub .signature .BigDot a {color:#fff;}
.sub .signature .dott {width: .5rem; height: .5rem; border-radius: 50%; background-color: #fff; margin: auto;}


.sub .signature .box4 .Img {margin-left: auto; width: fit-content;}

@media(max-width:990px) {
    .sub .signature .box.box1 .Inner {padding: 14rem 2.5rem;}
    .sub .signature .box .Inner.L {padding: 7.5rem 2.5rem;}

    .sub .signature .BigDot {right:-2rem;}
}

@media(max-width:768px) {
    .sub .signature .container_Lg {max-width: 580px;}

    .sub .signature .box .Inner.Txt_c {text-align: center; padding: 7.5rem 0;}

    .sub .signature .Dot {left: 0; right:0; top:0; margin: auto;}
    .sub .signature .Line_T {display: none;}
    .sub .signature .box2 .Img {padding: 0 0 7.5rem 0; aspect-ratio:auto; border-right: none;}

    .sub .signature .box3 {margin-top: 0;}
    .sub .signature .BigDot {right: -1rem;}
    .sub .signature .box3 .Img {padding-top: 7.5rem;}
    .sub .signature .box .Inner.L {width: fit-content; margin: auto;}

    .sub .signature .box4 .Inner {padding: 7.5rem 0;} 
}


/* esthetics */
.sub .esthetics {border-radius: 3.125rem 3.125rem 0 0; background: no-repeat center 35% #003523 url('/img/sub/Nose/Line.png');}


.sub .estheticsSwiper .swiper-slide {border-radius: 1.25rem; overflow: hidden; padding: 0 2rem 7rem; aspect-ratio: 1/1; background: no-repeat center / cover;}
.sub .estheticsSwiper .swiper-slide-active {aspect-ratio: 5/6; display: flex; align-items: end; justify-content: center;}
.sub .estheticsSwiper .slide1 {background-image: url('/img/sub/Nose/estheticsSwiper01.jpg');}
.sub .estheticsSwiper .slide2 {background-image: url('/img/sub/Nose/estheticsSwiper02.jpg');}
.sub .estheticsSwiper .slide3 {background-image: url('/img/sub/Nose/estheticsSwiper03.jpg');}
.sub .estheticsSwiper .slide4 {background-image: url('/img/sub/Nose/estheticsSwiper04.jpg');}
.sub .estheticsSwiper .slide5 {background-image: url('/img/sub/Nose/estheticsSwiper05.jpg');}
.sub .estheticsSwiper .slide6 {background-image: url('/img/sub/Nose/estheticsSwiper06.jpg');}


.sub .estheticsSwiper .swiper-slide .Desc {display: none; max-width: 400px; width: 95%;}
.sub .estheticsSwiper .swiper-slide-active .Desc {display: block;}


.sub .estheticsSwiper .Line {width: 100%; height: 1px; background-color: rgba(255,255,255,.5); margin: 2rem auto;}
@media(max-width:500px) {
    .sub .estheticsSwiper .swiper-slide {padding: 0 2rem 6rem;}
    .sub .estheticsSwiper .swiper-slide-active {aspect-ratio: 5/7;}
}



/* schedule */

.sub .schedule .box .TitBox {border-radius: 1.5625rem 1.5625rem 1.5625rem 0; max-width: 13.125rem; width: 90%; border:1px solid var(--pointcolor); padding: .8rem; text-align: center; color:var(--pointcolor); transition: .3s;}
.sub .schedule .box.on .TitBox {background-color: var(--pointcolor); color:#fff; transition: .3s;}


.sub .schedule .Line {width: 100%; height: 1px; background-color: #595959; margin: 3rem 0; position: relative;}
.sub .schedule .box .Dot {width: .625rem; height: .625rem; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--pointcolor); position: absolute; left: 0; top:0; bottom:0; margin: auto;}

.sub .schedule .box.on .Dot:after {content:''; width: 2rem; height: 2rem; border-radius: 50%; animation: ripple 1.8s infinite; display: block; position: absolute; left: -0.6875rem; top:0; bottom:0; margin: auto;}
.sub .schedule .box.on .Dot:before {content:''; width: 1.1875rem; height: 1.1875rem; border-radius: 50%;  background-color: rgba(1,98,65,.5);  display: block; position: absolute; left: -0.3125rem; top:0; bottom:0; margin: auto; animation: ripple2 1.8s infinite;}

@keyframes ripple {
    0% {opacity: 1; background-color: rgba(1,98,65,.2); -webkit-transform: scale(0); transform: scale(0);}
    100% {opacity: 0; background-color: rgba(1,98,65,.7); -webkit-transform: scale(1); transform: scale(1);}
}

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


@media(max-width:990px) {
    .sub .schedule .flexList {--y-gap:4rem;}
}
@media(max-width:500px) {
    .sub .schedule .flexList {--y-gap:0rem;}
    .sub .schedule .box {display: flex; align-items: flex-start; gap:0 3rem;}
    .sub .schedule .box .TitBox {border-radius: 1.5625rem 1.5625rem 0 1.5625rem;}
    .sub .schedule .box .Dot {bottom: auto; left: -0.25rem}
    .sub .schedule .Line {width: 1px; height: 100%;}
    .sub .schedule .Line.End {height: 60%;}
    .sub .schedule .Desc {padding-bottom: 4rem; margin-top: 3rem;}
}



/* system */
.sub .system {background-color: #f6f5f3;}
.sub .system .Desc {background-color: #988d71; padding:3rem; min-height: 12.5rem;}
.sub .system .Img {min-height: 12.5rem; background: no-repeat center / cover;}

@media(max-width:768px) {
    .sub .system .box {display: flex;}
    .sub .system .Img, .sub .system .Desc {width: 50%; text-align: center;}
}

@media(max-width:500px) {
    .sub .system .Desc {padding: 3rem 1.5rem;}
}


/* modelInfo */
.sub .modelInfo .input_wrap {display: flex; align-items: center; gap:0 1rem;}
.sub .modelInfo .star {position: relative; padding-right: .7rem;}
.sub .modelInfo .star:after {content:'*'; color:#e60012; font-weight: 700; position: absolute; right: 0;}

.sub .modelInfo .Inner {display: flex; flex-direction: column; gap:1.3rem 0; max-width: 516px; width: 100%;}
.sub .modelInfo .forBox {width: 20%;}

.sub .modelInfo input[type="text"], .sub .modelInfo input[type="number"], .sub .modelInfo textarea {border:1px solid #bfbfbf; border-radius: .3125rem; padding: 1rem; width: 80%;}
.sub .modelInfo textarea {height: 9.375rem;}
.sub .modelInfo input::placeholder, .sub .modelInfo textarea::placeholder {font-size: 1rem; color:#bfbfbf;}

.sub .modelInfo input[type="radio"]{display: none;}
.sub .modelInfo input[type="radio"] + label{position: relative; display: inline-block; padding:1rem 2rem; font-size: 1rem; margin-right: 1.5rem; cursor: pointer; transition: all 0.3s ease-in-out;}
.sub .modelInfo input[type="radio"] + label:before,
.sub .modelInfo input[type="radio"] + label:after{content: ''; position: absolute; top: 1.1875rem; left: 0; width: 1em; height: 1em; text-align: center; color: #bfbfbf; -webkit-transition: all .3s ease; transition: all .3s ease;}
.sub .modelInfo input[type="radio"] + label:before {-webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 1px #bfbfbf, inset 0 0 0 1px white;}
.sub .modelInfo input[type="radio"]:checked + label:before {-webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 1px  var(--pointcolor), inset 0 0 0 1rem var(--pointcolor);}


.sub .modelInfo .checkInner {--x-gap:.5rem; --y-gap:.5rem;}
.sub .modelInfo .check_item input[type=checkbox] {display: none;}
.sub .modelInfo .check_item input[type=checkbox] + label {border-radius: .3125rem; border:1px solid #bfbfbf; cursor: pointer;}
.sub .modelInfo .check_item input[type=checkbox]:checked + label {border-color:#000; color:#000;}

.sub .modelInfo .check_item label {width: 100%; font-size: .875rem; text-align: center; padding: 1rem 0; display: block; color:#bfbfbf;}
.sub .modelInfo .check_item:hover label {color:#333; border-color:#333;}

.sub .modelInfo .Inner485 {max-width: 485px; width: 100%; --x-gap:1rem; --y-gap:1.7rem;}

.sub .modelInfo .Num {position: relative; padding-left: 2rem; font-size: 1rem;}
.sub .modelInfo .Num:after {content:''; width: 1.19rem; height: 1.19rem; aspect-ratio: 1/1; background-color: #000; border-radius: 50%; color:#fff; text-align: center; position: absolute; left: 0; top:0; font-size: .6875rem; line-height: 1.7;}
.sub .modelInfo .Num1:after {content:'1';}
.sub .modelInfo .Num2:after {content:'2';}
.sub .modelInfo .Num3:after {content:'3';}

.sub .modelInfo .redColor {color:#e60012;}

.sub .modelInfo .is-file input[type="file"] {background-color: #000; color:#fff;}
.sub .modelInfo .is-file input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.sub .modelInfo .is-file .upload-name {pointer-events: none; border:none; width: 400px;padding: .3rem 1rem;}
.sub .modelInfo .is-file .upload-name::placeholder {color:#595959; padding: .3rem 1rem; font-size: .75rem;}
.sub .modelInfo .is-file label.file-custom {padding-bottom: 0; border-bottom: none; background: #000; color:#fff; padding:.2rem .7rem; border-radius: .3125rem; cursor: pointer;}


.sub .modelInfo .Line {width: 100%; height: 1px; background-color: #000; margin: 5rem auto;}
.sub .modelInfo .infoDesc {background-color: #f2f2f2; border-radius: .3125rem; height: 9.375rem; overflow-y: scroll; padding: 1rem; color:#999; line-height: 1.7;}
.sub .modelInfo .infoDesc::-webkit-scrollbar {width: 3px;}

.sub .modelInfo .input_chk {margin-left: auto; display: flex; align-items: center; width: fit-content;}
.sub .modelInfo .is_btn button {max-width:517px; width: 100%; margin: auto; display: block; border-radius: .3125rem; padding: 1rem 1.5rem; background-color: #000; color:#fff;}


.sub .modelInfo input.agree_checkbox { width: 0; height: 0; visibility: hidden; }
.sub .modelInfo input.agree_checkbox + label { position: relative; padding-left: 1.3rem; }
.sub .modelInfo input.agree_checkbox + label::before { position: absolute; content: ''; display: inline-block; width: 1rem; height: 1rem; cursor: pointer; border: 1px solid #515153; top: 2px; left: 0; }
.sub .modelInfo input.agree_checkbox:checked + label::before { background: #000 url(/img/main/chk.png)no-repeat center; background-size: 100%; }

@media(max-width:768px) {
    .sub .modelInfo .Inner {max-width: 100%;}
    .sub .modelInfo textarea {width: 100%;}

    .sub .modelInfo .font-14 {font-size: 12px;}
}



/* effectHalf */
.sub .effectHalf {background-color: #988d71;}
.sub .effectHalf .box {background-color: #fff; display: flex; align-items: center; overflow: hidden; aspect-ratio: 2/1;}
.sub .effectHalf .ImgBox {background-color: #cbc4b1; align-self: stretch;width: 45%; text-align: center; padding: 2rem 0;}
.sub .effectHalf .ImgBox img {width: 4.375rem;}
.sub .effectHalf .DescBox {padding: 2em;width: 55%; text-align: center;}

@media(max-width:768px) {
    .sub .effectHalf .box {aspect-ratio: auto;}
}




/* choice */
.sub .choice .flexBox {display: flex; gap:1rem;}
.sub .choice .ImgBox {background: no-repeat center / cover; aspect-ratio: 12/13; color:#fff; width: 30%; position: relative; overflow: hidden;}
.sub .choice .Img1 {background-image: url('/img/sub/Petit/choice01.jpg');}
.sub .choice .Img2 {background-image: url('/img/sub/Petit/choice02.jpg');}

.sub .choice .Txt {position: absolute; width: fit-content; height: auto; bottom:3rem; left: 3rem;}

.sub .choice .DescBox {width: 40%; max-width: 460px; margin-left: auto;}
.sub .choice .DescBox li {border-bottom: 1px solid #d9d9d9; padding: 2rem;}
.sub .choice .DescBox li:last-child {border-bottom: none;}
.sub .choice .DescBox span {display: inline-block; font-size: 1rem; background-color: var(--pointcolor2); color:#fff; width: fit-content; text-align: center; border-radius: 1.25rem; line-height: 1; padding: .6rem 1rem;}

@media(max-width:990px) {
    .sub .choice .flexBox {flex-wrap: wrap;}
    .sub .choice .ImgBox {flex: auto;}
    .sub .choice .DescBox {width: 100%; max-width: 100%;}
}
@media(max-width:500px) {
    .sub .choice .ImgBox {width: 100%;}
}



/* skill */
.sub .skill {background-color: #cbc4b1;}
.sub .skill .box {border-radius: 1.875rem; background-color: #fff; padding: 3rem 1.5rem 1.5rem;}
.sub .skill .TitBox {border-radius: 1.25rem; padding: 1rem; width: 100%; background-color: #595959; color:#fff;}
.sub .skill .TitBox.Gr {background-color: #003523;}



/* golden */
.sub .golden {background-image: linear-gradient(180deg, #ededed, #fff);}
.sub .golden .Inner {background-color: #fff; border-radius: 1.25rem; padding: 7rem 2rem; box-shadow: 2px 2px 13px 2px rgba(0, 0, 0, .05);}
.sub .goldenList {display: flex; max-width: 790px; width: 90%; padding: 0 1rem; margin: auto;}
.sub .goldenList.ABC li {padding: 1rem; color:#fff; border-radius: 44px 0 0 44px; position: relative; z-index: 3;}
.sub .goldenList li:nth-child(1) {width: 15%;}
.sub .goldenList li:nth-child(2) {width: 35%;}
.sub .goldenList li:nth-child(3) {width: 50%;}

.sub .goldenList li.A {color:var(--dark-gray); background-color: #f6f6f6;}
.sub .goldenList li.A:after {content:''; width: 2rem; height: 100%; background-color: #f6f6f6; position: absolute; right:-2rem; top:0; z-index: 1;}
.sub .goldenList li.B {background-color: var(--pointcolor);}
.sub .goldenList li.B:after {content:''; width: 2rem; height: 100%; background-color: var(--pointcolor);; position: absolute; right:-2rem; top:0; z-index: 1;}
.sub .goldenList li.C {background-color: var(--pointcolor2); border-radius: 44px;}

.sub .goldenList .golden_con {width: 5rem;}
.sub .goldenList .Img {position: relative; padding-top: .5rem;}
.sub .goldenList .Img:after {content:''; width:.5938rem; height: .5219rem; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); position: absolute; top:0; left: 0; right:0; margin: auto;}
.sub .goldenList .Img1:after {background-color: #9e9e9e;}
.sub .goldenList .Img2:after {background-color: var(--pointcolor);}
.sub .goldenList .Img3:after {background-color: var(--pointcolor2);}


.sub.sub  .goldenList.Desc {margin: 2rem auto 0;}


@media(max-width:768px) {
    .sub .golden .ListInner {display: flex; width: fit-content; margin: auto;}
    .sub .goldenList.ABC {flex-direction: column; height: 30rem; max-width: fit-content;}
    .sub .goldenList.ABC li {/* writing-mode:sideways-rl; */ border-radius: 44px 44px 0 0; padding-top: 2rem;}
    .sub .goldenList.ABC li:last-child {border-radius: 44px;}
    .sub .goldenList.ABC li {max-width: auto; }
    .sub .goldenList.ABC li:nth-child(1) {height: 20%; width: auto;}
    .sub .goldenList.ABC li:nth-child(2) {height: 35%; width: auto;}
    .sub .goldenList.ABC li:nth-child(3) {height: 45%; width: auto;}
    .sub .goldenList.ABC li.A:after {right: 0; top:4rem; width: 100%; height: 4rem;}
    .sub .goldenList.ABC li.B:after {right: 0; top:10rem; width: 100%; height: 4rem;}

    .sub .goldenList.Desc {flex-direction: column;width: 100%; height: 30rem; margin: auto; text-align: left;} 
    .sub .goldenList.Desc li {width: 100%; display: flex; align-items: center; gap:1rem;}

    .sub .goldenList.Desc li:nth-child(1) {height: 20%;}
    .sub .goldenList.Desc li:nth-child(2) {height: 35%;}
    .sub .goldenList.Desc li:nth-child(3) {height: 45%;}

    .sub .goldenList .Img {padding-top: 0; padding-left: .5rem;}
    .sub .goldenList .Img:after {transform: rotate(-90deg); right:auto; bottom:0;}
    
}


/* New */
.sub .New .Inner {position: relative; display: flex;}
.sub .New .Img {margin: auto; width: 35.625rem; position: relative; top: 2rem;}
.sub .New .Img .NewImg {width: 20.4375rem; margin: auto; position: relative; left: 1rem;}

.sub .New .Dot {width: 15px; height: 15px; z-index: 10; background: var(--pointcolor); display: block; border-radius: 50%; position: absolute;}
.sub .New .Dot:after {display: block; content: ''; clear: both; background: var(--pointcolor); position: absolute; width: 40px; height: 40px; z-index: -1; left: 50%; top: 50%; opacity: 0; border-radius: 50%; -webkit-animation: ripple 1.8s infinite; animation: ripple 1.8s infinite; margin: -20px 0 0 -20px;}
.sub .New .Dot:before {content:''; display: block; clear:both; background: var(--pointcolor); position: absolute; width: 26px; height: 26px; z-index: -1; left: 50%; top: 50%; opacity: 0.3; border-radius: 50%; margin: -13px 0 0 -13px;}

.sub .New .Dot1 {right: -0.25rem; bottom: -0.375rem;}
.sub .New .Dot2 {bottom:-0.375rem; left: -1.25rem;}

.sub .New .Line {position: absolute; background: no-repeat center / contain; z-index: 2;}
.sub .New .Line1 {width: 24.3125rem; height: 8.4375rem; top:0; left:0; background-image: url('/img/sub/Nose/Line01.png');}
.sub .New .Line2 {width: 14.5625rem; height: 21.3125rem; top:0; right:0; background-image: url('/img/sub/Nose/Line02.png');}

.sub .New .DescInner {position: absolute; width: 100%;}
.sub .New .Desc {position: absolute; box-shadow: 2px 2px 13px 2px rgba(0, 0, 0, .05); background-color: #fff; border-radius: 1.25rem; padding: 2rem 2.4rem; height: fit-content; z-index: 3;}
.sub .New .Desc1 {left:0;} 
.sub .New .Desc2 {right:0;} 
.sub .New .TitBox {display: flex; align-items: center; gap:1rem;}
.sub .New .roundBox {color:#fff; white-space: nowrap; background-color: var(--pointcolor); width: fit-content; display: block; font-family: var(--pointfont); padding: .1rem 1rem; border-radius: 1.0625rem;}


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

@media(max-width:1240px) {
    .sub .New .Inner {flex-wrap: wrap; gap:2rem;}
    .sub .New .Img {order: -1; top:0;}
    .sub .New .Line {background-image: none;}

    .sub .New .Dot:before {color:#fff; z-index: 3; opacity: 1; font-size: 1rem; display: flex; align-items: center; justify-content: center;}
    .sub .New .Dot1:before {content:'01';}
    .sub .New .Dot2:before {content:'02';}

    .sub .New .DescInner {position: relative; display: flex; gap:1rem; justify-content: center;}
    .sub .New .Desc {position: relative;}
    
}
@media(max-width:500px) {
    .sub .New .DescInner {flex-direction: column; gap:2rem;}
    .sub .New .Desc {max-width: 361px; width: 100%; margin: auto;}
    .sub .New .Dot1 {right:1.5rem}
}



/* evolve */
.sub .evolve {background: no-repeat top / cover url('/img/sub/Nose/evolveBg.jpg');}
.sub .evolve .evolveInner {max-width: 40.625rem; width: 100%; margin-left: auto; margin-right: auto;}
.sub .evolve .box {width: fit-content; position: relative; z-index: 3;}
.sub .evolve .box img {width: 20.8125rem;}
.sub .evolve .box1:after {content:''; width: 25.25rem; height: 14.125rem; background-image: url('/img/sub/Nose/evolveLine01.png'); background-repeat: no-repeat; background-size: cover; position: absolute;top: auto; bottom: -4.5rem; margin: auto; right: -8rem;}
.sub .evolve .box2 {margin-top: -5rem; margin-left: auto;}
.sub .evolve .box2:after {content:''; width:25.25rem; height: 16.5rem; background-image: url('/img/sub/Nose/evolveLine02.png'); background-repeat: no-repeat; background-size: cover; position: absolute;top: auto; bottom: -5rem; margin: auto; left: -15.5rem }
.sub .evolve .box3 {margin: auto;}

.sub .evolve .Desc {padding: 3rem 0; background-image: linear-gradient(to right, transparent, rgba(255,255,255,.6), transparent); color:#000;}

@media(max-width:500px) {
    .sub .evolve .box2 {margin-top: 0;}
    .sub .evolve .box1:after {width: 21.25rem; height: 9.125rem;}
    .sub .evolve .box2:after {width: 19rem; height: 13rem; left: -15rem;}
}
@media(max-width:400px) {
    .sub .evolve .box1:after {bottom: -5.5rem; right: -7rem;}
    .sub .evolve .box2:after {left: -12rem;}
}