@charset "utf-8";
/*通用banner文字*/
#siteWrapper{
	font-size: 16px;
}
.banner-text-cont{
	position: absolute;
	color: #fff;
	left: 60px;
	bottom: 10%;
	z-index: 39;
}
.banner-text-cont-black{
	color: #000;
}
.banner-text-cont .txt{
	font-size: 50px;
}
.banner-text-cont .txt2{
	font-size: 20px;
	padding-top: 5px;
	line-height: 40px;
	padding-bottom: 20px;
}
.divContent{
	width:90%;
	margin: 0 5% 60px 5%;
}
.divContent-bg{
	background-color: #fff;
}
.content_divTitle h1{
	font-size: 36px;
	padding: 40px 0 20px 0;
	color: #000;
}
.text_round_pic_rt{
	font-size: 0;
	overflow: hidden;
	width: 100%;
}
.text_round_pic_rt .min-div{
	margin: 0 10%;
}
.text_round_pic_rt img{
	width: 100%;
}
.text_round_pic_rt .low-light-title + img{
	margin-top: 0;
}
.text_round_pic_rt > img{
	margin-top: 30px;
}
.text_round_pic_rt .min-img{
	width: 32%;
}
.text_round_pic_rt .min-img + .min-img{
	margin-left: 2%;
}
.text_round_pic_rt .img_div{
	float: right;
	margin-left: 50px;
	width: 35%;
}
.text_round_pic_rt .img_div img{
	width: 100%;
}
.text_round_pic_rt p {
	color: #000;
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 32px;
}
.text_round_pic_rt p.low-light-title{
	margin-top: 50px;
}
.list_all {
	list-style: outside disc;
	display: block;
	font-size: 18px;
	padding-left: 25px;
	line-height: 28px;
	padding-bottom: 20px;
}
.tech_more, .tech_more_dot {
	text-align: left;
	font-size: 150%;
	margin-bottom: 20px;
	color: #fff;
}
.tech_more b {
	color: #000;
	text-align: center;
	font-size: 18px;
}
.tech_more>div {
	display: inline-block;
	margin-right: 40px;
	font-weight: bold;
	text-align: center;
}
.tech_more img {
	vertical-align: middle;
	width: 98px;
	display: block;
	margin: auto;
}
.tech_more p.text{
	color: #000;
	font-size: 18px;
	font-weight: 700;
}
.tech_more p.title{
	color: #000;
	font-size: 14px;
}
.banner_parent{
	position: relative;
	overflow: hidden;
}
.banner_parent-opacity{
	background-color: #000;
}
.banner_parent-opacity .banner img{
	opacity: .5;
}
.banner{
	font-size: 0;
}
.banner video{
	width: 100%;
}
/*index*/
.banner-text-cont-technology{
	position: absolute;
	color: #fff;
	z-index: 99;
	bottom: 0;
	left: 7.6%;
}
.banner-text-cont .txt{
	font-size: 50px;
	font-weight: 700;
}
.banner-text-cont .txt2{
	font-size: 16px;
	padding-top: 5px;
	line-height: 28px;
}
.list-cont{
	padding-bottom: 180px;
}
.itme-cont{
	max-width: 94%;
	margin: 30px auto 0 auto;
}
.solution-title{
	background: url(/resource/images/technology/li.png) left no-repeat;
	text-align: left;
	padding-left: 45px;
	margin-top: 40px;
	font-size: 28px;
	font-weight: 700;
	line-height: 150px;
}
.itme-cont ul{
	font-size: 0;
}
.itme-cont li{
	width: 33.3%;
	box-sizing: border-box;
	display: inline-block;
	padding-right: 2px;
	vertical-align: top;
}
.itme-cont li:nth-child(n + 4){
	margin-top: 50px;
}
.itme-cont li img{
	width: 100%;
}
.itme-cont li .item-text-cont{
	background: url(/resource/images/technology/li2.jpg) left 3px no-repeat;
	margin-top: 20px;
	padding-left: 16px;
}
.itme-cont li .item-text-cont p:first-child{
	font-size: 24px;
}
.itme-cont li .item-text-cont p:last-child{
	font-size: 16px;
	padding-top: 8px;
	line-height: 24px;
	width: 96%;
}

/*low-light*/
.banner-text-cont-lowLight{
	left: 60px;
	bottom: 10%;
}
/*stabilizer*/
.banner-text-cont-stabilizer{
	left: 4%;
	top: 25%;
}

/*stitching*/
.banner_parent .swiper-slide{
	height: 100%;
}
.banner_parent .swiper-slide .banner2{
	height: 100%;
	position: relative;
	left: 0;
	animation: banner2 5s linear infinite ;
	-moz-animation: banner2 5s linear infinite ;
	-webkit-animation: banner2 5s linear infinite ;
	-o-animation: banner2 5s linear infinite ;
}
@keyframes banner2
{
	0% {left: 0}
	100% {left: -106.719%;}
}
.banner_parent .swiper-slide .small-cont{
	position: absolute;
	left: 100px;
	bottom: 35%;
	/*height: 150px;
	width: 744px;*/
	height: 25%;
	width: 40%;
}
.banner_parent .swiper-slide .small-cont .clip-cont{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background-color: rgba(0,0,0,.3);
	box-shadow: 0 0 20px #000;
	overflow: hidden;
}
.banner_parent .swiper-slide .small-cont .clip-cont  .line{
	border-top: 2px solid #ffff00;
	position: absolute;
	/*top: 73px;*/
	top: calc(50% - 1px);
	width: 94%;
	left: 3%;
	z-index: 4;
}
.banner_parent .swiper-slide .small-cont .clip-cont .clip{
	position: absolute;
	top: 0;
	left: 0;
	/*height: 150px;*/
	height: 100%;
	overflow: hidden;
	animation: clip1 5s linear infinite ;
	-moz-animation: clip1 5s linear infinite ;
	-webkit-animation: clip1 5s linear infinite ;
	-o-animation: clip1 5s linear infinite ;
}
@keyframes clip1
{
	0% {width: 76px}
	100% {width: calc(100% - 4px)}
}
.banner_parent .swiper-slide .small-cont .clip-cont .clip .clip-rectangle{
	position: absolute;
	top: 0;
	right: 0;
	width: 4vw;
	z-index: 9;
	height: calc(100% - 4px);
	border: 2px solid rgba(0,0,0,.3);
	box-shadow: 0 0 5px #000;
	background-color: transparent;
}
.banner_parent .swiper-slide .small-cont .clip-cont .clip-arrow{
	position: absolute;
	left: 4.5vw;
	top: 33%;
	width: auto;
	height: 34%;
	z-index: 99;
	animation: clipArrow 5s linear infinite;
	-moz-animation: clipArrow 5s linear infinite;
	-webkit-animation: clipArrow 5s linear infinite;
	-o-animation: clipArrow 5s linear infinite;
}
@keyframes clipArrow
{
	0% {left: 102px}
	/*100% {left: 766px}*/
	100% {left: 100%;}
}
.banner_parent .swiper-slide .small-cont .clip-cont .clip img{
	/*height: 150px;*/
	height: 100%;
}
.banner_parent .swiper-slide .small-cont .clip-cont .clip-img{
	position: absolute;
	left: 0;
	z-index: 5;
}
.banner_parent .swiper-slide .banner2-text-cont{
	position: absolute;
	left: 100px;
	bottom: 30px;
	width: 48%;
	z-index: 99;
	color: #000;
}
.banner_parent .swiper-slide .banner2-text-cont .title{
	font-size: 48px;
	font-weight: 700;
	color: #000;
	line-height: 80px;
}
.banner_parent .swiper-slide .banner2-text-cont .text{
	font-size: 18px;
	color: #000;
	line-height: 40px;
}

.banner_parent .swiper-slide .banner3-text-cont{
	position: absolute;
	right: 80px;
	bottom: 120px;
	width: 32.8%;
	z-index: 99;
}
.banner_parent .swiper-slide .banner3-text-cont .title{
	font-size: 48px;
	font-weight: 700;
	color: #fff;
	line-height: 80px;
}
.banner_parent .swiper-slide .banner3-text-cont .text{
	font-size: 18px;
	color: #fff;
	line-height: 40px;
}
/*portrait*/
.banner_parent .beauty-slide{
	position: relative;
	overflow: hidden;
}
.banner_parent .beauty-slide img{
	/*height: 100%;*/
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.banner_parent .beauty-slide .banner1-1{
	z-index: 2;
	position: relative;
}
.banner_parent .beauty-slide .banner1-3{
	z-index: 2;
}
.banner_parent .beauty-slide .banner1-4{
	z-index: 2;
}
.banner_parent .beauty-slide .banner1-1{
	animation: banner1Img 2s linear infinite alternate;
	-moz-animation: banner1Img 2s linear infinite alternate;
	-webkit-animation: banner1Img 2s linear infinite alternate;
	-o-animation: banner1Img 2s linear infinite alternate;
}
.banner_parent .beauty-slide .banner1-4{
	opacity: 0;
	animation: banner1Img 2s 2s linear infinite alternate;
	-moz-animation: banner1Img 2s 2s linear infinite alternate;
	-webkit-animation: banner1Img 2s 2s linear infinite alternate;
	-o-animation: banner1Img 2s 2s linear infinite alternate;
}
@keyframes banner1Img
{
	0%{opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 1;}
}
.banner_parent .beauty-slide .banner1-text-cont{
	position: absolute;
	right: 80px;
	bottom: 30px;
	width: 32.8%;
	z-index: 99;
}
.banner_parent .beauty-slide .banner1-text-cont .title{
	font-size: 48px;
	font-weight: 700;
	color: #fff;
	line-height: 80px;
}
.banner_parent .beauty-slide .banner1-text-cont .text{
	font-size: 18px;
	color: #fff;
	line-height: 40px;
}
.banner_parent .banner img{
	width: 100%;
}
/*.banner_parent.dual-camera-banner_parent .banner img{
	width: auto;
}*/
/*beauty*/
.banner-text-cont-beauty{
	text-align: left;
	width: 32%;
	padding: 2%;
	margin: 0 2%;
	bottom: 30%;
	right: 0;
	position: absolute;
	color: #000;
}
.beauty-banner img{
	position: absolute;
	top: 0;
	left: 0;
}
.beauty-content-img-cont{
	width:25%;
	float:left;
	margin-right:2%;
}
/*face*/
.tech_more_dot {
	text-align: left;
	font-size: 14px;
	line-height: 32px;
	margin-bottom: 50px;
	color: #555;
}
.tech_more_dot > div {
	float: left;
	width: calc(47% - 5px);
	margin-right: 3%;
	margin-bottom: 2em;
	padding-left: 5px;
}
.tech_more_dot > div b{
	font-size: 16px;
}
.tech_more_dot img {
	float: left;
	margin-right: 20px;
	width: 196px;
	box-shadow: 0 0 5px #999;
}
.banner-text-cont-face{
	text-align: left;
	margin: 0 2%;
	top: 30%;
	left: 2%;
	position: absolute;
	color: #fff;
	font-size: 12px;
}
.banner-text-cont-face .txt{
	font-size: 50px;
}
.banner-text-cont-face .txt2{
	font-size: 16px;
	line-height: 32px;
}
/*object*/
.banner-text-cont-object{
	text-align: left;
	margin: 0 2%;
	top: 30%;
	left: 2%;
	position: absolute;
	color: #fff;
}
.banner-text-cont-object .txt{
	font-size: 50px;
}
.banner-text-cont-object .txt2{
	font-size: 16px;
	line-height: 32px;
}
/*scene*/
.banner-text-cont-scene{
	text-align: left;
	margin: 0 2%;
	top: 35%;
	left: 2%;
	position: absolute;
	color: #fff;
}
.banner-text-cont-scene .txt{
	font-size: 50px;
}
.banner-text-cont-scene .txt2{
	font-size: 16px;
	line-height: 32px;
}
/*gesture*/
.banner-text-cont-gesture{
	text-align: left;
	margin: 0 2%;
	top: 35%;
	left: 2%;
	position: absolute;
	color: #fff;
}
.banner-text-cont-gesture .txt{
	font-size: 50px;
}
.banner-text-cont-gesture .txt2{
	font-size: 16px;
	line-height: 32px;
}
/*motionSensing*/
.banner-text-cont-motionSensing{
	text-align: left;
	margin: 0 2%;
	top: 35%;
	left: 2%;
	position: absolute;
	color: #fff;
}
.banner-text-cont-motionSensing .txt{
	font-size: 50px;
}
.banner-text-cont-motionSensing .txt2{
	font-size: 16px;
	line-height: 32px;
}
/*faceAr*/
.banner-text-cont-faceAr{
	text-align: left;
	margin: 0 2%;
	top: 35%;
	left: 2%;
	position: absolute;
	color: #fff;
}
.banner-text-cont-faceAr .txt{
	font-size: 35px;
}
.banner-text-cont-faceAr .txt2{
	font-size: 16px;
	line-height: 32px;
}
/*sdAr*/
.banner_parent-3dAr{
	background-color: #000;
}
.banner-3dAr{
	opacity: .8;
}
.banner-text-cont-3dAr{
	text-align: left;
	margin: 0 2%;
	top: 35%;
	left: 2%;
	position: absolute;
	color: #fff;
}

/*Vrar*/
.banner-text-cont-Vrar{
	text-align: left;
	margin: 0 2%;
	top: 35%;
	left: 50%;
	position: absolute;
	color: #fff;
}

.tech_more .vrar-txt{
	color: #000;
	font-size: 16px;
	text-align: left;
	line-height: 28px;
	font-weight: 300;
}
/*3d-moding*/
.banner_parent-3d-moding{
	background-color: #000;
}
.banner_parent-3d-moding .banner{
	opacity:.8;
}
.banner-text-cont-3d-moding{
	text-align: left;
	margin: 0 2%;
	top: 20%;
	left: 2%;
	position: absolute;
	color: #fff;
}

.tech_more .vrar-txt{
	color: #000;
	font-size: 16px;
	text-align: left;
	line-height: 28px;
	font-weight: 300;
}
.tech_more_3d-moding > div{
	width: 250px;
	vertical-align: top;
	text-align: left;
	color: #555;
	font-size: 18px;
}
.tech_more_3d-moding > div img{
	width: calc(100% - 10px);
	box-shadow: 0 0 5px #ccc;
	margin-left: 5px;
}
/*single-cam*/
.banner-text-cont-single-cam{
	text-align: center;
	margin: 0 2%;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: #fff;
}
/*dual-cam*/
.banner-text-cont-dual-cam{
	text-align: center;
	margin: 0 2%;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: #fff;
}
/*depth-cam*/
.banner-text-cont-depth-cam{
	text-align: center;
	margin: 0 2%;
	top: 35%;
	left: 15%;
	position: absolute;
	color: #fff;
}

/*adas*/
.banner-text-cont-adas{
	text-align: left;
	margin: 0 2%;
	top: 25%;
	left: 2%;
	position: absolute;
	color: #fff;
}

/*around*/
.banner-text-cont-around{
	text-align: left;
	margin: 0 2%;
	top: 45%;
	left: 45%;
	position: absolute;
	color: #fff;
}

/*smartRetail*/
.banner-text-cont-smartRetail{
	text-align: center;
	margin: 0 2%;
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: #fff;
}

/*smartRefrigerator*/
.banner-text-cont-smartRefrigerator{
	text-align: left;
	margin: 0 2%;
	bottom: 10%;
	left: 2%;
	position: absolute;
	color: #fff;
}

/*center*/
.banner-text-cont-center{
	text-align: center;
	margin: 0 2%;
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: #fff;
}
/*banner-text-cont-360-degree*/
.banner-text-cont-360-degree{
	text-align: center;
	margin: 0 2%;
	top: 35%;
	left: 40%;
	position: absolute;
	color: #fff;
}
/*live*/
.banner-text-cont-live{
	text-align: left;
	margin: 0 2%;
	bottom: 30%;
	left: 2%;
	position: absolute;
	color: #fff;
}

/*multipleCam*/
.banner-text-cont-multipleCam{
	text-align: left;
	margin: 0 2%;
	top: 20%;
	left: 2%;
	position: absolute;
	color: #fff;
}

/*adasplus*/
.banner-text-cont-adasplus{
	text-align: left;
	margin: 0 2%;
	top: 70%;
	left: 51%;
	position: absolute;
	color: #fff;
}
.banner-text-cont-adasplus .txt{
	font-size: 35px;
}
.twentytwenty-item{
	margin-top: 30px;
}
/*stabilizer*/
.two-pic-list{
	font-size: 0;
}
.two-pic-list .two-pic-item{
	display: inline-block;
	width: 48%;
}
.two-pic-list .two-pic-item + .two-pic-item{
	margin-left: 4%;
}
/*optical_zoom*/
.banner-text-cont-left-top{
	top: 25%;
	left: 1%;
	right: auto;
	bottom: auto;
}
.banner-text-cont-left1-top{
	top: 25%;
	left: 10%;
	right: auto;
	bottom: auto;
}
.banner-text-cont-left1-top1{
	top: 15%;
	left: 10%;
	right: auto;
	bottom: auto;
}
.banner-text-right-top{
	top: 25%;
	right: 12%;
	left: auto;
	bottom: auto;
	text-align: right;
	color: #000;
}
.banner-text-right1-top{
	top: 25%;
	right: 12%;
	left: auto;
	bottom: auto;
	color: #000;
	text-align: left;
}
.banner-text-cont-top-center{
	text-align: center;
	margin: 0 2%;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: #fff;
}

@media screen and (max-width:1550px) {
	.banner-text-cont .txt2{
		font-size: 12px;
	}
}
@media screen and (max-width:1400px){
	.tech_more_dot > div{
		float: none;
		margin-right: 0;
		width: 100%;
		overflow: hidden;
	}
	.swiper-pagination-behavior .pagination-item .text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}@media screen and (max-width:1200px){
	.itme-cont li{
		width: 100%;
		box-sizing: border-box;
		display: inline-block;
		padding-right: 0;
		vertical-align: top;
	}
	.itme-cont li + li{
		margin-top: 50px;
	}
	.divContent{
		width: 94%;
		margin: 0 auto 60px auto
	}
	.swiper-pagination-behavior .pagination-item .text,
	.swiper-pagination-car .pagination-item .text{
		display: none;
	}
	.swiper-pagination-behavior,
	.swiper-pagination-car{
		float: none;
		width: 100%;
		margin-right: 0;
	}
	.swiper-pagination-behavior .pagination-item,
	.swiper-pagination-car .pagination-item{
		margin-right: 40px;
		display: inline-block;
	}
	.swiper-container-behavior,
	.swiper-container-car{
		float: none;
		width: 100%;
	}
	.swiper-container-behavior p,
	.swiper-container-car p{
		display: none;
	}
	.swiper-pagination-behavior .pagination-item .title,
	.swiper-pagination-car .pagination-item .title{
		font-size: 18px;
	}
	.swiper-pagination-behavior .pagination-item.active:before,
	.swiper-pagination-car .pagination-item.active:before{
		top: 8px;
	}
}
@media screen and (max-width:1024px){
	.banner-text-cont .txt2{
		display: none;
	}
}
@media screen and (max-width:960px){
	.banner-text-cont-adasplus .txt,
	.banner-text-cont-identification .txt{
		font-size: 24px;
		line-height: 30px;
		background-size: auto 30px;
		padding-left: 30px;
	}
	.banner-text-cont{
		width: 100%;
		margin: 0;
		left: 4%;
		bottom: 5%;
		top: inherit;
		text-align: left;
	}
	.banner-text-cont-dual-cam,
	.banner-text-cont-single-cam{
		transform: translateX(0);
	}
	.banner-text-cont-single-cam{
		top: 50%;
	}
	.swiper-pagination-behavior .pagination-item .title,
	.swiper-pagination-car .pagination-item .title{
		font-size: 14px;
	}
	.swiper-pagination-behavior .pagination-item.active:before,
	.swiper-pagination-car .pagination-item.active:before{
		top: 6px;
	}
	.banner-text-cont .txt{
		font-size: 30px;
		padding-left: 30px;
	}
	.banner-text-cont-smartRetail{
		transform: translateX(0);
	}
	.banner-text-cont-center{
		transform: translateX(0);
	}
	.banner-text-cont-top-center{
		transform: translateX(0);
	}
}
@media screen and (max-width:650px){
	.banner-text-cont-adasplus .txt,
	.banner-text-cont-identification .txt{
		font-size: 18px;
		line-height: 20px;
		background-size: auto 20px;
		padding-left: 20px;
	}
	.text_round_pic_rt .img_div{
		margin-left: 0;
		display: none;
		/*width: 100%;*/
	}
	.solution-title{
		line-height: 60px;
		font-size: 18px;
	}
	.itme-cont li .item-text-cont p:first-child{
		font-size: 16px;
	}
	.swiper-pagination-behavior .pagination-item,
	.swiper-pagination-car .pagination-item{
		margin-top: 0;
	}
	.swiper-pagination-behavior, .swiper-pagination-car{
		margin-top: 25px;
	}
	.swiper-pagination-behavior .pagination-item, .swiper-pagination-car .pagination-item{
		margin-left: 20px;
		margin-right: 0;
	}
	.swiper-pagination-behavior .pagination-item.active:before {
		border-top: none;
		border-bottom: none;
		border-left: none;
	}
	.swiper-pagination-car .pagination-item.active:before{
		border-top: none;
		border-bottom: none;
		border-left: none;
	}
	.banner-text-cont .txt{
		font-size: 20px;
	}
	.banner_parent .swiper-slide .small-cont .clip-cont .clip .clip-rectangle{
		width: 25px;
	}
	.content_divTitle h1{
		font-size: 18px;
		padding: 15px 0 10px 0;
	}
	.list_all{
		font-size: 16px;
	}
	.text_round_pic_rt p.text{
		margin-bottom: 0;
	}
	.tech_more b{
		font-size: 14px;
	}
	.tech_more > p{
		line-height: 30px;
		text-align: left;
	}
	.tech_more{
		text-align: center;
	}
	.tech_more>div {
		 margin-right: 0;
	}
	.tech_more_3d-moding > div{
		width: 100%;
	}
	.banner-text-cont-around{
		left: 2%;
	}
	.beauty-content-img-cont{
		width:100%;
		float:none;
		margin-top: 20px;
	}
	.text_round_pic_rt p.low-light-title {
		margin-top: 0;
	}
	.text_round_pic_rt p.low-light-title.mobile-margin{
		margin-top: 20px;
	}
	.text_round_pic_rt .min-div{
		margin: 0;
	}
}
@media screen and (max-width:548px) {
	.banner_parent .banner {
		height: 200px;
		text-align: center;
	}

	.banner_parent .banner img {
		height: 100%;
		width: auto;
		margin: 0 -100%;
	}
	.banner_parent .banner .dual-img{
		margin: auto;
		width: 100%;
		height: 100%;
	}
	.banner_parent .banner img.right{
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
	}
	.banner_parent .banner img.left{
		margin: 0;
	}
	.banner_parent .banner .twentytwenty-container{
		height: 200px;
	}
	.banner_parent .banner .twentytwenty-container img{
		width: auto;
		max-width: none;
		margin: 0;
	}
	.twentytwenty-before-label:before, .twentytwenty-after-label:before{
		line-height: 16px;
		padding: 0 2px;
	}
	.banner video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media screen and (max-width:400px){
	.banner-text-cont-adasplus .txt,
	.banner-text-cont-identification .txt{
		font-size: 14px;
		line-height: 18px;
		background-size: auto 18px;
		padding-left: 0;
		background: none;
	}
	.banner-text-cont .txt{
		font-size: 16px;
	}
}