@charset "UTF-8";
/* 서브배너 */
.sub_banner{ width: 100%; opacity: 1; position: relative; overflow: hidden; }
.sub_banner .img-box{ width: 100%; transform: scale(1.1); transition: transform 5s; }
.sub_banner.banner-on .img-box{ transform: scale(1); }
.sub_banner .video-box{ width: 100%; background: #000; border: none; }
.sub_banner .video-box video{ width: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; min-height: 520px; border: none; }
.sub_banner .img-box img{ width: 100vw; min-height: 520px; object-position: center center; object-fit: cover; }
.sub_banner .txt-box{ width: 100%; padding: 0px 20px; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); }
.sub_banner .txt-box p{ color: #fff; text-align: center; word-break: keep-all; }
.sub_banner .txt-box p:nth-child(1){ width: 100%; font-size: 20px; margin-bottom: 10px; line-height: 1; opacity: 0; transform: translateY( 100% ); transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; }
.sub_banner .txt-box p:nth-child(2){ width: 100%; font-size: 46px; line-height: 1.3; opacity: 0; transform: translateY( 100% ); transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; }
.sub_banner .txt-box p:nth-child(1).on{ opacity: 1; transform: translateY( 0% ); }
.sub_banner .txt-box p:nth-child(2).on{ opacity: 1; transform: translateY( 0% ); }

@media screen and ( max-width: 1280px ) {
    .sub_banner .txt-box p:nth-child(1){ font-size: 18px; }
    .sub_banner .txt-box p:nth-child(2){ font-size: 41px; }
}
@media screen and ( max-width: 768px ) {
    .sub_banner .txt-box p:nth-child(1){ font-size: 17px; }
    .sub_banner .txt-box p:nth-child(2){ font-size: 36px; }
    .sub_banner .img-box img{ min-height: 400px; }
    .sub_banner .video-box video{ min-height: 400px; }
}
@media screen and ( max-width: 500px ) {
    .sub_banner .txt-box p:nth-child(1){ font-size: 16px; }
    .sub_banner .txt-box p:nth-child(2){ font-size: 31px; }
    .sub_banner .img-box img{ min-height: auto; }
    .sub_banner .video-box video{ min-height: auto; }
}