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

/*========== modalPopup ==========*/
.modal { visibility: hidden; opacity: 0; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 150; width: 100%; height: 100vh; height: 100dvh; background-color: rgba(0, 0, 0, 0.4); transition: 300ms 200ms; } 
.modal.open { visibility: visible; opacity: 1; transition: 300ms; } 
.modal-wrap { opacity: 0; max-width: 65.00em; max-height: 94vh; transition: all 300ms;} 
.modal.open .modal-wrap { opacity: 1; margin-top: 0; transition: 300ms 200ms; } 
.modal-content { position: relative; overflow: hidden; width: auto; background-color: #fff; border-radius: 2px; } 
.modal-tit-wrap { margin: 0 26px; padding: 30px 48px 30px 0; border-bottom: 1px solid #222; } 
.modal-tit { font-size: 24px; font-weight: 700; font-variation-settings: 'wght' 700; color: #222; } 
.modal-sub-tit { margin-top: 10px; color: #666; word-break: keep-all; } 
.modal-cont-wrap { overflow: hidden; margin: 0 5em; padding: 5em 0 7.50em; line-height: 1.4; word-break: keep-all; } 
.modal div::-webkit-scrollbar { width: 4px; height: 4px; } 
.modal div::-webkit-scrollbar-thumb { height: 30%; background: #ccc; border-radius: 10px; } 
.modal div::-webkit-scrollbar-track { background: #f5f5f5; } 
.modal-btn-wrap { position: absolute; top: 0; right: 0; } 
.modal-btn-wrap a { opacity: 1; display: block; width: 5em; height: 5em; background-image: url("../../asset/images/common/icon-pop-close.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5em 1.5em; text-indent: -9999px; transition: opacity 300ms; } 
.modal-btn-wrap a:hover { opacity: 0.7; } 
/* slide */
.modal .article-swiper { width: 100%; height: 100%; } 
.modal .article-swiper .article-slide .article-slide-img { display: flex; justify-content: center; align-items: center; overflow: hidden; overflow-y: auto; width: 100%; height: 100%; max-height: calc(100vh - (200px + 10vh)); max-height: calc(100dvh - (200px + 10dvh));} 
.modal .swiper-notification { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 
.modal .swiper-bottom {position: relative;}
.modal .swiper-pagination { position: absolute; bottom: 3.13em; left: 50%; transform: translate(-50%, 0); transition: 500ms; -webkit-transition: 500ms; -moz-transition: 500ms; -ms-transition: 500ms; -o-transition: 500ms; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); } 
.modal .swiper-pagination span { padding: 0 6px; font-size: 1rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #666; } 
.modal .swiper-pagination span.swiper-pagination-current { color: var(--main-color); } 
.modal .swiper-btns { z-index: 155; position: relative; bottom: 3.88em; left: 50%; transform: translate(-50%, 0); width: 17.50em; } 
.modal .swiper-btns span { transform: translate(0, -50%); margin: 0; font-size: 0; } 
.modal .swiper-button-next, .modal .swiper-button-prev { display: inline-block; width: 44px; height: 44px; background-size: 12px auto; transition: opacity 300ms; } 
.modal .swiper-button-next { background-image: url("../../asset/images/common/icon-slide-next.svg"); } 
.modal .swiper-button-prev { background-image: url("../../asset/images/common/icon-slide-prev.svg"); } 
.modal .swiper-button-next:hover, .modal .swiper-button-prev:hover { opacity: 0.6; } 
@media screen and (max-width: 1100px){
    .modal-wrap { width: 88.888%; } 
}
@media screen and (max-width: 768px){
    .modal-cont-wrap { margin: 0 20px; padding: 60px 0 120px; } 
    .modal .article-swiper .article-slide .article-slide-img {max-height: calc(100vh - (180px + 10vh));max-height: calc(100vh - (180px + 10vh));}
    .modal-btn-wrap { top: 12px; right: 12px; } 
    .modal-btn-wrap a { width: 40px; height: 40px; background-size: 20px 20px; } 
    .modal .swiper-pagination span { font-size: 14px; } 
    .modal .swiper-button-next, .modal .swiper-button-prev { background-size: 10px auto; } 
}
@media screen and (max-width: 420px){
    .modal .swiper-btns { width: 100%; } 
}

/*========== msgPopup ==========*/
.modal.popSaveMsg, .modal.popCancelMsg {z-index: 20102;} 
.msg .modal-wrap {width: 100%;max-width: 360px;max-height: 70vh; } 
.msg .modal-content {margin: 0 auto;padding: 36px 30px 26px; } 
.modal .scroll-wrap {max-height: calc(100vh - 400px);overflow-y: auto;}
.msg.msg-con .modal-wrap {max-width: 400px; } 
.msg.msg-con .modal-content {max-width: 400px; } 
.modal-msg-wrap p {font-size: 14px;font-weight: 400;font-variation-settings: 'wght' 400;line-height: 1.3;color: #333;text-align: center;word-break: keep-all;white-space : pre-line; } 
.modal-msg-wrap p:nth-child(2) {margin: 18px 0; } 
.modal-msg-wrap .msg-tit {font-size: 1.125rem;font-weight: 600;font-variation-settings: 'wght' 600;color: #111; } 
.modal-msg-btn-wrap {display: flex;justify-content: center;align-items: center;margin-top: 24px; } 
.modal-msg-btn-wrap.select {justify-content: space-between; } 
.modal-msg-btn-wrap .common-btn.alert {width: 45%;padding: 8px 10px;border-radius: 3px;border: 1px solid var(--main-color);font-size: 1.125rem; text-align: center;line-height: 1.2; } 
.modal-msg-btn-wrap .common-btn.alert:hover {border-color: #ddd;}
.modal-msg-btn-wrap.select .common-btn {width: 48%;min-width: inherit; } 
.modal-msg-btn-wrap.select.three .common-btn {width: 31%; } 
.modal.msg.exPop .modal-content {padding: 0; } 
.modal.popSaveMsg .modal-content, .modal.popCancelMsg .modal-content {max-width: 260px; } 
@media screen and (max-width: 768px){
    .modal-msg-wrap .msg-tit {font-size: 16px;}
    .modal-msg-btn-wrap .common-btn.alert {font-size: 16px;}
    .modal-msg-btn-wrap {margin-top: 18px;}
}
@media screen and (max-width: 420px){
    .msg .modal-wrap { max-width: 90%;}
    .modal .swiper-btns { width: 100%; } 
}