@charset "utf-8"; html,body,div,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,blockquote,pre,form,fieldset,table,th,td,span,p,label,input,select,textarea,header,hgroup,main,nav,section,article,aside,footer, figure,figcaption,menu,button { padding: 0; margin: 0; text-decoration: none; } body { margin: 0px auto; padding: 0px; font-family: "微软雅黑", Arial, sans-serif; font-size: 14px; background-color: #04162d; } button { -webkit-appearance: none; border: 0; background: none; overflow: visible; } button, select { text-transform: none; } ul, li { list-style: none; } img { border: none; vertical-align: top; -ms-interpolation-mode: bicubic; } i, em, address, th { font-style: normal; font-weight: normal; } td, th { font-size: 14px; color: #666; } table { border: 0; border-collapse: collapse; } a { text-decoration: none; } a:link, a:visited, a:hover { text-decoration: none; outline: 0; } a:active, a:focus { outline: none; star: expression(this.onFocus=this.blur()); } p { font-size: 16px; } p.indent { text-indent: 2em; } q:before, q:after { content: ''; } /* 浮动 */ .fl { float: left; } .fr { float: right; } .fn { float: none; } /*--------------- 清-除-浮-动(clear) ----------------*/ .cl:after { clear: both; display: block; font-size: 0; height: 0; line-height: 0; overflow: hidden; content: "."; visibility: hidden; } .cl { zoom:1; } * html .cl { height: 1%; } /* 显示 */ body .show { display: block !important; } a { color: #666; } @font-face { font-family: DINCond-Bold; src: url('../fonts/DINCond-Bold.otf'); } /*index*/ .container { overflow: hidden; height: 1080px; width: 1920px; position: relative; background: url(../img/web/group/i-body.png) center top no-repeat; background-size: 100% 100%; padding-right: 0; padding-left: 0; } .i-top { height: 140px; width: 100%; background: url(../img/web/group/i-top-bg.png) center top no-repeat; background-size: 100% 100%; position: relative; } .i-top-tit { height: 70px; text-align: center; color: #fff; font-size: 36px; line-height: 70px; font-weight: bold; } .i-top-p { color: #fff; font-size: 26px; text-align: center; width: 100%; font-weight: bold; margin-top: 5px; line-height: 60px; } .i-navBar { position: absolute; height: 34px; left: 0; right: 0; top: 33px; padding: 0 35px; } .i-navBar a { display: block; width: 164px; height: 34px; text-align: center; line-height: 34px; color: #fff; font-size: 16px; position: absolute; top: 0; } .i-nav1, .i-nav2, .i-nav3, .i-nav4 { background: url(../img/web/group/i-navBg-l.png) no-repeat; left: 50%; } .i-nav5, .i-nav6, .i-nav7 { background: url(../img/web/group/i-navBg-r.png) no-repeat; right: 50%; } .i-nav1.active, .i-nav2.active, .i-nav3.active, .i-nav4.active,.i-nav1:hover, .i-nav2:hover, .i-nav3:hover, .i-nav4:hover{ background: url(../img/web/group/i-navBg-l_on.png) no-repeat; left: 50%; } .i-nav5.active, .i-nav6.active, .i-nav7.active, .i-nav5:hover, .i-nav6:hover, .i-nav7:hover{ background: url(../img/web/group/i-navBg-r_on.png) no-repeat; right: 50%; } .i-nav4 { margin-left: -432px; } .i-nav3 { margin-left: -586px; } .i-nav2 { margin-left: -740px; } .i-nav1 { margin-left: -894px; } .i-nav5 { margin-right: -432px; } .i-nav6 { margin-right: -586px; } .i-nav7 { margin-right: -740px; } .date-time-module { position: absolute; top: 15px; width: 180px; text-align: center; right: 30px; color: #ffffff; line-height: 3vw; } .i-top-date { width: 100%; line-height: 30px; font-size: 20px; } .i-top-date span { display: inline-block; } .date-time-module #navBarTime { font-size: 30px; line-height: 40px; font-family: Arial, Helvetica, sans-serif; display: block; } .i-main { padding: 10px 30px 0 30px; /* width: 1860px; */ } .left-container { width: 430px; height: 100%; float: left; } .left-m1 { position: relative; width: 430px; height: 255px; background: url("../img/web/group/left-box1-monitor.png") no-repeat; background-size: 100% 100%; margin-bottom: 30px; padding: 36px 20px 8px 20px; box-sizing: border-box; } .panel-title { position: absolute; left: 20px; top: 0px; display: inline-block; width: 170px; height: 36px; line-height: 36px; font-size: 18px; color: #ffffff; box-sizing: border-box; background-size: 100% 100%; } .panel-title .dot { display: inline-block; height: 16px; width: 16px; vertical-align:middle; margin:-2px 0 0 5px; background: url("../img/web/group/icon_dot.png") no-repeat; -webkit-animation: title 2.5s ease-in-out infinite; animation: title 2.5s ease-in-out infinite; } .panel-content { width: 100%; height: 100%; box-sizing: border-box; } .left-m1 .panel-content>div { display: inline-block; vertical-align: top; } .left-m2 { position: relative; width: 430px; height: 610px; background: url("../img/web/group/left-box2-monitor.png") no-repeat; background-size: 100% 100%; padding: 56px 20px 20px 20px; box-sizing: border-box; } .left-m2 .panel-content .panel-content-head { width: 100%; height: 31px; line-height: 31px; background: url("../img/web/group/left-m2-bg.png") no-repeat; background-size: 100% 100%; display: flex; font-size: 14px; color: #91ceff; box-sizing: border-box; } .left-m2 .head-item, .left-m2 .body-item { text-align: center; } .left-m2 .panel-content .panel-content-head .head-item { flex: 1; } .left-m2 .panel-content .panel-content-body { width: 100%; height: calc(100% - 2vw); box-sizing: border-box; overflow: hidden; overflow-y: auto; } .left-m2 .panel-content .panel-content-body::-webkit-scrollbar { width: 6px; background-color: rgba(51, 238, 255, 0.2); } .left-m2 .panel-content .panel-content-body::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3); background-color: rgba(2, 158, 249, 0.5); border-radius: 3px; } .left-m2 .panel-content .panel-content-body .panel-content-body-tr { width: 100%; height: 30px; line-height: 30px; display: flex; padding-top: 6px; padding-bottom: 5px; border-bottom: 1px solid #4c5354c7; } .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item { flex: 1; font-size: 14px; color: #ffffff; user-select: none; } .panel-box1-item{ width: 100%; height: 2.1vw; line-height: 2.1vw; font-size: 0.9vw; color: #fff; margin-top: 0.5vw; background: url("../img/web/group/bg_panel_1_item.png") no-repeat; } .panel-box1-title a{ color: #fff; } .panel-box1-title a span{ margin-left: 15px; font-family: '宋体'; top: 2px; } .panel-box1-item p{ height: 2.1vw; overflow: hidden; } .panel-box1-item p i{ display: block; float: left; width: 2.1vw; height: 2.1vw; } .panel-box1-item p i img{ width: 100%; height: 100%; } .right-container { float: right; height: 100%; width: 1410px; } .right-top { margin-bottom: 18px; width: 100%; overflow: hidden; height: 565px; } @keyframes title { from { opacity: 0.5; } 50% { opacity: 1; } to { opacity: 0.5; } } @-webkit-keyframes title { from { opacity: 0.5; } 50% { opacity: 1; } to { opacity: 0.5; } } .right-bottom { position: relative; width: 1415px; height: 895px; background: url("../img/web/group/bottom-box-monitor.png") no-repeat; background-size: 100% 100%; padding: 36px 20px 20px 20px; box-sizing: border-box; } .bottom-container .panel-content .stats-chart-box { /* display: inline-block; */ vertical-align: top; height: 100%; width: 100%; box-sizing: border-box; } .chart-item-title { display: inline-block; width: 158px; height: 36px; line-height: 36px; background: url("../img/web/group/bottom-titbg.png") no-repeat; background-size: 100% 100%; font-size: 18px; color: #ffffff; margin-top: 10px; } .bottom-container .panel-content .stats-chart-box .chart-item { display: inline-block; vertical-align: top; height: 100%; width: calc(100% / 5); background: url("../img/web/group/bg-line.png") right bottom no-repeat; box-sizing: border-box; text-align: center; float: left; } .bottom-container .panel-content .stats-chart-box .chart-item:last-child { border-right: 0px; } .bottom-container .panel-content .stats-chart-box .chart-item .chart-box { width: 100%; height: calc(100% - 36px); } /* data */ .data-top { margin-bottom: 45px; width: 100%; height: 358px; } .data-top-left { position: relative; width: 529px; height: 358px; background: url("../img/web/group/data-left-boxBg.png") no-repeat; background-size: 100% 100%; padding: 36px 20px 8px 20px; box-sizing: border-box; float: left; } .data-top-left .right-topInfo-jg{ margin-top: 30px; } .data-area{ margin-top: 20px; padding: 0 5px; } .data-area-dl { height: 30px; } .data-area-dl dt, .data-area-dl dd { float: left; } .data-area-dl dt{ line-height: 28px; font-size: 18px; color: #fff; /* margin-right: 10px; */ } .data-area-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; -khtml-appearance: none; } .data-area-select::-ms-expand { display: none; } .data-area-select { width: 135px; height: 30px; line-height: 30px; background: url("../img/web/group/select-bg.png") no-repeat; background-size: 100% 100%; color: #fff; text-align: center; padding-right: 30px; font-size: 16px; box-sizing: border-box; border: 0; } .data-area-select option{ color: #000; line-height: 28px; } .data-checkBox{ margin-top: 20px; padding: 0 0 0 5px; } .data-area-check-dd>span{ color: #fff; display: inline-block; height: 20px; margin-left: 2px; font-size: 18px; line-height: 20px; margin-top: 5px; } .data-area-check-dd>span:first-child{ margin-left: 0; } .regular-checkbox { display: none; } .regular-checkbox + label { border: 1px solid #38cbff; padding: 8px; display: inline-block; position: relative; float: left; margin-right: 3px; margin-top: 2px; } .regular-checkbox:checked + label { /* color: #99a1a7; */ } .regular-checkbox:checked + label:after { content: ''; display: block; font-size: 14px; position: absolute; top: -1px; left: 1px; width: 18px; height: 18px; background: url(../img/web/group/icon-duihao.png) no-repeat; } .data-top-btnBox{ width: 100%; height: 58px; position: absolute; bottom: 1px; left: 0; right: 0; z-index: 3; } .data-top-btn{ width: 50%; height: 57px; line-height: 57px; text-align: center; color: #fff; font-size: 24px; float: left; display: block; position: relative; } .data-top-btn:last-child{ width: -webkit-calc(50% - 5px); width: calc(50% - 5px); } .data-top-btn:first-child{ right: -1px; } .data-top-btn:first-child:active, .data-top-btn:first-child:hover{ background: url("../img/web/group/data-top-btn_03.png") no-repeat; background-size: 100% 100%; } .data-top-btn:last-child:active, .data-top-btn:last-child:hover{ background: url("../img/web/group/data-btn-h_04.png") no-repeat; background-size: 100% 100%; } .data-top-btn:first-child:active, .data-top-btn:last-child:active{ font-size: 26px; } .data-top-right { background: url("../img/web/group/data-right-box.png") no-repeat; width: 1320px; height: 358px; box-sizing: border-box; padding: 36px 20px 20px 20px; position: relative; float: right; } .data-bottom { background: url("../img/web/group/data-bottom-box.png") no-repeat; background-size: 100% 100%; width: 100%; height: 486px; box-sizing: border-box; padding: 36px 15px 20px 10px; overflow: hidden; position: relative; } .data-tableBox{ min-width: 100%; height: 448px; overflow: auto; } .data-tableBox::-webkit-scrollbar { width: 0px; background-color: rgba(51, 238, 255, 0.2); } .data-tableBox::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3); background-color: rgba(2, 158, 249, 0.5); border-radius: 3px; } .data-table{ /* overflow: hidden; */ } .data-table-top{ height: 36px; margin-bottom: 16px; } .data-table-hd{ height: 36px; min-width: 100%; background: rgba(9, 70, 154, 0.6); border-radius: 10px; white-space: nowrap; display: inline-block; vertical-align: middle; } .data-table-bd{ height: 340px; /* overflow-x: hidden; */ min-width: 100%; white-space: nowrap; box-sizing: border-box; /* padding-top: 15px; */ } .data-table-hd-group{ position: relative; line-height: 36px; display: inline-block; font-size: 18px; text-align: center; width: 80px; box-sizing: border-box; margin: 0 10px; vertical-align: middle; } .data-table-hd .data-table-hd-group{ color: #91ceff; } .data-table-bd .data-table-hd-group{ color: #fff; overflow: hidden; } .data-table-hd-group span{ padding: 0 5px; display: inline-block; height: 36px; width: 80px; box-sizing: border-box; float: left; overflow: hidden; } .data-table-h{ min-width: 158px; height: 36px; line-height: 36px; font-size: 18px; color: #fff; position: absolute; top: -53px; left: 50%; /* margin-left: -79px; */ transform: translateX(-50%); white-space: nowrap; z-index: 3; text-align: center; background: url(../img/web/group/bottom-titbg.png) no-repeat; background-size: 100% 100%; padding: 0 30px; box-sizing: border-box; } .data-table-list{ margin-top: 15px; } .data-table-list li{ white-space: nowrap; /* margin-top: 10px; */ line-height: 36px; } /* supervise */ .sup-body{ background: url("../img/web/group/sup-body.png") no-repeat; width: 1869px; height: 853px; background-size: 100% 100%; box-sizing: border-box; padding: 36px 20px 20px 20px; position: relative; margin-top: 25px; overflow: hidden; } #map_container { width: 100%; height: 100%; margin: 0; } .animate{ -webkit-animation: animate-positive 2s; animation: animate-positive 2s; } @-webkit-keyframes animate-positive{ 0%{ width: 0; } } @keyframes animate-positive{ 0%{ width: 0; } } /* index-xg */ .lb-body{ overflow: hidden; margin-top: 20px; position: relative; height: 100px; } .lb-body .right-topInfo-jg{ margin-top: 0; position: absolute; width: 100%; } .carousel-tabs, .lb-tabs{ height: 6px; text-align: center; width: 100%; } .carousel-tab, .lb-tab{ cursor: pointer; width: 22px; height: 6px; margin: 0 3px; display: inline-block; background: url(../img/web/group/lb-tab.png) no-repeat; } .carousel-tab.bg, .lb-tab.bg{ width: 26px; background: url(../img/web/group/lb-tab-on.png) no-repeat; } .lb-btn{ width: 24px; height: 24px; background: rgba(2, 158, 249, 0.5); color: #fff; position: absolute; z-index: 9; top: 50%; margin-top: -12px; font-family: "宋体"; text-align: center; line-height: 24px; font-weight: bold; cursor: pointer; } .carousel-btn1, .lb-btn1{ left: 20px; } .carousel-btn2, .lb-btn2{ right: 20px; } .lb-btn:hover{ background: rgba(2, 158, 249, 1); } .tubiao-Carousel{ width: 100%; height: 100%; overflow: hidden; } .tubiao-Carousel .stats-chart-box{ position: absolute; width: 100%; } .right-videoWrap { overflow: hidden; flex: 1; } .right-video { width: 100%; } .right-video li { width: 49%; height: 400px; margin: 6px; float: left; position: relative; } .right-video li h4 { position: absolute; height: 1.5vw; line-height: 1.5vw; width: 8.5vw; display: block; background: url(../img/web/group/bg-jiankong-tit.png) no-repeat; background-size: 100% 100%; text-indent: 1vw; color: #fff; font-size: 0.8vw; } .video-box, .video-pic { width: 100%; height: 100%; } .video-box, .video-pic { width: 100%; height: 100%; } img { border: 0; vertical-align: middle; max-width: 100%; }