@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');
@font-face {font-family: 'mom_to_daughter';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_08@1.0/mom_to_daughter.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* 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}
html {scroll-snap-type: y;height: auto;display: grid;grid-auto-rows: 100%;}

/* 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: #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: 100%;padding-bottom: 80px;}
.visual .inner {width: 55%;margin: 0 auto;position: relative;align-items: center}
.visual .inner .tit {font-size: 92px;font-weight:500;padding-top: 230px;line-height: 108px;text-align: center;letter-spacing: -2px;transform: translateX(50%,-50%);padding-bottom: 15px;}
.visual .path {position: relative;}
.visual .path svg {position: absolute;z-index: 1;top:-2vw}
.visual .inner p {padding-top: 20px;font-size: 16px;line-height: 21px;margin-left: 53%;}
.visual .inner .tit.motion {animation-name:slid-up; animation-duration: 0.2s;animation-timing-function: ease-in-out; }
.visual .inner .txt.motion {animation-name:slid-up; animation-duration: 0.4s;animation-timing-function: ease-in-out; }

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

/* svgAni */
.visual .path.motion svg .st0 {stroke-dasharray: 1237 ;stroke-dashoffset: 1237;animation: ani1 .8s linear 0s forwards; }

@keyframes ani1 {
    0%{stroke-dashoffset: 1237;}
    100%{stroke-dashoffset: 0;}
}

/* process */
.process{width: 100%;height: 100vh;padding-top: 20px;position: relative;z-index: -10;}
.process .inner {width: 70%;margin: 0 auto;;z-index: -10;}
.process .shape{display: flex;justify-content: space-between;position: absolute;z-index: -20;}
.process .shape #dot {content: '';border:   1px solid #0C0C0C;width: 32vw;height: 32vw;display: block;border-radius: 50%;position: absolute;left: 6.25vw;bottom: -85vh;}
.process .shape #side {display: block;border:   1px solid #0C0C0C;width: 30vw;height: 30vw;border-radius:50px;position: absolute;left: 62.5vw;bottom: -80vh;}
.process .shape #line {
  display: block;border: 1px solid #0C0C0C;width: 12vw;position: absolute;height: 38vw;border-radius: 200px;
  transform: rotate(-30deg);left: 42.71vw;bottom:-85vh;
}

.process .inner .UL {display: block;}
.process .inner .UL .LI {display: flex;justify-content: space-between;flex-direction: column;height: 100%;padding: 30px;border-radius: 20px;margin-bottom: 50px;}
.process .inner .UL .LI span {font-size: 35px;padding-bottom: 15px;}
.process .inner .UL .LI .index  {display: flex;justify-content:first baseline;text-align: center;align-items: center;}
.process .inner .UL .LI .index .cell {background: #ddd;padding: 60px;border-radius: 15px;width: 300px;height: 150px;color: #0c0c0c;font-size: 20px;margin-right: 25px;}




/* background */
.bg {background: #1d1d1d;width: 100%;height:270vh;border-radius: 50px 50px 0 0;color: #fff;position: absolute;z-index: -1;}

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



/* result */
.result {padding-top: 9.38vw;}
.result .inner {height: 60vh;}
.result .inner .txt {display: flex;text-align: left;line-height: 20px;color: #fff;}
.result .inner .txt h3 {font-size: 60px;font-weight: normal;padding: 0 190px 180px 600px;}
.result .inner .txt p {font-size: 16px;line-height: 1.43;}
.result .inner ul {display: flex;overflow-x: hidden; }
.result .inner ul li {flex: 0 0 auto;margin-right: 20px;
}
.result .inner ul li img {width: 100%;height: auto;}
.result .inner ul li p {margin-top: 10px;}
.result .inner .txt .line{width: 24%;position: absolute;top:25px;left: 24%;}
.result .line .svg02 {width: 100%;position: absolute;top: 340px;left: 240px;} 

.result .line.motion .svg02 {stroke-dasharray: 1402 ;stroke-dashoffset: 1402;animation: ani2 .8s linear 0s forwards; }

@keyframes ani2 {
    0%{stroke-dashoffset: 1402;}
    100%{stroke-dashoffset: 0;}
}
/* result animation */
.result .inner ul li{animation: marquee 15s linear infinite;left: 0;transform: translateX(-50%);}


/* figma.Ncs */
.figma{width: 100%;}
.figma .inner {width: 55%;margin: 50px auto;}
.figma .inner .txt {position: relative;}
.figma .inner .txt h3 {position: absolute;left: -250px;font-weight: normal;padding-top: 85px;}
.figma .inner .txt p {padding: 80px 0;}
.figma .inner .txt p a{font-size: 30px;line-height:90px;font-weight: bold;text-decoration: underline;}
.figma .inner .txt p span {color: #bbb;}
.figma .inner .list {width: 100%;position: relative;}
.figma .inner .txt a {transition: all 0.3s ease-in-out;}
.figma .inner .txt a:hover {color: #FF6800;}

.figma .inner .list .ncs {display:flex;flex-flow: column wrap;justify-content: space-between;padding: 30px 0;}
  .figma .inner .list .ncs li {display: flex;justify-content: space-between;border-bottom: 1px solid #fff;padding: 15px 0;}
  .figma .inner .list .ncs li:last-child {border-bottom: none;}
  .figma .inner .list .ncs p{font-size: 18px;padding: 10px;line-height: 140%;text-align: left;}
  .file {float: right;right: 0;transform: translateX(-130px);}

  .figma .inner .list .ncs .file span {display: inline-block;font-size: 30px;content: ''; border: 1px solid #fff; border-radius: 50%; width: 45px; height: 45px;line-height: 1.4;transform: rotate(-30deg); transition: all 0.3s;}
  .figma .inner .list .ncs li:hover span {background: #FF6800;border: #FF6800;color: #FF6800;}
  .figma .inner .list .ncs .file:last-child {text-align: center;}
  .figma .inner .list span {position: absolute;font-size: 14px;}
  .figma .inner .list span:first-child{left: 80px;}
  .figma .inner .list span:nth-child(2){right: 400px;}

  /* animation */
  .figma .list.motion .ncs li:nth-child(1) {animation-name:slid-up; animation-duration: 0.3s;animation-timing-function: ease-in-out;}
  .figma .list.motion .ncs li:nth-child(2) {animation-name:slid-up; animation-duration: 0.5s;animation-timing-function: ease-in-out;}
  .figma .list.motion .ncs li:nth-child(3) {animation-name:slid-up; animation-duration: 0.7s;animation-timing-function: ease-in-out;}
  .figma .list.motion .ncs li:nth-child(4) {animation-name:slid-up; animation-duration: 0.9s;animation-timing-function: ease-in-out;}
  .figma .list.motion .ncs li:nth-child(5) {animation-name:slid-up; animation-duration: 1.1s;animation-timing-function: ease-in-out;}
  .figma .list.motion .ncs li:nth-child(6) {animation-name:slid-up; animation-duration: 1.3s;animation-timing-function: ease-in-out;}
  .figma .list.motion .ncs li:nth-child(7) {animation-name:slid-up; animation-duration: 1.5s;animation-timing-function: ease-in-out;}


/* footer */
footer {width: 100%;}
footer .inner {width: 100%;height: 100vh;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:first baseline;padding-top: 70px;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: 50px;left: 55%;transform: translateX(-50%);}
footer .inner .bottom .nav span {padding-right: 50px;padding-top: 50px;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 .path svg {position: absolute;z-index: 1;top:4vw}
  .result .inner .txt h3 {font-size: 40px;font-weight: normal;padding: 0 9vw 180px 31.25vw;}
  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) {
  .result .inner .txt .line {top: 80px;left: 25%;}
  .innerHeader .mainMenu .gnb li a {font-size:16px;}

  .keywordTxt p#one {bottom: 73px;left: 346px;}footer .inner .bottom .txt ul li {font-size: 14px;}
}