@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);


body{font-family:  'Noto Sans KR', sans-serif; background: #dbdbdb; min-width: 1347px; zoom:0.85}
#wrap {position: relative;}
.container {width: 100%;}

img {max-width: 100%;}

/* nav_ */
header{background: #525252;height: 99px;border-bottom:  1px solid #ccc;position:  fixed;left:  0;right:  0;z-index: 10;}
nav {clear: both;margin:0 auto;position:  relative;overflow: initial;height: 52px;min-width: 1347px;}
nav > .container > a {float:left;background:#cc0000;padding: 6px 30px;display:  block;line-height: 0;}
nav > .container > a > img {height: 40px;}
nav > .container > .lnb {/* float:  left; */}
nav > .container > .lnb > li {text-align: center; display:  inline-block;float:left;}
nav > .container > .lnb > li.mobile  {display:none;}
nav > .container > .lnb > li > a{font-size: 15px;line-height: 46px;font-weight: 500;padding: 0 25px;position:  relative;height: 52px;}
nav > .container > .lnb > li:hover > a, nav > .container > .lnb a.active{color: #fff;}
nav > .container > .lnb > li > ul > li > a.active > span {background: #cc0000;}
nav > .container > .lnb > li > a > i.material-icons {
    position: absolute;
    left:  0;
    right:  0;
    margin-top: 13px;
    color: #9c9c9c;
    }
nav > .container > .lnb > li > a > i.material-icons:after {content:'expand_more'}
nav > .container > .lnb > li > a.active > i.material-icons:after {content:'expand_less'}
nav > .container > .lnb > li:first-child > a {}
nav > .container > .lnb > li > ul {font-size: 14px;display:none;position: fixed;z-index:  100;left: 0;/* background:  #525252; */width:  100%;text-align: left;line-height: 1.2em;min-width: 1100px;}
nav > .container > .lnb > li > ul > li{float: none;/* font-size: 17px; */display:  inline-block;}
nav > .container > .lnb > li:first-child > ul > li a{color: #666;}
.sub_6 nav > .container > .lnb > li > ul,
.sub_4 nav > .container > .lnb > li > ul,
.sub_5 nav > .container > .lnb > li > ul { padding: 18px 25px;
    background-color: #fff;
    border-bottom: 1px solid #dbdbdb;}
.sub_6 nav > .container > .lnb > li > ul > li + li,
.sub_4 nav > .container > .lnb > li > ul > li + li,
.sub_5 nav > .container > .lnb > li > ul > li + li {margin-left:8px;}
.sub_4 nav > .container > .lnb > li > ul > li a,
.sub_6 nav > .container > .lnb > li > ul > li a,
.sub_5 nav > .container > .lnb > li > ul > li a {    display: inline-block;
    padding: 0 20px;
    color: #a6a6a7;
    font-size: 18px;
    border: 1px solid #b1b6ba;
    border-radius: 13px;
    line-height: 37px;}
nav > .container > .lnb > li > ul > li a.active  {
    background-color: #fef2f2 !important;
    color: #383639 !important;
}
/* nav > .container > .lnb > li > ul > li > a span:before {content: "\e80f";font-family:"fontello";margin-right: 5px;} */
nav > .container > .lnb > li > ul > li > a > span {background: #363636;margin-left: 4px;padding: 0 7.4px 2px 7.4px;border-radius:  100px;font-size: 13px;line-height: 20px;display:  inline-block;}
nav > .container > .lnb > li > ul > li > a > span.red {color:  #fff;}
nav > .container > .lnb > li:nth-child(5) > a > span.money {color:#fff100; font-weight:400; letter-spacing:0; margin-left:10px}
nav > .container > .lnb > li:nth-child(5) > a > span.charge {margin-left:10px;border:1px solid #fff;display:inline-block;font-size:  14px;line-height:  1em;padding: 5px 10px;border-radius:  20px;cursor:  pointer;}

/* nav > .container > .lnb > li > ul {margin-top: -9px;} */
nav > .container > .lnb > li:nth-child(2) > ul {}
nav > .container > .lnb > li:nth-child(3) > ul {}
nav > .container > .lnb > li:nth-child(4) > ul {}
nav > .container > .lnb > li:nth-child(5) > ul {}
nav > .container > .lnb > li:nth-child(6) > ul {}
nav > .container > .lnb > li > ul > li:hover > a {}
nav > .container > .lnb > li:last-child {float: right; margin-left:auto;}

.login{width: 100%; max-width: 400px; padding: 0 30px; margin: 0 auto;font-size: 17px;}
.login > p{margin: 10px 0 0;}
.login > p > a {width: 100%;}
.login > p > a.grey  {width: 70%; margin:10px auto 0 }
.login img {max-width: 100%;}
.login label span {padding-left: 30px !important;}
.login input[type=text], .login input[type=password] {font-size:  18px;background:  #fff;padding: 15px;height: auto;}

#main { max-width:1200px; margin:124px auto 0;}
#main h5 {border-bottom: 1px solid #eee;margin-top:  0;padding-bottom: 15px; }
#main .card {border-radius: 6px;}
#main .teal-line {border:1px solid #4db6ac}
#main .deep-purple-line {border:1px solid #9575cd ;}
#main .blue-line{border:1px solid #64B5F8 !important;}
#main .green-line {border:1px solid #81C784 !important;}
#main .card .icon {color: #fff;width: 40px;height: 40px;vertical-align: middle;margin-right: 10px;display:  inline-block;text-align:  center;}
#main .card .icon i {line-height: 40px;font-size:  36px;}
.sub_lnb {width:100%;background:#fff;top: 145px;float: left;position: absolute;left: 0;border-bottom: 1px solid #ccc;height: 50px;box-shadow: 0px 3px 8px rgba(143, 143, 143, 0.2);}
#main .card .card-content p {margin-top:20px;}

#modal_main h5 {font-size: 18px; border-bottom: 1px solid #ccc; padding: 10px; }
#modal_main h5 + div {padding:10px;}

/* .main nav > .container > .lnb > li:hover > a > span {display: none;} */
.sub_0 nav > .container > .lnb > li:first-child > a,
.sub_1 nav > .container > .lnb > li:nth-child(2) > a,
.sub_2 nav > .container > .lnb > li:nth-child(3) > a,
.sub_3 nav > .container > .lnb > li:nth-child(4) > a,
.sub_4 nav > .container > .lnb > li:nth-child(5) > a,
.sub_5 nav > .container > .lnb > li:nth-child(6) > a,
.sub_6 nav > .container > .lnb > li:nth-child(7) > a,
.sub_7 nav > .container > .lnb > li:nth-child(8) > a{color: #ffffff;}


.sub_0 .tit_wrap {display: none;}
.sub_0 nav > .container > .lnb > li:first-child > ul {top:60px; display: block;background:  #fff;color: #666;border-bottom:  1px solid #ddd;text-align:  left;padding-left: 184px;line-height: 45px;}
.sub_0 nav > .container > .lnb > li:first-child > ul li i { line-height: unset;}
.sub_1 nav > .container > .lnb > li:nth-child(2) > ul {display: block;}
.sub_2 nav > .container > .lnb > li:nth-child(3) > ul {display: block;}
.sub_4 nav > .container > .lnb > li:nth-child(4) > ul {display: block; top:60px;}
.sub_5 nav > .container > .lnb > li:nth-child(5) > ul {display: block; top:60px;}
.sub_6 nav > .container > .lnb > li:nth-child(6) > ul {display: block; top:60px;}
.sub_7 nav > .container > .lnb > li:nth-child(7) > ul {display: block;padding-left: 737px;}


.sidebar  {float:  left;width: 220px;background: #616161;left:0;margin-left: 0;display: none;position: inherit;bottom:  0;top: 0;height: 100%;z-index:  1;}

.sidebar .side_nav {border-top:   1px solid #ddd;margin:0;margin-top: 99px;background: #fff;border-right:  1px solid #ddd;}
.sidebar .side_nav > li {border-bottom:1px solid #ddd;}
.sidebar .side_nav > li > a {color:  #333;padding: 12px;display:  block;}
.sidebar .side_nav > li > a:after{font-family: 'Material Icons';content:'expand_more';float:right;}
.sidebar .side_nav > li.active > a:after{content:'expand_less';}
.sidebar .side_nav > li > ul {display: none;}
.sidebar .side_nav > li > ul > li {background: #eee;padding: 10px;border-bottom:  1px solid #fff;}

.sidebar .side_nav > li > ul > li span{display:inline-block;float:right;padding: 2px 10px;border-radius:100px;font-size: 10px;margin-top: 2px;}
.sidebar .side_nav > li > ul > li span.on {background:#3cc967;}
.sidebar .side_nav > li > ul > li span.on:after {content:'ON'; color:#fff;}
.sidebar .side_nav > li > ul > li span.off {background:#fff; }
.sidebar .side_nav > li > ul > li span.off:after {content:'OFF'; }


.sub_con {position: relative;overflow: hidden;}
#menu_but {cursor: pointer;background: #f7f7f7;float:  left;padding: 5px;font-size: 30px;border-right: 1px solid #ddd;border-left:  1px solid #ddd;position: relative;}
.tit_wrap {background: #fff;overflow:  hidden;padding-top: 99px;height: 138px;}
.tit_wrap h2 {font-size: 18px;margin: 0 20px;line-height: 2.0em;display:inline-block;}
.tit_wrap .row {margin-bottom: 5px;}

.tit_wrap .form_grup {margin-top: 9px;margin-right: 24px;/*min-width: 70%;*/text-align:  right;}
.tit_wrap .form_grup > input, .tit_wrap .form_grup > select  {vertical-align:middle;margin: 0;text-align:center;max-width: 150px;display:  inline-block;width: auto;}
/* .tit_wrap .form_grup select {vertical-align:middle;margin: 0;text-align:center;max-width: 150px;display:  inline-block;width: auto;} */

.search_wrap {/* float: left; */margin:0 15px;display: inline-block;}
.search_wrap input[type=text] { width: 150px; border-radius: 4px 0 0 4px; border-right: 0; text-align: left;}
.search_wrap a{border-radius:  0 2px 2px 0;padding: 0 0 0 10px;outline: 1px solid #9e9e9e;}
input.inline {width: auto !important;}
.cursor {cursor: pointer;}
.underline {text-decoration: underline;}
.overline {text-decoration: overline;}
.line_through {text-decoration:  line-through;}

.pagination_wrap {text-align: right;position: relative;margin-top: 30px;}
.pagination_wrap .show {float:left; position:absolute;}
.pagination_wrap select {width: auto;display:  inline-block;}

col.checkbox {width: 20px;}
th i {float: right;}
th i::before {content:'import_export'}
td {padding: 10px;}

.borderb_0 {border-bottom:0;}
.gline {border-bottom: 1px solid #E7e7e5 !important;}
.bline {border-bottom: 2px solid #d9d9d7 !important;}
.leftb_line {border-left: 2px solid #d9d9d7 !important;}
.rightb_line {border-right: 2px solid #d9d9d7 !important;}





.input_gorup{position: relative;}
.input_gorup input[type="text"]{
    text-align: right;
    /*padding-right: 40px;*/

    padding: 0 10px 0 40px;
}
.input_gorup label {
    position: absolute;
    top: 1px;
    /*right: 10px;*/
    /*padding-left: 10px;*/
    font-size: 1em;
    color: #000;
    /*border-left: 1px solid #dedede;*/
    line-height: 30px;

    right: initial;
    border-right: 1px solid #dedede;
    border-left: 0;
    padding: 0 10px;
    left: 0;
}
.input_gorup label.active {color:#000 !important;}

.input_gorup.left  {}
.input_gorup.left input[type="text"]{padding-right:  10px;padding-left:  40px;text-align:  left;}
.input_gorup.left label{
    left:  0;
    border: 0;
    border-right:  1px solid #dedede;
    right: auto;
    padding-right: 10px;
}

.pop_info_dl li {display: block;overflow:  hidden;margin-top: 5px;}
.pop_info_dl dt {font-weight:  500;width: 35%;margin:  0;}
.pop_info_dl dd {width: 32%;float:  left;margin:  0;text-align:  right;}

.modal-del {color:  #444;float: right;margin: 20px 0 0;}
.modal-del:hover {text-decoration: underline;}


/* #example_wrapper select {display: block;width: auto; display: inline-block;}
#example_wrapper label {font-size: 1.2em}
#example_wrapper .dt-table {padding: 0 }
div.dataTables_wrapper div.dataTables_filter input  {width:auto;}
.mdl-button--raised.mdl-button--colored  {background:#4490ff}
.mdl-button--raised.mdl-button--colored:active, .mdl-button--raised.mdl-button--colored:hover{background:#4490ff}
.mdl-data-table th {font-size: 14px;} */


.board_top_wrap select, .board_top_wrap input {width: auto; display: inline-block; vertical-align: middle; max-width: 150px;}

.datepicker-select{
    display: none !important;
}

.modal-content > h4 {background: #4180d9;margin: -24px -24px 24px -24px;padding:10px 25px;color:#fff;font-size: 24px;}
.modal-content > h4 > span{float:right;cursor:pointer;font-size: 28px;line-height: 32px;}
.modal-content > h4 > span:after {content:'close'; font-family: 'Material Icons';}

.font_11 {font-size: 11px; }
.font_12 {font-size: 12px; }
.font_14 {font-size: 14px; }
.font_16 {font-size: 16px;}
.font_15 {font-size:15px;}
.font_18 {font-size: 18px;}
.font_20 {font-size: 20px;}
.font_24 {font-size: 24px;}
.font_30 {font-size: 30px;}

.line_30 {line-height: 30px;}
.line_32 {line-height: 32px;}
.line_38 {line-height: 38px;}
.line_54 {line-height: 54px;}

.p_0 {padding:0 !important;}
.p_lr_5 {padding-left:5px; padding-right: 5px;}
.p_10 {padding:10px; }
.p_tb_0 {padding-top: 0 !important; padding-bottom: 0 !important;}
.p_l_0 {padding-left:0 !important;}
.p_r_0 {padding-right: 0 !important; }
.p_b_0 {padding-bottom: 0 !important;}
.c{padding-top: 10px !important;}
.p_t_30{padding-top: 30px !important;}
.p_r_60{padding-right: 60px !important;}

.m_0 {margin:0 !important;}
.m_b_0 {margin-bottom: 0 !important;}
.m_b_5 {margin-bottom: 5px !important;}
.m_b_10 {margin-bottom: 10px !important;}
.m_b_15 {margin-bottom: 15px !important;}
.m_b_20 {margin-bottom: 20px !important;}
.m_b_30 {margin-bottom: 30px !important;}
.m_b_60 {margin-bottom: 60px !important;}

.m_t_0{margin-top: 0px !important;}
.m_t_5{margin-top: 5px !important;}
.m_t_10{margin-top: 10px !important;}
.m_t_15{margin-top: 15px !important;}
.m_t_20{margin-top: 20px !important;}
.m_t_30{margin-top: 30px !important;}
.m_t_60 {margin-top: 60px !important; }


.m_l_0 {margin-left: 0 !important;}
.m_l_10 {margin-left: 10px !important;}
.m_l_15 {margin-left: 15px !important;}

.m_l-5 {margin-left: -5px !important;}
.m_l-10 {margin-left: -10px !important;}
.m_l-15 {margin-left: -15px !important;}

.m_r_0 {margin-right: 0 !important;}
.m_r_5 {margin-right: 5px !important;}
.m_r_10 {margin-right: 10px !important;}
.m_r_15 {margin-right: 15px !important;}
.m_r_30 {margin-right: 30px !important;}

.inline_b {display: inline-block;}

.vertical{vertical-align: middle  !important;}

.box {border:1px solid #bec0c2; padding:15px; overflow: hidden; border-radius: 4px; font-size:1.2rem; line-height:1.2rem;}
.blue-line {border:1px solid #2196F3 !important}
.grey-line {border:1px solid #e7e7e7 !important}
.relative{position: relative;}
.absolute{position: absolute; display: block;}
.right_0 {right: 0}
.bottom_0 {bottom:0}

.product_img {width: 170px;height: 170px; margin-right: 30px; float:left; padding: 0;}
select.width_auto {width: auto;float: left;height: 38px;width: 100px;}
select.width_inline, input[type=text].width_inline {width: auto;display: inline; height: 38px; vertical-align: unset;}
dt {float:  left;margin-right:  15px;}

ul.four li {width: 25%; float: left;}

.total ul{margin:0}
.total ul li {border-left:1px solid #eee; width: 25%; float: left;}
.total ul li:first-child {border:0}
.total ul li dt {margin-left: 60px;display: block;height: 2em;}
.total ul li dd{display:  block;float:  right;margin-right: 60px;margin-left:  0;}

footer {clear:  both;background: #e6e6e6;padding: 20px;overflow: hidden;line-height: 30px;}

.sub-menus li:nth-child(1) a {
    display: flex !important;
    border-radius: 11px;
    background: none !important;
}

.sub_menus {
    display: flex;
	zoom:0.85;
}

.sub-menus {
    display: flex;
    align-items: center;
    left: 0;
    background-color: #fff;
    margin-left: 0;
    width: 100%;
    padding:15px !important;
    margin:0;
    border-top:1px solid #ddd;
}

.sub-menus:before {
    display: none;
}

.sub-menus .box-menu {
    display: flex;
    padding: 0 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #b1b6ba;
    width: 115px;
    height: 98px;
    border-radius: 11px;
    font-size: 18px;
    letter-spacing: 0px;
    color: #a6a6a7;
}

.sub-menus li a.active {
    background-color: #fef2f2 !important;
}

.sub-menus li {
    display: flex !important;
    align-items: center;
}

.sub-menus li:last-of-type {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sub-menus li {
    float: left;
}

.sub-menus li + li {
    margin-left: 10px;
}

.sub-menus .arrow-menu {
    display: inline-block;
    margin: 0 10px 0 0;
    width: 15px;
    height: 30px;
    background: url(../images/header/arrow-menu.png) no-repeat;
    background-size: 100% 100%;
}

.sub-menus li a.active .icon-menu {
    opacity: 1;
}

.sub-menus .box-menu .icon-menu {
    display: flex;
    padding: 7px 0 0 0;
    width: 75px;
    flex: auto;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.sub-menus .box-menu .icon-menu img {
    height: auto;
}

.sub-menus .box-menu .icon-menu .data-num {
    border: 1px solid #acaeb0;
    margin-left: auto;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: inline-block;
    line-height: 23px;
    font-style: normal;
    color: #666;
    font-size: 12px;
    text-align: center;
}

.sub-menus li a.active .icon-menu .data-num {
    background-color: #e31010;
    border-color: #e31010;
    color: #fff;
}

.sub-menus li a.active .txt-menu {
    background: none;
    margin-left: 0;
    color: #383639;
}

.sub-menus .box-menu .txt-menu {
    padding: 10px 0;
    line-height: 1.2em;
    background: none;
    font-size: 16px;
    color: #a19d9d;
}