@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

@font-face {
  font-family: "GowunBatang-Regular";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

::selection {
  background-color: #011efe;
  color: #fff;
}

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

ul,
li {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  vertical-align: middle;
  border: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: "Noto Sans KR", "GowunBatang-Regular", Helvetica, "맑은 고딕",
    "malgun gothic", "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.64px;
  color: #444;
  background-color: #fff;
}

/* 공통요소 */
.clearfix::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  clear: both;
}

.inner {
  position: relative;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
}

.wrap {
  position: relative;
  display: block;
}
.go-top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 999;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #1f1f1f;
  border-radius: 50%;
  cursor: pointer;
  visibility: hidden;
}

.go-top-show {
  visibility: visible;
}
.go-top img {
  width: 30px;
  height: 30px;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
  z-index: 9999;
  text-align: right;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.header h1 {
  display: inline-block;
  position: absolute;
  left: 0;
  font-size: 0;
}

.header h1 a {
  display: block;
  width: 100px;
  height: 80px;
  background: url("../images/logo3.jpg") no-repeat center;
  background-size: cover;
}

.gnb {
  position: relative;
  display: inline-block;
}

.gnb > li {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
  margin: 0 20px;
}

.gnb > li:last-child {
  margin-right: 0;
}

.gnb li a {
  display: block;
  position: relative;
  line-height: 16px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  line-height: 80px;
  color: #333;
  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.gnb li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #5a81fa;
  bottom: 25px;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.gnb li a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.gnb li a:hover {
  color: #5a81fa;
}
.gnb-li-a-active {
  color: #5a81fa !important;
}
.gnb-li-a-active::before {
  transform-origin: left !important;
  transform: scaleX(1) !important;
}

/* Visual */
.visual {
  position: relative;
  display: block;
  height: 800px;
  width: 100%;
  background: url("../images/pexels-andreea-ch-1166643.jpg") no-repeat center;
  background-size: cover;
}
.visual .inner {
  position: relative;
  display: block;
}
.visual .inner .visual-main-txt-box {
  position: absolute;
  top: 250px;
  display: block;
}

.visual-main-txt-box h2 {
  font-size: 50px;
  color: #1f1f1f;
  margin-bottom: 30px;
}
.visual-main-txt-box .visual-main-name {
  color: #011efe;
  font-weight: 700;
}
.visual-main-txt-box p {
  font-size: 22px;
  line-height: 35px;
  font-weight: 400;
  color: #1f1f1f;
}

.visual-sub-txt-box {
  position: absolute;
  right: 8%;
  top: 10%;
}

/* portfolio */
.portfolio {
  position: relative;
  display: block;
  margin-bottom: 100px;
  padding-top: 100px;
}

.portfolio .inner h2 {
  font-size: 50px;
  color: #011efe;
  text-align: center;
  font-weight: 600;
  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.portfolio-cate {
}

.portfolio-menu {
  position: relative;
  display: block;
  text-align: center;
  margin-top: 15px;
  white-space: nowrap;
  font-size: 0;
  letter-spacing: 0;
}

.portfolio-menu a {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #444;
  letter-spacing: -0.64;
  padding: 0 15px;

  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.portfolio-menu a:hover {
  color: #011efe;
}

.portfolio-menu-active {
  color: #011efe !important;
}

.bar::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: #444;
}

.portfolio-wrap {
  position: relative;
  display: block;
}

.portfolio-wrap-box {
  position: relative;
  display: none;
}
.portfolio-wrap-box-active {
  display: block !important;
}

.portfolio-list {
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.portfolio-list > li {
  position: relative;
  margin-top: 50px;
  width: 350px;
  height: 400px;
  border-radius: 5px;
  overflow: hidden;

  box-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.portfolio-list > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #5a81fa;
  width: 100%;
  height: 100%;
  transform: translateY(0px);
  transition: all 0.5s;
  z-index: 1;
  opacity: 0.9;
}

.portfolio-list > li:hover::before {
  height: 0%;
}

.txt-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.txt-box h3 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 20px;
  font-weight: 700;

  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.txt-box p {
  color: #fff;

  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.img-box {
  width: 100%;
  height: 400px;
}

.link-box {
  position: absolute;
  left: 45px;
  bottom: 30px;
  display: none;
  width: 100%;
}

.link-box a {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #5a81fa;
  margin-right: 10px;
}

.link-box a:last-child {
  margin-right: 0;
}

.link-box a span {
  display: inline-block;
  width: 100%;
  line-height: 80px;
  text-align: center;
  color: #5a81fa;
}

.img-box-1 img,
.img-box-2 img,
.img-box-3 img,
.img-box-4 img,
.img-box-5 img,
.img-box-6 img,
.img-box-7 img,
.img-box-8 img,
.img-box-9 img {
  width: 100%;
  height: 400px;
  border: 10px solid #5a81fa;
  overflow: hidden;
  object-fit: cover;
}

.list-1:hover .txt-box {
  display: none;
}

.list-2:hover .txt-box {
  display: none;
}

.list-3:hover .txt-box {
  display: none;
}

.list-4:hover .txt-box {
  display: none;
}

.list-5:hover .txt-box {
  display: none;
}
.list-6:hover .txt-box {
  display: none;
}
.list-7:hover .txt-box {
  display: none;
}
.list-8:hover .txt-box {
  display: none;
}
.list-9:hover .txt-box {
  display: none;
}

.portfolio-list li:hover .link-box {
  display: block;
}

.link-box a:hover {
  background-color: #5a81fa;
  border: 3px solid #fff;
}

.link-box a span:hover {
  color: #fff;
}

/* profile */
.profile {
  position: relative;
  display: block;
  height: 100%;
  color: #333;
  background-color: #fff;
  width: 100%;
  padding-top: 30px;
  margin-bottom: 50px;
}

.profile-left {
  width: 30%;
  height: 100%;
  margin-right: 6%;
  float: left;
  background-color: #abf0ff;
  border-radius: 0px 0px 200px 200px;
}

.profile-left-top {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.profile-left-top img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin-left: 30px;
}

.profile-left-top p {
  text-transform: uppercase;
  margin-left: 95px;
}

.infomation {
  position: relative;
  display: block;
}

.infomation .my-name {
  position: relative;
  display: block;
  width: 340px;
  text-indent: 95px;
  color: #011efe;
  font-size: 30px;
  margin-bottom: 30px;
  font-weight: 700;
  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}
.infomation .my-name span {
  margin-left: 10px;
  font-size: 23px;
}

.infomation-way {
  position: relative;
  display: block;
  margin-left: 40px;
}

.infomation-way p {
  margin-bottom: 20px;
}

.infomation-way .info-way-left {
  position: relative;
  display: inline-block;
  width: 100px;
}

.info-desc {
  font-weight: 500;
}
.infomation .education {
  position: relative;
  display: block;
}
.infomation .education .edu-1 {
  display: inline-block;
  margin-bottom: 20px;
}
.infomation .education .edu-2 {
  display: block;
  margin-left: 104px;
}

.infomation-way .contact {
  position: relative;
  display: inline-block;
  margin-bottom: 100px;
}

.infomation-way .contact span {
  float: left;
}
.contact-icon-box {
  float: right;
  padding-right: 20px;
}
.con-1,
.con-2,
.con-3,
.con-4 {
  display: block;
  float: left;
  margin-right: 20px;
}

.con-1 {
  width: 30px;
  height: 30px;
  background: url("../images/kakaotalk.png");
  background-size: cover;
}

.con-2 {
  width: 30px;
  height: 30px;
  background: url("../images/googlemail.png");
  background-size: cover;
}

.con-3 {
  width: 30px;
  height: 30px;
  background: url("../images/github-blue.png");
  background-size: cover;
}
.con-4 {
  width: 30px;
  height: 30px;
  background: url("../images/pdf.png");
  background-size: cover;
}

.profile-right {
  width: 64%;
  float: left;
  margin-top: 50px;
}

.profile-right h3 {
  color: #011efe;
  font-size: 16px;
  margin-bottom: 30px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.profile-aboutme {
  margin-bottom: 50px;
}

.profile-aboutme .pro-aboutme-txt1 {
  margin-bottom: 30px;
}

.profile-aboutme p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1rem;
  color: #333;
}
.profile-aboutme p .pro-aboutme-txt1-blue {
  color: #011efe;
  font-weight: 700;
}

.profile-right-bottom {
  position: relative;
}

.profile-mbti {
  position: relative;
  display: block;
  margin-bottom: 30px;
}
.mbti-mini-box {
  position: relative;
  display: block;
}
.mbti-mini-list {
  position: relative;
  display: block;
  margin-bottom: 30px;
}
.mbti-mini-list li {
  position: relative;
  display: block;
  float: left;
  margin-right: 20px;
  background: #5a81fa;
  color: #fff;
  padding: 10px 30px;
  border-radius: 10px;
}

.profile-mbti p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1rem;
  color: #333;
}

.profile-skill {
  position: relative;
  display: block;
}
.profile-skill ul {
  position: relative;
  display: block;
  margin-bottom: 30px;
}
.profile-skill li {
  position: relative;
  display: block;
  float: left;
}

.profile-skill p {
  width: 50px;
  height: 50px;
  margin: 0 20px;
}
.profile-skill .skill-txt-box {
  position: relative;
  display: block;
}

.profile-skill .skill-txt-box span {
  position: relative;
  display: block;
  line-height: 27px;
}

.html-icon {
  background: url("../images/html-5.png");
  background-size: cover;
}

.css-icon {
  background: url("../images/CSS.png");
  background-size: cover;
}

.js-icon {
  background: url("../images/JS.png");
  background-size: cover;
}

.jquery-icon {
  background: url("../images/jquery.png");
  background-size: cover;
}

.vue-icon {
  background: url("../images/vue.png");
  background-size: cover;
}

.github-icon {
  background: url("../images/github-blue.png");
  background-size: cover;
}

/* life */
.life {
  position: relative;
  display: block;
  padding-top: 80px;
  margin-bottom: 80px;
}

.life-wrap {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: repeat(2, 300px);
  gap: 20px;
  width: 100%;
}

.life-wrap div {
  border: 1px solid #011efe;
}

.life-1 {
  grid-row: 1/4;
  background: url("../images/star.jpg") no-repeat -80px center;
  background-size: cover;
}

.life-2 {
  grid-row: 1/2;
  grid-column: 2/3;
  background: url("../images/food.jpg") no-repeat 0px -50px;
  background-size: cover;
}

.life-3 {
  grid-row: 1/4;
  background: url("../images/cafe.jpg") no-repeat center;
  background-size: cover;
}

.life-4 {
  grid-column: 2/3;
  grid-row: 2/4;
  background: url("../images/walk.jpg") no-repeat center -225px;
  background-size: cover;
}

/* vision */

.vision {
  position: relative;
  display: block;
  margin-bottom: 50px;
  text-transform: uppercase;
  width: 100%;
}

.vision h4 {
  font-size: 16px;
  color: #5a81fa;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 25px;
  text-shadow: 5px 1px 5px rgb(0 0 0 / 10%);
}

.vision-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.year-1,
.year-5,
.year-10 {
  position: relative;
  display: block;
  width: 32%;
  border: 1px solid #011efe;
  float: left;
  padding: 20px 20px 30px 20px;
  font-size: 14px;
  font-weight: 300;
  color: #1f1f1f;
  line-height: 19px;
}

/* footer */

.footer {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  background-color: #5a81fa;
}

.footer p {
  color: #fff;
  text-align: center;
  line-height: 180px;
}
.footer-contact-icon {
  position: absolute;
  top: 70%;
  left: 43%;
  display: block;
}

.footer-contact-icon li {
  width: 30px;
  height: 30px;
  float: left;
  margin-right: 20px;
}

.footer-ka {
  background: url("../images/kakaotalk.png") no-repeat center;
  background-size: cover;
}
.footer-mail {
  background: url("../images/footer-gmail.png") no-repeat center;
  background-size: cover;
}
.footer-git {
  background: url("../images/gitblack.png") no-repeat center;
  background-size: cover;
}
.footer-pdf {
  background: url("../images/pdf.png") no-repeat center;
  background-size: cover;
}