@charset "utf-8";
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img,figure,figcaption {border: medium none; margin: 0; padding: 0;}
h1, h2, h3, h4, h5{ font-size:26px;}
/** 设置默认字体 **/
html, body {-webkit-text-size-adjust: none;font-family: "Microsoft YaHei", Arial;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;font-smoothing: antialiased; font-size:14px; color:#444;}

/** 设置表单元素**/
button, input, select, textarea {font-family: "Microsoft YaHei", Arial;-moz-appearance: none;-webkit-appearance: none;appearance: none;vertical-align: middle; outline:none;}

/** 重置图片元素 **/
img {border: 0px; vertical-align: middle; -ms-interpolation-mode: bicubic;}

/** 重置表格元素 **/
table {border-collapse: collapse;border-spacing: 0;}

/** 清除浮动 **/
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}

/** 重置列表元素 **/
ul, ol {list-style: none;}

/** 重置超链接元素 **/
a,.i-service li a .more{ transition:0.4s cubic-bezier(.42,0,.58,1); -webkit-transition:0.4s cubic-bezier(.42,0,.58,1);}
a {text-decoration: none; color: #333;}
a:hover {text-decoration:none; color:#666; will-change: transform;}
a:hover,a:active{outline:none;}

/** 返回顶部 **/
.back_top{ width:40px; height:40px; position:fixed; right:5%; bottom:10%; display:none;  padding:2px; cursor:pointer;  overflow:hidden; background:#111; z-index:50;}
.back_top:hover { border-radius:25px; will-change: transform;}
.section{width:1200px; margin:0 auto; overflow:hidden;}
.main{ overflow:hidden;}

.sidenav{ width:200px; height:100%; position:fixed; right:0; top:0; margin-right:-200px; background:#111;}
.sidenav li{ line-height:54px; border-bottom:1px dotted #444;}
.sidenav li a{ color:#fff; display:block; text-align:center;}

/*Header*/
.Header.fixed{ position:fixed; left:0; top:0; width:100%; z-index:5; transition:0.4s cubic-bezier(.42,0,.58,1); -webkit-transition:0.4s cubic-bezier(.42,0,.58,1);}
.Header{ height:70px; line-height:70px; background:#fff; border-bottom:0px solid #ccc; z-index:5; }
.Header .logo{ float:left;line-height:60px;}
.Header .nav{ float:right; font-weight:bold;}
.Header .nav:hover a{will-change: transform;}
.Header .nav li{ float:left; height:70px; width:100px; text-align:center; margin-left:1px; position:relative; overflow:hidden;}
.Header .nav li a{ display:block; position:relative; z-index:1;}
.Header .nav li u{transition:0.4s cubic-bezier(.42,0,.58,1);}
.Header .nav li u{ position:absolute; z-index:0; width:180%; height:100%; background:#006aff; left:-220px; bottom:0; transform:skewX(45deg);}
.Header .nav li:hover a,.Header .nav li.act a{ color:#fff;}
.Header .nav li:hover u,.Header .nav li.act u{transform:skewX(45deg); left:-40px; will-change: transform;}

/*banner*/
/*.banner{ position:relative; width:100%; height:800px; overflow:hidden; background:url(../images/i_banner.jpg) no-repeat center right; background-attachment:fixed;}*/
.banner{ position:relative; width:100%; height:800px; overflow:hidden; background:url(../images/i_banner.jpg) no-repeat center right; background-size:cover; background-attachment:fixed;}
.banner .slogan{ width:960px;position:absolute; top:58%; left:50%; margin:-180px 0 0 -480px; text-align:center; font-size:30px; font-weight:bold; text-transform:uppercase; text-shadow:0 2px 0 #fff;background-color: rgba(255, 255, 255,0.6);}
.banner .slogan p{ line-height:50px; opacity:0; transition:all ease-in 1s; -webkit-transition:all ease-in 1s; position:relative;}
.banner.animate .slogan p{animation:show 1.5s 1s forwards; -webkit-animation:show 1.5s 1s forwards;}

@-webkit-keyframes show {
	from {transform:translateY(100px); opacity:0;}
	to {transform:translateY(0px);opacity:1;}
}
@keyframes show {
	from {transform:translateY(100px); opacity:0;}
	to {transform:translateY(0px);opacity:1;}
}

.banner .slogan h1{  display:block; padding:50px 0; font-size:36px; color:#000;transition:all ease-in 1s; -webkit-transition:all ease-in 1s; position:relative; letter-spacing:6px; line-height:60px;}
.banner .slogan h1 .boder{ background:#fff; overflow:hidden; position:absolute; transition:all ease-in 1s; -webkit-transition:all ease-in 1s;}
.banner .slogan h1 .st{ width:0; height:15px; overflow:hidden; top:0; left:0;}
.banner .slogan h1 .sr{ width:15px; height:0; overflow:hidden; top:0; right:0;}
.banner .slogan h1 .sb{ width:0; height:15px; overflow:hidden; bottom:0; left:0;}
.banner .slogan h1 .sl{ width:15px; height:0; overflow:hidden; top:0; left:0;}
.banner.animate .slogan h1 .st{ width:100%;}
.banner.animate .slogan h1 .sr{ height:100%;}
.banner.animate .slogan h1 .sb{ width:100%;}
.banner.animate .slogan h1 .sl{ height:100%;}
.banner .slogan .red{ color:#dd0f05; margin-bottom:20px; font-size:42px;}
.banner span{ display:inline-block; transition:all ease-in 1s; -webkit-transition:all ease-in 1s; opacity:0; filter:alpha(opacity=100);}
.banner.animate .black span:nth-child(1){animation:move 1s 0.15s forwards; -webkit-animation:move 1s 0.15s forwards;}
.banner.animate .black span:nth-child(2){animation:move 1s 0.3s forwards;  -webkit-animation:move 1s 0.3s forwards;}
.banner.animate .black span:nth-child(3){animation:move 1s 0.45s forwards; -webkit-animation:move 1s 0.45s forwards;}
.banner.animate .black span:nth-child(4){animation:move 1s 0.6s forwards;  -webkit-animation:move 1s 0.6s forwards;}
.banner.animate .red span:nth-child(1){animation:move 1s 0.5s forwards; -webkit-animation:move 1s 0.5s forwards;}
.banner.animate .red span:nth-child(2){animation:move 1s 0.7s forwards; -webkit-animation:move 1s 0.7s forwards;}
.banner.animate .red span:nth-child(3){animation:move 1s 0.9s forwards; -webkit-animation:move 1s 0.9s forwards;}
.banner.animate .red span:nth-child(4){animation:move 1s 1.1s forwards; -webkit-animation:move 1s 1.1s forwards;}
.banner.animate .red span:nth-child(5){animation:move 1s 1.3s forwards; -webkit-animation:move 1s 1.3s forwards;}
.banner.animate .red span:nth-child(6){animation:move 1s 1.5s forwards; -webkit-animation:move 1s 1.5s forwards;}
.banner.animate .red span:nth-child(7){animation:move 1s 1.7s forwards; -webkit-animation:move 1s 1.7s forwards;}
@-webkit-keyframes move {
	from {transform:translateY(-280px); opacity:0;}
	to {transform:translateY(0px);opacity:1;}
}
@keyframes move {
	from {transform:translateY(-280px); opacity:0;}
	to {transform:translateY(0px);opacity:1;}
}

/*.i-tit*/
.i-tit{ font-size:20px; color:#222; padding-bottom:20px; display:block}
.i-tit .ent{ font-family:Arial, Helvetica, sans-serif; color:#006aff;}

/*i-service*/
.i-service .section{ padding:40px 0 40px 0; overflow:hidden;}
.i-service .box{  overflow:hidden; border:1px solid #ccc; border-right:none;}
.i-service li{ float:left;width:25%; text-align:center; position:relative; overflow:hidden;}
.i-service li a{ padding:50px 0 30px 0; display:block; border-right:1px solid #ccc; position:relative; z-index:1;}
.i-service li a .icon{ width:100px; height:100px; overflow:hidden; display:block; margin:0 auto;}
.i-service li a .c-name{ padding:26px 0; font-size:16px; color:#222;}
.i-service li a .e-name{ color:#999; text-transform:uppercase; padding-bottom:30px;}
.i-service li a .more{ width:44px; height:38px; display:block; margin:0 auto; border:1px solid #fff;}
.i-service li .bgk{transition:0.45s cubic-bezier(.42,0,.58,1); -webkit-transition:0.45s cubic-bezier(.42,0,.58,1);}
.i-service li .bgk{ position:absolute; left:0; bottom:0; display:block; width:100%; height:0; background:#444;}
.i-service li:hover .bgk{height:100%; will-change: transform;}
.i-service li:hover .c-name,.i-service li:hover .e-name{color:#fff;}
.i-service li:hover .more{ background:#006aff; border:1px solid #444; -webkit-animation:columns 0.45s 0.2s; animation:columns 0.45s 0.2s; will-change: transform;}
@-webkit-keyframes columns {
	from {box-shadow:0 0 0 0 #222;}
	to {box-shadow:0 0 0 15px transparent;}
}
@keyframes columns {
	from {box-shadow:0 0 0 0 #222;}
	to {box-shadow:0 0 0 15px transparent;}
}

/*i-case*/
.i-case{ background:#2f2f2f; overflow:hidden; margin-bottom:40px;}
.i-case .section{ padding:50px 0;}
.i-case .i-tit{ color:#fff;}
.i-case .box{ width:1250px; overflow:hidden;}
.i-case figure{ float:left; width:280px; margin:0 27px 28px 0; overflow:hidden}
.i-case figure a{ display:block;}
.i-case figure a .img{ overflow:hidden;}
.i-case figure a .img img{transition:0.3s cubic-bezier(.2,0.4,.58,1) .1s; -webkit-transition:0.3s cubic-bezier(.2,0.4,.58,1) .1s;}
.i-case figure a span,.i-case figure a:hover span img{transition:0.3s cubic-bezier(.2,0.4,.58,1); -webkit-transition:0.3s cubic-bezier(.2,0.4,.58,1);}
.i-case figure a:hover span,.i-case figure a:hover img{will-change: transform;}
.i-case figure a .txt{ height:48px; background:#1d1d1d; padding:8px 16px; color:#fff; line-height:24px; position:relative;}
.i-case figure a .txt .tag{ font-size:12px; color:#999; height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.i-case figure a .txt figcaption{ height:20px; overflow:hidden; display:inline-block; text-overflow:ellipsis; white-space:nowrap;}
.i-case figure a span{ width:64px; height:64px; background:#006aff; display:block; position:absolute; right:0; top:0; opacity:0; filter:alpha(opacity=0); }
.i-case figure a:hover span{ opacity:1; filter:alpha(opacity=100); }
.i-case figure a:hover span img{ transform:rotate(90deg); -webkit-transform:rotate(90deg);}
.i-case figure a:hover .img img{ transform:scale(1.1); -webkit-transform:scale(1.1);}

.p_btn{ width:30%; margin:0 auto; display:block; text-align:center; position:relative; background:#161616; height:42px; line-height:42px;  font-size:18px; overflow:hidden; border-radius:2px;}
.p_btn a.tomore{ display:block; border-radius:5px; position:relative; z-index:1; color:#999;}
.p_btn i{ display:block; position:absolute; width:0; height:100%; bottom:0; left:0; transition:0.3s cubic-bezier(.2,0.4,.58,1); -webkit-transition:0.3s cubic-bezier(.2,0.4,.58,1);}
.p_btn a.tomore:hover{ color:#fff;}
.p_btn:hover i{ width:100%; background:#006aff; will-change: transform; border-radius:5px;}


/*i-us*/
.i-us .section{ padding:40px 0;}
.i-us .box{ border:1px solid #ccc; overflow:hidden; padding:40px;}
.i-us .box img{transition:0.3s cubic-bezier(.2,0.4,.58,1); -webkit-transition:0.3s cubic-bezier(.2,0.4,.58,1);}
.i-us .box:hover img{ box-shadow:0 0 20px #999; will-change: transform;}
.i-us .box .left{ float:left; width:300px;}
.i-us .box .right{ float:right; width:804px;  line-height:24px;}
.i-us .box .right .i-tit{ padding-bottom:16px; font-weight:normal;}
.i-us .box .right .i-tit .ent{ color:#999; text-transform:uppercase;}
.i-us .box .right p{ padding-bottom:5px;}
.i-us .box .right .tomore{ width:50px; padding:2px 0; float:right; font-size:12px; color:#aaa; text-align:center;  background:#eee; border-radius:2px;}
.i-us .box .right .tomore:hover{ background:#006aff; color:#fff; width:120px;}

/*i-news*/
.i-news .section{ padding-bottom:20px;}
.i-news .i-tit a{ width:44px; height:38px; display:block; float:right;}
.i-news .i-tit a:hover{ background:#006aff;}
.i-news ul{ width:1220px;}
.i-news li{ float:left; width:285px;margin-right:20px;color:#999; font-size:12px; line-height:24px; margin-bottom:15px;}
.i-news li a{display:block; color:#999; padding:10px; border:1px solid #ccc;}
.i-news li a:hover{ border:1px solid #006aff; color:#333;}
.i-news li a .detail{ border-top:1px solid #ccc; margin-top:20px; line-height:30px;}
.i-news li a span{ transition:ease-in 0.3s; -webkit-transition:ease-in 0.3s;}
.i-news li a:hover span{ display:inline-block; padding-left:42%; font-weight:bold; will-change: transform;}
.i-news li a h4{ font-size:14px; overflow:hidden; height:30px; line-height:30px; color:#222; transition:ease-in 0.3s; -webkit-transition:ease-in 0.3s;}
.i-news li a:hover h4{ color:#006aff;}
.i-news li a .img{ overflow:hidden; margin-bottom:10px;}
.i-news li a img{transition:ease-in 0.3s; -webkit-transition:ease-in 0.3s;}
.i-news li a:hover img{ transform:scale(1.05); -webkit-transform:scale(1.05); will-change: transform;}

/*footer*/
.footer{ background:#222; line-height:30px; color:#999;}
.footer p{ padding:5px 0;}
.footer a{
	color:#eee;
	display:inline-block;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.footer a:hover{ color:#006aff; font-weight:bold;}
.footer .section{ padding:30px 0;}
.footer .links{padding:8px 0; border-top:1px solid #404040; border-bottom:1px solid #404040;}
.footer small{ font-style:normal; padding:10px 0; display:block;}

/*casebaner*/
.casebaner{ background:url(../images/case_baner.jpg) center center; height:160px; margin-top:71px; line-height:160px; font-size:24px; color:#000;}
.mt71{ margin-top:71px;}
.subnav{ line-height:58px; overflow:hidden; font-weight:bold; border-bottom:1px solid #ccc;}
.subnav nav{ overflow:hidden; font-size:16px;}
.subnav li{ float:left; width:20%; text-align:center;}
.subnav li a{ display:block; border-right:1px solid #ccc;}
.subnav li a:hover,.subnav li a.act{ color:#fff; background:#006aff;}
.shownav{ width:100%; display:block; border:1px solid #ccc; height:48px; padding:0 5%; display:none;}
#i-case figure a .txt{ background:#fff; color:#333;}
#i-case .p_btn{ background:#ccc;}
#i-case figure a:hover{box-shadow:0 0 18px #999;}

/*casedetails*/
.bjf0{background:#f0f0f0;}
.casedetails{ padding:25px 0;}
.casedetails .section{ background:#fff; border-radius:5px;}
.casedetails .tips ul{ border-bottom:1px solid #f1f1f1; overflow:hidden; padding-top:15px;}
.casedetails .tips li{ float:left; width:49%;}
.casedetails .tips li:first-child{ border-right:1px dashed #999;}
.casedetails .tips li .text{ padding:30px; line-height:24px; color:#999;}
.casedetails .tips li .text h1{ color:#222; font-size:16px; padding-bottom:15px;}

.caselink{text-align:right; padding:10px;}
.caselink a{ display:inline-block; padding:4px; background:#ccc; margin:0 5px; border-radius:50%; background:#da251c;}
.caselink a:hover{ transform:rotate(360deg); -webkit-transform:rotate(360deg);}
.caselink a.back{ background:#666;}
#casedetails{ padding:20px;}
#casedetails img{ width:100%; max-width:1150px; height:auto;}


/*n-news*/
#n-news{ padding-top:30px;}
#n-news li{margin-bottom:26px; background:#fff;}
#n-news .p_btn{ background:#ccc; margin-top:30px;}
#n-news figure a:hover{box-shadow:0 0 18px #999;}

.newsbaner{ background:url(../images/newbaner.jpg) center center; height:160px; margin-top:71px; line-height:160px; font-size:24px; color:#000;}
.newtails { padding:25px 0; }
.newtails .section{ background:#fff; border-radius:5px;}
.newtails h1.name{ padding:40px 0 10px 0; text-align:center; font-size:26px; color:#222;}
.newtails .fu{border-bottom:1px solid #eee; padding:10px 40px; color:#ccc; line-height:30px;}
.newtails .fu span{ float:right; }
.newtails .fu span a{ display:inline-block; padding:0 10px; color:#ccc;}
.newtails .publictxt{ color:#666; padding:30px 40px; line-height:24px;}
.newtails .publictxt p{ padding:10px 0;}
.newtails .publictxt img{ max-width:100%; height:auto;}
.newtails .publictxt .pagepre,.newtails .publictxt .pagenext{ overflow:hidden; height:24px; padding-bottom:0;}

/*n-us*/
.n-us .bj{ background:#f0f0f0 url(../images/bj_us.jpg) no-repeat center top; padding:80px 0;}
.n-us .left{ float:left; width:31.66666666%;}
.n-us .left img{ width:100%; height:auto;}
.n-us .right{ float:right; width:64%; line-height:26px; padding-top:20px;}
.n-us .right p{ padding:5px 0;}
.n-us .right strong{ font-size:16px; display:block; padding:10px 0;}

#border{ border-bottom:1px solid #ccc; border-top:1px solid #ccc;}
#border .section{ padding:0;}
#border .box{ border-bottom:none; border-top:none;}

/*maseege*/
#maseege{ padding:50px 0;}
#maseege h1{ display:block; font-size:30px; color:#222; padding-bottom:20px;}
#maseege .forms{ float:left; width:68%}
#maseege .forms ul{ padding-bottom:15px; overflow:hidden;}
#maseege .forms input{ border:1px solid #ccc; height:34px; width:84%; padding:0 5%; background:none;}
#maseege .forms input.bj{border:1px solid #fe4a41;}
#maseege .forms input.requit:focus,#maseege .forms textarea:focus{  box-shadow:0 0 5px #999 inset;}

#maseege .forms textarea{ width:94%; border:1px solid #ccc; padding:10px 2%; height:60px; color:#333;} 
#maseege .forms li{ width:33.33333%; float:left; position:relative;}
#maseege .forms li label{ display:block; position:absolute; width:90%; height:34px; z-index:-1; top:0; left:0; line-height:34px; padding:0 5%;}

#maseege .forms .btn{ padding-top:15px;}
#maseege .forms .sumit{ padding:0; width:98.4%; border:none; height:42px; cursor:pointer; background:#666; color:#fff; font-size:16px; transition:.2s; -webkit-transition:.2s;}
#maseege .forms .sumit:hover{ background:#006aff;}
#maseege .adds{ float:right; width:28%}
#maseege .adds p{ padding:5px 0; line-height:22px;}
#maseege .adds address{ font-style:normal;}


/*loading*/
.loading{ position:fixed; width:100%; height:100%; z-index:50; background:#fff;}
.loading span{ width:220px; display:block; height:140px; position:absolute; left:50%; top:50%; margin:-70px 0 0 -110px;}
.loading span img{ width:100%; height:auto;}


/*helps*/
.helps{ width:48px; height:250px; position:fixed; right:10px; bottom:40%; z-index:20;}
.helps a{ display:block; height:48px; width:48px; margin-bottom:2px; background:#006bff; border-radius:50%;}
.helps a img{ max-width:100%; width:48px;}
.helps a:last-child{ background:#333;}
.helps a:hover{ background:#004198; border-radius:50%;}
.helps .icon{ display:none;}


.four{ text-align:center; max-width:640px; margin:10% auto; line-height:34px; background:#f0f0f0; border:1px solid #ddd; padding:50px 0; border-radius:5px;}
.four h1{ font-size:140px; padding:100px 0; color:#006aff; overflow:hidden}
.four a{ display:inline-block; background:#333; color:#fff; padding:5px 30px; border-radius:5px;}

/*page*/
.page { width: 100%; text-align: center; padding: 10px 0;}
.page a {display: inline-block; padding: 5px 12px; color:#888; border: 1px solid #d6d6d6; margin: 0 3px; background:#fff;}
.page SPAN.current {
display: inline-block; padding: 5px 12px;border: 1px solid #d6d6d6; margin: 0 3px; background:#FF3C3C;color: #fff;
}
.page SPAN.disabled {
display: inline-block; padding: 5px 12px; color:#888; border: 1px solid #d6d6d6; margin: 0 3px; background:#fff;
}
.mpage{ display:none;}
.zoompage{ display:none; background:rgba(255,255,255,0.95); position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; }
.zoompage ul{ height:100%; position:absolute; overflow:auto; width:100%;}
.zoompage a{ display:block; height:46px; line-height:46px; text-align:center; border-bottom:1px solid #ccc;}


.i-package{ background:#181818; color: #fff;}
.i-package ul{ overflow: hidden; }
.i-package li{ float: left; width: 25%; box-sizing: border-box;  text-align: center; padding: 50px 0; line-height: 34px; transition: all 0.8s;}

.i-package li figcaption{ font-size: 22px; font-weight: bold; text-shadow: 0 1px 1px #222; padding-bottom: 10px;}
.i-package li b{ font-size: 18px; padding: 15px 0; display: block; transition: all 0.8s;}
.i-package li a{ display: inline-block; width: 60px; height: 60px; line-height: 60px;} 

.i-package li:hover b,.i-package li.act b{color: #fff;}
.i-package li:hover,.i-package li.act{
	background-color: #006aff;
}
.i-package li:hover a,.i-package li.act a{ background:#181818; -webkit-animation:columns 0.45s 0.2s; animation:columns 0.45s 0.2s; will-change: transform;}


.nserver .list{ text-align: center; margin: 40px auto; line-height: 28px; border: dashed 4px #ccc;}
.nserver .list .biao{ overflow: hidden; border: 1px solid #ddd;}
.nserver .list h2{ padding: 15px 0; background: #f9f9f9; color: #000;}
.nserver .list dl{ width: 25%; float: left;}
.nserver .list dt{ font-weight: bold; padding: 10px 0; border-bottom: 1px solid #ddd; font-size: 16px;}
.nserver .list dd{ padding: 15px 0;}
.nserver .list .tips{ padding: 15px; text-align: left; color: #999; border: 1px solid #ddd; border-top: none; font-size: 12px;}

@media screen and (max-width:1200px) and (min-width:1152px){
	body{ min-width:1200px;}
}

@media screen and (max-width:1151px){
	body{ max-width:none;}
	.section,.i-case .box,.i-news ul{ width:100%; box-sizing:border-box;}
	.i-service .section,.i-case .section,.i-us .section{ padding:50px 10px;}
	.i-tit{ padding-left:10px; padding-right:10px;}
	.footer .section{ padding:30px 10px;}
	.i-case figure{ width:25%; padding:0 8px 20px 8px; box-sizing:border-box; margin:0;}
	.i-case figure a .img img,.i-news li a img{ width:100%; height:auto;}
	.i-us .box{ padding:35px;}
	.i-us .box .left{ width:26%;}
	.i-us .box .left img{ width:100%; max-width:283px;}
	.i-us .box .right{ width:70%;}
	.i-news li{ width:31.1333%; margin:0 1.1%;}
}

@media screen and (max-width:1024px){
	.banner .slogan h1{ font-size:40px;}
	.n-us .bj{ padding:25px 10px;}
	.i-package li{ width: 50%; padding:25px 15px; line-height: 26px;}
	.i-package li b{ padding: 5px 0}
	
}

@media screen and (max-width:768px){
	.hide768{ display:none;}
	.newtails .publictxt{ color:#666; padding:20px 10px;line-height:24px;}
	.Header i.btn{ display:block; width:40px; height:40px; float:right; position:relative; top:14px; cursor:pointer;}
	.btn_menu{ width:34px; height:4px; background:#444; display:block; position:relative; top:20px; }
	.btn_menu:before{ content:""; display:block; width:100%; height:4px; background:#444; position:absolute; top:-10px; -webkit-transition: 0.4s; transition: 0.4s;}
	.btn_menu:after{ content:""; display:block; width:100%; height:4px; background:#444; position:absolute; bottom:-10px; -webkit-transition: 0.4s; transition: 0.4s;}
	
	.open .btn_menu{ background:transparent;}
	.open .btn_menu:before{ transform:rotate(45deg) translateY(14px);-webkit-transform:rotate(45deg) translateY(14px); transform-origin:50%;}
	.open .btn_menu:after{ transform:rotate(-45deg) translateY(-14px);-webkit-transform:rotate(-45deg) translateY(-14px);  transform-origin:50%;}
	
	.Header .nav{ position:fixed; top:71px; left:0; width:100%; height:100%; overflow:auto; float:none; background:rgba(0,0,0,.9); z-index:5; display:none;}
	.Header .nav li{ width:100%; height:50px; line-height:50px; border-bottom:1px dotted #555;}
	.Header .nav li u{ display:none;}
	.Header .nav li a{ font-size:16px; color:#fff;}
	.Header .nav li.act a{ background:#d23a32;}
	
	.Header .section{ padding:0 10px;}
	.banner .slogan{ width:94%; margin-left:-47%;}
	.banner .slogan h1{ font-size:22px;}
	.banner .slogan .red{font-size:28px;}
	.banner.animate .slogan p{ font-size:22px;}
	.i-service .section, .i-case .section{ padding:40px 10px;}
	.i-tit{ padding-bottom:40px;}
	
	.i-package li figcaption+p{ height: 26px; overflow: hidden;}
	.i-case figure{width:33.333333%; padding:0 7px 20px 7px; box-sizing:border-box;}
	.i-case figure a:hover span{ display:none;}
	
	.p_btn{ margin-top:10px; width:100%;}
	
	.i-service li a{ padding:25px 0;}
	.i-service li a .c-name{ font-size:14px;}
	
	.i-us .box{ padding:25px;}
	.i-news li a h4+p{max-height:44px;  display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow : hidden;}
	.shownav{ display:block;}
	.casedetails,.newtails { padding:10px;}
	
	#maseege{ padding:50px 10px;}
	#maseege .forms,#maseege .adds{ width:100%; padding:5px 0;}
	
	.helps{ position:fixed; bottom:0; right:0; width:100%; height:50px; background:#111;}
	.helps a{ float:left; width:20%; text-align:center; border-left:1px solid #444; border-radius:0; box-sizing:border-box;}
	.helps a:hover{border-radius:0;}
	.helps .icon{ display:block;}
	
	.page{ display:none;}
	.mpage {display: block;width: 100%; text-align: center; padding: 10px 0;}
	.mpage a {display: inline-block; padding: 5px 12px; color:#888; border: 1px solid #d6d6d6; margin: 0 3px; background:#fff;}
.mpage SPAN.current {
display: inline-block; padding: 5px 12px;border: 1px solid #d6d6d6; margin: 0 3px; background:#FF3C3C;color: #fff;
}
.mpage SPAN.disabled {
display: inline-block; padding: 5px 12px; color:#888; border: 1px solid #d6d6d6; margin: 0 3px; background:#fff;
}
.mpage a.num{ border-left:1px solid #ddd;  border-right:1px solid #ddd; background:url(../images/icon_m_page.png) no-repeat  80% center; box-sizing:border-box;}

}
@media screen and (max-width:640px){
	.hide640{ display:none;}
	.i-service .box{ border:none;}
	.i-service li{ width:50%;}
	.i-service li a{ border:1px solid #ccc; box-sizing:border-box; margin:8px 5px;}
	.i-case figure{ width:50%; padding:10px 0;}
	.i-case figure a .txt figcaption{ display:block; margin-right:10px;}
	
	.i-case figure:nth-child(2n){ padding-left:5px;}
	.i-case figure:nth-child(2n-1){ padding-right:5px;}
	
	
	
	.i-us .box{ padding:15px;}
	.i-us .box .left,.i-us .box .right{ width:100%; float:none;}
	.i-us .box .left { text-align:center;}
	.i-us .box .left img{ max-width:186px;}
	.i-us .hide768{ display:block;}
	.i-news li{ width:47%; margin:10px 1%;}
	.i-news .section,.i-tit{ padding-bottom:30px;}
	.footer .section{ padding:10px;}
	.footer small{ padding:0; line-height:24px;}
	.i-news li a{ padding:15px;}
	.footer small{ display:block; text-align:center; color:#999;}
	
	.casedetails .tips li{ width:100%; float:none;}
	.casedetails .tips li .text{ padding:15px;}
	.casedetails .tips li{ border:none; border-bottom:1px dotted #eee;}
	#n-news li{ margin-top:10px;}
	.newtails h1.name{ font-size:18px;}
	.newtails .fu{ text-align:center; font-size:14px;}
	#maseege{ padding:20px 10px;}
	#border { border:none; padding:10px;}
	.n-us .left,.n-us .right,#maseege .forms,#maseege .adds,#maseege .forms li{ width:100%; float:none; box-sizing:border-box;}
	#maseege .forms textarea,#maseege .forms input{ width:100%;  box-sizing:border-box;}
	#maseege .forms textarea{ padding:10px 5%;}
	#maseege .forms ul{ padding:0;}
	#maseege .forms li{ margin:10px 0;}
	#maseege .forms{ padding-bottom:15px;}
	#maseege h1{ font-size:24px;}
	.n-us .left{ text-align:center;}
	.n-us .left img{ max-width:50%;}
	
	#maseege .forms .sumit{ width:100%;}
	.footer{ margin-bottom:50px;}
	
	.four{ padding:30px 0; margin:10% 10px;}
	.four h1{ font-size:60px; padding:30px 0;}
	
}

@media screen and (max-width:480px){
	.banner .slogan h1{ font-size:18px;letter-spacing:1px; line-height:36px;}
	.banner .slogan .red{ color:#dd0f05; margin-bottom:10px; letter-spacing:5px;font-size:24px;}
	.banner.animate .slogan p{ font-size:20px;}
	.i-service .section, .i-case .section{ padding:20px 10px;}
	.i-tit{ padding-bottom:20px;}
	.i-service li a{ margin:5px;}
	.i-service li a .c-name{ padding:14px 0; height:34px; overflow:hidden;}
	.i-service li a .e-name{ padding-bottom:14px;}
	.i-case figure{ padding:5px 0;}
	.i-case figure:nth-child(2n){ padding-left:5px;}
	.i-case figure:nth-child(2n-1){ padding-right:5px;}
	.i-us .box .left{ padding-bottom:10px;}
	.i-news li a{ padding:10px;}
	.casebaner{ font-size:20px;}
	.n-us .left img{max-width: 70%;}
}
@media screen and (max-width:320px){
	.i-tit{ padding: 0 0 20px 0;}
	.i-service li a{ margin:5px 0;}
	.i-service li,.i-case figure,.i-news li{ width:100%;}
	.i-news .section{ padding:0 10px;}
	.i-news li{ margin:10px 0; float:none;}
	.i-service li a .c-name{ height:auto;}
	.i-case figure{ padding:0px; margin-bottom:20px;}
	.i-case figure:nth-child(2n),.i-case figure:nth-child(2n-1){ padding:0;}
	#n-news .p_btn{ margin:10px 0;}
	.newsbaner h1{ font-size:24px;}
}