html, body {
    /*可以锁定页面避免出现滑动的现象*/
    height: 100%;
    overflow: hidden;
}

#app {
    /*border: 1px solid red;*/
    box-sizing: border-box;
    overflow: hidden;
}

.all_forSubcontent_box {
    position: absolute;
    top: 0;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.header_maintop_box {
    position: absolute;
    z-index: 1010;
    width: 100%;
    height: auto;
    top: 0px;
    box-sizing: border-box;
}

.header_statusbar_transparent {
    width: 100vw;
    height: 24px;
    background: none;
}

.header_statusbar_yellow {
    width: 100vw;
    height: 24px;
    background-color: #ffec45;
}

.header_statusbar_red {
    width: 100vw;
    height: 24px;
    background-color: #ff4249;
}

.header_statusbar_white {
    width: 100vw;
    height: 24px;
    background-color: #fff;
}

/*设置带有头部的 所有的滚动容器的 padding高为70px*/
.add_all_subart_box {
    box-sizing: border-box;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 70px;
}

/*没有头部直接是内容*/
.add_add_subart_no_head_box {
    box-sizing: border-box;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 24px;
}

/*复选框*/

/*复选框的样式-开始*/

.toggle {
    display: flex !important;
    position: relative;
    pointer-events: auto;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #333333;
}

.toggle input {
    display: none;
}

.toggle input:checked + .track {
    border-color: rgb(51, 51, 51);
    background-color: rgb(51, 51, 51);
    position: relative;
}

.toggle input:checked + .track:before {
    content: "\F0C1";
    color: #ffffff;
    position: absolute;
    top: 2px;
    left: 1px;
    display: inline-block;
}

.toggle .track {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: background-color, border;
    transition-property: background-color, border;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: solid 1px #e6e6e6;
    background-color: #fff;
    content: '';
    cursor: pointer;
    pointer-events: none;
    border-radius: 50%;
}

/*复选框的样式-结束*/

/*艺术品的商品列表--开始*/
/*.ysp-list-theme1 {*/
/*    padding: 0 10px;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*    display: block;*/

/*    -moz-column-count: 2; !* Firefox *!*/
/*    -webkit-column-count: 2; !* Safari and Chrome *!*/
/*    column-count: 2;*/

/*    -webkit-column-gap: 1rem;*/
/*    -moz-column-gap: 1rem;*/
/*    column-gap: 1rem;*/
/*    orphans: 1;*/
/*    widows: 1;*/
/*}*/

.ysp-list-theme1{
    /*控制间距*/
    /*这个由Markcheng2020-04-27注释*/
    padding-right: 4vw;
    padding-left: 4vw;
    display: block;
    position: relative;

    overflow: hidden;
}
.wall-column {
    display: block;
    position: relative;
    width: 50%;
    padding: 0 1.5vw;
    float: left;
    /*margin: 0 0 0 6vw;*/
    box-sizing: border-box;
}


.ysp-list-theme1 .ysp-list-item {

    text-decoration: none;
    height: auto;
    display: block;
    width: 100%;
    /*padding-bottom: 1rem;*/
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.ysp-list-item .ysp-list-item-box {
    min-height: auto !important;
}
.ysp-list-item .ysp-list-img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transform: translateX(0px);
}
.ysp-list-img .purchase_infos {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    color: #333;
    background: #FBF9F7;
    left: 5px;
    bottom: 10px;
    font-size: 14px;
    border-radius: 3px;
}
.ysp-list-img img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.ysp-list-theme1 .ysp-list-item .ysp-list-title {
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: justify;
    padding: 8px 0px 0px 0px;
    /*min-height: 80px;*/
}
.ysp-list-title .more_art_name {
    color: #333333;
}
.ysp-list-title p {
    padding-bottom: 3px;
    margin: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ysp-list-title .name {
    color: #666666 !important;
    font-weight: 700;
    font-size: 14px;
}
.ysp-list-title .price {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
}
.ysp-list-title .price i {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
}
.ysp-list-title .depiction, .paintingType {
    font-size: 12px;
    color: #999999;
    font-size: 0.875rem;
    font-weight: 500;
}
/*艺术品的商品列表--结束*/


/*重写的样式 定义图片大小不变形*/
.van-card__thumb{
    display: flex;
    justify-content: center;
}
.van-card__thumb img {
    border: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto!important;
}




/**关注的颜色更改*/
.cancel_active{
    background-color:#666666!important;
    border: 1px solid #666666!important;
}

/*共同的底部加载更多的样式*/
.js-load-more{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*background: red;*/
    z-index: 1;
    min-height: 40px;
}
.dropload-down{
    width: 100%;
    box-sizing: border-box;
}
.ysp-list-item{
    background: #ffffff;
    border-radius: 5px;
    /*padding: 5px;*/
}
.loading {
    background-image: url('../../i/images/loading.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.more .loading {
    -webkit-transform: rotate(0deg) translateZ(0);
    -webkit-transition-duration: 0s;
    -webkit-animation-name: loading;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes loading {
    from {
        -webkit-transform: rotate(0deg) translateZ(0);
    }
    to {
        -webkit-transform: rotate(360deg) translateZ(0);
    }
}
.unclick_js-load-more{
    pointer-events: none;
}