/*
*/
html{-webkit-text-size-adjust: none;}
body,div,ul,ol,li,dl,dt,dd,form,p,th,td,h1,h2,h3{ margin:0; padding:0;}
*{ box-sizing:border-box;}
img{ border:0; vertical-align:middle;}
body,th,td,h1,h2,h3{ font-weight:normal; font-family: PingFang SC,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Source Han Sans,Noto Sans CJK Sc,Microsoft YaHei,Microsoft Jhenghei,sans-serif; color:#FFF;}
html{ _background:url(about:black) no-repeat fixed;}
li{ list-style:none;}
a{ text-decoration:none; color:#FFF;}
a:hover{ cursor:pointer; text-decoration:none;}

.clearfix:after { visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0;}
.clearfix{ *zoom:1;}
.clear{ clear:both; height:0;}
.l{ float:left;}
.r{ float:right;}
.text-right{ text-align:right;}
.text-left{ text-align:left;}
.text-center{ text-align:center;}
.text-overflow{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

.orange{ color:#fd784d;}
.yellow{ color:#ffd700;}
.green{ color:#41ecdd;}
.red{ color:#c7003a;}
.bule{ color: #01dcfd;}
.violet{ color: #9b9bff;}

.scroll::-webkit-scrollbar-track{background-color:transparent;}
.scroll::-webkit-scrollbar{width:7px;height:7px;background-color:transparent;}
.scroll::-webkit-scrollbar-thumb{background-color:#0c2951;border-radius: 999rem;}

.CodeMirror-hscrollbar::-webkit-scrollbar-track{background-color:transparent;}
.CodeMirror-hscrollbar::-webkit-scrollbar{width:6px;height:6px;background-color:transparent;}
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb{background-color:#454545;border-radius: 999rem;}
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover{ background: #454545;}
.CodeMirror-hscrollbar::-webkit-scrollbar-corner{ background: transparent;}
.scroll-shallow::-webkit-scrollbar-thumb{ background-color: #dfdfe3;border-radius: 999rem;}
.scroll-shallow::-webkit-scrollbar-thumb:hover{background: #d5d6d8;}

.wrapper{ position: relative; width: 1920px; height: 1080px; background: url(../images/bg.jpg) center center no-repeat; background-size: cover;}
/* header */
.header{ position: absolute; left: 0; top: 0; right: 0; height: 135px; background: url(../images/header.png) center top no-repeat; background-size: contain; z-index: 2;}
.logo{ position: absolute; left: 20px; top: 15px;}
.logo img{ height: 54px;}
.header .date{ position: absolute; right: 30px; top: 30px; color: #B5C1D1; font-size: 12px;}
.header .date span{ font-size: 16px; color: #fff; font-weight: bold;}
.bar-right{ position: absolute; right: 30px; top: 30px; display: flex; align-items: center;}
.bar-right .bar-quit{  display: flex; align-items: center; font-size: 15px; color: #B5C1D1; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(54, 149, 255, .5)}
.bar-right .bar-quit img{ width: 20px; height: 20px; margin-right: 5px;}
.bar-right .bar-quit:hover{ color: #fff;}
.bar-right .bar-user{ display: flex; align-items: center; font-size: 15px; color: #B5C1D1;}
.bar-right .bar-user img{ width: 16px; height: 16px; margin-right: 5px;}


/* common */
.content{ position: absolute; left: 0; top: 100px; right: 0; bottom: 0; display: flex; padding: 0 32px; z-index: 3;}
.box-card{ position: relative; display: flex; flex-direction: column;}
.box-title{ position: relative;}
.box-title img{ height: 72px; margin-left: -25px; margin-top: -34px;}
.box-title .filter{ position: absolute; right: 0; bottom: 0; display: flex; align-items: center;}
.box-title .filter .filter-box { position: relative; margin-left: 5px;}
.box-title .filter .filter-item{ position: relative; display: flex; align-items: center; font-size: 13px; color: #B5D0F5; padding: 0 15px; height: 25px; line-height: 25px; background: rgba(12, 34, 63, .7);border: 1px solid rgba(40, 92, 151, .7);}
.box-title .filter .filter-item i{ width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #B5D0F5; margin-left: 5px;}
.box-title .filter .filter-item:hover{ cursor: pointer; color: #fff;}
.box-title .filter .filter-down{ display: none; position: absolute; right: 0; top: 100%; min-width: 100%; margin-top: 5px;background: rgba(10, 18, 33, .95); border: 1px solid; border-image: linear-gradient(0deg, rgba(17, 48, 85, .7), rgba(42, 113, 181, .7)) 10 10; z-index: 2; padding: 4px 0; text-align: left;}
.box-title .filter .filter-down a{ display: block; line-height: 25px; width: 100%; text-align: center; font-size: 13px;}
.box-title .filter .filter-down a:hover{ background: rgba(13, 51, 100, .7);}
.box-content{ position: relative; flex: 1;}
.center{ position: relative; flex: 1; margin: 0 32px;}
.center-top{ position: relative; height: 640px; background: rgba(10, 18, 33, .7);border: 1px solid; border-image: linear-gradient(0deg, rgba(17, 48, 85, .7), rgba(42, 113, 181, .7)) 10 10;}
.top-fixed-group{ position: absolute; left: 0; top: 30px; right: 0; z-index: 9; display: flex; align-items: center; justify-content: center;}
.arg-item{ position: relative; width: 168px; height: 83px; text-align: center; background: url(../images/arg-bg.png) 0 0 no-repeat; background-size: contain;}
.arg-item .title{ font-size: 16px; padding: 14px 0 8px 0; line-height: 16px;font-weight: bold; background: linear-gradient(0deg, #7C9EFF 0%, #fff 18.505859375%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.arg-item .number{ font-size: 22px; font-weight: bold;}
.arg-item .number label{ font-size: 25px;}
.center-bottom{ margin-top: 30px;}
.chart{ position: relative;}

/* left */
.left{ width: 436px; height: 100%;}
.weather{ display: flex; align-items: center; margin-top: 20px;}
.weather .icon{ width: 84px; height: 84px; margin-right: 20px;}
.weather .icon img{ max-width: 100%;max-height: 100%;}
.weather .base,.weather .other {flex: 1;}
.weather .base label{ font-size: 15px; color: #B5C1D1;}
.weather .base .number{ font-size: 15px; display: flex; margin-top: 10px;}
.weather .base .number span{ font-size: 40px; color: #fff; line-height: 40px;text-shadow:11px 11px 50px rgba(1,85,239,.35);}
.weather .other {border-left: 1px solid rgba(255,255,255,.6); padding-left: 26px;}
.weather .other .item+.item{ margin-top: 15px;}
.weather .other .item label{ font-size: 13px; color: #B5C1D1; line-height: 15px;}
.weather .other .item .value{ font-size: 16px; color: #fff;}
.weather-other { position: relative; display: flex; align-items: center; margin-top: -6px; z-index: 2; margin-bottom: 20px; overflow-x: auto; padding-bottom: 15px; }
.weather-other .item { text-align: center; display: flex; flex-direction: column;flex: 1 0 auto; width: 25%;}
.weather-other .item .icon{ width: 102px; height: 102px;}
.weather-other .item .icon img{ width: 100%; height: 100%;}
.weather-other .item .value{ margin-top: -30px; font-size: 12px; color: #B5C1D1;}
.weather-other .item .value span{ font-size: 28px; font-weight: bold; color: #FFFFFF;}
.weather-other .item .title{ font-size: 15px; color: #B5C1D1;}
.cg-list{ position: relative; display: flex; flex-wrap: wrap; margin-top: 22px; padding-left: 20px; margin-bottom: 20px; height: 220px; overflow-y: auto;}
.cg-item{ width: 193px; height: 94px; position: relative; display: flex; align-items: center; cursor: pointer; margin-bottom: 15px;}
.cg-item .icon{ width: 94px; height: 94px;}
.cg-item .icon img{ width: 100%; height: 100%;}
.cg-item .cell{ flex: 1;}
.cg-item .cell label{ font-size: 15px; color: #B5C1D1;}
.cg-item .cell .value{font-size: 15px; color: #B5C1D1;}
.cg-item .cell .value span{ font-size: 28px; color: #fff; font-weight: bold; margin-right: 5px;}
.cg-item.active{ background: rgba(13, 51, 100, .2)}
.cg-item:nth-child(2n){ margin-left: 20px;}
.box-subtitle{ display: flex; align-items: center; font-size: 18px; color: #F4F9FF;margin-bottom: 20px; font-weight: bold;}
.box-subtitle:before{ content: ''; width: 6px; height: 6px; margin-right: 10px; background: #99D7FF;}
.box-tabs{ display: flex; align-items: center; margin-bottom: 10px; margin-top: 10px;}
.box-tabs .tab{ flex: 1; position: relative; text-align: center;height: 25px; line-height: 25px; font-size: 13px; color: rgba(181, 193, 209, .8); background: rgba(12, 34, 63, .7); border: 1px solid rgba(40, 92, 151, .7);}
.box-tabs .tab+.tab{ margin-left: 5px; }
.box-tabs .tab.active{ color: #fff; font-weight: 500; background: rgba(13, 51, 100, .7);border: 1px solid rgba(54, 149, 255, .7);}
.box-tabs .tab:hover{ color: #fff;cursor: pointer;}
.chart{ position: relative;}

/* right */
.right{ width: 436px; height: 100%;}
.new-list{ position: relative; height: 220px; overflow-y: auto; padding: 0 20px 0 28px; margin-bottom: 30px;}
.new-li { position: relative; padding: 6px 0 0 0;}
.new-li .new-title{ position: relative; display: flex; align-items: center; font-weight: bold; padding: 0 0 0 44px; font-size: 16px; background: linear-gradient(to right, rgba(21, 66, 115, .28) 0%, rgba(21, 66, 115, 0) 100%); height: 30px; line-height: 30px;}
.new-li .new-title .name{ flex: 2;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.new-li .new-title .type{ flex: 1; margin-left: 20px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.new-li .new-title .time{ font-size: 14px; color: #B5D0F5; margin-left:20px;}
.new-li span { position: absolute; left: -17px; top: 0; font-size: 12px; z-index: 2; font-weight: bold; width: 46px; height: 21px; background: #2c3039; border-radius: 6px; color:#fff; line-height: 21px; text-align: center;}
.new-li:first-child span{ background: #5F0B15;} 
.new-li:nth-child(2) span{ background: #E2B838;} 
.new-li:nth-child(3) span{ background: #229FFF;} 
.new-li .new-desc{ font-size: 14px; color: #B5D0F5; padding: 10px 0 10px 44px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.video-card{ position: relative;height: 230px; padding: 8px; background: rgba(10, 18, 33, .7);border: 1px solid;border-image: linear-gradient(0deg, rgba(17, 48, 85, .7), rgba(42, 113, 181, .7)) 10 10; margin-bottom: 25px;}
.fm-header{ position: relative; display: flex; align-items: center; text-align: center; font-size: 13px; color: #8292A8; padding: 10px 0;}
.fm-content{ height: 200px; overflow-y: auto;}
.fm-li{ display: flex; align-items: center; height: 36px; background: rgba(21, 66, 115, .28);}
.fm-li:nth-child(2n){ background: rgba(21, 66, 115, .12);}
.fm-li+.fm-li{ margin-top: 4px;}
.fm-li .value{ padding: 0 8px; box-sizing: border-box; text-align: center; font-size: 14px; color: #B5D0F5;}
.fm-li .value .num{ display: block; margin: 0 auto; font-weight: bold; font-size: 12px; line-height: 22px; width: 22px; height: 22px; background: linear-gradient(0deg, #0066CF 0%, rgba(0, 102, 207, .5) 100%);}
.fm-li .value label{ display: flex; align-items: center; justify-content: center; font-size: 13px; }
.fm-li .value label:before{ content: ''; width: 6px; height: 6px; margin-right: 5px; background: #229FFF; border-radius: 999rem;}
.fm-li .value label.close {color: #B5D0F5;}
.fm-li .value label.open{ color: #06FFDF;}
.fm-li .value label.open:before{ background: #06FFDF;}
.fm-li .value > a{ font-size: 13px; color: #fff;}
.fm-li .value > a+a{ margin-left: 14px;}
.fm-li .value .dropdown{ position: relative; margin-left: 14px;}
.fm-li .value .dropdown > a{ display: flex; align-items: center;}
.fm-li .value .dropdown > a i{ width: 0; height: 0; border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 4px solid #ACC7EB; margin-left: 4px;}
.fm-li .value .dropdown-menu{ display: none; position: absolute; right: -5px; top: 100%; margin-top: 5px; width: 90px; background: rgba(10, 18, 33, .95);border: 1px solid; border-image: linear-gradient(0deg, rgba(17, 48, 85, .7), rgba(42, 113, 181, .7)) 10 10;z-index: 2; padding: 4px 0;text-align: left;}
.fm-li .value .dropdown-menu a{ line-height: 25px; padding: 0 10px; display: block;}
.fm-li .value .dropdown-menu a:hover{background: rgba(13, 51, 100, .7);}
.fm-li .value.fm-4{ display: flex; align-items: center; justify-content: center;}
.fm-1{ width: 50px;}
.fm-2{flex: 1;}
.fm-3{width: 80px;}
.fm-4{ width: 180px;}

/* 弹层 */
.popup-box{ position: absolute; width: 406px; z-index: 10; background: url(../images/popupBg-type2.png) 0 0 no-repeat; background-size: 100% 100%;}
.popup-box.box-sm{background: url(../images/popupBg.png) 0 0 no-repeat; background-size: 100% 100%;}
.popup-box.box-sm .popup-close{ top: -5px;}
.popup-close{ position: absolute; right: 20px; top:-1px; width: 66px; height: 22px; cursor: pointer; background: url(../images/close.png) 0 0 no-repeat; background-size: cover;}
.popup-center{ padding: 30px 28px 38px 28px;}
.popup-center .popup-title{ font-size: 22px; color: #fff; font-weight: bold; display: flex; align-items: center; border-bottom: 1px solid rgba(71,88,190,.35); padding-bottom: 10px;}
.popup-center .popup-title .name{ flex: 1;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.popup-center .popup-title span{ color: #f30; display: flex; margin-left: 20px; font-size: 16px; font-weight: normal; display: flex; align-items: center;}
.popup-center .popup-title span:before{ content: ''; width: 8px; height: 8px; border-radius: 999rem; margin-right: 5px; background: #f30;}
.popup-center .popup-title span.online{ color: #9bf254;}
.popup-center .popup-title span.online:before{ background: #9bf254;}
.popup-text{ font-size: 15px; color: #B5C1D1; margin-top: 15px; line-height: 24px;}
.popup-text .spr{ padding: 0 10px;}
.popup-text .current-num{ font-size: 30px;color: #E2B838; padding: 15px 0 20px 0; font-weight: bold;}
.popup-text .current-num label{font-size: 14px; color: #B5C1D1; margin-right: 20px;}
.popup-text .state{ color: #9bf254;}
.popup-bottom{ display: flex; align-items: center; justify-content: flex-end; padding: 24px 0 0 0;}
.popup-bottom a{ width: 90px; height: 28px; line-height: 28px; text-align: center; border-radius: 999rem; margin-left: 6px; font-size: 14px; color: #fff;}
.popup-bottom a.setBtn{ background: url(../images/setbtn.png) center center no-repeat; background-size: cover;}
.popup-bottom a.openBtn{ background: url(../images/openbtn.png) center center no-repeat; background-size: cover; width: 80px;}
.popup-bottom a.closeBtn{ background: url(../images/closebtn.png) center center no-repeat; background-size: cover; width: 80px;}


/* login --------------------- */
.login-wrapper{position: relative;width: 1920px; height: 1080px; display: flex; flex-direction:column; justify-content: center; align-items: center; background: url(../images/bg.jpg) center center no-repeat; background-size: cover;}
.login-header{ text-align: center;}
.login-header img{ width: 752px;}
.login-header .login-slogan{ font-size: 18px; color: #467389; letter-spacing: 18px;}
.wrapcenter{ position: relative;}
.login-logo {text-align: center; margin-bottom: 50px;}
.login-logo img{ height: 50px; }
.login-main{ position: relative; padding: 60px 80px 0 80px; box-sizing: border-box; width: 505px; height: 585px; margin: 0 auto; background: url(../images/login-boxbg.png) 0 0 no-repeat; background-size: cover; }
.change-Btn{ position: absolute; right: 0; top: 0; cursor: pointer; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #2254f4;}
.change-Btn:before{ content: ''; position: absolute; right: -70px; top:-70px; background: rgba(34,84,244,.05); width: 140px; height: 140px; transform: rotate(-45deg);}
.change-Btn a{ color: #2254f4; position: relative; z-index: 2;}
.change-Btn:hover:before{background: rgba(34,84,244,.09);}
.login-title{ font-size: 28px; color: #9EF4FF; margin-bottom: 40px;}
.commonLogin ul li{ position: relative;}
.commonLogin ul li .common-item{ display: flex; align-items: center; margin-bottom: 38px; background: rgba(255,255,255,.25); border-bottom: 2px solid #00CEE7;}
.commonLogin ul li label{ position: relative; width: 60px; line-height: 50px; margin-right: 14px; text-align: center; font-size: 14px; color: #666; display: block;}
.commonLogin ul li label:after{ content: ''; position: absolute; right: 0; top: 16px; bottom: 16px; border-right: 1px solid #00CEE7;}
.commonLogin ul li .agree{ font-size:13px; margin-top: 40px; color: rgba(0,0,0,.6);}
.commonLogin ul li .forget-btn{ position: relative; text-align: right; padding-bottom: 60px; margin-top: -24px;}
.commonLogin ul li .forget-btn a{ font-size: 16px; color: #00CDE7;}
.commonLogin ul li .forget-btn a:hover{ color: #00CDE7; text-decoration: underline;}
.commonLogin ul li .common-item .btn-outline-primary{border-radius: 999rem; padding: 0 0; width: 100px; border-color: #9EF4FF; color: #9EF4FF; margin-right: 10px; height: 30px; line-height: 28px;}
.commonLogin ul li .common-item .btn-outline-primary:hover{ background: rgba(0,205,231,.1);}
.commonLogin ul li .common-item .btn-outline-primary:active{ border-color: #9EF4FF;}
.commonLogin ul li .common-item .btn-outline-primary[disabled]{ opacity: .5; cursor: default; background: transparent;}
.commonLogin ul li .get-to{ text-align: center; color: #fff; font-size: 16px; margin-top: 30px;}
.commonLogin ul li .get-to a{ color: #9EF4FF;}
.commonLogin ul li .get-to a:hover{text-decoration: underline;}
.common-file{ position: relative; display: flex; align-items: center; flex: 1;}
.common-file input{ background: transparent; height: 48px; font-size: 16px; color: #fff; width: 100%; border:none; flex:1; padding: 0;}
.common-file input::placeholder{ color: #7F98BE;}
.common-file input:focus,.common-file input:active{ color: #fff; background: transparent;}
.common-file .btn{ position: absolute; right: 0; font-size: 12px; width: 92px; text-align: center; height: 32px; line-height: 30px;}
.common-file .btn.disabled{ background: #f0f0f0; color: #666; border-color: #f0f0f0;}
.common-file select{ height: 38px; font-size: 14px; border: none; border-bottom: 1px solid #f0f0f0; flex: 1; padding: 0;}
.common-file select+select{ margin-left: 10px;}
.sign-submit{ width: 100%; display: block; text-align: center; margin-top: 40px; height: 52px; line-height:52px; background: #33CDFF; border-color: #33CDFF; font-size: 18px;}
.sign-submit:hover{ background: #11b3e8; border-color: #11b3e8;}