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

.wholesale{ width:100%; max-width: 1600px;   margin: 0 auto}

.wholesale-product{}

.product-list{ width: 100%; display: flex; flex-wrap: wrap; padding: 10px 5px;;}
.product-item{width:16.6666%;  padding: 10px; }
.product-item a{ display: block; text-align: center;  }
.product-item a img{ display: block; width: 100%; border: 1px solid #cccccc; padding: 5px;   }
.product-item .product-name{  padding: 10px 15px;}
.product-item .product-name *{
    text-align: left!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap; 
}
.product-item .product-name h3{font-size: 12pt; font-weight: bold;}
.product-item .product-name h4{font-size: 10pt; margin-top: 10px;}

.product-item .product-price{ padding: 5px 0px; }

.product-item .product-price label{ display: flex; justify-content: space-between; border-bottom: 1px solid #f1f1f1; padding: 5px 10px;}
.product-item .product-price label .title{ display: block; font-size: 10pt;;}
.product-item .product-price label .content{ display: block;  font-family: 'Anton','微軟正黑體';font-size:10pt; color:#666666}
.product-item .product-price label .content b{  font-size: 14pt; }
 
.wholesale-type{ background: #f1f1f1; padding: 20px 10px;; }
.wholesale-type ul{  display: flex; flex-wrap:  wrap; align-items: center; padding: 5px; }
.wholesale-type ul li{ margin: 5px; padding: 0px; }
.wholesale-type ul li a{   padding: 5px 10px; display: block; font-size: 10pt  }

.wholesale-type ul li.on a{ background: #FF3333; color: #FFFFFF; border-radius: 100px; padding: 5px 20px ; ;;;  }
 

.wholesale-type-nav{background: #00C4CC; display: none;  }
.wholesale-type-nav ul{display: flex; flex-wrap: wrap; align-items: center;   }
.wholesale-type-nav li{}
.wholesale-type-nav li a{ display: inline-flex!important; align-items: center;  padding: 10px 20px; color:#FFFFFF; cursor: pointer;}
.wholesale-type-nav li.on a{ background: rgba(0,0,0,0.25)}
.wholesale-type-nav li.on a i{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);;
    transform: rotate(180deg) ;
}
   
.wholesale-type-date{ max-height: 100px;overflow-x: auto;}

.wholesale-type-month{ display: block;  }
.wholesale-type-month p{ font-size: 9pt; line-height: 50%;}
.wholesale-type-month b{ font-size: 16pt; font-weight: bold;}
.wholesale-type-month i{ font-size: 8pt;}
.wholesale-type-month .on  { border-bottom: 3px solid #555555 ; }

.wholesale-rank{ background: #CCCCCC; padding: 0px 10px;; }
.wholesale-rank ul{  display: flex; flex-wrap: wrap; align-items: center; padding: 0px; }
.wholesale-rank ul li{  }
.wholesale-rank ul li a{  padding: 15px 20px; white-space: nowrap ; display: inline-flex; align-items: center;}

.wholesale-num-count{ padding: 10px 30px;}
.wholesale-num-count b{ color: #CC0000; font-weight: bold;}
@media screen and (max-width:1380px) { 
    .product-item{width:20%;  padding: 10px; }
}

@media screen and (max-width:1024px) { 
    .product-item{width:25%;  padding: 10px; }
}
@media screen and (max-width:768px) { 
    .product-item{width:33.33%;  padding: 10px; }

    .wholesale-type-nav{display: block;  }
    
    .wholesale-type{ padding: 10px 0px;; }
    .wholesale-type-date{  }
    
    ul.wholesale-type-tag{ display: none ;}

    ul.wholesale-type-rank{ display: none ;}

    .wholesale-rank{ padding: 0px ; }
}

@media screen and (max-width:600px) { 
    .product-item{width:50%;  padding: 10px; }
}


.product{ max-width: 1600px; margin: 0px auto; position: relative;}
 
.product-icon{display: flex;  position: relative;  width: 100%;  background: #f1f1f1; padding:10px 15px; align-items: center;    }


.product-icon-L{ flex: 1; display: inline-flex; align-items: center;   }
.product-icon-logo{ display: none;    }
.product-icon-logo img{ display: block;  height:40px;  }

.product-icon-R{ flex: 1; display: inline-flex; align-items: center; justify-content: flex-end;   }
.product-icon-R > *{ margin-left: 20px;}
.product-icon .material-icons{ display:  block; font-size: 20pt; margin: 0px;  padding: 0px; cursor: pointer; }  

.product-icon .cartNumArea{  position: relative; display: flex; align-items: center;}
.product-icon .cartNumArea .cartNum{  position: relative; float: right; position: absolute; left: 12px; top:-5px; z-index: 2;}
.product-icon .cartNumArea .cartNum b{  background: #04bdc4; color: #FFFFFF; float: right; min-width: 20px; height: 16px; display: flex; border-radius: 20px; align-items: center ; justify-content: center; font-size: 8pt; white-space: nowrap; padding: 0px 5px; }

.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: rgba(0,0,0,0.75);  }
.product-icon-more ul li{   border-top:1px solid rgba(255,255,255,0.5)}

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

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

.product-top{ display: flex; flex-wrap: wrap;background: #FFFFFF;   width: 100%; align-items: flex-start ;   border-top: 1px solid #CCCCCC; padding: 20px 0px; justify-content: center;}
.product-photo{ flex:1; max-width: 400px;   }
.product-photo img{ width: 100%}

.product-info{ flex: 2;  padding: 20px; max-width: 800px;;}



.product-code{font-size: 10pt;; color: #666666; display: flex; align-items: center; }
.product-code span{ margin-right: 10px; }
.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{ margin: 15px 0px; display: flex; justify-content: space-between;flex-wrap: wrap; max-width:600px}
.product-info-price label{ font-size: 10pt; color: #666666; padding: 5px; min-width: 100px; margin-bottom: 10px;}
    .product-info-price .title{ font-size: 11pt; font-weight: bold; display: block; background: #999999; color: #FFFFFF;    padding: 5px 10px;text-align: center;}
    .product-info-price .price{ font-size: 12pt; flex:1;color: #FF3333; font-family: 'Anton','微軟正黑體'; font-weight: bold; display: block; display: block; text-align: center;}
    .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-stock{ width: 100%; font-size: 10pt; color: #009966;  }
    .product-price-stock span{  margin-right:5px;  }

.add-favorite{ cursor: pointer; }

.add-favorite-on *{ color: #CC0000!important}


.product-info-search{ position: relative;margin: 20px 0px 20px -10px!important; padding: 0px;}
.product-info-search a{ display: inline-flex;   align-items: center; justify-content: center;     border-radius: 20px; padding: 5px; color: #666666; font-size: 10pt; border: 1px solid #CCCCCC; margin-bottom: 5px;}

.product-info-search a:hover{  border: 1px solid #AAAAAA; background: #fafafa;}
.product-info-search a img{ height: 20px; border-radius: 20px;}
.product-info-search a span{margin: 0px 5px;}
.product-info-search p{ padding: 0px 10px; color: #666666; font-size: 10pt;}



.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-photo-list{ display: flex; flex-wrap: wrap; padding: 10px; background: #f1f1f1;}
.product-photo-list h3{ width: 100%; font-size: 16pt; font-weight: bold; padding: 10px 20px 5px 20px; color: #666666;}
.product-photo-item{ width: 16.6666%; text-align: center; padding: 10px;;} 
.product-photo-item img{ display: block; padding: 10px; background: #FFFFFF;} 
.product-photo-info{ background: #FFFFFF; padding:5px;}

.product-photo-info .addcart{ display:  block; width: 120px;; margin: 10px auto; background: #00C4CC; color: #FFFFFF; font-size: 10pt; padding:5px 10px; border-radius: 50px; cursor: pointer; opacity: 0.8;}
.product-photo-info .addcart:hover{opacity: 1;}


.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-recommend{    padding:20px 0px}
.product-recommend .lb-divider{ margin:10px 0px; color: #666666}
 
.product-icon-black{position: fixed; width:100%;left:0px; top: 0px; z-index: 2; margin: 0px; background: rgba(0,0,0,0.75)}
.product-icon-black .product-icon{ height: 50px; background: none; display; margin: 0 auto; max-width: 1600px;}
.product-icon-black .product-icon *{ color: rgba(255,255,255,0.9);}
.product-icon-black .product-icon .product-icon-logo{ display: block; opacity: 0.8;     }

@media screen and (max-width:1380px) {  
 
    .product-photo-item{ width: 25%;} 
}
@media screen and (max-width:768px) {  
    
    .product-photo-item{  width: 50%; } 

    .product-icon{ height: 50px; position: fixed; top: 0px; z-index: 2; margin: 0px; background: rgba(0,0,0,0.75)!important}
    .product-icon *{ color: rgba(255,255,255,0.9);}
     
    .product-icon-logo{ display: block; opacity: 0.8;     }
    .product-other ul li{ width: 25%;    }
 
    
    .product-top{ margin-top: 50px; padding: 0px;; border: 0px; }
    
    .product-photo{flex:1}
    
    .product-info{flex:1}
}


@media screen and (max-width:600px) {  
    .product-photo-show img{ display: block ; width: 100%;}
    
    .product-top{display: block; }
    .product-photo{ width: 100%;max-width: none; }
    .product-photo *{ max-width: none;}
    .product-info{ width: 100%}
    
    .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{ display: block; position: relative;  ;}
.product-random ul li a img{ display: block; width: 100%;}
.product-random-price{ position: absolute; bottom: 0px; background-image:linear-gradient( 180deg , #00000000 , #000000AA); padding:20px 0px 10px 15px; ; width: 100%; color: #FFFFFF; font-size: 10pt; text-shadow: 0px 0px 5px rgba(0,0,0,0.5);}
.product-random-price b{ font-size: 14pt; font-weight: bold;}
 
 
/* .product-random ul li:nth-last-child(-n+4){display: none;} */

/* .product-show-random ul li{display: block!important} */
/* .product-show-random ul li:nth-last-child(-n+2){display: none!important;} */

.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);}
    
    /* .product-random ul li{display: block!important}  */
    /* .product-show-random ul li:nth-last-child(-n+2){display: block!important} */
}
@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)}
        
/*     
    .product-random ul li:nth-last-child(-n+4){display: none!important;}
    
    .product-show-random ul li:nth-last-child(-n+4){display: block!important;}
    .product-show-random ul li:nth-last-child(-n+2){display: none!important;} */
}

.product-tag{background: #CCCCCC; color: #FFFFFF; }
.product-tag > h3{ text-align: center; padding: 30px 10px;  font-size:24pt; font-weight: bold ; letter-spacing: 5px;}

.tag-title{background: #CCCCCC; color: #FFFFFF; }
.tag-title > h3{ text-align: center; padding: 30px 10px;  font-size:24pt; font-weight: bold ; letter-spacing: 5px;}
.tag-image-title{ min-height: 80px;}
.tag-image-title img{ display: block; width: 100%; max-width: calc(1600px - 28px);   margin: 0 auto; }


@media screen and (max-width:768px) {  
    .tag-image-title{   overflow: hidden; display: flex; align-items: center; justify-content: center;}
    .tag-image-title img{ display: block; width: 160%; max-width: none;   margin: 0 auto; }
}

.tag-content{  margin: 0px auto; width: 100%;max-width: 1600px; padding:0px 0px; min-height: 300px;}
.tag-empty,
.rank-empty{ text-align: center; min-height: 300px; color: #999999; padding: 50px; }



.tag-num-count{ margin: 0 auto; max-width: 1600px; padding:15px 40px;   }
.tag-num-count b{ color: #CC0000; font-weight: bold;}
.tag-type{ }


.tag-type .data-width{ padding: 0 15px;}

.tag-type-main{  padding: 0px  0px; display: flex;; margin-top: 20px; white-space: nowrap; overflow-y: auto;}

.tag-type-main a{  padding: 10px 15px 10px 20px; cursor: pointer;}
.tag-type-main a i{ margin:0px 5px;}
.tag-type-main a.on{ background: #f1f1f1;   padding: 10px 15px 10px 30px; border-radius:10px 10px 0px 0px;}
.tag-type-main a.on i{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);;
    transform: rotate(180deg) ;
}
   
.tag-type-main a{ display: inline-flex; align-items: center; padding: 10px;}

.tag-type-sub{ display: none; background: #f1f1f1; padding: 20px;}
.tag-type-sub-visble{ display: block;}
.tag-type-sub a{ display: inline-block; padding:0px 5px ; margin:8px 5px  }
.tag-type-sub a.on{ background: #00C4CC; color: #FFFFFF;border-radius:15px 15px 0px  ; padding:8px 18px ; margin: 0px 5px;  }


.tag-product-random{ padding: 0px 18px;}
 

@media screen and (max-width:768px) {  
    
    .tag-num-count{ padding:15px 40px;;;}
    
    .tag-product-random{ padding:0px;}
}

.rank-product-random{ padding: 20px 18px;}
.rank-product-random ul li{ width: calc(100%/8)}



.rank-product{ padding: 0px 6px;}
.rank-product ul{ display: flex ; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.rank-product ul li{ width: calc(100%/6 - 20px);  margin:10px; border: 0px solid #666666; border-radius:  0px 0px; overflow: hidden; box-shadow: 5px 5px 12px rgba(0,0,0,0.2); position: relative;  ; }
/* .rank-product ul li:nth-child(even){background: #cccccc;}
.rank-product ul li:nth-child(even) img{opacity: 0.5; } */
.rank-product ul li a{ display: block; position: relative;  ;}
.rank-product ul li a img{ display: block; width: 100%;}
.rank-product-price{ position: absolute; bottom: 0px; background-image:linear-gradient( 180deg , #00000000 , #000000AA); padding:20px 0px 10px 15px; ; width: 100%; color: #FFFFFF; font-size: 10pt; text-shadow: 0px 0px 5px rgba(0,0,0,0.5);}
.rank-product-price b{ font-size: 14pt; font-weight: bold;}


.rank-product-num{ width: 50px; height: 70px; position: absolute; left: 10px ; top:0px; z-index: 2;   background: #444; color: rgb(211, 185, 152); text-align: center ; display: flex; align-items: center; justify-content: center; padding: 5px 0px 10px 0px; border-radius: 0px 0px 10px 10px; font-size: 14pt;}

.rank-product-num b{  font-weight: bold; white-space: nowrap;}
.rank-product-num b::before{content:"#";  display: block; text-align: center; font-weight: 100;margin-bottom: -5px;   } 
 
.rank-product ul li.rank-product-1:nth-child(-n+10){ width: calc(100%/5 - 20px);  } 
.rank-product ul li.rank-product-1:nth-child(-n+10) .rank-product-num{ width: 60px; height: 80px;; font-size: 18pt; }
.rank-product ul li.rank-product-1:nth-child(-n+10) .rank-product-num b::before{content:"♕"; }

.rank-product ul li.rank-product-1:nth-child(1) .rank-product-num{background: #AA0000;  }
.rank-product ul li.rank-product-1:nth-child(2) .rank-product-num{background: #000099;    }
.rank-product ul li.rank-product-1:nth-child(3) .rank-product-num{background: #00AA00; background: #00a1a7; }
 

@media screen and (max-width:1024px) {  
    .rank-product{ padding: 0px 8px;}

    .rank-product ul li{ width: calc(100%/5 - 16px);  margin:8px;  }

    .rank-product-num{ width: 40px; height: 60px; font-size: 12pt; } 

    .rank-product ul li.rank-product-1:nth-child(-n+20){width: calc(100%/4 - 16px);}
    .rank-product ul li.rank-product-1:nth-child(-n+20) .rank-product-num{width: 50px; height: 70px; font-size: 16pt;  }
    .rank-product ul li.rank-product-1:nth-child(-n+20) .rank-product-num b::before{content:"♕"; }
    

}

@media screen and (max-width:768px) {  
    .rank-product{ padding: 0px 7px;}
    .rank-product ul li{ width: calc(100%/4 - 14px);  margin:7px;  }
    .rank-product ul li.rank-product-1:nth-child(-n+20){width: calc(100%/2 - 14px);}
}


@media screen and (max-width:600px) {  
    .rank-product{ padding: 0px 7px;}
    .rank-product ul li{ width: calc(100%/3 - 10px);  margin:5px;  }
    
    .rank-product ul li.rank-product-1:nth-child(-n+20){width: calc(100%/3 - 10px);}
    .rank-product ul li.rank-product-1:nth-child(-n+10){width: calc(100%/2 - 10px);}
    
    .rank-product ul li.rank-product-1:nth-child(-n+20) .rank-product-num b::before{content:"#"; }
    .rank-product ul li.rank-product-1:nth-child(-n+10) .rank-product-num b::before{content:"♕"; }

    .rank-product-num{ width: 40px; height: 60px; font-size: 12pt; } 

    .rank-product ul li.rank-product-1:nth-child(-n+20) .rank-product-num{width: 40px; height: 60px; font-size: 12pt;  }
    .rank-product ul li.rank-product-1:nth-child(-n+10) .rank-product-num{width: 50px; height: 70px; font-size: 16pt;  }
 
}