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

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

.page { display: flex; flex-direction: column; justify-content: center; align-items: center; max-height: 1080rem; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }

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

.page-title:before { content: ''; width: 10rem; height: 30rem; background: url(//game.gtimg.cn/images/hyrz/web2026/page-title.png) no-repeat center/cover; margin-right: 8rem; }

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

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

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

.kv { justify-content: flex-end; max-height: 1080rem; min-height: 700rem; height: calc(100vh + 0px); padding-bottom: 30rem; background: url(//game.gtimg.cn/images/hyrz/web2026/kv.jpg) no-repeat center/cover; position: relative; }

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

.kv-dowload { display: flex; justify-content: space-between; align-items: center; width: 450rem; height: 109rem; padding: 0 16rem; background: url(//game.gtimg.cn/images/hyrz/web2026/kv-dowload.png) no-repeat center/cover; }

.kv-dcode { display: flex; align-items: center; }

.kv-dcode p { font-size: 18rem; color: #fff; writing-mode: vertical-rl; letter-spacing: 3rem; line-height: 1; }

.kv-dcode div { display: flex; justify-content: center; align-items: center; width: 92rem; height: 92rem; padding: 2rem; background-color: #fff; position: relative; margin-left: 8rem; }

.kv-dcode div:after { content: ''; width: 90%; border: 2rem solid rgba(250, 215, 120, 0.7); border-radius: 2rem; position: absolute; top: 0; animation: dcode-float-y 1.2s ease-in-out infinite alternate; }

.kv-dcode img { width: 100%; height: 100%; object-fit: contain; }

.kv-dbtn { flex: none; display: flex; }

.kv-dbtn p { display: flex; flex-direction: column; }

.kv-dbtn p:last-child { padding-left: 8rem; }

.kv-dbtn a { display: flex; width: auto; height: 36rem; margin-bottom: 10rem; box-shadow: 0 0 15rem rgba(190, 82, 190, 0.5); }

.kv-dbtn a:last-child { margin-bottom: 0; }

.kv-dbtn a img { width: 100%; height: auto; }

.kv-copyright { width: 360rem; height: 33rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/hyrz/web2026/kv-copyright.png) no-repeat center/cover; position: absolute; bottom: 30rem; left: 50%; transform: translateX(-748rem); }

.kv-welfare { display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; bottom: 30rem; transform: translateX(580rem); }

.kv-welfare ul { display: flex; }

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

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

.kv-welfare p { display: flex; justify-content: center; align-items: center; height: 20rem; font-size: 16rem; color: #364524; font-family: 'fzyhjt'; margin-top: -5rem; }

.kv-welfare a { display: flex; justify-content: center; align-items: center; width: 177rem; height: 37rem; font-size: 18rem; color: #ffe69f; background: url(//game.gtimg.cn/images/hyrz/web2026/kv-welfare-btn.png) no-repeat center/cover; margin-top: 5rem; }

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

.content { min-height: 870rem; background-image: url(//game.gtimg.cn/images/hyrz/web2026/content.jpg); }

.content-box { display: flex; }

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

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

.content-banner .swiper { width: 814rem; height: 356rem; border: 1rem 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: 30rem; height: 80rem; background: url(//game.gtimg.cn/images/hyrz/web2026/content-prev.png) no-repeat center/cover; position: absolute; top: 50%; left: 10rem; margin-top: -25rem; z-index: 2; }

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

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

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

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

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

.content-news { display: flex; flex-direction: column; padding-left: 30rem; }

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

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

.content-news-head li:before { content: ''; width: 21rem; height: 21rem; background: url(//game.gtimg.cn/images/hyrz/web2026/content-news-head.png) no-repeat center/cover; margin-right: 5rem; 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 { flex: auto; display: flex; flex-direction: column; justify-content: center; }

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

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

.content-news-item li:first-child a:hover p { transform: scale(1); }

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

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

.content-news-item li:first-child p { max-width: 75%; width: 75%; font-size: 22rem; color: #393939; text-align: center; padding-left: 0; line-height: 1.2; margin-left: 110rem; }

.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: 40rem; border-bottom: 1rem 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: 20rem; font-size: 16rem; color: #670909; line-height: 1; border: 1rem solid #d2d2d2; padding: 0 10rem; background-color: #fff; }

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

.content-news-item p { max-width: 550rem; font-size: 18rem; color: #d4d4d4; padding-left: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .3s; transform-origin: 0 50%; }

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

.content-news-more { display: flex; justify-content: center; align-items: center; height: 50rem; font-size: 22rem; color: #ffe69f; border: 1rem solid #ffe69f; background: url(//game.gtimg.cn/images/hyrz/web2026/content-news-more.png) no-repeat center/cover; }

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

.content-item { display: flex; }

.content-item li { display: flex; margin-right: 18rem; }

.content-item li:last-child { margin-right: 0; }

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

.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: 1rem solid #ffe69f; overflow: hidden; }

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

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

.ninja { min-height: 860rem; background-color: #050309; }

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

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

.ninja-swiper .swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 37rem 0 0 167rem; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0 !important; transition: opacity .3s; }

.ninja-swiper .swiper-slide:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 30%, transparent 50%); }

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

.ninja-pagination { display: flex; flex-direction: column; align-items: center; position: absolute; top: 50%; right: 160rem; transform: translateY(-50%); z-index: 4; }

.ninja-pagination .swiper { display: flex; flex-direction: column; width: 265rem; height: 775rem; }

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

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

.ninja-pagination .swiper .swiper-slide div { width: 247rem; height: 180rem; border: 2rem solid #ffe6ba; background: rgba(0, 0, 0, 0.7); cursor: pointer; position: relative; }

.ninja-pagination .swiper .swiper-slide div:after { content: ''; width: 265rem; height: 199rem; background: url(//game.gtimg.cn/images/hyrz/web2026/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: 5rem 0; position: absolute; bottom: 0; left: 0; background-color: #010101; }

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

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

.ninja-pagination a { display: flex; justify-content: center; align-items: center; width: 244rem; height: 48rem; font-size: 24rem; color: #ffe69f; background: url(//game.gtimg.cn/images/hyrz/web2026/ninja-more.png) no-repeat center/100% 100%; margin-top: 8rem; }

.ninja-icon { width: 32rem; height: 46rem; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 10rem; right: 10rem; }

.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; align-items: flex-start; position: relative; z-index: 2; }

.ninja-box .page-title { width: auto; }

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

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

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

.ninja-name strong { font-size: 60rem; 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: 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; flex-direction: column; position: relative; }

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

.ninja-desc p { max-width: 400rem; font-size: 18rem; color: #fff5e5; padding-top: 10rem; }

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

.ninja-skill-icon { display: flex; padding: 20rem 0; }

.ninja-skill-icon.samll li { width: 70rem; height: 70rem; margin-right: 15rem; }

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

.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: 100rem; height: 35rem; font-size: 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: 18rem; color: #fff5e5; line-height: 1.2; padding: 0 10rem; 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: 22rem; line-height: 1.15; }

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

.ninja-skill-box { display: flex; flex-direction: column; width: 400rem; height: 360rem; border: 1rem solid #ffe69f; padding: 15rem 15rem; background: rgba(0, 0, 0, 0.5); position: relative; z-index: 1; --size: 20rem; }

.ninja-skill-box:before { content: ''; width: calc(100% + 8rem); height: calc(100% + 8rem); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; /* 移除原边框，使用 border-image */ border: none; border: 2rem 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切割20px区域 */ border-image-width: 20rem; /* 边框宽度 */ 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: 22rem; color: #fff5e5; line-height: 1; }

.ninja-skill-box span { font-size: 16rem; }

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

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

.ninja-skill-box div { width: 372rem; height: 214rem; border: 1rem 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:hover img { transform: scale(1.1); }

.ninja-skill-box div a:hover:after { opacity: 0; }

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

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

.player { min-height: 922rem; background-image: url(//game.gtimg.cn/images/hyrz/web2026/player.jpg); }

.player-swiper { display: flex; flex-direction: column; align-items: center; padding-top: 30rem; position: relative; }

.player-swiper .swiper { width: 1562rem; }

.player-swiper .swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; }

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

.player-swiper .swiper-slide.swiper-slide-active img { filter: saturate(100%); }

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

.player-swiper .swiper-slide.swiper-slide-next { opacity: 1; }

.player-swiper .swiper-slide.swiper-slide-prev { opacity: 1; }

.player-swiper .swiper-slide div { width: 1065rem; height: 580rem; border: 1rem solid #ffe69f; position: relative; }

.player-swiper .swiper-slide div:after { content: ''; width: calc(100% + 7rem); height: calc(100% - 7rem); border: 1rem solid #ffe69f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.player-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(50%); transition: all .3s; }

.player-swiper .swiper-slide p { width: 1000rem; font-size: 24rem; color: #373737; text-align: center; margin-top: 100rem; opacity: 0; transition: all .3s; }

.player-prev, .player-next { width: 340rem; height: 580rem; background: url(//game.gtimg.cn/images/hyrz/web2026/player-prev.png) no-repeat left center/44rem 196rem; position: absolute; top: 340rem; left: -80rem; transform: translateY(-50%); z-index: 3; }

.player-next { left: auto; right: -80rem; transform: translateY(-50%) rotate(180deg); }

.player-pagination { display: flex; justify-content: center; width: 100%; position: absolute; top: 630rem; z-index: 2; }

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

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

.match { min-height: 933rem; background-image: url(//game.gtimg.cn/images/hyrz/web2026/match.jpg); }

.match-box { display: flex; padding-top: 30rem; }

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

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

.match-cover:hover img { transform: scale(1.1); }

.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-content { display: flex; flex-direction: column; justify-content: space-between; margin: 0 0 0 20rem; }

.match-title { display: flex; justify-content: space-between; align-items: center; height: 60rem; border-bottom: 1rem solid #fff1db; margin: 0 18rem 20rem; }

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

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

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

.match-news { display: flex; flex-direction: column; width: 984rem; height: 354rem; border: 1rem solid #ffe69f; background: url(//game.gtimg.cn/images/hyrz/web2026/match-news.png) no-repeat center/cover #320d04; }

.match-news-hot { display: flex; flex-direction: column; justify-content: space-evenly; height: 70rem; padding: 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: 24rem; color: #ffe69f; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.match-news-hot p { font-size: 18rem; color: #d4d4d4; }

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

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

.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: 18rem; color: #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 20rem; transition: all .3s; transform-origin: left center; }

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

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

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

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

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

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

.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: 100rem; border: 1rem solid #ffe69f; position: relative; overflow: hidden; }

.match-video-item li div:after { content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5) url(//game.gtimg.cn/images/hyrz/web2026/ninja-play.png) no-repeat center/54rem 54rem; 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: 18rem; color: #d4d4d4; margin-top: 5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }