/*背景*/
@media screen and (min-width:768px){
  .bg_fix {z-index: -47;position:absolute;top: 0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
  .bg_01 {z-index: -1;position:absolute;top: 1046px;left: 0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;}
  .bg_deco {z-index: 1;position:fixed;top: 500px;left:0;width:100%;height:100%;background-position:center 0px;background-repeat:repeat-y;transition:0.5s linear;pointer-events:none;}
  }
@media screen and (max-width:767px){
  .m_bg_fix {z-index: -40;position:absolute;top: 10vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
  .WRAPPER {margin-bottom: 0;min-width: inherit;min-height: 100vh;overflow: hidden;padding-bottom: 0;background-image: url("m_bg.jpg?t=1782721787995");background-repeat:repeat-y;background-size:100%;}
  .WRAPPER img {  width:100%;  height:auto; }
}



/*區背景*/
.Area .bg, .Area .bg_btom{ position: absolute;pointer-events: none;z-index:0; }
@media screen and (min-width: 768px){
  .Area .bg, .Area .bg_btom{ left: 50%; transform: translateX(-50%); width: 2000px;}
  .AreaPD01:before{ left: 50%; transform: translateX(-50%); }

  .AreaPD01 .bg {top:103px;left: 50%;}	
  .AreaPD01 .bg_btom {bottom:-41px;}	
  .AreaPD01:before{ content:''; width: 2000px; height: 82%; background:url(AreaPD01_center.png?t=1782721787995) repeat-y center / 100%; position: absolute; top: 155px;} 

}

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

  .AreaPD01 .bg {top:12vw;left:0;width:100%;  }	
  .AreaPD01 .bg_btom {bottom:-3vw;left:0;width:100%; }	
  .AreaPD01:before{ content:''; width: 100%; height: 83%; background:url(mAreaPD01_center.png?t=1782721787995) repeat-y center / 100%; position: absolute; top: 21vw; left: 0;}

}


/*區標圖*/
.box_txt_all {position: relative;  height: auto; z-index: 10; }
.box_txt_all .PD_layout ul {padding: 0;grid-gap: 0px !important;}	
.box_txt_all img{width: 100%!important;padding: 0;}
@media screen and (min-width: 768px){
.box_txt_all { margin: 0 auto 0; width: 860px; }
}
@media screen and (max-width:767px){
.box_txt_all { margin: 0 auto 0; }
}


/*版頭區塊*/
.AreaTop img{width: 100%;border-radius: 0!important;}
.AreaTop .PD_layout .PD_slide { min-width:auto; }
@media screen and (min-width:768px){
.AreaTop {height: 560px;}
.bulldog{position: absolute;left: 112px;top: 262px; width: 189px;  z-index: 5;}
.cat {position: absolute;left: 898px;top: 335px;width: 19%;z-index: 15;pointer-events: none;}
.dog {position: absolute;left: 263px;top: 49px;width: 12%;z-index: 15;pointer-events: none;}

}

@media screen and (max-width:767px){
.AreaTop {height: 56vw;/* z-index: 20; */}
.m_bg_top {position: absolute;top: 109vw;left: 0;z-index: 20;}	
.AreaTop .deco_01 { position: absolute; right: -33vw; top: -41vw; width: 78%; pointer-events: none; mix-blend-mode: screen;}
.bulldog{width: 18%;left:4vw;top: 28vw;position: absolute; z-index: 2;}
.cat {position: absolute;left: 79vw;top: 34vw;width: 20%;pointer-events: none; z-index: 2;}	
.dog {position: absolute;left: 14vw;top: 4vw;width: 14%;pointer-events: none; z-index: 2;}	
}


/*副標輪播*/
.AreaTop .topPD2 {position: absolute;top: 381px;left: 337px;width: 568px;height: 128px;overflow: hidden;z-index: 20;}
.AreaTop .topPD2 ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
.AreaTop .topPD2 ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
.AreaTop .topPD2 ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}
.AreaTop .topPD2 .PD_layout .PD img {width: 90%!important;}
@media screen and (max-width:767px){
  .AreaTop .topPD2 {width: 79%;height: 15vw;position: absolute;top: 37vw;left: 12vw;overflow: hidden;}
  .AreaTop .topPD2 .PD_layout .PD img {width: 75%!important;}
}


/*版頭主標微調*/
.title .PD_layout .PD a { pointer-events: none; }
.title .PD_layout .PD_slide:hover {filter: brightness(100%); transform: translateY(0);}

@media screen and (min-width: 768px){
.title {z-index: 30;}
.title .PD_layout li:nth-of-type(1) {position: absolute;top: 70px;left: 330px;width: 54%;z-index: 0;}
.title .PD_layout li:nth-of-type(2) {position: absolute;top: 370px;left: 530px;width: 35%;z-index: 20;}
.title .PD_layout li:nth-of-type(3) {position: absolute;top: 355px;left: 925px;z-index: 12;}
.title .PD_layout li:nth-of-type(4) {position: absolute;top: 389px;left: 508px;z-index: 50;}
.title .PD_layout li:nth-of-type(5) {position: absolute;top: 430px;left: 826px;z-index: 10;}
.title .PD_layout .PD img { width: 100%!important; }
}

@media screen and (max-width:767px){
.title .PD_layout li:nth-of-type(1) {position: absolute;top: 3vw;left: 19.5vw;z-index: 1;width: 72.5%;}
.title .PD_layout li:nth-of-type(2) {position: absolute;top: 38vw;left: 43vw;z-index: 20;width: 47.5%;}
.title .PD_layout li:nth-of-type(3) {position: absolute;top: 40vw;left: 76vw;z-index: 12;width: 20%;}
.title .PD_layout li:nth-of-type(4) {position: absolute;top: 42vw;left: 39vw;z-index: 40;width: 22%;}
.title .PD_layout li:nth-of-type(5) {position: absolute;top: 59vw;left: 72vw;z-index: 50;width: 23%;}
.title .PD_layout .PD img { width: 100%!important; }
}


/*日期*/
.TIMER_DAY {display:flex; justify-content: center; flex-wrap:wrap; position: absolute; top: 89px; left: 743px; width:21%; height: 187px;   
  padding: 30px 0px 0 52px; font-size:57px; font-weight: bold; font-family: "Century Gothic"; z-index: 3;  transform: rotate(4deg) scale(0.9);
   box-sizing: border-box;color: #0053c1;/* background: url(datebg.png?t=1782721787995)no-repeat center / 88% ;*/} 
.TIMER_DAY small {font-size: 40px; font-weight: 100; position: relative;}
.TIMER_DAY #sendMonth { display: inline-block; text-align: right;  letter-spacing: -2px;} 
.TIMER_DAY #sendToday { display: inline-block;  text-align: left; letter-spacing: -2px;}
.TIMER_DAY .sendtxt { font-size: 0.8em; font-weight: 500; margin:-54px 0 0 3px; text-align: left; width: 46%;}
.TIMER_DAY .box{ width: 100%; display: flex; justify-content: center; align-items: center;height: 80px; }
@media screen and (max-width: 736px){ 
.TIMER_DAY { position: absolute;width: 34%;top: 4.3vw;left: 63.8vw;font-size: 6.5vw;letter-spacing: 0; padding:4vw 1vw 0 2vw; text-align: left;margin: 0;font-weight: 900; height:22vw;  transform: rotate(5deg) scale(0.9);}
.TIMER_DAY small {font-size: 4vw;}    
.TIMER_DAY #sendMonth {display: inline-block; font-size: 1em; }
.TIMER_DAY #sendToday {display: inline-block; font-size: 1em; }
.TIMER_DAY .sendtxt {font-weight: 500;font-size: 0.9em;  margin:-6.3vw 0 0 2.5vw;}	
.TIMER_DAY .box{ height: 8vw; }
}

/*區標隱藏*/
.Area_title{ display: none; }


/*輪播BN*/
.Area_bn-carousel01 ul{ height: 205px; }
@media screen and (max-width: 767px) {
  .Area_bn-carousel01 ul{ height: 23vw; }
}

/*按鈕*/
.AreaActive ul{ padding: 0!important; grid-gap:20px!important; }
@media screen and (max-width: 767px) {
  .AreaActive ul{ padding: 2vw!important; grid-gap:1vw!important; }
}


/*活動倒數*/
.TimerNick2 {display:inline-block; height: 57px;z-index:99;font-weight: 700; width: 55%; text-align:center; position: relative; background-color: #fff; border-radius: 50px; padding: 1% 0 0.5%; margin: 0 0 12px;}
.TimerNick2 .FontStyle2 {display: inline-block;margin: 0 0 0 2px;padding: 0;border: 0;font: bold 40px/30px Arial;color: #fe71b4; border-radius:5px; letter-spacing: 0px;text-align: center;}
.TimerNick2 span {padding-left: 2px;font: 400 37px/48px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0em;color: #1a1a1a;}
@media screen and (max-width:767px){
.TimerNick2 { width: 73%;  height:5vw; background-size:100%;  transform: scale(0.85); padding: 2% 0 2%; margin: 0 0 1vw;}
.TimerNick2 .FontStyle2 {margin: 0;padding: 0;border: 0;font: bold 5vw/5vw Arial;}
.TimerNick2 span {padding-left:0;font: normal 5vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;}
}


/*登記*/
.Area_danji .danji_box {  margin-bottom: -12px; }
@media screen and (max-width: 767px) {
  .Area_danji .danji_box {  margin-bottom: 0em; }
  .warningTxt h3{ padding: 0 0 1em  }
}

.Area_group-2{ margin-top: 60px; }
@media screen and (max-width: 767px) {
  .Area_group-2{ margin-top: 7vw; }
}

/*品類按鈕*/
.AreaActive2 ul{ padding: 0!important; grid-gap:30px!important; }
@media screen and (max-width: 767px) {
  .AreaActive2 ul{ padding: 3vw!important; grid-gap:2.5vw!important; }
}