@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ajin Lee. (Weaverloft Corp.)
 * 2. Production Date: 2024-01-02
 * 3. Client: 서울대학교병원 융합의학기술원
 */

/*========== Notice ==========*/
.sub-top.notice { background-image: url('../images/common/sub-bg-notice.jpg'); }
.notice-list { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: 3.75em clamp(30px, 2.083vw, 2.50em); }
.notice-list > li { max-width: 433px; width: calc(100% / 3 - 1.32em); transition: transform 300ms; align-self: stretch; }
.notice-list > li a { display: flex; flex-direction: column; cursor: pointer; height: 100%;}
.list-vis-box { overflow: hidden; position: relative; width: 100%; aspect-ratio: 433 / 269; background-color: #eee; }
.list-vis-box::before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #000; z-index: 1; opacity: 0; transition: 500ms; }
.list-vis-box picture { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.spark-board-list .list-vis-box { aspect-ratio: 1182 / 667;}
.list-txt-box { flex-grow: 1; position: relative; box-sizing: border-box; padding-bottom: calc( 1.25em + 12px + 2px ); font-size: 0.813rem;}
.list-txt-box .progress-bar { position: absolute; bottom: calc( 1.25em + 12px ); left: 0; width: 100%; font-size: 0.813rem;}
.list-txt-top { margin: 20px 0 26px; }
.list-txt-top > p { margin: 0 0 12px; font-size: 0.938rem; font-weight: 600; font-variation-settings: 'wght' 600; color: #2955CC; word-break: keep-all; }
.list-txt-top > h4 { height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1.250rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #111; line-height: 1.4; word-break: keep-all; }
.list-txt-bottom { position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 12px 0 0; font-size: 0.813rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #767676; }
.list-txt-bottom span { display: inline-block; }
.list-txt-bottom span.view-btn-txt { text-transform: uppercase; }
.notice-sec .no-result { border-top: none; padding: 60px 0 80px;}
.notice-sec .view-list-btn {display: none;}
/* new type tab */
.notice-sec .tab-tit-wrap { padding: 0; border-bottom: none;}
.notice-sec .tab-menu { width: 100%; justify-content: center;}
.notice-sec .tab-menu li { margin-right: 12px;}
.notice-sec .tab-menu li.tab-link a { min-width: 160px; padding:0.75em; font-size: 20px; line-height: 1.2; border: 1px solid #ddd; border-radius: 33px;}
.notice-sec .tab-menu li.tab-link.current a { border: 1px solid var(--main-color); font-weight: 600; font-variation-settings: 'wght' 600;}
@media (hover: hover){
    .notice-list > li:hover .list-vis-box::before { opacity: 0.1; }
}
@media screen and (max-width: 1480px) {
    .notice-sec:not(.faq, .spark-board-list) > .inner {margin: 0;}
    .notice-sec:not(.faq, .spark-board-list) .tab-tit-wrap {margin-left: 20px;}
    /* .notice-sec:not(.faq, .spark-board-list) .tab-content-wrap {margin: 0 20px;} */
    .notice-sec:not(.spark-board-list) .notice-list {margin: 0 20px;}
    .notice-list > li {max-width: none;}

}
@media screen and (max-width: 1100px){
    .notice-list { gap: 3.75em clamp(20px,3.636vw, 2.50em); }
    .notice-list > li { max-width: none; width: calc(100%/2 - 1.818vw); }
    .list-txt-top > p { font-size: clamp(13px,1.364vw,0.938rem); }
    .list-txt-box,
    .list-txt-box .progress-bar,
    .list-txt-bottom { font-size: clamp(11px,1.182vw,0.813rem); }
    .list-txt-top > h4 { font-size: clamp(1.125rem,1.818vw,1.250rem); }
    .notice-sec .tab-menu li.tab-link a { min-width: clamp(100px,14.545vw,160px); font-size: clamp(16px,1.818vw,20px); }
}
@media screen and (max-width: 768px) {
    .sub-top.notice { background-image: url('../images/common/sub-bg-notice-mo.jpg'); }
    .notice-tab-container .basic-select-wrap .basic-select-box select {min-width: 94px;}
    .notice-list { gap: 3.13em; }
    .notice-list > li { width: 100%; }
    .list-vis-box { aspect-ratio: 320 / 200; }
    .list-txt-top { margin: 16px 0 28px; }
    .list-txt-top > h4 { height: auto;}
    .list-txt-top > p { margin: 0 0 8px; font-size: 16px; }
    .list-txt-box  { padding-bottom: calc( 1.25em + 10px + 2px ); font-size: 14px;}
    .list-txt-box .progress-bar { bottom: calc(1.25em + 10px); font-size: 14px;}
    .list-txt-bottom { margin: 10px 0 0; font-size: 14px; }
    .notice-sec .tab-tit-wrap { overflow-x: auto; white-space: nowrap; }
    .notice-sec .tab-tit-wrap .tab-menu { overflow: hidden; overflow-x: auto; padding: 0 0 10px; }
    .notice-sec .tab-tit-wrap .tab-menu::-webkit-scrollbar { width: 4px; height: 4px; }
    .notice-sec .tab-tit-wrap .tab-menu::-webkit-scrollbar-thumb { height: 30%; background: #ccc; border-radius: 10px; }
    .notice-sec .tab-tit-wrap .tab-menu::-webkit-scrollbar-track { background: #f5f5f5; }
    .notice-sec .tab-menu { justify-content: flex-start;}
    .notice-sec .tab-menu li { margin-right: 8px;}
    .notice-sec .tab-menu li.tab-link a { min-width: 100px; font-size: 16px; }
    .notice-sec .view-list-btn {display: block;}
    .notice-sec:not(.spark-board-list) .btn-wrap:has(.pagination-wrap) {margin: 60px 20px 0;}
}
@media screen and (max-width: 360px){
    .notice-tab-container .basic-select-wrap.flex {flex-direction: column; }
    .notice-sec .tab-menu li.tab-link a { min-width: 80px; font-size: 13px; }
}

/*========== FAQ ==========*/
.faq-cont > p { font-size: 1.250rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #333; }
.faq-cont > p em { color: var(--main-color); }
.faq-list { display: flex; flex-direction: column; gap: 1.88em; margin: 20px 0 0; }
.faq-item { position: relative; padding: 2.00em 1.88em 2.00em 3.13em; border-radius: 4px; background-color: #F8F8F8; transition: background-color 300ms; }
.faq-item.on { background-color: #EEF3FF; }
.faq-tit-box { display: flex; align-items: flex-start; justify-content: space-between; gap: 3em; }
.faq-title { font-size: 1.63rem; font-weight: 600; font-variation-settings: 'wght' 600; color: #111; word-break: keep-all; line-height: 1.4; }
.faq-title strong { display: inline-block; padding: 0 0 0 1.77em; background-image: url('../images/sub/icon-faq.svg'); background-repeat: no-repeat; background-position: left top 5px; background-size: 1em auto; font-weight: inherit; }
.faq-tit-right { display: flex; justify-content: space-between; align-items: center; gap: 1.88em; }
.faq-tit-right .list-view { position: relative; padding: 0 1.250em 0 0; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #999; }
.faq-tit-right .list-view::before { content: ''; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 1px; height: 2.50em; background-color: #ccc; }
.faq-tit-right .list-view span { display: inline-block; padding: 0 0 0 1.88em; background-repeat: no-repeat; background-position: left center; background-size: 1.5em auto; }
.faq-tit-right .list-view span { background-image: url("../images/common/icon-eyes-grey.svg"); }
.faq-tit-right .icon { display: flex; justify-content: center; align-items: center; width: 2.5em; height: 2.5em; transition: transform 300ms; }
.faq-item.on .icon { transform: rotate(180deg); }
.faq-list .faq-button + .faq-content { display: none; margin: 1.56em 0 0; padding: 0 0 0 2.88em; }
.faq-list .faq-button + .faq-content p { font-size: 1.250rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #666; line-height: 1.4; overflow-wrap: break-word; }
.faq.notice-sec .view-list-btn { display: block;}
@media screen and (max-width: 1100px){
    .faq-item { font-size: 1.455vw; }
    .faq-cont > p { font-size: clamp(16px,1.818vw,1.250rem); }
    .faq-title { font-size: clamp(18px,2.364vw,1.63rem); }
    .faq-tit-right .list-view { padding: 0 1.25em 0 0; font-size: clamp(12px,1.455vw,1rem); }
    .faq-tit-right .icon { font-size: 1.455vw; }
    .faq-list .faq-button + .faq-content p { font-size: clamp(16px,1.818vw,1.250rem); }
}
@media screen and (max-width: 768px){
    .faq-list { gap: 20px; margin: 16px 0 0; }
    .faq-item { padding: 20px 16px 26px 20px; font-size: 1rem; }
    .faq-tit-box { gap: 6px; flex-direction: column; width: calc(100% - 34px); }
    .faq-title strong { padding: 0; background-image: none; }
    .faq-tit-right .list-view { padding: 0; }
    .faq-tit-right .list-view span { padding: 0 0 0 16px; background-size: 14px auto; }
    .faq-tit-right .list-view::before { display: none; }
    .faq-tit-right .icon { position: absolute; top: 20px; right: 16px; width: 24px; height: 24px; font-size: 1rem; }
    .faq-list .faq-button + .faq-content { margin: 22px 0 0; padding: 0; }
}

/*========== Spark ==========*/
.spark-board-list .sub-title-bg { background-image: url('../images/sub/spark-bg.jpg'); }
.spark-board-list .sub-title-bg::after { display: none; }
.spark-board-list .sub-title { padding: 1.40em 0 0; color: #111; }
.sub-title-bg .sub-tit-txt { margin-top: 12px; font-size: 1.75rem; font-family: 'Outfit Variable'; font-weight: 400; font-variation-settings: 'wght' 400; letter-spacing: 0; color: #333; }
.sub-title-bg .sub-tit-txt em { font-weight: 600; font-variation-settings: 'wght' 600; color: var(--main-color); }
@media screen and (max-width: 1130px){
    .spark-board-list .sub-title { padding: 1.05em 0 0; }
}
@media screen and (max-width: 1100px){
    .sub-title-bg .sub-tit-txt { font-size: clamp(16px,2.545vw,1.75rem); }
}
@media screen and (max-width: 890px){
    .spark-board-list .sub-title { padding: 1.40em 0 0; }
}
@media screen and (max-width: 768px){
    .spark-board-list .sub-title-bg { display: flex; flex-direction: column; justify-content: center; }
    .spark-board-list .sub-title { position: relative; top: -20%; }
    .sub-title-bg .sub-tit-txt { position: relative; top: -20%; width: 90%; margin: 0 auto; margin-top: 30px; }
}
@media screen and (max-width: 480px){
    .spark-board-list .sub-title-bg { display: block; aspect-ratio: initial; height: 260px; }
    .spark-board-list .sub-title { top: 0; }
    .sub-title-bg .sub-tit-txt { top: 0; margin-top: 12px; }
    .spark-board-list .sub-txt-wrap { margin-top: -55px; }
}