/* /$$ /$$ /$$$$ | $$ |_ $$ /$$$$$$$ /$$$$$$$$ | $$ /$$_____/ |__ $$__/ | $$ | $$$$$$ | $$ | $$ \____ $$ |__/ /$$$$$$ /$$$$$$$/21 |______/|_______/ ================================ Keep calm and get rich. Is the best. --------------------------------------------- Theme Name: Wonderful Theme URI: https://www.nicetheme.cn/ Author: nicetheme Author URI: https://www.nicetheme.cn/ Description: nicetheme theme base. Version: 1.0.0 License URI: LICENSE Text Domain: Wonderful */ @media (min-width: 1200px) { .g-xl-4, .gx-xl-4 { --bs-gutter-x: 2rem } .g-xl-4, .gy-xl-4 { --bs-gutter-y: 2rem } } @media (min-width: 1600px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1560px } } .text-shadow { text-shadow: 0 0 8px rgba(0, 0, 0, 0.4); } /*-------------------------------------------------------------- ## Text color style --------------------------------------------------------------*/ .text-primary { color: var(--color-primary) !important; } .text-dark { color: var(--color-dark) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-muted { color: var(--color-muted) !important; } .text-light { color: var(--color-light) !important; } .text-danger { color: var(--color-danger) !important; } .text-warning { color: var(--color-warning) !important; } /*-------------------------------------------------------------- ## Background style --------------------------------------------------------------*/ .bg-primary { background-color: var(--color-primary) !important; } .bg-dark { background-color: var(--bg-dark) !important; } .bg-secondary { background-color: var(--bg-secondary) !important; } .bg-light { background-color: var(--bg-light) !important; } .bg-white-overlay { color: #fff; background-color: rgba(255, 255, 255, 0.35); } .bg-dark-overlay { color: #fff; background-color: rgba(0, 0, 0, 0.33); } .bg-img { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .bg-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .bg-poster { background-size: cover; background-repeat: no-repeat; background-position: center; } .bg-fixed { background-attachment: fixed; } /*-------------------------------------------------------------- ## Buttons --------------------------------------------------------------*/ .btn { border-radius: var(--border-radius-sm); padding: .5rem 1.625rem; white-space: normal; transition: all 0.2s ease-in-out; } .btn:hover, .btn:focus, .btn:active, .btn.active { box-shadow: none !important; } .btn.disabled, .btn:disabled { color: var(--color-muted); border-color: var(--gray-3); background-color: var(--gray-3); } .btn.loading { position: relative; cursor: wait !important; color: var(--color-muted); border-color: var(--gray-3); background-color: var(--gray-3); pointer-events: none; } .btn.active, .btn.show { --bs-btn-active-color: var(--color-dark); --bs-btn-active-bg: var(--bg-light); --bs-btn-active-border-color: var(--border-color); } /*-------------------------------------------------------------- ## Button style --------------------------------------------------------------*/ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { opacity: 0.7; } .btn-primary.disabled, .btn-primary:disabled { --bs-btn-disabled-opacity: 0.6; color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); opacity: var(--bs-btn-disabled-opacity); } /*-------------------------------------------------------------- ## Button secondary style --------------------------------------------------------------*/ .btn-secondary { --bs-btn-color: var(--color-light); --bs-btn-bg: var(--gray-7); --bs-btn-border-color: var(--gray-7); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gray-6); --bs-btn-hover-border-color: var(--gray-6); --bs-btn-focus-shadow-rgb: 130, 138, 145; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gray-6); --bs-btn-active-border-color: var(--gray-6); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-muted); --bs-btn-disabled-bg: var(--gray-7); --bs-btn-disabled-border-color: var(--gray-7); } /*-------------------------------------------------------------- ## Button light style --------------------------------------------------------------*/ .btn-light { --bs-btn-color: var(--color-muted); --bs-btn-bg: var(--gray-3); --bs-btn-border-color: var(--gray-3); --bs-btn-hover-color: var(--color-dark); --bs-btn-hover-bg: var(--gray-4); --bs-btn-hover-border-color: var(--gray-4); --bs-btn-focus-shadow-rgb: 211, 212, 213; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: var(--color-dark); --bs-btn-active-bg: var(--gray-4); --bs-btn-active-border-color: var(--gray-4); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--gray-3); --bs-btn-disabled-border-color: var(--gray-3); } /*-------------------------------------------------------------- ## Button dark style --------------------------------------------------------------*/ .btn-dark { --bs-btn-color: var(--gray-1); --bs-btn-bg: var(--gray-8); --bs-btn-border-color: var(--gray-8); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gray-7); --bs-btn-hover-border-color: var(--gray-7); --bs-btn-focus-shadow-rgb: 66, 70, 73; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gray-7); --bs-btn-active-border-color: var(--gray-7); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-light); --bs-btn-disabled-bg: var(--gray-7); --bs-btn-disabled-border-color: var(--gray-7); } /*-------------------------------------------------------------- ## Button danger style --------------------------------------------------------------*/ .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); --bs-btn-focus-shadow-rgb: 225, 83, 97; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-danger); --bs-btn-active-border-color: var(--color-danger); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-danger); --bs-btn-disabled-border-color: var(--color-danger); } .btn-danger:hover, .btn-danger:focus, .btn-danger.active, .btn-danger:active { opacity: .8; } .btn-danger:disabled, .btn-danger.disabled { opacity: .6; } /*-------------------------------------------------------------- ## Button link style --------------------------------------------------------------*/ .btn-link { --bs-btn-color: var(--color-muted); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--color-secondary); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--color-secondary); --bs-btn-font-weight: 400; --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--color-muted); --bs-btn-disabled-border-color: transparent; --bs-btn-box-shadow: none; text-decoration: underline } /*-------------------------------------------------------------- ## Button success style --------------------------------------------------------------*/ .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success); --bs-btn-focus-shadow-rgb: 60, 153, 110; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-success); --bs-btn-active-border-color: var(--color-success); --bs-btn-active-shadow: none; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--color-success); --bs-btn-disabled-border-color: var(--color-success); } .btn-success:hover, .btn-success:focus, .btn-success.active, .btn-success:active { opacity: .8; } .btn-success:disabled, .btn-success.disabled { opacity: .6; } /*-------------------------------------------------------------- ## Button outline style --------------------------------------------------------------*/ .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-focus-shadow-rgb: 13, 110, 253; --bs-btn-focus-box-shadow: none; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--color-primary); --bs-gradient: none; } /*-------------------------------------------------------------- ## Button outline light style --------------------------------------------------------------*/ .btn-outline-light { --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--border-color); --bs-btn-hover-color: var(--color-secondary); --bs-btn-hover-bg: var(--gray-2); --bs-btn-hover-border-color: var(--gray-3); --bs-btn-focus-shadow-rgb: 248, 249, 250; --bs-btn-active-color: var(--color-secondary); --bs-btn-active-bg: var(--gray-2); --bs-btn-active-border-color: var(--gray-3); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--color-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border-color); --bs-gradient: none; } /*-------------------------------------------------------------- ## Button size style --------------------------------------------------------------*/ .btn-xs { --bs-btn-font-size: 0.75rem; padding: 0.25rem 0.75rem; } .btn-sm { padding: 0.375rem .75rem; } .btn-lg { --bs-btn-font-size: 1.125rem; padding: 0.625rem 1.5rem; } .btn-block { width: 100%; display: block; padding-left: 0.5rem; padding-right: 0.5rem; } .btn-xs.btn-rounded { padding-left: 0.8rem; padding-right: 0.8rem; } .btn-lg.btn-rounded { border-radius: 4rem; padding-left: 2.5rem; padding-right: 2.5rem; } @media (min-width: 768px) and (max-width: 991.98px) { .btn-sm { --bs-btn-font-size: 0.8125rem; } .btn-lg { --bs-btn-font-size: 0.9375rem; } } @media (max-width: 767.98px) { .btn { --bs-btn-font-size: 0.875rem; padding: 0.5rem 1.25rem; } .btn-xs { --bs-btn-font-size: 0.875rem; padding: 0.25rem 0.625rem; } .btn-sm { --bs-btn-font-size: 0.875rem; padding: 0.3125rem 0.625rem; } .btn-lg { --bs-btn-font-size: 1rem; padding: 0.625rem 1.25rem; } } /*-------------------------------------------------------------- ## Button radius style --------------------------------------------------------------*/ .btn-rounded { border-radius: 5rem; padding-left: 1.25rem; padding-right: 1.25rem; } .rounded { border-radius: var(--border-radius-sm) !important; } .rounded-1 { border-radius: var(--border-radius-xs) !important; } .rounded-2 { border-radius: var(--border-radius-sm) !important; } .rounded-3 { border-radius: var(--border-radius-md) !important; } /*-------------------------------------------------------------- ## Button icon style --------------------------------------------------------------*/ .btn-icon { --bs-btn-font-size: 1.375rem; position: relative; width: 2.625rem; height: 2.625rem; padding: 0; text-align: center; } .btn-icon span { position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center; } .btn-icon.icon-expand-animation i { -webkit-animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95) } .btn-icon small { position: absolute; right: 0; top: 0; font-size: 0.75rem; line-height: 1; padding: 0.125rem 0.3125rem; border-radius: 10px; color: #fff; background-color: var(--color-danger); transform: translate(35%, -30%); z-index: 2; } .btn-icon:hover, .btn-icon:active, .btn-icon:focus { box-shadow: none; } .btn-icon.btn-xs { --bs-btn-font-size: 1rem; width: 1.75rem; height: 1.75rem; padding: 0; } .btn-icon.btn-sm { --bs-btn-font-size: 1.3125rem; width: 2.25rem; height: 2.25rem; padding: 0; } .btn-icon.btn-md { --bs-btn-font-size: 1.5rem; width: 2.75rem; height: 2.75rem; padding: 0; } .btn-icon.btn-lg { --bs-btn-font-size: 1.625rem; width: 3rem; height: 3rem; padding: 0; } .btn-icon.btn-rounded { border-radius: 5rem; } @media (max-width: 767.98px) { .btn-icon.btn-sm { --bs-btn-font-size: 1.25rem; width: 2rem; height: 2rem; padding: 0; } .btn-icon.btn-md { --bs-btn-font-size: 1.125rem; width: 2.375rem; height: 2.375rem; } .btn-icon.btn-lg { --bs-btn-font-size: 1.5rem; width: 2.625rem; height: 2.625rem; padding: 0; } } /*-------------------------------------------------------------- ## Border --------------------------------------------------------------*/ .border-top, .border-bottom, .border-right, .border-left { --bs-border-color: var(--gray-2); } .border-secondary { border-color: var(--border-secondary) !important; } .border-muted { border-color: var(--border-muted) !important; } .border-primary { border-color: var(--color-primary) !important; } .border-light { border-color: var(--border-light) !important; } /*-------------------------------------------------------------- ## Border radius --------------------------------------------------------------*/ .rounded { border-radius: var(--border-radius-sm) !important; } .rounded-1 { border-radius: var(--border-radius-xs) !important; } .rounded-2 { border-radius: var(--border-radius-md) !important; } .rounded-3 { border-radius: var(--border-radius-lg) !important; } /*-------------------------------------------------------------- ## Form control --------------------------------------------------------------*/ .form-control { font-size: 1rem; padding: 0.5rem .875rem; border-color: var(--border-light); background-color: transparent; color: var(--color-muted); border-radius: var(--border-radius-xs); transition: all 0.15s ease-in-out; } .form-control:focus, .form-control:active { color: var(--color-dark); border-color: var(--color-primary); background-color: transparent; box-shadow: none; } .form-control::-webkit-input-placeholder { color: var(--color-muted); opacity: 1; } .form-control::-moz-placeholder { color: var(--color-muted); opacity: 1; } .form-control:-ms-input-placeholder { color: var(--color-muted); opacity: 1; } .form-control::-ms-input-placeholder { color: var(--color-muted); opacity: 1; } .form-control::placeholder { color: var(--color-muted); opacity: 1; } .form-control:disabled, .form-control[readonly] { color: var(--color-muted); border-color: var(--border-secondary); background-color: transparent; opacity: 1; } textarea.form-control { text-align: justify; height: auto; padding: 0.5rem 0.875rem; } .form-control-lg { padding: 0.625rem 1rem; font-size: 1.125rem; } @media (max-width: 767.98px) { .form-control { font-size: .875rem; padding: 0.5rem 0.75rem; } .form-control-lg { padding: 0.5rem 1rem; font-size: 1rem; } } /*-------------------------------------------------------------- ## Form check style --------------------------------------------------------------*/ .form-check { min-height: 0; padding-left: 2em; margin-bottom: 0; } .form-check .form-check-input { margin-left: -2em; } .form-check-input { background-color: var(--bg-light); border-color: var(--bg-light); margin-top: 0.08em; } .form-check-input:active { -webkit-filter: brightness(90%); filter: brightness(90%); } .form-check-input:focus { border-color: var(--bg-light); outline: 0; box-shadow: none; } .form-check-input:checked { background-color: var(--color-success); border-color: var(--color-success); } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--color-success); border-color: var(--color-success); } .form-switch { padding-left: 40px; } .form-switch .form-check-input { width: 40px; height: 20px; margin-left: -40px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+"); border-radius: 3em; } .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+"); } .form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+"); } /*-------------------------------------------------------------- ## Avatar --------------------------------------------------------------*/ .flex-avatar { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; line-height: 1; white-space: nowrap; font-weight: bold; text-transform: capitalize; border-radius: 100%; } .flex-avatar img { width: inherit; height: inherit; border-radius: inherit; -o-object-fit: cover; object-fit: cover; } .flex-avatar .avatar-online { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 10px; background-color: var(--color-success); border: 2px solid #fff; } .flex-avatar:hover .avatar-online:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: circle-pulse 2s infinite; animation: circle-pulse 2s infinite; border-radius: 50%; box-shadow: 0 0 0 0 #4daa57 } @-webkit-keyframes circle-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0.9) } 50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(77, 170, 87, 0) } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0) } } @keyframes circle-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0.9) } 50% { transform: scale(1); box-shadow: 0 0 0 8px rgba(77, 170, 87, 0) } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(77, 170, 87, 0) } } .flex-avatar .avatar-badge { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; transform: translate(0%, 0%); } .flex-avatar .avatar-badge.badge_4 { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOC4yNSAxMS44NDRhMi4yMzIgMi4yMzIgMCAwIDEgMCAzLjE1NkwxNy41ODggMjUuNjYyYTIuMzggMi4zOCAwIDAgMS0zLjM2NiAwbC01LjY0NC01LjY0NGEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1Ni0zLjE1NWw0LjE3IDQuMTcgOS4xOS05LjE4OWEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1NiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMzEuNzE0IiB4Mj0iLTMuNzMxIiB5MT0iLjg1NyIgeTI9IjExLjgzOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM0QUIzRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwRjdDRkQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } .flex-avatar .avatar-badge.badge_5 { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOC4yNSAxMS44NDRhMi4yMzIgMi4yMzIgMCAwIDEgMCAzLjE1NkwxNy41ODggMjUuNjYyYTIuMzggMi4zOCAwIDAgMS0zLjM2NiAwbC01LjY0NC01LjY0NGEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1Ni0zLjE1NWw0LjE3IDQuMTcgOS4xOS05LjE4OWEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1NiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMzEuNzE0IiB4Mj0iLTMuNzMxIiB5MT0iLjg1NyIgeTI9IjExLjgzOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkI3NEEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRDkwMEYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='); } .flex-avatar .avatar-badge.w-10 { width: 10px; height: 10px; right: 0; bottom: 0; } .flex-avatar .avatar-badge.w-12 { width: 12px; height: 12px; right: 1px; bottom: 1px; } .flex-avatar .avatar-badge.w-20 { width: 20px; height: 20px; right: 5px; bottom: 5px; } /*-------------------------------------------------------------- avatar group --------------------------------------------------------------*/ .avatar-group { display: -ms-flex; display: flex; align-items: center; } .avatar-group .flex-avatar { position: relative; } .avatar-group .flex-avatar + .flex-avatar { margin-left: -0.5rem; } .avatar-group .flex-avatar:hover, .avatar-group .flex-avatar:active, .avatar-group .flex-avatar.active { z-index: 1; } /*-------------------------------------------------------------- ## Media --------------------------------------------------------------*/ .media { position: relative; display: block; overflow: hidden; padding: 0; flex-shrink: 0; border-radius: inherit; } .media:after { content: ""; display: block; padding-top: 100%; } .media-overlay { position: absolute; display: flex; align-items: center; color: #fff; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem; z-index: 1; } .media-opacity { opacity: 0.4; transition: 0.3s ease-out; } .media-overlay.bg-dark-overlay { background-color: rgba(0, 0, 0, 0.5); } .media-overlay.overlay-top { bottom: auto; } .media-overlay.overlay-bottom { top: auto; background: rgba(0, 0, 0, 0.6); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); } .media-action { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.3s; display: flex; align-items: center; } .media-action .btn { border-color: transparent; background-color: rgba(0, 0, 0, 0.5); color: #fff; } @media (max-width: 767.98px) { .media-overlay { padding: 0.5rem 0.625rem; } } .media-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 0; border-radius: inherit; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-color: rgba(120, 120, 120, 0.1); } .media-content img { display: block; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .media-contain { background-color: transparent; background-size: contain; } @media (max-width: 768px) { .media-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } } .media-36x17:after { padding-top: 47.222222%; } .media-21x9:after { padding-top: 42.857143%; } .media-16x9:after { padding-top: 56.25%; } .media-4x3:after { padding-top: 75%; } .media-2x3:after { padding-top: 150%; } .media-3x2:after { padding-top: 66.66666%; } .media-4x5:after { padding-top: 125%; } .media-3x4:after { padding-top: 133.33333%; } .media-1x2:after { padding-top: 200%; } .media-2x1:after { padding-top: 50%; } .media-3x1:after { padding-top: 33%; } .media-4x1:after { padding-top: 25%; } .media-5x1:after { padding-top: 20%; } .media-10x1:after { padding-top: 10%; } .media-1-4:after { padding-top: 25vh; min-height: 10rem; } .media-1-3:after { padding-top: 33vh; min-height: 12.5rem; } .media-1-2:after { padding-top: 50vh; min-height: 15rem; } /*-------------------------------------------------------------- custom style --------------------------------------------------------------*/ .custom-hover { position: relative; } .custom-hover img { transition: all 300ms ease-in-out; } .custom-hover:hover img { transform: scale(1.02); } .custom-hover-md:hover img { transform: scale(1.1); } /*-------------------------------------------------------------- card style --------------------------------------------------------------*/ .card, .block { position: relative; background: var(--card-bg); border: 1px solid var(--card-border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow); } .card-header, .card-footer { background-color: transparent; border-color: transparent; background-clip: padding-box; border: 0; padding: 1.25rem; } .card-header:first-child { padding: 1.25rem 1.25rem 0; border-radius: 0; } .card-header.has-border { padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-3) } .card-body { padding: 1.25rem; } .card-body p:last-child { margin-bottom: 0; } .card-title { line-height: 1.5; } .card-md .card-header { padding: 2rem 2rem 0; } .card-md .card-body { padding: 2rem; } .card-md .card-footer { padding: 0 2rem 1.5rem; margin-top: -1rem; } @media (max-width: 767.98px) { .card-header { padding: .875rem .875rem 0; } .card-body { padding: .875rem; } .card-md .card-header { padding: 1.375rem 1.375rem 0; } .card-md .card-body { padding: 1.375rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .card-header { padding: 1rem 1rem 0; } .card-body { padding: 1rem; } .card-md .card-header { padding: 1.5rem 1.5rem 0; } .card-md .card-body { padding: 1.5rem; } } /*-------------------------------------------------------------- ## List ----------------------------------------------------------------*/ .list-item { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; } .list-item .media-content { transition: all 300ms ease-in-out; } .list-item:hover .media-content { transform: scale(1.05); } .list-item .list-tag { position: absolute; left: 0; top: 0; padding: 4px 12px; background-color: rgba(0, 0, 0, 0.63); border-top-left-radius: inherit; border-bottom-right-radius: var(--border-radius-sm); color: #fff; } .list-content { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; padding: 1rem; } .list-body { flex: 1 1 auto; } .list-footer { margin-top: 12px; } .list-title { display: block; color: inherit; word-break: break-all; word-wrap: break-word; } .list-action a { color: var(--color-secondary); } .list-action a.active { color: var(--color-danger) } .list-loadmore { text-align: center; margin-top: 2.25rem; } .ranking-number { position: absolute; left: 0; top: 0; width: 18px; font-size: 11px; text-align: center; color: #FFFFFF; background: linear-gradient(270deg, #787878 -17.65%, #393939 100%); border-radius: 6px 0; } .list-item:first-child .ranking-number, .list-item:nth-child(2) .ranking-number, .list-item:nth-child(3) .ranking-number { background: linear-gradient(270deg, #FFA27A -17.65%, #FF3D00 100%); } .list-rank { width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-secondary); border-radius: 100px; margin-right: 8px; } .list-item:nth-child(1) .list-rank, .list-item:nth-child(2) .list-rank, .list-item:nth-child(3) .list-rank { background: linear-gradient(270deg, #FFA27A -17.65%, #FF3D00 100%); color: #FFFFFF; } /*-------------------------------------------------------------- ## List style ----------------------------------------------------------------*/ .list { padding: 0; } .list .list-item { flex-direction: row; align-items: center; margin: 0 0 1rem; } .list .list-item:last-child { margin: 0; } .list .list-item .list-content { padding: 0; } .list .list-item .media { margin-left: .75rem; } /*-------------------------------------------------------------- ## List grid hover ----------------------------------------------------------------*/ .list-grid .list-item { flex-direction: row; margin-bottom: .75rem; } .list-grid .list-item:last-child { margin-bottom: 0; } .list-grid .list-item .media:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .list-grid .list-item .list-catname { position: absolute; left: 0.375rem; top: 0.375rem; font-size: .625rem; padding: 0.125rem 0.5rem; color: #fff; background-color: rgb(0 0 0 / 40%); border-radius: 3rem; } .list-grid .list-item .list-content { padding: 0; } .list-grid.list-grid-padding .list-item { padding: 1rem; } .list-grid.list-grid-padding .list-item > .media { border-radius: var(--border-radius-xs); margin-right: 1.25rem; } .list-grid.list-grid-padding .list-content { padding: .25rem 0; } @media (max-width: 767.98px) { .list-grid .list-item .media:first-child { margin-right: .625rem; } .list-grid .list-item .list-catname { left: 0.3125rem; top: 0.3125rem; font-size: .625rem; padding: 0.0625rem 0.375rem; } .list-grid .list-item .list-content { padding: .125rem 0; } .list-grid.list-grid-padding .list-item { padding: .625rem; margin-bottom: .625rem; } .list-grid.list-grid-padding .list-item > .media { margin-right: .625rem; } .list-grid.list-grid-padding .list-content { padding: 0; } } /*-------------------------------------------------------------- ## List grouped ----------------------------------------------------------------*/ .list-grouped { display: flex; flex-direction: row; flex-flow: row wrap; } .list-grouped > div { display: flex; } .list-grouped .list-item { align-self: stretch; flex: 1 1 auto; } .list-grouped .list-item .media { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .list-grouped .list-item .list-content { padding: 2.125rem; } @media (min-width: 1200px) and (max-width: 1399.98px) { .list-grouped .list-item .list-content { padding: 1.5rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { .list-grouped .list-item .list-content { padding: 1.5rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .list-grouped .list-item .list-content { padding: 1.125rem; } } @media (max-width: 767.98px) { .list-grouped .list-item .list-content { padding: 1.125rem; } } /*-------------------------------------------------------------- line-clamp style ----------------------------------------------------------------*/ .h-1x { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .h-2x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .h-3x { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } /*-------------------------------------------------------------- ## site background ----------------------------------------------------------------*/ .site-background { position: fixed; top: 0; left: 0; width: 100%; height: 65vh; background-size: cover; background-position: top center; background-repeat: no-repeat; transition: opacity 0.5s ease; pointer-events: none; } .site-dark-background { display: none; } .site-background::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 80%; background-image: linear-gradient(0deg, var(--bg-body) 0%, var(--bg-body) 0%, rgba(0, 0, 0, 0) 100%) } /*-------------------------------------------------------------- ## site preloader ----------------------------------------------------------------*/ .site-preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; display: flex; justify-content: center; align-items: center; background-color: var(--color-dark) } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .site-preloader { background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .site-preloader .spinner { -webkit-animation: preloader-spinner 1.5s infinite linear; animation: preloader-spinner 1.5s infinite linear; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--color-primary); border-bottom-color: var(--color-primary); border-left-color: var(--color-primary); height: 50px; width: 50px } @-webkit-keyframes preloader-spinner { to { transform: rotateZ(360deg) } } @keyframes preloader-spinner { to { transform: rotateZ(360deg) } } /*-------------------------------------------------------------- ## site main ----------------------------------------------------------------*/ .site-overflow { overflow: hidden; } .site-main { position: relative; padding: 4rem 0; } @media (min-width: 992px) and (max-width: 1199.98px) { .site-main { padding: 2.5rem 0; } } @media (min-width: 768px) and (max-width: 991.98px) { .site-main { padding: 2rem 0; } } @media (max-width: 767.98px) { .site-main { padding: 1rem 0; } } /*-------------------------------------------------------------- ## site promote ----------------------------------------------------------------*/ .site-promote { position: relative; } .site-promote img { border-radius: var(--border-radius-md); } .site-promote.post-foot-promote img { border-radius: var(--border-radius-sm); } /*-------------------------------------------------------------- ## site navbar ----------------------------------------------------------------*/ .site-navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; transition: all 0.3s ease-in-out; } .site-navbar.sticked { position: fixed; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 99; } .site-navbar.is-page { background-color: #fff; position: relative; } .site-navbar.is-sticky { position: fixed; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.04); z-index: 99; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .site-navbar.sticked { -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .site-navbar.is-sticky { -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } @media (max-width: 767.98px) { .site-navbar { padding-top: .75rem; padding-bottom: .75rem; } } /*-------------------------------------------------------------- ## nav brand ----------------------------------------------------------------*/ .navbar-brand { margin: 0; padding: 0; } .navbar-brand .logo { display: none; max-height: 45px; } .navbar-brand .logo-dark { display: block; } @media (max-width: 767.98px) { .navbar-brand .logo { max-width: 100px; } } @media (min-width: 768px) and (max-width: 991.98px) { .navbar-brand .logo { max-width: 135px; } } .is-page .navbar-brand .logo, .is-sticky .navbar-brand .logo { display: block; } .is-page .navbar-brand .logo-dark, .is-sticky .navbar-brand .logo-dark { display: none; } /*-------------------------------------------------------------- ## Main Navigation ----------------------------------------------------------------*/ .navbar-site { flex-wrap: nowrap; } .navbar-site li { position: relative; flex-shrink: 0; } .navbar-site li a { display: block; font-size: 1rem; padding: 0.75rem .5rem; } .navbar-site > li a { color: #fff; opacity: .6; } .navbar-site > li:hover > a, .navbar-site > li.current-menu-parent > a, .navbar-site > li.current-menu-item > a { color: #fff; opacity: 1; } /* Submenu */ .navbar-site li ul.sub-menu { position: absolute; left: 0; top: 100%; min-width: 220px; text-align: left; padding: 8px 0; opacity: 0; visibility: hidden; background: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 7%); border-radius: var(--border-radius-sm); transform: translateY(-8px); transition: all 500ms ease; z-index: 100; } .navbar-site li:last-child ul.sub-menu { left: auto; right: 0; } .navbar-site li ul.sub-menu li { display: block; position: relative; } .navbar-site li ul.sub-menu li:last-child { margin-bottom: 0; } .navbar-site li ul.sub-menu li a { position: relative; display: block; color: var(--color-muted); padding: 0.625rem 1.125rem; transition: all 0.3s ease-in; z-index: 1; } .navbar-site li ul.sub-menu li > a:hover, .navbar-site li ul.sub-menu li.current-menu-item > a { color: var(--color-dark); opacity: 1; } .navbar-site li:hover ul.sub-menu { opacity: 1; visibility: visible; transform: scale(1) translateY(4px); } .navbar-site li ul.sub-menu .sub-menu { position: absolute; top: 100%; left: -10px; transition: 0.5s; transition-delay: 0.1s; transform: translateY(10px); pointer-events: none; visibility: hidden; opacity: 0; z-index: 999; } .navbar-site li:last-child ul.sub-menu .sub-menu { left: auto; right: 99%; } .navbar-site li ul.sub-menu .sub-menu { left: 99%; top: 0; } .navbar-site li ul.sub-menu li:hover > .sub-menu { visibility: visible; opacity: 1; transform: translate(0, -10px); transition-delay: 0s; pointer-events: all; } /*-------------------------------------------------------------- ## site submenu icon Navigation ----------------------------------------------------------------*/ .navbar-site li.menu-item-has-children > a:after { content: ''; position: absolute; top: 50%; right: -6px; height: 6px; width: 6px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: translate(-50%, -50%) rotate(315deg); opacity: 0.3; transition: all 0.2s; } .navbar-site li.menu-item-has-children > a:hover:after { margin-top: 2px; transform: translate(-50%, -50%) rotate(135deg); } .navbar-site li ul.sub-menu li.menu-item-has-children > a:after { right: 12px; transform: translate(-50%, -50%) rotate(315deg); } .navbar-site li ul.sub-menu li.menu-item-has-children > a:hover:after, .navbar-site li ul.sub-menu li.menu-item-has-children > a:hover:after { margin-top: 0; transform: translate(-50%, -50%) rotate(225deg); } /*-------------------------------------------------------------- ## Navbar Dark Navigation ----------------------------------------------------------------*/ .site-navbar.is-page .navbar-site li a, .site-navbar.is-sticky .navbar-site li a { color: var(--color-dark); opacity: 0.6; } .site-navbar.is-page .navbar-site > li:hover > a, .site-navbar.is-page .navbar-site > li.current-menu-parent > a, .site-navbar.is-page .navbar-site > li.current-menu-item > a .site-navbar.is-sticky .navbar-site > li:hover > a, .site-navbar.is-sticky .navbar-site > li.current-menu-parent > a, .site-navbar.is-sticky .navbar-site > li.current-menu-item > a { color: var(--color-dark); opacity: 1; } .site-navbar.is-page .navbar-site li ul.sub-menu, .site-navbar.is-sticky .navbar-site li ul.sub-menu { background-color: #fff; } .site-navbar.is-page .navbar-site li ul.sub-menu li a, .site-navbar.is-sticky .navbar-site li ul.sub-menu li a { color: var(--color-dark); opacity: 0.6; } .site-navbar.is-page .navbar-site li ul.sub-menu li:hover > a, .site-navbar.is-page .navbar-site li ul.sub-menu li.current-menu-parent > a, .site-navbar.is-page .navbar-site li ul.sub-menu li.current-menu-item > a, .site-navbar.is-sticky .navbar-site li ul.sub-menu li:hover > a, .site-navbar.is-sticky .navbar-site li ul.sub-menu li.current-menu-parent > a, .site-navbar.is-sticky .navbar-site li ul.sub-menu li.current-menu-item > a { color: var(--color-dark); opacity: 1; } .site-navbar.is-page .navbar-site li.menu-item-has-children > a:after, .site-navbar.is-sticky .navbar-site li.menu-item-has-children > a:after { border-left: 1px solid var(--color-dark); border-bottom: 1px solid var(--color-dark); } /* -------------------------------- navbar sub -------------------------------- */ .navbar-sub a { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .navbar-sub .store-dropdown { position: relative; } .navbar-sub .store-dropdown .store-dropdown-menu { position: absolute; right: 0; width: 240px; display: flex; flex-direction: column; gap: 8px; top: 100%; padding: 8px; background-color: #fff; box-shadow: var(--shadow-md); border-radius: var(--border-radius-sm); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 99; } .navbar-sub .store-dropdown.open .store-dropdown-menu { opacity: 1; visibility: visible; transform: scale(1) translateY(10px); } .navbar-sub .store-dropdown-menu li a { display: flex; align-items: center; gap: 8px; color: var(--color-secondary); padding: 12px 12px 12px 12px; border-radius: var(--border-radius-xs); } .navbar-sub .store-dropdown-menu li a:hover { color: var(--color-dark); } .navbar-sub .store-dropdown-menu li a img { width: 24px; height: 24px; object-fit: contain; } .navbar-sub .store-dropdown-menu li a:hover { background-color: var(--bg-light); } .navbar-sub .store-dropdown-trigger { padding-left: 14px; } .navbar-sub .language-dropdown { position: relative; } .navbar-sub .language-dropdown-menu { position: absolute; right: 0; width: 200px; top: 100%; padding: 12px 8px; background-color: #fff; box-shadow: var(--shadow-md); border-radius: var(--border-radius-sm); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 99; } .navbar-sub .language-dropdown.open .language-dropdown-menu { opacity: 1; visibility: visible; transform: scale(1) translateY(10px); } .navbar-sub .language-dropdown-menu ul { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; } /* 自定义滚动条样式 */ .navbar-sub .language-dropdown-menu ul::-webkit-scrollbar { width: 6px; } .navbar-sub .language-dropdown-menu ul::-webkit-scrollbar-track { background: var(--bg-light); border-radius: 3px; } .navbar-sub .language-dropdown-menu ul::-webkit-scrollbar-thumb { background: var(--bg-secondary); border-radius: 3px; } .navbar-sub .language-dropdown-menu li a { display: flex; align-items: center; gap: 8px; color: var(--color-secondary); padding: 8px 12px; border-radius: var(--border-radius-xs); } .navbar-sub .language-dropdown-menu li a:hover { color: var(--color-dark); } .is-page .navbar-sub a, .is-sticky .navbar-sub a { --bs-btn-color: var(--color-muted); --bs-btn-hover-color: var(--color-dark); --bs-btn-active-color: var(--color-dark); } .is-page .navbar-sub .store-dropdown-trigger, .is-sticky .navbar-sub .store-dropdown-trigger { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } /* -------------------------------- aside -------------------------------- */ .mobile-aside { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.15s linear; z-index: 997; } .mobile-aside.open { visibility: visible; opacity: 1; } .mobile-aside .aside-overlay { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 998; opacity: 0; visibility: hidden; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .aside-overlay { -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .mobile-aside.open .aside-overlay { opacity: 1; visibility: visible; } /*-------------------------------------------------------------- ## Mobile Navigation --------------------------------------------------------------*/ .mobile-aside .aside-body { position: absolute; display: flex; flex-direction: column; width: 300px; height: 100%; overflow: hidden; overflow-y: auto; transform: translateX(-100%); background-color: #fff; z-index: 999; transition: transform 0.3s ease-out; } .mobile-aside.open .aside-body { transform: translateX(0%); } .mobile-aside .aside-menu { display: flex; flex-direction: column; gap: 12px; padding: 1rem; } .mobile-aside .aside-menu li { position: relative; } .mobile-aside .aside-menu > li { padding: .5rem 2.5rem .5rem .5rem; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .mobile-aside .aside-menu > li > a:hover, .mobile-aside .aside-menu > li.current-menu-item > a, .mobile-aside .aside-menu > li.active > a { color: var(--color-primary); } .mobile-aside .aside-menu li a { position: relative; display: flex; align-items: center; gap: 5px; padding: .5rem .5rem; transition: all .3s; } .mobile-aside .aside-menu li a .menu-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 1.3125rem; } .mobile-aside .aside-menu li a:hover { opacity: 1; } .mobile-aside .aside-menu > li.current-menu-item > a { color: var(--color-primary); opacity: 1; } .mobile-aside .aside-menu > li > ul { display: none; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .mobile-aside .aside-menu > li.current-menu-parent > ul { display: block; } .mobile-aside .aside-menu li > ul li { padding-top: 0; padding-bottom: 0; } .mobile-aside .aside-menu li > ul li a { padding: .5rem; } .mobile-aside .aside-menu li > ul li.current-menu-item a { color: var(--color-primary); opacity: 1; } .mobile-aside .aside-menu li a .sub-pointer { position: absolute; right: 0; top: 50%; height: 25px; width: 25px; display: flex; align-items: center; justify-content: center; transform: translate(125%, -50%); opacity: .5; } .mobile-aside .aside-menu li a .sub-pointer:after { content: ""; display: block; height: 8px; width: 8px; border-left: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); transform: rotate(225deg); transition: all 0.2s; } .mobile-aside .aside-menu li a .sub-pointer.is-active:after { transform: rotate(315deg); } /*-------------------------------------------------------------- links block ----------------------------------------------------------------*/ .links-block { background: #fff; } .links-block-list { position: relative; overflow: hidden; } .links-block-list::before, .links-block-list::after { content: ''; position: absolute; top: 0; width: 50px; height: 100%; z-index: 1; } .links-block-list::before { left: 0; background-image: linear-gradient(270deg, rgba(23, 24, 26, 0) 20%, #fff 100%); } .links-block-list::after { right: 0; background-image: linear-gradient(90deg, rgba(23, 24, 26, 0) 0%, #fff 100%) } .links-block-list ul { display: flex; white-space: nowrap; margin-bottom: 12px; padding: 0 2rem; gap: 12px; } .links-block-list ul:last-child { margin-bottom: 0; } .links-block-list ul li:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .links-block-list ul li a { position: relative; display: flex; align-items: center; padding: 4px; background-color: var(--bg-light); color: var(--color-muted); border-radius: 100px; max-width: 200px; } .links-block-list ul li .item-avatar { width: 36px; height: 36px; text-transform: capitalize; } .links-block-list ul li .item-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 0; margin-left: 6px; display: none; transition: .3s } .links-block-list ul li:hover .item-text { display: block; width: auto; } /*-------------------------------------------------------------- ## tags list --------------------------------------------------------------*/ .tags-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .tags-list li { white-space: nowrap; } .tags-list li a { position: relative; display: block; color: var(--color-muted); background-color: var(--gray-2); padding: 2px 10px 2px 28px; border-radius: 30px; } .tags-list li.hot a { background-color: var(--outline-danger); color: var(--color-danger); } .tags-list a:hover { color: var(--color-dark); } .tags-list a::before { content: ''; position: absolute; display: block; left: 5px; top: 50%; width: 20px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; transform: translate(0, -50%); } .tags-list a::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01MS43MTcgMjcuNjk0YTUuMDgzIDUuMDgzIDAgMCAxLTcuMTg4IDBsLTEuOTk2LTEuOTk3YTUuMDgzIDUuMDgzIDAgMCAxIDAtNy4xODhsMS45OTYtMS45OTdhNS4wODMgNS4wODMgMCAwIDEgNy4xODggMGwxLjk5NyAxLjk5N2E1LjA4MyA1LjA4MyAwIDAgMSAwIDcuMTg4bC0xLjk5NyAxLjk5N1ptLTEzLjgyMS00LjE4YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDg0SDI5Ljk5YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgyLTUuMDgzVjIwLjY5YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgyLTUuMDgzaDIuODI0YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgzIDUuMDgzdjIuODI0Wm0xNi43MjIgMTYuMzY3YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDgzaC0yLjgyNGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRabS0xNi43MjIgMGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4MyA1LjA4M0gyOS45OWE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRaIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCIgeDI9IjgwIiB5MT0iMjkuMTQzIiB5Mj0iMjkuMTQzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzMyQUNGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzEzOTRGMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } .tags-list a.istag:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01Ni42MTQgMjYuMzAzSDI2Ljc4Yy0yLjAzNCAwLTMuMzktMS42OTUtMy4zOS0zLjM5czEuNjk1LTMuMzkgMy4zOS0zLjM5aDI5LjQ5NWMyLjAzNCAwIDMuMzkgMS42OTUgMy4zOSAzLjM5cy0xLjAxNyAzLjM5LTMuMDUxIDMuMzlaIi8+PGcgZmlsdGVyPSJ1cmwoI2IpIj48cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNMzEuMTg4IDQ4aC0uNjc4Yy0yLjAzNS0uMzM5LTMuMDUyLTIuMDM0LTIuNzEzLTQuMDY4bDUuMDg2LTI5LjE1NmMuMzM5LTIuMDM0IDIuMDM0LTMuMDUgNC4wNjgtMi43MTIgMi4wMzQuMzQgMy4wNTEgMi4wMzQgMi43MTIgNC4wNjhsLTUuMDg1IDI5LjE1NmMtLjM0IDEuNjk1LTEuNjk1IDIuNzEyLTMuMzkgMi43MTJabTEyLjIwNCAwaC0uNjc4Yy0yLjAzNC0uMzM5LTMuMDUxLTIuMDM0LTIuNzEyLTQuMDY4bDUuMDg1LTI5LjE1NmMuMzQtMi4wMzQgMi4wMzQtMy4wNSA0LjA2OC0yLjcxMiAyLjAzNS4zNCAzLjA1MiAyLjAzNCAyLjcxMyA0LjA2OGwtNS4wODYgMjkuMTU2QzQ2LjQ0MyA0Ni45ODMgNDUuMDg3IDQ4IDQzLjM5MiA0OFoiLz48L2c+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUyLjg4NSA0MC41NDJIMjMuMzljLTIuMDM0IDAtMy4zOS0xLjY5Ni0zLjM5LTMuMzkgMC0xLjY5NiAxLjY5NS0zLjM5IDMuMzktMy4zOWgyOS40OTVjMi4wMzQgMCAzLjM5IDEuNjk0IDMuMzkgMy4zOSAwIDEuNjk0LTEuMzU2IDMuMzktMy4zOSAzLjM5WiIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSI4MCIgeTE9IjI5LjE0MyIgeTI9IjI5LjE0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRTZGNjYiLz48c3RvcCBvZmZzZXQ9Ii45OTQiIHN0b3AtY29sb3I9IiNGRDUwNDMiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjM5LjgzMyIgeDI9IjM5LjgzMyIgeTE9IjEyIiB5Mj0iNDgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRjFGMUYxIi8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJiIiB3aWR0aD0iMzQuMTk5IiBoZWlnaHQ9IjQ2IiB4PSIyMi43MzMiIHk9IjciIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJoYXJkQWxwaGEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiLz48ZmVPZmZzZXQvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIvPjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDA3XzYyIi8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQwN182MiIgcmVzdWx0PSJzaGFwZSIvPjwvZmlsdGVyPjwvZGVmcz48L3N2Zz4=') } .tags-list li.hot a::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgMzBDMCAxMy40MzEgMTMuNDMxIDAgMzAgMGgyMGMxNi41NjkgMCAzMCAxMy40MzEgMzAgMzAgMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwSDMwQzEzLjQzMSA2MCAwIDQ2LjU2OSAwIDMwWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01MS43MTcgMjcuNjk0YTUuMDgzIDUuMDgzIDAgMCAxLTcuMTg4IDBsLTEuOTk2LTEuOTk3YTUuMDgzIDUuMDgzIDAgMCAxIDAtNy4xODhsMS45OTYtMS45OTdhNS4wODMgNS4wODMgMCAwIDEgNy4xODggMGwxLjk5NyAxLjk5N2E1LjA4MyA1LjA4MyAwIDAgMSAwIDcuMTg4bC0xLjk5NyAxLjk5N1ptLTEzLjgyMS00LjE4YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDg0SDI5Ljk5YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgyLTUuMDgzVjIwLjY5YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgyLTUuMDgzaDIuODI0YTUuMDgzIDUuMDgzIDAgMCAxIDUuMDgzIDUuMDgzdjIuODI0Wm0xNi43MjIgMTYuMzY3YTUuMDgzIDUuMDgzIDAgMCAxLTUuMDgzIDUuMDgzaC0yLjgyNGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRabS0xNi43MjIgMGE1LjA4MyA1LjA4MyAwIDAgMS01LjA4MyA1LjA4M0gyOS45OWE1LjA4MyA1LjA4MyAwIDAgMS01LjA4Mi01LjA4M3YtMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODItNS4wODNoMi44MjRhNS4wODMgNS4wODMgMCAwIDEgNS4wODMgNS4wODN2Mi44MjRaIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCIgeDI9IjgwIiB5MT0iMjkuMTQzIiB5Mj0iMjkuMTQzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZFNkY2NiIvPjxzdG9wIG9mZnNldD0iLjk5NCIgc3RvcC1jb2xvcj0iI0ZENTA0MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg=='); } @media (max-width: 991.98px) { .forum-posts .tags-list { flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; justify-content: start; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .forum-posts .tags-list::-webkit-scrollbar { display: none; } } @media (max-width: 767.98px) { .tags-list { gap: 8px; } .tags-list li a { padding: .25rem .75rem .25rem 2.125rem; } .tags-list a::before { left: 8px; } } /*-------------------------------------------------------------- ## Cats list --------------------------------------------------------------*/ .cats-list { } .cats-list .item { position: relative; } .cats-list .item-content { position: absolute; left: 0; bottom: 0; right: 0; padding: 1rem 1.25rem; background-color: rgba(0, 0, 0, 0.3); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .cats-list .item-content a { color: #fff; } @supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) { .cats-list .item-content { -webkit-backdrop-filter: saturate(180%) blur(4px); backdrop-filter: saturate(180%) blur(4px); } } @media (max-width: 767.98px) { .cats-list .media-2x1:after { padding-top: 50%; } } /*-------------------------------------------------------------- social list --------------------------------------------------------------*/ .social-list a:hover, .social-list a:focus, .social-list a:active { transform: scale(1.2); color: #fff; } .social-list a.weibo:hover, .social-list a.weibo:focus, .social-list a.weibo:active { background-color: #d52c2b; border-color: #d52c2b; } .social-list a.weixin:hover, .social-list a.weixin:focus, .social-list a.weixin:active { background-color: #07C160; border-color: #07C160; } .social-list a.bilibili:hover, .social-list a.bilibili:focus, .social-list a.bilibili:active { background-color: #fb7299; border-color: #fb7299; } .social-list a.youtube:hover { background-color: #ff0033; border-color: #ff0033; } .social-list a.twitter:hover { background-color: #1d9bf0; border-color: #1d9bf0; } .social-list a.zhihu:hover { background-color: #1772f6; border-color: #1772f6; } .social-list a.douyin:hover { background-color: #fe2c55; border-color: #fe2c55; } .social-list a.taobao:hover { background-color: #ff5000; border-color: #ff5000; } .social-list a.instagram:hover { background-color: #ff1a82; border-color: #ff1a82; } .social-list a.linkedin:hover { background-color: #0a66c2; border-color: #0a66c2; } .social-list a.xiaohongshu:hover { background-color: #ff2342; border-color: #ff2342; } .social-list a.kuaishou:hover { background-color: #ff3d13; border-color: #ff3d13; } .social-list a.qq:hover { background-color: #2f71f2; border-color: #2f71f2; } .social-list a.alipay:hover { background-color: #00a3ee; border-color: #00a3ee; } .social-list a.fackbook:hover { background-color: #0866ff; border-color: #0866ff; } /*-------------------------------------------------------------- forum post action --------------------------------------------------------------*/ .action-button.active { color: var(--color-danger); } .action-button .action-icon { transition: color 100ms ease; } .action-button.active .action-icon { -webkit-animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); } .like-action { position: relative; } .like-action.active .action-icon::before { content: "\e986"; } .star-action.active .action-icon::before { content: "\e98f"; } .like-action .like-emoji-list { position: absolute; left: 50%; bottom: 100%; opacity: 0; visibility: hidden; transform: scale(0) translate(-50%, -15%); transform-origin: 0% 100%; transition: transform .5s cubic-bezier(.5, 0, 0, 1) 0s, opacity .5s cubic-bezier(.5, 0, 0, 1) 0s; } .like-action:hover .like-emoji-list { opacity: 1; visibility: visible; transform: scale(1) translate(-50%, -15%); } .like-action .like-emoji-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; background-color: var(--gray-6); border: 1px solid var(--gray-5); padding: 5px; border-radius: 100px; width: 200px; } .like-action .like-emoji-list img { flex-shrink: 0; width: 32px; transition: all 500ms ease-in-out; } .like-action .like-emoji-list img:hover { transform: scale(1.2); } /*-------------------------------------------------------------- ## Post --------------------------------------------------------------*/ .post-title { color: var(--color-dark); } .post-content { font-size: 1.125rem; line-height: 2rem; word-break: normal; word-wrap: break-word; } .post-content > *:first-child { margin-top: 0; } .post-content > *:last-child { margin-bottom: 0; } .post-content a:hover, .post-content a:focus { text-decoration: none; } .post-content p { margin: 0 0 1.5rem; } .post-content hr { margin: 4rem auto; } .post-content > .wp-block-cover.alignwide:first-child, .post-content > .wp-block-cover.alignfull:first-child { margin-top: 0; } /* Font Families ----------------------------- */ .post-content h1, .post-content h2, .post-content h3 { line-height: 1.5; margin: 2rem 0 1.5rem; color: var(--color-body); } .post-content h4, .post-content h5, .post-content h6 { margin: 2rem 0 1.5rem; } .post-inner .post-content > .wp-block-cover.alignwide:first-child, .post-inner .post-content > .wp-block-cover.alignfull:first-child { margin-top: 0; } @media (max-width: 767.98px) { .post-content h1, .post-content h2, .post-content h3 { margin: 2rem 0 1.5rem; } .post-content h4, .post-content h5, .post-content h6 { margin: 2rem 0 1.5rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .post-content h1, .post-content h2, .post-content h3 { margin: 2rem 0 1.5rem; } .post-content h4, .post-content h5, .post-content h6 { margin: 2rem 0 1.5rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { .post-content h1, .post-content h2, .post-content h3 { margin: 2rem 0 1.5rem; } .post-content h4, .post-content h5, .post-content h6 { margin: 2rem 0 1.5rem; } } /* Font link ----------------------------- */ .post-content p > a, .post-content li > a, .post-content dd > a, .post-content td a, .post-content th a, .post-content h1 a, .post-content h2 a, .post-content h3 a, .post-content h4 a, .post-content h5 a, .post-content h6 a, .post-content em a, .post-content strong a { box-shadow: 0 -2px 0 0 var(--color-danger) inset; transition: 0.2s ease-in; } .post-content p > a:hover, .post-content li > a:hover, .post-content dd > a:hover, .post-content td a:hover, .post-content th a:hover, .post-content h1 a:hover, .post-content h2 a:hover, .post-content h3 a:hover, .post-content h4 a:hover, .post-content h5 a:hover, .post-content h6 a:hover, .post-content em a:hover, .post-content strong a:hover { color: var(--color-dark); box-shadow: 0 -2px 0 0 var(--color-danger) inset; } /* Post quote style ----------------------------- */ .wp-block-quote { border-radius: var(--border-radius-xs); background-color: var(--bg-light); } .wp-block-quote a, .wp-block-quote p > a { border-color: var(--border-muted); } .wp-block-quote a, .wp-block-quote a:hover { color: inherit; } /* Button */ .wp-block-button__link { background-color: var(--bg-secondary); } .wp-block-button__link:hover { background-color: var(--gray-5); color: #fff; } /* Alignment Classes ------------------------- */ .post-content .alignnone, .wp-block-image, .wp-block-embed { margin: 1.5rem 0 } .alignright, a img.alignright, .wp-block-image .alignright { float: right; margin: .25rem 0 1.25rem 1.875rem } .alignleft, a img.alignleft, .wp-block-image .alignleft { float: left; margin: .25rem 1.875rem 1.25rem 0 } .aligncenter, div.aligncenter { display: block; margin: 2.5rem auto } .aligncenter > img, div.aligncenter > img { margin: 0 auto } p img.alignnone, img.alignnone { display: block; margin: 2.5rem 0 } /*-------------------------------------------------------------- Ul - style --------------------------------------------------------------*/ .post-content ul, .post-content ol { padding: 0 0 0 1.25rem; margin-bottom: 1.5rem; } .post-content ul ul, .post-content ol ol, .post-content ul ol, .post-content ol ul { margin-bottom: 1rem; } .post-content ul ul { list-style: circle; margin: 1rem 0; padding-left: 1.125rem; } .post-content ul ul ul { list-style: square; } .post-content ol { list-style: decimal; } .post-content ol ol { list-style: lower-alpha; } .post-content ol ol ol { list-style: lower-roman; } .post-content li { position: relative; margin: 0 0 1rem; } .post-content li li { margin: 0 0 .75rem; } .post-content li img { display: inline-block; } /*-------------------------------------------------------------- block table style --------------------------------------------------------------*/ table, .wp-block-table { max-width: 100%; width: 100%; min-width: 240px; border-collapse: collapse; } table thead, table tfoot, .wp-block-table thead, .wp-block-table tfoot { text-align: center; } .wp-block-table thead { border-color: var(--border-light); } table td, table th, .wp-block-table td, .wp-block-table th { padding: 5px 10px; border: 1px solid var(--border-light); } table figcaption, .wp-block-table figcaption { color: var(--color-muted); margin-bottom: 0; } table.is-style-regular .has-background, table.is-style-stripes .has-background, table.is-style-stripes .has-background thead tr, table.is-style-stripes .has-background tfoot tr, table.is-style-stripes .has-background tbody tr, .wp-block-table.is-style-regular .has-background, .wp-block-table.is-style-stripes .has-background, .wp-block-table.is-style-stripes .has-background thead tr, .wp-block-table.is-style-stripes .has-background tfoot tr, .wp-block-table.is-style-stripes .has-background tbody tr { color: var(--color-muted); } table.is-style-stripes th, table.is-style-stripes td, .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { border-width: 0; } table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--bg-secondary); } table.is-style-stripes .has-background tbody tr:nth-child(odd), .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { background-color: var(--bg-secondary); } table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; border: 0; text-align: center; line-height: 2; vertical-align: middle; word-break: normal; } table.wp-calendar-table th { font-weight: bold; } table.wp-calendar-table thead, table.wp-calendar-table tbody { color: var(--color-dark); border: 1px solid var(--border-light); } table.wp-calendar-table caption { font-weight: bold; text-align: left; margin-bottom: .75rem; color: var(--gray-5); } /* block table */ .wp-block-table { margin: 0 0 1.25rem; } .wp-block-table.aligncenter, .wp-block-table.alignleft, .wp-block-table.alignright { display: table; width: auto; } .wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.alignright td, .wp-block-table.alignright th { word-break: break-word; } .wp-block-table.is-style-stripes { border-width: 0; } .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th { border-color: transparent; } .wp-block-table table[style*="border-style"] > *, .wp-block-table table[style*="border-style"] td, .wp-block-table table[style*="border-style"] th, .wp-block-table table[style*="border-style"] tr { border-style: inherit; } .wp-block-table table[style*="border-width"] > *, .wp-block-table table[style*="border-width"] td, .wp-block-table table[style*="border-width"] th, .wp-block-table table[style*="border-width"] tr { border-width: inherit; } /**-------------------------------------------------------------- ## Post embed wrapper --------------------------------------------------------------**/ .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; background: #000; } .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*-------------------------------------------------------------- post tags style --------------------------------------------------------------*/ .post-tags { gap: 8px; } .post-tags a { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 4px; font-size: 16px; padding: 4px 16px 4px 12px; color: var(--color-muted); background-color: var(--bg-light); border-radius: 48px; } .post-tags a:before { content: '#'; position: relative; } .post-tags a:hover { background-color: var(--color-primary); color: #fff; } /*-------------------------------------------------------------- wp caption style --------------------------------------------------------------*/ .wp-caption { max-width: 100%; } /*-------------------------------------------------------------- ## Post video style --------------------------------------------------------------*/ .post-video .wp-video { margin-top: 0; } /*-------------------------------------------------------------- ## thumbnail style --------------------------------------------------------------*/ .post-thumbnail img { width: 100%; height: auto; } /*-------------------------------------------------------------- ## Post excerpt --------------------------------------------------------------*/ .post-excerpt { position: relative; font-size: 1rem; line-height: 1.85; word-break: normal; word-wrap: break-word; } /**-------------------------------------------------------------- ## Post hidden tips --------------------------------------------------------------**/ .post-password-content { position: relative; } .post-password-content form { max-width: 400px; margin: 0 auto; } /*-------------------------------------------------------------- forum post post info --------------------------------------------------------------*/ .post-info .info-avatar { width: 42px; height: 42px; } .post-info .info-info .info-name { text-transform: lowercase; } /*-------------------------------------------------------------- forum post post header --------------------------------------------------------------*/ .post-header .header-badge { position: relative; top: -3px; display: inline-block; font-size: .75rem; line-height: 1.2; padding: 2px 4px; border-radius: 4px; background-image: linear-gradient(135deg, #ff2f43, #ff6327); color: #fff; } .post-header .header-badge.sticky { background-image: linear-gradient(135deg, #ff2f43, #ff6327); color: #fff; } /*-------------------------------------------------------------- forum post likes --------------------------------------------------------------*/ .post-likes .post-likes-avatar a { width: 24px; height: 24px; margin: 4px; } /* -------------------------------- ## Comment ---------------------------------- */ .comment-respond { display: flex; flex-direction: row; gap: 8px; } .comment-list .comment-respond { margin-top: 16px; } .comment .comment-respond { margin-top: 16px; } .comment-respond .comment-avatar { width: 32px; height: 32px; } .comment-respond .comment-info a:hover { opacity: 1 !important; } .comment-respond .comment-inputs { display: none; } .comment-respond .comment-body { flex: 1 1 auto; padding: 10px; border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); transition: all 0.3s ease-in-out; } .comment-respond .comment-body.active { border-color: var(--color-primary); } .comment-respond .comment-input { background-color: transparent; border-color: transparent; padding: 1px; height: 40px; transition: all 0.3s ease-in-out; resize: none; overflow-y: auto; } .comment-respond .comment-body.active .comment-input { height: 80px; } .comment-respond .comment-input::-webkit-scrollbar { width: 6px; height: 6px; } .comment-respond .comment-input::-webkit-scrollbar-thumb { background-color: var(--bg-light); border-radius: 4px; } .comment { margin-top: 24px; } .comment .comment-content { display: flex; flex-direction: row; gap: 8px; } .comment .comment-avatar { width: 32px; height: 32px; flex-basis: 32px; } .comment .comment-body { flex: 1 1 auto; } .comment .author-badge { font-size: 11px; font-weight: 400; padding: 0 4px; border-radius: 4px; color: var(--color-primary); background-color: var(--outline-primary); border: 1px solid var(--outline-primary); } .comment .children { margin-left: 40px; } .comment .children .comment { margin-top: 20px; } .comment .children .comment .comment-content { display: flex; flex-direction: row; gap: 8px; } .comment .children .comment-respond .comment-avatar, .comment .children .comment .comment-avatar { width: 24px; height: 24px; flex-basis: 24px; } .comment .children .comment .comment-body { flex: 1 1 auto; } /*-------------------------------------------------------------- ## widget search style --------------------------------------------------------------*/ .widget_search .search-form { position: relative; } .widget_search .search-form label { display: block; margin: 0; } .widget_search .search-form .search-field { width: 100%; padding: 0.5rem 0.75rem; background-color: transparent; border: 1px solid var(--gray-3); border-radius: var(--border-radius-sm); } .widget_search .search-form .search-field:focus { border-color: var(--color-primary) } .widget_search .search-form .search-submit { display: none; } /*-------------------------------------------------------------- ## widget recent entries style --------------------------------------------------------------*/ .widget_recent_entries ul { padding-left: 1rem; } .widget_recent_entries ul li { margin-bottom: 0.5rem; list-style-type: circle; } .widget_recent_entries ul li a { display: block; } .widget_recent_entries ul li span { color: #8a92a9; font-size: 0.75rem; } /*-------------------------------------------------------------- ## widget categories + tag cloud style --------------------------------------------------------------*/ .widget_categories ul, .tagcloud { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .widget_categories ul li a, .tagcloud a { position: relative; display: flex; align-items: center; font-size: .875rem; padding: .25rem .5rem; border: 1px solid var(--border-light); background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .widget_categories ul li a { font-size: .875rem; color: var(--color-muted); } .widget_categories ul li a:hover { color: #fff; border-color: var(--color-primary); background-color: var(--color-primary); } .widget_categories .postform { width: 100%; padding: .5rem .75rem; border-radius: var(--border-radius-sm); border-color: var(--gray-3); outline: 0; } .widget_categories .postform:active, .widget_categories .postform:focus { border-color: var(--gray-2); } .tagcloud a { font-size: .875rem !important; padding: 0.25rem 0.5rem; color: var(--color-muted); } .tagcloud a:hover { border: 1px solid var(--color-primary); background-color: var(--color-primary); color: #fff; } .tagcloud a span { font-size: .75rem; color: var(--color-muted); } /*-------------------------------------------------------------- ## widget other style --------------------------------------------------------------*/ .widget_meta li, .widget_archive li { position: relative; font-size: 0.875rem; color: var(--color-muted); padding: 0.75rem 0; text-transform: uppercase; border-top: 1px solid var(--gray-3); display: flex; flex-direction: row; align-items: center; text-align: justify; justify-content: space-between; } .widget_archive select { width: 100%; font-size: 1rem; padding: 0.625rem 1rem; color: var(--color-muted); background-color: var(--bg-light); border-color: var(--gray-3); border-radius: var(--border-radius-sm); } /*-------------------------------------------------------------- ## widget blogroll style --------------------------------------------------------------*/ .blogroll li { position: relative; display: flex; flex-direction: column; font-size: .75rem; padding: .75rem 3.5rem .75rem 1rem; color: var(--color-muted); background-color: var(--bg-light); border-radius: var(--border-radius-sm); margin-bottom: 1rem; } .blogroll li:last-child { margin-bottom: 0; } .blogroll li a { font-size: .875rem; text-transform: uppercase; } .blogroll li a img { position: absolute; top: 50%; right: .75rem; width: 2.5rem; height: 2.5rem; -o-object-fit: cover; object-fit: cover; transform: translateY(-50%); } /*-------------------------------------------------------------- ## widget_media_image style --------------------------------------------------------------*/ .widget_media_image img { max-width: 100%; height: auto; width: auto; } /*-------------------------------------------------------------- ## widget_recent_comments style --------------------------------------------------------------*/ .widget_recent_comments ul li { font-size: 0.875rem; padding: 0.75rem 0; text-transform: uppercase; border-top: 1px solid var(--gray-3); } .widget_recent_comments ul li span { margin-right: 5px; } .widget_recent_comments ul li:first-child { border-top: 0; padding-top: 0; } .widget_recent_comments ul li:last-child { padding-bottom: 0; } /*-------------------------------------------------------------- ## widget_recent_comments style --------------------------------------------------------------*/ .widget_nav_menu ul li { position: relative; text-transform: none; margin-bottom: .5rem; } .widget_nav_menu ul li:last-child { margin-bottom: 0; } .widget_nav_menu ul li a { display: block; padding: .5rem .75rem; background-color: var(--bg-light); border-radius: var(--border-radius-sm); } .widget_nav_menu ul li.menu-item-has-children::after { content: ""; display: block; position: absolute; top: 15px; right: 15px; height: 6px; width: 6px; border-left: 1px solid var(--gray-3); border-bottom: 1px solid var(--gray-3); transform: rotate(315deg); transition: all 0.2s; } .widget_nav_menu ul li.menu-item-has-children:hover::after { margin-top: 2px; transform: rotate(135deg); } .widget_nav_menu ul li ul { margin-top: .5rem; } .widget_nav_menu ul li > ul { display: none; } .widget_nav_menu ul li:hover > ul { display: block; } .widget_nav_menu ul li > ul ul li a { background-color: var(--bg-light); } /*-------------------------------------------------------------- ## widget_calendar style --------------------------------------------------------------*/ .widget_calendar table { width: 100%; min-width: auto; margin: 0; border-collapse: collapse; } .widget_calendar caption { padding: 10px 0; border-bottom: 0; color: var(--color-muted); } .widget_calendar th, .widget_calendar td { padding: .5rem .25rem; text-align: center; color: var(--color-muted); } .widget_calendar tbody td a { position: relative } .widget_calendar tbody td a::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; background: var(--color-success); border-radius: 10px; margin: 0 0 0 -2px } .widget_calendar td#today { font-weight: bold } /*-------------------------------------------------------------- ## widget_media_gallery style --------------------------------------------------------------*/ .widget_media_gallery .gallery { padding: 0.75rem 0.75rem 0; margin-bottom: 0; } .widget_media_gallery .gallery-caption { padding: 0.25rem; } /*-------------------------------------------------------------- ## widget_rss style --------------------------------------------------------------*/ .widget_rss .widget-title .rsswidget:first-child { float: right; } .widget_rss ul li { text-transform: uppercase; margin-bottom: 10px; padding-top: 12px; border-top: 1px solid var(--gray-3); } .widget_rss ul li:first-child { border: none; padding-top: 0; } .widget_rss ul li .rsswidget { font-size: 0.75rem; display: block; } .widget_rss ul li .rss-date { font-size: 0.75rem; color: var(--color-muted); } .widget_rss ul li .rssSummary { font-size: 0.75rem; margin-top: 5px; color: var(--color-muted); } .widget_rss ul li cite { font-size: 0.75rem; font-style: normal; color: var(--color-muted); } /*-------------------------------------------------------------- ## Pagination (WordPress CSS classes) --------------------------------------------------------------*/ .pagination-container { position: relative; display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important; word-wrap: normal !important; } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 8px; } .page-numbers, .post-page-numbers { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; text-align: center; padding: 0 .375rem; background-color: var(--gray-2); color: var(--color-muted); border-radius: var(--border-radius-xs); } .page-numbers:hover, .page-numbers.current, .post-page-numbers:hover, .post-page-numbers.current { color: #fff; background-color: var(--color-primary); } .page-numbers i { font-size: 1.25rem; } .page-numbers.dots { min-width: auto; text-align: center; padding: 0 0.375rem; background-color: transparent; border-radius: 0; } .page-numbers.dots:hover { color: var(--color-muted); background-color: transparent; } @media (max-width: 767.98px) { .page-numbers { min-width: 32px; height: 32px; } } .pagination-quick-jumper { margin-left: .25rem; } .pagination-quick-jumper .quick-jumper-input { min-width: 30px; background-color: var(--gray-2); color: var(--color-muted); border-radius: var(--border-radius-xs); text-align: center; border: 0; padding: .25rem; margin: 0 .25rem; } .pagination-quick-jumper .quick-jumper-input::-webkit-inner-spin-button, .pagination-quick-jumper .quick-jumper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pagination-quick-jumper .quick-jumper-input { -moz-appearance: textfield; } /*-------------------------------------------------------------- ## post navigation style --------------------------------------------------------------*/ .post-in-navigation span, .post-in-navigation a { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; margin: .3125rem; text-align: center; color: var(--color-muted); border-radius: var(--border-radius-xs); background-color: var(--gray-2); } .post-in-navigation a:focus, .post-in-navigation a:active, .post-in-navigation a:hover, .post-in-navigation .current { color: #fff; background-color: var(--color-primary); } .post-in-navigation .current, .post-in-navigation a.prev, .post-in-navigation a.next { display: flex; } .post-in-navigation a.dots { min-width: 0; background-color: transparent; color: var(--color-muted); } @media (max-width: 767.98px) { .post-in-navigation { margin: 1.25rem 0 0; } .post-in-navigation span, .post-in-navigation a { min-width: 2rem; height: 2rem; border-radius: var(--border-radius-sm); } } @media (min-width: 768px) and (max-width: 991.98px) { .post-in-navigation { margin: 1.5rem 0 0; } .post-in-navigation span, .post-in-navigation a { min-width: 2.25rem; height: 2.25rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { .post-in-navigation { margin: 1.5rem 0 0; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .post-in-navigation { margin: 2rem 0 0; } } /*-------------------------------------------------------------- ## Page Friends --------------------------------------------------------------*/ .friends-grid { margin-bottom: 1rem; } .friends-grid:last-child { margin-bottom: 0; } .friends-grid .friends-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; } .friends-list .item { position: relative; display: flex; flex-direction: row; align-items: center; flex: 1 1 auto; gap: 8px; padding: 12px; border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); transition: transform 0.3s ease-out; } .friends-list .item:hover { transform: scale(1.01) translateY(-5px); } .friends-list .item .item-avatar { width: 36px; height: 36px; color: #fff; } .friends-list .item .item-go { position: absolute; right: 0; top: 0; width: 1rem; height: 1rem; transform: rotate(315deg) translate(-2px, -2px); opacity: 0; } .friends-list .item:hover .item-go { opacity: 1; color: var(--color-primary); transform: rotate(315deg) translate(0, 0); } @media (max-width: 767.98px) { .friends-grid { margin-bottom: 1.25rem; } } /* -------------------------------- ## Page category list ---------------------------------- */ .category-tags .item { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--bg-light); border-radius: var(--border-radius-sm); background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 1rem; } .category-tags .item:last-child { margin-bottom: 0; } .category-tags .item .item-bg { position: absolute; left: 5%; top: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: inherit; border-top-left-radius: 0; border-bottom-left-radius: 0; opacity: 1; transition: all 0.3s ease-in-out; z-index: 1; } .category-tags .item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(0 0 0 / 100%) 15%, rgb(0 0 0 / 80%) 60%, rgba(0, 0, 0, 0) 100%); z-index: 2; } .category-tags .item .item-content { position: relative; width: 100%; padding: 1.75rem; transition: all 0.3s ease-in-out; color: #fff; z-index: 3; } .category-tags .item:hover .item-content { padding: 2.5rem 2rem; } .category-tags .item .item-content small { color: #fff; background-color: var(--bg-light); border-radius: var(--border-radius-xs); line-height: 1.5; padding: 1px 8px; } .category-tags .item .item-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 1.375rem; } .category-tags .item .item-icon img { width: 28px; } .category-tags .item .item-title { position: relative; } .category-tags .item.hot .item-title::after { content: ''; position: absolute; right: 0; top: 50%; transform: translate(125%, -50%); width: 30px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: var(--hot-icon); } /*-------------------------------------------------------------- ## Page authors --------------------------------------------------------------*/ .recommend-author-list .item { display: flex; flex-direction: row; align-items: center; gap: 15px; margin-bottom: 1.5rem; } .recommend-author-list .item:last-child { margin-bottom: 0; } .recommend-author-list .item .item-rank { color: var(--color-warning); } .recommend-author-list .item:nth-child(1) .item-rank, .recommend-author-list .item:nth-child(2) .item-rank, .recommend-author-list .item:nth-child(3) .item-rank { color: var(--color-danger); } .recommend-author-list .item .item-content { flex: 1 1 auto; } .recommend-author-list .item .item-avatar { width: 42px; height: 42px; } .recommend-author-list .item .item-body { flex: 1 1 auto; } .recommend-author-list .item .item-name { position: relative; } .recommend-author-list .item .item-name .activity { position: absolute; right: -15px; top: 50%; width: 8px; height: 8px; border-radius: 10px; background-color: var(--bg-light); transform: translateY(-50%); } .recommend-author-list .item .item-name .activity.on { background-color: var(--color-success); } .recommend-author-list .item .item-name .activity.on:after { content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; -webkit-animation: circle-pulse 2s infinite; animation: circle-pulse 2s infinite; border-radius: 50%; box-shadow: 0 0 0 0 #4daa57 } .recommend-author-list .item .item-posts { flex-shrink: 0; width: 40%; } @media (max-width: 767.98px) { .recommend-author-list .item { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 1.5rem; } .recommend-author-list .item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .recommend-author-list .item .item-content { width: 100%; } .recommend-author-list .item .item-body { flex: 1 1 auto; } .recommend-author-list .item .item-posts { width: 100%; } } .quick-services { } .quick-services .item { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; flex: 1 1 auto; gap: 24px; text-align: center; padding: 16px; height: 240px; } .quick-services .item .item-icon { width: 48px; height: 48px; } .quick-services .item .item-icon img { width: 48px; height: 48px; object-fit: contain; } .quick-services .item a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } /*-------------------------------------------------------------- ## Scroll toolbar --------------------------------------------------------------*/ .scroll-toolbar { position: fixed; right: 30px; bottom: 50%; transform: translateY(45%); z-index: 99; } .scroll-toolbar .toolbar-list { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 500ms ease; } .scroll-toolbar.sticked .toolbar-list { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 991.98px) { .scroll-toolbar { right: 15px; bottom: 15%; transform: translateY(0%); } } .scroll-toolbar .totop-button { opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 500ms ease; } .scroll-toolbar .totop-button.current { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-toolbar .like-button.active, .scroll-toolbar .star-button.active { --bs-btn-active-color: #ff414d; } .scroll-toolbar .like-button.active i, .scroll-toolbar .star-button.active i { -webkit-animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95); } .scroll-toolbar .like-button.active i::before { content: "\e986"; } .scroll-toolbar .star-button.active i::before { content: "\e98f"; } /*-------------------------------------------------------------- ## Text selection color and background color --------------------------------------------------------------*/ ::-moz-selection { color: #fff; background: var(--color-primary); } ::selection { color: #fff; background: var(--color-primary); } /* -------------------------------- ## fancybox style -------------------------------- */ .is-animating .fancybox__content, .is-dragging .fancybox__content { will-change: auto } /*-------------------------------------------------------------- ## plyr ----------------------------------------------------------------*/ .plyr--audio .plyr__controls { border-radius: var(--border-radius-sm); } /*-------------------------------------------------------------- ## index splide ----------------------------------------------------------------*/ .banner-section .swiper-slide { position: relative; height: 660px; } .banner-section .slide-content { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: opacity .5s; } .banner-section .slide-content .bg-image, .banner-section .slide-content .bg-video { position: absolute; left: 0; width: 100%; top: 0; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 1513px) { .banner-section .swiper-slide { height: 880px; } } @media (min-width: 1921px) { .banner-section .swiper-slide { height: 1174px; } } .banner-section .splide__pagination { bottom: 24px; } .banner-section .splide__pagination__page { position: relative; width: 80px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); margin: 0 5px; transition: all 0.3s ease; transform: none; } .banner-section .splide__pagination__page.is-active { transform: none; background: rgba(255, 255, 255, 0.6); } .banner-section .splide__pagination__page::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: rgba(255, 255, 255, 1); border-radius: 4px; transition: width 0.1s linear; } .banner-section .splide__pagination__page.is-active::after { animation: progress-animation 8s linear forwards; } @keyframes progress-animation { 0% { width: 0; } 100% { width: 100%; } } .banner-section .slide-content .slide-product { position: absolute; left: calc(50% - 600px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; z-index: 2; } .banner-section .slide-content .slide-product .slide-title { white-space: pre-wrap; color: #fff; font-size: 56px; line-height: 1.2; font-weight: 700; letter-spacing: .01em; text-shadow: 2px 2px 12px #00000040; } .banner-section .slide-content .slide-product .slide-slogan { white-space: pre-wrap; margin-top: 6px; color: #fff; font-size: 32px; line-height: 1.5; font-weight: 700; text-shadow: 1px 1px 6px #00000033; } .banner-section .slide-content .slide-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; margin-top: 48px; } .banner-section .slide-content .slide-actions a { min-width: 168px; height: 56px; font-size: 1.125rem; font-weight: 700; line-height: 56px; padding: 0 32px; text-align: center; border-radius: 100px; letter-spacing: .01em; } .banner-section .slide-content .slide-actions a.btn-buy { background-color: #fff; color: var(--color-dark); } .banner-section .slide-content .slide-actions a.btn-buy:hover { background-color: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } .banner-section .slide-content .slide-actions a.btn-read { background-color: var(--bg-dark); color: #fff; } .banner-section .slide-content .slide-actions a.btn-read:hover { background-color: rgba(50, 50, 50, 0.6); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } .banner-section .swiper-button-prev, .banner-section .swiper-button-next { width: 48px; height: 48px; border-radius: 100px; opacity: 0; visibility: hidden; color: #fff; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); transition: all 0.3s ease-in-out; } .banner-section .swiper-button-prev svg, .banner-section .swiper-button-next svg { width: 20px; height: 20px; } .banner-section:hover .swiper-button-prev, .banner-section:hover .swiper-button-next { opacity: 1; visibility: visible; } .banner-section .swiper-button-prev:hover, .banner-section .swiper-button-next:hover { background-color: rgba(50, 50, 50, 0.6); } .banner-section:hover .swiper-button-next { right: 3%; } .banner-section:hover .swiper-button-prev { left: 3%; } .banner-section .slide-product .slide-title, .banner-section .slide-product .slide-slogan, .banner-section .slide-product .slide-actions { opacity: 0; transform: translateY(-60px) } .banner-section .swiper-slide.swiper-slide-active .slide-product .slide-title { transform: translateY(0) translateZ(0); opacity: 1; transition: opacity .3s linear .1s, transform .3s cubic-bezier(.215, .61, .355, 1) .1s } .banner-section .swiper-slide.swiper-slide-active .slide-product .slide-slogan { transform: translateY(0) translateZ(0); opacity: 1; transition: opacity .3s linear .2s, transform .3s cubic-bezier(.215, .61, .355, 1) .2s } .banner-section .swiper-slide.swiper-slide-active .slide-product .slide-actions { transition-delay: .3s; transform: translateY(0) translateZ(0); opacity: 1; transition: opacity .3s linear .3s, transform .3s cubic-bezier(.215, .61, .355, 1) .3s } @media (max-width: 767.98px) { .banner-section .slide-content .slide-product { left: 0; width: 100%; padding: 24px; } } @media (min-width: 768px) and (max-width: 991.98px) { .banner-section .slide-content .slide-product { left: 0; width: 100%; padding: 32px; } } @media (min-width: 992px) and (max-width: 1199.98px) { } /*-------------------------------------------------------------- banner has nextprev ----------------------------------------------------------------*/ .banner-pagination .swiper-pagination { --swiper-pagination-bullet-width: 80px; --swiper-pagination-bullet-height: 4px; --swiper-pagination-bullet-border-radius: 0; --swiper-pagination-bullet-horizontal-gap: 8px; --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.4); --swiper-pagination-color: rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; left: 50%; width: auto; padding: 6px 8px; border-radius: 0; transform: translateX(-50%); } .banner-pagination .swiper-pagination.swiper-pagination-lock { display: none; } .banner-pagination .swiper-pagination-bullet { position: relative; opacity: 1; } .banner-pagination .swiper-pagination-bullet::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: rgba(255, 255, 255, 1); transition: width 0.1s linear; } .banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { animation: progress-animation var(--progress-animation) linear forwards; } @keyframes progress-animation { 0% { width: 0; } 100% { width: 100%; } } /*-------------------------------------------------------------- ## 24 Banner style --------------------------------------------------------------*/ .banner-nextprev .swiper-button-next, .banner-nextprev .swiper-button-prev { --swiper-navigation-size: 48px; --swiper-pagination-color: #fff; --swiper-theme-color: #fff; opacity: 0; visibility: hidden; border-radius: 100%; background-color: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); transform-origin: 0 0 0; transition: all 0.3s ease-out 0s; } .banner-nextprev:hover .swiper-button-next, .banner-nextprev:hover .swiper-button-prev { opacity: 1; visibility: visible; } .banner-nextprev:hover .swiper-button-next { right: 3%; } .banner-nextprev:hover .swiper-button-prev { left: 3%; } .banner-nextprev .swiper-button-next:hover { background-color: rgba(0, 0, 0, 0.5); } .banner-nextprev .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.5); } .banner-nextprev .swiper-button-next svg, .banner-nextprev .swiper-button-prev svg { width: calc((var(--swiper-navigation-size) / 2.25)); height: calc((var(--swiper-navigation-size) / 2.25)); } .banner-nextprev .swiper-button-prev:after { left: -1px; } .banner-nextprev .swiper-button-next:after { left: 1px; } .banner-nextprev .swiper-button-next.swiper-button-disabled, .banner-nextprev .swiper-button-prev.swiper-button-disabled { opacity: 0; visibility: hidden; } /*-------------------------------------------------------------- ## module ----------------------------------------------------------------*/ .module-section { padding: 32px 0; } .module-section .module-header { margin-bottom: 24px; } @media (min-width: 768px) and (max-width: 991.98px) { .module-section { padding: 32px 0; } } @media (min-width: 992px) and (max-width: 1199.98px) { .module-section { padding: 32px 0; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .module-section { padding: 48px 0; } } @media (min-width: 1400px) { .module-section { padding: 56px 0; } } /*-------------------------------------------------------------- ## index support ----------------------------------------------------------------*/ .item-hover { transition: all 300ms ease-in-out; } .item-hover:hover { transform: scale(1.02); } /*-------------------------------------------------------------- ## index support ----------------------------------------------------------------*/ .support-list .item { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 48px 12px; gap: 24px; } .support-list .item .item-icon { width: 64px; height: 64px; } .support-list .item .item-icon img { width: 64px; height: 64px; object-fit: contain; } .support-list .item .item-action { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .support-list .item:hover .item-text { color: var(--color-primary); } /*-------------------------------------------------------------- ## statistical support ----------------------------------------------------------------*/ .statistical-list { } .statistical-list .item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; } .statistical-list .item-number { position: relative; display: flex; align-items: center; gap: 6px; line-height: 1; } .statistical-list .item-number:after { content: ''; position: absolute; right: 0; bottom: -2px; width: 24px; height: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: var(--icon-up); transform: translate(4px, -7px); } .statistical-list .item-number.down:after { background-image: var(--icon-down); } .statistical-list .item-number .number { font-size: 64px; letter-spacing: -4px; } .statistical-list .item-number .unit { position: relative; font-size: 18px; color: var(--color-primary); top: -14px; } /*-------------------------------------------------------------- ## solution support ----------------------------------------------------------------*/ .solution-list { display: flex; justify-content: space-between; gap: 16px; } .solution-list .item { position: relative; overflow: hidden; cursor: pointer; flex: 1; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; transition: flex .3s; border-radius: var(--border-radius-sm); } .solution-list .item.active { flex: 3; } .solution-list .item-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(0deg, #000 -13.98%, rgba(0, 0, 0, 0.00) 100%); } .solution-list .item-title { } /*-------------------------------------------------------------- ## Card series --------------------------------------------------------------*/ .card-list { } .card-list .item { position: relative; overflow: hidden; } .card-list .item:after { content: ""; display: block; padding-top: 125%; } .card-list .item .item-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .card-list .item .item-image img { width: 100%; height: 100%; object-fit: cover; } .card-list .item .item-content { position: absolute; top: 0; left: 0; right: 0; padding: 32px; z-index: 2; } .card-list .item .item-link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } /*-------------------------------------------------------------- ## Cert list --------------------------------------------------------------*/ .cert-list .item { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 8px; } .cert-list .item .item-icon { width: 96px; height: 64px; } .cert-list .item .item-icon img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 767.98px) { .cert-list .item .item-icon { width: 60px; height: 40px; } } /*-------------------------------------------------------------- ## Brand list --------------------------------------------------------------*/ .brand-list .scroll-box { overflow: hidden; position: relative; } .brand-list .scroll-box ul { display: flex; gap: 24px; position: relative; will-change: transform; white-space: nowrap; margin: 12px 0; } .brand-list .scroll-box ul li { flex-shrink: 0; background: #fff; padding: 12px; } .brand-list .scroll-box ul li img { width: 160px; height: 80px; object-fit: contain; transition: all 0.2s ease-in-out; } @media (max-width: 767.98px) { .brand-list .scroll-box ul li img { width: 80px; height: 40px; } } .brand-list .scroll-box ul li:hover img { transform: scale(1.03) } .brand-list .scroll-box ul li a:hover { background-color: #fff; cursor: pointer } .brand-list .scroll-box:after, .brand-list .scroll-box:before { bottom: 0; content: ""; position: absolute; top: 0; width: 450px; z-index: 2 } .brand-list .scroll-box:before { background: linear-gradient(90deg, #fff, transparent); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffaf7fd", endColorstr="#00000000", GradientType=1); left: 0 } .brand-list .scroll-box:after { background: linear-gradient(270deg, #fff, transparent); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#fffaf7fd", GradientType=1); right: 0 } /*-------------------------------------------------------------- ## Hot Product list --------------------------------------------------------------*/ .app-list { } .app-list > div { display: flex; } .app-list .item { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--gray-1); border-radius: var(--border-radius-sm); padding: 2rem; transition: all 0.3s ease-in-out; } .app-list .item:hover { background-color: #fff; box-shadow: var(--shadow-md); transition: all 0.3s ease-in-out; } .app-list .item.block { background-color: #fff; } .app-list .item .item-content { flex: 1 1 auto; } .app-list .item .item-link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .app-list .item .item-title { display: flex; align-items: center; gap: 12px; } .app-list .item:hover .item-title { color: var(--color-primary); } .app-list .item .item-title .item-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--border-radius-sm); } .app-list .item .item-title .item-icon img { width: 56px; height: 56px; object-fit: cover; border-radius: inherit; } .app-list .item .item-footer { display: flex; align-items: flex-end; gap: 4px; } .app-list .item .item-footer .price { font-size: 40px; line-height: 1; } /*-------------------------------------------------------------- ## Product list --------------------------------------------------------------*/ .product-list > div { display: flex; } .product-list .item { position: relative; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; word-wrap: break-word; border-radius: var(--border-radius-md); } .product-list .item .media-content:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.3) 100%) } .product-list .item .item-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; } .product-list .item .item-content .item-title a { color: #ffffff; } .product-list .item .item-content .item-new { font-size: 12px; color: var(--color-danger); } .product-list .item .item-content .item-desc { opacity: 0.8; color: #ffffff; } .product-list .item .item-content .item-btn { border-color: #fff; } .product-list .item .item-content .item-btn:hover { border-color: #fff; } .product-list .item .item-content .item-price { display: flex; justify-content: space-between; align-items: center; } .product-list .item .item-content .item-price .price { font-size: .875rem; color: #ffffff; } /*-------------------------------------------------------------- ## Product series --------------------------------------------------------------*/ .products-series { width: 100%; position: relative; margin: 0 auto; } .products-series-banner { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin: -24px auto; scroll-behavior: smooth; scrollbar-width: none; gap: 24px; padding: 24px 140px; } .products-series-banner .item { width: 450px; flex-shrink: 0; } @media (max-width: 767.98px) { .products-series-banner { gap: 16px; padding: 24px 16px; } .products-series-banner .item { width: 360px; } .products-series-banner .item .item-content { padding: 1rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .products-series-banner { padding: 24px 38px } .products-series-banner .item { width: 360px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .products-series-banner { padding: 24px 45px } .products-series-banner .item { width: 400px; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .products-series-banner { padding: 24px 126px } .products-series-banner .item { width: 360px; } } @media (min-width: 1400px) and (max-width: 1599.98px) { .products-series-banner { padding: 24px calc((100vw - 1310px) / 2) } } @media (min-width: 1600px) { .products-series-banner { padding: 24px calc((100vw - 1548px) / 2) } } /* 导航按钮样式 */ .products-series-prev { position: absolute; top: 120px; height: calc(100% - 170px); width: 8%; cursor: pointer; z-index: 11; align-items: center; display: flex; opacity: 0; transition: all .2s cubic-bezier(.07, .92, .19, .99); justify-content: flex-end; visibility: hidden; left: 0; } @media (min-width: 2560px) { .products-series-prev { height: calc(100% - 170px); } } .products-series-next { position: absolute; top: 120px; height: calc(100% - 170px); width: 8%; cursor: pointer; z-index: 11; align-items: center; display: flex; opacity: 0; transition: all .2s cubic-bezier(.07, .92, .19, .99); justify-content: flex-start; visibility: hidden; right: 0; } @media (min-width: 2560px) { .products-series-next { height: calc(100% - 170px); } } .products-series-prev > svg, .products-series-next > svg { border-radius: 50%; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); } .products-series:hover .products-series-next { opacity: 1; visibility: visible; } @media (max-width: 768px) { .products-series-wrapper { margin-left: 20px; margin-right: -20px; } .products-series-prev, .products-series-next { display: none; } } /*-------------------------------------------------------------- ## Product series --------------------------------------------------------------*/ .module-banner-w100 .swiper-slide { position: relative; width: 900px; } .module-banner-w100 .swiper-slide .slide-content { position: absolute; left: 0; top: 0; right: 0; display: flex; justify-content: center; flex-direction: column; text-align: center; color: #fff; padding: 81px 32px 0; border-radius: inherit; } @media (max-width: 767.98px) { .module-banner-w100 .swiper-slide { width: 85% } .module-banner-w100 .swiper-slide .slide-content { padding: 36px 32px; bottom: 0; } } @media (min-width: 768px) and (max-width: 991.98px) { .module-banner-w100 .swiper-slide { width: 540px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .module-banner-w100 .swiper-slide { width: 720px; } } .module-banner-w100 .swiper-slide .slide-content:before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 200px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .496) 6.67%, rgba(0, 0, 0, .482) 13.33%, rgba(0, 0, 0, .459) 20%, rgba(0, 0, 0, .426) 26.67%, rgba(0, 0, 0, .384) 33.33%, rgba(0, 0, 0, .334) 40%, rgba(0, 0, 0, .279) 46.67%, rgba(0, 0, 0, .221) 53.33%, rgba(0, 0, 0, .166) 60%, rgba(0, 0, 0, .116) 66.67%, rgba(0, 0, 0, .074) 73.33%, rgba(0, 0, 0, .041) 80%, rgba(0, 0, 0, .018) 86.67%, rgba(0, 0, 0, .004) 93.33%, transparent); } .module-banner-w100 .swiper-slide .slide-body { position: relative; z-index: 2; } .module-banner-w100 .swiper-slide .slide-text { position: relative; transform: translateY(-24px); transition: all 0.3s ease-in-out; } .module-banner-w100 .swiper-slide:hover .slide-text { transform: translateY(0); } .module-banner-w100 .swiper-slide .slide-action { display: flex; justify-content: center; gap: 4px; opacity: 0; transform: translateY(24px); transition: all 0.3s ease-in-out; } .module-banner-w100 .swiper-slide:hover .slide-action { opacity: 1; transform: translateY(0); } .module-banner-w100 .swiper-slide .slide-action a { display: flex; justify-content: center; align-items: center; height: 48px; font-size: 18px; font-weight: bold; padding: 0 32px; color: var(--color-dark); border-radius: 64px; background: #fff; -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } .module-banner-w100 .swiper-slide .slide-action a:hover { background: rgba(255, 255, 255, 0.6); } @media (min-width: 768px) and (max-width: 991.98px) { .module-banner-w100 .swiper-slide { width: 640px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .module-banner-w100 .swiper-slide { width: 900px; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .module-banner-w100 .swiper-slide { width: 900px; } } @media (min-width: 1400px) and (max-width: 1599.98px) { .module-banner-w100 .swiper-slide { width: 1200px; } } @media (min-width: 1600px) { .module-banner-w100 .swiper-slide { width: 1440px; } } .site-footer { } .site-footer .footer-content { padding: 32px 0; } .site-footer .footer-logo img { min-height: 40px; max-height: 60px; object-fit: contain; } .site-footer .footer-content { display: flex; flex-direction: column; gap: 24px; } .site-footer .footer-body { } .site-footer .footer-menu { } .site-footer .footer-menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; } .site-footer .footer-menu li { position: relative; } .site-footer .footer-menu li:after { content: ''; position: absolute; right: -16px; top: 3px; width: 1px; height: 16px; background-color: var(--gray-3); } .site-footer .footer-menu li:last-child:after { display: none; } .site-footer .footer-menu li a { } .site-footer .footer-contact { display: flex; flex-direction: column; flex-shrink: 0; gap: 16px; max-width: 300px; } .site-footer .footer-contact li { position: relative; display: flex; flex-direction: column; flex-shrink: 0; gap: 4px; padding-left: 40px; } .site-footer .footer-contact li .contact-icon { position: absolute; left: 0; top: 2px; font-size: 20px; } .site-footer .footer-copyright { padding: 24px 0; } @media (min-width: 1400px) { .site-footer .footer-text { max-width: 640px; } } @media (max-width: 991.98px) { .site-footer .footer-contact { max-width: 100%; } } @media (min-width: 768px) and (max-width: 991.98px) { .site-footer .footer-contact { flex-direction: row; flex-wrap: wrap; max-width: 100%; } .site-footer .footer-contact li { width: 40%; } } /*-------------------------------------------------------------- ## Category cover --------------------------------------------------------------*/ .category-header { margin-bottom: 2rem; } .category-cover { position: relative; min-height: 500px; max-height: 60vh; } .category-cover:after { content: ""; display: block; padding-top: 33.33333%; } .post-cover { position: relative; padding: 6rem 0; min-height: 320px; } @media (min-width: 1400px) { .post-cover { display: flex; justify-content: center; align-items: center; min-height: 500px; } } .post-cover .cover-bg, .category-cover .cover-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .post-cover .cover-content, .category-cover .cover-content { position: relative; z-index: 1; } .post-cover .cover-content { width: 100%; } @media (max-width: 767.98px) { .category-header { margin-bottom: 1.25rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .category-header { margin-bottom: 1.5rem; } } /*-------------------------------------------------------------- ## Read More Button style --------------------------------------------------------------*/ .read-more-wrapper { margin-top: 1.5rem; text-align: center; } .post-content-summary { margin-bottom: 1rem; } .post-content-remaining { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /*-------------------------------------------------------------- ## Page poster --------------------------------------------------------------*/ .site-poster .media-overlay { padding: 0; } /*-------------------------------------------------------------- ## slogan section --------------------------------------------------------------*/ .slogan-section { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 0; } /*-------------------------------------------------------------- ## About section --------------------------------------------------------------*/ .about-section .about-body { flex: 1 1 auto; } .about-section .about-body p { margin-bottom: 24px; } .about-section .about-body p:last-child { margin-bottom: 0; } .about-section .about-image { width: 720px; } .about-section .about-video { position: relative; overflow: hidden; width: 720px; background-color: #000; } .about-section .about-video:after { content: ''; display: block; padding-top: 56.25%; } .about-section .about-video video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } @media (min-width: 768px) and (max-width: 991.98px) { .about-section .about-image, .about-section .about-video { width: 360px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .about-section .about-image, .about-section .about-video { width: 480px; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .about-section .about-image, .about-section .about-video { width: 540px; } } @media (max-width: 767.98px) { .about-section .about-image, .about-section .about-video { order: 1; width: 100%; } .about-section .about-body { order: 2 } } /*-------------------------------------------------------------- ## page menu --------------------------------------------------------------*/ .page-menu { border-bottom: 1px solid var(--border-color); } .page-menu ul { display: flex; justify-content: center; gap: 36px; } .page-menu li { position: relative; flex-shrink: 0; opacity: 0.6; } .page-menu li a:after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 0; height: 2px; background-color: var(--color-primary); transform: translateX(-50%); transition: all 0.3s ease-in-out; } .page-menu li:hover, .page-menu li.current-menu-item { opacity: 1; } .page-menu li:hover a:after, .page-menu li.current-menu-item a:after { width: 100%; } .page-menu li a { position: relative; display: block; font-size: 18px; padding: 20px 0; } @media (max-width: 1199.98px) { .page-menu { overflow: hidden; } .page-menu .container { padding: 0; } .page-menu ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; overflow-x: auto; gap: 24px; } .page-menu ul li:first-child { padding-left: 24px; } .page-menu ul li:last-child { padding-right: 24px; } .page-menu ul li a { font-size: 16px; padding: 16px 0; } } /*-------------------------------------------------------------- ## Time block --------------------------------------------------------------*/ .time-block { position: relative; display: flex; justify-content: space-between; padding-bottom: 56px; } .time-date { position: relative; top: -4px; width: 45%; font-size: 40px; font-weight: bold; text-align: right; line-height: 1; } .time-block:nth-child(2n) .time-date { order: 2; text-align: left; } .time-block:before { content: ''; position: absolute; left: 50%; top: 10px; bottom: -10px; width: 2px; margin-left: -1px; background-color: var(--gray-3); } .time-block:after { content: ''; position: absolute; left: 50%; top: 6px; width: 16px; height: 16px; margin-left: -8px; background-color: var(--gray-8); border-radius: 24px; z-index: 2; } .time-block:last-child:before { bottom: 0; } .time-block:first-child:after { background-color: var(--color-primary); } .time-list { position: relative; width: 45%; display: flex; flex-direction: column; gap: 16px; } .time-block:nth-child(2n) .time-list { order: 1; text-align: right; } .time-list .item { } .time-list .item .item-content { } /*-------------------------------------------------------------- ## Popup Login style --------------------------------------------------------------*/ .search-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 999; cursor: pointer; overflow-y: auto; opacity: 0; visibility: hidden; transition: all 0.3s linear; } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { .search-popup { background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } } .search-popup.is-visible { visibility: visible; opacity: 1; } .search-popup.is-visible .search-popup-container { transform: scale(1) translateY(0px); } .search-popup-container { position: relative; width: 96%; max-width: 600px; background: #fff; margin: 3em auto 4em; cursor: auto; border-radius: var(--border-radius-md); transform: scale(.85) translateY(50px); transition: transform 0.3s ease-out; } .search-popup-container .search-popup-close { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 150%); } .search-hidden { overflow: hidden; } /*-------------------------------------------------------------- fixed scroll widget --------------------------------------------------------------*/ .scroll-toolbar { position: fixed; bottom: 33%; right: 1rem; z-index: 99; } .scroll-toolbar .scroll-connect { width: 46px; border-radius: var(--border-radius-sm); margin-bottom: 1rem; background-color: #fff; border: 1px solid var(--border-light); box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2); } .scroll-toolbar .scroll-connect .connect-content { position: absolute; right: 60px; top: 0; width: 200px; text-align: left; border-radius: var(--border-radius-sm); cursor: auto; opacity: 0; visibility: hidden; padding: 1rem 1.25rem; background-color: #fff; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2); transition: all 500ms ease; transform: translateX(10px); } .scroll-toolbar .scroll-connect .connect-content .connect-qrcode { display: inline-block; width: 125px; height: 125px; } .scroll-toolbar .scroll-connect .connect-item:hover .connect-content { opacity: 1; visibility: visible; transform: translateX(0); } .scroll-toolbar .scroll-connect .connect-item { position: relative; text-align: center; padding: .75rem 0; } .scroll-toolbar .scroll-connect .connect-item:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 20px; height: 1px; background-color: var(--border-light); transform: translateX(-50%); box-shadow: 0 1px 1px #fff; } .scroll-toolbar .scroll-connect .connect-item:last-child::after { display: none; } .scroll-toolbar .scroll-connect .connect-button { color: var(--color-muted); cursor: pointer; } .scroll-toolbar .scroll-connect .connect-button:hover { color: var(--color-primary); } .scroll-toolbar .scroll-connect .connect-icon { font-size: 1.375rem; } .scroll-toolbar .scroll-connect .connect-text { font-size: .75rem; line-height: 1.4; padding: 0 .5rem; margin: .25rem 0 0; } .scroll-toolbar .scroll-backtotop { opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 500ms ease; } .scroll-toolbar .scroll-backtotop.active { opacity: 1; visibility: visible; transform: translateY(0); } @media (min-width: 768px) and (max-width: 991.98px) { .scroll-toolbar { bottom: 22%; } } @media (min-width: 992px) and (max-width: 1199.98px) { .scroll-toolbar { bottom: 20%; } } /*-------------------------------------------------------------- ## Page --------------------------------------------------------------*/ .contact-info { } .contact-info .contact-item { display: flex; flex-direction: row; min-width: 0; word-wrap: break-word; gap: 16px; } .contact-info .contact-item .contact-content { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 24px; min-width: 0; } .contact-info .contact-item .contact-image { width: 96px; height: 96px; } .contact-info .contact-item .contact-image .media-content { padding: 8px; background-color: transparent; } .contact-info .contact-item .contact-image img { object-fit: contain; } .contact-info .contact-item a { color: var(--color-primary); } .helps-posts { } .helps-posts .help-item .help-header { gap: 12px; } .helps-posts .help-item .help-header .help-icon { width: 36px; height: 36px; } .helps-posts .help-item .help-header .help-icon img { width: 36px; height: 36px; object-fit: contain; } .helps-posts .help-item { border: 1px solid var(--gray-2); box-shadow: none; } .helps-posts .help-list { } .helps-posts .help-list li { position: relative; margin-bottom: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 24px; border-bottom: 1px solid var(--gray-2); } .helps-posts .help-list li:before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background-color: var(--color-primary); border-radius: 12px; } .helps-posts .help-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .helps-posts .help-list li a:hover { color: var(--color-primary); } .helps-posts .help-list li .help-post-icon { position: absolute; right: 0; top: 4px; opacity: 0.4; } /*-------------------------------------------------------------- ## Woo --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Alert --------------------------------------------------------------*/ .alert:before, .alert:after { display: none; } .alert { --bs-alert-border-radius: var(--border-radius-sm); } .alert-danger { --bs-alert-color: var(--color-danger); --bs-alert-bg: var(--bg-subtle-danger); --bs-alert-border-color: var(--bg-subtle-danger); --bs-alert-link-color: var(--color-danger); } /*-------------------------------------------------------------- ## Order list style --------------------------------------------------------------*/ .order-list { display: flex; flex-direction: column; gap: 1rem; } .order-item { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--gray-3); border-radius: var(--border-radius-sm); } .order-header { border-color: var(--gray-3); background-color: var(--gray-1); } mark.order-number, mark.order-date, mark.order-status { padding: 1px 6px; margin: 0 4px; border-radius: var(--border-radius-xs); background-color: var(--gray-2); } .order-total { font-size: 0.875rem; } .order-product-image { width: 80px; height: 80px; flex-shrink: 0; } .order-product-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: var(--border-radius-xs); } .product-title { margin: 0; font-size: 1rem; } @media (max-width: 767.98px) { .order-header { padding: 0.75rem !important; } .order-content { padding: 0.75rem !important; } .order-product-image { width: 60px; height: 60px; } .product-title { font-size: 0.875rem; } .order-total { font-size: 0.75rem; } } /*-------------------------------------------------------------- ## Order details style --------------------------------------------------------------*/ .order-info { font-size: 0.875rem; } .order-products { font-size: 0.875rem; } .order-product-item { border-color: var(--gray-2); } .product-meta { font-size: 0.8125rem; } .product-price { font-weight: 500; } .address-card { position: relative; overflow: hidden; flex: 1 1 auto; background-color: var(--gray-1); border: 1px solid var(--gray-3); border-radius: var(--border-radius-sm); font-size: 0.875rem; } .address-title { position: absolute; top: 0px; right: 0px; font-size: 0.75rem; color: #fff; background-color: var(--color-primary); padding: 1px 6px; font-size: 0.875rem; border-bottom-left-radius: var(--border-radius-sm); } @media (max-width: 767.98px) { .order-info, .order-products, .product-meta { font-size: 0.8125rem; } .product-title { font-size: 0.875rem; } } /*-------------------------------------------------------------- ## Checkout page style --------------------------------------------------------------*/ .site-checkout .payment-options { display: flex; flex-direction: column; gap: 16px; } .site-checkout .payment-option .payment-method-label { position: relative; cursor: pointer; padding: 12px 44px 12px 12px; border-radius: var(--border-radius-sm); } .site-checkout .payment-option .payment-method-label { border: 1px solid var(--border-color); transition: border-color 0.2s ease; } .site-checkout .payment-option .payment-method-label:hover { border-color: var(--outline-primary); background-color: var(--gray-1); } .site-checkout .payment-option .btn-check:checked + label.payment-method-label { border-color: var(--outline-primary); background-color: var(--gray-1); } .site-checkout .payment-option .payment-method-label:after { content: ''; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48ZyBmaWxsPSdub25lJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnPjxwYXRoIGQ9J00yNCAwdjI0SDBWMHpNMTIuNTk0IDIzLjI1OGwtLjAxMi4wMDItLjA3MS4wMzUtLjAyLjAwNC0uMDE0LS4wMDQtLjA3MS0uMDM2Yy0uMDEtLjAwMy0uMDE5IDAtLjAyNC4wMDZsLS4wMDQuMDEtLjAxNy40MjguMDA1LjAyLjAxLjAxMy4xMDQuMDc0LjAxNS4wMDQuMDEyLS4wMDQuMTA0LS4wNzQuMDEyLS4wMTYuMDA0LS4wMTctLjAxNy0uNDI3Yy0uMDAyLS4wMS0uMDA5LS4wMTctLjAxNi0uMDE4bS4yNjQtLjExMy0uMDE0LjAwMi0uMTg0LjA5My0uMDEuMDEtLjAwMy4wMTEuMDE4LjQzLjAwNS4wMTIuMDA4LjAwOC4yMDEuMDkyYy4wMTIuMDA0LjAyMyAwIC4wMjktLjAwOGwuMDA0LS4wMTQtLjAzNC0uNjE0Yy0uMDAzLS4wMTItLjAxLS4wMi0uMDItLjAyMm0tLjcxNS4wMDJhLjAyMy4wMjMgMCAwIDAtLjAyNy4wMDZsLS4wMDYuMDE0LS4wMzQuNjE0YzAgLjAxMi4wMDcuMDIuMDE3LjAyNGwuMDE1LS4wMDIuMjAxLS4wOTMuMDEtLjAwOC4wMDMtLjAxMS4wMTgtLjQzLS4wMDMtLjAxMi0uMDEtLjAxeicvPjxwYXRoIGZpbGw9JyNGRkZGRkZGRicgZD0nTTE5LjQ5NSAzLjEzM2ExIDEgMCAwIDEgMS4zNTIuMzA5bC45OSAxLjUxYTEgMSAwIDAgMS0uMTU1IDEuMjc5bC0uMDAzLjAwNC0uMDE0LjAxMy0uMDU3LjA1My0uMjI1LjIxNWE4My44NiA4My44NiAwIDAgMC0zLjYyIDMuNzM2Yy0yLjE5NyAyLjQxNi00LjgwNiA1LjU3OC02LjU2MiA4LjY0Ni0uNDkuODU2LTEuNjg3IDEuMDQtMi4zOTcuMzAxbC02LjQ4NS02LjczOGExIDEgMCAwIDEgLjA1MS0xLjQzNmwxLjk2LTEuNzY4QTEgMSAwIDAgMSA1LjYgOS4ybDMuMzA5IDIuNDgxYzUuMTY5LTUuMDk3IDguMS03LjA1MyAxMC41ODYtOC41NDgnLz48L2c+PC9zdmc+); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--color-primary); border: 4px solid var(--color-primary); border-radius: 16px; transform: translate(0, -50%); opacity: 0; } .site-checkout .payment-option .btn-check:checked + label.payment-method-label:after { opacity: 1; } .site-checkout .payment-icon { width: 40px; } .site-checkout .order-item img { width: 40px; height: 40px; -o-object-fit: cover; object-fit: cover; } .site-checkout .order-summary { font-size: 0.875rem; } @media (max-width: 767.98px) { .site-checkout .order-summary { font-size: 0.8125rem; } .site-checkout .order-item img { width: 32px; height: 32px; } } /*-------------------------------------------------------------- ## Error empty --------------------------------------------------------------*/ .error-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; } .error-empty .error-icon { max-width: 400px; width: 100%; } .error-empty.block .error-icon { max-width: 320px; width: 100%; } /*-------------------------------------------------------------- ## Product Post --------------------------------------------------------------*/ .product-banner { position: relative; padding-left: 160px; } .product-banner .productSwiper { position: absolute; left: 0; top: 0; height: 100%; padding-bottom: 24px; z-index: 2; } .product-banner .productSwiper:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); z-index: 2; } .product-banner .productSwiper .swiper-slide { width: 120px; height: 120px; } .product-header { padding-bottom: 3.5rem; } .product-info { padding: 4px 16px; background-color: var(--gray-1); } .product-info li { position: relative; padding: 16px 0 16px 32px; border-bottom: 1px solid var(--border-color); } .product-info li:last-child { border: 0; } .product-info li .item-icon { position: absolute; left: 0; top: 15px; font-size: 1.375rem; width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; } .product-info li .item-icon.icon-motherboard1 { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYzOF83NykiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNSAzLjVDMy45NDc3MiAzLjUgMy41IDMuOTQ3NzIgMy41IDQuNVYxOUMzLjUgMTkuNTUyMyAzLjk0NzcyIDIwIDQuNSAyMEgxOS41QzIwLjA1MjMgMjAgMjAuNSAxOS41NTIzIDIwLjUgMTlWNC41QzIwLjUgMy45NDc3MiAyMC4wNTIzIDMuNSAxOS41IDMuNUg0LjVaTTcgNS41QzYuMTcxNTcgNS41IDUuNSA2LjE3MTU3IDUuNSA3VjEyQzUuNSAxMi44Mjg0IDYuMTcxNTcgMTMuNSA3IDEzLjVIMTJDMTIuODI4NCAxMy41IDEzLjUgMTIuODI4NCAxMy41IDEyVjdDMTMuNSA2LjE3MTU3IDEyLjgyODQgNS41IDEyIDUuNUg3Wk02LjUgN0M2LjUgNi43MjM4NiA2LjcyMzg2IDYuNSA3IDYuNUgxMkMxMi4yNzYxIDYuNSAxMi41IDYuNzIzODYgMTIuNSA3VjEyQzEyLjUgMTIuMjc2MSAxMi4yNzYxIDEyLjUgMTIgMTIuNUg3QzYuNzIzODYgMTIuNSA2LjUgMTIuMjc2MSA2LjUgMTJWN1pNNi41IDE2QzYuNSAxNS43MjM5IDYuNzIzODYgMTUuNSA3IDE1LjVIMTBDMTAuMjc2MSAxNS41IDEwLjUgMTUuNzIzOSAxMC41IDE2QzEwLjUgMTYuMjc2MSAxMC4yNzYxIDE2LjUgMTAgMTYuNUg3QzYuNzIzODYgMTYuNSA2LjUgMTYuMjc2MSA2LjUgMTZaTTcgMTcuNUM2LjcyMzg2IDE3LjUgNi41IDE3LjcyMzkgNi41IDE4QzYuNSAxOC4yNzYxIDYuNzIzODYgMTguNSA3IDE4LjVIMTVDMTUuMjc2MSAxOC41IDE1LjUgMTguMjc2MSAxNS41IDE4QzE1LjUgMTcuNzIzOSAxNS4yNzYxIDE3LjUgMTUgMTcuNUg3Wk0xNiA1LjVDMTYuMjc2MSA1LjUgMTYuNSA1LjcyMzg2IDE2LjUgNlYxNEMxNi41IDE0LjI3NjEgMTYuMjc2MSAxNC41IDE2IDE0LjVDMTUuNzIzOSAxNC41IDE1LjUgMTQuMjc2MSAxNS41IDE0VjZDMTUuNSA1LjcyMzg2IDE1LjcyMzkgNS41IDE2IDUuNVpNMTguNSA2QzE4LjUgNS43MjM4NiAxOC4yNzYxIDUuNSAxOCA1LjVDMTcuNzIzOSA1LjUgMTcuNSA1LjcyMzg2IDE3LjUgNlYxNEMxNy41IDE0LjI3NjEgMTcuNzIzOSAxNC41IDE4IDE0LjVDMTguMjc2MSAxNC41IDE4LjUgMTQuMjc2MSAxOC41IDE0VjZaTTExLjUgMTZDMTEuNSAxNS43MjM5IDExLjcyMzkgMTUuNSAxMiAxNS41SDEzQzEzLjI3NjEgMTUuNSAxMy41IDE1LjcyMzkgMTMuNSAxNkMxMy41IDE2LjI3NjEgMTMuMjc2MSAxNi41IDEzIDE2LjVIMTJDMTEuNzIzOSAxNi41IDExLjUgMTYuMjc2MSAxMS41IDE2Wk0xNyAxNy41QzE2LjcyMzkgMTcuNSAxNi41IDE3LjcyMzkgMTYuNSAxOEMxNi41IDE4LjI3NjEgMTYuNzIzOSAxOC41IDE3IDE4LjVIMThDMTguMjc2MSAxOC41IDE4LjUgMTguMjc2MSAxOC41IDE4QzE4LjUgMTcuNzIzOSAxOC4yNzYxIDE3LjUgMTggMTcuNUgxN1oiIGZpbGw9IiMzMDMwMzMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82MzhfNzciPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg=='); } .product-info li .item-icon.icon-gpu1 { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYzOF8xNTcpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI1IDIuMjVDMy42NjQyMSAyLjI1IDQgMi41ODU3OSA0IDNMNCAyMUM0IDIxLjQxNDIgMy42NjQyMSAyMS43NSAzLjI1IDIxLjc1QzIuODM1NzkgMjEuNzUgMi41IDIxLjQxNDIgMi41IDIxTDIuNSAzQzIuNSAyLjU4NTc5IDIuODM1NzkgMi4yNSAzLjI1IDIuMjVaIiBmaWxsPSIjMzAzMDMzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMy41IDVIMjAuNUMyMS4wNTIzIDUgMjEuNSA1LjQ0NzcyIDIxLjUgNlYxNUMyMS41IDE1LjU1MjMgMjEuMDUyMyAxNiAyMC41IDE2SDE4QzE3LjcyMzkgMTYgMTcuNSAxNi4yMjM5IDE3LjUgMTYuNVYxOEMxNy41IDE4LjU1MjMgMTcuMDUyMyAxOSAxNi41IDE5SDkuNUM4Ljk0NzcyIDE5IDguNSAxOC41NTIzIDguNSAxOFYxN0M4LjUgMTYuNDQ3NyA4LjA1MjI4IDE2IDcuNSAxNkgzLjVWNVpNOSA5Ljc1QzkuNDE0MjEgOS43NSA5Ljc1IDkuNDE0MjEgOS43NSA5QzkuNzUgOC41ODU3OSA5LjQxNDIxIDguMjUgOSA4LjI1SDdDNi41ODU3OSA4LjI1IDYuMjUgOC41ODU3OSA2LjI1IDlDNi4yNSA5LjQxNDIxIDYuNTg1NzkgOS43NSA3IDkuNzVIOVpNOS43NSAxMkM5Ljc1IDEyLjQxNDIgOS40MTQyMSAxMi43NSA5IDEyLjc1SDdDNi41ODU3OSAxMi43NSA2LjI1IDEyLjQxNDIgNi4yNSAxMkM2LjI1IDExLjU4NTggNi41ODU3OSAxMS4yNSA3IDExLjI1SDlDOS40MTQyMSAxMS4yNSA5Ljc1IDExLjU4NTggOS43NSAxMlpNMTMuNSAxOEMxMy41IDE4LjI3NjEgMTMuNzIzOSAxOC41IDE0IDE4LjVDMTQuMjc2MSAxOC41IDE0LjUgMTguMjc2MSAxNC41IDE4VjE2QzE0LjUgMTUuNzIzOSAxNC4yNzYxIDE1LjUgMTQgMTUuNUMxMy43MjM5IDE1LjUgMTMuNSAxNS43MjM5IDEzLjUgMTZWMThaTTEyIDE4LjVDMTEuNzIzOSAxOC41IDExLjUgMTguMjc2MSAxMS41IDE4VjE2QzExLjUgMTUuNzIzOSAxMS43MjM5IDE1LjUgMTIgMTUuNUMxMi4yNzYxIDE1LjUgMTIuNSAxNS43MjM5IDEyLjUgMTZWMThDMTIuNSAxOC4yNzYxIDEyLjI3NjEgMTguNSAxMiAxOC41Wk0xNi41IDE0QzE4LjQzMyAxNCAyMCAxMi40MzMgMjAgMTAuNUMyMCA4LjU2NyAxOC40MzMgNyAxNi41IDdDMTQuNTY3IDcgMTMgOC41NjcgMTMgMTAuNUMxMyAxMi40MzMgMTQuNTY3IDE0IDE2LjUgMTRaIiBmaWxsPSIjMzAzMDMzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNDk5NiAxMy41QzE0Ljg0NTMgMTMuNSAxMy41IDEyLjE1NCAxMy41IDEwLjUwMDRDMTMuNSA4Ljg0NjY4IDE0Ljg0NiA3LjUgMTYuNDk5NiA3LjVDMTguMTUzMyA3LjUgMTkuNSA4Ljg0NTk4IDE5LjUgMTAuNTAwNEMxOS41IDEyLjE1NDcgMTguMTU0IDEzLjUgMTYuNDk5NiAxMy41Wk0xNC41OTY2IDguNzkzNTFDMTQuMTkwMSA5LjI0NjQxIDEzLjk0MjYgOS44NDQ2OCAxMy45NDI2IDEwLjQ5OTZDMTMuOTQyNiAxMC41NDk2IDEzLjk0NCAxMC41OTkyIDEzLjk0NjkgMTAuNjQ4NUMxNC40NTMzIDExLjAwNjcgMTQuOTIxNSAxMS4xNDQxIDE1LjM0MTIgMTEuMDU2N0MxNS4zODA5IDExLjA0ODUgMTUuNDE5NCAxMS4wMzgzIDE1LjQ1NjYgMTEuMDI2NkMxNS40MTkyIDEwLjkxODYgMTUuMzk4OCAxMC44MDI4IDE1LjM5ODggMTAuNjgyM0MxNS4zOTg4IDEwLjU4NjIgMTUuNDExOCAxMC40OTMgMTUuNDM2MSAxMC40MDQ0QzE1LjMwODcgMTAuMzI1NyAxNS4xODM0IDEwLjIyNTkgMTUuMDY5NCAxMC4wOTkyQzE0Ljc3MzUgOS43NzA0NiAxNC42MTU0IDkuMzMyODEgMTQuNTk2NiA4Ljc5MzUxWk0xNi4wMTA4IDkuNzI2MjdDMTUuODY3NiA5Ljc5MjY3IDE1Ljc0MTcgOS44OTAzMyAxNS42NDE5IDEwLjAxMDRDMTUuNTU2OSA5Ljk1NDg1IDE1LjQ3NDIgOS44ODY2IDE1LjM5ODggOS44MDI3OEMxNS4xMTE4IDkuNDg0MzIgMTQuOTk1NCA5LjAxMDYyIDE1LjA1MTcgOC4zOTMwN0MxNS40NjM2IDguMTA5MDMgMTUuOTYyNiA3Ljk0MjU3IDE2LjQ5OTYgNy45NDI1N0MxNi42ODAyIDcuOTQyNTcgMTYuODU2NCA3Ljk2MTM4IDE3LjAyNjQgNy45OTcxNEMxNi41NDQ0IDguMjg3NDggMTYuMjI5OSA4LjY1MjE4IDE2LjA4ODcgOS4wODU1M0MxNi4wMTU2IDkuMzEwNzQgMTUuOTk4MiA5LjUyOTAyIDE2LjAxMDggOS43MjYyN1pNMTYuODc2MyA5LjcxODc0QzE2Ljc0NjQgOS42NjEyMyAxNi42MDI4IDkuNjI5MjYgMTYuNDUxOSA5LjYyOTI2QzE2LjQ1MTYgOS42MjkyNiAxNi40NTEzIDkuNjI5MjYgMTYuNDUxIDkuNjI5MjZDMTYuNDQ5IDkuNDk5MDggMTYuNDY1MyA5LjM1OTg4IDE2LjUxMTYgOS4yMTlDMTYuNjQ5MSA4LjgwMTA0IDE3LjAxNzYgOC40NTY4MyAxNy42MDcxIDguMTk1MDVDMTguMjQ4IDguNTA0MyAxOC43NDExIDkuMDczMjEgMTguOTQ5IDkuNzY0MzdDMTguNDM0MiA5LjQ2NTIgMTcuOTQwMyA5LjM2MzgzIDE3LjQ3NjEgOS40NjIwN0MxNy4yNDE4IDkuNTExODEgMTcuMDQyMSA5LjYwNzUgMTYuODc2MyA5LjcxODc0Wk0xNy40OTc5IDEwLjU2MDFDMTcuNDczNSAxMC4zNTA5IDE3LjM4NzUgMTAuMTYwMSAxNy4yNTg2IDEwLjAwNjVDMTcuMzUyNyA5Ljk1Nzc5IDE3LjQ1NzMgOS45MTgwMiAxNy41NzI0IDkuODk0MUMxOC4wMTUyIDkuODAxNzkgMTguNTEzNiA5Ljk2MDQ3IDE5LjA1MzIgMTAuMzY1NEMxOS4wNTU2IDEwLjQwOTkgMTkuMDU2NyAxMC40NTQ2IDE5LjA1NjcgMTAuNDk5NkMxOS4wNTY3IDExLjE5ODkgMTguNzc0NSAxMS44MzM2IDE4LjMxODEgMTIuMjk1N0MxOC4zMjMxIDExLjY5MjggMTguMTY0MSAxMS4yMDg2IDE3Ljg0MzUgMTAuODUyM0MxNy43MzU4IDEwLjczMjYgMTcuNjE4IDEwLjYzNjggMTcuNDk3OSAxMC41NjAxWk0xNi44NzkzIDExLjY0NDZDMTcuMTMxMyAxMS41MzIzIDE3LjMzMTQgMTEuMzIzNyAxNy40MzI2IDExLjA2NThDMTcuNDYwNSAxMS4wOTE0IDE3LjQ4NzcgMTEuMTE4OCAxNy41MTQgMTEuMTQ4MUMxNy44MTgzIDExLjQ4NTcgMTcuOTMwOSAxMS45OTc4IDE3Ljg0OTIgMTIuNjcwOEMxNy40NTcyIDEyLjkxNTMgMTYuOTk0NiAxMy4wNTY3IDE2LjQ5OTYgMTMuMDU2N0MxNi4yNzU5IDEzLjA1NjcgMTYuMDU4NyAxMy4wMjc4IDE1Ljg1MTggMTIuOTczNkMxNi4zNTM0IDEyLjY4IDE2LjY3OTYgMTIuMzA4MyAxNi44MjQyIDExLjg2NDZDMTYuODQ4MyAxMS43OTA0IDE2Ljg2NjQgMTEuNzE2OSAxNi44NzkzIDExLjY0NDZaTTE1LjY5NDEgMTEuNDEyOEMxNS44NzQ3IDExLjYwMDEgMTYuMTIzOCAxMS43MjA4IDE2LjQwMDggMTEuNzM0MUMxNi4yNjI3IDEyLjE1MiAxNS44OTI2IDEyLjQ5NjQgMTUuMzAxIDEyLjc1NzlDMTQuNzA0NiAxMi40NDAxIDE0LjI0ODEgMTEuODkyOCAxNC4wNTAyIDExLjIzNDdDMTQuNDA3NiAxMS40MjgxIDE0Ljc1NDggMTEuNTI1MyAxNS4wODgzIDExLjUyNTNMMTUuMDg5IDExLjUyNkMxNS4yMDY0IDExLjUyNiAxNS4zMjMgMTEuNTE0MSAxNS40Mzc1IDExLjQ4OTVDMTUuNTI4MiAxMS40NzAyIDE1LjYxMzcgMTEuNDQ0MSAxNS42OTQxIDExLjQxMjhaIiBmaWxsPSIjMzAzMDMzIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNjM4XzE1NyI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K'); } .product-info li .item-icon.icon-power-supply1 { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYzOF8xMDIpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjUgNC41QzIuOTQ3NzIgNC41IDIuNSA0Ljk0NzcyIDIuNSA1LjVWMTguNUMyLjUgMTkuMDUyMyAyLjk0NzcxIDE5LjUgMy41IDE5LjVIMjAuNUMyMS4wNTIzIDE5LjUgMjEuNSAxOS4wNTIzIDIxLjUgMTguNVY1LjVDMjEuNSA0Ljk0NzcyIDIxLjA1MjMgNC41IDIwLjUgNC41SDMuNVpNMTkgMTYuNUMxOC43MjM5IDE2LjUgMTguNSAxNi43MjM5IDE4LjUgMTdDMTguNSAxNi43MjM5IDE4LjI3NjEgMTYuNSAxOCAxNi41SDE3QzE2LjcyMzkgMTYuNSAxNi41IDE2LjcyMzkgMTYuNSAxN0MxNi41IDE3LjI3NjEgMTYuNzIzOSAxNy41IDE3IDE3LjVIMThDMTguMjc2MSAxNy41IDE4LjUgMTcuMjc2MSAxOC41IDE3QzE4LjUgMTcuMjc2MSAxOC43MjM5IDE3LjUgMTkgMTcuNUgyMEMyMC4yNzYxIDE3LjUgMjAuNSAxNy4yNzYxIDIwLjUgMTdDMjAuNSAxNi43MjM5IDIwLjI3NjEgMTYuNSAyMCAxNi41SDE5Wk0xNy44NzM4IDdIMTkuMTI2MkMxOS4yNTg4IDcgMTkuMzg2IDcuMDUyNjggMTkuNDc5OCA3LjE0NjQ1TDE5Ljg1MzYgNy41MjAyMkMxOS45NDczIDcuNjEzOTkgMjAgNy43NDExNyAyMCA3Ljg3Mzc3VjguNUMyMCA4Ljc3NjE0IDE5Ljc3NjEgOSAxOS41IDlIMTcuNUMxNy4yMjM5IDkgMTcgOC43NzYxNCAxNyA4LjVWNy44NzM3N0MxNyA3Ljc0MTE3IDE3LjA1MjcgNy42MTM5OSAxNy4xNDY0IDcuNTIwMjJMMTcuNTIwMiA3LjE0NjQ1QzE3LjYxNCA3LjA1MjY4IDE3Ljc0MTIgNyAxNy44NzM4IDdaTTkuNSAxNy41QzEyLjUzNzYgMTcuNSAxNSAxNS4wMzc2IDE1IDEyQzE1IDguOTYyNDMgMTIuNTM3NiA2LjUgOS41IDYuNUM2LjQ2MjQzIDYuNSA0IDguOTYyNDMgNCAxMkM0IDE1LjAzNzYgNi40NjI0MyAxNy41IDkuNSAxNy41Wk05LjUgMThDMTIuODEzNyAxOCAxNS41IDE1LjMxMzcgMTUuNSAxMkMxNS41IDguNjg2MjkgMTIuODEzNyA2IDkuNSA2QzYuMTg2MjkgNiAzLjUgOC42ODYyOSAzLjUgMTJDMy41IDE1LjMxMzcgNi4xODYyOSAxOCA5LjUgMThaTTUuOTM1NTkgMTIuMjE1OEM2LjI4ODUxIDExLjkzMzcgNi42ODM3NyAxMS45MTk2IDcuMTA3MjYgMTIuMTU5NEM3LjUzMDc1IDEyLjM5OTIgNy45OTY2IDEyLjQyNzQgOC40NzY1NiAxMi4yNTgyQzguNTg5NDkgMTIuMjE1OCA4LjY0NTk1IDEyLjEzMTIgOC42NDU5NSAxMi4wMTg0QzguNjQ1OTUgMTEuOTA1NSA4LjU3NTM3IDExLjgzNSA4LjQzNDIxIDExLjgzNUM4LjE1MTg4IDExLjgyMDkgNy44Njk1NSAxMS43NTAzIDcuNTU4OTkgMTEuNjA5M0M3LjI5MDc3IDExLjQ4MjMgNy4wNTA3OSAxMS4zMjcxIDYuODUzMTYgMTEuMTQzN0M2LjIxNzkyIDEwLjU2NTQgNi4xMDQ5OSA5LjkwMjM3IDYuNTAwMjUgOS4xNDA2MkM2LjY1NTUzIDguODU4NDkgNi44OTU1MSA4LjYxODY3IDcuMjM0MzEgOC40MDcwOEM3LjU1ODk5IDguMTk1NDggNy45MTE5IDguMDY4NTIgOC4yNzg5MyA4LjAxMjA5QzguNzAyNDIgNy45NTU2NyA5LjA0MTIxIDguMDk2NzMgOS4yOTUzMSA4LjQzNTI5QzkuNTQ5NDEgOC43NzM4NSA5LjU3NzY0IDkuMTY4ODMgOS4zMzc2NiA5LjU5MjAzQzkuMjEwNjEgOS44MzE4NCA5LjE0MDAzIDEwLjA4NTggOS4xNDAwMyAxMC4zNTM4QzkuMTQwMDMgMTAuNTc5NSA5LjE2ODI2IDEwLjc3NyA5LjIzODg1IDEwLjk3NDVDOS4yODEyIDExLjA3MzIgOS4zNjU4OSAxMS4xNDM3IDkuNDc4ODMgMTEuMTI5NkM5LjU5MTc2IDExLjExNTUgOS42NjIzNCAxMS4wNDUgOS42NjIzNCAxMC45MThDOS42NzY0NiAxMC42NSA5Ljc2MTE1IDEwLjM1MzggOS45MDIzMiAxMC4wNDM0QzEwLjAyOTQgOS43NzU0MSAxMC4xNzA1IDkuNTM1NiAxMC4zNTQgOS4zMzgxMUMxMC45MzI4IDguNzE3NDIgMTEuNTk2MyA4LjYwNDU3IDEyLjM1ODYgOC45OTk1NUMxMi42NDA5IDkuMTQwNjIgMTIuODgwOSA5LjM4MDQzIDEzLjA5MjYgOS43MTg5OUMxMy4zMDQ0IDEwLjA0MzQgMTMuNDMxNCAxMC4zOTYxIDEzLjQ4NzkgMTAuNzYyOUMxMy41NDQ0IDExLjE4NjEgMTMuNDAzMiAxMS41Mzg3IDEzLjA2NDQgMTEuNzkyN0MxMi43MTE1IDEyLjA2MDcgMTIuMzE2MiAxMi4wNzQ4IDExLjg5MjcgMTEuODM1QzExLjY1MjggMTEuNzA4IDExLjM5ODcgMTEuNjM3NSAxMS4xMzA1IDExLjYzNzVDMTAuOTE4NyAxMS42Mzc1IDEwLjcyMTEgMTEuNjc5OCAxMC41MjM0IDExLjc1MDNDMTAuNDEwNSAxMS43Nzg1IDEwLjM1NCAxMS44NjMyIDEwLjM1NCAxMS45NzZDMTAuMzU0IDEyLjA4ODkgMTAuNDI0NiAxMi4xNTk0IDEwLjU2NTggMTIuMTU5NEMxMC44NDgxIDEyLjE3MzUgMTEuMTMwNSAxMi4yNTgyIDExLjQ0MSAxMi4zOTkyQzExLjcyMzMgMTIuNTI2MiAxMS45NDkyIDEyLjY4MTQgMTIuMTQ2OCAxMi44NjQ3QzEyLjc4MjEgMTMuNDI5IDEyLjg5NSAxNC4wOTIgMTIuNDk5NyAxNC44NTM4QzEyLjM1ODYgMTUuMTM1OSAxMi4xMTg2IDE1LjM3NTcgMTEuNzc5OCAxNS41ODczQzExLjQ1NTEgMTUuNzk4OSAxMS4xMDIyIDE1LjkyNTkgMTAuNzM1MiAxNS45ODIzQzEwLjMxMTcgMTYuMDUyOCA5Ljk1ODc5IDE1LjkxMTggOS43MDQ2OSAxNS41NzMyQzkuNDUwNTkgMTUuMjM0NyA5LjQyMjM2IDE0LjgzOTcgOS42NjIzNCAxNC40MTY1QzkuOTAyMzIgMTMuOTkzMyA5LjkzMDU1IDEzLjUyNzggOS43NjExNSAxMy4wMzRDOS43MDQ2OSAxMi45MzUzIDkuNjM0MTEgMTIuODc4OSA5LjUyMTE3IDEyLjg3ODlDOS40MDgyNCAxMi44Nzg5IDkuMzM3NjYgMTIuOTQ5NCA5LjMzNzY2IDEzLjA5MDVDOS4zMjM1NCAxMy4zNzI2IDkuMjM4ODUgMTMuNjU0NyA5LjA5NzY4IDEzLjk2NTFDOC45NzA2MyAxNC4yNDcyIDguODI5NDcgMTQuNDcyOSA4LjY0NTk1IDE0LjY3MDRDOC4wNjcxOCAxNS4yOTExIDcuNDAzNzEgMTUuNDAzOSA2LjY0MTQyIDE1LjAwODlDNi4zNTkwOSAxNC44Njc5IDYuMTE5MTEgMTQuNjI4MSA1LjkwNzM2IDE0LjI4OTVDNS42OTU2MSAxMy45NjUxIDUuNTY4NTcgMTMuNjEyNCA1LjUxMjEgMTMuMjQ1NkM1LjQ1NTYzIDEyLjgyMjQgNS41OTY4IDEyLjQ2OTggNS45MzU1OSAxMi4yMTU4Wk05LjkxNjQ0IDExLjk5MDFDOS45MTY0NCAxMS44NzczIDkuODg4MiAxMS43OTI3IDkuODAzNSAxMS43MDhDOS43MTg4MSAxMS42MjM0IDkuNjM0MTEgMTEuNTk1MiA5LjUyMTE3IDExLjU4MTFDOS40MDgyNCAxMS41ODExIDkuMzA5NDMgMTEuNjIzNCA5LjIyNDczIDExLjcwOEM5LjE1NDE1IDExLjc3ODUgOS4xMTE4IDExLjg3NzMgOS4xMTE4IDExLjk5MDFDOS4xMTE4IDEyLjEwMyA5LjE0MDAzIDEyLjIwMTcgOS4yMjQ3MyAxMi4yODY0QzkuMzA5NDMgMTIuMzU2OSA5LjQwODI0IDEyLjM5OTIgOS41MjExNyAxMi4zOTkyQzkuNjM0MTEgMTIuMzk5MiA5LjcxODgxIDEyLjM1NjkgOS44MDM1IDEyLjI4NjRDOS44NzQwOSAxMi4yMDE3IDkuOTE2NDQgMTIuMTAzIDkuOTE2NDQgMTEuOTkwMVoiIGZpbGw9IiMzMDMwMzMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82MzhfMTAyIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo='); } .product-info li .item-icon.icon-air-cooling1 { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYzOF85MykiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQgMTguMkM0IDE4LjY0MTEgNC4zNTg5MyAxOSA0LjggMTlIMTkuMkMxOS42NDExIDE5IDIwIDE4LjY0MTEgMjAgMTguMlYzLjhDMjAgMy4zNTg5MyAxOS42NDExIDMgMTkuMiAzSDQuOEM0LjM1ODkzIDMgNCAzLjM1ODkzIDQgMy44VjE4LjJaTTYuNCAxNy4yQzYuNCAxNy41MzIxIDYuMTMyMTQgMTcuOCA1LjggMTcuOEM1LjQ2Nzg2IDE3LjggNS4yIDE3LjUzMjEgNS4yIDE3LjJDNS4yIDE2Ljg2NzkgNS40Njc4NiAxNi42IDUuOCAxNi42QzYuMTMyMTQgMTYuNiA2LjQgMTYuODY3OSA2LjQgMTcuMlpNNS4yIDQuOEM1LjIgNC40Njc4NiA1LjQ2Nzg2IDQuMiA1LjggNC4yQzYuMTMyMTQgNC4yIDYuNCA0LjQ2Nzg2IDYuNCA0LjhDNi40IDUuMTMyMTQgNi4xMzIxNCA1LjQgNS44IDUuNEM1LjQ2Nzg2IDUuNCA1LjIgNS4xMzIxNCA1LjIgNC44Wk0xNy42IDQuOEMxNy42IDQuNDY3ODYgMTcuODY3OSA0LjIgMTguMiA0LjJDMTguNTMyMSA0LjIgMTguOCA0LjQ2Nzg2IDE4LjggNC44QzE4LjggNS4xMzIxNCAxOC41MzIxIDUuNCAxOC4yIDUuNEMxNy44Njc5IDUuNCAxNy42IDUuMTMyMTQgMTcuNiA0LjhaTTE3LjYgMTcuMkMxNy42IDE2Ljg2NzkgMTcuODY3OSAxNi42IDE4LjIgMTYuNkMxOC41MzIxIDE2LjYgMTguOCAxNi44Njc5IDE4LjggMTcuMkMxOC44IDE3LjUzMjEgMTguNTMyMSAxNy44IDE4LjIgMTcuOEMxNy44Njc5IDE3LjggMTcuNiAxNy41MzIxIDE3LjYgMTcuMlpNMTIgMTdDMTUuMzEzNyAxNyAxOCAxNC4zMTM3IDE4IDExQzE4IDcuNjg2MjkgMTUuMzEzNyA1IDEyIDVDOC42ODYyOSA1IDYgNy42ODYyOSA2IDExQzYgMTQuMzEzNyA4LjY4NjI5IDE3IDEyIDE3WiIgZmlsbD0iIzMwMzAzMyIvPgo8cGF0aCBkPSJNMTYgMTFDMTYgMTMuMjA5MSAxNC4yMDkxIDE1IDEyIDE1QzkuNzkwODYgMTUgOCAxMy4yMDkxIDggMTFDOCA4Ljc5MDg2IDkuNzkwODYgNyAxMiA3QzE0LjIwOTEgNyAxNiA4Ljc5MDg2IDE2IDExWiIgZmlsbD0iIzMwMzAzMyIvPgo8cGF0aCBkPSJNMTMgMTlIMTZWMTkuNUMxNiAxOS43NzYxIDE1Ljc3NjEgMjAgMTUuNSAyMEgxMy41QzEzLjIyMzkgMjAgMTMgMTkuNzc2MSAxMyAxOS41VjE5WiIgZmlsbD0iIzMwMzAzMyIvPgo8cGF0aCBkPSJNOCAxOUgxMVYxOS41QzExIDE5Ljc3NjEgMTAuNzc2MSAyMCAxMC41IDIwSDguNUM4LjIyMzg2IDIwIDggMTkuNzc2MSA4IDE5LjVWMTlaIiBmaWxsPSIjMzAzMDMzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS41IDE5LjVDOS43NzYxNCAxOS41IDEwIDE5LjcyMzkgMTAgMjBWMjFIMTFDMTEuMjc2MSAyMSAxMS41IDIxLjIyMzkgMTEuNSAyMS41QzExLjUgMjEuNzc2MSAxMS4yNzYxIDIyIDExIDIySDEwQzkuNDQ3NzIgMjIgOSAyMS41NTIzIDkgMjFWMjBDOSAxOS43MjM5IDkuMjIzODYgMTkuNSA5LjUgMTkuNVpNMTQuNSAxOS41QzE0Ljc3NjEgMTkuNSAxNSAxOS43MjM5IDE1IDIwVjIxSDE2QzE2LjI3NjEgMjEgMTYuNSAyMS4yMjM5IDE2LjUgMjEuNUMxNi41IDIxLjc3NjEgMTYuMjc2MSAyMiAxNiAyMkgxNUMxNC40NDc3IDIyIDE0IDIxLjU1MjMgMTQgMjFWMjBDMTQgMTkuNzIzOSAxNC4yMjM5IDE5LjUgMTQuNSAxOS41WiIgZmlsbD0iIzMwMzAzMyIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzYzOF85MyI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K'); } .product-info li .item-icon.icon-service5 { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5Ljc5MTcgNy40MTY1M0wxMiAyLjgzMzMzTDQuMjA4MzQgNy40MTY1M1YxNi41ODMyTDEyIDIxLjE2NjdMMTkuNzkxNyAxNi41ODMyVjcuNDE2NTNaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNDkzIDEuOTcxMzlDMTEuODA1OSAxLjc4NzMxIDEyLjE5NDEgMS43ODczMSAxMi41MDcgMS45NzEzOUwyMC4yOTg3IDYuNTU0NTlDMjAuNjA0MSA2LjczNDI2IDIwLjc5MTcgNy4wNjIxNiAyMC43OTE3IDcuNDE2NTNWMTYuNTgzMkMyMC43OTE3IDE2LjkzNzYgMjAuNjA0MSAxNy4yNjU1IDIwLjI5ODcgMTcuNDQ1MkwxMi41MDcgMjIuMDI4NkMxMi4xOTQxIDIyLjIxMjcgMTEuODA1OSAyMi4yMTI3IDExLjQ5MyAyMi4wMjg2TDMuNzAxMzIgMTcuNDQ1MkMzLjM5NTg4IDE3LjI2NTUgMy4yMDgzNCAxNi45Mzc2IDMuMjA4MzQgMTYuNTgzMlY3LjQxNjUzQzMuMjA4MzQgNy4wNjIxNiAzLjM5NTg5IDYuNzM0MjYgMy43MDEzMyA2LjU1NDU5TDExLjQ5MyAxLjk3MTM5Wk01LjIwODM0IDcuOTg4NDhWMTYuMDExM0wxMiAyMC4wMDY1TDE4Ljc5MTcgMTYuMDExM1Y3Ljk4ODQ4TDEyIDMuOTkzNTFMNS4yMDgzNCA3Ljk4ODQ4WiIgZmlsbD0iIzMzMzMzMyIvPgo8cGF0aCBkPSJNOC4zMzMzNCA5LjcwNzIzTDExLjk5NjkgMTIuMDAwMUwxNS42NjQ0IDkuNzA3MjMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiAxMlYxNi4xMjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo='); } .product-info li .item-icon.icon-service6 { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjAxNDggMTkuNjIyMkg0Ljg4NjU3QzQuMzQ2NDQgMTkuNjIyMSAzLjgyODQ2IDE5LjQwNzUgMy40NDY1NSAxOS4wMjU1QzMuMDY0NjMgMTguNjQzNiAyLjg1MDA1IDE4LjEyNTYgMi44NTAwMSAxNy41ODU1VjYuNDAyMzVDMi44NTAwMSA1LjI3NzU2IDMuNzYxODMgNC4zNjU3MyA0Ljg4NjU3IDQuMzY1NzNIMTIuMDE0OE0xOC4zNDg2IDE5LjYyMjJIMTIuMDE0OFYxNy41ODU1SDE4LjM0ODZDMTguNzY0NyAxNy41OTczIDE5LjExNTYgMTcuMjc3OCAxOS4xNDMgMTYuODYyNVY3LjEyNTI5QzE5LjExNTYgNi43MTAwNyAxOC43NjQ3IDYuMzkwNTMgMTguMzQ4NiA2LjQwMjM1SDEyLjAxNDhWNC4zNjU3M0gxOC4zNDg2QzE5Ljg5MTMgNC4zNDg3NiAyMS4xNTcyIDUuNTgyNzcgMjEuMTc5NiA3LjEyNTI5VjE2Ljg2MjVDMjEuMTU3MiAxOC40MDUxIDE5Ljg5MTMgMTkuNjM5MSAxOC4zNDg2IDE5LjYyMjJaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGQ9Ik0xMi4wMTQ4IDIuMzVDMTIuNjkzNiAyLjM1IDEzLjAzMzEgMi42ODk0NSAxMy4wMzMxIDMuMzY4MjhWMjAuNjE5NUMxMy4wMzMxIDIxLjI5ODQgMTIuNjkzNyAyMS42Mzc4IDEyLjAxNDggMjEuNjM3OEMxMS4zMzU4IDIxLjYzNzggMTAuOTk2NCAyMS4yOTg0IDEwLjk5NjQgMjAuNjE5NVYzLjM2ODI4QzEwLjk5NjQgMi42ODk0NSAxMS4zMzU4IDIuMzUgMTIuMDE0OCAyLjM1WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K'); } .product-tips p { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--gray-3) } .product-tips p:last-child { margin: 0; padding: 0; border: 0; } .seemore-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.2s; } .seemore-popup.active { opacity: 1; visibility: visible; } .seemore-popup .seemore-popup-box { position: relative; max-width: 600px; width: 100%; padding: 2rem 2.25rem 1.5rem 1.5rem; } .seemore-popup .seemore-popup-box h2 b { position: relative; display: inline-block; border: 1px solid var(--color-primary); font-size: 85%; font-weight: normal; line-height: 1.2; color: var(--color-primary); padding: 1px 3px; border-radius: 3px; margin-left: 4px; top: -1px; } .seemore-popup .seemore-popup-close { position: absolute; top: .5rem; right: .5rem; } .info-section .info-group { display: flex; flex-direction: column; gap: 12px; } .info-section .info-group .item { position: relative; padding: 24px 28px; border-radius: var(--border-radius-sm); transition: all 0.3s ease-in-out; cursor: pointer; } .info-section .info-group .item:hover { border-color: var(--color-primary); } .info-section .info-group .item.active { border-color: var(--color-primary); border-width: 2px; } .info-section .info-group.color-group { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0; } .info-section .info-group.color-group .item { display: flex; flex-direction: row; align-items: center; width: 49%; gap: 12px; padding: 24px 16px 24px 28px; } .info-section .info-group.color-group .item .item-color { flex-shrink: 0; width: 24px; height: 24px; border-radius: 100%; } .info-section .info-group label.item:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--border-color); border-radius: inherit; } .info-section .info-group label.item:hover:before { border-color: var(--color-primary); } .info-section .info-group .btn-check:checked + label.item:before { border-width: 2px; border-color: var(--color-primary); } .info-section .info-group .btn-check:disabled + label.item:before { border-width: 1px; border-color: var(--border-color); } .info-section .info-group .btn-check.sellout + label.item:before { border-color: var(--gray-3); } .info-section .info-group .item .item-tips { position: absolute; display: none; right: 0; top: 0; font-size: 12px; color: var(--color-muted); padding: 1px 8px; border-radius: inherit; border-top-left-radius: 0; background-color: var(--border-color); } .info-section .info-group .btn-check.sellout + label.item .item-tips { display: block; } .info-section.wc-pao-addon-container { position: relative; } .info-section .info-group.wc-pao-addon-wrap { flex-direction: column-reverse; padding: 0; margin: 0; } .info-section .info-group.wc-pao-addon-wrap:before, .info-section .info-group.wc-pao-addon-wrap:after { display: none; } .info-section .info-group.wc-pao-addon-wrap .wc-pao-addon-image-swatch-selected-swatch, .info-section .info-group.wc-pao-addon-wrap .wc-pao-addon-image-swatch-select { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; visibility: hidden; } .info-section .info-group .wc-pao-addon-image-swatch { position: relative; margin: 0; padding: 12px 28px; border-radius: var(--border-radius-sm); transition: all 0.3s ease-in-out; cursor: pointer; outline-width: 0; } .info-section .info-group .wc-pao-addon-image-swatch img { width: 80px; } .info-section .info-group .wc-pao-addon-image-swatch:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--border-color); border-radius: inherit; } .info-section .info-group .wc-pao-addon-image-swatch:hover:before { border-color: var(--color-primary); } .info-section .info-group .wc-pao-addon-image-swatch.selected:before { border-color: var(--color-primary); border-width: 2px; } .info-section .info-group .wc-pao-addon-image-swatch.item { padding: 24px 28px; } .info-section .info-group .item.has-image { position: relative; display: flex; flex-direction: row; min-width: 0; word-wrap: break-word; gap: 16px; } .info-section .info-group .item.has-image .item-image { width: 100px; } .info-section .info-group .item.has-image .item-image img { float: none; max-width: 100%; max-height: 100%; width: 100%; } .info-section .info-group .item.has-image .item-content { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; min-width: 0; padding: 20px 0; } .info-section .info-group .item.has-image .item-body { flex: 1 1 auto; } .product-specs { } .product-specs ul { } .product-specs ul li { display: flex; flex-direction: row; border-top: 1px solid var(--border-color); gap: 16px; padding: 2rem 0; } .product-specs ul li .item-title { width: 220px; flex-shrink: 0; } .product-specs ul li .item-content { flex: 1 1 auto; } @media (max-width: 767.98px) { .product-specs ul li .item-title { width: 100px; } } /*-------------------------------------------------------------- ## Cart list --------------------------------------------------------------*/ .cart-list .item .item-image { flex-shrink: 0; width: 80px; height: 80px; } .cart-list .item .item-image img { object-fit: cover; width: 80px; height: 80px; } .cart-list .item .item-footer input { width: 28px; height: 28px; margin: 0 2px; padding: 0; background-color: transparent; border-color: transparent; } .cart-list .item .item-footer input[type="number"], .cart-list .item .item-footer input[type="number"]::-webkit-inner-spin-button, .cart-list .item .item-footer input[type="number"]::-webkit-outer-spin-button { appearance: none; } @media (max-width: 767.98px) { .cart-list .item { position: relative; } .cart-list .item .item-image { flex-shrink: 0; width: 56px; height: 56px; } .cart-list .item .item-image img { object-fit: cover; width: 56px; height: 56px; } .cart-update .btn { width: 100%; } } /*-------------------------------------------------------------- ## Address list --------------------------------------------------------------*/ .address-list .address-item .address-badge { position: absolute; top: -1px; right: -1px; font-size: .875rem; padding: 2px 8px; border-top-right-radius: inherit; border-bottom-left-radius: inherit; } /*-------------------------------------------------------------- ## Woocommerce reset --------------------------------------------------------------*/ .woocommerce .woocommerce-breadcrumb { margin: 0; color: var(--color-muted); } .woocommerce .woocommerce-breadcrumb a { color: var(--color-dark); } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-primary); } .billing-form .select2-container .select2-selection--single { height: auto; } .billing-form .select2-container--default .select2-selection--single { font-size: 1rem; padding: 0.5rem 0.875rem; border-color: var(--gray-3); border-width: 1px; background-color: #fff; color: var(--gray-6); border-radius: var(--border-radius-sm); } .billing-form .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; } .billing-form .select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px; right: 10px; } .woocommerce form.billing-form .form-row-first, .woocommerce-page form.billing-form .form-row-first, .woocommerce form.billing-form .form-row-last, .woocommerce-page form.billing-form .form-row-last { margin-bottom: 1rem; } .select2-dropdown { border-color: var(--gray-3); } .select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--gray-3); } .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] { background-color: var(--gray-2); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--color-primary); } .woocommerce-notices-wrapper { display: none; } .woocommerce ul#shipping_method li:last-child { margin-bottom: 0; } .antom-cards { padding: 0; } .antom-cards-container-item-line input { border-color: var(--border-color); border-radius: var(--border-radius-sm); } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { border-color: var(--border-color); padding: 24px; margin: 0; text-align: left; border-radius: var(--border-radius-sm); } .woocommerce .woocommerce-form-login .woocommerce-form-login__submit { float: none; } .woocommerce-MyAccount-navigation-link--backinstock { display: none; } .site-footer .yay-currency-single-page-switcher, .site-notice .yay-currency-single-page-switcher { margin: 0; } .site-footer .yay-currency-single-page-switcher .yay-currency-custom-select__trigger, .site-notice .yay-currency-single-page-switcher .yay-currency-custom-select__trigger { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .site-footer .yay-currency-single-page-switcher .yay-currency-custom-select.open .yay-currency-custom-select__trigger, .site-notice .yay-currency-single-page-switcher .yay-currency-custom-select.open .yay-currency-custom-select__trigger { border-color: var(--gray-3); } .site-footer .yay-currency-single-page-switcher .yay-currency-custom-options { border-color: var(--gray-3); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .site-notice .yay-currency-single-page-switcher .yay-currency-custom-options { border-color: var(--gray-3); border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); } .site-footer .yay-currency-single-page-switcher .open .yay-currency-custom-select__trigger { border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); } .site-notice .yay-currency-single-page-switcher .open .yay-currency-custom-select__trigger { border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .site-footer .yay-currency-single-page-switcher .yay-currency-custom-option-row.selected, .site-notice .yay-currency-single-page-switcher .yay-currency-custom-option-row.selected { background-color: var(--color-primary); } .wc-pao-addons-container .validation_message { display: none; } .woocommerce form .form-row .input-text, .woocommerce-page form .form-row .input-text { font-size: 1rem; padding: 0.625rem 0.875rem; border: 1px solid var(--gray-3); background-color: #fff; color: var(--gray-6); border-radius: var(--border-radius-sm); transition: all 0.15s ease-in-out; margin: 0 0 1.5rem; box-shadow: none !important; appearance: none !important;; -webkit-appearance: none; -moz-appearance: none; } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row .input-text:active, .woocommerce-page form .form-row .input-text:focus, .woocommerce-page form .form-row .input-text:active { color: var(--gray-7); border-color: var(--color-primary); background-color: #fff; box-shadow: none !important;; appearance: none !important;; -webkit-appearance: none; -moz-appearance: none; outline: 0; } .woocommerce form .form-row .input-text::-moz-placeholder, .woocommerce-page form .form-row .input-text::-moz-placeholder { color: var(--gray-6); opacity: 1 } .woocommerce form .form-row .input-text::placeholder, .woocommerce-page form .form-row .input-text::placeholder { color: var(--gray-6); opacity: 1 } .woocommerce form .checkout-block .form-row { margin-top: 1rem; } /*-------------------------------------------------------------- ## Login css --------------------------------------------------------------*/ .login-page { background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vh; } .login-main { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; } .login-main .login-container { max-width: 500px; width: 100%; margin: 0 auto; padding: 2.5rem; } .login-main .reg-block { display: none; } .login-page.show-register .login-main .login-block { display: none; } .login-page.show-register .login-main .reg-block { display: block; } .login-main .login-logo { margin-bottom: 2.25rem; } .login-main .login-logo img { max-width: 192px; height: 48px; } .woocommerce .login-page form.login, .woocommerce .login-page form.register { padding: 0; border: 0; } .login-main .woocommerce-password-strength { font-size: .875rem; padding: .5rem; margin-top: .5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .login-main .woocommerce-password-strength.bad { background-color: rgba(255, 62, 62, 0.07); border-color: rgba(255, 62, 62, 0.07); color: var(--color-danger); } .login-main .woocommerce-password-strength.good { background-color: rgba(74, 189, 134, 0.1); border-color: rgba(74, 189, 134, 0.1); color: var(--color-success); } .login-main .woocommerce-password-hint { font-size: var(--font-size-sm); color: var(--color-muted) } /* 修改缺货选项的边框为虚线 */ .info-section .info-group .btn-check.sellout + label.item:before { border-color: var(--color-primary); border-style: dashed; } /*-------------------------------------------------------------- ## Product Swiper css --------------------------------------------------------------*/ .productSwiper .swiper-slide { cursor: pointer; } .productSwiper .swiper-slide:after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border: 2px solid var(--color-danger); border-radius: inherit; z-index: 1; opacity: 0; visibility: hidden; } .productSwiper .swiper-slide.swiper-slide-thumb-active:after { opacity: 1; visibility: visible; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.nice-add-to-cart-button.single_add_to_cart_button { width: 100%; display: block; padding: 20px 24px; font-size: 18px; border-radius: var(--border-radius-sm); background-color: var(--color-primary); color: #fff; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.nice-add-to-cart-button.single_add_to_cart_button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.nice-add-to-cart-button.single_add_to_cart_button:hover { background-color: var(--color-primary); color: #fff; opacity: 0.6; } .woocommerce .product-content table.shop_attributes tr:nth-child(even) td, .woocommerce .product-content table.shop_attributes tr:nth-child(even) th { background: transparent; } .woocommerce .product-content .woocommerce-product-attributes { border: 0; } .woocommerce .product-content .woocommerce-product-attributes th { width: 240px; font-weight: 700; padding: 24px 0; border: 0; border-bottom: 1px solid var(--border-light); } .woocommerce .product-content .woocommerce-product-attributes td { font-style: normal; padding: 24px 16px; border: 0; border-bottom: 1px solid var(--border-light); }