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

/*基本*/
body{ margin:0; padding:0;background:linear-gradient(140deg, #e9eaed, #f7f7f7);}



/*全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;}
	}
	
	
/*背景*/
@media screen and (min-width:767px){
.bg{ z-index:0; position:absolute;top:0; width:100%; min-width:1220px; height:1130px; background: url(top_bg.png?t=1788341622358) no-repeat center top ;}
.decobg{ z-index:0; position:absolute;top:-100px; width:100%; min-width:1220px; height:320px; background: url(deco_bg.png?t=1788341622358) no-repeat center top ;pointer-events: none;}


}
	@media screen and (max-width:767px){
.mbg{ z-index:0; position:absolute;top:0; width:78%;height:80vw;right: 0;; background: url(top_bg.png?t=1788341622358)  100% / 100% no-repeat scroll;}
.mdecobg {z-index:0;position:absolute;top: -8vw;width:100%;height: 30vw;background: url(mdeco_bg.png?t=1788341622358)  100% / 100% no-repeat scroll;}


	}


/*背景*/
.bgtop  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%;}
	@media screen and (max-width:767px){
		.bgtop { min-width: inherit; background-size:100%;}
	}
	
	

	
/*黏人快速鍵(白色款)*/
.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%;}
		
	}



	/*一般LOGO*/
.momologo { z-index:2; position: absolute; top: 15px; 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; }
.momologo-white a path { fill:#ffffff; } 
	@media screen and (max-width:767px){
		.momologo { display:none;}
	}
/*品牌日*/
/* .momologo a:hover {opacity: 1; background-image:url(momo_logo.png?t=1788341622358);} */
/*品類日*/
/* .momologo a:hover {opacity: 1; background-image:url(momo_logo2.png?t=1788341622358);} */
      /* @media screen and (max-width:767px){
        .momologo {z-index: 999;position:absolute;top: 1vw;left:2vw;}
        .momologo a {  width:22vw!important; height:12vw!important;}
		a:hover{background-size: 45%}		  
      }  */

	  /*提醒我按鈕*/
	  a.mo_remind_btn {z-index:9999;position: absolute!important;left: 0px;top: 117vw;width: 17%;}

/*版頭*/
.Area_top {height: 750px;}
@media screen and (max-width:767px){
	.Area_top {height:70vw;}	
}

	.PE_n{pointer-events: none;}
  @media screen and (min-width:768px){
	.main{position: absolute;top: 55px;width: 48%;margin: 0 10%;}	 
	.sub_bg{position: absolute;top: 425px;width: 40%;margin: 0px 10%;z-index: 6;}	
}

@media screen and (max-width:767px){
	.main{position: absolute;top: 3.6vw;width: 57vw;margin: 0px 2%;pointer-events: none;}	 	 
	.sub_bg{position: absolute;top: 40vw;width: 51%;margin: 0 3%;z-index: 1}	
	}
	
	
	.Area_top .PD_layout.PD_layout-top_btn {background-color: #00000000!important;}
	.Area_top .PD_layout.PD_layout-top_btn ul { margin: 0 auto; padding: 0; background-color: transparent; grid-gap: 0; width: 100%; }
	.Area_top .PD_layout.PD_layout-top_btn li { border: none; text-align: center;  }
	.Area_top .PD_layout.PD_layout-top_btn li .PD a  { display: inline-block; }
	.Area_top .PD_layout.PD_layout-top_btn li .PD .PD_img,
	.Area_top .PD_layout.PD_layout-top_btn li .PD h4,
	.Area_top .PD_layout.PD_layout-top_btn li .PD p { display: none; }
	.Area_top .PD_layout.PD_layout-top_btn li .PD .PD_into { padding: 0 }
	.Area_top .PD_layout.PD_layout-top_btn li .PD h3 {display: flex;align-items: center;margin: 0;padding: .3em 1em;font-size: 40px;line-height: 1em;color: #fff;background:#ff04a9;border-radius: 99em}
	.Area_top .PD_layout.PD_layout-top_btn.PD_layout-top_btn-white li .PD h3  { color: #000; background: #fff; }/*按鈕變白色*/
	.Area_top .PD_layout.PD_layout-top_btn{padding: 20px 0 30px;position: absolute;bottom: 80px;left: 130px;}
	.Area_top .PD_layout.PD_layout-top_btn .PD_into i{
		width: 0;
		height: 0;
		margin-left: .3em;
	
		border-top: .25em solid transparent;
		border-bottom: .25em solid transparent;
		border-left: .35em solid #fff;
	}

	@media screen and (max-width:767px){
		.Area_top .PD_layout.PD_layout-top_btn li .PD h3 { display: flex; align-items: center; margin: 0; padding: .3em 1em; font-size: 4vw; line-height: 1em; color: #fff; background:#ff04a9; border-radius: 99em }
		.Area_top .PD_layout.PD_layout-top_btn{padding: 1.5vw 0 3vw;position: absolute;bottom:5vw;left: 3vw;}
	}
/* Area01 */
.Area01 {margin-bottom:5%;}
.Area01 .PD_box .PD_layout .PD_into{padding: 7% 0 5% 5%;}
@media screen and (min-width:768px){
.Area01 .PD_box{padding-top: 20px;}
}
@media screen and (max-width:767px){
.Area01 .PD_layout{width: 95%;}
.Area01 .PD_box .PD_layout .PD_img {align-items: center;}
.Area01 .PD_box .PD_layout .PD h4 span {height:1.3em ;overflow: hidden;}
}


/*影片+2品公版-共用*/	
.Area_video .videobox1 { position: relative;z-index:5; }
@media screen and (min-width:768px){
.Area_video .videobox1 .youtubeArea { height: 475px; margin: 0px auto 20px; }
}
@media screen and (max-width:767px){		
.Area_video .videobox1 .youtubeArea { width: 96%; height: 50vw; margin: 4vw auto 2vw; }
}

/*??影片??*/		
.videobox {position:relative; height: auto;}
.videobox .youtubeBG {width: 100%;position:relative;}
.videobox .youtubeArea { position:absolute; top:23px; right:173px; width:872px; height:494px}
.videobox .youtubeArea iframe {border-radius:25px;}
@media screen and (max-width:767px){
	.videobox{position:relative; width:100%; height: auto;}
	.videobox .youtubeBG {width: 96%;left:2vw;}
	.videobox .youtubeArea {position: relative;width:93vw; height:200px; top:-30vw; right:0; margin:-92px auto;}
	.videobox .youtubeArea iframe {border-radius:5px;}
}


/* Area02 */
.Area_page { overflow: hidden;}
.Area02 .Area_page .NavArea .Nav_box{background: #ffffff00;}
/* --------------------------------------
* Page 頁籤_202405291900
* -------------------------------------- */
.NavArea_tabbar_page { margin: 0 auto 20px;}  
.NavArea_tabbar_page .Nav { overflow: visible;}  
.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 a { color:#fff;}
.NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #ff00a8 !important; background-color: #ff00a8 !important;}

/*推編輯按鈕 */  
/* .NavArea_tabbar_page .Nav input { position: fixed; left: 30%} */
.Area02 .NavArea_tabbar_page .Nav .swiper-slide-active span { color:#fff!important ;}
.Area02 .NavArea_tabbar_page .Nav .swiper-slide span { color:#ff00a8 ;}
@media screen and (min-width:768px){
	.Area02{margin-bottom: 10%;}
	.Area02 .NavArea_tabbar_page .Nav { overflow: visible; }  
	.Area02 .NavArea_tabbar_page[data-light="box"] .Nav ul { transform: none !important; justify-content: center;}
	.Area02 .NavArea_tabbar_page .Nav .swiper-slide i { display:block; border: 3px solid #ff00a8; background-color: #fff ;}
}
@media screen and (max-width:767px){
	.Area02 {padding-bottom: 5%;}
	.Area02 .NavArea_tabbar_page[data-light="box"] .Nav ul { transform: none !important; justify-content: center;}
	.Area02 .NavArea_tabbar_page .Nav .swiper-slide i { display:block; border: 0.5vw solid #ff00a8; background-color: #fff ;}
	.Area02 .content_swiper ul {width: 95%;}
	}

/* Area03 */
.Area03{margin:5% auto;}
@media screen and (min-width:768px){
.Area03 .Area_danji{width: 90%!important;}
.Area03 .PD_layout.AH2S{margin: -8% auto 0%;width: 85%;}
}
@media screen and (max-width:767px){
	.Area03 .Area_danji{width: 95%;margin:0 auto ;}
	.Area03 .PD_layout.AH2S{margin:-5% 0 0;}
}

/* Area04 */
.Area04{margin-bottom: 5%;}
.Area04 .PD_layout ul{grid-gap:0;    padding-left: 0}
.Area04 .PD_box .PD_layout ul li{margin:-2% 0;}
.Area04 .PD_layout.PD_layout-D3_01{margin: -1% 4% 0;}
.Area04 .PD_box .PD_layout ul li:nth-last-child(-n+4) {margin:-3% 0;}
@media screen and (min-width:768px){
	.Area04 .PD_box{width: 95%;margin: 0 auto}
	.Area04 .PD_layout.PD_layout-D3_01 .PD h3{width: 100%;display: flex;font-size:28px;letter-spacing: -2px;color: #6a6a6a;font-weight: bold;}
}
@media screen and (max-width:767px){
	.Area04 .PD_layout.PD_layout-D3_01 .PD h3{width: 100%;display: flex;font-size: 4vw;letter-spacing: -0.2vw;color: #6a6a6a;font-weight: bold;}
}

/* Area05 */
.Area05{margin-bottom: 10%;}
.Area05 .PD_layout ul{grid-gap:0!important}
.Area05 .PD_box {width: 90%;margin:2% auto;}
.Area05 .PD_box .PD_layout ul li{margin:-6%;}
@media screen and (max-width:767px){
	.Area05 .PD_box {width: 95%;margin:2% auto;}
}

/* Area06 */

.Area06 .PD_layout ul {grid-gap: 0 ;padding: 0!important;margin: 0 auto;}
.Area06 .PD_layout.PD_layout-top_btn {background-color: #00000000!important;}
.Area06 .PD_layout.PD_layout-top_btn ul { margin: 0 auto; padding: 0; background-color: transparent; grid-gap: 0; width: 100%; }

.Area06 .PD_layout.PD_layout-top_btn li .PD a  { display: inline-block; }
.Area06 .PD_layout.PD_layout-top_btn li .PD .PD_img,
.Area06 .PD_layout.PD_layout-top_btn li .PD h4,
.Area06 .PD_layout.PD_layout-top_btn li .PD p { display: none; }
.Area06 .PD_layout.PD_layout-top_btn li .PD .PD_into { padding: 0 }
.Area06 .PD_layout.PD_layout-top_btn li .PD h3 {display: flex;align-items: center;margin: 0;padding: .3em 1em;font-size: 40px;line-height: 1em;color: #fff;border-radius: 99em}
.Area06 .PD_layout.PD_layout-top_btn.PD_layout-top_btn-white li .PD h3  { color: #000; background: #fff; }/*按鈕變白色*/
.Area06 .PD_layout.PD_layout-top_btn .PD_into i{
	width: 0;
	height: 0;
	margin-left: .3em;

	border-top: .25em solid transparent;
	border-bottom: .25em solid transparent;
	border-left: .35em solid #fff;
}

@media screen and (min-width:768px){
	.Area06{position: fixed;bottom: 0;z-index: 9999;/* width: 100%; */margin: 0 50%;transform: translateX(-50%);}
	.Area06 .PD_layout.PD_layout-top_btn li:nth-child(even) { border: none; text-align: center; background-color:#ff37b5;border-radius:30px 30px 0 0;}
.Area06 .PD_layout.PD_layout-top_btn li:nth-child(odd) { border: none; text-align: center; background-color:#1eafde;border-radius:30px 30px 0 0; }
}
@media screen and (max-width:767px){
	.Area06{position: fixed;bottom: 0;z-index: 9999;width: 100%;}
	.Area06 .PD_layout.PD_layout-top_btn li {min-height: calc(100dvh - 177vw);}
	.Area06 .PD_layout.PD_layout-top_btn li .PD h3 { display: flex; align-items: center; margin: 0; padding: .3em 1em 0; font-size:5vw; line-height: 1em; color: #fff;line-height: 3em;}
	.Area06 .PD_layout.PD_layout-top_btn li:nth-child(even) { border: none; text-align: center; background-color:#ff37b5;border-radius:3vw 3vw 0 0;}
	.Area06 .PD_layout.PD_layout-top_btn li:nth-child(odd) { border: none; text-align: center; background-color:#1eafde;border-radius:3vw 3vw 0 0; }

}

	/*閃光1*/                                
.brightness1-play { -webkit-animation:brightness1-play 3s infinite ; animation:brightness1-play 3s infinite ;}
@keyframes brightness1-play {
  0% { filter:brightness(100%);  }
  92% { filter:brightness(100%);  }
  94% { filter:brightness(130%);  }
  96% { filter:brightness(100%);  }
  98% { filter:brightness(130%);  }
  100% { filter:brightness(100%);  }
}

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


	.minbright-play { -webkit-animation:minbright-play 1s linear infinite alternate; animation:minbright-play 1s linear infinite alternate ;}
	@-webkit-keyframes minbright-play {
	  0% { filter:brightness(60%);  }
	  100% { filter:brightness(120%);  }
	}
	@keyframes minbright-play {
	  0% { filter:brightness(60%);  }
	  100% { filter:brightness(120%);  }
	}


    @import'_Area_boxstyle'