@charset "utf-8";

/* 상단팝업 */
#topPop { position:relative; width:100%; -webkit-transition:0.3s; transition:0.3s; background:#586c81; color:#fff; z-index:100; overflow:hidden; height:6.5rem; margin-top:-6.5rem;}
#topPop .popup_wrap { position:relative; max-width:60rem; margin-left:auto; margin-right:auto; overflow:hidden; -webkit-transition:0.3s; transition:0.3s;}
#topPop .slick-list{ position:relative; margin:.75rem 1.75rem 0; }
#topPop .slick-list:before { content:""; position:absolute; left:-1px; top:0; height:100%; border-left:2px solid #586c81; z-index: 1;}
#topPop .slick-list .slick-track { display: flex !important; margin: 0 !important; }
#topPop .item .Pop_link { position: relative; display: flex; align-items: center; flex-wrap: wrap; height: 3.75rem; justify-content: space-between; padding: 0 1rem; }
#topPop .item { visibility:hidden; }
#topPop .item.slick-slide { visibility:visible; overflow: hidden;}
#topPop .item .Pop_link:before { content:""; position:absolute; left:0; top:0; height:100%; border-left:1px dotted rgba(255,255,255,0.5); z-index: 1;}
#topPop .item .Pop_link a.top_Pop { display: flex; align-items: center; width: calc(100% - 5rem); }
#topPop .item .Pop_link a.top_Pop .img { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }
#topPop .item .Pop_link a.top_Pop .img img { max-width: 2.1rem; }
#topPop .item .Pop_link a.top_Pop > dl { width: calc(100% - 3.5rem);  margin-left: 0.5rem;   }
#topPop .item .Pop_link a.top_Pop .tit {font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#topPop .item .Pop_link a.top_Pop .txt { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 1.8rem; font-size: 0.65rem; color: rgba(255,255,255,0.75); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis;}
#topPop .item .Pop_link a.top_Pop .txt em { position: absolute; right: 0; bottom: 0; font-size: 0.65rem; color: #fff; display: none; }
#topPop .item .Pop_link a.top_Pop .txt.txt_more { padding-right: 1.5rem; }
#topPop .item .Pop_link a.top_Pop .txt.txt_more em { display: inline-block; }
#topPop .item .aWr {display: block; margin: -0.2rem;}
#topPop .item .aWr a {display: flex; justify-content: center; align-items: center; width: 4rem; height: 1.4rem; border-radius: 0.7rem; font-size: 0.6rem; margin: 0.2rem; transition: 0.2s;}
#topPop .item .aWr a.right_Pop {border: 1px solid #fff;}
#topPop .item .aWr a.bot_Pop {background: #2a3e54;}
#topPop .item .aWr a.bot_Pop i {margin-left: 0.1rem;}
#topPop .slick-arrow { position:absolute; top:1.8rem; font-size:0;}
#topPop .slick-arrow:before {font-family:"xeicon"; font-size:1.2rem; }
#topPop .slick-prev { left:0; }
#topPop .slick-prev:before {content:"\e93d";}
#topPop .slick-next { right:0; }            
#topPop .slick-next:before {content:"\e940"; }        
#topPop .control { position:relative; line-height:1.8rem; text-align:right; font-size:13px; font-weight:400; margin-top:.15rem; }
#topPop .control .close input[type="checkbox"]{ margin-right:4px;}
#topPop .control .close label {margin-left: 0.5rem; cursor: pointer;}
#topPop .control .close a{ display:inline-block; vertical-align: top; }
#topPop .control .close a i{ width:1.8rem; height:1.8rem; line-height:1.8rem; text-align:center; font-size:.8rem; color:#fff; margin-left:8px; background:#4c5d6f;}
#topPop .control > a{ position:absolute; left:0; bottom:.5rem; width:1.4rem; height:1.4rem; line-height:1.4rem; border-radius:50%; text-align:center; font-size:11px; color:#fff; background:#4b5f74;}
#topPop .control > .play{display:none;}
#topPop .control a,
#topPop .control a i{ transition: all .2s; -webkit-transition: all .2s;}
#topPop #upPopSlide .slick-dots { position: absolute; left: 1.5rem; bottom: 0.5rem; display: flex; align-items: center; z-index: 1; gap: 0.25rem; height: 1.4rem; margin-left: 0.25rem; }
#topPop #upPopSlide .slick-dots li { display: flex; align-items: center; }
#topPop #upPopSlide .slick-dots li button { text-indent: -9999px; border-radius: 50%; border: 2px solid #fff; width: 0.5rem; height: 0.5rem; padding: 0; transition: 0.15s; -webkit-transition: 0.15s;}
#topPop #upPopSlide .slick-dots li.slick-active button { background: #fff; }
/* 상단팝업 : active */
#topPop .item .Pop_link a.top_Pop:focus > dl,
#topPop .item .Pop_link a.top_Pop:hover > dl,
#topPop .control .close label:hover { text-decoration:underline; }
#topPop .control > a:hover,
#topPop .control > a:focus,
#topPop .close > a:hover i,
#topPop .close > a:focus i{ background:#35a5b4;}

/* open */
.open.upPop #topPop { margin-top:0;}

/* popBtn */
.popBtn { display:none; }

/* 국가공휴일 */
#topPop .hldy_kr{ position:relative; line-height:2rem; height:2rem; background:#f9f9f9; border-bottom:1px solid #f1f1f1; color:#111; font-size:.7rem;}
#topPop .hldy_kr:before{ content:""; position:absolute; left:0; top:0; width:100vw; height:60%; background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%); opacity: 0.4;}
#topPop .hldy_kr p{ position:relative; max-width:60rem; margin:0 auto; text-align:right;}
#topPop .hldy_kr p:before{content:""; display:inline-block; width:31px; height:20px; margin-right:10px; border:1px solid #ccc; vertical-align:middle; background:url('/resource/images/dgedu/layout/img_nlg.png') no-repeat center/cover; image-rendering:-webkit-optimize-contrast;}
#topPop .hldy_kr p em{ font-weight:600;}

/* 캘린더 : 일정리스트 팝업 */
#schePop{display:none; position:fixed; left:50%; top:50%; width:100%; max-width:30rem; max-height:25rem; padding:0.5rem; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background:#fff; border-radius:.75rem; box-shadow: 0 0 1rem rgba(0,0,0,.2); z-index:101;}
#schePop.active{display:block;}
#schePop h4{color:#fff; font-size:.9rem; line-height:2.5rem; background:#5b6270; border-radius:.5rem; padding:0 1rem; text-align:left;}
#schePop .list{ max-height:11rem; margin-top:0.5rem; overflow-y: auto;}
#schePop table{ border-top:2px solid #666;}
#schePop tr th{ padding:0.5rem 3px; font-size:.8rem; border-bottom:1px solid #ddd; word-break: keep-all; background:#f1f1f1;}
#schePop tr td{ text-align:center; color:#111; font-size:.75rem; padding:0.5rem 3px; border-bottom:1px solid #ccc;}
#schePop .close{position:absolute; right:.5rem; top:.5rem; width:2.5rem; height:2.5rem; line-height:2.1rem; font-size:1rem; border-radius:.5rem; background:#fff; color:#5b6270; border:.2rem solid #5b6270; text-align:center;}
#schePop .close:hover,
#schePop .close:focus{border-color:#19233a; background:#19233a; color:#fff;}

/* 레이어팝업 */
.lyrPop {display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; z-index: 999;}
.lyrWrap {width: 95%; max-width: 35.5rem; max-height: 90vh; border-radius: 1rem; background: #fff; box-shadow: 0.2rem 0.2rem 1.05rem rgba(0,0,0,0.09); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); overflow: auto;}
.lyrPop .tit {background: #076deb; padding: 0.75rem 0; padding-left: 1.5rem; padding-right: 3.5rem;}
.lyrPop .tit h2 {font-size: 1.1rem; color: #fff; font-weight: 600; margin: 0;}
.lyrPop .inner {padding: 0.5rem 1rem 0.75rem;}
.lyrPop .btnClose {display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; font-size: 1.4rem; color: #fff; position: absolute; right: 0.75rem; top: 0.5rem;}

/* 레이어팝업 : 팝업리스트 */
.lyrWrap .popuplst{ max-height:15.25rem; padding:0 0.5rem;}
.lyrWrap .popuplst table{ width:35rem; border-top:2px solid #0063be;}
.lyrWrap .popuplst table td{ padding:0.75rem 0.5rem; text-align:center; border-bottom:1px solid #ccc;}
.lyrWrap .popuplst table td span{ display:inline-block; min-width:3rem; line-height:1.5rem; text-align:center; padding:0 0.5rem; border-radius:1rem; color:#fff; background:#f58e0f; font-size:0.75rem;}
.lyrWrap .popuplst table td p{ position:relative; text-align:left; padding-left:10px; }
.lyrWrap .popuplst table td p:before{ content:""; position:absolute; left:0; top:.5rem; width:4px; height:4px; border-radius:50%; background:#0063be;}
.lyrWrap .popuplst table td a.bu_blank:after{ content:"\e980"; display:inline-block; margin-left:4px; font-family: 'xeicon';}
.lyrWrap .popuplst table td a.bu_blank:hover{ text-decoration: underline; color:#0063be;}

/* 배너리스트 */
.lyrPop .bnList{ padding:1rem 0; display:flex; flex-wrap: wrap;}
.lyrPop .bnList li{ width:33.33%; padding:2px .5rem;}
.lyrPop .bnList li a{ display:block; text-align:center;}
.lyrPop .bnList li a img{ max-width:100%; height:auto;} 

/* 방문통계리스트 */
.lyrPop .visList li {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0.25rem 0; padding-left: 1.15rem; font-size: 0.9rem; position: relative;}
.lyrPop .visList li + li {border-top: 1px dashed #ededed;}
.lyrPop .visList li:before {content: ""; display: block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #ebebeb; position: absolute; left: 0.15rem; top: 1rem;}
.lyrPop .visList li strong {display: block; padding: 0.25rem 0; color: #076deb; font-weight: 500;}

/* 팝업리스트 */
.ui-widget {font-family: 'SCDream', 'Montserrat', 'NotoSans', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif, 'GmarketSans' !important;}
.ui-widget.ui-widget-content {display: flex; flex-direction: column; max-width: 100%; max-height: 100vh;}
.ui-dialog .ui-dialog-titlebar {flex-shrink: 0;}
.ui-dialog .ui-dialog-titlebar-close {display: flex; justify-content: center; align-items: center; border: 0; background: none;}
.ui-dialog .ui-dialog-titlebar-close::before {content: "\e921"; font-family: 'xeicon'; font-size: 1rem; color: #111; text-indent: 0;}
.ui-icon-closethick {display: none !important;}
.ui-dialog-content {display: flex; flex-direction: column; justify-content: space-between; height: auto !important;}
.ui-dialog-content .lPopListArea .pppLst li + li {border-top: 1px dashed #e2e2e2;}
.ui-dialog-content .lPopListArea .pppLst li a {display: block; padding: 0.8rem 0; padding-left: 0.65rem; position: relative;}
.ui-dialog-content .lPopListArea .pppLst li a::before {content: ""; display: block; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #b0b0b0; position: absolute; left: 0; top: 1.3rem;}
.ui-dialog-content .atch {background: #eee; padding: 0.5rem 0.75rem;}
.ui-dialog-content .atch li {display: flex; align-items: center;}
.ui-dialog-content .atch li + li {border-top: 1px dashed #ddd; padding-top: 0.25rem; margin-top: 0.25rem;}
.ui-dialog-content .atch li p {max-width: calc(100% - 3rem); font-size: 0.7rem; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ui-dialog-content .atch li a {display: flex; justify-content: center; align-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; color: #fff; margin-left: 0.4rem;}
.ui-dialog-content .atch li a.dwld {border: 1px solid #b62222; background: #b62222;}
.ui-dialog-content .atch li a.view {border: 1px solid #406bab; background: #406bab;}
.ui-dialog-content .atch li a + a {margin-left: 0.2rem;}
.ui-dialog-content .closeBtn {margin-top: 0.8rem;}
.ui-dialog-content .closeBtn .popClick {display: flex; flex-wrap: wrap; justify-content: flex-end; margin: -0.1rem -0.15rem;}
.ui-dialog-content .closeBtn .popClick > a {display: flex; align-items: center; border-radius: 0.25rem; background: #e3e7eb; padding: 0.2rem 0.5rem; font-size: 0.65rem; margin: 0.1rem 0.15rem;}
.ui-dialog-content .closeBtn .popClick > a span {font-size: 0.65rem; white-space: nowrap;}
.ui-dialog-content .closeBtn .popClick > a i {display: flex; justify-content: center; align-items: center; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: #fff; color: #111; margin-left: 0.25rem;}
/* 팝업리스트 : active */
.ui-dialog-content .atch a {transition: 0.15s;}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {border: 0;}
.ui-dialog-content .lPopListArea .pppLst li a:hover,
.ui-dialog-content .lPopListArea .pppLst li a:focus {text-decoration: underline;}
.ui-dialog-content .atch a.dwld:hover,
.ui-dialog-content .atch a.dwld:focus {background: #fff; color: #b62222;}
.ui-dialog-content .atch a.view:hover,
.ui-dialog-content .atch a.view:focus {background: #fff; color: #406bab;}



@media screen and (max-width: 1240px){
    
    /* topPop */    
    #topPop .control > a{ left:.5rem; bottom:.25rem;}
    #topPop #upPopSlide .slick-dots { left: 2rem; bottom: 0.25rem; }
}

@media screen and (max-width: 1400px){

    /* layout */ 
    #container:not(.box_mot_1 #container) { -webkit-transition:padding 0.3s; transition:padding 0.3s; padding-top:3.5rem;}
    #header, 
    #header .mBtn, #header h1{  -webkit-transition:top 0.3s; transition:top 0.3s;}

    /* topPop */
    #topPop { position:fixed; top:0; left:0; }
    #topPop .item a.top_pop:before{ display:none;}

    .open.upPop #container{ padding-top: 10.05rem !important; }
    .open.upPop #header { top:6.5rem; }
    .open.upPop #topPop{ height:6.5rem;}

    #header,
    .hldy.upPop #header { top:0; }
    .hldy #container,
    .hldy.upPop #container{ padding-top:calc(2rem + 65px); }
    .open.hldy #topPop{ height:2rem;}

    .open.hldy.upPop #container{ padding-top:calc(8.5rem + 65px); }
    .open.hldy.upPop #header { top:8.5rem; }
    .open.hldy.upPop #topPop{ height:8.5rem;}
}

@media screen and (max-width:768px){
    
    /* topPop */
    #topPop .pop_close{font-size:14px; right:1rem;}
    #topPop .item .Pop_link a.top_Pop .txt { margin-top: 0.2rem; }


	/* 캘린더 : 일정리스트 팝업 */
	#schePop{left:0.5rem; top:50%; width:calc(100% - 1rem); max-width:100%; transform: translate(0, -50%); -webkit-transform: translate(0%, -50%);}
	#schePop tr td,
	#schePop tr th{font-size:13px;}
    
    /* 배너리스트 */
    .lyrPop .bnList li{ width:50%; }
}

@media screen and (max-width:580px){   

    .open.upPop #container{ padding-top:9.58rem !important; }
    .open.upPop #header { top:6rem; }
    .open.upPop #topPop{ height:6rem;}
    #topPop .item .Pop_link a.top_Pop .img img { max-width: 1.9rem; }

    .hldy #header,
    .hldy.upPop #header { top:1.5rem; }
    .hldy #container,
    .hldy.upPop #container{ padding-top:calc(1.5rem + 65px); }
    .open.hldy #topPop{ height:1.5rem;}

    .open.hldy.upPop #container{ padding-top:calc(7.5rem + 65px); }
    .open.hldy.upPop #header { top:7.5rem; }
    .open.hldy.upPop #topPop{ height:7.5rem;}

    #topPop .slick-list{ margin-top:.25rem;}    

    #topPop .hldy_kr{ line-height:1.5rem; height:1.5rem; font-size:12px;}
    #topPop .hldy_kr p:before{ width:25px; height:16px; margin-right:6px;}
}

@media (max-width: 480px) {
    #topPop #upPopSlide .slick-dots { display: none !important; }
    #topPop .item .Pop_link { padding: 0 0.5rem; }
}

@media screen and (max-width:340px){

    /* 배너리스트 */
    .lyrPop .bnList li{ width:100%; }

    /* 상단팝업 */
    #topPop .item .Pop_link a.top_Pop { width: 100%; }
    #topPop .item .Pop_link a.top_Pop .img { display: none; }
    #topPop .item .Pop_link a.top_Pop > dl { width: 100%; margin-left: 0; height: 2.75rem; }

}

@media screen and (max-width:340px){
	#container {padding-top:3.5rem;}
	
    .open.upPop #container{ padding-top:calc(7.25rem + 64px) !important; }
    .open.upPop #header { top:7.25rem; }
    .open.upPop #topPop{ height:7.25rem;}

    .open.hldy.upPop #container{ padding-top:calc(8.25rem + 65px); }
    .open.hldy.upPop #header { top:8.25rem; }
    .open.hldy.upPop #topPop{ height:8.25rem;}

    #topPop .item a.top_pop dl{ display:block; padding:0 2px;}
    #topPop .item a.top_pop dt{ max-height:2.2rem; width:100%; font-size:13px; padding-right:0; margin-bottom:.15rem;}
    #topPop .item .Pop_link {height: 4.25rem;}
    #topPop .item .Pop_link a.top_Pop .txt {max-height: 0.9rem; -webkit-line-clamp: 1;}
    #topPop .item .aWr {display: flex;}
    #topPop .control .close{ margin-top:.5rem; line-height:1.6;}
    #topPop .control .close label{ display:block; margin-right:2.25rem; font-size:12px;}
    #topPop .control .close a{ position:absolute; right:0; bottom:0;}
}