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


/*背景*/
@media screen and (min-width:768px){
  .bg_01 { z-index:-46; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
  }
  @media screen and (max-width:767px){
  .m_bg { z-index: 0; position: absolute; top: 10.5vw; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; pointer-events:none; background-size: 100%;}
  }





  /*版頭區塊*/
  @media screen and (min-width:768px){
    .Area_top {height: 1120px;}
    .Area_top .star {position: absolute;left: 629px;top: 49px;z-index: 2;}
    .Area_top .star2 {position: absolute;left: 371px;top: 331px;z-index: 2;}
    .Area_top .star3 {position: absolute;left: 290px;top: 150px;z-index: 2;}

    .Area_top .lightning {position: absolute;left: 165px;top: 710px;z-index: 0;}
    .Area_top .lightning2 {position: absolute;left: 900px;top: 385px;z-index: 0;animation-delay: 0.6s;}
  
  
   /*大標*/ 
   .Area_top .title01 {position:absolute;width: 52%;top: 40px;left: 300px;height: auto;z-index: 1;}
   .Area_top .title01 img {width: 88%;}
   .Area_top .title01  ul li{position: absolute;}
   .Area_top .title01 input{position: relative;top: -30px;}
  }
    @media screen and (max-width:767px){
    .Area_top {height: 120vw;}
    .Area_top .mb_01{position:absolute; top:0; left:0 ;width: 100%; z-index:0;}
    .Area_top .star {position: absolute;width: 4.8%;top: 5vw;left: 50.8vw;z-index: 8;}
    .Area_top .star2 {position: absolute;width: 4%;top: 34.7vw;left: 23.5vw;z-index: 8;}
    .Area_top .star3 {position: absolute;width: 65%;top: 15vw;left: 14.5vw;z-index: 8;}
    .Area_top .lightning {position: absolute;width: 13%;top: 74vw;left: 4.5vw;}
    .Area_top .lightning2 {position: absolute;width: 14%;top: 41vw;left: 79.5vw;animation-delay: 0.6s;}

  
   /*大標*/ 
   .Area_top .title01 {width: 59%;position:absolute;top: 4vw;left: 18vw;height: auto;z-index: 7;}
   .Area_top .title01 img {width: 100%;}
   .Area_top .title01  ul li{position: absolute;}
   .Area_top .title01  ul li .PD .PD_img{display: block!important;}
    }
  
  
  
   /*情境圖輪播*/
  .Area_top .topPD {position: absolute;top: 589px;left: 322px;width: 598px;height: 368px;overflow: hidden;z-index: 21;}
  .Area_top .topPD ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
  .Area_top .topPD ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
  .Area_top .topPD ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}
  @media screen and (min-width: 768px){
    .Area_top .topPD ul.PD_wrapper li img{width: 100%;}
  }
  
  @media screen and (max-width:767px){
    .Area_top .topPD {width: 61.95%;height: 39vw;position: absolute;top: 61vw;left: 20vw;overflow: hidden;}
    .Area_top .topPD ul.PD_wrapper li img{width: 100%;}
  }



  
  /*副標輪播*/
  .Area_top .sub {position: absolute;top: 375px;left: 467px;width: 410px;height: 120px;overflow: hidden;z-index: 21;}
  .Area_top .sub ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
  .Area_top .sub ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
  .Area_top .sub ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}
  @media screen and (min-width: 768px){
    .Area_top .sub ul.PD_wrapper li img{width: 100%;}
  }
  
  @media screen and (max-width:767px){
    .Area_top .sub {width: 66%;height: 13vw;position: absolute;top: 39vw;left: 22vw;overflow: hidden;}
    .Area_top .sub ul.PD_wrapper li img{width: 68%;}
  }

  


  .jello { -webkit-animation:jello 1s linear infinite ;
    animation:jello 1.2s linear infinite ;}
  
  @-webkit-keyframes jello {
  from, 11.1%, to {
  transform: none;
  }
  
  22.2% {
  transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  
  33.3% {
  transform: skewX(6.25deg) skewY(6.25deg);
  }
  
  44.4% {
  transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  
  55.5% {
  transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  
  66.6% {
  transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  
  77.7% {
  transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  
  88.8% {
  transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  }
  
  @keyframes jello {
  from, 11.1%, to {
  transform: none;
  }
  
  22.2% {
  transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  
  33.3% {
  transform: skewX(6.25deg) skewY(6.25deg);
  }
  
  44.4% {
  transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  
  55.5% {
  transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  
  66.6% {
  transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  
  77.7% {
  transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  
  88.8% {
  transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  }
  
  .jello {
  animation-name: jello;
  transform-origin: center;
  }





@media screen and (min-width: 768px){
  .PD_layout-CSSBG_01.PD_layout[data-pd-h3="5"] .PD h3 span {display: inline-block;padding: 0 .5em;max-width: 85%;border-radius: 4px;color: #000;background-color: rgb(218 218 218 / 0%);}
  .PD_layout-CSSBG_01 .PD .PD_img {padding-top: 40px;padding-bottom: 30px;}
  .PD_layout-CSSBG_01.PD_layout .PD p {height: 6em;line-height: 3em;color: #d62672;}
}
@media screen and (max-width:767px){
  .PD_layout-CSSBG_01.PD_layout[data-pd-h3="5"] .PD h3 span { display: inline-block;padding: 0 .5em; max-width: 85%;border-radius: 4px;color: #000;background-color: rgb(218 218 218 / 0%);}
  }


.layout_PD01 {width: 96%;}
@media screen and (max-width:767px){
  .layout_PD01 {width: 100%;}
}




/* ====(((( 共用開始：合併模板 CSS ))))===== */
/* ====(((( 模板開始：品牌卡片輪播公版 (comp_brand_20260824001__pd-card) ))))===== */
.Area_pd-card .PD_layout-D1_01.PD_layout ul {
  grid-gap: 0;
}

@media screen and (min-width: 768px) {
  .Area_pd-card .PD_layout-D1_01.PD_layout ul {
    padding:unset;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo{
    margin-bottom: 0;
  }
}

.Area_pd-card .PD_layout-D1_01.PD_layout li {
  aspect-ratio: 315 / 400;
  background-color: unset;
  background-image: url(Area_PD_Brand.png?t=1790654545936);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.Area_pd-card .PD_layout-D1_01.PD_layout .PD_img img {
  background-color: unset;
}

@media screen and (max-width: 767px){
  .Area_pd-card .PD_layout-D1_01.PD_layout .PD_into {
    padding: 0.5vw;
  }

  .Area_pd-card .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo {
    height: calc(100% - 10vw);
  }
}

.Area_pd-card .PD_layout-D1_01.PD_layout .PD h4 {
  color: #fff;
  transition: all 0.1s linear;
}

.Area_pd-card .PD_layout-D1_01.PD_layout .PD:hover h4 {
  transform: scale(1.05);
  color: #ffe389;
}

.Area_pd-card .PD_layout-D1_01.PD_layout[data-pd-pdlogo="3"] .PD .PD_logo img,
.Area_pd-card .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo img {
  width: 75%;
  height: auto;
  outline: 2.5px solid #6ed8f0;
  border: 0;
  border-radius: 40px;
}



/* ====(((( 模板結束：品牌卡片輪播公版 (comp_brand_20260824001__pd-card) ))))===== */
/* ====(((( 共用結束：合併模板 CSS ))))===== */

/* ====(((( 共用開始：欄位樣式覆寫 ))))===== */
.Area_pd-card[org="1"] .PD_layout-D1_01.PD_layout .PD h4{color:#fff}
.Area_pd-card[org="1"] .PD_layout-D1_01.PD_layout .PD:hover h4{color:#ffe389}
.Area_pd-card[org="1"] .PD_layout-D1_01.PD_layout .PD .PD_logo img{outline-color:#6ed8f0}
.Area_pd-card[org="1"] .Area_swiper_box .PD_layout li{aspect-ratio:315 / 400}
/* ====(((( 共用結束：欄位樣式覆寫 ))))===== */