body{overflow:hidden;}

ul,li,img{margin:0;padding:0;list-style: none;border:none;}

a{text-decoration:none;}

body > img{width:100%;}

.addredr>.nav>li>a.abouts{

	color: #FFF;
	background:url(../image/hengan.png) center no-repeat;

}


.banner{
	height:170px;
	background-color: #201632;

	background: url(../image/bg_banner_new.jpg) no-repeat center center;

	background-size: cover;

	position: relative;

	overflow: hidden;

}

.t>.cell{

	width: 100%;

}

.mask>.t{margin-top: -60px;}

.banner .title{

	background-repeat: no-repeat;

	background-position: center;

	text-indent: -9999px;

	display: block;

	margin-left: auto;

	margin-right: auto;

	background-size: contain;

	font-size: 12px;

	position: relative;

}

.banner .title:after{

	content: '';

	display: block;

}

.banner .title-1{

	width: 11.7%;

	min-width: 130px;

	background-image: url('/static/images/about/b_word1.png');

}

.banner .title-1:after{

	padding-top: 18.83%;

	margin-bottom: 16%;

}

.banner .title-2{

	width: 53.2291%;

	min-width: 300px;

	background-image: url('/static/images/about/b_word_2.png');

}

.banner .title-2:after{

	padding-top: 8.1213%;

	margin-bottom: 3%;

}

.banner .title-3{

	width: 6.9791%;

	min-width: 80px;

	background-image: url('/static/images/about/b_word3.png');

}

.banner .title-3:after{

	padding-top: 14.9253%;

}

.banner .title-3 span{

	color: rgb(16,205,255);

}

.banner .k{

	position: absolute;

	left: 50%;

}

.banner .k>img{

	display: block;

	max-width: 100%;

	height: auto;

}

.banner .k-up,

.banner .k-down{

	width: 19%;

	min-width: 140px;

	margin-left: -9.5%;

}

.banner .k-up{

	top: 13%;

}

.banner .k-down{

	top: 57%;

}

.banner .mouse{

	bottom: 5%;

	width: 1%;

	min-width: 12px;

}


.banner_title{
	position: absolute;
	top:27%;
	left:50%;
	margin-left: -15.5%;
	width:35%;
	
}
.banner_title>img{
	max-width:100%;
}
.banner_irc{
	position: absolute;
	top:41%;
	left:50%;
	width:22%;
	margin-left:-11%;
	box-sizing: border-box;
	padding:0 20px;
	background: url("../image/line.png") left 5px top 45px no-repeat,url("../image/line.png") right 5px top 45px no-repeat;

}
.banner_record{
	position:absolute;
	top:60%;
	
	left:50%;
	margin-left:-16%;
	width:32%;
}
.banner_record>img{
	max-width: 100%;
	transform-origin:48.8% 49.0%;
	animation:record_rotate 14s;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
}
@keyframes record_rotate{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(-360deg);
	}
}
.banner_line{
	position:absolute;
	top:67%;
	left:36%;
	width:16%;
	height:243px;
	overflow:hidden;
}

.banner_line>img{
	
	
	transform-origin:49.9% 48.0%;
	width:200%;
	margin-left: -12%;
	margin-top:-16%;
	animation-name: lines_note;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	
	animation-fill-mode: forwards;

}
@keyframes lines_note {
	from{
		transform: rotate(88deg);
	}
	to{
		transform: rotate(0deg);
	}
}
@keyframes lines_note_back {
	from{
		transform: rotate(0deg);
		opacity:1;
	}
	to{
		transform: rotate(88deg);
		opacity:0;
	}
}
.banner_blur{
	position:absolute;
	width:17%;
	left:43%;
	top:60%;
}
.banner_blur>img{
	max-width: 100%;
}
.banner_switch{
	position: absolute;
	left:56%;
	top:57%;
	width:12%;
	transform: rotate(-22.5deg);
	transform-origin:88.3% 88.2%;
	transition:transform 1s;
}
.banner_switch_click{
	transform: rotate(0deg);
}
.banner_switch>img{
	max-width: 100%;
}
.start{
	margin-bottom: 10px;
}

	

.banner_btn{
	width:14%;
	height:13%;
	border-radius: 50%;
	position: absolute;
	left:42%;
	top:33%;
	
	z-index: 2;
	cursor:pointer;
}
.banner_btn>img{
	max-width: 100%;
}
.banner_note{
	position: absolute;
	opacity:0;
}
.banner_note1{
	animation: note1 2s;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
}
.banner_note2{
	animation: note2 2s;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
	animation-delay:0.5s;
}
.banner_note3{
	animation: note1 2s;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
	animation-delay:1s;
}
.banner_note4{
	animation: note2 2s;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
	animation-delay:1.5s;
}
@keyframes note1 {
	from{
		left:51%;
		bottom:30%;
		opacity:1;
	}
	to{
		left:51%;
		bottom:40%;
		opacity:0;
	}
}
@keyframes note2 {
	from{
		left:53%;
		bottom:29%;
		opacity:1;
	}
	to{
		left:53%;
		bottom:40%;
		opacity:0;
	}
}


@media (max-width:1600px ) {
	.banner_irc p{
		font-size: 12px !important;
	}
	.banner_irc{
		width:320px;
		margin-left: -160px;
		top:35%;
	}
	.banner_title{
		top:28%;
	}
	.banner_note{
		width:2%;
	}
}
@media(max-width: 1100px){
	.banner_title{
		top:8%;
		width:34%;
		margin-left: -15%;
	}
	.banner_irc{
		top:31%;
	}
}
@media (max-width:767px){
	.banner_title{
		top:15%;
		width:50%;
		margin-left:-22%;
	}
	.banner_irc{
		top:37%;
		width:320px;
		margin-left: -158px;
	}
	.banner_record{
		top:62%;
		width:46%;
		margin-left:-23%;
	}
	.banner_line{
		top:68%;
		left:29%;
		width:24%;
	}
	.banner_blur{
		top:65%;
	}
	.banner_switch{
		left:58%;
		top:58%;
		width:18%;
	}
	.banner_note{
		width:3%;
	}
}
@media (max-width:610px){
	.banner_title{
		top:5%;
	}
	.banner_irc{
		top:25%;
	}
}
@media (max-width:430px){
	.banner_title{
		top:26%;
	}
	.banner_irc{
		top:26%;
	}
}
@media (max-width:400px){
	.banner_title{
		top:5%;
		width:40%;
		margin-left: -18%;
	}
	.banner_irc{
		top:20%;
	}
}






h2{font-size:40px; color:#1c2835;font-weight:normal;margin:6px 0; text-align: center;}



.who{padding:0 1em;margin:0 auto; margin-top:50px;}

.who p,.who h2{}

.who ul{margin-top:60px;overflow: hidden;}

.who ul li{width:22%;float:left;margin-right:3%;}

.who-wrap ul li p{text-align: center;color:#323232;font-size:24px;margin-top: 36px;margin-bottom: 0.5em;}

.who-wrap>ul>li{padding: 0 10px;}

.who-wrapa ul li p{text-align: center;color:#323232;font-size:24px;margin-top: 36px;margin-bottom: 0.5em;}

.who-wrapa>ul>li{padding: 0 10px;}

.who > p{color:#909090;font-size:17px;}

.title-content{margin-top:20px; text-align:center;}

.who-text{max-width:954px;margin: 10px auto; line-height:180%; text-align:left;}

.who-texta{max-width:824px;margin: 40px auto; line-height:180%; text-align: center;}


@media (max-width:410px) {
	.who_h2{
		font-size: 23px !important;
	}
}



.T{clear: both;margin-top:60px;padding:0 1em;margin:0 auto; margin-top:100px;}

.T h2,.T p{text-align: center;}

.T p{color:#888888;margin-top:18px;margin-bottom:50px;font-size:16px;}

.T-main{width:60%; margin:0 auto;}

.T-main img{float:left;}

.t-img-1,.t-img-2{overflow: hidden;}

.t-img-1 img.t-img-1-2{margin:0 2%;width:43.4%;}

.t-img-1 img.t-img-1-1,.t-img-1 img.t-img-1-3{width:26.2%}

.t-img-2 {margin-top:16px;clear: both;}

.t-img-2 img.t-img-2-1{margin-right:2%;width:43%;}

.t-img-2 img.t-img-2-2{width:55%;}

.T-wrap .row>div{padding: 0 12px;}

.T-wrap .row{margin: 0;}

.T-wrap .row img{margin-bottom: 25px;}

.who-wrapa .row>div{padding: 0 12px;}

.who-wrapa .row{margin: 0;}

.who-wrapa .row img{margin-bottom: 25px;}




.pinp{margin-top:120px;}

.pinp > p{padding:0 1em;margin:0 auto;text-align: center;color:#888; font-size:16px; line-height:180%;}

.bd > div{float:left; width: 20% !important;}

.bd{width:100% !important;}

.zz{position: absolute;

z-index: 2;

width: 100%;

background: rgba(0,0,0,.8);

height: 100%;

top: 0;}

.pin-p1{font-size: 20px !important; margin-top:12px !important;margin-bottom:0px !important;}

.pinp-content{position:relative;height: 436px;}

.pinp-content .tempWrap{position:absolute !important;top:0;margin:0 10% !important;width:80% !important;}

.pinp-content .tempWrap:nth-child(1){z-index: 0;}

.pinp-content .tempWrap:nth-child(2){z-index: 3;}

.pinp-img-box{position:relative;height:431px; transition:background-color .2s;cursor:default;outline: none;}

.pinp-img-box img{bottom: 215px;left:50%;transition:bottom .3s;}

.pinp-img-box:hover img{bottom:276px;}

.pinp-img-box .text-p p.brand-name{transition:margin-top .3s}

.pinp-img-box:hover .text-p p.brand-name{margin-top:170px;}

.pinp-img-box:hover .text-p p.brand-url{display: none;}

.pinp-img-box img{position:absolute;}

.pinp-img-box p,.pinp-img-box a{color:white; text-align: center;}

.pinp-img-box a{display: block;width:60%;margin:0 auto;line-height:26px;height:26px;border-radius:16px; border:solid 1px #fff;margin-top:22px;}

.text-p p.brand-name{ text-align: center;margin-top:250px;font-weight: bold;}

.pinp-img-box .text-box{display: none;}

.pinp-img-box:hover .text-box{display: block;}

.pinp-img-box .text-box{width:80%;margin:0 auto;line-height: 180%; font-size:14px; text-align: left;}

.pinp-img-box .text-box p{text-align: left !important;}

.hd{position:relative;z-index: 9;margin:0 10%;}

.prev{float:right;}

.pinp-main{margin-top:60px;}

.picScroll-left > a{width:44px; height:100%;display: block;cursor: pointer;}

.prev{background: url(/static/images/about/btn_you_hot.png) no-repeat;}

.prev:hover{background: url(../image/btn_you_normal.png) no-repeat;}

.next{background: url(/static/images/about/btn_zuo_hot.png) no-repeat;}

.next:hover{background: url(../image/btn_zuo_normal.png) no-repeat;}
@media (max-width:1800px ) {
	.brand-carousel{
		max-width:1209px !important;
	}
}
@media (max-width:1500px ) {
	.brand-carousel{
		max-width:968px !important;
	}
}
@media (max-width:960px){

	.who ul li{width:48%;margin-right:0;}

	.who ul li:nth-child(1){margin-right:3%;}

	.who ul li:nth-child(3){margin-right:3%;}

	.title-content{font-size:18px;}

	.T-main{width:90%;}

}

@media (max-width:500px){

	.who ul li{width:100%;margin-right:0;}

	.who ul li{font-size:14px;}

	.T-main{width:90%;}

}



@media (max-width:767px){

	.T-wrap .col-xs-12{width: 100%;}

	.banner{ display: inline;}

	.mask>.t{margin-top: 0;}

	.banner .title-1{width: 110px;}

	.banner .title-2{width: 310px;}

	.banner .k{display: none;}

}

@media (min-width:768px){

	.T-wrap .col-sm-3{width:27%;}
	
	.T-wrap .col-sm-4{width:27.81%;}

	.T-wrap .col-sm-6{width: 47.3%;}

	.T-wrap .col-sm-5{width: 44.6%;}

	.T-wrap .col-sm-7{width: 52.1%;}

}

@media (min-width:768px){

	.who-wrapa .col-sm-3{width:27%;}
	
	.who-wrapa .col-sm-4{width:27.81%;}

	.who-wrapa .col-sm-6{width: 47.3%;}

	.who-wrapa .col-sm-5{width: 44.6%;}

	.who-wrapa .col-sm-7{width: 52.1%;}

}




.brand-carousel-wrap{

	background-color: #2c3139;

}

.brand-carousel{

	max-width: 1510px;

	margin: 0px auto;

	height: 431px;

}

.brand-carousel>.slick-next,

.brand-carousel>.slick-prev {

	top: 0;bottom: 0;

	width: 44px;

	height: 100%;

	-webkit-transform: translate(0,0);

	-ms-transform: translate(0,0);

	transform: translate(0,0);

	background-size: 44px 431px;

	background-position: center top;

	background-repeat: no-repeat;

	z-index: 2;

	transition: left 0.3s,right 0.3s;

}

.brand-carousel>.slick-next:before,

.brand-carousel>.slick-prev:before{

	display: none;

}



.brand-carousel:hover>.slick-prev{

	left:-44px;

}



.brand-carousel:hover>.slick-next{

	right:-44px;

}

.brand-carousel>.slick-disabled{

	cursor: default;

	opacity: 0.2;

}

.brand-carousel .pinp-img-box{

	background-repeat:no-repeat;

	background-position: center top;

	background-size: cover;

	background-size: 302px 431px\9;

}

.brand-carousel .pinp-img-box::before{

	content: '';

	position: absolute;

	top: 0;left:0;bottom: 0;right:0;

	z-index: 0;

	width: 100%;

	height: 100%;

	overflow: hidden;

}

.brand-carousel .pinp-img-box:hover::before{background-color:rgba(31,101,205,.7);}


.uipower>img{

	margin-left: -20.5px;

}


.puiedu>img{

	margin-left: -21.5px;

}



.mhw72>img{

	margin-left: -31.5px;

}



.uiplus>img{

	margin-left: -46px;

}



.powerui>img{

	margin-left: -22.5px;

}



.vckbase>img{

	margin-left: -28.5px;

}



.dui>img{

	margin-left: -21.5px;

}

.brand-carousel .text-p{

	text-align: center;



}

.brand-carousel hr{

	position: absolute;

	left: 50%;

	width: 18px;

	border-top-width: 3px;

	display: inline-block;

	margin-left: -9px;

	margin-top: -18px;

}

.brand-carousel .pinp-img-box:hover hr{

	display: none;

}

.brand-carousel .brand-name{

	font-size: 16px;

}

.brand-carousel .brand-url{

	margin-top: 12px;

	font-size: 15px;

}

.brand-carousel .brand-intro{

	margin-top: 20px;

}

.brand-carousel .brand-link:focus{

	outline: none;

}

.text-p,.text-box{

	position: relative;

	z-index: 1;

}
.new_log{
	width: 45px;
	height: 20px;
	background-color:#FF0000;
	float: left;
	margin:20px 0px 0px 5px;
	padding: 0 2px 0px 6px;
	border:1px solid #FF0000;
	border-radius:3px;
	font-weight: bold;
	font-size: 13px;
	line-height: 17px;
	color: #fff !important;
}






.left,
.right {
	position: relative;
}


.width1230,
.width1400 {
	max-width: 1230px;
	padding: 0 15px;
	margin: 0 auto;
}

.width1400 {
	max-width: 1400px;
}


.product-title {
	padding-top: 2.8%;
	padding-bottom: 2%;
	text-align: center;
	font-size: 40px;
	font-weight: normal;
}

.product-desc {
	line-height: 30px;
	margin-bottom: 1.5%;
	font-size: 14px;
	color: #414141;
	text-align: center;
}

.pud-wrap {
	padding-top: 5.2%;
	padding-bottom: 6.25%;
}



.product-name {
	display: table;
	font-size: 22px;
	font-weight: bold;
	color: #3c3c3c;
	margin-top: 18%;
	margin-bottom: 5%;
}

.product-name>* {
	display: table-cell;
	vertical-align: middle;
}

.product-name>.product-logo {
	margin-right: 24px;
}

.product-intro {
	font-size: 20px;
	margin-bottom: 6.5%;
	color: #707070;
	line-height: 39px;
	padding-right: 10px;
	padding-left:18px;
	padding-top:16px;
}

.text-p {
	color: #a2adbe;
}

.pct-back,
.pct-front {
	position: absolute;
	width: 90%;
	height: 90%;
	z-index: 1;
	top: 6%;
	left: -4%;

}

.pct-back {
	z-index: 2;
	display: none;
}

.pct-front .img1 {
	opacity: 0;
}


.product-btn-wrap {
	overflow: hidden;
}

.product-btn-wrap>a {
	float: left;
	display: block;
	padding: 0.3em 1.75em;
	border: 1px solid #3969e5;
	margin-right: 10px;
	margin-bottom: 8px;
	font-size: 15px;
	color: #000;
	border-radius: 2em;
}

.product-btn-wrap.white>a {
	color: #fff;
	border-color: #fff;
}

.product-btn-wrap>a:hover {
	border-color: #3969e5;
	background-color: #3969e5;
	color: #fff;
}

.new_log {
	width: 45px;
	height: 20px;
	background-color: #FF0000;
	float: left;
	margin: 20px 0px 0px 5px;
	padding: 0 2px 0px 6px;
	border: 1px solid #FF0000;
	border-radius: 3px;
	font-weight: bold;
	font-size: 13px;
	line-height: 17px;
	color: #fff !important;
}

.psb .left:after {
    content: '';
    border-left: 1px dashed #e4e4e4;
    position: absolute;
    height: 100%;
    top: 0;
    right: -18px;
}