*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
html,body{ margin: 0; padding: 0;}
body{ background: #e0e8ef url(../images/index_bg.jpg) no-repeat; background-position: center 35px;}
img{ vertical-align: middle;}
@media (max-width:768px){
body{ background-position: center 0;}
}


.w_main{ max-width: 1350px; margin: 15px auto 30px;}
@media (max-width:1350px){
.w_main{ margin: 135px 0 50px 0; }
}
@media (max-width:1000px){
.w_main{ margin: 125px 0 50px 0; }
}


/*-- 連動選單 --*/
.fst_menu{ position: relative; margin: 0 auto; padding: 0 0 10px; max-width: 2000px;}
.topline{ width: 100%; height: 36px; background: url(../images/topline.png) top center no-repeat;}
.logo{ position: absolute; width: 160px; top: 70px; left: 30px; z-index: 1;}
.burger{ display: none;}
.nav_title{ position: absolute; top: 70px; left: 50%; transform: translate(-50%,0); opacity: 0; animation: .5s nav_title forwards;}
@keyframes nav_title {
    0%{ top: 80px; opacity: 0;}
    100%{ top: 70px; opacity: 1;}
}
nav{ visibility: hidden; max-width: 1350px; margin: 60px auto 0; opacity: 0; animation: .5s nav forwards; animation-delay: .2s;}
@keyframes nav {
    0%{ margin: 60px auto 0; opacity: 0;}
    100%{ margin: 50px auto 10px; opacity: 1;}
}
nav ul{ display: flex; list-style: none;}
nav li{ padding: 0 10px;}
nav li:nth-child(3){ margin-left: auto;}
nav span{ display: none;}

@media (max-width:1750px){
nav{ max-width: 1050px;}
nav li img{ width: 140px;}
}

@media (max-width:1350px){
nav{ display: none; position: fixed; top: 35px; right: 0; width: 100%; max-width: 100%; height: calc(100vh - 35px); margin: 0; text-align: center; background: rgba(255,231,175,0.9); opacity: 1; animation: none; z-index: 99;}
nav ul{ flex-wrap: wrap; margin: 30px 0 0 0;}
nav li{ width: 100%; margin: 0 0 15px; padding: 0; text-align: center;}
nav li img{ width: 209px;}
nav span{ display: inline-block; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; font-size: 2em;  background:linear-gradient(#31777b, #265b83); border: 3px solid #fef4e2; color: #fef4e2; cursor: pointer; transition: .3s;}
nav span:hover{ transform: rotate(180deg);}

.burger{ display: none; position: absolute; top: 75px; right: 30px; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; text-align: center; font-size: 2em; background:linear-gradient(#31777b, #265b83); border: 3px solid #fef4e2; color: #fef4e2; cursor: pointer; transition: .3s;}
.burger:hover{ transform: rotate(180deg);}
}

@media (max-width:768px){
.fst_menu{ height: 40px; background: #e3d8bc;}
.topline{ position: absolute; top: 40px;}
.logo{ width: 80px; top: 5px; left: 10px;}
.burger{ top: 7px; right: 10px; width: 30px; height: 30px; line-height: 30px; font-size: 1em; border: 0;}

.nav_title{ max-width: 80vw;}
nav{ top: 0px; height: 100vh;}

@keyframes nav_title {
    0%{ top: 110px; opacity: 0;}
    100%{ top: 100px; opacity: 1;}
}
}



/*-- 活動選單 --*/
.mv{ position: relative; margin: 0 0 -50px; text-align: center;}

.slogan{ position: inherit; z-index: 1;}


.mv ul{ position: absolute; top: 0; display: flex; width: 100%; list-style: none; z-index: 2;}
.mv li{ opacity: 0; transition: .5s; cursor: pointer;}
.mv li img{ width: 100%; transition: .5s;}
.mv li:hover img{ opacity: 0;}
.mv li:nth-child(1){ margin: 10px 15px 0 15px; background: url(../images/menu01b.png) no-repeat; background-size: contain; animation: .5s menu_btn forwards; animation-delay: 1s;}
.mv li:nth-child(2){ margin: 0 15px 0 15px; background: url(../images/menu02b.png) no-repeat; background-size: contain; animation: .5s menu_btn forwards; animation-delay: .8s;}
.mv li:nth-child(3){ margin: 10px 15px 0 15px; background: url(../images/menu03b.png) no-repeat; background-size: contain; animation: .5s menu_btn forwards; animation-delay: .6s;}
.mv li:nth-child(4){ margin: 10px 15px 0 auto; background: url(../images/menu04b.png) no-repeat; background-size: contain; animation: .5s menu_btn forwards; animation-delay: .6s;}
.mv li:nth-child(5){ margin: 0 15px 0 15px; background: url(../images/menu05b.png) no-repeat; background-size: contain; animation: .5s menu_btn forwards; animation-delay: .8s;}
.mv li:nth-child(6){ margin: 10px 15px 0 15px; background: url(../images/menu06b.png) no-repeat; background-size: contain; animation: .5s menu_btn forwards; animation-delay: 1s;}
@keyframes menu_btn {
    0%{ transform:scaleX(1); opacity: 0;}
    50%{ transform:scaleX(0); opacity: 0.5;}
    100%{ transform:scaleX(1); opacity: 1;}
}

.table{ position: relative; top: -70px; width: 825px; margin: 0 auto;}
.index_table{ width: 100%;}
.poring_1{ position: absolute; top: 0; left: 0; width: 100%; animation: picnicPoring 4s infinite; animation-delay: 1.8s;}
.poring_2{ position: absolute; top: 0; left: 0; width: 100%; animation: picnicPoring 4s infinite; animation-delay: 1.5s;}
.poring_3{ position: absolute; top: 0; left: 0; width: 100%; animation: picnicPoring 4s infinite; animation-delay: 2.1s;}
.index_food{ position: absolute; bottom: -50px; left: 50%; transform: translate(-50%, 0);}
@-webkit-keyframes picnicPoring {
    0%, 25%, 100% { transform: scale(1, 1) translateY(0); }
    12.5% { transform: scale(1.1, 0.9) translateY(10px); } 
}

@media (max-width:1200px){
.slogan{ width: 55.75%;}
.mv li{ max-width: 6%;}
.mv li:nth-child(1){ margin: 10px 5px 0 5px;}
.mv li:nth-child(2){ margin: 0 5px 0 5px;}
.mv li:nth-child(3){ margin: 10px 5px 0 5px;}
.mv li:nth-child(4){ margin: 10px 5px 0 auto;}
.mv li:nth-child(5){ margin: 0 5px 0 5px;}
.mv li:nth-child(6){ margin: 10px 5px 0 5px;}
}

@media (max-width:1000px){
.mv{ margin: 0 0 20px;}
.table{ width: 82.5%; top: 20px;}
.index_food{ max-width: 110%;}
}

@media (max-width:768px){
.slogan{ width: 80%;}
.mv ul{ position: inherit; justify-content: center; top: 10px;}
.mv li{ max-width: 8%;}
.mv li:nth-child(4){ margin: 10px 5px 0 5px;}
}

@media (max-width:480px){
.slogan{ width: calc(100vw - 30px);}
.mv li{ max-width: 12%;}

.table{ width: calc(100vw - 20px);}
.index_food{ max-width: 100%;}
}


/*-- 登入區域 --*/
.login{ position: relative; top: -10px; height: 70px; text-align: center; z-index: 1;}

.login img{ cursor: pointer; border-radius: 50px; border-bottom: solid #f3b36b 5px; box-shadow: 0px 0px 10px 5px #fff; transition: .3s;}
.login img:hover{ border-bottom: 0; margin: 5px 0 0 0; box-shadow: 0px 0px 0px 0px #fff;}
.btn_fb,.btn_google,.btn_apple{ display: none;}

@media (max-width:1000px){
.login{ top: 0; margin: 30px 0;}
}

.account{ position: relative; top: -10px; margin: 80px 0 0; text-align: center; z-index: 1;}
.account>div{ display: inline-block; padding: 0 20px; background: rgba(255,255,255,0.8); color: #cc2926; line-height: 40px; border-radius: 20px;}
.account a{ display: inline-block; margin: 0 0 0 10px; padding: 5px 10px; border-radius: 50px; line-height: normal; border: 1px solid #ef6260; color: #cc2926; font-size: 0.75em; text-decoration: none; transition: .5s;}
.account a:hover{ background: #ef6260; color: #fff;}
@media (max-width:1000px){
.account{ margin: 100px 0 0;}
}


/*-- 獎品 --*/
.gift{ width: 15%; border-radius: 50%; cursor: pointer;}
.gift:before{ position: absolute; left: 50%; bottom: -15px; transform: translate(-50%, 0); display: inline-block; width: 60%; padding: 5px 10px; content: "兌換"; background: #cc2926; font-size: 1.5em; font-weight: bolder; color: #fff; border-radius: 50px;}
.gift:hover{ animation-play-state:paused;}
.gift img{ max-width: 100%;}
.gift img:nth-child(2){ position: absolute; top: 0; left: 0;}
.gift1{ position: absolute; bottom: -11.04%; left: 7.3%; animation: 3s gift1 infinite;}
@keyframes gift1 {
    0%{ bottom: -11.04%; box-shadow: 0px 0px 10px 5px #fffec0;}
    50%{ bottom: -6.04%; box-shadow: 0px 0px 10px 5px #8ae2ff;}
    100%{ bottom: -11.04%; box-shadow: 0px 0px 10px 5px #fffec0;}
}
.gift2{ position: absolute; bottom: 18.77%; left: 55.75%; animation: 3s gift2 infinite;}
@keyframes gift2 {
    0%{ bottom: 18.77%; box-shadow: 0px 0px 10px 5px #8ae2ff;}
    50%{ bottom: 10.77%; box-shadow: 0px 0px 10px 5px #fffec0;}
    100%{ bottom: 18.77%; box-shadow: 0px 0px 10px 5px #8ae2ff;}
}
.gift3{ position: absolute; bottom: -7.7%; right: 7.3%; animation: 3s gift3 infinite;}
@keyframes gift3 {
    0%{ bottom: -7.7%; box-shadow: 0px 0px 10px 5px #fffec0;}
    50%{ bottom: -2%; box-shadow: 0px 0px 10px 5px #8ae2ff;}
    100%{ bottom: -7.7%; box-shadow: 0px 0px 10px 5px #fffec0;}
}

.pick{ animation-play-state:paused; filter:grayscale(1); cursor: auto;}

@media (max-width:1000px){
.gift:before{ font-size: 1em;}
}

@media (max-width:480px){
.gift:before{ font-size: 0.75em;}
}


/*-- 票 --*/
.tickets{ position: relative; margin: 0; text-align: center; z-index: 1;}
.tickets>div{ position: relative; display: inline-block;}
.tickets>div p{ position: absolute; top: 0; right: 0; display: flex; align-items: end; margin: 22px 30px 0 0; line-height: 60px; font-size: 3.75em; font-weight: bolder; color: #fff;}
.tickets>div span{ padding: 0 0 0 10px; font-size: 0.5em; line-height: 38px;}


/*-- 彈窗 --*/
.overlay{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,231,175,0.9); z-index: 10;}
.btmline{ display: none; position: fixed; bottom: 150px; left: 0; width: 100%; height: 100px; background:url(../images/btmline.png) top center no-repeat; z-index: 12; pointer-events: none;}
.btmcolor{ display: none; position: fixed; bottom: 0; width: 100%; height: 150px; background: #0f203a; z-index: 12;}
.btmcolor span{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -30px); display: inline-block; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; font-size: 2em;  background:linear-gradient(#31777b, #265b83); border: 3px solid #fef4e2; color: #fef4e2; text-align: center; cursor: pointer; transition: .3s; z-index: 13;}


.lightbox{ position: fixed; top: 100%; left: 50%; transform: translate(-50%, 0); width: 800px; max-width: calc(100% - 20px); z-index: 11;}
.lightbox .popuptop{ display: flex; flex-direction: column; justify-content: end; height: 30vh; background: url(../images/popupptop.png) bottom center no-repeat; background-size: contain;}
.lightbox>section{ height: 70vh; padding: 30px; border-radius: 50px 50px 0 0; border:5px solid #57362c; border-bottom: none; background: #fff url(../images/popupbg.png) left top repeat; box-sizing: border-box;}
.lightbox>section>div{ height: calc(100% - 100px); margin: 0; padding: 0 9px 0 0; overflow-y: auto;}

.lightbox section h2{ text-align: center; color: #fff; font-size: 2.25em; border-radius: 50px; background: linear-gradient(#31777b, #265b83);}
.lightbox section h3{ position: relative; display: inline-block; margin: 0; font-size: 2.25em; font-weight: bolder; color: #ff4a5d;}
.lightbox section h3::after{ position: absolute; bottom: 0; left: 0; display: block; content: ""; width: 100%; height: 20px; background: #ffedd4; border-radius: 10px;}
.lightbox section h3 span{ position: relative; z-index: 1;}
.lightbox section p{ margin: 20px 0 30px; font-size: 1.125em; font-weight: bolder;}
.lightbox section h4{ margin: 10px 0 0; padding: 20px 10px; background: rgba(255,74,93,0.1); color: #ff4a5d; text-align: center; border-radius: 10px;}
.lightbox section ul{ margin: 20px 0 30px 0;}
.lightbox section li{ position: relative; margin: 0 0 15px; padding: 0 0 0 30px; font-weight: bolder; font-size: 1.125em; counter-increment:li; list-style: none;}
.lightbox section li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: #ff4a5d; width: 26px; height: 26px; border-radius: 100%; color: #fff; text-align: center;}
.lightbox section li a{ color: #4a97ff; text-decoration: none;}
.lightbox section li span{ color: #ef6260;}
.lightbox section img{ max-width: 100%; margin: 20px 0;}


.lightbox>section>div::-webkit-scrollbar { width: 6px; background-color: transparent; }
.lightbox>section>div::-webkit-scrollbar-thumb { background-color: #fa929d; border-radius: 3px;}

.space{ height: 160px;}
@media (max-width:1000px){
.btmline{ position: fixed; bottom: 20px;}
.btmcolor{ height: 20px;}
.btmcolor span{ transform: translate(-50%, -80px);}

.lightbox>section>div{ height: calc(100% + 30px);}
}

@media (max-width:480px){
.lightbox .popuptop{ height: 20vh;}
.lightbox>section{ padding: 20px; height: 80vh; border-radius: 30px; border: 3px solid #57362c; font-size: 0.75em;}
}

/*-- 彈窗兌換 --*/
.redeem{ text-align: center;}
.redeem .gift{ position: relative; display: inline-block; cursor: auto;}
.redeem .gift::before{ content: ""; width: 0; height: 0; padding: 0;}
.redeem h5{ margin: 20px; font-size: 1.5em; color: #ef6260;}
.redeem a img{ cursor: pointer; border-radius: 50px; border-bottom: solid #f3b36b 5px; box-shadow: 0px 0px 10px 5px #fff; transition: .3s;}
.redeem a img:hover{ border-bottom: 0; margin: 5px 0 0 0; box-shadow: 0px 0px 0px 0px #fff;}
@media (max-width:480px){
.redeem .gift{ width: auto;}
}


/*-- 彈窗動畫 --*/
.lightbox_show{ animation: .5s lightbox_show forwards;}
@keyframes lightbox_show {
    0%{ top: 100%;}
    100%{ top: 0;}
}

/*-- footer --*/
footer{ background-color: #09213b;}
footer:before{ position: absolute; top: -100px; left: 0; display: black; content: ""; width: 100%; height: 100px; background: url(../images/btmline.png) center top no-repeat;}