@charset "utf-8";

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

/*隱鑶*/
.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_bgtop01,.pc_bgtop02,.pc_bgtop03,.pc_bgtop04 { z-index:-10; position:fixed; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:1100px; background-repeat:no-repeat; background-position:center top; }
  .pc_bg      { z-index:-10; position:fixed; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:1100px; background-repeat:no-repeat; background-position:center top; }
  .pc_bgtop00 { z-index:1; position:fixed; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:1100px; background-repeat:no-repeat; background-position:center top; }
  .pc_bgtop09 { z-index:1; position:fixed; top:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:1100px; background-repeat:no-repeat; background-position:center top; mix-blend-mode: screen; }

  .pc_title,.pc_top_PD { 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; }
} 


  @media screen and (max-width:767px){
  .m_bgtop01 {position: fixed; z-index:-10;background-size: 100%;width:100vw; height:2080vw; background-repeat:repeat-y; background-position:center top; top: 0;}
  .m_bgtop02 {position: fixed; z-index:-5;background-size: 100%;width:100vw; height:2080vw; background-repeat:repeat-y; background-position:center top; top: 0;}

  .m_bgtop00 {position: fixed; z-index:-1;background-size: 100%;width:100vw; height:2080vw; background-repeat:no-repeat; background-position:center top; top: 0;}
  .m_bgtop09 {position: fixed; z-index:-1;background-size: 100%;width:100vw; height:2080vw; background-repeat:no-repeat; background-position:center top; top: 0; mix-blend-mode: screen; }
  }





/*區塊_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:1000px; }
.flex {display: flex;flex-wrap: wrap;}
.swiper-container{width: 2000px;position: absolute;top: 367px;left: 50%;transform:translateX(-50%)}

  @media screen and (max-width:767px){
  .Area_top { position:relative; width:100%; height:83vw;}
  .Area_danji { width: 100%; height: 40vw;}
  .swiper-container{width: 100%; top: 32vw;}
  .swiper-container img {width: 75%;}

 }

 @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:150px;}
.Area01 .flex {align-items: flex-end;justify-content: center;}
.Area01 .flex a{margin:0px 5px 0;}

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


.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	.contral div{margin: 10px auto 0  ; width: 1220px;}

.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:21vw }
  .Area01 .flex {align-items: flex-end;justify-content: center;}
  .Area01 .flex a{margin: 2vw 1vw;}

  .Area_gift{ width: 100% ;height:100vw }
  .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;}


	 .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 ;}

   .pc_Area01_01 {width: 150vw; left: -25vw;}
   
	 .Area05{ height:25vw; width: 100vw;}	
   .Area05	.contral div{padding:0;width: 95vw;}
  .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:3200px; width: 1220px;}
.PD_01_bg {position: relative; width: 100%; height: 750px;pointer-events: none; z-index: 0;}

.PD_01 {position: absolute; margin: 230px 0 0 100px; z-index: 2;}
.PD_01 a {width: 550px; height: 560px; position: absolute; top: -200px; right: -220px; z-index: 10;}
.PD_01 img {pointer-events: none;}

.PD_02 {position: absolute; margin: 230px 0 0 100px; z-index: 2;}
.PD_02 a {width: 550px; height: 560px; position: absolute; top: -170px; left: -100px; z-index: 10;}
.PD_02 img {pointer-events: none;}


.video {  border-radius: 10px;}
.video1 iframe{ width: 620px; top: 248px; left: 39px; height: 351px; position: absolute; z-index: 1;}
.video2 iframe{ width: 620px; top: 998px; left: 560px; height: 351px; position: absolute; z-index: 1;}
.video3 iframe{ width: 620px; top: 1748px; left: 39px; height: 351px; position: absolute; z-index: 1;}
.video4 iframe{ width: 620px; top: 2498px; left: 560px; height: 351px; position: absolute; z-index: 1;}
}

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

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

.PD_01 {position: absolute; margin: 58vw 0 0 0vw; z-index: 2;}
.PD_01 a {width: 100%; height: 47vw; position: absolute; top: 4vw; right: 0vw; z-index: 10;}

.PD_02 {position: absolute; margin: 58vw 0 0 0vw; z-index: 2;}
.PD_02 a {width: 100%; height: 47vw; position: absolute; top: 4vw; right: 0vw; z-index: 10;}

  .video1 iframe{ width: 90vw; position: absolute; left:5vw; top:28vw; height: 51vw;  z-index: 1;}
  .video2 iframe{ width: 90vw; position: absolute; left:5vw; top:140vw; height: 51vw; z-index: 1; }
  .video3 iframe{ width: 90vw; position: absolute; left:5vw; top:252vw; height: 51vw; z-index: 1; }
  .video4 iframe{ width: 90vw; position: absolute; left:5vw; top:364vw; height: 51vw; z-index: 1; }
}

  

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