@charset "utf-8";
/* CSS Document */
.s1{text-align: center;color: #000;overflow: auto;font-size:16pt; }
.s2{text-align: center;color: #FFF;overflow: auto;font-size:15pt; }
body{ background-color: #000}

.bt {text-indent: -999px;overflow: hidden;cursor:pointer;}
.wrap {width:1200px;margin: 0 auto;position: relative;}
.min_w{;min-width:1200px;}
.wrap-box{position:absolute;width:1.00rem;height: 100%; left: 50%;top: 50%;padding:0; margin-left:-190px; margin-top:-190px;z-index: 100;}
/********************************主外框********************************/

.page00_bg {width:100%;height: 100%;;background: url(../images/bg_01.jpg) top no-repeat;margin:0; padding:0;bottom: 0;right: 0;background-position: center center;background-size: 100% 100%;}
.page01_bg {width:100%;height: 100%;background: url(../images/bg_02.jpg) top no-repeat;margin:0; padding:0;bottom: 0;right: 0;background-position: center center;background-size: 100% 100%; overflow: hidden}
.page02_bg {width:100%;height: 100%;background: url(../images/bg_03.jpg) top no-repeat;margin:0; padding:0;bottom: 0;right: 0;background-position: center center;background-size: 100% 100%;}


.bg_black{width:100%;height:100%;background: url(../images/mask_pattern.png)repeat;;position: absolute; bottom: 0px}
#myVideo{width: 1920px;height: 1080px;overflow: hidden; position:absolute;top: 0;left: 50%;margin-left: -960px; }


/********************************bar********************************/
.bar-box{ width: 100%; height: 40px;position: absolute; z-index: 2000;padding: 0;}
.bar_icon{width:6rem;background-position: center center;background-size: 100% auto; position:absolute; left: 15px;  top:5px;}
.bar-box h1 {margin-left: 120px; margin-top: 10px; font-size: 10px;color:#fff;text-overflow: ellipsis;white-space: nowrap;}
.bar-box p { margin-left: 120px;font-size:18px;line-height:10px;color:#fff;padding-top:5px;word-break: break-all;font-weight:500;letter-spacing:2px}

.bar_btbox{position: relative; float: right; }
.bt_home{width:70px;height:70px; background: url(../images/bt_home.png) no-repeat; position: absolute; margin:-15px 0 0 -260px;display: block; z-index: 50;opacity: 0.8  }
.bt_home:hover{ opacity: 1}


.bt_twitter{width:70px;height:70px; background: url(../images/bt_twitter.png) no-repeat; position: absolute; margin: -15px 0 0 -175px;display: block; z-index: 50; opacity: 0.8  }
.bt_twitter:hover{ opacity: 1}

#audioBtn{width: 70px;height: 65px;background: url(../images/btn_sound.png)bottom no-repeat;position: absolute; margin: -15px 0 0 -90px;display: block;opacity: 0.8   }
#audioBtn:hover{ background-position:top;opacity: 0.8 }
#audioBtn.active{ background-position: top;opacity: 0.8 }


/********************************page00 top內容********************************/

.bg_cloud{width:100%;position: absolute; margin:0 0 0 0 ;z-index: 40; right: 0px; bottom: 0px}
.img_logo {width: 25rem;margin:-100px 0 10px -20px;padding:0;background-position: center center;background-size: 100% auto;animation:scaleOn 3s ease-out ;}
.button_box{width:30rem;height: auto; left: 0;  top:0;margin:0 0 0 200px ; z-index: 5000 }
.slogan-w{width: 38rem; position: absolute; margin: -10px 0 0 -300px; display: block;animation:fadeIn 2s ease-in ;}

.button_box a:hover{opacity: 1}
.bt_android{width:198px;height:98px; background: url(../images/bt_android.png) no-repeat; position: absolute; margin:110px 0 0 -300px;display: block; z-index: 50;opacity: 0.5 }
.bt_ios{width:198px;height:98px; background: url(../images/bt_ios.png) no-repeat; position: absolute; margin:110px 0 0 -90px;display: block; z-index: 50;opacity: 0.5 }
.bt_android:hover{background: url(../images/bt_comesoon.png) no-repeat; }
.bt_ios:hover{background: url(../images/bt_comesoon.png) no-repeat; }

.bt_login{width:198px;height:98px; background: url(../images/bt_login.png) no-repeat; position: absolute; margin:110px 0 0 -110px;display: block; z-index: 50;opacity: 0.5 }



.button_box hr {width: 46rem; height: 1px; background-color: #FFFDFD;border: 0;position: absolute;}
.button_box hr.hr01{margin: 40px 0 0 -1040px ;animation:leftIn 3s ease-in;}
.button_box hr.hr02 {margin: 40px 0 0 305px;animation:rightIn 3s ease-in;}

.bg_000img{width: 45rem;margin:-318px 0 10px -161px;padding:0;background-position: center center;background-size: 100% auto;}

/*-----get內容 ------ */
.gat_box{width: 1500px;height: 800px;position:absolute; /*! margin: 0 0 0 -500px; */ 
background: url(../images/bg_02.png) no-repeat center 0;
/*! opacity: 0.5; */
top: -258px;
left: -561px;
}
.gat_box .reach_warp{width: 1000px;height: 537px;position: absolute;left: 382px;top: 254px;}

.reach_warp div{width: 97px;height: 96px;}
.get01{position: absolute;left: 0;top: 0;}
.get02{position: absolute;left: 17%;bottom: 0;}
.get03{position: absolute;left: 36%;top: 0;}
.get04{position: absolute;left: 55%;bottom: 0;/*! background: #62db917d; */}
.get05{position: absolute;right: 0;top: 0;}
.reach_warp img{display: none;}
.reach_warp .active img{display: block;}
/* .get03{float: left; margin: -100px 0 0 900px}
.get04{float: left; margin: 300px 0 0 -240px}
.get05{float: left; margin: 200px 0 0 730px} */

/*-----rule內容 ------ */

.rule_box {width: 1000px;height: 500px;position: relative;display: block;margin: 0 0 0 -320px;padding: 10px;overflow: auto;font-size: 14px;}
.white-bg{
	content: '';
	background: url(../images/white-bg.png) no-repeat center 0;
	position: absolute;
	width: 1120px;
	height: 766px;
	top: -182px;
	left: -364px;
	z-index: -1;
	margin: 0 auto;
	/*! right: 0; */
	text-align: center;
	background-size: 100%;
}
.rule_box li {margin-bottom: 12px;/*background: url(../images/icon_list.png) no-repeat;*/padding-left: 30px;text-align: left;}
.rule_box p {font-size: 20px;font-weight: bold;margin: 0px 0 10px 20px;text-align: left;}
/*-----footer ------ */
#footer{height: 250px!important;}
.footer_wrap {	width: 100%;height: 250px;background:#fff;padding:0;font-size: 12px;font-family: "Microsoft YaHei", Verdana, Geneva, sans-serif, \5b8b\4f53; bottom:0;position: absolute;z-index: 1000;}
.footer_wrap hr{ margin-top: -0.5px}
.footer {width: 1000px;height: auto;margin: 70px auto;color:#777777}
.foot_icon {float: left; display: block;width:7rem;margin: -5px 20px 0 0; position:relative}
.footer em {float: left;width: 1px;height: 110px;background-color:#A3A3A3;margin: 0px 20px;}
.foot_rightbox{float: left;width: 800px; }
.foot_middle{float: left;}
.foot_middle p{line-height:23px; font-size: 9pt;text-align:left;}
.foot_right{float: right; text-align: center;position:relative;}
.foot_right .foot_logo{height: 65px;width: 215px;position: absolute;}
.foot_right img{margin: 10px 0 15px -10px; }
.foot_right h1{letter-spacing: 8px ;}



/*-- 彈跳視窗_app--*/
.box_event1 {width:629px;height: 328px;position: fixed;display: block;left: 48%;top:45%;margin-left: -300px;margin-top: -110px;z-index:500;}
.box_event1 {background: url(../images/coming_img.jpg) no-repeat; }
a.btn_close {width:90px;height:90px;position: absolute;display: block;right: 15px;top: 10px;}
.UPUP{transition:all 0.5s ease-out;transform:translate3d(0%,-1000%,0px);-webkit-transition:all 1s ease-out;-webkit-transform:translate3d(0%,-1000%,0px);}
.DOWNDOWN{transition:all 1s ease-out;transform:translate3d(0%,0%,0px);-webkit-transition:all 1s ease-out;-webkit-transform:translate3d(0%,0%,0px);}

/*-- media width: 1440px--*/
@media (max-width: 1440px){
	.rule_box {transform: scale(.9);
	width:900px; height: 480px;	margin: 0 0 0 -250px;}
	
	.gat_box{transform: scale(.7);
		top: -250px;left: -561px;
	}
	.white-bg{transform: scale(.8)}
	.get01{/*! float: left; */ /*! margin: 0 0 0 100px; */}
    .get03{/*! float: left; */ /*! margin: -100px 0 0 750px; */}
    .get05{/*! float: left; */ /*! margin: 200px 0 0 630px; */}


}