@charset "utf-8";
/* CSS Document */

        .sub-visual {
            position: relative;
            height: 400px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sub-visual .ty_youtube {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .sub-visual .ty_video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            z-index: 0;
        }

        .sub-visual .ty_image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .sub-visual .sub_bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

                .sub-visual .text_box {
            position: relative;
            z-index: 2;
            text-align: left;
            color: #fff;
            padding-top: 60px;
        }

        /* 애니메이션 정의 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .sub-visual .text_box h2 {
            font-size: 36px;
            font-weight: lighter;
            line-height: 1.25;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
        }

        .sub-visual .text_box h2::after {
            content: '';
            display: none;
            width: 40px;
            height: 2px;
            background: #fff;
            margin: 15px auto;
        }

        .sub-visual .text_box h3 {
            font-size: 30px;
            font-weight: lighter;
            line-height: 1.25;
            white-space: normal;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
        }

        .sub-visual .text_box h2,
        .sub-visual .text_box h3 {
            /* GPU 가속 활성화 */
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .sub-visual .text_box h3,
        .sub-visual .text_box h2 {
            opacity: 0;
            animation: fadeInUp 1s ease forwards;
        }

        /* 순차 등장 */
        .sub-visual .text_box h3 {
            animation-delay: 0.3s;
        }

        .sub-visual .text_box h2 {
            animation-delay: 0.8s;
        }

        
@media (max-width: 991px) {

                .sub-visual .text_box h2 {
                font-size: 25px;
                font-weight: lighter;
                line-height: 1.25;
                text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
                }
        
                .sub-visual .text_box h2::after {
                content: '';
                display: none;
                width: 40px;
                height: 2px;
                background: #fff;
                margin: 15px auto;
                }
        
                .sub-visual .text_box h3 {
                font-size: 20px;
                font-weight: lighter;
                line-height: 1.25;
                white-space: normal;
                text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
                }
            }