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

/*========== Font ==========*/
/* Pretendard Variable */
@font-face { font-family: 'Pretendard Variable'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('../font/PretendardVariable.woff2') format('woff2-variations'); }
/* Pretendard - Chart.js + editor */
@font-face {
    font-family:'Pretendard';
    font-weight: 400;
    src: url('../font/Pretendard-Regular.woff2') format('woff2'),
    url('../font/Pretendard-Regular.otf') format('otf');
}
@font-face {
    font-family:'Pretendard';
    font-weight: 500;
    src: url('../font/Pretendard-Medium.woff2') format('woff2'),
    url('../font/Pretendard-Medium.otf') format('otf');;
}
@font-face {
    font-family:'Pretendard';
    font-weight: 600;
    src: url('../font/Pretendard-SemiBold.woff2') format('woff2'),
    url('../font/Pretendard-SemiBold.otf') format('otf');
}
@font-face {
    font-family:'Pretendard';
    font-weight: 700;
    src: url('../font/Pretendard-Bold.woff2') format('woff2'),
    url('../font/Pretendard-Bold.otf') format('otf');
}
@font-face {
    font-family:'Pretendard';
    font-weight: 800;
    src: url('../font/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../font/Pretendard-ExtraBold.otf') format('otf');
}

/* Outfit */
@font-face { font-family: 'Outfit Variable'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('../font/OutfitVariable.woff2') format('woff2-variations'); }
:root { /* color */
    --main-color: #326AFF; }
.off { display: none; }
.scroll-none { overflow: hidden; }

/* ------------------------------------------------------------------------ 
Common
------------------------------------------------------------------------ */
body { width: 100%; overflow: hidden; }

/*========== lazyload ==========*/
.fade-in { opacity: 0; }
.fade-in.lazyloaded { opacity: 1; transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 300ms; }

/* tab 본문바로가기 */
.skip-nav a { display: block; padding: 0px 20px; background-color: var(--main-color); font-size: 1rem; line-height: 2.5em; color: #fff; text-align: center; position: fixed; left: 0; top: -10rem; z-index: 10001; border-radius: 2px; }
.skip-nav a:focus { top: 0; }

/*========== Custom Design ==========*/
.common-btn { display: inline-block; overflow: hidden; position: relative; min-width: 90px; height: auto; padding: 1em; background-color: var(--main-color); border: 1px solid transparent; border-radius: 10px; font-size: 1.38rem; color: #fff; text-align: center; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: background-color 300ms, opacity 300ms; font-weight: 600; font-variation-settings: 'wght' 600; }
.common-btn.alert { font-size: 1.125rem; }
.common-btn:hover { border-color: var(--main-color); background-color: #fff; color: var(--main-color); }
.common-btn.arrow span { display: inline-block; padding: 0 1.91em 0 0; background-image: url('../images/common/icon-btn-arrow-w.svg'); background-repeat: no-repeat; background-position: right center; background-size: 1.18em auto; transition: background-color 300ms; }
.common-btn.arrow:hover span { background-image: url('../images/common/icon-btn-arrow-b.svg'); }
.underline-btn { display: inline-block; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #fff; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; }
.underline-btn span { display: inline-block; position: relative; padding: 0 0 0.38em; background-image: linear-gradient(transparent calc(100% - 2px), #fff 0.13em); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 300ms; }
.underline-btn:hover span { background-size: 100% 100%; }
.underline-btn.plus span { padding: 0 2.13em 0.38em 0; }
.underline-btn.plus span::after { content: ''; position: absolute; top: -2px; right: 0; width: 1.25em; height: 1.25em; background-image: url('../images/common/icon-plus-w.svg'); background-repeat: no-repeat; background-position: right top; background-size: 100% auto; }
.common-btn-wrap { display: flex; justify-content: center; margin-top: 80px; }
.view-list-btn { display: block; max-width: 220px; width: 100%; padding: 1em;border-radius: 10px; font-size: 1.25rem; }
.view-list-btn.line { background-color: #fff; color: var(--main-color); border-color: var(--main-color); }
.view-list-btn.line:hover { background-color: var(--main-color); color: #fff; }
@media screen and (max-width: 1100px){
    .view-list-btn { font-size: clamp(1rem,1.818vw,1.25rem); }
}
@media screen and (max-width: 768px){
    .common-btn { border-radius: 4px; }
    .common-btn-wrap { margin-top: 60px; }
    .view-list-btn { max-width: 100%; padding: 0.88em; border-radius: 6px; font-size: 1rem; }
    .view-list-btn:hover { background-color: var(--main-color); color: #fff; }
    .view-list-btn.line:hover { background-color: #fff; color: var(--main-color); border-color: var(--main-color); }
}

/*========== Tab Menu ==========*/
.tab-tit-wrap { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; padding: 0 0 1.88em; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.tab-cont-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2.50em; }
.tab-cont-top + .tab-cont-bottom { margin: 3em 0 0; }
.tab-cont-bottom > li { width: calc(100%/2 - 1.25em); }
.tab-menu { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-end; }
.tab-menu li { margin-right: 1.88em; }
.tab-menu li:last-child { margin-right: 0; }
.tab-menu li.slider { position: absolute; left: 0; bottom: 0; display: inline-block; height: 3px; background-color: #2955CC; transition: left .3s linear; }
.tab-menu li.tab-link a { display: block; font-size: 1.63rem; font-weight: 500; font-variation-settings: 'wght' 500; line-height: 1; text-align: center; color: #767676; -webkit-user-drag: none; transition: 300ms; }
.tab-menu li.tab-link a:hover { color: var(--main-color); }
.tab-menu li.tab-link.current a { font-weight: 800; font-variation-settings: 'wght' 800; color: var(--main-color); }
.tab-content-wrap .tab-content { display: none; margin: 2.50em 0 0; }
.tab-content-wrap .tab-content.current { display: block; }
.tab-tit-wrap:lang(en) { padding: 0 0 20px;}
.tab-menu li.tab-link a:lang(en) { font-size: 24px;}

.tab-menu.round-type {justify-content: center;}
.tab-menu.round-type li {margin-right: 12px;}
.tab-menu.round-type li:last-child { margin-right: 0; }
.tab-menu.round-type li.tab-link a {display: flex; justify-content: center; align-items: center; min-width: 9em; padding: 0.8em; border-radius: 33px; border: 1px solid #ccc; box-sizing: border-box; font-size: 1.250rem; color: #666; }
.tab-menu.round-type li.tab-link.current a { font-weight: 600; font-variation-settings: 'wght' 600; border-color: var(--main-color); color: var(--main-color); }

@media screen and (max-width: 1100px){
    .tab-menu li.tab-link a { font-size: clamp(1.13rem, 2.364vw, 1.63rem); }
    .tab-menu li.tab-link a:lang(en) { font-size: clamp(16px, 2.182vw, 24px); }
    .tab-menu.round-type li.tab-link a { font-size: clamp(1rem, 1.818vw, 1.250rem); }
}
@media screen and (max-width: 768px){
    .tab-tit-wrap { display: block; padding: 0 !important; }
    .tab-tit-wrap .tab-menu { margin: 1.63em 0 0; }
    .tab-content-wrap .tab-content { margin: 1.25em 0 0; }
    .tab-menu li { margin-right: 0.89em; }
    .tab-menu.round-type li {margin-right: 8px;}
    .tab-menu.round-type li.tab-link a { min-width: 8.5em; }
}
@media screen and (max-width: 320px) {
    .tab-menu.round-type li.tab-link { width: 50%; }
    .tab-menu.round-type li.tab-link a { min-width: auto; }
}

/*========== common-table ==========*/
.common-table { width: 100%; border-radius: 4px; border-bottom: 1px solid var(--main-color); border-collapse: collapse; border-spacing: 0; }
.common-table.purple {border-bottom-color: #AEBBDD;}
.common-table thead { background-color: var(--main-color); }
.common-table.purple thead { background-color:#E5EBF8; }
.common-table thead th { padding: 0.89em 1.11em; font-size: 1.125rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #fff; text-align: center; vertical-align: middle; }
.common-table thead th .con-th {min-width: 36px;}
.common-table.purple thead th {padding: 1.39em 0.5em;border: 1px solid #AEBBDD; border-top: 2px solid #607AB2; border-left: none; font-weight: 600; font-variation-settings: 'wght' 600; color: #333;}
.common-table.purple thead th:last-child {border-right: none;}
.common-table thead th.cell-min { width: 140px !important; }
.common-table thead th.cell-min { width: 240px; }
.common-table.purple tbody tr th { border-bottom: 1px solid #AEBBDD; border-color: #AEBBDD; background-color:#E5EBF8;font-weight: 600; font-variation-settings: 'wght' 600; color: #333; vertical-align: middle;}
.common-table tbody tr td { padding: 0.89em 0.5em; background-color: #fff; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; font-size: 1.125rem; font-weight: 500; font-variation-settings: 'wght' 500; line-height: 1.5; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; text-align: center; vertical-align: middle; }
.common-table.purple tbody tr th {padding: 0.89em 0.5em;font-size: 1.125rem; font-weight: 600; font-variation-settings: 'wght' 600;color: #333; text-align: center;}
.common-table.purple tbody tr:last-child th {border-bottom: none;}
.common-table.purple tbody tr td {padding: 0.89em 0.5em;color: #999;}
.common-table tbody tr td:first-child { border-left: none; }
.common-table tbody.cursor-point tr td { cursor: pointer; }
.common-table tbody tr:last-child td { border-bottom: 0; }
.common-table tbody tr td.txt-top { padding-top: 40px; vertical-align: top; }
.common-table tbody tr td.txt-right { text-align: right; }
.common-table tbody tr td.txt-center { text-align: center; }
.common-table tbody tr td.txt-left { text-align: left; }
.common-table tbody tr td.check-td { cursor: default; }
.common-table tbody tr td.txt-upper { text-transform: uppercase; }
.common-table .con-td.check {position: relative; text-indent: -9999px;}
.common-table .con-td.check::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.22em; height: 1.22em; border: 2px solid #999; box-sizing: border-box; border-radius: 50%;}
.common-table .con-th .table-txt {display: block; margin-top: 8px; font-size: 0.875rem; font-weight: 600; font-variation-settings: 'wght' 600;color: #333;}
.common-table .con-th .table-sub-txt {display: block; margin-top: 6px; font-size: 0.875rem; font-weight: 400; font-variation-settings: 'wght' 400;color: #666;}
.br-top {border-top: 1px solid #ddd;}
.br-left {border-left: 1px solid #ddd;}
.br-top-none {border-top: none !important;}
.br-btm-none {border-bottom: none !important;}
.br-left-none {border-left: none !important;}
.br-right-none {border-right: none !important;}

/* common-table contents */
.common-table tbody tr td .con-td { word-break: keep-all; }
.common-table tbody tr td .con-td:has(.hashtag) { display: flex; flex-direction: column; gap: 7px; text-align: left; text-indent: 1.11em; }
.common-table tbody tr td.txt-left .con-td:has(.hashtag) { display: flex; flex-direction: column; align-items: center; text-indent: 0; }
.common-table tbody tr td .con-td .hashtag { display: inline-block; width: auto; color: inherit; transition: 300ms; }
.common-table tbody tr td .con-td .hashtag:hover { color: var(--main-color); }
.common-table tbody tr td.link .con-td { word-break: break-all; }
.common-table tbody tr td a { display: inline-block; width: 100%; transition: 0.6s; cursor: pointer; }
.common-table tbody tr td a:hover { text-decoration: underline; text-underline-position: under; }
.common-table .basic-check-box .table-check-box + label::before { margin: 0; }

/* common-table size */
.common-table.table-c5 thead th { width: calc(100%/5 - 5%); }
.common-table.table-c5 thead th.cell-wide { width: 33.33%; }
.common-table.table-c3 thead th { width: calc(100%/3 - 15%); }
.common-table.table-c3 thead th.cell-wide { width: 60%; }
.common-table.table-c6 thead th { width: calc(100%/5); }
@media screen and (max-width: 1100px){
    .common-table thead th { font-size: clamp(0.875rem, 1.636vw, 1.125rem); }
    .common-table tbody tr td { font-size: clamp(0.875rem, 1.636vw, 1.125rem); }
}
@media screen and (max-width: 768px){
    .common-table tbody tr td { padding: 0.57em 0.86em; }
}

/*========== select ==========*/
.tab-tit-wrap + .basic-select-wrap.flex {margin-top: 3.13em; padding-top: 2.50em; border-top: 1px solid #ccc;}
.basic-select-wrap.flex {display: flex; justify-content: flex-end; gap: 12px;}
.basic-select-box { position: relative; }
.basic-select-box select { width: 100%; min-width: 140px; height: 48px; padding: 0.44em 2.75em 0.44em 1.25em; border: 1px solid #ccc; border-radius: 28px; background-image: url("../images/common/icon-select-arrow.svg"); background-repeat: no-repeat; background-position: right 1em center; background-size: 1.11em 1.11em; font-size: 1.125rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #333; line-height: 1; -webkit-border-radius: 28px; -moz-border-radius: 28px; -ms-border-radius: 28px; -o-border-radius: 28px; }
.basic-select-box.w150 select { min-width: 150px; }
.basic-select-box.w190 select { min-width: 195px; }
@media screen and (max-width: 768px){
    .tab-tit-wrap + .basic-select-wrap.flex {margin-top: 30px;padding-top: 20px;}
}

/* Select - Animation */
.basic-select-box select~.border-focus:before, .basic-select-box select~.border-focus:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: var(--main-color); transition: 0.3s; }
.basic-select-box select~.border-focus:after { top: auto; bottom: 0; left: auto; right: 0; }
.basic-select-box select~.border-focus i:before, .basic-select-box select~.border-focus i:after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background-color: var(--main-color); transition: 0.4s; }
.basic-select-box select~.border-focus i:after { left: auto; right: 0; top: auto; bottom: 0; }
.basic-select-box select:focus~.border-focus:before, .basic-select-box select:focus~.border-focus:after { width: 100%; transition: 0.3s; }
.basic-select-box select:focus~.border-focus i:before, .basic-select-box select:focus~.border-focus i:after { height: 100%; transition: 0.4s; }
/* .basic-select-box select:focus { border-color: transparent; }  */
.basic-select-box.disabled select { border: 1px solid #D5D5E1; background-color: #F3F3F9; color: #AAAAAA; pointer-events: none; cursor: default; }
@media screen and (max-width: 1100px){
    .basic-select-wrap.flex {gap: 10px;}
    .basic-select-box select { height: 42px;padding: 0.44em 2.25em 0.44em 1em;background-position: right 0.8em center; font-size: clamp(0.875rem, 1.636vw, 1.125rem); }
    .basic-select-box.w190 select {min-width: 168px;}
}

/* input Checkbox */
input[type="checkbox"] + label { cursor: pointer; }
.basic-check-box input[type="checkbox"] { display: none; }
.basic-check-box input[type="checkbox"] + label { position: relative; display: inline-block; width: auto; height: auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; line-height: 1; }
.basic-check-box input[type="checkbox"] + label:hover { opacity: 0.8; }
.basic-check-box input[type="checkbox"] + label::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: 0 10px 0 0; border: 1px solid #ccc; border-radius: 2px; box-sizing: border-box; vertical-align: middle; transform: translateY(-2px); cursor: pointer; }
.basic-check-box input[type="checkbox"]:checked + label::before { border: 1px solid var(--main-color); background-color: var(--main-color); background-image: url("../images/common/icon-chk-on.svg"); background-repeat: no-repeat; background-position: center center; background-size: cover; cursor: pointer; }
.basic-check-box.disabled input[type="checkbox"] + label { cursor: default; }
.basic-check-box.disabled input[type="checkbox"] + label::before { border: 1px solid #ccc; background-color: #ccc; cursor: default; }
.basic-check-box.disabled input[type="checkbox"] + label:hover { opacity: 1; }

/*========== Input ==========*/
.input-box input { width: 100%; height: 48px; padding: 12px 48px 12px 20px; border: 1px solid #ccc; border-radius: 10px; font-size: 18px; color: #333; }
.input-box input::placeholder { font-size: inherit; color: #999; }
.input-box.number input { text-align: right; }

/* Input - Animation */
.input-box { position: relative; width: 100%; }
.input-box input~.border-focus:before, .input-box input~.border-focus:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: var(--main-color); transition: 0.3s; }
.input-box input~.border-focus:after { top: auto; bottom: 0; left: auto; right: 0; }
.input-box input~.border-focus i:before, .input-box input~.border-focus i:after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background-color: var(--main-color); transition: 0.4s; }
.input-box input~.border-focus i:after { left: auto; right: 0; top: auto; bottom: 0; }
.input-box input:focus~.border-focus:before, .input-box input:focus~.border-focus:after, .input-box input~.border-focus.on:before, .input-box input~.border-focus.on:after { width: 100%; transition: 0.3s; }
.input-box input:focus~.border-focus i:before, .input-box input:focus~.border-focus i:after, .input-box input~.border-focus.on i:before, .input-box input~.border-focus.on i:after { height: 100%; transition: 0.4s; }
.input-box input:focus { border-color: transparent; }

/* Input - line Animation */
.input-box.line input { background-color: transparent; border: none; border-bottom: 1px solid #ccc; border-radius: 0; }
.input-box.line .line-focus { position: absolute; bottom: 0; left: 0; display: inline-block; width: 0; height: 1px; background-color: var(--main-color); transition: width 0.4s; }
.input-box.line input:focus ~ .line-focus, .input-box.line input ~ .line-focus.on { width: 100%; transition: width 0.4s; }
/* input Radio */
.basic-radio-box { display: inline-block; margin-right: 12px; }
.basic-radio-box:last-child { margin: 0; }
.basic-radio-box input[type="radio"] { display: none; }
.basic-radio-box input[type="radio"] + label { position: relative; display: inline-block; margin: 0 auto; color: #666; font-weight: 500; font-variation-settings: 'wght' 500; vertical-align: middle; cursor: pointer; box-sizing: border-box; }
.basic-radio-box input[type="radio"] + label span { padding: 0 0 0 24px; }
.basic-radio-box.table input[type="radio"] + label span { padding: 0 0 0 16px; }
.basic-radio-box input[type="radio"] + label::before { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border: 1px solid #D5D5E1; border-radius: 50%; transform: translate(0, -50%); box-sizing: border-box; }
.basic-radio-box input[type="radio"] + label::after { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; transform: translate(25%, -50%); box-sizing: border-box; }
.basic-radio-box input[type="radio"]:checked + label { font-weight: 700; font-variation-settings: 'wght' 700; }
.basic-radio-box input[type="radio"]:checked + label::before { width: 18px; height: 18px; border: 1px solid var(--main-color); border-radius: 50%; vertical-align: middle; }
.basic-radio-box input[type="radio"]:checked + label::after { width: 12px; height: 12px; background-color: var(--main-color); border: 1px solid var(--main-color); border-radius: 50%; vertical-align: middle; }
.basic-radio-box.disabled input[type="radio"] + label::before { background-color: #f2f2f2; border: 1px solid #bbb; }
.basic-radio-box.disabled input[type="radio"]:checked + label::after, .basic-radio-box.disabled input[type="radio"][checked] + label::after { background-color: #bbb; border: 1px solid #bbb; }

/*========== search ==========*/
.common-sch-box { position: relative; width: 100%; min-width: 21.75em; }
.common-sch-box .search-btn { z-index: 1; position: absolute; top: 50%; right: 12px; transform: translate(0, -50%); width: 24px; height: 24px; cursor: pointer; }

/*========== Pagination ==========*/
.btn-wrap:has(.pagination-wrap) {margin-top: 80px;}
.pagination-wrap { display: flex; justify-content: center; align-items: center; margin: 30px 0 0; text-align: center; }
.btn-wrap .pagination-wrap {margin: 0;}
.pagination-btn { opacity: 1; display: inline-block; width: 24px; height: 21px; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; background-size: contain; transition: all 300ms; }
.pagination-btn:hover { opacity: 0.6; transition: all 300ms; }
.pagination-btn.first, .pagination-btn.last { width: 24px; height: 21px; }
.pagination-btn.first { margin-right: 5px; background-image: url("../images/common/icon-first-arrow-g.svg"); }
.pagination-btn.last { margin-left: 5px; background-image: url("../images/common/icon-last-arrow-g.svg"); }
.pagination-btn.prev { background-image: url("../images/common/icon-prev-g.svg"); }
.pagination-btn.next { background-image: url("../images/common/icon-next-g.svg"); }
.pagination-wrap.next .pagination-btn.first,
.pagination-wrap.next .pagination-btn.prev { display: block; }
.pagination-wrap.last .pagination-btn.last,
.pagination-wrap.last .pagination-btn.next { display: none; }
.pagination-list { display: inline-block; width: auto; margin: 0 11.5px; }
.pagination-list li { display: inline-block; position: relative; width: 24px; height: 21px; margin: 0 2.5px; line-height: 22px; }
.pagination-list li::before { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--main-color); transition: width 300ms; }
.pagination-list li.current::before,
.pagination-list li:hover::before { width: 100%; }
.pagination-list li button { width: 100%; height: 100%; font-size: 18px; font-weight: 600; font-variation-settings: 'wght' 600; color: #767676; transition: all 300ms; }
.pagination-list li.current button,
.pagination-list li:hover button { color: var(--main-color); }
@media screen and (max-width: 768px){
    .btn-wrap:has(.pagination-wrap) {margin-top: 60px;}
    .pagination-wrap {display: none;}
}

/*========== Sorting ==========*/
.sort-wrap { display: flex; justify-content: space-between; }
.sort-wrap .left { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sort-wrap .right { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/*========== 검색결과 없음 ==========*/
.no-result { display: flex; flex-direction: column; align-items: center; padding: 60px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-sizing: border-box; text-align: center; }
.no-result p { padding: 2.40em 0 0; background-image: url("../images/common/icon-info.svg"); background-position: center top; background-size: 1.80em auto; background-repeat: no-repeat; font-size: 1.250rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #999; word-break: keep-all; }
@media screen and (max-width: 1100px){
    .no-result p { font-size: clamp(1rem, 1.818vw, 1.250rem); }
}
@media screen and (max-width: 768px){
    .no-result { padding: 60px 0; }
    .no-result p { padding: 2.88em 0 0; background-size: 1.818em auto; font-size: 1rem; }
}

/*========== Progress-bar ==========*/
.progress-bar { display: block; position: relative; width: 100%; height: 2px; background-color: #ddd; }
.progress-bar::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 100%; background-color: var(--main-color); transform: scaleX(0); transform-origin: left; font-size: 0.833vw; }
@media (hover: hover) {
    ul li:hover .progress-bar::after { opacity: 1; transform: scaleX(1); transition: transform 600ms; }
}

/*========== Category-type ==========*/
.category-type { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.category-type > li { display: inline-block; padding: 0.38em 1em; box-sizing: border-box; border-radius: 1em; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; line-height: 1.2; background-color: var(--main-color); color: #fff; }
.category-type > li.point { background-color: #103174; }
@media screen and (max-width: 1100px) {
    .category-type > li { font-size: clamp(0.875rem, 1.455vw, 1rem); }
}
@media screen and (max-width: 768px){
    .category-type { gap: 4px; }
    .category-type > li { padding: 0.48em 1.14em; border-radius: 1.14em; }
}
/*========== Chart JS (Chart) ==========*/
.chart-part .tab-tit-wrap { font-size: 32px; padding-bottom: 0.625em;}
.chart-part:lang(en) .tab-tit-wrap { font-size: 28px;}
.chart-part .section-tit { font-size: inherit !important; font-weight: 700; font-variation-settings: 'wght' 700;}
.guide-box { display: inline-block; width: 1em; height: 1em; border-radius: 2px;}
.guide-box.grey { background-color: #999; }
.guide-box.blue { background-color: var(--main-color); }
.guide-box.dark-blue { background-color: #24447A; }
.guide-box.purple { background-color: #84A5FF; }
.guide-txt { color: #666; line-height: 1; }
.graph-guide-list { display: flex; align-items: center; position: relative; gap: 12px; }
.graph-guide-list > li { display: flex; align-items: center; gap: 8px; }
.research-graph { display: block; margin: 18px 0 0; }
.research-graph-wrap { margin: 20px 0 0; }
.research-graph-guide { display: flex; justify-content: flex-end; align-items: center; font-size: 1.125rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #666; }
.graph-guide-txt { font-size: clamp(18px,0.938vw,24px);font-weight: 400; font-variation-settings: 'wght' 400;color: #333;}
.chart-inner { position: relative; display: block; width: 100%;}
.tooltip-box { padding: 17px 43px;}
.tooltip-box::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 18px; height: 16px; background-image: url('../images/common/icon-tooltip-tri.svg');}
.tooltip-box::before { content:''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 8px; width: 18px; background-color: #fff; z-index: 1;}
.tooltip-box td { display: flex; align-items: center; font-size: 22px; font-weight: 700; font-variation-settings: 'wght' 700; color: #333;}
.tooltip-box.type02 { padding: 9px 26px;}
.tooltip-box.type02 td { font-size: 18px;}
.tooltip-box.type02::after { bottom: 30%; left: -5px; transform: rotate(90deg) translate(0,50%); transform-origin: center center; width: 18px; height: 16px;}
.tooltip-box.type02::before { bottom: 30%; left: 0; transform: translate(0,0); height: 18px; width: 6px; }

@media screen and (max-width: 1100px){
    .research-graph-guide { font-size: clamp(0.875rem, 1.6362vw, 1.125rem); }
    .research-graph-guide .graph-guide-txt { font-size: clamp(0.875rem, 1.6362vw, 1.125rem); }
    .chart-part .tab-tit-wrap { font-size: clamp(24px,2.909vw,32px);}
    .chart-part:lang(en) .tab-tit-wrap { font-size: clamp(24px,2.545vw,28px);}
    .chart-inner { overflow: hidden; overflow-x: auto; }
    .chart-inner::-webkit-scrollbar { display: block; width: 4px; height: 4px; border-radius:10px; transition: 300ms; }
    .chart-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); }
    .chart-inner::-webkit-scrollbar-track { background: #ccc; border-radius: 10px; }
}
@media screen and (max-width: 768px){
    .chart-part .tab-tit-wrap { padding: 0 0 20px !important; }
    .guide-box { width: 14px; height: 14px; }
    .graph-guide-list > li { gap: 4px; }
    .research-graph { margin: 20px 0 0; }
    .chart-box { width: 728px !important;}
    .tooltip-box { padding: 8px 24px;}
    .tooltip-box td { font-size: 16px;}
    .tooltip-box.type02 { padding: 7px 22px;}
    .tooltip-box.type02 td { font-size: 14px;}
}

/*========== Touch-mark ==========*/
.touch-area { position: relative; }
.touch-mark { display: none; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 117px; height: 52px; border-radius: 30px; background-color: rgba(0,0,0,0.5); transform: translate(-50%, -50%); transition: 300ms; }
.touch-mark.off { opacity: 0; visibility: hidden; }
.touch-mark span { display: inline-block; height: 100%; line-height: 52px; padding: 0 0 0 32px; font-size: 1rem; font-weight: 600; font-variation-settings: 'wght' 600; color: #fff; background-image: url('../images/sub/icon-drag.svg'); background-repeat: no-repeat; background-position: left center; background-size: 25px 32px; }
@media screen and (max-width: 1100px){
    .touch-mark { display: flex; }
}

/*========== Custom-select ==========*/
.custom-select-box { position: relative; width: 100%; min-width: 70px; height: 50px; border-radius: 2px; font-size: 18px; color: #444; cursor: pointer; }
.custom-select-box .init { position: relative; display: flex; align-items: center; width: 100%; height: 100%; padding: 0 36px 0 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #ddd; background-image: url("../images/common/icon-lnb-arrow-down.svg"); background-repeat: no-repeat; background-position: calc(100% - 12px) center; background-size: 24px 24px; }
.custom-select-box.open .init { border-bottom: none; border-radius: 4px 4px 0 0; }
.custom-select-box .init::after {content: "";position: absolute;top: 50%;right: 10px;width: 20px;height: 20px;transform: translate(0, -50%);background-image: url('../images/common/icon-lnb-arrow-down.svg');background-repeat: no-repeat;background-position: center;background-size: 100% auto;transition: background-image 200ms;}
.custom-select-box.open .init::after {background-image: url('../images/common/icon-lnb-arrow-up.svg');}
.custom-select-box ul { position: relative; width: 100%; overflow: hidden; }
.custom-select-box ul.sel { color: #333; }
.custom-select-box.open ul { z-index: 1; border: 1px solid rgba(255, 255, 255, 0.2); border-top: none; box-sizing: border-box; border-radius:0 0 4px 4px; }
.custom-select-box ul li { position: relative; width: 100%; height: 50px; display: none; padding: 12px 36px 11px 14px; background: #fff; color: #333; border-left: 1px solid #ddd; border-right: 1px solid #ddd; transition: color 300ms; }
.custom-select-box ul li.disabled { color: #ccc; pointer-events: none; }
.custom-select-box ul li::before { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; content: ""; width: calc(100% - 28px); height: 1px; background-color: #eee; }
.custom-select-box ul li:hover,
.custom-select-box ul li.selected { color: var(--point-color); }
.custom-select-box.disabled {background-color: #f7f8fa; color: #b8b8b8; cursor: default; pointer-events: none; }

/* 모바일 hover 방지 */
@media screen and (max-width: 768px){
    .custom-select-box ul li:not(.init):hover { color: #333; }
}