@charset "utf-8";

@import url('layout.css');
@import url('common.css');

body, html{overflow:hidden;background:url(../images/bg_logo.png) no-repeat 50% 50% #1a1a1a;}

.loadingUi{z-index:9999999;position:fixed;top:0;left:0;width:100%;height:100%;}
.loadingUi:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;opacity:.4}
.loadingUi div{position:absolute;top:0;left:0;right:0;bottom:0;width:320px;height:92px;line-height:92px;margin:auto;text-align:center;}
.loadingUi div span{display:inline-block;height:30px;width:30px;margin:0 4px;vertical-align:middle;border-radius:30px;animation:loading 1.2s infinite ease backwards;}
.loadingUi div .circle1{animation-delay:.1s;background:#1e9fe1}
.loadingUi div .circle2{animation-delay:.25s;background:#2aaf8e}
.loadingUi div .circle3{animation-delay:.35s;background:#a9d467}
.loadingUi div .circle4{animation-delay:.45s;background:#8c5edf}
@-webkit-keyframes loading{0%, 100%{transform: scale(0);} 40%, 60%{transform: scale(1);}}

header.load{opacity:1;top:0;}

footer{position:fixed;;bottom:0;left:0;right:0;color:rgba(255, 255, 255, .6)}
footer span~span:before{background:rgba(255, 255, 255, .6)}

.dbody{padding-top:0;background:#fff}
.games{position:relative;height:100dvh;}
.games .sliderJs{height:100%;overflow:hidden}
.games .item{position:relative;width:100%;height:100%;display:flex;align-items:center;}
.games .img{position:absolute;top:0;left:0;right:0;bottom:0;transform:scale(1.1);transition:transform 1s ease;}
.swiper-slide-active .img{transform: scale(1);}
.swiper-slide-active .box{opacity:1 ! important;bottom:0 ! important}
.games .box{opacity:0;position:relative;z-index:1;width:1000px;flex:0 0 1000px;bottom:-30px;margin-left:50%;left:-960px;text-align:center;font-size:0;transition:all .8s ease-in-out;}
.games .box p{margin-bottom:26px;}
.games .box a{display:inline-block;height:77px;}
.games .box a~a{margin-left:20px;}
.games .box .google{width:257px;background:url(../images/btn_google.png) no-repeat 50% 50%/contain}
.games .box .app{width:254px;background:url(../images/btn_app.png) no-repeat 50% 50%/contain}
.games .box .galaxy{width:288px;background:url(../images/btn_galaxy.png) no-repeat 50% 50%/contain}
.games .box .one{width:288px;background:url(../images/btn_one.png) no-repeat 50% 50%/contain}
.games .game1 .img{background:url(../images/game1_img.png) no-repeat 50% 50%/cover}
.games .game1 .box p{height:463px;font-size:0;background:url(../images/game1_tit.png) no-repeat 50% 50%}
.games .game2 .img{background:url(../images/game2_img.png) no-repeat 50% 50%/cover}
.games .game2 .box p{height:305px;font-size:0;background:url(../images/game2_tit.png) no-repeat 50% 50%}
.games .game3 .img{background:url(../images/game3_img.png) no-repeat 50% 50%/cover}
.games .game3 .box p{height:391px;font-size:0;background:url(../images/game3_tit.png) no-repeat 50% 50%}
.games .game4 .img{background:url(../images/game4_img.png) no-repeat 50% 50%/cover}
.games .game4 .box p{height:323px;font-size:0;background:url(../images/game4_tit.png) no-repeat 50% 50%}
.games .game4 .txt{position:absolute;z-index:1;top:0;bottom:0;right:314px;margin:auto 0;width:377px;height:59px;font-size:0;background:url(../images/txt.png) no-repeat 50% 50%}
.games .game5 .img{background:url(../images/game5_img.png) no-repeat 50% 50%/cover}
.games .game5 .box p{height:412px;font-size:0;background:url(../images/game5_tit.png) no-repeat 50% 50%}
.games .item.type .box{margin:0 0 0 50%;left:auto;right:80px}
.games .swiper-button-prev, .games .swiper-button-next{z-index:11;width:44px;height:91px;font-size:0;}
.games .swiper-button-prev{left:38px;background:url(../images/ic_arr1.png) no-repeat 50% 50%/contain}
.games .swiper-button-next{right:38px;background:url(../images/ic_arr2.png) no-repeat 50% 50%/contain}
.games .swiper-pagination{bottom:120px}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 10px;width:14px;height:14px}
.swiper-pagination-bullet{opacity:1;background:#a7a7a7}
.swiper-pagination-bullet-active{background:#fff}

@media (max-width: 1700px) { 
	.games .box{margin-left:170px;left:auto}
	.games .item.type .box{margin:0 0 0 auto;right:0;}
}

@media (max-width: 1600px) {
	.games .box p{background-size:contain ! important}
	.games .box a{height:66px;}
	.games .box .google{width:215px;}
	.games .box .app{width:218px;}
	.games .box .galaxy{width:244px;}
	.games .box .one{width:223px;}
	.games .game1 .box p{height:363px;}
	.games .game2 .box p{height:205px;}
	.games .game3 .box p{height:291px;}
	.games .game4 .box p{height:223px;}
	.games .game5 .box p{height:280px;}
	.games .swiper-pagination{bottom:80px}
}


@media (max-width: 920px) {
	body, html{background-size:70vw auto}
	
	.games .item{align-items:flex-end;}
	.games .box{width:100%;flex:1 1 auto;margin:0 auto 16vh ! important;left:auto ! important;right:auto ! important}
	.games .box a{height:55px}
	.games .box .google{width:179px;}
	.games .box .app{width:181px;}
	.games .box .galaxy{width:203px;}
	.games .box .one{width:186px;}
	.games .game1 .box{right:auto}
	.games .game1 .box p{height:215px;}
	.games .game2 .box p{height:159px;}
	.games .game3 .box p{height:206px;}
	.games .game4 .box p{height:197px;}
	.games .game5 .box p{height:197px;}
	.games .game1 .img{background:url(../images/mo/game1_img.png) no-repeat 50% 50%/cover}
	.games .game2 .img{background:url(../images/mo/game2_img.png) no-repeat 50% 50%/cover}
	.games .game3 .img{background:url(../images/mo/game3_img.png) no-repeat 50% 50%/cover}
	.games .game4 .img{background:url(../images/mo/game4_img.png) no-repeat 50% 50%/cover}
	.games .game5 .img{background:url(../images/mo/game5_img.png) no-repeat 50% 50%/cover}
	.games .swiper-button-prev, .games .swiper-button-next{width:12px;height:22px;}
	.games .swiper-button-prev{left:36vw;top:auto;bottom:10vh}
	.games .swiper-button-next{right:36vw;top:auto;bottom:10vh}
	.games .swiper-pagination{bottom:10vh}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 8px;width:10px;height:10px;}
}

@media (max-width: 540px) { 
	.games .box{margin-bottom:16vh ! important}
	.games .box a{height:38px}
	.games .box a~a{margin-left:4px;}
	.games .box .google{width:108px;}
	.games .box .app{width:107px;}
	.games .box .galaxy{width:124px;}
	.games .box .one{width:108px;}
	.games .game1 .box p{height:107px;}
	.games .game2 .box p{height:79px;}
	.games .game3 .box p{height:103px;}
	.games .game4 .box p{height:98px;}
	.games .game5 .box p{height:107px;}
	.games .swiper-button-prev, .games .swiper-button-next{width:6px;height:16px;}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px;width:7px;height:7px;}
}