@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ajin Lee. (Weaverloft Corp.)
 * 2. Production Date: 2024-01-02
 * 3. Client: 서울대학교병원 융합의학기술원
 */
/* ------------------------------------------------------------------------ 
 Editor Fonts
------------------------------------------------------------------------ */
.edit-box-cont * {font-family:'Pretendard'; float: none !important;}
/* 에디터 css */
.edit-box-cont div:has(iframe) { padding: 0 !important; }
.edit-box-cont iframe { position: static !important; width: 100%; height: auto ; aspect-ratio: 16/9; }
.edit-box-cont a { display: inline-block; color: #2955CC; transition: opacity 300ms;}
.edit-box-cont img { width: auto; height: auto; max-width: 100% !important; vertical-align: middle;}
.edit-box-cont em { font-style: italic;}
.edit-box-cont em strong { font-style: italic;}
.edit-box-cont ol { list-style: decimal; margin-left: 1.05em;}
.edit-box-cont ul { list-style: disc; margin-left: 1.05em;}
.edit-box-cont h1 { font-size: 36px;}
.edit-box-cont h2 { font-size: 27px;}
.edit-box-cont h3 { font-size: 21px;}
.edit-box-cont h5 { font-size: 15px;}
.edit-box-cont h6 { font-size: 12px;}
.edit-box-cont table thead { background-color: #E5EBF8;}
.edit-box-cont table thead th { padding: 0.89em 0.5em; word-break: keep-all; border: 1px solid #AEBBDD; border-top: 2px solid #607AB2; border-left: none; font-weight: 600;}
.edit-box-cont table thead th:last-child { border-right: none; }
.edit-box-cont table tbody th { padding: 0.89em 0.5em; font-weight: 600; word-break: keep-all; border-bottom: 1px solid #AEBBDD; border-color: #AEBBDD; background-color: #E5EBF8;}
.edit-box-cont table tbody td { padding: 0.89em 0.5em; font-weight: 400; word-break: keep-all; background-color: #fff; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
.edit-box-cont table tbody td:first-child { border-left: none;}
.edit-box-cont table:not(:has(thead)) tbody tr:first-child td { border-top: 2px solid #bbb;}
.edit-box-cont table:not(:has(thead)) tbody tr:first-child th { border-top: 2px solid #607AB2;}
@media screen and (min-width: 769px){
    @media (hover:hover) {
        .edit-box-cont a { opacity: 0.8;}
    }
}

/*========== Detail ==========*/
.sub-top.detail { background-image: url('../images/common/sub-bg-detail.png'); background-position: center; background-color: #EEF3FF; }
.sub-top.detail .sub-title-wrap { padding: 3.44em 0; }
.detail .inner { max-width: 1100px;}
.detail-sec .inner { max-width: 1100px;}
.detail-title-area .sub-tit { display: inline-block; min-width: 80px; margin: 0 0 14px; padding: 0.44em 1.22em; border-radius: 1.222em; border: 1px solid var(--main-color); font-size: 1.125rem; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-color); text-align: center; }
.detail-title-area .main-tit { display: flex; align-items: center; gap: 15px; font-size: 2.500rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #111; word-break: keep-all; text-wrap: pretty; line-height: 1.4; }
.detail-pro-name { margin: 10px 0 0; font-size: 1.500rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #111; }
.detail-pro-name em { font-weight: 500; font-variation-settings: 'wght' 500; }
.detail-btm-area { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin: 20px 0 0; }
.detail-btm-area ul { display: flex; }
.detail-btm-area ul.list-info > li { position: relative; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #666; }
.detail-btm-area ul.list-info > li a { color: inherit; }
.detail-btm-area ul.list-info > li + li { margin: 0 0 0 1em; padding: 0 0 0 1em; }
.detail-btm-area ul.list-info > li + li::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1px; height: 16px; background-color: #ddd; }
.detail-btm-area ul.list-info > li:not(.list-date) span { display: inline-block; padding: 0 0 0 2em; background-repeat: no-repeat; background-position: left center; background-size: 1.5em auto; }
.detail-btm-area ul.list-info > li.list-view span { background-image: url("../images/common/icon-eyes-g.svg"); }
.detail-btm-area ul.share-area { gap: 10px; }
.share-area li a { display: block; position: relative; width: 2.500em; height: 2.500em; border-radius: 50%; border: 1px solid #C6CFED; box-sizing: border-box; background-color: #fff; transition: background-color 300ms; }
.share-area li a .share-img { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.share-area li a .share-img img { width: 1.25em; height: auto; }
.detail-sec { padding: 3.75em 0 11.88em; }
.edit-box { max-width: 1100px; margin: 0 auto; padding-bottom: 3.75em; box-sizing: border-box; }
.edit-box-cont { max-width: 1100px; width: 100%; margin: 0 auto; font-size: 18px;}
.detail-btm-wrap { padding: 20px 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; box-sizing: border-box; }
.detail-btm-wrap:has( + .detail-btm-wrap) { border-bottom: none;}
.detail-files { display: flex; flex-wrap: wrap; gap: 12px; }
.detail-files li a { display: inline-block; min-width: 105px; padding: 0.44em 2.44em 0.44em 1.22em; border-radius: 20px; border: 1px solid #ddd; box-sizing: border-box; background-image: url("../images/common/icon-download-g.svg"); background-repeat: no-repeat; background-position: right 1.22em center; background-size: 1.250em auto; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #666; line-height: 1; transition: background-color 300ms; cursor: pointer;}
.detail-files li a span { display: inline-block; margin: 0 1.67em 0 0; line-height: 1.1; }
@media (hover: hover){
    .share-area li:hover a { background-color: #F5F5F5; }
    .detail-files li:hover a { background-color: #F5F8FF; }
}
@media screen and (max-width: 1480px){
    .edit-box { max-width: 100%; margin: 0 20px; }
    .detail .inner { max-width: 1100px; margin: 0 auto;}
    .detail-sec .inner { max-width: 1100px; margin: 0 auto;}
}
@media screen and (max-width: 1140px) {
    .detail .inner { margin: 0 20px;}
    .detail-sec .inner { margin: 0 20px;}
    .detail-sec:not(.spark-board-detail) .edit-box .inner { margin: 0;}
}
@media screen and (max-width: 1100px) {
    .sub-top.detail { background-image: url('../images/common/sub-bg-detail-mo.png'); }
    .detail-title-area .sub-tit { font-size: clamp(14px, 1.636vw, 1.125rem); }
    .detail-title-area .main-tit { font-size: clamp(22px, 2.182vw, 2.500rem); }
    .detail-pro-name { font-size: clamp(1rem, 3.636vw, 1.500rem); }
    .detail-btm-area ul.list-info > li { font-size: clamp(0.875rem, 1.455vw, 1rem); }
    .detail-files li a { font-size: clamp(0.875rem, 1.455vw, 1rem); }

}
@media screen and (max-width: 768px){
    .detail-sec { padding: 40px 0 160px; }
    .sub-top.detail { background-image: url('../images/common/sub-bg-detail-mo.png'); }
    .sub-top.detail .sub-title-wrap { padding: 40px 0 20px; }
    .detail-title-area .main-tit { flex-direction: column; gap: 10px; align-items: flex-start; }
    .detail-pro-name { margin: 30px 0 0; }
    .detail-title-area .sub-tit { min-width: 94px; margin: 0 0 16px; padding: 0.38em 1.25em; border-radius: 1.25em; }
    .sub-title-wrap:has(.detail-pro-name) .detail-btm-area { margin: 8px 0 0; }
    .detail-btm-area ul.list-info > li + li { margin: 0 0 0 10px; padding: 0 0 0 10px; }
    .detail-btm-area ul.list-info > li + li::before { height: 12px; }
    .detail-btm-area ul.list-info > li:not(.list-date) span { padding: 0 0 0 18px; background-size: 16px auto; }
    .share-area li a { width: 32px; height: 32px; }
    .share-area li a .share-img img { width: 16px; }
    .edit-box { padding-bottom: 40px; }
    .detail-btm-wrap { margin: 0; padding: 16px 0; border-width: 1px; }
    .detail-btm { margin: 0 20px; }
    .detail-files li a { padding: 7px 22px 7px 16px; background-position: right 16px center; background-size: 16px auto; }
    .detail-files li a span { margin: 0 16px 0 0; }
}