/* tablet md */

@media (min-width: 600px) {
  /* display */
  .md-d-block {
    display: block !important;
  }
  .md-d-flex {
    display: flex !important;
  }
  .md-d-grid {
    display: grid !important;
  }
  .md-d-inline {
    display: inline !important;
  }
  .md-d-inline-block {
    display: inline-block !important;
  }
  .md-d-none {
    display: none !important;
  }
  /* margin */
  .md-m-0 {
    margin: var(--sp-0) !important;
  }
  .md-mx-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .md-my-0 {
    margin-bottom: var(--sp-0) !important;
    margin-top: var(--sp-0) !important;
  }
  .md-mt-0 {
    margin-top: var(--sp-0) !important;
  }
  .md-mr-0 {
    margin-right: var(--sp-0) !important;
  }
  .md-mb-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .md-ml-0 {
    margin-left: var(--sp-0) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md-m-1 {
    margin: var(--sp-1) !important;
  }
  .md-mx-1 {
    margin-left: var(--sp-1) !important;
    margin-right: var(--sp-1) !important;
  }
  .md-my-1 {
    margin-bottom: var(--sp-1) !important;
    margin-top: var(--sp-1) !important;
  }
  .md-mt-1 {
    margin-top: var(--sp-1) !important;
  }
  .md-mr-1 {
    margin-right: var(--sp-1) !important;
  }
  .md-mb-1 {
    margin-bottom: var(--sp-1) !important;
  }
  .md-ml-1 {
    margin-left: var(--sp-1) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md-m-2 {
    margin: var(--sp-2) !important;
  }
  .md-mx-2 {
    margin-left: var(--sp-2) !important;
    margin-right: var(--sp-2) !important;
  }
  .md-my-2 {
    margin-bottom: var(--sp-2) !important;
    margin-top: var(--sp-2) !important;
  }
  .md-mt-2 {
    margin-top: var(--sp-2) !important;
  }
  .md-mr-2 {
    margin-right: var(--sp-2) !important;
  }
  .md-mb-2 {
    margin-bottom: var(--sp-2) !important;
  }
  .md-ml-2 {
    margin-left: var(--sp-2) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md-m-3 {
    margin: var(--sp-3) !important;
  }
  .md-mx-3 {
    margin-left: var(--sp-3) !important;
    margin-right: var(--sp-3) !important;
  }
  .md-my-3 {
    margin-bottom: var(--sp-3) !important;
    margin-top: var(--sp-3) !important;
  }
  .md-mt-3 {
    margin-top: var(--sp-3) !important;
  }
  .md-mr-3 {
    margin-right: var(--sp-3) !important;
  }
  .md-mb-3 {
    margin-bottom: var(--sp-3) !important;
  }
  .md-ml-3 {
    margin-left: var(--sp-3) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md-m-4 {
    margin: var(--sp-4) !important;
  }
  .md-mx-4 {
    margin-left: var(--sp-4) !important;
    margin-right: var(--sp-4) !important;
  }
  .md-my-4 {
    margin-bottom: var(--sp-4) !important;
    margin-top: var(--sp-4) !important;
  }
  .md-mt-4 {
    margin-top: var(--sp-4) !important;
  }
  .md-mr-4 {
    margin-right: var(--sp-4) !important;
  }
  .md-mb-4 {
    margin-bottom: var(--sp-4) !important;
  }
  .md-ml-4 {
    margin-left: var(--sp-4) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md-m-5 {
    margin: var(--sp-5) !important;
  }
  .md-mx-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .md-my-5 {
    margin-bottom: var(--sp-5) !important;
    margin-top: var(--sp-5) !important;
  }
  .md-mt-5 {
    margin-top: var(--sp-5) !important;
  }
  .md-mr-5 {
    margin-right: var(--sp-5) !important;
  }
  .md-mb-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .md-ml-5 {
    margin-left: var(--sp-5) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md-m-05 {
    margin: var(--sp-05) !important;
  }
  .md-mx-05 {
    margin-left: var(--sp-05) !important;
    margin-right: var(--sp-05) !important;
  }
  .md-my-05 {
    margin-bottom: var(--sp-05) !important;
    margin-top: var(--sp-05) !important;
  }
  .md-mt-05 {
    margin-top: var(--sp-05) !important;
  }
  .md-mr-05 {
    margin-right: var(--sp-05) !important;
  }
  .md-mb-05 {
    margin-bottom: var(--sp-05) !important;
  }
  .md-ml-05 {
    margin-left: var(--sp-05) !important;
  }
  .md-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* padding */
  .md-p-0 {
    padding: var(--sp-0) !important;
  }
  .md-px-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .md-py-0 {
    padding-bottom: var(--sp-0) !important;
    padding-top: var(--sp-0) !important;
  }
  .md-pt-0 {
    padding-top: var(--sp-0) !important;
  }
  .md-pr-0 {
    padding-right: var(--sp-0) !important;
  }
  .md-pb-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .md-pl-0 {
    padding-left: var(--sp-0) !important;
  }
  .md-p-1 {
    padding: var(--sp-1) !important;
  }
  .md-px-1 {
    padding-left: var(--sp-1) !important;
    padding-right: var(--sp-1) !important;
  }
  .md-py-1 {
    padding-bottom: var(--sp-1) !important;
    padding-top: var(--sp-1) !important;
  }
  .md-pt-1 {
    padding-top: var(--sp-1) !important;
  }
  .md-pr-1 {
    padding-right: var(--sp-1) !important;
  }
  .md-pb-1 {
    padding-bottom: var(--sp-1) !important;
  }
  .md-pl-1 {
    padding-left: var(--sp-1) !important;
  }
  .md-p-2 {
    padding: var(--sp-2) !important;
  }
  .md-px-2 {
    padding-left: var(--sp-2) !important;
    padding-right: var(--sp-2) !important;
  }
  .md-py-2 {
    padding-bottom: var(--sp-2) !important;
    padding-top: var(--sp-2) !important;
  }
  .md-pt-2 {
    padding-top: var(--sp-2) !important;
  }
  .md-pr-2 {
    padding-right: var(--sp-2) !important;
  }
  .md-pb-2 {
    padding-bottom: var(--sp-2) !important;
  }
  .md-pl-2 {
    padding-left: var(--sp-2) !important;
  }
  .md-p-3 {
    padding: var(--sp-3) !important;
  }
  .md-px-3 {
    padding-left: var(--sp-3) !important;
    padding-right: var(--sp-3) !important;
  }
  .md-py-3 {
    padding-bottom: var(--sp-3) !important;
    padding-top: var(--sp-3) !important;
  }
  .md-pt-3 {
    padding-top: var(--sp-3) !important;
  }
  .md-pr-3 {
    padding-right: var(--sp-3) !important;
  }
  .md-pb-3 {
    padding-bottom: var(--sp-3) !important;
  }
  .md-pl-3 {
    padding-left: var(--sp-3) !important;
  }
  .md-p-4 {
    padding: var(--sp-4) !important;
  }
  .md-px-4 {
    padding-left: var(--sp-4) !important;
    padding-right: var(--sp-4) !important;
  }
  .md-py-4 {
    padding-bottom: var(--sp-4) !important;
    padding-top: var(--sp-4) !important;
  }
  .md-pt-4 {
    padding-top: var(--sp-4) !important;
  }
  .md-pr-4 {
    padding-right: var(--sp-4) !important;
  }
  .md-pb-4 {
    padding-bottom: var(--sp-4) !important;
  }
  .md-pl-4 {
    padding-left: var(--sp-4) !important;
  }
  .md-p-5 {
    padding: var(--sp-5) !important;
  }
  .md-px-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .md-py-5 {
    padding-bottom: var(--sp-5) !important;
    padding-top: var(--sp-5) !important;
  }
  .md-pt-5 {
    padding-top: var(--sp-5) !important;
  }
  .md-pr-5 {
    padding-right: var(--sp-5) !important;
  }
  .md-pb-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .md-pl-5 {
    padding-left: var(--sp-5) !important;
  }
  .md-p-05 {
    padding: var(--sp-05) !important;
  }
  .md-px-05 {
    padding-left: var(--sp-05) !important;
    padding-right: var(--sp-05) !important;
  }
  .md-py-05 {
    padding-bottom: var(--sp-05) !important;
    padding-top: var(--sp-05) !important;
  }
  .md-pt-05 {
    padding-top: var(--sp-05) !important;
  }
  .md-pr-05 {
    padding-right: var(--sp-05) !important;
  }
  .md-pb-05 {
    padding-bottom: var(--sp-05) !important;
  }
  .md-pl-05 {
    padding-left: var(--sp-05) !important;
  }

  /* position */
  .md-position-relative {
    position: relative !important;
  }
  .md-position-absolute {
    position: absolute !important;
  }
  .md-top-0 {
    top: var(--sp-0) !important;
  }
  .md-right-0 {
    right: var(--sp-0) !important;
  }
  .md-bottom-0 {
    bottom: var(--sp-0) !important;
  }
  .md-left-0 {
    left: var(--sp-0) !important;
  }
  .md-top-1 {
    top: var(--sp-1) !important;
  }
  .md-right-1 {
    right: var(--sp-1) !important;
  }
  .md-bottom-1 {
    bottom: var(--sp-1) !important;
  }
  .md-left-1 {
    left: var(--sp-1) !important;
  }
  .md-top-2 {
    top: var(--sp-2) !important;
  }
  .md-right-2 {
    right: var(--sp-2) !important;
  }
  .md-bottom-2 {
    bottom: var(--sp-2) !important;
  }
  .md-left-2 {
    left: var(--sp-2) !important;
  }
  .md-top-3 {
    top: var(--sp-3) !important;
  }
  .md-right-3 {
    right: var(--sp-3) !important;
  }
  .md-bottom-3 {
    bottom: var(--sp-3) !important;
  }
  .md-left-3 {
    left: var(--sp-3) !important;
  }
  .md-top-4 {
    top: var(--sp-4) !important;
  }
  .md-right-4 {
    right: var(--sp-4) !important;
  }
  .md-bottom-4 {
    bottom: var(--sp-4) !important;
  }
  .md-left-4 {
    left: var(--sp-4) !important;
  }
  .md-top-5 {
    top: var(--sp-5) !important;
  }
  .md-right-5 {
    right: var(--sp-5) !important;
  }
  .md-bottom-5 {
    bottom: var(--sp-5) !important;
  }
  .md-left-5 {
    left: var(--sp-5) !important;
  }
  .md-top-05 {
    top: var(--sp-05) !important;
  }
  .md-right-05 {
    right: var(--sp-05) !important;
  }
  .md-bottom-05 {
    bottom: var(--sp-05) !important;
  }
  .md-left-05 {
    left: var(--sp-05) !important;
  }
}

/* desktop lg */

@media (min-width: 975px) {
  /* display */
  .lg-d-block {
    display: block !important;
  }
  .lg-d-flex {
    display: flex !important;
  }
  .lg-d-grid {
    display: grid !important;
  }
  .lg-d-inline {
    display: inline !important;
  }
  .lg-d-inline-block {
    display: inline-block !important;
  }
  .lg-d-none {
    display: none !important;
  }
  /* margin */
  .lg-m-0 {
    margin: var(--sp-0) !important;
  }
  .lg-mx-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .lg-my-0 {
    margin-bottom: var(--sp-0) !important;
    margin-top: var(--sp-0) !important;
  }
  .lg-mt-0 {
    margin-top: var(--sp-0) !important;
  }
  .lg-mr-0 {
    margin-right: var(--sp-0) !important;
  }
  .lg-mb-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .lg-ml-0 {
    margin-left: var(--sp-0) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg-m-1 {
    margin: var(--sp-1) !important;
  }
  .lg-mx-1 {
    margin-left: var(--sp-1) !important;
    margin-right: var(--sp-1) !important;
  }
  .lg-my-1 {
    margin-bottom: var(--sp-1) !important;
    margin-top: var(--sp-1) !important;
  }
  .lg-mt-1 {
    margin-top: var(--sp-1) !important;
  }
  .lg-mr-1 {
    margin-right: var(--sp-1) !important;
  }
  .lg-mb-1 {
    margin-bottom: var(--sp-1) !important;
  }
  .lg-ml-1 {
    margin-left: var(--sp-1) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg-m-2 {
    margin: var(--sp-2) !important;
  }
  .lg-mx-2 {
    margin-left: var(--sp-2) !important;
    margin-right: var(--sp-2) !important;
  }
  .lg-my-2 {
    margin-bottom: var(--sp-2) !important;
    margin-top: var(--sp-2) !important;
  }
  .lg-mt-2 {
    margin-top: var(--sp-2) !important;
  }
  .lg-mr-2 {
    margin-right: var(--sp-2) !important;
  }
  .lg-mb-2 {
    margin-bottom: var(--sp-2) !important;
  }
  .lg-ml-2 {
    margin-left: var(--sp-2) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg-m-3 {
    margin: var(--sp-3) !important;
  }
  .lg-mx-3 {
    margin-left: var(--sp-3) !important;
    margin-right: var(--sp-3) !important;
  }
  .lg-my-3 {
    margin-bottom: var(--sp-3) !important;
    margin-top: var(--sp-3) !important;
  }
  .lg-mt-3 {
    margin-top: var(--sp-3) !important;
  }
  .lg-mr-3 {
    margin-right: var(--sp-3) !important;
  }
  .lg-mb-3 {
    margin-bottom: var(--sp-3) !important;
  }
  .lg-ml-3 {
    margin-left: var(--sp-3) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg-m-4 {
    margin: var(--sp-4) !important;
  }
  .lg-mx-4 {
    margin-left: var(--sp-4) !important;
    margin-right: var(--sp-4) !important;
  }
  .lg-my-4 {
    margin-bottom: var(--sp-4) !important;
    margin-top: var(--sp-4) !important;
  }
  .lg-mt-4 {
    margin-top: var(--sp-4) !important;
  }
  .lg-mr-4 {
    margin-right: var(--sp-4) !important;
  }
  .lg-mb-4 {
    margin-bottom: var(--sp-4) !important;
  }
  .lg-ml-4 {
    margin-left: var(--sp-4) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg-m-5 {
    margin: var(--sp-5) !important;
  }
  .lg-mx-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .lg-my-5 {
    margin-bottom: var(--sp-5) !important;
    margin-top: var(--sp-5) !important;
  }
  .lg-mt-5 {
    margin-top: var(--sp-5) !important;
  }
  .lg-mr-5 {
    margin-right: var(--sp-5) !important;
  }
  .lg-mb-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .lg-ml-5 {
    margin-left: var(--sp-5) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg-m-05 {
    margin: var(--sp-05) !important;
  }
  .lg-mx-05 {
    margin-left: var(--sp-05) !important;
    margin-right: var(--sp-05) !important;
  }
  .lg-my-05 {
    margin-bottom: var(--sp-05) !important;
    margin-top: var(--sp-05) !important;
  }
  .lg-mt-05 {
    margin-top: var(--sp-05) !important;
  }
  .lg-mr-05 {
    margin-right: var(--sp-05) !important;
  }
  .lg-mb-05 {
    margin-bottom: var(--sp-05) !important;
  }
  .lg-ml-05 {
    margin-left: var(--sp-05) !important;
  }
  .lg-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* padding */
  .lg-p-0 {
    padding: var(--sp-0) !important;
  }
  .lg-px-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .lg-py-0 {
    padding-bottom: var(--sp-0) !important;
    padding-top: var(--sp-0) !important;
  }
  .lg-pt-0 {
    padding-top: var(--sp-0) !important;
  }
  .lg-pr-0 {
    padding-right: var(--sp-0) !important;
  }
  .lg-pb-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .lg-pl-0 {
    padding-left: var(--sp-0) !important;
  }
  .lg-p-1 {
    padding: var(--sp-1) !important;
  }
  .lg-px-1 {
    padding-left: var(--sp-1) !important;
    padding-right: var(--sp-1) !important;
  }
  .lg-py-1 {
    padding-bottom: var(--sp-1) !important;
    padding-top: var(--sp-1) !important;
  }
  .lg-pt-1 {
    padding-top: var(--sp-1) !important;
  }
  .lg-pr-1 {
    padding-right: var(--sp-1) !important;
  }
  .lg-pb-1 {
    padding-bottom: var(--sp-1) !important;
  }
  .lg-pl-1 {
    padding-left: var(--sp-1) !important;
  }
  .lg-p-2 {
    padding: var(--sp-2) !important;
  }
  .lg-px-2 {
    padding-left: var(--sp-2) !important;
    padding-right: var(--sp-2) !important;
  }
  .lg-py-2 {
    padding-bottom: var(--sp-2) !important;
    padding-top: var(--sp-2) !important;
  }
  .lg-pt-2 {
    padding-top: var(--sp-2) !important;
  }
  .lg-pr-2 {
    padding-right: var(--sp-2) !important;
  }
  .lg-pb-2 {
    padding-bottom: var(--sp-2) !important;
  }
  .lg-pl-2 {
    padding-left: var(--sp-2) !important;
  }
  .lg-p-3 {
    padding: var(--sp-3) !important;
  }
  .lg-px-3 {
    padding-left: var(--sp-3) !important;
    padding-right: var(--sp-3) !important;
  }
  .lg-py-3 {
    padding-bottom: var(--sp-3) !important;
    padding-top: var(--sp-3) !important;
  }
  .lg-pt-3 {
    padding-top: var(--sp-3) !important;
  }
  .lg-pr-3 {
    padding-right: var(--sp-3) !important;
  }
  .lg-pb-3 {
    padding-bottom: var(--sp-3) !important;
  }
  .lg-pl-3 {
    padding-left: var(--sp-3) !important;
  }
  .lg-p-4 {
    padding: var(--sp-4) !important;
  }
  .lg-px-4 {
    padding-left: var(--sp-4) !important;
    padding-right: var(--sp-4) !important;
  }
  .lg-py-4 {
    padding-bottom: var(--sp-4) !important;
    padding-top: var(--sp-4) !important;
  }
  .lg-pt-4 {
    padding-top: var(--sp-4) !important;
  }
  .lg-pr-4 {
    padding-right: var(--sp-4) !important;
  }
  .lg-pb-4 {
    padding-bottom: var(--sp-4) !important;
  }
  .lg-pl-4 {
    padding-left: var(--sp-4) !important;
  }
  .lg-p-5 {
    padding: var(--sp-5) !important;
  }
  .lg-px-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .lg-py-5 {
    padding-bottom: var(--sp-5) !important;
    padding-top: var(--sp-5) !important;
  }
  .lg-pt-5 {
    padding-top: var(--sp-5) !important;
  }
  .lg-pr-5 {
    padding-right: var(--sp-5) !important;
  }
  .lg-pb-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .lg-pl-5 {
    padding-left: var(--sp-5) !important;
  }
  .lg-p-05 {
    padding: var(--sp-05) !important;
  }
  .lg-px-05 {
    padding-left: var(--sp-05) !important;
    padding-right: var(--sp-05) !important;
  }
  .lg-py-05 {
    padding-bottom: var(--sp-05) !important;
    padding-top: var(--sp-05) !important;
  }
  .lg-pt-05 {
    padding-top: var(--sp-05) !important;
  }
  .lg-pr-05 {
    padding-right: var(--sp-05) !important;
  }
  .lg-pb-05 {
    padding-bottom: var(--sp-05) !important;
  }
  .lg-pl-05 {
    padding-left: var(--sp-05) !important;
  }

  /* position */
  .lg-position-relative {
    position: relative !important;
  }
  .lg-position-absolute {
    position: absolute !important;
  }
  .lg-top-0 {
    top: var(--sp-0) !important;
  }
  .lg-right-0 {
    right: var(--sp-0) !important;
  }
  .lg-bottom-0 {
    bottom: var(--sp-0) !important;
  }
  .lg-left-0 {
    left: var(--sp-0) !important;
  }
  .lg-top-1 {
    top: var(--sp-1) !important;
  }
  .lg-right-1 {
    right: var(--sp-1) !important;
  }
  .lg-bottom-1 {
    bottom: var(--sp-1) !important;
  }
  .lg-left-1 {
    left: var(--sp-1) !important;
  }
  .lg-top-2 {
    top: var(--sp-2) !important;
  }
  .lg-right-2 {
    right: var(--sp-2) !important;
  }
  .lg-bottom-2 {
    bottom: var(--sp-2) !important;
  }
  .lg-left-2 {
    left: var(--sp-2) !important;
  }
  .lg-top-3 {
    top: var(--sp-3) !important;
  }
  .lg-right-3 {
    right: var(--sp-3) !important;
  }
  .lg-bottom-3 {
    bottom: var(--sp-3) !important;
  }
  .lg-left-3 {
    left: var(--sp-3) !important;
  }
  .lg-top-4 {
    top: var(--sp-4) !important;
  }
  .lg-right-4 {
    right: var(--sp-4) !important;
  }
  .lg-bottom-4 {
    bottom: var(--sp-4) !important;
  }
  .lg-left-4 {
    left: var(--sp-4) !important;
  }
  .lg-top-5 {
    top: var(--sp-5) !important;
  }
  .lg-right-5 {
    right: var(--sp-5) !important;
  }
  .lg-bottom-5 {
    bottom: var(--sp-5) !important;
  }
  .lg-left-5 {
    left: var(--sp-5) !important;
  }
  .lg-top-05 {
    top: var(--sp-05) !important;
  }
  .lg-right-05 {
    right: var(--sp-05) !important;
  }
  .lg-bottom-05 {
    bottom: var(--sp-05) !important;
  }
  .lg-left-05 {
    left: var(--sp-05) !important;
  }
}