@import url('sub.css'); 

/* 인사말 */
.greeting_cont {display: flex; align-items: center;}
.greeting_cont .imgbox {display: flex; gap: 5px; align-items: flex-start; width: 50%; flex-shrink: 0;}
.greeting_cont .imgbox img {max-width: 100%;}
.greeting_cont .imgbox .imgitem {position: relative;}
.greeting_cont .imgbox .imgitem:first-child::before {content: ''; width: 125px; aspect-ratio: 125 / 135; max-width: 50%; position: absolute; right: 22px; top: 0; background: url('/about/img/greeting_logo.svg') center / cover no-repeat}
.greeting_cont .imgbox .imgitem:first-child {width: 45%; max-width: 340px; flex-shrink: 0; padding-top: 90px;}
.greeting_cont .imgbox .imgitem:last-child {flex: 1;}
.greeting_cont .imgbox .imgitem:first-child img {border-radius: var(--borderR180) 0 var(--borderR20) var(--borderR20);}
.greeting_cont .imgbox .imgitem:last-child img {border-radius: var(--borderR20) var(--borderR20) var(--borderR180) var(--borderR20);}

.greeting_cont .txtbox {flex: 1; padding-left: 90px;}
.greeting_cont .txtbox h3 {margin: 0 0 20px;}
.greeting_cont .txtbox .txtbox_head {margin: 0 0 20px;}
.greeting_cont .txtbox .txtbox_body {display: flex; flex-direction: column; gap: 10px; margin-bottom: 45px;}
.greeting_cont .txtbox .txtbox_body .point {text-decoration: underline;}

/* 난임의학 연구소 */
.basic_cont:has(.lab_cont) {width: 100%; max-width: 100%; margin-bottom: 0;}

.lab_director .director_info {margin-top: 50px;}
.lab_director .director_info .director_info_top {display: flex; position: relative; margin-bottom: 60px;}
.lab_director .director_info .director_info_top::after {content: ''; position: absolute; right: 0; bottom: 0; width: 127px; aspect-ratio: 127 / 167; background: url('/about/img/lab_deco.svg') center / cover no-repeat;}
.lab_director .director_info .director_info_top .imgbox {width: 45%; max-width: 620px; flex-shrink: 0; aspect-ratio: 1/1; border-radius: var(--borderR280) var(--borderR20) var(--borderR20) var(--borderR20); overflow: hidden;}
.lab_director .director_info .director_info_top .imgbox img {width: 100%; height: 100%; object-fit: cover;}
.lab_director .director_info .director_info_top .txtbox {flex: 1; padding: 40px 140px 40px 80px; background: var(--grayBg); display: flex; flex-direction: column; justify-content: center; border-radius: var(--borderR20) var(--borderR20) var(--borderR280) var(--borderR20);}
.lab_director .director_info .director_info_top .txtbox h4 {margin: 0 0 20px; display: flex; gap: 5px; align-items: flex-end;}
.lab_director .director_info .director_info_top .txtbox .cont_tit {margin-bottom: 20px;}
.lab_director .director_info .director_info_top .txtbox .cont_body p + p {margin-top: 12px;}

.lab_director .director_info .direction_info_list > li {padding: 10px 40px 0; border-right: 1px solid var(--border);}
.lab_director .director_info .direction_info_list > li:first-child {border-left: 1px solid var(--border);}
.lab_director .director_info .direction_info_list > li h4 {margin: 0 0 8px;}
.lab_director .director_info .direction_info_list > li .dot_list {display: flex; flex-direction: column; gap: 6px;}

.lab_img .lab_img_main {margin-bottom: 50px;}
.lab_img .lab_img_main img {width: 100%; min-height: 250px; object-fit: cover;}
.lab_img .lab_img_list li {border-radius: var(--borderR20); overflow: hidden; aspect-ratio: 1/1;}
.lab_img .lab_img_list li img {width: 100%; height: 100%; object-fit: cover;}

.lab_info article {display: flex; align-items: center;}
.lab_info article + article {margin-top: 30px;}
.lab_info article .imgbox {width: 50%; max-width: 750px; flex-shrink: 0; border-radius: var(--borderR280) var(--borderR20) var(--borderR280) var(--borderR20); overflow: hidden;}
.lab_info article .imgbox img {width: 100%;}
.lab_info article .txtbox {flex: 1; padding-left: 80px;}
.lab_info article .txtbox h4 {margin-bottom: 40px;}
.lab_info article .txtbox mark {background: rgba(196, 211, 178, 0.6); line-height: inherit; color: inherit;}

.lab_info article .txtbox ol {display: flex; flex-direction: column; gap: 12px; counter-reset: lab-info;}
.lab_info article .txtbox ol li {position: relative; padding-left: 38px; counter-increment: lab-info;}
.lab_info article .txtbox ol li::before {content: "0"counter(lab-info); display: flex; width: 28px; height: 28px; justify-content: center; align-items: center; aspect-ratio: 1/1; border-radius: 50%; background: var(--main); color: var(--white); font-family: var(--eng); font-size: 1rem; font-weight: 500; line-height: 166.667%; position: absolute; left: 0; top: 0;}
.lab_info article .txtbox ol li h5 {margin-bottom: 2px;}


.lab_info article:nth-child(2n) {flex-direction: row-reverse;}
.lab_info article:nth-child(2n) .imgbox {border-radius: var(--borderR20) var(--borderR280) var(--borderR20) var(--borderR280);}
.lab_info article:nth-child(2n) .txtbox {padding-left: 0; padding-right: 80px;}


/* 오시는 길  / 시설 안내 */
.basic_cont:has(.location_cont) {width: 100%; max-width: 100%; margin-bottom: 0;}

.location_page .location_page_top {margin-bottom: 50px;}
.location_page .location_page_top span {line-height: inherit;}

.location_page .location_img {display: flex; margin-bottom: 30px;}
.location_page .location_img .imgbox {width: 50%; flex-shrink: 0; border-radius: var(--borderR20); overflow: hidden;}
.location_page .location_img .imgbox img {width: 100%;}

.location_page .location_txt {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 10px; margin-bottom: 80px;}
.location_page .location_page_info {display: flex; flex-wrap: wrap; gap: 10px 30px;}
.location_page .location_page_info dl {display: flex; gap: 8px; align-items: flex-start;}
.location_page .location_page_info dl:first-child {width: 100%; gap: 6px;}
.location_page .location_page_info dl dt.before_icon {display: flex; color: var(--black); height: 34px; align-items: center;}
.location_page .location_page_info dl dt.before_icon::before {content: '\e0c8'; font-size: 30px;}

.location_page .location_link {display: flex; gap: 4px; flex-shrink: 0;}
.location_page .location_link a {display: flex; width: 165px; padding: 15px 20px; justify-content: space-between; align-items: center; border-radius: 10px; border: 1px solid;}
.location_page .location_link a .location_link_icon {position: relative; display: flex;}
.location_page .location_link a .location_link_icon img {transition: all 0.7s cubic-bezier(0.215,0.61,0.355,1);}

.location_page .location_link a.naver {background: #10d265; border-color: #10d265;}
.location_page .location_link a.kakao {background: #FEDA0D; color: #1A0000; border-color: #FEDA0D;}

.location_page .location_link a.naver .location_link_icon img:last-child {opacity: 0; position: absolute; left: 0; top: 0;}

.location_page .location_link a:hover {background: var(--white) !important;}

.location_page .location_link a.naver:hover {color: #10d265; border-color: #10d265;}
.location_page .location_link a.naver:hover .location_link_icon img:first-child {opacity: 0;}
.location_page .location_link a.naver:hover .location_link_icon img:last-child {opacity: 1;}
.location_page .location_link a.kakao:hover {border-color: #1A0000;}

.location_page .direction > ul > li {padding: 50px 50px 140px 50px; border-radius: var(--borderR20); border: 1px solid var(--border); background: var(--white); position: relative;}
.location_page .direction > ul > li .iconbox {position: absolute; right: 50px; bottom: 40px;}
.location_page .direction > ul > li h4 {margin: 0 0 20px;}
.location_page .direction > ul > li.subway .subway_img {display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-bottom: 15px;}
.location_page .direction > ul > li.subway .subway_img img {width: 100%;}
.location_page .direction > ul > li.subway .dot_list {display: flex; flex-direction: column; gap: 6px;}



.location_cont .facility {overflow: hidden;}
.location_cont .facility .basic_in {overflow: visible;}
.location_cont .facility .cate_tab {margin: 50px auto;}
.location_cont .facility .cate_tab ul {display: flex; justify-content: center;}
.location_cont .facility .cate_tab ul li {width: auto; margin: 2px;}
.location_cont .facility .cate_tab ul li a {display: block; min-width: 220px; border-radius: 9999px; box-sizing: border-box; padding: 15px 10px; text-align: center; border: 1px solid var(--border); font-size: 1rem; letter-spacing: var(--letter-spacing-button); font-weight: 400; color: var(--basic); transition: all .3s; background: var(--white);}
.location_cont .facility .cate_tab ul li a:hover {color: var(--main); border-color: var(--main);}
.location_cont .facility .cate_tab ul li.hover a {background: var(--main) !important; border-color: var(--main) !important; color: var(--white) !important; font-weight: 800;}

.location_cont .facility .place_swiper {position: relative; width: 100%; max-width: 900px; margin: 0 auto; display: none;}
.location_cont .facility .place_swiper.on {display: block;}
.location_cont .facility .place_swiper .swiper {overflow: visible;}
.location_cont .facility .place_swiper .swiper-slide {width: 900px; height: auto; position: relative; display: flex; flex-direction: column; transition: transform 0.4s ease;}
.location_cont .facility .place_swiper .swiper-slide:not(.swiper-slide-active) .imgbox {transform: translateY(100px); transition: transform 0.4s ease, border-radius 0.4s ease;}
.location_cont .facility .place_swiper .swiper-slide.swiper-slide-active .imgbox {transform: translateY(0);}
.location_cont .facility .place_swiper .swiper-slide .imgbox {border-radius: var(--borderR20); overflow: hidden; flex-shrink: 0; transition: transform 0.4s ease, border-radius 0.4s ease;}
.location_cont .facility .place_swiper .swiper-slide.swiper-slide-active .imgbox {border-radius: var(--borderR180) var(--borderR20) var(--borderR180) var(--borderR20);}
.location_cont .facility .place_swiper .swiper-slide .imgbox img {width: 100%; height: auto; display: block; object-fit: cover;}
.location_cont .facility .place_swiper .swiper-slide .btn_wrap {margin: 40px auto 0; width: fit-content; flex: 1; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 0 45px; text-align: center;}
.location_cont .facility .place_swiper .swiper-slide-active .btn_wrap {opacity: 1; visibility: visible;}
.location_cont .facility .place_swiper .place_ctrl {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 900px; max-width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none;}
.location_cont .facility .place_swiper .place_ctrl a {display: flex; align-items: center; color: var(--basic); opacity: 0.6; pointer-events: auto; transition: opacity 0.3s ease;}
.location_cont .facility .place_swiper .place_ctrl a:hover {opacity: 1;}
.location_cont .facility .place_swiper .place_ctrl a::before {font-size: 34px;}
.location_cont .facility .place_swiper .place_ctrl .place_prev::before {content: '\f1e6';}
.location_cont .facility .place_swiper .place_ctrl .place_next::before {content: '\f1df';}

/*******************************************************************************
    @media ~1700px
*******************************************************************************/
@media all and (max-width:1700px){
/* 인사말 */
.greeting_cont br {display: none;}

/* 난임의학 연구소 */
.lab_director br {display: none;}

.lab_info br {display: none;}
}

/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* 오시는 길  / 시설 안내 */
.location_cont .facility .place_swiper .swiper-slide {width: 800px;}
.location_cont .facility .place_swiper .place_ctrl {width: 800px;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 인사말 */
.greeting_cont {align-items: flex-start;}
.greeting_cont .txtbox {padding-left: 50px;}
.greeting_cont .imgbox .imgitem:first-child::before {top: 20px; right: 10px;}

/* 오시는 길  / 시설 안내 */
.location_page .direction > ul > li br {display: none;}
.location_page .direction > ul {gap: 15px;}
.location_page .direction > ul > li {padding: 35px 35px 130px 35px;}
.location_page .direction > ul > li .iconbox {right: 35px; bottom: 30px;}
.location_page .direction > ul > li .iconbox img {width: 80px; height: auto;}

.location_page .direction > ul > li.subway .subway_img {grid-template-columns: 1fr;}

.location_cont .facility .place_swiper .swiper-slide {width: 700px;}
.location_cont .facility .place_swiper .place_ctrl {width: 700px;}

/* 난임의학 연구소 */
.lab_director .fs32 {font-size: 1.6rem;}
.lab_director .director_info .director_info_top .txtbox {padding: 40px 90px 40px 50px;}
.lab_director .director_info .director_info_top::after {width: 80px;}

.lab_director .director_info .direction_info_list > li {padding: 10px 30px 0;}

.lab_img .lab_img_list {gap: 15px;}

.lab_info article {align-items: flex-start;}
.lab_info article .txtbox {padding-left: 50px;}
.lab_info article .txtbox h4 {margin-bottom: 25px; font-size: 1.6rem;}

.lab_info article:nth-child(2n) .txtbox {padding-right: 50px;}
}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){
/* 인사말 */
.greeting_cont .imgbox .imgitem:first-child {padding-top: 50px;}
.greeting_cont .imgbox .imgitem:first-child::before {top: 0;}
.greeting_cont .txtbox {padding-left: 30px;}
.greeting_cont .txtbox .txtbox_head {margin-bottom: 15px;}
.greeting_cont .txtbox h3 {font-size: 2.2rem; margin-bottom: 15px;}
.greeting_cont .txtbox .txtbox_body {margin-bottom: 35px;}

/* 오시는 길  / 시설 안내 */
.location_page .location_page_top {margin-bottom: 30px;}
.location_page .location_img {margin-bottom: 20px;}
.location_page .location_txt {flex-wrap: wrap; margin-bottom: 50px;}
.location_page .location_page_info {gap: 5px 20px;}
.location_page .location_page_info dl dt.before_icon {height: 30px;}
.location_page .location_page_info dl dt.before_icon::before {font-size: 26px;}

.location_page .location_link a {width: 140px; padding: 10px 15px; border-radius: 5px;}
.location_page .location_link a img {width: 18px;}

.location_page .direction > ul {gap: 10px;}
.location_page .direction > ul > li {padding: 25px 25px 115px 25px;}
.location_page .direction > ul > li h4 {font-size: 1.3rem; margin-bottom: 10px;}
.location_page .direction > ul > li .dot_list {gap: 3px;}
.location_page .direction > ul > li .iconbox {bottom: 20px; right: 25px;}
.location_page .direction > ul > li .iconbox img {width: 70px;}

.location_cont .facility .cate_tab {margin: 30px auto;}
.location_cont .facility .cate_tab ul li a {min-width: 140px; padding: 10px;}
.location_cont .facility .place_swiper .swiper {overflow: hidden;}
.location_cont .facility .place_swiper .swiper-slide {width: 100%;}
.location_cont .facility .place_swiper .swiper-slide .imgbox {border-radius: var(--borderR180) var(--borderR20) var(--borderR180) var(--borderR20) !important; transform: translateY(0) !important;}
.location_cont .facility .place_swiper .swiper-slide .btn_wrap {margin-top: 30px;}
.location_cont .facility .place_swiper .place_ctrl {width: 100%;}
.location_cont .facility .place_swiper .place_ctrl a::before {font-size: 30px;}

/* 난임의학 연구소 */
.lab_director .fs32 {font-size: 1.5rem;}
.lab_director .fs22 {font-size: 1.1rem;}

.lab_director .director_info {margin-top: 30px;}
.lab_director .director_info .director_info_top {margin-bottom: 40px;}
.lab_director .director_info .director_info_top::after {width: 60px;}
.lab_director .director_info .director_info_top .txtbox {padding: 30px 70px 30px 35px;}
.lab_director .director_info .director_info_top .txtbox h4 {margin-bottom: 10px;}
.lab_director .director_info .director_info_top .txtbox .cont_tit {margin-bottom: 10px;}
.lab_director .director_info .director_info_top .txtbox .cont_body p + p {margin-top: 6px;}

.lab_director .director_info .direction_info_list > li {padding: 5px 20px;}

.lab_director .director_info .direction_info_list > li h4 {margin-bottom: 5px;}
.lab_director .director_info .direction_info_list > li .dot_list {gap: 3px;}

.lab_img .lab_img_main {margin-bottom: 30px;}
.lab_img .lab_img_list {gap: 10px;}

.lab_info article .txtbox {padding-left: 30px;}
.lab_info article .txtbox h4 {margin-bottom: 15px;}
.lab_info article .txtbox ol {gap: 8px;}
.lab_info article .txtbox ol li {padding-left: 34px;}
.lab_info article .txtbox ol li::before {width: 26px; height: 26px;}

.lab_info article:nth-child(2n) .txtbox {padding-right: 30px;}
}

/*******************************************************************************
    @media ~768px
*******************************************************************************/
@media all and (max-width:768px){
/* 난임의학 연구소 */
.lab_director .director_info .director_info_top {display: block;}
.lab_director .director_info .director_info_top .imgbox {width: 100%; max-width: 100%;}

.lab_info article {display: block;}
.lab_info article .imgbox {width: 100%; max-width: 100%; margin-bottom: 20px;}
.lab_info article .txtbox {padding-left: 0; padding-right: 0 !important;}
}

/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 인사말 */
.greeting_cont span {line-height: inherit;}
.greeting_cont {flex-direction: column; gap: 30px;}
.greeting_cont .imgbox,
.greeting_cont .txtbox {flex: auto; width: 100%; max-width: 100%;}
.greeting_cont .txtbox {padding-left: 0;}
.greeting_cont .txtbox h3 {margin-bottom: 5px;}
.greeting_cont .txtbox .txtbox_head {margin-bottom: 10px;}
.greeting_cont .txtbox .txtbox_body {margin-bottom: 25px; gap: 5px;}

/* 오시는 길  / 시설 안내 */
.location_page .location_img {flex-direction: column;}
.location_page .location_img .imgbox {width: 100%;}
.location_page .location_txt {margin-bottom: 30px; gap: 10px;}
.location_page .location_page_info dl:first-child {gap: 4px;}
.location_page .location_page_info dl dt.before_icon {height: 27px;}
.location_page .location_page_info dl dt.before_icon::before {font-size: 22px;}

.location_page .location_link {width: 100%;}
.location_page .location_link a {padding: 8px 10px; width: 50%;}
.location_page .location_link a img {width: 16px;}

.location_page .direction > ul {grid-template-columns: 1fr;}
.location_page .direction > ul > li {padding: 20px 20px 95px 20px;}
.location_page .direction > ul > li span {line-height: inherit;}
.location_page .direction > ul > li .iconbox {right: 20px; bottom: 20px;}
.location_page .direction > ul > li .iconbox img {width: 60px;}

.location_page .direction > ul > li.subway .subway_img {grid-template-columns: repeat(2,1fr); margin-bottom: 5px;}

.location_cont .facility .place_swiper .place_ctrl a::before {font-size: 28px;}

.location_cont .facility .cate_tab ul li a {min-width: 120px; padding: 8px;}

/* 난임의학 연구소 */
.lab_director span {line-height: inherit;}
.lab_director .director_info .director_info_top::after {width: 50px;}
.lab_director .director_info .director_info_top .txtbox {padding: 20px 60px 20px 25px;}
.lab_director .director_info .director_info_top .txtbox h4 {margin-bottom: 5px;}
.lab_director .director_info .director_info_top .txtbox .cont_tit {margin-bottom: 5px;}
.lab_director .director_info .director_info_top .txtbox .cont_body p + p {margin-top: 3px;}
.lab_director .director_info .direction_info_list {grid-template-columns: 1fr;}
.lab_director .director_info .direction_info_list > li {border-right: 0 !important; border-left: 0 !important; padding: 15px 0; border-bottom: 1px solid var(--border);}
.lab_director .director_info .direction_info_list > li:first-child {border-top: 1px solid var(--border);}

.lab_info article .imgbox {margin-bottom: 15px;}
.lab_info article .txtbox ol {gap: 5px;}
.lab_info article .txtbox ol li::before {width: 23px; height: 23px;}
.lab_info article .txtbox ol li {padding-left: 31px;}
.lab_info article .txtbox ol li h5 {margin-bottom: 0;}
}

/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
/* 오시는 길  / 시설 안내 */
.location_page .direction > ul > li.subway .subway_img {grid-template-columns: 1fr;}

/* 난임의학 연구소 */
.lab_img .lab_img_list {grid-template-columns: repeat(2, 1fr);}
}

/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}