@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

html {
  scroll-behavior: smooth;
}

@media (min-width:1900px) {
  body {
    overflow-x: hidden;
  }
}


html>body {
  font-family: 'Roboto', sans-serif;

}

/* 스크롤바 꾸미기 시작 */
::-webkit-scrollbar-thumb {
  background-color: rgba(18,61,252,0.9);
  border-radius: 0;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:root {
  --site-width: 1920px;
  overflow-y: overlay;
}

.con {
  width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
  /* 워터그래프 */
  .skill-box .water-1 {
    width: 135px;
    height: 135px;
    background-color: #5070FD;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border:1px solid #123dfc;
    margin-right:170px;
  }
  .skill-box .water-1-1:before,
  .skill-box .water-1-1:after {
    content: "";
    position: absolute;
    width: 135px;
    height: 135px;
    top: -120px;
    background-color: #fff;
  }
  .skill-box .water-1-2:before,
  .skill-box .water-1-2:after {
    content: "";
    position: absolute;
    width: 135px;
    height: 135px;
    top: -95px;
    background-color: #fff;
  }
  .skill-box .water-1-3:before,
  .skill-box .water-1-3:after {
    content: "";
    position: absolute;
    width: 135px;
    height: 135px;
    top: -110px;
    background-color: #fff;
  }
  .skill-box .water-1-4:before,
  .skill-box .water-1-4:after {
    content: "";
    position: absolute;
    width: 135px;
    height: 135px;
    top: -105px;
    background-color: #fff;
  }
  .skill-box .water-1:before {
    border-radius: 75%;
    background: rgba(255, 255, 255, 0.7);
    animation: wave 5s linear infinite;
  }
  .skill-box .water-1:after {
    border-radius: 35%;
    background: rgba(255, 255, 255, 0.3);
    animation: wave-1 5s linear infinite;
  }
  @keyframes wave-1 {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
/*---- 어바웃 -----*/
#container {
  position: absolute;
  margin: auto;
  width: 450px;
  height: 56pt;
  top: 300px;
  left: 570px;
  filter: url(#threshold) blur(0.6px);
}

#text1,
#text2 {
  position: absolute;
  width: 100%;
  display: inline-block;
  font-size: 32pt;
  font-weight: bold;
  color: #fff;
  text-align: center;
  user-select: none;
}

/* 그래프 */
.holder {
  height: 17px;
  background: #fff;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  width: 425px;
  margin: 85px auto;
  border-radius: 50px;
  border: 1px solid #A0B1FE;
}

.bar {
  border-radius: 50px;
  background: #A0B1FE;
  height: 16px;
  width: 0;
  animation: bar-move 3s linear;
  animation-delay: 2s;
  animation-iteration-count: 3;
  transition: width 3s, background .3s;

  &:hover {
    background: lighten($color, 10%);
  }
}




/* slideLeft */


.u--slideLeft {
  animation-name: u--slideLeft;
  animation-duration: 2s;
  animation-duration: leaner;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@-webkit-keyframes u--slideLeft {
  0% {
    transform: translate3d(-0%, 0, 0);
  }

  100% {
    transform: none;
  }
}


.skill-water {
  animation-name: skill-water;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(.15, .41, .69, .94);
  animation-iteration-count: infinite;
}

@keyframes skill-water {
  0% {
    transform: translateY(0px) opacity: 0;
  }

  10% {
    transform: translateY(0px);
    opacity: 0.1;
  }

  20% {
    transform: translateY(0px);
    opacity: 0.2;
  }

  30% {
    transform: translateY(0px);
    opacity: 0.3;
  }

  40% {
    transform: translateY(0px);
    opacity: 0.4;
  }

  50% {
    transform: translateY(0px);
    opacity: 0.5;
  }

  60% {
    transform: translateY(0px);
    opacity: 0.6;
  }

  70% {
    transform: translateY(0px);
    opacity: 0.7;
  }

  80% {
    transform: translateY(1px);
    opacity: 0.8;
  }

  90% {
    transform: translateY(3px);
    opacity: 0.9;
  }

  100% {
    transform: translateY(5px);
    opacity: 1;
  }
}



.jun-1 {
  animation-name: jun-1;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15, .41, .69, .94);
  animation-iteration-count: infinite;
}

@keyframes jun-1 {
  0% {
    opacity: 0;
  }

  10% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(10px);
    opacity: 0.5;
  }
}

/*---- home ----*/
.home-box {
  height: 900px;
}

.home-bar .img-1 {
  opacity: 80%;
}

.left-item .menu-box {
  padding: 20px;

}

.left-item .menu-box .menu-1 li>a {
  position: relative;
  color: #c8c8c8;
  font-weight: 400;
  padding: 14px;
  display: block;
  white-space: nowrap;
  transition: font-size .3s;
  font-size: 16px;
}

.left-item .menu-box .menu-1 li:hover>a {
  color: black;
  font-weight: 800;
  transform: scale(1.2);
}

/* 메뉴-밑줄 */
.menu-box .menu-1>li>a::after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 1px;
  background-color: #000000;
  transition: width .3s;
  transform: translateX(-50%);
}

.menu-box .menu-1>li>.af-1::after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 42%;
  height: 1px;
  background-color: #000000;
  transition: width .3s;
  transform: translateX(-50%);
}

.menu-box .menu-1>li:hover>a::after {
  width: calc(100% - 15px);
}

.menu-box .menu-1>li:hover>.af-1::after {
  width: calc(100% - 32px);
}

.bg-white {
  margin-right: 28px;
  margin-bottom: 12px;
}

/* 외쪽 아이콘 */
.left-item .icon-box {
  padding-left: 35px;
}

.left-item .icon-box .ico_1 li {
  padding-top: 18px;
}

/* 오른쪽-메뉴 */
.right-item .one-1 {
  padding: 25px;
  padding-bottom: 70px;
}

.right-item .one-1 a {
  text-align: center;
  padding-top: 18px;
  padding-bottom: 18px;
}



/* arrows-1 */
.scroll-1 {
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15, .41, .69, .94);
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }

  10% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(15px);
    opacity: 0.5;
  }
}

.arrows-1 {
  width: 40px;
  height: 70px;
}

.arrows-1>div {
  margin: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: arrow-1 2s infinite;
  -webkit-animation: arrow-1 2s infinite;
}

.arrows-1 .a1 {
  margin-left: 7px;
  background-color: #b7b7b7;
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
}

.arrows-1 .a2 {
  margin-left: 7px;
  background-color: #898989;
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
}

.arrows-1 .a3 {
  width: 10px;
  height: 10px;
  background-color: #5c5c5c;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

@keyframes arrow-1 {
  0% {
    opacity: 0
  }

  40% {
    opacity: 1
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

/* about-title */
.home-bar .about-title {
  animation: switch 32s linear infinite;
}

@keyframes switch {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: scale(3)
  }

  3% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1)
  }

  10% {
    opacity: 1;
    filter: blur(0);
    transform: scale(.9)
  }

  13% {
    opacity: 0;
    filter: blur(10px);
    transform: scale(.1)
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

/*---------버튼-------*/
.about-frist-box .up-btn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  right: 4%;
  opacity: 1;
  visibility: hidden;
  transition: 0.4s;
  z-index: 1000;
}

.about-frist-box .up-btn.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-20px);
  /*  밑에서 위로 올라오게 하기.*/

  /* 커서 */
  .cursor {
    position: fixed;
    top: -300px;
    left: -300px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(185, 189, 248);
    pointer-events: none;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2000;
  }

  .cursor-shadow {
    position: fixed;
    top: -300px;
    left: -300px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #123dfc;
    pointer-events: none;
    transform: translateX(-50%) translateY(-50%);
    transition: top .3s, left .3s;
    z-index: 1999;
  }