@charset "UTF-8";

.forWeb {display: block;}
.forMobile {display: none;}

.intro {width: 100%; height: 100vh;}
.intro .swiper {height: 100%;}
.intro .swiper-slide {
    display: flex; align-items: center;
    padding: 4.375rem 10vw 0 10vw;
    background: url(../assets/img/intro_bg1.png) no-repeat top center / cover;
}
.intro .swiper-slide .typo {
    margin-top: -4%;
    color: var(--white);
    opacity: 0;
    transform: translateX(150px);
}
.intro .swiper-slide .typo.on {animation: swiperText 1s ease-out forwards;}
.intro .swiper-slide .typo span {
    display: block;
    margin-bottom: 2rem;
    font-size: 1.375rem; line-height: 1.2;
}
.intro .swiper-slide .typo p {font-weight: 700; font-size: 3.75rem; line-height: 1.2;}

.intro .swiper-slide.intro_box2 {background-image: url(../assets/img/intro_bg2.png); background-position: center;}
.intro .swiper-slide.intro_box2::before {content: "";
    display: none;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute; left: 0; top: 0;
}
.intro .swiper-slide.intro_box2 .typo {
    color: var(--text1);
    position: relative; z-index: 10;
}
.intro .swiper-slide.intro_box2 .typo img {
    width: 15rem;
    padding-left: 7px;
    margin-bottom: 2.25rem;
}
.intro .swiper-slide.intro_box2 .typo p {font-size: 3.125rem;}
.intro .autoplay-progress {display: none;}


@keyframes swiperText {
    0%   {
        opacity: 0;
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}





@media (max-width: 1280px) {
    .intro .swiper-slide {padding-left: 7vw; padding-right: 7vw;}
    .intro .swiper-slide .typo {margin-top: -6%;}
}


@media (max-width: 1024px) {
    .intro .swiper-slide {
        background-image: url(../assets/img/intro_bg1_mobile.png); 
        background-position: right top;
    }
    .intro .swiper-slide.intro_box2 {
        background-image: url(../assets/img/intro_bg2_mobile.png); 
        background-position: right bottom;
    }
    .intro .swiper-slide.intro_box2::before {display: block;}
    .intro .swiper-slide.intro_box2 .typo img.forWeb {display: none;}
    .intro .swiper-slide.intro_box2 .typo img.forMobile {display: block;}
    .intro .swiper-slide.intro_box2 .typo p {color: var(--white);}

    @keyframes swiperText {
        0%   {
            opacity: 0;
            transform: translateX(60px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* header.black */
    #header.black {border-bottom-color: rgba(255,255,255,0.4);}
    #header.black .logo a {background-image: url(../assets/img/logo_w.svg);}
    #header.black .gnb a {color: var(--white);}
    #header.black .gnb a:hover {color: var(--white);}
    #header.black .gnb a.on {color: var(--point);}
    #header.black .all_menu span {background-color: var(--white);}
}


@media (max-width: 640px) {
    .forWeb {display: none;}
    .forMobile {display: block;}

    .intro .swiper-slide {
        align-items: flex-end;
        padding: 60px 24px 70px 24px;
    }
    .intro .swiper-slide .typo {
        width: 100%;
        padding-bottom: 20px;
    }
    .intro .swiper-slide .typo p {font-weight: 500; font-size: 45px;}
    .intro .swiper-slide.intro_box2 .typo img {
        width: 230px;
        padding-left: 0;
        margin-bottom: 15px;
    }
    .intro .swiper-slide .typo span {display: none;}
    .intro .autoplay-progress {
        display: block;
        width: calc(100% - 48px); height: 3px;
        background-color: var(--organiz);
        position: absolute; left: 24px; bottom: 45px; z-index: 10;
    }
    .intro .autoplay-progress svg {
        --progress: 0;
        width: 100%;
        position: absolute; left: 0; top: 0;
        stroke-width: 1px; stroke: #fff;
        fill: none;
        stroke-dashoffset: calc(100 * (1 - var(--progress)));
        stroke-dasharray: 100;
    }

    @keyframes swiperText {
        0%   {
            opacity: 0;
            transform: translateX(40px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}