* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
  overflow: hidden;
}
body {
  background: url(../images/ksh_02.jpg) no-repeat;
  background-size: cover;
  line-height: 1.15;
}
.spinner {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(0deg, #8a76f6, #70cafe);
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.iconbox a:hover::before {
  transform: skewX(45deg) translateX(-150px);
  transition: 1s;
}
.iconbox a:hover {
  transform: translateY(-20px);
}
@font-face {
  font-family: electronicFont;
  src: url(../less/DS-DIGIT.TTF);
}
header {
  position: absolute;
  height: 1.25rem;
  width: 7rem;
  left: calc(50% - 3.469rem);
}
header h1 {
  font-size: 0.475rem;
  color: #fff;
  text-align: center;
  line-height: 1rem /* 80/16 */;
}
.sousuo {
  position: absolute;
  top: 0.675rem;
  right: 0.375rem;
  line-height: 0.9375rem;
  width: 0.975rem;
  height: 0.575rem;
  background: url(../images/ksh_06.png) no-repeat;
  background-size: 50% 80%;
  cursor: pointer;
}
.mainbox {
  display: flex;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}
.mainbox .column {
  flex: 3;
}
.mainbox .column .tm-map,
.mainbox .column .dm-map,
.mainbox .column #mapBZ-SD,
.mainbox .column #mapBZ-CS,
.mainbox .column #mapTM-CS {
  display: none;
}
.mainbox .column .navTop {
  height: 1.25rem;
  line-height: 1.25rem;
  display: inline-block;
}
.mainbox .column .navTop .nav {
  display: inline-block;
  height: 0.85rem;
  margin: 0.25rem 0.1rem 0 0;
  cursor: pointer;
  width: 2rem;
  background: url(../images/ksh_03.png) no-repeat;
  background-size: 100% 60%;
}
.mainbox .column .navTop .active {
  width: 2rem;
  background: url(../images/ksh_01.png) no-repeat;
  background-size: 100% 60%;
}
.mainbox .column .navTop h4 {
  font-size: 0.275rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 0.5rem /* 80/16 */;
}
.mainbox .column .panel {
  height: 5rem;
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  background: url(../images/ksh_07.png) no-repeat;
  background-size: cover
            ;
  border-radius: 10px;
}
.mainbox .column .panel h2 {
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  color: #00e2fd;
}
.mainbox .column .panel .tm-sx,
.mainbox .column .panel .dm-sx,
.mainbox .column .panel .tm-dq,
.mainbox .column .panel .dm-dq,
.mainbox .column .panel .tm-phb,
.mainbox .column .panel .dm-phb {
  display: none ;
}
.mainbox .column .panel .charts {
  display: flex;
  flex-direction: column;
  height: 4.35rem;
}
.mainbox .column .panel .charts .chatTop,
.mainbox .column .panel .charts .chatDown,
.mainbox .column .panel .charts .chatmiddle {
  display: flex;
  flex: auto;
}
.mainbox .column .panel .charts .chatsmall {
  flex: 3;
  padding: 0.15rem;
  background: url(../images/ksh_12.png) no-repeat;
  background-size: 98% 98%;
  margin: 0.1rem;
}
.mainbox .column .panel .charts .chatsmall .no-hd {
  position: relative;
}
.mainbox .column .panel .charts .chatsmall .no-hd::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.mainbox .column .panel .charts .chatsmall .no-hd::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainbox .column .panel .charts .chatsmall .no-hd ul li {
  line-height: 0.7rem;
  font-size: 0.575rem;
  color: #01fefc;
  list-style: none;
  text-align: center;
  font-family: "electronicFont";
}
.mainbox .column .panel .charts .chatsmall .no-bd ul li {
  line-height: 0.3rem;
  font-size: 0.175rem;
  color: white;
  list-style: none;
  text-align: center;
  font-weight: 300;
  margin-top: 0.2rem;
}
.mainbox .column .table {
  width: 100%;
}
.mainbox .column .table th {
  text-align: center;
  color: white;
  height: 0.4rem;
  font-size: 0.195rem;
  background-color: #3356be;
}
.mainbox .column .table th:nth-child(2) {
  text-align: left;
  padding-left: 0.125rem;
}
.mainbox .column .table td {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.145rem;
  padding-left: 0.125rem;
}
.mainbox .column .table td a {
  text-decoration: none;
}
.mainbox .column .table td:nth-child(2),
.mainbox .column .table td:nth-child(3),
.mainbox .column .table td:nth-child(4) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
}
.mainbox .column .table tbody tr:nth-child(even) {
  background: rgba(51, 86, 190, 0.3);
}
.mainbox .column .table tr:nth-child(1) {
  color: #ff2d2d;
  font-weight: 700;
}
.mainbox .column .table tr:nth-child(1) a {
  color: #ff2d2d;
}
.mainbox .column .table tr:nth-child(2) {
  color: #ff812d;
  font-weight: 700;
}
.mainbox .column .table tr:nth-child(2) a {
  color: #ff812d;
}
.mainbox .column .table tr:nth-child(3) {
  color: #ffd52d;
  font-weight: 700;
}
.mainbox .column .table tr:nth-child(3) a {
  color: #ffd52d;
}
.mainbox .column .table tr:nth-child(4) {
  color: white;
  font-weight: 300;
}
.mainbox .column .table tr:nth-child(4) a {
  color: white;
}
.mainbox .column .table tr:nth-child(5) {
  color: white;
  font-weight: 300;
}
.mainbox .column .table tr:nth-child(5) a {
  color: white;
}
.mainbox .column .table tr:nth-child(6) {
  color: white;
  font-weight: 300;
}
.mainbox .column .table tr:nth-child(6) a {
  color: white;
}
.mainbox .column .table tr:nth-child(7) {
  color: white;
  font-weight: 300;
}
.mainbox .column .table tr:nth-child(7) a {
  color: white;
}
.mainbox .column .table tr:nth-child(8) {
  color: white;
  font-weight: 300;
}
.mainbox .column .table tr:nth-child(8) a {
  color: white;
}
.mainbox .column .table tr:nth-child(9) {
  color: white;
  font-weight: 300;
}
.mainbox .column .table tr:nth-child(9) a {
  color: white;
}
.mainbox .column .OneDown {
  background: none;
  margin-top: 0.2rem;
}
.mainbox .column .Top {
  margin-top: 0.2rem;
}
.mainbox .column .map {
  position: relative;
  margin-top: 1.55rem;
  height: 10.125rem;
}
.mainbox .column .map .map1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.075rem;
  height: 7.075rem;
  background: url(../images/jt.png);
  background-size: 100% 100%;
  animation: rotate1 20s linear infinite;
  opacity: 0.6;
}
.mainbox .column .map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.0375rem;
  height: 8.0375rem;
  background: url(../images/lbx.png);
  background-size: 100% 100%;
  animation: rotate2 20s linear infinite;
  opacity: 0.6;
}
.mainbox .column .map .mapchart {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 620px;
  height: 810px;
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.mainbox .column .map h2 {
  display: block;
  height: 0.4rem;
  line-height: 0.4rem;
  color: #00e2fd;
  text-align: center;
  background-image: linear-gradient(to left, rgba(0, 226, 253, 0), rgba(80, 141, 255, 0.69));
}
.mainbox .column .map .bz-map .divNav {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 0.4rem;
}
.mainbox .column .map .bz-map .divNav .selected {
  background-image: linear-gradient(to left, rgba(0, 226, 253, 0), rgba(80, 141, 255, 0.69));
  color: #01fefc;
  animation: anim 0.6s;
}
@keyframes anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mainbox .column .map .bz-map .divNav ul {
  height: 0.4rem;
  display: flex;
}
.mainbox .column .map .bz-map .divNav ul li {
  height: 0.4rem;
  flex: 3;
  line-height: 0.4rem;
  font-size: 0.225rem;
  color: white;
  list-style: none;
  text-align: center;
  cursor: pointer;
  padding: 0 0.0625rem;
}
.mainbox .column .map .tm-map .divNavTm {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 0.4rem;
}
.mainbox .column .map .tm-map .divNavTm .selected {
  background-image: linear-gradient(to left, rgba(0, 226, 253, 0), rgba(80, 141, 255, 0.69));
  color: #01fefc;
  animation: anim 0.6s;
}
@keyframes anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mainbox .column .map .tm-map .divNavTm ul {
  height: 0.4rem;
  display: flex;
}
.mainbox .column .map .tm-map .divNavTm ul li {
  height: 0.4rem;
  flex: 2;
  line-height: 0.4rem;
  font-size: 0.225rem;
  color: white;
  list-style: none;
  text-align: center;
  cursor: pointer;
  padding: 0 0.0625rem;
}
.mainbox .column:nth-child(2) {
  margin: 0 0.125rem 0.1875rem;
}