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








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

.mo_top { z-index: -1 ; position:absolute ; top: 44px ; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; background-size: 100%; }	
.m_repeat_bg { z-index: -2 ; position:absolute ; top: 0 ;left:0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;}

.Area_pd-grid-4x2.toppdx3 { z-index: 10 ;}
.Area_pd-grid-4x2.toppdx3 ul {border-radius:2vw ; border: 1vw solid #523523;}

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

.pdx6 .Area_pd-grid-4x2--bg {  width: 100%; padding-bottom:1vw ; border-radius:4vw ; }

.PD_layout .PD h3 { top: 5vw !important; }

/*toppd*/
.Area_hero--PD { z-index: 10;position: absolute; top: 40.8vw; left: 0vw; width: 100%; }

/* 主標 */
.Area_hero--title { position: absolute; top: 8.8vw;right:0 ;  left: 14vw; width: 75%; .swiper-pagination { display: none; }}

/* 副標題 */
.Area_hero--logo { position: absolute; top: 31.5vw;left: 25vw; width: 50%;}

/* date */
.Area_hero--tag { position: absolute; top: 7vw; right: 35vw; width: 30%;}

/*ghost*/
.Area_hero--PD.ghost1 { z-index: 0; position: absolute; top: 31vw; left: 7vw; width: 20%;}
.Area_hero--PD.ghost2 { z-index: 10; position: absolute; top: 76vw; left: 80vw; width: 22%;}
.Area_hero--PD.ghost3 { z-index: 12; position: absolute; top: 79vw; left: 6vw; width: 28%;}
.Area_hero--PD.ghost4 { z-index: 10; position: absolute; top: 34vw; left: 76vw; width: 17%;}
.Area_hero--PD.ghost5 { z-index: 10; position: absolute; top: 8vw; left: 85vw; width: 15%;}

.Area_drawing-area-2x1.item .PD_layout-CSSBG_01 .PD .PD_img {margin:2vw 2vw ;width: 90%;}
.Area_drawing-area-2x1.item .PD_into {margin-left:2vw ;margin-top:1vw ;width: 91%;}

  
}

/*pc ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  
  .momologo  {  position: absolute; top: 15px; left:152px; }

  .Area_bgtop { position:absolute; }
  .pc_repeat_bg { z-index: -4 ; position:absolute ; top: 0 ; left: 0 ; width:100%; height:100%; background-position:center top; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}

  .Area_pd-grid-4x2.toppdx3 { z-index: 5 ;}
  .Area_pd-grid-4x2.toppdx3 ul { border: 10px solid #523523;}

  .Area_hero { position: relative; aspect-ratio: 960 / 1012; /*overflow: hidden;*/ }
  .Area_hero .PD img {width:100%;} 
    
  .pdx6 .Area_pd-grid-4x2--bg { left: 50%; width: 1000px; transform: translateX(-50%); padding-bottom:17px ; border-radius:30px ; }

  .PD_layout .PD h3 { top: 51px; }

/*toppd*/
  .Area_hero--PD { z-index: 2;position: absolute; top: 389px; left: 0px; width: 960px; }

/*主標 */
  .Area_hero--title { position: absolute; top: 92px; left: 148px; width: 683px;}
  .swiper-pagination { display: none; }

/*副標題 */
  .Area_hero--logo {  z-index: 1;position: absolute; top: 298px; left: 244px; width: 473px;}

/* date */
  .Area_hero--tag { position: absolute; top: 70px; left: 336px; width: 288px;}

/*ghost*/
  .Area_hero--PD.ghost1 { z-index: 10; position: absolute; top: 293px; left: 73px; width: 190px; }
  .Area_hero--PD.ghost2 { z-index: 10; position: absolute; top: 696px; left: 772px; width: 266px; }
  .Area_hero--PD.ghost3 { z-index: 10; position: absolute; top: 663px; left: -92px; width: 327px; }
  .Area_hero--PD.ghost4 { z-index: 10; position: absolute; top: 363px; left: 709px; width: 180px; }
  .Area_hero--PD.ghost5 { z-index: 10; position: absolute; top: 84px; left: 847px; width: 146px; }
}













/*跳跳跳*/
.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);
}
}