/* .mouse-cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background:  #6969ff;
	background-color: rgba(255, 255, 255, 0.1);
	user-select: none;
	pointer-events: none;
	transition: left 0.1s ease-out, top 0.1s ease-out;
    z-index: 99999;
} */
body {
    cursor: none;
}

.text-hover {
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}
  
  /* 호버 시 스타일 */
.text-hover:hover {
    color: #2bbf66 !important;
    transform: translateX(-5px);
}
  
  /* 기본 상태에서 점 스타일 */
  .text-hover::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #2bbf66;
    border-radius: 50%;
    top: -5px;
    right: -15px;
    opacity: 0; /* 기본적으로 투명 */
    transform: scale(0); /* 기본적으로 크기 0 */
    transition: opacity 0.3s ease, transform 0.3s ease; /* 부드러운 전환 */
  }
  
  /* 호버 시 동그란 점 애니메이션 */
  .text-hover:hover::after {
    opacity: 1; /* 불투명 */
    transform: scale(1); /* 원래 크기로 */
  }

.mouse-cursor {
    position: absolute;
    left: -500px;
    top: -500px;
    width: 50px;
    /* height: 10px; */
    /* border-radius: 50%; */
    /* background: #6969ff; */
    /* background-color: rgba(255, 255, 255, 0.1); */
    user-select: none;
    pointer-events: none;
    /* transition: left 0.1s ease-out, top 0.1s ease-out; */
    z-index: 99999;
}

.mouse-cursor.scrolling {
  transition: left 0.1s ease-out, top 0.1s ease-out; /* 스크롤 시 부드럽게 */
}

/* 눈송이 파티클 스타일 */
.snowflake {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #2bbf66;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998; /* 커서 아래에 표시 */
    animation: fall 1.5s linear forwards; /* 눈이 떨어지는 애니메이션 */
}

.main-color {
    color: #2bbf66;
}

@keyframes fall {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(50px); /* 아래로 50px 떨어짐 */
    }
}

#header {
    background: #000;
    border-bottom: 1px solid #313131;
    z-index: 9;
    position: fixed;
    display: flex;
    width: calc(100% - 80px);
    justify-content: space-between;
    padding: 20px 40px;
}

.header-space {
    padding-top: 112px;
}

#header .logo-box {

}

#header .logo-box img {
    width: 130px;
}

#header .nav-box {
    display: flex;
    align-items: center;
    gap: 50px;
    font-size: 1.25em;
}

#header .nav-box a {
    color: #fff;
}

#footer{background: #000;}
#footer .inner {width: calc(100% - 100px); margin: 0 auto; max-width: 100%; }
#footer .marquee_container {overflow: hidden;background: black;border-top: 1px solid #555;border-bottom: 1px solid #555;white-space: nowrap; padding-block:70px;}
#footer .marquee_track {display: flex;width: max-content;}
#footer .marquee_content {display: inline-flex; align-items: center;}
#footer .marquee_content a {position: relative; font-size: 5vw; font-weight: bold; text-decoration: none; padding-inline: 80px; background: linear-gradient(90deg, #FFF 0%, #999 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;}
#footer .marquee_content .dot{color: #fff; font-size: 5vw;}
#footer .footer_info{padding-block:30px 50px;}
#footer .footer_top{display: flex; justify-content: space-between;}
#footer .footer_top img{width: 340px;}
#footer .project_wrap{display: flex; flex-direction: column; align-items: flex-end;}
#footer .start_txt{text-align: right;}
#footer .start_txt h4{font-size: 4.1667vw; color: #fff; line-height: 1.2;}

#footer .project_wrap .now_btn{position: relative;margin-top: 20px;font-size: 3.125vw;width: 15.625vw;padding-inline: 40px; padding-block:5px; line-height: 1; text-align: center;font-weight: 600;border: 1px solid #fff;border-radius: 50px;background: linear-gradient(270deg, #FFF 0.26%, #999 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;transition: color 0.5s ease 0.5s;overflow: hidden;z-index: 1;}
#footer .project_wrap .now_btn::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background-color: #2bbf66;border-radius: 50%; transform: translate(-50%, -50%);z-index: -1;transition: width 0.6s ease, height 0.6s ease;}
#footer .project_wrap .now_btn:hover::before {width: 100%; height: 300%;}
#footer .project_wrap .now_btn:hover {transition-delay: .5s;color: #fff;-webkit-text-fill-color: #fff;}

#footer .footer_btm{display: flex; justify-content: space-between; align-items: flex-end; margin-top: 60px;}
#footer .address_wrap{font-size: 26px; color: #fff;}
#footer .address_wrap > div:not(:last-child){margin-bottom: 20px;}
#footer .address_wrap > div dl{display: flex;}
#footer .address_wrap > div dl dt{width: 130px; flex-shrink:0;}
#footer .address_wrap > div dl dd a { color: #fff;}
#footer .sub_link_wrap{text-align: right;}
#footer .sub_link_wrap .nav_link{position: relative; display: inline-block; font-size: 40px; color: #fff; line-height: 1.5; overflow: hidden;}
#footer .sub_link_wrap .nav_link::before,
#footer .sub_link_wrap .nav_link::after {content: '';position: absolute;width: 100%;left: 0;}
#footer .sub_link_wrap .nav_link::before {background-color: #fff;height: 2px;bottom: 0;transform-origin: 100% 50%;transform: scaleX(0);transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);}
#footer .sub_link_wrap .nav_link::after {content: attr(data-replace);height: 100%;top: 0;transform-origin: 100% 50%;transform: translate3d(200%, 0, 0);transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);color: #fff; z-index: 1;}
#footer .sub_link_wrap .nav_link:hover::before {transform-origin: 0% 50%;transform: scaleX(1);}
#footer .sub_link_wrap .nav_link:hover::after {transform: translate3d(0, 0, 0);}
#footer .sub_link_wrap .nav_link span {display: inline-block;transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); position: relative; z-index: 2;}
#footer .sub_link_wrap .nav_link:hover span {transform: translate3d(-200%, 0, 0); }
#footer .sub_link_wrap .copy{font-size: 14px; color: rgba(255, 255, 255, 0.50); padding-top: 20px;}

@media (max-width: 850px) {
    #footer .footer_top {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    #footer .project_wrap {
        align-items: center;
        justify-content: center;
    }
    
    #footer .start_txt {
        text-align: center;
        margin-top: 25px;
    }
    
    #footer .footer_btm {
        margin-top: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    #footer .sub_link_wrap {
        text-align: center;
    }

}

@media (max-width: 600px) {
    #header {
        padding: 10px 20px;
        width: calc(100% - 40px);
    }

    #header .logo-box img {
        width: 100px;
    }

    #header .nav-box {
        gap: 25px;
        font-size: 14px;
    }

    #footer .inner {
        width: 100%;
    }

    #footer .marquee_container {
        padding-block: 50px;
    }

    #footer .footer_top a {
        text-align: center;
    }

    #footer .footer_top img {
        width: 80%;
    }

    #footer .start_txt h4 {
        font-size: 24px;
    }

    #footer .project_wrap .now_btn {
        font-size: 20px;
    }

    #footer .address_wrap {
        font-size: 14px;
    }

    #footer .sub_link_wrap .nav_link {
        font-size: 18px;
        line-height: 2.5;
    }
}