@charset "utf-8";

/* 공통 레이아웃 */
#wrap.mh * { font-family: 'pretendard'; }

#wrap { width: 100%; height: 100%; min-width:280px; }
#wrap.mh { background: #f1f5f8;}
#header { width: 100%;  position: relative; }
#header.mh { background: #fff; border-bottom:1px solid #DCDCDC }
#header.mh .header-inner { display: flex; align-items: center; position: relative; padding: 4.1% 3.2%; max-height: 0;}
#header.mh .header-inner .logo { width: 9.5vw; height: 3.9vw; background: url(/images/common/icon/logo.svg) no-repeat left 0/ contain ; text-indent: -10000px; position: absolute;}

#header.mh .header-inner .tit-wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 58.5%; margin:0 auto;  border-radius: 9.7656vw; }
#header.mh .header-inner h2 { font-size: 2.3438vw; color:#000; font-weight: 700; line-height: 1; }
#header.mh .header-inner .btn-download { background: #E60033 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: 0.7813vw; cursor: pointer; /*margin-left: 2%;*/ float: right; box-shadow: 0px 3.000000238418579px 6.000000476837158px 0px rgba(230, 0, 51, 0.4);}

#header.type2.mh .header-inner .tit-wrap { width: 100%; max-width:68%;}
#header.type2.mh .header-inner h2 { }
#header.type2.mh .icon-img { position: static;}

#header.type3.mh .header-inner .tit-wrap { width: 100%; }
#header.type3.mh .header-inner h2 { }
#header.type3.mh .icon-img { display: none; }


.container { max-width: 100%; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding:5% 4% 4%;}
.container.mh { background: #f1f5f8; }
.contents.mh { max-width:100%; max-height: 100%; flex:1; text-align: center; }
/* .contents.mh .inner-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54.7%; height: 37.5vw; background: rgba(230, 0, 51, 0.1); margin:0 auto; padding:0% 3.7% ; text-align: center; border-radius: 1.9531vw; box-sizing: border-box; letter-spacing: -1px;} */
.contents.mh .inner-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54.7%; background: rgba(230, 0, 51, 0.1); margin:0 auto; padding:6.6% 3.7% ; text-align: center; border-radius: 1.9531vw; box-sizing: border-box; letter-spacing: -1px;}
.contents.mh .inner-box .subject-box { width: 100%; border-radius: 1.9531vw; padding: 5% 5% 5%;}
.contents.mh .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.mh .inner-box h3.file-subject { font-size: 4.1250vw; font-weight: 700; color:#000; margin-top: 1%;}
.contents.mh .inner-box button.file-download img { width: 13.2%; margin-right: 2%;}
.contents.mh .inner-box .file-type img { width: 18.2%; }

/* 중고등 */
.contents.mh .inner-box { border:2px dashed #E60033; }
.contents.mh .inner-box .file-type { width: 100%;}
.contents.mh .inner-box button.file-download { background: #E60033; color:#fff; font-weight: 800; border:none; border-radius: 0.7813vw; }
.contents.mh .inner-box .subject-box { border:2px solid #FFCCD7; background: #fff; }

/* 아이콘 */
#header.mh .icon-img { display: inline-block;  left: 3.5%; top: 16%; width: 5.7%; height: 3.2vw; text-align: center; z-index: 2; }
/* #header.mh .icon-img { display: inline-block; position: relative; width: 16%; height: 8vw; text-align: center; margin: 0 auto; z-index: 2; } */
#header.mh .ppt { background: url(/images/common/icon/mh_icon_ppt.svg) no-repeat center center / contain ; }
#header.mh .pptx { background: url(/images/common/icon/mh_icon_pptx.svg) no-repeat center center / contain ; }
#header.mh .doc { background: url(/images/common/icon/mh_icon_doc.svg) no-repeat center center / contain ; }
#header.mh .docx { background: url(/images/common/icon/mh_icon_docx.svg) no-repeat center center / contain ; }
#header.mh .mp3 { background: url(/images/common/icon/mh_icon_mp3.svg) no-repeat center center / contain ; }
#header.mh .mp4 { background: url(/images/common/icon/mh_icon_mp4.svg) no-repeat center center / contain ; }
#header.mh .pdf { background: url(/images/common/icon/mh_icon_pdf.svg) no-repeat center center / contain ; }
#header.mh .xls { background: url(/images/common/icon/mh_icon_xls.svg) no-repeat center center / contain ; }
#header.mh .xlsx { background: url(/images/common/icon/mh_icon_xlsx.svg) no-repeat center center / contain ; }
#header.mh .zip { background: url(/images/common/icon/mh_icon_zip.svg) no-repeat center center / contain ; }
#header.mh .hwp { background: url(/images/common/icon/mh_icon_hwp.svg) no-repeat center center / contain ; }
#header.mh .hwpx { background: url(/images/common/icon/mh_icon_hwp.svg) no-repeat center center / contain ; }
#header.mh .jpg { background: url(/images/common/icon/mh_icon_jpg.svg) no-repeat center center / contain ; }
#header.mh .jpeg { background: url(/images/common/icon/mh_icon_jpeg.svg) no-repeat center center / contain ; }
#header.mh .png { background: url(/images/common/icon/mh_icon_png.svg) no-repeat center center / contain ; }
#header.mh .link { background: url(/images/common/icon/mh_icon_link.svg) no-repeat center center / contain ; }
#header.mh .etc { background: url(/images/common/icon/mh_icon_etc.svg) no-repeat center center / contain ; }

.contents.mh .icon-img { display: inline-block; position: relative; width: 16%; height: 8vw; text-align: center; margin: 0 auto; z-index: 2; }
.contents.mh .ppt { background: url(/images/common/icon/mh_icon_ppt.svg) no-repeat center center / contain ; }
.contents.mh .pptx { background: url(/images/common/icon/mh_icon_pptx.svg) no-repeat center center / contain ; }
.contents.mh .doc { background: url(/images/common/icon/mh_icon_doc.svg) no-repeat center center / contain ; }
.contents.mh .docx { background: url(/images/common/icon/mh_icon_docx.svg) no-repeat center center / contain ; }
.contents.mh .mp3 { background: url(/images/common/icon/mh_icon_mp3.svg) no-repeat center center / contain ; }
.contents.mh .mp4 { background: url(/images/common/icon/mh_icon_mp4.svg) no-repeat center center / contain ; }
.contents.mh .pdf { background: url(/images/common/icon/mh_icon_pdf.svg) no-repeat center center / contain ; }
.contents.mh .xls { background: url(/images/common/icon/mh_icon_xls.svg) no-repeat center center / contain ; }
.contents.mh .xlsx { background: url(/images/common/icon/mh_icon_xlsx.svg) no-repeat center center / contain ; }
.contents.mh .zip { background: url(/images/common/icon/mh_icon_zip.svg) no-repeat center center / contain ; }
.contents.mh .hwp { background: url(/images/common/icon/mh_icon_hwp.svg) no-repeat center center / contain ; }
.contents.mh .hwpx { background: url(/images/common/icon/mh_icon_hwp.svg) no-repeat center center / contain ; }
.contents.mh .jpg { background: url(/images/common/icon/mh_icon_jpg.svg) no-repeat center center / contain ; }
.contents.mh .jpeg { background: url(/images/common/icon/mh_icon_jpeg.svg) no-repeat center center / contain ; }
.contents.mh .png { background: url(/images/common/icon/mh_icon_png.svg) no-repeat center center / contain ; }
.contents.mh .link { background: url(/images/common/icon/mh_icon_link.svg) no-repeat center center / contain ; }
.contents.mh .etc { background: url(/images/common/icon/mh_icon_etc.svg) no-repeat center center / contain ; }

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

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

/* 목록형 리스트 */
.container.list.mh { padding: 5% 4% 4%; overflow-y: auto; text-align: left; align-items: flex-start; }
.container.list.mh .list-wrap { padding-bottom: 20%; }
.container.list.mh .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.mh .list-wrap li > a { display: flex; width: 100%; height: 100%; text-decoration: none; align-items: center;}
.container.list.mh .list-wrap li.on { border:2px solid #E60033;}
.container.list.mh .list-wrap li.on p { font-weight: 700; }
.container.list.mh .list-wrap li .icon-img { margin:0; width: 5.4%; height: 4.7vw;}
.container.list.mh .list-wrap li .btn-wrap { width: 13%; height: auto; display: flex; justify-content: flex-end;}
.container.list.mh .list-wrap li .btn-wrap a { display: inline-block; width: 100%; height: 4.5vw;}
.container.list.mh .list-wrap li p { font-size: 1.9531vw; margin-left: 2.7%; text-align: left; line-height: 1.3; color:#333; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 89%;}
.container.list.mh .list-wrap li p span.file-type { font-size: 1.5625vw; color:#A0A0A0; font-weight: 100; margin-left: 2%; text-transform: uppercase;}
.container.list.mh .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: 0.7813vw; cursor: pointer; margin-left: 6%; max-width:46%;}
.container.list.mh .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: 0.7813vw; cursor: pointer; margin-left: 2%; max-width:46%;}
.container.list.mh .list-wrap li a.list-btn:hover { background: #E60033 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; box-shadow: 0 5px 10px 0 rgba(230, 0, 51, 0.4);}
.container.list.mh .list-wrap li a.list-btn-preview:hover { background: #E60033 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; box-shadow: 0 5px 10px 0 rgba(230, 0, 51, 0.4);}

/* 갤러리형 리스트 */
.container.list.mh { padding: 5% 4% 4%; overflow-y: auto; text-align: left; align-items: flex-start; }
.container.list.mh .gallery-wrap { display: flex; justify-content: flex-start; flex-wrap:wrap; padding-bottom: 20%; }
.container.list.mh .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.9766vw; box-shadow: 0 5px 20px 0 rgba(227, 227, 227, 1); border:1px solid #D1D1D1;}
.container.list.mh .gallery-wrap li > a:nth-of-type(1) { display: flex; flex-direction: column; height: 100%; text-decoration: none;}
.container.list.mh .gallery-wrap li .btn-link { flex: 0 }
.container.list.mh .gallery-wrap li .btn-wrap { display: flex; justify-content: flex-end;}
.container.list.mh .gallery-wrap li:nth-child(4n+1) {margin-left: 0; }
.container.list.mh .gallery-wrap li.on { border:2px solid #E60033;}
.container.list.mh .gallery-wrap li.on p { font-weight: 700; }
.container.list.mh .gallery-wrap li .icon-img { margin:0; width: 28%; height: 4.7vw; margin-bottom: 9.1%;}
.container.list.mh .gallery-wrap li p { flex:1; width: 100%; font-size: 1.9531vw; text-align: left; line-height: 1.3; margin-bottom: 15%; color:#333; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

.container.list.mh .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.mh .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: 0.7813vw; cursor: pointer; margin-left: 5%; }
.container.list.mh .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: 0.7813vw; cursor: pointer; margin-left: 2%; }
.container.list.mh .gallery-wrap li a.list-btn:hover { background: #E60033 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
.container.list.mh .gallery-wrap li a.list-btn-preview:hover { background: #E60033 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }

/* 리스트 탭 */
.container.list.mh .list-tab-wrap { margin: 0% 0 2%;}
.container.list.mh .list-tab { width: 100%; display: flex; justify-content: flex-end;}
.container.list.mh .list-tab li { position: relative; cursor: pointer; font-size:0; border:1px solid #D1D1D1;}
.container.list.mh .list-tab li:first-child { border-radius: 0.7813vw 0 0 0.7813vw; }
.container.list.mh .list-tab li:last-child { border-radius: 0 0.7813vw 0.7813vw 0; border-left:none; }
.container.list.mh .list-tab li.active { background:  #fff; }
.container.list.mh .list-tab li img { padding:0.5rem 0.57rem; }
.container.list.mh .list-tab li img.on {display: none;position: absolute;left: 50%;top: 50%;z-index: 1; transform: translate(-50%,-50%);}
.container.list.mh .list-tab li.active img.on {display: block;}

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


@media (max-width: 480px) {
    #wrap { background: #f1f5f8; }
    #header.mh { border-bottom:1px solid #DCDCDC; }
    #header.mh .header-inner { padding: 4.5% 4.2%; min-height: 17vw; }
    #header.mh .header-inner .logo { width: 20.5vw; height: 8.9vw;}
    #header.type2.mh .header-inner h2 { margin-left: 1.5%; }
    #header.mh .header-inner .btn-download {  padding: 3.7%; border-radius: 0.5859vw;}

    #header.type2.mh .header-inner .logo { display: none; }
    #header.type2.mh .header-inner .tit-wrap { margin-left: 0; justify-content: flex-start; max-width:100%; }
    #header.type2.mh .header-inner h2 { font-size: 4.6vw;}
    #header.type2.mh .icon-img { width: 6.5%; height: 6vw; min-width:5.2% }

    #header.type3.mh .header-inner .logo { display: none; }
    #header.type3.mh .header-inner .tit-wrap { margin-left: 0; justify-content: flex-start;}
    #header.type3.mh .header-inner h2 { font-size: 5vw;}
    #header.type3.mh .icon-img { display: none; }


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

    .container.list.mh .list-tab li { padding: 0rem;}
    .container.list.mh .list-tab li:first-child { border-radius: 1.6667vw 0 0 1.6667vw; }
    .container.list.mh .list-tab li:last-child { border-radius: 0 1.6667vw 1.6667vw 0; border-left:none; }
    .container.list.mh .list-tab li.active { background:  #fff; }
    .container.list.mh .list-tab li img { padding:0.1rem; width: 65%; height: 11vw; }

    .container.list.mh .list-wrap li { padding: 3.2% 2.5%; border-radius: 2.2222vw; }
    .container.list.mh .list-wrap li .icon-img { margin:0; width: 10.4%; height: 9.1vw;}
    .container.list.mh .list-wrap li .btn-wrap { width: 29%; height: auto; display: flex;}
    .container.list.mh .list-wrap li .btn-wrap a { display: inline-block; width: 100%; height: 9vw;}
    .container.list.mh .list-wrap li p { width:81%; font-size: 4.4444vw; margin-left: 4.5%; text-align: left;}
    .container.list.mh .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.mh .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: 2.222vw; margin-left: 5%; }
    .container.list.mh .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: 2.222vw; }
    .container.list.mh .list-wrap li a.list-btn:hover { background: #E60033 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
    .container.list.mh .list-wrap li a.list-btn-preview:hover { background: #E60033 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }

    .container.list.mh .gallery-wrap li { width: 47%; min-height:46vw; padding: 5%; margin-left: 0; margin-bottom: 3.7%; border-radius: 2.2222vw; }
    .container.list.mh .gallery-wrap li:nth-child(even) { margin-left: 3.7%;}
    .container.list.mh .gallery-wrap li:first-child { border-radius:0 2.2222vw 2.2222vw 0; }
    .container.list.mh .gallery-wrap li:last-child { border-radius: 0 2.2222vw 2.2222vw 0; }
    .container.list.mh .gallery-wrap li .icon-img { margin:0; width: 22.6%; height: 8.9vw; margin-bottom: 8%;}
    .container.list.mh .gallery-wrap li p { flex:1; font-size: 4.4444vw; text-align: left; margin-bottom: 9%;}

    .container.list.mh .gallery-wrap li span.file-type { font-size: 3.8889vw; color:#A0A0A0; font-weight: 100; margin-left: 2.5%; text-transform: uppercase; left:10%; bottom: 6vw;}
    .container.list.mh .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: 2.2222vw;  }
    .container.list.mh .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: 2.2222vw;  }
    .container.list.mh .gallery-wrap li a.list-btn:hover { background: #E60033 url(/images/common/icon/icon_download.svg) no-repeat center center/ 60%; border:none; }
    .container.list.mh .gallery-wrap li a.list-btn-preview:hover { background: #E60033 url(/images/common/icon/icon_preview.svg) no-repeat center center/ 60%; border:none; }

}

/* landscape */
@media screen and (max-width: 1000px) and (orientation: landscape){
    #wrap.media-wrap.mh .container.media.mh { padding:5% 30% 4%;}
}