@import "https://at.alicdn.com/t/font_1627093_x2rdg11hfko.css";
*{margin: 0; padding: 0; outline: none; border: none; list-style: none; -webkit-tap-highlight-color: transparent;}
@font-face {
    font-family: "element-icons";
    src: url(../fonts/element-icons.woff) format('woff'), url(../fonts/element-icons.ttf) format('truetype');
}
body{color: #595757; font-family: Arial, "微软雅黑", "element-icons"; background-color: #f7f8f8;}
a{text-decoration: none; color: #595757;}
a:hover{color: #00ccff;}
a img{border: none;}
img{vertical-align: middle;}
i{font-style: normal;}
.tc {text-align: center;}
.copy {color: #fff; padding:50px 0;}
.copy a {color:#fff;}

/*

.pagination li {display: inline-block; text-align:center; margin-left: -1px; border:1px solid #eee; border-radius:3px; background-color:#fff;}
.pagination li a { display:block; padding: 8px 0; width:38px;}
.pagination li:last-child a {font-size:12px; width:44px;}
.pagination li:first-child a {font-size:12px; width:44px;}
.pagination li.active a {color: #fff; background: #00ccff; border-color:#00ccff;}
*/
.fybox {text-align:center;}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #00ccff;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination>li>a, .pagination>li>span {
    color: #333;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #00ccff;
    border-color: #00ccff;
}
.pagination>.active>a {
    background-color: #00ccff;
    border-color: #00ccff;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagebanner {text-align:center;}
.pagebanner img {display: inline-block; max-width:100%;}

@media screen and (min-width: 768px){
    body{font-size: 14px;}

    .headbox{background-color: #fff; width: 100%;}
    .head{width: 1200px; overflow:hidden; padding:15px 0; margin: 0 auto;}
    .logo{float: left; height: 120px; line-height: 120px;}
    .tel{float: right; height: 30px; line-height: 30px; font-size: 24px; margin-top: 60px;}
    .tel::before{font-size: 30px; color: #b81d1e;}
    .nav-button{display: none;}

    .nav{width: 100%; height: 50px; background-color: #00ccff;}
    .nav .nav-t{display: none;}
    .nav ul{display: block; width: 1200px; height: 60px; margin: 0 auto;}
    .nav ul li{height: 50px; line-height: 50px; float: left; margin-right: 1px; padding: 0 36px; position: relative; z-index: 9;}
    .nav ul li:last-child{margin-right: 0px;}
    .nav ul li:hover, .nav ul li.on{background-color: #fff;}
    .nav ul li a{color: #fff; font-size: 14px; display: block; height: 50px;}
    .nav ul li:hover a, .nav ul li.on a{color: #00ccff}
    .nav ul li i{display: none;}
    .nav ul li a img{margin-right: 5px;}
    .nav ul li a font{font-size: 14px;}

    .laug{float: right; height: 50px; line-height: 50px;}
    .laug span{height: 50px; line-height: 50px;}
    .laug span a{color: #fff;}
    .laug span img{width: 25px; margin-right: 5px;}

    .nav ul li .drop-nav{position: absolute; left: 0px; top: 50px; background-color: #fff; min-width: 100%; visibility: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: translateY(20px); opacity: 0; transition: all 0.3s;}
    .nav ul li:hover .drop-nav{visibility: visible; transform: translateY(0px); opacity: 1;}
    .nav ul li .drop-nav a{color: #00ccff; height: 40px; font-size: 14px; line-height: 40px; padding: 0 20px 0 15px; word-break: keep-all; white-space: nowrap; transition: all 0.3s;}
    .nav ul li .drop-nav a:hover, .nav ul li .drop-nav a.on {color: #fff; background-color: #00ccff;}
    .nav ul li .drop-nav a i{display: inline-block;}

    .index-banner {width: 1200px; background-color: #fff; margin: 0 auto; text-align: center; padding: 10px 0;}
    .index-banner .bpc, .index-img .bpc {display: inline;}
    .index-banner .bwap, .index-img .bwap {display: none;}

    .index-img{width: 1200px; margin: 0 auto; position: relative;}
    .index-img-txt{line-height: 50px; text-align: center; font-size: 30px; color: #fff; width: 100%; position: absolute; left: 0; top: 30px;}

    .business{width: 1200px; margin: 0px auto; padding-top: 60px; background: url(../images/index-bg01.png) no-repeat center top;}
    .title{width: 100%; height: 30px; line-height: 30px; font-size: 30px; text-align: center; overflow: hidden; padding-top: 20px; color: #333;}
    .title-en{height: 30px; line-height: 30px; text-align: center; font-size: 20px; color: #999;}

    .business > ul{width: 1200px; background: url(../images/index-bg02.png) no-repeat bottom center; padding-bottom: 150px; margin-top: 90px; /*overflow: hidden;*/ height: 255px; transition: all 0.5s;}
    .business ul.show{height: 430px;}
    .business ul li{width: 380px; height: 255px; float: left; position: relative;}
    .business ul li:nth-child(2){margin: 0 30px;}
    .business ul li a{display: block;}
    .business ul li img{width: 380px; height: 255px;}
    .business ul li img:nth-child(1){position: absolute; left: 0; top: 0; z-index: 1; transition: all 0.3s;}
    .business ul li:hover img:nth-child(1){opacity: 0;}
    .business ul li span{display: block; height: 50px; line-height: 50px; background-color: rgba(137, 137, 137, 0.7); color: #fff; font-size: 20px; text-align: center; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%;}
    .business ul li .drop-bus{position: absolute; left: 0; top: 255px; /*overflow: hidden;*/ width: 1200px; margin: 0; padding: 20px 0 0; visibility: hidden; opacity: 0; transform: translateY(-20px); transition: all 0.5s;}
    .business ul li:hover .drop-bus{visibility: visible; transform: translateY(0px); opacity: 1;}
    .business ul li .drop-bus li{width: 230px; margin-right: 12px; float: left; position: relative; }
    .business ul li .drop-bus li:nth-child(2){margin: 0 12px 0 0;}
    .business ul li .drop-bus li:last-child{margin: 0;}
    .business ul li .drop-bus li a{display: block; box-shadow: 0 0 10px rgba(0,0,0,.2); background: #fff;}
    .business ul li .drop-bus li a img{width: 230px; height: 230px;}
    .business ul li .drop-bus li a font{width: 100%; height: 30px; line-height: 30px; opacity: 0; font-size: 16px; color: #fff; position: absolute; left: 0; top: 85px; text-align: center; z-index: 2;}
    .business ul li .drop-bus li a .drop-bus-fl{background-color: rgba(0, 177, 255, 0.75); position: absolute; left: 0; top: 0; width: 100%; height: 230px; z-index: 1; opacity: 0; transition: all 0.5s; line-height: 315px;}
    .business ul li .drop-bus li a:hover .drop-bus-fl, .business ul li .drop-bus li a:hover font {opacity: 1;}
    .business ul li .drop-bus li a .drop-bus-fl .drop-bus-more-txt{height: 40px; line-height: 20px; text-align: center; color: #fff; display: inline-block; width: 100%;}
    .business ul li .drop-bus1{left: -410px;}
    .business ul li .drop-bus1 li{width: 280px; margin-right: 26px;}
    .business ul li .drop-bus1 li:nth-child(2){margin-right: 26px;}
    .business ul li .drop-bus1 li a img{width: 280px;}
    .business ul li .drop-bus2{left: -820px;}
    .business ul li .drop-bus2 li{width: 382px; margin-right: 26px;}
    .business ul li .drop-bus2 li:nth-child(2){margin-right: 26px;}
    .business ul li .drop-bus2 li a img{width: 382px;}
    .business ul li .drop-bus22{left: -410px;}
    .business ul li .drop-bus22 li{width: 382px; margin-right: 26px;}
    .business ul li .drop-bus22 li:nth-child(2){margin-right: 26px;}
    .business ul li .drop-bus22 li a img{width: 382px;}

    .indexbox{width: 1200px; overflow: hidden; margin: 0 auto 35px; background-color: #fff;}
    
    .videobox {width:1200px; margin:0 auto 30px;}
    
    .title1, .title-en1{text-align-last: left;}
    .title1{font-size: 26px;}
    .title-en1{font-size: 14px;}
    .index-left{float: left; width: 600px; box-sizing: border-box; padding: 20px;}
    .about{line-height: 30px; margin-top: 20px; font-size: 16px;}
    .about-more{height: 30px; line-height: 30px; text-align: left; margin-top: 20px;}
    .about-more a{color: #f39800;}
    .about-more a:hover{color: #00ccff;}
    .index-right{float: right; width: 600px; box-sizing: border-box; padding: 20px;}
    .news-title{height: 80px; line-height: 40px; font-size: 26px; margin-top: 20px; overflow: hidden;}
    .news-title a{color: #595757;}
    .news-title a:hover{color: #00ccff;}
    .news-desc{height: 60px; line-height: 30px; overflow: hidden; font-size: 18px; color: #727171; margin-top: 20px; margin-bottom: 20px;}
    .news-more{height: 30px; line-height: 30px; text-align: left; margin-top: 5px;}
    .news-more a{color: #f39800;}
    .news-more a:hover{color: #00ccff;}

    .footbox{width: 100%; background-color: #00ccff;}
    .foot {width: 1200px; margin: 0 auto; overflow: hidden; padding: 100px 0 0;}
    .foot-item{float: left; margin-right: 182px;}
    .foot-item:last-child{margin-right: 0;}
    .foot-item-t{color: #fff; font-size: 18px; height: 30px; line-height: 30px; margin-bottom: 10px;}
    .foot-item-t a {color: #fff;}
    .foot-item ul{overflow: hidden;}
    .prof{width: 200px;}
    /*.prof li{float: left; width: 100px;}*/
    .foot-item li{height: 25px; line-height: 25px; color: #fff; margin-bottom: 5px; font-size: 14px;}
    .foot-item li::before{margin-right: 10px; font-size: 16px;}
    .foot-item li a{color: #fff;}
    .foot-ewm {width: 96px; height: 96px; margin: 10px auto;}
    .foot-ewm img {max-width: 100%;}
    .foot-ewm-txt{color: #fff; height: 20px; line-height: 20px; text-align: center;}

    .banner{width: 100%; min-width: 1200px; position: relative;}
    .banner img{width: 100%;}
    .banner-text{width: 1200px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 25px;}
    .banner-text span{width: 50px; height: 2px; background-color: #595757; display: block; margin: 10px 0;}

    .main{width: 1200px; overflow: hidden; margin: 50px auto;}

    .main-left{float: left; width: 220px; background-color: #fff; /*overflow: hidden;*/}
    .sort-t{height: 40px; line-height: 40px; background-color: #00ccff; color: #fff; font-size: 16px; padding: 0 20px; margin-bottom: 10px;}
    .sort-t i{float: right;}
    .sort-s{/*height: 30px;*/ line-height: 20px; margin-bottom: 10px; padding:3px 20px;}
    .sort-s.on a{color: #00ccff;;}
    .sort-s a{color: #595757; display: block;}
    .sort-s a:hover{color: #00ccff;}
    .sort-s a i{float: right;}
    .sort-contact{padding: 0 20px;}
    .sort-contact p{line-height: 30px; font-size: 14px;}
    .sort-contact p::before{font-size: 16px; margin-right: 10px;}
    .sort-contact img {max-width:100%;}

    .main-right{float: right; width: 960px;}

    .position{height: 39px; line-height: 39px; border-bottom: 1px solid #ccc;}

    .newslist{padding-top: 20px; overflow: hidden;}
    .newslist li{overflow: hidden; background-color: #fff; transition: all 0.5s; width: 940px; margin: 0 auto 20px;}
    .newslist li:hover{box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
    .newslist li a{display: block; padding: 20px; overflow: hidden; width: 100%; height: 100%; box-sizing: border-box;}
    .news-pic{float: left; margin-right: 20px; width: 260px; height: 175px; overflow: hidden;}
    .news-pic img{width: 260px; height: 175px; transition: all 0.5s;}
    .newslist li:hover .news-pic img{transform: scale(1.03);}
    .newslist-title{font-size: 18px; height: 50px; line-height: 25px; overflow: hidden; margin-top: 0;}
    .newslist-desc{font-size: 14px; height: 40px; line-height: 20px; overflow: hidden; margin-top: 10px;}
    .newslist-date{height: 20px; line-height: 20px; color: #999;}
    .newslist-more{text-align: right;}

    .con-title{text-align: center; font-size: 18px; line-height: 30px; margin-top: 20px;}
    .con-info{font-size: 12px; color: #999; text-align: center; margin: 20px 0 0; height: 20px; line-height: 20px;}
    .con-con{line-height: 24px; font-size: 14px; margin-top: 20px; padding-bottom:20px;}
    .con-con img{max-width: 100%;}
    .con-t{height: 30px; line-height: 30px; margin-top: 20px; color: #fff; background-color: #00ccff; padding: 0 20px;}
    .con-news{padding: 0 20px; margin-top: 10px;}
    .con-news li{height: 30px; line-height: 30px;}

    .ccc {margin: 0 15px;}
    .ccc p {margin-bottom: 10px; text-align: justify;}

    /*Proindex*/
    .prosort-t{height: 40px; line-height: 40px; background-color: #00ccff; color: #fff; font-size: 16px; padding: 0 20px; margin-bottom: 10px;}
    .prosort-t i{float: right;}
    .prosort-s {height: 34px; line-height: 34px; margin-bottom: 10px; clear:both; padding: 0 15px; position:relative;}
    .prosort-s.active .aa {color: #fff; background:#00ccff;}
    .prosort-s.active:hover {}
    .prosort-s a {color: #595757; display: block; padding:0 10px;}
    .prosort-s a:hover {color: #fff; background:#00ccff;}
    .prosort-s a i{float: right;}
    .prosort-s .sortdown {opacity:0; position:absolute; top:0; right:-233px; padding:10px; box-shadow:0 0 10px #ddd; background-color:#fff; border-radius:0 0 5px 5px;}
    .prosort-s:hover .sortdown {opacity:1;}
    .prosort-s .sortdown a {display:block; padding:0px 5px;}
    
    .clear{clear:both;}
    .psortbox {}
    .psortbox .ps1 {margin-bottom: 10px; clear:both; position:relative; z-index:100;}
    .psortbox .ps1 .pa {height: 34px; line-height: 34px; display:block; margin:0 15px; padding: 0 5px; }
    .psortbox .ps1 .pa i {float: right;}
    .psortbox .ps1.active .pa, .psortbox .ps1:hover .pa, .psortbox .men:hover .paa {color: #fff; background:#00ccff;}
    .psortbox .downmen {display:none; z-index:1000; position:absolute; top:0; left:200px; width:244px; padding:10px; box-shadow:0 0 15px #bbb; background-color:#fff; border-radius:0 0 5px 5px;}
    .psortbox .downmen2 {width:290px;}
    .psortbox .men {position: relative;}
    .psortbox .men .paa {height: 34px; line-height: 34px; display:block; padding-left:5px; margin-bottom:5px; color: #fff; background:#00ccff;}
    .psortbox .men .paa:hover, .psortbox .menchild a:hover {color: #fff; background:#00ccff;}
    .psortbox .men .paa.act {color: #fff; background:#00ccff;}    
    
    .psortbox .men .paa1 {height: 34px; line-height: 34px; display:block; padding-left:5px;}
    .psortbox .men .paa1:hover {color: #fff; background:#00ccff;}

    .psortbox .menchild {display:none; position:absolute; top:0; left:240px; width:344px; padding:10px; box-shadow:0 0 15px #bbb; background-color:#fff; border-radius:0 0 5px 5px;}
    .psortbox .menchild a {height: 34px; line-height: 34px; display:block; padding-left:5px;}

    .psortbox .ps1:hover .downmen {display:block;}
    .psortbox .men:hover .menchild {display:block;}
    
    
    .promain {}
    .proitem {padding:15px 15px 15px 0; box-shadow: 0 0 10px #ddd; background-color:#fff; margin:15px 15px; border-radius:5px;}
    .proitem h3 {padding-left: 20px; margin-bottom:10px; line-height:36px;}
    .proindex{overflow: hidden;}
    .proindex > li{float: left; overflow: hidden; width: 435px; margin-left: 20px; margin-top: 0px; }
    .proindex li:nth-child(2n){margin-right: 0px;}
    .proindex-t {height: 36px; line-height: 36px; border-radius: 3px 3px 0 0; background-color: #00ccff; padding: 0 10px; color: #fff;}
    .proindex-t a {color: #fff;}
    .proindex li ul{overflow: hidden; padding: 10px 15px;}
    .proindex li ul li{height: 25px; line-height: 25px; overflow: hidden; padding: 0;}

    .proitemno {padding:15px 15px 15px 0; box-shadow: 0 0 10px #ddd; background-color:#fff; margin:15px 15px; border-radius:5px;}
    .proitemno h3 {padding-left: 20px; margin-bottom:10px; line-height:36px;}
    .proindexno {overflow: hidden;}
    .proindexno > li{float: left; overflow: hidden; width: 435px; margin-left: 20px; margin-top: 0px; }
    .proindexno li:nth-child(2n){margin-right: 0px;}
    .proindexno li ul{overflow: hidden; padding: 10px 15px;}
    .proindexno li ul li{height: 25px; line-height: 25px; overflow: hidden; padding: 0;}

    .prolist{overflow: hidden; padding: 20px 0;}
    .prolist li{width: 298px; float: left; margin: 0 10px 20px; border: 1px solid #ccc; background-color: #fff; border-radius: 5px; overflow: hidden; transition: all 0.3s;}
    .prolist li:hover{box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: translateY(-3px);}
    .pro-img{width: 298px; height: 199px; line-height: 199px; position: relative; overflow: hidden;}
    .pro-img span{display: block; width: 100%; height: 199px; line-height: 199px; text-align: center; color: #fff; background-color: rgba(0, 177, 255, 0.75); position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.5s;}
    .prolist li:hover .pro-img span{opacity: 1;}
    .pro-img img{max-width: 100%; max-height: 100%; display: inline-block;}
    .pro-title{padding: 0 10px; overflow: hidden; height: 40px; line-height: 40px; font-size: 16px;}
    .pro-desc{line-height: 22px; height: 44px; overflow: hidden; padding: 0 10px; color: #999; margin-bottom: 10px;}
    

    .page{height: 30px; line-height: 30px; text-align: center;}
    .page a, .page span{display: inline-block; padding: 0 10px; height: 28px; line-height: 28px; border: 1px solid #ccc; margin: 0 5px;}

.partbox {}
.partbox .item {margin-bottom: 15px;background: #fff;   padding: 20px 15px 10px;    border-radius: 5px;  box-shadow: 0 0 10px rgba(0,0,0,.05);}
.partbox .item ul {overflow:hidden; padding:0px 0;}
.partbox .item ul li {float:left; margin:15px 15px 15px 0;}
.partbox .item ul li a { border:1px solid #eee; display:block; padding:10px; background-color:#fff;}
.partbox .item ul li img {max-width: 100%; height:50px;}

    .probox{overflow: hidden; margin-top: 20px;}
    .pro-left{float: left; width: 530px}
    .pro-showpic{width: 530px; height: 350px; text-align: center; line-height: 350px; overflow: hidden;}
    .pro-showpic img{max-width: 100%; max-height: 100%;}
    .pro-albumlist{width: 530px; overflow: hidden; margin-top: 20px;}
    .pro-albumlist li{float: left; margin: 0 4px; border: 1px solid #ccc; width: 98px; overflow: hidden; cursor: pointer;}
    .pro-albumlist li.show{border-color: #00ccff;}
    .pro-albumlist li img{width: 98px;}
    .pro-right{width: 430px; float: right; padding-left: 20px; box-sizing: border-box;}
    .pro-tit{line-height: 25px; font-size: 18px; border-bottom: 1px solid #ccc; padding-top: 20px; padding-bottom: 20px; margin-bottom: 20px;}
    .pro-desc{line-height: 25px;}
    .pro-tab{border: 1px solid #ddd; height: 38px; background-color: #fff; margin-top: 20px; overflow: hidden;}
    .pro-tab span{float: left; height: 38px; line-height: 38px; padding: 0 25px; border-right: 1px solid #ddd; cursor: pointer; transition: all 0.3s;}
    .pro-tab span.on{background-color: #00ccff; color: #fff;}
    .pro-tab a{float: left; height: 38px; line-height: 38px; padding: 0 30px; color: #fff; margin-left: 1px;}
    .pro-tab a.prview{background-color: #f00;}
    .pro-tab a.download{background-color: #00ccff;}
    .pro-tab a:hover {background: #00aeda; color: #fff; text-decoration: none;}
    .pro-con{display: none;}
    .pro-con.show{display: block;}
    .main-right .bb {background: #fff;}
    
    .protitle {overflow:hidden;}
    .protitle h1 {padding-left: 15px; font-size: 26px;}

    .solutionlist{overflow: hidden; padding-top: 20px;}
    .solutionlist li{float: left; width: 470px; margin: 5px; overflow: hidden; box-sizing: border-box; padding: 10px;}
    .solu-pic{width: 225px; height: 315px; line-height: 315px; float: left; margin-right: 20px; text-align: center;}
    .solu-pic img{max-width: 100%; max-height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);}
    .solu-right{float: right; width: 205px;}
    .solu-title{line-height: 25px; font-size: 18px; color: #333;}
    .solu-desc{line-height: 20px; margin-bottom: 20px; font-size: 12px;}
    .solu-t{margin-top: 5px; line-height: 20px;}
    .solu-button{height: 25px; line-height: 25px; margin-top: 10px; margin-bottom: 20px;}
    .solu-button a{display: inline-block; padding: 0 20px; height: 25px; line-height: 25px; border-radius: 13px; color: #fff; margin-right: 10px; background-color: #00ccff;}

    .server-list{width: 100%; overflow: hidden;}
    .server-list ul{margin: 0px auto; overflow: hidden;}
    .server-list ul li{height: 410px; overflow: hidden; background-color: #fff; transition: all 1s;}
    .server-list ul li:nth-child(even){background-color: #f7f8f8;}
    .server-box{float: left; width: 600px; height: 410px; box-sizing: border-box;}
    .server-con {padding: 40px;}
    .server-img img{max-width: 100%; height: 410px;}
    .server-icon{height: 103px; line-height: 103px;}
    .server-title{line-height: 30px; font-size: 28px; color: #00ccff; margin: 30px 0;}
    .server-title font{font-size: 14px; color: #9e9f9f; display: block;}
    .server-desc{font-size: 16px; color: #727171; line-height: 30px;}

    .contactbox{display: flex;}
    .contact-item{flex: 1; box-sizing: border-box; padding: 20px;}
    .contact-item:first-child{flex: 18%}
    .contact-tit{color: #00ccff; font-size: 16px; line-height: 25px; border-bottom: 1px solid #dadada; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold;}
    .contact-tit font{display: block; font-size: 12px;}
    .contact-con{line-height: 25px;}
    .contact-con a.iconfont{height: 28px; line-height: 28px; width: 150px; border: 1px solid #00ccff; color: #00ccff; border-radius: 14px; display: block; margin-bottom: 10px; text-align: center; font-size: 14px; transition: all 0.3s;}
    .contact-con a.iconfont:hover{background-color: #00ccff; color: #fff;}
    .contact-con a.iconfont::before{font-size: 18px; vertical-align: middle;}
    .contact-map img{width: 100%;}

    .fbox{width: 50px; position: fixed; right: 0; top: 40%; z-index: 9; /*transform: translateY(-50%);*/}
    .fbox-item{width: 50px; height: 50px; background-color: #00ccff; margin-bottom: 1px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; overflow: hidden; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: all 0.5s;}
    .fbox-item:hover{width: 150px; margin-left: -90px;}
    .fbox-item:nth-child(2):hover{width: 200px; margin-left: -150px;}
    .fbox-item:nth-child(5):hover{width: 180px; margin-left: -100px;}
    .fbox-item:nth-child(6):hover{width: 200px; margin-left: -110px;}
    .fbox-item:last-child:hover{width: 50px; margin-left: 0;}
    .flbox-item-box{height: 50px; line-height: 50px; overflow: hidden; width: 150px;}
    .fbox-item:nth-child(2) .flbox-item-box{width: 190px;}
    .fbox-item:nth-child(5) .flbox-item-box{width: 170px;}
    .fbox-item:nth-child(6) .flbox-item-box{width: 200px;}
    .flbox-item-icon{float: left; width: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}
    .flbox-item-txt{float: left; width: 70px; height: 50px; line-height: 50px; text-align: left; color: #fff;}
    .fbox-item:nth-child(2) .flbox-item-txt{width: 140px;}
    .fbox-item:nth-child(5) .flbox-item-txt{width: 110px;}
    .fbox-item:nth-child(6) .flbox-item-txt{width: 150px;}
    
/* honor */
.horimg .item {float:left;margin-bottom:1rem;margin-left:1%;margin-right:1%;width:31.5%; box-shadow: 0 0 8px rgba(0,0,0,.15)}
.horimg .item:nth-child(3n+0){margin-right:0}
/*
.horimg .item:nth-child(3n+1){clear:both;margin-left:0}
*/
.horimg .item a {display:block;width:100%;height:auto; background: #fff; }
.horimg .item a img{-webkit-back-visibility:hidden;display:block;width:100%;height:410px;vertical-align:bottom}
.horimg .item p {padding: 12px 0; overflow: hidden; text-align: center; transition: all 0.4s; margin-bottom: 0;}
.horimg .item a:hover p {background: #3375b9; color: #fff;}
    

/*.onlinebox .form-horizontal .form-group{margin-bottom:25px}*/
/*.onlinebox .form-control{border-radius:0;border:1px solid #888}*/
/*.onlinebox .form-horizontal{padding:1em 6em 0}*/
/*.onlinebox .btn{border-radius:0;background-color:#cd1827;padding:.8em 3em;color:#fff}*/
/*.onlinebox .line{height:1px;border-top:1px solid #dadada;position:relative;top:48px;z-index:1}*/
/*.onlinebox .title22{font-family:PingFangSC-Regular;font-size:22px;color:#1d1d1d;letter-spacing:0;text-align:center;padding-top:30px;width:146px;margin:0 auto;background:#fff;position:relative;z-index:100}*/
/*.onlinebox .info{font-family:PingFangSC-Regular;font-size:16px;color:#1d1d1d;letter-spacing:0;line-height:24px;text-align:left;margin:30px 0}*/
    
 
.onlinebox {padding:3em 4em; margin:15px auto 36px; overflow: hidden; background:#fff;border:1px solid #e6e3e3;box-shadow:0 6px 9px 0 rgba(0,0,0,.09)}
.onlinel {width:40%; float:left;}
.onlinel img {height:300px; width:100%;}
.onliner {width:56%; float:right;}

.onlinebox .fone {overflow: hidden; display:flex;}
.onlinebox .fone dl {overflow: hidden; border:1px solid #aaa; width: 50%; display:flex; padding:0 10px; margin:18px 10px 0;}
.onlinebox .fone dl dt {padding:10px 5px 0;}
.onlinebox .fone dl dd {width:100%;}
.onlinebox .fone dl dd input {height:24px; line-height:24px; padding:8px 8px 6px; width:100%;}

.onlinebox .fcode dd {position:relative;}
.onlinebox .fcode dd img {position: absolute; right: 0; top: 2px;}

.onlinebox .ftwo {overflow: hidden; border:1px solid #aaa; padding:0 10px; margin:18px 10px 0;}
.onlinebox .ftwo textarea {padding:8px 8px 6px; width:100%; font-family: Arial, "微软雅黑", "element-icons";}

.onlinebox .fone .btner {border:none; margin:18px 0px 0;;}
.onlinebox .fone .btner button {overflow: hidden; border:1px solid #00ccff; color:#fff; font-size:14px; width: 100%; height:40px; line-height:40px; cursor: pointer; padding:0 10px; background:#00ccff;}
.onlinebox .fone .btner button:hover {background:#00bae8;}

    
}


@media screen and (max-width: 767px){
    html,body{overflow-x: hidden; overflow-y: auto; width: 100vw;}
    body{font-size: 3vw;}

    .headbox{width: 100vw; height: 15vw}
    .head{width: 100vw; height: 15vw; position: fixed; left: 0; top: 0; z-index: 5; background-color: #fff; box-shadow: 0 0 2vw rgba(0, 0, 0, 0.3);}
    .logo{float: left; height: 15vw; line-height: 15vw; padding-left: 2.5vw;}
    .logo img{height: 8vw;}
    .tel{display: none;}
    .nav-button{float: right; margin-right: 2.5vw; width: 6vw; margin-top: 6vw;}
    .nav-button::before, .nav-button::after, .nav-button span{width: 6vw; height: 2px; border-radius: 1px; background-color: #ccc; display: block; content: ""; margin-bottom: 1vw;}

    .nav{width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); position: fixed; right: 0; top: 0; z-index: 6; transform: translateX(100vw); opacity: 0; transition: all 0.5s;}
    .nav.show{transform: translateX(0vw); opacity: 1;}
    .nav .nav-t{height: 13vw; line-height: 13vw; padding: 0 5vw; font-size: 4vw; color: #fff; background-color: #00ccff; width: 80vw; margin-left: 20vw; box-sizing: border-box;}
    .nav .nav-t i{float: right; font-size: 5vw;}
    .nav ul{width: 80vw; height: calc(100vh - 13vw); overflow-x: hidden; overflow-y: auto; display: block; background-color: #fff; margin-left: 20vw;}
    .nav ul li{line-height: 13vw; padding: 0 5vw; border-bottom: 1px solid #efefef; font-size: 4vw;}
    .nav ul li i{float: right; font-size: 4vw; height: 13vw; line-height: 13vw; transition: all 0.5s;}
    .nav ul li i.show{transform: rotate(-180deg);}
    .nav ul li a{display: inline-block; height: 11vw; line-height: 11vw;}
    .nav ul li .drop-nav{width: 80vw; background-color: #efefef; margin-left: -5vw; padding: 0 5vw; box-sizing: border-box; overflow: hidden; height: 0vw; transition: all 0.5s;}
    .nav ul li .drop-nav a{display: block; font-size: 3.6vw; height: 11vw; line-height: 11vw; width: 100%; overflow: hidden;}
    .nav ul li .drop-nav a i{float: right;}

    .laug{height: 10vw; line-height: 10vw; display: flex; margin-top: 2vw;}
    .laug span{flex: 1; display: block; height: 10vw; line-height: 10vw; text-align: center;}
    .laug span img{height: 5vw; margin-right: 1vw;}

    .index-banner{ background-color: #fff; margin: 0 auto; text-align: center; padding: 15px;}
    .index-banner img{max-width: 100%;}
    .index-banner .bpc, .index-img .bpc {display: none;}
    .index-banner .bwap, .index-img .bwap {display: inline;}

    .index-img{margin: 0 auto; position: relative; padding: 0 15px;}
    .index-img-txt{line-height: 8vw; text-align: center; font-size: 4vw; color: #fff; width: 90vw; position: absolute; left: 0; right: 0; top: 5vw; margin: 0 auto;}
    .index-img img{width: 100%;}
    
    .videobox {padding:0 15px 15px;}

    .business{width: 100vw; margin: 5vw auto 0; background: url(../images/index-bg01.png) no-repeat top center;}
    .title{width: 100%; height: 8vw; line-height: 8vw; font-size: 5vw; text-align: center; overflow: hidden; padding-top: 5vw; color: #333;}
    .title-en{height: 8vw; line-height: 8vw; text-align: center; font-size: 4vw; color: #999;}

    .business > ul{width: 100vw; background: url(../images/index-bg02.png) no-repeat bottom center; padding-bottom: 15vw; overflow: hidden;}
    .business ul li{width: 90vw; margin: 5vw auto 0; position: relative;}
    .business ul li a{display: block;}
    .business ul li img{width: 100%;}
    .business ul li img:nth-child(1){display: none;}
    .business ul li span{display: block; height: 10vw; line-height: 10vw; background-color: rgba(137, 137, 137, 0.7); color: #fff; font-size: 4vw; text-align: center; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%;}
    .business ul li .drop-bus{display: none;}

    .indexbox{width: 100vw; overflow: hidden; margin: 0 auto; background-color: #fff;}
    .title1{font-size: 5vw;}
    .title-en1{font-size: 4vw;}
    .index-left{width: 90vw; box-sizing: border-box; padding: 2.vw; margin: 0 auto;}
    .about{line-height: 8vw; margin-top: 5vw; font-size: 4vw;}
    .about-more{height: 8vw; line-height: 8vw; text-align: right; margin-top: 5vw;}
    .about-more a{color: #f39800;}
    .about-more a:hover{color: #00ccff;}
    .index-right{width: 90vw; box-sizing: border-box; padding: 2.5vw; margin: 0 auto;}
    .news-title{height: 16vw; line-height: 8vw; font-size: 5vw; margin-top: 5vw; overflow: hidden;}
    .news-title a{color: #595757;}
    .news-title a:hover{color: #00ccff;}
    .news-desc{height: 12vw; line-height: 6vw; overflow: hidden; font-size: 4vw; color: #727171; margin-top: 5vw; margin-bottom: 5vw;}
    .news-more{height: 8vw; line-height: 8vw; text-align: right; margin-top: 1vw;}
    .news-more a{color: #f39800;}
    .news-more a:hover{color: #00ccff;}

    .footbox{width: 100vw; background-color: #00ccff;}
    .foot{width: 100vw; padding: 10vw 0;}
    .foot-item{display: none;}
    .foot-item:nth-child(3), .foot-item:last-child{display: block; width: 100vw; text-align: center; color: #fff; line-height: 8vw; font-size: 5vw;}
    .foot-item:last-child{margin-top: 5vw;}
    .foot-item li{font-size: 3vw;}
    .foot-item li::before{margin-right: 2vw;}
    .foot-ewm-txt{font-size: 3vw; margin-top: 2vw;}
    .foot-ewm img {width:60%;}

    .copy {padding: 20px 0;}
    
    .fbox{display: none;}

    .banner{width: 100vw; position: relative;}
    .banner img{width: 100%;}
    .banner-text{width: 100vw; position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); font-size: 4vw; line-height: 8vw; padding: 0 5vw; box-sizing: border-box;}
    .banner-text span{width: 10vw; height: 1px; background-color: #595757; display: block;}

    .main{width: 100vw; overflow: hidden;}
    .main-left{display: none;}
    .main-right{width: 100vw; box-sizing: border-box; padding: 5vw; overflow: hidden;}

    .position{height: 10vw; line-height: 10vw; font-size: 4vw; margin-bottom: 5vw; overflow: hidden;}

    .newslist{width: 90vw;}
    .newslist li{overflow: hidden; background-color: #fff;  width: 90vw; margin: 0 auto 5vw; box-shadow: 0 0 2.5vw rgba(0, 0, 0, 0.2)}
    .newslist li a{display: block; padding: 2.5vw; overflow: hidden; width: 100%; height: 100%; box-sizing: border-box;}
    .news-pic{width: 85vw; overflow: hidden;}
    .news-pic img{width: 85vw;}
    .newslist-title{font-size: 5vw; height: 16vw; line-height: 8vw; overflow: hidden; margin-top: 5vw;}
    .newslist-desc{font-size: 4vw; height: 12vw; line-height: 6vw; overflow: hidden; margin-top: 2vw; margin-bottom: 0;}
    .newslist-date{height: 8vw; line-height: 8vw; color: #999;}
    .newslist-more{text-align: right;}

    .page{height: 10vw; line-height: 10vw; text-align: center;}
    .page a, .page span{display: inline-block; padding: 0 2.5vw; height: 10vw; line-height: 10vw; border: 1px solid #ccc; margin: 0 2.5vw;}

    .con-title{text-align: center; font-size: 5vw; line-height: 8vw; margin-top: 5vw;}
    .con-info{font-size: 3vw; color: #999; text-align: center; margin: 5vw 0 0; height: 8vw; line-height: 8vw;}
    .con-con{line-height: 8vw; font-size: 4vw; margin-top: 5vw;}
    .con-con img{max-width: 100%;}
    .con-t{height: 10vw; line-height: 10vw; margin-top: 5vw; color: #fff; background-color: #00ccff; padding: 0 2.5vw;}
    .con-news{padding: 0 2.5vw; margin-top: 5vw;}
    .con-news li{height: 8vw; line-height: 8vw; overflow: hidden;}

    .proindex{overflow: hidden; width: 90vw;}
    .proindex li{overflow: hidden; width: 90vw; margin: 0 auto 5vw;}
    .proindex-t{height: 10vw; line-height: 10vw; background-color: #00ccff; padding: 0 2.5vw; color: #fff; font-size: 4vw;}
    .proindex li ul{overflow: hidden; padding: 0 2.5vw;}
    .proindex li ul li{height: 8vw; line-height: 8vw; overflow: hidden; margin: 2vw 0 0; padding: 0;}

    .promain {}
    .proitem {padding:15px 15px 15px 0; box-shadow: 0 0 10px #ddd; background-color:#fff; margin:15px 0px; border-radius:5px;}
    .proitem h3 {padding-left: 20px; margin-bottom:10px; line-height:30px; font-size:1.8em;}
    .proindex{overflow: hidden; width:auto;}
    .proindex > li{float: left; overflow: hidden; width: 100%; margin-left: 20px; margin-top: 0px; margin-bottom:0;}
    .proindex li:nth-child(2n){margin-right: 0px;}
    .proindex-t {height: 36px; line-height: 36px; border-radius: 3px 3px 0 0; background-color: #00ccff; padding: 0 10px; color: #fff;}
    .proindex-t a {color: #fff;}
    .proindex li ul{overflow: hidden; padding: 10px 15px;}
    .proindex li ul li {height: 25px; line-height: 25px; overflow: hidden; padding: 0; width:auto;}
    .proindex li ul li a {font-size: 4vw;}
    
    .protitle {}
    .protitle h1 {font-size: 6vw;}


    .prolist{width: 90vw;}
    .prolist li{width: 90vw; margin: 0 auto 5vw; background-color: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 0 2vw rgba(0, 0, 0, 0.2);}
    .pro-img{width: 90vw; height: 50vw; line-height: 50vw;}
    .pro-img img{max-width: 100%; max-height: 100%; display: inline-block;}
    .pro-img span{display: none;}
    .pro-title{padding: 0 2.5vw; overflow: hidden; height: 8vw; line-height: 8vw; font-size: 5vw;}
    .pro-desc{line-height: 6vw; height: 12vw; overflow: hidden; padding: 0 2.5vw; color: #999; margin-bottom: 2.5vw; margin-top: 2vw;}

    .probox{overflow: hidden;}
    .pro-left{width: 90vw}
    .pro-showpic{width: 90vw; height: 55vw; text-align: center; line-height: 55vw; overflow: hidden;}
    .pro-showpic img{max-width: 100%; max-height: 100%;}
    .pro-albumlist{width: 90vw; overflow: hidden; margin-top: 5vw;}
    .pro-albumlist li{float: left; margin: 1vw; border: 1px solid #ccc; width: calc(20.5vw - 2px); overflow: hidden; cursor: pointer;}
    .pro-albumlist li.show{border-color: #00ccff;}
    .pro-albumlist li img{width: calc(20.5vw - 2px);}
    .pro-right{width: 90vw; box-sizing: border-box;}
    .pro-tit{line-height: 8vw; font-size: 5vw; border-bottom: 1px solid #ccc; padding-bottom: 5vw; margin-bottom: 5vw;}
    .pro-desc{line-height: 6vw;}
    .pro-tab{border: 1px solid #ccc; height: 10vw; background-color: #fff; margin-top: 5vw; overflow-x: scroll; display: flex;}
    .pro-tab span{float: left; height: 10vw; line-height: 10vw; padding: 0 0vw; border-right: 1px solid #ccc; cursor: pointer; transition: all 0.3s; /*flex: 20%;*/ text-align: center;     padding: 0 5px;}
    .pro-tab span.on{background-color: #00ccff; color: #fff;}
    .pro-tab a{float: left; height: 10vw; line-height: 10vw; padding: 0 0vw; color: #fff; flex: 12; text-align: center;}
    .pro-tab a.prview{background-color: #666;}
    .pro-tab a.download{background-color: #006ada;}
    .pro-tab a:hover {background: #00aeda; color: #fff; text-decoration: none;}
    .pro-con{display: none;}
    .pro-con.show{display: block;}
    .main-right .bb {background: none;}

    .server-list{width: 100%; overflow: hidden;}
    .server-list ul{margin: 0px auto; overflow: hidden;}
    .server-list ul li{width: 100vw; overflow: hidden; background-color: #fff; transition: all 1s; margin: 0 auto; padding: 5vw; box-sizing: border-box;}
    .server-list ul li:nth-child(even){background-color: #f7f8f8;}
    .server-box{float: left; width: 90vw; box-sizing: border-box;}
    .server-con{padding: 2.5vw;}
    .server-img {display: none;}
    .server-icon{height: 20vw; text-align: center;}
    .server-icon img{height: 20vw;}
    .server-title{line-height: 10vw; font-size: 5vw; color: #00ccff; margin: 5vw 0 0; text-align: center;}
    .server-title font{font-size: 3vw; color: #9e9f9f; display: block; height: 6vw; line-height: 6vw;}
    .server-desc{font-size: 4vw; color: #727171; line-height: 7vw; margin-top: 5vw;}

    .contactbox{overflow: hidden;}
    .contact-item{box-sizing: border-box; padding: 5vw;}
    .contact-tit{color: #00ccff; font-size: 5vw; line-height: 10vw; border-bottom: 1px solid #dadada; padding-bottom: 2.5vw; margin-bottom: 2.5vw; font-weight: bold;}
    .contact-tit font{display: block; font-size: 3vw;}
    .contact-con{line-height: 7vw;}
    .contact-con a.iconfont{height: 8vw; line-height: 8vw; width: 45vw; border: 1px solid #00ccff; color: #00ccff; border-radius: 4vw; display: block; margin: 5vw auto 0; text-align: center; font-size: 4vw; transition: all 0.3s;}
    .contact-con a.iconfont:hover{background-color: #00ccff; color: #fff;}
    .contact-con a.iconfont::before{font-size: 5vw; vertical-align: middle;}
    .contact-map{width: 100vw;}
    .contact-map img{width: 100%;}

    .solutionlist{width: 90vw;}
    .solutionlist li{width: 90vw; margin: 5vw 0; box-sizing: border-box;}
    .solu-pic{width: 90vw; text-align: center;}
    .solu-pic img{max-width: 100%; max-height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);}
    .solu-right{width: 90vw;}
    .solu-title{line-height: 8vw; font-size: 5vw; color: #333; text-align: center; margin: 5vw 0;}
    .solu-desc{line-height: 6vw; margin-bottom: 5vw; font-size: 4vw; text-align: center;}
    .solu-t{margin-top: 5vw; line-height: 10vw;}
    .solu-button{height: 10vw; line-height: 10vw; text-align: center; padding-bottom: 10vw;}
    .solu-button a{display: inline-block; padding: 0 10vw; height: 10vw; line-height: 10vw; border-radius: 5vw; color: #fff; margin-right: 2.5vw; background-color: #00ccff;}

.onlinebox {margin-top:30px; padding:0;}
.onlinebox .onlinel {display:none;}
.onlinebox .onliner {width:auto; padding:10px 5px 20px;}   
.onlinebox .fone dl, .onlinebox .ftwo {margin:18px 5px 0;;}

.onlinebox .fcode {display:block;}
.onlinebox .fcode dl {width:auto; padding:0;}
.onlinebox .fcode dd {width:100% !important;}
.onlinebox .fone .btner {width:100% !important; padding:0;}
.onlinebox .fone .btner dd {padding:0 5px;}
.onlinebox .ftwo textarea {padding: 8px 0 6px;}
    
    
}