@charset "utf-8";

/*基本*/
body {margin: 0; padding:0; background-color: #f1edea; }

/*隱鑶*/
.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{display: block;}
/*滑過向下會亮*/	
.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; 	}

/*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_bg00 ,.pc_bgtop01,.pc_bgtop02,.pc_bgtop02-2,.pc_bgtop03-1,.pc_bgtop03-2,.pc_bgtop04,.pc_bgtop06,.pc_bgtop07 {pointer-events: none; z-index:-1; position:absolute; top:0;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height: 1135px; background-repeat:no-repeat; background-position:center top; }
  .pc_bgtop03 {pointer-events: none; z-index:-1; position:absolute; top:480px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height: 515px; background-repeat:no-repeat; background-position:center top; }
  .pc_bgtop05,.pc_bgtop05-1 {pointer-events: none; z-index:-1; position:absolute; top:0px;  margin: 0 ;left: 51.5%;transform:translateX(-50%);width:2000px; height: 620px; background-repeat:no-repeat; background-position:center top; }


  .pc_Area01{pointer-events: none; z-index:0; position:absolute; top:2000px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height: 2298px; background-repeat:no-repeat; background-position:center top; overflow: hidden;}
  .pc_Area01_bg{pointer-events: none; z-index:0; position:absolute; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height: 2298px; background-repeat:no-repeat; background-position:center top; }
  .pc_Area02_bg01{pointer-events: none; z-index:0; position:relative; top:1110px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height: 10000px; background-repeat:repeat-y; background-position:center top; }

  .pc_bgtop08 { z-index:-1; position:absolute; top:911px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:20011px; background-repeat:no-repeat; background-position:center top; }
  .pc_bg_re { z-index:1; position:relative; top:0;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:20000px; background-repeat:repeat-y; background-position:center top; }
  .pc_bg { z-index:0; position:absolute; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:25400px; background-repeat:repeat-y; background-position:center top; }
   .pc_all_bg { position:absolute; z-index:-1; left: 50%;transform:translateX(-50%);margin-top: 911px}

} 

    @media screen and (max-width:767px){
    .mb_bg {  z-index:-1;pointer-events: none; background-repeat:repeat-y; height: auto; background-size: 100%;}
    .mb_bg img{ width: 100%;}
    }


/*區塊_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){
      .m_bg_re { z-index:1; position:absolute; top:0;  margin: 0 ;width:100%; height:20000px; background-repeat:repeat-y; background-position:center top;pointer-events: none; }
      .m_Area03_bg_00 ,.m_Area03_bg_01 ,.m_Area03_bg_02 ,.m_Area03_bg_03 {  z-index:-3; position:fixed; top:0px;  margin: 0 ;width: 100%; height:1000vw; background-repeat:no-repeat; background-position:center top;background-size: 100%; }
 
     
      .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; }
    }
    .PD_layout[data-fs-bn-phone*="true"] li:first-child .PD_logo, .PD_layout[data-ls-bn-phone*="true"] li:last-child .PD_logo{display: none;}

    .PD_layout[data-fs-bn-pc*="true"] li.PD_slide:first-child, .PD_layout[data-ls-bn-pc*="true"] li.PD_slide:last-child {opacity: 0 !important; pointer-events: none !important;}



/*版頭*/
.Area_top { position:relative; width:1220px;height:1135px; }
.flex {display: flex;flex-wrap: wrap;}
  @media screen and (max-width:767px){
  .Area_top { position:relative; width:100%; height:90vw;}
  .Area_danji { width: 98%; height: 42vw;}
 }

 @media screen and (min-width:767px){

  @keyframes meteor-anim {
    0% {
      transform: rotate(-12deg) translate(419px, 10px);
    }
    100% {
      transform: rotate(-12deg) translate(-500px, 10px);
    }
  }
  .meteor-1,.meteor-2,.meteor-3,.meteor-4,.meteor-5,.meteor-6 {
    z-index: -1;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(246, 246, 246, 0.5) 47%,
    rgba(237, 237, 237, 0) 100%
  );
}
.meteor-1 {
  width: 103px;
  height: 2px;
  top: 143px;
  transform: rotate(-20deg);
  opacity: 0.8;
  animation: 4s meteor-anim linear infinite;
}
.meteor-2 {
  top: 52px;
  left: 114px;
  width: 70px;
  height: 2px;
  transform: rotate(-12deg);
  opacity: 0.6;
  animation: 3s meteor-anim linear infinite;
}
.meteor-3 {
  top: 124px;
  right: 264px;
  width: 121px;
  height: 2px;
  transform: rotate(-23deg);
  animation: 5s meteor-anim linear infinite;
}

.meteor-5 {
  top: 65px;
  left: 264px;
  width: 51px;
  height: 2px;
  transform: rotate(-12deg);
  opacity: 0.5;
  animation: 4s meteor-anim linear infinite;
}
.meteor-6 {
  top: 65px;
  left: 525px;
  width: 86px;
  height: 2px;
  transform: rotate(-21deg);
  opacity: 0.5;

  animation: 3s meteor-anim linear infinite;
}
.Area01	 {height:110px;}
.Area01 .flex {align-items: flex-end;justify-content: center;}
.Area01 .flex a{margin:0px 5px 0;}

.Area_gift	 {height:1170px;}
.Area_gift .flex {align-items: flex-end;justify-content: center;}
.Area_gift .flex a{margin:10px 5px 0;}

.Area02	{height:2700px; width: 1220px;}
  .Area02	.contral {width: 100%;height: 80%;}
  .PD_01{position: relative; width: 600px; height: 850px;}
  .pc_Area01_02{padding-top: 30px;}
  .Area02_bg   {position: relative; width: 100%; height: 10px;pointer-events: none; z-index: -1; top: -1990px;}
  .Area02_bg_2 {position: relative; width: 100%; height: 10px;pointer-events: none; z-index: -1; top: -1150px;}
  .Area02_bg_3 {position: relative; width: 100%; height: 10px;pointer-events: none; z-index: -1; top: -310px; }


.Area03 {position: relative;display:block; width:1220px; height:3422px;top:0;}

.PD_layout-1f_6s ul{ margin-top: 70px;position: absolute;}

.Area05	  {height:300px;}
.Area05	a {margin: 0 -50px;}
.Area05	.contral div{margin: 10px 30px 0  ; width: 470px;}

.Area04_bg{height: 360px;}
.height{height: 820px;}

@media screen and (min-width:767px){
.Area06	{height:700px; margin-bottom: 50px;}
}


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



@keyframes lineDisappear {
  0% {
    opacity: 1; /* 不透明度為 1，完整顯示 */
    transform: translateY(-100%); /* 起始位置在容器上方 100% 的位置 */
  }
  100% {
    opacity: 0; /* 不透明度為 0，完全隱藏 */
    transform: translateY(100%); /* 結束位置在容器下方 100% 的位置 */
  }
}

.ripple-effect {

  display: inline-block;
}

.ripple-effect::before {
  content: '';
  z-index: -5;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%; /* 控制初始大小 */
  height: 200%; /* 控制初始大小 */
  background-color: rgba(255, 255, 255, 0.5); /* 波紋的顏色和透明度 */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-animation 1.5s linear infinite;
}

@keyframes ripple-animation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

 }


 

  @media screen and (max-width:768px){

    @keyframes lineDisappear {
      0% {
        opacity: 1; /* 不透明度為 1，完整顯示 */
        transform: translateY(-100%); /* 起始位置在容器上方 100% 的位置 */
      }
      100% {
        opacity: 0; /* 不透明度為 0，完全隱藏 */
        transform: translateY(100%); /* 結束位置在容器下方 100% 的位置 */
      }
    }
  
    .ripple-effect {
  
      display: inline-block;
    }
    
    .ripple-effect::before {
      content: '';
      z-index: -5;
      position: absolute;
      top: 40%;
      left: 50%;
      width: 200%; /* 控制初始大小 */
      height: 150%; /* 控制初始大小 */
      background-color: rgba(255, 255, 255, 0.5); /* 波紋的顏色和透明度 */
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      animation: ripple-animation 1.5s linear infinite;
    }
    
    @keyframes ripple-animation {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
      }
    }

  .Area01{ width: 100% ;height:14vw }
  .Area01 .flex {align-items: flex-end;justify-content: center;}
  .Area01 .flex a{margin: 2vw 1vw;}

  .Area_gift{ width: 98% ;height:345vw }
  .Area_gift .flex {align-items: flex-end;justify-content: center;}
  .Area_gift .flex a{margin: 2vw 1vw;}
  
  .pc_Area01_txt{width: 140vw;margin-left: -19vw;}

	.m_btn  {position: relative; margin-top: -6vw; height: 30vw;}
   .Area02	{height:602vw;  }
   .Area02	.contral div{margin: 0 0 0 0;}
   .Area02	.contral a{width:100vw;height: auto;}
   .Area02	.contral img{width:100vw;height: auto; margin-left: -8vw;}
   /* .mb_Area02_bg02 {background-image:url(mb_Area02_bg02.png?t=1752798687927); background-size: 100%; background-repeat: repeat-y;  height: 800vh; margin-top: 45vw; position: absolute;width: 100vw;} */

   .Area02	.contral a{width: 100%;height: 100%;}
   .PD_01{position: relative; width:100vw; height: 96vw;}

   .Area03{ height:1119vw; width: 100%;}
   .Area03 ul{margin-top: 52vw; position: absolute;}
   .Area03 .btnall{position: relative; padding:0;height: 80vw;}
   .Area03 .btnall a{ width: 31vw;}
   .pc_Area03_bg{width: 140vw;margin-left: -20vw;}
	 .Area04{ height:981vw; width: 100%;}	
   .Area04_bg{width: 140vw;margin-left: -18vw;} 
   .height{    height: 274vw;}
	 .Area04 .contral{ display: flex;flex-wrap: wrap; }	
	 .Area04 .PD_layout{ padding: 2vw 2vw ;}

	 .Area05{ height:40vw; width: 100vw;}	
   .pc_Area01_01 {width: 150vw; left: -25vw;}
   
   .Area05	.contral div{padding:0;width: 48vw;}
  .pc_bg00{width: 144vw; height: 100vw; position: absolute; background-size: 140%; background-repeat: no-repeat; margin: -44vw 0 0 -59vw  ;}

  .Area06	{height:115vw; margin-bottom: 5vw;}


  }


@media screen and (min-width:767px){
.Area_video { height:700px; width: 1220px;}

.PD_01_bg {position: relative; width: 100%; height: 10px;pointer-events: none; z-index: 0; top: -225px;}

.PD_video .videoPD_01 {position: absolute; margin: 0px 0 0 20px; z-index: 2;pointer-events: none;}

.PD_video .videoPD_02 {position: absolute; margin: 0px 0 0 600px; z-index: 2;pointer-events: none;}


.video {  border-radius: 10px;}
.video1 iframe{ width: 600px; top: 100px; left: 0px; height: 351px; position: absolute; z-index: 1;}
.video2 iframe{ width: 600px; top: 100px; left: 610px; height: 351px; position: absolute; z-index: 1;}
}

@media screen and (max-width: 767px) {
.Area_video{ height:190vw; width: 100%;}	
.PD_video {height: 80vw;}

.PD_01_bg {position: relative; width: 100%; height: 100%;pointer-events: none; z-index: 0;  pointer-events: none;}


.PD_video .videoPD_01 {position: absolute; margin: 0vw 0 0 0vw; z-index: 2; pointer-events: none;}

.PD_video .videoPD_02 {position: absolute; margin: 8vw 0 0 0vw; z-index: 2; pointer-events: none; top: 92vw;}

  .video1 iframe{ width: 95vw; position: absolute; left:2.5vw; top:15vw; height: 55vw;  z-index: 1;}
  .video2 iframe{ width: 95vw; position: absolute; left:2.5vw; top:105vw; height: 51vw; z-index: 1; }
}



 .Area_07 {
  position: relative;
  width: 1220px;
  height: 420px;
  margin-bottom: 0px;
  display: flex;
  flex-wrap: wrap; /* 允許換行 */
  justify-content: center; /* 置中 */
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
}
.product-item {
  display: block;
  width: 220px; 
  text-align: center;
}
.product-item img {
  width: 100%;
  height: auto;
  display: block;
}

.more-container {
  position: relative;
  top: 30px; 
}


@media screen and (max-width: 767px) {

  .Area_07 .title {
    margin: 0 auto 60px;
  }

  .Area_07 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    height: 206vw;


  }

  .product-item {
    width: 40%; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

}




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