.data-content{
  overflow-x: hidden;
  overflow-y: hidden;
  /*min-width: 1366px;*/
  padding-top: 5px;
  padding-bottom: 5px;
}

.l-t-line{
  width: 5px;
  height: 24px;
  left: -3px;
  top: -3px;
}
.t-l-line{
  height: 5px;
  width: 26px;
  left: -3px;
  top: -3px;
}
.t-line-box {
  position: absolute;
  width: 100%;
  height: 100%;
}
.t-line-box i{
  background-color: #4788fb;
  box-shadow: 0px 0px 10px #4788fb;
  position: absolute;
}
.t-r-line{
  height: 5px;
  width: 26px;
  right: -3px;
  top: -3px;
}
.r-t-line{
  width: 5px;
  height: 24px;
  right: -3px;
  top: -3px;
}
.l-b-line{
  width: 5px;
  height: 24px;
  left: -3px;
  bottom: -3px;
}
.b-l-line{
  height: 5px;
  width: 26px;
  left: -3px;
  bottom: -3px;
}
.r-b-line{
  width: 5px;
  height: 24px;
  right: -3px;
  bottom: -3px;
}
.b-r-line{
  height: 5px;
  width: 26px;
  right: -3px;
  bottom: -3px;
}


/*************************************************************************
 * .data-content>.data-header
 ************************************************************************/
.data-content>.data-header{
  display:flow-root;
  margin-bottom: 5px;
}
.data-content>.data-header .data-time{
  width: 340px;
  height: 35px;
  background-color: #2C58A666;
  line-height: 35px;
  color: #ccc;
  font-size: 12.8px;
  position: relative;
  margin-bottom: 20px;
  margin-left: 20px;
  text-align: center;
  letter-spacing: 2px;
  float: left;
}
.data-content>.data-header .data-time img{
  position: absolute;
  top: 8px;
  left: 15px;
}
.data-content>.data-header .filter-container{
  width: 150px;
  height: 35px;
  background-color: #2C58A666;
  line-height: 35px;
  color: #ccc;
  font-size: 12.8px;
  position: relative;
  margin-bottom: 20px;
  margin-right: 20px;
  text-align: center;
  letter-spacing: 2px;
  float: right;
}
.data-content>.data-header .filter-container a{
  color: #ccc;
  letter-spacing: 2px;  
}
.data-content>.data-header .filter-container  img{
  position: absolute;
  top: 10px;
  /*right: 15px;*/
  margin-left: 4px;
  width: 16px;
}


/*************************************************************************
 * .data-content .data-info
 ************************************************************************/
.data-content .data-info{
  width: calc(100% - 40px);
  margin-bottom: 40px;
  height: 110px;
  margin-left: 20px;
}
.data-content .data-info .info-1{
  width: 40%;
  height: 110px;
}
.data-content .data-info .info-1>.text-1{
  width: calc(100% - 25px);
  background-color: #034c6a;
  height: 110px;
}

.data-content .data-info .info-2{
  width: 31%;
  height: 110px;
}
.data-content .data-info .info-2>.text-2{
  width: calc(100% - 25px);
  background-color: #034c6a;
  height: 110px;
}

.data-content .data-info .info-3{
  width: 29%;
  height: 110px;
}
.data-content .data-info .info-3>.text-3{
  width:100%;
  background-color: #034c6a;
  height: 110px;

}

.data-content .data-info>div.info-1>.text-1>div{
  width: 33.333%;
  position: relative;
}
.data-content .data-info>div.info-2>div>div,
.data-content .data-info>div.info-3>div>div{
  width: 50%;
  position: relative;
}
.data-content .data-info img{
  position: absolute;
  top: 35px;
  left: 15px;
}
.data-content .data-info>div>div>div>div{
  margin-left:65px;
  margin-top: 23px;
}
.data-content .data-info>div.info-2>div>div>div{
  margin-left: 70px;
  margin-top: 23px;
}
.data-content .data-info p:nth-child(1){
  color:#ccc;
  font-size: 12.8px;
}
.data-content .data-info p:nth-child(2){
  font-weight: 600;
  font-size: 28px;
  color:#eeef43;
}
.data-content .data-info>div.info-2 p:nth-child(2){
  font-weight: 600;
  font-size: 28px;
  color:#25f3e6;
}
.data-content .data-info>div.info-3 p:nth-child(2){
  font-weight: 600;
  font-size: 28px;
  color:#ff4e4e;
}


/*************************************************************************
 * .data-content .data-main
 ************************************************************************/
.data-content .data-main{
  width: 100%;
  height: 928px;
  padding: 20px;
  position: relative;
}

/*************************************************************************
 * .data-content .data-main .main-left
 ************************************************************************/
.data-content .data-main .main-left{
  width: 18%;
}
.data-content .data-main .main-left>div{
  width: 100%;
  height: 275px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}
.data-content .data-main .main-left div.left-1{
  /*background: url("../img/chart-1.png") no-repeat center;*/
}
.data-content .data-main .main-left div.left-2{
  /*background: url("../img/chart-2.png") no-repeat center;*/
}
.data-content .data-main .main-left div:nth-child(1){
  margin-bottom: 32px;
}
.data-content .data-main .main-left div .main-title{
  width: 208px;
  height: 35px;
  line-height: 33px;
  background-color: #0F1E3B;
  border-radius: 18px;
  position: absolute;
  top: -17px;
  left:46%;
  margin-left: -90px;
  color:#ccc;
  font-size: 18px;
  /*font-weight: 600;*/
  box-sizing: border-box;
  padding-left: 45px;
  z-index: 1000;
}
.data-content .data-main .main-left div .main-title img{
  position: absolute;
  width: 19px;
  top: 8px;
  left: 20px;
}
.data-content .data-main .main-left div .lt-container{
  position: absolute;
  top: 20px;
  left: 4px;
  font-size: 12px;
  color: rgb(97, 210, 247);
  width: 260px;
}
.data-content .data-main .main-left div .rt-container{
  position: absolute;
  top: 20px;
  right: 0px;
  font-size: 12px;
  color: rgb(97, 210, 247);
  width: 120px;
}
.data-content .data-main .main-left div .lt-container .row,
.data-content .data-main .main-left div .rt-container .row{
  margin-left: 0px;
  margin-right: 0px;
}
.data-content .data-main .main-left div .lt-container .row .col-4,
.data-content .data-main .main-left div .lt-container .row .col-7,
.data-content .data-main .main-left div .rt-container .row .col{
  padding-left: 0px;
  padding-right: 0px;
}
.data-content .data-main .main-left div .lt-container .row .col-4,
.data-content .data-main .main-left div .rt-container .row .col:nth-child(1){
  text-align: right;
}
.data-content .data-main .main-left div .lt-container .row .col-7,
.data-content .data-main .main-left div .rt-container .row .col:nth-child(2){
  text-align: left;
}

.data-content .data-main .main-left div .lb-container{
  position: absolute;
  bottom: 5px;
  left: 4px;
  font-size: 12px;
  color: rgb(97, 210, 247);
  width: 260px;
}
.data-content .data-main .main-left div .rt-container{
  position: absolute;
  top: 20px;
  right: 0px;
  font-size: 12px;
  color: rgb(97, 210, 247);
  width: 120px;
}
.data-content .data-main .main-left div .lb-container .row,
.data-content .data-main .main-left div .rt-container .row{
  margin-left: 0px;
  margin-right: 0px;
}
.data-content .data-main .main-left div .lb-container .row .col-4,
.data-content .data-main .main-left div .lb-container .row .col-7,
.data-content .data-main .main-left div .rt-container .row .col{
  padding-left: 0px;
  padding-right: 0px;
}
.data-content .data-main .main-left div .lb-container .row .col-4,
.data-content .data-main .main-left div .rt-container .row .col:nth-child(1){
  text-align: right;
}
.data-content .data-main .main-left div .lb-container .row .col-7,
.data-content .data-main .main-left div .rt-container .row .col:nth-child(2){
  text-align: left;
}

/*************************************************************************
 * .data-content .data-main .main-center
 ************************************************************************/
.data-content .data-main .main-center{
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  position: absolute;
}
.data-content .data-main .main-center .content{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /*border: 1px solid #2C58A6;*/
  /*box-shadow: 0px 0px 6px #2C58A6;*/
  position: relative;
}
.data-content .data-main .main-center .main-title{
  width: 224px;
  height: 35px;
  line-height: 33px;
  background-color: #0F1E3B;
  border-radius: 18px;
  position: absolute;
  top: -17px;
  left:48%;
  margin-left: -90px;
  color:#ccc;
  font-size: 18px;
  /*font-weight: 600;*/
  box-sizing: border-box;
  padding-left: 56px;
  z-index: 1000;
  border-bottom: 1px solid #020C1E;
}
.data-content .data-main .main-center .main-title img{
  position: absolute;
  width: 30px;
  top: 3px;
  left: 20px;
}
.data-content .data-main .main-center .nav-bar{
  height: 40px;
  background: #A2A2A266;
  border-bottom: 1px solid #001233;
  position: absolute;
  left: 30%;
  top: 0;
  right: 0;
  z-index: 900;
  font-size: 12px;
  max-width: 40%;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}
.data-content .data-main .main-center .nav-bar .items{
  position: absolute;
  top: 8px;
  list-style: none;
  display: flex;
  font-size: 12px;
  color: #aaa;
}
.data-content .data-main .main-center .nav-bar .items-l{
  left: 4px;
}
.data-content .data-main .main-center .nav-bar .items-r{
  right: 4px;
}
.data-content .data-main .main-center .nav-bar .items .item{
  border: 1px solid #333;
  border-radius: 4px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  cursor: pointer;
}
.data-content .data-main .main-center .nav-bar .items .item:not(:first-child){
  margin-left: 8px;
}
.data-content .data-main .main-center .nav-bar .items .item input{
  background: transparent;
  color: #aaa;
  max-width: 132px;
}
.data-content .data-main .main-center .nav-bar .items .item select{
  background: transparent;
  color: #aaa;
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.data-content .data-main .main-center .nav-bar .items-r .item:not(:first-child){
  background: transparent;
  border: 1px solid #333;
  border-radius: 20px;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
}
.data-content .data-main .main-center .nav-bar .items .item:hover,
.data-content .data-main .main-center .nav-bar .items .item:focus{
  color: #ddd;
  background: rgba(0,0,0, .2);
}


/*************************************************************************
 * .data-content .data-main .main-right
 ************************************************************************/
.data-content .data-main .main-right{
  width: 18%;
}
.data-content .data-main .main-right>div{
  width: 100%;
  height: 275px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}
.data-content .data-main .main-right div.right-1 .choice{
  position: absolute;
  top: 25px;
  right: 30px;
  z-index: 1000;
}
.data-content .data-main .main-right div.right-1 .choice label{
  color:#ccc;
}
.data-content .data-main .main-right div.right-2{
  /*background: url("../img/chart-4.png") no-repeat center;*/
}
.data-content .data-main .main-right div.right-2 .chart-text {
  width: 18%;
  color:#ccc;
  text-align: center;
  margin-top: 12px;
}
.data-content .data-main .main-right div.right-2 .chart-text p{
  margin-top: 21px;
}
.data-content .data-main .main-right div.right-2 .chart-text p img{
  margin-right: 5px;
  margin-top: -4px;
}
.data-content .data-main .main-right div.right-2 .chart-text p:nth-child(1){
  font-size: 14px;
  font-weight: 600;
}
.data-content .data-main .main-right div.right-2 .text-sum{
  text-align: center;
  color:#eeef43;
  font-weight: 600;
}
.data-content .data-main .main-right div.right-2 .text-sum div:nth-child(2){
  font-size: 18px;
  font-weight: 600;
}
.data-content .data-main .main-right div:nth-child(1){
  margin-bottom: 32px;
}
.data-content .data-main .main-right div .main-title{
  width: 208px;
  height: 35px;
  line-height: 33px;
  background-color: #0F1E3B;
  border-radius: 18px;
  position: absolute;
  top: -17px;
  left:46%;
  margin-left: -90px;
  color:#ccc;
  font-size: 18px;
  /*font-weight: 600;*/
  box-sizing: border-box;
  padding-left: 45px;
}
.data-content .data-main .main-right div .main-title img{
  position: absolute;
  width: 19px;
  top: 8px;
  left: 20px;
}
.data-content .data-main .main-right div .main-table tr{
  height: 42px;
}
.data-content .data-main .main-right div .main-table{
  width: 100%;
  margin-top: 21px;
}
.data-content .data-main .main-right div .main-table table{
  width: 100%;
}
.data-content .data-main .main-right div .main-table thead tr{
  height: 42px;
}
.data-content .data-main .main-right div .main-table th{
  font-size: 12px;
  font-weight: 600;
  color:#61d2f7;
  text-align: center;
}
.data-content .data-main .main-right div .main-table th .th0,
.data-content .data-main .main-right div .main-table tbody th
{
  color: #61f763;
}
.data-content .data-main .main-right div .main-table th:nth-child(1){

}
.data-content .data-main .main-right div .main-table th:nth-child(2){

}
.data-content .data-main .main-right div .main-table td{
  color:#ccc;
  font-size: 10px;
  text-align: center;
}
.data-content .data-main .main-right div .main-table tbody tr:nth-child(2n-1){
  /*background-color: #072951;*/
  box-shadow:-10px 0px 15px #2C58A6 inset,
  10px 0px 15px #2C58A6 inset;
}


/*************************************************************************
 * .data-content .data-main .main-bottom
 ************************************************************************/
.data-content .data-main .main-bottom{
  height: 275px;
  position: absolute;
  bottom: 20px;
  left:20px;
  right:20px;
}
.data-content .data-main .main-bottom div{

}
.data-content .data-main .main-bottom .bottom-1{
  width: 18%;
  height: 275px;
  position: relative;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}

.data-content .data-main .main-bottom .bottom-1 .lt-container{
  position: absolute;
  top: 20px;
  left: 4px;
  font-size: 12px;
  color: rgb(97, 210, 247);
  width: 260px;
}
.data-content .data-main .main-bottom .bottom-1 .rt-container{
  position: absolute;
  top: 20px;
  right: 0px;
  font-size: 12px;
  color: rgb(97, 210, 247);
  width: 120px;
}
.data-content .data-main .main-bottom .bottom-1 .lt-container .row,
.data-content .data-main .main-bottom .bottom-1 .rt-container .row{
  margin-left: 0px;
  margin-right: 0px;
}
.data-content .data-main .main-bottom .bottom-1 .lt-container .row .col-4,
.data-content .data-main .main-bottom .bottom-1 .lt-container .row .col-7,
.data-content .data-main .main-bottom .bottom-1 .rt-container .row .col{
  padding-left: 0px;
  padding-right: 0px;
}
.data-content .data-main .main-bottom .bottom-1 .lt-container .row .col-4,
.data-content .data-main .main-bottom .bottom-1 .rt-container .row .col:nth-child(1){
  text-align: right;
}
.data-content .data-main .main-bottom .bottom-1 .lt-container .row .col-7,
.data-content .data-main .main-bottom .bottom-1 .rt-container .row .col:nth-child(2){
  text-align: left;
}

/*************************************************************************
 * .data-content .data-main .main-bottom .bottom-center
 ************************************************************************/
.data-content .data-main .main-bottom .bottom-center{
  width: 64%;
  height: 275px;
}
.data-content .data-main .main-bottom .bottom-center .bottom-2{
  width: 28%;
  height: 275px;
  box-sizing: border-box;
  margin-left: 25px;
  position: relative;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}

.data-content .data-main .main-bottom .bottom-2 .top3-container{
  display:flex;justify-content:center;align-items:center;
  height: 100%;
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card{
  width: 33.33%;
  color: #ccc;
  position: relative;
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card:nth-child(2){
  /*padding-top:15px;*/
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card:nth-child(3){
  /*padding-top:30px;*/
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card-header{
  width: 60px;
  height: 60px;
  text-align: center;
  background: #ccc;
  border-radius: 100%;
  padding: 6px;
  margin: auto;
  background-color: #021f42;
  box-shadow: -10px 0px 15px #021f42 inset, 10px 0px 15px #2C58A6 inset;
  z-index: 1;
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card-header .rank{
  font-size: 18px;
  border-bottom: 1px #aaa solid;
  font-weight: 600;
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card-header .label{
  font-size: 12px;
  color: #eee;
  margin-top: 7px; /* only use without rank */
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card-body{
  height: 200px;
  margin-top: -26px;
  font-size: 12px;
  word-break: break-all;
  color: #bbbbbb;
  padding: 4px;
  padding-top: 28px;
  background: #ccc;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 4px;
  background-color: transparent;
  box-shadow: 1px 1px 2px #021f42 inset, 1px 1px 6px #021f42 inset;
  overflow: hidden;
}
.data-content .data-main .main-bottom .bottom-2 .top3-container .top-card-body hr{
  margin: 0;
  border: 0;
  border: 0.5px dashed rgba(255, 255, 255, 0.2);
}

.data-content .data-main .main-bottom .bottom-center .bottom-3{
  width: 28%/*calc(50% - 40px)*/;
  height: 275px;
  box-sizing: border-box;
  margin-right:25px;
  position: relative;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}
.data-content .data-main .main-bottom .bottom-center .bottom-3 .main-title select{
  border: none;
  color: #ccc;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background: url("../img/down_arrow.png") no-repeat scroll right center transparent;
  background-size: 10px;
  padding-right: 9px;
  margin-right: 4px;
}
.data-content .data-main .main-bottom .bottom-center .bottom-3 .main-title select option{
  color: #aaa;
}


.data-content .data-main .main-bottom .bottom-4{
  width: 18%;
  height: 275px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 10px #000;
  background-color: #033d5d;
}


.data-content .data-main .main-bottom div .main-title{
  width: 220px;
  height: 35px;
  line-height: 33px;
  background-color: #0F1E3B;
  border-radius: 18px;
  position: absolute;
  top: -17px;
  left:50%;
  margin-left: -110px;
  color:#ccc;
  font-size: 18px;
  /*font-weight: 600;*/
  box-sizing: border-box;
  padding-left: 45px;
  z-index: 1000;
}
.data-content .data-main .main-bottom div .main-title img{
  position: absolute;
  width: 19px;
  top: 8px;
  left: 20px;
}


.data-content .data-main .main-bottom div .main-table tr{
  height: 42px;
}
.data-content .data-main .main-bottom div .main-table{
  width: 100%;
  margin-top: 25px;
}
.data-content .data-main .main-bottom div .main-table table{
  width: 100%;
}
.data-content .data-main .main-bottom div .main-table thead tr{
  height: 42px;
}
.data-content .data-main .main-bottom div .main-table th{
  font-size: 12px;
  font-weight: 600;
  color: #61d2f7;
  text-align: center;
}
.data-content .data-main .main-bottom div .main-table th .th0,
.data-content .data-main .main-bottom div .main-table tbody th
{
  color: #61f763;
}
.data-content .data-main .main-bottom div .main-table th:nth-child(1){

}
.data-content .data-main .main-bottom div .main-table th:nth-child(2){

}
.data-content .data-main .main-bottom div .main-table td{
  color:#ccc;
  font-size: 10px;
  text-align: center;
}
.data-content .data-main .main-bottom div .main-table tbody tr:nth-child(2n-1){
  background-color: #072951;
  box-shadow: -10px 0px 15px #2CA654 inset, 10px 0px 15px #126168 inset;
}