.tryBox {background: #000 url(../images/try_bg.webp) center 0 no-repeat;
background-size:cover; color: #fff;
 padding: 5.2em 0 6.7em;}
.tryBox .dataList { margin: 0 auto 0; max-width: 440px; width: 100%;}
.tryBox .dataList ul { display: flex; justify-content: space-between; align-items: center;
 text-align: center;}
.tryBox .dataList .txts { font-weight: 500; }
.tryBox .dataList .num { margin-top: 0.1em; font-weight: 600; }


.tryBox .txt { margin: 0 auto 0; max-width: 570px; width: 100%;}
.tryBox .txt p { margin-top: 1em;}
.tryBox .txt p b{ color: #ff9900;}

.tryBox .btn { margin-top: 2em; color: #000;
    font-size: 14px;
    background-color: #fff;
    border-radius: 15px;
    width: 120px;
    height: 35px;
    display: inline-block;
    line-height: 35px;
    text-align: center;}


.tryBox .txtb_mb { display: none;}
.tryBox .txtb_pc {}

@media only screen and (max-width:828px) {
	.tryBox { background-size:contain; padding: 7em 0 6.7em;}
	.tryBox .dataList { width: 80%;}
	.tryBox .dataList .txts { font-size: 19px;}
	
	.tryBox .txtb_mb { display: block;}
	.tryBox .txtb_pc { display: none;}
	.tryBox .txt { margin-top: 1.6em; font-size: 15px;}
	.tryBox .txt p b { color:#ff6600}
}

.swiper-game { margin-top: 1.48%;}	
.swiper-game-1 { margin-top: 3em;}
.swiper-game .swiper-slide { width: 10%;}
.swiper-game .pic { position: relative; z-index: 0; margin: 0 auto; width: 85.2%; padding-top: 85.2%;
-moz-border-radius:1.5em; -webkit-border-radius:1.5em; border-radius:1.5em;
overflow: hidden;
}
.swiper-game .pic img { position: absolute;
left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}
@media only screen and (max-width:828px) {
	.swiper-game { margin-top: 6.7%;}
	.swiper-game .swiper-slide { width: 20%;}
	.swiper-game .pic { 
	-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;}
}

.whatBox { position: relative; z-index: 0; padding: 6em 0 5.5em;}
.whatBox .videoBox { position: absolute; z-index: 0; left: 0; top: 0;
 width: 100%; height: 100%; }
.whatBox .videoBox .video {position: absolute; left: 0; top: 0;
 width: 100%; height: 100%; object-fit: cover;}
.whatBox .videoBox::after { z-index: 1; display: block; content: ""; position: absolute; left: 0; top: 0;
 width: 100%; height: 100%; 
 /* background-color: rgba(0,0,0,0.1); */
 background-image: linear-gradient(180deg, #fff 0, #7d7d7d 100%);
     opacity: .5;
 }
.whatBox .con { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1;}
.whatBox .con .txtb { width: 40%;}
.whatBox .con .txtb .title { font-weight: bold;}
.whatBox .con .txtb .title img { width: auto; height: 1em; display: inline-block; vertical-align: middle;}
.whatBox .con .txtb .list { margin-top: 0.9em;}
.whatBox .con .txtb .list ul { display: flex; justify-content: flex-start; align-items: stretch;
flex-wrap: wrap;}
.whatBox .con .txtb .list li { width: 50%; padding: 3.7em 0 4.7em; position: relative; z-index: 0;
box-shadow: 0 0 59px -5px rgba(0, 0, 0, .5);
    background-color: transparent;
    background-image: linear-gradient(300deg, #fff 0, #c6c6c6 100%);}
.whatBox .con .txtb .list li .pics {}
.whatBox .con .txtb .list li .pics img { display: block; margin: 0 auto; width: 4.6em; height: 4.6em; object-fit: contain;}
.whatBox .con .txtb .list li .name { font-weight: bold;}
.whatBox .con .txtb .list li .intro { display: flex; justify-content: center; align-items: center; 
filter:alpha(opacity=0);-moz-opacity:0; opacity:0; color: #fff; line-height: 1.6em; font-size: 14px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 13.2%; text-align: center;
background-color: transparent;
    background-image: linear-gradient(300deg, #ff9200 30%, #d70000 100%);
transition: all 0.5s;
-webkit-transition:all 0.5s;}
	
.whatBox .con .txtb .list li:hover .intro {filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
	
.whatBox .con .picb { width: 40%; margin-top: 12%; margin-right: 10%;}
.whatBox .con .picb img { display: block; margin: 0 auto; max-width: 556px; width: 100%; height: auto;}

.whatBox .con .picb_mb { display: none;}

@media only screen and (max-width:828px) {
	.whatBox { padding: 4em 0;}
	.whatBox .con { display: block; margin: 0 1.8em;}
	.whatBox .con .txtb { width: auto;}
	.whatBox .con .picb { width: auto; margin-right: auto;}
	.whatBox .videoBox .video  {}
	.whatBox .con .txtb .list { margin-top: 0;}
	.whatBox .con .txtb .list ul { display: block; margin-top: -1em;}
	.whatBox .con .txtb .list li { margin-top: 2.1em; width: auto; padding: 1.5em 0 1em;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	    background-color: #fff;
	    background-image: none;
		-moz-border-radius:1.8em; -webkit-border-radius:1.8em; border-radius:1.8em;
		}
	.whatBox .con .txtb .list li .intro { padding: 1em  1.2em 0; 
	filter:alpha(opacity=1);-moz-opacity:1; opacity:1; color: #000; 
	line-height: 1.6em; font-size: 15px;
	position: static;  text-align: center;
	    background-image:none;}
	.whatBox .con .txtb .list li:nth-child(1) { margin-top: 0;}
	.whatBox .con .picb_mb { width: 80%; margin: 2em auto 0; display: block;}
	.whatBox .con .picb_pc { display: none; }
}

.appBox { position: relative; z-index: 0; padding: 11.5em 0 11.5em;}
.appBox .picBg {position: absolute; z-index: 0; left: 0; top: 0;
 width: 100%; height: 100%; }
.appBox .picBg img {position: absolute; left: 0; top: 0;
 width: 100%; height: 100%; object-fit: cover;}
.appBox .picBg::after { z-index: 1; display: block; content: ""; 
position: absolute; left: 0; top: 0;
 width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.appBox .con { position: relative; z-index: 1; 
display: flex; justify-content: center; align-items: flex-end; }
.appBox .con .picb { width: 40%; margin: 20px;}
.appBox .con .picb img { display: block; width: 100%; height: auto;}
.appBox .con .videoBox { width: 39%; margin: 20px 20px 4%;}
.appBox .con .videoBox .video { background-color: #000; width: 100%; height: auto;
 -moz-border-radius:1.5em; -webkit-border-radius:1.5em; border-radius:1.5em;
 -moz-box-shadow: 0 0 0.6em rgba(255, 255, 255, .5);
 -webkit-box-shadow: 0 0 0.6em rgba(255, 255, 255, .5);
 box-shadow: 0 0 0.6em rgba(255, 255, 255, .5);}
  .appBox  .title {width: 30%; margin:0 auto 2%; }
 .appBox  .title img { display: block; width: 100%; height: auto;}
 
.appBox .btn {color: #000;
     font-size: 14px;
     background-color: #fff;
     border-radius: 15px;
     width: 213px;
     height: 35px;
     display: inline-block;
     line-height: 35px;
     text-align: center;}
	 
@media only screen and (max-width:828px) {
	.appBox { padding: 4em 0;}
	.appBox  .title { width: 70%; max-width: 400px;}
	.appBox .con { display: block;}
	.appBox .con .picb {width: auto; margin: 2em auto 0;}
	.appBox .con .videoBox  { width: auto;margin: 2em auto 0;}
	.appBox .btn { margin-top: 2em;}
}