@charset "UTF-8";
@import "/reset.css";
@font-face {
  font-family: "MonumentExtended-Ultrabold";
  src: url(./font/MonumentExtended-Ultrabold.otf);
}
@font-face {
  font-family: "MonumentExtended-Regular";
  src: url(./font/MonumentExtended-Regular.otf);
}
@font-face {
  font-family: "Pretendard-Thin";
  src: url(./font/Pretendard-Thin.otf);
}
@font-face {
  font-family: "Pretendard-Medium";
  src: url(./font/Pretendard-Medium.otf);
}
@font-face {
  font-family: "Pretendard-Black";
  src: url(./font/Pretendard-Black.otf);
}
iframe img {
  width: 100%;
}

body {
  background-color: #111111;
  margin: 0;
  overflow-x: hidden;
  font-family: "Pretendard-Medium";
  position: relative;
  text-transform: uppercase;
}

.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url(./img/intro/noise-transparent.png) repeat 0 0;
  background-repeat: repeat;
  -webkit-animation: 1s steps(4) bg-animation 0.5s infinite;
          animation: 1s steps(4) bg-animation 0.5s infinite;
  opacity: 0.9;
  visibility: visible;
  z-index: 999;
  pointer-events: none;
}

@-webkit-keyframes bg-animation {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -5%);
  }
  20% {
    transform: translate(-10%, 5%);
  }
  30% {
    transform: translate(5%, -10%);
  }
  40% {
    transform: translate(-5%, 15%);
  }
  50% {
    transform: translate(-10%, 5%);
  }
  60% {
    transform: translate(15%, 0);
  }
  70% {
    transform: translate(0, 10%);
  }
  80% {
    transform: translate(-15%, 0);
  }
  90% {
    transform: translate(10%, 5%);
  }
  100% {
    transform: translate(5%, 0);
  }
}

@keyframes bg-animation {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -5%);
  }
  20% {
    transform: translate(-10%, 5%);
  }
  30% {
    transform: translate(5%, -10%);
  }
  40% {
    transform: translate(-5%, 15%);
  }
  50% {
    transform: translate(-10%, 5%);
  }
  60% {
    transform: translate(15%, 0);
  }
  70% {
    transform: translate(0, 10%);
  }
  80% {
    transform: translate(-15%, 0);
  }
  90% {
    transform: translate(10%, 5%);
  }
  100% {
    transform: translate(5%, 0);
  }
}
/* .load {
  z-index: 700;
  width: 100vw;
  height: 100vh;
  background: #d0cfc5;
  position: absolute;
}
.load .loading {
  position: absolute;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation: rotate-move 2s ease-in-out infinite;
          animation: rotate-move 2s ease-in-out infinite;
}
.load .loading .dot {
  width: 70px;
  height: 70px;
  border-radius: 80%;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.load .loading .dot.dot-3 {
  background-color: #ffffff;
  -webkit-animation: dot-3-move 2s ease infinite;
          animation: dot-3-move 2s ease infinite;
}
.load .loading .dot.dot-2 {
  background-color: #000000;
  -webkit-animation: dot-2-move 2s ease infinite;
          animation: dot-2-move 2s ease infinite;
}
.load .loading .dot.dot-1 {
  background-color: #1226aa;
  -webkit-animation: dot-1-move 2s ease infinite;
          animation: dot-1-move 2s ease infinite;
} */

::-moz-selection {
  background: #1226aa;
}

::selection {
  background: #1226aa;
}

::-webkit-scrollbar {
  display: none;
}

.remote {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  z-index: 300;
}
.remote li {
  width: 15px;
  height: 15px;
  margin: 6px 0;
}
.remote li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}
.remote li a.black span {
  width: 100%;
  height: 100%;
  border: 3px solid #000;
  background: transparent;
}
.remote li a.white span {
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  background: transparent;
}
.remote li a span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.remote li .name {
  text-align: center;
  position: absolute;
  right: 50%;
  margin-right: 20px;
  color: #eee;
  opacity: 0;
  transition: 0.35s;
}
.remote li:hover .name {
  opacity: 1;
}

section {
  position: relative;
}

#intro {
  background: #d0cfc5;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#intro .titleContainer {
  z-index: 10;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translatex(-50%);
}
#intro .titleContainer .sub_title {
  position: relative;
  top: 0;
  width: 1400px;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#intro .titleContainer .sub_title span.line {
  display: block;
  width: 75%;
  height: 2px;
  position: relative;
}
#intro .titleContainer .sub_title span.line::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #000;
  -webkit-animation: slideUp02 1s both, wipe 1s both;
          animation: slideUp02 1s both, wipe 1s both;
  /* -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s; */
}
#intro .titleContainer .sub_title span.sub_text {
  font-family: "Pretendard-Medium";
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 1px;
  -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
          animation: slideUp02 1s both, fadeIn 1.2s both;
  /* -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s; */
}
#intro .titleContainer .sub_title span.particle img {
  width: 45px;
  height: 45px;
  -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
          animation: slideUp02 1s both, fadeIn 1.2s both;
  /* -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s; */
}
#intro .titleContainer .titleStyle_black {
  font-size: 10rem;
  color: #000;
}
#intro .titleContainer .titleStyle_stroke {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 3px #000;
  letter-spacing: 3px;
}
#intro .titleContainer .typing-txt01,
#intro .titleContainer .typing-txt02 {
  display: none;
  color: #000;
  font-family: "MonumentExtended-Ultrabold";
  transition: color 0.3s;
  -webkit-text-stroke: 3px #fff;
}
#intro .titleContainer .typing-txt01 {
  width: 100%;
  mix-blend-mode: screen;
  z-index: 3;
}
#intro .titleContainer .main_tit02 {
  width: 100%;
  color: #fff;
  z-index: 1;
}
#intro .titleContainer .typing ul li {
  display: block;
  font-family: "MonumentExtended-Ultrabold";
}
#intro .titleContainer .typing ul li.on {
  display: inline-block;
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
#intro .door {
  position: absolute;
  width: 300px;
  height: 500px;
  background-image: url(./img/intro/noise\(2\).gif);
  background-size: cover;
  background-position: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 150px 150px 0 0;
  opacity: 0.6;
  transition: 0.35s;
  z-index: 2;
}
#intro .door.on {
  opacity: 0.8;
  transition: all 1s;
}
#intro .door.on::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(50px);
          backdrop-filter: blur(50px);
}
#intro .scrolldown {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(37, 39, 29, 0.2);
  border-radius: 50%;
  -webkit-animation: fadeIn 1s 5s both;
          animation: fadeIn 1s 5s both;
}
#intro .scrolldown p.mouse_outline {
  width: 30px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid #fff;
}
#intro .scrolldown p.mouse_wheel {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  top: 8px;
  left: calc(50% - 2px);
  animation: slideUp02 2s ease-in-out reverse infinite;
}
#intro .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  top: 50%;
  letter-spacing: 5px;
}

@-webkit-keyframes wipe {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes wipe {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes slideUp01 {
  0% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-2px);
  }
}
@keyframes slideUp01 {
  0% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-2px);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes slideUp02 {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(2px);
  }
}
@keyframes slideUp02 {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(2px);
  }
}
@-webkit-keyframes blink {
  0% {
    border-right: 3px solid #000;
  }
  50% {
    border-right: 3px solid transparent;
  }
  100% {
    border-right: 3px solid #000;
  }
}
@keyframes blink {
  0% {
    border-right: 3px solid #000;
  }
  50% {
    border-right: 3px solid transparent;
  }
  100% {
    border-right: 3px solid #000;
  }
}
@-webkit-keyframes dot-3-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translateY(-18px) scale(0.45);
  }
  60% {
    transform: translateY(-40px) scale(0.45);
  }
  80% {
    transform: translateY(-40px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@keyframes dot-3-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translateY(-18px) scale(0.45);
  }
  60% {
    transform: translateY(-40px) scale(0.45);
  }
  80% {
    transform: translateY(-40px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@-webkit-keyframes dot-2-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(-16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(-40px, 40px) scale(0.45);
  }
  80% {
    transform: translate(-40px, 40px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@keyframes dot-2-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(-16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(-40px, 40px) scale(0.45);
  }
  80% {
    transform: translate(-40px, 40px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@-webkit-keyframes dot-1-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(40px, 40px) scale(0.45);
  }
  80% {
    transform: translate(40px, 40px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@keyframes dot-1-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(16px, 12px) scale(0.45);
  }
  60% {
    transform: translate(40px, 40px) scale(0.45);
  }
  80% {
    transform: translate(40px, 40px) scale(0.45);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@-webkit-keyframes rotate-move {
  55% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-move {
  55% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#tabmenu {
  overflow: hidden;
  z-index: 500;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: #1226aa;
  font-family: "MonumentExtended-Ultrabold";
  font-style: italic;
}
#tabmenu ul.menu {
  color: #fff;
  font-size: 3.5rem;
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  letter-spacing: 3px;
}
#tabmenu ul.menu li {
  padding: 10px;
}
#tabmenu ul.menu li .glitch {
  position: relative;
  mix-blend-mode: lighten;
}
#tabmenu ul.menu li .glitch::before,
#tabmenu ul.menu li .glitch :after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  width: 100%;
  background: black;
  clip: rect(0, 0, 0, 0);
}
#tabmenu ul.menu li .glitch:before {
  left: -1px;
  text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
}
#tabmenu ul.menu li .glitch:after {
  left: 1px;
  text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
}
#tabmenu ul.menu li .glitch:hover:before {
  text-shadow: 4px 0 rgba(255, 0, 0, 0.7);
  animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
}
#tabmenu ul.menu li .glitch:hover:after {
  text-shadow: -5px 0 rgba(0, 0, 255, 0.7);
  animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
}
#tabmenu .menu_door {
  width: 450px;
  height: 750px;
  background: url(./img/tabmenu/TABMENU.gif);
  background-position: center;
  background-size: cover;
  border-radius: 250px 250px 0 0;
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

@-webkit-keyframes glitch-loop-1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }
}

@keyframes glitch-loop-1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }
}
@-webkit-keyframes glitch-loop-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
  }
  50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
  }
  75% {
    top: 0px;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
  }
  100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}
@keyframes glitch-loop-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
  }
  50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
  }
  75% {
    top: 0px;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
  }
  100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}
#publishing {
  background: #111111;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#publishing .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #ffdc00;
  z-index: 20;
}
#publishing .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #ffdc00;
  display: inline-block;
}
#publishing .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
}
#publishing .wrap {
  z-index: 10;
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
}
#publishing .wrap .projectContainer ul {
  font-family: "MonumentExtended-Ultrabold";
  color: transparent;
  outline: 1px transparent;
  position: relative;
}
#publishing .wrap .projectContainer ul li a {
  -webkit-text-stroke: 1px #fff;
  letter-spacing: 2px;
}
#publishing .wrap .projectContainer ul li a::before {
  content: attr(data-text);
  position: absolute;
  width: 0;
  overflow: hidden;
  color: #ffdc00;
  -webkit-text-stroke: 1px #ffdc00;
  transition: all 0.35s cubic-bezier(0.29, 0.73, 0.74, 1.02);
}
#publishing .wrap .projectContainer .list [data-animation] a::before,
#publishing .wrap .projectContainer .list a:hover::before {
  width: 100%;
}
#publishing .wrap .view {
  padding-top: 20px;
  color: #fff;
  display: flex;
  align-items: center;
}
#publishing .wrap .view a {
  font-family: "Pretendard-Black";
  font-style: italic;
  padding-right: 10px;
}
#publishing .wrap .view .line {
  height: 2px;
  width: 60%;
  background: #fff;
}
#publishing .wrap .view_all {
  color: #ffdc00;
  font-family: "Pretendard-Black";
  font-style: italic;
  padding-right: 10px;
}
#publishing .thum_door {
  position: absolute;
  width: 600px;
  height: 800px;
  background: url(./img/publishing/megacoffe.png);
  background-position: center;
  bottom: 0;
  right: 15%;
  border-radius: 350px 350px 0 0;
  transition: 0.35s;
}
#publishing .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: -50px;
  top: 50%;
  letter-spacing: 5px;
  color: #fff;
}

#appteamproject {
  background: #111111;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#appteamproject .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #ff5900;
  z-index: 20;
}
#appteamproject .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #ff5900;
  display: inline-block;
  color: #ff5900;
}
#appteamproject .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
  color: #ff5900;
}
#appteamproject .wrap {
  z-index: 10;
}
#appteamproject .wrap .project_title p {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 5rem;
  color: transparent;
  -webkit-text-stroke: 2px #ff5900;
  letter-spacing: 2px;
  position: absolute;
  left: -40%;
  top: -40%;
}
#appteamproject .wrap .project_title p::after {
  content: "|";
  -webkit-animation: blink02 ease 1s infinite;
          animation: blink02 ease 1s infinite;
}
#appteamproject .wrap .project_desc {
  color: #fff;
  width: 500px;
  line-height: 1.6rem;
  font-size: 0.8rem;
}
#appteamproject .wrap .view {
  padding-top: 50px;
  color: #ff5900;
  display: flex;
  align-items: center;
}
#appteamproject .wrap .view a {
  font-family: "Pretendard-Black";
  font-style: italic;
  padding-right: 10px;
  font-size: 1.2rem;
}
#appteamproject .wrap .view .line {
  height: 2px;
  width: 77%;
  background: #ff5900;
}
#appteamproject .wrap .over_view {
  color: #fff;
}
#appteamproject .wrap .over_view a {
  font-family: "Pretendard-Black";
  font-style: italic;
  padding-right: 10px;
  font-size: 1.2rem;
}
#appteamproject .project_door {
  position: absolute;
  width: 800px;
  height: 600px;
  background: url(./img/teamproject/006.png);
  background-position: center;
  background-size: 150%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 0 350px 350px 0;
}
#appteamproject .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: -50px;
  top: 50%;
  letter-spacing: 5px;
  color: #000;
}
#appteamproject .appproject_slide {
  width: 250px;
  height: 528px;
}
#appteamproject .appproject_slide .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
#appteamproject .appproject_slide .swiper-slide img {
  width: 100%;
}

@-webkit-keyframes blink02 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink02 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#pcteamproject {
  background: #111111;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#pcteamproject .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #006ecd;
  z-index: 20;
}
#pcteamproject .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #006ecd;
  display: inline-block;
}
#pcteamproject .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
  color: #006ecd;
}
#pcteamproject .wrap .project_title p {
  z-index: 20;
  font-family: "MonumentExtended-Ultrabold";
  font-size: 5rem;
  color: transparent;
  -webkit-text-stroke: 2px #006ecd;
  letter-spacing: 2px;
  position: absolute;
  right: 20%;
  bottom: 20%;
}
#pcteamproject .wrap .project_title p::after {
  content: "|";
  -webkit-animation: blink02 ease 1s infinite;
          animation: blink02 ease 1s infinite;
}
#pcteamproject .wrap .wrap {
  position: absolute;
  right: 32%;
  top: 40%;
}
#pcteamproject .wrap .wrap .view {
  z-index: 20;
  color: #006ecd;
  display: flex;
  align-items: center;
  width: 300px;
}
#pcteamproject .wrap .wrap .view a {
  font-family: "Pretendard-Black";
  font-style: italic;
  padding-right: 10px;
  font-size: 1.2rem;
}
#pcteamproject .wrap .wrap .view .line {
  height: 2px;
  width: 50%;
  background: #006ecd;
}
#pcteamproject .wrap .wrap .over_view {
  margin-top: 30px;
  z-index: 20;
  color: #fff;
  width: 300px;
}
#pcteamproject .wrap .wrap .over_view a {
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 1.2rem;
}
#pcteamproject .project_door {
  z-index: 2;
  position: absolute;
  width: 600px;
  height: 800px;
  background: url(./img/webproject/001.png);
  background-position: center;
  background-size: 100%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 350px 350px 0 0;
  transition: 0.35s;
}
#pcteamproject .project_door:hover {
  transform: translateX(-50%) scale(1.1);
}
#pcteamproject .background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  z-index: 1;
}
#pcteamproject .background video {
  width: 100%;
}
#pcteamproject .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: -50px;
  top: 50%;
  letter-spacing: 5px;
  color: #fff;
}

#graphic {
  background: #111111;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transition: 0.35s;
}
#graphic .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #fff;
  z-index: 20;
}
#graphic .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #fff;
  display: inline-block;
}
#graphic .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
}
#graphic .wrap {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
}
#graphic .wrap .row1 {
  background: url(./img/graphic/001.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#graphic .wrap .row1 .flow {
  -webkit-animation: textLoop 15s linear infinite;
          animation: textLoop 15s linear infinite;
  padding-right: 1.4881vw;
}
#graphic .wrap .row2 {
  background: url(./img/graphic/002.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#graphic .wrap .row2 .flow {
  -webkit-animation: textLoop 10s linear infinite;
          animation: textLoop 10s linear infinite;
  padding-right: 1.4881vw;
}
#graphic .wrap .row3 {
  background: url(./img/graphic/003.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#graphic .wrap .row3 .flow {
  -webkit-animation: textLoop 10s linear infinite;
          animation: textLoop 10s linear infinite;
  padding-right: 1.4881vw;
}
#graphic .wrap .row4 {
  background: url(./img/graphic/004.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#graphic .wrap .row4 .flow {
  -webkit-animation: textLoop 3s linear infinite;
          animation: textLoop 3s linear infinite;
  padding-right: 1.4881vw;
}
#graphic .wrap .row5 {
  background: url(./img/graphic/005.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#graphic .wrap .row5 .flow {
  -webkit-animation: textLoop 10s linear infinite;
          animation: textLoop 10s linear infinite;
  padding-right: 1.4881vw;
}
#graphic .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: 5px;
  top: 50%;
  letter-spacing: 5px;
  color: #fff;
}

@-webkit-keyframes text_flow {
  from {
    transform: translate(0%);
  }
  to {
    transform: translate(-100%);
  }
}

@keyframes text_flow {
  from {
    transform: translate(0%);
  }
  to {
    transform: translate(-100%);
  }
}
#aboutme01 {
  background: #d0cfc5;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#aboutme01 .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #000;
  z-index: 20;
}
#aboutme01 .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  display: inline-block;
}
#aboutme01 .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
}
@-webkit-keyframes type {
  0% {
    width: 0;
  }
  50% {
    width: 8.2em;
  }
}
@keyframes type {
  0% {
    width: 0;
  }
  50% {
    width: 8.2em;
  }
}
#aboutme01 .wrap {
  width: 100vw;
  height: 100vh;
  background: #ebebeb;
  border-radius: 50px 50px 0 0;
}
#aboutme01 .wrap .text-typing {
  overflow: hidden;
  white-space: nowrap;
  width: 8.2em;
  animation: type 2s steps(12) alternate-reverse infinite, blink 1s linear infinite;
  margin: 0;
  padding: 0;
  border-right: 0.1em solid;
}
#aboutme01 .wrap .desc {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
}
#aboutme01 .wrap .desc .desc_title {
  font-family: "MonumentExtended-Regular";
  font-size: 2rem;
  color: #1226aa;
  padding-bottom: 30px;
}
#aboutme01 .wrap .desc .text {
  font-family: "Pretendard-Medium";
  word-wrap: break-word;
  word-break: keep-all;
  font-stretch: 0.8;
  line-height: 1.5rem;
}
#aboutme01 .box {
  position: absolute;
  width: 100%;
  height: 400px;
  background: url(./img/aboutme/ABOUTME_1.gif);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
}
#aboutme01 .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: 5px;
  top: 50%;
  letter-spacing: 5px;
  color: #000;
}

#aboutme02 {
  background: #ebebeb;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#aboutme02 .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #000;
  z-index: 20;
}
#aboutme02 .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  display: inline-block;
}
#aboutme02 .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
}
#aboutme02 .desc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#aboutme02 .desc .desc_title {
  font-family: "Pretendard-Medium";
  color: #1226aa;
  padding: 30px;
}
#aboutme02 .desc h2 {
  font-family: "MonumentExtended-Regular";
  color: #1226aa;
  font-size: 2.2rem;
  letter-spacing: 2px;
  padding-bottom: 30px;
}
#aboutme02 .desc .text {
  font-family: "Pretendard-Medium";
  word-wrap: break-word;
  word-break: keep-all;
  padding-bottom: 50px;
}
#aboutme02 .desc h1 {
  padding-bottom: 50px;
}
#aboutme02 .desc .text02 {
  font-family: "Pretendard-Medium";
  word-wrap: break-word;
  word-break: keep-all;
  color: #959595;
}
#aboutme02 .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: 5px;
  top: 50%;
  letter-spacing: 5px;
  color: #000;
}

#aboutme03 {
  background: #ebebeb;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#aboutme03 .title {
  position: relative;
  left: 10%;
  top: 3%;
  color: #000;
  z-index: 20;
}
#aboutme03 .title h2 {
  font-family: "MonumentExtended-Ultrabold";
  font-size: 3rem;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  display: inline-block;
}
#aboutme03 .title h1 {
  position: absolute;
  left: 5%;
  top: -70%;
  font-family: "Pretendard-Black";
  font-style: italic;
  font-size: 9rem;
  line-height: 5rem;
}
#aboutme03 .desc {
  width: 1500px;
}
#aboutme03 .desc .left {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#aboutme03 .desc .left .desc_title {
  font-family: "MonumentExtended-Ultrabold";
  color: #1226aa;
  padding: 30px 0;
  -webkit-text-stroke: 2px #1226aa;
  font-size: 3rem;
  color: transparent;
}
#aboutme03 .desc .left .text {
  word-wrap: break-word;
  word-break: keep-all;
  padding-bottom: 50px;
  line-height: 1.8rem;
}
#aboutme03 .desc .left .text span {
  color: #1226aa;
  font-size: 1.5rem;
  font-weight: bold;
  padding-right: 10px;
}
#aboutme03 .desc .left .prog .bar {
  padding: 5px 0;
}
#aboutme03 .desc .center {
  font-style: italic;
  color: #fff;
  text-align: center;
  width: 300px;
  height: 500px;
  border-radius: 150px 150px 0 0;
  background: url(./img/aboutme/aboutme_3.gif);
  background-position: 65%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  -webkit-animation: hvr-wobble-horizontal 1.3s ease-out infinite;
          animation: hvr-wobble-horizontal 1.3s ease-out infinite;
}
#aboutme03 .desc .center:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
#aboutme03 .desc .center::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 150px 150px 0 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#aboutme03 .desc .center:hover .door {
  transform: rotateY(-90deg);
}
#aboutme03 .desc .center .text {
  text-align: center;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#aboutme03 .desc .center .door {
  width: 300px;
  height: 500px;
  border-radius: 150px 150px 0 0;
  background: #000;
  transform-style: preserve-3d;
  transform-origin: right;
  transition: all 0.5s;
  position: absolute;
  left: 0;
  top: 0;
}
#aboutme03 .desc .center .door::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 15px;
  background-color: white;
  border-radius: 50%;
}
#aboutme03 .desc .right {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#aboutme03 .desc .right .text01 span {
  font-weight: bold;
  color: #1226aa;
}
#aboutme03 .desc .right .text01 p {
  line-height: 1.5rem;
}
#aboutme03 .desc .right .text01 .text_desc {
  padding-bottom: 10px;
}
#aboutme03 .desc .right .text02 {
  line-height: 1.5rem;
}
#aboutme03 .subtitle {
  position: absolute;
  transform: rotate(-90deg) translatey(-50%);
  left: 5px;
  top: 50%;
  letter-spacing: 5px;
  color: #000;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  /* 숨기기 */
  z-index: -1;
  opacity: 0;
}
.background .window {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
}
.background .window .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  opacity: 0;
}
.background .window .show .popup {
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}

.show {
  opacity: 1;
  z-index: 1000;
  transition: all 0.5s;
}

.graphic01 {
  width: 30%;
}
.graphic01 img {
  width: 100%;
}

.graphic02 {
  width: 20%;
}
.graphic02 img {
  width: 100%;
}

.graphic03 {
  width: 30%;
}
.graphic03 img {
  width: 100%;
}

.graphic04 {
  width: 60%;
}
.graphic04 img {
  width: 100%;
}

.graphic05 {
  width: 60%;
}
.graphic05 img {
  width: 100%;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    transform: translateX(8px);
  }
  33.3% {
    transform: translateX(-6px);
  }
  49.95% {
    transform: translateX(4px);
  }
  66.6% {
    transform: translateX(-2px);
  }
  83.25% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    transform: translateX(8px);
  }
  33.3% {
    transform: translateX(-6px);
  }
  49.95% {
    transform: translateX(4px);
  }
  66.6% {
    transform: translateX(-2px);
  }
  83.25% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
@media screen and (max-width: 516px) {
  header {
    z-index: 600;
    position: fixed;
    padding: 30px;
  }
  header h1 {
    display: none;
  }
  header h1 a {
    position: absolute;
  }
  header h1 img {
    width: 50px;
    height: 50px;
  }
  header h1.on {
    display: block;
  }
  #tabmenu {
    overflow: hidden;
    z-index: 500;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #1226aa;
    font-family: "MonumentExtended-Ultrabold";
    font-style: italic;
  }
  #tabmenu ul.menu {
    color: #fff;
    font-size: 3rem;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 3px;
  }
  #tabmenu ul.menu li {
    padding: 10px;
  }
  #tabmenu .menu_door {
    display: none;
  }
  #intro {
    background: #d0cfc5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #intro .titleContainer {
    z-index: 10;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translatex(-50%);
  }
  #intro .titleContainer .sub_title {
    position: relative;
    top: 0;
    width: 480px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #intro .titleContainer .sub_title span.line {
    display: block;
    width: 40%;
    height: 2px;
    position: relative;
  }
  #intro .titleContainer .sub_title span.line::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #000;
    -webkit-animation: slideUp02 1s both, wipe 1s both;
            animation: slideUp02 1s both, wipe 1s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .sub_title span.sub_text {
    font-family: "Pretendard-Medium";
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 1px;
    -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
            animation: slideUp02 1s both, fadeIn 1.2s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .sub_title span.particle img {
    width: 45px;
    height: 45px;
    -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
            animation: slideUp02 1s both, fadeIn 1.2s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .titleStyle_black {
    font-size: 4.5rem;
    color: #000;
  }
  #intro .titleContainer .titleStyle_stroke {
    font-size: 4.5rem;
    color: transparent;
    -webkit-text-stroke: 3px #000;
    letter-spacing: 3px;
  }
  #intro .titleContainer .typing-txt01,
#intro .titleContainer .typing-txt02 {
    display: none;
    color: #000;
    font-family: "MonumentExtended-Ultrabold";
    transition: color 0.3s;
    -webkit-text-stroke: 3px #fff;
  }
  #intro .titleContainer .typing-txt01 {
    width: 100%;
    mix-blend-mode: screen;
    z-index: 3;
  }
  #intro .titleContainer .main_tit02 {
    width: 100%;
    color: #fff;
    z-index: 1;
  }
  #intro .titleContainer .typing ul li {
    display: block;
    font-family: "MonumentExtended-Ultrabold";
  }
  #intro .titleContainer .typing ul li.on {
    display: inline-block;
    -webkit-animation-name: blink;
            animation-name: blink;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #intro .door {
    position: absolute;
    width: 250px;
    height: 450px;
    background-image: url(./img/intro/noise\(2\).gif);
    background-size: cover;
    background-position: center;
    border-radius: 150px 150px 0 0;
    opacity: 0.6;
    transition: 0.35s;
    z-index: 2;
  }
  #intro .door.on {
    opacity: 0.8;
    transition: all 1s;
  }
  #intro .door.on::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(50px);
            backdrop-filter: blur(50px);
  }
  #intro .scrolldown {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(37, 39, 29, 0.2);
    border-radius: 50%;
    -webkit-animation: fadeIn 1s 5s both;
            animation: fadeIn 1s 5s both;
  }
  #intro .scrolldown p.mouse_outline {
    width: 30px;
    height: 48px;
    border-radius: 12px;
    border: 2px solid #fff;
  }
  #intro .scrolldown p.mouse_wheel {
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 8px;
    left: calc(50% - 2px);
    animation: slideUp02 2s ease-in-out reverse infinite;
  }
  #intro .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    top: 50%;
    letter-spacing: 5px;
  }
  #publishing {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #publishing .title {
    position: relative;
    left: 10%;
    top: 3%;
    z-index: 20;
  }
  #publishing .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    display: inline-block;
  }
  #publishing .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
  }
  #publishing .wrap {
    z-index: 10;
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
  }
  #publishing .wrap .projectContainer ul {
    font-family: "MonumentExtended-Ultrabold";
    color: transparent;
    outline: 1px transparent;
    font-size: 2.2rem;
  }
  #publishing .wrap .projectContainer ul li {
    padding-bottom: 10px;
  }
  #publishing .wrap .projectContainer ul li a {
    -webkit-text-stroke: 1px #fff;
    letter-spacing: 2px;
  }
  #publishing .wrap .projectContainer_mask {
    position: relative;
    overflow: hidden;
    outline: 1px transparent;
    font-size: 2rem;
  }
  #publishing .wrap .projectContainer_mask ul {
    position: absolute;
  }
  #publishing .wrap .view {
    padding-top: 30px;
    display: flex;
    align-items: center;
  }
  #publishing .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #publishing .wrap .view .line {
    height: 2px;
    width: 50%;
  }
  #publishing .wrap .view_all {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #publishing .thum_door {
    display: none;
    position: absolute;
    width: 300px;
    height: 450px;
    background: #eee;
    bottom: 0%;
    right: 10%;
    border-radius: 350px 350px 0 0;
  }
  #publishing .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #appteamproject {
    background: #111111;
    width: 100vw;
    height: 100vh;
  }
  #appteamproject .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #ff5900;
    z-index: 20;
  }
  #appteamproject .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #ff5900;
    display: inline-block;
    color: #ff5900;
  }
  #appteamproject .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
    color: #ff5900;
  }
  #appteamproject .wrap {
    margin-top: 50px;
    z-index: 10;
    position: relative;
    height: auto;
  }
  #appteamproject .wrap .project_title p {
    display: none;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px #ff5900;
    letter-spacing: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #appteamproject .wrap .project_desc {
    position: absolute;
    display: block;
    color: #fff;
    line-height: 1.6rem;
    font-size: 1rem;
    padding: 10px;
    bottom: -850px;
  }
  #appteamproject .wrap .view {
    display: block;
    width: 500px;
    padding-top: 50px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -600px;
  }
  #appteamproject .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #appteamproject .wrap .view .line {
    height: 2px;
    width: 60%;
  }
  #appteamproject .wrap .over_view {
    display: block;
    position: absolute;
    left: 0%;
    bottom: -570px;
  }
  #appteamproject .wrap .over_view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #appteamproject .project_door {
    display: none;
    position: absolute;
    width: 1399px;
    height: 600px;
    background: url(./img/teamproject/006.png);
    background-position: center;
    background-size: 150%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 0 0 0 0;
  }
  #appteamproject .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #appteamproject .appproject_slide {
    display: block;
    margin: 70px auto;
    width: 250px;
    height: 528px;
  }
  #appteamproject .appproject_slide .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #appteamproject .appproject_slide .swiper-slide img {
    width: 100%;
  }
  #pcteamproject {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #pcteamproject .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #006ecd;
    z-index: 20;
  }
  #pcteamproject .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #006ecd;
    display: inline-block;
  }
  #pcteamproject .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
    color: #006ecd;
  }
  #pcteamproject .wrap .project_title p {
    z-index: 20;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px #006ecd;
    letter-spacing: 2px;
    position: absolute;
    right: 20%;
    bottom: 20%;
  }
  #pcteamproject .wrap .wrap {
    top: 20%;
    left: 30%;
  }
  #pcteamproject .wrap .wrap .view {
    z-index: 20;
    display: flex;
    align-items: center;
    position: absolute;
  }
  #pcteamproject .wrap .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #pcteamproject .wrap .wrap .view .line {
    height: 2px;
  }
  #pcteamproject .wrap .wrap .over_view {
    z-index: 20;
    position: absolute;
  }
  #pcteamproject .wrap .wrap .over_view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #pcteamproject .project_door {
    position: absolute;
    width: 480px;
    height: 650px;
    background-size: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 350px 350px 0 0;
  }
  #pcteamproject .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #graphic {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #graphic .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #fff;
    z-index: 20;
  }
  #graphic .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #fff;
    display: inline-block;
  }
  #graphic .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
  }
  #graphic .wrap {
    width: 450px;
    height: 900px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-gap: 10px;
    display: grid;
  }
  #graphic .wrap a {
    transition: 0.35s;
  }
  #graphic .wrap a:hover {
    transform: rotateY(20deg);
  }
  #graphic .wrap a.row1 {
    grid-row: 1/2;
    grid-column: 1/6;
    border-radius: 200px 200px 0 0;
    position: relative;
    color: transparent;
    overflow: hidden;
  }
  #graphic .wrap a.row1 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #e9198c;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 450px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row2 {
    grid-row: 2/3;
    grid-column: 1/3;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row2 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #000;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 174px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row3 {
    grid-row: 2/3;
    grid-column: 3/6;
    border-radius: 0 500px 0 0;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row3 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    color: #000;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 266px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row4 {
    grid-row: 3/4;
    grid-column: 1/4;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row4 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #fff;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 266px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row5 {
    grid-row: 3/4;
    grid-column: 4/6;
    border-radius: 0 300px 300px 0;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row5 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    color: #fff;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 174px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap .other {
    position: absolute;
    right: 0;
    bottom: -25px;
    color: #fff;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 1.2rem;
  }
  #graphic .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #aboutme01 {
    background: #d0cfc5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme01 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme01 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme01 .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
  }
  #aboutme01 .wrap {
    width: 100vw;
    height: 100vh;
    background: #ebebeb;
    border-radius: 50px 50px 0 0;
  }
  #aboutme01 .wrap .desc {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
  }
  #aboutme01 .wrap .desc .desc_title {
    font-family: "MonumentExtended-Regular";
    font-size: 1.8rem;
    color: #1226aa;
    padding-bottom: 30px;
  }
  #aboutme01 .wrap .desc .text {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    font-stretch: 0.8;
    line-height: 1.5rem;
  }
  #aboutme01 .box {
    position: absolute;
    width: 100%;
    height: 200px;
    background: url(./img/aboutme/ABOUTME_1.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
  }
  #aboutme01 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #aboutme02 {
    background: #ebebeb;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme02 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme02 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme02 .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
  }
  #aboutme02 .desc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  #aboutme02 .desc .desc_title {
    font-family: "Pretendard-Medium";
    color: #1226aa;
    padding: 30px;
  }
  #aboutme02 .desc h2 {
    font-family: "MonumentExtended-Regular";
    color: #1226aa;
    font-size: 2rem;
    letter-spacing: 2px;
    padding-bottom: 30px;
  }
  #aboutme02 .desc .text {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    padding-bottom: 50px;
  }
  #aboutme02 .desc h1 {
    padding-bottom: 50px;
  }
  #aboutme02 .desc h1 img {
    width: 480px;
  }
  #aboutme02 .desc .text02 {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    color: #959595;
    font-size: 0.8rem;
  }
  #aboutme02 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #aboutme03 {
    background: #ebebeb;
    width: 100vw;
    height: 160vh;
    overflow: hidden;
  }
  #aboutme03 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme03 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme03 .title h1 {
    position: absolute;
    left: 18%;
    top: -20%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 4rem;
    line-height: 3.5rem;
  }
  #aboutme03 .desc {
    width: 450px;
    padding: 80px;
  }
  #aboutme03 .desc .left {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #aboutme03 .desc .left .desc_title {
    font-family: "MonumentExtended-Ultrabold";
    color: #1226aa;
    padding: 30px 0;
    -webkit-text-stroke: 2px #1226aa;
    font-size: 3rem;
    color: transparent;
  }
  #aboutme03 .desc .left .text {
    word-wrap: break-word;
    word-break: keep-all;
    padding-bottom: 50px;
    line-height: 1.8rem;
  }
  #aboutme03 .desc .left .text span {
    color: #1226aa;
    font-size: 1.5rem;
    font-weight: bold;
    padding-right: 10px;
  }
  #aboutme03 .desc .left .wrap {
    display: flex;
  }
  #aboutme03 .desc .left .wrap .prog div {
    margin-bottom: 0.767rem;
  }
  #aboutme03 .desc .left .wrap .skill {
    width: 200px;
    padding-left: 20px;
  }
  #aboutme03 .desc .left .wrap .skill .bar {
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    height: 15px;
    margin-bottom: 1rem;
    border-radius: 30px;
  }
  #aboutme03 .desc .left .wrap .skill .bar .rate {
    width: 0%;
    background: #1226aa;
    text-align: right;
    padding-right: 10px;
    color: #333;
    height: 15px;
    border-radius: 30px;
  }
  #aboutme03 .desc .left .wrap .skill .bar span {
    position: absolute;
    right: 10px;
    top: 0;
  }
  #aboutme03 .desc .center {
    display: none;
  }
  #aboutme03 .desc .right {
    margin-top: 50px;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #aboutme03 .desc .right .text01 span {
    font-weight: bold;
    color: #1226aa;
  }
  #aboutme03 .desc .right .text01 p {
    line-height: 1.5rem;
  }
  #aboutme03 .desc .right .text01 .text_desc {
    padding-bottom: 10px;
  }
  #aboutme03 .desc .right .text02 {
    line-height: 1.5rem;
  }
  #aboutme03 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
}
@media screen and (min-width: 517px) {
  header {
    z-index: 600;
    position: fixed;
    padding: 50px;
  }
  header h1 {
    display: none;
  }
  header h1 img {
    width: 70px;
    height: 70px;
  }
  header h1.on {
    display: block;
  }
  #tabmenu {
    overflow: hidden;
    z-index: 500;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #1226aa;
    font-family: "MonumentExtended-Ultrabold";
    font-style: italic;
  }
  #tabmenu ul.menu {
    z-index: 1;
    color: #fff;
    font-size: 3rem;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 3px;
  }
  #tabmenu ul.menu li {
    padding: 10px;
  }
  #intro {
    background: #d0cfc5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #intro .titleContainer {
    z-index: 10;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translatex(-50%);
  }
  #intro .titleContainer .sub_title {
    position: relative;
    top: 0;
    width: 1000px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #intro .titleContainer .sub_title span.line {
    display: block;
    width: 75%;
    height: 2px;
    position: relative;
  }
  #intro .titleContainer .sub_title span.line::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #000;
    -webkit-animation: slideUp02 1s both, wipe 1s both;
            animation: slideUp02 1s both, wipe 1s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .sub_title span.sub_text {
    font-family: "Pretendard-Medium";
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 1px;
    -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
            animation: slideUp02 1s both, fadeIn 1.2s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .sub_title span.particle img {
    width: 45px;
    height: 45px;
    -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
            animation: slideUp02 1s both, fadeIn 1.2s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .titleStyle_black {
    font-size: 7rem;
    color: #000;
  }
  #intro .titleContainer .titleStyle_stroke {
    font-size: 7rem;
    color: transparent;
    -webkit-text-stroke: 3px #000;
    letter-spacing: 3px;
  }
  #intro .titleContainer .typing-txt01,
#intro .titleContainer .typing-txt02 {
    display: none;
    color: #000;
    font-family: "MonumentExtended-Ultrabold";
    transition: color 0.3s;
    -webkit-text-stroke: 3px #fff;
  }
  #intro .titleContainer .typing-txt01 {
    width: 100%;
    mix-blend-mode: screen;
    z-index: 3;
  }
  #intro .titleContainer .main_tit02 {
    width: 100%;
    color: #fff;
    z-index: 1;
  }
  #intro .titleContainer .typing ul li {
    display: block;
    font-family: "MonumentExtended-Ultrabold";
  }
  #intro .titleContainer .typing ul li.on {
    display: inline-block;
    -webkit-animation-name: blink;
            animation-name: blink;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #intro .door {
    position: absolute;
    width: 250px;
    height: 450px;
    background-image: url(./img/intro/noise\(2\).gif);
    background-size: cover;
    background-position: center;
    border-radius: 150px 150px 0 0;
    opacity: 0.6;
    transition: 0.35s;
    z-index: 2;
  }
  #intro .door.on {
    opacity: 0.8;
    transition: all 1s;
  }
  #intro .door.on::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(50px);
            backdrop-filter: blur(50px);
  }
  #intro .scrolldown {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(37, 39, 29, 0.2);
    border-radius: 50%;
    -webkit-animation: fadeIn 1s 5s both;
            animation: fadeIn 1s 5s both;
  }
  #intro .scrolldown p.mouse_outline {
    width: 30px;
    height: 48px;
    border-radius: 12px;
    border: 2px solid #fff;
  }
  #intro .scrolldown p.mouse_wheel {
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 8px;
    left: calc(50% - 2px);
    animation: slideUp02 2s ease-in-out reverse infinite;
  }
  #intro .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    top: 50%;
    letter-spacing: 5px;
  }
  #publishing {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #publishing .title {
    position: relative;
    left: 10%;
    top: 3%;
    z-index: 20;
  }
  #publishing .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    display: inline-block;
  }
  #publishing .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
  }
  #publishing .wrap {
    z-index: 10;
    position: absolute;
    left: 15%;
    top: 50%;
  }
  #publishing .wrap .projectContainer ul {
    font-family: "MonumentExtended-Ultrabold";
    color: transparent;
    outline: 1px transparent;
  }
  #publishing .wrap .projectContainer ul li {
    padding-bottom: 10px;
  }
  #publishing .wrap .projectContainer ul li a {
    -webkit-text-stroke: 1px #fff;
    letter-spacing: 2px;
    font-size: 2.7rem;
  }
  #publishing .wrap .view {
    padding-top: 20px;
    display: flex;
    align-items: center;
  }
  #publishing .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #publishing .wrap .view .line {
    height: 2px;
    width: 50%;
  }
  #publishing .wrap .view_all {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #publishing .thum_door {
    position: absolute;
    width: 320px;
    height: 450px;
    bottom: 0%;
    right: 2%;
    border-radius: 350px 350px 0 0;
    background-position: center;
  }
  #publishing .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #appteamproject {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #appteamproject .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #ff5900;
    z-index: 20;
  }
  #appteamproject .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #ff5900;
    display: inline-block;
    color: #ff5900;
  }
  #appteamproject .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
    color: #ff5900;
  }
  #appteamproject .wrap {
    width: 390px;
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translateX(-50%);
  }
  #appteamproject .wrap .project_title p {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px #ff5900;
    letter-spacing: 2px;
    position: absolute;
  }
  #appteamproject .wrap .project_desc {
    display: none;
    color: #fff;
    line-height: 1.6rem;
    font-size: 1rem;
  }
  #appteamproject .wrap .view {
    width: 309px;
    padding-top: 50px;
    display: flex;
    align-items: center;
  }
  #appteamproject .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #appteamproject .wrap .view .line {
    height: 2px;
    width: 60%;
  }
  #appteamproject .wrap .over_view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #appteamproject .project_door {
    position: absolute;
    width: 1399px;
    height: 600px;
    background: url(./img/teamproject/006.png);
    background-position: center;
    background-size: 150%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 0 0 0 0;
  }
  #appteamproject .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #appteamproject .appproject_slide {
    display: none;
    width: 250px;
    height: 528px;
  }
  #appteamproject .appproject_slide .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #appteamproject .appproject_slide .swiper-slide img {
    width: 100%;
  }
  #pcteamproject {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #pcteamproject .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #006ecd;
    z-index: 20;
  }
  #pcteamproject .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #006ecd;
    display: inline-block;
  }
  #pcteamproject .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
    color: #006ecd;
  }
  #pcteamproject .wrap .project_title p {
    z-index: 20;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px #006ecd;
    letter-spacing: 2px;
    position: absolute;
    right: 20%;
    bottom: 20%;
  }
  #pcteamproject .wrap .wrap .view {
    z-index: 20;
    display: flex;
    align-items: center;
    position: absolute;
  }
  #pcteamproject .wrap .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #pcteamproject .wrap .wrap .view .line {
    height: 2px;
  }
  #pcteamproject .wrap .wrap .over_view {
    z-index: 20;
    position: absolute;
  }
  #pcteamproject .wrap .wrap .over_view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #pcteamproject .project_door {
    position: absolute;
    width: 600px;
    height: 800px;
    background-size: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 350px 350px 0 0;
  }
  #pcteamproject .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #graphic {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #graphic .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #fff;
    z-index: 20;
  }
  #graphic .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #fff;
    display: inline-block;
  }
  #graphic .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
  }
  #graphic .wrap {
    width: 1000px;
    height: 750px;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    grid-gap: 10px;
    display: grid;
  }
  #graphic .wrap a {
    transition: 0.35s;
  }
  #graphic .wrap a:hover {
    transform: rotateY(20deg);
  }
  #graphic .wrap a.row1 {
    grid-row: 1/1;
    grid-column: 1/2;
    border-radius: 200px 200px 0 0;
    position: relative;
    color: transparent;
    overflow: hidden;
  }
  #graphic .wrap a.row1 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #e9198c;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 245px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row2 {
    grid-row: 1/2;
    grid-column: 2/4;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row2 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #000;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 495px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row3 {
    grid-row: 1/2;
    grid-column: 4/5;
    border-radius: 0 500px 0 0;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row3 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    color: #000;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 245px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row4 {
    grid-row: 2/3;
    grid-column: 1/3;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row4 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #fff;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 495px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row5 {
    grid-row: 2/3;
    grid-column: 3/5;
    border-radius: 0 300px 300px 0;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row5 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    color: #fff;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 495px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap .other {
    position: absolute;
    right: 0;
    bottom: -25px;
    color: #fff;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 1.2rem;
  }
  #graphic .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #aboutme01 {
    background: #d0cfc5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme01 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme01 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme01 .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
  }
  #aboutme01 .wrap {
    width: 100vw;
    height: 100vh;
    background: #ebebeb;
    border-radius: 50px 50px 0 0;
  }
  #aboutme01 .wrap .desc {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
  }
  #aboutme01 .wrap .desc .desc_title {
    font-family: "MonumentExtended-Regular";
    font-size: 2rem;
    color: #1226aa;
    padding-bottom: 30px;
  }
  #aboutme01 .wrap .desc .text {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    font-stretch: 0.8;
    line-height: 1.5rem;
  }
  #aboutme01 .box {
    position: absolute;
    width: 100%;
    height: 400px;
    background: url(./img/aboutme/ABOUTME_1.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
  }
  #aboutme01 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #aboutme02 {
    background: #ebebeb;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme02 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme02 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme02 .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
  }
  #aboutme02 .desc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  #aboutme02 .desc .desc_title {
    font-family: "Pretendard-Medium";
    color: #1226aa;
    padding: 30px;
  }
  #aboutme02 .desc h2 {
    font-family: "MonumentExtended-Regular";
    color: #1226aa;
    font-size: 2.2rem;
    letter-spacing: 2px;
    padding-bottom: 30px;
  }
  #aboutme02 .desc .text {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    padding-bottom: 50px;
  }
  #aboutme02 .desc h1 {
    padding-bottom: 50px;
  }
  #aboutme02 .desc .text02 {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    color: #959595;
  }
  #aboutme02 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #aboutme03 {
    background: #ebebeb;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme03 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme03 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 2.5rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme03 .title h1 {
    position: absolute;
    left: 15%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 5.5rem;
    line-height: 3.5rem;
  }
  #aboutme03 .desc {
    width: 900px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
  }
  #aboutme03 .desc .left {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #aboutme03 .desc .left .desc_title {
    font-family: "MonumentExtended-Ultrabold";
    color: #1226aa;
    padding: 30px 0;
    -webkit-text-stroke: 2px #1226aa;
    font-size: 3rem;
    color: transparent;
  }
  #aboutme03 .desc .left .text {
    word-wrap: break-word;
    word-break: keep-all;
    padding-bottom: 50px;
    line-height: 1.8rem;
  }
  #aboutme03 .desc .left .text span {
    color: #1226aa;
    font-size: 1.5rem;
    font-weight: bold;
    padding-right: 10px;
  }
  #aboutme03 .desc .left .wrap {
    display: flex;
  }
  #aboutme03 .desc .left .wrap .prog div {
    margin-bottom: 0.767rem;
  }
  #aboutme03 .desc .left .wrap .skill {
    width: 150px;
    padding-left: 20px;
  }
  #aboutme03 .desc .left .wrap .skill .bar {
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    height: 15px;
    margin-bottom: 1rem;
    border-radius: 30px;
  }
  #aboutme03 .desc .left .wrap .skill .bar .rate {
    width: 0%;
    background: #1226aa;
    text-align: right;
    padding-right: 10px;
    color: #333;
    height: 15px;
    border-radius: 30px;
  }
  #aboutme03 .desc .left .wrap .skill .bar span {
    position: absolute;
    right: 10px;
    top: 0;
  }
  #aboutme03 .desc .center {
    font-style: italic;
    color: #fff;
    text-align: center;
    width: 250px;
    height: 450px;
    border-radius: 150px 150px 0 0;
    background: url(./img/aboutme/aboutme_3.gif);
    background-position: 65%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    -webkit-animation: hvr-wobble-horizontal 1.3s ease-out infinite;
            animation: hvr-wobble-horizontal 1.3s ease-out infinite;
  }
  #aboutme03 .desc .center:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
  #aboutme03 .desc .center::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 150px 150px 0 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  #aboutme03 .desc .center:hover .door {
    transform: rotateY(-90deg);
  }
  #aboutme03 .desc .center .text {
    text-align: center;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #aboutme03 .desc .center .door {
    width: 250px;
    height: 450px;
    border-radius: 150px 150px 0 0;
    background: #000;
    transform-style: preserve-3d;
    transform-origin: right;
    transition: all 0.5s;
    position: absolute;
    left: 0;
    top: 0;
  }
  #aboutme03 .desc .center .door::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15px;
    background-color: white;
    border-radius: 50%;
  }
  #aboutme03 .desc .right {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #aboutme03 .desc .right .text01 span {
    font-weight: bold;
    color: #1226aa;
  }
  #aboutme03 .desc .right .text01 p {
    line-height: 1.5rem;
  }
  #aboutme03 .desc .right .text01 .text_desc {
    padding-bottom: 10px;
  }
  #aboutme03 .desc .right .text02 {
    line-height: 1.5rem;
  }
  #aboutme03 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
}
@media screen and (min-width: 1400px) {
  header {
    z-index: 600;
    position: fixed;
    padding: 50px;
  }
  header h1 {
    display: none;
  }
  header h1 img {
    width: 70px;
    height: 70px;
  }
  header h1.on {
    display: block;
  }
  #intro {
    background: #d0cfc5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #intro .titleContainer {
    z-index: 10;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translatex(-50%);
  }
  #intro .titleContainer .sub_title {
    position: relative;
    top: 0;
    width: 1400px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #intro .titleContainer .sub_title span.line {
    display: block;
    width: 75%;
    height: 2px;
    position: relative;
  }
  #intro .titleContainer .sub_title span.line::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #000;
    -webkit-animation: slideUp02 1s both, wipe 1s both;
            animation: slideUp02 1s both, wipe 1s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .sub_title span.sub_text {
    font-family: "Pretendard-Medium";
    font-size: 1.35rem;
    font-weight: 300;
    letter-spacing: 1px;
    -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
            animation: slideUp02 1s both, fadeIn 1.2s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .sub_title span.particle img {
    width: 45px;
    height: 45px;
    -webkit-animation: slideUp02 1s both, fadeIn 1.2s both;
            animation: slideUp02 1s both, fadeIn 1.2s both;
    /* -webkit-animation-delay: 4.5s;
            animation-delay: 4.5s; */
  }
  #intro .titleContainer .titleStyle_black {
    font-size: 10rem;
    color: #000;
  }
  #intro .titleContainer .titleStyle_stroke {
    font-size: 10rem;
    color: transparent;
    -webkit-text-stroke: 3px #000;
    letter-spacing: 3px;
  }
  #intro .titleContainer .typing-txt01,
#intro .titleContainer .typing-txt02 {
    display: none;
    color: #000;
    font-family: "MonumentExtended-Ultrabold";
    transition: color 0.3s;
    -webkit-text-stroke: 3px #fff;
  }
  #intro .titleContainer .typing-txt01 {
    width: 100%;
    mix-blend-mode: screen;
    z-index: 3;
  }
  #intro .titleContainer .main_tit02 {
    width: 100%;
    color: #fff;
    z-index: 1;
  }
  #intro .titleContainer .typing ul li {
    display: block;
    font-family: "MonumentExtended-Ultrabold";
  }
  #intro .titleContainer .typing ul li.on {
    display: inline-block;
    -webkit-animation-name: blink;
            animation-name: blink;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #intro .door {
    position: absolute;
    width: 300px;
    height: 500px;
    background-image: url(./img/intro/noise\(2\).gif);
    background-size: cover;
    background-position: center;
    border-radius: 150px 150px 0 0;
    opacity: 0.6;
    transition: 0.35s;
    z-index: 2;
  }
  #intro .door.on {
    opacity: 0.8;
    transition: all 1s;
  }
  #intro .door.on::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(50px);
            backdrop-filter: blur(50px);
  }
  #intro .scrolldown {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(37, 39, 29, 0.2);
    border-radius: 50%;
    -webkit-animation: fadeIn 1s 5s both;
            animation: fadeIn 1s 5s both;
  }
  #intro .scrolldown p.mouse_outline {
    width: 30px;
    height: 48px;
    border-radius: 12px;
    border: 2px solid #fff;
  }
  #intro .scrolldown p.mouse_wheel {
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 8px;
    left: calc(50% - 2px);
    animation: slideUp02 2s ease-in-out reverse infinite;
  }
  #intro .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    top: 50%;
    letter-spacing: 5px;
  }
  #publishing {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #publishing .title {
    position: relative;
    left: 10%;
    top: 3%;
    z-index: 20;
  }
  #publishing .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    display: inline-block;
  }
  #publishing .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
  }
  #publishing .wrap {
    z-index: 10;
    position: absolute;
    left: 15%;
    top: 50%;
  }
  #publishing .wrap .projectContainer ul {
    font-family: "MonumentExtended-Ultrabold";
    color: transparent;
    outline: 1px transparent;
    font-size: 2.5rem;
  }
  #publishing .wrap .projectContainer ul li {
    padding-bottom: 10px;
  }
  #publishing .wrap .projectContainer ul li a {
    -webkit-text-stroke: 1px #fff;
    letter-spacing: 2px;
    font-size: 3rem;
  }
  #publishing .wrap .view {
    padding-top: 20px;
    display: flex;
    align-items: center;
  }
  #publishing .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #publishing .wrap .view .line {
    height: 2px;
    width: 50%;
  }
  #publishing .wrap .view_all {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #publishing .thum_door {
    position: absolute;
    width: 550px;
    height: 750px;
    bottom: 0;
    right: 15%;
    border-radius: 350px 350px 0 0;
  }
  #publishing .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #appteamproject {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #appteamproject .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #ff5900;
    z-index: 20;
  }
  #appteamproject .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #ff5900;
    display: inline-block;
    color: #ff5900;
  }
  #appteamproject .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
    color: #ff5900;
  }
  #appteamproject .wrap {
    z-index: 10;
    position: absolute;
    left: 45%;
    top: 40%;
    transform: translateY(-50%);
  }
  #appteamproject .wrap .project_title p {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px #ff5900;
    letter-spacing: 2px;
    position: absolute;
    left: -40%;
    top: -50%;
  }
  #appteamproject .wrap .project_desc {
    position: absolute;
    top: 100px;
    display: block;
    color: #fff;
    width: 500px;
    line-height: 1.6rem;
    font-size: 1rem;
  }
  #appteamproject .wrap .view {
    width: 500px;
    padding-top: 50px;
    display: flex;
    align-items: center;
  }
  #appteamproject .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #appteamproject .wrap .view .line {
    height: 2px;
  }
  #appteamproject .wrap .over_view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #appteamproject .project_door {
    position: absolute;
    width: 750px;
    height: 550px;
    background: url(./img/teamproject/006.png);
    background-position: center;
    background-size: 150%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 0 350px 350px 0;
  }
  #appteamproject .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #appteamproject .appproject_slide {
    display: block;
    position: absolute;
    width: 250px;
    height: 528px;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
  }
  #appteamproject .appproject_slide .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #appteamproject .appproject_slide .swiper-slide img {
    width: 100%;
  }
  #pcteamproject {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #pcteamproject .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #006ecd;
    z-index: 20;
  }
  #pcteamproject .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #006ecd;
    display: inline-block;
  }
  #pcteamproject .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
    color: #006ecd;
  }
  #pcteamproject .wrap .project_title p {
    z-index: 20;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 2px #006ecd;
    letter-spacing: 2px;
    position: absolute;
    right: 20%;
    bottom: 20%;
  }
  #pcteamproject .wrap .wrap .view {
    z-index: 20;
    display: flex;
    align-items: center;
    position: absolute;
  }
  #pcteamproject .wrap .wrap .view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #pcteamproject .wrap .wrap .view .line {
    height: 2px;
  }
  #pcteamproject .wrap .wrap .over_view {
    z-index: 20;
    position: absolute;
  }
  #pcteamproject .wrap .wrap .over_view a {
    font-family: "Pretendard-Black";
    font-style: italic;
    padding-right: 10px;
    font-size: 1.2rem;
  }
  #pcteamproject .project_door {
    position: absolute;
    width: 600px;
    height: 800px;
    background-size: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 350px 350px 0 0;
  }
  #pcteamproject .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: -50px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #graphic {
    background: #111111;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #graphic .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #fff;
    z-index: 20;
  }
  #graphic .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #fff;
    display: inline-block;
  }
  #graphic .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
  }
  #graphic .wrap {
    width: 1500px;
    height: 800px;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    grid-gap: 10px;
    display: grid;
  }
  #graphic .wrap a {
    transition: 0.35s;
  }
  #graphic .wrap a:hover {
    transform: rotateY(20deg);
  }
  #graphic .wrap a.row1 {
    grid-row: 1/1;
    grid-column: 1/2;
    border-radius: 200px 200px 0 0;
    position: relative;
    color: transparent;
    overflow: hidden;
  }
  #graphic .wrap a.row1 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #e9198c;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 370px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row2 {
    grid-row: 1/2;
    grid-column: 2/4;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row2 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #000;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 745px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row3 {
    grid-row: 1/2;
    grid-column: 4/5;
    border-radius: 0 500px 0 0;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row3 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    color: #000;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 370px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row4 {
    grid-row: 2/3;
    grid-column: 1/3;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row4 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    -webkit-text-stroke: 2px #fff;
    color: transparent;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 745px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap a.row5 {
    grid-row: 2/3;
    grid-column: 3/5;
    border-radius: 0 300px 300px 0;
    position: relative;
    overflow: hidden;
  }
  #graphic .wrap a.row5 p {
    white-space: nowrap;
    position: absolute;
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    color: #fff;
    bottom: 3%;
    letter-spacing: 3px;
    margin: 0;
    padding-left: 745px;
    -webkit-animation-name: text_flow;
            animation-name: text_flow;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #graphic .wrap .other {
    position: absolute;
    right: 0;
    bottom: -25px;
    color: #fff;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 1.2rem;
  }
  #graphic .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #fff;
  }
  #aboutme01 {
    background: #d0cfc5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme01 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme01 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme01 .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
  }
  #aboutme01 .wrap {
    width: 100vw;
    height: 100vh;
    background: #ebebeb;
    border-radius: 50px 50px 0 0;
  }
  #aboutme01 .wrap .desc {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
  }
  #aboutme01 .wrap .desc .desc_title {
    font-family: "MonumentExtended-Regular";
    font-size: 2rem;
    color: #1226aa;
    padding-bottom: 30px;
  }
  #aboutme01 .wrap .desc .text {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    font-stretch: 0.8;
    line-height: 1.5rem;
  }
  #aboutme01 .box {
    position: absolute;
    width: 100%;
    height: 400px;
    background: url(./img/aboutme/ABOUTME_1.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
  }
  #aboutme01 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #aboutme02 {
    background: #ebebeb;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme02 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme02 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme02 .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
  }
  #aboutme02 .desc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  #aboutme02 .desc .desc_title {
    font-family: "Pretendard-Medium";
    color: #1226aa;
    padding: 30px;
  }
  #aboutme02 .desc h2 {
    font-family: "MonumentExtended-Regular";
    color: #1226aa;
    font-size: 2.2rem;
    letter-spacing: 2px;
    padding-bottom: 30px;
  }
  #aboutme02 .desc .text {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    padding-bottom: 50px;
  }
  #aboutme02 .desc h1 {
    padding-bottom: 50px;
  }
  #aboutme02 .desc .text02 {
    font-family: "Pretendard-Medium";
    word-wrap: break-word;
    word-break: keep-all;
    color: #959595;
  }
  #aboutme02 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
  #aboutme03 {
    background: #ebebeb;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #aboutme03 .title {
    position: relative;
    left: 10%;
    top: 3%;
    color: #000;
    z-index: 20;
  }
  #aboutme03 .title h2 {
    font-family: "MonumentExtended-Ultrabold";
    font-size: 3rem;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    display: inline-block;
  }
  #aboutme03 .title h1 {
    position: absolute;
    left: 5%;
    top: -70%;
    font-family: "Pretendard-Black";
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
  }
  #aboutme03 .desc {
    width: 1500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
  }
  #aboutme03 .desc .left {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #aboutme03 .desc .left .desc_title {
    font-family: "MonumentExtended-Ultrabold";
    color: #1226aa;
    padding: 30px 0;
    -webkit-text-stroke: 2px #1226aa;
    font-size: 3rem;
    color: transparent;
  }
  #aboutme03 .desc .left .text {
    word-wrap: break-word;
    word-break: keep-all;
    padding-bottom: 50px;
    line-height: 1.8rem;
  }
  #aboutme03 .desc .left .text span {
    color: #1226aa;
    font-size: 1.5rem;
    font-weight: bold;
    padding-right: 10px;
  }
  #aboutme03 .desc .left .prog .bar {
    padding: 5px 0;
  }
  #aboutme03 .desc .center {
    font-style: italic;
    color: #fff;
    text-align: center;
    width: 300px;
    height: 500px;
    border-radius: 150px 150px 0 0;
    background: url(./img/aboutme/aboutme_3.gif);
    background-position: 65%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    -webkit-animation: hvr-wobble-horizontal 1.3s ease-out infinite;
            animation: hvr-wobble-horizontal 1.3s ease-out infinite;
  }
  #aboutme03 .desc .center:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
  #aboutme03 .desc .center::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 150px 150px 0 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  #aboutme03 .desc .center:hover .door {
    transform: rotateY(-90deg);
  }
  #aboutme03 .desc .center .text {
    text-align: center;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #aboutme03 .desc .center .door {
    width: 300px;
    height: 500px;
    border-radius: 150px 150px 0 0;
    background: #000;
    transform-style: preserve-3d;
    transform-origin: right;
    transition: all 0.5s;
    position: absolute;
    left: 0;
    top: 0;
  }
  #aboutme03 .desc .center .door::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15px;
    background-color: white;
    border-radius: 50%;
  }
  #aboutme03 .desc .right {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #aboutme03 .desc .right .text01 span {
    font-weight: bold;
    color: #1226aa;
  }
  #aboutme03 .desc .right .text01 p {
    line-height: 1.5rem;
  }
  #aboutme03 .desc .right .text01 .text_desc {
    padding-bottom: 10px;
  }
  #aboutme03 .desc .right .text02 {
    line-height: 1.5rem;
  }
  #aboutme03 .subtitle {
    position: absolute;
    transform: rotate(-90deg) translatey(-50%);
    left: 5px;
    top: 50%;
    letter-spacing: 5px;
    color: #000;
  }
}/*# sourceMappingURL=style.css.map */