@charset "utf-8";
html, body, 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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: inherit; font-weight:inherit; color:inherit; vertical-align: inherit; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-tap-highlight-color:rgba(102, 102, 102, 0.3);}
html, body{width:100%; height:100%; word-break:break-all;}
body{line-height:1.1; font-size:14px; font-family:'Nanum Gothic'; color:#333; overflow-y:scroll; background:#fff;}
ol, ul{list-style: none;}
table{border-collapse: collapse;border-spacing: 0;}
table caption{display:none;}
table th, table td{vertical-align:middle;}
a, a:hover, a:link, a:focus{text-decoration: none; color:inherit;}
i{font-style:normal;}


/*FORM RESET*/
input{border:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; vertical-align:middle;}
input[type=email], input[type=text], input[type=password], input[type=tel], input[type=file], input[type=number], select, textarea {margin:0; padding:0; border: 1px solid #ddd; font-family:'Nanum Gothic'; font-size:inherit; resize:none; vertical-align:middle; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; height:26px; padding:0 4px; line-height:24px;}
select{height:26px; line-height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input, img{vertical-align:middle;}
input[type=file]{border:0; padding:0;}
input[type=button], input[type=submit], button{padding:0; color:inherit; font-family:'Nanum Gothic'; border:0; background:none; vertical-align:middle; cursor:pointer; font-weight:inherit; font-size:inherit; line-height:1.1;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
label{font-family:'Nanum Gothic';}
textarea{width:100%; height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:4px; line-height:1.3;}
.hidden, .hide{display:none;}

.w10p{width:10%;}
.w20p{width:20%;}
.w30p{width:30%;}
.w40p{width:40%;}
.w50p{width:50%;}
.w60p{width:60%;}
.w70p{width:70%;}
.w80p{width:80%;}
.w90p{width:90%;}
.w100p{width:100%;}

.w5p{width:5%;}
.w15p{width:15%;}
.w25p{width:25%;}
.w35p{width:35%;}
.w45p{width:45%;}
.w55p{width:55%;}
.w65p{width:65%;}
.w75p{width:75%;}
.w85p{width:85%;}
.w95p{width:95%;}

.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}

input + span.guide{margin-left:5px;}

.dateInput{position:relative; display:inline-block;}
.dateInput input.date,.dateInput input.mdate{position:relative; z-index:2; background:none; text-align:left; margin:0; padding:0 4px; font-size:12px; font-family:'굴림체'; color:#333; width:85px; font-weight:700; vertical-align:middle;}
.dateInput .before{position:absolute; top:50%; left:0; z-index:1; width:100%; height:100%; padding:0 4px; margin-top:-11px; line-height:22px; border:1px solid transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:12px; color:#ddd; font-family:'굴림체'; font-weight:700;}
.dateInput .before span{color:#fff; opacity:0;}

.loading_layer{position:fixed; top:0; left:0; z-index:5000; width:100%; height:100%; background:rgba(0,0,0,0.0); color:rgba(255, 255, 255, 0.0); font-size:14px; text-align:center;}
.loading_layer p{position:absolute; top:45%; left:0; width:100%; margin-top:55px; font-family:'Verdana'; font-weight:700;}

label.checkbox{position:relative; display:inline-block; line-height:16px; vertical-align:middle;}
label.checkbox input{position:absolute; top:0; left:0; opacity:0; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0);}
label.checkbox input ~ span{position:relative; display:block; width:100%; height:100%; padding-left:21px;}
label.checkbox input ~ span:before{content:' '; position:absolute; top:50%; left:0; display:block; width:14px; height:14px; border:1px solid #aaa; background:#fff; color:#c00; text-align:center; line-height:14px; font-size:14px; -moz-transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); -o-transform:translate(0, -50%); transform:translate(0, -50%);}
label.checkbox input:checked ~ span:before{content:'\2714'; font-weight:400;}

label.radio{position:relative; display:inline-block; line-height:16px; vertical-align:middle;}
label.radio input{position:absolute; top:0; left:0; opacity:0; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0);}
label.radio input ~ span{position:relative; display:block; width:100%; height:100%; padding-left:21px;}
label.radio input ~ span:before{content:' '; position:absolute; top:50%; left:0; display:block; width:14px; height:14px; border:1px solid #aaa; background:#fff; color:#c00; text-align:center; line-height:14px; font-size:14px; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; -moz-transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); -o-transform:translate(0, -50%); transform:translate(0, -50%);}
label.radio input:checked ~ span:after{content:' '; position:absolute; top:50%; left:3px; display:block; width:10px; height:10px; background:#666; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; -moz-transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); -o-transform:translate(0, -50%); transform:translate(0, -50%);}

.selectBox{display:inline-block; position:relative; border:1px solid #d6d6d6; background:#fff; cursor:pointer; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; font-size:12px; overflow:hidden; vertical-align:middle;}
.selectBox:before,.selectBox:after{content:''; position:absolute; top:0; right:0; width:30px; height:100%; background:#f8f8f8; text-align:center;}
.selectBox:after{content:'\2039'; top:50%; height:auto; line-height:20px; margin-top:-10px; background:none; color:#999; font-size:13px; -moz-transform:rotate(-90deg) scale(0.5,1); -webkit-transform:rotate(-90deg) scale(0.5,1); -ms-transform:rotate(-90deg) scale(0.5,1); -o-transform:rotate(-90deg) scale(0.5,1); transform:rotate(-90deg) scale(0.5,1); font-weight:800;}
.selectBox span.selected{position:absolute; top:0; left:0; display:block; height:100%; width:100%; padding:0 35px 0 10px; font-weight:300; color:#222; white-space:nowrap; overflow:hidden; -ms-text-overflow:ellipsis; text-overflow:ellipsis; font-size:inherit;}
.selectBox span.selected:before{content:' '; display:inline-block; width:0; height:100%; vertical-align:middle;}
.selectBox select{position:relative; z-index:2; opacity:0; -ms-filter:alpha(opacity=0); margin:0; padding:0 35px 0 10px; border:0; color:#333; font-size:inherit;}

.MessageModal{position:fixed; top:0; left:0; z-index:6000; width:100%; height:100%; min-width:320px; background:rgba(0,0,0,0.5); font-size:13px; color:#333;}
.MessageModal .MessageModalWrap{position:absolute; top:50%; left:50%; min-width:250px; max-width:500px; background:#fff; -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.3); box-shadow:2px 2px 3px rgba(0, 0, 0, 0.3); border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; overflow:hidden; -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.MessageModal .MessageModalWrap > header{padding:7px; font-weight:700; background:#999; color:#fff;}
.MessageModal .MessageModalWrap > div.text{padding:10px; min-height:70px;}
.MessageModal .MessageModalWrap > footer{padding:7px 15px; text-align:right; background:#f6f6f6;}
.MessageModal .MessageModalWrap > footer a{display:inline-block; margin-left:4px; font-weight:700; padding:2px 5px;}
.MessageModal .MessageModalWrap > footer a:focus{background:#ddd;}
span.uploadedFile{display:inline-block; padding:3px 5px; border:1px solid #ccc; background:#eee; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}
.fileUploadArea{padding:10px 0;}
.fileUploadArea + .fileUploadArea{padding-top:0;}
.fileUploadImage{display:inline-block; vertical-align:middle;}
.fileUploadImage img{display:block; max-width:100px; max-height:100px;}
.fileUploadImage i{display:block; width:100px; height:100px; background:no-repeat center center; -webkit-background-size:contain; background-size:contain;}
.fileUploadArea2{padding:10px 0;}
.fileUploadArea2 + .fileUploadArea2{padding-top:0;}
.fileUploadArea2 p{display:inline-block;}

.jqFileUploadArea .progress{display: inline-block; height: 20px; width: 100px; overflow: hidden; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; background:#eee;vertical-align: middle;}
.jqFileUploadArea .progress .bar{width: 0%; height: 100%;}
.cross{position:relative; display:inline-block; font-size:12px; width:1em; height:1em; vertical-align:middle; overflow:hidden;}
.cross:before{content:''; position:absolute; top:0.5em; left:0.5em; display:block; width:1px; height:1.4142em; -moz-transform:translate(-50%, -50%) rotate(45deg); -webkit-transform:translate(-50%, -50%) rotate(45deg); -ms-transform:translate(-50%, -50%) rotate(45deg); -o-transform:translate(-50%, -50%) rotate(45deg); transform:translate(-50%, -50%) rotate(45deg); background:#000;}
.cross:after{content:''; position:absolute; top:0.5em; left:0.5em; display:block; width:1px; height:1.4142em; -moz-transform:translate(-50%, -50%) rotate(-45deg); -webkit-transform:translate(-50%, -50%) rotate(-45deg); -ms-transform:translate(-50%, -50%) rotate(-45deg); -o-transform:translate(-50%, -50%) rotate(-45deg); transform:translate(-50%, -50%) rotate(-45deg); background:#000;}

#checkActionModal .modal_wrap{width:400px; height:auto !important;}
#checkActionModal .modal_contents{padding:10px;}
#checkActionModal .selected{padding:5px; border:1px solid #666;}
#checkActionModal .selected b{font-weight:700;}
#checkActionModal div.group{padding:10px; margin-top:10px; height:250px; border:1px solid #ccc; overflow-y:scroll;}
#checkActionModal button.boardActionGroupBtn{position:relative; margin-bottom:5px; height:24px; width:100%; padding:0 10px; background:#999; color:#fff; text-align:left;}
#checkActionModal ul{display:none;}
#checkActionModal li{border-bottom:1px solid #ddd;}
#checkActionModal li button{display:block; width:100%; text-align:left; padding:5px;}
#checkActionModal li button:hover{background:#eee;}
#checkActionModal li.active button{background:#555; color:#fff; font-weight:700;}
#checkActionModal .bottomBtn{margin-top:0; padding:10px 0;}
#checkActionModal .selectedCategory select{margin-top:5px; width:100%;}
.youtubeFrameWrap{position:relative; width:100%; height:0; padding-bottom:56.25%;}
.youtubeFrameWrap iframe{position:absolute; top:0; left:0; width:100%; height:100%;}

.se2_addi_btns{padding:2px 5px; border:1px solid #ddd; border-bottom:0; background:#f4f4f4; font-size:12px; font-weight:700; color:#666; text-align:right;}
.se2_addi_btns > div{display:inline-block;}
.se2_addi_btns > div + div{margin-left:5px;}
.se2_addi_btns button{height:18px; padding:0 5px; border:1px solid #aaa; background:-webkit-linear-gradient(#fff, #fff, #fff, #eee); background:-moz-linear-gradient(#fff, #fff, #fff, #eee); background:-o-linear-gradient(#fff, #fff, #fff, #eee); background:linear-gradient(#fff, #fff, #fff, #eee); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}
.se2_addi_btns .se2_add_img button i{position:relative; display:inline-block; width:12px; height:12px; border:1px solid #b18d82; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#fff; margin-right:5px; overflow:hidden;}
.se2_addi_btns .se2_add_img button i:after{content:''; position:absolute; top:100%; left:50%; width:30px; height:30px; margin:-4px 0 0 -15px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background:#0db01c;}
.se2_addi_btns .se2_add_img button i:before{content:''; position:absolute; top:10%; right:10%; width:4px; height:4px; display:block; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background:#ff8d46;}
.se2_addi_btns .se2_add_youtube button i{position:relative; display:inline-block; width:12px; height:8px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#c11; margin-right:5px; overflow:hidden;}
.se2_addi_btns .se2_add_youtube button i:before{content:''; display:block; width:1px; height:150%;}
.se2_addi_btns .se2_add_youtube button i:after{content:''; position:absolute; top:50%; left:50%; display:block; border-top:2px solid transparent; border-left:4px solid #fff; border-bottom:2px solid transparent; margin:-2px 0 0 -2px;}
.se2_addi_btns .se2_add_link button i{position:relative; display:inline-block; width:14px; height:14px; margin-right:5px; overflow:hidden;}
.se2_addi_btns .se2_add_link button i:before{content:''; display:block; width:4px; height:2px; border:2px solid #666; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -moz-transform:translate(0, 5px) rotate(-45deg); -webkit-transform:translate(0, 5px) rotate(-45deg); -ms-transform:translate(0, 5px) rotate(-45deg); -o-transform:translate(0, 5px) rotate(-45deg); transform:translate(0, 5px) rotate(-45deg);}
.se2_addi_btns .se2_add_link button i:after{content:''; position:absolute; top:0; left:0; display:block; width:4px; height:2px; border:2px solid #888; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -moz-transform:translate(5px, 3px) rotate(-45deg); -webkit-transform:translate(5px, 3px) rotate(-45deg); -ms-transform:translate(5px, 3px) rotate(-45deg); -o-transform:translate(5px, 3px) rotate(-45deg); transform:translate(5px, 3px) rotate(-45deg);}

#youtubeLinkModal .modal_wrap{width:500px; height:350px;}
#youtubeLinkModal .modal_contents{padding:20px;}
#youtubeLinkModal textarea{height:150px; border:1px solid #ccc;}
#youtubeLinkModal input[type=text]{width:60px; margin-right:5px; border:1px solid #ccc; height:24px;}
#youtubeLinkModal textarea{height:150px; border:1px solid #ccc;}
#youtubeLinkModal dl{display:table; width:100%; table-layout:fixed;}
#youtubeLinkModal dt{display:table-cell; width:80px; padding:2px;}
#youtubeLinkModal dd{display:table-cell; padding:2px;}
#youtubeLinkModal footer{margin-top:10px; text-align:center;}

#urlLinkModal .modal_wrap{width:500px; height:170px;}
#urlLinkModal .modal_contents{padding:20px;}
#urlLinkModal textarea{height:150px; border:1px solid #ccc;}
#urlLinkModal input[type=text]{border:1px solid #ccc; height:24px;}
#urlLinkModal textarea{height:150px; border:1px solid #ccc;}
#urlLinkModal dl{display:table; width:100%; table-layout:fixed;}
#urlLinkModal dt{display:table-cell; width:80px; padding:2px;}
#urlLinkModal dd{display:table-cell; padding:2px;}
#urlLinkModal footer{margin-top:10px; text-align:center;}
body{font-size:14px; line-height:1.5; background:white; color:#333;}

#wrap{display:table; min-height:100%; width:100%;}
#header{display:none;}
#left_container{display:table-cell; width:200px; background:#eee; vertical-align:top;}
#left_container_wrap{padding:40px 20px 20px;}
#main_container{display:table-cell; padding:0 20px 20px;}

#left_container h1{font-weight:700; font-size:30px;}
#left_container ul{padding-top:30px;}
#left_container ul > li{padding-top:10px;}
#left_container ul > li > a{font-weight:700;}
#left_container ul > li.active > a{color:#0f7ddb;}
#left_container ul ol{padding:10px 0 10px 20px;}
#left_container ul ol li{}
#left_container ul ol li.active > a{font-weight:700; color:#0f7ddb;}
#left_container #hideMenuBtn{display:none;}

#introContents{display:block; text-align:center; padding-top:200px;}
#introContents h1{font-size:40px; font-weight:700;}
#introContents p{padding-top:10px;}

#manualContents{padding-bottom:50px;}
#manualContents h1{padding-top:40px; font-size:40px; font-weight:700;}
#manualContents h2{padding-top:30px; font-size:16px; font-weight:700;}
#manualContents h3{padding-top:30px; font-weight:700; color:#777;}
#manualContents p{padding:30px 0 10px; color:#777;}
#manualContents p b{color:#000;}
#manualContents p strong{font-weight:700; color:#0f7ddb;}
#manualContents pre{margin-top:20px; white-space:pre-line;}

@media screen and (max-width:500px){
	#wrap{display:block;}
	#header{position:fixed; top:0; left:0; z-index:2; display:block; width:100%; height:50px; background:#fff;}
	#header h1{position:absolute; top:0; left:0; width:100%; height:100%; line-height:50px; font-size:17px; text-align:center; font-weight:700;}
	#header.index h1{display:none;}
	#header #showMenuBtn{position:absolute; top:0; left:0; z-index:2; width:50px; height:50px; font-size:20px;}
	#left_container{position:fixed; z-index:5; top:0; left:0; display:block; width:100%; height:100%; padding:0; -moz-transform:translate(-100%,0); -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); -o-transform:translate(-100%,0); transform:translate(-100%,0); -moz-transition:0.2s; -webkit-transition:0.2s; -ms-transition:0.2s; -o-transition:0.2s; transition:0.2s; overflow-y:auto;}
	#left_container.on{background:rgba(0,0,0,0.3); -moz-transform:translate(0,0); -webkit-transform:translate(0,0); -ms-transform:translate(0,0); -o-transform:translate(0,0); transform:translate(0,0);}
	#main_container{position:relative; z-index:1; display:block; padding-top:20px;}
	#left_container_wrap{min-height:100%; width:200px; padding:20px; background:#eee;}
	#left_container > h1{display:none;}
	#left_container #hideMenuBtn{position:absolute; left:200px; top:10px; display:block; width:30px; height:30px; color:#fff; font-size:20px;}
#manualContents h1{font-size:28px;}
}

@media(max-width:999px) and (min-width:800px){
}
@media(max-width:799px) and (min-width:600px){
}
@media(max-width:599px) and (min-width:400px){
}
@media(max-width:399px){
}