@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: 1180px;}

    .Area_top .decobird {position: absolute;left: 1010px;top: 40px;z-index: 0;}
  
  
   /*大標*/ 
   .Area_top .title01 {position:absolute;width: 60%;top: 70px;left: 250px;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: 116vw;}
    .Area_top .mb_01{position:absolute; top:0; left:0 ;width: 100%; z-index:0;}
    .Area_top .decobird {position: absolute;width: 13%;top: 4vw;left: 85.5vw;}

  
   /*大標*/ 
   .Area_top .title01 {width: 68.5%;position:absolute;top: 4.5vw;left: 15vw;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: 490px;left: 230px;width: 764px;height: 675px;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: 74%;height: 72vw;position: absolute;top: 47vw;left: 11vw;overflow: hidden;}
    .Area_top .topPD ul.PD_wrapper li img{width: 100%;}
  }



  

  


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