/* Layout */

html, body { width:100%; height:100%; margin:0px; padding:0px; }

body { overflow-x: hidden!important; }

* {
  box-sizing: border-box;
}

.container { 
    width:1200px;
    margin:0 auto;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
}


@keyframes fade-in-effect {
  0%   { 
opacity:0;

}
  100% { 
opacity:1;
}
}

.no-spacing { margin:0; padding:0; }

p, ul, ol, li, h1, a, .product-line-up-product-description, .product-line-up-item-description, .product-line-up-item-price, div { 
    font-family: 'Noto Sans TC', serif;
    font-weight: 400;
    font-style: normal; }

h1, .best-of-elixir-title, .product-page-title { font-family: 'Noto Sans TC', serif; font-weight: normal; font-style: normal; margin:0 0 30px 0; padding:0; font-size:30px; color:#d19a5f; text-transform:uppercase;}

p, ul, ol, li { font-size:16px; line-height:26px; }


.clear { clear:both; }

.responsive { max-width:100%; height:auto; display:block; }

.img-responsive { width:100%; height:auto; display:block; }

.page-top { padding-top:60px; position: relative;}

.margin-bottom-60px { margin-bottom:60px }
.margin-bottom-30px { margin-bottom:30px }
.margin-bottom-20px { margin-bottom:20px }
.margin-bottom-10px { margin-bottom:10px }

.margin-top-60px { margin-top:60px }
.margin-top-30px { margin-top:30px }
.margin-top-10px { margin-top:10px }

.margin-right-20px { margin-right:20px }

#top { background:#e9ceaf; width:100%; height:60px; position:fixed; transition: top 0.3s; top: 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)!important; z-index:99;}

.logo { position:absolute; left:30px; top:11.5px; z-index:100;}

.logo img { transition:0.3s; }
.logo img:hover { opacity:0.6; }

.nav { position:absolute; width:100%; text-align:center; top:20px; z-index:99;}

.nav-link { font-size:14px; font-family: 'Noto Sans TC', serif;
    font-weight: 400;
    font-style: normal; text-transform:uppercase; color:#64312f!important; text-decoration:none; margin-left:5px; margin-right:5px; transition:0.3s; position:relative; padding:5px 10px; }

.nav-link:hover { opacity:0.6; }

.nav-link:hover::after {
  animation-name: animate-nav-link;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content:' ';
  position:absolute;
  height:1px;
  width:0%;
  margin:auto;
  left:0;
  right:0;
  bottom:0;

}

@keyframes animate-nav-link {
  0%   { 
width:0%;
height:1px;
background:#64312f;

}
  50%   { 
width:100%;
height:1px;
background:#64312f;

}
  100% { 
width:100%;

background:#64312f;

}
}

.social-links { position:absolute; top:16px; right:30px; z-index:100;}

.social-icon { display:inline-block; margin:0 3px; transition:0.3s; }

.social-icon:hover { opacity:0.6; }

/* Contact Us */

.contact-container {
    width:1050px; 
    margin:0 auto; 
    padding-top:120px;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
}

.contact-text-field { float:left; width:500px;}

.contact-container .left { margin-right:50px; }

.contact-text-field span {
  font-family: 'Noto Sans TC', serif;
  font-size: 16px;
  display:block;
  margin-bottom:5px;
}

.contact-text-field input {
  width: 100%;
  height:40px;
  padding:5px;
  font-family: 'Noto Sans TC', serif;
   font-size: 16px;
   margin-bottom:11px;
}

.contact-container textarea {
  width: 100%;
  padding:5px;
  font-family: 'Noto Sans TC', serif;
   font-size: 16px;
}

.contact-container  input[type=submit] {
  background-color: #e9ceaf;
    padding: 8px 20px 6px 20px;
    color: #64312f;
    border: 1px solid #e9ceaf;
    font-size: 18px;
    transition: 0.3s;
    margin: 0 auto;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Noto Sans TC', serif;
    width:100px;
}

.contact-container  input[type=submit]:hover { background-color: #fff; }

.contact-container p {  font-family: 'Noto Sans TC', serif; font-size:20px; }
.contact-container a {  font-family: 'Noto Sans TC', serif; font-size:20px; color:#64312f; transition:0.3s; text-decoration:none;}
.contact-container a:hover { opacity:0.6;}


.contact-container { width:1050px; margin:0 auto; padding-top:120px; }

.contact-us-footer { position:fixed; bottom:0; width:100%; }


/* Responsive */

.desktop { display:block; }
.mobile { display:none; }

.nav-desktop { display:block; }
.nav-mobile { display:none; }

.desktop-only { display:block; }

@media only screen and (max-width : 1199px) {
    
.nav-desktop { display:none; }
.nav-mobile { display:block; } 


#top { height:50px; }


.logo { left:15px; top:15px; }

.logo img { width:60%; }

.page-top { padding-top:50px; }

.social-links { position:relative; top:0; right:0; margin:10px 15px;}

.social-icon { margin:0 3px; }


/* Contact Us */

.contact-container { width:100%; margin:0 auto; padding:100px 20px 0 20px; }

.contact-text-field { float:none; width:100%;}

.contact-container .left { margin-right:0; }

.contact-text-field input {

   margin-bottom:20px;
}


}


/* Product Menu */

.nav-product-menu {
  position: relative;
  display: inline-block;
}

.nav-product-menu .nav-product-menu-text {
  visibility: hidden;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0px;
  opacity: 0;
  transition: opacity 1s;
  
}

.nav-product-menu .nav-product-menu-background { 
 background-color: #f7f0e8;
 color:#000;
 text-align: left;
 padding: 20px 0 20px 35px;
 margin-top:22px;
 text-transform:none;
 z-index: 99;
 display:block;
 width:715px;
 margin-left:-20px;
}

.nav-product-menu .nav-product-menu-background::after { 
 content:'';
 position:absolute;
 background: rgb(233,193,147);
 background: linear-gradient(90deg, rgba(233,193,147,1) 0%, rgba(255,244,230,1) 100%);
 width:715px;
 height:1px;
 left:0;
 bottom:0;
 margin-left:-20px;
}

.nav-product-menu:hover .nav-product-menu-text {
  visibility: visible;
  opacity: 1;
}

.product-column { float:left; width:220px;  }

.product-column span { font-family: 'Noto Sans TC', serif; font-weight: 500; font-style: normal; font-size:18px; display:block; margin-bottom:10px; color:#000;}
.product-column a { text-decoration:none; font-size:14px; display:block; margin-bottom:5px; }

.link { color:#64312f; }

.link:hover { opacity:0.6; }

/* Nav Mobile */

#nav-mobile-button { position: absolute; top:7.5px; right:10px; }

#nav-mobile-button { cursor: pointer; padding: 10px 35px 16px 0px; }
#nav-mobile-button span, #nav-mobile-button span:before, #nav-mobile-button span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 1px;
  width: 35px;
  background: #633132;
  position: absolute;
  display: inline-block;
  content: '';
}
#nav-mobile-button span:before {
  top: -6px; 
}
#nav-mobile-button span:after {
  bottom: -6px;
}
/*
#nav-mobile-button span, #nav-mobile-button span:before, #nav-mobile-button span:after {
  transition: all 200ms ease-in-out;
}
*/
#nav-mobile-button span, #nav-mobile-button span:before, #nav-mobile-button span:after {
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
        transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
}
#nav-mobile-button.active span {
  background-color: transparent;
}
#nav-mobile-button.active span:before, #nav-mobile-button.active span:after {
  top: 0;
}
#nav-mobile-button.active span:before {
  transform: rotate(45deg);
}
#nav-mobile-button.active span:after {
  transform: translateY(-6px) rotate(-45deg);
  top: 6px;
}

#nav-mobile-button-text { position:absolute; bottom:-10.5px; font-size:9.5px; color:#633132; text-transform:uppercase; letter-spacing: 1.4px; font-family: 'Noto Sans TC', serif; cursor:pointer ;}

#nav-mobile { 
  background:#f7f0e8; 
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  top: 50px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  
    
}

.nav-mobile-link { cursor:pointer; position:relative; display:block; font-family: 'Noto Sans TC', serif; color:#64312f!important; text-decoration:none; font-size:16px;  border-bottom:1px solid #eee0cf; padding:12px 20px 10px 20px; }
.nav-mobile-link-last { cursor:pointer;  position:relative;  display:block; font-family: 'Noto Sans TC', serif; color:#64312f!important; text-decoration:none; font-size:16px; padding:12px 20px 10px 20px;}

.nav-mobile-products-show-button::after { content:"+"; font-family: 'Noto Sans TC', serif; font-size:30px; color:#64312f; top:0; right:19px; position:absolute; }
.nav-mobile-products-hide-button::after { content:"-"; font-family: 'Noto Sans TC', serif; font-size:30px; color:#64312f; top:0; right:19px; position:absolute; }


.nav-arrow::after {
  position:absolute;
  border: solid #64312f;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:19px; right:24px;
  content:"";
}

.product-nav-arrow::after {
  position:absolute;
  border: solid #64312f;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:6px; right:24px;
  content:"";
}
#nav-mobile-products { 
    
    padding:20px 0;
    position:relative; width:100%;
    background: rgb(233,193,147);
    background: linear-gradient(90deg, rgba(255,230,202,1) 0%, rgba(255,244,230,1) 100%);
    
}




#nav-mobile-products span { 
    
   font-family: 'Noto Sans TC', serif; font-weight: bold; font-style: normal;
    font-size:16px;
    display:block;
    padding:10px 30px;
    color:#000;
    
}

.nav-product-link { 
    
   cursor:pointer; position:relative; display:block; font-family: 'Noto Sans TC', serif; color:#64312f!important; text-decoration:none; font-size:16px; padding:0 30px;
   
}


/* Best of Elixir */

.best-of-elixir-container { 

    width:1200px;
    margin:0 auto;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
        
}

.best-of-elixir-container .button { float:left; width:400px; position:relative; transition:0.3s;}
.best-of-elixir-container .button:hover {  opacity:0.8;  }
.best-of-elixir-container .button p { position:absolute; top:30px; left:15px;  color:#000;  font-size:15px; line-height:16px; width:260px; }
.best-of-elixir-container .button span { font-family: 'Noto Sans TC', serif; font-style: normal; position:absolute; top:20px; left:15px; color:#311301; font-weight:bold; display:block; margin-bottom:5px; font-size:17px;}
.best-of-elixir-container .button a { text-decoration:none; }
.best-of-elixir-container span.remark{
    color: #FFF;
    top: auto;
    bottom: 15px;
    font-size: 9px;
    font-weight: 100;
    line-height: 1;
    width:calc(100% - 30px);
}

@media only screen and (min-width : 1200px) and (max-width : 1300px) {

.nav-link { margin-left:1px; margin-right:1px; }

.social-links { right:10px;}

.social-icon {  margin:0 1px; }

}

@media only screen and (min-width : 1001px) and (max-width : 1199px) {

.container { 
    width:1000px;
}

}

@media only screen and (min-width : 901px) and (max-width : 1000px) {

.container { 
    width:900px;
}

}

@media only screen and (min-width : 769px) and (max-width : 900px) {

.container { 
    width:769px;
}


}


@media only screen and (min-width : 769px) and (max-width : 1199px) {
 
.desktop-only { display:none; }
 
.tablet { display:block; }

.best-of-elixir-container { 

    width:769px;
        
}

.best-of-elixir-container .button { float:left; width:384.5px; margin:0 auto; position:relative; transition:0.3s;}


}

/* Product Line-up */

.product-line-up { 
    background: rgb(240,224,204); 
    background: linear-gradient(180deg, rgba(240,224,204,1) 0%, rgba(255,255,255,1) 40%); 
    width:100%; 
    padding-bottom:60px; 
    margin-bottom:30px;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards; 
    opacity:0;

}

.product-line-up-container { width:1200px; margin:0 auto; text-align: center;}

.product-line-up-container span { font-family: 'Noto Sans TC', serif; font-style: normal; color:#d19a5f; font-size:30px; display:block; padding:60px 0; width:600px; margin:0 auto; text-align:center;}

.product-line-up-container p { margin:0 auto; padding:0 auto; }


.product-line-up-product { width:320px; display: inline-block; margin-right:80px; }
.product-line-up-product:last-child { margin-right:0; }

.product-line-up-product-title { font-family: 'Noto Sans TC', serif; font-style: normal; font-weight:bold; font-size:20px; line-height:22px; display:block; margin-bottom:5px; text-align:center; }
.product-line-up-product-description { font-size:16px; line-height:18px; display:block; margin-bottom:30px; text-align:center;}

.product-line-up-item { width:160px; float:left; margin:0 auto;  }

.product-line-up-item-title {  font-family: 'Noto Sans TC', serif; font-size:16px; line-height:18px; display:block; margin-bottom:5px; text-align:center; padding:0 15px; }
.product-line-up-item-description { font-size:13px; line-height:15px; display:block; margin-bottom:15px; text-align:center; padding:0 15px; }
.product-line-up-item-price { font-size:13px; display:block; margin-bottom:20px; text-align:center; padding:0 15px;  }

.product-line-up-button { background-color: #e9ceaf; padding:10px 20px; color:#64312f; border:1px solid #e9ceaf; font-size:16px; transition:0.3s; margin:0 auto; text-decoration:none; cursor:pointer;}

.product-line-up-button:hover { background-color: #fff; }

.product-line-up-button-top-spacing { margin-top:20px; }


/* Footer */

.footer { background-color:#2b0000; width:100%; padding:10px 0; margin:0 auto; box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)!important;}

.footer p { color:#cfc5aa; font-size:12px; }

.footer-spacing { margin-bottom:60px; }

.footer a { display:inline-block; color:#fff; font-size:12px; text-decoration:none; margin:0 10px; transition:0.3s;}
.footer a:hover { opacity:0.6; }

/* Tablet */

@media only screen and (min-width : 769px) and (max-width : 1199px) {

.product-line-up-container { width:769px; margin:0 auto; }

.product-line-up-container span { font-family: 'Noto Sans TC', serif; font-style: normal; color:#d19a5f; font-size:30px; display:block; padding:60px 0; width:600px; margin:0 auto; text-align:center;}

.product-line-up-container p { margin:0 auto; padding:0 auto; }


.product-line-up-product { width:246.3px; margin-right:15px; }
.product-line-up-product-last { width:246.3px; float:left; }

.product-line-up-product-title { font-family: 'Noto Sans TC', serif; font-style: normal; font-weight:bold; font-size:20px; line-height:22px; display:block; margin-bottom:5px; text-align:center; }
.product-line-up-product-description { font-size:16px; line-height:18px; display:block; margin-bottom:30px; text-align:center;}

.product-line-up-item { width:123.1px; float:left; margin:0 auto;  }

.product-line-up-item-title { font-size:16px; line-height:18px; display:block; margin-bottom:5px; text-align:center; padding:0 15px; }
.product-line-up-item-description { font-size:13px; line-height:15px; display:block; margin-bottom:15px; text-align:center; padding:0 25px; }
.product-line-up-item-price { font-size:13px; display:block; margin-bottom:20px; text-align:center; padding:0 15px;  }

.product-line-up-button { background-color: #e9ceaf; padding:10px 20px; color:#64312f; border:1px solid #e9ceaf; font-size:16px; transition:0.3s; margin:0 auto; text-decoration:none;}

.product-line-up-button:hover { background-color: #fff; }

.product-line-up-button-top-spacing { margin-top:20px; }

}

/* Mobile */

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

.desktop { display:none !important;}
.mobile { display:block }

.nav-desktop { display:none; }
.nav-mobile { display:block; } 

.tablet { display:none; }
.desktop-only { display:none; }


.container { 
    width:100%;
    margin:0 auto;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards; 
    opacity:0;
}

.best-of-elixir-container { 

    width:100%;
    margin:0 auto;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards; 
    opacity:0;
        
}

h1, .best-of-elixir-title, .product-page-title { font-family: 'Noto Sans TC', serif; font-weight: normal; font-style: normal; margin:0 0 30px 0; padding:0 20px; font-size:30px; color:#d19a5f; text-transform:uppercase;}

.footer-spacing { margin-bottom:20px; }

.best-of-elixir-container .button { float:none; width:100%; }
.best-of-elixir-container .button p { position:absolute; top:30px; left:15px;  color:#000;  font-size:15px; line-height:15px; width:270px; }
.best-of-elixir-container .button span { font-family: 'Noto Sans TC', serif; font-style: normal; position:absolute; top:20px; left:15px; color:#311301; font-weight:bold; display:block; margin-bottom:5px; font-size:17px;}


.product-line-up-container { width:100%; margin:0 auto; }

.product-line-up-container span { font-family: 'Noto Sans TC', serif; font-style: normal; color:#d19a5f; font-size:30px; display:block; padding:60px 20px; width:100%; margin:0 auto; text-align:center;}

.product-line-up-product { width:320px; float:none; margin:0 auto; }
.product-line-up-product-last { width:320px; float:none; margin:0 auto; }

.product-line-up-product-title { font-family: 'Noto Sans TC', serif; font-style: normal; font-weight:bold; font-size:20px; line-height:22px; display:block; margin-bottom:5px; text-align:center; }
.product-line-up-product-description { font-size:16px; line-height:18px; display:block; margin-bottom:30px; text-align:center;}

.product-line-up-item { width:160px; float:left; margin:0 auto;  }

.product-line-up-item-title { font-size:16px; line-height:18px; display:block; margin-bottom:5px; text-align:center; padding:0 15px; }
.product-line-up-item-description { font-size:13px; line-height:15px; display:block; margin-bottom:15px; text-align:center; padding:0 25px; }
.product-line-up-item-price { font-size:13px; display:block; margin-bottom:20px; text-align:center; padding:0 15px;  }

.product-line-up-button { background-color: #e9ceaf; padding:10px 20px; color:#64312f; border:1px solid #e9ceaf; font-size:16px; transition:0.3s; margin:0 auto; text-decoration:none;}

.product-line-up-button:hover { background-color: #fff; }

.product-line-up-button-top-spacing { margin-top:20px; }

.contact-us-footer { position:relative; }

}