/* CSS Document */

/*基本*/
body { margin: 0; padding: 0; background-color: #6d88e1;}
	@media screen and (max-width:767px){
		body { font-size: inherit !important;}
	}

/*回版頭(黑色圓型版)
#gotop { display:none; border-radius:20px; position:fixed; padding:10px 10px 3px 10px; right:30px; bottom:30px; font:12px/30px  Verdana;background:#000 url(gotopBtnBk.png?t=1754883484353) no-repeat center 7px; color:#fff; cursor:pointer; z-index:5}
#gotop { filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6}*/

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





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

	@media screen and (min-width:768px){
		.WRAPPER { max-width: 2000px;}
	}
	@media screen and (max-width:767px){
		.WRAPPER {  padding-bottom:0; min-width: inherit;}
		.WRAPPER img {  width:100%;  height:auto;}

	}


/*區塊_all*/
.Area { z-index:1; position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:block;} 
.Area .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;}
.Area .go_bt:hover { filter: brightness(100%);
  -webkit-transform:translateY(-6px);
     -moz-transform:translateY(-6px);
      -ms-transform:translateY(-6px);
       -o-transform:translateY(-6px);
          transform:translateY(-6px);}
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Areabottom { margin-bottom: 60px;}
	@media screen and (max-width:767px){
		.Area .go_bt:hover { 
		  -webkit-transform:none;
			 -moz-transform:none;
			  -ms-transform:none;
			   -o-transform:none;
				  transform:none;}
		.Area1220 { width:100%;}
		.Area960 { margin:0 auto; width:100%;}
    .m96 { width: 96%; margin: 0 auto; }
    .Areabottom { margin-bottom: 6vw;} 
	}





/*PC隱鑶*/
@media screen and (min-width:1300px){
	.for_newphone { display:none!important;}	
}

/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
    .Area_msg_apple { display: block !important; }
	}






/*背景*/
.bgBox { z-index: 1; position: absolute; top: 0px; left: 0px; width: 100%; min-width: 1220px; pointer-events: none;}
.bgtop { z-index: 0; top: 0px; height: 1010px; background: url("bg_01.png?t=1754883484353") center top no-repeat;}

@media screen and (max-width:767px){
    .m_bg_01 { z-index: 0; position: absolute; top: 0; width: 100%; height: 100%; background: url("m_bg_01.png?t=1754883484353") center top / 100% no-repeat; pointer-events: none;}
  }


/*momologo*/
.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_top { position: relative; margin-bottom: 0px; }
.Area_top .light { position: absolute; top: 0px; mix-blend-mode: screen; }
.Area_top .title { position: relative;}
.Area_top .subtitle { position: absolute; left: 227px; top: 319px; }
.Area_top .register { position: relative; top: 865px; left: 0px; }
.register ul { position: relative; margin: 0px 12%; }
.Area_top .register li { float: left; margin: 0px 2%; list-style: none; width: 270px; }
.Area_top .register li img { width: 100%; }
.Area_top .knowmore { z-index: 99; position: absolute; top: 21px; right: 24px;}
.Area_top .knowmore img { width: 100%; }
  @media screen and (min-width: 768px) {
    .decoStar1 { position: absolute; top: 0; left: -309px; }
    .decoStar2 { position: absolute; top: 0; left: -219px; }
    .decoStar3 { position: absolute; top: 0; left: 574px; }
    .decoStar4 { position: absolute; top: 0; left: 680px; }
  }
  @media screen and (max-width: 767px) {
    .Area_top {  }
    .Area_top .title { }
    .Area_top .subtitle { left: 8%; top: 37vw; width: 84%; }
    .Area_top .register { top: 159.5vw; left: -6vw; }
    .Area_top .register li { width: 51%; margin: 1% 0px; }
    .Area_top .register li:nth-child(3) { position: absolute; left: 40vw; width: 63%; }
    .Area_top .knowmore {  z-index: 99; width: 13%; top:6.5vw; right: 0px; }
  }


/* --------------------------------------
 * 下單轉輪盤-輪盤頁
 * -------------------------------------- */
/*幸運大輪盤*/
.Area_rotator {}

.Area_rotator .box_{ padding-top: 100px; }
.Area_rotator .PDgift{ margin: 54px auto 0; width: 725px; }
.Area_rotator .PDgift img{ width: 100%; }
.PD_content img {width: 80%}
.introduction{margin:5% auto 8%;}	
@media screen and (max-width: 767px) {
 /* 公版調整 */.Area_rotator .Area_boxstyle_title { margin: 3.5vw 0 0 0; }
.Area_rotator .box_{ padding-top: 8vw; }
.Area_rotator .PDgift{ margin-top: 5vw; width: 100%; }
.Area_rotator .my-3{ margin-bottom: 1vw; color: #fff; }
.hi_light { color: #ffc12d;}
.kid {position: absolute;bottom:-8vw;left:11vw;width:15%}	
.PD_content img {width:95%}	
.introduction{margin:15% auto 10%;}	
}
.Area_GameStyle {margin:1% auto 7%;z-index: 5; color: #ffffff;}
.Area_rotator .rotater_bg {position: absolute;top: 265px;left: 80px;}
.Area_rotator .box { position: relative; margin: 0 0 8%; padding: 0 0 2%;}
.Area_rotator .box1_title { margin: 0 auto;}
.Area_rotator .btn_list { position: relative;}
.Area_rotator .btn_list a.btn1 { position: relative; display: inline-block; margin: 0px 15px; }
.Area_rotator .btn_list a.btn2 { position: relative; display: inline-block; margin: 0px 15px; }
.Area_rotator a { transition: all 0.2s ease 0s; }
.Area_rotator a:hover { transform: translateY(5px); }
.Area_rotator .topbn { position: relative; display: block; margin: -30px auto -15px; padding: 0px;width: 988px; height: auto; overflow: hidden;}
.Area_rotator .topbn .roBottom { padding-top: 0px; z-index: 10; bottom: 0px;}
.Area_rotator .topbn .roBody { position: relative; z-index: 2; }
.Area_rotator .topbn .roCenter { position: absolute; z-index: 4; top: 31.88%; left: 34.5%; width: 288px;}
.Area_rotator .topbn .roResult { display: none; position: absolute; z-index: 5; top: 28px; left: 70px; }
.Area_rotator .roMain{width: 820px;margin: 30px auto 0;}
.Area_rotator .roMain img { width: 100%; }
.Area_rotator .decoBG { position: absolute; left: 0; top: 438px;}
  @media screen and (max-width: 767px) {
	.Area_rotator .rotater_bg {position: absolute;top: 22.5vw;left: 5.5vw;width: 88%;}  
    .Area_rotator {    padding:  0 !important;}
    .Area_rotator .box { position: relative; margin: 0 ; padding: 0 ;}
    .Area_rotator .box1_title { margin: 0px auto; }
    .Area_rotator .box1_title:nth-child(2) img { width: 90%; }
    .Area_rotator .box .txt { position: relative; top: 24vw; height: 16vw; }
    .Area_rotator .box .txt p { height: 16vw; left: 0px; font-size: 4.3vw; line-height: 6vw; letter-spacing: 0px;}
    .Area_rotator .btn_list { position: relative; }
    .Area_rotator .btn_list a.btn1 { width: 42%; height: auto; margin: 0px 1.5% 0px 1.2%;}
    .Area_rotator .btn_list a.btn2 { width: 42%; height: auto; margin: 0px 1.5% 0px 1.2%;}
    .Area_rotator a:hover { transform: none; }
    .Area_rotator .topbn { position: relative; display: block; margin: -2vw auto 0; padding: 0; width: 102%; margin-left: -1.2%;}
    .Area_rotator .topbn .roMain { position: relative; z-index: 1;  width: 87%;  margin: 4vw auto 0 auto;}
    .Area_rotator .topbn .roBody { }
    .Area_rotator .topbn .roCenter {  position: absolute; z-index: 4; top: 35%; left: 37.5%; width: 24%;}
    .Area_rotator .topbn .roResult { display: none; position: absolute; z-index: 5; top: 1vw; left: 7%; right: 0px; width: 86%;}
    .Area_rotator .img_rotate { width: 100%; }
    .Area_rotator .bg { position: absolute; top: 0px; left: 0px; width: 100%; }
  }


/*活動獎項*/
.Area_prize { margin-bottom: 67px;}
  @media screen and (max-width: 767px) {
    .Area_prize { margin-bottom: 8vw;}	
  }


/*活動品牌*/
.Area_introduction { position: relative; margin-bottom: 90px;}
.Area_introduction .btnShop { margin-top: 40px;}
  @media screen and (max-width: 767px) {
    .Area_introduction {margin: 0vw auto 10vw;padding: 0px;}
    .Area_introduction .box_bn { margin-top: -1.7vw;}
    .Area_introduction .btnShop { margin: 6vw auto 0; width: 48%;}
  }


/*活動說明*/
.agree_more1 { z-index: 3; color: #f1f1f1; background-color: #210708;}
.agree_more1 .box_list { text-align: justify; text-align: left;}
.agree_more1 .box_list h3 { font-size: 1.25em; margin-bottom: 0.75em; /*padding-left: 0.5em;*/}
.agree_more1 .box_list p { margin-bottom: 0.3em;}
.agree_more1 .box_list ol { margin: 0; padding: 0 1em 0.5em 2em; /*padding-left: 1em;*/}
.agree_more1 .box_list ul { margin: 0; padding: 0; list-style: none;}
.agree_more1 .box_list li { margin: 0; padding: 0; margin-bottom: 0.75em;}
.agree_more1 .box_list li img { margin: 0.2em 0; width: 70%; max-width: 480px; box-shadow: 0em 0.3em 1.5em rgba(0,0,0,0.1);}
    @media screen and (min-width:768px){
      .agree_more1 { padding-top: 50px; max-width: 2000px;}
      .agree_more1 .box_list { font-size: 1.5em; padding: 0 5% 80px;}
    }
    @media screen and (max-width:767px){
      .agree_more1 { padding: 7vw 0;}
      .agree_more1 .box_list { font-size: 1.05em; padding: 0 4% 7vw;}
    }
    /*li樣式(自定樣式) (1) (2) (3) */
    .agree_more1 .box_list .counter_increment_num { list-style:none;}
    .agree_more1 .box_list .counter_increment_num li { counter-increment: num; text-indent:-1.5rem;}
    .agree_more1 .box_list .counter_increment_num li:before { content: "(" counter(num) ") " ;}



/*固定QRcode*/
.fixQrcode { position:fixed; top:460px; right:10px; z-index:99;  }
@media screen and (max-width:767px){
	.fixQrcode{ display:none }
}


/*黏人精*/
.fixbar { position:fixed; top:160px; right:25px; z-index:99; width:120px; border-radius:140px; background-color:rgba(0,0,0,0.8); font:bold 20px/30px "微軟正黑體", "Microsoft JhengHei", Arial; text-align:center; }
.fixbar:before { content: "";display: block; background:url(fix_pic.png?t=1754883484353) no-repeat center top; background-size:90%; width:200px; height:150px; position: relative;top:-10px; right:45px; margin-bottom:0px;}
.fixbar li { padding:10px 0; position: relative;}
.fixbar li::after {content: "";display: block; width: 60%;height: 1px;background: #FFF;position: absolute;bottom:0px;left: 20%;}
.fixbar li:last-child::after {display: none}
.fixbar li:last-child {margin: 5px auto 10px;}
.fixbar li:last-child a::before {content: "";display: block; width: 0 ;height: 0;border-style: solid; border-width: 0 7px 12px 7px;border-color: transparent transparent #fff transparent;margin: 0 auto 5px;}
.fixbar li:last-child a:hover::before {margin: -2px auto 7px;border-color: transparent transparent #FF5F00 transparent; transition:all 0.3s linear;}

.fixbar li a{ color:#fff; text-decoration:none;}
.fixbar li a:hover{ color:#fffeb5; transition:all 0.3s linear;}
	@media screen and (max-width:767px){
	.fixbar{ position:fixed; top:0; right:inherit; z-index:99; width:100%; border:#CCC solid 1px; border-radius:0; background-color:rgba(255,255,255); color:#000; font:bold 14px/14px "微軟正黑體", "Microsoft JhengHei", Arial; text-align:center; box-sizing:border-box; height:60px; }
	.fixbar li {border-bottom:none; border-right:#CCC solid 1px; padding:2% 0; float:left; width:14%; height:50%;}
	.fixbar li:last-child{ border-bottom:none; border-right:none;}
	.fixbar li a{ color:#000; text-decoration:none;}
	.fixbar li a:hover{ color:#FF0; transition:all 0.5s linear;}
	.fixbar li a img{ width:auto; height:35px;}
    .btn_more { z-index:1; position: absolute; top:2.3%; right:-6.5%; width:31%;}
	}
	@media screen and (max-width:500px){
		.fixbar li {padding:3% 0;}
		}
		@media screen and (max-width:400px){
			.fixbar li {padding:4% 0;}
			}


/*轉轉轉*/
.rotate-play { -webkit-animation:rotate-play 10s linear infinite ;
				       animation:rotate-play 10s linear infinite ;}
	@keyframes rotate-play {
	  100% { 
			transform: rotate(360deg);
	  }
	}
/*轉轉轉*/
.rotate-play-quick { -webkit-animation:rotate-play 1s linear infinite ;
				       animation:rotate-play 1s linear infinite ;}
	@keyframes rotate-play {
	  100% { 
			transform: rotate(360deg);
	  }
	}
		

/*旋轉背景設*/
.rotate {-webkit-animation: 1s linear 0s normal none infinite rotate;
			     animation: 1s linear 0s normal none infinite rotate;}
@-webkit-keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotate{
from{-ms-transform:rotate(0deg)}
to{-ms-transform:rotate(360deg)}
}
@-o-keyframes rotate{
from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(360deg)}
}



/*浮層嘿嘿*/
.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; text-align: left;}
.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; 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; padding: revert;}
.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;}


/*浮層樣式--特殊版--關閉btn*/
.blackBox .special_ .box h3 span.close{ z-index: 2; top: 1.5em; right: 1em; width: 2em; height: 2em; border-radius:50%; border: none; background: #000; } 
.blackBox .special_ .box h3 span.close a {  position: relative; display: inline-block; color:#FFF;}
.blackBox .special_ .box h3 span.close a:before,
.blackBox .special_ .box h3 span.close a:after{ content: ''; z-index: 0; position: absolute; top:14px; width: 22px; height: 3px; background: #FFF; border-radius: 2px; cursor: pointer;}
.blackBox .special_ .box h3 span.close a:before{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform: rotate(45deg); right:5px;}
.blackBox .special_ .box h3 span.close a:after{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform: rotate(-45deg); right:5px;}

/*浮層樣式--特殊版--內容*/
.special_ .box { padding-bottom: 2%;}
.special_ .box h3 { display: flex;  text-align: left; color:#252322; background-color: transparent; background-repeat: no-repeat; background-position: left center; background-size: 100%; }
.special_ .box h3 .logo { display: flex; flex: auto 0 0;}
.special_ .box .txtArea { margin: 0 auto; padding: 3%; width: 96%; height: auto; border-radius: 10px; background-color: #fff; overflow: hidden; overflow-y: auto;}
.special_ .box .txtArea h4 { position: relative; height: auto; width: 106%; left: -3%;}
.special_ .box .txtArea ol { margin: 0; padding: 0 1em 0 2.5em; text-align: justify;}
.special_ .box .txtArea ol ol { padding: 0;; padding-left: 1em;}
.special_ .box .txtArea li { margin: 0 auto 0.5em; }
    @media screen and (min-width:768px){
      .special_ .box h3 { height:150px; line-height: 150px; font-size: 50px;}
      .special_ .box h3 .logo {margin: 20px 20px 20px 30px;}
      .special_ .box h3 img {padding: 0px 0;width: auto;height: 120px;}
      .special_ .box .txtArea h4 { margin: -15px 0 0 0;}
      .special_ .box .txtArea li { font-size:20px; line-height: 1.5;}
    }
    @media screen and (max-width:767px){
      .special_ .box h3 { height:5rem; line-height:5rem; font-size: 7vw; }
      .special_ .box h3 .logo { margin: 1rem;}
      .special_ .box h3 img { padding:0; width: auto; height: 2.8rem;}
      .special_ .box .txtArea h4 { margin: -2% 0 0% 0; }
      .special_ .box .txtArea li { font-size:4vw; }
    }
    /*改列表樣式*/
    .special_ .box .txtArea ol { list-style: cjk-ideographic;}
    .special_ .box .txtArea ol li ol { list-style: decimal;}
    /*Uber*/
    .special_01 .box { background-color: #f5decf;}
    /*六扇門兌換浮層延遲背景圖隱藏*/
    .special_ img.lazy_off { background-image: none;}



/*兌獎浮層*/
.blackBox_IT .agreeArea.special_ { top: auto !important;}
.agreeArea .box_gift { display: flex; justify-content: center; align-items: center; margin: 3% auto; width: 100%; text-align: center; font-size: 0;}
.agreeArea .box_gift img { width: 100%; height: auto;}
.agreeArea .box_gift .btn_barcode { position: relative; margin: 0 auto; margin-right: 4%; width: 42%;}
.agreeArea .box_gift .btn_gift { position: relative; margin: 0 auto; width: 50%;}
.agreeArea .box_gift .btn_gift a { position: relative; display: block; margin: 0; padding: 1.2rem 0 1rem; border-radius: 50px; font-size: 35px; line-height: 1.6rem; color: #FFF; font-weight: 800; background-color: #b10c01; text-align: center;}
.agreeArea .box_gift .btn_gift a:hover { filter: brightness(110%);}
.agreeArea .box_gift .btn_gift a small { display: block; margin-top: 8px; font-size: 15px; line-height: 1; font-weight: 300;}
.agreeArea .box_gift .btn_gift a.off { background: #6E6E6E; }
.agreeArea .box_gift .btn_gift p { margin: 0; padding: 0; text-align: center; color: #999999; font-size: 15px; line-height: 2; font-weight: 300;}
    @media screen and (max-width:767px){
      .agreeArea .box_gift .btn_gift { width: 65%;}
      .agreeArea .box_gift .btn_gift a { padding: 10px 0 10px; border-radius: 50px; font-size: 24px; }
      .agreeArea .box_gift .btn_gift a small { bottom: 0; margin-top: 4px; font-size: 10px;}
      .agreeArea .box_gift .btn_gift p { font-size: 10px; }
    } 
    /*狀態設定*/
    .agreeArea .box_gift .btn_gift a.off { display: none;}
    .agreeArea .box_gift .btn_gift.cate_off a.on { display: none;}
    .agreeArea .box_gift .btn_gift.cate_off a.off { display: block;}

/*查詢紀錄浮層*/
.agreeArea .box .table3 th { background-color: #fff;text-align: center;}
.agreeArea .box .agree_table { overflow-x: hidden; overflow-y: auto; max-height: 70vh; }
.agreeArea .box .agree_table td { vertical-align: middle;}
.agreeArea .box .agree_table .btn_view { padding: 0.2em 1em; border-radius: 30px; color: #FFF; background: #ff2175; text-decoration: none;}


/*分享浮層*/
.FBLINEArea { width:700px; position:relative; display:block; margin: 0 auto; padding:20px 0px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;}
.refArea img { vertical-align:bottom; width:100%;}
.FBLINEArea .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;}
.FBLINEArea .closeBN a:hover { background-color:#666; text-decoration:none}
.FBLINEArea .title  { margin:0 50px 10px; border-bottom:1px solid #fff59c; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#fff59c; text-align:center}
.FBLINEArea .box { margin: 10px auto; padding: 20px 20px;}
.FBLINEArea .box a { display: block; margin: 20px auto 30px; /*width: 702px; height: 118px;*/ }
.FBLINEArea .box a img { width: 100%; height: auto;}
  @media screen and (max-width:767px){
    .FBLINEArea { width:90%;}
    .FBLINEArea .title  { margin:0 5%; font-size:30px;}
    .FBLINEArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
    .FBLINEArea .box { margin: 6% auto 0; padding: 0;}
    .FBLINEArea .box a { display: block; margin: 3% auto; width: 85%; height: auto;}
  }		


/*PC黏人精-區塊錨點*/
.fixarea_tabbar { z-index:99; position:fixed; right:0; top:60px; border-radius:20px 0 0 20px; width:110px; background-color:rgba(0,0,0,0.8); 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:#fcd1a5;}
.fixarea_tabbar .cate-hover a { color:#fcd1a5;}
.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--用SVG格式(改顏色搜尋【fill%3A%23】)*/
    .fixarea_tabbar .fix_other li i { background-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%23fcd1a5%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');}
    .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #fcd1a5 transparent;}





/*動畫*/
.baby_float{ animation-name: babyfloat; animation-iteration-count: infinite; animation-duration: 3s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-direction: alternate;}
  @keyframes  babyfloat{
      0%{ transform: translateY(0);}
      20%{ transform: translateY(-15px);}
      40%{ transform: translateY(0);}
      60%{ transform: translateY(0);}
      80%{ transform: translateY(-15px);}
      100%{ transform: translateY(0);}
  }


/*背景微亮*/		  
.minbright-play { -webkit-animation:minbright-play .5s linear infinite alternate; animation:minbright-play .8s linear infinite alternate ;}
	@-webkit-keyframes minbright-play {
       0% { filter:brightness(85%);}
      100% { filter:brightness(105%);}
	}
	@keyframes minbright-play {
       0% { filter:brightness(85%);}
      100% { filter:brightness(105%);}
	}