/*移动端样式*/
@media screen and (max-device-width: 767px){
    .artist-avatar{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width:100%;
        margin-top:20px;
    }
    .artist-avatar img{
        width:80% !important;
        border-radius: 10px !important;
    }
    .nav-block{
        display: none;
    }

    .news-block{
        width:100% !important;
    }

    .title-list{
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    .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;
    }

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

    .worksimg{
        display:flex;
        flex-direction: row;
        justify-content: center;
        width:100%;
    }

    #imgBox {
        margin: 0 auto;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width:100%;
        /*margin-bottom: 20px;*/
    }

    #imgBoxItem {
        width: 100%;
        height: 200px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        /*border:#0a568c solid 1px;*/
        border-radius: 10px;
        padding:0 !important;
        border: 0 !important;
    }

    #imgBoxItem img {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        border:0 !important;
        padding:0 !important;

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

/*pc端样式*/
@media screen and (min-device-width: 768px){
    .artist-left{
        background-color: #f6f5f5;
        margin-right:40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .artist-avatar{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width:100%;
        margin-top:20px;
        /*border-radius: 50%;*/
    }
    .artist-avatar img{
        width:80% !important;
        border-radius: 50% !important;
    }
    .exhibit-top{
        display:flex;
        flex-direction:row;
        justify-content: flex-start;
        width:100%;

    }
    .exhibit-top img{
        width:30%;
        height:auto;
        border-radius: 5px;
    }

    .nav-block{
        margin-top:20px;
        width:90%;
        border:#c6cdd2 solid 1px;
        padding: 5px 10px;
    }
    .nav-hr{
        border: #c6cdd2 solid 1px;
    }
    .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-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;
    }

    .worksimg{
        display:flex;
        flex-direction: row;
        justify-content: center;
        width:100%;
    }

    #imgBox {
        margin: 0 auto;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;

        flex-wrap: wrap;
        /*margin-bottom: 20px;*/
    }

    #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;
    }

    #imgBoxItem img {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        border:0 !important;
        padding:0 !important;

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

    .col-md-9{
        display: flex;
        flex-direction: column;
        width:100%;
    }
    .news-block{
        width:100% !important;
    }
}