@charset "UTF-8";
@import url(default.css);
@import url(common.css);
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 75px;
  z-index: 100;
  padding-top: 40px;
}
.header .inner {
  display: flex;
  justify-content: space-between;
}
.header .inner .gnb {
  text-align: center;
  display: block;
  width: 100%;
}
.header .inner .gnb ul {
  display: flex;
  justify-content: center;
}
.header .inner .gnb ul li {
  position: relative;
  margin-left: 52px;
  font-size: 20px;
  font-weight: 200;
  transition: 0.3s;
  color: #3d3d3d;
}
.header .inner .gnb ul li.on {
  color: #1d1d1d;
}
.header .inner .gnb ul li::after {
  opacity: 0;
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #707070;
  left: 0;
  bottom: -10px;
  transition: 0.3s;
}
.header .inner .gnb ul li:hover {
  transform: translateY(-2px);
}
.header .inner .gnb ul li.on:hover {
  transform: translateY(0);
}
.header .inner .gnb ul li.on::after {
  opacity: 1;
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  bottom: -2px;
}
.header .inner .logo {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.header .inner .logo p {
  display: block;
  font-weight: 200;
}
.header .inner .logo span {
  position: relative;
  margin-left: 10px;
  display: block;
  font-weight: 700;
}
.header .inner .logo span::after {
  position: absolute;
  content: "";
  top: 2px;
  left: -5px;
  width: 1px;
  height: 20px;
  background-color: #9d9d9d;
}

.visual {
  max-height: 950px;
  min-height: 850px;
  height: 100vh;
  position: relative;
}
.visual .inner {
  width: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  padding: 0 60px;
  max-width: 1920px;
  transform: translateX(-50%);
  z-index: -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.visual .inner::before {
  position: absolute;
  content: "";
  font-size: 250px;
  width: auto;
  height: 250px;
  left: 0;
  bottom: 100px;
  content: "디자인 하기싫다 차라리 코딩할래 디자인 하기싫다 차라리 코딩할래 디자인 하기싫다 차라리 코딩할래";
  white-space: nowrap;
  z-index: -1;
  color: rgba(112, 112, 112, 0.03);
  font-weight: 700;
  animation-name: animate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.visual .tit {
  width: 100%;
  margin-top: 250px;
}
.visual .tit .txth1 {
  overflow: hidden;
  height: 60px;
}
.visual .tit .txth2 {
  overflow: hidden;
  height: 96px;
}
.visual .tit p {
  opacity: 0;
  animation: fadeInUp forwards 0.8s;
  overflow: hidden;
  display: block;
  font-size: 50px;
}
.visual .tit h2 {
  animation: fadeInUp forwards 0.8s 0.1s;
  opacity: 0;
  font-size: 80px;
  font-weight: 700;
}
.visual .tit h2 span {
  font-weight: 400;
}
.visual .tit em {
  color: #077BFF;
}
.visual .subtit {
  margin-bottom: 150px;
  width: 100%;
}
.visual .subtit .txtbox {
  height: 36px;
  overflow: hidden;
}
.visual .subtit p {
  opacity: 0;
  font-size: 30px;
  animation: fadeInUp forwards 0.8s 0.2s;
}
.visual .sub {
  width: 100%;
  height: auto;
}
.visual .sub ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.visual .sub ul .sub_hash {
  color: #707070;
}
.visual .sub ul .sub_cnt span {
  display: block;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 10px;
}
.visual .sub ul .sub_cnt em {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 10px;
}
.visual .sub ul .sub_cnt p {
  display: block;
  font-size: 20px;
}
.visual .scroll_inner {
  opacity: 0;
  animation: scrollingtxt forwards 1s 2s;
  position: absolute;
  justify-content: center;
  text-align: center;
  bottom: 70px;
  left: calc(50% - 35px);
  font-size: 13px;
}
.visual .scroll_inner .scroll {
  opacity: 0;
  animation: scrolling infinite 4s 2s;
  margin: 10px 0 0 24px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  border: 2px solid #9d9d9d;
  width: 25px;
  height: 40px;
}
.visual .scroll_inner .scroll .scroll2 {
  position: relative;
  margin-top: 10px;
  border-radius: 10px;
  border: 2px solid #9d9d9d;
  width: 5px;
  height: 8px;
}
.visual .scroll_inner.off {
  animation: scrollingstart forwards 1s;
}

.about {
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content: center;
  min-height: 820px;
  width: 100%;
}
.about.on .txt {
  animation: fromside forwards 0.5s 0.5s;
}
.about.on::after {
  animation: fromside2 forwards 0.5s 0.1s;
}
.about::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  right: 0;
  transform: translateX(-65%);
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
}
.about::after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
}
.about .inner {
  position: relative;
  padding: 200px 0 0 0;
  transform: translate(18%);
}
.about .inner h2 {
  opacity: 0;
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.about .inner .top {
  position: relative;
}
.about .inner .top ul {
  display: flex;
  justify-content: space-between;
}
.about .inner .top ul li {
  min-width: 300px;
  opacity: 0;
}
.about .inner .top ul li p {
  display: block;
  margin-bottom: 5px;
}
.about .inner .top ul .skill span {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.about .inner .top ul .skill p {
  width: 95px;
}
.about .inner .top ul .skill .progress {
  margin-bottom: 5px;
  background: #E5E5E5;
  border-radius: 10px;
  height: 8px;
  width: 178px;
}
.about .inner .top ul .skill .progress.on div {
  opacity: 1;
}
.about .inner .top ul .skill .progress.on .bar1 {
  animation: barscale 1.6s forwards 0.5s;
}
.about .inner .top ul .skill .progress.on .bar2 {
  animation: barscale 1.5s forwards 0.5s;
}
.about .inner .top ul .skill .progress.on .bar3 {
  animation: barscale 1.8s forwards 0.5s;
}
.about .inner .top ul .skill .progress div {
  background-color: #B7B7B7;
  border-radius: 10px 0 0 10px;
  transform-origin: left;
  height: 100%;
  opacity: 0;
}
.about .inner .top ul .skill .progress .bar1 {
  width: 82%;
}
.about .inner .top ul .skill .progress .bar2 {
  width: 77%;
}
.about .inner .top ul .skill .progress .bar3 {
  width: 92%;
}
.about .inner .top::after {
  position: absolute;
  content: "";
  bottom: -50px;
  left: 58px;
  min-width: 800px;
  height: 1px;
  background-color: #707070;
}
.about .inner .bot {
  margin-top: 105px;
}
.about .inner .bot ul {
  display: flex;
  justify-content: space-between;
}
.about .inner .bot ul li {
  opacity: 0;
  min-width: 300px;
}
.about .inner .bot ul li p {
  display: block;
  margin-bottom: 10px;
}
.about .inner .bot ul li span {
  display: flex;
}
.about .inner .bot ul li span strong {
  display: block;
  min-width: 50px;
  font-weight: 700;
}
.about .inner .info.animation {
  animation: fromside forwards 0.5s 0.6s;
}
.about .inner .skill.animation {
  animation: fromside forwards 0.5s 0.7s;
}
.about .inner .edu.animation {
  animation: fromside forwards 0.5s 0.8s;
}
.about .inner .exp.animation {
  animation: fromside forwards 0.5s 0.9s;
}

.page {
  display: flex;
  background-color: #fff;
  justify-content: center;
  width: 100%;
  height: auto;
}
.page .inner {
  padding-top: 140px;
  max-width: 1920px;
  width: 100%;
}
.page .inner .text {
  padding: 0 60px;
  margin-bottom: 215px;
}
.page .inner h2 {
  font-size: 100px;
  font-weight: 600;
}
.page .inner p {
  font-size: 25px;
}
.page .inner p strong {
  font-weight: 600;
}
.page .inner .content1, .page .inner .content2, .page .inner .content3 {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}
.page .inner .content1:hover, .page .inner .content2:hover, .page .inner .content3:hover {
  background-color: #F8F8F8;
}
.page .inner .content1 .depth1, .page .inner .content2 .depth1, .page .inner .content3 .depth1 {
  display: flex;
  justify-content: space-between;
  position: relative;
  flex-wrap: nowrap;
  border-top: 1px solid #9d9d9d;
  margin: 0 60px;
}
.page .inner .content1 .depth1 li, .page .inner .content2 .depth1 li, .page .inner .content3 .depth1 li {
  width: 50%;
}
.page .inner .content1 .depth1:hover, .page .inner .content2 .depth1:hover, .page .inner .content3 .depth1:hover {
  background-color: #F8F8F8;
}
.page .inner .content1 .depth1 .depth_inner, .page .inner .content2 .depth1 .depth_inner, .page .inner .content3 .depth1 .depth_inner {
  display: flex;
  justify-content: space-between;
}
.page .inner .content1 .depth1 .img1, .page .inner .content1 .depth1 .img2, .page .inner .content1 .depth1 .img3, .page .inner .content2 .depth1 .img1, .page .inner .content2 .depth1 .img2, .page .inner .content2 .depth1 .img3, .page .inner .content3 .depth1 .img1, .page .inner .content3 .depth1 .img2, .page .inner .content3 .depth1 .img3 {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid #9d9d9d;
  max-width: 760px;
}
.page .inner .content1 .depth1 .img1 p, .page .inner .content1 .depth1 .img2 p, .page .inner .content1 .depth1 .img3 p, .page .inner .content2 .depth1 .img1 p, .page .inner .content2 .depth1 .img2 p, .page .inner .content2 .depth1 .img3 p, .page .inner .content3 .depth1 .img1 p, .page .inner .content3 .depth1 .img2 p, .page .inner .content3 .depth1 .img3 p {
  font-size: 0;
  line-height: 0;
}
.page .inner .content1 .depth1 .img1 strong, .page .inner .content1 .depth1 .img2 strong, .page .inner .content1 .depth1 .img3 strong, .page .inner .content2 .depth1 .img1 strong, .page .inner .content2 .depth1 .img2 strong, .page .inner .content2 .depth1 .img3 strong, .page .inner .content3 .depth1 .img1 strong, .page .inner .content3 .depth1 .img2 strong, .page .inner .content3 .depth1 .img3 strong {
  position: absolute;
  content: "";
  bottom: -20px;
  right: -80px;
  width: 452px;
  height: 313px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  line-height: 0;
}
.page .inner .content1 .depth1 .img1, .page .inner .content2 .depth1 .img1, .page .inner .content3 .depth1 .img1 {
  background-image: url(../images/visual1.png);
  margin-right: 60px;
}
.page .inner .content1 .depth1 .img1 strong, .page .inner .content2 .depth1 .img1 strong, .page .inner .content3 .depth1 .img1 strong {
  background-image: url(../images/visual1_mobile.png);
}
.page .inner .content1 .depth1 .img2, .page .inner .content2 .depth1 .img2, .page .inner .content3 .depth1 .img2 {
  background-image: url(../images/visual2.png);
  margin-left: 60px;
}
.page .inner .content1 .depth1 .img2 strong, .page .inner .content2 .depth1 .img2 strong, .page .inner .content3 .depth1 .img2 strong {
  background-image: url(../images/visual2_mobile.png);
}
.page .inner .content1 .depth1 .img3, .page .inner .content2 .depth1 .img3, .page .inner .content3 .depth1 .img3 {
  margin-right: 60px;
  background-image: url(../images/visual3.png);
}
.page .inner .content1 .depth2, .page .inner .content2 .depth2, .page .inner .content3 .depth2 {
  padding: 20px 60px;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  width: 100%;
  height: 450px;
}
.page .inner .content1 .depth2 li, .page .inner .content2 .depth2 li, .page .inner .content3 .depth2 li {
  width: 100%;
  height: 50%;
}
.page .inner .content1 .depth2 .top, .page .inner .content2 .depth2 .top, .page .inner .content3 .depth2 .top {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.page .inner .content1 .depth2 .top strong, .page .inner .content2 .depth2 .top strong, .page .inner .content3 .depth2 .top strong {
  position: relative;
  font-size: 20px;
}
.page .inner .content1 .depth2 .top strong em, .page .inner .content2 .depth2 .top strong em, .page .inner .content3 .depth2 .top strong em {
  position: absolute;
  content: "";
  font-size: 30px;
  top: -6px;
  right: 0;
}
.page .inner .content1 .depth2 .top span, .page .inner .content2 .depth2 .top span, .page .inner .content3 .depth2 .top span {
  font-size: 30px;
}
.page .inner .content1 .depth2 .bot, .page .inner .content2 .depth2 .bot, .page .inner .content3 .depth2 .bot {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: flex-end;
  font-weight: 700;
}
.page .inner .content1 .depth2 .bot strong, .page .inner .content2 .depth2 .bot strong, .page .inner .content3 .depth2 .bot strong {
  font-size: 80px;
}
.page .inner .content1 .depth2 .bot p, .page .inner .content2 .depth2 .bot p, .page .inner .content3 .depth2 .bot p {
  font-size: 60px;
}
.page .inner .content3 .depth1 {
  border-bottom: 1px solid #9d9d9d;
}
.page .inner .content1.on, .page .inner .content3.on {
  animation: fadeleft forwards 1s;
}
.page .inner .content2.on {
  animation: faderight forwards 1s;
}

.footer {
  width: 100%;
  min-height: 200px;
  background-color: #F8F8F8;
}
.footer .f_inner {
  display: block;
  padding-top: 120px;
  width: 100%;
  text-align: center;
}
.footer .f_inner p {
  color: #707070;
}
.footer .f_inner em {
  font-weight: 700;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fromside {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fromside2 {
  0% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-3265px);
  }
}
@keyframes barscale {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(-100vh);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes faderight {
  0% {
    opacity: 0;
    transform: translateX(100vh);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scrolling {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(25px);
  }
  70% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 0;
    transform: translateY(25px);
  }
}
@keyframes scrollingtxt {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scrollingstart {
  0% {
    opacity: inherit;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}/*# sourceMappingURL=main.css.map */