@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Roboto:wght@300;400&family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.example.com/css?family=Pretendard:wght@100;200;300;400;500;600;700');

/* reset */
body {margin: 0;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 600;}
header, main, footer, section, article, aside, nav {display: block;}
a {color: inherit; text-decoration: inherit;}
a img {border: none;}
img {vertical-align: middle; max-width: 100%;}
li {list-style: none;}



/* contents header */
.wrap {overflow: hidden; position: relative; background: #000;} /* 기본적으로 적기 */
.visual {width: 100vw; height: 100vh; overflow: hidden;}
.visual .main {width: 100%; height: 100%; object-fit: cover; object-fit: cover; /* 동영상을 부모 요소에 맞게 cover로 설정 */
     /* 동영상을 고정 */}
.menuOpen {display: none; transition: all 0.3s;}
.innerHeader.active {transform: translateY(-120%);}
.innerHeader {width: 100%; position: fixed; z-index: 9999; padding-left: 35px;/* 헤더를 고정 */ font-family: 'pretendard', sans-serif; font-weight: 400; background: #00000046; padding-bottom: 35px; backdrop-filter: blur( 4px ); border-bottom: #ffffff69 solid 1px;}
.innerHeader h1 {display: inline-block; width: 80px; margin-top: 30px;}
.innerHeader .rightBox {display: inline-block; float: right; margin: 36px 30px 0 0 ;}
.innerHeader .rightBox .gnb {display: flex;}
.innerHeader .rightBox .gnb span {width: 15px;}
.innerHeader .rightBox .gnb .btn {padding: 0 50px; display: block;}
.innerHeader .rightBox .gnb a {color: #fff; padding: 0 50px; font-size: 20px;}
.innerHeader .rightBox .gnb a:hover, .innerHeader .rightBox .gnb a:focus {color: rgb(255, 255, 255); opacity: 20%;}
.innerHeader .rightBox .gnb .boder {border: 1px solid rgb(255, 255, 255); padding: 8px 24px 10px 24px; border-radius: 30px;}

/* contents */
.contents .visual {position: relative; background: #000; padding-bottom: 80px;}

:root {  
    --purple: rgb(247, 58, 124);
    --violet: rgb(127, 60, 241);
    --pink: rgb(251, 206, 93);}
    
    @keyframes background-pan {
    from {
    background-position: 0% center;
    }
    
    to {
    background-position: -200% center;
    }}

    @keyframes scale {
    from, to {
    transform: scale(0);
    }
    
    50% {
    transform: scale(1);
    }}

    @keyframes rotate {
    from {
    transform: rotate(0deg);
    }
    
    to {
    transform: rotate(180deg);
    }}


    .contents .visual h1 {
    color: white;
    font-family: "montserrat", sans-serif;
    font-size: 65px;
    font-weight: 600;
    margin: 0px;
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 42%; left: 50%; transform: translate(-50%, -50%);}

    .contents .visual  h1 > .magic {
    display: inline-block;
    position: relative;}

    .contents .visual h1 > .magic > .magic-star {
    --size: clamp(20px, 1.5vw, 30px);
    
    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
    }

    .contents .visual h1 > .magic > .magic-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
    }

    .contents .visual h1 > .magic > .magic-star > svg > path {
    fill: var(--violet);
    }

    .contents .visual h1 > .magic > .magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(
    to right,
    var(--purple),
    var(--violet),
    var(--pink),
    var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;}

  /* -- YouTube Link Styles -- */

    #source-link {
    top: 60px;
    }

    #source-link > i {
    color: rgb(94, 106, 210);
    }

    #yt-link {  
    top: 10px;
    }

    #yt-link > i {
    color: rgb(239, 83, 80);
    }

    .contents .visual .meta-link {
    align-items: center;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;  
    display: inline-flex;
    gap: 5px;
    left: 10px;
    padding: 10px 20px;
    position: fixed;
    text-decoration: none;
    transition: background-color 600ms, border-color 600ms;
    z-index: 10000;
    }

    .contents .visual .meta-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .contents .visual .meta-link > i, .meta-link > span {
    height: 20px;
    line-height: 20px;
    }
    
    .contents .visual .meta-link > span {
    color: white;
    font-family: "montserrat", sans-serif;
    transition: color 600ms;
    }




/* scroll down btn */
    .contents .visual .btn {
    width: 30px;
    height: 50px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    outline: 2px solid rgb(205, 207, 223);
    box-shadow: 0px 0px 10px rgb(105, 127, 255);
    position: absolute; z-index: 1; top: 80%; left: 50%;}

    .contents .visual .btn .scroll {
    width: 4px;
    height: 8px;
    border-radius: 10px;
    background-color: rgb(206, 209, 225);
    box-shadow: 0px 0px 10px rgb(205, 208, 223);
    animation: scroll_4013 2s linear infinite;
    transform: translateY(40%);}

    .contents .visual .btn:after {
    content: 'scroll';
    position: absolute;
    color: whitesmoke;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center; margin-top: 100px; margin-left: 5px;}

    @keyframes scroll_4013 {
    0% {
    transform: translateY(40%);
    }

    50% {
    transform: translateY(90%);
    }
    };




/* keyword keywordBox */
.keyword {padding-top: 100px; padding-bottom: 100px;  }
.keyword .keywordBox{width: 100%; transform: rotate(3deg); padding: 25px 0 25px 50px; display: flex;  position: absolute; z-index: 180; left: -22px; border-bottom: #ffffffaf 1px solid; border-top: #ffffffa0 1px solid; background: #ececec13;}
.keyword .keywordBox li {margin-right: 25px; display: flex; align-items: center; width: 100%;}
.keyword .keywordBox li img {animation: rotateAnimation 6s linear infinite;}
.keyword .keywordBox li p {color: #fff; font-size: 40px; font-family: 'montserrat', sans-serif; font-weight: 600;}



/* 꽃 로테이션 */
@keyframes rotateAnimation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg); /* 360도 회전 */}
}




/* about aboutBox */
/* titBox */
.about { height: 1080px; overflow: hidden; position: relative; z-index: 110; padding: 180px 0 250px 0; background: #000;} /* 기본적으로 적기 */
.about .aboutBg {position: absolute;}
.about .aboutBox {padding-top: 260px;}
.con01 {height: 70vh;}
.textBox {width: 100%; height: 80vh; font-size: 5vw;font-family: 'pretendard', sans-serif; line-height: 1.5; letter-spacing: -1px; position: relative; overflow: hidden;  font-weight: 400; text-align: center; }
.textBox ul {position: absolute; left: 0%; right: 0%; }
.textBox ul li {border-bottom: #ffffff38 1px solid;}
.textBox span.en_p {font-family: 'pretendard', sans-serif; font-weight: bold;}
.textBox .menu {color: transparent; -webkit-text-stroke: 1px #ffffff;}
.textBox .menu span.color {color: #fff; -webkit-text-stroke: none;}
.textBox .mask .en_p {color: #fff; -webkit-text-stroke: none;}
.textBox .menu {color: transparent; -webkit-text-stroke: 1px rgba(222, 222, 222, 0.808);}
.textBox .menu span.color {color: #fff; -webkit-text-stroke: none;}
.textBox .container {position: relative; height: 80px; overflow: hidden; outline: 1px transparent;}








/* about btn */
.generate-button {
    --generate-button-star-1-opacity: .25;
    --generate-button-star-1-scale: 1;
    --generate-button-star-2-opacity: 1;
    --generate-button-star-2-scale: 1;
    --generate-button-star-3-opacity: .5;
    --generate-button-star-3-scale: 1;
    --generate-button-dots-opacity: 0;

    appearance: none; outline: none; border: none; padding: 16px 24px 16px 20px;
    border-radius: 29px;
    margin: 0 auto;
    background-color: #1D1D1D;
    color: #616161;
    display: flex;

    /* cursor: pointer; */
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    transform: scale(var(--generate-button-scale, 1)) translateZ(0);
    box-shadow: 0px 0px 120px var(--generate-button-shadow-wide, transparent), 0px 4px 12px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 1px var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04)), 0 0 0 var(--generate-button-shadow-outline, 0px) rgba(109, 68, 244, 0.4);
    transition: transform .3s, background-color .3s, box-shadow .3s, color .3s;

    span {
    position: relative;
    z-index: 1;
    font-family: 'Poppins', Arial;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.005em;
    display: block;
    }

    svg {
    &.dots {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        fill: #D3B2FF;
        opacity: var(--generate-button-dots-opacity);
    }

    &.icon {
        width: 24px;
        height: 26px;
        margin-right: 12px;
        fill: currentColor;

        path { &:nth-child(1) { opacity: var(--generate-button-star-1-opacity); transform: scale(var(--generate-button-star-1-scale)) translateZ(0);transform-origin: 25% 14.58%;}

        &:nth-child(2) { opacity: var(--generate-button-star-2-opacity); transform: scale(var(--generate-button-star-2-scale)) translateZ(0); transform-origin: 60.42% 50%;}

        &:nth-child(3) { opacity: var(--generate-button-star-3-opacity); transform: scale(var(--generate-button-star-3-scale)) translateZ(0); transform-origin: 25% 85.42%;}}
    }}

    &:hover {--generate-button-scale: 1; --generate-button-shadow-wide: rgba(208, 173, 255, 0.4); --generate-button-shadow-inset: rgba(255, 255, 255, 0.35); --generate-button-shadow-outline: 3px; color: #fff; background-color: #6D44F4;
    .stroke {svg {animation: stroke 2s linear infinite;}}
    &:before {opacity: 1;}
    }
}

@keyframes stroke {
    0% {opacity: 0;}
    25%, 75% {opacity: 1;}
    95%, 100% {stroke-dashoffset: 6; opacity: 0;}}




/* skill skillBox */
/* 행성부분 */
.skill { overflow: hidden; position: relative; z-index: 130; margin: 0 auto; background: #000;   background-size: 40%; height: 1200px; 

    /* background-blend-mode: hard-light; */
    /* background-position: 0 0, 1em 1em, 0 0; */}
.skill .skillBox h2  {position:absolute;  top: 30%; left: 50%; transform: translate(-50%, -50%); font-size: 350px; font-weight: bold; color: fff;}
.skill .skillBox h2:nth-child(1) {color: transparent; -webkit-text-stroke: 1px #343434;}
.skill .skillBox h2:nth-child(2) {  background: linear-gradient(to right top,#2f12ed, #941aff, #dacf7c, #ffa69e);
    color: transparent;
    -webkit-background-clip: text; animation: animate 6s ease-in-out infinite;  }


@keyframes animate {
0%, 100% { clip-path: polygon(
    0% 45%,
    16% 44%,
    33% 38%,
    58% 60%,
    73% 61%,
    84% 59%,
    100% 52%,
    100% 100%,
    0% 100%
  );
    opacity: 0.8;
}

50% {clip-path: polygon(
    0% 60%,
	15% 65%,
	32% 66%,
	51% 62%,
	67% 50%,
	84% 45%,
	100% 46%,
	100% 100%,
	0% 100%
  );
  opacity: 0;
}
}



.skill .skillBox .iconBox {margin: 0 auto; width: 80%; display: flex; position: relative; margin-top: 100px;}
.skill .skillBox .iconBox li { width: 98px; margin: 0 auto;  position: relative;}

.skill .skillBox .iconBox li:nth-child(1) {margin-top: 400px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(2) {margin-top: 500px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(3) {margin-top: 450px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(4) {margin-top: 550px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(5) {margin-top: 490px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(6) {margin-top: 570px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(7) {margin-top: 510px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(8) {margin-top: 430px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li:nth-child(9) {margin-top: 580px; transition: all 0.5s ease;}
.skill .skillBox .iconBox li a img {display: block; transition: all 0.4s ease-in;}
.skill .skillBox .iconBox li a span {color: #474747; font-size: 14px; display: block;  text-align: center; font-family: 'montserrat', sans-serif; font-weight: 400; transition: all 0.4s ease; }

.skill .skillBox .iconBox li:hover a span, .skill .skillBox .iconBox li:focus a span {color: #fff; font-size: 14px; transition: all 0.4s ease-in; font-weight: 500;}
.skill .skillBox .iconBox li:hover a img , .skill .skillBox .iconBox li:focus a img {transform: scale(1.2); display: block; transition: all 0.4s ease-in; }



/* skill txt */
.skill .skillBox .iconBox li .hoverBox span {color: #474747; }
.skill .skillBox .iconBox li .hoverBox {width: 180%; font-size: 12px; color: #fff; letter-spacing: -1px; font-family: 'pretendard', sans-serif; font-weight: 100; text-align: left; margin: 100px 0 0 78px; transition: all 0.3s; line-height: 2; opacity: 0;  transition: all 0.4s ease;}
.skill .skillBox .iconBox li:hover .hoverBox {width: 180%; font-size: 12px; color: #fff; letter-spacing: -1px; font-family: 'pretendard', sans-serif; font-weight: 500; text-align: left; margin: 100px 0 0 70px; transition: all 0.3s; line-height: 2; opacity: 1;  transition: all 0.4s ease-in;}


.skill .skillBox .iconBox li:hover .hoverBox a span, .skill .skillBox .iconBox li:focus .hoverBox a span {color: #fdfdfd; font-size: 16px; font-weight: 300; font-family: 'pretendard', sans-serif;}


/* 가상선택자 line */
.skill .skillBox .iconBox li:nth-child(1):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */  }
.skill .skillBox .iconBox li:nth-child(2):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease ; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(3):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(4):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(5):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(6):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(7):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(8):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }
.skill .skillBox .iconBox li:nth-child(9):after{content: ""; position: absolute; left: 48px; top:92px; bottom: -10px;   background-color: #3a3a3a; transition: all 0.4s ease; opacity: 0; z-index: -1; height:0; border-style: dashed; border-width: 0 0 0 1px; /* 왼쪽만 선이 되도록 변경 및 대시 간격 조정 */ }



.skill .skillBox .iconBox li:nth-child(1):hover:after, .skill .skillBox .iconBox li:nth-child(1):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:49%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(2):hover:after, .skill .skillBox .iconBox li:nth-child(2):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:66%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(3):hover:after, .skill .skillBox .iconBox li:nth-child(3):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:59%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(4):hover:after, .skill .skillBox .iconBox li:nth-child(4):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:75%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(5):hover:after, .skill .skillBox .iconBox li:nth-child(5):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:54%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(6):hover:after, .skill .skillBox .iconBox li:nth-child(6):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:46%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(7):hover:after, .skill .skillBox .iconBox li:nth-child(7):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:68%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(8):hover:after, .skill .skillBox .iconBox li:nth-child(8):focus:after {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:52%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}
.skill .skillBox .iconBox li:nth-child(9):hover:after, .skill .skillBox .iconBox li:nth-child(10):focus:after  {content: ""; position: absolute; left: 48px; top:92px; bottom: -10px; height:54%; background-color: #3a3a3a; transition: all 0.4s ease-in; opacity: 1; border-style: dashed;}






/* work workBox */
.work {background: #000; position: relative;} 
.work .txtBox {color: rgba(41, 41, 41, 0.274); font-weight: 300; font-size: 300px; font-family: 'montserrat', sans-serif; text-align: center; position: absolute; padding-left: 280px;}
.work .workBox {padding-bottom: 140px; padding-top: 40px;}
.work .workBox .thumbnailBox {display: flex; padding: 6% 0; }

.work .workBox .thumbnailBox li{width: 40%; flex-shrink: 0 !important; padding: 0 30px;  position: relative;  }

.work .workBox .thumbnailBox li img {width: 100%; height: 100%; overflow: hidden;
/* + 글래스모피즘 효과 */ 
background: rgba(255, 255, 255, 0.1); backdrop-filter: blur( 5px );
box-shadow: 0 8px 32px 0 rgba(54, 35, 161, 0.37); border: 1px solid rgba(255, 255, 255, 0.11); 
border-radius: 50px; background: #00000027; box-shadow: 12px 12px 29px #b2b8c91c, -12px -12px 29px #f0f8ff23; background-color: rgba(0, 0, 0, 0.233); border-radius: 26px; backdrop-filter: blur(2.5px); box-shadow: 0px 35px 68px 0px, inset 0px 11px 28px 0px rgba(168, 168, 168, 0.24); z-index: 1050;}
/* 썸네일 버튼 */ 
.work .workBox .thumbnailBox li a { background-color: #000; width: 100px; height: 23px; position: absolute; z-index: 1100; transform: translate(-50%, -50%); top: 58%; left: 21%; padding: 10px 13px; text-align: center; border-radius: 30px; font-size: 14px; }
.work .workBox .thumbnailBox li a p {color: #fff;}
.work .workBox .thumbnailBox li a:hover {background-color: #00000060;}
/* 썸네일 기울기 */
.work .workBox .thumbnailBox li.a {transform: rotate(-8deg);}
.work .workBox .thumbnailBox li.b {transform: rotate(3deg);}
.work .workBox .thumbnailBox li.c {transform: rotate(-6deg);}




/* keyword2 keywordBox2 */
.keyword2 {height: 100px; background-color: rgb(0, 0, 0); position: relative; z-index: 1000;}
.keyword2 .keywordBox2{width: 100%; transform: rotate(-3deg);  border-bottom: #ffffffaf 1px solid; border-top: #ffffffa0 1px solid; background: #000000; padding: 25px 0 25px 75px; display: flex; position: absolute; z-index: 200; left: -22px;}
.keyword2 .keywordBox2 li {margin-right: 25px; display: flex; align-items: center; width: 100%;}
.keyword2 .keywordBox2 li img {animation: rotateAnimation 6s linear infinite;}
.keyword2 .keywordBox2 li p { font-size: 40px; font-weight: bold; color: #fff;}


/* 꽃 로테이션 */
@keyframes rotateAnimation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg); /* 360도 회전 */}
}


/* portpolioProcess */
.portfolioProcess {padding-bottom: 650px; position: relative; background: #000;}
.portfolioProcess .title {width: 100%; height: 100vh; font-size: 170px; line-height: 0.9; text-align: center; padding-top: 30vh; 
    /* 채크배경 */
    --gap: 1em;
    --line: 1px;
    --color: rgba(255, 255, 255, 0.152);
    background-image: linear-gradient(
    -90deg,
    transparent calc(var(--gap) - var(--line)),
    var(--color) calc(var(--gap) - var(--line) + 1px),
    var(--color) var(--gap)
    ),
    linear-gradient(
    0deg,
    transparent calc(var(--gap) - var(--line)),
    var(--color) calc(var(--gap) - var(--line) + 1px),
    var(--color) var(--gap)
    );
    background-size: var(--gap) var(--gap); 
}
    



.portfolioProcess .title p { background: linear-gradient(to bottom, #463cff, #ffffff03);
    /* 선형 그라데이션 설정: 왼쪽에서 오른쪽으로 이어진 그라데이션 */
    /* 시작 색상: 빨간색(#ff0000), 끝 색상: 녹색(#00ff00) */
    -webkit-background-clip: text; /* 텍스트에만 그라데이션 적용 */
    background-clip: text; /* 텍스트에만 그라데이션 적용 */
    color: transparent; /* 원본 텍스트 색상 투명하게 */
    font-size: 180px; /* 폰트 사이즈 설정 */
    font-weight: bold; /* 폰트 굵기 설정 */}


.portfolioProcess .ideaList {width: 59%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
/* 글래스모피즘 */
.portfolioProcess .ideaList li {width: 28%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur( 5px ); position: relative;
    box-shadow: 0 8px 15px 0 rgba(41, 34, 88, 0.158); border: 1px solid rgba(255, 255, 255, 0.315); 
    border-radius: 50px; background: #00000027; box-shadow: 12px 12px px #b2b8c91c, -12px -12px 29px #f0f8ff23;
    background-color: rgba(0, 0, 0,); border-radius: 26px; padding: 30px 40px;}





.portfolioProcess .ideaList li:nth-child(1) { margin-bottom: 250px; transform: rotate(-6deg); background: #ffee000c;}
.portfolioProcess .ideaList li:nth-child(2) { margin-top: 250px; transform: rotate(6deg); background: #00ff2a0c;} /* 2n: 2의 배수 */
.portfolioProcess .ideaList li:nth-child(3) { margin-bottom: 250px; transform: rotate(7deg); background: #ff00ea0c;}
.portfolioProcess .ideaList li:nth-child(4) { margin-top: 250px; transform: rotate(-6deg); background: #001aff0c;}
.portfolioProcess .ideaList li:nth-child(5) { margin-bottom: 250px; transform: rotate(-6deg); background: #ffee000c;}
.portfolioProcess .ideaList li:nth-child(6) { margin-top: 250px; transform: rotate(6deg); background:  #00ff2a0c;}
.portfolioProcess .ideaList li:nth-child(7) { margin-bottom: 250px; transform: rotate(6deg); background: #ff00ea0c;}
.portfolioProcess .ideaList li:nth-child(8) { margin-top: 250px; transform: rotate(-6deg); background: #001aff0c;}

.portfolioProcess .ideaList li h3 { border-radius: 10px; display: inline-block; color: #000; padding: 6px 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 28px; margin-bottom: 14px;}
.portfolioProcess .ideaList li:nth-child(1) h3 {background: #FFCC3D;}
.portfolioProcess .ideaList li:nth-child(2) h3 {background: #02952E;}  
.portfolioProcess .ideaList li:nth-child(3) h3 {background: #F040BF;}  
.portfolioProcess .ideaList li:nth-child(4) h3 {background: #3E78FF;}  
.portfolioProcess .ideaList li:nth-child(5) h3 {background: #FFCC3D;}
.portfolioProcess .ideaList li:nth-child(6) h3 {background: #02952E;}  
.portfolioProcess .ideaList li:nth-child(7) h3 {background: #F040BF;}  
.portfolioProcess .ideaList li:nth-child(8) h3 {background: #3E78FF;}  

.portfolioProcess .ideaList li p {margin-bottom: 25px; font-size: 16px; letter-spacing: -1; line-height: 1.6; font-weight: 300; font-family: 'pretendard', sans-serif;}
.portfolioProcess .ideaList li:nth-child(1) span {color:#FFCC3D; border-bottom: 1px solid #FFCC3D;}
.portfolioProcess .ideaList li:nth-child(2) span {color:#02952E; border-bottom: 1px solid #02952E;}
.portfolioProcess .ideaList li:nth-child(3) span {color:#F040BF; border-bottom: 1px solid #F040BF;}
.portfolioProcess .ideaList li:nth-child(4) span {color:#3E78FF; border-bottom: 1px solid #3E78FF;}
.portfolioProcess .ideaList li:nth-child(5) span {color:#FFCC3D; border-bottom: 1px solid #FFCC3D;}
.portfolioProcess .ideaList li:nth-child(6) span {color:#02952E; border-bottom: 1px solid #02952E;}
.portfolioProcess .ideaList li:nth-child(7) span {color:#F040BF; border-bottom: 1px solid #F040BF;}
.portfolioProcess .ideaList li:nth-child(8) span {color:#3E78FF;  border-bottom: 1px solid #3E78FF;}

/* hover */
.portfolioProcess .ideaList li:nth-child(1) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s; transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(1):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s; transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(2) .hoverImg {position: absolute;  opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s; transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(2):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(3) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s; transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(3):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(4) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(4):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(5) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(5):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(6) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(6):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(7) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(7):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(8) .hoverImg {position: absolute; opacity: 0; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(0.8); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}
.portfolioProcess .ideaList li:nth-child(8):hover .hoverImg { opacity: 1; transition: all 0.3s ease; transition-duration: 0.5s;  transform: translate(-50%, -50%) scale(1); /* 초기 크기를 80%로 설정 */ top: 0; left: 0;}








/* 폴리곤, 아이콘1, 아이콘2, J, H, E, 폴리곤 */
.portfolioProcess .bgicon img:nth-child(1) {position: absolute; top: 60%; left: 88%; transform: rotate(-3deg); animation: rotateAnimation 6s linear infinite; width: 50px;}   
.portfolioProcess .bgicon img:nth-child(2) {position: absolute; top: 20%; left: 85%; transform: rotate(-3deg); animation: rotateAnimation 6s linear infinite; width: 65px;}
.portfolioProcess .bgicon img:nth-child(3) {position: absolute; top: 50%; left: 4%; transform: rotate(-3deg); animation: rotateAnimation 6s linear infinite; width: 150px;}
.portfolioProcess .bgicon img:nth-child(4) {position: absolute; top: 27%; left: 10%; transform: rotate(-3deg); animation: shake 6s infinite; width: 90px;}
.portfolioProcess .bgicon img:nth-child(5) {position: absolute; top: 70%; left: 35%; transform: rotate(-3deg); animation: shake 6s infinite; width: 80px;}
.portfolioProcess .bgicon img:nth-child(6) {position: absolute; top: 43%; left: 90%; transform: rotate(-3deg); animation: shake 6s infinite; width: 65px;}
.portfolioProcess .bgicon img:nth-child(7) {position: absolute; top: 43%; left: 48%; transform: rotate(-3deg); animation: rotateAnimation 6s linear infinite; width: 50px;}


/* btn */
.portfolioProcess .btn p {color: #fff; top: 87%; left: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 1000; padding: 15px 30px 18px; border: 1px solid #fff; border-radius: 30px; transition: all 0.3s ease;}
.portfolioProcess .btn p:hover, .portpolioProcess .btn p:focus {color: #353535; border: 1px solid #353535;  transition: all 0.3s ease-in;}

@keyframes rotateAnimation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg); /* 360도 회전 */}
}
@keyframes shake {
    0% { transform: rotate(-10deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}

/* .footer */

.footer .footerBg {position: relative; width: 100vw; height: 100vh; overflow: hidden; z-index: 300; }
.footer .footerBg .footerVideo { position: absolute;  width: 100%; height: 100%; object-fit: cover; object-fit: cover; }
.footer .txt {position: absolute; color: #fff; font-size: 50px; z-index: 310; bottom: 470px; left: 0;   font-family: 'montserrat', sans-serif; font-weight: 600; transform: translateX(75%); text-align: center; line-height: 1.8;}
.footer .txt p {font-size: 30px; font-weight: 500; color: #c2c2c2;}
.footer .footerBg .goTop { position: absolute; right: 80px; bottom: 140px; font-size: 48px; color: #fff; border: #fff solid 1.5px; border-radius: 50px; padding: 0 8px; background: #00000054;  backdrop-filter: blur( 4px );}