.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 100%;
  z-index: +1;
  background: #eee;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.navigation > ul { width: 100%; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #E75D52;
  color: #000;
}

.navigation > ul > li > a:hover,
.navigation > ul > li:hover > a { 
  background: #E75D52;
  color: #fff; }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: '禄';
  position: absolute;
  right: 1em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  background: #eee;
}

.navigation ul ul a { color: #000; }

.navigation ul ul a:hover { color: #fff; }

.navigation ul ul li:hover > a {
  background: #E75D52;
  color: #fff;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #34A65F;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}


/* Home Page */
.panel-default > .panel-heading.hot { 
	color: white;
	background: #d31920; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #d31920 , #be1e2d); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #d31920 , #be1e2d); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #d31920 , #be1e2d); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #d31920 , #be1e2d); /* Standard syntax */
}

.panel-default > .panel-heading.new { 
	color: white;
	background: #afd5f1; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #afd5f1 , #afbde0); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #afd5f1 , #afbde0); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #afd5f1 , #afbde0); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #afd5f1 , #afbde0); /* Standard syntax */
}

.panel-default > .panel-heading.approved { 
	color: white;
	background: #00ad4e; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #00ad4e , #00a2a2); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #00ad4e , #00a2a2); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #00ad4e , #00a2a2); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #00ad4e , #00a2a2); /* Standard syntax */
}

.panel-title { font-size: 18px; }
.panel-title-sm { font-size: 14px; font-weight: lighter; display: inline-block; }
.panel-heading a { color: white; }

a.product-link { position: relative; width: 100%; display: inline-block; color: #666; text-align: center; }
a.product-link:hover { opacity: 1.0; }

a.product-link.border { border: 1px solid #eee; }
a.product-link.border:hover { border: 1px solid #E75D52; }

.product-thumbnail-index { width: 165px; height: 165px; max-width: 165px; }
.product-thumbnail-ratiokeeper {position: relative; width: 100%; padding-top: 100%; overflow: hidden; }
.product-thumbnail { object-fit: cover; width: 100%; height:100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.product-detail-thumbnail { width: 100%; height: auto; }

.product-link .product-name { overflow: hidden; height: 40px; padding-top: 5px; font-size: 12px !important; letter-spacing: 1px; line-height: 1.5 !important; text-align: center; }

.product-price-member { font-size: 14px; font-weight: 300; letter-spacing: 1px; color: #E75D52; text-align: center; margin-top: 20px; margin-bottom: 0; }
.product-price { font-size: 12px; font-weight: 300; letter-spacing: 1px; color: #000; text-align: center; }

/* Shop Home Page */
.shop_swiper_wrapper { height: 300px; }
img.promotion { width: 100%; }
.cs-content { padding: 10px; border: 1px solid #ddd; }
.icon-search3 { color: red; }
.panel-title { position:relative; }

/*Grid Advanced Setting*/
@media (min-width: 992px) {
    .affix { top: 70px; }
    .tabcontent { padding: 6px 12px; }
}

@media (max-width: 991px) and (min-width: 768px) {
  .shop_contact {display: none;}
  .affix { position: relative; top:default;}

  .navigation-container { width:100%; height: 70px; overflow: hidden; }
  .navigation { overflow:hidden; -ms-overflow-style: none; -moz-overflow-style: none; height:70px; overflow: -moz-scrollbars-none; overflow-x:scroll; background:none; }
  .navigation::-webkit-scrollbar { width: 0 !important } /*for chrome safari*/
  .navigation > ul { display: -webkit-flex; display: flex; height: 50px; padding-bottom: 20px !important; }
  .navigation > ul > li { float: left;  }
  .navigation > ul > li > a { border: none; background: #d31920; color: white; border-radius: 21px; margin-right: 20px; white-space: nowrap; }
  .navigation > ul > li > ul { display: none;}

  .tabcontent { padding: none; }

}

@media (max-width: 767px) and (min-width: 480px) {
  .shop_contact {display: none;}
  .affix { position: relative; top:default;}

  .navigation-container { width:100%; height: 70px; overflow: hidden; }
  .navigation { overflow:hidden; -ms-overflow-style: none; -moz-overflow-style: none; height:70px; overflow: -moz-scrollbars-none; overflow-x:scroll; background:none; }
  .navigation::-webkit-scrollbar { width: 0 !important } /*for chrome safari*/
  .navigation > ul { display: -webkit-flex; display: flex; height: 50px; padding-bottom: 20px !important; }
  .navigation > ul > li { float: left;  }
  .navigation > ul > li > a { border: none; background: #d31920; color: white; border-radius: 21px; margin-right: 20px; white-space: nowrap; }
  .navigation > ul > li > ul { display: none;}

  .tabcontent { padding: none; }
}

@media (max-width: 479px) {
  .shop_contact {display: none;}
  .affix { position: relative; top:default;}

  .navigation-container { width:100%; height: 70px; overflow: hidden; }
  .navigation { overflow:hidden; -ms-overflow-style: none; -moz-overflow-style: none; height:70px; overflow: -moz-scrollbars-none; overflow-x:scroll; background:none; }
  .navigation::-webkit-scrollbar { width: 0 !important } /*for chrome safari*/
  .navigation > ul { display: -webkit-flex; display: flex; height: 50px; padding-bottom: 20px !important; }
  .navigation > ul > li { float: left;  }
  .navigation > ul > li > a { border: none; background: #d31920; color: white; border-radius: 21px; margin-right: 20px; white-space: nowrap;}
  .navigation > ul > li > ul { display: none;}

  .tabcontent { padding: none; }
}

/* Shop Breancrump */
.breadcrump {
  background: #efefef;
  overflow: hidden;
}
.breadcrump li {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.breadcrump a {
  display: inline-block;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
  color: #aaa;
}

.breadcrump a:hover {
	color: #f26522;
}

.shop_contact { position: fixed; top: 200px; right: -200px; width: 200px; background: white;
    -moz-transition: right 1.3s;
    -webkit-transition: right 1.3s;
    -o-transition: right 1.3s;
    transition: right 1.3s; }
.shop_contact.active { right: 0; }
.shop_contact .contact-toggle { transform: rotate(-90deg); position: absolute; top: 100px; left: -71px; }

/* Shop Product Detail */
.product-detail .product-preview-border { border: 1px solid #eee; }
.product-detail .product-thumbnail-margin { padding-left: 0; padding-right: 5px; }
.product-detail .product-name { font-size: 18pt; }
.product-detail .product-desc { font-size: 14pt; color: #aaa; }
.product-detail .product-name-sm { font-size: 9pt; padding: 10px; height: 50px; overflow: hidden; }

.product-detail .price-box { background: #eee; padding: 10px 20px; display: inline-block; width: 100%; margin-top: 15px; }
.product-detail .price-box .price { color: #000; font-size: 14pt; font-weight: bold; }
.product-detail .price-box .price-member { color: #f26522; font-size: 18pt; font-weight: bold; }

.product-detail .label { display: inline-block; font-size: 12pt; color: #888; }

.product-detail .quantity { float: initial; display: inline-block; }

.product-detail .add-to-cart { background: #f26522; color: white; font-size: 14pt; font-weight: bold; padding: 5px 20px; margin-left: 10px; }

.product-detail .tabcontent img { max-width: 100%  !important; height: auto !important; }

.shop-intro { border: 1px solid #eee; padding: 5px 20px; }
.shop-intro .shop-image { width: 50px; }
.shop-intro .shop-name { font-size: 14pt; }
.shop-intro .shop-desc { font-size: 10pt; color: #ccc; }


/* Side Nav In Product detail*/

.side-nav-search { overflow: auto; border-bottom: 1px solid #ccc; background-color: #f1f1f1; margin-bottom: 20px; height: 50px;}
.side-nav-search form { margin: 8px 0; }
.nav-tree .sub-menu-child a { padding-left: 10px; color: gray; font-weight: lighter; }
.nav-tree .sub-menu-child-child a { padding-left: 20px; color: gray; font-weight: lighter; }


/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    border: 1px solid #ccc;
    border-top: none;
}

#comment img.avatar { width: 80px; height: auto; }
#comment .name { font-size: 12pt; color: #666; }
#comment .created_at { font-size: 10pt; color: #ccc; }
#comment .content { font-size: 12pt; }
#comment .reply { font-size: 12pt; color: #f26522; }