@charset "utf-8";
/*基本*/








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

.Area h3 {font-size: 5vw ;}
.Area .warningTxt h3 {font-size: 1em ;}
.PD_layout.PD_layout-D3_02 ul li .PD h3 {font-size: 7vw ;}

.Area_hero {position: relative; aspect-ratio: 960 / 960; /*overflow: hidden;*/}

.Area_hero--TimerNick { top: 44.5vw; left: 7vw; font-size: 3.2vw;}

/*toppd*/
.Area_hero--PD { z-index: 4;position: absolute; top: 49vw; left: 0vw; width: 100%; }
.Area_hero--PD .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { top: 47vw; left: 0vw; width: 100%;}

/* 主標 */
.Area_hero--title { position: absolute; top: 16vw; left: 11vw; width: 80%; .swiper-pagination { display: none; }}

/* 副標 */
.Area_hero--subtitle { position: absolute; top: 39.5vw; left: 32vw; width: 45%; }

/* logo */
.Area_hero--logo { position: absolute; top: 2vw;left: 0vw; width: 100%;}

/* date */
.Area_hero--tag {z-index: 5; position: absolute; top:33vw; left: 8vw; width: 24%;}

/*作圖區客製設定*/
.Area_drawing-area-1x1 .PD_layout:not(.PD_layout-btn) li .PD_img {margin-top:-3vw;}
.Area_drawing-area-1x1.item_left .PD_layout:not(.PD_layout-btn) li .PD_into {margin-top:3vw ;margin-left:-4vw;}
.Area_drawing-area-1x1.item_right .PD_layout:not(.PD_layout-btn) li .PD_into {margin-top:3vw ;margin-right:-4vw;}
.Area_drawing-area-1x1 .PD_layout[data-pd-h3="5"] .PD h3 span {  background-color: #fff23e;}
.Area_drawing-area-1x1 .PD_layout .PD h4 {color: #ffffff;}
.Area_drawing-area-1x1 .PD_layout .PD p del {color: #eeeeee;}
.Area_drawing-area-1x1 .PD_layout .PD p {color: #fff23e;}
.Area_drawing-area-1x1 .PD_layout:not(.PD_layout-btn) li{background-size: 96%;}


.Area_bn-grid-1x1 .PD_layout ul { padding: 0 1vw;}
.Area_bn-grid-1x1 .PD_layout ul li img{ border-radius:3vw ;}


.Area_brand-1-plus-2 .b_box .PD_layout.PD_layout-D3_02 { background: #ffffff00 url(logo_text_bg.png?t=1784704336456) top center no-repeat; background-size: 100%;}
.Area_brand-1-plus-2 .Areapadding .b_box-grid1 .PD_layout ul { border-radius:0 0 3vw 3vw;}

}

/*pc ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {

  .Area_hero { position: relative; aspect-ratio: 960 / 958; /*overflow: hidden;*/ }
  .Area_hero .PD img {width:100%;} 
    
  .Area_hero--TimerNick { top: 475px; left: 58px; font-size: 30px;}

/*toppd*/
  .Area_hero--PD { z-index: 2;position: absolute; top: 450px; left: 0px; width: 960px; }
  .Area_hero--PD .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { top: 454px; left: 0px; width: 100%;}

/*主標 */
  .Area_hero--title { position: absolute; top: 190px; left: 88px; width: 789px;}

/*副標 */
  .Area_hero--subtitle {z-index: 6; position: absolute; top: 374px; left: 274px; width: 400px;}

/*logo */
  .Area_hero--logo {  z-index: 1;position: absolute; top: 100px; left: 0px; width: 1220px;}

/* date */
  .Area_hero--tag { z-index: 5;position: absolute; top: 339px; left: 92px; width: 170px;}


/*作圖區客製設定*/
  .Area_drawing-area-1x1 .PD_layout:not(.PD_layout-btn) li .PD_img {margin-top:-20px;}
  .Area_drawing-area-1x1.item_left .PD_layout:not(.PD_layout-btn) li .PD_into {margin-top:25px ;margin-left:-40px;}
  .Area_drawing-area-1x1.item_right .PD_layout:not(.PD_layout-btn) li .PD_into {margin-top:25px ;margin-right:-36px;}
  .Area_drawing-area-1x1 .PD_layout[data-pd-h3="5"] .PD h3 span {  background-color: #fff23e;}
  .Area_drawing-area-1x1 .PD_layout .PD h4 {color: #ffffff;}
  .Area_drawing-area-1x1 .PD_layout .PD p del {color: #eee;}
  .Area_drawing-area-1x1 .PD_layout .PD p {color: #fff23e;}
  .Area_drawing-area-1x1 .PD_layout:not(.PD_layout-btn) li{background-size: 100%;}

  .Area_drawing-area-1x1 .PD_layout ul li:nth-of-type(odd) {top: -30px;height:380px ;} 
  .Area_drawing-area-1x1 .PD_layout ul li:nth-of-type(even) {top: 80px;height:380px ;}

  .Area_bn-grid-1x1 .PD_layout ul { padding: 0;}
  .Area_bn-grid-1x1 .PD_layout ul li img{ border-radius:18px ;}

  .Area_brand-1-plus-2 .b_box .PD_layout.PD_layout-D3_02 { background: #ffffff00 url(logo_text_bg.png?t=1784704336456) top center no-repeat; background-size: 100%;}
  .Area_brand-1-plus-2 .Areapadding .b_box-grid1 .PD_layout ul { border-radius:0 0 30px 30px;}


}



.Area.Area_hero .PD_layout li .PD_img img { border-radius: 0;}




/*動畫----------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*跳跳跳*/
.uptodown {-webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-name: uptodown;  animation-name: uptodown;  -webkit-animation-iteration-count: infinite; /*animation-iteration-count:infinite;*/ -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes uptodown { 

 0%    { transform: translate(0,0px) ;}
 10%    { transform: translate(0,0px) ;}
 15%    { transform: translate(0,-10px) ;}
 20%    { transform: translate(0,0px) ;}
 100%  { transform: translate(0,0px) ;}
	
}

/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 1.5s ease-in-out infinite alternate;
  animation:uptodown-play 1.5s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { -webkit-transform: translate(0,10px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes uptodown-play { 
0%   { transform: translate(0,-10px);} 
100% { transform: translate(0,0);}
}

.uptodown-play2 { -webkit-animation:uptodown-play 1.8s ease-in-out infinite alternate;
  animation:uptodown-play 1.8s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { -webkit-transform: translate(0,10px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes uptodown-play { 
0%   { transform: translate(0,-10px);} 
100% { transform: translate(0,0);}
}

/*飄-左右*/
.rf-play { -webkit-animation:rf-play 1.8s ease-in-out infinite alternate;
  animation:rf-play 1.8s ease-in-out infinite alternate;}
@-webkit-keyframes rf-play { 
0%   { -webkit-transform: translate(-30px,15px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes rf-play { 
0%   { transform: translate(-30px,15px);} 
100% { transform: translate(0,0);}
}

/*順時鐘轉轉*/
.rotate-play1 { -webkit-animation:rotate3-play 80s linear infinite ;
  animation:rotate3-play 80s linear infinite ;}
@keyframes rotate3-play {
100% { 
transform: rotate(360deg);
}
}

.rotate-play2 { -webkit-animation:rotate3-play 50s linear infinite ;
  animation:rotate3-play 50s linear infinite ;}
@keyframes rotate3-play {
100% { 
transform: rotate(-360deg);
}
}

.rotate-play3 { -webkit-animation:rotate3-play 10s linear infinite ;
  animation:rotate3-play 10s linear infinite ;}
@keyframes rotate3-play {
100% { 
transform: rotate(360deg);
}
}

/*逆時鐘轉轉*/
.rotate-playa { -webkit-animation:rotate-playa 80s linear infinite ;
  animation:rotate-playa 80s linear infinite ;}
@keyframes rotate-playa {
100% { 
transform: rotate(-360deg);
}
}

.rotate-playb { -webkit-animation:rotate-playb 50s linear infinite ;
  animation:rotate-playb 50s linear infinite ;}
@keyframes rotate-playb {
100% { 
transform: rotate(-360deg);
}
}

.rotate-playc { -webkit-animation:rotate-playc 25s linear infinite ;
  animation:rotate-playc 25s linear infinite ;}
@keyframes rotate-playc {
100% { 
transform: rotate(-360deg);
}
}