@charset "UTF-8"; /* */

/* 공통 스타일 */
@font-face { font-family: 'KimJeongCheolGothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } 

@font-face { font-family: 'KimJeongCheolGothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } 

@font-face { font-family: 'KimJeongCheolGothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } 

* { margin:0; padding:0; box-sizing:border-box; word-break: keep-all; font-family: "KimJeongCheolGothic", sans-serif; letter-spacing: -.05rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color:var(--303030); } 
a { text-decoration:none; color: inherit; } 
ul, li { list-style:none; } 


:root { font-size: 6px; --main1: #3a37c1; --red:#e00000; --303030:#303030; --light_main1:#f1f0fb; --white: #fff; } 

::selection { color: #fff; background-color: var(--main1); } 
/* ::-webkit-scrollbar { width: 1.5rem; background: #e9e9e9; } 
::-webkit-scrollbar-thumb { background-color: #303030; border-radius: 1rem; } */


.playfair { font-family: "Playfair Display", serif; } 
.notoserif { font-family: "Noto Serif", serif; } 

/* color */
.c_white { color: var(--white) !important; } 
.c_main1 { color: var(--main1) !important; } 
.c_light_main1 { color: var(--light_main1) !important; } 
.c_303030 { color: var(--303030) !important; } 
.c_red { color: var(--red) !important } 


.bg_white { background: #fff; } 
.bg_main1 { background: var(--main1) !important; } 
.bg_light_main1 { background: var(--light_main1) !important; } 


h1,h2,h3,h4,h5 { font-weight: normal; } 

h1 { font-size: 4.8rem; } 
h2 { font-size: 3.8rem; } 
h3 { font-size: 3rem; } 
h4 { font-size: 2.4rem; } 
h5 { font-size: 2rem; } 
p { font-size: 1.9rem; } 

.per100 { font-size: 0; } 
.per100 img { width: 100%; } 
.pc_show { display: block; } 
.m_show { display: none; } 


#wrap { width:100%; max-width: 640px; overflow:hidden; min-width: 300px; margin: 0 auto; } 


/* 이미지 하얗게 */
.invert img { filter: brightness(0) invert(1); } 


/* 헤더 */
header { position: fixed; max-width: 640px; z-index: 100; width: 100%; top: 0; background: #fff; padding: 0 3rem; height: 10rem; display: flex; align-items: center; justify-content: center; } 
header .call { background: var(--main1); width: 6rem; aspect-ratio: 1/1; display: grid; place-content: center; border-radius: 50%; } 

header .call img { width: 3rem; } 

a.logo { display: flex; align-items: center; gap: 1rem; transition: color 0.3s; } 
a.logo h3 { font-size: 3.4rem; } 
a.logo span { font-size: 1.4rem; line-height: 1.1; } 





/* 하단 */

/* 카카오지도 */
.root_daum_roughmap .wrap_controllers,
.section_address { display: none; } 
.root_daum_roughmap { width: 100% !important; height: 100%; } 
.root_daum_roughmap .wrap_map { height:100% !important; } 



/* **************************************** */
/* **************************************** */
/* **************************************** */

main { margin-top: 10rem; } 

.eng { font-size: 1.6rem; letter-spacing: .1rem; } 


.index_main #main_visual { position : relative; height: calc(100vh - 10rem); max-height: 600px; } 
/* .index_main #main_visual { position : relative; height:550px; } */
.index_main #main_visual .s1Swiper { height: 100%; } 

.index_main #main_visual .s1Swiper .swiper-slide[data-swiper-slide-index="0"] { background: url('./images/mainslide1.jpg') no-repeat center/cover; } 
/* .index_main #main_visual .s1Swiper .swiper-slide[data-swiper-slide-index="1"] { background: url('./images/mainslide2.jpg') no-repeat top center/contain; } */

.index_main #main_visual .s1Swiper .inner { position : relative; height: 100%; } 

.index_main #main_visual .s1Swiper .inner .txt { position : absolute; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; } 

.index_main #main_visual .s1Swiper .slide1 .txt { top: 8rem; } 
.index_main #main_visual .s1Swiper .slide2 .txt { bottom: 5rem; } 

.index_main #main_visual .s1Swiper .txt h1 span,
.index_main #main_visual .s1Swiper .txt h1 { font-size: 7.5rem; line-height: 1.2; font-weight: bold; letter-spacing: -.5rem; } 
.index_main #main_visual .s1Swiper .txt h5 { letter-spacing: .2rem; font-size: 1.8rem; } 
.index_main #main_visual .s1Swiper .txt h4 { font-size: 2.3rem; } 
.index_main #main_visual .s1Swiper .per100 { height: 50%; overflow: hidden; } 
.index_main #main_visual .s1Swiper .per100 img { object-fit:cover; height: 100%; } 


.index_main #main_visual .rotate-circle { position : absolute; top: 50%; transform: translateY(-50%); right: -100px; z-index: 2; } 
.index_main #main_visual .rotate-circle svg { animation: rotate 8s linear infinite reverse; } 
.index_main #main_visual .rotate-circle svg textPath { letter-spacing: 1.5px !important; } 


@keyframes rotate { 
 from { transform: rotate(360deg); } 
 }




/* **************************************** */
/* section1 병원소개 */
.index_main #section1 { padding: 11rem 3rem 10rem; background: linear-gradient(to top, #f1f0fb 57%, transparent 57%); position : relative; overflow: hidden; box-sizing: border-box; } 
.index_main #section1 .inner { position : relative; z-index: 1; } 

.index_main #section1 .bg_logo { position : absolute; bottom: -.5rem; left: -.5rem; width: 19rem; z-index: 0; } 

.index_main #section1 .top .left { width: 50%; } 

.index_main #section1 .top .left h3 { font-size: 2.7rem; } 

.index_main #section1 .top .right { width: 48%; aspect-ratio: 290/305; overflow: hidden; box-shadow:0px 0px 15px 3px rgba(0,0,0,0.1); } 

.index_main #section1 .top .right .swiper-wrapper { padding-top: 4rem; box-sizing: border-box; } 

.index_main #section1 .bottom img { width: 4rem; } 
.index_main #section1 .bottom .right h4 b { font-size: 4rem; } 

/* Modal */
.index_main .modal-open { background: var(--main1); color: #fff; font-size: 2rem; font-weight: bold; padding: 1rem 3rem; border-radius: 3rem; position : absolute; bottom: -6rem; right: 0; } 
.index_main .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:grid; place-items:center; opacity:2; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease; } 
.index_main .modal-overlay.open { opacity:1; visibility:visible; pointer-events:auto; } 

/* 팝업 박스 */
.index_main .modal-box { background:#fff; position:relative; width:95%; max-width:640px; opacity:0; transform:scale(.85); transition:opacity .3s ease, transform .3s ease; z-index: 200; } 

.index_main .modal-overlay.open .modal-box { opacity:1; transform:scale(1); } 

.index_main .modal-close { position:absolute; top:1.5rem; right:1.5rem; font-size:3rem; background:none; border:none; cursor:pointer; } 

.index_main .modal-box .name_box { height: 15rem; background: linear-gradient(to right, #dbd3ff, #ece8ff); padding-left: 5.5rem; display: flex; align-items: center; z-index: 5; } 

.index_main .modal-box .txt { padding:3rem 4rem; } 
.index_main .modal-box .txt p { position : relative; padding-left: 1.5rem; line-height: 1.5; } 
.index_main .modal-box .txt p:after { content: ''; position : absolute; width: 2px; height: 2px; background: #8d8d8d; left: .6rem; top: 8px; } 

.index_main .modal-box .modal_logo { position : absolute; width: 22rem; bottom: -1rem; right:-1rem; } 



/* **************************************** */
/* section2 진료과목 */

.index_main #section2 { padding-top: 17rem; } 

.index_main .big-text { font-size: 15rem; position : absolute; font-family: "Playfair Display", serif; font-weight: bold; line-height: 1; opacity: .1; } 

.index_main .border-num { -webkit-text-fill-color: #fff; -webkit-text-stroke: 1px var(--main1); paint-order: fill; font-size: 8rem; font-weight: 600; font-family: "Pretendard", sans-serif; letter-spacing: -.4rem; line-height: 1; } 
.index_main #section2 .inner .hashtag { margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6rem; } 

.index_main #section2 .inner .swiper .right { width: 100%; aspect-ratio: 580/350; } 

.index_main #section2 .inner .swiper .right img { height: 100%; display: grid; } 
.index_main #section2 .inner .hashtag p { border: 1px solid var(--main1); color: var(--main1); padding: 1rem 2rem; border-radius: 3rem; font-weight: bold; } 

.index_main #section2 .big-text { position : absolute; left: -10rem; top: 45%; transform: translateY(-50%) rotate(90deg); color: var(--main1); font-size: 10rem; } 

/* **************************************** */
/* section3 오시는길 */

.index_main #section3 { margin-top: 13rem; background: linear-gradient(to top, #f1f0fb 45%, transparent 45%); } 

/* .index_main #section3 { padding: 0 8rem 8rem 8rem; } */

.index_main #section3 .inner> .map { width: 100%; max-width: 110rem; height: 50rem; padding-right: 3rem; background: linear-gradient(to top, #f1f0fb 50%, transparent 50%); } 
.index_main #section3 .big-text { font-size: 11.5rem; opacity: 1; color: #fff; margin-top: 11rem; } 



.index_main #section3 .info { background: #f1f0fb; height: auto; padding: 9rem 3rem; } 




.index_main #section3 ul li:last-child .icon { width: 6rem; } 
.index_main #section3 a.notoserif { font-size: 6rem; font-weight: bold; letter-spacing: -.3rem; } 
.index_main #section3 .line { width: 100%; height: 1px; background: var(--main1); } 
.index_main #section3 .light-line { background: #d1cfe7; } 


.index_main #section3 .timetable li h4.font-bold { width: 10rem; } 
.index_main #section3 .timetable li + li { margin-top: 1.5rem; } 

.index_main #section4 .bottom>div { padding: 3rem 0; background: var(--light_main1); } 
.index_main #section4 .bottom span { aspect-ratio: 1/1; display: inline-block; } 

.index_main #section4 a.more { display: inline-block; place-content: center; padding:0 2rem; height: 4.5rem; font-size: 2rem; font-weight: bold; background: var(--light_main1); color: var(--main1); transition: all 0.2s ease-in-out; line-height: 1; border-radius: 3rem; } 

.index_main #section4 .bottom a.more { background: #fff; } 




/* ************************************************* */
/* ************************************************* */

.sub { border-bottom: 1px solid #eee; } 
.sub .subtop { height: 25rem; } 
.sub .subtop .inner2 { display: grid; place-content: center; height: 100%; } 
/* .sub .subtop.notice_top { background: linear-gradient(to right, #d1c7ff, #ece8ff); } */
.sub .subtop.notice_top { background: url(./images/subtop_bg.jpg) no-repeat 85% center/cover; } 


/* 공지사항 추출 */
.index_main .board_wrap { height: 25rem; display: flex; align-items: start; padding: 3rem 2rem 0; } 
.board_output { font-size: 15px; position: relative !important; top: unset !important; left: unset !important; transform: unset !important; } 
.board_output .bd_out1 a { display: block; padding: .5rem 0; } 
.board_output img { display: none; } 
.board_output .board_output_1_tr td:last-child { text-align: right; min-width: 85px; } 


.index_main .banner { background: #eee; }

.index_main .banner .banner_wrap { overflow: hidden; position: relative; }
.index_main .banner .banner_wrap .banner_track { display: flex; align-items: center; gap: 15px; width: max-content; animation: bannerScroll 20s linear infinite; } 
.index_main .banner .banner_wrap .banner_track img { width: 120px; height: auto; object-fit: contain; flex-shrink: 0; } 

@keyframes bannerScroll { 
 0% { transform: translateX(0); } 
 100% { transform: translateX(-50%); } 
 }


@media (max-width : 350px) {.index_main #section3 ul li:last-child .icon { width: 5rem; } 
.index_main #section3 div { padding-left: 0; } 
.index_main #section1 .bottom img { width: 3.8rem; } 
.index_main #section1 .bottom .right h4 b { font-size: 3.5rem; } 
 }


.price_wrap.inner1 { padding: 7rem 3rem; } 




/* ************************************************* */
/* ************************************************* */

footer { padding: 7rem 0; } 

footer .right .info { display: flex; flex-wrap: wrap; gap:.5rem 1rem; color: #505050; } 
footer .right span { font-size: 1.7rem; } 
footer .right p.copyright { opacity: .6; } 

footer a.logo { height: 4rem; } 

footer a.go-top { background: var(--main1); width: 6rem; height: 6rem; display: grid; place-content: center; border-radius: 3rem; color: #fff; } 

footer a.go-top i { font-size: 3rem; }