@charset "UTF-8";
.bg-primary {
  background-color: #293097;
}

.bg-secondary {
  background-color: #325FFF;
}

.bg-dark_blue {
  background-color: #1b1f53;
}

.bg-gray01 {
  background-color: #8d8d8d;
}

.bg-gray02 {
  background-color: #4f4f4f;
}

.bg-dark_gray01 {
  background-color: #2d2d2d;
}

.bg-dark_gray02 {
  background-color: #202020;
}

.bg-dark_gray03 {
  background-color: #111111;
}

.bg-white {
  background-color: #ffffff;
}

.bg-black {
  background-color: #000000;
}

.txt-primary {
  color: #293097;
}

.txt-secondary {
  color: #325FFF;
}

.txt-dark_blue {
  color: #1b1f53;
}

.txt-gray01 {
  color: #8d8d8d;
}

.txt-gray02 {
  color: #4f4f4f;
}

.txt-dark_gray01 {
  color: #2d2d2d;
}

.txt-dark_gray02 {
  color: #202020;
}

.txt-dark_gray03 {
  color: #111111;
}

.txt-white {
  color: #ffffff;
}

.txt-black {
  color: #000000;
}

.btn.basic {
  padding: 0 5rem;
  height: 5rem;
  line-height: 4.8rem;
  border: 1px solid;
  border-radius: 5rem;
  box-sizing: border-box;
  font-size: 1.8rem;
  font-weight: 600;
}

.btn.subscribe {
  padding: 0 3rem;
  height: 4rem;
  line-height: 3.8rem;
  border: 1px solid;
  border-radius: 4rem;
  box-sizing: border-box;
  font-size: 1.6rem;
  font-weight: 600;
}

.btn.primary {
  background: #ffffff;
  border-color: #293097;
  color: #293097;
}

.btn.white {
  background: #293097;
  border-color: #293097;
  color: #ffffff;
}

.btn.mono {
  background: transparent;
  border-color: #4f4f4f;
  color: #8d8d8d;
}

.btn.ra16 {
  border-radius: 1.6rem;
}

.btn.ra15 {
  border-radius: 1.5rem;
}

.btn.ra10 {
  border-radius: 1rem;
}

.btn.ra8 {
  border-radius: 0.8rem;
}

.btn.ra4 {
  border-radius: 0.4rem;
}

.icon.icon0::before {
  background: url(../images/@ico_icon.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 1.6rem;
  height: 1.6rem;
}

.icon.icon1::before {
  background: url(../images/btn_arrow-gray.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 3rem;
  height: 3rem;
}

.icon.icon2::before {
  background: url(../images/btn_arrow-white.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 3rem;
  height: 3rem;
}

.icon.icon3::before {
  background: url(../images/ico_system.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 3rem;
  height: 3rem;
}

.icon-nav.nav1::before {
  background: url(../images/icon-nav-1.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav2::before {
  background: url(../images/icon-nav-2.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav3::before {
  background: url(../images/icon-nav-3.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav4::before {
  background: url(../images/icon-nav-4.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav5::before {
  background: url(../images/icon-nav-5.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav6::before {
  background: url(../images/icon-nav-6.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav7::before {
  background: url(../images/icon-nav-7.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav8::before {
  background: url(../images/icon-nav-8.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav9::before {
  background: url(../images/icon-nav-9.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav10::before {
  background: url(../images/icon-nav-10.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav11::before {
  background: url(../images/icon-nav-11.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav12::before {
  background: url(../images/icon-nav-12.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav13::before {
  background: url(../images/icon-nav-13.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav14::before {
  background: url(../images/icon-nav-14.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav15::before {
  background: url(../images/icon-nav-15.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav16::before {
  background: url(../images/icon-nav-16.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav17::before {
  background: url(../images/icon-nav-17.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav18::before {
  background: url(../images/icon-nav-18.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav19::before {
  background: url(../images/icon-nav-19.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav20::before {
  background: url(../images/icon-nav-20.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav21::before {
  background: url(../images/icon-nav-21.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav22::before {
  background: url(../images/icon-nav-22.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav23::before {
  background: url(../images/icon-nav-23.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.icon-nav.nav24::before {
  background: url(../images/icon-nav-24.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}

.btn.icol1::before {
  background: url(../images/btn_arrow.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2rem;
  height: 2rem;
  margin-right: 0rem;
}

.btn.icol2::before {
  background: url(../images/circle_del_gray.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2rem;
  height: 2rem;
  margin-right: 0rem;
}

.btn.icol3::before {
  background: url(../images/btn_search.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2rem;
  height: 2rem;
  margin-right: 0rem;
}

.btn.icol4::before {
  background: url(../images/btn_del_bk.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0rem;
}

.btn.icor1::after {
  background: url(../images/btn_arrow.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2rem;
  height: 2rem;
  margin-left: 0rem;
}

.btn.icor2::after {
  background: url(../images/circle_del_gray.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2rem;
  height: 2rem;
  margin-left: 0rem;
}

.btn.icor3::after {
  background: url(../images/btn_search.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2rem;
  height: 2rem;
  margin-left: 0rem;
}

.btn.icor4::after {
  background: url(../images/btn_del_bk.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0rem;
}

.cicon.cico0::after {
  background: url(../images/card/card_none.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico1::after {
  background: url(../images/card/card_bc.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico2::after {
  background: url(../images/card/card_citi.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico3::after {
  background: url(../images/card/card_gwangju.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico4::after {
  background: url(../images/card/card_hana.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico5::after {
  background: url(../images/card/card_hyundai.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico6::after {
  background: url(../images/card/card_jeju.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico7::after {
  background: url(../images/card/card_jeonbuk.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico8::after {
  background: url(../images/card/card_kb.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico9::after {
  background: url(../images/card/card_lotte.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico10::after {
  background: url(../images/card/card_master.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico11::after {
  background: url(../images/card/card_nh.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico12::after {
  background: url(../images/card/card_samsung.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico13::after {
  background: url(../images/card/card_sinhan.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico14::after {
  background: url(../images/card/card_suhyup.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico15::after {
  background: url(../images/card/card_visa.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

.cicon.cico16::after {
  background: url(../images/card/card_woori.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 4rem;
  height: 4rem;
}

/* 반응형 처리 */
/* 플렉스박스 */
/* Reset */
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, nav, section, article, header, footer, main, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {
  margin: 0;
  padding: 0;
}

body, input, select, textarea, button, img, fieldset {
  border: none;
}

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

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

address, cite, code, em, i {
  font-style: normal; /*font-weight:normal;*/
}

label, img, input, select, textarea, button, a {
  vertical-align: middle;
}

u, ins, a {
  text-decoration: none;
  color: unset;
}

button {
  cursor: pointer;
  background-color: transparent;
  color: unset;
}

caption > div, legend, .hide {
  overflow: hidden;
  display: block;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Normalize */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

input[type=number],
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=date],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

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

img {
  width: 100%;
  height: auto;
  display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: "NotoSansKR";
  font-display: swap;
  src: url("../fonts/NotoSansKR-VariableFont_wght.ttf");
}
html {
  font-size: 10px;
  font-family: "NotoSansKR", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #000000;
  line-height: 1.4;
  word-break: keep-all;
}

body {
  font-size: 1rem;
}

* {
  font-family: "NotoSansKR", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.header {
  height: 9rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem;
}
.header .logo {
  display: inline-block;
}
.header .logo a img {
  width: 18.5rem;
  height: 1.6rem;
}
.header nav ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem;
  gap: 2.5rem;
}
.header nav ul li {
  position: relative;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  background: transparent;
  transition: 0.2s all;
  cursor: pointer;
}
.header nav ul li a,
.header nav ul li button {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  background: transparent;
  transition: 0.2s all;
}
.header nav ul li a:hover,
.header nav ul li button:hover {
  filter: drop-shadow(0 2px 4px rgb(255, 255, 255));
}
.header .lang {
  cursor: pointer;
  position: relative;
  padding: 3rem 0 3rem 2rem;
}
@media all and (max-width: 767px) {
  .header .lang {
    display: none;
  }
}
.header .lang .icon-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .lang .icon-nav::before {
  background: url(../images/ico_lang.svg) no-repeat;
  background-size: cover;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
}
.header .lang__depth {
  display: none;
  position: absolute;
  top: 8rem;
  right: -2.2rem;
  background-color: #f9fcff;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: column;
  padding: 1.6rem;
}
.header .lang__depth li + li {
  margin-top: 1.2rem;
}
.header .menu_pc {
  display: block;
  margin-left: 8rem;
}
@media all and (max-width: 767px) {
  .header .menu_pc {
    display: none;
  }
}
.header .menu_pc ul li a,
.header .menu_pc ul li button {
  transition: 0.2s all;
}
.header .menu_pc ul li a:active,
.header .menu_pc ul li button:active {
  opacity: 50%;
}
.header .menu_pc > ul > li {
  padding: 3rem 0;
}
.header .menu_mobile {
  display: none;
}
@media all and (max-width: 767px) {
  .header .menu_mobile {
    display: block;
  }
}
.header .whitepaper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0rem;
  display: none;
  position: absolute;
  top: 8rem;
  left: 0;
  padding: 1.6rem;
  border-radius: 1.2rem;
  background: #f9fcff;
}
@media all and (max-width: 1023px) {
  .header .whitepaper {
    position: relative;
  }
}
.header .whitepaper li:hover a {
  color: #293097;
}
.header .whitepaper li a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  position: relative;
  color: #8d8d8d;
  font-size: 1.4rem;
}
.header .whitepaper li a::after {
  content: "";
  background: url(../images/ico_download.svg) center center;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
}
.header .whitepaper li + li {
  margin-top: 1.2rem;
}

.mobile__lang {
  padding-top: 3rem;
}
.mobile__lang li {
  position: relative;
}
.mobile__lang li + li {
  padding-left: 2.8rem;
}
.mobile__lang li + li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 1.4rem;
  display: block;
  width: 1px;
  height: 1.4rem;
  background: #8d8d8d;
}

.mobile_whitepaper {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  margin-top: 1.2rem;
}
.mobile_whitepaper li a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  font-size: 1.4rem !important;
  color: #8d8d8d !important;
  position: relative;
  padding: 0.8rem 1.2rem;
  border: 1px solid #8d8d8d;
}
.mobile_whitepaper li a::after {
  content: "";
  background: url(../images/ico_download.svg) center center;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
}

.footer {
  background: #0f1020;
  padding: 5rem 0;
  color: #bcbcbc;
  font-size: 1.4rem;
}
@media all and (max-width: 767px) {
  .footer {
    font-size: 1.2rem;
    text-align: center;
  }
}
.footer_menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
}
@media all and (max-width: 767px) {
  .footer_menu {
    flex-direction: column;
    gap: 1.5rem;
  }
}
.footer .logo {
  display: block;
  width: 18rem;
}
@media all and (max-width: 767px) {
  .footer .logo {
    margin: 0 auto;
  }
}
.footer .sns {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem;
  gap: 3rem;
}
.footer .sns li a {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}
.footer .sns li a img {
  transition: 0.2s all;
}
.footer .sns li a:hover img {
  filter: brightness(4);
}
.footer .mailto {
  color: #888;
  margin-top: 2rem;
}
@media all and (max-width: 767px) {
  .footer .mailto {
    margin-top: 4rem;
  }
}
.footer .mailto > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
}
@media all and (max-width: 767px) {
  .footer .mailto > div {
    justify-content: center;
  }
}
.footer .mailto > div a {
  border-bottom: 1px solid #888;
}
.footer p {
  margin-top: 2rem;
}
.footer .align {
  margin-top: 2rem;
}
@media all and (max-width: 767px) {
  .footer .align {
    flex-direction: column;
  }
}
.footer .align .line {
  width: 0.1rem;
  height: 1.2rem;
  background: #888;
  margin: 0 1rem;
}
@media all and (max-width: 767px) {
  .footer .align .line {
    display: none;
  }
}
.footer .align span {
  color: #888;
}

.wrap {
  padding: 0 8rem;
}
@media all and (max-width: 1023px) {
  .wrap {
    padding: 0 6rem;
  }
}
@media all and (max-width: 767px) {
  .wrap {
    padding: 0 2rem;
  }
}

.container {
  width: 120rem;
  margin: 0 auto;
}
@media all and (max-width: 1279px) {
  .container {
    width: 100%;
  }
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
  flex-wrap: wrap;
}
@media all and (max-width: 1279px) {
  .row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0rem;
  }
}

.grid_6 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem;
  width: 50%;
}
@media all and (max-width: 1279px) {
  .grid_6 {
    width: 100%;
    height: auto;
  }
}

.grid_4 {
  width: 34rem;
  flex: 0 0 auto;
}
@media all and (max-width: 1279px) {
  .grid_4 {
    width: 41%;
  }
}
@media all and (max-width: 767px) {
  .grid_4 {
    width: 100%;
  }
}
.grid_4 .align {
  flex-direction: column;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}
.bg img {
  height: 100dvh;
  -o-object-fit: cover;
     object-fit: cover;
}
.bg video {
  width: 100vw;
  height: 100dvh;
  -o-object-fit: cover;
     object-fit: cover;
}
.bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.7);
}

.hero_title {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0rem;
  height: calc(100dvh - 9rem);
}
.hero_title > h2 {
  font-size: 2.6rem;
  font-weight: 700;
}
@media all and (max-width: 767px) {
  .hero_title > h2 {
    font-size: 1.6rem;
  }
}
.hero_title > img {
  width: auto;
  height: 5rem;
  margin-top: 2.5rem;
}
@media all and (max-width: 1023px) {
  .hero_title > img {
    height: 4.4rem;
  }
}
@media all and (max-width: 767px) {
  .hero_title > img {
    height: 2.4rem;
    margin-top: 2rem;
  }
}
.hero_title > p {
  font-size: 2rem;
  margin-top: 3.5rem;
}
@media all and (max-width: 1023px) {
  .hero_title > p {
    font-size: 1.8rem;
  }
}
@media all and (max-width: 767px) {
  .hero_title > p {
    font-size: 1.3rem;
    margin-top: 2.5rem;
  }
}
.hero_button {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  margin-top: 6rem;
}
@media all and (max-width: 767px) {
  .hero_button {
    margin-top: 4rem;
    gap: 0.8rem;
  }
}
.hero_button .btn.primary {
  padding: 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 700;
  height: 4rem;
}
@media all and (max-width: 767px) {
  .hero_button .btn.primary {
    padding: 0 0.8rem;
    font-size: 1.2rem;
    height: 3rem;
  }
}

.scroll_down {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 3rem;
  width: 5rem;
  height: 5rem;
  animation: down 2s infinite;
}
@media all and (max-width: 767px) {
  .scroll_down {
    width: 3rem;
    height: 3rem;
  }
}
@keyframes down {
  0% {
    transform: translate(-50%, -50%);
  }
  20% {
    transform: translate(-50%, 0);
  }
}

section {
  padding: 12rem 0;
}
@media all and (max-width: 767px) {
  section {
    padding: 8rem 0;
  }
}

/* 섹션01 */
.section01 {
  overflow: hidden;
  background: #f7f7f7;
  padding-bottom: 0;
}
.section01 .title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem;
  gap: 1rem;
  text-align: center;
}
.section01 .title > h3 {
  font-size: 2.8rem;
  line-height: 1.4;
}
@media all and (max-width: 767px) {
  .section01 .title > h3 {
    font-size: 2rem;
  }
}
.section01 .title span {
  margin-top: 1rem;
}
@media all and (max-width: 767px) {
  .section01 .title span {
    margin-top: 0.7rem;
  }
}

/* 섹션02 */
.section02 .nft_btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
}
@media all and (max-width: 767px) {
  .section02 .nft_btn {
    gap: 0.8rem;
    margin-top: 2.5rem;
  }
}

/* 섹션03 */
.section03 {
  background: #fffbfb;
}
.section03 .row {
  flex-wrap: nowrap;
}
.section03 .grid_6:nth-child(1) {
  order: 2;
  margin-left: 6rem;
}
@media all and (max-width: 1279px) {
  .section03 .grid_6:nth-child(1) {
    order: unset;
    margin-left: unset;
  }
}
@media all and (max-width: 1279px) {
  .section03 .grid_6:nth-child(2) {
    justify-content: center;
  }
}
.section03 .img_wrap {
  padding-top: 0rem;
}
@media all and (max-width: 1279px) {
  .section03 .img_wrap {
    padding-top: 8rem;
  }
}
@media all and (max-width: 767px) {
  .section03 .img_wrap {
    padding-top: 5rem;
  }
}

/* 섹션04 */
.section04 .row {
  gap: 6rem;
  flex-wrap: nowrap;
}
.section04 .grid_6:nth-child(2) {
  justify-content: flex-end;
}
.section04 .grid_6:nth-child(2) .title {
  order: 2;
}
.section04 .grid_6:nth-child(2) .img_wrap {
  order: 1;
}
.section04 .align {
  gap: 6rem;
}
@media all and (max-width: 1279px) {
  .section04 .align {
    gap: 4.5rem;
  }
}
@media all and (max-width: 767px) {
  .section04 .align {
    gap: 4rem;
  }
}

/* 섹션05 */
.section05 {
  background: #f9fcff;
}
.section05 .title {
  padding-bottom: 8rem;
}
@media all and (max-width: 767px) {
  .section05 .title {
    padding-bottom: 6rem;
  }
}
.section05 .row {
  row-gap: 6.5rem;
  align-items: flex-start;
}
@media all and (max-width: 1279px) {
  .section05 .row {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media all and (max-width: 767px) {
  .section05 .row {
    gap: 3.5rem;
  }
}

/* 섹션06 */
.section06 {
  background: #293097;
  overflow-x: hidden;
  padding-bottom: 0rem;
}
.section06 .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0rem;
  text-align: center;
  color: #ffffff;
}
.section06 .title h3 {
  font-size: 4rem;
  margin-top: 2rem;
}
@media all and (max-width: 767px) {
  .section06 .title h3 {
    font-size: 3rem;
    margin-top: 1.5rem;
  }
}
.section06 .title span {
  color: #c9d5ff;
  margin-top: 2rem;
}
@media all and (max-width: 767px) {
  .section06 .title span {
    margin-top: 1.5rem;
  }
}
.section06 .title .btn {
  padding: 2rem 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 3.5rem;
}
@media all and (max-width: 767px) {
  .section06 .title .btn {
    padding: 1.2rem 1.8rem;
    font-size: 1.2rem;
    margin-top: 3.5rem;
  }
}

/* 섹션07 */
.section07 {
  overflow: hidden;
}
.section07 .title {
  align-items: center;
}

main {
  display: flex;
  flex-direction: column;
}

.dimmed-white, .dimmed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  opacity: 50%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.dimmed {
  display: block;
  background: #000000;
}
.dimmed-white {
  display: block;
  background: #000000;
}

.privacy {
  background: #ffffff;
}

.privacy .container {
  width: 1300px;
}

@media (max-width: 1299px) {
  .privacy .container {
    width: 100%;
    padding: 0 20px;
  }
}
.privacy h2 {
  font-size: 36px;
  color: #1c1c1c;
  font-weight: 700;
  line-height: 1.2;
}

.terms-box + .terms-box {
  margin-top: 50px;
}

.terms-box h3 {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  border-bottom: 1px solid #d8d8d8;
}

.terms-box span {
  display: block;
  font-size: 14px;
  line-height: 20px;
}

.terms-box li {
  font-size: 14px;
  line-height: 24px;
  margin-top: 6px;
}

.terms-box .terms-description,
.terms-box .terms-description2 {
  word-break: break-all;
  color: var(--gray03);
  font-size: 18px;
  line-height: 27px;
  font-weight: 500;
}

.terms-box > ol,
.terms-box .terms-list-dep1 {
  padding-left: 20px;
}

.terms-box .terms-list-dep3,
.terms-box .terms-list-dep4 {
  padding-left: 15px;
}

.terms-box .terms-list-dep2 > li + li {
  margin-top: 10px;
}

.terms-box ol > li {
  list-style: decimal;
}

.terms-box ol > li > span {
  display: block;
  margin: 15px 0;
}

/* table */
.table-wrap {
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  min-width: 540px;
}

.table-wrap.table-scroll-none table {
  min-width: 100%;
}

.table-wrap.table-design-1 table tbody tr:first-child {
  border-top: 2px solid #f3617c;
}

.table-wrap.table-design-1 table tbody tr th {
  padding: 15px 30px;
  text-align: left;
  font-weight: 500;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.table-wrap.table-design-1 table tbody tr td {
  padding: 15px 30px;
  text-align: left;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.table-wrap.table-design-2 table thead tr th {
  padding: 15px 30px;
  text-align: center;
  font-weight: 500;
  border-top: 1px solid #d8d8d8;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #f4f4f4;
}

.table-wrap.table-design-2 table tbody tr td {
  padding: 15px 30px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.table-wrap.table-design-2 table thead th:last-child,
.table-wrap.table-design-2 table tbody tr td:last-child {
  border-right: 0;
}

.table-wrap.table-design-2.table-small table thead tr th,
.table-wrap.table-design-2.table-small table tbody tr td {
  padding: 12px;
  font-size: 14px;
  line-height: 21px;
}

.table-wrap.table-design-2.table-small table tbody tr td.background {
  background-color: #f4f4f4;
}

button:disabled {
  border-color: #ffffff !important;
  background-color: #ffffff !important;
  color: #ffffff !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 1rem;
  text-wrap: nowrap;
  transition: 0.2s all;
}
.btn.full {
  width: 100%;
}
@media all and (max-width: 767px) {
  .btn {
    border-radius: 0.6rem;
  }
}
.btn.app {
  width: 4rem;
  height: 4rem;
}
@media all and (max-width: 767px) {
  .btn.app {
    width: 3rem;
    height: 3rem;
  }
}
.btn.app img {
  width: 2.5rem;
  height: 2.5rem;
}
@media all and (max-width: 767px) {
  .btn.app img {
    width: 1.8rem;
    height: 1.8rem;
  }
}
.btn.nft {
  padding: 2rem 1.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}
@media all and (max-width: 767px) {
  .btn.nft {
    padding: 1.6rem 1.4rem;
    font-size: 1.1rem;
  }
}
.btn.top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0rem;
  position: fixed;
  right: 5rem;
  bottom: 5rem;
  z-index: 100;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.2rem;
  background: #1b1f53;
  transition: 0.2s all;
  transform: scale(0.5);
  opacity: 0;
}
@media all and (max-width: 767px) {
  .btn.top {
    width: 4rem;
    height: 4rem;
    right: 2rem;
    bottom: 1rem;
    border-radius: 0.6rem;
  }
}
.btn.top img {
  width: 2rem;
  height: 1.2rem;
}
@media all and (max-width: 767px) {
  .btn.top img {
    width: 1rem;
    height: 0.6rem;
  }
}
.btn.top:hover {
  filter: brightness(1.5);
}
.btn.top.active {
  transform: scale(1);
  opacity: 1;
}
.btn.app:hover, .btn.primary:hover {
  box-shadow: 0 5px 5px -5px rgba(255, 255, 255, 0.15), 0 10px 10px -5px rgba(255, 255, 255, 0.15), 0 15px 15px -5px rgba(255, 255, 255, 0.15), 0 20px 20px -5px rgba(255, 255, 255, 0.15);
}
.btn.white:hover {
  box-shadow: 0 5px 5px -5px rgba(41, 48, 151, 0.15), 0 10px 10px -5px rgba(41, 48, 151, 0.15), 0 15px 15px -5px rgba(41, 48, 151, 0.15), 0 20px 20px -5px rgba(41, 48, 151, 0.15);
}
.btn:active {
  transform: translateY(0.2rem);
}

.coverflow {
  position: relative;
}
.coverflow .frame {
  width: 29rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
@media all and (max-width: 767px) {
  .coverflow .frame {
    width: 13rem;
  }
}
.coverflow .mySwiper {
  width: 100%;
  height: 62rem;
  margin-top: 12rem;
  overflow: visible;
}
@media all and (max-width: 1279px) {
  .coverflow .mySwiper {
    transform: translateX(0) !important;
  }
}
@media all and (max-width: 1023px) {
  .coverflow .mySwiper {
    height: 60rem;
    margin-top: 10rem;
  }
}
@media all and (max-width: 767px) {
  .coverflow .mySwiper {
    height: 28rem;
    margin-top: 7rem;
  }
}
.coverflow .mySwiper .swiper-slide {
  width: 28rem;
  border-radius: 2rem;
  overflow: hidden;
  transform-origin: top;
  display: flex;
  align-items: center;
}
.coverflow .mySwiper .swiper-slide img {
  width: 24rem;
  height: 52rem;
  margin: 0 auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  cursor: pointer;
  border-radius: 2rem;
}
@media all and (max-width: 1023px) {
  .coverflow .mySwiper .swiper-slide img {
    width: 22rem;
    height: 48rem;
  }
}
@media all and (max-width: 767px) {
  .coverflow .mySwiper .swiper-slide img {
    width: 11rem;
    height: 23rem;
    border-radius: 1rem;
  }
}
@media all and (max-width: 767px) {
  .coverflow .mySwiper .swiper-slide {
    width: 12rem;
  }
}
.coverflow .mySwiper .swiper-slide-active {
  max-height: 58rem;
  transform-origin: top;
  height: -moz-min-content;
  height: min-content;
  border-radius: 4rem;
}
@media all and (max-width: 767px) {
  .coverflow .mySwiper .swiper-slide-active {
    height: 28rem;
    border-radius: 2rem;
  }
}
.coverflow .mySwiper .swiper-slide-active img {
  width: 100%;
  height: auto !important;
  margin-bottom: auto;
}
@media all and (max-width: 767px) {
  .break_lg {
    display: none;
  }
}

@media all and (max-width: 767px) and (min-width: 1024px) {
  .break_md {
    display: none;
  }
}

@media all and (min-width: 768px) {
  .break_mo {
    display: none;
  }
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.img_wrap {
  width: 44rem;
}
.img_wrap.sm {
  width: 39.8rem;
}
@media all and (max-width: 767px) {
  .img_wrap {
    width: 28.8rem;
  }
  .img_wrap.sm {
    width: 28.8rem;
  }
}

.tab {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem;
}
.tab li button {
  position: relative;
  font-size: 2rem;
  font-weight: 700;
  color: #293097;
  transition: 0.15s all;
}
.tab li button.active {
  font-weight: 900;
}
.tab li button.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 100%;
  height: 0.5rem;
  background: #293097;
}
@media all and (max-width: 767px) {
  .tab li button {
    font-size: 1.6rem;
  }
  .tab li button.active::after {
    height: 0.4rem;
  }
}
.tab li .dot {
  margin: 0 1.4rem;
  width: 0.4rem;
  height: 0.4rem;
  background-color: #293097;
  border-radius: 10rem;
}
@media all and (max-width: 767px) {
  .tab li .dot {
    margin: 0 1.2rem;
  }
}
.tab_content {
  display: none;
}
.tab_content.active {
  display: block;
}
.tab_content span {
  margin-top: 3rem;
}
@media all and (max-width: 767px) {
  .tab_content span {
    margin-top: 2rem;
  }
}
.tab_radio {
  width: 1.9rem;
  height: 1.9rem;
  background: #ffffff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 1px solid #d6d6d6;
  border-radius: 10rem;
  transition: 0.15s all ease-in-out;
}
@media all and (min-width: 768px) {
  .tab_radio {
    display: none;
  }
}
.tab_radio:checked {
  border: 6px solid #293097;
  outline: 0;
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
.title_sub {
  font-size: 1.6rem;
  font-weight: 900;
  color: #293097;
  text-transform: uppercase;
}
@media all and (max-width: 767px) {
  .title_sub {
    font-size: 1.4rem;
  }
}
.title h3 {
  font-size: 4rem;
  font-weight: 700;
}
@media all and (max-width: 767px) {
  .title h3 {
    font-size: 3rem;
  }
}
.title h3 > b {
  color: #293097;
  font-weight: 700;
}
.title span {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 1rem;
}
@media all and (max-width: 767px) {
  .title span {
    font-size: 1.5rem;
  }
}
@media all and (max-width: 767px) and (max-width: 767px) {
  .title span {
    margin-top: 0.7rem;
  }
}
.title_logo {
  height: 2rem;
}
@media all and (max-width: 767px) {
  .title_logo {
    height: 1.5rem;
  }
}

.keyframe {
  position: relative;
  width: 53.8rem;
  height: 52rem;
  margin-left: auto;
}
@media all and (max-width: 1279px) {
  .keyframe {
    margin: 0 auto;
    margin-top: 8rem;
  }
}
@media all and (max-width: 767px) {
  .keyframe {
    width: 28rem;
    height: 27rem;
    margin-top: 6rem;
  }
}
.keyframe div {
  position: absolute;
  border-radius: 1rem;
  filter: drop-shadow(-4px 4px 6px rgba(0, 0, 0, 0.25));
}
.keyframe_img00 {
  background: url(../images/img_keyframe00.png) no-repeat center center/cover;
  width: 25rem;
  height: 25rem;
  top: 10.5rem;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  animation: up00 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes up00 {
  0% {
    transform: translateX(-50%) translateY(-0.4rem);
    -webkit-mask-position: 0 0;
  }
  50% {
    transform: translateX(-50%) translateY(0.4rem);
    -webkit-mask-position: 100% 0;
  }
  100% {
    transform: translateX(-50%) translateY(-0.4rem);
    -webkit-mask-position: 0 0;
  }
}
.keyframe_img00::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skew(330deg);
  animation: shine 4s linear infinite;
}
@keyframes shine {
  20%, 100% {
    left: 100%;
    opacity: 0;
  }
  0% {
    opacity: 0;
  }
  10% {
    left: 25%;
    opacity: 1;
  }
}
@media all and (max-width: 767px) {
  .keyframe_img00 {
    width: 13rem;
    height: 13rem;
    top: 5.5rem;
  }
}
.keyframe_img01 {
  background: url(../images/img_keyframe01.png) no-repeat center center/cover;
  width: 15.6rem;
  height: 15.5rem;
  top: 2.7rem;
  left: 3.1rem;
  animation: down01 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes down01 {
  0% {
    transform: translateY(0.5rem);
  }
  50% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0.5rem);
  }
}
@media all and (max-width: 767px) {
  .keyframe_img01 {
    width: 8rem;
    height: 8rem;
    top: 1.4rem;
    left: 1.6rem;
  }
}
.keyframe_img02 {
  background: url(../images/img_keyframe02.png) no-repeat center center/cover;
  width: 21.2rem;
  height: 21.2rem;
  left: 0;
  bottom: 5.3rem;
  z-index: -1;
  animation: up01 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes up01 {
  0% {
    transform: translateY(-0.4rem);
  }
  50% {
    transform: translateY(0.4rem);
  }
  100% {
    transform: translateY(-0.4rem);
  }
}
@media all and (max-width: 767px) {
  .keyframe_img02 {
    width: 11rem;
    height: 11rem;
    bottom: 2.7rem;
  }
}
.keyframe_img03 {
  background: url(../images/img_keyframe03.png) no-repeat center center/cover;
  width: 18.9rem;
  height: 18.9rem;
  bottom: 0;
  right: 1.9rem;
  z-index: -1;
  animation: down01 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@media all and (max-width: 767px) {
  .keyframe_img03 {
    width: 9.8rem;
    height: 9.8rem;
    right: 1rem;
  }
}
.keyframe_img04 {
  background: url(../images/img_keyframe04.png) no-repeat center center/cover;
  width: 11.4rem;
  height: 11.4rem;
  right: 0;
  top: 17.4rem;
  animation: up01 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@media all and (max-width: 767px) {
  .keyframe_img04 {
    width: 5.8rem;
    height: 5.8rem;
    top: 9.1rem;
  }
}
.keyframe_img05 {
  background: url(../images/img_keyframe05.png) no-repeat center center/cover;
  width: 8.5rem;
  height: 8.5rem;
  top: 0;
  right: 4.8rem;
  animation: down01 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@media all and (max-width: 767px) {
  .keyframe_img05 {
    width: 4.4rem;
    height: 4.4rem;
    right: 2.5rem;
  }
}

.service {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0rem;
}
@media all and (max-width: 767px) {
  .service {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0rem;
    gap: 1.5rem;
  }
}
.service_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0rem;
  width: 10rem;
  height: 10rem;
  border-radius: 2rem;
  background: #62689d;
}
@media all and (max-width: 767px) {
  .service_box {
    width: 6rem;
    height: 6rem;
    border-radius: 1.5rem;
  }
}
.service_box img {
  width: 5rem;
  height: 5rem;
}
@media all and (max-width: 767px) {
  .service_box img {
    width: 3rem;
    height: 3rem;
  }
}
.service p {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 2rem;
}
@media all and (max-width: 767px) {
  .service p {
    font-size: 1.6rem;
    margin-top: 0;
  }
}
.service span {
  font-size: 1.6rem;
  font-weight: 500;
  color: #6d6d6d;
  margin-top: 1.5rem;
}
@media all and (max-width: 767px) {
  .service span {
    font-size: 1.2rem;
    margin-top: 1rem;
  }
}
.service .preparing {
  font-size: 1.4rem;
  margin-top: 1.5rem;
}
@media all and (max-width: 767px) {
  .service .preparing {
    font-size: 1.1rem;
    margin-top: 1rem;
  }
}

.marquee {
  position: relative;
  width: 100vw;
}
.marquee.partners {
  display: flex;
  gap: 2rem;
  margin-top: 8rem;
  transform: translateX(-15%);
}
@media all and (max-width: 1023px) {
  .marquee.partners {
    margin-top: 4rem;
  }
}
.marquee.partners .marquee_track {
  gap: 2rem;
  margin-top: 0;
}
.marquee.partners .marquee_track img {
  width: 15.4rem;
  height: auto;
}
.marquee.partners .marquee_track.reverse {
  animation-duration: 120s;
}
.marquee_track {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
  transform: translateX(-90%);
  animation: marque 60s linear infinite;
}
@keyframes marque {
  0% {
    transform: translateX(-90%);
  }
  100% {
    transform: translateX(0);
  }
}
.marquee_track img {
  width: 30.3rem;
  height: 17.5rem;
}
@media all and (max-width: 1023px) {
  .marquee_track img {
    width: 17.4rem;
    height: 10rem;
  }
}
.marquee_track.reverse {
  transform: translateX(0);
  animation: marqueeReverse 60s linear infinite;
}
@keyframes marqueeReverse {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee_track:nth-child(1) {
  margin-top: 9rem;
}
@media all and (max-width: 1023px) {
  .marquee_track:nth-child(1) {
    margin-top: 6rem;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100dvh;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.modal_dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 93rem;
  height: 100%;
  max-height: 80rem;
  border-radius: 2rem;
  z-index: 200;
  background: #ffffff;
  overflow: hidden;
}
@media all and (max-width: 767px) {
  .modal_dialog {
    max-width: 90%;
    max-height: 60rem;
    flex-direction: column;
  }
}
.modal_header {
  width: 100%;
  max-width: 33rem;
  height: 100%;
  background: #f7f9fa;
  flex: unset;
}
@media all and (max-width: 767px) {
  .modal_header {
    max-width: 100%;
    flex: 1;
  }
}
.modal_content {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  padding: 2rem;
}
.modal_content p {
  font-size: 1.4rem;
}
.modal_close {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: url(../images/ico_close.svg) no-repeat center center;
  background-size: 2rem 2rem;
  cursor: pointer;
}
@media all and (max-width: 767px) {
  .modal_close {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 199;
}
.modal .tab {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  height: -webkit-fill-available;
  padding: 2rem;
}
@media all and (max-width: 767px) {
  .modal .tab {
    padding: 5.5rem 1.5rem 1.5rem 1.5rem;
  }
}
.modal .tab li {
  width: 100%;
}
.modal .tab li > div {
  display: block;
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
  background: #474747;
  transition: 0.2s all;
  cursor: pointer;
}
.modal .tab li > div.active::after {
  content: none;
}
.modal .tab li > div.active .tab_header {
  background: #293097;
}
@media all and (max-width: 767px) {
  .modal .tab li > div.active .tab_header {
    background: #eff4ff;
  }
}
@media all and (max-width: 767px) {
  .modal .tab li > div.active .tab_header p {
    color: #293097;
  }
}
@media all and (max-width: 767px) {
  .modal .tab li > div.active {
    outline: 2px solid #293097;
  }
}
@media all and (max-width: 767px) {
  .modal .tab li > div {
    background: #fff;
    outline: 1px solid #d6d6d6;
    border-radius: 1rem;
  }
}
.modal .tab li:nth-child(1) .tab_image {
  transform: rotateZ(8deg);
}
@media all and (max-width: 767px) {
  .modal .tab li:nth-child(1) .tab_image {
    transform: rotateZ(0);
  }
}
.modal .tab_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 0rem;
  padding: 2rem;
  height: 13.8rem;
}
@media all and (max-width: 767px) {
  .modal .tab_header {
    padding: 1.2rem 2rem;
    height: auto;
    align-items: center;
  }
}
.modal .tab_content {
  height: -webkit-fill-available;
  overflow: auto;
}
.modal .tab_content::-webkit-scrollbar {
  width: 0.4rem;
}
.modal .tab_content::-webkit-scrollbar-thumb {
  background-color: rgba(71, 71, 71, 0.4);
  border-radius: 10rem;
}
.modal .tab_content::-webkit-scrollbar-track {
  background-color: #fcfcfc;
}
.modal .tab_content.active {
  display: block;
}
@media all and (max-width: 767px) {
  .modal .tab_content {
    height: 100%;
  }
}
.modal .tab_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0rem;
  text-align: left;
  color: #ffffff;
}
@media all and (max-width: 767px) {
  .modal .tab_title {
    color: #6e6e6e;
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
  }
}
.modal .tab_title p {
  font-size: 2rem;
  font-weight: 700;
}
@media all and (max-width: 767px) {
  .modal .tab_title p {
    font-size: 1.4rem;
    font-weight: 500;
  }
}
.modal .tab_title span {
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 1rem;
}
@media all and (max-width: 767px) {
  .modal .tab_title span {
    display: none;
  }
}
.modal .tab_image {
  width: 6rem;
  height: 6rem;
  margin-top: auto;
}
@media all and (max-width: 767px) {
  .modal .tab_image {
    width: 3rem;
    height: 3rem;
    margin-top: unset;
  }
}
.modal .empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  height: 100%;
}
.modal .empty_character {
  width: 13rem;
  height: 13rem;
}
.modal .empty p {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
@media all and (max-width: 767px) {
  .modal .empty p {
    font-size: 1.6rem;
  }
}

#modal01 {
  display: none;
}

#modal03 {
  /* 로드맵 모달 */
  max-width: 100%;
  max-height: unset;
  border-radius: 0;
  background: transparent;
  z-index: 201;
}
#modal03:has(.roadmap) .roadmap {
  padding: 0;
}
#modal03 .modal_close {
  background: url(../images/ico_close_wt.svg) no-repeat center center;
}

#modal04 {
  /* 모바일 메뉴 */
  max-width: 100%;
  max-height: unset;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: 0.2s all;
}
#modal04 .mobile_menu_list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 8rem;
}
#modal04 .mobile_menu_list li {
  text-align: right;
}
#modal04 .mobile_menu_list li a,
#modal04 .mobile_menu_list li button {
  color: #ffffff;
  font-size: 4rem;
  font-weight: 700;
}
#modal04 .modal_close {
  background: url(../images/ico_close_wt.svg) no-repeat center center;
  width: 2rem;
  height: 2rem;
  top: 3rem;
}
#modal04 ~ .modal_bg {
  background: rgba(0, 0, 0, 0.8);
}

.roadmap_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}
@media all and (max-width: 1279px) {
  .roadmap_wrap {
    align-items: flex-start;
  }
}
.roadmap_wrap > ::after {
  content: "";
  position: absolute;
  top: -1rem;
  right: 2.8%; /* 아이콘으로 덮히는 부분 .2% 제외함 */
  background: url(../images/ico_roadmap_arrow.svg) no-repeat center center;
  width: 1.4rem;
  height: 2.4rem;
}
@media all and (max-width: 1279px) {
  .roadmap_wrap > ::after {
    top: unset;
    right: unset;
    left: 4.4rem;
    bottom: 1.4%;
    transform: rotate(90deg);
  }
}
@media all and (max-width: 767px) {
  .roadmap_wrap > ::after {
    left: 2.4rem;
  }
}
.roadmap_wrap > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0rem;
  gap: 7rem;
  padding: 0 7rem;
  position: relative;
}
@media all and (max-width: 767px) {
  .roadmap_wrap > ul {
    gap: 6rem;
  }
}
.roadmap_wrap > ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 97%;
  height: 0.3rem;
  background: #325FFF;
}
@media all and (max-width: 1279px) {
  .roadmap_wrap > ul::before {
    width: 0.3rem;
    height: 98%;
    left: 5rem;
  }
}
@media all and (max-width: 767px) {
  .roadmap_wrap > ul::before {
    left: 3rem;
  }
}
@media all and (max-width: 1279px) {
  .roadmap_wrap > ul {
    flex-direction: column;
    padding: 5rem;
  }
}
@media all and (max-width: 767px) {
  .roadmap_wrap > ul {
    padding: 5rem 3rem;
  }
}
.roadmap_bg {
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7) 100%, rgba(0, 0, 0, 0.7) 100%), url(../images/img_bg_roadmap.jpg) no-repeat top center;
  background-size: cover;
  z-index: -1;
}
.roadmap_list {
  position: relative;
  color: #ffffff;
  padding-top: 3rem;
  flex: 1;
}
@media all and (max-width: 1279px) {
  .roadmap_list {
    padding-top: 0;
    padding-left: 2.5rem;
  }
}
.roadmap_list::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  background: #325FFF;
  border-radius: 100rem;
}
@media all and (max-width: 1279px) {
  .roadmap_list::before {
    top: 0;
    left: -0.9rem;
  }
}
.roadmap_list .on {
  color: #325FFF;
}
.roadmap_list .on::before {
  content: "";
  position: absolute;
  top: -1.8rem;
  left: -2rem;
  width: 4rem;
  height: 4rem;
  background: #325FFF;
  opacity: 0.5;
  border-radius: 100rem;
}
@media all and (max-width: 1279px) {
  .roadmap_list .on::before {
    top: -1rem;
    left: -1.9rem;
  }
}
.roadmap_list p {
  font-size: 2.6rem;
  font-weight: 700;
}
@media all and (max-width: 767px) {
  .roadmap_list p {
    font-size: 1.8rem;
  }
}
.roadmap_list strong {
  font-size: 4rem;
  font-weight: 700;
}
@media all and (max-width: 767px) {
  .roadmap_list strong {
    font-size: 2.6rem;
  }
}
.roadmap_list ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0rem;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media all and (max-width: 767px) {
  .roadmap_list ul {
    gap: 1rem;
  }
}
.roadmap_list ul li {
  font-size: 2rem;
}
@media all and (max-width: 767px) {
  .roadmap_list ul li {
    font-size: 1.4rem;
  }
}

/* text */
.word {
  word-break: break-all;
}

.txt {
  display: inline-block;
}
.txt-24 {
  font-size: 2.4rem;
}
.txt-18 {
  font-size: 1.8rem;
}
.txt-16 {
  font-size: 1.6rem;
}
.txt-14 {
  font-size: 1.4rem;
}
.txt-13 {
  font-size: 1.3rem;
}
.txt-12 {
  font-size: 1.2rem;
}
.txt-underline {
  text-decoration: underline;
}

.fs-24 {
  font-size: 2.4rem;
}

.black {
  font-weight: 900;
}

.bold {
  font-weight: 700;
}

.smbold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 140%;
}

.ellipsis2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 140%;
}

.ellipsis3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 140%;
}

.ellipsis1 {
  display: block;
}

/* align */
.align {
  display: flex;
}
.align.inline {
  display: inline-flex;
}
.align.right {
  justify-content: flex-end;
}
.align.center {
  justify-content: center;
}
.align.both {
  justify-content: space-between;
}
.align.bottom {
  position: fixed;
  left: 2rem;
  right: 2rem;
  bottom: 3rem;
}
.align.f-wrap {
  flex-wrap: wrap;
}
.align.col {
  flex-direction: column;
}
.align.vt {
  align-items: flex-start;
}
.align.vm {
  align-items: center;
}
.align.vb {
  align-items: flex-end;
}
.align.triple {
  display: block;
  position: relative;
}
.align.triple::after {
  content: "";
  display: block;
  clear: both;
}
.align.triple .left {
  float: left;
}
.align.triple .right {
  float: right;
}
.align.triple .center {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.align.triple .bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.align-btn {
  display: flex;
  gap: 1rem;
}
.align-btn .btn {
  flex: 1;
}
.align.gap5 {
  gap: 0.5rem;
}
.align.gap10 {
  gap: 1rem;
}
.align.gap15 {
  gap: 1.5rem;
}

.txt_left {
  text-align: left !important;
}
.txt_center {
  text-align: center !important;
}
.txt_right {
  text-align: right !important;
}

.flex {
  display: flex;
}
.flex > * {
  flex: 1;
}
.flex.none {
  flex: none;
}

.mt0 {
  margin-top: 0rem;
}
.mt2 {
  margin-top: 0.2rem;
}
.mt3 {
  margin-top: 0.3rem;
}
.mt4 {
  margin-top: 0.4rem;
}
.mt5 {
  margin-top: 0.5rem;
}
.mt6 {
  margin-top: 0.6rem;
}
.mt8 {
  margin-top: 0.8rem;
}
.mt10 {
  margin-top: 1rem;
}
.mt12 {
  margin-top: 1.2rem;
}
.mt14 {
  margin-top: 1.4rem;
}
.mt15 {
  margin-top: 1.5rem;
}
.mt16 {
  margin-top: 1.6rem;
}
.mt18 {
  margin-top: 1.8rem;
}
.mt20 {
  margin-top: 2rem;
}
.mt22 {
  margin-top: 2.2rem;
}
.mt24 {
  margin-top: 2.4rem;
}
.mt25 {
  margin-top: 2.5rem;
}
.mt26 {
  margin-top: 2.6rem;
}
.mt28 {
  margin-top: 2.8rem;
}
.mt30 {
  margin-top: 3rem;
}
.mt32 {
  margin-top: 3.2rem;
}
.mt34 {
  margin-top: 3.4rem;
}
.mt36 {
  margin-top: 3.6rem;
}
.mt38 {
  margin-top: 3.8rem;
}
.mt40 {
  margin-top: 4rem;
}
.mt46 {
  margin-top: 4.6rem;
}
.mt48 {
  margin-top: 4.8rem;
}
.mt50 {
  margin-top: 5rem;
}
.mt60 {
  margin-top: 6rem;
}
.mt70 {
  margin-top: 7rem;
}
.mt80 {
  margin-top: 8rem;
}
.mt90 {
  margin-top: 9rem;
}
.mt100 {
  margin-top: 10rem;
}
.mt120 {
  margin-top: 12rem;
}
.mt140 {
  margin-top: 14rem;
}
.mt160 {
  margin-top: 16rem;
}
.mt180 {
  margin-top: 18rem;
}
.mt200 {
  margin-top: 20rem;
}
.mt_responsive_sm {
  margin-top: 2rem;
}
@media all and (max-width: 767px) {
  .mt_responsive_sm {
    margin-top: 1rem;
  }
}
.mt_responsive_lg {
  margin-top: 8rem;
}
@media all and (max-width: 1023px) {
  .mt_responsive_lg {
    margin-top: 4rem;
  }
}
@media all and (max-width: 767px) {
  .mt_responsive_lg {
    margin-top: 3rem;
  }
}

.mb0 {
  margin-bottom: 0rem;
}
.mb2 {
  margin-bottom: 0.2rem;
}
.mb3 {
  margin-bottom: 0.3rem;
}
.mb4 {
  margin-bottom: 0.4rem;
}
.mb5 {
  margin-bottom: 0.5rem;
}
.mb6 {
  margin-bottom: 0.6rem;
}
.mb8 {
  margin-bottom: 0.8rem;
}
.mb10 {
  margin-bottom: 1rem;
}
.mb12 {
  margin-bottom: 1.2rem;
}
.mb14 {
  margin-bottom: 1.4rem;
}
.mb15 {
  margin-bottom: 1.5rem;
}
.mb16 {
  margin-bottom: 1.6rem;
}
.mb18 {
  margin-bottom: 1.8rem;
}
.mb20 {
  margin-bottom: 2rem;
}
.mb22 {
  margin-bottom: 2.2rem;
}
.mb24 {
  margin-bottom: 2.4rem;
}
.mb25 {
  margin-bottom: 2.5rem;
}
.mb26 {
  margin-bottom: 2.6rem;
}
.mb28 {
  margin-bottom: 2.8rem;
}
.mb30 {
  margin-bottom: 3rem;
}
.mb32 {
  margin-bottom: 3.2rem;
}
.mb34 {
  margin-bottom: 3.4rem;
}
.mb36 {
  margin-bottom: 3.6rem;
}
.mb38 {
  margin-bottom: 3.8rem;
}
.mb40 {
  margin-bottom: 4rem;
}
.mb46 {
  margin-bottom: 4.6rem;
}
.mb48 {
  margin-bottom: 4.8rem;
}
.mb50 {
  margin-bottom: 5rem;
}
.mb60 {
  margin-bottom: 6rem;
}
.mb70 {
  margin-bottom: 7rem;
}
.mb80 {
  margin-bottom: 8rem;
}
.mb90 {
  margin-bottom: 9rem;
}
.mb100 {
  margin-bottom: 10rem;
}
.mb120 {
  margin-bottom: 12rem;
}
.mb140 {
  margin-bottom: 14rem;
}
.mb160 {
  margin-bottom: 16rem;
}
.mb180 {
  margin-bottom: 18rem;
}
.mb200 {
  margin-bottom: 20rem;
}

.ml0 {
  margin-left: 0rem;
}
.ml2 {
  margin-left: 0.2rem;
}
.ml3 {
  margin-left: 0.3rem;
}
.ml4 {
  margin-left: 0.4rem;
}
.ml5 {
  margin-left: 0.5rem;
}
.ml6 {
  margin-left: 0.6rem;
}
.ml8 {
  margin-left: 0.8rem;
}
.ml10 {
  margin-left: 1rem;
}
.ml12 {
  margin-left: 1.2rem;
}
.ml14 {
  margin-left: 1.4rem;
}
.ml15 {
  margin-left: 1.5rem;
}
.ml16 {
  margin-left: 1.6rem;
}
.ml18 {
  margin-left: 1.8rem;
}
.ml20 {
  margin-left: 2rem;
}
.ml22 {
  margin-left: 2.2rem;
}
.ml24 {
  margin-left: 2.4rem;
}
.ml25 {
  margin-left: 2.5rem;
}
.ml26 {
  margin-left: 2.6rem;
}
.ml28 {
  margin-left: 2.8rem;
}
.ml30 {
  margin-left: 3rem;
}
.ml32 {
  margin-left: 3.2rem;
}
.ml34 {
  margin-left: 3.4rem;
}
.ml36 {
  margin-left: 3.6rem;
}
.ml38 {
  margin-left: 3.8rem;
}
.ml40 {
  margin-left: 4rem;
}
.ml46 {
  margin-left: 4.6rem;
}
.ml48 {
  margin-left: 4.8rem;
}
.ml50 {
  margin-left: 5rem;
}
.ml60 {
  margin-left: 6rem;
}
.ml70 {
  margin-left: 7rem;
}
.ml80 {
  margin-left: 8rem;
}
.ml90 {
  margin-left: 9rem;
}
.ml100 {
  margin-left: 10rem;
}
.ml120 {
  margin-left: 12rem;
}
.ml140 {
  margin-left: 14rem;
}
.ml160 {
  margin-left: 16rem;
}
.ml180 {
  margin-left: 18rem;
}
.ml200 {
  margin-left: 20rem;
}

.mr0 {
  margin-right: 0rem;
}
.mr2 {
  margin-right: 0.2rem;
}
.mr3 {
  margin-right: 0.3rem;
}
.mr4 {
  margin-right: 0.4rem;
}
.mr5 {
  margin-right: 0.5rem;
}
.mr6 {
  margin-right: 0.6rem;
}
.mr7 {
  margin-right: 0.7rem;
}
.mr8 {
  margin-right: 0.8rem;
}
.mr10 {
  margin-right: 1rem;
}
.mr12 {
  margin-right: 1.2rem;
}
.mr14 {
  margin-right: 1.4rem;
}
.mr15 {
  margin-right: 1.5rem;
}
.mr16 {
  margin-right: 1.6rem;
}
.mr18 {
  margin-right: 1.8rem;
}
.mr20 {
  margin-right: 2rem;
}
.mr22 {
  margin-right: 2.2rem;
}
.mr24 {
  margin-right: 2.4rem;
}
.mr25 {
  margin-right: 2.5rem;
}
.mr26 {
  margin-right: 2.6rem;
}
.mr28 {
  margin-right: 2.8rem;
}
.mr30 {
  margin-right: 3rem;
}
.mr32 {
  margin-right: 3.2rem;
}
.mr34 {
  margin-right: 3.4rem;
}
.mr36 {
  margin-right: 3.6rem;
}
.mr38 {
  margin-right: 3.8rem;
}
.mr40 {
  margin-right: 4rem;
}
.mr46 {
  margin-right: 4.6rem;
}
.mr48 {
  margin-right: 4.8rem;
}
.mr50 {
  margin-right: 5rem;
}
.mr60 {
  margin-right: 6rem;
}
.mr70 {
  margin-right: 7rem;
}
.mr80 {
  margin-right: 8rem;
}
.mr90 {
  margin-right: 9rem;
}
.mr100 {
  margin-right: 10rem;
}
.mr120 {
  margin-right: 12rem;
}
.mr140 {
  margin-right: 14rem;
}
.mr160 {
  margin-right: 16rem;
}
.mr180 {
  margin-right: 18rem;
}
.mr200 {
  margin-right: 20rem;
}

.pt0 {
  padding-top: 0rem;
}
.pt2 {
  padding-top: 0.2rem;
}
.pt3 {
  padding-top: 0.3rem;
}
.pt4 {
  padding-top: 0.4rem;
}
.pt5 {
  padding-top: 0.5rem;
}
.pt6 {
  padding-top: 0.6rem;
}
.pt8 {
  padding-top: 0.8rem;
}
.pt10 {
  padding-top: 1rem;
}
.pt12 {
  padding-top: 1.2rem;
}
.pt14 {
  padding-top: 1.4rem;
}
.pt15 {
  padding-top: 1.5rem;
}
.pt16 {
  padding-top: 1.6rem;
}
.pt18 {
  padding-top: 1.8rem;
}
.pt20 {
  padding-top: 2rem;
}
.pt22 {
  padding-top: 2.2rem;
}
.pt24 {
  padding-top: 2.4rem;
}
.pt25 {
  padding-top: 2.5rem;
}
.pt26 {
  padding-top: 2.6rem;
}
.pt28 {
  padding-top: 2.8rem;
}
.pt30 {
  padding-top: 3rem;
}
.pt32 {
  padding-top: 3.2rem;
}
.pt34 {
  padding-top: 3.4rem;
}
.pt36 {
  padding-top: 3.6rem;
}
.pt38 {
  padding-top: 3.8rem;
}
.pt40 {
  padding-top: 4rem;
}
.pt46 {
  padding-top: 4.6rem;
}
.pt48 {
  padding-top: 4.8rem;
}
.pt50 {
  padding-top: 5rem;
}
.pt60 {
  padding-top: 6rem;
}
.pt70 {
  padding-top: 7rem;
}
.pt80 {
  padding-top: 8rem;
}
.pt90 {
  padding-top: 9rem;
}
.pt100 {
  padding-top: 10rem;
}
.pt120 {
  padding-top: 12rem;
}
.pt140 {
  padding-top: 14rem;
}
.pt160 {
  padding-top: 16rem;
}
.pt180 {
  padding-top: 18rem;
}
.pt200 {
  padding-top: 20rem;
}

.pl0 {
  padding-left: 0rem;
}
.pl2 {
  padding-left: 0.2rem;
}
.pl3 {
  padding-left: 0.3rem;
}
.pl4 {
  padding-left: 0.4rem;
}
.pl5 {
  padding-left: 0.5rem;
}
.pl6 {
  padding-left: 0.6rem;
}
.pl8 {
  padding-left: 0.8rem;
}
.pl10 {
  padding-left: 1rem;
}
.pl12 {
  padding-left: 1.2rem;
}
.pl14 {
  padding-left: 1.4rem;
}
.pl15 {
  padding-left: 1.5rem;
}
.pl16 {
  padding-left: 1.6rem;
}
.pl18 {
  padding-left: 1.8rem;
}
.pl20 {
  padding-left: 2rem;
}
.pl22 {
  padding-left: 2.2rem;
}
.pl24 {
  padding-left: 2.4rem;
}
.pl25 {
  padding-left: 2.5rem;
}
.pl26 {
  padding-left: 2.6rem;
}
.pl28 {
  padding-left: 2.8rem;
}
.pl30 {
  padding-left: 3rem;
}
.pl32 {
  padding-left: 3.2rem;
}
.pl34 {
  padding-left: 3.4rem;
}
.pl36 {
  padding-left: 3.6rem;
}
.pl38 {
  padding-left: 3.8rem;
}
.pl40 {
  padding-left: 4rem;
}
.pl46 {
  padding-left: 4.6rem;
}
.pl48 {
  padding-left: 4.8rem;
}
.pl50 {
  padding-left: 5rem;
}
.pl60 {
  padding-left: 6rem;
}
.pl70 {
  padding-left: 7rem;
}
.pl80 {
  padding-left: 8rem;
}
.pl90 {
  padding-left: 9rem;
}
.pl100 {
  padding-left: 10rem;
}
.pl120 {
  padding-left: 12rem;
}
.pl140 {
  padding-left: 14rem;
}
.pl160 {
  padding-left: 16rem;
}
.pl180 {
  padding-left: 18rem;
}
.pl200 {
  padding-left: 20rem;
}

.pr0 {
  padding-right: 0rem;
}
.pr2 {
  padding-right: 0.2rem;
}
.pr3 {
  padding-right: 0.3rem;
}
.pr4 {
  padding-right: 0.4rem;
}
.pr5 {
  padding-right: 0.5rem;
}
.pr6 {
  padding-right: 0.6rem;
}
.pr8 {
  padding-right: 0.8rem;
}
.pr10 {
  padding-right: 1rem;
}
.pr12 {
  padding-right: 1.2rem;
}
.pr14 {
  padding-right: 1.4rem;
}
.pr15 {
  padding-right: 1.5rem;
}
.pr16 {
  padding-right: 1.6rem;
}
.pr18 {
  padding-right: 1.8rem;
}
.pr20 {
  padding-right: 2rem;
}
.pr22 {
  padding-right: 2.2rem;
}
.pr24 {
  padding-right: 2.4rem;
}
.pr25 {
  padding-right: 2.5rem;
}
.pr26 {
  padding-right: 2.6rem;
}
.pr28 {
  padding-right: 2.8rem;
}
.pr30 {
  padding-right: 3rem;
}
.pr32 {
  padding-right: 3.2rem;
}
.pr34 {
  padding-right: 3.4rem;
}
.pr36 {
  padding-right: 3.6rem;
}
.pr38 {
  padding-right: 3.8rem;
}
.pr40 {
  padding-right: 4rem;
}
.pr46 {
  padding-right: 4.6rem;
}
.pr48 {
  padding-right: 4.8rem;
}
.pr50 {
  padding-right: 5rem;
}
.pr60 {
  padding-right: 6rem;
}
.pr70 {
  padding-right: 7rem;
}
.pr80 {
  padding-right: 8rem;
}
.pr90 {
  padding-right: 9rem;
}
.pr100 {
  padding-right: 10rem;
}
.pr120 {
  padding-right: 12rem;
}
.pr140 {
  padding-right: 14rem;
}
.pr160 {
  padding-right: 16rem;
}
.pr180 {
  padding-right: 18rem;
}
.pr200 {
  padding-right: 20rem;
}

.pb0 {
  padding-bottom: 0rem;
}
.pb2 {
  padding-bottom: 0.2rem;
}
.pb3 {
  padding-bottom: 0.3rem;
}
.pb4 {
  padding-bottom: 0.4rem;
}
.pb5 {
  padding-bottom: 0.5rem;
}
.pb6 {
  padding-bottom: 0.6rem;
}
.pb8 {
  padding-bottom: 0.8rem;
}
.pb10 {
  padding-bottom: 1rem;
}
.pb12 {
  padding-bottom: 1.2rem;
}
.pb14 {
  padding-bottom: 1.4rem;
}
.pb15 {
  padding-bottom: 1.5rem;
}
.pb16 {
  padding-bottom: 1.6rem;
}
.pb18 {
  padding-bottom: 1.8rem;
}
.pb20 {
  padding-bottom: 2rem;
}
.pb22 {
  padding-bottom: 2.2rem;
}
.pb24 {
  padding-bottom: 2.4rem;
}
.pb25 {
  padding-bottom: 2.5rem;
}
.pb26 {
  padding-bottom: 2.6rem;
}
.pb28 {
  padding-bottom: 2.8rem;
}
.pb30 {
  padding-bottom: 3rem;
}
.pb32 {
  padding-bottom: 3.2rem;
}
.pb34 {
  padding-bottom: 3.4rem;
}
.pb36 {
  padding-bottom: 3.6rem;
}
.pb38 {
  padding-bottom: 3.8rem;
}
.pb40 {
  padding-bottom: 4rem;
}
.pb46 {
  padding-bottom: 4.6rem;
}
.pb48 {
  padding-bottom: 4.8rem;
}
.pb50 {
  padding-bottom: 5rem;
}
.pb60 {
  padding-bottom: 6rem;
}
.pb70 {
  padding-bottom: 7rem;
}
.pb80 {
  padding-bottom: 8rem;
}
.pb90 {
  padding-bottom: 9rem;
}
.pb100 {
  padding-bottom: 10rem;
}
.pb120 {
  padding-bottom: 12rem;
}
.pb140 {
  padding-bottom: 14rem;
}
.pb160 {
  padding-bottom: 16rem;
}
.pb180 {
  padding-bottom: 18rem;
}
.pb200 {
  padding-bottom: 20rem;
}