@charset "utf-8";

/*
    Document : default style definition
    Company  : korea web data center(KODC)
*/

* {box-sizing:border-box;}
*:focus {outline:none;}

html, body {width:100%; height:100%;}
body {margin:0; padding: 0; font-size:15px; letter-spacing:-0.02em; font-family:'Noto Sans R', 'dotum', sans-serif; font-weight:normal; -webkit-text-size-adjust:100%; vertical-align: top; white-space:normal; word-wrap:break-word; word-break:keep-all;}
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; box-sizing:border-box;}
header, section, nav, article, footer {display:block;}
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 #e6e6e6; width:100%; margin-top: 10px; 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; width:auto; max-width:100%;}
input, select, label, select {padding:0 0; font-family:'Noto Sans L', 'dotum', sans-serif; font-size:14px;}
input {/* padding:0 10px; */ letter-spacing:-0.5px; color:#0c0c0c;}
select {width:50%; border:1px solid #e6e6e6; padding:10px 25px 10px 10px; color:#333; height:42px; line-height:15px; background:#fff url(/images/select.png) no-repeat right 10px center; vertical-align:middle; -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;}

input[type="text"], input[type="password"], input[type="tel"] {width:50%; padding:3px; box-sizing:border-box; border:1px solid #e6e6e6; background:#fff;  border-radius:0; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; height:42px;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#858585;
  font-size:14px;
}
::-moz-placeholder { /* Firefox 19+ */
  color:#858585;
  font-size:14px;
}
:-ms-input-placeholder { /* IE 10+ */
  color:#858585;
  font-size:14px;
}
:-moz-placeholder { /* Firefox 18- */
  color:#858585;
  font-size:14px;
}

/* 체크박스 디자인 */
/* input[type="checkbox"] {position:absolute; /*top:-9999px;*/ left:-9999px; /* width: 0; height: 0; display:none; */} */
input[type="checkbox"] {/*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:13px;}
input[type="checkbox"] + label:before {content: ''; display:inline-block; vertical-align:middle; width: 20px; height: 20px; margin:0 5px 0 0; background:url(/images/checkbox.png) no-repeat 0 0; background-size:20px;}
input[type="checkbox"]:checked + label:before {background-position-y:-20px;}

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: 18px; height: 18px; margin:0 4px 0 10px; background:url(/images/checkbox.png) no-repeat 0 0; background-size:18px;}
label input[type="checkbox"]:checked + span:before {background-position-y:-18px;}

input[type="checkbox"] + label.typeC {display:block; position:relative; height:28px; padding:15px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
input[type="checkbox"] + label.typeC .txt {display:block; position:absolute; top:17px; left:40px; font-size:16px; z-index:2;}
input[type="checkbox"] + label.typeC .more {display:block; color:#858585; margin-top:3px;}
input[type="checkbox"] + label.typeC:before {content: ''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; background:url(/images/radio2.png) no-repeat 15px center; z-index:1;}
input[type="checkbox"]:checked + label.typeC:before {background-color:#0078ff;}
input[type="checkbox"]:checked + label.typeC .txt {color:#fff;}
input[type="checkbox"]:checked + label.typeC .more {color:#fff;}

/* 라디오박스 디자인 */
/* input[type="radio"] {position:absolute; /*top:-9999px;*/ left:-9999px; /* width: 0; height: 0; display:none; */} */
input[type="radio"] {/*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:-2px 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, h4, h5, h6, dt, strong, th {font-family:'Noto Sans B'; 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;}
.vm {display:inline-block; vertical-align:middle !important;}
img.vm {margin-top:-2px;}
.cb {clear:both;}
.red {color:#f60000 !important;}
.grey {color:#999 !important;}
.sky {color:#0078ff !important;}
.green {color:#01c73c !important;}
.gray {background:#afafaf !important;}
.black {background:#000 !important;}

.mgb50 {margin-bottom:50px !important;}

.pd15-0 {padding:15px 0 !important;}

.pdl15 {padding-left:15px !important;}

.btnAc {text-align:center; padding:40px 0 0;}
.btnAc a {display:inline-block;}
.m_t_20 {margin-top:2.0rem;}

/*버튼 스타일 */
.btnTypeA {display:block; width:200px; height:45px; line-height:45px; background:#0ba395; color:#fff !important; font-family:'Noto Sans R'; text-align:center; margin:0 auto; padding:0; vertical-align:middle;}
.btnTypeA + .btnTypeA {margin-left:8px;}

.btnTypeB {display:inline-block; width:auto; height:35px; line-height:35px; background:#555; color:#fff !important; font-family:'Noto Sans L'; font-size:14px; text-align:center; margin:0 auto; padding:0 20px; vertical-align:middle;}

.big {width:280px; font-size:24px;}
.full {width:100%;}
.half {width:50%;}
.w200 {width:200px;}
.w300 {width:300px;}

/*탭 스타일 */
.tabType.half li {width:50%;}
.tabType.third li {width:33.333%;}
.tabType.fourth li {width:25%;}
.tabType.fifth li {width:20%;}

.tabTypeA {position:relative;}
.tabTypeA:after{content:''; display:block; clear:both;}
.tabTypeA li {float:left; width:auto; padding:8px 14px; text-align:center; font-size:18px;}
.tabTypeA li a {color:#999; position:relative;}
.tabTypeA li.on a {color:#333;}
.tabTypeA li.on a:after {content:''; position:absolute; bottom:-5px; left:-2px; width:70px; height:1px; background-color:#333;}

.tabTypeB {position:relative;}
.tabTypeB:after{content:''; display:block; clear:both;}
.tabTypeB li {float:left; width:170px; height:45px; line-height:45px; text-align:center; font-size:17px; font-family:'Noto Sans L'; border:1px solid #cecece;}
.tabTypeB li a {color:#858585;}
.tabTypeB li.on a {color:#333; font-family:'Noto Sans M';}
.tabTypeB li.on {border:1px solid #000;}

/* table */
.tableList {table-layout:fixed; width:100%; border-top:1px solid #0aa099;}
.tableList th {border-bottom:1px solid #ececec; padding:15px; background:#f6f6f6; font-family:'Noto Sans L'; font-weight:normal; color:#000;}
.tableList td {border-bottom:1px solid #ececec; padding:15px 20px;}
.tableList .line {border-right:1px solid #ececec;}

.photo_list {position:relative; overflow:hidden;}
.photo_list li{float:left; margin-right:20px; margin-bottom:20px}
.photo_list li.mr0{margin-right:0;}
.photo_list li img {width:230px; height:170px;}

.pho_list {position:relative; display:flex; flex-wrap:wrap;}
.pho_list li {margin-right:2%; width:23.5%; box-sizing:border-box; margin-bottom:40px;}
.pho_list li img {width:250px; height:170px;}
.pho_list li:nth-child(4n),.pho_list li:nth-child(8n),.pho_list li:nth-child(12n),.pho_list li:nth-child(16n),.pho_list li:nth-child(20n) {margin-right:0;}
.pho_list li p.list_text {margin-top:10px; font-weight:bold; text-align:center; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1;}

.pho_view {position:relative; margin-top:30px; padding-top:30px; border-top:1px solid #505153;}
.pho_view .img {width:100%;}
.pho_view .img img {width:100%;}
.pho_view .info {position:relative; margin:30px 0 50px 0; }
.pho_view_list {position:relative; display:flex; flex-wrap:wrap; padding:10px 20px; border:3px solid #ececec;}
.pho_view_list li {margin-right:2%; width:23.5%; display:flex; box-sizing:border-box; padding:10px 0;}
.pho_view_list li:nth-child(4n),.pho_view_list li:nth-child(8n) {margin-right:0;}
.pho_view_list li img {width:100%; height:150px;  cursor:pointer;}

