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

/* 변수 지정 */
:root {
  --first-color: #09090A;
  --second-color: #8A5DEF;
  --bg1-color:#262626;
  --bg2-color:#F1F1F1; 

  --body-font:  "Poppins", sans-serif;
  --title-font:"Questrial", sans-serif; 
  --kr-font: "Noto Sans KR", sans-serif;
  --h2-font-size: 4rem;
  --normal-font-size: 1rem;
}

/* 스크롤 부드럽게 */
html {scroll-behavior: smooth;}

/* 공통 스타일 */
*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body { 
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}
ul {list-style: none;}
a {text-decoration: none; color: inherit;}
img {width: 100%; height: 100%; object-fit: cover;  display: block;}

/* 요소 공통 스타일 */
section {padding-top: 10rem; padding-bottom: 5rem; width: 100%;}
.container {width: 90%; max-width: 1440px; margin: auto;}
.flex-container{display: flex; gap: 2rem; margin: auto;}
.line{width:100%; height: 4px; background:var(--bg1-color); opacity: 0.8; margin: 1rem 0;}
.title-line{width:100%; height: 2px; background:var(--bg2-color); opacity: 0.2; margin: 1rem 0;}

/* title 공통 스타일*/
.section-title {position: relative; font-size: var(--h2-font-size);  color: var(--first-color);  margin-top: var(--mb2); font-weight: 500;
  margin-bottom: var(--mb4); font-family:var(--title-font); }

/* header nav style */
.l-header {height: 4rem; position: fixed; top: 2rem; left: 50%; transform: translateX(-50%); z-index:999; color: #ffffff;  background-color:var(--first-color); border-radius: 50px; font-size: 0.8rem;}
.nav-list {width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; font-size: 1.1rem;}
.nav-name{font-weight: 500; font-size: 1rem; margin: 0 5rem;}
.nav-name .moblie{display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; background:var(--second-color); border-radius: 50%; font-weight: 600; margin-right: 0.5rem;}
.nav-link.active{color: var(--second-color); font-weight: 600;}
.nav-item i{display: none;}

/* home style */
.home {height: 100vh; overflow: hidden; padding-top: 8rem;}
.hello{width: 80px; text-align: center; padding: 0.5rem 0; border: 1px solid; border-radius: 50px; margin:2rem auto 0;}
.home-title {font-size: 80px; font-weight: 600;  color: var(--first-color); text-align: center; line-height: 1.2;}
.home-title span{color: var(--second-color);}
.home-title .wt{ color:#fff;}
.home-data{width: 100%; height: 60vh; position: relative; }
.home-data>div{position: absolute; }
.home-data .resume-text{width: 25%; left: 0; top: 10%; 
  z-index:9;
  /* font-size: 1.6rem; */
}
.home-data .resume-text ul { margin-bottom: 1.5rem;}
.home-data .resume-text li { font-size: 1em;}
.home-data .resume-text li.title { font-size: 1.2em; font-weight: 600; margin-bottom: 0.5rem;}
.home-data .resume-text li span { font-size: 0.8em; color: #929292;}
.home-data .mark-img{width: 30px; height: 30px; margin-bottom: 1rem;}
.home-data .mark-img img{object-fit: contain;}
.home-data .home-img{width: 50%; height: 100%; left: 50%; transform: translateX(-50%); overflow: hidden;}
.home-img .circle-box{position:absolute; width:100%; aspect-ratio: 1 / 1; background: var(--second-color); border-radius: 50%; top: 40%; left: 50%; transform: translateX(-50%);}
.home-img .profile-img{width: 70%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 2;}
.home-img .profile-img img{object-fit: contain;}
.home-data .pride{right: 0; top: 20%;}
.home-data .pride .star{color: var(--second-color); font-size: 2rem; text-align: right;}
.home-data .pride .years{font-size: 3.5rem; font-weight: 600; letter-spacing: -2px; opacity: 0.8;}
.home-data .pride .years span{font-size: 3rem;}
.home-data .pride .experts{font-size: 2em; font-weight: 600; text-align: right; opacity: 0.7;}
.home-data .button {width: 340px; height: 70px; position: absolute; left: 50%; transform: translateX(-50%); bottom:15%; background:#fff; font-weight:500; border-radius: 50px; display: flex; justify-content: space-evenly; align-items: center;
 }
.home-data .button a{display: block; width: 150px; height: 50px; border: 2px solid; border-radius: 30px; display: flex; justify-content: space-evenly; align-items: center; transition: 0.5s;}
.home-data .button a i{display: none;}
.home-data .button a.active{border: none; background: var(--second-color); color: #fff; font-weight: 600;}
.home-data .button a.active i{display: inline;}

/*portfolio style*/
.portfolio{background: var(--bg1-color); row-gap: 2rem; text-align: center; color: #fff; border-radius: 50px; padding-bottom: 0;}
.portfolio-title{display: flex; justify-content: space-between; position: relative;}
.portfolio-text{font-size: 0.9rem; opacity: 0.8; text-align: right;}
.portfolio .section-title{color: #fff; text-align: left; }
.portfolio .section-title span{color: var(--second-color);}

.portfolio .portfolio-contents{display: flex; justify-content: space-evenly; flex-wrap: wrap; margin-top: 3rem;}
.portfolio .content{width: 22%;}
.portfolio .link-img{display: block; width: 100%; aspect-ratio: 1 / 1.1; border-radius: 30px; overflow: hidden; position: relative; background: var(--bg1-color);}
.portfolio .link-img>img { transition: 1s;}
.portfolio .link-img>img:hover { scale: 1.2;}
.portfolio .link-btn{ position: absolute; bottom:-10px; right: -10px; width: 60px; height: 60px; background-color: var(--first-color); color: white; border: 15px solid var(--bg1-color); box-sizing: content-box; border-radius: 50%; 
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 20px; rotate: -45deg;}
 .portfolio .link-btn.active{background: var(--second-color);}
.content-description{text-align: left; margin: 10px 0 100px;}
.content-type{width: 100px; height: 26px; background: #ccc; border-radius: 15px; margin: 10px 0; font-size: 0.7rem; font-weight: 500; display: flex; justify-content: center; align-items: center; color: #666;}
.portfolio .title{font-size: 0.9rem; color: #ccc; margin-bottom: 5px;}
.portfolio .title span{font-size: 1rem; font-weight: 600; color: #fff;}
.portfolio .detail{font-size: 0.8rem; position: relative; padding-left: 10px;}
.portfolio .detail::before{content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--second-color); top: 45%; left: -10px; margin: 0 10px;}

/*hire-me*/
.hire-me .container{display: flex; justify-content: space-between; }
.hire-me .left-img{width: 50%;}
.hire-me .left-img .img-box{width: 80%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--second-color);}
.hire-me .right-text{width: 50%; font-size: 0.9rem; color: #262626;}
.hire-me .right-text span{color: var(--second-color);}
.hire-me .section-title{margin-bottom: 2rem;}
.hire-me .title { font-size: 1.2rem; margin-bottom:1rem;
}
.hire-me .hire-me-text{font-size: 1.5rem; color: var(--bg1-color);}
.hire-me .right-text li { margin-bottom: 1rem;}
.hire-me .right-text .name { font-size: 1rem; font-weight: 600; color: #09090A;}
.hire-me .right-text .date { margin-left:10px; font-size: 0.8rem; color: #929292; }
.skills{width: 100%; height: 8rem; background: var(--second-color); margin-top: 2rem; border-radius: 30px; display: flex; justify-content: center; align-items: center;}
.skill-box{width: 100%; height: 50%; overflow: hidden; background:#fff; display: flex; align-items: center;}
.skill-box .box{width: max-content; display: flex; gap: 6rem;  background: #fff; animation: skill-animation 80s infinite linear;}
.skill-box .box .item{display: flex; gap:1rem; align-items: center;}
.skill-box .box .item .icon{width: 30px; height: 30px;}
.skill-box .box .item p{font-size: 20px; font-weight: 500;}
.skill-box .box .item .icon img{object-fit: contain;}
@keyframes skill-animation{
  0% {transform: translateX(0%);}
  100%{transform: translateX(-50%);}
}


/*footer contact*/
.contact{padding: 10rem 0 5rem; background: var(--first-color); color: #fff; border-radius: 50px 50px 0 0;}
.contact .section-title{color: #fff;}
.contact .contents{display: flex; justify-content: space-between;}
.profile-sns{width: 40%;}
.profile-sns .nav-name{text-align: left; margin: 0; font-size: 30px;} 
.profile-sns .nav-name span{width: 50px; height: 50px; line-height: 50px;}
.profile-sns .about{padding: 2rem 5rem 2rem 0; font-weight:300;font-size: 14px; }
.profile-sns .sns{font-size: 1.5rem;}
.contact .title{font-size: 1.2rem; color: var(--second-color); font-weight: 500; margin-bottom: 1rem;}
.copyright, .img-source{opacity: 0.5;}




/*MEDIA QUERIES*/
@media screen and (max-width: 1200px) {
  :root {
    --h2-font-size: 3rem;
    --normal-font-size: 0.938rem;  
  }
}
@media screen and (max-width: 1024px) {
  .home{height: auto;}
  .home-data{height: auto; position: static; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 2rem;} 
  .home-data>div{position: static;}
  .home-data .resume-text{width: 80%; text-align: center;}
  .home-data .home-img{width: 80%; height: 300px; transform: translateX(0); margin:2rem 0;} 
  .home-img .circle-box{position: static; transform: translateX(0);}
  .home-data .button{display: none;}
  .home-data .pride{width: 90%; display: flex; justify-content: space-between; align-items: center;} 
  .home-data .pride .star{display: flex;}
  .line{display: none;}
}

@media screen and (max-width: 768px) {
  :root { 
    --h2-font-size: 2rem;
    --normal-font-size: 0.938rem;  
  }
  .nav-list{justify-content: center; gap: 2rem;}
  .nav-name{margin: 0 2rem;}
  .nav-item span{display: none;}
.nav-item i{display:inline; font-size: 1.5rem;}

.home-title{font-size: 60px;}
.home-data .pride .years {font-size: 2rem; font-weight: 600;}
.home-data .pride .star {font-size: 1.6rem;}
.home-data .pride .experts {font-size: 1.8rem;}
.portfolio .content{width: 40%; text-align: center;}

.hire-me .container {flex-direction: column; align-items: center; gap: 2rem;}
.hire-me .left-img {width: 80%;}
.hire-me .left-img .img-box {width: 100%;}
.hire-me .right-text {width: 80%;}
.hire-me .right-text li.title { font-size: 1.2em; font-weight: 600; margin-bottom: 0.8rem; }
.hire-me .right-text li.title2 { margin-bottom: 0.5rem;}
.hire-me .right-text li { font-size: 1em; }
.ire-me .right-text li span { font-size: 0.6em; color: #929292;}
.contact .title {text-align: center;}
.contact .section-title {text-align: center;}
.contact .contents {flex-direction: column; align-items: center; gap: 2rem;}
.profile-sns {width: 80%; text-align: center;}
.profile-sns .nav-name {text-align: center;}
.profile-sns .about {padding: 2rem 0;}
.copyright, .img-source {text-align: center;}
}

@media screen and (max-width: 560px) {
  .nav-name .pc{display: none;}
  .home-data .pride .years {font-size: 1.2rem;}
  .home-data .pride .star {font-size: 1.2rem;}
.home-data .pride .experts {font-size: 1.2rem;}
}