@charset "utf-8";

/* font */
@import url("../css/webfont.css");

:root {
	accent-color:#222;
	--mainColor: #f8b237;
	--mainColorOn: #f3aa29;
	--mainColorOp: #fffbf3;
	--subColor: #2f1806;
	--subColorOn: #241102;
	--subColorOp: #f9f8f5;
	--importColor: #ef6250;
	--importColor2: #f64d37;
}

/* HTML5 요소 브라우져 인식 */
article, aside, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
mark {background: #FF0; color: #000}
html{font-size: 62.5%;}
body{font-family: 'Wanted Sans', 'Noto Sans KR', 'Malgun Gothic', '맑은고딕', '돋움', sans-serif;font-weight: 400;letter-spacing:-0.03em;font-size: 16px;line-height:1.5;color:#555;}
input, textarea, select, button, table, h1, h2, h3, h4, h5{ font-size:1em;}
p{line-height:1.6;}
/* reset */
* { margin:0; padding:0; box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 { font-weight:700; letter-spacing:-0.02em;font-size: 1.1em;}
strong, dt, thead th {font-weight:bold;letter-spacing:-0.02em; }
ol, ul { list-style:none; }
hr {display:none;}
a {color:inherit; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:""; }
table { border-collapse:collapse; border-spacing:0; width:100%; }
th { font-weight:500; }
button { margin:0; padding:0; border:0; font:inherit; color:inherit; background:transparent; overflow:visible; cursor:pointer; line-height:1; }
button::-moz-focus-inner { margin: -1px; padding: 0; }
a:link, a:visited,a:hover, a:active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }
a:hover, a:active, a:focus { text-decoration:underline;  }
em, i, address {font-style:normal;}
label,button{cursor:pointer}
label{top:2px;position: relative;letter-spacing: -0.03em;}
legend, hr, caption { overflow:hidden; position:absolute; left:-999em; width:0; height:0; font-size:0; line-height:0}
textarea { resize:vertical; font:inherit; overflow-y:auto; }
input, select { color:inherit; font:inherit; line-height:100%; }
img, fieldset,input[type="image"] {border:0;}
img, select, input, button { vertical-align:middle; }
figcaption { display:none; }
img { max-width: 100%}
/* input */
input[type=text],
input[type=password],
input[type=email],
input[type=date]{height: 2.5em;border: 1px solid #e6e6e6;background-color: transparent;padding:0 0.5em;box-sizing: border-box;}
input[type=file] {width: 100%;height: 3em;line-height: 3em;border: 1px solid #e6e6e6;padding: 0.05em;}
input[readonly]{background: #f7f7f7;border: 1px solid #e5e5e5; }
input[type=button]{ transition: all .3s ease-in-out;}
textarea { width:100%;padding:15px; border:1px solid #e6e6e6;font-size:0.95em; }
select {height: 2.5em;padding:0px;border:1px solid #e6e6e6;background-color: transparent;font-size:0.95em;text-indent:5px;padding: 0 20px 0 10px;webkit-appearance: none;-moz-appearance: none;appearance: none;background: #fff url(../images/board/arw_select@2x.png) no-repeat calc(100% - 8px) 50%;background-size: 9px 8px;}
input[type="checkbox"],
input[type="radio"] {margin:0px; padding:0px; height:12px;}
@media only screen and (max-width: 720px){
	textarea {padding: 10px;}
}
input::-webkit-input-placeholder{color:#bababa;}
input:-moz-placeholder{color:#bababa;}
input:-ms-input-placeholder{color:#bababa;}
input::placeholder{color:#bababa;}
textarea::-webkit-input-placeholder{color:#bababa;}
textarea:-moz-placeholder{color:#bababa;}
textarea:-ms-input-placeholder{color:#bababa;}
textarea::placeholder {color:#bababa;}
div.radio-wrap, div.check-wrap {
  display: inline-flex;
  align-items: center;
}
input[type="radio"],
input[type="radio"]:checked {
  /*appearance: none;*/
  width: 15px;
  height: 15px !important;
  border-radius: 100%;
}
input[type="checkbox"],
input[type="checkbox"]:checked {
  /*appearance: none;*/
  width: 15px;
  height: 15px !important;
}
input[type="radio"] + label { margin-left: 5px}
input[type="checkbox"] + label { margin-left: 5px}



/* hidden contents */
.hid, .blind, .skip, .hidden, .invisible{position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden; margin:0 !important; padding:0 !important;}

/* ellipsis */
.ellipsis {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; -moz-binding:url(../js/ellipsis.xml#ellipsis);}
.clip {text-overflow:clip; overflow:hidden; white-space:nowrap;}

/* Skip 메뉴 */
#skipArea, #skipArea ul {height:0; width:100%}
#skipArea a {position:absolute; top:-9999px; left:0; z-index:100; width:100%; height:30px; background-color:#000; color:#fff; line-height:30px; opacity:0.6; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60)}
#skipArea a:focus, #skipArea a:hover, #skipArea a:active {top:0}

/* reset */
table, tbody, tfoot, thead, tr, th, td {border:0;}

/* list */
ul {padding:0px; margin:0px;}
ul li:last-child{ margin-bottom:0;}



@media print{
	html, body, #container, #wrap, #menu, #content{ margin:0; padding:0; background:none !important;}
	#header, #menu, #footer, #floater, .visual_area, #pageUtil, .topnavWrap { display:none !important;}
	#wrap{ min-width: 1024px !important;}
	#page, .innerWrap{ width:100% !important;}
	#content{float:none; display:block; width:100% !important;}
	#container{ width:100% !important;  border: none !important; margin: 0 auto !important;padding:0 !important;}
	#sub_content{ margin:0 auto !important; width:100% !important; padding:0 !important; }
	#sub_content:after{display:none !important;}
	.title_area{ display:block !important; margin-bottom: 15px !important; width:100% !important;}
	
	/* main */
	.main_visual .innerWrap{ width:100% !important;}
	.sec02 li p{ letter-spacing: -0.06em;}
	.work_list, .sec04 .innerWrap{ padding:0 15px;}
	.work_list{ text-align:center;}
	.work_list li{ width:22% !important; margin-right: 1.5% !important; float: none !important; display: inline-block !important;}.work_list li:last-child{margin-right: 0 !important; }	
	.sec04 .main_tit{ text-align: center; float: none !important; width: 100% !important; margin-bottom: 20px;}
	.sec04 .main_tit br{ display:none !important;}
	.sec04 .more{ right:15px !important; top:0; bottom:inherit; left:inherit !important; width: 35px; height: 35px;}
	.sec04 .more:before{width:16px;margin-left: -8px;}
	.sec04 .more:after{height:16px;margin-top: -8px;}
	.sec04 .newsBox{width: 73%; padding: 25px 30px; height: 196px;}
	.sec04 .newsBox li{ margin-bottom:9px;}
	.sec04 .noticeImg{ width:24%; height: 196px;}
	
	.board-imgTxt > ul > li, .board-imgTxt > ul > li:nth-child(4n+4){display: block; float: left; margin: 0 3% 20px 0 !important; width: 31.3% !important;}
	.board-imgTxt > ul > li:nth-child(3n+3) { margin-right: 0 !important;}
}
