/* 各頁面CSS */ /*切換PC置頂選單*/ .cantantBase1{ display: block; } .cantantBase2{ display: none; } .message-6 b {color: #fcff27;} /*pc遊戲區*/ .box_game {position: relative;height: 78vw;margin-bottom: 8vw;} .box_game_btn { position: absolute; top: 0;} .box_game_btn img {width: 95%;height: 100%;} .box_game_btn ul {display: flex;flex-wrap: wrap;grid-gap: 20px;margin: 0;padding: 43px 70px;justify-content:center;} .box_game_btn li { list-style: none;} .card1 { animation: card1 3.5s infinite; animation-iteration-count: 1; animation-fill-mode: forwards;} .card2 { animation: card2 4s infinite; animation-iteration-count: 1; animation-fill-mode: forwards;} .card3 { animation: card3 4.5s infinite; animation-iteration-count: 1; animation-fill-mode: forwards;} .card4 { animation: card4 5s infinite; animation-iteration-count: 1; animation-fill-mode: forwards;} .card5 { animation: card5 5.5s infinite; animation-iteration-count: 1; animation-fill-mode: forwards;} .card6 { animation: card6 6s infinite; animation-iteration-count: 1; animation-fill-mode: forwards;} @keyframes card1 { 0% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 87% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 88% { top: 0; left: 0; transform: translate3d(0, -10%, 0); opacity: 1;} 100% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes card2 { 0% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 88% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 89% { top: 0; left: 0; transform: translate3d(0, -10%, 0); opacity: 1;} 100% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes card3 { 0% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 89% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 90% { top: 0; left: 0; transform: translate3d(0, -10%, 0); opacity: 1;} 100% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes card4 { 0% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 90% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 91% { top: 0; left: 0; transform: translate3d(0, -10%, 0); opacity: 1;} 100% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes card5 { 0% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 91% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 92% { top: 0; left: 0; transform: translate3d(0, -10%, 0); opacity: 1;} 100% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes card6 { 0% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 92% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 0;} 93% { top: 0; left: 0; transform: translate3d(0, -10%, 0); opacity: 1;} 100% { top: 0; left: 0; transform: translate3d(0, 0, 0); opacity: 1;}} /*01.開始前gif*/ .box_film { position: absolute; top: 0; width: 96%; height: auto; padding: 0 2%;} .box_film img { width: 100%; height: 100%;} /*pc獎項說明*/ .Area_PD { margin-bottom: 210px;} .award { position: relative;margin: 0 auto; padding: 0; width: 88%;} .award .btn_momocoin { position: absolute; top: 560px; padding: 0 213px;} .award .btn_coupon { position: absolute; top: 1530px; padding: 0 213px;} .award img { width: 100%;} @media screen and (min-width: 768px){ .box_game {position: relative;height: 750px;margin-bottom: 110px;} } .Area_grid img {border-radius: 1em;} .Area_GameStyle .btn {position: relative;top: 693px;} @media screen and (max-width: 767px){ /*mb遊戲區*/ .btn_alert {position: absolute;top: -51%;right: -2vw;width: 20.6%;z-index: 99;} /*02.*/ .Area_GameStyle .btn {position: relative;top: 72.5vw;width: 90%;} } /*03.過場*/ .game_in_box { width: 38.5%; height: 60%; position: absolute; top: 0; margin: 0; padding: 15.5vw 29.5vw; background: url(game_bg.png?t=1762869959544) center center / 100% no-repeat;} .card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip .2s infinite;} .card-f, .card-b { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;} .card-b { transform: rotateY(180deg);} @keyframes flip { 0% { transform: rotateY(0deg);} 50% { transform: rotateY(180deg);} 100% { transform: rotateY(360deg);}} /*04.結果*/ .box_game .box_game_end { position: absolute; top: 0;} .box_game .box_game_end img { width: 100%;} /*mb獎項說明*/ .Area_PD { margin-bottom: 10vw;} .award { position: relative; padding: 2% 0 16.5% 0; width: 96%;} .award .btn_momocoin { position: absolute; top: 63.5vw; width: 50%; padding: 0 23vw;} .award .btn_coupon { position: absolute; top: 169vw; width: 50%; padding: 0 23vw;} /*mo幣這裡用*/ .Area_PD1 { margin-bottom: 40px;} @media screen and (max-width: 767px){ .Area_PD1 { margin-bottom: 5vw;} } /*獎項說明*/ @media screen and (min-width: 768px) { .Awards .PD3, .Awards .PD2, .Awards .PD1 {padding: 0;margin: 0;} .Awards {position: relative;width:100%;height: auto;font-family: "Century Gothic", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;} .Awards ul {list-style: none;margin-top: 0;padding: 0 2%;} .Awards h3 {color: #4e2727;font-size: 34px;margin-bottom:2%;margin-top: 0;} .Awards b {font-size: 20px;} .Awards .money .tickets {width: 70%;height: 130px!important;padding: 9% 0 0 0!important;margin: 0% auto;background: url(money.png?t=1762869959544) center 82%/100% no-repeat scroll;} .Awards .coupon .tickets {width: 70%;height: 130px;padding: 10% 0 0 0;margin: 0% auto;background: url(coupon.png?t=1762869959544) center 60%/100% no-repeat scroll;} .Awards .coupon .tickets_mo {width: 70%;height: 170px;padding: 10% 0 0 0;margin: 0% auto;background: url(mostor.png?t=1762869959544) center 60%/100% no-repeat scroll;} .Awards .coupon .tickets h4 {font-size: 26px;transform: rotate(-5deg);color: #f200ca;margin-top: 1%;} .Awards li {width: 100%;height: 100%;background-color: #fff;border-radius: 15px;} .Awards .tickets h4 {font-size: 26px;transform: rotate(-5deg);color: #ff8600;} /* .Awards .PD1 ul::before {content: "";position: absolute;margin: 4% 11%;width: 100%;height: 200px;background: url(coin.png?t=1762869959544) no-repeat;z-index: 2;pointer-events: none !important;}*/ .Awards .PD1 ul {display: grid;grid-template-columns: repeat(1, auto);margin-top: 10px;} .Awards .PD1 h4 {margin: 0% 45%;} .Awards .PD1 h4 > span {font-size: 68px;} .Awards .PD1 .tickets {width: 40% !important;padding: 6% 0 0 0;height: 154px;} .Awards .PD2 ul {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));grid-gap: 12px;} .Awards .PD2 h4 {margin: 5% 10%;padding-left: 34%;} .Awards .PD2 h4 > span {font-size: 62px;} .Awards .PD2 .txt {margin-bottom: 3%; /*display: grid;grid-template-columns: repeat(2, auto);grid-gap: 0%;*/} .Awards .PD3 ul {display: grid;grid-template-columns: repeat(3, auto);grid-gap: 12px;} .Awards .PD3 h4 {margin: 21% 45%;} .Awards .PD3 h4 > span {font-size: 48px;} .Awards .PD3 .txt {/*display: grid;grid-template-columns: repeat(3, auto);grid-gap: 15%;justify-content: center;*/margin-bottom:5%;} } @media screen and (max-width: 767px) { .Awards {position: relative;height: auto;font-family: "Century Gothic", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;width: 96%; margin: 0 0 0 2%;} .Awards .PD3 ul, .Awards .PD2 ul, .Awards ul {padding: 0;margin: 1% auto 0.5%;} .Awards .PD1 ul {margin: 5% auto 1%;} .Awards ul {list-style: none; } .Awards h3 {color: #4e2727;margin: 0;font-size: 1.5em;} .Awards b {font-size: 3vw;} .Awards .money .tickets {width: 70%;height: 13vw;padding: 10% 0 0 0;margin: 0% auto;background: url(money.png?t=1762869959544) center 95%/100% no-repeat scroll;} .Awards .money .tickets h4 {font-size: 4vw;transform: rotate(-5deg);color: #ff8600;} .Awards .coupon .tickets {width: 75%;height: 20vw;padding: 1% 0 0 0;margin: 0% auto;background: url(coupon.png?t=1762869959544) center 75%/100% no-repeat scroll;} .Awards .coupon .tickets_mo {width: 75%;height: 20vw;padding: 1% 0 0 0;background: url(mostor.png?t=1762869959544) center 75%/100% no-repeat scroll;margin: 0% auto;} .Awards .coupon h4 {font-size: 4vw;transform: rotate(-5deg);color: #f200ca;} .Awards li {width: 100%;height: 100%;background-color: #fff;border-radius: 15px;padding-top: 0;} /* .Awards .PD1 ul::before {content: "";position: absolute;margin: 5% 4% 0;width: 100%;height: 40vw;background: url(coin.png?t=1762869959544) no-repeat;z-index: 2;pointer-events: none;background-size: 90%;}*/ .Awards .PD1 ul {display: grid;grid-template-columns: repeat(1, auto);} .Awards .PD1 h4 {margin: -4.5% 46.5%;} .Awards .PD1 h4 > span {font-size: 8vw;} .Awards .PD1 .tickets {width: 45% !important;} .Awards .PD1 .tickets .span{} .Awards .PD1 .txt {display: flex;align-items: center;justify-content: center;} .Awards .PD2 ul {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));grid-gap: 3%;} .Awards .PD2 h4 {margin: 4% 50%;} .Awards .PD2 h4 > span {font-size: 6.5vw;} .Awards .PD2 .txt {/*display: grid;grid-template-columns: repeat(2, auto);grid-gap: 0;*/margin-bottom:5%} .Awards .PD3 ul {display: grid;grid-template-columns: repeat(3, auto);grid-gap: 2%;} .Awards .PD3 h4 {margin: 28% 50%;} .Awards .PD3 h4 > span {font-size: 5vw;} .Awards .PD3 .txt {/* display: grid;grid-template-columns: repeat(3, auto); grid-gap: 2%; */margin-bottom: 15%;} .Awards .coupon .PD1 h4 {margin: 12% 50%;} .Awards .coupon .PD2 h4 {margin: 21% 0%;padding-left: 30%;} .Awards .coupon .PD3 h4 {margin: 40% 39%;} }/*# sourceMappingURL=main_layout.min.css.map */ .Awards .btn {margin: 2em auto;} @media screen and (max-width:767px){ .Awards .btn {width: 100%;margin: 1.5em auto;} .Awards .btn2 {width: 100%;margin: 1.5em auto;} } @media screen and (max-width: 767px) { .Area_rotator { margin-top: 15vw;} } /*獎項說明補丁*/ .Awards .PD1 .txt {display: flex;align-items: center;justify-content: center;} .title_txt {margin:0;padding: 1% 0;color: #fff; background-color: #ff177d; border-radius: 15px 15px 0 0; font-size: 1.4em ;font-weight: 800;} .money .PD1 h5 {margin-left: 2%;color: #290404;font-size: 1.1em;margin-bottom: 5%;font-weight: 400;} .money .PD2 h5 {color: #290404;font-size: 1.1em;margin: 0;font-weight: 400;} @media screen and (max-width: 767px) { .title_txt {margin: 0;padding: 1% 0;color: #fff;font-size: 1.2em;font-weight: 800;} .money .PD1 h5 {margin-left: 2%;color: #290404;font-size: 0.9em;margin-bottom: 3%;font-weight: 400;margin-top: 3.6%;} .money .PD2 h5 {color: #290404;font-size: 0.9em;margin: 0;font-weight: 400;} } @media screen and (min-width: 768px) { .award_btn li:nth-of-type(1) { width: 20em; background-color: transparent; } } .btn_alert_game { top: 23vw; }