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

/*基本*/
body{ margin:0; padding:0; background-color: #681833;}


/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow: hidden; width:100%; min-width: 1220px; background-color: #681833; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
/*預設清單樣式*/
.Area .list_00 ul { display:inline-block; margin:0; padding:0;}
.Area .list_00 li { list-style:none; float:left; overflow: hidden;}
  @media screen and (min-width: 768px) {
		.WRAPPER { max-width: 2000px;}
	}
	@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit; min-height:100vh;}
		.WRAPPER img { width:100%;  height: auto;}
	}


/*fixed背景*/
.bg_01 { z-index:-1; position:absolute; top: 642px; left: 0; width: 100%; height: 100%; background-repeat: repeat-y; background-position: center top; pointer-events: none;}
.bg_top { z-index:1; position:absolute;top:0px;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top; pointer-events:none;}
.top_pdbg { z-index:7; position:absolute;top:0px;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top; pointer-events:none;}
.Area_act_bg {z-index: -1;position:absolute;top: 1330px;left:0;width: 100%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}

  @media screen and (max-width:767px){
   .m_bg { z-index: -52; position: absolute; top: 95vw; left: 0; width: 100%; height: 100%; background-position: center top; background-repeat: repeat-y; pointer-events: none; background-size: 100%;}	
  }

/*PC背景*/
.Area_bgtop { z-index: 0; position: absolute; top: 0; left: 50%; width: 2000px; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none;}
.Area_bgtop .bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 1200px;}
.Area_bgtop .bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; background-position: center top;}
  @media screen and (min-width: 768px) {
    .Area_bgtop span { background-repeat: no-repeat;}
    .Area_bgtop_fixed { position: fixed;}
  }

/*Phone背景*/
.m_Area_bgtop { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.m_Area_bgtop .m_bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-bottom: 100%;}
.m_Area_bgtop .m_bgtop_ span { position: absolute; display: block; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background-position: center top; background-size: 100%;}
  @media screen and (max-width: 767px) {
    .m_Area_bgtop span { background-repeat: no-repeat;}
    .m_Area_bgtop_fixed { position: fixed; top: 32px;} /*搭配js-appBgFixed*/
    /*.m_Area_bgtop_1 .m_bgtop_1_1 span { z-index: -3; position: absolute; top: 44px; left: 0; width: 100%; height:100%; background: url(m_bgtop_1_1.jpg?t=1755500566308)  center top no-repeat ; background-size: 100%;}*/
  }


/*區塊背景-共用設定*/
.Area_bg { pointer-events: none; z-index: 0;}
.Area_bg div { pointer-events: none; z-index: 1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
    @media screen and (max-width: 767px) {
    }
    /*圖片*/
    /*.Area_share_bg { z-index: 2;}*/
      @media screen and (min-width: 768px) {
        .Area_activ_bg div { top: 87px; height: 1300px; position: absolute;}
        .Area_vedio_bg .bg1 { top: 0; height: 3000px; position: absolute;}
        .Area_vedio_bg .bg2 {top: 3000px;height: 1500px;position: absolute;}
      }
      @media screen and (max-width: 767px) {
        .Area_activ_bg { z-index: -1;}
        .Area_activ_bg div { top: -27vw; height: 0; padding-bottom: 152%; background-size: 100%;}
        .Area_vedio_bg .bg1 {top: 0;height: 0;padding-bottom: 146%;background-size: 100%;}
        .Area_vedio_bg .bg2 {top: 145vw;height: 0;padding-bottom: 200%;background-size: 100%;}
        .Area_PD_bg div { top: 0; height: 0; padding-bottom: 688%; background-size: 100%; background-repeat: repeat-y;}
      }



/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; 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);}
		  
		  
.WRAPPER .go_bt1 {
  -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;}
.WRAPPER .go_bt1:hover { 
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}
		  
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}
	}

/*公版間距微調*/
/*.PD_layout[data-pd-h3="1"] .PD h3, .PD_layout[data-pd-h3="2"] .PD h3, .PD_layout[data-pd-h3="3"] .PD h3, .PD_layout[data-pd-h3="4"] .PD h3, .PD_layout[data-pd-h3="6"] .PD h3 { background-color: #231f1f;}*/
.agreeArea .container .PD_wrapper .PD_slide .itembox:first-child .item-title { display: none;}
	@media screen and (min-width:768px){
    .PD_layout .PD_slide:hover { transform: translateY(-6px);}
	}
	/*@media screen and (max-width:767px){
    .PD_layout ul { grid-gap: .25em;}
	}*/
	

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


/*版頭logo*/
.Area_top .momologo {z-index: 10;position: absolute;top: 40px;left: -55px;}
.Area_top .momologo a { display: block; width: 179px; height:68px; background: url(momo_logo_super.png?t=1755500566309) no-repeat; background-size: 100%;}
/* .Area_top .momologo a:hover{ background: url(momo_logo_on.png?t=1755500566309) no-repeat;} */

@media screen and (max-width:767px){
	.Area_top {z-index: 1;}
	.Area_top .momologo {top: 5vw;left: 4vw;}
	.Area_top .momologo a{background-size:100%;width: 20vw;height: 10vw;}
}



/*提醒我按鈕*/
a.mo_remind_btn {z-index:99;position: absolute!important;right: 0;top: 94vw;width: 16%;}

/*版頭區*/
@media screen and (min-width:768px){
	.Area_title {height: 1080px;overflow: hidden}
	.Area_title .top_deco {position:absolute;top: 750px;left: 170px;z-index: 8;pointer-events: none;}
	.Area_title .date {position:absolute;top: 440px;left: 680px;z-index: 7;animation: fadeInUp 3s ease-in-out ;pointer-events:none;}
	.Area_title .comingsoon {position:absolute;width: 960px;height:auto;top: 0px;left: 0px}	
	.Area_title .topdeco01 {position:absolute;left: 0px;top: 0px;z-index: 1;pointer-events:none;}
	.Area_title .topdeco02 {position:absolute;left: 0;top: 0;z-index: 1;pointer-events:none;}
	.Area_title .topdeco03 {position:absolute;left: 0;top: 0;z-index: 1;pointer-events:none;}

}
@media screen and (max-width: 767px){
	.Area_title {height: 115vw;}
	.Area_title .top_deco {position:absolute;width: 12.5%;top: 78vw;left: -3vw;z-index: 4;pointer-events:none;}
	.Area_title .date {position:absolute;width: 18%;top: 44vw;left: 70vw;z-index: 7;animation: fadeInUp 3s ease-in-out ;pointer-events:none;}
	.Area_title .comingsoon {position: absolute;top: 0vw;}
	.Area_title .topdeco01 {position:absolute;width: 100%;top: 0vw;left: 0vw;z-index: 1;pointer-events:none;}
	.Area_title .topdeco02 {position:absolute;width: 100%;top: 0vw;left: 0vw;z-index: 1;pointer-events:none;}
	.Area_title .topdeco03 {position:absolute;width: 100%;top: 0vw;left: 0vw;z-index: 1;pointer-events:none;}
}	


/*版頭品*/
@media screen and (min-width:768px){
.Area_title .top_pd {position:absolute;left: 370px;top: 508px;z-index: 5}
.Area_title .top_pd .top_pd01 {position:absolute;left: 0px;top: 0px;z-index: 5}
.Area_title .top_pd .top_pd02 {position:absolute;left: 0px;top: 0px;z-index: 4}
.Area_title .top_pd .top_pd03 {position:absolute;left: 0px;top: 0px;z-index: 3}
.Area_title .top_pd .top_pd04 {position:absolute;left: 0px;top: 0px;z-index: 2}
.Area_title .top_pd .top_pd05 {position:absolute;left: 0px;top: 0px;z-index: 1}
.Area_title .top_pdbg {display: none;}
.Area_title .top_pdtext {position:absolute;left: 0px;top: 0px;z-index: 6;pointer-events:none;animation: fadeInUp 2s ease-out forwards;}

.fan {width: 216px; height: 642px;position: absolute;bottom: 0;left: 50%;transform-origin: bottom center;opacity: 0;animation: fan-expand 1s ease-out forwards;}



}

@media screen and (max-width:767px){

  .Area_title .top_pd {position:absolute;width:90%;height:auto;top: 49vw;left: 39vw;z-index: 1;animation: fadeInUp 2s ease-out forwards;}
	.Area_title .top_pd .top_pd01 {position:absolute;width: 22%;top: 0vw;left: 0vw;z-index: 5;}
	.Area_title .top_pd .top_pd02 {position:absolute;width: 22%;top: 0vw;left: 0vw;z-index: 4;}
	.Area_title .top_pd .top_pd03 {position:absolute;width: 22%;top: 0vw;left: 0vw;z-index: 3;}
	.Area_title .top_pd .top_pd04 {position:absolute;width: 22%;top: 0vw;left: 0vw;z-index: 2;}
	.Area_title .top_pd .top_pd05 {position:absolute;width: 22%;top: 0vw;left: 0vw;z-index: 1;}
	.Area_title .top_pdtext {position:absolute;width: 100%;top: 0vw;left: 0vw;z-index: 7;pointer-events:none; animation: fadeInUp 2s ease-out forwards;}
  .Area_title .top_pdbg {position:absolute;width: 100%;top: 0vw;left: 0vw;z-index: 6;pointer-events:none;}
  .fan {width: 90%; ;height: 70vw;position: absolute;bottom: 0;left: 50%;transform-origin: bottom center;opacity: 0;animation: fan-expand 1s ease-out forwards;}


}	

/* 扇子角度設定 */
.fan1 { animation-delay: 0.5s; --angle: -30deg; }
.fan2 { animation-delay: 0.6s; --angle: -15deg; }
.fan3 { animation-delay: 0.7s; --angle: 0deg; }
.fan4 { animation-delay: 0.8s; --angle: 15deg; }
.fan5 { animation-delay: 0.9s; --angle: 30deg; }


/* 動畫效果：微幅擺動 */
@keyframes rotate-fan {
  0% {
    transform: rotate(var(--angle));
  }
  100% {
    transform: rotate(calc(var(--angle) + 5deg));
  }
}

@keyframes fan-expand {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(var(--angle));
    opacity: 1;
  }
}




/*主標入稿*/
@media screen and (min-width:768px){
	/*主標*/		
	.Area_title .subtitle {position:absolute;width: 960px;height:auto;top: 0px;left: 0px;z-index: 7;}
	
	/*副標輪播*/	
	.Area_title .titile02 {position:absolute;width: 960px;top: 0px;left: 0px;overflow: hidden;z-index:7;}
	.Area_title .titile02 .PD_layout ul {display:flex;}
	.Area_title .titile02 .PD_slide:hover{transform:none;}
	.Area_title .titile02 .swipwe_remove_box_style ul li {background-color:#fff0!important;}	

}

@media screen and (max-width:767px){
	/*主標*/	
	.Area_title .subtitle {position: absolute;top: 0vw;}

	/*副標輪播*/	
	.Area_title .titile02 {position:absolute;width: 100%;top: 0vw;left: 0vw;overflow: hidden;}
	.Area_title .titile02 .PD_layout ul {display:flex;}
	.Area_title .titile02 .swipwe_remove_box_style ul li {background-color:#fff0!important;}

}


/*活動倒數*/
.TimerNick {position: absolute;top: 990px;left: 260px;display: inline-block;z-index: 8;text-align: center;color:#ffc3de;}
.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:0vw;}
      .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font: bold 6vw/0vw Arial;}
      .TimerNick span {padding-left: 0;font: bold 4vw/6vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;/*letter-spacing: -0.05em;*/}
    }





/*區標(線上入稿)*/
.box_title { position: relative; /*z-index: 2;*/}
.box_title .inbox { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); width: 100%;}
.box_title .inbox ul { margin: 0 auto; padding: 0; list-style: none; box-sizing: border-box;}
.box_title .inbox li { margin: 0; padding: 0;}
.box_title h2 { position: relative; overflow: hidden; margin: 0.45em auto; height: 1.7em; color: #4a000e; font-family: Noto Sans CJK SC, "Microsoft JhengHei", Helvetica; font-weight: 600; box-sizing: border-box;}
  @media screen and (min-width:768px){
    .box_title .inbox { top: 30px;} /*修正偏移*/
    .box_title h2 { width: 46%; font-size: 45px; letter-spacing: 0.01em;}
  }
  @media screen and (max-width:767px){
    .box_title .inbox { top: 3vw;} /*修正偏移*/
    .box_title h2 { width: 62%; font-size: 5.2vw; letter-spacing: -0.025em;}
  }




/*攻略*/
@media screen and (min-width:768px){
	.Area_act {height: 100%;margin-bottom: 200px !important;}
	.Area_act .box{ height:auto;}
	.Area_act .layout_coupon ul {width:100% !important;margin: 0 auto !important;}
  .Area_act .PD_layout .PD_slide:hover {transform:translateY(-6px);}
  .Area_act .PD_layout .PD_slide:hover { box-shadow:unset;}

	/**區標**/	
	.Area_act .text {width: 960px;margin: auto;position: absolute;z-index: 9;left: 130px;}	
	.Area_act .box .PD_layout {width: 960px;margin:0 auto;}	
	.Area_act .box01  {width: 100%;}	
	.Area_act .box02  {width: 100%;padding-top: 45px;}	



}

@media screen and (max-width:767px){
	.Area_act .box{ background: url(mArea_act_bg.png?t=1755500566309)top center no-repeat; background-size:100%; height:auto;padding-bottom: 12vw}
	.Area_act .box00 .PD_layout[ data-pd-li="BN" ] ul {padding: 0;}	
	.Area_act .PD_layout {width: 100%;margin: auto;}

	/**區標**/
	.Area_act .text {width: 100%;position: absolute;z-index: 9;}		
	.Area_act .box01  {width: 100%;}	
	.Area_act .box02  {width: 100%;padding-top: 5vw;}	



}


/*主打品*/
.Area_item {}
  @media screen and (min-width: 768px){
    .Area_item { margin-bottom: 50px;}
    .Area_item .box_deco { position: absolute; top: 112px; right: 9.1%; width: 17.3%;}
    .Area_item .PD_layout ul { padding-top: 13px; grid-gap: 25px;}
    .Area_item .PD_item li:nth-child(4) .PD { transform: translateY(-10px);}
    .Area_item .PD_item li:nth-child(8) .PD { transform: translateY(10px);}
  }
  @media screen and (max-width: 767px){
    .Area_item { margin-bottom: 5vw;}
    .Area_item .box_deco { position: absolute; top: 11.7vw; right: 9.2%; width: 17.3%;}
    .Area_item .PD_layout ul { padding-top: 1vw; grid-gap: .6em;}
    .Area_item .PD_item li:nth-child(4) { transform: translateY(-1.2vw);}
    .Area_item .PD_item li:nth-child(8) { transform: translateY(1.2vw);}
  }




/*影片區*/
.Area_vedio { padding-bottom: 0px; margin-bottom: 0px;}
  @media screen and (max-width:767px){
    .Area_vedio {/* padding-bottom: 7vw; */margin-bottom: 6vw;}
  }
  /*影片*/
  .Area_vedio .box .videoArea { position: relative; margin: 0 auto; width: 875px; height: 492px; background-color: #07211a; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.5);margin-top: 1500px;}
  .Area_vedio .box .videoArea .youtubeArea iframe { position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
    @media screen and (max-width:767px){
      .Area_vedio .box .videoArea { width: 91.6%; height: 52vw; box-shadow: 0px 1vw 1.5vw 0px rgba(0, 0, 0, 0.4);margin-top: 150vw;}
    }



/*公版4品*/
.Area_PD { margin-bottom: 55px;}
  @media screen and (max-width:767px){
    .Area_PD { margin-bottom: 6vw;}
  }



/*旗艦館*/
@media screen and (min-width:768px){
  .Area_btnmore { margin: 0 auto 120px; padding-top: 30px;}
  .Area_btnmore .PD_layout ul { padding-left: 140px; padding-right: 140px; grid-gap: 0;}
}
@media screen and (max-width:767px){
  .Area_btnmore { margin: 8vw auto;}
  .Area_btnmore .PD_layout ul { padding-left: 9.3%; padding-right: 8.9%; grid-gap: 0;}
}

/*區塊底*/
@media screen and (min-width:768px){
	.Area_bottom {margin-bottom: 80px;}
	}
	@media screen and (max-width: 767px){
	.Area_bottom {margin-bottom: 5vw }
	}
		




/*分享浮層*/
.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%;}
	}


  /*黏人精*/
.Area_hammerAD { z-index: 9999; position: fixed; bottom: 0; right: 0;}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.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;}
.Area_hammerAD .Ahammer_text { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 90%; color: #000; font-family: "Century Gothic","Noto Sans CJK TC"; font-weight: 700;}
.Area_hammerAD .Ahammer_black .img_0, .Area_hammerAD .img_1 { filter: brightness(0%);}
.Area_hammerAD .Ahammer_black .img_1 { filter: none;}
.Area_hammerAD .Ahammer_black .Ahammer_text { color: #fff;}
@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) translate3d(0,200px,0);}
  .Area_hammerAD .closeButton a { top: 0; right: 0;}
  .Area_hammerAD .Ahammer_text { font-size: 2.3em; line-height: 1em; height: 1em; top: 40px;}
}
@media screen and (max-width:767px){
  .Area_hammerAD { display: block; width: 26%; transform: translate3d(0px, -215px, 0px) !important;}
  .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
  .Area_hammerAD .Ahammer_text { font-size: 1.5em; line-height: 1.5em; height: 1.5em; top: 3.6vw;}
}