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

/* layout */
body {font-family: "Raleway", sans-serif;}
.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;top: 0;left: 0;}
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;}

/* 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:hard-light}

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

.topBtn.show {opacity: 1;}

/* tab */
.tab {width: 100vw;height: 80vh;;background: #fff;}
.tab .inner {width: 33%;margin:260px auto;}
.tab .inner h2 {font-size: 5.10vw;text-align: center;font-weight: 400;line-height: 1.4;margin-bottom: 80px;}
.tab .inner ul {display: flex;justify-content: space-between;border: 1px solid #1d1d1d;border-radius: 40px;}
.tab .inner ul li{font-size:1.28vw;padding: 20px 1.79vw}
.tab .inner ul li:hover {background: #FF6800;color: #fff;border-radius: 40px;padding: 20px 35px;}

/* animation */
.tab .inner.motion h2 {animation-name:slid-up; animation-duration: 0.5s;animation-timing-function: ease-in-out; }
.tab .inner.motion .menu {animation-name:slid-up; animation-duration: 0.7s;animation-timing-function: ease-in-out;}

@keyframes slid-up {
  0%{opacity: 0;}
 40%{opacity: 0; transform: translateY(40px);}
}
/* uiux */
.uiux {width: 100vw;height:100vh;background: #fff;}
.uiux .inner {width: 80%;margin: 0 auto;}
.uiux .inner .h3 {color: #ccc; font-weight: 300; font-size: 1.02vw; padding-bottom: 20px;}
.uiux .inner ul {display: flex;justify-content: space-between;}

.uiux .inner ul li .tit h3 {font-size: 3.06vw;font-weight: 500;padding-bottom: 20px;}
.uiux .inner ul li .tit p {font-size: 0.92vw;font-weight: 300;line-height: 1.4;letter-spacing: -1px;}
.uiux .inner ul li .a .txt {width: 90%;margin: 0 auto;align-items: center;font-weight: 500;}
.uiux .inner ul li .a .txt h4 {font-weight: 400;color: #2d2d2d;padding-bottom: 20px;}
.uiux .inner ul li .img {padding-bottom: 20px;}
.uiux .inner ul li .img img {width: 100%;}
.uiux .inner ul li .a .txt .brand{display: inline-block;font-size:25px;letter-spacing: -1px;line-height: 1.3;}
.uiux .inner ul li .a .txt p{display:inline-block;line-height: 1.3;line-break: 1.4;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-align: justify;font-size: 15px;letter-spacing: -1px;color: #2d2d2d;}

.uiux .inner ul li .a .txt span {display: flex;justify-content: center;transform: rotate(-30deg);font-size: 1.53vw;float: right;align-items: center;line-height: 1.4;transition: all 0.3s;color: #0C0C0C;}
.uiux .inner ul li .a .txt span{content: '';border: 1px solid #0C0C0C;border-radius: 50%;width: 2.30vw}
.uiux .inner ul li .a {width: 90%;transition: all 0.3s ease;}

/* animation */
.uiux .inner ul li .a:hover .txt span {
    background: #0C0C0C;
    border-radius: 50%; /* 아이콘 모양을 원형으로 변경 */
}
.uiux .inner.motion .tit h3 {animation-name:slid-up; animation-duration: 0.5s;animation-timing-function: ease-in-out;}
.uiux .inner.motion .tit p {animation-name:slid-up; animation-duration: 0.7s;animation-timing-function: ease-in-out;}

.uiux .inner.motion ul li {
  opacity: 0;
  animation: slideUp 0.8s ease-out forwards;
}

/* 시간차를 주기 위해 nth-child를 사용 */
.uiux .inner ul li:nth-child(1) {
  animation-delay: 0.2s;
}

.uiux .inner ul li:nth-child(2) {
  animation-delay: 0.3s;
}

.uiux .inner ul li:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes slideUp {
  from {
    transform: translateY(150px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* clone */
.clone {width: 100vw; padding-top: 150px; height: 100vh; background: #fff;}
.clone .inner {width: 83%; margin: 0 auto; display: flex; justify-content: space-between;}
.clone .left {width: 60%;}
.clone .left .h3 {color: #ccc; font-weight: 300; font-size: 1.02vw; padding-bottom: 20px;padding-left: 30px;}
.clone .left .list {width: 80%;}
.clone .left .list li {display: flex; justify-content: space-between; font-size: 1.79vw; margin: 10px 30px; border-bottom: 1px solid #1d1d1d; line-height: 1.6;}
.clone .left .list li:last-child {border: none;}
.clone .left .list li span {transform: rotate(-30deg); text-align: center; align-items: center; transition: all 0.3s; font-size: 1.53vw; line-height: 1.4; color: #1d1d1d;display: inline-block;}
.clone .left .list li span:last-child {content: ''; border: 1px solid #1d1d1d; border-radius: 50%; width: 2.30vw; height: 2.30vw;}
.clone .left .list li:hover span {background-color: #1d1d1d;}
.clone .right {width: 40%;display: flex; align-items: center;position: relative;}
.clone .right img {z-index: 1;}
/* .clone .left .list li a {
  width: 100%;
} */

.clone .right .imgBox img {width: 100%;position: absolute;top: 50%;margin-top: -190px;opacity: 1;}


.clone .right h2 {position: absolute;left: 50%;transform: translateX(-50%);font-size: 2.55vw;text-align: center;font-weight: normal;color: #ccc;z-index: 1;width: 100%;}
.clone .right h2 span:first-child {font-size: 0.71vw;}
.clone .right h2 img {width: 100%}
.clone .right h2 span {font-size: 1.79vw;display: block;}    

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



/* artWork */
.artWork {width: 100vw;height: 120vh;background: #fff;border-radius: 0 0 50px 50px;margin-bottom: 300px;}
.artWork .inner {width: 80%;margin: 0 auto;}
.artWork .inner h2 {font-size: 3.06vw;font-weight: 600;text-align: center;padding-bottom: 50px;}
.artWork .inner ul {width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;}


.artWork .inner ul li {width: 500px;height: 470px;;background: #F4F3F1;border-radius:30px;box-sizing: border-box;padding: 20px 25px;display: flex; justify-content: space-between; flex-direction: column;}
.artWork .inner ul li:nth-child(1) {margin-bottom: 20px;}
.artWork .inner ul li:nth-child(2) {margin-bottom: 20px;}
.artWork .inner ul li:nth-child(3) {margin-bottom: 20px;}
.artWork .inner ul li h3 {font-size: 1.08vw;font-weight: 400;color: #999;}
.artWork .inner ul li .img {position: relative;width: 100;margin: 0 auto;}
.artWork .inner ul li .img img:hover {transition: all 0.2s ease-in-out;
  box-shadow: 0 0px 15px 0 rgba(90, 50, 40, .15), 0 4px 8px 0 rgba(80, 40, 30, .1);transform: translateY(-5px);}
.artWork .inner ul li .img img {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;}
.artWork .inner ul li .img p {font-size: 0.61vw;padding:10px 0;color: #999;}
.artWork .inner ul li .txt {padding-bottom: 20px;line-height: 1.4;width: 80%;margin: 0 auto;}


/* animation */
.artWork .inner.motion h2 {animation-name:slid-up; animation-duration: 0.8s;animation-timing-function: ease-in-out;}
/* footer */
footer {width: 100vw;background: #1d1d1d;height: 36vh;position: fixed;bottom: 0;left: 0;z-index: -1;padding: 75px 0;box-sizing: border-box}
footer .inner {display: flex;justify-content: space-between;color: #fff;width: 85%;margin: 0 auto;padding-top: 47px;position: relative}
footer .inner .logo img{display: block;}
footer .inner .logo {color: #8B8B8B;}
footer .inner .contact{width: 25%;}
footer .inner .contact span {width: 30px;height: 30px;background: #fff;border-radius: 50%;display: inline-block;margin-left: auto;position: absolute;right: 0;}
footer .inner .contact p:first-child {font-size:1.53vw;padding:10px 0;border-bottom: 1px solid #fff;align-items: center;justify-content: space-between;}
footer .inner .contact p:last-child {padding-top: 10px;font-size: 1vw;}

footer .inner .contact.motion span {animation-name: slide;animation-duration: 0.5s;}
@keyframes slide {
  100% {transform: translateX(0%);}
  0% {transform: translateX(-350%);}
}
footer .inner ul {display: flex;justify-content: space-between;width: 25%;position: absolute;right: 37%;bottom: -70px;}
footer .inner ul li {text-decoration: underline;}


footer .inner .bottom.motion .txt h3:nth-child(1) {animation-name:slid-up; animation-duration: 0.4s; }
footer .inner .bottom.motion .txt h3:nth-child(2) {animation-name:slid-up; animation-duration: 0.5s; }
footer .inner .bottom.motion .txt h3:nth-child(3) {animation-name:slid-up; animation-duration: 0.6s; }
footer .inner .bottom.motion .txt h3:nth-child(4) {animation-name:slid-up; animation-duration: 0.7s; }
  /* responsiveWeb */
/* pc모드=> 1720px ~ 1401px */
@media screen and (max-width:1720px){
  .hamburger-menu {width: 50px;height: 50px;right: 57px;}
  .tab .inner {width: 35%;margin:260px auto;}
  .clone .right .imgBox img {top: 71%;}
  .clone .right h2 {right:50%;}
  .clone .right h2 span {font-size: 1.4vw;}
  .artWork .inner ul li {width: 26vw;height: 24vw;border-radius: 14px;}
  .artWork .inner ul li .img img {width: 100%;}
  .artWork .inner ul li:nth-child(3) .img{width: 40%;}
  .artWork .inner ul li:nth-child(4) .img{width: 40%;}
  .artWork .inner ul li .img {width: 60%;}
  .artWork .inner ul li .img p {font-size: 10px;}
  .artWork .inner ul li .txt {font-size: 12px;}
  .artWork {height: 110vh;margin-bottom: 230px;}
  footer{height: 26vh;padding: 15px 0;}
}
/* pc모드=> 1401px ~ 1024px */
@media screen and (max-width:1401px){
  .innerHeader .mainMenu .gnb li a {font-size:16px;}}