/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,
details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
body a{-webkit-tap-highlight-color: transparent;text-decoration: none;}
html,body{width: 100%; height: 100%; font-family: "\5FAE\8F6F\96C5\9ED1"; overflow-x: hidden;}
*{box-sizing: border-box;}
.clearfix:after{content:""; display:block; height:0; clear:both; }
.clearfix{ *zoom:1; }
.hidden {display: none;}
body{-webkit-text-size-adjust: none;}

/*global*/
.wrap {position: relative; width: 100%; height: 100%;}
.title {position: absolute; left: .52rem; width: 5rem; height: 2.2rem; background: url(./spr-title.png) no-repeat; background-size: 5rem 8.8rem; opacity: 0;}
.title.t1 {background-position: 0 0; top: 50%; margin-top: -4rem;}
/* .title.t1 {
  margin-top: -3rem;
} */
.title.t2 {background-position: 0 -2.2rem; top: 50%; margin-top: -4.5rem;}
/* .title.t2 {
  margin-top: -3rem;
} */
.title.t3 {background-position: 0 -4.4rem; top: 50%; margin-top: -4.5rem;}
.title.t3 {background: url(./t-culture.png) no-repeat left center / 3.82rem 2.18rem;top: 50%; margin-top: -4.5rem;}
/* .title.t3 {
  margin-top: -3rem;
} */
.title.t-technology {background: url(./t-technology.png) no-repeat left center / 3.81rem 2.15rem;top: 58%; margin-top: -4rem;}
.title.t4 {background-position: 0 -6.6rem; top: 50%; margin-top: -4.6rem;}
/* .title.t3 {
  margin-top: -3.6rem;
} */
.title.t5 {position: relative;left: 0;top: 0; background: url(./title5.png) no-repeat center center / 3.61rem 2.15rem;}
.title.t-technology {background: url(./t-technology.png) no-repeat left center / 3.81rem 2.15rem;top: 50%; margin-top: -4.5rem;}

.swiper-slide-active .title{-webkit-animation:textFateIn 0.6s 0.4s ease; -ms-animation:textFateIn 0.6s 0.4s ease ; animation:textFateIn 0.6s 0.4s ease; animation-fill-mode: forwards;}
.p-description {position: absolute; width: 6.48rem; height: auto; line-height: .4rem; text-align: left; font-size: .22rem; color: rgba(255, 255, 255, .5); opacity: 0;}
.swiper-slide-active .p-description{-webkit-animation:textFateIn 0.6s 0.4s ease; -ms-animation:textFateIn 0.6s 0.4s ease ; animation:textFateIn 0.6s 0.4s ease;animation-fill-mode: forwards;}
.link-list {position: absolute; left: .52rem; bottom: 2.5rem; width: 6.45rem; height: auto; font-size: 0; opacity: 0;}
/* .link-list {
  bottom: 1.48rem;
} */
.swiper-slide-active .link-list {-webkit-animation:textFateIn 0.6s 0.4s ease ;-ms-animation:textFateIn 0.6s 0.4s ease ;animation:textFateIn 0.6s 0.4s ease;animation-fill-mode: forwards;}
.link-list a {display: inline-block;width: auto;height: .9rem;padding-right: .4rem;line-height: .9rem;font-size: .3rem;color: rgba(255, 255, 255, .8);background: url(./link-arrow.png) no-repeat center right;background-size: .15rem .26rem;}
.link-list .p2-link1 {margin-right: 1rem;}
.link-list .p2-link3 {margin-right: 0.8rem;}
.link-list .p4-link1 {margin-right: 0.5rem;}
.link-list .p4-link3 {margin-right: 1.55rem;}

.guide {position: absolute;bottom: .44rem;left: 50%;width: .28rem;height: .46rem;margin-left: -.14rem;z-index: 8;-webkit-animation: tips-arr 1.2s 0s infinite linear both;animation: tips-arr 1.2s 0s infinite linear both;}
.guide .circle {width: .28rem;height: .28rem;border: .03rem solid #FFFFFF;border-radius: 50%;margin-bottom: .12rem;}
.guide .dot {width: .06rem;height: .06rem;margin: 0 auto;border-radius: 50%;background-color: #FFFFFF;}

/*top nav*/
.top-nav-box {position: absolute;top: 0;left: 0;width: 7.5rem;height: 1.75rem; overflow: hidden; z-index: 9; transition: height .3s;}
.top-nav {position: relative;width: 7.5rem;height: 1.75rem; transition: height .3s;}

.top-nav-box.scroll {height: 1rem;}
.top-nav-box.scroll .top-nav {height: 1rem;}

.top-nav-box.active {height: 100%;background: rgba(0, 0, 0, .95); transition: none;}
.top-nav-box.active .top-nav {height: 1.75rem; background: #000000; transition: none;}
.top-nav-box.active .language-change {display:none;;opacity: 1;pointer-events: initial;}

.logo-game {position: absolute;top: 50%;left: .44rem;display: block;width: 2.09rem;height: .93rem;margin-top: -.46rem;background: url(./logo-game.png) no-repeat;background-size: 100%;}
.nav-more {position: absolute;top: 50%;right: .52rem;	display: block;width: .5rem;height: .4rem;margin-top: -.2rem;}
.nav-more span {position: absolute;left: 0;display: block;width: .5rem;height: .04rem;border-radius: .02rem;background: #FFFFFF;	}
.nav-more span:nth-child(1) {top: 0; opacity: 1; transition: all .3s; z-index: 3;}
.nav-more span:nth-child(2) {top: .18rem; opacity: .5;transition: all .3s; z-index: 2;}
.nav-more span:nth-child(3) {top: .36rem; opacity: .3; transition: all .3s; z-index: 1;}
.nav-more.active span:nth-child(1) {transform: translateY(.17rem) rotate(-45deg);}
.nav-more.active span:nth-child(2) {opacity: 0;}
.nav-more.active span:nth-child(3) {transform: translateY(-.17rem) rotate(45deg); background-color: #676767; opacity: 1;}
.nav-main {position: relative; width: 100%; height: calc(100% - 1.75rem);}
.nav-link-list {width: 6.46rem; height: calc(100% - 1.5rem); padding: .4rem 0; border-top: 1px solid #272728;margin: 0 auto;}
.nav-link-list a {display: block; height: 1.2rem; line-height: 1.2rem; font-size: .42rem; color: rgba(255, 255, 255, .4);}
.nav-link-list a.active {color: #FFFFFF;}
.language-change {position: relative;width: 6.46rem;height: 1.5rem;border-top: 1px solid #272728;	margin: 0 auto;font-size: 0;opacity: 0;pointer-events: none;}
.language-change a {vertical-align: top;display: inline-block;width: .8rem;height: 1.5rem;line-height: 1.5rem;font-size: .3rem;color: rgba(255, 255, 255, .4);	}
.language-change a.active {color: #FFFFFF;}

/*main*/
.main {width: 100%;height: 100%;}
.swiper-slide {overflow: hidden;position: relative;}
/*Spark More*/
.swiper-slide.spark {background: url(./spark-bg.jpg) no-repeat top center; background-size: cover;}
.spark-more {position: absolute;top: 50%;left: 50%;width: 5.9rem;height: 1.65rem;margin: -1.6rem 0 0 -2.95rem;background: url(./spark-more.png) no-repeat;background-size: 100%;opacity: 0;}
.spark-more1 {position: absolute;top: 35%;left: 50%;width: 5.9rem;height: 1.65rem;margin: -1.6rem 0 0 -2.95rem;background: url(./spark-more1.png) no-repeat;background-size: 100%;opacity: 0;}
.spark-more2 {position: absolute;top: 35%;left: 50%;width: 5.9rem;height: 1.65rem;margin: -1.6rem 0 0 -2.95rem;background: url(./tu1.png) no-repeat;background-size: 100%;opacity: 0;}
/* .spark-more {
  margin: -1.4rem 0 0 -2.95rem;
} */
.swiper-slide-active .spark-more{-webkit-animation:textFateIn 0.6s 0.4s ease ;-ms-animation:textFateIn 0.6s 0.4s ease ;animation:textFateIn 0.6s 0.4s ease;animation-fill-mode: forwards;}
.spark .p-description {position: absolute;top: 50%;left: 50%;width: 5.2rem;margin: 2.8rem 0 0 -2.6rem;text-align: center;}
.spark .p-description1 {position: absolute;top: 20%;left: 50%;width: 5.2rem;margin: 2.8rem 0 0 -2.6rem;text-align: center;}
/* .spark .p-description {
  margin: 3rem 0 0 -2.6rem;
} */
/* Game Video */
.swiper-slide.video {background: url(./video-bg.png) no-repeat center center;background-size: cover;}
.btn-play {opacity: 0; position: absolute; top: 58%; left: 50%; margin-left: -0.45rem; width: .9rem; height: .9rem; background: url(./btn-play.png) no-repeat; background-size: 100%; z-index: 9; outline: none;}
.video-bg {position: absolute; top: 50%; left: 50%; width: 7.5rem; transform: translateX(-50%) translateY(-50%); pointer-events: none;}
.swiper-slide-active .btn-play{-webkit-animation:textFateIn 0.6s 0.4s ease ;-ms-animation:textFateIn 0.6s 0.4s ease ;animation:textFateIn 0.6s 0.4s ease;animation-fill-mode: forwards;}

/*Game Experinece*/
.swiper-slide.experinece {background: url(./experinece-bg.jpg) no-repeat top center; background-size: cover;}
.experinece .p-description {top: 36%;left: .52rem;}
/* .experinece .p-description {top: 50%;left: .52rem;} */

/*Game Technology*/
.swiper-slide.technology {background: url(./technology-bg.jpg) no-repeat top center; background-size: cover;}
.technology .p-description {top: 30%;left: .52rem;}

/*Game Innovation*/
.swiper-slide.innovation {background: url(./innovation-bg.jpg) no-repeat top center; background-size: cover;}
.innovation .p-description {top: 30%;left: .52rem;color: rgba(255, 255, 255, .65);}

/*Game Culture*/
.swiper-slide.culture {background: url(./culture-bg.jpg) no-repeat top center; background-size: cover;}
/* .swiper-slide.culture {background-color: #000000;} */
.culture .p-description {top: 30%;left: .52rem;}
/* .culture .p-description {top: 50%;left: .52rem;} */

/*Game Responsibility*/
.swiper-slide.responsibility {background: url(./responsibility-bg.jpg) no-repeat top center; background-size: cover;}
/* .swiper-slide.responsibility {background-color: #000000;} */
.responsibility .p-description {top: 30%; left: .52rem;}

/*News*/
.swiper-slide.news {padding-top: 1.75rem;transition: all .3s;background-image: linear-gradient(80deg, #261f40, #362b63);}
/* .swiper-slide.news .swiper-wrapper {

} */
.swiper-slide.news .swiper-container {width: 100%;height: 100%;}
.swiper-slide.news .swiper-container .swiper-wrapper {background: url(./news-bg2.jpg) no-repeat top center;background-size: 7.5rem 21.74rem;height: auto !important;}
.swiper-container-scrollbar .swiper-slide{height: auto;}
.news-box {width: 100%;height: auto;padding: 0 .52rem .8rem .52rem;margin: 0 auto;transition: margin .3s;}
.news-box .news-item {position: relative;width: 6.48rem;height: 4.6rem;margin-bottom: .5rem;border-radius: .08rem;background-color: #7254ba;overflow: hidden;}
.news-box .news-item a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 9;}
.news-box .news-item:last-child {margin-bottom: 0;}
.news-box .news-item img {display: block;width: 6.48rem;height: 3rem;margin-bottom: .2rem;object-fit: cover;}
.news-box .news-item .p-title {width: 100%;height: .6rem;line-height: .6rem;padding: 0 .3rem;font-size: .3rem;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.news-box .news-item .p-time {width: 100%;height: .5rem;line-height: .5rem;padding: 0 .3rem;font-size: .22rem;color: rgba(255, 255, 255, .4);overflow: hidden;text-overflow: ellipsis;white-space: normal;margin-top: 0.1rem;}
.news-box .news-item .p-time .type{float: left;width: 1.2rem;height: 0.42rem;border-radius: 0.03rem;line-height: 0.42rem;text-align: center;background-color: rgba(0, 0, 0, 0.07);color: rgba(255, 255, 255, .7);}
.news-box .news-item .p-time .time{float: right;}
.more-news {
  display: block;
  width: 1.7rem;
  background: url(./link-arrow.png) no-repeat center right;
  background-size: .15rem .26rem;
  font-size: .3rem;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 1.3rem .52rem;
}

/*footer*/
.footer {width: 100%; height: auto; padding-bottom: .8rem; background-color: #282452;}
.footer ul {width: 100%; height: auto; padding: .5rem .52rem 0 .52rem;}
.footer ul li {position: relative; width: 100%; height: auto; margin-bottom: .24rem;}
.footer ul li:after {content: ''; position: absolute; top: .36rem; right: .0; width: .22rem; height: .13rem; background: url(./footer-arrow.png) no-repeat; background-position-y: -.13rem; background-size: .22rem .26rem; pointer-events: none;}
.footer ul li.active:after {background-position-y: 0;}
.footer ul li p {display: none; width: 100%; height: .76rem; line-height: .76rem; font-size: .26rem; color: rgba(255, 255, 255, .4);}
.footer ul li p a {vertical-align: top; display: inline-block; width: 100%; height: 100%; color: rgba(255, 255, 255, .4);}
.footer ul li p.first {position: relative; display: block; width: 100%; height: .86rem; line-height: .86rem; font-size: .3rem; color: #ffffff;}
.p-copyright {padding: .04rem .52rem; line-height: .46rem; font-size: .22rem; color: rgba(255, 255, 255, .4);}
.p-copyright a {color: rgba(255, 255, 255, .4);}
.footer ul li.active p {display: block;}
.logo-tencent {width: 2.23rem; height: .3rem; margin: .6rem auto 0; background: url(./logo-tencent.png) no-repeat; background-size: 2.23rem .3rem;}

.tc-gzh{display: none;width: 3rem;height: 3rem;position: absolute;top:-2.2rem;left:0;z-index: 55;}
.left-tlist li a:hover .tc-gzh{display: block;}
.tc-gzh img{display: inline-block;width: 3rem;height: 3rem;}


/*dialog*/
.dialog {display: none;}
.dialog .close {position: fixed; top: .68rem; right: .52rem; display: block; width: .5rem; height: .4rem; z-index: 9;}
.dialog .close:before {content: ''; position: absolute;top: 0; left: 0;display: block;width: .5rem;height: .04rem;border-radius: .02rem;background: #676767; transform: translateY(.18rem) rotate(-45deg);}
.dialog .close:after {content: ''; position: absolute;top: .36rem; left: 0;display: block;width: .5rem;height: .04rem;border-radius: .02rem;background: #FFFFFF; transform: translateY(-.18rem) rotate(45deg);}

.dialog-video {width: 7.5rem; height: 4.22rem;}
.dialog-video .video-con {width: 7.5rem; height: 4.22rem;}

/*animation*/
@-webkit-keyframes textFateIn{
	0%{opacity:0.2;transform: translateY(2rem);}
	100%{opacity:1;transform: translateY(0);}
}
@-ms-keyframes textFateIn{
	0%{opacity:0.2;transform: translateY(2rem);}
	100%{opacity:1;transform: translateY(0);}
}
@keyframes textFateIn{
	0%{opacity:0.2;transform: translateY(2rem);}
	100%{opacity:1;transform: translateY(0);}
}

@-webkit-keyframes tips-arr{
 0%{-webkit-transform:translateY(0px);}
 50%{-webkit-transform:translateY(.1rem);}
 100%{-webkit-transform:translateY(0);}
}

@-ms-keyframes tips-arr{
 0%{-webkit-transform:translateY(0px);}
 50%{-webkit-transform:translateY(.1rem);}
 100%{-webkit-transform:translateY(0);}
}

@keyframes tips-arr{
 0%{-webkit-transform:translateY(0px);}
 50%{-webkit-transform:translateY(.1rem);}
 100%{-webkit-transform:translateY(0);}
}

/* h tips  */
@media screen and (min-aspect-ratio: 13/9) {
    html,body { position:relative; overflow:hidden;width:100%; height:100%;padding:0;margin:0;}
    html::before {content: ""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
    html::after {content: "\4e3a\4e86\66f4\597d\7684\4f53\9a8c\ff0c\8bf7\5c06\624b\673a\7ad6\8fc7\6765"; text-align:center; font-size:16px; color:#fff; position:absolute; top:50%; left:0; height:30px; width:100%; margin-top:50px; z-index:99999; }
    body::before  { content: "";position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-140px 0 0 -50px; color:#fff; background-repeat:no-repeat; background-position:center center; background-size:100px auto; -webkit-transform:rotateZ(-90deg); }
}



#_overlay_ {
  height: 102% !important;
}



@media (min-width: 768px) and (max-width: 1024px) {
  /* .title.t1 {background-position: 0 0; top: 50%; margin-top: -4rem;} */
  .title.t1 {
    margin-top: -3rem;
  }
  .title.t2 {
    margin-top: -3rem;
  }
  .title.t3 {margin-top: -3rem;}
  .title.t4 {background-position: 0 -6.6rem; top: 50%; margin-top: -3rem;}
  /* .title.t5 {position: relative;left: 0;top: 0; background: url(./title5.png) no-repeat center center / 3.62rem 1.46rem;margin-bottom: 0.4rem;} */
  .title.t-technology {margin-top: -3rem;}
  .technology .p-description {top: 50%;left: .52rem;}
  .responsibility .p-description {top: 50%;left: .52rem;}
  .link-list {
    bottom: 1.48rem;
  }
  .spark-more {
    margin: -1.4rem 0 0 -2.95rem;
  }
  .spark .p-description {
    margin: 3rem 0 0 -2.6rem;
  }
  .experinece .p-description {top: 50%;left: .52rem;}
  .innovation .p-description {top: 50%;left: .52rem;color: rgba(255, 255, 255, .65);}
  .culture .p-description {top: 50%;left: .52rem;}
  .responsibility .p-description {top: 45%; left: .52rem;}
}