body {margin: 0; padding:0;background:#b1ebff;} @media screen and (max-width:767px){ body { width:100%;background:#4ac7f3;} } /*全域 套用 */ .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;background:#4ac7f3; background-size:15%;border-left:3px solid #123e79; border-right:3px solid #123e79; } .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;box-shadow:none;} .WRAPPER .Area .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;max-width:100%;} } /*******************手機版下方直播間選單**********************************************************************/ .cut99 {width:685px; position: fixed;bottom:-10%;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:-10%;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=1751508144035) 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=1751508144035) left top no-repeat;background-size: 100%; animation:pagego 1.5s ease infinite ;}/****直播開寶箱******/ } /*****************************************************************************************************/ .Area.cut00{position:relative;overflow:hidden; margin-bottom:0vw; margin-top:0px;} .Area.cut00 .mainArea {overflow:hidden; width:100%;height:auto;position:relative;z-index:1; background:;} .Area.cut00 .mainArea .bk_bg{width:100%;} .Area.cut00 .mainArea .title{width:100%;position:absolute; left:0%;top:0%; z-index:3;} .Area.cut00 .mainArea .page{width:32%;height:14%;position:absolute;top:0px;right:0% ; z-index:5;/*background:url(logo.png?t=1751508144035) left top no-repeat ;background-size: 100%; */} .Area.cut00 .mainArea .pic1{width:100%;position:absolute;top:-4.8%;left:0%; z-index:5;animation: floa1 1.5s infinite linear;} .Area.cut00 .mainArea .pic2{width:100%;position:absolute;top:-6%;left:0%; z-index:5;animation: floa2 3s infinite linear;} .Area.cut00 .mainArea .momoBox{width:28%;height: auto; position:absolute;z-index:1;top:43%;left:-2% ; } .Area.cut00 .mainArea .momoBox img{width:100%;} .Area.cut00 .mainArea .momoBox img.momo_2{position:absolute;z-index:1;position:absolute;top:0px;left:0% ; animation: momo_2 2s infinite ease; transform-origin:bottom center; } .Area.cut00 .mainArea .momoBox img.momo_1{position:absolute;z-index:1; } .Area.cut00 .pic3{opacity:1;width:100%;position:absolute; left:0%;top:0%;z-index:2;animation:shiny 3.5s linear infinite;} .Area.cut00 .pic4{opacity:1;width:100%;position:absolute; left:0%;top:0%;z-index:2;animation:shiny 2.5s linear infinite;} .Area.cut00 .mainArea .pic01{position:absolute;top:0%; left:0%;width:100%;height:100%;background:url(title2.png?t=1751508144035) no-repeat;background-size: auto 100%; animation:pic01 steps(2) 1.2s infinite; } @keyframes pic01 { 0% {background-position:0%;} 100% {background-position:200%;} } @keyframes shiny{ 0%{opacity:0; filter:brightness(100%) ;} 15%{opacity:0.5; filter:brightness(100%) ;} 25%{opacity:1; filter:brightness(100%) ;} 50%{opacity:1; filter:brightness(100%) ;} 75%{opacity:1; filter:brightness(100%) ;} 85%{opacity:0.5; filter:brightness(100%) ;} 100%{opacity:0; filter:brightness(100%) ;} } @keyframes shin2{ 0%{opacity:0; filter:brightness(100%) ;} 50%{opacity:1; filter:brightness(100%) ;} 100%{opacity:0; filter:brightness(100%) ;} } @keyframes momo_2 { 0% { transform: translate(0%,0%) rotate(0deg);} 50%{ transform: translate(0%,0%) rotate(-5deg);} 100%{transform: translate(0%,0%) rotate(0deg);} } @keyframes floa1 { 0% { transform: translate(0%,0%);} 50%{ transform: translate(0%,1%);} 100%{transform: translate(0%,0%);} } @keyframes floa2 { 0% { transform: translate(0%,0%);} 50%{ transform: translate(0%,2%);} 100%{transform: translate(0%,0%);} } @media screen and (max-width:767px){} /*****************************************************************************************/ .bbbbox{width:100%;position:relative;margin:0px auto 0 auto;padding:0px 0px 150px 0px ;overflow: hidden;background:url(bk_2.jpg?t=1751508144035); background-size:100%;} .bbbbox::after{content:""; display:block;width:100%; height:auto; position:relative;} @media screen and (max-width:767px){ .bbbbox{margin:0vw auto 0 auto;background:url(bk_2.jpg?t=1751508144035); background-size:100%;} .bbbbox::after{content:"";display:block;width:100%; margin-top:0px; position:relative; /*background:#eceb83 url(bgggg.jpg?t=1751508144035) no-repeat; background-size:100%; background-position: left bottom;*/} } .Area.cut01 , .Area.cut02 , .Area.cut03 , .Area.cut04 , .Area.cut05 , .Area.cut07 , .Area.cut06 , .Area.banner { z-index:50;display:block; position:relative; width:100%; margin:1% auto 1% auto; padding:0px 0px; } /**********直播買 享回饋********************/ .Area.cut02{ padding:20px 0px 0px 0px; overflow:hidden; } .Area.cut02 .mainArea { display:block; margin:0% auto 0% auto; padding: 0;position:relative;} /*.Area.cut02 .mainArea::after{content:""; display:block; background: url(bug.png?t=1751508144035) no-repeat; background-size:100%; position:absolute; top:10%; right:1.5%; width:5.7%; height:50px;}*/ .Area.cut02 .mainArea img{ display:block;width:100%;vertical-align:top;} .Area.cut02 .mainArea .box{padding:0% 0%; margin:-1px 0px; width:100%; position:relative; background:url(bg_center_01.png?t=1751508144035) repeat-y;background-size: 100%;} .Area.cut02 .mainArea .box ul.btnBox{ display:block;width:86%; padding:0px;margin:0px auto 0 auto; overflow:hidden; list-style:none; text-align:left;/*background:url(watermark.png?t=1751508144035) no-repeat 100% 64% ; background-size:50%;*/} /*.Area.cut02 .mainArea .box ul.btnBox li:nth-of-type(n+2)::after{content:""; display:block; }*/ .Area.cut02 .mainArea .box ul.btnBox li{ display:inline-block;width:47%;margin:1% 1%;overflow:hidden;text-align:center;} .Area.cut02 .mainArea .box ul.btnBox a{width:100%;display:block;} .Area.cut02 .mainArea .box ul.btnBox a img{width:100%;} /*.Area.cut02 .mainArea .box ul.btnBox li:last-of-type{ display:inline-block;width:100%;margin:0% 0%;overflow:hidden;text-align:center;}*/ .Area.cut02 .mainArea .box ul.btnBox li.bigbox{ display:inline-block;width:97.5%;margin:4% 0% 2% 1%;overflow:hidden;text-align:center;} @media screen and (max-width:767px){ .Area.cut02{ padding:3vw 0px 0px 0px; overflow:hidden; } } /*****新客資格顯示***************************************************************************/ .Area.cut03{ padding:0px 0px 0px 0px; overflow:hidden; margin: -145px auto 0px auto; } .Area.cut03 .mainArea { display:block; margin:0% auto 0px auto; padding: 0;position:relative;} .Area.cut03 .mainArea img{width:100%;} .Area.cut03 .mainArea .box{width:100%;display:block;overflow:hidden;} .Area.cut03 .mainArea .box .member{position:absolute; width:26%; bottom:34.5%;} .Area.cut03 .mainArea .box .member img{width:100%;} .Area.cut03 .mainArea .box .member.new{left:55%;} .Area.cut03 .mainArea .box .member.first{left:55%;} .Area.cut03 .mainArea .box .member.xx{} .Area.cut03 .mainArea .box .member.vv{} .Area.cut03 .mainArea .member_what{width:30%; height:45%;position:absolute; left:20%; bottom:24%;z-index:99;} /*****誰是直播新客*******/ .Area.cut03 .mainArea .btn.one{width:50%; height:100%;position:absolute; left:0%; bottom:0%;} .Area.cut03 .mainArea .btn.two{width:50%; height:100%;position:absolute; right:0%; bottom:0%;} @media screen and (max-width:767px){ .Area.cut03{margin: -21vw auto 0vw auto;} .Area.cut03 .mainArea { display:block; margin:0% auto 0vw auto; padding: 0;position:relative;} } /******首單新客限定***********************/ .Area.cut04{ padding:5px 0px 5px 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%; overflow:hidden;position:relative;margin-bottom:0px; } .Area.cut04 .mainArea .btn{position:absolute;width:30%; /*background:#000; opacity:0.5;*/ } .Area.cut04 .mainArea .btn.one{width:100%; bottom: 0%; height:20%;left:0%;} .Area.cut04 .mainArea .btn.two{width:10%; top:15%; height:25%; right:6%;} /******首單新客限定***********************/ .Area.cut05{ padding:0px 0px 5px 0px; overflow:hidden; } .Area.cut05 .mainArea { display:block; margin:10% auto 0% auto; padding: 0;position:relative;} .Area.cut05 .mainArea img{ display:block;width:100%;} .Area.cut05 .mainArea .box{width:100%; overflow:hidden;position:relative;margin-bottom:19px; } .Area.cut05 .mainArea .btn{position:absolute;width:80%; /*background:#000; opacity:0.5;*/ } .Area.cut05 .mainArea .btn.one{width:90%; bottom: 5%; height:90%;left:5%;} .Area.cut05 .mainArea .box{padding:0% 0%; margin:-1px 0px; width:100%; position:relative; } .Area.cut05 .mainArea .box .btnBox{ display:block;width:97%; padding:0px;margin:0px auto 0px auto;padding-bottom: 20px; overflow:hidden;} /*******全域設定 警語******/ .warningBox{display:block;width:100%; overflow:hidden;position:relative; margin:8px auto 12px auto; padding:0px 0px 0px 0px; } .warningBox ul{ display:block;width: 92%; margin:0px auto; padding:0px; padding-left:5px;list-style-type:disc;} .warningBox ul li{width:100%; margin:0px auto 2px 3.5%; padding:0px;font-size:18px; letter-spacing:0.3px;line-height:26px; text-align:left; font-weight:bold;color:#123e79; } .warningBox a{text-decoration:underline; display:inline-block;} .warningBox mark{background-color:#e9647f; border-radius:15px; padding:1px 8px; color:#ffffff;border:1px solid #0d6bf2;} .warningBox span{color:#ff283a;/*padding:1px 5px; background:#aed0ff; border-radius:5px; text-decoration:underline;*/} @media screen and (max-width:767px){ /***警語***/ .warningBox{padding-bottom:0vw; margin:6px auto 5px -4px;} .warningBox ul li{font-size:3vw;line-height:4vw; 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 .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;} #agree_more1 .box h2{color: #f51490; text-align:left; text-indent:15px;} #agree_more2 .box h2{color: #000; padding:7px 20px; display:block; width:90%; margin:20px auto 10px auto; border-radius:80px;} #agree_more2 .box h2 span{color: #e61571; } #agree_more2 .box .txt{line-height: 1.5em; font-weight:bold;} .blackBox.agree_more .txtArea .pic{width:90%;} @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;} }