/* Native replacements; existing site dimensions, colors and breakpoints are retained. */
.text-main { overflow-y: auto; overflow-x: hidden; scrollbar-color: #555 transparent; scrollbar-width: thin; }
.text-main::-webkit-scrollbar { width: 6px; }
.text-main::-webkit-scrollbar-thumb { background: #555; border-radius: 6px; }
.native-carousel { position: relative; }
.native-carousel.native-dotted { margin-bottom: 30px; }
.native-track { display: flex; overflow: hidden; width: 100%; align-items: flex-start; }
.native-track > .slick-slide { flex-shrink: 0; box-sizing: border-box; min-width: 0; }
.native-track > .slick-slide img { width: 100%; display: block; }
.native-prev, .native-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; padding: 0; border: 0; background: transparent center/cover no-repeat; cursor: pointer; z-index: 7; }
.native-prev { left: 0; background-image: url('../images/arrow-left.png'); }
.native-next { right: 0; background-image: url('../images/arrow-right.png'); }
.native-prev:disabled, .native-next:disabled { opacity: .25; cursor: default; }
.native-dots { position: absolute; bottom: -25px; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.native-dots li { display: inline-block; width: 20px; height: 20px; margin: 0 5px; }
.native-dots button { width: 20px; height: 20px; padding: 5px; font-size: 0; border: 0; background: transparent; cursor: pointer; }
.native-dots button::before { content: '\2022'; display: block; color: #000; opacity: .25; font: 20px/10px sans-serif; }
.native-dots button.active::before { opacity: .75; }
.native-dots button::before { font-size: 30px; line-height: 20px; }
@media (max-width: 1024px) { .native-prev, .native-next { width: 40px; height: 40px; } }
.native-overlay { position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; background: rgba(0,0,0,.7); display: flex; justify-content: center; align-items: center; }
.native-modal { position: relative; width: 80%; height: 80%; max-width: 1000px; max-height: 520px; background: #fff; border-radius: 4px; box-shadow: 0 10px 25px rgba(0,0,0,.5); }
.native-modal iframe { width: 100%; height: 100%; border: 0; display: block; }
.native-close { position: absolute; right: -18px; top: -18px; width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; background: #333; color: #fff; cursor: pointer; font: 28px/28px Arial; z-index: 1; }
.native-banner { width: 100% !important; height: auto !important; padding-top: 46.6666667%; }
.native-banner-slides { width: 100% !important; height: 100% !important; }
.native-banner-slides > div { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; }
.native-banner [data-u='arrowleft'], .native-banner [data-u='arrowright'] { top: 50% !important; transform: translateY(-50%); cursor: pointer; }
.native-banner [data-u='navigator'] { left: 0; right: 0 !important; text-align: center; }
.native-banner [data-u='navigator'] button { width: 16px; height: 16px; padding: 0; border: 0; background: url('../images/b05.png') no-repeat -7px -7px; margin: 0 5px; cursor: pointer; }
.native-banner [data-u='navigator'] button:hover { background-position: -37px -7px; }
.native-banner [data-u='navigator'] button.active { background-position: -67px -7px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.native-video-placeholder { background: #222; }
.native-video-load { display: block; width: 100%; height: 100%; padding: 16px; box-sizing: border-box; border: 0; background: #222; color: #fff; font: inherit; cursor: pointer; }
.home-video .native-video-placeholder { height: 200px; width: 30%; float: left; margin: 0 auto; }
.video .native-video-placeholder { width: 100%; height: 400px; margin: 20px 0; }
.native-video-placeholder iframe, .home-video .native-video-placeholder iframe, .video .native-video-placeholder iframe { display: block; width: 100%; height: 100%; float: none; margin: 0; border: 0; }
@media (max-width: 1024px) { .video .native-video-placeholder { height: 350px; } .home-video .native-video-placeholder { width: 50%; float: none; } }
@media (max-width: 640px) { .home-video .native-video-placeholder { width: 100%; } }

/* News thumbnails use real image sources so CSP can block inline styles. */
.responsive img.news-thumbnail { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

#news-detail { scroll-margin-top: 90px; }
#news_slide img.news-detail-image { width: 100%; height: auto; aspect-ratio: 596 / 446; object-fit: contain; }