@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: -1;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%;}
  }





/*版頭*/
.Area_top {position: relative;height: 720px;}
.Area_top .main ul {padding: 0; grid-gap: 0;}
.Area_top .main ul li { pointer-events: none;}
.Area_top .main01 {position:absolute;left: 130px;top: 90px;z-index: 2;}
.Area_top .top_deco01 {position:absolute;top: 0px;left: 70px;z-index: 2;}
.Area_top .top_deco02 {position:absolute;top: 0px;left: 65px;z-index: 3;width: 2000px;} 
@media screen and (max-width:767px){
  .Area_top {height: 71vw;}
  .Area_top .main01 {left: 4vw;top: 11.5vw;width: 70%;}
  .Area_top .top_deco01 {position: absolute;top: -3vw;left: -5vw;width: 16%;}
  .Area_top .top_deco02 {position: absolute;top: -18vw;left: 66vw;width: 60%;}

}

@keyframes pd3{
  0%{  transform: rotate(0deg);  }
  100%{  transform: rotate(6deg);  }
}



/*日期*/
.TIMER_DAY {
  display:flex;
  justify-content: center;
  flex-wrap:nowrap;
  position: absolute;
  top: 60px;
  left: 190px;
  width:25%;
  height: 206px;
  animation: time 1s ease forwards;
  animation-delay: 1s;
  opacity: 0;
  padding: 36px 36px 0 36px;
  font-size:46px;
  font-weight: bold;
  font-family: "Century Gothic";
  z-index: 0;
  transform: rotate(
356deg) scale(0.85);
  box-sizing: border-box;
  color: #ffffff;
  text-shadow: 1.5px 1.5px 3px rgb(0 77 156 / 83%);
  /* background: url(datebg.png?t=1785895823575)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:12px 0 0 3px; text-align: left; width: 90%;}
.TIMER_DAY .box{ width: 100%; display: flex; justify-content: right; align-items: center;height: 80px; }
@media screen and (max-width: 736px){ 
.TIMER_DAY {position: absolute;width: 34%;top: 8vw;left: 8.5vw;font-size: 6vw;letter-spacing: 0;padding: 4vw 4vw 0 4vw;text-align: left;margin: 0;font-weight: 900;height:22vw;transform: rotate(
356deg) scale(0.78);}
.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.8em;  margin:0.3vw 0 0 0.5vw;}	
.TIMER_DAY .box{ height: 8vw; }
}
@keyframes time{
  0%{ opacity: 0;}
  100%{ opacity: 100; }
}




/*副標*/
.sub .PD_layout ul {display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 348px;left: 265px;width: 33%;height: 220px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 100%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 38vw;left: 18vw;width: 42%;z-index: 30;overflow: hidden;}
.sub .PD_layout .PD img {width: 100%;padding: 0;}
}

  


/*版頭公版*/
@media screen and (min-width: 768px){
  .Area00 {position: relative;z-index: 3;padding-bottom: 330px;}
  .Area00 .Area00_bg {position: absolute;margin: 0 auto;width: 105%;height: auto;top:0;left: -30px;}
  .Area00 .Area_swiper {width: 94.5%;left: 0px;top: 240px;transform: rotate(-2.5deg);}
  }
  @media screen and (max-width: 767px){
    .Area00 {position: relative;z-index: 0;padding-bottom: 22vw;}
    .Area00 .Area00_bg {position: absolute;margin: 0 auto;width: 100%;z-index: 0;}
    .Area00 .Area_swiper {width: 100%;left: 1vw;top: 19vw;transform: rotate(-3deg);/* z-index: 997; */}
    .Area00 .layout_PD .PD_into {padding: .3125em 0!important;}
  }
  

  
/*版頭公版*/
@media screen and (min-width: 768px){
  .Area_pd-carousel2 {top: 0px;}
}
@media screen and (max-width: 767px){
  .Area_pd-carousel2 {top: 4.5vw;}
}

  @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: #5e2d0f;background-color: rgb(218 218 218 / 0%) !important;}
    .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: #5e2d0f;}
    .Area_drawing-area-2x1 .PD_layout .PD p {height: 9em;line-height: 5em;color: #ffd155;}
    .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #e2e2e2;}
    .Area_drawing-area-2x1 .PD_layout .PD_into {padding: .3125em;padding-bottom: .5em;padding: 1em 2em 0em;}
}
  @media screen and (max-width: 767px){
    .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: #5e2d0f;background-color: rgb(218 218 218 / 0%) !important;}
    .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: #5e2d0f;}
    .Area_drawing-area-2x1 .PD_layout .PD p {height: 2em;line-height: 2em;color: #ffd155;}
    .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #e2e2e2;}
}





/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}