@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);}




/*訂閱說明 展開選單*/
.QAbox .moreButton { width: 100%;}
.QAbox .moreButton dl {}
.QAbox .moreButton dt { cursor: pointer;}
.QAbox .moreButton dd { display: none; margin: 0; padding: 3% 4.5%; background-color :#fff; border: 2px solid #c6c6c6; text-align: justify;}
.QAbox .moreButton .title { font: 21px/2em '微軟正黑體'; letter-spacing: 0; text-align: justify; display: inline-block; color: #000; margin-bottom: 20px;}
.QAbox .moreButton .menu_btn { position: relative; display: block; height: 65px; width: 100%; font:bold 25px/65px 微軟正黑體; color: #fff8f6; text-align: left; box-sizing: border-box; padding-left: 2% }
.QAbox .moreButton .up::after { content: ""; position: absolute; top: 45%; right: 2%; width: 0; height: 0; border-style: solid; border-width: 0.6em 0.4em 0 0.4em; border-color: #ffffff transparent transparent transparent; transform: rotate(180deg);}
.QAbox .moreButton .down::after { content: ""; position: absolute; top:45%; right:2%; width: 0; height: 0; border-style: solid; border-width: 0.6em 0.4em 0 0.4em; border-color: #ffffff transparent transparent transparent;}
.QAbox .moreButton .up img   { width: 100%; height: auto;}
.QAbox .moreButton .down img { width: 100%; height: auto;}
.QAbox .moreButtontag { display: none !important;}
  @media screen and (max-width:767px){
    .QAbox .moreButton { width: 100%; margin: 2.5vw auto;}
    .QAbox .moreButton .title { font: 15px/1.7em '微軟正黑體'; letter-spacing: 0; text-align: justify; margin-bottom: 3.5vw; display: inline-block;}
    .QAbox .moreButton dl {}
    .QAbox .moreButton dt { cursor: pointer;}
    .QAbox .moreButton dd { font: 16px/1.8em '微軟正黑體', 'Century Gothic'; border: .5vw solid #d8dee0; padding:6% 6.5% 3% 4%;}
    .QAbox .moreButton .menu_btn { position: relative; display: block; height: 2.5em; font: bold 17px/2.5em 微軟正黑體; color: #fff; text-align: left; padding: 0 4%;}
    /* .moreButton .up::after {content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;transform:rotate(180deg);} */
    /* .moreButton .down::after {content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;} */
	  .QAbox .moreButton .up img   { width: 100%; height: auto;}
    .QAbox .moreButton .down img { width: 100%; height: auto;}
    .QAbox .moreButtontag { display: none!important;}
	}


  

/*文案區*/
.detailArea { }


.textArea {margin:0;padding:0;font-size:20px;line-height:1.7;font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei",Helvetica;text-align:left;}
.textArea a { text-decoration:none;}
.textArea hr { opacity: 0.5; border-color: #595151;}
.textArea .red {color:red;}
.textArea .textAreabox_ {position:relative;}
.textArea .textAreabox_ h3 {margin:10px 0;padding:0;font-size:50px;line-height:1.4;color: #505059;letter-spacing: -0.5px;text-align: left;}
.textArea .textAreabox_ h3 i { position: relative; top: -20px; display: inline-block; margin-right: 10px; }
.textArea .textAreabox_ h4 {margin:10px 0;padding:0;font-size:40px;line-height:1.4;color: #505059;letter-spacing: -0.5px;}
.textArea .textAreabox_ h5 { margin:0; padding: 0.5rem 0; font-size:30px; line-height:1.4; color: inherit; letter-spacing: -0.5px;}
.textArea .textAreabox_ img { height:auto;}
.textArea .textAreabox_ > ul,
.textArea .textAreabox_ > ol { margin:0; margin-top:0; padding:0 3%; }
.textArea .textAreabox_ li { padding:0 0 0.5rem; /*text-indent:-1rem;*/ font-size: 24px; font-weight: 500; }
.textArea .textAreabox_ li ul { padding: 0 0 0 10%; }
.textArea .textAreabox_ li ul li { list-style: disc;}
.textArea .textAreabox_ li img { display:block; margin:0 auto;}
.textArea .textAreabox_ li img.share_PD {position: relative;left: -2%;width: 100%;}
.textArea .textAreabox_ table { margin:0; border-collapse:collapse; overflow: hidden; /*border-radius: 10px;*/ width: 100%; text-align:left; font-weight:300; color:#000; background-color:#ffffff;}
.textArea .textAreabox_ tr:nth-child(1) {color: #fff;font-weight: 800;background-color:#000000;}


.textArea .textAreabox_ td {padding:5px;border: 1px solid #000;}





.textArea .textAreabox_ span { color: #e70a11;}
.textArea .textAreabox_ b { font-weight:bold; color:#e70a11;}
.Area1 b { font-weight:bold; color:#e70a11;}


	@media screen and (max-width:767px){
		.detailArea { width:100%;}
		.textArea { margin: 0 4%; font-size:16px; line-height:1.5em; }
		.textArea .textAreabox_ {width: 115%; margin:0 auto;right: 8.8%;}
        .textArea .textAreabox_ span { color: #899f27;/*font-style:italic;*/ font-size: 7.5vw;}
		.textArea .textAreabox_ h3 { margin:0; font-size:6vw; text-align: left;}
    	.textArea .textAreabox_ h3 i { top: -5px; margin-right: 5px; width: 40px; }
		.textArea .textAreabox_ h4 {font-size: 1.25em; margin-bottom: 0.75em;}
		.textArea .textAreabox_ h5 { padding: 0.4rem 0; font-size:18px;}
		.textArea .textAreabox_ table { margin:0 0 8px 0; font-size:14px;}
		.textArea .textAreabox_ > ul,
		.textArea .textAreabox_ > ol { padding:0 1em;line-height: 1.5em;}
		.textArea .textAreabox_ li img.share_PD {position: relative;left:-5%;}
		.textArea .textAreabox_ li { font-size: 15px;}

		.textArea .textAreabox_3 {padding: 0;}

    .textArea .textAreabox_  td:nth-of-type(1){width: 10%;}
    .textArea .textAreabox_  td:nth-of-type(2){width:10%;}
    .textArea .textAreabox_  td:nth-of-type(3){width: 10%;}
    .textArea .textAreabox_  td:nth-of-type(4){ width:10%;}
	.textArea .textAreabox_  td:nth-of-type(5){ width:10%;}
	.textArea .textAreabox_  td:nth-of-type(6){ width:10%;}
	.textArea .textAreabox_  td:nth-of-type(7){ width:10%;}

	.textArea .textAreabox_2  td:nth-of-type(1){width: 22%;}
	.textArea .textAreabox_2  td:nth-of-type(2){width: 40%;}
	.textArea .textAreabox_2  td:nth-of-type(3){width: 20%;}
	.textArea .textAreabox_2  td:nth-of-type(4){width: 18%;}

    .textArea .textAreabox_3  td:nth-of-type(1){width: 28%;}
	.textArea .textAreabox_3  td:nth-of-type(2){width: 42%;}
	.textArea .textAreabox_3  td:nth-of-type(3){width: 30%;}

	}










/*輪播樣式調整--按鈕/小圓點/進度條*/
.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);
}
@media screen and (max-width: 767px) {
  .Area_swiper_box {
    padding-bottom: 5vw;
  }
}



/*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: 10px;
  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);
}


/*浮層嘿嘿*/
.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;    padding-right: 10px;}
.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:#ffd01f;}
.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;}
    /*樣式--圖片放大*/
    .agree_piczoom { }
    .agree_piczoom .Boxclose { cursor: pointer;}
    .agree_piczoom .agreeArea { pointer-events: none; }
    .agree_piczoom .box { position: relative; top: -8vh; overflow: visible; box-shadow: none; background: none;}
    .agree_piczoom .box img { width: 100%; height: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
        /*關閉btn*/
        .agree_piczoom .box .but-close { position: fixed; top:10px; right:10px; width: auto;}
        .agree_piczoom .box .but-close a { display: block;}
        .agree_piczoom .box .but-close a i { display: inline-block; position:relative; top:3px; left:0; width:44px; height:44px;}
        .agree_piczoom .box .but-close a i { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; }
        .agree_piczoom .box .but-close a i::before,
        .agree_piczoom .box .but-close a i::after { content: ""; position:absolute; top:50%; left:0;  width:100%; height:6%; background-color:rgba(255,255,255,1);}
        .agree_piczoom .box .but-close a i::before { transform: rotate(45deg);}
        .agree_piczoom .box .but-close a i::after  { transform: rotate(135deg);}

/*分享浮層*/
.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=1737361938075) 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=1737361938075) 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;}
        }