@charset "utf-8";
@import url(font.css);
@import url(board.css);

/* reset css  */
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0;	color:inherit; box-sizing:border-box;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

html, body {line-height: 1.5; margin:0; padding:0;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

a{color:inherit; text-decoration:none;}

table {border-collapse: collapse; border-spacing: 0;}

hr.dash{border:1px dashed #ddd; border-width:0 0 1px 0; margin:20px 0;}

.txt_hidden{font-size:0; color:transparent; text-indent:-9999px; overflow:hidden;}

.inner{width:100%; max-width:1440px; min-width:320px; padding:0 20px; margin:0 auto;}

/* 말줄임 */
.ellip{overflow:hidden; display:block; width:100%; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis; color:inherit; font-size:inherit;}
.ellip2{display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color:inherit; font-size:inherit;}
.ellip3{display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color:inherit; font-size:inherit;}

/* radio */
.radio {display: inline-block;}
.radio input[type="radio"] {display: none;}
.radio label {display: inline-block; position: relative; padding-left: 28px; margin-right: 15px;}
.radio label > span {color: #999;}
.radio label:before,
.radio label:after {content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 2px solid #eee; border-radius: 50%;}
.radio label:before {transition: all .2s linear;}
.radio input:checked + label:before {border-color: #0f5ec0;}
.radio input:checked + label:after {content: ''; height: 8px; width: 8px; position: absolute; top: 9px; left: 7px; margin-top: -2px; background-color: #0f5ec0; border: 0;}
.radio input:checked + label > span {color: #333;}

/* form control */
input,
select,
textarea,
label{display:inline-block;box-sizing:border-box;width:auto;vertical-align:middle;/* line-height:1.4; */border-radius:0;}
input[type=text],
input[type=time],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=submit],
input[type=button],
textarea,
select{-webkit-appearance: none;-moz-appearance: none; appearance: none; -moz-box-sizing: border-box; box-sizing: border-box; height:45px; font-size: 16px; padding: 0 10px; border: 1px solid #ddd; outline: none; background:transparent; font-family: 'Pretendard', sans-serif;}
textarea{padding:10px;}
select {background:url(/images/page/sub/icon_arrow.png) no-repeat; background-position: calc(100% - 10px) center; background-size: 10px auto;}
input[type=radio]{border-radius: 100%;}
input:disabled,
input:-moz-read-only{background: #ddd;border-color: #ddd;-webkit-box-shadow: none;box-shadow: none;}
input[readonly],
input[disabled], textarea[readonly]{background:#f9f9f9 !important;}
.datepicker[readonly],
.datepicker[disabled]{background-color: #f9f9f9;}
select::-ms-expand{display: none;}
textarea{resize:none;}
input[type=submit],
button{font-size:inherit; font-family: 'Pretendard', sans-serif; cursor: pointer;}
input[lang="en"],
textarea[lang="en"],
button[lang="en"] {font-family: 'Titillium', 'Pretendard', sans-serif;}

.input60{width:60px !important;}
.input80{width:80px !important;}
.input100{width:100px !important;}
.input150{width:150px !important;}
.input200{width:200px !important;}
.input300{width:300px !important;}
.input400{width:400px !important;}
.inputFull{width:100% !important;}

.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr40{margin-right: 40px !important;}
.mt10{margin-top:10px;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt50{margin-top: 50px !important;}
.mt90{margin-top: 90px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb90{margin-bottom: 90px !important;}

.w100{width:100%;}
.w80{width:80%;}
.w60{width:60%;}
.w50{width:50%;}
.w30{width:30%;}

.point_red{font-weight:500; color:#f76565;}

/********************** board **********************/
.marking {position: relative;}
.marking:after {content: '\002A'; color: #DC4252; padding-left:3px;}

/*table*/
table{border-collapse: collapse; border-spacing: 0;}
table,th,td{border:none;}
caption{overflow:hidden; line-height:0; text-indent:-2000em;}

/*button*/
.button_area{position: relative; padding:30px 0 0; text-align:center;}
.button_area:after{content:""; display: block; clear: both;}
.button {display:inline-block; overflow:hidden; position:relative; min-width:100px; height:45px; padding:0 14px; margin:2px 0px; background:#222; border:1px solid #25282d; font-weight: 400; color:#fff; text-align:center; vertical-align:middle; -webkit-transition: all .3s; -ms-transform: all .3s; -moz-transform: all .3s; transform: all .3s;}
.button span{position:relative; z-index:1; line-height:45px; vertical-align: middle;}
.button.gray{background:#999; border-color: #999;}
/* .button.gray:hover{background:#fff; border:1px solid #333; color:#333;} */
.button.red{background:#9a0808; border:1px solid #9a0808;}
.button.blue{background:#0f5ec0; border:1px solid #0f5ec0;}
.button.green{background:#5FC265; border:1px solid #5FC265;}
.button.dgei_blue{background:#107bba; border:1px solid #107bba;}
.button.black{background:#333; border:1px solid #333;}
.button.white{background:#fff; border:1px solid #ddd; color:#333;}
.button.file {height:40px; font-size:14px; background:#fff; border:1px solid #333; color:#444; line-height:35px;}

.button.cancel{background:#999; border:1px solid #999;}
.button.primary{background:#37b549; border:1px solid #37b549;}

.button_area .button_left{float: left;}
.button_area .button_right{float: right;}

.button.xsm{min-width:unset; height:auto; padding:5px 12px; font-size:12px; background:#fff; border:1px solid #ddd; color:#333;}
.button.xsm:hover{background:var(--main_color); color:#fff;}

/* checkbox */
.checkbox {display: inline-block;}
.checkbox input[type="checkbox"] {display: none;}
.checkbox label {display: inline-block; position: relative; padding-left: 28px;}
.checkbox label > span {color: #999;}
.checkbox label:before,
.checkbox label:after {content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 2px solid #ddd;}
.checkbox label:before {transition: all .2s linear;}
.checkbox input:checked + label:before {border-color: #0f5ec0;}
.checkbox input:checked + label:after {content: ''; height: 2px; width: 7px; position: absolute; top: 50%; left: 11px; margin-top: -2px; transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 2px solid #0f5ec0; border-left: 2px solid #0f5ec0; border-radius: 0;}
.checkbox input:checked + label > span {color: #333;}

/* radio */
.radio {display: inline-block;}
.radio input[type="radio"] {display: none;}
.radio label {display: inline-block; position: relative; padding-left: 28px; margin-right: 15px;}
.radio label > span {color: #999;}
.radio label:before,
.radio label:after {content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%;}
.radio label:before {transition: all .2s linear; border: 2px solid #eee;}
.radio input:checked + label:before {border-color: #0f5ec0;}
.radio input:checked + label:after {content: ''; height: 8px; width: 8px; position: absolute; top: 9px; left: 7px; margin-top: -2px; background-color: #0f5ec0; border: 0;}
.radio input:checked + label > span {color: #333;}
.radio input:disabled + label:before{background:#f9f9f9; border-color:#eee;}

/* no_data */
.no_data{width:100% !important; height:35vw; max-height:400px; border:1px solid #ddd; text-align:center; position:relative; z-index: 0; background:#fff;}
.no_data .no_data_con{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:fit-content; height:fit-content;}
.no_data .no_data_con img{width:60px; height:60px;}
.no_data .no_data_con p{font-size:16px;}

/*레이어팝업*/
.layer_pop_wrap {position: fixed; top: 0px; left: 0px; display: block; z-index: 1000; width: 100%; height: 100%; opacity: 0; visibility: hidden; background:rgba(0,0,0,0.4);}
.layer_pop_wrap.active {opacity: 1; visibility: visible;}
.layer_pop_box {overflow: hidden; overflow-y: auto; position: fixed; top: 50%; left: 50%; z-index: 102; width: 100%; max-width:700px; max-height:90%; border: 1px solid #eee; background: #fff; box-shadow: 0 3px 29px 0 rgba(0, 0, 0, .15); -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.layer_pop_box .layer_pop{width: 100%; height: 100%; padding: 30px 30px 30px;}
.layer_pop_box .layer_pop_header {position: relative; padding: 10px 30px; border-bottom:1px solid #eee; background: var(--main_color);}
.layer_pop_box .layer_pop_header .pop_tit{font-size: 20px; color:#fff;}
.layer_pop_box .layer_pop_header > span {display: block; color: #999; margin-top: 10px;}
.layer_pop_box .layer_pop_body {padding: 50px 50px;}
.layer_pop_box .layer_pop_body .desc_box {margin-bottom: 30px;}
.layer_pop_box .btn_wrap {padding-top: 30px;}
.layer_pop_wrap .x_btn{width:35px; height:35px; display:block; position:absolute; top:20px; right:20px; margin:0;}
.layer_pop_wrap .x_btn:before, .layer_pop_wrap .x_btn:after{content:''; width:25px; height:3px; border-radius:3px; display:block; background:#fff; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
.layer_pop_wrap .x_btn:before{transform:rotate(45deg);}
.layer_pop_wrap .x_btn:after{transform:rotate(-45deg);}

@media (max-width: 768px) {
	input[type=text], input[type=time], input[type=tel], input[type=email], input[type=password], input[type=url], input[type=submit], input[type=button], textarea, select{height:40px; font-size:15px;}
	.button{height:40px; font-size:15px;}
	.button span{line-height:40px;}

	hr.dash{margin:15px 0;}
}