.wh100 {
    width: 100%;
    height: 100%;
}

.w100 {
    width: 100%;
}

.w70 {
    width: 70%;
    min-width: 70%;
    min-width: 70%;
}

.w60 {
    width: 60%;
    min-width: 60%;
    min-width: 60%;
}

.w50 {
    width: 50%;
    min-width: 50%;
    min-width: 50%;
}

.h100 {
    height: 100%;
}

.margin-lr-auto {
    margin-left: auto;
    margin-right: auto;
}

.lh-em {
    line-height: 1em;
}

.t-0 {
    top: 0;
}


/* 600px 》 0.75 */
@media (min-width:601px) {
    :root {
        --device: 0.7;
    }
}

/* 600px 》 0.65 */
@media (min-width:431px) and (max-width:600px) {
    :root {
        --device: 0.65;
    }
}

/* 430px 》 0.573 */
@media (min-width:391px) and (max-width:430px) {
    :root {
        --device: 0.573;
    }
}

/* 414px 》 0.552 */
@media (min-width:391px) and (max-width:414px) {
    :root {
        --device: 0.552;
    }
}

/* 390px 》 0.52 */
@media (min-width:376px) and (max-width:390px) {
    :root {
        --device: 0.52;
    }
}

/* 375px 》 0.5 */
@media (max-width:375px) {
    :root {
        --device: 0.5;
    }
}

/* 280px 》 0.373 */
@media (max-width:280px) {
    :root {
        --device: 0.373;
    }
}

.grid-gap-20px {
    grid-gap: calc(20px * var(--device)) calc(20px * var(--device));
}

.grid-gap-20px-0px {
    grid-gap: calc(20px * var(--device)) 0px;
}

.grid-gap-0px-20px {
    grid-gap: 0px calc(20px * var(--device));
}

.grid-gap-30px {
    grid-gap: calc(30px * var(--device)) calc(30px * var(--device));
}

.grid-gap-50px {
    grid-gap: calc(50px * var(--device)) calc(50px * var(--device));
}

.grid-gap-30px-50px {
    grid-gap: calc(30px * var(--device)) calc(50px * var(--device));
}

.grid-gap-20px-40px {
    grid-gap: calc(20px * var(--device)) calc(40px * var(--device));
}

.grid-gap-40px-20px {
    grid-gap: calc(40px * var(--device)) calc(20px * var(--device));
}

.wh-10px {
    width: calc(20px * var(--device));
    height: calc(20px * var(--device));
}

.wh-20px {
    width: calc(20px * var(--device));
    height: calc(20px * var(--device));
}

.wh-30px {
    width: calc(30px * var(--device));
    height: calc(30px * var(--device));
}

.wh-40px {
    width: calc(40px * var(--device));
    height: calc(40px * var(--device));
}

.wh-60px {
    width: calc(60px * var(--device));
    height: calc(60px * var(--device));
}

.wh-70px {
    width: calc(70px * var(--device));
    height: calc(70px * var(--device));
}

.wh-80px {
    width: calc(80px * var(--device));
    height: calc(80px * var(--device));
}

.wh-100px {
    width: calc(100px * var(--device));
    min-width: calc(100px * var(--device));
    height: calc(100px * var(--device));
}

.wh-200px {
    width: calc(200px * var(--device));
    min-width: calc(200px * var(--device));
    height: calc(200px * var(--device));
}

/*width*/
.w-20px {
    width: calc(20px * var(--device));
    min-width: calc(20px * var(--device));
    max-width: calc(20px * var(--device));
}

.w-30px {
    width: calc(30px * var(--device));
    min-width: calc(30px * var(--device));
    max-width: calc(30px * var(--device));
}

.w-40px {
    width: calc(40px * var(--device));
    min-width: calc(40px * var(--device));
    max-width: calc(40px * var(--device));
}

.w-50px {
    width: calc(50px * var(--device));
    min-width: calc(50px * var(--device));
    max-width: calc(50px * var(--device));
}

.w-100px {
    width: calc(100px * var(--device));
}

.w-114px {
    width: calc(114px * var(--device));
}

.w-160px {
    width: calc(160px * var(--device));
}

.w-200px {
    width: calc(200px * var(--device));
}

/*height*/
.h-2px {
    height: calc(2px * var(--device));
}

.h-4px {
    height: calc(4px * var(--device));
}

.h-8px {
    height: calc(8px * var(--device));
}

.h-12px {
    height: calc(12px * var(--device));
}

.h-20px {
    height: calc(40px * var(--device));
}

.h-40px {
    height: calc(40px * var(--device));
}

.h-44px {
    height: calc(44px * var(--device));
}

.h-50px {
    height: calc(50px * var(--device));
}

.h-60px {
    height: calc(60px * var(--device));
}

.h-68px {
    height: calc(68px * var(--device));
}

.h-72px {
    height: calc(72px * var(--device));
}

.h-108px {
    height: calc(108px * var(--device));
}

.h-120px {
    height: calc(120px * var(--device));
}

.h-136px {
    height: calc(136px * var(--device));
}

.h-160px {
    height: calc(160px * var(--device));
}

.h-240px {
    height: calc(240px * var(--device));
}

.h-400px {
    height: calc(400px * var(--device));
}

/*line-height*/
.lh-12px {
    line-height: calc(12px * var(--device));
}

.lh-24px {
    line-height: calc(24px * var(--device));
}

.lh-30px {
    line-height: calc(30px * var(--device));
}

.lh-40px {
    line-height: calc(40px * var(--device));
}

.lh-44px {
    line-height: calc(44px * var(--device));
}

.lh-50px {
    line-height: calc(50px * var(--device));
}

.lh-60px {
    line-height: calc(60px * var(--device));
}

.lh-68px {
    line-height: calc(68px * var(--device));
}

/*top*/
.t-20px {
    top: calc(20px * var(--device));
}

.t-32px {
    top: calc(32px * var(--device));
}

.t-44px {
    top: calc(44px * var(--device));
}

/*left*/
.l-f-10px {
    left: calc(-10px * var(--device))
}

/*right*/
.r-30px {
    right: calc(30px * var(--device));
}

.r-f-10px {
    right: calc(-10px * var(--device));
}

/*bottom*/
.b-45px {
    bottom: calc(45px * var(--device))
}

.b-120px {
    bottom: calc(120px * var(--device))
}

.b-150px {
    bottom: calc(150px * var(--device))
}

.b-f-10px {
    bottom: calc(-10px * var(--device))
}

/*padding*/
.padding-tb-5px {
    padding-top: calc(5px * var(--device));
    padding-bottom: calc(5px * var(--device));
}

.padding-all-10px {
    padding: calc(10px * var(--device));
}

.padding-l-10px {
    padding-left: calc(10px * var(--device));
}

.padding-r-10px {
    padding-right: calc(10px * var(--device));
}

.padding-lr-10px {
    padding-left: calc(10px * var(--device));
    padding-right: calc(10px * var(--device));
}

.padding-t-10px {
    padding-top: calc(10px * var(--device));
}

.padding-b-10px {
    padding-bottom: calc(10px * var(--device));
}

.padding-tb-10px {
    padding-top: calc(10px * var(--device));
    padding-bottom: calc(10px * var(--device));
}

.padding-all-20px {
    padding: calc(20px * var(--device));
}

.padding-l-20px {
    padding-left: calc(20px * var(--device));
}

.padding-r-20px {
    padding-right: calc(20px * var(--device));
}

.padding-t-20px {
    padding-top: calc(20px * var(--device));
}

.padding-b-20px {
    padding-bottom: calc(20px * var(--device));
}

.padding-lr-20px {
    padding-left: calc(20px * var(--device));
    padding-right: calc(20px * var(--device));
}

.padding-tb-20px {
    padding-top: calc(20px * var(--device));
    padding-bottom: calc(20px * var(--device));
}

.padding-all-30px {
    padding: calc(30px * var(--device));
}

.padding-lr-30px {
    padding-left: calc(30px * var(--device));
    padding-right: calc(30px * var(--device));
}

.padding-tb-30px {
    padding-top: calc(30px * var(--device));
    padding-bottom: calc(30px * var(--device));
}


/*margin*/
.margin-t-5px {
    margin-top: calc(5px * var(--device));
}

.margin-b-5px {
    margin-bottom: calc(5px * var(--device));
}

.margin-l-5px {
    margin-left: calc(5px * var(--device));
}

.margin-r-5px {
    margin-right: calc(5px * var(--device));
}

.margin-l-10px {
    margin-left: calc(10px * var(--device));
}

.margin-t-10px {
    margin-top: calc(10px * var(--device));
}

.margin-r-10px {
    margin-right: calc(10px * var(--device));
}

.margin-lr-10px {
    margin-left: calc(10px * var(--device));
    margin-right: calc(10px * var(--device));
}

.margin-tb-10px {
    margin-top: calc(10px * var(--device));
    margin-bottom: calc(10px * var(--device));
}

.margin-all-10px {
    margin: calc(10px * var(--device));
}

.margin-t-15px {
    margin-top: calc(15px * var(--device));
}

.margin-t-20px {
    margin-top: calc(20px * var(--device));
}

.margin-b-20px {
    margin-bottom: calc(20px * var(--device));
}

.margin-l-20px {
    margin-left: calc(20px * var(--device));
}

.margin-r-20px {
    margin-right: calc(20px * var(--device));
}

.margin-lr-20px {
    margin-left: calc(20px * var(--device));
    margin-right: calc(20px * var(--device));
}

.margin-lr-30px {
    margin-left: calc(30px * var(--device));
    margin-right: calc(30px * var(--device));
}

/*font-size*/
.fs-20px {
    font-size: calc(20px * var(--device));
}

.fs-22px {
    font-size: calc(22px * var(--device));
}

.fs-24px {
    font-size: calc(24px * var(--device));
}

.fs-26px {
    font-size: calc(26px * var(--device));
}

.fs-28px {
    font-size: calc(28px * var(--device));
}

.fs-30px {
    font-size: calc(30px * var(--device));
}

.fs-32px {
    font-size: calc(32px * var(--device));
}

.fs-34px {
    font-size: calc(34px * var(--device));
}

.fs-48px {
    font-size: calc(48px * var(--device));
}

.fs-55px {
    font-size: calc(55px * var(--device));
}

.fs-64px {
    font-size: calc(64px * var(--device));
}

.fs-70px {
    font-size: calc(70px * var(--device));
}

.fs-80px {
    font-size: calc(80px * var(--device));
}

.fs-90px {
    font-size: calc(90px * var(--device));
}

/*border-radius*/
.br-5px {
    border-radius: calc(5px * var(--device));
}

.br-12-10px {
    border-radius: calc(10px * var(--device)) calc(10px * var(--device)) 0 0;
}

.br-34-10px {
    border-radius: 0 0 calc(10px * var(--device)) calc(10px * var(--device));
}

.br-24-10px {
    border-radius: 0 calc(10px * var(--device)) 0 calc(10px * var(--device));
}

.br-10px {
    border-radius: calc(10px * var(--device));
}

.br-12px {
    border-radius: calc(12px * var(--device));
}

.br-20px {
    border-radius: calc(20px * var(--device));
}

.br-22px {
    border-radius: calc(22px * var(--device));
}

.br-30px {
    border-radius: calc(30px * var(--device));
}

.br-bl-30px {
    border-radius: 0 0 calc(30px * var(--device)) calc(30px * var(--device));
}

.br-tr-30px {
    border-radius: calc(30px * var(--device)) calc(30px * var(--device)) 0 0;
}

.br-40px {
    border-radius: calc(40px * var(--device));
}

.br-50px {
    border-radius: calc(50px * var(--device));
}

.br-64px {
    border-radius: calc(64px * var(--device));
}

.br-68px {
    border-radius: calc(68px * var(--device));
}

/*border*/
.border-0px {
    border-width: 0px;
}