@charset "utf-8";
/* CSS Document */
/* --------------------------------------
 * Layout.css
 * -------------------------------------- */
/*.articleList img.lazy_off { background-image: none!important;}*/

/*分會場選單*/
.cantantBase1 { display: none !important;}
.cantantBase2 { display: block;}

/*  @media screen and (max-width:767px){
	  .Area_boxstyle > .Area_boxstyle_box{ padding: 10vw 2vw 4vw; }
}*/

.Area_demo {position: fixed; top: 50%;left: 50%; transform: translate(-50%,-50%); width: 1220px; z-index: -5;}

.WRAPPER { overflow: hidden;  }
.WRAPPER a { text-decoration: none; -webkit-tap-highlight-color: transparent;}
.bg { pointer-events: none;} 
img { flex-shrink: 0; color: transparent;} 

.Area_logo { display: none!important;}

.Area_top .lazy { opacity: 0!important; } 
.Area_top .lazy[data-was-processed="true"] { opacity: 1!important;} 
.Area_acty .lazy { opacity: 0!important; } 
.Area_acty .lazy[data-was-processed="true"] { opacity: 1!important;} 
.Area_bgtop.lazy { opacity: 0!important;} 
.Area_bgtop.lazy[data-was-processed="true"] { opacity: 1!important; transition: opacity 0.3s; transition-timing-function: ease-out;} 



/*區標葉子*/
.title_leaf{ position: absolute; top: -2vw; right: 0; width: 12vw; } 
.title_leaf2{ position: absolute; top: -14vw; left: 0; width: 12vw; } 
.pc_leaf{ position: absolute; top: -52px; left: -390px; width: 2000px; }
.title_leaf img, .title_leaf2 img, .pc_leaf img{ width: 100%; }





/*PC背景*/
	@media screen and (min-width:768px){
		
	.WRAPPER {/*  background: url(pc_water.jpg?t=1763965502879) scroll repeat-y top / 100%; */background-color: #fff6e2; }
		
    .Area_bgtop_1 { height: 100%; overflow: hidden;}
    .Area_bgtop_1 .bgtop_ span { height: 100%; }
        
        
    .Area_bgtop_1 .bgtop_1_0 span { background-image: url(bgtop_1_0.png?t=1763965502879); background-position: top center; background-repeat: no-repeat;}   
/*    .Area_bgtop_1 .bgtop_1_1 span { background-image: url(bgtop_1_1.png?t=1763965502879); background-position: top center; background-repeat: no-repeat;}  */


/*
    .Area_bgtop_2 { height: 100%; overflow: hidden;}
    .Area_bgtop_2 .bgtop_ span { height: 100%; }  
        
    .Area_bgtop_2 .bgtop_2_1 span { background-image: url(bgtop_2_1.png?t=1763965502879); background-position: top center; background-repeat: no-repeat;} 
    .Area_bgtop_2 .bgtop_2_2 span { background-image: url(bgtop_2_2.png?t=1763965502879); background-position: top center; background-repeat: no-repeat;} 
        
        
    .Area_bgtop_3 { height: 100%; overflow: hidden;}
    .Area_bgtop_3 .bgtop_ span { height: 100%; }  
        
    .Area_bgtop_3 .bgtop_3_1 span { background-image: url(bgtop_3_1.png?t=1763965502879); background-position: top center; background-repeat: no-repeat;}  
        
        
    .Area_bgtop_2 .bgtop_2_1  { width:100%; height: 650px; top: 0; opacity: 1;}
    .Area_bgtop_2 .bgtop_2_1 span { background: url(bgtop_2_1.png?t=1763965502879); background-position: top center; background-repeat: no-repeat;}  
        
        
*/
        

    .Area_bgtop_fixed { position: fixed; }

   }

/*Phone背景*/
  @media screen and (max-width:767px){
	  
	 .WRAPPER { /* background: url(m_water.jpg?t=1763965502879) scroll repeat-y top / 100%;*/background-color: #fff6e2;  } 

    /* .m_Area_bgtop .m_bgtop_ span { position:absolute; display: block; width:100%; height:0; padding-bottom:200%; background-position:center top; background-size:100%; background-repeat: no-repeat;} */
    .m_Area_bgtop_1 .m_bgtop_ span { position: absolute; display: block; width: 100%;}
      
    .m_Area_bgtop_1 .m_bgtop_1_0 span { background-image: url(m_bgtop_1_0.png?t=1763965502879); background-repeat: no-repeat; background-position: top center;} 
/*    .m_Area_bgtop_1 .m_bgtop_1_1 span { background-image: url(m_bgtop_1_1.png?t=1763965502879); background-repeat: no-repeat; background-position: top center;}*/

/*
      
    .m_Area_bgtop_2 .m_bgtop_2_1 span { background-image: url(m_bgtop_2_1.png?t=1763965502879); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_2 .m_bgtop_2_2 span { background-image: url(m_bgtop_2_2.png?t=1763965502879); background-repeat: no-repeat; background-position: top center;}
      
    .m_Area_bgtop_3 .m_bgtop_3_1 span { background-image: url(m_bgtop_3_1.png?t=1763965502879); background-repeat: no-repeat; background-position: top center;}
      
    .m_Area_bgtop_4 .m_bgtop_4_0 { width: 100%;  padding-bottom: 0; height: 34vw; position: absolute; bottom: -9.5vw; top:initial  } 
    .m_Area_bgtop_4 .m_bgtop_4_0 span { background-image: url(m_bgtop_4_0.png?t=1763965502879); background-repeat: no-repeat; background-position: top center; padding-bottom: 0; height: 100%}
*/

      
    .m_Area_bgtop_fixed { z-index: -80; position: fixed; }
      
    /*背景fixed擋到logo修正*/
    .Area_header_momologo {  z-index: 1;}
  }



/*版頭*/
.Area_top {}
    @media screen  and (min-width:768px){
      .Area_top .momo_logo { z-index: 10; position: absolute; top:15px; left: 0;} 
      .Area_top {height: 390px;}
      .Area_top .box { position: relative; }
      .Area_top .box_title { opacity: 0;}
	.hero-title--sub {  width: 960px; position: absolute; top: 259px; left: 141px;   z-index: 2;  overflow: hidden;}

}
    @-webkit-keyframes skew-play{
      from{ transform: skewX(0deg);}
      to{ transform: skewX(-10deg);}
    }
    @keyframes skew-play{
      from{ -webkit-transform: skewX(0deg);transform: skewX(0deg);}
      to{ -webkit-transform: skewX(-10deg);transform: skewX(-10deg);}
    }

    @media screen and (max-width:767px){
      .Area_top {width:100%;height: 43vw;}
      .Area_top .box_title { opacity: 0; } 
	.hero-title--sub {  width:100%; position: absolute; top:27.4vw; left: 0;   z-index: 2;  overflow: hidden;}

    }












/** 倒數 **/
    .TimerNick {position:absolute; top: 77px; left:0px;/* transform:translateX(-50%) scale(.8);*/ transform: scale(.8); font-weight: 800;}
    .TimerNick { text-shadow: none;}
    .TimerNick .TIMER { margin:0 auto;padding:0;overflow:hidden;text-align: center;color: #cdf5ff; font: 28px/44px "Century Gothic","微軟正黑體","Microsoft JhengHei", Arial, Helvetica; }    
    .TimerNick .icon { position:relative; top:11px; margin:0 10px; filter:none; width:44px; height: 22px;}
    .TimerNick .icon img{ height:100%;}
    .TimerNick small { position:relative; top: 3px; font-size:22px;}
    .TimerNick .time_day { font-size:26px; letter-spacing:0.05rem; font-weight: 800; }
    .TimerNick .FontStyle { position:relative; padding: 0 2px 0 2px;font-size:32px;line-height: 44px; text-align:center; color: #cdf5ff;}
    .TimerNick .FontStyle b { display:inline-block; font-weight:500; font-family: Century Gothic;}
        @media screen and (max-width:767px){
          .TimerNick { left:50%; position: absolute; top:73.5vw; width: 100%;text-align: center; transform:translateX(-50%) scale(.8)}
          .TimerNick .TIMER::after {margin: 0 1vw; float: none; }          
          .TimerNick .TIMER::before {margin: 0 1vw; float: none; }          
          .TimerNick .TIMER {font-size: 4vw; line-height: 5.5vw; color: #fff;}
          .TimerNick .icon { position: relative;float: none; margin: 0; display: inline-block; top:.8vw; width: 8vw; height: 4vw;}
          .TimerNick small { margin: 0 0.2vw; top: inherit; font-size: 3vw; float: none;}
          .TimerNick .time_day { position:relative; font-size: 4.6vw; letter-spacing:0; float: none; padding:0; margin: 0;}
          .TimerNick .FontStyle { padding: 0 0.3% 0 0; font-size: 5vw; float: none; color: #fff;}
          .TimerNick .FontStyle b { margin:0;width: 2.7vw;font-family:Helvetica;}
        }





/* --------------------------------------
  * page 公版微調
* -------------------------------------- */
/*空檔補間距*/
.Area_Space{margin-bottom: 80px}
	@media screen and (max-width:767px){
    .Area_Space{margin-bottom: 24px}
  }



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

/*公版壓標*/
/*
.icon_hot .PD_img::after{content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 0; padding-bottom: 100%; background-repeat: no-repeat; background-size: 100%; pointer-events: none; border-radius: 1em;}
.icon_hot0 .PD_img::after{ background-image: url(icon_hot0.png?t=1763965502879);}
.icon_hot1 .PD_img::after{ background-image: url(icon_hot1.png?t=1763965502879);}
.icon_hot2 .PD_img::after{ background-image: url(icon_hot2.png?t=1763965502879);}
.icon_hot3 .PD_img::after{ background-image: url(icon_hot3.png?t=1763965502879);}
.icon_hot4 .PD_img::after{ background-image: url(icon_hot4.png?t=1763965502879);}
.icon_hot5 .PD_img::after{ background-image: url(icon_hot5.png?t=1763965502879);}
*/

@media screen and (max-width:767px){
  .icon_hot .PD_img::after{ border-radius: 0.5em;}
}



/* --------------------------------------
 * page 輪播微調
 * -------------------------------------- */
/*輪播調整*/

    .Area_boxstyle_button.swiper-button-next.is-showhover1::before, 
    .Area_boxstyle_button.swiper-button-prev.is-showhover1::before { opacity: 0.5; z-index: -1 }

    @media screen and (min-width: 768px){
      .Area_boxstyle_button.swiper-button-next.is-showhover1 { right: 20px }  
      .Area_boxstyle_button.swiper-button-prev.is-showhover1 { left:  20px }
    }


    @media screen and (min-width: 768px){
      .PD_layout .PD_slide:hover { -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);}
      .PD_layout .PD_slide:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.4);}
    }
    @media screen and (max-width:767px){
      .PD_layout {margin: 0 auto;}
      .PD_layout .PD_slide:hover { box-shadow:none;}
    }

    @media screen and (min-width:768px){
      .Area_swiper { margin: 0 auto;} /*輪播區左右寬度*/
      .Area_menu .Area_swiper { margin: 10px 30px;}/*輪播區左右寬度*/
      .Area_coupon1 .Area_swiper { margin: 10px 30px;} 
      .Area_swiper .Area_swiper_box { overflow: hidden;}/*輪播區左右寬度*/
      .Area_swiper img { width: 100%; height: auto;}
    }
    @media screen and (max-width:767px){
      .Area_swiper { margin: 0; padding: 0 5%; } /*輪播區左右寬度*/
      .Area_coupon1 .Area_swiper { padding: 0;} 
   }






/* --------------------------------------
 * page 頁面
 * -------------------------------------- */
   @media screen and (min-width: 768px){
      .PD_layout[data-pd-col-pc="1"] ul,
      .PD_layout[data-pd-col-pc="2"] ul,
      .PD_layout[data-pd-col-pc="4"] ul, 
      .PD_layout[data-pd-col-pc="5"] ul,
      .PD_layout[data-pd-col-pc="6"] ul {padding-left: 50px;padding-right: 50px;}
      .PD_layout[data-pd-col-pc="3"] ul { padding-left: 35px;  padding-right: 35px; }

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

  }



.Area_bg { position: absolute; }
.Area_bg img{ width: 100%; height: 100%;}

@media screen and (min-width:768px){
	.Area_bg { width: 2000px; height: 107%; }
	.Area01_bg{ top: 38px; left: -390px; }
}
@media screen and (max-width:767px){
	.Area_bg { width: 100%; height: 92%; }
	.Area01_bg{ top: 3vw; left: 0; }
}




  @media screen and (min-width: 768px){
	  .AreaPD{ margin-top: 160px; }
}
  @media screen and (max-width:767px){
	  .AreaPD{ margin-top: 12vw; }
}




/*APP限定*/
/*forPhone*/
.boxPhone {  z-index: 4; position: relative; /*top: 0vw; left:0vw; width:99%;*/ }
.boxPhone .mbGOapp {position: absolute; top:66vw; left: 0.5vw;}
.boxPhone .mbGOapp div { display: inline-block; width: 32%;}
.boxPhone .mbGOapp div img { width: 100%;}
.dowloaded { z-index: 5; position: relative; margin: 0 auto; padding: 1.75em 0; width: 96%; background:linear-gradient(340deg, #f65e75 0%, #f65d7f 35%, #f354c3, #ed52ce 65%, #b051cd); border-radius: 0.8em; margin-top: 3vw; margin-bottom: -40vw;}
.dowloaded h3 {  margin: 0; padding: 0; color:#fff; line-height: 1.3; margin-bottom: 0.5em; font-size: 5.2vw;  }
.dowloaded .btn { margin: 0 auto; background-color:#9c26c1; padding: 1.5vw; border-radius: 99em; width: 45%; font-size: 5vw;}
.dowloaded .btn a {  display: block; color: #fff; font-weight: bolder;}
  @media screen and (min-width:768px){
	  .boxPhone  {display: none}
	  .dowloaded {display: none}
    #for_browser .Area00 { margin-top: 36px;}
    }


/*幸運大輪盤*/
.Area_rotator .box_{  }
.Area_rotator .PDgift{ margin: 54px auto 0; width: 725px; }
.Area_rotator .PDgift img{ width: 100%; }
.Area_rotator .my-3{color: #fff;}
@media screen and (max-width: 767px) {
.Area_rotator .PDgift{ margin-top: 5vw; width: 100%; }
.Area_rotator .my-3{ margin-bottom: 1vw; color: #fff;}
}



.Area_rotator .box1_title { margin: 0 auto;}
.Area_rotator .btn_list { position: relative;}
.Area_rotator .btn_list a.btn1 { position: relative; display: inline-block; margin: 0px 15px; }
.Area_rotator .btn_list a.btn2 { position: relative; display: inline-block; margin: 0px 15px; }
.Area_rotator a { transition: all 0.2s ease 0s; }
.Area_rotator a:hover { transform: translateY(5px); }
.Area_rotator .topbn { position: relative; display: block; margin: -30px auto -15px; padding: 0px;width: 988px; height: auto; overflow: hidden;}
.Area_rotator .topbn .roBottom { padding-top: 0px; z-index: 10; bottom: 0px;}
.Area_rotator .topbn .roBody { position: relative; z-index: 2; }
.Area_rotator .topbn .roCenter { position: absolute; z-index: 4; top: 35.88%; left: 34.5%; width: 307px;}
.Area_rotator .topbn .roResult { display: none; position: absolute; z-index: 5; top: 28px; left: 70px; }
.Area_rotator .roMain{ width: 900px; margin: 30px auto 40px; }
.Area_rotator .roMain img { /*width: 100%; */}
.Area_rotator .deco_01 { position: absolute; top: 0px; left: -390px; pointer-events: none;}
.Area_rotator .decoBG { position: absolute; left: 0; top: 438px;}
.Area_rotator .box_list { text-align: left;padding-inline: 5%;padding: 5% 5% 0% 5%;}
  @media screen and (max-width: 767px) {
    .Area_rotator { width: 100%; height: auto; margin: 0 auto ; padding: 0;}
    .Area_rotator .box1_title { margin: 0px auto; }
    .Area_rotator .box1_title:nth-child(2) img { width: 90%; }
    .Area_rotator .box .txt { position: relative; top: 24vw; height: 16vw; }
    .Area_rotator .box .txt p { height: 16vw; left: 0px; font-size: 4.3vw; line-height: 6vw; letter-spacing: 0px;}
    .Area_rotator .btn_list { position: relative; }
    .Area_rotator .btn_list a.btn1 { width: 42%; height: auto; margin: 0px 1.5% 0px 1.2%;}
    .Area_rotator .btn_list a.btn2 { width: 42%; height: auto; margin: 0px 1.5% 0px 1.2%;}
    .Area_rotator a:hover { transform: none; }
    .Area_rotator .topbn { position: relative; display: block; margin: -2vw auto 0; padding: 0; width: 102%; margin-left: -1.2%;}
    .Area_rotator .topbn .roMain { position: relative; z-index: 1;  width: 100%;  margin: 0 auto;}
    .Area_rotator .topbn .roBody { }
    .Area_rotator .topbn .roCenter {  position: absolute; z-index: 4;  top: 33.88%; left: 38.5%; width: 24%;}
    .Area_rotator .topbn .roResult { display: none; position: absolute; z-index: 5; top: 1vw; left: 7%; right: 0px; width: 86%;}
    .Area_rotator .img_rotate { width: 100%; }
    .Area_rotator .bg { position: absolute; top: 0px; left: 0px; width: 100%; }
    .Area_rotator .box_list { text-align: left;padding-inline: 5%;padding: 5% 5% 8% 5%;}
.Area_rotator .Area_boxstyle_box {background:linear-gradient(340deg, #f65e75 0%, #f65d7f 35%, #f354c3, #ed52ce 65%, #b051cd);width:100%;padding:3vw 0 5vw}	  
  }

.title img{width:100%}



  @media screen and (max-width:767px){
.title_set{margin-bottom: 1vw}	  
.title_set2{}	  
.Area_grid_3bn_Phone{margin-top:6vw;}	  
}


/*轉轉轉*/
.rotate-play { -webkit-animation:rotate-play 10s linear infinite ;
    animation:rotate-play 10s linear infinite ;}
@keyframes rotate-play {
100% { 
transform: rotate(360deg);
}
}
/*轉轉轉*/
.rotate-play-quick { -webkit-animation:rotate-play 1s linear infinite ;
    animation:rotate-play 1s linear infinite ;}
@keyframes rotate-play {
100% { 
transform: rotate(360deg);
}
}



@media screen and (min-width: 768px) {
    .message-6 {
        font-size: 2.5rem;
        line-height: 150%;
    }
	.my-3 {
        margin-top: 1.5rem;
        margin-bottom: 1.35rem;
    }
}


@media screen and (max-width: 767px) {
        .message-6 {
        font-size: 1.25rem;
        line-height: 150%;
    }
	    .my-3 {
        margin-top: .825rem;
        margin-bottom: .825rem;
    }
}


/*註解*/
.Area_GameStyle .notice { font-size: 14px; margin: 1em auto 0; padding: .9em 1em; border-radius: 0.45em; text-align: left; box-sizing: border-box; width: 90%;}
.Area_GameStyle .notice { color: #fff; font-size: 1.75rem;}
.Area_GameStyle .notice ul { margin: 0; }
.Area_GameStyle .notice ul li { margin-bottom: 0.4em;     list-style: none;  text-align: center;}
  @media screen and (max-width:767px){
    .Area_GameStyle .notice { font-size:3.5vw; width: 95%; padding: .8em .5em; margin-bottom: 3vw;}
    .Area_GameStyle .notice ul { padding-left: 1.5em;}
    .Area_GameStyle .notice ul li { margin-bottom: 0.25em;}
  }


@media screen and (min-width: 768px) {
	
	.ze{ position: absolute;  top: 16px; left: 72px;  font-size: 38px!important; }
}

  @media screen and (max-width:767px){
	  .Area_PD1{ margin:9vw 0 17vw }
	  .ze{ position: absolute;  top: 2vw; left: 7.5vw;  font-size: 4vw!important; }

}



  /* 強制覆蓋 */
  @media screen and (max-width:767px){   
    .NavArea_tabbar { margin: -3vw auto 12vw; width: 94%;}
  }  
 


  /* 缺品補圖 */
  @media screen and (min-width: 768px){
    .Area_coupon .PD_wrapper::after  {
      display: none;
      position: absolute;
      bottom: 0;
      right: 46px;
      background-size: contain;
      background-repeat: no-repeat;
      width: 222px;
      height: 399px;
      background-image: url(cart.png?t=1763965502879);
      z-index: -1;  
    }
  }  
  @media screen and (max-width:767px){   
    .Area_coupon .PD_wrapper::after {
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      background-size: contain;
      background-repeat: no-repeat;
      width: calc(100%/2);
      height: 80vw;
      background-image: url(m_cart.png?t=1763965502879);
      z-index: -1;  
    }
  }  

  @media screen and (min-width:768px){
.Areabg{background:linear-gradient(340deg, #f65e75 0%, #f65d7f 35%, #f354c3, #ed52ce 65%, #b051cd);padding:2% 3%;border-radius: 25px;}	 	  
}

  @media screen and (max-width:767px){
.Areabg{background:linear-gradient(340deg, #f65e75 0%, #f65d7f 35%, #f354c3, #ed52ce 65%, #b051cd);width:95%;padding:2% 3%;border-radius:3vw;}	 
} 

  @media screen and (min-width:768px){
.PD_layout.Area_grid ul{background-color:#fff0;grid-gap: 15px;}
.PD_layout.Area_grid ul li{border: none; border-radius:10px;overflow: hidden;}	  
}

  @media screen and (max-width:767px){
.PD_layout.Area_grid ul{background-color:#fff0;grid-gap:2vw;}
.PD_layout.Area_grid ul li{border: none; border-radius:2vw;overflow: hidden;}		  
}


/* 日期入稿格 隱藏 */
.AreaNew #js-PD_val_1 { display: none; }
/* 區塊過期會影響布局順序，所以布局間距不使用 margin，使用 gap */
.AreaNew .PD_wrapper { gap: 10px }
.AreaNew .PD_wrapper li { margin: 0; }
.AreaNew .PD_wrapper:after { display: none; }


/*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; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
	@media screen and (max-width:767px){
		.momologo { display:none;}
	}