@charset "utf-8";
/* 문자열설정 */
/* 폰트설정 */
@import url("../../fonts/NotoSansCJK/NotoSansCJK.css");
@import url("../../fonts/Roboto_KR/Roboto_KR.css");

/* .wrap {overflow: hidden;} */
html body #content { background: #fff; overflow: hidden;}
.m_color {color: #0c82fe;}
.p_color {color: var(--primary-color);}
.swiper-container{overflow: hidden;}

.table{display: table; table-layout: fixed;width: 100%;height: 100%; }
.cell {display: table-cell;vertical-align: middle;}


.line_map {padding: 36px 16.66% 40px;}
.line_map p {font-size: 16px; text-align: right;}
.line_map p span {color: #0c82fe;}

.top_banner {position: relative;}
.top_banner .inner {color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.top_banner .inner h2 {font-size: 84px; letter-spacing: -0.04em; margin-bottom: 1rem;}
.top_banner .inner p {font-size: 27px; letter-spacing: -0.1em;}


.container .newAging{width: 100%;height: calc(960 / 1920 * 100%);background: url(../images/sub/img_newAging_bg.png) no-repeat center;background-size: cover;/*background: linear-gradient(107deg, #E4FFFC 14.91%, #FFE1AC 51.09%, #FFECF5 88.74%);*/box-sizing:border-box;position: relative;overflow: hidden;}
.container .newAging::before{content:''; width: 24.27%;height: 100%; display: block; background: url(../images/sub/img_newAging_01.png) no-repeat 0 bottom ; background-size: contain ; position: absolute; left: 0; bottom: 0; }
.container .newAging::after{content:''; width: 24.27%;height: 100%; display: block; background: url(../images/sub/img_newAging_02.png) no-repeat 0 bottom ; background-size: contain ; position: absolute; right: 0; bottom: 0; }
.container .newAging .inner{padding: 135px 0 0 !important;width: 100%;}
.container .newAging .content_box{margin-top:33px;}
.container .newAging .content_box ul{width: 100%; display: flex; justify-content: space-between; position: relative;}
.container .newAging .content_box ul::before{content:'';width: 30%;height: 60%;display: block;background: url(../images/sub/img_newAging_03.png) no-repeat center center;background-size: 100% auto;position:absolute;top: 50%;left: 50%;transform: translate(-44%, -40%);}
.container .newAging .content_box li{position: relative;width: 50%;padding-bottom: calc(721 / 1920* 100%);}
.container .newAging .content_box .text_box{position: absolute; color: var(--gray-color-1000);padding-bottom: 34px;}
.container .newAging .content_box .text_box::after{content:'';width: 360px;height: 20px;position:absolute;bottom: 0; background-repeat:no-repeat;display:block;}
.container .newAging .content_box li:first-of-type .text_box{text-align: left;left: 50%;bottom: 20%;transform: translate(20%, -170%);}
.container .newAging .content_box li:last-of-type .text_box{text-align: right;right:50%;bottom: 20%;transform: translate(0, 0);}
.container .newAging .content_box li:first-of-type .text_box::after{left: 0 ;background-image:url(../images/sub/line_newAging_01.svg);}
.container .newAging .content_box li:last-of-type .text_box::after{right: 0 ;background-image:url(../images/sub/line_newAging_02.svg);background-position: right center;}
.container .newAging .content_box .text_box .main_text{font-size:42px; font-weight: 600; line-height: 1.2; padding-bottom:20px;}
.container .newAging .content_box .text_box .sub_text{font-size:28px; font-weight: 400;  letter-spacing: -1px;}

.container .recommend .content_box ul{display: flex;flex-direction: column;align-items: flex-start;gap: 20px; width: 50vw; margin: 0 auto;}
.container .recommend .content_box ul li{width: 100%; border-radius: 20px;border: 1px solid #FFF; background: rgba(255, 255, 255, 0.80);padding: 27px 50px;box-sizing: border-box;}
.container .recommend .content_box .text_box{ letter-spacing: -1px; color: var(--gray-color-1000); display: flex; justify-content: flex-start; align-items: center; gap: 40px;}
.container .recommend .content_box .text_box p{font-size: 28px; font-weight: 500; }
.container .recommend .content_box .text_box p strong{font-weight: 500; }
.container .recommend .content_box .text_box span{font-size: 20px; font-weight: 700;}

.container .procedures .content_box ul{display :grid;grid-template-columns: repeat(3, 1fr); gap: 88px 40px; align-items: flex-start;}
.container .procedures .content_box ul li .img_box img{border-radius: 24px; }
.container .procedures .content_box ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 44px;}
.container .procedures .content_box ul .text_box{letter-spacing: -1px; text-align: center; position: relative; width: 100%;}
.container .procedures .content_box ul .text_box .num{box-sizing: border-box; padding: 16px 32px; border-radius: 50px;
    background: #20534F; color: #fff; font-size: 28px; font-weight: 600; display: inline-block; }
.container .procedures .content_box ul .text_box p{ font-size: 34px; font-weight: 500; line-height: 1.4; color: var(--gray-color-1000); margin-top: 28px;}
.container .procedures .content_box ul .text_box::after{content:''; display: block; width: 50%; border: 1px; border-bottom: 1px dashed #20534F; position: absolute;top: 0; right: 0; transform: translate(60%, 33px);}
.container .procedures .content_box ul li:nth-of-type(3n) .text_box::after{content: none;}

/* content */
:root {
    --swiper-image-ratio: 100%;
    --swiper-width: 50%;
    --swiper-inactive-scale: .85;
    /* responsive settings */
    --swiper-mobile-width: 90%;
    --swiper-mobile-inactive-scale: .95;
}
.container .lab .inner{padding: 160px 0 160px 12.6% !important; position: relative;}
.container .lab .title_box{text-align: left}
.container .lab .swiper-container {position: relative;width: 100%;overflow: hidden;}
.container .lab .swiper-container {height: calc(var(--swiper-width) * var(--swiper-image-ratio) / 100);}
.container .lab .swiper-slide {position: relative;width: var(--swiper-width);transform: scale(.95);transition: all .3s ease;overflow: hidden; transform-origin: left bottom;}
.container .lab .swiper-backface-hidden .swiper-slide {transform: scale(.95) translateZ(0);}
.container .lab .swiper-slide:hover {transform: scale(1) !important;}
.container .lab .swiper-backface-hidden .swiper-slide.swiper-slide-active {transform: scale(1) translateZ(0) !important;}
.container .lab .swiper-slide .img_box {position: relative;width: 100%;padding-top: var(--swiper-image-ratio);}
.container .lab .swiper-slide .img_box  img {position: absolute;top: 0;left: 0;bottom: 0;width: 100%;height: 100%;background-color: #929ec9;}
/* 활성화된 슬라이드 크기 */
.container .lab .swiper-control{position: absolute;right: 12.6%;top: 160px;transform: translate(0, 0);height:  52px;width: 120px;}
.container .lab .swiper-button-next,.container .lab .swiper-button-prev {color: #64183c ; opacity: .5 }
.container .lab .swiper-button-next:active,.container .lab .swiper-button-prev:active {opacity: 1 !important;}
.container .lab .inner .swiper-button-prev,.container .lab .inner .swiper-button-next {color: var(--gray-color-1000); ;width: 50px; height: 50px; background: #fff; border: 1px solid #DCDEE3; border-radius: 100%;}
.container .lab .inner .swiper-button-prev{left: auto;}
.container .lab .inner .swiper-button-next {right: 0;left: auto;}
.container .lab .inner .swiper-button-prev:after,.container .lab .inner .swiper-button-next:after {font-weight: 900; font-size: 16px;}


.container .award{ width: 100%; position: relative; background-image: url(../images/sub/img_banner_award.jpg);  background-repeat: no-repeat;
    background-position: center center; background-size: cover; /*background--attachment: fixed;*/ }
.container .award .inner{height: 630px; box-sizing: border-box;display : flex; justify-content: center; align-items: center; text-align: center}
.container .award .text_box{color: #fff;}
.container .award .text_box p{font-size: 30px; font-weight: 300; line-height: 1.3; letter-spacing: -1px; margin-bottom: 30px;}
.container .award .text_box strong{font-size: 70px; font-weight: 900; line-height: 1; letter-spacing: -0.7px;}

.container .secret .content_box ul{ display :grid;  grid-template-columns: repeat(2, 1fr); align-items: stretch;gap: 40px;}
.container .secret .content_box ul li{width: 100%;border-radius: 24px;overflow:hidden;background-repeat: no-repeat; background-position: center right; background-size: auto 100%; padding: 48px;box-sizing:border-box; }
.container .secret .content_box ul li:nth-of-type(1){background-color:#EAF7F8;  background-image: url(../images/sub/img_secret_01.png); }
.container .secret .content_box ul li:nth-of-type(2){background-color:#E5F4FF;  background-image: url(../images/sub/img_secret_02.png); }
.container .secret .content_box ul li:nth-of-type(3){background-color:#FAF7E0;  background-image: url(../images/sub/img_secret_03.png); }
.container .secret .content_box ul li:nth-of-type(4){background-color:#FFF4FA;  background-image: url(../images/sub/img_secret_04.png); }
.container .secret .content_box ul li .text_box{letter-spacing: -1px;}
.container .secret .content_box ul li .title_text{font-size: 30px; font-weight: 800; line-height: 1.4;  color: var(--gray-color-1000);}
.container .secret .content_box ul li .title_text span{display: block ; padding-bottom: 10px; color: var(--primary-color);}
.container .secret .content_box ul li .desc_text{font-size: 26px; font-weight: 400; line-height: 1.5; color: var(--gray-color-900); margin-top: 88px;}

.container .product_surgery .inner{display:flex; justify-content: space-between;align-items: center;  gap: 120px;}
.container .product_surgery .inner > div {flex: 1;}
.container .product_surgery .inner .img_box{width: 100%; max-height: 600px;height: 600px; display: flex; justify-content: center; align-items: center;}
.container .product_surgery .inner .img_box img{ max-width: 100%; max-height: 100%;  height: auto; object-fit: contain;}
.container .product_surgery .inner .text_box{letter-spacing: -1px; color: var(--gray-color-1000);line-height: 1.5;}
.container .product_surgery .inner .text_box .title_box{text-align: left;}
.container .product_surgery .inner .text_box .sub_title{font-size: 30px;font-weight: 600;}
.container .product_surgery .inner .text_box .title_text{/* font-size: 64px; *//* font-weight: 700; */}
.container .product_surgery .inner .text_box .desc_text{font-size: 26px;margin-top: 16px;text-wrap: balance;word-break:keep-all;}
.container .product_surgery .inner .text_box .sub_explain{margin-top: 64px; padding-left:20px; border-left: 1px solid #775D3A;}
.container .product_surgery .inner .text_box .sub_explain h5{font-size: 32px;font-weight: 600;line-height: 1;}
.container .product_surgery .inner .text_box .sub_explain p{font-size: 26px; color: var(--gray-color-800);text-wrap: balance;word-break:keep-all;margin-top: 20px;}
/* 간편상담신청 css 깨짐 현상으로 인한 중간 미디어쿼리 추가 */
@media screen and (max-width: 1680px) {
}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .line_map {padding: 56px 12% 40px;}

    .container .recommend .content_box ul{width: 100%;}

    .container .newAging .inner{padding: 80px 0 0 !important;}
    .container .newAging .content_box li{padding-bottom: calc(573 / 1540  * 100%);}
    .container .newAging .content_box .text_box .main_text{font-size:32px;}
    .container .newAging .content_box .text_box .sub_text{font-size:20px}
    .container .newAging .content_box .text_box::after{content:'';width: 200px;height: 20px; background-size:100% auto;}
    .container .newAging .content_box li:first-of-type .text_box{transform: translate(30%, -100%);}
    .container .newAging .content_box li:last-of-type .text_box{ transform: translate(-30%, 0)}

    .container .lab .inner{padding: 80px 0 80px 12.6% !important;}
    .container .lab .swiper-control{top: 80px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .line_map {padding: 56px 8% 40px;}

    .newAging .content_box .content_left, .newAging .content_box .slide .text_box{padding: 120px 5%;}

    .container .lab .inner{padding: 80px 0 80px 12.6% !important;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .line_map {padding: 56px 6% 40px;}

    .container .product_surgery .inner{gap:40px;}
    .container .procedures .content_box ul .text_box p{ font-size: 32px;}
    .container .product_surgery .inner .text_box .desc_text{font-size: 22px;}
    .container .product_surgery .inner .text_box .sub_explain{margin-top: 40px; }
    .container .product_surgery .inner .text_box .sub_explain h5{font-size: 28px;}
    .container .product_surgery .inner .text_box .sub_explain p{font-size: 22px; }
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* #content {margin-top: 94px;} */
    /* content */
    .line_map {padding: 32px 5% 46px;}
    .line_map p {font-size: 11px;}

    .container .procedures .content_box ul .text_box .num{padding: 12px 22px; font-size: 22px; }
    .container .procedures .content_box ul .text_box p{ font-size: 28px;}

    .container .newAging .inner{padding: 40px 0 0 !important;}
    .container .newAging .title_box h4{font-size: 40px;}
    .container .newAging .content_box .text_box .main_text{font-size:24px; padding-bottom: 10px;}
    .container .newAging .content_box .text_box .sub_text{font-size:18px; }

    .container .lab .inner{padding: 60px 0 60px 5% !important;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    /* #content {margin-top: 72px;} */
    .line_map {display: none;}

    /* header */
    #headerAreaMobile .sub_page .header_inner .header_inner_top {padding: 18px 5%; display: flex;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .btn_back {display: inline-block; text-indent: -999px; width: 24px; height: 24px;
        background: url(../images/btn_back_mo.png) center no-repeat; background-size: contain;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here {font-weight: 700; font-size: 16px; position: relative; color: #29203B;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::before {content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: text-top;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::after {content: ''; display: inline-block; width: 24px; height: 24px; transform: rotate(0);
        position: relative; top: 0; right: 0; background: url(../images/arrow_bk_down_mo.png) center no-repeat; background-size: contain; vertical-align: text-top; transition: all .2s;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.on::after {transform: rotate(540deg);}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow {pointer-events: none; cursor: default;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow::after {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow::before {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu {position: absolute; top: 48px; left: 50%; transform: translateX(-50%); z-index: 100;
        width: 70%; border: 1px solid #D9D9D9; box-shadow: 0px 4px 8px rgba(116, 53, 255, 0.15); border-radius: 8px; display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li a {display: block; width: 100%; box-sizing: border-box; padding: 18px 5%;
        font-weight: 500; font-size: 14px; letter-spacing: -0.01em; text-align: center; color: rgba(46, 21, 102, 0.5);
        background: #FFFFFF; box-shadow: inset 0px -1px 0px rgba(46, 21, 102, 0.15);}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li a.on {color:#7435FF;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li:first-child a {border-radius: 8px 8px 0 0;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li:last-child a {border-radius: 0 0 8px 8px;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu {display: inline-block; width: 24px; height: 24px;
        background: url(../images/menu_mo_sub.png) right center no-repeat; background-size: contain;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu span {font-size: 0; color: #FFFFFF; text-indent: -9999px;}

    #headerAreaMobile .header_inner .header_inner_bottom {padding: 0px 5%; justify-content: normal; align-items: center; border-top: 1px solid rgba(46, 21, 102, 0.1);}
    #headerAreaMobile .header_inner .header_inner_bottom nav {overflow: hidden; position: relative; height: 46px;}
    #headerAreaMobile .header_inner .header_inner_bottom nav h3 {font-weight: 500; font-size: 15px; line-height: 46px; text-align: center; color: #2A1D39;}

    /* content */
    .container .recommend .content_box ul{width: 100%;gap: 12px;padding: 0;}
    .container .recommend .content_box ul li{border-radius: 12px;padding: 20px;}
    .container .recommend .content_box .text_box p{font-size: 18px;  }
    .container .recommend .content_box .text_box span{font-size: 16px; }
    .container .recommend .content_box .text_box{gap: 12px;}

    .container .procedures .content_box ul{grid-template-columns: repeat(1, 1fr); gap: 40px;}
    .container .procedures .content_box ul li .text_box::after{content: none;}
    .container .procedures .content_box ul li{ flex-direction: column-reverse; gap: 16px;}
    .container .procedures .content_box ul .text_box .num{ width: 76px; padding: 8px; border-radius: 50px; font-size: 12px;  }
    .container .procedures .content_box ul .text_box p{ font-size: 20px; margin-top: 16px;}
    .container .procedures .content_box ul li .img_box img{border-radius:12px;}

    .container .newAging .content_box ul{grid-template-columns: repeat(1, 1fr); gap:24px;}
    .container .newAging{height: 960px;background: url(../images/sub/img_newAging_bg_mo.png)no-repeat center;background-size: cover;}
    .container .newAging .inner{padding: 60px 0 0 !important;}
    .container .newAging::before,.container .newAging::after{content:''; width: 45%;}
    .container .newAging .title_box h4{font-size: 34px;}
    .container .newAging .content_box ul::before{content:'';width: 50%;height: 100%;transform: translate(-44%, -30%);}
    .container .newAging .content_box li:first-of-type .text_box{text-align: left;left:0;top: 0;transform: translate(24px, 0);bottom: auto;}
    .container .newAging .content_box li:last-of-type .text_box{text-align: right; right:0; bottom:0; transform: translate(-24px, 20%)}
    .container .newAging .content_box .text_box .main_text{font-size:22px; padding-bottom: 10px;}
    .container .newAging .content_box .text_box .sub_text{font-size:16px; }
    .container .newAging .content_box .text_box::after{content:'';width: 112px;height: 12px; background-size:contain;}
    .container .newAging .content_box li:first-of-type .text_box::after{background-image:url(../images/sub/line_newAging_01_mo.svg);}
    .container .newAging .content_box li:last-of-type .text_box::after{background-image:url(../images/sub/line_newAging_02_mo.svg);}

    .container .lab .inner{padding: 60px 0 60px 5% !important; }
    .container .lab .title_box{padding: 0 24px 60px 0;}
    .container .lab .inner .swiper-button-prev,.container .lab .inner .swiper-button-next {width:40px; height: 40px;}
    .container .lab .inner  .swiper-button-prev:after,.container .lab .inner .swiper-button-next:after {font-weight: 900; font-size: 16px;}
    .container .lab .swiper-control{right:auto;left: 24px;top: 240px;height:  52px;width: 100px;}

    .container .award{ background-image: url(../images/sub/img_banner_award_mo.jpg);}
    .container .award .inner{height: 390px;}
    .container .award .text_box p{font-size:18px; margin-bottom: 16px;}
    .container .award .text_box strong{font-size: 38px;}

    .container .secret .content_box ul{ grid-template-columns: repeat(1, 1fr);gap: 24px;}
    .container .secret .content_box ul li{border-radius: 12px; padding: 24px;}
    .container .secret .content_box ul li .title_text{font-size: 18px;}
    .container .secret .content_box ul li .desc_text{font-size: 16px;margin-top: 32px;}

    .container .product_surgery .inner{flex-direction: column; gap:20px;}
    .container .product_surgery .inner .text_box .sub_title{font-size: 20px;}
    .container .product_surgery .inner .text_box .desc_text{font-size: 16px;}
    .container .product_surgery .inner .text_box .sub_explain{margin-top: 32px;}
    .container .product_surgery .inner .text_box .sub_explain h5{font-size: 20px;}
    .container .product_surgery .inner .text_box .sub_explain p{font-size: 16px;}
}
@media screen and (max-width:480px){
    .container .newAging{ height: 100svh; max-height:680px;}

    .container .lab .swiper-slide {transform: scale(.85);}
    .container .lab .swiper-slide.swiper-slide-active {transform: scale(1) !important;}
}