@charset "utf-8";
/* CSS Document */
/* --------------------------------------
 * Layout.css
 * -------------------------------------- */

body { background-color: #eb3737;}

/*全BOX版面*/
.WRAPPER { z-index: 0; position: relative; display: block; margin: 0 auto; padding: 0; overflow: hidden; width: 100%; min-width: 1220px; text-align: left; font-family: "微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border: 0; vertical-align:top;}
.WRAPPER a { text-decoration: none; -webkit-tap-highlight-color: transparent;}
/*預設清單樣式*/
.Area .list_00 ul {display: inline-block;}
.Area .list_00 li {list-style: none; float: left; overflow: hidden;}
@media screen and (max-width:767px){
	.WRAPPER { min-width: inherit; min-height: 100vh; overflow: hidden; background-size: 100%; margin-bottom: 0;}
	.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;}
.Area640 { margin: 0 auto; width: 640px;}
@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%;}
	.Area640 { margin: 0 auto; width: 100%;}
}


/*背景*/
@media screen and (min-width: 768px){
  .bg_01 { z-index: -2; position: absolute; top: 1000px; left: 0; width: 100%; height: 100%; background-repeat: repeat-y; background-position: center top; pointer-events: none;}
  .bg_02 { z-index: -2; position: absolute; top: 1000px; left: 0; width: 100%; height: 100%; background-repeat: repeat-y; background-position: center top; pointer-events: none;}
    }
@media screen and (max-width:767px){
  .mb_top { z-index: 1; position: absolute; width:100%; top: 0; left: 0;}
}
     

/*AD廣告區*/
.Area_BN { margin-bottom: 80px;}
.Area_BN .Area_swiper_box {height: 250px;} 
@media screen and (max-width:767px){
  .Area_BN { margin-bottom: 12vw;}
  .Area_BN .Area_swiper_box { padding-bottom: 5vw; height: 26vw;}
}


/*標題字*/
.Area_boxstyle_title { position: relative; margin: 0 auto 35px; padding: 0; z-index: 2; font: bolder 49px "Century Gothic","微軟正黑體",system-ui,Helvetica,Arial; text-align: center; color: #fffaf5; overflow: hidden; width: 82%; height: 100px; line-height: 100px;}
.Area_boxstyle_title::before { content:""; position: absolute; z-index: -10; display: block; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: url("Area_boxstyle_top1.png?t=1751018600277") center top / 100% no-repeat scroll;}	
@media screen and (max-width:767px){
  .Area_boxstyle_title { margin: 0 auto 2vw; font: bolder 5.6vw "Century Gothic","微軟正黑體",system-ui,Helvetica,Arial; width: 100%; line-height: 10vw; height: 10vw;}   
}


/*活動紀錄*/
.fixedfooterArea { z-index: 20; position: absolute; left: 0; margin: 0; padding: 0; width: 100%; height: 82px; text-align: center; font-size: 14px; line-height: 34px; color: #000; font-family: "微軟正黑體","Microsoft JhengHei",Arial; background-color: rgba(0,0,0,0); bottom: calc(130px + env(safe-area-inset-bottom)*.6); top: 1155px;}
.fixedfooterArea a { display: block; color: #454545; text-decoration: none;}
.fixedfooterArea img  {width: 100%; height: auto;}
.fixedfooterArea .footerArea { display: none !important;}
.fixedfooterArea .fixedBox_1 { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; text-align: center; animation: fixedBox_1-play 1s 1;}
.fixedfooterArea .fixedBox_1 ul { position: relative; margin: 0; padding: 0; width: 100%; list-style: none outside none; white-space: nowrap;}
.fixedfooterArea .fixedBox_1 ul li { z-index: 1; position: relative; display: inline-block; padding: 0; border-radius: 44px; height: 60px; box-shadow: 0 1px 0 #f2f2f2,0 0 10px rgba(0,0,0,.2); background-color: rgba(255,255,255,.95);}
.fixedfooterArea .fixedBox_1 ul li a { display: flex; align-items: center; padding: 10px 24px; font-size: 1.75rem; font-weight: bold;}
.fixedfooterArea .fixedBox_1 ul li a span { width: 40px; height: 40px; 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);top: -1px;}
	@media screen and (max-width:767px){
		.fixedfooterArea {z-index: 20;position: absolute;left: 0;margin: 0;padding: 0;width: 100%;height: 82px;text-align: center;font-size: 14px;line-height: 34px;color: #000;font-family: "微軟正黑體","Microsoft JhengHei",Arial;background-color: rgba(0,0,0,0);bottom: calc(130px + env(safe-area-inset-bottom)*.6);top: 89vw;}
		.fixedfooterArea a {display: block;color: #454545;text-decoration: none}
		.fixedfooterArea img {width: 100%;height: auto}
		.fixedfooterArea .footerArea {display: none !important}
		.fixedfooterArea .fixedBox_1 {z-index: 1;position: absolute;top: 0px;left: 0;width: 100%;text-align: center;animation: fixedBox_1-play 1s 1}
		.fixedfooterArea .fixedBox_1 ul {position: relative;margin: 0;padding: 0;width: 100%;list-style: none outside none;white-space: nowrap}
		.fixedfooterArea .fixedBox_1 ul li {z-index: 1;position: relative;display: inline-block;padding: 0;border-radius: 44px;height: 34px;box-shadow: 0 1px 0 #f2f2f2,0 0 10px rgba(0,0,0,.2);background-color: rgba(255,255,255,.95)}
		.fixedfooterArea .fixedBox_1 ul li a {display: flex;align-items: center;padding: 0 24px 0 20px;font-size: 1rem;font-weight: 800;}
		.fixedfooterArea .fixedBox_1 ul li a span {width: 24px;height: 24px;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);top: 0px;}
	}	


/*LOGO*/
.momologo { z-index: 99; position: absolute; top: 15px; left: -10px;}
.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 { height: auto; width: 960px; margin-bottom: 0; z-index: 10;}
.Area_top .t1 { position: absolute; top: 0; left: 0; z-index: 0;}
.Area_top .deco1 { position: absolute; top: 0; left: 10px; z-index: 0;}
.Area_top .deco2 { position: absolute; top: 620px; left: -78px; z-index: -1;}
.Area_top .knowmore { z-index: 999; position: absolute; top: 0; right: 0;}
.Area_top h6 { box-sizing: border-box; color: #000; font-weight: 900; text-align: center; position: absolute;}
@media screen and (min-width: 768px){
  .Area_top h6 { font-size: 40px; line-height: 45px; top: 220px; width: 520px; left: 220px;}
  .lightM { position: absolute; margin: 0 auto; left: 0; top: 375px; width: 100%;}
  .lightL { position: absolute; left: 45px; top: 180px; transform-origin: bottom left; mix-blend-mode: screen;}
  .lightR { position: absolute; right: 45px; top: 180px; transform-origin: bottom right; mix-blend-mode: screen;}
}
@media screen and (max-width:767px){
.Area_top { height: 40vw; width: 100%;}
.Area_top .t1 { width: 100%;}
.Area_top .deco1 { position: absolute; top: -2vw; left: 0; width: 100%;}		
.Area_top .knowmore { width: 16%; top: 4vw; right: 0;}		
.Area_top h6 { font-size: 4.7vw; line-height: 4.7vw; top: 33vw; left: 0; margin: 0; width: 100%; z-index: 2;}
.lightM { position: absolute; margin: 0 auto; left: 0; bottom: -10vw; width: 100%;}
.lightL { position: absolute; left: 2vw; bottom: -5vw; width: 35%; transform-origin: bottom left; mix-blend-mode: screen;}
.lightR { position: absolute; right: 2vw; bottom: -5vw; width: 35%; transform-origin: bottom right; mix-blend-mode: screen;}
}


/*放大縮小*/
.zoominzoomout-play { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; animation-delay:-1s; -webkit-animation-name: zoominzoomout-play; animation-name: zoominzoomout-play; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate;}
	@-webkit-keyframes zoominzoomout-play {   
		0%    { -webkit-transform: scale(1); transform: scale(1);} 
		100%  { -webkit-transform: scale(0.95); transform: scale(0.95); }
		}
	@keyframes zoominzoomout-play { 
		0%    { -webkit-transform: scale(1); transform: scale(1); } 
		100%  { -webkit-transform: scale(0.95); transform: scale(0.95);}
	}

/*轉轉-light*/	
.rotate-play2 { -webkit-animation: rotate-play2 6s linear infinite; animation: rotate-play2 7.5s linear infinite;}
@keyframes rotate-play2 {
  0%   { transform: rotate(-8deg);}
  50%  { transform: rotate(8deg);}
  100% { transform: rotate(-8deg);}
}


/* --------------------------------------
 * 下單轉輪盤-輪盤頁
 * -------------------------------------- */
/*幸運大輪盤*/
.Area_rotator { height: auto; margin-bottom: 80px;}
.Area_rotator .box { position: relative; margin: 0 0 14%; padding: 26% 0 2%;}
.Area_rotator .topbn { position: relative; display: block; margin: 135px auto 0; padding: 0; width: 630px; height: auto; overflow: hidden;}
.Area_rotator .topbn .roBottom { padding-top: 0; z-index: 10; bottom: 0;}
.Area_rotator .topbn .roBody { position: relative; z-index: 2;}
.Area_rotator .topbn .roCenter { position: absolute; z-index: 4; top: 190px; left: 220px; width: 190px;}
.Area_rotator .topbn .roResult { display: none; position: absolute; z-index: 5; top: 28px; left: 70px;}
.Area_rotator .roMain { width: 630px;}
.Area_rotator .roMain img { width: 100%;}
/*獎項說明*/
.Area_GameStyle { margin-bottom: 50px!important; background: url(Area_GameStyle_end.png?t=1751018600278) bottom center / contain no-repeat; padding-bottom: 90px;}
.Area_GameStyle .box_all { background: url(Area_GameStyle_repeat.png?t=1751018600278) center top 30px / 100% repeat-y scroll;}	
@media screen and (min-width:768px){
  .Area_rotator .rotator_bg { position: absolute; pointer-events: none; z-index: -1; top: 380px;}
  .Area_rotator a { transition: all 0.2s ease 0s;}
  .Area_rotator a:hover { transform: translateY(5px);}
}
@media screen and (max-width: 767px) {
  .Area_rotator .rotator_bg { position: absolute; z-index: -5; top: 0; left: 0; width: 100%;}  
  .Area_rotator { width: 100%; margin: 0 auto; padding: 0; height: 98vw;}
  .Area_rotator .box { position: relative; margin: 0 ; padding: 0;}
  .Area_rotator .topbn { margin: 0 auto; width: 100%;}
  .Area_rotator .topbn .roMain  { position: relative; z-index: 1; width: 73.5%; margin: 8vw auto;}
  .Area_rotator .topbn .roCenter { top: 31%; left: 35%; width: 30%;}
  .Area_rotator .topbn .roResult { top: 1vw; left: 7%; right: 0; width: 86%;}
  .Area_rotator .img_rotate { width: 100%;}
  .Area_rotator .bg { position: absolute; top: 0px; left: 0px; width: 100%; }
  .Area_rotator .tips2 {position: relative;width: 100%;margin: 0;height: 24vw;top: 2vw;}  
  .Area_rotator .rotator_tips2deco {position: absolute;bottom: 1vw;right: 2vw;width: 25%;}
  .Area_rotator .tips {position: relative; padding-top: 2vw; }

	.Area_GameStyle { margin-bottom: 5vw!important;}	
	.Area_GameStyle .box_all { background: url(m_Area_GameStyle_repeat.png?t=1751018600278) center top / 100% repeat-y scroll;}	
  .Area_GameStyle { background: url(m_Area_GameStyle_end.png?t=1751018600278) bottom center / contain no-repeat; padding-bottom: 9vw;}
}

/*轉盤上的IT浮層*/
.Area_rotator h7 { z-index: 10; position: absolute; color: #fff; background-color: rgb(50 0 0 / 80%); border-radius: 0.6em; padding: 0.4em; width: 43%; left: 0;}
@media screen and (min-width:768px){
  .Area_rotator h7 {font-size: 30px; text-align: center; position: absolute; top: 835px; width: 27%; margin: 0 35%;}
  } 
@media screen and (max-width:767px){
  .Area_rotator h7 {font-size: 4vw; top: 53vw; margin: 0 27%;} 
} 

/*輪盤裝飾*/
@media screen and (min-width:768px){
  .deco2 { position: absolute; top: 945px; left: 75px; z-index: 0;}
  .deco3 { position: absolute; top: 900px; right: 100px; z-index: 0;}

}        
@media screen and (max-width:767px){
  .deco2 { position: absolute; top: 65.5vw; left: -1vw; z-index: 0; width: 26%;}
  .deco3 { position: absolute; top: 63vw; right: 1vw; z-index: 0; width: 19%;}	
}

/*轉轉轉*/
.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-quick 1s linear infinite; animation: rotate-play-quick 1s linear infinite;}
@keyframes rotate-play-quick {
  100% { transform: rotate(360deg);}
}


/*攻略說明區*/
.Area_tip .Area_tip_box a { position: relative;}
.Area_tip .Area_tip_box .swiper-wrapper .swiper-slide { margin: 0; padding: 10px 0;}
.Area_tip01 .Area_swiper .Area_swiper_box li { background: transparent;}
.Area_tip01 a { pointer-events: none;}
@media screen and (min-width:768px){
  .Area_tip { margin-bottom: 80px;}
  .Area_tip01 .Area_swiper .Area_swiper_box ul { height: 330px;}
  .Area_tip01 {height: 400px;}
  .Area_tip01-2 .Area_swiper .Area_swiper_box ul { height: 730px;}
  .Area_tip01-2 {height: 800px;}
}
@media screen and (max-width: 767px){
  .Area_tip { margin-bottom: 8vw;}
  .Area_tip01 { width: 90%;}
  .Area_tip01 .Area_swiper .Area_swiper_box ul { height: 32vw;}
  .Area_tip01-2 .Area_swiper .Area_swiper_box ul { height: 70vw;}

}

/*PC－tab頁籤及背景*/
@media screen and (min-width: 768px){
  .Area_tip .Area_tip_box .PD_tag { display: flex; width: 100%;}
  /*取消公用素材預設的tab hover*/
  .Area_tip .Area_tip_box .PD_tag .go_bt:hover { transform: unset;}
  .Area_tip .Area_tip_box .PD_tag img { width: 100%;}
  /*選中的頁籤切換*/
  .Area_tip .Area_tip_box .PD_tag a.cate-hover::after { content: ""; position: absolute; top: 2px; left: 50%; width: 100%; z-index: 100; transform: translateX(-50%); aspect-ratio: 610 / 100;}
  .Area_tip .Area_tip_box .PD_tag a:nth-child(1).cate-hover::after { background: url(Area_tip_pc_01_on.png?t=1751018600278) no-repeat top / 100%;}
  .Area_tip .Area_tip_box .PD_tag a:nth-child(2).cate-hover::after { background: url(Area_tip_pc_02_on.png?t=1751018600278) no-repeat top / 100%;}
  /*輪播的背景*/
  .Area_tip_swiper { overflow: hidden; background: url(Area_tip_top.png?t=1751018600278) top center / 100% no-repeat, url(Area_tip_bottom.png?t=1751018600278) bottom center / 100% no-repeat, url(Area_tip_center.png?t=1751018600278) center top 18px / 100% calc(100% - 70px) no-repeat;}
}
/*MB－tab頁籤及背景*/
@media screen and (max-width: 767px){
  .Area_tip .Area_tip_box .PD_tag { display: flex; width: 100%; margin: 5vw auto 0;}
  /*取消公用素材預設的tab hover*/
  .Area_tip .Area_tip_box .PD_tag .go_bt:hover { transform: unset;}
  .Area_tip .Area_tip_box .PD_tag img { width: 100%;}
  /*選中的頁籤切換*/
  .Area_tip .Area_tip_box .PD_tag a.cate-hover::after { content: ""; position: absolute; top: 1px; left: 50%; width: 100%; z-index: 100; transform: translateX(-50%); aspect-ratio: 480 / 80;}
  .Area_tip .Area_tip_box .PD_tag a:nth-child(1).cate-hover::after { background: url(Area_tip_01_on.png?t=1751018600278) no-repeat top / 100%;}
  .Area_tip .Area_tip_box .PD_tag a:nth-child(2).cate-hover::after { background: url(Area_tip_02_on.png?t=1751018600278) no-repeat top / 100%;}
  /*輪播的背景*/
  .Area_tip_swiper { overflow: hidden; background: url(Area_tip_top.png?t=1751018600278) top center / 100% no-repeat, url(Area_tip_bottom.png?t=1751018600278) bottom center / 100% no-repeat, url(Area_tip_center.png?t=1751018600278) center top / 100% calc(100% - 30px) no-repeat;}
}


/*公版*/
@media screen and (min-width: 768px){
  .Area_content { margin-bottom: 80px;}
  .Area02 .box_2 { position: relative; z-index: -1; height: 130px; background-color: #dc2828; margin: 0 0 -1%; border-radius: 1em 1em 0 0;}  	  
  .Area02 .box_2 h5 { position: absolute; margin: 0; box-sizing: border-box; color: #fffaf5; font-size: 31px; font-weight: 500; line-height: 40px; text-align: center; width: 95%; top: 23px;}   
}
@media screen and (max-width:767px){
  .Area_content { position: relative; z-index: 1; margin-bottom: 8vw;}
  .Area02 .box_2 { position: relative; z-index: -1; height: 15vw; background-color: #dc2828; margin: 0 2% -2%; border-radius: 1em 1em 0 0;}  	  
  .Area02 .box_2 h5 { position: absolute; margin: 0; box-sizing: border-box; color: #fffaf5; font-size: 3.3vw; font-weight: 500; line-height: 5vw; text-align: center; width: 95%; top: 2vw;}  
  .Area02 .PD_layout ul { width: 96%;}
}
.Area_GameStyle .box_list {text-align: justify;}


/*猜你喜歡*/
#bt_0_layout_b268_2025 .swiper-pagination-bullet { background: #fff;}

@media screen and (min-width: 768px) {
  .Area_PD_b268_2025 { margin-bottom: 90px;}
  .Area_PD_b268_2025 .Area_swiper_box { padding-bottom: 40px !important;}
}
@media screen and (max-width:767px){
  .Area_PD_b268_2025 { margin-bottom: 12vw;}
  .Area_PD_b268_2025 .Area_swiper_box { padding-left: 2vw;}
  #bt_0_layout_b268_2025 .swiper-scrollbar { background: rgb(255 255 255 / 30%);}
  #bt_0_layout_b268_2025 .swiper-scrollbar-drag { background: rgb(255 255 255 / 100%); width: 94%; left: 3%;}
}


/*浮層區-活動詳情*/
.agree_more .txtArea .img { margin: 0; box-sizing: border-box; padding: 1em; padding-bottom: 0;}

/*遊戲同意書*/
.ref .refArea h3 {
  margin: 0;
  padding: 0;
  height: 3rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 3rem;
  text-align: center;
  color: #fff;
  background-color: #ee7e4b;
  border-radius: 20px 20px 0 0;
}
.ref .refArea .box_txt h3 span.close a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #333;
}

.ref .refArea .Boxclose {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0);
}

.ref .closeButton a {
  display: block;
  cursor: pointer;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: solid 2px #999;
  font: bold 30px/1em "Century Gothic";
  color: #fff;
  text-align: center;
  background-color: rgba(0,0,0,.5);
  text-decoration: none;
  z-index: 2;
}

.ref .closeButton:hover {
  background-color: #666;
  text-decoration: none;
}

.ref .refArea .button2 {
  border-top: 1px solid #d6d6d6;
  text-align: center;
  font-size: 1.25rem;
  line-height: 3.5rem;
  font-weight: bold;
}

.ref .refArea .but-close {
  clear: both;
  width: 100%;
}

.ref .refArea .but-close a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: rgba(0,0,0,0.8);
}

@media screen and (max-width:767px){
  .ref .refArea h3 {
    margin: 0;
    padding: 0;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 3rem;

    text-align: center;
    color: #fff;
    background-color: #ee7e4b;
  }
}

.refArea { width: 700px;position:relative;display:block;background-color: rgb(255 255 255 / 80%);height: 600px;margin: 2% auto;padding: 0 0 135px 0;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}
    @media screen and (max-width:767px){
      .refArea {height: 30%;padding: 0;width: 90%;}
      .refArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
    }
.buttonA {width: 100%;margin: 15px auto 0;text-align: center;}
.buttonA a {display:inline-block;color:#fff;background: #919191;width:80px;border-radius:10px;padding:10px 10px;margin:0 5px;text-align:center}
.buttonA a.btn_yes{background: #ea3c27;}
.buttonA a:hover{ background:#ea3c27;}
.refArea .box_txt{margin-bottom: 10px;color: rgba(0,0,0,0.8);overflow: auto;overflow-y: auto;height: 600px;}
@media screen and (max-width:767px){

   .refArea .box_txt{padding: 0.5vw 5vw;font-size: 4.2vw;line-height: 6vw;margin-bottom: 0vw;height: 110vw;}
   .button{ margin-top: 5vw}
   .buttonA {width:100%;margin: 6vw 0;}
   .buttonA>div {width:80%; margin: 1vw auto 0;}
   .buttonA a {display:inline-block;color:#fff;background: #919191;width:20vw;border-radius:5px;padding:2vw 1vw;margin:0vw;text-align:center}
}




/*20250416 增加情境狀態浮層*/

/*浮層嘿嘿
.blackBox {display:none;z-index:99999;position:absolute;top:0px;left:0px;width: 100%;height:100%;background-color: rgba(255, 255, 255, 0);background-color: rgba(34,34,34,0.75);}
.blackBox * { font-family:"微軟正黑體", "Microsoft JhengHei", Arial; box-sizing:border-box;}
.blackBox  a { text-decoration:none;}*/
/*浮層基本*/
.blackBox .agreeArea2 .box .button {border-top: 1px solid #ffffff;text-align:center;font-size:1.25rem;line-height:3.5rem;font-weight:bold;}
.blackBox .agreeArea2 .box .but-close { clear:both; width:100%;}
.blackBox .agreeArea2 .box .but-close a {display:inline-block;width: auto;height: 100%;background-color: #3085d6;border: 0;border-radius: 3px;box-shadow: none;color: #fff;cursor: pointer;font-size: 18px;font-weight: 500;margin: 20px;padding: 10px 32px;line-height: 1.5;}
.blackBox .agreeArea2 .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 .agreeArea2 .box h3 span.close a { display:inline-block; width:100%; height:100%; color:#333;}
.blackBox .agreeArea2 .Boxclose { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;}
.blackBox .agreeArea2 .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;}*/

/*通知浮層*/
.agreeArea2 {top: 3%;text-align:justify;word-break:break-all;z-index: 1;position: relative;margin: 0 auto 30px;width: 96%;max-width: 400px;}
.agreeArea2 img{ width:100%; height:auto;}
.agreeArea2 .box { border-radius:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color:#fff; overflow:hidden;}
.agreeArea2 .box .txtArea2 {height: auto;overflow:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.agreeArea2 .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;}
.agreeArea2 .box p {color: #595959;font-size: 30px;text-align: center;font-weight: 600;text-transform: none;position: relative;margin: 0 0 .4em;padding: 0;display: block;word-wrap: break-word;}
.agreeArea2 .box p b { display:block; padding-bottom:0px;}
.agreeArea2 .box .qrcodeimg { text-align:center; }
.agreeArea2 .box .qrcodeimg a { color:#006afe;}
.agreeArea2 .box .qrcodeimg img { width:100%; height:auto;}
.agreeArea2 .box .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;}
.agreeArea2 .box .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; }
.agreeArea2 .box .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; }
.agreeArea2 .box .agree_table th a{ color:#c70026; text-decoration:underline;}
.agreeArea2 .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;}
.agreeArea2 .box ul,
.agreeArea2 .box ol {font-size: 18px;text-align: center;font-weight: 500;position: relative;float: none;margin: 0;padding: 0;line-height: normal;color: #545454;word-wrap: break-word;}
.agreeArea2 .box li { margin:0 20px 10px 0px; font-size:0.9em;}
.agreeArea2 .box table { margin: 0 5%; width:90%;  border-collapse:collapse;}
.agreeArea2 .box th { padding:5px; border:1px solid #CCC; background:#eee; font-size:0.8em; }
.agreeArea2 .box td { padding:5px; border:1px solid #CCC; font-size:0.8em; vertical-align:top; }
.agreeArea2 .box table ul,
.agreeArea2 .box table ol { padding:0 0 0 20px;}
.agreeArea2 .box table li { margin:0 0 10px 0px;}



/*20240418情境狀態浮層*/
.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success {
  border-color: #a5dc86
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 120px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  border-radius: 120px 0 0 120px;
  top: -7px;
  left: -33px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  border-radius: 0 120px 120px 0;
  top: -11px;
  left: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 60px;
  transform-origin: 0 60px
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success .swal2-success-ring {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(165,220,134,.2);
  border-radius: 50%;
  box-sizing: content-box;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 2
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success .swal2-success-fix {
  width: 7px;
  height: 90px;
  position: absolute;
  left: 28px;
  top: 8px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success [class^=swal2-success-line] {
  height: 5px;
  background-color: #a5dc86;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 2
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  width: 25px;
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  width: 47px;
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}




@-webkit-keyframes animate-success-tip {
  0% {
      width: 0;
      left: 1px;
      top: 19px
  }

  54% {
      width: 0;
      left: 1px;
      top: 19px
  }

  70% {
      width: 50px;
      left: -8px;
      top: 37px
  }

  84% {
      width: 17px;
      left: 21px;
      top: 48px
  }

  100% {
      width: 25px;
      left: 14px;
      top: 45px
  }
}

@keyframes animate-success-tip {
  0% {
      width: 0;
      left: 1px;
      top: 19px
  }

  54% {
      width: 0;
      left: 1px;
      top: 19px
  }

  70% {
      width: 50px;
      left: -8px;
      top: 37px
  }

  84% {
      width: 17px;
      left: 21px;
      top: 48px
  }

  100% {
      width: 25px;
      left: 14px;
      top: 45px
  }
}

@-webkit-keyframes animate-success-long {
  0% {
      width: 0;
      right: 46px;
      top: 54px
  }

  65% {
      width: 0;
      right: 46px;
      top: 54px
  }

  84% {
      width: 55px;
      right: 0;
      top: 35px
  }

  100% {
      width: 47px;
      right: 8px;
      top: 38px
  }
}

@keyframes animate-success-long {
  0% {
      width: 0;
      right: 46px;
      top: 54px
  }

  65% {
      width: 0;
      right: 46px;
      top: 54px
  }

  84% {
      width: 55px;
      right: 0;
      top: 35px
  }

  100% {
      width: 47px;
      right: 8px;
      top: 38px
  }
}

@-webkit-keyframes rotatePlaceholder {
  0% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg)
  }

  5% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg)
  }

  12% {
      -webkit-transform: rotate(-405deg);
      transform: rotate(-405deg)
  }

  100% {
      -webkit-transform: rotate(-405deg);
      transform: rotate(-405deg)
  }
}

@keyframes rotatePlaceholder {
  0% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg)
  }

  5% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg)
  }

  12% {
      -webkit-transform: rotate(-405deg);
      transform: rotate(-405deg)
  }

  100% {
      -webkit-transform: rotate(-405deg);
      transform: rotate(-405deg)
  }
}

.agreeArea2 .box .txtArea2 .swal2-animate-success-line-tip {
  -webkit-animation: animate-success-tip .75s;
  animation: animate-success-tip .75s
}

.agreeArea2 .box .txtArea2 .swal2-animate-success-line-long {
  -webkit-animation: animate-success-long .75s;
  animation: animate-success-long .75s
}

.agreeArea2 .box .txtArea2 .swal2-success.swal2-animate-success-icon .swal2-success-circular-line-right {
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in
}

@-webkit-keyframes animate-error-icon {
  0% {
      -webkit-transform: rotateX(100deg);
      transform: rotateX(100deg);
      opacity: 0
  }

  100% {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
      opacity: 1
  }
}

@keyframes animate-error-icon {
  0% {
      -webkit-transform: rotateX(100deg);
      transform: rotateX(100deg);
      opacity: 0
  }

  100% {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
      opacity: 1
  }
}



.agreeArea2 .box .txtArea2 .swal2-icon {
  width: 80px;
  height: 80px;
  border: 4px solid transparent;
  border-radius: 50%;
  margin: 40px auto 30px;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }


.agreeArea2 .box .txtArea2 .swal2-icon.swal2-warning {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #f8bb86;
  border-color: #facea8;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
}




.agreeArea2 .box .txtArea2 .swal2-icon.swal2-error {
  border-color: #f27474;
}


.agreeArea2 .box .txtArea2 .swal2-icon {
  width: 80px;
  height: 80px;
  border: 4px solid transparent;
  border-radius: 50%;
  margin: 20px auto 30px;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  display: block;
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 17px;}


  .agreeArea2 .box .txtArea2 .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    position: absolute;
    height: 5px;
    width: 47px;
    background-color: #f27474;
    display: block;
    top: 37px;
    border-radius: 2px;
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 16px;
}

.agreeArea2 .box .txtArea2 .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  position: absolute;
  height: 5px;
  width: 47px;
  background-color: #f27474;
  display: block;
  top: 37px;
  border-radius: 2px;
}


.agreeArea2 .box .txtArea2 .swal2-animate-x-mark {
  -webkit-animation: animate-x-mark .5s;
  animation: animate-x-mark .5s;
}


@-webkit-keyframes animate-error-icon {
  0% {
      -webkit-transform: rotateX(100deg);
      transform: rotateX(100deg);
      opacity: 0
  }

  100% {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
      opacity: 1
  }
}

@keyframes animate-error-icon {
  0% {
      -webkit-transform: rotateX(100deg);
      transform: rotateX(100deg);
      opacity: 0
  }

  100% {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
      opacity: 1
  }
}

.agreeArea2 .box .txtArea2 .swal2-animate-error-icon {
  -webkit-animation: animate-error-icon .5s;
  animation: animate-error-icon .5s;
}

@-webkit-keyframes animate-x-mark {
  0% {
      -webkit-transform: scale(.4);
      transform: scale(.4);
      margin-top: 26px;
      opacity: 0
  }

  50% {
      -webkit-transform: scale(.4);
      transform: scale(.4);
      margin-top: 26px;
      opacity: 0
  }

  80% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
      margin-top: -6px
  }

  100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      margin-top: 0;
      opacity: 1
  }
}

@keyframes animate-x-mark {
  0% {
      -webkit-transform: scale(.4);
      transform: scale(.4);
      margin-top: 26px;
      opacity: 0
  }

  50% {
      -webkit-transform: scale(.4);
      transform: scale(.4);
      margin-top: 26px;
      opacity: 0
  }

  80% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
      margin-top: -6px
  }

  100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      margin-top: 0;
      opacity: 1
  }
}

.agreeArea2 .box .txtArea2 .swal2-animate-x-mark {
  -webkit-animation: animate-x-mark .5s;
  animation: animate-x-mark .5s
}

@-webkit-keyframes rotate-loading {
  0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
  }

  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

@keyframes rotate-loading {
  0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
  }

  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

/*浮層樣式--特殊版--關閉btn*/
@media screen and (max-width: 767px) {
  .box_2 { padding: 2% 3% 0;}
}
.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;}
.agreeArea .box p {font-size: 1.5em;}
/*浮層樣式--特殊版--內容*/
.special_ .box { padding-bottom: 2%;}
.special_ .box h3 { display: flex;  text-align: left; color:#FFF; 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% 7% 3% 1%; width: 96%; border-radius: 10px; background-color: #fff;}
.special_ .box .txtArea h4 { position: relative; height: auto; width: 106%; left: -3%;}
.special_ .box .txtArea ol { margin: 0; padding: 0 1em 0 2em; 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: 30px 10px 30px 95px}
  .special_ .box h3 img { padding: 0px 0; width: auto; height: 90px;}
  .special_ .box .txtArea h4 { margin: -15px 0 0 0;}
  .special_ .box .txtArea li { font-size:20px; text-align: justify;}
}
@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: 0.9em; text-align: justify;}
}
/*潔客幫*/
.special_01 .box { background-color: #36bbd9;}
.special_ .box dt {font-size: 1.2em;line-height: 4em}
.special_ .box td {font-size: 1.1em;}
.special_ .box th {font-size: 1.1em}

/*注意事項*/
.edm_notice { text-align: center; padding: 25px 10px 40px 10px; color:#ffebe1; font: 12px/18px Helvetica;}
.edm_notice .apple_notice { padding: 10px 0 10px 0;}

/*共用*/
.for_pc { display:block !important;}
.for_phone  { display:none !important;}
@media screen and (max-width:736px){ 
	/*共用*/
	.for_pc { display: none !important;}
	.for_phone { display: block !important;}
}