@charset "utf-8";
/* 프로젝트 내용 시작 */
* 
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.main_visual {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: end;
    position: relative;
    overflow: hidden;
    background-color: #000;
    background-image: none;
    text-align: center;
}
.main_visual .inner, .scroll_section .inner {
    max-width: 1800px;
    width: calc(100% - 20px);
    height: 100%;
    margin: 0 auto;
}

/* 떨어지는 도형 */
.container {
    position: relative;
    /* left: 10%; */
    max-width: 1600px;
    margin: 0 auto;
    /* width: 80%; */
    height: 62vh;
    background-color: #000;
    overflow: hidden;
    z-index: 1;
}
.draggable-text {
    position: absolute;
    padding: 16px 32px;
    border: 1px solid #fff;
    border-radius: 40px;
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    text-align: center;
    cursor: grab;
    white-space: nowrap;
    z-index: 1;
}


.main_visual h3 {
    font-size: 8.5vw;
    font-weight: 700;
    color: #fff;
    transition: transform 0.3s ease, top 0.3s ease, color 0.3s ease;
    animation: reveal 3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    font-family: 'Archivo',sans-serif;
}
@keyframes reveal {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
}
.main_visual img {
    max-width: 798px;
    width: 100%;
    margin-top: 40vh;
}

.service_field {
    background-color: #000;
     /* background: linear-gradient(to bottom, #000 0%, rgba(2, 0, 17, 0.7)100%); */
     background: linear-gradient(to bottom, #000000 30%, #320160 170%);
    /* height: 100vh; */
}

.titlee {
    text-align: center;
    font-size: 100px;
    padding-bottom:100px;
    padding-top: 200px;
    font-family: 'Archivo',sans-serif;
    font-weight: 700;

}

.services-section {
        width: 90%;
        max-width: 1200px; /* 최대 너비 제한 */
        margin: 0 auto;
    }

    /* 섹션 헤더 (제목, 부제목) 
    */
    .section-header {
        text-align: center;
        margin-bottom: 50px;
    }
    .section-header h2 {
        font-size: 3.35vw;
        font-weight: bold;
        font-family: 'Pretendard',sans-serif;
        margin: 0 0 10px 0;
        color: #ffffff;
    }
    .section-header p {
        font-size: 24px;
        color: #ffffff;
        margin: 0;
        font-weight: 500;
        font-family: 'Pretendard',sans-serif;
    }



    /* [핵심] 2x2 그리드 컨테이너 (ul) 
    */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 1:1 비율의 2열 그리드 */
        gap: 24px; /* 그리드 아이템 사이의 간격 */
        
        list-style: none;
        padding: 0;
        margin: 0;
        padding-bottom: 100px;
    }

    /* [핵심] 그리드 아이템 (li) 
    */
    .services-grid li {
        /* 이미지의 보라색 박스 스타일 */
        background-color: #130c21; 
        border-radius: 16px; /* 둥근 모서리 */
        overflow: hidden; /* 자식 요소(이미지)가 둥근 모서리를 넘지 않게 함 */

        /* [핵심] 내부 요소를 가로로 배치 (이미지 + 텍스트) */
        display: flex;
        
        /* 호버 시 살짝 떠오르는 효과 (선택 사항) */
        transition: transform 0.3s ease;
        height: 400px;
    }
    
    .services-grid li:hover {
        transform: translateY(-5px);
    }

    /* 그리드 아이템 내부의 이미지 
    */
    .services-grid li img {
        display: block;
        width: 45%; /* 박스 너비의 45% 차지 */
        height: 100%; /* 높이를 꽉 채움 */
        object-fit: cover; /* 이미지가 비율을 유지하며 꽉 차게 */
    }

    /* 그리드 아이템 내부의 텍스트 영역 
    */
    .service-content {
        flex: 1; /* 남은 공간(55%)을 모두 차지 */
        padding: 30px;
        font-family: 'Pretendard';
    }
    .service-content h3 {
        font-size: 32px;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px;
        color: #ffffff;
    }
    .service-content p {
        font-size: 16px;
        color: #b0b0d0;
        line-height: 1.6;
        margin: 0 0 8px 0;
 color: #ffffff;
    }

    .service-section {
            position: relative;
            height: 420vh;
            /* 애니메이션 재생에 필요한 스크롤 길이 (조절 가능) */
        }

        /* 3. 애니메이션 '무대' (스티키) 
      - 이 요소가 화면에 'position: sticky'로 고정됩니다.
      - 모든 애니메이션은 이 '무대' 안에서 일어납니다.
    */
        .sticky-stage {
            position: sticky;
            top: 0;
            height: 100vh;
            /* 화면 높이를 꽉 채움 */
            width: 100%;
            overflow: hidden;
            /* 무대 밖으로 나가는 요소 숨김 */

            /* 모든 자식 요소를 중앙에 배치하기 위한 flex (편의용) */
            display: grid;
            place-items: center;
        }

        /* 4. 애니메이션 대상 (텍스트, 이미지) 
      - '무대' 안에서 절대 좌표(absolute)로 배치됩니다.
    */
        .text-1,
        .text-2 {
            position: absolute;
            width: 100%;
            text-align: center;
font-family: 'Archivo';
            /* 텍스트 외곽선 (디자인 참고) */
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        /* "Service Field" 텍스트 */
        .text-1 {
            font-size: 5vw;
            /* 화면 크기에 반응하는 폰트 */
            font-weight: 700;
            /* JS가 이 요소를 제어하므로 초기상태(scale:1, opacity:1)를 둠 */
        }

        /* "우리는 단순한..." 텍스트 */
        .text-2 {
            font-size: 2vw;
            font-weight: 500;
            line-height: 1.6;

            /* [중요] 초기 상태: 숨김 */
            opacity: 0;
        }

        /* 이미지 아이템들 */
        .image-item {
            position: absolute;
            border-radius: 12px;
            overflow: hidden;
            border-radius: 50%;
            box-shadow: 0 0 50px 5px rgba(180, 80, 255, 0.5);

            /* [중요] 초기 상태: 숨김 (JS가 제어) */
            opacity: 0;

            /* 이미지 주변 보라색 Glow 효과 */
            /* box-shadow: 0 0 20px 5px rgba(180, 80, 255, 0.5); */
        }

        .image-item img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 50%;
        }

        /* [배치] 각 이미지의 위치와 크기 (이미지 참고) */
        /* (이 값들은 디자인에 맞게 자유롭게 조절하세요) */
        #img-1 {
            top: 18%;
            left: 19%;
            width: 12vw;
            height: 12vw;
        }

        #img-2 {
            top: 45%;
            left: 5%;
            width: 15vw;
            height: 15vw;
        }

        #img-3 {
            top: 65%;
            left: 28%;
            width: 12vw;
            height: 12vw;
        }

        #img-4 {
            top: 20%;
            right: 19%;
            width: 12vw;
            height: 12vw;
        }

        #img-5 {
            top: 35%;
            right: 5%;
            width: 15vw;
            height: 15vw;
        }

        #img-6 {
            top: 64%;
            right: 20%;
            width: 14vw;
            height: 14vw;
        }

    /* [참고] 반응형: 모바일 화면 (예: 768px 이하)
    */
    @media (max-width: 768px) {
        .services-grid {
            /* 2열이 아닌 1열로 변경 */
            grid-template-columns: 1fr; 
        }

        .services-grid li {
            /* 모바일에선 이미지와 텍스트를 세로로 쌓음 */
            flex-direction: column;
            height: 520px;
        }

/* .section-header h2 {
    font-size: 6vw;
} */
    }

@media screen and (max-width: 800px) {
    /* #about_section02 .sc3_container_right_textbox{
width: 48% !important;
margin: 0 !important;
padding: 0 2% 2% 0;
      } */

    #about_banner h1 {
font-size: 1.8rem;
    }
    #about_banner .quick_estimate2 {
font-size: 1.2rem;
    }
}


@media screen and (max-width: 480px) {
    #about_banner {
flex-direction: column;
    }
    #about_banner h1 {
font-size: 2rem;
    }
    #about_banner h1.m_view {
display: none;
    }
    #about_banner .quick_estimate2 {
font-size: 1.5rem;
padding: 10px 0;
    }
}

.project_section {
    background-color: #fff;
    padding-bottom: 1px;
}
.project_section .inner,
.counter_wrap.inner {
    max-width: 1800px;
    width: calc(100% - 120px);
    margin: 0 auto;
}
.inner.list_wrap {
    margin: 0 auto 7.5rem;
}
.title_wrap {
    padding: 12.5rem 0 7.5rem;
}
.title_wrap h3 {
    font-size: 5.625rem;
    padding-bottom: 3.75rem;
    font-family: 'Bricolage Grotesque-Bold';
}
.button_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.button_wrap button {
    border: 1px solid #111;
    padding: 10px 20px;
    border-radius: 40px;
    background-color: transparent;
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Bricolage Grotesque-Regular';
}
.button_wrap button.on {
    background-color: #1500ff;
    border: 1px solid #1500ff;
    color: #fff;
}

.list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 3.75rem;
}
.list .item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 48.5%;
    max-height: 590px;
    height: 32vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: end;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.list .item::after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
    transition: all 0.2s linear;
}
.list .item .item_title {
    font-size: 6rem;
    font-family: 'Pretendard-Bold';
    letter-spacing: calc(-0.05 * 3rem);
    position: relative;
    z-index: 2;
    bottom: 0;
    transition: all 0.2s linear;
}

.list .item .tag {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    bottom: 0;
    z-index: 3;
    transition: all 0.2s linear;
}
/* .list .item:hover::after,
.list .item:hover .item_title, 
.list .item:hover .tag {
    bottom: 0;
} */
 
.list .item .tag span {
    font-size: 2.125rem;
    letter-spacing: calc(-0.05 * 1.25rem);
    padding: 12px 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    position: relative;
    z-index: 2;
    word-break: keep-all;
}

.more {
    display: flex;
    justify-content: center;
    /* margin-top: 5%;
    margin-left: 43%; */
    /* margin: 7.5rem ; */
    padding: 20px 40px;
    border-radius: 80px;
    font-size: 2.375rem;
    background-color: #fff;
    border: 2px solid #000;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Archivo',sans-serif;
    font-weight: 700;
    margin-bottom: 100px;
            max-width: 20%;
        align-items: center;
        margin: 0 auto;
        margin-top: 40px;
}
.more:hover {
    background-color: #000;
    color: #fff;
}
@media (max-width:1024px) {

     .list .item .item_title {
        font-size: 4rem;}

        .list .item .tag span {
        font-size: 1.5rem;
}
    .main_visual .inner {
        width: calc(100% - 10px);
    }

    .main_visual h3 {
        /* font-size: 100px */
        /* padding-top: 20px; */
    }
 
    .container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto  ;
        height: 60vh;
    }



    .text-1 {
        font-size: 7vw;
    }

    .text-2 {
        font-size: 2.5vw;
    }

    #img-1 {
    top: 17%;
    left: 11%;
    width: 180px;
    height: 180px;
}

#img-2 {
    top: 45%;
    left: 2%;
    width: 150px;
    height: 150px;
}

#img-3 {
    top: 63%;
    left: 20%;
    width: 110px;
    height: 110px;
}

#img-4 {
    top: 20%;
    right: 19%;
    width: 89px;
    height: 89px;
}

#img-5 {
    top: 35%;
    right: 5%;
    width: 160px;
    height: 160px;
}

#img-6 {
    top: 60%;
    right: 12%;
    width: 150px;
    height: 150px;
}
.service-content h3{
    font-size: 20px;
}
.service-content p {
    font-size: 13px;
}
.services-grid li img{
    width: 40%;
}
.more {
        max-width: 30%;
        align-items: center;
        margin: 0 auto;
        margin-top: 40px;
}
.section-header p {
    font-size: 2vw;
}
}

@media (max-width:768px) {
    .main_visual .inner {
        width: calc(100% - 10px);
    }

    .main_visual h3 {
        font-size: 9.2vw;
        /* padding-top: 20px; */
    }
.section-header p {
    font-size: 3vw;
}
.section-header h2 {
    font-size: 5vw;
}

    .container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: 70vh;
    }

    .text-1 {
        font-size: 7vw;
    }

    .text-2 {
        font-size: 4vw;
    }
    .list .item .tag span {
        font-size: 1.5rem;
    }

    #img-1 {
    top: 20%;
    left: 13%;
    width: 100px;
    height: 100px;
}

#img-2 {
    top: 55%;
    left: 1%;
    width: 120px;
    height: 120px;
}

#img-3 {
    top: 77%;
    left: 18%;
    width: 89px;
    height: 89px;
}

#img-4 {
    top: 12%;
    right: 15%;
    width: 89px;
    height: 89px;
}

#img-5 {
    top: 27%;
    right: 5%;
    width: 130px;
    height: 130px;
}

#img-6 {
    top: 59%;
    right: 7%;
    width: 120px;
    height: 120px;
}

.list .item {
    border-radius: 0;
}
.titlee {
    font-size: 78px;
}
  .main_visual .inner {
        width: calc(100% - 30px);
    }
    .list {
    align-items: center;
    flex-direction: column;
}
.list .item {

    height: 55vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: end;
    padding: 2.5rem;
width: 100%;
    /* border-radius: 20px;                      */
}

.list .item .item_title {
    font-size: 4.6rem;
}
        .services-grid li img {
            width: 100%; /* 너비 100% */
            height: 200px; /* 고정 높이 (예시) */
        }
        .more {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
        max-width: 50%;
    align-items: center;
    margin: 0 auto;
    margin-top: 40px;
}
}
@media (max-width:480px) {
    .main_visual .inner {
        width: calc(100% - 30px);
    }

    .main_visual h3 {
     font-size: 44px;
     padding-left: 10px;
     padding-right: 10px;
    }
        .draggable-text {
        padding: 8px 13px;
        font-size: 14px;
    }
    .section-header p {
        font-size: 20px;
    }

    .container {
        height: 420px;
    }
.titlee {
    font-size: 55px;
}

    .text-1 {
        font-size: 7vw;
    }

    .text-2 {
        font-size: 4vw;
    }

    #img-1 {
    top: 20%;
    left: 13%;
    width: 100px;
    height: 100px;
}

#img-2 {
    top: 55%;
    left: 1%;
    width: 120px;
    height: 120px;
}

#img-3 {
    top: 77%;
    left: 18%;
    width: 89px;
    height: 89px;
}

#img-4 {
    top: 12%;
    right: 15%;
    width: 89px;
    height: 89px;
}

#img-5 {
    top: 27%;
    right: 5%;
    width: 130px;
    height: 130px;
}

#img-6 {
    top: 59%;
    right: 7%;
    width: 120px;
    height: 120px;
}
.section-header h2 {
    font-size: 39px;
}
.project_section .inner{
    width: calc(100% - 20px);
}
/* .list .item {
    justify-content: flex-start;
} */

.list {
    align-items: center;
    flex-direction: column;
}
.list .item {

    height: 55vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: end;
    padding: 2.5rem;
width: 100%;
    border-radius: 0px;
}

.project_section .inner {
    width: calc(100% - 20px);
}
.list .item .tag span{
    padding: 10px 15px;
}
.list .item .item_title {
    font-size: 3rem;
}


}

@media (max-width:360px) {
    .main_visual .inner {
        width: calc(100% - 10px);
    }

    .main_visual h3 {
        font-size: 37px;
        /* padding-top: 20px; */
    }

    .list {
        row-gap: 1.75rem;
    }

    .list .item {
        justify-content: center;
    }


    .text-1 {
        font-size: 7vw;
    }

    .text-2 {
        font-size: 4vw;
    }

    #img-1 {
    top: 20%;
    left: 13%;
    width: 100px;
    height: 100px;
}

#img-2 {
    top: 55%;
    left: 1%;
    width: 120px;
    height: 120px;
}

#img-3 {
    top: 77%;
    left: 18%;
    width: 89px;
    height: 89px;
}

#img-4 {
    top: 12%;
    right: 15%;
    width: 89px;
    height: 89px;
}

#img-5 {
    top: 27%;
    right: 5%;
    width: 130px;
    height: 130px;
}

#img-6 {
    top: 59%;
    right: 7%;
    width: 120px;
    height: 120px;
}

.section-header h2 {
    font-size: 30px;
}

.section-header p{
    font-size: 16px;
}
.list {
    align-items: center;
    flex-direction: column;
}
.list .item {

    height: 55vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: end;
    padding: 2.5rem;
width: 100%;
    /* border-radius: 20px;                      */
}

.project_section .inner {
    width: calc(100% - 20px);
}
.list .item .tag span{
    padding: 10px 15px;
}

.more {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
        max-width: 60%;
    align-items: center;
    margin: 0 auto;
    margin-top: 40px;
}
}