@charset "utf-8";
/* CSS Document */
.hbx{
	position:relative;
	width:100%;
	padding-bottom:50%;/*1000*/
	display:block;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image:url(../images/index.jpg);
	background-size:100% auto;
	overflow:hidden;
	/**/
	transition: all .5s;
	}
.hbx.on{filter:blur(50px)contrast(200%);}
.hbx_a{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image:url(../images/index_a.jpg);
	background-size:100% auto;
	top:0;
	left:0;
	animation: brilla 2.5s alternate infinite;
	}
.wfn{
	position:absolute;
	width:2.5%;/*50*/
	padding-bottom:17.75%;/*355*/
	display:block;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image:url(../images/wfn.png);
	background-size:100% auto;
	bottom:0;
	left:0;
	}
.h_p{
	position:absolute;
	width:40.5%;/*810*/
	padding-bottom:33.25%;/*665*/
	display:block;
	background-repeat:no-repeat;
	background-position:0% 100%;
	background-image:url(../images/h_p.png);
	background-size:100% auto;
	bottom:0;
	left:0;
	opacity:0;
	/**/
	animation:fadeInLeft .8s ease .3s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInLeft .8s ease .3s;
	-webkit-animation-fill-mode:forwards ;
	}
.slonag{
	position:absolute;
	width:38.05%;/*761*/
	padding-bottom:21.5%;/*430*/
	display:block;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image:url(../images/slonag.png);
	background-size:100% auto;
	bottom:0;
	right:0;
	opacity:0;
	/**/
	animation:fadeInRight 1s ease .5s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight 1s ease .5s;
	-webkit-animation-fill-mode:forwards;
	}
.rtbx{
	position:absolute;
	right:1.65%;/*33*/
	top:1.2vw;/*24*/
	/*z-index:1;*/
	}
.rtbx > a{position:relative;}
.rtbx > a.fbbt_h{
	width:2.55vw;/*51*/
	padding-bottom:2.55vw;
	display:inline-block;
	margin:0 0 0 .75vw;/*15*/
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/fb2_icon.png);
	background-size:100% auto;
	}
.rtbx > a.ios_h,.rtbx > a.google_h{
	width:7.5vw;/*150*/
	padding-bottom: 2.3vw;/*50  2.5*/
	display:inline-block;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:auto 90%;
	border: .12vw solid #FFF;/*2*/
	border-radius:2.5vw;/*50*/
	}
.rtbx > a.google_h{
	margin:0 0 0 .75vw;/*15*/
	background-image:url(../images/google.png);
	}
.rtbx > a.ios_h{
	background-image:url(../images/ios.png);
	}
.rtbx > a.store_a{
	display:none;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/store_a.png);
	background-size:100% auto;
	}
.h_bt_1,.h_bt_2,.h_bt_3{
	position:absolute;
	width:17.2%;/*344*/
	padding-bottom:7.2%;/*144*/
	display:block;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	/**/
	bottom:1.4vw;/*28*/
	opacity:0;
	filter:brightness(1);
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.h_bt_1.on,.h_bt_2.on,.h_bt_3.on{filter:brightness(50%);}
.h_bt_1::before,.h_bt_2::before,.h_bt_3::before{
	position:absolute;
	width:100%;
	height:100%;
	display: block;
	content: "";
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	transition: all .5s;
	top:0;
	left:0;
	opacity:0;
	}
.h_bt_1:hover::before,.h_bt_2:hover::before,.h_bt_3:hover::before{opacity:1;}
	
.h_bt_1{
	left:13.3%;/*266*/
	background-image:url(../images/h_bt_1.png);
	/**/
	animation:fadeInUp .5s ease .25s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInUp .5s ease .25s;
	-webkit-animation-fill-mode:forwards;
	}
.h_bt_1::before{background-image:url(../images/h_bt_1a.png);}	
.h_bt_2{
	left:30.2%;/*604*/
	background-image:url(../images/h_bt_2.png);
	/**/
	animation:fadeInUp .5s ease .35s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInUp .5s ease .35s;
	-webkit-animation-fill-mode:forwards;
	}
.h_bt_2::before{background-image:url(../images/h_bt_2a.png);}	
.h_bt_3{
	left:46.95%;/*939*/
	background-image:url(../images/h_bt_3.png);
	/**/
	animation:fadeInUp .5s ease .6s;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInUp .5s ease .6s;
	-webkit-animation-fill-mode:forwards;
	}
.h_bt_3::before{background-image:url(../images/h_bt_3a.png);}			
/**/
.hbg{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	pointer-events:none; 
	left:0;
	top:0;
	background-color:rgba(0,0,0,0);
	backdrop-filter: blur(0);
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.hbg.on{
	background-color:rgba(0,0,0,.75);
	backdrop-filter: blur(2px);
	/*z-index:1;*/
	}
.hbg.on2{
	background-color:rgba(0,0,0,.2);
	backdrop-filter: blur(1px);
	/*z-index:1;*/
	}
.h_bt_1c,.h_bt_2c{
	position:absolute;
	width:57.9vw;/*1158*/
	padding-bottom:32.5vw;/*650*/
	display:block;
	pointer-events:none; 
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	bottom:90%;
	opacity:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.h_bt_1:hover .h_bt_1c,.h_bt_2:hover .h_bt_2c{
	opacity:1;
	bottom:120%;
	}
	
.h_bt_1c{
	left:-50%;
	background-image:url(../images/h_bt_1c_1.png);
	}
.h_bt_2c{
	left:-100%;
	background-image:url(../images/h_bt_2c_1.png);
	}	
.h_bt_2c > p,.h_bt_1c > p{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
/**/
.h_bt_1c > p:nth-child(1){
	background-image:url(../images/h_bt_1c_5.png);
	top:6%;
	left:30%;
	opacity:0;
	transition: all .2s ease;
	}
.h_bt_1c > p:nth-child(2){
	background-image:url(../images/h_bt_1c_4.png);
	top:10%;
	left:30%;
	opacity:0;
	transition: all .3s ease;
	}	
.h_bt_1c > p:nth-child(3){
	background-image:url(../images/h_bt_1c_3.png);
	top:6%;
	left:0;
	opacity:0;
	transition: all .5s ease;
	}
.h_bt_1c > p:nth-child(4){
	background-image:url(../images/h_bt_1c_2.png);
	top:0;
	left:0;
	}
.h_bt_1:hover .h_bt_1c > p:nth-child(1){
	opacity:1;
	top:0;
	left:0;
	transition: all .35s ease .36s;
	}
.h_bt_1:hover .h_bt_1c > p:nth-child(2){
	opacity:1;
	top:0;
	left:0;
	transition: all .35s ease .15s;
	}	
.h_bt_1:hover .h_bt_1c > p:nth-child(3){
	opacity:1;
	top:0;
	transition: all .5s ease .15s;
	}
/**/
.h_bt_2c > p:nth-child(1){
	background-image:url(../images/h_bt_2c_5.png);
	top:10%;
	left:30%;
	opacity:0;
	transition: all .2s ease;
	}
.h_bt_2c > p:nth-child(2){
	background-image:url(../images/h_bt_2c_4.png);
	top:10%;
	left:30%;
	opacity:0;
	transition: all .3s ease;
	}	
.h_bt_2c > p:nth-child(3){
	background-image:url(../images/h_bt_2c_3.png);
	top:6%;
	left:0;
	opacity:0;
	transition: all .5s ease;
	}
.h_bt_2c > p:nth-child(4){
	background-image:url(../images/h_bt_2c_2.png);
	top:0;
	left:0;
	}
.h_bt_2:hover .h_bt_2c > p:nth-child(1){
	opacity:1;
	top:0;
	left:0;
	transition: all .35s ease .36s;
	}
.h_bt_2:hover .h_bt_2c > p:nth-child(2){
	opacity:1;
	top:0;
	left:0;
	transition: all .35s ease .15s;
	}	
.h_bt_2:hover .h_bt_2c > p:nth-child(3){
	opacity:1;
	top:0;
	transition: all .5s ease .15s;
	}
	
	

@media only screen and (max-width:1600px){
/**/

	
	
}
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1200px){
/**/

	
}
@media only screen and (max-width:1000px){	
/**/

}
@media only screen and (max-width:800px){
/**/

}	
@media only screen and (max-width:780px){
/**/
.hbx{
	padding-bottom:172.179487%;/*1343*/
	background-image:url(../images/index_m.jpg);
	overflow:hidden;
	}
.hbx_a{background-image:url(../images/index_a_m.jpg);}
.wfn{
	width:6.41%;/*50*/
	padding-bottom:45.511%;/*355*/
	bottom:69.23vw;/*540*/
	left:0.897vw;
	}
.h_p{
	width:100%;/*780*/
	padding-bottom:77.948%;/*608*/
	background-image:url(../images/h_p_m.png);
	bottom:0;
	left:0;
	}
.slonag{
	width:76.6%;/*598*/
	padding-bottom:52.5183%;/*410*/
	background-image:url(../images/slonag_m.png);
	bottom:15.51vw;/*121*/
	}
.rtbx{
	right:3.71794%;/*29*/
	top:4.6153vw;/*36*/
	}
.rtbx > a.fbbt_h{
	width:7.6923vw;/*60*/
	padding-bottom:7.6923vw;
	margin:0 0 0 2.3vw;/*18*/
	}
.rtbx > a.ios_h,.rtbx > a.google_h{display:none;}
.rtbx > a.store_a{
	width:24.23vw;/*189*/
	padding-bottom:7.6923vw;
	display:inline-block;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/store_a.png);
	background-size:99% auto;
	margin:0 -2px 0 0;
	}
/**/
.h_bt_1,.h_bt_2,.h_bt_3{
	width:36.15%;/*282*/
	padding-bottom:14.87%;/*116*/
	/**/
	bottom:3.57vw;/*29 3.17*/
	}
.h_bt_1{left:-.5128%;/*-4*/}
.h_bt_2{left:32.179%;/*251*/}
.h_bt_3{left:64.743%;/*505*/}
.h_bt_1.on,.h_bt_2.on,.h_bt_3.on{filter:brightness(1);}
.h_bt_1:hover .h_bt_1c,.h_bt_2:hover .h_bt_2c{opacity:0;}
.hbg.on,.hbg.on2{
	background-color:rgba(0,0,0,0);
	backdrop-filter: blur(0);
	/*z-index:1;*/
	}
}

@media only screen and (max-width:685px){ 
/**/

	
}
@media only screen and (max-width:580px){
/**/	
}
@media only screen and (max-width:560px){
/**/
}
@media only screen and (max-width:470px){
/**/

}

@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/


}
@media only screen and (max-width:340px){
/**/

}
 
/* 螢幕高 */
@media only screen and (max-width:780px) and (max-height:440px){
/* */
}