@charset "utf-8"; /* CSS Document */ /* * Ghvzon * 共用元件 js_link-v3.2.0 ******************************************************************* * --2020.01.14--使用新版lazyload.js(v3.2.0) * --2019.04.03--修改上傳圖片路徑設定9~16行(v3.1.0) ******************************************************************* */ /* -------------------------------------- * uiLayout 共用元件、共用動畫 * -------------------------------------- */ /* -------------------------------------- * 共用元件--功能 * -------------------------------------- */ /*延載預設圖 .articleList img.lazy_off {background-image:url(data:image/gif;base64,R0lGODlhTAFMAcQSAO/v7/T09P7+/vHx8fPz8/X19fz8/Pf39/////Dw8P39/fn5+fr6+vv7+/Ly8vb29vj4+O7u7v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkU4RDM1NjdDM0NEQkU4MTE5QzMzODE4NkNGQjI5ODY1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVCMzg2RDEwRjFFNjExRTg4MDFDQjVCRDU3QkQ4NjQ3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVCMzg2RDBGRjFFNjExRTg4MDFDQjVCRDU3QkQ4NjQ3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkI4OUE4MkFFNUYxRTgxMTk4ODc4QkI4QzVDMjFEQjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RThEMzU2N0MzQ0RCRTgxMTlDMzM4MTg2Q0ZC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);} */ /*版頭動畫控制*/ .an_paused.an_paused { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -ms-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused;} .an_running.an_running { -webkit-animation-play-state:running; -moz-animation-play-state:running; -ms-animation-play-state:running; -o-animation-play-state:running; animation-play-state:running;} /*tag錨點定位問題*/ .tag { position: absolute !important; display:block !important; width:0; height:0;} @media screen and (max-width:767px){ .tag { position:absolute ; top:-50px; display:block ;} } /* -------------------------------------- * 共用元件--元件 * -------------------------------------- */ /*LOGO*/ .momologo { z-index:2; position: absolute; top: 15px; left:15px;} .momologo a { display:block; width:140px; height:21px;} .momologo a svg { width:140px; height:21px; } .momologo a path { fill:#EA27C2; } .momologo-pink a path { fill:#EA27C2; }/*LOGO 桃紅色*/ .momologo-white a path { fill:#ffffff; }/*LOGO 白色*/ @media screen and (max-width:767px){ .momologo { display:none;} } /*活動標*/ .Area_logo { z-index:50; position:absolute; } .Area_logo a { display:block;} @media screen and (min-width:768px){ .Area_logo { top:50px; left:50%; -webkit-transform:translateX(-575px); transform:translateX(-575px); } } @media screen and (max-width:767px){ .Area_logo { position: absolute;top:5vw; left:18vw; width:17%/* filter: drop-shadow(0 5px 7px rgba(0,0,0,0.4));*/} .Area_logo img { width:100%; height:auto;} .Area_logo2 { position: absolute;top:5vw; left:35vw; width:30%/* filter: drop-shadow(0 5px 7px rgba(0,0,0,0.4));*/} .Area_logo2 img { width:100%; height:auto;} .Area_logo3 {position: absolute;top:5vw; left:65vw; width:18%/* filter: drop-shadow(0 5px 7px rgba(0,0,0,0.4));*/} .Area_logo3 img { width:100%; height:auto;} } /*分享*/ .Area_topshare { z-index:50; position:absolute; } .Area_topshare a { display:block;} @media screen and (max-width:767px){ .Area_topshare { top: 2vw; right: 2vw; text-align: right;} .Area_topshare a { float: left; display:block; width:30px; height:30px; background-image:url(m_fb_on.png?t=1746185918931); background-size:30px; background-repeat: no-repeat; background-position: center;} .Area_topshare img { width:100%; height:auto;} } /*分享icon*/ .Area_topshare .fbShare { background-image:url(m_fb_on.png?t=1746185918931);} .Area_topshare .lineShare { background-image:url(m_line_on.png?t=1746185918931);} /* +' ' +'
' +' ' +' ' +'
' */ /*注意事項*/ .Area_msg { color:#FFFFF0 !important;} /*產品標示*/ .Area_msg_PDmark {} /*APPLE-APP警語*/ .Area_msg_apple {} /*注意事項*/ .Area_bgfooter { margin-top: 100px; text-align:left; color:#fff; background:#8f887c;} .Area_bgfooter .box { margin:0 auto; padding: 60px 160px;} .Area_bgfooter p { margin: 0; font-weight:800; font-size: 32px; line-height: 1;color: #ffce7d;} .Area_bgfooter ul, .Area_bgfooter ol { margin-top: 1.2rem; } .Area_bgfooter ul ol, .Area_bgfooter ul ul { margin-top: 0.5rem; } .Area_bgfooter li { margin-bottom: 1.2rem; font-size: 18px; line-height: 1.8rem; text-align:justify;} .Area_bgfooter li p { margin-top: 1.2rem; font-size:24px;} .Area_bgfooter li a { display: inline; color: #e9db00; text-decoration: underline;} @media screen and (max-width:767px){ .Area_bgfooter { margin-top: 50px;} .Area_bgfooter .box { width:90%; padding:5%;} .Area_bgfooter p { font-size:24px;color: #ffce7d;} .Area_bgfooter ul, .Area_bgfooter ol { margin-top: 1rem; padding:0 5% 0 8%;} .Area_bgfooter ul ol, .Area_bgfooter ul ul { margin-top: 0rem; } .Area_bgfooter li { margin-bottom:1rem; font-size:16px; line-height:1.7rem;} .Area_bgfooter li p { margin-top: 1rem; font-size:16px;} } /*可拖移廣告icon*/ .Area_hammerAD { z-index: 300; position: fixed; bottom: -130px; right: 0;/* width: 25%;*/ transform: translate3d(0,100px,0); /*background-color: rgba(0,0,0,0.5);*/} .Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;} .Area_hammerAD img { width: 90%; height: auto;} .Area_hammerAD .closeButton a { display:block; cursor:pointer; position:absolute; top: 1vw; right: 1vw; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2} @media screen and (max-width:767px){ .Area_hammerAD { width: 23%; bottom: 0;} } /*回版頭*/ #gotopBtn { display:none !important;} /*把系統手機版原本的Gotop關掉*/ #gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%); bottom:80px; bottom: calc(80px + constant(safe-area-inset-bottom)*0.6 ); bottom: calc(80px + env(safe-area-inset-bottom)*0.6 );} #gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; } #gotop::after { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);} #gotop.cate-open { transform: translateX(0%);} /*白色*/ #gotop { color:#000; } #gotop::before { border-color: transparent transparent #000;} #gotop::after { background-color: rgba(255,255,255,0.95); box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2);} /*Phone置底黏人精--活動紀錄*/ .fixedfooterArea { z-index:10; position:fixed; left:0; margin:0; padding:0; width:100%; height:60px; text-align:center; font-size:14px; line-height:34px; color:#000; font-family:"微軟正黑體", "Microsoft JhengHei", Arial; background-color: transparent; bottom:38px; bottom: calc(38px + constant(safe-area-inset-bottom)*0.6 ); bottom: calc(38px + env(safe-area-inset-bottom)*0.6 );} .fixedfooterArea a { display:block; color:inherit; text-decoration:none;} .fixedfooterArea .fixedBox_1 { z-index:1; position:absolute; top:0px; left:0; width:100%; text-align:center; } .fixedfooterArea .fixedBox_1 ul { position:relative; margin:0; padding:0; width:100%; list-style:none outside none; white-space: nowrap;} .fixedfooterArea .fixedBox_1 li { z-index:1; position:relative; display:inline-block;float:inherit; padding:0; border-radius:44px; height:34px; box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2); color:#000; background-color: rgba(255,255,255,0.95);} .fixedfooterArea .fixedBox_1 li a {padding:0 24px;} .fixedfooterArea .fixedBox_1 li span { position:relative; top:4px; display: inline-block; width:26px; height:auto; } /*.fixedfooterArea .fixedBox_1 li span img { filter: invert(1);}*/ /*我的點數-動畫*/ .fixedfooterArea .fixedBox_1 { -webkit-animation:fixedBox_1-play 1s 1; animation:fixedBox_1-play 1s 1;} @-webkit-keyframes fixedBox_1-play { 0% { -webkit-transform: translate(0,50px); opacity:0;} 100%{ -webkit-transform: translate(0,0); opacity:1;} } @keyframes fixedBox_1-play { 0% { transform: translate(0,50px); opacity:0;} 100%{ transform: translate(0,0); opacity:1;} } /*Phone置底選單*/ .footerArea { display:none!important;} /*把系統手機版原本的地關掉*/ .Fixedfooter { z-index:1000; position: fixed; bottom: 0; width:100%; font-family:"微軟正黑體", "Microsoft JhengHei", Arial;} .Fixedfooter * , .Fixedfooter *:before , .Fixedfooter *:after { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; transition: all 0.15s cubic-bezier(0.5, 0, 0.5, 1);} .Fixedfooter .Fixedfooter_box { z-index: 1; position: fixed; bottom: 0; width:100%; max-width:767px; height: 50px; height: calc(50px + constant(safe-area-inset-bottom)*0.6 ); height: calc(50px + env(safe-area-inset-bottom)*0.6 ); /*-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.5); -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.5); -ms-box-shadow:0px 0px 8px rgba(0,0,0,0.5); -o-box-shadow:0px 0px 8px rgba(0,0,0,0.5); box-shadow:0px 0px 8px rgba(0,0,0,0.5);*/} .Fixedfooter .Fixedfooter_box ul { position: absolute; left: 0; top: 0px; margin: 0; padding: 0; width: 100%; list-style: outside none none;} .Fixedfooter .Fixedfooter_box li { float: left; position:relative; padding-top:0; height:50px; text-align: left; list-style: outside none none;} /*icon*/ .Fixedfooter .Fixedfooter_box li:nth-of-type(1) i { background-image: url(Fixedfooter_icon_1.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box li:nth-of-type(2) i { background-image: url(Fixedfooter_icon_2.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box li:nth-of-type(3) i { background-image: url(Fixedfooter_icon_3.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box li:nth-of-type(4) i { background-image: url(Fixedfooter_icon_4.png?t=1746185918931);} /*顆數--4顆*/ .Fixedfooter .Fixedfooter_box [data-num="4"] li { width:25%;} .Fixedfooter .Fixedfooter_box [data-num="4"] .bg i { left: calc((25% - 75px) * 0.5 );} .Fixedfooter .Fixedfooter_box [data-num="4"] .bg b { left: calc((25% - 75px) * 0.5 );} /*顆數--3顆*/ .Fixedfooter .Fixedfooter_box [data-num="3"] li { width:33.3%;} .Fixedfooter .Fixedfooter_box [data-num="3"] .bg i { left: calc((33.3% - 75px) * 0.5 );} .Fixedfooter .Fixedfooter_box [data-num="3"] .bg b { left: calc((33.3% - 75px) * 0.5 );} .Fixedfooter .Fixedfooter_box li a { position:relative; display:block; color: #ffd48e; font-size:12px; line-height:12px; text-align:center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;} .Fixedfooter .Fixedfooter_box li a i { z-index:2; position:relative; display:block; margin:0 auto; width:40px; height:30px; background-repeat: no-repeat; background-position: center center; background-size: auto 38px;} /*高亮*/ .Fixedfooter .Fixedfooter_box li.cate-hover { -webkit-transform:translateY(-13px); transform:translateY(-13px); } .Fixedfooter .Fixedfooter_box li.cate-hover a { color:#fff;} /*icon高亮*/ .Fixedfooter .Fixedfooter_box li.cate-hover i { -webkit-transform:translateY(-4px); transform:translateY(-4px); transition: none;} .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(1) i { background-image: url(Fixedfooter_icon_1_on.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(2) i { background-image: url(Fixedfooter_icon_2_on.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(3) i { background-image: url(Fixedfooter_icon_3_on.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(4) i { background-image: url(Fixedfooter_icon_4_on.png?t=1746185918931);} .Fixedfooter .Fixedfooter_box .animated { animation-delay:-0.6s;} /*特製背景 .Fixedfooter .Fixedfooter_box .bg { z-index:-1; position:absolute; bottom:25px; left:0; width:100%; height:100%; pointer-events:none;} .Fixedfooter .Fixedfooter_box .bg i { display:block; z-index:2; position:absolute; top:0; left: calc((25% - 75px) * 0.5 ); border-radius:50%; width:75px; height:75px; background:#FF213C; -webkit-transform: scale(0.85); transform: scale(0.85); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px 5px rgba(191,15,26,0.3), 0 16px 20px 10px rgba(191,15,26,0.5), 0 16px 20px 10px rgba(191,15,26,0.5), 0 30px 40px 30px rgba(191,15,26,0.5);} .Fixedfooter .Fixedfooter_box .bg b { display:block; z-index:3; position:relative; left: calc((25% - 75px) * 0.5 ); border-radius:50%; width:75px; height:75px; box-shadow: 45px 40px 0 #E41511, -45px 40px 0 #E41511, 0 60px 0 #E41511, -32px 77px 0 #E41511, 32px 77px 0 #E41511, 0 75px 0 #E41511;} .Fixedfooter .Fixedfooter_box .bg b:before, .Fixedfooter .Fixedfooter_box .bg b:after { content: ''; position: absolute; top: 30%; border-top: solid 2px #FF213C; width: 800%; height: 180%; background: #E41511;} .Fixedfooter .Fixedfooter_box .bg b:before { right:100%; border-top-right-radius: 20px;} .Fixedfooter .Fixedfooter_box .bg b:after { left:100%; border-top-left-radius: 20px;}*/ /*416品牌狂歡版型*/ .Fixedfooter .Fixedfooter_box .bg { z-index:-1; position:absolute; bottom:30px; left:0; width:100%; height:100%; pointer-events:none; } .Fixedfooter .Fixedfooter_box .bg i { display:none;} .Fixedfooter .Fixedfooter_box .bg b { display:block; z-index:3; position:relative; left: calc((25% - 75px) * 0.5 ); width:75px; height:75px; } .Fixedfooter .Fixedfooter_box .bg b:before, .Fixedfooter .Fixedfooter_box .bg b:after { content: ''; position: absolute; top:40%; width: 800%; height: 180%; background: #524d45; } .Fixedfooter .Fixedfooter_box .bg b:before { right:0%; } .Fixedfooter .Fixedfooter_box .bg b:after { left:0%;} /*高亮*/ .Fixedfooter .Fixedfooter_box li.cate-hover { -webkit-transform:translateY(-10px); transform:translateY(-10px); transition: none;} .Fixedfooter .Fixedfooter_box li span { display:block;} .Fixedfooter .Fixedfooter_box li.cate-hover span { -webkit-transform:translateY(11px); transform:translateY(11px); transition: none;} .Fixedfooter .Fixedfooter_box li:after { content:""; display: block; z-index:1; position:absolute; top:-20px; left:0; padding-bottom:62px; width:100%; height:0; background-image:url(Fixedfooter_icon_bg.png?t=1746185918931); background-position: center; background-size:62px; background-repeat:no-repeat; pointer-events:none;} .Fixedfooter .Fixedfooter_box li:after { transform:rotate(0deg) translate(0,30%) scale(0) ; transition: none;/* transition-timing-function:cubic-bezier(.98,.47,.53,1.3);*/} .Fixedfooter .Fixedfooter_box li.cate-hover:after { transform:rotate(0deg) translate(0,0) scale(1);} /*選單_黑底*/ .Fixedfooter .Fixedfooter_bg { transition: none;} /*【程式切換】cate-open 展開後*/ .Fixedfooter.cate-open .Fixedfooter_bg { position: fixed; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.5);} .Fixedfooter.cate-open .Fixedfooter_bg { display: block;} /*浮層區-Phone置底選單*/ .Fixedfooter_agree { display:none; z-index:0; position: fixed; left: 0; bottom: 0; display: block!important; margin:0; width: 100%; border-radius: 8px; background-color: rgba(255,255,255,0.9); box-shadow: 0px 0px 10px rgba(0,0,0,0.3); -webkit-transform: translateY(150%); transform: translateY(150%); padding-bottom: 55px; padding-bottom: calc(55px + constant(safe-area-inset-bottom)*0.6 ); padding-bottom: calc(55px + env(safe-area-inset-bottom)*0.6 );} /*【程式切換】cate-open 展開後*/ .Fixedfooter.cate-open .Fixedfooter_agree { -webkit-transform: translateY(0%); transform: translateY(0%);} .Fixedfooter_agree * { box-sizing:border-box;} .Fixedfooter_agree:after { } .Fixedfooter_agree ul { width:100%; height:auto; margin:0 ; padding:3%; } .Fixedfooter_agree ul:after { content:""; display:block; clear:both;} .Fixedfooter_agree li { float:left; display:block; margin-left:2%; margin-top:3%; width:32%; height:30px; border-radius:50px; text-align:center; font-weight:800; font-size:14px; line-height:30px; color:#fff; background-color: #1a3c6e; /*background-color: rgba(0,0,0,0.4);*/ } .Fixedfooter_agree li:nth-child(3n+1) { margin-left:0; } .Fixedfooter_agree li:nth-child(1), .Fixedfooter_agree li:nth-child(2), .Fixedfooter_agree li:nth-child(3) {margin-top:0; } .Fixedfooter_agree li a { color:#fff; display: block; } .Fixedfooter_agree li.cate-hover { background-color: #DC670D;} .Fixedfooter_agree li.cate-hover a { color:#fff;} /*特殊狀況--排數(1排2個)*/ .Fixedfooter_agree li { width:49%;} .Fixedfooter_agree li:nth-child(3n+1) { margin-left:2%; } .Fixedfooter_agree li:nth-child(2n+1) { margin-left:0%; } .Fixedfooter_agree li.x1 { width:100%;} /*配色*/ .Fixedfooter .Fixedfooter_box ul { box-shadow: 0 -2px 0 #524d45; border-top:solid 1px #524d45;} .Fixedfooter .Fixedfooter_box ul:after { z-index:-1; content:""; position:absolute; top:-4px; left:0; width:100%; height:2px; border-top:solid 1px #524d45;} /*.Fixedfooter .Fixedfooter_box .bg b:before, .Fixedfooter .Fixedfooter_box .bg b:after { background: transparent;} .Fixedfooter_agree { background-color:#1a3c6e;} .Fixedfooter_agree li.cate-hover { background-color: #FFCA9A;} .Fixedfooter_agree .trainglelist { border-top-color: #1a3c6e;} .Fixedfooter_agree li.cate-hover a { color:#1a3c6e;}*/ /*202002投票--動畫彈兩下*/ @keyframes bounce2 { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 90% { -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } } .bounce2 { -webkit-animation-name: bounce2; animation-name: bounce2; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /*PC錨點選單*/ .Area_pcmenu { z-index:10; position:relative; margin: 30px auto;} .Area_pcmenu .box { position:relative; border-radius: 10px; background-color:rgba(12,22,42,0.6); box-shadow:inset 2px 2px 2px rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .Area_pcmenu ul { margin:0 auto; padding:0; list-style:none;} .Area_pcmenu li { position:relative; display:inline-block; width:11.8%; text-align:center;} .Area_pcmenu li a { display:block; font-weight:800; font-size:28px; line-height:80px; color:#fff;} .Area_pcmenu li:hover a { color:#FFE600 !important;} .Area_pcmenu li.cate-hover a { color:#FFE600 !important;} .Area_pcmenu li:after { content:""; position:absolute; top:30%; left:-2%; display:block; width:1px; height:40%; background-color:#fff;} .Area_pcmenu li:first-child:after { display:none;} .Area_pcmenu.cate-fixed .box { position: fixed; top:0; width:1120px; -position: absolute; -top: expression(eval(document.documentElement.scrollTop)); } /* @media screen and (max-width:767px){ .Area_pcmenu { margin: 3vw auto;} .Area_pcmenu .box { border-radius: 2vw; overflow-y: hidden; white-space: nowrap; -webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; -o-transition:0s; transition:0s; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch; overflow-scrolling: touch;} .Area_pcmenu ul { } .Area_pcmenu li { padding: 0 3%; width: auto; } .Area_pcmenu li a { font-size: 4.4vw; line-height: 3rem;} .Area_pcmenu li:after { top: 35%; left: -2%; height: 30%;} .Area_pcmenu.cate-fixed .box { width: 100%;} }*/ /*選單_保留區*/ .Area_pcmenu .Nav_target { display:none; height:80px;} /*【程式切換】cate-fixed置頂後*/ .Area_pcmenu.cate-fixed .Nav_target { display:block;} /*PC分會場header*/ .cantantBase { z-index:100; position: absolute; top:0; left:0; width:100%; text-align:right; font-family:"微軟正黑體", "Microsoft JhengHei", Arial; /*background-color:rgba(0,0,0,0.5);*/ background-color:transparent; /*background-image: repeating-linear-gradient(0deg, #282828 10%, #242424 100%); box-shadow:0 0 10px rgba(0,0,0,.3)*/; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} .cantantBase.fixactive { background-color: rgba(0,0,0,0.8); box-shadow:0 2px 20px rgba(0,0,0,.3); } .cantantBase .box { position:relative; margin:0 auto; width:1220px; height:50px;padding-top:14px;} .cantantBase .momologo { position:absolute; top:31px; left:27px; } .cantantBase .momologo a { display:block; width:122px; height:22px; background:url(momo_logo.png?t=1746185918931); background-repeat: no-repeat; } .cantantBase .momologo a:hover { background:url(momo_logo_on.png?t=1746185918931);} .cantantBase .myplis_logo { position:absolute; top:20px; left:166px;z-index: 99;} .cantantBase .myplis_logo a { display:block; width:400px; height:70px; background:url(logo_02.png?t=1746185918931);background-repeat: no-repeat;} .cantantBase .bank_logo { position:absolute; top:20px; left:472px;z-index: 99;} .cantantBase .bank_logo a { display:block; width:400px; height:70px; background:url(logo_03.png?t=1746185918931);background-repeat: no-repeat;} .cantantBase ul {display:inline-block; margin:0 5px 0 0; padding:0; list-style:none; text-align:center; } .cantantBase li { float:left; display:inline-block; position:relative; margin:0; padding:0 11px; font-size:16px; line-height:50px;} .cantantBase li::before { content:""; position:absolute; top:18px; left:-1px; display:block; width:1px; height:15px; background-color:#fff; opacity: 0.3; } .cantantBase li:first-child::before { display:none;} .cantantBase li a { display:block; color:#fff; opacity: 1;} .cantantBase li:hover a{ color:#ffd48e; opacity: 1;} .cantantBase ul .cate-hover a { color:#ffd48e; opacity: 1;} /*分享icon*/ .cantantBase .share { padding-left: 0;} .cantantBase .share::before { display: none; padding-left: 0;} .cantantBase .fbShare { display:inline-block; width:40px; height:50px; background-image:url(fb_off.png?t=1746185918931); background-repeat: no-repeat; background-position: center;} .cantantBase .fbShare:hover { background-image:url(fb_on.png?t=1746185918931);} .cantantBase .lineShare { display:inline-block; width:40px; height:50px; background-image:url(line_off.png?t=1746185918931); background-repeat: no-repeat; background-position: center;} .cantantBase .lineShare:hover { background-image:url(line_on.png?t=1746185918931);} /*12個分會場*/ .cantantBase1 li { padding:0 10px;} /*機制頁用*/ .cantantBase2 { display:none;} .cantantBase2 li { padding:0 6.5px;} /*.cantantBase2 li { padding:0 15px;}*/ /*20200221投票活動微調*/ .cantantBase li::before { content:""; position:absolute; top:24px; left:-2px; display:block; border-radius: 50%; width:3px; height:3px; background-color:#fff; opacity: 1;} .cantantBase li { padding:0 13px; font-size:18px; line-height:50px;} /*PC黏人精-分會場*/ .fixarea { z-index:100; position:fixed; left:0px; top:0px; width:142px; text-align: center; font-family:"微軟正黑體", "Microsoft JhengHei", Arial; -webkit-transform: rotate3d(0,0,0,0deg) translate3d(-150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(-150px,0,0); -webkit-transform-origin:top left; transform-origin:top left; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixarea.fixarea_off { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0);} .fixarea .go_bt { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixarea .go_bt:hover { filter: brightness(105%);} .fixarea .fix_box { margin:0 auto;} .fixarea ul { margin:0; padding:0; list-style:none;} .fixarea ul:after { content:""; display:block; clear:both;} .fixarea li { position:relative; margin:0; padding:0; font-size:15px; line-height:20px;} .fixarea a { display:block; text-decoration:none; color:#ffe1bb;} .fixarea a:hover{ color:#ffd48e;} .fixarea .cate-hover a { color:#ffd48e; } .fixarea *:before, .fixarea *:after { background-color:#fff; opacity:0.3;} /*好康*/ .fixarea .fix_main { background:url(fixed_Area_repeat1.png?t=1746185918931) repeat-y center top; } .fixarea .fix_main *:before, .fixarea .fix_main *:after { opacity:0.2;} .fixarea .fix_main ul { } .fixarea .fix_main li { padding:8px 0;} .fixarea .fix_main li:before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px; } .fixarea .fix_main li:last-child::before { display:none;} /*分會場*/ .fixarea .fix_other { position:relative;} /*下方區塊--用圖*/.fixarea .fix_other { background:url(fixed_Area_repeat2.png?t=1746185918931) repeat-y center top;} /*下方區塊--用寫的(圓弧要提上去) .fixarea .fix_other:after { content:""; display:block; z-index:-1; position:absolute; top:0; left:12px; border-radius:0 0 100px 100px; width:119px; height:115%; background-color:#400F5A; opacity:1;}*/ /*(1排1個)*/ .fixarea .fix_other_x1 ul { padding:0;} .fixarea .fix_other_x1 li { padding:8px 0; } .fixarea .fix_other_x1 li:before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px;} .fixarea .fix_other_x1 li:last-child::before { display:none;} /*(1排2個)*/ .fixarea .fix_other_x2 ul { padding:5px 18px 0;} .fixarea .fix_other_x2 li { float:left; padding:8px 0; width:49%; } .fixarea .fix_other_x2 li:after { content: ""; position: absolute; top:0; right:0%; display: block; width:1px; height:100%;} .fixarea .fix_other_x2 li:nth-of-type(2n+2):after { display:none;} .fixarea .fix_other_x2 li:before { content: ""; position: absolute; bottom:0; left:0%; display: block; width:100%; height:1px;} /*單數最後一個隱藏 .fixarea .fix_other_x2 li:last-child::before { display:none;}*/ /*雙數最後2個隱藏*/.fixarea .fix_other_x2 li:nth-last-child(-n+2)::before { display:none;} /*主會場BN*/ .fixarea .title_top_box { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixarea .title_top_box:hover { filter: brightness(110%); -webkit-transform:scale(0.95); -moz-transform:scale(0.95); -ms-transform:scale(0.95); -o-transform:scale(0.95); transform:scale(0.95);} /*主會場BN*/ .fixarea .title { position: relative; /*z-index: 2;*/} /*.fixarea .title_top { z-index: 1; position: absolute; top: -165px; left:0px; overflow: hidden; width: 100%; height: 165px; background:url(fixed_Area_top_bg.png?t=1746185918931) no-repeat center top;}*/ .fixarea .title_top_box { z-index: 1; position:relative; top:40px; left: -13px; transform-origin: center 80%;} /*浮出 .title_top_box:hover { -webkit-transform: translate3d(-2%,-5%,0) rotate(-2deg); transform: translate3d(-2%,-5%,0) rotate(-2deg); transition-timing-function:ease-in-out;}*/ /*動畫 .title_top_box:hover { -webkit-animation-name: title_top_box-play; animation-name: title_top_box-play; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } @-webkit-keyframes title_top_box-play { 0% { -webkit-transform: translate3d(0,0%,0) transform: translate3d(0,0%,0);} 100% { -webkit-transform: translate3d(0,-10%,0); transform: translate3d(0,-10%,0);} } @keyframes title_top_box-play { 0% { -webkit-transform: translate3d(0,0%,0) transform: translate3d(0,0%,0);} 100% { -webkit-transform: translate3d(0,-10%,0); transform: translate3d(0,-10%,0);} }*/ /*PC黏人精-區塊錨點*/ .fixarea_tabbar { z-index:99; position:fixed; right:0; top:60px; border-radius:20px 0 0 20px; width:110px; background-color:rgba(0, 14, 29, 0.85); text-align: center; font-family:"微軟正黑體", "Microsoft JhengHei", Arial; -webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); -webkit-transform-origin:top right; transform-origin:top right; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixarea_tabbar.fixarea_off { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0);} .fixarea_tabbar .go_bt { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixarea_tabbar .go_bt:hover { filter: brightness(105%);} .fixarea_tabbar .fix_box { margin:20px auto 10px; margin-left:10px;} .fixarea_tabbar ul { margin:0; padding:0; list-style:none;} .fixarea_tabbar li { position:relative; margin:0; padding:0; font-weight:800; font-size:15px; line-height:20px;} .fixarea_tabbar a { display:block; text-decoration:none; color:#fff;} .fixarea_tabbar a:hover{ color:#ffd48e; } .fixarea_tabbar .cate-hover a { color:#ffd48e; } .fixarea_tabbar .fix_other { } .fixarea_tabbar .fix_other li { padding:10px 0; } .fixarea_tabbar .fix_other li:before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px; background-color:#5b0000; background-color:rgba(255,255,255,0.2);} .fixarea_tabbar .fix_other li:last-child::before { display:none;} .fixarea_tabbar .fix_other li i { display:none; z-index:-1; position: absolute; top:53%; left:-2px; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('') no-repeat center center; background-size:100%;} .fixarea_tabbar .fix_other .cate-hover i { display: block;} .fixarea_tabbar .fix_footer { position: relative; margin-bottom:10px; margin-left: 10px; font-weight:800; font-size:24px;} .fixarea_tabbar .fix_footer a { display:block; padding-top:11px;} .fixarea_tabbar .fix_footer a::before { content: ""; position: absolute; top:6px; left:44%; display:block; width: 0; height: 0; border-width: 0 5px 8px 5px; border-style: solid; border-color:transparent transparent #fff transparent;} /*錨點icon--白色--ffffff .fixarea_tabbar .fix_other li i { background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDMsMS43MDMsMy44MDMsMy44MDMNCglDMTMuODAzLDkuMzAzLDEyLjEsMTEuMDA1LDEwLDExLjAwNXoiLz4NCjwvc3ZnPg0K');} .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffffff transparent;}*/ /*錨點icon--紫--cc9dff .fixarea_tabbar .fix_other li i { background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ibmF2bGlnaHRfaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4Ig0KCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNjYzlkZmY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMCwwQzYsMCwyLjgsMy4yLDIuOCw3LjJDMi44LDEyLjksMTAsMjAsMTAsMjBzNy4yLTcuMSw3LjItMTIuOEMxNy4yLDMuMiwxNCwwLDEwLDB6IE0xMCwxMQ0KCWMtMi4xLDAtMy44LTEuNy0zLjgtMy44UzcuOSwzLjQsMTAsMy40czMuOCwxLjcsMy44LDMuOFMxMi4xLDExLDEwLDExeiIvPg0KPC9zdmc+DQo=');} .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #cc9dff transparent;}*/ /*錨點icon--黃--ffe600*/ .fixarea_tabbar .fix_other li i { background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ibmF2bGlnaHRfaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4Ig0KCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNmZmU2MDA7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMCwwQzYsMCwyLjgsMy4yLDIuOCw3LjJDMi44LDEyLjksMTAsMjAsMTAsMjBzNy4yLTcuMSw3LjItMTIuOEMxNy4yLDMuMiwxNCwwLDEwLDB6IE0xMCwxMQ0KCWMtMi4xLDAtMy44LTEuNy0zLjgtMy44UzcuOSwzLjQsMTAsMy40czMuOCwxLjcsMy44LDMuOFMxMi4xLDExLDEwLDExeiIvPg0KPC9zdmc+DQo=');} .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffd48e transparent;} /*錨點icon--黃--ffd48e*/ /* .fixarea_tabbar .fix_other li i { background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0ibmF2bGlnaHRfaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4Ig0KCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNmZjlmMjI7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMCwwQzYsMCwyLjgsMy4yLDIuOCw3LjJDMi44LDEyLjksMTAsMjAsMTAsMjBzNy4yLTcuMSw3LjItMTIuOEMxNy4yLDMuMiwxNCwwLDEwLDB6IE0xMCwxMQ0KCWMtMi4xLDAtMy44LTEuNy0zLjgtMy44UzcuOSwzLjQsMTAsMy40czMuOCwxLjcsMy44LDMuOFMxMi4xLDExLDEwLDExeiIvPg0KPC9zdmc+DQo=');} .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffd48e transparent;} */ /*PC黏人精-黏人快速鍵(白色款)--商品組版本 .fixed_Area {z-index:999; position:fixed; top:50px; right:0px; width:100px; font-weight:800; font-size:16px; line-height:48px; font-family:Century Gothic, "微軟正黑體",Helvetica; text-align:center; -webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); -webkit-transform-origin:top right; transform-origin:top right; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixed_Area a { display:block; text-decoration: none; color: #000;} .fixed_Area img {-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;} .fixed_Area .box ul { margin:0; padding:0; list-style:none;} .fixed_Area .box li { margin:0 0 1px 0; padding:0; height:48px; background-color:rgba(255,255,255,0.6);} .fixed_Area .box li a { letter-spacing:-1px;height:48px; overflow:hidden;} .fixed_Area .box li a:hover { background-color:rgba(255,255,255,1);} .fixed_Area .box li.cate-hover { background-color:rgba(255,255,255,1);} .fixed_Area .box h2 { margin:0; padding:0;}*/ /*快速導覽 .fixed_Area h3 { position: absolute; top:100px; right:-50px; margin:0; padding:35px 0 0 0; border-radius:10px; width:48px; height:82px; font-size: 16px; line-height:30px; writing-mode: tb-lr; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; background-color:rgba(255,255,255,0.6); text-align:left; cursor:pointer; -webkit-transform-origin:top left; transform-origin:top left; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .fixed_Area h3 i { position: absolute; top:0; right:0; display:block; width:50px; height:50px; cursor:pointer;} .fixed_Area h3 i:before { content: ""; position:absolute; top:41%; left:37%; display:block; border:1px solid #000; border-width:0 1px 1px 0; width:15%; height:15%; -webkit-transform:translate(-50%,-50%) rotate(135deg); transform:translate(-50%,-50%) rotate(135deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}*/ /*黑色款 .fixed_Area.fixed_Area-dark a { color: #fff;} .fixed_Area.fixed_Area-dark .box li { background-color:rgba(0,0,0,0.5);} .fixed_Area.fixed_Area-dark .box li a:hover { background-color:rgba(0,0,0,1);} .fixed_Area.fixed_Area-dark .box li.cate-hover { background-color:rgba(0,0,0,1);} .fixed_Area.fixed_Area-dark h3 {background-color:rgba(0,0,0,0.5);color: #fff; } .fixed_Area.fixed_Area-dark h3 i:before { border-color:#fff;}*/ /*金黑色款 .fixed_Area.fixed_Area-dark a { color: #c9ab50;} .fixed_Area.fixed_Area-dark .box li { background-color:rgba(36,36,36,0.7);} .fixed_Area.fixed_Area-dark .box li a:hover { background-color:rgba(0,0,0,1);} .fixed_Area.fixed_Area-dark .box li.cate-hover { background-color:rgba(0,0,0,1);} .fixed_Area.fixed_Area-dark h3 {background-color:rgba(36,36,36,0.7);color: #c9ab50; } .fixed_Area.fixed_Area-dark h3 i:before { border-color:#c9ab50;}*/ /*收合黏人精 .fixed_Area.fixed_Area_hide { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); } .fixed_Area.fixed_Area_hide h3 { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); -webkit-transition-delay:0.2s; transition-delay:0.2s;}*/ /*浮層嘿嘿*/ .blackBox_play {} .blackBox { display:none; z-index:99999; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: rgba(34,34,34,0.75); } .blackBox * { font-family:"微軟正黑體", "Microsoft JhengHei", Arial; box-sizing:border-box;} .blackBox a { text-decoration:none;} /*浮層基本*/ .blackBox .box .button { border-top:1px solid #d6d6d6; text-align:center; font-size:1.25rem; line-height:3.5rem; font-weight:bold;} .blackBox .box .but-close { clear:both; width:100%;} .blackBox .box .but-close a { display:inline-block; width:100%; height:100%; color:#333;} .blackBox .box h3 span.close { position:absolute; top:6px; right:5px; display:block; border:2px solid #333; border-radius:5px; width:63px; height:33px; font-size:1rem; line-height:2rem; text-align:center;} .blackBox .box h3 span.close a { display:inline-block; width:100%; height:100%; color:#333;} .blackBox .Boxclose { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;} .blackBox .box h4 {height: 3rem; font-size: 0.8rem; font-weight: 100; text-align: center; color: #000;} /*IT用*/ .blackBox_IT { display:block; z-index:inherit; position:static; width:auto; height:auto; background: none;} /*通知浮層*/ .agreeArea { z-index:1; position:relative; top:5%; margin:0 auto 30px; width:94%; max-width:700px; font-family:"Century Gothic", "微軟正黑體", sans-serif; /*text-align:justify; word-break:break-all;*/} .agreeArea img{ width:100%; height:auto;} .agreeArea .box { border-radius:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color:#fff; overflow:hidden;} .agreeArea .box .txtArea { height:600px; overflow:auto; overflow-y:auto; -webkit-overflow-scrolling:touch;} .agreeArea .box h3 { margin:0; padding:0; height:3rem; font-size:1.25rem; font-weight:800;line-height:3rem; text-align:center; color:#000; background-color:#ffd710;} .agreeArea .box p { margin:10px auto; margin-top:1rem; padding:0 0 0 24px; text-align:center; font-size:1em; text-align:left; line-height:1.2em; color:#000;} .agreeArea .box p b { display:block; padding-bottom:0px;} .agreeArea .box p span { } .agreeArea .box .qrcodeimg { text-align:center; } .agreeArea .box .qrcodeimg a { color:#006afe;} .agreeArea .box .qrcodeimg img { width:100%; height:auto;} .agreeArea .box .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;} .agreeArea .box .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; } .agreeArea .box .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; } .agreeArea .box .agree_table th a{ color:#c70026; text-decoration:underline;} .agreeArea .box .xxx{ display:block; width:80%; height:40px; font-size:1.5em; text-align:center; line-height:40px; color:#FFF; background-color:#7048A0; margin:0 auto; margin-bottom:20px; margin-top:10px; font-weight:bold; border-radius:10px;} .agreeArea .box ul, .agreeArea .box ol { margin:0;} .agreeArea .box li { margin:0 20px 10px 0px; font-size:0.9em;} .agreeArea .box table { margin: 0 5%; width:90%; border-collapse:collapse;} .agreeArea .box th { padding:5px; border:1px solid #CCC; background:#eee; font-size:0.8em; } .agreeArea .box td { padding:5px; border:1px solid #CCC; font-size:0.8em; vertical-align:top; } .agreeArea .box table ul, .agreeArea .box table ol { padding:0 0 0 20px;} .agreeArea .box table li { margin:0 0 10px 0px;} /*浮層輪播*/ .agreeArea .box_pic { padding:5% 5% 0; overflow: hidden; -webkit-box-sizing:border-box; box-sizing:border-box; } .agreeArea .box_pic .pic_swiper {} .agreeArea .box_pic .pic_swiper ul { margin:0; padding:0; list-style:none;} .agreeArea .box_pic .pic_swiper li { margin:0; padding:0;} .agreeArea .box_pic .pic_swiper li.cate-active {} /*商品大圖*/ .agreeArea .box_pic .box_picimg { position:relative; overflow:hidden;} .agreeArea .box_pic .box_picimg .pagination { padding:0 10px; text-align:right; -webkit-transform-origin:bottom right; transform-origin:bottom right; -webkit-transform: translateZ(0) scale(0.8); transform: translateZ(0) scale(0.8);} .agreeArea .box_pic .box_picimg .pagination span { display: inline-block; padding: 0 10px; border-radius: 50px; background-color: rgba(255,255,255,0.7);} /*商品列表*/ .agreeArea .box_pic .box_piclist { padding-top:2%;} .agreeArea .box_pic .box_piclist li { background-color:#000; cursor: pointer;} .agreeArea .box_pic .box_piclist li img { opacity:0.75;} .agreeArea .box_pic .box_piclist li.cate-active img { opacity:1;} /*分享浮層*/ .floatBox { position:relative; margin:2% auto; padding: 2% 0; width: 700px; height:auto; background-color:rgba(0,0,0,0.8); text-align:center; position:relative; border-radius:20px;} .floatBox img { width:100%; height:auto;} .floatBox .go_bt { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .floatBox .go_bt:hover { filter: brightness(120%); -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);} .floatBox .closeButton a { display:block; cursor:pointer; position:absolute; top:-20px; right:-20px; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2} .floatBox .closeButton:hover {background-color:#666; text-decoration:none;} .floatBox .title { display:inline-block; margin:0 0 10px 0; border-bottom:1px solid #ffd800; font:bold 45px/1.5em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em; color:#ffd800; text-align:center} .floatBox .box_ { margin:0 auto; width:90%;} .floatBox .box_:after { content: ""; display:block; clear:both;} .floatBox .box_btn { margin:20px auto 0; width: 80%;} .floatBox .box_btn a { display:block; margin:3% 0;} .floatBox .box_btn img { width:100%;} .floatBox .box_btn .btn { margin:0 auto; width:60%;} .floatBox .box_btn2 a { float:left; margin:0 1%; width:48%;} @media screen and (max-width:767px){ .floatBox { padding:5% 0; width:90%; height: auto;} .floatBox .closeButton a {display:block; position:absolute; top:-15px; right:-15px; width:30px; height:30px; border-radius:50%; border:solid 2px #999999; font:bold 30px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2} .floatBox .closeButton:hover {background-color:#666; text-decoration:none} .floatBox .title { margin:0 5% 3vw; font-size: 6vw; line-height:2rem;} .floatBox .box_btn { margin:2% auto 0;} .floatBox .box_btn .btn { margin:0 auto; width:80%;} } /*適用商品btn*/ .floatBox .box_buy a { display: block; margin:20px auto 0; padding: 10px 40px; border-radius: 25px; width: 20%; color: #000; font:bold 24px/1em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; background-color: #DABA82;} @media screen and (max-width:767px){ .floatBox .box_buy a { margin: 3vw auto 0; padding: 1.5vw 5vw; width: 35%; font-size: 4.5vw; line-height: 5.5vw} } /*輸入框*/ .floatBox .input { margin:0 auto; padding:10px 20px; box-sizing:border-box; border-radius:20px; background-color:#fff; box-shadow:inset 3px 3px 10px rgba(0,0,0,0.7); } .floatBox .input input { margin:0; padding:0; border-radius:0; border: none; width:100%; height:70px; font-size:40px; line-height:70px; font-family:"微軟正黑體","Microsoft JhengHei", Arial, Helvetica; text-align:left; background-color:transparent;} /* Safari 和 Chrome，常用於iOS下移除內建樣式 + 取消選取藍框*/ .floatBox .input input { outline:none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} @media screen and (max-width:767px){ .floatBox .input { padding:1vw; width:100%; border-radius:10px; } .floatBox .input input { padding:0 2vw; height:12vw; font-size:5.5vw; line-height:12vw;} } /*活動紀錄查詢浮層*/ .refArea { width:700px; position:relative; display:block; margin: 0 auto; padding:0px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;} .refArea .closeBN a { z-index:2; position:absolute; top:-20px; right:-20px; display:block; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none;} .refArea .closeBN a:hover { background-color:#666; text-decoration:none} .refArea .title { margin:0 50px 10px; border-bottom:1px solid #ffd800; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em; color:#ffd800; text-align:center} .refArea .title2 { margin:20px auto 0px; font:bold 28px/1em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.1em; color:#fff; text-align:center} .refArea .title3 { margin-top:10px; font:bold 18px/1em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.1em; color:#fff; text-align:center} .refArea .box_txt { padding:10px 40px; font: 18px/1.7rem "微軟正黑體", "Microsoft JhengHei", "Century Gothic"; color:#fff; text-align:left; letter-spacing: 1px;} .refArea .ref_Date ul { margin: 0 auto; padding: 10px 50px;} .refArea .ref_Date li { position: relative; display:inline-block; margin:5px; padding:0px; width:70px; height:70px;border-radius:50%; text-shadow:rgba(0%,0%,0%,0.15) 1px 1px; color:#333; letter-spacing: -0.05em; text-align:center; background-color:#979797;text-align:center; box-shadow: 0px 0px 3px 3px rgba(0%,0%,0%,0.15),0px 0px 0px 5px rgba(100%,100%,100%,0.1) inset;} .refArea .ref_Date li .month { margin: 5px auto 0 auto; border-bottom:#333 solid 1px; width:80%; margin-top: 8px; font:bold 20px/1.2em "Century Gothic";} .refArea .ref_Date li .date { margin:0; margin-top:0px; font:bold 20px/1em "Century Gothic"; } /*填色 .refArea .ref_Date li.opendate { background-color:#8D0000; box-shadow: 0px 0px 3px 3px rgba(0%,0%,0%,0.15),0px 0px 0px 5px rgba(100%,100%,100%,0.1) inset;color:#fff; }*/ /*背景*/ .refArea .ref_Date li { background: url(ref_Date_bg.png?t=1746185918932) no-repeat top center; background-size: 100%;} .refArea .ref_Date li i { z-index: 2; position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background: url(ref_Date_on.png?t=1746185918932) no-repeat top center; background-size: 100%;} .refArea .ref_Date li.opendate i { display: block;} .refArea .ref_List table { margin:0 auto; padding: 10px 0;} .refArea .ref_List .table2 {font:bold 20px/1.2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em; color:#FFF; text-align:center; background-color:#999} .refArea .ref_List .table3 {font:bold 20px/1.2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.0001em; color:#000; text-align:center; background-color:#FFF} .refArea .ref_List table td, .refArea .ref_List table td { border: 1px solid #340d4d; font: bold 20px/1.5em "微軟正黑體", "Microsoft JhengHei", "Century Gothic";} .refArea .ref_List .txtsmall { padding:40px; padding-top:10px; font: 12px/18px "微軟正黑體", "Microsoft JhengHei", "Century Gothic"; color:#fff; text-align:left;} @media screen and (max-width:767px){ .refArea { width:90%;} .refArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;} .refArea .title { margin:0 5%; font-size:30px;} .refArea .title2 { margin:10px auto 0px; font-size:20px; } .refArea .title3 { margin:10px auto 0px; font-size:14px; } .refArea .box_txt { padding:10px 20px; font-size:12px; line-height:18px; color:#fff; text-align:left;} .refArea .ref_Date ul { margin:0 auto; padding: 10px 20px 20px;} .refArea .ref_Date li { margin:3px; width:40px; height:40px;} .refArea .ref_Date li .month { font-size:12px; line-height:1.3em; margin-top:4px;} .refArea .ref_Date li .date { margin-top:2px; font-size:12px;} .refArea .ref_List table { } .refArea .ref_List .table2 { font-size:12px;} .refArea .ref_List .table3 { font-size:12px;} .refArea .ref_List .table2 td, .refArea .ref_List .table3 td { font-size:12px; line-height:1.2em;} .refArea .ref_List .txtsmall { padding:20px; padding-top:10px; font-size:12px; line-height:18px; color:#fff; text-align:left;} } /*投票活動用*/ .refArea .ref_Date.for_vote { padding: 0 0 10px 0;} .refArea .votebox_Date { margin: 10px auto 10px; padding:2% 1% 2%; -webkit-box-sizing:border-box; box-sizing:border-box; width:90%; text-align:center;font: 18px/18px "Century Gothic","Microsoft JhengHei",Helvetica;letter-spacing:0px; color:#333; background-color: #fbfbfb; } .refArea .votebox_Date:after { content:""; display:block; clear:both;} .refArea .votebox_Date1 { margin-bottom: 0;} .refArea .votebox_Date2 { margin-top: 0; background-color: #FFEC93;} .refArea .votebox_Date .votebox_Date_title { float:left; width:20%;} .refArea .votebox_Date .votebox_Date_title b { display:block; margin-top:14px; margin-bottom:5px; color:#333;} .refArea .votebox_Date ul { float:left; margin:0; padding:0; list-style:none; width:80%;} .refArea .votebox_Date li { float:left; margin:0; margin-left: 1%; padding:0; width:65px; height: 65px; border: none; background-color: transparent; text-shadow: none; box-shadow: none;} @media screen and (max-width:767px){ .refArea .votebox_Date { font: 12px/12px "Century Gothic","Microsoft JhengHei",Helvetica;} .refArea .votebox_Date .votebox_Date_title { width:23%;} .refArea .votebox_Date .votebox_Date_title b { margin-top: 30px;} .refArea .votebox_Date ul { width:77%; } .refArea .votebox_Date li { margin-bottom: 1%; width:40px; height: 40px;} .refArea .votebox_Date li .month { margin-top: 5px;} } /* -------------------------------------- * 共用動畫 * -------------------------------------- */ /*遠進(大變小震一下)*/ .zoomIn4-play { opacity: 1; -webkit-transform: scale3d(3.3, 3.3, 3.3); transform: scale3d(3.3, 1, 3.3); will-change: auto; -webkit-animation-name: zoomIn4-play; animation-name: zoomIn4-play; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;} @keyframes zoomIn4-play { from { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 50%,100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); opacity: 1 ; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 77%, 90%, to { opacity: 1 ; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 70%, 72% { opacity: 1 ; -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 95% { opacity: 1 ; -webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02); } } /*藍球-飛進*/ .ballin-play { will-change: auto; -webkit-animation-name: ballin-play; animation-name: ballin-play; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} @-webkit-keyframes ballin-play { 0% { -webkit-transform: translate3d(1000%,-1000%,0px); transform: translate3d(1000%,-1000%,0px);} 30% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px);} 80% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px); opacity: 1;} 100% { -webkit-transform: translate3d(-500%,500%,0px); transform: translate3d(-500%,500%,0px); opacity: 0;} } @keyframes ballin-play { 0% { -webkit-transform: translate3d(1000%,-1000%,0px); transform: translate3d(1000%,-1000%,0px);} 30% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px);} 80% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px); opacity: 1;} 100% { -webkit-transform: translate3d(-500%,500%,0px); transform: translate3d(-500%,500%,0px); opacity: 0;} } /*藍球-轉轉*/ .ballrotate-play { will-change: auto; -webkit-animation-name: ballrotate-play; animation-name: ballrotate-play; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} @-webkit-keyframes ballrotate-play { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);} 100% { -webkit-transform:rotate(-360deg); transform:rotate(-360deg);} } @keyframes ballrotate-play { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);} 100% { -webkit-transform:rotate(-360deg); transform:rotate(-360deg);} } /*藍球-飛進*/ .m_ballin-play { will-change: auto; -webkit-animation-name: m_ballin-play; animation-name: m_ballin-play; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} @-webkit-keyframes m_ballin-play { 0% { -webkit-transform: translate3d(1000%,-1000%,0px); transform: translate3d(1000%,-1000%,0px);} 30% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px);} 80% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px); opacity: 1;} 100% { -webkit-transform: translate3d(-500%,500%,0px); transform: translate3d(-500%,500%,0px); opacity: 0;} } @keyframes m_ballin-play { 0% { -webkit-transform: translate3d(-1000%,-1000%,0px); transform: translate3d(-1000%,-1000%,0px);} 30% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px);} 80% { -webkit-transform: translate3d(0%,0%,0px); transform: translate3d(0%,0%,0px); opacity: 1;} 100% { -webkit-transform: translate3d(1000%,1000%,0px); transform: translate3d(1000%,1000%,0px); opacity: 0;} } /*藍球-轉轉*/ .m_ballrotate-play { will-change: auto; -webkit-animation-name: m_ballrotate-play; animation-name: m_ballrotate-play; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} @-webkit-keyframes m_ballrotate-play { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);} 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg);} } @keyframes m_ballrotate-play { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg);} 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg);} } /*背景主標微亮*/ .minbright-play-bg { -webkit-animation:minbright-play-bg 2s linear infinite alternate; animation:minbright-play-bg 3s linear infinite alternate ;} @-webkit-keyframes minbright-play-bg { 0% { filter:brightness(60%) hue-rotate(0deg); } 100% { filter:brightness(150%) hue-rotate(0deg); } } @keyframes minbright-play-bg { 0% { filter:brightness(60%) hue-rotate(0deg); } 100% { filter:brightness(150%) hue-rotate(0deg); } } .minbright-play { -webkit-animation:minbright-play 3s linear infinite alternate; animation:minbright-play 3s linear infinite alternate ;} @-webkit-keyframes minbright-play { 0% { filter:brightness(80%) hue-rotate(0deg); } 100% { filter:brightness(150%) hue-rotate(360deg); } } @keyframes minbright-play { 0% { filter:brightness(80%) hue-rotate(0deg); } 100% { filter:brightness(150%) hue-rotate(360deg); } }