
.q-main{width: 100%;padding-top: .8rem;padding-bottom: 1.2rem;overflow: hidden;background-color: #f8f8f8;}
.q-inner{width: 100%;max-width: 14.4rem;margin: 0 auto;}
.q-title{color: #333;line-height: 1;text-align: center;margin-bottom: .4rem;}
.q-tabs{font-size: 0;text-align: center;border-bottom: 1px solid #eee;margin-bottom: .6rem;}
.q-tab{display: inline-block;vertical-align: top;margin: 0 .2rem;color: #333;line-height: 1;padding: .2rem 0 .21rem;position: relative;cursor: pointer;transition: color .3s;}
body.pc .q-tab:hover{color: #fa0;}
.q-tab.active{color: #fa0;}
.q-tab.active:after{content: "";display: block;width: 100%;height: .02rem;background-color: #fa0;position: absolute;left: 0;bottom: -1px;}
.q-list{width: 12.8rem;font-size: 0;margin: 0 auto;display: flex;flex-wrap: wrap;padding-bottom: .4rem;}
.q-item{display: inline-block;vertical-align: top;width: calc(25% - 0.3rem);margin-right: 0.395rem;margin-bottom: 0.4rem;background-color: #fff;padding: .45rem .2rem .2rem;position: relative;transition: background-color .3s;}
.q-item:nth-child(4n){margin-right: 0;}
body.pc .q-item:hover{background-color: #fa0;}
.q-bg{width: 100%;height: 100%;background-image: url(/static/home/images/74.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center top;position: absolute;left: 0;top: 0;z-index: 1;opacity: 0;transition: opacity .3s;}
body.pc .q-item:hover .q-bg{opacity: 0.1;}
.q-box{width: 100%;text-align: center;height: 2rem;margin-bottom: .6rem;position: relative;z-index: 12;}
.q-img{height: 100%;object-fit: contain;}
.q-tit{color: #333;line-height: 1.666;margin-bottom: .1rem;position: relative;z-index: 12;}
.q-des{color: #888;line-height: 1.5;position: relative;z-index: 12;}
body.pc .q-item:hover .q-tit{color: #fff;}
body.pc .q-item:hover .q-des{color: #fff;}
@media(max-width: 1200px){
    .q-list{width: 100%;}
}
@media(max-width: 750px){
    .q-main{padding: .5rem .3rem;}
    .q-inner{max-width: 100%;}
    .q-title{margin-bottom: .2rem;}
    .q-tabs{margin-bottom: .3rem;}
    .q-tab{margin: 0 0.1rem;}
    .q-item{width: calc(50% - 0.15rem);margin-right: 0.3rem;margin-bottom: .3rem;}
    .q-item:nth-child(2n){margin-right: 0;}
    .q-list{padding-bottom: .1rem;}
}

.pg-main{text-align: center;font-size: 0;}
.pg-one{display: inline-block;vertical-align: top;min-width: .46rem;height: .46rem;line-height: .44rem;padding: 0 0.05rem;text-align: center;color: #888;border: 1px solid #eee;margin: 0 .1rem;cursor: pointer;background-color: #fff;transition: background-color .3s;}
.pg-one.active{background-color: #fa0;color: #fff;}
.pg-input{width: 1rem;height: .46rem;border: 1px solid #eee;background-color: #fff;text-align: center;color: #888;margin: 0 .12rem 0 .3rem;}
.pg-submit{width: auto;border: none;background-color: transparent;height: 1px solid transparent;line-height: .44rem;color: #888;cursor: pointer;padding: 0;}
.pg-prev,
.pg-next{background-image: url(/static/home/images/56.png);background-size: .444444em auto;background-repeat: no-repeat;background-position: center center;}
.pg-prev{transform: rotate(180deg);margin-left: 0;}
body.pc .pg-one:hover{background-color: #fa0;color: #fff;}
body.pc .pg-next:hover,
body.pc .pg-prev:hover{background-image: url(/static/home/images/57.png)}
@media(max-width: 750px){
    .pg-one{margin: 0 0.05rem;}
    .pg-input{margin-left: .1rem;margin-right: .1rem;}
}
