@import url(reset.css);

/*横版*/
@media (orientation:landscape){
    @media only screen and (max-width:1920px){
        .raider-list{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
        }
        .book-description{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:center;
        }
        .book-description .detail-title{
            font-size: 2vh;
        }
        .book-description .type{
            width: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
        }
        .book-description .time-box{
            width: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
            font-size: 1.5vh;
            color: #a3a3a3
        }
        .book-description #detail{
            font-size: 1.5vh;
            width:100%;
            height: auto;
            background-color: #fff;
            padding: 100px;
        }
        .raider-item{
            width: 48%;
            height: 20vh;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            padding: 15px 11px;
            background-color: #fff;
            color: #393b40;
            margin: 1vh;
            flex-direction: column;
        }
        .raider-item .raider-title{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #f3f0f0;
            padding-bottom: 0.5vh;
            margin-bottom: 0.5vh;
        }
        .raider-item .raider-content{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            flex:1;
        }
        .raider-item .raider-content:hover{
            font-weight: bold;
            color: #0a0a0a;
        }
        .raider-top{
            font-size: 1.5vh;
            font-weight: bold;
        }
        .desc{
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
    @media only screen and (min-width:1921px){
        .raider-list{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
        }
        .book-description{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:center;
        }
        .book-description .detail-title{
            font-size: 2vh;
        }
        .book-description .type{
            width: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
        }
        .book-description .time-box{
            width: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
            font-size: 1.5vh;
            color: #a3a3a3
        }
        .book-description #detail{
            font-size: 1.5vh;
            width:100%;
            height: auto;
            background-color: #fff;
            padding: 100px;
        }
        .raider-item{
            width: 48%;
            height: 20vh;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            padding: 1.5vh 1vh;
            background-color: #fff;
            color: #393b40;
            margin: 1vh;
            flex-direction: column;
        }
        .raider-item .raider-title{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #f3f0f0;
            padding-bottom: 0.5vh;
            margin-bottom: 0.5vh;
            font-size: 2vh;
        }
        .raider-item .raider-content{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            flex:1;
        }
        .raider-item .raider-content:hover{
            font-weight: bold;
            color: #0a0a0a;
        }
        .raider-top{
            font-size: 1.5vh;
            font-weight: bold;
        }
        .desc{
            font-size: 1.5vh;
        }
    }
}
/*竖版*/
@media (orientation:portrait){
    @media only screen and (min-width:1081px){
        .raider-list{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
        }
        .book-description{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:center;
        }
        .book-description .detail-title{
            font-size: 2vh;
        }
        .book-description .type{
            width: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
        }
        .book-description .time-box{
            width: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
            font-size: 1.5vh;
            color: #a3a3a3
        }
        .book-description #detail{
            font-size: 1.5vh;
            width:100%;
            height: auto;
            background-color: #fff;
            padding: 100px;
        }
        .raider-item{
            width: 45%;
            height: 20vh;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            padding: 15px 11px;
            background-color: #fff;
            color: #393b40;
            margin: 1vh;
            flex-direction: column;
        }
        .raider-item .raider-title{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #f3f0f0;
            padding-bottom: 0.5vh;
            margin-bottom: 0.5vh;
        }
        .raider-item .raider-content{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            flex:1;
        }
        .raider-item .raider-content:hover{
            font-weight: bold;
            color: #0a0a0a;
        }
        .raider-top{
            font-size: 1.5vh;
            font-weight: bold;
        }
        .desc{

        }
    }
    @media only screen and (max-width:1080px) {
        .raider-item .raider-title{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            border-bottom: 1px solid #f3f0f0;
            padding-bottom: 0.5vh;
            margin-bottom: 0.5vh;
            justify-content: space-between;
            align-items: baseline;
        }
        .raider-top{
            font-size: 1.5vh;
            font-weight: bold;
        }
        .raider-item .raider-content{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            flex:1;
        }
        .raider-item .raider-content:hover{
            font-weight: bold;
            color: #0a0a0a;
        }
    }
}