@charset "UTF-8";
@keyframes dcode-float-y { from { top: 1%; }
  to { top: 95%; } }

@keyframes arrow-bounce { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.1rem);
    /* 向下移动 0.1rem */ } }

.wrap { display: flex; flex-direction: column; }

.page { display: flex; flex-direction: column; justify-content: center; align-items: center; max-height: 16.24rem; height: calc(100svh - 1.1rem); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; margin-bottom: -1px; overflow-x: hidden; }

.page-title { display: flex; align-items: flex-end; width: 6.78rem; position: relative; }

.page-title:before { content: ''; width: 0.1rem; height: 0.3rem; background: url(//game.gtimg.cn/images/hyrz/m2026/page-title.png) no-repeat center/cover; margin-right: 0.08rem; }

.page-title strong { display: flex; align-items: center; font-size: 0.3rem; color: #fff; line-height: 1; font-family: 'fztht'; font-weight: 400; transform: scaleY(1.4); }

.page-title span { font-size: 0.16rem; color: #fff; font-family: 'en'; font-weight: 400; line-height: 1; text-transform: uppercase; opacity: .15; padding-left: 0.1rem; transform: scaleY(1.4); }

.page-title a { font-size: 0.2rem; color: #ffe69f; line-height: 1.2; position: absolute; right: 0; }

.kv { justify-content: flex-end; max-height: 11rem; min-height: 10rem; padding-bottom: 1rem; background: url(//game.gtimg.cn/images/hyrz/m2026/kv.png) no-repeat top center/100% auto, url(//game.gtimg.cn/images/hyrz/m2026/kv.jpg) no-repeat bottom center/100% auto; }

.kv:after { content: ''; width: 0.98rem; height: 0.74rem; background: url(//game.gtimg.cn/images/hyrz/m2026/kv-down.png) no-repeat center/cover; position: absolute; left: 50%; bottom: 0rem; margin-left: -0.49rem; animation: arrow-bounce 2s ease-in-out infinite alternate; }

.kv-logo { width: 1rem; height: 0.57rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/hyrz/m2026/logo.png) no-repeat center/cover; position: absolute; top: 0.1rem; left: 0.3rem; }

.kv-slogan { width: 7.5rem; height: 2.08rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/hyrz/m2026/kv-slogan.png) no-repeat center/cover; margin-bottom: -0.3rem; }

.kv-dowload { display: flex; flex-direction: column; align-items: center; }

.kv-dowload p { display: none; align-items: center; }

.kv-dowload a { display: flex; justify-content: space-between; align-items: center; width: 4.44rem; height: 0.62rem; font-size: 0px; color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; }

.kv-dowload-ios a { background-image: url(//game.gtimg.cn/images/hyrz/m2026/kv-dowload.png); }

.kv-dowload-android a { width: 2.11rem; margin: 0 .12rem; background-image: url(//game.gtimg.cn/images/hyrz/m2026/kv-dowload-android.png); }

.kv-dowload-android a:last-child { background-image: url(//game.gtimg.cn/images/hyrz/m2026/kv-dowload-android-js.png); }

.kv-copyright { width: 3.4rem; height: 0.33rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/hyrz/m2026/kv-copyright.png) no-repeat center/cover; position: absolute; top: 0.2rem; right: 0.3rem; }

.kv-welfare { display: flex; justify-content: center; align-items: center; width: 4.43rem; height: 1.2rem; border: 0.01rem solid #ffe69f; background: url(//game.gtimg.cn/images/hyrz/m2026/kv-welfare.png) no-repeat center/cover; position: relative; margin-top: 0.5rem; }

.kv-welfare:after { content: ''; width: calc(100% + 0.05rem); height: calc(100% - 0.05rem); border: 0.01rem solid rgba(255, 230, 159, 0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.kv-welfare ul { display: flex; }

.kv-welfare li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 1rem; height: 0.9rem; background: url(//game.gtimg.cn/images/hyrz/web2026/kv-welfare.png) no-repeat center/100% 100%; margin: 0 0.05rem; }

.kv-welfare img { width: 0.5rem; height: 0.5rem; object-fit: contain; }

.kv-welfare p { display: flex; justify-content: center; align-items: center; height: 0.15rem; font-size: 0.12rem; color: #364524; font-family: 'fzyhjt'; line-height: 1; margin-top: -0.02rem; }

.kv-welfare a { display: flex; justify-content: center; align-items: center; width: 2.41rem; height: 0.5rem; font-size: 0.24rem; color: #ffe69f; background: url(//game.gtimg.cn/images/hyrz/m2026/kv-welfare-btn.png) no-repeat center/100% 100%; margin-left: 0.2rem; }

.kv-welfare a:after { content: ''; width: 0.2rem; height: 0.23rem; background: url(//game.gtimg.cn/images/hyrz/m2026/kv-welfare-after.png) no-repeat center/cover; margin-left: 0.04rem; }

.kv-login { display: flex; flex-direction: column; position: absolute; top: 0.7rem; right: 0.2rem; }

.kv-login p, .kv-login a { font-size: 0.2rem; color: #fff; text-shadow: 0.01rem 0 0.01rem #000,0 0.01rem 0.01rem #000,-0.01rem 0 0.01rem #000,.0 -0.01rem 0.01rem #000; }

.content { min-height: 15rem; background-image: url(//game.gtimg.cn/images/hyrz/m2026/content.jpg); background-position: top center; }

.content-box { display: flex; flex-direction: column; }

.content-banner { display: flex; flex-direction: column; align-items: center; position: relative; }

.content-banner:after { content: ''; width: calc(100% + 0.05rem); height: calc(100% - 0.07rem); border: 0.01rem solid #ffe69f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.content-banner .swiper { width: 6.78rem; height: 2.87rem; border: 0.01rem solid #ffe69f; }

.content-banner .swiper .swiper-slide { display: flex; justify-content: center; align-items: center; }

.content-banner .swiper .swiper-slide a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; }

.content-banner .swiper .swiper-slide a:hover { filter: brightness(1); }

.content-banner .swiper .swiper-slide a:hover img { transform: scale(1.1); }

.content-banner .swiper .swiper-slide img { width: 100%; height: auto; object-fit: cover; transition: all .3s; }

.content-prev, .content-next { width: 0.3rem; height: 0.8rem; background: url(//game.gtimg.cn/images/hyrz/web2026/content-prev.png) no-repeat center/cover; position: absolute; top: 50%; left: 0.1rem; margin-top: -0.25rem; z-index: 2; }

.content-prev.swiper-button-disabled, .content-next.swiper-button-disabled { opacity: .5; }

.content-next { left: auto; right: 0.1rem; transform: rotate(180deg); }

.content-pagination { display: flex; justify-content: center; position: absolute; bottom: 0.15rem; z-index: 2; }

.content-pagination span { width: 0.05rem; height: 0.05rem; border-radius: 50%; background-color: #c7c7c7; opacity: 1; margin: 0 0.15rem; transition: all .3s; cursor: pointer; }

.content-pagination span.swiper-pagination-bullet-active { width: 0.06rem; height: 0.06rem; background-color: #fff; }

.content-news { display: flex; flex-direction: column; padding: 0.5rem 0 0.3rem; }

.content-news-head { display: flex; justify-content: space-around; align-items: center; width: 6.78rem; border-bottom: 0.02rem solid #fff; padding-bottom: 0.04rem; }

.content-news-head li { display: flex; justify-content: center; align-items: center; font-size: 0.2rem; color: #d4d4d4; cursor: pointer; transition: color .3s; }

.content-news-head li:before { content: ''; width: 0.21rem; height: 0.21rem; background: url(//game.gtimg.cn/images/hyrz/m2026/content-news-head.png) no-repeat center/cover; margin-right: 0.05rem; opacity: 0; transition: opacity .3s; }

.content-news-head li:hover, .content-news-head li.active { color: #ffe69f; }

.content-news-head li:hover:before, .content-news-head li.active:before { opacity: 1; }

.content-news-item { display: flex; flex-direction: column; justify-content: center; margin-top: .3rem; }

.content-news-item li { display: flex; width: 6.78rem; }

.content-news-item li:first-child a { height: 0.6rem; border: .01rem solid #fff; background: url(//game.gtimg.cn/images/hyrz/web2026/content-news.jpg) no-repeat center/cover; }

.content-news-item li:first-child div { height: 100%; border-bottom: none; position: relative; }

.content-news-item li:first-child div:before { content: ''; width: .5rem; height: .49rem; background: url(//game.gtimg.cn/images/hyrz/web2026/content-news-before.png) no-repeat center/cover; position: absolute; left: .5rem; }

.content-news-item li:first-child p { max-width: 68%; width: 68%; font-size: 0.22rem; color: #393939; text-align: center; padding-left: 0; line-height: 1.2; margin-left: 1.15rem; overflow: hidden; text-overflow: ellipsis; }

.content-news-item li:first-child em { color: #393939; }

.content-news-item li:last-child a { border-bottom: none; }

.content-news-item a { display: flex; align-items: center; width: 100%; height: 0.6rem; border-bottom: 0.01rem solid #fff; }

.content-news-item a:hover span, .content-news-item a:hover p, .content-news-item a:hover em { transform: scale(1.05); }

.content-news-item span { flex: none; display: flex; align-items: center; height: 0.2rem; font-size: 0.16rem; color: #670909; line-height: 1; border: 0.01rem solid #d2d2d2; padding: 0 0.1rem; background-color: #fff; }

.content-news-item div { flex: auto; display: flex; justify-content: space-between; align-items: center; width: 100%; }

.content-news-item p { max-width: 5.5rem; font-size: 0.2rem; color: #d4d4d4; padding-left: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .3s; }

.content-news-item em { font-size: 0.2rem; color: #d4d4d4; padding-right: 0.1rem; }

.content-news-more { display: flex; justify-content: center; align-items: center; height: 0.5rem; font-size: 0.22rem; color: #ffe69f; border: 0.01rem solid #ffe69f; background: url(//game.gtimg.cn/images/hyrz/m2026/content-news-more.png) no-repeat center/cover; margin-top: 0.1rem; }

.content .page-title { margin: 0.3rem 0; }

.content-item { display: flex; flex-wrap: wrap; justify-content: space-between; width: 6.78rem; }

.content-item li { display: flex; margin-bottom: 0.15rem; }

.content-item a { display: flex; flex-direction: column; width: 3.28rem; }

.content-item a:hover { filter: brightness(1); }

.content-item a:hover img { transform: scale(1.1); }

.content-item div { display: flex; flex-direction: column; align-items: center; width: 100%; border: 0.01rem solid #ffe69f; overflow: hidden; }

.content-item img { width: 100%; height: 1.8rem; object-fit: cover; transition: all .3s; }

.content-item p { font-size: 0.18rem; color: #fff; text-align: justify; line-height: 1.2; padding-top: 0.1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }

.ninja { min-height: 15rem; background-image: url(//game.gtimg.cn/images/hyrz/m2026/ninja.jpg); overflow-x: hidden; }

.ninja-swiper { width: 100%; height: 100%; }

.ninja-swiper .swiper { width: 100%; height: 100%; }

.ninja-swiper .swiper-slide { display: flex; flex-direction: column; opacity: 0 !important; transition: opacity .3s; }

.ninja-swiper .swiper-slide.swiper-slide-active { opacity: 1 !important; z-index: 3; }

.ninja-pagination { display: flex; justify-content: space-between; align-items: center; width: 7.5rem; position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%); z-index: 4; }

.ninja-pagination .swiper { display: flex; flex-direction: column; width: 7rem; }

.ninja-pagination .swiper .swiper-slide { display: flex; justify-content: center; align-items: center; height: 1.3rem; }

.ninja-pagination .swiper .swiper-slide.swiper-slide-thumb-active div:after { opacity: 1; }

.ninja-pagination .swiper .swiper-slide div { display: flex; width: 1.61rem; height: 1.18rem; border: 0.02rem solid #ffe6ba; background: rgba(0, 0, 0, 0.7); cursor: pointer; position: relative; }

.ninja-pagination .swiper .swiper-slide div:after { content: ''; width: 1.73rem; height: 1.3rem; background: url(//game.gtimg.cn/images/hyrz/m2026/ninja-pagination-after.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s; }

.ninja-pagination .swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; }

.ninja-pagination .swiper .swiper-slide p { display: flex; flex-direction: column; align-items: center; width: 100%; height: auto; padding: 0.04rem 0; position: absolute; bottom: 0; left: 0; background-color: #010101; }

.ninja-pagination .swiper .swiper-slide strong { font-size: 0.12rem; color: #fff; line-height: 1; font-weight: 400; }

.ninja-pagination .swiper .swiper-slide span { font-size: 0.1rem; color: #fff; }

.ninja-pagination a { display: flex; justify-content: center; align-items: center; width: 0.6rem; height: 1.18rem; font-size: 0.22rem; color: #ffe69f; writing-mode: vertical-rl; letter-spacing: 0.02rem; text-align: center; line-height: 1.18rem; background: url(//game.gtimg.cn/images/hyrz/m2026/ninja-more.png) no-repeat center/100% 100%; }

.ninja-icon { width: 0.22rem; height: 0.32rem; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 0.05rem; right: 0.05rem; }

.ninja-icon-S { background-image: url(//game.gtimg.cn/images/hyrz/web2026/ninja-s.png); }

.ninja-icon-A { background-image: url(//game.gtimg.cn/images/hyrz/web2026/ninja-a.png); }

.ninja-icon-B { background-image: url(//game.gtimg.cn/images/hyrz/web2026/ninja-b.png); }

.ninja-icon-C { background-image: url(//game.gtimg.cn/images/hyrz/web2026/ninja-c.png); }

.ninja-box { display: flex; flex-direction: column; width: 100%; padding: 0 0.3rem; }

.ninja-image { display: flex; justify-content: flex-start; align-items: flex-start; width: 7.5rem; height: 5.3rem; padding: 0.3rem 0 0 0.3rem; border-bottom: 0.02rem solid #ffe69f; position: relative; margin-left: -0.3rem; }

.ninja-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }

.ninja-name { display: flex; align-items: flex-end; color: #ffe69f; font-family: 'fztht'; padding-bottom: 0.2rem; position: relative; margin: 0.2rem 0 0.2rem; }

.ninja-name:before, .ninja-name:after { content: ''; width: 0.14rem; height: 0.14rem; background: url(//game.gtimg.cn/images/hyrz/m2026/ninja-name.png) no-repeat center/cover; position: absolute; left: 0; bottom: 0; transform: translateY(50%); }

.ninja-name:after { width: calc(100% - 0.2rem); height: 0.01rem; background-color: #ffe69f; left: 0.2rem; }

.ninja-name strong { font-size: 0.44rem; line-height: 1; transform: scaleY(1.4); background: linear-gradient(to bottom, #ffefd3, #ffe69f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.ninja-name span { font-size: 0.24rem; line-height: 1; transform: scaleY(1.4); background: linear-gradient(to bottom, #ffefd3, #ffe69f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.ninja-desc { display: flex; position: relative; }

.ninja-desc span { flex: none; display: flex; justify-content: center; align-items: center; width: 1.05rem; height: 0.33rem; font-size: 0.24rem; color: #670909; line-height: 1; background-color: #fff5e5; }

.ninja-desc p { flex: auto; font-size: 0.18rem; color: #fff5e5; line-height: 1.4; padding-left: 0.1rem; margin-top: -0.05rem; }

.ninja-skill { display: flex; flex-direction: column; }

.ninja-skill-icon { display: flex; justify-content: space-between; padding: 0.2rem 0 0.1rem; }

.ninja-skill-icon li { display: flex; justify-content: center; align-items: center; width: 0.87rem; height: 0.87rem; border: 0.02rem solid transparent; border-radius: 50%; box-shadow: 0.05rem 0.05rem 0.05rem #2b1002; margin-right: 0.3rem; cursor: pointer; transition: all .3s; position: relative; z-index: 3; }

.ninja-skill-icon li:after { content: ''; width: 0.96rem; height: 0.96rem; background: url(//game.gtimg.cn/images/hyrz/m2026/ninja-skill-item.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.ninja-skill-icon li:last-child { margin-right: 0; }

.ninja-skill-icon li.active { border-color: #ffe69f; }

.ninja-skill-icon li.active img { filter: opacity(100%); }

.ninja-skill-icon li img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: opacity(50%); transition: all .3s; }

.ninja-skill-icon li dl { display: flex; flex-direction: column; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: all .3s; }

.ninja-skill-icon li dl.active { opacity: 1; pointer-events: auto; }

.ninja-skill-icon li dd { display: flex; justify-content: center; align-items: center; width: 1rem; height: 0.35rem; font-size: 0.14rem; color: #d06c12; background-color: #fff9eb; }

.ninja-skill-icon li dd.active { color: #490808; background-color: #fceabc; }

.ninja-skill-toggle { display: flex; align-items: flex-end; }

.ninja-skill-toggle li { display: flex; align-items: center; font-size: 0.18rem; color: #fff5e5; line-height: 1.2; padding: 0 0.1rem; cursor: pointer; position: relative; }

.ninja-skill-toggle li:after { content: '/'; position: absolute; right: 0; transform: translateX(50%); }

.ninja-skill-toggle li:last-child:after { display: none; }

.ninja-skill-toggle li.active { font-size: 0.22rem; line-height: 1.15; }

.ninja-skill-toggle li.active:after { font-size: 0.18rem; }

.ninja-skill-box { display: flex; flex-direction: column; width: 100%; height: 4.7rem; border: 0.01rem solid #ffe69f; padding: 0.2rem 0.15rem; background: rgba(44, 7, 7, 0.25); position: relative; z-index: 1; margin-top: 0.2rem; --size: 0.2rem; }

.ninja-skill-box:before { content: ''; width: calc(100% + 0.08rem); height: calc(100% + 0.08rem); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; /* 移除原边框，使用 border-image */ border: none; border: 0.02rem solid transparent; /* 边框厚度 */ border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Cstyle%3E.polygon-border %7B fill: none; stroke: %23fff8da; stroke-width: 2; %7D%3C/style%3E%3C/defs%3E%3Cpolygon class='polygon-border' points='20,0 80,0 100,20 100,80 80,100 20,100 0,80 0,20' /%3E%3C/svg%3E"); border-image-slice: 20 fill; /* 从SVG切割2000px区域 */ border-image-width: 0.2rem; /* 边框宽度 */ border-image-repeat: stretch; /* 拉伸填充 */ border-image-outset: 0; /* 边框向外扩展 */ clip-path: polygon(var(--size) 0, calc(100% -  var(--size)) 0, 100% var(--size), 100% calc(100% -  var(--size)), calc(100% -  var(--size)) 100%, var(--size) 100%, 0 calc(100% -  var(--size)), 0 var(--size)); }

.ninja-skill-box strong { font-size: 0.22rem; color: #fff5e5; line-height: 1; }

.ninja-skill-box p { font-size: 0.16rem; color: #fff; margin: 0.1rem 0; }

.ninja-skill-box a { color: #ffe69f; }

.ninja-skill-box div { width: 100%; height: 3.2rem; border: 0.01rem solid #ffe69f; position: relative; overflow: hidden; }

.ninja-skill-box div a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

.ninja-skill-box div a:after { content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5) url(//game.gtimg.cn/images/hyrz/m2026/ninja-play.png) no-repeat center/0.7rem 0.7rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; }

.ninja-skill-box div img { width: 100%; justify-self: 100px; object-fit: cover; transition: all .3s; }

.player { min-height: 15rem; border-bottom: 0.02rem solid #ffe69f; }

.player .page-title { position: absolute; top: 0.3rem; left: 0.3rem; z-index: 3; }

.player-swiper { flex: auto; display: flex; flex-direction: column; align-items: center; width: 100%; }

.player-swiper .swiper { width: 100%; height: 100%; }

.player-swiper .swiper-slide { display: flex; justify-content: center; align-items: flex-start; opacity: 0 !important; }

.player-swiper .swiper-slide:after { content: ''; width: 100%; height: 6.7rem; background: url(//game.gtimg.cn/images/hyrz/m2026/player-after.png) no-repeat top center/100% auto; position: absolute; bottom: 0; z-index: 2; }

.player-swiper .swiper-slide.swiper-slide-active { opacity: 1 !important; }

.player-swiper .swiper-slide div { display: flex; width: 100%; height: auto; position: relative; }

.player-swiper .swiper-slide img { width: 100%; height: auto; }

.player-swiper .swiper-slide img:last-child { position: absolute; left: 0; bottom: 0.3rem; z-index: 4; }

.player-pagination { width: 100%; position: absolute; bottom: 0.4rem; z-index: 3; }

.player-pagination .swiper { width: 100%; }

.player-pagination .swiper .swiper-slide { display: flex; justify-content: center; align-items: center; height: 2.75rem; }

.player-pagination .swiper .swiper-slide.swiper-slide-thumb-active:after { content: ''; width: 1.82rem; height: 2.75rem; background: url(//game.gtimg.cn/images/hyrz/m2026/player-pagination.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; z-index: 2; }

.player-pagination .swiper .swiper-slide.swiper-slide-thumb-active div:after { opacity: 1; }

.player-pagination .swiper .swiper-slide div { display: flex; align-items: flex-end; width: 1.66rem; height: 2.6rem; border: 0.02rem solid #ffe69f; overflow: hidden; position: relative; }

.player-pagination .swiper .swiper-slide img { width: 100%; height: auto; object-fit: cover; }

.player-pagination .swiper .swiper-slide img:last-child { position: absolute; left: 0; bottom: 0.2rem; }

.match { min-height: 15rem; background-image: url(//game.gtimg.cn/images/hyrz/m2026/match.jpg); background-position: top center; }

.match-box { display: flex; flex-direction: column; align-items: center; padding-top: 0.3rem; }

.match-cover { display: flex; justify-content: center; align-items: center; width: 6.7rem; height: 3.7rem; border: 0.01rem solid #ffe69f; position: relative; }

.match-cover:after { content: ''; width: calc(100% + 0.08rem); height: calc(100% - 0.08rem); border: 0.01rem solid #ffe69f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.match-cover a { display: flex; width: 100%; height: 100%; }

.match-cover div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; }

.match-cover img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; }

.match-title { display: flex; justify-content: space-between; align-items: center; height: 0.6rem; border-bottom: 0.01rem solid #fff1db; margin: 0 0.18rem 0.2rem; }

.match-title p { display: flex; align-items: center; font-size: 0.32rem; color: #d4d4d4; }

.match-title p:before { content: ''; width: 0.31rem; height: 0.3rem; background: url(//game.gtimg.cn/images/hyrz/m2026/match-news-title.png) no-repeat center/cover; margin-right: 0.1rem; }

.match-title a { font-size: 0.24rem; color: #d4d4d4; transform: translateY(0.05rem); }

.match-news { display: flex; flex-direction: column; width: 6.8rem; height: 3.9rem; border: 0.01rem solid #ffe69f; background: url(//game.gtimg.cn/images/hyrz/m2026/match-news.png) no-repeat center/cover #320d04; margin: 0.2rem 0; }

.match-news-hot { display: flex; flex-direction: column; justify-content: space-evenly; height: .6rem; padding: 0 0.18rem; background-color: #782e21; }

.match-news-hot a { display: flex; align-items: center; width: 100%; height: 100%; }

.match-news-hot strong { flex: auto; font-size: 0.28rem; color: #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.match-news-hot div { display: flex; justify-content: space-between; }

.match-news-hot p { font-size: 0.22rem; color: #e0e0e0; }

.match-news-item { display: flex; flex-direction: column; }

.match-news-item li { flex: none; display: flex; align-items: center; height: 0.45rem; padding: 0 0.2rem; }

.match-news-item a { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.match-news-item a:hover p, .match-news-item a:hover span { transform: scale(1.05); }

.match-news-item p { flex: auto; font-size: 0.2rem; color: #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0.2rem; transition: all .3s; }

.match-news-item span { flex: none; font-size: 0.2rem; color: #d4d4d4; transition: all .3s; }

.match-video { display: flex; flex-direction: column; width: 6.8rem; height: 6rem; border: 0.01rem solid #ffe69f; background: url(//game.gtimg.cn/images/hyrz/m2026/match-video.png) no-repeat center/cover #320d04; }

.match-video .match-title p:before { width: 0.32rem; height: 0.29rem; background-image: url(//game.gtimg.cn/images/hyrz/m2026/match-video-title.png); }

.match-video-item { flex: auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 0.18rem; }

.match-video-item li { display: flex; flex-direction: column; }

.match-video-item li a { display: flex; flex-direction: column; width: 3.1rem; }

.match-video-item li a:hover { filter: saturate(100%); }

.match-video-item li a:hover img { transform: scale(1.1); }

.match-video-item li a:hover div:before, .match-video-item li a:hover div:after { opacity: 0; }

.match-video-item li div { display: flex; justify-content: center; align-items: center; width: 100%; height: 1.8rem; border: 0.01rem solid #ffe69f; position: relative; overflow: hidden; }

.match-video-item li div:before { content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; }

.match-video-item li div:after { content: ''; width: 0.54rem; height: 0.54rem; background: url(//game.gtimg.cn/images/hyrz/m2026/ninja-play.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; }

.match-video-item li img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; }

.match-video-item li p { width: 100%; font-size: 0.16rem; color: #d4d4d4; margin-top: 0.05rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }