/*
 * @Author: 关国祥
 * @Date:   2017-04-17 15:25:37
 * @Last Modified by:   关国祥
 * @Last Modified time: 2015-04-24 12:23:02
 */

/*框架、初始化*/
html,body {position: relative;height: 100%;}

body{background: #eee;font-family:"微软雅黑", Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}
strong{font-size: 72px;position: absolute;z-index: 20;color: #FFFFFF;}
.swiper-container {width: 100%;height: 100%;margin-left: auto;margin-right: auto;}

/*.swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}*/

.newswiper .swiper-container1 {width: 100%;height: 100%;text-align: center;}

.yuanaddclass {z-index: 999;position: absolute;}
.newswiper .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 100px;}
.newswiper {width: 100%;height: 100%;position: relative;}

.swiper-pagination-bullet {height: 20px;width: 20px;background: rgb(255,255,255);opacity: .5;}

.swiper-pagination-bullet-active {background: #ff9c00;opacity: .8;}
.swiper-wrapper{}
/*弹窗视频*/
.black-box{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.8);z-index: 1000;display: none;}
.video-box{width: 900px;height: 600px;position: absolute;top: 50%;left: 50%;margin-left: -450px;margin-top: -300px;z-index: 1001;display: none;}
/*第一屏*/
.screen1{width: 100%;height: 100%;position: relative;overflow: hidden;background: #000;}
.screen1 .bgvideo{width: 1920px;position: absolute;z-index: 1;}
.screen1 .bgbox{width: 100%;height: 100%;position: absolute;z-index: 10;opacity: .4;}
.screen1 .bgbox img{width: 100%;height: 100%;}

.screen1 .gamelogo{position: absolute;top: 30px;z-index: 20;left: 50%;right: 50%;width: 489px;height: 140px;margin-left: -244px;display: flex;justify-content: center;}
.screen1 .gamelogo img{height: 100%;margin: auto;}
.screen1 p{font-size: 0px;position: absolute;z-index: 20;color: #FFFFFF;text-align: center;line-height: 1;font-weight:bold ;width: 100%;top: 170px;}
.screen1 p span{font-size: 72px;display: inline-block;margin: 0 20px;opacity: 0;text-shadow: 0px 0px .4em #007AFF;}
/*字体动画*/
.fontanimate{animation: zijianju .5s ease-out forwards;animation-delay:.2s;}
@keyframes zijianju{
	0%{margin: 0 40px;opacity: 0;top: 160px;}
	80%{margin: 0 0px;opacity:1;top:205px;}
	100%{margin: 0 5px;opacity:1;top:205px;}
}
/*二维码区*/
.screen1 .qrcode{position: absolute;top: 350px;z-index: 20;font-size: 0;left: 50%;margin-left: -478px;opacity: 0;}
.screen1 .qrcode .videopic{border: 4px solid #62adff;overflow: hidden;box-shadow: 0 0 20px #007AFF;
position:relative;}
.screen1 .qrcode .videopic .playbtn {
	width: 80px;
	height: 80px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left: -40px;
    margin-top: -40px;
	background-image: url(../images/play.png);
	background-repeat: no-repeat;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	-moz-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
	display: inline-block;
	cursor: pointer;
	z-index: 1000;

}
.screen1 .qrcode .videopic:hover{box-shadow: 0 0 30px #ffcd6b;border: 4px solid #f8b700;}
.screen1 .qrcode .videopic img{transition: all 0.5s;cursor: pointer;}
.screen1 .qrcode .videopic img:hover{transform: scale(1.1);}
.screen1 .qrcode li{float:left;margin: 0 10px;background: #fff;border: 4px solid #10365f;box-shadow: 0 0 20px #007AFF;}
.screen1 .qrcode li img{display: block;}
.screen1 .qrcode li span{font-size: 17px;text-align: center;display: block;line-height: 60px;}
.screen1 .qrcode li div{background: #073340;text-align: center;padding: 15px 0;}
.screen1 .qrcode li div img{height: 56px;width: 46px;margin: 0 auto;}
.xia{animation: xia .5s ease-in-out forwards;animation-delay: .5s;}
/*向下滚动指示*/
.screen1 .roll{position: absolute;bottom: 30px;z-index: 999;left: 50%;margin-left: -33px;animation: updown 1s infinite linear; }

.screen1 .qrcode .videopic .playbtn:hover {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;
	-moz-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
@keyframes updown{0%{bottom: 30px;}50%{bottom: 10px;}100%{bottom: 30px;}}
@keyframes xia{
	0%{top: 300px;opacity: 0;}
	70%{top: 350px;opacity: 1;}
	100%{top: 300px;opacity: 1;}
}

/*第二屏*/
.newswiper .roll{position: absolute;bottom: 30px;z-index: 999;left: 50%;margin-left: -33px;animation: updown 1s infinite linear; }
.newswiper .case1{background: url(../images/section7.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}
.newswiper .case2{background: url(../images/section2.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}
.newswiper .case3{background: url(../images/section8.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}
.newswiper .case4{background: url(../images/section4.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}
.newswiper .case5{background: url(../images/section3.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}
.newswiper .case6{background: url(../images/section5.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}
.newswiper .case7{background: url(../images/section6.jpg) no-repeat center top;background-size:cover ;overflow: hidden;}

h3{font-size: 72px;font-weight: bold;color: #fff;line-height: 72px;text-shadow: 0px 0px .4em #007AFF;text-align: center;margin-top: 40px;}
.newswiper .eft{position: absolute;top: 110px;left: 50%;width: 570px;margin-left: -285px;}
h4{font-size: 40px;color: #fff;top: 140px;position: absolute;line-height: 50px;text-shadow: 0px 0px .4em #007AFF;width: 900px;text-align: center;left: 50%;margin-left: -450px;}
.fontanimate1{animation: dragTop 0.7s ease-in-out both;animation-delay: .5s;}
@keyframes dragTop {
    0% {
        opacity:0;
        transform:translateY(-70px)
    }
    60% {
        opacity:1;
        transform:translateY(20px)
    }
    90% {
        transform:translateY(-5px)
    }
    97% {
        transform:translateY(-1px)
    }
    100% {
        transform:translateY(0px)
    }
}



/*case2*/
.case2 h4{top: 140px;}
.mapbox{width: 786px;height: 384px;position: absolute;top: 270px;left: 50%;margin-left: -393px;}
.mapbox ul{overflow: hidden;}
 .mapbox ul li{float: left;margin-left:10px;position: relative;}
 .mapbox ul li div{height: 60px;background: rgba(0,0,0,.6);position: absolute;top: 50%;margin-top: -30px;width: 150px;text-align: center;line-height: 60px;font-size: 36px;left: 50%;margin-left: -75px;color: #fff;}
 .mapbox ul li a img{display: block; width: 184px;height: 212px;}

 .mapbox .map-down{margin-left: 96px;margin-top: -42px;}
 


.icon-list{width: 1100px;height: 454px;overflow: hidden;position: absolute;top:220px;left: 50%;margin-left: -550px;}
.icon-list li{background: url(../images/Guild_flag_bg.png) no-repeat center center;float: left;width: 176px;height: 176px;margin:20px 20px 20px 20px;}
 .icon-list li a{width: 100%;height: 100%;display: block;position: relative;}
 .icon-list li a img{line-height: 176px;text-align: center;position: absolute;top: -20px;left: -20px;transition: all .3s ease-out;}
 .icon-list li a img:hover{transform: scale(1.1);}
 .icon-list li a .left-leave{left: -14px;}
 .icon-list li a .right-leave{left: -25px;}
 
/*第三屏*/
.screen3{width: 100%;height: 100%;position: relative;overflow: hidden;background: #000;background: url(../images/section9.jpg) no-repeat center top;background-size: cover;}
.screen3 h3{margin-top: 30px;text-align: center;}
.screen3 h4{margin-top: 30px;text-align: center;width: 100%;position: static;margin-left: auto;}
 .botm-list{overflow: hidden;position: absolute;bottom: 108px;left: 50%;margin-left: -905px;}
 .botm-list li{width: 281px;height: 502px; float: left;margin: 0 10px;position: relative; background: url(../images/s9_bg.png) no-repeat center bottom;transition: all .3s ease-out;}
 .botm-list li:hover{transform: scale(1.1);}
 .botm-list li img{width: 240px;position: absolute;top: 40px;left: 50%;margin-left: -120px;}
 .botm-list li p{position: absolute;bottom: 220px;width: 100%;text-align: center;color: #fff;font-size: 36px;}
 .botm-list li span{position: absolute;top: 340px;width: 250px;left: 50%;margin-left: -125px; text-align: center;font-size: 19px;line-height: 28px;color: #fff;font-size: 19px;}
/*个别图片需要调整位置和大小*/
 /*.botm-list li .botm-list-fix1{width: 290px;top: 70px;margin-left: -145px;}*/
 .botm-list li .botm-list-fix2{width: 270px;top: 50px;margin-left: -135px;}
 

/*尾部*/
.screen3 .footer{background: #14313f;position: absolute;bottom: 0;width: 100%;}
.footer{height: 108px;background: #14313f;position: absolute;bottom: 0;width: 100%;padding: 30px 0 30px 0;color: #FFFFFF;}
.footer ul{width: 1000px;margin: 0 auto;}
.footer ul li{text-align: center;margin-bottom: 10px;}
.footer ul li a{margin: 0 10px;color: #fff;}


/*响应式*/
@media only screen and (max-width: 1024px) {
	.botm-list{width: 1100px;left: 50%;margin-left: -550px;bottom: 50px;}
	 .botm-list li{width: 160px;}
	 .botm-list li img{width: 180px;margin-left: -90px;top: 100px;}
	/*个别图片需要调整位置和大小*/
	 /*.botm-list li .botm-list-fix1{width: 180px;top: 100px;margin-left: -90px;}*/
	 .botm-list li .botm-list-fix2{width: 180px;top: 100px;margin-left: -90px;}
	 .botm-list li p{font-size:25px ;bottom: 220px;}
	 .botm-list li span{position: absolute;top: 300px;width: 140px;left: 50%;margin-left: -70px; text-align: center;font-size: 13px;line-height: 20px;}
.footer{height: 108px;background: #14313f;position: absolute;bottom: 0;width: 100%;padding: 30px 0 30px 0;}
.footer ul{width: 1000px;margin: 0 auto;}
.footer .foot-info .foot-info1{width: 206px;padding: 0;float: left;height: 100%;}
.footer .foot-info .foot-info2{float: left;height: 100%;width: 778px;padding: 0px 37px;}
	 
}


@media only screen and (min-width: 1024px) and (max-width:1440px) {
	.botm-list{width: 1100px;left: 50%;margin-left: -550px;bottom: 50px;}
	 .botm-list li{width: 160px;}
	 .botm-list li img{width: 180px;margin-left: -90px;top: 100px;}
	/*个别图片需要调整位置和大小*/
	 /*.botm-list li .botm-list-fix1{width: 180px;top: 100px;margin-left: -90px;}*/
	 .botm-list li .botm-list-fix2{width: 180px;top: 100px;margin-left: -90px;}
	 .botm-list li p{font-size:25px ;bottom: 220px;}
	 .botm-list li span{position: absolute;top: 300px;width: 140px;left: 50%;margin-left: -70px; text-align: center;font-size: 13px;line-height: 20px;}
.footer{height: 108px;background: #14313f;position: absolute;bottom: 0;width: 100%;padding: 30px 0 30px 0;}
.footer .foot-info .foot-info1{width: 206px;padding: 0;float: left;height: 100%;}
.footer .foot-info .foot-info2{float: left;height: 100%;width: 778px;padding: 0px 37px;}
	 
}


@media only screen and (min-width: 1440px) and (max-width:1910px) {
	
	
	 .botm-list{width: 1400px;left: 50%;margin-left: -700px;bottom: 50px;}
	 .botm-list li{width: 200px;}
	 .botm-list li img{width: 200px;margin-left: -100px;top: 80px;}
	/*个别图片需要调整位置和大小*/
	 /*.botm-list li .botm-list-fix1{width: 220px;top: 80px;margin-left: -110px;}*/
	 .botm-list li .botm-list-fix2{width: 220px;top: 80px;margin-left: -110px;}
	 .botm-list li p{font-size:25px ;bottom: 220px;}
	 .botm-list li span{position: absolute;top: 300px;width: 140px;left: 50%;margin-left: -70px; text-align: center;font-size: 13px;line-height: 20px;}
.footer{height: 108px;background: #14313f;position: absolute;bottom: 0;width: 100%;padding: 30px 0 30px 0;color: #fff;}
.footer .foot-info .foot-info1{width: 206px;padding: 0;float: left;height: 100%;}
.footer .foot-info .foot-info2{float: left;height: 100%;width: 778px;padding: 0px 37px;}
	 
}
.swiper-button-next{background: url(../images/arr.png) no-repeat center -70px;width: 70px;height: 70px;margin-right: 40px;opacity: .6;}
.swiper-button-prev{background: url(../images/arr.png) no-repeat center top;width: 70px;height: 70px;margin-left: 40px;opacity: .6;}