@charset "utf-8";

@-webkit-keyframes blinker {
	from {opacity:1.0}
	to {opacity:0.0}
}
#contents{font-family:'Noto Sans KR'}
#contents ul.info{padding:0 0 0 20px; list-style:square; color:#666}
#contents h2{font-weight:500}
table.request th label{font-weight:500}
table.request th p.rq{font-weight:400}
@media screen and (max-width:1280px){
	#contents h2{margin:0 0 10px 0}
	#contents ul.info{margin:0 0 10px 0; font-size:12px}
	table.request{margin:0 0 10px 0; font-size:12px}
	table.request th{width:46px; padding:6px; font-size:12px}
	table.request th p.rq{font-size:11px}
	table.request td{padding:6px}
	table.request .error{font-size:11px}
	table.request td input{padding:6px}
	table.request td textarea{padding:6px}
	div.btn input.submit{width:80px; height:32px; font-size:12px}
}
@media screen and (min-width:1281px){
	#contents h2{margin:0 0 20px 0}
	#contents ul.info{margin:0 0 20px 0; font-size:15px; letter-spacing:1px}
	table.request{margin:0 0 20px 0; font-size:15px}
	table.request th{width:80px; padding:10px; font-size:15px}
	table.request th p.rq{font-size:12px}
	table.request td{padding:10px}
	table.request td div.info{font-size:12px}
	table.request .error{font-size:12px}
	table.request td input{padding:10px}
	table.request td textarea{padding:10px}
	div.btn input.submit{width:120px; height:42px}
}

#contents form.request{position:relative}
#contents a.confirm{position:absolute; right:0; top:-32px; display:block; width:100px; height:32px; box-sizing:border-box; border-width:1px; border-color:#435a8b #3c5488 #334c83; border-radius:2px; background:#4E69A2; text-align:center; line-height:32px; color:#fff; cursor: pointer}
table.request{width:100%; border:1px solid #999; background:#eee}
table.request th{border-bottom:1px solid #ddd; border-right:1px solid #ddd; text-align:left}
table.request th.bl{border-left:1px solid #ddd}
table.request th p.rq{color:#0059e7}
table.request tr:last-child th{border-bottom:0 none}
table.request td{border-bottom:1px solid #ddd; background:#fff}
table.request tr:last-child td{border-bottom:0 none}
table.request td > ul.tel{display:flex; flex-wrap:nowrap; align-items:center}
table.request td > ul.tel > li{width:calc(100% / 3); box-sizing:border-box}
table.request td > ul.tel > li.tel0{padding:0 8px 0 0}
table.request td > ul.tel > li.tel1{padding:0 4px}
table.request td > ul.tel > li.tel2{padding:0 0 0 8px}
table.request td > ul.tel > li > input{text-align:center}
table.request td input{display:block; width:100%; height:40px; border:1px solid #ddd; box-sizing:border-box; background-color:#f8f8f8; font-family:'Noto Sans KR'}
table.request td textarea{display:block; width:100%; height:100px; border:1px solid #ddd; box-sizing:border-box; resize:vertical; background-color:#f8f8f8; font-family:'Noto Sans KR'}
table.request td select{display:block; width:100%; height:40px; border:1px solid #ddd; box-sizing:border-box; background-color:#f8f8f8; font-family:'Noto Sans KR'}
table.request td div.info{display:flex; align-items:center; margin:2px 0 0 0; color:#666}
table.request td div.info i.fa{margin:0 2px 0 0}
table.request .error{color:red}

div.persolInfo{margin:0 0 20px 0}
div.persolInfo div.termBox{border:1px solid #ddd; overflow-y:scroll; overflow-x:hidden; background-color:#f5f5f5; color:#555}
div.persolInfo div.checks{padding:10px; border-width:0 1px 1px 1px; border-style:solid; border-color:#ddd; background-color:#f5f5f5}
div.persolInfo div.checks input{position:relative}
div.persolInfo div.checks label{cursor:pointer}
@media screen and (max-width:1280px){
	div.persolInfo div.termBox{height:80px; padding:10px; font-size:12px; line-height:16px}
	div.persolInfo div.checks input{top:3px}
	div.persolInfo div.checks label{font-size:13px}
}
@media screen and (min-width:1281px){
	div.persolInfo div.termBox{height:124px; padding:20px; font-size:14px; line-height:22px}
	div.persolInfo div.checks input{top:1px; cursor:pointer}
}

#contents div.btn{overflow:hidden}
div.btn input.submit{float:right; box-sizing:border-box; border-radius:2px; border:1px solid #004ac1; background-color:#135ed4; cursor:pointer; color:#fff; font-weight:500; font-family:'Noto Sans KR'; transition:all .3s}
div.btn input.submit:hover{border-color:rgba(0,0,0,.2); background-color:#002258}
div.btn input.submit:focus{border-color:rgba(0,0,0,.2); background-color:#002258}

div.response{position:fixed; z-index:9999; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.5)}
div.response div.box{position:relative; top:50%; left:50%; width:300px; height:120px; border-radius:2px; -ms-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%)}
div.response div.box .header{padding:10px 12px; border-top-left-radius:2px; border-top-right-radius:2px; background:rgb(64, 128, 255); font-size:15px; color:#fff; text-shadow:rgba(0, 0, 0, 0.298039) 0px 0px 2px}
div.response div.box .contents{padding:20px; background:#fff}
div.response div.box .footer{padding:6px; overflow:hidden; border-bottom-left-radius:2px; border-bottom-right-radius:2px; background:#eee}
div.response div.box .footer button{float:right; width:60px; height:26px; box-sizing:border-box; border-width:1px; border-color:#435a8b #3c5488 #334c83; border-radius:2px; background:#4E69A2; color:#fff; cursor:pointer}

@media screen and (max-width:1280px){
	ul#request > li.blank{padding:10px 0}
	ul#request > li > .question{padding:10px 0}
	ul#request > li a{padding:0 120px 0 0}
	ul#request > li a > p.message{margin:0 0 10px 0; font-size:13px}
	ul#request > li a > p.company{height:19px}
	ul#request > li a > p.company > i.fa-building-o{top:1px; margin:0 5px 0 0; font-size:14px}
	ul#request > li a > p.company > span.com{top:-1px}
	ul#request > li a > p.company > span.name{top:-1px}
	ul#request > li .info{top:10px; bottom:10px}

	ul#request > li > .answer{padding:10px 0 10px 10px; font-size:12px}
	ul#request > li > div.return table._tbl{margin:0 0 10px 0}
	ul#request > li > div.return table._tbl th{width:46px; padding:8px; font-size:11px}
	ul#request > li > div.return table._tbl td{padding:8px; font-size:11px}

	ul#request > li > div.return .iptWrap{margin:0 0 10px 0}

	button.moreBtn{padding:10px}
}
@media screen and (min-width:1281px){
	ul#request > li.blank{padding:20px 0}
	ul#request > li > .question{padding:20px 0}
	ul#request > li a{padding:0 100px 0 0}
	ul#request > li a > p.message{margin:0 0 10px 0; font-size:18px}
	ul#request > li a > p.company{height:19px}
	ul#request > li a > p.company > i.fa-building-o{top:1px; margin:0 5px 0 0; font-size:16px}
	ul#request > li a > p.company > span.com{top:-1px}
	ul#request > li a > p.company > span.name{top:-1px}
	ul#request > li .info{top:20px; bottom:20px; width:80px}

	ul#request > li > .answer{padding:20px 0 20px 10px; font-size:13px}
	ul#request > li > div.return table._tbl{margin:0 0 20px 0}
	ul#request > li > div.return table._tbl th{width:60px; padding:10px}
	ul#request > li > div.return table._tbl td{padding:10px}

	ul#request > li > div.return .iptWrap{margin:0 0 20px 0}

	button.moreBtn{padding:15px}
}
ul#request{border-top:1px solid #ddd}
ul#request > li{position:relative; border-bottom:1px solid #ddd}
ul#request > li:hover a > p.message{text-decoration:underline}
ul#request > li > .question{position:relative}
ul#request > li a{position:relative; display:block}
ul#request > li a > p.message{position:relative}
ul#request > li a > p.message > span.preface{position:relative; top:-4px}
ul#request > li a > p.message > span.message{display:inline-block; max-width:80%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#000}
ul#request > li a > p.message span.new{position:relative; top:-6px; padding:2px 4px; margin:0 0 0 5px; background:red; color:#fff; font-size:11px; border-radius:2px; text-decoration:blink; -webkit-animation-name:blinker; -webkit-animation-duration:0.6s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate}
ul#request > li a > p.company > i.fa-building-o{position:relative; color:#666}
ul#request > li a > p.company > span.com{position:relative; color:#666; font-size:12px}
ul#request > li a > p.company > span.com:after{content:'|'; margin:0 4px; color:#bbb}
ul#request > li a > p.company > span.name{position:relative; color:#666; font-size:12px}
ul#request > li .info{position:absolute; right:0}
ul#request > li .info > span.time{text-align:right; color:#a6a6a6; font-size:12px}

ul#request > li > .answer{border-top:1px dashed #ddd}
ul#request > li > .answer > span.ico{padding:2px 4px 4px 4px; margin:0 4px 0 0; border-radius:2px; background:#96b1da; color:#fff; font-size:11px}

ul#request > li > div.return{position:relative}
ul#request > li > div.return button.fa-times{position:absolute; top:-25px; right:0; width:24px; height:24px; border-radius:2px; background:#9f9898; color:#fff}
ul#request > li > div.return table._tbl{table-layout:auto; width:100%; border:1px solid #777; background:#fff; font-size:12px}
ul#request > li > div.return table._tbl th{border-right:1px solid #ddd; border-bottom:1px solid #ccc; background:#eee}
ul#request > li > div.return table._tbl th:last-child{border-right:0 none}
ul#request > li > div.return table._tbl td{border-right:1px solid #ddd; border-bottom:1px solid #ccc}
ul#request > li > div.return table._tbl td:last-child{border-right:0 none}
ul#request > li > div.return table._tbl tr:last-child th, ul#request > li > div.return table._tbl tr:last-child td{border-bottom:0 none}
ul#request > li > div.return table._tbl td.answer{position:relative; padding:10px 100px 10px 10px}

ul#request > li > div.return .iptWrap{position:relative; width:100px; padding:8px 74px 8px 62px; border:1px solid #000; border-radius:2px; background:#fff; box-shadow:1px 2px 6px rgba(0,0,0,.75); font-size:12px}
ul#request > li > div.return .iptWrap > label{position:absolute; left:8px; width:50px; line-height:36px}
ul#request > li > div.return .iptWrap > input.txt{display:block; width:100%; height:36px; padding:10px; border:0 none; box-sizing:border-box; border:1px solid #ddd; background:#f5f5f5; line-height:20px; color:#000}
ul#request > li > div.return .iptWrap > input.btn{position:absolute; top:8px; right:8px; width:58px; height:36px; box-sizing:border-box; border:none; border-radius:2px; background:#999; color:#fff; cursor:pointer}

button.moreBtn{position:relative; display:block; width:100%; margin:10px 0 0 0; box-sizing:border-box; color:#fff; font-family:'Nanum Gothic'}
button.moreBtn:hover:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.1)}