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

/*基本*/
 body { margin: 0; padding: 0; background: url("bg.jpg?t=1753793609791"); background-repeat: repeat-y; background-size: 100%;} 
@media screen and (max-width:767px){
	body { background: url("bg.jpg?t=1753793609791"); background-repeat: repeat-y; background-size: 100%;z-index: -2;}}

/*全BOX版面*/
.WRAPPER { position: relative; display: inline-block; margin: 0; padding :0; width: 100%; overflow: hidden;}
.WRAPPER img { border: 0; vertical-align: top;}
.WRAPPER a { text-decoration: none; display: block;}
.WRAPPER .mainArea {  margin: 0 auto; width: 1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative;}
.WRAPPER .mainArea a { padding: 0; margin:0; text-decoration: none;}
.Area .list_00 ul { display: inline-block;}
.Area .list_00 li { list-style: none; float: left; overflow: hidden;}
@media screen and ( max-width:736px){
	.WRAPPER { min-width: inherit;}
	.WRAPPER .mainArea { padding-bottom: 0; width:100%;}
	.WRAPPER img { width: 100%; height: auto;}
}

/*LOGO CSS*/
.momologo {z-index:2;position: absolute;top: 28px;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;}
}


  

/*背景*/
@media screen and (min-width: 768px){
  .Area_content04_bg { position: absolute; width: 1000%; height: 560px; background: url(Area_content04_bg.png?t=1753793609791); background-repeat: repeat-x; top: -45px; transform: translateX(-50%); pointer-events: none;}
}


/*隱鑶*/
.for_pc {}
.for_phone { display: none !important;}
	@media screen and (max-width:767px){
		.for_pc { display: none !important;}
		.for_phone { display: inherit !important;}
		.Areabottom { margin-bottom: 8vw;}
}


/*可拖移廣告icon(修改)*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; right: 0; transform: translate3d(0,200px,0); /*background-color: rgba(0,0,0,0.5);*/}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto;}
.Area_hammerAD .closeButton a { display: block; cursor: pointer; position: absolute; width: 20px; height: 20px; border-radius: 50%; font: bold 20px/1em "Century Gothic"; color: #FFF; text-align: center; background-color: rgba(0%,0%,0%,0.5); text-decoration: none; z-index: 2;}
    @media screen and (min-width:768px){
      .Area_hammerAD { position: fixed; z-index: 300; left: 50%; right: auto; bottom: 50px; display: block; width: 210px; height:200px; transform: translateX(618px);}
      .Area_hammerAD .closeButton a { top: 0; right: 0;}
      .Area_hammerAD_phone { display: none;}
    }
    @media screen and (max-width:767px){
      .Area_hammerAD { display: block; width: 26%;}
      .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
    }



/*版頭*/
.Area_top { height: 480px;}
.Area_top .top_bg {position: relative;left: 50%;transform: translateX(-50%);}
.Area_top .btn_more {position: absolute; top: 20px; right: -100px; width: 80px; z-index: 9;}
.Area_top .btn_list {position: absolute; top: 70px; right: -100px; width: 80px; z-index: 9;}
.Area_top .text_bg{ position: absolute; top: 0; left: 0; z-index: 1;}
.Area_top .text {
    position: absolute;
    top: 278px;
    left: 30px;
    width: 960px;
    font-size: 55px;
    font-weight: 700;
    letter-spacing: -0.05em;
    background-clip: text;
    height: 50px;
    line-height: 50px;
    z-index: 2;
    color: #fced00;
    transform: skew(-10deg, -5deg);
    font-family: Arial;
}
.Area_top .top_deco {position:absolute;left: 110px;top: 35px;z-index: 0;animation-delay:1.5s;mix-blend-mode: screen;}
.Area_top .top_light1 {position:absolute;left: 227px;top: 62px;z-index: 2;animation-delay:2s;mix-blend-mode: screen;}
.Area_top .top_light2 {position:absolute;left: 670px;top: 235px;z-index: 1;animation-delay:2.5s;mix-blend-mode: screen;}

	@media screen and (max-width:767px){
	.Area_top { height: 50vw;}
	.Area_top .top_bg { position: absolute;}
	.Area_top .btn_more {position: absolute;z-index: 9;width: 10%;top: 2vw;right: 0;}
	.Area_top .text_bg { position: relative; top: 0; left: 0; width: 100%; z-index: 1;}		
	.Area_top .text {
		position: absolute;
		top: 26.5vw;
		left: 3vw;
		width: 100%;
		font-size: 5.5vw;
		font-weight: 800;
		letter-spacing: -0.02em;
		background-clip: text;
		height: 10vw;
		line-height: 10vw;
		z-index: 2;
		color: #fced00;
		transform: skew(-10deg, -5deg);
	}
	.Area_top .top_deco {position:absolute;width: 17%;left: 11vw;top: 3vw;z-index: 0;animation-delay:1.5s;mix-blend-mode: screen;}
	.Area_top .top_light1 {position:absolute;width: 15%;left: 22vw;top: 4vw;z-index: 1;animation-delay:2s;mix-blend-mode: screen;}
	.Area_top .top_light2 {position:absolute;width: 15%;left: 74vw;top: 26vw;z-index: 1;animation-delay:2s;mix-blend-mode: screen;}

}



/*01_首購禮*/
.Area_content01 .bg {position: absolute; top: 0;left: 0;width: 960px;}
.Area_content01 .activ_box {position: relative;display: flex;flex-wrap: nowrap;z-index: 2;margin: 0 auto;width: 960px;}
.Area_content01 .activ_box .Area_PD {width: 40%;overflow: hidden;padding: 85px 30px 0;}
.Area_content01 .activ_box .Area_PD .PD_layout ul {display: flex;flex-wrap: nowrap;height: auto;grid-gap:0;width: 100%;margin: 0 auto;}
.Area_content01 .activ_box .Area_PD .PD_layout[data-pd-li=BN] ul{padding: 0 15px}
.Area_content01 .activ_box .Area_BN {width: 51%;padding: 23px 0 0;height: 745px;}
.Area_content01 .activ_box .Area_BN ul {padding:0;position: relative;grid-gap: 29px;}
.Area_content01 .activ_box .Area_BN a{cursor: pointer;}
.Area_content01 .swiper-pagination-bullet { background: #000000; opacity: .5;}
.Area_content01 .swiper-pagination-bullet-active { background: #000000; opacity: 1;}
.Area_content01 .PD_layout .PD h3 {font-size: 30px;}
.Area_content01 .PD_layout .PD h4 {font-size: 20px;}
.Area_content01 .PD_layout .PD p  {height: 5em;line-height: 5em;}
.Area_content01 .PD_layout .PD p .Price {font-size: 60px;}
.Area_content01 .PD_layout .PD p b, .PD_layout .PD p del {font-size: 20px;}
.Area_content01 .PD_layout .PD p small {font-size: 20px;}

@media screen and (max-width: 767px){
.Area_content01 .bg {display: none;}
.Area_content01 { background: url(Area_content01_bg.png?t=1753793609791)top center no-repeat; background-size:100%; height:auto;margin-bottom: 4vw;}
.Area_content01 .activ_box {padding: 0;margin: 0 auto;width: 96%;}
.Area_content01 .activ_box .Area_PD {width: 45%;padding: 8vw 0vw;height: 62vw;margin: 0 1vw 0 1vw;}
.Area_content01 .activ_box .Area_PD .PD_layout ul {height: auto;width: 100%;margin: 0 -6%;}
.Area_content01 .activ_box .Area_BN  {width: 60%;padding: 0;margin: 2vw 0 0 2vw;height: auto;}	
.Area_content01 .activ_box .Area_BN ul {padding: 0;position: relative;grid-gap: 0.6em;}	
.Area_content01 .activ_box .Area_swiper_box .swiper-pagination { bottom: 3vw !important }
.Area_content01 .swiper-pagination-bullet { background: #000000; opacity: .5;}
.Area_content01 .swiper-pagination-bullet-active { background: #000000; opacity: 1;}
.Area_content01 .PD_layout .PD h3 {font-size: 15px;}
.Area_content01 .PD_layout .PD h4 {font-size: 15px;}
.Area_content01 .PD_layout .PD p  {height: 2em;line-height: 2em;}
.Area_content01 .PD_layout .PD p .Price {font-size: 1.5em;}
.Area_content01 .PD_layout .PD p b, .PD_layout .PD p del {font-size: 12px;}
.Area_content01 .PD_layout .PD p small {font-size: 12px;}



}



/*02_享會員好禮*/
.Area_content02:before{
	z-index: -1;
	content: "";
	width: 2000px;
	height: calc(100% + 160px);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -40px;
	background: url(Area02_boxstyle_top.jpg?t=1753793609791) top center / 100% no-repeat, url(Area02_boxstyle_bottom.jpg?t=1753793609791) bottom center / 100% no-repeat, url(Area02_boxstyle_center.jpg?t=1753793609791) bottom center / 100% repeat-y;
	}

@media screen and (max-width:767px){
	.Area_content02 {margin-bottom: 12vw}
	.Area_content02 .PD_layout {width: 96%;}
	.Area_content02:before{
		z-index:-1;
		content: "";
		width: 100vw;
		height: calc(100% - -20vw);
		position: absolute;
		left: 0;
		transform: none;
		top: -6vw;
		background: url(mArea02_boxstyle_top.jpg?t=1753793609791) top center / 100% no-repeat, url(mArea02_boxstyle_bottom.jpg?t=1753793609791) bottom center / 100% no-repeat, url(mArea02_boxstyle_center.jpg?t=1753793609791) bottom center / 100% repeat-y;
		}
	}

/*倒數*/
.Area_content02 .TimerNick {position: absolute;top: 86px;right: 0;display: inline-block;z-index: 8;text-align: center;color:#3467c0;}
.Area_content02 .TimerNick .FontStyle {display: inline-block;margin: 0 0 0 10px;padding: 0;border: 0;font: bold 51px/40px Arial;letter-spacing: 0px;text-align: center;}
.Area_content02 .TimerNick span { padding-left: 2px;font: bold 29px/30px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.025em;}
    @media screen and (max-width:767px){
		.Area_content02 .TimerNick  {width: 100%;top: 7vw;left: 25vw;}
		.Area_content02 .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font: bold 5vw/0vw Arial;}
		.Area_content02 .TimerNick span {padding-left: 0;font: bold 3.5vw/6vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;/*letter-spacing: -0.05em;*/}
    }



/** 入稿區基本 **/
.content_Area { position:relative; display:inline-block; margin:0px auto 0px auto; padding: 0px 0px 0px 0px; width:1220px;}
.buttonAera_more { position: absolute; top:15px; right:15px; padding-left:17px; padding-right:10px;  border-radius:60px; width:90px; height:40px; background-color: #666; text-align:center;}
.buttonAera_more a { display:block; padding-top:5px; font: bold 24px/29px Century Gothic; color:#fff; text-decoration: none; letter-spacing:-0.05em;}
.buttonAera_more:hover { background-color: #000;}
.buttonAera_more .btnGO { margin:5px; float:right; width:20px ;height:20px;}


/*你可能會喜歡*/
.Area_b268 {/* margin-top: 120px;*/}
.Area_b268 .titleBox { padding: 0 0 20px 0;}
.Area_b268 .swiper-button-next, .swiper-button-prev { color: #fff;}
.swiper-pagination-bullet { background: #fff; opacity: .5;}
.swiper-pagination-bullet-active { background: #fff; opacity: 1;}
.Area_b268 .Area_swiper .PD .prdName { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden;}
@media screen and (min-width:768px){
  .Area_b268 .titleBox img{ position: relative; top: 0px; left: 0;}
  .Area_b268 > .Area_boxstyle_box { min-height: auto;}
  #bt_0_layout_b268 .b268_swiper {  margin: 20px 30px; padding: 0; box-sizing: border-box;}
  .Area_b268 .Area_swiper { width: 95%; overflow: visible;}
  #bt_0_layout_b268 .b268_swiper { overflow: hidden;}
  .Area_b268 .swiper-button-next { right: -40px;}
  .Area_b268 .swiper-button-prev { left: -40px;}
}
@media screen and (max-width:767px){
  .Area_b268 {/*margin-top: 4vw; background: url(Area_content04_bg.png?t=1753793609791); background-size: 100%; background-repeat: repeat-x;*/}
  .Area_b268 .titleBox { position: relative; padding: 4vw 0 2vw 0;}
  .Area_b268 .titleBox img {width: 100%;}
  .Area_b268 .Area_swiper { position: relative;}
  .Area_b268 > .Area_boxstyle_box { /*padding: 8vw 0.5vw 4vw 0;*/ }
  .Area_b268 .Area_boxstyle_box { padding-left: 0 !important;  padding-right: 0 !important;}
  #bt_0_layout_b268 .b268_swiper { padding-top: 1vw; padding-bottom: 0vw;}
}




/*猜你喜歡-去除共用素材ul寬度更改*/
.Area_b268 .PD_layout ul {width: auto;}


/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 2s ease-in-out infinite alternate;
				         animation:uptodown-play 2s ease-in-out 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-play { -webkit-animation:downtoup-play 2s ease-in-out infinite alternate;
				         animation:downtoup-play 2s ease-in-out 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);
		}
	}



@keyframes bounceIn {
    from,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3)
    }


    100% {
        transform: scale3d(0.97, 0.97, 0.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    animation-duration: .75s;
    animation-name: bounceIn
}

/*轉轉2*/	
.rotate2-play { -webkit-animation:rotate2-play 5s linear infinite ;
	animation:rotate2-play 5s linear infinite ;}
@keyframes rotate2-play {
0% { 
transform: rotate(0deg);
}
60% { 
transform: rotate(0deg);
}
100% { 
transform: rotate(360deg);
}
}



/*放大縮小*/
.scaleDraw { -webkit-animation:scaleDraw .5s ; animation:scaleDraw .5s ;}
                @-webkit-keyframes scaleDraw {
                  0%   { transform:scale(0);}
                  100% { transform:scale(1)}
                }
                @keyframes scaleDraw {
                  0%   { transform:scale(0);}
                  100% { transform:scale(1)}
                }



  

/*03_mo幣/折價券使用教學*/
.Area_content03 { height: 1200px;}
.Area_content03 .bg {z-index: -3;position:absolute;top:0px;left:0;width: 100%;height:1350px;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
@media screen and (max-width:767px){
 .Area_content03 { height: 120vw;}
 .Area_content03 .bg {z-index: -3;position: absolute;top: 0vw;} 
}


	/*步驟輪播*/
	.Area_pdA_swiper {display:block;  width:960px;height: 1000px; }
		@media screen and (max-width:767px){
			.Area_pdA_swiper {display:block;width: 100%;height: 210vw;left: -2vw;top: -1vw;}		
		
		}

	.Area_pdA_swiper .icon_ { position: absolute;}	
	.Area_pdA_swiper .icon_1,
	.Area_pdA_swiper .icon_3,
	.Area_pdA_swiper .icon_5{ top:122px}

	.Area_pdB_swiper .icon_ { position: absolute;}	
	.Area_pdB_swiper .icon_1,
	.Area_pdB_swiper .icon_3,
	.Area_pdB_swiper .icon_5{ top:122px}

	@media screen and (max-width:767px){
		.Area_pdA_swiper .icon_ { position: absolute;}
		.Area_pdA_swiper .icon_1,
		.Area_pdA_swiper .icon_3,
		.Area_pdA_swiper .icon_5{ top:12vw}
		.Area_pdA_swiper img {width: 100%;height: auto;}		
		.Area_pdA_swiper .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {bottom: 18px;left: 0;width: 100%}

		.Area_pdB_swiper .icon_ { position: absolute;}
		.Area_pdB_swiper .icon_1,
		.Area_pdB_swiper .icon_3,
		.Area_pdB_swiper .icon_5{ top:12vw}
		.Area_pdB_swiper img {width: 100%;height: auto;}		
		.Area_pdB_swiper .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {bottom: 18px;left: 0;width: 100%}



		}  





	/*Area_page*/
	.Area_page h3 { color: #fff; margin: 0; padding: 0}
	@media screen and (min-width:768px){ 
	.Area_page { overflow: hidden; /*background-color: #555;*/ padding: 20px 0 ; border-radius: 1em } 
	.Area_page h3 { color: #fff; margin: 0 auto 20px; padding: 0}
	.Area_page .PD_layout { width: 100%}
	.Area_page .NavArea_tabbar_page{font: 40px / 80px "Century Gothic", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica}


	}
	@media screen and (max-width:767px){
	.Area_page { width: 100%; overflow: hidden; /*background-color: #555;*/ padding:0 ; border-radius: 1em } 
	.Area_page h3 { color: #fff; margin: 0 auto 2vw; padding: 0}
	.Area_page .NavArea_tabbar_page{font: 16px / 44px "Century Gothic", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica}

	}



    /* --------------------------------------
     * Page 頁籤_202405291900
     * -------------------------------------- */
	 .NavArea_tabbar_page { margin: 0 auto 0px  ; width: 100%; }  
	 .NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-26%, 0, 0);}  
	 .NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;background-color:rgb(255 255 255 / 0%);}
	 .NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(34%, 0, 0)!important}
	 .NavArea_tabbar_page[data-num="3"] .Nav-wrapper { transform: translate3d(43.0%, 0, 0)!important}
	 .NavArea_tabbar_page[data-num="4"] .Nav-wrapper { transform: translate3d(30.5%, 0, 0)!important}
	 .NavArea_tabbar_page[data-light="box"] .Nav ul { padding: 0 ;}
	 .NavArea_tabbar_page .Nav li { overflow: visible;width: 45% !important }
	  /*頁籤高亮顏色設定 */  
	 .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#2b5fd2;width: 140px;}
	 .NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #fced00 !important; background-color: #fced00 !important;width: 140px;}
	 .NavArea_tabbar_page .Nav a {color: #bbe9ff;font-weight: bold}

	  /*推編輯按鈕 */  
	 .NavArea_tabbar_page .Nav input { position: fixed; left: 30%}
	   @media screen and (min-width:768px){ 
		 .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#2b5fd2;width: 380px;}
		 .NavArea_tabbar_page { display: block; }
		 .NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-26%, 0, 0);height: 82px;} 
		 .NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(34%, 0, 0)!important} 
		 .NavArea_tabbar_page .Nav li { overflow: visible;width: 45% !important }
	   }
 

	  /*注意事項*/
.Area_msg {
	color: #ffffff !important;
  }
  
  @media screen and (max-width: 767px) {
	.Area_msg {
	  color: #ffffff !important;
	}
  }
  
  /*產品標示*/
  .Area_msg_PDmark {
	color: #ffffff !important;
  }
  
  /*APPLE-APP警語*/
  .Area_msg_apple {
	color: #ffffff !important;
  }
  
  /*注意事項*/
  .Area_bgfooter {
	margin-top: 100px;
	text-align: left;
	color: #ffffff;
	background-color: transparent;
  }
  
  .Area_bgfooter .box {
	margin: 0 auto;
	padding: 60px 160px;
  }
  
  .Area_bgfooter p {
	margin: 0;
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
  }
  
  .Area_bgfooter ul,
  .Area_bgfooter ol {
	margin-top: 1.2rem;
  }
  
  .Area_bgfooter ul ol,
  .Area_bgfooter ul ul {
	margin-top: 0.5rem;
  }
  
  .Area_bgfooter li {
	margin-bottom: 1.2rem;
	font-size: 18px;
	line-height: 1.8rem;
	text-align: justify;
	word-break: break-all;
  }
  
  .Area_bgfooter li p {
	margin-top: 1.2rem;
	font-size: 24px;
  }
  
  .Area_bgfooter li a {
	display: inline;
	color: #e9db00;
	text-decoration: underline;
  }
  
  @media screen and (max-width: 767px) {
	.Area_bgfooter {
	  margin-top: 50px;
	}
	.Area_bgfooter .box {
	  width: 90%;
	  padding: 5%;
	}
	.Area_bgfooter p {
	  font-size: 24px;
	}
	.Area_bgfooter ul,
	.Area_bgfooter ol {
	  margin-top: 1rem;
	  padding-left: 8%;
	}
	.Area_bgfooter ul ol,
	.Area_bgfooter ul ul {
	  margin-top: 0rem;
	}
	.Area_bgfooter li {
	  margin-bottom: 1rem;
	  font-size: 16px;
	  line-height: 1.7rem;
	}
	.Area_bgfooter li p {
	  margin-top: 1rem;
	  font-size: 16px;
	}
  }
  
