@charset "utf-8"; 

/* Info
 ========================================================================== */
/**
 * 1. Writer: Inseon Choi. Jinsong Kim. (Weaverloft Corp.)
 * 2. Production Date: 2023-09-13
 * 3. Client: SNUH 소아응급
 */
/* ------------------------------------------------------------------------ 
    Main 공통   
------------------------------------------------------------------------ */ 
.main .tit {margin-left:clamp(15px, 3.817vw, 20px); font-size: clamp(17px, 5.344vw, 28px) !important; text-align: left !important; color:#111;}
.main .tit > em {display: inline-block; vertical-align: middle;}
.main .tit > em.pill {width:clamp(26px, 6.107vw, 30px);; height:clamp(18px, 4.771vw, 25px); background: url('../img/common/icon-pill.svg')no-repeat center;  background-size: 100% 100%;}
.main .tit > em.noti {width:clamp(28px, 6.107vw, 32px); height:clamp(20px, 5.344vw, 28px); background: url('../img/common/icon-chat.svg')no-repeat center;  background-size: 100% 100%;}
/*========== main-visual ==========*/
.main-sec {position: relative; width:100%;}
.main-sec .main-banner {border-radius:0 0 2.500em 2.500em; overflow: hidden;}
.main-sec .main-banner .swiper-slide > a { width:100%; height: auto; aspect-ratio: 524 / 613; background-color: #f9f9f9;}
.main-sec .main-banner .swiper-slide > a figure{border-radius:0 0 2.500em 2.500em; overflow: hidden;}
.main-sec .main-banner .swiper-slide > a img { aspect-ratio: 524 / 613;}
/* swiper-control */
.main-sec .swiper-control { display: flex; justify-content: flex-start; position: absolute; align-items: center; width: auto; right:20px; top:70px;z-index: 2;}
/* pagination */
.main-sec .swiper-control .swiper-pagination { position: unset; width: auto; font-size: clamp(13px, 3.2443vw, 17px); line-height: 1.285;font-variation-settings: 'wght' 600;color: #666; border-radius: 20px;}
.main-sec .swiper-control .swiper-pagination-fraction span {font-size: 0.875rem; font-variation-settings: 'wght' 300; vertical-align: middle; }
.main-sec .swiper-control .swiper-pagination-fraction .swiper-pagination-current {padding-right:11px; color:#666; font-variation-settings: 'wght' 600;}
.main-sec .swiper-control .swiper-pagination-fraction .swiper-pagination-total {position: relative; padding-left:3px; /*opacity: 0.6;*/}
.main-sec .swiper-control .swiper-pagination-fraction .swiper-pagination-total::before {content: ''; display: inline-block; position: absolute; left:-4px; top:50%; background:#999; width:1px; height: 10px;transform: translate(0px, -50%);}
/* swiper-btns-autoplay */
.main-sec .swiper-control .swiper-btns-autoplay {width: 32px;height: 32px; margin: 0 8px; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1px solid #eee; }
.main-sec .swiper-control .swiper-btns-autoplay a {display: flex; justify-content: center;  align-items: center;  width: 100%;  height: 100%; border-radius: 50%;} 
.main-sec .swiper-control .swiper-btns-autoplay a:hover  { background-color: rgba(255,255,255,0.6); } 
.main-sec .swiper-control .swiper-btns-autoplay a img {	width: 7px;	height: 14px; object-fit: contain;object-position: center;}
.main-sec .swiper-control .swiper-btns-autoplay a.swiper-play img {width: 12px;height: 12px;}
.main-sec .swiper-control .swiper-btns-autoplay a.swiper-play {	display: none;}
.main-sec .swiper-control .swiper-btns-autoplay a.swiper-pause {display: flex;}
.main-sec .swiper-control .swiper-btns-autoplay.pause a.swiper-play {display: flex;}
.main-sec .swiper-control .swiper-btns-autoplay.pause a.swiper-pause {display: none;}
/* swiper-btns */
.main-sec .swiper-control .swiper-btns {display: flex;align-items: center; gap: 4px;z-index: 1;}
.main-sec .swiper-control .swiper-btns > a {position: unset;  width: 32px; height: 32px; margin: 0; border: 1px solid #eee; border-radius: 50%; background-color:rgba(255,255,255,0.6); background-repeat: no-repeat; background-position: center center; background-size: 7px 14px; transition: all 0.3s; } 
.main-sec .swiper-control .swiper-btns > div.swiper-button-disabled { display: none; } 
.main-sec .swiper-button-prev { background-image: url('../img/common/icon-slide-prev.svg'); } 
.main-sec .swiper-button-next { background-image: url('../img/common/icon-slide-next.svg'); } 
.main-sec .swiper-button-prev::after, .main-sec .swiper-button-next::after { display: none; } 
.main-sec .swiper-control .swiper-btns > a:hover { background-color: rgba(255,255,255,0.6); } 
.search {position: absolute; left:50%; bottom: clamp(-150px, 30.534vw, -160px);  width: 90%; background: #fff; border-radius: 10px;  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;z-index: 10; transform: translate(-50% , 0%);}
.search .search-cont { padding:clamp(20px, 5.725vw, 30px) clamp(16px, 4.5802vw, 24px) clamp(20px, 7.634vw, 40px); }
.search .search-cont .looking-radio-box{margin: clamp(18px, 5.344vw, 28px) 0 clamp(14px, 4.58vw, 24px);}
@media screen and (min-width: 524px){
    .main-sec .swiper-control {top:100px;}
} 
@media screen and (min-width: 1024px){
    .main-sec .swiper-control .swiper-btns-autoplay a:hover  { background-color: #E1F5EB; } 
    .main-sec .swiper-control .swiper-btns > a :hover { background-color: #E1F5EB; }    
}
/*========== mid-visual ==========*/
.banner-bar-sec {padding-top:clamp(185px, 41.031vw, 215px);}
.banner-bar-sec .swiper-slide{box-sizing: content-box;}
.banner-bar-sec .swiper-slide > a {padding:0 clamp(16px, 4.5802vw, 24px); box-sizing: content-box; aspect-ratio: 242 / 89;}
.banner-bar-sec .swiper-slide > a img {aspect-ratio: 242 / 89;}
/* swiper-control */
.banner-bar-sec .swiper-control { display: flex; align-items: center;justify-content: flex-end; width: auto; margin-top: 8px; padding-right: clamp(16px, 4.5802vw, 24px);}
/* pagination */
.banner-bar-sec .swiper-control .swiper-pagination { position: unset; width: auto;  font-size: clamp(13px, 3.2443vw, 17px); font-variation-settings: 'wght' 600;color: #666; }
.banner-bar-sec .swiper-control .swiper-pagination-fraction span {font-size: 0.875rem; font-variation-settings: 'wght' 300; vertical-align: middle;}
.banner-bar-sec .swiper-control .swiper-pagination-fraction .swiper-pagination-current {padding-right:11px; color:#666; font-variation-settings: 'wght' 600;}
.banner-bar-sec .swiper-control .swiper-pagination-fraction .swiper-pagination-total {position: relative; padding-left:3px; /*opacity: 0.6;*/}
.banner-bar-sec .swiper-control .swiper-pagination-fraction .swiper-pagination-total::before  {content: ''; display: inline-block; position: absolute; left:-4px; top:50%; background:#999; width:1px; height: 10px;transform: translate(0px, -50%);}
/* swiper-btns-autoplay */
.banner-bar-sec .swiper-control .swiper-btns-autoplay {width: 32px;height: 32px; margin: 0 8px; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1px solid #eee; }
.banner-bar-sec .swiper-control .swiper-btns-autoplay a {display: flex; justify-content: center;  align-items: center;  width: 100%;  height: 100%; border-radius: 50%;} 
.banner-bar-sec .swiper-control .swiper-btns-autoplay a:hover  { background-color: rgba(255,255,255,0.6); } 
.banner-bar-sec .swiper-control .swiper-btns-autoplay a img {	width: 7px;	height: 14px; object-fit: contain;object-position: center;}
.banner-bar-sec .swiper-control .swiper-btns-autoplay a.swiper-play img {width: 12px;height: 12px;}
.banner-bar-sec .swiper-control .swiper-btns-autoplay a.swiper-play {	display: none;}
.banner-bar-sec .swiper-control .swiper-btns-autoplay a.swiper-pause {display: flex;}
.banner-bar-sec .swiper-control .swiper-btns-autoplay.pause a.swiper-play {display: flex;}
.banner-bar-sec .swiper-control .swiper-btns-autoplay.pause a.swiper-pause {display: none;}
/* swiper-btns */
.banner-bar-sec .swiper-control .swiper-btns {display: flex;align-items: center; gap: 4px;z-index: 1;}
.banner-bar-sec .swiper-control .swiper-btns > a {position: unset;  width: 32px; height: 32px; margin: 0; border: 1px solid #eee; border-radius: 50%; background-color:rgba(255,255,255,0.6); background-repeat: no-repeat; background-position: center center; background-size: 7px 14px; transition: all 0.3s; } 
.banner-bar-sec .swiper-control .swiper-btns > div.swiper-button-disabled { display: none; } 
.banner-bar-sec .swiper-button-prev { background-image: url('../img/common/icon-slide-prev.svg'); } 
.banner-bar-sec .swiper-button-next { background-image: url('../img/common/icon-slide-next.svg'); } 
.banner-bar-sec .swiper-button-prev::after,
.banner-bar-sec .swiper-button-next::after { display: none; } 
.banner-bar-sec .swiper-control .swiper-btns > a:hover { background-color: rgba(255,255,255,0.6); } 
@media screen and (min-width: 1024px){
    .banner-bar-sec .swiper-control .swiper-btns-autoplay a:hover  { background-color: #E1F5EB; } 
    .banner-bar-sec .swiper-control .swiper-btns > a:hover { background-color: #E1F5EB; } 
}
/*========== quick-menu ==========*/
.quick-menu-sec {border-bottom:10px solid #F5F5F5;}
.quick-menu-sec .menu-list {display: flex;flex-wrap: wrap; flex-direction: row; padding: clamp(40px, 7.634vw, 40px) 0 clamp(30px, 11.450vw, 60px); text-align: center; }
.quick-menu-sec .menu-list .menu-list-item {width:33.33%; margin-bottom: 28px;}
.quick-menu-sec .menu-list .menu-list-item > a {width:100%; height: auto;}
.quick-menu-sec .menu-list .menu-list-item > a:hover span {opacity: 1;}
.quick-menu-sec .menu-list .menu-list-item > a > span {display: block; margin-top: 8px; font-size: clamp(12px, 3.244vw, 17px); color:#000; word-break: keep-all;}
.quick-menu-sec .menu-list .menu-list-item > a > figure {width: clamp(58px, 14.885vw, 78px); height: clamp(44px, 12.214vw, 64px); margin: 0 auto;}
@media screen and (min-width: 1024px){
    .quick-menu-sec .menu-list .menu-list-item > a:hover span {opacity: 0.6;}
}
/*========== notice-sec ==========*/
.notice-sec {padding: clamp(20px, 7.634vw, 40px) 0 clamp(30px, 11.450vw, 60px);}
.notice-sec .inner {position: relative; width: 100%;}
.notice-sec .tit { margin-left: 0;}
.notice-sec .notice-more-btn {position: absolute; right: 20px; top:0; padding: 10px 0px 0 10px;}
.notice-sec .notice-more-btn span:hover {text-decoration :none;}
.notice-sec .notice-more-btn span {position: relative; display:inline-block; padding-right: 1.125em; font-size: clamp(14px, 3.053vw, 16px); color:#666;}
.notice-sec .notice-more-btn span::after {position: absolute; right: 0; top:50%; content: ''; transform: translate(0, -50%); width:clamp(10px, 3.053vw, 16px); height: clamp(10px, 3.053vw, 16px); background: url('../img/common/icon-more.svg')no-repeat center; background-size:auto; }
.notice-board .notice-list {width: 100%; height: auto;}
.notice-board .notice-list:first-child > a {padding-top: 0;} 
.notice-board .notice-list:last-child > a {border-bottom: 0;} 
.notice-board .notice-list > a {display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #f5f5f5;}
.notice-board .notice-list > a:hover {opacity: 1;} 
.notice-board .notice-list > a > .tit {width: 80%; display:block; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; font-size: clamp(16px, 3.817vw, 20px) !important; font-variation-settings: 'wght' 500; color:#111;}
.notice-board .notice-list > a > .date {font-size: clamp(14px, 3.435vw, 18px) !important; color:#666;}
@media screen and (min-width: 1024px){
    .notice-sec .notice-more-btn span:hover {text-decoration : underline; text-underline-position : under;}
    .notice-board .notice-list > a:hover {opacity: 0.8;}
}