@charset "utf-8";
/* CSS Document */
@import url("reset.css");
img, div, a, input, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p{ behavior: url(css/iepngfix.htc) }
html{ width:100%; height:100%; }
body{ width:100%; height:100%; background-color:#000; background-image:url(../images/bg.jpg); background-repeat:no-repeat; background-position:center top;}
.wrapper{ width:1000px; height:auto; min-height:970px; margin:0 auto; position:relative; background:url(../images/bg.jpg) center top no-repeat;}
.header{ width:1000px; height:565px; margin:0 auto;}
.icon_download{ width:390px; height:45px; padding:3px 0 0 5px;}
.icon_download ul{ width:390px; height:45px;}
.icon_download li{ float:left; padding-right:2px;}
.icon_download li a{ display:block; width:127px; height:43px; background:left top no-repeat; text-indent:-9999px;}
.icon_download li a.icon_appstore{ background-image:url(../images/icon_appstore.png);}
.icon_download li a.icon_googleplay{ background-image:url(../images/icon_googleplay.png);}
.icon_download li a.icon_apk{ background-image:url(../images/icon_apk.png);}

a{ cursor:pointer; outline:none;
	-webkit-filter:brightness(1);
	filter: brightness(100%);
	transition-property:filter,-webkit-filter;
	transition-duration:.5s;
	-ms-transition-property:filter,-webkit-filter;
	-ms-transition-duration:.5s;
	-moz-transition-property:filter,-webkit-filter;
	-moz-transition-duration:.5s;
	-webkit-transition-property:filter,-webkit-filter;
	-webkit-transition-duration:.5s;}
a:hover{ background-position:left bottom; -webkit-filter:brightness(1.3); filter:brightness(150%);}

.slogan{ position:absolute; width:210px; height:86px; background:url(../images/slogan_s.png) left top no-repeat; left:50px; top:325px;
animation:myslogan 0.8s linear 0.8s infinite alternate-reverse;
-ms-animation:myslogan 0.8s linear 0.8s infinite alternate-reverse;
-moz-animation:myslogan 0.8s linear 0.8s infinite alternate-reverse;
-webkit-animation:myslogan 0.8s linear 0.8s infinite alternate-reverse;}
@keyframes myslogan{ from{transform:scale(1);} to{ transform:scale(0.9);}}	
@-ms-keyframes myslogan{ from{transform:scale(1);} to{ transform:scale(0.9);}}
@-moz-keyframes myslogan{ from{transform:scale(1);} to{ transform:scale(0.9);}}
@-webkit-keyframes myslogan{ from{transform:scale(1);} to{ transform:scale(0.9);}}

.logo{ position:absolute; width:372px; height:205px; right:10px; top:20px;}
.logo a{ display:block; width:372px; height:205px; background:url(../images/logo.png) left top no-repeat; text-indent:-9999px;}

.content{ width:1000px; height:auto; min-height:500px; background:url(../images/content_bg.png) center top repeat-y;}
.main_btn{ width:732px; height:120px; background:url(../images/line01.png) center bottom no-repeat; margin:0 auto;}
.main_btn ul{ width:680px; height:94px; margin:0 auto;}
.main_btn li{ float:left;}
.main_btn li a{ display:block; width:222px; height:94px; background:left top no-repeat; text-indent:-9999px;}
.main_btn li a:hover{ background-position:left bottom;}
.main_btn li a.main_btn01{ background-image:url(../images/main_btn01.png);}
.main_btn li a.main_btn02{ background-image:url(../images/main_btn02.png);}
.main_btn li a.main_btn03{ background-image:url(../images/main_btn03.png);}

/*活動一*/
.event01{ width:680px; height:auto; margin:0 auto; position:relative; background:url(../images/line01.png) center bottom no-repeat; padding:0 26px 60px;}
.event01 h2{ width:647px; height:126px; background:url(../images/title01.png) left top no-repeat; text-indent:-9999px;}
.event01 .rule01{ width:69px; height:66px; position:absolute; top:2px; right:10px;
animation:run01 1.5s linear 1.5s infinite alternate-reverse;
-ms-animation:run01 1.5s linear 1.5s infinite alternate-reverse;
-moz-animation:run01 1.5s linear 1.5s infinite alternate-reverse;
-webkit-animation:run01 1.5s linear 1.5s infinite alternate-reverse;}
@keyframes run01{ from{opacity:1; top:10px;} to{ top:2px;}}	
@-ms-keyframes run01{ from{opacity:1; top:10px;} to{ top:2px;}}
@-moz-keyframes run01{ from{opacity:1; top:10px;} to{ top:2px;}}
@-webkit-keyframes run01{ from{opacity:1; top:10px;} to{ top:2px;}}
.event01 .rule01 a{ display:block; width:69px; height:66px; background:url(../images/btn_rule01.png) left top no-repeat; text-indent:-9999px;}
.event01 .date{ width:588px; height:204px; background:url(../images/seven_date.png) left top no-repeat; margin:0 auto; position:relative;}
.event01 .date li{ position:absolute; width:72px; height:67px; background:url(../images/date_ok.png) left top no-repeat;}
.event01 .date li.date_ok01{ left:36px; top:46px;}
.event01 .date li.date_ok02{ left:111px; top:46px;}
.event01 .date li.date_ok03{ left:185px; top:46px;}
.event01 .date li.date_ok04{ left:260px; top:46px;}
.event01 .date li.date_ok05{ left:334px; top:46px;}
.event01 .date li.date_ok06{ left:409px; top:46px;}
.event01 .date li.date_ok07{ left:483px; top:46px;}
.event01 .form_text{ width:480px; height:auto; overflow:hidden; margin:10px auto 0;}
.event01 .form_text ol{ width:480px; height:auto; min-height:100px; overflow:hidden;}
.event01 .form_text ol span{ display:block; font-size:16px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; color:#FF0; font-weight:bold; line-height:35px; text-indent:35px;}
.event01 .form_text ol span a{ font-size:18px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; color:#FF0; font-weight:bold;}
.event01 .form_text li{ float:left; width:165px; height:auto; min-height:37px; word-break: break-all; background:left 3px no-repeat; text-indent:-9999px;}
.event01 .form_text li.tel01{ background-image:url(../images/title_tel01.png);}
.event01 .form_text li.tel02{ background-image:url(../images/title_tel02.png);}
.event01 .form_text li.mail01{ background-image:url(../images/title_mail01.png);}
.event01 .form_text li.mail02{ background-image:url(../images/title_mail02.png);}
.event01 .form_text li.text{ width:300px; font-size:24px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; color:#FF0; font-weight:bold; line-height:35px; text-indent:5px; overflow:hidden;}
.event01 .form_text .btn_signin1{ display:block; width:220px; height:54px; background:url(../images/btn_signin1.jpg) left top no-repeat; margin:0 auto; text-indent:-9999px;}
.event01 .form_text .btn_signin2{ display:block; width:220px; height:54px; background:url(../images/btn_signin2.jpg) left top no-repeat; margin:45px auto 0;text-indent:-9999px;}
.event01 .form_text .btn_signin3{ display:block; width:220px; height:54px; background:url(../images/btn_signin1.jpg) left top no-repeat; margin:45px auto 0; text-indent:-9999px;}
.event01 .figure01{ position:absolute; width:194px; height:320px; background:url(../images/figure01.png) left top no-repeat; left:-70px; top:320px; z-index:5;}
.event01 .figure02{ position:absolute; width:194px; height:320px; background:url(../images/figure02.png) left top no-repeat; left:-50px; top:400px; z-index:5;}
.event01 .sn01{ width:390px; height:180px; margin:10px auto 0; background:url(../images/sn_bg01.png) left top no-repeat; padding:24px 10px 10px 10px;}
.event01 .sn01 li{ width:380px; height:30px; margin:0 auto 3px;}
.event01 .sn01 p.sn01_title{ float:left; width:60px; font-size:18px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; font-weight:bold; color:#FFF; line-height:30px;}
.event01 .sn01 p.sn01_date{ float:left; width:310px; font-size:18px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; font-weight:bold; color:#FFF; line-height:30px; text-indent:10px; background-color:#5b0001;}
.event01 .sn01 p.sn01_date span{ color:#FF0;}
.event01 .sn01 .btn_sn01{ display:block; width:120px; height:40px; background:url(../images/btn_sn.jpg) left top no-repeat; margin:5px auto 0;text-indent:-9999px;}
input{ height:33px; width:255px; border:3px solid #F00; margin-left:5px; border-radius:6px; font-family:Arial; font-size:18px; font-weight:bold; color:#333333; padding-left:10px;}
input.check{ height:28px; width:28px; border-radius:6px; font-family:Arial; font-size:18px; font-weight:bold; color:#333333; margin-top:10px;}

/*活動二*/
.event02{ width:680px; height:auto; margin:0 auto; position:relative; background:url(../images/line01.png) center bottom no-repeat; padding:0 26px 60px; ;}
.event02 h2{ width:647px; height:126px; background:url(../images/title02.png) left top no-repeat; text-indent:-9999px; margin:0 auto}
.event02 .rule02{ width:69px; height:66px; position:absolute; top:2px; right:70px;
animation:run02 1.5s linear 1.5s infinite alternate-reverse;
-ms-animation:run02 1.5s linear 1.5s infinite alternate-reverse;
-moz-animation:run02 1.5s linear 1.5s infinite alternate-reverse;
-webkit-animation:run02 1.5s linear 1.5s infinite alternate-reverse;}
@keyframes run02{ from{opacity:1; top:10px;} to{ top:2px;}}	
@-ms-keyframes run02{ from{opacity:1; top:10px;} to{ top:2px;}}
@-moz-keyframes run02{ from{opacity:1; top:10px;} to{ top:2px;}}
@-webkit-keyframes run02{ from{opacity:1; top:10px;} to{ top:2px;}}
.event02 .rule02 a{ display:block; width:69px; height:66px; background:url(../images/btn_rule02.png) left top no-repeat; text-indent:-9999px;}
.event02 .con{ width:556px; height:230px; background:url(../images/event02.jpg) left top no-repeat; margin-left:20px;}
.event02 .time{ position:absolute; width:120px; height:100px; font-size:70px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FF0; text-align:center; top:185px; left:65px;}
.event02 .btn_fb{ display:block; width:320px; height:84px; margin:0 auto; background:url(../images/btn_fb.jpg) left top no-repeat; text-indent:-9999px;}
.event02 .share{ width:450px; height:60px; margin:10px auto 0;}
.event02 .share li{ float:left;}
.event02 .share li a{ display:block; width:220px; height:54px; background:left top no-repeat; text-indent:-9999px;}
.event02 .share li a.btn_share01{ background-image:url(../images/btn_share01.jpg); margin-right:10px;}
.event02 .share li a.btn_share02{ background-image:url(../images/btn_share02.jpg);}
.event02 .share li a.btn_share03{ background-image:url(../images/btn_share03.jpg);}
.event02 .figure{ position:absolute; width:259px; height:295px; background:url(../images/figure03.png) left top no-repeat; right:-70px; top:230px; z-index:5;}
.event02 .sn02_01{ width:410px; height:24px; margin:0 auto; background:url(../images/sn_bg02_01.png) left top no-repeat;}
.event02 .sn02_02{ width:410px; height:260px; margin:0 auto; background:url(../images/sn_bg02_02.png) left top repeat-y;}
.event02 .sn02_02 ol{ width:380px; height:210px; margin:0 auto; overflow:auto;}
.event02 .sn02_02 li{ width:380px; height:30px; margin:0 auto 3px;}
.event02 .sn02_02 p.sn01_title{ float:left; width:60px; font-size:18px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; font-weight:bold; color:#FFF; line-height:30px;}
.event02 .sn02_02 p.sn01_date{ float:left; width:310px; font-size:18px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; font-weight:bold; color:#FFF; line-height:30px; text-indent:10px; background-color:#5b0001;}
.event02 .sn02_02 p.sn01_date span{ color:#FF0;}
.event02 .sn02_02 .btn_sn02{ display:block; width:120px; height:40px; background:url(../images/btn_sn.jpg) left top no-repeat; margin:8px auto 0;text-indent:-9999px;}
.event02 .sn02_03{ width:410px; height:13px; margin:0 auto; background:url(../images/sn_bg02_03.png) left top no-repeat;}

/*活動三*/
.event03{ width:680px; height:auto; margin:0 auto; position:relative; background:url(../images/line01.png) center bottom no-repeat; padding:0 26px 60px; ;}
.event03 h2{ width:647px; height:126px; background:url(../images/title03.png) left top no-repeat; text-indent:-9999px; margin:0 auto}
.event03 .rule03{ width:69px; height:66px; position:absolute; top:-2px; left:510px;
animation:run03 1.5s linear 1.5s infinite alternate-reverse;
-ms-animation:run03 1.5s linear 1.5s infinite alternate-reverse;
-moz-animation:run03 1.5s linear 1.5s infinite alternate-reverse;
-webkit-animation:run03 1.5s linear 1.5s infinite alternate-reverse;}
@keyframes run03{ from{opacity:1; top:8px;} to{ top:2px;}}	
@-ms-keyframes run03{ from{opacity:1; top:8px;} to{ top:2px;}}
@-moz-keyframes run03{ from{opacity:1; top:8px;} to{ top:2px;}}
@-webkit-keyframes run03{ from{opacity:1; top:8px;} to{ top:2px;}}
.event03 .rule03 a{ display:block; width:69px; height:66px; background:url(../images/btn_rule03.png) left top no-repeat; text-indent:-9999px;}
.event03 .fb-like{ position:absolute; z-index:10; top:80px; right:100px;}
.event03 .target_box{ width:660px; height:324px; margin:0 auto;}
.event03 .fb_target{ float:left; width:315px; height:314px; background:url(../images/target01.png) left 3px no-repeat; margin-left:5px; position:relative;}
.event03 .target_item01{ position:absolute; width:67px; height:78px; background:url(../images/target_item.png) left top no-repeat; top:32px; left:215px;}
.event03 .target_item02{ position:absolute; width:67px; height:78px; background:url(../images/target_item.png) left top no-repeat; top:150px; left:250px;}
.event03 .target_item03{ position:absolute; width:67px; height:78px; background:url(../images/target_item.png) left top no-repeat; top:200px; left:180px;}
.event03 .target_item04{ position:absolute; width:67px; height:78px; background:url(../images/target_item.png) left top no-repeat; top:150px; left:50px;}
.event03 .target_item05{ position:absolute; width:67px; height:78px; background:url(../images/target_item.png) left top no-repeat; top:32px; left:70px;}
.event03 .target_item06{ position:absolute; width:67px; height:78px; background:url(../images/target_item.png) left top no-repeat; top:120px; left:160px;}
.event03 .fb_plugin{ float:left; width:338px; height:314px; background:url(../images/fb_plugin.png) left top no-repeat; position:relative;}
.event03 .fb-page{ position:absolute; width:250px; height:230px; top:68px; left:72px;}
.event03 .btn_gofb{ display:block; width:320px; height:84px; background:url(../images/btn_gofb.jpg) left top no-repeat; text-indent:-9999px; margin:10px auto 0;}
.event03 .target_award{ width:671px; height:818px; background:url(../images/target_award.jpg) left top no-repeat; text-indent:-9999px; margin:10px auto 0; position:relative;}
.event03 .target_award_item01{ position:absolute; width:144px; height:108px; background:url(../images/target_award_item.png) left top no-repeat; left:535px; top:30px;}
.event03 .target_award_item02{ position:absolute; width:144px; height:108px; background:url(../images/target_award_item.png) left top no-repeat; left:535px; top:168px;}
.event03 .target_award_item03{ position:absolute; width:144px; height:108px; background:url(../images/target_award_item.png) left top no-repeat; left:535px; top:305px;}
.event03 .target_award_item04{ position:absolute; width:144px; height:108px; background:url(../images/target_award_item.png) left top no-repeat; left:535px; top:445px;}
.event03 .target_award_item05{ position:absolute; width:144px; height:108px; background:url(../images/target_award_item.png) left top no-repeat; left:535px; top:584px;}
.event03 .target_award_item06{ position:absolute; width:144px; height:108px; background:url(../images/target_award_item.png) left top no-repeat; left:535px; top:720px;}

/*注意事項*/
.bottom_note{ width:1000px; height:295px; background:url(../images/bottom_note.jpg) center top no-repeat; margin:0 auto;}
.blackBg1, .blackBg2, .blackBg3, .blackBg4, .blackBg5{ position:fixed; top:0; left:0; width:100%; height:100%; margin:0 auto; background-color:rgba(0,0,0,0.8); z-index:20; display:none;}
.note01, .note02, .note03{ z-index:30; position:absolute; top:150px; left:50%; margin-left:-300px;}
.note01{ width:588px; height:374px; background:url(../images/note_01.png) left top no-repeat;}
.note02{ width:588px; height:374px; background:url(../images/note_02.png) left top no-repeat;}
.note03{ width:588px; height:274px; background:url(../images/note_03.png) left top no-repeat;}
.closeBtn{ position:absolute; z-index:31; width:41px; height:41px; top:150px; left:50%; margin-left:250px;}
.closeBtn a{ display:block; width:42px; height:42px; background:url(../images/btn_close.png) left top no-repeat; text-indent:-9999px;}
.closeBtn a:hover{ background-position:1px 1px;}

.popup{ z-index:30; width:588px; height:274px; position:absolute; top:150px; left:50%; margin-left:-300px; background:url(../images/note_04.png) left top no-repeat;}
.popup_text{ width:480px; height:auto; margin:100px auto 0; font-size:16px; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; line-height:26px; color:#FFF; text-align:center;}
.closeBtn2{ position:absolute; z-index:31; width:82px; height:36px; top:360px; left:50%; margin-left:-40px;}
.closeBtn2 a{ display:block; width:82px; height:36px; background:url(../images/btn_ok.jpg) left top no-repeat; text-indent:-9999px;}
.closeBtn2 a:hover{ background-position:1px 1px;}

/*Go Top*/
.gotop{ position:absolute; display:none; width:51px; height:76px; top:580px; right:100px; z-index:20; background:url(../images/btn_gotop.png) left top no-repeat; text-indent:-9999px;}


/*版權宣告*/
.footer{ width:100%; height:125px; min-width:1000px; background:url(../images/footer.jpg) center top no-repeat; text-indent:-9999px;}

br.clear { clear:both; height:0; font-size:1px; line-height:0px;}