:root {
    --title-color: #ffffff;
    --body-color: #7c7e90;
    /*--body-color: rgba(240, 240, 255, 0.5);*/
    --light-color: #9b9b9b;
    --secondary-color: #f9f9f9;
    --smoke-color: #f8f8f8;
    --dark-color: #0b0c10;
    --light-gray-color: #171920;
    --light-dark-color: #0f1116;
    --mist-blue-color: #686d7c;
    --white-color: #ffffff;
    --black-color: #000000;
    --yellow-color: #fec624;
    --success-color: #28a745;
    --error-color: #dc3545;
    --orange-color: #f07707;
    --default-color: #ba6356;
    --default-color2: #a23e2f;
    --purple-color: #A970FF;
    --face-color: #4967a9;
    --insta-color: #ff08b6;
    --discord-color: #5562ea;
    --youtube-color: #dc3131;
    --border-color: rgba(0, 0, 0, 0.10);
    --theme-font: 'Marcellus-Regular';
    --theme-font2: 'GothamSSm-Light', sans-serif;
    --theme-font3: 'GothamSSm-Light', sans-serif;
    --theme-font4: 'Montserrat', sans-serif;
    --icon-font: 'Font Awesome 5 Pro';
    --ripple-ani-duration: 3s;
    --bs-gutter-x: 15px;
    --bs-gradient-2: linear-gradient(to right, rgba(var(--theme-color2), 1) 0%, rgba(var(--theme-color), 1) 100%);
    --bs-gradient-5: linear-gradient(to right, #a23e2f 0%, #ba6356 100%);
    --bs-gradient-3: linear-gradient(to right, #28a745 0%, #5ccc76 100%);
    --bs-gradient-4: linear-gradient(to right, var(--body-color) 0%, var(--light-color) 100%);
    --bs-gradient: linear-gradient(to right, #561f1f 0%, #a23e2f 100%);
    --bs-gradient-6: linear-gradient(to right, #280e60 0%, #4b2b8d 100%);
    --bs-gradient-7: linear-gradient(to right, #01010c 0%, #010918 100%);
    --thunder-duration: 10s;
    --thunder-delay: 5s;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

html,
body {
    font-size: 15px;
    font-weight: 500;
    line-height: 26px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-shadow: 2px 2px 4px rgb(34, 34, 34);
    font-family: var(--theme-font) !important;
    color: var(--secondary-color) !important;
    background-color: #000;
    background: url('/files/images/MALVADOZ.jpg') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    max-height: auto;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #28141A
}

::-webkit-scrollbar-thumb {
    background-color: #FFD068;
    background-size: 100% 300%;
    border-radius: 0px;
    -webkit-transition: .3s;
    transition: .3s
}

::-moz-selection {
    color: white;
    background: #FFD068
}

::selection {
    color: white;
    background: #FFD068
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    background-color: #fff;
    font-size: 16px
}

html * {
    font-family: "Segoe UI", -apple-system, system-ui, BlinkMacSystemFont, "Roboto", "Droid Sans", "Helvetica Neue", "Apple SD Gothic Neo", "Lucida Sans Unicode", "Lucida Grande", "Tahoma", "Arial", "Dotum", sans-serif;
    font-weight: 400;
    line-height: 1
}

hr {
    background: rgba(255, 255, 255, 0.3) !important;
}

.main-content {
    position: relative;
    margin-top: 350px;
    /* test spacing */
    z-index: 10;
}

.text-muted {
    color: #b3bac0 !important;
}

@font-face {
    font-family: Play With Fire;
    src: url("../font/Play-With-Fire.ttf");
}

@font-face {
    font-family: Play With Fire;
    src: url("../font/Play-With-Fire.ttf");
}

@font-face {
    font-family: Marcellus-Regular;
    src: url("../font/Marcellus-Regular.ttf");
}

@font-face {
    font-family: Oswald;
    src: url("../font/Oswald-VariableFont_wght.ttf");
}

/* COUNTDOWN */

.time-box {
    border: 1px solid white;
    width: 45px;
    height: 45px;
    margin-left: 15px;
    background-color: white;
    color: black;
}

.time-box {
    position: relative;
    margin-bottom: 0px;
}

.dw-time {
    /* margin: auto; */
    position: absolute;
    left: 10px;
    top: 4px;
}

.timer {
    margin: auto;
    position: relative;
}

.timer-type {
    font-size: 11px;
    position: absolute;
    bottom: 3px;
    left: 16px;
}

.time-text {
    margin-top: 20px;
    position: relative;
}

.card.news {
    color: white;
    background-color: rgba(1, 0, 0, 0.7);
    border: 1px solid rgba(62, 62, 62, 0.9);
    padding: 0px;
    min-height: 200px;
    max-height: 200px;
    background-image: url("../img/imageCap.jpg");
}

.dw-date {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
}

.card-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
}

.news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: rgba(1, 0, 0, 0.6);
    border: 1px solid rgba(62, 62, 62, 0.9);
    width: calc(33.333% - 10px);
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

/* Hover effect for news cards */
.news-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.news-card-header {
    border-bottom: 1px solid rgba(62, 62, 62, 0.9);
    padding: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    color: white;
}

.card-img-top {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(62, 62, 62, 0.9);
    display: block;
    margin: 0 auto;
}

.card-body {
    padding: 15px;
    color: white;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-text {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #ccc;
}

.btn-danger {
    background-color: #ff5a5a;
    border-color: #ff5a5a;
    color: white;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-danger:hover {
    background-color: #ff4040;
    transform: scale(1.05);
    color: white;
}

@media (max-width: 768px) {
    .news-card {
        width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .news-card {
        width: 100%;
    }
}

.card-mall {
    width: 98%;
    border: 1px solid rgba(62, 62, 62, 0.9);
    background-color: rgba(1, 0, 0, 0.5);
}

.card-mall-header {
    height: 30px;
    background-color: rgba(1, 0, 0, 0.9);
    color: white;
    border-bottom: 1px solid rgba(62, 62, 62, 0.9);
}

.card-mall-body {
    /*background-color: rgba(1, 0, 0, 0.5);*/
    border-top: none;
    padding: 10px;
}

.badge {
    position: relative;
}

.percentage {
    position: absolute;
    color: red;
    top: 10px;
    left: 21px;
    font-size: 15px;
}

.web-content {
    background-color: rgba(1, 0, 0, 0.5) !important;
    border: 1px solid rgba(62, 62, 62, 0.9);
    min-height: 700px;
}

.notification {
    z-index: 99999;
    position: absolute;
    right: 20px;
    bottom: 50px;
}

/* Floating Notification */
.floating-notification {
    position: fixed;
    bottom: 45px;
    right: -40px;
    width: auto;
    height: 300px;
    background-image: url('../images/abomy.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    z-index: 502;
    transition: transform 0.3s ease !important;
    animation: slideInFromRight 0.3s ease forwards;
}

@keyframes bounceIn {
    0% {
        transform: translateY(30px);
    }

    50% {
        transform: translateY(-20px);
    }

    70% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

/*.floating-notification:hover,
.side-promotion:hover {
    transform: translateY(-10px) scale(1.05) !important;
}
*/
.floating-notification .notification-content {
    padding: 30px;
    text-align: center;
}

.floating-notification .claim-btn {
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-top: 100px;
}

.floating-notification .claim-btn:hover {
    background-color: #45a049;
}

.reward-message {
    font-size: 16px;
    color: #d4d1d1;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
}

.bts-btn {
    position: fixed;
    /* top: -35px;
    left: 15%;*/
    top: 0%;
    right: 0%;
    background: #d67220b4;
    border: none;
    color: white;
    font-size: 13px;
    border-radius: 10%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    opacity: 1.2;
    z-index: inherit;
}

.btk-btn {
    position: absolute;
    top: 15%;
    right: 25%;
    background: #d67220b4;
    border: none;
    color: white;
    font-size: 13px;
    border-radius: 10%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    opacity: 1.2;
    z-index: inherit;
}

/* PROFILE */

.card-head.shop {
    background: linear-gradient(to bottom, rgba(4, 15, 23, 0.4), rgba(29, 50, 64, 0.5));
    border-bottom: 1px solid rgba(62, 62, 62, 0.9);
    text-align: center;
}

.card-shop-body {
    font-size: 20px;
}

.shop-navigation.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.shop-navigation a {
    color: white;
}

.shop-navigation.active a {
    color: #f6ad55;
}

.shop-navigation:hover {
    color: #f6ad55;
}

.card-head.shop2 {
    background: linear-gradient(to bottom, rgba(4, 15, 23, 0.4), rgba(29, 50, 64, 0.5));
    border-bottom: 1px solid rgba(62, 62, 62, 0.9);
    border-top: 1px solid rgba(62, 62, 62, 0.9);
    text-align: center;
}

.user-box {
    border: 1px solid rgba(62, 62, 62, 0.9) !important;
    margin: 5px;
    padding: 0px;
    min-height: 350px !important;
    position: relative;
}

.box-head {
    height: 30px;
    border-bottom: 1px solid rgba(62, 62, 62, 0.9) !important;
    background: linear-gradient(to bottom, rgba(4, 15, 23, 0.4), rgba(29, 50, 64, 0.9));
}

.dw-point {
    border: solid 1px rgba(62, 62, 62, 0.9);
    margin: 5px;
    position: absolute;
    bottom: 5px;
    width: 90%;
    height: 30px;
    left: 8px;
}

.table-head {
    background: linear-gradient(to bottom, rgba(4, 15, 23, 0.4), rgba(29, 50, 64, 0.9)) !important;
    color: white;
    border: 1px solid rgba(62, 62, 62, 0.9);
}

/* Table Styling */
table.information-table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

table.information-table th,
table.information-table td {
    padding: 12px;
    text-align: left;
    vertical-align: middle;
}

/* Table Header Styling */
table.information-table th {
    background-color: #343a40;
    color: white;
    font-weight: bold;
}

/* Table Row Styling */
table.information-table tr:nth-child(odd) {
    background-color: #e9ecef52;
}

table.information-table tr:nth-child(even) {
    background-color: #55565763;
}

/* Table Cell Styling */
table.information-table td {
    color: #6c757d;
    /* Default text color for table content */
    font-size: 14px;
}

/* Specific Styling for Table Data */
table.information-table .text-warning {
    color: #ffc107;
}

table.information-table .text-success {
    color: #a3e2b1;
}

table.information-table .text-muted {
    color: #6c757d;
}

table.information-table .acc-info-table {
    font-weight: bold;
    color: #6c757d;
    /* Muted text color for labels */
}

table.information-table a {
    color: #007bff;
    text-decoration: none;
}

table.information-table a:hover {
    text-decoration: underline;
}

/* Icon Styling */
table.information-table i {
    font-size: 16px;
    color: #6c757d;
    margin-right: 8px;
}


.streams-form {
    width: 80%;
}

.stream-url-name {
    max-width: 250px !important;
}

.inventory-tab {
    background-color: transparent !important;
}

.nav-tabs {
    border: 1px solid rgba(62, 62, 62, 0.9) !important;
}

.nav-link.inventory-tab {
    border: none;
}

.item-interface {
    background-color: black;
    border: 1px solid rgba(62, 62, 62, 0.9) !important;
}

.item-images {
    position: relative;
    width: 100%;
    height: 100%;
}

td.product-interface-image {
    padding: 0px;
}

.helmet-type {
    position: absolute;
    left: 20px;
    bottom: 30px;
}

.sword-type {
    position: absolute;
    left: 20px;
    bottom: 10px;
}

.armor-type {
    position: absolute;
    left: 15px;
    bottom: 10px;
}

.ring-type {
    position: absolute;
    left: 30px;
    bottom: 30px;
}

.question-mark:hover {
    color: grey;
}

/*------------------- 8.7. Pagination  -------------------*/
.pagination {
    display: flex;
    justify-content: flex-end;
}

.pagination ul {
    margin: 0;
    padding: 0;
}

.pagination li {
    display: inline-block;
    margin: 0 3px;
    list-style-type: none;
}

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

.pagination li:first-child {
    margin-left: 0;
}

.pagination .text {
    width: 48px;
    height: 48px;
    line-height: 48px;
    display: inline-block;
    background-color: #171920;
    color: var(--white-color);
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
}

.pagination a {
    display: inline-block;
    border: none;
    font-weight: 700;
    position: relative;
    z-index: 1;
    margin: 0 2px;
}

.pagination a:before {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    bottom: -2px;
    right: -2px;
    z-index: -1;
    background-image: var(--bs-gradient);
}

.pagination a.on .text,
.pagination a:hover .text {
    color: var(--white-color);
    background-color: transparent;
}

#pagination {
    text-align: center !important;
}

#pagination ul {
    margin: 0 !important;
    padding: 0 !important;
}

#pagination li {
    display: inline-block !important;
    margin: 0 3px !important;
    list-style-type: none !important;
}

#pagination li:last-child {
    margin-right: 0 !important;
}

#pagination li:first-child {
    margin-left: 0 !important;
}

#pagination .text {
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    display: inline-block !important;
    background-color: #171920 !important;
    color: var(--white-color) !important;
    -webkit-transition: all ease 0.4s !important;
    transition: all ease 0.4s !important;
}

#pagination a {
    display: inline-block !important;
    border: none !important;
    font-weight: 700 !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 2px !important;
}

#pagination a:before {
    content: '' !important;
    position: absolute !important;
    left: -2px !important;
    top: -2px !important;
    bottom: -2px !important;
    right: -2px !important;
    z-index: -1 !important;
    background-image: var(--bs-gradient) !important;
}

#pagination a.on .text,
#pagination a:hover .text {
    color: var(--white-color) !important;
    background-color: transparent !important;
}

/* Small devices */
@media (max-width: 768px) {
    #pagination .text {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 11px !important;
    }
}

.page-item .page-link {
    color: white;
    cursor: pointer;
}

.page-item.active .page-link {
    border: 1px solid red !important;
    background-color: red !important;
}

/* ITEM STAT */

table.table-bordered>tbody>tr>td {
    border: 1px solid rgba(62, 62, 62, 0.9) !important;
}

/* .mytooltip {
  border: 1px solid red;
} */

.tooltip>.tooltip-inner {
    /* background-color: #f00; */
    width: 700px;
    border: 1px solid grey;
}

.attribute {
    color: lime;
}

.classcode {
    color: #EAF329;
}

.itemname {
    color: turquoise;
}

.modal-content {
    color: white;
    background-color: rgba(1, 0, 0, 0.9) !important;
    /* border: 1px solid rgba(62, 62, 62, 0.9) !important; */
    border: 1px solid white;
    padding: 10px;
}

.buy.close {
    color: white;
}

.toast {
    border: 1px solid white;
}

.toast-header {
    /* background-color: rgba(1, 0, 0, 0.7) !important; */
    background-color: black;
    color: white !important;
}

/* CREDIT */

.credit-dlg {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 3px;
}

.profile-menu {
    padding: 10px;
}

.profile-navigation {
    text-decoration: none;
    color: #d3d0d0;
    /*font-size: 18px;*/
    transition: color 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.profile-navigation:hover {
    color: #ffcc00;
    /*background-color: rgba(1, 0, 0, 0.3);*/
    padding: 5px;
    border-radius: 5px;
}

.profile-navigation i {
    margin-right: 8px;
}

.profile-navigation:hover i {
    color: #ffcc00;
}

.profile-navigation.active.color-red {
    color: #ffcc00;
    /*background-color: #333;*/
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
}

.my-credit {
    background: linear-gradient(to bottom, rgba(4, 15, 23, 0.4), rgba(29, 50, 64, 0.9)) !important;
    border: 1px solid rgba(62, 62, 62, 0.9) !important;
}

.credit-dlg {
    font-weight: 500;
    width: 140px;
    text-align: left;
}


/* .current-credit
{
  max-width: 150px;
  text-align: left;
} */

.carousel {
    width: 250px;
    height: 250px;
}

.item-helm-type {
    position: absolute;
    top: 30px;
    left: 43px;
}

#item-detail {
    background-color: black !important;
}

.item-armor-type {
    position: absolute;
    top: 9px;
    left: 30px;
}

.item-arm-type {
    max-height: 80px;
    position: absolute;
    top: 10px;
    left: 40px;
}

/* RADIO BUTTON */

[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */

[type=radio]+img {
    cursor: pointer;
}

/* CHECKED STYLES */

[type=radio]:checked+img {
    outline: 2px solid #f00;
}

.btn1 {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: green;
    cursor: pointer;
    color: white;
    margin: 3px;
}


button {
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
}

[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */

[type=radio]+.btn1 {
    cursor: pointer;
}

/* CHECKED STYLES */

[type=radio]:checked+.btn1 {
    outline: 2px solid #f00;
}

/* Step progress bar */

div#stepprogress ul {
    text-align: center;
}

div#stepprogress ul li {
    display: inline-block;
    width: 20%;
    position: relative;
}

.progress .fas,
.progress .fad,
.progress .far {
    font-size: 35px;
}

.iconx {
    font-size: 40px;
    margin-bottom: 10px;
}

.step {
    font-size: 15px;
    background-color: #ccc;
    color: white;
    border-radius: 50%;
    padding: 5px;
}

div#stepprogress ul li .step::after {
    content: '';
    background: #ccc;
    /* background: red; */
    height: 5px;
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 65px;
    z-index: -1;
}

div#stepprogress ul li:first-child .step::after {
    width: 49%;
    left: 51%;
}

div#stepprogress ul li:last-child .step::after {
    width: 50%;
}

div#stepprogress ul li .active {
    /* background-color: #f6ad55 */
    background-color: #dc3545;
}

div#stepprogress ul li .active::after {
    /* background-color: #f6ad55; */
    background-color: #dc3545;
}

div#stepprogress ul li:nth-child(1) .step .active {
    background-color: green;
}

div#stepprogress ul li:nth-child(1) .active .step::after {
    background-color: green;
}

#stepprogress li {
    position: absolute;
    z-index: 1;
}

.forms {
    margin: auto;
    max-width: 300px;
    width: 50%;
    min-height: 400px;
}

/* ranking */
.ranking {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.row-ranking {
    display: flex;
}

.row-ranking:not(:last-child) {
    margin-bottom: 10px;
}

.row-ranking.header {
    background-color: #000;
    font-weight: bold;
}

.cell-ranking a {
    color: #fff !important;
}

.cell-ranking a:hover {
    color: #ba6356 !important;
}

.cell-ranking {
    flex: 1;
    padding: 15px;
}

.cell-ranking:nth-child(1) {
    color: #ffffff;
    flex: 0 0 50px;
    background: linear-gradient(135deg, #3f3e3e 85%, #0f11168f 50%);
    font-weight: 700;
}

.cell-ranking:nth-child(2) {
    color: #ffffff;
    background-color: #0f11168f;
    font-size: 16px;
    font-weight: 700;
    flex: 1.4;
}

.cell-ranking:nth-child(3) {
    color: #ffffff;
    background-color: #0f11168f;
    text-align: left;
}

.cell-ranking:nth-child(4) {
    color: #ffffff;
    background-color: #0f11168f;
    text-align: left;
}

.cell-ranking:nth-child(5) {
    color: #ffffff;
    background-color: #0f11168f;
    text-align: center !important;
}

.cell-ranking:nth-child(6) {
    color: #ffffff;
    background-color: #0f11168f;
    text-align: center !important;
}

.cell-ranking:nth-child(7) {
    color: #ffffff;
    background-color: #0f11168f;
    text-align: right !important;
}

.cell-ranking:nth-child(8) {
    color: #ffffff;
    background-color: #0f11168f;
    text-align: right !important;
}

.cell-ranking span {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 7px 15px 6px 15px;
    font-size: 14px;
    border-radius: 15px;
    color: var(--white-color);
    text-align: left !important;
}

.cell-ranking img.rank {
    -webkit-transform: skew(-10deg) !important;
    -ms-transform: skew(-10deg) !important;
    transform: skew(-10deg) !important;
    margin-top: 14px !important;
}

.row-ranking:nth-child(odd) 
.cell-ranking:nth-child(1) {
    background: linear-gradient(135deg, rgba(102, 101, 101, 0.7) 85%, #0f11168f 50%);
}

.row-ranking:hover {
    filter: brightness(120%);
}

@media (max-width: 768px) {
    .row-ranking {
        flex-direction: column;
        text-align: left;
    }

    .cell-ranking {
        flex: 1;
        padding: 10px 15px;
        font-size: 13px;
        text-align: left;
    }

    .row-ranking.header {
        font-size: 16px;
        text-align: left;
        padding-left: 15px;
    }

    .cell-ranking:nth-child(1) {
        font-size: 14px;
        background: linear-gradient(135deg, #3f3e3e 85%, #0f11168f 50%);
        text-align: left;
    }

    .cell-ranking:nth-child(2) {
        font-size: 14px;
        text-align: left;
    }

    .cell-ranking:nth-child(3),
    .cell-ranking:nth-child(4),
    .cell-ranking:nth-child(5),
    .cell-ranking:nth-child(6),
    .cell-ranking:nth-child(7),
    .cell-ranking:nth-child(8) {
        font-size: 12px;
        padding-right: 10px;
        text-align: left !important;
    }

    .cell-ranking span {
        font-size: 12px;
    }

    .cell-ranking img.rank {
        margin-top: 10px;
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .cell-ranking {
        padding: 8px 12px;
        font-size: 12px;
    }

    .row-ranking.header {
        font-size: 14px;
    }

    .row-ranking {
        padding: 10px;
    }

    .cell-ranking:nth-child(1) {
        font-size: 12px;
    }

    .cell-ranking img.rank {
        margin-top: 5px;
    }
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-xs {
    font-size: 14px !important;
}

.fs-20-ls,
.fs-20 {
    font-size: 20px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-20-ls {
    letter-spacing: -0.03em;
}

/* Large devices */
@media (max-width: 1199px) {

    .fs-20-ls,
    .fs-20 {
        font-size: 18px !important;
    }

    .fs-18 {
        font-size: 16px !important;
    }
}

.fs-20 {
    font-size: 20px !important;
}

.fs-24 {
    font-size: 24px !important;
}

/* General styling for the nav-tabs */
.ranking-nav-tabs {
    display: flex;
    justify-content: center;
    background: #1d1f27;
    border-bottom: 2px solid #2c2f3a;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin: 20px 0;
    padding: 10px 0;
}

.ranking-nav-item {
    margin: 0 10px;
}

.ranking-nav-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #ccc;
    text-transform: uppercase;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    position: relative;
    letter-spacing: 1px;
}

.ranking-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.6);
}

.ranking-nav-link.active {
    color: #fff;
    font-weight: 600;
}

.ranking-rank-tabs-overall.active {
    background: rgba(255, 255, 255, 0.1);
}

.ranking-rank-tabs-human.active {
    background: rgba(255, 255, 255, 0.1);
}

.ranking-rank-tabs-akkan.active {
    background: rgba(255, 255, 255, 0.1);
}

.ranking-rank-tabs-medal.active {
    background: rgba(255, 255, 255, 0.1);
}

.ranking-rank-tabs-guild.active {
    background: rgba(255, 255, 255, 0.1);
}

.ranking-nav-link i {
    margin-right: 8px;
    font-size: 18px;
    transition: all 0.3s ease;
}

.ranking-nav-link:hover i {
    transform: rotate(10deg);
    color: #fff;
}

@media (max-width: 768px) {
    .ranking-nav-tabs {
        flex-direction: column;
    }

    .ranking-nav-link {
        font-size: 14px;
        padding: 12px 25px;
    }
}

.dw-ranking {
    background-color: rgba(1, 0, 0, 0.5);
    position: relative;
}

.rank-data {
    position: relative;
}

.char-name {
    position: absolute;
    top: 9px;
}

.char-race {
    position: absolute;
    top: 9px;
}

.char-mileage {
    position: absolute;
    top: 9px;
}

.char-class {
    position: absolute;
    top: 9px;
}

.char-level {
    position: absolute;
    top: 9px;
}

.char-fame {
    position: absolute;
    top: 9px;
}

.char-owner {
    position: absolute;
    top: 9px;
}

.guild-name {
    position: absolute;
    top: 9px;
}

.guild-nation {
    position: absolute;
    top: 9px;
}

.guild-level {
    position: absolute;
    top: 9px;
}

.guild-fame {
    position: absolute;
    top: 9px;
}

.limited-product {
    position: absolute;
    z-index: 100;
    top: 0px;
    right: 0px;
}

.sold-out {
    position: absolute;
    z-index: 100;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.information-table tr:nth-child(even) {
    background-color: rgba(1, 0, 0, 0.5);
}

.add-form {
    max-width: 400px;
}

/*------------------- 5.3. Form -------------------*/
.form-control {
    border-radius: 0;
    padding: 0 15px;
    padding-right: 60px;
    border: 1px solid transparent;
    color: var(--body-color);
    background-color: var(--white-color);
}

.form-control:focus {
    outline: 0;
    box-shadow: none;
    border-color: transparent;
    background-color: var(--white-color);
}

.form-control::-moz-placeholder {
    color: var(--body-color);
    text-transform: capitalize;
}

.form-control::-webkit-input-placeholder {
    color: var(--body-color);
    text-transform: capitalize;
}

.form-control:-ms-input-placeholder {
    color: var(--body-color);
    text-transform: capitalize;
}

.form-control::-ms-input-placeholder {
    color: var(--body-color);
    text-transform: capitalize;
}

.form-control::placeholder {
    color: var(--body-color);
    text-transform: capitalize;
}

input.form-control {
    height: 60px;
}

input.form-control::-webkit-outer-spin-button,
input.form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea.form-control {
    min-height: auto;
    padding-top: 17px;
    padding-bottom: 17px;
}

input[type="checkbox"] {
    visibility: hidden;
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    display: none;
}

input[type="checkbox"]:checked~label:before {
    content: "\f00c";
    color: rgba(var(--theme-color), 1);
    border-color: rgba(var(--theme-color), 1);
}

input[type="checkbox"]~label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: block;
}

input[type="checkbox"]~label:before {
    content: '';
    font-family: var(--icon-font);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 2px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
}

.checkbox-custom {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.checkbox-custom input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
}

.checkbox-custom .checkmark {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 2px solid #a13e2f;
    border-radius: 2px;
    position: relative;
    margin-right: 8px;
    /* Spacing between checkbox and label */
    transition: background-color 0.3s, border-color 0.3s;
}

.checkbox-custom input[type="checkbox"]:checked+.checkmark {
    background-color: #a13e2f;
    border-color: #a13e2f;
}

.checkbox-custom input[type="checkbox"]:checked+.checkmark:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-custom input:checked+.checkmark {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.checkbox-custom .checkmark:after {
    content: '';
    position: absolute;
    left: 10px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

input[type="radio"] {
    visibility: hidden;
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    display: none;
}

input[type="radio"]~label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0;
}

input[type="radio"]~label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100%;
    background: transparent;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

input[type="radio"]~label:after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

input[type="radio"]:checked~label::before {
    border-color: rgba(var(--theme-color), 1);
}

input[type="radio"]:checked~label:after {
    opacity: 1;
    background-color: rgba(var(--theme-color), 1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 10px;
}

.payment-option:last-child {
    border-bottom: none;
}

.payment-info {
    display: none;
    padding: 10px;
    margin: -1px 0;
    font-size: 14px;
}

.payment-option input[type="radio"] {
    margin-right: 10px;
}

.payment-option label {
    flex-grow: 1;
    margin: 0;
}

/*------------------- end -------------------*/

.select-box {
    font-weight: 700;
}

.select-box:after {
    content: '\f107';
    border: none;
    font-family: var(--icon-font);
    vertical-align: -0.5px;
}

.form-select-lg {
    padding: 13px 30px;
    font-size: 16px;
    border-radius: 0;
    color: var(--body-color);
    border-color: #f0f0f0;
    background-position: right 20px center;
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    font-size: 14px;
    -webkit-text-fill-color: var(--mist-blue-color) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--theme-color) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-select-lg option {
    cursor: pointer;
}

.form-select-lg:focus {
    border-color: #f0f0f0;
    outline: none;
    box-shadow: none;
}

/*------------------- 8.4. Breadcumb  -------------------*/
.breadcumb-menu-style1 {
    max-width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.breadcumb-menu-style1 li {
    display: inline-block;
    margin: 0 6px;
    list-style: none;
}

.breadcumb-menu-style1 li:first-child {
    margin-left: 0;
}

.breadcumb-menu-style1 li:last-child {
    margin-right: 0;
}

.breadcumb-menu-style1 li:last-child:after {
    display: none;
}

.breadcumb-menu-style1 li:after {
    content: '/';
    position: relative;
    right: -7px;
    float: right;
}

.breadcumb-menu-style1 li,
.breadcumb-menu-style1 a,
.breadcumb-menu-style1 span {
    white-space: normal;
    word-break: break-all;
}

.breadcumb-menu-style1 li i,
.breadcumb-menu-style1 a i,
.breadcumb-menu-style1 span i {
    margin-right: 5px;
}

.breadcumb-menu-style1[class*=text-] a {
    color: inherit;
}

.breadcumb-layout1::before {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 100%);
}

.breadcumb-bg-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0.7;
    text-align: center;
    margin: 0;
    z-index: -1;
    font-size: 12.5rem;
    letter-spacing: -0.047em;
    font-style: italic;
    background-color: transparent;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
    opacity: 1;
}

/* Large devices */
@media (max-width: 1199px) {
    .breadcumb-wrapper.pt-200 {
        padding-top: 185px;
    }

    .breadcumb-bg-title {
        font-size: 7.5rem;
    }
}

/* Medium devices */
@media (max-width: 992px) {
    .breadcumb-wrapper.pt-200 {
        padding-top: 155px;
    }

    .breadcumb-bg-title {
        font-size: 5.5rem;
    }
}

/* Small devices */
@media (max-width: 768px) {
    .breadcumb-wrapper.pt-200 {
        padding-top: 115px;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .breadcumb-wrapper.pt-200 {
        padding-top: 108px;
    }

    .breadcumb-bg-title {
        font-size: 3.5rem;
    }

    .breadcumb-title.h1 {
        font-size: 24px;
    }
}

/* Style for each video box */
.video-box1 {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    z-index: 10;
}

/* Hover effect */
.video-box1:hover {
    transform: scale(1.05);
}

.video1-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 23px;
}

.video1-box {
    position: relative;
    display: inline-block;
}

.thumbnail-container {
    position: relative;
}

.video1-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
}

.center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.video1-box p {
    margin: 5px 0;
    color: var(--smoke-color);
}

@media (max-width: 768px) {
    .video1-container {
        grid-template-columns: 1fr;
    }
}

.video1-box .btn-play {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}

#fade-video {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/*************************/
.video-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Two videos per row */
    gap: 23px;
    margin: 14px;
}

.video-box {
    position: relative;
    display: inline-block;
}

.video-box iframe {
    display: block;
    margin: 0 auto;
}

.thumbnail-container {
    position: relative;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
}

.video-box p {
    margin: 5px 0;
    color: var(--smoke-color);
}

@media (max-width: 768px) {
    .video-container {
        grid-template-columns: 1fr;
    }
}

.video-box .btn-play {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}

.modal_video {
    max-width: 50% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.modal_div {
    width: 100%;
    min-height: 400px;
    max-width: 480px;
    background: url(../images/game-races-bg.jpg) center bottom no-repeat;
    background-color: rgba(0, 0, 0, 0.95);
    position: fixed;
    top: 15%;
    left: 50%;
    margin-left: -240px;
    display: none;
    opacity: 0;
    z-index: 35;
    padding: 50px 60px;
    box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.5)
}

.modal_div .modal_close {
    width: 56px;
    height: 56px;
    position: absolute;
    top: -28px;
    right: -28px;
    cursor: pointer;
    display: block;
    background: url(../images/close-icon.png) no-repeat;
    transition: 0.3s;
    filter: drop-shadow(0px 10px 14px rgba(0, 0, 0, 0.6))
}

.modal_div .modal_close:hover {
    filter: brightness(120%)
}

#overlay {
    z-index: 30;
    position: fixed;
    background-color: #070a11;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none
}

.modalTitle {
    color: #cc7954;
    font-size: 24px;
    font-family: "Philosopher", sans-serif;
    display: block;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    margin-bottom: 30px
}

.floating-video {
    display: none;
    position: fixed;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 675px;
    height: 455px;
    overflow: hidden;
    cursor: move;
    /* Add a move cursor */
    background-image: url('../images/town-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    border: 5px solid #1d1c1c73;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 300 !important;
}

.floating-video #floating-video-content {
    position: relative;
    width: 660;
    height: 415px;
}

.floating-video #floating-video-content iframe {
    position: absolute;
    top: 0px;
    right: -10px;
    width: 660px;
    height: 415px;
    border: none;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .floating-video {
        width: 420px;
        height: 280px;
        bottom: 150px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .floating-video {
        width: 320px;
        height: 258px;
        bottom: 150px;
        right: 5px;
    }
}

.close-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #d67220b4;
    border: none;
    color: white;
    font-size: 10px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    opacity: 1.2;
}

.video-box .btn-play {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}

.color-orange {
    color: #FFA500 !important;
    /* Orange color */
    text-decoration: none !important;
    transition: text-shadow 0.3s ease-in-out;
}

.color-orange:hover {
    text-decoration: none !important;
    text-shadow: 0 0 10px #FFA500, 0 0 20px #FFA500, 0 0 30px #FFA500;
}

.color-red {
    color: #FF0000 !important;
    /* Red color */
    text-decoration: none !important;
    transition: text-shadow 0.3s ease-in-out;
}

.color-red:hover {
    text-decoration: none !important;
    text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000;
}

.color-purple {
    color: #8A7DFA !important;
    text-decoration: none !important;
    transition: text-shadow 0.3s ease-in-out;
}

.color-purple:hover {
    text-decoration: none !important;
    text-shadow: 0 0 10px #8A7DFA, 0 0 20px #8A7DFA, 0 0 30px #8A7DFA;
}

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/* Avatar gallery container */
.avatar-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    justify-items: center;
}

.avatar-gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

@media (max-width: 1200px) {
    .avatar-gallery {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 992px) {
    .avatar-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .avatar-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .avatar-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Product List Container */
.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
    justify-items: left;
}

/* Product Card */
.my-product {
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 150%;
    max-width: 320px;
}

.my-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.product-images {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-bottom: 2px solid #444;
}

/* Price Button */
.buy-btn {
    display: inline-block;
    padding: 12px 20px;
    margin: 15px;
    background-color: #ff4c00;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    width: 99%;
    position: absolute;
    left: 3px;
    bottom: 0px;
}

.buy-btn:hover {
    background-color: #ff1a00;
    transform: translateY(-3px);
}

.product-list-empty {
    color: #ff4c00;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
}

/* Badge Styling */
.my-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff9800;
    /* Orange badge */
    color: #b34410;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

.custom-toast .toastify__close {
    position: absolute;
    right: 10px !important;
    top: 50%;
    transform: translateY(-50%);
}

/* Product List Container */
.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
    justify-items: left;
}

/* Product Card */
.my-product {
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 150%;
    max-width: 320px;
    position: relative;
    border: 1px solid rgba(62, 62, 62, 0.9);
    background-color: hsla(0, 0%, 11%, 0.329);
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
}

/* Hover effect on product card */
.my-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

/* Product Image */
.product-images {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-bottom: 2px solid #444;
}

/* Price Button */
.buy-btn {
    display: inline-block;
    padding: 12px 20px;
    margin: 15px;
    background-color: #ff4c00;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    width: 99%;
    position: absolute;
    left: 3px;
    bottom: 0px;
}

.buy-btn:hover {
    background-color: #ff1a00;
    transform: translateY(-3px);
}

/* Empty state */
.product-list-empty {
    color: #ff4c00;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
}

/* Badge Styling */
.my-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff9800; /* Orange badge */
    color: #b34410;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

/* Toast close button */
.custom-toast .toastify__close {
    position: absolute;
    right: 10px !important;
    top: 50%;
    transform: translateY(-50%);
}

/* Product Name Styling */
.product-name {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    text-align: left;
    padding: 20px;
    font-size: 14px;
    display: none;
}

/* Show product name on hover */
.my-product:hover .product-name {
    display: block;
}

.menu-img {
    width: 150px;
    height: 50px;
    margin-right: -50px;
    display: inline-block;
}

.sidebar {
    display: inline-block;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.3s;
    padding-top: 20px;
    z-index: 1000;
    padding-left: 20%;
    padding-right: 20%;
    font-size: calc(1rem + 0.5vw);
    white-space: nowrap;
    cursor: pointer;
}

.menu-container {
    width: 1200px;
    padding-left: 25px;
    padding-bottom: 23px;
    margin: auto auto;
    position: relative;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-item {
    margin: 0 10px;
}

.sidebar-item {
    flex-shrink: 0;
    margin: 0 10px;
}


.sidebar .nav-link {
    margin-right: 10px;
}

.sidebar.scrolled {
    background-color: rgba(1, 0, 0, 0.7);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.sidebar a {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;
    color: var(--smoke-color);
    display: inline-block;
    transition: 0.3s;
    margin-right: 30px;
}

.sidebar a:hover {
    color: var(--default-color2);
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidebar.active {
    height: 90px;
    /* spacing test */
}

#menu-icon {
    font-size: 25px;
    cursor: pointer;
    z-index: 9999;
}

.sidebar.active+#menu-icon {
    display: none;
}

.sidebar a {
    margin-right: 30px;
}

body.sidebar-open {
    margin-top: 0px;
    /* test 120px*/
    transition: margin-top 0.3s;
}

.mobile-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background-color: rgba(1, 0, 0, 0.7);
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
    z-index: 9999;
}

#mobile-sidebar.active {
    transform: translateX(0);
}

#mobile-sidebar .nav-item {
    padding: 12px 20px;
    margin-top: 10px;
    color: white;
    text-decoration: none;
    display: block;
}

#mobile-sidebar .nav-item:hover {
    background-color: #444;
}

#mobile-sidebar .nav-item:first-child {
    margin-top: 100px;
}

.mobile-sidebar a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.mobile-sidebar a:hover {
    background-color: rgba(1, 0, 0, 0.7);
}

@media screen and (max-width: 768px) {
    .mobile-sidebar {
        display: block;
        left: -70%;
    }

    .mobile-sidebar.active {
        left: 0;
    }

    #menu-icon {
        display: block;
        font-size: 30px;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 10000;
        cursor: pointer;
    }
}

@media screen and (min-width: 769px) {
    .mobile-sidebar {
        display: none;
    }

    #menu-icon {
        display: none;
    }
}

@media (max-width: 768px) {
    body.sidebar-open {
        margin-top: 120px;
    }

    #mobile-sidebar {
        top: 0;
    }
}

hr.thunder {
    width: 100%;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    animation-name: thunder;
    animation-duration: var(--thunder-duration, 0.5s);
    animation-timing-function: linear;
    animation-delay: var(--thunder-delay, 0s);
    animation-iteration-count: infinite;
    z-index: 100;
}

hr:not(.thunder) {
    width: 2px;
    height: 50px;
    background-color: #aaf;
    position: absolute;
    bottom: 100%;
    transform-origin: top left;
    animation-name: rain;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 101;
    opacity: 0.7;
}

@keyframes rain {
    from {
        transform: translate(-20px, -100%) rotate(-10deg);
    }

    to {
        transform: translate(calc(50px + 20vw), calc(100vh + 20px)) rotate(-10deg);
    }
}

@keyframes thunder {

    0%,
    8% {
        background-color: transparent;
    }

    2%,
    4%,
    6% {
        background-color: transparent;
    }
}

@media (max-width: 768px) {
    hr.thunder {
        display: none;
    }

    hr:not(.thunder) {
        display: none;
    }
}

@media (max-width: 480px) {
    hr.thunder {
        display: none;
    }

    hr:not(.thunder) {
        display: none;
    }
}

html {
    scroll-behavior: smooth;
}

header {
    max-width: 100%;
    max-height: auto;
    height: 100vh;
    color: black;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(148, 148, 147, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1% 0 0 0;
    position: relative;
    scroll-snap-align: start;
    z-index: 0;
}


#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.8;
}

.logo {
    position: absolute;
    height: 190px;
    width: 550px;
    bottom: 530px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
}

@media (max-width: 768px) {
    .logo {
        bottom: 250px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.bright:hover {
    filter: brightness(120%)
}

.image-container img {
    transition: filter 0.3s ease-in-out;
}

.content-container {
    display: flex;
    align-items: left;
    max-width: 100%;
    margin-bottom: 100px;
    z-index: 10;
    justify-content: flex-start;
}

.game-image {
    width: auto;
    height: auto;
    position: relative;
    z-index: 0;
    margin-top: 0px;
}

.container {
    position: relative;
    z-index: 10;
}

.image-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    z-index: 1;
}

.first-image {
    position: fixed;
    left: 0px;
    margin-left: 150px;
    bottom: 0px;
}

.second-image {
    position: fixed;
    left: 0px;
    margin-left: -100px;
    bottom: 0px;
}

.third-image {
    position: fixed;
    right: 0px;
    margin-right: -100px;
    bottom: 0px;
}

.fourth-image {
    position: fixed;
    right: 0;
    margin-right: 150px;
    bottom: 0px;
}

.fifth-image {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-shadow: 2px 2px 4px rgb(241, 237, 237);
    filter: brightness(1.0);
}

@media (max-width: 768px) {
    .fifth-image {
        bottom: 250px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
    }
}

.text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

header h3 {
    font-family: var(--theme-font);
    color: #222222;
    margin-top: 0px;
    font-size: 4.5em;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.lead {
    font-size: 1.5em;
    letter-spacing: 2px;
    font-weight: bold;
    position: fixed;
    text-shadow: 2px 2px 4px rgb(241, 237, 237);
    color: #222222;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    filter: brightness(0.8);
}

@media (max-width: 480px) {
    .lead {
        font-size: 0.9em;
    }
}

.thumbnail-container {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.thumbnail-container:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    margin-bottom: 15px;
}

.alert-success {
    padding: 20px;
    background-color: #04AA6D;
    color: white;
    margin-bottom: 15px;
}

.alert-warning {
    padding: 20px;
    background-color: #ff9800;
    color: white;
    margin-bottom: 15px;
}

.closebtn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    cursor: pointer;
}

/* Footer Styles */
.footer {
    position: relative;
    background-color: rgba(1, 0, 0, 0.7);
    padding: 10px 20px;
    text-align: center;
    z-index: 2;
}

.footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.footer .bloq {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}

.footer .bloq-3 {
    flex: 1;
    min-width: 200px;
    margin: 10px;
}

.footer .title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #db170d;
}

.footer p {
    margin-bottom: 10px;
}

.footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer .social-icon {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer .social {
    color: #f5f5f5;
    font-size: 18px;
    transition: color 0.3s;
}

.footer .social:hover {
    color: var(--default-color2);
}

.acount-icon a {
    display: block;
    margin-bottom: 10px;
    color: #f5f5f5;
    text-decoration: none;
    transition: color 0.3s ease;
}

.acount-icon a:hover {
    color: var(--default-color2);
}

.down-footer {
    position: relative;
    background-color: rgba(1, 0, 0, 0.7);
    color: var(--default-color2);
    padding: 10px 20px;
    text-align: center;
    z-index: 2;
}

.down-footer .foot-block {
    font-size: 14px;
}

.texto-centro {
    font-size: 14px;
    color: #f5f5f5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer .container {
        flex-direction: column;
        align-items: center;
    }

    .footer .bloq-3 {
        text-align: center;
    }

    .footer .social-icon {
        justify-content: center;
    }
}

th {
    text-align: center;
    padding: 8px;
}

th {
    background-color: #222222;
    color: silver;
}

.highlight {
    background-color: rgba(1, 0, 0, 0.3);
    color: #ffff99;
}

.section-title {
    font-size: 18px;
    margin-top: 30px;
    text-align: left;
}

.driver-links {
    text-align: center;
}

.driver-links img {
    margin: 5px;
    border: none;
}

.status-online {
    color: green;
}

.status-offline {
    color: red;
}

#lastWinners {
    margin-top: 20px;
    padding: 10px;
    background-color: rgba(1, 0, 0, 0.7);
    border-radius: 5px;
}

#lastWinners div {
    margin-bottom: 5px;
}

#lastWinnerspin {
    margin-top: 20px;
    padding: 10px;
    background-color: rgba(1, 0, 0, 0.7);
    border-radius: 5px;
}

#lastWinnerspin div {
    margin-bottom: 5px;
}

#box {
    margin: 0 auto;
    background-image: url('../../event/img/box-closed.png');
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    #box {
        width: 250px;
        height: 250px;
    }
}

@media (min-width: 769px) {
    #box {
        width: 350px;
        height: 350px;
    }
}

#creditsBox {
    position: absolute;
    color: white;
    padding: 140px;
    white-space: nowrap;
    animation: moveCredits 15s linear infinite;
    z-index: 1
}

.creditItem {
    position: absolute;
    color: white;
    padding: 10px;
    white-space: nowrap;
    animation: moveCredits 15s linear infinite;
    z-index: 1
}

@keyframes moveCredits {
    0% {
        transform: translateX(100%) translateY(0);
    }

    100% {
        transform: translateX(-10%) translateY(0);
    }
}

.opened {
    background-image: url('../../event/img/box-opened.png') !important;
}

#box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vibrate {
    animation: vibrate 0.5s ease infinite;
}

@keyframes vibrate {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Default styles */
#wheelCanvasContainer {
    position: relative;
    width: 650px;
    height: 650px;
    margin: 30px auto;
    border-radius: 50%;
    overflow: hidden;
    background-image: url('../../event/img/background.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Styles for mobile devices */
@media (max-width: 768px) {
    #wheelCanvasContainer {
        width: 350px;
        height: 350px;
        margin: 15px auto;
    }
}

#result {
    font-size: 24px;
    font-weight: bold;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 3s linear infinite;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none
}

.board-section {
    margin-top: 40px
}

.board__table {
    width: 100%;
    text-align: center;
    font-style: italic;
    font-size: 20px
}

.board__table th {
    padding: 20px 0;
    text-align: center;
    font-weight: bold;

    background-color: rgba(1, 0, 0, 0.589);
    border: 1px solid rgba(62, 62, 62, 0.9);
}

.board__table td {
    padding: 20px 0;
    background-color: rgba(1, 0, 0, 0.4);
    border: 1px solid rgba(62, 62, 62, 0.9);
}

.board__table em {
    color: #d76440;
    font-style: inherit;
    font-weight: inherit
}

.fan-sites .board-info {
    background-color: #515151
}

.fan-sites .board__select .select-items {
    min-width: 220px;
    background-image: url(../images/ico_arrow_fan.png);
    background-color: #414141
}

@media (max-width: 768px) {
    .board-section {
        margin-top: 20px;
    }

    .board__table {
        font-size: 16px;
        text-align: left;
    }

    .board__table th,
    .board__table td {
        padding: 10px;
        font-size: 14px;
        word-wrap: break-word;
    }

    .board__table th {
        text-align: left;
    }

    .board__table em {
        font-size: 14px;
    }

    .fan-sites .board-info {
        padding: 10px;
    }

    .fan-sites .board__select .select-items {
        min-width: 180px;
        background-size: 16px;
    }
}

.download .btn-download {
    position: absolute;
    top: 50px;
    right: 60px;
    display: inline-block;
    padding: 15px 22px;
    background-color: #333;
    color: #d76440;
    min-width: 360px;
    text-align: left;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.download .btn-download:hover {
    color: #d76647;
}

.download .btn-download:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    margin-right: 30px;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22rgb%280%2C0%2C0%29%22%20style%3D%22%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3Argba%280%2C0%2C0%2C0.3%29%3B%7D.b%7Bfill%3A%23d76440%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%28-1938%20-730%29%22%3E%3Ccircle%20class%3D%22a%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2225%22%20transform%3D%22translate%281938%20730%29%22%2F%3E%3Crect%20class%3D%22b%22%20width%3D%223.2%22%20height%3D%2219.2%22%20rx%3D%221.6%22%20transform%3D%22translate%281961.37%20742.1%29%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M1475.546%2C770.277h0a1.6%2C1.6%2C0%2C0%2C1%2C2.263%2C0l6.982%2C6.982a1.6%2C1.6%2C0%2C0%2C1%2C0%2C2.263h0a1.6%2C1.6%2C0%2C0%2C1-2.263%2C0l-6.982-6.982A1.6%2C1.6%2C0%2C0%2C1%2C1475.546%2C770.277Z%22%20transform%3D%22translate%28478%20-20%29%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M1494.106%2C770.563h0a1.635%2C1.635%2C0%2C0%2C0-2.313%2C0l-7.137%2C7.137a1.635%2C1.635%2C0%2C0%2C0%2C0%2C2.313h0a1.635%2C1.635%2C0%2C0%2C0%2C2.313%2C0l7.137-7.137A1.635%2C1.635%2C0%2C0%2C0%2C1494.106%2C770.563Z%22%20transform%3D%22translate%28478%20-20%29%22%2F%3E%3Crect%20class%3D%22b%22%20width%3D%2219.2%22%20height%3D%223.2%22%20rx%3D%221.6%22%20transform%3D%22translate%281953.37%20763.7%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
}

.download .btn-download .text {
    display: inline-block;
    text-align: center;
    min-width: 230px;
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
}

@media screen and (max-width: 768px) {
    .download .btn-download {
        position: relative;
        top: 10px;
        right: 25px;
        padding: 10px 15px;
        min-width: 280px;
        font-size: 16px;
        text-align: center;
    }

    .download .btn-download:before {
        width: 40px;
        height: 40px;
        margin-right: 25px;
        background-repeat: no-repeat;
        background-size: 40px 40px;
    }

    .download .btn-download .text {
        min-width: 180px;
        font-size: 14px;
    }
}

.download-driver__list {
    padding: 30px;
    background-color: rgba(1, 0, 0, 0.4);
    border: 1px solid rgba(62, 62, 62, 0.9);
    text-align: center
}

.download-driver__item {
    display: inline-block;
    vertical-align: middle;
    width: 320px;
    height: 100px;
    margin: 10px;
    background-color: #333;
    color: #fff
}

.download-driver__link {
    display: block;
    text-align: left;
    font-style: italic
}

.download-driver__thumb {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    margin: 20px;
    background-color: #fff
}

.download-driver__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.download-driver__title {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #fff
}

.download-driver__text {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    color: #999;
    text-decoration: underline
}

@media (max-width: 768px) {
    .download-driver__list {
        padding: 20px;
        text-align: center;
    }

    .download-driver__item {
        display: block;
        width: 100%;
        height: auto;
        margin: 10px 0;
    }

    .download-driver__thumb {
        width: 50px;
        height: 50px;
        margin: 10px auto;
    }

    .download-driver__title {
        display: block;
        font-size: 18px;
        text-align: center;
    }

    .download-driver__text {
        font-size: 14px;
        margin-top: 3px;
        text-align: center;
    }

    .download-driver__link {
        font-size: 14px;
        text-align: center;
    }
}

.board-guide {
    position: relative;
    margin-top: 40px;
    padding: 40px;
    background-color: rgba(1, 0, 0, 0.4);
    border: 1px solid rgba(62, 62, 62, 0.9);
    font-style: italic
}

.board-guide__title {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 15px
}

.board-guide__details {
    line-height: 1.5
}

.board-guide__details em {
    font-style: inherit;
    color: #d76440
}

.board-title {
    font-size: 46px;
    text-transform: capitalize
}

.board-title__sub {
    font-style: italic;
    font-weight: bold;
    font-size: 30px;
    padding-bottom: 15px
}

.board-title__sub:before {
    content: '';
    border-style: solid;
    border-color: #ffffff71;
    border-width: 0 2px 2px 0;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    margin: -6px 8px 0 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.wz-container {
    min-width: 1280px;
    width: 100%;
    height: 35px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999 !important;
    background-color: #171717;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    transition: height .3s;
}

.container-007 {
    position: relative;
    width: 100%;
    z-index: 9999 !important;
}

.text-login {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    position: absolute;
    right: 420px;
    top: 50%;
    transform: translateY(-50%);
}

.text-register {
    color: #aa2323;
}

.register-link {
    color: #aa2323;
    font-size: 13px;
    text-decoration: none;
    position: absolute;
    right: 335px;
    top: 50%;
    padding: 4px 6px;
    transform: translateY(-50%);
    border: 1px solid #aa2323;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.register-link:hover {
    background-color: #aa2323;
    color: #fff;
}

.wz-contents {
    min-height: 100vh
}

.nickname {
    color: white;
    text-decoration: none;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    position: relative;
}

.my-contents {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background-color: #171717;
    width: 200px;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.my-contents li {
    padding: 5px 15px;
    list-style: none;
}

.my-contents li a {
    color: white;
    text-decoration: none;
}

.my-contents li a:hover {
    background-color: #444;
}

.wz-nav__quick [class*='wz-nav__quick--'],
.sub-promotion .slider__controls__button,
.side-promotion .slider__paging__item,
.footer .copyright .ci,
.main-promotion .slider__controls__button,
.main__latest-shop .shop-items__slider .slider__controls__button,
.board-search__button,
.board-view--banner {
    font-size: 0;
    text-indent: -9999em
}

.wz-gnb__item:hover .wz-gnb__link,
.wz-gnb__link.current {
    color: white
}

.wz-gnb__item:hover .wz-gnb__link:after,
.wz-gnb__link.current:after {
    transform: translateX(0);
    opacity: 1
}

.wz-gnb__item.active .wz-gnb__link,
.wz-gnb__link.active {
    color: white;
}

.wz-gnb__item.active .wz-gnb__link:after,
.wz-gnb__link.active:after {
    transform: translateX(0);
    opacity: 1;
}

#nav {
    transition: height 0.3s ease-in-out;
}

.wz-nav {
    min-width: 1280px;
    width: 100%;
    height: 85px;
    overflow: hidden;
    position: fixed;
    top: 40px;
    left: 0;
    z-index: 9991 !important;
    background: url("../images/bg_nav.png") 0 0 repeat-x;
    transition: height .3s;
}

.wz-nav:after {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 85px);
    background: rgba(0, 0, 0, 0.9);
    position: absolute !important;
    top: 80px;
    z-index: 9990 !important;
    left: 0
}

.wz-nav-content {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    z-index: 9998;
    justify-content: space-between
}

.wz-nav--fixed {
    position: fixed
}

.wz-nav--main {
    display: block;
    height: 80px;
    line-height: 80px;
}

.wz-nav--download {
    display: block;
    height: 80px;
    font-size: 18px;
    font-weight: 600;
    color: #ae3b17;
    transition: transform .3s ease
}

.wz-nav--download:hover {
    transform: scale(1.1)
}

.wz-gnb__list {
    max-width: 960px;
    display: flex;
    justify-content: space-between
}

.wz-gnb__item {
    position: relative;
    text-align: center;
    height: 100%;
    align-items: flex-start
}

.wz-gnb__item,
.wz-lnb__item {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wz-gnb__link {
    position: relative;
    display: block;
    height: 80px;
    padding: 0 40px;
    box-sizing: border-box;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.3);
    transition: all .3s ease;
    word-break: break-word
}

.wz-gnb__link:after {
    content: '';
    width: 36%;
    height: 4px;
    background: #d76440;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -18%;
    transform: translateX(-100%);
    opacity: 0;
    transition: all .5s ease
}

.wz-gnb__text {
    word-break: break-all;
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 1px)
}

.wz-lnb__list {
    max-width: 160px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 20px 5px 40px;
    transition: all .3s ease;
    z-index: 9997 !important;
}

.wz-lnb__link {
    display: inline-block;
    padding: 5px 0;
    font-size: 14px;
    color: #666;
    word-break: break-word
}

.wz-lnb__link:hover,
.wz-lnb__link.current {
    color: #d76440
}

.wz__bi--nav {
    display: inline-block;
    vertical-align: middle
}

.wz-nav__quick {
    text-align: center
}

.wz-nav__quick [class*='wz-nav__quick--'] {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background-size: cover;
    border-radius: 50%
}

.wz-nav__quick--facebook {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2252%22%20height%3D%2252%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22rgb%280%2C0%2C0%29%22%20style%3D%22%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%234967a9%3B%7D.b%7Bclip-path%3Aurl%28%23a%29%3B%7D.c%7Bfill%3Aurl%28%23b%29%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22a%22%3E%3Ccircle%20class%3D%22a%22%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20transform%3D%22translate%28850%203049%29%22%2F%3E%3C%2FclipPath%3E%3Cpattern%20id%3D%22b%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20107%20228%22%3E%3Cimage%20width%3D%22107%22%20height%3D%22228%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAGsAAADkCAYAAACfWdoBAAAABHNCSVQICAgIfAhkiAAACUFJREFUeF7tnX%2FInlMYx23DbKTUNG2hkaXI%2FmBEk2VZZhElUiRSRPyDNanJj7KMEpElTA0RESVRJCuaaVlkkfVmzY%2BI%2FGpttr2%2B39vzvL3vvHvu6zzPc865zn1%2FT13t5bnu%2B7rO93Ou%2B9zP%2FeM8U0ZHRw9SG1NgGv66wKDHVPjsg%2B3t2JH491jYHBj3MUjjvtm4H9ofsE2wj6e0ABaFPBF2Omw%2BbBFsFux42KGDqJp425eaBmsGBNwJOw12MexC2JmFQTnQGNjQJFgnoZcrYDckHvGpwm1pAqzzoNZjnWpKJVyOOFtLhcW55jrYI7DDcyiXIeZIibDOgFDPtKCS9h8P20qCdQqyvxV2Y4ZR7SFkMYdBntXdD2NVtbW5ryyeit%2FdsbZC6vbbNSx%2Be3%2BqwafioYPPNazX0ZtLQ3vUYH%2BXsHgp6HnYRQ0Wvp%2BuuYPF708vq6ImZekOFueotp6a11WbK1i8IvFsXcYt%2FtwNrBMA4dsWg7B03QUszlN%2Fwkq6t2QRd9g%2B2WHxS%2B8q2Mph96yB%2B8sOi7fQ322gsDG6lBUWq%2BoTGO%2FqqtUrkBXW7cjv4foc5dFRICusPUhi0CeB2kQyGyxVVfgwywbrd%2BTKR8TU7ApkgfWgTtXthMZ5ZoH1HRLg06tqYQokh8XT9M%2FDcpR3jrNBXk7iVXVesFULVyBpZfGm4s%2FhOWqLHJWlS0uDjbuklfU0cm3qc%2BiDYbBtnRTWj8hpti0veU2iQDJYurk4%2BPhL9kQuHynjo2Vq%2FSuwOdWz7noQpn9I3S2TwfoaEfmym1r%2FCmxMUVn8Mryr%2Fxy1ZUeBTSlg8Q32HZJ8YAXWpoDF13Q%2BHThVvzv4G6lthnH5g22wQR%2Bp45INh3S6y6MSl1bYDUvyTnFTr1y8DwH5muwHMK4QEL2lqKyr0IsXo%2FckXYA3EIr35DamC%2FlfpBSw%2BDLcA6k7FinePdjvo51DU6QQB95tClhN%2BY71JGS8I9UhbzJkKWDxZYPS72FtRR8WdCb65BXVDZgCVhOutp8LwTZko9QJnAJW6YdBnvUtyQ0q1QnGEwh0s4fO9pnDcmz3dp%2FbDnWzFJVVOqyZOU8qxtNOAWsdAl471CGWbme8KrEwXbjekVLAehMpcO2%2FEttrSPpyL4mngMXrgqUu47MWud%2FUJli8sMnb%2BiW2x5H0bV4ST1FZJT8uzctL9wmWFwV653ElPn7FS6opKqvkW%2FqLAerDNsH6Ap3lwo4ltqVI%2Bj0viaeorJLnrGUA9Y5geVGgdx6CVQanKkvBEqz%2BFNCcpcPgBAV0gtFfIf1vK1WWKkuVNaRimrCbFJVV8m19N3eJSS0FrJLvFLcOVsmV1brvWetQwaXe1hesGJNvpH227jBYcmW1DhbfIOGbJCW2S5D0W14Sj302yHVwX4WV%2BrsirYHFJVXPhn3kZWT2kccv2IYvzH0G49uIfMsx9lKxRyEGX87jW4%2F80ep%2FYNU9tW5lXY2%2FuVbFyTBWQ6%2FGpLkTvk7J1v0VbL5Kyb%2F5AD8D8VdOuT%2B1wRXga7DLCItL9PBxsbb8Kung0uXZw0LCIqS%2F8sRX1AAFlncPg6MBG8k1jwJLBCuP8P1EnSlY%2FciWZ5vphMVTxV%2FzxFdUowIj8KtOMOivOcuoWia3LYi7QLAyqR8Ylk8FLxWsQNUyuT%2BHuNcLVib1A8NWrx4JVqBqmdyvQdz1gpVJ%2FcCw1aIpghWoWib3eYg7IliZ1A8MW63FIViBqmVyn464uwUrk%2FoBYXmP8GD6C1aAaplcRxCXc5ZgZQIQEpZ33nk2KFghqmXyXY%2B4%2FJ4lWJkAhIRdDee7BCtEsny%2BtyA01%2BdVZeVjYI48tsqNzgbNmmVzPAuRqzXkBSsbA3PgI%2BDJh0sFyyxZPscp3dCqrHwQrJF59YJXMVRZVsUy%2BX2PuHNVWZnUDwz7JfxPFaxA1TK5c63DxYKVSf3AsNWDMoIVqFom9zWIu0KwMqkfGLZ6UEawAlXL5H4Z4vKX8Kqm71mZKBjDTliHQ7CMqmVyOxpx%2BV6zKisTgJCwY5eauodBvn2%2BJ2QP8k2mQPVU0%2F6VRVixlwxI1sOGBOJiKTzBqK4Ljj%2FB4At1XArhHENHufF4sFPx31xmgdextsOqy%2Flo58PuNOzPuwvXpPihI9phCQY1deQZ4AuwkfHixF5hZhGClbxoCbUau5%2BUe1TFhsX%2B7YJxEZNS24RJPmcnUsD6Ch0seaWZCZN802GV%2FGNnZNOqytqBDs%2FJOSIHjN0qWKqsAUdLd%2FMUc1bJv5%2FVusNgyT9vIVhDOiqk2k2r5ixV1pCGVYo5S7AEa0gK1O9Gh8F6jdx4CJYbFPWJCFa9Rm48BMsNivpEBKteIzceguUGRX0iglWvkRsPwXKDoj4RwarXyIUHH%2F7hMxgumi439cbAp2H5VKyLJli9MfyEj49xQQpJCFZvEnwO8jjB8qKAYE1QoORbJKqsMoqqylKwBKs%2FBXSCoTlLc1Z%2FtdN7K1WWKkuVpcqKoYAqS5UVY1xpzlJlqbJUWTEUUGWpsmKMK81ZqixVliorhgKqLFVWjHGlOUuVpcpSZcVQQJWlyooxrjRnqbJUWaqsGAqoslRZMcaV5ixVlipLlRVDAVWWKivGuNKcpcpSZamyYiigylJlxRhXmrNUWaosVVYMBVRZqqwY40pzlipLlaXKiqGAKkuVFWNcac5SZamyVFkxFFBlqbJijCvNWaosVZYqK4YCvffJH3iemz7s5BF1GOxNYgQfzxMsLwr0zuMbfDzfS6qqrN4ktKCxl5FqzEOL8BuF8uAmWB4oGHMQLKNQHtwEywMFYw6CZRTKg5tgeaBgzEGwjEJ5cBMsDxSMOQiWUSgPboLlgYIxB8EyCuXBTbA8UDDmIFhGoTy4CZYHCsYcBMsolAc3wfJAwZiDYBmF8uAmWB4oGHMQLKNQHtwEywMFYw6CZRTKg5tgeaBgzEGwjEJ5cBMsDxSMOQiWUSgPboLlgYIxB8EyCuXBTbA8UDDmIFhGoTy4CZYHCsYcBMsolAc3wfJAwZiDYBmF8uAmWB4oGHNoFaxVEOVeozAe3HYiiRmdRFbj34dgv3lILMUL4LPR0ZWwK2BzDJ3eDp%2B9sH0G38lcduN%2FTutY9%2FOp%2BOPQjs0y7Jcvfq%2BHrYHxbxctBazQjlJUCh6jsWJYOb0aQXOwuGv%2FAgMRZG%2BHHGBiAAAAAElFTkSuQmCC%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cg%20class%3D%22b%22%20transform%3D%22translate%28-850%20-3049%29%22%3E%3Cg%20transform%3D%22translate%28886%203074%29%22%3E%3Crect%20class%3D%22c%22%20width%3D%2225%22%20height%3D%2252%22%20transform%3D%22translate%282%20-1%29%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-color: #4967a9
}

.wz-nav__quick--youtube {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22rgb%280%2C0%2C0%29%22%20style%3D%22%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23ebebeb%3B%20%7D%20.cls-2%20%7B%20clip-path%3A%20url%28%23clip-path%29%3B%20%7D%20.cls-3%20%7B%20fill%3A%20url%28%23pattern%29%3B%20%7D%20%3C%2Fstyle%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Ccircle%20id%3D%22Ellipse_2_copy_3%22%20data-name%3D%22Ellipse%202%20copy%203%22%20class%3D%22cls-1%22%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20transform%3D%22translate%28970%203049%29%22%2F%3E%20%3C%2FclipPath%3E%20%3Cpattern%20id%3D%22pattern%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20512%20360%22%3E%20%3Cimage%20width%3D%22512%22%20height%3D%22360%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAgAAAAFoCAYAAAAhN0NQAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF7t3QfYVNWdx%2FFji8aC3WgsYdVd9tFEE2tM1NW1rSm2JBpNdF1dYzYiIpZEsEYUjLGCLWqMMZaNGkuwNxQbroINC4oKgooVEEFBcH9%2FmEuG933nndvvPfd%2B7%2FOcZ9535txzz%2FncgfN778ycWcSxIYBA5gJfOPclHWSZpgO1%2B92qLquyRDedW16PLdri8UV0%2Fwrd7GvtWvtzVaaGBJiiehpK2%2B1j1fi8Ra2ObXymejM61LX%2BWL%2BCbZYG80nbo1IBAQQiCdh%2FEmwIeCegWWhxdXq5RseDiXIx%2Fd6jcd%2FSul1SpXki%2FLJ%2BX6rx%2BIqNW%2Fvd7rfNJkyrb%2FvZ%2FrYFk2wwYQZWzfvZfc37dPW7d8Yl7%2FA09W9OUx9n6%2BfpTb8HIcLqWF3bPlWZ2fjZ6to%2Btn3UuLXQYuHFNqtn9W0LjmXhxwKMbbNUglBit%2Fa7bcFxP9YTqVUIalTlBoFiBQgAxfpX7uj6H9ImTPvr1ibnYMK1Sdnus9tg4rTH7T6rH0yeNpHbfTYRB38h21%2FNwX32fLX9bPJnQ8AHgeBqSKvbIIh0vLXQYVdHbD8LGBZGLFwEwcSCiD1ujxE2fHgmlLCPBIASnpQ8uqSJ2iZnm0yt2IRrk3Pwu93axGzFfrYJuqtJ2f6KDv4yDv7izqP7HAMBBBYWCK502MspFgzsqob9bMHCiv1uYSL43QKGhYjgd3vMAobdP10TQ3D1A%2BcKCxAAPD25msDtr2WbgIOyUoff7X67L5jEg8nd7uevaE%2FPO91GICcBe3nEwoAFBysWFoKfu73VpBK8TJJTVzlMXAECQFy5FPfTZG4T8uoqqzbKarr9SuNnm8S7mtztsjgbAgggUEYBCwkfqLyn8n6jTNbtu42f7X773W7f00RkVy3YchYgAGQE3pjU11bzVmxyb57UbaK3Cd7uW0UleGNaRr2hWQQQQKDUAvYSxDtNgcHCwUSVN1UmBT9rwgrepFnqwfjSOQJAjDPVYXJfszHJ20Tf%2FHPwbvQYR2AXBBBAAIEuBOxlCQsFFg4sGDT%2FPEG%2Fv8rVhPDPGwJACytN8vZa%2BT%2Br9GqUf9GtlZ4q9ro6GwIIIIBAuQRs%2FYjxKmMb5eXG7Su6naAJr3l9iXL1vIDe1DoAaJK3RVTWV9mgMbnbBB9M%2BHaZng0BBBBAoBoC9skGCwJBOHhaP49SGaeJMMwCV9VQaBpFrQKAzrBN7luqbNIo39RtsJhM5U4uA0IAAQQQaCtgLyuMVnlS5SGVhzUxfth2rwpUqHQA0IRvf9HvpLJto9ib8dgQQAABBBBoJWAvE4xReUBlmMqDmiiDlR4rpVapAKAJ35aC3Uplt0axv%2FjZEEAAAQQQiCtgCyTdqXKzyi2aNIPlpOO2V5r9KhEAGn%2Fp7yfVA1W%2BVhpdOoIAAgggUCUBe7ngFpU%2Fq9zn%2B3sHvA0AmvRtCdp9VH6p8t0qPcMYCwIIIIBA6QWeUw%2FPVrnG15cIvAsAjc%2FgHyL0vir22Xs2BBBAAAEEihKw9QjOU7lEE2rwzZNF9SXScb0JAJr47Vvh%2BjVKd99zHgmAyggggAACCKQgYEsfn65ygS%2BLEZU%2BADQu9f%2B3UE9U4V38KTxLaQIBBBBAIDMBW4jI5qu%2FlH3hoVIHAE3%2BO1iaUuHd%2FJk9V2kYAQQQQCADgcfV5qGaZJ%2FNoO1UmixlANDEb99%2BN0jFXusvZR9T0acRBBBAAIEqC3yuwV2oMkAT2fSyDbR0k6sm%2F58J6XwVCwFsCCCAAAII%2BC4wTgP4mSbckWUaSGkCQOPd%2FXa5f%2F8yAdEXBBBAAAEEUhCwqwGnqZyqiXdOCu0lbqIUAUCT%2FxYayTUq6yUeEQ0ggAACCCBQXgFbYnhfTb6Ti%2B5i4QGgccn%2FMkEsVTQGx0cAAQQQQCAHAVs7YA9NwPYFRIVthQWAxrr9djnk14WNngMjgAACCCBQjIB9PfEhmoT%2FUszhC3qHfeP1%2Fhs06J2LGjjHRQABBBBAoGABTYfuOIWAM4roR%2B5XADTaFTXQ21TsW%2FvYEEAAAQQQqLuABQALAhYIcttyDQAa2Vc0srtUNs5thBwIAQQQQACB8gtcrC4elufqgbkFAE3%2BX9XgHlRZv%2FzngR4igAACCCCQu8ClOqKtHpjLlYBcAoBGsooGNVxlw9w5OSACCCCAAAL%2BCJynidm%2B7TbzLfMAoMm%2Fh0Zxn8pmmY%2BGAyCAAAIIIOC%2FwPGanO1TcplumQaAxjf52Wv%2B22c6ChpHAAEEEECgWgIHaoK%2BMsshZR0A7E0Nh2Y5ANpGAAEEEECgggKzNKYdNUmPyGpsmQUA%2FfXfW50eklXHaRcBBBBAAIGKC7yj8W2hifrNLMaZSQDQ5G%2BX%2FO9WWTyLTtMmAggggAACNRF4QuPcWpP17LTHm3oAaLzj%2Fxl11D72x4YAAggggAACyQTO0GT9m2RNdN471QCgyd%2Fau0ll97Q7SnsIIIAAAgjUVGCuxr2LJth70xx%2F2gHgMHVuaJodpC0EEEAAAQQQcG%2FJYCNN2h%2BkZZFaANBf%2F19Tp8aoLJNW52gHAQQQQAABBBYIXKFJ%2B6C0PNIMAH9Xp36QVsdoBwEEEEAAAQQWErAlgu2jgfen4ZJKAFCP9lFnrkujQ7SBAAIIIIAAAi0FxuqRjTV5f5rUKHEA0OS%2FnDrxssoaSTvD%2FggggAACCCDQVqC%2FJu9BbWu1qZBGAPitjnFC0o6wPwIIIIAAAgiEEpiqWuslfUNgogCgv%2F5XUydeVbGrAGwIIIAAAgggkI%2FA2ZrAj0pyqKQB4EId%2FH%2BSdIB9EUAAAQQQQCCywGfao5cm8fGR92zsEDsAND7294raWSLuwdkPAQQQQAABBGILXKhJ3NbfibUlCQDn6ohHxDoqOyGAAAIIIIBAUoEZaqCnJvL34jQUKwDor%2F8VdbAJKsvGOSj7IIAAAggggEAqAqdoIj85TktxA0B%2FHey0OAdkHwQQQAABBBBITeB9tbSOJvOZUVuMHAD01%2F9iOsgbKmtFPRj1EUAAAQQQQCB1gZ9rMr86aqtxAsB%2F6CB3RD0Q9RFAAAEEEEAgE4H7NJnvGLXlOAHgf3WQvaMeiPoIIIAAAgggkImAfUfA%2BprQX4vSeqQAoCOspMYnqSwV5SDURQABBBBAAIFMBU7ShG4r84beogaAg9XyZaFbpyICCCCAAAII5CHwrCb0jaMcKGoAuFmN7x7lANRFAAEEEEAAgVwE1tWk%2FnrYI4UOALr8%2F2U1aosNLBO2ceohgAACCCCAQG4CfTWpnxf2aFECwA%2FV6K1hG6YeAggggAACCOQqcL8m9R3CHjFKABiiRnuHbZh6CCCAAAIIIJCrwKc62gqa2O2LgtpuUQLA02ot0hsM2h6dCggggAACCCCQpsA2mtgfDtNgqACg1%2F97qLEPVWwVQDYEEEAAAQQQKKdAf03sg8J0LWwAYPW%2FMJrUQQABBBBAoFiBOzSxfy9MF8IGgFPV2PFhGqQOAggggAACCBQmME1HXkmT%2B5x2PQgbAB5QQ9u1a4zHEUAAAQQQQKBwgU00uY9u14u2AUCv%2Fy%2BhRqaoLN2uMR5HAAEEEEAAgcIFjtDkfn67XoQJAFuqkcfbNcTjCCCAAAIIIFAKgRs0uf%2BkXU%2FCBIDD1UjbJNHuQDyOAAIIIIAAArkIjNfk3rPdkcIEAPvyH%2FsSIDYEEEAAAQQQ8ENgZU3w9vH9lluYAPCk9t7Uj%2FHSSwQQQAABBBCQwA6a4O%2BPHQD0BsDFtfPHKkvBiQACCCCAAALeCBytAHBWkgCwoXZ%2B3pvh0lEEEEAAAQQQMIG%2FKADsnyQA7Kedr8YSAQQQQAABBLwSGKMA8PUkAeAM7XysV0OmswgggAACCCBgKwH2UAiY0Yqi2zcB6j0Ad2rHXXBEAAEEEEAAAe8EttQk%2F0TcAPCWdlzDuyHTYQQQQAABBBA4VAHgD5EDgP76X0E7fYQfAggggAACCHgpcK4CwJFxAgBLAHt5vuk0AggggAAC8wS6%2FWrglu8B0BWAA7TzlSAigAACCCCAgJcCr2uSXzfOFYBTtdPxXg6ZTiOAAAIIIIDAXBEsqxAwsyuK7q4A%2FFU7tP02IXwRQAABBBBAoLQCG2mify5qAHhaO2xc2iHRMQQQQAABBBBoJ7C3AsD1oQOAXv%2B3KwP2HQDLtGuZxxFAAAEEEECgtAInakK3l%2FQ7bV2%2BBKAAsLZqTijtcOgYAggggAACCIQRuFoT%2Fc%2BjBIAdVfmeMC1TBwEEEEAAAQRKK%2FCkAsDmUQLAoap8cWmHQ8cQQAABBBBAIIzAVAUAW9iv09bqJYBBqvmbMC1TBwEEEEAAAQRKLbCSJvtOK%2Fu2CgDXaCj7lno4dA4BBBBAAAEEwghsosl%2BdMeKrQLAI6r4nTCtUgcBBBBAAAEESi3wI032fwsbACaq4pqlHg6dQwABBBBAAIEwAkcrAJzVNgDoI4BLqJItG7hYmFapgwACCCCAAAKlFhiqAHB4mABgXxwwrtRDoXMIIIAAAgggEFbgNgWAH4QJANur0v1hW6UeAggggAACCJRaYIwCwNfDBIADVemKUg%2BFziGAAAIIIIBAWIEZqmjfCqhX%2Bf%2BxdfoUgB49SQ%2BfHLZV6iGAAAIIIIBA6QVW14Q%2FuV0AuEwVDi79UOggAggggAACCIQV2FwB4Ml2AeB2Vdg1bIvUQwABBBBAAIHSC%2ByhAHBLuwDwtCpsXPqh0EEEEEAAAQQQCCtwmALAhe0CwLuqsGrYFqmHAAIIIIAAAqUXOF0BYEDLANBYBOhTVVi09EOhgwgggAACCCAQVuBKBYADuwsA6%2BjB8WFbox4CCCCAAAIIeCFwrwLATt0FgG%2Frwce8GAqdRAABBBBAAIGwAi8oAGzYXQDYSw%2FeGLY16iGAAAIIIICAFwJTFQBW6C4A9NaDQ7wYCp1EAAEEEEAAgSgCyykETA92WGglQL0J8DQ90D9Ka9RFAAEEEEAAAS8EemnSH9sqAFyuBw7yYhh0EoEiBLbayjkrQ3ShbPbsInrAMRFAAIG4AtsrAAxvFQD%2Brgc6fWVg3COxHwKVE9h5Z%2Bfuusu5V15xrl8%2F54YNq9wQGRACCFRWYB8FgL%2B2CgCP64EtKzt0BoZAUoEgAATt3Huvc337OjdmTNKW2R8BBBDIWqCPAsCC9%2Fl1fA%2FAOB193ax7QPsIeCvQMQDYQOylgIsucu7EE52bOtXbodFxBBCovMBATfontLoCME0PLFd5AgaIQFyBrgJA0NYHHzh36qnODR3q3Jw5cY%2FAfggggEBWApcqAPyiUwDQJwCW0p0zszoq7SJQCYHuAkAwwNGj578s8NBDlRgyg0AAgcoI3KoAsHtXAWBt3TmhMsNkIAhkIRAmAATHtTcIHn64c2%2B8kUVPaBMBBBCIKjBSAcBW%2FJ23LXgPgK4AbKLfn4raGvURqJVAlABgMDN1Ue38850bOFDLbyxYf6NWZAwWAQRKI%2FC6Jv0F7%2FNrDgC7qIt3lqabdASBMgpEDQDBGCZN0hJbWmPrqquc%2B0Jxmw0BBBDIX2CGJv1luroCsL%2Fu%2FHP%2B%2FeGICHgkEDcABEN84gnn%2BvRxbuRIjwZNVxFAoEICC5YDbr4CoHctuXMqNEiGgkD6AkkDgPVo7lznrr7auWOOcW7y5PT7SIsIIIBAa4H1NPG%2FZg83B4BT9Ls%2ByMyGAAItBdIIAEHjU6Y4N3iwc%2Bee69xnn4GOAAII5CGwmSb%2Bee%2F3aw4A5%2Bl3XZtkQwCBXAJAcBCWFeYJhwAC%2BQnsrIn%2Fno4B4ErdcUB%2BfeBICHgokOYVgI7DZ1lhD58QdBkB7wQWfB9A8xWAWzSM3bwbCh1GIE%2BBLAOAjYNlhfM8mxwLgToK%2FFIT%2FyUdrwA8qDu2raMGY0YgtEDWASDoCMsKhz4lVEQAgUgC%2FRUABnUMAM%2Fojo0iNUNlBOomkFcACFxtWeEjjnBuxIi6STNeBBDIRuBMBYBjOwaA8bpjnWyOR6sIVEQg7wAQsLGscEWeQAwDgcIFLlMAOKRjALDvMe1ReNfoAAJlFigqAJjJjBn6Jm99lTfLCpf5GULfECi7wI0KAD9eEAC0MOli%2BkVfav6PjwWWfQT0D4FCBIoMAMGAJ050bsAAlhUu5AnAQRHwXuB%2BBYAdmgPASvpFX2bOhgAC3QqUIQAEHbTlhO39ASwrzJMWAQTCCzytAPCt5gBg3w40Lvz%2B1ESgpgJlCgB2ClhWuKZPRIaNQGyB8QoAPZsDAF8FHNuSHWslULYAEOCzrHCtnoYMFoEEAtMUAJZvDgD%2Frl%2FuS9AguyJQD4GyBoBAf%2BxY5%2Fr1c%2B622%2BpxPhglAghEFbDvI%2F%2BSQsDn81YC1G976ebGqK1QH4HaCZQ9AAQnxJYVtvcHvPBC7U4RA0YAgbYCq2ryfz8IAAep%2BuVtd6ECAnUX8CUA2HliWeG6P1sZPwKtBHpp8h8bBABdM3RnYYUAAm0EfAoAwVBYVpinNQIILCzwbU3%2BI4MAcIoeOxEhBBCoYAAIhjRqlHN9%2B7KsME9yBBDYVZP%2FnUEAOE8efTBBAIEKB4BgaLascO%2Fezo231b%2FZEECghgI%2F0%2BR%2FTRAArhTAATVEYMgIRBPw8SWArkbIssLRzju1EaiWQG9N%2FhcEAeAmjW2Pao2P0SCQgUBVAkBAw7LCGTxJaBKB0gscr8n%2FtCAA3KPu7lj6LtNBBIoWqFoACDwffHD%2BxwafsW8FZ0MAgYoLDNLk3z8IAI9qsFtVfMAMD4HkAlUNACYTLCt89NHOvftucitaQACBsgoM0eTfJwgAFvs3KmtP6RcCpRGocgAIkINlhc85x7lZs0pDT0cQQCA1gSs0%2BR8UBIBX1Oz6qTVNQwhUVaAOASA4dywrXNVnMeNC4HpN%2FnsHAeAteayBCQIItBGoUwAIKFhWmH8WCFRN4A5N%2Ft8LAsBUja5H1UbIeBBIXaCOAcAQWVY49acSDSJQoMAITf7bBgFgtjqyeIGd4dAI%2BCFQ1wAQnB2WFfbjeUovEeheYJQm%2F00X0TcBLql6n6KFAAIhBOoeAAIiW1bYPjb48MMh0KiCAAIlE7AvAuplAWBFdezDknWO7iBQTgECwMLnhWWFy%2Fk8pVcIdC%2FwlgLAmhYA1lK9N9FCAIEQAgSAzki2rPCZZzp3xhnOzZwZApEqCCBQsMA0BYDlLQD0UkdeKrgzHB4BPwQIAK3PE8sK%2B%2FEcppcIaNkvISxuAWAT%2FfAUIgggEEKAANAeafjw%2BV87zLLC7a2ogUBxAstYANhaxx9RXB84MgIeCRAAwp0slhUO50QtBIoTWM0CwC46%2Fp3F9YEjI%2BCRAAEg2sliWeFoXtRGID%2BBdS0A7KXj3ZjfMTkSAh4LEADinbyXX3auXz%2Fnbr893v7shQACaQtsZAFgf7X657Rbpj0EKilAAEh2Wm1Z4T59nHvxxWTtsDcCCCQV%2BI4FgEPVysVJW2J%2FBGohQABIfpqDZYVPOMG5adOSt0cLCCAQR2BnCwBHas%2Bz4%2BzNPgjUToAAkN4pf%2F995wYOdG7oUOfmzEmvXVpCAIEwAntaADhONU8PU5s6CNRegACQ%2FlPgKX0K2T42yLLC6dvSIgKtBfazAHCyHj8JJQQQCCFAAAiBFKPKF%2Fqf6IYbnDvmGOfGj4%2FRALsggEBEgYMsANhf%2F3YVgA0BBNoJEADaCSV7PFhWePBgfUUZ31GWDJO9EehW4FcWAM5SFX0%2Bhw0BBNoKEADaEqVS4U19Pcnxx%2BvzSXxAKRVPGkGgs8CRFgD0Dhx3GDoIIBBCgAAQAinFKiwrnCImTSGwkMBxFgD%2BoLsOAQYBBEIIEABCIKVchWWFUwalOQTmCZxiAeBK%2FXAAIAggEEKAABACKaMqH300%2FyuHzznHuVmzMjoIzSJQG4HBFgCu03D3qc2QGSgCSQQIAEn00tmXZYXTcaSVugucawHgb1LYs%2B4SjB%2BBUAIEgFBMuVRiWeFcmDlIZQUutgBwm4b3vcoOkYEhkKYAASBNzeRtsaxwckNaqKvAnywA6Ns53A51FWDcCEQSIABE4sqt8ttva0mzk5277DLn7E2DbAgg0E7gOgsAI1Rr63Y1eRwBBCRAACj308CWFT7iCOceeaTc%2FaR3CBQvcLMFgJHqxxbF94UeIOCBAAGg%2FCcpWFb46KOdmzCh%2FP2lhwgUI3CnBYCndeyNizk%2BR0XAMwECgD8njGWF%2FTlX9LQIgeEWAMboyBsUcXSOiYB3AgQA706ZY1lh%2F84ZPc5D4DELAC%2FrSP%2BSx9E4BgLeCxAA%2FD2FDzww%2F2uHn33W3zHQcwTSE%2Fg%2FCwCvqr310muTlhCosAABwO%2BTGywrfNRRzr33nt9jofcIJBMYbQHgDbXxtWTtsDcCNREgAFTjRLOscDXOI6NIIvC8BQB976ZbK0kr7ItAbQQIANU61bas8JFHOnfHHdUaF6NBoL3ASxYA3lK9NdrXpQYCCLAOQEWfA8OGzX9%2FwLhxFR0gw0Kgk8CrFgAm6%2B7VwEEAgRACXAEIgeRpFZYV9vTE0e2YAm9YAHhfO68cswF2Q6BeAgSA6p9vlhWu%2FjlmhCYw0QKAvmTbrYAHAgiEECAAhECqSBWWFa7IiWQYLQQmWwCYpgeXgwgBBEIIEABCIFWoCssKV%2BhkMpQOAh9YAPhEdy4NDQIIhBAgAIRAqmAVlhWu4Emt%2FZCmWgD4VAxL1p4CAATCCBAAwihVtw7LClf33NZvZJ9YAJitcS9ev7EzYgRiCBAAYqBVcBeWFa7gSa3dkD6zADBXw16kdkNnwAjEEdhpJ%2BfuvjvOnuxTNQGWFa7aGa3beOYSAOp2yhlvMgECQDK%2FKu39%2BefO%2FfGPzh1%2FPN8rUKXzWp%2BxzAsAvARQnxPOSJMKEACSClZjf14CqMZ5rPcoZvMmwHo%2FARh9VAECQFSxatXnTYDVOp%2F1Hs2nfAyw3k8ARh9VgAAQVawa9T%2FRp6V%2F%2F3vnBg%2FW56bsg1NsCHgvMO9TACwE5P15ZAC5CRAAcqMuxYFYCKgUp4FOZCIwbx0AlgLOxJZGKylAAKjkae1yUE8%2B6dwRRzj36KP1GTMjrZPAhxYA3tOIV6nTqBkrArEFCACx6bzZkS8D8uZU0dFEAu9ZAHhHTXwlUTPsjEBdBAgA1T3TfB1wdc8tI%2BtK4B0LAJP0yFfxQQCBEAIEgBBIHlYZNsy5vn2dGzfOw87TZQRiCUyyADBBu64da3d2QqBuAgSAap3xl1927sgjnbvjjmqNi9Eg0F5gvAWA11WvZ%2Fu61EAAAUcAqMaT4CO99%2FmUU5y74ALnbEU%2FNgTqJ%2FCaBYBXNe716jd2RoxADAECQAy0Eu3C%2Bv0lOhl0pWCBVywAvKRO9Cq4IxweAT8ECAB%2BnKeuesnyvf6eO3qehcBLFgCeV8sbZtE6bSJQOQECgH%2BnlOV7%2FTtn9DgPgTEWAEbrSN%2FM42gcAwHvBQgA%2FpzCGTOcO%2FNMlu%2F154zR03wFRlkAeFzH3DLf43I0BDwVIACU%2F8SxfG%2F5zxE9LIPAYxYAHlRPti1Db%2BgDAqUXIACU%2BxQ99dT85XsfeaTc%2FaR3CBQvMNwCwN3qx07F94UeIOCBAAGgnCeJ5XvLeV7oVZkF7rIA8Hf18Adl7iV9Q6A0AgSA0pyKeR1h%2Bd5ynQ9645PArRYAblCPf%2BRTr%2BkrAoUJEAAKo%2B90YJbvLc%2B5oCc%2BClxvAeBq9Xw%2FH3tPnxHIXYAAkDt5pwPa8r39%2Bjl3%2B%2B3F94UeIOCvwF8sAFyh%2Fh%2Fo7xjoOQI5ChAAcsTucChbvveMM5w75xznZs0qrh8cGYFqCFxuAeBijeXQaoyHUSCQsQABIGPgLpoPlu89%2Bmjn3n03%2F%2BNzRASqKXChBYDzNLY%2B1Rwfo0IgZQECQMqgbZobPnz%2Bx%2FqefTbf43I0BKovcI4FgN9pnMdUf6yMEIEUBAgAKSCGaILle0MgUQWBRAKDLQCcqiaOT9QMOyNQFwECQLZnmuV7s%2FWldQT%2BIXCKBQCb%2FC0EsCGAQDsBAkA7oXiPB8v3HqOLkePHx2uDvRBAIIpAfwsAdvnfXgZgQwCBdgIEgHZC0R%2B35Xv79nXu4Yej78seCCAQV%2BAoCwCHa%2B%2Fz47bAfgjUSoAAkN7pDpbvvfxy5%2BbMSa9dWkIAgTACvS0AHKyal4WpTR0Eai9AAEj%2BFGD53uSGtIBAcoH%2FsgDwU7VzbfK2aAGBGggQAJKd5Hvv1YeO9anjF19M1g57I4BAUoG9LQD8UK3cmrQl9kegFgIEgHinmeV747mxFwLZCXzfAsC%2Fq%2F37sjsGLSNQIQECQLSTOWWKc4MHs3xvNDVqI5CHwHYWALbUkR7P42gcAwHvBQgA4U4hy%2FeGc6IWAsUJbG4BYEMd%2F%2Fni%2BsCREfBIgADQ%2FmTZ8r32sb5nnmlflxoIIFCUwAYWAHrq6K8X1QOOi4BXAgSA1qdr4kTnBgxw7qqrnLOFfdgQQKDMAj0tAKyqHvIVW2U%2BTfStPAIEgM7nIli%2B176qd%2BbM8pwreoIAAt0JrGoBYGnV%2BAQnBBAIIUAAWBhp2DDnevdm%2Bd4QTx2qIFAygaUtACyiTn2usmjJOkd3ECifAAFg%2FjkZNWr%2B1%2FSyfG%2F5nqP0CIH2AnNVZXGb%2FJ1CwHTdLNN%2BH2ogUHOBugeADz7QV4fpu8OGDmX53pr%2FU2D4XgtM1%2BS%2FXBAAJmsoq3k9HDqPQB4CdQ0AwfK9J57o3NSpeUhzDAQQyE5gsib%2F1YMAME7HWTe7Y9EyAhURqGMAsOV77XL%2FCy9U5CQyDARqL%2FCaJv%2F1ggDwrDi%2BUXsSABBoJ1CnADB2rHP9%2Bjl3223tVHgcAQT8EnhOk%2F9GQQB4TH3%2Ftl%2F9p7cIFCBQhwDA8r0FPLE4JAK5CjyuyX%2BrIADoGp%2FbIdfDczAEfBSocgBg%2BV4fn5H0GYE4Avdp8t8xCAC3qIXd4rTCPgjUSqCqAeDBB%2Be%2Fzs%2FyvbV6OjPY2grcqsl%2F9yAAXC2G%2FWpLwcARCCtQtQDA8r1hzzz1EKiSwLWa%2FPcLAsAFGtmvqjQ6xoJAJgJVCQC2fO%2BQIc4NHKhVQGwhF%2BtwAAAScUlEQVQZEDYEEKiRwEWa%2FH8VBIDTNPD%2BNRo8Q0UgnkAVAgDL98Y79%2ByFQHUEBmny7x8EgGM0rt9VZ2yMBIGMBHwOALZ8r31N74gRGeHQLAIIeCJwrCb%2FM4MA8N%2Fq9KWedJxuIlCcgI8BgOV7i3u%2BcGQEyinwC03%2BlwYB4Mfq4%2FXl7Ce9QqBEAj4FAJbvLdETh64gUCqBn2jyvyEIADuqa%2FeUqnt0BoEyCvgSAFi%2Bt4zPHvqEQFkEdtLkf28QADZVr54sS8%2FoBwKlFSh7AGD53tI%2BdegYAiUS2EyT%2F1NBAFhPHXu1RJ2jKwiUU6CsASBYvvfcc5377LNy2tErBBAoi8D6mvzHBQFgJfVKX%2FTNhgAC3QqULQAEy%2Fceow%2FyTLZv9WZDAAEE2gqsrMn%2FwyAALKbqs1Xm%2Fc6GAAItBMoUAEaOnL98r92yIYAAAuEEvlC1JTTZz1kw4eueqbqzR7j9qYVATQXKEABYvremTz6GjUAqAtM08S9vLTUHgPH6fZ1UmqcRBKoqUGQAYPneqj6rGBcCeQqM18Tfs2MAeFp3bJxnLzgWAt4JFBUAbPneww937o03vCOjwwggUCqBpxUAvtUxAAzXHf9Wqm7SGQTKJpB3ABg9ev7r%2FCzfW7ZnAv1BwFeB4QoA23cMADfpjj18HRH9RiAXgbwCAMv35nI6OQgCNRS4SQFgr44B4ArdcWANMRgyAuEFsg4ALN8b%2FlxQEwEE4ghcoQBwUMcAcLbuODJOa%2ByDQG0EsgwAtnyvfVvfmDG14WSgCCCQu8DZCgBHdQwAJ%2BmOk3PvCgdEwCeBLALAK68416%2Bfc%2FZGPzYEEEAgW4ETFQBO7RgA%2BuiO87I9Lq0j4LlAmgFg%2BnTnzjrLuUGDWL7X86cF3UfAI4E%2BCgBDOgaA%2FXXHnz0aBF1FIH%2BBNAIAy%2Ffmf944IgIIBAIHKABc1TEA7Ko7bscIAQS6EUgaAJ54wrk%2ButjG8r08zRBAoBiBXRUA7uwYAPhK4GJOBkf1SSBuAJg0ybn%2B%2FZW7Fby%2FsKW42RBAAIFCBDZVABjVMQCsrTsmFNIdDoqALwJRA8DMmc6df75zAwc6Z6%2F5syGAAALFCqytADCxYwBYUnd8Wmy%2FODoCJReIEgBYvrfkJ5PuIVBLgaUUAD5bKADYL3wjYC2fDAw6ikCYAGDL99rn%2BR96KErL1EUAAQSyFpiiyX%2FF4CALvg2wEQD0gWS3ftY9oH0EvBXoLgCwfK%2B3p5WOI1ATgbGa9Hu1CgCP6IHv1ASCYSIQXaCrAMDyvdEd2QMBBIoQeFgBYJtWAYAvBCrilHBMfwQ6BgCW7%2FXn3NFTBBD4mwLAj1oFgEv0wC8wQgCBFgJBALDlewcMcO7666FCAAEEfBG4RAHgl60CgD6r5PS%2FGhsCCHQpsOWWzm29tRbS1Eqas2aBhAACCPgkMFAB4IRWAeAwPTDUp9HQVwQQQAABBBAIJXCYAsCFrQLAnnrgb6GaoRICCCCAAAII%2BCSwpwLAza0CwBZ6YKRPo6GvCCCAAAIIIBBKYEsFAH0hyfyt4zoAa%2Bm%2BN0M1QyUEEEAAAQQQ8ElgLU36%2BmKSrgPA4rrblgNezKcR0VcEEEAAAQQQ6FZgrh5dUgHg8y4DgN2p5YDf0s0aQCKAAAIIIIBAZQTe1uT%2F1ebRLPQSQCMAPKlb%2B2pgNgQQQAABBBCohsBTmvA3axcAblGF3aoxXkaBAAIIIIAAAhK4VQFg93YB4CJVWLBSEGwIIIAAAggg4L3AxQoA%2F9MuANgqQb%2F1fqgMAAEEEEAAAQQCgRMVAE5tFwD%2BUxX%2BhBkCCCCAAAIIVEbgYAWAP7YLANupwgOVGTIDQQABBBBAAIEdFADubxcAeqrC61ghgAACCCCAQGUE1lUAWGhu7%2BpjgLYY0EwVu2VDAAEEEEAAAb8F5qj7X9aEP7vbKwD2oBYDspRgVwLYEEAAAQQQQMBvgfGa%2FDvN6Z2uADQCgL0HYDu%2Fx0vvEUAAAQQQQEACD2qy7zSntwoAV2iHA2FDAAEEEEAAAe8FrtRk32lObxUATtZwT%2FJ%2ByAwAAQQQQAABBE7RZG%2Fz%2BkJbqwBgScGuArAhgAACCCCAgN8C%2F6XJ%2Fk9hA8C%2FqeJwv8dL7xFAAAEEEEBAAtsrAHSa01tdAVhLO7wJGwIIIIAAAgh4L7COJvtOc3qrAGD3T1NZ1vthMwAEEEAAAQTqK%2FCJhr6cJnV9wn%2FhrcsAYFVU8yndbFJfM0aOAAIIIICA9wKjNNFv2tUougsA12iHfb0fOgNAAAEEEECgvgLXaqLfL2oAsI8BnlxfM0aOAAIIIICA9wInKwCcEjUA7KMdrvN%2B6AwAAQQQQACB%2BgrsqwDQ5Vze3UsA35TX6PqaMXIEEEAAAQS8F9hEE32Xc3l3AWBpDftjlUW9Hz4DQAABBBBAoH4C9s7%2FHprop0d6CcAqa8%2FxulmnfmaMGAEEEEAAAe8F3tTk33IOb3kFoBEA7tTtLt4TMAAEEEAAAQTqJ3CPJvmdWw27XQAYrB1%2FXT8zRowAAggggID3Amdqkj82bgD4qXa81nsCBoAAAggggED9BPZTAGg5h7e7AtBLXi%2FVz4wRI4AAAggg4L3ABprkX4x7BcA%2BATBVhe8E8P55wAAQQAABBGokMENjtU8AzIkVAGwnfRLgUd1sVSM0hooAAggggIDvAo9r8u927u72JYBGALhAt7%2FyXYL%2BI4AAAgggUCOBizTBdzt3hwkAhwjsDzVCY6gIIIAAAgj4LnCoJvhu5%2B4wAWAzKfyf7xL0HwEEEEAAgRoJbKEJvtu5O0wAWEpgU1SWrBEcQ0UAAQQQQMBXgVnq%2BAqa4Gd2N4C2AcB21hsBR%2Bhma18l6DcCCCCAAAI1EnhUk%2Ft32403bAA4XQ0d164xHkcAAQQQQACBwgXO0OT%2Bm3a9CBsAdlVDt7drjMcRQAABBBBAoHCBH2hyv61dL8IGgB5q6EOVxdo1yOMIIIAAAgggUJjAXB15ZU3u9t69brdQAcBa0PsARunmW%2B0a5HEEEEAAAQQQKEzgGU3s3wxz9CgB4Dw12CdMo9RBAAEEEEAAgUIEhmhiDzVXRwkAP9ZQri9kOBwUAQQQQAABBMII7K2JPdRcHSUArKIjv6PC%2BwDCnALqIIAAAgggkK%2BAvf6%2Fhib2d8McNnQAsMZYDyAMKXUQQAABBBAoROARTeqh1%2ByJGgCO0ZB%2BV8iwOCgCCCCAAAIIdCdwrCb1M8MSRQ0A66vhV8I2Tj0EEEAAAQQQyE3gXzWpvxz2aJECQONlgOd0%2B%2FWwB6AeAggggAACCGQu8Lwm9G9EOUqcAHCUDvD7KAehLgIIIIAAAghkKnC0JvSzohwhTgBYTQeYqLJElANRFwEEEEAAAQQyEfhcra6tCd0%2BqRd6ixwArGV9GuBm3ewe%2BihURAABBBBAAIGsBG7RZL5H1MbjBgC%2BHCiqNPURQAABBBDIRuD7mswjf2Ff3ABg%2B41W2TibsdAqAggggAACCIQQeFF1NtSkrIvz0bZYAcAOoSP9p27%2BFO1w1EYAAQQQQACBFAUO1ER%2BZZz2kgQAexPgqyrrxDkw%2ByCAAAIIIIBAIoFJ2ntdTeSz4rQSOwA0rgL01u2QOAdmHwQQQAABBBBIJHC4JvGhcVtIGgDsKsALKrZCIBsCCCCAAAII5CPwug5jK%2F%2FF%2BuvfupgoADSuAvxUt9fmM16OggACCCCAAAIS2FcT%2BHVJJNIIANbGEyqbJekI%2ByKAAAIIIIBAKIGnVGvzOO%2F8b249cQBoXAXYXLePqSwWqutUQgABBBBAAIE4AnO109aavG3OTbSlEgAaIcDeiHBYot6wMwIIIIAAAgh0JzBUE%2FfhaRClGQB6qEP2hsA10%2BgYbSCAAAIIIIDAQgJv67cNNHFPScMltQDQuAqwm25vSaNjtIEAAggggAACCwnsrkn71rRMUg0AjRBwkW5%2FmVYHaQcBBBBAAAEE3IWasFN9mT2LALCUTtRIlY04YQgggAACCCCQWMBeXrd3%2Fc9I3FJTA6kHgMZVAJv8H1f5cpqdpS0EEEAAAQRqJjBT4%2F22Jutn0x53JgGgEQJ%2BrNu%2FqmR2jLQxaA8BBBBAAIESCdg3%2FP1ck%2Bg1WfQp08lZPT9dnT4ui47TJgIIIIAAAhUXOF2T9ICsxph1AFhUHb9JxT4dwIYAAggggAAC4QTsE3V7aZK2hX8y2TINANZjXQVYWjd3qmyTyQhoFAEEEEAAgWoJ2HvodtIEPT3LYWUeABohYHnd3q%2BySZaDoW0EEEAAAQQ8F7A3%2B22nyfmjrMeRSwBohIDVdPuQSq%2BsB0X7CCCAAAIIeCgwVn3eRhPzu3n0PbcA0AgBq%2Bv2LhXWCMjj7HIMBBBAAAFfBF5UR3fWpDwxrw7nGgAaIWBF3d6mslVeg%2BQ4CCCAAAIIlFjgSfVtV03I7%2BfZx9wDQCMELKvbm1V2yHOwHAsBBBBAAIGSCdj74%2FbQZPxx3v0qJAA0QsDiuj1bJZWvNcwbjuMhgAACCCCQUOBS7d9bE%2FGshO3E2r2wABD0Vh8T%2FIV%2BHqqyRKwRsBMCCCCAAAJ%2BCcxRdwdoAj6jyG4XHgAaVwO21%2B3VKmsUicGxEUAAAQQQyFjgHbX%2FM02%2Bdum%2F0K0UAaARAlbR7R9VflioCAdHAAEEEEAgG4G71eyBmnjfzqb5aK2WJgA0QoD1p7eKXRbhmwSjnUtqI4AAAgiUU%2BBTdetYlaGa5OwLfkqxlSoABCLSWVc%2FX6iySymU6AQCCCCAAALxBGwBvEM12b4Ub%2Ffs9iplAGgKAj%2BxxKRiqwiyIYAAAggg4IuALeX7G5VLy%2FRXfzNeqQOAdVRXA2zhIPtKYfu44FK%2BnHn6iQACCCBQSwG73G9%2FuA7SBPthmQVKHwCargaspZ9PUDlYZbEyo9I3BBBAAIHaCdjX9t6o8mtNrK%2F7MHpvAkBTELAvEzpKZX%2BuCPjwFKOPCCCAQKUFPtPorlL5vSbUl30aqXcBoCkIfEU%2F91E5VGVln9DpKwIIIICA9wJ2ef8SlfM1kdpn%2B73bvA0ATUHgS%2FrZPi1gVwT2VLElhtkQQAABBBBIW8Au89sCPvYX%2Fw2aQGekfYA82%2FM%2BADRj6Q2Da%2Br3vVV2V9lahfcK5Pls4lgIIIBA9QRs2d5HVW5R%2Bd88v643a8pKBYAOYcBeFvi%2Byq4q26p8NWtM2kcAAQQQqISAXdIfoXKHyjBNlO9VYlQdBlHZANDxZOnqwPq6bxuV76psovJ1Fb6AqIrPasaEAAIIhBeYrapjVEarPGITvybGseF397dmbQJAF4HA3jvwDZVvNcKAfbrgn1V6qvDSgb%2FPaXqOAAIIdCVgl%2FInqNjkbuV5lVEqz2kitHfy126rbQBodaZ1pcCuCqytYssRb6iyQeNn%2B%2F2fVDCr3T8TBowAAh4J2Ap8rzXKC7q1v%2B7t95f0n%2FcnHo0j864ymUUgVjhYoREGbFEiCwn2psPgZ3uPgd3HlxhFMKUqAgggEEHAVtl7U%2BUtFftrflKjBD%2BP06Q2JUJ7ta5KAEj59Csk2JsPLRhYGLBwEASDVfWzFVu%2FwG6XSfnQNIcAAgj4KmAfp7M32tmb795v%2FGwTfTDBz%2FtZE5Y9xpaSAAEgJciozSgoLK19VlFZvREI7Gf70qMgIAS%2F2619H8LyUY9BfQQQQKAggWk6rl2Ktwn73caEbj9PbvweTPI24b%2Fn%2B%2BfpCzJOfFgCQGLCfBpQYFhUR7KXICwMBCXs78tpH3vTIxsCCCAQRsDeGf9xYxK3idwuq9ttULr7fYomFnvDHVvJBQgAJT9BaXVPAcICgAUBu5LQo%2FHzso1bCxL2mJXgPgsZwc%2F2vgb7fUkVu3Jh%2B%2FNJibRODu0gkFzg88aEbW9ys3e02wQ9s3Hf9MbEbbc2qdut%2FYVudZrvm9q4%2F%2BO6vis%2B%2BWnwqwUCgF%2FnqzS9VaCwJZctMNh7GSwYWIiwr2u2sGAhw%2B6zAGHFfrb7LDRYeAj2DW7tkxdWL7i1sBK0a4GDDQFfBey1bZuQbWKepWITrv11HdzahGyTt03I9ldzcGuTse1n9azYz3afTer2RjibvIN2p%2FEXt69Pj2L7TQAo1p%2BjhxBQ2AiuPASBwfayoGGBwzYLIsF3QNiVCtua6wbBJGrdIJTYfkG79nMQVJp7z1WREOcypSrBRNncXDCh2n16yix4J3gw2dr9weRpPwcTr%2F1sl7Vti1I3%2BIu7Vbsz%2BCs6pbNNM5kJEAAyo6XhOgs0hZZmBrtK0vxvrjmYWD17zOp0tdl7QMK8ETRsveBqjB0r%2BKuz3Smzv0Dty1DabfbXqU3CXW0dH2uelK1%2B8%2BQd7M9k2k6cxxGIIfD%2Fp0HZiDxafMoAAAAASUVORK5CYII%3D%22%2F%3E%20%3C%2Fpattern%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Clip%22%20class%3D%22cls-2%22%20transform%3D%22translate%28-970%20-3049%29%22%3E%20%3Cg%20id%3D%22Layer_169%22%20data-name%3D%22Layer%20169%22%20transform%3D%22translate%28985%203074%29%22%3E%20%3Crect%20id%3D%22Layer_169-2%22%20data-name%3D%22Layer%20169%22%20class%3D%22cls-3%22%20width%3D%2271%22%20height%3D%2250%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);
    background-color: #fff
}

.modal--file .modal--close,
.wz-nav__quick [class*='wz-nav__quick--'],
.sub-promotion .slider__controls__button,
.side-promotion .slider__paging__item,
.footer .copyright .ci,
.main-promotion .slider__controls__button,
.main__latest-shop .shop-items__slider .slider__controls__button,
.board-search__button,
.board-view--banner {
    font-size: 0;
    text-indent: -9999em
}

.wz-nav--download,
.wz-gnb__link,
.sub-promotion .slider__link,
.footer-menu .link,
.main-promotion .slider__link,
.main-promotion .slider__paging__item,
.main__latest-shop .shop-items__slider .slider-cycle__list .thumb,
.main__info .guide__item,
.board-category__link,
.board-list--null,
.board-sites--null,
.board-write-file .board-write--file .text,
.board-write-file .board-write--search .text,
.download .btn-download .text {
    vertical-align: middle
}

.wz-nav--download:before,
.wz-gnb__link:before,
.sub-promotion .slider__link:before,
.footer-menu .link:before,
.main-promotion .slider__link:before,
.main-promotion .slider__paging__item:before,
.main__latest-shop .shop-items__slider .slider-cycle__list .thumb:before,
.main__info .guide__item:before,
.board-category__link:before,
.board-list--null:before,
.board-sites--null:before,
.board-write-file .board-write--file .text:before,
.board-write-file .board-write--search .text:before,
.download .btn-download .text:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%
}

@media (max-width: 768px) {
    #nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        z-index: 1000;
        display: none;
        /* Initially hidden */
        flex-direction: column;
        padding: 10px;
    }

    #nav.active {
        display: flex;
        /* Show when active */
    }

    .wz-gnb__list {
        flex-direction: column;
        align-items: flex-start;
    }

    .wz-gnb__link {
        display: block;
        padding: 10px;
        color: white;
        text-decoration: none;
    }

    .wz-gnb__link.active {
        background-color: #555;
    }

    #mobile-toggle {
        display: block;
        position: fixed;
        top: 10px;
        right: 10px;
        background-color: #333;
        color: white;
        border: none;
        padding: 10px;
        z-index: 1100;
    }
}

@media (max-width: 768px) {
    #container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #222;
        z-index: 1000;
        display: none;
        /* Hidden initially */
    }

    #container.active {
        display: block;
    }

    .global-header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .text-login,
    .text-register {
        margin: 10px 0;
        color: white;
    }
}

/* Mobile Menu Button */
.mobile-menu-toggle {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 5px;
    left: 5px;
    background-color: #333;
    color: white;
    border: none;
    font-size: 1.5rem;
    padding: 10px;
    z-index: 10010;
    cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.mobile-menu.active {
    display: flex;
    /* Show when toggled */
}

.mobile-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.mobile-menu__item {
    margin: 15px 0;
}

.mobile-menu__item a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 10px 20px;
    display: block;
}

.mobile-menu__item a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* Show Mobile Button on Small Screens */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
}

.side-promotion {
    width: 186px;
    height: 346px;
    overflow: hidden;
    position: fixed;
    /*top: 57%;*/
    bottom: 30%;
    right: 20px;
    margin-left: 680px;
    z-index: 6;
    margin-top: 50px;
    margin-bottom: 50px;
    background: url("../images/bg_side_banner_default.png") 50% 100% no-repeat;
    z-index: 505;
}

#slideSidePromotion {
    display: none;
    position: fixed;
    top: 75%px;
    right: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease !important;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

#slideSidePromotion.show {
    display: block;
    animation: slideInFromRight 0.3s ease forwards;
}

.side-promotion .wz-nav__quick {
    width: 130px;
    position: absolute;
    bottom: -7px;
    left: 50%;
    margin-left: -64px;
    z-index: 1
}

.side-promotion .wz-nav__quick [class*='wz-nav__quick--'] {
    transform: scale(0.5);
    margin: 0 -23px
}

.side-promotion__info {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 195px 20px 110px;
    height: 100%;
    text-align: center;
    background: url("../images/bg_side_banner.png") 50% 100% no-repeat
}

.side-promotion__info:before,
.side-promotion__info:after {
    content: '';
    display: block;
    width: 4px;
    height: 304px;
    background: #000;
    position: absolute
}

.side-promotion__info:before {
    top: 0;
    right: 0
}

.side-promotion__info:after {
    bottom: 0;
    left: 0
}

.side-promotion__title {
    line-height: 1.5;
    font-size: 14px;
    font-style: italic;
    color: #fff;
    max-width: 100%;
    width: 100%;
    align-self: flex-end;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    max-height: 40px;
    overflow: hidden
}

.side-promotion__banner {
    position: absolute;
    top: 0;
    left: 0
}

.side-promotion .slider__item:before,
.side-promotion .slider__item:after {
    content: '';
    display: block;
    width: 144px;
    height: 4px;
    background: #000;
    position: absolute;
    z-index: 11
}

.side-promotion .slider__item:before {
    top: 0;
    right: 0
}

.side-promotion .slider__item:after {
    bottom: 0;
    left: 0
}

.side-promotion .slider__link {
    overflow: hidden;
    max-width: 100%
}

.side-promotion .slider__link:before,
.side-promotion .slider__link:after {
    content: '';
    display: block;
    width: 65px;
    height: 42px;
    border-color: #000;
    border-style: solid;
    transform: rotate(-45deg);
    position: absolute;
    z-index: 1
}

.side-promotion .slider__link:before {
    border-bottom-width: 4px;
    top: -12px;
    left: -25px
}

.side-promotion .slider__link:after {
    border-top-width: 4px;
    bottom: -12px;
    right: -25px
}

.side-promotion .slider__paging {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 80px;
    left: 0;
    z-index: 2
}

.side-promotion .slider__paging__item {
    display: inline-block;
    vertical-align: top;
    width: 11px;
    height: 11px;
    margin: 0 5px;
    cursor: default;
    background-color: #d5d5d5;
    border-radius: 50%
}

.side-promotion .slider__paging__item.selected {
    background-color: #d76440
}

.slider-dots {
    text-align: center;
    margin-top: 10px;
}

.slider-dots button {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn1-default {
    background-color: #efefef;
    color: #999;
}

.btn1-point {
    background-color: #d76440;
    color: #fff;
}

.slider-dots button.selected {
    background-color: #d76440;
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.slider__list {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 1
}

.slider__item {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.slider__item.selected {
    display: block
}

.slider__link {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto
}

.slider-cycle {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.slider-cycle__list {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.slider-cycle__item {
    float: left
}


[class*='btn-'] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 13px 40px;
    text-align: center;
    border-radius: 5px;
    font-style: italic
}

[class*='btn-']:disabled {
    pointer-events: none
}

[class*='btn-']:disabled .text {
    opacity: .2
}

[class*='btn-'] .text {
    display: block;
    font-size: 22px;
    transition: transform .3s ease
}

[class*='btn-']:hover .text {
    transform: scale(1.1)
}

[class*='btn-']:hover .hover {
    opacity: 1
}

[class*='btn-'] .hover {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 40px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    opacity: 0;
    background-color: inherit;
    border-radius: inherit;
    transition: opacity .3s ease
}

#loading {
    background-image: url(../images/l_bg.png);
    border-radius: 0 0 4px 4px;
    color: #fff;
    display: none;
    position: fixed !important;
    top: 0% !important;
    right: 48% !important;
    z-index: 10100;
    font-size: smaller;
}

/* Adjust for mobile devices */
@media screen and (max-width: 768px) {
    #loading {
        top: 0% !important;
        right: 0% !important;
        width: 150px;
        height: 40px;
        line-height: 40px;
        font-size: 0.9em;
    }
}

@media screen and (max-width: 480px) {
    #loading {
        top: 0% !important;
        right: 0% !important;
        width: 120px;
        height: 35px;
        line-height: 35px;
        font-size: 0.8em;
    }
}

/* General Styling for the Character Info Section */
.character-info {
    color: #ffffff;
    background-color: #2a2a2a;
    /* Dark background for a sleek, modern gaming feel */
    position: relative;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #333;
}

/* Title Styling */
.character-info h5 {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #54a3a3;
    /* Gold color for title to give a premium feel */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Shadow for effect */
}

/* Character Stats Section */
.character-info ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Character Stats Row */
.character-info ul li {
    background-color: #1c1c1c;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    color: #d1d1d1;
    border-left: 5px solid transparent;
    /* Add left border for visual appeal */
    transition: all 0.3s ease-in-out;
    /* Smooth hover effect */
}

.character-info ul li:nth-child(even) {
    background-color: #2c2c2c;
    /* Slightly lighter background for even rows */
}

/* Hover Effect */
.character-info ul li:hover {
    background-color: #444444;
    /* Darker background when hovering */
    cursor: pointer;
    border-left: 5px solid #8A7DFA;
    /* Highlight character stat on hover with accent color */
}

/* Character Stat Name Styling */
.character-info ul li .stat-name {
    font-weight: bold;
    color: #8A7DFA;
    /* Accent color for stat name */
    font-size: 1.1rem;
}

/* Character Stat Value Styling */
.character-info ul li .stat-value {
    font-weight: normal;
    color: #ffffff;
    /* White color for stat values */
    font-size: 1.2rem;
}

.character-inventory {
    margin-top: 30px;
    padding: 20px;
    background-color: #3b3b3b;
    /* Dark grey for the background */
    border-radius: 8px;
    border: 1px solid #444;
}

.character-inventory h5 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: #8A7DFA;
    /* Use your accent color */
    font-weight: 600;
}

.character-inventory ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.character-inventory ul li {
    background-color: #1c1c1c;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    color: #d1d1d1;
    border-left: 5px solid transparent;
    /* Add left border for visual appeal */
    transition: all 0.3s ease-in-out;
    /* Smooth hover effect */
}

.character-inventory ul li:nth-child(even) {
    background-color: #2c2c2c;
    /* Slightly lighter background for even rows */
}

/* Hover Effect */
.character-inventory ul li:hover {
    background-color: #444444;
    /* Darker background when hovering */
    cursor: pointer;
    border-left: 5px solid #8A7DFA;
    /* Highlight member on hover with accent color */
}

.character-inventory ul li .amount {
    font-weight: bold;
    color: #8A7DFA;
    /* Accent color for position */
    font-size: 1.1rem;
}

.character-inventory ul li .name {
    flex-grow: 1;
    text-align: left;
    font-weight: normal;
    font-size: 1.2rem;
}

/* General Styling for the Guild Info Section */
.guild-info {
    color: #ffffff;
    background-color: #2a2a2a;
    /* Dark background for a sleek, modern gaming feel */
    position: relative;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #333;
}

/* Title Styling */
.guild-info h5 {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #54a3a3;
    /* Gold color for title to give a premium feel */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Shadow for effect */
}

/* Character Stats Section */
.guild-info ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Character Stats Row */
.guild-info ul li {
    background-color: #1c1c1c;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    color: #d1d1d1;
    border-left: 5px solid transparent;
    /* Add left border for visual appeal */
    transition: all 0.3s ease-in-out;
    /* Smooth hover effect */
}

.guild-info ul li:nth-child(even) {
    background-color: #2c2c2c;
    /* Slightly lighter background for even rows */
}

/* Hover Effect */
.guild-info ul li:hover {
    background-color: #444444;
    /* Darker background when hovering */
    cursor: pointer;
    border-left: 5px solid #8A7DFA;
    /* Highlight character stat on hover with accent color */
}

/* Character Stat Name Styling */
.guild-info ul li .stat-name {
    font-weight: bold;
    color: #8A7DFA;
    /* Accent color for stat name */
    font-size: 1.1rem;
}

/* Character Stat Value Styling */
.guild-info ul li .stat-value {
    font-weight: normal;
    color: #ffffff;
    /* White color for stat values */
    font-size: 1.2rem;
}

/* Guild Members Section */
.guild-members {
    margin-top: 30px;
    padding: 20px;
    background-color: #3b3b3b;
    /* Dark grey for the background */
    border-radius: 8px;
    border: 1px solid #444;
}

.guild-members h5 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: #8A7DFA;
    /* Use your accent color */
    font-weight: 600;
}

/* Member List Style */
.guild-members ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Each Member Row */
.guild-members ul li {
    background-color: #1c1c1c;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    color: #d1d1d1;
    border-left: 5px solid transparent;
    /* Add left border for visual appeal */
    transition: all 0.3s ease-in-out;
    /* Smooth hover effect */
}

.guild-members ul li:nth-child(even) {
    background-color: #2c2c2c;
    /* Slightly lighter background for even rows */
}

/* Hover Effect */
.guild-members ul li:hover {
    background-color: #444444;
    /* Darker background when hovering */
    cursor: pointer;
    border-left: 5px solid #8A7DFA;
    /* Highlight member on hover with accent color */
}

/* Member Position Styling */
.guild-members ul li .position {
    font-weight: bold;
    color: #8A7DFA;
    /* Accent color for position */
    font-size: 1.1rem;
}

/* Position Specific Styling */
.guild-members ul li .position-owner {
    color: #FF6347;
    /* Owner: Red (Tomato) color */
}

.guild-members ul li .position-manager {
    color: #FFD700;
    /* Manager: Gold color */
}

.guild-members ul li .position-member {
    color: #8A7DFA;
    /* Member: Purple color */
}

/* Member Name Styling */
.guild-members ul li .name {
    flex-grow: 1;
    text-align: left;
    font-weight: normal;
    font-size: 1.2rem;
}