@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1024px) {
	header {height: 70px;}
	header .menu {display:none; position:fixed; left:0; top: 70px; width:100%; margin:0; padding:0;background: #fff;}
	.menu-nav {float: none; width: 100%;}
	.menu-nav li{width:100%;float: none; padding: 0; border-top: 1px solid #ccc;}
	.menu-nav li>a {display: block; padding: 0 20px 0 10px; line-height: 42px; text-align: left;}
	.menu-nav li::after,  .menu-nav li>a::after {display: none;}
	.menu-nav li>a.channel::after {display:block; content: ""; position: absolute; top: 17px; left: auto; right: 20px; width: 10px; height: 10px; border-right: 1px solid #bebebe; border-top: 1px solid #bebebe; border-left: 0; border-bottom: 0; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); background:none;}
	.menu-nav li.active>a.channel::after {transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg);}
	.menu-nav .on>a,  .menu-nav li>a:hover {color: #333;}
    .menu-nav dl {position: static; width: 100%; min-width: 100%; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; padding:0;}
    .menu-nav dl::before {display: none;}
    .menu-nav dd a {text-align: left; line-height: 35px; color: #333; padding-left: 30px; background-color: #fff; border-top:1px dashed #f2f2f2;}	
	.hdright {line-height: 70px;}
	.hdright .menuBtn {padding: 20px;}
	/*index honor*/
	.idxHonor{margin-top:0!important; background:#f1f1f1; padding:0;}
	.idxHonor .idxHonorlist{padding: 0;padding-bottom: 50px;}
	.idxHonor .Honorborder1 {margin: 0; padding: 0; }
	.idxHonor .Honorborder2 {padding: 0;}
	.idxHonor .Honorbody {margin: 0;}
	
	/*index news*/
	.idxNews .idxnewsLeft .imgarea{height: auto};
}

@media screen and (max-width: 768px) {
	.idxNews {padding: 30px 0;}
	.idxNews .idxnewsLeft{width: 100%; margin-right:0; float:none;}
	.idxNews .idxnewsRight{float:none; width:100%}
	
	.CaseWindow{ padding: 30px 0;}
	.idxCase{ padding: 30px 0;}
}

@media screen and (max-width: 640px) {
	header {height: 60px;}
	header .logo {padding: 18px 0;}
	header .logo img {height: 24px;}
	header .menu {top:60px}
	.hdright {line-height: 60px;}
	.hdright>a, .hdright>div{padding: 0 4px; font-size:14px;}
	.hdright .menuBtn {padding: 15px 10px;}
	.hdright .menuBtn.open b {left: 10px; top: 29px;}
	
	.idxAboutus .comcontent {padding: 10px 0;}
	.idxAboutus .comcontent .index-more{text-align: center;}
	.idxAboutus h2{font-size:24px; line-height:30px;}
	.idxAboutus h2 font{ top:0; bottom: auto; font-size: 24px;}
	.idxAboutus h2 i {font-size: 18px;}
	
	.CaseShowList dl{width:100%; margin-right:0;}
	
	.idxCase .idxCaselist li{width:100%; margin-right:0;}
}

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

@media screen and (max-width: 375px) {
	.logo img {height: 19px;}
}


@media screen and (min-width: 560px) {
	.ftcontent .qrcode {display:block;}
}


@media screen and (min-width: 640px) {
	.hdright .hdcompany {position:absolute; top:100%;}
	.inside-banner img{height:160px;}
	
	.inside-inner {padding-top: 30px; padding-bottom: 20px;}	
}
 
@media screen and (min-width: 768px) {	
	.inside-inner {padding-top: 40px; padding-bottom: 20px;}
	/*foot*/
	.ftnav {display:block;}
	.ftcontent{margin-top:35px;}		
}
 @media screen and (min-width: 812px) {
	 .ftnav li a{padding:25px 10px;}
 }

 @media screen and (min-width: 992px) {	
	.ftnav li a{padding:25px 20px;}
}
	

 @media screen and (min-width: 1024px) {
	 body {padding-top: 100px;}
	 /*header*/
	 header {background: #ffffff;	height: 100px;}
	 header .logo {padding: 32px 0 0 0;}
	header .logo img {display: block;	height: 30px;}
	 header .menu {display:block;}
	 .menu-nav li{width:auto;}
	.hdright {line-height: 100px;}
	.hdright .menuBtn {padding: 35px 20px}

	.headsideNav {position: fixed;	top: 0;	right: -320px;	z-index: 999;	background: #f9f9f9;	height: 100%;	width: 320px;	display: block;	overflow-y: auto;	padding: 50px 30px;	-webkit-transition: all ease .5s;	-o-transition: all ease .5s;	-moz-transition: all ease .5s;	transition: all ease .5s;	text-align: center;}
	.headsideNav .logo {float: none;	display: block;	-webkit-transition: all 0.5s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.1s;	-o-transition: all 0.5s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.1s;	-moz-transition: all 0.5s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.1s;	transition: all 0.5s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.1s;	-webkit-transform: translateY(100%);	-moz-transform: translateY(100%);	-ms-transform: translateY(100%);	-o-transform: translateY(100%);	transform: translateY(100%);	opacity: 0;}
	.headsideNav .logo img {height: 34px;}
	.headsideNav .slide-colse {display: block;	width: 30px; height: 30px;	background: url(../images/slide-close.png) no-repeat center center;	position: absolute;	top: 10px; right: 10px;transition: All 0.4s ease-in-out;  -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out;}
	.headsideNav .slide-colse:hover {transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg);}
	.headsideNav .slide-nav {padding: 10px 0 0 0;	font-size: 18px;	-webkit-transition: all 0.8s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.3s;	-o-transition: all 0.8s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.3s;	-moz-transition: all 0.8s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.3s;	transition: all 0.8s cubic-bezier(0.24, 0.72, 0.35, 1.01) 0.3s;	opacity: 0;	-webkit-transform: translateY(100%);	-moz-transform: translateY(100%);	-ms-transform: translateY(100%);	-o-transform: translateY(100%);	transform: translateY(100%);}
	.headsideNav .slide-nav li {padding: 15px 0; border-bottom:1px dashed #eee;}
	.headsideNav .slide-nav li a {color: #8B8784;}
	.headsideNav dl {display:none;}
	.headsideNav.cur {right: 0;}
	.headsideNav.cur .logo, .headsideNav.cur .slide-nav {-webkit-transform: translateY(0);	-moz-transform: translateY(0);	-ms-transform: translateY(0);	-o-transform: translateY(0);	transform: translateY(0);	opacity: 1;}
	.exit-off-canvas {position: fixed;	top: 0;	left: 0;	width: 0;	height: 100%;	cursor: pointer;	z-index: 999;	background: #000;	opacity: 0.5;	-webkit-transition: all .4s ease;	-o-transition: all .4s ease;	-moz-transition: all .4s ease;	transition: all .4s ease;}

	.searchbox .searchtext {width: 100%;	height: 40px;	padding: 0 60px 0 0;}
	.searchbox .searchtext::-webkit-input-placeholder{ color: #fff;  font-size: 1.2em;}
	.searchbox .searchbtn {position: absolute; right: 0;top: 0;	width: 60px; height: 40px; color: #fff;	font-family: "Microsoft YaHei";	cursor: pointer;border: none;}

	/*index about*/
	.idxAboutus {padding: 30px 0;}
	.idxAboutus .comimg {height: 400px;	float: right;	width: 50%;}
	.idxAboutus .comimg .imgpic{}
	.idxAboutus .comimg .imgpic:after{display: block; content: ""; width: 100%; height: 100%; border: 4px solid #eee; margin-top:20px; margin-left: -20px; position:absolute; z-index:-10;}
	.idxAboutus .comimg .comtext {top: 45%;	left: 38px;	max-width: 385px;}
	.idxAboutus .comimg .comtext h3 {padding: 32px 0 30px;}
	.idxAboutus .comcontent {float: right;	width: 50%;	max-width: 600px;	padding:2% 40px 4%;}
	.idxAboutus h2 {padding: 0 0 10px 0;}
	
	
	/*index partner*/	
	.idxpart-list li:hover img {-webkit-transform: scale(1.03, 1.03);	-moz-transform: scale(1.03, 1.03);	-ms-transform: scale(1.03, 1.03);	-o-transform: scale(1.03, 1.03);	transform: scale(1.03, 1.03);}
	.idxpart-list li a {-webkit-transition: all ease .5s;	-o-transition: all ease .5s;	-moz-transition: all ease .5s;	transition: all ease .5s;	overflow: hidden;}
	.idxpart-list li a img {-webkit-transition: all ease 0.7s;	-moz-transition: all ease 0.7s;	-o-transition: all ease 0.7s;	transition: all ease 0.7s;}
	.idxpart-list li:hover a {border-color: #0093dd;}
	
	.index-more a {-webkit-transform: perspective(1px) translateZ(0);	-moz-transform: perspective(1px) translateZ(0);	transform: perspective(1px) translateZ(0);	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0);	box-shadow: 0 0 1px rgba(0, 0, 0, 0);	position: relative;	-webkit-transition-property: color;	-o-transition-property: color;	-moz-transition-property: color;	transition-property: color;	-webkit-transition-duration: 0.3s;	-moz-transition-duration: 0.3s;	-o-transition-duration: 0.3s;	transition-duration: 0.3s;	height: 40px;	line-height: 40px;	padding: 0 40px;}
	.index-more a:before {content: "";	position: absolute;	z-index: -1;	top: 0;	bottom: 0;	left: 0;	right: 0;	background: #0093dd; -webkit-transform: scale(0);	-moz-transform: scale(0);	-ms-transform: scale(0);	-o-transform: scale(0);	transform: scale(0);	-webkit-transition-property: transform;	-webkit-transition-property: -webkit-transform;	transition-property: -webkit-transform;	-o-transition-property: -o-transform;	-moz-transition-property: transform, -moz-transform;	transition-property: transform;	transition-property: transform, -webkit-transform, -moz-transform, -o-transform;	-webkit-transition-duration: 0.3s;	-moz-transition-duration: 0.3s;	-o-transition-duration: 0.3s;	transition-duration: 0.3s;	-webkit-transition-timing-function: ease-out;	-moz-transition-timing-function: ease-out;	-o-transition-timing-function: ease-out;	transition-timing-function: ease-out;}
	.index-more a:hover {color: #fff; border-color: #0093dd;}
	.index-more a:hover:before {-webkit-transform: scaleY(1);	-moz-transform: scaleY(1);	-ms-transform: scaleY(1);	-o-transform: scaleY(1);	transform: scaleY(1);}
	
	
	/*navbar*/
	.navbar h3{display: none;}
	.navbar .subnav {display: block; position: static; background-color: transparent; padding-bottom: 0; border-top: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
	.navbar .subnav ul {height: 60px; text-align: center;}
	.navbar .subnav li {width: auto; display: inline-block; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -ms-flex-negative: 0; flex-shrink: 0; height: 100%; -ms-flex-pack: center;-webkit-box-align: center; -ms-flex-align: center; }
	.navbar .subnav a {float: left; display: block; line-height: 60px; border-bottom: 0; padding: 0 25px; -webkit-transition: all ease .5s; -o-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s; position: relative;}
	.navbar .subnav a:after {content: ""; position: absolute;	z-index: -1;	top: 0;	bottom: 0;	left: 0;	right: 0;	background: #0093dd; -webkit-transform: scale(0);	-moz-transform: scale(0);	-ms-transform: scale(0);	-o-transform: scale(0);	transform: scale(0);	-webkit-transition-property: transform;	-webkit-transition-property: -webkit-transform;	transition-property: -webkit-transform;	-o-transition-property: -o-transform;	-moz-transition-property: transform, -moz-transform;	transition-property: transform;	transition-property: transform, -webkit-transform, -moz-transform, -o-transform;	-webkit-transition-duration: 0.3s;	-moz-transition-duration: 0.3s;	-o-transition-duration: 0.3s;	transition-duration: 0.3s;	-webkit-transition-timing-function: ease-out;	-moz-transition-timing-function: ease-out;	-o-transition-timing-function: ease-out;	transition-timing-function: ease-out;}
	.navbar .subnav li:hover a, .navbar .subnav li.cur a {color: #fff;}
	.navbar .subnav li:hover a:after,.navbar .subnav li.cur a:after  {-webkit-transform: scaleY(1);	-moz-transform: scaleY(1);	-ms-transform: scaleY(1);	-o-transform: scaleY(1);	transform: scaleY(1);}
	
	.inside-inner {padding-top: 40px; padding-bottom: 40px;}
}

@media screen and (min-width: 1180px) {
	.menu-nav li {width: auto;  padding: 0 2px;}
}

@media screen and (min-width: 1200px) {	
	/*footer*/
	.ftnav li a{padding:25px 30px;}
	.inside-banner img{height:200px;}
}

 @media screen and (min-width: 1260px) {
	.commonweb {margin: 0px auto;	max-width: 1200px;	padding-left: 0; padding-right:0;}
}

 @media screen and (min-width: 1280px) {
	header .logo {padding: 32px 0 0 0;}
	header .logo img{height:40px;}
	header .menu {margin-left: 30px;}
	.menu-nav li {padding: 0 1%; width:105px;}

	/*index*/
	.idxAboutus .comcontent {padding-left: 0;}
}

 @media screen and (min-width: 1366px) {	
	header .logo {padding: 32px 0 0 35px;}
	.menu-nav li {width:105px;}
}

 @media screen and (min-width: 1400px) {
	.inside-banner img{height:260px;}
}

 @media (min-width: 1600px) {
	header .logo {padding: 32px 0 0 55px;}
	header .menu {margin-left: 50px;}
	.menu-nav li {width:110px;}

}