@charset "UTF-8";
/***** function *****/
/***** function *****/
/***** mixin *****/
/***** mixin End *****/

/* footer */
footer {
  width: 100%;
  position: relative;
  margin-top: 16rem;
}

footer .footer-box-wrap {
  width: 100%;
  position: relative;
  border: 1px solid var(--border-color);
  border-left: none;
  border-right: none;
  padding: 6rem 0;
}

footer .footer-box-wrap .layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .footer-box-wrap .footer-box {
  margin-left: 6rem;
  padding-left: 6rem;
  border-left: 1px solid var(--border-color);
}

footer .footer-box-wrap .footer-box:first-child {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

footer .footer-box-wrap .footer-box h6 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: .6rem;
}

footer .footer-box-wrap .footer-box .em-text {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary-color);
}

footer .footer-box-wrap .footer-box .em-text-box span:nth-of-type(1) {
  font-size: 1.8rem;
}

footer .footer-box-wrap .footer-box .em-text-box span:nth-of-type(2) {
  font-size: 2.4rem;
  font-weight: 700;
  margin-left: .6rem;
}

footer .footer-box-wrap .footer-box p {
  font-size: 1.6rem;
  margin-top: .6rem;
}

footer .footer-box-wrap .footer-box .link-box {
  margin-top: .6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.6rem;
}

footer .footer-box-wrap .footer-box .link-box a {
  position: relative;
  font-size: 1.4rem;
  color: var(--text-light-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer .footer-box-wrap .footer-box .link-box a::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23808080' d='M9.31 6.71a.996.996 0 0 0 0 1.41L13.19 12l-3.88 3.88a.997.997 0 0 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-left: .2rem;
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
}

footer .footer-box-wrap .footer-box .link-box a:hover {
  color: var(--text-color);
}

footer .footer-box-wrap .footer-box .link-box a:hover::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23202020' d='M9.31 6.71a.996.996 0 0 0 0 1.41L13.19 12l-3.88 3.88a.997.997 0 0 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01Z'/%3E%3C/svg%3E");
}


footer .footer-info-wrap {
  width: 100%;
  position: relative;
  padding: 6rem 0;
}

footer .footer-info-wrap .layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6rem;
}

footer .footer-info-wrap .logo img {
  height: var(--logo-size);
}

footer .footer-info-wrap .footer-info-box > div {
  width: 100%;
  position: relative;
}

footer .footer-info-wrap .footer-info-box > div > *:first-child::before {
  display: none;
}

footer .footer-info-wrap .footer-info-box > div > *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.2rem;
  background-color: #ddd;
  margin: 0 1.2rem;
}

footer .footer-info-wrap .footer-info-box > div div,
footer .footer-info-wrap .footer-info-box > div span,
footer .footer-info-wrap .footer-info-box > div a {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--text-light-color);
}

footer .footer-info-wrap .footer-info-box > div a:hover {
  color: var(--primary-color);
}

footer .footer-info-wrap .footer-info-box .copyright {
  font-size: 1.4rem;
  color: var(--text-light-color);
  margin-top: 1.6rem;
}

/* footer end */


/********** fonts **********/
@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 700;
  src: local("Spoqa Han Sans Neo Bold"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoBold.woff2") format("woff2"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoBold.woff") format("woff"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoBold.ttf") format("truetype"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoBold.eot") format("opentype");
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 500;
  src: local("Spoqa Han Sans Neo Medium"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoMedium.woff2") format("woff2"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoMedium.woff") format("woff"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoMedium.ttf") format("truetype"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoMedium.eot") format("opentype");
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 400;
  src: local("Spoqa Han Sans Neo Regular"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoRegular.woff2") format("woff2"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoRegular.woff") format("woff"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoRegular.ttf") format("truetype"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoRegular.eot") format("opentype");
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 300;
  src: local("Spoqa Han Sans Neo Light"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoLight.woff2") format("woff2"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoLight.woff") format("woff"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoLight.ttf") format("truetype"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoLight.eot") format("opentype");
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 100;
  src: local("Spoqa Han Sans Neo Thin"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoThin.woff2") format("woff2"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoThin.woff") format("woff"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoThin.ttf") format("truetype"), url("../fonts/SpoqaHanSans/SpoqaHanSansNeoThin.eot") format("opentype");
}
@font-face {
    font-family: 'MICEGothic Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/MICEGothic Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
/* ======================================================= */
/********** root **********/
:root {
  /* theme color */
  --theme-color: #fafafa;
  /* primary color */
  --primary-color:#f01414;
  --primary-assist-color:#000c74;
  --primary-light-color:#C1CDFF;
  /* step color */
  --important-color: #4c80f1;
  --positive-color: #1bbf83;
  --negative-color: #f24147;
  /* assist color */
  --assist-gray: #8d8d8d;
  --assist-light-gray: #c5c5c5;
  --assist-red: #f04d25;
  --assist-orange: #ff6a00;
  --assist-green: #29d335;
  --assist-blue: #1e46f3;
  --assist-yellow: #ffc400;
  /* border-color */
  --border-color: #e8e8e8;
  --line-color: #f3f3f3;
  /* text color */
  --text-color: #2e2e2e;
  --text-gray: #4d5256;
  --text-light-gray: #878d91;
  --text-white: #f8fafb;
  /* background color */
  --background-gray: #f8f8f8;
  --background-light-gray: #fcfcfc;
  /* font */
  --font: 'MICEGothic Bold', 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif;
  /* font-size */
  font-size: 62.5%;
  /* color palette */
  --black: #2a2a2a;
  --white: #fff;
  --red: #f01414;
  --dark-red: #e41c1c;
  --green: #00d300;
  --dark-green: #018301;
  --blue: #2121fd;
  --dark-blue: #06067a;
  --sky-blue: #0db2ff;
  --yellow: #fffb00;
  --dark-yellow: #e9e910;
  --orange: #ffa500;
  --dark-orange: #df9100;
  --purple: #790479;
  --dark-purple: #5a045a;
  --aqua: #0aebeb;
  --dark-aqua: #03bbbb;
  --gray: #909090;
  --dark-gray: #686868;
  --temp-color: #000;
}

/********** root end **********/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: var(--font);
  font-size: var(--font-size);
  color: var(--text-color);
  overflow-wrap: break-word;
}

a {
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
}

a:focus {
  outline: none;
}

li {
  list-style: none;
}

ol:after,
ul:after {
  content: '';
  display: block;
  clear: both;
}

iframe,
img {
  display: block;
}

img {
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

input,
textarea {
  font-family: var(--font);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--text-light-gray);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--text-light-gray);
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--text-light-gray);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-light-gray);
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

select::-ms-expand {
  display: none !important;
}

.select {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.select:after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  right: 0;
  z-index: 1;
  width: 4rem;
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 400;
  pointer-events: none;
  background-color: transparent;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.select select {
  width: 100%;
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 400;
  padding: 1rem 4rem 1rem 1rem;
  cursor: pointer;
  border-color: var(--border-color);
  color: var(--text-color);
  background-color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 7.2rem;
  outline: none;
}

.select select::-ms-expand {
  display: none !important;
}

.select:hover::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.select:hover select {
  border-color: var(--assist-blue);
  outline: none;
}

/* input */
input[type="text"],
input[type="password"] {
  width: 100%;
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 400;
  padding: 0 1rem;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--assist-blue);
  outline: none;
}

/* input number의 외형을 텍스트필드로 바꿔줘야한다 */
input[type=number] {
  -moz-appearance: textfield;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
  display: none;
}

/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="color"] {
  border: none !important;
  padding: 0 !important;
}

/* input range */
input[type=range] {
  width: 100%;
}

input[type=range] {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background-color: #eee;
}

input[type=range]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border-radius: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background: var(--primary-color);
  /* chrome의 경우 */
  margin-top: -5px;
}

input[type=range]::-webkit-slider-thumb:hover,
input[type=range]::-webkit-slider-thumb:focus {
  -webkit-filter: saturate(80%);
          filter: saturate(80%);
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ddd;
}

textarea {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 400;
  padding: 1rem;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  resize: none;
}

textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

.selectbox {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  display: inline-block;
  text-align: left;
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
}

.selectbox p {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
  padding: 8px 44px 8px 16px;
  min-height: 40px;
}

.selectbox p::after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: absolute;
  width: 12px;
  height: 12px;
  right: 16px;
  -webkit-transition: -webkit-transform .35s;
  transition: -webkit-transform .35s;
  transition: transform .35s;
  transition: transform .35s, -webkit-transform .35s;
}

.selectbox .option {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 8px 0px;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  display: block;
  z-index: -99;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity .35s, -webkit-transform .35s;
  transition: opacity .35s, -webkit-transform .35s;
  transition: opacity .35s, transform .35s;
  transition: opacity .35s, transform .35s, -webkit-transform .35s;
}

.selectbox .option a {
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
  padding: 6px 16px;
  color: #808080 !important;
  word-break: break-all;
  display: none;
}

.selectbox .option a:hover {
  color: #202020 !important;
}

.selectbox .option a.selected {
  color: var(--main-color) !important;
}

.selectbox:focus, .selectbox:hover {
  outline: none;
  border-color: var(--primary-color);
}

.selectbox:focus p, .selectbox:hover p {
  color: var(--primary-color);
}

.selectbox.active {
  border-color: var(--primary-color);
}

.selectbox.active p {
  color: var(--primary-color);
}

.selectbox.active p::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.selectbox.active .option {
  z-index: 99;
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.selectbox.active .option a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.selectbox_button {
  padding: 0 !important;
  min-height: auto !important;
}

.selectbox_button > a {
  width: 100%;
  padding: 8px 16px;
  min-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 8px;
}

.selectbox_button .option {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 8px 0px;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  display: block;
  z-index: -99;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity .35s, -webkit-transform .35s;
  transition: opacity .35s, -webkit-transform .35s;
  transition: opacity .35s, transform .35s;
  transition: opacity .35s, transform .35s, -webkit-transform .35s;
}

.selectbox_button .option a {
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: left;
  padding: 6px 16px;
  color: #808080 !important;
  word-break: break-all;
  display: none;
}

.selectbox_button .option a span {
  color: #808080 !important;
}

.selectbox_button .option a:hover * {
  color: #202020 !important;
}

.selectbox_button.active {
  border-color: var(--main-color) !important;
}

.selectbox_button.active > a {
  color: var(--main-color) !important;
}

.selectbox_button.active > a * {
  color: var(--main-color) !important;
}

.selectbox_button.active .option {
  z-index: 99;
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.selectbox_button.active .option a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.selectbox_button:focus, .selectbox_button:hover {
  outline: none;
  border-color: var(--primary-color);
}

.option img.icon {
  width: 24px;
}

.option i {
  color: #808080 !important;
}

.datebox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px 16px;
  position: relative;
}

.inputbox {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  display: inline-block;
  text-align: left;
  position: relative;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  z-index: 98;
}

.inputbox:hover input {
  border-color: var(--primary-color);
}

.inputbox input {
  width: 100%;
  border: none;
  background: none;
  padding: 8px 16px;
  min-height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.inputbox input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* radiobox */
.radio_box_area {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

.radio_box.blue input[type="radio"] ~ label::after {
  background-color: var(--assist-blue) !important;
}

.radio_box.blue input[type="radio"]:checked ~ label::before {
  border-color: var(--assist-blue) !important;
}

.radio_box.blue input[type="radio"]:checked ~ label::after {
  background-color: var(--assist-blue) !important;
}

.radio_box input[type="radio"] {
  display: none;
}

.radio_box input[type="radio"]:checked ~ label {
  color: var(--text-color) !important;
}

.radio_box input[type="radio"]:checked ~ label::before {
  border-color: var(--primary-color) !important;
}

.radio_box input[type="radio"]:checked ~ label::after {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
          transform: scale(1) !important;
}

.radio_box label {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  cursor: pointer;
  color: var(--text-light-gray);
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 1.6rem;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.radio_box label:hover {
  color: var(--text-color);
}

.radio_box label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  margin-right: 4px;
  -webkit-transition: all .35s;
  transition: all .35s;
  border-radius: 100%;
}

.radio_box label::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 100%;
  position: absolute;
  left: 5px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all .35s;
  transition: all .35s;
}

/* checkbox */
.check_box_area {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem 2rem;
}

.check_box.circle label::before {
  border-radius: 100%;
}

.check_box.radius label::before {
  border-radius: 4px;
}

.check_box.blue input[type="checkbox"]:checked ~ label::before {
  background-color: var(--assist-blue);
}

.check_box input[type="checkbox"] {
  display: none;
}

.check_box input[type="checkbox"]:checked ~ label {
  color: var(--text-color);
}

.check_box input[type="checkbox"]:checked ~ label::before {
  background: var(--black);
  border-color: transparent;
}

.check_box input[type="checkbox"]:checked ~ label::after {
  opacity: 1;
}

.check_box label {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  cursor: pointer;
  color: var(--text-light-gray);
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 1.6rem;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.check_box label:hover {
  color: var(--text-gray);
}

.check_box label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  -webkit-transition: all .3s;
  transition: all .3s;
  margin-right: 4px;
  margin-top: -2px;
}

.check_box label::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 7px;
  top: calc(50% - 2px);
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 8.5px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transition: all .2s;
  transition: all .2s;
  opacity: 0;
}

.check_box_list {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px 16px;
}

/*  */
@media (max-width: 1199px) {
  :root {
    font-size: 50%;
  }
}

/* mobile */
/* IE 9, IE 10, IE 11 */
@media screen and (min-width: 0\0) {
  :root,
  html {
    font-size: 10px;
  }
}

/* IE 10, IE 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  :root,
  html {
    font-size: 10px;
  }
}