/* JB-9131 fix47: do not zero planb :root (40/84); JS sets 0 when absent. */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.banner-top[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.banner-top + .hmj-header,
.banner-top + .hmj-header .gnb-menu-box,
.banner-top + .hmj-header .gnb-search-dim .search-outer-box {
    top: var(--banner-top-height, 0px);
}
.banner-top + .hmj-header .gnb-menu-box {
    height: calc(100% - var(--banner-top-height, 0px));
}
/* JB-9131 fix30: scr-chk without .banner-top ~ (prod omits node) */
.hmj-header.scr-chk ~ .hmj-container .model-menu-wrap.with-gnb,
.hmj-header.scr-chk ~ .hmj-container .model-menu-wrap,
.banner-top ~ .hmj-header.scr-chk ~ .hmj-container .model-menu-wrap.with-gnb,
.banner-top ~ .hmj-header.scr-chk ~ .hmj-container .model-menu-wrap {
    top: var(--banner-top-height, 0px);
}
.banner-top ~ .hmj-container .model-menu-wrap {
    top: var(--banner-top-height, 0px);
}
@media screen and (min-width: 1120px) {
    .banner-top ~ .hmj-header ~ .hmj-container .model-menu-wrap.with-gnb {
        top: calc(var(--banner-top-height, 0px) + var(--header-height, 72px));
    }

    /* Keep the PC indicator clickable above Design tabs/hotspots. */
    .detail-ioniq5.kona .position-location {
        z-index: 298;
    }
}
@media screen and (max-width: 1119px) {
    .banner-top ~ .hmj-header ~ .hmj-container .model-menu-wrap.with-gnb,
    .banner-top ~ .hmj-container .model-menu-wrap.with-gnb {
        top: calc(var(--banner-top-height, 0px) + var(--header-height, 52px));
    }

    /* JB-9131: MO model-menu — nexo/ioniq5_pe 기준 55px compact bar */
    .detail-ioniq5.kona .model-menu-wrap {
        height: 55px;
    }
    /* JB-9131 fix38: always clear banner+header (do not rely only on .banner-top ~) */
    .detail-ioniq5.kona .model-menu-wrap.with-gnb,
    .banner-top ~ .hmj-header ~ .hmj-container.detail-ioniq5.kona .model-menu-wrap.with-gnb,
    .banner-top ~ .hmj-container .model-menu-wrap.with-gnb {
        top: calc(var(--banner-top-height, 0px) + var(--header-height, 52px));
    }
    /*
     * JB-9131 fix42: KONA MO — tie sticky tops to live header .scr-chk, not only .with-gnb.
     * type-kona scroll hysteresis (domainHeight) can leave with-gnb stale so banner covers LNB/indicator.
     */
    .hmj-header.type-kona:not(.scr-chk) ~ .hmj-container .model-menu-wrap,
    .hmj-header.type-kona:not(.scr-chk) ~ .hmj-container.detail-ioniq5.kona .model-menu-wrap {
        top: calc(var(--banner-top-height, 0px) + var(--header-height, 52px));
    }
    .hmj-header.type-kona.scr-chk ~ .hmj-container .model-menu-wrap,
    .hmj-header.type-kona.scr-chk ~ .hmj-container.detail-ioniq5.kona .model-menu-wrap {
        top: var(--banner-top-height, 0px);
    }
    .detail-ioniq5.kona .model-menu {
        display: flex;
        align-items: center;
        height: 55px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .detail-ioniq5.kona .model-menu h4.mo-only {
        top: 0;
        margin: 0;
        padding-right: 30px;
        font-size: 18px;
        line-height: 1;
    }

    /* JB-9131: MO header + section indicator — calc top, 0.4s easing (planb.css 55/107px override) */
    .hmj-header.on {
        transition: top 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.4s;
    }
    /* JB-9131 fix38/fix42: position-location clears banner + menu (+ header when GNB visible) */
    .detail-ioniq5.kona .position-location,
    .banner-top ~ .hmj-container.detail-ioniq5.kona .position-location,
    .banner-top ~ .hmj-container .detail-ioniq5.kona .position-location,
    .hmj-header.type-kona.scr-chk ~ .hmj-container .position-location,
    .hmj-header.type-kona.scr-chk ~ .hmj-container.detail-ioniq5.kona .position-location {
        top: calc(var(--banner-top-height, 0px) + var(--menu-wrap-height, 55px));
        transition: top 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
        /*
         * Keep the mobile section indicator above in-section controls/hotspots
         * (up to z-index: 20), while keeping it below the LNB/GNB (299/300).
         */
        z-index: 298;
    }
    .detail-ioniq5.kona .position-location.with-gnb,
    .banner-top ~ .hmj-container.detail-ioniq5.kona .position-location.with-gnb,
    .banner-top ~ .hmj-container .detail-ioniq5.kona .position-location.with-gnb,
    .hmj-header.type-kona:not(.scr-chk) ~ .hmj-container .position-location,
    .hmj-header.type-kona:not(.scr-chk) ~ .hmj-container.detail-ioniq5.kona .position-location {
        top: calc(var(--banner-top-height, 0px) + var(--header-height, 52px) + var(--menu-wrap-height, 55px));
    }
}

.tab-box-list li::before {
    content: '';
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #CCC;
}

/* S: KONA PIP 콘텐츠 추가 */
.detail-ioniq5.kona .slide-btn {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    font-size: 0;
    border: 1px solid #CCC;
    background: #fff;
    border-radius: 50%;
}
.detail-ioniq5.kona .slide-btn::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #002C5F;
    mask-repeat: no-repeat;
    mask-position: center;
}
.detail-ioniq5.kona .slide-btn-prev::after {
    mask-image: url('data:image/svg+xml,%3Csvg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.375 1.25L1.89666 5.72834L6.375 10.2067" stroke="%23E9E9E9" stroke-width="2"/%3E%3C/svg%3E');
    mask-position: calc(50% - 1px) center;
}
.detail-ioniq5.kona .slide-btn-next::after {
    mask-image: url('data:image/svg+xml,%3Csvg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.625 9.75L6.10334 5.27166L1.625 0.793314" stroke="%23E9E9E9" stroke-width="2" /%3E%3C/svg%3E');
}

.detail-ioniq5.kona .media-section {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.detail-ioniq5.kona .media-section .scroll-down {
    position: absolute;
    bottom: 60px;
    z-index: 100;
    width: 100%;
    text-align: center;
    pointer-events: none;
}
.detail-ioniq5.kona .media-section .scroll-down .tit {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.29px;
}
.detail-ioniq5.kona .media-section .scroll-down .arrow p {
    color: #fff;
    font-size: 24px;
    line-height: 0.4;
}
.detail-ioniq5.kona .media-section .media-inner {
    position: relative;
}
.detail-ioniq5.kona .media-section .media-slide-item .item-inner {
    position: relative;
}
.detail-ioniq5.kona .media-section .cont-box {
    position: absolute;
    left: 50%;
    top: 0;
    padding-top: calc(201px + var(--banner-height, 0px));
    width: 1120px;
    height: 100%;
    margin-left: -560px;
    z-index: 2;
}
.detail-ioniq5.kona .media-section .cont-box .tit {
    font-size: 72px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
}
.detail-ioniq5.kona .media-section .cont-box .label {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 500;
    line-height: 38px;
    color: #fff;
}
.detail-ioniq5.kona .media-section .cont-box .n-line-img {
    margin-top: 16px;
}
.detail-ioniq5.kona .media-section .cont-box .btn-group {
    position: absolute;
    right: -176px;
    bottom: 54px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.detail-ioniq5.kona .media-section .cont-box .btn-group .btn {
    min-width: auto;
    width: 340px;
}

.detail-ioniq5.kona .media-section .media-box {
    position: relative;
    height: 100vh;
}

.detail-ioniq5.kona .media-section .media-box img{
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail-ioniq5.kona .media-section .media-box img {
    object-position: center top;
}

.detail-ioniq5.kona .media-section .media-slider-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    z-index: 10;
    display: none;
}
.detail-ioniq5.kona .media-section .media-slider-buttons .slide-btn{
    background: transparent;
}
.detail-ioniq5.kona .media-section .media-slider-buttons .slide-btn::after {
    background: #fff;
}
.detail-ioniq5.kona .media-section .media-slider-status {
    position: absolute;
    left: 50%;
    bottom: 64px;
    display: flex;
    align-items: center;
    margin-left: -560px;
    z-index: 5;
    display: none;
}
.detail-ioniq5.kona .media-section .media-slider-status .btn-state {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20x%3D%2214%22%20y%3D%2213%22%20width%3D%223%22%20height%3D%2212%22%20fill%3D%22%23E9E9E9%22%2F%3E%0A%20%20%3Crect%20x%3D%2220.332%22%20y%3D%2213%22%20width%3D%223%22%20height%3D%2212%22%20fill%3D%22%23E9E9E9%22%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
}
.detail-ioniq5.kona .media-section .media-slider-status .btn-state.is-paused {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M24.2504%2018.8336C24.3691%2018.9128%2024.3691%2019.0872%2024.2504%2019.1664L15.8109%2024.7927C15.678%2024.8813%2015.5%2024.786%2015.5%2024.6263L15.5%2013.3737C15.5%2013.214%2015.678%2013.1187%2015.8109%2013.2073L24.2504%2018.8336Z%22%20fill%3D%22%23E9E9E9%22%2F%3E%0A%3C%2Fsvg%3E");
}
.detail-ioniq5.kona .media-section .media-slider-status .progress {
    position: relative;
    width: 200px;
    height: 1px;
    background: rgba(255, 255, 255, .5);
}
.detail-ioniq5.kona .media-section .media-slider-status .progress .bar {
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 3px;
    background: #fff;
    scale: var(--progress-x, 0) 1;
    transform-origin: left top;
    will-change: scale;
}
.detail-ioniq5.kona .media-section .media-slider-status .count {
    margin: 0 8px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #CCC;;
}
.detail-ioniq5.kona .media-section .media-slider-status .count .cur {
    color: #fff;
}
.detail-ioniq5.kona .media-section .media-slider-status .count .bar {
    width: 2px;
    height: 12px;
    background: #999;
    translate: 0 -1px;
}
.detail-ioniq5.kona .media-section .media-slider-status .count .cur,
.detail-ioniq5.kona .media-section .media-slider-status .count .len {
    width: 32px;
    text-align: center;
}

.detail-ioniq5.kona .media-section .media-cont {
    position: relative;
}
.detail-ioniq5.kona .media-section .media-cont::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: #000;
    opacity: 1;
    transition: opacity .5s ease;
    will-change: opacity;
    z-index: 50;
}
.ios .detail-ioniq5.kona .media-section .media-cont::before {
    transition-delay: .5s;
}
.detail-ioniq5.kona .media-section .media-cont.is-loaded::before {
    opacity: 0;
    pointer-events: none;
}
.detail-ioniq5.kona .media-section .media-cont.is-active .media-slider-buttons,
.detail-ioniq5.kona .media-section .media-cont.is-active .media-slider-status {
    display: flex;
}

.detail-ioniq5.kona .n-line-section {
    background: #fff;
}
.detail-ioniq5.kona .n-line-section .n-line-img {
    position: absolute;
    right: 50%;
    top: 140px;
    margin-right: -560px;
    z-index: 5;
}
.detail-ioniq5.kona .n-line-section .inner-scroll-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    overscroll-behavior: auto;
}
.detail-ioniq5.kona .n-line-section .n-line-content {
    position: relative;
}
.detail-ioniq5.kona .n-line-section .kv-area {
    position: relative;
    height: 100svh;
}
.detail-ioniq5.kona .n-line-section .kv-area > .text-box {
    position: absolute;
    left: 50%;
    top: 140px;
    width: 1120px;
    margin-left: -560px;
    z-index: 5;
}
.detail-ioniq5.kona .n-line-section .kv-area > .text-box .tit {
    margin-bottom: 8px;
    font-size: 40px;
    font-weight: 500;
    line-height: 64px;
    color: #fff;
}
.detail-ioniq5.kona .n-line-section .kv-area > .text-box .desc {
    font-size: 18px;
    line-height: 30px;
    color: #fff;
}
.detail-ioniq5.kona .n-line-section .kv-area > .img-box {
    position: absolute;
    left: 0;
    top: 112px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-ioniq5.kona .n-line-section .kv-area > .img-box picture,
.detail-ioniq5.kona .n-line-section .kv-area > .img-box img {
    display: block;
    width: 100%;
    height: 100vh;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.scr-chk ~ .detail-ioniq5.kona .n-line-section .kv-area > .text-box  {
    top: 140px;
}
.scr-chk ~ .detail-ioniq5.kona .n-line-section .kv-area > .n-line-img  {
    top: 140px;
}
.scr-chk ~ .detail-ioniq5.kona .n-line-section .kv-area > .img-box {
    top: 40px;
}
.detail-ioniq5.kona .n-line-section .slider-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.detail-ioniq5.kona .n-line-section .tab-area {
    position: relative;
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-buttons {
    position: absolute;
    left: 470px;
    right: 0;
    width: 650px;
    z-index: 10;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-list {
    display: flex;
    justify-content: center;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-item {
    position: relative;
    flex: 1;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: rgba(255, 255, 255, .5);
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-contents {
    padding: 0 0 40px;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-content {
    position: relative;
    display: none;
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-content.is-active {
    display: block;
}
.detail-ioniq5.kona .n-line-section .tab-area .tab-btn.is-active {
    color: #0793EA;
}

.detail-ioniq5.kona .n-line-section .n-line-slider-area {
    position: relative;
}
.detail-ioniq5.kona .n-line-section .n-line-slider-inner {
    display: flex;
}

.detail-ioniq5.kona .n-line-section .n-line-slider {
    flex: 0 0 430px;
    margin-right: 40px;
}
.detail-ioniq5.kona .n-line-section .n-line-slider .text-box {
    display: none;
}

.detail-ioniq5.kona .n-line-section .view-content {
    padding-top: 74px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-ioniq5.kona .n-line-section .view-content .thumb-slider {
    margin-right: auto;
    width: 202px;
}
.detail-ioniq5.kona .n-line-section .view-content .thumb-list {
    display: flex;
}
.detail-ioniq5.kona .n-line-section .view-content .thumb-item {
    position: relative;
    width: 202px;
    height: 135px;
}
.detail-ioniq5.kona .n-line-section .view-content .thumb-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
}
.detail-ioniq5.kona .n-line-section .view-content .thumb-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail-ioniq5.kona .n-line-section .view-content .text-box {
    flex: 1 1 78px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    height: 64px;
}
.detail-ioniq5.kona .n-line-section .n-line-slider .tit,
.detail-ioniq5.kona .n-line-section .view-content .tit {
    max-width: 353px;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #fff;
    opacity: 1 !important;
}
.detail-ioniq5.kona .n-line-section .n-line-slider .desc,
.detail-ioniq5.kona .n-line-section .view-content .desc {
    margin-top: 16px;
    font-size: 14px;
    line-height: 22px;
    color: #000;
    opacity: 1 !important;
}
.detail-ioniq5.kona .n-line-section .n-line-slider .desc + .desc,
.detail-ioniq5.kona .n-line-section .view-content .desc + .desc{
    margin-top: 8px;
}

.detail-ioniq5.kona .n-line-section .slider-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 58px;
    z-index: 10;
}
.detail-ioniq5.kona .n-line-section .swiper-button-next,
.detail-ioniq5.kona .n-line-section .swiper-button-prev {
    top: auto;
    bottom: 0;
    right: 0;
    width: 58px;
    height: 58px;
}
.detail-ioniq5.kona .n-line-section .swiper-button-prev {
    left: auto;
    right: 66px;
}
.detail-ioniq5.kona .n-line-section .swiper-button-next img,
.detail-ioniq5.kona .n-line-section .swiper-button-prev img {
    width: 100%;
}
.detail-ioniq5.kona .n-line-section .swiper-button-prev:after,
.detail-ioniq5.kona .n-line-section .swiper-button-next:after {
    content: "";
}
.detail-ioniq5.kona .n-line-section .swiper-pagination-fraction {
    width: 70px;
    height: 30px;
    left: 0;
    font-size: 18px;
    color: #ccc;
}
.detail-ioniq5.kona .n-line-section .swiper-pagination-current {
    color: #fff;
}

.detail-ioniq5.kona .ex-interior-section .inner-align {
    max-width: none;
}
.kona .section-container.ex-interior-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    pointer-events: none;
}
.kona .section-container.ex-interior-section > .inner-align:first-of-type {
    margin-top: 182px;
}
.scr-chk ~ .kona .section-container.ex-interior-section > .inner-align:first-of-type {
    margin-top: 110px;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-buttons {
    background-color: #000;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-list {
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-item {
    position: relative;
    flex: 1;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-item:not(:first-child)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-left: -1px;
    width: 1px;
    height: 40px;
    margin-top: -20px;
    background: url("../../assets/images/planb/kona/ico_linear_line.svg") center no-repeat;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #666;
}

.detail-ioniq5.kona .ex-interior-section .tab-area .tab-contents {
    padding: 80px 0 104px;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-content {
    display: none;
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-content.is-active {
    display: block;
}
.detail-ioniq5.kona .ex-interior-section .tab-area .tab-btn.is-active {
    color: #1C6BBA;
}

.detail-ioniq5.kona .ex-interior-section .n-line-slider-area {
    position: relative;
}
.detail-ioniq5.kona .ex-interior-section .n-line-slider-inner {
    display: flex;
}

.detail-ioniq5.kona .ex-interior-section .n-line-slider {
    flex: 0 0 667px;
    margin-right: 32px;
}
.detail-ioniq5.kona .ex-interior-section .n-line-slider .text-box {
    display: none;
}

.detail-ioniq5.kona .ex-interior-section .view-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-ioniq5.kona .ex-interior-section .view-content .thumb-slider {
    margin-right: auto;
    width: 234px;
}
.detail-ioniq5.kona .ex-interior-section .view-content .thumb-list {
    display: flex;
}
.detail-ioniq5.kona .ex-interior-section .view-content .thumb-item {
    position: relative;
    width: 234px;
    height: 156px;
}
.detail-ioniq5.kona .ex-interior-section .view-content .thumb-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .7);
}
.detail-ioniq5.kona .ex-interior-section .view-content .thumb-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail-ioniq5.kona .ex-interior-section .view-content .text-box {
    flex: 1;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.detail-ioniq5.kona .ex-interior-section .n-line-slider .tit,
.detail-ioniq5.kona .ex-interior-section .view-content .tit {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #000;
    opacity: 1 !important;
}
.detail-ioniq5.kona .ex-interior-section .n-line-slider .desc,
.detail-ioniq5.kona .ex-interior-section .view-content .desc {
    margin-top: 16px;
    font-size: 14px;
    line-height: 22px;
    color: #000;
    opacity: 1 !important;
}
.detail-ioniq5.kona .ex-interior-section .n-line-slider .desc + .desc,
.detail-ioniq5.kona .ex-interior-section .view-content .desc + .desc{
    margin-top: 8px;
}

.detail-ioniq5.kona .ex-interior-section .slider-controls {
    margin-top: 40px;
    height: 58px;
}
.detail-ioniq5.kona .ex-interior-section .swiper-button-next,
.detail-ioniq5.kona .ex-interior-section .swiper-button-prev {
    top: auto;
    bottom: 0;
    left: 0;
    width: 58px;
    height: 58px;
}
.detail-ioniq5.kona .ex-interior-section .swiper-button-next img,
.detail-ioniq5.kona .ex-interior-section .swiper-button-prev img {
    width: 100%;
}
.detail-ioniq5.kona .ex-interior-section .swiper-button-next {
    left: 64px;
}
.detail-ioniq5.kona .ex-interior-section .swiper-button-prev:after,
.detail-ioniq5.kona .ex-interior-section .swiper-button-next:after {
    content: "";
}
.detail-ioniq5.kona .ex-interior-section .swiper-pagination-fraction {
    width: 70px;
    height: 30px;
    left: 152px;
    font-size: 18px;
    color: #999;
}
.detail-ioniq5.kona .ex-interior-section .swiper-pagination-current {
    color: #000;
}

.detail-ioniq5.kona .youtube-section .inner-align .section-title {
    font-weight: 400;
    line-height: 1.6;
}
.detail-ioniq5.kona .youtube-section .section-title span {
    font-size: 40px;
    font-weight: 600;
    line-height: 64px;
    color: #fff;
}
.detail-ioniq5.kona .youtube-section .media-cont {
    margin-top: 40px;
}
.detail-ioniq5.kona .youtube-section .youtube-box {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
.detail-ioniq5.kona .youtube-section .youtube-box iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.detail-ioniq5.kona .youtube-section .youtube-control {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

.quick-menu {
    z-index: 301;
}
.btn-top-box:not(.active) {
    pointer-events: none;
}
.btn-top-box.active {
    z-index: 998 !important;
    padding-right: 0 !important;
}

.scr-chk ~ .kona .section-container > .inner-scroll-content {
    padding-top: 120px;
}
.kona .inner-scroll-content {
    position: relative;
    padding-top: 120px !important;
    padding-bottom: 50px;
    height: calc(100% + 300px);
    overflow-y: auto;
    overflow-x: hidden;
}

.kona .youtube-section .inner-align,
.kona .youtube-section .inner-align .txt-area .section-title,
.kona .section-container.charging .inner-align,
.kona .section-container.charging .inner-align .txt-area .section-title {
    margin-top: 0;
}

@media screen and (min-width: 1120px) {
    /* Keep content in the compact (GNB-hidden) position when the header returns. */
    .banner-top:not([hidden]) ~ .hmj-header ~ .hmj-container.kona
    .section-container:not(.connected) > .inner-align:first-of-type {
        margin-top: 120px;
    }

    .kona .section-container.ex-interior-section::before,
    .scr-chk ~ .kona .section-container.ex-interior-section::before {
        height: 182px;
    }

    /* 배너 OFF로 확보된 높이만큼 두 섹션의 콘텐츠 시작점을 위로 이동한다. */
    .hmj-header:not(.scr-chk) ~ .hmj-container.kona
    .section-container.function > .inner-align:first-of-type {
        margin-top: calc(80px + var(--banner-top-height, 0px));
    }

    .hmj-header:not(.scr-chk) ~ .hmj-container.kona
    .section-container.charging > .inner-scroll-content {
        padding-top: calc(80px + var(--banner-top-height, 0px));
    }

    .hmj-header.scr-chk ~ .hmj-container.kona
    .section-container.function > .inner-align:first-of-type {
        margin-top: calc(80px + var(--banner-top-height, 0px));
    }

    .hmj-header.scr-chk ~ .hmj-container.kona
    .section-container.charging > .inner-scroll-content {
        padding-top: calc(80px + var(--banner-top-height, 0px));
    }

    /* 배너 OFF에서도 Swiper 타이포그래피와 간격을 ON 상태와 동일하게 유지한다. */
    .detail-ioniq5.kona .swiper p {
        font-size: 16px;
        line-height: 24px;
    }

    .detail-ioniq5.kona .swiper strong {
        margin-top: 16px;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}
@media screen and (max-width: 1119px) {
    /*
     * JB-9233: MO first block top — same for banner ON/OFF.
     * Sticky stack (JS) owns landing clearance; planb ON-only 200/160 and
     * OFF base 180 must not change section-internal spacing.
     */
    .hmj-container.detail-ioniq5.kona .section-container > .inner-align:first-of-type,
    .banner-top:not([hidden]) ~ .hmj-header ~ .hmj-container.kona
    .section-container > .inner-align:first-of-type {
        margin-top: 0px !important;
    }

    /*
     * JB-9233: section-title top gap unified (88px) for Design/Function/Convenience/…
     * Neutralizes planb `.banner-top:not([hidden]) ~ … .section-title` ON-only rule.
     * charging included (was excluded → banner ON 88 / OFF 0).
     * connected stays 0 (accordion heading). youtube keeps its own 88px rule.
     */
    .detail-ioniq5.kona .section-container:not(.connected)
    .inner-align .txt-area .section-title,
    .detail-ioniq5.kona .section-container.charging
    .inner-align .txt-area .section-title {
        margin-top: 88px;
    }

    .kona .inner-scroll-content {
        height: auto;
    }
    .scr-chk ~ .kona .section-container > .inner-scroll-content {
        padding-top: 0px !important;
    }
    .kona .inner-scroll-content {
        padding-top: 0px !important;
    }

    .kona .section-container.charging > .inner-scroll-content,
    .scr-chk ~ .kona .section-container.charging > .inner-scroll-content {
        padding-top: 0px !important;
    }

    .detail-ioniq5.kona .slide-btn {
        width: 30px;
        height: 30px;
    }
    .detail-ioniq5.kona .slide-btn::after,
    .detail-ioniq5.kona .slide-btn::before {
        mask-size: 7px auto;
    }

    .detail-ioniq5.kona .media-section,
    .detail-ioniq5.kona .media-section .media-box {
        /* height: calc(100svh - var(--banner-top-height, 0px)); */
        height: 100svh;
    }
    .detail-ioniq5.kona .media-section .media-cont[data-current-type="kona"] {
        --buttons-height: 164px;
    }
    .detail-ioniq5.kona .media-section .media-cont[data-current-type="kona-n-line"] {
        --buttons-height: 92px;
    }
    .detail-ioniq5.kona .media-section .cont-box .btn-group {
        padding: 0 20px;
        left: 0;
        right: 0;
        /* bottom: 20px; */
        /* bottom: 84px; */
        bottom: 60px;
        flex-direction: column;
    }
    .detail-ioniq5.kona .media-section .cont-box .btn-group .btn {
        width: 100%;
    }
    /*
     * JB-9131 fix52: match prod kona.css MO KV (134px = GNB+LNB+gap in one pad).
     * fix45 added media-section padding-top:header + cont-box menu-wrap — when banner
     * absent that left an LNB-sized empty band. Prod never pads media-section.
     */
    .detail-ioniq5.kona .media-section .cont-box {
        padding: 134px 20px 0;
        margin-left: 0;
        left: 0;
        width: 100%;
        height: calc(100% - var(--banner-top-height, 0px));
    }
    .detail-ioniq5.kona .media-section .cont-box .label {
        margin-bottom: 8px;
        font-size: 18px !important;
        line-height: 30px !important;
    }
    .detail-ioniq5.kona .media-section .cont-box .tit {
        font-size: 56px !important;
        line-height: 1 !important;
    }
    .detail-ioniq5.kona .media-section .media-box img {
        object-position: center 25%;
    }
    .detail-ioniq5.kona .media-section .kona-n-line .media-box img {
        --pos-y: calc((var(--quick-menu-height, 0px)) * -1);
        object-position: center var(--pos-y);
    }
    .detail-ioniq5.kona .media-section .kona-n-line .cont-box .tit {
        font-size: 40px !important;
    }
    .detail-ioniq5.kona .media-section .cont-box .n-line-img {
        margin-top: 12px;
    }
    .detail-ioniq5.kona .media-section .cont-box .n-line-img img {
        height: 34px;
    }
    .detail-ioniq5.kona .media-section .media-slider-status {
        left: 0;
        bottom: auto;
        /* top: calc(100svh - var(--banner-top-height, 0px) - var(--quick-menu-height, 0px) - var(--buttons-height, 0px)); */
        top: calc(100svh - var(--banner-top-height, 0px) - var(--buttons-height, 0px) - 42px);
        margin-right: 0;
        margin-left: 0;
        padding: 0 20px 0 10px;
        width: 100%;
        translate: 0 -100%;
        transition: top .4s ease;
    }
    .detail-ioniq5.kona .media-section .media-slider-status .progress {
        margin-left: 0;
        flex: 1;
    }
    .detail-ioniq5.kona .media-section .media-slider-status .progress .bar {
        height: 2px;
    }
    .detail-ioniq5.kona .media-section .media-slider-status .btn-state {
        border: 0;
        width: 30px;
        height: 30px;
    }
    .detail-ioniq5.kona .media-section .media-slider-buttons {
        width: auto;
        gap: 8px;
    }
    .detail-ioniq5.kona .media-section .media-slider-status .count {
        margin-left: 6px;
        font-size: 12px;
        line-height: 20px;
    }
    .detail-ioniq5.kona .media-section .media-slider-status .count .cur,
    .detail-ioniq5.kona .media-section .media-slider-status .count .len {
        width: 26px;
    }
    .detail-ioniq5.kona .media-section .media-slider-status .count .bar {
        width: 1px;
    }

    .detail-ioniq5.kona .n-line-section .kv-area {
        height: 0;
        padding-bottom: 288.5%;
        overflow: hidden;
    }

    .detail-ioniq5.kona .n-line-section .kv-area > .text-box {
        /* top: calc(85px + var(--banner-top-height, 0px) + 40px); */
        top: 75px;
        left: 0;
        padding: 0 20px;
        width: 100%;
        margin-left: 0;
    }
    .scr-chk + .detail-ioniq5.kona .n-line-section .kv-area > .text-box {
        /* top: calc(85px + var(--banner-top-height, 0px)); */
        top: 75px;
    }
    .scr-chk + .detail-ioniq5.kona .n-line-section {
        margin-top: calc(var(--banner-top-height, 0px));
    }
    .detail-ioniq5.kona .n-line-section {
        margin-top: var(--banner-top-height, 0px);
        padding-bottom: 0 !important;
    }
    .detail-ioniq5.kona .n-line-section .kv-area > .text-box .tit {
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 38px;
    }
    .detail-ioniq5.kona .n-line-section .kv-area > .text-box .desc {
        font-size: 15px;
        line-height: 24px;
    }
    .detail-ioniq5.kona .n-line-section .kv-area > .text-box img {
        margin-top: 24px;
        height: 34px;
    }
    .detail-ioniq5.kona .n-line-section .slider-area {
        bottom: var(--quick-menu-height, 0px);
    }
    .detail-ioniq5.kona .n-line-section .n-line-img img {
        height: 32px;
    }
    .detail-ioniq5.kona .n-line-section .tab-area .tab-buttons {
        left: 20px;
        width: calc(100% - 40px);
    }
    .detail-ioniq5.kona .n-line-section .tab-area .tab-btn {
        height: 40px;
        font-size: 13px;
        line-height: 22px;
    }
    .detail-ioniq5.kona .n-line-section .tab-area .tab-item:not(:first-child)::after {
        height: 24px;
        margin-top: -12px;
        background-size: 1px 24px;
    }
    .detail-ioniq5.kona .n-line-section .tab-area .tab-contents {
        padding: 40px 20px 20px;
    }
    .detail-ioniq5.kona .n-line-section .n-line-slider {
        margin-right: 0;
        flex: 1;
    }
    .detail-ioniq5.kona .n-line-section .n-line-slider .swiper-slide {
        height: auto;
    }
    .detail-ioniq5.kona .n-line-section .view-content,
    .detail-ioniq5.kona .n-line-section .swiper-button-next, .detail-ioniq5.kona .n-line-section .swiper-button-prev {
        display: none;
    }
    .detail-ioniq5.kona .n-line-section .n-line-slider .text-box {
        display: block;
        padding-top: 54px;
    }
    .detail-ioniq5.kona .n-line-section .slider-controls {
        margin-top: 0;
        bottom: auto;
        top: 0;
        width: 100%;
        height: auto;
    }
    .detail-ioniq5.kona .n-line-section .slider-controls .swiper-pagination {
        bottom: auto;
        top: 0;
        left: 0;
        padding-top: 68.75%;
        width: 100%;
        height: auto;
        pointer-events: none;
    }
    .detail-ioniq5.kona .n-line-section .slider-controls .swiper-pagination-bullet {
        background-color: rgba(255,255,255,.5);
        width: 6px;
        height: 6px;
        border-radius: 16px;
        opacity: 1;
    }
    .detail-ioniq5.kona .n-line-section .slider-controls .swiper-pagination-bullet-active {
        width: 16px;
        background-color: #fff;
    }
    .detail-ioniq5.kona .n-line-section .n-line-slider .tit {
        max-width: none;
        padding: 0;
        height: 60px;
        font-size: 18px !important;
        line-height: 30px !important;
    }
    .scr-chk ~ .kona .section-container.ex-interior-section > .inner-align:first-of-type,
    .kona .section-container.ex-interior-section > .inner-align:first-of-type {
        margin-top: 0;
    }

    .detail-ioniq5.kona .ex-interior-section .tab-area .tab-btn {
        height: 53px;
        font-size: 13px;
        line-height: 22px;
    }
    .detail-ioniq5.kona .ex-interior-section .tab-area .tab-item:not(:first-child)::after {
        height: 24px;
        margin-top: -12px;
        background-size: 1px 24px;
    }
    .detail-ioniq5.kona .ex-interior-section .tab-area .tab-contents {
        padding: 43px 20px 80px;
    }
    .detail-ioniq5.kona .ex-interior-section .n-line-slider {
        margin-right: 0;
        flex: 1;
    }
    .detail-ioniq5.kona .ex-interior-section .view-content,
    .detail-ioniq5.kona .ex-interior-section .swiper-button-next, .detail-ioniq5.kona .ex-interior-section .swiper-button-prev {
        display: none;
    }
    .detail-ioniq5.kona .ex-interior-section .n-line-slider .text-box {
        display: block;
        padding-top: 54px;
    }
    .detail-ioniq5.kona .ex-interior-section .slider-controls {
        margin-top: 0;
        height: auto;
    }
    .detail-ioniq5.kona .ex-interior-section .slider-controls .swiper-pagination {
        bottom: auto;
        top: 0;
        left: 0;
        padding-top: 68.75%;
        width: 100%;
        height: auto;
        pointer-events: none;
    }
    .detail-ioniq5.kona .ex-interior-section .slider-controls .swiper-pagination-bullet {
        background-color: #191919;
        width: 6px;
        height: 6px;
        border-radius: 16px;
    }
    .detail-ioniq5.kona .ex-interior-section .slider-controls .swiper-pagination-bullet-active {
        width: 16px;
    }
    .detail-ioniq5.kona .ex-interior-section .n-line-slider .tit {
        font-size: 18px !important;
        line-height: 30px !important;
    }
    .detail-ioniq5.kona .youtube-section {
        min-height: 100svh;
        padding-bottom: 60px !important;
    }
    /*
     * JB-9233: MO N Line youtube title top space.
     * planb base/banner-ON uses 88px; kona forced margin-top:0 and MO
     * .inner-scroll-content padding was zeroed (sticky landing) so banner OFF
     * lost all top gap. Keep 88px for ON/OFF — do not restore prod 210px padding.
     */
    .detail-ioniq5.kona .youtube-section .inner-align .txt-area .section-title {
        margin-top: 88px;
        font-size: 18px;
        line-height: 1.6;
    }
    .detail-ioniq5.kona .youtube-section .inner-align .txt-area .section-title span {
        font-size: 24px;
    }

    /*
     * JB-9233: hide hairline between N Line slider (gray image) and youtube (#000).
     * n-line had background:#fff so subpixel gaps flashed white; overlap 2px.
     */
    .detail-ioniq5.kona .n-line-section {
        background: #000;
    }
    .detail-ioniq5.kona .n-line-section + .youtube-section {
        margin-top: -2px;
        position: relative;
        z-index: 1;
    }

    .detail-ioniq5.kona .n-line-section .kv-area > .img-box,
    .scr-chk ~ .detail-ioniq5.kona .n-line-section .kv-area > .img-box {
        top: 0;
    }

    .detail-ioniq5.kona .n-line-section .kv-area > .img-box {
        height: auto;
    }
    .detail-ioniq5.kona .n-line-section .kv-area > .img-box::after {
        content: '';
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: 100%;
        background-color: #2c2d30;
    }
    .detail-ioniq5.kona .n-line-section .kv-area > .img-box picture,
    .detail-ioniq5.kona .n-line-section .kv-area > .img-box img {
        height: 100%;
    }

    /** charging 섹션 스타일 추가 */
    .detail-ioniq5.kona .charging .swiper p {
        font-size: 14px !important;
        font-weight: 400;
        line-height: 22px !important;
    }
}

/* E: KONA PIP 콘텐츠 추가 */

/* ============================================ */
/* ============================================ */
/* ============================================ */
.no-scroll {
    overflow: hidden;
    touch-action: none; /* 모바일 터치 스크롤 비활성화 */
    -ms-touch-action: none; /* IE에서 터치 스크롤 비활성화 */
}

/* accordion cont 내용 위로 붙지 않게 */
@media screen and (min-width: 768px) {
    .accordion-cont li > p.cont {
        padding-top: 32px !important;
    }
}

/* KONA PIP content requirements + Figma PC/MO layout */

/* Key visual */
.kona .media-section .media-slide-item[data-item-type="kona"] .cont-box .tit {
    font-size: 56px;
    font-weight: 600;
    line-height: 90px;
}

.kona .media-section .media-slide-item[data-item-type="kona"] .cont-box .label {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 52px;
}

.kona .media-section .cont-box .btn-group {
    right: 0 !important;
}

.kona .media-section .media-box img {
    object-position: center center;
}

.kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .tit {
    font-size: 56px !important;
    font-weight: 500;
    line-height: 90px !important;
}

.kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .n-line-img {
    position: absolute;
    top: calc(219px + var(--banner-height, 0px));
    left: 872px;
    width: 248px;
    height: 51px;
    margin: 0;
}

.kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .n-line-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .n-line-kv-label {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 52px;
}

.kona .media-section .media-slide-item[data-item-type="kona-n-line"] .media-box::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
            linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
            linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

/* Highlights */
.kona .ani-elem {
    --duration: 1s;
    --delay: 0s;
    --play-state: paused;
    --y: 100px;
}

.kona .ani-elem.run-animate {
    --play-state: running;
}

.kona .ani-target {
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-play-state: var(--play-state);
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

.kona .ani-fade-in-up {
    opacity: 0;
    translate: 0 var(--y);
    animation-name: kona-fade-in, kona-slide-up;
    will-change: translate, opacity;
}

@keyframes kona-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes kona-slide-up {
    from {
        translate: 0 var(--y);
    }

    to {
        translate: 0 0;
    }
}

.kona .count-elem {
    display: inline-flex;
    overflow: hidden;
}

.kona #highlights.highlights {
    position: relative !important;
    top: 0 !important;
    display: block;
    height: 100vh;
    min-height: 720px;
    padding: 0 !important;
    overflow: hidden !important;
    color: #fff;
    background: #000;
    isolation: isolate;
}

.kona .highlights-bg,
.kona .highlights-bg img,
.kona .highlights-shade {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.kona .highlights-bg img {
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.kona .highlights-shade {
    z-index: 1;
    background:
            linear-gradient(90deg, rgba(27, 26, 37, 0.2), rgba(27, 26, 37, 0.2)),
            linear-gradient(188deg, rgba(27, 26, 37, 0) 48%, rgba(27, 26, 37, 0.6) 61%),
            linear-gradient(333deg, rgba(27, 26, 37, 0) 59%, rgba(27, 26, 37, 0.4) 85%);
    pointer-events: none;
}

.kona .highlights-inner {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 80px));
    height: 100%;
    margin: 0 auto;
}

.kona .highlights-copy {
    position: absolute;
    /* Match the vertical title baseline used by the other sections. */
    /* top: max(
      calc(clamp(64px, 9.63vh, 104px) + 80px),
      calc(var(--banner-top-height, 0px) + 168px)
    ); */
    top: calc(80px + var(--banner-top-height, 0px));
    left: 0;
}

.kona .highlights-copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    line-height: 64px;
}

.kona .highlights-copy p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

.kona .highlights-specs {
    position: absolute;
    right: 0;
    bottom: clamp(56px, 9.63vh, 104px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kona .highlights-specs p {
    opacity: 1 !important;
}

.kona .highlights-spec-row {
    display: flex;
    align-items: center;
}

.kona .highlights-spec {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 102px;
    padding: 0 32px;
}

.kona .highlights-spec:first-child {
    width: 203px;
    padding-left: 0;
}

.kona .highlights-spec + .highlights-spec {
    border-left: 1px solid #ccc;
}

.kona .highlights-label {
    margin: 0;
    color: #fff;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    white-space: nowrap;
}

.kona .highlights-value {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-weight: 400;
    line-height: 64px;
    white-space: nowrap;
}

.kona .highlights-value strong,
.kona .highlights-value b {
    font-size: 40px;
    font-weight: 600;
}

.kona .highlights-value b {
    font-weight: 400;
}

.kona .highlights-value span {
    font-size: 24px;
    font-weight: 400;
    line-height: 54px;
}

.kona .highlights-note {
    margin: 0;
    color: #999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Keep the N Line visual flush with the end of Highlights. */
.detail-ioniq5.kona .n-line-section {
    margin-top: 0;
}

.detail-ioniq5.kona .n-line-section .kv-area > .img-box,
.scr-chk ~ .detail-ioniq5.kona .n-line-section .kv-area > .img-box {
    top: 0;
}

/* Content links inside the existing Connected accordion. */
.kona .connected .connected-link {
    display: inline-flex;
    align-items: center;
    color: #002C5F;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}

/* Design / Connected Car Service — internal scroll on desktop */
@media screen and (min-width: 1120px) {
    .detail-ioniq5.kona .section-container.design,
    .detail-ioniq5.kona .section-container.connected {
        height: 100vh !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: none;
    }

    .detail-ioniq5.kona .section-container.design {
        padding-bottom: 80px !important;
    }

    .detail-ioniq5.kona .section-container.connected {
        padding-bottom: 0 !important;
    }

    .detail-ioniq5.kona .section-container.design::-webkit-scrollbar,
    .detail-ioniq5.kona .section-container.connected::-webkit-scrollbar {
        display: none;
    }

    .detail-ioniq5.kona .connected > .inner-align {
        width: 1120px;
        max-width: calc(100% - 80px);
        margin-top: calc(
                var(--banner-top-height, 0px)
                + var(--menu-wrap-height, 70px)
                + 20px
        );
    }

    .hmj-header.scr-chk ~ .hmj-container.detail-ioniq5.kona
    .connected > .inner-align {
        margin-top: calc(
                var(--banner-top-height, 0px)
                + var(--menu-wrap-height, 70px)
                + 20px
        );
    }

    .detail-ioniq5.kona .connected .txt-area .section-title {
        margin-top: 0;
        font-size: 40px !important;
        line-height: 64px !important;
        text-align: left !important;
    }

    .detail-ioniq5.kona .connected .accordion-wrapper {
        align-items: stretch;
        column-gap: 40px;
        width: calc(100% - 40px);
        margin: 40px 40px 40px 0;
    }

    .detail-ioniq5.kona .connected .wrapper-image {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        overflow: hidden;
    }

    .detail-ioniq5.kona .connected .wrapper-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .detail-ioniq5.kona .connected .accordion-cont {
        flex: 0 0 460px;
        width: 460px;
    }

    .detail-ioniq5.kona .connected .accordion-cont li > .cont {
        padding: 40px !important;
    }

    .detail-ioniq5.kona .connected .accordion-cont li .tit-btn::before {
        right: 0;
    }
}

@media screen and (min-width: 1120px) and (max-width: 1279px) {
    .detail-ioniq5.kona .connected > .inner-align,
    .hmj-header.scr-chk ~ .hmj-container.detail-ioniq5.kona
    .connected > .inner-align {
        margin-top: calc(
                var(--banner-top-height, 0px)
                + var(--menu-wrap-height, 70px)
                + 70px
        );
    }

    .hmj-header.scr-chk ~ .hmj-container.detail-ioniq5.kona
    .connected > .inner-align {
        margin-top: calc(
                var(--banner-top-height, 0px)
                + var(--menu-wrap-height, 70px)
                + 70px
        );
    }
}

/* Performance and Charging — Figma PC 2583:9921 / MO 2583:11302 */
.kona .performance-charging {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    color: #191919;
    background: #fff;
}

.kona .performance-charging .inner-scroll-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 80px 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.kona .performance-charging .inner-align {
    width: min(1120px, calc(100% - 80px));
    max-width: 1120px;
    margin: 0 auto !important;
}

.kona .performance-charging .txt-area .section-title {
    margin: 0 !important;
    color: #191919;
    font-size: 48px !important;
    font-weight: 500;
    line-height: 72px !important;
    text-align: left !important;
}

.kona .performance-charging .txt-area .description {
    margin: 24px 0 0 !important;
    color: #191919;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 30px !important;
}

.kona .performance-charging .inner-contents {
    width: 1120px !important;
    max-width: none !important;
    margin: 40px 0 0 !important;
    padding: 0 !important;
    overflow: visible;
}

.kona .performance-charging .charging-swiper {
    box-sizing: border-box;
    overflow: visible;
    padding: 0 0 98px;
}

.kona .performance-charging .charging-media {
    display: block;
    width: 1120px;
    height: 570px;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f3f3;
}

.kona .performance-charging .charging-media img,
.kona .performance-charging .charging-media img:hover {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transform: none;
    transition: none;
}

.kona .performance-charging .charging-copy {
    width: 1096px;
    margin-top: 16px;
}

.kona .performance-charging .charging-copy strong {
    margin: 0;
    color: #191919;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
}

.detail-ioniq5.kona .performance-charging .charging-copy p {
    margin: 16px 0 0;
    padding: 0 !important;
    color: #666;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 30px !important;
}

.kona .performance-charging .charging-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 58px;
}

.kona .performance-charging .charging-controls .swiper-button-prev,
.kona .performance-charging .charging-controls .swiper-button-next {
    position: relative;
    inset: auto;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.kona .performance-charging .charging-controls .swiper-button-next {
    margin-left: 8px;
}

.kona .performance-charging .charging-controls .swiper-button-prev img,
.kona .performance-charging .charging-controls .swiper-button-next img {
    display: block;
    width: 58px;
    height: 58px;
}

.kona .performance-charging .charging-fraction {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0 0 0 24px;
    color: #191919;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
}

.kona .performance-charging .charging-total {
    color: #999;
    font-weight: 400;
}

.kona .performance-charging .charging-swiper > .swiper-pagination {
    display: none;
}

/* Keep post-SmartSense content in normal document flow instead of covering it. */
@media screen and (min-width: 1120px) {
    html.kona-native-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html.kona-native-scroll::-webkit-scrollbar,
    html.kona-native-scroll body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    html.kona-native-scroll body:not(.no-scroll) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

.kona #hyundai-smartsense {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    margin-bottom: 80px;
    box-shadow: 0 80px 0 #000;
    padding-bottom: 0 !important;
}

/* Hyundai Assurance Program — same structure and asset treatment as INSTER. */
.kona .hap-banner-section.footer {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 350px;
    margin-top: 0;
    overflow: hidden;
    background: #111;
}

.kona .bg-container {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}

.kona .bg-title-area {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(1120px, calc(100% - 80px));
    height: 100%;
    margin: 0 auto;
}

.kona .bg-title-area p,
.kona .bg-title-area h2 {
    margin: 0;
    color: #fff;
}

.kona .sec-desc-1,
.kona .sec-desc-2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 38px;
}

.kona .bg-title-area h2 {
    margin-top: 8px;
    font-size: 40px;
    font-weight: 600;
    line-height: 64px;
}

.kona .sec-desc-2 {
    margin-top: 8px !important;
}

.kona .bg-img,
.kona .bg-img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.kona ~ .footer {
    margin-top: 0;
}

.kona .bg-img img {
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

@media screen and (max-width: 1119px) {
    .kona .performance-charging {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
    }

    .kona .performance-charging .inner-scroll-content {
        height: auto;
        min-height: 0;
        padding: 80px 0 !important;
        overflow: visible;
    }

    .kona .performance-charging .inner-align {
        width: 100%;
        max-width: none;
        margin: 0 !important;
    }

    .kona .performance-charging .txt-area {
        padding: 0 20px;
    }

    .kona .performance-charging .txt-area .section-title {
        font-size: 32px !important;
        line-height: 52px !important;
    }

    .kona .performance-charging .txt-area .description {
        margin-top: 16px !important;
        font-size: 15px !important;
        line-height: 24px !important;
    }

    .kona .performance-charging .inner-contents {
        width: 100% !important;
        max-width: none !important;
        margin: 32px 0 0 !important;
        padding: 0 20px !important;
        overflow: hidden;
    }

    .kona .performance-charging .charging-swiper {
        --swiper-theme-color: #191919;
        overflow: hidden;
        padding: 0;
    }

    .kona .performance-charging .charging-media {
        width: 100%;
        height: 220px;
    }

    .kona .performance-charging .charging-copy {
        width: 100%;
        margin-top: 38px;
    }

    .kona .performance-charging .charging-copy strong {
        margin: 0;
        font-size: 18px;
        line-height: 30px;
    }

    .detail-ioniq5.kona .performance-charging .charging-copy p {
        margin-top: 16px;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 24px !important;
    }

    .kona .performance-charging .charging-controls {
        display: none;
    }

    .detail-ioniq5.kona .performance-charging .charging-swiper > .swiper-pagination {
        position: absolute;
        top: 236px;
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 6px;
        margin: 0;
        padding: 0;
        aspect-ratio: auto;
    }

    .kona .performance-charging .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 4px !important;
        background: #191919;
        opacity: 0.3;
    }

    .kona .performance-charging .swiper-pagination-bullet-active {
        width: 6px;
        border-radius: 50%;
        opacity: 1;
    }

    .kona .media-section {
        position: relative !important;
        top: auto !important;
        /* The KV starts with the 52px model-menu offset and spans the 664px Figma frame. */
        height: calc(var(--header-height, 52px) + 664px) !important;
    }

    .kona .media-section .media-cont,
    .kona .media-section .media-inner,
    .kona .media-section .media-slider,
    .kona .media-section .media-slider > .swiper-wrapper,
    .kona .media-section .media-slide-item,
    .kona .media-section .media-box {
        height: 664px !important;
    }

    .kona .media-section .media-cont {
        top: var(--header-height, 52px) !important;
    }

    .kona .media-section .cont-box {
        padding: 78px 20px 0 !important;
        height: 664px !important;
    }

    .kona .media-section .cont-box .key-copy {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .cont-box .key-copy {
        padding: 8px 0;
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .cont-box .tit {
        margin: 0;
        font-size: 24px !important;
        font-weight: 600;
        line-height: 38px !important;
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .cont-box .label {
        margin: 0;
        font-size: 18px !important;
        line-height: 30px !important;
    }

    .kona .media-section .cont-box .btn-group {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 32px;
        padding: 0 !important;
    }

    .kona .media-section .cont-box .btn-group .btn {
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 0 8px;
        font-size: 13px;
        line-height: 20px;
    }

    /* KONA N Line KV — Figma Mobile frame 2688:3649 */
    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box {
        height: 664px !important;
        padding: 78px 20px 0 !important;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .key-copy {
        padding-top: 8px;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .key-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        height: 38px;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .tit {
        margin: 0;
        font-size: 24px !important;
        font-weight: 700;
        line-height: 38px !important;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .n-line-img {
        position: static;
        flex: 0 0 auto;
        width: 116px;
        height: 24px;
        margin: 3px 0 0;
        clip-path: none;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .n-line-kv-label {
        margin: 0;
        font-size: 18px !important;
        line-height: 30px !important;
        white-space: nowrap;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .cont-box .btn-group {
        margin-top: 10px;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .media-box {
        height: 664px !important;
        overflow: hidden;
        background: #0c0e12;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .media-box picture {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .media-box picture img {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .kona .media-section .media-slide-item[data-item-type="kona-n-line"] .media-box::after {
        background:
                linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
                linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0.24) 0%,
                        rgba(0, 0, 0, 0) 22.821%,
                        rgba(0, 0, 0, 0) 68.277%,
                        rgba(0, 0, 0, 0.3) 77.071%
                );
    }

    .kona .media-section .media-cont[data-current-type="kona-n-line"] .media-slider-status {
        top: 564px !important;
    }

    .kona .media-section .media-slider-status {
        top: 564px !important;
        bottom: auto !important;
        padding: 0 20px !important;
        translate: 0 0 !important;
    }

    .kona .media-section .media-box img {
        object-position: center center;
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .media-box {
        overflow: hidden;
        background: #0c0e12;
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .media-box picture {
        position: absolute;
        top: -6.93%;
        left: 33.18%;
        width: auto;
        height: 120.33%;
        aspect-ratio: 2500 / 3441;
        transform: translateX(-33.18%);
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .media-box picture img {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .kona .media-section .media-slide-item[data-item-type="kona"] .media-box::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
                linear-gradient(180deg, rgba(12, 14, 18, 0.24), rgba(12, 14, 18, 0) 40%),
                linear-gradient(0deg, rgba(12, 14, 18, 0.34), rgba(12, 14, 18, 0) 48%);
        pointer-events: none;
    }

    .kona .media-section .media-slider-buttons {
        gap: 10px;
    }

    .kona .media-section .media-slider-buttons .slide-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .kona #highlights.highlights {
        height: 970px !important;
        min-height: 970px;
        background: #000;
    }

    .kona .highlights-bg,
    .kona .highlights-bg img {
        height: 795px;
    }

    .kona .highlights-bg img {
        object-position: center right;
    }

    .kona .highlights-shade {
        height: 795px;
        background:
                linear-gradient(90deg, rgba(27, 26, 37, 0.2), rgba(27, 26, 37, 0.2)),
                linear-gradient(185deg, rgba(27, 26, 37, 0) 48%, rgba(27, 26, 37, 0.6) 58%),
                linear-gradient(4deg, rgba(27, 26, 37, 0) 62%, rgba(27, 26, 37, 0.3) 95%);
    }

    .kona .highlights-inner {
        width: 100%;
        margin: 0;
    }

    .kona .highlights-copy {
        top: 64px;
        right: 20px;
        left: 20px;
    }

    .kona .highlights-copy h2 {
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 38px;
    }

    .kona .highlights-copy p {
        font-size: 15px;
        line-height: 24px;
    }

    .kona .highlights-specs {
        right: 20px;
        bottom: 56px;
        left: 20px;
        gap: 40px;
    }

    .kona .highlights-spec-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .kona .highlights-spec,
    .kona .highlights-spec:first-child {
        width: 100%;
        min-height: 0;
        gap: 4px;
        padding: 0;
    }

    .kona .highlights-spec + .highlights-spec {
        padding-top: 24px;
        border-top: 1px solid #ccc;
        border-left: 0;
    }

    .kona .highlights-label {
        font-size: 15px !important;
        line-height: 24px !important;
    }

    .kona .highlights-value {
        gap: 4px;
        line-height: 38px;
    }

    .kona .highlights-value strong,
    .kona .highlights-value b {
        font-size: 24px;
        line-height: 38px;
    }

    .kona .highlights-value span {
        font-size: 20px;
        line-height: 36px;
    }

    .kona .highlights-note {
        font-size: 12px !important;
        line-height: 20px !important;
    }

    .kona .hap-banner-section.footer {
        height: 332px;
    }

    .kona .bg-title-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding: 0 20px;
    }

    .kona .sec-desc-1,
    .kona .sec-desc-2 {
        font-size: 18px;
        font-weight: 600;
        line-height: 30px;
    }

    .kona .bg-title-area h2 {
        margin-top: 4px;
        font-size: 24px;
        line-height: 38px;
    }

    .kona .sec-desc-2 {
        margin-top: 24px !important;
    }
}

/* NEXO 방식의 네이티브 문서 스크롤: N Line 이후 섹션은 서로 덮지 않는다. */
.detail-ioniq5.kona #konanline,
.detail-ioniq5.kona #konanline ~ .section-container {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

.detail-ioniq5.kona #konanline {
    padding-bottom: 0 !important;
}

@media screen and (min-width: 1120px) {
    .detail-ioniq5.kona #nlineYoutube,
    .detail-ioniq5.kona #design,
    .detail-ioniq5.kona #connectedcarservice {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior-y: auto;
    }

    .detail-ioniq5.kona #nlineYoutube > .inner-scroll-content,
    .detail-ioniq5.kona #nlineYoutube ~ .section-container > .inner-scroll-content {
        height: auto !important;
        overflow-y: visible !important;
    }
}

.detail-ioniq5.kona .design .img-cont li {
    background: #000;
}

.detail-ioniq5.kona .design .img-cont li::before,
.detail-ioniq5.kona .design .img-cont li::after {
    display: none;
}

.kona .section-container.type-tab .img-area {
    max-height: none;
}

.detail-ioniq5.kona .design .img-cont li picture {
    display: block;
}

.detail-ioniq5.kona .design .img-cont li img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
}

.detail-ioniq5.kona .design .img-cont li .dot-cont {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: none;
    transform: none;
}

/* Convenience controls */
.detail-ioniq5.kona #convenience .center-slide {
    --convenience-pagination-top: 64%;
}

.detail-ioniq5.kona #convenience .swiper-navigation-area,
.detail-ioniq5.kona #hyundai-smartsense .swiper-navigation-area {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: var(--center-slide-image-height, 66.6667vw);
    pointer-events: none;
}

.detail-ioniq5.kona #convenience .swiper-navigation-area .swiper-button-prev,
.detail-ioniq5.kona #convenience .swiper-navigation-area .swiper-button-next,
.detail-ioniq5.kona #hyundai-smartsense .swiper-navigation-area .swiper-button-prev,
.detail-ioniq5.kona #hyundai-smartsense .swiper-navigation-area .swiper-button-next {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
    pointer-events: auto;
}

.detail-ioniq5.kona #convenience .center-slide .control-box {
    top: calc(var(--convenience-pagination-top) + 8px);
    bottom: auto;
}

@media screen and (min-width: 1120px) {
    .detail-ioniq5.kona #convenience .swiper-navigation-area,
    .detail-ioniq5.kona #hyundai-smartsense .swiper-navigation-area {
        height: var(--center-slide-image-height, min(calc(23.2143vw - 7.4286px), 368.5714px));
    }

    .detail-ioniq5.kona #convenience .center-slide .control-box {
        transform: none;
    }
}

.detail-ioniq5.kona #convenience .center-slide strong {
    margin-top: 72px;
}

.detail-ioniq5.kona #hyundai-smartsense .center-slide {
    --smartsense-pagination-top: 60%;
}

.detail-ioniq5.kona #hyundai-smartsense .center-slide .control-box {
    top: calc(var(--smartsense-pagination-top) + 8px);
    bottom: auto;
}

.detail-ioniq5.kona #hyundai-smartsense .center-slide strong {
    margin-top: 72px;
}

@media screen and (max-width: 1119px) {
    .detail-ioniq5.kona .section-container#convenience {
        padding-bottom: 80px !important;
    }

    .detail-ioniq5.kona #convenience .convenience-heading,
    .detail-ioniq5.kona #convenience .convenience-heading .section-title,
    .detail-ioniq5.kona #hyundai-smartsense .smartsense-heading,
    .detail-ioniq5.kona #hyundai-smartsense .smartsense-heading .section-title {
        text-align: left !important;
    }

    .detail-ioniq5.kona #convenience .center-slide .control-box {
        aspect-ratio: auto;
        height: auto;
        z-index: 10;
    }

    .detail-ioniq5.kona #convenience .center-slide .swiper-pagination {
        position: static;
        display: inline-block;
        width: auto;
        margin: 0;
        padding-right: 0;
    }

    .detail-ioniq5.kona #convenience .center-slide strong {
        margin-top: 78px;
    }

    .detail-ioniq5.kona #hyundai-smartsense .center-slide .control-box {
        aspect-ratio: auto;
        height: auto;
        z-index: 10;
    }

    .detail-ioniq5.kona #hyundai-smartsense .center-slide .swiper-pagination {
        position: static;
        display: inline-block;
        width: auto;
        margin: 0;
        padding-right: 0;
    }

    .detail-ioniq5.kona #hyundai-smartsense .center-slide strong {
        margin-top: 78px;
    }
}