body{background-color: #f7f7f7}
.box{width: 1200px; margin: auto;}
img{display: block; max-width: 100%}
i{font-style: normal;}

.text-red{color: #F9B228}
.text-white{color: #FFFFFF}
.bold{font-weight: bold;}
.fl{float: left;}
.fr{float: right;}
.clearfix{clear: both;}
.padding{padding: 20px}
.padding-left{padding-left: 20px}
.padding-right{padding-right: 20px}
.padding-top{padding-top: 20px}
.padding-bottom{padding-bottom: 20px}
.padding-tb{padding: 20px 0}
.padding-sm{padding: 10px;}
.padding-tb-sm{padding:10px 0;}
.padding-tb-xs{padding:5px 0;}
.padding-lr-sm{padding:0 10px;}
.padding-lr-xs{padding:0 5px;}

.margin-top{margin-top: 20px}
.margin-top-sm{margin-top:10px}
.margin-top-xs{margin-top:5px}
.margin-tb-sm{margin:10px 0}
.margin-lr-sm{margin:0 10px}
.margin-right{margin-right:20px;}
.margin-right-sm{margin-right:10px;}
.margin-right-xs{margin-right:5px;}
.margin-bottom{margin-bottom: 20px}
.margin-bottom-sm{margin-bottom: 10px}

.text-gray{color: #999999}
.text-lg{font-size: 18px}
.text-sm{font-size: 12px;}
.bg-white{background-color: #fff}
.bg-yellow{background-color: #d4a320}
.bg-red{background-color: #F9B228}
.bg-blue{background-color: #1171de}
.bg-green{background-color: #13afb9}
.bg-white{background-color: #fff}
.bg-gray{background-color: #f8f8f8}
.text-center{text-align: center;}
.text-right{text-align: right;}
.radius{border-radius: 5px}
.text-col-center{justify-content:center;display: flex;flex-direction: column;}
.my-btn{background: #F9B228;} 

/* 分页 */
.pagination{display:block;padding:20px 0;text-align:center;overflow:hidden;clear:both; background: #fff}
.pagination li{display:inline-block;border:1px #dbdbdb solid;font-size:16px;height:34px;line-height:34px;min-width:34px;}
.pagination li a,.pagination li span{display:block;width:100%;height:100%}
.pagination li.active{background:#F9B228;color:#fff;border-color:#F9B228}
.pagination li.disabled{background:#f1f1f1;color:#F9B228}
.pinyin{font-size:20px;background-color:#fff;padding-left:10px}
/* end */

/*header*/
.topBox{background-color: #fff; height: 110px; width: 100%}
.header{width: 1200px; height: 110px; margin: auto;}
.header .logo{float: left; width: 190px; height: 110px}
.header .center{float: left; width: 820px; height: 110px}
.header .center .search{float: left; width:500px; margin-top:35px; margin-left:100px}
.header .center .search .topSearch{display:block; width:100%; height:34px;border:2px solid #F9B228;position: relative;}
.header .center .search .topSearch i{display: block; float: left; width: 30px; line-height: 34px; text-align: center;}
.header .center .search .topSearch button{width:100px;height:34px;background:#F9B228;color:#fff;font-size:14px;cursor:pointer;border: 0}
.header .center .search .topSearch input{border: 0; width: 370px; outline: none;}
.header .center .search .hotkey{margin-top: 5px; clear: both;}

#qsearch{left: 0; top:38px; width: 100%; background: #fff; position: absolute; z-index: 999; box-shadow: 0 0 10px #ccc; max-height:600px; overflow: auto;}
#qsearch .item{clear: both; border-bottom: 1px #dbdbdb solid; padding: 5px;overflow: hidden;}
#qsearch .item a{display: block; font-size: 12px; display: flex;}
#qsearch .item img{width: 70px; height:70px; margin-right: 5px;}
#qsearch .item .info{flex: 1}
#qsearch .item .info .title{font-size: 14px; line-height: 26px;}
#qsearch .item .info .price{color: #f00; line-height: 20px}

.header .center .topCart{float: right; margin-top: 35px;  line-height: 34px; margin-right:50px;}
.header .center .topCart a{display: block; position: relative;border:1px #dbdbdb solid; padding: 0 15px;transition: 0.3s;}
.header .center .topCart a i{font-size:18px;}
.header .center .topCart span{position: absolute; top:3px; left:35px; border-radius:4px; height:14px; line-height: 14px; font-size: 12px; padding: 0 5px; box-sizing: border-box;}
.header .center .topCart a:hover,.header .center .topCart.active a{background: #F9B228; color: #fff; border-color: #F9B228}
.header .center .topCart a:hover span,.header .center .topCart.active a span{background: #FFF; color: #F9B228;}

.header .topAd{float: left; width: 190px; height: 110px;}
.header .topLogin{float: right; width:110px; padding-top: 35px}
.header .topLogin a{display: block; border:1px #dbdbdb solid; line-height: 34px; padding: 0 15px; text-align: center;transition: 0.3s;}
.header .topLogin a:hover{background: #F9B228; color: #fff; border-color: #F9B228}


.daohang{height: 40px; width: 1200px; margin: auto;}
.daohang .topCate{width: 190px; float:left; height: 40px; position: relative;}
.daohang .topCate .hd{color: #fff; line-height: 40px; padding-left: 20px;box-sizing: border-box; font-size: 16px}
.daohang .topCate aside{ position: absolute;left: 0; top: 40px; width: 100%; background-color: #fff; height:320px}
.daohang .topCate aside ul li{height:44px; width: 100%}
.daohang .topCate aside ul li a{display: block; height: 44px;}
.daohang .topCate aside ul li:hover,.daohang .topCate aside ul li.active{background: #F9B228;}
.daohang .topCate aside ul li:hover>a,.daohang .topCate aside ul li.active{color: #ffffff}
.daohang .topCate aside ul li:hover .arrow,.daohang .topCate aside ul li.active{color: #ffffff}
.daohang .topCate aside ul li .icon{float: left;margin-right: 5px; margin-top: 10px; margin-left: 5px}
.daohang .topCate aside ul li .icon img{display: block;}
.daohang .topCate aside ul li .name{float: left; line-height: 44px;}
.daohang .topCate aside ul li .arrow{float: right; color: #999;padding-right: 5px; padding-top: 15px}
.daohang .topCate .cateBoxList{position: absolute;left: 190px;top: 40px; width:800px; height:320px; background: #fff; display: none; box-shadow: 0 0 5px #ccc; z-index: 999; padding: 10px; box-sizing: border-box;}
.daohang .topCate .cateBoxList a{display: block; float: left; border:1px #dbdbdb solid; padding: 0 15px;transition: 0.3s; line-height: 36px; margin-bottom: 10px; margin-right: 10px;}
.daohang .topCate .cateBoxList a:hover{background: #F9B228; color: #fff; border-color: #F9B228}

.daohang .notice{width: 820px; float: left; line-height: 40px; height: 40px; box-sizing: border-box;}
.daohang .notice .topRate{float: left; width: 250px; height: 40px;}
.daohang .notice .roll{float: left;}
.daohang .notice .topBell{float: left; width: 25px;}
.daohang .notice .topNotice{width: 500px; float: left;}
.daohang .indexMember{float: left; width: 190px;}
.daohang .indexMember .hd{color: #FFDAA3; text-align: center; line-height: 40px; background-color: #515151}

.alertBox{width: 100%; height: 250px; background-image: url(../image/new/bg.png); background-repeat: no-repeat; background-position: left top;background-color: #ffffff}
.alertContent{height: 150px; overflow-y: auto; padding: 0 20px}
/*footer*/
.footIcon{clear: both; overflow:hidden; padding: 10px; border-right:1px #dbdbdb solid;}
.footIcon img{display: block; float: left;}
.footMenu{clear: both; overflow: hidden; padding-top: 20px}
.footMenu li{float: left; width: 18%; box-sizing: border-box; padding-left: 30px; border-right: 1px #e5e5e5 solid}
.footMenu li .hd{font-weight: bold; margin-bottom:5px; font-size: 16px}
.footMenu li .bd a{display: block; color: #666; line-height: 24px;}
.footMenu li .qrcode .img{float: left; width: 100px; margin-right: 10px}
.footMenu li .qrcode .info h4{font-weight: bold; margin-bottom: 10px; margin-top: 10px}

/*login*/
.loginBox{height: 450px; width: 650px}
.loginBox .left{float: left; width: 241px; height: 450px; background-image: url(../image/new/code.png); background-size: cover; background-position: center;}
.loginBox .right{float: left; width: 409px; box-sizing: border-box; padding: 30px;}
.loginBox .right .hd{font-size: 24px; font-weight: bold; padding:20px 0;}


.toolbar-item{background:url(../image/toolbar.png) no-repeat}
.toolbar{position:fixed;right:0;bottom:50px;z-index:10000}
.toolbar-item{position:relative;display:block;margin-top:1px;width:52px;height:52px;-moz-transition:background-position .5s;transition:background-position .5s;-ms-transition:background-position .5s;-o-moz-transition:background-position .5s;-webkit-moz-transition:background-position .5s}
.toolbar-item:hover .toolbar-layer{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);filter:alpha(opacity=100);-ms-transform:scale(1)}
.toolbar-item-cart{background-position:0 -798px}
.toolbar-item-cart:hover{background-position:0 -860px}
.toolbar-item-cart em{position:absolute; display:block; line-height:14px; font-size:12px; top:2px; right:10px; background: #fff;border-radius:7px; display: block; height: 14px; min-width: 14px; color:#F9B228; text-align: center; font-style: normal;}
.toolbar-item-weixin{background-position:0 -426px}
.toolbar-item-weixin:hover{background-position:0 -488px}
.toolbar-item-weixin .toolbar-layer{height:212px;background-position:0 -200px}

.toolbar-item-app{background-position:0 -550px}
.toolbar-item-app:hover{background-position:0 -612px}
.toolbar-item-app .toolbar-layer{height:194px;background-position:0 0px}

.toolbar-item-top{background-position:0 -674px}
.toolbar-item-top:hover{background-position:0 -736px}
.toolbar-layer{position:absolute;right:52px;bottom:-10px;width:172px;opacity:0;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform:scale(.01);-moz-transform:scale(.01);-o-transform:scale(.01);transform:scale(.01);-webkit-transform-origin:95% 95%;-moz-transform-origin:95% 95%;-o-transform-origin:95% 95%;transform-origin:95% 95%;filter:alpha(opacity=0);-ms-transform-origin:95% 95%;-ms-transform:scale(.01);-ms-transition:all .5s}
.toolbar-layer img{width: 100%}

.onlineKefu{ position: fixed; right: 0; bottom: 300px; background: #F9B228; color: #fff; width:80px; height:80px; border-radius: 5px; text-align: center; cursor: pointer; z-index: 9999}
.onlineKefu img{display: block; margin: auto; margin-top:10px}

img.tag{width: 70px; height: 20px;}