/* 各頁面CSS */

.fixedfooterArea {height: 20px;}

/*切換PC置頂選單*/
.cantantBase1{ display: block; }
.cantantBase2{ display: none; }


/*頂部*/
.Area_header { background-color: #fff; border-bottom: 0px solid #dbdbdb;}
	@media screen and (max-width:767px){
		.Area_header { border-bottom: 0vw solid #dbdbdb}	
	}


/*momo幣這裡用*/
@media screen and (min-width: 768px) {
	.Area_grabmoney_coupon .PD_layout ul { padding: 0 25px; grid-gap: 15px;}
	.Area_grabmoney_coupon .PD_layout img {	border-radius: 10px;}
}
@media screen and (max-width: 767px) {
	.Area_grabmoney_coupon .PD_layout ul { grid-gap: 1.8vw;}
	.Area_grabmoney_coupon .PD_layout img { border-radius: .5em;}
}

/*內文區*/

.Area02 { margin: 30px auto ;}
.Area04 { margin: 60px 0;}
.Area05 { margin: 60px 0;}
.notice { margin: 0 auto 30px auto;}

.box{ position: relative;top:0; margin: -18px auto;}
.box img{ width: 100%;}
.box_gift { padding-top: 0%; }
.Area03{position: relative;}
.Area03 .page1 {position: relative;margin-top:0;margin-bottom: 0px;}
.Area03 .page2 {margin-top:-100px; margin-bottom:0;}
.Area03 .btn1 {position: absolute;top: 405px;left:277px;width:100%;} 
.Area03 .btn2 { z-index: 1;position:relative;top: 500px; left:280px; width:100%; }
.Area03 .btn3 { position:relative;top: 900px; left:427px; width:32%; } 


.Area01_btn{position: absolute;right: 35px;top:149px;}
.Area02_btn{position: absolute;right: 35px;top: 115px;}
.Area03 .Area03_btn{position: relative;right: -730px;top: -19px;width:24%;}
.Area03 .Area03_btn_2{position:relative;right: -626px;top: 25px;width: 10%;}
.Area03 .warningTxt2{ position:relative;top:-40px; color: #000;}
.Area03 .txt_cpNum1{ position:relative;right: -8px;top: -115px;font-size: 1.5em;color: #000000;}
.Area03 .txt_cpNum2{ position:relative;right: -325px;top: -180px;font-size: 1.5em;color: #000000;z-index: 2;}
.Area03 .txt_cpNum3{position:relative;right: -325px;top: -195px;font-size: 1.5em;color: #000000;z-index: 2;}
.Area03 .txt_cpNum3-2{ position:relative;right: -325px;top: -180px;font-size: 1.5em;color: #000000;z-index: 2;}
.Area03 .txt_cpNum4{ position:relative;right: -325px;top: -212px;font-size: 1.5em;color: #000000;z-index: 2;}

.Area04_btn { position: absolute!important; right: 100px; top: 105px; width: 30%;}
/* .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;}

	   .Area02 { margin: 0 auto;}
	   .Area04 { margin: 6vw 0;}
	   .Area05 { margin: 6vw 0;}
     .notice { margin: 0 auto 10vw auto;}

	   .Area03 .page1 {position: relative;margin: 0 auto;}
	   .Area03 .page2 {margin-top:0; margin-bottom:5vw}
     .Area03 .btn1 {position: absolute;top: 40vw;left: 62vw;width:35vw}
     .Area03 .btn2 {z-index:1; position:absolute; top: 117vw; left: 62vw; width:35vw } 

	   .Area03 .txt_cpNum1{ position:relative;right: -2vw;top: -13vw;font-size: 1em;}
	   .Area03 .txt_cpNum2{ position:relative;right: -2vw;top: -11vw;font-size: 1em;}
	   .Area03 .txt_cpNum3{position:relative;right: -2vw;top: -11vw;font-size: 1em;}
	   .Area03 .txt_cpNum4{position:relative;right: -4vw;top: -14.5vw;font-size: 1em;}
	   .Area03 .warningTxt2{ position:relative;right: 0vw;top: -8vw; color: #FFFFFF}
	   .Area02 .box img {margin-bottom: 0vw;}

     .Area01_btn{ right: 3.5vw; width: 32vw; top: 19.5vw;}
     .Area02_btn{ right: 3.5vw; width: 32vw; top: 12.5vw;}
	 .Area04_btn{right: 5vw;width: 35vw;top: 10vw;position: absolute!important;}

    /* .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{position: relative;top: -1.5vw;right: -66vw;width: 32%;}
	   .Area03 .Area03_btn_2{position: relative;top: 5vw;right: -48vw;width:15%;}
       
    }





/*主標動畫*/
@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: #ffffffcc;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:42px;}

@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: -3vw; padding: 7% 0 11% 0;width: 96%;}
    }

/*常見問題*/
.box_list { text-align: justify; background-color:#70470b; 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) ") " ;}