@charset "utf-8";

/*html{ overflow-x:hidden;}*/
/*隱藏橫向卷軸*/

.bg{ background:#000; }

.c1{ height:0; /*padding-bottom:195%;*/ padding-bottom:265%; background: url(../img/m_main.jpg)center top no-repeat #000; background-size: 100% auto;}

/*=====================page============================*/
.fb_information,.ad_pc,.sale,.visual{ display: none;}
@media ( max-width:960px){
	.fe_like{ display: none !important;}
	.btn-play, nav>.fans{ display: none;}
}

.ad{ position:absolute; width:100%; padding-top:115%;}

/*btn============================*/
nav{
	width: 100%;
    height: auto;
	/*transform: translate(-50% ,145%);*/
    transform: translate(-50% ,230%);
}

nav>a{
	width: 100%;
	height: 0;
	padding-bottom:19.8% ;
	margin: 0 auto;
	background: url(../img/m_bt.gif)center top no-repeat ; 
	background-size: 100% auto;
	 
}

nav>.apk{ background-position: 0 0;}
nav>.google{ background-position: 0 33.5%;}
nav>.appstore{ background-position: 0 67%;}
nav>.gash{ background-position: 0 100%;}


/*===============================introduction============================*/	

.c2{
	padding-top:30%;
	background: url(../img/m_introduce_bg.png)center top no-repeat #000; 
	background-size: 100% auto;
}
.c2>.m_introduction{
	width: 85%;
	left: 50%;
	transform: translateX( -50%);	
} 
.c2>.m_introduction img{ width:100%; }
.m_sb{ display:flex; width:20%; margin: 0 auto; padding: 10% 0 5% 0; }
.m_sb>.sfb,.m_sb>.line{ padding-bottom: 90%; flex: 1;  margin: 5%;}
.m_sb>.sfb{background:url('../img/fb.png') no-repeat; }
.m_sb>.line{background:url('../img/line.png')no-repeat;}
.m_sb>.sfb,.m_sb>.line{background-size: 100% auto; }



/*===============================pc============================*/	

.fe_like{ display: block; width: 150px; margin-top: -1px; transform:translate(300% ,27px); z-index: 10;}
@media ( max-width:1367px) {
	.fe_like{ transform:translate(200% ,27px) !important;}
}
/* 小偉新增end */

@media (min-width:981px){
	.bg{ height: 1780px;background: url(../img/pc_bg.jpg)center top no-repeat;display: block;}

	.c1{ height:940px; background:none; padding-bottom:0;}
	.c2{ position:absolute; background:none; padding-top:0;}
	.ad,.fb_information,.m_sb{display: none;}

	nav{ width:1280px; height:140px; transform: translate(-640px ,748px);  z-index: 10;}

	nav>a { width:256px; height:140px; padding-bottom:0; margin: 0 auto; background: url(../img/pc_bt.png)center top no-repeat ; float:left;}

	
	nav>.apk{ background-position: 0 0;}
	nav>.google{ background-position: -256px 0;}
	nav>.appstore{ background-position: -512px 0;}
	nav>.gash{ background-position: -768px 0;}
	nav>.fans{ background-position: -1024px 0;}
	
	nav>.apk:hover{ background-position: 0 -140px; }
	nav>.google:hover{ background-position: -256px -140px;}
	nav>.appstore:hover{ background-position: -512px -140px;}
	nav>.gash:hover{ background-position: -768px -140px; }
	nav>.fans:hover{ background-position: -1024px -140px;}
	
	nav>.sale{ width: 142px; height: 153px; display: block; background:url(../img/sale.gif)center no-repeat; top: -160px; left: 85px; animation: up 1s infinite; z-index: 20;}
	

	.btn-play{ position:absolute; width:120px; height:120px; margin-left:-60px; top:360px; background:url(../img/btn-start.png) no-repeat; background-size:cover; z-index:9999; outline:none;}
	

	.pc_introduction{
		width: 710px; 
		height: 532px;
		left:50%;
		margin-left: -97px;
		top: 190px;
		box-sizing: border-box;
		z-index: 5; 
		 
		display: block;
	}
	
	.c2>.pc_introduction img { width:100%; margin:0 auto;}
	
	.owl-theme .owl-nav.disabled+.owl-dots{ margin-top:1%;}

	.fb_information{ display:block; margin-left:-613px; top:80px;}

	.qr{ width:205px; height:339px; display:block; position:fixed; right:10px; top:45vh; background:url(../img/qr.png)center no-repeat; z-index:28;}
	.qr>.top{ display:block; width:100%; height:12px; margin-top:266px; background: url(../img/qr_top.png) center no-repeat;}

	.visual{ display: block; overflow:hidden; width:100%; height:940px; margin:0 auto;}
	.visual>.effect{ top: 51%; margin-left: -380px; width: 760px; height: 236px; background: url(../img/effect.png) no-repeat;}

}