/* banner开始 */
.index-banner {
	height: 100vh;
	width: 100%;
	position: relative;
}

.index-banner .banner {
	width: 100%;
	height: 100%;

}

.index-banner .banner img,
.index-banner .banner video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	position: relative;
}

.index-banner .banner .mb-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
	top: 0;
	left: 0;
}

.index-banner .wp-cont {
	padding-top: 30vh;
	height: 100%;
}

.index-banner .wp-cont h1 {
	margin-bottom: 0.14rem;
	color: #fff;
	font-weight: normal;
}

.index-banner .wp-cont h3 {
	margin-bottom: 0.1rem;
	color:#fff;
	/* opacity: 0; */
}

.index-banner .wp-cont p { color:#fff }

.index-banner .shubiao {
	position: absolute;
	right: calc(var(--wpPaddingNum) + var(--wpContPaddingNum));
	bottom: 5vh;
	z-index: 9;
}


.index-banner .swiper-pagination {
	text-align: left;
	padding-left: calc(var(--wpPaddingNum) + var(--wpContPaddingNum));
	/* display: flex; */
	bottom: 6vh;
}

.draw-h {
	display: block;
	border-radius: 50%;
	text-align: center;
	position: relative
}

.draw-h:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid rgba(100%, 100%, 100%, .5);
	border-radius: 50%
}

.index-banner .dots {
	width: 26px !important;
	height: 26px !important;
	display: inline-block;
	background: transparent;
	opacity: 1;
	margin-right: 13px;
	cursor: pointer;
}

.index-banner .dots::before {
	content: '';
	display: block;
	border: 0;
	background: #fff;
	transform: scale(.4);
}

.index-banner .dots.on::before {
	background: var(--themeColor);
}

.index-banner .dots.on svg.drawcircle circle {
	animation: svgrotate 8.2s forwards;
}

/* banner结束 */



/* 数字滚动开始 */
.s-shuju {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 9;
	box-shadow: 0 5px 12px 4px rgba(130, 130, 130, .1);
	padding: 0.12rem 0;
}

.s-shuju ul {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(4, 1fr);
	height: 100%;
}

.s-shuju ul li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.s-shuju ul li::before {
	content: '';
	position: absolute;
	right: 0;
	width: 1px;
	height: 60%;
	background: #eeeeee;
	top: 50%;
	transform: translate(0, -50%);
}

.s-shuju ul li>div {
	display: flex;
	align-items: flex-end;
}

.s-shuju ul li:last-child::before {
	display: none;
}

.s-shuju ul li span {
	font-size: var(--f60);
	/* line-height: 1.125; */
	color: #343333;
	font-family: 'num-font';
	margin-right: 0.06rem;
}

.s-shuju ul li div em {
	color: #343333;
	font-size: var(--f26);
	line-height: 2.0;
}

.s-shuju ul li p {
	color: #828282;
	font-size: var(--f19);
	line-height: 1.5;
	letter-spacing: .02rem;
}

/* 数字滚动结束 */



/* 您将拥有的SERVICES开始 */
.s-zhenghe {
	margin-top: 0.3rem;
	display: flex;
	justify-content: center;
}

.s-zhenghe li .s-zhtitle {
	height: 0.875rem;
	background: #c7000b;
	position: relative;
	margin-top: 0.125rem;
	display: block;
}

.s-zhenghe li .s-zhtitle .s-zh1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	padding-top: 0.15rem;
	position: relative;
	z-index: 0;
	transition: none!important;
}

.s-zhenghe li .s-zhtitle .s-zh2 {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	/*gap: 0.1875rem;*/
	top: 0;
	left: 0;
	background: #151515;
	transition: none!important;
}

.s-zhenghe li.on .s-zhtitle {
	height: 1rem;
	margin-top: 0;
}

.s-zhenghe li.on .s-zhtitle .s-zh1 {
	display: none;
}

.s-zhenghe li.on .s-zhtitle .s-zh2 {
	display: flex;
	width: 100%;
}

.s-zhenghe li .s-zhtitle .s-zh2 h5 {
	font-size: var(--f30);
	color: #fff;
	line-height: 1.5;
	text-wrap: nowrap;
}

.s-zhenghe li .s-zhtitle .s-zh2 img {
	max-height: 0.78rem;
	width: auto;
}


.s-zhenghe li .s-zhtitle .s-zh1 h5 {
	font-size: var(--f26);
	line-height: 1.5;
}

.s-zhenghe li .s-zhtitle .s-zh1 p,
.s-zhenghe li .s-zhtitle .s-zh2 p {
	font-size: var(--f16);
	line-height: 1.5;
	color: #fff;
	text-wrap: nowrap;
}

.s-zhenghe li .s-zhtitle .s-zh1 img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
	max-height: 0.6rem;
	width: auto;
}

.s-zhenghe li {
	width: 18.4%;
	transition: none !important;
	overflow: unset!important;
	/* transition: all .3s cubic-bezier(.4, 0, .2, 1); */
}

.s-zhenghe li:first-child .s-zhtitle {
	border-radius: .0625rem 0 0 0;
}

.s-zhenghe li:first-child .s-zhnr {
	border-radius: 0 0 0 .0625rem;
}

.s-zhenghe li:last-child .s-zhtitle {
	border-radius: 0 .0625rem 0 0;
}

.s-zhenghe li:last-child .s-zhnr {
	border-radius: 0 0 .0625rem 0;
}

.s-zhenghe li.on {
	/* width: 27.4%; */
	border-radius: .0625rem;
}

.s-zhenghe li.on .s-zhtitle {
	border-radius: .0625rem .0625rem 0 0;
	overflow: hidden;
}

.s-zhenghe li:nth-child(odd) .s-zhnr {
	background: #e8e8e8;
}

.s-zhenghe li:nth-child(even) .s-zhnr {
	background: #eeeeee;
}

.s-zhenghe li .s-zhnr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.3125rem;
	height: 100%;
}

.s-zhenghe li.on .s-zhnr {
	display: none;
}

.s-zhenghe li .s-zhnrs .swiper {
	width: 2.3rem;
	/* width: 100%; */
	margin-top: 0.1rem;
	padding-bottom: 0.18rem;
	transition: none !important;
    /* max-height: .89rem; */
    height: 1.3rem;
    overflow: hidden;
}

.s-zhenghe li .s-zhnrs .swiper .swiper-wrapper {
	/* transition: none!important; */
}

.s-zhenghe li .s-zhnrs .swiper .swiper-wrapper * {
	/* transition: none !important; */
}

.s-zhenghe li .s-zhnrs .swiper .swiper-pagination-bullet {
	width: 11px;
	height: 11px;
	border: 2px solid #d6d6d6;
	border-radius: 50%;
	background: transparent;
	opacity: 1;
}

.s-zhenghe li .s-zhnrs .swiper .swiper-pagination-bullet-active {
	border: 2px solid #c7000b;
}

.s-zhenghe li .s-zhnrs .swiper-slide {
	/* display: grid; */
	/* gap: 0.15rem; */
}

.s-zhenghe li .s-zhnrs .swiper-slide a {
	background: #f9f9f9;
	display: flex;
	align-items: center;
	justify-content: center;
	/* height: 0.25rem; */
	min-height: 0.25rem;
    height: 100%;
	color: #2b2b2b;
	font-size: 0.09rem;
	line-height: 1.5;
	text-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 0.045rem;
    flex-direction:column;
    transition: all .8s;
}
.s-zhenghe li .s-zhnrs .swiper-slide a img{
    width:auto;
    height: 32%;
    filter: var(--imgBlack);
    margin-bottom: 0.04rem;
}

.s-zhenghe li .s-zhnrs .swiper-slide a:hover {
	background: #d9d9d9;
	color: #070707;
	
}
/*
.s-zhenghe li .s-zhnrs .swiper-slide a:hover img{
    filter: var(--imgWhite);
}*/

.s-zhenghe li .s-zhnr a {
	color: #818181;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--f17);
	line-height: 1.5;
	width: 100%;
}

.s-zhenghe li .s-zhnr a i {
	color: #c4c4c4;
	font-size: 0.2rem;
}

.s-zhenghe li .s-zhnrs {
	display: none;
}

.s-zhenghe li .s-zhbox{
	transition: none;
}

.s-zhenghe li.on .s-zhbox {
	box-shadow: 0 5px 12px 4px rgba(152, 152, 152, .26);
	border-radius: 0 0 .0625rem .0625rem;
}

.s-zhenghe li.on .s-zhnrs {
	display: block;
	padding: 0.175rem;
	background: #fff;
	height: calc(100% + 1rem);
	width: 100%;
	border-radius: 0 0 .0625rem .0625rem;
	overflow: hidden;
    min-height:2.05rem;
}

.s-zhenghe li .s-zhbox {
	position: relative;
}

.s-zhenghe li .s-zhnrs > p {
	color: #8c8c8c;
	font-size: var(--f16);
	line-height: 2;
	text-align: left;
	height: 3.8em;
	display: none;
	/* width: 100%; */
	width: 2.15rem;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.s-zhenghe li.on .s-zhnrs p {
	display: -webkit-box;
}

/* 您将拥有的SERVICES结束 */





/* 我们创造的CASES开始 */
/* 内容区 */
.s-uspro .wzkind-slide-for {
	margin-top: 0.25rem;
}

/* .s-uspro .wzkind-slide-for ul {
 *     display: grid;
 *     grid-template-columns: repeat(4, 1fr);
 * }
 *
 * .s-uspro .wzkind-slide-for ul li .img {
 *     aspect-ratio: 480/330;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li .img img {
 *     transform: scale(1.05);
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a:hover .img img {
 *     transform: scale(1.1);
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a {
 *     position: relative;
 *     overflow: hidden;
 *     z-index: 0;
 *     display: block;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a>img {
 *     position: absolute;
 *     left: 0.2rem;
 *     top: 0.3125rem;
 *     z-index: 2;
 *     width: auto;
 *     height: .3rem;
 *     object-fit: contain;
 *     max-width: 100%;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hover-bg {
 *     position: absolute;
 *     height: 1.21rem;
 *     bottom: -100%;
 *     z-index: 1;
 *     width: 100%;
 *     background: linear-gradient(to top, rgba(200, 10, 20, 0.8), rgba(200, 10, 20, 0));
 *     transition: all .5s;
 * } */

/* .s-uspro .wzkind-slide-for ul li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.2125rem;
    background: url(../images/hongmb.png)no-repeat;
    background-size: cover;
    left: 0;
    bottom: -100%;
    transition: all .5s;
    z-index: 1;
}

.s-uspro .wzkind-slide-for ul li a:hover::before {
    bottom: 0;
 }*/
/* .s-uspro .wzkind-slide-for ul li a:hover .hover-bg {
 *     bottom: 0;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hbjs {
 *     position: absolute;
 *     left: 0;
 *     bottom: 0;
 *     padding: 0.175rem 0.2rem;
 *     z-index: 2;
 *     width: 100%;
 *     opacity: 0;
 *     transition: all .5s;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hbjs>div {
 *     display: flex;
 *     align-items: center;
 *     justify-content: space-between;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hbjs>div div i {
 *     font-size: 1.6em;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hbjs>div div {
 *     display: flex;
 *     align-items: center;
 *     gap: 10px;
 *     color: #fff;
 *     font-size: var(--f14);
 *     line-height: 1.5;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hbjs p {
 *     font-size: var(--f18);
 *     color: #fff;
 *     line-height: 1.5;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a .hbjs h5 {
 *     font-size: var(--f25);
 *     line-height: 1.5;
 *     color: #fff;
 * }
 *
 * .s-uspro .wzkind-slide-for ul li a:hover .hbjs {
 *     opacity: 1;
 * } */

/* 我们创造的CASES结束 */





/* 网站建设与数字开发开始 */
.s-kaifa {
	overflow: hidden;
	height: 3rem;
}

.s-kaifa .bg {
	background: url(../images/s-kaifabg.jpg)center no-repeat;
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	animation: bg-zoom 10s infinite;
}

@keyframes bg-zoom {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}

.s-kaifa .wp-cont {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.1rem calc(var(--wpContPaddingNum) + 0.2rem) 0;
}

.s-kaifa .wp-cont>img {
	height: 100%;
	object-fit: contain;
	width: auto;
}

.s-kaifa .wp-cont>div {
	width: 52%;
}

.s-kaifa .wp-cont>div h5 {
	color: #fff;
	font-size: var(--f39);
	line-height: 1.5;
	margin-bottom: .075rem;
}

.s-kaifa .wp-cont>div h6 {
	color: #fff;
	font-size: var(--f20);
	line-height: 1.5;
}

.s-kaifa .wp-cont>div i {
	display: block;
	width: 0.35rem;
	height: 0.02rem;
	background: #fff;
	margin: 0.1rem 0 0.3125rem;
}

.s-kaifa .wp-cont>div p {
	font-size: var(--f18);
	line-height: 2em;
	color: #fff;
	margin-bottom: 0.2812rem;
}

.s-kaifa .wp-cont>div div {
	display: flex;
	align-items: center;
	gap: 0.2875rem;
}

.s-kaifa .wp-cont>div div a {
	border: 2px solid #fff;
	border-radius: 0.1875rem;
	transition: all .5s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: var(--f20);
	line-height: 1.5;
	width: 1.65rem;
	height: 0.35rem;
}

.s-kaifa .wp-cont>div div a:last-child {
	color: #0c0c0c;
	background: #fff;
}

.s-kaifa .wp-cont>div div a:hover {
	/* color: #0c0c0c;
	 * background: #fff; */
    font-size: var(--f22);
}

/* 网站建设与数字开发结束 */