/*
(주)파이브센스_FIVESENSES.Corp.
파이브프로_FIVEPro_웹솔루션.
본 라이브러리(소스코드 및 디자인 포함)는 (주)파이브센스의 자산이며, 저작권법 및 부정경쟁방지법에 의해 보호됩니다.
무단 사용, 외부 유출, 복제, 배포, 변형을 금지합니다.
위반 시 민·형사상 법적 책임 및 손해배상 청구 대상이 됩니다.
작성일: 2025-03-18 | 저작권자: (주)파이브센스(520-86-01244) | All Rights Reserved.
*/

/* 메인 배경 */
.intro_int2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #fff;
}


.intro_int2.off {
    background: transparent;
    visibility: hidden;
    transition: visibility 0s 2s;
}

.intro_int2 .bg_img_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.intro_int2 .bg_img_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.3);
    animation: fadeInImgAni 3s ease forwards;
}

.intro_int2.off .bg_img_container img {
    animation: fadeOutImgAni 2s ease forwards;
}

/* 텍스트 */
.intro_int2 .txt_container.container_fix {
    width: 100%;
    max-width: 1300px;
    padding: 0 15px;
    margin: 0 auto;
}

.intro_int2 .txt_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.intro_int2 .txt_container.center {text-align: center;} /* center */
.intro_int2 .txt_container.center br {display: none;} /* center */
.intro_int2 .txt_container.left {text-align: left;} /* left */
.intro_int2 .txt_container.right {text-align: right;} /* right */

/* 최초 텍스트 */
.intro_int2 .txt_container h2 {
    display: inline-block;
    font-family: "Unna", serif;
    font-weight: bold;
    font-size: 100px;
    color: #ffffff;
    /* line-height: 90px; */
    margin: 0;
    opacity: 0;
}

.intro_int2 .txt_container.center h2 { /* center */
    transform: translateY(200%);
    animation: slideUpAni 3.5s 6s ease forwards;/*, outlineText 1s 2.5s forwards, fadeOutAni 1s 3.5s forwards;*/
}
.intro_int2 .txt_container.left h2 { /* left */
    transform: translateX(50%);
    animation: slideLeftAni 1.5s 0.5s ease forwards, outlineText 1s 2.5s forwards, fadeOutAni 1s 3.5s forwards;
}
.intro_int2 .txt_container.right h2 { /* right */
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 70px;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    opacity: 0;
}

.intro_int2 .txt_container.center h2 { /* center */
    transform: translateY(200%);
    animation: slideUpAni 4s 0.5s ease forwards/*, outlineText 1s 2.5s forwards, fadeOutAni 1s 3.5s forwards*/;
}
.intro_int2 .txt_container.left h2 { /* left */
    transform: translateX(50%);
    animation: slideLeftAni 1.5s 0.5s ease forwards, outlineText 1s 2.5s forwards, fadeOutAni 1s 3.5s forwards;
}
.intro_int2 .txt_container.right h2 { /* right */
    transform: translateX(-50%);
    animation: slideRightAni 1.5s 0.5s ease forwards, outlineText 1s 2.5s forwards, fadeOutAni 1s 3.5s forwards;
}

/* 마지막 텍스트 */
.intro_int2 .txt_container .hidden_txt > div {
    overflow: hidden;
}
.intro_int2 .txt_container.center .hidden_txt > div {display: inline-block;} /* center */

.intro_int2 .txt_container .hidden_txt {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 15px;
}

.intro_int2 .txt_container .hidden_txt p {
    font-family: 'Pretendard';
    font-weight: bold;
    font-size: 86px;
    color: transparent;
    -webkit-text-stroke: 1px #ffffff;
    line-height: 1.3;
    margin: 0;
    transform: translateY(100%);
}

.intro_int2 .txt_container .hidden_txt > div:first-child p {animation: hiddenSlideUpAni 1s 3.5s ease forwards;}
.intro_int2 .txt_container .hidden_txt > div:last-child p {animation: hiddenSlideUpAni 1s 3.8s ease forwards;}

/* 스킵버튼 */
.intro_int2 .skip_container {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 3s;
}
.intro_int2.off .skip_container {
    opacity: 0;
}

.intro_int2 .skip_container button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.intro_int2 .skip_container button:hover {
    background: #222;
    color: #fff;
}

@media (max-width: 991px) {
    /* 최초 텍스트 */
    .intro_int2 .txt_container h2 {
        font-size: 30px;
    }

    /* 마지막 텍스트 */
    .intro_int2 .txt_container .hidden_txt p {
        font-size: 34px;
    }

    /* 스킵버튼 */
    .intro_int2 .skip_container {
        bottom: 70px;
    }

    .intro_int2 .skip_container button {
        width: 60px;
        height: 60px;
    }
}

@keyframes fadeInImgAni {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fadeOutImgAni {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes fadeOutAni {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes slideUpAni { /* center */
    0% {transform: translateY(200%);opacity: 0;}
    100% {transform: translateY(0);opacity: 1;}
}
@keyframes slideLeftAni { /* left */
    0% {transform: translateX(50%);opacity: 0;}
    100% {transform: translateX(0);opacity: 1;}
}
@keyframes slideRightAni { /* right */
    0% {transform: translateX(-50%);opacity: 0;}
    100% {transform: translateX(0);opacity: 1;}
}
@keyframes outlineText {
    0% {
        color: #ffffff;
        -webkit-text-stroke: 0px transparent;
    }
    100% {
        color: transparent;
        -webkit-text-stroke: 1px #ffffff;
    }
}
@keyframes hiddenSlideUpAni {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
}