@charset "utf-8";

.theme_wrap{
    width: 1164px;
    margin-bottom: 100px;
    overflow: hidden;
}
.box_wrap{
    float: left;
    width: 568px;
    height: 260px;
    margin-right: 28px;
    margin-bottom: 48px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.box_wrap:nth-child(2n){
    margin-right: 0;
}
/* .box_wrap:nth-child(7){
    margin-bottom: 0;
}
.box_wrap:nth-child(8){
    margin-bottom: 0;
} */
.box_top{
    width: 100px;
    height: 30px;
    margin: 16px 0 16px 20px;
    border: 1px solid #634cb8;
    line-height: 28px;
    border-radius: 30px;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    color: #634cb8;
    float: left;
    overflow: hidden;
}

.box_content{
    margin: 0 0 19px 20px;
    width: 254px;
    line-height: 1.2;
    float: left;
    overflow: hidden;
     height: 56px;
}
.box_content div{
    font-size: 24px;
    color: #a897e8;
 
}
.box_tag_wrap {
    width: 330px;
    margin-left: 20px;
    overflow: hidden;
    position: relative;
    bottom: 12px;
}
.box_tag{
    float: left;
    overflow: hidden;
    height: 25px;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 25px;
    line-height: 20px;
    text-align: center;
}
.box_tag a {
    color: #c1c1c1;
    font-size: 14px;
    padding: 0 14px;
}
.box_tag:hover {
	border:1px solid #a897e8;
}
.box_tag:hover a {
	color:#a897e8;
}
.box_bottom_wrap {
    width: 200px;
    margin-left: 20px;
    margin-top: 0px;
    position: absolute;
    bottom: 12px;
}
.box_bottom_like{
    background: url(../../img/artbooks/art_heart_off.png) no-repeat center;
    background-size: contain;
    width: 21px;
    height: 21px;
    float: left;
    overflow: hidden;
    margin-right: 5px;
    cursor: pointer;

}
.box_bottom_like_num{
    height: 21px;
    line-height: 21px;
    color: #c1c1c1;
    font-size: 14px;
}
.box_bottom_like.on{
    background: url(../../img/artbooks/art_heart_on.png) no-repeat center;
    background-size: contain;
}
.view_book{
    /* background: url(../../img/artbooks/avantgarde.png) no-repeat; */
    width: 200px;
    height: 258px;
    background-size: contain;
    float: right;
    overflow: hidden;
    cursor: pointer;
}
.view_book img {
	width: 100%;
	height: 100%;
}
.view_book_more{
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.7);
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 40px;
    
}
.view_book_more a{
    font-size: 18px;
    color: #fff;
}

.full_wrap{
    display: none;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.6); */
    position: fixed;
    top: 0;
    left:0;
    z-index:999;
}

.popup_btn_prev{
    position: absolute;
    background: url(../../img/artbooks/out_arrow_prev.png) no-repeat;
    background-size: contain;
    width: 26px;
    height: 46px;
    top: 365px;
    left: -68px;
    z-index: 877;
}
.popup_btn_next{
    position: absolute;
    background: url(../../img/artbooks/out_arrow_next.png) no-repeat;
    background-size: contain;
    width: 26px;
    height: 46px;
    top: 365px;
    right: -68px;
    z-index: 876;
}
.popup_wrap{
    width: 1112px;
    height: 725px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.popup_left_book{
    /* background: url(../../img/artbooks/big_avantgarde.png)no-repeat;
    background-size: auto; */
    width: 560px;
    height: 725px;
    position: relative;
    float: left;
    overflow: hidden;
}

.book_btn_prev{
    position: absolute;
    background: url(../../img/artbooks/in_arrow_prev.png) no-repeat 50%;
    /* background-size: contain; */
    background-color : rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 20px;
    width: 34px;
    height: 34px;
    top: 365px;
    margin-left: 20px;
    padding: 20px;
    opacity: 1;
    z-index: 888;
}
.book_btn_next{
    position: absolute;
    background: url(../../img/artbooks/in_arrow_next.png) no-repeat 50%;
    /* background-size: contain; */
    background-color : rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 20px;
    width: 34px;
    height: 34px;
    top: 365px;
    right: 0;
    margin-right: 20px;
    padding: 20px;
    opacity: 1;
    z-index: 889;
}

.content_wrap{
    width: 552px;
    height: 725px;
    margin-left: 560px;
    background: #fff;
    position: relative;
}
.art_popup_close{
    position: absolute;
    background: url(../../img/artbooks/art_popup_close.png) no-repeat center;
    background-size: contain;
    width: 22px;
    height: 22px;
    top: 20px;
    right: 20px;
    border: none;
    z-index: 999;

}
.theme_title_wrap{
    margin: 0 0 20px 20px;
    padding-top: 40px;
    padding-left: 33px;

}
.theme_logo{
    background: url(../../img/art.png) no-repeat center;
    background-size: contain;
    width: 42px;
    height: 42px;
    margin-right: 15px;
    float: left;
}
.theme_title{
    font-size: 20px;
    font-weight:bold;
    color: #707070;
    line-height: 42px;
}
.book_title{
    margin: 0 0 12px 57px;
    font-size: 26px;
    color: #a897e8;
    line-height: 1.2;
    height: 62px;
    width: 450px;
    overflow: hidden;
}
.book_tag_wrap{
    margin: 0 57px;
    overflow: hidden;    
}
.book_tag{
    float: left;
    height: 25px;
    margin-top: 8px;
    margin-right: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 25px;
    line-height: 20px;
    text-align: center;
}
.book_tag a {
    color: #acacac;
    font-size: 16px;
    padding: 0 14px;
}
.book_tag:hover {
	border:1px solid #a897e8;
}
.book_tag:hover a {
	color:#a897e8;
}

.book_like_wrap{
    width: 200px;
    margin-left: 57px;
    margin-top: 18px;

}
.book_like{
    background: url(../../img/artbooks/art_bigheart_off.png) no-repeat center;
    background-size: contain;
    width: 23px;
    height: 23px;
    float: left;
    margin-right: 5px;
    cursor: pointer;

}
.book_like_num{
    color: #c1c1c1;
    font-size: 16px;
    height: 23px;
    line-height: 23px;
}
.book_like.on{
    background: url(../../img/artbooks/art_bigheart_on.png) no-repeat center;
    background-size: contain;
}
.rcm_more{
    margin:35px 0 0 57px;

}
.rcm_title{
    padding-bottom: 10px;
    border-bottom: 1px solid #cdcdcd;
    width: 450px;
    height: 35px;
}
.rcm_title span{
    font-size: 16px;
    color: #707070;
    cursor: pointer;
    float: left;
    overflow: hidden;
}
.rcm_content_btn{
    background: url(../../img/artbooks/more.png) no-repeat;
    width: 16px;
    height: 8px;
    margin: 11px 0 0 10px;
    float: left;
    overflow: hidden;
}

.rcm_content_btn.more_up{
    transform: rotate(180deg);
    margin: 9px 0 0 10px;
    transition: all 0.2s;
}
.hide_wrap{
    margin-left:57px;
}
.rcm_content_wrap {
    display: none;
    margin-top: 10px;
    margin-bottom: 30px;
    height: 147px;
    width: 450px;
}
.rcm_content_wrap a {
	width: 100px;
    height: 147px;
    display: inline-block;
    float: left;
    margin:0 6px;
    border: 1px solid #cdcdcd;
}
.rcm_content_wrap img {
	width: 100%;
	height: 100%;
}
/* .rcm_content01{
    background: url(../../img/artbooks/book1.PNG) no-repeat center;
    width: 100px;
    height: 147px;
    border: 1px solid #cdcdcd;
    float: left;
    margin: 0 10px 0 10px;
}
.rcm_content02{
    background: url(../../img/artbooks/book2.PNG) no-repeat center;
    width: 100px;
    height: 147px;
    border: 1px solid #cdcdcd;
    float: left;
    margin:0 10px 0 0;
}
.rcm_content03{
    background: url(../../img/artbooks/book3.PNG) no-repeat center;
    width: 100px;
    height: 147px;
    border: 1px solid #cdcdcd;
    float: left;
    margin: 0 10px 0 0;
}
.rcm_content04{
    background: url(../../img/artbooks/book4.PNG) no-repeat center;
    width: 100px;
    height: 147px;
    border: 1px solid #cdcdcd;
    float: left;
    margin: 0 10px 0 0;
} */

.resources_title{
    padding-bottom: 10px;
    margin-top: 10px;
    height: 35px;
    border-bottom: 1px solid #cdcdcd;
    width: 450px;
}
.resources_title span{
    font-size: 16px;
    color: #707070;
    cursor: pointer;
    float: left;
    overflow: hidden;
}
.resources_btn{
    background: url(../../img/artbooks/more.png) no-repeat;
    width: 16px;
    height: 8px;
    margin: 11px 0 0 10px;
    float: left;
    overflow: hidden;
}
.resources_btn.more02_up{
    transform: rotate(180deg);
    margin: 9px 0 0 10px;
    transition: all 0.2s;
}

.resources_cont{
    display: none;
    margin-top: 10px;
    width: 450px;
    height: 100px;
    overflow-y:auto;
}
.resources_cont_more{
    font-size: 14px;
    color: #acacac;
}
.resources_cont_more a,
.resources_cont_more a:active,
.resources_cont_more a:hover,
.resources_cont_more a:visited {
	color: #b08ad2;
}