body{ background-color: #212121;}
.wrap{ display: none; width: 25.6rem;}
.wrap p, .wrap ul, .wrap li { margin-bottom: 0;}
.wrap a { font-size: initial; line-height: 0;}

/* header */
.header{ height: 15.27rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/header.jpg) no-repeat center top; background-size: auto 100%;}
.logo{ top: .2rem; left: .2rem; width: 2.6rem;}
.topRight{ top: .2rem; right: .2rem; display: flex; align-items: center;}
.share{ margin-left: .2rem; width: .69rem; height: .69rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/share.png) no-repeat 0 0; background-size: 100% auto;}
.music{ margin-left: .2rem; width: .69rem; height: .69rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/music.png) no-repeat 0 100%; background-size: 100% auto;}
.music.off{ background-position: 0 0%;}
.website{ margin-left: .2rem; width: 2.17rem; height: .68rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/website.png) no-repeat 0 0; background-size: 100% auto;}
.header .yyBtn{ bottom: 3.1rem; width: 4.68rem; height: 1.79rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/yyBtn.png) no-repeat 0 0; background-size: 100% auto;}
.header .yyBtn:hover{ background-position: 0 50%;}
.header .yyBtn.active{ background-position: 0 bottom; cursor: default;}
.arrow{ bottom: 1.3rem; left: 50%; margin-left: -.22rem; width: .44rem; height: .27rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/arrow.png) no-repeat 0 0; background-size: 100% auto; animation: arrowUpDown .5s ease-in-out infinite alternate;}
@keyframes arrowUpDown{
  from{ transform: translateY(-100%);}
  to{ transform: translateY(0);}
}

/* 抽獎 */
.lottery{ height: 20.24rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/lottery-bg.jpg) no-repeat; background-size: 100% auto;}
.lotteryBox{ left: 4rem; top: 8.23rem; width: 5.3rem; height: 5.3rem; }
#laohuji{ position: relative; overflow: hidden; width: 5.3rem; height: 3.72rem;}
.lottery-view-list li{ width: 5.3rem; height: 1.23rem; margin-bottom: .01rem;}
.lottery-view-list li img{ display: block; width: 100%;}
.lotteryStart{ right: 0; bottom: 0; width: 2.89rem; height: .99rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/btn-lottery.png) no-repeat 0 0; background-size: 100% auto;}
.lotteryStart:hover{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/btn-lottery-hover.png) no-repeat 0 0; background-size: 100% auto;}
.lotteryNum{ bottom: .2rem; width: 100%; height: .3rem; line-height: .3rem; text-align: center; font-size: .18rem; color: #FFF; text-shadow:
    1px 1px 0 #eb5080,
   -1px 1px 0 #eb5080,
    1px -1px 0 #eb5080,
   -1px -1px 0 #eb5080;
}
.lotteryStart:hover .lotteryNum{text-align: center; font-size: .18rem; color: #FFF;text-shadow:
    1px 1px 0 #4d8bbf,
   -1px 1px 0 #4d8bbf,
    1px -1px 0 #4d8bbf,
   -1px -1px 0 #4d8bbf;}

.lotteryTask{ left: 10.82rem; top: 5.76rem; width: 11.98rem; height: 10.31rem; position: absolute; }
.lotteryTask .head{ position: relative; width: 11.98rem; height: 1.34rem; box-sizing: border-box; padding: 0 .98rem 0 1.7rem; display: flex; justify-content: space-between; align-items: center;}
.lotteryTask .btn-login { background: url(https://res1-nte.iwplay.com.tw/events/invite/images/btn-login.png) no-repeat; background-size: 100% auto; cursor: pointer; height: .71rem; left: .6rem; position: absolute; top: .35rem; width: 2.1rem}
.task-user-info { background-color: #242424; border-radius: .2rem; box-sizing: border-box; height: .75rem; left: .59rem; padding: 0 .76rem 0 .9rem; position: absolute; top: .33rem; width: 4.32rem; }
.task-icon-account { background: url(https://res1-nte.iwplay.com.tw/events/invite/images/icon-account.png) no-repeat bottom; background-size: 100% auto; height: .62rem; left: .12rem; position: absolute; top: .06rem; width: .62rem }
.task-user-info .btn-logout { background: url(https://res1-nte.iwplay.com.tw/events/invite/images/btn-logout.png) no-repeat; background-size: 100% auto; cursor: pointer; height: .53rem; position: absolute; right: .18rem; top: .11rem; width: .53rem }
.task-user-info p { color: #f5f5f5; font-size: .3rem; font-weight: bold; height: 100%; line-height: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% }
.ruleBtn{ position: absolute; right: .85rem; width: 2.51rem; height: .69rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/ruleBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lotteryTaskCont{ margin: .62rem 0 0 .26rem; width: 11.4rem; height: 7.9rem; }
.lotteryTaskList{ overflow-x: hidden; overflow-y: auto; width: 11.4rem; height: 6.6rem;}
.lotteryTaskList::-webkit-scrollbar{ width: .14rem; background-color: #3e3e3e; border-radius: .07rem;}
.lotteryTaskList::-webkit-scrollbar-thumb{ width: .14rem; background-color: #cbcbcb; border-radius: .07rem;}
.task{ display: flex; justify-content: space-between; align-items: center; margin-bottom: .42rem; width: 10.88rem; height: .97rem; background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task.png) no-repeat 0 0; background-size: 100% auto; box-sizing: border-box; padding: 0 .2rem 0 .33rem;}
.task .left{ font-size: .26rem; font-weight: bold; color: #969696; display: flex; align-items: center;}
.task3 .left{ font-size: .23rem; line-height: .24rem;}
.task-tip{ font-size: .19rem; font-weight: normal; color: #ff7aa9;}
.task .left::before{ content: ""; width: .55rem; height: .82rem; margin-right: .22rem; flex-shrink: 0;}
.task1 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task1.png) no-repeat 0 0; background-size: 100% auto;}
.task2 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task2.png) no-repeat 0 0; background-size: 100% auto;}
.task3 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task3.png) no-repeat 0 0; background-size: 100% auto;}
.task4 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task4.png) no-repeat 0 0; background-size: 100% auto;}
.task5 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task5.png) no-repeat 0 0; background-size: 100% auto;}
.task6 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task6.png) no-repeat 0 0; background-size: 100% auto;}
.task7 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task7.png) no-repeat 0 0; background-size: 100% auto;}
.task8 .left::before{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task8.png) no-repeat 0 0; background-size: 100% auto;}
.task .left .txt{ display: flex; justify-content: space-between; align-items: center; width: 6.4rem;}
.task .left .num{ font-size: .23rem; color: #FFF;}
.task button{ width: 2.51rem; height: .7rem; }
.task1 button{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task1Btn.png) no-repeat 0 0; background-size: 100% auto;}
.task2 button{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task2Btn.png) no-repeat 0 0; background-size: 100% auto;}
.task3 button{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task3Btn.png) no-repeat 0 0; background-size: 100% auto;}
.task4 button,.task5 button,.task6 button,.task7 button,.task8 button{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/task4Btn.png) no-repeat 0 0; background-size: 100% auto;}
.task button:hover{ background-position: 0 100%;}

.task button.active{ cursor: default;}
.task .active { cursor: default; pointer-events: none; }
.task1 button.active { background: url(https://res1-nte.iwplay.com.tw/events/invite/images/yy-done.png) no-repeat 0 0; background-size: 100% auto;}
.task2 button.active, .task3 button.active { background: url(https://res1-nte.iwplay.com.tw/events/invite/images/guanzhu-done.png) no-repeat 0 0; background-size: 100% auto;}
.task4 .active button,.task5 .active button,.task6 .active button,.task7 .active button,.task8 .active button{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/guanzhu-done.png) no-repeat 0 0; background-size: 100% auto;}

.lotteryTaskBtns{ display: flex; width: 100%; height: .85rem; margin-top: .42rem; justify-content: center; align-items: center;}
.lotteryTaskBtns button{ width: 2.69rem; height: .85rem; margin: 0 .5rem;}
.inviteLogBtn{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/inviteLogBtn.png) no-repeat 0 0; background-size: 100% auto;}
.packageBtn{ background: url(https://res1-nte.iwplay.com.tw/events/invite/images/packageBtn.png) no-repeat 0 0; background-size: 100% auto;}

/* Footer */
.footer { position: relative; padding: 25px 0; color: #fff; font-size: 12px; text-align: center; letter-spacing: .02px; background: #282a2c; }
.footer .container { max-width: 100%;}
.footer .copyright, .footer .grading { vertical-align: middle;}
.footer img { vertical-align: baseline; }
.footer .copyright, .footer .company, .footer p, .footer .grading, .footer .grading img, .footer ul { display: inline-block; }
.footer .company a, .footer .grading, .footer p, .footer ul { margin-left: 10px; }
.footer a:hover { color: #63edec;}
.footer p, .footer ul { text-align: left; line-height: 1.5; opacity: .6; margin-bottom: 0;}
.footer p a { color: #fff;}

@media screen and (max-width: 1200px) {
  .footer { padding: 35px 0; }
  .footer .copyright, .footer .company { display: block; margin-bottom: 15px;}
  .footer p { text-align: center; }
  .footer p, .footer .grading { margin: 0 auto; }
}

/* 彈窗：分享 */
.downloadSharePicTip{ display: none;}