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

.home-block{max-width:1600px; margin: 5px auto;   }
.home-block > h3{font-size: 16pt;; padding: 5px 15px;   margin: 10px ; margin-bottom: 0px;; font-weight: bold; }

.ad-home{   margin: 0px auto 10px auto; width: 100%; }

.home-ad-icon{margin-top: 10px; }
.home-ad-icon ul{flex-wrap:wrap; padding:10px 20px}
.home-ad-icon ul li{ width: 10%;   margin: 10px 0px 0px 0px; }
.home-ad-icon ul li a{ display: block; width: auto;max-width: 125px; margin: 0 auto; ; }
.home-ad-icon ul li a img{ display: block; border-radius:50%;  width: 75%;margin: 0 auto;    }
.home-ad-icon ul li a h3{ font-size: 10pt; padding: 8px 0px; font-weight: bold; }



.home-ad-image{ padding: 0px; }
.home-ad-image ul{flex-wrap:wrap; align-items: flex-start; justify-content:center; padding:0px 10px;; }
.home-ad-image ul li{ width: 25%; padding: 10px;  }

.home-ad-image img{  display: block;     }
.home-ad-image h3{ font-size: 10pt; padding: 10px 5px; font-weight: bold; display: none;  }

@media screen and (max-width:1280px) {  
    .home-ad-image ul li{ width: 25%;  }
}
@media screen and (max-width:768px) { 
     

    .ad-home{   margin:0px auto 0px auto ; }
    .home-ad-icon ul li{ width: 20%;    }
    .home-ad-image ul li{ width: 50%;  }
}
/*tag*/
.home-tag{  width:96%;display: flex; flex-wrap: wrap;   max-width:1600px; margin: 30px auto;   overflow: hidden;  } 
.home-tag a{  display: block;   padding:5px;opacity: 0.7;}
.home-tag span{  display: block;   padding:10px 30px; background: #666; color:rgba(0,0,0,0.5);  
         font-weight: bold; border-radius: 15px 15px 0px;}
.home-tag a:hover{  opacity: 1; } 

/*rank*/
.home-rank{width:100%;   max-width:1600px; margin: 20px auto;}
.home-rank ul {display: flex; flex-wrap: wrap; }
.home-rank ul li{ width: 25%; ; display: inline-flex; align-items: center;padding: 0px;}

.home-rank ul li a{ display: flex; align-items: center; justify-content: center;  width: 100%; height: 100%; min-height: 60px;}
.home-rank-image{   overflow: hidden; display: flex; align-items: center; justify-content: center;}
.home-rank-image img{ display: block; width: 200%; max-width: none;   margin: 0 auto; }


.home-rank-text{ overflow: hidden;text-overflow:ellipsis;; white-space:nowrap; font-size: 18pt; font-weight: bold; padding:0px 20px; }

/*product*/
.home-product{  width: 100%;  max-width:1600px; margin: 0px auto;  } 
.home-product h3{ font-size: 20pt;  text-align: center; padding: 20px 0px; font-weight: bold; color: #999999;} 
.home-product ul{ display: flex ; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.home-product ul li{ width: calc(100%/11); position: relative;  }
.home-product ul li:nth-child(even){background: #cccccc;}
.home-product ul li:nth-child(even) img{opacity: 0.5; }

.home-product ul li a{display: block;  position: relative; }
.home-product ul li a img{display: block;}
 
.home-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);}
.home-product-price b{ font-size: 14pt; font-weight: bold;}
 
.home-product ul li a:hover .home-product-price{padding:15px 0px 15px 15px; }

@media screen and (max-width:1280px) {  
    .home-product ul li{width: calc(100%/7);}
    
    .home-rank-text{  font-size: 16pt;padding:0px 10px; }

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

    .home-rank ul li{ width: 50%;  }
    
    .home-rank-text{  font-size: 18pt;padding:0px 10px; }
}
@media screen and (max-width:768px) {  
    .home-product ul li{ width: calc(100%/5)}

    
    .home-tag{ justify-content: center; width: 100%; margin:20px auto 10px auto; } 
    .home-tag span{   padding:10px 20px; } 

    .home-rank-text{  font-size: 16pt;padding:0px 10px; }

    .home-rank ul li{  ;}
}

@media screen and (max-width:500px) {  
    .home-product ul li{ width: calc(100%/3)}

    
    .home-rank ul li{ width: 100%; padding: 5px 0px;  }
    
    .home-rank-image img{ display: block; width: 120%;   }
    .home-rank-text{  font-size: 18pt;padding:20px 10px; }
}

.home-info{display: flex; align-items: flex-start; justify-content: center; padding: 2% 10px; margin: 30px 0px; margin-bottom: 10px;; background: #00b4cc; background: #00b4cc99;}
.info-item{ text-align: center; max-width: 200px; flex: 1; padding: 20px 10px; margin: 10px 1%; background: #FFFFFF; border-radius: 30px 30px 0px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1);}
.info-item .content{ color: rgb(0, 163, 168); font-family: 'Anton','微軟正黑體'; white-space: nowrap; }
.info-item .content b{ font-size:30pt }
.info-item .title{ font-size: 11pt; color: #666666; font-weight: bold; }

@media screen and (max-width:768px) {  
    .info-item .content b{ font-size:24pt }
    .home-info{  margin:0px 0px 0px 0px;}
}
@media screen and (max-width:568px) {  
    .info-item .content b{ font-size:20pt }
}
 
.home-news{  width: 100%;  max-width:1600px; margin: 0px auto;  } 
.home-news h3{ font-size: 20pt;  text-align: center; padding: 20px 0px; font-weight: bold; color: #999999;} 
.news-list{ flex: 3; display: flex; flex-wrap: wrap; align-items:flex-start; width: 100%; padding:0px 20px 10px 20px;  }

.news-item{  width: 25%; padding: 20px;  }
.news-block{ display: block; background: #FFFFFF;   }
.news-photo .square{padding-top: 60%;  }
.news-photo:hover .square > *{ width: 120% !important;	height: 120% !important; margin-top: -10%;}

.news-info{ padding: 0px;    }
.news-info .news-title a{  font-size: 14pt; font-weight: bold; line-height: 150%;  display: block; margin-bottom: 10px; color: #333333; background: #333; color: #FFFFFF; padding: 10px 15px;}
.news-function{ padding: 0px 5px;}
.news-info .icon-text{  color: #999999; font-size: 9pt;   }
.news-info .icon-text i{  color: #999999; font-size: 12pt;margin-left: 10px;   }
.news-info .icon-text span{  margin: 0 5px; ;}


@media screen and (max-width:1200px) {  
     
    .news-item{  padding: 10px;  }
    .news-info .news-title a{font-size: 10pt; }
}
@media screen and (max-width:900px) {  
     
    .news-item{  width: 50%; }
    .news-info .news-title a{font-size: 12pt; font-weight: bold; }
    .news-info .icon-text i{  margin-left: 5px;   }
    
    .news-info .news-title a{font-size: 12pt; }
}

@media screen and (max-width:768px) {  
    
    
    
}
 
@media screen and (max-width:568px) {
     
    
    .news-list{  padding:0px 10px 10px 10px;  }
    .news-item{   padding: 5px;  }
    .news-info .news-title a{font-size: 10pt; }


}


.member-plan-notice{ background: #CC0000;  margin: 20px auto;width: 100%; max-width: 1600px; text-align: center; padding: 30px 5px;   color: #FFFFFF;}
 
.member-plan-notice h3{ font-size: 24pt; padding: 20px;   font-weight: bold;}
.member-plan-notice h5{font-size: 12pt; font-weight: bold;  }
.member-plan-notice a{ color: #FFFFFF;text-decoration: underline;  }

.member-plan-block{  text-align: center; padding: 50px 20px;}
.member-plan-block > h2{ font-size: 30pt; padding: 20px;   font-weight: bold;}
.member-plan-block > h3{  }

.member-plan{ background:  #FFAAAA;  }
.member-plan > h2{ color: #FFFFFF;  }
.member-plan > h3{ color: #FFFFFF;  }

.member-plan-list{ display: flex;  justify-content: center; flex-wrap: wrap; margin-top: 20px;}

.member-plan-item{ width: 30%; max-width: 350px; min-width: 200px;  margin: 5px;; background: #FFFFFF; padding: 20px 0px; border-radius: 10px; text-align: center;position: relative;}
.member-plan-item .best{ position: absolute; top:  10px; left: 10px; background: #000; color: #FFFFFF; z-index: 1; padding: 5px 10px; font-size: 8pt;}
.member-plan-item h3{ font-size: 18pt; background: #f1f1f1; color: #666666; padding: 10px; font-weight: bold;}
.member-plan-item p.price{ font-size: 12pt; color: #FFAAAA; padding: 20px;}
.member-plan-item p.price b{ font-size: 20pt; font-weight: bold;}

.member-plan-item p.note{ font-size: 12pt ; line-height: 180%; padding:10px 10px;}

.member-plan-item p.note b{ color: #FF3333; font-weight: bold;}

.member-plan-who{}
.member-plan-who h2{ color: #666666;}
.member-plan-who ul{ display: flex;  align-items: center; justify-content: center; flex-wrap: wrap; }
.member-plan-who ul li{ min-width: 130px; text-align: center; margin: 10px 10px;}
.member-plan-who ul li i{ display: block; color: #CCCCCC; font-size: 30pt; margin-bottom: 10px;}
.member-plan-who ul li span{ font-size: 16pt; font-weight: bold; }

.member-plan-step{ background: #00C4CC ;background: #00C4CCCC ; color: #FFFFFF;}
.member-plan-step h2{  color: #FFFF00;  }
.member-plan-step ul{ display: flex;    justify-content: center; flex-wrap: wrap;}
.member-plan-step ul li{ width: 160px; text-align: center;margin : 20px 10px;}
.member-plan-step ul li i{ display: block; color: #ffffff; opacity:0.5; font-size: 30pt; margin-bottom: 10px;}
.member-plan-step ul li .title{ font-size: 16pt; font-weight: bold; }
.member-plan-step ul li .content{ font-size: 12pt; margin-top: 10px;; font-weight: bold; }

.member-plan-step ul li a{ text-decoration: underline; color: #FFFF00; font-weight: bold;}

.member-plan-btn a{ padding: 10px 40px; background: #000000; color: #FFFFFF; font-size: 16pt;}
.member-plan-btn a:hover{background: #FFAAAA;}

@media screen and (max-width:768px) {  
      
    .member-plan-item{ width: 40%; max-width:none;   }

    
}
 
@media screen and (max-width:568px) {
    .member-plan-who ul li{ min-width: 130px; width: 40%;}
    .member-plan-item{ width: 90%;  }


}