body{width: 100%;padding: 0;margin: 0;box-sizing: border-box;list-style: none; background-color: #f2f2f2;}
.brand{position: relative;width: 100%;height: 48px;background-color: #111111;text-align: center;line-height: 48px;font-size: 24px;color: #ffffff;z-index: 99;}
.brand .menuB{position: absolute;left: 20px;top: 14px;width: 20px;height: 20px;}
.brand .menu{list-style: none;font-size: 18px;color: #ffffff;font-weight: bold; border: 1px solid #ccc; margin: 0;background-color: #ffffff;box-sizing: border-box;width: 100%;padding: 10px;display: none;padding-bottom: 5px;}
.brand .menu li{width: 100%; border-bottom: 1px solid #ccc;color: #333333;margin: 0;display: flex;justify-content: space-between;cursor: pointer;}
.brand img{display: none;width: 24px;height: 24px;}
.icon{width: 20px; height: 20px;position: relative;top: 3px;margin-right: 5px;}
.topBox{width: 100%;background-color: #ffffff;height: 80px;}
.topBox .top{margin: 0 auto;width: 80%;height: 100%;display: flex;font-size: 16px;color: #333333;align-items: center;justify-content: space-between;}
.top .logo{ font-size: 24px;font-weight: bold;color: #3fd8cc;}
.top .logo a{ text-decoration:none; color:#3fd8cc}
.top .search{border: 2px solid #3fd8cc;border-radius: 20px;display: flex;justify-content: space-between;width: 45%;margin-left: 100px;height: 36px;padding: 0 10px;align-items: center;}
.top .search img{width: 20px; height: 20px;cursor: pointer;}
.top .search input{ border: none; outline: none;width: 90%;}

.top .LR{display: flex;}
.top .LR p:hover{color: #b6333b;font-weight: bold;cursor: pointer;}
.top .LR a{ text-decoration:none; color:#565656}
.top .spCar{cursor: pointer;width: 24px;height: 24px;position: relative;display: block;}
.top .logIn{margin-left: 20px;}
.top .reg{ margin-left: 20px; padding-left: 20px;border-left: 1px solid #666666;}
.top .car { position: relative;}
.top span{ position: absolute;left: 11px;top: -15px;color: #f40;}
.navBox{ width: 100%;background-color: #3fd8cc;}
.nav{width: 80%; height: 36px;margin: 0 auto; padding: 0 20px;box-sizing: border-box;display: flex;align-items: center;}
.nav p{ padding: 0 20px;color: #ffffff;cursor: pointer;}
.nav p:hover{text-decoration: underline;}
.nav a{ text-decoration:none; color:#fff}
.nav p:nth-of-type(1){font-weight: bold;}
.new{ box-sizing: border-box;width: 80%;padding: 0; margin: 0 auto;list-style: none;display: flex;justify-content: space-between;flex-wrap: wrap;}
.new .text{font-size: 24px;font-weight: bold; width: 100%;margin-bottom: 2px; display: flex;justify-content: space-between;cursor: pointer;}
.new .text{border-bottom: 1px solid #ccc;padding-bottom:10px;}
.new .text a{position: relative;  }
.new .text a::after{content: url("../image/new.png");clear: both;display: block;position: absolute;top: -3px;left: 51px;}
.new li{width: 23%;background-color: #ffffff;margin-top: 30px;cursor: pointer;}
.new li:hover{box-shadow: 2px 2px 5px #333333;}
.new li img{width: 100%;}
.new li .price{font-weight: bold; margin-left: 8px;}
.new li .info{margin-left: 8px;}
.new li a{ text-decoration:none; color:#000}
.hot{box-sizing: border-box; width: 80%;padding: 0;margin: 0 auto; margin-top: 30px;list-style: none;display: flex;justify-content: space-between; flex-wrap: wrap;}
.hot .text{font-size: 24px;font-weight: bold; width: 100%;margin-bottom: 2px;display: flex;justify-content: space-between;cursor: pointer;
}
.hot .text{border-bottom: 1px solid #ccc;padding-bottom:10px;}
.hot .text a{position: relative;}
.hot .text a::after{content: url("../image/hot.png");clear: both;display: block;position: absolute;top: -5px;left: 102px;}
.hot li{width: 23%;background-color: #ffffff;margin-top: 30px;cursor: pointer;}
.hot li:hover{ box-shadow: 2px 2px 5px #333333;}
.hot li img{width: 100%;}
.hot li .price{font-weight: bold;margin-left: 8px;}
.hot li .info{margin-left: 8px;}
.hot li a{ text-decoration:none; color:#000}


.category{box-sizing: border-box;width: 80%;padding: 0;margin: 0 auto;list-style: none;display: flex;justify-content: space-between;flex-wrap: wrap;}
.category .text{font-size: 24px;font-weight: bold; width: 100%; margin-bottom: 2px;display: flex;justify-content: space-between;cursor: pointer;}
.category .text{ border-bottom: 1px solid #ccc;padding-bottom:10px;}
.category .text a{ position: relative; padding-left:40px;}
.category .text a::after{content: url("../image/sort.png");clear: both;display: block; position: absolute;top: 2px; left:5px}
.category li{width: 23%;background-color: #ffffff;margin-top: 30px;cursor: pointer;}
.category li:hover{box-shadow: 2px 2px 5px #333333;}
.category li img{width: 100%;}
.category li .price{font-weight: bold;margin-left: 8px;}
.category li .info{ margin-left: 8px;}
.category li a{ text-decoration:none; color:#000}


.footer{margin-top: 50px;width: 100%;height: 200px;background-color: #111111;}
.footerBox{width: 80%;height: 200px; margin: 0 auto ;display: flex;justify-content: space-around; align-items: center;color: #ffffff;}
.footerBox .logo{font-size: 36px;color: #3fd8cc;font-weight: bold;}
.footerBox .logo a{ color:#3fd8cc; text-decoration:none}
.footerBox .content ul{display: flex;list-style: none;}
.footerBox .content ul li{cursor: pointer;padding: 0 10px; border-right: 1px solid #ffffff;}
.footerBox .content ul li:hover{text-decoration: underline;}
.footerBox .contact{ margin-left:20px;}
.footerBox .contact span{margin-left: 30px;color: #ccc;}
.mlogo{ display:none}

/*info*/


@media (max-width:750px) {
    .brand img{display: inline-block; }
	.brand .menu{ font-weight:lighter}
	.brand .menu a{ text-decoration:none; color:#000}
    .nav{display: none;}
    .topBox{height: 110px;}
    .topBox .top{margin: 0 auto;width: 96%; position: relative;}
    .top .logo{display: none; }
	
    .top .search{margin: 0;margin-top: 20px;width: 98%; }
    .top .car{ position: absolute; top: 15px ;right: 35px;}
    .top .LR{position: absolute;top: 0px; left: 14%; }
    .new li{width: 48%;}
    .hot li{width: 48%;}
	.category li{width: 48%;}
    .new,.hot,.category{ width: 96%;}
    .footer{height: 550px;}
    .footerBox{width: 96%;display: block; }
    .footerBox .logo{margin-left: 40px; padding-top: 30px;}
    .footerBox .content ul{ display: block; }
    .footerBox .content ul li{ padding: 10px 0px; border: none; }
	.footerBox .contact{ padding-left:0px; margin-left:10px; margin-bottom:20px;}
    .footerBox .contact span{display: block;}
	.footerBox .contact span:nth-child(1){ display:none}
	.plogo{ display:none}
	.mlogo a{ text-decoration:none; color:#fff}
	.mlogo{ display:block}
}