@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ah Jin Lee. (Weaverloft Corp.)
 * 2. Production Date: 2023-03-20
 * 3. Client: 서울대학교병원 융합의학기술원
 */
 
/*========== 발전기금 ==========*/ 
.fund-sec article.intro { margin-bottom: 80px; } 
.fund-sec article + article { margin-bottom: 120px; } 
.fund-sec article:last-child { margin-bottom: 0; } 
.fund-sec .intro h4 { font-size: 40px; font-weight: 700; font-variation-settings: 'wght' 700; color: #111; line-height: 1.5; word-break:keep-all; text-wrap: pretty; } 
.fund-sec .intro h4 em { color: #326AFF; } 
.fund-sec article .cont + .cont { margin-top: 80px; } 
.list-tyle li { position: relative; padding: 0 0 0 1.08em; font-size: 1.63rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #333; line-height: 1.4; } 
.list-tyle.circle li::before { content: ''; position: absolute; top: 0.38em; left: 0; width: 0.54em; height: 0.54em; border: 3px solid var(--main-color); border-radius: 50%; box-sizing: border-box; } 
.fund-sec .cont-tit { display: flex; align-items: center; font-size: 1.88rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #000; } 
.fund-sec .sub-txt { display: inline-block; margin: 0 0 0 0.60em; font-size: 1.25rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; } 
.cont-box { display: flex; gap: 40px; margin: 30px 0 0; } 
.cont-box > li { display: flex; flex-direction: column; align-items: center; width: calc(100%/3); padding: 3.13em; border-radius: 4px; background-color: #F5F7FA; } 
.cont-box li.sub-list { font-size: 1.125rem; } 
.cont-box li.sub-list::before { display: none; } 
.cont-box > li h5 { padding: 5.19em 0 0; font-size: 1.63rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #111; background-position: top center; background-repeat: no-repeat; background-size: 4.62em auto; } 
.cont-box > li.personal h5 { background-image: url('../images/sub/icon-trainee-01.svg'); } 
.cont-box > li.corporation h5 { background-image: url('../images/sub/icon-trainee-02.svg'); } 
.cont-box > li.property h5 { background-image: url('../images/sub/icon-trainee-03.svg'); } 
.cont-box > li h5 em { color: var(--main-color); } 
.cont-box > li p { margin: 4px 0 0; font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; } 
.cont-box > li p + .list-tyle { margin: 25px 0 0; } 
.cont-box > li h5 + .list-tyle { margin: 50px 0 0; } 
.cont-box > li .list-tyle li { padding: 0 0 0 0.83em; font-size: 1.125rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; line-height: 1.6; letter-spacing: -0.04em; } 
.cont-box > li .list-tyle li + li { margin: 20px 0 0; } 
.cont-box > li .list-tyle li::before { top: 0.56em; width: 0.44em; height: 0.44em; border-width: 2px; } 
.cont-box > li .list-tyle .sub-list { margin: 20px 0 0; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; } 
.cont-box-bot { display: flex; justify-content: space-between; margin: 20px 0 0; padding: 1.88em 3.75em; border-radius: 4px; background-color: #F5F7FA; } 
.cont-box-bot > p { padding: 0 0 0 2.22em; font-size: 1.125rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #666; background-image: url('../images/sub/icon-question.svg'); background-position: left center; background-repeat: no-repeat; background-size: 1.56em auto; } 
.cont-box-bot .info { display: flex; align-items: center; } 
.cont-box-bot .info > li strong { margin: 0 0.875em 0 0; font-size: 1rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #666; } 
.cont-box-bot .info > li span { display: inline-block; font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; } 
.cont-box-bot .info > li span + span { margin: 0 0 0 1em; } 
.cont-box-bot .info > li + li { position: relative; margin: 0 0 0 16px; padding: 0 0 0 16px; } 
.cont-box-bot .info > li + li::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1px; height: 14px; background-color: #BBBBBB; } 
.cont-box-num { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3.75em 4.38em; max-width: 1380px; margin: 0 auto; margin-top: 60px; box-sizing: border-box; } 
.cont-box-num > li { width: calc(100%/3 - 4.38em); } 
.cont-box-num > li.num04 { width: 100%; } 
.cont-tit-num { margin: 0 0 1.08em; font-size: 1.63rem; font-weight: 600; font-variation-settings: 'wght' 600; color: #000; letter-spacing: 0; } 
.cont-tit-num em { display: inline-block; margin: 0 0.54em 0 0; font-weight: 400; font-variation-settings: 'wght' 400; font-family: 'Outfit Variable'; color: var(--main-color); } 
.cont-box-num > li > p { font-size: 1.125rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #333; line-height: 1.6; } 
.list-tyle.reference-mark li { font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #333; } 
.list-tyle.reference-mark li::before { content: '※'; position: absolute; top: 0; left: 0; } 
.list-tyle.reference-mark li .sub-list { margin: 12px 0 0; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; line-height: 1.6; } 
.cont-box-num > li .list-tyle.reference-mark { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em 2.5em; max-width: 920px; margin: 20px 0 0; } 
.cont-box-num > li .list-tyle.reference-mark li { width: calc(100%/2 - 1.25em); } 
.cont-box-progress { display: flex; justify-content: center; gap: 30px; margin: 0 0 60px; } 
.cont-box-progress > li { display: flex; flex-direction: column; align-items: center; position: relative; width: calc(100%/3 - 15px); max-width: 360px; } 
.cont-box-progress > li::before { content: ''; position: absolute; top: 0; right: -10%; width: 2.63em; height: 100%; background-image: url('../images/sub/icon-progress-arrow.svg'); background-position: top 1.5em center; background-repeat: no-repeat; background-size: 100% auto; } 
.cont-box-progress > li:last-child::before { display: none; } 
.cont-num { display: flex; justify-content: center; align-items: center; width: 2.62em; height: 2.62em; border-radius: 50%; background-color: #E5EBF8; font-size: 1.63rem; font-weight: 600; font-variation-settings: 'wght' 600; font-family: 'Outfit Variable'; color: var(--main-color); } 
.cont-box-progress > li > p { margin: 2em 0 0; font-size: 1.25rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; line-height: 1.4; text-align: center; word-break: keep-all; } 
.cont-box-progress > li > p em { font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-color); } 
.cont-box-progress > li > p i { display: inline-block; width: 0.9em; background-image: url('../images/sub/icon-arrow-grey.svg'); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; text-indent: -9999px; line-height: inherit; } 
.cont-box-progress > li .sub-txt { display: block; margin: 1em 0 0; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #666; } 
.apply .view-list-btn { margin: 0 auto; } 
.view-list-btn.round { border-radius: 33px; } 
.cont-box-history { display: flex; flex-wrap: wrap; gap: 30px 40px; } 
.cont-box-history > li { display: flex; flex-direction: column; align-items: center; width: calc(100%/4 - 30px); padding: 1.88em; border-radius: 2px; background-color: #F0EFF8; background-image: url('../images/sub/icon-support-award.svg'); background-position: top 1.88em center; background-repeat: no-repeat; background-size: 6em auto; } 
.cont-box-history > li .name { display: block; margin: 2.38em 0 0; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #333; } 
.cont-box-history > li .price { display: block; margin: 6px 0 0; font-size: 1.38rem; font-weight: 600; font-variation-settings: 'wght' 600; color: #183A91; } 
.cont-box-history > li .price strong { font-size: 2.06rem; font-weight: 700; font-variation-settings: 'wght' 700; } 
/* table */
.fund-sec .common-table.purple thead th:first-child { width: 26%; } 
.fund-sec .common-table th,
.fund-sec .common-table td { word-break: keep-all; } 
.w12 { width: 12%; } 
.w5 { width: 5%; } 
.backslash { position: relative; background-image: url('../images/sub/backslash.svg'); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; } 
.backslash span.right { position: absolute; top: 0.78em; right: 1.11em; } 
.backslash span.left { position: absolute; bottom: 0.78em; left: 1.11em; } 
.cont-table.touch-area .cont-table-inner::-webkit-scrollbar { display: block; width: 4px; height: 4px; border-radius:10px; transition: 300ms; } 
.cont-table.touch-area .cont-table-inner::-webkit-scrollbar-thumb { height: 30%; background: var(--main-color); border-radius:10px; border-left: 16px solid var(--main-color); border-right: 16px solid var(--main-color); } 
.cont-table.touch-area .cont-table-inner::-webkit-scrollbar-track { background: #ccc; border-radius: 10px; } 
@media screen and (max-width: 1480px){
    .cont-box-num { max-width: 100%; margin-left: 20px; } 
    .cont-box-num > li:nth-child(3) { margin-right: 20px; } 
    .cont-box-num > li.num04 { margin-right: 20px; } 
}
@media screen and (max-width: 1280px){
    .cont-box > li { padding: 25px 25px 30px; } 
    .cont-box-bot { flex-wrap: wrap; gap: 20px; padding: 20px 14px; } 
    .cont-box-bot > p { width: 100%; } 
    .cont-box-num { gap: 20px; margin-left: 20px; } 
    .cont-box-num > li { width: calc(100% / 3 - 20px); } 
    .cont-box-num > li.num04 { margin: 20px 0 0; } 
    .cont-table.touch-area .cont-table-inner { overflow-x: auto; padding: 0 20px 1.25em 0; } 
    .fund-sec .common-table.purple { overflow-x: auto; width: 1264px; } 
    .fund-sec .common-table thead th,
    .fund-sec .common-table tbody tr th,
    .fund-sec .common-table tbody tr td { font-size: clamp(1rem, 1.636vw, 1.125rem); } 
    .fund-sec .common-table tbody tr th.w12 { width: 12.5%; } 
    .fund-sec .common-table.purple thead th { padding: 1.38em 0.5em; } 
    .common-table.purple thead th:first-child { width: 28%; } 
    .cont-box-history > li { width: calc(100%/3 - 30px); } 
}
@media screen and (max-width: 1100px){
    .fund-sec .intro h4 { font-size: clamp(1.50rem, 3.636vw, 2.50rem); } 
    .list-tyle li { font-size: clamp(1.125rem, 2.364vw, 1.63rem); } 
    .fund-sec .cont-tit { font-size: clamp(1.250rem, 2.727vw, 1.88rem); } 
    .fund-sec .sub-txt { font-size: clamp(0.875rem, 2.273vw, 1.25rem); } 
    .cont-box { gap: 20px; } 
    .cont-box > li h5 { font-size: clamp(1.125rem, 2.364vw, 1.63rem); } 
    .cont-box > li p { margin: 6px 0 0; font-size: clamp(0.875rem, 1.455vw, 1rem); } 
    .cont-box > li .list-tyle li { font-size: clamp(1rem, 1.818vw, 1.25rem); } 
    .cont-box > li .list-tyle .sub-list { margin: 12px 0 0; font-size: clamp(0.813rem, 1.273vw, 0.875rem); } 
    .cont-box-bot > p { font-size: clamp(1rem, 1.636vw, 1.125rem); } 
    .cont-box-bot .info > li strong,
    .cont-box-bot .info > li span { font-size: clamp(0.875rem, 1.455vw, 1rem); } 
    .cont-box-num { gap: 40px; margin-top: 30px; } 
    .cont-box-num > li { width: 100%; padding: 0 20px 0 0; } 
    .cont-box-num > li.num04 { margin: 0; padding: 0; } 
    .cont-tit-num { margin: 0 0 12px; font-size: clamp(1.125rem, 2.364vw, 1.63rem); } 
    .cont-box-num > li.num04 .cont-tit-num { margin: 0 0 20px; } 
    .cont-tit-num em { margin: 0 8px 0 0; } 
    .cont-box-num > li > p { margin-left: calc(1.75em + 8px); font-size: clamp(1rem, 1.636vw, 1.125rem); } 
    .common-table .con-th .table-txt,
    .common-table .con-th .table-sub-txt { font-size: 12px; } 
    .cont-box-num > li .list-tyle.reference-mark { gap: 16px; max-width: none; margin: 40px 20px 0 0; } 
    .cont-box-num > li .list-tyle.reference-mark li { width: 100%; } 
    .list-tyle.reference-mark li { font-size: clamp(0.875rem, 1.455vw, 1rem); } 
    .list-tyle.reference-mark li .sub-list { margin: 5px 0 0; line-height: 1.4; } 
    .cont-num { font-size: clamp(1.250rem, 2.364vw, 1.63rem); } 
    .cont-box-progress > li > p { font-size: clamp(1.125rem, 1.818vw, 1.25rem); } 
    .cont-box-progress > li .sub-txt { font-size: clamp(0.875rem, 1.455vw, 1rem); } 
    .cont-box-history > li .name { font-size: clamp(0.875rem, 1.455vw, 1rem); } 
    .cont-box-history > li .price { font-size: clamp(1.125rem, 2vw, 1.38rem); } 
    .cont-box-history > li .price strong { font-size: clamp(1.63rem, 3vw, 2.06rem); } 
}
@media screen and (max-width: 920px){
    .cont-box { margin: 40px 0 0; flex-direction: column; } 
    .cont-box > li { width: 100%; } 
    .cont-box > li .list-tyle li br { display: none; } 
    .cont-box > li h5 + .list-tyle,
    .cont-box > li p + .list-tyle { margin: 20px 0 0; } 
    .cont-box-bot .info { flex-wrap: wrap; gap: 10px; } 
    .cont-box-bot .info > li { width: 100%; } 
    .cont-box-bot .info > li + li { margin: 0; padding: 0; } 
    .cont-box-bot .info > li + li::before { display: none; } 
    .cont-box-progress { flex-direction: column; gap: 40px; margin: 0 0 40px; } 
    .cont-box-progress > li { width: 100%; max-width: none; } 
    .cont-box-progress > li::before { display: none; } 
    .cont-box-progress > li > p { margin: 20px 0 0; } 
    .cont-box-progress > li .sub-txt { margin: 12px 0 0; } 
    .cont-box-progress > li > p i { width: 18px; } 
    .cont-box-history { gap: 20px; } 
    .cont-box-history > li { width: calc(100% / 3 - 15px); padding: 20px 20px 30px; } 
    .fund-sec .common-table.purple {width: 920px;}
	.cont-box-num > li > p { margin-left: calc(1.5em + 8px); } 
}
@media screen and (max-width: 768px){
    .fund-sec article + article { margin-bottom: 100px; } 
    .fund-sec article.intro { margin-bottom: 60px; } 
    .fund-sec article.support { margin-bottom: 60px; } 
    .fund-sec article .cont + .cont { margin-top: 78px; } 
    .list-tyle li { padding: 0 0 0 0.83em; } 
    .list-tyle.circle li::before { top: 7px; width: 8px; height: 8px; border: 2px solid var(--main-color); } 
    .fund-sec .cont-tit { flex-direction: column; align-items: flex-start; } 
    .fund-sec .donator .cont-tit:not(.inner) { padding: 20px 0 0; } 
    .fund-sec .sub-txt { display: block; margin: 8px 0 0; } 
    .cont-box > li h5 { padding: 4.50em 0 0; background-size: 4em auto; } 
    .cont-box > li .list-tyle li { padding: 0 0 0 1em; } 
    .cont-box > li .list-tyle .sub-list { margin: 12px 0 0; } 
    .cont-box > li .list-tyle .sub-list { font-size: 0.750rem; } 
    .cont-box-bot > p { padding: 0 0 0 1.75em; background-size: 1.50em auto; } 
    .cont-box-num { margin-top: 30px; } 
    .cont-box-history > li { width: 100%; background-position: top 20px center; background-size: 96px auto; } 
    .cont-box-history > li .name { margin: 34px 0 0; } 
	.cont-box-num > li > p { margin-left: calc(1.45em + 8px); } 
}

/*========== 발전기금 영문 ==========*/ 
.fund-sec:lang(en) .cont-box > li h5 {text-align: center;}
.fund-sec:lang(en) .cont-box-bot {flex-direction: column; gap: 20px;}
.fund-sec:lang(en) .cont-box-bot .info {flex-wrap: wrap; gap: 10px;}
.fund-sec:lang(en) .cont-box-bot .info > li:first-child {width: 100%;}
.fund-sec:lang(en) .cont-box-bot .info > li + li:nth-child(2) {margin: 0;padding: 0;}
.fund-sec:lang(en) .cont-box-bot .info > li + li:nth-child(2)::before {display: none;}
.fund-sec:lang(en) .cont-box-num > li .list-tyle.reference-mark {flex-direction: column; max-width: 100%;}
.fund-sec:lang(en) .cont-box-num > li .list-tyle.reference-mark li {width: 100%;}
.fund-sec:lang(en) .view-list-btn {max-width: 360px;}
.fund-sec:lang(en) .cont-box-history > li {width: calc(100% / 3 - 30px);padding: 1.88em 1em;}
.fund-sec:lang(en) .cont-box-history > li .price {font-size: 1.125rem;}
.fund-sec:lang(en) .backslash span.left {bottom: 0.5em;}
@media screen and (max-width: 1280px){
    .fund-sec:lang(en) .cont-box-history > li {width: calc(100% / 2 - 20px);}
    .fund-sec:lang(en) .cont-box-history > li .price strong { font-size: clamp(1.63rem, 2.578vw, 2.06rem); } 
    .fund-sec:lang(en) .cont-box-history > li .price {font-size: clamp(1rem, 1.406vw, 1.125rem);}
}
@media screen and (max-width: 920px){
    .fund-sec:lang(en) .cont-box-history > li {width: calc(100% / 2 - 10px);}
}
@media screen and (max-width: 768px){
    .fund-sec:lang(en) .cont-box-history > li {width: 100%;}
}