@charset "utf8";

#main{width: 960px;}

h1{display: block; width: 0;height: 0; overflow: hidden;}
a{color:#717071; }
a:hover{color: #309fff;}
#main section{width: 100%;}
.nav .btn{display: block; float: left; padding: 0 10px; width: calc((100% - 180px)/5); text-align: center; box-sizing: border-box; background: url(/event/images/icon-04.png); background-size:100% 100%; line-height: 40px; font-size: 1.1em; font-weight: bold; color: #959595;}
.nav a:first-child .btn{width: 180px; text-indent: 15px}
.nav a:last-child .btn{background: url(/event/images/icon-05.png); color: #e5e5e5; background-size:100% 100%; position: relative;}
.nav a:last-child .btn img{position: absolute; bottom: 0; right: 8px;}
#goods_list{margin-top: 2em;}
#goods_list>.row{padding:0 10px;}
#goods_list .box_b{width: calc(100%/3); float: left; padding: 0 15px;}
#goods_list .img_box{box-shadow: 0 0 3px #666; padding: 10px; position: relative; display: flex; background: #fff; height: 292px;}
#goods_list .img_box img{margin: auto;}
#goods_list .img_box em{position:absolute; top: 0; left: 0; background: rgba(64, 64, 64, 0.15); line-height: 1.5em; padding: 0 8px; color: #7e7e7e; font-size: 1.1em;}
#goods_list .box_b p{display: block; width: 100%; text-align: center; line-height: 2em; font-size: 1.1em;}
#page{margin-top: 30px;}
#page ul{justify-content: center;}
#page li{padding: 5px 10px; margin: 8px 12px; font-size: 14pt; background: #848484;}
#page a{color: #fff}
#page .active{background: #e5e5e5; color: #f90;}

@media  only screen and (max-width: 960px){
    #main{width: 100%;}
    #banner .nav a:first-child{display: none;}
    .nav .btn{width: 20%;}
    #goods_list .box_b p{white-space: nowrap; overflow: hidden;}
}
@media  only screen and (max-width: 667px){
    #goods_list .box_b{width: 50%; margin-bottom: 8px;}
}
@media  only screen and (max-width: 500px){
    #goods_list .box_b{width: 100%; margin-bottom: 8px;}
}
@media  only screen and (max-width: 460px){
      .nav .btn{width:33.333%;}
}