@charset "utf-8";

/* 공통 레이아웃 */
#wrap.el * { font-family: 'NanumSquareRound' }

#wrap { position: relative; width: 100%; height: 100%; min-width:280px; }
#wrap.el { background: #DFF1FF;}
#header { width: 100%;  position: relative; }
#header.el { background: #23295B; border-radius: 0 0 1.9531vw 1.9531vw;}
#header.el .header-inner { display: flex; align-items: center; position: relative; padding: 4.1% 3.2%; max-height: 0;}
#header.el .header-inner .logo { width: 9.5vw; height: 3.9vw; background: url(/images/common/icon/logo_wh.svg) no-repeat left 0/ contain ; text-indent: -10000px; position: absolute; }
#header.el .header-inner .btn-download { background: #4B53E4 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; /*margin-left:auto;*/ border:none; outline: none; padding: 2.1%; font-size: 0; border-radius: 50vw; cursor: pointer; /*margin-left: 2%;*/ float: right; position: absolute; right: 3%;}

#header.el .header-inner .tit-wrap { position: relative; display: flex; align-items: center; width: 58.5%; background: #fff; margin:0 auto; text-align: left; border-radius: 9.7656vw; overflow: hidden; }
#header.el .header-inner h2 { font-size: 2.3438vw; color:#000; font-weight: 700; line-height: 1;}
#header.type2.el .header-inner .tit-wrap:before { content:''; background: #efefef; display: inline-block; width: 13%; height: 4.7vw; z-index: 1; vertical-align: middle; border-radius: 9.7656vw;}
#header.type2.el .header-inner .tit-wrap h2 { margin-left: 1.43%; }
#header.type3.el .header-inner .tit-wrap { padding: 1%; justify-content: center;}
#header.type3.el .header-inner .tit-wrap:before { display: none; }
#header.type3.el .ppt { display: none; }

.container { max-width: 100%; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding:5% 4% 4%;}
.container.el { background: #DFF1FF; }
.contents.el { max-width:100%; max-height: 100%; flex:1; text-align: center; }
/* .contents.el .inner-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54.7%; height: 37.5vw; background: #fff; margin:0 auto; padding:0% 3.7% ; text-align: center; border-radius: 1.9531vw; box-sizing: border-box; letter-spacing: -1px;} */
.contents.el .inner-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54.7%; background: #fff; margin:0 auto; padding:6.6% 3.7% ; text-align: center; border-radius: 1.9531vw; box-sizing: border-box; letter-spacing: -1px;}
.contents.el .inner-box .subject-box { width: 100%; border-radius: 1.9531vw; padding: 5% 5% 5%;}
.contents.el .inner-box button.file-download { display: flex; justify-content: center; align-items: center; width: 55%; padding: 3.8%; font-size: 2.5438vw; margin-top: 4%; font-family: 'pretendard'; cursor: pointer;}
.contents.el .inner-box h3.file-subject { font-size: 4.1250vw; font-weight: 700; color:#000; margin-top: 1%;}
.contents.el .inner-box button.file-download img { width: 13.2%; margin-right: 2%;}
.contents.el .inner-box .file-type img { width: 18.2%; }

/* 초등 */
.contents.el .inner-box { border:2px dashed #4B53E4; }
.contents.el .inner-box .file-type { width: 100%;}
.contents.el .inner-box button.file-download { background: #4B53E4; color:#fff; font-weight: 800; border:none; border-radius: 9.7656vw; }
.contents.el .inner-box .subject-box { display: flex; flex-direction: column; justify-content: center; background: #EFF4F7; border:2px solid #BBC6D9; }


/* 아이콘 */
#header.el .icon-img { display: inline-block; position: absolute; left: 3.5%; top: 16%; width: 5.7%; height: 3.2vw; text-align: center; margin: 0 auto; z-index: 2; }
#header.el .ppt { background: url(/images/common/icon/el_icon_ppt.svg) no-repeat center center / contain ; }
#header.el .pptx { background: url(/images/common/icon/el_icon_ppt.svg) no-repeat center center / contain ; }
#header.el .doc { background: url(/images/common/icon/el_icon_doc.svg) no-repeat center center / contain ; }
#header.el .docx { background: url(/images/common/icon/el_icon_doc.svg) no-repeat center center / contain ; }
#header.el .mp3 { background: url(/images/common/icon/el_icon_mp3.svg) no-repeat center center / contain ; }
#header.el .mp4 { background: url(/images/common/icon/el_icon_mp4.svg) no-repeat center center / contain ; }
#header.el .pdf { background: url(/images/common/icon/el_icon_pdf.svg) no-repeat center center / contain ; }
#header.el .xls { background: url(/images/common/icon/el_icon_xls.svg) no-repeat center center / contain ; }
#header.el .xlsx { background: url(/images/common/icon/el_icon_xls.svg) no-repeat center center / contain ; }
#header.el .zip { background: url(/images/common/icon/el_icon_zip.svg) no-repeat center center / contain ; }
#header.el .jpg { background: url(/images/common/icon/el_icon_jpg.svg) no-repeat center center / contain ; }
#header.el .jpeg { background: url(/images/common/icon/el_icon_jpg.svg) no-repeat center center / contain ; }
#header.el .png { background: url(/images/common/icon/el_icon_jpg.svg) no-repeat center center / contain ; }
#header.el .hwp { background: url(/images/common/icon/el_icon_hwp.svg) no-repeat center center / contain ; }
#header.el .hwpx { background: url(/images/common/icon/el_icon_hwp.svg) no-repeat center center / contain ; }
#header.el .link { background: url(/images/common/icon/el_icon_link.svg) no-repeat center center / contain ; }
#header.el .etc { background: url(/images/common/icon/el_icon_etc.svg) no-repeat center center / contain ; }

.contents.el .icon-img { display: inline-block; position: relative; width: 16%; height: 8vw; text-align: center; margin: 0 auto; z-index: 2; }
.contents.el .ppt { background: url(/images/common/icon/el_icon_ppt.svg) no-repeat center center / contain ; }
.contents.el .pptx { background: url(/images/common/icon/el_icon_ppt.svg) no-repeat center center / contain ; }
.contents.el .doc { background: url(/images/common/icon/el_icon_doc.svg) no-repeat center center / contain ; }
.contents.el .docx { background: url(/images/common/icon/el_icon_doc.svg) no-repeat center center / contain ; }
.contents.el .mp3 { background: url(/images/common/icon/el_icon_mp3.svg) no-repeat center center / contain ; }
.contents.el .mp4 { background: url(/images/common/icon/el_icon_mp4.svg) no-repeat center center / contain ; }
.contents.el .pdf { background: url(/images/common/icon/el_icon_pdf.svg) no-repeat center center / contain ; }
.contents.el .xls { background: url(/images/common/icon/el_icon_xls.svg) no-repeat center center / contain ; }
.contents.el .xlsx { background: url(/images/common/icon/el_icon_xls.svg) no-repeat center center / contain ; }
.contents.el .zip { background: url(/images/common/icon/el_icon_zip.svg) no-repeat center center / contain ; }
.contents.el .jpg { background: url(/images/common/icon/el_icon_jpg.svg) no-repeat center center / contain ; }
.contents.el .jpeg { background: url(/images/common/icon/el_icon_jpg.svg) no-repeat center center / contain ; }
.contents.el .png { background: url(/images/common/icon/el_icon_jpg.svg) no-repeat center center / contain ; }
.contents.el .hwp { background: url(/images/common/icon/el_icon_hwp.svg) no-repeat center center / contain ; }
.contents.el .hwpx { background: url(/images/common/icon/el_icon_hwp.svg) no-repeat center center / contain ; }
.contents.el .link { background: url(/images/common/icon/el_icon_link.svg) no-repeat center center / contain ; }
.contents.el .etc { background: url(/images/common/icon/el_icon_etc.svg) no-repeat center center / contain ; }

/* 다운로드 */
.download-wrap { overflow-y: scroll; }

/* 미리보기 */
.container.preview.el { padding: 5% 4% 4%; overflow-y: auto; }
.container.preview.el .contents { max-height: 100%;  }
.container.preview.el .contents .preview-wrap { padding-bottom: 10%; }

/* 미디어 */
#wrap.media-wrap.el { background: #4B53E4;}
#wrap.media-wrap.el .container.media.el { background: #4B53E4;}
.container.media.el { padding: 5% 4% 4%; overflow-y: auto; }
.container.media.el .video-wrap video { width: 100%; border:none; border-radius: 0.9766vw; }
.container.media.el .contents .video-wrap { padding-bottom: 5%; }

/* 비디오 콘텐츠 */
.container.media.el .video-contents {display: flex; position: relative; padding-bottom: 28px;}
.container.media.el .video-contents #videoPlayer { flex: 1; padding: 0; aspect-ratio: 16 / 9; height: auto; background-color: #4B53E4;}
.container.media.el .text-video-note {position: absolute;right: 0;bottom: 0; color: #fff; text-align: right;margin-top: 10px;display: flex;align-items: center;font-size: 15px;line-height: 18px;gap: 4px;justify-content: flex-end; flex-wrap: wrap;}
.container.media.el .text-video-note a {font-weight: 700;text-decoration: underline;text-underline-offset: 3px; color: #fff;}


/* 목록형 리스트 */
.container.list.el { padding: 5% 4% 4%; overflow-y: auto; text-align: left; align-items: flex-start; }
.container.list.el .list-wrap { padding-bottom: 20%; }
.container.list.el .list-wrap li { width: 100%; display: flex; justify-content: flex-start; align-items: center; background: #fff; padding: 2% 2.5%; font-size: 1.9531vw; color:#333; border:1px solid #D1D1D1; margin-bottom: 1.07%; border-radius: 0.9766vw; box-shadow: 0 5px 20px 0 rgba(227, 227, 227, 1); }
.container.list.el .list-wrap li > a { display: flex; width: 100%; height: 100%; text-decoration: none; align-items: center;}
.container.list.el .list-wrap li.on { border:2px solid #4B53E4;}
.container.list.el .list-wrap li.on p { font-weight: 700; }
.container.list.el .list-wrap li:first-child { border-radius: 0.9766vw 0.9766vw 0 0; }
.container.list.el .list-wrap li:last-child { border-radius: 0 0 0.9766vw 0.9766vw; }
.container.list.el .list-wrap li .icon-img { margin:0; width: 5.4%; height: 4.7vw;}
.container.list.el .list-wrap li .btn-wrap { width: 13%; height: auto; display: flex; justify-content: flex-end;}
.container.list.el .list-wrap li .btn-wrap a { display: inline-block; width: 100%; height: 4.5vw;}
.container.list.el .list-wrap li p { flex:1; font-size: 1.9531vw; margin-left: 2.7%; text-align: left; line-height: 1.3; font-weight: 400; color:#23295B; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 89%;}
.container.list.el .list-wrap li p span.file-type { font-size: 1.5625vw; color:#A0A0A0; font-weight: 400; margin-left: 2%; text-transform: uppercase;}
.container.list.el .list-wrap li a.list-btn { background: url(/images/common/icon/icon_download_type2.svg) no-repeat center center/ 60%; margin-left:auto; border:1px solid #D1D1D1; outline: none; padding: 2.3%; font-size: 0; border-radius: 50vw; cursor: pointer; margin-left: 6%; max-width:46%}
.container.list.el .list-wrap li a.list-btn-preview { background: url(/images/common/icon/icon_preview_type2.svg) no-repeat center center/ 60%; margin-left:auto; border:1px solid #D1D1D1; outline: none; padding: 2.3%; font-size: 0; border-radius: 50vw; cursor: pointer; margin-left: 2%; max-width:46%}
.container.list.el .list-wrap li a.list-btn:hover { background: #4B53E4 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
.container.list.el .list-wrap li a.list-btn-preview:hover { background: #4B53E4 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }

/* 갤러리형 리스트 */
.container.list.el { padding: 5% 4% 4%; overflow-y: auto; text-align: left; align-items: flex-start; }
.container.list.el .gallery-wrap { display: flex; justify-content: flex-start; flex-wrap:wrap; position: relative; padding-bottom: 20%; }
.container.list.el .gallery-wrap li { position: relative; width: 23.7%; display: flex; flex-direction: column; background: #fff; padding: 2% 2.5%; margin-left:1.7%; margin-bottom: 1.7%; font-size: 1.9531vw; color:#333; border-top:none; text-align: left; border-radius: 0 0.9766vw 0.9766vw 0; }
.container.list.el .gallery-wrap li > a:nth-of-type(1) { display: flex; flex-direction: column; height: 100%; text-decoration: none;}
.container.list.el .gallery-wrap li .btn-link { flex: 0 }
.container.list.el .gallery-wrap li .btn-wrap { display: flex; justify-content: flex-end;}
.container.list.el .gallery-wrap li:nth-child(4n+1) {margin-left: 0; }
.container.list.el .gallery-wrap li:nth-child(4n+1) {margin-left: 0; }
.container.list.el .gallery-wrap li.on { border:2px solid #4B53E4;}
.container.list.el .gallery-wrap li.on p { font-weight: 700; }
.container.list.el .gallery-wrap li .icon-img { margin:0; width: 28%; height: 4.7vw; margin-bottom: 9.1%;}
.container.list.el .gallery-wrap li p { flex:1; width: 100%; font-size: 1.9531vw; text-align: left; line-height: 1.3; margin-bottom: 15%; color:#333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.container.list.el .gallery-wrap li span.file-type { font-size: 1.5625vw; color:#A0A0A0; font-weight: 100; margin-left: 1%; text-transform: uppercase; position: absolute; bottom: 3.5vw; left: 10%;}
.container.list.el .gallery-wrap li a.list-btn { height: auto; background: url(/images/common/icon/icon_download_type2.svg) no-repeat center center/ 60%; margin-left:auto; border:1px solid #D1D1D1; outline: none; padding: 11.3%; font-size: 0; border-radius: 50vw; cursor: pointer;  margin-left:5%;}
.container.list.el .gallery-wrap li a.list-btn-preview { height: auto; background: url(/images/common/icon/icon_preview_type2.svg) no-repeat center center/ 60%; margin-left:auto; border:1px solid #D1D1D1; outline: none; padding: 11.3%; font-size: 0; border-radius: 50vw; cursor: pointer; margin-left: 2%; }
.container.list.el .gallery-wrap li a.list-btn:hover { background: #4B53E4 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
.container.list.el .gallery-wrap li a.list-btn-preview:hover { background: #4B53E4 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }

/* 리스트 탭 */
.container.list.el .list-tab-wrap { margin: 0% 0 2%;}
.container.list.el .list-tab { width: 100%; display: flex; justify-content: flex-end;}
.container.list.el .list-tab li { position: relative; cursor: pointer; font-size:0; margin-left: 1%; }
.container.list.el .list-tab li img.on {display: none;position: absolute;left: 0;top: 0;z-index: 1;}
.container.list.el .list-tab li.active img.on {display: block;}

.container.list.el .tabcontent { display: none; }
.container.list.el .tabcontent.active { display: block; }


@media (min-width: 1200px) and (pointer: fine) {
    .container.media.el .contents { max-width:1200px; }
}

@media (max-width: 480px) {
    #wrap { background: #DFF1FF; }
    #header.el { border-radius: 0 0 4.4444vw 4.4444vw;}
    #header.el .header-inner { padding: 4.5% 4.2%; min-height: 17vw; }
    #header.el .header-inner .logo { width: 20.5vw; height: 8.9vw;}
    #header.el .header-inner .btn-download {  padding: 3.7%; border-radius: 50vw;}

    #header.type2.el .header-inner .logo { display: none; }
    #header.type2.el .header-inner .tit-wrap { margin-left: 0; justify-content: flex-start; background: transparent; overflow: visible; width: 90%;}
    #header.type2.el .header-inner h2 { font-size: 4.6vw; color:#fff; margin-left: 3%; }
    #header.type2.el .icon-img { position: static; width: 12.5%; height: 6.7vw; margin:0; min-width:6.5%}
    #header.type2.el .header-inner .tit-wrap:before { display: none;}

    #header.type3.el .header-inner .logo { display: none; }
    #header.type3.el .header-inner .tit-wrap { margin-left: 0; justify-content: flex-start; background: transparent; overflow: visible; flex:1;}
    #header.type3.el .header-inner h2 { font-size: 5vw; color:#fff; margin-left: 3%;}
    #header.type3.el .icon-img { position: static; width: 12.5%; height: 6.7vw; margin:0 }
    #header.type3.el .header-inner .tit-wrap:before { display: none;}

    /* .contents.el .inner-box { width: 81.5%; height: 88vw; border-radius: 5.5556vw; justify-content: center; padding:1% 5.7%; } */
    .contents.el .inner-box { width: 81.5%; border-radius: 5.5556vw; justify-content: center; padding:11% 5.7%; }
    .contents.el .icon-img { width: 20%; height: 13vw; }
    .contents.el .inner-box .file-type { }
    .contents.el .inner-box .file-type img { width: 20%; }
    /* .contents.el .inner-box .subject-box { display: flex; flex-direction: column; justify-content: center; height: 59%; padding: 0; border-radius: 5.5556vw;} */
    .contents.el .inner-box .subject-box { display: flex; flex-direction: column; justify-content: center; padding: 15.5% 0; border-radius: 5.5556vw;}
    .contents.el .inner-box h3.file-subject { font-size: 8.8889vw; margin-top: 4.4444vw; }
    .contents.el .inner-box button.file-download { width: 85%; font-size: 5vw; margin-top: 4.6667vw; border-radius: 27.7778vw; padding: 5.2% 0;   }

    .container.list.el .list-wrap li { padding: 3.2% 2.5%; }
    .container.list.el .list-wrap li:first-child { border-radius:2.2222vw 2.2222vw 0 0; }
    .container.list.el .list-wrap li:last-child { border-radius: 0 0 2.2222vw 2.2222vw; }
    .container.list.el .list-wrap li .icon-img { margin:0; width: 10.4%; height: 9.1vw;}
    .container.list.el .list-wrap li .btn-wrap { width: 29%; height: auto; display: flex;}
    .container.list.el .list-wrap li .btn-wrap a { display: inline-block; width: 100%; height: 9vw;}
    .container.list.el .list-wrap li p { width: 81%;; font-size: 4.4444vw; margin-left: 4.5%; text-align: left;}
    .container.list.el .list-wrap li p span.file-type { font-size: 3.8889vw; color:#A0A0A0; font-weight: 100; margin-left: 2.5%; text-transform: uppercase;}
    .container.list.el .list-wrap li a.list-btn { background: url(/images/common/icon/icon_download_type2.svg) no-repeat center center/ 60%; margin-left:auto; border:1px solid #D1D1D1; outline: none; padding: 5%; font-size: 0; border-radius: 50vw; margin-left: 5%; }
    .container.list.el .list-wrap li a.list-btn-preview { background: url(/images/common/icon/icon_preview_type2.svg) no-repeat center center/ 60%; margin-left:auto; border:1px solid #D1D1D1; outline: none; padding: 5%; font-size: 0; border-radius: 50vw; margin-left: 2%; }
    .container.list.el .list-wrap li a.list-btn:hover { background: #4B53E4 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
    .container.list.el .list-wrap li a.list-btn-preview:hover { background: #4B53E4 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }


    .container.list.el .gallery-wrap li { width: 48%; min-height:46vw; padding: 5%; margin-left: 0; margin-bottom: 3.7%; border-radius: 0 2.2222vw 2.2222vw 0; }
    .container.list.el .gallery-wrap li:nth-child(even) { margin-left: 3.7%;}
    .container.list.el .gallery-wrap li .icon-img { margin:0; width: 22.6%; height: 8.9vw; margin-bottom: 8%;}
    .container.list.el .gallery-wrap li p { flex:1; font-size: 4.4444vw; text-align: left; max-height: 17vw;}
    .container.list.el .gallery-wrap li span.file-type { font-size: 3.8889vw; color:#A0A0A0; font-weight: 100; text-transform: uppercase; left:10%; bottom: 6vw;}
    .container.list.el .gallery-wrap li a.list-btn { background: url(/images/common/icon/icon_download_type2.svg) no-repeat center center/ 60%; border:1px solid #D1D1D1; outline: none; padding: 9.6%; font-size: 0; border-radius: 50vw; }
    .container.list.el .gallery-wrap li a.list-btn-preview { background: url(/images/common/icon/icon_preview_type2.svg) no-repeat center center/ 60%; border:1px solid #D1D1D1; outline: none; padding: 9.6%; font-size: 0; border-radius: 50vw; }
    .container.list.el .gallery-wrap li a.list-btn:hover { background: #4B53E4 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
    .container.list.el .gallery-wrap li a.list-btn-preview:hover { background: #4B53E4 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }

    .container.media.el .video-contents {position: static;}
    .container.media.el .text-video-note {position: absolute; bottom: 16px;left: 0; width: 100%;justify-content: center; flex-wrap: wrap;}

}

/* landscape 모드에 대한 미디어 쿼리 */
@media screen and (max-width: 1000px) and (orientation: landscape){
    #wrap.media-wrap.el .container.media.el { padding:5% 30% 4%;}
    #wrap.media-wrap.el .container.media.el  .video-contents {padding-bottom: 50px;}
}