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

/*鎵嬫満绔痓anner*/
.bannerslide { display:none; height:400px; width: 100%; position: relative; -webkit-transition: all .2s; transition: all .2s; }
.bannerslide .swiper-slide { background-position: center; background-size: cover;}
.paginationw { position: absolute; left: 0; text-align: center; bottom:50px; width: 100%; z-index:1000001;}
.swiper-pagination-bullet { display: inline-block; width: 50px; height: 3px; background: #fff; margin: 0 3px; cursor: pointer; border-radius:0;}
.swiper-pagination-bullet-active { background: #e60000;}
.bannerslide .swiper-button-prev { background: url(../images/arrows.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 60px; height: 60px; z-index:1111111;}
.bannerslide .swiper-button-next { background: url(../images/arrows.png) no-repeat right bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 60px; height: 60px; z-index:1111111;}


/*棣栭〉閫氱敤鏍囬*/
.hometitle {
	text-align: center;
	margin-bottom: 20px;
}
.hometitle .title {
	font-size: 24px;
	line-height: 30px;
	color: #555;
}
.hometitle .subtitle {
	font-size: 14px;
	color: #777;
	line-height: 26px;
}
.hometab {
	text-align: center;
}
.hometab a {
	display: inline-block;
	padding: 6px 32px;
	font-size: 14px;
	text-align: center;
	border: 1px solid rgba(170,170,170,.2);
	color: #828282;
	transition: all .3s ease;
}
.hometab a.tui {
	border-color: #10029b;
	background: #10029b;
	color: #fff;
}
.hometab a:hover {
	border-color: #10029b;
	background: #10029b;
	color: #fff;
}
.tabsub {
	margin-top: 20px;
	text-align: center;
}
.tabsub a {
	line-height: 36px;
	padding: 0 30px;
	border-bottom: 1px solid rgba(170,170,170,.2);
	display: inline-block;
	text-align: center;
	font-size: 14px;
	color: #828282;
	transition: all .36s ease;
}
.tabsub a:hover {
	border-bottom: #10029b 1px solid;
	color: #10029b;
}
/*棣栭〉鑱旂郴鎴戜滑*/
#contact {
	background: #fff;
	padding-bottom: 100px;
	position: relative;
}
#contact .container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
#contact .itemboxbg {
}
#contact .itemboxbg img {
	display: block;
	width: 100%;
}
#contact .contact_box {
	position: relative;
	width: 80%;
	top: 0;
	margin: 0 auto;
	padding: 3% 0;
	background: #10029b;
	margin-top: -145px;
}
#contact .contact_box .biaoti {
	width: 86%;
	margin: 0 auto;
}
#contact .contact_box .biaoti .cn {
	font-size: 24px;
	color: #fff;
	text-align: center;
}
#contact .contact_box .biaoti .en {
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 22px;
}
#contact .contact_box .item_des {
	font-size: 14px;
	line-height: 24px;
	overflow: hidden;
	width: 86%;
	margin: 0 auto;
	margin-top: 18px;
	text-align: center;
	color: #fff;
}
#contact .contact_box .more {
	text-align: center;
	margin-top: 20px;
}
#contact .contact_box .more .details {
	padding: 8px 60px;
	transition: all .6s ease 0s;
	color: #fff;
	border: 1px solid rgba(255,255,255,.44);
	border-radius: 30px;
	line-height: 30px;
	display: inline-block;
	font-size: 14px;
}
/*鏈€鏂板姩鎬?/
#news {
	background: #f4f4f4;
	padding: 100px 0;
}
#news .wrapper {
	width: 94%;
	max-width: 1440px;
	margin: 0 auto;
}
#news .newslist {
	padding-top: 51px;
}
#news .newslist .item {
	width: calc(100% / 3 - 66px);
	transition: all .36s ease;
	border: 1px solid rgba(170,170,170,0);
	overflow: hidden;
	float: left;
	margin-right: 66px;
	margin-bottom: 20px;
	box-shadow: 0 0 0 rgba(0,0,0,.15);
	box-sizing: border-box;
	position: relative;
}
#news .newslist .item .item_img {
	overflow: hidden;
}
#news .newslist .item .item_img img {
	max-width: 100%;
	transition: all .36s ease;
	display: inline;
}
#news .newslist .item .item_info {
	padding: 50px 36px 60px 36px;
	background: #fff;
}
#news .newslist .item .item_info .title {
	transition: all .36s ease;
	color: #333;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
}
#news .newslist .item .item_info .description {
	transition: all .36s ease;
	font-size: 13px;
	line-height: 26px;
	height: 52px;
	color: #999;
	overflow: hidden;
	text-align: center;
}
#news .newslist .item .details {
	line-height: 48px;
	position: absolute;
	bottom: 175px;
	width: 100%;
	margin-bottom: 17px;
	margin-left: 0;
	padding: 0;
	text-align: center;
	color: transparent;
	border: none;
	transition: all .36s ease;
	display: inline-block;
	font-size: 14px;
}
#news .newslist .item .details:before {
	position: absolute;
	bottom: 16%;
	left: 50%;
	display: block;
	width: 2px;
	height: 16px;
	margin-bottom: 7px;
	content: "";
	transition: all .6s ease 0s;
	opacity: 0;
	background-color: #fff;
}
#news .newslist .item .details:after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 16px;
	height: 2px;
	margin-left: -7px;
	content: "";
	transition: all .6s ease 0s;
	opacity: 0;
	background-color: #fff;
}
#news .newslist .item:hover {
	border: 1px solid #e4e4e4;
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.08);
	box-shadow: 0 12px 24px rgba(123,123,123,.08);
}
#news .newslist .item:hover .item_info .title {
	color: #10029b;
}
#news .newslist .item:hover .details {
	border-color: #10029b;
	background-color: #10029b;
	color: rgba(255,255,255,0);
}
#news .newslist .item:hover .details:before {
	opacity: 1;
}
#news .newslist .item:hover .details:after {
	opacity: 1;
}
#news .newslist .item:hover .item_img img {
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	transform: scale(1.08);
}
#news .more {
	width: 180px;
	border: 1px solid rgba(170,170,170,0);
	border-radius: 30px;
	background-color: rgba(0,0,0,0);
	display: block;
	line-height: 46px;
	text-align: center;
	margin: 50px auto 0;
	font-size: 14px;
	transition: all .36s ease;
}
#news .more:hover {
	background-color: #10029b;
	color: #fff;
	border: 1px solid rgba(170,170,170,0);
}
/*搴曢儴*/
#bottom {
	background: #fff;
	padding: 100px 0;
}
#bottom .wrapper {
	width: 94%;
	max-width: 1440px;
	margin: 0 auto;
}
#bottom dl {
	float: left;
	width: 17%;
	padding-right: 40px;
}
#bottom dl dt {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 25px;
	font-weight: 100;
	color: #666;
}
#bottom dl.QRcode dd, #bottom dl dd a {
	font-size: 13px;
	line-height: 28px;
	color: #989898;
}
#bottom dl dd ul {
	padding-left: 15px;
}
#bottom .QRcode {
	float: right;
	text-align: right;
}
#bottom .QRcode dd img {
	margin-bottom: 25px;
}
#footer {
	border-top: 1px solid #eaeaea;
	background: #fff;
	padding: 10px 56px;
}
#footer .beian {
	color: #363636;
	vertical-align: top;
	margin-left: 10px;
	display: inline-block;
}
/*鍙充晶鎮诞鎸夐挳*/
#shares {
	position: fixed;
	right: 0;
	bottom: 63px;
	z-index: 99;
	height: 124px
}
#shares a {
	width: 40px;
	height: 40px;
	border: 1px solid #e6e6e6;
	display: block;
	font-size: 16px;
	text-align: center;
	position: relative;
	transition: all .3s ease-out 0s;
	background-color: #fff
}
#shares a .fa {
	padding-left: 0
}
#shares a#sweixin {
	top: -1px
}
#shares a#gotop {
	margin-top: -2px;
	font-size: 22px
}
#shares a#gotop i {
	margin-top: 6px
}
#shares a:hover {
	border-color: #10029b;
	z-index: 1;
	background-color: #10029b
}
#shares a:hover i {
	color: #fff
}
#shares a i {
	margin-top: 12px;
	transition: all .3s ease-out 0s
}
#shares a i.fa.fa-mobile {
	font-size: 24px;
	margin-top: 8px
}
#online_open {
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: fixed;
	right: -40px;
	bottom: 186px;
	z-index: 99;
	font-size: 18px;
	text-align: center;
	line-height: 40px;
	margin-right: -3px;
	border: 1px solid #e6e6e6;
	display: block;
	font-size: 16px;
	background-color: #fff;
	-webkit-transform: translateX(7px);
	-ms-transform: translateX(7px);
	transform: translateX(7px)
}
#online_open i {
	transition: all .3s ease-out 0s
}
#online_open:hover {
	border-color: #10029b;
	z-index: 1;
	background-color: #10029b
}
#online_open:hover i {
	color: #fff
}
#online_lx {
	width: 180px;
	height: auto;
	background-color: #fff;
	box-shadow: 0 5px 9px rgba(4,0,0,.17);
	position: fixed;
	right: 7px;
	bottom: 188px;
	z-index: 99999;
	margin-right: -10px
}
#olx_head {
	padding: 20px;
	line-height: 16px;
	height: 16px;
	background: #10029b;
	color: #fff;
	font-size: 14px
}
#olx_head i {
	font-size: 18px;
	color: #fff;
	cursor: pointer;
	transition: all .6s cubic-bezier(.215, .61, .355, 1) 0s
}
#olx_head i:hover {
	color: #fff;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg)
}
#olx_tel {
	padding: 20px 30px
}
#olx_tel div {
	line-height: 14px;
	height: 14px;
	margin-bottom: 10px
}
#olx_tel div i {
	font-size: 18px;
	margin-right: 20px;
	vertical-align: middle
}
#olx_tel p {
	line-height: 18px;
	font-family: HELVETICANEUELTPRO-THEX;
	font-size: 14px
}
/*棣栭〉浜у搧灞曠ず*/
#product {
	background: #f4f4f4;
	padding: 100px 0;
}
#product .wrapper {
	width: 94%;
	max-width: 1440px;
	margin: 0 auto;
}
#product .prolist {
	position: relative;
	padding-top: 50px;
}
#product .prolist .item {
	float: left;
	overflow: hidden;
	margin: 0 20px 20px 0;
	width: calc(100% / 3 - 20px);
	transition: all .36s ease;
	position: relative;
}
#product .prolist .item .pic {
	position: relative;
	overflow: hidden;
}
#product .prolist .item .pic img {
	transition: all .36s ease;
	display: inline;
}
#product .prolist .item .pic:after {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	transition: .36s ease;
	opacity: 0;
	background-color: rgba(0,0,0,.54);
}
#product .prolist .item:hover .pic:after {
	opacity: 1;
}
#product .prolist .item .info {
	padding: 4% 8%;
	height: 200px;
	background: #FFF;
}
#product .prolist .item .info .bign {
	transition: all .36s ease;
}
#product .prolist .item .info .bign .name {
	transition: all .36s ease;
	padding-top: 20px;
	font-size: 16px;
	color: #6c6c6c;
	line-height: 30px;
}
#product .prolist .item .info .bign .model {
	transition: all .36s ease;
	font-size: 14px;
	line-height: 22px;
	color: #777;
}
#product .prolist .item .info .description {
	margin-top: 13px;
	transition: all .36s ease;
	line-height: 26px;
	height: 52px;
	color: #999;
	overflow: hidden;
	font-size: 13px;
}
#product .prolist .item .details {
	position: absolute;
	z-index: 2;
	top: 42%;
	left: 50%;
	width: 46PX;
	height: 46PX;
	margin-top: -12%;
	margin-left: -23px;
	padding: 0;
	opacity: 0;
	color: rgba(153,153,153,0);
	border-radius: 100%;
	transition: all .36s ease;
	border: 1px solid rgba(170,170,170,.2);
	display: inline-block;
	font-size: 14px;
	line-height: 30px;
	margin-bottom: 30px;
}
#product .prolist .item .details:before {
	position: absolute;
	bottom: 14%;
	left: 50%;
	display: block;
	width: 2px;
	height: 16px;
	margin-bottom: 7px;
	content: "";
	transition: all .3s ease;
	background-color: #fff;
}
#product .prolist .item .details:after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 16px;
	height: 2px;
	margin-left: -7px;
	content: "";
	transition: all .3s ease;
	background-color: #fff;
}
#product .prolist .item:hover {
	box-shadow: 0 12px 30px rgba(80,80,80,.1);
}
#product .prolist .item:hover .pic img {
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	transform: scale(1.08);
}
#product .prolist .item:hover .bign .name {
	padding-top: 30px;
	font-weight: bold;
	font-size: 17px;
	color: #10029b;
}
#product .prolist .item:hover .bign .model {
	color: #c3c3c3;
}
#product .prolist .item:hover .details {
	margin-top: -18%;
	top: 44%;
	border-color: #10029b;
	background-color: #10029b;
	opacity: 1;
}
#product .promore {
	padding-top: 50px;
	position: relative;
}
#product .promore .more {
	margin: 80px auto 0;
	border-radius: 30px;
	width: 180px;
	display: block;
	line-height: 46px;
	text-align: center;
	font-size: 14px;
	transition: all .3s ease;
}
#product .promore .more:before {
	position: absolute;
	z-index: 1;
	right: -60px;
	bottom: 24px;
	display: block;
	width: 50%;
	height: 1px;
	content: "";
	transition: all .36s cubic-bezier(.215, .61, .355, 1) 0s;
	background-color: rgba(167,167,167,.29);
}
#product .promore .more:after {
	position: absolute;
	z-index: 1;
	bottom: 24px;
	left: -60px;
	display: block;
	width: 50%;
	height: 1px;
	content: "";
	transition: all .36s cubic-bezier(.215, .61, .355, 1) 0s;
	background-color: rgba(167,167,167,.29);
}
#product .promore .more:hover {
	background-color: #10029b;
	color: #fff;
}
#product .promore .more:hover:before {
	width: 47%;
}
#product .promore .more:hover:after {
	width: 47%;
}
/*澶撮儴*/
#header {
	transition: height .36s ease;
	width: 100%;
	height: 80px;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	position: fixed;
	top: 0;
	z-index: 99;
	background: #fff
}
#header .wrapper {
	background: url(../images/topmenubg.jpg) no-repeat center right;
	height: 100%;
}
#header .wrapper>.topmenubg {
	margin: 0 auto;
	height: 100%;
	position: relative;
	max-width: 94%;
}
#headTop {
	position: relative;
	float: left;
	height: 100%;
	margin-right: 50px
}
#headTop #logo {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: block;
}
#headTop #logo img {
	height: 44px!important;
	max-width: initial
}
#navWrapper {
	float: right;
	height: 100%
}
#navWrapper .content {
	height: 100%;
	position: relative;
}
#navWrapper .content .nav {
	height: 100%;
	float: left;
}
#navWrapper .content .nav>.navitem {
	transition: all .36s ease;
	cursor: pointer;
	position: relative;
	float: left;
	font-size: 14px
}
#navWrapper .content .nav>.navitem>a {
	font-weight: bold;
	transition: all .36s ease;
	display: block;
	padding: 0 26px;
	border-bottom: 2px solid transparent;
	line-height: calc(80px - 2px)
}
#navWrapper .content .nav>.navitem .subnav {
	transition: all .36s ease;
	position: absolute;
	top: calc(100% - 2px);
	left: 0;
	z-index: 199;
	opacity: 0;
	visibility: hidden;
	width: 180px;
	height: auto;
	border-width: 2px 0 0;
	border-style: solid;
	border-color: #10029b;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 13px 42px 11px rgba(0,0,0,.05)
}
#navWrapper .content .nav>.navitem .subnav li {
	cursor: pointer;
	width: 100%
}
#navWrapper .content .nav>.navitem .subnav li a {
	transition: all .36s ease;
	font-weight: 500;
	padding: 12px 24px;
	line-height: 22px;
	display: block;
	transition: all .2s ease-in-out;
	font-size: 12px;
	color: #666
}
#navWrapper .content .nav>.navitem .subnav li a:hover {
	color: #fff;
	background-color: #10029b
}
/*鎼滅储妗?/
#search-nav {
	display: block;
	position: relative;
	left: auto;
	right: -15px;
	height: 80px;
	transition: opacity .36s ease, height .36s ease;
	visibility: visible;
	opacity: 1;
	margin-left: 50px;
	float: right;
}
#search-nav .search_wrap {
	height: 100%
}
#search-nav .searchOnOff {
	display: block;
	font-size: 17px;
	position: relative;
	top: 50%;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
	color: #fff;
}
#toggle-search {
    float: right;
    background-position: -40px 0;
}
.header-button {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
    border: none;
    cursor: pointer;
}	
#search-form {
    -moz-transition: max-height, 0.5s;
    -o-transition: max-height, 0.5s;
    -webkit-transition: max-height, 0.5s;
    transition: max-height, 0.5s;
    position: absolute;
    top: 80px;
    right: 0;
    max-height: 0;
    overflow: hidden;
}
#search-form fieldset {
    position: relative;
    padding: 0;
    border: none;
}
#search-form input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: 40px;
	border: 2px solid #10039b;
	background-color: #ffffff;
	width: 230px;
	padding:0 20px;
}	
#search-form.open {
    max-height: 40px;
    z-index: 999;
}  

/*鎵嬫満瀵艰埅鏍?/
.mobile-inner{ display:none;}

@media (max-width: 1200px) {
	#header .wrapper>.topmenubg{ max-width:100%;}
	body #headTop{ padding-left:20px;}
	body #navWrapper{ display:none;}
	.mobile-inner{ display:block;}
	#shares{ display:none;}
}

@media (max-width: 768px) {
	.bannerslide{ display:block;}
}

@media (max-width: 720px) {
	.ff_indexPage .mlist.team .content_wrapper .tab_button{ width:100%;}
	.ff_indexPage .mlist.team .tab_content-wrapper{ width:100%;}
	.ff_indexPage .mlist.team .content_wrapper .tab_content{ width:100%;}
	.ff_indexPage .mlist.team .content_list-deswrapper{ width:100%;}
	.ff_indexPage .mlist.team .content_list-deswrapper .item_block{ width:100%;}
	#bottom .QRcode{ float:left;}
	#bottom dl{ width:25%;}
	#news .newslist .item{ width:100%;}
	#news .newslist .item .item_img img{ display:block; width:100%;}
	#product .prolist .item{ width:calc(100% / 2 - 20px);}
	#online_open,#online_lx{ display:none;}
	.hometab a{ margin-bottom:5px;}
}

@media (max-width: 450px) {
	#contact .contact_box{ margin-top:0; width:100%;}
	#contact .contact_box .biaoti .cn{ font-size:20px;}
	#bottom{ display:none;}
	#footer .fr{ display:none;}
	body #headTop #logo img{ display:block; width:80%;}
	.bannerslide{ height:250px;}
}