.wh100{width: 100%;height: 100%;}
.w100{width: 100%;}
.w90{width: 90%;min-width: 90%;min-width: 90%;}
.w80{width: 80%;min-width: 80%;min-width: 80%;}
.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%;}
.w40{width: 40%;min-width: 40%;min-width: 40%;}
.h100{height: 100%;}
.margin-lr-auto{margin-left: auto;margin-right: auto;}
.lh-em{line-height: 1;}

.grid-gap-5px{grid-gap: calc(5px * var(--device)) calc(5px * var(--device));}
.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-30px{grid-gap: calc(50px * 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-50px{width: calc(50px * var(--device));height: calc(50px * 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-150px{width: calc(150px * var(--device));min-width: calc(150px * var(--device));height: calc(150px * var(--device));}
.wh-200px{width: calc(200px * var(--device));min-width: calc(200px * var(--device));height: calc(200px * var(--device));}

/*width*/
.w-2px{width: calc(2px * var(--device));min-width: calc(2px * var(--device));max-width: calc(2px * var(--device));}
.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-80px{width: calc(80px * var(--device));}
.w-100px{width: calc(100px * var(--device));}
.w-114px{width: calc(114px * var(--device));}
.w-130px{width: calc(130px * var(--device));}
.w-140px{width: calc(140px * var(--device));}
.w-160px{width: calc(160px * var(--device));}
.w-200px{width: calc(200px * var(--device));}
.w-240px{width: calc(240px * var(--device));}
.w-300px{width: calc(300px * var(--device));}
.w-400px{width: calc(400px * var(--device));}

/*height*/
.h-2px{height: calc(2px * var(--device));}
.h-4px{height: calc(4px * var(--device));}
.h-5px{height: calc(5px * var(--device));}
.h-8px{height: calc(8px * var(--device));}
.h-12px{height: calc(12px * var(--device));}
.h-20px{height: calc(40px * var(--device));}
.h-30px{height: calc(30px * 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-80px{height: calc(80px * var(--device));}
.h-90px{min-height: calc(90px * var(--device));height: calc(90px * var(--device));}
.h-100px{height: calc(100px * var(--device));}
.h-108px{height: calc(108px * var(--device));}
.h-120px{height: calc(120px * var(--device));}
.h-136px{height: calc(136px * var(--device));}
.h-150px{min-height: calc(150px * var(--device));height: calc(150px * var(--device));}
.h-160px{height: calc(160px * var(--device));}
.h-180px{height: calc(180px * var(--device));}
.h-240px{height: calc(240px * var(--device));}
.h-400px{height: calc(400px * var(--device));}
.h-750px{height: calc(750px * 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-32px{line-height: calc(32px * var(--device));}
.lh-36px{line-height: calc(36px * 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));}
.lh-70px{line-height: calc(70px * var(--device));}
.lh-80px{line-height: calc(80px * var(--device));}

/*top*/
.t-0{top: 0;}
.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))}
.l-f-15px{left: calc(-15px * var(--device))}
.l-20px{left: calc(20px * var(--device));}

/*right*/
.r-30px{right: calc(30px * var(--device));}
.r-f-10px{right: calc(-10px * var(--device));}
.r-f-15px{right: calc(-15px * 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-t-5px{padding-top: calc(5px * var(--device));}
.padding-b-5px{padding-bottom: calc(5px * var(--device));}
.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-15px{padding: calc(15px * var(--device));}
.padding-lr-15px{padding-left: calc(15px * var(--device));padding-right: calc(15px * var(--device));}
.padding-l-15px{padding-left: calc(15px * var(--device));}
.padding-r-15px{padding-right: calc(15px * var(--device));}
.padding-tb-15px{padding-top: calc(15px * var(--device));padding-bottom: calc(15px * var(--device));}
.padding-t-15px{padding-top: calc(15px * var(--device));}
.padding-b-15px{padding-bottom: calc(15px * 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-tb-25px{padding-top: calc(25px * var(--device));padding-bottom: calc(25px * 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-r-30px{padding-right: calc(30px * var(--device));}
.padding-l-30px{padding-left: calc(30px * var(--device));}
.padding-t-30px{padding-top: calc(30px * var(--device));}
.padding-b-30px{padding-bottom: calc(30px * var(--device));}
.padding-tb-30px{padding-top: calc(30px * var(--device));padding-bottom: calc(30px * var(--device));}
.padding-b-50px{padding-bottom: calc(50px * var(--device));}
.padding-b-60px{padding-bottom: calc(60px * 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-r-15px{margin-right: 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-all-20px{margin: calc(20px * var(--device));}
.margin-lr-30px{margin-left: calc(30px * var(--device));margin-right: calc(30px * var(--device));}
.margin-l-30px{margin-left: calc(30px * var(--device));}
.margin-r-30px{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-36px{font-size: calc(36px * var(--device));}
.fs-40px{font-size: calc(40px * 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-12-20px{border-radius: calc(20px * var(--device)) calc(20px * var(--device)) 0 0;}
.br-34--20px{border-radius: 0 0 calc(20px * var(--device)) calc(20px * 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-12-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-60px{border-radius: calc(60px * var(--device));}
.br-64px{border-radius: calc(64px * var(--device));}
.br-68px{border-radius: calc(68px * var(--device));}
.br-80px{border-radius: calc(80px * var(--device));}

/*border*/
.border-0px{border-width: 0px;}
.border-top-1px-ddd{border-top:calc(2px * var(--device)) solid #ddd;}
.border-bottom-1px-ddd{border-bottom:calc(2px * var(--device)) solid #ddd;}
.border-bottom-1px-eee{border-bottom:calc(2px * var(--device)) solid #eee;}
.border-1px-ddd{border:calc(2px * var(--device)) solid #ddd;}
.border-1px{border-width: 1px;border-style: solid;}
.border-top-1px{border-top-width:1px;border-top-style: solid;}
.border-bottom-1px{border-bottom-width:1px;border-bottom-style: solid;}