.sub .subTit {font-size: 2.5rem; font-weight: 700; letter-spacing: .1rem;}
.sub .subTit_sm {letter-spacing: .3rem;}
.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum:after {content:'∙ '; position: absolute; left: 0;}

.sub .h_Line {height: 8.125rem; width: 1px; background-color:#d5d2cc; margin: 3rem auto;}

.sub .xgap3 {--x-gap:3rem;}
.sub .xgap4 {--x-gap:4rem;}

.sub .ygap0 {--y-gap:0rem;}
.sub .ygap4 {--y-gap:4rem;}
.sub .ygap5 {--y-gap:5rem;}

.num {position: relative; padding-left: 2rem; margin-bottom: .5rem;}
.num:after {position: absolute; content:''; left: 0; top:0;}
.num.num1:after {content:'1.';}
.num.num2:after {content:'2.';}
.num.num3:after {content:'3.';}
.num.num4:after {content:'4.';}
.num.num5:after {content:'5.';}
.num.num6:after {content:'6.';}
.num.num7:after {content:'7.';}
.num.num8:after {content:'8.';}
.num.num9:after {content:'9.';}
.num.num10:after {content:'10.';}
.num.num11:after {content:'11.';}

.sub_Btn {border:1px solid #595959; margin-top: 3rem; display: inline-block; font-weight: 300; letter-spacing: 2px; animation: fade-up 2.5s both;  background-color: transparent; color:transparent; padding: .7rem 2rem; text-shadow: -50px 0 0 transparent, 0 0 0 #595959;position: relative; white-space: nowrap; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);} 
.sub_Btn: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_Btn:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; border-color:var(--pointcolor)}
.sub_Btn:hover:before {transform: translate(0, 0);}

.sub_Btn.point {border:1px solid transparent; margin-top: 3rem; display: inline-block; font-weight: 200; letter-spacing: 2px; animation: fade-up 2.5s both;  background-color: var(--pointcolor); color:transparent; padding: 1rem 2.5rem; text-shadow: -50px 0 0 transparent, 0 0 0 #fff; position: relative; white-space: nowrap; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);} 
.sub_Btn.point:before {width: 100%; height: 100%; top: 0; left: 0; background-color: #595959; transform: translate(-100%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.sub_Btn.point:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; border-color:#595959;}
.sub_Btn.point:hover:before {transform: translate(0, 0);}


.sub_Btn2 {padding: .7rem 3rem; border:1px solid #595959; margin-top: 3rem; display: inline-block; font-weight: 400; letter-spacing: 2px; animation: fade-up 2.5s both;}
.sub_Btn2  {position: relative; white-space: nowrap;  background-color:transparent; color: transparent; width: 13.9375rem; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; text-shadow: -50px 0 0 transparent, 0 0 0 #595959; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);}

.sub_Btn2:before {width: 100%; height: 100%; top: 0; left: 0; background-color: #595959; transform: translate(-100%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.sub_Btn2:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent;}
.sub_Btn2:hover:before {transform: translate(0, 0);}


.sub .swiper-button-next, .sub .swiper-button-prev {position: relative; width: 3.75rem; height:3.75rem; top:0; margin-top:0; background-color: var(--pointcolor); right:0; left:0;}
.sub .swiper-button-prev:after, .sub .swiper-button-next:after {content:'';}
.sub .swiper-button-prev img {transform: rotate(180deg);}
.sub .swiper-button-next {box-shadow: inset 8px 7px 8px -3px rgba(0,0,0,.1);}
.sub .btn_wrap {position: relative; display: flex; align-items: center;}
.sub .arrow {width: 1.25rem;}


/* intro */
.sub .intro {position: relative;}
.sub .intro .bg_img{max-height: 58.5625rem; height: 100vh; width: 100%; background-attachment: fixed; background-image: url('/img/sub/story/intro.jpg'); background-repeat: no-repeat; background-size: cover;}
.sub .intro .txtbox{height: 77%; display: flex; flex-direction: column; justify-content: flex-end;}
.sub .intro .Desc {padding: 3rem 0;}
.sub .intro .scroll-box{position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); z-index: 10; animation: ani-mouse 1.5s linear infinite both; display: flex; flex-direction: column;}

.sub .intro .mouse {width: 1.875rem;}
@keyframes ani-mouse {
  0%, 100% {transform: translate(-50%, 0);}
  50% {transform: translate(-50%, 15px);}
}

@media (max-width: 990px){
	.subTop .scroll-box > i{width: 80%; margin: auto;}
}

@media (max-width: 768px){
	.subTop .scroll-box > i{width: 65%;}
}


/* about */
.sub .about .Desc {display: flex; align-items: center; justify-content: center;}
@media (max-width: 768px){
    .sub .about .Desc {justify-content: flex-start;}
}


/* inner */
@media (max-width: 768px){
    .sub .inner .box.img {order:-1;}
}


/* bgBox */
.bgBox {color: #fff;background-color: #000; position: relative;z-index: 0;}
.bgBox .bg_wrap {clip: rect(0, auto, auto, 0);position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
.bgBox .bg {position: fixed;display: block;top: 0;left: 0;width: 100%;height: 100vh;background-image: url('/img/sub/story/bgBoxBg.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;transform: translateZ(0);will-change: transform;}



/* modal */
html.modal-active,body.modal-active {overflow: hidden;}
.modal-container {position: fixed;display: table;height: 100%;width: 100%;top: 0;left: 0;transform: scale(0);z-index: 99999;}
.modal-container.on {transform: scaleY(0.01) scaleX(0);animation: unfoldIn 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
.modal-container.on .modal-background .modal {transform: scale(0);animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
.modal-container.on.out {transform: scale(1);animation: unfoldOut 1.5s 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
.modal-container.on.out .modal-background .modal {animation: zoomOut 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
.modal-container .modal-background {display: table-cell;background: rgba(0, 0, 0, 0.8);vertical-align: middle; text-align: center;}
.modal-container .modal-background .modal {background: white;padding: 4vw;padding-right: 2vw;display: inline-block;position: relative;width:1400px;height:90vh;}
.modal-container .modal-background .modal.sm {max-width:600px;height:auto; background-color:#f0ede5;} 
.modal-container .modal-background .modal .inner{height: 100%;overflow-y:scroll;padding-right: 2vw;}
.modal-container .modal-background .modal .inner::-webkit-scrollbar {width: 2px;} 

.modal-container .TitBox {background-color: var(--pointcolor); padding: .5rem 2rem; color:#fff; display: inline-block;}

.modal-close {position: absolute;top: 30px;right: 50px;font-size: 3rem; font-weight: 100; line-height: 1em;cursor: pointer;}
.modal-close.close {position: relative; font-size: 1.5rem; background-color: var(--pointcolor); border-radius:1.625rem; padding: .5rem 3rem; color:#fff; right:0; display: inline-block; margin-top: 2rem;} 


@keyframes unfoldIn {
    0% {transform: scaleY(0.005) scaleX(0);}
    50% {transform: scaleY(0.005) scaleX(1);}
    100% {transform: scaleY(1) scaleX(1);}
}
@keyframes unfoldOut {
    0% {transform: scaleY(1) scaleX(1);}
    50% {transform: scaleY(0.005) scaleX(1);}
    100% {transform: scaleY(0.005) scaleX(0);}
}
@keyframes zoomIn {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes zoomOut {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}

@media (max-width:1580px){
    .modal-container .modal-background .modal{width: 90%;padding:40px 4vw;padding-right: 2vw;}
    .modal-close {
        top: 10px;
        right: 30px;
    }    
}


/* mean */
.sub .mean .Tit {position: relative; padding-top: 3.8rem;}
.sub .mean .BgTit {font-size: 4.75rem; font-family: var(--poinfont); color:#e7e4dc; font-weight: 700;right: 0; left: 0; top: 0; position: absolute; z-index: -1;}
.sub .mean .tuneFace_equipment {width: 36.5625rem; margin: 4rem auto 0;}
@media (max-width:990px){
    .sub .mean .box.img {order:-1;}
}



/* equip */
.sub .equip .BgBox {max-width: 1920px; margin-left: auto; margin-right: auto; background: no-repeat center url('/img/sub/naturally/equipmentBg.jpg'); background-size: cover; overflow: hidden; position: relative; display: flex; align-items: center;}
.sub .equip .equipmentPage {position: relative; width: 20rem; margin-right: 1rem; text-align: left; padding-left: 4rem; display:flex; flex-direction: column;}
.sub .equip .equipmentPage:after {content:''; height: 240%; width: 1px; background-color: rgba(255,255,255,.05); position: absolute; top:0; bottom:0; left: 4.45rem; margin: auto;}
.sub .equip .swiper-pagination-bullet {width: auto; height: auto; border-radius: 0; background-color: transparent; padding: 1rem 0 1rem 3rem; font-size: 1.25rem; opacity: .3; transition: .3s; position: relative;}
.sub .equip .swiper-pagination-bullet:after {content:''; width: 7px; height: 7px; background-color: #fff; border-radius: 50%; opacity: .3; position: absolute; left: 0; top:0; bottom:0; margin: auto;}
.sub .equip .swiper-pagination-bullet-active:after {opacity: 1;}
.sub .equip .swiper-pagination-bullet-active {position: relative; opacity:1; padding: 3rem 0 3rem 3rem; font-weight: 600; font-size: 1.7rem;}
.sub .equip .swiper-pagination-bullet:before {content:''; width: 7px; height: 7px; background-color: #fff; border-radius: 50%; opacity: .3; position: absolute; left: 0; top:0; bottom:0; margin: auto; transition: .5s;}
.sub .equip .swiper-pagination-bullet-active:before {transform: scale(3);}

.sub .equip .equip_wrap {max-width: 75.875rem; padding: 0 1rem; margin-left: 2rem; margin-right: auto;}
.sub .equip .equip_wrap img {width: 36.5rem;}
.sub .equip .box.Desc {padding-left: 5rem; line-height: 1.7;}
.sub .equip .Tit {position: relative; padding-top: 2.1rem; font-weight: 600;} 
.sub .equip .box.Desc .BgTit {font-size: 4.75rem; font-family: var(--poinfont); color:rgba(255,255,255,.08); font-weight: 700; left: -3rem; top: 0; position: absolute; z-index: -1;}


@media (max-width:1400px){
    .sub .equip .equip_wrap {margin-left: auto; max-width: 63rem; width: 100%;}
}

@media (max-width:990px){   
    .sub .equip .equip_wrap {padding: 0 2rem; max-width: 53rem;} 
    .sub .equip .swiper-pagination-bullet-active {font-size: 1.5rem;}
}
@media (max-width:768px){
    .sub .equip .equipmentPage {display: none;} 
    .sub .equip .box.Desc {padding-left: 3rem;}

    /* .sub .equipment .BgBox {flex-direction: column;}
    .sub .equipment .equipmentPage {flex-direction: row; justify-content: center; width: 100%; order: 2;padding-left:0; margin:6rem auto 0;}
    .sub .equipment .swiper-pagination-bullet {padding: 2rem;}
    .sub .equipment .swiper-pagination-bullet-active {padding: 2rem;}
    .sub .equipment .swiper-pagination-bullet:after {bottom:auto; right:0;}
    .sub .equipment .swiper-pagination-bullet:before {right:0; bottom:auto;}
    .sub .equipment .equipmentPage:after {width: 100%; height: 1px; bottom: auto; top:3px; left: 0;}

    .sub .equipment .equip_wrap {margin-right: auto; margin-left: auto;} */
 }


/* care */
.sub .care .swiper-slide {display: flex; align-items: center;}
.sub .care .swiper-slide .Desc {padding: 2rem;}
.sub .care .swiper-pagination-progressbar {position: relative; background-color: #d8d4d0; opacity: 1; border-radius: 0; margin-top: 5rem; max-width: var(--layoutwidth);}
.sub .care .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}
@media (max-width:500px){
    .sub .care .swiper-slide {flex-wrap: wrap;}
    .sub .care .swiper-slide .box {width: 100%;}
    .sub .care .swiper-pagination-progressbar {margin-top: 0;}
}



/* map */
.sub .map .wayList {display: flex; align-items: center; justify-content: flex-end;}
.sub .map .wayList li + li {margin-left: 1rem;}
.sub .map .wayList .sub_Btn2 {margin-top: 0; width:100%; animation:none; letter-spacing: 0; padding: 0.7rem 1.5rem;}

.sub .map .mapBox {height: 37.5rem;}
.sub .map .root_daum_roughmap, .sub .map .wrap_map {width:100%; height: 37.5rem;}

.sub .map .info_wrap {display: flex;}
.sub .map .info_wrap .box {border-right: 1px solid #dfddd7; padding: 2rem;}
.sub .map .info_wrap .box:last-child {border-right: none;}
.sub .map .info_icon {width: 1.375rem;}

.sub .map table {width: 100%; padding: 2rem 0;}
.sub .map table td {padding: 1rem 0;}


.sub .map .timeTb td {padding: .5rem 0rem;}
.sub .map .timeTb .TbTit {max-width: 5rem; text-align: justify; padding-right: 2rem;}
.sub .map .timeTb .TbTit:after {content:''; display: inline-block; width: 100%;}

.sub .map .callList {padding:  2rem 1rem;}
.sub .map .callList li + li {margin-top: 1rem;}
.sub .map .callList .sub_Btn {margin-top: 0; width:100%; animation:none;}
.sub .map .callList .sub_Btn2 {margin-top: 0; width:100%; animation:none;}

@media (max-width:990px){
    .sub .map .info_wrap {flex-wrap: wrap;}
    .sub .map .info_wrap .box {width: 100%;}   
    .sub .map .info_wrap .box {border-right:none}
}
@media (max-width:500px){
    .sub .map .info_wrap .box {padding: 1rem;}
}




/* nonbenefit */
.sub.nonbenefit table {width: 100%; text-align: center; border-spacing: 0; border-collapse:collapse;}
.sub.nonbenefit table td {padding: .5rem; border:1px solid #595959; vertical-align: middle;}
.sub.nonbenefit table .Tb_Tit {font-size: 1.75rem; font-weight: 500; padding: .7rem; text-align: left;}
.sub.nonbenefit table .bg {background-color: #e7e4dc; font-weight: 500;}




/* define */
.sub .define .Tit {position: relative; padding-top: 1.9rem;}
.sub .define .BgTit {font-size: 4.75rem; font-family: var(--poinfont); color:#e7e4dc; font-weight: 700;right: 0; left: 0; top: 0; line-height: .75; position: absolute; z-index: -1;}
.sub .define .BgTit.Lg {top:-1.25rem;}
@media (max-width:500px){
    .sub .define .BgTit {font-size: 3.75rem;}
}



/* stemcell */
.sub .stemcell {background: no-repeat center url('/img/sub/naturally/equipmentBg.jpg'); background-size: cover;}
.sub .stemcell .BgTit {font-size: 4.75rem; font-family: var(--poinfont); color:rgba(255,255,255,.2); font-weight: 700; line-height: 1.1;}
.sub .stemcell .smTit {font-family: var(--poinfont); color:rgba(255,255,255,.2); font-weight: 700; text-transform: uppercase;}
.sub .stemcell .box img {width: 3.125rem;}



/* Program */
.sub .Program .Img {position: relative;}
.sub .Program .Txt {position: absolute; width: 80%; height: fit-content; left: 0; right:0; top:40%; margin: auto; opacity: 0; z-index: 3; transform: translateY(0); transition: .5s;}
.sub .Program .box .Img img {filter: none; transition: .3s;}
.sub .Program .box:hover .Img img {filter: brightness(.5); transition: .3s;}
.sub .Program .box:hover .Txt {opacity: 1; transform: translateY(-20px); transition: .5s;}



/* step */
.sub .step .box {background: no-repeat center url('/img/sub/signature/stepBg.jpg'); background-size: cover; padding: 5rem 1rem 6rem;}
.sub .step .Tit {position: relative;}
.sub .step .Num {font-size: 4.8125rem; font-weight: 700; color:rgba(89,89,89,.08); position: absolute; width: fit-content; height: fit-content; left: 50%; transform: translateX(-50%); top:-0.6875rem;}
.sub .step .Desc {width: fit-content; margin-left: auto; margin-right: auto;}



/* tuneFaceSlide */
.sub .tuneFaceSlide {background: no-repeat center url('/img/sub/naturally/equipmentBg.jpg'); background-size: cover;}
.sub .tuneFaceSlide .Tit {color:#d8d4d0; font-weight: 700;}
.sub .tuneFaceSlide .tuneFaceImgSwiper img {width: 35.4375rem;}
.sub .tuneFaceSlide .btn_wrap {position: absolute; right:0; bottom:0;}
@media (max-width:768px){
    .sub .tuneFaceSlide .btn_wrap  {position: relative; margin-top: 2rem;}
}



/* with */
.sub .with .inner {max-width: 1190px; margin: 5rem auto 0;}
.sub .with .box {aspect-ratio: 1/1; position: relative;}
.sub .with .box:after {content:''; aspect-ratio: 1/1; width: 100%; position: absolute; border-radius: 50%; mix-blend-mode: multiply;}
.sub .with .box.L:after {background-image: linear-gradient(90deg, transparent, #f0ede5);}
.sub .with .box.R:after {background-image: linear-gradient(-90deg, transparent, #f0ede5);}
.sub .with .box.B:after {background-image: linear-gradient(360deg, transparent, #f0ede5);}
.sub .with .box.L {left: 1.5rem;}
.sub .with .box.R {right: 1.5rem;}
.sub .with .box.B {margin-top: -7.5rem;}
@media (max-width:768px){
    .sub .with .box.L {left: .3rem;}
    .sub .with .box.R {right: .3rem;}
    .sub .with .box.B {margin-top: -5rem;}
    .sub .with .box:after {width: 110%;}
}
@media (max-width:500px){
    .sub .with .box:after {width: 85%;}
    .sub .with .box.L {left: 0;}
    .sub .with .box.R {right: 0; margin-top: -9rem;}
    .sub .with .box.B {margin-top: -9rem;}
}



/* way */
.sub .way {background: no-repeat center url('/img/sub/tuneFace/wayBg.jpg'); background-size: cover;}
.sub .way .box {position: relative;}
.sub .way .box:after {content:''; width: 1rem; height: 1rem; background-image: url('/img/sub/tuneFace/arrow.png'); background-size: contain; position: absolute; top:20%; right:-2rem;}
.sub .way .box:last-child:after {display: none;}
.sub .way .box img {width: 3.75rem;}



/* highEnd */
.sub .highEnd {background: no-repeat center url('/img/sub/tuneFace/highEndBg.jpg'); background-size: cover;}
.sub .highEnd .Tit {font-size:4.8125rem; font-family: var(--poinfont); color:rgba(89,89,89,.22); line-height: 1.2; font-weight: 700; white-space: nowrap;}
.sub .highEnd .DrKim {width: 39.9375rem;}
@media (max-width:500px){
    .sub .highEnd .Tit {font-size:3.8125rem;}
}