@media (min-width: 1025px){ .cy-fs-1{ font-size: 4.0rem !important; } .cy-fs-2{ font-size: 3.0rem !important; } .cy-fs-3{ font-size: 2.0rem !important; } .cy-fs-4{ font-size: 1.5rem !important; } .cy-fs-5{ font-size: 1.2rem !important; } .cy-fs-6{ font-size: 1.0rem !important; } .cy-fs-7{ font-size: 0.9rem !important; } .cy-fs-8{ font-size: 0.8rem !important; } .cy-fs-9{ font-size: 0.6rem !important; } .cy-fs-md-1{ font-size: 4.0rem !important; } .cy-fs-md-2{ font-size: 3.0rem !important; } .cy-fs-md-3{ font-size: 2.0rem !important; } .cy-fs-md-4{ font-size: 1.5rem !important; } .cy-fs-md-5{ font-size: 1.2rem !important; } .cy-fs-md-6{ font-size: 1.0rem !important; } .cy-fs-md-7{ font-size: 0.9rem !important; } .cy-fs-md-8{ font-size: 0.8rem !important; } .cy-fs-md-9{ font-size: 0.6rem !important; } } @media (max-width: 1024px){ .cy-fs-md-1{ font-size: 4.0rem !important; } .cy-fs-md-2{ font-size: 3.0rem !important; } .cy-fs-md-3{ font-size: 2.0rem !important; } .cy-fs-md-4{ font-size: 1.5rem !important; } .cy-fs-md-5{ font-size: 1.2rem !important; } .cy-fs-md-6{ font-size: 1.0rem !important; } .cy-fs-md-7{ font-size: 0.9rem !important; } .cy-fs-md-8{ font-size: 0.8rem !important; } .cy-fs-md-9{ font-size: 0.6rem !important; } .cy-fs-1{ font-size: 4.0rem !important; } .cy-fs-2{ font-size: 3.0rem !important; } .cy-fs-3{ font-size: 2.0rem !important; } .cy-fs-4{ font-size: 1.5rem !important; } .cy-fs-5{ font-size: 1.2rem !important; } .cy-fs-6{ font-size: 1.0rem !important; } .cy-fs-7{ font-size: 0.9rem !important; } .cy-fs-8{ font-size: 0.8rem !important; } .cy-fs-9{ font-size: 0.6rem !important; } } @media (min-width: 1025px){ .p-md-6{ padding: 5rem; } .ps-md-6{ padding-left: 5rem; } .pt-md-6{ padding-top: 5rem; } .pe-md-6{ padding-right: 5rem; } .pb-md-6{ padding-bottom: 5rem; } .p-md-7{ padding: 8rem; } .ps-md-7{ padding-left: 8rem; } .pt-md-7{ padding-top: 8rem; } .pe-md-7{ padding-right: 8rem; } .pb-md-7{ padding-bottom: 8rem; } .p-md-8{ padding: 10rem; } .ps-md-8{ padding-left: 10rem; } .pt-md-8{ padding-top: 10rem; } .pe-md-8{ padding-right: 10rem; } .pb-md-8{ padding-bottom: 10rem; } .p-md-9{ padding: 15rem; } .ps-md-9{ padding-left: 15rem; } .pt-md-9{ padding-top: 15rem; } .pe-md-9{ padding-right: 15rem; } .pb-md-9{ padding-bottom: 15rem; } } @media (max-width: 1024px){ .p-6{ padding: 5rem; } .ps-6{ padding-left: 5rem; } .pt-6{ padding-top: 5rem; } .pe-6{ padding-right: 5rem; } .pb-6{ padding-bottom: 5rem; } .p-7{ padding: 8rem; } .ps-7{ padding-left: 8rem; } .pt-7{ padding-top: 8rem; } .pe-7{ padding-right: 8rem; } .pb-7{ padding-bottom: 8rem; } .p-8{ padding: 10rem; } .ps-8{ padding-left: 10rem; } .pt-8{ padding-top: 10rem; } .pe-8{ padding-right: 10rem; } .pb-8{ padding-bottom: 10rem; } .p-9{ padding: 15rem; } .ps-9{ padding-left: 15rem; } .pt-9{ padding-top: 15rem; } .pe-9{ padding-right: 15rem; } .pb-9{ padding-bottom: 15rem; } } @media (min-width: 1025px){ .m-md-6{ margin: 5rem; } .ms-md-6{ margin-left: 5rem; } .mt-md-6{ margin-top: 5rem; } .me-md-6{ margin-right: 5rem; } .mb-md-6{ margin-bottom: 5rem; } .m-md-7{ margin: 8rem; } .ms-md-7{ margin-left: 8rem; } .mt-md-7{ margin-top: 8rem; } .me-md-7{ margin-right: 8rem; } .mb-md-7{ margin-bottom: 8rem; } .m-md-8{ margin: 10rem; } .ms-md-8{ margin-left: 10rem; } .mt-md-8{ margin-top: 10rem; } .me-md-8{ margin-right: 10rem; } .mb-md-8{ margin-bottom: 10rem; } .m-md-9{ margin: 15rem; } .ms-md-9{ margin-left: 15rem; } .mt-md-9{ margin-top: 15rem; } .me-md-9{ margin-right: 15rem; } .mb-md-9{ margin-bottom: 15rem; } } @media (max-width: 1024px){ .m-6{ margin: 5rem; } .ms-6{ margin-left: 5rem; } .mt-6{ margin-top: 5rem; } .me-6{ margin-right: 5rem; } .mb-6{ margin-bottom: 5rem; } .m-7{ margin: 8rem; } .ms-7{ margin-left: 8rem; } .mt-7{ margin-top: 8rem; } .me-7{ margin-right: 8rem; } .mb-7{ margin-bottom: 8rem; } .m-8{ margin: 10rem; } .ms-8{ margin-left: 10rem; } .mt-8{ margin-top: 10rem; } .me-8{ margin-right: 10rem; } .mb-8{ margin-bottom: 10rem; } .m-9{ margin: 15rem; } .ms-9{ margin-left: 15rem; } .mt-9{ margin-top: 15rem; } .me-9{ margin-right: 15rem; } .mb-9{ margin-bottom: 15rem; } } .w-10{ width: 10%!important; } .w-20{ width: 20%!important; } .w-30{ width: 30%!important; } .w-40{ width: 40%!important; } .w-60{ width: 60%!important; } .w-70{ width: 70%!important; } .w-80{ width: 80%!important; } .w-90{ width: 90%!important; } .text-truncate-2{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 2!important; -webkit-box-orient: vertical!important; } .text-truncate-3{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 3!important; -webkit-box-orient: vertical!important; } .text-truncate-4{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 4!important; -webkit-box-orient: vertical!important; } .text-truncate-5{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 5!important; -webkit-box-orient: vertical!important; } .text-truncate-6{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 6!important; -webkit-box-orient: vertical!important; } .text-truncate-7{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 7!important; -webkit-box-orient: vertical!important; } .text-justify{ text-align: justify!important; } .radio-checkbox-form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .radio-checkbox-form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .radio-checkbox-form-control :last-child { margin-bottom: 0 !important; } @media (min-width: 1025px) { .d-pc { display: block; } .d-phone { display: none; } } @media (max-width: 1024px) { .d-pc { display: none; } .d-phone { display: block; } } /*按钮闪烁效果*/ .wyx-shine { position: relative; overflow: hidden; } .wyx-shine button::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-30deg); transform: skewX(-30deg); } .wyx-shine button::before { -webkit-animation: shine 1.5s infinite; animation: shine 1.5s infinite; } @-webkit-keyframes shine { 100% { left: 120%; } } @keyframes shine { 100% { left: 120%; } } /*支付状态*/ .order-status-1, .order-status-30 { color: #FF0027; } .order-status-80, .order-status-90 { color: #ccc; } .order-status-10 { color: #F4AE1B; } .order-status-20, .order-status-40, .order-status-50, .order-status-60, .order-status-70 { color: #4ef817; } .qingchu{ margin: 0!important; padding: 0!important; } @font-face { font-family: U4gm, sans-serif; src: url('../../common/font/Oswald/Oswald-Regular.ttf'); font-display: swap; } body { font-family: Arial, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Neue, sans-serif; /*font: 1rem Arial, serif;*/ font-weight: normal; font-size: 14px; background-color: #eee; overflow-x: hidden; } .ff-u4gm { font-family: U4gm, Arial, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Neue, sans-serif; letter-spacing: 1px; } .ff-base { font-family: Arial, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Neue, sans-serif; /*font-weight: normal;*/ } .text-truncate-2{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 2!important; -webkit-box-orient: vertical!important; } .text-truncate-3{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 3!important; -webkit-box-orient: vertical!important; } .text-truncate-4{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 4!important; -webkit-box-orient: vertical!important; } .text-truncate-5{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 5!important; -webkit-box-orient: vertical!important; } .text-truncate-6{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 6!important; -webkit-box-orient: vertical!important; } .text-truncate-7{ overflow: hidden!important; display: -webkit-box!important; -webkit-line-clamp: 7!important; -webkit-box-orient: vertical!important; } a { text-decoration: none; } .ht-a { color: #000; } .ht-a:hover { color: #fff; } .news-a { color: #000; } .news-a:hover { color: #F4AE1B; } .news-title-a { color: #00719E; } .news-title-a:hover { color: #F4AE1B; } .page a{ color: #00719E; } .page a:hover, .page a:active, .page a.show{ color: #F4AE1B; } header a { color: #fff; } footer a, .foot-a, .footer p{ color: #c9c9c9; } footer a:hover, .foot-a:hover, header a:hover { color: #F4AE1B; } .discords-a { color: #5765F2; } .dd-a { color: #00A5E8; background-color: #fff; } .dd-a:hover { color: #fff; background-color: #F4AE1B; } .forgot-a { color: #0079A8; } .forgot-a:hover { color: #F4AE1B; } .search-a { color: #F4AE1B; } .search-a:hover { color: #00A5E8; } .dropdown-item:focus, .dropdown-item:hover { background-color: #343A40 !important; color: #fff; } /*头部快速登录框背景颜色*/ header.dropdown-item.active, .dropdown-item:active { background-color: #343A40 !important; } header.dropdown-item:focus, .dropdown-item:hover { background-color: #343A40 !important; } .fs-1 { font-size: 2.5rem !important; } .fs-2 { font-size: 1.8rem !important; } .fs-3 { font-size: 1.2rem !important; } .fs-4 { font-size: 1.0rem !important; } .fs-5 { font-size: 0.9rem !important; } .fs-6 { font-size: 0.8rem !important; } .fs-7 { font-size: 0.7rem !important; } .w-10 { width: 10% !important; } .w-20 { width: 20% !important; } .w-30 { width: 30% !important; } .w-40 { width: 40% !important; } .w-60 { width: 60% !important; } .w-70 { width: 70% !important; } .w-80 { width: 80% !important; } .w-90 { width: 90% !important; } .text-shuzi { color: #F4AE1B; } .text-news { color: #007DB3; } .text-star { color: #07B67B; } .border-star{ border-color: #07B67B; } .text-congra{ color: #00B67A; } .text-rate { color: #0E7946; } .text-price { color: #FF0027; } .text-price2 { color: #ff541a; } .text-ico { color: #444141; } .text-step { color: #0077AD; } .text-why { color: #017ABC; } .text-qian { color: #9d9a9a } .text-choose{ color: #00A5E8; } .text-dia4-des{ color: #c9c9c9; } .text-dia4-des li:first-child{ color: #F4AE1B; } .text-dia4-des li::marker{ color: #3E91C9; } .text-product-title{ color: #EAEB0A!important; } .text-product-type{ color: #BFBF08!important; } .text-product-bd{ color: #d7d7d7!important; } .text-product-text{ color: #B0A799!important; } .text-product-price{ color: #facd91!important; } .accordion-button{ color: #000!important; } .accordion-button:focus { box-shadow: 0 0 0 0; } .bg-jianbian1 { background-image: repeating-linear-gradient(45deg, #A07C14, #A07C14, #A07C14, #A47F17, #A47F17, #A47F17); } .bg-jianbian2 { background-image: repeating-linear-gradient(45deg, #2C3E9F, #2C3E9F, #2C3E9F, #303DA1, #303DA1, #303DA1); } .bg-jianbian3 { background-image: repeating-linear-gradient(45deg, #048781, #048781, #048781, #0D8A81, #0D8A81, #0D8A81); } .bg-jianbian4 { background-image: repeating-linear-gradient(45deg, #9A4D16, #9A4D16, #9A4D16, #A64F1E, #A64F1E, #A64F1E); } .bg-jianbian5 { background-image: repeating-linear-gradient(45deg, #519C1E, #519C1E, #519C1E, #509A17, #509A17, #509A17); } .bg-jianbian6 { background-image: repeating-linear-gradient(to bottom, #F7F7F7, #FFF7F5); } .bg-jianbian { background-image: repeating-linear-gradient(45deg, rgb(7, 137, 151), rgb(7, 137, 151), rgb(7, 137, 151), rgb(7, 137, 151), rgb(31, 118, 231), rgb(31, 118, 231), rgb(31, 118, 231), rgb(31, 118, 231)); } .bg-u4gm-currency{ background-image: url('../images/bg-CURRENCY.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-currency-title{ background-color: rgba(255, 142, 0, 0.7); } .bg-u4gm-item{ background-image: url('../images/bg-ITEMS.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-item-title{ background-color: rgba(2, 21, 142, 0.7); } .bg-u4gm-boosting{ background-image: url('../images/bg-BOOSTING.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-boosting-title{ background-color: rgba(9, 137, 159, 0.7); } .bg-u4gm-account{ background-image: url('../images/bg-ACCOUNTS.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-account-title{ background-color: rgba(159, 78, 25, 0.7); } .bg-u4gm-top-up{ background-image: url('../images/bg-TOP UP.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-top-up-title{ background-color: rgba(81, 156, 28, 0.7); } .bg-account{ background-color: #494949!important; } .bg-cate { background-color: #282523; } .bg-content { background-color: #EDEDED; } .bg-hg1 { background-color: #EEBE38; } .bg-hg2 { background-color: #7889FB; } .bg-hg3 { background-color: #61BBB9; } .bg-hg4 { background-color: #ED9064; } .bg-hg5 { background-color: #86C64E; } .bg-topnav { background-color: #EEEEEE; } .bg-navs { background-color: #00A0E6 !important; } .bg-banner { background-color: #F4AE1B; } .bg-news { background-color: #7B570D; } .bg-footnav { background-color: #2B2F38; } .bg-footcontent { /*background-color: #212830;*/ background-color: #2B2F38; } .bg-rate { background-color: #B1F2D0; } .bg-buy { background-color: #008CC8; } .bg-center { background-color: #1D2939; } .bg-wow { background-color: #ccc; } .bg-fee { background-color: #4FAE52; } .bg-table-deep{ background: #f6f6f6; } .bg-dia4-dark{ background-color: #000; } .bg-dia4-dark img{ transition: all 0.5s; } .bg-dia4-dark:hover img{ transform: scale(1.1); } .border-active { border: 1px solid #F4AE1B !important; } .border-zb{ border-color: #ccc !important; } .border-item{ border-color: #ded5d5 !important; } .border-narrow{ border-color: #dee2e6!important; } .border-footer{ border-color: #b2b2b22e!important; } .border-searchm, input.border-searchm:focus-visible { border: 1px solid #01ABEA !important; } .p-first:first-letter { color: #01ABEA; font-size: 1.8rem !important; font-weight: 700 !important; } .btn1 { background-color: #0079B8; color: #fff; } .btn1:hover, .btn1-active { background-color: #51cbff; color: #fff; } .btn1:active { background-color: #00A0E6 !important; border: 1px solid #fff !important; color: #fff !important; } .btn1.show { background-color: #00A0E6 !important; border-color: #fff !important; } .btn1:focus-visible { background-color: #51cbff !important; border: 1px solid #fff !important; } .btn2 { background-color: #ccc; color: #000; } .btn2:hover { background-color: #000; color: #fff; } .btn2:active { background-color: #ccc !important; border: 1px solid #ccc !important; color: #000 !important; } .btn3 { background-color: #F4AE1B; color: #454545; } .btn3:hover { background-color: #d09519 !important; color: #fff !important; } .btn3:active { background-color: #F4AE1B; border: 1px solid #F4AE1B; color: #fff; } .btn4 { background-color: #4d5154; color: #fff; } .btn4:hover { background-color: #606069 !important; color: #fff !important; } .btn4:active { background-color: #4d5154; border: 1px solid #4d5154; color: #fff; } .btn-zb{ color: #000000!important; } .btn-zb:hover, .btn-zb.show, .btn-zb:active{ color: #ffffff!important; background-color: #F4AE1B!important; border-color:#F4AE1B!important; } .btn-buy { color: #fff!important; background-color: #0079B8!important; } .btn-buy:hover { background-color: #F4AE1B!important; color: #fff!important; } .btn-buy:active { background-color: #008CC8 !important; border: 1px solid #008CC8 !important; color: #fff !important; } .btn-buy.show { color: #fff; background-color: #008CC8 !important; border-color: #008CC8 !important; } .btn-discord { color: #fff; background-color: #5765F2; } .btn-discord:hover { background-color: #5765F2; color: #fff; } .btn-discord:active { background-color: #5765F2 !important; border: 1px solid #5765F2 !important; color: #fff !important; } .btn-discord.show { color: #fff; background-color: #5765F2 !important; border-color: #5765F2 !important; } .btn-active1{ color: #ffffff!important; background-color: #F4AE1B!important; border-color:#F4AE1B!important; } .btn-type{ color: #000!important; background-color: #eee!important; } .btn-type-active, .btn-type:hover{ color: #ffffff!important; background-color: #00A0E6!important; } .btn-item{ color: #000!important; border: 1px solid #e9e9e9!important; } .btn-item-active, .btn-item:hover{ color: #00A0E6!important; border-color: #00A0E6!important; } .btn-cart{ z-index: 10000000; border: 1px solid #c5a76d; background: #c5a76d; transition: 0.5s; color: #fff; } .btn-cart:hover{ border: 1px solid #f1c054; background: #f1c054; transition: 0.5s; color: #fff; } .btn-cart:disabled{ border: 1px solid #a2a1a1; background: #a2a1a1; transition: 0.5s; color: #fff!important; opacity: 1; } .btn-congra{ border: 1px solid #00B67A; color: #00B67A; } .btn-congra:active, .btn-congra:hover{ background-color: #00B67A; color: #ffffff; } .btn-wow1{ color: #101010!important; border: 1px solid #cccccc; } .btn-wow1:hover, .btn-wow1:active, .btn-wow1.show, .btn-wow1-active{ color: #fff!important; background-color: #F4AE1B!important; border: 1px solid #F4AE1B!important; } .btn-wow-add{ background-color: #F4AE1B!important; color: #fff!important; } .btn-wow-add:hover, .btn-wow-add:active, .btn-wow-add.show, .btn-wow-add-active{ color: #fff!important; background-color: #0079B8!important; } .btn-total-price-phone{ background-color: #62e8a8; color: #fff; border-radius:30px; } .btn-view-more, .btn-view-more.show, .btn-view-more.active, .btn-view-more:hover, .btn-view-more:active { color: #fff!important; background-color: #00A0E6!important; } .btn-new-games, .btn-new-games.show, .btn-new-games:hover, .btn-new-games:active{ color: #fff!important; background-image: linear-gradient(to right, #1B91CE,#66CAFA); border-color: #1B91CE!important; } .btn-new-language, .btn-new-language.show, .btn-new-language:hover, .btn-new-language:active{ color: #fff!important; background-image: linear-gradient(to right, #0E6491,#04D6F7); border-color: #F1AC1A!important; } .btn-new-login, .btn-new-login.show, .btn-new-login:hover, .btn-new-login:active{ color: #fff!important; background-image: linear-gradient(to right, #AB780E,#F1AC1A); border-color: #F1AC1A!important; } .btn-new-cart, .btn-new-cart.show, .btn-new-cart:hover, .btn-new-cart:active{ color: #fff!important; background-image: linear-gradient(to right, #102A26,#105A3B); border-color: #F1AC1A!important; } @media (min-width: 1025px) { .js-pay-fixed-box{ opacity: 0; } } @media (max-width: 1024px) { .js-pay-fixed-box{ opacity: 1; transition: opacity 0.3s ease-in-out; } .js-pay-fixed-box.fade-out{ opacity: 0; } } ul.games li:hover { --bs-dropdown-link-hover-bg: #F4AE1B !important; } .games .col div:hover { background-color: #F4AE1B !important; } /* 汇率的样式 */ .currency:hover { color: #fff; background-color: #F4AE1B !important; } .border-currency:active { border: 1px solid #343A40 !important; } .border-currency.show { border: 1px solid #343A40 !important; } .border-grey, .border-grey:active, .border-grey:focus { border: 1px solid #343A40 !important; } /* 语言样式 */ .lang:hover { color: #fff; background-color: #F4AE1B !important; } .bg-lang { width: 16px; height: 13px; background: url('../images/lan.png') no-repeat; } /* hotgame图标 */ .hg-box { left: 30px; top: -30px; } .hg-ico { width: 54px; height: 54px; background: url('../images/all-img.png') no-repeat; position: absolute; } /* 头像 */ .touxiang { width: 30px; height: 30px; border-radius: 50%; } /* why choose us图标 */ .wcu-ico { width: 43px; height: 43px; border-radius: 5px; background: url('../images/all-img.png') no-repeat; } /* 底部登录模态窗 */ .modal-backdrop { --bs-backdrop-zindex: 1029; } /*底部图片*/ .footer-img1 { width: 280px; height: 70px; background: url('../images/all-img.png') no-repeat 0 -536px; } .footer-img2 { width: 356px; height: 138px; background: url('../images/all-img.png') no-repeat 0 -600px; } .footer-img3 { width: 218px; height: 102px; background: url('../images/all-img.png') no-repeat 0 -304px; } .footer-img4 { width: 220px; height: 56px; background: url('../images/all-img.png') no-repeat 0 -608px; } .form-control:focus { color: var(--bs-body-color); background-color: var(--bs-form-control-bg); border-color: #F4AE1B; outline: 0; box-shadow: 0 0 0 0; } .news-content { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .carousel-indicators button { width: 10px !important; height: 10px !important; border-radius: 50%; } .carousel-indicators button.active { background-color: #F4AE1B; } .currency-a a:hover { background-color: #f1c77d; color: #fff; } .items-a a:hover { background-color: #7991f3; color: #fff; } .boosting-a a:hover { background-color: #4fd0cb; color: #fff; } .accounts-a a:hover { background-color: #f1a269; color: #fff; } .top-a a:hover { background-color: #7fd347; color: #fff; } .lang-en { background-position: 0 1px; } .lang-zh { background-position: 0 -66px; } .lang-de { background-position: 0 -12px; } .lang-fr { background-position: 0 -39px; } .lang-it { background-position: 0 -26px; } .lang-es { background-position: 0 -53px; } .lang-ar { background-position: 0 -81px; } .lang-ru { background-position: 0 -93px; } .lang-uk { background-position: 0 -107px; } /*分页*/ .page-link{ color: #000; } .disabled > .page-link, .page-link.disabled { background-color: #fff !important; } .active > .page-link, .page-link.active, .page-link:hover{ color: #fff!important; background-color: #00A0E6 !important; border-color: #fff !important; } /*新闻组件中的图片*/ .news-show img { max-width: 100%; height: auto; } .top-img { height: 180px; background: #000; background-size: cover; } /*面包屑*/ .breadcrumb-white .breadcrumb-item + .breadcrumb-item::before { color: #fff !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } /*头部底边框*/ .border-top-grey { border-bottom: 3px solid #222831 !important; } /*头部和底部，手机电脑端的显示与隐藏*/ @media (min-width: 1025px) { .d-pc { display: block; } .d-phone { display: none; } .border-end-pc{ border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important; } /*header{*/ /* height: 102px;*/ /*}*/ /*.empty-box{*/ /* height: 102px;*/ /*}*/ } @media (max-width: 1024px) { .d-pc { display: none; } .d-phone { display: block; } .w-phone-100{ width: 100%!important; } /*header{*/ /* height: 62px;*/ /*}*/ /*.empty-box{*/ /* height: 62px;*/ /*}*/ } .top-cate { color: #545454!important; background-color: #ccc!important; } .top-cate:hover, .top-cate-active{ color: #545454!important; background-color: #FDC409!important; } .gold-qty-invalid.form-control.is-invalid, .was-validated .form-control:invalid { background-position: right calc(2.3em + 0.1875rem) center; } /*头部快速登录悬停颜色*/ .lg-quick li.lg:hover { background-color: #F4AE1B; } .bi-dash::before, .bi-plus::before { margin-top: 30%; } input::placeholder { color: #999999 !important; font-size: 12px; } .form-check-input:checked { background-color: #008CC8 !important; border-color: #008CC8 !important; } .bg-zffs { width: 150px; height: 65px; background: url('../images/all-img.png') no-repeat; } .js-payment-icon-2, .js-payment-icon-3, .js-payment-icon-4, .js-payment-icon-5, .js-payment-icon-6, .js-payment-icon-7, .js-payment-icon-82{ background-position: 6px 2px; } .js-payment-icon-11 { background-position: -154px -248px; } .js-payment-icon-15 { background-position: 4px -355px; } .js-payment-icon-194 { background-position: -506px -300px; } .js-payment-icon-125,.js-payment-icon-156 { background-position: 6px -299px; } .js-payment-icon-128 { background-position: 6px -299px; } .js-payment-icon-69, .js-payment-icon-133, .js-payment-icon-210 { background-position: 9px -56px; } .js-payment-icon-70, .js-payment-icon-135, .js-payment-icon-212{ background-position: 22px -118px; } .js-payment-icon-71, .js-payment-icon-134, .js-payment-icon-211 { background-position: 22px -178px; } .js-payment-icon-73 { background-position: 6px -240px; } .js-payment-icon-77{ background-position: 4px -413px; } .js-payment-icon-78{ background-position: -162px -56px; } .js-payment-icon-79{ background-position: -145px -117px; } .js-payment-icon-80{ background-position: -158px -184px; } .js-payment-icon-90{ background-position: -156px -300px; } .js-payment-icon-105{ background-position: -152px -363px; } .js-payment-icon-104{ background-position: -153px -420px; } .js-payment-icon-103{ background-position: -150px -480px; } .js-payment-icon-111 { background-position: -306px -72px; } .js-payment-icon-112 { background-position: -306px -144px; } .js-payment-icon-113 { background-position: -305px 0; } .js-payment-icon-114 { background-position: -305px -206px; } .js-payment-icon-115 { background-position: -295px -561px; } .js-payment-icon-116 { background-position: -325px -345px; } .js-payment-icon-117 { background-position: -314px -275px; } .js-payment-icon-118 { background-position: -318px -492px; } .js-payment-icon-119 { background-position: -336px -422px; } .js-payment-icon-ideal{ background-position: 8px -476px; } .js-payment-icon-sepa{ background-position: 6px -535px; } .js-payment-icon-giropay{ background-position: -146px 2px; } .js-payment-icon-many{ background-position: -158px -248px; } .js-payment-icon-121{ background-position: -496px 0; } .js-payment-icon-120{ background-position: -496px -69px; } .js-payment-icon-122{ background-position: -158px -184px; } .js-payment-icon-124{ background-position: -509px -151px; } .js-payment-icon-123{ background-position: -474px -226px; } .js-payment-icon-126 { background-position: -506px -300px; } .js-payment-icon-129 { background-position: -506px -300px; } .js-payment-icon-130, .js-payment-icon-167 { background-position: -512px -374px; } .js-payment-icon-136, .js-payment-icon-180 { background-position: -514px -457px; } .js-payment-icon-137 { background-position: -506px -530px; } .js-payment-icon-139 ,.js-payment-icon-161{ background-position: -506px -599px; } .js-payment-icon-138 { background-position: -508px -662px; } .js-payment-icon-141 { background-position: -714px -358px } .js-payment-icon-142 { background-position: -719px -13px; } .js-payment-icon-143 { background-position: -719px -96px; } .js-payment-icon-144 { background-position: -712px -182px; } .js-payment-icon-145 { background-position: -157px -185px; } .js-payment-icon-146 { background-position: -712px -268px; } .js-payment-icon-147 { background-position: -145px -117px; } .js-payment-icon-148 { background-position: -496px 0; } .js-payment-icon-149 { background-position: -323px -345px; } .js-payment-icon-150 { background-position: -712px -436px; } .js-payment-icon-151 { background-position: -712px -527px; } .js-payment-icon-152, .js-payment-icon-176 { background-position: -710px -622px; } .js-payment-icon-153 { background-position: -319px -494px; } .js-payment-icon-154 { background-position: -512px -375px; } .js-payment-icon-155 { background-position: -508px -726px; } .js-payment-icon-160 { background-position: -719px -710px; } .js-payment-icon-162 { background-position: -915px -15px; } .js-payment-icon-163 { background-position: -915px -104px; } .js-payment-icon-164 { background-position: -915px -193px; } .js-payment-icon-165 { background-position: -915px -280px; } .js-payment-icon-166 { background-position: -915px -363px; } .js-payment-icon-168 { background-position: -915px -443px; } .js-payment-icon-169 { background-position: -915px -516px } .js-payment-icon-170 { background-position: -915px -657px } .js-payment-icon-171 { background-position: -915px -587px; } .js-payment-icon-172 { background-position: -915px -727px; } .js-payment-icon-173 { background-position: -1065px -16px; } .js-payment-icon-174 { background-position: -1065px -105px; } .js-payment-icon-175 { background-position: -1065px -194px; } .js-payment-icon-177, .js-payment-icon-179 { background-position: -1064px -292px; } .js-payment-icon-178 { background-position: -1064px -375px; } .js-payment-icon-181 { background-position: -1064px -455px; } .js-payment-icon-182 { background-position: -1064px -531px; } .js-payment-icon-183, .js-payment-icon-184 { background-position: -1064px -605px; } .js-payment-icon-185 { background-position: -1198px -94px; } .js-payment-icon-186 { background-position: -1198px -14px; } .js-payment-icon-187, .js-payment-icon-188 { background-position: -1064px -684px; } .js-payment-icon-189, .js-payment-icon-190 { background-position: -1198px -255px; } .js-payment-icon-191, .js-payment-icon-192 { background-position: -1198px -174px; } .js-payment-icon-193 { background-position: -1198px -340px; } .js-payment-icon-195 { background-position: -1198px -419px; } .js-payment-icon-196, .js-payment-icon-197 { background-position: -1198px -499px; } .js-payment-icon-198 { background-position: -1198px -579px; } .js-payment-icon-199 { background-position: -1198px -660px; } .js-payment-icon-200 { background-position: -1198px -733px; } .js-payment-icon-201 { background-position: -1330px -14px; } .js-payment-icon-202 { background-position: -1330px -94px; } .js-payment-icon-203 { background-position: -1330px -175px; } .js-payment-icon-204 { background-position: -306px -72px; } .js-payment-icon-205 { background-position: -304px -143px; } .js-payment-icon-206 { background-position: -1330px -255px; } .js-payment-icon-207 { background-position: -1366px -338px; } /*.js-payment-icon-208 {*/ /* background-position: -1342px -398px;*/ /*}*/ .js-payment-icon-208 { background-position: 9px -240px; } .js-payment-icon-209 { background-position: -1371px -472px; } .js-payment-icon-219 { background-position: -1332px -563px; } /*静态文字样式*/ .text-content-box h3 { text-align: center !important; font: 1.2rem U4gm, serif; font-weight: 700 !important; margin-bottom: 1.5rem !important; } .text-content-box *:last-child { margin-bottom: 0 !important; } .description-box { width: 600px; font-size: 0.9rem; } .description-box table { width: 100%; } .description-box h2 { margin: 0; font-size: 1rem; text-align: center; background-color: #111; padding: 10px 0; } .description-box td { text-align: center; width: 50%; } .bg-table { background: #24211C; } .description-box a { color: #3fbddd; } .description-box img { max-width: 100%; } .top-nav a:hover { background-color: #F4AE1B; } /*games中的图标动效*/ .icon2 { animation: animateSpan 0.5s ease-in-out infinite; } @keyframes animateSpan { 0% { transform: scale(1.2); } 50% { transform: scale(0.8); } 100% { transform: scale(1.2); } } /*按钮闪烁效果*/ .wyx-shine { position: relative; overflow: hidden; } .wyx-shine button::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-30deg); transform: skewX(-30deg); } .wyx-shine button::before { -webkit-animation: shine 1.5s infinite; animation: shine 1.5s infinite; } @-webkit-keyframes shine { 100% { left: 120%; } } @keyframes shine { 100% { left: 120%; } } .js-initials-box button.active { background-color: #F4AE1B; border-color: #fff !important; color: #2e2e2e!important; } .js-initials-box button:not(.btn-check) + .btn:active { border-color: #fff; } .all-game-item:hover { background-color: #F4AE1B; color: #fff; } .sticky-bottom { z-index: 1019; } .member-center p { margin: 0; } .bg-cod-share { background-color: #2B84F7; } /*支付状态*/ .order-status-1, .order-status-30 { color: #FF0027; } .order-status-80, .order-status-90 { color: #ccc; } .order-status-10 { color: #F4AE1B; } .order-status-20, .order-status-40, .order-status-50, .order-status-60, .order-status-70 { color: #4ef817; } /*代练样式*/ .irs-from, .irs-to, .irs-bar, .irs-single { background-color: #00A0E6 !important; } .irs-handle { border: 4px solid #F4AE1B !important; } .nav-link, .nav-link:hover { color: #999999; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff !important; background-color: #00A0E6 !important; } /*新闻中的表格样式*/ .blog-view-box table td { padding: 5px !important; text-align: center; word-break: break-all; } .blog-view-box h4{ padding-top: 102px; margin-top: -102px; } /*.blog-view-box .bg-monopoly-go{*/ /* background-image: url("../images/monopoly-go-banner.jpg");*/ /*}*/ .blog-view-box .bg-monopoly-go h4{ padding-top: 0; margin-top: 0; } /*底部的信息框*/ #chat-widget-container { /*z-index: 1000 !important;*/ /*max-height: 85% !important;*/ } .hddb-btn{ box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .bg-dia4-pl{ background-image: url('../images/dia4-pl-bg.jpg') ; background-size: contain; } .ff-mont{ font-family: Montserrat,Arial,Helvetica,sans-serif!important; } .js-product-option li::marker{ color: #EAEB0A!important; } .product-box{ border: 2px solid #A99412; background: linear-gradient(180deg,#4A3308,#251D0F,#151514); } @media (min-width: 1025px) { .position-product{ position: fixed; } } @media (max-width: 1024px) { .position-product{ position: static; } } .table td{ border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important; } tr.last:last-child{ border-bottom: 1px solid #dee2e6; } .accordion-button:not(.collapsed) { background-color: #EEEEEE!important; color: #009EE3!important; font-weight: bold; } .cy-select-picker:hover, .cy-select-picker:active, .cy-select-picker:focus-visible{ background-color: #f8f9fa!important; } .cy-select-picker:focus, .cy-select-picker .dropdown-toggle:focus{ border: none!important; } .js-select-picker .bootstrap-select > select.mobile-device:focus + .dropdown-toggle, .js-select-picker .bootstrap-select .dropdown-toggle:focus { outline: none!important; } .js-select-picker .dropdown-item:hover { background-color: #1E90FF !important; } .js-select-picker .dropdown-menu { max-height: 300px; /*max-width: 100%;*/ } /*头部和底部，手机电脑端的显示与隐藏*/ @media (min-width: 1025px) { .d-pc { display: block; } .d-phone { display: none; } } @media (max-width: 1024px) { .d-pc { display: none; } .d-phone { display: block; } .w-phone-100{ width: 100%!important; } .description-box{ width: 100% !important; } } .img-modal-box{ width: 500px; font-size:0.9rem; } .bg-buy-active{ background-color: #51cbff!important; color: #fff!important; } .sell-to-us .form-select:focus { box-shadow: 0 0 0 0; } .js-top-search-result-box a{ white-space: nowrap;!important; } /*cod 代练webp图片显示错误修改*/ .cod-webp-img{ position: absolute; right:-6px; top: 54px; width: 150px; max-height: 150px; } .cod-cart-img img{ max-width: 100%; max-height: 100%; } @media (max-width: 1024px) { .border-wow{ border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important; } } .bg-blog-hot{ background: #fcfcfc; margin: 20px 0; padding: 20px; } .blog-view-box a{ color: #000; font-style: italic!important; } .blog-view-box a.normal{ color: #000; font-style: normal!important; } .blog-view-box a:hover{ color: #0D6EFD!important; } .blog-hot-title-a{ color: #00719E!important; } .blog-hot-title-a:hover{ color: #0D6EFD!important; } @media screen and (max-width: 768px) { .new-blog-1124{ background: #fcfcfc; padding: 0 20px; font-size: 16px; } } @media screen and (min-width: 769px) { .new-blog-1124{ background: #fcfcfc; padding: 0 30px; font-size: 16px; } } @media screen and (max-width: 768px) { .home-banner-box{ height: 120px; } } @media screen and (min-width: 769px) and (max-width: 1024px) { .home-banner-box{ height: 250px; } } @media screen and (min-width: 1024px) and (max-width: 1100px) { .home-banner-box{ height: 320px; } } @media screen and (min-width: 1100px) and (max-width: 1280px) { .home-banner-box{ height: 380px; } } @media screen and (min-width: 1280px) and (max-width: 1536px) { .home-banner-box{ height: 440px; } } @media screen and (min-width: 1536px) and (max-width: 1745px) { .home-banner-box{ height: 520px; } } @media screen and (min-width: 1745px){ .home-banner-box{ height: 568px; } } .install-box{ /*width: 100%;*/ /*position: fixed;*/ /*bottom: 0;*/ background-color: #EEBE38 !important; opacity: 1; } .btn-install{ background-color: #2e869b !important; color: #fff!important; } .btn-install:hover, .btn-install:active, .btn-install.show{ background-color: #0bc3f3 !important; } #narrow-desired-content.form-control:focus{ background-color: #ededed!important; } #narrow-desired-content.form-control::placeholder{ font-size: 12px; } @media screen and (min-width: 768px) { .js-item-countdown { font-weight: bold; font-size: 0.9rem !important; } .img-modal-btn i{ color: #000!important; } .dafuweng-img{ height: 200px!important; } .btn-huodong-close{ left: 180px;top: -30px;width: 30px; } .mlb-platform-item-box label.spbox{ padding: 1.5rem; } } @media screen and (max-width: 769px) { .js-item-countdown { font-size: 0.7rem !important; } .img-modal-btn i{ color: #fff!important; } .dafuweng-img{ width: 100px!important; } .btn-huodong-close{ left: 105px;top: -10px;width: 15px; } .mobile-platform-item-box{ width: 45% !important; } } .wyx-boost-hv1{ transition: all 0.3s ease; opacity: 0.8; } .wyx-boost-hv1:hover{ transition: all 0.3s ease; transform: scale(1.2); opacity: 1; } .elden-big-imgbox img{ width: 100% !important; } .icon-service{ width: 25px; height: 25px; background: url('../images/service.webp') no-repeat; background-size: 100%; border-radius: 50%; } i.na_east{ background-position: 0 0; } i.na_west{ background-position: 0 0; } i.eu_central{ background-position: 0 -37px; } i.jp{ background-position: 0 -375px; } i.sa{ background-position: 0 -450px; } i.korea{ background-position: 0 -824px; } i.sa_east{ background-position: 0 -894px; } i.ap_northeast{ background-position: 0 -861px; } i.asia{ background-position: 0 -933px; } @media screen and (max-width: 769px) { .over-type { height: 68px; overflow-y: hidden; } .over-3 { height: 144px; overflow-y: hidden; } .over-5{ height: 236px; overflow-y: hidden; } } .text-content-box img{ max-width: 100% !important; height: auto; } .chips { float: right; } .chips img{ width: 255px; height: 255px; } @media (max-width: 768px) { .chips { float: none; text-align: center; } } span.box-1126 { position: absolute; top: 0; right: 0; color: #fff; width: 70px; height: 20px; border-radius: 0 0.375rem 0 0; display: flex; font-size: 10px; justify-content: center; align-items: center; } span.box-1126.hot{ background-color: rgb(255, 0, 0); } span.box-1126.discount{ background-color: rgb(30, 160, 30); } span.box-1126.pre-order{ background-color: #0099FF; } span.box-1126.coming-soon{ background-color: #ff0000; } span.box-1126.new{ background-color: #008CFF; } span.box-0227 { position: absolute; top: 0; right: 0; color: #fff; padding: 0 0.5rem; height: 20px; border-radius: 0 0.375rem 0 0; display: flex; font-size: 12px; justify-content: center; align-items: center; } span.box-0227.hot{ background-color: rgb(255, 0, 0); } span.box-0227.discount{ background-color: rgb(30, 160, 30); } span.box-0227.new{ background-color: #008CFF; } .countdown-time { position: absolute; top: 0; right: 0; background-color: #f00; border-radius: 0 0.375rem 0 0; color: #fff; padding: 0 5px; text-wrap: nowrap; } .affix-txt{ color: #000; } .affix-box:hover .affix-txt{ color: #008CFF; } div[dir="rtl"] p.chips{ float: left!important; } .battlefield6-bot-lobby-bg-img{ background: url('../images/battlefiled6-bot-lobby-bg-img.png') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .bo6-bot-lobby-bg-img{ background: url('../images/bo6-bot-lobby-bg-img.png') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .bo7-bot-lobby-bg-img{ background: url('../images/bo7-bot-lobby-bg-img.png') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .wardogs-bg-img{ background: url('../images/wardogs-bg-img.png') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .mw4-bot-lobby-bg-img{ background: url('../images/mw4-bot-lobby-bg-img.png') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .marathon-carry-run-bg-img{ background: url('../images/marathon-carry-run-bg-img.png') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .apex-legends-bg-img{ background: url('../images/apex-legends-bg-img.jpg') center top #fff no-repeat; background-size: contain; padding: 220px 0 20px; } .js-dsc-box{ line-height: normal; } .js-dsc-box p{ margin-bottom: 7px; } @media screen and (min-width: 768px) { .mlb-26-price{ justify-content: end; } } @media screen and (max-width: 769px) { .mlb-26-price{ justify-content: start; } } @media screen and (min-width: 768px) { .dsc-mistfall-hunter-img-box{ max-width: 500px; } } @media screen and (max-width: 769px) { .dsc-mistfall-hunter-img-box{ max-width: 100%; height: auto; } } .bg-game-1542, .bg-game-1543, .bg-game-1544, .bg-game-1545, .bg-game-1546{ height: 180px; background: url('../images/fc27-bg.jpg') no-repeat; background-size: cover; } .rating-box { background-color: #F6E683; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; } .goods-item{ display: flex; justify-content: start; align-items: center; } .goods-item .icn { color: #720000; background: #bd6567; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 0.375rem; margin-right: 0.2rem; } .goods-item .colour-6, .goods-item .colour-7 { background: #b29866; color: #593500 } .goods-item .colour-8 { background: #399b3d; color: #e0e1ff } .goods-item .colour-9 { background: #1a5b2e; color: #e0e1ff } @media screen and (min-width: 768px) { .fifa-25{ margin-top: -110px; } } @media screen and (max-width: 768px) { .fifa-25{ margin-top: 0; } } .product-card { width: 100%; max-width: 360px; background: linear-gradient(180deg, #d2e4fe 0%, #e5f0fe 35%, #f4f8fe 75%, #ffffff 100%); border-radius: 10px; padding: 30px 16px 16px; border: 1px solid #fff; position: relative; box-shadow: 0 24px 28px -6px rgba(45, 93, 161, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.04); } /* 顶部装饰六边形徽章 */ .top-badge-wrapper { display: flex; justify-content: center; margin-bottom: 8px; } .top-badge { width: 36px; height: 38px; background: linear-gradient(145deg, #d3ad67, #a4813e); clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.12); } .top-badge-inner { width: 30px; height: 32px; background: linear-gradient(145deg, #ebd292, #be9548); clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); display: flex; align-items: center; justify-content: center; } /* 上半部：球员卡 + 属性 */ .player-section { display: flex; gap: 12px; margin: -20px 0 14px; } /* 纯球员卡图片 */ .player-card-img { width: 120px; min-width: 120px; height: 168px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(28, 64, 114, 0.18)); } /* 右侧球员信息区 */ .player-details { flex: 1; display: flex; padding: 24px 0 0; flex-direction: column; justify-content: space-between; } .player-name { font-size: 17px; font-weight: 700; color: #0b1a38; margin-bottom: 6px; width: 100%; } /* 属性网格 */ .attributes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .attributes-grid > * { min-width: 0; } .attr-box { background: rgba(255, 255, 255, 0.75); border-radius: 7px; padding: 5px 6px; display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; border: 1px solid rgba(226, 235, 248, 0.6); } .attr-label { font-size: 9px; color: #8c9ba5; font-weight: 600; margin-bottom: 1px; } .star-rating { color: #f59e0b; font-size: 9px; line-height: 1; } .star-rating .inactive { color: #cbd5e1; } /* 标签胶囊按钮 */ .pill-box { background: rgba(255, 255, 255, 0.75); border-radius: 7px; padding: 6px; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #64748b; border: 1px solid rgba(226, 235, 248, 0.6); } .pill-box svg { width: 12px; height: 12px; flex-shrink: 0; } .pill-box.green { color: #10b981; } .pill-box.blue { color: #2563eb; height: 50px; } /* 价格对比区（VS条）：微透底融合背景 */ .price-vs-bar { background-color: rgba(255, 255, 255, 0.65); border-radius: 12px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 14px; border: 1px solid rgba(215, 227, 244, 0.7); } .price-col { flex: 1; display: flex; flex-direction: column; gap: 2px; } .price-col.right { align-items: flex-end; } .price-col-header { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #8391a3; font-weight: 500; height: 17px; } .discount-tag { background: #ef4444; color: #ffffff; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 5px; margin-left: 2px; } .price-value-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; } .price-value { font-size: 16px; font-weight: 550; color: #111827; letter-spacing: -0.2px; } .fut-coin { width: 16px; height: 16px; background: linear-gradient(145deg, #d4af37, #aa820a); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #261b02; font-size: 8px; font-weight: 900; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .vs-divider { display: flex; flex-direction: column; align-items: center; padding: 0 8px; color: #7b889b; font-size: 11px; font-weight: 900; position: relative; } .vs-divider::before, .vs-divider::after { content: ""; width: 1px; height: 12px; background: #d8e2ee; } .vs-divider::before { margin-bottom: 2px; } .vs-divider::after { margin-top: 2px; } /* 下方结算区域 */ .checkout-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .currency-left { display: flex; align-items: center; gap: 8px; } .ps-icon { width: 22px; height: 22px; color: #00439c; } .price-group { display: flex; flex-direction: column; } .current-price { font-size: 19px; font-weight: 900; color: #d85c27; line-height: 1.1; } .original-price { font-size: 11px; color: #8d9ba8; text-decoration: line-through; margin-top: 2px; } /* 操作按钮组 */ .actions-right { display: flex; align-items: center; gap: 8px; } .quantity-counter { display: flex; align-items: center; background: #ffffff; border: 1px solid #dce4ee; border-radius: 8px; padding: 2px 6px; height: 32px; } .counter-btn { background: none; border: none; font-size: 14px; font-weight: 700; color: #334155; width: 20px; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; } .counter-btn:hover { opacity: 0.6; } .counter-val { font-size: 13px; font-weight: 700; min-width: 20px; text-align: center; color: #0f172a; } .cart-btn { width: 34px; height: 34px; background-color: #fceee8; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #d85c27; transition: background-color 0.2s; } .cart-btn:hover { background-color: #fbdcd0; } .cart-btn svg { width: 18px; height: 18px; } /* 购买按钮 */ .buy-now-btn { width: 100%; height: 42px; background: linear-gradient(90deg, #ff6b1a, #f9530b); border: none; border-radius: 10px; color: #111111; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(249, 83, 11, 0.25); transition: transform 0.1s, box-shadow 0.2s; } .buy-now-btn:active { transform: scale(0.98); box-shadow: 0 2px 6px rgba(249, 83, 11, 0.2); } /* 卡片容器开始 */ .card-wrapper { width: 140px; height: 180px; display: flex; flex-direction: column; align-items: center; position: relative; overflow: visible; } /* 卡片主容器：按 EA FC 原版比例 252:355 适配为 128*180，水平居中于 140px 容器中 */ .fc-card { position: relative; width: 128px; height: 180px; background-image: url('../images/fc27-players-bg.png'); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; overflow: visible; } .fc-card.team_of_the_week{ background-image: url('../images/fc27_team_of_the_week.webp'); } .fc-card.ads_and_sponsorships{ background-image: url('../images/fc27_ads_and_sponsorships.webp'); } .fc-card.squad_foundations{ background-image: url('../images/fc27_squad_foundations.webp'); } .fc-card.ones_to_watch{ background-image: url('../images/fc27_ones_to_watch.webp'); } .fc-card.hall_of_fut{ background-image: url('../images/fc27_hall_of_fut.webp'); } .fc-card.base_hero{ background-image: url('../images/fc27_base_hero.webp'); } .fc-card.base_icon, .fc-card.all_icons{ background-image: url('../images/fc27_base_icon.webp'); } .fc-card.debut_icon{ background-image: url('../images/fc27_debut_icon.webp'); } .fc-card.gold{ background-image: url('../images/fc27_gold.webp'); } .fc-card.silver{ background-image: url('../images/fc27_silver.webp'); } .fc-card.bronze{ background-image: url('../images/fc27_bronze.webp'); } .fc-card.destined_for_glory{ background-image: url('../images/fc27_destined_for_glory.webp'); } .fc-card.base_hero .card-rating-block, .fc-card.base_hero .stat-label, .fc-card.base_hero .stat-val, .fc-card.base_hero .fc-player-name, .fc-card.destined_for_glory .card-rating-block, .fc-card.destined_for_glory .stat-label, .fc-card.destined_for_glory .stat-val, .fc-card.destined_for_glory .fc-player-name, .fc-card.team_of_the_week .card-rating-block, .fc-card.team_of_the_week .stat-label, .fc-card.team_of_the_week .stat-val, .fc-card.team_of_the_week .fc-player-name, .fc-card.hall_of_fut .card-rating-block, .fc-card.hall_of_fut .stat-label, .fc-card.hall_of_fut .stat-val, .fc-card.hall_of_fut .fc-player-name, .fc-card.ones_to_watch .card-rating-block, .fc-card.ones_to_watch .stat-label, .fc-card.ones_to_watch .stat-val, .fc-card.ones_to_watch .fc-player-name, .fc-card.ads_and_sponsorships .card-rating-block, .fc-card.ads_and_sponsorships .stat-label, .fc-card.ads_and_sponsorships .stat-val, .fc-card.ads_and_sponsorships .fc-player-name, .fc-card.squad_foundations .card-rating-block, .fc-card.squad_foundations .stat-label, .fc-card.squad_foundations .stat-val, .fc-card.squad_foundations .fc-player-name { color: #fff; } /* ==================== 1. 球员图片 ==================== */ .player-image { position: absolute; left: 50%; transform: translateX(-50%); top: 32px; width: 74px; z-index: 2; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 95%); mask-image: linear-gradient(to bottom, #000 68%, transparent 95%); } /* ==================== 2. 左上角评分 & 位置 ==================== */ .card-rating-block { position: absolute; top: 40px; left: 21px; display: flex; flex-direction: column; align-items: center; z-index: 3; color: #44351f; } .rating-number { font-size: 15px; font-weight: 800; line-height: 0.9; letter-spacing: -0.5px; } .rating-pos { font-size: 9px; font-weight: 800; margin-top: 1px; line-height: 1; transform: scale(0.78); transform-origin: center; } .rating-role { font-size: 9px; font-weight: 900; line-height: 0.8; letter-spacing: -0.5px; transform: scale(0.65); transform-origin: center; margin-top: -1px; } /* ==================== 3. 左侧 PlayStyle 徽章 ==================== */ .playstyle-badge { position: absolute; top: 90px; left: 7px; width: 13px; height: 15px; z-index: 4; background: #fdfdfc; border: 0.5px solid #4a3b25; clip-path: polygon(50% 0%, 100% 28%, 100% 72%, 50% 100%, 0% 72%, 0% 28%); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.35); } .playstyle-badge svg { width: 7px; height: 7px; fill: #44351f; } /* ==================== 4. 右侧次选位置徽章 (LM / LW) ==================== */ .alt-positions { position: absolute; top: 51px; right: 3px; width: 16px; height: 19px; background: #f7f6f2; border: 0.5px solid #7c6f5d; clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 50%, calc(100% - 3px) 100%, 3px 100%, 0% 50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .alt-pos-item { font-size: 9px; font-weight: 800; color: #44351f; line-height: 1; transform: scale(0.6); transform-origin: center; } .alt-divider { width: 8px; height: 1px; background-color: #baa891; margin: 0; } /* ==================== 5. 球员姓名 ==================== */ .fc-player-name { position: absolute; top: 115px; left: 0; width: 100%; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; color: #44351f; letter-spacing: 0.1px; z-index: 3; } /* ==================== 6. 六维属性网格 ==================== */ .stats-grid { position: absolute; top: 129px; left: 17px; right: 17px; display: flex; justify-content: space-between; z-index: 3; } .stat-col { display: flex; flex-direction: column; align-items: center; width: 14px; } .stat-label { font-size: 9px; font-weight: 800; color: #44351f; letter-spacing: 0.2px; transform: scale(0.55); transform-origin: center; line-height: 1; } .stat-val { font-size: 10px; font-weight: 700; color: #44351f; margin-top: 1px; line-height: 1; transform: scale(0.8); transform-origin: center; } /* ==================== 7. 底部国籍与传奇徽章 ==================== */ .card-footer-icons { position: absolute; bottom: 22px; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 4px; z-index: 3; } /* 法国国旗 */ .flag { width: 11px; height: 7px; display: flex; box-shadow: 0 0.5px 2px rgba(0,0,0,0.25); border-radius: 1px; overflow: hidden; } /* 传奇通用图标 */ .icon-crest { width: 9px; height: 9px; fill: #8b7656; } /* ==================== 8. 卡片下方的 Futbin 属性药丸条 ==================== */ .futbin-bar { margin-top: -20px; height: 11px; background: #e4e7ea; border: 0.5px solid #c9cfd6; transform: skewX(-14deg); display: inline-flex; align-items: center; padding: 0 2px 0 3px; border-radius: 1px; overflow: hidden; z-index: 4; } .futbin-bar > * { transform: skewX(14deg); } .bar-item { font-size: 8px; font-weight: 700; color: #334155; display: flex; align-items: center; padding: 0 2px; gap: 1px; transform: skewX(14deg) scale(0.7); transform-origin: center; line-height: 1; } /* 覆盖内联 SVG 尺寸，避免脚标过大 */ .bar-item svg { width: 5px !important; height: 5px !important; } .bar-divider { width: 1px; height: 6px; background-color: #94a3b8; } /* 94.7 绿色高亮框 */ .bar-rating { background: #4ad999; color: #0f172a; font-weight: 900; font-size: 9px; padding: 0 3px; border-radius: 1px; margin-left: 1px; transform: skewX(14deg) scale(0.75); transform-origin: center; line-height: 1.1; }