@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;
	letter-spacing: 0;
}
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:5030px;}
.logo{display:inline-block; margin:-150px 0 0;}
.share, .share li{margin:0; padding:0; list-style: none}
.share{margin:0 0 0 420px;}
.share li{display:inline-block;}
.share li a{display:block; width:89px; height:150px; 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-baha.png) no-repeat 0 -20px;}
.share li:nth-child(5) a:hover{background:url(../image/share-5-baha.png) no-repeat 0 0;}
.site-description{margin:270px 0 0 180px; color:#fff;}
.site-description-2{margin:180px 0 0 350px; width:649px; color:#fff;}
.site-description-2 h2{font-size:60px; color:#ffc600;}
.act-time{margin:110px 50px 0 170px; color:#fff;}
.act-time h2{margin:0; font-size:50px; color:#ffc600;}
.act-time header{margin:22px 0;}
.act-time header:nth-child(1){margin-top:0;}





/*--互動表單--------------------------------------------*/
.qa{position:relative; margin-top:2050px; height:1270px;}
.qa-2, .qa-3, .qa-4, .qa-5, .qa-6, .qa-7, .qa-8, .qa-9{display:none;}
.chat-1{position: absolute; top:0; left:0; padding:85px 75px 0 75px; background: url(../image/chat-1.png) no-repeat; width:850px; height:504px; text-align: center;}
.chat-2{position: absolute; top:0; left:0; padding:110px 0 0 0; background: url(../image/chat-2.png) no-repeat; width:968px; height:357px; font-size:40px; color:#fff; text-align: center;}
.chat-3{position: absolute; top:0; left:0; padding:0; background: url(../image/chat-3.png) no-repeat; width:1000px; height:459px; color:#fff;}
.os{padding-top:80px; line-height:1.5em;}
.show{position:relative;}
.show h3{font-size:30px; text-align: center; color:#ffe400; margin:0 0 20px 0;}
.show .leading{z-index:8886; position:absolute; top:0; left:0; width:415px; height:459px;}
.leading-description{position:absolute; left:350px; top:50px; width:600px; font-size:30px;}
.show-2, .show-3, .show-4, .show-5, .show-6 {display:none;}

/*--01 寒冰亡魂愛琳--*/
.show-1 .leading{background: url(../image/01.png) no-repeat;}

/*--02 神鹿夢幻--*/
.show-2 .leading{background: url(../image/02.png) no-repeat;}

/*--03 魔龍影煌--*/
.show-3 .leading{background: url(../image/03.png) no-repeat;}

/*--04 大德魯伊費爾斯--*/
.show-4 .leading{background: url(../image/04.png) no-repeat;}

/*--05 蠻后希婭--*/
.show-5 .leading{background: url(../image/05.png) no-repeat;}

/*--06 魔神凱西迪奧--*/
.show-6 .leading{background: url(../image/06.png) no-repeat;}

.yourNumber{z-index:8888; position:absolute; top:-30px; left:0; padding:30px 30px 0 30px; background: url(../image/number-bg.png) no-repeat; width:369px; height:104px; text-align:center; color:#000;}
.yourNumber em{color:red; font-size:36px; font-family:'Arial Black';}
.qa-9 .chat-1{padding:100px 75px 0 75px;  width:850px; height:504px; font-size:46px; line-height:1.5em;}
.girl{position:absolute; top:340px; left:400px; background: url(../image/girl.png) no-repeat; width:554px; height:683px;}
.qa a span{display:none;}
.qa a, .qa a:hover{text-decoration: none; color:#000;}
.qa a{transition:background .5s;}
a.gotofunapps{position: absolute; display:block; top:500px; background:url(../image/go-to-funapps-site.png) no-repeat; width:642px; height:144px;}
a.gotofunapps:hover{background:url(../image/go-to-funapps-site-hover.png) no-repeat;}
a.form-start{position: absolute; display:block; top:530px; background:url(../image/form-star-btn.png) no-repeat; width:382px; height:144px;}
a.form-start:hover{background:url(../image/form-star-btn-hover.png) no-repeat;}
.user{display:inline-block; position:absolute; top:400px; background:rgba(255,255,255,.8); border-radius: 50px; box-shadow: 0 3px 5px rgba(0,0,0,.2);}
.user a{display:inline-block; padding:30px 40px;}
.user a:nth-child(2){background:#ffd800; border-top-right-radius: 50px; border-bottom-right-radius: 50px; }
.user.set{top:300px;}
.text-1{position:absolute; top:40px; left:70px; width:300px; text-align: center;}
.number{position:absolute; bottom:18px; left:27px; color:#fff;}

/*--你通常什麼時候上線？--*/
.onlinetime, .enjoy, .events, .worktime, .colors{position:absolute; top:450px;}
.onlinetime input[type="radio"]{display:none;}
.onlinetime input[type="radio"] + label{position: relative; transition:background .5s;}
/*.onlinetime input[type="radio"]:checked + label{transition:background .5s;}*/
.onlinetime input[type="radio"]#q-1 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.onlinetime input[type="radio"]#q-1:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.onlinetime input[type="radio"]#q-2 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.onlinetime input[type="radio"]#q-2:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.onlinetime input[type="radio"]#q-3 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.onlinetime input[type="radio"]#q-3:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.onlinetime input[type="radio"]#q-4 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.onlinetime input[type="radio"]#q-4:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.onlinetime input[type="radio"]#q-5 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.onlinetime input[type="radio"]#q-5:checked + label{background:url(../image/bg-1-option.png) no-repeat;}

/*--在世界頻道上，看到令你感到發笑的事時，你的回復通常是？--*/
.enjoy input[type="radio"]{display:none;}
.enjoy input[type="radio"] + label{position: relative; transition:background .5s;}
.enjoy input[type="radio"]:checked + label{transition:background .5s;}
.enjoy input[type="radio"]#q-6 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.enjoy input[type="radio"]#q-6:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.enjoy input[type="radio"]#q-7 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.enjoy input[type="radio"]#q-7:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.enjoy input[type="radio"]#q-8 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.enjoy input[type="radio"]#q-8:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.enjoy input[type="radio"]#q-9 + label{display:block; background:url(../image/bg-2.png) no-repeat; width:467px; height:181px; cursor:pointer;}
.enjoy input[type="radio"]#q-9:checked + label{background:url(../image/bg-2-option.png) no-repeat;}
.enjoy input[type="radio"]#q-10 + label{display:block; background:url(../image/bg-2.png) no-repeat; width:467px; height:181px; cursor:pointer;}
.enjoy input[type="radio"]#q-10:checked + label{background:url(../image/bg-2-option.png) no-repeat;}

/*--當你需要組隊去打副本或是事件時，你會？--*/
.events input[type="radio"]{display:none;}
.events input[type="radio"] + label{position: relative; transition:background .5s;}
.events input[type="radio"]:checked + label{transition:background .5s;}
.events input[type="radio"]#q-11 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.events input[type="radio"]#q-11:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.events input[type="radio"]#q-12 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.events input[type="radio"]#q-12:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.events input[type="radio"]#q-13 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.events input[type="radio"]#q-13:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.events input[type="radio"]#q-14 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.events input[type="radio"]#q-14:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.events input[type="radio"]#q-15 + label{display:block; background:url(../image/bg-2.png) no-repeat; width:467px; height:181px; cursor:pointer;}
.events input[type="radio"]#q-15:checked + label{background:url(../image/bg-2-option.png) no-repeat;}

/*--你在上班時間和朋友一起打競技場。正到你忽然發現主管走過來了，你會……--*/
.worktime input[type="radio"]{display:none;}
.worktime input[type="radio"] + label{position: relative; transition:background .5s;}
.worktime input[type="radio"]:checked + label{transition:background .5s;}
.worktime input[type="radio"]#q-16 + label{display:block; background:url(../image/bg-2.png) no-repeat; width:467px; height:181px; cursor:pointer;}
.worktime input[type="radio"]#q-16:checked + label{background:url(../image/bg-2-option.png) no-repeat;}
.worktime input[type="radio"]#q-17 + label{display:block; background:url(../image/bg-2.png) no-repeat; width:467px; height:181px; cursor:pointer;}
.worktime input[type="radio"]#q-17:checked + label{background:url(../image/bg-2-option.png) no-repeat;}
.worktime input[type="radio"]#q-18 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.worktime input[type="radio"]#q-18:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.worktime input[type="radio"]#q-19 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.worktime input[type="radio"]#q-19:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.worktime input[type="radio"]#q-20 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.worktime input[type="radio"]#q-20:checked + label{background:url(../image/bg-1-option.png) no-repeat;}

/*--你最喜歡哪一顏色的時裝？--*/
.colors input[type="radio"]{display:none;}
.colors input[type="radio"] + label{position: relative; transition:background .5s;}
.colors input[type="radio"]:checked + label{transition:background .5s;}
.colors input[type="radio"]#q-21 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.colors input[type="radio"]#q-21:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.colors input[type="radio"]#q-22 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.colors input[type="radio"]#q-22:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.colors input[type="radio"]#q-23 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.colors input[type="radio"]#q-23:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.colors input[type="radio"]#q-24 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.colors input[type="radio"]#q-24:checked + label{background:url(../image/bg-1-option.png) no-repeat;}
.colors input[type="radio"]#q-25 + label{display:block; background:url(../image/bg-1.png) no-repeat; width:466px; height:124px; cursor:pointer;}
.colors input[type="radio"]#q-25:checked + label{background:url(../image/bg-1-option.png) no-repeat;}

.next-btn{display:block; position:absolute; top:550px; left:500px; background:url(../image/next-btn.png) no-repeat; width:322px; height:104px;}
.next-btn:hover{background:url(../image/next-btn-hover.png) no-repeat;}
.share-btn{display:block; position:absolute; top:550px; left:0px; background:url(../image/share-btn.png) no-repeat; width:382px; height:144px;}
.share-btn:hover{background:url(../image/share-btn-hover.png) no-repeat;}
.restart-btn{outline: none; border:none; display:block; position:absolute; top:710px; left:0px; background:url(../image/restart-btn.png) no-repeat; width:382px; height:144px; transition:background .5s; cursor:pointer;}
.restart-btn:hover{background:url(../image/restart-btn-hover.png) no-repeat;}



/*--注意事項--------------------------------------------*/
.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;}








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




/*--邊欄的TOP及立馬參加---------------------------------*/
.side{width:182px; bottom:4em; right:2em; position:fixed;}
.scrollToTop{display:block; margin-bottom:15px; width:182px; height:184px; 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;}
.now{display:block; width:182px; height:184px; 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;}
.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;}



/*--滿版訊息框-------------------------------------------------*/
.full-page{ position:fixed; z-index:99999; width:100%; height:100%; background: rgba(0,0,0,.8);}
.msg-box{margin:5% auto 0; /*margin:10vh auto 0;*/ background:#eee; color:#413a3b; border-radius: 20px; position:relative;}
.msg-box header{padding:20px 0; border-bottom: 1px solid #fff;}
.msg-box > header > h2{margin:0; padding:20px; font-size:40px; text-align: center; color:#ff426a;}
.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;}
}
@media screen and (max-width: 1200px) {
	.side{right:-6em;}
}
.msg-box-1, .msg-box-2, .msg-box-3, .msg-box-4, .msg-box-5, .msg-box-6{display:none;}