* {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
li {
  list-style: none;
}
body {
  background: url(../img/bg.jpg) no-repeat top center;
  background-size: 100% 100%;
  line-height: 1.15;
}
/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.styled-table {
    //border-collapse: collapse; /* 边框合并 */
    margin: 25px 0; /* 外边距 */
    font-size: 0.9em; /* 字体大小 */
    width: 100%; /* 最小宽度 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* 阴影效果 */
}

.styled-table thead tr {
    //background-color: #009879; /* 表头背景色 */
    color: #ffffff; /* 表头文字颜色 */
    text-align: left; /* 文字左对齐 */
}

.styled-table th, .styled-table td {
    padding: 12px 15px; /* 内边距 */
}

.styled-table tbody tr {
    //border-bottom: 1px solid #dddddd; /* 行底部的边框 */
	   color: blanchedalmond;
}

.styled-table tbody tr:nth-of-type(even) {
    color: #ce9f2b; /* 斑马线效果 */
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879; /* 最后行的底部边框加粗 */
}

header {
  position: relative;
  height: 1.25rem;
  background: url(../img/head_bg.png) no-repeat;
  background-size: 100% 100%;
}
header h1 {
  font-size: 0.475rem;
  color: #fff;
  line-height: 1rem;
  text-align: center;
}
header .showTime {
  position: absolute;
  top: 0;
  right: 0.375rem;
  line-height: 0.9375rem;
  font-size: 0.25rem;
    color: #fff;
    background-color: inherit;
}
.mainBox {
  /*display: flex;*/
  /*min-width: 1024px;*/
  /*max-width: 1920px;*/
  /*margin: 0 auto;*/
  /*padding: 0.125rem 0.125rem 0 0.125rem;*/
  /*background-size: 100% 100%;*/
}
.mainBox .column {
  flex: 3;
}
.mainBox .column:nth-child(2) {
  /*flex: 5;*/
  /*margin: 0 0.125rem 0.1875rem;*/
}
.mainBox .panel {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../img/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  background-color: rgba(255, 255, 255, 0.05);
}
.mainBox .panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.mainBox .panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.mainBox .panel .panel_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.mainBox .panel .panel_footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.mainBox .panel .panel_footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.mainBox .panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.25rem;
  color: #fff;
  text-align: center;
  font-weight: 400;
}
.mainBox .panel .chart {
  color: #fff;
  height: 3rem;
}
.mainBox .no {
  //padding: 0.1875rem 0.1875rem 0;
  background-color: rgba(101, 132, 226, 0.1);
}
.mainBox .no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.mainBox .no .no-hd ul {
  display: flex;
}
.mainBox .no .no-hd ul li {
     position: relative;
    flex: 1;
    height: 1rem;
    font-size: 0.675rem;
    text-align: center;
     line-height: 0.875rem; 
    color: #ffeb7b;
    font-family: electronicFont;
}
.mainBox .no .no-hd ul li::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.mainBox .no .no-hd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.mainBox .no .no-hd::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainBox .no .no-bd ul {
  display: flex;
}
.mainBox .no .no-bd ul li {
  flex: 1;
  font-size: 0.225rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}
.mainBox .map {
  position: relative;
  height: 10.125rem;
}
.mainBox .map .map1 {
  position: absolute;
  width: 6.475rem;
  height: 6.475rem;
  top: 50%;
  left: 34%;
  transform: translate(-50%, -50%);
  background: url(../img/map.png);
  background-size: 100% 100%;
  opacity: 0.3;
}
.mainBox .map .map2 {
  position: absolute;
  width: 8.0375rem;
  height: 8.0375rem;
  top: 50%;
  left: 34%;
  transform: translate(-50%, -50%);
  background: url(../img/lbx.png);
  background-size: 100% 100%;
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
}
.mainBox .map .map3 {
  position: absolute;
  width: 7.075rem;
  height: 7.075rem;
  top: 50%;
  left: 34%;
  transform: translate(-50%, -50%);
  background: url(../img/jt.png);
  background-size: 100% 100%;
  animation: rotate2 10s linear infinite;
  opacity: 0.6;
}
.mainBox .map .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.125rem;
}
@keyframes rotate1 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}