@charset "utf-8";

/*基本*/
body {margin: 0; padding:0; background: #9fcbe4; }

/*隱鑶*/
.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;}
a{width: 100%;height: 100%;}
/*滑過向下會亮*/	
.WRAPPER .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;}
.WRAPPER .go_bt:hover { 
   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(1.1);
     -moz-transform:scale(1.1);
      -ms-transform:scale(1.1);
       -o-transform:scale(1.1);
          transform:scale(1.1);}
/*滑過會亮*/	
.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(150%);
  /*-webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);*/
		  }

 .contral{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
 .contral2{display: flex; flex-wrap: wrap; 	}
 .warningTxt h3{color: #4f0000;}
/*PC背景*/
@media screen and (min-width:767px){
 
  .pc_bg {  z-index:-1;pointer-events: none;position: absolute; margin: 0 auto;left: 50%;transform:translateX(-50%);}

  .pc_bgtop01,.pc_bgtop02,.pc_bgtop03,.pc_bgtop04,.pc_bgtop05,.pc_bgtop06,.pc_bgtop07,.pc_bgtop08 { z-index:-1; position:absolute; top:0;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:1487px; background-repeat:no-repeat; background-position:center top; }
  .pc_bgtop02 {z-index: 2;}
  .pc_bgtopre { z-index:; position:relative; top:1166px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:20000px; background-repeat:repeat-y; background-position:center top; }
  .pc_bgtopre01 { z-index:-2; position:absolute; top:-20px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:2274px; background-repeat:no-repeat; background-position:center top; }
  .pc_bgtopre02 {
    z-index: -2;  
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1114px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
    transform: none !important;
   }
  .rota{z-index: -1; animation: rotate 5s infinite linear; position: absolute; top: 595px; left: 935px; }
  .pc_Area01_01{position: relative;width: 1220px;padding-bottom: 20px;}


} 

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; text-align:center;  }
.Area .box_bg{position:absolute;top:0;left: 0;z-index: 0;} 
.Area1220 { margin:0 auto; width:1220px;}

    @media screen and (max-width:767px){
		
      .pc_Area01_01{position: relative;width: 92vw;padding-bottom: 3vw; margin: 0 auto;}
      .Area .go_bt:hover { 
        -webkit-transform:none;
         -moz-transform:none;
          -ms-transform:none;
           -o-transform:none;
            transform:none;}
      .Area1220 { width:100%;}
      .Area img{ width:100%;}
      .Area { position: relative;}

 
    }


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



/*版頭*/
.Area_top { position:relative; width:1220px;height:802px; }
.Area_danji {position:relative; }
.swiper-container{width: 2000px;position: absolute;top: 0;left: 50%;transform:translateX(-50%)}
.Area_danji .contral{position:relative;}



.PD_wrapper h3 {background-color:#b84956 !important}
  @media screen and (max-width:767px){
  .swiper-container{width: 100vw;}
  .Area_top { position:relative; width:100%; height:62vw;}
  .Area_danji { width: 98vw; height:82vw;}
  .rota{z-index: 1; animation: rotate 5s infinite linear; position: absolute; top:62vw; left: 38vw; width: 20vw;}
  .rota01{z-index: 1;  position: absolute; top:67vw; left: 43vw; width: 11vw;}
  .Area_danji02{height: 58vw;}
  .pc_bgtopre01 { z-index:0; position:absolute; top:-3vw;  width: 150vw;height: 300vw;left: -10vw; }
 }

 @media screen and (min-width:767px){
  #glows{width: 2000px; height: auto; position: fixed; pointer-events: none; z-index: 0; overflow: hidden;  left: 0;}

  .Area_danji .danji_box ul li:nth-last-of-type(2) .content{top: 170px;}
  .Area_danji {position: relative;display:block; width:1220px; height:770px;top:0;}

  .Area01 {height:1560px}
  .Area02	{height:660px}
  .Area02	.contral {margin: -30px   0 0 80px;position:relative;display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
  .Area02	.contral div{margin:50px 0px 0; width: 50%;}
  .Area02	.contral div img{ width: 100%;}
  .Area03 .contral div img{ width: 100%;}
/* 1. 讓底圖強制退到最下層，當作背景 */
.Area03 .layout_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;          /* 負數圖層，墊在最底下 */
    pointer-events: none; /* 防止底圖的隱形範圍干擾使用者點擊商品 */
}

/* 2. 確保商品區塊能安全浮在底圖上方 */
.Area03 .contral {
    position: relative;
    z-index: 1;
    margin-top: 150px; 
    padding-top: 250px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.Area03 {position: relative;display:block; width:1220px; height:2500px;top:0; }
.Area03 .PD_layout{position: absolute;margin-top:160px; padding: 0   0px;}
.Area04 {position: relative;display:block; width:1220px; height:auto;top:0;}
.Area04 ul{ margin-top: -35px;  position: relative;}
.height{height: auto; min-height: 630px;}
.Area05 {position: relative;display:block; width:1220px; height:630px;top:0;}
.Area05 .flex {display: flex;flex-wrap: wrap;justify-content: center;}
.Area05 a {width: 23%;margin:0;}
.Area06 {position: relative;display:block; width:1220px; height:200px;top:0;}
.pc_Area04_bg{    position: absolute; margin: -40px 0 0 17px;}
.Area04_bg {pointer-events: none;position: relative;height: 180px;}
.Area05_bg {pointer-events: none;position: relative;height: 180px;}
.Area05_bottom{position: absolute; margin-left: -390px; margin-top: 200px;}
 }


 @media screen and (max-width:767px){
  #glows{width:100vw; height: 220vw; position: fixed; pointer-events: none; z-index: 1; overflow: hidden; }

  .mb_bg_re {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center top; 
  }



  /* 確保按鈕內的連結可以被點擊 */
  .contral.contral_discount a {
    pointer-events: auto;
  }

  /* 鎖定該區域內的所有圖片，強制縮小 */
  .contral.contral_discount img {
    width: 95% !important; 
    display: block;        /* 確保圖片正確置中 */
    margin: 0 auto;        /* 確保圖片在區塊內水平置中 */
    height: auto;          /* 確保圖片比例不會跑掉 */
  }

  /* 1. 讓底圖在手機版也能絕對定位，沉到最底層作為背景 */
  .Area03 .layout_bg {
    position: absolute;
    top: 8vw;
    left: 0;
    width: 100%;
    z-index: -1;          
    pointer-events: none; 
  }

  /* 2. 確保商品區塊能安全浮在底圖上方 */
  .Area03 .contral {
    position: relative;
    z-index: 1;
    /* 這裡的 padding-top 使用 vw 單位，商品避開底圖上方的標題 */
    padding-top: 25vw; 
  }

  .Area04_bg{width: 90vw;margin-left: 5vw;margin-bottom: 3vw;}
  .Area05_bg{width: 90vw;margin-left: 5vw;margin-bottom: 3vw;}

  .Area_danji.Area_danji1{position:relative;width: 98vw;  margin-top: 31vw;}
  .Area_danji.Area_danji2{position:absolute;width: 98vw;  margin-top: 66vw;}

	.m_btn  {position: relative; margin-top: -6vw; height: 30vw;}
  .Area_danji .cn{position:absolute;width: 98vw; height:40vw; margin-top: 31vw;}
  .Area_danji .cn2{position:absolute;width:98vw; height:40vw; margin-top:66vw;}
	 .Area02{ width: 95vw ;height:190vw }
	 .Area02 .contral div{ margin-bottom:2vw;}
   .danji_box{ padding: 0vw 2vw ; margin-top: 8vw !important }
	 .Area03 { 
    height: auto !important; 
    min-height: 171vw; 
    width: 98vw; 
    padding-bottom: 8vw; /* 底部多留一點緩衝空間，避免商品直接貼著 Area04 */
  }
	 .Area03 .PD_layout{ padding: 20vw 2vw ;}
	 .Area04{ height:auto; width: 98vw;}	
   .height{height: auto; min-height: 164vw;}
	 .Area04 .contral{ display: flex;flex-wrap: wrap}	
	 .Area04 .PD_layout{ padding: 2vw 2vw ;}
/* 1. 將高度設為 auto，讓它隨 4 行 Logo 的高度自動撐開，不再被切斷 */
  .Area05 { 
    height: auto !important; 
    width: 98vw; 
    margin: 0 auto;     /* 讓整個容器在螢幕中置中，左右自動產生 3% 的留白 */
    padding-bottom: 5vw; /* 改用 padding 確保底部不貼邊 */
  }

  /* 2. 保持 Logo 寬度，確保 flex-wrap 能自動換行 */
  .Area05 a { 
    width: 30vw; 
    margin: 1vw; 
  }

  /* 3. 調整 bottom 區域的間距 */
  .Area05_bottom { 
    position: relative; /* 建議改為 relative，讓它自然排在 Logo 下方 */
    width: 100%; 
    margin-top: 5vw; /* 讓它與最後一列 Logo 保持間距 */
  }
   .Area_swiper_box .cn{padding: 0 1vw;}
   .Area06 {height: 20vw;padding: 0 2vw;}
   .Area03 .contral div img{width: 100%;}
   .Area03 .contral div {padding-bottom: 3vw;}
 }






/*登記區塊*/
.Area_book {position: relative;display:block; width:1220px; height:1550px; margin:0 auto;top:0; padding:0; /*background:url(book_bg.png?t=1647260516199) top center no-repeat;*/}
@media screen and (max-width:767px){
 .Area_book  { width:100%; height:100%; margin-bottom: 0;}
  }


/*手機登記按鈕*/
.book_box {  position:relative; margin:0;}
.book_box a { display:block; width:100%; height:100%;}
.book_ a { display:block; width:100%; height:100%;}
.book_ .count { margin: 0;padding: 0 1vw; color:#fff ;text-align:center;border-radius: 4vw; font: bold 3vw/5vw "Century Gothic", Arial, "Microsoft JhengHei";}	

/*1品*/		
.book_01  a { display:block; width:100%; height:100%;}
.book_01 {position: absolute; width: 66vw; height: 20vw; top: 42vw; left: 0vw; }
.book_01 .count { position: absolute; width: fit-content; top: 66%; left: 3%; color: #ad5858;}
.post { position: absolute; width: 29vw; height: 9vw; top: 43vw; left: 68vw;}
.list { position: absolute; width: 29vw; height: 9vw; top: 52vw; left: 68vw;}

/*2品*/	
.book_box2 .book_01 { position:absolute;width:37.50%;  height: 100%;  top: 0vw;left:0vw; }
.book_box2 .book_01 .count { position: absolute; top: 87.5%; left:33%; color: #fff;}
.book_box2 .book_02 { position:absolute;width:34.38%;  height: 100%;  top:0;left:37%;  }
.book_box2 .book_02 .count {  position: absolute; top: 87.5%; left:25%; color: #fff;}
.book_box2 .post { position:absolute; width:28.13%;  height: 50%;  top: 0; left:71.4%;}
.book_box2 .list { position:absolute; width:28.13%;  height: 50%;  top: 50%;left:71.4%; }

/*3品*/	
.book_box3 .count{ position: absolute;   width:fit-content; padding: 0.2vw 3.5vw;  background: #c66f19; color:#FFF; border-radius: 4vw;  box-sizing: border-box;}
.book_box3 .book_01 { position:absolute;width:34.50%;  height: 75%;  top: 0vw;left:0vw; }
.book_box3 .book_01 .count { position: absolute; top: 88.5%; left:24%;}
.book_box3 .book_02 { position:absolute;width:31.0%;  height: 75%;  top:0;left:35%;  }
.book_box3 .book_02 .count {  position: absolute; top: 88.5%; left:14%;}
.book_box3 .book_03 { position:absolute;width:34.50%;  height: 75%;  top:0;left:66%;  }
.book_box3 .book_03 .count {  position: absolute; top: 88.5%; left:12%;}
.book_box3 .post { position:absolute; width:50%;  height: 25%;  top: 75%; left:0%;}
.book_box3 .list { position:absolute; width:50%;  height: 25%;  top: 75%; left:50%; }

/*4品*/	
.book_box4 .book_01 { position: absolute; width: 50%; height: 36%; top: 0; left: 0;}
.book_box4 .book_01 .count { position: absolute; top: 91.5%; left: 30%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .book_02 { position: absolute; width: 50%; height: 36%; top: 0; left: 50%;}
.book_box4 .book_02 .count {  position: absolute; top: 91.5%; left: 23%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .book_03 { position:absolute; width: 50%; height: 37.5%; top: 40%;left: 0;}
.book_box4 .book_03 .count {  position: absolute; top: 91.5%; left: 30%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .book_04 { position: absolute; width: 50%;  height: 37.5%; top: 40%; left: 50%;}
.book_box4 .book_04 .count {  position: absolute; top: 91.5%; left: 23%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .post { position: absolute; width: 50%; height: 20%; top: 81%; left: 0;}
.book_box4 .list { position: absolute; width: 503%; height: 20%; top: 81%; left: 50%;}


/*---------------登記區塊END------------------*/


  

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