@charset "utf-8";

.main-index {
}
.main-upgrade {
    padding-top:70px;
}

.main-header-nav-nobanner {
    background: linear-gradient(to bottom,#015665,#0297ab);
}

.main-banner {
    position: relative;
    height: 520px;
    background: #31363a;
}

.singe-banner {
    position: relative;
}

    .singe-banner  div.singe-banner-content {
        height:450px;
        padding-top:70px;
    }

        .singe-banner div.singe-banner-content > div.singe-banner-txt {
    padding-top: 80px;
    float: left;
    width: 44%;
    padding-left: 6%;
        }


.singe-banner  div.singe-banner-content > div.singe-banner-img {
    padding-top: 80px;
    float: right;
    width: 48%;
    text-align: center;
}









div.singe-banner-txt > p {
    display:block;
    float:left;
    width:100%;
    color:#FFFFFF;
    line-height:30px;
   
}

    div.singe-banner-txt > p.singe-item-title {
        font-size:44px;
        color:#fff;
    }
    div.singe-banner-txt > p.singe-item-p {
        font-size:20px;
        color:#fff;
        line-height:30px;
        padding-top:25px;
    }

    div.singe-banner-txt > p > span {
        display:block;
        float:left;
        width:200px;
        margin-top:8px;
    }
        div.singe-banner-txt > p > span > font {
            font-weight:bold;
            font-size:14px;
        }




   div.singe-banner-txt > p.singe-item-btn {
       padding: 25px 0 20px;
    }

    div.singe-banner-txt > p.singe-item-btn > a {
        width: 180px;
        height: 52px;
        background:#108dff url(/static/images/pro-banner-icon.png) no-repeat 20px 50%;
        box-shadow: 0px 8px 16px 0px rgba(121, 226, 255, 0.2);
        border-radius: 4px;
        display:block;
        text-align:center;
        line-height:52px;
        color: #fff;
        font-size: 18px;
        position: relative;
        overflow: hidden;
    }


div.singe-banner-txt > p.singe-item-btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin-left: -125px;
  margin-top: -125px;
  animation: spread 1.5s infinite both;
  -webkit-animation: spread 1.5s infinite both;
  -moz-animation: spread 1.5s infinite both;
  -o-animation: spread 1.5s infinite both;
}

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









        .singe-banner > div.singe-banner-content > div.singe-banner-img {
            display:block;
            float:right;
        }

            .singe-banner > div.singe-banner-content > div.singe-banner-img > img {

            }


.no-main-banner {
    height:70px;
    background: linear-gradient(to bottom,#015665,#0297ab);
}

.show-main-banner {
    height:525px
}



    .main-banner .swiper-container {
        height: 100%;
    }



    .main-banner .swiper-wrapper > div.swiper-slide {
        box-sizing: border-box;
        background-size: cover !important;
        -webkit-background-size: cover !important;
        -o-background-size: cover !important;
        /*background-position: top center;*/
        background-repeat: no-repeat !important;
    }

        .main-banner .swiper-wrapper > div.swiper-slide > div {
            height: 100%;
        }


    .main-banner .swiper-pagination-bullet {
        width: 40px;
        height: 4px;
        background: #ffffff;
        border-radius: 2px;
        
    }


    .main-banner .swiper-pagination-bullets {
        bottom: 144px;
    }

    .show-main-banner .swiper-pagination-bullets {
        bottom: 30px;
    }

/*===start slide-item-1====*/


@keyframes fadeInOut /*IE*/
{
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

@-moz-keyframes fadeInOut /* Firefox */
{
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeInOut /* Safari 和 Chrome */
{
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

@-o-keyframes fadeInOut /* Opera */
{
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

.main-banner div.slide-item-1 > div.bg-1 {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    height: 100%;
}

    .main-banner div.slide-item-1 > div.bg-1 > img {
        height: 100%;
        transform: translateX(-50%);
        margin-left: 50%;
        -webkit-animation-name: fadeInOut;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 3s;
        -webkit-animation-direction: alternate;
    }

.main-banner div.slide-item-1 > div.val-1 {
    color: #fff;
    padding-top: 60px;
    width: auto;
    padding-left: 6%;
}

    .main-banner div.slide-item-1 > div.val-1 > p.slide-item-title {
        font-size: 50px;
        margin-top: 50px;
        margin-bottom: 20px;
        font-family:"宋体";
        font-weight:bold;
    }

    .main-banner div.slide-item-1 > div.val-1 > p.slide-item-p {
        font-size: 24px;
        margin-top: 10px;
        font-family:"宋体";
    }

    .main-banner div.slide-item-1 > div.val-1 > p.slide-item-btn {
        margin-top: 50px;
        font-size: 16px;
        border: solid 1px #ffffff;
        height: 40px;
        line-height: 40px;
        width: auto;
        float: left;
        padding-left: 30px;
        padding-right: 30px;
    }

        .main-banner div.slide-item-1 > div.val-1 > p.slide-item-btn a {
            color: #fff;
        }







/*===end slide-item-1====*/
/*===start slide-item-2====*/
.main-banner div.slide-item-2 > div {
    top: 45%;
    transform: translateY(-50%);
    position: absolute;
    text-align: center;
}

    .main-banner div.slide-item-2 > div > p {
        color:#FFFFFF;
        font-family:"宋体"
    }
        .main-banner div.slide-item-2 > div > p.slide-item-title {
            font-size:60px;
            font-weight:bold;
        }
        .main-banner div.slide-item-2 > div > p.slide-item-p1 {
            font-size:20px;
            padding-top:40px;
            padding-bottom:30px;
            font-weight:bold;
        }
        .main-banner div.slide-item-2 > div > p.slide-item-p2 {
            font-size:24px;
        }
/*===end slide-item-2====*/

/*===start slide-item-3====*/
.main-banner div.slide-item-3 > div {
    top: 45%;
    transform: translateY(-50%);
    position: absolute;
    text-align: center;
}
    .main-banner div.slide-item-3 > div > p {
        color:#FFFFFF;
        font-family:"宋体"
    }
        .main-banner div.slide-item-3 > div > p.slide-item-title {
            font-size:60px;
            font-weight:bold;
            ;
        }
        .main-banner div.slide-item-3 > div > p.slide-item-p1 {
            font-size:20px;
            padding-top:40px;
            padding-bottom:30px;
            font-weight:bold;
        }
        .main-banner div.slide-item-3 > div > p.slide-item-p2 {
            font-size:24px;
        }
/*===end slide-item-3====*/

/*===start slide-item-4====*/

.main-banner div.slide-item-4 > div.slide-item-left {
    padding-top: 60px;
    float: left;
    width: 44%;
    padding-left: 6%;
}

.main-banner div.slide-item-4 > div.slide-item-right {
    padding-top: 60px;
    float: right;
    width: 48%;
    text-align: center;
}

    .main-banner div.slide-item-4 > div.slide-item-right > img {
        width:400px;
    }

.main-banner div.slide-item-4 > div.slide-item-left p {
    color: #ffffff;
}

    .main-banner div.slide-item-4 > div.slide-item-left p.slide-item-title {
        font-size: 50px;
        margin-top: 50px;
        margin-bottom: 20px;
        font-family:"宋体";
        font-weight:bold;
    }

    .main-banner div.slide-item-4 > div.slide-item-left p.slide-item-p {
        font-size: 24px;
        margin-top: 10px;
        font-family:"宋体";
    }

    .main-banner div.slide-item-4 > div.slide-item-left p.slide-item-btn {

    }

        .main-banner div.slide-item-4 > div.slide-item-left p.slide-item-btn a {
        margin-top: 50px;
        font-size: 16px;
        border: solid 2px #ffffff;
        height: 40px;
        line-height: 40px;
        width: auto;
        float: left;
        padding-left: 30px;
        padding-right: 30px;
            color: #ffffff;
            border-radius:8px;
            margin-right:10px;
        }



/*===end   slide-item-4====*/


.main-banner > div.main-bottom-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
}

.main-bottom-container > div.main-banner-mark {
    background: rgba(255,255,255,.1);
    height: 100%;
    height: 132px;
}

.main-bottom-container > div.main-banner-items {
    position: absolute;
    z-index: 10;
    left: 0px;
    top: 0px;
    height: 100%;
}



.main-banner-items > div.main-banner-item-box {
    width: auto;
    padding: 0px;
    height: 100%;
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1205px;
}

div.main-banner-item-box > div.main-banner-item {
    height: 100%;
    width: 300px;
    float: left;
    border-left: 1px solid rgba(255,255,255,0.08);
}

    div.main-banner-item-box > div.main-banner-item:last-child {
        border-right: 1px solid rgba(255,255,255,0.08);
    }

.main-banner-item > a {
    color: #ffffff;
    width: 100%;
    height: 100%;
    display: block;
}

    .main-banner-item > a:hover {
        background-color: rgba(255,255,255,0.05);
    }




    .main-banner-item > a > div:nth-child(1) {
        width: 39%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 30px;
    }

        .main-banner-item > a > div:nth-child(1) > img {
            width: 60px;
        }

    .main-banner-item > a > div:nth-child(2) {
        width: 60%;
        float: left;
        padding-top: 20px;
    }


.main-banner-item ul > li {
    display: block;
    float: left;
    width: 100%;
    line-height: 24px;
}

    .main-banner-item ul > li > span {
        display: inline-block;
        width: 7px;
        height: 7px;
        background: #fff;
        border-radius: 50%;
        margin-right: 8px;
    }

    .main-banner-item ul > li:first-child {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        padding-bottom: 8px;
    }



/*====start main-server==*/

.main-server {
    opacity: 0;
}

    .main-server.active {
        opacity: 1;
    }

    .main-server > div.main-module-val {
        padding: 50px 10px 50px 10px;
    }

    .main-server div.main-server-item {
        width: auto;
        float: left;
        border-radius: 5px;
        min-height: 300px;
        padding-top: 30px;
        padding-bottom: 30px;
        border: solid 1px transparent;
        position: relative;
    }

        .main-server div.main-server-item > div {
            transform: translateY(100%);
        }



        .main-server div.main-server-item:nth-child(1) > div {
            transition: all 0.8s ease 0.2s;
            -webkit-transition: all 0.8s ease 0.2s;
            -moz-transition: all 0.8s ease 0.2s;
            -o-transition: all 0.8s ease 0.2s;
            -ms-transition: all 0.8s ease 0.2s;
        }

        .main-server div.main-server-item:nth-child(2) > div {
            transition: all 0.8s ease 0.4s;
            -webkit-transition: all 0.8s ease 0.4s;
            -moz-transition: all 0.8s ease 0.4s;
            -o-transition: all 0.8s ease 0.4s;
            -ms-transition: all 0.8s ease 0.4s;
        }

        .main-server div.main-server-item:nth-child(3) > div {
            transition: all 0.8s ease 0.8s;
            -webkit-transition: all 0.8s ease 0.8s;
            -moz-transition: all 0.8s ease 0.8s;
            -o-transition: all 0.8s ease 0.8s;
            -ms-transition: all 0.8s ease 0.8s;
        }

        .main-server div.main-server-item:nth-child(4) > div {
            transition: all 0.8s ease 1s;
            -webkit-transition: all 0.8s ease 1s;
            -moz-transition: all 0.8s ease 1s;
            -o-transition: all 0.8s ease 1s;
            -ms-transition: all 0.8s ease 1s;
        }

    .main-server.active div.main-server-item > div {
        transform: translateY(0rem);
    }


    .main-server div.main-server-item > div > div:nth-child(1) {
        text-align: center;
    }

        .main-server div.main-server-item > div > div:nth-child(1) img {
            width: 110px;
        }

    .main-server div.main-server-item > div > div:nth-child(2) {
        text-align: center;
        padding-top: 30px;
        font-size: 22px;
    }

    .main-server div.main-server-item > div > div:nth-child(3) {
        /*display:none;*/
        width: 200px;
        padding: 30px 49px 0px 49px;
    }

        .main-server div.main-server-item > div > div:nth-child(3) > div.main-server-item-p {
            height: 0px;
            transition: all 0.5s ease 0.2s;
            -webkit-transition: all 0.5s ease 0.2s;
            -moz-transition: all 0.5s ease 0.2s;
            -o-transition: all 0.5s ease 0.2s;
            -ms-transition: all 0.5s ease 0.2s;
        }

            .main-server div.main-server-item > div > div:nth-child(3) > div.main-server-item-p > p {
                color: #888;
                line-height: 26px;
                text-align: center;
            }

                .main-server div.main-server-item > div > div:nth-child(3) > div.main-server-item-p > p.main-server-item-more {
                    text-align: center;
                    margin-top: 10px;
                }


                    .main-server div.main-server-item > div > div:nth-child(3) > div.main-server-item-p > p.main-server-item-more > a> span {
                        color: #888888;
                        display: inline-block;
                        background: #00abcd;
                        background-size: 15px 15px;
                        color: #fff;
                        border: solid 1px #00abcd;
                        font-size: 12px;
                        width: 100%;
                        height: 32px;
                        line-height: 32px;
                    }
 


        .main-server div.main-server-item > div > div:nth-child(3) > div.main-server-item-hover {
            height: 100px;
            transition: all 0.5s ease 0.2s;
            -webkit-transition: all 0.5s ease 0.2s;
            -moz-transition: all 0.5s ease 0.2s;
            -o-transition: all 0.5s ease 0.2s;
            -ms-transition: all 0.5s ease 0.2s;
        }

            .main-server div.main-server-item > div > div:nth-child(3) > div.main-server-item-hover > ul > li {
                display: block;
                float: left;
                width: 50%;
                text-align: center;
                color: #999;
                line-height: 26px;
            }




    .main-server div.main-server-item:hover {
        /*background: #F8F8F9;*/
        cursor: pointer;
        -moz-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        border: 1px solid rgba(101,111,132,0.5);
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

        .main-server div.main-server-item:hover > div > div:nth-child(3) > div.main-server-item-p {
            height: 100px;
        }

        .main-server div.main-server-item:hover > div > div:nth-child(3) > div.main-server-item-hover {
            height: 0px;
        }


/*====end main-server====*/

/*====start main-server-x==*/

.main-server-x {
}

    .main-server-x > div.main-module-val {
        padding: 50px 10px 50px 10px;
    }

    .main-server-x div.main-server-item {
        width: auto;
        float: left;
        border-radius: 5px;
        min-height: 300px;
        padding-top: 30px;
        padding-bottom: 30px;
        border: solid 1px transparent;
    }


        .main-server-x div.main-server-item > div:nth-child(1) {
            text-align: center;
        }

            .main-server-x div.main-server-item > div:nth-child(1) img {
                width: 110px;
            }

        .main-server-x div.main-server-item > div:nth-child(2) {
            text-align: center;
            padding-top: 20px;
            font-size: 22px;
        }

        .main-server-x div.main-server-item > div:nth-child(3) {
            /*display:none;*/
            width: 200px;
            padding: 30px 49px 30px 49px;
        }

        .main-server-x div.main-server-item > div:nth-child(4) {
            /*display:none;*/
            text-align: center;
        }

            .main-server-x div.main-server-item > div:nth-child(4) > span {
                color: #888888;
                display: inline-block;
                background: url(/static/images/icon/index-server-item-more-2.png) no-repeat center right;
                background-size: 15px 15px;
                padding-right: 20px;
            }

            .main-server-x div.main-server-item > div:nth-child(4) > img {
                height: 20px;
            }

        .main-server-x div.main-server-item > div:nth-child(3) p {
            color: #888;
            line-height: 22px;
            text-align: center;
        }


        .main-server-x div.main-server-item:hover {
            /*background: #F8F8F9;*/
            cursor: pointer;
            -moz-transition: all .5s ease;
            -webkit-transition: all .5s ease;
            transition: all .5s ease;
            border: 1px solid rgba(101,111,132,0.5);
            box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
        }

            .main-server-x div.main-server-item:hover > div:nth-child(4) > span {
                background: url(/static/images/icon/index-server-item-more-1.png) no-repeat center right;
                background-size: 15px 15px;
                color: #333;
            }

/*====end main-server-x====*/


/*====start main-server-y==*/

.main-server-y {
    background: url(/static/images/2.jpg) no-repeat center center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -o-background-size: cover !important;
    background-repeat: no-repeat !important;
    padding-bottom: 50px;
}

    .main-server-y > div.main-module-title {
        color: #fff;
    }

    .main-server-y > div.main-module-desc {
        color: #fff;
        padding-bottom: 50px;
    }

    .main-server-y > div.main-module-val {
        background: #fff;
        border-radius: 5px;
    }

    .main-server-y div.main-server-item {
        width: auto;
        float: left;
        min-height: 300px;
        padding-top: 30px;
        padding-bottom: 30px;
        border-left: solid 1px rgba(101,111,132,0.3);
    }

        .main-server-y div.main-server-item:nth-child(1) {
            border-left: none;
        }

        .main-server-y div.main-server-item > div:nth-child(1) {
            text-align: center;
        }

            .main-server-y div.main-server-item > div:nth-child(1) img {
                width: 110px;
            }

        .main-server-y div.main-server-item > div:nth-child(2) {
            text-align: center;
            padding-top: 20px;
            font-size: 22px;
        }

        .main-server-y div.main-server-item > div:nth-child(3) {
            /*display:none;*/
            width: 200px;
            padding: 30px 50px 30px 50px;
        }

        .main-server-y div.main-server-item > div:nth-child(4) {
            /*display:none;*/
            text-align: center;
        }

            .main-server-y div.main-server-item > div:nth-child(4) > a >span {
                color: #888888;
                display: inline-block;
                background: url(/static/images/icon/index-server-item-more-2.png) no-repeat center right;
                background-size: 15px 15px;
                padding-right: 20px;
            }

            .main-server-y div.main-server-item > div:nth-child(4) > img {
                height: 20px;
            }

        .main-server-y div.main-server-item > div:nth-child(3) p {
            color: #888;
            line-height: 22px;
            text-align: center;
        }


        .main-server-y div.main-server-item:hover {
            background: #f0f0f0;
            cursor: pointer;
            -moz-transition: all .3s ease;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

            .main-server-y div.main-server-item:hover > div:nth-child(4) >a> span {
                background: url(/static/images/icon/index-server-item-more-1.png) no-repeat center right;
                background-size: 15px 15px;
                color: #333;
            }

/*====end main-server-y====*/


/*====start main-server-case=====*/

.main-server-case {
    padding-bottom: 50px;
}

    .main-server-case > div.main-module-title {
        transition: all 0.8s ease 0.2s;
        -webkit-transition: all 0.8s ease 0.2s;
        -moz-transition: all 0.8s ease 0.2s;
        -o-transition: all 0.8s ease 0.2s;
        -ms-transition: all 0.8s ease 0.2s;
        transform: translateY(-100%);
    }

    .main-server-case > div.main-module-desc {
        transition: all 0.8s ease 0.4s;
        -webkit-transition: all 0.8s ease 0.4s;
        -moz-transition: all 0.8s ease 0.24s;
        -o-transition: all 0.8s ease 0.4s;
        -ms-transition: all 0.8s ease 0.4s;
        transform: translateY(-150%);
    }


    .main-server-case > div.main-module-val {
        padding: 50px 15px 0px 15px;
        margin-left: -615px;
        transition: all 0.8s ease 0.6s;
        -webkit-transition: all 0.8s ease 0.6s;
        -moz-transition: all 0.8s ease 0.6s;
        -o-transition: all 0.8s ease 0.6s;
        -ms-transition: all 0.8s ease 0.6s;
        transform: translateY(120%);
    }



        .main-server-case > div.main-module-val > ul > li {
            display:block;
            float:left;
            border: solid 1px rgba(101,111,132,0.6);
            border-radius:5px;
            width:14%;
            height:56px;
            line-height:56px;
            text-align:center;
            color:#ffad30;
            font-size:20px;
            margin-left:2.95%;
            margin-bottom:30px;
        }
            .main-server-case > div.main-module-val > ul > li:nth-child(6n+1) {
                margin-left:0px;
            }
            .main-server-case > div.main-module-val > ul > li:nth-child(6n) {
                margin-left:0px;
                float:right;
            }


        .main-server-case > div.main-module-val > div.main-case-item {
            width: 31%;
            margin-left: 3.5%;
            float: left;
            overflow: hidden;
            margin-bottom: 40px;
            position: relative;
            cursor: pointer;
            box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
        }

            .main-server-case > div.main-module-val > div.main-case-item:nth-child(3n+1) {
                margin-left: 0px;
            }

            .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-block {
                height: 320px;
            }

                .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-block > img {
                    width: 100%;
                    display: block;
                }

            .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-mask {
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                background: #000;
                filter: alpha(Opacity=70);
                -moz-opacity: 0.7;
                opacity: 0.7;
                overflow: hidden;
                z-index: 99;
                transition: all 0.5s ease 0.1s;
                -webkit-transition: all 0.5s ease 0.1s;
                -moz-transition: all 0.5s ease 0.1s;
                -o-transition: all 0.5s ease 0.1s;
                -ms-transition: all 0.5s ease 0.1s;
                transform: translateY(100%);
            }

            .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-hover {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 999;
                color: #fff;
                text-align: center;
                transition: all 0.5s ease 0.1s;
                -webkit-transition: all 0.5s ease 0.1s;
                -moz-transition: all 0.5s ease 0.1s;
                -o-transition: all 0.5s ease 0.1s;
                -ms-transition: all 0.5s ease 0.1s;
                transform: translateY(100%);
            }

                .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-hover > h3 {
                    font-weight: bold;
                    font-size: 16px;
                    margin-top: 100px;
                }

                .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-hover > img {
                    width: 25%;
                    border-radius: 50%;
                    margin-top: 60px;
                }

                .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-hover > p {
                    text-align: left;
                    padding: 20px 30px 30px 30px;
                    text-align:center;
                }

                .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-hover > a {
                    display: inline-block;
                    border: solid 1px #fff;
                    color: #fff;
                    height: 32px;
                    width: 120px;
                    line-height: 32px;
                }

                    .main-server-case > div.main-module-val > div.main-case-item > div.main-case-item-hover > a:hover {
                        background: #00abcd;
                        color: #fff;
                        border: solid 1px #00abcd;
                    }



            .main-server-case > div.main-module-val > div.main-case-item:hover > div.main-case-item-mask {
                transform: translateY(0%);
            }

            .main-server-case > div.main-module-val > div.main-case-item:hover > div.main-case-item-hover {
                transform: translateY(0%);
            }

    .main-server-case > div.main-server-case-more {
        text-align: center;
        padding-top: 30px;
        padding-bottom: 15px;
        transition: all 0.8s ease 1.8s;
        -webkit-transition: all 0.8s ease 1.8s;
        -moz-transition: all 0.8s ease 1.8s;
        -o-transition: all 0.8s ease 1.8s;
        -ms-transition: all 0.8s ease 1.8s;
        opacity: 0;
    }


    .main-server-case.active > div {
        opacity: 1;
        transform: translateY(0%);
    }



@keyframes boxShadow /*IE*/
{
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    75% {
        box-shadow: none;
    }
}

@-moz-keyframes boxShadow /* Firefox */
{
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    75% {
        box-shadow: none;
    }
}

@-webkit-keyframes boxShadow /* Safari 和 Chrome */
{
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    75% {
        box-shadow: none;
    }
}

@-o-keyframes boxShadow /* Opera */
{
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
    }

    75% {
        box-shadow: none;
    }
}



.main-server-case > div.main-server-case-more > a {
    border: solid 1px #00abcd;
    color: #00abcd;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    width: 220px;
    font-size: 16px;
    -webkit-animation-name: boxShadow;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    -webkit-animation-direction: alternate;
}

    .main-server-case > div.main-server-case-more > a:hover {
        background: #00abcd;
        color: #fff;
    }
/*====end   main-server-case=====*/



/*====start main-upgrade-time==========*/

.main-upgrade-time {


}
    .main-upgrade-time > div.main-module-val {


    }


 .main-upgrade-time > div.main-module-val>div.main-upgrade-time-version {
    width:15%;
    position:fixed;
    border:solid 1px #FF0000;
    left:0px;
    top:0px;
}
    .main-upgrade-time-version > ul > li {
        display:block;
        float:left;
        width:96%;
        height:50px;
        line-height:50px;
        font-size:16px;
        text-indent:16px;
    }
        .main-upgrade-time-version > ul > li.active {
            background: #f8f8f8;
            color: #333;
            border: none;
            border-right: 2px solid #3ba9ca;
            border-bottom-left-radius:8px;
            border-top-left-radius:8px;
        }
        .main-upgrade-time-version > ul > li > a {
            color: #333;

        }



.main-upgrade-time-info {
    float:right;
    width:100%;
}


.main-upgrade-time-item {
    padding-bottom:20px; 
}


    .main-upgrade-time-item > div.main-upgrade-time-item-title {
        font-size:20px;
        height:50px;
        line-height:50px;
        font-weight:bold;
        background:url(/static/images/version-time-icon.png) no-repeat left center;
        padding-left:50px;
    }
        .main-upgrade-time-item > div.main-upgrade-time-item-title > div {
            display:block;
            width:auto;
            float:left;
            position:relative;
            padding-right:20px;
            cursor:pointer;
        }
        .main-upgrade-time-item > div.main-upgrade-time-item-title > div>span {
            display:block;
            position:absolute;
            right:0px;
            top:20px;
            background:url(/static/images/version-zk-icon.png) no-repeat left center;
            width:13px;
            height:8px;

        }
            .main-upgrade-time-item > div.main-upgrade-time-item-title > div.an > span {
                background:url(/static/images/version-zk-icon.png) no-repeat right center;
            }


    .main-upgrade-time-item > div.main-upgrade-time-item-val {
        font-size:14px;
        line-height:24px;
        border-left:solid 3px #00abcd;
        margin-left:18px;
        padding-left:20px;
        width:96%;
    }

        .main-upgrade-time-item > div.an-val {
            display:none;
        }

/*====end    main-upgrade-time==========*/




/*====start main-server-process===*/


.main-server-process {
    background: url(/static/images/2.jpg) no-repeat center center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -o-background-size: cover !important;
    background-repeat: no-repeat !important;
    color: #fff;
}


    .main-server-process > div.main-module-title {
        color: #fff;
    }

    .main-server-process > div.main-module-desc {
        color: #fff;
        /*padding-bottom: 50px;*/
    }

    .main-server-process > div.main-module-val {
        position: relative;
        height: 400px;
    }



        .main-server-process > div.main-module-val:before {
            content: "";
            position: absolute;
            width: 10%;
            height: 8px;
            background: #E9E9E9;
            border-radius: 2px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: all 3.2s ease 0.0s;
            -webkit-transition: all 3.2s ease 0.0s;
            -moz-transition: all 3.2s ease 0.0s;
            -o-transition: all 3.2s ease 0.0s;
            -ms-transition: all 3.2s ease 0.0s;
            border:solid 1px #FF0000;
        }

    .main-server-process.active > div.main-module-val:before {
        width: 99%;
    }




    .main-server-process > div.main-module-val:after {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        right: 98%;
        top: 50%;
        transform: translateY(-50%);
        border-width: 15px;
        border-style: solid;
        border-color: transparent transparent transparent #fff;
        transition: all 3.2s ease 0.0s;
        -webkit-transition: all 3.2s ease 0.0s;
        -moz-transition: all 3.2s ease 0.0s;
        -o-transition: all 3.2s ease 0.0s;
        -ms-transition: all 3.2s ease 0.0s;
    }

    .main-server-process.active > div.main-module-val:after {
        right: -15px;
    }



    .main-server-process > div.main-module-val > ul > li {
        display: block;
        float: left;
        height: 22px;
        width: 22px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
        border: solid 1px #fff;
    }

        .main-server-process > div.main-module-val > ul > li:nth-child(1) {
            left: 45px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(2) {
            left: 200px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(3) {
            left: 355px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(4) {
            left: 510px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(5) {
            left: 665px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(6) {
            left: 820px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(7) {
            left: 975px;
        }

        .main-server-process > div.main-module-val > ul > li:nth-child(8) {
            left: 1130px;
        }

        .main-server-process > div.main-module-val > ul > li:before {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background: #00c1de;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all .3s ease;
        }

        .main-server-process > div.main-module-val > ul > li.active:before {
            width: 100%;
            height: 100%;
        }


    .main-server-process > div.main-module-val > div.main-server-process-item {
        display: block;
        position: absolute;
        top: 50%;
    }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(2n+1) {
            transform: translateY(-110%);
            padding: 5px 5px 15px 5px;
        }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(2n) {
            transform: translateY(10%);
            padding: 15px 5px 5px 5px;
        }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(1) {
            left: 0px;
            transition: all 0.6s ease 0.0s;
            -webkit-transition: all 0.6s ease 0.0s;
            -moz-transition: all 0.6s ease 0.0s;
            -o-transition: all 0.6s ease 0.0s;
            -ms-transition: all 0.6s ease 0.0s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(1) > div.process-item-val {
                background: #c8a241;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(2) {
            left: 155px;
            transition: all 0.6s ease 0.4s;
            -webkit-transition: all 0.6s ease 0.4s;
            -moz-transition: all 0.6s ease 0.4s;
            -o-transition: all 0.6s ease 0.4s;
            -ms-transition: all 0.6s ease 0.4s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(2) > div.process-item-val {
                background: #90c783;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(3) {
            left: 310px;
            transition: all 0.6s ease 0.8s;
            -webkit-transition: all 0.6s ease 0.8s;
            -moz-transition: all 0.6s ease 0.8s;
            -o-transition: all 0.6s ease 0.8s;
            -ms-transition: all 0.6s ease 0.8s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(3) > div.process-item-val {
                background: #6692cf;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(4) {
            left: 465px;
            transition: all 0.6s ease 1.2s;
            -webkit-transition: all 0.6s ease 1.2s;
            -moz-transition: all 0.6s ease 1.2s;
            -o-transition: all 0.6s ease 1.2s;
            -ms-transition: all 0.6s ease 1.2s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(4) > div.process-item-val {
                background: #ab71d5;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(5) {
            left: 620px;
            transition: all 0.6s ease 1.6s;
            -webkit-transition: all 0.6s ease 1.6s;
            -moz-transition: all 0.6s ease 1.6s;
            -o-transition: all 0.6s ease 1.6s;
            -ms-transition: all 0.6s ease 1.6s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(5) > div.process-item-val {
                background: #ff0000;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(6) {
            left: 775px;
            transition: all 0.6s ease 2.0s;
            -webkit-transition: all 0.6s ease 2.0s;
            -moz-transition: all 0.6s ease 2.0s;
            -o-transition: all 0.6s ease 2.0s;
            -ms-transition: all 0.6s ease 2.0s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(6) > div.process-item-val {
                background: #ce807e;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(7) {
            left: 930px;
            transition: all 0.6s ease 2.4s;
            -webkit-transition: all 0.6s ease 2.4s;
            -moz-transition: all 0.6s ease 2.4s;
            -o-transition: all 0.6s ease 2.4s;
            -ms-transition: all 0.6s ease 2.4s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(7) > div.process-item-val {
                background: #e19981;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(8) {
            left: 1085px;
            transition: all 0.6s ease 2.8s;
            -webkit-transition: all 0.6s ease 2.8s;
            -moz-transition: all 0.6s ease 2.8s;
            -o-transition: all 0.6s ease 2.8s;
            -ms-transition: all 0.6s ease 2.8s;
            opacity: 0;
        }

            .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(8) > div.process-item-val {
                background: #99c621;
                border: solid 1px #ccc;
            }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(2n+1):before {
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            z-index: -1;
            left: 50%;
            bottom: 8px;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
            background: #fff;
            transform: translateX(-50%) rotateZ(135deg);
        }

        .main-server-process > div.main-module-val > div.main-server-process-item:nth-child(2n):before {
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            z-index: -1;
            left: 50%;
            top: 8px;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
            background: #fff;
            transform: translateX(-50%) rotateZ(135deg);
        }

        .main-server-process > div.main-module-val > div.main-server-process-item > div.process-item-val {
            height: 75px;
            padding-top: 25px;
            line-height: 26px;
            width: 100px;
            border-radius: 50%;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
            color: #fff;
            text-align: center;
            font-size: 16px;
        }






    .main-server-process.active > div.main-module-val > div.main-server-process-item {
        opacity: 1;
    }


/*====end main-server-process=======*/


















/*====start main-server-partners====*/
.main-server-partners {
}

    .main-server-partners > div.main-module-val {
        padding: 50px 10px 50px 10px;
    }

        .main-server-partners > div.main-module-val > img {
        }

            .main-server-partners > div.main-module-val > img:hover {
                box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
            }

/*====end  main-server-partners====*/


/*====start main-server-news=====*/
.main-server-news {
    background: #f0f0f0;
}


    .main-server-news > div.main-module-val {
        padding-top: 50px;
        padding-bottom: 50px;
    }

        .main-server-news > div.main-module-val > div.main-news-list {
            float: left;
            width: 385px;
            padding: 10px 10px 0px 10px;
        }

            .main-server-news > div.main-module-val > div.main-news-list:nth-child(1) {
                margin-left: 0px;
            }

            .main-server-news > div.main-module-val > div.main-news-list > ul > li {
                height: 30px;
                line-height: 30px;
            }

                .main-server-news > div.main-module-val > div.main-news-list > ul > li:nth-child(1) {
                    height: auto;
                    line-height: initial;
                    border: solid 1px #c5d8db;
                    margin-bottom: 12px;
                    background: #fff;
                }

                    .main-server-news > div.main-module-val > div.main-news-list > ul > li:nth-child(1):hover {
                        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
                    }

                    .main-server-news > div.main-module-val > div.main-news-list > ul > li:nth-child(1) > a > div:nth-child(1) {
                        height: 160px;
                    }

                    .main-server-news > div.main-module-val > div.main-news-list > ul > li:nth-child(1) > a > div:nth-child(2) {
                        height: 50px;
                        line-height: 50px;
                        text-indent: 10px;
                    }

                .main-server-news > div.main-module-val > div.main-news-list > ul > li > a {
                    display: block;
                    color: #666;
                }

                    .main-server-news > div.main-module-val > div.main-news-list > ul > li > a > div > img {
                        width: 100%;
                        -moz-transition: all .5s ease;
                        -webkit-transition: all .5s ease;
                        transition: all .5s ease;
                    }

                    .main-server-news > div.main-module-val > div.main-news-list > ul > li > a:hover {
                        color: #00abcd;
                    }

                        .main-server-news > div.main-module-val > div.main-news-list > ul > li > a:hover > div > img {
                            width: 110%;
                            margin-left: -5%;
                            margin-top: -2.5%;
                        }




/*====end   main-server-news=====*/



.main-server-qa > div.main-module-val {
    padding-top:30px;
    padding-bottom:30px;
}
.main-server-qa > div.main-module-val>ul>li {
    display:block;
    float:left;
    width:100%;

}

    .main-server-qa > div.main-module-val > ul > li > p.qa-title {
        font-size:18px;
        color:#1F87E8;
        padding-top:12px;
        padding-bottom:12px;
        font-weight:bold;
    }
    .main-server-qa > div.main-module-val > ul > li > p.qa-val {
        font-size:16px;
        color:#666666;
        padding-bottom:30px;
        line-height:36px;
    }




.main-product-type > div.main-module-val {
    
}

    .main-product-type > div.main-module-val > ul {
        display:block;
        width:100%;
        overflow:hidden;
        padding-bottom:30px;
    }
    .main-product-type > div.main-module-val > ul > li {
        display:block;
        float:left;
        border-radius:8px;
        overflow:hidden;
        
        box-shadow: 0px 4px 8px 1px rgba(69, 69, 69, 0.22);
        text-align:center;
        width:20%;
        margin-left:2.5%;
        margin-right:2.5%;
        margin-top:30px;
    }

        .main-product-type > div.main-module-val > ul > li:nth-child(4n+1) {

            
        }
        .main-product-type > div.main-module-val > ul > li > a {
            display:block;
            float:left;
            width:100%;
            overflow:hidden;
            text-decoration:none;
            color:#333;
        }
        .main-product-type > div.main-module-val > ul > li >a> img {
            width:100%;
            display:block;
        }
            .main-product-type > div.main-module-val > ul > li > a > p.product-type-title {
                display:block;
                width:100%;
                float:left;
                font-size:18px;
                font-weight:bold;
                padding-top:25px;
                padding-bottom:15px;
            }
            .main-product-type > div.main-module-val > ul > li > a > p.product-type-val {
                display:block;
                width:100%;
                float:left;
                font-size:14px;
                color:#999999;
                padding-bottom:25px;
            }


.main-product-desc > div.main-module-val {
    padding-top:50px;
}

    .main-product-desc > div.main-module-val > div.product-desc-item {
        display:block;
        float:left;
        width:100%;
        overflow:hidden;
        padding-top:50px;

        padding-bottom:50px;
    }

    .main-product-desc > div.main-module-val > div.product-desc-item > div.product-desc-left {
        display:block;
        float:left;
        overflow:hidden;
        
    }
    .main-product-desc > div.main-module-val > div.product-desc-item > div.product-desc-right {
        display:block;
        float:right;
        overflow:hidden;
    }

        .main-product-desc > div.main-module-val > div.product-desc-item > div.product-desc-img {
            width:55%;
        }
        .main-product-desc > div.main-module-val > div.product-desc-item > div.product-desc-txt {
            width:45%;
            padding-top:100px;
        }

    .main-product-desc > div.main-module-val > div.product-desc-item > div.product-desc-left > img {
        display:block;
        float:left;
        width:100%;
    }
    .main-product-desc > div.main-module-val > div.product-desc-item > div.product-desc-right > img {
        display:block;
        float:right;
        width:100%;
    }
    .main-product-desc > div.main-module-val > div.product-desc-item > div > p {
        display:block;
        float:left;
        width:100%;
    }


    .main-product-desc > div.main-module-val > div.product-desc-item > div > p.product-des-title {
        font-size: 24px;
        color: #333333;
        line-height: 38px;
        font-weight: bold;
    }

    .main-product-desc > div.main-module-val > div.product-desc-item > div > p.product-des-val {
        font-size: 16px;
        color: #999999;
        line-height: 36px;
    }



.main-server-cases {
}

    .main-server-cases > div.main-module-val {
        padding-top:30px;
        padding-bottom:30px;
        
    }
        .main-server-cases > div.main-module-val > ul > li {
            display:block;
            float:left;
            width:100%;
            overflow:hidden;
            padding-top:12px;
            padding-bottom:10px;
            border-bottom:dashed 1px #dddddd;
            list-style:disc;
            background:url(/static/images/cases-icon.png) no-repeat 0px 53%;
            text-indent:1.0rem;
        }

            .main-server-cases > div.main-module-val > ul > li > a {
                display:block;
                float:left;
                text-decoration:none;
                color:#333333;
                font-size:14px;
            }
                .main-server-cases > div.main-module-val > ul > li > a:hover {
                    color:#ff0000;
                }
            .main-server-cases > div.main-module-val > ul > li > span {
                display:block;
                float:right;
                color:#666666;
            }

.main-server-page > div.main-module-val {

    padding-bottom:30px;
}

    .main-server-page > div.main-module-val > ul.pagination {
        display:block;
        float:left;
    }

        .main-server-page > div.main-module-val > ul.pagination > li {
            display:block;
            float:left;
            border-radius:3px;
            min-width:30px;
            height:30px;
            line-height:30px;
            border:solid 1px #ddd;
            text-align:center;
            margin-right:5px;
        }
            .main-server-page > div.main-module-val > ul.pagination > li.active {
                background: #33cabb;
                border-color: #33cabb;
                color:#FFF;
            }
            .main-server-page > div.main-module-val > ul.pagination > li > a {
                color:#666666;
            }