@charset "utf-8";
/* CSS Document */
/* --------------------------------------
 * Layout.css
 * -------------------------------------- */

.articleList img.lazy_off { background-image: none!important;}
.WRAPPER { overflow: hidden; }

/*PC背景*/
	@media screen and (min-width:768px){
    .Area_bgtop_1 { z-index: -10; height: 100%; overflow: hidden;}
    .Area_bgtop_1 .bgtop_ {  }
    .Area_bgtop_1 .bgtop_ span { height: 100%;  }
    .Area_bgtop_1 .bgtop_1_2  { width:100%; height: 100%; }
    .Area_bgtop_1 .bgtop_1_2 span { background: #fd424f; background-position: top center; background-repeat: repeat-y;} 
    .Area_bgtop_3 { height: 100%; }
    .Area_bgtop_3 .bgtop_3_1  { width:100%; height:850px; top:0; overflow: hidden;}
    .Area_bgtop_3 .bgtop_3_1 span { background: url(hero_backdrop_deco-01.png?t=1761214239197) center top no-repeat;}
    .Area_bgtop_fixed { z-index: -5; position: fixed; }

   }
 

/*Phone背景*/
  @media screen and (max-width:767px){
    .m_Area_bgtop_1 { height: 100%;overflow: hidden; }
    .m_Area_bgtop_1 .m_bgtop_1_2  { width:100%; height:100%; top: 0px;}
    .m_Area_bgtop_1 .m_bgtop_1_2 span { background: url(hero_backdrop_deco-01_mb.png?t=1761214239197)center top no-repeat; background-size: contain;}	  
    .m_Area_bgtop_3 { height: 100%; }
    .m_Area_bgtop_3 .m_bgtop_3_1  { width:100%; height:100%; /*top:44px;*/}
    .m_Area_bgtop_3 .m_bgtop_3_1 span { background: #fd424f; background-position: top center; height: 100%; background-repeat: repeat-y;}
    .m_Area_bgtop_fixed { z-index: -10; position: relative; }
}
/*背景fixed擋到logo修正*/
    .Area_header_momologo {  z-index: 1;}

/*PC錨點調整*/
.fixarea_tabbar { width: 115px; }
.fixarea_tabbar a { letter-spacing: -0.02em; }
.fixarea_tabbar .fix_other li:before { left: 10%; width: 80%; }
.fixarea_tabbar .fix_other li i { left: -6px; }
/*MB錨點調整*/
.NavArea_tabbar { width: 100%; margin: 0 auto; }
.NavArea_tabbar .Nav_box { border-radius: 0; }    


/*版頭*/
.Area_top { }
    @media screen and (min-width:768px){
      .Area_top { height:436px; }
      .Area_top .box {  position: relative;}
      .Area_top .box .box_title-1 { position: absolute; z-index: 1; width: 860px; top: 110px; left: 172px;}
      .Area_top .box .box_title-1 p { font-size: 105px; font-weight: 900; font-family: Noto Sans TC, sans-serif; line-height: 1; letter-spacing: -0.065em; color: #0b0b0f; background: linear-gradient(to bottom, #ffffff, #fcf0d1); -webkit-background-clip: text;  margin-top: 30px;}
	  .Area_top .box .box_title-1 .bg { z-index: -1; position: absolute; top: -8px; left: -50px; }
	  .Area_top .box .box_title-1 .deco { position: absolute; top: 126px; right: 32px; animation: flower 6s linear infinite;}
      .Area_top .box .box_notice {position: absolute;top: 320px;left: 50%;transform: translateX(-50%);font-family: 'Noto Sans CJK';font-size: 1.4rem;font-weight: 600;line-height: 1;pointer-events: none; color: #fff; }
      .Area_top .box .box_momoco { position: absolute;  top: 152px; left: 1210px; }
      .Area_top .momologo { z-index:2; position: absolute;top: 15px; left:-2px;}
      .Area_top .momologo a { display:block; width:402px; height:40px; background: url(momo_logo.png?t=1761214239197) no-repeat;}  
    }

    @media screen and (max-width:767px){
      .Area_top { position: relative; width:100% ; height: 38vw ; top:0vw ; left:5vw ; }
      .Area_top .box .box_title-1 {position: absolute;z-index: 1;width: 100%;top: 3.8vw;left: 45%;transform: translateX(-50%);}
      .Area_top .box .box_title-1 p {font-size: 11vw;font-weight: 900;font-family: Noto Sans TC, sans-serif;line-height: 0.5;letter-spacing: -0.065em;color: #0b0b0f;background: linear-gradient(to bottom, #ffffff, #fcf0d1);-webkit-background-clip: text;margin-top: 30px;}
	  .Area_top .box .box_title-1 .bg {z-index: -1;position: absolute;top: 0;left: 0;}
	  .Area_top .box .box_title-1 .deco {position: absolute;width: 7.5%;top: 12.5vw;right: 8vw;animation: flower 6s linear infinite;}
      .Area_top .box .box_notice {position: absolute;width: 90%;top: 25vw;left: 45%;transform: translateX(-50%);font-family: 'Noto Sans CJK';font-size: 0.95rem;font-weight: 600;pointer-events: none; color: #fff; }
      .Area_top .box .box_kiwi { position: fixed;  top: 0vw; left: 0vw;}
      .Area_top .momologo { display:none;}  
    }



.Area_event .Area_card {position: relative;width: 100%;margin: 0 auto;/*display: inline-grid; grid-template-columns: repeat(2, auto); grid-gap: 1.5em;*/}
.Area_event .danji-pd-container{ background: #fff; border-radius: 1.2em; }
.Area_event .danji-pd-head { padding-block: .4rem;color: #000; font-size: 2.2rem; background: #f0f562; border-radius: 0.5em 0.5em 0 0;  }
.Area_event .event_card1 { width: 80%; margin: 1.5% auto; }
.Area_event .event_card1 .pd-info {display: flex;align-items: center;}
.Area_event .event_card1 .Area_card .pd-info {flex-direction: column;align-items: center;width: 95%;}
.Area_event .event_card1 .one_card { border-bottom: 1px solid #fd424f; }
.Area_event .event_card1 .Area_card .event_card2 { width: 49%; display: inline-grid; margin: 0; }
.Area_event .event_card1 .Area_card .event_card2 { border-right: 1px solid #fd424f; border-radius: 0; background-color: transparent; }
.Area_event .event_card1 .Area_card .event_card2 .danji-pd-body { display: flex; flex-direction: column; align-items: center; }
.Area_event .event_card1 .Area_card .event_card2:last-of-type { border-right: none; }
.Area_event .event_card2 { display: inline-block; margin: 1% 0.5%; width: 39%; }
.Area_event .event_card1 .pd-info-brand {width: 50%;color: #252529;font-size: 2.5rem;text-align: left;letter-spacing: -0.05em;line-height: 1;padding: 0;margin: 0;}
.Area_event .event_card1 .pd-img {width: 33%;padding: 0.5%;}
.Area_event .event_card1 .pd-img img { width: 80%; }
.Area_event .event_card2 .pd-img img { width: 67%; }
.Area_event .event_card2 .pd-info-brand {  width: 100%; text-align: center; color: #252529; font-size: 2.5rem; letter-spacing: -0.05em; line-height: 1; padding: 0; margin: 0; }
.Area_event .event_card2 .pd-img { width: 100%; }
.Area_event .event_card1 .pd-info-brand p { font-size: 2rem; font-weight: 800; line-height: 1.5; padding: 0; margin: 0.1em 0 0 0; }
.Area_event .event_card2 .pd-info-brand p { font-size: 2rem; font-weight: 800; line-height: 1; padding: 0; margin: 0.2em 0 0 0; }
.Area_event .event_card1 .pd-info-brand b { font-size: 2rem; line-height: 1.5 }
.Area_event .event_card2 .pd-info-brand b { font-size: 2rem; }
.Area_event .pd-info-amount { font-size: 1.25rem; color: #555960; letter-spacing: -0.02em; }
.Area_event .event_card1 .gobtn {width: 12%;color: #fff;font-size: 1.1em;margin: 0 1.2%;padding: 0 1%;line-height: 1.6;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em;letter-spacing: 0.05em;}
.Area_event .event_card2 .gobtn {width: 22%;color: #fff;font-size: 1.1em;padding: 0 3%;margin: 2% auto;line-height: 1.6;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em;letter-spacing: 0.05em;}
/*
.Area_event .event_card1 .gobtn { position: absolute;top: 50%;right: 2%;width: 5.5em;color: #fff;font-size: 0.6em;line-height: 1.6;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em;letter-spacing: 0.05em;}
.Area_event .event_card2 .gobtn { position: relative; margin: 2% auto; width: 5.5em; color: #fff; font-size: 1.5em; line-height: 1.6; text-align: center; font-weight: 700; font-family: "Century Gothic"; background-color: #fd424f; border-radius: 20em; letter-spacing: 0.05em; }
*/
.Area_event .areatitle {width: 80%;margin: 2% auto ;font-size: 2.5em;font-weight: 600;line-height: 1.8;background: #0b0b0f;border-radius: 2em;}
@media screen and (max-width:767px){
	.Area_event .danji-pd-container{ border-radius: 0.8em; }
	.Area_event .danji-pd-head { padding-block: .4rem;color: #000; font-size: 1.15rem; background: #f0f562; border-radius: 0.5em 0.5em 0 0;  }
	.Area_event .event_card1 {width: 97%;margin: 1.5% auto 3%;}
	.Area_event .event_card1 .pd-info { display: flex; align-items: center; }
	.Area_event .event_card2 { display: inline-block; margin: 1.5% 0.5%; width: 47%; }
	.Area_event .event_card1 .pd-info-brand {width: 50%;color: #252529;font-size: inherit;text-align: left;letter-spacing: -0.05em;line-height: 1.5;padding: 0;margin: 0;}
	.Area_event .event_card1 .pd-img { width: 30%; /*padding: 1.5%;*/ }
	.Area_event .event_card1 .pd-img img { width: 80%; }
	.Area_event .event_card2 .pd-img img { width: 75%; }
	.Area_event .event_card2 .pd-info-brand {width: 100%;text-align: center;color: #252529;font-size: inherit;letter-spacing: -0.05em;line-height: 1.5;padding: 4% 0 0 0;margin: 0;}
	.Area_event .event_card2 .pd-img {margin: 0 auto;width: 83%;}
	.Area_event .event_card1 .pd-info-brand p {font-size: 1.15rem;line-height: 1.3;padding: 0;margin: 0;}
	.Area_event .event_card2 .pd-info-brand p {font-size: 1.15rem;line-height: 1;padding: 0;margin: 0;}
	.Area_event .event_card1 .pd-info-brand b {font-size: 1.15rem;line-height: 1;}
	.Area_event .event_card2 .pd-info-brand b {font-size: 1rem;line-height: 1;}
	.Area_event .pd-info-amount {font-size: 0.9rem;line-height: 1;color: #555960;letter-spacing: -0.05em;}
	.Area_event .event_card1 .gobtn { width:19%; color: #fff;font-size: 0.75em;line-height: 1.5;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em; }
	.Area_event .event_card2 .gobtn { width:38%; color: #fff;font-size: 0.75em;line-height: 1.5;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em; }
	
/*
	.Area_event .event_card1 .gobtn { position: absolute;top: 50%;right: 2%;width: 5.5em;color: #fff;font-size: 0.75em;line-height: 1.6;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em;}
	.Area_event .event_card2 .gobtn { position: relative;margin: 5% auto;width: 5.5em;color: #fff;font-size: 0.75em;line-height: 1.6;text-align: center;font-weight: 700;font-family: "Century Gothic";background-color: #fd424f;border-radius: 20em;}
*/
	.Area_event .areatitle { width: 97%; font-size: 1.2em;  margin: 0 auto 3%; }
	}








/*浮層樣式--特殊版--關閉btn*/
.blackBox .special_ .box h3 span.close{ z-index: 2; top: 1.5em; right: 1em; width: 2em; height: 2em; border-radius:50%; border: none; background: #000; } 
.blackBox .special_ .box h3 span.close a {  position: relative; display: inline-block; color:#FFF;}
.blackBox .special_ .box h3 span.close a:before,
.blackBox .special_ .box h3 span.close a:after{ content: ''; z-index: 0; position: absolute; top:14px; width: 22px; height: 3px; background: #FFF; border-radius: 2px; cursor: pointer;}
.blackBox .special_ .box h3 span.close a:before{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform: rotate(45deg); right:5px;}
.blackBox .special_ .box h3 span.close a:after{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform: rotate(-45deg); right:5px;}

/*浮層樣式--特殊版--內容*/
.special_ .box { padding-bottom: 2%;}
.special_ .box h3 { display: flex;  text-align: left; color:#FFF; background-color: transparent; background-repeat: no-repeat; background-position: left center; background-size: 100%; }
.special_ .box h3 .logo { display: flex; flex: auto 0 0;}
.special_ .box .txtArea { margin: 0 auto; padding: 3%; width: 96%; border-radius: 10px; background-color: #fff;}
.special_ .box .txtArea h4 { position: relative; height: auto; width: 106%; left: -3%;}
.special_ .box .txtArea ol { margin: 0; padding: 0 1em 0 2em; text-align: justify;}
.special_ .box .txtArea ol ol { padding: 0;; padding-left: 1em;}
.special_ .box .txtArea li { margin: 0 auto 0.5em; }
    @media screen and (min-width:768px){
      .special_ .box h3 { height:150px; line-height: 150px; font-size: 50px;}
      .special_ .box h3 .logo { margin: 30px 20px 30px 30px;}
      .special_ .box h3 img { padding: 0px 0; width: auto; height: 90px;}
      .special_ .box .txtArea h4 { margin: -15px 0 0 0;}
      .special_ .box .txtArea li { font-size:20px; }
    }
    @media screen and (max-width:767px){
      .special_ .box h3 { height:5rem; line-height:5rem; font-size: 7vw;  line-height: 5rem; }
      .special_ .box h3 .logo { margin: 1rem;}
      .special_ .box h3 img { padding:0; width: auto; height: 2.8rem;}
      .special_ .box .txtArea h4 { margin: -2% 0 0% 0; }
      .special_ .box .txtArea li { font-size:4vw; }
    }
    /*改列表樣式*/
    .special_ .box .txtArea ol { list-style: cjk-ideographic;}
    .special_ .box .txtArea ol li ol { list-style: decimal;}


/*兌獎浮層*/
.blackBox_IT .agreeArea.special_ { top: auto !important;}
.agreeArea .box_gift { display: flex; justify-content: center; align-items: center; margin: 3% auto; width: 100%; text-align: center; font-size: 0;}
.agreeArea .box_gift img { width: 100%; height: auto;}
.agreeArea .box_gift .btn_barcode { position: relative; margin: 0 auto; margin-right: 4%; width: 42%;}
.agreeArea .box_gift .btn_gift { position: relative; margin: 0 auto; width: 65%;}
.agreeArea .box_gift .btn_gift a { position: relative; display: block; margin: 0; padding: 1.2rem 0 1rem; border-radius: 50px; font-size: 35px; line-height: 1.6rem; color: #FFF; font-weight: 800; background-color: #5359A0; text-align: center;}
.agreeArea .box_gift .btn_gift a:hover { filter: brightness(110%);}
.agreeArea .box_gift .btn_gift a small { display: block; margin-top: 8px; font-size: 15px; line-height: 1; font-weight: 300;}
.agreeArea .box_gift .btn_gift a.off { background: #6E6E6E; }
.agreeArea .box_gift .btn_gift p { margin: 0; padding: 0; text-align: center; color: #999999; font-size: 15px; line-height: 2; font-weight: 300;}
    @media screen and (max-width:767px){
      .agreeArea .box_gift .btn_gift a { padding: 10px 0 10px; border-radius: 50px; font-size: 24px; }
      .agreeArea .box_gift .btn_gift a small { bottom: 0; margin-top: 4px; font-size: 10px;}
      .agreeArea .box_gift .btn_gift p { font-size: 10px; }
    } 
    /*狀態設定*/
    .agreeArea .box_gift .btn_gift a.off { display: none;}
    .agreeArea .box_gift .btn_gift.cate_off a.on { display: none;}
    .agreeArea .box_gift .btn_gift.cate_off a.off { display: block;}

/*查詢紀錄浮層*/
.agreeArea .box .table3 th { background-color: #fff;}
.agreeArea .box .agree_table { overflow-x: hidden; overflow-y: auto; max-height: 70vh; }
.agreeArea .box .agree_table td { vertical-align: middle;}
.agreeArea .box .agree_table .btn_view { padding: 0.2em 1em; border-radius: 30px; color: #FFF; background: #ff2175; text-decoration: none;}