@charset "UTF-8";

/*
 * Version : 1.0
 * Date : 2024-07
 */
.m-block{
    display: none;
}
section[class$="__wrap"] {
    position: relative;
}
.return-top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var( --sub-font-color);
    width: 5.5rem;
    height: 5.5rem;
    position: fixed;
    right: 3%;
    bottom: 5%;
    z-index: 9;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
}
header{
    position: fixed;
    width: 100%;
    height: 96px;
    z-index:999;
}
header.on{
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.header__wrap{
    padding: 0 5vw ;
    margin:0 auto;
    height: 100%;
    font-size: 2rem;
}
nav{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__logo a{
    font-weight: bold;
}
.nav__ul{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav__ul li{height: 100%;}
.nav__ul a{
    display: flex;
    align-items:center;
    justify-content:center;
    height: 100%;
    color:#fff;
}
.nav__ul a:hover{
    color: var(--point-color)
}
/************** MAIN ****************/


section.main__wrap {
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

section.main__wrap h1 {
    font-weight: 800;
    margin-bottom: 6rem;
    font-size: clamp(6rem, 8vw, 8rem);
    z-index: 2;
    position: relative;
}
section.main__wrap p{
    font-size: clamp(1.8rem, 2vw, 2rem);
    line-height: 1.8;
    z-index: 2;
}
.blur {
    position: absolute;
    z-index: 1;
    border-radius: 900px;
    filter: blur(var(--blur-amount));
    background: var(--color);
}

.blur:nth-child(1) {
    height: var(--blur-1-size);
    width: calc(var(--blur-1-size) * 1.1);
}

.blur:nth-child(2) {
    filter: blur(var(--blur-amount)) hue-rotate(135deg) brightness(1.3);
    height: var(--blur-2-size);
    width: calc(var(--blur-2-size) * 0.75);
    top: 20vh;
    right: 20vh;
}

.blur:nth-child(3) {
    filter: blur(var(--blur-amount)) hue-rotate(-135deg);
    height: var(--blur-3-size);
    width: calc(var(--blur-3-size) * 2);
    bottom: 20vh;
    left: 20vw;
}

.main__wrap{
    padding: 0 8vw;
    height: 100vh;
}
.credit {
    position: relative;
    margin-top: 3rem;
    width: 100%;
    text-align: center;
    z-index: 2;
}

/************** ABOUT ****************/
.about__wrap{
    padding-bottom: 0vw;
}
.about__inner, .projet__inner{
    padding: 5vw 8vw 10vw;
    height: 100%;
    background:#081831;
    color:#f4f4f8;
}
.work__inner {
    padding: 0vw 8vw;
    height: 100%;
    background:#081831;
    color:#fff;
}
.about__inner h2, .work__inner h2, .projet__inner h2{
    /*margin-bottom: 6rem;*/
    font-size: 4rem;
    font-weight: bold;
}
.about__box{
    /*display: flex;*/
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2%;
}
.signature{
    width: 15rem;
    height: 5rem;
    background: url("../images/about/signature.svg") 0 0 no-repeat;
    background-size: 100% auto;
}
.about__box .img__box{
    width: 30%;
}
.about__box .img__box .img__emoji{width: 100%;}
.about__txt__box{
    
}
.about__txt{
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    line-height: 1.4;
}
.about__txt p{
    margin-bottom: 2rem;
    word-wrap: break-word;
    letter-spacing: -.2px;
}
.career h3{
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    font-weight: bold;
}
.career .about__txt li{margin: 1rem 0;}
.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    padding:1rem 0;
    background:#081831;
    mask-image: linear-gradient(
            var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
    );
}

.marquee img{
    transition: all .2s ease;
}
.marquee img:hover{
    scale:0.9;
}
@keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }
    to {
        transform: translateX(var(--scroll-end));
    }
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x var(--duration) linear infinite;
}
/************** WORK ****************/
.work__wrap{
    background-size: 90% auto;
    background: #fafafa url(../images/bg-txt-gray-1.png) no-repeat fixed center;
}

.work__list{
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
.work__list li{
    width: 48%;
    margin-bottom: 6rem;
}
.work__list a{
    display: inline-block;
    width: 100%;
}
.work__list img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-shadow: 3px 0 7px rgb(108 108 108 / 10%);
}
.work__txt{
    margin-top: 2.4rem;
    padding-left: 1rem;
}
.work__txt h5{
    font-size: 3rem;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: bold;
}
.work__txt p{
    font-size: 2.2rem;
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    line-height: 2;
    color: var(--sub-font-color);
}
/************** PROJECT ****************/
.project_wrap{
    width: 100%; 
    background-color: #212121;
    color: #fff;
}

.projet__inner h2{
    color: #fff;
}
.projet__list .img__box{
    display: none;
}

.projet__list li .projet__text{
    width: 100%;
    padding: 2.4vw 0; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #fff;
}
.projet__list li .projet__text h5{
    font-size: 3rem;
    font-size: clamp(2rem, 3vw, 3rem);
    width: 40%;
}
.projet__list li .projet__text p{
    font-size: 2.2rem;
    font-size: clamp(1.5rem, 2vw, 2.2rem);
}
.projet__list li .projet__text p.hash{
    width: 40%;
}
.projet__list li .projet__text p.desc{
    opacity: 0.6;
}
.projet__list li:hover h5{
    color: var( --point-color);
}
/****** 커서 이미지박스 *******/
.cursor .img-box{
    position: fixed;
    top: 0;left: 0;
    transform: translate(-50%,-50%);
    opacity: 0;
    width: 400px; height:0;
    background-size: cover;
    pointer-events: none;
    transition: height 0.5s, opacity 0.5s 0.1s;
}
.cursor .img-box .image{
    width: 100%;
    height:0;
    overflow: hidden;
    transition: height 1s;
}
.cursor .image img{
    max-width: 100%;
    transform: scale(1.5);
    transition: transform 1s 0.2s ease-out;
}
.cursor .img-box.on{
    height: 200px;
    opacity: 1;
    transition: height 0.5s 0.1s, opacity 0.5s;
}
.cursor .img-box .image.on{
    height:100%;
}
.cursor .image.on img{
    transform: scale(1.0);
}
/************** CONTACT ****************/
.footer__wrap{
    height: 100vh;
}
.contact__center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background:#081831;
}

.footer__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 3rem;
    position: relative;
}

.contact p{
    position: relative;
}

.copyright {
    position: absolute;
    bottom: 5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    color: #a9a9a9;
    line-height: 1.5;
}
.copyright .link__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}
.copyright .link__box a{
    display: block;
}
.copyright .link__box a:hover{
    color: #333;
    text-decoration: underline;
}

.contact__txt_1 {
    font-size: 4rem;
    font-size: clamp(2.4rem, 4vw, 4rem);
}
.contact__txt_2 {
    font-size: 2rem;
    font-size: clamp(1.8rem, 2vw, 2rem);
    line-height: 1.6;
}

.shortcut__arrow{
    position: relative;
    transition: .4s all ease-in-out;
    color: var(--point-color)
}

.shortcut__arrow i {
    position: absolute;
    top: 50%;
    right: -3rem;
    transform: translate(0, -50%);
}

.shortcut__arrow:hover {
    color: #20bf55;
    padding-left: 10px;
}

.word{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*font-size: 70px;*/
}

.letter{
    display: inline-block;
    transform: translateY(20px);
    opacity: 0;
    transition: all 500ms ease-in;
    font-size: 8rem;
    font-size: clamp(2rem, 8vw, 8rem);
    font-weight: bold;
}

.letter.on{
    transform: none;
    opacity: 1;
}

@media screen and (max-width: 1440px){
    .about__box .img__box{
        width: 40%;
    }
    .about__box.career div{
        width: 100%;
        margin-bottom: 2rem;
    }
}
@media screen and (max-width: 1000px){
    .about__txt__box{
        width: 100%;
        margin-top: 4rem;
    }
    .about__box .img__box{
        width: 60%;
    }
    .marquee,.marquee img{
        height: 5rem;
    }
    header{
        height: 80px;
    }
    .nav__ul{display: none}
      .work__list li{
        width: 100%;
        margin-bottom: 4rem;
    }

}
@media screen and (max-width: 600px){
    section.main__wrap{
        align-items: center;
    }
  
    .work__txt{
        margin-top: 1.6rem;
    }
    .work__list img{
        border-radius: 10px;
    }
    .marquee__group {
        gap:4rem;
    }
    .marquee,.marquee img{
        height: 4rem;
    }
    .footer__wrap{
        padding: 0 2vw;
        background:#081831;
    }
    .copyright {
        flex-direction: column-reverse;
        gap: 4rem;
    }
    .copyright .link__box {
        width: 80%
    }
    .m-block{
        display: block;
    }
    .p-block{display: none}
    .projet__list li .projet__text{
        flex-direction:column;
        justify-content:start;
        align-items:flex-start;
        gap: .5rem;
    }
  .projet__list li .projet__text h5,.projet__list li .projet__text p.hash{
      width: 100%;
  }
}

/* KMFIX'S 포인트 컬러 */

.main__wrap h1 .title-point {
   /*  color: #00F0FF;*/
   color: #f4f4f8;
}

.main__wrap .title-ad {
   /*   color: #00F0FF;*/
    color: #fff;
    font-weight:bolder;
    font-family:Codec,Arial,Helvetica Neue,Helvetica,sans-serif;
    text-transform:uppercase;
    width:calc(((100% / 12) * 8) - (1em * 2));
}
------------------------------------------------

/* =====================================================
   WEBGL UNDERWATER CAUSTICS
===================================================== */


/* MAIN */

section.main__wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: #020914;
}


/* 기존 원형 Blur 제거 */

section.main__wrap > .blur {
    display: none;
}


/* WebGL 배경 */

.webgl-caustics {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% -10%,
            rgba(40, 105, 165, 0.32),
            transparent 65%
        ),
        #020914;
}


/* WebGL Canvas */

#caustics-canvas {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    opacity: 1;
}


/* 배경의 부드러운 심해 광원 */

.caustics-atmosphere {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% -5%,
            rgba(155, 222, 255, 0.12),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(0, 6, 18, 0.24) 100%
        );
}


/* =====================================================
   FLOATING PARTICLES
===================================================== */

.caustics-particles {
    position: absolute;
    inset: 0;

    z-index: 2;

    overflow: hidden;
    pointer-events: none;
}


.caustics-particles span {
    position: absolute;

    display: block;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: rgba(211, 241, 255, 0.8);

    box-shadow:
        0 0 6px rgba(132, 211, 255, 0.7),
        0 0 13px rgba(85, 174, 255, 0.35);

    opacity: 0;

    animation:
        causticsParticleMove
        var(--particle-duration, 12s)
        ease-in-out
        var(--particle-delay, 0s)
        infinite;
}


/* 입자 위치 */

.caustics-particles span:nth-child(1) {
    left: 12%;
    top: 30%;
    --particle-duration: 13s;
    --particle-delay: -3s;
}

.caustics-particles span:nth-child(2) {
    left: 21%;
    top: 55%;
    --particle-duration: 16s;
    --particle-delay: -8s;
}

.caustics-particles span:nth-child(3) {
    left: 29%;
    top: 23%;
    --particle-duration: 11s;
    --particle-delay: -5s;
}

.caustics-particles span:nth-child(4) {
    left: 37%;
    top: 70%;
    --particle-duration: 15s;
    --particle-delay: -10s;
}

.caustics-particles span:nth-child(5) {
    left: 46%;
    top: 39%;
    --particle-duration: 18s;
    --particle-delay: -6s;
}

.caustics-particles span:nth-child(6) {
    left: 53%;
    top: 76%;
    --particle-duration: 14s;
    --particle-delay: -12s;
}

.caustics-particles span:nth-child(7) {
    left: 61%;
    top: 27%;
    --particle-duration: 17s;
    --particle-delay: -7s;
}

.caustics-particles span:nth-child(8) {
    left: 69%;
    top: 51%;
    --particle-duration: 12s;
    --particle-delay: -4s;
}

.caustics-particles span:nth-child(9) {
    left: 77%;
    top: 34%;
    --particle-duration: 15s;
    --particle-delay: -11s;
}

.caustics-particles span:nth-child(10) {
    left: 84%;
    top: 66%;
    --particle-duration: 19s;
    --particle-delay: -13s;
}

.caustics-particles span:nth-child(11) {
    left: 91%;
    top: 25%;
    --particle-duration: 14s;
    --particle-delay: -5s;
}

.caustics-particles span:nth-child(12) {
    left: 17%;
    top: 81%;
    --particle-duration: 18s;
    --particle-delay: -9s;
}

.caustics-particles span:nth-child(13) {
    left: 42%;
    top: 16%;
    --particle-duration: 13s;
    --particle-delay: -6s;
}

.caustics-particles span:nth-child(14) {
    left: 66%;
    top: 83%;
    --particle-duration: 16s;
    --particle-delay: -10s;
}

.caustics-particles span:nth-child(15) {
    left: 89%;
    top: 77%;
    --particle-duration: 20s;
    --particle-delay: -15s;
}


/* 입자 애니메이션 */

@keyframes causticsParticleMove {

    0% {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(0.4);
    }

    25% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.85;
        transform: translate3d(8px, -8px, 0) scale(1);
    }

    75% {
        opacity: 0.25;
    }

    100% {
        opacity: 0;
        transform: translate3d(-6px, -35px, 0) scale(0.3);
    }

}


/* =====================================================
   TEXT LAYER
===================================================== */


/* 기존 메인 콘텐츠는 효과 위에 표시 */

section.main__wrap h1,
section.main__wrap p,
section.main__wrap .credit,
section.main__wrap .main__inner {
    position: relative;
    z-index: 5;
}


/* 모바일 */

@media screen and (max-width: 768px) {

    .caustics-atmosphere {
        opacity: 0.8;
    }

    .caustics-particles span {
        width: 1.5px;
        height: 1.5px;
    }

}


/* 모션 감소 설정 */

@media (prefers-reduced-motion: reduce) {

    .caustics-particles span {
        animation: none;
        opacity: 0.25;
    }

}








/* =====================================================
   ABOUT ME
   SCROLL ANIMATED BORDER
===================================================== */

.about__inner {
    position: relative;
}


/* SVG 전체 영역 */

.about-border {
    position: absolute;

    /*
     * ABOUT ME 영역 안쪽으로 들어오는 정도
     */
    top: 0;
    right: 0;
    bottom: 8vw;
    left: 8vw;

    width: calc(100% - 16vw);
    height: calc(100% - 6vw);

    pointer-events: none;

    z-index: 0;

    overflow: visible;
}


/* 초록색 테두리 */

.about-border__path {

    fill: none;

    stroke: #20bf55;

    /*
     * 테두리 두께
     */
    stroke-width: 12px;
    vector-effect: non-scaling-stroke;

    stroke-linecap: square;
    stroke-linejoin: miter;

    /*
     * SVG 경로 전체 길이
     */
     stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

    /*
     * 처음에는 완전히 숨김
    stroke-dashoffset: 400;
     */
    

    opacity: 1;

    /*
     * 그려지는 속도
     */
    transition:
        stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.35s ease;
}




/* =====================================================
   ABOUT ME가 화면에 들어왔을 때
===================================================== */

.about__inner.is-border-active
.about-border__path {

    stroke-dashoffset: 0;

    opacity: 1;
}


/* =====================================================
   콘텐츠는 SVG보다 위
===================================================== */

.about__inner > *:not(.about-border) {

    position: relative;

    z-index: 1;
}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 768px) {

    .about-border {

        top: 0rem;
        right: 2.5rem;
        bottom: 2.5rem;
        left: 2.5rem;

        width: calc(100% - 5rem);
        height: calc(100% - 5rem);
    }

    .about-border__path {

        stroke-width: 3px;
    }
}

.textMe {width:calc(((100% / 12) * 8.5) - (1em * 2));margin-left:calc(((100% / 12) * 1) + 1em)}
 .textMe h2 {font-size:6rem;letter-spacing:-2px;font-family:Codec,Arial,Helvetica Neue,Helvetica,sans-serif}
.textMe h3 {font-size:4em;letter-spacing:-2px;color:#20bf55;font-family:Codec,Arial,Helvetica Neue,Helvetica,sans-serif;margin:10px 0;}
.textMe h3 + p {font-size:3em;letter-spacing:-1px;font-weight:normal;font-family:Codec,Arial,Helvetica Neue,Helvetica,sans-serif}
.Wrapper_wrapper___M12Y {}
.Button_button__etXCZ {background:#1663fe;font-family:Codec,Arial,Helvetica Neue,Helvetica,sans-serif;color:#f4f4f8;padding:1.2em 1em 1em;}
h1, h2, h3, h4, h5, h6 {font-family:Codec,Arial,Helvetica Neue,Helvetica,sans-serif;line-height:1.2}
body {color:#f4f4f8;font-family:normal 18px/1.6 Bitter,Cambria,Georgia,serif}

@media screen and (max-width: 1739px) {
    .Section_section__QV_9w {width:calc(100% - 6em)}
}
@media screen and (max-width: 980px) {
    .Section_section__QV_9w {width:calc(((100% / 12) * 9) - (1em * 2));margin-left:calc(((100% / 12) * 1) + 1em)}
}
@media screen and (max-width: 739px) {
    .Section_section__QV_9w {width:calc(100% - 2em);padding-top:3em}
}
@media screen and (max-width: 800px) {
    .textMe {width:calc(((100% / 12) * 11) - (1em * 2));font-size:0.7em;text-align:justify;padding-right:calc(((100% / 11) * 0.5) + 1em)}
    .textMe h2 {font-size:2rem;line-height:1.3;letter-spacing:0px}
    .textMe .about-scroll-arrow {display:none}
    .textMe h3 + p {letter-spacing:-1px}
    .about__inner, .projet__inner {padding: 5vw 8vw 20vw;}
}
@media screen and (max-width: 767px) {
    .about-scroll-arrow  {display:none}
}

/* =====================================================
   ABOUT ME - SCROLL DOWN ARROW
===================================================== */

.about-scroll-arrow {
    position: absolute;

    /* 네모 박스 안쪽 오른쪽 하단 */
    left: 2.8vw;
    bottom: -8vw;

    width: 24px;
    height: 38px;

    z-index: 5;

    pointer-events: none;

    display: flex;
    justify-content: center;
    align-items: center;

    animation: aboutArrowMove 1.8s ease-in-out infinite;
}


/* 아래 방향 화살표 */

.about-scroll-arrow span {
    position: relative;

    display: block;

    width: 20px;
    height: 20px;

    border-right: 2px solid #20bf55;
    border-bottom: 2px solid #20bf55;

    transform: rotate(45deg);

}


/* 위아래로 살짝 움직임 */

@keyframes aboutArrowMove {

    0% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(-3px);
    }

}


/* 모바일 */

@media screen and (max-width: 768px) {

    .about-scroll-arrow {
        right: 2rem;
        bottom: 2rem;

        width: 20px;
        height: 32px;
    }

    .about-scroll-arrow span {
        width: 10px;
        height: 10px;

        border-width: 1.5px;
    }

}
.portfolio {}