@charset "utf-8";

/*
    Document : default style definition
    Company  : korea web data center(KODC)
*/
html, body {width:100%; height:100%;}
body {margin:0; padding: 0; font-size:15px;/*  letter-spacing:-0.03em; *//*  font-family:'Noto Sans R', 'dotum', sans-serif;  */ /*font-family: 'Roboto', sans-serif;*/    font-family: system-ui; font-weight:normal; -webkit-text-size-adjust:100%;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td {color:#333; margin:0;padding:0; font-weight:normal; }
hr {display: none;}
dd, li{list-style:none;}
ul:after, dl:after, ol:after{clear:both; display:block;}
a:link, a:visited {color:#333; text-decoration: none;}
a:active, a:hover{color:#333; text-decoration: none;}
a img, input.type-image {border: 0 none;}
textarea {border:1px solid #eee; width:100%; padding:10px; box-sizing:border-box; background:#fff; font-family:'Noto Sans R', 'dotum', sans-serif; font-size:14px;}
input.type-text:hover, 
input.type-text:focus, 
textarea:hover, 
textarea:focus, 
/*
select:hover, 
select:active 
*/
{background-color: #fff;}
img{vertical-align:top; max-width:100%;}
input, select, label, select { padding:0 0; font-family:'Noto Sans R', 'dotum', sans-serif; font-size:14px;}
input{padding:0 10px; letter-spacing:-1px;  }
select {border:0; padding:8px 23px 8px 10px; color:#333; height:35px; line-height:15px; box-sizing:border-box; background:#fff url(../images/select.png) no-repeat 93% 14px; background-size:14px; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
select option {}
select::-ms-expand {display: none;}
span.button, 
img.button, 
a.button {cursor: pointer; vertical-align: middle;}
table{border-collapse: collapse; border-spacing:0;}
caption{font-size:0; line-height:0; position:absolute;}
em {font-style:normal;}
*:focus {outline:none;}

input[type="text"], input[type="password"], input[type="tel"] {width:100%; padding:10px; box-sizing:border-box; border:1px solid #eee; background:#fff; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#999;
}
::-moz-placeholder { /* Firefox 19+ */
  color:#999;
}
:-ms-input-placeholder { /* IE 10+ */
  color:#999;
}
:-moz-placeholder { /* Firefox 18- */
  color:#999;
}

/* 체크박스 디자인 */
input[type="checkbox"] {position:absolute; /*top:-9999px;*/ left:-9999px; /* width: 0; height: 0; display:none; */}/**/
input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:15px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#000;}
input[type="checkbox"] + label:before {content: ''; display:inline-block; vertical-align:middle; width: 11px; height: 11px; margin:0 5px 0 0; background:url(../images/checkbox.png) no-repeat 0 0; background-size:11px;}
/*
input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:13px;}
input[type="checkbox"] + label:before {content: ''; display:inline-block; vertical-align:middle; width: 28px; height: 28px; margin:0 4px 0 10px; background:url(../images/checkbox.png) no-repeat 0 0; background-size:28px;}
*/
input[type="checkbox"]:checked + label:before {background-position-y:-11px;}

label input[type="checkbox"] {}/*position:absolute; top:-9999px; left:-9999px; width: 0; height: 0; display:none;*/
label input[type="checkbox"] + span {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:13px;}
label input[type="checkbox"] + span:before {content: ''; display:inline-block; vertical-align:middle; width: 28px; height: 28px; margin:0 4px 0 10px; background:url(../images/checkbox.png) no-repeat 0 0; background-size:28px;}
label input[type="checkbox"]:checked + span:before {background-position-y:-28px;}

/* 라디오박스 디자인 */
input[type="radio"] {position:absolute; /*top:-9999px;*/ left:-9999px; /* width: 0; height: 0; display:none; */}/**/
input[type="radio"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
input[type="radio"] + label:before {content: ''; display:inline-block; vertical-align:middle; width: 18px; height: 18px; margin:0 4px 0 10px; background:url(../images/radio.png) no-repeat 0 0; background-size:18px;}
input[type="radio"]:checked + label:before {background-position-y:-18px;}

label input[type="radio"] {position:absolute; /*top:-9999px;*/ left:-9999px; /* width: 0; height: 0; */}
label input[type="radio"] + span {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
label input[type="radio"] + span:before {content: ''; display:inline-block; vertical-align:middle; width: 18px; height: 18px; margin:0 4px 0 10px; background:url(../images/radio.png) no-repeat 0 0;}
label input[type="radio"]:checked + span:before {background-position-y:-18px;}

b, h1, h2, h3, dt, strong {/* font-family:'Noto Sans B', 'dotum', sans-serif; font-family: 'Roboto', sans-serif; */ font-weight:700;}

.clear{*zoom:1;}
.clear:after{content:""; display:block; clear:both;}
.ac {text-align:center !important;}
.ar {text-align:right !important;}
.al {text-align:left !important;}
.fl {float:left !important;}
.fr {float:right !important;}
.pr {position:relative;}

.red {color:#ff0000 !important;}
.grey {color:#999 !important;}
.black {color:#333 !important;}
.blue {color:#0068b7 !important;}

.btnAc {text-align:center; padding:20px 0;}
.btnBtm {position:fixed; bottom:0; left:0; width:100%;}


/*버튼 스타일 */
.btnTypeA {display:inline-block; padding:8px; text-align:center; color:#fff !important; font-size:16px; background:#0068b7; box-sizing:border-box; vertical-align:middle; border-radius:5px;}
.btnTypeB {display:inline-block; padding:12px; text-align:center; color:#fff !important; font-size:16px; background:#fd859f; box-sizing:border-box; vertical-align:middle;}
.btnTypeC {display:inline-block; padding:10px 15px; text-align:center; color:#333 !important; font-size:16px; background:#fff; border:1px solid #c5c5c5; box-sizing:border-box; vertical-align:middle; border-radius:5px;}
.btnTypeD {display:inline-block; padding:0; text-align:center; color:#fff !important; font-size:19px; background:transparent; border:0; box-sizing:border-box; vertical-align:middle; border-radius:3px; width:230px; height:57px; line-height:57px; margin:0 4px;}
.btnTypeD.blue {background:#0068b7;}
.btnTypeD.black {background:#333;}

.btnlist {display:inline-block; padding:5px 20px; text-align:center; color:#fff !important;  background:#0068b7;}
.btnlist span {padding:3px 24px 3px 0; font-size:16px; background:url(../images/btn_arr.png) 95% center no-repeat;}
.btndown {display:inline-block; padding:5px 15px; text-align:center; color:#fff !important;  background:#0068b7;}
.btndown span {padding:3px 34px 3px 0; font-size:16px; background:url(../images/btn_down.png) 98% center no-repeat;}


.full {width:100%;}


/*탭 스타일 */
.tabTypeA {display:none; margin:-30px 0 30px; *zoom:1;}
.tabTypeA:after{content:""; display:block; clear:both;}
.tabTypeA li {float:left;}
.tabTypeA.half li {width:50%;}
.tabTypeA.third li {width:33.333%;}
.tabTypeA.fourth li {width:25%;}
.tabTypeA.fifth li {width:20%;}
.tabTypeA li a {display:block; font-size:16px; height:40px; font-family:'Noto Sans T', 'dotum', sans-serif; line-height:40px; border-right:1px solid #fff; text-align:center; color:#858585; background:#dadada;}
.tabTypeA li.on a {background:#0068b7; color:#fff; font-family:'Noto Sans R', 'dotum', sans-serif;}

.tabTypeB {margin:0 0 30px; *zoom:1;}
.tabTypeB:after{content:""; display:block; clear:both;}
.tabTypeB li {float:left;}
.tabTypeB.half li {width:50%;}
.tabTypeB.third li {width:33.333%;}
.tabTypeB.fourth li {width:25%;}
.tabTypeB.fifth li {width:20%;}
.tabTypeB li a {display:block; font-size:16px; height:40px; border-bottom:1px solid #ddd; border-top:2px solid #f4f4f4; font-family:'Noto Sans T', 'dotum', sans-serif; line-height:40px; border-right:1px solid #fff; text-align:center; color:#858585; background:#f4f4f4;}
.tabTypeB li.on a {color:#0068b7; border-top-color:#0068b7; border-bottom-color:#fff; background:#fff; font-family:'Noto Sans R', 'dotum', sans-serif;}

.tabTypeC {margin:0 0 50px; *zoom:1;}
.tabTypeC:after{content:""; display:block; clear:both;}
.tabTypeC li {float:left;}
.tabTypeC.half li {width:50%;}
.tabTypeC.third li {width:33.333%;}
.tabTypeC.fourth li {width:25%;}
.tabTypeC.fifth li {width:20%;}
.tabTypeC li a {display:block; font-size:17px; height:70px; font-family:'Noto Sans L', 'dotum', sans-serif; line-height:70px; border:1px solid #e2e2e2; text-align:left; padding:0 38px; color:#000; background:#f4f4f4; border-right:0; box-sizing:border-box;}
.tabTypeC li:last-child a {border-right:1px solid #e2e2e2;}
.tabTypeC li.on a {background:#0068b7 url(../images/tabIcon.png) no-repeat center bottom; color:#fff; font-family:'Noto Sans L', 'dotum', sans-serif; border:0;}

/* table */
.list {table-layout:fixed; width:100%; margin-top:10px;}
.list thead {background:url(../images/table_bg.jpg) 0 0 repeat-y; background-size:auto;}
.list thead th {border-left:1px solid #fff; padding:10px 5px; font-size:15px; line-height:18px; box-sizing:border-box; color:#fff; word-break:break-all;}
.list thead th.al {padding-left:20px;}
.list tbody th {color:#555; background:#f4f4f4; padding:10px 5px; font-size:16px; line-height:18px; border-bottom:1px solid #e4e4e4; box-sizing:border-box;}
.list td {color:#555; font-size:16px; border-bottom:1px solid #e4e4e4; padding:10px 5px; box-sizing:border-box; text-align:center; word-break:break-all;}
.list .yellow {background:#fdfacb;}
.list .ln th {border-bottom:1px solid #fff;}
.list2 td {text-align:left; padding:10px 0 10px 20px;}
.listfs {border-right:1px solid #e4e4e4;}
.listfs td {font-size:13px; line-height:16px; border-left:1px solid #e4e4e4;}
.list .bgy {background:#fffce3; font-weight:bold;}

.list3 {table-layout:fixed; width:100%; margin-top:10px; border-top:1px solid #e4e4e4;}
.list3 th {padding:10px 5px; font-size:16px; line-height:18px; border-bottom:1px solid #e4e4e4; box-sizing:border-box; background:#f4f4f4;}
.list3 td {padding:10px 5px; font-size:16px; line-height:18px; text-align:center; border-bottom:1px solid #e4e4e4; box-sizing:border-box;}
.list3.w5 {width:50%;}

.list4 {table-layout:fixed; width:100%; margin-top:15px; border-top:1px solid #dedede;}
.list4 tbody th {width:20%; color:#000; background:#f8f8f8; padding:20px 26px; font-size:15px; font-family:'Noto Sans L', 'dotum', sans-serif; line-height:18px; border-bottom:1px solid #dedede; box-sizing:border-box; text-align:left;}
.list4 tbody td {width:80%; color:#858585; font-size:15px; font-family:'Noto Sans L', 'dotum', sans-serif; border-bottom:1px solid #e4e4e4; padding:10px 8px; box-sizing:border-box;}

@media (max-width:768px) {
.list4 tbody th {width:30%;}
.list4 tbody td {width:70%;}
}

@media (max-width:700px) {
.tabTypeA {display:block;}
.tabTypeA.third li a {font-size:14px;}
.list thead th, .list tbody th, .list td {padding:5px 2px; font-size:14px;}
.btndown {padding:5px 10px;}
.btndown span {padding:3px 20px 3px 0; font-size:14px; background-size:13px;}
}

@media (max-width:540px) {
.tabTypeA {margin-bottom:30px;}
.tabTypeA li a {font-size:14px; height:30px; line-height:30px;}
.tabTypeA.third li a {font-size:13px;}
.tabTypeB li a {font-size:14px;}
.list thead {background:url(../images/table_bgm.jpg) 0 0 repeat-y; background-size:cover;}
.list thead th, .list tbody th, .list td, .list3 th, .list3 td {font-size:13px; line-height:16px; word-break:break-all;}
.list td {border-right:1px solid #e4e4e4;}
.list2 td {padding:5px 2px;}
.list3.w5 {width:100%;}
} 

@media (max-width:414px) {
.tabTypeC li a {font-size:15px; padding:0; height:50px; line-height:50px; text-align:center;}
.list4 tbody th {width:25%; padding:15px;}
.list4 tbody td {width:75%;}
.btnTypeD {font-size:16px; width:150px;}
}

@media (max-width:320px) {
.btnTypeA, .btnTypeB, .btnTypeC, {padding:8px; font-size:14px;}
.btnTypeD {font-size:14px; width:140px;}
}