html {
  line-height: 1.4;
}
html, body {
  color: #333;
  height: 100%;
}
html, button {
  font-family: 'Rajdhani', 'Noto Sans KR', sans-serif;
}
[ff="Teko"] {
  font-family: 'Teko', sans-serif;
}
[ff="Serif"] {
  font-family: 'Noto Serif KR', sans-serif;
}
[fb="100"] { font-weight: 100 !important; }
[fb="200"] { font-weight: 200 !important; }
[fb="300"] { font-weight: 300 !important; }
[fb="400"] { font-weight: 400 !important; }
[fb="500"] { font-weight: 500 !important; }
[fb="600"] { font-weight: 600 !important; }
[fb="700"] { font-weight: 700 !important; }
[fb="800"] { font-weight: 800 !important; }
[fb="900"] { font-weight: 900 !important; }
[fsize="2xs"] { font-size: .7rem; }
[fsize="xs"] { font-size: .8rem; }
[fsize="sm"] { font-size: .9rem; }
[fsize="md"] { font-size: 1rem; }
[fsize="lg"] { font-size: 1.25rem; }
[fsize="xl"] { font-size: 1.5rem; }
[fsize="2xl"] { font-size: 2rem; }
[fsize="3xl"] { font-size: 4rem; }
[fsize="4xl"] { font-size: 5rem; }
[fsize="5xl"] { font-size: 6rem; }
[lh="1"] { line-height: 1; }
[lh="1.1"] { line-height: 1.1; }
[lh="1.2"] { line-height: 1.2; }
[space=".8"] { letter-spacing: -.2rem; }
[space=".9"] { letter-spacing: -.1rem; }
[space="1.1"] { letter-spacing: .1rem; }
[space="1.2"] { letter-spacing: .2rem; }
[space="1.3"] { letter-spacing: .3rem; }
[space="1.4"] { letter-spacing: .4rem; }
[space="1.5"] { letter-spacing: .5rem; }
[space="1.6"] { letter-spacing: .6rem; }
[space="1.7"] { letter-spacing: .7rem; }
[space="1.8"] { letter-spacing: .8rem; }
[space="1.9"] { letter-spacing: .9rem; }
[space="2"] { letter-spacing: 1rem; }
[indent=".8"] { text-indent: -.2rem; }
[indent=".9"] { text-indent: -.1rem; }
[indent="1.1"] { text-indent: .1rem; }
[indent="1.2"] { text-indent: .2rem; }
[indent="1.3"] { text-indent: .3rem; }
[color="gray"] { color: var(--accent); opacity: .7; }
a, button {
  color: inherit;
  text-decoration: unset;
}
body {
  transition: background-color 1s ease;
}
.header {
  flex: 0;
  display: flex;
  padding: 3rem;
}
.header-logo {
  display: flex; align-items: center;
}
.header-logo dt {
  font-size: 4rem; line-height: 1;
}
.header-logo dd {
  padding: 0 0 0 1rem; margin: -.35rem 0 0 1rem;
}
.header-logo > span {
  display: flex; align-items: center;
  margin-left: 1rem; gap: 1rem; margin-top: 1rem;
}
.header-logo > span i {
  margin-top: -1px;
}
.header-logo > span span {
  font-weight: bold;
}
.header,
.footer {
  z-index: 1;
  position: relative;
  transition: filter .3s ease,
              opacity .3s ease
}
.swiper[status="outro"] .header,
.swiper[status="outro"] .footer {
  filter: blur(3px);
  opacity: .2;
}
.footer {
  flex: 0;
  padding: 3rem 3rem 0 3rem;
  margin: 0 0 3rem 0; gap: 2rem;
  display: flex; align-items: center;
  border-top: 1px solid var(--bg-opacity-1);
}
.footer-logo {
  font-size: 1.5rem; line-height: .8;
}
.footer-copyright dt {
  padding: 0 0 .25rem 0;
  font-size: .9rem;
}
.footer-copyright dd {
  font-size: .7rem;
}
.footer-app {
  display: flex; gap: .5rem;
  font-size: .8rem;
}
.footer-app a {
  padding: .5rem 2rem; border-radius: .25rem;
  border: 1px solid var(--bg-opacity-2); font-weight: bold;
  transition: background-color .3s ease;
}
.footer-app a:hover {
  background-color: var(--bg-opacity-1);
}
.footer-social {
  display: flex; gap: 2rem;
  margin-left: auto; align-items: center;
  font-size: 1.5rem; padding: 0 0 .5rem 0;
}
.footer-social span {
  font-size: .8rem;
  letter-spacing: .25rem;
}

.swiper {
  width: 100%;
  height: 100%; z-index: 1;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.swiper[status="intro"] {
  
}
.swiper[status="outro"] {
  transform: scale(.95);
}
.swiper-slide, swiper-slide {
  display: flex; flex-direction: column;
}
.slider-btns { 
  z-index: 999; position: fixed; top: 3rem; right: 3rem; 
  display: flex; gap: 1rem;
  transition: opacity .3s ease;
}
.slider-btns[transition="true"] {
  opacity: .5;
}
.slider-btn {
  padding: .5rem 1rem; display: flex; flex-direction: column;
  font-size: 1.5rem; cursor: pointer; gap: .35rem;
  background: unset; border: unset; opacity: var(--opacity);
}
.slider-btn span {
  transition: filter .3s ease,
              transform .3s ease;
}
.slider-btn::before {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  content: ''; position: fixed; width: 1px; top: 0; height: 100%; background-color: transparent; margin-left: -1.3rem;
}
.slider-btn::after {
  content: ''; display: block; height: 1px; width: 100%;
}
.slider-btn:hover::after {
  background-color: var(--bg-opacity-2);
}
.slider-btn[status="move"]::before {
  opacity: 1;
  animation: 4s linear 0s forwards alternate menu-move;
}
.slider-btn[status="move"] span {
  filter: blur(2px); transform: scale(.9);
}
.slider-btn[status="active"] {
  opacity: 1;
  font-weight: bold;
}
.slider-btn[status="active"]:after {
  background-color: var(--line);
}
.slider-btn:hover {
  opacity: 1;
}

.swiper-slide-content {
  flex: 1;
  opacity: 0;
  overflow-y: auto;
  transition: opacity .3s ease;
}
.swiper[status="outro"] .swiper-slide-content {
  overflow: hidden;
}
.swiper-slide-content[status="show"] {
  opacity: 1;
}
.swiper-slide-content > div:first-child {
  overflow: hidden;
  min-height: 100%;
}
html .swiper-scrollbar.swiper-scrollbar-horizontal {
  width: unset; top: unset; left: 3rem; bottom: .5rem; right: 3rem;
  height: 2px; background-color: var(--bg-opacity-1);
}
html .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
  background-color: var(--accent);
}
@keyframes menu-move {
  from { height: 0%; }
  to { height: 100%; }
}

.loader-cover {
  opacity: 0;
  transition: opacity 1s ease .3s;
}
.swiper[status="outro"] ~ .loader-cover {
  opacity: 1;
}
.swiper[status="intro"] ~ .loader-cover {
  opacity: 0;
}
.loader {
  z-index: 9;
  position: fixed;
  top: 50%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  will-change: transform;
  perspective: 1000;
  backface-visibility: hidden;
  display: flex;
}

.dash {
  margin: 0 20px;
  width: 40px;
  height: 2px;
  border-radius: 100rem;
  background: var(--accent);
  box-shadow: 0 0 10px 0 var(--bg-opacity-1);
}

.uno {
  margin-right: -20px;
  transform-origin: center left;
  animation: spin 3s linear infinite;  
}

.dos {
  transform-origin: center right;
  animation: spin2 3s linear infinite;
  animation-delay: .2s;
}

.tres {
  transform-origin: center right;
  animation: spin3 3s linear infinite;
  animation-delay: .3s;
}

.cuatro {
  transform-origin: center right;
  animation: spin4 3s linear infinite;
  animation-delay: .4s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(360deg);
  }
  30% {
    transform: rotate(370deg);
  }
  35% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-180deg);
  }
  35% {
    transform: rotate(-190deg);
  }
  40% {
    transform: rotate(-180deg);
  }
  78% {
    transform: rotate(-180deg);
  }
  95% {
    transform: rotate(-360deg);
  }
  98% {
    transform: rotate(-370deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spin3 {
  0% {
    transform: rotate(0deg);
  }
  27% {
    transform: rotate(0deg);  
  }
  40% {
    transform: rotate(180deg);
  }
  45% {
    transform: rotate(190deg);
  }
  50% {
    transform: rotate(180deg);
  }
  62% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  80% {
    transform: rotate(370deg);
  }
  85% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin4 {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-360deg);
  }
  65% {
    transform: rotate(-370deg);
  }
  75% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* waves */
.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}
.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 20s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  transition: filter 1s ease;
}
.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 36s linear reverse infinite;
  opacity: 0.5;
}
.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 100s -1s linear infinite;
  opacity: 0.5;
}
body[theme="white"] .wave {
  filter: grayscale(1) hue-rotate(45deg) opacity(.15);
}
body[theme="green"] .wave {
  filter: brightness(0) saturate(100%) invert(41%) sepia(51%) saturate(1226%) hue-rotate(131deg) brightness(50%) contrast(101%) opacity(0.3);
}
body[theme="blue"] .wave {
  filter: brightness(0) saturate(100%) invert(30%) sepia(30%) saturate(4340%) hue-rotate(187deg) brightness(150%) contrast(99%) opacity(0.3);
}
body[theme="black"] .wave {
  filter: brightness(0) saturate(100%) invert(10%) sepia(32%) saturate(305%) hue-rotate(188deg) brightness(500%) contrast(93%) opacity(0.1);
}
@keyframes wave {
    0% {transform: translateX(0);}
    25% {transform: translateX(-25%);}
    50% {transform: translateX(-50%);}
    75% {transform: translateX(-25%);}
    100% {transform: translateX(0%);}
}

body[theme="white"] {
  color: #333;
  background-color: #f0f0f0;
  --line: #333;
  --accent: #333;
  --opacity: .9;
  --bg-opacity-1: rgba(0,0,0,0.1);
  --bg-opacity-2: rgba(0,0,0,0.15);
}
body[theme="black"] {
  color: #fff;
  background-color: #1f2128;
  --line: rgba(255,255,255,0.5);
  --accent: #fff;
  --opacity: .75;
  --bg-opacity-1: rgba(255,255,255,0.1);
  --bg-opacity-2: rgba(255,255,255,0.35);
}
body[theme="green"] {
  color: #fff;
  background-color: #029c82;
  --line: rgba(255,255,255,0.5);
  --accent: #fff;
  --opacity: .75;
  --bg-opacity-1: rgba(255,255,255,0.1);
  --bg-opacity-2: rgba(255,255,255,0.35);
}
body[theme="blue"] {
  color: #fff;
  background-color: #0170c3;
  --line: rgba(255,255,255,0.5);
  --accent: #fff;
  --opacity: .75;
  --bg-opacity-1: rgba(255,255,255,0.1);
  --bg-opacity-2: rgba(255,255,255,0.35);
}
body[theme="white"] .slider-btn::before {
  background-color: rgba(0,0,0,0.25);
}
body[theme="black"] .slider-btn::before {
  background-color: rgba(255,255,255,0.25);
}
body[theme="green"] .slider-btn::before {
  background-color: rgba(255,255,255,0.50);
}
body[theme="blue"] .slider-btn::before {
  background-color: rgba(255,255,255,0.50);
}


body[theme="white"] .swiper-slide-content { scrollbar-width: auto; scrollbar-color: #666 #f0f0f0; }
body[theme="white"] .swiper-slide-content::-webkit-scrollbar { width: 20px; }
body[theme="white"] .swiper-slide-content::-webkit-scrollbar-track { background: #f0f0f0; }
body[theme="white"] .swiper-slide-content::-webkit-scrollbar-thumb { background-color: #666; border-radius: 10px; border: 7px solid #f0f0f0; }
body[theme="green"] .swiper-slide-content { scrollbar-width: auto; scrollbar-color: #ffffff70 #029c82; }
body[theme="green"] .swiper-slide-content::-webkit-scrollbar { width: 20px; }
body[theme="green"] .swiper-slide-content::-webkit-scrollbar-track { background: #029c82; }
body[theme="green"] .swiper-slide-content::-webkit-scrollbar-thumb { background-color: #ffffff70; border-radius: 10px; border: 7px solid #029c82; }
body[theme="black"] .swiper-slide-content { scrollbar-width: auto; scrollbar-color: #ffffff70 #1f2128; }
body[theme="black"] .swiper-slide-content::-webkit-scrollbar { width: 20px; }
body[theme="black"] .swiper-slide-content::-webkit-scrollbar-track { background: #1f2128; }
body[theme="black"] .swiper-slide-content::-webkit-scrollbar-thumb { background-color: #ffffff70; border-radius: 10px; border: 7px solid #1f2128; }
body[theme="blue"] .swiper-slide-content { scrollbar-width: auto; scrollbar-color: #ffffff70 #0170c3; }
body[theme="blue"] .swiper-slide-content::-webkit-scrollbar { width: 20px; }
body[theme="blue"] .swiper-slide-content::-webkit-scrollbar-track { background: #0170c3; }
body[theme="blue"] .swiper-slide-content::-webkit-scrollbar-thumb { background-color: #ffffff70; border-radius: 10px; border: 7px solid #0170c3; }



/*
** 인트로
*/
/*
** 박스 기본형
*/
.box {
  display: flex;
  position: relative;
}
/*
** 박스 내부 사이즈
*/
.box[gap="1"] { gap: 1px; }
.box[gap="xs"] { gap: .33rem; }
.box[gap="sm"] { gap: .66rem; }
.box[gap="md"] { gap: 1rem; }
.box[gap="lg"] { gap: 1.5rem; }
.box[gap="xl"] { gap: 2rem; }
.box[gap="2xl"] { gap: 3rem; }
.box[gap="3xl"] { gap: 4rem; }
/*
** 플랙스 요소
*/
[flex="0"] { flex: 0; }
[flex="1"] { flex: 1; }
[flex="grow"] { flex-grow: 1; }
[flex="auto"] { flex: auto !important; }
[flex="fixed"] { flex: 0 0 auto !important; }
[valign="start"] { align-items: flex-start; }
[valign="center"] { align-items: center; }
[valign="end"] { align-items: flex-end; }
[valign="stretch"] { height: 100%; align-items: stretch; }
[halign="start"] { justify-content: flex-start; }
[halign="center"] { justify-content: center; }
[halign="end"] { justify-content: flex-end; }
[halign="between"] { justify-content: space-between; }
[direction="column"] { flex-direction: column; }
[svalign="start"] { align-self: flex-start; }
[svalign="center"] { align-self: center; }
[svalign="end"] { align-self: end; }
[svalign="sub"] { vertical-align: sub !important; }
[svalign="tbottom"] { vertical-align: text-bottom !important; }
/*
** 정렬
*/
[talign="left"] { text-align: left; }
[talign="center"] { text-align: center; }
[talign="right"] { text-align: right; }
[talign="top"] { vertical-align: top; }
[talign="middle"] { vertical-align: middle; }
[talign="bottom"] { vertical-align: bottom; }
/*
** 자간
*/
[space="xs"] { letter-spacing: .05rem; text-indent: .025rem; }
[space="sm"] { letter-spacing: .075rem; text-indent: .0375rem; }
[space="md"] { letter-spacing: .1rem; text-indent: .05rem; }
[space="lg"] { letter-spacing: .25rem; text-indent: .125rem; }
[space="xl"] { letter-spacing: .5rem; text-indent: .25rem; }

.intro {
  display: flex; color: #fff;
  top: 0; left: 0; right: 0; bottom: 0;
  position: fixed; z-index: 99999; flex-direction: column;
  background-color: #fff; align-items: center; justify-content: center;
  line-height: 1.1; letter-spacing: -.25rem;
  transition: background-color .3s ease; overflow: hidden;
}
.intro-skip {
  position: absolute;
  display: flex; justify-content: center;
  width: 20rem; letter-spacing: .25rem;
  bottom: 5vh; left: calc(50% - 10rem);
}
.intro-skip a {
  display: block; padding: .3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.intro-skip i {
  font-size: .8rem; margin: .2rem 0 0 1rem;
}
.intro-inside {
  max-width: 50vw; position: absolute;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.intro-anime {
  opacity: 0; position: relative;
  font-size: 4rem; font-weight: 100;
}
.background-effect {
  z-index: -1;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	animation: theme 21s linear infinite;
}
 .background-effect:after, .background-effect:before {
	 content: '';
	 display: block;
	 position: fixed;
	 z-index: -1;
	 top: 0;
	 width: 100vw;
	 height: 100vh;
	 width: 100vmax;
	 height: 100vmax;
	 background: rgba(0, 0, 0, 0.05);
	 animation: background 42s linear infinite;
}
 .background-effect:after {
	 left: 10vw;
}
 .background-effect:before {
	 right: 10vw;
	 animation-delay: -30s;
	 animation-direction: reverse;
}
 @keyframes theme {
	 0% {
		 background: rgba(0,0,0,0.1);
	}
	 16% {
		 background: rgba(255,255,255,0.1);
	}
	 33% {
		 background: rgba(0,0,0,0.1);
	}
	 50% {
		 background: rgba(255,255,255,0.13);
	}
	 66% {
		 background: rgba(0,0,0,0.1);
	}
	 83% {
		 background: rgba(255,255,255,0.1);
	}
	 100% {
		 background: rgba(0,0,0,0.1);
	}
}
 @keyframes background {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}

.intro-lines {
  position: absolute;
  top: 0;
  left: 3rem;
  right: 3rem;
  height: 100%;
  margin: auto; }

.intro-line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden; }
  .intro-line::after {
    content: '';
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: 110%;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
    animation: intro-drop 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); }
  .intro-line:nth-child(1) { margin-left: -5%; opacity: .5; }
  .intro-line:nth-child(1)::after { animation-delay: 2s; }
  .intro-line:nth-child(3) { margin-left: 5%; opacity: .5; }
  .intro-line:nth-child(3)::after { animation-delay: 2.5s; }
  .intro-line:nth-child(4) { margin-left: -20%; }
  .intro-line:nth-child(4)::after { animation-delay: 3s; }
  .intro-line:nth-child(5) { margin-left: 20%; }
  .intro-line:nth-child(6)::after { animation-delay: 3.5s; }

@keyframes intro-drop {
  0% {
    top: 110%; }
  100% {
    top: -50%; } }



.content {
  font-size: 3rem;
}

/*
** 패딩
*/
[pdt="xs"] { padding-top: .33rem; }
[pdr="xs"] { padding-right: .33rem; }
[pdb="xs"] { padding-bottom: .33rem; }
[pdl="xs"] { padding-left: .33rem; }
[pdt="sm"] { padding-top: .66rem; }
[pdr="sm"] { padding-right: .66rem; }
[pdb="sm"] { padding-bottom: .66rem; }
[pdl="sm"] { padding-left: .66rem; }
[pdt="md"] { padding-top: 1rem; }
[pdr="md"] { padding-right: 1rem; }
[pdb="md"] { padding-bottom: 1rem; }
[pdl="md"] { padding-left: 1rem; }
[pdt="lg"] { padding-top: 1.5rem; }
[pdr="lg"] { padding-right: 1.5rem; }
[pdb="lg"] { padding-bottom: 1.5rem; }
[pdl="lg"] { padding-left: 1.5rem; }
[pdt="xl"] { padding-top: 2rem; }
[pdr="xl"] { padding-right: 2rem; }
[pdb="xl"] { padding-bottom: 2rem; }
[pdl="xl"] { padding-left: 2rem; }
[pdt="2xl"] { padding-top: 3rem; }
[pdr="2xl"] { padding-right: 3rem; }
[pdb="2xl"] { padding-bottom: 3rem; }
[pdl="2xl"] { padding-left: 3rem; }
[pdt="3xl"] { padding-top: 4rem; }
[pdr="3xl"] { padding-right: 4rem; }
[pdb="3xl"] { padding-bottom: 4rem; }
[pdl="3xl"] { padding-left: 4rem; }
[pd^="xs"] { padding: .33rem; }
[pd^="sm"] { padding: .66rem; }
[pd^="md"] { padding: 1rem; }
[pd^="lg"] { padding: 1.5rem; }
[pd^="xl"] { padding: 2rem; }
[pd^="2xl"] { padding: 3rem; }
[pd^="3xl"] { padding: 4rem; }
[pd$="-x"] { padding-top: unset; padding-bottom: unset; }
[pd$="-y"] { padding-right: unset; padding-left: unset; }

/*
** 마진
*/
[mgt="auto"] { margin-top: auto; }
[mgr="auto"] { margin-right: auto; }
[mgb="auto"] { margin-bottom: auto; }
[mgl="auto"] { margin-left: auto; }
[mgt="nano"] { margin-top: 1px; }
[mgr="nano"] { margin-right: 1px; }
[mgb="nano"] { margin-bottom: 1px; }
[mgl="nano"] { margin-left: 1px; }
[mgt="xs"] { margin-top: .33rem; }
[mgr="xs"] { margin-right: .33rem; }
[mgb="xs"] { margin-bottom: .33rem; }
[mgl="xs"] { margin-left: .33rem; }
[mgt="sm"] { margin-top: .66rem; }
[mgr="sm"] { margin-right: .66rem; }
[mgb="sm"] { margin-bottom: .66rem; }
[mgl="sm"] { margin-left: .66rem; }
[mgt="md"] { margin-top: 1rem; }
[mgr="md"] { margin-right: 1rem; }
[mgb="md"] { margin-bottom: 1rem; }
[mgl="md"] { margin-left: 1rem; }
[mgt="lg"] { margin-top: 1.5rem; }
[mgr="lg"] { margin-right: 1.5rem; }
[mgb="lg"] { margin-bottom: 1.5rem; }
[mgl="lg"] { margin-left: 1.5rem; }
[mgt="xl"] { margin-top: 2rem; }
[mgr="xl"] { margin-right: 2rem; }
[mgb="xl"] { margin-bottom: 2rem; }
[mgl="xl"] { margin-left: 2rem; }
[mgt="2xl"] { margin-top: 3rem; }
[mgr="2xl"] { margin-right: 3rem; }
[mgb="2xl"] { margin-bottom: 3rem; }
[mgl="2xl"] { margin-left: 3rem; }
[mgt="3xl"] { margin-top: 4rem; }
[mgr="3xl"] { margin-right: 4rem; }
[mgb="3xl"] { margin-bottom: 4rem; }
[mgl="3xl"] { margin-left: 4rem; }
[mg^="xs"] { margin: .33rem; }
[mg^="sm"] { margin: .66rem; }
[mg^="md"] { margin: 1rem; }
[mg^="lg"] { margin: 1.5rem; }
[mg^="xl"] { margin: 2rem; }
[mg^="2xl"] { margin: 3rem; }
[mg^="3xl"] { margin: 4rem; }
[mg$="-x"] { margin-top: unset; margin-bottom: unset; }
[mg$="-y"] { margin-right: unset; margin-left: unset; }

/* 음수 */
[mgl="-tiny"] { margin-left: -.2rem; }
[mgl="-xs"] { margin-left: -.33rem; }
[mgl="-sm"] { margin-left: -.66rem; }
[mgl="-md"] { margin-left: -1rem; }
[mgl="-lg"] { margin-left: -1.5rem; }
[mgl="-xl"] { margin-left: -2rem; }
[mgr="-tiny"] { margin-right: -.2rem; }
[mgr="-xs"] { margin-right: -.33rem; }
[mgr="-sm"] { margin-right: -.66rem; }
[mgr="-md"] { margin-right: -1rem; }
[mgr="-lg"] { margin-right: -1.5rem; }
[mgr="-xl"] { margin-right: -2rem; }

/* 여백제거 */
[unpd*="t"] { padding-top: 0 !important; }
[unpd*="r"] { padding-right: 0 !important; }
[unpd*="b"] { padding-bottom: 0 !important; }
[unpd*="l"] { padding-left: 0 !important; }
[unmg*="t"] { margin-top: 0 !important; }
[unmg*="r"] { margin-right: 0 !important; }
[unmg*="b"] { margin-bottom: 0 !important; }
[unmg*="l"] { margin-left: 0 !important; }

/*
** 텍스트 패딩
*/
[tpd="nano"] { line-height: 1; padding: .2rem .3rem 0 .3rem; }
[tpd="band"] { line-height: 1; padding: .3rem .4rem .2rem .4rem; }
[tpd="tiny"] { padding: .25rem .6rem .2rem .6rem; }
[tpd="xs"] { padding: .35rem .75rem .3rem .75rem; }
[tpd="sm"] { padding: .65rem 1rem .6rem 1rem; }
[tpd="md"] { padding: .85rem 1.35rem; }
[tpd="lg"] { padding: 1rem 1.5rem; }
[tpd="xl"] { padding: 1.25rem 2rem; }
[tpd="2xl"] { padding: 1.5rem 2.25rem; }
[tpd="3xl"] { padding: 1.75rem 2.5rem; }

/*
** 텍스트 브레이크
*/
[break="all"] {
  white-space: unset;
  word-break: break-all;
}
[break="keepall"] {
  white-space: unset;
  word-break: keep-all;
}
[break="nowrap"] {
  white-space: nowrap;
}
[break="cover"] {
  width: inherit;
}
[break="ellipsis"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[break="ellipsis-2"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[break="ellipsis-3"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
[break="wrap"] {
  flex-wrap: wrap;
  white-space: unset;
}

.deco-dash {
  display: inline-flex;
}
.deco-dash::before {
  content: ''; flex: 1; display: block; height: 1px;
  background-color: var(--accent);
}

[w="fit"] { max-width: 100%; }
[w="1"] { width: 1rem; }
[w="2"] { width: 2rem; }
[w="3"] { width: 3rem; }
[w="4"] { width: 4rem; }
[w="5"] { width: 5rem; }
[w="6"] { width: 6rem; }
[w="7"] { width: 7rem; }
[w="8"] { width: 8rem; }
[w="9"] { width: 9rem; }
[w="10"] { width: 10rem; }
[w="11"] { width: 11rem; }
[w="12"] { width: 12rem; }
[w="13"] { width: 13rem; }
[w="14"] { width: 14rem; }
[w="15"] { width: 15rem; }
[w="16"] { width: 16rem; }
[w="17"] { width: 17rem; }
[w="18"] { width: 18rem; }
[w="19"] { width: 19rem; }
[w="20"] { width: 20rem; }

.article-diagonal span {
  width: 1000%; height: 1px; background-color: var(--bg-opacity-2); 
  display: block; position: relative; left: -500%;
}
[diagonal="1"] { transform: rotate(1deg); }
[diagonal="1.8"] { transform: rotate(1.8deg); }
[diagonal="2"] { transform: rotate(2deg); }
[diagonal="3"] { transform: rotate(3deg); }
[diagonal="3.5"] { transform: rotate(3.5deg); }
[diagonal="4"] { transform: rotate(4deg); }
[diagonal="5"] { transform: rotate(5deg); }
[diagonal="6"] { transform: rotate(6deg); }
[diagonal="7"] { transform: rotate(7deg); }
[diagonal="8"] { transform: rotate(8deg); }
[diagonal="9"] { transform: rotate(9deg); }
[diagonal="10"] { transform: rotate(10deg); }
[diagonal="-1"] { transform: rotate(-1deg); }
[diagonal="-1.8"] { transform: rotate(-1.8deg); }
[diagonal="-2"] { transform: rotate(-2deg); }
[diagonal="-3"] { transform: rotate(-3deg); }
[diagonal="-3.5"] { transform: rotate(-3.5deg); }
[diagonal="-4"] { transform: rotate(-4deg); }
[diagonal="-5"] { transform: rotate(-5deg); }
[diagonal="-6"] { transform: rotate(-6deg); }
[diagonal="-7"] { transform: rotate(-7deg); }
[diagonal="-8"] { transform: rotate(-8deg); }
[diagonal="-9"] { transform: rotate(-9deg); }
[diagonal="-10"] { transform: rotate(-10deg); }
.article-diagonal-background {
  z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 50%;
  width: 300%; margin-left: -150%;
}
[opacity="1"] { opacity: 10%; }
[opacity="2"] { opacity: 20%; }
[opacity="3"] { opacity: 30%; }
[opacity="4"] { opacity: 40%; }
[opacity="5"] { opacity: 50%; }
[opacity="6"] { opacity: 60%; }
[opacity="7"] { opacity: 70%; }
[opacity="8"] { opacity: 80%; }
[opacity="9"] { opacity: 90%; }
.article-line span {
  display: flex; width: 2.5rem; height: .2rem; background-color: var(--accent);
}
[bgopa="black-1"] { background-color: rgba(0,0,0,0.04); }
[bgopa="black-2"] { background-color: rgba(0,0,0,0.10); }
[bgopa="black-3"] { background-color: rgba(0,0,0,0.15); }
[bgopa="black-4"] { background-color: rgba(0,0,0,0.20); }
[bgopa="black-5"] { background-color: rgba(0,0,0,0.30); }
[bgopa="black-6"] { background-color: rgba(0,0,0,0.35`); }
[bgopa="black-7"] { background-color: rgba(0,0,0,0.40); }
[bgopa="black-8"] { background-color: rgba(0,0,0,0.45); }
[bgopa="black-9"] { background-color: rgba(0,0,0,0.50); }
[scale="horizontal"] { transform: scale(-1, 1); }
[case="upper"] { text-transform: uppercase; }
[ratio="10"] { padding-bottom: 10%; }
[ratio="20"] { padding-bottom: 20%; }
[ratio="25"] { padding-bottom: 25%; }
[ratio="30"] { padding-bottom: 30%; }
[ratio="40"] { padding-bottom: 40%; }
[ratio="50"] { padding-bottom: 50%; }
[ratio="55"] { padding-bottom: 55%; }
[ratio="60"] { padding-bottom: 60%; }
[ratio="70"] { padding-bottom: 70%; }
[ratio="80"] { padding-bottom: 80%; }
[ratio="90"] { padding-bottom: 90%; }
[ratio="100"] { padding-bottom: 100%; }
[ratio="y-1"] { padding: 1% 0; }
[ratio="y-2"] { padding: 2% 0; }
[ratio="y-3"] { padding: 3% 0; }
[ratio="y-4"] { padding: 4% 0; }
[ratio="y-5"] { padding: 5% 0; }
[ratio="y-6"] { padding: 6% 0; }
[ratio="y-7"] { padding: 7% 0; }
[ratio="y-8"] { padding: 8% 0; }
[ratio="y-9"] { padding: 9% 0; }
[ratio="y-10"] { padding: 10% 0; }
[ratio="y-15"] { padding: 15% 0; }
[ratio="y-20"] { padding: 20% 0; }
[ratio="y-25"] { padding: 25% 0; }
[ratio="y-30"] { padding: 30% 0; }
[ratio="y-40"] { padding: 40% 0; }
[ratio="y-50"] { padding: 50% 0; }
[ratio="y-55"] { padding: 55% 0; }
[ratio="y-60"] { padding: 60% 0; }
[ratio="y-70"] { padding: 70% 0; }
[ratio="y-80"] { padding: 80% 0; }
[ratio="y-90"] { padding: 90% 0; }
[ratio="y-100"] { padding: 100% 0; }
.article {
  position: relative; align-self: flex-start;
}
.article-content {
  width: 1600px; margin: 0 auto;
  z-index: 1; position: relative;
  background-repeat: no-repeat;
}
.article-content.wide {
  width: unset;
}
[rule*="-contain"] {
  background-size: contain;
}
[rule^="rt"] { background-position: right top; }
[rule^="rt10"] { background-position: right top 10%; }
[rule^="rt20"] { background-position: right top 20%; }
[rule^="rt30"] { background-position: right top 30%; }
[rule^="rt40"] { background-position: right top 40%; }
[rule^="rc"] { background-position: right center; }
[rule^="rb"] { background-position: right bottom; }
[rule^="rb10"] { background-position: right bottom 10%; }
[rule^="rb20"] { background-position: right bottom 20%; }
[rule^="rb30"] { background-position: right bottom 30%; }
[rule^="rb40"] { background-position: right bottom 40%; }
[rule^="lt"] { background-position: left top; }
[rule^="lt10"] { background-position: left top 10%; }
[rule^="lt20"] { background-position: left top 20%; }
[rule^="lt30"] { background-position: left top 30%; }
[rule^="lt40"] { background-position: left top 40%; }
[rule^="lc"] { background-position: left center; }
[rule^="lb"] { background-position: left bottom; }
[rule^="lb10"] { background-position: left bottom 10%; }
[rule^="lb20"] { background-position: left bottom 20%; }
[rule^="lb30"] { background-position: left bottom 30%; }
[rule^="lb40"] { background-position: left bottom 40%; }
[rule*="-100"] { background-size: 100%; }
[rule*="-95"] { background-size: 95%; }
[rule*="-90"] { background-size: 90%; }
[rule*="-85"] { background-size: 85%; }
[rule*="-80"] { background-size: 80%; }
[rule*="-75"] { background-size: 75%; }
[rule*="-70"] { background-size: 70%; }
[rule*="-65"] { background-size: 65%; }
[rule*="-60"] { background-size: 60%; }
[rule*="-55"] { background-size: 55%; }
[rule*="-50"] { background-size: 50%; }
[rule*="-45"] { background-size: 45%; }
[rule*="-40"] { background-size: 40%; }
[rule*="-35"] { background-size: 35%; }
[rule*="-30"] { background-size: 30%; }
[rule*="-25"] { background-size: 25%; }
[rule*="-20"] { background-size: 20%; }
[rule*="-15"] { background-size: 15%; }
[rule*="-10"] { background-size: 10%; }
[rule*="-15"] { background-size: 15%; }

/* CSS */
.button-36 {
  display: inline-flex;
  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 4rem;
  line-height: 3.9rem;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.button-36:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: .1s;
}
.button-36[theme="green"]       { background-image: linear-gradient(135deg, #13b89c 9.16%, #13b89c 43.89%, rgb(15 189 181) 64.72%); }
.button-36[theme="green"]:hover { box-shadow: rgb(0,0,0, .1) 0 1px 30px; }
.button-36[theme="orange"]       { background-image: linear-gradient(135deg, #dd9a13 9.16%, #dd9a13 43.89%, #dd9a13 64.72%); }
.button-36[theme="orange"]:hover { box-shadow: rgb(0,0,0, .1) 0 1px 30px; }
.button-36[theme="blue"]       { background-image: linear-gradient(135deg, #35a8ff 9.16%, #16aeeb 43.89%, #1f9ae2 64.72%); }
.button-36[theme="blue"]:hover { box-shadow: rgb(0,0,0, .1) 0 1px 30px; }

@media (min-width: 768px) {
  .button-36 {
    padding: 0 2.6rem;
  }
}

.circles{
  z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.lines {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 3rem;
  right: 3rem;
  height: 100%;
  margin: auto; }

.line {
  z-index: 3; 
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden; }
  .line::after {
    content: '';
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
    animation: drop 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); }
  .line:nth-child(1) {
    margin-left: -25%; }
    .line:nth-child(1)::after {
      animation-delay: 2s; }
  .line:nth-child(3) {
    margin-left: 25%; }
    .line:nth-child(3)::after {
      animation-delay: 2.5s; }

@keyframes drop {
  0% {
    top: -50%; }
  100% {
    top: 110%; } }

    .bg {
      will-change: transform;
      animation:slide 30s ease-in-out infinite alternate;
      background-image: linear-gradient(-60deg, rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.05) 50%);
      bottom:0;
      left:-50%;
      opacity:.5;
      position:absolute;
      right:-50%;
      top:0;
      z-index:-1;
    }
    .bg2 {
      animation-direction:alternate-reverse;
      animation-duration:20s;
    }
    .bg3 {
      animation-duration:10s;
    }
    @keyframes slide {
      0% {
        transform:translateX(-25%);
      }
      100% {
        transform:translateX(25%);
      }
    }

    .history-lists {
      font-size: 1.25rem; display: flex;
      flex-direction: column; gap: .5rem;
    }
    .history-list-element {
      border: 1px solid rgb(255 255 255 / 22%);
      border-radius: 0.5rem; background-color: rgb(11 171 144);
    }
    .history-list-element figure {
      width: 7rem; font-weight: 600; font-size: 1.5rem;
    }