@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');


/* 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}
.wrap {overflow: hidden;}
.wrap.on {overflow: hidden}


/* 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;}
.tag {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;color: #FF6800;font-weight: 600;text-transform: uppercase;}



/* mainImg */

.mainImg {position: absolute; left: 50%; top:20%;transform: translateX(-25%);z-index: 2;}
.mainImg .img {width:43%;}
.mainImg .img img {width: 100%;position: relative}


/* Header */
header {width: 100vw; position: fixed; z-index: 200;transition: opacity 0.1s ease;}
header.on {opacity: 0;pointer-events: none;}
.innerHeader {height: 11vh;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;color: #1d1d1d;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: #1d1d1d;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: 14px;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: #1d1d1d;font-size: 18px;display: block;}
.popup-nav ul li a:hover {color: #FF8126;}


/* visual */
.visual {width: 100vw; height: 90vh; padding-top: 290px;}
.visual .box {width: 80%; margin: 0 auto;position: relative;text-align: center;height: 50vh; }
.mainTxt {position: relative;font-family: 'Cabinet Grotesk', sans-serif;font-size: 13vw;font-weight: 700;height: 250px;overflow: hidden;}
.mainTxt ul{position: absolute; width: 100%;text-align: center;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #0C0C0C;display: grid;}
.mainTxt ul li {letter-spacing: 1;grid-column-start: 1;grid-row-start:1 ;opacity: 0;}


.visual .scroll {font-size: 0.61vw;position: absolute;bottom: 20vh; right: 20%;font-weight: 600;z-index: -100;}
.visual .scroll p:nth-child(1) {text-decoration : underline;display: inline;padding-right: 10px;letter-spacing: -1px;}
.visual .scroll span {font-weight: bolder;}

/* bkBg */
.bg {background: #0C0C0C;border-radius: 90px 90px  900px 900px;}

/* 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: 300;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;}


/* about */
.about {padding-top: 6vh;}
.about .ab {position: absolute;left: -7vw;top:12vh;width: 100%;}
.about .inner {width: 65%;height: 100vh;margin: 0 auto;color: #fff;position: relative;}
.about .inner .top {display: flex; justify-content: space-between; width: 100%;}
.about .inner .svgLine {width: 100%;position: absolute;top:10%;left:0;}
.about .inner .svgLine #svg01 {width: 30%;position: absolute;top: 340px;left: 240px;}
.about .inner .svgLine #svg02  {width: 42%;position: absolute;top: 250px;left: -25px;}
.about .inner .svgLine #svg03 {top: 130px;left: 325px;width: 30%;position: absolute;}

/* textAni */
.about .inner .top .tit.motion p:nth-child(1){animation-name:slid-up; animation-duration: 0.3s; }
.about .inner .top .tit.motion p:nth-child(2){animation-name:slid-up; animation-duration: 0.5s; }
.about .inner .top .tit.motion p:nth-child(3){animation-name:slid-up; animation-duration: 0.7s; }
.about .inner .top .tit.motion p:nth-child(4){animation-name:slid-up; animation-duration: 0.9s; }
.about .inner .top .tit.motion p:nth-child(5){animation-name:slid-up; animation-duration: 1.1s; }

.about .inner .bottom .skills.motion li p:nth-child(2) {animation-name:slid-up; animation-duration: 1.1s; }
.about .inner .bottom .skills.motion li p:nth-child(3) {animation-name:slid-up; animation-duration: 1.2s; }
.about .inner .bottom .skills.motion li p:nth-child(4) {animation-name:slid-up; animation-duration: 1.3s; }
.about .inner .bottom .skills.motion li p:nth-child(5) {animation-name:slid-up; animation-duration: 1.4s; }
.about .inner .bottom .skills.motion li p:nth-child(6) {animation-name:slid-up; animation-duration: 1.5s; }
.about .inner .bottom .skills.motion li p:nth-child(7) {animation-name:slid-up; animation-duration: 1.6s; }

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



/* svgLine animation */
.about .inner .svgLine.motion .svg01 {stroke-dasharray: 293 ;stroke-dashoffset: 290;animation: ani1 .8s linear 0s forwards; }
.about .inner .svgLine.motion .svg02 {stroke-dasharray: 486 ;stroke-dashoffset: 480;animation: ani2 .8s linear 0s forwards;}
.about .inner  .svgLine.motion .svg03 {stroke-dasharray: 615 ;stroke-dashoffset: 600;animation: ani3 .8s linear 0s forwards;}
@keyframes ani1 {
    0%{stroke-dashoffset: 293;}
    100%{stroke-dashoffset: 0;}
}
@keyframes ani2 {
  0%{stroke-dashoffset: 486;}
  100%{stroke-dashoffset: 0;}
}
@keyframes ani3 {
  0%{stroke-dashoffset: 615;}
  100%{stroke-dashoffset: 0;}
}
.about .inner .top .tit {font-size: 3.47vw; width: 80%;line-height: 1.2;font-weight: 400;padding-top: 9vh;} 
.about .inner .top .img{width: 50%; opacity: 0;}
.about .inner .top .img img {width: 100%;}
.about .inner .bottom {width: 50%;padding-top: 10vh;}
.about .inner .bottom .skills {display: flex;justify-content: space-between;} 
.about .inner .bottom .skills li p {font-size: 15px;line-height: 30px;}
.about .inner .bottom .skills li p:first-child {border-bottom: 1px solid #fff;margin: 20px 0;font-size: 1.04vw;}






/* video */
.video {width: 100vw;height: 100vh;position: relative;}
.video .videoWrap video{width: 100vw;height: 100vh;object-fit:cover;position: absolute;left: 50%;top:50%;z-index: 3;margin: 0;transform: translate(-50%,-50%);}
.video .videoTxt {font-size: 11.73vw;z-index: 1;color: #fff;font-weight: 500;}
.video .videoTxt span:nth-child(1) p {position: absolute;bottom: 25%;left: 380px;transform: rotate(-20deg);z-index: 5;}
.video .videoTxt span:nth-child(2) p {position: absolute;top: 240px;left: 900px;z-index: 6;}
.video .videoTxt span:nth-child(3) p {position: absolute;bottom: 10%;left:1100px;transform: rotate(10deg);z-index: 7;}
.video .path {position: relative;width: 100%;}
.video .path svg{width: 100%}

/* keyword */
.bg {width: 100vw;}
.bg .keyword {border-radius: 0 0  900px 900px;position: relative;height: 100vh;width: 100%;}
.bg .keyword .inner {width: 90%;margin: 0 auto;}
.bg .keyword .inner .keywordTit {color: #fff;padding-top: 10vh;display: inline-block;}
.bg  .keyword  .inner .keywordTit h2{font-size: 4vw;}
.bg  .keyword .inner .keywordTit p{font-size: 0.9vw;}
.bg  .keyword  .inner .keywordTxt {z-index: 2;color: #fff;}
.bg  .keyword svg {position: absolute;bottom: 0vh;}
.bg .keyword .keywordTxt p {text-align: center;border: 1px solid #fff;border-radius: 50%;width: 14vw;height: 14vw;display: flex;justify-content: center;position: absolute;flex-direction: column;font-size: 0.7vw;background: #0C0C0C;transform-origin: center;}
.keywordTxt p#one {bottom: 10vw;left: 18vw;transform: rotate(-15deg);}
.keywordTxt p#two {bottom: 3.8vw;left: 33vw;}
.keywordTxt p#three {bottom: 18vw;left: 33vw;transform: rotate(30deg);}
.keywordTxt p#four {bottom:3vw;left: 47vw;transform: rotate(50deg);}
.keywordTxt p#five {bottom: 18vw;left: 57vw;transform: rotate(-30deg);}
.keywordTxt p#six {bottom: 12vw;left: 70vw;}


.bg  .keyword  .keywordTxt p span {font-size: 1.5vw;display: block;font-weight: 500;}
.bg   .keyword  .deco span {background: #FF6800;border-radius: 50%;position: absolute;}
.bg   .keyword  .deco span:nth-child(1) {width: 4vw;height: 4vw;bottom: 22vw;left: 28.8vw;}
.bg  .keyword  .deco span:nth-child(2) {width: 7.65vw;height: 7.65vw;bottom: 24vw;left: 21vw;}
.bg  .keyword  .deco span:nth-child(3) {width: 10.20vw;height: 10.20vw;bottom: 17vw;left: 47vw;}
.bg   .keyword  .deco span:nth-child(4) {width: 5.10vw;height: 5.10vw;bottom: 6.4vw;left: 28vw;}
.bg   .keyword  .deco span:nth-child(5) {width: 6.12vw;height: 6.12vw;bottom: 7.5vw;left: 68vw;}
.bg   .keyword  .deco span:nth-child(6) {width: 5.10vw;height: 5.10vw;bottom: 4.4vw;left: 61vw;}


/* skill */
  .skill {width: 100vw;}
  .skill .inner {width: 85%;margin: 0 auto;padding-top: 30vh;}
  .skill .inner .txt h2 {font-size: 2.9vw;font-weight: 600;letter-spacing: -2%;padding-bottom: 2vh;}
  .skill .inner .txt .ko {line-height: 1.4;font-size: 0.92vw;color:#9d9d9d;}
  .skill .skillCard {display: flex;justify-content: space-between;;flex-wrap: wrap;width: 62%;margin: 0 auto;padding-top: 10vh;box-sizing: border-box;}
  .skill .skillCard li {border: 1.5px solid #9d9d9d;padding: 1.53vw;border-radius: 20px;margin-top: 25px;transition: all 0.2s;position: relative;}
  .skill .inner .skillCard li img {padding: 2.3vw 3vw;}
  .skill .inner .skillCard li p {font-weight: normal;color:#9d9d9d;}
  .skill .inner .skillCard li p:first-child{font-weight: bold;}
  .skill .inner .skillCard li b{position: absolute;font-weight: normal;color:#ccc;bottom: -30px;left: 50%;transform: translateX(-50%);}


  
  /* hover effect */
  .skill .skillCard li:hover, .skill .skillCard li:focus {background: #FF6800;transition: all 0.3s;}
  
  .skill .skillCard li:hover p, .skill .skillCard li:focus p {opacity: 0;}
  
  .skill .skillCard li:nth-child(1):after {content: 'Intermediate';}
  .skill .skillCard li:nth-child(2):after {content: 'Advanced';}
  .skill .skillCard li:nth-child(3):after {content: 'Intermediate';}
  .skill .skillCard li:nth-child(4):after {content: 'Intermediate';}
  .skill .skillCard li:nth-child(5):after {content: 'Intermediate';}
  .skill .skillCard li:nth-child(6):after {content: 'Beginner';}
  .skill .skillCard li:nth-child(7):after {content: 'Intermediate';}
  .skill .skillCard li:nth-child(8):after {content: 'Beginner';}
  .skill .skillCard li:nth-child(9):after {content: 'Intermediate';}
  
  .skill .skillCard li::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size:2vw;
    opacity: 0;
    transition: opacity 0.6s;
  }
  
  .skill .skillCard li:hover::after, .skill .skillCard li:focus::after {opacity: 1;}

.skill .inner.motion .txt h2 {
    animation-name: slid-up;
    animation-duration: 0.6s;
}

.skill .inner.motion .txt p {
    animation-name: slid-up;
    animation-duration: 0.8s;
}
/* 기본적으로 5번째 항목을 호버된 상태로 보이게 하는 스타일 */
.skill .skillCard li.default-hover {
  background: #FF6800;
}

.skill .skillCard li.default-hover p {
  opacity: 0;
}

.skill .skillCard li.default-hover::after {
  content: 'Intermediate';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 2.30vw;
  opacity: 1;
  transition: opacity 0.6s;
}

/* 다른 항목이 호버되었을 때 기본 호버 스타일을 숨기기 */
.skill .skillCard li:hover ~ li.default-hover::after,
.skill .skillCard li:focus ~ li.default-hover::after {
  opacity: 0; /* 호버 또는 포커스 시 after 콘텐츠 숨김 */
}

  
/* work */
.work {width: 100%;padding-top: 350px;padding-bottom: 250px;}
.work .inner {width: 85%;height: auto;margin: 0 auto;position: relative;}
.work .inner .tit h1 {font-size: 150px;font-weight: 600;text-align: center;padding-bottom: 280px;}
.work .inner .tit h2 {font-family: 'Cabinet Grotesk', sans-serif; font-size:2.9vw ;font-weight:600;letter-spacing: -2%;padding: 30px 0;}
.work .inner .tit h2 span {font-size: 1.53vw;font-weight: normal;}
.work .inner .tit p {font-size: 0.92vw;padding-bottom: 70px;line-height: 1.4;color: #9d9d9d;}

.work .inner .workBox{display: flex;width: 100%;padding-top: 40px;justify-content: space-between;margin: 0 auto;}
.work .inner .workBox li {background: #EEEDEB;width: 18vw;height: 50vh;border-radius: 20px;padding: 35px;box-sizing: border-box;transition: width 0.5s; cursor: pointer;position: relative;overflow: hidden;}
.work .inner .workBox li h3{font-size: 1.4vw;letter-spacing: 1;font-weight: 500;line-height: 1.4;}
.work .inner .workBox li h4 {font-weight: 400;color: #2d2d2d;}
.work .inner .workBox li p{font-size: 0.8vw;opacity: 0; transition: opacity 0.3s;font-weight: 500;}
.work .inner .workBox span {display: block;font-size: 1.53vw; color: #fff;background: #FF6800;border-radius: 50%; width: 2.55vw; height: 2.55vw;text-align: center;line-height: 1.6;transform: rotate(-40deg);float: right; position: absolute;top: 3.3vh;right: 2vw;font-weight: 600;}

.work .inner .workBox li .img01{ transition: opacity 0.3s;position: absolute;bottom: 1vh;right: 5%;transform: translateX(50%);}
.work .inner .workBox li .img02{ transition: opacity 0.3s;position: absolute;bottom: 1vh;right:20%;transform: translateX(50%);}
.work .inner .workBox li .img03{ transition: opacity 0.3s;position: absolute;bottom: 1vh;right: 5%;transform: translateX(50%);}
.work .inner .workBox li .img04{ transition: opacity 0.3s;position: absolute;bottom: 1vh;right:-15%;transform: translateX(50%);}

 /* on */
 .work .inner .workBox li.on h4 {display: none;}
 .work .inner .workBox li.on {width: 31%; background: #FF6800; transition: width 0.5s;}
 .work .inner .workBox li.on .img01{opacity: 1;transition: opacity 0.3s;position: absolute;bottom: 1vh;right: 50%;transform: translateX(50%);}
 .work .inner .workBox li.on  .img02{ transition: opacity 0.3s;position: absolute;bottom: 1vh;right:50%;transform: translateX(50%);}
 .work .inner .workBox li.on .img03{opacity: 1;transition: opacity 0.3s;position: absolute;bottom: 1vh;right: 50%;transform: translateX(50%);}

 .work .inner .workBox li.on .img04{opacity: 1;transition: opacity 0.3s;position: absolute;bottom: 1vh;right: 30%;transform: translateX(50%);}
 .work .inner .workBox li.on span {background:#fff;color: #1D1D1D;border: 1px solid #FF6800;}
 .work .inner .workBox li.on h3 {opacity: 1;transition: opacity 0.3s;}
 .work .inner .workBox li.on p {opacity: 1; transition: opacity 0.3s;}

/* animation */
.work .inner.motion .tit h2 {animation-name:slid-up; animation-duration: 0.6s;}
.work .inner.motion .tit p {animation-name:slid-up; animation-duration: 0.8s;}


/* clone */
.clone {width: 100%;padding-top: 50px;}
.clone .inner {width: 85%;margin: 0 auto;}
.clone .inner .tit {width: 100%;height: 100vh;font-size: 170px;text-align: center;line-height: 0.9;padding-top: 30vh;box-sizing: border-box;}
.clone .inner .tit h3 {font-weight: 500;}
.clone .inner .tit a {padding-bottom: 100px;}
.clone .inner .tit h3 span {font-size: 50px;font-weight: 500;color: #FF6800;}
.clone .inner .workList {display: block;margin: 0 auto;}
.clone .inner .workList li {padding: 13vh 0;width: 100%;}

.clone .inner .workList li .img span {font-size: 16px;}
.clone .inner .workList li p:last-child {font-size: 35px;}
.clone .inner .workList li:nth-child(1),.clone .inner .workList li:nth-child(4) {display: flex;flex-direction: column;align-items: center;}
.clone .inner .workList li:nth-child(2) { display: flex;flex-direction: column;align-items:end;}
.clone .inner .workList li .tool {border: 1px solid #0C0C0C;padding: 3px 15px;border-radius: 30px;}

.clone .inner .workList li .img {width: 760px;}
.clone .inner .workList li .img img {width: 100%;padding-bottom: 10px;}
.clone .inner .bottom {text-align: center;padding: 15vh 0;position: relative;height: auto;width: 100%;}
.clone .inner .bottom h2 {
  font-size: 110px;
  font-weight: 600;
  line-height: 1.4;
}
.clone .inner .bottom h2 span {
  letter-spacing: 3px;
}
.clone .inner .bottom a {
  border: 1px solid #0c0c0c;
  padding: 10px 20px;
  border-radius: 20px;
  margin: 80px 0;
  display: inline-block;transition: all 0.3s ease-in-out;
}
.clone .inner .bottom a:hover {background: #0c0c0c;color: #fff;}



.clone .inner .face {
  width: 180px;
  height: 115px; 
  border-radius: 600px 600px 0 0;
  position: absolute;
  z-index: 2;
  left: 35.5%;
  bottom: 570px;
  border: 2.5px solid #0c0c0c;border-bottom: none;
}

  .clone .inner .face .eye {width: 50px;height: 60px;background: #fff;;border-radius: 50%;border: 1px solid #1d1d1d;position: absolute;top: 40px;}
  .face .eye:nth-child(1) {left: 108px;}
  .face .eye:nth-child(2) {right:108px;}
  .clone .inner .face .eye span {content: '';border: 1px solid #0c0c0c;height: 15px;display:inline-block;position: absolute;top: -15px;}
  
  .clone .inner .face .eye span:nth-child(2) {transform: rotate(-20deg);left: 11px;top: -11px;height: 13px;}
  .clone .inner .face .eye span:nth-child(3) {transform: rotate(20deg);right: 11px;top: -11px;height: 13px;}
  
  .face .eye .pupil {width: 34px;height: 45px;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: 25px;height: 14px;background: #0c0c0c ;border-radius: 50%;position: absolute;position: absolute;left: 50%;top: 88%;transform: translate(-50%,-50%);}

  .clone .inner .bottom.motion h2 {animation-name: slid-up;animation-duration: 0.5s;}
  .clone .inner .bottom.motion .face{animation-name: slid-up;animation-duration: 1.2s;}

.clone .inner .bottom.motion  .char { display: inline-block;
  animation: slide-up 1s 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;}
  }

/* portfolio */
.portfolio {width: 100%;}
.portfolio .inner {width: 86%;margin: 0 auto;justify-content: center;align-items: center;display: flex;height: 100vh;position: relative;}
.portfolio .inner .slide{width: 100%;}
.portfolio .inner .slide  .slick-slide {display: flex; justify-content: space-between; width: 100%; height: 100%;}
.portfolio .inner .slide .slick-slide .txt {width: 30%;display: flex;justify-content: space-between ;flex-direction: column;} 
.portfolio .inner .slide .slick-slide .img {width: 64%; display: flex;justify-content: space-between;}
.portfolio .inner .slide .slick-slide .img  img {width: 50%; }




.portfolio .inner .txt h2 {font-size: 50px;padding-bottom: 70px;}
.portfolio .inner .txt h3 {font-size: 35px;}
.portfolio .inner .img img:first-child {padding-right: 20px;}

.slick-slider {width: 100%;transition: all 900ms ease;}
.slick-slider button {display: none !important;}
.slick-dots{text-align: center;position: absolute;bottom: -55px; width: 100%;display: flex;left: 46%;}
.slick-dots li { display: inline-block;
  background-color: #ccc;
  margin: 10px 5px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;}
.slick-dots button{display: none;}
.slick-dots li.slick-active{background: #1d1d1d;}
.portfolio .inner a {display: block;position: absolute;bottom: 31%;right: 0 ;padding: 20px 10px;transition: all 0.3s ease-in-out;font-weight: 500;}
.portfolio .inner a:hover {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){
.visual {padding-top: 15.1vw;}
.hamburger-menu {width: 50px;height: 50px;right: 57px;}
.about .inner .top .tit {width: 100%;padding-bottom: 100px;}
.about .inner .svgLine #svg03 {left: 26%;top: 6vw;}
.about .inner .svgLine #svg02 {top:12.5vw}
.about .inner .svgLine #svg01 {top: 17vw;left: 18%;}
.video .videoTxt span:nth-child(1) p {left: 10vw;}
.video .videoTxt span:nth-child(2) p {left: 40vw;}
.video .videoTxt span:nth-child(3) p {left: 60vw;}

.keywordTxt p#one 
.keywordTxt p#two 
.keywordTxt p#three 
.keywordTxt p#four 
.keywordTxt p#five 
.keywordTxt p#six 
.keyword .inner .deco span:nth-child(1) {width: 80px;height: 80px;}
.keyword .inner .deco span:nth-child(2) {width: 7.65vw;height: 7.65vw;}
.keyword .inner .deco span:nth-child(3) {width: 10.20vw;height: 10.20vw;}
.keyword .inner .deco span:nth-child(4) {width: 5.10vw;height: 5.10vw;}
.keyword .inner .deco span:nth-child(5) {width: 6.12vw;height: 6.12vw;}
.keyword .inner .deco span:nth-child(6) {width: 5.10vw;height: 5.10vw;}
.skill .skillCard {width: 68%;}
.skill .inner .skillCard li img {width: 13vw;margin: 5px 13px;}

.work .inner .workBox li:nth-child(1) img {width: 140px;}
.work .inner .workBox li:nth-child(2) img {width: 320px;}
.work .inner .workBox li:nth-child(3) img {width: 400px;}
.work .inner .workBox li:nth-child(4) img {width: 350px;}

.clone .inner .tit {font-size: 120px;}
.clone .inner .face{top: 30vh;left: 26.5vw;}
.portfolio .inner .txt h3 {font-size: 26px;}
.portfolio .inner .txt h2 {font-size: 34px;}
.portfolio .inner .txt p {font-size: 14px;}
  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;}
  .mainImg {left: 50%; top:20%;transform: translateX(-35%);}
  .clone .inner .bottom h2 {font-size: 84px;}
  .clone .inner .face{top: 27vh;left: 28.5vw;width: 120px;height: 75px;}
  .clone .inner .face .eye {top: 30px;width: 30px;height: 36px;}
  .face .eye:nth-child(2) {right: 75px;}
  .face .eye:nth-child(1) {left: 75px;}
  .face .eye .pupil {width: 23px;height: 30px;margin-top: -21px;}
  .face .nose {top: 96%;width: 15px;height: 9px;}
  .clone .inner .face .eye span {display: none;}
  footer .inner .bottom .txt h3 {font-size: 50px;}
  footer .inner .bottom .right {margin-top:3.4vh;}
  footer .inner .bottom .right li:nth-child(2) {font-size: 22px;}
  footer .inner .bottom .right li img {display: none;}
}