article{padding: 0 0 100px;   }/*30px 0 100*/
article section{
    max-width: 1560px;
    margin: 0 auto;
}
/*youtube影片RWD  開始-----*/
.video_auto {
    display: block;
    position: relative;
    padding-bottom: 64%;/*原70*/
    height: 0;
    overflow: hidden;
    background-color: #000;
    margin: 15px;
    width: calc(100% - 30px);
}
#muteYouTubeVideoPlayer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:calc(100% - 51px);/*原58*/
}
/*youtube影片RWD  結束-----*/
.video_auto figure{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    position: absolute;
    bottom: 0;    
}
.video_auto h5,.video_auto a{color: #fff;}
.video_auto a{    
    display: block;
    padding: 3px 20px;
    border-radius: 20px;}
.video_auto a .arrow{
    border-top: 2px solid #fff;border-right: 2px solid #fff;border-bottom: none;
    margin: 0 0px 2px 7px;
}



.flex{
    display: flex;
    flex-wrap: wrap;
/*    justify-content: space-between;*/
    padding: 10px 50px 40px;
}
.feature_bn{padding: 10px 50px 10px;}
.col_2{width: 66.6%;}
.col_half{width: 50%;padding: 15px;}
.feature_side{width: 33.3%;flex-direction: column;}
.list_box{width:33.3%;padding: 15px;}
.feature_side .list_box, .col_2 .list_box{width: 100%;}
.left_right{display: flex;}
.left_right > a{width: 100%;}
.left_right .list_text {padding: 0px 20px;width: 100%;}
.left_right h2{font-size: 18px;}

.col_3_4{width: 75%;}
.col_1_4{width: 25%;}


.title{    
    display: flex;
    padding: 40px 60px 20px;
    align-items: center;
    justify-content: space-between;
}
.title .arrow{    
    transform: rotate(-45deg);
    margin:0 20px 2px 6px;}
/*.title a:hover{opacity: .7;}*/
.title hr{width: 100%;}

.title_nav{justify-content:space-between;align-items: baseline;}
.nav,.nav_busi{margin: 0 30px;flex: 1;}
.nav li a,.nav_busi li a{font-size: 18px;padding: 20px 5px;color: #999;}
.nav li .now, .nav li a:hover,.nav_busi li .now,.nav_busi li a:hover{color: #000;font-weight: 400;}

.nav_btn{display: none;}

/*塞選filter-------------------*/
.wrap{    
    flex: 1;
    display: flex;
    justify-content: space-between;
}
/*塞選filter fin-------------------*/



.pic{
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 52.5%;
    position: relative;
    background-repeat: no-repeat;
}
.pic:hover:after{
    opacity: 1;
}

.pic:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.1);
    opacity: 0;
    transition: ease-in-out opacity .2s;
}
.pic_mask{padding-bottom: 40%;}
.pic_mask h4{
    display: block;
    font-weight: 400;
    width: 100%;
    padding-right:120px;
    margin: 20px;
    color: #fff;
    position: absolute;
    bottom: 0;
    font-size: 28px;
    z-index: 5;
}
.pic_mask:before{
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 40%;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.7)0%, rgba(0, 0, 0, 0)80%); 
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.7)0%, rgba(0, 0, 0, 0)80%); 
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7)0%, rgba(0, 0, 0, 0)80%); 
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.7)0%, rgba(0, 0, 0, 0)80%); 
}




.icon_play:before{
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../images/icon.png);
    background-position: -72px 0px;
    background-size: cover;
    position: absolute;
    top:calc(50% - 25px);
    left:calc(50% - 25px);
    z-index: 1;
    opacity: .95;
    filter: drop-shadow(0px 0px 6px rgba(0,0,0,.2));
    transition:cubic-bezier(.51,.01,.28,1.36) all .3s ;
}
.icon_album{
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    background-color:rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,.4);
    z-index: 10;
    border-radius:5px;
    padding:3px 20px 2px 8px;
    color: #ccc;
    font-size: 15px;
    line-height: 40px;
}
.icon_album i{
    display: block;
    width: 35px;
    height: 31px;
    background-image: url(../images/icon.png);
    background-size: cover;
    background-position: -8px 0px;
    margin: 2px;
}
.icon_album:hover{background-color:rgba(126,6,30,0.8);}



.icon_play:after{opacity: .6;}
.icon_play:hover:before{transform: scale(1.1);}

.col_2 .icon_play:before{transform: scale(1.5);}
.col_2 .icon_play:hover:before{transform: scale(1.6);}

.list_text{
    padding:5px 20px 10px 0;
}

.note{font-size: 13px;color: #E42144;}
.note i{display: inline-block;width: 7px;height: 7px;border-radius: 50%;background-color: #E42144;margin-right: 5px;}
.soon{color: #728DED;}
.soon i{background-color: #728DED;}
.see{display: inline-block;}
.see i:before{
    display: block;
    width: 13px;
    height: 13px;
    border: 2px solid #E21422;
    border-radius: 80% 2px;
    transform: rotate(45deg);
    margin: -7px -7px;
}
.see i{
    background-color: transparent;
    border: 2px solid #e42144;
    margin:0 8px 1px 15px;;
    transform: scale(.85);
}




.av{color:#000 !important; display:block !important; margin-left:15px;}

.arrowgo{
    width: 18px;
    height: 18px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    border-radius: 1px;
    position: absolute;
    bottom: 30px;
    right: 40px;
    z-index: 5;
    transform: rotate(45deg);
    transition:cubic-bezier(.51,.01,.28,1.36) transform .3s;
}
.arrowgo:after{
    margin: 9px 0px 0px -10px;
    width: 30px;
    height: 3px;
    border-radius: 1px;
    background-color: #fff;
    transform: rotate(-45deg);
}
.pic_mask:hover .arrowgo{transform:rotate(45deg) translateX(10px) translateY(-10px);}


.pic_mask h4{
    display: -webkit-box;  
    overflow:hidden;
    text-overflow : ellipsis;   
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*頁數----------*/
.page{display: flex;justify-content: center;    align-items: center;margin: 20px 0;}
.page a{
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
/*    margin: 5px;*/
    color: #aaa;
    font-weight: 500;
}
.page .arrow{
    margin: 15px 10px;
    transform: rotate(-45deg);
}
.page .first_page .arrow,.page .prev_page .arrow{
    transform: rotate(135deg);
}
.last_page .arrow, .first_page .arrow{margin:12px 0;}

.last_page ,.first_page{background-color: #f2f2f2; border-radius: 50%;}
.page a:hover{color:#222;}
.page .pagenow,.page .pagenow:hover{color:#000;    transform: scale(1.4);}


.tag_title{
 /*   background-color:#dad3c1;*/
    /*text-align: center;*/
    padding: 40px 0;
   /* margin-bottom: 20px;*/
    /*position: relative;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tag_title h4{color:#baaf9a;font-size: 30px;text-align: center;}
.tag_title p{color:#baaf9a; margin: 8px 0;font-size: 13px;}
.tag_title span{
    display: inline-block;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 48px;
    margin: 0 6px 0 0;
    font-size: 32px;
    color: #fff;
    font-weight: 400;
    background-color: #baaf9a;
    border-radius: 25px 20px;
/*    position: absolute;
    left: 685px;
    top: 40px;*/
}

/*收錄與分享按鈕-------------------*/
.share{
    display: flex;
    width: 60px;
    align-items: center;
}
.share i{
    -webkit-filter:brightness(2) grayscale(1);
    -moz-filter:brightness(2) grayscale(1);
    -ms-filter:brightness(2) grayscale(1);
}
.like{
    width: 55px;
    height: 55px;
    box-shadow:0 0 10px rgba(0,0,0,0.17);
    border-radius: 50%;
    background-color: #fff;
    padding: 8px;
    transition: all 0.2s ease-out;
    opacity: .9;
    cursor: pointer;
    transform: scale(.88);
}
.like input{display: none;}
.like i{-webkit-filter: grayscale(1) brightness(1.8);cursor: pointer;}
.like:hover{box-shadow:0 0 10px rgba(0,0,0,0.36);opacity: 1;}
.like input:checked + label i{-webkit-filter:brightness(.95);animation: Jelly .2s forwards;}

.share .social{flex-direction: column;transform: scale(.75);padding:0;}
.share .social a{margin: 0;}

/*專題及tag頁share----------------------------*/
.socialshare{
    width: 100%;
    display: flex;
    justify-content: center;
    }
.socialshare p{font-size: 13px; color: #aaa;}
.socialshare ul{
    padding: 15px 15px 15px 45px;
}
.socialshare ul a{
    margin: 2px;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,.7);
    border-radius: 5px;
}
.socialshare ul i{
    transform: scale(.55);
    transform-origin: left top;
    margin: 4px;
}
.socialshare .fb_b:hover{
    background-color: #4267B2;
}
.socialshare .line_b:hover{
    background-color: #01B901;
}
.socialshare a:hover i{
    -webkit-filter:grayscale(1) brightness(20) ;
    -moz-filter:grayscale(1) brightness(20) ;
    -ms-filter:grayscale(1) brightness(20) ;
    animation:none; 
}
.socialshare .fb_like{display: flex;align-items: center;margin: 0 5px;}




.socialshare_tag ul a{
/*    margin: 2px;
    width: 30px;
    height: 30px;*/
    background-color:#fff;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.socialshare_tag a i{
    -webkit-filter: brightness(2) grayscale(1);
    -moz-filter: brightness(2) grayscale(1);
    -ms-filter: brightness(2) grayscale(1);
}
.socialshare_tag .fb_b:hover{
    background-color: #fff;
}
.socialshare_tag .line_b:hover{
    background-color: #fff;
}    
.socialshare_tag a:hover i{
    -webkit-filter:none;
    -moz-filter:none;
    -ms-filter:none;
}


/*share---fin-------------------------*/




/*小分類按鈕--------------*/
.tab_nav{
    display: flex;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

/*左側邊menu_sidebar--------------*/
.sidebar li{margin: 5px 0;}
.sidebar a{
    font-size: 18px;
    color: #999;
    padding:5px 18px;
    font-weight: 400;
}

.sidebar{margin: 10px 0 30px;}
.sidebar a:hover{color: #000;opacity: 1;}
.sidebar .sidebar_now{color: #000;font-weight: 400;position: relative;}
.sidebar_now:before{
    content: '';
    display: inline-block;
    width: 2px;
    height: 20px;
    background-color: #000;
    position: absolute;
    left: 3px;
    top: 5px;
}

/*基本文章內文格式----------*/
.content{max-width: 840px;padding-top: 20px;}
.content li{margin:40px 0;}

.content h5,.content h2, .rec_title,.reac h5{
    font-size: 22px;
    font-weight: 500;color: #111;
    margin: 20px 0;
}
.content h1{font-size: 24px;}
.content h3{font-size: 20px;}
.content h1,.content h2,.content h3{margin: 10px 0;font-weight: 500;color: #111;}

.content p,.content a{
    font-size: 18px;color: #4d4d4d;
    font-weight: 400;
    line-height: 1.9;
    margin: 10px 0;
    word-break: break-word;
}
.content strong{color: #000;font-weight: 500;}
.content a > strong{color: #e42144;}
.content a:hover,.content a > strong:hover{color:  #ff375b;}
/*畫廊、藝術家、藝術品box--------*/

.gallery_box, .artist_box{
  display: block;
  border-radius: 7px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  width:calc(33.3% - 30px) ;
  margin: 15px;
}
.gallery_box .pic:after, .artist_box .pic:after{
    border-radius: 7px 7px 0 0;
}
/*.gallery_box:hover, .artist_box:hover{
    background-color: #f1f1f1;
  border: 1px solid #e5e5e5;}*/



.gallery_box h2, .artist_box h2, .artwork_box h2{
  margin: 5px 0 2px;font-size: 18px;
}


.gallery_box .pic, .artist_box .pic{
  border-radius: 7px 7px 0 0;
  
}
.gallery_box .pic,.artwork_box .pic{position: relative;}
.gallery_text, .artist_text{display: flex;padding: 10px;}

.gallery_box .like, .artwork_box .like{
  position: absolute;
  z-index: 15;
  right: 10px;
  bottom: 18px;
  display:none;
}
.gallery_box:hover > .pic .like, 
.artwork_box .pic:hover >.like{
  display: block;animation: Jellyy .6s forwards;
}

.gallery_img{width: 80px;height: 80px;margin-right: 15px;}
.gallery_img img{width: 100%;height: auto;}
.gallery_img + div{width: calc(100% - 80px);}
.artist_text{
  padding:8px 15px 10px;
  align-items: center;
  justify-content: space-between;
}
/*.artist_text .like{margin:0 10px;}*/

.artwork_box{padding: 25px;width: 100%;margin-bottom: 10px;}
.artwork_box img{
  width: 100%;
  height: auto;
  position: relative;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.artwork_box .pic{display: block; padding-bottom: 0;height: auto;}
.artwork_text{padding: 10px 0;border-bottom: 1px solid #dedede;}
.artwork_text h4{font-size: 15px;font-weight: 300;margin-bottom: 15px;}
.artwork_text p{font-size: 14px;}
.artworks_wrap{
    display: block;
    width: 25%;
}

.artwork_box .pic{margin-bottom: -8px;}
.artwork_box .pic:after{bottom: 7px;}

/*空資料-------------------*/
.empty{
    justify-content: center;
    align-items: center;
}
.empty p{font-size: 24px;color: #ddd;padding: 5% 20px;}

.CLOSE{display: none;}



/*導購推薦區塊----------------------------*/
.promo{
    background-color: #f5f5f5;
    padding:0 15px;
    margin: 20px 0;
}

.promo .promo_title{
    color: #fff;
    background-color: #e42144;
    text-align: center;
    padding: 8px 0;
    margin: -15px 0 0 -24px;
    position: relative;
}
.promo .promo_title:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -10px;
    left: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #c5082a transparent transparent;
}
.promo_black{margin-top:80px;}
.promo_black .promo_title{background-color: #222;}
.promo_black .promo_title:after{border-color: transparent #000 transparent transparent;}
.promo .pic_mask,.promo .pic_mask:before{
    padding-bottom: 100%;
    margin: 15px 0;
}
.promo .pic_mask:before{
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7)0%, rgba(0, 0, 0, 0)55%);}

.promo .pic_mask{position: relative;}
.promo .promo_text{position: absolute;bottom: 0;padding: 15px;z-index: 1;}
.promo_text h5,.promo_text p{color: #fff;}

/*嚴選作品slide block-----*/
.bn_workad{padding:10px 60px 20px;}
.promo{width: 100%;border: 1px solid #eee;}
.slide_work .item-work{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.variable .pic_mask, .variable .pic_mask:before {
    padding-bottom: 0;
    margin: 0px 0;
    width: 225px;
    height: 225px;
}
.variable{padding: 5px 0 20px;}
.variable .slick-slide{margin:15px;}
.variable span:before,.variable span:after { display: inline; }
.variable span{font-weight: 500;padding: 0 5px;}
.variable h5{color: #D4BC7B;}

/*頁碼-------------------*/
#pagination {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: baseline;
    margin: 40px 0;
}
#pagination a, #pagination i {
    display: inline-block;
    color: #aaa;
    text-align: center;
    font-size: 16px;
    padding:6px;
    font-weight: 500;
    letter-spacing: 0;
}
#pagination i{padding: 4px;}
#pagination a:hover{color: #000;}

#pagination a {
    cursor: pointer;
    min-width: 24px;

}
#pagination i {
    margin: 0 -2px;
}
#pagination a.current {
    color: #000;
    font-size: 18px;
}

#pagination a:first-child .arrow{transform: rotate(135deg);}
#pagination a:last-child .arrow{transform: rotate(-45deg);}




/*LOADING PAGE-------------------*/

.loading{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(255,255,255,.95);
    z-index: 9999999;
}

/*.loading figure{
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 20px 0;
    background-color: #e42144;
    animation: star 2s 0s infinite;
    opacity: 0;
}
.loading figure:nth-child(2n){margin-left: 50%;animation-delay:.4s;}
.loading figure:nth-child(3n){margin-left: 20%;margin-top: 15%; animation-delay:1s;}
.loading figure:nth-child(4n){margin-left: 80%;animation-delay:.2s;background-color: #111;}
.loading figure:nth-child(6n){margin-left: 10%;margin-top: 25%; animation-delay:.8s;}
*/

.loading div{
    transform: scale(.8);
    display: block;
    width: 200px;
    height: 25px;
    border-radius: 5px;
    overflow: hidden;

    margin: 8px 0;
    position: relative;
/*    background-color: rgba(0,0,0,.1);*/
}
.loading p{margin: 20px 0;animation:light 2s 0s infinite;}

.loading div:after{
    content: '';
    display: block;
    width: 160px;
    height: 25px;
    background-color: #e42144;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: -140px;
}
.loading div:first-child:after{animation: bar 1.6s 0s infinite;animation-timing-function:cubic-bezier(.51,0,.03,1.01);}
.loading div:nth-child(2):after{
    animation: bar_re 1.6s 0s infinite;left: 180px;background-color:#e9361c;animation-timing-function:cubic-bezier(.51,0,.03,1.01);
}
@keyframes bar{
    0%{left: -140px;}
    47%{left: 180px;}
    53%{left: 180px;}
    100%{ left: -140px;}
}

@keyframes bar_re{
    0%{left: 180px;}
    47%{left: -140px;}
    53%{left: -140px;}
    100%{ left: 180px;}
}
@keyframes light{
    0%{ transform: scale(1); }
    50%{transform: scale(1.05);opacity: .8;}
    100%{transform: scale(1);}
}

/*@keyframes star{
    0%{ transform: translateX(-5px);opacity: 1;}
    5%{ width: 200px;}
    45%{transform: translateX(400px);}
    50%{width: 8px;transform: translateX(500px);background-color: rgba(255,255,255,.4);}
    100%{background-color: rgba(255,255,255,0);}
}
*/

/*平板==================================================================================================*/
@media screen and (max-width: 1250px){
    .artist_text {padding: 10px;}

    .video_auto {
        margin: 10px;
        width: calc(100% - 20px);
    }
    .list_box {padding: 10px;}


}
/*@media screen and (max-width: 1024px){
    article{overflow: initial;}
}*/
@media screen and (max-width: 1024px) and (min-width: 768px){

    .col_2{width: 100%;}
    .feature_side{
        width:100%;
        display: flex;
        flex-direction: row; 
        flex-flow: wrap;
    }
    .feature_bn .feature_side .list_box{width: 50%;}
    .col_half{width: 100%;padding: 5px;}
    .flex{padding: 0px 30px 40px;}
    .feature_bn {padding: 10px 30px 10px;}
    .left_right {flex: 50%;}

    .video_auto {
        padding-bottom: 38%;
        width: calc(50% - 20px);
    }
    
    .title {padding: 30px 40px 20px;}


    .title_nav {
        justify-content:space-between;
        align-items: center;
        position: relative;}
    .nav_btn{
        display: block;
        background-color: #000;
        border-radius: 5px;
        padding: 5px 15px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        margin-left: 5px;
    }
    .nav_btn:hover{background-color:#681929;transition: all ease .3s;}
    .nav_btn i.arrow{
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
        margin: 0 3px 2px 6px;
    }

    .nav, .filter {
        margin: 0;
        position: absolute;
        top: 80px;
        right: 40px;
        flex-direction: column;
        z-index: 11;
        background-color: #000;
        width: 300px;
        border-radius: 3px;
        padding: 20px 0;
    }
    .title_nav .nav, .filter{display: none;}
    .nav li .now, .nav li a:hover {color: #fff;}
    .nav li a{display: block; width: 100%;padding: 5px;text-align: center;}
    .nav li{width: 100%;margin: 0;}
    .nav li:hover{background-color: #444;}

    /*塞選filter-------------------*/
    .wrap{justify-content: flex-end;}
    .filter {padding: 20px;}
    .filter_box{
        width: 100%;
        -webkit-filter: invert(100%);
        margin:5px 0;
        background-color: #bababa;
        border: 2px solid #bababa;
    }

/*左側邊menu_sidebar--------------*/
    .sidebar{
        padding: 20px 40px;
        margin: 20px 0;
    }
    .sidebar li{margin:2px 0;}
/*畫廊、藝術家、藝術品box--------*/

    .gallery_img{width: 70px;height: 70px;margin-right: 10px;}
    .gallery_img + div{width: calc(100% - 70px);}
    .gallery_box h2{
           margin: 0 0 2px;
        }
      .artist_box h2, .artwork_box h2{font-size: 18px; }

      .artist_text .like {margin: 0px 0px;}
      .artist_text {padding: 10px;}
      .artwork_box {padding: 15px;}
      .artwork_text {padding: 5px 0;}



      .gallery_box .like, .artist_text .like, .artwork_box .like {
          transform: scale(.8);
          transform-origin: right bottom;}
      .gallery_box .like{ bottom: 10px;}

        .gallery_box, .artist_box { width: calc(33.3% - 20px);}
        .gallery_box, .artist_box{ margin: 10px;}

/*嚴選作品slide block-----*/
    .bn_workad{padding:0 40px 20px;}
    .variable .pic_mask, .variable .pic_mask:before {
        width: 180px;
        height: 180px;
    }
    .variable { padding: 5px 0 10px;}
    .variable .btn_9{max-width: 180px;font-size: 15px;}
    .variable .slick-slide {margin: 10px;}

}


/*手機===================================================================================================*/

@media screen and (max-width: 767px) {

    article{padding: 0 0 40px;}

    .col_2{width: 100%;}
    .feature_side{
        width:100%;
        display: flex;
        flex-direction: row; 
        flex-flow: wrap;
    }
    .col_half{width: 100%;padding: 0;}
    .feature_bn { padding: 0 0 10px;}
    .flex{padding: 0 0 20px;}
    

    .video_auto {margin: 15px;}
    .video_auto a {padding: 2px 20px;}

    
    .title {padding: 30px 15px 10px;}
    .title .arrow {margin: 0 7px 2px 6px;}

    .left_right h2 {font-size: 15px;}



    .title_nav {
        justify-content:space-between;
        align-items: center;
        position: relative;}
    .nav_btn{
        display: block;
        background-color: #000;
        border-radius: 5px;
        padding: 3px 7px;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
        margin-left: 5px;
    }
    .nav_btn i.arrow{
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
        margin: 0 3px 2px 6px;
    }

    .nav, .filter{
        margin: 0;
        position: absolute;
        top: 70px;
        right: 0px;
        flex-direction: column;
        z-index: 10;
        background-color: #000;
        width: 100%;
        border-radius: 0px;
        padding: 20px 0;
    }
    .title_nav .nav,.filter{display: none;}
    .nav li .now, .nav li a:hover {color: #fff;}
    .nav li a{display: block; width: 100%;padding: 5px;text-align: center;}
    .nav li{width: 100%;margin: 0;}
    .nav li:hover{background-color: #444;}
    
.tag_title{padding: 20px 10px 10px;
    margin-bottom: 0;}
.tag_title p {margin: 5px 0;}
.tag_title span {
    width: 35px;
    height: 35px;
    line-height: 37px;
    font-size: 26px;
    border-radius: 20px 16px;
    margin: 0 3px 0 0;
}



/*塞選filter-------------------*/
    .wrap{justify-content: flex-end;}
    .filter {padding: 20px;}
    .filter_box{
        width: 100%;
        -webkit-filter: invert(100%);
        margin:5px 0;
        background-color: #bababa;
        border: 2px solid #bababa;
    }


    .list_box {width: 100%;padding: 10px 0;} 
    .list_text { padding: 5px 15px 15px;}
    .left_right{padding: 10px 15px;}
    .left_right .list_text {padding: 0px 0 0 15px;}

    .pic_mask h4{font-size: 21px;margin:15px;padding-right: 80px;width: auto;
    }

    .arrowgo {
        bottom: 20px;
        right: 20px;
        transform: rotate(45deg) scale(.7);}
    .pic_mask:hover .arrowgo{transform:rotate(45deg) translateX(5px) translateY(-5px) scale(.7);}
    

    .note {font-size: 12px;}
    
    .icon_album{transform: scale(.8);transform-origin: left bottom;}
    .icon_play:before{transform: scale(.8);}
    .icon_play:hover:before{transform: scale(.9);}
    .col_2 .icon_play:before {transform: scale(1.2);}
    .col_2 .icon_play:hover:before{transform: scale(1.3);}
    .see i{transform: scale(.8);}


    /*收錄與分享按鈕-------------*/
    .share {
        flex-direction: row;
        transform: scale(.8);
        transform-origin: left top;
    }
    .share .social {flex-direction:row;}


    /*專題及tag頁share-------------*/
    .socialshare .social{transform: scale(.9);}


    /*左側邊menu_sidebar--------------*/
    .sidebar{
        padding: 15px;
        margin: 20px 0;
    }
    .sidebar li{margin: 0;}
    .sidebar a {
        font-size: 15px;
        padding: 2px 12px;}
    .sidebar_now:before {height: 17px;}


/*基本文章內文格式----------*/
    .content h5,.content h2, .rec_title, .reac h5 {font-size: 20px;}
    .content li {margin: 10px 0 20px;}
    .content h5, .rec_title, .reac h5 { margin: 20px 0 15px;line-height: 1.4;}
    .content p {margin:5px 0;}
.content p, .content a{font-size: 17px;}

.content h1{font-size: 21px;}
.content h3{font-size: 19px;}

/*畫廊、藝術家、藝術品box--------*/

    .gallery_box, .artist_box {
      width: 100%;
      margin: 15px;
    }
    .gallery_box h2{ margin: 0 0 2px;}
    .gallery_img{width: 70px;height: 70px;margin-right: 10px;}
    .gallery_img + div{width: calc(100% - 70px);}

.gallery_text, .artist_text {align-items: center;}
    
  .gallery_text h2,.artist_text h2{font-size: 16px;}
  .artwork_box h2 {font-size: 14px;}

    .artist_box{
        display: flex;
        flex-direction: row;
    }
    .artist_box > a{display: block;width: 30%;}
    .artist_box .pic{    
      height: 100%;
      padding-bottom: 0;
      border-radius:7px 0 0 7px ;
    }
    .artist_text{width: 70%;padding:8px 10px;}
    .artist_text .like{display: none;}

    .artwork_box {margin-bottom:0; }
    .artworks_wrap {width: 50%;}
    .artwork_box {padding: 15px;}
    .artwork_text{padding: 5px 0;}
    .artwork_text h4{font-size: 13px;}

    .gallery_box .like, .artwork_box .like {
      transform: scale(.7);
      transform-origin: right bottom;
     
     }
    .gallery_box .like{ bottom: 10px;}
    .gallery_box, .artist_box { margin: 10px 15px;}

.artwork_text p{font-size: 13px;}



/*嚴選作品slide block-----*/
    .bn_workad{padding: 0 15px 0;}
    .variable {padding: 0 0 10px;}
    .variable .pic_mask, .variable .pic_mask:before {
        width: 160px;
        height: 160px;
    }
    .variable .btn_9{max-width: 140px;font-size: 13px;margin: 10px;padding: 5px;}
    .variable button{padding: 0;}
    .variable .slick-slide {margin: 10px;}
    .variable h5{font-size: 16px;}
    .bn_workad .promo_title {margin: -15px 0 0 -16px;padding: 5px 0;}
    .bn_workad .promo {padding: 0 5px;}

/*頁碼-------------------*/

    #pagination{margin: 30px 0;}
    #pagination a, #pagination i {
        padding:3px;
        font-size: 14px;
    }

    #pagination a {min-width: 19px;}
    #pagination i{padding: 1px;}


    .page{transform: scale(.9);}
    .page a{margin: 0;}



    /*LOADING PAGE--------------*/
    .loading div{
        transform: scale(.5);
        margin: 1px 0;
    }

    .tag_title h4 {font-size: 24px;}








}


.nav_btn i.ROTATE{
    transform: rotate(225deg);
    transition: all 0.1s ease;
    transform-origin:center 5px;
}