/***** common *****/
body { background-color: #bfbfbf; }
#wrap { position: relative; width: 1920px; height: 1080px; background-color: #bfbfbf; }

/***** popup *****/
#popup {
  --color-ui-key: #0fd1d3;
  --color-ui-strong: #06a3a5;
}
#popup { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; display: none; }
#popup:before { content: ""; position: absolute; left:50%; top:0; background: rgba(0,0,0,0.7); width: 30000px; margin-left: -15000px; height: 100%;}
#popup>div { width: auto !important; margin: 0 auto; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.2); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 500px; border-radius: 15px; }
#popup>div>header { background: var(--color-ui-key); padding:16px 58px 16px 26px; border-radius: 15px 15px 0 0; min-height: 59px; }
#popup>div>header:after { content: ""; display: block; clear: both; }
#popup>div>header>h4 { color: #fff; font-size: 24px; font-weight: 500; float: left; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: calc(100% - 40px); overflow: hidden; }
#popup>div>header>button {background:var(--color-ui-strong) url(../img/common/ico_popclose.png) center center no-repeat; width: 22px; height: 22px; float: right; vertical-align: middle; position: absolute; padding: 31px; top:0; right:0; border-radius: 0 15px 0 0;}
#popup>div>section{max-height: 945px; padding: 20px 30px; background: #fff; position: relative; max-width: 1860px; border: 2px solid var(--color-ui-key); border-top: 0; font-size:24px; color:#666666; line-height: 31px; letter-spacing: -1px; border-radius: 0 0 15px 15px; min-width: 500px;}


/***** pds *****/
#page_pds {
  --size-wrap-width: 1890px;
  --size-wrap-margin-left: calc((1920px - var(--size-wrap-width))/2);
  --color-tab: #6dc6ce;
  --color-table-text: #3a3a3a;
  --color-table-line: #cbc8c8;
  --color-table-head-bg: #f5f5f5;

  --color-scroll: #6dc6ce;
  --color-scroll-active: #6dc6ce;
  --color-scroll-track: #eee;
}

/*** header ***/
#page_pds header { position: relative; width: var(--size-wrap-width); height: 100px; margin: 0 auto; border-radius: 20px 20px 0 0; background: #295466 url(../img/common/pds2/head_bg.png) no-repeat right top; }

#page_pds header>h4 { padding-top: 18px; }
#page_pds header>h4>span.school { position: relative; display: inline-block; width: 126px; height: 42px; color: #fff; font-family: "pretendard-SB"; font-size: 22px; line-height: 1.3; text-align: center; vertical-align: top; margin-top: 4px; padding-top: 6px; border-radius: 0 21px 21px 0; background: #dc861f; }
#page_pds header>h4>span.title { position: relative; display: inline-block; color: #fff; font-family: "jalnangothic"; font-size: 56px; line-height: 1.3; vertical-align: top; margin-left: 16px; }
#page_pds header>h4>span.tail { position: relative; display: inline-block; width: 89px; height: 62px; margin-left: 16px; padding-top: 10px; color: #fff; font-family: "jalnangothic"; font-size: 24px; text-align: center; line-height: 1.3; background: url(../img/common/pds2/head_tail.png) no-repeat center; }

/*** section ***/
#page_pds section { width: var(--size-wrap-width) /*1760px*/; margin: 0 auto; text-align: center; background: #e3e6ec; }

#page_pds section>div { width: 100%; height: calc(1080px - 195px); float: left; padding: 96px 16px 16px; background:#fff; }
#page_pds section .pds_tab_list { display: none; }
#page_pds section .pds_tab_list.active { display: block; }

/*** section: .tab ***/
#page_pds section>.tab { padding-top: 39px; margin-bottom: -1px; font-size:0; text-align: left; }
#page_pds section>.tab>li { position: relative; display: inline-block; height: 56px; border-radius: 10px 40px 0 0; margin-right: 3px; background: #ced1d6; cursor: pointer; }
#page_pds section>.tab>li:last-child { margin-right: 0px; }
#page_pds section>.tab>li.on { background: var(--color-tab); }
#page_pds section>.tab>li>button { display: block; padding: 14px 20px; margin: 0; color: var(--color-table-text); font-family: "pretendard-SB"; font-size: 24px; letter-spacing: -1px; text-align: left; }
#page_pds section>.tab>li.on>button { color: #fff; }

/*** section: .pds_tab_btn ***/
#page_pds section .subtab-wrap { position: absolute; width: var(--size-wrap-width); height: 80px; left: var(--size-wrap-margin-left); top: 194px; padding-left: 10px; background: var(--color-tab); }
#page_pds section .pds_tab_btn { position: relative; width: 695px; /*645px;*/ height: 56px; margin-top: 16px; border-radius: 28px; background-color: #d9f3f5; }
#page_pds section .pds_tab_btn>li { position: relative; display: inline-block; width: 320px; height: 100%; padding-top: 13px; margin: 0; outline: 0; color: #879396; font-family: "pretendard-SB"; font-size: 24px; letter-spacing: -1px; text-align: center; cursor: pointer; }
#page_pds section .pds_tab_btn>li::after { content: ""; position: absolute; width: 44px; height: 33px; left: 20px; top: -10px; background: url(../img/common/pds2/subtab.png) no-repeat center; }
#page_pds section .pds_tab_btn>li.on { color: #24515f; border-radius: 28px; background-color: #ffeb66; }
#page_pds section .pds_tab_btn>li.on::after { background: url(../img/common/pds2/subtab_on.png) no-repeat center; }

body[data-bcode="hread"] #page_pds section .pds_tab_btn { width: 695px; }
body #page_pds section .pds_tab_btn>li:nth-child(1) { width: 370px; }

/*** section: table ***/
#page_pds section table { width: 100%; border-collapse: collapse;}

#page_pds section table.overflow::before { content: ""; position: absolute; top: 352px; left: 32px; width: calc(100% - 64px); height: 1px; background-color: var(--color-table-line); }
#page_pds section table.overflow::after { content: ""; position: absolute; top: calc(347px + 530px + 5px - 1px); left: 32px; width: calc(100% - 64px); height: 1px; background-color: var(--color-table-line); }

#page_pds section table thead tr { display: block; width: 100%; padding-bottom: 5px; }
#page_pds section table th { height: 56px; font-family: "pretendard-B"; color: var(--color-table-text); font-size: 18px; line-height: 1.3; word-break: keep-all; vertical-align: middle; padding: 0; margin: 0; border: 1px solid var(--color-table-line); background-color: var(--color-table-head-bg); }
body:not([data-bcode="hspeak"]) #page_pds section table th { border-left: 0px; }
body:not([data-bcode="hspeak"]) #page_pds section table th:last-child { border-right: 0px; }

#page_pds section table th>ul { position: relative; padding: 0; margin: 0; }
#page_pds section table th>ul>li { display: inline-block; margin: 3px 0 -3px; padding: 3px 0 0; height: 28px; font-family: "pretendard-B"; color: var(--color-table-text); font-size: 18px; line-height: 1.3; vertical-align: bottom; border: 1px solid var(--color-table-line); border-left: none; border-bottom: none; }
#page_pds section table th>ul>li:last-child { border-right: none; }

#page_pds section table tbody { display: inline-block; width: calc(100% + 14px); height: 530px; margin-top: 0px; padding-right: 6px; overflow-y: scroll; overflow-x: hidden;
  -ms-overflow-style: none; /* IE 11 */
}
#page_pds section table td { height: 56px; font-family: "pretendard-SB"; color: var(--color-table-text); font-size: 18px; line-height: 1.3; word-break: keep-all; vertical-align: middle; padding: 0 10px; margin: 0; border: 1px solid var(--color-table-line); background-color: #fff; }
body:not([data-bcode="hspeak"]) #page_pds section table td { border-right: 0; }
body:not([data-bcode="hspeak"]) #page_pds section table td:first-child { border-left: 0; }

#page_pds section .folder>span.icon { background-image:url(../img/common/ico_folder.png); }
#page_pds section .ppt>span.icon { background-image:url(../img/common/pds2/icon_ppt.png); }
#page_pds section .pptx>span.icon { background-image:url(../img/common/pds2/icon_ppt.png); }
#page_pds section .hwp>span.icon { background-image:url(../img/common/pds2/icon_hwp.png); }
#page_pds section .pdf>span.icon { background-image:url(../img/common/pds2/icon_pdf.png); }
#page_pds section .zip>span.icon { background-image:url(../img/common/pds2/icon_zip.png); }
#page_pds section .mp4>span.icon { background-image:url(../img/common/pds2/icon_mp4.png); }
#page_pds section .link>span.icon { background-image:url(../img/common/pds2/icon_link.png); }

#page_pds section button { position: relative; display: block; width: 100%; text-align: center; }
#page_pds section button>span.name { position: relative; display: block; width: 100%; color: var(--color-table-text); font-family: "nq"; font-size: 14px; text-align: center; word-break: keep-all; line-height: 1.3; }
#page_pds section button>span.icon { position: relative; display: block; width: 42px; height: 42px; margin: 16px auto 8px; }
#page_pds section button[value="dummy"] { opacity: 0.2; pointer-events: none; }
#page_pds section button[value="dummy"]>span.name { opacity: 0; }

#page_pds section .pds_common button>span.name { font-size: 0; }

/*** 멀티미디어 자료 ***/
#page_pds section div.pds_tab_list.movie table tr,
#page_pds section div.pds_tab_list.movie table td { width: var(--size-wrap-width); padding: 10px 0 10px 50px; text-align: left; }
#page_pds section div.pds_tab_list.movie table td>button { width: auto; height: 54px; /*42px;*/ padding-left: 0px; /*54px;*/ }
#page_pds section div.pds_tab_list.movie table td>button>span.icon { position: absolute; display: none; left: 0px; top: 0px; margin: 0; }
#page_pds section div.pds_tab_list.movie table td>button>span.name { font-size: 18px; }
#page_pds section div.pds_tab_list.movie table tbody { height: 590px; }


/*** scroll: begin ***/
#page_pds section table tbody::-webkit-scrollbar { width: 8px; }
#page_pds section table tbody::-webkit-scrollbar-track { border-radius: 4px; background-color: #fff; }
#page_pds section table.overflow tbody::-webkit-scrollbar-track { border-radius: 6px; background-color: var(--color-scroll-track); }

#page_pds section table tbody::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--color-scroll); }
#page_pds section table tbody::-webkit-scrollbar-thumb:hover { background-color: var(--color-scroll-active); }

#page_pds section table tbody::-webkit-scrollbar-button { width: 0; height: 0; }
/*** scroll: end ***/


/*** 공통 파일 처리 ***/
#page_pds section .pds_common { position: absolute; left: 0px; bottom: 10px; width: 100%; padding: 0px 32px; }
#page_pds section .pds_common>ul { position: relative; display: flex; justify-content: center; width: 100%; }
#page_pds section .pds_common>ul>li { position: relative; display: block; width: 210px; height: 158px; padding-top: 10px; margin: 0 3px; border: 1px solid #e6e6e6; border-radius: 12px; background-color: #fafafa; }
#page_pds section .pds_common>ul>li>div.title { position: absolute; width: 100%; top: -12px; text-align: center; }
#page_pds section .pds_common>ul>li>div.title>span { position: relative; min-width: 108px; height: 32px; padding: 5px 20px; color: var(--color-table-text); font-family: "pretendard"; font-size: 18px; text-align: center; line-height: 1.3; border-radius: 16px; background-color: #fcec59; }
#page_pds section .pds_common>ul>li>button { position: relative; height: 100%; padding: 0 12px; color: var(--color-table-text); }

#page_pds section>.tab>li.notSample{pointer-events: none;}