@charset "utf-8";

/* layout */
header {width:100%;text-align:center;background-color:#f0f0f0;border-bottom:1px solid#dbdbdb;height:75px;position:fixed;z-index:100;left:0;top:0;}
.inner_wrap {margin:auto;position:relative;max-width:1040px;width:100%;min-width:320px;}
header h1 {width: 127px;height: 32px;background: url(/image/ver02/common/h1_logo.png) 0 0 no-repeat;position: absolute;background-size: contain;left:0;top:21px;z-index:10;}
header h1 a {display:block;width:100%;height:100%;}
header h2 {font-size:1.2em;letter-spacing:-1px;color:#000;line-height:75px;}
header .hbtn_group {position:absolute;top:18px;right:0;}
header .hbtn_group a {display:inline-block;line-height:38px;padding:0 15px;color:#fff;vertical-align:middle;border-radius:50px;}
header .hbtn_group .btn_typeA span {font-size:18px;vertical-align:middle;margin-top:-3px;}

#container {padding:125px 0 70px;}

/* 자료리스트 */
.title_group {width:100%;position:relative;margin-bottom:10px;}
.title_group h3 {float:left;font-size:1.2em;color:#000;margin-top: 8px;}
.title_group h3::before {
    content:"\e5cc";display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;color:#fff;border-radius:30px;
    background-color:#000;font-family: 'Material Symbols Outlined';font-weight: normal;font-style: normal;
    vertical-align:middle;margin:-2px 5px 0;font-size:16px;
}
.title_group div {float:right;}
.title_group div span {vertical-align:middle;margin-top:-2px;}
.title_group div a {margin-left:5px;}
.title_group div a:first-child {margin-left:0;}

.DataTableListWrap .data_list_table {min-width:640px;}
.data_list_table {width:100%;border-collapse: collapse;table-layout:fixed;}
.data_list_table thead {position:relative;}
.data_list_table thead::after {content:"";display:block;background-color:#f3fcff;border-radius:10px;border:1px solid #a3def0;height:100%;width:100%;left:0;top:0;position:absolute;z-index:-1;}
.data_list_table th {color:#000;border-left:1px solid #a3def0;padding:15px 5px;font-weight:400;-webkit-text-stroke: 1px;-webkit-text-stroke: 1px rgba(0,0,0,0.1);}
.data_list_table th.Bline {border-bottom:1px solid #a3def0;}
.data_list_table tr:first-child th:first-child {border-left:0;}
.data_list_table td {border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;padding:12px 5px;}
.data_list_table td:first-child {border-left:0;}
.data_list_table th, .data_list_table td {font-size:0.95em;vertical-align:middle;text-align:center;word-wrap: break-word;word-break: keep-all;overflow-wrap: break-word;line-height:120%;}
.data_list_table .list_item {color:#000;text-align:left;}

/* down file */
.ifile {display:inline-block;width:22px;height:22px;border-radius:5px;margin:0 5px;}
.ifile.pdf {background:#b30a00 url(/image/ver02/common/icon_acrobat.png) 50% 50% no-repeat;background-size:60% auto;}
.ifile.han {background:#38adf0 url(/image/ver02/common/icon_han.png) 50% 50% no-repeat;background-size:45% auto;}
.ifile.zip {background: url(/image/ver02/common/icon_zip.png) 50% 50% no-repeat;background-size:contain;}

/* global */
.clearfix {*zoom:1;}
.clearfix::after, .clearfix::before {content:"";display: block;clear: both;line-height:0;}
.clearfix::after {clear: both;}
.marginB50 {margin-bottom:50px;}

.scrollX {overflow-x: auto;overflow-y:visible;}
.scrollX::-webkit-scrollbar {height: 5px;}
.scrollX::-webkit-scrollbar-thumb {background-color: #d2d2d2;border-radius: 10px;}
.scrollX::-webkit-scrollbar-thumb:hover {background-color: #f7a3a6bf;}
.scrollX::-webkit-scrollbar-track {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}

/* 팝업 */
#DataPeriod .pop_cnt {margin-bottom:20px;}
#DataPeriod .btn_group {text-align:center;}
#DataPeriod .btn_group a {line-height:38px;border-radius:10px;width:30%;}
#DataPeriod .pop_cnt .tableStyleA th, #DataPeriod .pop_cnt .tableStyleA td {line-height:120%;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;vertical-align:middle;}
#DataPeriod .pop_cnt .tableStyleA td:last-child {padding-left:10px;}

/* table */
.tableStyleA {width:100%;border-collapse:collapse;table-layout:fixed;}
.tableStyleA th, .tableStyleA td {padding:12px 5px;font-size:0.9em;}
.tableStyleA th {background-color: #f3fcff;border-left:1px solid #a3def0;border-top:1px solid #a3def0;border-bottom:1px solid #a3def0;color:#000;}
.tableStyleA td {border-bottom: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;}
.tableStyleA th:first-child, .tableStyleA td:first-child {border-left:0;}


/* 버튼 */
.TabStyleBook {width:100%;padding-right:51%;position:relative;padding-bottom:48px;margin-bottom:30px;}
.TabStyleBook ul {display:table;table-layout:fixed;width:100%;z-index:1;position:relative;margin-left: -15px;}
.TabStyleBook li {text-align:center;display:table-cell;vertical-align:bottom;width:150px;position:relative;transition: all 0.3s ease-in-out 0s;}
.TabStyleBook li a::after {
    content:"";display:block;position:absolute;width:calc(100% - 30px);height:100%;background-color:rgba(255, 255, 255, 0.5);top:0;left:15px;
}
.TabStyleBook .on a::after {display:none;}
.TabStyleBook .on span {color:#000;font-weight:700;}
.TabStyleBook .on, .TabStyleBook li:hover {width:174px;}
.TabStyleBook .on a img {-webkit-box-shadow: 2px 3px 9px rgba(0,0,0,0.3);-moz-box-shadow: 2px 3px 9px rgba(0,0,0,0.3);box-shadow: 2px 3px 9px rgba(0,0,0,0.3);}
.TabStyleBook li a {font-size:0;line-height:normal;display:block;padding:0 15px;}
.TabStyleBook li span {
    word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;position:absolute;bottom:-45px;width:100%;font-size:1em;letter-spacing:-1px;
    left: 50%;-ms-transform: translate(-50%, 0%);-webkit-transform: translate(-50%, 0%);-moz-transform: translate(-50%, 0%);transform: translate(-50%, 0%);
    height:34px;padding:0 15px;
}

.TabStyleBook .bar1, .TabStyleBook .bar2, .TabStyleBook .bar3 {
    width:100%;position:absolute;bottom:48px;left:0;text-align:right;padding:10px 30px 10px 0;display:none;
}
.TabStyleBook .active {display:block;}
.TabStyleBook .bar1 a, .TabStyleBook .bar2 a, .TabStyleBook .bar3 a {color:#fff;font-size:1.1em;display:inline-block;letter-spacing:-1px;}
.TabStyleBook .bar1 a:first-child, .TabStyleBook .bar2 a:first-child, .TabStyleBook .bar3 a:first-child {padding-right:18px;margin-right:18px;border-right:1px solid rgba(255, 255, 255, 0.5);}
.TabStyleBook .bar1 a span, .TabStyleBook .bar2 a span, .TabStyleBook .bar3 a span {vertical-align:middle;}
.TabStyleBook .bar1 {background-color:#d21c32;}
.TabStyleBook .bar2 {background-color:#231f20;}
.TabStyleBook .bar3 {background-color:#007ec5;}

.btn_typeA {color:#fff;font-size:1em;padding:0 5%;background-color:#000;text-align:center;transition: all 0.3s ease-in-out 0s;font-family:'NanumSquare';font-weight:700;display:inline-block;-webkit-text-stroke: 1px;-webkit-text-stroke: 1px rgba(255,255,255,0.1);}
.btn_typeA:hover {background-color:#333;color:#fff;}
.btn_typeB {color:#fff;font-size:1em;background-color:#939393;text-align:center;display:inline-block;zoom:1;transition: all 0.3s ease-in-out 0s;font-family:'NanumSquare';font-weight:700;-webkit-text-stroke: 1px;-webkit-text-stroke: 1px rgba(255,255,255,0.1);}
.btn_typeB:hover {background-color:#b7b7b7;color:#fff;}
.btn_typeC {
    color:#fff;font-size:1em;background-color:#00b8f0;text-align:center;display:inline-block;zoom:1;-webkit-text-stroke: 1px;-webkit-text-stroke: 1px rgba(255,255,255,0.1);
    transition: all 0.3s ease-in-out 0s;font-family:'NanumSquare';font-weight:700;line-height:34px;border-radius:7px;padding:0 15px;
}
.btn_typeC:hover {background-color:#1ad5ff;color:#fff;}

.scrollLR {
    position:fixed;text-align:center;margin:-40px 0 0 -40px;
    left:50%;top:50%;z-index:110;display:none;width:80px;height:80px;line-height:80px;background-color:#000;border-radius:100%;
}
.scrollLR span {font-size:32px;color:#fff;}
.scrollLR strong {font-size:0.9em;font-weight:700;color:#fff;display:block;width:100%;line-height:normal;margin-top: -30px;}

@keyframes scrollview {
    0% {opacity: 0;-webkit-transform: scale(0);transform: scale(0);}
    5% {opacity:0;-webkit-transform: scale(1);transform: scale(1);}
    50% {opacity:1;-webkit-transform: scale(1);transform: scale(1);}
    95% {opacity:0;-webkit-transform: scale(1);transform: scale(1);}
    100% {opacity: 0;-webkit-transform: scale(0);transform: scale(0);}
}



/* media_screen ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1040px){
    header h1 {left:20px;}
    header .hbtn_group {right:20px;}
    .inner_wrap {padding-left:20px;padding-right:20px;}
}

@media screen and (max-width: 900px){
    header h2 {display:none;}
}

@media screen and (max-width: 768px){
    /* tab */
    .TabStyleBook {padding-right:0;padding-bottom:0;margin-bottom:50px;}
    .TabStyleBook ul {margin-left:0;margin-bottom:50px;}
    .TabStyleBook li a {padding: 0 10px;}
    .TabStyleBook li a:first-child {margin-left:0;}
    .TabStyleBook li a::after {width: calc(100% - 20px);left:10px;}
    .TabStyleBook .bar1, .TabStyleBook .bar2, .TabStyleBook .bar3 {position:relative;bottom:auto;background-color:transparent;text-align:center;padding:0;}
    .TabStyleBook .bar1 a:first-child, .TabStyleBook .bar2 a:first-child, .TabStyleBook .bar3 a:first-child {padding-right:0;margin-right:0;margin-left:0;}
    .TabStyleBook .bar1 a, .TabStyleBook .bar2 a, .TabStyleBook .bar3 a {
        border-radius:50px;line-height:44px;text-align:center;margin-left:10px;padding:0 20px !important;width:calc(100% / 2 - 10px);
    }
    .TabStyleBook .bar1 a {background-color:#d21c32;}
}

@media screen and (max-width: 666px){
    .scrollLR {display:block;animation:scrollview 6s forwards;}
}

@media screen and (max-width: 640px){
    /* header */
    header {height: 65px;}
    header h1 {top: 16px;}
    header .hbtn_group {top: 16px;}
    header .hbtn_group a {line-height: 34px;font-size:0.9em;}

    /* layout */
    #container {padding-top:105px;}
    .TabStyleBook {margin-bottom: 40px;padding-bottom:40px;border-bottom:1px solid #e6e6e6;}
    .TabStyleBook ul {margin-bottom: 60px;}
    .TabStyleBook li span {font-size:0.9em;}
    .TabStyleBook .bar1 a, .TabStyleBook .bar2 a, .TabStyleBook .bar3 a {line-height: 38px;font-size: 1em;}

    /* title */
    .title_group h3 {margin-bottom:10px;margin-top:0;font-size: 1.15em;}
    .title_group h3::before {margin-top:-3px;}
    .title_group div {clear:both;width:100%;}
    .title_group div a {width:calc(100% / 3 - 4px);font-size: 0.9em;letter-spacing:-1px;}

    /* list */
    .data_list_table th, .data_list_table td {font-size:0.9em;}

    /* 팝업 */
    #DataPeriod .pop_cnt .tableStyleA th, #DataPeriod .pop_cnt .tableStyleA td {font-size:0.85em;}
    #DataPeriod .btn_group a {width:100%;}
}

@media screen and (max-width: 514px){
    .TabStyleBook .on, .TabStyleBook li:hover {width: 107px;}
    .TabStyleBook li {width: 87px;}
    .TabStyleBook li a {padding: 0 5px;}
    .TabStyleBook li a::after {width: calc(100% - 10px);left:5px;}
    .TabStyleBook li span {padding: 0 5px;}
}

@media screen and (max-width: 480px){
    /* header */
    header {height: 90px;}
    header h1 {left:50%;width: 120px;margin-left:-60px;top: 13px;}
    header .hbtn_group {width:100%;right:0;padding:0;top:55px;border-top:1px solid#dbdbdb;padding-top:9px;}
    header .hbtn_group a {width:calc(100% / 2 - 4px);line-height: 30px;background-color:transparent;color:#000;border-radius:0;line-height:normal;-webkit-text-stroke: 1px;-webkit-text-stroke: 1px rgba(0,0,0,0.1);padding:0;}
    header .hbtn_group a:first-child {border-right:1px solid #ccc;}
    header .hbtn_group .btn_typeA span:last-child {display:none;}

    /* layout */
    #container {padding-top: 135px;}

    .TabStyleBook ul {margin-bottom: 50px;}
    .TabStyleBook li span {font-size: 0.85em;bottom:-40px;}
    .TabStyleBook .bar1 a span, .TabStyleBook .bar2 a span, .TabStyleBook .bar3 a span {display:none;}
    .TabStyleBook .bar1 a, .TabStyleBook .bar2 a, .TabStyleBook .bar3 a {font-size:0.9em;line-height: 36px;width: calc(100% / 2 - 5px);margin-left:5px;}

    /* title */
    .title_group div span {display:none;}
    .title_group div a {padding:0;}

    /* list */
    .data_list_table th, .data_list_table td {font-size:0.8em;}
    .data_list_table th {padding: 12px 5px;}
    .data_list_table td {padding: 10px 5px;}

    /* popup */
    .tableStyleA th, .tableStyleA td {padding: 10px 5px;letter-spacing:-1px;}
}

@media screen and (max-width: 380px){
    .title_group div a {font-size: 0.85em;}
    .TabStyleBook {margin-bottom: 30px;padding-bottom: 30px;}
}