@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Roboto:100,300,400,500,700,900&subset=korean');
@font-face {
	font-family: 'themify';
	src:url('../fonts/themify.eot?-fvbane');
	src:url('../fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'),
		url('../fonts/themify.woff?-fvbane') format('woff'),
		url('../fonts/themify.ttf?-fvbane') format('truetype'),
		url('../fonts/themify.svg?-fvbane#themify') format('svg');
	font-weight: normal;
	font-style: normal;
}



/* CSS Document */
/* CSS 리셋  */
html,body{min-height:100%;font-size:14px;box-sizing: border-box;word-break: keep-all;word-wrap: break-word;white-space: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
html{overflow-y:scroll;}
body {margin: 0; color:#333; }
body,th,td,input,select,textarea,button{font-size:1rem;line-height:1.5;color:#333;letter-spacing:0;font-family: 'Roboto', 'Noto Sans KR','Malgun Gothic','맑은 고딕', sans-serif;}
a{ background-color: transparent;color:#333;text-decoration:none}
a:active,a:hover{text-decoration:underline} 
a:hover{color:#1e88e5; text-decoration:none }
a:active{background-color:transparent}
hr{box-sizing: content-box; height: 0; overflow: visible;}
pre { font-family: monospace, monospace;  font-size: 1em;}
abbr[title] { border-bottom: none;  text-decoration: underline;  text-decoration: underline dotted; }
b,strong { font-weight: 500;}
code,kbd,samp { font-family: monospace, monospace; font-size: 1em;}
small { font-size: 80%;}
sub,sup { font-size: 75%; line-height: 0;  position: relative;  vertical-align: baseline;}
sub { bottom: -0.25em;}
sup { top: -0.5em;}
img { border-style: none; }
button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button,input {  overflow: visible;}
button,select {text-transform: none; background:#fff}
button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button; cursor:pointer}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset { padding: 0.35em 0.75em 0.625em;}
legend { }
progress { vertical-align: baseline;}
textarea {overflow: auto;}
input::-ms-clear{display:none}
[type="checkbox"],[type="radio"] {  box-sizing: border-box;  padding: 0; }
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {  height: auto;}
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
::-webkit-file-upload-button {  -webkit-appearance: button; font: inherit;}
input[type="text"]{ -webkit-appearance: none; -webkit-border-radius:0;border-radius:0;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}
header,main,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block}
q,blockquote{quotes:none;content:none}
ul,ol,li,menu{list-style:none}
table{width:100%;border-collapse:collapse;border-spacing:0}
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}
address{font-style:normal}
mark{border-bottom:3px solid #67C8EA;background: #A4E1F6;}
input[type="text"], input[type="password"], input[type="date"], input[type="file"] ,select{ -webkit-border-radius:0;border-radius:0; height: 32px; box-sizing: border-box;  background: #fff}
input[type="file"]::-webkit-file-upload-button{height:32px; padding:0  }
input:disabled, input[readonly],input[disabled]{ background: rgba(112,112,112,0.06); border: 1px solid rgba(112,112,112,0.3); color: rgba(112,112,112,0.5) }
button, input, select{ outline:none;border: 1px solid #cdcdcd; }
table caption, .hide{ position: absolute; left: -999px; width: 0; height: 0; z-index: -1; overflow: hidden; margin: 0; padding: 0; line-height: 0; font-size: 0; top: -999px}
.web body{min-width:980px;}
h5{ font-size: 1.12rem; font-weight: normal; margin: 0; padding: 10px 0}
.scroll{ overflow: hidden; overflow-y: auto; }
::-webkit-scrollbar {width:8px;height:8px}
::-webkit-scrollbar-thumb {background:#888}
::-webkit-scrollbar-track {background:#ddd}
::-webkit-input-placeholder { color:#999}
::-moz-placeholder { color:#999 }
::-ms-input-placeholder { color:#999} 

.al{ text-align:left !important}
.ac{ text-align:center !important}
.ar{ text-align:right !important}
.fl{ float: left !important} 
.fr{ float: right!important} 
 button, input, select{ outline:none; border:1px solid #cdcdcd}
@media (min-device-width: 768px) and (max-width: 1199px) {html, body{ font-size:13px;} }
@media only screen and (max-device-width: 767px){html,body{ font-size:12px;min-width: 320px; } }
.fl{ float: left; clear: none}

/* */
.mg0 {margin: 0 !important}
.mgt8 {margin-top: 8px !important}
.mgt10 {margin-top: 10px !important}
.mgt20 {margin-top: 20px !important}
.mgt25 {margin-top: 25px !important}
.mgt30 {margin-top: 30px !important}
.mgt35 {margin-top: 35px !important}
.mgb10 {margin-bottom: 10px !important}
.mgb20 {margin-bottom: 20px !important}
.mgb100 {margin-bottom: 100px !important}
.pd0 {padding: 0 !important}
.pdt5 {padding-top: 5px !important}
.pdt10 {padding-top: 10px !important}
.pdt15 {padding-top: 15px !important}
.pdt20 {padding-top: 20px !important}
.pdt25 {padding-top: 25px !important}

.pdt30{padding-top:30px !important}
.pdt38{padding-top:38px !important}
.pdt40{padding-top:40px !important}
.pdt50{padding-top:50px !important}
.pdb50 {padding-bottom: 50px !important}
.pdb60 {padding-bottom: 60px !important}
.pdlr20 {padding-left:20px !important; padding-right:20px !important}





/* common */
.wrap{ margin:0 auto;  position: relative; max-height:none; overflow:inherit}
.breakall{ word-break:break-all}
/* 체크 박스, 라디오버튼 */
label{ position:relative; z-index:1; overflow:hidden; display:inline-block; margin-top: 7px }
label{}
label input[type="checkbox"], label input[type="radio"]{ z-index:0; position:absolute; left:-200px;}
label input[type="checkbox"] + span, label input[type="radio"] + span{ padding-left:20px}
label input[type="checkbox"] + span:before, label input[type="radio"] + span:before{ display:block;border:1px solid #666; content:""; width:16px; height:16px; overflow:visible; position:absolute; left:0; top:50%; margin-top:-10px; font-family:"themify";  font-style: normal;  font-weight: normal;  speak: none;   text-decoration: inherit;  font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-size:15px; line-height:12px; box-sizing:border-box; text-align:center }
label input[type="radio"] + span:before{ border-radius:100%}
label input[type="checkbox"]:checked + span:before, label input[type="radio"]:checked + span:before{ color:#fff; background:#0195df; content:"\e64c"; border:1px solid #0195df }
label input[type="checkbox"]:checked + span, label input[type="radio"]:checked + span{ color:#0195df;}
label input[type="checkbox"]:disabled + span:before, label input[type="radio"]:disabled + span:before{ background:#ddd; border-color:#ddd}
label input[type="checkbox"]:disabled + span, label input[type="radio"]:disabled + span{ color:#aaa !important}


label + label{ margin-left: 20px}

/* 본문 바로가기 */
.btn_skip{z-index:1000;position:fixed;width:100%;padding:10px 0;border-bottom:1px solid #000;left:0;top:-100px;text-align:center;background:#1c1c1c}
.btn_skip.on{top:0}
.btn_skip a{color:#fff;font-weight:bold}

/* 기본 버튼 */
.tdbtn{ display:inline-block; vertical-align:middle; padding:7px 12px; box-sizing:border-box; min-width:55px; background:rgba(243,243,243,1);border:1px solid rgba(205,205,205,1); color:rgba(82,82,82,1)}
.tdbtn.small{ font-size: 12px; padding: 2px 10px; height: 28px; min-width: inherit}
.tdbtn.key1, .tdbtn.key2{ background:#fff; border-color: rgba(205,205,205,0.75);  color:rgba(82,82,82,0.87)}
.tdbtn.key2{border-color:#0195df;color:#0195df; }
.tdbtn > span{ white-space:nowrap}
/**/
.btn_box{ margin-top: 15px}
.btn_box *{ vertical-align: top; } 
.btn_box:after{ content: ""; display: block; clear: both; float: none} 
.btn_box button{ height: 35px; padding: 0 10px; min-width: 60px; line-height: 33px}
input + button, select + button{ height:  32px; box-sizing: border-box; margin-left:5px}
button.btn{ border-color: #4C4C4C; color: #4C4C4C}
button.bdkey{ border-color:#DB2B7B; color: #DB2B7B}
button.bgkey{ background: #DB2B7B; color: #fff; border-color:#DB2B7B;}

.btn_box select{border-color: #4C4C4C; color: #4C4C4C;height: 35px;  min-width: 60px;}
.btn_box .alert{ display: inline-block; vertical-align: middle; line-height: 33px; color:#1e88e5} 
i.dn:before {font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s; content:"\e632"; padding-right: 5px}

/*************
아이콘
*************/
span.label, i{ font-size:0; overflow:hidden; }
span.label:before, i:before{text-indent:0; font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;	line-height: 1;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s; font-size:1rem; content: ""}
/*  */
.gosite span.label:before{ content:"\e732"} 
.sch span.label:before{ content:"\e610"} 
.sch .reset span.label:before{ content:"\e619"}
.sch .reset{ opacity: 0.7} 
.bul{ border-radius: 30px; background:#16B765; color: #fff; font-size: 11px;; padding: 4px 6px; font-weight: 400}
.bul.off{ background: rgba(84,84,84,0.35)}
/*************
검색
*************/
.sch_box{ border: 1px solid #ddd; background:rgba(232,232,232,0.25); border-radius: 5px; padding:8px 10px; margin-bottom:35px; text-align: center }
.sch_box *{ vertical-align: middle}
.sch_box .sch span.label{ font-size: 1rem; padding:0 5px}
.sch_box .sch span.label:before{ padding-right:3px; line-height: 30px}
.sch_box legend{ display: inline !important; width: auto; max-width: none; float: left; font-size: 0; line-height: 0; text-indent: -999px; overflow: hidden}
.sch_box:after{ content: ""; display: block; float: none; clear: both}
.sch_box input[type="text"]{}
.sch_box select{ min-width: 85px; vertical-align: middle}
.sch_box select + input[type="text"]{  margin-left: 5px}


.sch_box2{ position: absolute; right:100px; top: -20px}
.sch_box2 input[type="text"]{ width:120px !important; margin-left: 5px}
.sch_box2 label{ margin-top: 0; vertical-align: middle; line-height: 32px}

@media only screen and (max-width: 1280px){
.sch_box2 input[type="text"]{ width:100px !important}
}

/*************
layout - 공통
*************/
body{ background:#f8f8f8}
.container_layout{ min-width:1024px; margin:0 auto; max-width:1600px; box-sizing:border-box; padding:0 20px}
.dropdown_menu{ position:absolute; background:#fff;border: 1px solid rgba(0, 0, 0, 0.25);border-radius: 3px; padding:10px 0;    box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.16); }
.dropdown_menu ul, .dropdown_menu li{ margin:0; padding:0; line-height:2rem }
.dropdown_menu li{ padding:2px 20px; position:relative}
.dropdown_menu li:before{ position:absolute; left:10px; top:50%; content:""; width:3px; height:3px; background:#999; margin-top:-2px}

/**/
.login_wrap{}
.login_wrap header{ display: none}
.login_wrap .login{ width:300px;background: #fff;border: 1px solid rgba(0, 0, 0, 0.15);margin:0;    border-radius: 3px;    padding: 60px 60px 30px 60px;    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);color: rgba(134, 139, 161,1); position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%)}
.login_wrap h2{ font-weight: 100; font-size: 30px; margin: 0; padding: 0 0 20px 0}
.login_wrap input[type="text"],.login_wrap input[type="password"]{ height: 35px; width:calc(100% - 85px); box-sizing: border-box}
.login_wrap .login > div label{ display: inline-block; width:80px; line-height: 35px; vertical-align: middle}
.login_wrap .login > div { margin-bottom: 10px}
.login_wrap .login > div.save label{  width: auto}
.login_wrap .login > div.save .label{ font-size: 13px; }
.login_wrap .login button.save{ background: #000;  height: 40px; box-sizing: border-box; border:none; width: 100%; border-radius: 3px}
.login_wrap .login button.save .label{ font-size: 1rem; color: #fff}
.login_wrap .login > div.etc{ padding-top:  50px}
.login_wrap .login > div.etc button{ font-size: 12px; border: none; background: none; color: #999 } 

/*************
header - 공통
*************/
header{ background:#fff; padding:0;box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16); display: block; margin:0; position: relative; z-index: 4}
header h1{ margin:0; padding:0; width:230px; text-align: center; float:left; display:block; height:100%; line-height:40px; font-size: 1rem}
header h1 img{ vertical-align:middle}
.top_default{ padding:0; height:50px; line-height:50px}
.top_default > div > div{ float:left; border:1px solid #ddd; border-width:0 1px; height:100%;}
.top_default > div > div.noti{ position: relative; padding-right: 100px; border-left: none}
.top_default > div > div.noti h3{ font-size:0.9rem; margin: 0; padding: 0 20px 0 10px; position: relative; float: left}
.top_default > div > div.noti ul{ float: left; margin: 0; padding: 0 0 0 5px; height: 50px; overflow: hidden}
.top_default > div > div.noti ul li{ opacity: 1; max-width: 200px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;} 
.top_default > div > div.noti ul li a{ text-overflow: ellipsis;white-space: nowrap; display: inline-block }
.top_default > div > div.noti ul li a:hover{ text-decoration: underline}
.top_default > div > div.noti h3:after{ content: "";position:absolute;border-left:5px solid #9f9f9f;border-top:4px solid transparent;border-bottom:4px solid transparent;right:6px;top:20px;display:block }
.top_default > div > div.noti button.more{ position: absolute; right:20px; top: 12px; font-size: 12px;  height: 24px; border: 1px solid #999; color: #666}
.top_default > div > div.noti button.more:after{ content: "+"}

.top_default > div > div.mypage{ float:right; margin-right:50px; padding:0 20px}
.top_default:after{ display:block; content:""; clear:both; float:none}
.top_default a, .top_default button{color:#868e96 }
header .container_layout{ position:relative; height:100%; z-index: 6}
.top_default div.mypage{ border:none; }
.top_default div.gosite{ position:absolute; right:20px; top:0px; margin:0; padding:0; height:100%}
.top_default div.allsch { padding:0 20px}
.top_default div.allsch button{ border:none; transition:.3s; line-height:34px; background:none; width:30px; height:32px; overflow:hidden;  vertical-align: middle}
.top_default div.allsch input[type="text"]{ height:34px; box-sizing:border-box; padding:0 35px 0 5px; margin-right:-32px; vertical-align:middle; border:none}
.top_default div.allsch button:hover{}
.top_default div.allsch input[type="text"]:focus + button.sch span:before{ color:#000; font-size:1.12rem}
.top_default div.menu_toggle{ width:50px;margin-right:-1px}
.top_default div.menu_toggle button.menu_toggle{ width:100%; height:100%; border:none; }
.top_default div.menu_toggle button.menu_toggle span.label:before{content:"\e68e"}
.top_default button.gosite{ width:50px; height:100%; box-sizing:border-box; margin:0; padding:0; vertical-align:top; border:none; }
.top_default button.gosite:hover{ color:#333}
.top_default button.gosite:hover span.label:before{ font-size:1.4rem}
.top_default div.mypage button.my{ border: none}
.top_default div.mypage span.name{ font-weight:500}
.top_default div.mypage span.pic{ display:inline-block; width:34px; height:34px; background:rgba(224,224,224,0.5); vertical-align:middle; border-radius:100%; margin-left:10px; position:relative; overflow:hidden}
.top_default div.mypage span.pic:before{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; z-index:1; text-indent:0; font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;	line-height:34px;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s; content:"\e602"; font-size:15px; text-align:center ; margin-left:-1px; color:rgba(204,204,204,1); }
.top_default div.mypage span.pic img{ position:relative; z-index:2}
.top_default .mypage .dropdown_menu{ right:71px; min-width:170px; border-top-width:0; transition: .3s; opacity: 0; top:-50px; z-index: 3; height: 0; overflow: hidden}
.top_default .mypage .dropdown_menu.active{ opacity: 1; top: 50px; height: auto; overflow: inherit}

.top_default .mypage .dropdown_menu li{ transition:.3s; min-height:31px; color:#868e96;  }
.top_default .mypage .dropdown_menu li:before{text-indent:0; font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; content:"\e699"; position:relative; left:auto; top:auto; margin:0; padding-right:10px; background:#fff;}
.top_default .mypage .dropdown_menu li.dm02:before{content:"\e60f"}
.top_default .mypage .dropdown_menu li.dm03:before{content:"\e603"}
.top_default .mypage .dropdown_menu li:hover{ font-size:1.12rem; color:#333}
.top_default .mypage .dropdown_menu li:hover a{ color:#333}
.top_default .mypage .dropdown_menu:before{ background:#fff; width:100%; position:absolute; left:0; top:-2px; content:""; height:5px;}


/*************
header - top_nav
*************/
header .top_nav{ clear:both; float:none; background:#fff; border-top:1px solid #ddd}
.top_nav .main_menu > li{ float:left }


@media (min-device-width: 768px) and (max-width: 1130px) {
.top_default div.allsch input[type="text"]{ width: 100px}
	.top_default div.allsch{ padding: 0 15px}
.top_default > div > div.noti{ padding-right: 80px}
	.top_default > div > div.noti ul li{ width: 180px}
	.top_default > div > div.mypage{ padding: 0 15px}
}




/*************
LEFT
*************/
/* 헤더 */
.wrap_left { overflow: hidden; height: 100%;}
.wrap_left .container_layout{ min-width: inherit; max-width: none }
.wrap_left header h1{ text-align: left; line-height:48px}
.wrap_left header{ position: fixed; left: 0; top: 0; height: 50px; width: 100%;}
.wrap_left > header{ min-width: 980px}
/* 왼쪽메뉴 */
.sidenav{background:#000523; height: 100vh ; color: #fff; width: 250px; padding: 50px 0; overflow-y: auto; position: fixed; left:-300px  ; top: 0;box-sizing: border-box; transition: .3s; opacity: 0 }
.sidenav.active{ left: 0; opacity: 1}
.sidenav label{ color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 300; display: block; background: rgba(255,255,255,0.12); line-height: 25px; padding: 0 20px; margin-top: 0} 
.wrap_left .sidenav .container_layout{ padding: 0}
.sidenav ul, .sidenav li{ padding: 0; margin: 0} 
.sidenav label + ul{ padding: 10px 0}
.sidenav li a{ display: block; color: rgba(255,255,255,0.7); font-size: 1.05rem; padding:5px 20px; font-weight: 300; padding-left: 10px}
.sidenav li ul li { padding-left:10px}
.sidenav li ul li a{ padding-left: 20px; font-size: 1rem;color: rgba(255,255,255,0.5);}
.sidenav li ul li a:before{ content: "-"; padding-right: 5px;} 
.sidenav li i:before{ content: "\e6de"; font-size: 0.8rem}
.sidenav li a.strong{ background:#DB2B7B; font-weight: 500 }
.sidenav li ul li a.strong{ color:#DB2B7B; background: none } 
.navigation{ padding-bottom: 30px;}
.navigation.active{ display: block}
.help_box h5{ font-size: 12px; font-weight: 400; margin: 0; padding: 0 0 10px 0;  color: rgba(255,255,255,1) }
.sidenav .help_box{ border: 1px solid rgba(255,255,255,0.42); margin: 15px; padding: 10px; border-radius: 10px; color: rgba(255,255,255,0.58)} .help_box p{ margin: 0; padding: 0; font-weight: 300}
.help_box p span.mail, .help_box p span.call{ font-size: 0}
.help_box p span.mail:before, .help_box p span.call:before{ display: inline-block;font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s; content:"\e75a"; font-size:13px;color: rgba(255,255,255,0.38); padding-right: 5px }
.help_box p span.call:before{ content:"\e719"; }
.sidenav_bar .tab { margin-bottom: 10px ;font-size: 0}
.sidenav_bar .tab button{ width: 50%; height:40px; border: none; border-bottom: 1px solid rgba(255,255,255,0.35); font-size: 1rem; background:rgba(255,255,255,0.15); color: rgba(255,255,255,0.25) }
.sidenav_bar .tab button.active{ border-bottom: none; background: none; color:rgba(255,255,255,1) }
.sidenav_bar .tab button + button{ border-left: 1px solid rgba(255,255,255,0.35)}
/* 내용 */
.content_page{ float: left; padding: 80px 30px 50px 30px; box-sizing: border-box; position: relative;  transition: .3s; margin-left: 0; width: 100%}  
.sidenav.active + .content_page{  width: calc(100% - 250px);margin-left: 250px;  }


@media only screen and (max-width: 980px){
	.sidenav{ position: absolute; height: 100%}	
}

.pageheader{ background: rgba(0,5,35,0.13); position: absolute; left: 0; top:50px; width: 100%;}
.pageheader ol, .pageheader li{ margin: 0; padding: 0 20px}
.pageheader li{ float: left; font-size: 12px;  padding: 0; line-height: 25px; color: #868e96}
.pageheader li a{ color: #868e96}
.pageheader li + li:before{ font-size:10px;content: "/"; padding: 0 4px}
.pageheader li:last-child, .pageheader li:last-child a{ color: #495057}
.pagetitle h3{ font-size: 24px; font-weight: 500}
.pagetitle p{padding: 0; margin-top: -10px}
.pagebody{ background: #fff; border: 1px solid rgba(0, 0, 0, 0.25);margin:15px 0 30px 0; border-radius: 3px; padding:60px;box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);color: rgba(134, 139, 161,1); min-height: calc(100vh - 380px); position: relative}


@media only screen and (max-width: 1280px){
	.pagebody{ padding:	60px 25px}
}


.pagebody h4{ font-size: 18px; margin: 0; padding: 0 0 0 0; color: #2d2d2d; margin-bottom:30px}
.pagebody p{ margin: 0; padding: 0}
.pagebody h4 + p{ margin: -20px 0 30px 0}
.pagebody .row + .row{ margin-top: 60px}
.pagebody .row:after, .pagebody:after{ display: block; clear: both; float: none; content: ""}
.pagebody .row { }
.pagebody .row .container_layout{ padding: 0; position: relative}
.pagebody .row.col2 > div{ float: left}
.pagebody .col2 > div{ width: 46%}
.pagebody .col2 > div + div{ margin-left:8%}

.tableinfo:after{ content: ""; clear: both; float: none; display: block} 
.tableinfo{ font-size: 0.95rem; padding-bottom: 10px; opacity: 0.9; } 
.tableinfo strong{ color:#0195df; font-weight: bold} 
.tableinfo label{ margin-top: 0; display: inline-block; vertical-align: middle; margin-left: 15px} 
.tableinfo label input[type="checkbox"] + span:before, .tableinfo label input[type="radio"] + span:before{ margin-top:  -8px; width: 14px; height: 14px} 
.tableinfo label input[type="checkbox"] + span, .tableinfo label input[type="radio"] + span{ padding-left: 20px} 
.tableinfo label input[type="checkbox"]:checked + span, .tableinfo label input[type="radio"]:checked + span{color:#16B765;}
.tableinfo label input[type="checkbox"]:checked + span:before, .tableinfo label input[type="radio"]:checked + span:before{ background:#16B765; border:1px solid #16B765 }





.table {border-collapse: separate;border-spacing: 0;border:1px solid #dee2e6;}
.table *{ vertical-align: middle} 
.table th, .table td {padding:2px 0.75rem;	border-top: 1px solid #dee2e6; color: rgba(134, 139, 161,1); height: 35px}
/* .table_box { border:1px solid #dee2e6;} */
.table thead > tr > th, .table tfoot > tr > th{    border-top: 0;border-bottom: 0;font-weight: 700;text-transform: uppercase;    color: #343a40;letter-spacing: 0.5px;}
.table.border{}
.table.border th,.table.border td {border: 1px solid #dee2e6;}
.table.border > tbody > tr > th, .table.border > tbody > tr > td { border-right-width: 0;  border-bottom-width: 0;}
.table.border > tbody > tr > th:first-child, .table.border> tbody > tr > td:first-child {border-left-width: 0;}
.table.border > thead > tr > th, .table.border > thead > tr > td {border-bottom: 1px solid #e9ecef;border-top: 0; border-right-width: 0;}
.table.border > thead > tr > th:first-child, .table.border > thead > tr > td:first-child {border-left-width: 0;}
.table.col th, .table.col td{ vertical-align: middle}
.footer_box{ clear: both; float: none}
.btn_box + .footer_box{ margin-top: 20px} 
.pagination{ text-align: center; margin: 30px 0 0 0; padding: 0}
.pagination li{ display: inline-block; border-radius: 3px; margin: 0; padding: 0 } 
.pagination li.active{ background: rgba(71,107,179,1.00)}
.pagination li.prv i:before{ content:"\e64a"}
.pagination li.fst i:before{ content:"\e662"}
.pagination li.end i:before{ content:"\e661"}
.pagination li.next i:before{ content:"\e649"}
.pagination li a{ display: block; padding: 5px 10px} 
.pagination li.active a{ color: #fff}



/* 본문 소 헤드*/
.pagebody header{ position: relative; left: auto; top: auto; height: auto; width: 100%; display: block; margin: 0; padding: 0; box-shadow:none; background: none;  box-sizing: border-box; margin-bottom: 20px; z-index: auto}
.pagebody header .btn_box button{ border-radius: 4px; border-color: #000; color: #000; font-size: 12px; height: 30px; line-height: 30px}
.pagebody header .btn_box button:before{font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s; content:"\e61a"; padding-right: 5px}
.pagebody header .btn_box button.add:before{ content:"\e61a"}
.pagebody header .btn_box button.del:before{ content:"\e6a5"}
.pagebody header .btn_box, .pagebody header h4{ float: left; clear: none} 
.pagebody header:after{ display: block; content: ""; clear: both; float: none}
.pagebody header .btn_box{ float: right; margin-top: 0}
.pagebody header h4{ margin-bottom: 0}
.pagebody header .btn_box button.on{ background: #000; color: #fff}
.pagebody header h4 + ul, .pagebody header h4 + ul li{ float: left; margin: 0; padding: 0}
.pagebody header h4 + ul{ height: 40px; overflow: hidden; overflow-y: auto; float: none; clear: both}
.pagebody header h4 + ul:before{ content: ":"; padding:0 5px; float: left}
.pagebody header h4 + ul li:after{ content: ", " }
div.layer{ position: absolute; display: none}
div[data-layer="new_member"]{right: 0; top: 55px; background:#fff; z-index:2; border: 5px solid rgba(145,145,145,0.4); padding: 10px 20px 30px 20px }
div[data-layer="new_member"]:before{ content: "";border-bottom:8px solid rgba(145,145,145,0.4);border-left:6px solid transparent;border-right:6px solid transparent; position: absolute; right: 85px; top: -13px }
div.layer .btn_box{ margin-top: 15px}

div.layer button.close{ position: absolute; right: 10px; top: 15px; border: none}
div.layer button.close span:before{ content:"\e646"; font-size:25px}

div.layer h5{ color: #000}

div.layer.active{ display: block}

/* table[data-table="depth"] tr td.al:before{ content: "└"; display: inline-block; vertical-align: top; padding-right: 5px; font-weight: 700} */
table[data-table="depth"] tr.depth01 td.al{ padding-left: calc(1.09rem * 1)}
table[data-table="depth"] tr.depth02 td.al{ padding-left: calc(1.09rem * 2)}
table[data-table="depth"] tr.depth03 td.al{ padding-left: calc(1.09rem * 3)}
table[data-table="depth"] tr.depth04 td.al{ padding-left: calc(1.09rem * 4)}
table[data-table="depth"] tr.depth05 td.al{ padding-left: calc(1.09rem * 5)}
table[data-table="depth"] tr.depth06 td.al{ padding-left: calc(1.09rem * 6)}
table[data-table="depth"] tr.depth07 td.al{ padding-left: calc(1.09rem * 7)}
table[data-table="depth"] tr.depth08 td.al{ padding-left: calc(1.09rem * 8)}
table[data-table="depth"] label input[type="checkbox"], table[data-table="depth"] label input[type="radio"]{ z-index: auto; position: relative; left: auto; top: auto}
table[data-table=manager] tbody tr th.al, table[data-table=menu] tbody tr th.al{ padding-left:30px}
table tr.on td, table tr.on th{ background: rgba(114,114,114,0.06); color: #DB2B7B}
table tr span.name{ position: relative }
table[data-table=manager] tr span.name:before, table[data-table=menu] tr span.name:before{ text-indent:0; font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;		-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s; font-size:1rem; content: ""; padding-right: 5px; position: absolute; left: -20px; }
table tr.on span.name:before{ content:"\e64d"}
table[data-table=manager] span.bul + button.tdbtn{ margin-left: 10px; position: relative}
table[data-table=manager] span.bul + button.tdbtn:before{ content: "/"; position: absolute; left: -10px}

/* 메뉴트리*/

.placeholder {outline: 1px dashed #4183C4;}
.mjs-nestedSortable-error {background: #fbe3e4;border-color: transparent;}
ol{ padding-left: 20px}
ol.sortable{padding-left: 0}
ol.sortable,ol.sortable ol {list-style-type: none;}
.sortable > li{ padding-left: 10px; position: relative }
.sortable li div {border: 1px solid #d4d4d4;border-radius: 3px;cursor: move;margin: 0;padding: 3px;margin-bottom: -1px; position: relative}
li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {border-color: #999;}
.disclose, .expandEditor {cursor: pointer;width: 26px;display: none;  text-align: center;padding: 0; }
.sortable li.mjs-nestedSortable-collapsed > ol {display: none;}
.sortable li.mjs-nestedSortable-branch > div > .disclose {display: inline-block;}		
.sortable span.ui-icon {display: inline-block;margin: 0;}		
.menuDiv {}
.itemTitle {vertical-align: middle;cursor: pointer; font-weight: 500; display: inline-block; margin-left: 26px}	
.itemTitle.active{ color: #DB2B7B}

.ui-icon{ position: absolute; left:0px; top: 0; height: 30px; line-height: 30px}		
.deleteMenu {float: right;cursor: pointer; width: 30px; padding: 0; text-align: center; left: auto; right: 0 }
.ui-icon:before{text-indent:0; font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; transition:.3s;  content: ""; font-size: 10px; }
.disclose:before{ content: "\e663"}
.disclose.ui-icon-minusthick:before{ content: "\e660"}
.deleteMenu:before{ content: "\e646"}

ol.sortable li li div{ background:rgba(187,187,187,0.1)}
ol.sortable li li li div{ background:rgba(187,187,187,0.2)}
ol.sortable li li li li div{ background:rgba(187,187,187,0.3)}
ol.sortable li li li li li div{ background:rgba(187,187,187,0.4)}
ol.sortable li li li li li li div{ background:rgba(187,187,187,0.5)}

ol.sortable > li:before { content: ""; position: absolute; left: 0; display: block; width: 3px; height: 3px; background: #000; border-radius: 100%; top: 15px}

.pagebody .col2 > div.menu_tree{ width: 29%; }
.pagebody .col2 > div.menu_tree + .container_layout{ width: 66%; margin-left: 5%}


.tab_box{ position: absolute; left: 0; top: -1px; border-bottom: 1px solid rgba(0, 0, 0, 0.25); width: 100%; height: 50px; overflow: visible;background: rgba(204,204,204,0.082); }
.tab_box:after{ display: block; content: ""; clear: both; float: none}
.tab_box ul, .tab_box li, .tab_box li button{ margin: 0; padding:0px 0 0 0; border: none; background: none; height: 50px; }
.tab_box ul.tab li{ float: left; border-right: 1px solid rgba(0, 0, 0, 0.25)}
.tab_box ul.tab li button{ line-height:52px; padding: 0px 35px; background: rgba(204,204,204,0.2); border-top-left-radius: 3px; overflow: hidden; border-top-right-radius: 3px; font-size: 14px; color: rgba(59,58,73,0.5); box-sizing: border-box}
.tab_box ul.tab li button.active{ border-bottom: 1px solid #fff;background: #fff; margin-top: 1px; font-weight:900; font-size: 16px; color:#008EAB; line-height: 60px}
.pagebody > .tab_box + .row{ padding-top: 20px}





/* 로딩 바*/
@keyframes lds-ellipsis3 {
  0%, 25% {left: 32px;-webkit-transform: scale(0);transform: scale(0);  }
  50% {left: 32px;-webkit-transform: scale(1);transform: scale(1);  }
  75% {left: 100px; }
  100% {left: 168px; -webkit-transform: scale(1);transform: scale(1); }
}
@-webkit-keyframes lds-ellipsis3 {
  0%, 25% { left: 32px; -webkit-transform: scale(0);  transform: scale(0);  }
  50% { left: 32px; -webkit-transform: scale(1); transform: scale(1);  }
  75% {left: 100px; }
  100% {left: 168px;-webkit-transform: scale(1); transform: scale(1);  }
}
@keyframes lds-ellipsis2 {
  0% { -webkit-transform: scale(1);transform: scale(1);  }
  25%, 100% {-webkit-transform: scale(0);transform: scale(0); }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {-webkit-transform: scale(1);transform: scale(1);  }
  25%, 100% {-webkit-transform: scale(0);transform: scale(0);  }
}
@keyframes lds-ellipsis {
  0% { left: 32px;-webkit-transform: scale(0);transform: scale(0);  }
  25% {left: 32px;-webkit-transform: scale(1);transform: scale(1);  }
  50% {left: 100px;  }
  75% {left: 168px;-webkit-transform: scale(1); transform: scale(1);  }
  100% { left: 168px; -webkit-transform: scale(0); transform: scale(0);}
}
@-webkit-keyframes lds-ellipsis {
  0% { left: 32px; -webkit-transform: scale(0); transform: scale(0);}
  25% { left: 32px; -webkit-transform: scale(1); transform: scale(1);}
  50% { left: 100px;}
  75% { left: 168px; -webkit-transform: scale(1); transform: scale(1);}
  100% { left: 168px; -webkit-transform: scale(0); transform: scale(0);}
}

.loading{ position: fixed; z-index: 5; width: 100%; height: 100%; background: rgba(255,255,255,0.8); left: 0; top: 0}
.lds_ellipsis {  position: absolute; left: 50%; top: 40%;transform: translate(-50%, -50%);}
.lds_ellipsis > div {position: absolute; -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); width: 26px; height: 26px;}
.lds_ellipsis div > div {width: 20px;  height: 20px;  border-radius: 10px;  background: #f00;  position: absolute;  top: 100px;  left: 32px;  -webkit-animation: lds-ellipsis 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;  animation: lds-ellipsis 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards; box-sizing: border-box}
.lds_ellipsis div:nth-child(1) div {  -webkit-animation: lds-ellipsis2 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;  animation: lds-ellipsis2 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;  background: #ffb900;}
.lds_ellipsis div:nth-child(2) div {  -webkit-animation-delay: -1s;  animation-delay: -1s;  background: #6a67ce;}
.lds_ellipsis div:nth-child(3) div {  -webkit-animation-delay: -0.5s;  animation-delay: -0.5s;  background: #1aafd0;}
.lds_ellipsis div:nth-child(4) div {  -webkit-animation-delay: 0s;  animation-delay: 0s;  background: #3be8b0;}
.lds_ellipsis div:nth-child(5) div {  -webkit-animation: lds-ellipsis3 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;  animation: lds-ellipsis3 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;  background: #ffb900;}
/*
.lds_ellipsis {  width: 154px !important;  height: 154px !important;  -webkit-transform: translate(-77px, -77px) scale(0.77) translate(77px, 77px);
  transform: translate(-77px, -77px) scale(0.77) translate(77px, 77px);}
*/



/* 팝업 */
.modal{position: fixed; z-index: 5; width: 100%; height: 100%; background: rgba(255,255,255,0.85); left: 0; top: 0; display: none}
.modal .container_layout{ position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); border:1px solid #999; background: #fff; width: 600px; padding: 30px; box-shadow: 0 3px 5px rgba(0,0,0,0.12); max-height: 600px; overflow: hidden; overflow-y: auto  }
.modal h4{ font-size: 20px; margin: 0; padding: 0 0 20px 0}
.modal div.close{ position: absolute; right: 20px; top: 20px}
.modal div.close button{ border: none}
.modal div.close button i:before{ content:"\e646"; font-size: 20px}
.modal.active{ display: block}

/* 글쓰기 */

span.mst{ color: #DB2B7B; font-weight: 700; font-size: 16px}
.datellist dl{ margin: 0; padding:3px 0; width: 100%; }
.datellist dl:after{ content: ""; clear: both; float: none; display: block}
.datellist dt, .datellist dd{ float: left; line-height: 32px; vertical-align: middle; margin: 0; padding: 0}
.datellist dt{ min-width:60px; color: #000; border-right: 1px solid #dee2e6}
.datellist dd *{ vertical-align: middle}
.datellist dl + dl{border-top: 1px solid #dee2e6}
.datellist dd{ padding-left: 10px}

.datellist dd label{ padding: 0 10px; margin: 0}
.datellist .date-picker{ width:85px; text-align: center}
.datellist dd.time label{ margin: 0; padding: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; text-indent: -999px}
.datellist dd.location{ width:  calc(100% - 280px)}
.datellist dd.location input[type="text"]{ width:  calc(100% - 100px)}

td span.info{ display: inline-block} 
td label{ margin-top: 0} 

@media (max-width: 1040px) {
.datellist .date-picker{width:65px; } 
.datellist dd.location{ width:  calc(100% - 230px)}
	.datellist dd.location input[type="text"]{ width:  calc(100% - 80px);}
}

.ui-datepicker{ background: #fff; width:280px; z-index: 88; border: 1px solid #999; padding: 10px; display: none}
.ui-datepicker-title{ text-align: center; padding-bottom: 10px; border-bottom:1px solid #ddd; margin-bottom: 8px }

.ui-datepicker-header{ position: relative}
.ui-datepicker-prev{ position: absolute; left:0px; top: 0; cursor: pointer}

.ui-datepicker-next{ position: absolute; right: 0px; top: 0; cursor: pointer}

.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon{ display: block; position: relative; height: auto; left: auto; top: auto; font-size: 11px; line-height: 32px;}

.ui-datepicker-prev .ui-icon:before{ content: "<"; padding-right: 5px; font-weight: bold}
.ui-datepicker-next .ui-icon:after{ content: ">"; padding-left: 5px; font-weight: bold}

.ui-datepicker-year{ margin-right:  5px}
.ui-datepicker-month{ margin-left: 12px}
.ui-datepicker-calendar td{ vertical-align: middle}
.ui-datepicker-calendar td a{ display: block;width: 100%; height: 30px; line-height: 30px}
.ui-datepicker-calendar thead th{ height: 30px; }
.ui-datepicker-today a{ color: #DB2B7B; background: #fff}
.ui-datepicker-current-day a{ color: #fff; background: #DB2B7B}



/* 그리드 */
.table_box2 { position: relative}
.table_box2 table{ border-top: 1px solid #000}
.dataTables_filter{border: 1px solid #ddd;background: rgba(232,232,232,0.25); border-radius: 5px;padding:0px 0px;  text-align: center; text-align: left !important; position: absolute; right: 100px; top: -74px}
.dataTables_filter label{ font-size: 0; margin-top:5px !important}
/* .dataTables_filter label:before{ display: inline-block; content: "\e610"; font-size: 14px;text-indent:0; font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; } */
.dataTables_filter  input{ font-size: 14px; }
.dataTables_wrapper .dataTables_filter input{ height: 32px}
.dataTables_wrapper .dataTables_filter input + button.sch{ height: 32px;vertical-align: top; border:none; background: none; } 
.dataTables_length{  color: #999 !important; font-size: 12px; float: right !important}

.table_box2 .btn_box{ position: absolute; right:0px; top:-90px; z-index: 3}
.table_box2 .btn_box button.bgkey{ border-radius:6px; height: 44px; min-width: 90px}
.table_box2 .btn_box button.bgkey.new:before{content: "\e702";font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; padding-right: 5px   }
.dataTables_wrapper .dataTables_info{ position: absolute; left:0px; top:6px; color: #999 !important	; font-size: 12px}
.dataTables_wrapper .dataTables_paginate{ float: none !important; text-align: center !important; margin-top: 30px}
table.dataTable thead th, table.dataTable thead td,  table.dataTable tbody td{ height:45px 	; padding: 2px 18px; font-size: 1rem !important; }
.pagination{ text-align: center; margin: 30px 0 0 0; padding: 0}
.dataTables_wrapper .dataTables_paginate a{ display: inline-block !important; border-radius: 3px !important; margin: 0 2px !important; padding: 0 !important; padding: 5px 10px !important; background: none  !important; border: none !important; min-width: 33px !important; } 
.dataTables_wrapper .dataTables_paginate a.first, .dataTables_wrapper .dataTables_paginate a.previous, .dataTables_wrapper .dataTables_paginate a.next, .dataTables_wrapper .dataTables_paginate a.last{ font-size: 0}
.dataTables_wrapper .dataTables_paginate a.first:before, .dataTables_wrapper .dataTables_paginate a.previous:before, .dataTables_wrapper .dataTables_paginate a.next:before, .dataTables_wrapper .dataTables_paginate a.last:before{ content: "\e662";font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; font-size: 1rem; }

.dataTables_wrapper .dataTables_paginate a.previous:before{ content:"\e64a"}
.dataTables_wrapper .dataTables_paginate a.next:before{ content:"\e649"}
.dataTables_wrapper .dataTables_paginate a.last:before{ content:"\e661"}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{ cursor: default !important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus{outline:none}
.dataTables_wrapper .dataTables_paginate .paginate_button:active{ box-shadow: none !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:focus{ box-shadow: none !important; outline: 1px dotted #ddd}

.table_box2 .dataTables_wrapper .dataTables_paginate .paginate_button.current, .table_box2 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background: rgba(71,107,179,1.00) !important; color: #fff !important; }
.table_box2 .dataTables_wrapper .dataTables_paginate .paginate_button:hover{color: #1e88e5 !important;background:none !important;}

.table_box2 .table td span[value="게시중"]{ background: rgba(19,100,185,1.00); color: #fff; font-size: 12px; padding: 2px 6px; display: inline-block; border-radius: 2px }
.table_box2 .table td span[value="작성중"]{ background: rgba(168,152,0,1.00); color: #fff; font-size: 12px; padding: 2px 6px; display: inline-block; border-radius: 2px}
.table_box2 .table td span[value="종료"]{  background: rgba(91,90,90,1.00); color: #fff; font-size: 12px; padding: 2px 6px; display: inline-block; border-radius: 2px}


/* 메뉴팝업에서 메뉴 선택 시 생기는 버튼 */
table tr td .dvd { border-top: 1px solid #e7e7e7; padding: 0 15px; clear: both; float: none;}
table tr .dvd > ul { display: inline-block; margin-right: 15px;}
.dvd.menu_result ul, #view_page .dvd.menu_result > ul { line-height: normal; margin: 0 !important; padding: 0 !important;}
.dvd.menu_result li, #view_page .dvd.menu_result > ul li {float: left; border: 1px solid #EBEBEB; background: #fff; margin: 10px 10px 0 0px !important; padding: 0 10px !important; border-radius: 10px; line-height: 40px;}
td button.del { font-size: 0; line-height: 0; width: 13px; height: 13px; margin: 0; padding: 0; background: #fff; border: 1px solid #d2d2d2; border-radius: 50%; min-width: inherit; color: #525252;}
td button.del:before { content: "x"; font-size: 7px; font-family: Arial, Helvetica, sans-serif; margin-top: -1px; display: block; color: #d2d2d2; line-height: 10px;}

.dataTables_processing {margin-top:100px !important;}
.dataTables_scrollBody table.dataTable thead th {border:none;}
.dataTables_scrollHead + .dataTables_scrollBody table.dataTable thead th, .dataTables_scrollHead + .dataTables_scrollBody table.dataTable thead th  div{ height: 0 ; padding: 0; overflow: hidden; font-size: 0px; border: none }
/*.dataTables_scrollHead + .dataTables_scrollBody table.dataTable thead th  div{ height: 0 !important; padding: 0 !important; overflow: hidden; font-size: 0px !important; border: none !important}
*/
.dataTables_scrollHead table.dataTable{ border-bottom: none}
.dataTables_scrollHead + .dataTables_scrollBody table.dataTable{ border-top: none}
.dataTables_scrollHead table.dataTable thead th, .dataTables_scrollHead + .dataTables_scrollBody table.dataTable tbody td{ height: 45px; padding: 2px 18px }
.dataTables_scrollHead + .dataTables_scrollBody table.dataTable thead th{ padding: 0px 18px }
.dataTables_scrollBody table.dataTable tbody td a{ word-break: break-all}

/* 첨부파일 */
.fileDrop{ border: 3px dashed #ddd; margin: 10px 0; text-align: center; font-size: 18px; font-weight: 100}
.fileDrop > p:before{ content: "\e647";font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; font-size: 18px;}
.tmpFile, .saveFile{ margin:0px 5px 10px 5px;; float: left; white-space: nowrap}
.tmpFile:before, .saveFile:before{content: "\e747";font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; color: #999; padding-right: 5px}
.tmpFile span.del, .saveFile span.del{ background: #333; font-size: 0; line-height:20px; display: inline-block; vertical-align: middle; width: 20px; height:20px; border-radius: 100%; margin-left: 5px; margin-right: 10px; position: relative}
.tmpFile span.del:before, .saveFile span.del:before{content: "\e646";font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; color: #fff; font-size:9px; text-align: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block}



/* 댓글 */
.comentwrap{ background:#f9f9f9; border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5; overflow:hidden; padding:11px 20px 11px 20px;position:relative}
.table .comentwrap{ background: none; border: none; padding: 11px 0 5px 0}

.prvnxt + .comentwritewrap{ margin-top:-50px}
.comentwritewrap{ clear:both; overflow:hidden; position:relative; margin-top: 20px; display: none}
.comentwritewrap.active{ display: block} 

.comentwritewrap h3{ text-align:center; font-size:20px; font-weight:normal; color:#525252; padding-bottom:17px; padding-top:13px }
.comentwrap textarea{ width: calc(100% - 90px); height:60px; border:1px solid #cdcdcd; margin-right:5px; margin-bottom:5px; float:left; box-sizing:border-box; padding:10px; color:#333}
.comentwrap button{ width:75px; height:62px; line-height:62px; text-align:center; background:#999999; color:#fff; font-size:14px; float:right}
.comentwrap span.size{ position:absolute; right:110px; top:77px;color:#9e9e9e; font-size:0.95rem}
.comentwrap p{ color:#9e9e9e; font-size:0.95rem; padding-top:2px; clear:both;  display:block}

.comentlistwrap{ clear:both; padding-bottom:50px; overflow:hidden; margin-top: 50px}
.comentlistwrap .boardpage{ margin-top:30px; clear:both; float:none}
.comentlistwrap h3{ color:#525252; font-size:1.12rem; font-weight:bold; border-bottom:1px solid #c0c0c0; padding:0 20px 10px 0px }
.comentlistwrap h3 strong{ color:#ea3592; font-weight: bold}
.comentlistwrap ul.listbox{ border-bottom:1px solid #c0c0c0; overflow:hidden; margin:0; padding:0}
.comentlistwrap ul.listbox li ul{ border: none} 

.comentlistwrap ul.listbox li{ padding:20px 20px 21px 20px; border:none; border-bottom:2px dashed #f4f4f4; clear:both; overflow:hidden; float:none; width:auto; text-align:left; margin-bottom:0; min-height: none; min-height:37px}

.comentlistwrap ul.listbox li ul li{ position: relative; }
.comentlistwrap ul.listbox li ul li:before{ position: absolute; left: 0; top: 20px; content: ""; width: 7px; height: 10px; border: 1px solid #999; border-width: 0 0 1px 1px}

.comentlistwrap ul.listbox li div.txtbox{ overflow:hidden;   padding:2px 0 0px 0}
.comentlistwrap ul.listbox li div.txtbox span{ color:#9e9e9e; font-size:0.96rem; }
.comentlistwrap ul.listbox li div.txtbox span.writer{ padding-right:10px}

.comentlistwrap ul.listbox li div.txtbox button.del{ line-height:0; font-size:0; display:inline-block; width:18px; height:18px; vertical-align:middle; border:1px solid #999; border-radius:100%; margin-left:6px; position:relative}
.comentlistwrap ul.listbox li div.txtbox button.del:before{content: "X";font-style: normal;font-weight: normal;speak: none;text-decoration: inherit;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale; color:#333; position:absolute; left:0; top:0; line-height:18px; display:block; width:16px; height:18px; font-size:11px; text-align:center;  }

.comentlistwrap ul.listbox li div.txtbox button.reply{display:inline-block; height:18px; vertical-align:middle; border:1px solid #999; border-radius:9px; margin-left:6px; position:relative; font-size: 11px; line-height: 16px}
.comentlistwrap ul.listbox li div.txtbox button.reply:before{content:"\e61c";font-family: 'themify';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;  }


.comentlistwrap ul.listbox li div.txtbox span.title{ display:block; color:#525252; font-size:1rem; padding:5px 0 0 0 }
.comentlistwrap ul.listbox li div.likebox{ float:right; width:100px}
.comentlistwrap ul.listbox li div.likebox span{ text-align:center; float:left; width:55px; vertical-align:middle; line-height:41px; font-size:12px; color:#525252}
.comentlistwrap ul.listbox li div.likebox a{ float:left;vertical-align:middle}
.comentlistwrap ul.listbox li:last-child{ border-bottom:none}

.comentlistwrap ul.listbox li ul.listbox li{border:none; padding-bottom: 0}

@media only screen and (max-device-width: 767px){	
.comentwrap span.size{ position: relative; right: auto; top: auto; display:block; float:none; clear:both}	
}