/* reset */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-weight: normal;
	font-style: normal
}

ol,
ul {
	list-style: none
}

caption,
th {
	text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	font-size: 100%
}

q:before,
q:after {
	content: ''
}

fieldset,
img,
abbr,
acronym {
	border: 0
}
@font-face {
  font-family: "font";
  src: url('../fonts/Rajdhani-Regular.ttf');
}
@font-face {
  font-family: "font2";
  src: url('../fonts/Rajdhani-Regular.ttf');
}
@font-face {
  font-family: "bold";
  src: url('../fonts/FutureTense.ttf');
}
@font-face {
  font-family: "bold2";
  src: url('../fonts/FutureTense.ttf');
}
@font-face {
  font-family: "bold_ar";
  src: url('../fonts/FutureTense.ttf');
}
@font-face {
  font-family: "bold_vi";
  src: url('../fonts/FutureTense.ttf');
}
@font-face {
  font-family: "bold_tr";
  src: url('../fonts/FutureTense.ttf');
}
@font-face {
  font-family: "bold_th";
  src: url('../fonts/FutureTense.ttf');
}
@font-face {
  font-family: "bold_pl";
  src: url('../fonts/FutureTense.ttf');
}

/* basic */

.c:before,
.c:after {
	content: "";
	display: table
}

.c:after {
	clear: both
}

.c {
	zoom: 1
}


html {
	height: 100%;
  font-size: calc(100 /750*100vw);
}

body {
	font: 0.22rem tahoma, \5b8b\4f53, sans-serif;
	background-color: #12171a;
	font-family: "font","Microsoft Yahei";
	position: relative;
	height: 100%;
	box-sizing: border-box;
  direction: ltr;
}
body.ar{
  font-family: "bold_ar","Microsoft Yahei";
  direction:rtl;unicode-bidi:bidi-override;
}
body.vi{
  font-family: "bold_vi","Microsoft Yahei";
}
body.tr{
  font-family: "bold_tr","Microsoft Yahei";
}
body.th{
  font-family: "bold_th","Microsoft Yahei";
}

a {
	text-decoration: none;
	outline: none;
  /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-user-modify: read-write-plaintext-only; */
}

a:hover,a:active,a:link,a:visited,a:focus {
	text-decoration: none;
	outline: none;
}

input {
	outline: none;
}

img{
  width: 100%;
}

.wrap {
	position: relative;
	width: 100%;
	/* height: 100%; */
	z-index: 7;
	/*min-width: 1280rem;
	max-width: 1920rem;*/
	margin: 0 auto;
  background: #12171a;
}

.container {
	width: 12.80rem;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.hide,
.c-tit {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.dis-n {
	display: none;
}

.dis-b {
	display: block;
}

.sw-bg {
	width: 100%;
	height: 100%;
  opacity: 0;
  transition: all 0.5s;
}
.sw-bg.on{
  opacity: 1
  ;
}

/*bg*/
.part {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	width: 100%;
  margin-top: -1px;
}

.part.swiper-slide-active {
	z-index: 9;
}

.kv {
	background-image: url(../images/m_kv.jpg);
  height: 13rem;
  position: relative;
}

.kv::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.bg1 {
	background-image: url(../images/bg1.png);
  height: 9.5rem;
  margin-top: -1.2rem;
}

.bg2 {
	background-image: url(../images/bg2.jpg);
	height: 13.31rem;
}

.bg3 {
	background-image: url(../images/bg3.jpg);
  height: 15rem;
}

.bg4 {
	background-image: url(../images/bg4.jpg);
  min-height: 9.06rem;
  height: auto;
}

.bg5 {
	background-image: url(../images/bg5.jpg);
  height: 10.5rem;
}
.bg6{
  height: 3rem;
  background: #121719;
}
.right{
  display: none;
}
/* kv */
.big-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 80px;
  filter: brightness(0.75);
  /* z-index: 1; */
  display: block;
}
.kv_top{
  /* display: none; */
  opacity: 0;
  visibility: hidden;
  height: 0;
}
.m_kv_top{
  background: url(../m/images/kv_top.png) no-repeat center/100%;
  width: 7.5rem;
  height: 0.87rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.kv_logo{
  width: 1.78rem;
  height: 0.53rem;
}
.kv_left{
  display: flex;
  align-items: center;
}
.kv_lanuage{
  background: url(../m/images/kv_lanuage.png) no-repeat center/100%;
  width: 0.4rem;
  height: 0.4rem;
}
.lang-menu{
  width: 2.25rem;
  top: 0.8rem;
  left: auto;
 /* right: 2.05rem;*/
  right: 0;
  height: auto;
  background: rgb(17 17 17 / 64%);
  position: absolute;
  z-index: 9;
  display: flex;
  flex-flow: column;
  border-radius: 0.05rem;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}
.kv_lanuage.on .lang-menu{
  visibility: visible;
  opacity: 1;
}
.lang-menu li{
  color: #fff;
  font-size: 0.2rem;
  padding-left: 0.25rem;
  height: 0.55rem;
  line-height: 0.55rem;
  border-bottom:0.01rem solid #373735;
  cursor: pointer;
}
.lang-menu li.on{
  color: #0FBCEA;
}
.kv_btn{
  background: url(../m/images/kv_btn.png) no-repeat center/100%;
  width: 1.83rem;
  height: 0.55rem;
  text-align: center;
  line-height: 0.55rem;
  font-family: "bold2";
  font-weight: bold;
  color: #fff;
  margin-left: 0.1rem;
  font-size: 0.18rem;
}
.kv_purchase{
    background: url(../images/kv_purchase.png) no-repeat;
    background-size: 1.83rem 0.54rem;
    background-position: 0 -0.05rem;
}
.btn-slide{width: 0.58rem; height:0.83rem; background-position: 0 -1.11rem;position: relative;margin-right: 0.1rem; outline: none; color: #000;}
.draw:before {content: ".";top: -0.12rem;}
.draw:after {content: ".";top: 0.12rem;}
.draw {top: 50%;margin-top: -1px;left: 0.44rem;}
.draw, .draw:before, .draw:after {width: 0.4rem;height: 0.04rem;background: #d1cac3;position: absolute;left: 0;transition: all .5s;transform-style: preserve-3d;-webkit-backface-visibility: hidden;}
.draw-close .draw{background:transparent;}
.draw-close .draw:before{top:0;-webkit-transform:rotate(45deg);background:#d1cac3;}
.draw-close .draw:after{top:0;-webkit-transform:rotate(-45deg);background:#d1cac3;}
.com_nav{width:0;height:0;position:fixed;left:0;top:0.8rem;z-index:9999;opacity:0;-webkit-transition:all .5s;-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;}
.com_nav ul{width:100%;overflow:hidden;text-align:center;}
.com_nav li{color:#fff; font-size: 0.34rem; height:0.9rem;overflow:hidden;line-height:0.9rem;position:relative; margin:0.1rem 0.66rem;display: block;font-family: "bold2";}
.com_nav li::after{
  content: '';
  width: 4.57rem;
  height: 0.18rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.com_nav li:last-child::after{display:none;}
.com_nav li a{color:#fff;display:block;height:0.9rem;font-size:0.38rem;}
.com_nav li a.on{
  color: #0FBCEA;
}
.com_nav li .kv_ul a{
  font-size: 0.3rem;
  opacity: 0.7;
}
.kv_ul a:nth-of-type(7){
  display: none;
}
.com_nav li.on{
  height: 100%;
}
.com_nav img {
  width: 0.2rem;
  height: auto;
  margin-bottom: 0.05rem;
}
.com_nav-open{width:100%;height:100%;opacity:1;-webkit-transform:scale3d(1,1,1);background: rgb(0 0 0 / 76%);}
.popup-mask{background:rgba(0,0,0,0.8); position: fixed; left:0; width: 100%; height:100%;top:0; z-index: 999; display:none;}


.m_kv_ul{
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0.8rem;
  background: rgb(0 0 0 / 76%);
  padding-top: 0.5rem;
}
.m_kv_btn.on .m_kv_ul{
  opacity: 1;
  visibility: initial;
}
.m_kv_ul a{
  width: 3rem;
  height: auto;
  display: block;
  margin: 0.2rem auto;
}
.m_kv_ul img{
  width: 100%;
}

.kv_down{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
 flex-wrap: wrap;
  position: absolute;
  top: 10.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.kv_down .pluto-mall{
    position: relative;
}
.kv_down .pluto-mall .btn-pluto-title{
    width: 3rem;
    height: 0.95rem;
    background: url(../images/langugae/kv_down_title_en.png) 0 0 no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: -0.75rem;
    left: 0;
    z-index: 11;
}
.kv_down .pluto-mall .btn-pluto-mall{
    height: 0.85rem;
    width: auto;
}
.kv_down a:nth-of-type(3){
  background: url(../images/kv_down2.png) 0 0 no-repeat;
  background-size: auto 100%;
  width: 2.6rem;
  height: 0.85rem;
  text-indent: 9999px;
  text-align: left;
}

.mac_tips{
  display: none;
}
.kv_slogan{
  font-family: 'bold';
  font-size: 0.25rem;
  color: #fff;
  margin: 1.3rem auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.kv_slogan1{
  display: none;
}
.kv_slogan2{
  display: block;
}
.kv_desc{
  font-size: 0.3rem;
  color: #fff;
  margin: 0.1rem auto 0.2rem;
  text-align: center;
  text-shadow: 5px 5px 5px #000;
}
.m_kv_desc{
  font-family: 'bold';
  width: 7.5rem;
  height: auto;
  margin: 5.05rem auto 1rem;
  animation-delay: 1.5s;
  font-size: 0.7rem;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 9;
  line-height: 0.88rem;
}
h1.m_kv_desc{
  font-size: 0.28rem;
  color: #fff;
  margin: 0 auto;
  position: absolute;
  top: 11.8rem;
  left: 50%;
  transform: translateX(-50%);
}
.kv_swi{
  display: none;
}
/* .kv_swi .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
} */
.kv_swi img{
  width: 1.95rem;
  display: block;
  margin: 0 auto;
}
.kv_swi .swiper-pagination{
  bottom: 0;
}
.kv_swi .swiper-pagination-bullet{
  width: 1.1rem;
  height: 0.04rem;
  border-radius: 0;
  background: #766b67;
}
.kv_swi .swiper-pagination-bullet-active{
  background: #0FBCEA;
}
.kv_zfbtn{
  width: 1.61rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  background: none;
  display: none;
}

/*bg1*/
.part1_ti{
  font-size: 0.67rem;
  font-family: 'bold';
  color: #fff;
  width: 6rem;
  height: 0.8rem;
  margin-top: 0.8rem;
  margin-left: 0.5rem;
  line-height: 0.8rem;
  position: relative;
  z-index: 9;
  overflow: visible;
  pointer-events: none;
}
.part1_ti .part1_p{
  position: relative;
  -webkit-animation-name: title;
  animation-name: title;
  transform: translateY(1rem);
}
.part1_ti .part1_p.animated{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes title {

  0% {
      opacity: 0;
      transform: translateY(1rem);
  }

  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes title {


  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }

}
.part1_con{
  width: 7.5rem;
  height: 7.5rem;
  margin: 2rem auto 0.5rem;
  position: relative;
}
.bg1_swi{
  margin-top: -0.5rem;
  width: 7rem;
  margin-left: 0.5rem;
}
.part1_link{
  position: relative;
  z-index: 9;
}
.part1_link a,.part1_link .swiper-slide{
  width: 6rem;
  margin-right: 0.5rem;
  padding-left: 0.01rem;
}
.part1_link a:nth-of-type(2){
  animation-delay: 0.5s;
}
.part1_link a:nth-of-type(3){
  animation-delay: 1s;
}
.part1_link img{
  width: 6rem;
  display: block;
  margin: 0 auto;
}
.part1_link h2{
  /* font-family: 'bold'; */
  color: #fff;
  font-size: 0.28rem;
  margin: 0.25rem auto;
  padding-left: 0.1rem;
}
.part1_link p{
  color: #fff;
  font-size: 0.22rem;
  opacity: 0.5;
  font-family: "font2";
}
.part1_icon{
  display: block;
  width: 4.75rem;
  height: 0.18rem;
  margin: 1rem auto;
  animation-delay: 1.5s;
}
.bg1_pa.swiper-pagination{
  bottom: 1.5rem;
  left: 0.5rem;
  text-align: left;
  box-sizing: border-box;
}
.bg1_pa   .swiper-pagination-bullet{
  width: .8rem;
  height: 0.04rem;
  border-radius: 0;
  background: #766b67;
  margin-right: 0.2rem;
}
.bg1_pa   .swiper-pagination-bullet-active{
  background: #0FBCEA;
}
#showBig2,.bg1_desc,.part1_icon1,.part1_icon2,.bg1_index,.div1{
  display: none !important;
}

/*bg2*/
.part2_ti{
  font-size: 0.67rem;
  font-family: 'bold';
  color: #fff;
  width: 5.5rem;
  margin-left: 1.5rem;
  margin-top: 0.8rem;
  text-align: right;
  line-height: 0.8rem;
  position: relative;
  z-index: 9;
  overflow: hidden;
}
.part2_p{
  width: 100%;
  opacity: 0;
  display: inline-block;
  position: relative;
  -webkit-animation-name: title;
  animation-name: title;
  transform: translateY(1rem);
}
.part2_p:nth-of-type(2){
  animation-delay: 0.25s;
}
.part2_p:nth-of-type(3){
  animation-delay: 0.5s;
}
.part2_p.animated{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.part2_icon {
  width: 0.87rem;
  height: 1.44rem;
  position: absolute;
  top: 1.1rem;
  left: 0.5rem;
}
.bg2_swi{
  width: 7.5rem;
  height: 11rem;
  position: absolute;
  top: 2rem;
  animation-delay: 1s;
}
.bg2_swi .swiper-pagination{
  bottom: 1.85rem;
  left: 0;
  width: 100%;
}
.bg2_swi .swiper-pagination-bullet{
  width: 0.72rem;
  height: 0.06rem;
  border-radius: 0;
  background: #766b67;
  margin: 0 0.2rem !important;
  outline: none;
}
.bg2_swi .swiper-pagination-bullet-active{
  background: #0FBCEA;
}
.bg2_p, .bg2_n{
  background: url(../m/images/part2_icon3.png) no-repeat center/100%;
  width: 0.3rem;
  height: 0.3rem;
  margin-top: 2.65rem;
  right: 0.5rem;
  outline: none;
}
.bg2_p{
  transform: rotate(180deg);
  right: auto;
  left: 0.5rem;
}
.part2_l{
  width: 100%;
  height: 5.68rem;
  position: relative;
  opacity: 0;
  transition: all 0.8s;
}
.part2_l img{
  width: 7.8rem;
  position: absolute;
  right: 0;
}
.play_btn{
  background: url(../m/images/play_btn.png) no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%,-65%);
  display: block;
  width: 0.85rem;
  height: 1.14rem;
}
.part2_r{
  text-align: center;
  color: #fff;
  width: 4.6rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  margin: 0 auto 0;
  opacity: 0;
  transition: all 1s;
}
.part2_icon2{
  width: 4.6rem;
  height: 0.19rem;
  display: block;
  position: absolute;
  top: 7.5rem;
  left: 50%;
  margin-left: -2.3rem;
}
.part2_icon3{
  width: 3.57rem;
  height: 0.19rem;
  position: absolute;
  top: 11.5rem;
  left: 50%;
  margin-left: -1.78rem;
}
.part2_icon2 .icon,
.part2_icon3 .icon{
  background: url(../images/part2_icon2.png) no-repeat center/3.57rem 0.19rem;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 100%;
  -webkit-animation-icon: icon;
  animation-name: icon;
  transform: translateX(-50%);
  animation-delay: 1s;
}
@-webkit-keyframes icon {

  0% {
      opacity: 1;
      width: 0%;
  }

  100% {
      opacity: 1;
      width: 100%;
  }
}

@keyframes icon {

  0% {
    opacity: 1;
    width: 0%;
  }


  100% {
      opacity: 1;
      width: 100%;
  }

}
.part2_con h2{
  margin-bottom: 0.5rem;
}
.part2_con p{
  opacity: 0.5;
  font-family: "font2";
  font-size: 0.24rem;
}
.swiper-slide-active .part2_l,
.swiper-slide-active .part2_r{
  transform: translateX(0);
  opacity: 1;
}

/* bg3 */
.part3_ti{
  font-size: 0.54rem;
  font-weight: bold;
  font-family: 'bold';
  margin-top: 1.6rem;
  margin-left: 0.5rem;
  color: #fff;
  text-align: left;
}
.part3_l{
  margin-left: 0.5rem;
  color: #fff;
  position: relative;
  z-index: 9;
}
.part3_icon2{
  width: 3.57rem;
  height: 0.19rem;
  margin: 0.15rem 0 0.5rem;
  display: block;
  position: relative;
}
.part3_icon2:nth-of-type(3){
  display: none;
}
.part3_icon2 .icon{
  background: url(../images/part2_icon2.png) no-repeat center/3.57rem 0.19rem;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 100%;
  -webkit-animation-icon: icon;
  animation-name: icon;
  transform: translateX(-50%);
  animation-delay: 1s;
}
.part3_con{
  width: 5rem;
}
.part3_con h2{
  font-size: 0.28rem;
}
.part3_con p{
  font-size: 0.22rem;
  margin: 0.25rem 0;
  opacity: 0.5;
  font-family: "font2";
  text-align: left;
}
.part3_btn{
  display: block;
  background: url(../m/images/part5_submit.png) no-repeat center/100%;
  font-size: 0.3rem;
  font-weight: bold;
  color: #fff;
  width: 3.19rem;
  height: 0.96rem;
  text-align: center;
  line-height: 0.96rem;
  font-family: "bold2";
  margin-top: 0.5rem;
  margin-left: 0.15rem;
  position: relative;
  z-index: 9;
}
.bg3_swi{
  width: 7.12rem;
  height: 7.32rem;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url(../m/images/part3_img_bg.png) top center no-repeat;
  background-size: 100%;
}
.part3_icon{
  width: 7.12rem;
  height: 7.32rem;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: end;
  transform: translateX(8rem);
  opacity: 0;
  transition: all 0.4s;
}
.ani-slide .part3_icon{
  transform: translateX(0);
  opacity: 1;
  transition: all 1s;
}
.part3_icon img{
  display: block;
  width: 100%;
  height: auto;
}


/* bg4 */
.part4_ti{
  font-family: 'bold';
  font-size: 0.67rem;
  color: #fff;
  width: 6.5rem;
  height: 0.94rem;
  margin: 1.7rem auto -0.35rem;
  text-align: right;
  position: relative;
  z-index: 10;
}
.part4_link{
  width: 7.3rem;
  margin-left: 0.2rem;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 9;
  animation-delay: 1s;
  overflow-x: auto;
}
.part4_link::-webkit-scrollbar-thumb{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 5px;
  background: rgb(255 255 255 / 0%);

 }
 .part4_link::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgb(255 255 255 / 0%);
  border-radius: 5px;
 }
 .part4_link::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  border-radius: 5px;
 }
.part4_link a{
  flex: none;
  width: 6rem;
  margin: 0 0.3rem;
}
.part4_link a:nth-of-type(3){
  margin-right: 1.08rem;
}
.part4_link img{
  width: 6rem;
  height: 3.46rem;
  display: block;
  margin: 0 auto;
  -webkit-mask: url(../images/part4_img1.png) no-repeat center/100%;
  mask: url(../images/part4_img1.png) no-repeat center/100%;
}
.nomask .part4_link img{
  -webkit-mask: none;
  mask: none;
}
.part4_link h2{
  /* font-family: 'bold'; */
  color: #fff;
  font-size: 0.28rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;

}
.part4_link p{
  color: #fff;
  font-size: 0.22rem;
  opacity: 0.5;
  margin: 0.25rem auto;
}
.part4_more{
  display: block;
  font-size: 0.25rem;
  color: #0FBCEA;
  font-family: 'bold2';
  margin: 0.8rem 0 0 0.5rem;
  animation-delay: 0.5s;
  position: relative;
  width: auto;
  position: absolute;
  bottom: 0.5rem;
}
.part4_more i{
  background: url(../m/images/part4_icon.png) no-repeat center/100%;
  width: 0.3rem;
  height: 0.26rem;
  position: absolute;
  top: 0.05rem;
  right: -0.45rem;
}

/* bg5 */
.part5_ti{
  font-family: 'bold';
  font-size: 0.67rem;
  color: #fff;
  width: 7rem;
  margin: 1.3rem auto 0.5rem;
  position: relative;
  z-index: 10;
  line-height: 0.9rem;
}
.part5_icon{
  display: none !important;
}
.part5_con {
  width: 6.4rem;
  margin: 1rem auto;
  display: block;
  animation-delay: 1s;
  transition: all 0.5s;
}
.part5_con p{
  color: #fff;
  opacity: 0.5;
  font-size: 0.28rem;
  font-family: "font2";
}
.part5_icon2{
  width: 3.57rem;
  height: 0.19rem;
  margin: 1rem 0 0 0.55rem;
  display: block;
  position: relative;
}
.part5_icon2 .icon{
  background: url(../images/part2_icon2.png) no-repeat center/3.57rem 0.19rem;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 100%;
  -webkit-animation-icon: icon;
  animation-name: icon;
  transform: translateX(-50%);
  animation-delay: 1s;
}
.part5_con input{
  background: url(../m/images/part5_input.png) no-repeat center/100%;
  width: 6.39rem;
  height: 0.76rem;
  padding-left: 0.35rem;
  box-sizing: border-box;
  border: none;
  line-height: 0.76rem;
  font-size: 0.28rem;
  margin: 0.5rem auto .3rem;
  color: #979695;
}
.part5_code {
    background: url(../m/images/part5_input.png) no-repeat center/100%;
    width: 6.39rem;
    height: 0.76rem;
    line-height: 0.76rem;
    font-size: 0.28rem;
    box-sizing: border-box;
    color: #0FBCEA;
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.part5_code input {
    margin: 0;
    background: none;
    width: 2.6rem;
    box-sizing: border-box;
}
input::-webkit-input-placeholder { /* WebKit browsers */
  color: #979695;
  font-size: 0.26rem;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #979695;
  font-size: 0.26rem;
}

input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #979695;
  font-size: 0.26rem;
}
.part5_code a {
    font-size: 0.26rem;
    color: #0FBCEA;
    width: 3.8rem;
    text-align: center;
    position: relative;
}
.part5_code a:after {
    content: '';
    background-color: #766b67;
    width: 0.01rem;
    height: 0.5rem;
    position: absolute;
    left: 0;
    top: 0.15rem;
}
.part5_desc{
  /* display: flex; */
  /* flex-wrap: wrap; */
  color: #fff;
  font-size: 0.24rem;
  font-family: "font2";
}
.part5_desc .p5_btn{
  display: inline-block;
  width: 0.15rem;
  height: 0.15rem;
  border: 0.04rem solid #fff;
  margin-right: 0.1rem;
  margin-top: 0.05rem;
  flex: none;
  opacity: 0.5;
}
.part5_desc .p5_btn.on{
  border: 0.04rem solid #563816;
  /* background-color: #0FBCEA; */
  /* opacity: 1; */
  position: relative;
  opacity: 1;
}
.part5_desc .p5_btn.on::after{
  content: '';
  background: url(../images/part5_icon2.png) no-repeat center/100%;
  width: 0.2rem;
  height: 0.13rem;
  position: absolute;
  top: -0.0rem;
  right: -0.03rem;

}
.part5_desc .p5_btn2{
  color: #fff;
  border-bottom: 0.01rem solid #fff;
  margin:0 0.05rem;
  opacity: 0.5;
}
.part5_desc span{
  opacity: 0.5;
}
.p5_submit{
  display: block;
  background: url(../m/images/part5_submit.png) no-repeat center/100%;
  width: 3.19rem;
  height: 0.96rem;
  line-height: 0.96rem;
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
  margin: 1rem auto;
  font-weight: bold2;
}
.bg5 .part1_icon{
  margin: 4.5rem auto 1rem;
  opacity: 0.5;
}

/* cookie */
/* .cookieBox{
  width: 100.5% !important;
  max-width: 100.5% !important;
  box-sizing: border-box;
  bottom: 0 !important;
  left: 0;
  background-color: #1a1a1a !important;
  font-size: 0.6rem;
  color: #808080;
}
.cookieText span{
  display: block;
}
.cookieText a{
  margin-left: 0 !important;
  font-size: 0.16rem !important;
  color: #808080;
}
.cookieSure{
  background: url(../m/images/cookieSure.png) no-repeat center/100% !important;
  width: 1.18rem !important;
  height: 0.48rem !important;
  border: 0 !important;
  color: #683f1b !important;
  font-size: 0.16rem !important;
  flex: none;
} */
.cookieBox{
  background: #575654 !important;
  box-shadow: none !important;
}
.cookieSure {margin-left: 10px;white-space: nowrap; flex: none;
  background: url(../images/cookie_btn.png) no-repeat right/2rem 0.6rem !important;
  width: 2.05rem!important;
  height: 0.6rem!important;
  color: #000!important;
  font-size: 0.18rem !important;
  border: none!important;
  font-family: 'bold2';
}
.cookieText a {
    color:#0FBCEA;
    text-decoration: underline;
    margin-left:0 !important;
    flex: none;
    font-size: 0.2rem;
}
.cookieText span {display: inline; color: #fff;font-size: 0.2rem;}

/* footer */
.part5_link{
  position: relative;
  margin-top: 5rem;
}
.part5_link::after{
  content: '';
  width: 4.57rem;
  height: 0.18rem;
  background: url(../m/images/part1_icon.png) no-repeat center/100%;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}
.footer_btn,.link_li{
  width: 4.85rem;
  height: 3.55rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer_btn a,.link_li a{
  background-image: url(../m/images/footer_btn.png);
  background-size: 4.53rem 3.55rem;
  background-position: 0 0;
  width: 1.05rem;
  height: 1.45rem;
  margin: 0 0.05rem;
  margin-bottom:0.5rem;
}
/* .footer_btn a:nth-child(3n+2),
.link_li a:nth-child(3n+2){
  margin-left: 0.3rem;
  margin-right: 0.3rem;
} */
.footer_btn a:nth-of-type(2),.link_li a:nth-of-type(2){
  background-position: -1.7rem 0;
  /* width: 0.9rem; */
}
.footer_btn a:nth-of-type(3),.link_li a:nth-of-type(3){
  background-position: -3.45rem 0;
    /* width: 0.9rem; */
}
.footer_btn a:nth-of-type(4),.link_li a:nth-of-type(4){
  background-position: 0 -2.1rem;
  /* width: 0.95rem; */
}
.footer_btn a:nth-of-type(5),.link_li a:nth-of-type(5){

  background: url(../images/part5_btn3.png) no-repeat center/contain;
}
.footer_btn a:nth-of-type(6),.link_li a:nth-of-type(6){
  background-position: -3.45rem -2.1rem;
  width: 1.08rem;
}
.footer_btn a:nth-of-type(7),.link_li a:nth-of-type(7){
  background-position: -1.7rem -2.1rem;
}
.footer_btn a:nth-of-type(8),.link_li a:nth-of-type(8){
  display: none;
}
.wrapContent {
  width: 100%;
  height: 3rem;
  position: relative;
}
.GlobalFooter {
  width: 100%;
  padding:0.25rem 0;
  text-align: center;
  direction: ltr;
}
.GlobalFooter .f_logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.GlobalFooter .f_logo img{
  width: auto;
  height: 0.53rem;
  margin-left:  0.2rem;
}
.f_link {
  margin:0.15rem 0;
  font-size:0.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.GlobalFooter .COPYRIGHT {
  color: #fff;
  font-size:0.16rem;
}
.jump {color:#fff;}
.jump:hover {color: #fff; text-decoration: underline;}
.GlobalFooter i {
  width:0.01rem;
  height:0.24rem;
  margin: 0 0.15rem;
  background-color: #fff;
  font-size:0;
}
.footer-wrap{
  position: absolute;
  width: 100%;
  left:0;
  bottom: 0;
  padding-top:0.2rem;
  padding-bottom:0.2rem;
  text-align: center;
  color:#7f7f7f;
  font-size: 0.24rem;
  line-height:0.3rem;
}
.footer-wrap img {width: 1.94rem;height: 0.58rem;}
.footer-wrap p span { display: block;}
.logo{
  display: inline-block;
  margin-bottom:0.2rem;
}
.icon-culture{
  display: inline-block;
  width:0.32rem;
  height:0.32rem;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right:0.05rem;
}
span.line { display: block;}
.footer-wrap a{
  color:#fff !important;
}



/* news_bg */
.news_ti{
  font-size: 0.67rem;
  font-family: 'bold';
  color: #fff;
  width: 4rem;
  margin-top: 1.2rem;
  margin-left: 0.5rem;
  margin-bottom: -0.15rem;
  line-height: 0.8rem;
  position: relative;
  z-index: 9;
}
.news_kv{
  width: 7.5rem;
  height: 9.24rem;
  position: absolute;
  top: 0;
  z-index: -1;
}
.news_swi {
  margin-top: -0.25rem;
  width: 7rem;
  margin-left: 0.5rem;
}
.news_swi .swiper-slide {
  width: 6rem;
  margin-right: 0.5rem;
  padding-left: 0.01rem;
}
.news_swi h4 {
  /* font-family: 'bold'; */
  color: #fff;
  font-size: 0.28rem;
  margin: 0.25rem auto;
  /* padding-left: 0.1rem; */
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.news_swi a {
  color: #fff;
  font-size: 0.22rem;
  font-family: "font2";
}
.news_swi img{
  -webkit-mask: url(../images/part4_img1.png) no-repeat center/100%;
  mask: url(../images/part4_img1.png) no-repeat center/100%;
  height: 3.48rem;
}
.nomask .news_swi img{
  -webkit-mask: none;
  mask: none;
}
.news_swi a .news_bg1desc_p {
  color: #fff;
  font-size: 0.22rem;
  opacity: 0.5;
  font-family: "font2";
  line-height: 0.34rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.news_pa.swiper-pagination {
  bottom: 1.05rem;
  left: 0.5rem;
  text-align: left;
  box-sizing: border-box;
}
.news_pa  .swiper-pagination-bullet{
  width: .8rem;
  height: 0.04rem;
  border-radius: 0;
  background: #766b67;
  margin-right: 0.2rem;
}
.news_pa  .swiper-pagination-bullet-active{
  background: #0FBCEA;
}


.news_bg2con{
  width: 6.5rem;
  margin: 1rem auto 0.5rem;
  min-height: 20rem;
}
.news_bg2con::-webkit-scrollbar-thumb{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 5px;
  background: #373735;
}
.news_bg2con::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #fff;
  border-radius: 5px;
}
.news_bg2con::-webkit-scrollbar{
  width: 5px;
  height: 1px;
  border-radius: 5px;
}
.news_bg2con a{
  width: 100%;
  margin-bottom: 1rem;
  display: block;
}
.news_bg2con img{
  width: 5.8rem;
  display: block;
  -webkit-mask: url(../images/part4_img1.png) no-repeat center/100%;
  mask: url(../images/part4_img1.png) no-repeat center/100%;
  height: 3.35rem;
}
.nomask .news_bg2con img{
  -webkit-mask: none;
  mask: none;
}
.news_bg2desc{
  width: 100%;
  color: #fff;
  font-size: 0.22rem;
  margin-top: 0.5rem;
}
.news_bg2desc span{
  opacity: 0.5;
  margin: 0.1rem auto;
  display: block;
  line-height: 0.28rem;
}
.news_bg2desc_p{
  opacity: 0.5;
  margin: 0.1rem auto;
  display: block;
  line-height: 0.28rem;
  height: 0.8rem;
  overflow: hidden;
  font-family: "font2";
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.news_bg2desc_p *{
  font-size: 0.22rem;
}
.news_bg2desc_p img{
  display: none;
}
.news_bg2desc h4{
  font-size: 0.28rem;
  opacity: 1;
  /* font-family: 'bold'; */
  font-weight: bold;
  margin: 0.25rem auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news_btn{
  background: url(../m/images/news_btn.png) no-repeat center/100%;
  width: 3.11rem;
  height: 0.76rem;
  display: block;
  margin: 0 auto;
  font-size: 0.22rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.76rem;
  color: #ddd;
}
.news_bg2 .part5_link{
  margin-top: 2.5rem;
}

.news_bg3{
  background: url(../images/news_bg3.jpg) no-repeat 0 0.8rem/100%;
  width: 7.5rem;
  height: 3.56rem;
}
.news_kv2{
  width: 7.5rem;
  height: 2.76rem;
  position: absolute;
  top: 0.8rem;
  z-index: -1;
}
.back_btn{
  display: none;
}

.decon_top{
  width: 6.5rem;
  margin: 0 auto;
}
.decon_top .ti {
  font-size: 0.41rem;
  color: #fff;
  font-family: 'bold';
  width: 100%;
  padding: 0.5rem 0;
}
.decon_top .time {
  font-size: 0.22rem;
  color: #fff;
  opacity: 0.5;
  text-align: right;
  display: block;
  margin-top: 0.5rem;
  font-family: "font2";
}
.decon_box{
  width: 100%;
  position: relative;
  border-bottom: 0.04rem solid #373735;
  padding-bottom: 0.5rem;
  overflow: hidden;
}
.decon_box i {
  background: url(../m/images/news_icon2.png) no-repeat center/100%;
  width: 0.66rem;
  height: 0.66rem;
  position: absolute;
  top: 0;
  left: 0;
}
.decon_box i:nth-of-type(2) {
  top: auto;
  bottom: 0.5rem;
  left: auto;
  right: 0;
  transform: rotate(180deg);
}
.decon_detail{
  width: 100%;
  min-height: 5rem;
  margin: 1rem 0;
  font-size: 0.26rem;
  /* opacity: 0.5; */
  color: #fff;
  font-family: "font2";
}
.decon_detail img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0.5rem auto;
}
.decon_detail iframe{
  width: 99% !important;
}
.decon_bottom .part4_more{
  position: relative;
  bottom: auto;
  display: inline-block;
  margin-bottom: 0.1rem;
}


/* profile */
.profile_bg1 {
  background: url(../m/images/planet-bg.jpg) no-repeat bottom/100%;
  width: 100%;
  height: 3.85rem;
}
.profile_bg2{
  background: url(../m/images/profile_bg.jpg) no-repeat center/100%;
  width: 100%;
  height: 49.03rem;
}

.profile_kv {
  text-align: center;
  color: #fff;
  font-family: 'bold';
}
.profile_kv h1 {
  margin: 0 auto;
  width: 6rem;
  margin-top: 1.2rem;
  font-size: 0.43rem;
}
.profile_kv h2 {
  font-size: 0.38rem;
}
.profile_kv p {
  font-size: 0.22rem;
  opacity: 0.5;
  margin: 0.35rem auto;
  width: 6.5rem;
  font-family: 'font2';
  line-height: 0.4rem;
}
/* .profile_kv a {
  background: url(../m/images/profile_kv_btn.png) no-repeat center/100%;
  width: 2.89rem;
  height: 0.87rem;
  text-align: center;
  line-height: 0.87rem;
  color: #000;
  font-size: 0.38rem;
  display: block;
  margin: 0 auto;
  font-family: "bold2";
  font-weight: bold;
} */
.profile_kv .kv_down{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: auto;
}
.kv_down a{
  width: auto;
  height: 0.85rem;
  margin-bottom: 0.3rem;
    margin-right: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kv_down a img{
  width: auto;
  height: 0.85rem;
}
.kv_down a:nth-of-type(2) img{
  height: 1.08rem;
  margin-left: 0.05rem;
}
.kv_down a:nth-of-type(3){
  /* display: none; */
}
.profile_icon{
  display: none;
}
.profile_li{
  position: relative;
}
.profile_li img{
  width: 7.5rem;
  display: block;
}
.profile_desc {
  width: 6.5rem;
  height: 3.5rem;
  margin: 0.5rem auto;
  color: #fff;
  position: relative;
}
.profile_desc h4 {
  font-size: 0.32rem;
  font-family: 'bold';
  width: 5.5rem;
}
.profile_desc p {
  font-size: 0.22rem;
  opacity: 0.5;
  margin: 0.35rem 0;
  line-height: 0.4rem;
  font-family: "font2";
}
.profile_li img.profile_icon1{
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top: 6rem;
  right: 0.5rem;
}
.profile_li img.profile_icon2{
  width: 0.68rem;
  height: 0.53rem;
  position: absolute;
  top: 7.1rem;
  right: 0.5rem;
}
.profile_li img.profile_icon3{
  width: 0.82rem;
  height: 0.72rem;
  position: absolute;
  top: 6.6rem;
  right: 0.5rem;
}
.profile_li img.profile_icon4{
  width: 0.51rem;
  height: 0.51rem;
  position: absolute;
  top: 6.08rem;
  right: 0.5rem;
}
.profile_li .profile_icon5{
  background: url(../m/images/profile_icon5.png) no-repeat center/100%;
  width: 6rem;
  height: 7.92rem;
  position: absolute;
  top: 4.5rem;
  right: 0.5rem;
}
.profile_li .profile_icon6{
  background: url(../m/images/profile_icon6.png) no-repeat center/100%;
  width: 1.32rem;
  height: 4.62rem;
  position: absolute;
  top: 6.5rem;
  right: 0.5rem;
}
.profile_li .profile_icon7{
  background: url(../m/images/profile_icon7.png) no-repeat center/100%;
  width: 0.99rem;
  height: 3.87rem;
  position: absolute;
  top: 7.05rem;
  left: 0.5rem;
}
.profile_li2{
  height: 12rem;
  padding-top: 1px;
}
.profile_li4{
  height: 9rem;
  padding-top: 1px;
}
.profile_li2 .profile_desc{
  margin-top: 7rem;
}
.profile_li4 .profile_desc{
  margin-top: 6rem;
}
.profile_li2 .profile_img2,
.profile_li4 .profile_img4{
  position: absolute;
  left: 0;
  top: 0;
}
.profile_bg2 .part5_link{
  margin-top: 3rem;
}


.role_part{
  background: url(../m/images/role_bg.jpg) no-repeat center/100%;
  width: 7.5rem;
  height: 22.41rem;
}
.role_img {
  width: 7.5rem;
  height: auto;
  /* margin: 1.5rem 0 0; */
  display: block;
  position: absolute;
  top: 1.8rem;
}
.role_r{
  position: absolute;
  top: 1.5rem;
  left: 0.5rem;
}
.role_name {
  color: #fff;
  line-height: 0.8rem;
}
.role_name p {
  font-size: 0.26rem;
}
.role_name h2 {
  font-size: 0.7rem;
  font-family: 'bold';
  margin: -0.2rem 0;
}
.role_skill {
  width: auto;
  height: 0.3rem;
  margin: 0.3rem auto;
}
.skill_tab {
    display: flex;
    margin-left: -0.1rem;
    margin-top: 4.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    width: 7.1rem;
}
.skill_tab a {
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  outline: none;
  position: relative;
  display: block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* -webkit-user-modify: read-write-plaintext-only; */
  margin-left: 0.05rem;
}
.skill_tab a.on::after {
  content: '';
  background: url(../images/role_img6.png) no-repeat center/100%;
  width: 0.76rem;
  height: 0.76rem;
  position: absolute;
  top: -0.04rem;
  left: -0.03rem;
}
.skill_desc{
  margin-top: 0.2rem;
}
.role_swi{
  margin-left: 0;
}
.skill_tab .role_swi .swiper-slide{
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.05rem;
}
.role_n,.role_p{
  background: url(../images/role_n.png) no-repeat center/100%;
  width: 0.3rem;
  height: 0.3rem;
  margin-top: -0.15rem;
}
.role_p{
  transform: rotate(180deg);
}
.role_desc,.skill_desc{
  display: none;
}
.role_desc.on,.skill_desc.on{
  display: block;
  height: 1.85rem;
  width: 6.5rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.role_desc.on::-webkit-scrollbar-thumb,
  .skill_desc.on::-webkit-scrollbar-thumb{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 5px;
  background: #373735;
 }
 .role_desc.on::-webkit-scrollbar-track,
  .skill_desc.on::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgb(0 0 0 / 5%);
  border-radius: 5px;
 }
 .role_desc.on::-webkit-scrollbar,
  .skill_desc.on::-webkit-scrollbar{
  width: 5px;
  height: 1px;
  border-radius: 5px;
 }
.role_desc h4,.skill_desc h4{
  color: #fff;
  font-size: 0.24rem;
  font-weight: bold;
  margin: 0 0 0.2rem;
}
.role_desc,.skill_desc p{
  font-size: 0.24rem;
  color: #fff;
  opacity: 0.5;
  line-height: 0.36rem;
  font-family: "font2";
  width: 6.5rem;
}
.role_desc{
  margin: 0.2rem 0 0;
}
.role_l{
  margin-top: 11.1rem;
}
.role_tab{
  width: 100%;
  height: 1.05rem;
  border-top: 0.04rem solid #373735;
  overflow: hidden;
  display: flex;
  padding-left: 0.5rem;
}
.role_tab a{
  width: 0.96rem;
  height: 1.05rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  position: relative;
  margin-top: -0.05rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 /* -webkit-user-modify: read-write-plaintext-only; */
}
.role_tab a img{
  height: 0.5rem;
  width: auto;
}
.role_tab .on{
  background: url(../m/images/role_tab.png) no-repeat center/100%;
  opacity: 1;
}
.role_tab .on:nth-of-type(2){
  background: url(../m/images/role_tab_bg2.png) no-repeat center/100%;
  opacity: 1;
}
.role_tab .on:nth-of-type(3){
  background: url(../m/images/role_tab_bg3.png) no-repeat center/100%;
  opacity: 1;
}
.role_tab .on:nth-of-type(4){
  background: url(../m/images/role_tab_bg4.png) no-repeat center/100%;
  opacity: 1;
}
.role_tab a::after{
  content: '';
  width: 0.01rem;
  height: 0.4rem;
  position: absolute;
  bottom: 0.35rem;
  right: 0;
  background-color: #fff;
  opacity: 0.5;
}
.role_tab .on::after{
  display: none;
}
.role_l_box{
  margin-top: 0.2rem;
}
.role_l_box h2{
  margin-left: 0.5rem;
  font-size: 0.16rem;
  color: #fff;
  letter-spacing: 4px;
}
.role_list{
  margin-left: 0.5rem;
  max-width: 7rem;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.role_list::-webkit-scrollbar-thumb{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 5px;
  background: #565554;
 }
 .role_list::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #000;
  border-radius: 5px;
 }
 .role_list::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  border-radius: 5px;
 }
.role_list .role_li{
  background: url(../m/images/role_list1.png) no-repeat top/0.68rem 0.89rem;
  width: 0.68rem;
  height: 1.5rem;
  padding-top: 1px;
  position: relative;
  margin: 0.4rem 3.8rem 0 0.15rem;
  flex: none;
  margin-right: 0.5rem;
  transform: scale(1.3);
}
.role_list .role_li.on{
  background: url(../m/images/role_list1_act.png) no-repeat top/0.68rem 0.89rem;
}
.role_list2 .role_li{  background: url(../m/images/role_list2.png) no-repeat top/0.68rem 0.89rem;}
.role_list2 .role_li.on{  background: url(../m/images/role_list2_act.png) no-repeat top/0.68rem 0.89rem;}
.role_list3 .role_li{  background: url(../m/images/role_list3.png) no-repeat top/0.68rem 0.89rem;}
.role_list3 .role_li.on{  background: url(../m/images/role_list3_act.png) no-repeat top/0.68rem 0.89rem;}
.role_list4 .role_li{  background: url(../m/images/role_list4.png) no-repeat top/0.68rem 0.89rem;}
.role_list4 .role_li.on{  background: url(../m/images/role_list4_act.png) no-repeat top/0.68rem 0.89rem;}
.role_list .role_li img{
  width: 0.62rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.role_list .role_li p{
  position: absolute;
  top: 0.9rem;
  text-align: center;
  font-size: 0.12rem;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  word-break:break-word;
  width: 120%;
}

.role_l_box,.skill_box{
  display: none;
}
.role_l_box.on,.skill_box.on{
  display: block;
}
.role_bg .part5_link{
  margin-top: 2rem;
}

.cookieBox{
  z-index: 100000 !important;
}

/*pop*/

.pop_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgb(0 0 0 / 46%);
}

.pop_bg.on {
  display: flex;
}

.pop {
  position: relative;
  text-align: center;
  /*overflow: hidden;*/
  box-sizing: border-box;
  z-index: 99999 !important;
  display: none;
}

.pop-close {
  background: url(../images/pop-close.png) no-repeat center/100%;
  position: absolute;
  width: 0.37rem;
  height: 0.37rem;
  top: -0.4rem;
  right: 0.45rem;
  z-index: 9;
}


.pop1 {
  width: 7.5rem;
  height: 4.5rem;
  padding-top: 1px;
}
.p1_box{
	width: 7.5rem;
  height: 4.2rem;
	background-color: #000;
	margin: 0 auto;
}
.p1_box video{
	width: 100%;
	height: 100%;
}

.pop2 {
  width: 7.5rem;
  height: 3.49rem;
  background-image: url(../m/images/pop2.png);
  background-size: 100%;
  padding-top: 0.8rem;
  padding-left: 0.6rem;
}
.pop2 h2{
  font-size: 0.36rem;
  color: #fff;
  font-family: 'bold2';
}
.pop2 p{
  font-size: 0.22rem;
  color: #fff;
  opacity: 0.5;
  margin: 0.2rem auto;
}
.pop-btn{
  background: url(../m/images/pop-btn.png) no-repeat right/2.44rem 0.74rem;
  width: 2.54rem;
  height: 0.74rem;
  margin: 0 auto;
  display: block;
  line-height: 0.74rem;
  color: #000;
  font-family: 'bold2';
  font-size: 0.23rem;
  font-weight: bold;
}
.local-container{
  display: none;
}
.pop-down{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/* 多语言 */
.zh_TW .part3_con p{
  margin: 1.5rem 0;
}
.zh_TW .kv_ul a:nth-of-type(7){
  display: block;
}


/* en */
.en .part3_con p{
  margin: 1.5rem 0;
}
.en .kv_ul a:nth-of-type(7){
  display: block;
}
/* ar */
.ar .kv,.ar .m_kv_top,.ar .part1_ti,.ar .part1_con,.ar .bg1_swi,.ar .bg2_swi,.ar .bg3,.ar .p5_box,.ar .link_li{
  direction:ltr
}
.ar .kv_slogan,.ar .part2_con,.ar .part2_p,.ar .part1_link h2,.ar .part3_con p,.ar .p5_submit,.ar .part5_desc{
  direction: rtl;
}
.ar .kv_slogan,.ar .part1_ti,.ar .part2_ti,.ar .part3_ti,.ar .part4_ti,.ar .part5_ti,.ar .news_ti,.ar .profile_kv h1,.ar .profile_desc h4,.ar .kv_btn,.ar .kv_link,.vi .decon_top .ti,.ar .back_btn,.ar .com_nav li,.ar .m_kv_desc{
  font-family: "bold_ar";
}
.ar .kv_down a:nth-of-type(2) img{
  height: 1.05rem;
}
.ar .m_kv_ul a:nth-of-type(2){
  width: 3.45rem;
}
.ar .bg1_swi{
  margin-top: -0.5rem;
}
.ar .part3_con p{
  margin: 1.1rem 0;
}
.ar .part4_ti{
  margin: 1.7rem auto -0.45rem;
}
.ar .part4_more{
  margin: 0.8rem 1rem 0 0;
  /* width: 3.8rem; */
}
.ar .part4_link a:nth-of-type(3){
  margin-right: auto;
  margin-left: 1.08rem;
}
.ar .part5_desc .p5_btn{
  margin-left: 0.1rem;
  margin-right: 0;
}
.ar .part5_con p{
  text-align: left;
  direction: rtl;
}
.ar .footer_btn a:nth-of-type(7),.ar .link_li a:nth-of-type(7){
  display: none;
}
.ar .news_ti{
  /* margin-right: 0.5rem;
  margin-left: auto; */
}
.ar .news_swi,.ar .news_bg1{
  /* margin-left: auto;
  margin-right: 0.5rem; */
  direction:ltr
}
.ar .news_swi .news_bg1desc{
  direction: rtl;
}
.ar .news_swi .swiper-slide{
  /* margin-left: 0.5rem;
  margin-right: 0; */
}
.ar .profile_li img.profile_icon1,.ar .profile_li img.profile_icon2,.ar .profile_li img.profile_icon3,.ar .profile_li img.profile_icon4{
  right: auto;
  left: 0.5rem;
}
.ar .role_swi{
  margin-right: 0;
}

.ar .role_r{
  left: auto;
  right: 0.5rem;
}
.ar .role_name h2{
  font-size: 0.7rem;
  font-family: "bold_ar";
  /* margin-bottom: 0.1rem; */
}
.ar .role_img{
  transform: rotateY(180deg);
}
.ar .role_l_box h2{
  margin-left: auto;
  margin-right: 0.5rem;
}
title{
  direction: rtl;
}
/* de */
.de .part2_ti{
  /* width: 5.5rem;
  margin-left: 1.5rem; */
}
.de .part3_btn{
  font-size: 0.28rem;
}
.de .part5_link{
  margin-top: 4rem;
}
.de .part5_code a{
  font-size: 0.2rem;
}
.de .footer_btn a:nth-of-type(7),.de .link_li a:nth-of-type(7){
  display: none;
}
.de input::-webkit-input-placeholder { /* WebKit browsers */
  color: #979695;
  font-size: 0.2rem;
}

.de input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #979695;
  font-size: 0.2rem;
}

.de input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #979695;
  font-size: 0.2rem;
}
.de .profile_bg2 .part5_link{
  margin-top: 3rem;
}
.de .profile_kv a{
  font-size: 0.34rem;
}

/* es */
.es .kv_btn3{
  line-height: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es .part3_btn{
  font-size: 0.26rem;
}
.es .part5_link{
  margin-top: 4rem;
}
.es .part5_code a{
  font-size: 0.18rem;
}
.es .footer_btn a:nth-of-type(7),.es .link_li a:nth-of-type(7){
  display: none;
}

.es input::-webkit-input-placeholder { /* WebKit browsers */
  color: #979695;
  font-size: 0.2rem;
}

.es input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #979695;
  font-size: 0.2rem;
}

.es input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #979695;
  font-size: 0.2rem;
}
.es .profile_kv a{
  font-size: 0.34rem;
}


/* fr */
.fr .part3_btn{
  font-size: 0.28rem;
}
.fr .part5_code a{
  font-size: 0.18rem;
}
.fr .footer_btn a:nth-of-type(7),.fr .link_li a:nth-of-type(7){
  display: none;
}
.fr input::-webkit-input-placeholder { /* WebKit browsers */
  color: #979695;
  font-size: 0.2rem;
}

.fr input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #979695;
  font-size: 0.2rem;
}

.fr input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #979695;
  font-size: 0.2rem;
}

.fr .profile_kv a{
  font-size: 0.2rem;
}
.fr .kv_btn{
  font-size: 0.2rem;
  line-height: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* id */
.id .profile_kv a{
  font-size: 0.24rem;
}
.id .kv_btn{
  font-size: 0.14rem;
}
.id .kv_ul a:nth-of-type(7){
  display: block;
}
.id .part3_btn{
  font-size: 0.2rem;
}
.id .part5_link{
  margin-top: 4rem;
}
.id .part5_code a{
  font-size: 0.22rem;
}
.id .footer_btn a:nth-of-type(5),.id .link_li a:nth-of-type(5),.id .kv_ul a:nth-of-type(6){
  display: none;
}

/* it */
.it .footer_btn a:nth-of-type(7),.it .link_li a:nth-of-type(7){
  display: none;
}

/* pl */
.pl .kv_btn3{
  line-height: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl .part5_link{
  margin-top: 4rem;
}
.pl .part5_code a{
  font-size: 0.2rem;
}
.pl .footer_btn a:nth-of-type(7),.pl .link_li a:nth-of-type(7){
  display: none;
}
.pl .kv_slogan,.pl .part1_ti,.pl .part2_ti,.pl .part3_ti,.pl .part4_ti,.pl .part5_ti,.pl .news_ti,.pl .profile_kv h1,.pl .profile_desc h4,.pl .kv_btn,.pl .kv_link,.pl .decon_top .ti,.pl .back_btn,.pl .com_nav li,.pl .m_kv_desc{
  font-family: "bold_vi";
}

/* pt_BR */
.pt_BR .part5_code a{
  font-size: 0.2rem;
}
.pt_BR .profile_kv a{
  font-size: 0.34rem;
}
.pt_BR .footer_btn a:nth-of-type(7),.pt_BR .link_li a:nth-of-type(7){
  display: none;
}

/* ru */
.ru .part1_ti{
  font-size: 0.6rem;
  width: 5.8rem;
}
.ru .bg1_swi{
  margin-top: -0.65rem;
}
.ru .part2_ti{
  width: 6.05rem;
  margin-left: 1.05rem;
}
.ru .part3_con p{
  font-size: 0.2rem;
}
.ru .part3_icon2{
  margin: 0.15rem 0 0.25rem;
}
.ru .part3_btn{
  font-size: 0.28rem;
}
.ru .part5_code a{
  font-size: 0.18rem;
}
.ru .profile_kv a{
  font-size: 0.2rem;
}
.ru .kv_btn{
  font-size: 0.2rem;
  line-height: 0.55rem;
  /*padding-top: 0.13rem;*/
}
.ru .part5_link{
  margin-top: 4rem;
}
.ru .footer_btn a:nth-of-type(7),.ru .link_li a:nth-of-type(7){
  display: none;
}
/* .ru .footer_btn a:nth-of-type(8),.ru .link_li a:nth-of-type(8){
  display: block;
} */
.ru .role_name h2{
  font-size: 0.7rem;
}
.ru .role_list .role_li p{
  width: 120%;
}
.ru input::-webkit-input-placeholder { /* WebKit browsers */
  color: #979695;
  font-size: 0.2rem;
}

.ru input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #979695;
  font-size: 0.2rem;
}

.ru input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #979695;
  font-size: 0.2rem;
}

/* th */
.th .kv_ul a:nth-of-type(7){
  display: block;
}
.th .part3_ti{
  width: 4rem;
}
.th .part3_con p{
  margin: 1.1rem 0;
}
.th .footer_btn a:nth-of-type(5),.th .link_li a:nth-of-type(5),.th .kv_ul a:nth-of-type(6){
  display: none;
}
.th .kv_slogan,.th .part1_ti,.th .part2_ti,.th .part3_ti,.th .part4_ti,.th .part5_ti,.th .news_ti,.th .profile_kv h1,.th .profile_desc h4,.th .kv_btn,.th .kv_link,.th .decon_top .ti,.th .back_btn,.th .com_nav li,.th .m_kv_desc{
  font-family: "bold_th";
}


/* tr */
/* .tr .m_kv_desc{
  margin-top: 3.05rem;
} */
.tr .part3_con p{
  margin: 1.5rem 0;
}
.tr .part3_btn{
  font-size: 0.28rem;
}
.tr .part5_link{
  margin-top: 4rem;
}
.tr .footer_btn a:nth-of-type(7),.tr .link_li a:nth-of-type(7){
  display: none;
}
.tr .kv_slogan,.tr .part1_ti,.tr .part2_ti,.tr .part3_ti,.tr .part4_ti,.tr .part5_ti,.tr .news_ti,.tr .profile_kv h1,.tr .profile_desc h4,.tr .kv_btn,.tr .kv_link,.tr .decon_top .ti,.tr .back_btn,.tr .com_nav li,.tr .m_kv_desc{
  font-family: "bold_tr";
}

/* vi */
/* .vi .m_kv_desc{
  margin-top: 3.5rem;
} */
.vi .kv_slogan,.vi .part1_ti,.vi .part2_ti,.vi .part3_ti,.vi .part4_ti,.vi .part5_ti,.vi .news_ti,.vi .profile_kv h1,.vi .profile_desc h4,.vi .kv_btn,.vi .kv_link,.vi .decon_top .ti,.vi .back_btn,.vi .com_nav li,.vi .m_kv_desc{
  font-family: "bold_vi";
}
.vi .kv_slogan{
  /* font-size: 0.5rem; */
}
.vi .part1_ti{
  width: 5rem;
}
.vi .part2_ti{
  width: 5.85rem;
  margin-left: 1.25rem;
}
.vi .part3_btn{
  font-size: 0.3rem;
}
.vi .part4_ti{
  font-size: 0.67rem;
}
.vi .part5_link{
  margin-top: 3rem;
}
.vi .profile_kv a{
  font-size: 0.28rem;
}
.vi .kv_btn{
  font-size: 0.16rem;
}
.vi .kv_ul a:nth-of-type(7){
  display: block;
}
.vi .bg6{
  height: 5.5rem;
}
.vi .wrapContent{
  height: 5.5rem;
}
.vi_logo{
  width: 2rem;
  height: 0.88rem;
  position: absolute;
  top: 2rem;
  left: 0.4rem;
  display: none;
}
.vi .vi_logo{
  display: block;
}
.vi .GlobalFooter .f_logo{
  position: relative;
}
.vi .GlobalFooter .f_logo img{
  height: 4.09rem;
}
.vi_btn1{
  display: block;
  position: absolute;
  top: 1.65rem;
  left: 2.65rem;
  width: 0.6rem;
  height: 0.4rem;
}
.vi_btn2{
  display: block;
  position: absolute;
  top: 1.65rem;
  left: 3.39rem;
  width: 0.9rem;
  height: 0.4rem;
}
.vi_btn3{
  display: block;
  position: absolute;
  top: 1.65rem;
  left: 4.4rem;
  width: 0.9rem;
  height: 0.4rem;
}
.vi_btn4{
  display: block;
  position: absolute;
  top: 2.25rem;
  left: 3rem;
  width: 1.7rem;
  height: 0.4rem;
}

/* it */
.it .part1_ti{
  font-size: 0.6rem;
  width: 5.8rem;
}
.it .bg1_swi{
  margin-top: -0.65rem;
}
.it .part3_btn{
  font-size: 0.22rem;
}
.it .part5_code a{
  font-size: 0.2rem;
}

/* zh_TW */
.zh_TW .part3_icon2{
  margin:0.5rem 0;
}
.zh_TW .part3_con p{
  font-size: 0.3rem;
}
.zh_TW .part3_btn{
  margin-top: 0;
}

/* button_pluto_mall_多语言 */
.zh_TW .kv_down .pluto-mall .btn-pluto-title{
  width: 2.8rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_zh_TW.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.ar .kv_down .pluto-mall .btn-pluto-title{
  width: 3.87rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_ar.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.de .kv_down .pluto-mall .btn-pluto-title{
  width: 4.41rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_de.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.es .kv_down .pluto-mall .btn-pluto-title{
  width: 4.83rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_es.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.fr .kv_down .pluto-mall .btn-pluto-title{
  width: 4.51rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_fr.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.id .kv_down .pluto-mall .btn-pluto-title{
  width: 3.83rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_id.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.it .kv_down .pluto-mall .btn-pluto-title{
  width: 3.83rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_it.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.pl .kv_down .pluto-mall .btn-pluto-title{
  width: 3.56rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_pl.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.pt_BR .kv_down .pluto-mall .btn-pluto-title{
  width: 4.07rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_pt_BR.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.ru .kv_down .pluto-mall .btn-pluto-title{
  width: 3.25rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_ru.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.th .kv_down .pluto-mall .btn-pluto-title{
  width: 3.09rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_th.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.tr .kv_down .pluto-mall .btn-pluto-title{
  width: 3.43rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_tr.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}

.vi .kv_down .pluto-mall .btn-pluto-title{
  width: 3.63rem;
  height: 1rem;
  background: url(../images/langugae/kv_down_title_vi.png) 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.55rem;
  left: 0;
  z-index: 11;
}



.pluto-mall, .kv_purchase {
  display: none!important;
}

.wrapper.noOfficial .pluto-mall,
.wrapper.noOfficial .kv_purchase {
  display: block!important;
}

.gamescom-card {
    background: rgba(10, 5, 20, 0.7);
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(200, 180, 255, 0.3);
    box-shadow: 0 0 30px 0 rgba(180, 140, 255, 0.15);
    max-width: 700px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(25px);
    animation: fadeInSlideUp 1.2s ease-out forwards;
    animation-delay: 0.8s;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    z-index: -1;
    overflow: hidden;
}

.gamescom-card:hover {
    transform: translateY(5px) scale(1.02);
    box-shadow: 0 8px 40px 0 rgba(0, 209, 255, 0.25);
    border-color: rgba(0, 209, 255, 0.5);
}

.gamescom-card__content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    padding: 0.2rem 1rem;
}

.gamescom-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 209, 255, 0.1) 50%, transparent 100%);
    animation: scanline 4s linear infinite;
    animation-delay: 1.5s;
    pointer-events: none;
}

.gamescom-card h2 {
    font-size: 0.3rem;
    color: #e0e0e0;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 3px rgba(0, 209, 255, 0.7);
    line-height: 1;
}

.gamescom-card .gamescom-logo {
    max-height: 65px;
    width: auto;
    filter: grayscale(1) brightness(3);
    animation: pulse-logo 3s infinite ease-in-out;
    animation-delay: 0.5s;
}

.gamescom-card span {
    font-size: 0.4rem;
    color: #ffffff;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 209, 255, 0.9);
}

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scanline {
    0% {
        left: -50%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: -50%;
    }
}

@keyframes pulse-logo {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

.wrapper.noOfficial .kv_purchase {
  display: block!important;
}

.profile_bg2 .part5_link{
  margin-top: 3rem;
}

/* Hide ship images on mobile */
.ship-left, .ship-right {
  display: none;
}

/* FAQ Mobile Styles */
.faq_kv{
  text-align: center;
  color: #fff;
  font-family: 'bold';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 3.85rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.faq_kv h1{
  margin: 0 auto;
  font-size: 0.43rem;
  width: 6rem;
}
.faq_ti{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.28rem;
  margin: 0 0.2rem;
  width: 100%;
  margin-top: 1rem;
  font-family: 'bold';
}
.faq_ti p{
  margin: 0 0.3rem;
  text-align: center;
}
.faq_ti i{
  position: inherit;
  bottom: -0.15rem;
}
.faq_con{
  width: 7rem;
  margin: 0 auto;
  padding: 0 0.2rem;
  box-sizing: border-box;
}
.faq_li{
  width: 100%;
  margin: 0 auto 0.6rem;
}
.faq_li h2{
  font-size: 0.32rem;
  color: #fff;
  font-family: 'bold';
  margin-bottom: 0.2rem;
  font-weight: normal;
}
.faq_li p {
  font-size: 0.24rem;
  color: #fff;
  opacity: 0.7;
  line-height: 0.36rem;
  font-family: 'font';
  font-weight: normal;
}

/* system requirements - mobile responsive styles */
.system_box{
  width: 6.9rem;
  margin: 0.5rem auto;
  border: 0.01rem solid #0FBCEA;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.system_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, hsl(210, 80%, 10%), hsl(180, 80%, 20%), hsl(210, 80%, 10%));
    background-size: 200% 200%;
    animation: gradient-animation 8s ease infinite;
    z-index: -1;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.system_top{
  width: 100%;
  padding-left: 1.8rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 0.8rem;
  background-color: rgba(0, 0, 0, 0.5);
}

.system_top p{
  width: 50%;
  text-align: center;
  font-size: 0.24rem;
  font-family: 'bold';
  color: #fff;
}

.system_li{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 0.8rem;
  color: #fff;
}

.system_l{
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  min-height: 0.8rem;
  width: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 0.18rem;
  padding: 0.1rem 0.05rem;
  box-sizing: border-box;
}

.system_r{
  background-color: rgba(0, 0, 0, 0.1);
  height: 100%;
  min-height: 0.8rem;
  width: calc(100% - 1.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.18rem;
  padding: 0.1rem 0.15rem;
  box-sizing: border-box;
}

.system_li2{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 0.8rem;
}

.system_li2 p{
  color: #fff;
  font-size: 0.18rem;
}

.system_li2 .system_l{
  background-color: rgba(0, 0, 0, 0.4);
}

.system_li2 .system_r{
  background-color: rgba(0, 0, 0, 0.3);
  flex-direction: column;
}

.system_li2 .system_r p{
  width: 100%;
  text-align: center;
  padding: 0.1rem 0.1rem;
  margin: 0;
  line-height: 1.2;
}