@charset "UTF-8";

/* RESET */
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0;}
	fieldset,img {border:0 none;}
	img {vertical-align:middle;}
	dl,ul,ol,menu,li {list-style:none;}
	blockquote, q {quotes:none;}
	blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
	input,select,textarea,button {font-size:100%;vertical-align:middle;}
	button {border:0 none;background-color:transparent;cursor:pointer;}
	table {border-collapse:collapse;border-spacing:0;}
	body {-webkit-text-size-adjust:none;}
	input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0;}
	input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox;}
	button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0;}
	input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none;}
	select {-webkit-appearance:none;}
	body {background:#fff;}
	body,th,td,input,select,textarea,button {font-size:14px; color:#333;font-family:'Noto Sans Kr', "Apple SD Neo Gothic", "malgun gothic", dotum, sans-serif;}
	input[type='password'] {font-family:'Noto Sans Kr', "Apple SD Neo Gothic", "malgun gothic", dotum, sans-serif;}
	a {text-decoration:none; color:inherit; cursor:pointer;}
	i {font-style:normal;}
	h1, h2, h3, h4, h5, h6 {font-weight:500;}
	strong, b, th {font-weight:500;}
	a:active, a:hover {text-decoration:none;}
	address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;}
	button {cursor:pointer; outline:none;}
	header, footer, main, section, article, aside {display:block;}
/* @@RESET */

body, html {height:100%; font-size:14px;}
body.noscroll {overflow:hidden;}
body.noscroll div.wrap {position:relative; filter:blur(5px);}
div.dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:1;}


#skip_nav {position:relative; font-size:0; line-height:0; overflow:hidden; z-index:9999;}
#skip_nav > a {display:block; background:#f5f5f5; color:#333; text-align:center;}
#skip_nav > a:focus,
#skip_nav > a:hover,
#skip_nav > a:active {font-weight:bold; font-size:16px; line-height:39px; border-bottom:1Related sitepx solid #ddd;}


/* container */
.container {width:1100px; padding-right:10px; padding-left:10px; margin-right:auto; margin-left:auto;}
.container:before, .container:after {clear:both; content:" "; display:block;}


/* header */
header {position:absolute; left:0; top:0; width:100%; z-index:10;}
header > div.top {height:40px; background:#2b2b33;}
header > div.top > div.container > div.lang {float:left; min-width:155px; height:40px; margin-right:10px; border:0 none; background:none;}
header > div.top > div.container > div.lang > button {padding-left:25px;min-width:155px; padding-right:20px; width:115px; color:#fff;}
header > div.top > div.container > div.lang > button[data-selected=ko] {background:url(../images/ko.png) no-repeat left center;}
header > div.top > div.container > div.lang > button[data-selected=en] {background:url(../images/en.png) no-repeat left center;}
header > div.top > div.container > div.lang > button[data-selected=ja] {background:url(../images/ja.png) no-repeat left center;}
header > div.top > div.container > div.lang > button[data-selected=zh] {background:url(../images/zh.png) no-repeat left center;}
header > div.top > div.container > div.lang > ul.options > li {padding-left:40px;}
header > div.top > div.container > div.lang > ul.options > li[data-value=ko] {background:url(../images/ko.png) no-repeat 10px center;}
header > div.top > div.container > div.lang > ul.options > li[data-value=en] {background:url(../images/en.png) no-repeat 10px center;}
header > div.top > div.container > div.lang > ul.options > li[data-value=ja] {background:url(../images/ja.png) no-repeat 10px center;}
header > div.top > div.container > div.lang > ul.options > li[data-value=zh] {background:url(../images/zh.png) no-repeat 10px center;}
header > div.top > div.container > div.lang select {color:#fff;}
header > div.top > div.container > a {float:left; display:block; font-size:13px; line-height:40px; color:#fff;}
header > div.top > div.container > a > i {width:16px; height:16px; margin-left:3px; line-height:16px; text-align:center; border-radius:50%; background:#fff; color:#2b2b33; vertical-align:middle;}
header > div.top > div.container > a > i:before {display:block; width:16px; height:16px; font-size:12px; text-align:center; line-height:16px;}
header > div.top > div.container > div.util {float:right; font-size:0; white-space:nowrap;}
header > div.top > div.container > div.util > div.profile {display:inline-block; height:40px; margin-right:10px; padding:0 15px; background:#de1d28; vertical-align:top;}
header > div.top > div.container > div.util > div.profile > a {display:block;}
header > div.top > div.container > div.util > div.profile > a > span {display:inline-block; vertical-align:middle;}
header > div.top > div.container > div.util > div.profile > a > span.name {font-size:13px; line-height:40px; color:#fff;}
header > div.top > div.container > div.util > div.profile > a > span.img {margin-left:8px; width:30px; height:30px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:cover;}
header > div.top > div.container > div.util > a {display:inline-block; font-size:13px; line-height:40px; vertical-align:top; color:#fff;}
header > div.top > div.container > div.util > div.lang {display:inline-block; position:relative; width:90px; vertical-align:top; font-size:14px; margin-left:20px; padding-left:20px;}
header > div.top > div.container > div.util > div.lang:after {content:''; display:block; width:1px; height:14px; background:rgba(255,255,255,.3); position:absolute; left:0; top:13px;}
header > div.top > div.container > div.util > div.lang > div[data-role=select] {height:40px; border:0 none; font-size:13px;}
header > div.top > div.container > div.util > div.lang > div[data-role=select] > button {padding:0 15px 0 0; background:transparent; line-height:40px; color:#fff;}
header > div.top > div.container > div.util > div.lang > div[data-role=select] > button:after {width:auto; width:15px; height:40px; line-height:40px; font-size:10px; color:#fff;}
header > div.header h1 {float:left; width:148px; height:100px; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url(/images/logo.png);}
header > div.header h1 > a {display:block; width:100%; height:100%; overflow:hidden; text-indent:-9999px; font-size:0;}
header > div.header nav {float:left; width:calc(100% - 148px);}
header > div.header nav > ul.gnb {text-align:right; font-size:0;}
header > div.header nav > ul.gnb > li {display:inline-block; vertical-align:top; padding:0 20px;}
header > div.header nav > ul.gnb > li > a {display:block; position:relative; line-height:100px; font-size:20px; padding:0 20px;}
header > div.header nav > ul.gnb > li > a:after {content:''; display:block; position:absolute; left:50%; bottom:-1px; width:0; height:2px; background:#de1d28; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:all 0.3s; transition:all 0.3s;}
header > div.header nav > ul.gnb > li:last-child {padding-right:0;}
header > div.header nav > ul.gnb > li:last-child > a {padding-right:0;}
header > div.header nav > ul.gnb > li:hover > a {color:#de1d28;}
header > div.header nav > ul.gnb > li:hover > a:after {width:100%;}
header > div.header nav > ul.gnb > li > ul.submenu {display:none; text-align:center; padding:30px 0;}
header > div.header nav > ul.gnb > li > ul.submenu > li {position:relative; height:42px;}
header > div.header nav > ul.gnb > li > ul.submenu > li > a {display:block; position:absolute; top:0; left:50%; font-size:15px; line-height:42px; white-space:nowrap; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
header > div.header nav > ul.gnb > li > ul.submenu > li > a:hover {color:#de1d28; text-decoration:underline;}
header > div.header button.sitemap {display:none; float:right; width:60px; height:100px; border:0 none; background:none; font-size:0;}
header > div.header button.sitemap > i {display:block; width:60px; height:100px; line-height:100px; font-size:40px; text-align:center;}
header > div.header button.m_menu {display:none; float:right; width:60px; height:100px; border:0 none; background:none; font-size:0;}
header > div.header button.m_menu > i {display:block; width:60px; height:100px; line-height:100px; font-size:40px; text-align:center;}

header.on {background:#fff; transition:all 0.3s;}
header.on:after {content:''; display:block; position:absolute; left:0; top:139px; width:100%; height:1px; background:#ddd;}
header.on > div.header nav > ul.gnb > li > ul.submenu {display:block;}
/* @@header */

/* footer */
footer {padding:35px 0; border-top:1px solid #e5e5e5; background:#f5f5f5;}
footer div.f_cnts {float:left;}
footer div.f_cnts > div.menu {word-break:keep-all;}
footer div.f_cnts > div.menu > a {margin-right:25px; font-size:15px;}
footer div.f_cnts > div.menu > a:hover {color:#de1d28;}
footer div.f_cnts > p.contact {margin-top:25px; font-size:15px; color:#666;}
footer div.f_cnts > p.contact > span {white-space:nowrap;}
footer div.f_cnts > p.contact > span.adr {margin-right:15px;}
footer div.f_cnts > p.copyright {margin-top:5px; font-size:11px; color:#999;}
footer div.etcs {float:right; width:450px;}
footer div.etcs:after {content:''; display:block; clear:both;}
footer div.etcs > div[data-role=select] {width:190px; float:right; margin-bottom:18px;}
footer div.etcs > div.app {clear:both; font-size:0; text-align:right;}
footer div.etcs > div.app > span {display:inline-block; font-size:14px; vertical-align:middle; word-break:keep-all;}
footer div.etcs > div.app > a {display:inline-block; width:38px; height:37px; margin-left:8px; background-size:contain; font-size:0; text-indent:-9999px; overflow:hidden; vertical-align:middle;}
footer div.etcs > div.app > a.ios {background:url(/images/ico_app_ios.png) no-repeat center;}
footer div.etcs > div.app > a.android {background:url(/images/ico_app_android.png) no-repeat center;}
/* @@footer */

/* 셀렉트박스 */
div[data-role=select] {display:block; position:relative; border:1px solid #ddd; height:38px; vertical-align:top; background:#fff;}
div[data-role=select]:after {content:'\e935'; display:inline-block; position:absolute; right:0; top:50%; width:37px; font-family: 'xeicon'; color:#999; font-size:13px; text-align:center; transform:translateY(-50%);}
div[data-role=select] select {position:relative; padding:0 10px; width:100%; height:100%; border:0 none; background:none; z-index:1;}
div[data-role=select] button {position:relative; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box; width:100%; height:100%; padding:0 38px 0 10px; text-align:left; font-size:inherit; background:none; border:0 none; outline:0 none; white-space:nowrap; vertical-align:top; z-index:1;}
div[data-role=select] ul.options {display:none; position:absolute; top:100%; left:-1px; width:100%; overflow:hidden; overflow-y:auto; max-height:155px; border:1px solid #ddd; background:#fff; z-index:5;}
div[data-role=select] ul.options > li {padding:0 10px; height:40px; line-height:40px; font-size:inherit; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
div[data-role=select] ul.options > li.hide {display:none;}
div[data-role=select] ul.options > li:hover {background:#f8f8f8;}
div[data-role=select] ul.options > li + li {border-top:1px solid #ddd;}
div[data-role=select] ul.options.on {display:block;max-height: inherit;}
div[data-role=select] ul.options.up {top:auto; bottom:100%;}
div[data-role=select].isMobile button {display:none;}
div[data-role=select].isMobile label {display:block; position:absolute; left:0; top:0; width:100%; height:100%;}

/* @@셀렉트박스 */


div[data-role=modal] {position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:9999;}
div[data-role=modal] > div.box {display:block; position:absolute; left:50%; top:50%; width:95%; max-width:300px; background:#fff; box-shadow:0px 1px 70px rgba(0,0,0,0.5); margin:0px auto; transform:translate(-50%, -50%);}
div[data-role=modal] > div.box > form {margin:0; padding:0;}
div[data-role=modal] > div.box > form > div[data-role=header] {min-height:80px; padding:0; margin:0; position:relative; text-align:left; background:transparent; display:block; box-shadow:none;}
div[data-role=modal] > div.box > form > div[data-role=header] > h1 {font-size:18px; display:block; width:100%; height:auto; line-height:30px; padding:25px 60px 25px 20px; color:#333; overflow:hidden; box-sizing:border-box; margin:0;}
div[data-role=modal] > div.box > form > div[data-role=header] > button {position:absolute; top:20px; right:10px; width:40px; height:40px; background:transparent; border:0px; cursor:pointer; font-size:0;}
div[data-role=modal] > div.box > form > div[data-role=header] > button > i {width:40px; height:40px; line-height:40px; font-size:20px; color:#666; text-align:center;}
div[data-role=modal] > div.box > form > div[data-role=header] > button:hover {color:#333;}
div[data-role=modal] > div.box > form > div[data-role=context] {min-height:30px; height:calc(100% - 122px); width:100%; padding:0px 20px; box-sizing:border-box; font-size:14px; color:#333; text-align:left; display:block;}
div[data-role=modal] > div.box > form > div[data-role=footer] {display:table; table-layout:fixed; width:100%; height:auto; background:transparent; margin:0px; margin-top:20px; padding:0px;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div {display:table-cell; width:auto; vertical-align:middle;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button {display:block; width:100%; height:42px; box-sizing:border-box; cursor:pointer; font-size:14px; line-height:42px; border:0; background:#bdbdbd; color:#fff;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button:hover {background:#aeaeae;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button:focus {border:1px dotted rgba(0,0,0,0.5); line-height:40px;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button[disabled] {background:#bdbdbd !important; opacity:0.7; cursor:not-allowed;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button[type=submit], div[data-role=modal] > div.box > form > div[data-role=footer] > div > button.submit {background:#2196fe; color:#fff;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button[type=submit]:hover, div[data-role=modal] > div.box > form > div[data-role=footer] > div > button.submit:hover {background:#1e88e5;}
/* div[data-role=modal] > div.box > form > div[data-role=footer] > div > button[type=submit][disabled], div[data-role=modal] > div.box > form > div[data-role=footer] > div > button.submit {background:#2196fe !important;} */
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button.danger {background:#f44336; color:#fff;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button.danger:hover {background:#e53935;}
div[data-role=modal] > div.box > form > div[data-role=footer] > div > button[disabled].danger {background:#e53935 !important;}

div[data-role=modal] > div.box > form > div[data-role=context] > div[data-role=select] {height:44px;}
div[data-role=modal] > div.box > form > div[data-role=context] > div[data-role=input] {margin-top:8px;}
div[data-role=modal] > div.box > form > div[data-role=context] > div[data-role=input] > label {font-size:0;}
div[data-role=modal] > div.box > form > div[data-role=context] > div[data-role=input] > label > input {box-sizing:border-box; width:100%; padding:0 10px; border:1px solid #ddd; height:46px; line-height:44px;}


/* 게시판 */
div[data-role=input][data-type=input] > input {border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; width:100%; height:40px; padding:10px; line-height:18px; border-radius:0px;}
div[data-role=input][data-type=input] > input:focus, div[data-role=input][data-type=input] > input.focus {border-color:#66afe9;}
div[data-role=input][data-type=input] > input[disabled] {background:#e5e5e5; opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=input] > input[type=date] {opacity:0; width:100%; height:100%; position:absolute; top:0; left:0; z-index:5;}

ul[data-role=table] {list-style:none; min-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
ul[data-role=table] > li {display:table; width:100%; font-size:14px; table-layout:fixed; box-sizing:border-box;}
ul[data-role=table] > li {border-bottom:1px solid #e3e4e5;}
ul[data-role=table] > li > span,
ul[data-role=table] > li.thead > a {display:table-cell; vertical-align:top; box-sizing:border-box; height:60px;}
ul[data-role=table] > li > span.thead {background:#f4f4f4; font-weight:500;}
ul[data-role=table] > li.thead {border-top:2px solid transparent; border-bottom:1px solid #e3e4e5;}
ul[data-role=table].red > li.thead {border-top-color:#f44336;}
ul[data-role=table].black > li.thead {border-top-color:#222;}

ul[data-role=table] > li.thead > span, ul[data-role=table] > li.thead > a {background:#f4f4f4; font-weight:500; text-align:center; vertical-align:middle; line-height:1.6; padding:10px 0px;}
ul[data-role=table] > li.thead > a {color:#333; text-decoration:none;}
ul[data-role=table] > li.thead > a > i {margin-left:5px;}
ul[data-role=table] > li.tbody {background:#fff;}
ul[data-role=table] > li.tbody > span {vertical-align:middle; padding:0px 10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
ul[data-role=table] > li.tbody > span.multiline {line-height:20px; padding:10px; height:auto; white-space:normal;}
ul[data-role=table] > li.tbody > span.center {text-align:center;}
ul[data-role=table] > li.tbody > span.right {text-align:right;}

ul[data-role=table].inner > li > span, ul[data-role=table].inner > li > a {border-right:1px solid #e3e4e5;}
ul[data-role=table].inner > li > span:last-child {border-right:0px;}
ul[data-role=table].view > li > span.thead {width:160px; padding-left:15px; line-height:40px;}
ul[data-role=table].view > li > span.tbody {width:100%; padding:10px; line-height:1.6; background:#fff;}
ul[data-role=table] > li.empty {display:block; height:100px; line-height:100px; font-size:14px; color:#666; text-align:center;}


i[data-module=member][data-role=photo] {display:inline-block; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; border-radius:50%; border:1px solid #ccc; box-sizing:border-box; vertical-align:middle;}
i[data-module=member][data-role=photo][data-idx] {cursor:pointer;}

div[data-module=board] div[data-role=toolbar] {margin-bottom:10px; text-align:right; font-size:0;}
div[data-module=board] div[data-role=toolbar] > div[data-role=input] {width:160px; font-size:14px; float:left;}
div[data-module=board] div[data-role=toolbar] > div[data-role=search] {width:50%; max-width:300px; display:inline-block; font-size:0; vertical-align:middle;}
div[data-module=board] div[data-role=toolbar] > div[data-role=search] > div[data-role=input] {display:inline-block; width:calc(100% - 45px); vertical-align:middle; font-size:14px;}
div[data-module=board] div[data-role=toolbar] > div[data-role=search] > button {width:40px; height:40px; background:#b5b7c0; border:0px; cursor:pointer; vertical-align:middle; margin-left:5px;}
div[data-module=board] div[data-role=toolbar] > div[data-role=search] > button > i {font-size:14px; color:#fff;}
div[data-module=board] div[data-role=toolbar] > div[data-role=search] > button:hover {background:#828595;}
div[data-module=board] div[data-role=toolbar] > a {display:inline-block; height:40px; line-height:40px; padding:0px; box-sizing:border-box; vertical-align:middle; margin-left:5px; text-decoration:none; cursor:pointer; background:#2196f3; color:#fff; font-size:0;}
div[data-module=board] div[data-role=toolbar] > a > i {width:40px; height:40px; line-height:40px; vertical-align:middle; text-align:center; font-size:14px;}
div[data-module=board] div[data-role=toolbar] > a > span {height:40px; line-height:40px; display:inline-block; vertical-align:middle; padding-right:15px; font-size:14px;}
div[data-module=board] div[data-role=toolbar] > a:hover {background:#1e88e5;}


div[data-module=board] ul[data-role=table] > li.notice {background:#FFFDE7;}
div[data-module=board] ul[data-role=table] > li > span.loopnum {width:65px; text-align:center;}
div[data-module=board] ul[data-role=table] > li > span.loopnum > i.fa-caret-right {color:#f44336;}
div[data-module=board] ul[data-role=table] > li.notice > span.loopnum {text-align:center; font-weight:500; color:#F44336;}

div[data-module=board] ul[data-role=table] > li > span.title {width:100%;}
div[data-module=board] ul[data-role=table] > li > span.title > a {text-decoration:none; color:#222; display:inline-block; max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;}
div[data-module=board] ul[data-role=table] > li > span.title > a:hover {color:#de1d28;}
div[data-module=board] ul[data-role=table] > li > span.title > a > span.category {color:#666;}
div[data-module=board] ul[data-role=table] > li > span.title > a > i.xi {margin-right:3px;}
div[data-module=board] ul[data-role=table] > li > span.title > a > i.xi-lock {color:#F44336;}
div[data-module=board] ul[data-role=table] > li > span.title > a > span.ment {display:inline-block; float:right; margin:2px 0px 0px 5px; color:#FF9800; font-size:12px; vertical-align:middle;}
div[data-module=board] ul[data-role=table] > li > span.title > a > span.ment:before {content:"[";}
div[data-module=board] ul[data-role=table] > li > span.title > a > span.ment:after {content:"]";}
div[data-module=board] ul[data-role=table] > li > span.title > a > i.fa-floppy-o {float:right; margin-left:5px; color:#F44336;}
div[data-module=board] ul[data-role=table] > li > span.title > a > i.fa-picture-o {float:right; margin-left:5px; color:#2196F3;}
div[data-module=board] ul[data-role=table] > li > span.name {width:140px; text-align:center;}

div[data-module=board] ul[data-role=table] > li.tbody > span.name {text-align:center;}
div[data-module=board] ul[data-role=table] > li.tbody > span.name > i[data-role=photo] {width:24px; height:24px; margin-right:5px;}
div[data-module=board] ul[data-role=table] > li.tbody > span.name > span[data-role=name] {width:calc(100% - 30px); height:24px; line-height:24px;}
div[data-module=board] ul[data-role=table] > li > span.reg_date {width:110px; text-align:center; padding:0px;}
div[data-module=board] ul[data-role=table] > li > span.reg_date > i.xi {display:none;}
div[data-module=board] ul[data-role=table] > li > span.hit {width:60px;}
div[data-module=board] ul[data-role=table] > li > span.hit > i.xi {display:none;}
div[data-module=board] ul[data-role=table] > li.tbody > span.hit {text-align:center;}


div[data-module=board] div[data-role=searchbar] {margin-top:10px; font-size:0;}
div[data-module=board] div[data-role=searchbar] > div[data-role=search] {display:inline-block; width:300px; vertical-align:middle; font-size:0;}
div[data-module=board] div[data-role=searchbar] > div[data-role=search] > div[data-role=input] {width:calc(100% - 45px); vertical-align:middle; display:inline-block; font-size:1rem; margin-right:5px;}
div[data-module=board] div[data-role=searchbar] > div[data-role=search] > button {width:40px; height:40px; background:#b5b7c0; border:0px; cursor:pointer; vertical-align:middle;}
div[data-module=board] div[data-role=searchbar] > div[data-role=search] > button > i {font-size:14px; color:#fff;}
div[data-module=board] div[data-role=searchbar] > div[data-role=search] > button:hover {background:#828595;}
div[data-module=board] div[data-role=searchbar] > a {display:inline-block; height:40px; line-height:40px; padding:0px; box-sizing:border-box; vertical-align:middle; margin-left:5px; text-decoration:none; cursor:pointer; background:#2196f3; color:#fff; font-size:0; float:right;}
div[data-module=board] div[data-role=searchbar] > a > i {width:40px; height:40px; line-height:40px; vertical-align:middle; text-align:center; font-size:14px;}
div[data-module=board] div[data-role=searchbar] > a > span {height:40px; line-height:40px; display:inline-block; vertical-align:middle; padding-right:15px; font-size:14px;}
div[data-module=board] div[data-role=searchbar] > a:hover {background:#1e88e5;}

div[data-module=board] div.pagination {margin-top:20px; text-align:center;}


div[data-module=board] article[data-role=post] {border-bottom:2px solid #222;}
div[data-module=board] article[data-role=post] > div.header {display:block; margin:0; padding:15px; background:#f4f4f4; border-top:2px solid #222; line-height:1.6; border-bottom:1px solid #e3e4e5; margin-bottom:20px; font-size:0;}
div[data-module=board] article[data-role=post] > div.header > h5 {font-size:16px; line-height:1.6; padding:5px 0px 15px 0px; margin:0; border-bottom:1px solid #e3e4e5;}
div[data-module=board] article[data-role=post] > div.header > i[data-role=photo] {width:48px; height:48px; margin-top:15px; margin-right:10px;}
div[data-module=board] article[data-role=post] > div.header > ul {list-style:none; width:calc(100% - 58px); display:inline-block; margin-top:15px; font-size:0; vertical-align:middle;}
div[data-module=board] article[data-role=post] > div.header > ul > li {font-size:14px; color:#666;}
div[data-module=board] article[data-role=post] > div.header > ul > li > b {display:inline-block; width:65px;}
div[data-module=board] article[data-role=post] > div.header > ul > li > i.xi {display:none; height:24px; line-height:24px; margin-right:8px; vertical-align:middle;}
div[data-module=board] article[data-role=post] > div.header > ul > li.name {display:block; height:24px; line-height:24px; font-size:14px;}
div[data-module=board] article[data-role=post] > div.header > ul > li.date {display:inline-block; width:70%; height:24px; line-height:24px; vertical-align:middle;}
div[data-module=board] article[data-role=post] > div.header > ul > li.hit {display:inline-block; width:30%; height:24px; line-height:24px; vertical-align:middle; text-align:right;}
div[data-module=board] article[data-role=post] > div.header > ul > li.hit > b {margin-right:10px;}

div[data-module=board] article[data-role=post] > div.content {padding-bottom:20px; font-size:14px;}

div[data-module=board] article[data-role=post] > div[data-role=button] {text-align:right; padding-right:0; position:relative; margin-bottom:20px;}
div[data-module=board] article[data-role=post] > div[data-role=button] > div.author {display:inline-block; width:160px; height:30px; padding:4px; background:#E3F2FD; vertical-align:middle; border:1px solid #BBDEFB; text-align:left;}
div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > i[data-role=photo] {width:30px; height:30px; border:1px solid #ccc; background-size:cover; background-position:50% 50%; background-repeat:no-repeat; float:left; margin-right:8px;}
div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > span[data-role=name] {display:block; width:calc(100% - 40px); height:18px; font-size:12px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > small {display:block; width:calc(100% - 40px); height:14px; font-size:12px; line-height:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#666;}

div[data-module=board] article[data-role=post] > div[data-role=button] > button[data-action=action] {background:#b5b7c0; color:#fff; border:0; font-size:16px; width:40px; height:40px; margin-left:5px; margin-right:0; display:none;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] {list-style:none; display:inline-block; vertical-align:middle; white-space:nowrap;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li {display:inline-block; margin-left:5px;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button {display:inline-block; height:40px; line-height:38px; padding:0px 15px; box-sizing:border-box; border:1px solid rgba(0,0,0,0.1); color:#666; background:#fff; vertical-align:middle; text-decoration:none; cursor:pointer; font-size:14px;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button:hover {background:#f4f4f4; color:#333;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=delete] {background:#f44336; color:#fff;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=delete]:hover {background:#e53935; color:#fff;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=adopt] {background:#2196f3; color:#fff;}
div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=adopt]:hover {background:#1e88e5; color:#fff;}

div[data-module=board] article[data-role=post] > div[data-module=attachment] {padding:20px 0px;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > h5 {font-size:14px; height:30px; line-height:30px; border-bottom:1px solid #e3e4e5; margin-bottom:5px;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > h5 > i {font-size:12px; width:20px; height:30px; float:left; line-height:30px;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul {list-style:none;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li {height:20px; padding:5px 0px;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li > i.icon {width:20px; height:20px; margin-right:5px; float:left; vertical-align:middle; background-size:contain; background-position:0 50%; vertical-align:middle;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li > a {display:inline-block; max-width:calc(100% - 25px); height:20px; line-height:20px; color:#333; text-decoration:none; font-size:14px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;}
div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li > a > span.size {color:#999; font-size:12px; float:right; display:inline-block; vertical-align:middle; margin-left:5px; line-height:22px; height:20px;}


div[data-module=board] div[data-role=ment] {background:#f4f4f4; margin-top:20px;}

div[data-module=board] div[data-role=ment] > div[data-role=list] {background:url(../images/ment_line_bg.png);}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] {background:#f4f4f4; padding:16px; border-top:1px solid #e5e5e5; position:relative;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item]:first-child {border-top:0px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > i.xi-reply-all {font-size:12px; color:#F44336; position:absolute; top:22px; left:-10px; width:20px; text-align:center;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-depth="0"] > i.xi-reply-all {display:none;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar {height:30px; font-size:0; text-align:right; position:relative;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > i[data-role=photo] {width:28px; height:28px; border:1px solid #ccc; margin-right:8px; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; display:inline-block; vertical-align:middle; float:left;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > span[data-role=name] {font-size:14px; height:28px; line-height:28px; display:inline-block; vertical-align:middle; float:left;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action] {width:30px; height:30px; background:#b5b7c0; color:#fff; border:0; font-size:16px; cursor:pointer; display:none;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action] > i {width:30px; height:30px; line-height:30px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action]:hover {background:#828595;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] {list-style:none; position:relative; float:right; font-size:0;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li {display:inline-block;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button {background:#fff; padding:0px 8px 0px 0px; height:24px; line-height:24px; cursor:pointer; vertical-align:middle; border:0; font-size:12px; margin-left:2px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button > i {width:24px; height:24px; text-align:center; float:left;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=reply] {background:#b5b7c0; color:#fff;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=reply]:hover {background:#828595;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=reply] > div.topbar > ul > li > button[data-action=reply] {background:#828595;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=reply] > div.topbar > ul > li > button[data-action=reply] > i:before {content:"\e616";}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=modify] {background:#2196f3; color:#fff;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=modify]:hover {background:#1e88e5;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.topbar > ul > li > button[data-action=modify] {background:#1e88e5;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.topbar > ul > li > button[data-action=modify] > i:before {content:"\e616";}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.content > div[data-role=wysiwyg-content] {display:none;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.content > div[data-module=attachment] {display:none;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=reply] form {margin-top:10px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=delete] {background:#F44336; color:#fff;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=delete]:hover {background:#E53935;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content {padding:10px 0px 10px 38px; position:relative; font-size:14px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > i.mi-lock {position:absolute; top:10px; left:20px; color:#F44336; height:22px; line-height:22px;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-secret=TRUE] {font-size:14px; text-align:center; width:100%; padding:10px 0px; line-height:1.6; background:#FFEBEE; color:#F44336;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-secret=TRUE][data-password=TRUE] {cursor:pointer;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-secret=TRUE][data-password=TRUE]:hover {background:#FFCDD2;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-delete=TRUE] {font-size:14px; text-align:center; width:calc(100% + 30px); padding:10px 0px; line-height:1.6; background:#FFECB3; color:#FF8F00; margin:-15px -15px;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] {padding:20px 0px 10px 0px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > h5 {font-size:14px; height:30px; line-height:30px; border-bottom:1px solid #e3e4e5; margin-bottom:5px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > h5 > i {font-size:12px; width:20px; height:30px; float:left; line-height:30px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul {list-style:none;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li {height:20px; padding:5px 0px;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li > i.icon {width:20px; height:20px; margin-right:5px; float:left; vertical-align:middle; background-size:contain; background-position:0 50%; vertical-align:middle;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li > a {display:inline-block; max-width:calc(100% - 25px); height:20px; line-height:20px; color:#333; text-decoration:none; font-size:14px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li > a > span.size {color:#999; font-size:12px; float:right; display:inline-block; vertical-align:middle; margin-left:5px; line-height:22px; height:20px;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.footbar {padding-left:38px; font-size:0;}
div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.footbar > time {display:inline-block; height:20px; line-height:20px; font-size:12px; color:#666; display:inline-block; vertical-align:middle;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.footbar {display:none;}

div[data-module=board] div[data-role=ment] > div[data-role=list] > div.empty {height:100px; line-height:100px; text-align:center; background:#f4f4f4;}

div[data-module=board] div[data-role=ment] form {background:#fff; padding-bottom:20px;}
div[data-module=board] div[data-role=ment] div[data-role=item] form {padding:10px; border:1px solid #e5e5e5;}
div[data-module=board] div[data-role=ment] div[data-role=pagination] {padding:10px 0px; display:block; text-align:center;}
div[data-module=board] div[data-role=ment] div[data-role=pagination]:empty {display:none;}

div[data-module=board] ul[data-role=form] div[data-role=input][data-name=prefix] {width:180px;}

div[data-module=board] div[data-role=button] {margin-top:10px;}

div[data-module=board] ul.buttons {list-style:none; padding-bottom:20px; display:table; width:100%; table-layout:fixed;}
div[data-module=board] ul.buttons > li {display:table-cell; width:100%; vertical-align:middle;}
div[data-module=board] ul.buttons > li:first-child {width:100px;}
div[data-module=board] ul.buttons > li:first-child > div[data-role=button] {text-align:left; padding-left:0px;}
div[data-module=board] ul.buttons > li:first-child > div[data-role=button] > button, div[data-module=board] ul.buttons > li:first-child > div[data-role=button] > a {margin-left:0px; margin-right:5px;}
div[data-module=board] ul.buttons > li:last-child {width:100%;}
div[data-module=board] ul.buttons > li:last-child > div[data-role=button] {text-align:right; padding-right:0px;}
div[data-module=board] ul.buttons > li:last-child > div[data-role=button] > button, div[data-module=board] ul.buttons > li:last-child > div[data-role=button] > a {margin-left:5px; margin-right:0px;}

/**
 * 폼 테이블
 */
ul[data-role=form] {list-style:none; border-top:2px solid transparent; min-width:100%;}
ul[data-role=form].red {border-top-color:#f44336;}
ul[data-role=form].black {border-top-color:#222;}

ul[data-role=form] > li {display:table; width:100%; min-height:60px; table-layout:fixed; box-sizing:border-box;}
ul[data-role=form].inner > li {border-bottom:1px solid #e3e4e5;}
ul[data-role=form].outer > li {border-left:1px solid #e3e4e5; border-right:1px solid #e3e4e5;}

ul[data-role=form] > li > label {display:table-cell; width:150px; vertical-align:top; line-height:20px; background:#f4f4f4; padding:20px 0px 20px 20px; font-weight:500; font-size:14px;}
ul[data-role=form] > li > label.required:after {color:#F44336; content:" *";}
ul[data-role=form] > li > label.small {width:100px;}
ul[data-role=form] > li > div {display:table-cell; width:100%; padding:10px 10px 10px 0px; line-height:1; vertical-align:top;}
ul[data-role=form] > li > div:last-child {padding-right:0px;}
ul[data-role=form] > li > label + div {padding-left:10px;}
ul[data-role=form] > li > div > div[data-role=text] {display:table; padding:5px 0px; min-height:30px; line-height:30px; font-size:14px;}
ul[data-role=form] > li > div > div[data-role=text] > div {display:table-cell; vertical-align:middle; line-height:1.6;}
ul[data-role=form] > li > div > div[data-role=button] {margin-top:0; text-align:left; padding:0px;}
ul[data-role=form] > li > div > div[data-role=button] > button {height:40px; line-height:40px; padding:0px 15px; margin:0px;}
ul[data-role=form] > li > div div[data-role=help] {margin-bottom:0;}
ul[data-role=form] > li > div div[data-role=button] {text-align:left;}

div[data-role=input][data-type=checkbox] > label {cursor:pointer; display:inline-block; min-height:20px; line-height:20px; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; -o-user-select:none; padding:10px 0px 10px 32px; vertical-align:middle;}
div[data-role=input][data-type=checkbox] > label > input[type=checkbox] {display:none;}
div[data-role=input][data-type=checkbox] > label > button.checkbox {display:inline-block; width:24px; height:24px; margin:-2px 8px -2px -32px; box-sizing:border-box; border:1px solid #d1d1d1; float:left; background:#fff; cursor:pointer; vertical-align:middle;}
div[data-role=input][data-type=checkbox] > label > button.checkbox.on {background:#43b3ec; border-color:#5891dd; font-family:'xeicon'; line-height:22px; color:#fff; text-align:center; padding-right:1px;}
div[data-role=input][data-type=checkbox] > label > button.checkbox.on:before {content:"\e928";}
div[data-role=input][data-type=checkbox] > label > button.checkbox:focus {border-color:#66afe9;}
div[data-role=input][data-type=checkbox].disabled > label {opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=checkbox].disabled > label > button {border-color:#ccc !important; background:#e5e5e5; opacity:0.8; cursor:not-allowed;}
div[data-role=input][data-type=checkbox].error > label {color:#f44336;}
div[data-role=input][data-type=checkbox].error > label > button {border-color:#f44336;}
div[data-role=input][data-type=checkbox].success > label {color:#4caf50;}
div[data-role=input][data-type=checkbox].success > label > button {border-color:#4caf50;}

div[data-module=attachment][data-templet=default] {margin-top:10px;}
div[data-module=attachment][data-templet=default] div.button {}
div[data-module=attachment][data-templet=default] div.button > button {width:auto; background:#b5b7c0; border:0px; color:#fff; font-size:13px; line-height:40px; font-size:0; font-size:13px; cursor:pointer; padding:0px; text-align:left;}
div[data-module=attachment][data-templet=default] div.button > button > i {display:inline-block; width:40px; height:40px; line-height:40px; vertical-align:top; text-align:center; font-size:16px; margin-top:0px;}
div[data-module=attachment][data-templet=default] div.button > button > span {display:inline-block; padding-right:15px; height:38px; line-height:38px;}
div[data-module=attachment][data-templet=default] div.button > button[data-loading=TRUE] {background:#b5b7c0 !important; cursor:not-allowed;}
div[data-module=attachment][data-templet=default] div.button > button:hover {background:#828595; color:#fff;}
div[data-module=attachment][data-templet=default] div.button > span {float:right; display:block; height:40px; line-height:40px; color:#666; font-size:12px;}

div[data-role=help] {font-size:12px; line-height:1.6; color:#666; margin:5px 0px 10px 0px;}
div[data-role=help].error {color:#f44336;}
div[data-role=help].success {color:#4caf50;}

div[data-role=input][data-type=textarea] {height:auto;}
div[data-role=input][data-type=textarea] > textarea {border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; width:100%; height:40px; padding:10px; line-height:18px; border-radius:0px; min-height:200px; resize:none; display:block;}
div[data-role=input][data-type=textarea] > textarea:focus, div[data-role=input][data-type=textarea] > textarea.focus {border-color:#66afe9;}
div[data-role=input][data-type=textarea] > textarea[disabled] {background:#e5e5e5; opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=textarea].error > textarea {border-color:#f44336;}
div[data-role=input][data-type=textarea].success > textarea {border-color:#4caf50;}

/**
 * 페이지 네비게이션
 */
div[data-role=pagination] {display:inline-block; max-width:100%; height:34px; overflow:hidden;}
div[data-role=pagination] > div {height:50px; padding-top:1px;}
div[data-role=pagination] > div > ul {display:inline-block; padding:0px; margin:0px; border:1px solid #d5d5d5; list-style:none; font-size:0px; background:#fcfcfc;}
div[data-role=pagination] > div > ul > li {display:inline-block; padding:0px; height:30px; border-right:1px solid #d5d5d5; vertical-align:middle;}
div[data-role=pagination] > div > ul > li > a {display:block; width:100%; height:32px; border:1px solid transparent; margin:-2px 0px -2px -1px; text-decoration:none; text-align:center; color:#666;}
div[data-role=pagination] > div > ul > li > a > span {min-width:21px; padding:0px 6px 0px 5px; display:inline-block; font-size:14px; height:32px; line-height:32px; letter-spacing:-1px;}
div[data-role=pagination] > div > ul > li:last-child {border-right:0px;}
div[data-role=pagination] > div > ul > li > a:hover, div[data-role=pagination] > div > ul > li.active > a {border-color:#828595; background:#b5b7c0; color:#fff;}
div[data-role=pagination] > div > ul > li.active > a:hover {background:#828595;}
div[data-role=pagination] > div > ul > li.active > span {font-weight:500;}
div[data-role=pagination] > div > ul > li.disabled > a {color:#ccc; cursor:not-allowed;}
div[data-role=pagination] > div > ul > li.disabled > a:hover {border-color:transparent; background:transparent;}


/**
 * 버튼정의
 */
div[data-role=button] {font-size:0; text-align:center; padding-left:5px;}
div[data-role=button] > button, div[data-role=button] > a {display:inline-block; height:40px; line-height:38px; padding:0px 15px; box-sizing:border-box; border:1px solid rgba(0,0,0,0.1); color:#222; background:#fff; vertical-align:middle; margin-right:5px; text-decoration:none; cursor:pointer; font-size:1rem;}
div[data-role=button] > button:not([disabled]):hover, div[data-role=button] > a:hover {background:#f4f4f4;}
div[data-role=button] > button[disabled] {background:#f4f4f4; color:#222; opacity:0.5; cursor:not-allowed;}
div[data-role=button] > button[type=submit], div[data-role=button] > .submit {background:#2196f3; color:#fff;}
div[data-role=button] > button[type=submit]:hover, div[data-role=button] > .submit:not([disabled]):hover {background:#1e88e5; color:#fff;}
div[data-role=button] > button:focus, div[data-role=button] > a:focus {border-color:rgba(0,0,0,0.5);}
div[data-role=button] > button > i, div[data-role=button] > a > i {float:left; width:30px; height:30px; text-align:center; margin:4px 0px 4px -10px; padding:0; line-height:30px; vertical-align:middle;}
div[data-role=button] > button > i.mi-loading.icon {float:none; width:auto; height:auto; margin:0;}
div[data-role=button] > .danger {background:#f44336; color:#fff;}
div[data-role=button] > .danger:not([disabled]):hover {background:#e53935; color:#fff;}

div[data-role=input] + div[data-role=button], div[data-role=inputset] + div[data-role=button] {margin-top:5px;}
ul[data-role=table] + div[data-role=button] {margin-top:20px;}


/* 모바일메뉴 */

aside.sidebar {position:fixed; top:0; right:0; width:300px; height:100%; background:#fff; z-index:20000; display:none; box-shadow:0 0 10px 5px rgba(0,0,0,.2); overflow-y:auto;}
aside.sidebar > div.top {height:60px; line-height:60px; padding-left:20px; font-size:14px; font-weight:bold; background:#133059; color:#fff; color:#fff;}
aside.sidebar > div.top > button.close {float:right; width:60px; height:60px; cursor:pointer; background:transparent; border:0; font-size:0;}
aside.sidebar > div.top > button.close > i {width:60px; height:60px; line-height:60px; text-align:center; font-size:30px; color:#fff;}
aside.sidebar > div.loginForm {box-sizing:border-box; position:relative; font-size:12px;}
aside.sidebar > div.loginForm div.login {padding:15px; border-top:1px solid #e0e0e0; background:#f7f7f7;}
aside.sidebar > div.loginForm div.login > h4 {font-size:13px; color:#666; font-weight:normal; line-height:20px;}
aside.sidebar > div.loginForm div.login > div.form:after {content:''; display:block; clear:both;}
aside.sidebar > div.loginForm div.login > div.form > div[data-role=select] {margin-top:10px;margin-bottom:5px;}
aside.sidebar > div.loginForm div.login > div.form > div.input {float:left; width:calc(100% - 65px);}
aside.sidebar > div.loginForm div.login > div.form > div.input > div[data-role=input] > label {font-size:0;}
aside.sidebar > div.loginForm div.login > div.form > div.input > div[data-role=input] > label > input {box-sizing:border-box; border:1px solid #c2c2c2; border-right:0px; width:100%; height:32px; padding:5px; line-height:20px; border-radius:0; font-size:12px;}
aside.sidebar > div.loginForm div.login > div.form > div.input > div[data-role=input] > label > input[type=password] {height:31px; border-top:0px;}
aside.sidebar > div.loginForm div.login > div.form > button {float:left; border:1px solid #c2c2c2; width:65px; height:63px; cursor:pointer; background:#fff; color:#333;}
aside.sidebar > div.loginForm div.logged {padding:15px; border-top:1px solid #e0e0e0; background:#f7f7f7;}
aside.sidebar > div.loginForm div.logged > div.profile:after {content:''; display:block; clear:both;}
aside.sidebar > div.loginForm div.logged > div.profile > i.photo {display:block; float:left; width:58px; height:58px; border-radius:50%; background-position:center; background-size:cover; background-image:url(/images/profile.png); margin-right:15px;}
aside.sidebar > div.loginForm div.logged > div.profile > div.msg {overflow:hidden;}
aside.sidebar > div.loginForm div.logged > div.profile > div.msg > p {display:block; font-size:21px; line-height:26px; height:52px; word-break:keep-all; color:#666;}
aside.sidebar > div.loginForm div.logged > div.profile > div.msg > div {margin-top:15px;}
aside.sidebar > div.loginForm div.logged > div.profile > div.msg > div > span {display:inline-block; font-size:14px; line-height:16px; color:rgba(0,0,0,.6); vertical-align:top;}
aside.sidebar > div.loginForm div.logged > div.profile > div.msg > div > span + span {margin-left:10px; padding-left:10px; border-left:1px solid rgba(0,0,0,.6);}
aside.sidebar > div.loginForm div.logged > div.button {margin-top:20px; background:#fff;}
aside.sidebar > div.loginForm div.logged > div.button:after {content:''; display:block; clear:both;}
aside.sidebar > div.loginForm div.logged > div.button > a {display:block; box-sizing:border-box; width:50%; float:left; text-align:center;}
aside.sidebar > div.loginForm div.logged > div.button > a.noti {height:98px; border-bottom:1px solid #dfdfdf; padding-top:60px; background:#fff url(/images/ico_profile_noti.png) no-repeat center 25px;}
aside.sidebar > div.loginForm div.logged > div.button > a.msg {height:98px; border-bottom:1px solid #dfdfdf; border-left:1px solid #dfdfdf; padding-top:60px; background:#fff url(/images/ico_profile_msg.png) no-repeat center 28px;}
aside.sidebar > div.loginForm div.logged > div.button > a.classroom {height:94px; padding-top:55px; background:#fff url(/images/ico_profile_classroom.png) no-repeat center 24px;}
aside.sidebar > div.loginForm div.logged > div.button > a.noti:hover {background-image:url(/images/ico_profile_noti_on.png);}
aside.sidebar > div.loginForm div.logged > div.button > a.msg:hover {background-image:url(/images/ico_profile_msg_on.png);}
aside.sidebar > div.loginForm div.logged > div.button > a.classroom:hover {background-image:url(/images/ico_profile_classroom_on.png);}
aside.sidebar > div.loginForm div.logged > div.button > a:hover {color:#505057; text-decoration:underline;}
aside.sidebar > div.loginForm div.logged > div.button > button {display:block; box-sizing:border-box; width:50%; height:94px; padding-top:55px; border:0 none; border-left:1px solid #dfdfdf; float:left; background:#fff url(/images/ico_profile_logout.png) no-repeat center 22px; font-size:inherit;}
aside.sidebar > div.loginForm div.logged > div.button > button > span {display:block; height:100%;}
aside.sidebar > div.loginForm div.logged > div.button > button:hover {color:#505057; text-decoration:underline; background-image:url(/images/ico_profile_logout_on.png);}

aside.sidebar > ul.menu > li > a {display:block; width:100%; height:50px; line-height:50px; font-size:14px; padding:0px 20px; text-decoration:none; border:0; background:#fff; color:#333; box-sizing:border-box; border-bottom:1px solid #e0e0e0; text-align:left; cursor:pointer;}
aside.sidebar > ul.menu > li > a > i.icon {float:left; width:30px; height:50px; line-height:50px; font-size:20px; color:#666;}
aside.sidebar > ul.menu > li > a > i[data-role=toggle] {float:right; width:50px; height:50px; line-height:50px; text-align:center; font-size:20px; color:#666; margin-right:0px; cursor:pointer; margin-right:-20px; transform:rotate(0deg);}
aside.sidebar > ul.menu > li > div.submenu {display:none; background:#f7f7f7; padding:10px 0px; border-bottom:1px solid #e0e0e0;}
aside.sidebar > ul.menu > li > div.submenu > a {display:block; width:100%; height:36px; line-height:36px; padding:0px 20px; box-sizing:border-box; text-decoration:none; color:#000; font-size:13px;}
aside.sidebar > ul.menu > li > div.submenu > a.selected {color:#133059; font-weight:bold;}
aside.sidebar > ul.menu > li.opened > a > i[data-role=toggle] {transform:rotate(180deg);}
aside.sidebar > ul.menu > li.selected > div.submenu {display:block;}
aside.sidebar > ul.menu > li.selected > a {color:#133059; font-weight:bold;}
aside.sidebar > ul.menu > li.selected > a > i {color:#133059;}



@media screen and (max-width:1200px) {
	.container {width:960px;}
}

@media screen and (max-width:992px) {
	.container {width:740px;}
	header > div.header nav > ul.gnb > li {padding:0;}

	footer div.f_cnts {float:none; width:auto;}
	footer div.etcs {float:none; width:auto; margin-top:15px;}
	footer div.etcs > div[data-role=select] {float:none; width:auto;}
	footer div.etcs > div.app {text-align:left;}
	footer div.etcs > div.app > span {display:block; margin-bottom:8px;}
	footer div.etcs > div.app > a {margin:0;}
	footer div.etcs > div.app > a + a {margin-left:8px;}
}

@media screen and (max-width:768px) {
	.container {width:auto;}
	header {position:fixed; left:0; top:0; background:#fff; box-shadow:0 0 10px 5px rgba(0,0,0,.1);}
	header > div.header nav > ul.gnb {display:none;}
	header > div.header button.m_menu {display:block;}


	div[data-module=board] div[data-role=toolbar] {text-align:left;}
	div[data-module=board] div[data-role=toolbar] > div[data-role=input] {width:100%; display:block; margin-bottom:10px; float:none;}
	div[data-module=board] div[data-role=toolbar] > div[data-role=search] {width:calc(100% - 45px); max-width:100%;}
	div[data-module=board] div[data-role=toolbar] > a > span {display:none;}

	div[data-module=board] ul[data-role=table] > li.thead > span {display:none;}

	div[data-module=board] ul[data-role=table] > li.tbody > span.loopnum {display:none;}

	div[data-module=board] ul[data-role=table] > li.tbody {font-size:0; display:block; padding:10px 0px;}
	div[data-module=board] ul[data-role=table] > li.tbody > span {display:inline-block; font-size:14px; box-sizing:border-box; vertical-align:middle; padding:0;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.title {width:100%; padding:0px 5px 6px 5px; height:auto;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.title > a {display:block; height:24px; line-height:24px;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.title > a > span.ment {background:#FFA726; min-width:24px; height:24px; line-height:24px; color:#fff; padding:0px 8px; border-radius:12px; margin:0px 0px 0px 5px; position:relative; box-sizing:border-box;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.title > a > span.ment:before {content:"";}
	div[data-module=board] ul[data-role=table] > li.tbody > span.title > a > span.ment:after {content:"";}
	div[data-module=board] ul[data-role=table] > li.tbody > span.name {width:calc(100% - 200px); padding:0px 0px 0px 5px; height:24px; text-align:left;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.reg_date {width:120px; height:24px; line-height:24px; color:#666;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.reg_date > i.xi {margin:0px 5px 0px 10px; display:inline-block; line-height:24px; vertical-align:top;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.hit {width:80px; height:24px; line-height:24px; color:#666; text-align:right;}
	div[data-module=board] ul[data-role=table] > li.tbody > span.hit > i.xi {display:inline-block; margin:0px 5px 0px 10px; line-height:24px; vertical-align:top;}


	div[data-module=board] ul[data-role=table] > li.notice > span.loopnum {display:inline-block; height:30px; line-height:30px; vertical-align:middle;}
	div[data-module=board] ul[data-role=table] > li.notice > span.title {width:calc(100% - 65px); padding:0px 5px;}
	div[data-module=board] ul[data-role=table] > li.notice > span.title > a {height:30px; line-height:30px;}
	div[data-module=board] ul[data-role=table] > li.notice > span.title > a > span.ment {margin:3px 0px 3px 5px;}
	div[data-module=board] ul[data-role=table] > li.notice > span.name {display:none;}
	div[data-module=board] ul[data-role=table] > li.notice > span.reg_date {display:none;}
	div[data-module=board] ul[data-role=table] > li.notice > span.hit {display:none;}

	div[data-module=board] article[data-role=post] > div.header > ul > li.date {width:100%; height:auto;}
	div[data-module=board] article[data-role=post] > div.header > ul > li.hit {width:100%; height:auto; text-align:left;}
	div[data-module=board] article[data-role=post] > div.header > ul > li.hit > b {margin-right:0;}

	div[data-module=board] div[data-role=searchbar] > div[data-role=search] {width:calc(100% - 45px); max-width:100%;}
	div[data-module=board] div[data-role=searchbar] > a > span {display:none;}

	div[data-module=attachment][data-templet=default] {margin-top:5px;}
	div[data-module=attachment][data-templet=default] div.button > span {display:none;}
	div[data-module=attachment][data-templet=default] div.button > button {width:100%;}

	ul[data-role=form] > li {display:block;}
	ul[data-role=form] > li > label {display:block; width:100% !important; height:auto; padding:10px 0px 0px 0px; background:transparent; line-height:1.6;}
	ul[data-role=form] > li > label:after {content:" :";}
	ul[data-role=form] > li > div {display:block; padding:5px 0px; min-height:auto; line-height:1;}
	ul[data-role=form] > li > label + div {padding-left:0px;}
	ul[data-role=form] > li > div + label {display:block; border-left:0px; border-top:1px solid #e3e4e5;}
}

@media screen and (max-width:600px) {
	header > div.top > div.container > a {display:none;}

}

@media screen and (max-width:360px) {
	header > div.top > div.container > div.util > div.lang {padding-left:10px; margin-left:10px;}
}