@charset "utf-8";

/*基本*/
body {margin: 0; padding:0; background: #f7f3ea!important; }

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

/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto; padding: 0; width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:inline-block;}
.WRAPPER .Area_top{position: relative; }
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
    @media screen and (max-width:767px){
      .WRAPPER { width: 100%; padding-bottom:0px; margin:0 auto; display: block; min-width:100%; background-repeat:repeat-y; background-size:100%;}
      .WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;}
    }
ul {margin: 0; padding: 0}
li { list-style: none;}


 .contral{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
 .contral2{display: flex; flex-wrap: wrap;  }

 @media screen and (min-width:767px){
 .warningTxt h3{color: #fff;}
 }

/*PC背景*/
@media screen and (min-width:767px){
  .Area_top .contral a{margin:35px 19px 0;}
  .Area_top .contral img{width:80px;}
  .pc_bg {  z-index:-1; pointer-events: none; position: absolute; margin: 0 auto; left: 50%;transform:translateX(-50%);}
  .pc_bgtop01{ z-index:-1; position:absolute; top:0;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:2960px; background-repeat:no-repeat; background-position:center top;  pointer-events: none;}
.toptitle{position: absolute ; margin: 0; width: 300px; height: 200px;}
.bg_all{position: absolute; width: 1220px;  top: 935px; background-color: #d0e6f3; height: 2000vh;z-index: -1;}
.AreaPD_bg {position: absolute; width: 1220px;}
/* PC背景 - 全視窗固定且完整呈現，含防呆底色 */
.pc_bottom { 
  z-index: -3; /* 確保在所有背景的最下層，不干擾上方主視覺與商品點擊 */
  position: fixed;
  top: 0; /* 歸零，從視窗最頂端開始抓取範圍 */
  left: 0; /* 歸零，配合 100vw 取代原本的 translateX 置中法 */
  right: 0; /* 取代 width: 100vw，避免滾動條出現時的水平晃動 */
  bottom: 0; /* 取代 height: 100vh，強制填滿上下左右 */

  
  /* 背景圖設定 */
  background-image: url(images/pc_bottom.jpg?t=1779414557137);
  background-repeat: no-repeat;
  background-position: center center; /* 讓你的設計圖永遠保持在螢幕正中央 */
  
  /* 核心防呆：完整呈現圖片 + 填補空白的底色 */
  background-size: cover; /* 保證整張圖片 100% 完整顯示，絕不裁切任何邊角 */
  background-color: #d0e6f3; /* 防呆底色：當視窗太寬或太長時，用這個顏色填滿剩下的螢幕空間 */
  
  pointer-events: none; /* 點擊穿透：避免這張全螢幕的圖擋住下方商品的超連結 */
}
} 

/*手機背景*/
@media screen and (max-width: 767px) {
  .m_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(images/m_07.jpg?t=1779414557137);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;
  }
}


/*我是CSS_momologo*/
.momologo { position:absolute; top:15px; left:-75px; z-index:999; }
    @media screen and (max-width:767px){
      .momologo {position:absolute; width: 25%; top: 2.5vw; left:4vw; }
    }
.flex{display: flex;justify-content: center;flex-wrap: wrap;}

  @media screen and (max-width:767px){
.Area_top .contral {position: absolute; z-index: 1;padding:0vw 5vw;}
.Area_top .contral a{margin: 3vw 3vw 0;}
.Area_top .contral img{width: 9vw;}
    }


/*版頭*/
.Area_top { position:relative; height:921px; }
.Area_top .toppd { position:absolute; top:358px; left:144px; }
.Area_top .main { position:absolute; top:0px; left: 0px;  }
.Area_top .light { position:absolute; top:31px; left:80px; width:267px;  }
.Area_top .link { position: absolute; bottom: -50px; right: 0px; display: flex; align-content: flex-start;}
.Area_top .link a { padding-right: 10px;}
.Area_top .link a img {width:243px;}

  @media screen and (max-width:767px){
  .Area_top { position:relative; height:99vw; width: 100%; }
  .Area_top  .main {position: absolute; top:4vw; left:0; width:100%; z-index: 1}
  .Area_top  .light {position: absolute; top:5vw; left:-4vw; width:50%; z-index: 1}
  .Area_top  .light img { width:50%;}
  .Area_top  .toppd {position: absolute; top:39vw; left: 7vw; width:91%; z-index: 1}
  .Area_top .link { bottom: 0%; right: 3%; width:94%}
  .Area_top .link a { padding-right:0%;}
  .Area_top .link a img {width:95%}  
 }


/*01-回饋%*/
@media screen and (min-width:767px){
.Area_act { position:relative; height:1200px; }
.Area_act .layout_bg { position: absolute; top:-70px; left: 0; z-index: -1;  pointer-events: none; }
.Area_act .act { position: relative; margin: 0 auto; padding-top: 200px;}
.Area_act .act img {padding-bottom: 25px;}
.Area_act .Area_danji.first {padding-top:150px;}
.Area_act .Area_danji.prize {padding-top:110px;}
  
 }
/* =========================================
   手機版 Area_act (絕對定位微調版 - 配合底圖位置)
   ========================================= */
@media screen and (max-width:767px){
  /* 1. 父層：必須鎖定高度比例，防止下方區塊往上撞 (防漏防護) */
  .Area_act { 
      position: relative; 
      /* 等於 m_03.jpg 底圖的比例 (高 ÷ 寬 × 100) */
      height: 180vw; 
      overflow: hidden; /* 防止定位元素不小心超出範圍造成畫面左右晃動 */
      padding: 0;
  }

  /* 2. 底圖：穩穩墊在最底層 */
  .Area_act > .for_m {
      position: absolute;
      top: 0; 
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
  }
  .Area_act > .for_m img {
      width: 100%;
      display: block;
  }

  /* =========================================
     🔥 以下 4 張圖的位置，請你直接修改 top(上)、left(左)、width(寬度) 的 vw 數值來對齊底圖
     ========================================= */

  /* 【圖1】 feedback.png (最殺攻略) */
  .Area_act .act { 
      position: absolute; 
      top: 24vw;   /* 🔻 控制上下位置 (數值越大越往下) */
      left: 5vw;   /* 🔻 控制左右位置 */
      width: 90%;  /* 🔻 控制圖片縮放大小 */
      margin: 0; 
  }
  .Area_act .act img { 
      width: 100%; 
      padding: 0; 
  }

  /* 【圖2】 danji1_mb_1.png (登記送區塊) */
  .Area_act .Area_danji.first {
      position: absolute; 
      top: 52vw;   /* 🔻 控制上下位置 */
      left: 5vw;   /* 🔻 控制左右位置 */
      width: 90%;  /* 🔻 控制圖片縮放大小 */
      margin: 0; 
      padding: 0; 
  }

  /* 滿額贈外框：設為滿版透明層，讓裡面的兩張圖可以各自獨立飛 */
  .contral_discount {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      margin: 0;
      pointer-events: none; /* 避免外框干擾使用者滑動或點擊 */
  }
  .contral_discount > div {
      position: absolute;
      pointer-events: auto; /* 恢復裡面 <a> 標籤的可點擊狀態 */
  }

  /* 【圖3】 discount_1.png (滿額贈 第一張) */
  .contral_discount > div:nth-child(1) {
      top: 106vw;  /* 🔻 控制上下位置 */
      left: 5vw;   /* 🔻 控制左右位置 */
      width: 90%;  /* 🔻 控制圖片縮放大小 */
  }

  /* 【圖4】 discount_2.png (滿額贈 第二張) */
  .contral_discount > div:nth-child(2) {
      top: 130vw;  /* 🔻 控制上下位置 */
      left: 5vw;   /* 🔻 控制左右位置 */
      width: 90%;  /* 🔻 控制圖片縮放大小 */
  }
}



 /* 將滿額贈兩張圖往上移動 */
.contral_discount {
    margin-top: 80px; /* PC版往上移動，數值可自行微調，越負越上面 */
    position: relative;
    z-index: 10; /* 確保往上疊加時不會被上面的圖層遮住 */
}

@media screen and (max-width:767px){
    .contral_discount {
        margin-top: -5vw; /* 手機版往上移動的比例 */
        /* 如果手機版需要改為絕對定位對齊，也可以在這裡改用 position: absolute; top: 120vw; 等方式 */
    }
}


/* =========================================
   Area_pd 主打品整合版 (共用圖、單欄排列、防重疊)
   ========================================= */
.Area_pd { 
    position: relative; 
    width: 100%;
    max-width: 1220px; 
    /* 強制撐開上間距，確保不會撞到上面的滿額贈區塊 */
    margin: 450px auto 200px; 
}

.Area_pd .title {
    text-align: center;
    margin-bottom: 50px;
}

.Area_pd .title img { 
    width: 100%;
    max-width: 650px; 
    height: auto; 
    display: inline-block;
}

/* 垂直排版：保證一個一排 */
.Area_pd .pd { 
    display: flex;
    flex-direction: column; 
    align-items: center;    
    gap: 50px; /* 控制商品間的垂直距離 */
}

.Area_pd .pd .go_bt {
    width: 100%; 
    max-width: 1000px; /* 避免 PC 螢幕太大導致圖片糊掉 */
}

.Area_pd .pd .go_bt a {
    display: block;
}

.Area_pd .pd .go_bt img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- RWD 手機版設定 --- */
@media screen and (max-width: 767px) {
    .Area_pd { 
        width: 100%; 
        /* 手機版依然保留 450px，若還是重疊，可視情況將此數值調大 */
        margin-top: -20vw; 
        margin-bottom: 20vw; 
    }
    .Area_pd .title {
        margin-bottom: 8vw;
    }
    .Area_pd .title img { 
        max-width: 65%;
    }
    .Area_pd .pd {
        gap: 8vw; /* 手機版商品間距感較寬鬆 */
    }
}


/*Area_layout4*/
.Area_layout4 { position:relative; margin-bottom: 80px; }
.Area_layout4 .title { }
.Area_layout4 .PD_layout ul { width: 94%;}
 @media screen and (max-width:767px){
 .Area_layout4 { position:relative;  margin-bottom: 10vw;}
 .Area_layout4  .layout_bg { position: absolute; top: 6vw; left: 0vw; z-index: -1;  pointer-events: none; }
 }


/*Area_layout8*/
.Area_layout8 { position:relative; margin-bottom: 80px; }
.Area_layout8 .title { }
.Area_layout8 .PD_layout ul { width: 94%;}
 @media screen and (max-width:767px){
 .Area_layout8 { position:relative; margin-bottom: 10vw; }
 .Area_layout8  .layout_bg { position: absolute; top: 6vw; left: 0vw; z-index: -1;  pointer-events: none; }
.Area_layout8 .PD_layout ul { width: 98%;}   
 }


/*Area_logo*/
.Area_logo { position:relative; margin-bottom: 80px; }
.Area_logo .logo {position: relative; margin: 0 auto; width: 960px;  display: flex; align-content: center; justify-content: center;  flex-wrap: wrap;   }
.Area_logo .logo a {margin: 2px;}
 @media screen and (max-width:767px){
 .Area_logo { position:relative; height: 34vw }
.Area_logo .logo {position: absolute; top: 18%; left: 0%;  margin: 0 auto; width: 100%;   }
.Area_logo .logo a { width:31%;  margin: 0.5%;}  
 }



/*滑過向下會亮*/  
.WRAPPER .go_bt ,.PD_wrapper li {
  -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_bt:hover ,.PD_wrapper li { 
   filter:brightness(108%);
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}
/*滑過會放大*/ 
.WRAPPER .go_bt2 {
  -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_bt2:hover {
  -webkit-transform:scale(.9);
     -moz-transform:scale(.9);
      -ms-transform:scale(.9);
       -o-transform:scale(.9);
          transform:scale(.9);}
/*滑過會亮*/  
.WRAPPER .go_bt3 {
  -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_bt3:hover { 
   filter:brightness(80%);
  /*-webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);*/
      }
  

/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;}