@charset "utf-8";

@font-face {
    font-family: 'SUIT Variable';
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/SUIT-Variable.woff2') format('woff2-variations');
}

.uprime {
    --org: #FF9B00;
    --gold: #EAC176;
    --ink: #242424;
    --ink2: #191919;
    overflow: hidden;
    font-family: 'SUIT Variable', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    color: var(--ink);
}

.uprime strong {
    color: inherit;
}

.uprime .sound_only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.uprime .up_sec {
    position: relative;
}

.uprime p,
.uprime li,
.uprime h2,
.uprime span {
    word-break: keep-all;
}

.uprime ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =========================================================
   모바일 (기본)
   ========================================================= */
.uprime .up_h2 {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.03em;
    text-align: center;
}

.uprime .up_h2 b {
    font-weight: 600;
}

.uprime .up_h2 small {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
}

.uprime .up_point {
    display: block;
    width: 108px;
    margin: 0 auto 14px;
    padding: 6px 0;
    border-radius: 4px;
    background: var(--org);
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

.uprime .up_point.p_light {
    background: #FEF1D7;
    color: #7A5A1E;
}

/* --- 1. 메인 --- */
.up_s1 .up_in {
    position: relative;
    height: 0;
    padding-top: 61.7188%;
    background: #150B05 url(/img/ultheraprime/m_s1_bg.jpg) no-repeat center top;
    background-size: 100% 100%;
}

.uprime .up_cta1 {
    position: absolute;
    left: 39.95%;
    top: 44.39%;
    width: 20.16%;
    height: 9.45%;
    display: block;
    border-radius: 999px;
}

/* --- 2. 도입 혜택 --- */
.up_s2 .up_in {
    padding: 46px 20px 52px;
    background: #fff url(/img/ultheraprime/m_s2_bg.jpg) no-repeat center center;
    background-size: cover;
}

.uprime .up_ribbon {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 999px;
    background: var(--org);
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.03em;
}

.uprime .up_lead {
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.03em;
    color: #252525;
}

.uprime .up_lead b {
    font-weight: 700;
}

.uprime .up_dot {
    display: block;
    width: 48px;
    height: 4px;
    margin: 20px auto;
    background: var(--org);
}

.uprime .up_gift {
    padding: 30px 18px 32px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
    text-align: center;
}

.uprime .up_gift .tit {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink2);
}

.uprime .up_gift .sub {
    margin: 0;
    font-size: 15px;
    color: var(--ink2);
}

.uprime .up_cta2 {
    display: block;
    max-width: 280px;
    margin: 26px auto 0;
    padding: 15px 10px;
    border: 1px solid var(--org);
    outline: 2px solid #fff;
    outline-offset: -5px;
    background: var(--org);
    color: #fff;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* --- 3. 3세대 비교 --- */
.up_s3 .up_in {
    padding: 46px 20px 52px;
    background: #fff url(/img/ultheraprime/m_s3_bg.jpg) no-repeat center center;
    background-size: cover;
}

.uprime .up_gen {
    margin-top: 20px;
    text-align: center;
}

.uprime .up_gen .ph {
    display: block;
    height: 0;
    padding-top: 89%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.uprime .up_gen.g1 .ph {
    background-image: url(/img/ultheraprime/s3_m1.webp);
}

.uprime .up_gen.g2 .ph {
    background-image: url(/img/ultheraprime/s3_m2.webp);
}

.uprime .up_gen.g3 .ph {
    background-image: url(/img/ultheraprime/s3_m3.webp);
}

.uprime .up_gen .era {
    margin: 10px 0 2px;
    font-size: 14px;
    color: var(--ink2);
}

.uprime .up_gen .nm {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink2);
}

.uprime .up_gen .badge {
    display: none;
}

.uprime .up_gen .spec li {
    margin-bottom: 6px;
    padding: 10px 8px;
    border-radius: 4px;
    background: #F2F2F2;
    font-size: 15px;
    color: var(--ink2);
}

.uprime .up_gen .spec.on li {
    background: var(--org);
    color: #fff;
    font-weight: 600;
}

.uprime .up_arrow {
    display: block;
    width: 34px;
    height: 30px;
    margin: 18px auto 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: rotate(90deg);
}

.uprime .up_arrow.a1 {
    background-image: url(/img/ultheraprime/s3_arrow1.png);
}

.uprime .up_arrow.a2 {
    background-image: url(/img/ultheraprime/s3_arrow2.png);
}

/* --- 4. POINT 01 --- */
.up_s4 .up_in {
    padding: 48px 20px 52px;
    background: #1A1512 url(/img/ultheraprime/m_s4_bg.jpg) no-repeat center center;
    background-size: cover;
}

.up_s4 .up_h2 {
    color: #fff;
    margin-bottom: 2px;
}

.uprime .up_h2b {
    margin: 0 0 18px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--gold);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .uprime .up_h2b {
        background-image: linear-gradient(180deg,
                #FCEFD2 0%,
                #EFD199 30%,
                #EAC176 48%,
                #A97F45 62%,
                #E4C078 78%,
                #F7E4BC 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
    }
}

.uprime .up_line {
    display: block;
    height: 2px;
    margin: 0 0 20px;
    background: linear-gradient(90deg, rgba(234, 193, 118, 0) 0%, var(--gold) 50%, rgba(234, 193, 118, 0) 100%);
}

.uprime .up_steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 16px 16px;
    border-radius: 8px;
    background: #fff;
}

.uprime .up_steps .ico {
    flex: 0 0 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--org);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 52%;
}

.uprime .up_steps .s1 .ico {
    background-image: url(/img/ultheraprime/s4_ico1.png);
}

.uprime .up_steps .s2 .ico {
    background-image: url(/img/ultheraprime/s4_ico2.png);
}

.uprime .up_steps .s3 .ico {
    background-image: url(/img/ultheraprime/s4_ico3.png);
}

.uprime .up_steps span {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.uprime .up_steps b {
    font-weight: 600;
}

/* --- 5. POINT 02 / 03 --- */
.up_s5 .up_in {
    padding: 48px 20px 52px;
    background: #F8F8F8;
}

.uprime .up_card {
    margin-bottom: 34px;
    padding: 22px 18px 26px;
    border-radius: 12px;
    background: #fff;
}

.uprime .up_card.c2:before {
    content: '';
    display: block;
    height: 0;
    padding-top: 39.4%;
    margin-bottom: 18px;
    background: url(/img/ultheraprime/s5_card2.webp) no-repeat center center;
    background-size: contain;
}

.uprime .up_card .no {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--org);
}

.uprime .up_card .tx {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.uprime .up_card .tx.t2 {
    margin-bottom: 0;
}

.uprime .up_tds {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.uprime .up_tds li {
    flex: 0 0 92px;
    padding: 12px 4px 14px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
}

.uprime .up_tds .d1 {
    background: #FF7640;
}

.uprime .up_tds .d2 {
    background: #37C7BB;
}

.uprime .up_tds .d3 {
    background: #4A89E0;
}

.uprime .up_tds .lb {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 400;
}

.uprime .up_tds strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.uprime .up_tds em {
    font-style: normal;
    font-size: 19px;
}

.uprime .up_depth {
    display: block;
    height: 0;
    padding-top: 64.5%;
    margin-bottom: 18px;
    background: url(/img/ultheraprime/s5_depth.webp) no-repeat center center;
    background-size: contain;
}

.uprime .up_card .cap {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.03em;
    color: var(--ink);
}

/* --- 태블릿 (560~990px) --- */
@media (min-width: 560px) and (max-width: 990px) {
    .uprime .up_in>*,
    .uprime .up_card>* {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .uprime .up_gen .ph {
        padding-top: 62%;
    }
}

@media (max-width: 360px) {
    .uprime .up_h2 {
        font-size: 23px;
    }

    .uprime .up_tds li {
        flex-basis: 84px;
    }
}

/* =========================================================
   PC (991px 이상)
   ========================================================= */
@media (min-width: 991px) {
    .uprime .up_in > *,
    .uprime .exo_in > *,
    .uprime .uc_in > * {
        white-space: nowrap;
    }

    .uprime .up_sec {
        height: 0;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
    }

    .uprime .up_in {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background: none;
    }

    .uprime .up_in>* {
        position: absolute;
        margin: 0;
    }

    .uprime .up_h2 {
        font-size: 3.80vw;
        line-height: 4.60vw;
        letter-spacing: -0.04em;
        text-align: center;
    }

    .uprime .up_point {
        width: auto;
        padding: 0;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5vw;
        font-weight: 700;
    }

    /* --- 1. 메인 --- */
    .up_s1 {
        padding-top: 61.7188%;
        background-image: url(/img/ultheraprime/s1_bg.jpg);
    }

    .up_s1 .up_in {
        height: 100%;
        padding: 0;
        background: none;
    }

    /* --- 2. 도입 혜택 --- */
    .up_s2 {
        padding-top: 64.1667%;
        background-image: url(/img/ultheraprime/s2_bg.jpg);
    }

    .up_s2 .up_h2 {
        left: 29.69%;
        top: 6.33%;
        width: 40.68%;
    }

    .uprime .up_ribbon {
        left: 24.01%;
        top: 23.94%;
        width: 52.03%;
        height: 7.22%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 999px;
        font-size: 2.10vw;
        line-height: 2.85vw;
    }

    .uprime .up_lead {
        left: 29.50%;
        top: 34.33%;
        width: 41.05%;
        font-size: 2.32vw;
        line-height: 3.25vw;
    }

    .uprime .up_dot {
        left: 47.50%;
        top: 49.35%;
        width: 5.05%;
        height: .65%;
        margin: 0;
    }

    .uprime .up_gift {
        left: 32.60%;
        top: 54.46%;
        width: 34.79%;
        height: 28.73%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 1.6vw;
        box-shadow: 0 .5vw 1.6vw rgba(0, 0, 0, .07);
    }

    .uprime .up_gift .tit {
        margin: 0 0 .6vw;
        font-size: 2.22vw;
        line-height: 2.75vw;
        font-weight: 600;
    }

    .uprime .up_gift .sub {
        font-size: 1.6823vw;
        line-height: 2vw;
    }

    .uprime .up_cta2 {
        left: 42.45%;
        top: 86.04%;
        width: 15.16%;
        height: 8.04%;
        max-width: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        outline-offset: -0.3vw;
        outline-width: .12vw;
        font-size: 1.8490vw;
    }

    /* --- 3. 3세대 비교 --- */
    .up_s3 {
        padding-top: 64.5312%;
        background-image: url(/img/ultheraprime/s3_bg.jpg);
    }

    .up_s3 .up_h2 {
        left: 26.72%;
        top: 6.70%;
        width: 46.61%;
        line-height: 4.1vw;
    }

    .up_s3 .up_h2 small {
        font-size: 3.2547vw;
        line-height: 4.1vw;
    }

    .up_s3 .up_h2 b {
        font-size: 4.1224vw;
        line-height: 4.8802vw;
    }

    .uprime .up_gen {
        margin: 0;
        text-align: center;
    }

    .uprime .up_gen .ph {
        position: absolute;
        padding: 0;
        background-size: 100% 100%;
    }

    .uprime .up_gen.g1 {
        left: 8.33%;
        top: 42.86%;
        width: 24.64%;
        height: 57.14%;
    }

    .uprime .up_gen.g2 {
        left: 38.23%;
        top: 36.80%;
        width: 24.69%;
        height: 57.95%;
    }

    .uprime .up_gen.g3 {
        left: 68.07%;
        top: 24.78%;
        width: 24.79%;
        height: 69.09%;
    }

    .uprime .up_gen .ph {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .uprime .up_gen .era,
    .uprime .up_gen .nm,
    .uprime .up_gen .spec {
        position: absolute;
        left: 0;
        width: 100%;
        margin: 0;
    }

    .uprime .up_gen .spec {
        top: 0;
        height: 100%;
    }

    .uprime .up_gen .era {
        font-size: 1.4115vw;
        line-height: 1.7865vw;
    }

    .uprime .up_gen .nm {
        font-size: 2.1703vw;
        line-height: 2.5vw;
        font-weight: 600;
    }

    .uprime .up_gen .spec li {
        position: absolute;
        left: 9.28%;
        width: 81.65%;
        height: 9.33%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: #fff;
        box-shadow: 0 .1vw .5vw rgba(0, 0, 0, .07);
        font-size: 1.42vw;
    }

    .uprime .up_gen.g1 .era {
        top: 59.6%;
    }

    .uprime .up_gen.g1 .nm {
        top: 64.9%;
    }

    .uprime .up_gen.g1 .spec li {
        left: 9.09%;
        width: 81.82%;
        height: 9.33%;
    }

    .uprime .up_gen.g1 .spec li:nth-child(1) {
        top: 74.4%;
    }

    .uprime .up_gen.g2 .era {
        top: 58.8%;
    }

    .uprime .up_gen.g2 .nm {
        top: 64.1%;
    }

    .uprime .up_gen.g2 .spec li {
        height: 9.20%;
    }

    .uprime .up_gen.g2 .spec li:nth-child(1) {
        top: 73.4%;
    }

    .uprime .up_gen.g2 .spec li:nth-child(2) {
        top: 83.8%;
    }

    .uprime .up_gen.g3 .era {
        top: 49.4%;
    }

    .uprime .up_gen.g3 .nm {
        top: 53.8%;
    }

    .uprime .up_gen.g3 .spec li {
        left: 9.68%;
        width: 81.32%;
        height: 7.71%;
    }

    .uprime .up_gen.g3 .spec.on li {
        background: var(--org);
        box-shadow: none;
        color: #fff;
        font-weight: 600;
    }

    .uprime .up_gen.g3 .spec li:nth-child(1) {
        top: 61.4%;
    }

    .uprime .up_gen.g3 .spec li:nth-child(2) {
        top: 70.2%;
    }

    .uprime .up_gen.g3 .spec li:nth-child(3) {
        top: 78.8%;
    }

    .uprime .up_gen.g3 .spec li:nth-child(4) {
        top: 87.6%;
    }

    .uprime .up_gen .badge {
        display: block;
        position: absolute;
        left: -5.44%;
        top: -3.27%;
        width: 21.0%;
        height: 11.68%;
        margin: 0;
        background: url(/img/ultheraprime/s3_new.png) no-repeat center/100% 100%;
    }

    .uprime .up_gen .badge span {
        position: absolute;
        left: 0;
        top: 31%;
        width: 100%;
        text-align: center;
        font-size: 1.75vw;
        font-weight: 600;
        color: #000;
    }

    .uprime .up_arrow {
        width: auto;
        height: auto;
        margin: 0;
        transform: none;
        background-size: 100% 100%;
    }

    .uprime .up_arrow.a1 {
        left: 32.24%;
        top: 35.84%;
        width: 4.48%;
        height: 5.89%;
    }

    .uprime .up_arrow.a2 {
        left: 61.30%;
        top: 27.36%;
        width: 5.42%;
        height: 7.10%;
    }

    /* --- 4. POINT 01 --- */
    .up_s4 {
        padding-top: 48.5938%;
        background-image: url(/img/ultheraprime/s4_bg.jpg);
    }

    .up_s4 .up_point {
        left: 65.42%;
        top: 9.32%;
        width: 9.17%;
        height: 5.79%;
        border-radius: .2vw;
    }

    .up_s4 .up_h2 {
        left: 57.40%;
        top: 18.33%;
        width: 25.26%;
        font-size: 3.60vw;
        line-height: 4.30vw;
        color: #fff;
    }

    .uprime .up_h2b {
        filter: drop-shadow(0 .1vw .16vw rgba(0, 0, 0, .45));
        left: 53.39%;
        top: 28.19%;
        width: 33.23%;
        font-size: 3.60vw;
        line-height: 4.30vw;
        font-weight: 600;
        text-align: center;
    }

    .uprime .up_line {
        left: 51.20%;
        top: 35.69%;
        width: 37.60%;
        height: 2.57%;
        margin: 0;
        background: url(/img/ultheraprime/s4_line.png) no-repeat center/100% 100%;
    }

    .uprime .up_steps {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .uprime .up_steps li {
        position: absolute;
        left: 55.26%;
        width: 29.48%;
        height: 15.86%;
        margin: 0;
        padding: 0;
        gap: 0;
        border-radius: 0;
    }

    .uprime .up_steps .s1 {
        top: 41.91%;
    }

    .uprime .up_steps .s2 {
        top: 58.63%;
    }

    .uprime .up_steps .s3 {
        top: 75.24%;
    }

    .uprime .up_steps .ico {
        position: absolute;
        left: 5.3%;
        top: 12.2%;
        flex: none;
        width: 19.79%;
        height: 75.7%;
        background-size: 42%;
    }

    .uprime .up_steps span {
        position: absolute;
        left: 30.0%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.36vw;
        line-height: 1.90vw;
    }

    /* --- 5. POINT 02 / 03 --- */
    .up_s5 {
        padding-top: 116.6667%;
        background: #F8F8F8;
    }

    .up_s5 .up_point.p2 {
        left: 45.16%;
        top: 6.43%;
        width: 9.74%;
        height: 2.41%;
        border-radius: .1vw;
    }

    .up_s5 .up_point.p3 {
        left: 45.16%;
        top: 47.01%;
        width: 9.74%;
        height: 2.41%;
        border-radius: .1vw;
    }

    .up_s5 .h_p2 {
        left: 30.05%;
        top: 10.49%;
        width: 39.95%;
    }

    .up_s5 .h_p3 {
        left: 32.40%;
        top: 51.07%;
        width: 35.26%;
    }

    .uprime .up_card {
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    .uprime .up_card.c2 {
        left: 17.71%;
        top: 20.71%;
        width: 64.64%;
        height: 21.79%;
        background: url(/img/ultheraprime/s5_card2.webp) no-repeat center/100% 100%;
    }

    .uprime .up_card.c2:before {
        content: none;
    }

    .uprime .up_card.c3 {
        left: 17.71%;
        top: 61.29%;
        width: 64.64%;
        height: 30.54%;
        background: #fff;
    }

    .uprime .up_card .no,
    .uprime .up_card .tx {
        position: absolute;
        margin: 0;
    }

    .uprime .up_card.c2 .n1 {
        left: 4.19%;
        top: 15.16%;
        font-size: 1.9531vw;
        line-height: 2.0833vw;
    }

    .uprime .up_card.c2 .t1 {
        left: 4.19%;
        top: 27.87%;
        width: 46.00%;
        font-size: 1.42vw;
        line-height: 1.95vw;
    }

    .uprime .up_card.c2 .n2 {
        left: 4.19%;
        top: 55.94%;
        font-size: 1.9531vw;
        line-height: 2.0833vw;
    }

    .uprime .up_card.c2 .t2 {
        left: 4.19%;
        top: 68.65%;
        width: 66.00%;
        font-size: 1.42vw;
        line-height: 1.95vw;
    }

    .uprime .up_tds {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        gap: 0;
        margin: 0;
    }

    .uprime .up_tds li {
        position: absolute;
        top: 7.63%;
        width: 9.19%;
        height: 19.59%;
        flex: none;
        padding: 0;
        border-radius: .3vw;
    }

    .uprime .up_tds .d1 {
        left: 33.28%;
    }

    .uprime .up_tds .d2 {
        left: 43.84%;
    }

    .uprime .up_tds .d3 {
        left: 54.47%;
    }

    .uprime .up_tds .lb {
        position: absolute;
        left: 0;
        top: 27.6%;
        width: 100%;
        margin: 0;
        font-size: .6354vw;
        line-height: 1.2240vw;
    }

    .uprime .up_tds strong {
        position: absolute;
        left: 0;
        top: 44.5%;
        width: 100%;
        font-size: 1.0865vw;
        line-height: 1.2396vw;
    }

    .uprime .up_tds em {
        font-size: 1.3526vw;
    }

    .uprime .up_depth {
        position: absolute;
        left: 31.10%;
        top: 29.09%;
        width: 37.95%;
        height: 44.44%;
        padding: 0;
        margin: 0;
        background-size: 100% 100%;
    }

    .uprime .up_card.c3 .cap {
        position: absolute;
        left: 22.04%;
        top: 80.7%;
        width: 60.00%;
        margin: 0;
        font-size: 1.45vw;
        line-height: 1.98vw;
    }
}