@charset "utf-8";

/*reset*/
html, body {height: 100%; font-size: 10px; }
body,div,p,h1,h2,h3,h4,h5,h6,ol,li,dl,dt,dd,ul,pre,code,blockquote,form,fieldset,legend,input,textarea,button,select,table,th,td {margin:0;padding:0;}
body{ height:100%; font-family: 'Pretendard', 'Malgun Gothic','맑은고딕', 'Dotum', 'AppleSDGothicNeo', 'sans-serif'; color: #000; font-weight: 500;}
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline; outline:none; }
ul, ol, li { list-style:none; }
table { width:100%; border-spacing:0; /*border-collapse:collapse;*/ }
address, cite, code, em, i { font-style:normal; font-weight:normal; }
label, img, input, select, textarea, button, a { vertical-align:middle; }
u, ins, a { text-decoration:none; }
blockquote, q { quotes:none; }
button, label { cursor:pointer; }
img, button { border:0; }
img { -ms-interpolation-mode:bicubic !important; }
a, img, input, span, button { outline:none;/* selector-dummy:expression(this.hideFocus=true); */}
legend, caption { position:absolute; overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; }
a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; cursor:pointer; }
header, footer, nav, aside, section, article, a, main, iframe { display:block; }

/*로그인*/
.login_bg {width:100vw; height:100vh; min-width:1600px; font-size: 1.4rem; background:linear-gradient(135deg,rgba(213,223,73, 0.1) 0%, rgba(80,193,186,0.1) 50%, rgba(2,73,93,0.2) 100%);}
.login_box {width:500px;height:360px;background:rgba(255,255,255,0.7);border-radius: 20px;position:fixed;top:50%;left:50%;transform: translateX(-50%) translateY(-50%);box-shadow: 3px 3px 5px rgba(0,0,0,0.16);padding: 40px;box-sizing: border-box;}
.login_box h1 {text-align: center; color:#02495d; font-size: 2.4rem; font-weight: 700;}
.login_form {margin: 25px auto 0;}
.login_form .id {width:360px; height:50px; border:1px solid #ccc; border-radius: 50px; margin:0 auto; background:url(../images/ico_log_user.png) 5% #fff no-repeat; }
.login_form .password {width:360px; height:50px; border:1px solid #ccc; border-radius: 50px; margin:0 auto; background:url(../images/ico_key.png) 5% #fff no-repeat; margin-top:10px;}
.login_form input[type="text"], .login_form input[type="password"] {border:none;margin-left: 50px;width: 280px;height:50px; color:#999; font-size: 1.4rem;}
.id_chk {width: 340px;margin: 20px auto 10px;padding-left: 20px;}
.id_chk input {margin-right:5px;}
.login_btn {display: block;width:360px;height:50px;background:#2f839b;font-size: 2rem;color:#fff;border-radius:10px;margin:0 auto; font-weight:700;}
.login_btn:hover {background:#02495d;}
.copyright {width:500px;position:absolute;left:0; bottom: -33px;color:#999;font-size:12px;text-align: center;}

/*대시보드*/
.body_wr {width:100%;height:100%;min-width: 1600px;font-size: 1.4rem;}
header {width:100%; height:50px; background:#fff; box-shadow:1px 3px 4px rgba(0, 0, 0, 0.3); position:fixed; top:0; z-index: 100;}
header h1 {float:left;margin-left:20px;padding: 3px 0;}
header nav>ul>li {float:left; position:relative;}
header .mfp_menu {float:left; margin-left:40px;}
header .mfp_menu li {margin: 0 15px;line-height: 50px;position:relative;}
header .mfp_menu li a {font-size: 1.5rem;color:#222;font-weight: bold;}
header .mfp_menu li:hover a {color:#2f68c2; font-weight: 900;}
header .mfp_menu li:hover a:after {content:''; display: block; width:100%; height:3px; background:#2f68c2; position:absolute; bottom:0;}
.login_nav {display:flex; position:absolute;top:10px; right:20px;}
.login_nav p {color:#2f68c2;font-size:1.4rem;font-weight: bold;line-height:30px;margin-right: 15px;}
.login_nav p strong {font-size: 1.4rem; color:#666;}
.login_nav button {width:28px; height:28px; border-radius:30px;}

/*중간타이틀*/
h3 {font-size:1.6rem; color:#4275DF; font-weight: 800; line-height:30px;}
h4 {font-size:1.4rem; color:#333; font-weight: 800; line-height:30px;}
h3 button {padding:0 20px; float:right;}

/*container*/
.wrapper {width:100%; height:100%; display: flex; position:relative;}
.container {width:100%; position: relative; top:50px;transition: 0.5s ease;}
.container.active {width:calc(100% - 220px); margin-left:220px;  transition: 0.5s ease;}
.container .inner {width:100%; padding:20px 30px 20px 30px; box-sizing: border-box; height:calc(100% - 50px);}
.container .data_area {clear:both; width:100%; height:100%;}

/*상단*/
.top_box {width:100%; padding:10px 0; position:relative; box-sizing: border-box;}
.top_box h2 {display: inline-block;font-size:2.0rem;color:#222222;font-weight: bold;padding-left:20px; position: relative;}
.top_box .title {position:relative;}
.top_box .location {font-size:1.2rem;float: right;position: relative;}
.location span:first-child::before {content:"";display: block;width:14px;height:14px;background: url(../images/ico_home.png) no-repeat;position: absolute;top: 0;left: -25px;}
.location span::after {content:">";margin: 0px 10px;font-family: 'dotum';font-size: 11px;}
.location em { font-weight:bold; }

/*LnB*/
.w_left_menu {width:220px; min-height:calc(100% - 50px); height: 100%; margin-left:-220px; box-sizing: border-box; background:#c5d8f7;position:absolute; top:50px; left:0; transition: 0.5s ease; flex:1;}
.w_left_menu.active {margin-left:0;}
.w_left_menu .open_lnb {width: 15px;background:#828282;border-radius: 0 5px 5px 0;text-align: center;position:absolute;top: 66px;right: -15px;z-index: 10;display: flex;justify-content: center;align-items: center;}
.w_left_menu .open_lnb span {line-height:30px; display:block; transform: rotate(180deg);transition: 0.5s ease;}
.w_left_menu.active .open_lnb span{display: block;transform: rotate(0deg);transition: 0.5s ease;}
.w_left_menu h2 {font-size: 2rem; color:#223b62; padding:20px 20px 20px 30px; border-bottom: 1px solid #acc3ea; }
.lnb>li a{line-height:40px; border-bottom:1px solid #acc3ea;}
.lnb li {position:relative;}
.lnb li a {font-size:1.4rem; color:#223b62; padding:0 20px;}
.lnb>li>a:hover, .lnb>li.on>a {font-weight: bold; color: #fff; background-color: #2f68c2;}
.lnb>li>ul, .lnb>li>ul>li>ul, .lnb>li>ul>li>ul>li>ul {display: none;}
.lnb>li>ul>li {background: #e6edfa;}
.lnb>li>ul>li>a {border-bottom:1px solid #d7dfed;}
.lnb>li>ul>li>ul {background: #f3f8ff;}