/* ÆùÆ® */
@font-face {
   font-family:'NanumGothic';
   font-weight:400;
   }

html {width: 100%; height: 100%; font-family:'NanumGothic', 'µ¸¿ò', Dotum, san-serif; font-size:14px; font-weight:400; color:#000}
body {width: 100%; height: 100%;}

/* reset */
input, select {box-sizing: border-box; font-size: 13px}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
a{text-decoration:none; color: #000}
html, body,div, span, p,form, fieldset, input, textarea, select, ul, li,table, th, td, colgroup {margin:0;padding:0;border:0;border-collapse:collapse;}
img { border:0 none; }
ul{list-style:none;}
legend, caption, hr{ display:none}
table {width: 100%}
.hidden {position: absolute;top: -99999px;z-index: 200;}
textarea {resize: none; box-sizing: border-box}

/* common*/
select, input[type="text"] { height: 26px; padding-left: 7px; border: 1px solid #bababa; background: #fff}

/* table */
table.table01 {text-align: center}
table.table01 td a {vertical-align: middle}
table.table01 tr.padding th, table.table01 tr.padding td {padding-top: 4px; padding-bottom: 4px}
table.table01 tr:first-child th, table.table01 tr:first-child td {border-top: 1px solid #bebebe}
table.table01 tr th:first-child, table.table01 tr td:first-child {border-left: 1px solid #bebebe}
table.table01 td.left {text-align: left; padding-left: 10px}
table.table01 th, table.table01 td {padding: 8px 10px 8px; border-right: 1px solid #bebebe; border-bottom: 1px solid #bebebe}
table.table01 th {color: #fff; background: #383838}
table.table01 td {background: #fff}
table.table01 td.left a {display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
table.table01 td.date {padding-left: 0; padding-right: 0}
table.table01 td.cont {line-height: 1.35}
table.type01 tr th:last-child, table.type01 tr td:last-child {width: 31%}
table.type02 tr th:first-child {width: 31%}
@media all and (min-width: 320px) and (max-width: 359px) {table.table01 td.left a {width: 165px}}
@media all and (min-width: 360px) and (max-width: 399px) {table.table01 td.left a {width: 203px}}
@media all and (min-width: 400px) and (max-width: 479px) {table.table01 td.left a {width: 235px}}
@media all and (min-width: 480px) and (max-width: 539px) {table.table01 td.left a {width: 293px}}
@media all and (min-width: 540px) and (max-width: 579px) {table.table01 td.left a {width: 336px}}
@media all and (min-width: 580px) and (max-width: 619px) {table.table01 td.left a {width: 365px}}
@media all and (min-width: 620px) and (max-width: 640px) {table.table01 td.left a {width: 396px}}

/* ¹öÆ° */
.btn_wrap { margin: 12px 0}
.btn_wrap p.btn_right {text-align: right; width: 100%}
a.btn {display: inline-block; font-weight: bold;  color: #fff; text-align: center; box-sizing: border-box; border-radius: 3px;}
a.btn01 {margin-left: 5px; border: 1px solid #5f5f5f; background: #707070; padding: 6px 8% 6px 8%}
a.btn01_1 {margin-left: 5px; border: 1px solid #a40000; background: #c50000; padding: 6px 8% 6px 8%}

/* ·Î±×ÀÎ */
#login {height: 100%; background: url(../../images/mobile/common/bg_login.jpg) no-repeat center center; background-size: cover}
#login .login_box .top {text-align: center}
#login .login_box .top p.main_icon {padding-top: 13%; padding-bottom: 6%;}
#login .login_box .top h1.tit {width: 41.6%; margin: 0 auto; padding-bottom: 6%}
#login .login_box .top h1.tit img {width: 100%; }
#login .login_box .login_form {width: 73.6%; margin: 0 auto; padding: 12% 5%; background: #fff; box-sizing: border-box}
#login .login_box .login_form p.input_num {padding-bottom: 11px}
#login .login_box .login_form p.input_num, #login .login_box .login_form p.input_pw {text-align: center}
#login .login_box .login_form p.input_pw {margin-bottom:  7px}
#login .login_box .login_form input[type="text"], #login .login_box .login_form input.input_pw {width: 100%; height: 33px; padding-left: 10px; border: 1px solid #bcbcbc; background: #cde0ff; font-size: 12px; vertical-align: middle}
#login .login_box .login_form input[type="checkbox"] {width: 15px; height: 15px; vertical-align: middle}
#login .login_box .login_form p.save {margin-bottom: 10px}
#login .login_box .login_form p.save label {display: inline-block; /*margin-top: 2px;*/ font-size: 12px; color: #5e5e5e; vertical-align: middle}
#login .login_box .login_form p.save2 {margin-bottom: 20px;display: inline-block; /*margin-top: 2px;*/ font-size: 12px; color: #ff0000; vertical-align: middle}
#login .login_box .login_form p.btn_login input {width: 100%; height: 40px; background: url(../../images/mobile/common/btn_login.jpg) no-repeat center center; background-size: 100% 40px; font-family: sans-serif; font-size: 16px;color: #fff}


/* Çì´õ */
#header {position: relative; height: 60px; background: #fff !important; z-index: 99}
#header h1.logo {position: absolute; left: -40px; top: 9px; width: 180px }
#header h1.logo img {width: 140%}
#header .gnb {box-sizing: border-box}
#header .gnb a.icon_menu {display: inline-block; position: absolute; right: 10px; top: 20px; width: 21px; height: 19px}
#header .gnb a.icon_menu img {width: 100%}
#header .gnb ul.sub_menu {display: none; position: absolute; right:0; top: 60px; width:70%; z-index:99}
#header .gnb ul.sub_menu.on {display: block}
#header .gnb ul.sub_menu li {border-bottom: 1px solid #60626c; background: #1b1e2c}
#header .gnb ul.sub_menu li:nth-child(3) {font-family: arial}
#header .gnb ul.sub_menu li:last-child {border-bottom: 0}
#header .gnb ul.sub_menu li a {display: block; padding: 15px 0 15px 20px; font-size: 18px; font-family: sans-serif; font-weight: bold; color: #fff; letter-spacing: -0.03em}

/* ¸ÞÀÎ */
#main_content {padding-bottom: 30px}
#main_content .top_cont_wrap {background: #d6d6d6}
#main_content .top_cont {overflow: hidden; padding: 0 10px}
#main_content .top_cont .today_situation {position: relative}
#main_content .top_cont .today_situation h2{padding-top: 24px; padding-bottom: 10px; font-size: 32px;font-family: arial;font-weight: bold; letter-spacing: -0.05em}
#main_content .top_cont .today_situation h2 span {display: inline-block; color: #ee3139; font-size: 27px}
#main_content .top_cont .today_situation h2 span.work {padding-left: 10px; color: #0e4a9b; font-size: 25px}
#main_content .top_cont .today_situation p.refresh {position: absolute; right: 0; top: 23px; width: 39px}
#main_content .top_cont .today_situation p.refresh a {display: block}
#main_content .top_cont .today_situation p.refresh a img {width: 100%}
#main_content .top_cont .today_situation ul {overflow: hidden; width: 100%; border: 2px solid #c7c7c7; background: #fff; box-sizing: border-box}
#main_content .top_cont .today_situation ul li {float: left; width: 25%; padding-top: 7%; padding-bottom: 3.7%; text-align: center; background: url(../../images/mobile/main/line_situation.png) no-repeat 100% center; background-size: 1px 63%}
#main_content .top_cont .today_situation ul li:last-child {background: none}
#main_content .top_cont .today_situation ul li span {display: block;  font-weight: bold}
#main_content .top_cont .today_situation ul li span.list_tit {font-size: 14px}
#main_content .top_cont .today_situation ul li span.list_num {padding-top: 6%; font-size: 40px; font-weight: bold; letter-spacing: -0.05em}
#main_content .top_cont .today_situation ul li p span {display: inline-block; color: #ee3139}
#main_content .top_cont .today_situation ul li span.num_txt {padding-left: 2%; font-size: 19px; vertical-align: super} 
#main_content .top_cont .icon_area {overflow: hidden; padding: 15px 0}
#main_content .top_cont .icon_area p {float: left; width: 33.3%}
#main_content .top_cont .icon_area p img {width: 100%}
#main_content .info {padding: 0 10px; clear: both}
#main_content .info h3 {padding-top: 20px; padding-bottom: 10px; font-size: 20px; font-weight: bold;}
#main_content .info table.table01 tr th:first-child,#main_content .info  table.table01 tr td:first-child {border-left: 0}
#main_content .info table.table01 tr th:last-child,#main_content .info  table.table01 tr td:last-child {border-right: 0}

#container {padding: 10px; border-top: 1px solid #a5a5a5}
#container h2.sub_tit {font-size: 19px; font-family: Dotum; font-weight: bold; padding-bottom: 6px}

/* guide */
.m_guide h1 {padding: 13px 0; font-size: 20px; font-weight: bold}
.m_guide code {font-family: 'NanumGothic', 'µ¸¿ò', Dotum, san-serif; font-size:12px; font-weight:400; color:#000 }
.m_guide table {width: 100%}
.m_guide table tr td {text-align: center; height: 50px; border: 1px solid #e4e4e4}
.m_guide input, .m_guide select {margin-bottom: 5px}
.m_guide input[type="date"] {border: 1px solid #bababa}