/*block*/
.dpbk {
    display: block;
}

.psa {
    position: absolute;
}

.psr {
    position: relative;
}

/*flex布局*/
.flex {
    display: flex
}

.flex-30 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 0 0 30%;
}

.flex-40 {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 0 0 40%;
}

.flex-40 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 0 0 50%;
}

.flex-60 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 0 0 60%;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-shu {
    display: flex;
    flex-direction: column;
}

.flex-shu-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-shu-center-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

.flex-heng {
    display: flex;
    flex-direction: row;
}

.flex-heng-center {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-heng-center-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-grow-1 {
    flex-grow: 1;
}

/*grid布局*/
.grid {
    display: grid;
}

.grid-1 {
    display: grid;
    grid-template-columns: repeat(1,1fr);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.grid-2-auto {
    display: grid;
    grid-template-columns: calc(25% - 15px) auto;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.grid-7 {
    display: grid;
    grid-template-columns: repeat(7,1fr);
}

.grid-gap-10px {
    grid-gap: 10px 10px;
}


.grid-gap-20px {
    grid-gap: 20px 20px;
}

.grid-gap-30px {
    grid-gap: 30px 30px;
}

.grid-gap-50px {
    grid-gap: 50px 50px;
}

.grid-gap-30px-50px {
    grid-gap: 30px 50px;
}

.grid-gap-20px-40px {
    grid-gap: 20px 40px;
}

.grid-gap-40px-20px {
    grid-gap: 40px 20px;
}


/*table布局*/
.dptb {
    display: table;
    table-layout: fixed;
}

.dptc {
    display: table-cell;
}

/*sticky*/
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

.sticky-left {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--yellow-light);
}