@charset "utf-8";

@import url("font.css");
@import url("token.css");
@import url("form.css");
@import url("ui.css");

/* ==============================
    CSS Reset
============================== */

html, body {  
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var( --background-normal);
  color: var(--font-default-color);
  font-family: var(--font-base);
  font-size:var(--font-default-size);
  font-weight:var(--font-default-weight);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body, button, h1, h2, h3, h4, h5, table {
  color: inherit;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button {
    vertical-align: baseline;
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
    display: block
}

canvas,img,video {
  max-width: 100%;
}

img {
  display:block;
}

ol,ul,li {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: "";
    content: none
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input,
select,
textarea {
    box-sizing: border-box;
    font: inherit;
    -webkit-user-select: text;
}

a {
  color: inherit;
  background-color: #0000;
  text-decoration: none;
}

a:active,a:hover,a:visited,a:active {
    outline: 0;
    text-decoration: none;
    color:inherit;
}

button {
  background-color:transparent;
  outline: 0;
  border:0;
  border-radius: 0;
  cursor: pointer; 
  -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

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

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button,select {
    text-transform: none
}

button[disabled],input[disabled] {
    cursor: default
}

input::-ms-clear {
    display: none
}

[hidden] {display:none !important;}
[v-cloak] {display: none;}
.js-fade-in:not([data-fade-ready="true"]) {
    visibility: hidden !important;
    opacity: 0 !important;
}
.js-clip-path:not([data-clip-ready="true"]) {
    visibility: hidden !important;
}
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pc-only {display:block !important;}
.m-only,.mflex-only {display:none !important;}
.pc-inline {display:inline !important;}

@media screen and (max-width: 1024px) {
    .pc-only {display:none !important;}
    .m-only {display:block !important;}
    .mflex-only {display:flex !important;}
    .pc-inline {display:none !important;}
}



::selection {
    background: var(--secondary-normal);
    color: var(--white);
}

::-moz-selection {
    background: var(--secondary-normal);
    color: var(--white);
}

/* 스크롤바 설정*/
body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 6px;
}
body::-webkit-scrollbar-thumb {
  height: 10%;
  background: rgba(0,0,0,.5);
}
body::-webkit-scrollbar-track {
  background: var(--background-neutral)
}


/* ==============================
  Spacing Utilities
============================== */

.mt_2 { margin-top: var(--spacing-2) !important; }
.mt_4 { margin-top: var(--spacing-4) !important; }
.mt_6 { margin-top: var(--spacing-6) !important; }
.mt_8 { margin-top: var(--spacing-8) !important; }
.mt_10 { margin-top: var(--spacing-10) !important; }
.mt_12 { margin-top: var(--spacing-12) !important; }
.mt_14 { margin-top: var(--spacing-14) !important; }
.mt_16 { margin-top: var(--spacing-16) !important; }
.mt_18 { margin-top: var(--spacing-18) !important; }
.mt_20 { margin-top: var(--spacing-20) !important; }
.mt_22 { margin-top: var(--spacing-22) !important; }
.mt_24 { margin-top: var(--spacing-24) !important; }
.mt_26 { margin-top: var(--spacing-26) !important; }
.mt_28 { margin-top: var(--spacing-28) !important; }
.mt_30 { margin-top: var(--spacing-30) !important; }
.mt_32 { margin-top: var(--spacing-32) !important; }
.mt_34 { margin-top: var(--spacing-34) !important; }
.mt_36 { margin-top: var(--spacing-36) !important; }
.mt_38 { margin-top: var(--spacing-38) !important; }
.mt_40 { margin-top: var(--spacing-40) !important; }
.mt_42 { margin-top: var(--spacing-42) !important; }
.mt_44 { margin-top: var(--spacing-44) !important; }
.mt_46 { margin-top: var(--spacing-46) !important; }
.mt_48 { margin-top: var(--spacing-48) !important; }
.mt_50 { margin-top: var(--spacing-50) !important; }
.mt_52 { margin-top: var(--spacing-52) !important; }
.mt_54 { margin-top: var(--spacing-54) !important; }
.mt_56 { margin-top: var(--spacing-56) !important; }
.mt_58 { margin-top: var(--spacing-58) !important; }
.mt_60 { margin-top: var(--spacing-60) !important; }
.mt_62 { margin-top: var(--spacing-62) !important; }
.mt_64 { margin-top: var(--spacing-64) !important; }

.mr_2 { margin-right: var(--spacing-2) !important; }
.mr_4 { margin-right: var(--spacing-4) !important; }
.mr_6 { margin-right: var(--spacing-6) !important; }
.mr_8 { margin-right: var(--spacing-8) !important; }
.mr_10 { margin-right: var(--spacing-10) !important; }
.mr_12 { margin-right: var(--spacing-12) !important; }
.mr_14 { margin-right: var(--spacing-14) !important; }
.mr_16 { margin-right: var(--spacing-16) !important; }
.mr_18 { margin-right: var(--spacing-18) !important; }
.mr_20 { margin-right: var(--spacing-20) !important; }
.mr_22 { margin-right: var(--spacing-22) !important; }
.mr_24 { margin-right: var(--spacing-24) !important; }
.mr_26 { margin-right: var(--spacing-26) !important; }
.mr_28 { margin-right: var(--spacing-28) !important; }
.mr_30 { margin-right: var(--spacing-30) !important; }
.mr_32 { margin-right: var(--spacing-32) !important; }
.mr_34 { margin-right: var(--spacing-34) !important; }
.mr_36 { margin-right: var(--spacing-36) !important; }
.mr_38 { margin-right: var(--spacing-38) !important; }
.mr_40 { margin-right: var(--spacing-40) !important; }
.mr_42 { margin-right: var(--spacing-42) !important; }
.mr_44 { margin-right: var(--spacing-44) !important; }
.mr_46 { margin-right: var(--spacing-46) !important; }
.mr_48 { margin-right: var(--spacing-48) !important; }
.mr_50 { margin-right: var(--spacing-50) !important; }
.mr_52 { margin-right: var(--spacing-52) !important; }
.mr_54 { margin-right: var(--spacing-54) !important; }
.mr_56 { margin-right: var(--spacing-56) !important; }
.mr_58 { margin-right: var(--spacing-58) !important; }
.mr_60 { margin-right: var(--spacing-60) !important; }
.mr_62 { margin-right: var(--spacing-62) !important; }
.mr_64 { margin-right: var(--spacing-64) !important; }

.mb_2 { margin-bottom: var(--spacing-2) !important; }
.mb_4 { margin-bottom: var(--spacing-4) !important; }
.mb_6 { margin-bottom: var(--spacing-6) !important; }
.mb_8 { margin-bottom: var(--spacing-8) !important; }
.mb_10 { margin-bottom: var(--spacing-10) !important; }
.mb_12 { margin-bottom: var(--spacing-12) !important; }
.mb_14 { margin-bottom: var(--spacing-14) !important; }
.mb_16 { margin-bottom: var(--spacing-16) !important; }
.mb_18 { margin-bottom: var(--spacing-18) !important; }
.mb_20 { margin-bottom: var(--spacing-20) !important; }
.mb_22 { margin-bottom: var(--spacing-22) !important; }
.mb_24 { margin-bottom: var(--spacing-24) !important; }
.mb_26 { margin-bottom: var(--spacing-26) !important; }
.mb_28 { margin-bottom: var(--spacing-28) !important; }
.mb_30 { margin-bottom: var(--spacing-30) !important; }
.mb_32 { margin-bottom: var(--spacing-32) !important; }
.mb_34 { margin-bottom: var(--spacing-34) !important; }
.mb_36 { margin-bottom: var(--spacing-36) !important; }
.mb_38 { margin-bottom: var(--spacing-38) !important; }
.mb_40 { margin-bottom: var(--spacing-40) !important; }
.mb_42 { margin-bottom: var(--spacing-42) !important; }
.mb_44 { margin-bottom: var(--spacing-44) !important; }
.mb_46 { margin-bottom: var(--spacing-46) !important; }
.mb_48 { margin-bottom: var(--spacing-48) !important; }
.mb_50 { margin-bottom: var(--spacing-50) !important; }
.mb_52 { margin-bottom: var(--spacing-52) !important; }
.mb_54 { margin-bottom: var(--spacing-54) !important; }
.mb_56 { margin-bottom: var(--spacing-56) !important; }
.mb_58 { margin-bottom: var(--spacing-58) !important; }
.mb_60 { margin-bottom: var(--spacing-60) !important; }
.mb_62 { margin-bottom: var(--spacing-62) !important; }
.mb_64 { margin-bottom: var(--spacing-64) !important; }

.ml_2 { margin-left: var(--spacing-2) !important; }
.ml_4 { margin-left: var(--spacing-4) !important; }
.ml_6 { margin-left: var(--spacing-6) !important; }
.ml_8 { margin-left: var(--spacing-8) !important; }
.ml_10 { margin-left: var(--spacing-10) !important; }
.ml_12 { margin-left: var(--spacing-12) !important; }
.ml_14 { margin-left: var(--spacing-14) !important; }
.ml_16 { margin-left: var(--spacing-16) !important; }
.ml_18 { margin-left: var(--spacing-18) !important; }
.ml_20 { margin-left: var(--spacing-20) !important; }
.ml_22 { margin-left: var(--spacing-22) !important; }
.ml_24 { margin-left: var(--spacing-24) !important; }
.ml_26 { margin-left: var(--spacing-26) !important; }
.ml_28 { margin-left: var(--spacing-28) !important; }
.ml_30 { margin-left: var(--spacing-30) !important; }
.ml_32 { margin-left: var(--spacing-32) !important; }
.ml_34 { margin-left: var(--spacing-34) !important; }
.ml_36 { margin-left: var(--spacing-36) !important; }
.ml_38 { margin-left: var(--spacing-38) !important; }
.ml_40 { margin-left: var(--spacing-40) !important; }
.ml_42 { margin-left: var(--spacing-42) !important; }
.ml_44 { margin-left: var(--spacing-44) !important; }
.ml_46 { margin-left: var(--spacing-46) !important; }
.ml_48 { margin-left: var(--spacing-48) !important; }
.ml_50 { margin-left: var(--spacing-50) !important; }
.ml_52 { margin-left: var(--spacing-52) !important; }
.ml_54 { margin-left: var(--spacing-54) !important; }
.ml_56 { margin-left: var(--spacing-56) !important; }
.ml_58 { margin-left: var(--spacing-58) !important; }
.ml_60 { margin-left: var(--spacing-60) !important; }
.ml_62 { margin-left: var(--spacing-62) !important; }
.ml_64 { margin-left: var(--spacing-64) !important; }

.pt_2 { padding-top: var(--spacing-2) !important; }
.pt_4 { padding-top: var(--spacing-4) !important; }
.pt_6 { padding-top: var(--spacing-6) !important; }
.pt_8 { padding-top: var(--spacing-8) !important; }
.pt_10 { padding-top: var(--spacing-10) !important; }
.pt_12 { padding-top: var(--spacing-12) !important; }
.pt_14 { padding-top: var(--spacing-14) !important; }
.pt_16 { padding-top: var(--spacing-16) !important; }
.pt_18 { padding-top: var(--spacing-18) !important; }
.pt_20 { padding-top: var(--spacing-20) !important; }
.pt_22 { padding-top: var(--spacing-22) !important; }
.pt_24 { padding-top: var(--spacing-24) !important; }
.pt_26 { padding-top: var(--spacing-26) !important; }
.pt_28 { padding-top: var(--spacing-28) !important; }
.pt_30 { padding-top: var(--spacing-30) !important; }
.pt_32 { padding-top: var(--spacing-32) !important; }
.pt_34 { padding-top: var(--spacing-34) !important; }
.pt_36 { padding-top: var(--spacing-36) !important; }
.pt_38 { padding-top: var(--spacing-38) !important; }
.pt_40 { padding-top: var(--spacing-40) !important; }
.pt_42 { padding-top: var(--spacing-42) !important; }
.pt_44 { padding-top: var(--spacing-44) !important; }
.pt_46 { padding-top: var(--spacing-46) !important; }
.pt_48 { padding-top: var(--spacing-48) !important; }
.pt_50 { padding-top: var(--spacing-50) !important; }
.pt_52 { padding-top: var(--spacing-52) !important; }
.pt_54 { padding-top: var(--spacing-54) !important; }
.pt_56 { padding-top: var(--spacing-56) !important; }
.pt_58 { padding-top: var(--spacing-58) !important; }
.pt_60 { padding-top: var(--spacing-60) !important; }
.pt_62 { padding-top: var(--spacing-62) !important; }
.pt_64 { padding-top: var(--spacing-64) !important; }

.pr_2 { padding-right: var(--spacing-2) !important; }
.pr_4 { padding-right: var(--spacing-4) !important; }
.pr_6 { padding-right: var(--spacing-6) !important; }
.pr_8 { padding-right: var(--spacing-8) !important; }
.pr_10 { padding-right: var(--spacing-10) !important; }
.pr_12 { padding-right: var(--spacing-12) !important; }
.pr_14 { padding-right: var(--spacing-14) !important; }
.pr_16 { padding-right: var(--spacing-16) !important; }
.pr_18 { padding-right: var(--spacing-18) !important; }
.pr_20 { padding-right: var(--spacing-20) !important; }
.pr_22 { padding-right: var(--spacing-22) !important; }
.pr_24 { padding-right: var(--spacing-24) !important; }
.pr_26 { padding-right: var(--spacing-26) !important; }
.pr_28 { padding-right: var(--spacing-28) !important; }
.pr_30 { padding-right: var(--spacing-30) !important; }
.pr_32 { padding-right: var(--spacing-32) !important; }
.pr_34 { padding-right: var(--spacing-34) !important; }
.pr_36 { padding-right: var(--spacing-36) !important; }
.pr_38 { padding-right: var(--spacing-38) !important; }
.pr_40 { padding-right: var(--spacing-40) !important; }
.pr_42 { padding-right: var(--spacing-42) !important; }
.pr_44 { padding-right: var(--spacing-44) !important; }
.pr_46 { padding-right: var(--spacing-46) !important; }
.pr_48 { padding-right: var(--spacing-48) !important; }
.pr_50 { padding-right: var(--spacing-50) !important; }
.pr_52 { padding-right: var(--spacing-52) !important; }
.pr_54 { padding-right: var(--spacing-54) !important; }
.pr_56 { padding-right: var(--spacing-56) !important; }
.pr_58 { padding-right: var(--spacing-58) !important; }
.pr_60 { padding-right: var(--spacing-60) !important; }
.pr_62 { padding-right: var(--spacing-62) !important; }
.pr_64 { padding-right: var(--spacing-64) !important; }

.pb_2 { padding-bottom: var(--spacing-2) !important; }
.pb_4 { padding-bottom: var(--spacing-4) !important; }
.pb_6 { padding-bottom: var(--spacing-6) !important; }
.pb_8 { padding-bottom: var(--spacing-8) !important; }
.pb_10 { padding-bottom: var(--spacing-10) !important; }
.pb_12 { padding-bottom: var(--spacing-12) !important; }
.pb_14 { padding-bottom: var(--spacing-14) !important; }
.pb_16 { padding-bottom: var(--spacing-16) !important; }
.pb_18 { padding-bottom: var(--spacing-18) !important; }
.pb_20 { padding-bottom: var(--spacing-20) !important; }
.pb_22 { padding-bottom: var(--spacing-22) !important; }
.pb_24 { padding-bottom: var(--spacing-24) !important; }
.pb_26 { padding-bottom: var(--spacing-26) !important; }
.pb_28 { padding-bottom: var(--spacing-28) !important; }
.pb_30 { padding-bottom: var(--spacing-30) !important; }
.pb_32 { padding-bottom: var(--spacing-32) !important; }
.pb_34 { padding-bottom: var(--spacing-34) !important; }
.pb_36 { padding-bottom: var(--spacing-36) !important; }
.pb_38 { padding-bottom: var(--spacing-38) !important; }
.pb_40 { padding-bottom: var(--spacing-40) !important; }
.pb_42 { padding-bottom: var(--spacing-42) !important; }
.pb_44 { padding-bottom: var(--spacing-44) !important; }
.pb_46 { padding-bottom: var(--spacing-46) !important; }
.pb_48 { padding-bottom: var(--spacing-48) !important; }
.pb_50 { padding-bottom: var(--spacing-50) !important; }
.pb_52 { padding-bottom: var(--spacing-52) !important; }
.pb_54 { padding-bottom: var(--spacing-54) !important; }
.pb_56 { padding-bottom: var(--spacing-56) !important; }
.pb_58 { padding-bottom: var(--spacing-58) !important; }
.pb_60 { padding-bottom: var(--spacing-60) !important; }
.pb_62 { padding-bottom: var(--spacing-62) !important; }
.pb_64 { padding-bottom: var(--spacing-64) !important; }

.pl_2 { padding-left: var(--spacing-2) !important; }
.pl_4 { padding-left: var(--spacing-4) !important; }
.pl_6 { padding-left: var(--spacing-6) !important; }
.pl_8 { padding-left: var(--spacing-8) !important; }
.pl_10 { padding-left: var(--spacing-10) !important; }
.pl_12 { padding-left: var(--spacing-12) !important; }
.pl_14 { padding-left: var(--spacing-14) !important; }
.pl_16 { padding-left: var(--spacing-16) !important; }
.pl_18 { padding-left: var(--spacing-18) !important; }
.pl_20 { padding-left: var(--spacing-20) !important; }
.pl_22 { padding-left: var(--spacing-22) !important; }
.pl_24 { padding-left: var(--spacing-24) !important; }
.pl_26 { padding-left: var(--spacing-26) !important; }
.pl_28 { padding-left: var(--spacing-28) !important; }
.pl_30 { padding-left: var(--spacing-30) !important; }
.pl_32 { padding-left: var(--spacing-32) !important; }
.pl_34 { padding-left: var(--spacing-34) !important; }
.pl_36 { padding-left: var(--spacing-36) !important; }
.pl_38 { padding-left: var(--spacing-38) !important; }
.pl_40 { padding-left: var(--spacing-40) !important; }
.pl_42 { padding-left: var(--spacing-42) !important; }
.pl_44 { padding-left: var(--spacing-44) !important; }
.pl_46 { padding-left: var(--spacing-46) !important; }
.pl_48 { padding-left: var(--spacing-48) !important; }
.pl_50 { padding-left: var(--spacing-50) !important; }
.pl_52 { padding-left: var(--spacing-52) !important; }
.pl_54 { padding-left: var(--spacing-54) !important; }
.pl_56 { padding-left: var(--spacing-56) !important; }
.pl_58 { padding-left: var(--spacing-58) !important; }
.pl_60 { padding-left: var(--spacing-60) !important; }
.pl_62 { padding-left: var(--spacing-62) !important; }
.pl_64 { padding-left: var(--spacing-64) !important; }

@media screen and (max-width: 1024px) {
  :root {
    --spacing-2: calc(2 / var(--width) * var(--device-width));
    --spacing-4: calc(4 / var(--width) * var(--device-width));
    --spacing-6: calc(6 / var(--width) * var(--device-width));
    --spacing-8: calc(8 / var(--width) * var(--device-width));
    --spacing-10: calc(10 / var(--width) * var(--device-width));
    --spacing-12: calc(12 / var(--width) * var(--device-width));
    --spacing-14: calc(14 / var(--width) * var(--device-width));
    --spacing-16: calc(16 / var(--width) * var(--device-width));
    --spacing-18: calc(18 / var(--width) * var(--device-width));
    --spacing-20: calc(20 / var(--width) * var(--device-width));
    --spacing-22: calc(22 / var(--width) * var(--device-width));
    --spacing-24: calc(24 / var(--width) * var(--device-width));
    --spacing-26: calc(26 / var(--width) * var(--device-width));
    --spacing-28: calc(28 / var(--width) * var(--device-width));
    --spacing-30: calc(30 / var(--width) * var(--device-width));
    --spacing-32: calc(32 / var(--width) * var(--device-width));
    --spacing-34: calc(34 / var(--width) * var(--device-width));
    --spacing-36: calc(36 / var(--width) * var(--device-width));
    --spacing-38: calc(38 / var(--width) * var(--device-width));
    --spacing-40: calc(40 / var(--width) * var(--device-width));
    --spacing-42: calc(42 / var(--width) * var(--device-width));
    --spacing-44: calc(44 / var(--width) * var(--device-width));
    --spacing-46: calc(46 / var(--width) * var(--device-width));
    --spacing-48: calc(48 / var(--width) * var(--device-width));
    --spacing-50: calc(50 / var(--width) * var(--device-width));
    --spacing-52: calc(52 / var(--width) * var(--device-width));
    --spacing-54: calc(54 / var(--width) * var(--device-width));
    --spacing-56: calc(56 / var(--width) * var(--device-width));
    --spacing-58: calc(58 / var(--width) * var(--device-width));
    --spacing-60: calc(60 / var(--width) * var(--device-width));
    --spacing-62: calc(62 / var(--width) * var(--device-width));
    --spacing-64: calc(64 / var(--width) * var(--device-width));
  }
}