/* Code tidied up by ScrapBook */
.back-white, .btn {
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
}

@font-face {
    font-family: "bebasregular";
    font-style: normal;
    font-weight: 400;
   /* src: url("../../font/bebas-webfont.woff2") format("woff2"), url("../../font/bebas-webfont.woff") format("woff");*/
}


.btn {
    display: inline-block;
    width: 100px;
    height: 32px;
    border-radius: 3px;
    line-height: 32px;
    color: rgb(0, 159, 217);
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.service-action-ul li {
    float: left;
    width: 20%;
    height: 116px;
}

.service-action-ul li .subbanner-link-main.special {
    border-right: 1px solid rgba(73, 127, 163, 0.6);
}

.service-action-ul li .subbanner-link-main {
    position: relative;
    display: block;
    width: 100%;
    height: 116px;
    border-left: 1px solid rgba(73, 127, 163, 0.6);
}

.service-action-ul li .subbanner-link-main:hover {
    background-color: rgba(33, 154, 214, 0.1);
}

.subbanner-link-icon {
    position: absolute;
    right: 31px;
    bottom: 23px;
    width: 22px;
    height: 22px;
    background: url("../images/sub_banner_link.png") no-repeat scroll center center transparent;
}

.subbanner-link-icon:hover {
    background: url("../images/sub_banner_link_hover.png") no-repeat scroll center center transparent;
}

.service-action-box {
    position: relative;
}

.subbanner-1 {
    background: url("../images/sub_banner_bg_1.png") no-repeat scroll center center transparent;
}

.subbanner-2 {
    background: url("../images/sub_banner_bg_2.png") no-repeat scroll center center transparent;
}

.subbanner-3 {
    background: url("../images/sub_banner_bg_3.png") no-repeat scroll center center transparent;
}

.subbanner-4 {
    background: url("../images/sub_banner_bg_4.png") no-repeat scroll center center transparent;
}

.service-action-text {
    padding: 18px 0px 0px 33px;
}

.service-action-title {
    font-weight: 700;
    font-size: 16px;
    color: rgb(255, 255, 255);
}

.service-action-info {
    margin-top: 9px;
    font-size: 14px;
    color: rgb(210, 211, 211);
}

.service-action-link {
    margin-top: 8px;
    color: rgb(0, 170, 255);
    font-size: 12px;
}

.superiority-div-wrapper {
 
    height: 108px;
    border-bottom: 1px solid #62797f;
    
}

.superiority-li-item {
    position: relative;
    float: left;
    margin: 0px 2.5%;
    padding-top: 33px;
    width: 20%;
    text-align: center;
}

.animate-wrapper-div {
    position: absolute;
    top: 34px;
    left: 50%;
    margin-left: -76px;
    width: 152px;
    height: 141px;
}

.animate-item-div {
    position: absolute;
}

.animate01-big-white {
    z-index: 1;
    top: 29px;
    left: 71px;
    width: 91px;
    height: 109px;
    background: url("../images/animate_01_big_white.png") no-repeat scroll center center transparent;
}
/*
.animate01-small-white {
    z-index: 9;
    top: 80px;
    left: 22px;
    width: 91px;
    height: 75px;
    background: url("../images/animate_01_small_white.png") no-repeat scroll center center transparent;
}*/

.animate01-big-blue {
    z-index: 6;
    top: -7px;
    left: 2px;
    width: 43px;
    height: 80px;
    background: url("../images/superiority-icon-list.png") no-repeat ;
    background-position: 5px center;
}

/*.animate01-small-blue {
    z-index: 6;
    top: -2px;
    left: 46px;
    width: 39px;
    height: 75px;
    background: url("../images/superiority-icon-list.png") no-repeat scroll center center transparent;
    background-position: 1px center;
}*/

@keyframes animate01translateY1 {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes animate01translateY1 {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
    }
}

.superiority-li-item-01.active .animate01-big-blue {
    animation: 0.9s ease 0s normal both 1 animate01translateY1;
}

.superiority-li-item-01.active .animate01-small-blue {
    animation: 0.5s ease 0.9s normal both 1 animate01translateY1;
}

.animate02-white-01 {
    z-index: 1;
    top: 27px;
    left: 21px;
    width: 52px;
    height: 69px;
    background: url("../images/animate02_white_01.png") no-repeat scroll center center transparent;
}

.animate02-white-02 {
    z-index: 6;
    top: 63px;
    left: 67px;
    width: 102px;
    height: 91px;
    background: url("../images/animate02_white_02.png") no-repeat scroll center center transparent;
}

.animate02-big-blue {
    z-index: 3;
    top: -7px;
    left: 2px;
    width: 36px;
    height: 80px;
    background: url("../images/superiority-icon-list.png") no-repeat scroll center center transparent;
    background-position: -38px center;
}

.superiority-li-item-02.active .animate02-big-blue {
    animation: 0.9s ease 0s normal both 1 animate01translateY1;
}

/*.animate03-big-blue {
    z-index: 1;
    top: 23px;
    left: 20px;
    width: 154px;
    height: 125px;
    background: url("../images/animate03_big_blue.png") no-repeat scroll center center transparent;
}

.animate03-white-01 {
    z-index: 9;
    top: 8px;
    left: 20px;
    width: 36px;
    height: 32px;
    background: url("../images/animate03_white_01.png") no-repeat scroll center center transparent;
}

.animate03-white-02 {
    z-index: 9;
    top: 16px;
    left: 56px;
    width: 32px;
    height: 38px;
    background: url("../images/animate03_white_02.png") no-repeat scroll center center transparent;
}*/

.animate03-white-03 {
    z-index: 9;
    top: 7px;
    left: 6px;
    width: 34px;
    height: 46px;
    background: url("../images/superiority-icon-list.png") no-repeat scroll center center transparent;
    background-position: -74px center;
}

.superiority-li-item-03.active .animate03-white-01 {
    animation: 0.9s ease 0.5s normal both 1 animate01translateY1;
}

.superiority-li-item-03.active .animate03-white-02 {
    animation: 0.5s ease 0.2s normal both 1 animate01translateY1;
}

.superiority-li-item-03.active .animate03-white-03 {
    animation: 0.5s ease 0s normal both 1 animate01translateY1;
}

/*.animate04-white-01 {
    z-index: 9;
    top: 76px;
    left: 48px;
    width: 77px;
    height: 63px;
    background: url("../images/animate04_white_01.png") no-repeat scroll center center transparent;
}

.animate04-white-02 {
    z-index: 1;
    top: 22px;
    left: 77px;
    width: 102px;
    height: 101px;
    background: url("../images/animate04_white_02.png") no-repeat scroll center center transparent;
}*/

.animate04-big-blue {
    z-index: 2;
    top: -30px;
    left: -9px;
    width: 36px;
    height: 118px;
    background: url("../images/superiority-icon-list.png") no-repeat scroll center center transparent;
    background-position: -108px center;
}

/*.animate04-small-blue {
    z-index: 2;
    top: 62px;
    left: 28px;
    width: 78px;
    height: 76px;
    background: url("../images/animate04_small_blue.png") no-repeat scroll center center transparent;
}
*/
/*.nw_ntitle .col{
    color: #00aaff;
}*/
.animate04-arrow-blue-01 {
    z-index: 10;
    top: 48px;
    left: 32px;
    width: 9px;
    height: 15px;
    background: url("../images/animate04_arrow_blue_01.png") no-repeat scroll center center transparent;
}

.animate04-arrow-blue-02 {
    z-index: 10;
    top: 76px;
    left: 12px;
    width: 13px;
    height: 21px;
    background: url("../images/animate04_arrow_blue_02.png") no-repeat scroll center center transparent;
}

.animate04-arrow-blue-03 {
    z-index: 10;
    top: 72px;
    left: 99px;
    width: 10px;
    height: 23px;
    background: url("../images/animate04_arrow_blue_03.png") no-repeat scroll center center transparent;
}

.superiority-li-item-04.active .animate04-big-blue {
    animation: 0.7s ease 0s normal both 1 animate01translateY1;
}

.superiority-li-item-04.active .animate04-small-blue {
    animation: 0.7s ease 0.5s normal both 1 animate01translateY1;
}

.superiority-li-item-04.active .animate04-arrow-blue-01 {
    animation: 0.5s ease 1.2s normal both 1 animate01translateY1;
}

.superiority-li-item-04.active .animate04-arrow-blue-02 {
    animation: 0.5s ease 1.7s normal both 1 animate01translateY1;
}

.superiority-li-item-04.active .animate04-arrow-blue-03 {
    animation: 0.5s ease 2s normal both 1 animate01translateY1;
}

.superiority-big-num {
    height: 38px;
    line-height: 38px;
    font-size: 22px;
    color: #fff;
    font-family: bebasregular;
}

.dot-text {
    font-family: "微软雅黑";
}

.add-text {
    position: relative;
    font-size: 20px;
    top: 0px;
    left: 4px;
    font-weight: 700;
}

.superiority-small-text {
    font-size: 16px;
    line-height: 18px;
    color: rgb(153, 153, 153);
}

.cloud-product-box {
    background: none repeat scroll 0% 0% rgb(244, 244, 244);
}

.cloud-product-wrapper {
    margin: 0px auto;
    width: 1200px;
}

.cloud-product {
    position: relative;
    z-index: 9;
    padding: 40px 0px 80px;
}

.cloud-product-title {
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 27px;
    color: rgb(51, 51, 51);
}

.color-blue {
    color: rgb(0, 159, 217);
}

.cloud-product-explain {
    margin-top: 16px;
    margin-bottom: 52px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    color: rgb(153, 153, 153);
}

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

.cloud-product-ul li {
    position: relative;
    margin-left: 12px;
    width: 212px;
    height: 490px;
    float: left;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
}

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

.cloud-product-single-top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: rgb(242, 242, 242);
}

.cloud-product-name {
    font-size: 18px;
    color: rgb(51, 51, 51);
    font-weight: 700;
}

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

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

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

.single-bottom-item:first-child {
    border-right: 1px solid rgb(238, 238, 238);
}

.bg-product-pic {
    margin: 48px auto 0px;
    width: 100%;
    height: 82px;
}

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

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

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

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

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

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

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

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

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

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

.idc-bg {
    background: url("../images/index-sprite.png") no-repeat scroll 0px -1421px transparent;
}

.host-bg {
    background: url("../images/index-sprite.png") no-repeat scroll -6px -1256px transparent;
}

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

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

.product-introduce-content {
    margin: 0px auto 26px;
    width: 180px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    color: rgb(153, 153, 153);
}

.product-introduce-list {
    margin: 0px auto;
    padding-top: 28px;
    height: 135px;
    width: 84%;
    border-width: 1px medium;
    border-style: solid none;
    border-color: rgb(241, 241, 241) -moz-use-text-color;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}

.introduce-list-small {
    margin-bottom: 18px;
    line-height: 14px;
    font-size: 14px;
    color: rgb(153, 153, 153);
    text-align: center;
}

.product-introduce-price {
    margin: 48px auto 0px;
    font-size: 14px;
    text-align: center;
    color: rgb(51, 51, 51);
}

.price-blue {
    color: rgb(0, 170, 255);
    font-size: 38px;
}

.normal-inner {
    transition: all 0.5s ease 0s;
}

.active-inner {
    position: relative;
    display: none;
    height: 100%;
    opacity: 0;
    transition: all 0.5s ease 0s;
}

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

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

.active-inner-02 {
    background: url("../images/producet_bg_02.jpg") no-repeat scroll center center transparent;
}

.active-inner-03 {
    background: url("../images/producet_bg_03.jpg") no-repeat scroll center center transparent;
}

.active-inner-04 {
    background: url("../images/producet_bg_04.jpg") no-repeat scroll center center transparent;
}

.active-inner-05 {
    background: url("../images/producet_bg_05.jpg") no-repeat scroll center center transparent;
}

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

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

.cloud-product-ul li {
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.08);
    transition: width 0.15s linear 0s;
}

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


/*最新产品*/
.service_list_met_16_2.met-index-body.bgcolor{background: !important;background: !important;}
.service_list_met_16_2.met-index-body.bgpic{background:url() no-repeat;background-size: cover;background-position: center;}
.service_list_met_16_2.met-index-body h2{font-size:36px;color:#00aaff;color:;}
.service_list_met_16_2.met-index-body p.desc{padding:0 10%;font-size:16px;color:#999999;color:;}
.service_list_met_16_2 .index-service-list li{margin:15px;float: left;width: 30%;border: 1px solid #e9e9e9;min-height: 384px;}
.service_list_met_16_2 .index-service-list li img{width: 100%; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; -webkit-transition: all 18s ease 0s; transition: all 1s ease 0s;height: 252px;}
.service_list_met_16_2 .index-service-list li h3{font-size: 20px; margin: 16px 0;color:#555555;color:#000000;}
.service_list_met_16_2 .index-service-list li p{color:#999999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;line-height: 23px;font-size: 14px;}
.service_list_met_16_2 .index-service-list li .service-shadow{display: block; width: 100%; overflow: hidden;} 
.service_list_met_16_2 .index-service-list li .service-info{padding: 5px 15px; background: #fff; display: block; position: relative; }
.service_list_met_16_2 .index-service-list li .service-info:after{content: ''; display: block; width: 0; height: 2px; background:#00aaff;background:; position: absolute; left: 0; bottom: 0; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s;} 
.service_list_met_16_2 .index-service-list li:hover .service-info:after{width:100%;}
.service_list_met_16_2 .index-service-list li:hover h3{color:#00aaff;color:;}
.service_list_met_16_2 .index-service-list li:hover img{moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
.service_list_met_16_2 .index-service-list li:hover .service-shadow{box-shadow: 0px 5px 10px #e0e0e0;}


.active .product-introduce-content {
    color: rgb(239, 246, 255);
}

.active-product-introduce-title {
    color: rgb(255, 255, 255);
}

.active .product-introduce-list {
    padding-top: 22px;
    border-color: rgb(63, 159, 249);
}

.introduce-list-large {
    margin: 0px auto;
    width: 228px;
    line-height: 22px;
    color: rgb(221, 235, 255);
    font-size: 14px;
}

.active .product-introduce-price {
    margin-top: 32px;
    color: rgb(254, 254, 255);
}

.product-introduce-price .price-white {
    display: inline-block;
    font-size: 36px;
    height: 36px;
    line-height: 36px;
    color: rgb(255, 255, 255);
}

.buy-link-btn {
    display: block;
    margin: 30px auto 0px;
    width: 90%;
    height: 40px;
    line-height: 40px;
    background-color: rgb(255, 150, 0);
    color: rgb(255, 255, 255);
    border-radius: 0px;
}

.buy-link-btn:hover {
    background-color: rgb(255, 136, 0);
}

.product-tab-wrapper {
    width: 100%;
}

.product-tab-item {
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: height 0.5s ease 0s;
}

.product-tab-title {
    margin: 0px auto;
    padding-left: 40px;
    width: 90%;
    min-width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: url("../images/add-icon.png") no-repeat scroll 0% 0% rgb(250, 250, 250);
    color: rgb(102, 102, 102);
}

.product-tab-item.active .product-tab-title {
    background: url("../images/reduce_icon.png") no-repeat scroll 0% 0% rgb(224, 249, 255);
    color: rgb(0, 159, 217);
}

.product-tab-content {
    width: 200px;
    margin-top: 6px;
    margin-left: 54px;
    line-height: 22px;
    font-size: 12px;
    color: rgb(153, 153, 153);
}

.product-tab-item.active {
    height: 150px;
}

.net-safety-box {
    position: relative;
    padding-top: 72px;
    height: 840px;
    background:  #293137;
}

.net-black-div-box {
    z-index: 1;
    width: 775px;
    height: 457px;
    top: 267px;
    left: 187px;
    position: absolute;
    background: url("../images/net_black_bg.png") no-repeat scroll center center transparent;
}

.net-safety-title {
    margin-bottom: 16px;
    font-size: 27px;
    line-height: 32px;
    text-align: center;
    color: rgb(255, 255, 255);
}

.net-safety-explain {
    margin-bottom: 45px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: rgb(153, 153, 153);
}

.net-safety-intro-wrapper {
    margin-bottom: 40px;
}

.net-safety-intro-div {
    padding-left: 50px;
    height: 120px;
    width: 340px;
}

.safety-intro-div-01 {
    background: url("../images/net_safety_icon_01.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-02 {
    background: url("../images/net_safety_icon_02.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-03 {
    background: url("../images/net_safety_icon_03.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-04 {
    background: url("../images/net_safety_icon_04.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-01:hover {
    background: url("../images/net_safety_icon_active_01.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-02:hover {
    background: url("../images/net_safety_icon_active_02.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-03:hover {
    background: url("../images/net_safety_icon_active_03.png") no-repeat scroll 0% 0% transparent;
}

.safety-intro-div-04:hover {
    background: url("../images/net_safety_icon_active_04.png") no-repeat scroll 0% 0% transparent;
}

.net-safety-intro-title {
    margin-bottom: 8px;
    padding-left: 8px;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    color: rgb(255, 255, 255);
}

.net-safety-intro-subtitle {
    position: relative;
    display: inline-block;
    padding: 0px 30px 0px 8px;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    color: rgb(153, 153, 153);
}

.net-safety-subtitle-line {
    position: absolute;
    z-index: 8;
    left: 0px;
    top: 1px;
    width: 100%;
    height: 1px;
    background: none repeat scroll 0% 0% rgb(54, 55, 62);
}

.net-safety-subtitle-dot {
    position: absolute;
    z-index: 9;
    left: 0px;
    top: 0px;
    width: 4px;
    height: 3px;
    background-color: rgb(137, 137, 142);
}

.net-safety-subtitle-icon {
    position: absolute;
    z-index: 9;
    width: 28px;
    height: 28px;
    top: -13px;
    right: -13px;
    background: url("../images/net_safety_subtitle_icon.png") no-repeat scroll center center transparent;
}

.net-safety-more-link {
    display: block;
    border: 1px solid rgb(145, 146, 149);
    width: 172px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    background-color: transparent;
    color: rgb(255, 255, 255);
    text-align: center;
}

.net-safety-more-link:hover {
    border-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
}

.net-safety-box .auto {
    position: relative;
}

.net-safety-animate-wrapper {
    position: absolute;
    top: -128px;
    right: 53px;
    width: 909px;
    height: 686px;
}

@media only screen and (min-width: 1400px) {
    .net-safety-animate-wrapper {
        position: absolute;
        top: -128px;
        right: -40px;
        width: 909px;
        height: 686px;
    }
}

@media only screen and (min-width: 1600px) {
    .net-safety-animate-wrapper {
        position: absolute;
        top: -128px;
        right: -140px;
        width: 909px;
        height: 686px;
    }
}

.net-safety-animate-wrapper .net-safety-animate-wrapper-bg-01 {
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0px;
    width: 909px;
    height: 686px;
    background: url("../images/net_safety_animate_wrapper_bg_01.png") repeat scroll 0% 0% transparent;
}

.net-safety-animate-wrapper-bg-02 {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 909px;
    height: 686px;
    background: url("../images/net_safety_animate_wrapper_bg_02.png") repeat scroll 0% 0% transparent;
}

.animate-inner-box, .animate-item {
    position: absolute;
}

.storage-animate-box {
    position: absolute;
    z-index: 9;
    top: 97px;
    left: 582px;
    width: 180px;
    height: 180px;
}

@keyframes storage-animate1 {
    0% {
        background: url("../images/storage_empty_box_001.png") no-repeat scroll center center transparent;
    }
    100%, 15%, 30%, 45% {
        background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
    }
    60%, 85% {
        background: url("../images/storage_light_box_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes storage-animate1 {
    0% {
        background: url("../images/storage_empty_box_001.png") no-repeat scroll center center transparent;
    }
    100%, 15%, 30%, 45% {
        background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
    }
    60%, 85% {
        background: url("../images/storage_light_box_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes storage-animate2 {
    0%, 15% {
        background: url("../images/storage_empty_box_001.png") no-repeat scroll center center transparent;
    }
    100%, 30%, 45% {
        background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
    }
    60%, 85% {
        background: url("../images/storage_light_box_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes storage-animate2 {
    0%, 15% {
        background: url("../images/storage_empty_box_001.png") no-repeat scroll center center transparent;
    }
    100%, 30%, 45% {
        background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
    }
    60%, 85% {
        background: url("../images/storage_light_box_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes storage-animate3 {
    0%, 15%, 30% {
        background: url("../images/storage_empty_box_001.png") no-repeat scroll center center transparent;
    }
    100%, 45% {
        background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
    }
    60%, 85% {
        background: url("../images/storage_light_box_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes storage-animate3 {
    0%, 15%, 30% {
        background: url("../images/storage_empty_box_001.png") no-repeat scroll center center transparent;
    }
    100%, 45% {
        background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
    }
    60%, 85% {
        background: url("../images/storage_light_box_001.png") no-repeat scroll center center transparent;
    }
}

.storage-animate-item {
    width: 78px;
    height: 115px;
    background: url("../images/storage_box_001.png") no-repeat scroll center center transparent;
}

.storage-animate-item-01 {
    top: 0px;
    left: 0px;
}

.storage-animate-item-02 {
    top: 36px;
    left: 52px;
}

.storage-animate-item-03 {
    top: 67px;
    left: 106px;
}

.storage-animate-box.active .storage-animate-item-01 {
    animation: 3s ease 0s normal both 1 storage-animate1;
}

.storage-animate-box.active .storage-animate-item-02 {
    animation: 3s ease 0s normal both 1 storage-animate2;
}

.storage-animate-box.active .storage-animate-item-03 {
    animation: 3s ease 0s normal both 1 storage-animate3;
}

.storage-animate-box.reverse .storage-animate-item-01 {
    animation: 3s ease 0s reverse none 1 storage-animate1;
}

.storage-animate-box.reverse .storage-animate-item-02 {
    animation: 3s ease 0s reverse none 1 storage-animate2;
}

.storage-animate-box.reverse .storage-animate-item-03 {
    animation: 3s ease 0s reverse none 1 storage-animate3;
}

.safe-animate-box {
    z-index: 9;
    top: 242px;
    left: 116px;
    width: 396px;
    height: 315px;
    background: url("../images/safe_animate_06_001.png") no-repeat scroll center center transparent;
}

@keyframes safe-animate {
    0% {
        background: url("../images/safe_animate_01_001.png") no-repeat scroll center center transparent;
    }
    12.5% {
        background: url("../images/safe_animate_02_001.png") no-repeat scroll center center transparent;
    }
    25% {
        background: url("../images/safe_animate_03_001.png") no-repeat scroll center center transparent;
    }
    37.5% {
        background: url("../images/safe_animate_04_001.png") no-repeat scroll center center transparent;
    }
    50% {
        background: url("../images/safe_animate_05_001.png") no-repeat scroll center center transparent;
    }
    62.5% {
        background: url("../images/safe_animate_06_001.png") no-repeat scroll center center transparent;
    }
    75%, 87.5% {
        background: url("../images/safe_animate_07_001.png") no-repeat scroll center center transparent;
    }
    100% {
        background: url("../images/safe_animate_06_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes safe-animate {
    0% {
        background: url("../images/safe_animate_01_001.png") no-repeat scroll center center transparent;
    }
    12.5% {
        background: url("../images/safe_animate_02_001.png") no-repeat scroll center center transparent;
    }
    25% {
        background: url("../images/safe_animate_03_001.png") no-repeat scroll center center transparent;
    }
    37.5% {
        background: url("../images/safe_animate_04_001.png") no-repeat scroll center center transparent;
    }
    50% {
        background: url("../images/safe_animate_05_001.png") no-repeat scroll center center transparent;
    }
    62.5% {
        background: url("../images/safe_animate_06_001.png") no-repeat scroll center center transparent;
    }
    75%, 87.5% {
        background: url("../images/safe_animate_07_001.png") no-repeat scroll center center transparent;
    }
    100% {
        background: url("../images/safe_animate_06_001.png") no-repeat scroll center center transparent;
    }
}

.safe-animate-box.active {
    animation: 3s ease 0s normal both 1 safe-animate;
}

.safe-animate-box.reverse {
    animation: 3s ease 0s reverse both 1 safe-animate;
}

.server-animate-box {
    z-index: 9;
    top: 139px;
    left: 107px;
    width: 204px;
    height: 260px;
    background: url("../images/server_animate_04_001.png") no-repeat scroll center center transparent;
}

@keyframes server-animate {
    0% {
        background: url("../images/server_animate_01_001.png") no-repeat scroll center center transparent;
    }
    15% {
        background: url("../images/server_animate_02_001.png") no-repeat scroll center center transparent;
    }
    30% {
        background: url("../images/server_animate_03_001.png") no-repeat scroll center center transparent;
    }
    45% {
        background: url("../images/server_animate_04_001.png") no-repeat scroll center center transparent;
    }
    67.5% {
        background: url("../images/server_animate_05_001.png") no-repeat scroll center center transparent;
    }
    100% {
        background: url("../images/server_animate_04_001.png") no-repeat scroll center center transparent;
    }
}

@keyframes server-animate {
    0% {
        background: url("../images/server_animate_01_001.png") no-repeat scroll center center transparent;
    }
    15% {
        background: url("../images/server_animate_02_001.png") no-repeat scroll center center transparent;
    }
    30% {
        background: url("../images/server_animate_03_001.png") no-repeat scroll center center transparent;
    }
    45% {
        background: url("../images/server_animate_04_001.png") no-repeat scroll center center transparent;
    }
    67.5% {
        background: url("../images/server_animate_05_001.png") no-repeat scroll center center transparent;
    }
    100% {
        background: url("../images/server_animate_04_001.png") no-repeat scroll center center transparent;
    }
}

.server-animate-box.active {
    animation: 3s ease 0s normal none 1 server-animate;
}

.server-animate-box.reverse {
    animation: 3s ease 0s reverse both 1 server-animate;
}

.net-connect-animate-box {
    z-index: 2;
    left: 290px;
    top: 0px;
    width: 500px;
    height: 686px;
    background: url("../images/net_connect_move.png") no-repeat scroll center center transparent;
}

.net-connect-animate-btn {
    position: absolute;
    z-index: 19;
    bottom: 30px;
    left: 511px;
    width: 180px;
    height: 180px;
}

.connect-bg-01, .connect-bg-02 {
    bottom: 0px;
    left: 366px;
    width: 405px;
    height: 286px;
    position: absolute;
}

.connect-bg-01 {
    z-index: 8;
    background: url("../images/connect_bg_01.png") no-repeat scroll center center transparent;
}

.connect-bg-02 {
    z-index: 1;
    background: url("../images/connect_bg_02.png") no-repeat scroll center center transparent;
}

@keyframes net-move {
    0% {
        transform: translate(-165.45px, -100px);
    }
    70% {
        transform: translate(0px, 0px);
        background: url("../images/net_connect_move.png") no-repeat scroll center center transparent;
    }
    80%, 90% {
        background: url("../images/net_connect_move_light_001.png") no-repeat scroll center center transparent;
    }
    100% {
        background: url("../images/net_connect_move.png") no-repeat scroll center center transparent;
    }
}

@keyframes net-move {
    0% {
        transform: translate(-165.45px, -100px);
    }
    70% {
        transform: translate(0px, 0px);
        background: url("../images/net_connect_move.png") no-repeat scroll center center transparent;
    }
    80%, 90% {
        background: url("../images/net_connect_move_light_001.png") no-repeat scroll center center transparent;
    }
    100% {
        background: url("../images/net_connect_move.png") no-repeat scroll center center transparent;
    }
}

.net-connect-animate-box.active {
    animation: 4s ease 0s normal none 1 net-move;
}

.net-connect-animate-box.reverse {
    animation: 4s ease 0s reverse both 1 net-move;
}

.yellow-light-wrapper {
    z-index: 99;
    position: absolute;
    top: 410px;
    left: 156px;
    width: 168px;
    height: 202px;
}

@keyframes yellow-light {
    0%, 100% {
        background: url("../images/yellow_light_01.png") no-repeat scroll center center transparent;
    }
    25%, 75% {
        background: url("../images/yellow_light_02.png") no-repeat scroll center center transparent;
    }
}

@keyframes yellow-light {
    0%, 100% {
        background: url("../images/yellow_light_01.png") no-repeat scroll center center transparent;
    }
    25%, 75% {
        background: url("../images/yellow_light_02.png") no-repeat scroll center center transparent;
    }
}

.yellow-light {
    position: absolute;
    width: 52px;
    height: 35px;
    background: url("../images/yellow_light_01.png") no-repeat scroll center center transparent;
}

.yellow-light-01 {
    top: 0px;
    left: 0px;
}

.yellow-light-02 {
    top: 33px;
    left: 57px;
}

.yellow-light-03 {
    top: 66px;
    left: 115px;
}

.yellow-light-wrapper.active .yellow-light-01 {
    animation: 3s ease 0s normal none 1 yellow-light;
}

.yellow-light-wrapper.active .yellow-light-02 {
    animation: 3s ease 1s normal none 1 yellow-light;
}

.yellow-light-wrapper.active .yellow-light-03 {
    animation: 3s ease 2s normal none 1 yellow-light;
}

.yellow-light-wrapper.reverse .yellow-light-01 {
    animation: 3s ease 0s reverse none 1 yellow-light;
}

.yellow-light-wrapper.reverse .yellow-light-02 {
    animation: 3s ease 1s reverse none 1 yellow-light;
}

.yellow-light-wrapper.reverse .yellow-light-03 {
    animation: 3s ease 2s reverse none 1 yellow-light;
}

.net-safety-text {
    z-index: 12;
    position: absolute;
    width: 87px;
    height: 83px;
}

.net-safety-text1 {
    top: 462px;
    left: 146px;
    background: url("../images/net_safety_text_new_01.png") no-repeat scroll center center transparent;
}

.net-safety-text2 {
    width: 77px;
    height: 77px;
    top: 222px;
    left: 413px;
   /* background: url("../images/net_safety_text_new_02.png") no-repeat scroll center center transparent;*/
}

.net-safety-text3 {
    top: 223px;
    left: 738px;
    background: url("../images/net_safety_text_new_03.png") no-repeat scroll center center transparent;
}

.net-safety-text4 {
    top: 429px;
    left: 473px;
    background: url("../images/net_safety_text_new_04.png") no-repeat scroll center center transparent;
}

.net-safety-text5 {
    top: 135px;
    left: 131px;
    background: url("../images/net_safety_text_new_05.png") no-repeat scroll center center transparent;
}

.net-safety-light-circle {
    position: absolute;
    width: 16px;
    height: 12px;
    background: url("../images/net-light-point.png") no-repeat scroll center center transparent;
    box-shadow: 0px 1px 3px 5px rgba(46, 109, 169, 0.1);
    border-radius: 50%;
}

@keyframes circle-animate01 {
    0% {
        transform: translate(60px, 38.4px);
        opacity: 0.4;
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes circle-animate01 {
    0% {
        transform: translate(60px, 38.4px);
        opacity: 0.4;
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

.light-circle-01 {
    z-index: 2;
    top: 300px;
    left: 249px;
    animation: 4s ease-in 0s alternate none infinite circle-animate01;
}

@keyframes circle-animate02 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(37px, 23px);
    }
    70% {
        transform: translate(4px, 43px);
    }
    100% {
        transform: translate(44px, 75px);
    }
}

@keyframes circle-animate02 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(37px, 23px);
    }
    70% {
        transform: translate(4px, 43px);
    }
    100% {
        transform: translate(44px, 75px);
    }
}

.light-circle-02 {
    z-index: 8;
    top: 405px;
    left: 451px;
    animation: 5s ease-in 0s alternate none infinite circle-animate02;
}

@keyframes circle-animate03 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(-16px, 11px);
    }
    70% {
        transform: translate(-64px, -14px);
    }
    90% {
        opacity: 1;
        transform: translate(-120px, 16px);
    }
    100% {
        transform: translate(-120px, 16px);
        opacity: 0;
    }
}

@keyframes circle-animate03 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(-16px, 11px);
    }
    70% {
        transform: translate(-64px, -14px);
    }
    90% {
        opacity: 1;
        transform: translate(-120px, 16px);
    }
    100% {
        transform: translate(-120px, 16px);
        opacity: 0;
    }
}

.light-circle-03 {
    z-index: 8;
    top: 433px;
    left: 377px;
    animation: 5.4s ease-in 0s alternate none infinite circle-animate03;
}

@keyframes circle-animate04 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(-18px, 12px);
    }
    70% {
        transform: translate(28px, 39px);
    }
    90% {
        opacity: 1;
        transform: translate(-28px, 71px);
    }
    100% {
        opacity: 0;
        transform: translate(-28px, 71px);
    }
}

@keyframes circle-animate04 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(-18px, 12px);
    }
    70% {
        transform: translate(28px, 39px);
    }
    90% {
        opacity: 1;
        transform: translate(-28px, 71px);
    }
    100% {
        opacity: 0;
        transform: translate(-28px, 71px);
    }
}

.light-circle-04 {
    z-index: 8;
    top: 378px;
    left: 284px;
    animation: 5.4s ease-in 0s alternate none infinite circle-animate04;
}

@keyframes circle-animate05 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(-97px, 60px);
    }
    70% {
        transform: translate(-34px, 97px);
    }
    90% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
    100% {
        transform: translate(-91px, 130px);
        opacity: 0;
    }
}

@keyframes circle-animate05 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    40% {
        transform: translate(-97px, 60px);
    }
    70% {
        transform: translate(-34px, 97px);
    }
    90% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
    100% {
        transform: translate(-91px, 130px);
        opacity: 0;
    }
}

.light-circle-05 {
    z-index: 2;
    top: 208px;
    left: 585px;
    animation: 6.4s ease-in 0s alternate none infinite circle-animate05;
}

@keyframes circle-animate06 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    39% {
        transform: translate(-61px, 37px);
        opacity: 1;
    }
    40%, 71%, 95% {
        opacity: 0;
    }
    41% {
        transform: translate(-114px, 13px);
    }
    42% {
        opacity: 0;
        transform: translate(-146px, 29px);
    }
    70% {
        opacity: 0;
        transform: translate(-83px, 66px);
    }
    100% {
        transform: translate(-140px, 99px);
        opacity: 0;
    }
}

@keyframes circle-animate06 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    39% {
        transform: translate(-61px, 37px);
        opacity: 1;
    }
    40%, 71%, 95% {
        opacity: 0;
    }
    41% {
        transform: translate(-114px, 13px);
    }
    42% {
        opacity: 0;
        transform: translate(-146px, 29px);
    }
    70% {
        opacity: 0;
        transform: translate(-83px, 66px);
    }
    100% {
        transform: translate(-140px, 99px);
        opacity: 0;
    }
}

.light-circle-06 {
    z-index: 2;
    top: 239px;
    left: 634px;
    animation: 6.4s ease-in 0s alternate none infinite circle-animate06;
}

@keyframes circle-animate07 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    30% {
        transform: translate(-79px, 47px);
    }
    45% {
        transform: translate(-45px, 68px);
    }
    50% {
        transform: translate(-61px, 77px);
    }
    70% {
        opacity: 1;
        transform: translate(-137px, 32px);
    }
    71%, 95% {
        opacity: 0;
    }
    100% {
        transform: translate(-194px, 65px);
        opacity: 0;
    }
}

@keyframes circle-animate07 {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    30% {
        transform: translate(-79px, 47px);
    }
    45% {
        transform: translate(-45px, 68px);
    }
    50% {
        transform: translate(-61px, 77px);
    }
    70% {
        opacity: 1;
        transform: translate(-137px, 32px);
    }
    71%, 95% {
        opacity: 0;
    }
    100% {
        transform: translate(-194px, 65px);
        opacity: 0;
    }
}

.light-circle-07 {
    z-index: 2;
    top: 273px;
    left: 688px;
    animation: 6.4s ease-in 0s alternate none infinite circle-animate07;
}

.net-safety-last-block {
    position: absolute;
    z-index: 19;
    top: 233px;
    left: 495px;
    width: 159px;
    height: 112px;
    background: url("../images/net_safety_block_last.png") no-repeat scroll center center transparent;
}

.solution-bgcolor {
    position: relative;
    background: none repeat scroll 0% 0% rgb(247, 250, 252);
    padding-bottom: 170px;
}

.particles-js-canvas-el {
    position: absolute;
    top: 0px;
    z-index: 1;
}

.solution-bgcolor .cloud-product {
    padding-bottom: 58px;
}

.solution-bgcolor .cloud-product-title span {
    color: rgb(51, 51, 51);
}

.solution-bgcolor .cloud-product-explain {
    color: rgb(153, 153, 153);
}

.solution-list {
    position: relative;
    height: 412px;
    z-index: 9;
}

.short-bar {
    position: absolute;
    top: 187px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 3px;
    background-color: rgb(255, 255, 255);
}

.active .short-bar {
    top: 201px;
    background-color: rgb(0, 157, 255);
}

.solution-list ul li {
    float: left;
    width: 240px;
    position: relative;
    height: 412px;
    transition: all 0.5s ease 0s;
}

.solution-item-wrapper {
    width: 240px;
    height: 412px;
    background: url("../images/solution_item_bg_01.jpg") no-repeat scroll center center transparent;
}

.solution-item-02 {
    background-image: url("../images/solution_item_bg_02.jpg");
}

.solution-item-03 {
    background-image: url("../images/solution_item_bg_03.jpg");
}

.solution-item-04 {
    background-image: url("../images/solution_item_bg_04.jpg");
}

.solution-item-05 {
    background-image: url("../images/solution_item_bg_05.jpg");
}

.active .solution-item-wrapper {
    position: absolute;
    z-index: 9;
    top: -62px;
    left: -51px;
    width: 341px;
    height: 526px;
    background: url("../images/solution_item_bg_active_01.jpg") no-repeat scroll 0% 0% transparent;
    box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 1400px) {
    .product-special-li-5.active .solution-item-wrapper {
        left: -102px;
    }
}

.active .solution-item-02 {
    background-image: url("../images/solution_item_bg_active_02.jpg");
}

.active .solution-item-03 {
    background-image: url("../images/solution_item_bg_active_03.jpg");
}

.active .solution-item-04 {
    background-image: url("../images/solution_item_bg_active_04.jpg");
}

.active .solution-item-05 {
    background-image: url("../images/solution_item_bg_active_05.jpg");
}

.solution-list ul li p.solution-title {
    position: absolute;
    top: 211px;
    width: 100%;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 18px;
    z-index: 2;
}

.solution-list ul li p.solution-intro {
    position: absolute;
    top: 282px;
    left: 50%;
    margin-left: -121px;
    width: 242px;
    overflow: hidden;
    color: rgb(238, 238, 238);
    line-height: 2;
    z-index: 2;
    opacity: 0;
    font-size: 14px;
    text-align: justify;
}

.solution-list ul li a {
    display: none;
    position: absolute;
    top: 452px;
    left: 50%;
    margin-left: -87px;
    width: 174px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: rgb(255, 255, 255);
    z-index: 2;
    background-color: rgb(0, 170, 255);
}

.solution-list ul li a:hover {
    background-color: rgb(0, 153, 229);
    transition: all 0.6s ease 0s;
}

.solution-list ul li.active p.solution-title {
    top: 158px;
    font-size: 22px;
}

.solution-list ul li.active p.solution-intro {
    top: 230px;
    opacity: 1;
}

.solution-list ul li.active a {
    top: 388px;
    display: block;
}

.free-certificate {
    height: 590px;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
}

.swiper-wrapper {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.certificat-swiper-wrapper {
    position: relative;
    width: 1200px;
    height: 213px;
    overflow: hidden;
}

.certificat-swiper-inner {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1444px;
    height: 213px;
    transition: left 0.3s ease 0s;
}

.certificat-swiper-inner.active {
    left: -240px;
}

.certificat-item {
    float: left;
    margin-left: 20px;
    width: 222px;
    height: 211px;
    border: 1px solid rgb(217, 217, 217);
}

.certificat-item:hover {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
}

.certificat-item:first-child {
    margin-left: 0px;
}

.certificat-item-wrapper {
    width: 100%;
    height: 100%;
}

.certificat-pic {
    margin: 0px auto;
    width: 102px;
    height: 111px;
}

.certificat-pic1 {
    background: url("../images/certificate_bg_01.png") no-repeat scroll center 34px transparent;
}

.certificat-pic2 {
    background: url("../images/certificate_bg_02.png") no-repeat scroll center 34px transparent;
}

.certificat-pic3 {
    background: url("../images/certificate_bg_03.png") no-repeat scroll center 34px transparent;
}

.certificat-pic4 {
    background: url("../images/certificate_bg_04.png") no-repeat scroll center 34px transparent;
}

.certificat-pic5 {
    background: url("../images/certificate_bg_05.png") no-repeat scroll center 34px transparent;
}

.certificat-pic6 {
    background: url("../images/certificate_bg_06.png") no-repeat scroll center 34px transparent;
}

.certificat-introduce {
    margin-top: 30px;
    width: 100%;
}

.certificat-introduce-top {
    margin-bottom: 12px;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    color: rgb(51, 51, 51);
    text-align: center;
}

.certificat-introduce-bottom {
    margin-top: 12px;
    height: 12px;
    line-height: 12px;
    color: rgb(153, 153, 153);
    font-size: 12px;
    text-align: center;
}

.certificat-active-btn-wrapper {
    margin: 50px auto 0px;
    width: 36px;
    height: 10px;
}

.certificat-btn {
    float: right;
    border: 1px solid rgb(144, 144, 144);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    cursor: pointer;
}

.certificat-btn:first-child {
    float: left;
}

.certificat-btn.active {
    background: none repeat scroll 0% 0% rgb(144, 144, 144);
}

.cooperative-partner {
    background: none repeat scroll 0% 0% rgb(244, 244, 244);
}

.cooperative-partner-list {
    margin-top: 26px;
}

.cooperative-partner-item {
    float: left;
    width: 240px;
    height: 184px;
    background-color: transparent;
    transition: all 0.5s ease 0s;
}

.item-01 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-02 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-03 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-04 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-05 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-06 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-07 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-08 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-09 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.item-10 {
    background: url("../images/parterner_active_01.png") no-repeat scroll center center transparent;
}

.cooperative-partner-item.active {
    position: relative;
    top: -4px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.1);
}

.news-trends {
    background: none repeat scroll 0% 0% #f9f9f9;
}

.news-trends-list {
    margin-top: 46px;
    padding: 0px 4%;
}

.press-release {
    float: left;
    margin-left: 40px;
    width: 430px;
}

.activity-title img {
    height: 140px;
}

.press-release:first-child {
    margin-left: 0px;
}

.press-release-title-wrapper {
    position: relative;
    display: block;
    margin-bottom: 20px;
}

.press-release-title {
    position: absolute;
    top: -10px;
    width: 120px;
    height: 120px;
}

.blue-bg, .press-release-word {
    position: absolute;
    top: 0px;
    left: 0px;
}

.blue-bg {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 170, 255);
    opacity: 0.9;
}

.press-release-word {
    z-index: 9;
    padding: 30px 34px;
    width: 120px;
    height: 120px;
    font-size: 20px;
    text-align: center;
    line-height: 32px;
    color: rgb(255, 255, 255);
}

.release-title-bg {
    width: 415px;
    height: 139px;
    border-radius: 5px;
}

.release-title-bg.title-bg-1 {
    background: url("../images/news3.jpg") no-repeat scroll center center transparent;
}

.release-title-bg.title-bg-2 {
    background: url("../images/news4.jpg") no-repeat scroll center center transparent;
}

.release-title-bg.title-bg-3 {
    background: url("../images/news_bg_03.jpg") no-repeat scroll center center transparent;
}



.press-news-pic {
    position: relative;
    margin: 20px auto 0px;
    width: 90%;
    height: 74px;
    overflow: hidden;
}

.press-news-picbg {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    margin-left: -173px;
    margin-top: -40px;
    height: 80px;
    width: 346px;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s ease 0s;
}

.press-news-pic:hover .press-news-picbg {
    transform: scale(1.1);
}



.press-release-list li a:hover span{
    color: rgb(0, 170, 255);
}

.press-release-list li a:hover i{
    color: rgb(0, 170, 255);
}

.press-release-list {
    margin: 0px auto;
    height: 174px;
}

.press-release-list li {
    margin-top: 22px;
    float: left;
    width: 100%;
    height: 14px;
    line-height: 14px;
}

.press-release-list li:first-child {
    margin-top: 20px;
}

.press-release-list li a {
    display: block;
}

.press-release-list li a i {
    float: left;
    width: 21%;
    font-style: normal;
    font-size: 12px;
    color: rgb(136, 136, 136);
    white-space: nowrap;
    text-align: right;
}

.press-release-list li a span {
    float: left;
    width: 76%;
    font-size: 14px;
    color: rgb(85, 85, 85);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.activity-title {
    text-align: center;
}

.activity-title a {
    display: block;
    margin: 0px auto;
    width: 370px;
    height: 260px;
    overflow: hidden;
}

.activity-title a img {
    width: 100%;
    height: 100%;
    transition: all 0.5s ease 0s;
}

.activity-title a img:hover {
    transform: scale(1.1);
}

.free-registration {
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 60px 0px 40px;
}

.free-registration a {
    display: inline-block;
    padding: 0px 42px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: rgb(255, 255, 255);
    background: none repeat scroll 0% 0% rgb(0, 159, 217);
    border-radius: 2px;
}

.free-registration a:hover {
    background: none repeat scroll 0% 0% rgb(255, 137, 9);
}

.map-service {
    position: relative;
    height: 760px;
    background: url("../images/map_balck_whole_bg.jpg") no-repeat scroll center center transparent;
}

.map-service-left {
    position: absolute;
    left: 0px;
    top: 0px;
    padding-top: 144px;
}

.china-map, .map-service-box {
    position: relative;
}

.map-service-intro-div {
    margin-bottom: 26px;
    padding-left: 56px;
    height: 96px;
}

.map-intro-div-01 {
    background: url("../images/map_service_intro_icon_01.png") no-repeat scroll 0% 0% transparent;
}

.map-intro-div-02 {
    background: url("../images/map_service_intro_icon_02.png") no-repeat scroll 0% 0% transparent;
}

.map-intro-div-03 {
    background: url("../images/map_service_intro_icon_03.png") no-repeat scroll 0% 0% transparent;
    margin-bottom: 60px;
}

.map-service-intro-title {
    height: 36px;
    line-height: 36px;
    color: rgb(238, 238, 238);
    font-size: 32px;
}

.map-service-intro-subtitle {
    height: 59px;
    width: 216px;
    border-bottom: 1px solid rgb(86, 88, 92);
    line-height: 50px;
    font-size: 18px;
    color: rgb(153, 153, 153);
}

.map-intro-div-03 .map-service-intro-subtitle {
    border-bottom: medium none;
}

a.map-service-more-link {
    display: block;
    margin-bottom: 38px;
    width: 174px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 170, 255);
}

.area-box .dot, .area-box .pulse, .douhao, .show-regin span {
    display: inline-block;
}

a.map-service-more-link:hover {
    background-color: rgb(0, 153, 229);
}

.map-service-tip-item {
    display: inline-block;
    margin-right: 34px;
    float: left;
    padding-left: 21px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
}

.tip-item-01 {
    color: rgb(0, 170, 255);
    background: url("../images/tip_icon_blue.png") no-repeat scroll 0px center transparent;
}

.tip-item-02 {
    color: rgb(211, 129, 12);
    background: url("../images/tip_icon_orange.png") no-repeat scroll 0px center transparent;
}

.tip-item-03 {
    color: rgb(117, 115, 112);
    background: url("../images/tip_icon_black.png") no-repeat scroll 0px center transparent;
}

.map-product {
    padding-bottom: 30px;
}

.map-service-right {
    margin-left: 414px;
    padding-top: 60px;
}

.china-map {
    width: 748px;
    height: 618px;
    background: url("../images/map_black_bg.png") no-repeat scroll center center transparent;
}

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

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

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

.area-box .dot {
    position: absolute;
    left: 0px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: none repeat scroll 0% 0% rgb(162, 169, 180);
    opacity: 1;
}

.area-box .pulse {
    position: absolute;
    top: -28px;
    left: -28px;
    height: 66px;
    width: 66px;
    border: 2px solid rgb(183, 183, 183);
    border-radius: 48px;
    box-shadow: 0px 0px 4px rgb(130, 135, 143), 0px 0px 10px rgb(130, 135, 143) inset;
    opacity: 0.12;
    animation: 2s ease-out 0s normal both infinite warn;
    background: none repeat scroll 0px 0px transparent;
}

.area-box .delay-01 {
}

.area-box .delay-02 {
    animation-delay: 0.4s;
}

.area-box .delay-03 {
    animation-delay: 0.8s;
}

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

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

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

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

.area-box .delay-08 {
    animation-delay: -0.4s;
}

.area-box .delay-09 {
    animation-delay: -0.8s;
}

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

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

.region-list.active .area-box .dot {
    background: none repeat scroll 0% 0% rgb(0, 159, 217);
}

.region-list.active .area-box .pulse {
    border-color: rgb(0, 159, 217);
    top: -39px;
    left: -39px;
    height: 88px;
    width: 88px;
    box-shadow: 0px 0px 12px rgb(0, 128, 217), 0px 0px 20px rgb(0, 128, 217) inset;
}

.region-list.waite .area-box .dot {
    background: none repeat scroll 0% 0% rgb(255, 153, 0);
}

.region-list.waite .area-box .pulse {
    border-color: rgb(255, 153, 0);
}

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

.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: rgb(204, 204, 204);
    border-radius: 2px;
    text-align: center;
}

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

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

.area-box {
    z-index: 77;
}

.show-regin {
    z-index: 66;
}

.region-list.active .show-regin span {
    position: relative;
    color: rgb(204, 204, 204);
}

.region-list.waite .show-regin span {
    color: rgb(204, 204, 204);
}

.postition-1 {
    left: 302px;
    top: 308px;
}

.postition-2 {
    left: 401px;
    top: 403px;
}

.postition-3 {
    left: 358px;
    top: 516px;
}

.postition-4 {
    left: 473px;
    top: 348px;
}

.postition-5 {
    left: 526px;
    top: 394px;
}

.postition-6 {
    left: 526px;
    top: 515px;
}

.postition-7 {
    left: 652px;
    top: 200px;
}

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

.postition-8 {
    left: 559px;
    top: 229px;
}

.postition-9 {
    left: 637px;
    top: 371px;
}

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

.postition-10 {
    left: 554px;
    top: 539px;
}

.postition-11 {
    left: 604px;
    top: 300px;
}

.postition-13 {
    left: 470px;
    top: 250px;
}

.douhao {
    width: 0px;
}