/* html { 
  height:100%;
  overflow: hidden
} */
body { 
  width: 100%;
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto; 
  overflow-x: hidden; 
}
ul,
li{
  padding:0;
  margin:0;
  list-style: none;
}
.fl-l {
  float: left
}
.fl-r {
  float: right
}
.clear::after{
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.header{
  background-color:#072947
}
/* .header { position: fixed; padding-right: 25px; background-color: #0a3767; z-index: 12; } */
.content { 
  position: static; 
  top: auto; 
  bottom: auto;
  height:auto;
  padding-bottom: 35px;
  padding-top: 1rem; 
  text-align: left;
  background: url("../images/formative/bg.jpg") center center no-repeat; background-size: 100% 100%; 
}
.footer { 
  /* position: static; */
  position:absolute;
  bottom:0;
  width:100%;
  color:#fff;
  text-align: center
 }

.cover-box, .login-box { position: fixed; }

.content-title { height: 43px; width: 480px; margin: 0 auto 25px; background: url("../images/formative/c-title.png") center center no-repeat; background-size: 100% 100%; }
.content-title-mid { 
  /* width: 765px; 
  height: 30px;  */
  margin: 60px auto 25px;
  color:#89e2ff;
  text-align:center;
  font-size: 32px;
  /* background: url("../images/formative/content-title-mid.png") center center no-repeat; background-size: 100% 100%; */
   }
.content-wrap { width: 89.323%; margin: 0 auto; color: #fff; }
.content-wrap .wrap-box { float: left; }
.wrap-box-title { position: relative; width: 100%; height: 32px; text-indent: 18px; margin-bottom: 12px; box-sizing: border-box; text-align: left;}
.wrap-box-title:before { content: ''; display: block; width: 6px; height: 100%; position: absolute; left: 0; top: 0; background-color: #249bff; }
.wrap-box-title>div { display: block; width: 100%; height: 100%; line-height: 32px; background: url("../images/formative/title-bg.png") center left no-repeat; background-size: 100% 100%; }
.center-box { padding: 25px; box-sizing: border-box;background: url("../images/formative/box-bg.png") center no-repeat; background-size: 100% 100%; }

.wrap1 .wrap-box-left { width: 30.9%; }
.wrap1 .wrap-box-right { width: 67.35%; margin-left: 1.166%; }
.wrap1 .wrap-box .center-box { height: 245px; }
.wrap1 .wrap-box-left .center-box>ul>li { float: left; width: 50%; padding-left: 10%; box-sizing: border-box; }
.wrap1 .wrap-box-left .center-box>ul>li.mt-item { margin-top: 10%; }
.wrap1 .wrap-box-left .center-box>ul>li .item-ti { color: #19b9f6; margin-bottom: 15px; }
.wrap1 .wrap-box-left .center-box>ul>li .item-opt { color: #fff; font-size: 14px; }
.wrap1 .wrap-box-left .center-box>ul>li .item-opt>span { color: #2ecd92; font-size: 24px; }

.wrap2 .wrap-box-left { width: 65.30%; }
.wrap2 .wrap-box-right { width: 33.50%; margin-left: 1.166%; }
.wrap2 .wrap-box .center-box { height: 325px; }
.wrap2 .wrap-box .center-box .center-box-top { width: 100%; height: 40px; }
.wrap2 .center-box-top .latest-time,.wrap2 .center-box-top .choose-time { width: 190px; height: 100%; box-sizing: border-box; padding: 0 10px; background-color: #072851; border: 1px solid #249bff; border-radius: 2px; }
.wrap2 .latest-time { position: relative; }
.wrap2 .latest-time .latest-value { width: 100%; height: 100%; position: relative; box-sizing: border-box; line-height: 38px; padding-left: 30px; padding-right: 30px; color: #0ba7e2; cursor: pointer; }
.wrap2 .latest-time .latest-value:before { content: ''; display: block; width: 16px; height: 16px; position: absolute; top: 11px; left: 0; background: url("../images/formative/time.png") left center no-repeat; background-size: 100%; }
.wrap2 .latest-time .latest-value:after { content: ''; display: block; width: 14px; height: 8px; position: absolute; top: 15px; right: 8px; -webkit-transition: all .5s; transition: all .5s; background: url("../images/formative/arrow.png") left center no-repeat; background-size: 100%; }
.wrap2 .latest-time.active .latest-value:after {  -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all .5s; transition: all .5s; }
.wrap2 .latest-time>ul { position: absolute; left: -1px; right: -1px; top: 38px; border: 1px solid #249bff; border-top: none; background-color: #072851; z-index: 2; }
.wrap2 .latest-time>ul>li { padding-left: 40px; line-height: 35px; border-top: 1px solid #4492c8; color: #fff; cursor: pointer; }
.wrap2 .latest-time>ul>li:hover { background-color: #0A7ED1; }

.wrap2 .center-box-top .choose-time { position: relative; line-height: 38px; padding-left: 50px; color: #0ba7e2; cursor: pointer; }
.wrap2 .center-box-top .choose-time:before { content: ''; display: block; width: 18px; height: 17px; position: absolute; top: 10px; left: 10px; background: url("../images/formative/calendar.png") left center no-repeat; background-size: 100%; }


.wrap3 { margin: 30px auto 0; }
.wrap3 .wrap-box-left {width: 69.97%; /*width:40.08%*/}
.wrap3 .wrap-box-middle,
.wrap3 .wrap-box-right { width: 28.80%; margin-left: 1.16%; }
.wrap3 .wrap-box .center-box { height: 480px; }

.wrap-box .center-box table, .wrap-box .center-box table td, .wrap-box .center-box table th { text-align: center; border: none; }
.wrap-box .center-box table{width:100%}
.wrap-box .center-box table tr { line-height: 40px;color: #b8cadf }
.wrap-box .center-box table .table-ti { line-height: 50px; background: #1e5fc2; color: #fff; font-size: 18px; border-radius: 2px; }
.wrap-box .center-box table .table-no-bg { background: #0b4f8e }

.bottom-panel { position: relative; }
.bottom-panel .order-panel { margin-top: 35px; float: left; }
.order-panel .left-order-btn, .order-panel .order-ul, .order-panel .right-order-btn { float: left; }
.order-panel .order-ul>li { float: left; }
.order-panel .left-order-btn,
 .order-panel .order-ul>li, 
 .order-panel .right-order-btn {
   height: 24px; 
   padding:0 .3em;
   line-height: 22px; 
   box-sizing: border-box; 
   margin-left: 10px; 
   border-radius: 2px; 
   border: 1px solid #22c0dd; 
   color: #22c0dd; 
   text-align: center; 
   cursor: pointer; 
  }
.order-panel .left-order-btn { margin-left: 0; }
.order-panel .left-order-btn:hover, .order-panel .order-ul>li:hover, .order-panel .right-order-btn:hover { color: #fff; border: 1px solid #2ecd92; background-color: rgba(46,205,146,.2); }
.order-panel .order-ul>li.active { color: #fff; border: 1px solid #2ecd92; background-color: rgba(46,205,146,.2); }

.excelButton { width: 100px; height: 30px; line-height: 30px; position: absolute; right: 0; top: 30px; background: url("../images/formative/excel.png") center center no-repeat; text-align: center; text-transform: uppercase; color: #fff; cursor: pointer; }
.excelButton:hover {background: #35c788; }

@media screen and (max-width:1600px) {
    .content-title { width: 386px; height: 40px; }
    .content-title-mid { width: 637px; height: 25px; }
    .wrap1 .wrap-box-left .center-box>ul>li .item-opt>span { font-size: 20px; }
    .wrap1 .wrap-box-left .center-box>ul>li .item-ti { font-size: 14px; }

    .wrap3 .wrap-box-right .bottom-panel .order-panel { margin-top: 15px; }
    .wrap3 .wrap-box-right .bottom-panel .excelButton { top: 45px; }
}