@font-face {
    font-family: "codec";
    src: url("/assets/fonts/codec.woff2") format("woff2");
}

body {
    margin: 0%;
}

:root{
    --width: 99vw;
}

main {
    width:100%;
    overflow:visible;

    transition: background-color 1s ease; /* 배경색이 1초 동안 부드럽게 변경 */
}

.box-holder {
    position: relative;
    width: 99.1vw;
    height: 3300px;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* ✨ #box가 세로로 늘어나는 것을 막아줘! ✨ */
}

#box {
    position: fixed;
    top: 25%;
    transform: translateX(-50%); /* 가운데 정렬 */
    width: 36vw;
    height: 45vh;
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

#box-text{    
    font-family: 'codec';
    position: fixed; /* 화면에 고정 */
    top: 20%; /* 화면 세로 중앙 */
    left: 5%;
    transform: translate(-50%, -50%); /* 정확한 중앙 배치 */
    font-size: clamp(22px, 25vw, 38px);
    color: white;
    text-align: left; /* 왼쪽 정렬로 변경 */
    opacity: 0; /* 초기에는 보이지 않음 */
    z-index: 1000; /* 다른 요소들 위에 표시 */
    width: 100%; /* 너비 설정 */
    max-width: 1000px; /* 최대 너비 제한 */
    transition: opacity 0.3s ease-out;
}

.box-t{
    font-family: 'pretendard';
    font-size: clamp(13px, 15vw, 22px);
}

.bar-top {
    font-family: 'codec';
    position: sticky;
    top: 2%; 
    left: 0;
    width: 100%;
    font-weight: 200px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 0;
    text-align: center;
    line-height: 1;
    background-color: transparent;
    z-index: 1;
}

.bar-top p {
    margin: 5px;
    font-size: 150px;
    display: inline-block;
    animation: marquee 70s linear infinite;
}

.bar-bottom {
    font-family: 'codec';
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    font-weight: 200px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 0;
    text-align: center;
    line-height: 1;
}
.bar-bottom p {
    margin: 5px;
    font-size: 150px;
    display: inline-block;
    animation: marquee 70s linear infinite;
}


.main-position{
    margin-top: -190px;
}


.bar-top,
.bar-bottom{
    width: var(--width);
}

.swiper-container{
    width: 90%;
    margin: auto;
}

.contactSlider {
    overflow: hidden;
    padding: 10vh 0
}

.contactSlider p,
.contactSlider span{
    font-size: 24px;
    word-spacing: -0.5px;
    line-height: 1.5;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Pretendard' !important;
}

.contactSlider2 {
    width: 100%;
    overflow: hidden;
    ;
    color: #666;
    opacity: .5;
    margin-top: 40px
}

.contactSlider2 p {
    font-size: 24px;
    margin-right: 40px;
    text-transform: uppercase;
    font-family: 'Pretendard';
}

.contactSlider .swiper-slide {
    cursor: grab;
    width: 33%;

    border-radius: 24px;
    background: #fff;
    padding: 48px;
}

.contactSlider2 .swiper-slide {
    width: auto
}



@keyframes marquee {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(-0%); }
}