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



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

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

.Area_bn-carousel.bgbox_04 { background-color: #fef9f0;width:98% ;border: 1vw solid #45c1a0; border-radius:4vw 4vw 6vw 6vw; margin:10vw auto 10vw; height:77vw ;left:0vw ;}
.Area_bn-carousel .Area_title { margin-top:-11vw ; height:23vw ;}

.Area_bn-grid-1x1 .PD_layout ul {padding: 0 ;width:100% ;grid-gap: 0 ;}

.Area_pd-grid-4x2 {padding-bottom: 4vw ;}

.Area_pd-carousel.bgbox_03 { background-color: #fef9f0;width:98% ;border: 1vw solid #45c1a0; border-radius:4vw 4vw 6vw 6vw; margin:10vw auto 5vw; height:84vw ;left:0vw ;}
.Area_pd-carousel .Area_title { margin-top:-13vw ; height:23vw ;}

.Area_bn-grid-3x1--bg.bgbox_01 { background-color: #fef9f0;width:96% ;border: 1vw solid #45c1a0; border-radius:4vw 4vw 6vw 6vw; margin:10vw auto 0; height:210vw ;left:1vw ;}

.Area_bn-grid-3x1--bg.bgbox_02 { background-color: #fef9f0;width:96% ;border: 1vw solid #45c1a0; border-radius:4vw ; margin:10vw auto 0; height:164vw ;left:1vw ;}

.Area_bn-grid-1x1.more ul {width: 80%;margin:10vw auto 20vw;}

.Area_bn-grid-1x1.logobtn {padding-top: 0px;width:80% ;}
  
}

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

  .Area_bn-grid-3x1.btnx6 .PD_layout[data-pd-li=BN] ul, .PD_layout[data-pd-li=BN-AWD] ul, .PD_layout[data-pd-li=PDBN] ul {padding: 5px 0; grid-gap: 0px;}
  .Area_bn-carousel.topbn .Area_swiper_box { overflow: inherit; }
  .Area_bn-carousel.topbn .Area_swiper {  overflow: inherit; }
  .Area_bn-carousel.topbn .Area_swiper { height:500px ; }
  
  .Area_bn-carousel.topbn .Area_swiper_box .PD_layout ul {  height:500px ;}
  
  .Area_bn-carousel.bgbox_04 { background-color: #fef9f0;width:1100px ;border: 8px solid #45c1a0; border-radius:100px ; margin-top:200px ; height:612px ;}
  .Area_bn-carousel.bgbox_04 .Area_swiper_box .PD_layout ul {  height:416px ;}
  .Area_bn-carousel .Area_title { margin-top:-124px ; height:224px ;}
  
  .Area_pd-grid-4x2 {padding-bottom: 40px ;}

  .Area_pd-carousel .Area_swiper_box .PD_layout li, .Area_swiper_box .PD_layout li { height:480px ;}
  .Area_pd-carousel .Area_swiper_box .PD_layout ul {  height:360px ;}

  .Area_pd-carousel.bgbox_03 { background-color: #fef9f0;width:1100px ;border: 8px solid #45c1a0; border-radius:100px ; margin-top:200px ; height:558px ;}
  .Area_pd-carousel .Area_title { margin-top:-124px ; height:224px ;}

  .Area_bn-grid-3x1--bg.bgbox_01 { background-color: #fef9f0;width:1100px ;border: 8px solid #45c1a0; border-radius:100px ; margin-top:110px ; height:670px ;}

  .Area_bn-grid-3x1--bg.bgbox_02 { background-color: #fef9f0;width:1100px ;border: 8px solid #45c1a0; border-radius:100px ; margin-top:110px ; height:850px ;}

  .Area_bn-grid-1x1.more ul {width: 483px;}

  .youtubeArea { margin:0 auto ; width: 92%; height: auto; }

  .Area_bn-grid-1x1.logobtn {padding-top: 0px;width:600px ;}

}

/*上標下標圓標關閉*/
.prdImgWrap .imgTag { display:none !important;}
.prdImgWrap .imgTagRectangle { display:none !important;}
.prdImgWrap .imgTagBottom { display:none !important;}

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

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