@font-face {
  font-family: "GrandSlang-Italic";
  src: url("../fonts/grandslang-italic/GrandSlang-Italic.eot");
  src: url("../fonts/grandslang-italic/GrandSlang-Italic.svg") format("svg"),
    url("../fonts/grandslang-italic/GrandSlang-Italic.ttf") format("truetype"),
    url("../fonts/grandslang-italic/GrandSlang-Italic.woff") format("woff"),
    url("../fonts/grandslang-italic/GrandSlang-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* 그랜드 슬랑 */

@font-face {
  font-family: "Chosunilbo_myungjo";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
/* 조선일보 명조 */
@font-face {
  font-family: "Migra-Extrabold";
  src: url("../fonts/Migra-Extrabold/Migra-Extrabold.eot");
  src: url("../fonts/Migra-Extrabold/Migra-Extrabold.svg") format("svg"),
    url("../fonts/Migra-Extrabold/Migra-Extrabold.ttf") format("truetype"),
    url("../fonts/Migra-Extrabold/Migra-Extrabold.woff") format("woff"),
    url("../fonts/Migra-Extralight/Migra-Extralight.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* 미그라 볼드 레귤러 */
@font-face {
  font-family: "SaintMonicaRegular";
  src: url("../fonts/saintMonicaRegular/SaintMonicaRegular.eot");
  src: url("../fonts/saintMonicaRegular/SaintMonicaRegular.svg") format("svg"),
    url("../fonts/saintMonicaRegular/SaintMonicaRegular.ttf") format("truetype"),
    url("../fonts/saintMonicaRegular/SaintMonicaRegular.woff") format("woff"),
    url("../fonts/saintMonicaRegular/SaintMonicaRegular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SaintMonicaItalic";
  src: url("../fonts/SaintMonicaItalic/SaintMonicaItalic.eot");
  src: url("../fonts/SaintMonicaItalic/SaintMonicaItalic.svg") format("svg"),
    url("../fonts/SaintMonicaItalic/SaintMonicaItalic.ttf") format("truetype"),
    url("../fonts/SaintMonicaItalic/SaintMonicaItalic.woff") format("woff"),
    url("../fonts/SaintMonicaItalic/SaintMonicaItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* 세인트모니카 */

@font-face {
  font-family: "OPTICuento";
  src: url("../fonts/optic/OPTICuento.ttf.woff") format("woff"),
    url("../fonts/optic/OPTICuento.ttf.svg") format("svg"),
    url("../fonts/optic/OPTICuento.ttf.woff");
  font-weight: normal;
  font-style: normal;
}
/* 애니메이션 영역 폰트 */

/* 폰트 끝 ================================================================================================================= */
/* 폰트 끝 ================================================================================================================= */
/* 폰트 끝 ================================================================================================================= */

:root {
  --main-color: #f4efe6;
  --main-background: #1f2125;
}

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

img {
  vertical-align: middle;
}

body {
  max-width: 100vw;
  color: var(--main-color);
  background-color: var(--main-background);
  overflow-x: hidden;
}

a {
  color: var(--main-color);
}

/* 기본셋팅 ---------------- 기본셋팅 ---------------------- */
/* 기본셋팅 ---------------- 기본셋팅 ---------------------- */
/* 기본셋팅 ---------------- 기본셋팅 ---------------------- */

#header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999999999;
}

#header .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 25px;
  z-index: 10000;
}

#header .header h1 {
  width: 80px;
  text-align: justify;
  line-height: 1;
}

#header .header h1 a {
  font-size: 1rem;
  font-family: "SaintMonicaRegular";
  text-transform: uppercase;
  color: var(--main-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: space-between;
}

#header #nav {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
}

#header #nav .nav {
  width: 100%;
  height: 1px;
  background-color: var(--main-color);
  position: relative;
}

#header #nav .nav::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--main-color);
  left: 0;
  bottom: 6px;
}

/* //header ==========================================================================================*/

/* ///메인 섹션들 세로 정렬, 메인 3d -------------------------------------------------------------------------------*/
/* ///메인 섹션들 세로 정렬, 메인 3d -------------------------------------------------------------------------------*/
/* ///메인 섹션들 세로 정렬, 메인 3d -------------------------------------------------------------------------------*/

.body_container {
  overflow: hidden;
}

#section_title {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.body_container #webgl-canvas {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
}

#container1 {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  top: 20%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10.5vw;
  line-height: 1.05;
  font-family: "SaintMonicaRegular";
  text-align: center;
  transform-style: preserve-3d;
}

.title .title_top1 {
  text-transform: uppercase;
}

.title .title_top2 {
  text-transform: uppercase;
}

.title_bottom {
  text-align: center;
  font-size: 1.5vw;
  line-height: 0.9;
  line-height: 1.1;
}

/* title ======================================================================================================================*/

.section_arrow {
  width: 100vw;
  height: 60vh;
  margin: 20vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.arrow {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.arrow_img {
  width: 100%;
  height: 100%;
}

/* arrow ======================================================================================= */

.section_profile {
  width: 100vw;
  height: 100vh;
  background-color: var(--main-background);
}

.img_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile_img_wrap {
  width: 50%;
  height: 100%;
  align-self: flex-start;
  margin-left: 10vw;
  overflow: hidden;
  position: relative;
}

.profile_img {
  max-width: 100%;
  height: auto !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.profile_text_wrap {
  margin-bottom: -20vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 50vw;
  height: 60vh;
  /* background-color: red; */
  z-index: 1;
  margin-right: 5vw;
  font-size: 1vw;
  font-family: "Chosunilbo_myungjo";
}

.text1 {
  width: 38vw;
  margin-bottom: 15vh;
  margin-left: -8vw;
}

.text2 {
  width: 35vw;
  align-self: center;
  margin-bottom: 15vh;
}

.scroll_down {
  width: 12vw;
  height: 12vw;
  align-self: center;
  background-size: cover;
  position: relative;
  margin-right: -15vw;
}

.scroll_down > div {
  width: 10vw;
  height: 5vw;
  position: absolute;
  top: 52%;
  left: 51%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Migra-Extrabold";
  text-transform: uppercase;
  text-align: center;
  font-size: 1.3vw;
  line-height: 1.1;
  font-weight: 700;
}

/* profile ======================================================================================= */

.web_site {
  margin: 20vh 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.web_site h2 {
  font-family: "GrandSlang-Italic";
  font-size: 23vw;
  white-space: nowrap;
  animation: marquee 200s infinite linear;
  padding-left: var(—space);
  text-transform: capitalize;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-1000%);
  }
}

.web_site_wrap {
  margin-top: 30vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.web_contents {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-family: "SaintMonicaRegular";
}

.web_l {
  width: 48.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.web_l_img {
  margin-bottom: 20vh;
  transition: 0.5s;
}
.web_l_img:hover {
  transform: scale(1.05);
  cursor: pointer;
}
.web_r_img {
  margin-bottom: 20vh;
  transition: 0.5s;
}
.web_r_img:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.web_img_wrap {
  width: 100%;
  height: 50vh;
  overflow: hidden;
}

.web_img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web_img_t {
  margin-top: 25px;
  margin-bottom: 10px;
}

.web_t_r {
  transform: rotateX(90deg);
}

.web_title {
  font-size: 5vw;
  line-height: 1;
  text-transform: uppercase;
  transform: rotateX(90deg);
}

.web_ex {
  display: inline-block;
  margin-right: 4px;
  text-transform: lowercase;
  border: 1px solid var(--main-color);
  border-radius: 30px;
  font-size: 1vw;
  padding: 0 8px;
  text-align: center;
  margin-bottom: 5px;
}

.web_img_b {
  margin-top: 10px;
  transform: rotateX(90deg);
}

.web_r {
  margin-top: 40vh;
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* web_site ======================================================================================= */

#section_script {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
  left: 0;
}

.script_wrap {
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: black;
}

.script {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  text-transform: capitalize;
  font-family: "SaintMonicaRegular";
}

.script_t {
  width: 100%;
  padding: 25px 20vw;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
}

.script_b {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.script_l {
  width: 40vw;
  height: 85vh;
}
.script_l img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.script_r {
  padding-top: 15vh;
  margin-left: 80px;
  width: 40vw;
}

.script_skill {
  text-transform: lowercase;
  border: 1px solid var(--main-color);
  border-radius: 30px;
  font-size: 1vw;
  width: 6vw;
  text-align: center;
  margin-bottom: 1vw;
}

.script_title {
  font-size: 6vw;
  line-height: 1;
  margin-bottom: 2.5vw;
}

.script_ex {
  font-size: 1vw;
  margin-bottom: 1vw;
}

.script_view_wrap {
  display: flex;
}

.play_game {
  font-size: 18px;
}

.code_view {
  font-size: 18px;
}

.script_view_wrap div a {
  color: var(--main-color);
  margin-right: 30px;
}

.animation_field h2 {
  margin-top: 20vh;
  font-family: "GrandSlang-Italic";
  font-size: 23vw;
  white-space: nowrap;
  animation: marquee 200s infinite linear;
  padding-left: var(—space);
}

#animation_field {
  width: 100vw;
  position: relative;
  text-transform: capitalize;
}

.animation_wrap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin: 35vh 0;
  padding: 0 2vw;
  position: relative;
}

.animation_wrap:last-child {
  margin-bottom: 0;
}

.ani_num {
  font-size: 1.2vw;
  font-family: "FoundersGrotesk-Light";
  margin-right: 5vw;
}

.animation {
  display: flex;
  text-transform: uppercase;
  font-family: "OPTICuento";
  width: 60vw;
  margin-bottom: -1vh;
  position: relative;
}

.move_img_wrap {
  position: absolute;
  width: 550px;
  height: 550px;
  z-index: 9999;
  user-select: none;
  pointer-events: none;
  top: -35%;
  left: 5%;
}

.watch-face {
  height: 125px;
  width: 125px;
  animation: pulse 4s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
  position: absolute;
  top: 40%;
  left: 38%;
}

.circle {
  height: 125px;
  width: 125px;
  border-radius: 50%;
  position: absolute;
  mix-blend-mode: screen;
  animation: center 1s infinite;
}

.circle:nth-child(odd) {
  background: #61bea2;
}

.circle:nth-child(even) {
  background: #529ca0;
}

.circle:nth-child(1) {
  animation: circle-1 2s ease alternate infinite;
}

.circle:nth-child(2) {
  animation: circle-2 2s ease alternate infinite;
}

.circle:nth-child(3) {
  animation: circle-3 2s ease alternate infinite;
}

.circle:nth-child(4) {
  animation: circle-4 2s ease alternate infinite;
}

.circle:nth-child(5) {
  animation: circle-5 2s ease alternate infinite;
}

.circle:nth-child(6) {
  animation: circle-6 2s ease alternate infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.15) rotate(180deg);
  }

  100% {
    transform: scale(2);
  }
}

@keyframes circle-1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-35px, -50px);
  }
}

@keyframes circle-2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(35px, 50px);
  }
}

@keyframes circle-3 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-60px, 0);
  }
}

@keyframes circle-4 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(60px, 0);
  }
}

@keyframes circle-5 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-35px, 50px);
  }
}

@keyframes circle-6 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(35px, -50px);
  }
}

/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
/* circle 애니메이션 끝!____________________________________________________ */
.animation_box_cube {
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotatex(-30deg) rotatey(-140deg);
  animation: rotate 4s linear infinite;
}

.cube div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  opacity: 0.75;
  top: 0;
  left: 50%;
  color: #fff;
}

.cube div:nth-child(1) {
  background: #512da8;
  transform: rotatex(90deg) translatey(-100px);
  transform-origin: center top;
  animation: top 4s 4s ease-in-out infinite;
}

.cube div:nth-child(2) {
  background: #512da8;
  transform-origin: center bottom;
  transform: rotatex(-90deg) translatey(100px);
  animation: bottom 4s 4s ease-in-out infinite;
}

.cube div:nth-child(3) {
  background: #673ab7;
  transform-origin: left center;
  transform: rotatey(-90deg) translatex(-100px);
  animation: left 4s 4s ease-in-out infinite;
}

.cube div:nth-child(4) {
  background: #673ab7;
  transform-origin: right center;
  transform: rotatey(90deg) translatex(100px);
  animation: right 4s 4s ease-in-out infinite;
}

.cube div:nth-child(5) {
  background: #7e57c2;
  transform-origin: center center;
  transform: rotatex(0deg) translatey(0px);
  animation: front 4s 4s ease-in-out infinite;
}

.cube div:nth-child(6) {
  background: #7e57c2;
  transform-origin: center center;
  transform: rotatey(180deg) translatez(100px);
  animation: back 4s 4s ease-in-out infinite;
}

@keyframes rotate {
  0% {
    transform: rotatex(0) rotatey(0) rotatez(0) translatez(0);
  }

  100% {
    transform: rotatex(360deg) rotatey(360deg) rotatez(360deg) translatez(0);
  }
}

@keyframes top {
  0% {
    transform: rotatex(90deg) translatey(-100px) translatez(0);
  }

  50% {
    transform: rotatex(90deg) translatey(-100px) translatez(100px);
  }

  100% {
    transform: rotatex(90deg) translatey(-100px) translatez(0);
  }
}

@keyframes bottom {
  0% {
    transform: rotatex(-90deg) translatey(100px) translatez(0);
  }

  50% {
    transform: rotatex(-90deg) translatey(100px) translatez(100px);
  }

  100% {
    transform: rotatex(-90deg) translatey(100px) translatez(0);
  }
}

@keyframes left {
  0% {
    transform: rotatey(-90deg) translatex(-100px) scaley(1);
  }

  50% {
    transform: rotatey(-90deg) translatex(-100px) scaley(3);
  }

  100% {
    transform: rotatey(-90deg) translatex(-100px) scaley(1);
  }
}

@keyframes right {
  0% {
    transform: rotatey(90deg) translatex(100px) scaley(1);
  }

  50% {
    transform: rotatey(90deg) translatex(100px) scaley(3);
  }

  100% {
    transform: rotatey(90deg) translatex(100px) scaley(1);
  }
}

@keyframes front {
  0% {
    transform: rotatex(0deg) translatex(0px) scaley(1);
  }

  50% {
    transform: rotatex(0deg) translatex(0px) scaley(3);
  }

  100% {
    transform: rotatex(0deg) translatex(0px) scaley(1);
  }
}

@keyframes back {
  0% {
    transform: rotatey(180deg) translatez(100px) scaley(1);
  }

  50% {
    transform: rotatey(180deg) translatez(100px) scaley(3);
  }

  100% {
    transform: rotatey(180deg) translatez(100px) scaley(1);
  }
}

/* 큐브 애니메이션 끝_____________________________________________________________ */
/* 큐브 애니메이션 끝_____________________________________________________________ */

figure {
  width: 210px;
  height: 210px;
  animation: rotation 7s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -105px;
  margin-left: -105px;
  transform-style: preserve-3d;
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: center;
}

.face div {
  border: 6px double #ab86ef;
  width: 70px;
  height: 70px;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
}

.front {
  transform: translate3d(0, 0, 105px);
}

.back {
  transform: rotateY(180deg) translate3d(0, 0, 105px);
}

.left {
  transform: rotateY(-90deg) translate3d(0, 0, 105px);
}

.right {
  transform: rotateY(90deg) translate3d(0, 0, 105px);
}

.top {
  transform: rotateX(90deg) translate3d(0, 0, 105px);
}

.bottom {
  transform: rotateX(-90deg) translate3d(0, 0, 105px);
}

@keyframes rotation {
  from {
    transform: rotateY(0) rotateX(0);
  }

  to {
    transform: rotateY(-360deg) rotateX(360deg);
  }
}

/* 큐브 애니메이션 2222222222222222 ------------------------------------------------*/
/* 큐브 애니메이션 2222222222222222 ------------------------------------------------*/
/* 큐브 애니메이션 2222222222222222 ------------------------------------------------*/

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateZ(0);
  }

  20% {
    transform: rotateX(60deg) rotateZ(0);
  }

  40% {
    transform: rotateX(60deg) rotateZ(60deg);
  }

  60% {
    transform: rotateX(60deg) rotateZ(60deg) rotateX(90deg);
  }

  80% {
    transform: rotateY(120deg) rotateX(120deg) rotateZ(30deg);
  }

  100% {
    transform: rotateY(0) rotateX(0) rotateZ(0);
  }
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  overflow: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.circle1 {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: rotate 5s infinite;
  transform-origin: center center;
}

div.side {
  background: rgba(255, 255, 255, 0.3);
  width: 300px;
  height: 300px;
  transform: rotateX(0deg);
  border-radius: 50%;
  position: absolute;
  background: rgba(174, 235, 243, 0.25);
}

div.side:nth-child(2) {
  transform: rotateX(30deg);
}

div.side:nth-child(3) {
  transform: rotateX(60deg);
}

div.side:nth-child(4) {
  transform: rotateX(90deg);
}

div.side:nth-child(5) {
  transform: rotateX(120deg);
}

div.side:nth-child(6) {
  transform: rotateX(150deg);
}

/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */
/* circle 애니메이션 -------------------------------------------------------------------------- */

.ani {
  transform-style: preserve-3d;
  font-size: 14vw;
  width: 14vw;
  line-height: 14vw;
}

.animation:hover .move_img_wrap {
  transition: 0.2s;
  opacity: 1;
}

.animation:not(:hover) .move_img_wrap {
  transition: 0.2s;
  opacity: 0;
}

.animation:hover .animation1 {
  transform: rotateX(90deg);
  transition: 0.7s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation1 {
  transform: rotateX(0deg);
  transition: 1.3s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation2 {
  transform: rotateX(90deg);
  transition: 0.8s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation2 {
  transform: rotateX(0deg);
  transition: 1.2s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation3 {
  transform: rotateX(90deg);
  transition: 0.9s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation3 {
  transform: rotateX(0deg);
  transition: 1.1s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation4 {
  transform: rotateX(90deg);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation4 {
  transform: rotateX(0deg);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation5 {
  transform: rotateX(90deg);
  transition: 1.1s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation5 {
  transform: rotateX(0deg);
  transition: 0.9s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation6 {
  transform: rotateX(90deg);
  transition: 1.2s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation6 {
  transform: rotateX(0deg);
  transition: 0.8s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation7 {
  transform: rotateX(90deg);
  transition: 1.3s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation7 {
  transform: rotateX(0deg);
  transition: 0.7s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation8 {
  transform: rotateX(90deg);
  transition: 1.4s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation8 {
  transform: rotateX(0deg);
  transition: 0.6s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:hover .animation9 {
  transform: rotateX(90deg);
  transition: 1.5s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation:not(:hover) .animation9 {
  transform: rotateX(0deg);
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.72, 0.005, 0.24, 1);
}

.animation_front {
  display: flex;
  justify-content: center;
  transform: rotateX(-90deg) translateZ(180px);
  margin-bottom: -200px;
}

.animation_back {
  display: flex;
  justify-content: center;
  transform: translateZ(100px);
}

/* animation ======================================================================================= */

.meaningful {
  z-index: 1;
  width: 100vw;
  height: 100vh;
  font-family: "SaintMonicaRegular";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20vh;
  padding: 20vh 0;
}

.meaningful_t {
  width: 63vw;
  display: flex;
  justify-content: space-between;
  align-items: end;
  line-height: 1;
  margin-bottom: 5vh;
}

.create {
  text-align: center;
  font-size: 3.5vw;
  font-family: "GrandSlang-Italic";
  transform: rotateX(90deg);
  opacity: 0;
  transition: 0.5s;
}

.meaningful:hover .create {
  transform: rotate(0deg);
  opacity: 1;
}

.somthing {
  font-size: 12vw;
  line-height: 0.7;
  transform: rotateX(90deg);
  opacity: 0;
  transition: 0.5s;
}

.meaningful:hover .somthing {
  transform: rotate(0deg);
  opacity: 1;
}

.meaningful_b {
  font-size: 10.5vw;
  line-height: 0.8;
  margin-bottom: 1.5vh;
  transform: rotateX(90deg);
  opacity: 0;
  transition: 0.5s;
}

.meaningful:hover .meaningful_b {
  transform: rotate(0deg);
  opacity: 1;
}

.together {
  font-size: 3vw;
  text-transform: uppercase;
  font-family: "SaintMonicaItalic";
  transform: rotateX(90deg);
  opacity: 0;
  transition: 0.5s;
}

.meaningful:hover .together {
  transform: rotate(0deg);
  opacity: 1;
}

/* meaningful------------------------------------------------------------------ */

.contact_name {
  margin-bottom: -35vh;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  text-transform: capitalize;
  z-index: -99999999;
}

.contact_name h2 {
  position: absolute;
  top: 20%;
  transform: translateY(-50%);
  font-family: "GrandSlang-Italic";
  font-size: 30vw;
  line-height: 1;
  z-index: -50000000;
}

.contact_name h2 {
  —space: 4vw;
  white-space: nowrap;
  animation: hook 100s infinite linear;
  padding-left: var(—space);
}

.contact_name h2 {
  content: attr(data-text);
  padding-left: var(—space);
}

@keyframes hook {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* contact_name======================================================================================= */

.contact_field {
  width: 100%;
  height: 40vh;
  color: var(--main-background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.contact_bubble {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -50vw;
  width: 200vw;
  height: 150vh;
  background-color: var(--main-color);
  border-radius: 50%;
  z-index: -2;
}

.return {
  font-size: 1vw;
  border-bottom: 1px solid var(--main-background);
  font-family: "SaintMonicaRegular";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -7%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  line-height: 1;
  width: 12vw;
  height: 7vh;
  border-radius: 30px;
}

.return i {
  margin-right: 5px;
  font-size: 0.7vw;
}
.return a {
  color: var(--main-background);
}

.contact_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  width: 80vw;
  margin-bottom: -5%;
}

.contact_ex {
  width: 80vw;
  font-family: "SaintMonicaRegular";
  font-size: 1.5vw;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2.5vh;
}

.contact_me {
  display: flex;
  justify-content: center;
  align-items: start;
  font-family: "SaintMonicaRegular";
  font-size: 1vw;
  margin-bottom: 2.5vh;
}

.contact_me > div {
  margin-left: 1vw;
}

.email {
  display: flex;
  align-items: end;
}

.phone {
  display: flex;
  align-items: end;
}

.adress {
  display: flex;
  align-items: end;
}

.name {
  font-weight: 900;
  font-size: 1.2vw;
}

.sub {
  margin-left: 0.5vw;
}

.contact_left {
  margin-right: 2vw;
}

.sns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 12vw;
}

.sns li {
  width: 2vw;
}

/* contact_field======================================================================================= */
/* contact_field======================================================================================= */

@media (max-width: 800px) {
  body {
    display: none;
  }
  html {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  html::after {
    z-index: 999999;
    width: 100vw;
    height: 100vh;
    background-color: #1f2125;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  html::before {
    z-index: 9999999;
    width: 100vw;
    height: 100vh;
    content: "sorry, desktop and laptop only...";
    color: var(--main-color);
    position: absolute;
    font-size: 5vw;
    font-family: "SaintMonicaRegular";
    text-transform: capitalize;
    text-align: center;
    line-height: 100vh;
  }
}