/* ==========================================================================
    Common
========================================================================== */

#sub_v.intro{background-image:url('/page/about/img/intro_v.png?v=2');}
#sub_v.equipment{background-image:url('/page/about/img/equipment_v.png?v=2');}
#sub_v.doctor{background-image:url('/page/about/img/doctor_v.png?v=2');}
#sub_v.info{background-image:url('/page/about/img/info_v.png?v=2');}
#sub_v.interior{background-image:url('/page/about/img/interior_v.png?v=2');}

#sub_v.secret-contour{background-image:url('/page/signature/img/secret-contour_v.png?v=2');}
#sub_v.exosome{background-image:url('/page/signature/img/exosome_v.png?v=2');}
#sub_v.belluti{background-image:url('/page/signature/img/belluti_v.png?v=2');}
#sub_v.hair-implant{background-image:url('/page/signature/img/hair-implant_v.png?v=2');}

#sub_v.notice{background-image:url('/assets/images/board/notice_v.png?v=2');}
#sub_v.event{background-image:url('/assets/images/board/event_v.png?v=2');}
#sub_v.bna{background-image:url('/assets/images/board/bna_v.png?v=2');}

#sub_v.board{background-image:url('/assets/images/board/notice_v.png?v=2');}


/* ==========================================================================
    About
========================================================================== */



/* ===================================== 병원소개 ===================================== */

.active .big{color: var(--brown2);}

.intro_con1 {background-image: url('/page/about/img/intro_con1_bg.png?v=2'); background-size: cover; background-position: center; text-align: center;}

.intro_con2 .orbit_container { position: relative; width: 1562px; margin: var(--space-80) auto 0;}
.intro_con2 .orbit_svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro_con2 .content_wrapper { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.intro_con2 .circle_item { width: 408px; height: 408px; flex-shrink: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; text-align: center; margin-left:-30px; padding-top:var(--space-35);}
.intro_con2 .circle_item:first-child { margin-left: 0; }
.intro_con2 .circle_item.white_bg {border: var(--space-26) solid rgba(234, 234, 234, 1); background: var(--white);}
.intro_con2 .circle_item.grey_bg {border: var(--space-26) solid rgba(217, 217, 217, 1); background: var(--gray3);margin-left: -60px;}
.intro_con2 .circle_item h4:after{content:''; display:block; width: 46px; height: 2px; margin:var(--space-15) auto var(--space-10);opacity: 0.4;background: #AE9D7B;}
.intro_con2 .circle_item.grey_bg h4:after{background: #F7F7F7;}
.intro_con2 .circle_item:nth-child(2){z-index:1;}
.intro_con2 .circle_item:nth-child(3){z-index:2;}
.intro_con2 .circle_item:nth-child(4){z-index:3;}

.intro_con3.pinned_section { position: relative; width: 100%; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: url('/page/about/img/intro_con3_bg.png?v=4'); background-size: cover; background-position: center; }
.intro_con3 .firts_txt { position: absolute; z-index: 2; opacity: 0;text-align:center;}
.intro_con3 .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000099; opacity: 0; z-index: 3; }
.intro_con3 .second_txt { position: absolute; z-index: 4; opacity: 0; transform: translateY(100px);text-align:center;}

.bottom_common_con2.intro_con4 .bottom_common_area2 .cont .right_txt .txt_box { margin-bottom: var(--space-180); }
.bottom_common_con2.intro_con4 .bottom_common_area2 .cont .right_txt .txt_box:last-child{margin-bottom: 0;}
.bottom_common_con2.intro_con4 .bottom_common_area2 .cont .right_txt .txt_box:not(:last-child)::before {height: calc(100% + var(--space-180)); }

.sub_common_con4.intro_con5 .common4_list {justify-content: center;}

.intro_con6 {background-image: url('/page/about/img/intro_con6_bg.png?v=2'); background-size: cover; background-position: center;}
.intro_con6 .tit_box {text-align: center;}
.intro_con6 .img_box{display: inline-block;text-align: center;margin-bottom: -7px;}
.intro_con6 .txt_box{position:relative; text-align: center;}
.intro_con6 .name_area a{position:absolute; display: inline-block; border-bottom: 2px solid var(--black1);right: 0; bottom: var(--space-150);}
.intro_con6 .name_box{position:absolute;bottom: var(--space-250);text-align: left;}
.intro_con6 .name_box .doc_tag{background: #C4AA78;color:var(--gray1);text-align: center;height:52px;line-height:52px;font-weight: 600;}
.intro_con6 .name_box.jhr{left: var(--space-50);}
.intro_con6 .name_box.jhr .doc_tag{width:305px;}
.intro_con6 .name_box.kja{right: var(--space-100);}
.intro_con6 .name_box.kja .doc_tag{width:196px;}


/* ===================================== 의료진 ===================================== */

.doctor_con1 { background-image: url('/page/about/img/doctor_con1_bg.png?v=2'); background-size: cover; background-position: center; }
.doctor_con1 .row_con{display: flex;}
.doctor_con1 .tit_box{display: inline-block; white-space: nowrap;}

.doctor_con2 .tit_box {white-space: nowrap;text-align: center;}
.doctor_con2 .doctor_con2_item{display: flex;justify-content: space-between;}
.doctor_con2 .doctor_con2_item .doc_box {background: #C4AA78;height: 52px;width: 305px;display: flex;justify-content: center;align-items: center;}
.doctor_con2 .doctor_con2_item:nth-child(even){flex-direction: row-reverse;}
.doctor_con2 .doctor_con2_item:nth-child(even) .doc_box{width:244px;}
.doctor_con2 .doctor_con2_item .txt_box{margin-top:var(--space-40);}
.schedule_grid {display: grid;grid-template-columns: repeat(6, 1fr);border: 1px solid #b89148;border-radius: 8px;overflow: hidden;width: 783px;}
.schedule_grid > div {text-align: center;}
.schedule_grid > div:nth-child(6n) {border-right: none;}
.schedule_grid .head {background-color: #c0964d;color: var(--white);font-size: var(--font-20);font-weight: var(--weight-b);border-right: 1px solid #CFC4AF;padding: 5px 0;}
.schedule_grid .cell {background-color: var(--white);height: 65px;display: flex;flex-direction: column;align-items: center;justify-content: center;border-right: 1px solid var(--brown2);}
.schedule_grid .badge {display: inline-block;width:66px;padding: 2px var(--space-15) 1px;border-radius: 20px;color:var(--white);font-size: var(--font-16);font-weight: var(--weight-b);}
.schedule_grid .badge.on {background-color: var(--brown2);}
.schedule_grid .badge.off {background-color: var(--gray3);}
.schedule_grid .sub_txt {font-size: var(--font-15);}


.bottom_common_con3.about1 .txt_box a {width: 286px;display: flex; align-items: center; justify-content: center;color:#1E1E1E;}
.bottom_common_con3.about1 .txt_box a div{margin-right:var(--space-10);}


/* ===================================== 장비 안내 ===================================== */

.equipment_con1 .step_area{height: var(--space-80);padding: var(--space-20) 0 var(--space-10);position: sticky;top: 55px;z-index: 10;background: var(--white);}
.equipment_con1 .equipment_con1_item .row_con{display: flex; flex-direction: row-reverse;align-items: center;}
.equipment_con1 .equipment_con1_item:nth-child(even){background:#FBFBFB;}
.equipment_con1 .equipment_con1_item:nth-child(even) .row_con{flex-direction: row;}
.equipment_con1 .equipment_con1_item .txt_box{white-space: nowrap;}
.equipment_con1 .equipment_con1_item .txt_box p {line-height: 1.2;}
.equipment_con1 .equipment_con1_item .txt_box .desc {line-height: 1.5}

.sub_common_con3.equipment_con1 .step_area .step_tab .tab.active span{transform: translateY(-10px);}
.sub_common_con3.equipment_con1 .step_area .step_tab .tab:before{bottom: -6px;}



/* ===================================== 오시는길 ===================================== */

.info_con1 .tit_box{text-align: center;}
.info_con1 .info_con1_box{display: flex;gap: var(--space-30);}
.info_con1 .time_common_box{height: 229px;width: 32%;padding: var(--space-40); background: var(--gray1); border-radius: 12px;}
.info_con1 .time_common_box .txt_box {display: flex; align-items: center; justify-content: space-between;}
.info_con1 .n2 .time_common_box {width: 49%;}
.info_con1 .time_common_box.hover_color1{transition:0.5s;}
.info_con1 .time_common_box.hover_color1:hover {background: rgba(182, 140, 57, 0.6);}
.info_con1 .time_common_box.hover_color2 {background: rgba(182, 140, 57, 0.6);transition:0.5s;}
.info_con1 .time_common_box.hover_color2:hover{background: rgba(182, 140, 57, 1);}
.info_con1 .time_common_box.hover_color2 .goto{border-bottom: 2px solid #fff;}

.info_con2 { background-image: url('/page/about/img/info_con2_bg.png?v=2'); background-size: cover; background-position: center; }
.info_con2 .tit_box{text-align: center;}
.info_con2 .info_con2_box{display: flex;gap: var(--space-30);}
.info_con2 .time_common_box{height: 229px;width: 32%;padding: var(--space-40); background: var(--gray1); border-radius: 12px;}
.info_con2 .time_common_box .txt_box {display: flex; align-items: center; justify-content: space-between;}

.navi_box{background:var(--white);width:100%;text-align:center;backdrop-filter: blur(0px);padding: var(--space-20) 0;border-radius: 12px;}

.map_area{width:1384px; /* height:580px; */}
.map_area .root_daum_roughmap.root_daum_roughmap_landing,
.map_area .root_daum_roughmap.root_daum_roughmap_landing .wrap_map {width: 100% !important;height: 100% !important;}

/* ===================================== 둘러보기 ===================================== */

.interior_con1 { background-image: url('/page/about/img/interior_con1_bg.png?v=2'); background-size: cover; background-position: center; text-align: center; }
.interior_con1 .main-slider { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: var(--space-30); aspect-ratio: 1600 / 675; }
.interior_con1 .main-slider img { width: 100%; display: block; }
.interior_con1 .thumb-slider-container { position: relative; width: 100%; }
.interior_con1 .thumb-slider { width: 100%; height: var(--space-400);}
.interior_con1 .thumb-slider .swiper-wrapper { align-items: center; }
.interior_con1 .thumb-slider .swiper-slide { aspect-ratio: 304 / 264; height: auto; border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.interior_con1 .thumb-slider .swiper-slide-active { aspect-ratio: 304 / 366; }
.interior_con1 .thumb-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.interior_con1 .slide_overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(1deg, rgba(0, 0, 0, 0.50) 0.61%, rgba(102, 102, 102, 0.00) 99.39%); }
.interior_con1 .slide_title { color: var(--white); transition: color 0.3s ease; display: inline-block; position: absolute; bottom: var(--space-35); left: var(--space-40); }
.interior_con1 .thumb-slider .swiper-slide-active .slide_title { color: var(--brown1); font-weight: 600; }
.interior_con1 .controller_wrap { gap: var(--space-20); justify-content: center; }



/* ==========================================================================
    Signature Well-Aging
========================================================================== */



/* ===================================== 시크릿 윤곽술 ===================================== */
.sub_common_con2.secret-contour_con2 {background-image: url('/page/signature/img/secret-contour_con2_bg.png?v=2');}

.sub_common_con9.secret-contour_con9 {background-image: url('/page/signature/img/secret-contour_con9_bg.png?v=2');}

/* ===================================== 벨루티 ===================================== */

.belluti_con1 {padding:0;background-color:#030406;}
.belluti_con1 img{width:100%;margin:-3px auto 0;}

@media (min-width:1921px){
.belluti_con1 img{width:auto;}
}

/* ===================================== 모발이식 ===================================== */
.sub_common_con2.hair-implant_con2 {background-image: url('/page/signature/img/hair-implant_con2_bg.png?v=2');}

.hair-implant_con4 .tit_box{text-align:center;}
.hair-implant_con4 .hair-implant_tab_box{text-align: center;}
.hair-implant_con4 .tab_list{display: flex;justify-content: center;gap: var(--space-20);}
.hair-implant_con4 .hair-implant_tab_box{display:none;}
.hair-implant_con4 .hair-implant_tab_box.active{display:block;}

.sub_common_con9.hair-implant_con9 {background-image: url('/page/signature/img/hair-implant_con9_bg.png?v=2');}

.hair-implant_con11 .hair-implant_con11_list{display: flex;justify-content: center;gap:var(--space-70);}
.hair-implant_con11 .txt_box{text-align: center;}
.hair-implant_con11 .style{width:99px; height:31px;background: var(--brown1);display: flex;justify-content: center;margin: 0 auto;margin-top: var(--space-26);}






/* ==========================================================================
    Responsive 1600px(Desktop)
========================================================================== */
@media all and (max-width:1600px){

/* ===================================== 병원소개 ===================================== */
.intro_con2 .orbit_container {width: 100%;}
.intro_con2 .circle_item { width: var(--space-400); height: var(--space-400);margin-left: calc(var(--space-70) * -1);padding-top: var(--space-20);}
.intro_con2 .circle_item.grey_bg {margin-left: calc(var(--space-70) * -1);}



/* ===================================== 의료진 ===================================== */
.schedule_grid{width: 500px;}

/* ===================================== 오시는길 ===================================== */
.map_area{width:100%;}



}/*1600px*/

/* ==========================================================================
    Responsive 1440px(Laptop)
========================================================================== */
@media all and (max-width:1440px){

/* ===================================== 병원소개 ===================================== */
.intro_con2 .tit_box {text-align: center;}

.intro_con3.pinned_section {background-position: 81%;}






}/*1440px*/



@media all and (max-width:1300px){
/* ===================================== 의료진 ===================================== */
.doctor_con2 .doctor_con2_item {flex-direction: column;align-items: center;}
.doctor_con2 .doctor_con2_item:nth-child(even) {flex-direction: column;align-items: center;}
}



@media all and (max-width: 1200px) {
/* ===================================== 병원소개 ===================================== */
.intro_con2 .orbit_container { --size: 50vw; width: var(--size); height: calc(var(--size) * 2.74035); margin: 0 auto; position: relative; margin-top: var(--space-80);}
.intro_con2 .orbit_svg { position: absolute; top: 50%; left: 50%; max-width: none !important; width: calc(var(--size) * 2.74035) !important; height: var(--size) !important; transform: translate(-50%, -50%) rotate(90deg); }
.intro_con2 .content_wrapper { flex-direction: column; }
.intro_con2 .circle_item {margin-left: 0;}
.intro_con2 .circle_item:first-child { margin-top: 0; }
.intro_con2 .circle_item.grey_bg {margin-left:0;}
.intro_con2 .circle_item {width: 34vw;height: 34vw;margin-top: -5vw;padding-top: var(--space-30);}
}




/* ==========================================================================
    Responsive 1024px(Tablet)
========================================================================== */
@media all and (max-width:1024px){

/* ===================================== 병원소개 ===================================== */

.intro_con6 .name_box .doc_tag{padding:var(--space-10) var(--space-15); height: auto;line-height: 1.2;}
.intro_con6 .name_box.jhr .doc_tag {width: auto;}
.intro_con6 .name_box.kja .doc_tag {width: auto;}


.bottom_common_con2.intro_con4 .bottom_common_area2 .cont .right_txt .txt_box {margin-bottom: var(--space-40);}

/* ===================================== 의료진 ===================================== */
.schedule_grid .badge {width:auto;}

.doctor_con1 .row_con {flex-direction: column;align-items: center;}
.doctor_con1 .row_con .img_box{width:70%;}
.doctor_con1 .tit_box {text-align: center;}

/* ===================================== 장비 안내 ===================================== */
/* .equipment_con1 .step_area {top: 110px;} */
.equipment_con1 .equipment_con1_item .row_con {flex-direction: column;text-align: center;}
.equipment_con1 .equipment_con1_item:nth-child(even) .row_con{flex-direction: column;text-align: center;}
.sub_common_con3.equipment_con1 .step_area .step_tab .tab.active span{transform: translateY(-5px);}
.sub_common_con3.equipment_con1 .step_area .step_tab .tab:before{bottom: -1px;}

.bottom_common_con3.about1 .txt_box a {margin-left: auto;margin-right: auto;}

/* ===================================== 오시는길 ===================================== */

.info_con1_wrap h4{text-align:center;}
.info_con1 .info_con1_box{flex-direction: column;}
.info_con1 .time_common_box{height: auto;width: 100%;}
.info_con1 .n2 .time_common_box {width: 100%;}

.info_con2 .info_con2_box{flex-direction: column;}
.info_con2 .time_common_box{height: auto;width: 100%;}


/* ===================================== 둘러보기 ===================================== */
.interior_con1 .thumb-slider {height: 25vw;}
.interior_con1 .thumb-slider .swiper-slide {aspect-ratio: 304 / 190;}
.interior_con1 .thumb-slider .swiper-slide-active {aspect-ratio: 304 / 250;}


/* ===================================== 모발이식 ===================================== */
.hair-implant_con4 .tab_list {gap: var(--space-40);}
.hair-implant_con4 .tab_list {flex-wrap: wrap;}

.hair-implant_con11 .tit_box{text-align: center;}
.hair-implant_con11 .style {width: var(--space-100);height: var(--space-40);}
.hair-implant_con11 .hair-implant_con11_list {flex-wrap: wrap;}

























}/*1024px*/




@media all and (max-width:800px){
/* ===================================== 병원소개 ===================================== */
.intro_con2 .orbit_container { --size: 80vw; width: var(--size); height: calc(var(--size) * 2.74035); }
.intro_con2 .orbit_svg { max-width: none !important; width: calc(var(--size) * 2.74035) !important; height: var(--size) !important; }
.intro_con2 .circle_item { width:55vw; height: 55vw;padding-top: 5vw;}
.intro_con2 .circle_item:first-child { margin-top: 0; }

}
/* ==========================================================================
    Responsive 640px(Mobile)
========================================================================== */
@media all and (max-width:640px){

/* ===================================== 병원소개 ===================================== */
.intro_con6 .name_area a {right: 50%;transform: translateX(50%);bottom: var(--space-50);}

.intro_con6 .name_box {bottom: var(--space-100);}
.intro_con6 .name_box.jhr{left: 0;}
.intro_con6 .name_box.kja {right: 0;}


/* ===================================== 장비 안내 ===================================== */
.equipment_con1 .step_area {top: 12vw;/* height: 63px; */}
.equipment_con1 .equipment_con1_item .txt_box {white-space: normal;word-break: keep-all;}
.equipment_con1 .equipment_con1_item .txt_box .desc{font-size: 3vw;}

/* ===================================== 의료진 ===================================== */
.doctor_con1 .row_con .img_box {width: 100%;margin-top: var(--space-40);}

.doctor_con2 .doctor_con2_item .doc_box {height: 12vw;width: 100%;}
.doctor_con2 .doctor_con2_item .txt_box{text-align: center;}
.doctor_con2 .doctor_con2_item:nth-child(even) .doc_box {width: 100%;}
.schedule_grid {width: 90vw;}



/* ===================================== 오시는길 ===================================== */

.info_con1_box .img_box{width: 11vw;}
.info_con2_box .img_box{width: 11vw;}
.info_con2_area .txt_box{word-break: keep-all;}
/* .map_area {height: 80vw;} */


.bottom_common_con3.about1 .txt_box a {width: 57vw;}
.bottom_common_con3.about1 .txt_box a img{width:7vw;}





}/*640px*/



@media all and (max-width:480px){
/* ===================================== 병원소개 ===================================== */
.intro_con2 .orbit_container { --size: 90vw; width: var(--size); height: calc(var(--size) * 2.74035); }
.intro_con2 .orbit_svg { max-width: none !important; width: calc(var(--size) * 2.74035) !important; height: var(--size) !important; }
.intro_con2 .circle_item { width:66vw; height: 66vw;padding-top: 5vw;margin-top: -8vw;}
.intro_con2 .circle_item:first-child { margin-top: 0; }

}