.sv {
    background-image: url('/asset/img/sub/sv_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 0 200px;
}
.sv .wrap {
    display: flex; flex-direction: column;
}
.sv .titleWrap {
    display: flex; align-items: center;
    font-family: 'Noto Serif KR';
    font-size: 80px;
    letter-spacing: -0.02em;
    color: #351d06;
    font-weight: 600;
}
.sv .titleWrap span {
    display: inline-block;
    opacity: .3;
    padding-right: calc(40/80*1em);
    padding-bottom: calc(25/80*1em);
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
}
.sv .titleWrap .title {
    position: relative;
    padding-left: calc(35/80*1em);
    margin-left: calc(120/80*1em);
}
.sv .titleWrap .title .line {
    position: absolute;
    top: 50%;
    right: 100%;
    width: calc(120/80*1em);
    height: 1px;
    background: #351d06;
    transform: translateY(-50%);
}
.sv .titleWrap .title b {
    display: inline-block;
    opacity: .91;
    padding-bottom: calc(15/80*1em);
}
.sv .bottom {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding-top: 40px;
}
.sv .bottom .arr {
    width: 37px;
    animation: arr_anim 2s infinite ease-in-out;
}
@keyframes arr_anim {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
.sv .bottom .txt {
    text-align: right;
    font-size: 20px;
}
.sv .bottom .txt .small {
    overflow: hidden;
    font-family: 'Urbanist';
    font-size: 18px;
    color: #351d06;
    opacity: .7;
    margin-bottom: calc(20/18*1em);
    display: inline-block;
}
.sv .bottom .txt .small span {
    display: inline-block;
    padding-bottom: calc(5/18*1em);
}
.sv .bottom .txt p {
    font-family: 'Noto Serif KR';
    font-size: inherit;
    color: #351d06;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: calc(34/20*1em);
    overflow: hidden;
}
.sv .bottom .txt .info {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #351d06;
    opacity: 0;
    margin-top: calc(25/16*1em);
    display: inline-block;
}
@media screen and (max-width: 1280px) {
    .sv {
        padding: 100px 0 100px;
        background-size: 1440px;
    }
    .sv .titleWrap {
        font-size: 55px;
    }
    .sv .bottom .txt {
        font-size: 18px;
    }
}
@media screen and (max-width: 1024px) {
    .sv {
        padding: 100px 0 100px;
        background-size: 1280px;
    }    
    .sv .titleWrap {
        font-size: 45px;
    }
    .sv .bottom .txt {
        font-size: 16px;
    }
}
@media screen and (max-width: 820px) {
    .sv {
        height: auto;
        padding: 80px 0 80px;
        background-image: url(/asset/img/sub/sv_bg_mo.png);
        background-size: cover;
        background-position: bottom center;
        position: relative;
        z-index: 2;
    }
    .seat .sv::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
    }
    .sv .wrap {
        height: 100%;
        justify-content: space-between;
    }
    .sv .titleWrap {
        flex-direction: column; align-items: flex-start;  justify-content: space-between;
        gap: calc(10/30*1em);
        font-size: clamp(35px, 55/820*100vw, 55px);
    }
    .sv .titleWrap .title {
        align-self: flex-start;
    }
    .sv .bottom .txt {
        font-size: clamp(14px, 16/820*100vw, 16px);
        padding-bottom: calc(50/16*1em);
    }
}
@media screen and (max-width: 500px) {
    .sv {
        height: 80vh;
    }
    .sv .titleWrap {
        font-size: clamp(24px, 35/500*100vw, 35px);
    }
    .sv .titleWrap .title {
        align-self: flex-end;
    }
    .sv .bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .sv .bottom .txt {
        text-align: left;
    }
    .sv .bottom .arr {
        align-self: center;
        width: 20px;
    }
    .sv .bottom .txt {
        font-size: clamp(16px, 17/410*100vw, 18px);
    } 
    .sv .bottom .txt .info {
        font-size: clamp(14px, 16/410*100vw, 16px);
    }
}
@media screen and (max-width: 360px) {
    .sv .titleWrap {
        font-size: clamp(20px, 24/360*100vw, 24px);
    }
    .sv .bottom {
        align-items: center;
    }
    .sv .bottom .txt {
        width: 100%;
    }
    .sv .bottom .txt {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}



.sub {
    background: #fff;
}