@charset "utf-8";
/*상단 메뉴*/
header { width:100%; position:fixed; background:#3c3c3b; z-index:20;}
header h1 { padding:15px 20px 13px 0;}
header div.title {width:150px; height:60px; line-height:60px; padding-left:40px;}
header ul {position:absolute; right:90px; top:17px;}
header ul li { float:left; padding:0 3px;}
/* header ul .on { background:url(images/ico_lnb_focus.jpg) no-repeat 50% bottom;} */
header ul li a { display:inline-block; padding:5px 10px 3px 10px; font-size:15px; color:#fff;}
header ul li a:hover,
header ul .on a { color:#444; background:#ffcc00; border-radius:4px; font-weight:600;}
header .btn_close { position:absolute; top:15px; right:0; background:url(ico_lnb_focus.jpg) no-repeat 0 0;}

.line_app { position:relative; background:#fff; padding:15px 0; border-bottom:1px solid #ccc; text-align:left;}
.line_app .block { position:relative;}
.line_app .block:before { position:absolute; content:""; display:block; width:100%; bottom:-16px; height:0; border-bottom:2px solid #ffcc00; z-index:1;}

.line_app strong { font-size:18px; font-weight:800;}
.line_app .block:after { clear:both; content:""; display:block;}

.line_app .cord { position:absolute; display:inline-block; bottom:-15px; left:0; padding:8px 18px; font-size:18px; font-weight:600; background:#ffcc00; color:#666; border-radius:12px 12px 0 0;}
.line_app .cord span { color:#373737; font-size:20px; font-weight:800;}
.line_app .cord_detail { position:absolute; display:inline-block; bottom:-8px; left:170px; border:0 solid #fff;}
.line_app .cord_detail b { color:#000;}

.btn_guide { position:absolute; font-weight:normal; right:0; border-bottom:1px solid #444; color:#ffa800; padding:5px 15px; background:#666; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.btn_guide .block:before { display:none;}
.btn_guide a { color:#ffcc00; font-size:12px;}
.btn_guide a:hover { text-decoration:underline;}
.btn_guide i:before { position:absolute; content:""; display:block; width:4px; height:4px; left:3px; top:4px; background:#058cff; border-radius:50%;}
.btn_guide i:after { position:relative; content:""; display:inline-block; width:8px; height:8px; border-radius:50%; -webkit-transition:240ms; -o-transition:240ms; transition:240ms; top:1px; left:0; border:1px solid #00c5ff; border-radius:50%;}
.btn_guide span { padding:0 5px; color:#ffa800}

.expire { color:#fff;}

#snb { position:fixed; top:180px; left:50%; margin-left:610px; z-index:20;}
#snb li a { display:inline-block; padding:15px; width:100px; color:#fff;}
#snb li a span { display:block; background:url(images/bg_arrow_pdf.gif) no-repeat right bottom;}
#snb .btn_adm_pdf a { font-size:15px; background:#444;}
#snb .btn_adm_pdf a b { font-weight:600; color:#ffcc00;}
#snb .btn_app_pdf a { color:#444; font-size:14px; font-weight:600; background:#ffcc00;}
#snb .btn_cartex_pdf a { color:#444; font-size:14px; font-weight:600; background:#ffa800;}

/*CONTENTS*/

#contents { width:100%; min-height:400px; position:relative; padding:190px 0 30px 0; z-index:10; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.h90 #contents { height:90%;}
#contents h2 { position:relative; padding:8px 0; font-size:18px; font-weight:600; color:#2b2829;}
#contents h2:before { position:absolute; content:""; display:block; width:20px; height:0; border-top:2px solid #ffa800; left:0; top:2px;}
#contents h3 { position:relative; padding:8px 0; font-size:18px; font-weight:600; color:#2b2829;}
#contents h3:before { position:absolute; content:""; display:block; width:20px; height:0; border-top:2px solid #ffa800; left:0; top:2px;}



/*하단*/
#footer {width:100%; height:80px; line-height:80px; background-color:#f1f1f1; text-align:center;}

/*일반 리스트 프레임*/
.list-frame {width:100%; min-height:600px; position:relative;}
.list-frame .search-box { position:relative; width:100%; padding:18px 0; background:#fafafa; border-top:1px solid #ddd; text-align:center;}

.block { position:relative; width:100%; max-width:1200px; margin:0 auto;}
.minishow .title { width:100%; padding:10px 0; background:#d3292c; border:1px solid #d3292c; color:#fff;}

.aside { position:static; padding:0 20px; text-align:center; z-index:100;}
.aside .title { padding:10px 0; background:#d3292c; border:1px solid #d3292c; color:#fff;}
.aside ul { box-sizing:border-box; padding:5px 0; border:1px solid #ddd; border-top:none; background:#fff;}
.aside li {}
#calculate { padding:10px 0; background:#fff; border:1px solid #ddd; border-top:none;}

.list-frame ul.pagination {display: inline-block;}
.list-frame ul.pagination li { text-align:center; margin:5px; float:left;}
.list-frame ul.pagination li a { display:block; min-width:20px; padding:4px 0 3px 0; border:1px solid #ccc; color:#666; font-size:12px;}
.list-frame ul.pagination .active a { color:#fff; padding:5px 0 4px 0; border:none; background:#ffa800; text-decoration:underline; cursor:default;}

/*테이블 관련*/

.new_user { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); z-index:999999; display:none;}
.new_user .modal_content { position:absolute; top:50%; left:50%; width:703px; height:556px; margin:-278px 0 0 -351px; background:#fff; z-index:100; text-align:center;}
.new_user .modal_content .company1 { position:absolute; top:95px; left:330px; color:#ffa800; font-size:50px; font-weight:600;}
.new_user .modal_content .company2 { position:absolute; top:278px; left:535px; color:#ffa800; font-size:16px; font-weight:600}
.new_user .modal_content .btn_set {width:50%; float:left;}
.new_user .modal_content .title { margin:20px 0 10px 0; font-size:16px; color:#444; font-weight:600;}
.new_user .cookie_label { position:absolute; bottom:0; width:100%; padding:10px 0; background:#eee; text-align:right; color:#444;}
.new_user .cookie_label label { margin-right:10px;}
.new_user .cookie_label label:hover { color:#ffa800;}
.new_user .popup_close { color:#444;}
.new_user .popup_close:hover { color:#ffa800;}

/* tbl_left */
.table-list { border-top:solid 2px #ffcc00;}
.table-list th { padding:10px 0; border-bottom:solid 1px #888; font-size:12px; font-weight:600; color:#666; text-align:center; background:#fff;}
.table-list td { padding:10px 0; border-bottom:solid 1px #dbdbdb; font-size:12px; color:#666;}
.table-list tr:hover td { background:#fafafa;}

.tbl_none { border-spacing:2px;}
.tbl_none tr:first-child th { border-top:solid 2px #777;}
.tbl_none .special th { border-top:solid 2px #fe0000; font-size:16px;}
.tbl_none .special th strong { font-size:20px;}
.tbl_none tr:first-child td { border-top:solid 2px #ffcc00;}
.tbl_none th { padding:10px 13px; border-bottom:1px solid #ddd; font-size:12px; font-weight:600; color:#4a4a4a; text-align:left; background:#fafafa;}
.tbl_none td { padding:10px 13px; border-left:1px dotted #ddd; border-bottom:1px solid #ddd; font-size:12px; color:#666;}
.tbl_none label { padding-left:10px;}
.tbl_none label:first-child { padding-left:0;}
.tbl_none label * { vertical-align:middle;}
.tbl_none .care { display:inline-block; padding:8px;}

.tbl_td_none { border-spacing:15px 5px; width:100%;}
.tbl_td_none th { padding:0; border:none; font-size:12px; color:#4a4a4a; text-align:left; background:none;}
.tbl_td_none td { padding:0; border:none; font-size:12px; color:#666; text-align:right; background:none;}
.tbl_td_none tr:first-child th { border:none;}
.tbl_td_none tr:first-child td { border:none;}

.bank_account { font-size:15px; padding:10px 0;}

.tbl_td_none { border-spacing:15px 5px; width:100%;}
.tbl_td_none th { padding:0; border:none; font-size:12px; color:#4a4a4a; text-align:left; background:none;}
.tbl_td_none td { padding:0; border:none; font-size:12px; color:#666; text-align:right; background:none;}
.tbl_td_none tr:first-child th { border:none;}
.tbl_td_none tr:first-child td { border:none;}


/*좌우 양쪽 스타일 프레임*/
.both-frame { width:100%; height:100%; position:relative;}
.both-frame > div { width:50%; height:100%; float:left; position:relative;}
.both-frame > div > .left-box { padding:20px; height:100%; margin:0 10px 0 auto; position:relative; border: #ddd 1px solid; overflow-y:scroll; overflow-x:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.both-frame > div > .right {height:100%; margin:0 auto 0 10px; position:relative;}

.right_form { width:48% !important; padding-left:2%;}
.main-chart {}
.main-chart .label { position:absolute; top:0; right:50px; height:35px; line-height:35px; color:#df2428; font-size:11px;}
.main-chart .left-chart {margin:0 20px 0 20px;}
.main-chart .right-chart {margin:0 0 0 40px;}
.main-chart .right-chart .label { right:30px;}

.copy { clear:both; position:relative; padding:20px 0 40px 0; background:#1b1f28; color:#fff; font-size:11px;}
.copy .to_top { position:absolute; width:50px; top:-30px; right:20px; z-index:10;}
.copy .to_top a { float:right; margin-top:10px; overflow:hidden; white-space:nowrap;}

.copy address { line-height:19px; text-align:center; color:#f3f3f3; font-size:14px; font-style:normal;}
.copy address a { color:#fff; opacity:0.7;}
.copy address a:hover { opacity:1;}
.copy .foot_btn { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #444;}
.copy .foot_btn a { margin:0 10px; color:#fff; opacity:0.7;}
.copy .foot_btn a:hover { opacity:1;}

/*부서+직위 트리*/
.dd-list { width:100%;}
.dd-list ul { display:block; width:100%;}
.dd-list li { position:relative; width:100%; display:block; clear:both; max-width:530px; margin:0 0 5px 0;}
.dd-list li a { display:block; border-radius:4px; padding:10px; border:1px solid #ddd; font-size:14px; color:#585858; *zoom:1;}
.dd-list li a:hover { background:#ddd;}
.dd-list li a:after { content:" "; display:block; clear:both;}
.dd-list li a * { vertical-align:middle;}
.dd-list .depth-1 { width:100%; max-width:510px; margin:0 0 5px 20px;}
.dd-list .depth-2 { width:100%; max-width:490px; margin:0 0 5px 40px;}
.dd-list .depth-3 { width:100%; max-width:470px; margin:0 0 5px 60px;}

.dd-list > li > span {line-height:40px;}
.dd-list > li > input.up {position:absolute; right:130px; top:10px;}
.dd-list > li > input.down {position:absolute; right:110px; top:10px;}
.dd-list > li > input.modify {position:absolute; right:50px; top:10px;}
.dd-list > li > input.remove {position:absolute; right:10px; top:10px;}

/* popup */
.popup_title { padding:20px 0; text-align:center; font-size:22px; color:#ffa800; font-weight:600; border-top:3px solid #ffa800; border-bottom:1px solid #888;}
.popup_content { padding:20px;}
.popup_content h2 { position:relative; padding:8px 0; font-size:18px; font-weight:600; color:#2b2829;}
.popup_content h2:before { position:absolute; content:""; display:block; width:20px; height:0; border-top:2px solid #ffa800; left:0; top:2px;}

/* Login */
#login_wrap { position:relative; width:100%; height:100%; min-height:760px; background:#373737 url(images/bg_login.png) no-repeat 50% -30%; border-top:2px solid #4a90e2; overflow-x:hidden;}
#login_wrap h1 { padding-top:50px; font-weight:400;}
#login_wrap .login_content { width:100%; max-width:600px; margin:0 auto;}
#login_wrap .login_form { padding-top:30px; text-align:center;}
#login_wrap .login_form input { color:#000;}
#login_wrap .login_footer { padding-top:50px; text-align:center; color:#fff; font-size:0.875em;}
#login_wrap .login_check { color:#fff; font-size:14px;}
#login_wrap .login_check i { display:inline-block; vertical-align:bottom; width:21px; height:21px; background:url(images/bg_check_off.png) no-repeat 0 50%;}
#login_wrap .login_check i input { display:none; vertical-align:middle;}
#login_wrap .login_check .on { background:url(image/bg_check_on.png) no-repeat 0 50%;}

#login_wrap .form { /* position:absolute; top:238px; left:0; right:0; opacity:0; */}

.input_id { vertical-align:middle; border-top-left-radius:10px; border-top-right-radius:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:60%; padding:15px; height:45px; border:none; font-size:0.938em; background:#fff; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1);}
.input_password { vertical-align:middle; border-bottom-left-radius:10px; border-bottom-right-radius:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:60%; padding:15px; height:45px; border:none; font-size:0.938em; background:#fff; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1);}


#copyright {width:370px; height:20px; position:absolute; z-index:1; bottom:30px; left:50%; margin-left:-185px; text-align:center; color:#fff;}

.top_info { *zoom:1;}
.top_info:after {content:" "; display:block; clear:both;}
.top_info li { float:left; width:33.333%; padding:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.top_info li div { background:#f6f6f6; border-radius:5px; padding:60px 15px 60px 135px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.top_info li div { font-size:20px; color:#7b7b7b;}
.top_info li div .count { display:inline-block; font-size:40px; color:#1c1c1c; margin-right:5px;}
.top_info li div .title { display:block; padding-top:10px;}
.top_info li div .title b { font-weight:normal;}
.top_info .license div { background:#f6f6f6 url(images/bg_lisence.png) no-repeat 0 50%;}
.top_info .oil_reduce div { background:#f6f6f6 url(images/bg_oil.png) no-repeat 0 50%;}
.top_info .ride_location div { background:#f6f6f6 url(images/bg_drive.png) no-repeat 0 50%;}

.graph { padding:20px 0; *zoom:1;}
.graph:after {content:" "; display:block; clear:both;}
.graph .month_oil { float:left; width:50%; padding:0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.graph .month_drive { float:left; width:50%; padding:0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.graph .bg_graph { position:relative; padding:20px 10px 20px 30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.graph .bg_graph .graph_x { position:absolute; bottom:0; right:-20px;}
.graph .bg_graph .graph_x span { display:inline-block; width:16.17%; padding:0; margin:0; text-align:center;}
.graph .bg_graph .graph_y { position:absolute; top:12px; left:0; text-align:right;}
.graph .bg_graph .graph_y li { height:35px; padding-right:10px;}
.graph .bg_graph table { border-top:1px solid #f0f0f0; border-left:1px solid #f0f0f0;}
.graph .bg_graph table td { border-right:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;}

.both-frame:after { display:block; content:""; clear:both;}
.block:after { display:block; content:""; clear:both;}
#contents:after { display:block; content:""; clear:both;}
.dummyCost { text-decoration:line-through; font-size:20px; font-weight:normal;}

header .btn_sitemap { display:none; position:absolute; top:15px; right:15px;}
.sitemap_over { position:fixed; top:0; right:-300px; width:300px; padding:15px; height:100%; background:#666; display:none; z-index:1000; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.sitemap_over.on { right:0; overflow-y:auto; -webkit-transition:all .2s linear; -ms-transition:all .2s linear; -o-transition:all .2s linear; transition:all .2s linear;}

header ul .btn_map_close { display:none;}
.sitemap_over .btn_map_close { display:block;}

/* media only screen and (max-width:1140px) */
@media only screen and (max-width:1140px) {
.block { width:100%; padding:0 15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
header .btn_close { right:15px;}

.top_info li { clear:both; width:100%; padding:10px;}

}

@media only screen and (max-width:800px) {
.none800 { display:none;}

header h1 { padding:15px 0 13px 0; height:31px; text-align:center;}
header h1 img { max-height:31px; width:auto;}
header .btn_close { left:15px; right:auto;}
header .btn_sitemap { display:block; width:31px; height:31px;}
header .btn_sitemap img { width:100%;}
header ul { display:none;}
.cord_detail { display:none !important;}

.main-chart.w50 { clear:both; width:100%; float:right; margin-top:20px;}
.main-chart.w50 .right-chart { padding:0 20px; margin:0;}

.sitemap_navi { padding:110px 20px 40px 20px;}
.sitemap_navi:after { content:""; display:block; clear:both;}
.sitemap_over li { display:block; clear:both; width:100%; padding:5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.sitemap_over a { text-align:center; padding:10px 20px; display:block; color:#ffcc00; border:1px solid #ffcc00;}
.sitemap_over a:hover { color:#444; background:#ffcc00; -webkit-border-radius:0; border-radius:0;}
.sitemap_over .on a,
.sitemap_over .on a:hover { display:block; color:#444; background:#ffcc00; border:1px solid #ffcc00; -webkit-border-radius:0; border-radius:0;}

.sitemap_over .btn_map_close { color:#444; background:#ffa800; border:1px solid #ffa800;}
.sitemap_dep2 li a { display:block; padding:10px 0 10px 30px; margin-bottom:8px; border:solid 1px #ad92a6; font-size:14px; background:#5b254d; color:#d7cfd4; letter-spacing:-0.05em;}
}

@media only screen and (max-width:600px) {
.none600 { display:none;}
/*
.tbl_none th, .tbl_none td { clear:both; display:block; border-left:none !important;}
.tbl_none td { border-top:none !important;}
.tbl_none .special th:after { display:block; clear:both; content:"";}
*/
#contents { width:100%; min-height:400px; position:relative; padding:230px 0 30px 0; z-index:10; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.both-frame { height:auto;}
.btn_guide { padding:9px 15px; text-align:center;}
.expire { display:block; text-align:center; width:100%;}

.both-frame > div { clear:both; width:100%;}
.right_form { margin-top:20px; width:100% !important; margin-bottom:20px; padding-left:0;}

.btn_guide .f_right { width:100%; padding-bottom:10px;}
/*
.line_app .btn_guide a,
.line_app .btn_guide span { display:none;}*/
}

@media only screen and (max-width:480px) {

header h1 { height:31px; text-align:center;}
header h1 img { max-height:31px; width:auto;}

/* header */
#header h1 { width:292px; margin:20px auto;}

.list-frame ul.pagination li { margin:2px;}
.list-frame ul.pagination li a { display:block; min-width:15px; padding:1px 0 0 0;}
.list-frame ul.pagination .active a { color:#fff; padding:2px 1px 1px 1px; border:none; background:#3ea3dc; text-decoration:underline; cursor:default;}

.none480 { display:none;}

.btn_big { padding:15px 0; width:25%; text-align:center;}
}

@media all and (orientation: portrait) {

}