/* BASIC css start */
#contentWrapper {
    padding: 0;
}


#main .main-logo {
    display:none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9994;
    width: 40%;
    pointer-events: none;
}

#main .main-logo img {
    width: 100%;
}


#main-sw {
    width: 100%;
}

#main-sw .sw-ma {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#main-sw .sw-ma .swiper-wrapper {
    width: 100%;
    height: 100%;
}

#main-sw .sw-ma .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    z-index: auto !important;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

#main-sw .sw-ma .swiper-wrapper .swiper-slide {}

#main-sw .sw-ma .swiper-wrapper .swiper-slide .ass {
    width: 100%;
    height: 100%;
    display: block;
}

#main-sw .sw-ma .swiper-wrapper .swiper-slide .ass * {
    width: 100%;
    height: 100%;

}

#main-sw .sw-ma .swiper-wrapper .swiper-slide img,
#main-sw .sw-ma .swiper-wrapper .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#main {
    width: 100%;
    font-size:0;
}

#main .part-1 {
    width: 100%;
    position: relative;
    z-index: 2;
    background: var(--back1);
}

#main .part-1 img,
#main .part-1 video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

#main .part-1 h2 {
    font-size: 20px;
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
    z-index: 2;
}


#main .part-2 {
    width: 100%;
    position: relative;
    z-index: 2;
    background: var(--back1);
}

#main .part-2 .bx {
    width: 100%;
    position: relative;
}

#main .part-2 .bx a {
    width: 100%;
    display: block;
}

#main .part-2 .bx h2 {
    font-size: var(--f-1);
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
    z-index: 2;
}

#main .part-2 img,
#main .part-2 video {
    width: 100%;
}

#main .part-3 {
    width: 100%;
    height: 100vh;
    position: relative;
}

#main .part-3 .background-sds {
    background: url(http://magjay.co.kr///web/2025_web/main/intro11m.jpg);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;

}

#main .part-3 a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    z-index: 2;

}

#main .part-3 .text-box {
    position: absolute;
    left: var(--p-1);
    bottom: var(--p-2);
    text-align: left;
}

#main .part-3 .text-box h2 {
    font-size: var(--f-4);
    color: #fff;
    margin: 0 0 var(--p-1);
}

#main .part-3 .text-box p {
    font-size: var(--f-3);
    color: #fff;
}

#main .part-4 {
    width: 100%;
    position: relative;
    z-index: 2;
    font-size: 0;
    background: var(--back1);
}

#main .part-4 h2 {
    font-size: var(--f-1);
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
    z-index: 2;
}

#main .part-4 .bx {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

#main .part-4 .bx a {
    width: 100%;
    display: block;
}

#main .part-4 img,
#main .part-4 video {
    width: 100%;
    transition: all var(--speed2);
    < !--filter: grayscale(1-->);
}

#main .part-4 .bx:hover img,
#main .part-4 .bx:hover video {
    filter: grayscale(0);
}

#main .vjs-controls-disabled {
    width: 100%;
    height: auto;
}
body{height:max-content; position:relative;}
.intro{height:100vh;}
.intro-wrap{overflow:hidden;}
.intro .swiper-wrapper{height:100%;}
.intro .swiper-wrapper .swiper-slide{height:100%; width:100%;}
.intro1 a{
    display:block;
    background-image: url('http://magjay.co.kr///web/2025_web/main/intro11m.jpg'); /* 배경 이미지 설정 */
    background-size: cover; /* 요소 크기에 맞게 가득 채우기 */
    background-position: center; /* 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 없음 */
    width: 100%; /* 부모 요소 크기에 맞게 */
    height: 100vh; /* 화면 전체 높이 */  
}
.intro1 a video{width:100%; height:100vh;}
.intro2 a{display:block;
    background-image: url('/design/jjackiec/2025_renewal/0407/intro_mo2.jpg'); /* 배경 이미지 설정 */
    background-size: cover; /* 요소 크기에 맞게 가득 채우기 */
    background-position: center; /* 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 없음 */
    width: 100%; /* 부모 요소 크기에 맞게 */
    height: 100vh; /* 화면 전체 높이 */    
}
#header-top .center{display:none;}

/* BASIC css end */