@charset "UTF-8";

@import url(reset.css);
@import url(font.css);
@import url(glass.css);

body {overflow-x: hidden;}

#wrap {width: 100%; position: relative;}
.centerbox {width: 1440px; margin: 0 auto;}

.glass {display: flex; align-items: center; justify-content: center; border-radius: 50px; overflow: hidden; position: relative; ;
    box-shadow: 
      0 1px 10px rgba(163, 163, 163, 0.37),
      inset 0 2px 4px rgba(255, 255, 255, 0.2),
      inset 0 -2px 4px rgba(0, 0, 0, 0.05);
    /* margin-left: -150; top: 132px; transform:scale(0.2) rotate(-50deg) */
}

.glass-liquid a {display: block; padding: 10px 30px; white-space: nowrap;}


/* Liquid Glass Effect */
.glass-liquid a{
    box-sizing: border-box; 
    background: linear-gradient(
      180deg,
      rgba(13, 13, 13, 1) 0%,
      rgba(46, 46, 46, 1) 50%,
      rgba(38, 38, 38, 1) 100%
    );
    width: 98%;
    height: 98%;;
    border-radius: 50px; 
    /* backdrop-filter: blur(6px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    position: relative;
    z-index: 2;
    top: 3%;
  }
  
  .glass-liquid::before {
    content: '';
    width: 60%;
    position: absolute;
    top: 0px;
    left: 50%;
    right: 0;
    transform: translate(-50%,0);
    z-index: 2;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );
  }

  .glass-liquid::after {
    content: "";
    width: 100%;
    height: 90%;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.0) 100%
      );
    left: 50%;
    transform-origin: left;
    transform: rotate(-90deg)
    /* transition: .3s; */
  }
  .glass-liquid:hover::after {
    animation: liq 1s forwards linear;
  }
  @keyframes liq {
    0% {transform: rotate(-90deg); opacity: 1;}
    50% {transform: rotate(-270deg); opacity: 1;}
    100% {transform: rotate(-450deg); opacity: 0;}
  }








header {width: 100%; height: 50px; position: absolute; top: 30px; z-index: 10; }
nav {height: 100%; display: flex; align-items: center; justify-content: space-between;}
.gnb {display: flex; gap: 40px; }
.gnb li {/* padding: 10px 30px; */}
.gnb li a {display: block; color: #fff;}

nav .right {display: flex; gap: 40px;}
.search {padding: 13px 20px; border-radius: 50px; display: flex; align-items: center; justify-content: space-between; height: 50px; box-sizing: border-box;}
.search input {background: none; color: #fff; font-size: 16px;}
.menu {padding: 9px 14px;}


.visual {width: 100%; height: 900px; background: #000;}
.visual .centerbox {height: 100%; position: relative;}
.visual .centerbox .design {position: absolute; right: 0; bottom: 240px; display: flex; gap: 20px; flex-direction: column; align-items: flex-end;}
.visual .centerbox .design > div {padding: 10px 40px; text-align: center; flex-shrink: 0;}
.visual .centerbox .design .top {width: 90%;}
.visual .centerbox .design .bottom {}
.visual .centerbox p {color: #fff;}

.visual .centerbox .butterfly {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; pointer-events: none;   /* 클릭/드래그 차단 */}
.visual .centerbox .title {position: absolute; bottom: -1px; z-index: 8; display: flex; justify-content: space-between; align-items: end;}
.visual .centerbox .on {width: 250px; height: 250px; position: absolute; border-radius: 500px; left: 800px; top: 250px;}
.visual .centerbox .glass {user-select: none;/* 텍스트 드래그 방지 */-webkit-user-drag: none; /* 이미지 드래그 방지 (Safari 대응) */pointer-events: auto; /* 꼭 클릭 이벤트 받도록 */ z-index: 12;}
.visual .centerbox .glass:active {cursor: grabbing;}

/* btn 기본 설정 */
.btn {border: 1px solid #333; color: #333; padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; justify-content: center; width: fit-content;}


/* obj 기본 설정 */
.obj {padding: 100px 0; display: flex; align-items: center; justify-content: center }

/* index 기본 설정 */
.index {width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 100px;}

.index .left {display: flex; align-items: center; gap: 20px; margin-right: 284px;}
.index .icon {width: 200px; height: 40px; background: #f3f2f1; border: 1px solid #a0a0a0; box-sizing: border-box; border-radius: 40px; display: flex; align-items: center; justify-content: center; gap: 13px;}
.index .icon img{flex-shrink: 0;}

.index .tit_box {display: flex; align-items: center; gap: 20px; margin-right: 224px;}
.index .tit_box .index_tit {width: 200px; height: 40px; background: #f3f2f1; border: 1px solid #a0a0a0; box-sizing: border-box; border-radius: 40px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 400; color: #595757;}

.index .right {display: flex; align-items: center; gap: 20px; color: #595757;}
.index .right .num {width: 40px; height: 40px; font-size: 24px; font-weight: 400; color: #595757; background: #f3f2f1; border: 1px solid #a0a0a0; box-sizing: border-box; border-radius: 40px; display: flex; align-items: center; justify-content: center;}

/* tit 기본 섧정 */
.tit {font-size: 24px; font-weight: 500;}

/* project_tit 기본 설정 */
.project_tit {width: 100%; display: flex; align-items: center; justify-content: center; padding-bottom: 100px;}


.sec1 {z-index: 2;background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);}
.sec1 .sec1_1 {display: flex; align-items: center; justify-content: space-between;}

.sec1 .me {display: flex; flex-direction: column;}
.sec1 figure {width: 452px; height: 492px; border-radius: 600px; overflow: hidden;}
.sec1 .me .tit {text-align: center; margin-top: 40px;}
.sec1 .contact {text-align: center; margin-top: 30px;}
.sec1 .contact p {margin-top: 20px; font-size: 20px; color: #929292;}

.sec1 .sec1_1 .right {display: flex; flex-direction: column; align-items: end; gap: 46px;}

.sec1 .sec1_1 .right .tit {margin-bottom: 40px;}

.sec1 .sec1_1 .right .title {font-size: 48px; font-weight: 200; text-align: right; line-height: 130%;}
.sec1 .sec1_1 .right .title span {font-weight: 400; color: #7e65bc;}

.sec1 .sec1_1 .right .right2 {width: 100%; display: flex; justify-content: space-between;}
.sec1 .sec1_1 .right .right2 .edu ul {display: flex; flex-direction: column; gap: 20px;}
.sec1 .sec1_1 .right .right2 .edu ul li {display: flex; gap: 20px;}
.sec1 .sec1_1 .right .right2 .edu ul li p {font-size: 20px; line-height: 140%; color: #777;}

.sec1 .sec1_1 .right .right2 .tool ul {display: flex; flex-direction: column; gap: 20px;}
.sec1 .sec1_1 .right .right2 .tool ul li {display: flex; gap: 20px;}

.sec1 .sec1_1 .right .skill ul {display: flex; flex-direction: column; gap: 20px;}
.sec1 .sec1_1 .right .skill ul li {display: flex; gap: 20px; font-size: 18px;}
.sec1 .half {padding-bottom: 0;}


.sec2 {background: #000;}
.sec2 .obj {padding: 100px 0;}
.sec2 .centerbox .half {padding-top: 0;}
.sec2 .act .tit {color: #fff; margin-bottom: 60px;}
.sec2 .act ul {display: flex; flex-direction: column; gap: 40px;}
.sec2 .act ul li {display: flex; align-items: center; justify-content: space-between; word-break: keep-all;}
.sec2 .sub {display: flex; flex-direction: column; align-items: start;}
.sec2 .sub .date {padding-left: 20px; color: #fff; font-size: 18px; margin-bottom: 10px;}
.sec2 .sub .cont {display: flex; align-items: center; justify-content: center;}
.sec2 .btn {font-size: 20px; padding: 10px 50px; color: #fff; border: 1px solid #fff;}
.sec2 .line {width: 20px; height: 1px; background: #fff;}
.sec2 .sub_btn  {font-size: 16px; padding: 10px 20px; color: #fff; border: 1px solid #fff; flex-shrink: 0;}

.sec3 {}
.sec3 .index {margin-top: 100px;}

/* .sec3 .mockup img {transition: 5s;} */

.sec3 .tit {margin-bottom: 30px;}
.sec3 .btn_list {display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px;}
.sec3 .btn_list li {display: flex; gap: 20px;}
.sec3 .btn_list li .btn {font-size: 18px;}
.sec3 .concept p {font-size: 18px; color: #333; line-height: 160%;}

.sec3 .color {display: flex; gap: 20px; margin-bottom: 40px;}
.sec3 .color li {width: 36px; height: 36px; border-radius: 36px;}
.sec3 .project_1 .color .c1 {background: #edeae5;}
.sec3 .project_1 .color .c2 {background: #e9e3d7;}
.sec3 .project_1 .color .c3 {background: #af7777;}
.sec3 .project_1 .color .c4 {background: #562e20;}
.sec3 .project_1 .thema li:nth-child(1) {background: #e9e3d7; }
.sec3 .project_1 .thema li:nth-child(2) {background: #af7777; }
.sec3 .project_1 .thema li:nth-child(3) {background: #562e20; }

.sec3 .project_2 .color .c1 {background: #fff; border: 1px solid #aeaeae; box-sizing: border-box;}
.sec3 .project_2 .color .c2 {background: #9c0009;}
.sec3 .project_2 .color .c3 {background: #9a9a9a;}
.sec3 .project_2 .color .c4 {background: #000;}
.sec3 .project_2 .thema li:nth-child(1) {background: #9c0009; }
.sec3 .project_2 .thema li:nth-child(2) {background: #9a9a9a; }
.sec3 .project_2 .thema li:nth-child(3) {background: #000; }

.sec3 .project_3 .color .c1 {background: #fff; border: 1px solid #aeaeae; box-sizing: border-box;}
.sec3 .project_3 .color .c2 {background: #ebe3da;}
.sec3 .project_3 .color .c3 {background: #3f7c4b;}
.sec3 .project_3 .thema li:nth-child(1) {background: #fff; }
.sec3 .project_3 .thema li:nth-child(2) {background: #ebe3da; }
.sec3 .project_3 .thema li:nth-child(3) {background: #3f7c4b;}

.sec3 .project_4 .color .c1 {background: #f5f5f5; border: 1px solid #aeaeae; box-sizing: border-box;}
.sec3 .project_4 .color .c2 {background: #a572d2;}
.sec3 .project_4 .color .c3 {background: #6e42a8;}
.sec3 .project_4 .color .c4 {background: #939598;}
.sec3 .project_4 .thema li:nth-child(1) {background: #a572d2; }
.sec3 .project_4 .thema li:nth-child(2) {background: #6e42a8; }
.sec3 .project_4 .thema li:nth-child(3) {background: #939598;}

.sec3 .thema {display: flex; margin-bottom: 50px; position: relative; width: 520px;}
.sec3 .thema li {width: 200px; height: 200px; border-radius: 200px; border: 1px solid #333; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.sec3 .thema li p {font-size: 18px; color: #333;}
.sec3 .thema li:first-child {}
.sec3 .thema li:nth-child(2) {position: absolute; left: 160px;}
.sec3 .thema li:nth-child(3) {position: absolute; right: 0;}

.sec3 .project_bg {width: 100%; background: #f8f8f8;}

.sec3 .right .tit {text-align: end;}
.sec3 .right .btn_list li {justify-content: end;}
.sec3 .right .color {justify-content: end;}
.sec3 .right .concept p {text-align: end;}


.sec3 .web_proj .bg_box {position: absolute; width: 100%; }
.sec3 .web_proj:nth-child(2n) .bg_box {position: absolute; width: 100%; left: -400px;}

.sec3 .project_1 .centerbox {margin-bottom: 150px; padding: 100px 0; display: flex; align-items: center; justify-content: space-between;}
.sec3 .project_1 .left {display: flex; flex-direction: column;}
.sec3 .project_1 .right {position: relative; width: 810px; height: 700px;}
/* .sec3 .project_1 .right .mockup_bg {background: #fff; width: 810px; height: 700px; filter: blur(80px); position: absolute; top: 50%; transform: translateY(-50%); z-index: 0;} */

.spline-watermark {display: none !important}

.sec3 .project_2 {position: relative; width: 100%; }
.sec3 .project_2 .left {position: relative; width: 853px; height: 620px;}
.sec3 .project_2 .centerbox {display: flex; align-items: center; justify-content: space-between; margin-bottom: 150px; padding: 100px 0; }
.sec3 .project_2 .left .mockup_bg {background: #fff; width: 853px; height: 620px; filter: blur(80px); position: absolute; top: 50%; transform: translateY(-50%); z-index: 0;}

.sec3 .project_3 {position: relative; width: 100%; }
.sec3 .project_3 .centerbox {margin-bottom: 150px; padding: 100px 0; position: relative; display: flex; align-items: center; justify-content: space-between;}
.sec3 .project_3 .left {display: flex; flex-direction: column;}
.sec3 .project_3 .right {position: relative; width: 810px; height: 700px;}
.sec3 .project_3 .right .mockup_bg {background: #fff; width: 810px; height: 700px; filter: blur(80px); position: absolute; top: 50%; transform: translateY(-50%); z-index: 0;}

.sec3 .project_4 {position: relative; width: 100%;}
.sec3 .project_4 .centerbox {padding: 100px 0; display: flex; justify-content: end; display: flex; align-items: center; justify-content: space-between;}
.sec3 .project_4 .left {position: relative; width: 750px; height: 785px;}
.sec3 .project_4 .left img {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;}
.sec3 .project_4 .mockup_bg {background: #fff; width: 750px; height: 785px; filter: blur(80px); position: absolute; top: 0; z-index: 0;}

.sec3 .half {padding-bottom: 0;}




.project_2 li {
  cursor: none; 
}

/* 커스텀 butter.gif */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: url("../images/butter.gif") no-repeat center / contain;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-30deg);
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.sec3 .right .mockup_1 {position: absolute; top: 50%; transform: translateY(-50%); right: 50px; z-index: 4;}
.sec3 .right .mockup_2 {position: absolute; bottom: 0;z-index: 5;}

.sec3 .left .mockup_1 {position: absolute; top: 50%; transform: translate(-50%, -50%); left: 55%; z-index: 4;}
.sec3 .left .mockup_2 {position: absolute; bottom: 0; z-index: 5;}
.sec3 .left .mockup_3 {position: absolute; bottom: 0; right: 0; z-index: 6;}

.sec3 .right .imac {position: relative;}
.sec3 .right .imac img {}
.sec3 .right .imac .mockup {width: 613px; height: 344px; overflow: hidden; position: absolute; top: 19px; left: 20px;}
.sec3 .right .imac .mockup .mockup_img {width: 100%; position: relative;}
.sec3 .right .imac .mockup img {width: 100%; position: absolute; top: 0;}

.sec3 .right .macbook {position: relative;}
.sec3 .right .macbook img {}
.sec3 .right .macbook .mockup {width: 401px; height: 252px;overflow: hidden; position: absolute; top: 17px; left: 66px;}
.sec3 .right .macbook .mockup .mockup_img {width: 100%; position: relative;}
.sec3 .right .macbook .mockup img {width: 100%; position: absolute; top: 0;}
.sec3 .project_3 .right .macbook .mockup img {width: 100%; position: absolute; top: 0;}

.sec3 .left .imac {position: relative;}
.sec3 .left .imac img {}
.sec3 .left .imac .mockup {width: 613px; height: 344px; overflow: hidden; position: absolute; top: 19px; left: 20px;}
.sec3 .imac .mockup .mockup_img {width: 100%; position: relative;}
.sec3 .imac .mockup img {width: 100%; position: absolute; top: 0;}

.sec3 .left .macbook img {}
.sec3 .left .macbook {position: relative;}
.sec3 .left .macbook .mockup {width: 401px; height: 252px;overflow: hidden; position: absolute; top: 17px; left: 66px;}
.sec3 .left .macbook .mockup .mockup_img {width: 100%; position: relative;}
.sec3 .left .macbook .mockup img {width: 100%; position: absolute; top: 0;}

.sec3 .left .iphone img {}
.sec3 .left .iphone {position: relative;}
.sec3 .left .iphone .mockup {width: 109px; height: 234px;overflow: hidden; position: absolute; top: 8px; left: 8px; border-radius: 8px;}
.sec3 .left .iphone .mockup .mockup_img {width: 100%; position: relative;}
.sec3 .left .iphone .mockup img {width: 100%; position: absolute; top: 0;}









.sec4 {background: #000;}
.sec4 .half {padding: 0;}
.sec4 .index {margin-top: 100px; margin-bottom: 0;}

.sec4 .project_bg {background: #fff;}
.sec4 .project_tit {padding: 100px 0;}

.sec4 .project_1 ul {display: flex; gap: 20px;}
.sec4 .project_1 ul li {display: flex; flex-direction: column; gap: 20px;}
.sec4 .project_1 ul li .btn_list {display: flex; gap: 20px;}
.sec4 .project_1 ul li .btn {color: #fff; border: 1px solid #fff;}

.sec4 .project_2  {margin-top: 300px;}
.sec4 .project_2 ul {display: flex; gap: 20px;}
.sec4 .project_2 ul li {display: flex; flex-direction: column; gap: 20px;}
.sec4 .project_2 ul li .btn_list {display: flex; gap: 20px;}
.sec4 .project_2 ul li .btn {color: #fff; border: 1px solid #fff;}
 
.sec4 .project_3 {padding-bottom: 100px; margin-top: 300px;}
.sec4 .project_3 ul {width: 100%; height: 855px; position: relative; display: flex; gap: 20px;}
.sec4 .project_3 ul li {display: flex; flex-direction: column; gap: 20px;}

.sec4 .project_3 ul li:first-child {position: absolute; left: 0; top: 0;}
.sec4 .project_3 ul li:nth-child(2) {position: absolute; left: 475px; top: 50px;}
.sec4 .project_3 ul li:nth-child(3) {position: absolute;right: 0; top: 100px;}

.sec4 .project_3 ul li .btn_list {display: flex; gap: 20px;}
.sec4 .project_3 ul li .btn {color: #fff; border: 1px solid #fff;}
.sec4 .project_3 .half {padding-top: 100px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

.sec4 .project_bg {padding-bottom: 200px;position: relative;}
.sec4 .project_4 {width: 100%; }
.sec4 .project_4 ul {width: 100%; display: flex; flex-direction: column; }
.sec4 .project_4 ul li {display: flex; align-items: flex-start; justify-content: space-between;flex-wrap: wrap; gap: 40px;}
.sec4 .project_4 ul li div {width: 15%; animation: logo 1s infinite;}
@keyframes logo {
  0% {opacity: 0.3;}
  60% {opacity: 1;}
  80% {opacity: 0.7;}
  100% {opacity: 1;}
}
.sec4 .project_4 ul li div:nth-child(1) {animation-delay: 0.1s;}
.sec4 .project_4 ul li div:nth-child(2) {animation-delay: 0.2s;}
.sec4 .project_4 ul li div:nth-child(3) {animation-delay: 0.3s;}
.sec4 .project_4 ul li div:nth-child(4) {animation-delay: 0.2s;}
.sec4 .project_4 ul li div:nth-child(5) {animation-delay: 0.5s;}
.sec4 .project_4 ul li div:nth-child(6) {animation-delay: 0.3s;}
.sec4 .project_4 ul li div:nth-child(7) {animation-delay: 0.7s;}
.sec4 .project_4 ul li div:nth-child(8) {animation-delay: 0.4s;}
.sec4 .project_4 ul li div:nth-child(9) {animation-delay: 0.5s;}
.sec4 .project_4 ul li div:nth-child(10) {animation-delay: 0.1s;}
.sec4 .project_4 .half {padding-top: 100px; position: absolute; bottom: 0; width: 1440px;}



.mockup img {
  display: block;
  width: 100%;
  height: auto;
}












footer {background: #000;}
footer .half {padding-top: 0; padding-bottom: 100px;}
footer .index {padding-bottom: 100px; margin-bottom: 0;}
footer .end {width: 100%; height: 722px; padding-bottom: 150px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;}