body, html {
    height: 100%;
    margin: 0;
}

.navbar {
    /* Navigation bar styles */
}

html[data-service=tl] .nchome-story__frame {
    position: absolute;
    top: 56px;
    bottom: 56px;
    left: 71px;
    right: 71px;
}

html[data-service=tl] .nchome-story__frame::before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    z-index: 1;
    width: 100%;
    height: 2px;
    background-color: none;
    background-image: radial-gradient(50.04% 158591896.77% at 50% 50.61%, rgba(215, 181, 131, 0.44) 0%, rgba(215, 181, 131, 0.24) 40.1%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    transform: translateX(-50%);
}

html[data-service=tl] .nchome-story__frame .frame__top-left,
html[data-service=tl] .nchome-story__frame .frame__top-right {
    position: absolute;
    width: 13px;
    height: 9px;
    background: url(https://assets.playnccdn.com/static-nc-home/2.2.0/img/tl/story/frame_dot_pc.png) no-repeat 50% 0;
    background-size: cover;
}

html[data-service=tl] .nchome-story__frame .frame__top-left {
    top: 0;
    left: -13px;
}

html[data-service=tl] .nchome-story__frame .frame__top-right {
    top: 0;
    right: -13px;
}

html[data-service=tl] .nchome-story__frame2 {
    position: absolute;
    top: 56px;
    bottom: 56px;
    left: 71px;
    right: 71px;
}

html[data-service=tl] .nchome-story__frame2::before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 1;
    width: 100%;
    height: 2px;
    background-color: none;
    background-image: radial-gradient(50.04% 158591896.77% at 50% 50.61%, rgba(215, 181, 131, 0.44) 0%, rgba(215, 181, 131, 0.24) 40.1%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    transform: translateX(-50%);
}

html[data-service=tl] .nchome-story__frame2 .frame__bottom-left,
html[data-service=tl] .nchome-story__frame2 .frame__bottom-right {
    position: absolute;
    width: 13px;
    height: 9px;
    background: url(https://assets.playnccdn.com/static-nc-home/2.2.0/img/tl/story/frame_dot_pc.png) no-repeat 50% 0;
    background-size: cover;
}

html[data-service=tl] .nchome-story__frame2 .frame__bottom-left {
    bottom: 3px;
    left: -13px;
}

html[data-service=tl] .nchome-story__frame2 .frame__bottom-right {
    bottom: 3px;
    right: -13px;
}

.background-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.title-image {
    position: absolute;
    left: 6%;
    top: 9%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.title-image2 {
    position: absolute;
    right: 1px;
    top: 9%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.image-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: inline-block;
    width: 100%;
    max-width: 800px;
    height: auto;
}

.banner-image {
    width: 100%;
    height: auto;
}

.button-container {
    position: absolute;
    top: 83%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-area {
    width: 25%;
    padding-top: 8%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 10px;
}




.button-area:first-child {
    margin-left: 0;
}

.button-area:last-child {
    margin-right: 0;
}
@media screen and (max-width: 780px) {
    html[data-service=tl] .nchome-story__frame,
    html[data-service=tl] .nchome-story__frame2 {
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .title-image,
    .title-image2 {
        width: 100px;
        height: 100px;
    }

    .image-container {
        max-width: 400px;
        max-height: 394px;
    }

    .button-area {
        width: 25%;
        padding-top: 8%; /* 너비에 대한 일정 비율로 높이를 유지 */
        margin: 0 5px;
        background-size: contain; /* 버튼 이미지를 영역에 맞게 조정 */
    }

    .button-area:hover {
        background-size: cover;
    }


}