@charset "utf-8";
/* CSS Document */
html, body, div, span, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn,
em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary, time, mark,
audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline-style: none; /*FF*/
}

ul, li {
    list-style: none;
}

body {
    line-height: 1;
    color: #00060a;
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, select {
    vertical-align: middle;
}

/*css为clearfix，清除浮动*/
.clearfix::before,
.clearfix::after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}
/*导航*/
.top-nav {
    width: 100%;
    position: fixed;
    background: rgb(0,0,0,0.6);
    z-index: 100;
}

.top-nav1 {
    width: 100%;
    float: left;
}

.nav {
    width: 1200px;
    margin: 0 auto;
}

.logo {
    float: left;
    width: 140px;
    margin: 25px 0;
}

.nav-li {
    float: left;
    width: 1040px;
    margin-left: 20px;
}

    .nav-li li {
        float: left;
        width: 115px;
        text-align: center;
        line-height: 80px;
    }

        .nav-li li a {
            text-decoration: none;
            color: #fff;
            width: 115px;
            height: 80px;
            display: block;
        }

            .nav-li li a:hover {
                font-size: 18px;
                color: #ff7205;
            }
/*banner*/
.banner {
    width: 100%;
    float: left;
}
/*范围*/
.scope {
    width: 100%;
    float: left;
    background: #fafafa;
    padding: 100px 0 50px 0;
}

.scope-con {
    width: 1200px;
    margin: 0 auto;
}

.sc-title {
    width: 1200px;
    text-align: center;
    font-size: 36px;
    background: url(../images/sc-bj.jpg) center center no-repeat;
    height: 100px;
    line-height: 100px;
}

.sc-title-f {
    width: 1200px;
    text-align: center;
    color: #999999;
    line-height: 30px;
}

.sc-title-c {
    width: 1200px;
    float: left;
    margin-top: 30px;
}

.anniu {
    width: 1200px;
    background: url(../images/anniu.png) center center no-repeat;
    height: 54px;
    float: left;
    margin-top: 80px;
}

    .anniu a {
        width: 1200px;
        text-align: center;
        color: #FFF;
        line-height: 54px;
        display: block;
        text-decoration: none;
    }

        .anniu a:hover {
            background: none;
        }
/*好处*/
.benefit {
    width: 100%;
    float: left;
    background: url(../images/hcbj.png);
    padding-bottom: 50px;
}

.be-con {
    width: 1200px;
    margin: 0 auto;
}

.be-title {
    width: 1200px;
    text-align: center;
    font-size: 36px;
    background: url(../images/bj.png) center center no-repeat;
    height: 100px;
    line-height: 100px;
    margin-top: 100px;
}

.be-title-f {
    width: 1200px;
    text-align: center;
    color: #999999;
    line-height: 30px;
    margin-bottom: 50px;
}

.a1 {
    width: 375px;
    height: 188px;
    display: block;
    background: url(../images/b1.png) no-repeat;
    float: left;
    margin-bottom: 30px;
}

    .a1:hover {
        width: 375px;
        height: 188px;
        display: block;
        background: url(../images/b11.png) no-repeat;
        color: #fff;
    }

.p1 {
    width: 375px;
    text-align: center;
    font-size: 28px;
    padding-top: 105px;
}

.p2 {
    width: 375px;
    text-align: center;
    font-size: 14px;
    line-height: 50px;
}

.a2 {
    width: 375px;
    height: 188px;
    display: block;
    background: url(../images/b2.png) no-repeat;
    float: left;
    margin: 0 37px 30px 38px;
}

    .a2:hover {
        width: 375px;
        height: 188px;
        display: block;
        background: url(../images/b21.png) no-repeat;
        color: #fff;
    }

.a3 {
    width: 375px;
    height: 188px;
    display: block;
    background: url(../images/b3.png) no-repeat;
    float: left;
    margin-bottom: 30px;
}

    .a3:hover {
        width: 375px;
        height: 188px;
        display: block;
        background: url(../images/b31.png) no-repeat;
        color: #fff;
    }

.a4 {
    width: 375px;
    height: 188px;
    display: block;
    background: url(../images/b4.png) no-repeat;
    float: left;
    margin-bottom: 30px;
}

    .a4:hover {
        width: 375px;
        height: 188px;
        display: block;
        background: url(../images/b41.png) no-repeat;
        color: #fff;
    }

.a5 {
    width: 375px;
    height: 188px;
    display: block;
    background: url(../images/b5.png) no-repeat;
    float: left;
    margin: 0 37px 30px 38px;
}

    .a5:hover {
        width: 375px;
        height: 188px;
        display: block;
        background: url(../images/b51.png) no-repeat;
        color: #fff;
    }

.a6 {
    width: 375px;
    height: 188px;
    display: block;
    background: url(../images/b6.png) no-repeat;
    float: left;
    margin-bottom: 30px;
}

    .a6:hover {
        width: 375px;
        height: 188px;
        display: block;
        background: url(../images/b61.png) no-repeat;
        color: #fff;
    }

/*模板*/
.template {
    width: 100%;
    float: left;
    background: #fafafa;
    padding: 100px 0 50px 0;
}

.tem-con {
    width: 1200px;
    margin: 0 auto;
}

.tem-title {
    width: 1200px;
    text-align: center;
    font-size: 36px;
    background: url(../images/bj1.png) center center no-repeat;
    height: 100px;
    line-height: 100px;
}

.tem-title-f {
    width: 1200px;
    text-align: center;
    color: #999999;
    line-height: 30px;
}

.at1 {
    display: block;
    background: url(../images/s1.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
}

    .at1 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at1 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at2 {
    display: block;
    background: url(../images/s2.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
    margin: 0 22px 0 44px;
}

    .at2 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at2 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at3 {
    display: block;
    background: url(../images/s3.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
    margin: 0 44px 0 22px;
}

    .at3 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at3 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at4 {
    display: block;
    background: url(../images/s4.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
}

    .at4 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at4 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at5 {
    display: block;
    background: url(../images/s5.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
    margin-top: 100px;
}

    .at5 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at5 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at6 {
    display: block;
    background: url(../images/s6.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
    margin: 100px 22px 0 44px;
}

    .at6 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at6 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at7 {
    display: block;
    background: url(../images/s7.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
    margin: 100px 44px 0 22px;
}

    .at7 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at7 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }

.at8 {
    display: block;
    background: url(../images/s8.png) no-repeat;
    width: 267px;
    height: 456px;
    text-align: center;
    font-size: 24px;
    float: left;
    margin-top: 100px;
}

    .at8 a {
        display: block;
        width: 182px;
        height: 325px;
        margin-top: 50px;
        margin-left: 39px;
        margin-bottom: 80px;
    }

        .at8 a:hover {
            display: block;
            width: 182px;
            height: 325px;
            background: url(../images/ah.png) no-repeat;
        }


/*流程*/
.process {
    width: 100%;
    float: left;
    background: #333333;
    padding: 80px 0 50px 0;
}

.pro-con {
    width: 1200px;
    margin: 0 auto;
}

.pro-title {
    width: 1200px;
    text-align: center;
    font-size: 36px;
    background: url(../images/bj2.png) center center no-repeat;
    height: 100px;
    line-height: 100px;
    color: #FFF;
}

.pro-tu {
    width: 1200px;
    float: left;
    margin-top: 50px;
}
/*描述*/
.ms {
    width: 100%;
    float: left;
    padding: 80px 0 0px 0;
}

.ms-con {
    width: 1200px;
    margin: 0 auto;
}

.ms-con1 {
    width: 1200px;
    margin: auto;
    /* margin-top: 120px; */
}

.ms-title {
    width: 1200px;
    text-align: center;
    font-size: 36px;
    height: 100px;
    line-height: 100px;
}

.ms-title-f {
    width: 1200px;
    text-align: center;
    color: #999999;
    line-height: 30px;
}

.ms-con-img {
    float: left;
    width: 412px;
}

.ms-con-gs {
    float: left;
    width: 500px;
}

.ms-con-left {
    float: left;
    width: 600px;
    margin-left: 188px;
}

.ms-con-left-gs {
    /* float: left; */
    /* width: 600px; */
    /* margin-left: 100px; */
}

.ms-con-left-t {
    font-size: 24px;
    width: 100%;
    color: #555555;
    margin-top: 60px;
}

.ms-con-left-m {
    width: 100%;
    color: #808080;
    margin: 30px 0;
    line-height: 30px;
}

.ms-con-left-a {
    background: url(../images/anniu1.png) no-repeat;
    width: 180px;
    height: 54px;
    text-align: center;
    float: left;
}

    .ms-con-left-a a {
        color: #FFF;
        line-height: 54px;
        text-decoration: none;
    }

.yello {
    width: 100%;
    float: left;
    background: #fff5e4;
}

.ye-con-img {
    float: left;
    width: 412px;
}

.ye-con-left {
    float: left;
    width: 600px;
    margin-right: 188px;
}

/*优势*/
.advantage {
    width: 100%;
    float: left;
    background: url(../images/bj.jpg) no-repeat;
    padding-bottom: 50px;
}

.ad-con {
    width: 1200px;
    margin: 0 auto;
}

.ad-title {
    width: 1200px;
    text-align: center;
    font-size: 36px;
    color: #FFF;
    margin: 80px 0 20px 0;
}

.ad-title-f {
    width: 1200px;
    text-align: center;
    line-height: 30px;
    color: #FFF;
}

.ad1 {
    width: 580px;
    height: 185px;
    background: #FFF;
    margin-top: 50px;
    float: left;
}

.ad1-img {
    float: left;
    padding: 33px;
}

.ad1-con {
    float: left;
    width: 395px;
}

.ad1-con1 {
    margin-top: 60px;
    font-size: 24px;
    color: #555555;
}

.ad1-con2 {
    color: #808080;
    line-height: 80px;
}

.di {
    width: 100%;
    float: left;
    background: url(../images/di.png) no-repeat;
    padding: 50px 0;
    text-align: center;
    color: #89909d;
    line-height: 28px;
}


.zz {
    position: relative;
    width: 169px;
    height: 169px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    float: left;
}

.zz1, .zz2 {
    position: absolute;
    width: inherit;
    height: inherit;
    text-align: center;
    line-height: inherit;
    transition: transform .4s ease;
}

    .zz1:before, .zz2:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        transform: rotate(45deg);
    }

    .zz1:hover, .zz2:hover {
        transform: translateX(0);
        z-index: 1;
    }

        .zz1:hover:before, .zz2:hover:before {
            width: 100%;
            height: 100%;
            transform: none;
        }


.zz1 {
    transform: translateY(100%);
}

    .zz1:before {
        bottom: 100%;
        left: 0;
        transform-origin: 0 100%;
    }

    .zz1:hover ~ .zz2 {
        transform: translateY(-100%);
    }

.zz2 {
    width: 169px;
    height: 139px;
    z-index: 1;
}

    .zz2 img {
        margin-top: 50px;
    }

    .zz2 p {
        line-height: 50px;
    }




.cloud-product {
    position: relative;
    z-index: 9;
}

.cloud-product-title {
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 32px;
    color: #333
}

.color-blue {
    color: #009fd9
}

.cloud-product-explain {
    margin-top: 26px;
    margin-bottom: 82px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    color: #999
}

.cloud-product-ul {
    width: 100%
}

    .cloud-product-ul li {
        position: relative;
        margin-left: 12px;
        width: 212px;
        float: left;
        background: #fff
    }

        .cloud-product-ul li:first-child {
            margin-left: 0
        }

.cloud-product-single-top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #f2f2f2
}

.cloud-product-name {
    font-size: 18px;
    color: #333;
    font-weight: 700
}

.cloud-product-single-bottom {
    width: 100%;
}

.empty-space {
    width: 100%;
    height: 99px;
    padding: 26px 0 0 0;
}

.single-bottom-item {
    height: 340px;
    width: 100%
}

    .single-bottom-item:first-child {
        border-right: 1px solid #eee
    }

.bg-product-pic {
    width: 100%;
    height: 82px
}

.server-header-01 {
    background: url(../images/product_header_icon_01.png) center no-repeat
}

.server-header-02 {
    background: url(../images/product_header_icon_02.png) center no-repeat
}

.server-header-03 {
    background: url(../images/product_header_icon_03.png) center no-repeat
}

.server-header-04 {
    background: url(../images/product_header_icon_04.png) center no-repeat
}

.server-header-05 {
    background: url(../images/product_header_icon_05.png) center no-repeat
}

.server-header-active-01 {
    background-image: url(../images/product_header_active_icon_01.png);
    background-repeat: no-repeat;
    background-position: center;
}

.server-header-active-02 {
    background: url(../images/product_header_active_icon_02.png) center no-repeat
}

.server-header-active-03 {
    background: url(../images/product_header_active_icon_03.png) center no-repeat
}

.server-header-active-04 {
    background: url(../images/product_header_active_icon_04.png) center no-repeat
}

.server-header-active-05 {
    background: url(../images/product_header_active_icon_05.png) center no-repeat
}

.product-introduce-title {
    margin-bottom: 14px;
    height: 22px;
    line-height: 22px;
    font-size: 22px;
    text-align: center;
    color: #FFF;
}

    .product-introduce-title.normal-weight {
        font-weight: 400
    }

.product-introduce-content {
    margin: 0 auto 26px;
    width: 180px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    color: #999
}

.product-introduce-list {
    margin: 0 auto;
    padding-top: 28px;
    height: 135px;
    width: 84%;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #f1f1f1;
    border-right-color: #f1f1f1;
    border-bottom-color: #f1f1f1;
    border-left-color: #f1f1f1;
}

.introduce-list-small {
    margin-bottom: 18px;
    line-height: 14px;
    font-size: 14px;
    color: #fff;
    text-align: center
}

.product-introduce-price {
    margin: 48px auto 0;
    font-size: 14px;
    text-align: center;
    color: #333
}

.price-blue {
    color: #0af;
    font-size: 38px
}

.normal-inner {
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.active-inner {
    position: relative;
    display: none;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.introduce-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.active-inner-01 {
    background: url(../images/producet_bg_01.jpg) center no-repeat
}

.active-inner-02 {
    background: url(../images/producet_bg_01.jpg) center no-repeat
}

.active-inner-03 {
    background: url(../images/producet_bg_01.jpg) center no-repeat
}

.active-inner-04 {
    background: url(../images/producet_bg_01.jpg) center no-repeat
}

.active-inner-05 {
    background: url(../images/producet_bg_01.jpg) center no-repeat
}

.cloud-product-ul li.active .active-inner {
    display: block;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

.cloud-product-ul li.active .normal-inner {
    display: none;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0
}

.cloud-product-ul li {
    -webkit-box-shadow: 1px 1px 12px rgba(0,0,0,.08);
    -moz-box-shadow: 1px 1px 12px rgba(0,0,0,.08);
    box-shadow: 1px 1px 12px rgba(0,0,0,.08);
    -webkit-transition: width .15s linear;
    -o-transition: width .15s linear;
    -moz-transition: width .15s linear;
    transition: width .15s linear
}

    .cloud-product-ul li.active {
        z-index: 9;
        width: 304px;
        -webkit-box-shadow: 0 4px 20px rgba(0,0,0,.2);
        -moz-box-shadow: 0 4px 20px rgba(0,0,0,.2);
        box-shadow: 0 4px 20px rgba(0,0,0,.2)
    }

.active .product-introduce-content {
    color: #eff6ff
}

.active-product-introduce-title {
    color: #fff
}

.active .product-introduce-list {
    padding-top: 22px;
    border-color: #fff
}

.introduce-list-large {
    margin: 0 auto;
    width: 228px;
    line-height: 22px;
    color: #fff;
    font-size: 14px
}

.active .product-introduce-price {
    margin-top: 32px;
    color: #fefeff
}

.product-introduce-price .price-white {
    display: inline-block;
    font-size: 36px;
    height: 36px;
    line-height: 36px;
    color: #fff
}

.buy-link-btn {
    display: block;
    margin: 30px auto 0;
    width: 90%;
    height: 40px;
    line-height: 40px;
    background-color: #ff9600;
    color: #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

    .buy-link-btn:hover {
        background-color: #f80
    }