@charset "UTF-8";
/* 스크롤 고정 */
body.fixed{position:relative;overflow:hidden;}

/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
.popup-outer-wrap{position:relative;}
.popup-wrap{display:none;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;background:var(--black70);overflow:auto;text-align:center;}
.popup-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
.popup-wrap .popup-box{display:inline-block;position:relative;width:100%;max-width:calc(100% - 2rem);background:var(--white100);text-align:left;border-radius:1rem;box-shadow:0px 5px 21px 6px rgba(0,0,0,0.1);vertical-align:middle;}


.popup-box .popup-header{display:flex;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--black10);}
.popup-box .popup-header h4{color:var(--black06);font-weight:var(--font-weight-medium);}
.popup-box .popup-footer{display:flex;justify-content:center;padding:2rem 4rem;}

/* 일반 팝업 - 툴팁 레이아웃 (딤 배경이 없는 유형) */
.popup-wrap.tooltip{position:static;top:auto;left:auto;background:none;}
.popup-wrap.tooltip:before{display:none;}
.popup-wrap.tooltip .popup-box{position:absolute;top:100%;left:0;width:100%;z-index:500;border:1px solid var(--black10);border-radius:1rem;box-shadow:rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;}
.popup-wrap.tooltip .popup-body{min-height:auto;height:auto;}

/* 일반 팝업 - 아이프레임, 레이아웃 크기별 팝업 사용자 지정 */
.popup-wrap.layer-iframe .popup-body{padding:0;overflow:unset;}

/* 일반 팝업 - 팝업 열기 버튼 */
.btn-popup-open{display:inline-block;position:relative;margin:9px;padding:1.5rem 2.5rem;border:0;border-radius:1rem;background:var(--black10);font-size:inherit;color:var(--white100);text-align:center;}

/* 일반 팝업 - 팝업 닫기 버튼(헤더) */
.btn-popup-close{display:inline-block;position:absolute;top:0;right:0;z-index:10;width:8.6rem;height:8.6rem;}


/* 일반 팝업 - 팝업 닫기 버튼(푸터) */
.popup-footer > .btn-popup-close{padding:1rem 2rem;width:auto;height:auto;background:none;border:1px solid var(--black10);border-radius:5px;background:var(--white100);color:var(--black06);transition:all .2s;}
.popup-footer > .btn-popup-close:hover{background:#101725;color:var(--white100);}
.popup-footer > .btn-popup-close:before,
.popup-footer > .btn-popup-close:after{display:none;}

/* 일반 팝업 - 옵션(외부스크롤) */
.outer-scroll .popup-wrap{padding:2rem;box-sizing:border-box;}
.outer-scroll .popup-wrap .popup-body{max-height:100%;height:auto;}

[data-popup-type="timeline"] .popup-box{padding:5rem;border-radius:0 12rem 0 4rem;width:93.4rem;height:49.1rem;box-sizing:border-box;}
[data-popup-type="people"] .popup-box{padding:5.8rem 4.1rem 6rem 4.8rem;border-radius:0 12rem 0 4rem;width:84.5rem;box-sizing:border-box;}

/* 디지털 아카이브 게시글 팝업 공통 */
[data-popup-type="b-archive-popup"] .popup-box{width:83.1rem;}
.b-archive-popup .popup-navi{display:flex;justify-content:space-between;position:absolute;top:50%;left:50%;padding:0 2rem;width:100%;max-width:184rem;box-sizing:border-box;transform:translate(-50%, -50%);}
.b-archive-popup .popup-navi a{display:flex;align-items:center;gap:1.4rem;}
.b-archive-popup .popup-navi a.popup-prev::before{content:'';width:4.8rem;height:4.8rem;border-radius:50%;background:var(--color21) url(/_res/dongguk/_share/img/board/ico-board-popup-prev-arrow@2x.png) no-repeat center/1.3rem 1.2rem;transition:0.2s ease;}
.b-archive-popup .popup-navi a.popup-next::after{content:'';width:4.8rem;height:4.8rem;border-radius:50%;background:var(--color21) url(/_res/dongguk/_share/img/board/ico-board-popup-next-arrow@2x.png) no-repeat center/1.3rem 1.2rem;transition:0.2s ease;}
.b-archive-popup .popup-navi a.popup-prev:hover::before,
.b-archive-popup .popup-navi a.popup-next:hover::after{background-color:var(--color03);}
.b-archive-popup .popup-navi a span{display:-webkit-box;max-width:13rem;font-size:2rem;color:var(--color47);line-height:2.6rem;letter-spacing:-0.025em;text-overflow:ellipsis;word-wrap:normal;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;box-sizing:border-box;}
.b-archive-popup .popup-box{padding:1rem;border-radius:1rem 1rem 10rem 1rem;box-sizing:border-box;}
.b-archive-popup .btn-popup-close{display:flex;align-items:center;gap:1.3rem;top:unset;bottom:0;width:unset;height:unset;}
.b-archive-popup .btn-popup-close::after{content:'';width:6.5rem;height:6.5rem;border-radius:50%;background:var(--color04) url(/_res/dongguk/_share/img/board/ico-board-popup-close@2x.png) no-repeat center/1.5rem;}
.b-archive-popup .btn-popup-close span{font-size:2rem;font-weight:var(--font-weight-semibold);color:var(--color04);line-height:3rem;letter-spacing:-0.05em;}
.b-archive-popup .b-archive-swiper{border-radius:1rem;}
.b-archive-popup .b-archive-swiper .swiper-slide .archive-img-box{aspect-ratio:812/540;}
.b-archive-popup .b-archive-swiper-control{display:flex;justify-content:center;padding:1.5rem 0 0;}
.b-archive-popup .b-archive-swiper-control .swiper-archive-pagination{display:flex;gap:4px;}
.b-archive-popup .b-archive-swiper-control .swiper-archive-pagination .swiper-pagination-bullet{width:8px;height:8px;border-radius:50%;background-color:var(--black09);opacity:1;}
.b-archive-popup .b-archive-swiper-control .swiper-archive-pagination .swiper-pagination-bullet-active{background-color:var(--color03);}
.b-archive-popup .b-archive-txt-box{display:flex;position:relative;margin:-3px 0 0;padding:0 2rem 2rem;}
.b-archive-popup .b-archive-txt-box .b-title-box .b-cate{display:inline-block;margin:0 0 1.2rem;padding:2px 1.4rem;border-radius:1.5rem;background-color:var(--color33);font-size:1.8rem;font-weight:var(--font-weight-light);color:var(--white100);line-height:2.6rem;letter-spacing:-0.04em;}
.b-archive-popup .b-archive-txt-box .b-title-box .b-title{display:-webkit-box;padding:0 1.5rem 0 0;font-size:2.4rem;font-weight:var(--font-weight-light);color:var(--black100);line-height:3rem;text-overflow:ellipsis;word-wrap:normal;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;box-sizing:border-box;}
.b-archive-popup .b-archive-txt-box .b-title-box .b-date{padding:4px 0 0;font-size:1.6rem;font-weight:var(--font-weight-semibold);color:var(--color03);line-height:2.2rem;}
.b-archive-popup .b-archive-txt-box .b-tag-box{position:absolute;top:0;right:2rem;padding:2px 0 0;}
.b-archive-popup .b-archive-txt-box .b-tag-box ul{display:flex;flex-wrap:wrap;gap:1.8rem;}
.b-archive-popup .b-archive-txt-box .b-tag-box ul li{font-size:1.6rem;color:var(--black06);line-height:2.2rem;letter-spacing:-0.025em;}

/* 영상 아카이브 팝업 */
[data-popup-type="b-archive-popup"] .popup-box{width:82rem;}
.b-video-popup .b-video-box{position:relative;padding-bottom:56.25%;border-radius:1rem;width:100%;max-width:80rem;height:0;overflow:hidden;}
.b-video-popup .b-video-box .b-video-thumb-box{position:absolute;top:0;right:0;width:100%;height:100%;overflow:hidden;}
.b-video-popup .b-video-box .b-video-thumb-box img{display:block;position:absolute;top:0;left:0;z-index:10;max-width:100%;width:100%;height:100%;object-fit:cover;}
.b-video-popup .b-video-box .b-video-thumb-box .youtube-play-btn{display:block;position:absolute;top:50%;left:50%;z-index:10;border-radius:50%;width:8rem;height:8rem;background:var(--black70);transform:translate(-50%,-50%);}
.b-video-popup .b-video-box .b-video-thumb-box .youtube-play-btn:after{content:'';position:absolute;top:50%;left:50%;width:2.5rem;height:2.9rem;background:url(/_res/dongguk/_share/img/board/ico-play01@2x.png) no-repeat center center/100%;transform:translate(-50%,-50%);}
.b-video-popup .b-video-box .yt-player,
.b-video-popup .b-video-box .video-player .fr-video,
.b-video-popup .b-video-box .video-player video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.b-video-popup .b-archive-txt-box{margin:0;padding:3rem 0 2rem 2rem;}
.b-video-popup .b-archive-txt-box .b-title-box{position:relative;width:100%;}
.b-video-popup .b-archive-txt-box .b-youtube{display:inline-block;position:absolute;top:0;right:0;padding:3.5px 1.2rem 3.5px 4.3rem;border:1px solid var(--color32);border-radius:2em;background:var(--white100) url(/_res/dongguk/_share/img/board/ico-youtube@2x.png) no-repeat center left 1.3rem/2.4rem;font-weight:var(--font-weight-medium);font-size:1.4rem;line-height:2rem;color:var(--black06);letter-spacing:-0.025em;}

@media screen and (max-width:1280px){
	/* 디지털 아카이브 게시글 팝업 공통 */
	.b-archive-popup .popup-navi a span{display:none;}
}


@media screen and (max-width:1024.98px) {
	/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
	.popup-box .popup-footer{padding:2rem;}

	/* 일반 팝업 - 팝업 닫기 버튼(헤더) */
	.btn-popup-close{width:1.5rem;height:1.5rem;}

	/* 일반 팝업 - 팝업 닫기 버튼(푸터) */
	.popup-footer > .btn-popup-close{padding:8px 1rem;}

	/* 일반 팝업 - 옵션(외부스크롤) */
	.outer-scroll .popup-wrap .popup-body{max-height:100%;min-height:100%;height:auto;}

	/* 디지털 아카이브 게시글 팝업 공통 */
	[data-popup-type="b-archive-popup"] .popup-box{max-width:calc(100% - 12rem);}
	.b-archive-popup .popup-navi{padding:0 1rem;}
	.b-archive-popup .popup-navi a.popup-prev::before,
	.b-archive-popup .popup-navi a.popup-next::after{width:3.8rem;height:3.8rem;background-size:1.1rem 1rem;}
	.b-archive-popup .btn-popup-close{gap:1rem;}
	.b-archive-popup .btn-popup-close::after{width:4.5rem;height:4.5rem;background-size:1.2rem;}
	.b-archive-popup .btn-popup-close span{font-size:1.6rem;line-height:2.2rem;}
	.b-archive-popup .b-archive-txt-box{display:flex;flex-direction:column;margin:0;padding:1rem 0;}
	.b-archive-popup .b-archive-txt-box .b-title-box .b-cate{margin:0 0 6px;padding:2px 1rem;font-size:1.4rem;line-height:2rem;}
	.b-archive-popup .b-archive-txt-box .b-title-box .b-title{padding:0;font-size:2rem;line-height:2.6rem;}
	.b-archive-popup .b-archive-txt-box .b-title-box .b-date{padding:2px 0 0;font-size:1.4rem;line-height:2rem;}
	.b-archive-popup .b-archive-txt-box .b-tag-box{position:absolute;top:0;right:2rem;padding:2px 0 0;}
	.b-archive-popup .b-archive-txt-box .b-tag-box ul{display:flex;flex-wrap:wrap;gap:1.8rem;}
	.b-archive-popup .b-archive-txt-box .b-tag-box{position:static;padding:1rem 8.5rem 0 0;}
	.b-archive-popup .b-archive-txt-box .b-tag-box ul{gap:1px 1.8rem;}
	.b-archive-popup .b-archive-txt-box .b-tag-box ul li{font-size:1.4rem;line-height:2rem;}
	
	/* 영상 아카이브 팝업 */
	.b-video-popup .b-video-box .b-video-thumb-box .youtube-play-btn{width:4rem;height:4rem;}
	.b-video-popup .b-video-box .b-video-thumb-box .youtube-play-btn:after{width:1rem;height:1.2rem;}
	.b-video-popup .b-archive-txt-box{padding:1rem 0;}
	.b-video-popup .b-archive-txt-box .b-title-box:has(.b-youtube){padding:3rem 0 0;}
}