@font-face {
    font-family: "KoHo News";
    src: url("../fonts/KoHo-Pilot-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.news-promotion {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: #00142a;
}
.news-promotion__placeholder {
    color: rgb(255 255 255 / 50%);
    font: 400 30.864px/1.1 "KoHo News", sans-serif;
}
.news-promotion__creative { position: absolute; inset: 0; }
.news-promotion .news-promotion__creative a,
.news-promotion .news-promotion__creative picture,
.news-promotion .news-promotion__creative picture img { display: block; width: 100%; height: 100%; }
.news-promotion .news-promotion__creative img { object-fit: contain; }
.news-promotion__creative--mobile,
.news-promotion [hidden] { display: none !important; }
.news-promotion--hero { --promotion-ratio: 1920 / 176; }
.news-home__promotion.news-promotion { display: block; --promotion-ratio: 431 / 295; background: #0a1e39; }
@media (max-width: 1024px) {
    .news-promotion--hero { --promotion-ratio: 513 / 159; }
    .news-promotion__creative--desktop { display: none; }
    .news-promotion__creative--mobile { display: block !important; }
    .news-promotion .news-promotion__creative--mobile[hidden] { display: none !important; }
    .news-home__promotion.news-promotion { --promotion-ratio: 459 / 276; }
}

.news-promotion__frame { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--promotion-desktop-ratio, var(--promotion-ratio, 685 / 121)); }
@media (max-width: 1024px) {
    .news-promotion__frame { aspect-ratio: var(--promotion-mobile-ratio, var(--promotion-ratio, 513 / 159)); }
}
.news-promotion__pause {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid #fff; border-radius: 50%; background: #00142acc; color: #fff;
    opacity: 0; pointer-events: none; cursor: pointer;
}
.news-promotion__pause > span { width: 11px; height: 14px; border-inline: 4px solid currentColor; }
.news-promotion__pause[data-paused="true"] > span { width: 0; height: 0; margin-left: 3px; border: 7px solid transparent; border-left: 11px solid currentColor; border-right: 0; }
.news-promotion:hover .news-promotion__pause,
.news-promotion:focus-within .news-promotion__pause { opacity: 1; pointer-events: auto; }
.news-promotion__pause:focus-visible { outline: 3px solid #0051ff; outline-offset: 3px; }
@media (hover: none) { .news-promotion__pause { opacity: 1; pointer-events: auto; } }