{
    box-sizing: border-box;
}

body{
    margin:0;
    font-family:Arial;
}

#top-bar{
    width:100%;
    height:48px;
    background:green;
}

#top-bar-content{
    width:80%;
    height:100%;
    margin:auto;
    color:#fff;
}

#top-bar-left{
    float:left;
    width:60%;
    line-height:48px;
}

#top-bar-right{
    float:right;
    width:40%;
    line-height:48px;
    text-align:right;
}

#top-bar-right a{
    color:#fff;
    text-decoration:none;
}

#top-banner{
    width:100%;
    height:140px;
}

#top-banner-content{
    width:80%;
    height:100%;
    margin:auto;
}

#banner-logo{
    width:20%;
    float:left;
}

#banner-logo img{
    margin-top:41px;
}

.banner-box{
    width:20%;
    float:left;
}

.banner-content{
    margin-top:41px;
    height:58px;
}

.banner-content img{
    float:left;
    margin-right:10px;
    margin-top:14px;
}

#banner-cart{
    width:20%;
    float:left;
    text-align:right;
}

#banner-cart a{
    line-height:140px;
    text-decoration:none;
    color:black;
    font-weight:bold;
}

#top-menu{
    width:100%;
    height:48px;
    background:green;
}

#top-menu-content{
    width:80%;
    margin:auto;
}

#top-menu ul{
    list-style:none;
    margin:0;
    padding:0;
}

#top-menu li{
    float:left;
    padding:0 20px;
    line-height:48px;
    color:#fff;
}

#main{
    width:100%;
}

#content{
    width:80%;
    margin:40px auto;
    clear: both;
}

#content::after{
    content:"";
    display:block;
    clear:both;
}

#left-menu{
    width:24%;
    float:left;
    border:1px solid #ccc;
    border-radius:20px;
}

#left-menu a:hover{
    background-color: orange;
    color: #fff;
}

#left-menu h1{
    background:green;
    color:#fff;
    font-size:16px;
    line-height:46px;
    text-align:center;
    margin:0;
    border-radius:20px;
}

#left-menu ul{
    list-style:none;
    margin:0;
    padding:0;
}

#left-menu li{
    border-bottom:1px solid #ccc;
    line-height:36px;
}

#left-menu a{
    display:block;
    padding-left:20px;
    text-decoration:none;
    color:#333;
}

#slider{
    width:75%;
    float:right;
}

#slider img{
    width:100%;
}

#ads{
    width:100%;
    float:left;
    margin:40px 0;
    display:flex;
    justify-content:space-between;
}

.cate{
    width:100%;
    float:left;
    margin-top:40px;
}

.cate-title{
    width:300px;
    background:green;
    color:#fff;
    font-size:16px;
    line-height:46px;
    text-align:center;
    border-radius:20px;
}

.product-list{
    display:flex;
    gap:40px;
    margin-top:40px;
}

.product{
    flex:1;
    border:1px solid #ccc;
    border-radius:20px;
    text-align:center;
}

.product img{
    width:240px;
    border-radius:20px;
}

.product h1{
    font-size:20px;
    color:green;
}

.product span{
    color:orange;
    font-weight:bold;
}

#footer{
    width:100%;
    background:green;
    color:#fff;
    clear:both;
    margin-top: 10px;
}

#footer-content{
    width:80%;
    margin:auto;
    display:flex;
    line-height:30px;
}

.footer-box{
    flex:1;
}

.footer-box h1{
    font-size:20px;
}