@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */


/* main 준비중 */
header,footer{display:none !important;}
.ready{display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:440rem; width:80%; z-index:1;}
.readyBg{display:block; width:100%; height:100vh; object-fit:cover; opacity:.5;}




 
/* 1) main visual */
[data-mainVisual]{position:relative; height:100vh;
    *{box-sizing:border-box; word-break:keep-all;}
    .visual-list{height:100%;}
    /* img */
    .bg{overflow:hidden; display:block; position:absolute; left:0; top:0; height:100%; width:100%; background:#000;}
    .bg img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:4.5s ease;}
    /* txt */
    .txt{display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; margin:auto; z-index:5; max-width:1400rem; width:92%; height:100%; color:#fff;}
    .txt h1{font-size:var(--fs60); line-height:1.4; text-align:center; opacity:0; transform:translateY(30rem); transition:1.5s ease;}
    /* active */
    .swiper-slide-active{
        .bg img{transform:scale(1);}
        .txt h1{opacity:1; transform:translateY(0);}
    }
    /* control */
    .ctrl{display:flex; justify-content:center; align-items:center; gap:10rem; position:absolute; z-index:10; bottom:20rem; left:50%; transform:translateX(-50%);
        .swiper-page{display:flex; --swiper-theme-color:#fff; --swiper-pagination-bullet-inactive-color:#eee; width:auto;}
        button{}
    }
}
[data-mainVisual] button{--sizeWid:60rem; opacity:0.6; display:flex; justify-content:center; align-items:center; width:var(--sizeWid); height:var(--sizeWid); background-color:transparent; transition:opacity 0.3s ease;}
[data-mainVisual] button[class*="swiper_"]{color:#fff;}
[data-mainVisual] button[class*="swiper_"] span{font-size:0;}
[data-mainVisual] button[class*="swiper_"] i{font-size:25rem;}
[data-mainVisual] button:hover{opacity:1;}