@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;width:100%;min-width:1220px;text-align:left;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;background: #352319;}
.WRAPPER img { border:0px; vertical-align:top;width: 100%;height: 100%;}
.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 (max-width:767px){
		.WRAPPER { padding-bottom:30px; min-width: inherit; min-height:100vh; overflow: hidden;}
		.WRAPPER img {  width:100%;  height:100%;}
	}

  /*區塊_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;}

	}

/*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;}
	} 

/*背景*/
.petal{position: absolute;z-index: -1;}
@media screen and (min-width:768px){
    .bg_01 { z-index: -1; position:absolute; top:0; left:50%;transform: translateX(-50%); width:2000px; height:1250px; background: url(mo_top_curve_pc.png?t=1784267901610)no-repeat;background-size: cover;background-position: center;}
  .bg_02 { z-index: -1; position:absolute; bottom:0; left:0; width:100%; height:400px; background: url(area_bg_bt_pc.png?t=1784267901610) no-repeat;background-position: center bottom;background-size: contain;}
  .bg_deco02 { z-index: -1 ; position:absolute ; top: 1000px ; left: 0px; width:100%; height:80%; background-position:center top; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}
  .pc_repeat_bg { z-index: -2 ; position:absolute ; top: 0 ; left: 0 ; width:100%; height:100%; background-position:center top; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}
  .mo_top{z-index:-2; position:absolute ; top:-20px;left:50%;transform: translateX(-50%);width:2000px;height: 1300px;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
}
@media screen and (max-width: 767px){
  .bg_01 { z-index: -1; position:absolute; top:7vw; left:0; width:100%; height:117vw; background: url(mo_top_curve.png?t=1784267901610)no-repeat;background-size: cover;background-position: center;}
  .mo_top{z-index:-2; position:absolute ; top:9vw;left:0;width:100%;height: 116vw;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
}



/*版頭區*/
@media screen and (min-width:768px){
  .Area_title { height: 970px; }

  .Area_title .title_bg { 
    position:absolute ;         
width: 450px;
        left: 151px;
        top: 448px;
    z-index: 0 ; 
  }
  .Area_title .cate {
    position:absolute;
    width: 470px;
    top: 527px;
    left: 653px;
    z-index: 1;
  }
  .Area_title .pd-img {
    position:absolute;
    width: 480px;
    top: 491px;
    left: 179px;
    z-index: 3;
    filter: drop-shadow(-2px 2px 10px #00000080);
  }
  .Area_title .main {
    position:absolute;
    width: 442px;
    top: 139px;
    left: 222px;
    z-index: 1;
  }
  .Area_title .sub { 
    position: absolute ;         
    width: 396px;
        left: 182px;
        top: 452px;
        z-index: 4;
        .Area_swiper_box{
          padding: 0;
        }
  }

  .deco01 {
    position: absolute;
    top: -107px;
    left: 704px;
    width: 345px;
    z-index: 2;
  }
  .deco02 { 
    position: absolute; 
    top:320px;
    right: 160px;
    width: 350px;
    z-index: 2;
  }
  .deco03 { 
    position: absolute;
    width: 290px;
    top: 1px;
    left: -430px;
    z-index: 0;
  }
  .deco04 { 
    position: absolute;
    width: 290px;
    top: 0px;
    right: -430px;
    z-index: 0;
  }
  .deco05 { 
    position: absolute;
    width: 2000px;
    top: 86px;
    left: -457px;
    z-index: 0;
  }
  .deco06 { 
    position: absolute;
    width: 2000px;
    top: 420px;
    left: -384px;
    z-index: 0;
  }
}
@media screen and (max-width: 767px){
  .Area_title { height: 99vw ; }
  .Area_title .title_bg { 
    position:absolute ;         
            width: 47vw;
        top: 48vw;
        left: 5.6vw;
    z-index: 0 ; 
  }
  .Area_title .cate {
    position:absolute;
    width: 55vw;
    top: 50vw;
    left: 46vw;
    z-index: 1;
  }
  .Area_title .pd-img {
    position:absolute;
    width: 49vw;
    top: 51vw;
    left: 1vw;
    z-index: 3;
    filter: drop-shadow(-.5vw .5vw 1vw #00000080);
  }
  .Area_title .main {
    position:absolute;
    width: 55vw;
    top: 10vw;
    left: 10vw;
    z-index: 1;
  }
  .Area_title .sub { 
    position: absolute ;         
    left: 5.7vw;
        top: 48vw;
        width: 47vw;
    z-index: 4;
    .Area_swiper_box{
      padding: 0;
    }
  }

  .deco01 {
    position: absolute;
    top: -5vw;
    left: 64vw;
    width: 30vw;
    z-index: 2;
  }
  .deco02 { 
    position: absolute; 
    top: 36vw;
    right: -4vw;
    width: 38vw;
    z-index: 2;
  }
  .deco03 { 
    position: absolute;
    width: 29vw;
    top: -10vw;
    left: -6vw;
    z-index: 0;
  }
  .deco04 { 
    position: absolute;
    width: 35vw;
    top: -11vw;
    right: -5vw;
    z-index: 0;
  }
  .deco05 { 
    position: absolute;
    width: 100%;
    top: 24.7vw;
    left: 0;
    z-index: 0;
  }
  .deco06 { 
    position: absolute;
    width: 100%;
    top: 48vw;
    left: 0;
    z-index: 0;
  }
}

/* 活動 */
.Area_active{
  padding: 3vw 0;
  background: url(toppd_bg.png?t=1784267901610)no-repeat;
  background-size: cover;
  border-top: .6vw solid #ff8e8e;
  border-bottom: .6vw solid #ff8e8e;
  @media screen and (min-width:768px){
    padding: 20px 0;
    border: 1px solid #ff8e8e;
    background-size: 100% 100%;
  }
  .box_pd{
    display: flex;
    .box_title{
      width: 12%;
      @media screen and (min-width:768px){
        width: 10%;

      }
    }
    .box_title {
      margin-top: -5vw;
      margin-left: -2vw;
      @media screen and (min-width:768px){
        margin-top: -30px;
      margin-left: 4px;
      }
    }
    .layout_toppd{
      width: 88%;
      margin-bottom: 3vw;
      @media screen and (min-width:768px){
        width: 90%;
        margin-bottom: 20px;
      }
    }
  }

}

.box_title { margin-bottom: 20px; }
@media screen and (max-width:767px){
  .box_title {  margin-bottom: 2vw; }
}

.PD_layout.PD_layout-D1_02{
    background: none;
    padding: 0;
  ul{
    background: none;
    a{
      &:hover{
        .PD_into h4{
          color: #fff;
        }
      }
    }
    li{
      background: #fff;
      border-radius: 28px;
      border: none;
      @media screen and (max-width:767px){
        border-radius: 2vw;

      }
      .PD_into{
        position: relative;
        color: #212121;
        background: #ffdd8c;
        padding: 12px 0 28px;
        @media screen and (max-width:767px){
          padding: 3vw 0 4vw;
        }
        h3{
          margin: 0 auto;
          color: #fff;
          background: #b0832c;
          width: 90%;
          position: absolute;
          bottom: -20px;
          left: 50%;
          font-size: 1.5rem;
          transform: translateX(-50%);
          @media screen and (max-width:767px){
            font-size: 4vw;
            position: absolute;
            bottom: -5vw;
          }
        }
        h4 span{
          margin: 0 auto;
          width: 90%;
          font-size: 24px;
          display: -webkit-box;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow:hidden;
          font-size: 1.8rem;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          @media screen and (max-width:767px){
            font-size: 5vw;
          }
        }
      }
    }
  }
}
/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #ffc845;} 


/* 折價券 */
.PD_layout.PD_layout-coupon3 .PD{
  .Discount, .Dis_unit, .threshold { color: #fff; }
} 

/* 調整BN間距 */
.PD_layout[data-pd-li="BN"]{
  ul{
    gap: 2vw;
    @media screen and (min-width: 768px){
      gap: 20px;
    }
  }
}


/* 間距 */
.Area_bottom { margin-bottom: 80px; }
@media screen and (max-width:767px){
  .Area_bottom { margin-bottom: 7vw; }
}


.Area_hot{
  .box_title{
    padding: 0;
    margin: 0;
  }
  .box{
    background: url(area_hot_bg.jpg?t=1784267901610)no-repeat;
    background-size: cover;
    background-position: center;
    margin: -2vw auto;
    padding: 4% 2%;
    @media screen and (min-width:768px){
      margin: -32px auto;
    }
  }
}


/* 1帶2公版 */
.Area_brand{
  .box{
    display: flex;
    flex-direction: column;
    gap: 4vw;
    margin: 0 1% 4vw;
    @media screen and (min-width:768px){
      margin: 0 1% 28px;
      gap: 12px;
      flex-direction: row;
    }
    .box_item {
      /* width: 50%; */
      background: #ffc845;
      padding: 0 8px 8px;
      border-radius: 20px;
      .PD_layout-D3_02{
        padding: 12px 0;
        ul.PD_wrapper{
          .PD_into{
            gap: 2vw;
            @media screen and (min-width:768px){
              gap: 12px;
            }
            h3{
              width: auto;
              font-size: 6vw;
              color: #2a2a2a;
              @media screen and (min-width:768px){
                font-size: 34px;
              }
            }
          }
          .PD_logo{
            padding: .5% 2%;
          }
        }
      }
    }
  }
}

.area-bg{
  background: #7fdd78;
  position: relative;
  padding-bottom: .5vw;
  @media screen and (min-width:768px){
    padding-bottom: 8px;
  }
  &::before{
    content: "";
    position: absolute;
    top: -1vw;
    left: 0;
    display: block;
    width: 100%;
    height: 13vw;
    background: url(area_product_bg.jpg?t=1784267901610) no-repeat;
    background-size: contain;
    @media screen and (min-width:768px){
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 2000px;
      height: 140px;
      background: url(area_product_bg_pc.jpg?t=1784267901610) no-repeat;
      background-size: contain;
    }
  }
}

.Area_8pda{
  .box{
    margin: 0 auto;
    width: 96%;
  }
}

.Area_link{
  background: url(area_link_bg.png?t=1784267901610) no-repeat;
  background-size: contain;
  background-position: center;
  @media screen and (min-width: 768px){
    background: url(area_link_bg_pc.png?t=1784267901610) no-repeat;
  }
  .box{
    /* 調整BN間距 */
    .PD_layout[data-pd-li="BN"]{
      ul{
        width: 92%;
        gap: 8vw 7vw;
        padding: 7vw 0 0;
        @media screen and (min-width: 768px){
          width: 96%;
          gap: 52px 43px;
          padding: 39px 0 0;
        }
        img{
          width: 60%;
          @media screen and (min-width: 768px){
            width: 57%;
          }
        }
      }
    }
    
  }
}

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


/*注意事項區*/
.edm_notice{ text-align:center; padding:10px 10px 15px 10px; color:#fff ; font:12px/18px Helvetica;}
.edm_notice .apple_notice{  padding:10px 0px 10px 0px; }