@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: -.08rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color:var(--303030); scroll-behavior: smooth; } 
a { text-decoration:none; color: inherit; } 
ul, li { list-style:none; } 


:root { font-size: 10px; --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; } 

.inner { width:100%; } 
.inner1 { width: 100%; max-width:1200px; margin: 0 auto; } 
.inner2 { width: 100%; max-width:1400px; margin: 0 auto; } 

@media (max-width: 768px){
 .inner { padding-left:3rem; padding-right: 3rem; } 
 }
@media (max-width:1230px){
 .inner1 { padding-left:3rem; padding-right: 3rem; } 
 }
@media (max-width:1430px){
 .inner2 { padding-left:3rem; padding-right: 3rem; } 
 }


/* 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: 5rem; } 
h2 { font-size: 4rem; } 
h3 { font-size: 3rem; } 
h4 { font-size: 2.4rem; } 
h5 { font-size: 2rem; } 
p { font-size: 1.8rem; } 

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


#wrap { width:100%; overflow:hidden; min-width: 1200px; } 


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



/* 헤더 */

header { position: fixed; z-index: 100; width: 100%; isolation: isolate; top: 0; background: #fff; } 

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; } 

header .inner2 { display: flex; justify-content: space-between; width: 100%; margin: 0 auto; height: 10rem; align-items: center; position: relative; z-index: 100; } 
header nav { position : relative; height: 100%; display: flex; align-items: center; } 
header nav > ul { display: flex; height: 100%; } 
header nav > ul > li { height: 100%; } 
header nav > ul > li a { display: grid; place-content: center; font-size: 2rem; font-weight: normal; height: 100%; padding: 1rem 3rem; line-height: 1; } 
header nav > ul > li a:hover { font-weight: bold; } 


header nav > ul > li a span { position: relative; transition: all 300ms ease-in-out; } 
header nav > ul > li a span::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--main1); width: 100%; height: 100%; padding: 1rem 1.5rem; border-radius: 3rem; z-index: -1; opacity: 0; transition: all 300ms ease-in-out; } 
header nav > ul > li a.on span { color: #fff; z-index: 1; } 
header nav > ul > li a.on span::after { opacity: 1; } 

@media screen and (max-width: 1300px) { header nav > ul > li a { padding: 1rem 2rem; } 
 }


/* 하단 */
footer { padding: 7rem 0; } 




/* 카카오지도 */
.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; min-width: 1200px; } 

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


.index_main #main_visual { position : relative; height: calc(100vh - 10rem); } 
.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 center/cover; } 

.index_main #main_visual .s1Swiper .inner,
.index_main #main_visual .s1Swiper .inner2 { position : relative; height: 100%; } 
.index_main #main_visual .s1Swiper .inner2 .txt { position : absolute; top: 50%; right: 0; transform: translateY(-50%); text-align: center; } 


.index_main #main_visual .s1Swiper .txt h1 span,
.index_main #main_visual .s1Swiper .txt h1 { font-size: 10rem; line-height: 1.2; font-weight: bold; letter-spacing: -.5rem; } 
.index_main #main_visual .s1Swiper .txt h5 { letter-spacing: .5rem; } 


.index_main #main_visual .s1Swiper .inner .txt { width: 50%; position : absolute; top: 50%; right: 0; transform: translateY(-50%); } 


.index_main #main_visual .rotate-circle { position : absolute; bottom: -70px; right: -175px; 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-top: 17rem; /* background: linear-gradient(to top, #f1f0fb 40%, transparent 40%); */
background: url(./images/s1_bg.jpg) no-repeat right/cover; } 

.index_main #section1 .swiper.left { width: 60rem; overflow: hidden; height: 65rem; box-shadow:0px 0px 15px 3px rgba(0,0,0,0.2); } 
.index_main #section1 .swiper.left .swiper-wrapper { padding-top: 5rem; box-sizing: border-box; } 


/* Modal */
.index_main #section1 .modal-open { background: var(--main1); color: #fff; font-size: 2rem; font-weight: bold; padding: 1rem 3rem; border-radius: 3rem; position : absolute; bottom: 0; right: 0; } 

.index_main #section1 .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:grid; place-items:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease; } 

.index_main #section1 .modal-overlay.open { opacity:1; visibility:visible; pointer-events:auto; } 

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

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

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

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

.index_main #section1 .modal-box .txt { padding:3rem; } 

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

.index_main #section1 .modal-box .modal_logo { position : absolute; width: 25rem; bottom: 0; right:0; } 




/* **************************************** */
/* 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 { padding: 0 8rem; } 
.index_main #section2 .inner .swiper { height: 54rem; } 
.index_main #section2 .inner .left { flex: 1; } 
.index_main #section2 .inner .left .txt { width: 50rem; } 
/* .index_main #section2 .inner .right { max-width: 880px; overflow: hidden; } */
.index_main #section2 .inner .right { width: 50%; overflow: hidden; } 
.index_main #section2 .inner .hashtag { margin-top: 3rem; display: flex; flex-wrap: wrap; gap:6px 7px; } 
.index_main #section2 .inner .right { display: grid; place-content: center; } 
.index_main #section2 .inner .right img { height: 100%; } 
.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: -11rem; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--main1); } 

/* **************************************** */
/* 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 .left { width: 100%; max-width: 110rem; height: 50rem; } 
.index_main #section3 .big-text { font-size: 11.5rem; opacity: 1; color: #fff; margin-top: 11rem; } 

.index_main #section4 { background: #f1f0fb; } 

.index_main #section4 .inner1 h1.notoserif { font-size: 6rem; letter-spacing: -.3rem; } 
.index_main #section4 .inner1 .left .line { width: 100%; height: 1px; background: var(--main1); } 
.index_main #section4 .inner1 .left .light-line { background: #d1cfe7; } 
.index_main #section4 .inner1 .left ul li h4.font-bold { width: 10rem; } 
.index_main #section4 .inner1 .left .info { display: flex; flex-direction: column; justify-content: space-between; height: 42rem; } 
.index_main #section4 .inner1 .right { width: 58rem; } 


.index_main #section5 .inner1 .left { height: 35rem; border: 1px solid #eee; width: 55rem; } 
.index_main #section5 .inner1 .left span { aspect-ratio: 1/1; display: inline-block; } 
.index_main #section5 .inner1 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 #section5 .inner1 a.more:hover { background: var(--main1); color: #fff; } 


.index_main .banner { background: #eee; } 

.index_main .banner .inner2 .banner_wrap { overflow: hidden; position: relative; } 

.index_main .banner .inner2 .banner_wrap .banner_track { display: flex; align-items: center; gap: 30px; width: max-content; animation: bannerScroll 20s linear infinite; } 

.index_main .banner .inner2 .banner_wrap .banner_track img { width: 280px; height: auto; object-fit: contain; flex-shrink: 0; } 

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

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


.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:#f7f5ff; } */
/* .sub .subtop.notice_top { background: linear-gradient(to right, #d1c7ff, #ece8ff); } */
.sub .subtop.notice_top { background: url(./images/subtop_bg.jpg) no-repeat right center/cover; } 



/* 공지사항 추출 */
.index_main .board_wrap { display: flex; align-items: start; margin-top: 3rem; } 
.board_output { font-size: 20px; 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; } 

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


footer .right .info { display: inline-flex; width: 70rem; flex-wrap: wrap; gap:1rem 3rem; flex: 1; color: #505050; } 
footer .right div span { font-size: 2rem; } 
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: 2rem; }