html{
    font-size:100px;
}
@media only screen and (max-width:4100px){
    html{
        font-size: 200px;
    }
}
@media only screen and (max-width:3840px){
    html{
        font-size: 200px;
    }
}
@media only screen and (max-width:2880px){
    html{
        font-size: 150px;
    }
}
@media only screen and (max-width:2050px){
    html{
        font-size: 100px;
    }
}
@media only screen and (max-width:1920px){
    html{
        font-size: 100px;
    }
}
@media only screen and (max-width:1440px){
    html{
        font-size: 75px;
    }
}


p,ul,li{margin:0;padding:0;}
@font-face{
    font-family:Bgothm;
    src:url(../fonts/bgothm.eot?e8adc41247ec44f51d1cead8fdf45b73);
    src:url(../fonts/bgothm.eot?e8adc41247ec44f51d1cead8fdf45b73) format("embedded-opentype"),
    url(../fonts/bgothm.woff?e386bd26958d7169f69e43d56416a1fd) format("woff"),
    url(../fonts/bgothm.ttf?3258ca8bb3a1861325c63ec376c3941a) format("truetype");
    font-style:normal;
    font-weight:100
}
.f26{font-size:0.26rem;}
.f24{font-size:0.24rem;}
.f69{font-size:0.69rem;}
.mt50{margin-top:0.5rem;}

/*地图标记*/
.amap-marker-label {
     border: 0;
     background-color: transparent;
}
.marker-label{
    background: url(../img/carNameShowRU_blue.svg) no-repeat;
    width: 98px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #000;
    background-size: 98px 42px;
    font-size: 14px !important;
}
/*logo*/
.zw-logo {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    width: 1.50rem;
    z-index: 99;
}
.container-box{background: rgba(18, 27, 36, 1);}

/*时钟*/
.timer-container{position: absolute;top:.4rem;left:50%;transform: translateX(-50%);}
.timer-container .item{border:1px solid #1e95ff;border-radius:0.05rem;margin-right:0.1rem;display: inline-block;width:0.57rem;background: rgba(41,85,252, .18);line-height:0.69rem;font-size:0.69rem;font-family: Bgothm;letter-spacing: -0.1rem;}
.timer-container .dot{
    display: inline-block;width:0.22rem;font-size:0.69rem;font-family: Bgothm;letter-spacing: -0.1rem;
    -webkit-animation: opacity 1s infinite;
    animation: opacity 1s infinite;
}
/*实时报警数*/
.container-box{position: relative;color:#fff;}
.container-box,.mapContainer{width:100%;height:100%;overflow: hidden;}
.content1{position: absolute;top:0rem;left:0rem;padding:0.4rem 0 0 0.4rem;width:4.98rem;}
.content2{position: absolute;top:0rem;right:0rem;padding:1rem 0.4rem 0 0;width:4.98rem;}
.title{padding-left:0.32rem;font-size:0.32rem;color:#fff;background: url("../img/threeRect.png") left center no-repeat;background-size: 0.22rem 0.26rem;}
.risk-number{position:relative;font-family: Bgothm;letter-spacing: -0.1rem;height:0.69rem;line-height:0.69rem;overflow: hidden;}
.safeboard-bg{
    width:100%;
    background:rgba(18, 27, 36, 0.8);
    padding:0.1rem 0.2rem;
}
/*风险占比*/
.risk-ratio{margin-top:0.1rem;}
.risk-ratio .box{margin:0.1rem 0.1rem 0rem 0;width:1.81rem;height:0.9rem;background: rgba(41,85,252, .18);float:left;}
.risk-ratio .num{margin-left:0.1rem;line-height:0.54rem;font-family: Bgothm;font-size:0.4rem;color:#1e95ff;letter-spacing: -0.04rem;}
.risk-ratio .per{font-family: Bgothm;letter-spacing: -0.15rem;font-size:0.3rem;color:#1e95ff;}
.risk-ratio .txt{font-size:0.2rem;color:#7ca1d2;margin-left:0.13rem;margin-top:-0.05rem}
/*报警事件*/
.persent-content{margin-top:0.1rem;}
.persent-tit{height:0.45rem;line-height:0.45rem;font-size:.24rem;color:#7ca1d2;}
/*.persent-box{width:2.5rem;float:left;height:0.45rem;overflow: hidden;}*/
.persent-item{position:relative;}
.persent-box{width:100%;height:0.45rem;overflow: hidden;}
.persent{
    display:inline-block;
    background: red;
    height:100%;
    background:linear-gradient(to left, rgba(13, 32, 50, 0.8), rgba(24, 76, 128, 0.8));
    background:-webkit-linear-gradient(to left, rgba(13, 32, 50, 0.8), rgba(24, 76, 128, 0.8));
    transition: all .5s ease-in-out;
}
.risksItem .persent-text{
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 2000;
  transform-origin: center;
}
.risksItem .persent-num em{    font-size: 0.2rem;letter-spacing: -3px;}
.risksItem.active{
  transform: translateZ(0);
}
.risksItem.active .persent-text{
  animation: transFunc 0.6s ease;
}

@keyframes transFunc {
  20%{
    transform: rotateX(270deg);
  }

  100%{
    transform: rotateX(360deg);
  }
}

.persent-text{position:absolute;left:0.1rem;top:0;line-height:0.45rem;font-size:.24rem;color:#7ca1d2;}
#riskWrapper .persent-item{margin:0.15rem 0;}
/*.persent-num{line-height:0.45rem;float: right;font-size:0.45rem;color:#1e95ff;margin-left:0.1rem;font-family: Bgothm;letter-spacing: -0.07rem;}*/
.persent-num{position:absolute;right:0;top:0;line-height:0.45rem;font-size:0.45rem;color:#1e95ff;margin:0 0.1rem;font-family: Bgothm;letter-spacing: -0.07rem;}
/*底部报警状态*/
.bottom-box{position:absolute;left:0.53rem;right:0.53rem;bottom:0.3rem;width:100%;}
.status-list .item{font-size:0.26rem;width:12%;float: left;display: inline-block;}
.status-list .ico{vertical-align:middle;width:0.5rem;display:inline-block;height:0.5rem;border-radius: 50%;margin-right:0.1rem;}
/*三角图标*/
.y-ratio-icon{display:inline-block;width:0.25rem;height:0.13rem;}
.y-ratio-icon.up{background:url("../img/increase-percent.png") center no-repeat;background-size:0.25rem 0.13rem;}
.y-ratio-icon.down{background:url("../img/reduce-percent.png") center no-repeat;background-size:0.25rem 0.13rem;}
/*动画翻转*/
.risk-event{
    height: 0.45rem;
    line-height:0.45rem;
}
.flip-box {
    width: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 2000;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    transition: transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
}
.flip-box>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}
.flip-box .front {
    z-index: 2
}
.flip-box .backend {
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    z-index: 1;
}
.flip-box.active{
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    transition: transform .8s ease-in-out,-webkit-transform .8s ease-in-out
}
/*动画数字滚动*/
.num-box{
    position: absolute;
    top:0;
    height: 200%;
}
.num-box>span{
    display: block;
    height: 50%;
}
.num-box.active{
    -webkit-transition: top .3s;
    transition: top .3s;
    top: -100%
}
/*时钟动画*/
@-webkit-keyframes opacity {
    0% {
        opacity: 0;
        filter: alpha(opacity=0)\9
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100)\9
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
        filter: alpha(opacity=0)\9
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100)\9
    }
}