body,
html {
	width: 100%;
	height: 100%;
}

.right-bar {
	position: fixed;
	right: .15rem;
	top: 1.3rem;
	z-index: 5;
	width: 2.03rem;
	height: 7.31rem;
	background: url(../../img/home/nav-bar.png) no-repeat center;
	background-size: 100%;
}

.right-bar .close {
	position: absolute;
	left: .23rem;
	top: 2.64rem;
	width: .3rem;
	height: 1.13rem;
	cursor: pointer;
}

.right-bar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.right-bar .offical-qr {
	position: absolute;
	left: .83rem;
	top: .43rem;
	width: .9rem;
	height: .9rem;
}

.right-bar .dy-qr {
	position: absolute;
	left: .83rem;
	top: 1.66rem;
	width: .9rem;
	height: .9rem;
}

.right-bar .dyteam-qr {
	position: absolute;
	left: .83rem;
	top: 2.9rem;
	width: .9rem;
	height: .9rem;
}

.right-bar .club-qr {
	position: absolute;
	left: .83rem;
	top: 4.14rem;
	width: .9rem;
	height: .9rem;
}

.right-bar .taptap-qr {
	position: absolute;
	left: .83rem;
	top: 5.37rem;
	width: .9rem;
	height: .9rem;
}

.right-bar-close {
	display: none;
	position: fixed;
	right: .15rem;
	top: 3.95rem;
	z-index: 5;
	width: .29rem;
	height: 1.11rem;
	background: url(../../img/home/nav-bar-close.png) no-repeat center;
	background-size: 100%;
	cursor: pointer;
}

.s1 {
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../../img/home/bg1.png) no-repeat center top;
	background-size: cover;
}

.inner {
	position: relative;
	margin: 0 auto;
}

.s1 .inner {
	width: 9rem;
	height: 10.12rem;
}

.tip-16 {
	position: absolute;
	left: .5rem;
	bottom: 1rem;
	width: .83rem;
	height: 1.07rem;
	background: url(../../img/home/tip.png) no-repeat center;
	background-size: 100%;
	cursor: pointer;
}

.scroll-tip {
	position: fixed;
	left: 50%;
	bottom: .1rem;
	z-index: 10;
	width: 1.5rem;
	height: .58rem;
	background: url(../../img/home/scroll.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%);
}

.scroll-tip .next {
	position: absolute;
	right: .18rem;
	top: .16rem;
	width: .2rem;
	height: .2rem;
	cursor: pointer;
}

.scroll-tip .prev {
	position: absolute;
	left: .2rem;
	top: .16rem;
	width: .2rem;
	height: .2rem;
	cursor: pointer;
}

.s1 .gongce {
	position: absolute;
	left: 50%;
	bottom: .85rem;
	width: 6.5rem;
	height: 1.78rem;
	background: url(../../img/home/gongce.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%);
}

.s1 .download {
	position: absolute;
	left: 50%;
	bottom: .85rem;
	width: 4.74rem;
	height: 1.78rem;
	background: url(../../img/home/download.png) no-repeat center;
	background-size: 100%;
	transform: translateX(-50%);
}

.s1 .download a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.s1 .dl-qr {
	position: absolute;
	left: .73rem;
	top: .36rem;
	width: 1.25rem;
	height: 1.25rem;
	background: url(../../img/home/dl-qr.png) no-repeat center;
	background-size: 100%;
}

.s1 .dl-ios {
	position: absolute;
	left: 2.05rem;
	top: .25rem;
	width: 2.51rem;
	height: .77rem;
	background: url(../../img/home/dl-ios.png) no-repeat center;
	background-size: 100%;
	transition: all .3s;
}

.s1 .dl-ios:hover {
	background: url(../../img/home/dl-ios-hover.png) no-repeat center;
	background-size: 100%;
}

.s1 .dl-android {
	position: absolute;
	left: 2.05rem;
	bottom: .05rem;
	width: 2.51rem;
	height: .77rem;
	background: url(../../img/home/dl-android.png) no-repeat center;
	background-size: 100%;
	transition: all .3s;
}

.s1 .dl-android:hover {
	background: url(../../img/home/dl-android-hover.png) no-repeat center;
	background-size: 100%;
}

.s1 .bar-info a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.s1 .open-text {
	position: absolute;
	right: 2.45rem;
	top: .4rem;
	width: 1.93rem;
	height: .79rem;
	background: url(../../img/home/open.png) no-repeat center;
	background-size: 100%;
}

.s1 .res-btn {
	position: absolute;
	left: .2rem;
	bottom: .15rem;
	width: 1.96rem;
	height: .65rem;
	background: url(../../img/home/resbtn.png) no-repeat center;
	background-size: 100%;
	cursor: pointer;
	transition: all .3s;
}

.s1 .res-btn:hover {
	background: url(../../img/home/resbtn-hover.png) no-repeat center;
	background-size: 100%;
}

.s1 .border {
	position: absolute;
	right: .24rem;
	top: .4rem;
	width: 2.22rem;
	height: 1.36rem;
	background: url(../../img/home/border.png) no-repeat center;
	background-size: 100%;
}

.s2 {
	width: 100%;
	background: url(../../img/home/bg2.png) no-repeat center top;
	background-size: cover;
}

.s2 .inner {
	position: relative;
	border-top: 1px solid transparent;
	width: 14rem;
	height: 10.13rem;
}

.s2 .new-title {
	margin-top: 1.1rem;
	width: 3.29rem;
	height: 1.24rem;
	background: url(../../img/home/news-title.png) no-repeat center;
	background-size: 100%;
}

.s2 .swiper {
	overflow: hidden;
	margin-top: .6rem;
	width: 8.48rem;
	height: 4.76rem;
}

.s2 .swiper .swiper-slide img {
	width: 100%;
}

.s2 .swiper-pagination {
	margin-top: .1rem;
	width: 8.48rem;
	text-align: right;
}

.s2 .swiper-pagination-bullet {
	margin-right: .06rem;
	padding: 0;
	border-radius: 0;
	width: .7rem;
	height: .05rem;
	background-color: #4b5f84;
	opacity: 1;
	cursor: pointer;
}

.s2 .swiper-pagination-bullet:last-of-type {
	margin-right: 0;
}

.s2 .swiper-pagination-bullet-active {
	background-color: #c39f59;
}

.s2 .swiper-tag {
	position: absolute;
	left: -.35rem;
	top: 2.93rem;
	padding: .15rem .06rem;
	background-color: #c39f59;
	writing-mode: vertical-rl;
	font-size: .16rem;
	color: #fff;
}

.s2 .nav-list {
	position: absolute;
	right: 0;
	top: 2.9rem;
	padding-bottom: .15rem;
	border-bottom: 1px dashed #d5d9e3;
	width: 5rem;
}

.s2 .nav-list li {
	float: left;
	position: relative;
	list-style: none;
	cursor: pointer;
	text-align: center;
	font-size: .2rem;
	color: #666;
}

.s2 .nav-list li.active {
	color: #6186ca;
}

.s2 .nav-list li i {
	margin: 0 .28rem 0;
}

.s2 .news-more {
	position: absolute;
	right: 0;
	top: 2.95rem;
	width: .51rem;
	height: .17rem;
	background: url(../../img/home/news-more.png) no-repeat center;
	background-size: 100%;
}

.s2 .news-more a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.s2 .items {
	position: absolute;
	right: 0;
	top: 3.5rem;
	margin: 0 0 0 .54rem;
	width: 5rem;
	height: 4.3rem;
	font-size: .14rem;
}

.s2 .items>div {
	width: 100%;
	height: 100%;
}

.s2 .items dl {
	overflow: auto;
	padding: .2rem 0;
	border-bottom: 1px dashed #d5d9e3;
}

.s2 .items dt {
	overflow: hidden;
	float: left;
	width: 4rem;
	text-overflow: ellipsis;
	color: #666;
	white-space: nowrap;
}

.s2 .items dd {
	float: right;
	color: #999;
}

.s2 .items dt a {
	color: #666;
}

.s2 .items dt a:hover {
	text-decoration: underline;
	color: #6186ca;
}

.s2 .items .synthesize dl:last-of-type {
	padding: .2rem 0 0;
	border-bottom: none;
}

.s2 .items .synthesize dl:first-of-type {
	display: flex;
	overflow: hidden;
	justify-content: center;
	box-sizing: border-box;
	padding: .1rem 0;
	border-bottom: none;
	width: 5rem;
	background-color: #c39f59;
	font-size: .2rem;
	color: #fff;
}

.s2 .items .synthesize dl:first-of-type a {
	font-weight: 700;
	color: #fff;
}

.s2 .items .synthesize dl:first-of-type dt {
	width: 4.7rem;
	text-align: center;
	color: #fff;
}

.s2 .items .synthesize dl:first-of-type a:hover {
	text-decoration: underline;
}

.s3 {
	overflow: hidden;
	width: 100%;
	background: url(../../img/home/bg3.png) no-repeat center top;
	background-size: cover;
}

.s3 .inner {
	position: relative;
	width: 14.2rem;
	height: 10.13rem;
}

.s3 .bg3-title {
	position: absolute;
	left: -2rem;
	top: .7rem;
	width: 3.34rem;
	height: 1.24rem;
	background: url(../../img/home/bg3-title.png) no-repeat center;
	background-size: 100%;
}

.s3 .role-list {
	position: absolute;
	left: 0;
	top: 1.3rem;
	z-index: 3;
}

.s3 .role-item {
	position: absolute;
	width: 1.42rem;
	height: 1.42rem;
	cursor: pointer;
	transition: all .3s;
}

.s3 .role1 {
	left: .82rem;
	top: .01rem;
	background: url(../../img/home/role1.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role1.active {
	background: url(../../img/home/role1-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role2 {
	left: 0;
	top: .83rem;
	background: url(../../img/home/role2.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role2.active {
	background: url(../../img/home/role2-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role3 {
	left: .81rem;
	top: 1.64rem;
	background: url(../../img/home/role3.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role3.active {
	background: url(../../img/home/role3-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role4 {
	left: 0;
	top: 2.47rem;
	background: url(../../img/home/role4.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role4.active {
	background: url(../../img/home/role4-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role5 {
	left: .82rem;
	top: 3.29rem;
	background: url(../../img/home/role5.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role5.active {
	background: url(../../img/home/role5-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role6 {
	left: 0;
	top: 4.12rem;
	background: url(../../img/home/role6.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role6.active {
	background: url(../../img/home/role6-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role7 {
	left: .77rem;
	top: 4.95rem;
	background: url(../../img/home/role7.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role7.active {
	background: url(../../img/home/role7-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role8 {
	left: 0;
	top: 5.8rem;
	background: url(../../img/home/role8.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role8.active {
	background: url(../../img/home/role8-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role9 {
	left: .8rem;
	top: 6.6rem;
	background: url(../../img/home/role9.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role9.active {
	background: url(../../img/home/role9-active.png) no-repeat center top;
	background-size: 100%;
}

.s3 .role-bgg {
	position: absolute;
	left: 2.4rem;
	bottom: 0;
	z-index: 2;
}

.s3 .role-info {
	position: absolute;
	right: 0;
	top: 2rem;
	z-index: 3;
}

.s3 .role-info .role-info-item {
	width: 3.85rem;
}

.s3 .role-info .role-info-item img {
	width: 100%;
}

.s3 .role-bg {
	width: 13.39rem;
}

.s3 .role-bg img {
	width: 100%;
}

@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);

		-webkit-transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);

		-webkit-transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);

		-webkit-transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);

		-webkit-transform: translate3d(0, 0, 0);
	}
}

.animate__fadeInLeft {
	animation: fadeInLeft .3s ease-in;

	-webkit-animation: fadeInLeft .3s ease-in;
}

@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0);

		-webkit-transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);

		-webkit-transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0);

		-webkit-transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);

		-webkit-transform: translate3d(0, 0, 0);
	}
}

.animate__fadeInRight {
	animation: fadeInRight .3s ease-in;

	-webkit-animation: fadeInRight .3s ease-in;
}

.s4 {
	width: 100%;
	background: url(../../img/home/bg4.png) no-repeat center top;
	background-size: cover;
}

.s4 .inner {
	position: relative;
	margin: 0 auto;
	width: 13rem;
	height: 10.13rem;
}

.s4 .gonglue-title {
	position: absolute;
	left: -1rem;
	top: 1rem;
	width: 3.33rem;
	height: 1.24rem;
	background: url(../../img/home/bg4-title.png) no-repeat center;
	background-size: 100%;
}

.s4 .tuwen-title {
	position: absolute;
	left: 0;
	top: 2.7rem;
	width: 6.07rem;
	height: .6rem;
	background: url(../../img/home/tuwen-title.png) no-repeat center;
	background-size: 100%;
}

.s4 .shipin-title {
	position: absolute;
	right: .3rem;
	top: 2.7rem;
	width: 6.02rem;
	height: .59rem;
	background: url(../../img/home/shipin-title.png) no-repeat center;
	background-size: 100%;
}

.s4 .graphic-guide-nav {
	overflow-x: auto;
	position: absolute;
	left: 0;
	top: 3.55rem;
	width: 5.8rem;
}

.s4 .graphic-guide-more {
	position: absolute;
	left: 5.38rem;
	top: 2.76rem;
	width: .55rem;
	height: .3rem;
}

.s4 .video-items-more {
	position: absolute;
	left: 5.25rem;
	top: -.85rem;
	width: .55rem;
	height: .3rem;
}

.s4 .graphic-guide-more a,
.s4 .video-items-more a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.s4 .graphic-guide-nav-list {
	padding-bottom: .15rem;
	border-bottom: 1px dashed #d5d9e3;
	white-space: nowrap;
}

.s4 .graphic-guide-nav-list li {
	display: inline-block;
	position: relative;
	list-style: none;
	text-align: center;
	font-size: .16rem;
	color: #666;
}

.s4 .graphic-guide-nav-list li span {
	cursor: pointer;
}

.s4 .graphic-guide-nav-list li.active span,
.s2 .nav-list li.active span {
	font-weight: 700;
	color: #6186ca;
}

.s4 .graphic-guide-nav-list li.active::after,
.s2 .nav-list li.active::after {
	position: absolute;
	left: 0;
	bottom: -.16rem;
	width: calc(100% - .35rem);
	height: .05rem;
	background-color: #6186ca;
	content: "";
}

.s2 .nav-list li.active::after {
	bottom: -.1rem;
	width: calc(100% - .65rem);
}

.s2 .nav-list li:last-of-type.active::after,
.s4 .graphic-guide-nav-list li:last-of-type.active::after {
	width: 100%;
}

.s4 .graphic-guide-nav-list li i {
	margin: 0 .1rem 0;
}

.s4 .items {
	position: absolute;
	left: 0;
	top: 4rem;
	width: 5.8rem;
	height: 4.3rem;
	font-size: .14rem;
}

.s4 .items>div {
	width: 100%;
	height: 100%;
}

.s4 .items dl {
	overflow: auto;
	padding: .2rem 0;
	border-bottom: 1px dashed #d5d9e3;
}

.s4 .items dt {
	overflow: hidden;
	float: left;
	width: 4.7rem;
	text-overflow: ellipsis;
	color: #666;
	white-space: nowrap;
}

.s4 .items dd {
	float: right;
	color: #999;
}

.s4 .items dt a {
	color: #666;
}

.s4 .items dt a:hover {
	text-decoration: underline;
	color: #6186ca;
}

.s4 .items dl:last-of-type {
	padding: .2rem 0 0;
	border-bottom: none;
}

.s4 .video-items {
	position: absolute;
	right: .4rem;
	top: 3.6rem;
	width: 5.8rem;
}

.s4 .video-items dl {
	display: inline-block;
	position: relative;
	margin-right: .2rem;
	margin-bottom: .2rem;
	width: 2.71rem;
	height: 1.53rem;
}

.s4 .video-items dt {
	width: 100%;
	height: 100%;
}

.s4 .video-items dt a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.s4 .video-items dt img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s4 .video-items dl:nth-of-type(2n) {
	margin-right: 0;
}

.s4 .video-items dl .preview-video {
	position: absolute;
	left: -.15rem;
	bottom: .1rem;
	width: 1.01rem;
	height: .97rem;
	background: url(../../img/home/preview-btn.png) no-repeat center;
	background-size: 100%;
	cursor: pointer;
	transition: all .3s;
}

.s4 .video-items dl:hover .preview-video {
	opacity: .9;
}

.s4 .video-items dl .video-text {
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 0 .05rem;
	width: 100%;
	height: .3rem;
	background-color: rgba(0, 0, 0, .6);
	cursor: pointer;
	line-height: .3rem;
	text-overflow: ellipsis;
	text-align: center;
	font-size: .14rem;
	color: #fff;
	white-space: nowrap;
}

.s5 {
	width: 100%;
	background: url(../../img/home/bg5.png) no-repeat center top;
	background-size: cover;
}

.s5 .inner {
	display: flex;
	position: relative;
	width: 100%;
	height: 10.13rem;
}

.s5 .bg5-title {
	position: absolute;
	left: 10%;
	top: .9rem;
	width: 3.36rem;
	height: 1.25rem;
	background: url(../../img/home/bg5-title.png) no-repeat center;
	background-size: 100%;
}

.s5 .pic-area {
	position: relative;
	left: 0;
	width: 50%;
}

.s5 .video-area {
	position: relative;
	right: 0;
	width: 50%;
}

.s5 img {
	width: 100%;
	height: 100%;
}

.s5 .left1 {
	position: absolute;
	left: 0;
	top: 2.45rem;
	width: 37.3%;
	height: 6rem;
}

.s5 .left2 {
	position: absolute;
	left: 37.3%;
	top: 2.45rem;
	width: 31.25%;
	height: 3rem;
}

.s5 .left3 {
	position: absolute;
	left: 37.3%;
	top: 5.45rem;
	width: 62.5%;
	height: 3rem;
}

.s5 .pic-more {
	position: absolute;
	left: 68.55%;
	top: 2.45rem;
	width: 31.25%;
	height: 3.01rem;
}

.s5 .right1 {
	position: absolute;
	right: 0;
	top: 2.45rem;
	width: 50%;
	height: 3rem;
}

.s5 .right2 {
	position: absolute;
	right: 0;
	top: 5.45rem;
	width: 68.95%;
	height: 3rem;
}

.s5 .right3 {
	position: absolute;
	right: 50%;
	top: 2.45rem;
	width: 50%;
	height: 3rem;
}

.s5 .video-more {
	position: absolute;
	right: 68.95%;
	top: 5.45rem;
	width: 31.25%;
	height: 3.01rem;
}

.s5 .to-top {
	position: absolute;
	left: 50%;
	bottom: .9rem;
	width: .6rem;
	height: .47rem;
	background: url(../../img/home/top.png) no-repeat center;
	background-size: 100%;
	cursor: pointer;
	transform: translate(-50%);
}

.pic-area>div:hover .mask1,
.video-area>div:hover .mask1 {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
	cursor: pointer;
	content: "";
}

.pic-area>div:hover .preview,
.video-area>div:hover .preview {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 1.14rem;
	height: 1.09rem;
	background: url(../../img/media/video-preview-s.png) no-repeat center;
	background-size: 100%;
	cursor: pointer;
	content: "";
	transform: translate(-50%, -50%);
}

.mask {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
}

.video-preview {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8rem;
	height: 6rem;
	transform: translate(-50%, -50%);
}

.video-preview iframe {
	width: 100%;
	height: 100%;
}

.video-preview video {
	width: 100%;
	height: 100%;
}

.video-preview .close {
	position: absolute;
	right: -.5rem;
	top: -.2rem;
	z-index: 3;
	width: .3rem;
	height: .3rem;
	cursor: pointer;
	font-size: .5rem;
	color: #fff;
}

.tip16-preview {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5.96rem;
	height: 4.77rem;
	background: url(../../img/home/dialog-bg.png) no-repeat center;
	background-size: 100%;
	transform: translate(-50%, -50%);
}

.tip16-preview .close {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
	width: .6rem;
	height: .6rem;
	cursor: pointer;
}

.tip16-preview .content {
	overflow: auto;
	margin: 10% auto 0;
	width: 85%;
	height: 80%;
	font-size: .16rem;
	color: #d7d7d7;
}

.tip16-preview .content p {
	margin-bottom: .1rem;
	line-height: .25rem;
}

.fp-auto-height .fp-slide,
.fp-auto-height.fp-section {
	height: 1.82rem !important;
}