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

/*基本*/
body{ margin:0; padding:0;}


/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%;  min-width:1220px; overflow:hidden; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; background-color:#fb113b;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none;}
		@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit; width:100vw;  }
		.WRAPPER img {  width:100%;  height:auto;}
	}
	
/*背景*/
.PC_BG { position: relative; margin: auto;}
.PC_BG .Area1220 { position: relative;}
.bg  {  position:absolute; transform: translateX(-50%);  }
.bg1{ width: 2000px; height:665px;  background: url("bgtop_1.png?t=1756464436598") no-repeat center top / 100% 100%; top:-5px; left:50%;}

@media screen and (max-width:767px){
	.MB_BG { position: relative; margin: auto;}
	.m_bg1 { z-index:0; position:absolute; top:0; left: 0; width: 100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;background-size: 100%;}
		  }




/*區塊_all*/
.Area { margin:0 auto; padding:0; border-radius:0; text-align:center; z-index: 0;}
.Area a { display:block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
.Area1220 { margin:0 auto; width:1220px; position: relative }
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		/*區塊_切割*/
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
		.Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; list-style: none;}
		.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn_nopadding a { float:left; margin:0; padding:0; width:100%; list-style: none;}
		.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%; list-style: none;}
		.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%; list-style: none;}
	}


/*momologo*/
.Area_space { height: 5px; z-index: 1;}
	@media screen and (max-width:767px){
		.Area_space { height:0; }
	}

/*版頭*/
.Area_top { overflow: hidden ; height: 480px;}
.Area_top .box {position: absolute;top:145px; left:230px;animation-delay: 1s}

	@media screen and (max-width:767px){
		.Area_top { height:57vw;}
		.Area_top .box {position: absolute;left:11vw;top:16vw;width:80%;}
	}


/*內文區*/
.box{ position: relative;top:0; margin: auto;}
.box img{ width: 100%;}
.box_gift { padding-top: 0%; }
.Area03 .page1 {margin-top:0; margin-bottom:-100px;}
.Area03 .page2 {margin-top:-100px; margin-bottom:0;}
.Area03 .btn1 { position:relative;top:500px; left:105px; width:100%; } 
.Area03 .btn2 { z-index: 1;position:relative;top: -160px; left:107px; width:100%; }
.Area03 .btn3 { position:relative;top: 500px; left:433px; width:32%; } 


.Area01_btn{position: absolute;right: 35px;top:149px;}
.Area02_btn{position: absolute;right: 35px;top: 115px;}
.Area03 .Area03_btn{ position: relative;right:-700px;top: -1803px;width:24%;}
.Area03 .Area03_btn_2{ position:relative;right: -580px;top:-1760px;width: 10%;}
.Area03 .warningTxt2{ position:relative;top:-40px; color: #000;}
.Area03 .txt_cpNum1{ position:relative;right: -10px;top: -520px;font-size: 1.5em;color: #000000;}
.Area03 .txt_cpNum2{ position:relative;right: -10px;top: -140px;font-size: 1.5em;color: #000000;}
/* .Area03 .txt_cpNum3{ position:relative;right: -5px;top: -161px;font-size: 1.5em;color: #FFF;} */
.Area03 .danji_02{position: absolute;top: 1917px; }

.Area04{ margin-top:0; }
.Area04_btn{ position: absolute;  right:100px;  top:116px;width: 30%;}
.Area01 { margin-top: 0px; }
.Area02, .Area05 { margin-top: 40px; }
.Area02 .box img { margin-bottom: 0; }

/* .box_gift{ display: flex; justify-content: center; width:100%;flex-wrap: wrap;margin-left:0; } */
.grabgift_btn{width: 172px; position: absolute; top:69%; right:22.5%;  }
.grabgift_txt{  position: absolute; top:83%; right:37%;  color: #fbeee2;}
.grabgift_btn2{width: 172px; position: absolute; top:27%; right:15%;  }
.grabgift_txt2{  position: absolute; top:36%; right:6%;  color: #fbeee2;}
    @media screen and ( max-width:767px ){
	    .box{ position: relative; margin: auto;}
	   .Area03 .page1 {margin:-12vw 1vw;}
	   .Area03 .page2 {margin-top:0; margin-bottom:15vw}
       .Area03 .btn1 {position:relative; top: 52vw; left: 45vw; width:35vw }
       .Area03 .btn2 {Z-INDEX: 1;position:relative; top: -14vw; left: 45vw; width:35vw } 
	   .Area03 .btn3 {position:relative; top: 54vw; left: 45vw; width:35vw } 
	   .Area03 .danji_02{position: absolute;left: 0vw;top: 197vw;}


       .Area01 { margin-top:0;} 
       .Area02, .Area05 { margin-top:2vw;margin-bottom:16vw;}
	   .Area03 { margin-top: 1vw;margin-bottom: -20vw;}
	   .Area03 .txt_cpNum1{ position:relative;right: -2vw;top: -52vw;font-size: 1em;}
	   .Area03 .txt_cpNum2{ position:relative;right: -2vw;top: -12vw;font-size: 1em;}
	   /* .Area03 .txt_cpNum3{ position:relative;right: -18px;top: -57px;font-size: 1em;} */
	   .Area03 .warningTxt2{ position:relative;right: 0vw;top: -8vw; color: #FFFFFF}
	   .Area02 .box img { margin-bottom: 0vw; }
	   .Area04 { margin-top: 3vw; }
       .Area01_btn{ right: 3.5vw; width: 32vw; top: 19.5vw;}
       .Area02_btn{ right: 3.5vw; width: 32vw; top: 12.5vw;}
	   .Area04_btn{ right: 33vw; width: 35vw; top: 22vw;}

       /* .box_gift{ padding-top: 0%; flex-wrap: wrap; column-gap: 2vw; width: 94vw;margin-left: 3vw; }      */
       .grabgift_btn{ width: 26vw; top: 36.5vw; right: 8.8vw; }    
       .grabgift_txt{ top: 45vw; right: 14.5vw; font-size: 0.6em; }
       .grabgift_btn2{ width: 26vw; top: 36.5vw; right: 8.8vw;  }
	   .grabgift_txt2{ top: 45vw; right: 14.5vw; font-size: 0.6em; }
	   .Area03 .Area03_btn{ top: -205vw; right:-64vw;width: 32%;}
	   .Area03 .Area03_btn_2{ position:relative;top: -198.5vw; right:-47vw;width:15%;}
       .Area05 .box img{  width: 97%;  } 
       
    }





/*主標動畫*/
@keyframes zoomInDown {
	from {
	  opacity: 0;
	  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
	  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}
  
	60% {
	  opacity: 1;
	  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
	  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}
  }
  
  .zoomInDown {
	animation-name: zoomInDown; animation-duration: .5s;
  }
  
  /*主標-上至下*/
  
  @keyframes fadeInDown {
	from {
	  opacity: 0;
	  transform: translate3d(0, -1000px, 0);
	}
  
	to {
	  opacity: 1;
	  transform: none;
	}
  }
  .fadeInDown {
		   -webkit-animation: fadeInDown 1s;
	  
  }
  
  /*副標-下至上*/
  
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translate3d(0, 50px, 0);
	}
  
	to {
	  opacity: 1;
	  transform: none;
	}
  }
  .fadeInUp {
		   -webkit-animation: fadeInUp 1s;
  }
  
  /*飄-上下*/
  .uptodown-play { -webkit-animation:uptodown-play 2s infinite alternate;
						   animation:uptodown-play 2s infinite alternate;}
	  @-webkit-keyframes uptodown-play { 
		  0% { 
			  -webkit-transform: translate(0,-5px);  
		  } 
		  100% { 
			  -webkit-transform: translate(0,0);
		  }
	  }
	  @keyframes uptodown-play { 
		  0% { 
			  transform: translate(0,-5px);  
		  } 
		  100% { 
			  transform: translate(0,0);
		  }
	  }
  
  /*飄-下上*/
  .downtoup-play { -webkit-animation:downtoup-play 2s infinite alternate;
						   animation:downtoup-play 2s infinite alternate;}
	  @-webkit-keyframes downtoup-play { 
		  0% { 
			  -webkit-transform: translate(0,0);  
		  } 
		  100% { 
			  -webkit-transform: translate(0,-5px);
		  }
	  }
	  @keyframes downtoup-play { 
		  0% { 
			  transform: translate(0,0);  
		  } 
		  100% { 
			  transform: translate(0,-5px);
		  }
	  }
  
  
  /*飄-上下*/
  .uptodown-play2 { -webkit-animation:uptodown-play 1.5s infinite alternate;
						   animation:uptodown-play 1.5s infinite alternate;}
	  @-webkit-keyframes uptodown-play { 
		  0% { 
			  -webkit-transform: translate(0,-10px);  
		  } 
		  100% { 
			  -webkit-transform: translate(0,0);
		  }
	  }
	  @keyframes uptodown-play { 
		  0% { 
			  transform: translate(0,-10px);  
		  } 
		  100% { 
			  transform: translate(0,0);
		  }
	  }
  
  /*飄-下上*/
  .downtoup-play2 { -webkit-animation:downtoup-play 1.5s infinite alternate;
						   animation:downtoup-play 1.5s infinite alternate;}
	  @-webkit-keyframes downtoup-play { 
		  0% { 
			  -webkit-transform: translate(0,0);  
		  } 
		  100% { 
			  -webkit-transform: translate(0,-10px);
		  }
	  }
	  @keyframes downtoup-play { 
		  0% { 
			  transform: translate(0,0);  
		  } 
		  100% { 
			  transform: translate(0,-10px);
		  }
	  }
  
  
  /*重磅登場*/
  .bangIn {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: bangIn;  animation-name: bangIn;   animation-timing-function:linear; }
  
	  @keyframes bangIn { 
		  0%   { -webkit-transform: scale(3); transform: scale(3); filter:brightness(120%);opacity:0;} 
		  40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(120%);} 
		  60%  { -webkit-transform: scale(1.05); transform: scale(1.05); filter:brightness(120%);} 
		  80%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);}
	  }
	  @-webkit-keyframes bangIn {   
		  0%   { -webkit-transform: scale(3); transform: scale(3); filter:brightness(120%);opacity:0;} 
		  40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(120%);} 
		  60%  { -webkit-transform: scale(1.05); transform: scale(1.05); filter:brightness(120%);} 
		  80%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);}
		  }
  
  
  /*由前到後的分別是：[動畫名稱momoco]，[撥放時間1秒]，[10張影格_取決於圖片內有幾個動作]，[撥放幾次_infinite=重複]，[alternate=會倒著撥回去]*/
  .model { width: 426px; height: 494px;
		  -webkit-animation: model 0.2s steps(2) infinite alternate;
						  animation: model 0.2s steps(2) infinite alternate;
  }
  @-webkit-keyframes model {
	   from { background-position:    0px; }
		   to { background-position: -852px; }
  }
  @keyframes model {
	   from { background-position:    0px; }
		   to { background-position: -852px; }
  }
  
/*訂單金額*/
.box_list2 { text-align: justify; background-color:#00000059; z-index: 10; margin-top: 0px;border-radius: 15px;}
.box_list2 h3 { margin-bottom: 0.75em; padding-left: 1.875rem; }
.box_list2 ol { margin: 0;  padding: 0 0.8em 0 2em;}
.box_list2 ul { margin: 0; padding: 0; list-style: none;}
.box_list2 li { margin: 0; padding: 0; margin-bottom: 0.75em;}
.box_list2 li img { width: 70%; max-width: 480px; }    
.box_list2 { font-size: 1.5rem; padding:1% 0 ; text-align: left; margin-bottom:70px;}

@media screen and (max-width: 767px) {
      .box_list2 h3 {padding-left: 1.5em;font-size: 0.9375rem; margin-top: 0vw; }
      .box_list2 ol {  padding: 0 2em 0 3em; font-size: 0.875rem;}
      .box_list2 { font-size: 0.875em;  margin-bottom: 2vw; padding: 7% 0 11% 0;width: 96%;}
    }

/*常見問題*/
.box_list { text-align: justify; background-color:#414040; z-index: 10; margin-top: 0px;}
.box_list h3 { margin-bottom: 0.75em; padding-left: 1.875rem; }
.box_list ol { margin: 0;  padding: 0 0.8em 0 2em;}
.box_list ul { margin: 0; padding: 0; list-style: none;}
.box_list li { margin: 0; padding: 0; margin-bottom: 0.75em; list-style:disc;}
.box_list li img { width: 70%; max-width: 480px; }    
.box_list { font-size: 1.5rem; padding:4% 0 ; text-align: left;}

@media screen and (max-width: 767px) {
      .box_list h3 {padding-left: 1.5em;font-size: 0.9375rem; margin-top: 0vw; }
      .box_list ol {  padding: 0 2em 0 3em; font-size: 0.875rem;}
      .box_list { font-size: 0.875em;  margin-top: 0%; padding: 7% 0 11% 0;}
    }

/*li樣式(自定樣式) (1) (2) (3) */
 .box_list .counter_increment_num { list-style:none;}
 .box_list .counter_increment_num li { counter-increment: num; text-indent:-1.5rem;}
 .box_list .counter_increment_num li:before { content: "(" counter(num) ") " ;}



/*浮層*/
/*.agree_more .block01 p, .agree_more .block01 ol{ display: inline-block; padding: 0;}*/
.agree_more .block01 li{ list-style: none; padding: 0;}

	

.box01{position: relative;}

/*活動提醒按鈕(登記版)*/
.btn_alert_danji{ position: absolute; top: 17%; left: 0; z-index: 99;}
.btn_alert_danji2{top:28%;}

/*文案底色這裡換 */
.game_remind{
  --remind-txtcolor: #fff;
  --remind-bg: #000000;
  background-color:var(--remind-bg);
  border-radius: 0 5em 5em 0;
  width: 60px;
  height: 42px;
}
.danji-pd-container .game_remind{
  --remind-txtcolor: #fff;
  --remind-bg: #000000;
}

/*鈴鐺icon--用SVG格式(改顏色搜尋【fill='rgb(252, 129, 36)'】)*/
.game_remind::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='295px' height='348px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M294.496,272.105 C294.132,274.973 292.956,281.433 289.179,280.959 L3.553,280.767 C-6.068,258.136 13.398,252.817 26.074,240.802 C38.266,229.244 45.048,213.504 45.368,197.353 C45.967,167.135 43.205,136.722 48.384,106.746 C50.908,92.140 55.319,77.409 63.932,65.166 C73.634,51.377 88.810,43.321 103.319,35.455 C106.757,33.590 110.229,31.782 113.768,30.114 C120.273,27.049 126.961,23.729 134.094,22.607 C136.917,20.594 131.951,1.633 145.469,0.261 C153.283,-0.532 158.630,2.684 159.588,10.698 C159.970,13.894 158.799,19.212 160.668,21.349 C175.635,27.276 190.432,33.859 204.115,42.388 C220.597,52.663 235.303,66.657 241.282,85.624 C250.847,115.972 250.296,150.413 249.867,181.989 C249.514,207.900 253.982,227.635 274.329,245.364 C278.812,249.271 286.626,252.978 290.213,257.809 C292.372,260.716 293.249,263.918 294.496,267.217 C294.364,268.806 294.692,270.552 294.496,272.105 ZM169.696,342.234 C136.983,357.435 98.562,337.069 94.256,301.434 L198.771,301.434 C198.125,318.698 185.022,335.113 169.696,342.234 Z'/%3E%3C/svg%3E");  content: "";
  position: absolute;
  top: 0.8em;
  left: 0.25em;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size:auto 100%;
  background-repeat: no-repeat;
}
.danji-pd-container .game_remind::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='295px' height='348px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M294.496,272.105 C294.132,274.973 292.956,281.433 289.179,280.959 L3.553,280.767 C-6.068,258.136 13.398,252.817 26.074,240.802 C38.266,229.244 45.048,213.504 45.368,197.353 C45.967,167.135 43.205,136.722 48.384,106.746 C50.908,92.140 55.319,77.409 63.932,65.166 C73.634,51.377 88.810,43.321 103.319,35.455 C106.757,33.590 110.229,31.782 113.768,30.114 C120.273,27.049 126.961,23.729 134.094,22.607 C136.917,20.594 131.951,1.633 145.469,0.261 C153.283,-0.532 158.630,2.684 159.588,10.698 C159.970,13.894 158.799,19.212 160.668,21.349 C175.635,27.276 190.432,33.859 204.115,42.388 C220.597,52.663 235.303,66.657 241.282,85.624 C250.847,115.972 250.296,150.413 249.867,181.989 C249.514,207.900 253.982,227.635 274.329,245.364 C278.812,249.271 286.626,252.978 290.213,257.809 C292.372,260.716 293.249,263.918 294.496,267.217 C294.364,268.806 294.692,270.552 294.496,272.105 ZM169.696,342.234 C136.983,357.435 98.562,337.069 94.256,301.434 L198.771,301.434 C198.125,318.698 185.022,335.113 169.696,342.234 Z'/%3E%3C/svg%3E");  content: "";
}

.game_remind span { 
  z-index:1; 
  position:relative; 
  display: block; 
  padding: 0.4em 0 0 .625em; 
  height: 2.4em; 
  line-height:1.1em; 
  overflow: hidden; 
  font-weight: 600; 
  font-size: 1.1em; 
  color:var(--remind-txtcolor); 
  vertical-align:middle;
}






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