@media all and (min-width: 1550px) { .single-image img { height: 250px; } } @media all and (min-width: 1650px) { .single-image img { height: 260px; } } @media all and (min-width: 1750px) { .single-image img { height: 270px; } } @media all and (min-width: 1850px) { .single-image img { height: 290px; } } @media all and (min-width: 1950px) { .single-image img { height: 320px; } } @media all and (min-width: 2150px) { .single-image img { height: 350px; } } @media all and (min-width: 2350px) { .single-image img { height: 370px; } } @media all and (min-width: 2550px) { .single-image img { height: 390px; } } @media all and (min-width: 2750px) { .single-image img { height: 410px; } } @media all and (min-width: 2950px) { .single-image img { height: 430px; } } @media all and (min-width: 3150px) { .single-image img { height: 450px; } } @media all and (min-width: 3550px) { .single-image img { height: 500px; } } @media all and (min-width: 3840px) { .single-image img { height: 550px; } body { --scale-4k: 1.5; } body #page_games #games { padding-left: 10% !important; padding-right: 10% !important; } #home_member_info, #home_rank { padding: 10%; } body label { font-size: calc(0.8125rem * var(--scale-4k) ); letter-spacing: calc(.03125rem * var(--scale-4k)); } body .ranking-div label { font-size: calc(1.8125rem * var(--scale-4k) ); } #page_games>section.header-section div.header-menu, #page_games>section.header-section div.header-menu+div, #page_games #games > section > div { height: calc(60px * var(--scale-4k)) !important; font-size: xx-large; } body .header-section .header-area .logo { width: calc(96px * var(--scale-4k)); height: calc(96px * var(--scale-4k)); } body #games .game-image img { width: calc(168px * var(--scale-4k) * var(--scale-4k) ); height: calc(240px * var(--scale-4k) var(--scale-4k) ); } body { /* 原来写的是 body#main_body——main.htm 引导阶段的 loading 动画改造后，id="main_body" 从本身挪到了内层的容器 div 上，body#main_body 这个复合选择器不会再匹配到任何元素。这条规则本意就是给整个页面设置基准字号，直接用 body 标签选择器更准确，也不受 id 改动影响 */ font-size: calc(0.9375rem*var(--scale-4k)); } body .font-size-5, body .fs-5 { font-size: calc(1.125rem * var(--scale-4k)) !important; } body .font-size-4, body .fs-4 { font-size: calc(1rem * var(--scale-4k)) !important; } body .progress { font-size: calc(.75rem * var(--scale-4k)) !important; } body .remaining, body .progress { height: calc(1.6rem* var(--scale-4k)) !important; line-height: calc(1.6rem* var(--scale-4k)) !important; } body .fa-2x { font-size: calc(2rem * var(--scale-4k)) !important; } body #page-shop .shop-image img { width: calc(138px * var(--scale-4k) * 1.6) !important; height: calc(138px * var(--scale-4k)* 1.6) !important; } body #page-shop label { font-size: calc(0.8125rem * var(--scale-4k) *2); } body .btn-lg, .btn-group-lg>.btn, body .table thead th { font-size: calc(0.8125rem * var(--scale-4k)) !important; } body .events .event .info .name { font-size: calc(1rem * var(--scale-4k)) !important; } body a.reboot-button { left: 175px; } body .dropdown .dropdown-item { padding: 0 calc(1.25rem * var(--scale-4k)); line-height: calc(2.125rem * var(--scale-4k)); } body .dropdown .dropdown-menu, body .dropdown .dropdown-menu .container { font-size: calc(0.8125rem * var(--scale-4k)); ; line-height: 4.75; margin-top: 0; } body .form-control { font-size: 2.34375rem; padding: 2.3375rem 1.875rem; } .modal-dialog { max-width: 1250px; } .myModalConvertMember .modal-dialog { max-width: calc(700px * 2.5) !important; width: calc(700px * 2.5) !important; } body h5, body .h5 { font-size: calc(1.25rem * var(--scale-4k)); ; } body p { font-size: calc(15px * var(--scale-4k)); } body #page_login, body #page_start_session, body #page_lock { font-size: calc(0.9375rem * var(--scale-4k)); } body .member-sidebar, body .main-card, body .menu-header, body .game-item, body .shop-item-wrapper, body .event-detail { font-size: calc(0.875rem * var(--scale-4k)); } body .member_balance_realtime, body .member_coin_balance, body .member_balance_bonus_realtime, body .member_info_name { font-size: calc(1rem * var(--scale-4k)); } body .cafe_info_member_logo { width: calc(72px * var(--scale-4k)); height: calc(72px * var(--scale-4k)); } body .client-btn-success, body .client-btn-close, body .control-label, body .modal-input, body .formDiv, body .client-form-row { font-size: calc(0.875rem * var(--scale-4k)); } body .member_account, body .username, body .version-text, body .version_date, body .menu-icon { font-size: calc(0.875rem * var(--scale-4k)); } body .game-right-sidebar, body .product-list, body .shop-electric-shell, body .promoted-product, body .offers_div { font-size: calc(0.875rem * var(--scale-4k)); } body .topup-summary, body .topup-summary-value, body .summary-amount, body .summary-member, body .summary-minutes { font-size: calc(1rem * var(--scale-4k)); } body .license-account, body .license-password, body .license-item, body .license-account-btn, body .license-password-btn { font-size: calc(0.875rem * var(--scale-4k)); } body .myModalTopupLogin .modal-dialog, body .myModalTopup .modal-dialog { width: calc(500px * var(--scale-4k)) !important; max-width: calc(500px * var(--scale-4k)) !important; } body .myModalTopupLogin .modal-body, body .myModalTopup .modal-body { padding: calc(20px * var(--scale-4k)) calc(70px * var(--scale-4k)) !important; } body .myModalTopupLogin .razorpay-qr-img, body .myModalTopup .razorpay-qr-img { width: calc(266px * var(--scale-4k)); height: calc(350px * var(--scale-4k)); border-radius: calc(5px * var(--scale-4k)); } body .myModalTopupLogin .topup-payment-type-img, body .myModalTopup .topup-payment-type-img, body .myModalTopupLogin #login_payment_qr img, body .myModalTopupLogin #login_payment_qr canvas, body .myModalTopup #payment_qr img, body .myModalTopup #payment_qr canvas { width: calc(266px * var(--scale-4k)) !important; max-width: calc(266px * var(--scale-4k)) !important; height: auto !important; } body .myModalTopupLogin #login_payment_url > *:not(.razorpay-qr-img) img, body .myModalTopupLogin #login_payment_url > *:not(.razorpay-qr-img) canvas, body .myModalTopup #payment_url > *:not(.razorpay-qr-img) img, body .myModalTopup #payment_url > *:not(.razorpay-qr-img) canvas, body #inline_guest_qr img, body #inline_guest_qr canvas, body #inline_balance_qr img, body #inline_balance_qr canvas, body .inline-topup-payment-type-img, body .sweet-alert .pay-order-box img { width: calc(266px * var(--scale-4k)) !important; max-width: calc(266px * var(--scale-4k)) !important; height: auto !important; } body #page_start_session .card-wh { width: calc(220px * var(--scale-4k)); height: calc(320px * var(--scale-4k)); } body #page_start_session .start-session-card-body { height: calc(325px * var(--scale-4k)) !important; } body #page_start_session .start-session-card-image { width: calc(138px * var(--scale-4k)) !important; max-height: calc(138px * var(--scale-4k)) !important; } body .news-qr { width: calc(100px * var(--scale-4k)); height: calc(100px * var(--scale-4k)); right: calc(20px * var(--scale-4k)); } body .volume-slider-container, body .volume-value, body .mouse-move-current-speed, body .double-click-current-speed { font-size: calc(0.875rem * var(--scale-4k)); } body .mouse-move-slider-track, body .double-click-slider-track, body .volume-slider-track { height: calc(18px * var(--scale-4k)); } body .mouse-move-slider-progress, body .double-click-slider-progress, body .volume-slider-progress { height: calc(16px * var(--scale-4k)); } body .mouse-move-slider-handle, body .double-click-slider-handle, body .volume-slider-handle { width: calc(18px * var(--scale-4k)); height: calc(18px * var(--scale-4k)); } body #page-shop #payment-table .payment-icon, body #page-shop #payment-table .custom-control-label i { width: calc(24px * var(--scale-4k)) !important; height: calc(24px * var(--scale-4k)) !important; font-size: calc(24px * var(--scale-4k)) !important; } body #page-shop #payment-table .payment-label, body #page-shop #payment-table .custom-control-label { font-size: calc(12px * var(--scale-4k)) !important; } body .myModalTopupLogin .razorpay-qr-img, body .myModalTopup .razorpay-qr-img { width: calc(266px * var(--scale-4k)); height: calc(350px * var(--scale-4k)); } .close { font-size: 3.75rem; } } @media all and (max-width: 1270px) { .serch-bar input { padding: 10px 0px 10px 30px; } .main-menu ul li { margin-right: 5px; } .main-menu ul li a { padding: 10px 15px; } #dropdownMenu2 { padding: 10px 25px; } } @media all and (max-width: 1210px){ .header-time.text-center p { display: none; } .header-social-icon ul { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .header-first-button a, .header-second-button a { padding: 2px 25px; } .header-social-icon::before { right: -150px; } } @media all and (max-width: 1200px){ .shop-button { padding: 20px 0; width: 240px; margin: auto; } .shop-area-image img { height: auto; } } @media all and (max-width: 1131px){ .header-first-button a, .header-second-button a { padding: 2px 16px; } } @media all and (max-width: 992px){ .header-social-icon::before { right: -70px; } .serch-bar input { padding: 10px 0px 10px 30px; width: 100%; } .main-menu ul li a { padding: 5px 10px; } #dropdownMenu2 { padding: 5px 10px; } .serch-bar input { padding: 5px 0px 5px 30px; width: 100%; } } @media all and (max-width: 767px){ .header-icon ul li a { font-size: 20px; } .header-social-icon ul li a { font-size: 12px; line-height: 27px; } .header-social-icon ul li { height: 25px; width: 25px; margin-left: 5px; } .header-social-icon::before { right: -70px; display: none; } .header-first-button a, .header-second-button a { padding: 2px 10px; } .header-social-icon ul { display: none; } .header-button-icon { margin-top: -30px; } .main-menu ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .serch-bar input { padding: 5px 0px 5px 30px; width: 60%; margin: auto; display: block; margin-top: 10px; } .serch-bar { margin-left: 0; } .serch-bar i { position: absolute; top: 50%; left: 22%; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .usergroup-dropdown { height: 300px; width: 100%; } .main-menu ul { padding-top: 20px; } .usergroup-text { margin-bottom: 35px; } .single-image img { height: auto; } .usergroup-first-image img, .usergroup-second-image img { height: auto; } .header-section { padding-top: 0px; } .usergroup-dropdown-area { top: 65px; } .dropdown-first-icon-area { top: 45px; } } @media all and (max-width: 575px){ .header-user-icon img { width: 25px; height: auto; } .dropdown-icon { width: 290px; } }