@charset "UTF-8";

html,body {height: 100%; }
body {background-color:#f3f3f3;}

/*로그인*/
#l_wrap{ width: 100vw;height: 100vh;text-align: center;vertical-align: middle; display: table-cell; background: #f2f2f2;}
#login_bg{position:relative;display:inline-block; width: 900px;height: 730px; background:url('../../images/img/login_bg.jpg')no-repeat;}
.login_box{position:absolute; top:190px; left:180px;width:560px; height:380px; margin:0 auto; }
.login_bottom{position:absolute; top:586px; left:210px;width:500px;}
.login_bottom li{float:left;padding:10px;}
.login_input{width:350px; margin:0 auto; margin-top:70px;}
/*메인 전체 layout*/
#wrap{padding-left:114px;}
#gnb{position: fixed; top:0; left:0; bottom:0; z-index:1000; width:114px; height:100%; background-color: #3b3b3d;}
#header{position:relative; z-index:10;  }
#container{width:97%;margin:0 auto; box-sizing: border-box;}
#contents01{height:310px;width:100%; margin-top:30px;}
#contents02{width:100%; margin-top:20px;}


/*GNB*/
#gnb li{width:114px; height:160px; font-size:16px; display:block; text-align:center; border-bottom:solid 1px #737373;border-top:solid 1px #222;}
#gnb li a{color:#c1c1c1;}
#gnb li a.on{color:#f8da63;}
#gnb li a:hover{color:#f8da63;}

#gnb li .menu01{display:block; width:114px; height:110px; background: url('../../images/icon/menu_icon01.png') no-repeat center center;}
#gnb li .menu01:hover{ background: url('../../images/icon/menu_icon01_on.png') no-repeat center center;}
#gnb li .menu01.on{ background: url('../../images/icon/menu_icon01_on.png') no-repeat center center;}
#gnb li .menu02{display:block; width:114px; height:110px; background: url('../../images/icon/menu_icon02.png') no-repeat center center;}
#gnb li .menu02:hover{ background: url('../../images/icon/menu_icon02_on.png') no-repeat center center;}
#gnb li .menu02.on{ background: url('../../images/icon/menu_icon02_on.png') no-repeat center center;}
#gnb li .menu03{display:block; width:114px; height:110px; background: url('../../images/icon/menu_icon03.png') no-repeat center center;}
#gnb li .menu03:hover{ background: url('../../images/icon/menu_icon03_on.png') no-repeat center center;}
#gnb li .menu03.on{ background: url('../../images/icon/menu_icon03_on.png') no-repeat center center;}
#gnb li .menu04{display:block; width:114px; height:110px; background: url('../../images/icon/menu_icon04.png') no-repeat center center;}
#gnb li .menu04:hover{ background: url('../../images/icon/menu_icon04_on.png') no-repeat center center;}
#gnb li .menu04.on{ background: url('../../images/icon/menu_icon04_on.png') no-repeat center center;}

#gnb li.chart_m{background-color: #1b1b1b; border:none; padding-top:14px; box-sizing: border-box;}
#gnb ul li ul li {color:#969696; margin-left:20px; height:26px; line-height: 26px; text-align: left; font-size:14px; border:none;}
#gnb ul li ul li a{color:#969696;}
#gnb ul li ul li a:hover{text-decoration: underline; color:#fff;}
#gnb ul li.chart_m ul li a.on{text-decoration: underline; color:#fff;}

/*head*/
#head{position:relative; background-color: #07182a; border-radius: 0 0 10px 10px; height:70px;}
#head h1{color:#fff;font-size:24px;padding:20px 0 0 30px;}
#head h1 a{color:#fff;font-size:24px;}
#head .h_right{position: absolute; top:25px; right:30px;}
#head .h_right li{display: inline; font-size:16px; color:#eee; margin-right: 10px;}
#head .h_right li a{color:#bfc1c3; border:1px solid #bfc1c3; padding:3px 15px;}
#head .user:before{content:'';display:inline-block; width:25px; height:22px; background: url('../../images/icon/user_icon.png') 0 0 no-repeat;vertical-align:middle;}

/*contents box layout*/
.c_box{border-radius: 20px; border:1px solid #ccc; background-color: #fff; box-shadow:1px 1px 2px 0 rgba(0,0,0,.1); padding:30px; box-sizing:border-box; }
.cont01{float:left; width:45%; height:300px;}
.cont02{float:right; width:53%; height:300px;}
.cont03{width:100%; }
.c_box h2{font-size:24px; font-family: 'NanumSquare'; }

/*box1*/
#contents01 .cont01_inner{position:relative; width:555px; height:200px; margin:0 auto; padding-top:20px;}
#contents01 .graph01{position:relative;width:400px; height:180px; background: url('../../images/img/graph_01.jpg') no-repeat center center;}
#contents01 .graph01 span{position:absolute; font-size:14px;}
#contents01 .graph01 span.testcars{top:30px;right:25px;}
#contents01 .graph01 span.testgroup{top:80px; left:-10px;}
#contents01 .graph01 span.carsharing{bottom:0;right:50px;}
#contents01 .cont01_t{position:absolute; top:90px; right:0; font-size: 14px; line-height: 20px;}
#contents01 .cont01_t .tc:before{content:'';display:inline-block; width:13px; height:13px; background-color: #ffd54e; margin-right: 10px;}
#contents01 .cont01_t .tg:before{content:'';display:inline-block; width:13px; height:13px; background-color: #347799; margin-right: 10px;}
#contents01 .cont01_t .csh:before{content:'';display:inline-block; width:13px; height:13px; background-color: #db790f; margin-right: 10px;}

/*box2*/
#contents01 .cont02 ul{ margin-top: 20px; }
#contents01 .cont02 ul li{float:left; width:25%; box-sizing:border-box; }
#contents01 .cont02 ul li ul.s_box{width:160px; margin:0 auto;}
#contents01 .cont02 ul li ul li{text-align: center; font-size:14px; width:160px; margin:10px auto;}
#contents01 .cont02 ul li.box{width:160px; height:160px; border-radius: 100px;line-height: 150px; font-size:40px; margin:0 auto;}
#contents01 .cont02 ul li.testcars{ border:solid 8px #ffd54e; }
#contents01 .cont02 ul li.testgroup{border:solid 8px #347799;}
#contents01 .cont02 ul li.carsharing{ border:solid 8px #db790f;}
#contents01 .cont02 ul li.cartotal{border:solid 8px #666;}
#contents01 .cont02 ul li span.t_small{font-size:12px;}

/*box3*/
#contents02 .cont03 ul{height:400px; margin:20px 0 0 20px;}
#contents02 .cont03 ul li{float:left;}
#contents02 .cont03 ul li.s_box{width:18.5%; height:160px; margin:20px 8px; border-radius: 20px; border:1px solid #008092; box-sizing:border-box;}
#contents02 .cont03 ul li ul{width:90%; height: 180px;  margin:-20px auto; }
#contents02 .cont03 ul li ul li.box_tit{ margin:0 auto; width:100%; height:40px;background-color:#008092; border-radius: 20px; text-align:center; font-size:18px; color:#fff;line-height: 40px; }
#contents02 .cont03 ul li ul li.imgbox{text-align: center; width:100%; margin-top: 20px;}
#contents02 .cont03 ul li ul li.imgbox img{width:100%;}
@media screen and ( min-width:1900px ) {
#contents02 .cont03 ul li ul li.imgbox img{width:272px;}	
}
#contents02 .cont03 ul li ul li.dot_line{width:100%; height:50px;}
#contents02 .cont03 ul li ul li.dot_line ul{ width:94%;height:46px; margin:20px auto; border-bottom:dotted 1px #333; }
#contents02 .cont03 ul li ul li.dot_line ul li{text-align:right;}
#contents02 .cont03 .dot_line .txt01{width:46%; line-height: 18px;letter-spacing: -1px;}
#contents02 .cont03 .dot_line .txt01 span{color:#666;}
#contents02 .cont03 .dot_line .txt02{width:42%; line-height: 40px; font-size:24px;color:#1c67e4;letter-spacing: -1px;}
#contents02 .cont03 .dot_line .txt03{width:12%; line-height: 40px;}

#contents02 .cont03 .last_line{width:100%; height:50px; margin-top:35px;}
#contents02 .cont03 .last_line ul{width:94%;height:46px; margin:0 auto;  }
#contents02 .cont03 .last_line li{text-align:right; line-height: 40px;}
#contents02 .cont03 .last_line .txt01{width:46%; letter-spacing: -1px;}
#contents02 .cont03 .last_line .txt01 span{color:#666;}
#contents02 .cont03 .last_line .txt02{width:42%; font-size:24px; color:#db790f;letter-spacing: -1px;}
#contents02 .cont03 .last_line .txt03{width:12%; }


@media screen and ( min-width:799px ) and ( max-width:1600px ) {
/*box1*/
#contents01 .cont01_inner{width:86%; height:170px;  padding-top:40px; }
#contents01 .graph01{width:300px; height:135px; background-size:80%;}
#contents01 .graph01 span.testcars{top:20px;right:-10px;}
#contents01 .graph01 span.testgroup{top:60px; left:-40px;}
#contents01 .graph01 span.carsharing{bottom:0;right:10px;}
#contents01 .cont01_t{top:90px; }

/*box2*/
#contents01 .cont02 ul{ margin-top: 30px; }
#contents01 .cont02 ul li ul.s_box{width:120px;}
#contents01 .cont02 ul li ul li{width:130px;}
#contents01 .cont02 ul li.box{width:130px; height:130px;line-height: 116px; font-size:36px; }

/*box3*/
#contents02 .cont03 ul li.s_box{width:18%;}
#contents02 .cont03 ul li ul{width:96%; }

#contents02 .cont03 .dot_line .txt01{width:51%; line-height: 14px;}
#contents02 .cont03 .dot_line .txt02{width:36%; font-size:20px;}
#contents02 .cont03 .dot_line .txt03{width:13%;}

#contents02 .cont03 .last_line .txt01{width:51%; }
#contents02 .cont03 .last_line .txt02{width:36%; font-size:20px;}
#contents02 .cont03 .last_line .txt03{width:13%; }

}


/*서브 페이지 layout*/
.search{position:relative; position: fixed; top:0; left:114px; bottom:0; z-index:100; height:100%; width:330px; background: #fff; border-right:1px solid #b7c0cf;}
.search2{position:relative; position: fixed; top:0; left:-214px; bottom:0; z-index:100; height:100%; width:330px; background: #f2f3f4;}
.search_close{ position: absolute; top:50%; right:-17px; width:15px; height:70px;display: block; color:#ccc; font-weight: 700; line-height:70px; text-align:center; background: #fff; border-radius: 0 5px 5px 0; border:1px solid #b7c0cf; z-index:-999;}
.search_open{ position: absolute; top:50%; right:-15px; width:15px; height:70px;display: block; color:#ccc; font-weight: 700; line-height:70px; text-align:center; background: #fff; border-radius: 0 5px 5px 0; border:1px solid #b7c0cf; z-index:-999;}

.cont_inner{padding-left:330px;}
.cont_inner2{padding-left:0;}
.btn_area{position:relative; width:100%; height:80px; }
.sub_contbox{min-height:740px; border-radius:5px;background: #989387; border:1px solid #b7c0cf; background: #fff; padding:30px 50px; margin-bottom:30px;box-shadow:1px 1px 2px 0 rgba(0,0,0,.1);}
.sub_contbox_map{position:relative; min-height:740px; border-radius:5px;background: #989387; border:1px solid #b7c0cf; background: #fff; margin-bottom:30px;box-shadow:1px 1px 2px 0 rgba(0,0,0,.1);}
.sub_contbox_dd{position:relative; min-height:800px; border-radius:5px;background: #989387; border:1px solid #b7c0cf; background: #fff;  padding:30px 50px; margin:30px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.1);}

/*관제현황*/

/*왼쪽검색박스*/
.sear_top{padding:0 20px; height:210px;background: #f8f8f8; border-bottom:1px solid #b7c0cf; }
.sear_bottom{padding:20px; min-height:580px; height:100%; }
.sear_bottom h3{font-size:14px; line-height: 30px;}

.sticky {
  position: fixed;
  top: 0;
  width: 330px;
}

.sticky + .sear_bottom {
  padding-top: 260px;
}

/*탭*/
.btn_tab_txt{padding:20px;background: #f8f8f8; }
.btn_tab_txt ul {overflow:hidden;}
.btn_tab_txt ul li {float:left; width:50%; height:50px; border:1px solid #b7c0cf; box-shadow:1px 1px 2px 0 rgba(0,0,0,.1); box-sizing: border-box; background:linear-gradient(to top,#d9dfe8 ,#cfd7e2); }
.btn_tab_txt ul li.on {background:linear-gradient(to top,#dce2eb ,#e9edf3); border:1px solid #b7c0cf; box-sizing: border-box; }
.btn_tab_txt ul li a {display:block; color:#919daa; font-size:18px; line-height:48px;text-align:center;}
.btn_tab_txt ul li.on a {color:#07182a; font-size:18px; line-height:48px;}
.tab_contents{display:none;}
.tab_contents.on{display:block;}

/*btn area*/
.btn_area .map_data{position:absolute; left:0; bottom:5px;}
.btn_area ul.driving_info {float:right; margin:40px 30px 0 0; }
.btn_area .driving_info li{float:left; padding:5px; font-size:14px; }
.btn_area .driving_info{}
.btn_area ul.btn_total{float:right; margin-top:30px;}
.btn_area .btn_total li{float:left;}

/*관제현황 박스*/
.sub_contbox h3{height:30px; line-height: 30px; font-size:16px; margin-bottom:10px; }

/*주행정보 풍선*/
.driving_infobox{position: absolute; top:110px; left:650px; width:300px; height:267px; box-shadow:2px 2px 3px 0 rgba(0,0,0,.3);}
.driving_infobox p.top, .driving_infobox p.bottom{position:relative;height:34px; line-height:34px; color:#fff; text-align:center; font-size:14px; background-color: #000; }
.driving_infobox p.top{border-radius:5px 5px 0 0;}
.driving_infobox p.top span, .driving_infobox p.bottom span{position:absolute; top:0; right:10px;}
.driving_infobox p.bottom{border-radius: 0 0 5px 5px;}
.driving_infobox p.bottom:after{position:absolute; bottom:-15px; left:50%; margin-left:-5px; content: ''; display: block;  width: 0;  height: 0;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-top: 15px solid black; }
.driving_infobox div.info_cont{width:100%; height: 200px; background-color: #fff; border:1px solid #000; box-sizing: border-box; letter-spacing: -0.7px;}
.driving_infobox div.info_cont dl{width:80%; margin:10px auto;}
.driving_infobox div.info_cont dt{width:60px; float:left; font-weight: bold;}
.driving_infobox div.info_cont dt, dd{line-height:26px;}

/*주행정보 풍선2*/
.driving_infobox2{position: absolute; top:110px; left:250px; width:300px; height:167px; box-shadow:2px 2px 3px 0 rgba(0,0,0,.3);}
.driving_infobox2 p.top, .driving_infobox2 p.bottom{position:relative;height:34px; line-height:34px; color:#fff; text-align:center; font-size:14px; background-color: #000; }
.driving_infobox2 p.top{border-radius:5px 5px 0 0;}
.driving_infobox2 p.top span, .driving_infobox2 p.bottom span{position:absolute; top:0; right:10px;}
.driving_infobox2 p.bottom{border-radius: 0 0 5px 5px;}
.driving_infobox2 p.bottom:after{position:absolute; bottom:-15px; left:50%; margin-left:-5px; content: ''; display: block;  width: 0;  height: 0;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-top: 15px solid black; }
.driving_infobox2 div.info_cont{width:100%; height: 100px; background-color: #fff; border:1px solid #000; box-sizing: border-box; letter-spacing: -0.7px;}
.driving_infobox2 div.info_cont dl{width:80%; margin:10px auto;}
.driving_infobox2 div.info_cont dt{width:60px; float:left; font-weight: bold;}
.driving_infobox2 div.info_cont dt, dd{line-height:26px;}


/*날씨박스*/
.weather_box{position:absolute; bottom:10px; left:10px; padding:10px 20px; width:230px; height:220px; border:1px solid black; background-color: #fff; box-sizing: border-box;}
.weather_box p.top{ text-indent:3px;height:34px;line-height: 30px; border-bottom:1px dotted #666; font-size:16px; }
.weather_box p.top .fa-compress{color:#666; float:right;height:30px;}
.weather_box .w_cont{position:relative; width:75%; margin:20px auto;}

.weather_box .temperature {position: absolute; top:7px; right:3px; font-size:60px; line-height: 60px; letter-spacing: -2.0px;}
.weather_box .celsius{position: absolute; top:7px; right:-5px;}
.weather_box .w_info{line-height: 18px; font-size:13px; }

.weather_box2{position:absolute; bottom:10px; left:10px; padding:2px 5px; width:60px; height:34px; border:1px solid black; background-color: #fff; box-sizing: border-box;}
.weather_box2 p.top{height:34px;line-height: 30px; font-size:16px; }
.weather_box2 p.top .fa-expand-arrows-alt{color:#666; height:30px; float:right;}

.sub_contbox_map span.icon_car{position: absolute; top:400px; left:735px;}

/*운행일지*/
.id_search h3{margin:10px 15px 10px 0; font-size:14px; display:inline-block;}
.id_selectbox{width:100%; height:110px; overflow-y:scroll; border:1px solid #d9e1e8; padding:10px 10px 10px 20px; box-sizing: border-box;}
.id_selectbox li {width: 176px; height:30px; line-height: 30px; float: left; }
.sbox_wrap {display:inline-block;  margin}
.sbox_wrap input{vertical-align:middle;}
.sbox_wrap label {color:#666; font-size:14px;line-height:14px;}

.table_num{line-height:30px; text-align:left;}

/*트립정보*/
.trip_infobox{position:relative; margin:80px 0 30px 0;min-height:800px; background: #fff; border:1px solid #b7c0cf; padding:20px 30px;box-sizing: border-box;}
.trip_infobox h3{line-height: 40px; font-size:14px; margin-top:20px; }
.tch3_only{font-size:14px; margin-top:31px; line-height: 14px;}
.trip_infobox h4{line-height: 30px; font-size:13px; margin-top:20px; }

.table_iconbox01{width:49%; float:left; display: inline-block;}
.table_iconbox02{width:49%; float:right; display: inline-block;}
.table_iconbox03{width:100%; clear:both; display: inline-block;}

/*탭*/
.trip_tab_txt{position:absolute; top:-50px; left:-1px;}
.trip_tab_txt ul {overflow:hidden;}
.trip_tab_txt ul li {float:left; width:200px; height:50px; background: #008092; border-bottom:none; box-sizing: border-box; }
.trip_tab_txt ul li.on {font-weight: bold; border:1px solid #b7c0cf; background:#fff; border-bottom:none; box-sizing: border-box; }
.trip_tab_txt ul li a {display:block; color:#fff; font-size:16px; line-height:48px;text-align:center;}
.trip_tab_txt ul li.on a {color:#008092; font-size:16px; line-height:48px;}
.tab_contents{display:none;}
.tab_contents.on{display:block;}

/*날씨*/
.sub_contbox_dd h3{line-height: 40px; font-size:14px; margin-top:20px; }

/*통계*/
.picto_r{width:100%;height:14px; display: block; text-align: right; margin: 20px 0;}
.pictogram_box{width:40%; height:350px; float:left; margin-bottom: 30px;}

.picto_r span{width:10px; height:10px;display:inline-block; }
.manbox{background: #b4d239; margin-right: 3px;}
.womanbox{background: #f7b43b; margin:0 3px 0 10px; }

.year20{background: #9bb5ea; margin-right: 3px;}
.year30{display:inline-block; background: #95d6d2; margin:0 3px 0 10px; }
.year40{display:inline-block; background: #f4afc6; margin:0 3px 0 10px;}
.year50{display:inline-block; background: #f2cf54; margin:0 3px 0 10px;}

.graph_box{width:60%; height:350px; box-sizing:border-box; border:1px solid #e3e3e3;float:right;margin-bottom: 30px;}
.graph_box2{width:60%; height:350px; box-sizing:border-box; border:1px solid #e3e3e3;float:right;margin-bottom: 30px;}

.picto_tit{width:200px; float:left; line-height: 30px; font-size:16px;}
.picto_tit2{width:200px; line-height: 30px; font-size:16px; margin-bottom: 30px;}
.picto_tit3{width:200px; line-height: 30px; font-size:16px; }

.man_picto{width:133px;float:left; text-align: center; }
.woman_picto{width:133px;float:left;text-align: center; margin-left: 50PX;}
.mileage_picto{ width:170px;float:left; text-align: center; margin-top: 50px; }
.mileage2_picto{ width:170px;float:left; text-align: center; margin-top: 50px; }
.year20_picto{width:109px; float:left; text-align: center; margin-right: 10px;}
.year30_picto{width:109px; float:left; text-align: center; margin-right: 10px;}
.year40_picto{width:109px; float:left; text-align: center; margin-right: 10px;}
.year50_picto{width:109px; float:left; text-align: center; }
.yearmileage_picto{ width:109px;float:left; text-align: center; margin-right: 10px; }
.yearmileage_picto:nth-child(4){margin-right:0;}
.picto_center{margin:0 auto; width:470px;}
.picto_center2{margin:0 auto; width:370px;}

@media screen and ( min-width:799px ) and ( max-width:1600px ) {
	.pictogram_box{width:45%;}
	.graph_box{width:55%;}
	.picto_tit{width:120px;}
	.woman_picto{margin-left: 10PX;}	
}
.pictogram_box span{display:inline-block; }
.pictogram_box4 span{display:inline-block; }
span.img_10{ width: 50%; height:50%; }
span.img_20{ width: 55%; height:55%; }
span.img_30{ width: 60%; height:60%; }
span.img_40{ width: 65%; height:65%; }
span.img_50{ width: 70%; height:70%; }
span.img_60{ width: 75%; height:75%; }
span.img_70{ width: 80%; height:80%; }
span.img_80{ width: 85%; height:85%; }
span.img_90{ width: 90%; height:90%; }
span.img_100{ width: 100%; height:100%; }

.balloon{width:133px; height:68px; line-height:44px; color:#fff; font-size:16px; background:url('../../images/img/balloon.png') no-repeat center center;}
.balloon2{width:102px; height:68px; line-height:44px; color:#fff; font-size:16px; background:url('../../images/img/balloon2.png') no-repeat center center;}

.mileage_picto .balloon{width: 160px;}
.mileage2_picto .balloon{width: 140px; margin-bottom: 20px;}
.percentage{font-size:14px; line-height:28px;}
.gender{font-size:14px; line-height:28px;}


.man_back{width: 133px; height: 239px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/man_back.png') no-repeat center center;}
span.man_g{background:url('../../images/img/man_picto.png') no-repeat center center; background-size:100%; }

.woman_back{width: 133px; height: 239px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/woman_back.png') no-repeat center center;}
span.woman_o{background:url('../../images/img/woman_picto.png') no-repeat center center; background-size:100%; }

.mileage_back{width: 160px; height: 165px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/mileage_back.png') no-repeat center center;}
span.mileage_g{background:url('../../images/img/mileage_m.png') no-repeat center center; background-size:100%; }
span.mileage_o{background:url('../../images/img/mileage_w.png') no-repeat center center; background-size:100%; }

.mileage2_back{width: 140px; height: 147px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/mileage2_back.png') no-repeat center center;}
span.mileage2_g{background:url('../../images/img/mileage2_m.png') no-repeat center center; background-size:100%; }
span.mileage2_o{background:url('../../images/img/mileage2_w.png') no-repeat center center; background-size:100%; }

.year20_back{width: 106px; height: 146px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/20year_back.png') no-repeat center center;background-size:90%;}
span.year20_p{background:url('../../images/img/20year_p.png') no-repeat center center; background-size:100%; }
.year30_back{width: 108px; height: 146px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/30year_back.png') no-repeat center center;background-size:90%;}
span.year30_p{background:url('../../images/img/30year_p.png') no-repeat center center; background-size:100%; }
.year40_back{width: 109px; height: 146px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/40year_back.png') no-repeat center center;background-size:90%;}
span.year40_p{background:url('../../images/img/40year_p.png') no-repeat center center; background-size:100%; }
.year50_back{width: 105px; height: 146px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/50year_back.png') no-repeat center center;background-size:90%;}
span.year50_p{background:url('../../images/img/50year_p.png') no-repeat center center; background-size:100%; }

.yearmileage_back{width: 106px; height: 134px; padding-top:7px;vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/yearmileage_back.png') no-repeat center center;}
span.yearmileage20_p{background:url('../../images/img/yearmileage20_p.png') no-repeat center center; background-size:100%; }
span.yearmileage30_p{background:url('../../images/img/yearmileage30_p.png') no-repeat center center; background-size:100%; }
span.yearmileage40_p{background:url('../../images/img/yearmileage40_p.png') no-repeat center center; background-size:100%; }
span.yearmileage50_p{background:url('../../images/img/yearmileage50_p.png') no-repeat center center; background-size:100%; }

.yearmileage2_back{width: 109px; height: 146px; padding-top:7px; vertical-align: bottom;display: table-cell; text-align: center; background:url('../../images/img/yearmileage2_back.png') no-repeat center center;}
span.yearmileage2_p20{background:url('../../images/img/yearmileage2_p20.png') no-repeat center center; background-size:100%; }
span.yearmileage2_p30{background:url('../../images/img/yearmileage2_p30.png') no-repeat center center; background-size:100%; }
span.yearmileage2_p40{background:url('../../images/img/yearmileage2_p40.png') no-repeat center center; background-size:100%; }
span.yearmileage2_p50{background:url('../../images/img/yearmileage2_p50.png') no-repeat center center; background-size:100%; }

/*통계 - 사용자별-테이블은 common.css*/
.pictogram_box3{width:40%; height:450px; float:left; margin-bottom: 30px;}
.chart_mapbox{width:400px; height:450px; margin:0 auto; background:url('../../images/img/chart_map.png') no-repeat center center; }
.chart_tablebox{width:60%; margin-top:50px;box-sizing:border-box; border-top:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-left:1px solid #e3e3e3;float:right;margin-bottom: 30px;}

.chart_mapbox .balloon{width:72px; height:41px; line-height:28px; color:#fff; font-size:12px; background:url('../../images/img/balloon3.png') no-repeat center center;}
.chart_mapbox .percentage{font-weight: 700; line-height: 16px; font-size:12px;}
.chart_mapbox .area{border-radius: 100px; line-height:28px;background: #bbb; font-size:11px;color:#fff; width:28px; height:28px; margin:0 auto;}

.chart_mapbox{position:relative;}
.seoul{position:absolute; top:55px; left:70px;text-align: center; width:80px; height:50px;}
.gyeonggi{position:absolute; top:88px; left:124px;text-align: center; width:80px; height:50px;}
.gangwon{position:absolute; top:45px; left:200px;text-align: center; width:80px; height:50px;}
.chungbuk{position:absolute; top:180px; left:150px;text-align: center; width:80px; height:50px;}
.chungnam{position:absolute; top:160px; left:54px;text-align: center; width:80px; height:50px;}
.gyeongbuk{position:absolute; top:190px; left:244px;text-align: center; width:80px; height:50px;}
.gyeongnam{position:absolute; top:285px; left:204px;text-align: center; width:80px; height:50px;}
.jeonbuk{position:absolute; top:250px; left:100px;text-align: center; width:80px; height:50px;}
.jeonnam{position:absolute; top:320px; left:54px;text-align: center; width:80px; height:50px;}


/*통계 - 차종별*/
.pictogram_box4{width:100%; }
.car_graph{width:100%; height:350px; margin:0 auto; box-sizing:border-box; border:1px solid #e3e3e3;}
.car_tablebox{width:100%; margin-top:30px;box-sizing:border-box; border-top:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-left:1px solid #e3e3e3;float:right;margin-bottom: 30px;}

.car_mileagebox{width:100%; text-align: center;margin-top:30px;}
.car_mileageback{width: 120px; height: 115px;vertical-align:bottom; display: table-cell;  background:url('../../images/img/car_mileageback.png') no-repeat center center;}
.car_mileagecar{background:url('../../images/img/car_mileagecar.png') no-repeat left bottom; background-size:100%;}
.carmodel{width:100px; line-height:30px;text-align: center;font-size:14px; line-height:28px; }
.road_back{ width:100%;height:26px; display:inline-block; background:url('../../images/img/road_back.png') repeat center center;}
.car_object{width:120px; height:66px; background:url('../../images/img/car_object.png') no-repeat}
.car_mileagebox .percentage{font-size:14px; line-height:28px;width:100px;text-align: center; }
.car_flag{width: 53px; height: 155px;display:inline-block;  background:url('../../images/img/car_flag.png') no-repeat  bottom;}

/*유종별*/
.oil_p01{background:url('../../images/img/oil_p01.png') no-repeat left bottom; background-size:100%; }
.oil_p02{background:url('../../images/img/oil_p02.png') no-repeat left bottom; background-size:100%; }
.oil_p03{background:url('../../images/img/oil_p03.png') no-repeat left bottom; background-size:100%; }