/*** layout ***/
/*** reset ***/

@import url("../css/font.css");

html {
    -webkit-text-size-adjust: none;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

html,
body {
    width: 100%;
    font-size: 14px;
    color: #353535;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.6;
    padding:0; margin:0;
    position:relative
}



html,
body,
div,
ul,
ol,
li,
dl,
dt,
dd,
p,
strong,
span,
em,
a,
table,
th,
td,
caption,
input,
button,
textarea,
label,
form,
legend,
fieldset,
select,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
img {
    padding: 0;
    margin: 0;
    border: 0;
    color: inherit;
    background: none;
    line-height: inherit;
    font-size: inherit;
}

html {width: 100%; max-width: 1920px;  overflow:auto}
body { position: relative; width:100%;background-color:#F4F7FC}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    vertical-align: middle
}


/*input {-webkit-appearance:none; border-radius:0}*/

select,
button {
    cursor: pointer
}

ul,
ol {
    list-style: none;
    text-decoration: none
}
::marker{    display: none !important;
    font-size: 0 !important;}
img {
    max-width: 100%;
    vertical-align: top;
}

a {
    color: inherit;
    text-decoration: none
}

em {
    font-style: normal
}

strong {
    font-weight: 600
}

* {
   font-family: 'Noto Sans KR', sans-serif;
   letter-spacing: -0.3pt;
   -webkit-font-smoothing: antialiased;
   color: #333;
   font-weight: 300;
}

button,
button:hover,
button:focus,
a, .btn, button{outline:none !important}
.btn{outline:none !important}
.btn:hover{opacity:.85; transition:500ms all}

/*** common ***/


.btnH30{height:30px; line-height:25px; margin-top:-3px; vertical-align: middle}
.border-orange{border:1px solid #ff983f;}
.bg-primary{background-color:#0277BD;}
.bg-primary2{background-color:#0567A2;}
.bg-orange{background-color:#ff983f;}
.bg-red{background-color:#ef5c5c;}
.bg-green{background-color:#24B056;}
.bg-skyblue{background-color:#84CCFF}
.bg-whitegray{background-color:#bbb !important}
.bg-gray{background-color:#666666 !important}
.bg-333{background-color:#333}
.bg-454545{background-color:#454545}
.bg-brown{background-color:#402021}
.bg-cyan{background-color:#badbdc}
.bg-yellow2{background-color:#ffe19e}
.bg-pink{background-color:#FF3CAC}
.text-pink,
.text-pink:hover,
.text-pink:active,
.text-pink:focus{color: #ff3535;}
.text-cyan,
.text-cyan:hover,
.text-cyan:active,
.text-cyan:focus{color:#badbdc;}
.text-brown,
.text-brown:hover,
.text-brown:active,
.text-brown:focus{color:#402021;}
.text-red,
.text-red:hover,
.text-red:active,
.text-red:focus{color:#ff3333;}
.text-primary,
.text-primary:hover,
.text-primary:active,
.text-primary:focus{color:#0277BD !important}
.text-primary2{color:#0567A2 !important}
.text-333,
.text-333:hover,
.text-333:active,
.text-333:focus{color:#333 !important}
.text-black,
.text-black:hover,
.text-black:active,
.text-black:focus{color:#262A27 !important}
.text-orange{color:#ff983f; }
.text-orange2{color:#fbb714;}
.text-white,
.text-white:hover,
.text-white:active,
.text-white:focus,
.bg-primary:hover,
.bg-primary:active,
.bg-primary:focus{color:white !important}
.text-blue,
.text-blue:hover,
.text-blue:active,
.text-blue:focus{color: #007aff;}
.border-primary{border:2px solid #0277BD !important; background-color:#fff !important}
.border-primary2{border:2px solid #0567A2 !important; background-color:#fff !important}
.border-orange{border:2px solid #ff983f; background-color:#fff}
.border-orange2{border:2px solid #fbb714; background-color:#fff}
.border-red{border:2px solid #ef5c5c; background-color:#fff}
.bg-464646{background-color:#464646;}


.btn_link{font-weight:bold;border-bottom:1px solid transparent !important;color: #2c85c4;}
.btn_link:hover,
.btn_link:focus,
.btn_link:active{border-bottom:1px solid !important; color:#222}

tr.row_red td .btn_link:hover,
tr.row_red td .btn_link:focus,
tr.row_red td .btn_link:active{border-bottom:1px solid red !important; color:red}

.text-grey{color:#666}
.bg-grey{background-color:#666;}

#delbtn,
.btn-red,
.bg-red{background: #ED5247;color: #fff;}
.pointRed{color:#0277BD !important; }
.ls0{letter-spacing:0 !important}
.italic{font-style:italic !important;}


.form-group{margin:0; padding-left:0; padding-right:0}
.form-group:after,
.input_box:after{display:block; content:''; clear:both;}
.form-group .input_box{display:inline-block;padding-left:10px;float:left;width:calc(100% - 105px);height: 50px;line-height: 50px;}
.input_box input, .input_box select{padding-left:5px;padding-right:5px;float: left;}
.form-group.empty{height:50px; background-color:#fff}
input:focus,
textarea:focus,
.select-wrap select:focus{border-color:#2C85C4; transition:500ms all}
.form-group .input_box input[type="password"],
.form-group .input_box input[type="text"]{display:inline-block;}
.control-label{float:left;display:inline-block; font-weight:normal; width:105px;height:35px;line-height:35px;font-size:14px;text-align: center;}

.box-shadow{box-shadow:0 1px 4px #e4e2f1}
.border-shadow{box-shadow:0 1px 4px #e4e2f1; padding:20px; border-radius:6px; border:1px solid #ddd}


/* img upload */
.img_wrap{display:inline-block;}
.img_wrap .upImg{margin-right:10px;}
.img_wrap:after{display:block; content:''; clear:both;}
.filebox1{display:inline-block; width:100%; height:100%; text-align:center;}
.filebox1 .img .imgbox{overflow:hidden;}
.filebox1 .img .imgbox img{height:auto !important;}
.fileadd{position:relative; height:100%;}
.upImg{
width:100%;
height:320px;
background-color: #fff;
position: relative;
display: inline-block;
float: left;
border-radius:6px;

}
.upImg{  margin:5px auto; display:inline-block; }

.btn_img_add{display:inline-block; padding-top:100px}
.btn_img_add span{display:block; font-size:14px; text-align:center; margin-top:10px;}
.btn_img_add img{width:20px; height:20px; display:block; margin:0 auto;}
.no_img{position:absolute;top:0; bottom:0; left:0; right:0; margin:auto;  width:100%; font-size:13px; text-align:center;padding-top:60px}
.no_img img{opacity:.5}
.no_img p{margin:5px auto 20px; color:#666;}
.no_img a{ width:100px; font-weight:normal; height:30px; line-height:25px; border-radius:4px; display:inline-block;}

/* imaged preview */
.upfile input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.upfile .upload-name {-webkit-appearance: none; /* �ㅼ씠�곕툕 �명삎 媛먯텛湲� */ -moz-appearance: none; appearance: none; }


/* input type="file" */

  .filebox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
  }

  .filebox label {
    display: inline-block;
    color: #fff;
    line-height: normal;
    vertical-align: middle;
    background-color: #666;
    cursor: pointer;
    border-radius: 3px;
    width:60px; display:inline-block; height:35px; float:right;
    font-size:13px; text-align:center; line-height: 35px;
    font-weight:normal;
  }

  /** named upload **/
  .filebox .upload-name {
    width:calc(100% - 65px);
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    background-color: #f5f5f5;
    border: 1px solid #ebebeb;
    border-bottom-color: #e2e2e2;
    border-radius: .25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: top
  }

  .flie:last-child{margin-bottom:0;}
  .file a{display:inline-block; border-bottom:1px solid; line-height:1; padding-bottom:2px}
  .sample .btn_link{border-bottom:1px solid #000 !important}

/* file_upload */
.img_box_wrap{background-color:#f9f9f9; }
.img_box_wrap .input_box{background-color:#fff; width:calc(100% - 120px); float:left}
.file_box_wrap > .input_box{background-color:#fff; max-width:none;}
.file_box_wrap > .input_box .title{background-color:#fff; float:left; width:60px; height:40px; line-height:40px; padding:0;}
.files2 li{min-height:40px;}
.files2 li:last-child{margin-bottom:5px;}

.t_overflow{
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
overflow:hidden;
}

.lock { background-color: #EEEEEE;}
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 {margin-top: 30px;}

.mb5 {margin-bottom: 10px;text-align: right;margin-right: 10px;}
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb15 { margin-bottom: 15px; }

.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml15 { margin-left: 15px; }

.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr15 { margin-right: 15px; }

.bb0{border-bottom:0 !important}

.close{text-shadow:none; font-weight:normal}
.close,
.close3{  width: 13px; height: 13px; display:inline-block;float: right; opacity: 1;}
.close2 { float: right; width: 13px; height: 13px; opacity: 1;}

.close img{max-width:100%;}
.no-img{width:105px; display:block; margin:0 auto;align-items: center}


/*** table ***/
.table_area {border-radius:6px;height: auto;overflow: auto;background-color:#fff;border:1px solid #eee;box-shadow: 0 1px 4px #e4e2f1;overflow-y: clip;}
.table_area table{border-radius:6px;}

.table_area.scroll{overflow-x:auto}
/* .table_area.scroll table{min-width:1500px}
.table_area.scroll table th,
.table_area.scroll table td{min-width:120px} */

.table_wrap{    border: 1px solid #e9e9e9; height:500px;}

table td,
table th{
  text-align:center;
  font-size:15px;
  font-weight:normal;
  border-right:1px solid #DBDEE5;
}
th.text-left,
td.text-left{padding-left:15px}
table td:last-child,
table th:last-child{border-right:0}
table thead tr {height:35px;}
table tbody tr{height:35px; border-bottom:1px solid #DBDEE5;font-size:14px}
table tbody tr{}
table thead {background-color:#F5F6FA;}
table tbody tr:hover td{background-color:#f2f7ff}
.table_area table tr.total td,
.table_area table tr.total th{background-color:#eee}
td .btn_del_row{ position:relative; width:20px; height:20px; display:inline-block;background-color:#ef5c5c; border-radius:3px}
td .btn_del_row:before{width:70%; display:block; content:''; height:2px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background-color:#fff}

/*** chart ***/
.chart_box{background-color:#fff; border-radius:6px; box-shadow: 0 1px 4px #eef1f7; padding:20px; margin-top:30px}
.chart_box:after{display:block; content:''; clear:both}

#chart-area{display:inline-block;width:400px; height:400px;}
 .chart_info{width:calc(100% - 400px); display:inline-block; float:right}
#chart-area canvas{height: auto !important;}
.toastui-chart-wrapper{}






/* input */
input, select{font-size:13px; outline:none}
textarea{
  border:1px solid #E5E5E5;
  background-color:#fff;
  height: auto;
  overflow: auto;
  padding: 10px;
  resize: none;
  box-sizing: border-box;
  font-size: 13px;
  text-indent:0;
}
input, select{line-height:35px; font-size:14px}
input, select, .form-control {
    height: 35px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    outline:none;
    font-weight:normal;
    box-shadow:none;
    text-indent:8px;

}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    padding-left:10px;
    outline:none;
    width:100%;
    padding:0;
    background-image: url(../img/arrow_down.svg);
    background-size: 15px 10px;
    background-repeat: no-repeat;
    background-position:right 5px center
}
.select-wrap{position:relative;height:35px;padding:0;}
.select-wrap select{  box-sizing:border-box;border:1px solid #E5E5E5;background-color: #fff}

select.readonly {
  background-color: #f4f4f4;
  border: 1px solid #C8C9CE;
}
 .readonly input,
 .readonly textarea{background-color:#f4f4f4 !important}
/*textarea:read-only{background-color:#f8f8f8} */
select option { text-indent: 15px;}
select::-ms-expand { display: none;}

select.active { transform:rotate(180deg); transition:2s ease-out;}

a:hover, a:focus, a:active{text-decoration: none;}
input::placeholder,
textarea::placeholder{color:#fff; opacity: .5;}
input:focus::placeholder,
textarea:focus::placeholder{opacity:1; transition:500ms all}



body .checkbox_wrap{}
body .checkbox_wrap:last-child{margin-right:0;}
body .checkbox_wrap input{    display: inline-block;
    width:auto; height:auto;
    float: left;
    top: 0;
    height: auto;
    vertical-align: top; outline:none; padding:0}
input:focus {outline:none !important;}
body .checkbox_wrap span{display:inline-block;margin-top:15px;font-size: 15px;letter-spacing: -1px;padding-left:5px;font-weight: bold;line-height:1;float:left;color: #000;}
body .checkbox_wrap span u{display:inline-block; letter-spacing: 1px; padding-right:2px;}
body input[type="checkbox"]:checked:after{display:inline-block; float:left;}

body .radio_wrap{ margin-right:15px;float:left; line-height:40px;}
body .radio_wrap:last-child{margin-right:0;}
body .radio_wrap input{    display: inline-block;
    width: auto;
    width:auto; height:auto;
    float: left;
    top: 0;
    height: auto;
    vertical-align: top;
    margin-top: 16px;}
body .radio_wrap span{display:inline-block; margin-top:14px; font-size:14px; font-weight:normal; line-height:1; float:left;}

body input[type="checkbox"]:checked:after{display:inline-block; float:left;}


.checkbox{width:20px; height:20px; display:inline-block;}
.btn_submit{padding:0;}
.btn_submit .btn {
    line-height: 40px;
    height:40px;
    padding: 0;
    font-size: 16px;
    font-weight: ;
}
.btn_submit.dev2 .btn{width:49%}
.btn_submit.dev2 .btn:last-child{float:right;}
.btn.btn-cancel {
    border: 1px solid #dfdfdf;
    color: #676767;
    float: left;
}

.contents_wrap{padding:30px 15px; max-width:1100px; position:relative;}
.contents_wrap .btn_wrap{text-align:right; margin-top:15px}
.btn.col-md-2{float:none; width:60px; max-width:none}

.dev4 li{width:25%; float:left; display:inline-block;}
section {box-sizing:border-box}


span.chk{display:inline-block; position:relative; padding-left:15px; float:left; margin-top:6px;}
span.chk:nth-child(1){padding-left:0;}
span.chk label{border:0; display:inline-block;}

/* date */
.date label{width:calc(48% - 5px);position:relative; display:inline-block; vertical-align: top}
.date label img{
  width: 18px;
  margin: 6px 8px;
  position: absolute;
  top: 3px;
  right: 1px;
    }
  .date strong{display:inline-block; margin-top:-8px; width:10px; text-align:center; vertical-align: top}
  .hide{display:none;}
  .show{display:block;}
  .btn_url{background-color: #009688; color:#fff; border-radius:6px; width:110px}


.btn_wrap{}
.btn_wrap .btn{line-height: 39px;}
.btn_wrap.dev .btn{width:49%; margin-right:2%; float:left;}
.btn_wrap.dev .btn:last-child{margin-right:0;}
div .btn{
    width: 120px;
    line-height:34px;
    height: 40px;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    padding:0;
    border-radius: 0;
}
.input_box .btn{height:35px; line-height:35px}
.btn img{width: 15px; display: inline-block; margin-top: 8px;}


a.btn_close {
    width: 12px;
    height: 12px;
    line-height: 1.8;
    display:inline-block;
}


.full-width{width:100% !important; margin-left:0; margin-right:0}
.half-width{width:50% !important}
.float-left{float:left }
.float-right{float:right }
.text-left{text-align:left}
.text-right{text-align:right;}
.text-center{text-align:center;}

.sticky{position:sticky;}
.fixed{}


.btn_hover:hover {
    font-weight: 600;
}

.btn_img {
    border: 0;
    color: #fff;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    text-indent: 0;
    line-height: 2.2;
    font-weight: 600;
    width: 100%;
    height: 100%;
}

.btn_img_del {
    background: #ED5247;
}



.btn_img img {
    width: 22px;
    display: inline-block;
    margin-top: 6px;
    float: left;
    margin-left: 10px;
}



.popup table td .btn_img img {
    width: 16px;
    margin-top: 8px;
    margin-left: 7px;
}

.btn_img span {
    display: inline-block;
    margin-right: 8px;
    margin-top: 1px;
}

.btn_img_up img {
    margin-left: 8px;
    margin-top: 8px;
}

.img_upload label {
    width: 40px;
    height: 35px;
    display: inline-block;
    position: relative;
    float: right;
    background-color: #F8F8F8;
    text-indent: 0;
    border: 1px solid #C8C9CE;
    border-radius: 2px;
    box-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.3);
}

.btn_wrap a.btn_add {padding:0 20px; width:auto;}
.btn_wrap a.btn_add img {margin-right:5px;}
.btn_del{width:20px; height:20px; display:inline-block;}

.tui-grid-cell-has-input .tui-grid-cell-content{display:inline-block; border-bottom:1px solid transparent;}
.tui-grid-table{height:100%; overflow:auto;}

.top:after,
.bottom:after,
ul:after{display:block; content:''; clear:both;}
.dev2 li{width:50%; float:left;}
.dev2 li:nth-child(3n){padding-right:0;}
.dev3 li{width:33.333%; float:left;}
.dev3 li:nth-child(3n){padding-right:0;}
.dev4 li{width:25%; float:left;}
.dev4 li:nth-child(4n){padding-right:0;}

.search_box.top{padding:20px; background-color:#fbfbfb; border:1px solid #e5e5e5}

.form-group.address,
.form-group.address .input_box.address_box{height:auto}
.addr02, .addr03{margin-top:3px; float:left; width:100%}
.addr01 .btn{width:60px; margin-left:5px; border-radius:4px; vertical-align: top}
.addr01{height:35px}

/* popup */
#popup_wrap{
width:100vw;
height:100vh;
background-color:rgba(0, 0, 0, .6);
position:fixed;
left:0;
top:0;
display:none;
z-index:99990;
user-select: none

}
.popup {
  position: fixed;
  top: 15%;
  right: 0;
  left: 0;
  margin: auto;
  display: none;
  width: 450px;
  height: auto;
  max-height:85vh;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  z-index:99991;
  border-radius:4px;
  box-shadow:0 2px 2px rgba(0, 0, 0, .16)
}
.popup_header{text-align:center;padding:10px 15px; position:relative;}
.popup_header h5{font-size:18px; line-height:40px; font-weight:bold; position:relative;}
.popup_content{padding:15px 20px 20px; text-align:left; font-size:15px; max-height:calc(85vh - 80px); overflow:auto}
.popup_content .control-label{padding-left:0; width:90px}
.popup_content .form-group{border-bottom:0; padding-bottom:8px;}
.popup_content .form-group .title{    margin: 0;
    padding: 0;
    background-color: transparent;
    width: 80px;
    height: 35px;
    line-height: 35px;
    padding-top: 0}
.popup_content h5{font-size:16px; padding-bottom:5px; border-bottom:1px solid #454545; margin:10px auto 20px}

.popup_content:after{display:block; content:''; clear:both;}
.popup_content .form-group .input_box{height:35px; line-height:35px; padding-left:0; width:calc(100% - 90px)}

.popup .message{padding-top:30px; padding-bottom:20px; font-weight:600; color:#222; font-size:18px; text-align:center;}
.popup_content .btn_wrap{padding-top:20px; width:100%; padding-bottom:0;}
.popup .close{position:absolute;top: 20px; right: 20px; width: 16px; height: 16px}
.popup .btn_wrap:after{display:block; content:''; clear:both;}
.popup .btn_wrap.dev2 .btn{width:49% !important; margin-right:2%; display:inline-block; float:left !important}
.popup .btn_wrap .btn:last-child{margin-right:0}


   /* page */
   .tui-pagination .tui-page-btn span{vertical-align: top}


/* login */

#login {
    width: 100vw;
    height: 100vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%); */
    background:url('../img/bg_login.jpg') center 100%
}

#loginBox{width:320px}
#loginBox .login-form{margin:20px auto;}
.login-form:after{display:block; content:''; clear:both}
.login_logo img{}
.login_logo img.login_txt{width:100px; vertical-align: bottom; margin-bottom: 6px; margin-left:-15px}
.login-form .login-form-input .input{position:relative; height:45px; line-height:45px; display:inline-block; width:100%; margin-bottom:10px}
.login-form .login-form-input .input:after{display:block; content:''; width:100%; height:1px; background-color:#fff; opacity: .3; position:absolute; bottom:0; left:0}
.login-form .login-form-input .input:hover:after{opacity:.8; transition:2s all}
.login-form .login-form-input input{width:100%; background:transparent; border:0; height:100%; line-height:45px; font-size:15px}
.login-btn{width:100%; height:50px; line-height:46px; border:1px solid #d1c1de; color:#d1c1de; margin:30px auto 15px; background-color: transparent}
.login-btn:hover{color:#fff; border-color:#fff; transition:2s all; position:relative;}
.login-btn:hover:before{display:block; content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; background:#fff; opacity: .06; transition:5s all; }
.version{text-align:right; font-family: 'Noto Sans KR', sans-serif; font-size:13px; color:#fff; opacity:.4}



/* header */
#header{/* height:70px; */position:fixed;top:0;left:0;width:100%;z-index: 100;box-shadow:0 1px 4px rgba(0, 0, 0, .3)}
.header_inner{width:100%;padding:0 30px;box-sizing:border-box;height: 50px;}


#nav{width:250px; height:calc(100vh - 70px); position:fixed; top:70px; left:0; background-color:#fff; box-sizing: border-box; display:none}
.login-info{padding:20px; padding-top:15px; position:relative;}
.login-info .icon_user{    width: auto; height: 56px; display: block;margin-top: 2px;}
.login_text{font-size:19px; font-family: 'Noto Sans KR', sans-serif; line-height:1.4; padding-top:20px}




  #lnb {position: relative}
  #lnb > ul > li > a.menu_title {font-size:15px; display:block;color:#171725; background-color:#fff; border-bottom:1px solid #eee;font-family:'Noto Sans KR', sans-serif; height:52px; line-height:52px; position:relative; padding-left:10px}
  #lnb > ul > li > a.menu_title .menu_icon{
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 2px 20px 6px 15px;
  }
  #lnb > ul > li.active > a.menu_title {display:block;color:#171725; background-color:#F4F7FC; position:relative;}
  #lnb > ul > li.active > a.menu_title:before{display:block; content:''; width:4px; border-radius:0 4px 4px 0; height:100%; background-color:#0277BD; position:absolute; top:0; left:0;}
  #lnb .depth02 li{line-height:38px; cursor: pointer; font-size:14px}
  #lnb .depth02 li.active{color:#0277bd}
  #lnb > ul > li .menu_arrow{
    transform: rotate(0deg);
    transition: 500ms all;
    float: right;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 20px;
    margin: auto;
    opacity: .12;
  }
  #lnb > ul > li.active .menu_arrow{transform:rotate(90deg);}
  #lnb > ul > li a:hover {color: #0277bd; background-color: #F4F7FC;}

  #lnb > ul > li ul {background-color:#F9FBFD; padding:10px 20px 10px 65px; display: none;}
  #lnb > ul > li > ul > li > a {display: block;padding: 0 25px 14px 14px;color: #inherit; font-size: 12px;background: #f5f2ec no-repeat 95% 1px;}
  #lnb > ul > li > ul > li > a {color: #d91c1b; background-color: #f5f2ec; }
  #lnb > ul > li > ul > li.active a {color: #d91c1b; background: #f5f2ec  no-repeat 95% 3px; }
  #lnb > ul > li > ul li ul {display: none;padding-bottom: 8px;background-color: #f5f2ec;}
  #lnb > ul > li > ul li li a {display: block;padding: 0 25px 10px 22px; color: #666; font-size: 12px;background-color: #f5f2ec;}
  #lnb > ul > li > ul > li li a:hover {color: #0277bd;}


    #load {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: fixed;
      display: block;
      opacity: 0.8;
      z-index: 999999;
      text-align: center;
    }

    #load>img {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 999999;
    }

.btn_login,
.btn_login:focus,
.btn_login:active,
.btn_login:hover{color:#fff}



.basic_ #nav .menu01,
.basic_ #nav .menu01 ul{display:block}

/* container */
#container{padding-top: 100px;/* padding-left:250px; */position:relative;}
.cont_inner{/* margin:40px; *//* max-width:1285px; */position:relative;padding: 40px;}
.cont_inner:after{display:block; content:''; clear:both}
.cont_inner .btn_wrap{}

.title_box{}
.title_box:after{display:block; content:''; clear:both}
.title_box h2{font-size:24px;display:inline-block;float:left;font-weight: bold;letter-spacing: -1px;}
.title_box .depths{float:right; display:inline-block; margin-top:10px}
.title_box .depth{ color:#333; font-size:14px; display:inline-block; opacity:.6}
.title_box .depth:last-child{opacity:1}
.title_box .depth_arrow{width:auto; height:13px; margin:3px 5px 0 5px; display:inline-block; opacity:.6}
.data_list{margin-top:20px}

/* search */
/* .search{width: 100%; border-radius:6px; background-color:#fff; box-shadow:0 1px 4px #e4e2f1; margin-bottom:20px; overflow:hidden}
.search_inner{margin: 0 auto; background-color:#fff} */
.search{width: 100%; margin-bottom:20px; overflow:hidden}
.search_inner{margin: 0 auto;background-color:#fff;/* border-radius:6px; */background-color:#fff;box-shadow:0 1px 4px #e4e2f1;display: flex;flex-wrap: wrap;background: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);}

.search_inner:after{display:block; content:''; clear:both}
.search .form-group{/* height: 50px; */line-height: 50px;width: 33.33333333333333333333333333%;/* float:left; */}
.search .control-label{width:160px; height: 50px;line-height: 50px;font-size:15px;color:#fff;border-bottom:1px solid rgba(255, 255, 255, .1);}
.search .input_box{padding: 7px 8px 0 8px;width:calc(100% - 160px);border-bottom:1px solid #eee;background: #fff;display: flex;}
.search:after, .search .form-group:after{display:block; content:''; clear:both}
.btn_wrap{display:block;}
.search .btn_wrap{padding:10px; text-align:right !important; padding-right:0; box-sizing:content-box;}
.search .btn_wrap .btn{width:auto;min-width:120px;vertical-align: top;margin-top:5px;height: 45px;line-height: 45px;padding:0 15px;font-size: 16px;}

.table_wrap .search{box-shadow:none; border-bottom:1px dashed #ddd; }
.table_wrap .search .btn_wrap{padding:5px 0;padding: 25px}
.table_wrap .search .btn_wrap .btn{margin-top:0}
.table_wrap .search .btn_wrap{width:auto !important}

/* input_area */
.input_area{border: 1px solid #d5d5d5; background: #f8f8f8; width: 100%; margin: 0 auto 15px;background-color:#eee; padding:10px}
.input_area .form-group{ height:45px; line-height:45px;}
.input_area .control-label{width:85px; height:45px; line-height:45px; text-align:left; padding-left:10px; font-size:14px; font-weight:600}
.input_area .input_box{padding:4px 5px 0 9px}
.input_area:after{display:block; content:''; clear:both}
.input_area .btn_wrap{display:inline-block;height:45px; line-height:45px}
.input_area .btn_wrap .btn{vertical-align: top; margin-top:5px}

/* etc,  effect */

.twinkle{
 font-size: 10px;
 padding-left:5px;
 display: inline-block;
 vertical-align: top;
 margin-top: 5px;
 animation: twinkle 1s step-end infinite;
 -webkit-animation: twinkle 1s step-end infinite;
 line-height:14px;
}
/* for MS怨꾩뿴 釉뚮씪�곗� */
@keyframes twinkle {
0% {opacity: 0.4}
50% {opacity: 1}
}

/* for Chrome, Safari */
@-webkit-keyframes twinkle {
 0% {opacity: 0.4}
 50% {opacity: 1}
}



 /* basic_ */
 body.basic_ #gnb ul li:nth-child(1){color:#3054a2; font-weight:bold}
 body.basic_ #leftmenu .menu01{display:block}


 @media (max-width:1200px){
body#memb_interview .search .form-group{width:50%}
body#memb_interview .search .form-group:last-child{max-width:50%}
 }



@media (max-width:910px){
#memb_interview .form-group.date_box .input_box .date label {width: calc(47% - 5px)}
}
@media (max-width:501px){
 .company_list ul li{width:49.5%; margin-right:1%; float:left;     padding: 30px 10px;}
 .company_list ul li h6{font-size:15px}
 .company_list ul li:nth-child(n){margin-right:1%}
 .company_list ul li:nth-child(2n){margin-right:0}
 body#memb_phone .count_table li{width:32.5%; float:left;}
 body#memb_phone .count_table li:nth-child(n){margin-right:1%; margin-bottom:10px;}
 body#memb_phone .count_table li:nth-child(3n){margin-right:0;}

  body#memb_phone .date_box .control-label{display:inline-block; width:80px; height:50px}
  body#memb_phone .date_box .input_box{max-width:calc(100% - 80px); background-color:#fff; height:50px; padding-left:8px}

  body#memb_interview .search .form-group:last-child{display:none}
  body#memb_interview .search .form-group.date_box .input_box .select-wrap{width:30%}

  body#db_distribution .search .form-group:nth-child(3),
  body#db_distribution .search .form-group:nth-child(6),
  body#db_distribution .search .form-group:last-child{display:none}
  body#db_distribution .search .form-group:nth-child(16) .select-wrap select{width:49%; margin-right:2%; float:left}
  body#db_distribution .search .form-group:nth-child(16) .select-wrap select:last-child{margin-right:0}

 #header .gnb_menu li:nth-child(12) {border-right:0 !important}
 .cont_inner .search .control-label { width: 80px}
 .cont_inner .search .input_box {width: calc(100% - 80px)}
 .form-group.empty{display:none}

}

@media (max-width:400px){
  .header_inner{padding:0 10px}
}

@media (max-width:360px){
.header_inner .login-info_c img {height: 20px; margin-top: 17px; margin-right:2px; margin-left:0}
.header_inner .login_text_c .text-333_c {font-size: 14px}
.cont_inner .search .control-label {
    width: 34px;
    font-size: 13px;
    letter-spacing: -1px;
    word-break: break-all;
    line-height: 1.4;
    padding-top: 5px;
}
.cont_inner .search .input_box {width: calc(100% - 34px)}

}
@media (max-width:320px){
  #loginBox{max-width:90%}
  .cont_inner .search .control-label,
  .cont_inner .search .input_box { width: 100%}
  .cont_inner .search .control-label{height:auto;     padding: 5px 0;}
}
@media (max-width:280px){
  .header_inner .login_text_c .text-333_c {
      font-size: 12px;
  }
  .header_inner .login-info_c img{display:none}
  #header .gnb_menu li{font-size:12px}
  #container{padding-top:90px !important}
  .title_box h2{width:100%;}
  .title_box .depths{display:none}
}