@font-face{
  font-family: number;
  src: url('../js/font/DS-DigitalBold_0.TTF') format('truetype'),
  url('../js/font/DS-DigitalBold_0.TTF') format('truetype'),
  url('../js/font/DS-DigitalBold_0.TTF') format('truetype'),
  url('../js/font/DS-DigitalBold_0.TTF') format('truetype');
}
body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select,
td {
  margin: 0;
  padding: 0;
}

body {
  font-size: 1.66667vh;
  font-family: "microsoft yahei";
  line-height: 1;
  word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1.66667vh;
}

a,
u,
s,
del {
  color: #000;
  text-decoration: none;
}

fieldset,
img {
  border: 0;
}

i,
em,
b {
  font-style: normal;
  font-weight: 500;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
}

.ind2 {
  text-indent: 2em;
}

.over {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.valign:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.valign img {
  vertical-align: middle;
}

.clear {
  zoom: 1;
}

.clear:after {
  content: "";
  clear: both;
  display: block;
}

a {
  -webkit-tap-highlight-color: transparent;
}

input {
  outline: medium;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 1.38889vh;
  height: 1.38889vh;
}

::-webkit-scrollbar-thumb {
  border-radius: 0.46296vh;
  background: #12355a;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px transparent;
  border-radius: 2px;
}

body {
  box-sizing: border-box;
  width: 3840px;
  height: 1080px;
  background: #0a0a0a;
  background-size: 100% 100%;
}

.header-bg-color {
  background: #1B3D56;
}

.number{
  font-family: number;
}

.box-bg-color {
  background: #122E41;
}
.screen-container{
  width: 100%;
  height: 100%;
  background: url(../img/yjysq/screen/10006.png) no-repeat 19px top, url(../img/yjysq/screen/10005.png) no-repeat right 20px top;
  background-size: 15px 100%;
  padding: 0 30px;
  box-sizing: border-box;

}
.m-head{
  height: 70px;
  box-sizing: border-box;
  background: #021D30;
}
.m-head-left{
  width: 1228px;
  color: #C4E0F6;
  font-size: 24px;
  text-align: center;
  background: url(../img/yjysq/screen/100015.png)  center 12px / 50% 100% no-repeat;
  height: 60px;
  line-height: 70px;
  text-align: center;
  padding: 0 25px 0 10px;
}
.m-head-right{
  flex:1;
  color: #C4E0F6;
  font-size: 24px;
  text-align: center;
  background: url(../img/yjysq/screen/100016.png)  center 12px / 70% 100% no-repeat;
  height: 60px;
  line-height: 70px;
  text-align: center;
  margin: 0 0 0 30px;
}
.main {
  /* width: 100%; */
  height: calc(100% - 70px);
  background: #021D30;
}

.main article {
  border-radius: 4px;
}

.main article header {
  border-radius: 4px;
  height: 40px;
  align-items: center;
}

.main article header .line {
  height: 17px;
  width: 2px;
  background: #C0E0F7;
  margin-left: 10px;
}

.main article header .title {
  font-size: 16px;
  font-family: number;
  font-weight: 400;
  color: #C0E0F7;
  margin-left: 15px;
}

.main>.main_left {
  /* width: 1890px; */
  justify-content: space-between;
}

.main>.main_left>.main_left_left {
  width: 1228px;
  /* background: url(../img/yjysq/screen/10005.png) no-repeat right top;
  background-size: 15px 100%; */
  padding: 0 25px 0 15px;
  position: relative;
}

.m-bg-box1{
  background: url(../img/yjysq/screen/10005.png) no-repeat left top;
  background-size: 15px 100% ;
  position: absolute;
  right: 0;
  top: -70px;
  bottom: 0;
  width: 15px;
}

.main>.main_left>.main_left_left>.data-detail {
  width: 1228px;
  height: 163px;
}

.main>.main_left>.main_left_left>.charts-list {
  flex-wrap: wrap;
}

.main>.main_left>.main_left_left>.charts-list>.chart-item {
  width: 606px;
  height: 263px;
  background: #122E41;
  margin-top: 10px;
}


.main>.main_left>.main_left_left>.charts-list>div.chart-item:nth-child(even) {
  margin-left: 15px;
}

.main>.main_left>.main_left_left>.charts-list>.chart-item>article>div {
  width: 607px;
  height: 222px;
}

.search-word-pie-charts {
  position: absolute;
  width: 100%;
  height: 100%;
}

.search-word-pie-charts-center {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  z-index: 10;
  top: 65px;
  left: 167px;
  font-size: 14px;
}

.search-word-pie-charts-center>div {
  flex-direction: column;
}

.search-word-pie-charts-center .center-name {
  text-align: center;
  font-size: 12px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  font-family: number;
}

.search-word-pie-charts-center .percent {
  font-size: 16px;
  font-family: Akzidenz-Grotesk BQ Extended-Regular, Akzidenz-Grotesk BQ Extended;
  font-weight: 400;
  color: #39FFFE;
  margin-top: 5px;
  font-family: number;
}



.main>.main_right>.main_right_right>.charts-list>.chart-item>article>div {
  width: 604px;
  height: 206px;
}

.marketing-channel-pie-charts {
  width: 100%;
  height: 100%;
}

.marketing-channel-pie-charts-center {
  position: absolute;
  width: 83px;
  height: 83px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  z-index: 10;
  top: 61px;
  left: 169px;
  font-size: 14px;
}

.marketing-channel-pie-charts-center>div {
  flex-direction: column;
}

.marketing-channel-pie-charts-center .center-name {
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}

.marketing-channel-pie-charts-center .percent {
  font-size: 16px;
  font-family: Akzidenz-Grotesk BQ Extended-Regular, Akzidenz-Grotesk BQ Extended;
  font-weight: 400;
  color: #39FFFE;
  margin-top: 5px;
  font-family: number;
}

.box1-content {
  display: flex;
  padding: 0 50px 0 20px;
  justify-content: space-between;
}

.box1-item {
  margin: 19px 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.box1-item .box1-title {
  font-size: 16px;
  color: #fff;
  display: inline-block;
  padding: 4px 10px;
  background: rgba(57, 255, 254, 0.1000);
  margin: 0 0 10px;
}

.box1-item .num-list {
  display: flex;
  align-items: center;
  justify-content: center;

}

.box1-item .unit {
  color: #fff;
  font-size: vh(16);
}

.box1-item .num {
  width: 27px;
  height: 50px;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 36px;
  margin: 0 4px 0 0;
  font-family: number;
}

#chart3 {
  height: 230px;
}

.box1-item .num::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #55B8E8 0%, #3178BB 100%);
  z-index: -1;
}

.box1-item .num::after {
  content: '';
  display: block;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(180deg, #3682BE 0%, #2063BE 100%);
  border-radius: 4px 4px 0 0;
  z-index: -1;
}
.chart-item-content3 #chart3{
  height: 230px;
}


.main>.main_left>.main_left_right {
  width: 606px;
  padding: 0 0 0 25px;
  position: relative;
}
.m-bg-box2{
  background: url(../img/yjysq/screen/10006.png) no-repeat left top;
  background-size: 15px 100% ;
  position: absolute;
  left: 0;
  top: -70px;
  bottom: 0;
  width: 15px;
}
.main>.main_left>.main_left_right>.check-ticket {
  width: 606px;
  height: 163px;
}

.main>.main_left>.main_left_right>.view-area-table {
  width: 606px;
  height: 398px;
  margin-top: 10px;
  font-family: number;
}

.main>.main_left>.main_left_right>.order-info-table {
  width: 606px;
  height: 401px;
  margin-top: 10px;
  font-family: number;
}

.main>.main_right {
  margin-left: 15px;
  justify-content: space-between;
}

.main>.main_right>.main_right_left {
  width: 608px;
  height: 980px;
  margin: 0 15px 0 0;
}

.main>.main_right>.main_right_right {
  width: 1227px;
  padding: 0 15px 0 0;
}

.main>.main_right>.main_right_right>.service-data {
  width: 1227px;
  height: 211px;
}

.main>.main_right>.main_right_right>.charts-list {
  flex-wrap: wrap;
  justify-content: start;
}

.main>.main_right>.main_right_right>.charts-list>.chart-item {
  width: 604px;
  height: 246px;
  background: #122E41;
  margin-top: 10px;
}

.main>.main_right>.main_right_right>.charts-list>.chart-item:nth-of-type(2n) {
  width: 608px;
}
.main>.main_right>.main_right_right>.charts-list>div.chart-item:nth-child(even) {
  margin-left: 15px;
}


.traffic-data-box {
  width: 540px;
  height: 200px;
  font-family: number;
}

.traffic-data-bg {
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 1;
}

.traffic-data {
  align-items: center;
  margin-top: 8px;

}

/* .traffic-data .traffic-icon{
  width: 20px;
  height: 20px;
} */

.traffic-data .traffic-label-box {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.traffic-data .traffic-label {
  padding: 0 5px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1500);
  font-size: 12px;
  margin-left: 5px;
  color: #fff;
  transform: scale(0.9);
  display: flex;
  align-items: center;
}

.traffic-data .traffic-bar {
  margin-left: 4px;
  width: 374px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1000);
  border-radius: 0px 10px 10px 0px;
}

.traffic-data .bar-number {
  width: 187px;
  height: 12px;
  background: #00C6C5;
  border-radius: 0px 10px 10px 0px;
}

.traffic-data .unknown {
  background: rgba(82, 151, 255, 0.3000);
}

.traffic-data .traffic-number-box {
  margin-left: 10px;
  width: 40px;
}

.traffic-data .traffic-number {
  display: inline-block;
  height: 18px;
  background: rgba(255, 255, 255, 0.1500);
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 300;
  color: #FFFFFF;
  padding: 0 4px;
  line-height: 18px;
}

.traffic-percent-box {
  width: 40px;
  margin-left: 2px;
}

.traffic-percent {
  font-size: 12px;
  padding: 0 4px;
  font-weight: 300;
  color: #39FFFE;
  display: inline-block;
  height: 18px;
  background: rgba(255, 255, 255, 0.1500);
  line-height: 18px;
}

.m-box8-content #chart2{
  height: 937px;
}
.m-box8-content{
  position: relative;
}
.m-box8-content .data-box{
  position: absolute;
  left: 20px;
  top:95px;
  width: 238px;
  height: 224px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}
.m-box8-content .data-box .title{
  width: 100%;
  height: 46px;
  background: rgba(57,160,255,0.5);
  font-size: 20px;
  color: #FFFFFF;
  line-height: 46px;
  padding-left: 10px;
}
.m-box8-content .data-box .cityDataBox{
  padding:20px 20px 0;
}
.m-box8-content .data-box .ct{
  margin-bottom: 20px;
  
}
.m-box8-content .data-box .ct-label{
  font-size: 16px;
  color: #FFFFFF;
  line-height: 24px;
}
.m-box8-content .data-box .val{
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #39FFFE;
  font-family: number;
}
.m-box8-content .data-box .val-l{
  margin-right: 16px;
  display: flex;
  align-items: center;
}
.m-box8-content .data-box .val-s{
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
  margin-left:4px;
}
.m-box8-content .data-box .val-e{
  margin-left:4px;
  font-size: 14px;
  color: #39FFFE;
}
.m-box2-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
}
.m-box2-item{
  width: 140px;
  height: 98px;
  background: rgba(57,255,254,0.1000);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.m-box2-item >p:first-of-type{
  font-size: 14px;
  margin: 0 0 10px;
}
.m-box2-item >div span:first-of-type{
  color: #39FFFE;
  font-size: 30px;
  vertical-align: middle;
  font-family: number;
}
.m-box2-item >div span:last-of-type{
  font-size: 16px;
  vertical-align: middle;
}
.m-box9-content{
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.m-box9-content .m-box9-item{
  display: flex;
  align-items: flex-end;
  margin: 0 0 30px;
}
.m-box9-content .m-box9-item:last-of-type{
  margin: 0;
}
.m-box9-content .m-box9-item >div:first-of-type{
  color: #fff;
  vertical-align: bottom;
  margin: 0 0 10px;
}
.m-box9-content .m-box9-item img{
  width: 37px;
  height: 75px;
  margin: 0 12px 0 30px;
}
.m-box9-content .m-box9-item .bar-box{
  width: 392px;
  height: 18px;
  background: rgba(71,140,238,0.1000);
  border-radius: 20px 20px 20px 20px;
  position: relative;
}
.m-box9-content .m-box9-item .bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 20px 20px 20px 20px;
}
.m-box9-content .m-box9-item .num{
  position: absolute;
  right: 0;
  top: -20px;
  color: #549AFF;
  font-family: number;
}
.m-box9-content .m-box9-item:first-of-type .bar{
  background: #478CEE;
}
.m-box9-content .m-box9-item:last-of-type .bar{
  background: #B34E55;
}
.m-box9-content .m-box9-item:last-of-type .num{
  color: #B7585D;
  font-family: number;
}
.m-box3-content,.m-box4-content{
  margin: 10px 14px 15px 22px;
  overflow: hidden;
  height: 328px;
}
.m-box3-content table, 
.m-box4-content table {
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  border: 1px;
  font-size: 14px;
  overflow: hidden;
  box-sizing: border-box;
}
.m-box3-content table thead td,
.m-box4-content table thead td {
  background-color: rgba(57,255,254,0.1000);
}
.m-box3-content table thead tr,
.m-box4-content table thead tr{
  height: 34px;
}
.m-box3-content table tbody tr,
.m-box4-content table tbody tr{
  height: 29.3px;
}
.m-box3-content table td,
.m-box4-content table td{
  border: 1px solid #015c65;
}
.m-box5-content{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 7px 0 0;
  box-sizing: border-box;
}
.m-box5-item{
  background: rgba(57,255,254,0.1000);
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 72px;
}
.m-box5-item:nth-of-type(n+6){
  margin: 7px 0 0;
}
.m-box5-item >p:first-of-type{
  font-size: 14px;
  margin: 0 0 10px;
}
.m-box5-item >div span:first-of-type{
  color: #39FFFE;
  font-size: 30px;
  vertical-align: middle;
  font-family: number;
}
.m-box5-item >div span:last-of-type{
  font-size: 16px;
  vertical-align: middle;
}

.m-box6-content{
  overflow: hidden;
  margin: 10px 14px 15px 22px;
  box-sizing: border-box;
  height: 192px !important;
  width: 554px !important;
  font-family: number;
}
.m-box6-content table{
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  border: 1px;
  font-size: 14px;
  overflow: hidden;
  box-sizing: border-box;
  
}
.chart-item-content4 #chart10,.chart-item-content3 #chart9{
  height: 210px;
}
.m-box6-content table thead td{
  background-color: rgba(57,255,254,0.1000);
}
.m-box6-content table thead tr{
  height: 34px;
}
.m-box6-content table tbody tr{
  height: 31.4px;
}
.m-box6-content table td{
  border: 1px solid #015c65;
}
.m-box7-content{
  padding: 24px 0 0;
  box-sizing: border-box;
}
.m-box7-item{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  padding: 0 20px;
}
.m-box7-item:last-of-type{
  margin: 0;
}
.m-box7-item .bar-box{
  position: relative;
  width: 461px;
  height: 16px;
  background: #083E42;
  margin: 0 16px;
  flex: 1;
}
.m-box7-item >div:first-of-type{
  color: rgba(255,255,255,0.8000);
  width: 112px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}
.m-box7-item >div:last-of-type{
  color: #FED74D;
  font-size: 14px;
  width: 60px;
  font-family: number;
}
.m-box7-item .bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0px 8px 8px 0px;
  background: linear-gradient(90deg, #00532B 0%, #84F3BE 100%);
}
.m-box7-item:nth-of-type(1) .bar{
  background: linear-gradient(270deg, #FF701F 0%, #531E00 100%);
}
.m-box7-item:nth-of-type(2) .bar{
  background: linear-gradient(270deg, #FFD94F 0%, #643C00 100%);
}
.m-box7-item:nth-of-type(3) .bar{
  background: linear-gradient(90deg, #134A9C 0%, #5BECF5 100%);
}
.m-box7-item:nth-of-type(4) .bar{
  background: linear-gradient(90deg, #00532B 0%, #84F3BE 100%);
}
.m-box7-item:nth-of-type(5) .bar{
  background: linear-gradient(90deg, #00532B 0%, #84F3BE 100%);
}

.auth-container{
  width: 100%;
  height: 100%;
  display: flex;
  /* min-height: 700px; */
  align-items: center;
  justify-content: center;
  display: none;
}
.auth-container .auth-box{
  text-align: center;
}
.auth-container .auth-box img{
  width: 80%;
}
.auth-container .auth-box p{
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  margin: 28px 0 0;
}
/* .main .mt-10 {
  margin-top: 10px;
}



.main .box-left {
  margin-left: 30px;
  width: 610px;
}

.main .box-left .article-number-box {
  height: 264px;
}

.main .box-left .hot-words-box {
  margin-top: 10px;
  height: 460px;
}

.main .box-center {
  width: 1200px;
  margin-left: 10px;
}

.main .box-right {
  width: 1940px;
  margin-left: 30px;
  flex-wrap: wrap;
}

.main .box-right .echarts-box {
  width: 636px;
  height: 495px;
  background: #122E41;
  margin-right: 10px;
  margin-bottom: 10px;
} */




.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr {
  position: relative;
}

.clearfix::after {
  display: block;
  /* 使其成为块级元素后*/
  content: "";
  /*为伪元素加入空内容，以便伪元素中不会有内容显示在页面中*/
  height: 0;
  /* 为使伪元素不影响页面布局，将伪元素高度设置为0*/
  clear: both;
  /* 清除浮动*/
}

.clearfix {
  *zoom: 1;
}


.flex {
  display: flex;
}

.w100 {
  width: 100%;
}

.wh100 {
  width: 100%;
  height: 100%;
}