body {margin: 0; padding:0;background:#411D24;} @media screen and (max-width:767px){ body { width:100%;background:#2f1820;} } /*全域 套用 */ .for_pc { display:block !important; } .for_phone { display:none !important; } .for_mobile { display:none !important;} .for_mobile2 { display:none !important;} .for_pc2 , .for_mobile2{display:inline-block !important;} @media screen and (max-width:767px){ .for_pc { display:none !important;} .for_phone { display:block !important; } .for_mobile { display: block !important;} .for_mobile2 { display: inline-block !important;} .for_pc2{display:none !important;} } /*全BOX版面*/ .WRAPPER { position: relative;margin: 0 auto; padding: 0; width:100%; max-width:685px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;border-left:3px solid #3B1E1E; border-right:3px solid #3B1E1E;background:#2f1820 ; background-size:100%;} .WRAPPER img {display:block;border:0; vertical-align:top;} .WRAPPER a { text-decoration:none;display:block;} .WRAPPER .Area{ max-width:685px; margin:0 auto; /*overflow:hidden;*/position:relative; z-index:6;} .WRAPPER .Area p{font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei","Helvetica";font-weight:800;} .WRAPPER .Area li{font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei","Helvetica";} .WRAPPER .Area .mainArea { display:block; margin:0 auto; padding: 0; max-width:685px;position:relative;overflow: hidden;} @media screen and (max-width:767px){ .WRAPPER { padding-bottom:0px; margin:0 auto; display: block; min-width:100%; max-width:100%;border-left:none;border-right:none;} .WRAPPER .Area .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;max-width:100%;} } /*******************手機版下方直播間選單**********************************************************************/ .cut99 {width:685px; position: fixed;bottom:-15%;z-index:99;left:50%; margin-left:-342.5px;} .cut99.scroll{ width:685px; position: fixed;bottom: -0%;z-index: 99;transition:all 0.3s;} .cut99.scroll2{ width:685px; position: fixed;bottom:-15%;z-index: 99;transition:all 0.3s;} .cut99 .page{ display: block;position: absolute;width:100%; height:100%;top:0%;} .cut99 .page.link06{left:0%;background:url(page_footer_go.png?t=1791771078130) left top no-repeat;background-size: 100%; animation:pagego 1.5s ease infinite ;}/****直播開寶箱******/ @keyframes pagego{ 0%{opacity:0; } 50%{opacity:1; } 100%{opacity:0;} } @media screen and (max-width:767px){ .cut99 {width:100%; position: fixed;bottom:-100px;left: 0px;z-index: 99;margin-left:0px;} .cut99.scroll{ width:100%;bottom: -0%;} .cut99.scroll2{ width:100%;bottom:-10%;} .cut99 .page.link06{width:100%;left:0%;top:0%;background:url(page_footer_go.png?t=1791771078130) left top no-repeat;background-size: 100%; animation:pagego 1.5s ease infinite ;}/****直播開寶箱******/ } /*****************************************************************************************************/ .Area.cut00{position:relative;overflow:hidden; margin-bottom:0px; margin-top:0px;} .Area.cut00 .mainArea {overflow:hidden; width:100%;position:relative;/* background-image: url(bgbg1.jpg?t=1791771078130);background-repeat:repeat; */background-size:100%;} .Area.cut00 .mainArea .title_box{width:100%;height: auto; position:absolute; left:0%;top:0%;animation:hatch 1.5s ease-in, brightness-play 4s ease both infinite; z-index:1;} .Area.cut00 .mainArea .title_box .title{width:100%; } .Area.cut00 .mainArea .page{width:35%;height:8%;position:absolute;top:0px;right:0% ; z-index:5;} .Area.cut00 .mainArea .bk_bg{width:100%;} .Area.cut00 .mainArea .bk_bg2{width:100%; position:absolute; left:0%;top:0%;} .Area.cut00 .mainArea .bk_sea{width:106%; position:absolute; left:-3%;top:0%;animation: bk_sea 7s linear infinite ; transform-origin:center center;} .Area.cut00 .mainArea .bk_ghost01{width:100%; position:absolute; left:0%;top:5%; animation: ghost_1 1.5s ease-out ,bk_swing 7s linear infinite; opacity:0; animation-fill-mode:forwards;} .Area.cut00 .mainArea .bk_ghost02{width:100%; position:absolute; left:0%;top:5%; animation: ghost_1 1.8s ease-out ,bk_swing 8s linear infinite; opacity:0; animation-fill-mode:forwards;} .Area.cut00 .mainArea .bk_ghost03{width:100%; position:absolute; left:2%;top:7%; animation: ghost_1 1.6s ease-out ,bk_swing 6s linear infinite; opacity:0; animation-fill-mode:forwards;} .Area.cut00 .mainArea .bk_ghost04{width:100%; position:absolute; left:-4%;top:0%; } .Area.cut00 .mainArea .bk_ghost05{width:100%; position:absolute; left:-2%;top:3%; } @keyframes ghost_1 { 0% { transform: translate(0%,-5%) ;opacity:0;} 50%{ transform: translate(0%,-8%) ;opacity:0.5;} 100%{transform: translate(0%,-5%) ;opacity:1;} } @keyframes shiny1{ 0%{opacity:1; filter:brightness(100%) ;} 50%{opacity:1; filter:brightness(200%) ;} 100%{opacity:1; filter:brightness(100%) ;} } @keyframes bk_swing { 0% { transform: translate(0%,-5%) rotate(0deg);} 25%{ transform: translate(1%,-1%) rotate(-2deg);} 50%{ transform: translate(-1%,1%) rotate(1deg);} 75%{transform: translate(1%,-1%) rotate(-2deg);} 85%{transform: translate(-1%,-1%) rotate(1deg);} 100%{transform: translate(0%,-5%) rotate(0deg);} } .Area.cut00 .mainArea .bk_mo{width:100%; position:absolute; left:0%;top:0%; animation: bk_mo 2.5s linear infinite ;} .Area.cut00 .mainArea .bk_ki{width:100%; position:absolute; left:0%;top:-2%; animation: bk_ki 3.5s linear infinite ;} @keyframes bk_mo { 0% { transform: translate(0%,0%);} 50%{ transform: translate(2%,1%);} 100%{transform: translate(0%,0%);} } @keyframes bk_blur { 0% { transform: translate(0%,0%) ;filter:blur(0px); opacity:1;} 50%{ transform: translate(0%,2%); filter:blur(1px); opacity:0.75;} 100%{transform: translate(0%,0%) ;filter:blur(0px); opacity:1;} } @keyframes slideUp4 { 0% {opacity:0;transform: translateY(10%);} 50%{opacity:1;transform: translateY(-6%);} 65%{opacity:1;transform: translateY(3%);} 80%{opacity:1;transform: translateY(-3%);} 95%{opacity:1;transform: translateY(1%);} 100% {opacity:1;transform: translateY(0%);} } @keyframes slideUp3 { 0% {filter:brightness(100%) ;} 50%{filter:brightness(100%) ;} 100% {filter:brightness(100%);} } @media screen and (max-width:767px){ .Area.cut00{position:relative;overflow:hidden; margin-bottom:0px; margin-top:0px;} .Area.cut00 .mainArea .page{width:32%;position:absolute; left:0vw; top:0vw;} } /*****************************************************************************************/ /*.bbbbox{width:100%;position:relative;margin:-70px auto 0 auto;padding:0px 0px 0px 0px ;overflow: hidden;}*/ .bbbbox{width:100%;position:relative;margin:-50px auto 0 auto;padding:0px 0px 0px 0px ;overflow: hidden;} .bbbbox::after{content:""; display:block;width:100%; height:330px; position:relative; background:url(bgggg.jpg?t=1791771078130) no-repeat; background-size:100%; background-position: left top;} /* @media screen and (max-width:767px){ .bbbbox{margin:-55vw auto 0 auto; background-size:100%;} } .Area.act{ z-index:50;display:block; position:relative; width:100%; margin:0% auto 2% auto; padding:0px 0px; } .btn{position:absolute;z-index: 4;} */ @media screen and (max-width:767px){ .bbbbox{margin:-6vw auto 0 auto; background-size:100%;} .bbbbox::after{content:"";display:block;width:100%; margin-top:0px; position:relative; height:35vw; background:url(bgggg.jpg?t=1791771078130) no-repeat; background-size:100%; background-position: left top;} } .Area.act{ z-index:50;display:block; position:relative; width:100%; margin:0 auto 3% auto; padding:0px 0px; } .btn{position:absolute;z-index: 4; /*background:#000; opacity:0.5;*/} /*******超級直播日*5%**************************/ .Area.cut01{ padding:0px 0px 0px 0px; overflow:hidden; } .Area.cut01 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} .Area.cut01 .mainArea img{ display:block;width:100%;} .Area.cut01 .mainArea .btn.aa{width: 16%; height: 36%; top: 12%; right: 3%;} .Area.cut01 .mainArea .btn.bb{width: 36%; height: 28%; top: 55%; right: 11%;} /*******消費滿額3000登記贈***********************/ .Area.cut02{ padding:0px 0px 0px 0px; overflow:hidden; } .Area.cut02 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} .Area.cut02 .mainArea img{ display:block;width:100%;} .Area.cut02 .mainArea .box{width:100%; position:relative;margin-bottom:-0px; } .Area.cut02 .mainArea .btn.cc{width: 36%;height: 20%;top: 54%;left: 8%;} .Area.cut02 .mainArea .btn.cc_1{width: 32%; height:17%; bottom:5%; left: 3%;} .Area.cut02 .mainArea .btn.cc_2{width: 30%; height:17%; bottom:5%; left:35%;} .Area.cut02 .mainArea .btn.cc_3{width: 32%; height:17%; bottom:5%; right:3%;} /*** 登記/剩餘數****/ .Area.cut02 .box .count{position:absolute;width:20%; height:22px;right:10%;top:70%; font: bold 17px "Century Gothic", Arial, "Microsoft JhengHei";overflow:hidden;text-align:center;color:#FFFFFF; } .Area.cut02 .box .count span{color:#FFF070; } @media screen and (max-width:767px){ .Area.cut02 .box .count{position:absolute;width:22vw; height:17px;right:8%;top:70%; font: bold 3vw "Century Gothic", Arial, "Microsoft JhengHei";} } /******官方專場加碼***********************/ .Area.cut07{ padding:0px 0px 0px 0px; overflow:hidden; } .Area.cut07 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} .Area.cut07 .mainArea img{ display:block;width:100%;} .Area.cut07 .mainArea .box{width:100%; position:relative;margin-bottom:-1px; } .Area.cut07 .mainArea .btn.aa{width: 34%; height: 24%; top: 51%; left: 10%; border-radius:500px;} .Area.cut07 .mainArea .btn.bb_1{width: 46%; height:19%; bottom:3%; left:3%;} .Area.cut07 .mainArea .btn.bb_2{width: 46%; height:19%; bottom:3%; left:52%;} .Area.cut07 .mainArea .btn.bb_3{width: 32%; height:16%; bottom:3%; right:3%;} /******看專場享好康0***********************/ .Area.cut09{ padding:0px 0px 0px 0px; overflow:hidden; } .Area.cut09 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} .Area.cut09 .mainArea img{ display:block;width:100%;} .Area.cut09 .mainArea .box{width:100%; position:relative;margin-bottom:-1px; } .Area.cut09 .mainArea .btn.aa{width: 22%; height: 34%; top: 40%; left: 74%; border-radius:500px;} .Area.cut09 .mainArea .btn.bb_1{width: 46%; height:19%; bottom:3%; left:3%;} .Area.cut09 .mainArea .btn.bb_2{width: 46%; height:19%; bottom:3%; left:52%;} .Area.cut09 .mainArea .btn.bb_3{width: 32%; height:16%; bottom:3%; right:3%;} /******看專場享好康1***********************/ .Area.cut03{ padding:0px 0px 0px 0px; overflow:hidden; } .Area.cut03 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} .Area.cut03 .mainArea img{ display:block;width:100%;} .Area.cut03 .mainArea .box{width:100%; position:relative;margin-bottom:-1px; } .Area.cut03 .mainArea .btn.aa{width: 22%; height: 30%; top: 50%; left: 44%;border-radius:500px;} .Area.cut03 .mainArea .btn.bb_1{width: 32%; height:16%; bottom:3%; left:3%;} .Area.cut03 .mainArea .btn.bb_2{width: 32%; height:16%; bottom:3%; left:35%;} .Area.cut03 .mainArea .btn.bb_3{width: 32%; height:16%; bottom:3%; right:3%;} /*******看專場享好康2**********************/ .Area.cut04{ padding:0px 0px 0px 0px; overflow:hidden; } .Area.cut04 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} .Area.cut04 .mainArea img{ display:block;width:100%;} .Area.cut04 .mainArea .box{width:100%; position:relative;margin-bottom:0px; } .Area.cut04 .mainArea .btn.aa{ width: 16%; height: 36%; top: 12%; right: 3%;} .Area.cut04 .mainArea .btn.bb{width: 36%;height: 28%;top: 56%;right: 8%;} /*********消費查詢消費查詢******************************/ .Area.search{padding:15px 0px 15px 0px; overflow:hidden; } .Area.search img{width:100%;} .Area.search .mainArea { display:block; width:100%;position:relative; } .Area.search .mainArea .btn.one{ width:33%; height:90%; top:5%;left:26.5%;} .Area.search .mainArea .btn.two{ width:33%; height:90%; top:5%;right:5%;} @media screen and (max-width:767px){ .Area.search{padding:2vw 0px 4vw 0px; overflow:hidden; } } /***************momo粉絲團bn****************/ .Area.cut05{ padding:30px 0px 30px 0px;overflow:hidden;position:relative; z-index:3; } .Area.cut05 .mainArea{padding:0px 0px 0px 0px;overflow:hidden; background-repeat:no-repeat; background-position:top center;} .activeOut{width:95%;padding:0px 0px;margin:0px auto 0 auto;z-index:1;padding-bottom:0px;position:relative;overflow:hidden;} .activeOut .sw_bg{width:100%;overflow:hidden;float:left;position:relative; padding-bottom:60px;background:no-repeat top center; background-size:100%;} .activeOut .sw_bg .active_box{width:99.5%;border:0px;overflow:hidden;background:#fa1b88; margin:18px auto 0 auto; border:0px solid #fa1b88; border-radius:10px; overflow:hidden;} .activeOut .box_acty.swiper-wrapper{width:100%;position:relative; padding:0px; margin:0px;list-style:none;text-align:center;vertical-align:middle; } .activeOut .box_acty.swiper-wrapper .swiper-slide{width:100%;display:inline-block;padding:0px; margin:0vw 0vw 0vw 0vw ;overflow:hidden; } .activeOut .box_acty.swiper-wrapper img{width:100%; border-radius:0px; overflow:hidden;} .activeOut .swiper-pagination{bottom:30px; text-align:center; width:100%; left:0px;} .activeOut .pic{width:580px; position:absolute; top:0px; left:0px;} @media screen and (max-width:767px){ .Area.cut05{ padding:0vw 0px 4vw 0px;margin-bottom:8vw;} .Area.cut05 .mainArea{ padding:0vw 0px 0vw 0px;} .activeOut{width:95%;margin:0px auto 0 auto;padding-bottom:0px; padding-top:5px; padding-left:0px; } .activeOut .sw_bg{width:100%;padding:0px 0px 5.5vw 0px;margin:0px auto 0 auto;padding-left:0px; float:none; } .activeOut .sw_bg .active_box{width:99.5%;margin:3vw auto 0 auto;overflow:hidden; padding-bottom:0vw;} .activeOut .box_acty.swiper-wrapper img{} .swiper-pagination-bullet { width: 6px; height: 6px;} .activeOut .swiper-pagination{bottom:0px; text-align:center; width:100%; left:0px;} } /****************QA表格********************/ .Area.cut06 {margin:0% auto -10% auto; padding:10px 0px 20px 0px; background:#8f2f00;border-radius:25px; } .Area.cut06 h2{ padding: 0;margin:10px auto 10px auto;width: 94%; line-height:2.7rem; color: #fff; text-align: center; font-size:25px; font-weight:bold; border-radius:15px;border:0vw solid #f73a4e; } .Area.cut06 .box{ width:94%;padding: 0;margin: 0vw auto 5px auto;border-radius: 15px;background-color: #fff; overflow:hidden; border:0vw solid #fff; } .cut06 .box table{width:100%;margin: 0% auto 0% auto; /*border-collapse:collapse;*/ padding:5px; } .cut06 .box td { padding:5px; font-size:14px; line-height:18px; vertical-align:middle; letter-spacing:0px;} .cut06 .tab{} .cut06 .tab01{width:10%;font-weight:bold;color:#e53700;text-align: center;border-bottom:1px #9b9b9b dotted;} .cut06 .tab02 {width:90%;font-weight:bold;color:#e53700;text-align:left;border-bottom:1px #9b9b9b dotted;} .cut06 .tab03 {width:10%;font-weight:bold;color:#e53700;text-align: center;} .cut06 .tab04 {width:90%;font-weight:bold;color:#0e0401;text-align:left;} @media screen and (max-width:767px){ .Area.cut06 {margin:6% auto 5% auto; padding:0.5vw 0px 3.5vw 0px; } .Area.cut06 h2{margin:1vw auto 1vw auto;} } /*******全域設定 警語******/ .warningBox{display:block;width:100%; overflow:hidden;position:relative; margin:6px auto 0px auto; padding:0px 0px 0px 0px; } .warningBox ul{ display:block;width: 92%; margin:0px auto 10px auto; padding:0px; padding-left:0px;list-style-type:disc;} .warningBox ul li{width:100%; margin:0px auto 2px 3.5%; padding:0px;font-size:18px; letter-spacing:0.5px;line-height:26px; text-align:left; font-weight:bold;color:#FFFDE6; } .warningBox a{text-decoration:underline; display:inline-block;} .warningBox mark{background-color:#FFEA5D; border-radius:15px; padding:1px 8px; color:#FFF260;border:1px solid #FFF260;} .warningBox span{color:#FFEA5D;/*padding:1px 5px; background:#aed0ff; border-radius:5px; text-decoration:underline;*/} @media screen and (max-width:767px){ /***警語***/ .warningBox{padding-bottom:0vw; margin:8px auto -8px -4px;} .warningBox ul{margin:0vw auto 4vw auto;} .warningBox ul li{font-size:2.85vw;line-height:3.8vw; padding-inline-start:0px;} .warningBox ul li::marker{font-size:3vw;vertical-align:middle;} } /*********浮層框***********************/ .blackBox.agree_more .box .menuBox2{ width: 100%;list-style: none; overflow: hidden; padding: 0; margin:0; background-color: #eee; } .blackBox.agree_more .box .content p{text-align:center;font-size:15px; margin:5px 0px 10px 0px;} .blackBox.agree_more .box .menuBox2 li{width: calc(100%/2);float:left; text-align: center; font-size:19px; font-family:"微軟正黑體";color: #333;padding:7px 0px;cursor:pointer; font-weight:bold;border-right:1px solid #ccc;border-bottom:1px solid #ccc;} .blackBox.agree_more .box .menuBox2 li p{margin:5px 0px;} .blackBox.agree_more .box .menuBox2 li span{display:inline-block;color: #333; } .blackBox.agree_more .box .menuBox2 li.click{background:#f51490; color:#fff;} .blackBox.agree_more .box .menuBox2 li.click span{color: #fff;} .blackBox.agree_more .txtArea .pic{width:95%;} @media screen and (max-width:767px){ .blackBox.agree_more .box .menuBox2 li{text-align: center; font-size:1.05em;padding:2.5vw 0px;letter-spacing:-0px;font-weight:bold;vertical-align:middle; height:auto;} .blackBox.agree_more .box .menuBox2 li p{margin:0px 0px;} .blackBox.agree_more .box .menuBox2 li span{display:block; margin-bottom:-1px;} }