@charset "utf-8";
/* --------------------------------------------------
index
----------------------------------------------------- */
/* *** index *** */
#indexCon { position: relative; padding-top: 170px; }
#indexCon .visual { position: relative; background: url(../img/index/mainVisual.jpg) no-repeat center; background-size: cover; }
#indexCon .visual .outline { display: flex; align-items: center; padding: 0 1rem; height: 900px; max-width: 1800px; }
#indexCon .visual ul { display: flex; flex-flow: column; justify-content: center; gap: 1rem; padding: 1rem; width: 40%; height: 100%; background-color: rgba(255,255,255,.5); backdrop-filter: blur(5px); }
#indexCon .visual ul li { position: relative; padding-left: 3rem; }
#indexCon .visual ul li a { display: block; padding: 1rem 0; }
#indexCon .visual ul li a .icon { position: absolute; left: 0; top: 1rem; }
#indexCon .visual ul li a .icon img { max-width: 2.5rem; filter: grayscale(1); transition: all .3s cubic-bezier(0.76, 0, 0.24, 1); }
#indexCon .visual ul li a h2 { font-size: clamp(22px, 2.4vw, 40px); transition: all .3s cubic-bezier(0.76, 0, 0.24, 1); }
#indexCon .visual ul li a h2 span.char { transform: skew(0deg, -3deg); }
#indexCon .visual ul li a h6 { padding-left: 0.3rem; transition: all .3s cubic-bezier(0.76, 0, 0.24, 1); }
#indexCon .visual ul li a:hover .icon img { filter: grayscale(0); text-shadow: 5px 5px 10px rgba(255,255,255,.8); }
#indexCon .visual ul li a:hover h2 { color: var(--secondClr1); text-shadow: 5px 5px 20px rgba(255,255,255,.8); }
#indexCon .visual ul li a:hover h6 { color: var(--secondClr1); text-shadow: 5px 5px 20px rgba(255,255,255,.8); }
#indexCon .textDeco { position: relative; padding: 3rem 0 0; overflow: hidden; }
#indexCon .textDeco p { position: relative; font-size: 10rem; color: transparent; font-family: 'PreGOV-Bo'; font-weight: 700; -webkit-text-stroke: 2px #d9d9d9; white-space: nowrap; animation: txtAni 40s linear infinite; line-height: 1; letter-spacing: 5px; user-select: none; }
@keyframes txtAni {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-200%); }
}
#indexCon .center { position: absolute; bottom: 1.5rem; left: 50%; transform: translate(-50%, 0); backdrop-filter: blur(10px); }
#indexCon .center .down { position: relative; width: 50px; height: 80px; border-radius: 22px; background-color: transparent; border: 4px solid #fff; overflow: hidden; }
#indexCon .center .down:before { position: absolute; content: ""; top: 10px; left: 50%; transform: translate(-50%, 0); width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: animate 1s linear infinite; }
#indexCon .center .down:after { position: absolute; content: ""; top: 5px; left: 50%; transform: translate(-50%, 0); width: 6px; height: 15px; border-radius: 3px; background: #fff; }
@keyframes animate {
    0% { transform: translate(-50%, 20px); opacity: 0; }
    80% { transform: translate(-50%, 60px); opacity: 1; }
    100% { transform: translate(-50%, 100px); opacity: 1; }
}
#indexCon { background-color: #fff; }
#indexCon .conWrap { position: relative; padding: 4rem 1rem 6rem; background-color: #fff; }
#indexCon .conWrap .postList { position: relative; display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 3rem 1.5rem; }
#indexCon .conWrap .postList .post { position: relative; width: calc(33.3333% - 3rem / 3); height: 550px; overflow: hidden; border-radius: 1rem; transform: translateY(50px); opacity: 0; transition: all 0.75s linear; }
#indexCon .conWrap .postList .post.active { transform: translateY(0); opacity: 1; }
#indexCon .conWrap .postList .post:hover { box-shadow: 10px 10px 15px rgba(0,0,0,.3); }
#indexCon .conWrap .postList .post a { position: relative; display: block; height: 100%; }
#indexCon .conWrap .postList .post a .postImg { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 10; }
#indexCon .conWrap .postList .post a .postImg::before { position: absolute; content: ""; bottom: -200px; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #000 40%, transparent); transition: all .3s linear; box-sizing: border-box; z-index: 20; }
#indexCon .conWrap .postList .post a:hover .postImg::before { bottom: 0; }
#indexCon .conWrap .postList .post a .postImg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(0); transition: all .3s linear; }
#indexCon .conWrap .postList .post a:hover .postImg img { transform: translateY(-60px); filter: blur(5px); }
#indexCon .conWrap .postList .post a .detail { position: absolute; left: 0; bottom: -120px; padding: 1rem; width: 100%; transition: all .3s linear; z-index: 100; }
#indexCon .conWrap .postList .post a:hover .detail { bottom: 0; }
#indexCon .conWrap .postList .post a .detail h3 { position: relative; margin-bottom: 0.5rem; padding-bottom: 0.5rem; color: #fff; }
#indexCon .conWrap .postList .post a .detail h3::after { position: absolute; content: ''; left: 0; bottom: 0; width: 2rem; height: 2px; background-color: #fff; }
#indexCon .conWrap .postList .post a .detail .info { position: relative; margin-bottom: 1rem; color: #fff; line-height: 1.1; }
#indexCon .conWrap .postList .post a .detail .con { color: #fff; width: 100%; height: 96px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
@media all and (max-width: 1920px){
    #indexCon .visual .outline { height: 800px; }
}
@media all and (max-width: 1280px){
    #indexCon .visual .outline { height: 600px; }
    #indexCon .visual ul li a .icon { top: 0rem; }
    #indexCon .visual ul { width: 50%; }
    #indexCon .visual ul li a { padding: 0.5rem 0; }
    #indexCon .visual ul li a h2 { font-size: clamp(22px, 2.4vw, 36px); }
}
@media all and (max-width: 1024px){
    #indexCon .visual .outline { height: 500px; }
    #indexCon .conWrap .postList .post { height: 450px; }
    #indexCon .conWrap .postList .post a .detail { bottom: -100px; }
    #indexCon .conWrap .postList .post a .detail .con { height: 82px; }
}
@media all and (max-width: 768px){
    #indexCon { padding-top: 100px; }
    #indexCon .visual .outline { height: 500px; }
    #indexCon .visual ul { width: 60%; }
    #indexCon .conWrap .postList { gap: 2.5rem 1.2rem; }
    #indexCon .conWrap .postList .post { width: calc(50% - 1.2rem / 2); height: 450px; }
    #indexCon .conWrap .postList .post a .postImg::before { bottom: -30px; }
    #indexCon .conWrap .postList .post a .detail { bottom: 0; }
    #indexCon .textDeco p { font-size: 120px; }
}
@media all and (max-width: 599px){
    #indexCon .visual ul { width: 70%; }
    #indexCon .conWrap .postList .post { height: 400px; }
}
@media all and (max-width: 480px){
    #indexCon .visual ul { width: 100%; }
    #indexCon .center { bottom: 0.75rem; }
    #indexCon .center .down { width: 40px; height: 60px; border-radius: 18px; border: 3px solid #fff; }
    #indexCon .center .down:before { top: 10px; width: 6px; height: 6px; }
    #indexCon .center .down:after { top: 5px; width: 6px; height: 10px; }
    @keyframes animate {
        0% { transform: translate(-50%, 10px); opacity: 0; }
        80% { transform: translate(-50%, 40px); opacity: 1; }
        100% { transform: translate(-50%, 70px); opacity: 1; }
    }
    #indexCon .conWrap .postList { padding: 0 1.5rem; }
    #indexCon .conWrap .postList .post { width: 100%; height: 400px; }
    #indexCon .textDeco p { font-size: 90px; animation: txtAni 20s linear infinite; }
}