/*搜索框*/
nav {
    margin-top: 24px !important;
    height: 291px;
    background: no-repeat  url("../image/bg.png");
    background-size: cover;
}

.bgBox{
    position: relative;
 }

.bgBox .title{
    margin: 59px auto 0;
    width: 240px;
    height: 53px;
    font-size: 40px;
    font-weight: bold;
    color: #333940;
    line-height: 47px;
}

.bgBox .searchBox{
    display: flex;
    align-items: center;
    width: 576px;
    height: 58px;
    margin: 17px auto 0;
    background: #FFFFFF;
    opacity: 1;
}

.bgBox input{
    font-size: 16px;
    width: 442px;
    height: 56px;
    border: none;
    outline: none;
    text-indent: 24px;
}

.bgBox input::placeholder{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.bgBox a{
    display: block;
}

.bgBox .searchBox .delBtn{
    position: relative;
    margin: 0 14px 0 8px;
    width: 20px;
    height: 20px;
    color: #FFFFFF;
    cursor: pointer;
}

.leftBox .searchCity .delBtn{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.bgBox .searchBox .delBtn:hover,.leftBox .searchCity .delBtn:hover{
    opacity: 0.5;
}


.bgBox .searchBox .delBtn.active{
    visibility: visible;
}
.bgBox .searchBox .delBtn:not(.active){
    visibility: hidden;
}

.bgBox .searchBox .delBtn img{
    width: 24px;
    height: 24px;
}

.leftBox .searchCity .delBtn.active{
    visibility: visible;
}
.leftBox .searchCity .delBtn:not(.active){
    visibility: hidden;
}

.leftBox .searchCity .delBtn img{
    width: 16px;
    height: 16px;
}

.bgBox button{
    margin-right: 16px;
    width: 72px;
    height: 38px;
    background: #D02A33;
    border: none;
    border-radius: 2px 2px 2px 2px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 16px;
    cursor: pointer;
}

.bgBox button:hover{
    background: #B6272F;
}

.bgBox .desc{
    margin: 15px auto 0;
    width: 386px;
    height: 24px;
    font-size: 16px;
    font-weight: 400;
    color: #333940;
    line-height: 24px;
}

/*中部*/
main{
    margin-top: 24px !important;
    margin-bottom: 50px !important;
    display: flex;
}
/* 左边栏 地区 */
.leftBox{
    width: 307px;
    opacity: 1;
}

.region{
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    width: 307px;
    height: 625px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

.leftBox .title{
    width: 64px;
    height: 21px;
    font-size: 16px;
    font-weight: bold;
    color: #333940;
    line-height: 19px;
}

.searchCity{
    display: flex;
    align-items: center;
    margin-top: 24px;
    width: 259px;
    height: 36px;
    background: #FFFFFF;
    opacity: 1;
    border: 1px solid #EEEEEE;
}

.loupe{
    width: 16px;
    height: 16px;
    margin-left: 16px;
    margin-right: 8px;
    background: no-repeat  url("../image/loupe.png");
    background-size: cover;
    cursor: pointer;
}

.searchCity input{
    width: 187px;
    height: 34px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.regionBox{
    flex: 1;
    margin-top: 16px;
}

.regionBox.active{
    display: flex;
}
.regionBox:not(.active){
    display: none;
}

.regionUl li{
    margin-right: 11px;
    float: left;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 79px;
    height: 34px;
    border-radius: 2px 2px 2px 2px;
    cursor: pointer;
    font-size: 14px;
}

.regionUl li:nth-child(3n){
    margin-right: 0;
}

.regionUl li:hover{
    background: #F0DADA;
}

.regionUl li.active{
    background: rgba(182,39,47,0.05);
    color: #b6272f;
}

.regionUl li.active:hover {
    background: #F0DADA;
}

/*海报*/
.poster{
    margin-top: 24px;
    padding: 32px 50px 24px;
    width: 307px;
    background: linear-gradient(180deg, #D6D7DD 0%, #F2F3F6 19%, #E8E9ED 40%, #E3E5E9 65%, #CACDD4 100%);
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    font-weight: 400;
    color: #333940;
}

.poster .text1{
    height: 25px;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 5px;
}

.poster .text2{
    margin-top: 4px;
    height: 25px;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 5px;
}

.poster .text2 span{
    font-weight: bolder;
}

.poster .text3{
    margin-top: 16px;
    height: 18px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 7px;
}

.poster .imgBox{
    margin-top: 16px;
    width: 198px;
    height: 164px;
    background: no-repeat  url("../image/poster.png");
    background-size: cover;
}

.poster .device{
    margin: 12px auto 0;
    width: 168px;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 14px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #CCCCCC;
}

.device .computer{
    width: 24px;
    height: 24px;
    background: no-repeat  url("../image/computer.png");
    background-size: cover;
}

.device .phone{
    width: 24px;
    height: 24px;
    background: no-repeat  url("../image/phone.png");
    background-size: cover;
}

.device span:last-child{
    margin-left: 8px;
    font-weight: bolder;
}

.poster .linkMore{
    margin: 16px auto 0;
    width: 112px;
    height: 34px;
    background: #D02A33;
    border-radius: 2px 2px 2px 2px;
}

.poster .linkMore:hover{
    background: #B6272F;
}

.poster .linkMore a{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 34px;
    color: #FFFFFF;
}

.poster .text4{
    margin-top: 16px;
    height: 15px;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
}

/* 右边栏 数字报 */
.rightBox{
    flex: 1;
    margin-left: 24px;
}

.rightBox .top{
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

.top .titleLeft{
    display: flex;
    align-items: center;
    height: 24px;
    border-left: 4px solid #B6272F;
}

.top .titleLeft .title{
    margin-left: 8px;
    height: 21px;
    font-size: 16px;
    font-weight: bold;
    color: #333940;
    line-height: 19px;
}

.top .titleRight{
    height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 16px;
}

/* 按首字母 按发行类别 */
.sortByFirstLetter,.sortByReleaseType{
    margin-bottom: 24px;
    padding: 20px 18px;
    text-align: left;
    width: 100%;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

.sortByFirstLetter.folded,.sortByReleaseType.folded{
    height: 56px;
    overflow: hidden;
}

.sortByFirstLetter.active,.sortByReleaseType.active{
    display: block;
}

.sortByFirstLetter:not(.active),.sortByReleaseType:not(.active){
    display: none;
}

.sortByFirstLetter .title,.sortByReleaseType .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 21px;
}

.sortByFirstLetter .title .titleLeft,
.sortByReleaseType .title .titleLeft{
    font-size: 16px;
    font-weight: bold;
    color: #333940;
    line-height: 19px;
}

.sortByFirstLetter .titleRight,
.sortByReleaseType .titleRight{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: #F8F8F8;
    border-radius: 2px 2px 2px 2px;
    cursor: pointer;
}

.sortByFirstLetter .titleRight:hover,
.sortByReleaseType .titleRight:hover{
    background: rgba(0,0,0,0.05);
}

.sortByFirstLetter .titleRight img,
.sortByReleaseType .titleRight img{
    width: 24px;
    height:24px;
}

.sortByFirstLetter .titleRight img.active,
.sortByReleaseType .titleRight img.active{
    display: block;
}

.sortByFirstLetter .titleRight img:not(.active),
.sortByReleaseType .titleRight img:not(.active){
    display: none;
}

.newspaperItem{
    display: flex;
    min-height: 28px;
    line-height: 28px;
    margin-top: 20px;
}

.initialUl{
    display: inline-block;
}

.initialUl li{
    float: left;
    margin-right: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #333940;
}

.initialUl li a{
    color: #333940;
}

.initialUl li a:hover{
    text-decoration: underline;
    color: #0076FE;
}

/*.initialUl li:first-child*/
.newspaperItem span{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    min-width: 28px;
    height: 28px;
    background: rgba(182,39,47,0.05);
    border-radius: 2px 2px 2px 2px;
    font-size: 12px;
    font-weight: bold;
    color: #B6272F;
    line-height: 18px;
}

.sortByReleaseType .newspaperItem span{
    min-width: 48px;
}

/*搜索结果为空*/
.leftBox .emptyBox{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 561px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

.leftBox .emptyBox.active{
    visibility: visible;
}
.leftBox .emptyBox:not(.active){
    visibility: hidden;
}

.leftBox .emptyBox img{
    width: 181px;
    height: 110px;
}

.rightBox .emptyBox{
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*max-width: 864px;*/
    height: 561px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
}

.rightBox .emptyBox.active{
    visibility: visible;
}

.rightBox .emptyBox img{
    width: 181px;
    height: 110px;
}

.leftBox .emptyBox > span,
.rightBox .emptyBox > span {
    display: block;
    margin-top: 8px;
    color: #999999;
    font-size: 12px;
    line-height: 14px;
}

/* width:1080px  */
@media (max-width: 1080px) {
    .navBox span{
        margin: 0 21px;
    }
}