i { font-style: normal; }
.mark { z-index:101; }
.left { float: left; }
.right { float: right; }
.clearfix { zoom: 1; }
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.page-radar ::-webkit-input-placeholder { /* WebKit browsers */
    color: #86a5ef;
    font-size: 14px;
}
.fn-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-radar ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #86a5ef;
    font-size: 14px;
  }
  
.page-radar :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #86a5ef;
    font-size: 14px;
}   
.page-radar{
    width:1114px;
    margin:0 auto;
    background:url('../img/back.png') no-repeat;
    padding:10px 30px 20px 56px; 
    border-radius:5px;
    position: fixed;
    z-index: 102;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page-radar .modal-close{
    position:absolute;
    right:15px;
    top:0;
    color:#fff;
    font-size:25px;
}
.page-radar .form-box {
    width:300px;
    float:left;
    font-size:12px;
    color:#b9ccd9;
    margin-right: 60px;
}
.page-radar .form-box .logo-box{
    padding-bottom:10px;
}
.page-radar .form-box .logo-box img{
    position: relative;
    left:-20px;
}
.page-radar .title{
    color:#fff;
    font-size:16px;
    margin:20px 0;
    padding-left:8px;
    border-left:4px solid #5939fe;
}
.page-radar .form .form-input{
    box-sizing: border-box;
    width:100%;
    height:38px;
    line-height: 36px;
    border:1px solid #4b62bb;
    border-radius:5px;
    background-color:#354a9a;
    padding-left:8px;
    font-size:14px;
    color:#86a5ef;
}
.page-radar .form .classify-item{
    float:left;
    box-sizing: border-box;
    width:90px;
    height:32px;
    line-height:32px;
    margin:0 15px 20px 0;
    background-color:#354a9a;
    border-radius:5px;
    text-align: center;
    color:#ccdeff;
    font-size:14px;
    cursor: pointer;
}
.page-radar .form .classify-item.on{
    background-color:#566bcd;
    color:#ccddff;
}
.page-radar .form .classify-item:nth-child(3n){
    margin-right:0;
}
.page-radar .form .page-radar .radarSelect{
    box-sizing: border-box;
    background-color:rgba(29,99,133,.7);
    border:1px solid #5491b4;
    color:#86a5ef;
    width:100%;
    border-radius:5px;
    position: relative;
}
.page-radar .btn-box{
    padding:20px 0;
}
.page-radar .btn-box .btn-blue{
    display:inline-block;
    box-sizing: border-box;
    width:100%;
    font-size:14px;
    color:#fff;
    background-color:#3fb4ff;
    padding:8px 0;
    text-align: center;
    border-radius:5px;
    cursor: pointer;
    font-weight: 700;
}
.page-radar .btn-box .btn-blue:hover{
    background-color:#41a3ff;
}
.page-radar .btn-box .btn-end,.page-radar .btn-box .btn-end:hover{
    background-color:#16767f;
    border-color: #16767f;
    color: #8dffc0;
    cursor: inherit;
}
.page-radar .btn-box .btn-end img{
    display:inline-block;
    vertical-align: text-bottom;
    margin-right:3px;
}
.page-radar #radarMain canvas {
    background: url(../img/radar.png) no-repeat !important;
    background-size: 100% 97% !important;
}
.page-radar #radarMain2 canvas{
    background: url(../img/radar.png) no-repeat !important;
    background-size: 100% 97% !important;
}
.page-radar .chart-box{
    float:left;
    position: relative;
    height:550px;
}
.page-radar .chart-box .successRate{
    position: absolute;
    z-index: 10;
    left: 238px;
    top: 142px;
    color: #fff;
    font-size:14px;
    font-weight:700;
}
.page-radar .chart-box .successRate .rate-item{
    margin-bottom:20px;
}
.page-radar .chart-box .robot-box{
    position: absolute;
    bottom:-30px;
    right:266px;
    z-index: 20;
}
.page-radar .chart-box .robot-box img{
    cursor: pointer;
}
.page-radar .chart-box .robot-box .robot-text{
    position: absolute;
    top:20px;
    right:80px;
    width:430px;
    box-sizing: border-box;
    padding:15px;
    background-color:#fff;
    border-radius:10px;
    font-size:14px;
    color:#363636;
}
.page-radar .chart-box .robot-box .robot-text.noShow{
    width:184px;
    padding:10px;
}
.page-radar .chart-box .robot-text:after{
    content:'';
    position: absolute;
    right:-8px;
    top:8px;
    display: inline-block;
    background:url('../img/polygon.png') no-repeat;
    width:8px;
    height:8px;
}
.page-radar .chart-box .robot-text .til{
    color:#343a5a;
}
.page-radar .chart-box .robot-box .close{
    position:absolute;
    right:10px;
    top:0px;
    font-size:16px;
    color:#9d9d9d;
}
.page-radar .chart-box .statistics{
    width:215px;
    box-sizing:border-box;
    padding:20px 10px 10px;
    font-size:12px;
    color:#b9ccd9;
    margin-left:30px;
    background: url('../img/statistics-back.png') no-repeat;
    background-size:100% 100%;
}
.page-radar .chart-box .statistics .result-til{
    color:#b9ccd9;
    font-weight: bold;
}
.page-radar .chart-box .statistics .statistics-num{
    padding: 0;
    font-size: 14px;
    margin-top: 10px;
}
.page-radar .chart-box .statistics .num-item{
    padding: 0 8px;
    position: relative;
}
.page-radar .chart-box .statistics .statistics-num-selected{
    margin-top: 10px;
    background-color: #3545ad;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fbf59a;
    position: relative;
}
.page-radar .chart-box .statistics .selected-tag{
    display: inline-block;
    color: #222562;
    background-color: #fff9b7;
    font-size: 12px;
    border-radius: 10px;
    margin-right: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}
.page-radar .chart-box .statistics .toolTip{
    position: absolute;
    left: 0;
    bottom: -25px;
    padding: 2px 5px;
    background: #000;
    border: 1px solid #777;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
    z-index: 20;
    display: none;
}
.page-radar .chart-box .statistics .selected-text{
    white-space: nowrap; /* 允许文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 当溢出时显示省略号... */
}
.page-radar .chart-box .statistics .tip{
    padding:0 0 0px;
}
.page-radar .chart-box .statistics .tip em{
    color:#fff;
}
.page-radar .chart-box .btn-box{
    padding: 45px 0 10px;
    font-size: 12px;
    text-align: center;
    font-weight: normal;
}
.page-radar .chart-box .btn-box .text-qi{
    font-size: 10px;
    font-weight: normal;
}
.page-radar .chart-box .btn-box .btn-blue{
    margin-bottom: 5px;
}
.page-radar .chart-box .btn-blue:first-child{
    background-image: linear-gradient(to right, #7859ff, #ff5c7b);
    border: none;
}
.page-radar .notice-box .title{
    margin:15px 0;
}
.page-radar .notice-box .notice-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-radar .notice-box .notice-item{
    width:48%;
    box-sizing: border-box;
    padding:23px 26px;
    float:left;
    background: url('../img/notice-back.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page-radar .notice-box .notice-item .text{
    float:left;
    font-size:12px;
    color:#b9ccd9;
    margin-left: 5px;
}
.page-radar .notice-box .notice-item .til{
    font-size:16px;
    color:#fff;
    padding-bottom:5px;
    font-weight: 400;
}
.page-radar .notice-box .notice-item .btn-box{
    text-align: right;
    padding:10px 0 0;
}
.page-radar .notice-box .notice-item .notice-btn{
    display:inline-block;
    padding:5px 20px;
    background-color:#3fb4ff;
    color:#fff;
    border-radius: 5px;
    cursor: pointer;
}
.page-radar .notice-box .notice-item .notice-btn:hover{
    background-color:#0f7ffd;
}
.page-radar .chart-box .num-list .num-item{
    float:left;
    background:url('../img/notice-back.png') no-repeat;
    text-align: center;
    font-size:14px;
    color:#b9ccd9;
    width:200px;
    padding:20px 0;
    margin-right:68px;
}
.page-radar .chart-box .num-list{
    padding:45px 0 20px; 
}
.page-radar .chart-box .num-list .num-item:last-child{
    margin-right:0;
}
.page-radar .chart-box .num-item .number{
    font-size:36px;
    color:#fffae0;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.page-radar .chart-box .ranking-box {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-radar .chart-box .ranking-box .ranking-item {
  text-align: center;
  font-size: 16px;
  color: #fbf59a;
  width: 228px;
  height: 60px;
  line-height: 60px;
}
.page-radar .chart-box .ranking-box .ranking1 {
  background: url(../img/sort_01.png) no-repeat;
}
.page-radar .chart-box .ranking-box .ranking2 {
  background: url(../img/sort_02.png) no-repeat;
}
.page-radar .chart-box .ranking-box .ranking3 {
  background: url(../img/sort_03.png) no-repeat;
}
.page-radar .chart-box .radar-loading{
    position: relative;
}
.page-radar .chart-box .radar-back{
    background: url(../img/radar-pic3.png) no-repeat;
    width: 480px;
    height: 485px;
    position: absolute;
    left: 0;
    top: 0;
}
.page-radar .chart-box .rotate{
    top: 29px;
    left: 234px;
    position: absolute;
    -webkit-transform-origin: 0 219px;
    transform-origin: 0 219px;
    transform: rotate(-80deg);
    animation: radar 3s linear infinite;
}
.page-radar .chart-box .radar-loading{
    width: 480px;
    height: 480px;
    margin-left: 120px;
}
.page-radar .chart-box .radar-loading .dot{
    display: block;
    border-radius: 50%;
    animation-timing-function: linear;
}
.page-radar .chart-box .radar-loading .dot1{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: blips 3s infinite;
    animation-delay: .5s;
}
.page-radar .chart-box .radar-loading .dot2{
    position: absolute;
    width: 40%;
    height: 60%;
    animation: blips2 3s infinite;
    animation-delay: 1.5s;
}
.page-radar .chart-box .radar-loading .dot3{
    position: absolute;
    width: 120%;
    height: 60%;
    animation: blips 3s infinite;
}
.page-radar .chart-box .radar-tip{
    text-align: center;
    width:180px;
    font-size:16px;
    color:#76f0fd;
    font-weight:700;
    position: absolute;
    left: 230px;
    bottom: -30px;
}
@keyframes radar{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes blips {
    14% {
        background: radial-gradient(.5vmin circle at 75% 70%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
    }
    14.0002% {
        background: radial-gradient(.5vmin circle at 75% 70%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 63% 72%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
    }
    25% {
        background: radial-gradient(.5vmin circle at 75% 70%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 63% 72%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 56% 86%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 1;
    }
    100% {
        background: radial-gradient(.5vmin circle at 75% 70%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 63% 72%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 56% 86%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
    }
}
@keyframes blips2 {
    14% {
        background: radial-gradient(.5vmin circle at 56% 86%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
    }
    14.0002% {
        background: radial-gradient(.5vmin circle at 56% 86%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 63% 72%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
    }
    25% {
        background: radial-gradient(.5vmin circle at 56% 86%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 63% 72%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 75% 40%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 1;
    }
    100% {
        background: radial-gradient(.5vmin circle at 56% 86%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 63% 72%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(.5vmin circle at 75% 40%, #ffffff 10%, #b7ffff 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
    }
}
.page-radar .form .radarSelect{
    box-sizing: border-box;
    background-color:#354a9a;
    border:1px solid #4b62bb;
    color:#ccdeff;
    width:100%;
    border-radius:5px;
    position: relative;
    line-height: 34px;
    font-size:14px;
}
.page-radar .radarSelect div{
    height:0;
    margin-top:-1px;
    background-color:#354a9a;
    border:1px solid #4b62bb;
    color:#ccdeff;
    border-radius:0 0 3px 3px;
    overflow:hidden;
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute;
    top:100%;
    left:-1px;
    right:-1px;
}
.page-radar .radarSelect .selected {
  line-height: 23px;
  padding-left: 8px;
}
.page-radar .radarSelect li{
  display: block;
  font-size: 16px;
  line-height: 1;
  padding: 8px 7px 10px;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  color : #ccdeff !important;
}
.page-radar .radarSelect ul{height:100%;width:100%;list-style:none;overflow-y:auto;}
.page-radar .radarSelect ul::-webkit-scrollbar{width:8px;height:100%}
.page-radar .radarSelect ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: #56bed0;
    background: #56bed0;
}
.page-radar .radarSelect ul::-webkit-scrollbar-track {
    border-radius: 0;
    -webkit-box-shadow: #0b4865;
    background: #0b4865;

}
.page-radar .radarSelect li{font-size:14px;}
.page-radar .radarSelect li.focus{background-color:rgba(29,99,133,1);color:#76f0fd !important;}
.page-radar .radarSelect .old{display:none;}
.page-radar .radarSelect .carat{display:block;width:13px;height:6px;background:url(../img/carat.png) no-repeat;position:absolute;right:15px;top:15px;transform: rotate(0);transition: .5s all ease-in-out;}
.page-radar .radarSelect:hover{box-shadow:0 0 5px rgba(0,0,0,.15);}
.page-radar .radarSelect.open{z-index:2;}
.page-radar .radarSelect.open div{opacity:1;filter:alpha(opacity=100);z-index:2;}
.page-radar .radarSelect.open .carat{transform: rotate(180deg);}
@media (max-height:800px){
    .page-radar{
        margin-top:-290px;
    }
    .page-radar .notice-box{
        display:none;
    }
    .page-radar .radarSelect.open div{
        max-height:100px;
    }
}