@charset "utf-8";

:root {
  --color-c1: #FFB31E;
  --color-c2: #B8891F;
  --color-c3: rgba(255, 187, 36, 0.1);
  --color-c4: #5200D9;

  --color-gr1: rgba(255,255,255,.7);
  --color-gr2: rgba(255,255,255,.5);
  --color-gr3: rgba(255,255,255,.3);
  --color-gr4: rgba(255,255,255,.1);

  --color-bg1: rgba(255,255,255,.04);
  --color-bg2: #eaebee;
  --color-bg3: #151515;

  --ovl-c1:rgba(102,48,255, .15);
  --ovl-c2:rgba(56,241,234, .15);
  --ovl-c3:rgba(245,155,43, .15);

  --color-rd: #FF4040;
  --color-lrd: #FFEEF1;
  --color-og: #FF7043;
  --color-yl: #FFB31E;
  --color-gn: #00c493;
  --color-lgn: #E8F8F4;
  --color-bl: #1c73ff;
  --color-pk: #DD23A2;
  --color-lpk: #fff5f7;
  --color-cy:#1FD2CC;
  --color-lcy:#ECFFFE;
  --color-vi: #6630FF;
  --color-lvi: #F4F0FF;
  --color-bk: #000;

  --color-b: rgba(255,255,255,.12);
}

html{
  background:#141414;
  color:#fff;
}

.f-bk,
.f-bk-h:hover,
.f-bk-h-c > *:hover {
  color: var(--color-bk);
}

.f-wt,
.f-wt-h:hover,
.f-wt-h-c > *:hover {
  color: white;
}

.f-gr1,
.f-gr1-h:hover,
.f-gr1-h-c > *:hover {
  color: var(--color-gr1);
}

.f-gr2,
.f-gr2-h:hover,
.f-gr2-h-c > *:hover {
  color: var(--color-gr2);
}

.f-gr3,
.f-gr3-h:hover,
.f-gr3-h-c > *:hover {
  color: var(--color-gr3);
}

.f-gr4,
.f-gr4-h:hover,
.f-gr4-h-c > *:hover {
  color: var(--color-gr4);
}

.f-gr5,
.f-gr5-h:hover,
.f-gr5-h-c > *:hover {
  color: var(--color-gr5);
}

.f-rd,
.f-rd-h:hover,
.f-rd-h-c > *:hover {
  color: var(--color-rd);
}

.f-og,
.f-og-h:hover,
.f-og-h-c > *:hover {
  color: var(--color-og);
}

.f-yl,
.f-yl-h:hover,
.f-yl-h-c > *:hover {
  color: var(--color-yl);
}

.f-gn,
.f-gn-h:hover,
.f-gn-h-c > *:hover {
  color: var(--color-gn);
}

.f-bl,
.f-bl-h:hover,
.f-bl-h-c > *:hover {
  color: var(--color-bl);
}

.f-cy,
.f-cy-h:hover,
.f-cy-h-c > *:hover {
  color: var(--color-cy);
}

.f-vi,
.f-vi-h:hover,
.f-vi-h-c > *:hover {
  color: var(--color-vi);
}

.f-pk,
.f-pk-h:hover,
.f-pk-h-c > *:hover {
  color: var(--color-pk);
}

.f-kakao {
  color: #3c1e20;
}

.f-naver {
  color: #4dc83e;
}

.f-facebook {
  color: #385591;
}

.f-c1,
.f-c1-h:hover,
.f-c1-h-c > *:hover {
  color: var(--color-c1);
}

.f-c2,
.f-c2-h:hover,
.f-c2-h-c > *:hover {
  color: var(--color-c2);
}

.f-c3,
.f-c3-h:hover,
.f-c3-h-c > *:hover {
  color: var(--color-c3);
}

.f-c4,
.f-c4-h:hover,
.f-c4-h-c > *:hover {
  color: var(--color-c4);
}

.swiper-pagination-bullet {
  background-color: currentColor;
}

.swiper-pagination-progressbar-fill,
.swiper-pagination-bullet-active {
  background-color: currentColor;
}

.bw-switch.on {
  background: #3b39ff;
}

.c-n {
  background-color: transparent;
}

.c-bk,
.c-bk-c > *,
.c-bk-cc > * > *,
.c-bk-h:hover,
.c-bk-h-c > *:hover,
input[type="checkbox"]:checked + label:before {
  background-color: var(--color-bk);
}

.c-lrd,
.c-lrd-c > *,
.c-lrd-cc > * > *,
.c-lrd-h:hover,
.c-lrd-h-c > *:hover {
  background-color: var(--color-lrd);
}

.c-rd,
.c-rd-c > *,
.c-rd-cc > * > *,
.c-rd-h:hover,
.c-rd-h-c > *:hover {
  background-color: var(--color-rd);
}

.c-og,
.c-og-c > * > *,
.c-og-h:hover,
.c-og-h-c > *:hover {
  background-color: var(--color-og);
}

.c-yl,
.c-yl-c > *,
.c-yl-cc > * > *,
.c-yl-h:hover,
.c-yl-h-c > *:hover {
  background-color: var(--color-yl);
}

.c-gn,
.c-gn-c > *,
.c-gn-cc > * > *,
.c-gn-h:hover,
.c-gn-h-c > *:hover {
  background-color: var(--color-gn);
}

.c-bl,
.c-bl-c > *,
.c-bl-cc > * > *,
.c-bl-h:hover,
.c-bl-h-c > *:hover {
  background-color: var(--color-bl);
}

.c-vi,
.c-vi-c > *,
.c-vi-cc > * > *,
.c-vi-h:hover,
.c-vi-h-c > *:hover {
  background-color: var(--color-vi);
}

.c-cy,
.c-cy-c > *,
.c-cy-cc > * > *,
.c-cy-h:hover,
.c-cy-h-c > *:hover {
  background-color: var(--color-cy);
}

.c-pk,
.c-pk-c > *,
.c-pk-cc > * > *,
.c-pk-h:hover,
.c-pk-h-c > *:hover {
  background-color: var(--color-pk);
}

.c-wt,
.c-wt-c > *,
.c-wt-cc > * > *,
.c-wt-h:hover,
.c-wt-h-c > *:hover {
  background-color: white;
}

.c-gr1,
.c-gr1-c > *,
.c-gr1-cc > * > *,
.c-gr1-h:hover,
.c-gr1-h-c > *:hover {
  background-color: var(--color-gr1);
}

.c-gr2,
.c-gr2-c > *,
.c-gr2-cc > * > *,
.c-gr2-h:hover,
.c-gr2-h-c > *:hover {
  background-color: var(--color-gr2);
}

.c-gr3,
.c-gr3-c > *,
.c-gr3-cc > * > *,
.c-gr3-h:hover,
.c-gr3-h-c > *:hover {
  background-color: var(--color-gr3);
}

.c-gr4,
.c-gr4-c > *,
.c-gr4-cc > * > *,
.c-gr4-h:hover,
.c-gr4-h-c > *:hover {
  background-color: var(--color-gr4);
}

.c-bg1,
.c-bg1-c > *,
.c-bg1-cc > * > *,
.c-bg1-h:hover,
.c-bg1-h-c > *:hover {
  background-color: var(--color-bg1);
}

.c-bg2,
.c-bg2-c > *,
.c-bg2-cc > * > *,
.c-bg2-h:hover,
.c-bg2-h-c > *:hover {
  background-color: var(--color-bg2);
}

.c-bg3,
.c-bg3-c > *,
.c-bg3-cc > * > *,
.c-bg3-h:hover,
.c-bg3-h-c > *:hover {
  background-color: var(--color-bg3);
}

.c-kakao {
  background-color: #fee500;
}

.c-naver {
  background-color: #60ca6c;
}

.c-facebook {
  background-color: #385591;
}

.c-c1,
.c-c1-c > *,
.c-c1-c > * > *,
.c-c1-h:hover,
.c-c1-h-c > *:hover {
  background-color: var(--color-c1);
}

.c-c2,
.c-c2-c > *,
.c-c2-c > * > *,
.c-c2-h:hover,
.c-c2-h-c > *:hover {
  background-color: var(--color-c2);
}
.c-c3,
.c-c3-c > *,
.c-c3-c > * > *,
.c-c3-h:hover,
.c-c3-h-c > *:hover {
  background-color: var(--color-c3);
}
.c-c4,
.c-c4-c > *,
.c-c4-c > * > *,
.c-c4-h:hover,
.c-c4-h-c > *:hover {
  background-color: var(--color-c4);
}

.b-gn{
  border-color: var(--color-gn);
}

.b-bl{
  border-color: var(--color-bl);
}

.b-rd{
  border-color: var(--color-rd);
}

.ovl-1,
.ovl-1-c > *,
.ovl-1-cc > * > * {
  background-color: rgba(255, 255, 255, 0.1);
}

.ovl-gr,
.ovl-gr-c > *,
.ovl-gr-cc > * > * {
  background-color: rgba(0, 0, 0, 0.4);
}

.ovl-lgr,
.ovl-lgr-c > *,
.ovl-lgr-cc > * > * {
  background-color: rgba(0, 0, 0, 0.2);
}

.ovl-c,
.ovl-c-c > *,
.ovl-c-cc > * > * {
  background-color: rgba(28, 127, 243, 0.8);
}

.grd-v1, .grd-v1-c > *{
  background: -webkit-linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, 1) 100%);
  background: -o-linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, 1) 100%);
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, 1) 100%);
}

.grd-v2, .grd-v2-c > *{
  background: -webkit-linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 50%);
  background: -moz-linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 50%);
  background: -o-linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 50%);
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 50%);
}

.grd-h1, .grd-h1-c > *{
  background: -webkit-linear-gradient(90deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 100%);
  background: -o-linear-gradient(90deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 100%);
  background: linear-gradient(90deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 100%);
}

.grd-h2, .grd-h2-c > *{
  background: -webkit-linear-gradient(90deg, rgba(20, 20, 20, 1) 100%, rgba(20, 20, 20, 0) 100%);
  background: -moz-linear-gradient(90deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 100%);
  background: -o-linear-gradient(90deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 100%);
  background: linear-gradient(90deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 100%);
}

.grd-select, .grd-select-c > *{
  background: -webkit-linear-gradient(180deg, rgba(255, 187, 36, 0.1) 0%, rgba(255, 187, 36, 0) 100%);
  background: -moz-linear-gradient(180deg, rgba(255, 187, 36, 0.1) 0%, rgba(255, 187, 36, 0) 100%);
  background: -o-linear-gradient(180deg, rgba(255, 187, 36, 0.1) 0%, rgba(255, 187, 36, 0) 100%);
  background: linear-gradient(180deg, rgba(255, 187, 36, 0.1) 0%, rgba(255, 187, 36, 0) 100%);
}

.grd-use, .grd-use-c > *{
  background: -webkit-linear-gradient(180deg, rgba(255, 64, 64, 0.1) 0%, rgba(255, 64, 64, 0) 100%);
  background: -moz-linear-gradient(180deg, rgba(255, 64, 64, 0.1) 0%, rgba(255, 64, 64, 0) 100%);
  background: -o-linear-gradient(180deg, rgba(255, 64, 64, 0.1) 0%, rgba(255, 64, 64, 0) 100%);
  background: linear-gradient(180deg, rgba(255, 64, 64, 0.1) 0%, rgba(255, 64, 64, 0) 100%);
}

.grd-unselect, .grd-unselect-c > *{
  background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.grd-3, .grd-3-c > *{
  background: -webkit-linear-gradient(180deg, rgba(245,155,43, .12) 0%, rgba(245,155,43, 0) 100%);
  background: -moz-linear-gradient(180deg, rgba(245,155,43, .12) 0%, rgba(245,155,43, 0) 100%);
  background: -o-linear-gradient(180deg, rgba(245,155,43, .12) 0%, rgba(245,155,43, 0) 100%);
  background: linear-gradient(180deg, rgba(245,155,43, .12) 0%, rgba(245,155,43, 0) 100%);
}

.grd-4, .grd-4-c > *{
  background: -webkit-linear-gradient(180deg, rgba(102,48,255, .12) 0%, rgba(102,48,255, 0) 100%);
  background: -moz-linear-gradient(180deg, rgba(102,48,255, .12) 0%, rgba(102,48,255, 0) 100%);
  background: -o-linear-gradient(180deg, rgba(102,48,255, .12) 0%, rgba(102,48,255, 0) 100%);
  background: linear-gradient(180deg, rgba(102,48,255, .12) 0%, rgba(102,48,255, 0) 100%);
}

.grd-bg1, .grd-bg1-c > *{
  background: rgba(250, 185, 23, .2);
  background: -moz-radial-gradient(
    circle,
    rgba(250, 185, 23, .2) 0%,
    rgba(222, 26, 134, 0) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(250, 185, 23, .2) 0%,
    rgba(222, 26, 134, 0) 100%
  );
  background: radial-gradient(
    circle,
    rgba(250, 185, 23, .2) 0%,
    rgba(222, 26, 134, 0) 100%
  );
}

.grd-bg2, .grd-bg2-c > *{
  background: rgba(77, 163, 251, .15);
  background: -moz-radial-gradient(
    circle,
    rgba(77, 163, 251, .15) 0%,
    rgba(155, 44, 240, 0) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(77, 163, 251, .15) 0%,
    rgba(155, 44, 240, 0) 100%
  );
  background: radial-gradient(
    circle,
    rgba(77, 163, 251, .15) 0%,
    rgba(155, 44, 240, 0) 100%
  );
}