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





/*版頭*/
.Area_top {position: relative;height: 560px;}
.Area_top .main ul {padding: 0; grid-gap: 0;}
.Area_top .main ul li { pointer-events: none;}
.Area_top .main01 {position:absolute;left: 250px;top: 35px;z-index: 2;}
.Area_top .date {position:absolute;left: 890px;top: 35px;z-index: 1;}
.Area_top .sub_bg {position:absolute;top: 365px;left: 280px;z-index: 1;pointer-events: none;}
.Area_top .top_deco01 {position:absolute;top: 30px;left: 180px;z-index: 2;animation: pd3 1s ease-in-out infinite alternate-reverse;animation-delay: 1s;transform-origin: right bottom;}
.Area_top .top_deco02 {position:absolute;top: 380px;left: 185px;z-index: 3;}
.Area_top .top_deco03 {position:absolute;top: 420px;left: 925px;z-index: 3;} 
@media screen and (max-width:767px){
  .Area_top {height: 56.5vw;}
  .Area_top .main01 {left: 12vw;top: 4vw;width: 75%;}
  .Area_top .date {left: 79.5vw;top: 3.8vw;width: 15%;}  
  .Area_top .sub_bg {position: absolute;top: 38vw;left: 12.5vw;width: 72%;}
  .Area_top .top_deco01 {position: absolute;top: 4vw;left: 3vw;width: 19%;}
  .Area_top .top_deco02 {position: absolute;top: 40vw;left: 6vw;width: 16%;}
  .Area_top .top_deco03 {position: absolute;top: 42vw;left: 81vw;width: 13%;}

}

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




/*副標*/
.sub .PD_layout ul {display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 370px;left: 316px;width: 48%;height: 220px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 100%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 38.5vw;left: 20vw;width: 60%;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;}
  }
  


                    
/** 倒數 **/
.TimerNick { z-index:0; display:inline-block; padding-right:14px; height:96px;text-align:right;}
.TimerNick .FontStyle { display:inline-block; margin:0px 0 0 0 ; padding:0; border:0px; width:60px; font: bold 35px/38px Century Gothic; color:#000; /*text-shadow:1px 1px 0px #fff;*/ letter-spacing:-1px; text-align:right; background:transparent; }
.TimerNick div:nth-of-type(2),
.TimerNick div:nth-of-type(3) { width:60px;}
.TimerNick span { padding-left:2px; font: bold 16px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #000;}
    @media screen and (max-width:767px){
        .TimerNick { z-index:2; position: relative; top:0vw; left:0%; display:inline-block; margin:0; padding-right:0%; height:0; padding-bottom:13%; overflow:hidden; text-align:right;  /*background:url(m_time_bg.png?t=1787045474484) no-repeat center top; */background-size:100%;}
        .TimerNick .FontStyle { display:inline-block; margin:0px 0 0 0 ; padding:0; border:0px; width:14vw; font: bold 7.5vw/11vw Century Gothic; color:#000; /*text-shadow:1px 1px 0px #fff;*/ letter-spacing:-1px; text-align:right; background:transparent;}
        .TimerNick div:nth-of-type(2),
        .TimerNick div:nth-of-type(3) { width:9vw;}
        .TimerNick span { padding-left:1vw; font: bold 4vw/11vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #000;}
    }




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