@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/cabinet-grotesk');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Antic&display=swap');
@import url('https://fonts.cdnfonts.com/css/cheveuxdange');



/* reset */

*{margin: 0;padding: 0;box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

/* layout */
body {font-family: "Raleway", sans-serif;overflow-x: hidden;}
.ko {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}


/* Header */
header {width: 100%; position: fixed; z-index: 200;transition: opacity 0.1s ease;}
header.on {opacity: 0;pointer-events: none;}
.innerHeader {height: 110px;line-height: 110px;margin: 0 auto;display: flex;justify-content: space-between;width: 95%;}
.innerHeader .logo {display: block;}
.innerHeader .logo a img {width: 75%;}
.innerHeader .mainMenu {display: flex;justify-content: space-between}

.innerHeader .mainMenu .gnb {display: flex;}
.innerHeader .mainMenu .gnb li {margin: 0 20px;}
.innerHeader .mainMenu .gnb li a {display: block;width: 100%;height: 100%;font-size:18px;font-weight: bold;}
.innerHeader .contact a img{width: 75%;}

/* headerAni */
.innerHeader .mainMenu .gnb li a {position: relative;padding:5px 15px;transition: padding-left 0.3s ease;}
.innerHeader .mainMenu .gnb li a::before {content: '';background: #0c0c0c;border-radius: 50%;height: 15px;width: 15px;display:block;position: absolute;left: -20px;top: 52px;opacity: 0;transition: opacity 0.3s ease, left 0.3s ease;}
.innerHeader .mainMenu .gnb li a:hover::before {opacity: 1;left: 0;}
.innerHeader .mainMenu .gnb li a:hover {padding-left: 20px;}

.hamburger-menu { display: flex;width: 60px;height: 60px;border-radius: 8px;background: #FF8126;color: #fff;font-size: 0.71vw;font-weight: bold;justify-content: center;align-items: center;cursor: pointer;position: fixed;top: 30px;right: 66px;z-index: 300;}
.hamburger-menu span {font-size: 28px;color: #fff;}
.popup-nav {display: none;position: fixed;top: 80px;right: 35px;background: #fff;border: 1px solid #ccc;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);z-index: 299;width: 120px;text-align: center;}
.popup-nav ul {padding: 10px;}
.popup-nav ul li {margin: 10px 0;}
.popup-nav ul li a {text-decoration: none;color: #0c0c0c;font-size: 18px;display: block;}
.popup-nav ul li a:hover {color: #FF8126;}
/* topButton */
.topBtn {position: fixed;bottom: 50px;right: 30px;width: 50px;height: 50px;background-color: #1d1d1d;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;transition: opacity 0.3s;box-sizing: border-box;padding-bottom: 5px;z-index: 100;mix-blend-mode:exclusion;}

.arrow{width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 15px solid #fff;}

.topBtn.show {opacity: 1;}

/* visual */
.visual {width: 100vw;height: 115vh;overflow: hidden;}
.visual .inner {width: 90%;height: 100%;margin: 0 auto;text-align: center;position: relative;}
.visual .inner .shape {display: flex;justify-content: space-between;align-items: center;transform: translateY(25%);}
.visual .inner .shape #dot {content: '';background: linear-gradient(70deg, #FF8C21, #FF6121);;width: 32vw;height: 32vw;display: block;border-radius: 50%;}

.visual .inner .shape #side {display: block;background: linear-gradient(180deg, #FF8C21, #FF6121);width: 30vw;height: 30vw;border-radius:50px;}

/* .visual .inner .face {
  width: 330px;height: 450px;border-radius: 50%;position: absolute;z-index: 2;right: 14.2%;bottom: 165px;}
  .visual .inner .face .eye {width: 70px;height: 90px;background: #fff;;border-radius: 50%;border: 1px solid #1d1d1d;position: absolute;top: 80px;}
  .face .eye:nth-child(1) {left: 72px;}
  .face .eye:nth-child(2) {right:72px;}
  .visual .inner .face .eye span {content: '';border: 1px solid #0c0c0c;height: 20px;display:inline-block;position: absolute;top: -20px;}
  
  .visual .inner .face .eye span:nth-child(2) {transform: rotate(-20deg);left: 17px;top: -16px;height: 18px;}
  .visual .inner .face .eye span:nth-child(3) {transform: rotate(20deg);right: 17px;top: -16px;height: 18px;}
  
  .face .eye .pupil {width: 50px;height: 65px;background: #0c0c0c;border-radius: 50%;position: absolute;left: 50%;top: 50%;margin-top: -35px;margin-left: -25px;}
  
  .face .eye .pupil .glow {width: 15px;height: 15px;background: #fff;border-radius: 50%;position: absolute;}
  .face .eye .pupil .glow:first-child {left: 10px;}
  .face .nose {width: 33px;height: 18px;background: #0c0c0c ;border-radius: 50%;position: absolute;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);} */


.visual .mainTxt {position: absolute;left: 50%;bottom:200px;transform: translateX(-50%);font-size: 21vw;color: #0c0c0c;}

.visual .inner .shape #line {
  display: block;
  background: linear-gradient(120deg, #FF8C20, #FF6121);
  width: 12vw;
  height: 38vw;
  border-radius: 200px;
  animation-name: tilt;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-in-out; /* 부드러운 애니메이션 전환 */
  transform: rotate(0deg); /* 시작 시 0도 */
}

/* animation */
@keyframes tilt {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-30deg); }
}

/* goal */
.goal {width: 100vw;height: 80vh;position: relative;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.goal .inner {width: 50vw;height: 100vh;margin: 0 auto;display: flex;justify-content: center;align-items: center;position: relative;perspective: 1000px;}
.goal .inner ul {position: relative;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.goal .inner ul li {line-height: 1.4;text-align: center;transition: transform 1s, opacity 1s;opacity: 0.3;transform: scale(0.9);}
.goal .inner ul li:nth-child(3) {color: #FF8126;}
.goal .inner ul li:nth-child(3) h3:before {background: #FF8126;}
.goal .inner ul li h3 {font-size: 1.7vw;padding: 1.6vw 0;}
.goal .inner ul li h3:before {content: '';display: inline-block;background: #0c0c0c;height: 15px;width: 15px;border-radius: 50%;margin-right: 10px;vertical-align: middle;}
.goal .inner ul li p {margin-bottom: 5vh;font-weight: 500;line-height: 140%;}

/* goalAni */
.goal .inner ul li.focus {opacity: 1;transform: scale(1);z-index: 2;}
.goal .inner ul li:not(.focus) {opacity: 0.3;transform: scale(0.9);z-index: 1;}


/* aboutMe */
.aboutMe {width: 100vw;height: 100vh;}
.aboutMe .inner {width: 75vw;margin: 0 auto;position: relative;}
.aboutMe .inner .lamp {width:11vw;margin: 0 auto;justify-items: center;position: relative;}
.aboutMe .inner .lamp img {position: absolute;top: 4vh;left: 50%;transform: translateX(-50%);}

.aboutMe .inner .main {position: absolute;z-index: 9;width: 40%;margin: 0 auto;top:23vw;left: 50%;transform: translate(-50%,50%);}
.aboutMe .inner .main .img {width: 90%;}
.aboutMe .inner .main .img img{width: 100%;}

.aboutMe .inner .txt p {font-size: 13vw;position: absolute;color: #0c0c0c;font-weight: 500;opacity: 0.8; }
.aboutMe .inner .txt p:first-child {top: 80vh;z-index: 10;left: 3vw;}
.aboutMe .inner .txt p:last-child {top: 56vh;right: 15vw;}
.aboutMe .inner .keyword {position: absolute;width: 100%;margin: 0 auto;height: 80vh;}
.aboutMe .inner .keyword p{background: #FF8126;padding: 1.2vh 1.2vw;text-align: center;border-radius: 30px;position: absolute;color: #fff;font-weight: 500;}
.aboutMe .inner .keyword p:nth-child(1) {top: 52vh;left: 28vw;z-index: 11;}
.aboutMe .inner .keyword p:nth-child(2) {top: 70vh;left: 24vw;}
.aboutMe .inner .keyword p:nth-child(3) {top: 80vh;left: 27.5vw;z-index: 12;}
.aboutMe .inner .keyword p:nth-child(4) {top: 60vh;left: 40vw;}
.aboutMe .inner .keyword p:nth-child(5) {top: 80vh;left: 47vw;z-index: 14;}


/* keyword animation */
.keyword.motion p{opacity: 0;transform: translateY(100px);animation: slide 1s forwards;animation-fill-mode: forwards;}
.keyword p:nth-child(1) {animation-delay: 0.3s;}
.keyword p:nth-child(2) {animation-delay: 0.9s;}
.keyword p:nth-child(3) {animation-delay: 1.2s;}
.keyword p:nth-child(4) {animation-delay: 0.6s;}
.keyword p:nth-child(5) {animation-delay: 1.5s;}
@keyframes slide{
  0% {
      opacity: 0;
      transform: translateY(100px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* profile */
.profile {width: 100vw;height: 100vh;padding-top: 100px;}
.profile .inner {width: 85%;margin: 0 auto;display: flex;justify-content: center;padding-top: 250px;}
.profile .inner .list { display: flex;justify-content: space-between;width: 80%;}
  
.profile .inner .list .tit {width: 38%;display: flex;flex-direction: column;justify-content: space-between;line-height: 1.1;letter-spacing: -2px;}
.profile .inner .list .tit h2 {font-size: 105px;color: #0c0c0c;opacity: 0.8;}

.profile h2{font-size: 22px;font-weight: 600;padding-bottom: 10px;padding-top: 30px;display: block;color: #FF6800;}
.profile .inner .paragraph {display: flex;padding-bottom: 1vh;}
.profile li p {line-height: 160%;font-size: 16px;}
.profile li p span {padding-right: 1.5vw;font-weight: 600;font-size: .8vw;}


/* profile Animation */
.motion  .char { display: inline-block;
  animation: slide-up 0.5s cubic-bezier(.10, 0, .10, 1) both;
  animation-delay: calc(60ms * var(--char-index));
  }
  
  @keyframes slide-up {
  0% {transform: translateY(30px); opacity: 0;}
  80% {transform: translateY(30px); opacity: 0;}
  }

  .profile .inner.motion .list .left,  .profile .inner.motion .list .right  {animation-name: slide-next;animation-duration: 0.4s; animation-fill-mode: forwards;animation-timing-function: ease-out;}
  @keyframes slide-next {
    0% {transform: translateX(60px); opacity: 0;}
    80% {transform: translateX(60px); opacity: 0;}
    
  }
  .profile .inner.motion .list .tit p {animation-name: slid-next;animation-duration: 0.8s; animation-fill-mode: forwards;animation-timing-function: ease-out;}
  @keyframes slid-next {
    0% {transform: translateX(-60px); opacity: 0;}
    80% {transform: translateX(-60px); opacity: 0;}
    
  }

/* hobby */
.hobby{width: 100%;margin: 20vh 0;}
.hobby .inner{width: 90%;margin: 0 auto;height: 150vh;}
.hobby .inner .txt {font-size: 16vh;color: #FF6800;position: relative;}
.hobby .inner .txt h3 {font-weight: 500;position: absolute;}



.hobby .inner .txt h3:nth-child(1) {top: 33vh;left:25vw;}
.hobby .inner .txt h3:nth-child(2) {top: 75vh;right:15vw;font-size: 8vw;}
.hobby .inner .txt h3:nth-child(3) {top: 110vh;left:19vw;font-size: 10vw}

.hobby .inner .img {position: relative;}
.hobby .inner .img img {position: absolute;}
.hobby .inner .img img:nth-child(1) {left: 20vw;}
.hobby .inner .img img:nth-child(2) {left: 39vw;top: 13vh}
.hobby .inner .img img:nth-child(3) {top: 50vh;left: 40vw;}
.hobby .inner .img img:nth-child(4) {top: 65vh;left: 18vw;}
.hobby .inner .img img:nth-child(5) {top: 92vh;left: 35vw;}
.hobby .inner .img img:nth-child(6) {top: 98vh;left:49vw;}
.hobby .inner .img img:nth-child(7) {top: 115vh;right: 18vw;}
.hobby .inner .img img:nth-child(8) {top: 130vh;left: 25vw;}
.hobby .inner .img img:nth-child(9) {top: 126vh;left: 35vw;}



/* timeLine */
.timeLine {width: 100%;}
.timeLine .inner {width: 90%;margin: 0 auto;display: flex;justify-content: center;height: 300vh;position: relative;height: 100vh;}
.timeLine .inner .imgBox li {position: absolute; opacity: 1;margin-top: 25vh;left: 50%;transform: translateX(-50%);font-size: 16px;font-weight: 600;}
.timeLine .inner .imgBox li span {color: #0c0c0c;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 50%;background:#fff;border-radius: 50px;padding: 20px 0;opacity: 0.7;line-height: 1.4;}
.timeLine .inner .imgBox li span b {font-size: 20px;}
.timeLine .inner .imgBox {width: 100%; position: relative;}
.timeLine .inner .imgBox li{top: 0;}
.timeLine .inner h3{font-size: 16vw;font-weight: 500;color: #FF6800;position: absolute;left: 50%;transform: translateX(-50%);margin-top: 300px;}
.timeLine .inner .imgBox .img5 {margin-top: 100px;}
.timeLine .inner .imgBox .img5 span {width: 60%;}


  .timeLine .inner .imgBox img {filter: grayscale(100%);transition: filter 0.3s ease;}
  .timeLine .inner .imgBox img:hover {filter: none;}
  .timeLine .inner .imgBox img:hover ~ span {display: none;}
   



  /* skill_mini */
  .skill {overflow: hidden;}
  .skill .inner {display: flex;justify-content: center;align-items: center;padding-top: 200px;}
  .skill .inner ul li {display: flex; white-space: nowrap; overflow: hidden; font-size: 145px; letter-spacing: -2px;}
  .skill .inner ul li p {color: #ccc;font-size: 100px;letter-spacing: -2px;font-weight: 500;line-height: 1.2;display: inline-block;vertical-align: middle;}
  .skill .inner ul li img {vertical-align: middle;padding-bottom: 15px;}
  .skill .inner ul li:first-child {animation: marquee 30s linear infinite;left: 0;transform: translateX(-30%);width: 300vw;}
  .skill .inner ul li:last-child {animation: marquee 30s linear infinite;left: 0;transform: translateX(30%);width: 300vw;}

  @keyframes textLoop {
      0% {transform: translate3d(0, 0, 0);}
      100% {transform: translate3d(-100%, 0, 0); }
  }
  @keyframes textLoop2 {
    0% {
      transform: translateX(0);
    }}
  
  .skill .inner ul li:hover {animation-play-state: paused;}
  @keyframes marqueeLeft {
    0% {
      transform: translateX(0);
    }}


/* faq */
.faq {width: 100%;height: 120vh;display: flex;
  justify-content: center;}
.faq .inner {width: 70%;padding-top: 70px;}

.faq h1 {color: #FF6800;font-size: 2.55vw;font-weight: 500;padding-bottom: 20px;padding-top: 150px;}
.faq .inner .chartBox {background-color: #1d1d1d;color: #fff;border-radius: 20px;margin: 0 auto}


.chart {border-top: 1px solid #fff;padding: 10px 20px;}

.chart:first-child {border-top: none;}

.chartQuestion {width: 100%;background-color: #1d1d1d;color: #fff;border: none;text-align: left;padding: 24px;font-size: 1.08vw;cursor: pointer;outline: none;transition: background-color 0.3s ease;display: flex;justify-content: space-between;align-items: center;position: relative;}

.chartQuestion::after {content: '+';font-size: 2.04vw;position: absolute;right: 20px;}
.chartQuestion.active::after {content: '';width: 20px;height: 4px;background: #fff;}
/* .chartQuestion:hover {background-color: #444;} */
.chartAnswer {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;padding: 0 20px;background-color: #1d1d1d;line-height: 1.4;letter-spacing: 1;}
.chartQuestion.active {color: #ACACAC;}
.chartAnswer p {margin: 20px 0;}
.faq .inner .btn { display: flex;justify-content: end;
  gap: 20px;margin-top: 40px;}
  
.faq .inner .btn a {background: #acacac;color: #fff;font-size: 1vw;font-weight: 500;padding: 15px 30px;border: none;border-radius: 13px;cursor: pointer;transition: background-color 0.3s ease;}

.faq .inner .btn a:hover {background-color: #fff;color: #FF6800;}

/* footer */
footer {width: 100%;}
footer .inner {width: 100%;height: auto;position: relative;color: #fff;}
footer .inner .banner {width: 100%;height: 400px;background: #FF6800;border-radius: 50px;position: absolute;z-index: -1;display: flex;align-items: flex-start;overflow-x: hidden;}
footer .inner .banner span { position: absolute;content: '';width: 100px;height: 10px;z-index: 1; bottom: 500px;left: 10px;background: #fff;}
footer .inner .banner h2 {margin-top: 62px;width:200vw;font-weight: 500;font-size: 8.16vw;line-height: 200px;text-transform: uppercase;white-space: nowrap;padding: 0 20px 40px 0;border-top: 1px solid #fff;}

footer .inner .bottom {background: #0c0c0c;position: relative;width: 100%;height: 80vh;border-radius: 45px 45px 0 0;top: 258px;padding-bottom: 45px;padding-top: 100px;}
footer .inner .bottom .txt {width: 75%;display: flex;justify-content: space-between;margin: 0 auto;}
footer .inner .bottom .left {width: 65%;}
footer .inner .bottom .left span {font-size: 18px;font-weight: 500;color: #FF6800;}
footer .inner .bottom .left h3 {font-size: 75px;font-weight: 400;line-height: 1.2;}
footer .inner .bottom .left .contact {display: flex;justify-content:baseline;padding-top: 60px;font-size: 18px;}
footer .inner .bottom .left .contact li {border: 1px solid #fff;padding: 20px 25px;border-radius: 30px;align-items: center;display: flex;margin-right: 20px;position: relative;  overflow: hidden;z-index: 1;transition: color 0.3s;}

footer .inner .bottom .left ul li:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: top 0.5s ease;
  z-index: -1;
}

footer .inner .bottom .txt ul li:hover::before {top: 0;}

footer .inner .bottom .left ul li:hover {color: #000;}

footer .inner .bottom .right {width: 35%;margin-top: 15vh;}
footer .inner .bottom .right li {margin-bottom: 80px;display: inline-block;}
footer .inner .bottom .right li:first-child {font-size: 45px;}
footer .inner .bottom .right li:nth-child(1),footer .inner .bottom .right li:nth-child(2) {font-size: 38px;color: #FF6800;border-bottom: 1px solid #fff;padding-bottom: 10px;}
footer .inner .bottom .right li:last-child {background: #fff;color: #0C0C0C;padding: 20px 25px;border-radius: 30px;overflow: hidden;z-index: 1;transition: color 0.3s;position: relative;}
footer .inner .bottom .right li:last-child::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FF6800;
  transition: top 0.5s ease;
  z-index: -1; /* 가상 요소가 뒤에 오도록 설정 */
}

footer .inner .bottom .right li:last-child:hover::before {
  top: 0; /* 호버 시 주황색 배경이 위로 올라오도록 설정 */
}

footer .inner .bottom .right li:last-child:hover {
  color: #fff; /* 호버 시 텍스트 색상 변경 */
}

footer .inner .bottom .right li img {padding-right: 20px;}


footer .inner .bottom .nav {width: 30%;position: absolute;bottom: 40px;left: 55%;transform: translateX(-50%);}
footer .inner .bottom .nav span {padding-right: 50px;padding-top: 150px;text-decoration: underline;}




/* footerAnimation */

footer .inner .banner h2{animation: marquee 15s linear infinite;left: 0;transform: translateX(-50%);width: 300vw;}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }}

  footer .inner .bottom.motion .left h3:nth-child(2) {animation-name:slid-up; animation-duration: 0.4s; }
  footer .inner .bottom.motion .left h3:nth-child(3) {animation-name:slid-up; animation-duration: 0.7s; }
  footer .inner .bottom.motion .left h3:nth-child(4) {animation-name:slid-up; animation-duration: 1s; }
  footer .inner .bottom.motion .left h3:nth-child(5) {animation-name:slid-up; animation-duration: 1.3s; }

  @keyframes slid-up {
    0%{opacity: 0;}
   40%{opacity: 0; transform: translateY(40px);}
  }

/* responsiveWeb */
/* pc모드=> 1720px ~ 1401px */
@media screen and (max-width:1720px){
  .aboutMe .inner .lamp img {width: 57vw;}
  .aboutMe .inner .main {top:27.5vw;}
  .profile h2{font-size: 18px;}
  .profile li p {line-height: 150%;font-size: 14px;}
  .profile .inner .list .tit h2 {font-size: 80px;}
  .hobby .img img:nth-child(1) {width: 21vw;}
  .hobby .img img:nth-child(2) {width: 12vw;}
  .hobby .img img:nth-child(3) {width: 16vw;}
  .hobby .img img:nth-child(4) {width: 20vw;}
  .hobby .img img:nth-child(5) {width: 13vw;}
  .hobby .img img:nth-child(6) {width: 12vw;}
  .hobby .img img:nth-child(7) {width: 20vw;}
  .hobby .img img:nth-child(8) {width: 11vw;}
  .hobby .img img:nth-child(9) {width: 18vw;}

    footer .inner .bottom .txt ul li {padding: 24px;}
    footer .inner .bottom .txt ul {left: 49%;;padding-top: 30px;}
    footer .inner .bottom .txt .contact li {font-size: 13px;}
    footer .inner .bottom .txt h3 {font-size: 60px;}
    footer .inner .bottom .nav {width: 40%;bottom: 30px;}
    footer .inner .bottom .right {margin-top: 3vh;}
    footer .inner .bottom .left .contact {padding-top: 70px;}
    footer .inner .bottom .right li:nth-child(2) {font-size: 28px;}
    footer .inner .bottom .right li img {display: none;}
  }

/* pc모드=> 1401px ~ 1024px */
@media screen and (max-width:1401px){
  .innerHeader .mainMenu .gnb li a {font-size:16px;}

}