@charset "utf-8";
.banner-box{
	background: linear-gradient(90deg, #ebf5ff, #d2e2fc, #9fd2ff);
	color: #333;
}
.banner-box .info h1{
	padding-bottom: 20px;
}
.btn-box .btn{
	margin-right: 15px;
	border-radius: 4px;
	font-size: 18px;
}
.extra-floor{
	background: linear-gradient(90deg, #9fd2ff, #d2e2fc, #ebf5ff);
	color: #666;
	font-size: 13px;
	padding: 15px 0;
}
.extra-floor .info{
	text-align: center;
	padding: 0 15px;
}
.extra-floor .info .title{
	font-size: 16px;
	color: #333;
	margin-bottom: 10px;
	font-weight: 500;
}
.extra-floor .info.border-aside{
	border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.extra-floor .info .img-ic img{
	width: 24px;
	height: auto;
	margin-top: 5px;
}
.sys-items >div{
	position: relative;
	border-radius: 10px;
	box-shadow: 0px 25px 15.5px -15px #66bbf930;
	padding: 15px 15px 15px 80px;
	text-align: left;
	font-size: 14px;
	background-color: #f1f9ff;
}
.sys-items .pic{
	position: absolute;
	left: 15px;
    top: 15px;
}
.sys-items .pic img{
	width: 50px;
	height: auto;
}
.sys-items .tit{
	font-size: 16px;
	font-weight: 500;
}
.sys-items .tit img{
	width:18px;
	height: auto;
}
.sys-items >div:hover,
.sys-items >div a:hover{
	background-color: #97c8f6;
	color: #333;
	cursor: pointer;
}
.mySwiper{
	position: relative;
	overflow: hidden;
	margin-top: 40px;
	padding: 0 30px 60px 30px;
}
.mySwiper .swiper {
  width: 100%;
  height: 100%;
}

.mySwiper .swiper-slide {
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 2px solid transparent;
}

.mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mySwiper .item{
	padding: 20px 25px;
	overflow: hidden;
	text-align: left;
	font-size: 14px;
	color: #666;
}
.mySwiper .item .img-link .img img{
	width: 50px;
	height: auto;
}
.mySwiper .item .img-link a img{
	width: 30px;
	height: auto;
}
.mySwiper .item .tit{
	font-size: 18px;
	color: #333;
	font-weight: 600;
	padding: 15px 0;
}
.mySwiper .swiper-slide:hover{
	box-shadow: 0px 25px 15.5px -15px #66bbf9a8;
    border: 2px solid #3ca2ff;
}
.mySwiper .item .info a{
	color: #00aee6;
}
.se-info .text{
	font-size: 34px;
	font-weight:500;
	margin-top: 10px;
}
.se-info .text.blue{
	color: #0679e4;
	font-weight: 600;
}
.se-info .text span{
	display: block;
	font-size: 14px;
	font-weight: normal;
	color: #666;
}
.review-box {
	overflow: hidden;
	padding: 60px 10px 90px
}

.review-mySwiper {
	width: 100%;
	height: 100%;
	position: relative
}

.review-mySwiper .swiper-slide {
	background-color: #fff;
	font-size: 18px;
	padding: 35px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	position: relative
}

.review-mySwiper .swiper-slide::before {
	width: 71px;
	height: 56px;
	position: absolute;
	content: "";
	right: 50px;
	top: 60px;
	z-index: 0;
	background: url("../img/product-new/screen-record-quto.png") no-repeat
}

.review-mySwiper .swiper-slide>div {
	position: relative
}

.review-mySwiper .swiper-pagination {
	text-align: left
}

.review-mySwiper.swiper-container-horizontal>.swiper-pagination-bullets {
	bottom: -50px
}

.review-mySwiper .swiper-pagination-bullet {
	height: 4px;
	width: 15px;
	border-radius: 2px
}

.review-mySwiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #00aee6!important
}

.review-boximg img {
	width: 530px;
	height: auto
}
.review-mySwiper .link-box{
	font-size: 14px;
}
.swiper-product .item .name-link a{
	font-size: 22px;
	color: #333;
	font-weight: 500;
}
.swiper-product .item .name-link .tips{
    background: linear-gradient(53.57deg, #039ffd 8.35%, #8951ff 102.42%);
    box-shadow: 0px 8.2549px 16px rgba(0, 0, 0, 0.04);
    border-radius: 8px 8px 8px 0px;
    color: #fff;
    padding: 0 5px;
    height: 22px;
    margin-left: 5px;
}
.swiper-product .item .des{
	font-size: 16px;
	padding: 10px 0 15px 0;
}
.swiper-product .item .pic{
	margin-top: 20px;
}
.swiper-product .item .pic img{
	border-radius: 10px;
	width: auto;
	height: auto;
}
.swiper-product .item .btn{
	width: 48%;
    font-weight: 400;
    padding: 5px;
}
.recommend-pro >div{
	background-color: #fff;
	border-radius: 10px;
	margin-top: 20px;
	overflow: hidden;
}
.recommend-pro .img{
	height: 240px;
	overflow: hidden;
}
.recommend-pro .name{
	padding: 15px 40px 15px 15px;
	font-size: 18px;
	font-weight: 500;
	position: relative;
}
.recommend-pro .name::after{
	content: "";
	background: url(../img/icon/arrow-up-circle-line.png) no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 15px;
	top:18px;
}
.floor-dolor{
	background: linear-gradient(90deg, #9fd2ff, #d2e2fc, #ebf5ff);
	border-radius: 20px;
	padding: 50px;
}
.tech-item >div{
	border: 1px solid #b9d1f3;
	border-radius: 10px;
	overflow: hidden;
	padding: 25px 40px;
	box-shadow: 0px 25px 15.5px -15px #66bbf9a8;
}
.tech-item .img img{
	width: 60px;
	height: auto;
}
.tech-item .tit{
	margin-top: 15px;
	
}

@media (max-width: 769px) {
	.extra-floor .info{
		padding: 10px 0;
	}
	.sys-items >div{
		margin: 10px 0;
	}
	.se-info .text{
		font-size: 28px;
	}
	.tech-item >div{
		margin: 10px 0;
	}
}