@font-face {
  font-family: 'sembold';
  src: url('../font/SourceHanSerifCN-SemiBold.woff2') format('opentype');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
html{
  overflow: hidden;
  height:100%;
}
body {
  line-height: 1;
  height:100%;
  overflow: hidden;
}
html,body{
	/* width:100vw; */
	/* height:100vh; */
	/* position:relative; */
	/* overflow-y: hidden !important; */
	overflow-x: auto !important;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img, object, embed {
  max-width: 100%;
}
.screen{
	position:absolute;
	width:100vw;
	height:calc(var(--vh) * 100);
	left:0;
	top:0
}
:root{
	--footer-height:-27rem;
}
#app{
	/* max-width:192rem; */
	height:100%;
	margin:0 auto 0;
}
* {
	user-select: none;
}
:root{
  --defaultFont: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
	/* --cursorDefault: url('/imgs/mouse/default.png') 7 7,auto!important;
	--cursorPointer: url('/imgs/mouse/pointer.png') 7 7,auto!important; */
	--cursorDefault: default;
	--cursorPointer: pointer;
}
.swiper-container{
	width:100%;
	height:100%;
	position:relative;
	overflow: hidden;
	transition:transform 0.4s;
}
.swiper-container.active{
	transform: translateY(var(--footer-height));
}
.home,.gameTs{
	width: 100%;
	height: calc(var(--vh)* 100);
	position: relative;
	overflow: hidden;
}
.swiper-slide-active{
	z-index:10;
}
.home{
	background:url(../images/kv.jpg) no-repeat center;
	background-size:cover;
}
.home .logo{
	display:block;
	width:20.9rem;
	position:absolute;
	left:4.9rem;
	top:3.2rem;
	z-index:2;
}
.home .enter{
	display:block;
	width:24.25rem;
	height:4.15rem;
	position:absolute;
	right:6.35rem;
	top:5.65rem;
	opacity:.9;
	z-index:2;
}
.home .enter:hover{
	opacity:1;
}
.home .enter img{
	display:block;
	width:100%;
}
.center{
	width:114.7rem;
	position:absolute;
	right:0;
	top:9rem;
	z-index:2;
}
.center .btn{
	display:block;
	width:44.7rem;
	height:8.4rem;
	position:relative;
	margin:-28rem 0 0 44rem;
	opacity:.9;
}
.center .btn:hover{
	opacity:1;
}
.center img{
	display:block;
	width:100%;
	height:100%;
}
.he{
	display:block;
	width:6.35rem;
	position:absolute;
	right:5.85rem;
	bottom:3.7rem;
}
.more{
	display:block;
	width:29.5rem;
	position:absolute;
	left:50%;
	margin-left:-14.75rem;
	bottom:0;
	animation: heroMouseDown 1.5s ease-in-out infinite;
}
.background-video{
	position: absolute;
	width: 100%;
	height: calc(var(--vh) * 100);
	min-width: 100%;
	min-height: 100%;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	object-fit: cover;
}
/*首屏向下滑动提示效果*/
@keyframes heroMouseDown{
	0%, 30% {
    	opacity: 0;
    	-webkit-transform: translate(0, -10px);
	}
	60% {
    	opacity: 1;
    	-webkit-transform: translate(0, 0);
	}
	100% {
   	 opacity: 0;
    	-webkit-transform: translate(0, 8px);
	}
}
@-webkit-keyframes heroMouseDown{
	0%, 30% {
    	opacity: 0;
    	-webkit-transform: translate(0, -10px);
	}
	60% {
    	opacity: 1;
    	-webkit-transform: translate(0, 0);
	}
	100% {
   	 opacity: 0;
    	-webkit-transform: translate(0, 8px);
	}
}
@-moz-keyframes heroMouseDown{
	0%, 30% {
    	opacity: 0;
    	-webkit-transform: translate(0, -10px);
	}
	60% {
    	opacity: 1;
    	-webkit-transform: translate(0, 0);
	}
	100% {
   	 opacity: 0;
    	-webkit-transform: translate(0, 8px);
	}
}
@-ms-keyframes heroMouseDown{
	0%, 30% {
    	opacity: 0;
    	-webkit-transform: translate(0, -10px);
	}
	60% {
    	opacity: 1;
    	-webkit-transform: translate(0, 0);
	}
	100% {
   	 opacity: 0;
    	-webkit-transform: translate(0, 8px);
	}
}
.gameTs{
	background:url(../images/ts.jpg) no-repeat center;
	background-size:cover;
}
.avatar-wrapper{
	width: fit-content;
	position:absolute;
	right:5.9rem;
	top:66.2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	row-gap: 8px;
}
.avatar-item-wrapper{
	width: 8.8rem;
	height: 8.8rem;
	transition: all .17s 
	cubic-bezier(.34, 0, .77, 1);
	position: relative;
}
.avatar-wrapper .avatar-item-wrapper.active{
    height: 8.8rem;
    width: 15.3rem;
}
.avatar-wrapper .avatar-item{
    position: absolute;
    width: 8.8rem;
    height: 8.8rem;
    transition: all .17s cubic-bezier(.34, 0, .77, 1);
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
    right: 0;
}
.avatar-wrapper .avatar-item-wrapper.active .avatar-item{
    transition: all .2s cubic-bezier(.03, .27, .02, 1);
	height: 8.8rem;
	width: 15.3rem;
}
.avatar-wrapper .avatar-item .avatar-mask{
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 2;
    transition: opacity .17s linear;
}
.avatar-wrapper .avatar-item-wrapper.active .avatar-item .avatar-mask{
    opacity: 0;
}
.avatar-wrapper .avatar-img {
    height: 100%;
    position: absolute;
    z-index: 1;
    max-width: unset;
    left: 50%;
    transform: translate(-50%);
}

.tsBanner{
	width:100vw;
	height:100vh;
	overflow:hidden;
	position:relative;
}
.tsBanner .roleThumb{
	display:block;
	width:100%;
	height:100%;
	object-fit: cover;
	position:absolute;
	left:0%;
	top:0;
}
.tsBanner .roleDesc{
	position:absolute;
	left:0;
	top:22vh;
	z-index:2;
}
.tsBanner .roleDesc .roleName{
	display:block;
	width:58rem;
}
.tsBanner .roleDesc .roleTxt{
	font-family:'sembold';
	width:39.5rem;
	height:12.2rem;
	overflow:auto;
	position:relative;
	margin:7rem 0 0 19.5rem;
	font-size:1.7rem;
	color:#494f3f;
	line-height:3.2rem;
}
.tsBanner .roleDesc .roleTxt::-webkit-scrollbar {
    width: 3px;
}
.tsBanner .roleDesc .roleTxt::-webkit-scrollbar-thumb {
    background-color: rgb(86 89 81 / 50%);
    border-radius: 4px;
}
.tsBanner .roleDesc .roleTxt::-webkit-scrollbar-track {
    background-color: rgba(86, 89, 81, 0.1);
    width: 3px;
}
.footer{
	width:100vw;
	height:27rem;
	background:#000;
	position:absolute;
	overflow: hidden;
	left:0;
	bottom:-27rem;
	z-index:1;
	transition:all 0.4s;
	-webkit-transition:all 0.4s;
}
.footer.active{
	transform: translateY(var(--footer-height));
}
.footer #footer{
	width: 100vw;
	height:100%;
	position:relative;
	z-index: 10;
}
.footer #footer .top-wrapper{
	border-bottom: 0.1rem solid rgba(255, 255, 255, .15);
	display: flex;
	justify-content: center;
	height: calc(var(--vh)* 4.35);
}
.footer #footer .top-wrapper .top{
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	width: 62.2855rem;
	justify-content:space-between;
}
.footer #footer .top-wrapper .top .icon{
	display: block;
	opacity: .5;
	cursor: pointer;
	object-fit: contain;
	height: 3.5265rem;
}
.footer #footer .top-wrapper .top .icon:hover{
	opacity: .8;
}
.footer #footer .top-wrapper .top .icon img{
	display:block;
	height:100%;
}
.footer #footer .top-wrapper .top .icon:first-child{
	margin-left:0;
}
.footer #footer .top-wrapper .top .wechat-wrapper{
	height: 3.5265rem;
	position:relative;
}
.top-wrapper .top .wechat-wrapper:hover .qrcode{
	display:block;
}
.footer #footer .top-wrapper .top .wechat-wrapper:hover .icon{
	opacity: .8;
}
.top .wechat-wrapper .qrcode{
	display:none;
	background-image: url(https://cdnstatic.yingxiong.com/dna/6.0/imgs/home/qrCode.png);
	width: 21.4rem;
	height: 21.6rem;
	background-size: contain;
	position: absolute;
	scale: .8;
	left: 78.7rem;
	top: 1.4rem;
	z-index: 1;
}
.top .wechat-wrapper.qwCode .qrCode{
	display:none;
	background-image: url(https://cdnstatic.yingxiong.com/dna/6.0/imgs/home/qwCode.png);
	width: 21.4rem;
	height: 21.6rem;
	background-size: contain;
	position: absolute;
	scale: .8;
	left: 78.7rem;
	top: 1.4rem;
	z-index: 1;
}
.footer .wechat-wrapper .qrcode{
	left: -8.3rem;
}
.footer .wechat-wrapper.qwCode .qrcode{
	top: 1.4rem;
}
.footer #footer .bottom{
    color: #fff;
    font-size: 1.4rem;
    box-sizing: content-box;
    position: relative;
    display: flex;
    justify-content: center;
}
.footer #footer .bottom .company{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	margin-right:5rem;
	margin-left:-14%;
}
.footer #footer .bottom .company .logo-hero3{
    height: 6.817rem;
    object-fit: cover;
    margin-right: 2rem;
    opacity: .8;
}
.footer #footer .bottom .company .logo-hero4{
    height: 7.64rem;
    object-fit: cover;
    position: relative;
    top: -2px;
    opacity: .8;
}
.footer #footer .bottom .company .shortLine{
    width: .2rem;
    height: 2.5rem;
    background-color: #fff;
    opacity: .3;
    margin: 0 3rem;
}
.footer #footer .bottom .company .logo{
    position: relative;
    height: 10.577rem;
    cursor: pointer;
    object-fit: contain;
}
.footer #footer .bottom .info-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4.53rem 0;
    width: 62.286rem;
}
.footer #footer .bottom .info-wrapper .agreement{
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-bottom: 2.8rem;
    font-size: 1.5rem;
    opacity: .9;
	line-height:1.5rem;
}
.footer #footer .bottom .info-wrapper>div{
    white-space: nowrap;
}
.footer #footer .bottom .info-wrapper .agreement span{
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}
.footer #footer .bottom .info-wrapper .agreement span a{
	text-decoration: none;
	color: #fff;
}
.footer #footer .bottom .info-wrapper .line{
    width: 2px;
    height: 1.4rem;
    background-color: #fff;
    margin: 0 1rem;
    transform: scaleX(.5);
}
.footer #footer .bottom .info{
    color: rgba(255, 255, 255, .7);
    font-size: 1.5rem;
}
.footer #footer .bottom .info p{
    margin-bottom: 1.1rem;
    font-family: BaseLine;
	line-height:1.4rem;
}
.footer #footer .bottom .info p:last-child {
    margin-bottom: 0;
}