.part-banner {
	padding-top: 1.875rem;
	margin-bottom: 2rem;
}

.rounded-10 {
	border-radius: 0.625rem;
}

.rounded-20 {
	border-radius: 1.25rem;
}

.font-size-44 {
	font-size: 2.75rem;
}

#swiper-banner {
	--time: 0s;
}

#swiper-banner .swiper-slide {
	width: 1890px;
	padding: 0 1.875rem;
}

#swiper-banner .swiper-pagination-bullet {
	width: 3rem;
	height: 0.25rem;
	background-color: rgba(255,255,255,0.5);
	opacity: 1;
	border-radius: 4px;
	position: relative;
	transition: width .3s;
}

#swiper-banner .swiper-pagination-bullet-active {
	width: 7.5rem;
	background: rgba(255,255,255,0.5);
	background-image: linear-gradient(90deg,rgba(255,255,255,0.5) 50%,#FFFFFF 50%);
	background-size: 200%;
	background-position-x: 0%;
	animation: position 4s linear forwards;
}

#swiper-banner .swiper-pagination .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active {
	animation: position var(--time) linear forwards;
}

#swiper-banner .swiper-button-box {
	width: 100%;
	max-width: 1860px;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
}

#swiper-banner .swiper-button-next,#swiper-banner .swiper-button-prev {
	width: 4rem;
	height: 4rem;
	margin-top: -2rem;
	border-radius: 50%;
	background: none;
	opacity: 0;
	pointer-events: none;
	transition: all .3s;
}

#swiper-banner .swiper-button-next {
	right: 3rem;
}

#swiper-banner .swiper-button-prev {
	left: 3rem;
}

#swiper-banner .swiper-button-next svg circle,#swiper-banner .swiper-button-next svg path,#swiper-banner .swiper-button-prev:hover svg circle,#swiper-banner .swiper-button-prev:hover svg circle {
	transition: all .3s;
}

#swiper-banner .swiper-button-next:hover svg circle,#swiper-banner .swiper-button-prev:hover svg circle {
	fill: #FFFFFF;
}

#swiper-banner .swiper-button-next:hover svg path,#swiper-banner .swiper-button-prev:hover svg path {
	stroke: #000000;
}

#swiper-banner:hover .swiper-button-next,#swiper-banner:hover .swiper-button-prev {
	opacity: 1;
	pointer-events: initial;
}

#swiper-banner .swiper-slide {
	opacity: .8;
	transition: all .2s;
}

#swiper-banner .swiper-slide-active {
	opacity: 1;
}

.embed-responsive-banner::before {
	padding-top: calc(670 / 1860 * 100%);
}

.embed-responsive video {
	object-fit: cover;
	-o-object-fit: cover;
	object-position: center;
	-o-object-position: center;
}

.embed-responsive-banner .about-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.3);
}

.embed-responsive .tag {
	font-size: 1.2rem;
	line-height: 1.2;
	color: #FFFFFF;
	padding: 0.5rem;
	background: rgba(255,0,30,.9);
	border-radius: 0.625rem 0px;
	position: absolute;
	top: 0;
	left: 0;
}

.row-news .embed-responsive img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.hover-box .position-absolute {
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 1.5rem 2rem 2rem 2rem;
	height: 6.25rem;
}

.hover-box .position-absolute.color1 {
	background: linear-gradient(0,rgba(97,57,255,.8) 0%,rgba(97,57,255,0) 100%);
}

.hover-box .position-absolute.color2 {
	background: linear-gradient(0,rgba(89,94,211,.8) 0%,rgba(89,94,211,0) 100%);
}

.hover-box .know-more {
	opacity: 0;
	transition: all .2s;
}

.hover-box img {
	transition: all .3s;
}

.hover-box:hover img {
	transform: scale(1.05);
}

.hover-box:hover .know-more {
	opacity: 1;
}

.animation-box .text-container,.aigc-box .text-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -6.5%;
}

.aigc-box>img {
	object-fit: cover;
	object-position: center;
}

.row-animation {
	--width: 690px;
	--height: 430px;
}

.row-animation .col {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
	transition: all 400ms ease-out;
}

.row-animation .col::after {
	content: '';
	position: absolute;
	top: 0;
	left: 15px;
	width: calc(100% - 30px);
	height: 100%;
	pointer-events: none;
}

.row-animation .col.active {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}

.row-news a:hover .title {
	text-decoration: underline;
}

.row-animation .col img {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--width);
	height: var(--height);
	object-fit: cover;
	transition: all .4s;
}

.lottie-video svg {
	border-radius: 1.25rem;
}

#lottie-draw {
	background-image: url(https://www.wondershare.cn/images/images2022/home/draw-bg.png);
}

#lottie-document {
	background-image: url(https://www.wondershare.cn/images/images2022/home/document-bg.png);
}

#lottie-utility {
	background-image: url(https://www.wondershare.cn/images/images2022/home/utility-bg.png);
}

.row-animation .lottie-video {
	width: var(--width);
	height: var(--height);
}

.row-animation .lottie-content {
	width: var(--width);
	height: 160px;
	padding: 2rem;
	color: #FFFFFF;
	position: absolute;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(34px);
	transition: all .2s;
}

#lottie-draw ~ .lottie-content {
	background-image: url(https://www.wondershare.cn/images/images2022/home/draw-text-bg.png);
}

#lottie-document ~ .lottie-content {
	background-image: url(https://www.wondershare.cn/images/images2022/home/document-text-bg.png);
}

#lottie-utility ~ .lottie-content {
	background-image: url(https://www.wondershare.cn/images/images2022/home/utility-text-bg.png);
}

.row-animation .lottie-content .isopacity {
	opacity: 0;
	transition: all .2s;
}

.row-animation .col.active .lottie-content {
	transform: translateY(0);
}

.row-animation .col.active .lottie-content .isopacity {
	opacity: 1;
}

.slide-right {
	animation: slide-right 1s linear infinite both;
}

.embed-responsive-video-creativity::before {
	padding-top: calc(500 / 1410 * 100%);
}

.embed-responsive-video-creativity-mobile::before {
	padding-top: calc(430 / 690 * 100%);
}

.bg-position {
	background-position: right top;
}

.row-animation .col .ai-icon {
	width: 2.25rem;
	height: 1.5rem;
	position: relative;
	vertical-align: -2px;
}

.ai-video {
	height: 1.875rem
}

@keyframes position {
	0% {
		background-position-x: 0%;
	}

	100% {
		background-position-x: -100%;
	}
}

@keyframes slide-right {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}

	100% {
		transform: translateX(0);
	}
}

@media (min-width:2200px) {
	.mask {
		position: absolute;
		top: 0;
		width: 6.25vw;
		height: 100%;
		opacity: .6;
		z-index: 1;
	}

	.mask-right {
		right: 0;
		background: linear-gradient(270deg,#FFFFFF 0%,rgba(255,255,255,0) 100%);
	}

	.mask-left {
		left: 0;
		background: linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,0) 100%);
	}
}

@media (min-width:1920px) {
	#swiper-banner .swiper-slide {
		padding: 0 0.9375rem;
	}
}

@media (max-width:1599.98px) {
	.row-animation {
		--width: 570px;
		--height: 355px;
	}

	.row-animation .lottie-content {
		padding: 2rem 1rem;
	}
}

@media (max-width:1279.98px) {
	.font-size-44 {
		font-size: 1.8rem;
	}

	.part-banner .btn-white {
		padding: 0.75rem 2.2rem;
		font-size: 1rem;
	}

	.ws-slogan {
		height: 3.3rem;
	}

	.ws-slogan-en {
		height: 2.5rem;
	}

	#swiper-banner .swiper-button-next,#swiper-banner .swiper-button-prev {
		width: 3rem;
		height: 3rem;
		background-size: 3rem;
		opacity: 1;
		pointer-events: initial;
	}

	#swiper-banner .swiper-button-next svg,#swiper-banner .swiper-button-prev svg {
		width: 3rem;
		height: 3rem;
	}

	.text-container img {
		height: 1.5rem;
	}

	.animation-box .text-container .font-size-huge,.row-swiper .font-size-huge {
		font-size: 16px;
	}

	.row-animation .col {
		-ms-flex: 0 0 33.33333% !important;
		flex: 0 0 33.33333% !important;
		max-width: 33.33333% !important;
	}

	.row-animation .lottie-content .isopacity p {
		font-size: 12px;
	}

	.row-animation .col img {
		width: auto;
		height: auto;
		position: static;
	}

	.row-animation .col .ai-icon {
		width: 2rem;
		height: auto;
	}

	.hover-box .know-more {
		opacity: 1;
	}

	.hover-box .position-absolute {
		padding: 1.25rem 1.5rem;
		height: auto;
	}

	.hover-box .position-absolute .lead {
		font-size: 1.25rem;
	}

	.hover-box .position-absolute .font-size-large {
		font-size: 0.875rem;
	}

	.row-news .title {
		font-size: 1.1rem;
	}
}

@media (max-width:991.98px) {
	.rounded-20 {
		border-radius: 0.625rem;
	}

	.part-banner {
		padding-top: 15px;
		margin-bottom: 0;
	}

	#swiper-banner .swiper-slide {
		padding: 0 15px;
	}

	.row-animation,.row-news,.row-swiper .row {
		margin-left: -8px;
		margin-right: -8px;
	}

	.row-animation .col,.row-news .col,.row-swiper .row>* {
		padding-left: 8px;
		padding-right: 8px;
	}

	.logo {
		height: 40px;
	}

	.bg-position {
		background-position: 0 0;
	}
}

@media (max-width:767.98px) {
	.part-banner {
		padding-top: 0;
	}

	#swiper-banner .swiper-slide {
		padding: 0;
	}

	#swiper-banner .swiper-slide .rounded-20 {
		border-radius: 0;
	}

	.ws-slogan {
		height: 3.5rem;
	}

	.embed-responsive-banner::before {
		padding-top: calc(500 / 375 * 100%);
	}

	#swiper-banner .swiper-pagination-bullet {
		width: 10px !important;
		height: 10px !important;
		border-radius: 50% !important;
		border: 2px solid #FFFFFF;
		background-color: transparent !important;
	}

	#swiper-banner .swiper-pagination-bullet-active {
		background-color: #FFFFFF !important;
	}

	.row-animation .col {
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.hover-box .position-absolute {
		height: auto;
		padding: 1.2rem 1.3rem;
	}

	.hover-box .position-absolute .lead {
		font-size: 16px;
		line-height: 1;
	}

	.hover-box .position-absolute svg {
		width: 16px;
		height: 16px;
	}

	.animation-box .text-container,#swiper-ai .text-container {
		height: 80px;
		top: initial;
		bottom: 0;
		padding: 16px;
		left: 0;
	}

	.animation-box .font-size-extra {
		font-size: 1.25rem;
	}

	.slide-right {
		width: 16px;
		height: 16px;
	}

	.row-swiper {
		padding-bottom: 20px;
		margin-bottom: 24px;
	}

	.row-swiper .swiper-slide {
		padding: 0;
	}

	.row-swiper .swiper-pagination {
		line-height: 0;
		bottom: 0;
	}

	.row-swiper .swiper-pagination .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 5px;
		border: 1px solid #000000;
		background: #FFFFFF;
		opacity: 1;
	}

	.row-swiper .swiper-pagination .swiper-pagination-bullet-active {
		background: #000000;
		opacity: 1;
	}
}

@media (max-width:576px) {
	main,.font-size-small,.font-size-tiny,.hover-box .position-absolute .font-size-large {
		font-size: 14px;
	}

	.row-news .title {
		font-size: 16px;
	}

	.line-height-100 {
		line-height: 150%;
	}
}