/*
  Written By dreamcat
  Date : 2022.02.01 
  Description : 나혼자 편하려고 쓴거

  Recommening list
  reset
  bottstrap
  this one <-
*/

html {
    font-size: 10px;
  }
  body {
    font-size: 1.6rem;
  }
  
  /* width % */
  .w-5 { width: 5%; }
  .w-10 { width: 10%; }
  .w-15 { width: 15%; }
  .w-20 { width: 20%; }
  .w-25 { width: 25%; }
  .w-30 { width: 30%; }
  .w-35 { width: 35%; }
  .w-40 { width: 40%; }
  .w-45 { width: 45%; }
  .w-50 { width: 50%; }
  .w-55 { width: 55%; }
  .w-60 { width: 60%; }
  .w-65 { width: 65%; }
  .w-70 { width: 70%; }
  .w-75 { width: 75%; }
  .w-80 { width: 80%; }
  .w-85 { width: 85%; }
  .w-90 { width: 90%; }
  .w-95 { width: 95%; }
  .w-100 { width: 100%; }
  
  /* height % */
  .h-5 { height: 5%; }
  .h-10 { height: 10%; }
  .h-15 { height: 15%; }
  .h-20 { height: 20%; }
  .h-25 { height: 25%; }
  .h-30 { height: 30%; }
  .h-35 { height: 35%; }
  .h-40 { height: 40%; }
  .h-45 { height: 45%; }
  .h-50 { height: 50%; }
  .h-55 { height: 55%; }
  .h-60 { height: 60%; }
  .h-65 { height: 65%; }
  .h-70 { height: 70%; }
  .h-75 { height: 75%; }
  .h-80 { height: 80%; }
  .h-85 { height: 85%; }
  .h-90 { height: 90%; }
  .h-95 { height: 95%; }
  .h-100 { height: 100%; }
  
  /* min-height rem*/
  .min-h-10 { min-height: 10rem; }
  .min-h-15 { min-height: 15rem; }
  .min-h-20 { min-height: 20rem; }  
  .min-h-25 { min-height: 25rem; }
  .min-h-30 { min-height: 30rem; }
  .min-h-35 { min-height: 35rem; }
  .min-h-40 { min-height: 40rem; }
  .min-h-45 { min-height: 45rem; }
  .min-h-50 { min-height: 50rem; }
  .min-h-55 { min-height: 55rem; }
  .min-h-60 { min-height: 60rem; }
  .min-h-65 { min-height: 65rem; }
  .min-h-70 { min-height: 70rem; }
  .min-h-75 { min-height: 75rem; }
  .min-h-80 { min-height: 80rem; }
  .min-h-85 { min-height: 85rem; }
  .min-h-90 { min-height: 90rem; }
  .min-h-95 { min-height: 95rem; }
  .min-h-100 { min-height: 100rem; }
  
  /* max-height rem*/
  .max-h-10 { max-height: 10rem; }
  .max-h-15 { max-height: 15rem; }
  .max-h-20 { max-height: 20rem; }
  .max-h-25 { max-height: 25rem; }
  .max-h-30 { max-height: 30rem; }
  .max-h-35 { max-height: 35rem; }
  .max-h-40 { max-height: 40rem; }
  .max-h-45 { max-height: 45rem; }
  .max-h-50 { max-height: 50rem; }
  .max-h-55 { max-height: 55rem; }
  .max-h-60 { max-height: 60rem; }
  .max-h-65 { max-height: 65rem; }
  .max-h-70 { max-height: 70rem; }
  .max-h-75 { max-height: 75rem; }
  .max-h-80 { max-height: 80rem; }
  .max-h-85 { max-height: 85rem; }
  .max-h-90 { max-height: 90rem; }
  .max-h-95 { max-height: 95rem; }
  .max-h-100 { max-height: 100rem; }
  
  /* min-width rem*/
  .min-w-10 { min-width: 10rem; }
  .min-w-15 { min-width: 15rem; }
  .min-w-20 { min-width: 20rem; }
  .min-w-25 { min-width: 25rem; }
  .min-w-30 { min-width: 30rem; }
  .min-w-35 { min-width: 35rem; }
  .min-w-40 { min-width: 40rem; }
  .min-w-45 { min-width: 45rem; }
  .min-w-50 { min-width: 50rem; }
  .min-w-55 { min-width: 55rem; }
  .min-w-60 { min-width: 60rem; }
  .min-w-65 { min-width: 65rem; }
  .min-w-70 { min-width: 70rem; }
  .min-w-75 { min-width: 75rem; }
  .min-w-80 { min-width: 80rem; }
  .min-w-85 { min-width: 85rem; }
  .min-w-90 { min-width: 90rem; }
  .min-w-95 { min-width: 95rem; }
  .min-w-100 { min-width: 100rem; }
  
  /* max-width rem*/
  .max-w-10 { max-width: 10rem; }
  .max-w-15 { max-width: 15rem; }
  .max-w-20 { max-width: 20rem; }
  .max-w-25 { max-width: 25rem; }
  .max-w-30 { max-width: 30rem; }
  .max-w-35 { max-width: 35rem; }
  .max-w-40 { max-width: 40rem; }
  .max-w-45 { max-width: 45rem; }
  .max-w-50 { max-width: 50rem; }
  .max-w-55 { max-width: 55rem; }
  .max-w-60 { max-width: 60rem; }
  .max-w-65 { max-width: 65rem; }
  .max-w-70 { max-width: 70rem; }
  .max-w-75 { max-width: 75rem; }
  .max-w-80 { max-width: 80rem; }
  .max-w-85 { max-width: 85rem; }
  .max-w-90 { max-width: 90rem; }
  .max-w-95 { max-width: 95rem; }
  .max-w-100 { max-width: 100rem; }
  
  /* border-radius %*/
  .br-10 { border-radius: 1rem; }
  .br-20 { border-radius: 2rem; }
  .br-30 { border-radius: 3rem; }
  .br-40 { border-radius: 4rem; }
  .br-50 { border-radius: 5rem; }
  
  /* clear-padding */
  .clear-5 { padding: 0.5rem; }
  .clear-10 { padding: 1rem; }
  .clear-15 { padding: 1.5rem; }
  .clear-20 { padding: 2rem; }
  .clear-25 { padding: 2.5rem; }
  .clear-30 { padding: 3rem; }
  .clear-35 { padding: 3.5rem; }
  .clear-40 { padding: 4rem; }
  .clear-45 { padding: 4.5rem; }
  .clear-50 { padding: 5rem; }
  .clear-55 { padding: 5.5rem; }
  .clear-60 { padding: 6rem; }
  .clear-65 { padding: 6.5rem; }
  .clear-70 { padding: 7rem; }
  .clear-75 { padding: 7.5rem; }
  .clear-80 { padding: 8rem; }
  .clear-85 { padding: 8.5rem; }
  .clear-90 { padding: 9rem; }
  .clear-95 { padding: 9.5rem; }
  .clear-100 { padding: 10rem; }

  /*flex-center*/
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
  }
 
  
  /* text-ellipsis */
  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* img-cover */
  .img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  /* cursor-pointer */
  .cursor-pointer {
    cursor: pointer;
  }
  
  /* a Tag init */
  a {
    text-decoration: none;
    color: inherit; 
    cursor: inherit; 
  }
  a:hover {
    text-decoration: none;
  }
  a:active {
    color: inherit;
  }
  a:visited {
    color: inherit;
  }
  
  /* font-wegiht */
  .fw-500 { font-weight: 500; }
  .fw-600 { font-weight: 600; }
  .fw-700 { font-weight: 700; }
  .fw-800 { font-weight: 800; }
  .fw-900 { font-weight: 900; }
  .fw-1000 { font-weight: 1000; }
  
  
  /* font-size */
  .fs-10 { font-size: 1rem; }
  .fs-15 { font-size: 1.5rem; }
  .fs-20 { font-size: 2rem; }
  .fs-25 { font-size: 2.5rem; }
  .fs-30 { font-size: 3rem; }
  .fs-35 { font-size: 3.5rem; }
  .fs-40 { font-size: 4rem; }
  .fs-45 { font-size: 4.5rem; }
  .fs-50 { font-size: 5rem; } 
  .fs-55 { font-size: 5.5rem; }
  .fs-60 { font-size: 6rem; }
  .fs-65 { font-size: 6.5rem; }
  .fs-70 { font-size: 7rem; }
  .fs-75 { font-size: 7.5rem; }
  .fs-80 { font-size: 8rem; }
  .fs-85 { font-size: 8.5rem; }
  .fs-90 { font-size: 9rem; }
  .fs-95 { font-size: 9.5rem; }
  .fs-100 { font-size: 10rem; }


  /* border */
  .b-1 { border: 1px solid; }
  
  .after-none::after {
    display: none;
    content: none;
  }

  /* text-shadow */
  .ts-light {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
  .ts-middle {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .ts-heavy {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  }
  
  /* dim */
  .dim-1 {
    background-color: black;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-2 {
    background-color: black;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-3 {
    background-color: black;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-4 {
    background-color: black;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-5 {
    background-color: black;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-6 {
    background-color: black;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-7 {
    background-color: black;
    opacity: 0.7;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-8 {
    background-color: black;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-9 {
    background-color: black;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .dim-10 {
    background-color: black;
    opacity: 1;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  /* opacity */
  .op-0 {
    opacity: 0;
  }
  .op-10 {
    opacity: 0.1;
  }   
  .op-20 {
    opacity: 0.2;
  }
  .op-30 {
    opacity: 0.3;
  }
  .op-40 {
    opacity: 0.4;
  }
  .op-50 {
    opacity: 0.5;
  }
  .op-60 {
    opacity: 0.6;
  }
  .op-70 {
    opacity: 0.7;
  }
  .op-80 {
    opacity: 0.8;
  }
  .op-90 {
    opacity: 0.9;
  }
  .op-100 {
    opacity: 1;
  }
  
  /* media */
  @media (max-width: 576px) {
    .show-sm-none {
      display: none !important;
    }
    .show-sm-block {
      display: block !important;
    }
    .show-sm-inline {
      display: inline !important;
    }
    .show-sm-inline-block {
      display: inline-block !important;
    }
    .show-sm-flex {
      display: flex !important;
    }
    .show-sm-inline-flex {
      display: inline-flex !important;
    }
    .show-sm-grid {
      display: grid !important;
    }
    .show-sm-inline-grid {
      display: inline-grid !important;
    }
    .show-sm-table {
      display: table !important;
    }
    .show-sm-inline-table {
      display: inline-table !important;
    }   
  }

  @media (min-width: 576px) {
    .hide-sm-none {
      display: none !important;
    }
    .hide-sm-block {
      display: block !important;
    }
    .hide-sm-inline {
      display: inline !important;
    }
    .hide-sm-inline-block {
      display: inline-block !important;
    }
    .hide-sm-flex {
      display: flex !important;
    }
    .hide-sm-inline-flex {
      display: inline-flex !important;
    }
    .hide-sm-grid {
      display: grid !important;
    }
    .hide-sm-inline-grid {
      display: inline-grid !important;
    }
    .hide-sm-table {
      display: table !important;
    }
  }

  @media (max-width: 768px) {
    .show-md-none {
      display: none !important;
    }
    .show-md-block {
      display: block !important;
    }
    .show-md-inline {
      display: inline !important;
    }
    .show-md-inline-block {
      display: inline-block !important;
    }
    .show-md-flex {
      display: flex !important;
    }
    .show-md-inline-flex {
      display: inline-flex !important;
    }
    .show-md-grid {
      display: grid !important;
    }
    .show-md-inline-grid {
      display: inline-grid !important;
    }
    .show-md-table {
      display: table !important;
    }
    .show-md-inline-table {
      display: inline-table !important;
    } 
  }

  @media (min-width: 768px) {
    .hide-md-none {
      display: none !important;
    }
    .hide-md-block {
      display: block !important;
    }
    .hide-md-inline {
      display: inline !important;
    }
    .hide-md-inline-block {
      display: inline-block !important;
    }
    .hide-md-flex {
      display: flex !important;
    }
    .hide-md-inline-flex {
      display: inline-flex !important;
    }
    .hide-md-grid {
      display: grid !important;
    }
    .hide-md-inline-grid {
      display: inline-grid !important;
    }
    .hide-md-table {
      display: table !important;
    }
    .hide-md-inline-table {
      display: inline-table !important;
    }
  }


  @media (max-width: 992px) {
    .show-lg-none {
      display: none !important;
    }
    .show-lg-block {
      display: block !important;
    }
    .show-lg-inline {
      display: inline !important;
    }
    .show-lg-inline-block {
      display: inline-block !important;
    }
    .show-lg-flex {
      display: flex !important;
    }
    .show-lg-inline-flex {
      display: inline-flex !important;
    }
    .show-lg-grid {
      display: grid !important;
    }
    .show-lg-inline-grid {
      display: inline-grid !important;
    }
    .show-lg-table {
      display: table !important;
    }
    .show-lg-inline-table {
      display: inline-table !important;
    } 
  }

  @media (min-width: 992px) {
    .hide-lg-none {
      display: none !important;
    }
    .hide-lg-block {
      display: block !important;
    }
    .hide-lg-inline {
      display: inline !important;
    }
    .hide-lg-inline-block {
      display: inline-block !important;
    }
    .hide-lg-flex {
      display: flex !important;
    }
    .hide-lg-inline-flex {
      display: inline-flex !important;
    }
    .hide-lg-grid {
      display: grid !important;
    }
    .hide-lg-inline-grid {
      display: inline-grid !important;
    }
    .hide-lg-table {
      display: table !important;
    }
    .hide-lg-inline-table {
      display: inline-table !important;
    }
  }

  /* vertical-align */
  .vertical-align-middle {
    vertical-align: middle;
  }
  .vertical-align-top {
    vertical-align: top;
  }
  .vertical-align-bottom {
    vertical-align: bottom;
  }