body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
fieldset,img{border:0;}
ul,ol{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration: none;color:#000;}
a:hover{text-decoration: underline;color:#000;}
small{font-size:12px;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}
label,input,select,form img,button,textarea{vertical-align:middle;outline:none}
address,caption,cite,code,dfn,em,strong,th,optgroup{font-style:normal;font-weight:normal;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{display:inline-block;}
/* Hides from IE-mac \*/
* html .clear{height:1%;}
.clear{display:block;}
/* End hide from IE-mac */
sup{font-size:14px}
html,body{height:100%;}
body{
	font:24px "宋体",sans-serif;
	padding-top: constant(safe-area-inset-top);   /*为导航栏+状态栏的高度 88px  */          
    padding-left: constant(safe-area-inset-left);   /*如果未竖屏时为0*/                
    padding-right: constant(safe-area-inset-right); /*如果未竖屏时为0  */              
    padding-bottom: constant(safe-area-inset-bottom);/*为底下圆弧的高度 34px*/
}
audio{position:absolute;left:0;top:-9999px;display:none}
input::input-placeholder{color:  #fff ;} /* 有些资料显示需要写，有些显示不需要，但是在编辑器webstorm中该属性不被识别 */
::-webkit-input-placeholder { /* WebKit browsers */ 
color: #646464; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #646464; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #646464; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #646464; 
} 

select:{

width: auto;
padding: 0 2%;
margin: 0;

}

option{

text-align:center;

}
body,html{width:750px;height:100%;background:#000}
.loading{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 999;background:#fee101}
.loading .loading-g1{position:absolute;left:50%;margin-left:-177px;top:50%;margin-top:-50px}
.loading .loading-g2{position:absolute;left:50%;margin-left:-182px;top:50%;margin-top:-125px;display:none}
.loading .p3{position:absolute;left:205px;top:76px;animation:snowani 1s linear infinite}
.loading-bar-box{position:absolute;left:0;top:0;}
.loading-bar-box .loading-bar{width:0;height:14px;border-radius:7px;background:#fff}
#rate{position: absolute;top:30px;width: 100%;font-size: 24px;text-align: center;color: #fff;font-family:Arial, Helvetica, sans-serif}
.tt1{width:425px;height:54px;border:2px solid #646464;background:#f9f9f8;text-align:center;font-size:22px;font-weight:normal;margin-bottom:30px;border-radius:5px;color:#2a2a2a}
.gray-box{position:fixed;width:100%;height:2000px;background:rgba(0,0,0,0.9);left:0;top:0;z-index:100;display:none}
.qr-pop{position:absolute;left:50%;top:100px;margin-left:-252px;z-index:101;display:none}
.orient{width:100%;height:100%;position:fixed;left:0;top:0;background:#000000;background-size:cover;z-index:9999;display:none;}
.orient div{position:absolute;left:50%;margin-left:-250px;top:50%;width:500px;text-align:center;font-size:24px;margin-top:-12px; color:#fff}
.wrap{width:750px;height:100%;overflow:hidden;position:absolute;left:0;top:0}
.wrap.index{background:url(../img/bg.jpg) no-repeat;background-size:cover}

.arrow{position:absolute;left:0;bottom:25px;animation:arrow 1.5s linear infinite;z-index:100}

.swiper-container{width:100%;height:100%}
.group1{background:#000}
.group1 .mask{position:absolute;left:0;top:50%;margin-top:-667px;width:100%;height:1334px;background:url(../img/page1_mask_bg.png) no-repeat;z-index:10;display:none}
.group1 #v1{width:100%;height:100%;position:absolute;left:0;top:50%;margin-top:-315px;z-index:5;overflow:hidden; }
.group1 .logo{position:absolute;top:50%;margin-top:-490px;left:0;z-index:15;display:none;animation:fadeLeft .5s ease-out forwards}
.group1 .t1{position:absolute;bottom:50%;left:0;z-index:15;display:none;animation:fadeUp .5s ease-out forwards}
.group1 .t2{position:absolute;top:50%;margin-top:17px;left:0;z-index:15;display:none;animation:fadeUp .5s ease-out forwards}
.group1 .b1{position:absolute;top:50%;margin-top:250px;left:128px;z-index:15;display:none;animation:fadeUp .5s ease-out forwards}


.group2{background:#fee101}
.group2 .p1{position:absolute;left:0;top:50%;margin-top:-540px;display:none}
.group2 .t1{position:absolute;left:166px;margin-top:255px;top:50%;display:none;animation:fadeUp .5s ease-out forwards}
.group2 .t2{position:absolute;left:58px;margin-top:300px;top:50%;display:none;animation:fadeUp .5s ease-out forwards}
.group2 .t3{position:absolute;left:214px;margin-top:340px;top:50%;display:none;animation:fadeUp .5s ease-out forwards}
.group2 .t4{position:absolute;left:239px;margin-top:380px;top:50%;display:none;animation:fadeUp .5s ease-out forwards}
.group2 .b1{position:absolute;left:175px;top:50%;margin-top:430px;display:none;animation:fadeUp .5s ease-out forwards}


.group3{background:#212226 url(../img/page3_bg.jpg) no-repeat center bottom}
.group3 .t1{position:absolute;left:0;top:50%;margin-top:-520px;display:none;animation:fadeUp .5s ease-out forwards}
.group3 .t2{position:absolute;left:0;top:50%;margin-top:-463px;display:none;animation:fadeUp .5s ease-out forwards}
.group3 .t3{position:absolute;left:0;top:50%;margin-top:-413px;display:none;animation:fadeUp .5s ease-out forwards}
.group3 .t4{position:absolute;left:0;top:50%;margin-top:-325px;display:none;animation:fadeUp .5s ease-out forwards}
.group3 #v2{width:100%;height:100%;position:absolute;left:0;top:50%;margin-top:-245px;z-index:0;overflow:hidden;display:none}
.group3 .b1{position:absolute;left:174px;top:50%;margin-top:218px;display:none;animation:fadeUp .5s ease-out forwards}
.group3 .p1{position:absolute;left:50px;bottom:-150px;display:none;animation:fadeLeft .5s ease-out forwards}
.group3 .p2{position:absolute;right:45px;bottom:-150px;display:none;animation:fadeRight .5s ease-out forwards}

.groupgame{background:#fee101}
.groupgame .content{width:100%; height:1386px; position:absolute; left:0; top:50%; margin-top:-693px;}
.groupgame .content .bigimg{width:100%;animation:fadeIn .5s ease-out forwards;}

.weixinopenevent{z-index:9999; width:100vw;  height:100vh; background:rgba(0,0,0,0.85); position:fixed;-webkit-display:flex;
        display:flex;
        -webkit-align-items:center;
        align-items:center;
        -webkit-justify-content:center;
        justify-content:center;
		flex-flow: column;
		color:#FFF}
		.weixinopenevent p{margin-bottom:10px;}

.group4{background:#fee101}
.group4 .p1{position:absolute;left:0;top:50%;margin-top:-210px;display:none;animation:fadeLeft .5s ease-out forwards}
.group4 .p2{position:absolute;right:5px;top:50%;margin-top:-210px;display:none;animation:fadeRight .5s ease-out forwards}
.group4 .t1{position:absolute;left:0;top:50%;margin-top:-500px;display:none;animation:fadeUp .5s ease-out forwards}
.group4 .t2{position:absolute;left:0;top:50%;margin-top:-260px;display:none;animation:fadeUp .5s ease-out forwards}
.group4 .t3{position:absolute;left:0;top:50%;margin-top:280px;display:none;animation:fadeUp .5s ease-out forwards}
.group4 .b1{position:absolute;left:175px;top:50%;margin-top:430px;display:none;animation:fadeUp .5s ease-out forwards}
.group4 .commingsoon{position:absolute;left:0;top:50%;margin-top:-200px; width:750px; height:300px; font-size:42px; text-align:center;  display:none;animation:fadeUp .5s ease-out forwards}
.group4 .commingsoon img{margin-bottom:30px;}

.groupf{background:#fee101}
.groupf .content{width:100%; height:980px; position:absolute; left:0; top:50%; margin-top:-490px;}
.groupf h3{display:none;animation:fadeLeft .5s ease-out forwards; font-size:50px; text-align:center; margin-bottom:20px; }
.groupf h4{display:none;animation:fadeRight .5s ease-out forwards; font-size:36px; text-align:center; margin-bottom:50px; }
.groupf .groupfimg{display:none;animation:fadeUp .5s ease-out forwards}
.groupf .text{display:none;animation:fadeUp .5s ease-out forwards;font-size:24px; line-height:1.85; text-align:left; padding:75px; }
.groupf .btn{display:none;animation:fadeUp .5s ease-out forwards; text-align:center; }
.groupf .t2{position:absolute;left:0;top:50%;margin-top:-369px;display:none;animation:fadeUp .5s ease-out forwards}
.groupf .t3{position:absolute;left:0;top:50%;margin-top:244px;display:none;animation:fadeUp .5s ease-out forwards}
.groupf .b1{position:absolute;left:175px;top:50%;margin-top:420px;display:none;animation:fadeUp .5s ease-out forwards}

.groupl{background:#000}
.groupl .content{width:100%; height:1280px; position:absolute; left:0; top:50%; margin-top:-640px;}
.groupl .content .bigimg{width:100%;animation:fadeIn .5s ease-out forwards;}
.groupl .btn{display:none;animation:fadeUp .5s ease-out forwards; text-align:center; position:absolute; bottom:15%; left:50%; margin-left:-200px;}


.group5{background:#353535}
.group5 .p1{position:absolute;left:92px;top:50%;margin-top:-347px;text-align:center;color:#FFF;font-size:18px;display:none}
.group5 .p1 img{display:block;margin-bottom:28px;animation:fadeLeft .5s ease-out forwards}
.group5 .p2{position:absolute;left:432px;top:50%;margin-top:-347px;text-align:center;color:#FFF;font-size:18px;display:none}
.group5 .p2 img{display:block;margin-bottom:28px;animation:fadeRight .5s ease-out forwards}
.group5 .t1{position:absolute;left:0;top:50%;margin-top:-550px;display:none;animation:fadeUp .5s ease-out forwards}
.group5 .t2{position:absolute;left:96px;margin-top:58px;top:50%;color:#ffffff;font-size:30px;display:none;animation:fadeUp .5s ease-out forwards}
.group5 .links{font-size:20px;display:none}
.group5 .links.list1{position:absolute;left:96px;top:50%;margin-top:140px;animation:fadeRight .5s ease-out forwards}
.group5 .links.list2{position:absolute;left:332px;top:50%;margin-top:140px;animation:fadeRight .5s ease-out forwards}
.group5 .links.list3{position:absolute;left:556px;top:50%;margin-top:140px;animation:fadeRight .5s ease-out forwards}
.group5 .links div{color:#7a7a7a;font-size:22px;height:62px}
.group5 .links ul{}
.group5 .links ul li{list-style-type:none;margin-bottom:20px;}
.group5 .links ul li a{text-decoration:underline;color:#ffffff}
.group5 .footer{width:750px;height:100px;position:absolute;bottom:0;background:#000000;color:#7d7d7d;font-size:18px;line-height:100px;text-align:center;display:none;animation:fadeUp .5s ease-out forwards}

.v-text{position:absolute;left:0;top:0}

.music-icon{position:absolute;right:24px;top:24px;z-index:6;display:none}

.swiper-slide{overflow:hidden}
.swiper-container{height:100%}

.scroll-tips{position:absolute;top:50%;margin-top:-293px;left:50%;margin-left:-298px;z-index:100;display:none}

#artisans-box{width:100%; height:1000px; position:absolute; top:50%; left:0; margin-top:-500px;}
.art-frist{opacity:0;}




@keyframes fadeUp{
	0%{transform:translate3d(0,30px,0);opacity:0}
	100%{transform:translate3d(0,0,0);opacity:1}
}

@-webkit-keyframes fadeUp{
	0%{-webkit-transform:translate3d(0,30px,0);opacity:0}
	100%{-webkit-transform:translate3d(0,0,0);opacity:1}
}



@keyframes fadeRight{
	0%{transform:translate3d(50px,0,0);opacity:0}
	100%{transform:translate3d(0,0,0);opacity:1}
}

@-webkit-keyframes fadeRight{
	0%{-webkit-transform:translate3d(50px,0,0);opacity:0}
	100%{-webkit-transform:translate3d(0,0,0);opacity:1}
}


@keyframes fadeLeft{
	0%{transform:translate3d(-50px,0,0);opacity:0}
	100%{transform:translate3d(0,0,0);opacity:1}
}

@-webkit-keyframes fadeLeft{
	0%{-webkit-transform:translate3d(-50px,0,0);opacity:0}
	100%{-webkit-transform:translate3d(0,0,0);opacity:1}
}



.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
	opacity: 0;
	pointer-events: none;
	width: 5px;
}
video::-webkit-media-controls {
  display:none !important;
}

@keyframes sharet1ani{
	0%{background-position:0 0}
	33%{background-position:-187px 0}
	66%{background-position:-374px 0}
	100%{background-position:0 0}
}

@-webkit-keyframes sharet1ani{
	0%{background-position:0 0}
	33%{background-position:-187px 0}
	66%{background-position:-374px 0}
	100%{background-position:0 0}
}


@keyframes arrow{
	0%{transform:translate(0,0)}
	50%{transform:translate(0,10px)}
	100%{transform:translate(0,0)}
}

@-webkit-keyframes arrow{
	0%{-webkit-transform:translate(0,0)}
	50%{-webkit-transform:translate(0,10px)}
	100%{-webkit-transform:translate(0,0)}
}


@keyframes snowani{
	0%{transform:rotate(0)}
	100%{transform:rotate(360deg)}
}

@-webkit-keyframes snowani{
	0%{-webkit-transform:rotate(0)}
	100%{-webkit-transform:rotate(360deg)}
}


@keyframes ballani{
	0%{transform:rotate(-10deg)}
	50%{transform:rotate(10deg)}
	100%{transform:rotate(-10deg)}
}

@-webkit-keyframes ballani{
	0%{-webkit-transform:rotate(-10deg)}
	50%{-webkit-transform:rotate(10deg)}
	100%{-webkit-transform:rotate(-10deg)}
}

@keyframes ballani2{
	0%{transform:rotate(10deg)}
	50%{transform:rotate(-10deg)}
	100%{transform:rotate(10deg)}
}

@-webkit-keyframes ballani2{
	0%{-webkit-transform:rotate(10deg)}
	50%{-webkit-transform:rotate(-10deg)}
	100%{-webkit-transform:rotate(10deg)}
}


@keyframes countdown{
	0%{transform:translate(0,0)}
	50%{transform:translate(-170px,0)}
	100%{transform:translate(-340px,0)}
}

@-webkit-keyframes countdown{
	0%{-webkit-transform:translate(0,0)}
	50%{-webkit-transform:translate(-170px,0)}
	100%{-webkit-transform:translate(-340px,0)}
}