body {
    font-family: "Open Sans";
    overflow-x: hidden;
}

.grey {
    background: #eeeeee;
}

.pageTitle {
    height: 4.3rem;
    background: #3f51b5;
    position: relative;
    text-align: center;
}

.pageTitle h1 {
    font-size: 1.7rem;
    color: #fff;
    line-height: 4.3rem;
}

#navigation {
    display: none;
}

.pageTitle > a.navigation {
    display: block;
    position: absolute;
    width: 1.6rem;
    height: 1.2rem;
    top: 1.6rem;
    left: 1.2rem;
    background: url("/images/public/navigation.png") no-repeat;
    background-size: contain;
}
.pageTitle > a.back {
    display: block;
    position: absolute;
    top: 0.8rem;
    left: 1.2rem;
    background-size: contain;
    font-size: 1.8rem;
    color: #fff;
}
.pageTitle > a.back:before{
    display: inline-block;
    content:"";
    width: 0.9rem;
    height: 1.6rem;
    background: url("/images/public/back.png") no-repeat;
    background-size: contain;
    margin:0.6rem 0.5rem 0 0;
    vertical-align: top;
}
.pageTitle > a.search,.pageTitle > a.chatSet,.pageTitle > a.spot,.pageTitle > a.camera,.pageTitle > a.blogList,.pageTitle > a.writeBlog {
    display: block;
    position: absolute;
    width: 4.3rem;
    height: 4.3rem;
    top: 0;
    right: 0;
    background: #3043b0;
    text-align: center;
    text-align: center;
}
.pageTitle > a.search i{
    display: inline-block;
    width: 1.8rem;
    height: 1.7rem;
    background: url("/images/public/search.png") no-repeat;
    background-size: contain;
    margin-top: 1.3rem;
}
.pageTitle > a.chatSet i{
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background: url("/images/public/chatSet.png") no-repeat;
    background-size: contain;
    margin-top: 1.3rem;
}
.pageTitle > a.camera i{
    display: inline-block;
    width: 2.2rem;
    height: 1.75rem;
    background: url("/images/friend/camera.png") no-repeat;
    background-size: contain;
    margin-top: 1.3rem;
}
.pageTitle > a.blogList i{
    display: inline-block;
    width: 1.65rem;
    height: 1.6rem;
    background: url("/images/public/blogList.png") no-repeat;
    background-size: contain;
    margin-top: 1.3rem;
}
.pageTitle > a.writeBlog i{
    display: inline-block;
    width: 1.4rem;
    height: 1.75rem;
    background: url("/images/public/write.png") no-repeat;
    background-size: contain;
    margin-top: 1.3rem;
}
.pageTitle > a.spot b{
    display: inline-block;
    width: 0.4rem;
    margin: 1.1rem auto 0;
}
.pageTitle > a.spot b i{
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    background: #fff;
    border-radius: 50%;
    line-height: 1;
    float: left;
    margin:0.2rem 0 0 0;
}
.pageTitle > a.friendIco {
    display: block;
    position: absolute;
    width: 2.75rem;
    height: 1.95rem;
    top: 1.2rem;
    left: 1.2rem;
    background: url("/images/public/friendIco.png") no-repeat;
    background-size: contain;
}
.pageTitle p{
    display: inline-block;
    margin-top: 0.6rem;
}
.pageTitle p a{
    display: inline-block;
    color: #fff;
    font-size: 1.2rem;
    padding:0.5rem 1.5rem;
    border:0.1rem solid #fff;
    border-radius: 0.5rem;
}
.pageTitle p a:first-child{
    border-right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
}
.pageTitle p a:last-child{
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
}
.pageTitle p a.active{
    background: #fff;
    color: #3f51b5;
}
.pageTitle > a.release {
    display: block;
    position: absolute;
    width: 4.3rem;
    height: 4.3rem;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 1.4rem;
    line-height: 4.3rem;
    background: #00c071;
}

.main {
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    position: relative;
    z-index: 99;
}

.leftNav {
    background: #eeeeee;
    position: absolute;
    left: 0;
    top: 0;
    width: 24.3rem;
    display: none;
}

.main.topRight {
    -webkit-transform: translateX(24.3rem);
    transform: translateX(24.3rem);
}

.blank {
    padding: 3rem;
}

.menu {
    border-top: 1px solid #c1c1c1;
    background: #fff;
    height: 4.8rem;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0.5rem 0;
    z-index: 9999;
}

.menu nav ul {
    width: 100%;
    display: block;
}

.menu nav ul li {
    width: 20%;
    float: left;
    text-align: center;
}

.menu nav ul li a {
    display: block;
    font-size: 1rem;
    line-height: 1.2rem;
    color: #666666;
}

.menu nav ul li a i {
    display: inline-block;
}

.menu nav ul li a.active {
    color: #3f51b5;
}

.menu nav ul li:nth-of-type(1) a i {
    width: 2.4rem;
    height: 2.5rem;
    background: url("/images/public/recom.png") no-repeat;
    background-size: contain;
}

.menu nav ul li:nth-of-type(1) a.active i {
    background: url("/images/public/recomActive.png") no-repeat;
    background-size: contain;
}

.menu nav ul li:nth-of-type(2) a i {
    width: 2.8rem;
    height: 2.5rem;
    background: url("/images/public/friend.png") no-repeat 0 0.35rem;
    background-size: 2.8rem auto;
}

.menu nav ul li:nth-of-type(2) a.active i {
    background: url("/images/public/friendActive.png") no-repeat 0 0.35rem;
    background-size: 2.8rem auto;
}

.menu nav ul li:nth-of-type(3) a i {
    width: 2.1rem;
    height: 2.5rem;
    background: url("/images/public/community.png") no-repeat 0 0.25rem;
    background-size: 2.1rem auto;
}

.menu nav ul li:nth-of-type(3) a.active i {
    background: url("/images/public/communityActive.png") no-repeat 0 0.25rem;
    background-size: 2.1rem auto;
}

.menu nav ul li:nth-of-type(4) a i {
    width: 2.5rem;
    height: 2.5rem;
    background: url("/images/public/business.png") no-repeat 0 0.325rem;
    background-size: 2.5rem auto;
}

.menu nav ul li:nth-of-type(4) a.active i {
    background: url("/images/public/businessActive.png") no-repeat 0 0.325rem;
    background-size: 2.5rem auto;
}

.menu nav ul li:nth-of-type(5) a i {
    width: 1.9rem;
    height: 2.5rem;
    background: url("/images/public/my.png") no-repeat 0 0.175rem;
    background-size: 1.8rem auto;
}

.menu nav ul li:nth-of-type(5) a.active i {
    background: url("/images/public/myActive.png") no-repeat 0 0.175rem;
    background-size: 1.8rem auto;
}

.user {
    height: 16.1rem;
    background: #3f51b5 url("/images/public/aside.png") no-repeat;
    background-size: 24.3rem auto;
    position: relative;
    border-right: 1px solid #dddddd;
}

.userPic {
    width: 7.2rem;
    height: 7.2rem;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 2rem;
    z-index: 1;
}

.userPic a {
    width: 7rem;
    height: 7rem;
    border: 2px solid #fff;
    border-radius: 50%;
    display: block;
    background-position:50% 50%;             
    background-size: cover;                  
    background-repeat:no-repeat;
}

.man {
    position: absolute;
    z-index: 2;
    width: 1.4rem;
    height: 1.4rem;
    background: #ff6600;
    border-radius: 50%;
    border: 1px solid #fff;
    left: 12.7rem;
    top: 7.8rem;
    text-align: center;
}

.man:after {
    width: 0.8rem;
    height: 0.8rem;
    display: inline-block;
    background: url("/images/public/man.png") no-repeat;
    background-size: contain;
    content: "";
    vertical-align: top;
    margin-top: 0.25rem;
}

.man.feman {
    background: #1baf5d;
}

.man.feman:after {
    width: 0.6rem;
    height: 0.9rem;
    background: url("/images/public/feman.png") no-repeat;
    background-size: contain;
    margin-top: 0.2rem;
}

.user p {
    position: absolute;
    left: 0;
    top: 10.3rem;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    color: #fff;
}
.user p:last-of-type{
    font-size: 1.1rem;
    top: 12.8rem;;
}
.leftNav nav{
    background: #fff;
    padding: 0.4rem 1.3rem;
}
.leftNav nav ul{
    width: 100%;
}
.leftNav nav ul li{
    width: 100%;
    padding: 1rem 0;
    border-bottom:1px solid #dddddd;
    text-indent: 5rem;
    line-height: 3.3rem;
}
.leftNav nav ul li a{
    display: block;
    font-size: 1.3rem;
    color: #524948;
    position: relative;
}
.leftNav nav ul li a > i{
    display: block;
    position: absolute;
    width: 3.3rem;
    height: 3.3rem;
    background: #f70091;
    border-radius: 50%;
    text-align: center;
    text-indent: 0;
}
.leftNav nav ul li a > i:before{
    width: 2.4rem;
    height: 1.7rem;
    display: inline-block;
    content:"";
    background: url("/images/public/menber.png") no-repeat;
    background-size: contain;
    margin-top: 0.7rem;
}
.leftNav nav ul li a:after{
    display: block;
    position: absolute;
    width: 0.7rem;
    height: 1.2rem;
    background: #f70091;
    right: 0.6rem;
    top: 1.05rem;
    background: url("/images/public/rightArrow.png") no-repeat;
    background-size: contain;
    content:"";
}
.leftNav nav ul li:nth-child(2) a > i{
    background: #f4683f;
}
.leftNav nav ul li:nth-child(2) a > i:before{
    background: url("/images/public/set.png") no-repeat;
    background-size: contain;
    width: 1.7rem;
    margin-top: 0.8rem;
}
.leftNav nav ul li:nth-child(3) a > i{
    background: #545ede;
}
.leftNav nav ul li:nth-child(3) a > i:before{
    background: url("/images/public/blog.png") no-repeat;
    background-size: contain;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.95rem;
}
.leftNav nav ul li:nth-child(4) a > i{
    background: #ffae00;
}
.leftNav nav ul li:nth-child(4) a > i:before{
    background: url("/images/public/bbs.png") no-repeat;
    background-size: contain;
    width: 1.8rem;
    height: 1.7rem;
    margin-top: 0.8rem;
}
.leftNav nav ul li:nth-child(5) a > i{
    background: #16b106;
}
.leftNav nav ul li:nth-child(5) a > i:before{
    background: url("/images/public/photo.png") no-repeat;
    background-size: contain;
    width: 1.8rem;
    height: 1.5rem;
    margin-top: 0.9rem;
}
.leftNav nav ul li:nth-child(6) a > i{
    background: #af4dcb;
}
.leftNav nav ul li:nth-child(6) a > i:before{
    background: url("/images/public/album.png") no-repeat;
    background-size: contain;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: 0.8rem;
}
.leftNav nav ul li:nth-child(7) a > i{
    background: #a29d9d;
}
.leftNav nav ul li:nth-child(7) a > i:before{
    background: url("/images/public/favorite.png") no-repeat;
    background-size: contain;
    width: 1.8rem;
    height: 1.6rem;
    margin-top: 0.8rem;
}
.exit{
    padding:1.4rem 0;
    text-align: center;
    background: #fff;
}
.exit a{
    display: inline-block;
    padding: 0.8rem 2.3rem;
    border-radius: 0.5rem;
    border:0.1rem solid #bdbdbd;
    font-size: 1.4rem;
    color: #393b3e;
    vertical-align: top;
    background: #fff;
}
.exit a:after{
    display: inline-block;
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    background: url("/images/public/exit.png") no-repeat;
    background-size: contain;
    margin: 0.3rem 0 0 0.5rem;
    vertical-align: top;
}
.exit a:active{
    border:0.1rem solid #5266d9;
    color: #fff;
    background: #5266d9;
}
.exit a:active:after{
    background: url("/images/public/exitActive.png") no-repeat;
    background-size: contain;
}
.more,.page{
    text-align: center;
    padding:1.8rem 0;
}
.more a{
    display: inline-block;
    padding:0.8rem 2rem;
    color: #393b3e;
    font-size: 1.4rem;
    border-radius: 0.5rem;
    border:0.1rem solid #bdbdbd;
    background: #fff;
}
.more a:before{
    display: inline-block;
    width:1.6rem;
    height: 1.6rem;
    content:"";
    background: url("/images/public/more.png") no-repeat;
    background-size: contain;
    vertical-align: top;
    margin:0.3rem 0.7rem 0 0;
}
.more a:active{
    border:0.1rem solid #5266d9;
    color: #fff;
    background: #5266d9;
}
.more a:active:before{
    background: url("/images/public/moreActive.png") no-repeat;
    background-size: contain;
}
.page a{
    display: inline-block;
    padding:0.8rem 2rem;
    color: #393b3e;
    font-size: 1.4rem;
    border-radius: 0.5rem;
    border:0.1rem solid #bdbdbd;
    margin: 0 0.7rem;
    background: #fff;
}
.page a:active{
    border:0.1rem solid #5266d9;
    color: #fff;
    background: #5266d9;
}
/*loading*/
.loading{
    width: 12.8rem;
    height: 10rem;
    border:1px solid #cacaca;
    border-radius: 1rem;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 999;
    display: none;
}
.load{
    height: 6em;
    width: 6em;
    margin: 1rem auto 0.5rem;
}
.load svg {
  height: 6em;
  width: 6em;
}
.loading p{
    text-align: center;
    font-size: 1.2rem;
    color: #666666;
}
.g-circles { -webkit-transform: scale(0.9) translate(7px, 7px); transform: scale(0.9) translate(7px, 7px);}circle { fill: dodgerblue; fill-opacity: 0; -webkit-animation: opacity 1.2s linear infinite; animation: opacity 1.2s linear infinite;}circle:nth-child(12n + 1) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s;}circle:nth-child(12n + 2) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s;}circle:nth-child(12n + 3) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s;}circle:nth-child(12n + 4) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s;}circle:nth-child(12n + 5) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s;}circle:nth-child(12n + 6) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s;}circle:nth-child(12n + 7) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s;}circle:nth-child(12n + 8) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s;}circle:nth-child(12n + 9) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s;}circle:nth-child(12n + 10) { -webkit-animation-delay: -1s; animation-delay: -1s;}circle:nth-child(12n + 11) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s;}circle:nth-child(12n + 12) { -webkit-animation-delay: -1.2s; animation-delay: -1.2s;}.g-circles--v2 circle { fill-opacity: 0; stroke-opacity: 0; stroke-width: 1; stroke: yellowgreen; -webkit-animation-name: opacity-stroke, colors, colors-stroke, transform-2; animation-name: opacity-stroke, colors, colors-stroke, transform-2;}@-webkit-keyframes opacity { 3% { fill-opacity: 1; } 75% { fill-opacity: 0; }}@keyframes opacity { 3% { fill-opacity: 1; } 75% { fill-opacity: 0; }}@-webkit-keyframes opacity-stroke { 10% { stroke-opacity: 1; } 85% { stroke-opacity: 0; }}@keyframes opacity-stroke { 10% { stroke-opacity: 1; } 85% { stroke-opacity: 0; }}@-webkit-keyframes colors { 0% { fill: yellowgreen; } 10% { fill: gold; } 75% { fill: crimson; }}@keyframes colors { 0% { fill: yellowgreen; } 10% { fill: gold; } 75% { fill: crimson; }}@-webkit-keyframes colors-stroke { 0% { stroke: yellowgreen; } 10% { stroke: gold; } 75% { stroke: crimson; }}@keyframes colors-stroke { 0% { stroke: yellowgreen; } 10% { stroke: gold; } 75% { stroke: crimson; }}@-webkit-keyframes colors-2 { 0% { fill: yellow; } 50% { fill: red; } 65% { fill: orangered; } 95% { fill: gold; }}@keyframes colors-2 { 0% { fill: yellow; } 50% { fill: red; } 65% { fill: orangered; } 95% { fill: gold; }}@-webkit-keyframes colors-3 { 0% { fill: yellowgreen; } 50% { fill: turquoise; } 65% { fill: yellow; } 95% { fill: orange; }}@keyframes colors-3 { 0% { fill: yellowgreen; } 50% { fill: turquoise; } 65% { fill: yellow; } 95% { fill: orange; }}@-webkit-keyframes transform { 10% { -webkit-transform: scale(0.75); transform: scale(0.75); }}@keyframes transform { 10% { -webkit-transform: scale(0.75); transform: scale(0.75); }}@-webkit-keyframes transform-2 { 40% { -webkit-transform: scale(0.85); transform: scale(0.85); } 60% { stroke-width: 20; }}@keyframes transform-2 { 40% { -webkit-transform: scale(0.85); transform: scale(0.85); } 60% { stroke-width: 20; }}

.errow{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 999;
    text-align: center;
    display: none;
}
.errowIco{
    width: 8.7rem;
    height: 8.7rem;
    background: #6b6fde;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
}
.errowIco:after{
    width: 3.9rem;
    height: 6.3rem;
    display: inline-block;
    content:"";
    background: url("/images/public/errow.png") no-repeat;
    background-size: contain;
    margin-top: 1.2rem;
}
.errow p{
    text-align: center;
    font-size: 1.8rem;
    color: #3f3939;
    padding:2.5rem 0 1rem 0;
}
.errow b{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    display: block;
}
.errow b a{
    color: #888787;
}
.goTop {
    position: fixed;
    bottom: 30%;
    right: 12px;
    z-index: 9998;
    display: block;
}

.goTop p {
    width: 3.3rem;
    height: 3.3rem;
    display: none;
    border-radius: 50%;
    background: rgba(63, 81, 181, 0.7);
    position: relative;
}

.goTop p:active {
    background: rgba(63, 81, 181, 1);
}

.goTop p:before {
    width: 1.25rem;
    height: 1.85rem;
    display: block;
    position: absolute;
    top: 0.7rem;
    left: 1.1rem;
    content: "";
    background: url("/images/public/goTop.png") no-repeat;
    background-size: contain;
}
.dropDown {
	position: absolute;
    top: 4.3rem;
    right: 0.5rem;
    z-index: 999999;
    background: #fff;
    -webkit-box-shadow: 0px 3px 5px rgba(51,51,51,0.5);
    box-shadow: 0px 3px 5px rgba(51,51,51,0.5);
    display: none;
}
.dropDown ul,.dropDown ul li{
    width: 100%;
    text-align: left;
}
.dropDown ul li a{
    display: block;
    line-height: 2.3rem;
    text-indent: 0.8rem;
    color: #4d4343;
    width: 7.3rem;
    border-bottom:1px solid #ddd;
}
.dropDown ul li:last-child a{
    border:none;
}
.dropDown ul li a:active{
    background: #6574c4;
    color: #fff;
}
.dropDown ul li a:before{
    display: inline-block;
    content:"";
    width: 1.25rem;
    height: 1.1rem;
    background: url("/images/public/groupChat.png") no-repeat;
    background-size: contain;
    vertical-align: top;
    margin: 0.5rem 0.4rem 0 0;
}
.dropDown.blogsList ul li a{
    text-align: center;
    text-indent: 0;
}
.dropDown.blogsList ul li a:before{
    display: none;
}
.dropDown ul li a:active:before{
    background: url("/images/public/groupChatActive.png") no-repeat;
    background-size: contain;
}
.dropDown ul li.addFriend a:before{
    width: 1.4rem;
    height: 1.3rem;
    background: url("/images/public/addP.png") no-repeat;
    background-size: contain;
    margin: 0.5rem 0.4rem 0 0;
}
.dropDown ul li.addFriend a:active:before{
    background: url("/images/public/addPActive.png") no-repeat;
    background-size: contain;
}
.dropDown ul li.sweep a:before{
    width: 1.45rem;
    height: 1.4rem;
    background: url("/images/public/sweep.png") no-repeat;
    background-size: contain;
    margin: 0.5rem 0.4rem 0 0;
}
.dropDown ul li.sweep a:active:before{
    background: url("/images/public/sweepActive.png") no-repeat;
    background-size: contain;
}
.dropDown ul li.beat a:before{
    width: 1.3rem;
    height: 1.15rem;
    background: url("/images/public/beat.png") no-repeat;
    background-size: contain;
    margin: 0.5rem 0.4rem 0 0;
}
.dropDown ul li.beat a:active:before{
    background: url("/images/public/beatActive.png") no-repeat;
    background-size: contain;
}
.dropDown ul li.releaseBuy a:before{
    width: 1.1rem;
    height: 1.35rem;
    background: url("/images/public/releaseBuy.png") no-repeat;
    background-size: contain;
    margin: 0.5rem 0.4rem 0 0;
}
.dropDown ul li.releaseBuy a:active:before{
    background: url("/images/public/releaseBuyActive.png") no-repeat;
    background-size: contain;
}
.dropDown ul li.collectionBuy a:before{
    width: 1.4rem;
    height: 1.3rem;
    background: url("/images/public/collectionBuy.png") no-repeat;
    background-size: contain;
    margin: 0.4rem 0.4rem 0 0;
}
.dropDown ul li.collectionBuy a:active:before{
    background: url("/images/public/collectionBuyActive.png") no-repeat;
    background-size: contain;
}
.dropDown ul li.shareBuy a:before{
    width: 1.2rem;
    height: 1.2rem;
    background: url("/images/public/shareBuy.png") no-repeat;
    background-size: contain;
    margin: 0.5rem 0.4rem 0 0;
}
.dropDown ul li.shareBuy a:active:before{
    background: url("/images/public/shareBuyActive.png") no-repeat;
    background-size: contain;
}
#list{
    display: none;
}
.noData {
	padding: 3rem 0;
    text-align: center;
}
.noData img{
    width: 18.1rem;
}

/*提示*/
.hitT{width:100%;height:100%;position:fixed; background-color: rgba(0, 0, 0, 0.5); z-index:999;top: 0;left: 0;}
.hintImg{top:50%;left:50%;position: fixed;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);overflow: hidden;z-index: 9999;}
.hintImg img{border:0px;max-width:100%;max-height:100%;}
.hint{width:300px;height:120px;border:1px solid #e7e7e7;position:absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);text-align:center; background-color:#fcfcfc;font-size:12px;z-index:999; color:#000; font-weight:bold;}
.hint1{padding-top:20px;}
#hintBtn{width:100px; height:30px; margin:15px; background-color:#dfe4e7;font-size:16px;}
.hint2{width:300px;height:120px;border:1px solid #e7e7e7;position:fixed; left:50%; top:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);text-align:center; background-color:#fcfcfc;font-size:12px;z-index:999; color:#000; font-weight:bold}
.hint2 p{
    padding-top: 2rem;
}


.filterBg{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99997;
    background: rgba(51,51,51,0.66);
    top: 0;
    left: 0;
    display: none;
}
.filter {
	width: 70%;
    height: auto;
    position: fixed;
    top: 0;
    right: -70%;
    background: #fff;
    z-index: 99998;
}
.filterBox {
	position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
.filterBox::-webkit-scrollbar {
    display: none;
}
.filterMain {
    width: 100%;
    height: auto;
    padding-bottom: 3.6rem;
 }
.filterMain h2{
    width: 100%;
    font-size: 1.2rem;
    line-height: 3.1rem;
    color: #666666;
    text-indent: 1rem;
}
.filterTitle{
    width: 100%;
    position: relative;
    background: #eeeeee;
    border-bottom: 1px solid #dddddd;
}
.filterTitle h3{
    font-size: 1.2rem;
    line-height: 3.1rem;
    color: #333333;
    text-indent: 1rem;
}
.filterTitle b{
    display: block;
    position: absolute;
    width: 0.9rem;
    height: 0.5rem;
    right: 1rem;
    top: 1.3rem;
    background: url("/images/public/downArrow.png") no-repeat;
    background-size: contain;
}
.filterList {
	padding:0.5rem;
}
.filterList ul{
    width: 100%;
}
.filterList ul li{
    width: 33.33%;
    float: left;
    padding:0.5rem;
}
.filterList ul li a{
    display: block;
    line-height: 2.1rem;
    color: #333333;
    background: #e1e1e1;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 1rem;
}
.filterList ul li a.focus{
    background: #3f51b5;
    color: #fff;
}
.filterBtn {
	position: fixed;
    z-index: 99999;
    bottom:0;
    right: -70%;
    width: 70%;
}
.filterBtn a{
    display: block;
    width: 50%;
    float: left;
    text-align: center;
    font-size: 1.5rem;
    color:#828486;
    line-height: 3.5rem;
    border:2px solid #dddddd;
    background: #eeeeee;
}
.filterBtn a.confirm {
	color: #fff;
    background: #3f51b5;
    border:2px solid #3f51b5;
}
ul.four li{
    width: 25%;
}