@charset "UTF-8";

/*--通用設定----------------------------------------------*/

html,body{
	background:#0c0035;
	font-size:30px;
	font-style: normal;
	font-weight: normal;
	font-family:Helvetica , Arial, '微軟正黑體', 'Microsoft JhengHei';
}
.flex{margin:0 auto; max-width:1920px; min-width:1000px;} /*頁面固定寬*/
.lightbox{display: none;}














/*--主視覺----------------------------------------------*/
.lay-main{background: url(../image/background.jpg) no-repeat top center; height:3742px; position: relative;}
.logo{display:block; margin:30px auto 0; width:439px;}
.share, .share li{margin:0; padding:0; list-style: none}
.share{z-index:999999999; transition:box-shadow .3s; position: fixed; right:20px; margin:5% 0 0 0; padding:30px 10px; background:#1d1031; width:60px; border-radius: 40px;}
.share:hover{box-shadow: 0 0 5px rgba(140,66,192,1);}
.share li{display:inline-block;}
.share li a{display:block; width:60px; height:60px; transition:all 0.3s;}
.share li a:hover{transition:all 0.3s;}
.share li a span{display:none;}
.share li:nth-child(1) a{background:url(../image/share-1-fb.png) no-repeat 0 0;}
.share li:nth-child(1) a:hover{background:url(../image/share-1-fb.png) no-repeat -60px 0;}
.share li:nth-child(2) a{background:url(../image/share-2-android.png) no-repeat 0 0;}
.share li:nth-child(2) a:hover{background:url(../image/share-2-android.png) no-repeat -60px 0;}
.share li:nth-child(3) a{background:url(../image/share-3-apk.png) no-repeat 0 0;}
.share li:nth-child(3) a:hover{background:url(../image/share-3-apk.png) no-repeat -60px 0;}
.share li:nth-child(4) a{background:url(../image/share-4-apple.png) no-repeat 0 0;}
.share li:nth-child(4) a:hover{background:url(../image/share-4-apple.png) no-repeat -60px 0;}
.share li:nth-child(5) a{background:url(../image/share-5-windows.png) no-repeat 0 0;}
.share li:nth-child(5) a:hover{background:url(../image/share-5-windows.png) no-repeat -60px 0;}
.share li:nth-child(6) a{background:url(../image/share-6-baha.png) no-repeat 0 0;}
.share li:nth-child(6) a:hover{background:url(../image/share-6-baha.png) no-repeat -60px 0;}
.description{position:absolute; top:1030px; padding:0 50px; width:900px; color:#000; text-align:center; line-height: 2em;}
.description span{display:inline; color:#ffca23; background:#1d1031; font-weight:normal;}
.lets-go{margin-top:310px; position:relative;}
.left-go{position:absolute; top:45px; left:300px; background: url(../image/left-go.png) no-repeat; width:86px; height:57px; -webkit-animation:left-go 0.3s ease-in-out 0s infinite alternate; -moz-animation:left-go 0.3s ease-in-out 0s infinite alternate; animation:left-go 0.3s ease-in-out 0s infinite alternate;}
.right-go{position:absolute; top:45px; right:300px; background: url(../image/right-go.png) no-repeat; width:86px; height:57px; -webkit-animation:right-go 0.3s ease-in-out 0s infinite alternate; -moz-animation:right-go 0.3s ease-in-out 0s infinite alternate; animation:right-go 0.3s ease-in-out 0s infinite alternate;}
.lets-go a{display:block; text-decoration: none; background: url(../image/lets-go.png) no-repeat; width:193px; height:160px; margin:0 auto;}
.lets-go a span{display:none;}




/*--薑餅人的區塊------------------------------------------------*/
.cookie-zone{margin-top:930px; position: relative;}
.cookie-left{position:absolute; top:0px; left:40px; background: url(../image/cookie-left.png) no-repeat; width:199px; height:243px;}
.cookie-right{position:absolute; top:0px; right:70px; background: url(../image/cookie-right.png) no-repeat; width:190px; height:242px;}




/*--satrgames會員專區------------------------------------------*/
.stargames{display:block; margin-top:1050px; min-height:1000px; position:relative;}
.act-desc{padding-top:30px; color:#fff; width:100%;}
.login .act-desc span{color:#fff; text-decoration: none; border-bottom: 1px #fff dotted;}
.goto-stargames{margin:0 auto; display:block; background: url(../image/goto-stargames.png) no-repeat; width:658px; height:118px;}
.goto-stargames span{display:none;}





/*--會員登入的區塊---------------------------------------------*/
.login, .signin{padding:50px 0; border:#fff 15px solid; background:#ff321b; text-align:center; position:relative;}
.login{display:none;}
.signin{display:block;}
.signin .act-desc{padding:50px; text-align: left;}
.member-access{padding-bottom:30px; text-transform:uppercase;}
.now-number{position: relative;padding:20px 0; width:550px; border-top:#fff 5px solid; border-bottom:#fff 5px solid;}
.number{position: absolute; right:0; text-align: right:0; font-family:"Arial Black", "Helvetica"; font-size:60px;}
.icon-1{display:inline-block; background: url(../image/icon-1.png) no-repeat; width:40px; height:30px;}
.icon-2{display:inline-block; background: url(../image/icon-2.png) no-repeat; width:40px; height:30px;}
.login-btn{display:block; background: url(../image/login.png) no-repeat; width:258px; height:118px; position: absolute; top: 160px; right:50px;}
.login-btn span{display:none;}



/*--許願圖--*/

.hope-pictures, .hope-pictures li{display:block; margin:0; padding:0; list-style: none; overflow:hidden;}
.hope-pictures{position:relative; background: url(../image/snow-zone.png) no-repeat center bottom; margin:0 auto; width:900px; height:700px;}
.hope-pictures li span{display:none;}
.hope-pictures li{position:absolute;}
.hope-pictures li:before{content:""; display:block; width:100%; height:100%;}
/*月亮*/
.hope-pictures li:nth-child(15){top:185px; left:186px; background:url(../image/hope-15-hide.png) no-repeat; width:141px; height:141px;}
.hope-pictures li.selected:nth-child(15):before{background:url(../image/hope-15-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*鈴鐺*/
.hope-pictures li:nth-child(14){top:510px; right:60px; background:url(../image/hope-14-hide.png) no-repeat; width:106px; height:74px;}
.hope-pictures li.selected:nth-child(14):before{background:url(../image/hope-14-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*聖誕老公公*/
.hope-pictures li:nth-child(13){top:416px; left:87px; background:url(../image/hope-13-hide.png) no-repeat; width:166px; height:173px;}
.hope-pictures li.selected:nth-child(13):before{background:url(../image/hope-13-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*麋鹿*/
.hope-pictures li:nth-child(12){top:390px; left:230px; background:url(../image/hope-12-hide.png) no-repeat; width:166px; height:173px;}
.hope-pictures li.selected:nth-child(12):before{background:url(../image/hope-12-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*雪屋*/
.hope-pictures li:nth-child(11){top:432px; right:137px; background:url(../image/hope-11-hide.png) no-repeat; width:228px; height:167px;}
.hope-pictures li.selected:nth-child(11):before{background:url(../image/hope-11-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*雪橇*/
.hope-pictures li:nth-child(10){top:388px; right:286px; background:url(../image/hope-10-hide.png) no-repeat; width:258px; height:159px;}
.hope-pictures li.selected:nth-child(10):before{background:url(../image/hope-10-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*襪子*/
.hope-pictures li:nth-child(9){top:414px; left:21px; background:url(../image/hope-9-hide.png) no-repeat; width:95px; height:115px;}
.hope-pictures li.selected:nth-child(9):before{background:url(../image/hope-9-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*禮物盒*/
.hope-pictures li:nth-child(8){top:464px; right:76px; background:url(../image/hope-8-hide.png) no-repeat; width:84px; height:87px;}
.hope-pictures li.selected:nth-child(8):before{background:url(../image/hope-8-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*拐杖糖*/
.hope-pictures li:nth-child(7){top:351px; right:19px; background:url(../image/hope-7-hide.png) no-repeat; width:79px; height:154px;}
.hope-pictures li.selected:nth-child(7):before{background:url(../image/hope-7-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*雪人*/
.hope-pictures li:nth-child(6){top:275px; right:87px; background:url(../image/hope-6-hide.png) no-repeat; width:163px; height:243px;}
.hope-pictures li.selected:nth-child(6):before{background:url(../image/hope-6-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*薑餅人*/
.hope-pictures li:nth-child(5){top:309px; left:238px; background:url(../image/hope-5-hide.png) no-repeat; width:201px; height:174px;}
.hope-pictures li.selected:nth-child(5):before{background:url(../image/hope-5-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*魔靈的卡牌*/
.hope-pictures li:nth-child(4){top:305px; left:388px; background:url(../image/hope-4-hide.png) no-repeat; width:134px; height:169px;}
.hope-pictures li.selected:nth-child(4):before{background:url(../image/hope-4-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*星星*/
.hope-pictures li:nth-child(3){top:85px; right:226px; background:url(../image/hope-3-hide.png) no-repeat; width:162px; height:332px;}
.hope-pictures li.selected:nth-child(3):before{background:url(../image/hope-3-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*聖誕樹*/
.hope-pictures li:nth-child(2){top:165px; right:224px; background:url(../image/hope-2-hide.png) no-repeat; width:201px; height:351px;}
.hope-pictures li.selected:nth-child(2):before{background:url(../image/hope-2-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}
/*小木屋*/
.hope-pictures li:nth-child(1){top:310px; left:70px; background:url(../image/hope-1-hide.png) no-repeat; width:216px; height:196px;}
.hope-pictures li.selected:nth-child(1):before{background:url(../image/hope-1-show.png) no-repeat; animation:show-hope-picture ease-in-out 1s;}



/*--魔法之門----------------------------------------------------------------*/
.doors{margin-top:100px;}
.game, .game li{margin:0; padding:0; list-style: none; overflow:hidden;}
.game li{float:left; position:relative; display:block; width:200px; height:200px; background: url(../image/close-door.png) no-repeat center 44px; -webkit-font-smoothing:subpixel-antialiased; /*safari only*/}
.game li img{display:none;}
.game li:before{content:""; display:block; padding-top:10px; width:100%; height:63px; color:#fff; text-align:center; background:url(../image/door-date.png) no-repeat center; text-shadow: 0 1px 2px rgba(0,0,0,.3);}
/*--活動日期設定--*/
.game li:nth-child(1):before{content:"12/14";}
.game li:nth-child(2):before{content:"12/15";}
.game li:nth-child(3):before{content:"12/16";}
.game li:nth-child(4):before{content:"12/17";}
.game li:nth-child(5):before{content:"12/18";}
.game li:nth-child(6):before{content:"12/19";}
.game li:nth-child(7):before{content:"12/20";}
.game li:nth-child(8):before{content:"12/21";}
.game li:nth-child(9):before{content:"12/22";}
.game li:nth-child(10):before{content:"12/23";}
.game li:nth-child(11):before{content:"12/24";}
.game li:nth-child(12):before{content:"12/25";}
.game li:nth-child(13):before{content:"12/26";}
.game li:nth-child(14):before{content:"12/27";}
.game li:nth-child(15):before{content:"12/28";}
/*--已領取--*/
.game li.selected{background: url(../image/close-door-selesced.png) no-repeat center 44px;}
.game li.selected:before{content:"已領取"; display:block; padding-top:10px; width:100%; height:63px; color:#fff; text-align:center; background:url(../image/door-selected.png) no-repeat center; text-shadow: 0 1px 2px rgba(0,0,0,.3);}
.game li.selected img{display:block; position:absolute; top:50px; left:30px; -webkit-animation:obj 1s ease-in-out; -moz-animation:obj 1s ease-in-out; animation:obj 1s ease-in-out; -webkit-transform:scale(.8); -moz-transform:scale(.8); transform:scale(.8); -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s;}
.game li.selected:hover img{-webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1);}
/*--已過期--*/
.game li.end{background: url(../image/close-door.png) no-repeat center 44px;}
.game li.end:before{content:"已過期"; display:block; padding-top:10px; width:100%; height:63px; color:#fff; text-align:center; background:url(../image/door-end.png) no-repeat center; text-shadow: 0 1px 2px rgba(0,0,0,.3);}
.game li.end:after{content:""; display:block; padding:25px 0 0 100px; width:98px; height:62px; background: url(../image/close-door-end.png) no-repeat center;}
/*--可領取--*/
.game li.option:after{content:""; display:block; cursor:pointer; padding:25px 0 0 100px; width:98px; height:62px; background: url(../image/option-me.png) no-repeat center; -webkit-animation:opt-me 0.3s ease-in-out 0s infinite alternate; -moz-animation:opt-me 0.3s ease-in-out 0s infinite alternate; animation:opt-me 0.3s ease-in-out 0s infinite alternate;}





/*--滿版訊息框-------------------------------------------------*/
a.magic{background:#0c0035; color:#00f861; text-decoration: none;}
.full-page{position:fixed; z-index:9999999999999; width:100%; height:100%; background: rgba(0,0,0,.8);}
.msg-box{transform:translateY(-50%); top:50%; margin:0 auto 0 auto; padding:50px 0; background:#ff321b; color:#fff; border:#fff 15px solid; position:relative; line-height:150%;}
.msg-box p{margin:0 0 20px 0; text-align:center;}
.msg-box a.link{color:#fff; text-decoration: none; border-bottom: 1px #fff dotted;}
.msg-box a.link:hover{color:yellow; border-bottom: 1px yellow dotted;}
.close-box{position:absolute; top:-80px; right:-15px; display:block; background: url(../image/close.png) no-repeat; width:50px; height:50px;}



}
@media all and (max-width: 749px) {
	.msg-box{ width:90vw;}
}
@media all and (min-width: 750px) {
	.msg-box{ width:750px;}
}
.msg-box-1, .msg-box-2, .msg-box-3, .msg-box-4, .msg-box-5, .msg-box-6, .msg-box-7{display:none;}




/*--注意事項--------------------------------------------*/
.lay-note{padding:50px 0; background: #fff;}
@media screen and (max-device-width: 750px) {
	.lay-note{font-size:13px;}
}
.lay-note header{margin-top:50px; text-align: center;}
.lay-note ul li{list-style-image: url(../image/flag.png);}
.lay-note ul li p{margin:10px 0 10px 30px;}
.lay-note ul li em{color:#ff005a;}
.lay-note ol li:nth-child(1){list-style-image: url(../image/phone.png);}
.lay-note ol li:nth-child(2){list-style-image: url(../image/email.png);}
.lay-note a{color:#000; text-decoration: none;}
.lay-note a.hi{text-decoration: none; color:#ffca23; background:#1d1031;}
.min-msg, .min-msg li{margin:0; padding:0; list-style: none;}
.min-msg{margin:20px 0 40px 20px;}
.min-msg li{margin-bottom:20px; padding-left:20px; border-left:10px solid #64b677; color:#555;}







/*--footer---------------------------------------------*/
.lay-footer{padding:0 0 50px 0; text-align:center; font-size:1em; background:#fff;}
.mini{font-size:12px; line-height: 24px;}




/*--PC 的使用者----------------------------------------*/
.lay-pc-player{padding:50px 0; background:#000; text-align:center;}