/* Homepage */


#homepage #branding {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
} 
#homepage #mainNav ul {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}
  #homepage #mainNav a:hover {
  background: #FFC600;
}

#homepage #hero {
  	width: 100%;
  	height: 750px;
  	background: #FFF url(../image/home.jpg) no-repeat center center;
  	background-size: cover;
  	border: none;
  	display: block;
    margin: -180px 0 2em;
    padding-top: 180px;
  }
  #homepage #hero img { max-width: 1000px; margin-top: 170px;}
  
section#announcement { background: #c1272d; color: #FFFFC8; padding: .5em 1em .5em; margin: -1em 0 1em; animation: showitem 6s; }
 @keyframes showitem {
   0% { opacity: 0; }
   60% { opacity: 1; }
  }
section#announcement p { margin: 0; text-align: center; }
section#announcement a { color: #FFF; }

.cards-home-nav { 
    clear:both; 
    height: 100%; 
    width: 100%;
    padding: 0 0 2em;
}
  .cards-home-nav ul {
      display: flex;
      overflow: auto;
      white-space: nowrap;
      padding: 0 2em;
      }
  .cards-home-nav li {
      margin: 0;
      padding: 0;
  }
    
  .cards-home-nav li a { 
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 300px;
      height: 300px;
      margin: 0 .3em 0 0;
      padding: .8em;
      background: #E5E5E5;
      border-radius: 9px;
      color: #FFF;
      font-size: 2em;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      text-shadow: 2px 2px 8px #000;  

      }
  .cards-home-nav a:hover,
  .cards-home-nav a:active { opacity: 0.6; transition: opacity .3s; }
      .cards-home-nav a.link-Autoship { background: url(../image/Autoship.jpg) no-repeat center center/cover; }
      .cards-home-nav a.link-ComboPaks { background: url(../image/ComboPaks.jpg) no-repeat center center/cover; }
      .cards-home-nav a.link-Drinks { background: url(../image/Drinks.jpg) no-repeat center center/cover; }
      .cards-home-nav a.link-Nutritional { background: url(../image/Nutritional.jpg) no-repeat center center/cover; }
      .cards-home-nav a.link-WeightManagement { background: url(../image/WeightManagement.jpg) no-repeat center center/cover; }
      .cards-home-nav a.link-BeeProducts { background: url(../image/BeeProducts.jpg) no-repeat  center center/cover; }
      .cards-home-nav a.link-PersonalCare { background: url(../image/PersonalCare.jpg) no-repeat  center center/cover; }
      .cards-home-nav a.link-SkinCare { background: url(../image/SkinCare.jpg) no-repeat  center center/cover; }
      .cards-home-nav a.link-infinite { background: url(../image/infinite.jpg) no-repeat  center center/cover; }
      .cards-home-nav a.link-Sonya { background: url(../image/Sonya.jpg) no-repeat  center center/cover; }
      .cards-home-nav a.link-Logic { background: url(../image/Logic.jpg) no-repeat  center center/cover; }
      .cards-home-nav a.link-Accessories { background: url(../image/Aaccessories.jpg) no-repeat center center/cover; }






/* ----- RWD ----- */

@media only screen and (max-width: 767px)
{

#homepage #hero {
  	height: 450px;
    margin: -160px 0 1em;
    padding-top: 160px;
  }
  
  #homepage #hero img { margin-top: 20%;}
 
section#announcement { margin: 0 0 1em; animation: showitem 6s; }

  
.cards-home-nav { 
    padding: 0 0 .5em;
}
  .cards-home-nav ul {
      padding: 0 1em;
      }
  .cards-home-nav li a { 
      min-width: 190px;
      height: 200px;
      margin: 0 .3em 0 0;
      padding: .5em;
      }


}

@media only screen and (max-width: 767px)
{

#homepage #hero {
  	height: 450px;
    margin: -160px 0 1em;
    padding-top: 160px;
  }
  
  #homepage #hero img { max-width: 100%; margin-top: 160px;}
  
.cards-home-nav { 
    padding: 0 0 .5em;
}
  .cards-home-nav ul {
      padding: 0 1em;
      }
  .cards-home-nav li a { 
      min-width: 190px;
      height: 200px;
      margin: 0 .3em 0 0;
      padding: .5em;
      }

}

/* ----- FONT ----- */

@import url('css2.css'); /* Noto Sans TC */