.vide-head-img {
    width: 100%;
    overflow: hidden;
    height: 500px;
    background-image: url('../../Images/MyImage/banner2.jpg');
    background-position: center;
    background-repeat: no-repeat;
}

.vide-content {
    border-left: 1px solid #D2D2D2;
    overflow: hidden;
    margin-bottom: 150px;
}

.vide-product-item {
    width: 688px;
    margin: 0 auto 10px auto;
    border-top: 1px solid transparent;
}

    .vide-product-item:last-of-type {
        margin-bottom: 0;
    }

.vide-item-title {
    color: #424242;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
}

.vide-item-text {
    margin-top: 8px;
    color: #A6A6A6;
    text-align: center;
    font-size: 18px;
    line-height: 32px;
}

    .vide-item-text img {
        margin-top: 80px;
    }

.product-fg {
    color: #0066FF;
}

.china-map + .product-fg {
    margin-top: -160px;
}

.product-fg label {
    font-size: 18px;
}

.product-fg span {
    font-size: 72px;
    font-weight: bold;
}

.product-fg em {
    font-size: 32px;
    font-weight: bold;
}
/*地图开始**/

.china-map {
    width: 748px;
    height: 618px;
    margin-left: calc(100% - 748px);
    background: url(/Images/MyImage/map-bg-1.png) center no-repeat;
    position: relative;
    /*transform: scale(0.8);*/
}

.region-list {
    position: absolute;
    left: 0;
    top: 0
}

.area-box .dot {
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #a2a9b4;
    opacity: 1;
    filter: alpha(opacity=100)
}

.area-box .pulse {
    background-color: #8bc1ff;
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 10px;
    /*border: 2px solid #b7b7b7;*/
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    border-radius: 48px;
    /*-webkit-box-shadow: 0 0 4px #82878f,0 0 10px #82878f inset;
            -moz-box-shadow: 0 0 4px #82878f,0 0 10px #82878f inset;
            box-shadow: 0 0 4px #82878f,0 0 10px #82878f inset;*/
    /*opacity: .12;
            filter: alpha(opacity=0);*/
    opacity: 1;
    -webkit-animation: warn 2s ease-out both;
    -moz-animation: warn 2s ease-out both;
    -o-animation: warn 2s ease-out both;
    animation: warn 2s ease-out both;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    /*background: 0 0*/
}

.area-box .delay-01 {
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0
}

.area-box .delay-02 {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s
}

.area-box .delay-03 {
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -o-animation-delay: .8s;
    animation-delay: .8s
}

.area-box .delay-04 {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.area-box .delay-05 {
    -webkit-animation-delay: 1.6s;
    -moz-animation-delay: 1.6s;
    -o-animation-delay: 1.6s;
    animation-delay: 1.6s
}

.area-box .delay-06 {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s
}

.area-box .delay-07 {
    -webkit-animation-delay: 2.4s;
    -moz-animation-delay: 2.4s;
    -o-animation-delay: 2.4s;
    animation-delay: 2.4s
}

.area-box .delay-08 {
    -webkit-animation-delay: -.4s;
    -moz-animation-delay: -.4s;
    -o-animation-delay: -.4s;
    animation-delay: -.4s
}

.area-box .delay-09 {
    -webkit-animation-delay: -.8s;
    -moz-animation-delay: -.8s;
    -o-animation-delay: -.8s;
    animation-delay: -.8s
}

.area-box .delay-10 {
    -webkit-animation-delay: -1.2s;
    -moz-animation-delay: -1.2s;
    -o-animation-delay: -1.2s;
    animation-delay: -1.2s
}

.area-box .delay-11 {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s
}

.region-list.active .area-box .dot {
    background: #8bc1ff
}

.region-list.active .area-box .pulse {
    border-color: #8bc1ff;
    top: 0;
    left: 0;
    height: 10px;
    width: 10px;
    /*-webkit-box-shadow: 0 0 12px #0080d9,0 0 20px #0080d9 inset;
            -moz-box-shadow: 0 0 12px #0080d9,0 0 20px #0080d9 inset;
            box-shadow: 0 0 12px #0080d9,0 0 20px #0080d9 inset*/
}

.region-list.waite .area-box .dot {
    background: #f90
}

.region-list.waite .area-box .pulse {
    background-color: #f90
}

.show-regin {
    position: absolute;
    left: 2px;
    height: 0;
    top: 0;
    width: 11px;
    opacity: 0;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.online-node .show-regin, .region-list:hover .show-regin, .underline-node .show-regin, .waite-node .show-regin {
    height: 127px;
    opacity: 1
}

.show-regin span {
    width: 80px;
    position: absolute;
    left: 8px;
    top: -11px;
    padding: 6px 10px;
    font-size: 14px;
    color: #ccc;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    white-space: nowrap;
}

.postition-10 .show-regin span {
    left: 0
}

.postition-4 .show-regin span {
    left: -4px;
    top: -27px;
}

.postition-6 .show-regin span {
    left: -40px
}

.postition-13 .show-regin span {
    left: -32px;
    top: -22px;
}

.postition-21 .show-regin span {
    left: -40px;
    top: -21px;
}

.postition-22 .show-regin span {
    left: -30px;
    top: -21px;
}

.postition-25 .show-regin span {
    left: 0px;
    top: -21px;
}

.area-box {
    z-index: 77
}

.show-regin {
    z-index: 66
}

.region-list.active .show-regin span {
    position: relative;
    color: #8bc1ff
}

.region-list.waite .show-regin span {
    text-align: left;
    color: #f90
}

.postition-1 {
    left: 377px;
    top: 298px;
}

.postition-2 {
    left: 381px;
    top: 381px;
}

.postition-3 {
    left: 418px;
    top: 522px;
}

.postition-4 {
    left: 593px;
    top: 372px;
}

.postition-5 {
    left: 510px;
    top: 523px;
}

.postition-6 {
    left: 487px;
    top: 517px;
}

.postition-7 {
    left: 620px;
    top: 204px;
}

    .postition-7.region-list.active .area-box .pulse {
        top: 0px;
        left: 0px;
        width: 10px;
        height: 10px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%
    }

.postition-8 {
    left: 547px;
    top: 237px;
}

.postition-9 {
    left: 590px;
    top: 420px;
}

    .postition-9.region-list.active .area-box .pulse {
        top: 0px;
        left: 0px;
        width: 10px;
        height: 10px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%
    }

.postition-10 {
    left: 557px;
    top: 479px;
}

.postition-11 {
    left: 540px;
    top: 299px;
}

.postition-13 {
    left: 490px;
    top: 276px;
}

.postition-14 {
    left: 519px;
    top: 265px;
}

.postition-15 {
    left: 438px;
    top: 324px;
}

.postition-16 {
    left: 510px;
    top: 317px;
}

.postition-17 {
    left: 512px;
    top: 396px;
}

.postition-18 {
    left: 405px;
    top: 415px;
}

.postition-19 {
    left: 404px;
    top: 466px;
}

.postition-20 {
    left: 488px;
    top: 436px;
}

.postition-21 {
    left: 556px;
    top: 375px;
}

.postition-22 {
    left: 579px;
    top: 364px;
}

.postition-23 {
    left: 610px;
    top: 381px;
}

.postition-24 {
    left: 533px;
    top: 442px;
}

.postition-25 {
    left: 499px;
    top: 522px;
}

.douhao {
    width: 0
}

.al-main {
    float: right;
    width: 990px;
    box-shadow: 0 0 15px rgba(0,0,0,.15);
    background-color: #fff;
    padding: 20px 0;
    background-image: url('../../Images/MyImage/test16.jpg');
    background-repeat: no-repeat;
    background-position: right center;
}

    .al-main:after {
        content: "";
        display: block;
        clear: both;
    }

    .al-main ul {
        float: left;
        cursor: pointer;
        padding: 30px 45px 30px 0;
        border-right: 1px solid #eee;
    }

        .al-main ul li {
            padding: 3px 30px;
            margin-top: 20px;
            box-shadow: 0px 10px 12px 0px rgba(10, 2, 4, 0.1);
            margin-left: -45px;
            background-color: #fff;
            text-align: center;
            transition: all 0.2s ease-in-out;
        }

.al-conent {
    position: relative;
}

.al-active {
    background-color: #0067bc !important;
    box-shadow: 0px 10px 12px 0px rgba(0, 103, 188, 0.1) !important;
    color: #fff;
}

.al-item {
    position: absolute;
    top: 90px;
    left: 150px;
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.2s ease-in-out;
}

.al-item-active {
    opacity: 1;
    transform: translateY(0);
}

.al-text {
    width: 200px;
    margin-left: 60px;
}
@keyframes spin {
    to

{
    transform: rotate(1turn);
}

}

@-webkit-keyframes warn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@-moz-keyframes warn {
    0% {
        -moz-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    100% {
        -moz-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@-o-keyframes warn {
    0% {
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    100% {
        -o-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@keyframes warn {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(5);
        -moz-transform: scale(3);
        -o-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

/***地图结束***/