﻿.header{width: 100%; position:fixed; top:0; z-index:99; background:#fff; overflow:hidden; padding:15px 0; box-shadow: 0 0 10px rgba(0,0,0,0.15);}
.logo{ display: inline-block; line-height:52px;}
.logo img{max-height:52px;}
.hlogin{float: right; line-height: 32px; border-radius: 32px; border:1px #e2e2e2 solid; margin: 8px 0 0 30px; padding:0 5px; color: #b5b5b5;}
.hlogin a{padding:0 8px; display:inline-block; font-size: 14px; color: #333;}
.hlogin a.hlogbtn{ color: #4285f4;}


.nav{ float:right;}
.nav .navico{display:none;}
.nav li{float:left; padding:0 25px;}
.nav li a{display:block; font-size: 17px; height: 52px; line-height: 52px; position:relative;}
.nav li a:after{display: block;	position: absolute;	left: 0;bottom: -1px;width: 0;height: 2px;background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);content: "";transition: width 0.2s;}
.nav li:hover a{color:#333;}
.nav li:hover a:after, .nav li.on a:after{ width: 100%;}
.nav li.on a{ color:#4285f4;}
.nav li.on:hover a{color:#4285f4;}
.hsbg{width:100%; height:100%; position:fixed; left:0; top:58px; bottom:0; right:0; background:#000; opacity:0.5; z-index:80; display:none;}


/* banner */
.banner{width:100%; overflow:hidden; position:relative; margin-top:82px;}
.banner .hd ul{ display:none;}
.banner .prev, .banner .next{position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; opacity: 0.6; cursor: pointer; width:15px;}
.banner .prev{left: 50px;}
.banner .next{right: 50px;}
.banner .prev:hover, .banner .next:hover{opacity: 1;}

.banner .bd{ position:relative; height:100%; z-index:0;}
.banner .bd li{ zoom:1; vertical-align:middle; }
.banner img{ width:100%; display:block;}

.pad100{padding:100px 0;}
.bgf2{background: #f2f2f2;}
.content{width:100%;}
.ctitle{width: 100%; overflow: hidden; text-align: center;}
.ctitle h2{color: #333; font-size: 30px;}
.ctitle h3{font-size: 14px; color: #888; margin-top:10px;}
.ctitle h3 span{display: inline-block; position: relative; padding: 0 45px;}
.ctitle h3 span:after, .ctitle h3 span:before{content: ''; width: 32px; height: 1px; border-bottom: 1px solid #999; position: absolute; top: 50%; transform: translateY(-50%); display: block;}
.ctitle h3 span:after{left:0;}
.ctitle h3 span:before{right:0;}

.service{width: 100%; overflow: hidden; margin-top: 20px;}
.service li{width: 23%; position: relative; float: left; text-align: center; padding: 0 1%; margin-top: 40px;-webkit-transition: all ease-in-out 0.3s ; -moz-transition: all ease-in-out 0.3s ; -ms-transition: all ease-in-out 0.3s ; -o-transition: all ease-in-out 0.3s ; transition: all ease-in-out 0.3s;}
.service li:hover{transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);}
.service li h1 img{max-width: 60%;}
.service li:hover h1 img{transform: rotateY(360deg); -webkit-transform: rotateY(360deg); transition: all 0.4s ease; -webkit-transition: all 0.4s ease;}
.service li h2{font-size: 18px; color: #333; margin-top:30px; line-height: 24px; height: 24px; text-overflow: ellipsis; white-space: nowrap;overflow:hidden;}
.service li p{line-height: 24px; height: 48px; margin-top:8px; font-size: 14px;color: #888;}
.aboutcontent{margin-bottom: 90px;}
.about_t{width: 100%; overflow: hidden;}
.about_img{width: 45%; float: right; text-align: center;}
.about_img img{max-width: 100%;}
.about_tct{width: 50%; float: left;}
.about_tct h1{font-size: 30px; color: #333;}
.about_tct h3{color: #888; margin-top: 8px; position: relative; padding-bottom: 20px; font-size: 14px;}
.about_tct h3:after{content: ''; width: 40px; height: 5px; background: #ff9e30; position: absolute; left: 0; bottom: 0;}
.about_tct h2{font-size: 18px; margin-top:50px;}
.about_txt{width: 100%; overflow: hidden; line-height: 30px; font-size: 14px; color: #555; margin-top: 20px; position: relative; top: 0;}
.aboutmore{width: 148px; height: 38px; line-height: 38px; border:1px #d7d7d7 solid; color: #888; font-size: 14px; display: inline-block; text-align: center; margin-top: 40px; position: relative;}
.aboutmore span{position: relative; z-index: 2;}
.aboutmore:hover span{color: #fff;}
.aboutmore:after{content: ''; position: absolute; height: 100%; width: 0; left: 0; top: 0; z-index: 1; background: #233876; transition: all .36s ease;}
.aboutmore:hover:after{width: 100%;}

.about_b{width: 100%; box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.07); padding:55px 0; overflow: hidden; background: #fff; margin:50px 0 -190px;}
.about_b li{width: 25%; float: left; text-align: center; position: relative; font-size: 14px;}
.about_b li:after{content: '';  width: 1px; height: 52px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.about_b li:last-child:after{display: none;}
.about_b li h3{display: inline-block; margin:0 auto; position: relative; padding-right: 15px;}
.about_b li h3 span{font-size: 50px; color: #4285f4; line-height: 50px;}
.about_b li h3 em{position: absolute; top: 0; right: 0;}
.about_b li p{width: 100%; overflow: hidden; margin-top: 5px;}
.fztline{text-align: center; margin-top:20px; width: 100%;}
.fztline span{width: 216px; height: 4px; border-top: 1px solid #9b9b9b; display: inline-block; margin:0 auto; position: relative;}
.fztline span:after, .fztline span:before{content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 105px;  height: 1px; background: #9b9b9b;}
.fztline span:after{top: -5px;}
.fztline span:before{bottom:0;}

.lctitle{text-align: center; color: #4285f4; font-size: 24px; margin-top:40px;}


.fzcontent{border-top:2px #ececec solid; margin-top: 135px;}
.fzbox{ width:100%; position:relative; margin-top: -110px; text-align: center;}
.fzbox .hd{ }
.fzbox .hd .prev, .fzbox .hd .next{position: absolute; top: 60px; display:block; width:34px; height:34px; cursor:pointer; background:url("../images/gico.png") no-repeat; cursor: pointer; border-radius: 5px;}
.fzbox .hd .prev{left: 0; background-position:left 0;}
.fzbox .hd .next{right: 0; background-position:right 0;  }
.fzbox .hd .prev:hover{background-position:left bottom; }
.fzbox .hd .next:hover{background-position:right bottom; }

.fzbox .bd{ max-width: 90%; margin:0 auto; display: inline-block;}
.fzbox .bd ul{ overflow:hidden; zoom:1; }
.fzbox .bd ul li{float:left; display:inline-block; overflow:hidden; text-align:center; position: relative; padding: 60px 0;}
.fzbox .bd ul li .fzui{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:25px 20px; box-shadow: 0 0 0 rgba(0,0,0,.15); transition: all .36s ease;}
.fzbox .bd ul li:hover .fzui{box-shadow:0 10px 20px rgba(0,0,0,.15);}
.fzbox .bd ul li h2{font-size: 28px; height: 42px; overflow: hidden;}
.fzbox .bd ul li h3{width: 8px; height: 8px; border-radius: 50%; border:3px #fff solid; background: #888888; display: inline-block; margin:0 auto;}
.fzbox .bd ul li p{width: 60%; margin:20px auto 0; line-height: 24px; color: #888;}

.ctitle.ystitle h2, .ctitle.ystitle h3{color: #fff;}
.ctitle.ystitle h3 span:after, .ctitle.ystitle h3 span:before{border-bottom-color: #fff;}
.ctitle.ystitle h1{padding-bottom: 20px;}
.ctitle.ystitle h1 span{width: 2px; height: 130px; display: block; background: #fff; margin:0 auto; overflow: hidden;}
.ctitle.ystitle h1 em{width: 16px; height: 16px; border-radius: 16px; border:2px #fff solid; display: block; margin:0 auto; overflow: hidden;}
.yscont{padding: 80px 0; overflow: hidden; width: 100%;}
.ysimg{width: 48%; float: left; text-align: center;}
.ysimg img{max-width: 100%;}
.ysbox{width: 50%; float: right;}
.ysbox li{width: 48%; padding: 0 1%; margin-top:25px; float: left; text-align: center; color: #fff; position: relative;-webkit-transition: all ease-in-out 0.3s ; -moz-transition: all ease-in-out 0.3s ; -ms-transition: all ease-in-out 0.3s ; -o-transition: all ease-in-out 0.3s ; transition: all ease-in-out 0.3s;}
.ysbox li:hover{transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);}
.ysbox li h1 img{max-width: 50%;}
.ysbox li h2{font-size: 18px; margin-top: 20px;}
.ysbox li p{font-size: 14px; margin-top: 10px; line-height: 24px; height: 48px; overflow: hidden;}
.case_hd{width: 100%; overflow: hidden; text-align: center; margin-top: 40px; line-height: 24px; text-align: center;}
.case_hd ul{display: inline-block; margin:0 auto;}
.case_hd li{float: left; padding: 0 20px; font-size: 14px;}
.case_hd li.active a{color: #4285f4;}
.case_bd{width: 100%;}
.case_bd ul{width: 104%;}
.case_bd li{width: 29.33%; float: left; margin:40px 4% 0 0; display: inline-block;transition: all 0.36s ease;box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);}
.case_bd li:hover{ box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);}
.case_bd li h1{overflow: hidden;}
.case_bd li h1 img{width: 100%;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.case_bd li:hover h1 img {transform: scale(1.2, 1.2)}

.case_bd li h2{text-align: center; font-size: 14px; margin-top:25px; line-height: 24px; height: 24px; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; transition: all ease-in-out 0.3s;}
.case_bd li:hover h2{transform:translateY(-12px); -ms-transform:translateY(-12px); -webkit-transform:translateY(-12px);}


.team{width: 100%;}
.team li{width: 23%; padding: 0 1%; float: left; text-align: center; margin-top: 40px; font-size: 14px; position: relative;}
.team li h3, .team li p{-webkit-transition: all ease-in-out 0.3s ; -moz-transition: all ease-in-out 0.3s ; -ms-transition: all ease-in-out 0.3s ; -o-transition: all ease-in-out 0.3s ; transition: all ease-in-out 0.3s;}
.team li:hover h3, .team li:hover p{transform:translateY(10px); -ms-transform:translateY(10px); -webkit-transform:translateY(10px);}

.team li h1 img{max-width:70%; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.team li:hover h1 img {transform: scale(1.1, 1.1)}
.team li h3{margin-top: 25px; color: #333;}
.team li h3 span{font-size: 24px; padding-right: 10px;}
.team li p{color: #888; margin-top:10px;}
.contact{width: 100%; overflow: hidden; margin-top: 50px;}
.lxform{width: 45%; float: left;}
.lxform dl{width: 100%; overflow: hidden; display: block; margin-top:30px;}
.lxform dl dt{float: left; font-size: 16px; color: #333; line-height: 50px;}
.lxform dl dd, .lxformbtn{padding-left: 105px;}
.lxinp, .lxtextarea{width: 100%; padding:0 15px; display: block;box-sizing: border-box; border-radius: 5px; border: 1px #ddd solid; background: #f8f8f8; font-size: 14px; color: #333;}
.lxinp{line-height: 48px; line-height: 48px;}
.lxtextarea{padding:10px 15px; line-height: 24px; height: 100px; resize: none;}
.submitbtn{width: 100%; border: 0 none; background: #4285f4; height: 52px; line-height: 52px; color: #fff; font-size: 16px; border-radius: 5px; margin-top: 50px; text-align: center;}
.lximg{width: 50%; float: right; text-align: center;}
.lximg img{max-width: 100%;}




.footer{background: #1b1a25; color: #fff; width: 100%; overflow: hidden; font-size: 14px;}
.footer a{color: #fff;}
.foot_top{width: 100%; overflow: hidden; padding: 50px 0 40px; text-align: center;}
.foot_info, .foot_ewm{width: 100%; overflow: hidden;}
.foot_info span{display: inline-block; padding:0 20px; line-height: 20px; margin-top: 10px;}
.foot_info span img{width: 20px; float: left; padding-right: 10px;}
.foot_ewm{margin-top: 40px;}
.foot_ewm span{display: inline-block; padding:0 40px;}
.foot_ewm img{width: 100px; overflow: hidden; display: block;}
.foot_ewm em{width: 100%; overflow: hidden; display: block; padding-top: 10px;}


.copyright{padding:40px 0; width: 100%; overflow: hidden; text-align: center; border-top:1px #3d3c45 solid;}




@media all and (max-width:1480px) {
	.wrapper{width:92%; }
	

}
@media screen and (min-width:769px) and (max-width:1024px) {
	.nav li{padding: 0 13px; }
	.nav li a{font-size: 16px;}
}
@media all and (min-width:0) and (max-width:768px) {
	.pad100{padding:50px 0;}
	.wrapper{width:92%;}
	.header{padding:13px 0;}
	.top_r{display: none;}
	.logo{display: block; line-height:32px; position:relative; z-index:100;}
	.logo img{max-height:32px; max-width: 70%;}
	.hlogin{position: absolute; top: 4px; right: 65px; float:inherit;}
	.nav{height:initial; border-bottom-width: 2px;}
	.nav .navico{display:block; position: absolute; top: 0; right:0; z-index:101; padding:16px 20px;}
	.nav .navico span{ background:#555; display: block; width: 20px;  height: 2px;  margin-top: 5px;  position: relative;  z-index: 1;  transform-origin: 20px center;border-radius: 2px;
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1) 0s, background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1) 0s, opacity 0.55s ease 0s, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1) 0s;}
	.nav .navico.on span {opacity: 1;transform: rotate(45deg); background:#555;}
	.nav .navico.on span:nth-last-child(2) {opacity: 0;}
	.nav .navico.on span:nth-last-child(3) {opacity: 1; transform: rotate(-45deg);}
	.nav .navbox{position:fixed; width:100%; left:0; top:58px; background:#fff; z-index:90; overflow-y:auto; height:0;}
	.nav .navbox ul{ padding:10px 0; overflow:hidden; display:block;}
	.nav ul li{width:100%; overflow:hidden; line-height:36px; padding:0; font-size: 14px; text-align:center;}
	.nav li.on a{background: #4285f4; color: #fff;}
	
	.banner{ margin-top:58px;}
	.banner .prev, .banner .next{width: 10px;}
	.banner .prev{left: 15px;}
	.banner .next{right: 15px;}
	.ctitle h2, .about_tct h1{font-size: 26px;}
	.lctitle{font-size: 18px; margin-top: 20px;}
	.service li{width: 48%; margin-top: 20px;}
	.about_tct, .about_img{width: 100%; float: inherit;}
	.about_img{margin-top: 20px;}
	.about_b{padding: 25px 0; margin:25px 0 -150px;}
	.about_b li{width: 50%; padding:15px 0;}
	.about_b li h3 span{font-size: 36px; line-height: 36px;}
	.about_b li:nth-child(odd):after { background: none; }
	.about_tct h2{margin-top: 20px;}
	.fzcontent{margin-top:100px; }
	.fzbox{margin-top: -80px;}
	.fzbox .hd .prev, .fzbox .hd .next{top: 30px;}
	.fzbox .bd ul li{padding: 30px 0 0;}
	.fzbox .bd ul li .fzui{margin:0;}
	.yscont{padding: 40px 0;}
	.fzbox .bd{max-width: 76%;}
	.ysimg, .ysbox{width: 100%; float: inherit;}
	.case_hd, .case_bd li{margin-top: 20px;}
	.case_bd li{width: 46%;}
	.case_bd li h2{margin-top: 12px;}
	.team li{width: 48%; font-size: 13px;}
	.team li h3{margin-top: 12px;}
	.team li h3 span{font-size: 18px;}
	.contact, .submitbtn{margin-top: 25px;}
	.lxform, .lximg{width: 100%; float: inherit;}
	.lxform dl{margin-top: 20px;}
	.lxform dl dd, .lxformbtn{padding-left:90px;}
	.lxform dl dt{line-height: 45px;}
	.lxinp{height: 45px; line-height: 45px;}
	.lximg{display: none;}
	.foot_top{padding:30px 0 25px;}
	.foot_ewm{margin-top: 20px;}
	.foot_ewm span{padding: 0 15px;}
	.copyright{padding:25px 0;}


}

@media all and (max-width:480px) {
	

}





































