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

/*基本*/
body{ margin:0; padding:0; }


/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden;background-color:#2529ad; width:100%; min-width:1220px; text-align:left; font-family:"Century Gothic","微軟正黑體","Microsoft JhengHei",Helvetica; }
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:30px; min-width: inherit; min-height:100vh; overflow: hidden;}
		.WRAPPER img {  width:100%;  height:auto;}
	}

/*區塊_all*/
.Area2000 {margin:0 auto;width:2000px;height: 0; }
.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; }
.Areaa {position:relative;display:block;} 
.Area .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;}
.Area .go_bt:hover { filter: brightness(100%);
  -webkit-transform:translateY(-6px);
     -moz-transform:translateY(-6px);
      -ms-transform:translateY(-6px);
       -o-transform:translateY(-6px);
          transform:translateY(-6px);}
.Area_bottom { margin-bottom: 60px;}

 @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;}
  .m96 { width: 96%; margin: 0 auto; }
  .Area_bottom { margin-bottom: 6vw;} 
}




/*momologo*/
.Area_top {}
.Area_top .momologo {z-index:99;position: absolute;top:0;left:-32%;}
.Area_top .momologo a {display:block;width:2000px;height:134px;background: url(momo_logo.png?t=1755854047230) no-repeat;background-size: 100%; }
.Area_top .momologo a:hover{ background: url(momo_logo_ON.png?t=1755854047230) no-repeat;}
 @media screen and (max-width:767px){
    .Area_top .momologo { top: 0.5vw;left: 1vw;width: 20%;}
    .Area_top .momologo a {width: 100%;height: 12vw;}
 }
 

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



/*PC背景*/
.bg_01 { z-index:-48; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-47; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_03 { z-index:-47; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_04 { z-index:-47; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_06 { z-index:-47; position:absolute; top:951px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}

    @media screen and (max-width: 767px){
    .bg_01 {z-index: -48;position:absolute;top: 11.5vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center top;pointer-events:none;background-size:100%;}
    .bg_02 {z-index: -47;position:absolute;top: 11.5vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center top;pointer-events:none;background-size:100%;}
    .bg_03 {z-index: -47;position:absolute;top: 11.5vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center top;pointer-events:none;background-size:100%;}
    }


/*共用設定*/
.PD_layout li:hover { box-shadow: none!important; }
.PD_layout[data-pd-li=BN] ul, .PD_layout[data-pd-li=BN-AWD] ul, .PD_layout[data-pd-li=PDBN] ul {
  padding: 0;
}

/* 統一調整 */
.title ul.PD_wrapper li img { width: 100%; }


/* 公版調整 */
.PD_layout[data-pd-h3="5"] .PD h3 span { background-color: rgba(0%,0%,0%,0); color: #4a373c; }
.PD_layout a { color:#4a373c ; }
.PD_layout .PD p { color: #d62672; }
/* 關閉主標hover */
.hero .PD_layout[data-pd-li*="BN"] li:hover { box-shadow: none; filter: brightness(100%);}
.hero .sub .PD_layout ul { background-color: transparent; padding: 0 0 25px 0; }
.hero .sub .PD_layout ul li { border-top:transparent; border-right:transparent;  }

@media screen and (max-width: 767px){
  .hero .sub .PD_layout .PD_img { padding: 0; }
  .hero .PD_layout .PD p .Price { font-size: 24px; }
  }
  


/** 暖身倒數 **/
.TimerNick {z-index:1;position: absolute;left: 463px;top: 764px;display:inline-block;height:51px;text-align:center; font-family:  "Century Gothic","Arial","Noto Sans TC","微軟正黑體","Microsoft JhengHei";}
.TimerNick .reciprocal {z-index: -1;position: absolute;top: -42px;left: 1px;}	
.TimerNick .FontStyle {display:inline-block;margin: 0 6px;padding:0;border:0px;font:bold 25px/20px Arial; font-weight: 600; color: #404040;letter-spacing:-1px;text-align:right;background:transparent;}
.TimerNick span {padding-left:2px; font-size:21px; font-weight: 600;letter-spacing: -0.05em;color: #404040;}
.TimerNick span.come {  color: #2529ad; font-weight: 800; }
 @media screen and (max-width:767px){
  .TimerNick  { z-index: 10; height: 8vw; top: 62vw; left: 26.5vw;}
  .TimerNick .reciprocal { width: 100%; top: -3vw; left: 0vw;}	
  .TimerNick .FontStyle {margin: 1vw;padding:0;border:0px;width: 3.8vw;font: bold 4vw/3.8vw "Arial"; font-weight: 300; letter-spacing:0.02em;text-align: left;background:transparent;}
  .TimerNick span {padding-left:0;font: bold 4vw/3.8vw "微軟正黑體", Arial;letter-spacing: -0.05em;}
 }



/*版頭區:標題(線上入搞)*/
@media screen and (min-width:768px){
.Area_title .layout_title{z-index: 2;position: absolute;width: 55%;height: 340px;top: 315px;left: 265px;}
}
@media screen and (max-width: 767px){
.Area_title .layout_title{z-index: 10;position: absolute;top: 32vw;width: 75%;height: 21vw;left: 11vw;}
}



/*01-搶先購*/
.Area01 { }
.Area01 .box { margin: 45px 0 0 0;  }
.Area01 .box::before { content: ""; display: block; z-index: -1; position: absolute; top: 45px; background: #e7e7f0; border-radius: 35px; background-size: 100%; width: 960px; height: 740px;  }
.Area01 .box .btn { position: relative; top: -5px; left: -379px; }
.Area01 .coupon img { width: 96%; }
  @media screen and (max-width:767px){
	.Area01 {  }
  .Area01 .box { margin: 6vw 0 0 0; }
  .Area01 .box::before {   top: 5vw; left: 0;  border-radius: 5vw; background-size: 100%; width: 100%; height: 76.5vw; }
  .Area01 .box .btn {  top: 0; left: 0; width: 26%; margin: 1vw 0 ; }
  .Area01 .coupon img { width: 96%; }
  }


/*02-限時爆殺*/
.Area02 .box { margin: 0 4%; }
@media screen and (max-width:767px){
  .Area02 .box { margin: 0 2%; }
}

/* 03*/
.Area03 .box .PD_layout { margin: 0 0 3% 0; }
.Area03 .Area_swiper_box .PD_layout li { background: rgba(0,0,0,0); }



/* 05*/
.Area05 .box { overflow: hidden;}

/* 07登記*/
.Area07 {}
.Area07 .danji1 ul li .btn_reg {  border-radius: 35px; overflow: hidden;   }
.Area07 .danji1 ul li .btn_reg::before { content: "9/1限定解鎖"; display: block; background-color: rgba(0%,0%,0%,0.68); width: 960px; height: 236px; position: absolute; top: 0; left: 0;  border-radius: 35px; z-index: 99; color:#FFF; font-family: "Century Gothic","Arial","Noto Sans TC","微軟正黑體","Microsoft JhengHei"; font-size: 45px; font-weight: 800; line-height: 5; }
.Area_danji .danji_box ul li .activityText .gifts span { color: #2529ad;}
@media screen and (max-width:767px){
  .Area07 .danji1 ul li .btn_reg {  border-radius: 3.5vw;    }
  .Area07 .danji1 ul li .btn_reg::before {   width: 100%; height: 23.5vw;  top: 0; left: 0;  border-radius: 3.5vw; font-size: 5.5vw;  line-height: 4.5; }
}


/* 06*/
.Area06 .box { margin: 95px 0; }
.Area06 .box::before { content: ""; display: block; z-index: -1; position: absolute; top: -33px; background: #fdb93e; border-radius: 35px; background-size: 100%; width: 1220px; height: 634px;  }
.Area06 .PD_layout { padding: 0 2%; }
@media screen and (max-width:767px){
  .Area06 .box { margin: 11vw 0; }
  .Area06 .box::before {  top: -4.5vw;  border-radius: 5vw; background-size: 100%; width: 100%; height: 169.5vw; }
}
/** 倒數 **/
.Area06 .TimerNick { z-index:0; position: relative; top: 0; left: 0; display:inline-block; padding-right:14px; height:55px;text-align:right;}
.Area06 .TimerNick .FontStyle { display:inline-block; margin:0px 0 0 0 ; padding:0; border:0px; width:60px; font: bold 35px/38px Century Gothic; color:#404040; /*text-shadow:1px 1px 0px #fff;*/ letter-spacing:-1px; text-align:right; background:transparent; }
.Area06 .TimerNick div:nth-of-type(2),
.Area06 .TimerNick div:nth-of-type(3) { width:60px;}
.Area06 .TimerNick span { padding-left:2px; font: bold 16px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #404040;}
    @media screen and (max-width:767px){
      .Area06 .TimerNick { z-index:2;  top:0vw; left:-2.5vw; display:inline-block; margin:0; padding-right:0%; width:85%; height:0vw; padding-bottom:10%; overflow:hidden; text-align:center;  /*background:url(m_time_bg.png?t=1755854047231) no-repeat center top; */background-size:100%;}
      .Area06 .TimerNick .FontStyle { display:inline-block; margin:0px 0 0 0 ; padding:0; border:0px; width:14vw; font: bold 6.5vw/9vw Century Gothic; color:#404040; /*text-shadow:1px 1px 0px #fff;*/ letter-spacing:-1px; text-align:right; background:transparent;}
      .Area06 .TimerNick div:nth-of-type(2),
      .Area06 .TimerNick div:nth-of-type(3) { width:9vw;}
      .Area06 .TimerNick span { padding-left:1vw; font: bold 4vw/9vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #404040;}
    }




/* 公版區 */
.Area12 .title {  background: url(Area08_title.png?t=1755854047231) center center no-repeat; height: 95px;   }
.Area12 .box { background: #93dde4; border-radius: 35px; padding: 20px 0 25px 0; }
.Area12 .title  { margin: 30px auto 15px auto; }
.Area12 .PD_title  { position: absolute; top: -5px; left: 226px; font-size: 58px; font-family: "Century Gothic","Arial","Noto Sans TC","微軟正黑體","Microsoft JhengHei"; }
.Area12 .PD_title span { float: left; }
.Area12 .PD_title span:nth-child(1) { color: #404040; font-weight: 800; }
.Area12 .PD_title #js-PD_val_1::after { content: "｜";}
.Area12 .PD_title span:nth-child(2) { color: #2529ad; font-weight: 600; }
.Area12 .PD_layout { padding: 8px 25px; }
.Area12 .PD_layout li {  }
.PD_layout[data-pd-direction=row] .PD_img { width: 30%; }
.PD_layout[data-pd-direction=row-reverse] .PD_img { width: 30%; }

@media screen and (max-width:767px){
  .Area12 .title {  background-size: 100%; height: 9vw; margin: 0 0 2vw 0;  }
  .Area12 .box { ; border-radius: 5.5vw; padding: 6vw 0 2vw 0; }
  .Area12 .PD_layout { padding: 1.2vw 2.5%; }
  .Area12 .PD_title  {  top: -1.2vw; left: 23vw; font-size: 6vw; }
  .PD_layout[data-pd-direction=row] .PD_img { width: 50%; }
  .PD_layout[data-pd-direction=row-reverse] .PD_img { width: 50%; }
}



/*黏人精*/
.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: 300px; 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;}
}



	  
/*分享浮層*/
.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;}
.floatBoximg {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 .closeButtona {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_btna {display:block;margin:3% 0;}
.floatBox .box_btnimg {width:100%;}


.floatBox .box_btn .btn {margin:0 auto;width:60%;}
.floatBox .box_btn2a {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%;}
 }