@charset "utf-8";

.wrapper{position:relative;width:1280px;height:800px;overflow:hidden;margin:0 auto;}
.wrapper h1{bottom:30px;left:50%;margin-left:-70px;position:absolute;width:140px;height:auto;overflow:hidden;}
.wrapper h1 img{width:100%;}
.wrapper .btnComm{position:absolute;right:50px;top:50px;width:50px;height:50px;overflow:hidden;display:block;}
.wrapper .btnSetting{position:absolute;right:50px;bottom:50px;width:50px;height:50px;overflow:hidden;display:block;}
.wrapper .btnComm img,
.wrapper .btnSetting img{width:100%}
.wrapper .mapArea{width:1280px;height:800px;overflow:hidden;background:url(../images/bg_map.jpg) no-repeat left top;background-size:cover;}
.wrapper .panel{position:absolute;top:50%;left:50%;margin:-327px 0 0 -558px;width:1115px;height:654px;overflow:hidden;background:url(../images/bg_line.png) no-repeat left top;background-size:cover;}
.wrapper .panel .rela{position:relative;width:1115px;height:654px;overflow:hidden;}

.directionBox{width:220px;height:auto;overflow:hidden;position:absolute;left:50%;top:30px;margin-left:-110px;}
.directionBox .direcLeft{margin-top:18px;position:relative;float:left;width:30px;height:30px;overflow:hidden;}
.directionBox .direcLeft img{width:30px;height:30px;}
.directionBox .direcLeft.on:before ,
.directionBox .direcLeft:active:before{content:"";width:30px;height:30px;display:block;background:url(../images/ico_direcLeft_on.png) no-repeat;background-size:30px 30px;}
.directionBox .status{margin-left:48px;position:relative;width:70px;height:70px;overflow:hidden;display:block;float:left;}
.directionBox .status img{width:70px;height:70px;}
.directionBox .status.on:before{position:absolute;left:0;top:0;content:"";width:70px;height:70px;display:block;background:url(../images/ico_status_on.png) no-repeat;background-size:70px 70px;}
.directionBox .direcRight{margin-top:18px;position:relative;float:right;width:30px;height:30px;overflow:hidden;}
.directionBox .direcRight img{width:30px;height:30px;}
.directionBox .direcRight.on:before,
.directionBox .direcRight:active:before{content:"";width:30px;height:30px;display:block;background:url(../images/ico_direcRight_on.png) no-repeat;background-size:30px 30px;}

.speedBox{width:200px;height:auto;overflow:hidden;position:absolute;left:10px;top:150px;}
.speedBox .kmBox{margin-left:15px;font-family: 'Rajdhani';width:100%;height:auto;overflow:hidden;font-size:21px;color:#fff;}
.speedBox .kmBox strong{font-family: 'Rajdhani';font-size:75px;color:#fff;}
.speedBox .gageBar{margin-left:25px;position:relative;width:50px;height:206px;overflow:hidden;background:url(../images/bg_gageBar.png) no-repeat;background-size:cover;}
.speedBox .gageBar .gageItem{position:relative;width:12px;margin-top:6px;height:195px;overflow:hidden;}
.speedBox .gageBar span{position:absolute;left:0;display:block;bottom:0;width:12px;background-image: linear-gradient(#64de93, #2a7af3);}
.speedBox .rpmBox{width:100%;height:auto;overflow:hidden;position:relative;}
.speedBox .rpmBox .pieBox{width:70px;height:70px;float:left;overflow:hidden;}
.speedBox .rpmBox .tit{width:70px;text-align:center;display:block;position:absolute;left:0;top:28px;font-size:12px;color:#fff;}
.speedBox .rpmBox .value{font-family:'Myriad Pro';float:left;height:70px;line-height:70px;font-size:17px;color:#fff;margin-left:0px;}

.etcBox{position:absolute;right:10px;top:50px;}
.etcBox .date{font-size:15px;color:#fff;font-family:'Myriad Pro';}
.etcBox .time{font-family:'Myriad Pro';font-size:12px;color:#fff;}
.etcBox .time strong{font-weight:normal;font-size:20px;color:#fff;}
.etcBox ul{float:left;margin-top:10px;}
.etcBox ul li{float:left;margin:10px 10px 0 0;}
.etcBox ul li span{display:block;width:30px;height:30px;overflow:hidden;}
.etcBox ul li .ico01{background:url(../images/ico_signalList01.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico02{background:url(../images/ico_signalList01.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico03{background:url(../images/ico_signalList02.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico04{background:url(../images/ico_signalList01.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico01.on{background:url(../images/ico_signalList03.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico02{}
.etcBox ul li .ico03.on{background:url(../images/ico_signalList03.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico04.on{background:url(../images/ico_signalList04.png) no-repeat;background-size:30px 30px;}

.warningBox{width:360px;height:auto;overflow:hidden;position:absolute;left:50%;top:140px;margin-left:-180px;}
.warningBox .stsItem{width:100%;height:auto;overflow:hidden;position:relative;}
.warningBox .stsItem .icoLeft{padding-left:15px;width:56px;height:15px;overflow:hidden;display:block;position:absolute;left:0;top:20px;}
.warningBox .stsItem .icoLeft:after{background:url(../images/ico_animateLeft.png) repeat-x;background-size:56px 15px;opacity:1; content:""; width:56px; height:15px; display:block; position:absolute; right:0; top:0;   animation: arrLeft .5s linear infinite; }
.warningBox .stsItem .msg{margin:0 auto;font-family:'NanumSquare';font-size:27px;color:#fff;width:180px;height:auto ;overflow:hidden;text-align:center;color:#fff;}
.warningBox .stsItem .icoRight{padding-right:15px;width:56px;height:15px;overflow:hidden;display:block;position:absolute;right:0;top:20px;}
.warningBox .stsItem .icoRight:after{background:url(../images/ico_animateRight.png) repeat-x;background-size:56px 15px;opacity:1; content:""; width:56px; height:15px; display:block; position:absolute; left:0; top:0;   animation: arrRight .5s linear infinite; }
.warningBox .stsIcon{margin-top:20px;width:100%;height:auto;overflow:hidden;text-align:center;}
.warningBox .stsIcon img{width:220px;}
@keyframes arrLeft{   0%{transform: translateX(0);}  100%{transform: translateX(-15%);}}
@keyframes arrRight{   0%{transform: translateX(0);}  100%{transform: translateX(15%);}}

.msgBox{border-top-left-radius:8px;border-bottom-left-radius:8px;padding:30px 0;width:270px;height:auto;overflow:hidden;position:absolute;right:3px;top:250px;background:rgba(0,0,0,.5);}
.msgBox .tit{font-family:'Myriad Pro';width:calc( 100% - 60px );height:auto;overflow:hidden;font-size:18px;color:#fff;margin:0 auto;}
.msgBox .txt{font-family:'Myriad Pro';width:calc( 100% - 60px );height:auto;overflow:hidden;font-size:15px;color:#fff;margin:0 auto;margin-top:10px;line-height:1.5em;}

.bottomLine{width:564px;height:215px;overflow:hidden;position:absolute;left:50%;bottom:6px;margin-left:-282px;}
.bottomLine:before{animation: arrBottom .7s linear infinite;width:564px;height:215px;overflow:hidden;display:block;content:"";background:url(../images/bg_bottomLine.png) no-repeat center bottom;background-size:cover;position:absolute;bottom:0px;}
@keyframes arrBottom{   0%{height:0px;}  100%{height:215px;}}