/*移动端样式*/
@media screen and (max-device-width: 767px){
    .top-right{
        display: flex;
        flex-direction:column;
        align-items:flex-start;
        /*margin-left:20px;*/
    }
    .top-title{
        font-size:2rem;
        color:#777;
        font-weight:600;
    }
    .title-list{
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
    .content-nav{
        display: none;
    }
    .row-list{
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .exhibit-hr{
        width:100%;
        border:#000 solid 0.5px;
        margin-top:0px;
    }
    .exhibit-content{
        font-size:1.7rem;
        line-height:3.4rem;
        font-weight:400;
        letter-spacing: 1px;
    }
    .exhibit-content a{
        color:#333;
    }

    .exhibit-content img{
        max-width: 100%;
        height: auto;
    }

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .imgBoxItem {
        width: 95%;
        height: 200px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        /*border:#0a568c solid 1px;*/
        border-radius: 10px;
        padding:0 !important;
        border: 0 !important;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .imgBoxItem:hover{
        cursor:pointer;
    }
    .work-info{
        width:100%;
        background-color: white;
        opacity: 0.5;
        color:#333;
        text-align: center;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;  /** 如果设置为 2 则表示只显示2行 */
        -webkit-box-orient: vertical;
    }
}

/*pc端样式*/
@media screen and (min-device-width: 768px){
    .exhibit-top{
        display:flex;
        flex-direction:row;
        justify-content: flex-start;
        width:100%;

    }
    .exhibit-top img{
        width:30%;
        height:auto;
        border-radius: 5px;
    }
    .top-right{
        display: flex;
        flex-direction:column;
        align-items:flex-start;
        margin-left:20px;
    }
    .top-right p{
        color:#666;
        letter-spacing: 2px;
    }
    .top-title{
        font-size:2rem;
        color:#666;
        font-weight:600;
    }
    .content-nav{
        display:flex;
        flex-direction: column;
        border:#bbb solid 1px;
        height:300px;
        background-color: #fbfbfb;
        color:#666;
    }
    .nav-list{
        display:flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-list-title{
        font-size:2rem;
        font-weight: 500;
    }
    .nav-list-a{
        color:#666;
    }


    .exhibit-content{
        font-size:1.7rem;
        line-height:3.4rem;
        font-weight:400;
        letter-spacing: 1px;
    }
    .exhibit-hr{
        border:#000 solid 0.5px;
        margin-top:0px;
    }
    .exhibit-hr-news{
        width:45%;
        border:#000 solid 0.5px;
    }
    .nav-title{
        display:flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        font-size:2rem !important;
        height:35px !important;
        background: #bbb;
        font-weight: 600;
        color: #0088cc !important;
    }
    .artist_list{
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

    }
    .artist_list a{
        font-size:2rem;
        font-weight: 600;
        color:#666;
    }

    .link-news-exhibit{
        width:100%;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .link-news-exhibit div{
        width:49%;
    }
    .exhibit-content a{
        color:#333;
    }
    .title-list{
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .imgBoxItem {
        width: 200px;
        height: 200px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        /*border:#0a568c solid 1px;*/
        border-radius: 10px;
        padding:0 !important;
        border: 0 !important;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /*.imgBoxItem::after {
        position:relative;
        color: #ffffff;
        text-align:center;
        background-color: #0e0e0e;
        opacity: 0.5;

        !*margin:0 auto;*!
        !*text-align:center;*!
    }
    .imgBoxItem:hover::after {
        content: attr(data-sub-html);
        width: 200px;
        height: 100%;
        display:table-cell;
        vertical-align:bottom;
    }*/

    .imgBoxItem:hover{
        cursor:pointer;
    }
    img:not([src]) {
        opacity: 0;
    }

    .work-info{
        width:200px;
        background-color: white;
        opacity: 0.5;
        color:#333;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;  /** 如果设置为 2 则表示只显示2行 */
        -webkit-box-orient: vertical;
    }

}