body {
  font-family: 'Roboto', sans-serif;
  background-color: #F2F2F2;
}

.navbar-brand {
  font-size: 20px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  color: #757474;
}

.navbar-nav .nav-item {
  font-size: 16px;
  font-weight: 300;
}

.navbar-nav .nav-item:hover {
  background-color: #FD5D5D;
  font-size: 18px;
}

.section-header .hero-title {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 80px;
  font-weight: 300;
  color: #171010;
}

.section-header .hero-title span {
  color: #FD5D5D;
}

.section-header .hero-caption {
  font-size: 14px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.section-header .contact-title {
  font-size: 11px;
  font-weight: 300;
}

.section-header .btn {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  border-radius: 0px;
}

.section-header .btn:hover {
  background-color: #FD5D5D;
  color: #F2F2F2;
  font-size: 16px;
}

.section-header .figure {
  -webkit-animation-name: bounce-1;
          animation-name: bounce-1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  margin: 0 auto 0 auto;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

@-webkit-keyframes bounce-1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes bounce-1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.copyright {
  font-size: 14px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  color: #757474;
}

@media (max-width: 575.98px) {
  .section-header {
    margin-top: -70px;
  }
  .section-header .hero-title {
    font-size: 70px;
  }
  .section-header .hero-caption {
    text-align: center;
  }
  .copyright {
    font-size: 12px;
  }
}

.section-header-resume .hero-title-resume {
  margin-top: 90px !important;
  font-size: 200px;
  font-weight: 400;
  font-family: 'Nanum Myeongjo', serif;
}

.section-header-resume .hero-title-resume span {
  color: #FD5D5D;
}

@media (max-width: 575.98px) {
  .section-header-resume {
    height: none;
  }
  .section-header-resume .hero-title-resume {
    font-size: 70px;
  }
}

.vr {
  background-color: #aeaeae !important;
}

.btn-scroll {
  width: 35px;
  height: 35px;
  -webkit-animation-name: bounce-1;
          animation-name: bounce-1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  margin: 0 auto 0 auto;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

@keyframes bounce-1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.section-about-me .caption-me {
  font-size: 16px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.section-about-me .caption-me p {
  color: #FD5D5D;
}

.section-about-me .caption-me p span {
  color: #171010;
}

.section-about-me .caption-me .btn-outline-danger {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  border-radius: 0px;
}

.section-about-me .caption-me .btn-outline-danger:hover {
  background-color: #FD5D5D;
  color: #F2F2F2;
  font-size: 16px;
}

@media (max-width: 575.98px) {
  .section-about-me .caption-me {
    font-size: 14px;
  }
}

.section-services .services-title {
  background-color: #FD5D5D;
  font-size: 40px;
  font-weight: 200;
  color: #F2F2F2;
}

.section-services .card {
  background-color: #F2F2F2;
  border-color: #FD5D5D;
  border-radius: 0px;
}

.section-services .card .card-header {
  background-color: #F2F2F2;
  border-radius: 0px;
  border-color: #F2F2F2;
}

.section-services .card .card-title {
  color: #FD5D5D;
  font-weight: bold;
}

.section-services .card p {
  font-size: 14px;
  font-weight: 300;
}

.section-services .card .card-image {
  width: 60px;
  height: 60px;
}

.section-experience .experience-title {
  background-color: #FD5D5D;
  font-size: 40px;
  font-weight: 200;
  color: #F2F2F2;
}

.section-experience .card-experience-education {
  background-color: #F2F2F2;
  border: none;
}

.section-experience .card-experience-education .hero-title {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
}

.section-experience .card-experience-education .card-text {
  background-color: #F2F2F2;
  border-color: #FD5D5D;
  border-radius: 0px;
  font-size: 16px;
}

.section-experience .card-experience-education .card-text .experience-year {
  font-weight: 500;
  color: #FD5D5D;
}

.section-experience .card-experience-education .card-text .experience-text {
  font-weight: 500;
}

.section-experience .card-experience-education .card-text .experience-caption {
  font-weight: 300;
  font-size: 14px;
}

.section-experience .card-experience-education .card-text .education-year {
  font-weight: 500;
  color: #FD5D5D;
}

.section-experience .card-experience-education .card-text .education-text {
  font-weight: 500;
}

.section-experience .card-experience-education .card-text .education-caption {
  font-weight: 300;
  font-size: 14px;
}

.section-language {
  height: auto;
}

.section-language .language-title {
  font-size: 40px;
  font-weight: 200;
  color: #F2F2F2;
  background-color: #FD5D5D;
}

.section-language hr {
  background-color: #F2F2F2;
}

.section-language .hero-title {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #757474;
}

.section-language .progress {
  width: 150px;
  height: 150px !important;
  float: left;
  line-height: 150px;
  background: none;
  margin: 25px;
  -webkit-box-shadow: none;
          box-shadow: none;
  position: relative;
}

.section-language .progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.section-language .progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.section-language .progress .progress-left {
  left: 0;
}

.section-language .progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.section-language .progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.section-language .progress .progress-right {
  right: 0;
}

.section-language .progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  -webkit-animation: loading-1 1.8s linear forwards;
          animation: loading-1 1.8s linear forwards;
}

.section-language .progress .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: #F2F2F2;
  font-size: 24px;
  color: #757474;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}

.section-language .progress.blue .progress-bar {
  border-color: #FD5D5D;
}

.section-language .progress.blue .progress-left .progress-bar {
  -webkit-animation: loading-2 1.5s linear forwards 1.8s;
          animation: loading-2 1.5s linear forwards 1.8s;
}

.section-language .progress.yellow .progress-bar {
  border-color: #FD5D5D;
}

.section-language .progress.yellow .progress-right .progress-bar {
  -webkit-animation: loading-3 1.8s linear forwards;
          animation: loading-3 1.8s linear forwards;
}

.section-language .progress.yellow .progress-left .progress-bar {
  -webkit-animation: loading-4 1.5s linear forwards 1.8s;
          animation: loading-4 1.5s linear forwards 1.8s;
}

@-webkit-keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}

@-webkit-keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
  }
}

.section-coding-skills .coding-skills-title {
  font-size: 40px;
  font-weight: 200;
  color: #F2F2F2;
  background-color: #FD5D5D;
}

.section-coding-skills .card {
  background-color: #F2F2F2;
  border-radius: 10px;
  border-color: #FD5D5D;
}

.section-coding-skills .card .coding-skills-caption {
  font-size: 15px;
  font-weight: 400;
  color: #171010;
}

.section-coding-skills .card .progress-bar {
  background-color: #FD5D5D;
}

.section-knowledge {
  background-color: #FD5D5D;
}

.section-knowledge .knowledge-title {
  font-size: 40px;
  font-weight: 200;
  color: #F2F2F2;
  background-color: #FD5D5D;
}

.section-knowledge hr {
  background-color: #F2F2F2;
}

.section-knowledge .knowledge-caption {
  font-size: 16px;
  font-weight: 400;
  color: #F2F2F2;
}

.section-knowledge .knowledge-caption .bi-check-lg {
  font-size: 20px;
  color: #F2F2F2;
}

.section-works {
  background-color: #FD5D5D;
}

.section-works .flex-shrink-0 img {
  background-size: cover;
}

.section-works .flex-grow-1 {
  color: #F2F2F2;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.section-works .flex-grow-1 .date-works {
  color: #f2f2f29e;
  font-size: 14px;
  font-style: italic;
}

.section-works .flex-grow-1 .works-caption {
  font-size: 14px;
}

@media (max-width: 575.98px) {
  .section-works .flex-grow-1 {
    text-align: center;
  }
  .section-works .flex-grow-1 .date-works {
    font-size: 12px;
  }
  .section-works .flex-grow-1 .works-title {
    font-size: 16px;
  }
  .section-works .flex-grow-1 .works-caption {
    font-size: 12px;
  }
}

.section-contacts .card {
  border-color: #FD5D5D;
  background-color: #F2F2F2;
}

.section-contacts .card .card-body {
  font-size: 14px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.section-contacts .card .card-body .card-text {
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .section-contacts .card2 {
    margin-top: 50px;
  }
}

@media (max-width: 767.98px) {
  .section-contacts .card2 {
    margin-top: 50px;
  }
}

@media (max-width: 991.98px) {
  .section-contacts .card2 {
    margin-top: 50px;
  }
}

.section-contact-form {
  background-color: #FD5D5D;
}

.section-contact-form .contact-form-title {
  font-size: 24px;
  font-weight: 500;
  color: #F2F2F2;
}

.section-contact-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.section-contact-form .formthree .form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-size: 14px;
  border-bottom: 1px solid #F2F2F2;
  background: transparent;
  font-family: 'Roboto', sans-serif;
}

.section-contact-form form .btn {
  border-radius: 0 !important;
}

.section-contact-form .formthree form button.btn {
  margin: 30px auto;
  display: block;
  padding: 11px 32px;
  background: #FD5D5D;
  border: 1px solid #F2F2F2;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  font-size: 12px;
}

.section-contact-form .formthree .btn-primary.focus,
.section-contact-form .formthree .btn-primary:hover {
  background-color: transparent;
  color: #171010;
  border: 1px solid #171010 !important;
}
/*# sourceMappingURL=main.css.map */