*{margin:0;padding:0;box-sizing:border-box}
body{background:#fff;font-family:"Microsoft YaHei"}

.top-bar{background:#e3e4e5;font-size:12px;}
.top-bar-inner{width:1200px;margin:auto;display:flex;justify-content:space-between;padding:5px 0}

.header{width:1200px;margin:20px auto;display:flex}
.logo{font-size:28px;color:#a36b1f;width:200px}
.search-box{flex:1;display:flex}
.search-box input{flex:1;padding:10px;border:2px solid #a36b1f}
.search-box button{width:80px;background:#a36b1f;color:#fff;border:0}

.nav{border-bottom:1px solid #eee}
.nav-inner{width:1200px;margin:auto;display:flex}
.category{
    background:#a36b1f;
    color:#fff;
    padding:15px 25px;
}
.nav ul{display:flex;list-style:none}
.nav li{padding:15px 15px;color:#333}

/* Banner */
.banner{background:#222}
.banner-inner{
    width:100%;
    margin:auto;
    display:flex;
    height:450px;
}
.banner-left{
    width:25%;
    background:#1b1b1b;
}
.banner-center{
    width:100%;
}
.banner-center img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.banner-right{
    width:30%;
    color:#fff;
    padding:40px;
    position:relative;
}
.banner-right .qr{
    width:120px;
    margin-top:20px;
}

/* 商品区 */
.goods{width:1200px;margin:30px auto}
.goods-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
}
.goods-grid img{width:100%;display:block}
.goods-grid span{
    position:absolute;
    background:#ffcc00;
    padding:5px 10px;
}