/*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-2{display: grid;grid-template-columns: repeat(2,1fr);}
.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-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);}