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





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

.Area_coupon3_002 .Area_boxstyle_box1 .allinone1,.allinone2 { color: #000000; }

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



.Area_title .PD_img { z-index: 5;position:relative;margin:0vw auto -3vw; width: 100% ;}

.Area_coupon3_002 .Area_boxstyle_box1 .allinone1,.allinone2 { color: #000000; }

.Area_drawing-area-2x1 .Area_content .PD_logo {z-index: 4;text-align: left!important;margin:-48.5vw 0vw 0vw !important; width: 15vw !important;height:auto !important;}
.Area_drawing-area-2x1 .Area_content .PD_logo img { width: 100% !important;box-shadow: 0 .1em .5em 0 rgba(0, 0, 0, 0)!important;}
.Area_drawing-area-2x1 .Area_content .PD_into {margin:32vw auto 0; width: 92% ;}

.Area_drawing-area-2x1 .Area_content .PD_img { z-index: 5;position:relative;margin:12vw auto 3vw; width: 80% ;}
.Area_drawing-area-2x1 .PD_layout-CSSBG_01 .PD .PD_img { padding-top: 0vw;}

}

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

  .Area_title {  width: 440px ;left:360px ;}

  .Area_drawing-area-2x1 .Area_content .PD_logo {z-index: 4;text-align: left!important;margin:-540px 0px 0px !important; width: 150px !important;height:auto !important;}
  .Area_drawing-area-2x1 .Area_content .PD_logo img { width: 100% !important;box-shadow: 0 .1em .5em 0 rgba(0, 0, 0, 0)!important;}
  .Area_drawing-area-2x1 .Area_content .PD_into {margin:368px auto 0 ; width: 92% ;}
  .Area_drawing-area-2x1 .Area_content .PD_img { z-index: 5;position:relative;margin:138px auto 66px; width: 384px ;}
  .Area_drawing-area-2x1 .PD_layout-CSSBG_01 .PD .PD_img { padding-top: 0;}
  .Area_drawing-area-2x1 .PD_layout .PD p { height: 3em; line-height: 3em;}

}


/*作圖區客製設定*/
.Area_drawing-area-2x1 .PD_layout[data-pd-h3="5"] .PD h3 span {  color: #000000;background-color: #dfdfdf; }
.Area_drawing-area-2x1 .PD_layout a {  color: #000000; }
.Area_drawing-area-2x1 .PD_layout .PD p { color: #4863ff;}
.Area_drawing-area-2x1 .PD_layout .PD p del { color: #b3b3b3;}


/*保健錨點公版設定 ----------------------------------------------------------------------------------------------------------------- */

.Area_group_8x11 .PD_layout.PD_layout-D3_01 .PD h3 { color: #ffffff;}

/*mb*/
@media screen and (max-width:767px){
.Area_group_8x11 .Area_pd-grid-4x2 { width: 100% ;}
}

/*pc*/
  @media screen and (min-width: 768px) {
  .Area_group_8x11 .PD_layout.PD_layout-D3_01 .PD img { width: 100%;margin-top:-24px ; }
  .Area_group_8x11 .Area_pd-grid-4x2 { width: 960px ;}
  .Area_group_8x11 .PD_layout-D3_01 { height:80px ; } 
  .Area_group_8x11 .PD_layout-D3_01 .PD h3 { top: 32%; left: 50%; font-size: 40px;}
  }

/*Phone錨點*/
.Area_floorPD_NavArea_tabbar {
  margin: 0 auto 5vw ;
  width: 94%;
}
.Area_floorPD_NavArea_tabbar.cate-fixed {
  width: 100%;
}
.Area_floorPD_NavArea_tabbar .Nav_box {
  border-radius: 8px;
  -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
          box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
}
.Area_floorPD_NavArea_tabbar .Nav li {
  overflow: visible;
}
.Area_floorPD_NavArea_tabbar.cate-fixed .Nav_box {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
          box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
}
/*保健錨點公版 -------------------------------------------------------------------------------------------------------------------- */







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


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