@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: 1230px;}
.Area_top .main ul {padding: 0; grid-gap: 0;}
.Area_top .main ul li { pointer-events: none;}
.Area_top .main01 {position:absolute;left: 0px;top: 60px;z-index: 2;}
.Area_top .date {position:absolute;left: 970px;top: 0px;z-index: 4;}

  /*版頭品輪播*/
  .Area_top .Area_PD2 input{position: absolute;top: 250px;left: 300px;}
  .Area_top .Area_PD2{width: 120%;position: relative;top: 300px;left: -120px;z-index: 15;}
  .Area_top .Area_PD2 ul li{display: flex;grid-gap:0;margin-left: 0;}
  .Area_top .Area_PD2 ul li{}
  .Area_top .Area_PD2 ul li img{width: 100%;}

@media screen and (max-width:767px){
  .Area_top {height: 122.5vw;}
  .Area_top .main01 {left: 3vw;top: 6vw;width: 65%;}
  .Area_top .date {left: 75vw;top: 0vw;width: 25%;}  
    /*版頭品輪播*/
	.Area_top .Area_PD2{width: 100%;position: relative;top: 24vw;left: 10vw;z-index: 15;}
	.Area_top .Area_PD2 ul li{display: flex;grid-gap:0;margin-left: 0;}
	.Area_top .Area_PD2 ul li{}
	.Area_top .Area_PD2 ul li img{width: 100%;}
  
}



/*副標*/
.sub .PD_layout ul {display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 620px;left: -65px;width: 40%;height: 225px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 65%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 81.6vw;left: 3vw;width: 37%;z-index: 30;overflow: hidden;}
.sub .PD_layout .PD img {width: 100%;padding: 0;}
}

  


/*光*/
.righttoleft1{-webkit-animation-duration: 2.5s;  animation-duration: 2.5s;  -webkit-animation-name: righttoleft1;  animation-name:righttoleft1;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;  animation-timing-function: ease-in;}
@-webkit-keyframes righttoleft1 {
	 0% { transform: translate(0,0); opacity:0  } 
	 25% { transform: translate(0,0); opacity:0  } 
	 50%{opacity:1}
	 75%{ transform: translate(50px,0);opacity:0}
	 100%{ transform: translate(50px,0);opacity:0}
}
@keyframes righttoleft1 { 
	 0% { transform: translate(0,0); opacity:0  } 
	 25% { transform: translate(0,0); opacity:0  } 
	 50%{opacity:1}
	 75%{ transform: translate(50px,0);opacity:0}
	 100%{ transform: translate(50px,0);opacity:0}
}

/*光*/
.righttoleft2{-webkit-animation-duration: 2.5s;  animation-duration: 2.5s;  -webkit-animation-name: righttoleft2;  animation-name:righttoleft2;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;  animation-timing-function: ease-in;}
@-webkit-keyframes righttoleft2 {
	 0% { transform: translate(0,0); opacity:0  } 
	 25% { transform: translate(0,0); opacity:0  } 
	 50%{opacity:1}
	 75%{ transform: translate(0,50px);opacity:0}
	 100%{ transform: translate(0,50px);opacity:0}
}
@keyframes righttoleft2 { 
	 0% { transform: translate(0,0); opacity:0  } 
	 25% { transform: translate(0,0); opacity:0  } 
	 50%{opacity:1}
	 75%{ transform: translate(0,50px);opacity:0}
	 100%{ transform: translate(0,50px);opacity:0}
}





.layout_PD01.pdaa1 {width: 96%;}
@media screen and (max-width:767px){
  .layout_PD01.pdaa1 {width: 100%;}
}



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