@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: #fdd8af;}
.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:96%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}

	}


/*背景*/

@media screen and (min-width:768px){
    .bg_01 { z-index: -3; position:absolute; top:0; left:0; width:100%; height:100%; background: url(area_bg_pc.jpg?t=1783927473111)no-repeat;background-size: cover;position: fixed;background-position: center 10%;}
  .bg_02 { z-index: -1; position:absolute; bottom:0; left:0; width:100%; height:400px; background: url(area_bg_bt_pc.png?t=1783927473111) 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:0;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: -3; position:absolute; top:0; left:0; width:100%; height:100%; background: url(area_bg_mb.jpg?t=1783927473111)no-repeat;background-size: cover;position: fixed;background-position: center 10%;}
  .bg_02 { z-index: -1; position:absolute; bottom:0; left:0; width:100%; height:22vw; background: url(area_bg_bt.png?t=1783927473111) no-repeat;background-position: center bottom;background-size: contain;}
  .mo_top{z-index:-2; position:absolute ; top:9vw;left:0;width:100%;height: 22%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
  .m_repeat_bg { z-index: -1 ; position:absolute ; top: 0 ;left:0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;}
  .petal{width: 3vw;}
}



/*版頭區*/
  .Area_title {
    height: 110vw ; 
    @media screen and (min-width:768px){
      height: 1092px; 
    }
    .cate { 
      position:absolute ;        
      width: 35vw;
      top: 8vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1 ; 
      @media screen and (min-width:768px){
        width: 235px;
        top: 127px;
      }
    }
    .main { 
      position:absolute ;        
      width: 52vw;
      top: 16vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1 ; 
      @media screen and (min-width:768px){
        width: 458px;
        top: 181px;
      }
    }
    .sub { 
      position:absolute ;    
      top: 27vw;
      width: 47vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1 ; 
      @media screen and (min-width:768px){
        width: 380px;
        top: 278px;
      }
    }
    .pd-img { 
      position:absolute ;         
      width: 76vw;
      top: 40vw;
      left: 8vw;
      z-index: 3; 
      @media screen and (min-width:768px){
        width: 761px;
        top: 396px;
        left: 184px;
      }
    }
    .title_bg { 
      position:absolute ;         
      width: 40vw;
      top: 27.7vw;
      left: 30vw;
      z-index: 0 ; 
      @media screen and (min-width:768px){
        width: 335px;
        top: 283px;
        left: 440px;
      }
    }
  }


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


/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #fff1a3 ;} 


/* 折價券 */
.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_active{
  .box_grid ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    /* grid-template-rows: repeat(3, 1fr); */
    row-gap: 0rem;
    column-gap: .3rem;
    @media screen and (min-width:768px){
      row-gap: 0.4rem;
      column-gap: 0.5rem;
    }
    li{
      &:nth-child(1) {
        grid-row: span 3 / span 3;
      }

      &:nth-child(2) {
          grid-row: span 2 / span 2;
      }

      &:nth-child(3) {
          grid-row: span 2 / span 2;
      }

      &:nth-child(4) {
          grid-column: span 2 / span 2;
          grid-column-start: 2;
          grid-row-start: 3;
      }
    }
    &::after{
      content: none;
    }
  }
}

.Area_main{
  .box-item{
    position: relative;
    background: url(PD_layout-CSSBG_01.png?t=1783927473111) no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    margin-bottom: 4vw;
    padding: 0 0 3vw;
    @media screen and (min-width: 768px){
      margin-bottom: 40px;
      padding: 0 0 32px;
    }
    .box_youtube{
      position: relative;
      bottom: 2px;
      margin: 3vw auto 0;
      width: 90%;
      @media screen and (min-width: 768px){
        margin: 32px auto 0;
      }
    }
  }
  /* 作圖區 */
  .PD_layout.PD_layout-CSSBG_01[data-pd-li=PDBN]{
    ul{
      gap: 0;
      padding: 0;
      @media screen and (min-width: 768px){
      }
      li{
        position: relative;
        a{
          flex-direction: row-reverse;
          align-content: flex-end;
        }
        .PD_img{
          padding: 0;
          margin: 0;
          width: 45%;
          padding: 13vw 14vw 0 0;
          filter: drop-shadow(5px 6px 20px #af9a8370);
          @media screen and (min-width: 768px){
            width: 45%;
            margin: 0;
            padding: 150px 160px 0 0 ;
          }
        }
        .PD_into{
          width: 45%;
          margin: 0 auto;
          text-align: left;
          padding: 21vw 0 0 4vw;
          @media screen and (min-width: 768px){
            padding: 248px 0 0 40px;
          }
          .PD_logo{
            position: absolute;
            top: 0;
            left: 0;
          }
          h3{
            color: #212121;
            font-size: 3.7vw;
            @media screen and (min-width: 768px){
              font-size: 2.2rem;
            }
          }
          h4{
            color: #212121;
            font-size: 4vw;
            @media screen and (min-width: 768px){
              font-size: 1.8rem;
            }
          }
          p{
            color: #ff8c25;
            font-size: 3vw;
            @media screen and (min-width: 768px){
              font-size: 1.2rem;
            }
            .oPrice{
              color: #a8a8a8;
              font-size: 3vw;
              @media screen and (min-width: 768px){
                font-size: 1.5rem;
              }
            }
            .Price{
              color: #ff8c25;
              font-size: 5vw;
              @media screen and (min-width: 768px){
                font-size: 2.5rem;
              }
            }
          }
        }
      }
      li::after {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 47%;
        background-image: none;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center top;
      }
    }
  
  }
  
}


.area-bg{
  background: linear-gradient(180deg, #ffa827 0%,#ff8f2a 100%);
  position: relative;
  padding: 5vw 0;
  border-radius: 4vw;
  border-top: .5vw solid #fff;
  border-bottom: .5vw solid #fff;
  @media screen and (min-width:768px){
    padding: 68px 0;
    border-radius: 40px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }

}

.Area_product{
  .box_title{
    margin-bottom: 0;
  }
}

.Area_cate{
  width: 80%;
  @media screen and (min-width:768px){
    width: 800px;
  }
}

.Area_official{
  width: 80%;
  @media screen and (min-width:768px){
    width: 500px;
  }
}

/*隱鑶*/
.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:#212121; font:12px/18px Helvetica;}
.edm_notice .apple_notice{  padding:10px 0px 10px 0px; }