@charset "utf-8";

body{background:#303237;}
.wrapper{width:100%; height:auto; overflow:hidden; }

/* TOP*/
header{width:100%; height:160px;overflow:hidden;}
header h1{float:left; position:relative;margin:60px 0 0 60px;}
header .sideEtc{position:relative;z-index:5;float:right;margin:60px 60px 0 0;}
header .sideEtc .icoRun{position:relative;border:2px solid #fff;border-radius:23px; text-align:center;font-size:28px;color:#fff;background:url(../images/ico/ico_play.png) no-repeat 40px center;text-indent:10px;float:left; width:196px; line-height:46px;height:46px; overflow:hidden;}
header .sideEtc ul{float:left;}
header .sideEtc ul li{float:left;margin-left:15px;}
header .sideEtc ul li a{font-size:0;text-indent:-2000px;display:block;width:70px;height:70px;overflow:hidden;}
header .sideEtc ul li a.ico01{background:url(../images/ico/ico_sideEtcList01.png) no-repeat;}
header .sideEtc ul li a.ico02{background:url(../images/ico/ico_sideEtcList02.png) no-repeat;}
header .sideEtc ul li a.ico03{background:url(../images/ico/ico_sideEtcList03.png) no-repeat;}
header .sideEtc ul li a.ico04{background:url(../images/ico/ico_sideEtcList04.png) no-repeat;}
header .sideEtc ul li a.ico01.on{background:url(../images/ico/ico_sideEtcList01_on.png) no-repeat;}
header .sideEtc ul li a.ico02.on{background:url(../images/ico/ico_sideEtcList02_on.png) no-repeat;}
header .sideEtc ul li a.ico03.on{background:url(../images/ico/ico_sideEtcList03_on.png) no-repeat;}
header .sideEtc ul li a.ico04.on{background:url(../images/ico/ico_sideEtcList04_on.png) no-repeat;}

.wrapper.sub{background:#17171c;}
.wrapper.sub header{height:120px;background:#000;}
.wrapper.sub header h1{margin-left:50px;margin-top:35px;}
.wrapper.sub header .sideEtc{margin:25px 50px 0 0;}

.container{width:100%; height:auto; overflow:hidden; }
.container.sub{height:calc( 100% - 60px ); }

.subSec{width:1280px;height:auto;overflow:hidden;margin:0 auto;}
 
.boHeader{width:100%; margin:0 auto; height:auto;}
.boHeader h4{float:left; color:#fff; font-size:24px;font-weight:500;}
.subSec .boItem{ float:left; width:100%; height:auto; margin:0;}
.subSec .boItem span{float:left; font-size:18px; color:#ff0000; height:40px; line-height:40px; }
.subSec .boItem .subj{float:left; font-size:16px; color:#fff; height:40px; line-height:40px; }
.subSec .boItem .sideEtc{margin:0; }
.boHeader.t01{}
.boHeader.t01 h4{width:calc( 100% - 40px ); text-align:center; height:90px; line-height:90px; font-size:19px; color:#b7b9bd; }
.boHeader.t01 h4 strong{padding-left:5px; vertical-align:middle; font-size:74px; color:#48f98f; font-family: 'Roboto';   font-style: normal;   font-weight: 300; }
.subSec .sideEtc{float:right; margin-top:20px; margin-bottom:20px; }
.subSec .sideEtc button{position:relative;  overflow:hidden;  border:0;  border-radius:3px;  background:transparent;  width:40px;  height:40px;   font-size:0}
.subSec .sideEtc button.ico_filter:before{content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -11px; width:22px; height:22px; overflow:hidden; display:block; background:url(../images/ico/ico_common.png) no-repeat left -182px; }
.subSec .sideEtc button.ico_print:before{content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -11px; width:23px; height:22px; overflow:hidden; display:block; background:url(../images/ico/ico_common.png) no-repeat left -211px; }
.subSec .sideEtc button.ico_puload:before{content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -11px; width:22px; height:22px; overflow:hidden; display:block; background:url(../images/ico/ico_common.png) no-repeat left -239px; }
.subSec .sideEtc button.ico_write:before{content:""; position:absolute; left:50%; top:50%; margin:-13px 0 0 -13px; width:25px; height:25px; overflow:hidden; display:block; background:url(../images/ico/ico_common.png) no-repeat -30px -211px; }
.subSec .sideEtc button.ico_save:before{content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -11px; width:22px; height:22px; overflow:hidden; display:block; background:url(../images/ico/ico_common.png) no-repeat -30px -238px; }

.boCont{width:calc( 100% - 160px ); margin:0 auto; height:auto; overflow:hidden; }
.grid{width:100%; }
.grid.lineType{width:100%; min-height:830px}
.grid.lineType01{width:100%; min-height:570px}
.boFooter{position:relative; width:100%; margin:0 auto; height:90px; padding-top:30px; text-align:right; }
.btnBox{position:relative; width:calc( 100% - 160px ); margin:0 auto; height:90px; padding-top:30px; text-align:right; }
.boFooter.ac{width:100%;text-align:center;padding-top:0;}
.boFooter.ac01{width:100%;text-align:center;}
.w2ui-popup .boFooter.ac{padding-top:20px;}
.wtable.type01 td label{color:#313c4c;}
.boFooter button, .btnBox button{margin:0 2px;border:0; width:auto; min-width:70px;height:35px; overflow:hidden; border-radius:3px; color:#fff; background:#35353f; font-size:15px; padding:0 10px}
.boFooter button.gray, .btnBox button.gray{background:#8c8c97;}
.boFooter .pagingBox{text-align:center;overflow:visible; width:50%; position:absolute; transform:translate(-50%, -50%) scale(1);top:50%;left:50%;}
.boFooter .pagingBox.leftType{text-align:left;left:0;transform:translate(0%, -50%) scale(1);}


/*페이징*/
.pagingBox{padding:22px 0 80px 0; width:100%; height:auto; overflow:hidden; text-align:center; }
.paging{display:inline-block; }
.paging a{font-size:15px;font-weight:500;color:#52575e;border:2px solid transparent;border-radius:50%;margin-left:-1px; float:left; width:24px; height:24px; text-align:center; line-height:24px; overflow:hidden;}
.paging a.btnPrev{font-size:0; text-indent:-2000px; border:0;width:28px; height:28px; margin:0 10px 0 0; background:url(../images/bg/bg_prev.png) no-repeat; }
.paging a.btnNext{font-size:0; text-indent:-2000px; border:0;width:28px; height:28px; margin:0 0 0 10px; background:url(../images/bg/bg_next.png) no-repeat; }
.paging a.btnFirst{font-size:0; text-indent:-2000px; border:0;width:28px; height:28px; background:url(../images/bg/bg_first.png) no-repeat; }
.paging a.btnLast{font-size:0; text-indent:-2000px; border:0;width:28px; height:28px; background:url(../images/bg/bg_last.png) no-repeat; }
.paging a.on{opacity:1; position:relative; color:#fff; border:2px solid #fff; }

.gridBox .boHeader{width:100%; margin:0; height:auto; }
.gridBox .boCont{width:100%; margin:0; height:auto; }
.gridBox .btnBox{width:100%; margin:0; }
.gridBox{float:left; width:calc( 100% - 520px ); height:auto; overflow:hidden; margin-left:0px; }

.searchForm{margin-bottom:20px;float:left;margin-top:20px;width:100%;height:60px;border-radius:8px;background:#222127;overflow:hidden;display:block;}
.buttonBox{float:left;margin:16px 0 0 20px;}
.kewordBox{margin:10px 10px 0 0;position:relative;float:right;width:220px;height:auto;overflow:hidden;}
.kewordBox span{font-family: 'NanumSquare';color:#fff;font-size:14px;position:absolute;left:0;top:10px;}
.kewordBox input{outline:none;padding-left:60px;float:left;background:transparent;font-size:14px;color:#fff;width:120px;border:0;border-bottom:1px solid #43434d;height:34px;}
.kewordBox a{float:left;margin:5px 0 0 5px;}

/*emulator*/
.subTitle{width:100%;height:auto;overflow:hidden;text-align:center;padding:65px 0;}
.subTitle h2{font-size:38px;color:#fff;text-decoration:underline;}
.consoleBox{margin-top:50px;font-size:14px;font-family: 'NanumSquare';float:right;width:460px;height:610px;overflow:hidden;padding:20px;line-height:1.5em;color:#fff;background:#000;overflow-y:auto;}
.emuList{width:1500px;height:auto;overflow:hidden;margin:150px auto 0 auto;}
.emuList li{width:25%;height:auto;overflow:hidden;float:left;text-align:center;}
.emuList li a{}
.emuList li a img{}
.emuList li a span{margin-top:40px;font-size:30px;text-align:center;color:#fff;display:block;height:auto;overflow:hidden;width:100%;}
.w2ui-grid .w2ui-grid-body table td.w2ui-grid-data>div,
.w2ui-grid .w2ui-grid-body table .w2ui-head>div{font-size:13px;}
.w2ui-grid .w2ui-grid-body div.w2ui-col-header{padding-right:0 !important}

/*navi*/
.naviWrap{position:relative;width:1280px;height:800px;overflow:hidden;margin:0 auto 50px auto;}
.naviWrap h1{bottom:30px;left:50%;margin-left:-70px;position:absolute;width:140px;height:auto;overflow:hidden;}
.naviWrap h1 img{width:100%;}
.naviWrap .btnComm{position:absolute;right:50px;top:50px;width:50px;height:50px;overflow:hidden;display:block;}
.naviWrap .btnSetting{position:absolute;right:50px;bottom:50px;width:50px;height:50px;overflow:hidden;display:block;}
.naviWrap .btnComm img,
.naviWrap .btnSetting img{width:100%}
.naviWrap .mapArea{width:1280px;height:800px;overflow:hidden;background:url(../images/navi/bg_map.jpg) no-repeat left top;background-size:cover;}
.naviWrap .panel{position:absolute;top:50%;left:50%;margin:-327px 0 0 -558px;width:1115px;height:654px;overflow:hidden;background:url(../images/navi/bg_line.png) no-repeat left top;background-size:cover;}
.naviWrap .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/navi/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/navi/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/navi/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/navi/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/navi/ico_signalList01.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico02{background:url(../images/navi/ico_signalList01.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico03{background:url(../images/navi/ico_signalList02.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico04{background:url(../images/navi/ico_signalList01.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico01.on{background:url(../images/navi/ico_signalList03.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico02{}
.etcBox ul li .ico03.on{background:url(../images/navi/ico_signalList03.png) no-repeat;background-size:30px 30px;}
.etcBox ul li .ico04.on{background:url(../images/navi/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/navi/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/navi/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/navi/bg_bottomLine.png) no-repeat center bottom;background-size:cover;position:absolute;bottom:0px;}
@keyframes arrBottom{   0%{height:0px;}  100%{height:215px;}}