@charset "utf-8";

/*───────────────────────────────────────────────────────────

    서브 공통(희망안과, 클리닉 소개, 둘러보기, 이용아내)

───────────────────────────────────────────────────────────*/

body:has(.sub_about, .sub_intro, .sub_service, .sub_medi) .sub_visual { background-image: url('../images/sub/sv_about.jpg') !important; }
body:has(.sub_time, .sub_location) .sub_visual { background-image: url('../images/sub/sv_guide.jpg') !important; }
body:has(.sub_tours) .sub_visual { background-image: url('../images/sub/sv_tour.jpg') !important; }
.hd_title { font-size: var(--title-20); font-family: var(--font-type02); color: var(--black-color00);   }
.hd_title h3 { font-size: 230%; font-weight: 600; letter-spacing: -0.03em; line-height: 1.56; color: inherit; }
.hd_title h3 em { color: var(--point-color01); font-weight: inherit; }
.point_bg { background: var(--point-color04); }

#container:has(.full_sec) { padding: 0 !important; }

.desc { font-size: var(--title-20); }
.desc p { color: var(--black-color00); font-weight: 400; font-size: 90%; line-height: 1.89; letter-spacing: -0.04em; }
.g30 { gap: 30px; }
.g25 { gap: 25px; }
.g20 { gap: 20px; }
.flex_col { display: flex; flex-direction: column; }
.flex_des { display: flex; }
.flex_rev { display: flex; flex-direction: row-reverse; }

.slogan_wrap { font-size: var(--title-20); font-family: var(--font-type02); color: var(--black-color00) }
.slogan_wrap h4 { font-size: 200%; font-weight: 400; line-height: 1.7; letter-spacing: -0.03em; color: inherit; }
.slogan_wrap h4 em { font-weight: 700; }

.page_title { font-size: var(--title-20); font-family: var(--font-type02); color: var(--black-color00); text-align: center; box-sizing: border-box; padding-block: 92px 54px; }
.page_title h3 { font-size: 230%; font-weight: 600; letter-spacing: -0.03em; color: inherit; }

.bullet { display: flex; align-items: baseline; gap: 18px; }
.bullet::before { content: ''; display: block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 100%; background: var(--point-color10); translate: 0 -6px; }


@media (max-width: 1023px) { 
    .hd_title h3 { font-size: clamp(23px, 4.6vw, 46px); }
    .g30 { gap: clamp(15px, 3vw, 30px); }
    .g25 { gap: clamp(15px, 2.5vw, 25px); }
    .g20 { gap: clamp(15px, 2vw, 20px); }
    .slogan_wrap h4 { font-size: clamp(20px, 4vw, 40px); }
    .page_title { padding-block: clamp(50px, 10vw, 92px) clamp(30px, 5vw, 54px); }
    .page_title h3 { font-size: clamp(23px, 4.6vw, 46px); }

    .bullet { gap: clamp(8px, 1.8vw, 18px); }
}


@media (max-width: 860px) {
    
    .bullet::before { width: 5px; height: 5px; translate: 0 -4px; }
}


/*───────────────────────────────────────────────────────────

    인사말

───────────────────────────────────────────────────────────*/
.sub_about { padding-block: 119px 185px; box-sizing: border-box; }

.sub_about .about_banner { font-size: var(--title-20); padding-block: 230px 232px; padding-inline: 20px; box-sizing: border-box; background: url('../images/sub/img_about01.jpg') no-repeat center / cover; text-align: center; margin-block: 81px 99px; }
.sub_about .about_banner p { filter: var(--filter-white); font-size: 150%; font-weight: 500; line-height: 1.54; letter-spacing: -0.03em; }
.sub_about .desc { text-align: center; }
.sub_about .line { margin-block: 81px 99px; width: 1px; height: 100px; background: var(--black-color03); margin-inline: auto; }
.sub_about .slogan_wrap { position: relative; text-align: center; }
.sub_about .slogan_wrap::before { content: ''; position: absolute; left: 48%; top: 14.5%; translate: -50% -50%; width: 521px; aspect-ratio: 1.55; background: url('../images/sub/ico_about01.svg') no-repeat center / 100% auto; }

@media (max-width: 1023px) { 
    .sub_about { padding-block: clamp(45px, 12vw, 119px) clamp(100px, 18vw, 185px);  }
    .sub_about .about_banner { margin-block: clamp(40px, 8vw, 81px) clamp(45px, 10vw, 99px); padding-block: clamp(80px, 23vw, 230px) clamp(80px, 23vw, 232px); }
    .sub_about .about_banner p { font-size: clamp(18px, 3vw, 30px); }
    .sub_about .line { margin-block: clamp(40px, 8vw, 81px) clamp(45px, 10vw, 99px); height: clamp(50px, 10vw, 100px); }
    .sub_about .slogan_wrap::before { width: clamp(220px, 52vw, 521px); }
}

/*───────────────────────────────────────────────────────────

    치료진

───────────────────────────────────────────────────────────*/

.sub_intro { box-sizing: border-box; padding-bottom: 138px;  }
.sub_intro .profile { box-sizing: border-box; padding-top: 136px; }
.sub_intro .profile .flex_des { box-sizing: border-box; padding-inline: 50px; align-items: flex-end; }
.sub_intro .profile .img_wrap { width: 100%; max-width: 420px; position: relative; z-index: 2; }
.sub_intro .profile .img_wrap img { filter: drop-shadow(var(--shadow-03)); }
.sub_intro .profile .text_wrap { width: calc(100% - 420px); box-sizing: border-box; padding-left: clamp(40px, 7vw, 131px); padding-bottom: 101px; }
.sub_intro .profile .hd_title { position: relative; width: fit-content; }
.sub_intro .profile .hd_title h3 { font-size: clamp(30px, 3.5vw, 46px); }
.sub_intro .profile .hd_title::before, .sub_intro .profile .hd_title::after { content: ''; position: absolute; width: 26px; aspect-ratio: auto 1.3;  }
.sub_intro .profile .hd_title::before { background: url('../images/sub/img_textdeco01.png') no-repeat center / 100% auto; left: -4.8%; top: -4%; translate: -50% -50%; }
.sub_intro .profile .hd_title::after { background: url('../images/sub/img_textdeco02.png') no-repeat center / 100% auto; right: -4.8%; bottom: 40%; translate: 50% 50%; }
.sub_intro .profile .bio { position: relative; box-sizing: border-box; margin-top: 61px; padding-top: 57px; font-size: var(--title-20); gap: 29px; }
.sub_intro .profile .bio::before { content: ''; position: absolute; top: 0; right: -50px; width: 155%; height: 1px; background: var(--gray-bg04); }
.sub_intro .profile .bio h4 { color: var(--black-color00); font-weight: 600; font-size: 120%; letter-spacing: -0.03em; }
.sub_intro .profile .bio .desc { columns: 2; column-gap: 0; box-sizing: border-box; padding-left: 3px; }
.sub_intro .profile .bio .desc li { display: flex; align-items: baseline; gap: 6px; box-sizing: border-box; padding-right: 20px; }
.sub_intro .profile .bio .desc li + li { margin-top: 2px; }
.sub_intro .profile .bio .desc li::before { content: '·'; }
.sub_intro .profile .bio .desc p { font-size: 100%; }

.sub_intro .intro_wrap { box-sizing: border-box; padding-top: 99px; }
.sub_intro .intro_wrap .name { font-size: var(--title-20); margin-top: 47px; }
.sub_intro .intro_wrap .name h4 { color: var(--black-color03); font-weight: 500; font-size: 110%; letter-spacing: -0.03em; align-items: center; }
.sub_intro .intro_wrap .name h4 em { color: var(--point-color01); font-size: 136%; font-family: var(--font-type02); font-weight: 700; }

@media (max-width: 1240px) { 
    .sub_intro .profile .flex_des { padding-inline: 0; }
}

@media (max-width: 1023px) {
    .sub_intro { padding-bottom: clamp(70px, 14vw, 138px); }
    .sub_intro .profile { padding-top: clamp(60px, 13vw, 136px); }
    .sub_intro .profile .flex_des { flex-direction: column; align-items: flex-start; gap: clamp(40px, 8vw, 80px); }
    .sub_intro .profile .text_wrap { width: 100%; padding-left: 0;  padding-bottom: clamp(50px, 10vw, 101px); }
    .sub_intro .profile .hd_title h3 { font-size: clamp(23px, 4.6vw, 46px);  }
    .sub_intro .profile .hd_title::before, .sub_intro .profile .hd_title::after { width: clamp(13px, 2.6vw, 26px); }
    .sub_intro .profile .hd_title::before { left: 2%; }
    .sub_intro .profile .bio { margin-top: clamp(20px, 6vw, 61px); padding-top: clamp(20px, 6vw, 57px); gap: clamp(15px, 3vw, 29px); }
    .sub_intro .profile .bio .desc { display: flex; flex-direction: column; }
    .sub_intro .profile .bio::before { width: 100%; right: 0; }

    .sub_intro .intro_wrap { padding-top: clamp(50px, 10vw, 99px); }
    .sub_intro .intro_wrap .name { margin-top: clamp(30px, 5vw, 47px); }
}

@media (max-width: 640px) {
    .sub_intro .profile .img_wrap { width: 70%; max-width: 294px; margin-inline: auto; }
}

@media (max-width: 350px){
    .sub_intro .profile .hd_title { margin: 0; }
    .sub_intro .profile .hd_title::after { right: 0; bottom: -5%; }
}


/*───────────────────────────────────────────────────────────

    진료시간

───────────────────────────────────────────────────────────*/

.sub_time .flex_des { flex-wrap: nowrap; }
.sub_time .flex_des li { position: relative; width: 100%; text-align: center; box-sizing: border-box; border-radius: var(--radius-10); overflow: clip; }
.sub_time .flex_des li::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--border-color01); box-sizing: border-box; border-radius: inherit; }
.sub_time .flex_des dl { font-size: var(--title-20); position: relative; z-index: 2; }
.sub_time .flex_des dt { background: var(--point-color01); font-size: 100%; font-weight: 600; letter-spacing: -0.03em; box-sizing: border-box; padding-block: 23px 21px; padding-inline: 20px; position: relative; z-index: 2; }
.sub_time .flex_des dt span { filter: var(--filter-white); }
.sub_time .flex_des dd { color: var(--black-color03); font-weight: 500; font-size: 100%; letter-spacing: -0.04em; box-sizing: border-box; padding-block: 37px; padding-inline: 20px; }

.sub_time .day_off { text-align: center; font-size: var(--title-20); box-sizing: border-box; padding-block: 32px; padding-inline: 20px; margin-top: 40px; background: var(--point-color06); border-radius: var(--radius-10); }
.sub_time .day_off strong { color: var(--point-color01); font-size: 100%; font-weight: 500; letter-spacing: -0.04em; }


@media (max-width: 1023px) {
    .sub_time .flex_des dt { padding-block: clamp(15px, 2.5vw, 23px) clamp(15px, 2.5vw, 21px); }
    .sub_time .flex_des dd { padding-block: clamp(20px, 4vw, 37px); }

    .sub_time .day_off { margin-top: clamp(30px, 4vw, 40px); padding-block: clamp(25px, 3vw, 32px); }
}

@media (max-width: 860px) {
    .sub_time .flex_des { flex-direction: column; }
}


/*───────────────────────────────────────────────────────────

    오시는길

───────────────────────────────────────────────────────────*/

#container:has(.sub_location) { padding-bottom: 0; }

.sub_location .map_wrap { width: 49.22%; flex-shrink: 0; border-radius: var(--radius-10); overflow: clip; }
.sub_location .map_img { width: 50.78%; }
.sub_location .map_img li { width: 100%; border-radius: var(--radius-10); overflow: clip; }
.sub_location .map_info { margin-top: 71px; }
.sub_location .office_title { width: 26.56%; flex-shrink: 0; box-sizing: border-box; padding-right: 20px; }
.sub_location .office_title .img_wrap { translate: 0 -1px; }
.sub_location .office_info { width: 73.44%; }
.sub_location .office_info li + li { margin-top: 40px; box-sizing: border-box; padding-top: 41px; border-top: 1px solid var(--border-color01); }
.sub_location .office_info dl { font-size: var(--title-20); }
.sub_location .office_info dt { width: 142px; box-sizing: border-box; padding-right: 20px; color: var(--black-color02); font-weight: 500; font-size: 100%; line-height: 1.2; letter-spacing: -0.03em; }
.sub_location .office_info dd { width: calc(100% - 142px); color: var(--black-color05); font-weight: 400; font-size: 90%; line-height: 1.34; letter-spacing: -0.03em; font-family: var(--font-type03); }
.sub_location .office_info dd span { display: block; }
.sub_location .office_info dd span + span { margin-top: 10px; }

.sub_location .sec_item { font-size: var(--title-20); }
.sub_location .trans_sec { margin-top: 119px; box-sizing: border-box; padding-block: 120px; }
.sub_location .trans_sec li + li { margin-top: 80px; }
.sub_location .trans_info { box-sizing: border-box; padding-block: 28px 30px; padding-inline: 30px; font-size: var(--title-20); background: var(--point-white); border: 1px solid var(--border-color01); border-radius: var(--radius-10); margin-top: 23px; }
.sub_location .trans_info p { color: var(--black-color03); font-weight: 400; font-size: 90%; line-height: 1.89; letter-spacing: 0; }
.sub_location .trans_info .img_wrap { width: 50.9%; flex-shrink: 0; border-radius: var(--radius-10); overflow: clip; }
.sub_location .trans_info.flex_des { gap: 30px 70px; align-items: center;  }
.sub_location .trans_info.flex_des p { width: calc(49.1% - 70px); }

@media (max-width: 1023px) {
    .sub_location .map_info { margin-top: clamp(40px, 7vw, 70px); }
    .sub_location .office_info li + li { margin-top: clamp(20px, 4vw, 40px); padding-top: clamp(20px, 4vw, 40px); }
    .sub_location .office_info dt { width: clamp(128px, 14vw, 142px); }
    .sub_location .office_info dd { width: calc(100% - clamp(128px, 14vw, 142px)); }
    .sub_location .office_info dd span + span { margin-top: clamp(5px, 1vw, 10px); }

    .sub_location .trans_sec { margin-top: clamp(60px, 12vw, 119px); padding-top: clamp(60px, 12vw, 120px); padding-bottom: clamp(60px, 12vw, 120px); }
    .sub_location .trans_sec li + li { margin-top: clamp(40px, 8vw, 80px); }
    .sub_location .trans_info { margin-top: clamp(17px, 2.3vw, 23px); padding-block: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px); padding-inline: clamp(20px, 3vw, 30px); }
    .sub_location .trans_info.flex_des { gap: clamp(20px, 3vw, 30px); flex-direction: column; }
    .sub_location .trans_info .img_wrap { width: 100%; }
    .sub_location .trans_info.flex_des p { width: 100%; }
}

@media (max-width: 860px) {
    .sub_location .map_cont { flex-direction: column; }
    .sub_location .map_wrap { width: 100%; height: clamp(350px, 50vw, 700px); }
    .sub_location .map_img { width: 100%; flex-direction: row; }
}

@media (max-width: 640px) {
    .sub_location .map_info > .flex_des { flex-direction: column; gap: clamp(20px, 4vw, 40px); }
    .sub_location .office_title { width: 100%; padding-right: 0; }
    .sub_location .office_info { width: 100%; }
    .sub_location .map_img { width: 100%; flex-direction: column; }
}

@media (max-width: 479px) {
    .sub_location .office_info dl { flex-direction: column; gap: 15px; }
    .sub_location .office_info dt { width: 100%; }
    .sub_location .office_info dd { width: 100%; }
    .sub_location .office_title .img_wrap img { width: 160px; }
}


/*───────────────────────────────────────────────────────────

    둘러보기

───────────────────────────────────────────────────────────*/

.sub_tours { box-sizing: border-box; padding-top: 140px; }

.sub_tours .flex_col { gap: 200px; counter-reset: num 0; }
.sub_tours .flex_col > li { position: relative; align-items: center; }
.sub_tours .flex_col .w_custom { position: absolute; left: 50%; translate: -50% 0; }

.sub_tours .flex_col dl { font-size: var(--title-20); width: fit-content; }
.sub_tours .flex_col .flex_rev dl { margin-right: auto; }
.sub_tours .flex_col dt { color: var(--black-color03); font-weight: 600; font-size: 200%;  line-height: 1.5; letter-spacing: -0.03em; font-family: var(--font-type02); }
.sub_tours .flex_col dt::before { content: counter(num, decimal-leading-zero); counter-increment: num 1; font-size: var(--title-20); font-weight: 500; color: var(--point-color01); letter-spacing: -0.03em; margin-bottom: 20px; display: block; font-family: var(--font-type01); }
.sub_tours .flex_col dd { color: var(--black-color03); font-weight: 400; font-size: 80%; line-height: 1.75; letter-spacing: -0.03em; margin-top: 30px; }

.sub_tours .swiper_wrap img { min-height: 250px; object-fit: cover; }

.sub_tours .swiper_wrap { overflow: hidden; width: 60%; max-width: 1120px; position: relative; }
.sub_tours .swiper_wrap .swp_arw_wrap { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; padding-inline: 19px; z-index: 5; }
.sub_tours .swiper_wrap .swp_arw_wrap > div { width: 32px; height: 62px; cursor: pointer; }
.sub_tours .swiper_wrap .swp_arw_wrap > div::before { content: ''; display: block; width: 100%; height: 100%; }
.sub_tours .swiper_wrap .swp_arw_wrap .swp_prev::before { background: url('../images/sub/img_swp_prev.png') no-repeat center / 100% auto; }
.sub_tours .swiper_wrap .swp_arw_wrap .swp_next::before { background: url('../images/sub/img_swp_next.png') no-repeat center / 100% auto; }
.sub_tours .swiper_wrap .swp_arw_wrap .swiper-button-disabled { opacity: 0.6; }

.sub_tours .swiper_wrap .swp_pagi { position: absolute; left: 0; bottom: 35px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 20px; }
.sub_tours .swiper_wrap .swp_pagi .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--point-white); opacity: 0.5; transition: all 0.4s; margin: 0; }
.sub_tours .swiper_wrap .swp_pagi .swiper-pagination-bullet-active { opacity: 1; width: 10px; height: 10px; }

.sub_tours .flex_col .flex_des .w_custom { position: static; width: inherit; translate: 0; margin-inline: 100px auto; }
.sub_tours .flex_col .flex_des .swiper_wrap { flex-shrink: 0; }


@media (max-width: 1023px) {
    .sub_tours { padding-top: clamp(90px, 14vw, 140px); }
    .sub_tours .flex_col { gap: clamp(80px, 16vw, 200px); }
    .sub_tours .flex_col > li { flex-direction: column; gap: clamp(30px, 6vw, 60px); }
    .sub_tours .swiper_wrap { width: calc(100% - 60px); }
    .sub_tours .swiper_wrap .swp_pagi { bottom: clamp(20px, 3vw, 35px); gap: clamp(15px, 2vw, 20px); }
    .sub_tours .swiper_wrap .swp_arw_wrap > div { width: clamp(16px, 3vw, 32px); height: clamp(36px, 6vw, 62px); }
    .sub_tours .flex_col .w_custom { position: static; translate: 0; }
    .sub_tours .flex_col dt { font-size: clamp(25px, 4vw, 40px); }
    .sub_tours .flex_col dt::before { margin-bottom: clamp(7px, 1.5vw, 20px); }
    .sub_tours .flex_col dd { margin-top: clamp(15px, 2vw, 30px); }
    .sub_tours .flex_col dd br { display: none; }
    .sub_tours .flex_col .flex_des .w_custom { width: calc(100% - 60px); margin-inline: auto; }
}


@media (max-width: 860px) {
    .sub_tours .swiper_wrap { width: calc(100% - 30px); }
    .sub_tours .flex_col .flex_des .w_custom { width: calc(100% - 30px);}
}

@media (max-width: 479px) {
    .sub_tours .swiper_wrap .swp_pagi .swiper-pagination-bullet { width: 6px; height: 6px; }
    .sub_tours .swiper_wrap .swp_pagi .swiper-pagination-bullet-active { width: 8px; height: 8px; }
}





.sub_medi h4 { font-size: var(--title-20); color: var(--black-color03); display: flex; justify-content: space-between; margin-bottom: 20px; }
.sub_medi h4 span { font-weight: 500; }
.sub_medi h4 small { font-weight: 400; }
.sub_medi .scr_wrap{overflow: hidden;overflow-x: auto;width: calc(100% + 60px);margin-left: -30px;}
.sub_medi .scr_wrap .prod_table{min-width: 950px;padding-inline: 30px;}
.sub_medi .prod_table{position: relative;width: 100%;box-sizing: border-box;border-radius: var(--radius-10);overflow: hidden;}
.sub_medi .prod_table table{position: relative;width: 100%;box-sizing: border-box;font-size: var(--title-20);text-align: center;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: inherit;overflow: hidden;}
.sub_medi .prod_table thead th{font-size:inherit;font-weight: 500;color: var(--point-white);background: var(--black-color01);padding: 12px 7px;line-height: 1.3;box-shadow: -1px 0 0 rgba(255,255,255,0.4);}
.sub_medi .prod_table thead th small{display: block;font-size: max(12px, 80%);font-weight: 300;letter-spacing: 0;}
.sub_medi .prod_table tbody :where(th, td){font-size: 90%;line-height: 1.78;padding: 8px 8px;box-shadow: -1px 1px 0 0px var(--border-color01);}
.sub_medi .prod_table tbody th{font-weight: 500; color: var(--black-color03);  }
.sub_medi .prod_table tbody td{font-weight: 400;color: var(--black-color06);}