﻿*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: "微软雅黑","Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  font-size:.14rem;
}
body{
  width: 100%;
  position: relative;
  overflow-x: hidden;
  background: #101114;
  height:100%;
}
.clearfix:after{
  display: block;
  clear: both;
  content: '';
  height: 0;
  overflow: hidden;
}
/*--定义1rem单位大小--*/
html{
  font-size: 100px;
}
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
 html,body {
	 font-size:337.5px;
 }
}
 @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
 html,body {
	 font-size:300px;
 }
}
 @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
	 font-size:250px;
 }
}
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
	 font-size:225px;
 }
}
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
	 font-size:200px;
 }
}
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
	 font-size:187.5px;
 }
}
 @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
 html,body {
	 font-size:168.75px;
 }
}
 @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
 html,body {
	 font-size:150px;
 }
}
 @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
 html,body {
	 font-size:129.375px;
 }
}
 @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
 html,body {
	 font-size:125px;
 }
}
 @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
 html,body {
	 font-size:117.1875px;
 }
}
 @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
 html,body {
	 font-size:112.5px;
 }
}
 @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
 html,body {
	 font-size:100px;
 }
}
 @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
 html,body {
	 font-size:75px;
 }
}


.container{width: 100%;padding-top: .37rem;position: relative;}

.headerBox{ width:100%;}
.headerBox img{ display:block; max-width:100%;}

.tab_newplay{width: 100%;height: .5rem;display: box;display: -webkit-box;}
.tab_newplay li{width: 100%;height: .5rem;color: #f3f3f5;text-align: center;line-height: .5rem;font-size: .13rem;box-flex: 1;-webkit-box-flex: 1; position:relative; background:#222836;}
.tab_newplay li a{ display:block;color: #f3f3f5;}
.tab_newplay li.on{ background:url(../images/tab_on.jpg) no-repeat; background-size:100% auto;}
.tab_newplay li span{ width:0.24rem; height:0.24rem; display:inline-block; vertical-align:middle; margin-right:.12rem;}
.tab_newplay li .new_1{ background:url(../images/icon_newplayer.png) no-repeat; background-size:100% auto;}
.tab_newplay li .new_2{ background:url(../images/icon_newpeople.png) no-repeat; background-size:100% auto;}

.menu{ padding:0.1rem;}
.menu ul li{ position:relative; height:0.51rem; font-size:0.12rem; color:#e4e6e9; line-height:0.51rem; position:relative; padding-left:0.35rem;}
.menu ul.nav-guide li{ border-bottom:1px dashed #171d27;}
.menu ul.nav-advance li{ border-bottom:1px dashed #171d27;}
.menu ul li:before{ content:''; width:0.075rem; height:0.075rem; display:block; position:absolute; left:0.17rem; top:50%; margin-top:-0.035rem;}
.menu ul.nav-guide li:before{background:url(../images/icon_blue_round.png) no-repeat; background-size:100% auto;}
.menu ul.nav-advance li:before{background:url(../images/icon_yellow_round.png) no-repeat; background-size:100% auto;}
.menu ul li a{ width:0.735rem; height:0.285rem; font-size:0.1rem; line-height:0.285rem; text-align:center; color:#fff; display:block; position:absolute; top:50%; margin-top:-0.145rem; right:0.05rem;}
.menu ul.nav-guide li a{ background:#2d3e59;}
.menu ul.nav-advance li a{ background:#62532f;}


.section-cont{ background:url(../images/list1_bg.jpg) no-repeat; width:3.2rem; height:4.975rem; margin:0 auto; position:relative; background-size:100% auto;}
.back_index{ background:url(../images/icon_back.png) no-repeat; width:0.495rem; height:0.195rem; position:absolute; top:0.05rem; right:0.08rem; z-index:11; background-size:100% auto;}
.section-tit {text-align: center;width: 100%; padding:0.25rem 0;}
.section-tit img{ height:.175rem;}
.section1-box1{ position:absolute; left:0.16rem; top:1.55rem;}
.section1-box2{ position:absolute; left:1.11rem; top:0.96rem;}
.section1-box3{ position:absolute; left:2.06rem; top:1.55rem;}

.section1-vedio{ background:url(../images/section1_video.jpg) no-repeat center center; width:0.95rem; height:0.95rem; background-size:100% auto;}

/*视频*/
#layer{width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index:111;display:none;}
#layer video{display:block;width:100%;position:absolute;top:50%;margin-top:-30%;}
.promote{width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index:111;display:none;}


.section1-img{overflow: hidden; width:0.95rem;}
.section1-img img{ display:block; width:100%;}
.section1-img01{background: url(../images/section1_img01.jpg) no-repeat center; background-size:100% auto;}
.section1-img03{background: url(../images/section1_img02.jpg) no-repeat center; background-size:100% auto;}
.section1-img05{background: url(../images/section1_img03.jpg) no-repeat center; background-size:100% auto;}
.section1-img01,.section1-img03,.section1-img05{display:block;width: 1.12rem;height: 1.12rem;}
.section1-img-icon{width: 0.4rem;height: 0.4rem;margin:0 auto;background-repeat: no-repeat;background-position: center;}
.section1-img-icon01{background-image: url(../images/section1-img01-icon.png);background-size:100% 100%;}
.section1-img-icon02{background-image: url(../images/section1-img02-icon.png);background-size:100% 100%;}
.section1-img-icon03{background-image: url(../images/section1-img03-icon.png);background-size:100% 100%;}
/* 屏幕一翻转 */
.front h2{margin-top:0.05rem;font-size: 0.09rem;color: #ced5e4;text-align: center; line-height:0.12rem;font-family: "微软雅黑";cursor: pointer; font-weight:normal;}
.back h3{margin:0 auto;width:0.8rem; line-height:1.5;color: #abb7d1;cursor: pointer; font-weight:normal; font-size:0.07rem;}
.flip-container {perspective: 1000;
-webkit-perspective: 5rem; /*父类容器中 perspective 子类允许透视*/
-moz-perspective: 5rem;
-ms-perspective: 5rem;
-o-perspective: 5rem;
perspective: 5rem;
}
.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;opacity: 1;}
.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1;opacity: 0;}
.flip-container, .front, .back {padding-top:0.09rem;width:0.95rem;height: 0.95rem;cursor: pointer; box-sizing:border-box;}
.back { padding:0;justify-content:center;align-items:center; display:-webkit-flex;}
.flipper {transition:transform 0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
display:block;position: relative;}
.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}
.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
.back { opacity: 0;z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}

.section-cont2{ background:url(../images/list2_bg.jpg) no-repeat; height:4.485rem; background-size:100% auto;}
.section2 ul.gw-list li{width: 2.44rem;height: 0.47rem; background:#212e43; margin:0 auto; position:relative; box-sizing:border-box; padding-left:0.6rem;}
.section2 ul.gw-list li a{ display:block;}
.section2 ul.gw-list li p{padding: 0;line-height:0.47rem; color:#fff;font-size: 0.09rem;}
.section2 ul.gw-list li .img-num{ width:0.5rem; height:0.47rem; background:#314159;justify-content:center;align-items:center; display:-webkit-flex; position:absolute; left:0.05rem; top:0;}
.section2 ul.gw-list li .btn{margin: 0 0.05rem; width:0.3rem; height:0.115rem; line-height:0.115rem; text-align:center; background:#566e95; color:#fff; display:inline-block; border-radius:0.1rem; font-size:0.08rem;}
.section2 .step_icon{ width:100%; padding-top:0.1rem; text-align:center; font-size:0.13rem; color:#8c7657; margin:0.05rem auto; line-height:1; position:relative; font-size:0.1rem;}
.section2 .step_icon:after{ content:''; background:url(../images/section2-step1_icon.png) no-repeat center top; position:absolute; top:0; height:0.05rem; width:0.1rem; left:50%; margin-left:-0.05rem; background-size:100% auto;}
.section2 .server-list{}
.section2 .server-list li{width: 2.44rem;height: 0.47rem; background:#4e412e; margin:0 auto 0.15rem; position:relative; box-sizing:border-box; padding-left:0.6rem;}
.section2 .server-list li.step_04 a{ display:block;}
.section2 .server-list li.step_02:after,.section2 .server-list li.step_03:after,.section2 .server-list li.step_04:after{ content:''; background:url(../images/section2-step2_icon.png) no-repeat; width:0.1rem; height:0.05rem; position:absolute; left:50%; margin-left:-0.05rem; bottom:-0.075rem; background-size:100% auto;}
.section2 .server-list li .img-num{ width:0.5rem; height:0.47rem; background:#685840;justify-content:center;align-items:center; display:-webkit-flex; position:absolute; left:0.05rem; top:0;}
.section2 .server-list li p{font-size:0.1rem;color: #fff; padding-top:0.12rem; line-height:1.1;}
.section2 .server-list li .single{ padding:0; line-height:0.47rem;}
.section2 .server-list li p .size_m{font-size: 0.09rem;color: #968061;}
.section2 .server-list li p a{color:#ff8054;text-decoration: underline; font-size:0.1rem;}
.section2 .server-list li.step_04 a .rongyao{color:#ff8054;text-decoration: underline; font-size:0.1rem;}
.section2 .server-list li p img{vertical-align: middle;margin-left:0.025rem; width:0.125rem;}
.section2 .server-list li .btn{padding:0.01rem 0.06rem;margin:0 0.015rem;background-color: #566e95;color: #fff;border-radius: 12px;}
.section2 .server-list li .btn:hover{background-color: #759cda;}

.section2 .server-list li .step_tips{ background:#fff; width:100%; height:0.535rem; position:absolute; bottom:-0.535rem; left:0; z-index:111; display:none; box-sizing:border-box; padding:0.05rem 0.1rem; font-size:.1rem;}

.section-cont3{ background:url(../images/list3_bg.jpg) no-repeat; height:4.48rem; background-size:100% auto;}
.section3 li{ position:absolute; width:2.71rem; height:0.925rem; box-sizing:border-box; padding-left:0.14rem;}
.section3 li.mode01{ background:url(../images/section3_mode1.jpg) no-repeat; left:0.14rem; top:0.8rem; background-size:100% auto;}
.section3 li.mode02{ background:url(../images/section3_mode2.jpg) no-repeat; left:0.35rem; top:1.8rem; padding-left:1.25rem; background-size:100% auto;}
.section3 li.mode03{ background:url(../images/section3_mode3.jpg) no-repeat; left:0.14rem; top:2.8rem; background-size:100% auto;}
.section3 ul li h3{font-size:0.15rem;font-weight: bold; color:#111521; padding-top:0.15rem;}
.section3 ul li p{ font-size:0.09rem; line-height:0.15rem; width:1.34rem;}

.section-cont4{ background:url(../images/list4_bg.jpg) no-repeat; height:4.45rem; background-size:100% auto;}
.table{width: 2.9rem;margin:0 auto 0.2rem;border-collapse: collapse;}
.table td,.table th{padding:0.07rem 0;border:1px solid #40403f; font-size:0.09rem;}
.table th{width: 0.8rem;text-align: center;color: #608dc3;background-color:#0f1012;background: rgba(0,0,0,0.6);}
.table td{color:#babcbd;background-color:#272b32;background: rgba(0,0,0,0.2);line-height: 2em; padding:0.07rem;}

.section-cont5{ background:url(../images/list5_bg.jpg) no-repeat; height:4.935rem; background-size:100% auto;}
.section-cont6{ background:url(../images/list6_bg.jpg) no-repeat; height:3.07rem; background-size:100% auto;}
.section-cont7{ background:url(../images/list6_bg.jpg) no-repeat; height:3.07rem; background-size:100% auto;}
.section-cont8{ background:url(../images/list6_bg.jpg) no-repeat; height:3.07rem; background-size:100% auto;}

.view_img{ width:3.05rem; display:block; margin:0 auto;}


.section-cont9{ background:url(../images/list9_bg.jpg) no-repeat #11100f; background-size:100% auto; height:auto;}
.table2{width:3.12rem;margin:0 auto 0.2rem;border-collapse: collapse;}
.table2 th{padding:0.05rem 0;color: #ab8b47;background-color: #161715;}
.table2 td,.table2 th{border:1px solid #363531;text-align: center; font-size:0.09rem;}
.table2 td{padding:0.05rem 0;color:#f7f4ee;background-color:#272b32;background: rgba(0,0,0,0.2);line-height: 1.5em;}
.table2 th:nth-child(1){ width:0.6rem;}
.table2 td:nth-child(2){ text-align:left; padding:0.05rem;}
.table2 th:nth-child(3){ width:0.64rem;}
.table2 td:nth-child(3){ text-align:left; padding:0 0.1rem;}
.table2 th:nth-child(4){ width:0.3rem;}
.table2 th:nth-child(5){ width:0.3rem;}
.table2 th:nth-child(6){ width:0.3rem;}
.table2 tr:nth-child(2n){background-color: #070707;}
.table2 tr:nth-child(2n+1){background-color: #101111;}

.table3{width:3.12rem;margin:0 auto 0.2rem;border-collapse: collapse;}
.table3 th{padding:0.05rem 0;color: #ab8b47;background-color: #161715;}
.table3 td,.table3 th{border:1px solid #363531;text-align: center; font-size:0.09rem;}
.table3 td{padding:0.05rem 0;color:#f7f4ee;background-color:#272b32;background: rgba(0,0,0,0.2);line-height: 1.5em;}
.table3 th:nth-child(1){ width:0.3rem;}
.table3 th:nth-child(2){ width:0.6rem;}

.table3 th:nth-child(5){ width:0.4rem;}


.section-cont11 { background:url(../images/list11_bg.jpg) no-repeat; height:5.15rem; background-size:100% auto;}
.section11 ul {}
.section11 ul li{ width:2.76rem;height:0.84rem;background:#e6eaee; margin:0 auto 0.07rem;}
.section11 ul li a{display: block;width: 100%;height: 0.84rem;color:#111521; position:relative; box-sizing:border-box;}
.section11 ul li:nth-child(2n-1) a{ padding-left:0.84rem;}
.section11 ul li:nth-child(2n) a{ padding-right:0.84rem;}
.section11 ul li h4{width: 0.84rem;height: 0.84rem; position:absolute; top:0;}
.section11 ul li:nth-child(2n-1) h4{ left:0; }
.section11 ul li:nth-child(2n) h4{ right:0; }
.section11 ul li h4 img{ width:100%; display:block;}
.section11 ul li h2{ text-align:center;padding:0.1rem 0;font-size: 0.12rem;font-family: "微软雅黑";font-weight: bold; color:#111521; line-height:1;}
.section11 ul li h5{ text-align: left; font-size:0.09rem; line-height:0.15rem;padding:0 0.1rem; font-weight:normal;}


.section-cont12{ background:url(../images/list12_bg.jpg) no-repeat; height:5.15rem; background-size:100% auto;}
.section12 ul{ padding-left:0.4rem;}
.section12 ul li{float: left; margin-left:0.15rem; margin-bottom:0.115rem;}
.section12 ul li a{display: block;width:1rem;height:0.775rem; padding-top:0.225rem;text-align: center;background: url(../images/section12-hov.png) no-repeat center; background-size:100% auto;}
.section12 ul li a img{display: block;width: 0.32rem;margin:0 auto 0.15rem;}
.section12 ul li a h3{font-size:0.1rem;color:#fff; font-weight:normal;}