@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:1920px; min-width:1000px;} /*頁面固定寬*/
.lightbox{display: none; }















/*--主視覺----------------------------------------------*/
.lay-main{background: url(../image/background.jpg) no-repeat top center; height:3187px;}
.logo{display:inline-block; margin:-30px 0 0 280px;}
.share, .share li{margin:0; padding:0; list-style: none}
.share{margin:0 0 0 300px;}
.share li{display:inline-block;}
.share li a{display:block; width:75px; height:98px; 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 -20px;}
.share li:nth-child(1) a:hover{background:url(../image/share-1-fb.png) no-repeat 0 0;}
.share li:nth-child(2) a{background:url(../image/share-2-android.png) no-repeat 0 -20px;}
.share li:nth-child(2) a:hover{background:url(../image/share-2-android.png) no-repeat 0 0;}
.share li:nth-child(3) a{background:url(../image/share-3-apk.png) no-repeat 0 -20px;}
.share li:nth-child(3) a:hover{background:url(../image/share-3-apk.png) no-repeat 0 0;}
.share li:nth-child(4) a{background:url(../image/share-4-apple.png) no-repeat 0 -20px;}
.share li:nth-child(4) a:hover{background:url(../image/share-4-apple.png) no-repeat 0 0;}
.share li:nth-child(5) a{background:url(../image/share-5-windows.png) no-repeat 0 -20px;}
.share li:nth-child(5) a:hover{background:url(../image/share-5-windows.png) no-repeat 0 0;}
.share li:nth-child(6) a{background:url(../image/share-6-baha.png) no-repeat 0 -20px;}
.share li:nth-child(6) a:hover{background:url(../image/share-6-baha.png) no-repeat 0 0;}





/*--滿版訊息框-------------------------------------------------*/
.full-page{ position:fixed; z-index:99999; width:100%; height:100%; background: rgba(0,0,0,.8);}
.msg-box{margin:10% auto 0; margin:10vh auto 0; background:yellow; border-radius: 20px; position:relative;}
.msg-box header{padding:20px 0; border-bottom: 1px solid #dfd702;}
.msg-box > header > h2{margin:0; padding:20px; font-size:50px; font-weight:bold; text-align: center; color:#00157d;}
.msg-box p{padding:20px 20px 0 20px; text-align:center;}}

@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{display:none;}



/*--注意事項--------------------------------------------*/
.lay-note{padding:50px 0;}
.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 a{text-decoration: none; color:#000; border-bottom:#000 1px dotted; background:yellow;}
.lay-note a:hover{color:#ff0070; border-bottom:#ff0070 1px solid;}
.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;}
.about, .about li{margin:0; padding:0; list-style: none;}
.about li{list-style-image: url(../image/icon-phone.png);}
.about li span{width:31px; height:24px; display:inline-block;}
.icon-phone{background: url(../image/icon-phone.png) no-repeat;}
.icon-mail{background: url(../image/icon-mail.png) no-repeat;}



/*--得獎榜單及注意事項------------------------------------*/
.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);}





/*--地圖設定-------------------------------------------*/
.map{position: absolute; top:2450px; width:1000px;}
.map-1 .book{margin-left:-67px; background:url(../image/book-1.png) no-repeat; width:1135px; height:592px;}
.map-2 .book{position:relative; margin-left:-67px; background:url(../image/book-2.png) no-repeat; width:1135px; height:555px;}
.map-3 .book{margin-left:-67px; background:url(../image/book-3.png) no-repeat; width:1135px; height:555px;}
.stargame-btn{display:block; margin:0 auto 50px; background:url(../image/stargame-btn.png) no-repeat; width:354px; height:65px;}
.query-btn{display:block; margin:0 auto 30px; background:url(../image/query-btn.png) no-repeat; width:304px; height:65px;}
.stargame-btn span, .query-btn span{display:none;}
.member{margin-bottom:20px; text-align: center;}
.member a{display:inline-block; padding:10px 20px; text-decoration: none; color:#000;}
.member a:hover{color:#000;}
.member a:nth-child(1){box-shadow: 0 2px 2px rgba(0,0,0,.1); background:rgba(255,255,255,.7); border-top-left-radius: 50px; border-bottom-left-radius: 50px;}
.member a:nth-child(2){box-shadow: 0 2px 2px rgba(0,0,0,.1); background:#e6f500; border-top-right-radius: 50px; border-bottom-right-radius: 50px;}
.map-1, .map-3{display:none;}
/*--蘑菇動畫--*/
.mogu-obj{margin-left:680px; position:relative;}
.mogu{animation:mogu-animate .15s linear 0s infinite alternate; position:absolute; top:0; left:-15px; background:url(../image/mo-gu.png) no-repeat; width:262px; height:262px;}
.mogu-shadow{animation:mogu-animate-shadow .15s linear 0s infinite alternate; position:absolute; top:245px; background:url(../image/mo-gu-shadow.png) no-repeat; width:213px; height:30px;}
@keyframes mogu-animate{
	from{top:0;}
	to{top:-10px;}
}
@keyframes mogu-animate-shadow{
	from{top:245px;}
	to{top:255px; -webkit-filter:blur(6px) opacity(60%);}
}
.main{position:relative;}
.obj-1, .obj-2, .obj-3, .obj-4{display:block;}
@keyframes os-animate{
	from{top:0;}
	to{top:-10px;}
}
a:hover .os{animation:os-animate .15s linear 0s infinite alternate;}
/*--暗黑森林--*/
.obj-1{position:absolute; left:170px; bottom: 340px;}
.obj-1 .obj-title{position: absolute; top: 80px; background:url(../image/obj-1-title.png) no-repeat; width:140px; height:40px;}
.obj-1 .obj-pic{position: absolute; top:0; left:-10px; background: url(../image/obj-1-pic.png) no-repeat; width:141px; height:114px;}
/*--荒野沙漠--*/
.obj-2{position:absolute; left:190px; bottom: 470px;}
.obj-2 .obj-title{position: absolute; top: 80px; background:url(../image/obj-2-title.png) no-repeat; width:140px; height:40px;}
.obj-2 .obj-pic{position: absolute; top:0; left:10px; background: url(../image/obj-2-pic.png) no-repeat; width:123px; height:118px;}
/*--巨蟒森林--*/
.obj-3{position:absolute; left:260px; bottom: 590px;}
.obj-3 .obj-title{position: absolute; top: 80px; background:url(../image/obj-3-title.png) no-repeat; width:140px; height:40px;}
.obj-3 .obj-pic{position: absolute; top:0; left:15px; background: url(../image/obj-3-pic.png) no-repeat; width:109px; height:123px;}
/*--荊棘戈壁--*/
.obj-4{position:absolute; left:330px; bottom: 430px;}
.obj-4 .obj-title{position: absolute; top: 100px; background:url(../image/obj-4-title.png) no-repeat; width:140px; height:40px;}
.obj-4 .obj-pic{position: absolute; top:0; left:15px; background: url(../image/obj-4-pic.png) no-repeat; width:119px; height:123px;}
/*--撲克牌--*/
.obj-5{position:absolute; left:470px; bottom: 330px;}
.obj-5 .obj-title{position: absolute; top: 80px; background:url(../image/obj-5-title.png) no-repeat; width:140px; height:40px;}
.obj-5 .obj-pic{position: absolute; top:0; left:38px; background: url(../image/obj-5-pic.png) no-repeat; width:85px; height:110px;}
/*--魔堡--*/
.obj-6{position:absolute; left:470px; bottom: 500px;}
.obj-6 .obj-title{position: absolute; top: 90px; background:url(../image/obj-6-title.png) no-repeat; width:140px; height:40px;}
.obj-6 .obj-pic{position: absolute; top:0; left:20px; background: url(../image/obj-6-pic.png) no-repeat; width:107px; height:121px;}
/*--飛艇--*/
.obj-7{position:absolute; left:620px; bottom: 320px;}
.obj-7 .obj-title{position: absolute; top: 80px; background:url(../image/obj-7-title.png) no-repeat; width:140px; height:40px;}
.obj-7 .obj-pic{position: absolute; top:0; left:20px; background: url(../image/obj-7-pic.png) no-repeat; width:127px; height:116px;}
/*--主要街道--*/
.obj-8{position:absolute; left:620px; bottom: 450px;}
.obj-8 .obj-title{position: absolute; top: 80px; background:url(../image/obj-8-title.png) no-repeat; width:140px; height:40px;}
.obj-8 .obj-pic{position: absolute; top:0; left:20px; background: url(../image/obj-8-pic.png) no-repeat; width:114px; height:120px;}
/*--冰山--*/
.obj-9{position:absolute; left:620px; bottom: 560px;}
.obj-9 .obj-title{position: absolute; top: 50px; background:url(../image/obj-9-title.png) no-repeat; width:140px; height:40px;}
.obj-9 .obj-pic{position: absolute; top:0; left:5px; background: url(../image/obj-9-pic.png) no-repeat; width:134px; height:81px;}
/*--天堂--*/
.obj-10{position:absolute; left:780px; bottom: 380px;}
.obj-10 .obj-title{position: absolute; top: 100px; background:url(../image/obj-10-title.png) no-repeat; width:140px; height:40px;}
.obj-10 .obj-pic{position: absolute; top:0; left:5px; background: url(../image/obj-10-pic.png) no-repeat; width:119px; height:122px;}
/*--棋盤--*/
.obj-11{position:absolute; left:770px; bottom: 530px;}
.obj-11 .obj-title{position: absolute; top: 80px; background:url(../image/obj-11-title.png) no-repeat; width:140px; height:40px;}
.obj-11 .obj-pic{position: absolute; top:0; left:20px; background: url(../image/obj-11-pic.png) no-repeat; width:115px; height:118px;}



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




/*--邊欄的TOP及立馬參加---------------------------------*/
.side{width:109px; bottom:4em; right:2em; position:fixed;}
.scrollToTop{display:block; width:109px; height:128px; text-decoration: none; background: url(../image/side-1.png) no-repeat; transition:all .5s;}
.scrollToTop:hover{text-decoration: none; background: url(../image/side-1-hover.png) no-repeat; transition:all .5s;}
.now{display:block; width:109px; height:128px; text-decoration: none; background: url(../image/side-2.png) no-repeat; transition:all .5s;}
.now:hover{text-decoration: none; background: url(../image/side-2-hover.png) no-repeat; transition:all .5s;}

.side a span{display:none;}



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