body{
    margin: 0; padding: 0; font-family: "PingFangTC","微軟正黑體";
}

/* header */
header{   
    background-color: #ffffff;
    position: fixed; top:0;
    width: 100%;
    margin: 0; ; flex-wrap: wrap;
    display: flex; z-index: 3;   
}
.logo{
    margin: 0;  height: 52px;width: 100%;
    text-align:center; background-color: rgb(255, 255, 255);
    display: flex;justify-content: center; align-items: center;
}
.logo img{
    height: 22px;width: 130px;
}

/* moblie search */
.logo_search{
    
    text-align:right; display: block;
    position: absolute; right: 10px; top: 5px;
    
}
.logo_search a{
    height: 44px;width: 44px; 
}
.search-mobile {   
    height: 30px; width:274px; display: flex;
    border:1px solid rgb(173, 173, 173) ;
    background-color: white; 
    padding: 5px 0 5px 20px;
    border-radius:200px 200px 200px 200px ;
    position: relative;right: 10%;
    display: none;
}
.search-mobile img{
    height: 40px; width: 40px;
} 
.search-mobile button{
    height: 40px; width: 40px;
    position: relative;right: 15px; bottom: 5px;
    background-color: transparent;border: none;
}
.search-mobile input{
    border: none; width: 220px;height: 30px;
    position: relative;
    bottom: 20px; right: 15px;
}
button{
    outline:none;  
}
a{
    text-decoration: none;
}

/* nav */

nav{
    margin: 0;width: 100%;height: 50px;
    text-align:center;justify-content:space-around;
    background: #313538;position: relative; top:1px;
    color: rgb(255, 255, 255);
    font-family: "PingFangTC" "微軟正黑體";
}

nav a{
    text-decoration: none;color: rgb(155, 155, 155);font-size:16px;
    padding: 13px 44px 15px 37px;
    display: inline-block;   
}

nav a:hover{
    color: rgb(255, 255, 255);
}

/* Web search */
.search{
    display:flex ; width: 400px; 
    justify-content: space-between; 
}
.search-web {   
    height: 40px; width:214px; display: flex;
    border:1px solid rgb(173, 173, 173) ;
    background-color: white; 
    padding: 5px 0 5px 30px;
    border-radius:200px 200px 200px 200px ;  
}
#webSeacrhBtn{
    background-image: url(../images/search.png);
    height: 32px;width: 32px; 
    background-size:cover;
}
.search-web a{
    justify-content:flex-end ;   
}
.search-web input{
    border: none; 
}
.search-web button{
    height: 0; width: 0;
    position: relative;right: 7px;
    background-color: transparent;border: none;
}
.cart-web{
    height: 44px;width: 44px;font-size: 14px; color: #8b572a;  text-decoration: none
   
   
}
.cart-web img{
    height: 44px;width: 44px; position: relative; bottom: 5px;
}
.cart-amount-Web{
    background-color: #686767ce; color: #ffffff; 
    border-radius: 50%;height: 25px; width: 25px;
    position: relative; bottom: 50px; left: 17px;
    font-weight:bold; display: flex; justify-content: center; align-items: center;
}
.member-web{
    height: 44px;width: 44px; 
}
.member-web img{
    height: 44px;width: 44px;  bottom: 5px;position: relative;
}
.partition{
    height: 40px;width: 100%;background-color: rgb(37, 37, 37);    
}
/* footer */
footer{
    background-color: #313538;color: #ffffff;
    width: 100%; padding-top: 23px;height: 185px;
}
.footer-wrap{
    width: 100%;height: 65px;
    display: flex;  justify-content: space-between;  
}
.footer-items{   
    flex-direction: column; height: 100px;
    display: flex;flex-wrap: wrap; 
}
.footer-item-about{  
    font-size: 14px; color: white;
    height: 20px; 
    width: 76px;  
    margin: 4px 14px; 
    text-decoration: none; 
    justify-content:center; margin: 4px 0px 4px 40px; 
}
.footer-item{
    font-size: 14px; color: white;
    height: 20px; 
    width: 76px;
    margin: 4px 14px; 
    text-decoration: none;margin: 4px 0px 8px 40px; 
}
.footer-items a:hover{
    color: burlywood;
}
.footer-icon{
    flex: none;margin-right: 24px;margin-top: 18px;
}
.footer-wrap img{
    height: 20px; width: 20px;  
    margin: 8px; 
}
.copyright{
    font-weight: 10px; color: #828282;
    font-family: "PingFangTC";padding: 20px;
    text-align: center;color: #828282;  
}
.cart{
    width: 100%; 
    height: 60px;
    text-align: center; 
    position: fixed;
    bottom: 0px; 
}
.cart div{ 
    display: flex;color: white;
    background-color: #313538;
    font-size:16px; 
    justify-content:space-around;
    text-align: center;
}
.cart a{ 
    text-decoration: none;
    margin: 10px;display: flex;
    font-size: 22px; color: white;
    flex:auto;justify-content: center;
    align-items: center; height: 40px;
}
.cart img{
    height: 30px ;width: 30px; margin: 5px;
}
.cart-bar{
    border-right: 1px solid #ffffff
}
.cart-amount-mobile{
    background-color: #ff00008e; color: #ffffff; 
    border-radius: 50%;height: 28px; width: 28px;
    text-decoration: none; position: absolute;
    display: flex; justify-content: center; align-items: center;
    left: 52.5px; top:21px;font-size: 18px;
}

/*============================================== media ==============================================*/

@media screen and (min-width:360px){
    body{
        width: 100%;
    }
    header{
        width: 100%;
        justify-content: flex-start;
        align-content: center;
    }   
   .search{
       display: none;
   }
   .partition{
       display: none;    
   }
}

@media  screen and (min-width:500px) {

    /* header */
    header{
        width: 100%; align-items: center;
        display: flex; flex-wrap: nowrap;   
    }
  .logo{
       margin: 0% 0% 0% 4%; width: auto;
       justify-content: left; 
    }   
    .logo img{      
        height: 36px;width: 180px;     
    }
    .logo_search{
        display: none;
    }
    nav{
        display: flex; justify-content:flex-start;
        height:auto;text-align:center;flex: auto;
        color:rgb(255, 255, 255); width: auto;
        background: white;padding: 1% 2% 1% 2%;       
    }
    nav a{
        text-decoration: none;color: #3f3a3a;font-size:14px;
        padding: 0 2% 0 4%;
        letter-spacing: 10px; width: 65px;  
    }
    nav a:hover{
        color: #8b572a
    }  
    .nav-bar{
        border-right: 1px solid #3f3a3a ;border-left: 1px solid #3f3a3a;     
    }
    .search{
        display: flex; width:auto;
        padding: 8px 10px 0px 10px;   
    }
    .search-web {
        height: 25px;width: 140px;
        padding: 5px 0 5px 15px;
        margin: 0 15px 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }    
    .search-web input{
        height: 25px;width: 100%;
        outline:none;
    }
    .search-web img{
        height: 32px;width: 32px; 
        /* position: relative;bottom: 3px;  */
    }
    .cart-web{     
        margin: 0 9px 0 0;      
    }
    .member-web{
        margin: 0 10px 0 0;
    }

    /* phone cart*/
    .cart{
        display: none
    }  
    .partition{
        display: block; margin-top: 52px; position: fixed;z-index: 3;height: 20px;
        }

    /*footer*/

    footer{
        width: 100%; height: 115px;flex: auto;
        display: flex; justify-content: center;
        align-items: center; padding: 0;flex-wrap: wrap;
        position: fixed;bottom: 0;
    }
    .footer-wrap{
        height: 70px;width:auto ;align-items: center;
        display: flex; justify-content: center;
        vertical-align: middle;
    }
    .footer-items{ 
        justify-content: flex-end;margin-right: 3%;height: 0;
        display: flex;flex-direction: row;flex-wrap: nowrap;flex: auto;
    } 
    .footer-items:hover{
        color: #c49871;
    }
    .footer-item-about{     
        font-size: 14px; 
        height: 22px; 
        width: 89px;
        color:#ffffff;  
    }
    .footer-item{
        font-size: 14px; 
        height: 22px; 
        width: 64px;
        border-left: 1px solid #ffffff;
        margin-left: 20px;
        padding-left: 20px;
        margin: 4px 14px;               
    }  
    .footer-wrap img{
        height: 30px; width: 30px; margin: 10px;
    }
    .copyright{
        font-size: 12px;; color: #828282;
        
        text-align: right; 
        color: #828282;
        width: 180px;height: 17px;
        padding-top: 20px;margin: 0;padding-bottom: 10px          
    }
    .cart{
        display: none;
    }
}

@media  screen and (min-width:1000px) {
    .main-wrap{
        padding: 50px ;width: 850px;     
    }
}

@media  screen and (min-width:1250px) {

    /* header */
    header{
        width: 100%; align-items: center;
        display: flex; flex-wrap: nowrap;  
    }
    .logo{
       margin: 0% 0% 0% 4%; width: auto;
       justify-content: left; 
    } 
    .logo img{
       width: 258px;    
    }
    nav{
        display: flex; justify-content:flex-start;
        height:auto;text-align:center;flex: auto;
        color:rgb(255, 255, 255); width: auto;
        background: rgb(255, 255, 255);padding: 1% 2% 1% 2%;     
    }
    nav a{
        text-decoration: none;color: #3f3a3a;font-size:15px;
        padding: 0;
        width:10%;letter-spacing: 10px; width: 100px; 
    }  
    .nav-font-color{
        color: #8b572a; 
    }
    .nav-bar{
        border-right: 1px solid #3f3a3a ;border-left: 1px solid #3f3a3a;       
    }
    .search{
        display: flex; padding: 20px 2% 20px 2%;       
    }

    /*banner*/

    .partition{
        margin-top: 64px; height: 20px;
        }
    /*footer*/

    footer{
        position: relative
    }
    .footer-items{  
        justify-content: flex-end;margin-right: 6%;height: 0;
        display: flex;flex-direction: row;flex-wrap: nowrap;flex: auto;
    }
    .footer-item-about{    
        font-size: 16px; color: #c49871;
        height: 22px;  width: 89px;      
    }
    .footer-item{
        font-size: 16px;  margin-left: 20px;
        height: 22px;  width: 64px;padding-left: 20px;  
        border-left: 1px solid #ffffff;      
    }
    .footer-wrap img{
        height: 30px; width: 30px; margin: 15px;
    }
    .copyright{
        font-size: 13px; color: #828282;      
        text-align: right; 
        color: #828282;
        width: 180px;height: 17px;
        padding: 0;
        margin: 50px 0 30px 10px    
    }
}