* {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.modal-header {
padding: 16px !important;
}
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:focus,
.btn-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
box-shadow: none;
}
body, .wrapper, .content-page {
overflow: visible;
}
.header-navbar {
height: 70px;
background-color: #fff;
box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
}
.header-flex {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-title {
font-size: 24px;
font-weight: 700;
display: inline-block;
color: #000;
margin-left: 10px;
vertical-align: middle;
font-family: "SimHei";
}
body {
background-color: #EEF1F6 !important;
height: 100%;
}
body[data-leftbar-compact-mode=condensed] {
min-height: 0;
}
body[data-layout=topnav] .content-page {
padding: 0!important;
min-height: 0;
}
.content {
margin-bottom: 69px;
}
.page-title-right {
display: block !important;
float: right !important;
margin-top: 17px !important;
}
@media screen and (max-width: 380px) {
.app-search {
width: 160px;
}
}
.hyper-wrapper a {
color: #000;
}
.hyper-footer {
position: absolute;
width: 100%;
bottom: 0;
padding: 20px 0;
line-height: 16px;
border-top: 1px solid rgba(152,166,173,.2);
color: #98a6ad;
}
@media screen and (max-width: 768px) {
.hyper-footer {
text-align: center;
}
}
.hyper-footer a {
color: #919ca7;
}
@media screen and (max-width: 576px) {
.container {
padding: 0 12px;
max-width: 100% !important;
}
}
@media screen and (min-width: 576px) {
.container {
padding: 0;
}
}
@media screen and (min-width: 992px) {
.hyper-sm-last {
-webkit-box-ordinal-group: 14;
-ms-flex-order: 13;
order: 13;
}
}
.modal-body img {
max-width: 100%;
height: auto;
}
@media screen and (min-width: 1367px) {
.modal-dialog {
max-width: 900px !important;
}
}
@media screen and (max-width: 1367px) {
.modal-dialog {
max-width: 700px !important;
}
}
@media screen and (max-width: 768px) {
.modal-dialog {
max-width: 100% !important;
}
}
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.nav-list::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 767px) {
.tab-link {
min-width: 70px;
}
}
@media screen and (max-width: 767px) {
.tab-link {
min-width: 60px;
}
}
.tab-link {
font-size: 1rem;
padding: 6px 12px;
border-radius: .5rem;
border: 1px solid rgba(24, 49, 83, 0.3);
color: #183153;
text-align: center;
position: relative;
overflow: hidden;
}
.tab-link.active {
color: #fff;
background: #183153;
}
.img-checkmark img {
width: 36px;
}
.tab-link.active .img-checkmark {
display: block;
}
.img-checkmark {
position: absolute;
opacity: 0.8;
right: -6px;
bottom: -12px;
display: none;
}
.home-card {
box-shadow: 0 0px 6px 0 rgb(0 0 0 / 6%);
transition: all .5s;
}
.home-card:hover {
box-shadow: 0px 4px 12px 0 rgb(0 0 0 / 12%);
}
@media screen and (max-width: 767px) {
.hyper-wrapper {
padding-left: 0;
padding-right: 0;
display: grid;
grid-gap: 12px;
gap: 12px;
}
.home-card {
padding: 12px;
margin-bottom: 0;
font-size: 14px;
display: flex;
align-items: center;
border-radius: .25rem;
cursor: pointer;
background-color: #fff;
}
.home-img {
max-width: 80px;
margin-right: 12px;
}
.flex {
display: flex;
flex-direction: column;
}
.name {
font-size: 14px;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: left;
}
.price {
color: #6c757d;
}
.price b {
font-size: 14px;
}
}
@media screen and (min-width: 768px) {
.hyper-wrapper {
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
grid-gap: 12px;
}
.home-card {
padding: 20px 20px 14px 20px;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 16px;
cursor: pointer;
background-color: #fff;
}
.home-img {
}
.flex {
display: flex;
flex-direction: column;
margin-top: 12px;
}
.name {
font-size: 16px;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price {
color: #6c757d;
text-align: center;
}
.price b {
font-size: 24px;
}
}
@media screen and (min-width: 992px) {
.hyper-wrapper {
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
grid-gap: 12px;
}
.home-card {
padding: 20px 20px 14px 20px;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 16px;
cursor: pointer;
background-color: #fff;
}
.home-img {
}
.flex {
display: flex;
flex-direction: column;
margin-top: 12px;
}
.name {
font-size: 16px;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price {
color: #d0021b;
text-align: center;
}
.price b {
font-size: 24px;
}
}
@media screen and (min-width: 1320px) {
.hyper-wrapper {
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
grid-gap: 12px;
}
.home-card {
padding: 20px 20px 14px 20px;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 16px;
cursor: pointer;
background-color: #fff;
}
.home-img {
}
.flex {
display: flex;
flex-direction: column;
margin-top: 12px;
}
.name {
font-size: 16px;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price {
color: #d0021b;
text-align: center;
}
.price b {
font-size: 24px;
}
}
.form-group h3 {
font-weight: 400 !important;
color: #212529 !important;
}
.form-group h1.product-title {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #212529 !important;
margin-top: 0;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.geetest_holder.geetest_wind {
width: 100% !important;
min-width: 100% !important;
}
.buy-product img {
max-width:100%;
height: auto;
border-radius: 5px;
cursor: pointer;
}
@media screen and (min-width: 992px) {
.buy-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 6px;
}
.buy-shop {
grid-column: span 2 / span 2;
}
.buy-product {
grid-column: span 4 / span 4;
}
}
@media screen and (min-width: 1367px) {
.pay-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,200px));
grid-gap: 12px;
}
}
@media screen and (min-width: 991px) and (max-width: 1367px) {
.pay-grid {
display: grid;
grid-template-columns: repeat(1,minmax(0,300px));
grid-gap: 6px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.pay-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,200px));
grid-gap: 12px;
}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.pay-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,200px));
grid-gap: 12px;
}
}
@media screen and (max-width: 576px) {
.pay-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,200px));
grid-gap: 12px;
}
}
@media screen and (max-width: 380px) {
.pay-grid {
display: grid;
grid-template-columns: repeat(1,minmax(0,300px));
grid-gap: 6px;
}
}
.pay-type {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
min-height: 48px;
min-width: 140px;
background-color: #fff;
color: #333333;
border: 1px solid #dbe6f1;
border-radius: 6px;
}
.pay-type:hover {
background-color: #fff;
color: #000000;
}
.pay-type.active {
background-color: #f1f6ff;
color: #071c3a;
border: 1px solid #d0d0d0;
}
.qrpay-wrapper {
position: relative;
display: inline-block;
}
.qrpay-wrapper img {
position: relative;
z-index: 1;
}
@media screen and (max-width: 576px) {
.topbar-right-menu .user-dropdown .user-name-text {
display: none;
}
.topbar-right-menu .user-dropdown .nav-link {
padding-right: 0;
}
}
.topnav-logo {
padding-right: 0 !important;
}
.nav-text-desktop {
display: inline;
}
.nav-text-mobile {
display: none;
}
@media screen and (max-width: 576px) {
.nav-text-desktop {
display: none;
}
.nav-text-mobile {
display: inline;
}
}
.qrpay-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
border-radius: 6px;
z-index: 2;
}
.qrpay-icon svg {
width: 32px;
height: 32px;
}
.buy-price {
color: #ea5455;
}
.orderinfo-grid {
display: grid;
grid-template-columns: auto;
}
@media screen and (min-width: 767px) {
.orderinfo-card-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
grid-gap: 12px;
}
.orderinfo-info {
grid-column: span 2 / span 2;
}
.orderinfo-kami {
grid-column: span 4 / span 4;
}
.card{
border-radius: 16px!important;
}
.modal-content{
border-radius:16px;
}
}
@media screen and (max-width: 767px) {
.card{
border-radius: 8px!important;
}
.home-card{
border-radius: 8px!important;
}
.modal-content{
border-radius:8px!important;
}
}
.textarea-kami {
min-height: calc(100% - 48px);
background-color: #FFFFFF!important;
color: #183153!important;
}
.kami-btn {
margin-top: 6px;
float: right;
}
.order-table th,
.order-table td {
vertical-align: middle;
white-space: nowrap;
}
.order-table th.goods-col,
.order-table td.goods-col {
white-space: normal;
}
.order-table th.time-col,
.order-table td.time-col {
white-space: normal;
}
.order-table th.order-sn-col,
.order-table td.order-sn-col {
max-width: 220px;
}
.order-table td.status-cell {
text-align: left;
}
.order-table .btn {
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
}
.order-table td.goods-col {
min-width: 15rem;
}
.order-table td.time-col {
min-width: 7.5rem;
}
.recharge-table th,
.recharge-table td {
vertical-align: middle;
white-space: nowrap;
}
.recharge-table th.order-sn-col,
.recharge-table td.order-sn-col {
max-width: 220px;
}
.recharge-table td.status-cell {
text-align: left;
}
.recharge-table td.time-col {
min-width: 7.5rem;
white-space: nowrap;
}
.user-center-recharges {
margin-top: 1.5rem;
}
.btn-custom {
}
.orderinfo-status {
white-space: nowrap;
}
.orderinfo-status .btn {
padding: 0.1rem 0.6rem;
font-size: 0.8rem;
}
.user-center-account {
margin-bottom: 0.75rem;
}
.recharge-modal .modal-dialog {
max-width: 450px !important;
width: 450px !important;
}
@media (max-width: 480px) {
.recharge-modal .modal-dialog {
max-width: 100% !important;
width: auto !important;
margin: 0 12px;
}
}
.recharge-modal .modal-content {
border-radius: 12px;
}
.recharge-modal .modal-header {
border-bottom: none;
padding-bottom: 0.4rem;
}
.recharge-modal .modal-footer {
border-top: none;
}
.recharge-amount-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.recharge-amount-list .recharge-quick-amount {
flex: 0 0 calc(33.333% - 12px);
text-align: center;
}
.recharge-quick-amount {
padding: 0.4rem 0.4rem;
font-size: 0.9rem;
border-radius: 6px;
}
.recharge-quick-amount .font-weight-bold {
font-size: 1rem;
}
.recharge-quick-amount {
background-color: #ffffff !important;
color: #333333 !important;
border: 1px solid #dbe6f1 !important;
box-shadow: none !important;
}
.recharge-quick-amount:hover,
.recharge-quick-amount:focus {
color: #000000 !important;
}
.recharge-quick-amount.active,
.recharge-quick-amount.active:hover,
.recharge-quick-amount.active:focus,
.recharge-quick-amount:active {
background-color: #f1f6ff !important;
color: #071c3a !important;
border: 1px solid #d0d0d0 !important;
}
.recharge-quick-amount.active .recharge-bonus-text {
opacity: 0.9;
}
#recharge-pay-area .qrpay-wrapper {
width: 220px;
height: 220px;
border-radius: 8px;
background: #f5f5f8;
overflow: hidden;
}
#recharge-pay-area .qrpay-wrapper img,
#recharge-pay-area .recharge-qr-placeholder {
width: 100%;
height: 100%;
}
.recharge-qr-placeholder {
background-image:
linear-gradient(90deg, rgba(220,220,230,0.9) 1px, transparent 1px),
linear-gradient(180deg, rgba(220,220,230,0.9) 1px, transparent 1px);
background-size: 12px 12px;
}
#recharge-qr-wrapper{
border: 1px solid #dddddd;
border-radius: 6px;
overflow: hidden;
}
#recharge-qr-wrapper .recharge-qr-mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 8px;
z-index: 10;
}
#recharge-qr-wrapper .recharge-qr-mask #recharge-mask-icon {
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.topnav-navbar .user-dropdown > a {
color: #f1f5f9;
}
.topnav-navbar .user-dropdown.show > a {
color: #ffffff;
}
.topnav-navbar .dropdown-menu {
min-width: auto;
}
.dropdown-menu .dropdown-item {
color: #183153;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
background-color: #f1f6ff;
color: #071c3a;
}
.back-to-top {
display: none;
position: fixed;
bottom: 120px;
right: 20px;
z-index: 99;
}
#back-to-top {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
width: 36px;
height: 36px;
padding-bottom: 10px;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap');
.price,
.col-price,
.product-price,
.order-price,
.total-price,
.amount,
[class*="price"],
[class*="amount"] {
font-family: 'Roboto Mono', 'SF Mono', 'Consolas', 'Monaco', monospace !important;
letter-spacing: -0.5px !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: 'tnum' 1 !important;
}
.home-list-table .col-price,
.home-list-table td.col-price,
.home-list-table th.col-price {
font-family: 'Roboto Mono', monospace !important;
letter-spacing: -0.5px !important;
font-weight: 500 !important;
}
.buy-page .price,
.buy-page .product-price,
.buy-page .total-price,
.buy-page .amount {
font-family: 'Roboto Mono', monospace !important;
letter-spacing: -0.6px !important;
font-weight: 500 !important;
}
.user-center .price,
.user-center .order-price,
.user-center .amount,
.order-list .price,
.order-list .amount {
font-family: 'Roboto Mono', monospace !important;
letter-spacing: -0.5px !important;
font-weight: 400 !important;
}
table td.price,
table td[class*="price"],
table td[class*="amount"],
.table .price,
.table [class*="price"],
.table [class*="amount"] {
font-family: 'Roboto Mono', monospace !important;
letter-spacing: -0.7px !important;
text-align: right !important;
}
.card .price,
.card-body .price,
.card [class*="price"] {
font-family: 'Roboto Mono', monospace !important;
letter-spacing: -0.5px !important;
}
@media (max-width: 768px) {
.price,
.col-price,
[class*="price"],
[class*="amount"] {
letter-spacing: -0.8px !important;
}
}
.price-large,
.total-price-large,
h1 .price,
h2 .price,
h3 .price {
font-family: 'Roboto Mono', monospace !important;
letter-spacing: -0.8px !important;
font-weight: 600 !important;
}
.currency-symbol {
font-family: 'Roboto Mono', monospace !important;
margin-right: 1px !important;
}
.pay-type {
display: inline-flex !important;
align-items: center !important;
padding: 6px 12px !important;
margin: 4px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 4px !important;
background: #fff !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all 0.2s !important;
cursor: pointer !important;
color: #4a5568 !important;
}
.pay-type:hover {
border-color: #3688fc !important;
color: #3688fc !important;
}
.pay-type.active {
background: #3688fc !important;
border-color: #3688fc !important;
color: #fff !important;
}
.pay-type svg, .pay-type img {
width: 18px !important;
height: 18px !important;
margin-right: 6px !important;
vertical-align: middle !important;
}
.pay-type.active svg path {
fill: #fff !important;
}
html, body {
overflow-x: hidden;
max-width: 100%;
}
@media screen and (max-width: 767px) {
body, p, h1, h2, h3, h4, h5, h6, span, div, a, td, th, li, label {
word-break: break-word;
overflow-wrap: break-word;
}
.name, .media-body h5, .xlo-product-name, .buy-title,
.form-group h3, .card-title, .header-title {
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
.home-card, .card, .card-body {
overflow: hidden;
max-width: 100%;
}
.table-responsive, .order-table, .recharge-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.buy-grid {
overflow-x: hidden;
}
.navbar-brand, .topnav-logo {
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb {
flex-wrap: wrap;
overflow-x: hidden;
}
.breadcrumb-item {
word-break: break-word;
overflow-wrap: break-word;
}
.badge, .badge-outline-primary, .badge-outline-danger {
white-space: normal;
word-break: break-word;
}
.mobile-only-content {
overflow-x: hidden;
}
.home-list-table tbody td.col-name .media-body h5 {
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.pay-grid {
max-width: 100%;
overflow-x: hidden;
}
.pay-type {
min-width: unset !important;
max-width: 100%;
white-space: normal;
word-break: break-word;
}
.bill-container, .orderinfo-grid {
overflow-x: hidden;
}
.user-center-orders, .user-center-recharges {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media screen and (max-width: 400px) {
.container {
padding-left: 18px !important;
padding-right: 18px !important;
max-width: 100% !important;
}
.card-body {
padding: 18px !important;
border-radius: 16px !important;
}
.card {
border-radius: 16px !important;
}
#submit, .btn-danger, .btn-primary {
font-size: 14px !important;
padding: 10px 16px !important;
}
.form-group h3 {
font-size: 26px !important;
word-break: break-word !important;
}
.form-group h1.product-title {
font-size: 26px !important;
font-weight: 700 !important;
word-break: break-word !important;
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
.tab-link {
font-size: 12px !important;
padding: 4px 8px !important;
min-width: 50px !important;
}
}
.cf-turnstile { border-radius: 10px !important; overflow: hidden !important; }
.cf-turnstile iframe { border-radius: 10px !important; display: block !important; }