@import url(font/siyuan.css);

html, body {

	font-size: 14px;

	color:#666;

	margin: 0px;

	padding: 0px;

	text-decoration: none;

	font-family:"siyuan" !important;

	background: #fff;

}
*{
	margin: 0;
	padding: 0;
	outline: none;
}
a,a:focus,a:active {color: #333;	text-decoration: none;outline: 0px none; font-size: 16px;}

.h30{margin-top: 30px;}

.h15{margin-top: 15px;}

.h45{margin-top: 45px;}

.p30{padding: 33px 0;}
.p70{padding: 70px 0;}
h1,h2,h3,h4{margin:0;padding:0;}

a:hover,a:active{text-decoration: none;}

ul{padding:0;margin:0;}

ul li{list-style:none;}

.fl{float:left;}

.fr{float:right}

.ct{text-align: center}

.clear{clear:both;}

div{padding:0;margin:0;}

.w100{width:100%;}
table{border-spacing: 0}
.pro_nr .xq table tr:nth-child(2n){background: #eeeeee;}
.pro_nr .xq table tr td:nth-child(1){background-color: #54bcb1;color: #fff;}
table{width: 100%;}
td,th {
    white-space:nowrap; /* 自适应宽度*/
    word-break:keep-all; /* 避免长单词截断，保持全部 */
	border:solid #b7b7b7 1px;
	text-align:center;
	white-space:pre-line;
    word-break:break-all !important;
	word-wrap:break-word !important;
	display:table-cell;
	vertical-align:middle !important;
	white-space: normal !important;
	height:auto;
	vertical-align:text-top;
	padding:2px 2px 0 2px;
	display: table-cell;
}
body::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
    body::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    }
    body::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
    }
.w100{width: 100%;}
#btn-nav{display: none;}
.w1345{width: 1345px;margin: 0 auto;position: relative;}
.nav .w1345{height: 80px;line-height: 80px;display: flex;justify-content: space-between;}
.nav .logo{width: 17.4%;height: 80px;}
.nav .logo img{height: 60px;margin-top: 10px;}
#nav-content{width: 67%;}
.nav ul{display: flex;justify-content: space-between;width: 100%;}
.nav ul li{position: relative;}
.nav ul a{font-size: 16px;color: #fff;}
.nav ul li em{width: 0%;height: 0px;background-color: #fff;transition: .5s;display: block;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);}
.nav ul li:hover em{-webkit-user-drag: 100%;height: 3px;width: 100%;}
.nav ul li.cur em{-webkit-user-drag: 100%;height: 3px;width: 100%;}
.nav .mianfei a{width: 75px;height: 35px;display: block;border-radius: 3px;overflow: hidden;line-height: 35px;text-align: center;margin-top: 23px;font-size: 14px;background-color: #FFF;color: #666;}
.fadeInDown_top{animation: topgo ease 1s;}
@keyframes topgo{
    0%{
        top: -100%;
    }
    100%{
        top: 0;
    }
}

.banner{background: url(../images/2016/bg1.jpg)no-repeat center center;height: 620px;background-size: 100% 100%;}
.banner img{display: block;}
.banner b{display: block;margin-left: 10px;font-size: 16px;color: #fff;}
.banner .swiper-container{height: 100%;}
.banner .swiper-slide{position: relative;}
.banner .swiper-slide>div{position: absolute;}
.banner .computer .pic-1{left: 40px;top: 246px;-webkit-animation-name: fadeOutLeft;animation-name: fadeOutLeft;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer .pic-2{left: 378px;top: 337px;-webkit-animation-name: fadeOutLeft;animation-name: fadeOutLeft;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer .icon-text-2{left: 493px;top: 348px;line-height: 39px;display: flex;}
.banner .computer .icon-text-3{left: 493px;top: 402px;line-height: 39px;display: flex;}
.banner .computer .icon-text-4{left: 493px;top: 456px;line-height: 39px;display: flex;}
.banner .computer .text-1{left: 678px;top: 246px;font-size: 40px;color: #fff;z-index: 2;text-shadow: 0 3px 0px rgba(0, 0, 0, 0.3);}
.banner .computer .text-2{left: 678px;top: 360px;width: 370px;color: #fff;font-size:18px;}
.banner .computer .btn-1 a{display: inline-block;width: 162px;text-decoration: none;height: 52px;background: url(../images/2016/new_button.png)no-repeat;}
.banner .computer .btn-1{left: 676px;top: 430px;}
.banner .xcx .btn a{display: inline-block;width: 162px;text-decoration: none;height: 52px;background: url(../images/2016/new_button.png)no-repeat;}
.banner .xcx .pic-1{left: 21px;top: 176px;}
.banner .xcx .pic-2{left: 443px;top: 164px;}
.banner .xcx .text-1{left: 789px;top: 223px;z-index: 2;color: #ffffff;font-size: 50px;text-shadow: 0 3px 0px rgba(0, 0, 0, 0.3);}
.banner .xcx .text-2{left: 788px;top: 312px;font-size: 18px;color: #fff;}
.banner .xcx .btn-1{left: 789px;top: 430px;}
.banner  .btn a b{font-size: 18px;color: #017ed2;margin-left: 60px;line-height: 52px;}
.banner .computer.swiper-slide-active .pic-1{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .pic-2{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .icon-text-2{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .icon-text-3{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .icon-text-4{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .text-1{-webkit-animation-name: fadeInRight;animation-name: fadeInRight;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .text-2{-webkit-animation-name: fadeInRight;animation-name: fadeInRight;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .computer.swiper-slide-active .btn-1{-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .xcx.swiper-slide-active .pic-1{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .xcx.swiper-slide-active .pic-2{-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .xcx.swiper-slide-active .text-1{-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .xcx.swiper-slide-active .text-2{-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.banner .xcx.swiper-slide-active .btn-1{-webkit-animation-name: fadeInDown;animation-name: fadeInDown;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.title{background: url(../images/2016/bg2.jpg)no-repeat;background-size: 100%;box-sizing: border-box;}
.title strong{display: block;font-size: 28px;color: #fff;text-align: center;}
.title strong::after{content: '';display: block;width: 80px;height: 2px;background-color: #23A0FD;margin: 10px auto;}
.title span{font-size: 18px;color: #fff;display: block;text-align: center;}
.other{background: url(../images/2016/bg7.jpg)no-repeat;background-size: 100%;}
.other2{background: url(../images/2016/new_bgbg1.jpg)no-repeat;}
.anli{background-color: #F1F1F1;}
.anli ul{display: flex;justify-content: space-between;}
.anli ul li{width:16.67%;border: 1px solid #CCC;position: relative;box-sizing: border-box;}
.anli ul li .item-front{padding: 0 20px;box-sizing: border-box;transition: .5s;}
.anli ul li .item-front h6{margin-top: 30px;font-size: 14px;text-align: center;font-weight: 400;color: #A8A8A8;}
.anli ul li .item-front h5{font-size: 20px;margin: 20px 0;font-weight: 400;text-align: center;color: #000;}
.anli ul li .item-front img{display: block;margin: 0 auto;}
.anli ul li .item-front p{font-size: 14px;line-height: 24px;margin: 20px 0;text-align: center;color: #000;}
.anli ul li .item-behind{background:url(../images/2016/xc/behind_bg.jpg)no-repeat;background-size: 100% 100%;padding: 0 12px;color: #fff;position: absolute;top: 0;left: 0;height: 100%;width: 100%;padding: 0 20px;box-sizing: border-box;
    transform: rotateY(180deg);-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg);transition: .3s;opacity: 0;
}
.anli ul li .item-behind h6{font-size: 16px;border-bottom: 1px solid #B0D2EC;padding: 5px 0 0;text-align: center;line-height: 46px;font-weight: 400;}
.anli ul li .item-behind dl{padding: 5px 0 10px 0;}
.anli ul li .item-behind dl:nth-child(2){border-bottom: 1px dotted #fff;}
.anli ul li .item-behind dt{line-height: 30px;font-size: 14px;}
.anli ul li .item-behind dt i{display: inline-block;width: 7px;height: 11px;background-image: url(../images/2016/xc/behind_icon_bg.png);margin-right: 10px;}
.anli ul li .item-behind dd{line-height: 18px;font-size: 12px;}
.anli ul li .item-behind .btn-area{position: absolute;bottom: 25px;left: 50%;font-size: 0;transform: translateX(-50%);}
.anli ul li .item-behind .btn-area .btn-1{background-color: #FFF;color: #229FFD;width: 86px;border: 1px solid #FFF;border-radius: 3px;cursor: pointer;height: 34px;display: inline-block;text-align: center;line-height: 34px;text-decoration: none;margin-right: 5px;}
.anli ul li:hover .item-front{transform: rotateY(-180deg);-ms-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);}
.anli ul li:hover .item-behind{transform: rotateY(0deg);-ms-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);-o-transform:rotateY(0deg);opacity: 1;}
.hangye{background-color: #F1F1F1;position: relative;padding: 70px 0 110px 0;}

.hangye ul li .inner{height: 306px;border: 1px solid #EFEFEF;background-color: #FFF;}
.hangye ul li:hover .inner{background-color: #2ba3fd;}
.hangye ul li .img-icon{width: 70px;height: 70px;margin: 30px auto;overflow: hidden;}
.hangye ul li .img-icon img{-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;width: 100%;margin-top: -100%;}
.hangye ul li:hover .img-icon img{margin-top: 0;}
.hangye ul li:hover .img-txt a,.hangye ul li:hover .img-txt h3,.hangye ul li:hover .img-txt p{color: #fff;}
.hangye ul li .img-txt{text-align: center;}
.hangye ul li .img-txt h3{font-size: 16px;line-height: 30px;color: #333333;}
.hangye ul li .img-txt p{color: #888888;font-size: 14px;line-height: 24px;margin: 0 23px 10px 23px;height: 48px;overflow: hidden;}
.hangye ul li .img-txt a{font-size: 14px;color: #229FFD;line-height: 24px;}
.hangye ul li .img-btn{font-size: 0;text-align: left;height: 30px;margin-top: 20px;width: 78%;margin: 15px auto;}
.hangye ul li .img-btn a{display: block;text-align: center;font-size: 14px;float: left;}
.hangye ul li .img-btn a.reg-btn{border:1px #229FFD solid;height: 27px;width: 84px;line-height: 27px;border-radius: 3px;margin-left: 11px;color: #fff;background-color: #229ffd;}
.hangye ul li .img-btn a.demo-btn{border:1px #DBDBDB solid;height: 27px;width: 84px;line-height: 27px;border-radius: 3px;margin-left: 11px;color: #747474;background-color: #DBDBDB;}
.hangye ul li:hover .img-btn a.reg-btn{background-color: #fff;color: #2ba3fd;}
.hangye ul li:hover .img-btn a.demo-btn{background-color: transparent;color: #fff;}
.hangye .swiper-pagination{left: 50%;transform: translateX(-50%);margin-top: 30px;}
.hangye .swiper-pagination span{margin: 0 5px;width: 20px;height: 20px;background-color: transparent;border: 2px solid #2ba3fd;opacity: 1;}
.hangye .swiper-pagination span.swiper-pagination-bullet-active{background-color: #2ba3fd;}
.moban{background-color: #f8f8f8;}
.moban ul{display: flex;justify-content: space-between;width: 100%;flex-wrap: wrap;}
.moban ul li{width: 24.9%;overflow: hidden;margin-bottom: 40px;height: 230px;position: relative;z-index: 8;}
.moban ul li .li_width1{width: 70%;margin: 0 auto;height: 190px;}
.moban ul li .li_width1 span{display: block;width: 83%;height: 168px;padding: 11px 1px;overflow: hidden;background: url(../images/2016/com_bg5.png)no-repeat;position: absolute;z-index: 9;}
.moban ul li .li_width1 span em{display: block;width: 100%;overflow: hidden;height: 100%;}
.moban ul li .li_width1 .D_a1{width: 68%;height: 181px;overflow: hidden;position: absolute;background: #ccc;opacity: 0.1;top: 0px;left: 50%;margin-left: -117px;z-index: 10;display: block;}
.moban ul li .li_w_p{width: 28.5%;height: 167px;position: absolute;top: 36px;right: -2px;z-index: 11;}
.moban ul li .li_w_p strong{display: block;width: 100%;height: 121px;padding: 23px 12px;background: url(../images/2016/com_bg4.png);}
.moban ul li .li_w_p .D_a2{width: 100%;height: 111px;position: absolute;background: #ccc;opacity: 0.1;top: 23px;right: 12px;z-index: 12;display: block;}
.moban ul li .li_w_f{height: 30px;width: 100%;line-height: 30px;text-align: center;position: absolute;bottom: 0;}
.moban ul li .li_w_f a{font-size: 16px;color: #333;}
.guanli img{width: 100%;}
.fuwu ul{display: flex;justify-content: space-between;width: 100%;}
.fuwu ul li{width: 31%;border: 1px solid #ededed;border-radius: 5px;overflow: hidden;margin-bottom: 40px;height: 136px;}
.fuwu ul li:hover{box-shadow: 0px 5px 20px #ededed;}
.fuwu ul li:hover span em{color: #2ba3fd;}
.fuwu ul li p{display: block;width: 46px;height: 46px;float: left;margin: 15px 15px 0px 15px;}
.fuwu ul li span{display: block;overflow: hidden;margin-right: 15px;}
.fuwu ul li span em{display: block;font-size: 18px;color: #444;line-height: 24px;margin-top: 25px;font-style: normal;}
.fuwu ul li span strong{display: block;font-size: 14px;color: #888;line-height: 26px;margin-top: 14px;}
.more{display: block;width: 175px;height: 50px;text-align: center;line-height: 50px;font-size: 16px;color: #2ba3fd;border-radius: 3px;border: 1px solid #2ba3fd;margin: 10px auto 0 auto;}
.beian{background-color: #050505;color: #717171;line-height: 55px;height: 55px;text-align: center;}
.beian a{color: #717171;font-size: 14px;}
@media screen and (max-width:1345px){
    .p30{padding: 26px 0;}
    .w1345{width: 90%;}
    .banner .xcx .text-1{left: 650px;}
    .banner .xcx .text-2{left: 650px;}
    .banner .xcx .btn-1{left: 650px;}
    .banner .xcx .pic-1{left: 15px;}
    .banner .xcx .pic-2{left: 435px;}
    .banner .computer .text-1{left: 640px;}
    .banner .computer .text-2{left: 640px;}
    .banner .computer .btn-1{left: 640px;}
    .title strong{font-size: 1.8em;}
    .title span{font-size: 1.3em;}
    .anli ul li .item-front h5{font-size: 1.2em;}
    .anli ul li .item-front p{font-size: 1em;}
    .anli ul li .item-behind h6{font-size: 1em;}
    .anli ul li .item-behind dt{font-size: 0.9em;}
    .hangye ul li .img-btn{width: 100%;}
    .nav ul{width: 100%;}
}
@media screen and (max-width:1270px){
    .banner .xcx .text-1{left: 620px;}
    .banner .xcx .text-2{left: 620px;}
    .banner .xcx .btn-1{left: 620px;}
    .banner .xcx .pic-1{left: 0px;}
    .banner .xcx .pic-2{left: 420px;}
    .banner .computer .text-1{left: 580px;}
    .banner .computer .text-2{left: 580px;}
    .banner .computer .btn-1{left: 580px;}
    .banner .computer .pic-1{left: 10px;}
    .banner .computer .pic-2{left: 338px;}
    .banner .computer .icon-text-2{left: 450px;}
    .banner .computer .icon-text-3{left: 450px;}
    .banner .computer .icon-text-4{left: 450px;}
}
@media screen and (max-width:1270px){
    .p30 {padding: 20px 0;}
    .fuwu ul li span strong{font-size: 0.9em;line-height: 20px;}
    .moban ul li .li_w_p{width: 36.5%;}
    .moban ul li .li_width1{width: 88%;}
    .hangye ul li .inner{height: 330px;}
    .hangye ul li .img-btn a{float: none;margin: 5px auto !important;}
}
@media screen and (max-width:1080px){
    .banner .computer .pic-1{top: 150px;}
    .banner .computer .pic-2{top: 250px;}
    .banner .computer .icon-text-2{top: 280px;}
    .banner .computer .icon-text-3{top: 330px;}
    .banner .computer .icon-text-4{top: 380px;}
    .banner .computer .text-1{font-size: 2em;top: 200px;}
    .banner .computer .text-2{font-size: 1.2em;top:300px}
    .banner .computer .btn-1{top: 360px;}
    .banner .xcx .text-1{font-size: 2em;}
    .banner .xcx .text-2{font-size: 1.1em;}
    .banner .xcx .pic-1{top: 130px;}
    .banner .xcx .pic-1 img{width: 80%;}
    .banner .xcx .pic-2 img{width: 80%;}
    .banner .xcx .pic-2{left: 380px;top: 120px;}
    .banner .xcx .text-1{left: 500px;top: 180px;}
    .banner .xcx .text-2{left: 500px;top: 240px;}
    .banner .xcx .btn-1{left: 500px;top: 360px;}
    .title{background-size: auto 100%;}
    .banner{height: 500px;}
    .anli ul{flex-wrap: wrap;}
    .anli ul li{width: 49.5%;margin-bottom: 10px;}
    .anli ul li .item-inner::after{content: '';display: block;clear: both;visibility: hidden;width: 0;height: 0;}
    .anli ul li .item-front{float: left;width: 50%;}
    .anli ul li .item-behind{opacity: 1;transform: rotateY(0deg);-ms-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);-o-transform: rotateY(0deg);position: relative;float: left;width: 50%;background-size: cover;height: 290px;}
    .anli ul li:hover .item-front{transform: rotateY(0deg);-ms-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
    .anli ul li .item-behind .btn-area{position: relative;transform: translateX(0);left: 0;bottom: 0;}
    .anli ul li .item-behind .btn-area .btn-1{margin: 0 auto;display: block;}
    .nav ul a{font-size: 1em;}
    
}
@media screen and (max-width:1000px){
    #nav-content{width: 80%;}
    .nav .mianfei a{display: none;}
    .nav ul{width:100%;}
    .banner img{width: 80%;}
    .banner .computer .pic-2{left: 300px;top: 220px;}
    .banner .computer .icon-text{display: none;}
    .banner .computer .text-1{left: 450px;top: 150px;}
    .banner .computer .text-2{left: 450px;top: 230px;}
    .banner .computer .btn-1{left: 450px;top: 300px;}
    .banner{height: 400px;}
    .banner .xcx .pic-1 img{width: 60%;}
    .banner .xcx .pic-2 img{width: 60%;}
    .banner .xcx .pic-2{left: 260px;}
    .banner .xcx .text-1{left: 370px;top: 170px;}
    .banner .xcx .text-2{left: 370px;top: 230px;}
    .banner .xcx .btn-1{left: 370px;top: 290px;}
    .nav .logo{position: relative;}
    .nav .logo img{width: 80%;height: auto;position: absolute;top: 50%;left: 0;transform: translateY(-50%);margin-top: 0;}
    .moban ul li .li_width1 span{background-size: 100% 100%;}
    .moban ul li .li_width1{width: 100%;}
    .moban ul li{width: 23%;}
    .moban ul li .li_w_p{right: 14px;}
    .banner .xcx .text-2{font-size: 0.8em;}
    .fuwu ul li span em{font-size: 1em;margin-top: 10px;line-height: 16px;}
    .fuwu ul li span strong{font-size: 0.8em;margin-top: 5px;}
}
@media screen and (max-width:850px){
    .banner .computer .text-1{left: 400px;font-size: 1.5em;}
    .banner .computer .text-2{left: 400px;font-size: 1em;}
    .banner .computer .btn-1{left: 400px;}
    .banner .btn a b{font-size: 14px;}
    .title strong{font-size: 1.5em;}
    .title span{font-size: 1em;}
    .anli ul li .item-behind h6{font-size: 12px;}
    .anli ul li .item-behind dt{font-size: 12px;}
    .anli ul li .item-behind dl{padding: 3px 0;}
    .anli ul li .item-behind .btn-area .btn-1{font-size: 12px;width: 70px;height: 30px;line-height: 30px;}
}
@media screen and (max-width:820px){
    .anli ul li .item-behind{display: none;}
    .anli ul li .item-front{width: 100%;}
    .anli ul li{width: 32%;}
    .hangye ul li .img-btn{width: 192px;}
    .hangye ul li .img-btn a{float: left;margin: 0 5px !important;}
    .moban ul li{width: 49%;}
    .moban ul li .li_w_p strong{background-repeat: no-repeat;}
    .moban ul li .li_width1 .D_a1{margin-left: 0;left: 0;}
    .moban ul li .li_w_p .D_a2{width: 72%;left: 0;right: auto;}
    .fuwu ul{flex-wrap: wrap;}
    .fuwu ul li span em{font-size: 1.3em;margin-top: 20px;line-height: 24px;}
    .fuwu ul li span strong{margin-top: 10px;}
    .fuwu ul li{width: 49%;margin-bottom: 10px;}
    .moban ul li .li_width1 span em img{max-width: 100%;width:auto;}
    .moban ul li .li_w_p{right:0px;}

}
@media screen and (max-width:750px){
    .ovfHiden{overflow: hidden;}
    #btn-nav{display: block;}
    .btn-nav {
        display: block;
        position: fixed;
        top: 0px;
        right: 20px;
        background: transparent;
        border: none;
        padding: 10px 0 0 10px;
        box-sizing: border-box;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        cursor: pointer;
        z-index: 99999;
        color: #000;
        
        }
        
        .btn-nav:focus {
        outline: 0;
        }
        
        .icon-bar {
        display: block;
        margin: 6px 0;
        width: 25px;
        height: 3px;
        background-color: #fff;
        }
        
        .btn-nav:hover .icon-bar {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        background-color: #fff;
        }
        
        .nav-content {
        position: fixed;
        top: -100%;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.7);
        display: block;
        height: 100%;
        z-index: 13;
        }
        .nav-content ul{position: absolute;top: 50%;transform: translateY(-50%);}
        .nav-list {
        list-style: none;
        padding: 0;
        position: relative;
        top: 5%;
        }
        
        .item-anchor:after {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        left: 0;
        bottom: 0;
        z-index: 9;
        background: transparent;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        
        .item-anchor {
        color: #fff;
        font-size: 18px;
        text-transform: uppercase;
        position: relative;
        text-decoration: none;
        padding: 10px;
        }
        
        .item-anchor:hover,
        .item-anchor:focus {
        color: #000;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        
        .item-anchor:hover:after,
        .item-anchor:focus:after{
        width: 100%;
        background: #000;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        
        .nav-item {
        margin: 20px auto;
        text-align: center;
        }
        
        .animated {
        display: block;
        margin: 0 auto;
        position: fixed;
        }
        
        .animated:hover .icon-bar,
        .animated:focus .icon-bar
        {
        background-color: #fff;
        }
        .animated:focus p{color: #fff;}
        .animated:focus {
        cursor: pointer;
        z-index: 9999;
        }
        
        .middle {
        margin: 0 auto;
        }
        
        .icon-bar {
        -webkit-transition: all .7s ease;
        -moz-transition: all .7s ease;
        -ms-transition: all .7s ease;
        -o-transition: all .7s ease;
        transition: all .7s ease;
        z-index: 999999;
        }
        
        .animated .icon-bar {
        z-index: 999999;
        background-color: #fff;
        }
        
        .animated .top {
        -webkit-transform: translateY(7px) rotateZ(45deg);
        -moz-transform: translateY(7px) rotateZ(45deg);
        -ms-transform: translateY(7px) rotateZ(45deg);
        -o-transform: translateY(7px) rotateZ(45deg);
        transform: translateY(7px) rotateZ(45deg);
        }
        
        .animated .bottom1 {
        -webkit-transform: translateY(-11px) rotateZ(-45deg);
        -moz-transform: translateY(-11px) rotateZ(-45deg);
        -ms-transform: translateY(-11px) rotateZ(-45deg);
        -o-transform: translateY(-11px) rotateZ(-45deg);
        transform: translateY(-11px) rotateZ(-45deg);
        }
        
        .animated .middle {
        width: 0;
        }
        
        @keyframes showNav {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
        }
        
        @-webkit-keyframes showNav {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
        }
        
        @-moz-keyframes showNav {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
        }
        
        @-o-keyframes showNav {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
        }
        
        .showNav {
        -webkit-animation: showNav 1s ease forwards;
        -moz-animation: showNav 1s ease forwards;
        -o-animation: showNav 1s ease forwards;
        animation: showNav 1s ease forwards;
        }
        
        @keyframes hideNav {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
        }
        
        @-webkit-keyframes hideNav {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
        }
        
        @-moz-keyframes hideNav {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
        }
        
        @-o-keyframes hideNav {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
        }
        
        .hideNav {
        -webkit-animation: hideNav 1s ease forwards;
        -moz-animation: hideNav 1s ease forwards;
        -o-animation: hideNav 1s ease forwards;
        animation: hideNav 1s ease forwards;
        }
        .hidden1 {
        display: none;
        }
        #nav-content{width: 100%;}
        .nav .logo{height: 100%;}
        .nav .w1345{height: 60px;line-height: 60px;}
        .nav ul{display: block;}
        .nav ul li{width: 100%;line-height: 32px;text-align: center;margin: 10px 0;}
        .nav ul li img{right: 42% !important;top: -10px !important;}
        .nav ul li a{display: block;font-size: 16px;}
        .nav ul li.cur em{display: none;}
        .banner img{width: 56%;}
        .banner .computer .pic-2{left: 200px;}
        .banner .computer .text-1{left: 300px;font-size: 1.2em;}
        .banner .computer .text-2{left: 300px;top: 200px;}
        .banner .computer .btn-1{left: 300px;top: 260px;}
        .banner .computer .btn-1 a{width: 140px;line-height: 40px;background-size: 100%;background-repeat: no-repeat;height: 40px;border-radius: 10px;}
        .banner .xcx .btn-1 a{width: 140px;line-height: 40px;background-size: 100%;background-repeat: no-repeat;height: 40px;border-radius: 10px;}
        .banner .btn a b{line-height: 40px;}
        .banner .xcx .pic-1 img{width: 50%;}
        .banner .xcx .pic-2{left: 210px;}
        .banner .xcx .pic-2 img{width: 50%;}
        .banner .xcx .text-1{left: 300px;top: 130px;font-size: 1.6em;}
        .banner .xcx .text-2{left: 300px;top: 200px;}
        .banner .xcx .btn-1{left: 300px;top: 260px;}
        .beian{height: auto;line-height: 24px;padding: 20px 0;}
        .banner{height: 350px;}
        .guanli{overflow: hidden;position: relative;}
        .guanli img{transform: translateX(-25%);width: 200%;display: block;}
}
@media screen and (max-width:650px){
    .nav .logo{width: 28%;}
    .banner{height: 500px;}
    .banner .computer .text-1{left: 7%;top: 60%;}
    .banner .computer .text-2{left: 7%;top: 70%;}
    .banner .computer .btn-1{left:7%;top: 80%;}
    .banner .computer .pic-1{top: 100px;left: 7%;width: 300px;}
    .banner .computer .pic-1 img{width: 100%;}
    .banner .computer .pic-2 img{width: 100%;}
    .banner .computer .pic-2{top: 160px;left: 65%;width: 80px;}
    .banner .xcx .pic-1{left: 7%;top: 100px;width: 300px;}
    .banner .xcx .pic-1 img{width: 100%;}
    .banner .xcx .pic-2{left: 60%;top: 100px;width: 70px;}
    .banner .xcx .pic-2 img{width: 100%;}
    .banner .xcx .text-1{left: 7%;top: 60%;}
    .banner .xcx .text-2{left: 7%;top: 70%;}
    .banner .xcx .btn-1{left: 7%;top: 80%;}
    .hangye ul li .img-btn{width: 155px;}
    .hangye ul li .img-btn a.reg-btn{width: 65px;}
    .hangye ul li .img-btn a.demo-btn{width: 65px;}
}
@media screen and (max-width:550px){
    .nav .logo{width: 38%;}
}
@media screen and (max-width:450px){
    .anli ul li{width: 49%;}
    .moban ul li .li_w_p{right:0px;}
    .fuwu ul li{width: 100%;}
}