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

/* 全頁顏色 */
:root{
  /* 頁面背景 */
  --body-bg:#B22423;

  /* 版頭背景 */
  --top-bg:#B22423;

  /* 登記贈品文案 */
  --danji-text:#B22423;

  /* 暢銷區背景 */
  --sale-bg:#CABFB4;

  /* 公版區看更多按鈕底色 */
  --more-btn:#F3EEE6;

  /* 公版區看更多文字顏色 */
  --more-btn-text:#000000;
}

/*基本*/
body{margin:0;padding:0;background: var(--body-bg);}

/*全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:"Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; }
.WRAPPER img { width:100%;  height:auto;border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit; min-height:100vh; overflow: hidden; }
		.WRAPPER img {  width:100%;  height:auto;}
	}

/*區塊_all*/
.Area { position: relative; margin: 0 auto; padding: 0; border-radius: 0; text-align: center; z-index: 5;}
.Area a { 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);}
.Area1220 { margin: 0 auto; width: 1220px;}
.Area960 { margin: 0 auto; width: 960px;}
@media screen and (max-width:767px){
  .Area .go_bt:hover {  
    -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;}

  .Area1220 { width: 100%;}
  .Area960 { width: 96%;}
  /*區塊_切割*/
  .Area_1bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn a { float: left; margin: 0 0 2% 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn a { float: left; margin: 0 1% 2%; padding: 0; width: 48%; list-style: none;}
  .Area_3bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn a { float: left; margin: 0 1% 2% ; padding: 0; width: 31.3%; list-style: none;}
  .Area_1bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn_nopadding a { float: left; margin: 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn_nopadding a { float: left; margin: 0; padding: 0; width: 50%; list-style: none;}
  .Area_3bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn_nopadding a { float: left; margin: 0; padding: 0; width: 33.3%; list-style: none;}
}

.Area_top{
  background: var(--top-bg);
  .top-title{
    margin: 0 auto;
    width: 100%;
    @media screen and (min-width: 768px){
      width: 60%;
    }
    .PD_layout[data-pd-li="BN"]{
      a{
        pointer-events: none;
      }
      li:hover{
        filter: none;
      }
    }
  }
}

.Area_bonus{
  .PD_layout[data-pd-li="BN"]{
    a{
      pointer-events: none;
    }
  }
}

.Area_sale{
  width: 100%;
  @media screen and (min-width: 768px){
    width: 960px;
  }
  .box-row{
    background: var(--sale-bg);
    padding: 2vw;
    display: flex;
    gap: 2vw;
      @media screen and (min-width: 768px){
        padding: 20px;
        gap: 20px;
      }
    .box-item{
      position: relative;
      &:nth-child(1){
        width: 47%;
        z-index: 10;
        @media screen and (min-width: 768px){
          width: 63%;
        }
      }
      &:nth-child(2){
        width: 53%;
        z-index: 20;
        @media screen and (min-width: 768px){
          width: 37%;
        }
      }
      .PD_layout[data-pd-li="BN"]{
        ul{
          gap: 1.5vw;
          @media screen and (min-width: 768px){
            gap: 12px;
          }
        }
      }
    }
  }
}

/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: var(--danji-text);}    

/* 看更多按鈕 */
.PD_layout.PD_layout-btn li .PD h3{background: var(--more-btn);color: var(--more-btn-text);}

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


/* 圖片區標 */
.box_title{
    margin-bottom: 3vw;
    @media screen and (min-width: 768px){
      margin-bottom: 40px;
    }
    a{
      pointer-events: none;

    }
}


/* 區塊間距 */
.Area_bottom{
  margin-bottom: 6vw;
  @media screen and (min-width: 768px){
    margin-bottom: 60px;
  }
}


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