:root {
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-scale: 1.0;
  --font-heading-scale: 1.0;
  --color-primary: #000;
  --color-white: #ffffff;
  --color-background: #f7f7f7;
  --color-button-text:#fff;
  --color-dark-1:#333;
  --color-dark-2:#666;
  --color-dark-3:#999;
  --color-warn:#d60000;
  --duration-short: .1s;
    --duration-default: .2s;
    --duration-long: .5s;
    
}



html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  box-sizing: border-box;
  font-size: calc(var(--font-body-scale) * 62.5%);
  /* font-size: 20px; */
  height: 100%;
}
*:focus {
  outline: 0;
  box-shadow: none;
}
*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground),.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0.5rem 0.4rem rgba(var(--color-foreground),.3);
}

body {
  margin: 0 auto;

}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-style: var(--font-heading-style);
  /* font-weight: var(--font-heading-weight); */
  letter-spacing: calc(var(--font-heading-scale) * .06rem);
  line-height: calc(1 + .3/max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {

  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {

  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {

  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {

  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

a {
  background-color: transparent;
  color: var(--color-primary);
  text-decoration: none;
}


abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}


b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
  max-width: 100%;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 1.4rem;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
  border: none;
}

input:focus,
textarea:focus {
  outline: none;
}

button,
input {
  /* 1 */
  overflow: visible;
}

button,
select {
  /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}


progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

[type="checkbox"], [type="radio"]{
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 0.2rem;
  color: #fff;
  text-align: center;
  line-height: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
}

[type="checkbox"]:checked,[type="radio"]:checked {
  color: #fff;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
/* ✔ */
[type="checkbox"]:after,[type="radio"]:after {
  content: "✔" ;
}
[type="radio"]{
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.d-flex {
  display: flex;

}
.hidden{
  display: none!important;
}
.flex-1 {
  flex: 1;
}

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

.align-center {
  align-items: center !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-end {
  align-items: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-space-between {
  justify-content: space-between !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

/* padding  margin */
.pa-0 {
  padding: 0;
}

.pa-1 {
  padding: 0.4rem;
}

.pa-2 {
  padding: 0.8rem;
}

.pa-3 {
  padding: 1.2rem;
}

.pa-4 {
  padding: 1.6rem;
}

.pa-5 {
  padding: 2.0rem;
}

.pa-6 {
  padding: 2.4rem;
}

.pa-7 {
  padding: 2.8rem;
}

.pa-8 {
  padding: 3.2rem;
}

.pa-9 {
  padding: 3.6rem;
}

.pa-10 {
  padding: 4.0rem;
}

.pa-11 {
  padding: 4.4rem;
}

.pa-12 {
  padding: 4.8rem;
}

.pa-13 {
  padding: 5.2rem;
}

.pa-14 {
  padding: 5.6rem;
}

.pa-15 {
  padding: 6.0rem;
}

.pa-16 {
  padding: 6.4rem;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.4rem;
  padding-left: 0.4rem;
}

.px-2 {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

.px-3 {
  padding-right: 1.2rem;
  padding-left: 1.2rem;
}

.px-4 {
  padding-right: 1.6rem !important;
  padding-left: 1.6rem !important;
}

.px-5 {
  padding-right: 2.0rem!important;
  padding-left: 2.0rem!important;
}

.px-6 {
  padding-right: 2.4rem;
  padding-left: 2.4rem;
}

.px-7 {
  padding-right: 2.8rem;
  padding-left: 2.8rem;
}

.px-8 {
  padding-right: 3.2rem;
  padding-left: 3.2rem;
}

.px-9 {
  padding-right: 3.6rem;
  padding-left: 3.6rem;
}

.px-10 {
  padding-right: 4.0rem;
  padding-left: 4.0rem;
}

.px-11 {
  padding-right: 4.4rem;
  padding-left: 4.4rem;
}

.px-12 {
  padding-right: 4.8rem;
  padding-left: 4.8rem;
}

.px-13 {
  padding-right: 5.2rem;
  padding-left: 5.2rem;
}

.px-14 {
  padding-right: 5.6rem;
  padding-left: 5.6rem;
}

.px-15 {
  padding-right: 6rem;
  padding-left: 6rem;
}

.px-16 {
  padding-right: 6.4rem;
  padding-left: 6.4rem;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.py-2 {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

.py-3 {
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important;
}

.py-4 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.py-5 {
  padding-top: 2.0rem;
  padding-bottom: 2.0rem;
}

.py-6 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.py-7 {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
}

.py-8 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.py-9 {
  padding-top: 3.6rem;
  padding-bottom: 3.6rem;
}

.py-10 {
  padding-top: 4.0rem;
  padding-bottom: 4.0rem;
}

.py-11 {
  padding-top: 4.4rem;
  padding-bottom: 4.4rem;
}

.py-12 {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

.py-13 {
  padding-top: 5.2rem;
  padding-bottom: 5.2rem;
}

.py-14 {
  padding-top: 5.6rem;
  padding-bottom: 5.6rem;
}

.py-15 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-16 {
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.4rem;
}

.pt-2 {
  padding-top: 0.8rem;
}

.pt-3 {
  padding-top: 1.2rem;
}

.pt-4 {
  padding-top: 1.6rem;
}

.pt-5 {
  padding-top: 2.0rem;
}

.pt-6 {
  padding-top: 2.4rem;
}

.pt-7 {
  padding-top: 2.8rem;
}

.pt-8 {
  padding-top: 3.2rem;
}

.pt-9 {
  padding-top: 3.6rem;
}

.pt-10 {
  padding-top: 4.0rem;
}

.pt-11 {
  padding-top: 4.4rem;
}

.pt-12 {
  padding-top: 4.8rem;
}

.pt-13 {
  padding-top: 5.2rem;
}

.pt-14 {
  padding-top: 5.6rem;
}

.pt-15 {
  padding-top: 6rem;
}

.pt-16 {
  padding-top: 6.4rem;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 0.4rem;
}

.pr-2 {
  padding-right: 0.8rem;
}

.pr-3 {
  padding-right: 1.2rem;
}

.pr-4 {
  padding-right: 1.6rem;
}

.pr-5 {
  padding-right: 2.0rem;
}

.pr-6 {
  padding-right: 2.4rem;
}

.pr-7 {
  padding-right: 2.8rem;
}

.pr-8 {
  padding-right: 3.2rem;
}

.pr-9 {
  padding-right: 3.6rem;
}

.pr-10 {
  padding-right: 4.0rem;
}

.pr-11 {
  padding-right: 4.4rem;
}

.pr-12 {
  padding-right: 4.8rem;
}

.pr-13 {
  padding-right: 5.2rem;
}

.pr-14 {
  padding-right: 5.6rem;
}

.pr-15 {
  padding-right: 6rem;
}

.pr-16 {
  padding-right: 6.4rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.4rem;
}

.pb-2 {
  padding-bottom: 0.8rem;
}

.pb-3 {
  padding-bottom: 1.2rem;
}

.pb-4 {
  padding-bottom: 1.6rem;
}

.pb-5 {
  padding-bottom: 2.0rem;
}

.pb-6 {
  padding-bottom: 2.4rem;
}

.pb-7 {
  padding-bottom: 2.8rem;
}

.pb-8 {
  padding-bottom: 3.2rem;
}

.pb-9 {
  padding-bottom: 3.6rem;
}

.pb-10 {
  padding-bottom: 4.0rem;
}

.pb-11 {
  padding-bottom: 4.4rem;
}

.pb-12 {
  padding-bottom: 4.8rem;
}

.pb-13 {
  padding-bottom: 5.2rem;
}

.pb-14 {
  padding-bottom: 5.6rem;
}

.pb-15 {
  padding-bottom: 6rem;
}

.pb-16 {
  padding-bottom: 6.4rem;
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: 0.4rem !important;
}

.pl-2 {
  padding-left: 0.8rem;
}

.pl-3 {
  padding-left: 1.2rem;
}

.pl-4 {
  padding-left: 1.6rem;
}

.pl-5 {
  padding-left: 2.0rem;
}

.pl-6 {
  padding-left: 2.4rem;
}

.pl-7 {
  padding-left: 2.8rem;
}

.pl-8 {
  padding-left: 3.2rem;
}

.pl-9 {
  padding-left: 3.6rem;
}

.pl-10 {
  padding-left: 4.0rem;
}

.pl-11 {
  padding-left: 4.4rem;
}

.pl-12 {
  padding-left: 4.8rem;
}

.pl-13 {
  padding-left: 5.2rem;
}

.pl-14 {
  padding-left: 5.6rem;
}

.pl-15 {
  padding-left: 6rem;
}

.pl-16 {
  padding-left: 6.4rem;
}

.ma-0 {
  margin: 0;
}

.ma-1 {
  margin: 0.4rem;
}

.ma-2 {
  margin: 0.8rem;
}

.ma-3 {
  margin: 1.2rem;
}

.ma-4 {
  margin: 1.6rem;
}

.ma-5 {
  margin: 2.0rem;
}

.ma-6 {
  margin: 2.4rem;
}

.ma-7 {
  margin: 2.8rem;
}

.ma-8 {
  margin: 3.2rem;
}

.ma-9 {
  margin: 3.6rem;
}

.ma-10 {
  margin: 4.0rem;
}

.ma-11 {
  margin: 4.4rem;
}

.ma-12 {
  margin: 4.8rem;
}

.ma-13 {
  margin: 5.2rem;
}

.ma-14 {
  margin: 5.6rem;
}

.ma-15 {
  margin: 6.0rem;
}

.ma-16 {
  margin: 6.4rem;
}

.ma-auto {
  margin: auto;
}

.mx-0 {
  margin-right: 0;
  margin-left: 0;
}

.mx-1 {
  margin-right: 0.4rem;
  margin-left: 0.4rem;
}

.mx-2 {
  margin-right: 0.8rem;
  margin-left: 0.8rem;
}

.mx-3 {
  margin-right: 1.2rem;
  margin-left: 1.2rem;
}

.mx-4 {
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}

.mx-5 {
  margin-right: 2.0rem;
  margin-left: 2.0rem;
}

.mx-6 {
  margin-right: 2.4rem;
  margin-left: 2.4rem;
}

.mx-7 {
  margin-right: 2.8rem;
  margin-left: 2.8rem;
}

.mx-8 {
  margin-right: 3.2rem;
  margin-left: 3.2rem;
}

.mx-9 {
  margin-right: 3.6rem;
  margin-left: 3.6rem;
}

.mx-10 {
  margin-right: 4.0rem;
  margin-left: 4.0rem;
}

.mx-11 {
  margin-right: 4.4rem;
  margin-left: 4.4rem;
}

.mx-12 {
  margin-right: 4.8rem;
  margin-left: 4.8rem;
}

.mx-13 {
  margin-right: 5.2rem;
  margin-left: 5.2rem;
}

.mx-14 {
  margin-right: 5.6rem;
  margin-left: 5.6rem;
}

.mx-15 {
  margin-right: 6rem;
  margin-left: 6rem;
}

.mx-16 {
  margin-right: 6.4rem;
  margin-left: 6.4rem;
}

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

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
}

.my-2 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;
}

.my-3 {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.my-4 {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

.my-5 {
  margin-top: 2.0rem;
  margin-bottom: 2.0rem;
}

.my-6 {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

.my-7 {
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
}

.my-8 {
  margin-top: 3.2rem;
  margin-bottom: 3.2rem;
}

.my-9 {
  margin-top: 3.6rem;
  margin-bottom: 3.6rem;
}

.my-10 {
  margin-top: 4.0rem;
  margin-bottom: 4rem;
}

.my-11 {
  margin-top: 4.4rem;
  margin-bottom: 4.4rem;
}

.my-12 {
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
}

.my-13 {
  margin-top: 5.2rem;
  margin-bottom: 5.2rem;
}

.my-14 {
  margin-top: 5.6rem;
  margin-bottom: 5.6rem;
}

.my-15 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.my-16 {
  margin-top: 6.4rem;
  margin-bottom: 6.4rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.4rem;
}

.mt-2 {
  margin-top: 0.8rem;
}

.mt-3 {
  margin-top: 1.2rem;
}

.mt-4 {
  margin-top: 1.6rem;
}

.mt-5 {
  margin-top: 2.0rem;
}

.mt-6 {
  margin-top: 2.4rem;
}

.mt-7 {
  margin-top: 2.8rem;
}

.mt-8 {
  margin-top: 3.2rem;
}

.mt-9 {
  margin-top: 3.6rem;
}

.mt-10 {
  margin-top: 4rem;
}

.mt-11 {
  margin-top: 4.4rem;
}

.mt-12 {
  margin-top: 4.8rem;
}

.mt-13 {
  margin-top: 5.2rem;
}

.mt-14 {
  margin-top: 5.6rem;
}

.mt-15 {
  margin-top: 6rem;
}

.mt-16 {
  margin-top: 6.4rem;
}

.mt-auto {
  margin-top: auto;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.4rem;
}

.mr-2 {
  margin-right: 0.8rem;
}

.mr-3 {
  margin-right: 1.2rem;
}

.mr-4 {
  margin-right: 1.6rem;
}

.mr-5 {
  margin-right: 2.0rem;
}

.mr-6 {
  margin-right: 2.4rem;
}

.mr-7 {
  margin-right: 2.8rem;
}

.mr-8 {
  margin-right: 3.2rem;
}

.mr-9 {
  margin-right: 3.6rem;
}

.mr-10 {
  margin-right: 4rem;
}

.mr-11 {
  margin-right: 4.4rem;
}

.mr-12 {
  margin-right: 4.8rem;
}

.mr-13 {
  margin-right: 5.2rem;
}

.mr-14 {
  margin-right: 5.6rem;
}

.mr-15 {
  margin-right: 6rem;
}

.mr-16 {
  margin-right: 6.4rem
}

.mr-auto {
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.4rem;
}

.mb-2 {
  margin-bottom: 0.8rem;
}

.mb-3 {
  margin-bottom: 1.2rem;
}

.mb-4 {
  margin-bottom: 1.6rem;
}

.mb-5 {
  margin-bottom: 2.0rem;
}

.mb-6 {
  margin-bottom: 2.4rem;
}

.mb-7 {
  margin-bottom: 2.8rem;
}

.mb-8 {
  margin-bottom: 3.2rem;
}

.mb-9 {
  margin-bottom: 3.6rem;
}

.mb-10 {
  margin-bottom: 4rem;
}

.mb-11 {
  margin-bottom: 4.4rem;
}

.mb-12 {
  margin-bottom: 4.8rem;
}

.mb-13 {
  margin-bottom: 5.2rem;
}

.mb-14 {
  margin-bottom: 5.6rem;
}

.mb-15 {
  margin-bottom: 6rem;
}

.mb-16 {
  margin-bottom: 6.4rem;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 0.4rem;
}

.ml-2 {
  margin-left: 0.8rem;
}

.ml-3 {
  margin-left: 1.2rem;
}

.ml-4 {
  margin-left: 1.6rem;
}

.ml-5 {
  margin-left: 2.0rem;
}

.ml-6 {
  margin-left: 2.4rem;
}

.ml-7 {
  margin-left: 2.8rem;
}

.ml-8 {
  margin-left: 3.2rem;
}

.ml-9 {
  margin-left: 3.6rem;
}

.ml-10 {
  margin-left: 4rem;
}

.ml-11 {
  margin-left: 4.4rem;
}

.ml-12 {
  margin-left: 4.8rem;
}

.ml-13 {
  margin-left: 5.2rem;
}

.ml-14 {
  margin-left: 5.6rem;
}

.ml-15 {
  margin-left: 6rem;
}

.ml-16 {
  margin-left: 6.4rem;
}

.ml-auto {
  margin-left: auto;
}

/* border radius */
.rounded-0 {
  border-radius: 0;
}

.rounded-8 {
  border-radius: 0.8rem;
}

.rounded-lt-8 {
  border-top-left-radius: 0.8rem;
}

.rounded-rt-8 {
  border-top-right-radius: 0.8rem;
}

.rounded-lb-8 {
  border-bottom-left-radius: 0.8rem;
}

.rounded-rb-8 {
  border-bottom-right-radius: 1.2rem;
}
.rounded-12 {
  border-radius: 1.2rem;
}

.rounded-lt-12 {
  border-top-left-radius: 1.2rem;
}

.rounded-rt-12 {
  border-top-right-radius: 1.2rem;
}

.rounded-lb-12 {
  border-bottom-left-radius: 1.2rem;
}

.rounded-rb-12 {
  border-bottom-right-radius: 1.2rem;
}

.rounded-24 {
  border-radius: 2.4rem;
}

.rounded-lt-24 {
  border-top-left-radius: 2.4rem;
}

.rounded-rt-24 {
  border-top-right-radius: 2.4rem;
}

.rounded-lb-24 {
  border-bottom-left-radius: 2.4rem;
}

.rounded-rb-24 {
  border-bottom-right-radius: 2.4rem;
}

.rounded-36 {
  border-radius: 3.6rem;
}

.rounded-lt-36 {
  border-top-left-radius: 3.6rem;
}

.rounded-rt-36 {
  border-top-right-radius: 3.6rem;
}

.rounded-lb-36 {
  border-bottom-left-radius: 3.6rem;
}

.rounded-rb-36 {
  border-bottom-right-radius: 3.6rem;
}

/* fontsize */
.font-12 {
  font-size: 1.2rem!important;
}

.font-13 {
  font-size: 1.3rem;
}

.font-14 {
  font-size: 1.4rem;
}

.font-15 {
  font-size: 1.5rem;
}

.font-16 {
  font-size: 1.6rem;
}

.font-18 {
  font-size: 1.8rem;
}

.font-20 {
  font-size: 2.0rem;
}

.font-22 {
  font-size: 2.2rem;
}

.font-24 {
  font-size: 2.4rem;
}

.font-weight-bold {
  font-weight: bold;
}

.font-weight-normal {
  font-weight: normal;
}

.font-weight-500 {
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.white-space-nowrap {
  white-space: nowrap;
}

/* color */
.color-base-background {
  background-color: var(--color-background)!important;
}

.color-primary-background {
  background-color: var(--color-primary);
}
.color-white-background{
  background-color: #fff!important;
}
.color-font-dark{
  color: var(--color-primary);
}
.color-font-dark-1{
  color: var(--color-dark-1)!important;
}
.color-font-dark-2{
  color: var(--color-dark-2);
}
.color-font-dark-3{
  color: var(--color-dark-3);
}
.color-font-warn{
  color: var(--color-warn);
}
/*  */
.button{
  display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    padding: 0 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-button-text);
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-primary);
    min-height: 4rem;
    white-space: nowrap;
}
.button-sm{
  min-height: 3.2rem;
}
.button-background-0{
  background-color: transparent;
}
.button-background-1{
  background-color:#333;
}
.button-background-2{
  background-color:#F2F2F2;
}
.topbar-wrapper{
  position: fixed;
  height: 4.4rem;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1;
  display: flex;
  align-items: center;
}

@media screen and (min-width: 751px) {
  body{
    border: solid 1px #efefef;
  }
  .topbar-wrapper{
    left: auto;
    right: auto;
    width: 600px;
  }
}
.main-wrapper{
  padding-top: 4.5rem;
  padding-bottom: 6rem;
  position: relative;
}
.divider{
  height: 1px;
  background-color: #F2F2F2!important;
  margin: 1rem 0;
  width: 100%;
}
ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 5px;
}

ul.pagination li a.active {
  background-color: var(--color-dark-1);
  color: white;
  border-radius: 5px;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}