@charset "utf-8";
/* CSS Document */

/*基本*/
body { margin: 0; padding: 0; background: var(--bodyBG); }

.Area_header_momologo { position: relative; display: none; z-index: 999; }
.Area_header_momologo a { display: block; padding: 13.5px 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 44px; text-align: center; vertical-align: top; background-color: #fafafa; }
.Area_header_momologo a .logo_svg { fill: #ea27c2; }
@media screen and (min-width: 768px) {
  .Area_header_momologo { display: none !important; }
}

/*全BOX版面*/
.WRAPPER { position: relative; display: block; margin: 0 auto; padding: 0; width: 100%; min-width: 1220px; overflow: hidden; font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica; }
.WRAPPER img { width: 100%; border: 0px; vertical-align: top; }
.WRAPPER a {  text-decoration: none; }
@media screen and (max-width: 767px) {
  .WRAPPER { min-width: inherit; padding-bottom: 0px; }
  .WRAPPER img {  width: 100%; height: auto; }
}

/*區塊_all*/
.Area { position: relative; margin: 0 auto; padding: 0; border-radius: 0; text-align: center; }
.Area a { display: block;  margin: auto; }
.Area .go_bt {
  -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;
}
.Area .go_bt:hover {
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}
.Area1220 { margin: 0 auto; width: 1220px; }
.Area960 { margin: 0 auto; width: 960px; }
@media screen and (max-width: 767px) {
  .Area1220 { width: 100%; }
  .Area960 { width: 100%; }
}

/*活動倒數*/
.TimerNick { position: absolute; top: 670px; left: 170px; display: inline-block; z-index: 8; text-align: center; color: #3ad86b; }
.TimerNick .FontStyle { display: inline-block; margin: 0 0 0 10px; padding: 0; border: 0; font: bold 30px/30px Arial; letter-spacing: 0px; text-align: center; }
.TimerNick span { padding-left: 2px; font: 25px/30px "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.025em; }
@media screen and (max-width: 767px) {
  .TimerNick {width: 100%;top:164.7vw;left: -1vw;color: #3ad86b;}
  .TimerNick .FontStyle {margin: 0 0.5vw;padding: 0;border: 0;font: bold 5.5vw/0vw Arial;}
  .TimerNick span { padding-left: 0; font: bold 3.5vw/5vw "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica; /*letter-spacing: -0.05em;*/ }
}

/*回版頭*/
#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: 60px;
        bottom: calc(60px + constant(safe-area-inset-bottom)*0.6 );
        bottom: calc(60px + 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);}

/*分享浮層*/
.floatBox { position: relative; margin: 2% auto; padding: 2% 0; width: 700px; height: auto; background-color: rgba(0, 0, 0, 0.8); text-align: center;  border-radius: 20px; z-index: 5; }
.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%; }
}

/*PC黏人精-區塊錨點*/
.fixarea_tabbar { z-index: 99; position: fixed; right: 0; top: 200px; border-radius: 20px 0 0 20px; width: 110px; background-color: rgba(0, 0, 0, 0.65); 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 .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: #ffe0a1; }
.fixarea_tabbar .cate-hover a { color: #ffe0a1; }
.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: #fff; opacity: 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;background: url("") no-repeat center center; background-size: 100%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.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; color: #fff; }
.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; }
.fixarea_tabbar .fix_footer a:hover { color: #ffe0a1; }
/*錨點icon--用SVG格式*/
.fixarea_tabbar .fix_other li i {
  mask: url("data:image/svg+xml,%3Csvg%20id%3D%22navlight_icon%22%20data-name%3D%22navlight%20icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10%2C0A7.17%2C7.17%2C0%2C0%2C0%2C2.8%2C7.2C2.8%2C12.9%2C10%2C20%2C10%2C20s7.2-7.1%2C7.2-12.8A7.17%2C7.17%2C0%2C0%2C0%2C10%2C0Zm0%2C11a3.8%2C3.8%2C0%2C1%2C1%2C3.8-3.8A3.8%2C3.8%2C0%2C0%2C1%2C10%2C11Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20id%3D%22navlight_icon%22%20data-name%3D%22navlight%20icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10%2C0A7.17%2C7.17%2C0%2C0%2C0%2C2.8%2C7.2C2.8%2C12.9%2C10%2C20%2C10%2C20s7.2-7.1%2C7.2-12.8A7.17%2C7.17%2C0%2C0%2C0%2C10%2C0Zm0%2C11a3.8%2C3.8%2C0%2C1%2C1%2C3.8-3.8A3.8%2C3.8%2C0%2C0%2C1%2C10%2C11Z%22%2F%3E%3C%2Fsvg%3E");
  background-color: #ffe0a1;
}
.fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffe0a1 transparent; }