@import url('https://fonts.googleapis.com/css?family=Anton');

.category{ display: flex; position: relative; min-height: 100%; max-width: 1600px;   margin: 0 auto}

.category-header{background:#333333; padding:8px 10px; }
.category-type{ width:25%; max-width: 150px;min-width: 100px;  padding: 20px 0px;}
.category-list{ flex: 1; padding: 0px 0px; padding-top:10px ; min-height:500px}

.category-type h3{  text-align: center; font-weight: bold ; border-bottom:2px solid #ddd ; padding: 10px 0px;      }
.category-type ul{  width:100%;     display: flex; flex-direction: column;      }
.category-type ul li{ margin: 5px 0px; order:2}
.category-type ul li a{ display: block; text-align: center; margin: 5px;padding: 5px;; border-radius:20px ; font-size: 10pt; cursor: pointer;}

.category-type ul li.on{ order:1 }
.category-type ul li a.on,
.category-type ul li.on a{ background:#CC0000; color: #FFFFFF }



@media screen and (max-width:768px) { 
    .category-list{ padding-top:55px ;}
    .category-type h3{  margin-top:50px;     }
    .category-type ul{  width:25%; max-width: 150px;min-width: 100px; height: 100%;   position: fixed;top:0px; overflow-y: auto; padding: 60px 0px 50px 0px; background: #FFFFFF   }

    .category-sub{ display: block;   }
    .category-sub-type { position: relative; width:100%; max-width: none ;margin: 0px; padding: 0px 0px; padding-top: 60px;}
    .category-sub-type h3{ display: none;}
    .category-sub-type ul{ display: flex ; flex-direction: row;  width:100%; min-width: 100px;   position: relative; max-width: none ; overflow-y: auto; margin: 0px; padding: 0px;}
    .category-sub-type ul li{ flex:1;  white-space: nowrap; margin: 0px; padding: 0px; order: 2; }
    .category-sub-type ul li a{ border-radius: 0px; margin: 0px; padding: 15px 25px; font-size: 12pt;  }
    .category-sub-type ul li a:hover{background:#f1f1f1  }

    .category-sub-list{ padding-top:0px ;}
    .category-sub-type .arrow-back{ display: none;}

    .category-sub-type ul li.on { order:1}
    .category-sub-type ul li.on a{ background:#D1BFA6; color: #FFFFFF }
}

.category-one{ padding: 10px; display: none;;}
.category-one > img{border-radius: 10px; margin-bottom: 10px; width: 100%}

.category-two{ background: #FFFFFF;margin-bottom: 10px; border-radius: 10px}

.category-two > img{border-radius: 10px 10px 0px 0px;   width: 100%}
.category-two > h3{ padding: 15px 20px; padding-bottom: 0px; font-weight: bold;;}

.category-two ul{ width: 100%; display: flex; flex-wrap: wrap; padding: 10px;;}
.category-two ul li{width:16.6666%;  padding: 5px; }
.category-two ul li a{ display: block; text-align: center;  }
.category-two ul li a img{ display: block; width: 100%;   }
.category-two ul li a p{ display: block; text-align: center;  padding: 5px 0px; font-size: 10pt; }

.category-two ul li a.on{ background:#CC0000; color: #FFFFFF }

@media screen and (max-width:1024px) { 
    .category-two ul li{width:25%;   }
}


.category-type-link-back a{ background: #009966}
/*分類產品*/

.category-sub-header{display: flex; align-items: center;  }
.category-sub-header-back{  margin-left: -5px; margin-right: 5px; }
.category-sub-header-back a{ color: #FFFFFF;}
.category-sub-header-back a i{  font-size: 30pt;  }
.category-sub-header-search{ flex: 1}

.category-sub-type{}


.category-product-top-image{border-radius: 20px;   width: 100%; padding: 10px; padding-bottom: 0px}


.category-product-nav{ background: #ffffff; display: flex; flex-wrap: wrap; margin:0px 10px; margin-top:10px   }

.category-product-nav div{ border-right:1px solid #f1f1f1;   }
.category-product-nav a{ display: flex;   padding: 15px 25px; align-items: center ; justify-content: center }
.category-product-nav a *{-webkit-transition: all 0s;-o-transition: all 0s;-moz-transition: all 0s;-ms-transition: all 0s;}
.category-product-nav a.on{ background: #CCCCCC;padding: 15px 15px 15px 25px; color:#FFFFFF   }
.category-product-nav a:hover{ background: #FF3333; color:#FFFFFF  }

@media screen and (max-width:768px) { 
    
    .category-product-nav div{flex:2  }
    
    .category-product-nav a{  padding: 15px 5px; white-space: nowrap}
    .category-product-nav a.on{ padding: 15px 0px 15px 10px; } 

    .category-two ul li{ padding: 5px 2px; }
    .category-two ul li a p{  padding: 5px 0px; font-size: 9pt;}
}

.category-product-nav a span{     }
.category-product-nav a i{ margin-bottom: -3px; }

.category-product{ max-width:1600px; margin: 0 auto;   }

.category-product > h3{ padding: 10px; padding-bottom: 0px; font-weight: bold;;}

.category-product ul{ width: 100%; display: flex; align-items: flex-start;  flex-wrap: wrap; padding:5px;;}
.category-product ul li{width:calc(16.66% - 10px); margin: 5px;background: #FFFFFF;  padding: 0px; }
.category-product ul li a{ display: block; text-align: center; }
.category-product ul li a img{ display: block; width: 100%; min-height: 80px; background: #fafafa url('/image/no_photo.png') center center  ;  background-size: 50px;     }
.category-product ul li a p{ display:none; text-align: center;  padding: 5px;;  font-size: 10pt;}


.category-product-keyword{ text-align: center; padding: 0px 3px;    height: 30px; margin-top: -30px; background: rgba(0,0,0,0.6); overflow: hidden; }

.category-product-keyword b{ display: inline-block;font-size: 9pt;border: 1px solid #D1BFA6; border-radius: 5px; color: #D1BFA6; line-height: 100%; padding: 2px 4px; margin: 6px 0px}

.category-product-name{ width: 100%; padding:10px 15px;}
.category-product-name *{
    text-align: left!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap; 
}
.category-product-name h3{font-size: 10pt; font-weight: bold;}
.category-product-name h4{font-size: 8pt; padding: 5px 0px;}

.category-product-info{ display: flex; flex-wrap: wrap; align-items: center; padding: 0px 10px 10px 15px;}


.category-product-info > .price{ font-size: 10pt; flex:1;color: #666666; font-family: 'Anton'; white-space: nowrap; }
.category-product-info > .price b{ font-size: 14pt;white-space: nowrap;   }
.category-product-info > .price del{ display: inline-block;  margin-left: 5px; font-size: 10pt;  color: #FF3333;   font-family: 'Anton'  }

.category-product-info > .add-cart{  text-align: right;  }
.category-product-info > .add-cart a{ background: #D1BFA6;;  display: inline-block; padding: 1px 10px ;border-radius: 100px;color: #FFFFFF;font-size: 16px; line-height: 100%;font-weight: bold;cursor: pointer;}
.category-product-info > .add-cart a:hover{ background: #CC0000}
.category-product-info > .add-cart a i{ margin: 0px; padding: 0px; color: #FFFFFF;font-size: 16px;}

.category-product .add-favorite{ cursor: pointer; color: #CCCCCC ; position: absolute; right: 10px; top: 10px;}
.category-product .add-favorite:hover{   color: #b93131 ;}
.category-product .add-favorite-on{  color: #CC0000 }

.category-product-info > .soldout a{ background: #CCCCCC!important ; font-size: 11pt; padding: 2px 10px;;;}

.category-product-new-date{ display: block ; width: 100%; font-size:8pt; color: #CCCCCC;}
@media screen and (max-width:1024px) {  
    
    .category-product ul li{width:calc(25% - 10px)}
}
@media screen and (max-width:768px) { 

    
    .category-product ul li{width:calc(33.3333% - 10px)}
}
@media screen and (max-width:480px) {  
    
    .category-product ul li{width:calc(50% - 10px)}
}

.product{ max-width: 1200px; margin: 0px auto; position: relative;}
 
.product-icon{display: flex;  position: relative;  width: 100%;  background: #f1f1f1; padding: 0px 10px; margin-top: 15px; margin-bottom: -10px;   }
.product-icon-L > *,.product-icon-R > *{ position: relative; display: inline-block; padding:5px; cursor: pointer; width: auto;;}


.product-icon i{ font-size: 20pt;}

.product-icon-more {   }
.product-icon-more ul{ display: none; position: absolute; top: 40px; right: 0px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 3; white-space: nowrap; background: #FFFFFF;  }
.product-icon-more ul li{   border-top:1px solid #CCCCCC }

.product-icon-more ul li a{display: block; padding:10px 30px; text-align: center  }

.product-icon-more ul li a:hover{ background: #009966; color: #FFFFFF }
.product-icon-more ul li:first-child{ border-top:0px }

.product-icon-L{ flex: 1;  }
.product-icon-R{ flex: 1; text-align: right  }

.product-top{ display: flex; flex-wrap: wrap;background: #FFFFFF;   width: 100%; align-items: center ; margin-top: 10px;}
.product-photo{ flex: 3; width: 50%  ;  }
.product-photo img{ width: 100%}

.product-info{ flex: 3;  padding: 30px;}



.product-code{font-size: 10pt;; color: #666666}
.product-title{font-size: 14pt; font-weight: bold}
.product-title-sub{font-size: 11pt; padding: 5px 0px;}
.product-intro{font-size: 11pt;; padding:10px 0px;}

.product-info-price{ display: flex; flex-wrap: wrap; align-items: center; margin: 15px 0px;}
    .product-info-price .price{ font-size: 12pt; flex:1;color: #CC0000; font-family: 'Anton'; }
    .product-info-price .price b{ font-size: 18pt;white-space: nowrap;   }
    .product-info-price .price del{ display: inline-block;  margin-left: 5px; font-size: 12pt;  color: #666666;   font-family: 'Anton'  }

    .product-price-cart a{ cursor: pointer;display: flex; align-items: center ; justify-content: center; border-radius:30px ; min-width: 80px; background: #009966 ; padding: 5px 15px; color: #FFFFFF}
    .product-price-cart a i{ font-size: 16pt;}
    .product-price-cart a span{ font-size: 10pt; display: none; margin-left: 5px;}
    .product-price-cart a:hover span{   display: block;}
    .product-price-cart a.soldout{ cursor: default; color: #666666; background: #666666; color: #FFFFFF; }
    
    .product-price-stock{ width: 100%; font-size: 10pt; color: #009966;  }
    .product-price-stock span{  margin-right:5px;  }

.add-favorite{ cursor: pointer; }

.add-favorite-on{ color: #CC0000}

.product-category{background: #D1BFA6; color: #FFFFFF; font-size: 10pt;; margin: 10px 0px; padding: 10px 20px;}
.product-category-item{ display: flex; align-items: center;}
.product-category-item a{ margin:0px 10px; color: #FFFFFF; font-weight: bold; }

.product-content{background: #FFFFFF;  min-height: 300px;margin: 10px 0px;}

.product-content-sorry{background: #FFFFFF; margin: 10px 0px; display: flex; align-items: center; padding: 20px; background: #00996633; justify-content: center;}
.product-content-sorry img{  width: 15%;; max-width: 160px; margin-right: 20px;;}
.product-content-sorry p{ color: #009966; font-size: 10pt; line-height: 180%;font-weight: bold  }
.product-content-sorry p a{ color: #009966; font-weight: bold; margin: 0 5px;}

.product-info-block{    margin: 5px 0px;margin-top: 15px; }
.product-info-block h3{padding:5px 0px; font-size: 12pt; font-weight: bold;}
.product-info-block h5{ font-size: 10pt;font-weight: bold}

.product-other{  } 
.product-other ul{ display: flex; flex-wrap: wrap}
.product-other ul li{ width: 20%;    }
.product-other ul li img{ display: block; width: 100%; border: 1px solid #cccccc}
.product-other ul li a{ display: block;padding:5px 10px 5px 0px}


.product-other ul li.on img{ width: 100%; border: 2px solid #cc0000}


.product-recommend{    padding:20px 0px}
.product-recommend .lb-divider{ margin:10px 0px; color: #666666}
 

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

    .product-icon{ position: absolute; top: 10px; z-index: 2; margin: 0px; background: none }

    .product-top{display: block;margin-top: 0px; }
    .product-photo{ width: 100%}
    .product-photo *{ max-width: none;}
    .product-info{ width: 100%}

    .product-other ul li{ width: 25%;    }
}


@media screen and (max-width:600px) {  
    .product-price-cart{ width: 100%; margin: 10px -10px;}
    .product-price-cart a span{  display: block;}
}

.share-content{}
.share-content h3{ padding:12px; background: #D1BFA6; color: #FFFFFF;}
.share-content .shareUrl{ width: 96%; margin: 2% auto;  padding: 10px; border: 1px solid #CCCCCC; text-align: center;  font-size: 14pt;;;}
.share-content ul{ display: flex; align-items: center; justify-content: center; }
.share-content ul li{ margin: 10px;}
.share-content ul li a{ opacity: 0.2; cursor: pointer;}

.share-content ul li a:hover{ opacity: 0.5;}
.share-content ul li a img{width: 30px;}


.product-random{}
.product-random ul{ display: flex ; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.product-random ul li{ width: calc(100%/11); }
.product-random ul li:nth-child(even){background: #cccccc;}
.product-random ul li:nth-child(even) img{opacity: 0.5; }
.product-random ul li a{  ;}
.product-random ul li a img{ display: block; width: 100%;}

.product-random-change{ position: fixed; bottom:80px; text-align: center; width: 200px; left: calc(50% - 100px); z-index: 10;}

.product-random-change a{ display: inline-flex;   padding: 10px 20px ; border: 0px; border-radius: 50px; justify-content: center; }

@media screen and (max-width:1280px) {  
    .product-random ul li{width: calc(100%/7);}
}
@media screen and (max-width:768px) {  
    .product-random ul li{ width: calc(100%/5)}
}
@media screen and (max-width:500px) {  
    .product-random ul li{ width: calc(100%/3)}
}