@charset "utf-8";
@import url('/share/css/swiper.min.css');

body {font-size: 1.6rem; line-height: 1.5;}

.top-con {position: relative; padding: 7rem 0;}
.top-con::before {content: ''; position: absolute; z-index: 0; right: 0; top: 0; width: calc(50% + 55rem); height: 100%; border-radius: 7rem 0 0 7rem; background: url(../img/main/bg_top.png) no-repeat left center/cover;}
.top-con .inner {display: flex; gap: 4rem; align-items: flex-start;}
.top-con .right-con {position: relative; z-index: 1; flex-grow: 1;}
.top-con .right-con .info-box {margin-top: 2.4rem; padding: 4rem; color: #222; border-radius: 2rem; background: #fff url(../img/main/ico_main_info.png) no-repeat right 4.4rem top 1.5rem; box-shadow: var(--krds-shadow2);}
.top-con .right-con .info-box h3 {font-size: 2.6rem; font-weight: 700; line-height: 1.3;}
.top-con .right-con .info-box .tel {margin-top: 1rem; font-size: 3.2rem; color: var(--main-primary-50);}
.top-con .right-con .info-box .time {margin-top: 2rem;}
.top-con .right-con .info-box .time h4 {margin-bottom: 1rem; padding-left: 2.6rem; font-size: 1.8rem; line-height: 1.4; background: url(../img/main/ico_time.svg) no-repeat left center;}
.top-con .right-con .info-box .time p em {font-weight: 500;}
.top-con .right-con .info-box .info {position: relative; margin-top: 0.8rem; padding-left: 1.2rem; color: #555;}
.top-con .right-con .info-box .info::before {content: '*'; position: absolute; z-index: 1; left: 0; top: 0;}

.main-tit {font-size: 4rem; font-weight: 700; line-height: 1;}
.more-btn {position: absolute; z-index: 1; right: 2.4rem; top: 0; width: 4rem; height: 4rem; border-radius: 50%; box-shadow: var(--krds-shadow3); background: #232355 url(../img/main/ico_more.svg) no-repeat center/100%;}

#visual {position: relative; width: 93rem;}
#visual .visual-swiper {border-radius: 4rem 17rem 2rem 2rem; overflow: hidden;}
#visual .control {position: relative; display: flex; align-items: center; position: absolute; z-index: 1; left: 0; bottom: 0; width: 20rem; padding: 1.5rem 3rem; border-radius: 0 4rem 0 0; background: #fff;}
#visual .control::before {content: ''; position: absolute; z-index: 1; left: 0; top: -4rem; width: 4rem; height: 4rem; -webkit-mask-image: url('/share/images/ico_corner.svg'); mask-image: url('/share/images/ico_corner.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: #fff; background-size: 100%; transform: rotate(-90deg);}
#visual .control .swiper-pagination {position: static; width: 5.7rem; color: #666;}
#visual .control .swiper-pagination .swiper-pagination-current {color: #222; font-weight: 700;}
#visual .control button {width: 2.6rem; height: 2.6rem; background-size: 100%;}
#visual .control button.prev-btn {background-image: url(../img/main/ico_vs_prev.svg);}
#visual .control button.next-btn {background-image: url(../img/main/ico_vs_next.svg);}
#visual .control button.play-btn {margin-left: 1rem; border-radius: 50%; background-color: #232355;}
#visual .control button.play-btn.pause {background-image: url(../img/main/ico_vs_pause.svg);}
#visual .control button.play-btn.play {background-image: url(../img/main/ico_vs_play.svg);}

#weather {display: flex; gap: 1.6rem; align-items: center;}
#weather .ico {width: 6rem; height: 6rem; padding: 0.8rem; border-radius: 50%; background: #fff;}
#weather .temp {font-size: 2.0rem; color: #394C72;}
#weather .temp strong {font-size: 2.6rem;}
#weather .air {display: flex; font-weight: 500; color: #222;}
#weather .air dt {margin-right: 0.4rem;}
#weather .air dd {margin-right: 1.6rem; font-weight: 600;}
#weather .air dd.good {color: var(--krds-light-color-divider-primary);}
#weather .air dd.bad {color: var(--krds-color-light-danger-50);}

#search {margin-top: 2rem;}
#search .search-form {display: block; position: relative; display: flex; height: 6rem; border: 0.2rem solid var(--main-primary-60); border-radius: 2rem; overflow: hidden; background: #fff;}
#search .search-form .inp {flex-grow: 1; width: 100%; height: 100%; border: 0; padding: 0 2.4rem; font-size: 1.8rem;}
#search .search-form .inp::placeholder {font-size: 1.8rem; color: var(--krds-light-color-text-disabled);}
#search .search-form .submit {position: absolute; z-index: 1; right: -0.2rem; top: -0.2rem; flex-shrink: 0; width: 6rem; height: 6rem; text-indent: -9999px; border-radius: 2rem 0 0 0; background: #233DA8 url(../img/main/ico_search.svg) no-repeat center;}

#news-board {padding: 8rem 0;}
#news-board .inner {position: relative;}
#news-board .tablist {display: flex; gap: 5.8rem; position: absolute; z-index: 1; left: 22.5rem; top: 0.8rem; padding-left: 2.4rem;}
#news-board .tablist button {position: relative; font-size: 2.6rem; font-weight: 500; color: var(--krds-light-color-text-disabled);}
#news-board .tablist button.select {font-weight: 700; color: #233DA8;}
#news-board .tablist button + button::before {content: ''; position: absolute; z-index: 1; left: -3.2rem; top: 50%; width: 0.6rem; height: 0.6rem; border-radius: 50%; transform: translateY(-50%); background: #D9D9D9;}
#news-board .tabpanel {margin-top: 2.4rem;}
#news-board .news-list {display: flex; gap: 2rem;}
#news-board .news-list li {flex: 1; min-width: 0;}
#news-board .news-list li a {display: flex; flex-direction: column; align-items: flex-start; padding: 3rem; border-radius: 2rem; border: 1px solid #E8E8E8;}
#news-board .news-list li a i {display: block; padding: 0.4rem 1.5rem; font-weight: 500; color: #606060; line-height: 1.3; border-radius: 10rem; background: #E6EAF0;}
#news-board .news-list li a .tit {margin: 1.8rem 0 1rem; font-size: 1.8rem; font-weight: 600; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
#news-board .news-list li a .con {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #555;}
#news-board .news-list li a .date {margin-top: 2rem; font-weight: 500; color: #233DA8;}

.btm-con {position: relative; color: #fff; border-radius: 0 30rem 0 0; background: linear-gradient(180deg, #2A2063 0%, #182B71 58.79%), linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(90deg, #D2ECFF 0%, #D3D3FF 100%);}

#favorite {position: relative; z-index: 1; padding: 8rem 0; text-align: center;}
#favorite .fv-swiper-wrap {position: relative; margin-top: 2.4rem; padding: 0 17rem;}
#favorite .fv-swiper {overflow: hidden;}
#favorite .fv-swiper .swiper-slide a {display: block; position: relative; padding-top: 12rem;}
#favorite .fv-swiper .swiper-slide a::before {content: ''; position: absolute; z-index: 1; left: 50%; top: 0; width: 11rem; height: 11rem; border-radius: 2rem; background-color: #fff; background-repeat: no-repeat; background-position: center; transform: translateX(-50%); box-shadow: var(--krds-shadow1);} 
#favorite .fv-swiper .swiper-slide a.vaccin::before {background-image: url(../img/main/ico_fv_vaccin.svg);}
#favorite .fv-swiper .swiper-slide a.mom::before {background-image: url(../img/main/ico_fv_mom.svg);}
#favorite .fv-swiper .swiper-slide a.teeth::before {background-image: url(../img/main/ico_fv_teeth.svg);}
#favorite .fv-swiper .swiper-slide a.dementia::before {background-image: url(../img/main/ico_fv_dementia.svg);}
#favorite .fv-swiper .swiper-slide a.docu::before {background-image: url(../img/main/ico_fv_docu.svg);}
#favorite .fv-swiper .swiper-slide a.medical::before {background-image: url(../img/main/ico_fv_medical.svg);}
#favorite .fv-swiper .swiper-slide a.support::before {background-image: url(../img/main/ico_fv_support.svg);}
#favorite .fv-swiper .swiper-slide a.life::before {background-image: url(../img/main/ico_fv_life.svg);}
#favorite .fv-swiper .swiper-slide a.cert::before {background-image: url(../img/main/ico_fv_cert.svg);}
#favorite .fv-swiper .swiper-slide a.info::before {background-image: url(../img/main/ico_fv_info.svg);}
#favorite .fv-swiper .swiper-slide a.og::before {background-image: url(../img/main/ico_fv_og.svg);}
#favorite .fv-swiper .swiper-slide a.test::before {background-image: url(../img/main/ico_fv_test.svg);}
#favorite .fv-swiper .swiper-slide a.infectious::before {background-image: url(../img/main/ico_fv_infectious.svg);}
#favorite .fv-swiper .swiper-slide a.mental::before {background-image: url(../img/main/ico_fv_mental.svg);}
#favorite .fv-swiper .swiper-slide a.ade::before {background-image: url(../img/main/ico_fv_ade.svg);}
#favorite .fv-control button {position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 4rem; height: 4rem; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 100%;}
#favorite .fv-control button.prev-btn {left: 9rem; background-image: url(../img/main/ico_fv_prev.svg);} 
#favorite .fv-control button.next-btn {right: 9rem; background-image: url(../img/main/ico_fv_next.svg);} 

#main-location {position: relative; height: 41.5rem;}
#main-location .inner {position: relative; height: 100%;}
#main-location .inner::before {content: ''; position: absolute; z-index: 1; left: -18.6rem; bottom: 0; width: 50.4rem; height: 11.2rem; background: url(../img/main/bg_location.svg) no-repeat 0 0;}
#main-location .inner::after {content: ''; position: absolute; z-index: 2; left: 17.6rem; bottom: 0; width: 32.8rem; height: 31.8rem; background: url(../img/main/ico_doctor.svg) no-repeat 0 0;}
#main-location .txt-wrap {max-width: 33rem;}
#main-location .txt-wrap .addr {margin-top: 1.6rem; padding-left: 3rem; background: url(../img/main/ico_btm_map.svg) no-repeat left center;}
#main-location .txt-wrap .map-more {display: flex; margin-top: 3.2rem; gap: 0.8rem;}
#main-location .txt-wrap .map-more .qr {border-radius: 0.3rem; overflow: hidden;}
#main-location .txt-wrap .map-more .link {width: 12rem; height: 5.2rem; text-indent: -9999px; background: url(../img/main/ico_kakaomap.svg) no-repeat left top/100%;}
#main-location .map {position: absolute; z-index: 1; right: 0; top: 0; width: calc(50% + 42rem); height: 100%; border-radius: 20rem 0 0 0; overflow: hidden;}


#ban {padding-top: 2.4rem; padding-bottom: 2.4rem; color: #fff; border-top: 1px solid var(--main-primary-80); background: var(--main-primary-90);}
#ban .inner {display: flex; align-items: center; gap: 4rem;}
#ban .ban-tit {flex: 0 0 auto; display: flex; align-items: center;}
#ban .ban-tit h3 {margin-right: 0.8rem; font-size: 1.8rem; font-weight: normal; line-height: 2rem; letter-spacing: -0.02em;}
#ban .ban-control {display: flex;}
#ban .ban-control a {display: block; width: 3.2rem; height: 3.2rem; background-size: 100%;}
#ban .ban-control a.prev {background-image: url(../img/main/ico_ban_prev.svg);}
#ban .ban-control a.stop {background-image: url(../img/main/ico_ban_pause.svg);}
#ban .ban-control a.next {background-image: url(../img/main/ico_ban_next.svg);}
#ban .ban-list {overflow: hidden;}
#ban .ban-list ul {position: relative; display: flex; gap: 5.2rem; white-space: nowrap;}
#ban .ban-list ul li {position: relative;}
#ban .ban-list ul li a {color: #fff; font-size: 1.6rem;}
#ban .ban-list ul li + li::before {content: ''; position: absolute; z-index: 1; left: -2.6rem; top: 50%; width: 1px; height: 1.25rem; opacity: 0.5; background: #b2b2b2; transform: translateY(-50%);}



/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1547px){
	.top-con::before {width: calc(99.45% - 21.6rem)}
	#visual {width: 60%;}
	
	#favorite .fv-swiper-wrap {padding: 0 8rem;}
	#favorite .fv-control button.prev-btn {left: 1rem;}
	#favorite .fv-control button.next-btn {right: 1rem;}
	
	#main-location .map {width: 76%;}
}

@media (max-width: 1199px){

}

@media (max-width: 1023px){
	.top-con {background: url(../img/main/bg_top_m.jpg) no-repeat center top/cover;}
	.top-con::before {display: none;}
	.top-con .inner {flex-direction: column;}
	
	#visual {width: 100%;}
	#visual .control {width: auto;}
	.top-con .right-con {width: 100%;}
	
	#news-board .news-list {flex-wrap: wrap;}
	#news-board .news-list li {flex: 1 0 48%;}
	
	#main-location {height: auto;}
	#main-location .inner {margin-bottom: 3rem; text-align: center; padding: 0;}
	#main-location .txt-wrap {width: 100%; max-width: 100%;}
	#main-location .txt-wrap .addr {display: inline-block;}
	#main-location .txt-wrap .map-more {max-width: 45rem; margin: 4rem auto 0; height: 21rem; padding: 0 1.6rem; background: url(../img/main/bg_location_btm.png) no-repeat center bottom/100%;}
	#main-location .inner::before,
	#main-location .inner::after {display: none;}
	#main-location .map {position: static; width: calc(100% - 1.6rem); height: 300px; margin-left: 1.6rem;}
}

@media (max-width: 767px){		
	.top-con {padding: 4rem 0;}
	.top-con .inner {gap: 3.6rem;}
	.top-con .right-con .info-box {padding: 2rem; margin-top: 2rem; margin-bottom: 0; border-radius: 10px; background-size: 5.4rem; background-position: right 1.6rem top 1.6rem;}
	.top-con .right-con .info-box .time h4 {background-size: 1.6rem;}
	
	#visual .visual-swiper {border-radius: 2rem 8rem 1rem 1rem;}
	#visual .control {height: 3.4rem; padding: 0 2rem; border-radius: 0 3rem 0 0;}
	#visual .control::before {width: 2.4rem; height: 2.4rem; top: -2.4rem;}
	#visual .control button {width: 2rem; height: 2rem;}
	#visual .control .swiper-pagination {width: 4rem;}
	
	#weather {display: none;}
	#search {margin-top: 0;}
	#search .search-form {border-radius: 1rem;}
	
	#news-board {padding: 5rem 0;}
	#news-board .tablist {position: static; padding-left: 0; margin-top: 2.4rem; gap: 4.4rem;}
	#news-board .tablist button + button::before {width: 3px; height: 3px; left: -2.2rem;}
	#news-board .news-list li {flex: 1 0 100%;}
	#news-board .news-list li a {padding: 2rem;}
	
	.btm-con {border-radius: 0 10rem 0 0;}
	#favorite {padding: 5rem 0;}
	#favorite .fv-swiper-wrap {padding: 0 6rem; margin-top: 3rem;}
	#favorite .fv-swiper .swiper-slide a {padding-top: 10rem;}
	#favorite .fv-swiper .swiper-slide a::before {width: 7rem; height: 7rem; background-size: 3.8rem; border-radius: 1.2rem;}
	#favorite .fv-swiper .swiper-slide a br {display: none;}
	#favorite .fv-control button.prev-btn {left: 0;}
	#favorite .fv-control button.next-btn {right: 0;}
	
	#ban {padding-top: 2rem; padding-bottom: 2rem;}
	#ban .ban-tit h3 {margin-right: 0.8rem;}
	#ban .inner {gap: 1.6rem;}
	#ban .ban-control a {width: 3rem; height: 3rem;}
	
}

@media (max-width: 359px){

}