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

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





/*共用--輪播基本設定*/
.Area_swiper { position:relative; margin:0 auto; -webkit-box-sizing:border-box; box-sizing:border-box; overflow: hidden;}
.Area_swiper_box { z-index:1; padding-bottom:25px;}
.Area_swiper_box.Area_swiper_box_relative { position:relative;}
.Area_swiper_box.Area_swiper_box_absolute { position:absolute; top:0; left:0; right:0; bottom:0;}
.Area_swiper_box .swiper-wrapper { margin:0; padding:0; list-style:none; display: flex ; grid-gap: 0 }
.Area_swiper_box .swiper-wrapper:after { content:""; display:block; clear:both; }
.Area_swiper_box .swiper-slide { margin:0; padding:0;}
.Area_swiper_box .pagination { bottom:0px !important; transform:scale(0.7); }
.Area_swiper_box .pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { transform: translateX(-50%) scale(0.7); }
    @media screen and (max-width:767px){
     /* .Area_swiper { }*/
      .Area_swiper_box { padding-bottom: 5vw;}
    }
    /*按忸*/
    .button.swiper-button-next,
    .button.swiper-button-prev { outline: none;} 
    @media screen and (max-width:767px){
      .button.swiper-button-next,
      .button.swiper-button-prev { display:none !important;} 
    }
    /*輪播套公版時修正*/
    .Area_swiper_box .PD_layout { position: static;}



/*輪播樣式調整--按鈕/小圓點/進度條*/
.Area_boxstyle_pagination .swiper-pagination-bullet {
  border-radius: 20px;
  width: 6px;
  height: 6px;
  -webkit-transition: opacity .3s, background-color .3s, width .3s;
  transition: opacity .3s, background-color .3s, width .3s;
  -webkit-transition-delay: .3s, .3s, 0s;
          transition-delay: .3s, .3s, 0s;
}
.Area_boxstyle_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.Area_boxstyle_pagination .swiper-pagination-bullet {
  background-color: #000;
  opacity: 0.4;
}
.Area_boxstyle_pagination .swiper-pagination-bullet-active {
  background-color: #000;
  opacity: 1;
}
.Area_boxstyle_pagination-white .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.4;
}
.Area_boxstyle_pagination-white .swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}
.Area_swiper_box .pagination {
  bottom: 0px !important;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.Area_swiper_box .pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  -webkit-transform: translateX(-50%) scale(0.7);
          transform: translateX(-50%) scale(0.7);
}




/*20210319-Phone置底黏人精--活動紀錄*/
.fixedfooterArea {
  pointer-events: none;
  z-index: 201;
  position: fixed;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 75px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
  color: #000;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
  background-color: transparent;
  bottom: 30px;
  bottom: calc(30px + constant(safe-area-inset-bottom)*0.6);
  bottom: calc(30px + env(safe-area-inset-bottom)*0.6);
}

.fixedfooterArea a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fixedfooterArea img {
  width: 100%;
  height: auto;
}

.fixedfooterArea li {
  pointer-events: all;
}

.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: none;
  padding: 0;
  border-radius: 44px;
  height: 34px;
  -webkit-box-shadow: 0 1px 0 #f2f2f2, 0 0 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 0 #f2f2f2, 0 0 10px rgba(0, 0, 0, 0.2);
  color: #000;
  background-color: rgba(255, 255, 255, 0.95);
}

.fixedfooterArea .fixedBox_1 li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 24px 0 20px;
}

.fixedfooterArea .fixedBox_1 li span {
  position: relative;
  top: 4px;
  display: inline-block;
  width: 24px;
  height: 24px;
}

/*兩顆*/
.fixedfooterArea .fixedBox_2 li:first-child {
  margin-right: 5px;
}

/*我的點數-動畫*/
.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% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            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;
}

.fixedfooterArea .icon_1 {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);
}

/*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,.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:#ffffbe; }
.fixarea_tabbar .cate-hover a { color:#ffffbe; }
/*.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; -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; 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:#ffffbe; }    
/*錨點icon--用SVG格式*/
.fixarea_tabbar .fix_other li i { mask-image: 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: #ffffbe }
.fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffffbe transparent;}

/*浮層嘿嘿*/
.blackBox { clear: both; display:none; z-index:999; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); 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_play { z-index: 99; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(34,34,34,0.75);}

/*浮層基本*/
.blackBox .box .button { border-top: 1px solid #d6d6d6; text-align: center; font-size: 1.25rem; line-height: 3.5rem; font-weight: bold;}
.blackBox .box .button a{ text-decoration: none;}
.blackBox .box .but-close { clear: both; width: 100%;}
.blackBox .box .but-close a { display: block; color: #333;}
.blackBox .box h3 span.close { position: absolute; top: 6px; right: 5px; display: block; border: 2px solid #000; 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: #000; text-decoration: none;}

/*顏色控制*/
.spcolor{ color:#d62772;}
.agreeArea .box h3{background-color:#d62772;}

/*通知浮層*/
.agreeArea { z-index:1;  position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto 30px; width: 94%; max-width: 900px; font-family:"Century Gothic", "微軟正黑體", sans-serif;  }
.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 h3 { padding: 0; margin: 0; height: 3rem; font-size: 1.25rem; font-weight: 800; line-height: 3rem; text-align: center; color:#ffffff; }

/*內容*/
.agreeArea .txtArea { position: relative; height:600px; overflow:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; text-align: left; color: #333;}
.agreeArea .txtArea h2,.agreeArea .txtArea h4,.agreeArea .txtArea p { margin: 0; padding: 0;}

.agreeArea .txtArea .itemwrap-title-box { position: relative; margin: 0;}
.agreeArea .txtArea .itemwrap-title-box h2 { margin: 0; padding: 0.5em 1em 1em 1em; font-size: 1.45rem;}
.agreeArea .itembox { position: relative; display: flex; width: 100%; margin-bottom: 1em;}
.agreeArea .itembox .itembox_box { position: relative;  width:calc(65%); margin:0; padding:0 1em 0 0; font-size:1rem; text-align:left; line-height:1.65rem; color:#000;font-weight:500;}
.agreeArea .itembox .item-title { min-width:calc(100% - 35em); margin:0; padding:0; font-size:1.25rem; font-weight:800; line-height:1; text-align:left; color:#000; box-sizing: border-box; padding: 0 1em; white-space: nowrap;}
.agreeArea .itembox .item-information { font-size: 1rem; text-align: left; line-height: 1.65rem; color: #000; font-weight: 500; padding-right: 1rem;}

.agreeArea .container .PD_wrapper .PD_slide .itembox:first-child {margin-bottom: 0;}
.agreeArea .container .PD_wrapper .PD_slide .itembox:first-child .item-information  {margin: 0; padding: 0.5em 1em 1em 1em; font-size: 1.45rem; font-weight: bolder;}

.agreeArea .txtArea .PD_wrapper  {margin: 0; padding: 0; list-style: none;}
.agreeArea .txtArea .itemwrap-list-style .PD_wrapper  {margin: 0; padding-left: 1em; list-style-type: decimal;}
.agreeArea .txtArea .itemwrap-list-style .PD_wrapper .PD_slide { margin-bottom: 1em;}

/*手機*/
@media screen and ( max-width:736px) {
    .agreeArea .itembox .item-title {min-width:calc(100% - 11em); max-width: calc(100% - 11em);}
	.agreeArea .itembox.itemwrap {flex-wrap: wrap}
	.agreeArea .itembox.itemwrap .itembox_box {  width:100%; margin-bottom: 2em;}
	.agreeArea .itembox.itemwrap .itembox_box {padding:1em 2em 0 2em; }
	  
}

.agreeArea .itembox ul,
.agreeArea .itembox ol { margin: 0; padding-left: 1em;}
.agreeArea .itembox li {line-height: 1.65rem;}
.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 .qrcodeimg { text-align:center; }
.agreeArea .box .qrcodeimg a { color:#006afe;}
.agreeArea .box .qrcodeimg img { width:100%; height:auto;}

/* 登記警告文案 */
/*PC*/
@media screen and ( min-width:737px) {
    .Area_danji .warningTxt h3 {color:#fff;text-align: center;font-size: 1rem; line-height: 1.2em; font-weight: 400; padding: 0.8rem 0 0;}
}

/*手機*/
@media screen and ( max-width:736px) {
	.Area_danji .warningTxt h3 {color:#fff;text-align: center;font-size: 0.8rem; line-height: 1em; font-weight: 400; padding: 0.325rem 0 0;}
}

/* 門檻說明線上入稿 */
.agreeArea .itemwrap-gift-info .itembox_box .PD_wrapper { display: grid; gap: 1rem; }
.agreeArea .itemwrap-gift-info .PD_slide .row { display: flex; font-size: 1rem; line-height: 1.5; font-weight: bold;}
.agreeArea .itemwrap-gift-info .PD_slide p { padding: 6px 18px; vertical-align: middle; line-height: 1.75;}
.agreeArea .itemwrap-gift-info .PD_slide .row-title p { flex-basis: 100%; text-align: center; background: #000000; color: #ffffff;}
.agreeArea .itemwrap-gift-info .PD_slide .row-info p { border: 1px solid #cccccc;}
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(1) { flex-shrink: 0;}
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(2) { flex-grow: 1;}
.agreeArea .itemwrap-gift-info .PD_slide .row-info:nth-of-type(even) { background: #eeeeee;}


@media screen and ( max-width:736px) {
    .agreeArea .itemwrap-gift-info .PD_slide .row { display: flex; font-size: 0.9rem; line-height: 1.5; justify-content: flex-start; align-items: stretch; font-weight: bold;}

}
/*分享浮層*/
.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.4em "微軟正黑體","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:1.4em;}
      .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=1747808530399) 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=1747808530399) 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;}
        }






    /* --------------------------------------
     * Page 頁籤_202405291900
     * -------------------------------------- */
    .NavArea_tabbar_page { margin: 0 auto 10px  ; width: 94%; }  
    .NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-30.5%, 0, 0);}  
    .NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;}
    .NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(55.5%, 0, 0)!important}
    .NavArea_tabbar_page[data-num="3"] .Nav-wrapper { transform: translate3d(43.0%, 0, 0)!important}
    .NavArea_tabbar_page[data-num="4"] .Nav-wrapper { transform: translate3d(30.5%, 0, 0)!important}
    .NavArea_tabbar_page[data-light="box"] .Nav ul { padding: 0 }
    .NavArea_tabbar_page .Nav li { overflow: visible; }
     /*頁籤高亮顏色設定 */  
    .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;}
    .NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #000000 !important; background-color: #000000 !important;}
     /*推編輯按鈕 */  
    .NavArea_tabbar_page .Nav input { position: fixed; left: 30%}
      @media screen and (min-width:768px){ 
        .NavArea_tabbar_page { display: block; }
      }



	
/*黏人快速鍵(白色款)*/
.fixed_Area {z-index:999; position:fixed; top:20px; 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_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;}