@charset "UTF-8";

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

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














/*--主視覺----------------------------------------------*/
.lay-main{background: url(../image/background.jpg) no-repeat top center; height:3278px; position: relative;}
.logo{display:inline-block; margin:30px 0 0 0;}
.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:900px; padding:0 50px; width:900px; color:#fff; line-height: 2em;}
.description span{display:inline; color:#ffca23; background:#1d1031; font-weight:normal;}





/*--satrgames會員專區------------------------------------------*/
.stargames{display:block; margin-top:1410px; min-height:1000px; position:relative;}
.power{position:absolute; top:380px; background: url(../image/power.png) no-repeat;padding-left:95px; width:65px; height:100px;}
.power span{display:inline-block; margin-top:25px; font-family: "Arial Black"; font-size:60px; color:#fff;}
.act-desc{padding-top:30px; color:#fff; width:550px;}
.act-desc dd{margin:15px 0; padding-left:30px; background: url(../image/dot.png) no-repeat 2px 13px;}
.act-desc dd a{color:#fff; text-decoration: none; border-bottom: 1px #fff dotted;}
.act-desc dd a:hover{color:#ffc427; border-bottom:1px #ffc427 dotted;}
.goto-stargames{float:right; margin:50px 20px 0 0; display:block; background: url(../image/goto-stargames.png) no-repeat; width:398px; height:160px;}
.goto-stargames span{display:none;}
.maps{margin-top:330px; width:1000px;}



/*--會員登入的區塊---------------------------------------------*/
.login{display:block;}
.login .maps{padding-top:200px; height:800px; background: url(../image/goto-member-bg.png) no-repeat;}
.goto-member{display:block; margin:0px auto 0 auto; background: url(../image/goto-member.png) no-repeat; width:649px; height:517px; -webkit-animation:jump 0.3s ease-in-out 0s infinite alternate; -moz-animation:jump 0.3s ease-in-out 0s infinite alternate; animation:jump 0.3s ease-in-out 0s infinite alternate;}
@keyframes jump{
	0%{margin-top:0;}
	100%{margin-top:-50px;}
}
@-webkit-keyframes jump{
	0%{margin-top:0;}
	100%{margin-top:-50px;}
}
.show-game{display:none;}
.game, .game li{margin:0; padding:0; list-style: none;}
.game li{float:left; display:block; width:200px; height:200px; background: url(../image/5x5-non.png) no-repeat;}
.getit{float:right; margin-right:50px; width:300px; border:5px #fff solid; text-align: center;}
.getit header{border-bottom:5px #fff solid;}
.getit header h3{margin:0; padding:15px 0; color:#fff; font-size:30px; font-family:'微軟正黑體';}
.getit em{padding:60px 0; display:block; font-family:"Arial Black"; font-size:90px; color:#fff;}

li.start, li.path, li.now, li.option, li.exit{width:200px; height:200px;}
li.start{background: url(../image/5x5-start.png) no-repeat;}
li.path{background:url(../image/5x5-path.png) no-repeat; -webkit-animation:gogo .5s linear 0s 1; -moz-animation:gogo .5s linear 0s 1; animation:gogo .5s linear 0s 1;}
li.now{background:url(../image/5x5-now.png) no-repeat; -webkit-animation:gogo .5s linear 0s 1; -moz-animation:gogo .5s linear 0s 1; animation:gogo .5s linear 0s 1;}
li.option{background: url(../image/5x5-option.png) no-repeat; opacity:.7; cursor:pointer; transition:all 0.3s; -webkit-animation:igogo .5s linear 0s 1; -moz-animation:igogo .5s linear 0s 1; animation:igogo .5s linear 0s 1;}
li.option:hover{background: url(../image/5x5-option.png) no-repeat; opacity:1;}
li.exit{background:url(../image/5x5-exit.png) no-repeat;}

/*--動畫設定--------------------------------------------------*/
@-webkit-keyframes gogo{
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes gogo{
	from {opacity:0;}
	to {opacity:1;}
}
@-webkit-keyframes igogo{
	from {opacity:0;}
	to {opacity:.7;}
}
@keyframes igogo{
	from {opacity:0;}
	to {opacity:.7;}
}




/*--滿版訊息框-------------------------------------------------*/
.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:#511683; color:#fff; border-radius: 50px; position:relative;}
.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:-70px; right:0; 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, .msg-box-8, .msg-box-9, .msg-box-10, .msg-box-11{display:none;}




/*--注意事項--------------------------------------------*/
.lay-note{padding:50px 0; font-size:inherit;}
.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;}




/*--得獎榜單及注意事項------------------------------------*/
.gifts-note{margin:100px auto 0 auto; width:750px; font-size:28px;}
.gifts, .gifts li{margin:0; padding:0; list-style: none; color:#c3c100;}
.no{display:inline-block; width:25%;}
.flower{display:inline-block; width:25%;}
.gifts li a{color:#c3c100; text-decoration: none;}
.gifts li{padding:10px 30px; border-bottom:1px dotted #c3c100; }
.gifts li:nth-child(1){color:#fff; background: rgb(173,171,0); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(173,171,0) 0%, rgb(205,230,35) 82%, rgb(205,230,35) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgb(173,171,0) 0%,rgb(205,230,35) 82%,rgb(205,230,35) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgb(173,171,0) 0%,rgb(205,230,35) 82%,rgb(205,230,35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adab00', endColorstr='#cde623',GradientType=1 ); /* IE6-9 */
}
.gifts li:nth-last-child(1){border-bottom:none;}
.notes{margin:30px 0;}
.info-data, .info-data li{margin:0; padding:0; list-style: none;}
.info-data{margin-top:50px; border:1px solid #eee; border-radius: 40px;}
.info-data li{padding:20px 40px; border-bottom:#eee 1px solid;}
.info-data li:nth-last-child(1){border-bottom:none;}
.icon-1, .icon-2, .icon-3, .icon-4, .icon-5{display:inline-block; width:35px; height:28px; background-repeat: no-repeat} 
.icon-1{background:url(../image/icon-1.png);}
.icon-2{background:url(../image/icon-2.png);}
.icon-3{background:url(../image/icon-3.png);}
.icon-4{background:url(../image/icon-4.png);}
.icon-5{background:url(../image/icon-5.png);}





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




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