@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: 900px;}
  .Area_top .top_txtbg {position: absolute;left: 760px;top: 815px;z-index: 0;}
  .Area_top .star {position: absolute;left: 734px;top: 92px;z-index: 0;}
  .Area_top .footprint {position: absolute;left: 180px;top: 120px;z-index: 0;}
  

 /*大標*/ 
 .Area_top .title01 {position:absolute;width: 62%;top: 30px;left: 310px;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;}
 /*日期*/ 
 .Area_top .title02 {position:absolute;width: 20%;top: 360px;left: 550px;height: auto;z-index: 1;}
 .Area_top .title02 img {width: 88%;}
 .Area_top .title02  ul li{position: absolute;}
 .Area_top .title02 input{position: relative;top: -30px;}

 
}
  @media screen and (max-width:767px){
  .Area_top {height: 94vw;}
  .Area_top .mb_01{position:absolute; top:0; left:0 ;width: 100%; z-index:0;}
  .Area_top .top_txtbg {position: absolute;width: 32%;top: 85vw;left: 65vw;}
  .Area_top .star {position: absolute;width: 3.8%;top: 8vw;left: 65.5vw;}
  .Area_top .footprint {position: absolute;width: 7%;top: 11vw;left: 10.5vw;}


 /*大標*/ 
 .Area_top .title01 {width: 64%;position:absolute;top: 3vw;left: 27vw;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 .title02 {width: 21.5%;position:absolute;top: 35vw;left: 46.5vw;height: auto;z-index: 7;}
 .Area_top .title02 img {width: 100%;}
 .Area_top .title02  ul li{position: absolute;}
 .Area_top .title02  ul li .PD .PD_img{display: block!important;}


  }




/*副標輪播*/
.Area_top .topPD2 {position: absolute;top: 210px;left: 130px;width: 312px;height: 207px;overflow: hidden;z-index: 21;}
.Area_top .topPD2 ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
.Area_top .topPD2 ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
.Area_top .topPD2 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 .topPD2 ul.PD_wrapper li img{width: 100%;}
}

@media screen and (max-width:767px){
  .Area_top .topPD2 {width: 49%;height: 22.4vw;position: absolute;top: 20vw;left: -5vw;overflow: hidden;}
  .Area_top .topPD2 ul.PD_wrapper li img{width: 68%;}
}



/*輪播物件小標*/
.topPDtitle{position: absolute;left: -8px;top: -10px;width: 88px;}
@media screen and (max-width: 767px) {
  .topPDtitle{left: -.5vw;top: 0vw;width: 10.5vw !important;}
}




/*PNG動畫*/
.deco_dog {
  position:absolute;
  z-index: 2;
  top: 299px;
  left: 290px;
  width:695px;
  height:614px;
  background:url(deco_dog.png?t=1786073944345) repeat;
  -webkit-animation: deco_dog 1s steps(2) alternate infinite;
  animation: deco_dog 1s steps(2) alternate infinite;
  }
   @-webkit-keyframes deco_dog{ 0% { background-position: 0px;} 100% { background-position:200%} 200% { background-position:300%}}
                @keyframes deco_dog{ 0% { background-position: 0px;} 100% { background-position: 200%} 200% { background-position:300%}}


@media screen and (max-width: 767px){
.deco_dog {position:absolute;top: 31vw;left: 16vw;z-index: 8;}
.deco_dog {
  position:absolute;
  width: 290px;
  height: 258px;
  background:url(deco_dog.png?t=1786073944345) repeat;
  -webkit-animation: deco_dog 1s steps(2) alternate infinite;
  animation: deco_dog 1s steps(2) alternate infinite;
  background-size: 200%;
  }
 
}






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




/*間距*/
.Area_bottom {margin-bottom: -20px !important;}
@media screen and (max-width:767px){
  .Area_bottom {margin-bottom: -5vw !important;}
}





  @media screen and (max-width: 767px) {
    .pdaa.PD_layout[data-pd-li=BN] ul{ padding: 0 0em;grid-gap: 0em;}
}
  @media screen and (min-width: 768px) {
    .pdaa.PD_layout[data-pd-li=BN] ul{padding: 0 0px;grid-gap: 0px;}
}



  @media screen and (min-width:768px){
	.PD_layout.layout_PD01{ width: 97%;}
	}
	@media screen and (max-width:767px){
	.PD_layout.layout_PD01{ width: 100%;} 
	}



	@media screen and (min-width: 768px) {
		.PD_layout ul {padding: 30px 0;}
	}




  @media screen and (min-width: 768px) {
    .Area_swiper_box.bb01 {padding-bottom: 25px;background-color: #ffffff;}
}
@media screen and (max-width: 767px) {
  .Area_swiper_box.bb01 {padding-bottom: 5vw;background-color: #ffffff;}
}





@media screen and (min-width: 768px) {
.Area_drawing-area-2x1 .PD_layout[data-pd-h3="5"] .PD h3 span {display: inline-block;padding: 0 .5em;max-width: 85%;border-radius: 4px;color: #ffffff;background-color: #dadada00;}
.Area_drawing-area-2x1 .PD_layout-CSSBG_01 .PD .PD_img {padding-top: 40px;padding-bottom: 70px;}
.Area_drawing-area-2x1 .PD_layout .PD img {width: 92%;height: auto;}
.Area_drawing-area-2x1 .PD_layout[data-pd-h4="1"] .PD h4 {display: inline-block;-webkit-box-orient: vertical;-webkit-line-clamp: 1;white-space: normal;overflow: hidden;color: #fff;}
.Area_drawing-area-2x1 .PD_layout .PD p {height: 4em;line-height: 3em;color: #ff99e2;}
.Area_drawing-area-2x1 .PD_layout .PD p del {font-size: 18px;padding-right: .25em;color: #bebebe;}
}
@media screen and (max-width: 767px) {
  .Area_drawing-area-2x1 .PD_layout .PD img {width: 90%;height: auto;}
  .Area_drawing-area-2x1 .PD_layout-CSSBG_01 .PD .PD_img {padding-top: 4vw;padding-bottom: 5vw !important;}
  .Area_drawing-area-2x1 .PD_layout[data-pd-h3="5"] .PD h3 span {display: inline-block;padding: 0 .5em;max-width: 85%;border-radius: 4px;color: #ffffff;background-color: #dadada00;}
  .Area_drawing-area-2x1 .PD_layout[data-pd-h4="1"] .PD h4 {display: block;max-height: 1.5em;overflow: hidden;color: #fff;}
  .Area_drawing-area-2x1 .PD_layout .PD p {height: 2em;line-height: 2em;color: #ff99e2;}
  .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #bebebe;}
}