.content-radar {
    position: relative;
    max-width: 100%;
    min-width: 1200px;
    height: 100%;
    background-image: url('../images/bg-1.png');
    -webkit-background-size: cover;
    background-size: cover;
}
.div-main-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 189px;
    width: 100%;
    color: #ffffff;
    font-size: 62px;
    font-weight: bold;
    text-align: center;
}
.div-main-subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 278px;
    width: 100%;
    color: #ffffff;
    font-size: 18px;
    font-weight: 200;
    text-align: center;
}
.div-search-bar {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    top: 332px;
    width: 452px;
    height: 56px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    color: #0052D9;
    font-size: 22px;
    font-weight: 300;
    line-height: 56px;
    text-align: center;
    background-color: #ffffff;
    background-image: url('../images/search_icon@2x.png');
    background-position: 23px 16px;
    background-repeat: no-repeat;
}
/* 雷达 */
.container-radar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.halo {
    position: absolute;
    left: 50%;
    bottom: -554px;
    transform: translateX(-50%);
    display: inline-block;
    width: 1108px;
    height: 1108px;
    background-image: url('../images/halo.png');
    background-size: cover;
}
.radar {
    position: absolute;
    display: inline-block;
    left: 50%;
    bottom: -383px;
    transform: translateX(-50%);
    width: 766px;
    height: 766px;
    background: url(../images/dial.png) no-repeat 50% 50%;
    background-size: cover;
    transform-origin: left;
    animation: rotate360-2 48s infinite ease;
}
.pointer {
    position: absolute;
    z-index: 10;
    left: 197px;
    bottom: 50%;
    width: 357px;
    height: 417px;
    transform-origin: bottom right;
    background-image: url('../images/pointer.png');
    background-position: center;
    background-size: 100% 100%;
    animation: rotate360 4s infinite linear;
}
.radar-circle {
    position: absolute;
    left: 50%;
    bottom: -418px;
    transform: translateX(-50%);
    width: 836px;
    height: 836px;
    border: 1px solid #4bedfb;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transform-origin: top;
}
.circle-1 {
    -webkit-animation: spread 4s infinite linear;
    -o-animation: spread 4s infinite linear;
    animation: spread 4s infinite linear;
}
.circle-2 {
    -webkit-animation: spread2 4s infinite linear;
    -o-animation: spread2 4s infinite linear;
    animation: spread2 4s infinite linear;
}
.circle-3 {
    -webkit-animation: spread3 4s infinite linear;
    -o-animation: spread3 4s infinite linear;
    animation: spread3 4s infinite linear;
}
@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate360-2 {
    0% {
        transform: rotate(0deg) translateX(-50%);
    }
    to {
        transform: rotate(-360deg) translateX(-50%);
    }
}
@keyframes spread {
    0% {
        width: 836px;
        height: 836px;
        bottom: -418px;
        opacity: 1;
    }
    66% {
        width: 1236px;
        height: 1236px;
        bottom: -618px;
        opacity: 0;
    }
    to {
        width: 1236px;
        height: 1236px;
        bottom: -618px;
        opacity: 0;
    }
}
@keyframes spread2 {
    0% {
        width: 836px;
        height: 836px;
        bottom: -418px;
        opacity: 0;
    }
    33% {
        width: 836px;
        height: 836px;
        bottom: -418px;
        opacity: 1;
    }
    to {
        width: 1236px;
        height: 1236px;
        bottom: -618px;
        opacity: 0;
    }
}
@keyframes spread3 {
    0% {
        width: 836px;
        height: 836px;
        bottom: -418px;
        opacity: 0;
    }
    66% {
        width: 836px;
        height: 836px;
        bottom: -418px;
        opacity: 1;
    }
    to {
        width: 1036px;
        height: 1036px;
        bottom: -518px;
        opacity: 0;
    }
}
/* 雷达波点动态效果 */
.radar-container-point-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 787px;
}
.radar-points-main {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1101px;
    height: 552px;
}
.radar-star-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/points.png');
    background-position: center;
    background-size: cover;
    animation: starDisappear 8s infinite linear;
}
.radar-star-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotateZ(180deg);
    background-image: url('../images/points.png');
    background-position: bottom;
    background-size: cover;
    animation: starAppear 8s infinite linear;
}
.radar-point {
    position: absolute;
    width: 44px;
    height: 44px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    /*border: 1px solid #f00;*/
}
.radar-point:hover {
    width: 44px;
    height: 44px;
    background-image: url('../images/point-big.png');
    background-position: center;
    background-size: 100% 100%;
}
.radar-point-1 {
    left: 342px;
    bottom: 10px;
}
.radar-point-2 {
    left: 195px;
    bottom: 194px;
}
.radar-point-3 {
    left: 417px;
    bottom: 287px;
}
.radar-point-4 {
    left: 523px;
    top: 166px;
}
.radar-point-5 {
    left: 648px;
    top: 216px;
}
.radar-point-6 {
    left: 696px;
    top: 329px;
}
.radar-point-7 {
    left: 709px;
    top: 391px;
}
.radar-point-8 {
    left: 727px;
    top: 485px;
}
@keyframes starDisappear {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes starAppear {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* 雷达标签动态效果 */
.radar-text-label {
    position: absolute;
    height: 65px;
    background-position: center;
    background-size: cover;
    color: #fff;
    font-size: 22px;
    line-height: 65px;
    text-align: center;
}
.radar-text-label-1 {
    bottom: 80px;
    left: 40px;
    width: 197px;
    background-image: url('../images/label-1@2x.png');
}
.radar-text-label-1:hover, .radar-text-label-active-1 {
    background-image: url('../images/label-active-1@2x.png');

}
.radar-text-label-2 {
    bottom: 275px;
    left: 0;
    width: 223px;
    background-image: url('../images/label-2@2x.png');
}
.radar-text-label-2:hover, .radar-text-label-active-2 {
    background-image: url('../images/label-active-2@2x.png');

}
.radar-text-label-3 {
    bottom: 405px;
    left: 123px;
    width: 189px;
    background-image: url('../images/label-3@2x.png');
}
.radar-text-label-3:hover, .radar-text-label-active-3 {
    background-image: url('../images/label-active-3@2x.png');

}
.radar-text-label-4 {
    bottom: 505px;
    left: 450px;
    width: 189px;
    background-image: url('../images/label-4@2x.png');
}
.radar-text-label-4:hover, .radar-text-label-active-4 {
    background-image: url('../images/label-active-4@2x.png');

}
.radar-text-label-5 {
    bottom: 430px;
    left: 790px;
    width: 189px;
    height: 84px;
    line-height: 84px;
    background-image: url('../images/label-5@2x.png');
}
.radar-text-label-5:hover, .radar-text-label-active-5 {
    background-image: url('../images/label-active-5@2x.png');

}
.radar-text-label-6 {
    bottom: 345px;
    left: 790px;
    width: 189px;
    background-image: url('../images/label-6@2x.png');
}
.radar-text-label-6:hover, .radar-text-label-active-6 {
    background-image: url('../images/label-active-6@2x.png');

}
.radar-text-label-7 {
    bottom: 205px;
    left: 900px;
    width: 254px;
    height: 84px;
    line-height: 84px;
    background-image: url('../images/label-7@2x.png');
}
.radar-text-label-7:hover, .radar-text-label-active-7 {
    background-image: url('../images/label-active-7@2x.png');

}
.radar-text-label-8 {
    bottom: 80px;
    left: 885px;
    width: 209px;
    background-image: url('../images/label-8@2x.png');
}
.radar-text-label-8:hover, .radar-text-label-active-8 {
    background-image: url('../images/label-active-8@2x.png');

}

@media screen and (max-height: 887px) {
    .content-radar {
        height: 1020px;
    }
    .div-main-title {
        transform: scale(0.8, 0.8) translateX(-63%);
    }
    .div-main-subtitle {
        transform: scale(0.8, 0.8) translateX(-63%);
    }
    .div-search-bar {
        transform: scale(0.8, 0.8) translateX(-63%);
    }
    .container-radar {
        transform: scale(0.8, 0.8);
    }
    .radar-container-point-text {
        transform: scale(0.8, 0.8);
    }
}
@media screen and (max-height: 768px) {
    .content-radar {
        height: 933px;
    }
    .div-main-title {
        transform: scale(0.7, 0.7) translateX(-75%);
    }
    .div-main-subtitle {
        transform: scale(0.7, 0.7) translateX(-75%);
    }
    .div-search-bar {
        transform: scale(0.7, 0.7) translateX(-75%);
    }
    .container-radar {
        bottom: 0;
        transform: scale(0.7, 0.7);
    }
    .radar-container-point-text {
        transform: scale(0.7, 0.7);
    }

}