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

/*基本*/
body{ margin:0; padding:0;background:#7cbe42;}



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

	
/*黏人快速鍵(白色款)*/
.fixed_Area {z-index:999; position:fixed; top:20px; right:0px; width:100px; font-weight:800; font-size:16px; line-height:48px; font-family:Century Gothic, "微軟正黑體",Helvetica; text-align:center;
			-webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,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;}
.fixed_Area a { display:block; text-decoration: none; color: #000;}
.fixed_Area img {-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;}
.fixed_Area .box ul { margin:0; padding:0; list-style:none;}
.fixed_Area .box li { margin:0 0 1px 0; padding:0; height:48px; background-color:rgba(255,255,255,0.6);}
.fixed_Area .box li a { letter-spacing:-1px;height:48px; overflow:hidden;}
.fixed_Area .box li a:hover { background-color:rgba(255,255,255,1);}
.fixed_Area .box li.cate-hover { background-color:rgba(255,255,255,1);}
.fixed_Area .box h2 { margin:0; padding:0;}
	/*快速導覽*/
	.fixed_Area h3 { position: absolute; top:100px; right:-50px; margin:0; padding:35px 0 0 0; border-radius:10px; width:48px; height:82px; font-size: 16px; line-height:30px; writing-mode: tb-lr; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; background-color:rgba(255,255,255,0.6); text-align:left; cursor:pointer;
			-webkit-transform-origin:top left; transform-origin:top left;
			  -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;}
	.fixed_Area h3 i { position: absolute; top:0; right:0; display:block; width:50px; height:50px; cursor:pointer;}
	.fixed_Area h3 i:before { content: ""; position:absolute; top:41%; left:37%; display:block; border:1px solid #000; border-width:0 1px 1px 0; width:15%; height:15%; -webkit-transform:translate(-50%,-50%) rotate(135deg); transform:translate(-50%,-50%) rotate(135deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
			/*黑色款*/
			.fixed_Area.fixed_Area-dark a { color: #fff;}
			.fixed_Area.fixed_Area-dark .box li { background-color:rgba(0,0,0,0.5);}
			.fixed_Area.fixed_Area-dark .box li a:hover { background-color:rgba(0,0,0,1);}
			.fixed_Area.fixed_Area-dark .box li.cate-hover { background-color:rgba(0,0,0,1);}
            .fixed_Area.fixed_Area-dark h3 {background-color:rgba(0,0,0,0.5);color: #fff; }
            .fixed_Area.fixed_Area-dark h3  i:before { border-color:#fff;}



			/*收合黏人精*/
			.fixed_Area.fixed_Area_hide { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); }
			.fixed_Area.fixed_Area_hide h3 { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); 
											 -webkit-transition-delay:0.2s; transition-delay:0.2s;}
/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block;margin: auto;} 
.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;}
.Area960 { margin:0 auto; width:960px;}
			@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		
	}




/*版頭*/
.Area_top {height: 970px;}
.Area_top .momologo { z-index:2; position: absolute;top:15px; left:30px;} 
.Area_top .momologo a { display:block; width:200px; height:60px; background: url(momo_logo.png?t=1757744212783) no-repeat;}

	@media screen and (max-width:767px){
		.Area_top .momologo a {display:block;width: 25vw;height: 10vw;background: url(momo_logo.png?t=1757744212783) no-repeat;}
		.Area_top {height: 110vw;z-index: 0}
		.Area_top .momologo {top: 4vw;left: 2vw;}
		.Area_top .momologo a{background-size:80%;}
		
/*提醒我按鈕*/
a.mo_remind_btn { z-index:10; position: absolute; right: 0; top:79vw; width: 15%;}	  

		
	}
.bank_bn{ position:absolute; top:200px; left:0; z-index:3;}

.topPD .PD_layout ul li{background-color: inherit;}	
.title_sub .PD_layout ul li{background-color: inherit;}
@media screen and (min-width:768px){
	.main{position: absolute;top: 67px;width: 60%;margin: 0 18%;}	 
	.date{position: absolute;top:56px;width:12%;margin: 0 64%;}	
	.topPD{position: absolute;top:380px;width:53%;margin: 0 21%;z-index:2;}	
	.coming{position: absolute;top: -74px;width: 130%;margin: 0 -12%;z-index: -1;}
	.topPD img{width:80%!important;}
	.title_sub{position: absolute;top: 260px;width: 100%;margin: 0 -1%;left: -1%;z-index: 1}	  
	.title_sub img{width: 53%!important;}	
	.deco01{position: absolute;top: 285px;width: 19%;left: -259px;}	
	.deco02{position: absolute;top:-57px;width:20%;left:1000px;}	
	.deco03{position:absolute;top: 655px;width: 15%;left: 170px;}	
	}

  @media screen and (max-width:767px){
.main{position: absolute;top: 5vw;width: 85%;margin: 0 8%;}	 
.date{position: absolute;top: 3vw;width:20%;margin: 0 71%;}	
.topPD{position: absolute;top: 41vw;width: 60%;margin: 0px 20%;z-index: 1;}	
.coming{position: absolute;top:-10vw;width:80%;margin: 0 10%;z-index: -1;}
.Area_top .deco{position:relative;z-index:-1;}	
.deco01{position: absolute;top:31vw;width:25%;left:5vw;}	
.deco02{position: absolute;top:8vw;width:15%;left:88vw;}	
.deco03{position:absolute;top:74vw;width:20%;left:1vw;}	
.title_sub{position: absolute;top: 26vw;width:100%;margin: 0;z-index: 1}	  

.title_sub img{width: 75% !important;}	 	  
}


/*活動倒數*/
.TimerNick {position: absolute;top: 845px;left: 318px;display: inline-block;z-index: 8;text-align: center;color: #000;}
.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;}
.TimerNick span { padding-left: 2px;font: bold 29px/30px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.025em;}
    @media screen and (max-width:767px){
      .TimerNick  {width: 100%;top: 100vw;left:1vw;}
      .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font: bold 6.7vw/0vw Arial;}
      .TimerNick span {padding-left: 0;font: bold 3.5vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;/*letter-spacing: -0.05em;*/}
    }

.Area_title{z-index: 1;position: relative;}



/*Area00*/
@media screen and (min-width:768px){
	.Area00{margin-bottom: 6%;}
	.Area00 .Area_title{width: 80%;margin: 0 auto;}
	.Area00 .deco{position: absolute;right:-29px;top:-35px;width: 20%;}
	.Area00 .tag{position: relative;top:0;display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;margin: 10px 0%;height:60px;}
	.Area00 .box {max-height: 360px;}
	.Area00 .box .tag a {margin: 1% auto;background-color: #fff;width: 15%;border-radius: 60px;border: solid 3px #9400d6; color: #9400d6;}
	.Area00 .tag a span{font-size: 35px; font-weight: 600;}	 
	.Area00 .box .tag a.cate-hover { background-color: #9400d6;color: #fff;}
	.Area00_swiper {position: relative;width:100%;margin: 0; overflow: hidden;}	


	.Area00 .PD_layout ul {padding: 14px 65px 0}
	.Area00 .PD_layout[data-pd-into="center"] .PD_into { font-size: 20px;}
	.Area00 .PD_layout .PD p .Price {font-size: 2.25em}
}
@media screen and (max-width:767px){
	.Area00 .deco{position: absolute;right:-4vw;top:0vw;width: 20%;}
	.Area00 {position:relative;height:auto;margin: 0 0 11vw; z-index: 2}  
	.Area00 .tag{position: relative;top:0;display: flex;flex-direction: row;width:50%;margin: 3.2% 2%;}
	.Area00 .box .tag a {margin:1% 0.9%;width: 31%;padding: 0% 3%;background-color: #fff;border-radius: 6vw;color: #9400d6;border: solid 2px #9400d6;}
	.Area00 .box .tag a.cate-hover { background-color: #9400d6;color: #fff;}
	.Area00 .tag a span{font-size:5vw; font-weight: 600; }	 	  
	.Area00 .PD_layout .PD_into{display: flex;flex-direction: row;flex-wrap: wrap;}
	.Area00_swiper {position: relative;width:100%;margin: 0; overflow: hidden;max-height: 30vw;}	
	.Area00 .PD_layout ul {padding:2vw 4vw}	  
}

.box2 .PD_layout.PD_layout-coupon3 .PD .divine_coupon,.box2 .PD_layout.PD_layout-coupon3 {color: #000!important;}

.Area01{position: relative;margin-bottom:5% ;}
.Area01 .PD_layout ul{ display: flex;background-color: inherit;padding-bottom:35px;}
.Area01 .PD_layout ul li{border: none;background-color:#fff;border-radius:10px; }
@media screen and (min-width:768px){
.Area01 .box {padding-top: 20px;}

}
@media screen and (max-width:767px){
.Area01 .box {margin: 7vw 0 10vw;}
.Area01 .PD_layout ul{ display: flex;background-color: inherit;padding-bottom:10vw;}
.Area01 .PD_layout ul li{border: none;background-color:#fff;border-radius:2vw; }
}

.Area02{margin-bottom:0%;}
	.Area02 .box_01 .PD_layout{padding-top:250px;}
	.Area02 .box_02 .PD_layout{padding-top:50px;}	
	.Area02 .btn{width: 34%;margin: 1.5% auto 0;padding-bottom:100px;z-index: 1;position: relative;}
	.Area02 .PD_layout ul li{pointer-events: none}
@media screen and (max-width:767px){
.Area02 .box_01 .PD_layout{padding-top:17.5vw;}
.Area02 .box_02 {width: 95%;margin: 2% auto;}
.Area02 .box_02 .PD_layout{padding-top:10vw;}
.Area02 .box_03 {width: 95%;margin: 0 auto;}
.Area02 .box_03 .PD_layout{padding-top:2vw;}
.Area02 .btn{width: 34%;margin: 1.5% auto 0;padding-bottom: 17vw;}
}

.Area03{margin-bottom: 5%;}
.Area03 .PD_layout ul li:nth-child(even) a{animation-name:horizon-play;animation-duration:1.5s;animation-iteration-count: infinite;animation-direction: alternate;}	
.Area03 .PD_layout ul li:nth-child(odd) a{animation-name:horizon-play2;animation-duration:1.5s;animation-iteration-count: infinite;animation-direction: alternate;}	
.Area03 .PD_layout ul a {flex-direction: column-reverse;}
.Area03 .PD_layout ul .PD h3{background-color: inherit!important;}
.Area03 .PD_layout ul .PD h4{color:  #a2ff50;}
.Area03 .PD_layout ul .PD h4 b{display: none;}
.Area03 .PD_layout ul .PD p{color: #a2ff50;}
.Area03 .PD_layout ul li {border: none;margin: 20% 0%;}	
.Area03 .PD_layout ul li {background-image: url();background-repeat: no-repeat;background-size: 100%;}	
.Area03 .PD_layout ul li .PD_into{padding-bottom: 0;}
.Area03 .PD_layout .PD p del{color: #929292}
@media screen and (min-width:768px){

.Area03 .PD_layout ul{background-color: inherit;padding-top:40px;padding-left: 50px;padding-right: 20px;grid-gap: 95px;}
.Area03 .PD_layout ul li:nth-child(even) {margin: 0% auto;}
.Area03 .PD_layout ul li .PD_img{padding:2.6em 3.6em;}
.Area03 .PD_layout ul .PD h3{margin:38px 0 0 0;font-size: 24px;text-shadow: 1px 0px 13px #83d23d;color:#a2ff50;}


.Area03 .PD_layout ul .PD h4{font-size: 20px;}
.Area03 .PD_layout ul .PD .Price{font-size: 38px;}
.Area03 .PD_layout ul .PD::after {content: '';position: absolute;width: 430px;height: 730px;background-image: url(PD3_bg.png?t=1757744212784);background-size: 100%;top: -100px;background-repeat: no-repeat;left: -15px;z-index: -1;}
}

@media screen and (max-width:767px){
	
.Area03 .PD_layout ul li:nth-child(even) {margin:-5% auto 0;}
.Area03 .PD_layout ul{background-color: inherit;padding:3vw 3vw 0;grid-gap: 8vw;}
.Area03 .PD_layout ul li .PD_img{padding:0 0.7em 0 1.4em;margin-bottom: 3vw;}
.Area03 .PD_layout ul .PD h3{text-shadow: 0 0 1vw #83d23d;margin-bottom: 0;margin-top:3vw;font-size:5vw;height: 8vw;color:#a2ff50;}
.Area03 .PD_layout ul .PD h4{margin:0;}
.Area03 .PD_layout ul .PD {z-index: 1;position: relative;}
.Area03 .PD_layout ul li::after {content: '';position: absolute;width: 49vw;height: 87vw;background-image: url(PD3_bg.png?t=1757744212784);top: -8vw;left: -2vw;z-index:0;background-size: 100%;background-repeat: no-repeat;}

}

.Area_page { overflow: hidden;}
/* --------------------------------------
* Page 頁籤_202405291900
* -------------------------------------- */
.NavArea_tabbar_page { margin: 0 auto 20px  ; width: 94%; }  
.NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-30.5%, 0, 0);}  
.NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;}
.NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(55.5%, 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; }
@media screen and (min-width:768px){ 
  .NavArea_tabbar_page { display: block; }
}
/*頁籤高亮顏色設定 */  
.NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;}
.NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #000000 !important; background-color: #000000 !important;}
/*推編輯按鈕 */  
.NavArea_tabbar_page .Nav input { position: fixed; left: 30%}


.Area04 .PD_layout,
.Area05 .PD_layout {width: 95%;}
@media screen and (min-width:768px){
	.Area04 .deco{position: absolute;width:30%;right:40px;top:-40px;}
	.Area05 .deco{position: absolute;width:20%;right:320px;top:-90px}
	.Area04 {margin-bottom: 10%;}
	.Area04 .Area_title,
	.Area05 .Area_title{width: 80%;margin: 0 auto;}
}



@media screen and (max-width:767px){
.Area04 {margin-bottom: 15%;}
.Area04 .deco{position: absolute;width:45%;right:-16vw;top:-8vw}
.Area05 .deco{position: absolute;width:25%;right:25vw;top:-10vw}
}



.Area06 {margin:8% auto;}
.Area06 .PD_layout ul {flex-wrap: wrap!important;grid-gap: 0!important;margin-bottom: 12%;}
@media screen and (min-width:768px){
	.Area06 .PD_layout ul {display: flex;padding: 0!important;}
	.Area06 .PD_layout ul li:nth-child(even){background-image: url(A06PD_e.png?t=1757744212784);background-size: 100%;background-color: inherit;height:250px;background-repeat: no-repeat;margin-top: 1.5%!important;}
	.Area06 .PD_layout ul li:nth-child(odd) {background-image: url(A06PD_o.png?t=1757744212784);background-size: 100%;background-color: inherit;height:250px;background-repeat: no-repeat;}
}

@media screen and (max-width:767px){
.Area06 {margin:5% auto;}
.Area06 .PD_layout ul {display: flex;padding: 0 0 10%!important;}
.Area06 .PD_layout ul li:nth-child(even){background-image: url(A06PD_e.png?t=1757744212784);background-size: 100%;background-color: inherit;height: 26vw;background-repeat: no-repeat;margin-top: 1.5%!important;}
.Area06 .PD_layout ul li:nth-child(odd) {background-image: url(A06PD_o.png?t=1757744212784);background-size: 100%;background-color: inherit;height: 26vw;background-repeat: no-repeat;}
}

.Area07 {margin:5% auto;}
.Area07 .PD_layout ul {grid-gap: 0em;}
.Area07 .PD_layout ul li:nth-child(even){margin-top:20%;}



	
/*詳情說明*/


table {
	border-collapse: collapse;
	background-color: white;
	margin-left: 2.5%;
    margin-bottom: 2.5%;
    width: 95%;
}

th, td {
	border: 1px solid #ddd;
	padding: 12px 15px;
	text-align: center;
	width: 80px;
	height: 40px;
}

th {
	background-color: #604acd;
	color: white;
	font-weight: bold;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

tr:hover {
	background-color: #f5f5f5;
}

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

    @import'Area_boxstyle'    



/*分享浮層*/
.floatBox { position:relative; margin:2% auto; padding: 2% 0; width: 700px; height:auto; background-color:rgba(0,0,0,0.8); text-align:center;  border-radius:20px;}
.floatBox img { width:100%; height:auto;}
.floatBox .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;}
.floatBox .go_bt:hover { filter: brightness(120%);
  -webkit-transform:translateY(-6px);
     -moz-transform:translateY(-6px);
      -ms-transform:translateY(-6px);
       -o-transform:translateY(-6px);
          transform:translateY(-6px);}
.floatBox .closeButton a { display:block; cursor:pointer; position:absolute; top:-20px; right:-20px; 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; z-index:2}
.floatBox .closeButton:hover {background-color:#666; text-decoration:none;}
.floatBox .title  { display:inline-block; margin:0 0 10px 0; border-bottom:1px solid #ffd800; font:bold 45px/1.5em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.floatBox .box_ { margin:0 auto; width:90%;}
.floatBox .box_:after { content: ""; display:block; clear:both;}
.floatBox .box_btn { margin:20px auto 0; width: 80%;}
.floatBox .box_btn a { display:block; margin:3% 0;}
.floatBox .box_btn img { width:100%;}
.floatBox .box_btn .btn { margin:0 auto; width:60%;}
.floatBox .box_btn2 a { float:left; margin:0 1%; width:48%;}
	@media screen and (max-width:767px){
		.floatBox { padding:5% 0; width:90%; height: auto;}
		.floatBox .closeButton a {display:block; position:absolute; top:-15px; right:-15px; width:30px; height:30px; border-radius:50%; border:solid 2px #999999; font:bold 30px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2}
		.floatBox .closeButton:hover {background-color:#666; text-decoration:none}
		.floatBox .title  { margin:0 5% 3vw; font-size: 6vw; line-height:2rem;}
		.floatBox .box_btn { margin:2% auto 0;}
		.floatBox .box_btn .btn { margin:0 auto; width:80%;}
	}
