@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Black';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-family: Pretendard-black;
    font-style: normal;
}

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll !important;
}

html::-webkit-scrollbar {
    width: 0;
}

html::-webkit-scrollbar-thumb {
    width: 0;
}

div::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
    background-color: #08090b;
}

div::-webkit-scrollbar-thumb {
    width: 8px;
    border-radius: 4px;
    border: solid 1px #08090b;
    background-color: #3a3f49;
}

body {
    height: 100%;
    padding-right: 0 !important;
    text-align: center;
    background-color: var(--bg-01);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    font-family: "Noto Sans KR", sans-serif;
}

body.active {
    overflow: hidden;
}

button, a, input, select, textarea {
    outline: none !important;
    transition: 0.3s;
}

button { padding: 0; white-space: nowrap; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { color: var(--text-gray); text-decoration: none; position:relative; }

a:hover { color: #ffffff; text-decoration: none; }

a.w-hover:before {
    content: '';
    width: 0;
    height: 1px;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: 0 auto;
    background-color: var(--secondary);
    position: absolute;
    transition: 0.3s;
}

a.w-hover:hover:before {
    width: 100%;
}

img { pointer-events: none; }

tr { cursor: pointer; }

.bs-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: #999999;
}

.bs-checkbox:hover {
    color: #ffffff;
}

.bs-checkbox .checkbox {
    width: 16px;
    height: 16px;
    background-color: rgba(0, 102, 255, 0.15);
    border: solid 1px var(--primary);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-radius: 50%;
    transition: 0.3s;
    margin-right: 5px;
    cursor: pointer;
}

.bs-checkbox .checkbox:hover {
    background-color: rgba(210, 89, 22, 0.25);
}

.bs-checkbox.active .checkbox {
    background-color: var(--secondary);
    background-image: url(../img/icon/check.svg);
}

.d-border { 
    width: 100%;
    height: 1px;
    border-top: solid 1px rgba(255, 255, 255, 0.1); 
    margin: 5px 0;
}

.w-b, .w-a, .w-ba {
    position: relative;
    z-index: 1;
}

.w-b:before, 
.w-a:after,
.w-ba:before, 
.w-ba:after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: 0.3s;
}

.noto--ice {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23fff' d='M63.03 5.38L16.79 20.85l-6.58 3.79l-.83 24.84l5.95 43.37l30.91 16.7l19.7 7.1l14.53-5.95l34.17-15.67s3.34-.27 1.78-5.38s.42-53.34.42-53.34l.18-11.58s-.02-2.73-9.07-4.71S63.03 5.38 63.03 5.38' opacity='0.5'/%3E%3Cpath fill='%237ec8ee' d='m9.31 25.82l54.45 24.9l52.26-23.8s.27 63.47-.55 63.75c-.41.14-51.16-19.7-51.16-19.7l-49.79 19.7l-4.93-54.73z' opacity='0.7'/%3E%3Cpath fill='%2363abde' d='m65.95 116.65l-25.45-9.3l-25.17-14.5l-.82-2.19l47.88-21.62l53.08 21.62l-.82 4.38l-21.61 10.39z' opacity='0.7'/%3E%3Cpath fill='%23b0e4ff' d='M62.94 5.02L15.33 21.16l-6.02 4.66l8.21 3.83L61.57 48.8l3.56-.55l50.89-24.35z' opacity='0.7'/%3E%3Cpath fill='%2337b4e2' d='M116.84 89.59c-1.5-1.5-31.75-13.7-37.53-16.24s-8.33-4.16-9.37-6.71s-3.12-45.8-3.12-48.57s-.33-10.85-3.46-10.86c-2.57-.01-3.12 7.34-3.12 11.19s-1.03 44.81-1.98 48.35c-1.16 4.36-12.04 7.97-21.39 12.37c-9.36 4.4-21.84 7.83-22.36 11.53c-.51 3.7 2.06 4.62 6.83 7.92c1.95 1.35 8.17 4.83 15.41 8.42c10.49 5.2 23.16 10.42 28.38 10.51c7.35.13 18.19-5.83 29.67-11.2c11.27-5.27 21.34-9.5 22.15-11.46c1.25-3.01 1.4-3.75-.11-5.25m-22.96 12.67c-7.5 3.42-24.98 11.1-29.03 11.45s-18.52-6.52-24.98-9.6c-7.29-3.47-21.39-10.76-20.59-12.61c.81-1.85 9.6-4.86 21.74-9.83s23.01-9.14 23.01-9.14s7.52 2.68 20.7 8.33C97.68 86.41 112.83 93 112.83 93s-9.81 5.09-18.95 9.26'/%3E%3Cpath fill='%2358c4fd' d='M63.56 3.92c-4.11-.57-12.68 3.86-24.4 7.86c-12.51 4.27-23.06 7.12-26.74 8.96c-3.03 1.52-4.55 4-4.69 7.31c-.13 3.3-.41 12.67 2.07 36.65c.76 7.3 3.53 25.86 3.89 27.17c1.85 6.73 4.93 1.91 4.24-3.33c-.49-3.7-2.07-12.13-3.45-26.33s-2.76-32.11-1.52-35.15s9.19-5.38 14.75-7.03c17.23-5.1 32.53-11.85 35.84-11.85s25.77 8.13 29.5 9.51c3.72 1.38 19.71 5.93 20.54 8.13s.14 58.58.28 61.61s-.65 6.83 1.59 7.24c2.25.4 2.82-3.38 2.82-6s-.14-27.7.14-39.14s2.07-22.6-1.1-26.6s-12.96-6.06-29.22-11.72C77.96 7.7 67.55 4.47 63.56 3.92'/%3E%3CradialGradient id='notoIce0' cx='61.845' cy='58.67' r='46.169' gradientTransform='matrix(-.7728 .6347 -.8463 -1.0304 159.288 79.872)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%23fcfcfc' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath fill='url(%23notoIce0)' d='m15.32 29.69l47.96 21.92l2.48 61.2l-5.36 1.23l-36.54-16.26l-8.53-4.93l-5.74-56.91l1.31-8.31z'/%3E%3CradialGradient id='notoIce1' cx='69.465' cy='53.845' r='54.634' gradientTransform='matrix(.8254 .5645 -.6684 .9774 48.117 -37.996)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.152' stop-color='%2332afe0' stop-opacity='0.9'/%3E%3Cstop offset='.963' stop-color='%2332afe0' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath fill='url(%23notoIce1)' d='m64.52 51.89l.97 63.54l43.41-17.51l6.48-4.55l-.37-5.52l2.02-63.12l-6.61 1.66z'/%3E%3CradialGradient id='notoIce2' cx='63.646' cy='49.481' r='47.148' gradientTransform='matrix(-.002 -1 2.0491 -.0041 -37.616 113.33)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.256' stop-color='%2367ccf9' stop-opacity='0.9'/%3E%3Cstop offset='.416' stop-color='%236ccdf9' stop-opacity='0.674'/%3E%3Cstop offset='.616' stop-color='%237cd1f9' stop-opacity='0.392'/%3E%3Cstop offset='.837' stop-color='%2395d8f9' stop-opacity='0.081'/%3E%3Cstop offset='.895' stop-color='%239ddaf9' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath fill='url(%23notoIce2)' d='m15.87 31.2l25.91 11.85l21.71 8.75l51.07-25.7l1.18-1.11L62.67 6.11L13.8 21.96l-4.96 3.59l.14 3.17z'/%3E%3Cpath fill='%2337b5e1' d='M7.81 102.12c.91 2.5 3.8 5.52 9.68 6.45c4.86.77 7.96-.11 10.3-1.49c2.12-1.25 2.74-4.09 2.65-5.39c-.12-1.63-1.83-4.04-3.8-5.05c-1.98-1.02-19.46 3.76-18.83 5.48'/%3E%3Cpath fill='%23b0e3fd' d='M12 93.94c-3.24 1.88-6.55 6.11-3.61 9.05s13.82 3.71 18-.1c4.19-3.8-.77-7.89-4.14-9.39s-6.93-1.49-10.25.44'/%3E%3Cpath fill='%23fdfefe' d='M10.94 97.31c-1.22.08-3.09 2.86-.14 4.91c3.66 2.55 8.76 1.01 8.42-.53s-3.9-1.44-5.34-2.26c-1.45-.82-1.55-2.22-2.94-2.12'/%3E%3Cpath fill='%2337b5e1' d='M28.71 118.38c-1.01 2.27.05 4.89 4.66 6.03c7.22 1.78 11.83-.8 13.37-2.29s1.73-3.85.91-4.62c-.82-.76-18.94.88-18.94.88'/%3E%3Cpath fill='%23b0e4ff' d='M37.46 113.82c-5.82.3-8.46 3.15-8.7 4.5s2.58 3.95 8.99 3.64c8.71-.42 10.11-4.19 10.11-4.19s-2.07-4.38-10.4-3.95'/%3E%3Cpath fill='%23fff' d='M35.78 116.32c-1.22-.79-3.03-.29-4.14.48c-.89.62-1.34 2.07-.72 2.84c1.01 1.25 3.03.87 4.24.1c1.19-.77 1.96-2.55.62-3.42m-9.37-94.57c-1.74-2.56-8.72.22-11.4 1.69s-4.25 3.33-3.98 5.4s3.76 3.11 7.58 4.8s32.87 14.9 35.06 16.08c3.12 1.69 6.47 3.86 7.47 10.41c.65 4.31 2.44 45.69 2.51 47.11c.16 3.36-.13 8.23 1.9 8.15c1.78-.07 1.42-4.5 1.37-8.21s.31-44.05.32-46.78c.02-3.41 1.12-7.25 3.41-9.27s6.64-4.58 11.8-7.21c6.18-3.14 19.97-9.92 25.2-12.26s8.23-3.05 8.23-5.62s-11.89-6.11-13.3-6.22c-1.42-.11-2.94.38-2.62 2.13c.33 1.74 1.66 4.71-1.01 7.05s-8.45 5.52-11.75 7.18c-5.69 2.85-19.41 10.09-24.1 9.76s-7.63-1.15-14.67-4.09c-7.03-2.94-15.49-7.2-19.63-9.43c-2.94-1.59-4.96-3.93-4.8-6.38c.18-2.44 3.92-2.08 2.41-4.29m17.34-5.89c.67 1.73 6.71-.05 9.6-.93c2.89-.87 7.85-2.45 10.8-2.62c2.94-.16 12.81 2.84 15.32 3.33s4.69.6 5.23-.27s-3-2.78-7.96-4.47S66 6.54 63.54 6.86c-2.54.34-7.99 2.83-12.32 4.36c-2.62.93-8.29 2.51-7.47 4.64'/%3E%3C/svg%3E");
}

:root {
    --bg-01: #000000;
    --bg-02: #080808;
    --bg-03: #111111;
    --bg-04: #1a1a1a;
    --bg-05: #1c2331;
    --bg-06: #07162d;

    --primary: #0057c3;
    --secondary: #e6ac12;

    --text-prime: #2e8aff;
    --text-gray: #8a949f;
    --text-secondary: #ffc827;
    --text-green: #3dff79;
    --text-purple: #824eff;
}

.text-prime { color: var(--text-prime) !important; }

.text-secondary { color: var(--text-secondary) !important; }

.text-green { color: var(--text-green) !important; }

.text-purple { color: var(--text-purple) !important; }

.text-red { color: #ff3535 !important; }

.text-gray { color: var(--text-gray) !important; }

.text-gray-d { color: #777777 !important; }

.text-trans { color: rgba(255, 255, 255, 0.5) !important; }


.text-orange-2 { color: #ff5924 !important; }

.font-bold { font-weight: 700 !important; }

.font-black { font-weight: 900 !important; }

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

.text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#ffda3c, #ff9300, #ff3820, #b21d00);
    background-size: 100% 100%;
}

.text-gradient-2 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#fdff54, #fdff54, #ff9000, #ff9000);
    background-size: 100% 100%;
}

.dflex-ac-jc {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dflex-ac-js {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.dflex-ac-je {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.dflex-ae-jc {
    display: flex !important;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: center;
    flex-wrap: wrap;
}

.dflex-as-jc {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.dflex-acs-jc {
    display: flex !important;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.min-h-auto {
    min-height: auto !important;
}

.table-layout-fixed {
    table-layout: fixed;
}

.bs-ul,
.bs-ul-df {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    display: table;
    padding: 0;
}

.bs-ul-df {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.bs-ul li,
.bs-ul-df li {
    list-style: none;
    width: auto;
    height: auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
    font-size: 16px;
}

.bs-ul-df li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.easy-ticker ul {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    padding: 0;
    position: relative !important;
}

.easy-ticker ul li {
    list-style: none;
    width: auto;
    height: auto;
    position: relative;
    display: block;
    white-space: nowrap;
    cursor: pointer;
}

.container {
    position: relative;
    max-width: 1530px;
}

@media (min-width: 1560px) {
    .container {
        max-width: 1530px;
    }
}


/* Button Styles */

.btn-prime, .btn-second, .btn-gray, .btn-yellow, .btn-red, .btn-green {
    color: #ffffff;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    position: relative;
    z-index: 1;
    background-color: #FF4E00;
    overflow: hidden;
}

.btn-prime {
    background-color: var(--primary);
}

.btn-second {
    background-color: #e5a912;
    background-image: none;
    color: #000000;
}

.btn-green {
    background-color: #07ab3a;
}

.btn-gray {
    background-color: #333333;
}

.btn-red {
    background-color: #3b170f;
    border: solid 1px #7d2b20;
}

.btn-yellow {
    background-color: #392a05;
    border: solid 1px #715313;
}

.btn-lg {
    width: 100%;
    max-width: 300px !important;
    min-height: 48px;
}

.btn-xl {
    width: 100%;
    max-width: 400px !important;
    min-height: 48px;
}

@media(min-width: 1024px){
    .btn-prime:hover {
        background-color: #018aff;
    }

    .btn-second:hover {
        color: #000000;
        background-color: #ffe428;
    }

    .btn-gray:hover {
        background-color: #555555;
    }

    .btn-red:hover {
        background-color: #a31d00;
        border-color: #ff4f2a;
    }

    .btn-yellow:hover {
        background-color: #b98700;
        border-color: #ffd053;
    }

    .btn-green:hover {
        background-color: #006f22;
    }
}


/* Wrapper */

.wrapper {
    width: 100%;
    min-height: 100%;
    min-width: 360px;
    position: relative;
    overflow: hidden;
    padding: 130px 0 0;
    transition: 0.3s;
}

.logo {
    width: 223px;
    margin-left: 45px;
    position: relative;
    display: inline-block;
}

.logo img, .logo div {
    position: absolute;
    bottom: 0;
}

.logo .logo-img {
    width: 100%;
    position: relative;
    opacity: 0;
}

.logo div .d-img {
    width: 100%;
    position: relative;
}

.logo .icon {
    width: 24.67%;
    left: 0;
    transform-origin: bottom right;
    animation: lgIcon 8s ease infinite;
}

@keyframes lgIcon {
    0% {
        opacity: 0;
        transform: translateX(50%) rotate(0deg);
    }
    10% {
        opacity: 1.0;
        transform: translateX(0) rotate(0deg);
    }
    20% {
        opacity: 1.0;
        transform: translateX(0) rotate(10deg);
    }
    25% {
        opacity: 1.0;
        transform: translateX(0) rotate(0deg);
    }
    95% {
        opacity: 1.0;
        transform: translateX(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
}

.logo .text-01 {
    width: 16.15%;
    left: 26%;
    animation: lgText01 8s ease infinite;
}

@keyframes lgText01 {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    8% {
        opacity: 0;
        transform: translateY(-50%);
    }
    18% {
        opacity: 1.0;
        transform: translateY(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .text-02 {
    width: 15.7%;
    left: 42%;
    animation: lgText02 8s ease infinite;
}

@keyframes lgText02 {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    10% {
        opacity: 0;
        transform: translateY(-50%);
    }
    20% {
        opacity: 1.0;
        transform: translateY(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .text-03 {
    width: 15.7%;
    right: 26.25%;
    animation: lgText03 8s ease infinite;
}

@keyframes lgText03 {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    12% {
        opacity: 0;
        transform: translateY(-50%);
    }
    22% {
        opacity: 1.0;
        transform: translateY(0);
    }
    95% {
        opacity: 1.0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.logo .tv {
    width: 27.8%;
    right: 0;
    overflow: hidden;
}

.logo .tv .d-img {
    animation: lgTv 8s ease infinite;
}

@keyframes lgTv {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    16% {
        opacity: 0;
        transform: translateX(-100%);
    }
    26% {
        opacity: 1.0;
        transform: translateX(0);
    }
    95% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}


/* Header Section */

.header-section {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
}

.header-section .container-fluid {
    max-width: 1920px;
    margin: 0 auto;
}

.header-top {
    width: 100%;
    height: 70px;
    background-color: var(--bg-02);
}


/* Before After Login */

.bal-container button {
    height: 40px;
    min-width: 120px;
    margin: 0 0 0 5px;
}

.al-header {
    margin-left: 20px;
}

.bal-container .al-header li {
    padding: 0 15px;
    border-right:dashed 1px #2f363a;
}

.bal-container .al-header li:last-child {
    border-right: none;
}

.al-header .lvl-img {
    margin-right: 5px;
}

.al-header .labels {
    margin-right: 5px;
}

.mob-tog-btn {
    width: initial;
    height: 42px;
    background-color: transparent;
    border: none;
    color: #999999;
    font-size: 28px;
    margin: 0 0 0 15px;
    padding: 2px 0 0;
}

.mob-tog-btn i {
    transition: 0.3s;
    display: inline-block;
}

.mob-tog-btn .cl-icon {
    position: absolute;
    transform: rotate(-180deg);
    opacity: 0;
}

.mob-tog-btn.opened .cl-icon {
    transform: rotate(0deg);
    opacity: 1.0;
}

.mob-tog-btn.opened .norm-icon {
    transform: rotate(180deg);
    opacity: 0;
}

.header-bal {
    width: 100%;
    height: 40px;
    background-color: var(--bg-04);
}

.header-bal .before-login {
    padding: 0 2px;
}

.header-bal .before-login button {
    width: calc(50% - 4px);
    height: 32px;
    font-size: 14px;
    margin: 0 2px;
    border-radius: 5px;
}

.header-bal .before-login .btn-gray {
    background-color: #555555;
}

.header-bal .after-login,
.header-bal .after-login ul {
    width: 100%;
    height: 100%;
}

.header-bal .after-login ul li {
    width: 50%;
    height: 100%;
    position: relative;
}

.header-bal .after-login ul li:before {
    content: '';
    width: 1px;
    height: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    position: absolute;
    background-color: #343b41;
}

.header-bal .after-login ul li:last-child:before {
    display: none;
}

.header-bal .after-login ul li .lvl-img {
    max-width: 18px;
    position: relative;
    top: 1px;
    margin-right: 5px;
}

.header-bal .after-login ul li .labels {
    margin: 0 8px 0 0;
}


/* Header Main */

.header-menu {
    width: 100%;
    height: 60px;
    background-color: var(--bg-03);
}

.main-menu {
    width: 100%;
}

.main-menu ul {
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.main-menu ul li {
    width: 100%;
}

.main-menu ul li .link-a {
    height: 100%;
    color: #999999;
    font-size: 16px;
    z-index: 5;
    flex-wrap: nowrap;
}

.main-menu ul li .link-a:hover {
    color: #ffffff;
}

.main-menu ul li .link-a i {
    font-size: 18px;
    margin-right: 5px;
    text-shadow: none;
}


/* Depth Dropdown */

.depth-btn {
    cursor: pointer;
    position: relative;
}

.depth-btn .link-a.highlight {
    color: #ffffff;
}

.depth-btn .link-a:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    background-image: linear-gradient(to right, rgba(4, 46, 144, 0), rgba(4, 46, 144, 0.25), rgba(4, 46, 144, 0));
}

.depth-btn .highlight:before {
    opacity: 1.0;
}

.depth-btn .link-a .icon-img {
    max-height: 20px;
    margin: 0 8px 0 0;
}

.depth-btn .link-a .d-arrow {
    font-size: 24px;
    transition: 0.3s;
    margin: 2px 0 0 5px;
}

.depth-btn .highlight .d-arrow {
    color: var(--primary);
}

.drop-d {
    width: 220px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    transition: 0.3s;
    z-index: 1;
}

.drop-d.size-lg {
    width: 400px;
}

.drop-d.active {
    pointer-events: auto;
}

.drop-d .drop-d-inner {
    width: 100%;
    float: left;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.8);
    filter: saturate(1.8);
    border-radius: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px 0px;
    padding: 5px 10px;
    margin-top: 20px;
    opacity: 0;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.drop-d.active .drop-d-inner {
    margin-top: 40px;
    opacity: 1;
}

.drop-d .depth-a {
    width: 100%;
    height: 56px;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    text-decoration: none;
    transition: 0.3s;
    overflow: hidden;
    z-index: 1;
    color: #999999;
    background-color: rgba(0, 0, 0, 0.04);
    padding: 0 5px;
}

.drop-d .depth-a:last-child {
    border-bottom: none;
}

.drop-d .depth-a:first-child {
    border-radius: 8px 8px 0 0;
}

.drop-d .depth-a:last-child {
    border-radius: 0 0 8px 8px;
}

.drop-d .depth-a .icon-panel {
    width: 46px;
    height: 46px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 20px;
    transition: 0.3s;
}

.drop-d .depth-a .icon-panel img {
    max-width: 24px;
    max-height: 24px;
}

.drop-d .depth-a .icon-panel img.size-sm {
    max-width: 32px;
    max-height: 32px;
}

.drop-d .depth-a .text {
    width: calc(100% - 56px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

@media(min-width: 1025px){
    .depth-btn:hover .link-a {
        color: #ffffff;
    }

    .main-menu ul li.highlight .link-a:hover {
        background-color: #2a2a2a;
    }

    .depth-btn:hover .link-a .d-arrow {
        color: var(--secondary);
    }

    .drop-d .depth-a:hover {
        color: #ffffff;
    }

    .drop-d .depth-a:hover .icon-panel {
        background-color: var(--primary);
        color: #ffffff;
    }
}


/* Page Content */

.page-content {
    width: 100%;
    max-width: 1920px;
    padding: 10px 0;
    margin: 0 auto;
}

.page-content .container {
    align-items: stretch;
    max-width: 100%;
}


/* Page Sidebar */

.page-sidebar {
    width: 320px;
    height: 100%;
    position: absolute;
    top: 0;
}

.page-sidebar.left {
    left: 15px;
}

.page-sidebar.right {
    right: 15px;
}

.page-sidebar .sidebar-wrap {
    width: 320px;
    height: calc(100% - 140px);
    position: fixed;
    top: 140px;
    padding-bottom: 30px;
    z-index: 20;
    overflow-y: scroll;
    scroll-margin-top: 0;
}

.page-sidebar .sidebar-wrap::-webkit-scrollbar {
    width: 0;
}

.page-sidebar .sidebar-wrap::-webkit-scrollbar-thumb {
    width: 0;
}

.page-sidebar.active-b .sidebar-wrap {
    align-items: flex-end;
    align-content: flex-end;
    overflow-y: visible;
    position: relative;
    padding-bottom: 0;
}

.login-box {
    width: 100%;
    min-height: 250px;
    border-radius: 10px;
    background-color: var(--bg-03);
    padding: 25px 25px;
    margin: 0 0 10px;
}

.login-box .form-container {
    margin: 0 0 10px;
}

.login-box .form-group input {
    height: 44px;
}

.login-box .login-enter {
    width: 100%;
    height: 40px;
}

.login-box .login-options {
    width: 100%;
    margin: 15px 0 0;
}

.login-box .login-options a {
    margin-left: auto;
}

.before-login,
.after-login {
    display: none;
}

.before-login.active,
.after-login.active {
    display: block;
}


/* After Login Box */

.al-box {
    width: 100%;
    margin: -10px 0;
}

.al-box .al-row {
    width: 100%;
    margin: 3px 0;
    flex-wrap: nowrap;
}

.al-box .info-panel {
    width: 100%;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    padding: 0 15px;
}

.al-box .w-btn .info-panel {
    width: calc(100% - 75px);
}

.al-box .info-panel .labels {
    margin: 0 10px 0 0; 
}

.al-box .info-panel .lvl-img {
    margin-right: 5px;
    filter: brightness(125%);
}

.al-box .info-panel .info {
    font-size: 16px;
}

.al-box .logout-btn {
    width: 70px;
    height: 44px;
    margin-left: 5px;
    border-radius: 5px;
    font-size: 14px;
}

.al-box .btn-grp a {
    width: calc(50% - 2px);
    height: 40px;
    margin: 0 2px;
    border-radius: 5px;
    font-size: 14px;
}

.al-box .btn-grp a:first-child {
    margin-left: 0;
}

.al-box .btn-grp a:last-child {
    margin-right: 0;
}

.al-box .link-grp {
    width: 100%;
    flex-wrap: nowrap;
    background-color: rgba(0, 102, 255, 0.15);
    padding: 2px;
    border-radius: 10px;
    margin-top: 5px;
}

.al-box .link-grp li {
    width: 25%;
}

.al-box .link-grp li a {
    font-size: 11px;
    border-radius: 8px;
    padding: 0 0 5px;
}

.al-box .link-grp li a .icon-panel {
    color: #56a1ff;
    font-size: 24px;
    transition: 0.3s;
}

.al-box .link-grp li a:hover .icon-panel {
    color: var(--secondary);
}

.al-box .link-grp li a .text {
    width: 100%;
    display: inline-block;
    margin: -5px 0 0;
}


/* Chat Box */

.chat-box {
    width: 100%;
    background-color: var(--bg-05);
    border-radius: 15px;
    margin: 0 0 10px;
    overflow: hidden;
}

.chat-box .header {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 102, 255, 0.25);
    padding: 0 15px 2px;
    font-size: 16px;
    margin: 0 0 5px;
}

.chat-box .header .title-panel i {
    font-size: 22px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}

.chat-box .header .close-chat {
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
}

.chat-box .content {
    height: 400px;
}


/* Telegram Banner */

.telegram-banner {
    width: 100%;
    min-height: 100px;
    background-color: #0057c3;
    background-image: linear-gradient(to bottom left, #4095ff, #0057c3);
    border-radius: 10px;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px 10px 15px;
}

.telegram-banner:hover {
    background-color: #04386e;
}

.telegram-banner:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/bg/telegram-bg.png);
    position: absolute;
    background-repeat: no-repeat;
    background-position: top center;
}

.telegram-banner:after {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: solid 1px #021c36;
    left: 0;
    top: 0;
    z-index: 5;
}

.telegram-banner .header {
    width: 100%;
    color: #00234e;
    font-size: 24px;
    margin: 0;
}

.telegram-banner .panel {
    width: 100%;
    max-width: 250px;
    height: 30px;
    border-radius: 10px;
    color: #67cfff;
    font-size: 16px;
    background-color: rgba(0, 35, 61, 0.7);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    margin: 5px 0 5px;
    padding: 0 0 2px;
}

.telegram-banner p {
    width: 100%;
    color: #ffffff;
}


/* Ads Banner */

.ads-banner {
    width: 100%;
    max-width: 500px;
    position: relative;
    display: inline-block;
    margin: 8px auto;
}


/* Ads Swiper */

.ads-swiper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.swiper .swiper-pagination {
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 0;
}

.swiper-peaking .swiper-pagination {
    width: 90%;
}

.swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background-color: #ffffff;
    transition: 0.3s;
}

.swiper .swiper-pagination-bullet:hover {
    opacity: 1.0;
}

.swiper .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 4px;
    background-color: var(--primary);
}

.swiper .swiper-pagination {
    position: relative;
    top: 0;
    bottom: 0;
}


/* Channel Banner */

.ch-banner {
    width: 100%;
    min-height: 90px;
    border-radius: 10px;
    display: inline-block;
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 48px;
    font-family: Pretendard-Black;
    background-image: linear-gradient(to right, #00c7ff, #0e70bf);
}

.warranty-banner {
    color: #651a00;
    font-size: 36px;
    font-family: GmarketSansBold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    background-image: linear-gradient(to right, #ebaf16, #b96c12);
    margin-top: 0;
}

.warranty-banner .sub {
    color: #ffffff;
    font-size: 12px;
    font-family: GmarketSansMedium;
    margin: -3% 0 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.ch-banner:nth-child(3) {
    background-image: linear-gradient(to right, #0699ff, #0151d9);
}

.ch-banner:nth-child(4) {
    background-image: linear-gradient(to right, #1e71ff, #032de1);
}

.ch-banner .ch {
    color: rgba(0, 0, 0, 0.9);
    font-size: 42px;
    font-family: GmarketSansBold;
    margin: 6px 0 0 10px;
}


/* Event Board */

.event-board {
    width: 100%;
    min-height: 200px;
    background-color: var(--bg-05);
    border-radius: 10px;
    margin: 20px 0;
    padding: 5px;
}

.mobile .event-board {
    min-height: initial;
    margin: 10px 0;
}

.event-board .header {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    margin: 0 0 5px;
}

.event-board .header:before {
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(to left, #4095ff, #0057c3, #4095ff, #0057c3);
    animation: eventHeader 0.5s linear infinite;
}

@keyframes eventHeader {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.event-board .header:after {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    background-image: linear-gradient(to right, #0e2342, #0d2951);
}

.event-board .header .icon-img {
    margin: -4px 10px 0 0;
}

.event-board .content {
    padding: 0 10px;
}

.event-board .a-tbl {
    color: #a2b0c5;
}

.event-board .a-tbl:hover {
    color: #ffffff;
}

.event-board .a-tbl .title {
    max-width: 210px;
}

.event-tag {
    min-width: 18px;
    height: 18px;
    background-image: linear-gradient(#ff7900, #ff5200);
    border-radius: 5px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    padding: 0 0 2px;
}


/* Comment Board */

.comment-board {
    width: 100%;
    border-radius: 10px;
    background-color: #1a1a1a;
    padding: 5px;
    margin: 0 0 10px;
}

.comment-board .tab-menu {
    width: 100%;
    height: 44px;
    padding: 3px;
    background-color: rgba(0, 102, 255, 0.15);
    border-radius: 8px;
    margin: 0 0 5px;
}

.comment-board .tab-menu button {
    width: 50%;
    height: 100%;
    border-radius: 8px;
    border: none;
    background-color: transparent;
    color: #999999;
}

.comment-board .tab-menu button:hover {
    color: #ffffff;
}

.comment-board .tab-menu button.active {
    color: #ffffff;
    background-color: var(--primary)
}

.comment-board .tab-panel {
    padding: 0 10px;
}

.a-tbl,
.a-tbl .title-td,
.a-tbl .user-td,
.a-tbl .date-td {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.a-tbl {
    height: 32px;
}

.a-tbl .title-td {
    width: 65%;
    justify-content: flex-start;
}

.a-tbl .user-td,
.a-tbl .date-td {
    width: 35%;
    justify-content: flex-end;
}

.a-tbl .user-td {
    font-size: 12px;
}

.a-tbl .title {
    max-width: 130px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 5px;
}

.reply-icon {
    width: 10px;
    height: 10px;
    border-left: dotted 1px rgba(255, 255, 255, 0.25);
    border-bottom: dotted 1px rgba(255, 255, 255, 0.25);
    margin: -5px 5px 0 0;
}


/* Rank Board */

.rank-board {
    width: 100%;
    min-height: 200px;
    border-radius: 10px;
    margin: 0 0 10px;
    padding: 5px;
}

.rank-board .header {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px;
    text-align: left;
    border-left: solid 3px var(--primary);
    padding: 0 0 0 15px;
}

.rank-ul, .rank-ul li {
    width: 100%;
}

.rank-ul li {
    height: 50px;
    padding: 0 10px;
    background-color: var(--bg-06);
    margin: 1px 0;
    border-radius: 8px;
}

.rank-ul li:nth-child(1),
.rank-ul li:nth-child(2),
.rank-ul li:nth-child(3) {
    background-color: #0c203f;
}

.rank-ul li .td {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-ul li .td.user {
    width: 60%;
    justify-content: flex-start;
}

.rank-ul li .td.amount {
    width: 40%;
    justify-content: flex-end;
}

.rank-ul .count-panel {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-image: linear-gradient(to top, #0274ff, #0057c3);
    position: relative;
    margin-right: 10px;
    padding: 0 0 2px;
}

.rank-ul li:nth-child(1) .count-panel,
.rank-ul li:nth-child(2) .count-panel,
.rank-ul li:nth-child(3) .count-panel {
    background-image: linear-gradient(to top, #e9af12, #cf8a14);
}

.rank-ul .count-panel:before {
    content: '';
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    position: absolute;
    top: -4px;
    left: -4px;
    border-radius: 50%;
    border: solid 1px var(--primary);
    opacity: 0.5;
}

.rank-ul li:nth-child(1) .count-panel:before,
.rank-ul li:nth-child(2) .count-panel:before,
.rank-ul li:nth-child(3) .count-panel:before {
    border-color: var(--secondary);
}

.rank-ul .icon-panel {
    font-size: 22px;
    margin-right: 10px;
    color: var(--primary);
}

.rank-ul li:nth-child(1) .icon-panel,
.rank-ul li:nth-child(2) .icon-panel,
.rank-ul li:nth-child(3) .icon-panel {
    color: var(--secondary);
}


/* Ticker */

.realtime-ticker {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.realtime-ticker ul li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 40px;
    cursor: pointer;
    transition: 0.3s;
}

.realtime-ticker ul li .td {
    height: calc(100% - 2px);
    margin: 1px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    background-color: rgba(128, 143, 155, 0.1);
}

.realtime-ticker ul li:hover .td {
    background-color: rgba(128, 143, 155, 0.25);
}

.realtime-ticker ul li .td:first-child {
    border-radius: 8px 0 0 8px;
}

.realtime-ticker ul li .td:last-child {
    border-radius: 0 8px 8px 0;
}

.realtime-ticker ul li .icon-panel {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 20px;
    padding: 0 0 0 10px;
    margin: 0 10px 0 0;
}

.realtime-ticker ul li div.user {
    width: 40%;
    justify-content: flex-start;
    padding-left: 10px;
}

.realtime-ticker ul li div.amount {
    width: 40%;
    font-size: 16px;
    padding-right: 5px;
    font-weight: 700;
    justify-content: flex-end;
}

.realtime-ticker ul li div.date {
    width: 20%;
    justify-content: flex-end;
    padding-right: 8px;
}


/* Page Panel */

.page-panel {
    width: calc(100% - 680px);
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

.board-section {
    align-items: stretch;
    margin: 0 0 10px;
}

.board-section .board-panel {
    min-height: 200px;
    border-radius: 10px;
    background-color: var(--bg-03);
    padding: 5px;
}

.notice-board {
    width: 40%;
}

.post-board {
    width: calc(60% - 10px);
    margin: 0 0 0 auto;
}

.board-panel .header {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 102, 255, 0.15);
    border-radius: 8px;
    padding: 0 15px;
}

.board-panel .header .title-panel {
    font-size: 18px;
    font-weight: 700;
}

.board-panel .header .title-panel i {
    font-size: 22px;
    margin-right: 5px;
}

.board-panel .tab-menu {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    flex-wrap: nowrap;
    background-color: rgba(0, 102, 255, 0.15);
    padding: 4px;
}

.board-panel .tab-menu button {
    width: calc(20% - 1px);
    height: 100%;
    border: none;
    background-color: transparent;
    color: #999999;
    margin: 0 1px 0 0;
    border-radius: 8px;
}

.board-panel .tab-menu button:last-child {
    width: 20%;
    margin: 0;
}

.board-panel .tab-menu button:hover {
    color: #ffffff;
    background-color: rgba(0, 102, 255, 0.25);
}

.board-panel .tab-menu button.active {
    background-color: var(--primary);
    color: #ffffff;
}

.board-panel .content,
.board-panel .tab-panel {
    width: 100%;
    margin: 5px 0 0;
}

.tab-panel .tab {
    display: none;
    animation: regTabAnim 0.5s ease 1 forwards;
}

@keyframes regTabAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.tab-panel .tab.active {
    display: block;
}

.board-panel table {
    width: 100%;
}

.board-panel .tab table {
    width: 50%;
}

.board-panel table td {
    height: 38px;
    transition: 0.3s;
    white-space: nowrap;
    position: relative;
}

.board-panel table td:first-child {
    border-radius: 5px 0 0 5px;
    padding-left: 10px;
}

.board-panel table td:last-child {
    border-radius: 0 5px 5px 0;
    padding-right: 10px;
}

.board-panel table.w-bullet td {
    border-radius: 5px;
    padding-left: 20px;
}

.board-panel table.w-bullet td:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto 0;
}

.board-panel table tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

.board-panel table td a .title {
    max-width: 290px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.board-panel .tab table td a .title {
    max-width: 250px;
}

.board-panel table tr:hover td a {
    color: #ffffff;
}

.board-panel table .title-td {
    text-align: left;
}

.board-panel table .date-td {
    color: #999999;
    text-align: right;
}

.board-panel .footer {
    width: 100%;
    margin: 5px 0 0;
}

.board-panel .footer .more-link {
    width: 100%;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin: 0 auto;
    padding: 0 0 1px;
}

.board-panel .footer .more-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border: solid 1px rgba(255, 255, 255, 0.15);
}

.board-panel .footer .more-link i {
    color: #ff7200;
    font-size: 16px;
    margin-right: 2px;
}


/* Video Section */

.video-section {
    width: 100%;
    border: solid 1px #092a5d;
    border-radius: 15px;
    overflow: hidden;
}

.video-section:before {
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/bg/pattern.png);
    background-repeat: repeat;
    opacity: 0.3;
    animation: standByAnim 15s linear infinite;
}

@keyframes standByAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-46.5%); }
}

.video-section:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(to bottom right, rgba(0, 0, 1, 0.75), rgba(10, 0, 70, 0.75), rgba(4, 46, 144, 0.75), rgba(46, 128, 234, 0.75));
}

.logo-stb {
    width: 50%;
    max-width: 411px;
    margin: 0 auto;
    position: absolute;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

.logo-stb img, .logo-stb div {
    position: absolute;
    bottom: 0;
}

.logo-stb .logo-img {
    width: 100%;
    position: relative;
    opacity: 0;
}

.logo-stb div .d-img {
    width: 100%;
    position: relative;
}

.logo-stb .icon {
    width: 24.33%;
    left: 0;
    transform-origin: bottom right;
    animation: lgIcon 8s ease infinite;
}

.logo-stb .text-01 {
    width: 15.82%;
    left: 26.5%;
    animation: lgText01 8s ease infinite;
}

.logo-stb .text-02 {
    width: 15.33%;
    left: 42.25%;
    animation: lgText02 8s ease infinite;
}

.logo-stb .text-03 {
    width: 15.33%;
    right: 27%;
    animation: lgText03 8s ease infinite;
}

.logo-stb .tv {
    width: 27.74%;
    right: 0;
    overflow: hidden;
}

.logo-stb .tv .d-img {
    animation: lgTv 8s ease infinite;
}


/* Event Marquee */

.event-marquee {
    width: 100%;
    height: 42px;
    background-color: #02142f;
    border: solid 1px #082d5d;
    z-index: 10;
    border-radius: 10px;
    padding: 2px;
    margin: 0 0 10px;
}

.event-marquee .icon-panel {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-image: linear-gradient(#3aafff, #005895);
    color: #ffffff;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px #3aafff;
    box-shadow: 0 0 10px #003dad;
}

.new-icon {
    min-width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    color: #ffffff;
    background-color: #ff2929;
    font-size: 11px;
    font-weight: 900;
    margin-right: 5px;
}

.event-marquee .icon-panel i {
    display: inline-block;
    animation: shakeAnim 1.5s ease infinite;
}

@keyframes shakeAnim {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.event-marquee .marquee-wrap {
    width: calc(100% - 36px);
    overflow: hidden;
}

.marquee ul li {
    padding: 0 60px 2px;
    white-space: nowrap;
    border-right: dashed 1px rgba(73, 80, 90, 0.75);
}

.marquee ul li:last-child {
    border-right: none;
}

.marquee ul li .date {
    margin-left: 15px;
}


/* Live Stream Section */

.livestream-section {
    margin: 10px 0 0;
}


/* Stream Nav */

.stream-nav .btn-grp {
    width: 100%;
    margin-right: auto;
}

.stream-nav .btn-grp button {
    width: calc(25% - 10px);
    height: 34px;
    margin-right: auto;
    border-radius: 5px;
    margin: 0 5px;
    background-color: var(--bg-05);
    border: none;
    color: #999999;
}

.stream-nav .btn-grp button:hover {
    background-color: #475675;
    color: #ffffff;
}

.stream-nav .btn-grp button.active {
    background-color: var(--primary);
    color: #ffffff;
}

.stream-nav .btn-grp button .icon-panel {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    margin-right: 8px;
}

.stream-nav .btn-grp button .icon-panel img {
    max-width: 12px;
    filter: brightness(0) invert(1);
    opacity: 0.5;
    transition: 0.3s;
}

.stream-nav .btn-grp button:hover .icon-panel img {
    opacity: 1.0;
}

.stream-nav .btn-grp button.active .icon-panel img {
    opacity: 1.0;
}

.stream-nav .option-grp .bs-checkbox {
    margin-left: 30px;
}

.stream-nav .option-grp .bs-checkbox .checkbox {
    width: 20px;
    height: 20px;
}


/* Category Menu */

.category-menu {
    margin: 15px 0;
}

.category-swiper {
    padding: 2px;
}

.category-btn {
    width: 100%;
    background-color: #1a1a1a;
    border: solid 1px #333333;
    border-radius: 10px;
    padding: 15px 5px 5px;
    font-size: 12px;
    position: relative;
}

.category-btn:hover {
    background-color: #2a2a2a;
    border: solid 1px #555555;
}

.category-btn.active {
    color: #ffffff;
    background-color: #332503;
    border-color: #e6ac12;
}

.category-btn .count-tag {
    width: 24px;
    height: 24px;
    position: absolute;
    right: -2px;
    top: -2px;
    overflow: hidden;
    border-radius: 50%;
    color: #ffffff;
    background-color: var(--primary);
}

.category-btn.active .count-tag {
    color: #000000;
    background-color: var(--secondary);
}

.category-btn:hover .count-tag:before {
    background-color: #666666;
}

.category-btn.active .count-tag:before {
    background-image: linear-gradient(#ff6f00, #b21d00);
}

.category-btn .icon-panel {
    margin: 0 0 5px;
}

.category-btn .icon-panel img {
    width: 90%;
    max-width: 40px;
}

.category-btn .text {
    width: 100%;
    display: inline-block;
}


/* Stream List */

.stream-list {
    width: 100%;
    margin: 10px 0 0;
}

.stream-menu {
    width: 100%;
    min-height: 70px;
    background-color: var(--bg-05);
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    margin: 0 0 5px;
    padding: 3px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.stream-menu:before,
.stream-menu:after {
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    z-index: -1;
}

.stream-menu:before {
    width: 200%;
    height: 100%;
    background-image: linear-gradient(to left, #4095ff, #0057c3, #4095ff, #0057c3);
    animation: eventHeader 1s linear infinite;
}

.stream-menu:after {
    background-color: #07162d;
}

.stream-menu:before,
.stream-menu:after {
    opacity: 0;
}

.stream-menu.active:before,
.stream-menu.active:after {
    opacity: 0.5;
}

.stream-menu:hover:after,
.stream-menu.active:after {
    opacity: 1.0;
}

.stream-menu:hover,
.stream-menu.active {
    background-color: var(--bg-05);
}

.stream-menu ul {
    width: 100%;
    padding-left: 5px;
    align-items: stretch;
}

.stream-menu .category-td { width: 5%; }
.stream-menu .league-td { width: 12%; }
.stream-menu .date-td { width: 12%; }
.stream-menu .team-td { width: 22%; }
.stream-menu .vs-td { width: 6%; }
.stream-menu .channel-td { width: 12%; }
.stream-menu .watch-td { width: 9%; }

.stream-menu .category-td img {
    max-width: 24px;
}

.stream-menu .league-td {
    font-size: 16px;
    justify-content: flex-start;
}

.stream-menu .league-td img {
    max-width: 26px;
    margin-right: 10px;
}

.stream-menu .date-td {
    color: #999999;
    font-size: 16px;
}

.stream-btn {
    width: 100%;
    height: 46px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    padding: 0 10px;
    border-radius: 8px;
}

.stream-menu:hover .stream-btn,
.stream-menu.active .stream-btn {
    background-color: #2d3e5b;
}

.away .stream-btn {
    justify-content: flex-end;
}

.stream-btn .icon-panel {
    margin: 0 5px 0 0;
}

.stream-btn .icon-panel img {
    max-width: 26px;
}

.away .stream-btn .icon-panel {
    margin: 0 0 0 5px;
}

.stream-btn .text {
    width: calc(100% - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
}

.away .stream-btn .text {
    text-align: right;
}

.stream-menu .channel-btn {
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 3px;
    padding: 0 0 2px;
    background-color: #34425d;
}

.stream-menu.active .channel-btn {
    background-color: var(--primary);
}

.stream-menu.active .channel-btn:hover {
    background-color: #777777;
}

.stream-menu .watch-btn {
    width: 90px;
    height: 36px;
    background-color: #ffbd16;
    border: none;
    color: #331103;
    font-size: 12px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.stream-menu .watch-btn:hover {
    border-color: #cb5800;
}

.stream-menu .watch-btn:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    position: absolute;
    transition: 0.3s;
    opacity: 0;
    background-image: linear-gradient(#ff6f00, #b21d00);
}

.stream-menu .watch-btn:hover:before {
    opacity: 1.0;
}

.stream-menu .watch-btn .icon-panel {
    font-size: 18px;
    transition: 0.3s;
}

.stream-menu.active .watch-btn .icon-panel {
    color: #461707;
}

.stream-menu .watch-btn:hover .icon-panel {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}


/* Page Title */

.page-title {
    width: 100%;
    position: relative;
    padding: 0 0 10px;
    margin: 0 0 20px;
}

.page-title:after {
    content: '';
    width: 40px;
    height: 3px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    background-color: #ff7200;
    border-radius: 3px;
}

.page-title .title {
    margin: 0 0 -2px;
}


/* Highlight Section */

.highlight-wrap {
    background-color: var(--bg-06);
    border-radius: 10px;
    padding: 20px;
    margin: 0 0 15px;
    align-items: stretch;
    overflow: hidden;
}

.highlight-menu {
    width: 110px;
    border-radius: 10px;
    overflow: hidden;
}

.highlight-menu button {
    width: 100%;
    height: 50%;
    background-color: #34425d;
    border: none;
    color: #aabad9;
    border-bottom: solid 1px var(--bg-05);
}

.highlight-menu button:hover {
    background-color: #2c3a55;
}

.highlight-menu button:hover {
    color: #ffffff;
}

.highlight-menu button.active {
    width: 100%;
    height: 50%;
    color: #ffffff;
    background-color: var(--primary);
}

.highlight-menu button i {
    font-size: 24px;
}

.highlight-menu button:nth-child(1) i {
    color: var(--text-purple);
}

.highlight-menu button:nth-child(2) i {
    color: var(--text-green);
}

.highlight-menu button:last-child {
    border-bottom: none;
}

.highlight-menu button.active i {
    color: #ffffff;
}

.highlight-tab {
    width: calc(100% - 130px);
    margin: 0 0 0 20px;
}

.highlight-tab .tab {
    width: 100%;
    display: none;
}

.highlight-tab .tab.active {
    display: block;
}

.highlight-swiper {
    width: 100% !important;
    margin: 0 0 -6px;
}

.hl-btn {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    opacity: 0;
    animation: hlAnim 0.5s ease 1 forwards;
}

@keyframes hlAnim {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.hl-btn .play-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 30px;
    margin: auto;
    font-size: 36px;
    padding: 0 0 0 5px;
}

.hl-btn .play-btn:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.hl-btn .g-footer {
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 15px;
}

.hl-btn .g-footer span {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


/* Sports Banner */

.sports-banner {
    width: 100%;
    margin: 30px 0 30px;
    flex-wrap: nowrap;
    position: relative;
}

.sports-banner .bg {
    width: 100%;
}

.sports-banner .text-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    padding-left: 3%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 1.0);
}

.sports-banner .text-panel .center {
    flex-direction: column;
}

.sports-banner .title-panel {
    font-size: 24px;
    white-space: nowrap;
    background-color: #0181d9;
    margin: 0 auto 3% 0;
    padding: 0 3%;
}


/* About Banners */

.about-banner {
    width: 100%;
    margin: 0 0 50px;
}

.about-banner .title-panel {
    width: 100%;
    border-radius: 10px 0 0 3px;
    font-size: 20px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    margin: 0 0 10px;
}

.about-banner .title-panel:before {
    width: 50px;
    height: 3px;
    left: 0;
    top: -10px;
    transform-origin: top right;
    transform: skew(-30deg);
    background-color: var(--primary);
    border-radius: 0 5px 5px 0;
}

.about-banner .title-panel:after {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-image: linear-gradient(to right, rgba(0, 87, 195, 0), rgba(0, 87, 195, 0.15));
    right: 0;
}

.about-banner .text-panel {
    width: 100%;
    font-size: 16px;
    padding: 0 15px;
}

.about-banner .text-panel .m-b-1 {
    margin-bottom: 1%;
}

.about-banner .text-panel .m-b-2 {
    margin-bottom: 2%;
}


/* Page Header */

.page-header {
    width: 100%;
    min-height: 46px;
    background-color: var(--bg-04);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    padding: 0 10px;
    margin: 0 0 5px;
    flex-wrap: nowrap;
    border-radius: 10px;
}

.page-header .title-panel {
    flex-wrap: nowrap;
}

.page-header .title-panel .icon-panel {
    border-radius: 50%;
    font-size: 24px;
    margin: 0 8px 0 0;
    color: var(--text-prime);
}

.page-header .title-panel .icon-panel.no-bg {
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    font-size: 22px;
    margin-right: 5px;
}

.page-header .title-panel .icon-panel.size-lg {
    width: 40px;
    height: 40px;
    margin-right: 10px;
} 

.page-header .title-panel .icon-panel img {
    max-width: 20px;
    max-height: 20px;
}

.page-header .title-panel .icon-panel.size-lg img {
    max-width: initial;
    max-height: initial;
    filter: none;
}

.page-header .title {
    font-size: 16px;
    position: relative;
    top: -1px;
}

.page-header .title-panel .text-panel .title,
.page-header .title-panel .text-panel .sub {
    width: 100%;
    font-size: 20px;
    display: inline-block;
}

.page-header .title-panel .text-panel .sub {
    font-size: 12px;
    margin: -2px 0 0;
}

.page-header .title-panel .text-panel a {
    font-size: 14px;
    margin: -4px 0 0;
}


/* Page Indicator */

.page-indicator ul li {
    padding: 0 20px;
}

.page-indicator ul li:after {
    width: 1px;
    height: 80%;
    right: 0;
    bottom: 0;
    top: 2px;
    margin: auto 0;
}

.page-indicator ul li:after {
    border-right: solid 1px rgba(255, 255, 255, 0.2);
}

.page-indicator ul li:last-child {
    padding-right: 10px;
}

.page-indicator ul li:last-child:before,
.page-indicator ul li:last-child:after {
    display: none;
}

.page-indicator ul li a {
    color: #cccccc;
}

.page-indicator ul li a:hover {
    color: #ffffff;
}

.page-indicator ul li a.active {
    color: #ffffff;
}


/* Page Banner */

.page-banner {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 15px;
}


/* Page Badge */

.page-badge {
    width: 100%;
    min-height: 200px;
    padding: 20px 10%;
    border-radius: 10px;
    background-color: #260f02;
    border: solid 1px #552913;
    margin: 0 0 15px;
    color: #bea998;
    font-size: 16px;
    overflow: hidden;
}

.page-badge:before {
    width: 25%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, rgba(255, 123, 3, 0.15), rgba(255, 123, 3, 0));
}

.page-badge:after {
    width: 100%;
    height: calc(100% + 2px);
    top: -1px;
    left: 0;
    background-image: url(../img/bg/badge-bg.png);
    background-size: 100% 100%;
    z-index: 10;
}

.page-badge .title {
    font-size: 42px;
    margin: 0 0 2%;
}

.page-badge h6 {
    font-size: 20px;
    margin: 0 0 1%;
}

.page-badge .warning-panel {
    min-height: 40px;
    background-color: rgba(125, 6, 0, 0.25);
    border: solid 1px rgba(208, 61, 10, 0.5);
    padding: 4px 20px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin: 15px 0 0;
}

.page-badge .warning-panel .labels {
    font-size: 16px;
    margin-right: 5px;
}


/* Page Menu */

.page-menu {
    width: 100%;
    border-radius: 10px;
    background-color: var(--bg-03);
    margin: 0 0 5px;
    padding: 4px 2px;
    flex-wrap: nowrap;
}

.page-menu.c-last {
    margin: -10px 0 15px;
}

.page-menu a {
    min-width: 120px;
    height: 42px;
    border: none;
    background-color: transparent;
    color: #999999;
    border-radius: 8px;
    margin: 0 2px;
    padding: 0 20px;
}

.page-menu a:hover {
    background-color: #333333;
    color: #ffffff;
}

.page-menu a.active {
    color: #ffffff;
    background-color: #333333;
}

.page-info {
    font-size: 16px;
    margin: 0 0 15px;
    text-align: left;
}

.page-info i {
    font-size: 20px;
    position: relative;
    top: 1px;
}

.page-details i {
    font-size: 20px;
    margin: 2px 5px 0 0;
}


/* Page Nav */

.page-nav {
    margin: 0 0 15px;
}

.notice-marquee {
    width: calc(100% - 90px);
    height: 38px;
    background-color: var(--bg-05);
    z-index: 10;
    border-radius: 6px;
    margin: 0 0 10px;
    overflow: hidden;
    padding: 5px;
}

.notice-marquee .icon-panel {
    width: 50px;
    height: 30px;
    background-color: #00c23c;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
}

.notice-marquee .icon-panel i {
    display: inline-block;
    animation: shakeAnim 1.5s ease infinite;
}

.notice-marquee .marquee-wrap {
    width: calc(100% - 50px);
    overflow: hidden;
}

.page-nav .btn-grp button {
    width: 40px;
    height: 38px;
    margin-left: 5px;
    border-radius: 5px;
}

.search-btn i {
    display: inline-block;
    transition: 0.3s;
}

.search-btn.active .normal-icon {
    opacity: 0;
}

.search-btn .open-icon {
    position: absolute;
    font-size: 24px;
    opacity: 0;
    transform: translateY(-50%);
}

.search-btn.active .open-icon {
    opacity: 1.0;
    transform: translateY(0);
}


/* Drop Search */

.search-drop {
    margin: -10px 0 15px;
    display: none;
}

.search-drop .drop-panel {
    width: 100%;
    background-color: var(--bg-04);
    border-radius: 5px;
    padding: 10px 10px;
}

.search-drop .form-group {
    width: calc(50% - 5px);
}

.search-drop .select-input {
    height: 40px;
}


/* Search Form */

.search-form {
    width: calc(50% - 5px);
    height: 40px;
    background-color: rgba(56, 61, 68, 0.25);
    border: solid 1px rgba(56, 61, 68, 0.5);
    border-radius: 5px;
    padding: 2px;
    position: relative;
    margin-left: 10px;
}

.search-form input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: #ffffff;
    padding: 0 46px 0 10px;
}

.search-form input::-webkit-input-placeholder {
    color: #777f86;
}

.search-form input::placeholder {
    color: #777f86;
}

.search-form .search-btn {
    width: 50px;
    height: calc(100% - 4px);
    position: absolute;
    right: 2px;
    border-radius: 5px;
    font-size: 14px;
}


/* Gallery Section */

.gallery-wrap {
    width: calc(100% + 20px);
    margin: 0 -10px;
}

.gallery-btn {
    width: calc(33.33% - 20px);
    margin: 0 10px 20px;
    display: inline-block;
    padding: 15px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
}

.gallery-btn:hover {
    background-color: #02142f;
    border-color: #0f3971;
}

.gallery-btn .g-panel {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.gallery-btn .play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 36px;
    padding: 0 0 0 5px;
}

.gallery-btn .play-btn:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.gallery-btn .tag {
    min-width: 100px;
    height: 30px;
    padding: 0 20px;
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: rgba(20, 20, 20, 0.8);
    color: #ffffff;
    border-radius: 5px;
    backdrop-filter: blur(5px);
}

.gallery-btn .g-title {
    padding: 10px 0;
}

.gallery-btn .g-title .title {
    font-size: 16px;
    word-wrap: break-word;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gallery-btn .g-footer {
    height: 100%;
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
}

.gallery-btn .g-footer i {
    font-size: 18px;
    transition: 0.3s;
}

.gallery-btn .g-footer .views {
    padding: 0 15px;
    background-color: var(--bg-04);
    border-radius: 5px;
    transition: 0.3s;
}

.gallery-btn:hover .g-footer .views {
    background-color: var(--text-prime);
}

.gallery-btn:hover .g-footer .views i {
    color: rgba(0, 0, 0, 0.8) !important;
}


/* Tip Section */

.tip-btn {
    width: 100%;
    align-items: stretch;
    font-size: 16px;
    padding: 10px;
    margin: 5px 0;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
}

.tip-btn:hover {
    background-color: var(--bg-06);
}

.tip-btn .img-panel {
    width: 300px;
    border-radius: 5px;
    overflow: hidden;
}

.tip-btn .img-panel img {
    transition: 0.3s;
}

.tip-btn:hover .img-panel img {
    transform: scale(1.1);
}

.tip-btn .title {
    color: #ffffff;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    text-align: left;
    transition: 0.3s;
}

.tip-btn:hover .title {
    color: var(--text-secondary);
}

.tip-btn .info-panel {
    width: calc(100% - 300px);
    padding: 0 0 0 10px;
}

.tip-btn .info-panel .info {
    width: 100%;
    height: 50%;
    padding-left: 10px;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.15);
}

.tip-btn .info-panel .info:last-child {
    border-bottom: none;
}

.tip-btn .info-panel .info ul li {
    padding-right: 20px;
}


/* View Content */

.view-content {
    width: 100%;
    min-height: 300px;
    background-color: var(--bg-03);
    border-radius: 10px;
    padding: 40px 30px;
    margin: 20px 0 0;
    font-size: 16px;
}

.view-content.dark-bg {
    background-color: #051021;
}

.view-content .header {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    background-color: #213657;
    padding: 0 15px;
    margin: 0 0 10px;
}

.view-content .title {
    margin: 0 0 15px;
}

.view-content .g-img {
    width: 100%;
    max-width: 600px;
    border-radius: 15px;
    margin: 20px 0 0;
}

.view-content .b-img {
    max-width: 100%;
}

.view-content .logo-img {
    max-width: 223px;
}

.font-sz-36 {
    font-size: 36px;
}

.responsive-video {
    height: 0;
    margin: 15px 0;
    padding-top: 1px;
    position: relative;
    padding-bottom: 56.25%;
    border-radius: 10px;
    overflow: hidden;
}

.responsive-video iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute
}

.view-content table {
    font-size: 28px;
}

.ul-bullet {
    padding-left: 10px;
}

.ul-bullet li {
    width: 100%;
    font-size: 14px;
    position: relative;
    justify-content: flex-start;
    padding: 5px 0 5px 15px;
    text-align: left;
}

.ul-bullet li:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(38, 131, 255, 0.25);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}


/* Like Unlike */

.like-unlike {
    width: 100%;
    max-width: 300px;
    margin: 15px auto 30px;
    flex-wrap: nowrap;
}

.like-unlike button {
    width: calc(50% - 1px);
    height: 50px;
    font-size: 16px;
}

.like-unlike button:first-child {
    border-radius: 15px 0 0 15px;
    margin-right: 2px;
}

.like-unlike button:last-child {
    border-radius: 0 15px 15px 0;
}

.like-unlike button .text {
    margin: 0 10px;
}

.like-unlike button i {
    font-size: 20px;
}

.like-unlike button .count {
    color: #ffffff;
}


/* Ongoing Event */

.ongoing-event {
    width: 100%;
    margin: 20px 0 0;
}

.ongoing-event .img-panel {
    width: 330px;
    border-radius: 15px;
    overflow: hidden;
    margin-right: 15px;
}

.ongoing-event .img-panel img {
    width: 100%;
}

.ongoing-event .info-panel {
    width: calc(100% - 345px);
}

.ongoing-event .title-panel {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    background-color: #8d2b00;
    margin: 0 0 10px;
}

.ongoing-event .date-panel {
    height: 44px;
    border-radius: 10px;
    margin: 0 0 5px;
    background-color: #333333;
    border: solid 1px #333333;
    overflow: hidden;
}

.ongoing-event .date-panel .labels {
    width: 120px;
    height: 100%;
    background-color: #222222;
    margin-right: 15px;
}

.ongoing-event .date-panel .info {
    width: calc(100% - 135px);
    height: 100%;
}

.ongoing-event .reward-panel {
    border-radius: 10px;
    background-color: #1a1a1a;
    overflow: hidden;
}

.ongoing-event .reward-panel .header {
    width: 100%;
    height: 43px;
    background-color: #2a2a2a;
}

.ongoing-event .reward-panel .content {
    width: 100%;
    height: 114px;
    font-size: 16px;
}


/* Attendance */

.attendance-nav {
    width: 100%;
    margin: 15px 0 15px;
}

.attendance-nav .date {
    font-size: 30px;
    font-weight: 700;
    margin: 0 30px;
}

.attendance-nav .symbol {
    font-size: 24px;
    font-weight: 400;
    color: var(--text-gray);
}

.attendance-nav button {
    padding: 0 10px;
    border-radius: 5px;
    height: 26px;
    background-color: var(--bg-05);
    border: none;
    color: #cccccc;
    font-size: 12px;
    margin: 0 5px;
}

.attendance-nav button:hover {
    color: #ffffff;
}

.attendance-nav button i {
    font-size: 20px;
}

.attendance-nav button:hover i {
    color: var(--text-secondary);
}

.calendar {
    margin: 0 0 15px;
}

.calendar ul {
    flex-wrap: nowrap;
}

.calendar ul li {
    flex-wrap: wrap;
    cursor: pointer;
}

.calendar ul li .date {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    padding: 0 0 2px;
}

.calendar ul li .date:hover {
    background-color: var(--bg-05);
}

.calendar ul li.active .date {
    background-color: var(--primary);
}

.calendar ul li .text {
    width: 100%;
    display: inline-block;
    color: var(--text-gray);
    font-size: 14px;
    transition: 0.3s;
}

.calendar ul li:hover .text {
    color: #ffffff;
}


/* Attendance Ul */

.attendance-ul {
    width: 100%;
}

.attendance-ul li {
    width: 100%;
    height: 50px;
    padding: 0 15px;
}

.attendance-ul li .labels {
    width: 20%;
    color: var(--text-gray);
}

.attendance-ul li .info {
    width: 80%;
}

.attendance-ul .avatar-icon {
    width: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.attendance-ul .date,
.attendance-ul .time {
    margin-left: 20px;
}

.attend-tag {
    height: 24px;
    padding: 0 15px;
    border-radius: 25px;
    border: solid 1px #ffd700;
    color: #ffd700;
    font-size: 12px;
    margin-right: 10px;
}

.attend-tag.silver {
    border-color: #c0c0c0;
    color: #c0c0c0;
}

.attend-tag.red {
    border-color: #eb5a14;
    color: #eb5a14;
}


/* Comment Section */

.comment-section {
    margin: 10px 0 0;
}

.comment-section .header {
    font-size: 16px;
    padding: 10px 10px;
    background-color: var(--bg-05);
    border-radius: 10px;
    margin: 0 0 15px;
}

.comment-section .header .title-panel i {
    font-size: 18px;
    margin: 0 5px 0 0;
    position: relative;
    top: 2px;
}

.comment-section .header select {
    background-color: transparent;
    border: none;
    color: #999999;
    cursor: pointer;
}

.comment-wrap,
.comment-wrap .com-th,
.comment-wrap .com-td {
    width: 100%;
}

.comment-wrap {
    padding: 15px 0;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.comment-wrap.reply {
    padding: 15px 15px 5px;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: none;
    border-left: solid 1px rgba(255, 255, 255, 0.1);
}

.comment-wrap .com-th {
    font-size: 16px;
}

.comment-wrap .com-th ul {
    margin-right: auto;
}

.comment-wrap .com-th .date {
    font-size: 14px;
}

.comment-wrap .com-td {
    color: #999999;
    font-size: 16px;
    padding-left: 50px;
}

.comment-wrap .user-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #333333;
    margin-right: 10px;
}

.comment-wrap .com-nav {
    width: 100%;
    margin: 10px 0;
    padding-left: 50px;
}

.comment-wrap .com-nav .btn-grp button {
    border: none;
    color: #cccccc;
    font-size: 16px;
    margin-right: 20px;
    background-color: transparent;
}

.comment-wrap .com-nav .btn-grp button:hover {
    background-color: #555555;
    color: #ffffff;
}


/* Minigame Section */

.minigame-section {
    width: calc(100% + 20px);
    margin: 0 -10px;
}

.minigame-btn {
    width: calc(33.33% - 20px);
    margin: 0 10px 20px;
    display: inline-block;
    position: relative;
    background-color: #222222;
    border-radius: 15px;
    overflow: hidden;
}

.minigame-btn:before {
    content: '';
    width: calc(100% - 10px);
    height: calc(100% - 4px);
    left: 2px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
    z-index: 5;
    transition: 0.3s;
    pointer-events: none;
}

.minigame-btn:hover:before {
    box-shadow: 0 0 0 10px #ff6102;
}

.minigame-btn:nth-child(1) { background-color: #031638; }
.minigame-btn:nth-child(2) { background-color: #182d00; }
.minigame-btn:nth-child(3) { background-color: #531f17; }
.minigame-btn:nth-child(4) { background-color: #611e08; }
.minigame-btn:nth-child(5) { background-color: #0b3323; }
.minigame-btn:nth-child(6) { background-color: #012332; }

.minigame-btn .g-img {
    width: 100%;
    transition: 0.3s;
    transform-origin: right center;
    opacity: 0.5;
}

.minigame-btn:hover .g-img {
    transform: scale(1.1);
    opacity: 1.0;
}

.minigame-btn .g-info {
    position: absolute;
    padding: 0 8%;
}

.minigame-btn .g-info .text-panel {
    width: 100%;
}

.minigame-btn:hover .g-info .logo-img {
    animation: gDetailsAnim 0.5s ease 0.1s 1 backwards;
}

@keyframes gDetailsAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    100% {
        opacity: 1.0;
        transform: translateX(0);
    }
}

.minigame-btn .g-info .text-panel .title {
    color: #ffffff;
    font-size: 30px;
    margin: 1% 0 0;
}

.minigame-btn:hover .g-info .title {
    animation: gDetailsAnim 0.5s ease 0.2s 1 backwards;
}

.minigame-btn .g-info .text-panel .sub {
    font-size: 12px;
    margin: -3% 0 0;
    transition: 0.3s;
}

.minigame-btn:hover .g-info .text-panel .sub {
    color: #ff8624;
    animation: gDetailsAnim 0.5s ease 0.3s 1 backwards;
}

.minigame-btn .g-info .more-btn {
    width: 110px;
    height: 34px;
    font-size: 14px;
    margin: 10% 0 0;
}

.minigame-btn:hover .g-info .more-btn {
    animation: gDetailsAnim 0.5s ease 0.3s 1 backwards;
}


/* Odds Iframe */

.odd-iframe {
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    overflow: auto;
    border: none;
}


/* Ads Section */

.ads-section {
    width: calc(100% + 10px);
    margin: 0 -5px;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
    margin-top: 10px;
    padding-top: 30px;
}

.ads-section .ads-link {
    width: calc(25% - 10px);
    margin: 0 5px 10px;
    display: inline-block;
}


/* Rank Section */

.rank-section .header {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background-color: #8d2b00;
    font-size: 20px;
    margin: 0 0 10px;
}

.rank-section .content {
    width: calc(100% + 20px);
    margin: 0 -10px;
    align-items: flex-start;
}

.rank-tbl {
    width: calc(33.33% - 20px);
    margin: 0 10px 20px;
}

.rank-tbl .title-panel {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    background-color: #333333;
    margin: 0 0 2px;
    font-size: 18px;
}

.rank-tbl ul {
    width: 100%;
}

.rank-tbl ul li {
    width: 100%;
    height: 50px;
    background-color: #1a1a1a;
    border-radius: 8px;
    margin: 0 0 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.rank-tbl ul li:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    z-index: -1;
    opacity: 0;
    background-image: linear-gradient(to right, rgba(219, 62, 0, 0.4), rgba(219, 62, 0, 0));
}

.rank-tbl ul li.highlight:nth-child(1):before { opacity: 1.0; }
.rank-tbl ul li.highlight:nth-child(2):before { opacity: 0.8; }
.rank-tbl ul li.highlight:nth-child(3):before { opacity: 0.6; }
.rank-tbl ul li.highlight:nth-child(4):before { opacity: 0.4; }
.rank-tbl ul li.highlight:nth-child(5):before { opacity: 0.2; }

.rank-tbl ul li .td-div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rank-tbl ul li .tag-td {
    width: 50px;
}

.rank-tbl ul li .user-td {
    margin-right: auto;
    color: #999999;
}

.rank-tbl ul li.highlight .user-td {
    color: #bcb1a3;
}

.rank-tbl ul li .point-td {
    padding-right: 15px;
}

.rank-tbl ul li .count-tag {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-image: linear-gradient(#555555, #444444);
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.rank-tbl ul li.highlight .count-tag { background-image: linear-gradient(#ff8e11, #b21d00); }

.rank-tbl ul li .lvl-panel {
    margin-right: 10px;
}


/* Sidebar Left */

.sidebar-left {
    width: 100%;
    max-width: 350px;
    height: calc(100% - 126px);
    position: fixed;
    left: 0;
    top: 126px;
    padding: 10px 15px 90px;
    background-color: var(--bg-01);
    z-index: 98;
    overflow-y: auto;
    transition: 0.3s;
    transform: translateX(-100%);
}

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

.sidebar-left::-webkit-scrollbar {
    width:0px;
    background:transparent;
}

.sidebar-left::-webkit-scrollbar-thumb {
    background:transparent;
}

.sidebar-left ul li {
    width: 100%;
    flex-wrap: wrap;
}

.sidebar-left .a-menu {
    width: 100%;
    height: 50px;
}

.sidebar-left .a-menu:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto 0;
    opacity: 0;
    transition: 0.3s;
}

.sidebar-left .a-menu.active:after {
    opacity: 1.0;
}

.sidebar-left .a-menu.active {
    color: #ffffff;
}

.sidebar-left .sl-dropdown {
    width: 100%;
    padding: 0 0 0 10px;
    display: none;
}

.sidebar-left .sl-dropdown .depth-a {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sidebar-left .sl-dropdown .depth-a .icon-panel {
    color: #ffffff;
    font-size: 20px;
    margin-right: 10px;
}


/* Mobile Menu */

.mobile-menu {
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 105;
}

.mobile-menu .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--bg-04);
    border-radius: 10px 10px 0 0;
    --r: 48px;
    --s: 36px;
    --a: 23deg;
    --_m: 0 / calc(var(--r) * 2) var(--r) no-repeat radial-gradient(50% 100% at bottom, #000 calc(100% - 1px), #0000);
    --_d: (var(--s) + var(--r)) * cos(var(--a));
    -webkit-mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(sin(var(--a)) * -1 * var(--s)), transparent 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--_d)), transparent 0 calc(50% + var(--_d)), #000 0);
    mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(sin(var(--a)) * -1 * var(--s)), transparent 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--_d)), transparent 0 calc(50% + var(--_d)), #000 0);
}

.mobile-menu a {
    width: calc(25% - 16px);
    font-size: 11px;
}

.mobile-menu .home-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--primary);
    border: solid 3px #0181d9;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    padding: 0 0 5px;
    margin: -30px 0 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);
}

.mobile-menu a .icon-panel {
    font-size: 26px;
}

.mobile-menu .home-btn .icon-panel {
    font-size: 36px;
}

.mobile-menu a .title {
    width: 100%;
    display: inline-block;
    margin: -5px 0 5px;
}


/* Footer Section */

.footer-section {
    background-color: var(--bg-02);
    position: relative;
    z-index: 50;
}

.footer-details {
    padding: 30px 0;
}

.footer-details .details-ul {
    white-space: nowrap;
}

.footer-details .details-ul br {
    display: none;
}

.footer-details .menu-ul li {
    padding: 5px 5px;
}

.footer-details .menu-ul li a {
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 14px;
}

.footer-customer {
    padding: 30px 0;
    background-color: var(--bg-04);
}

.details-ul li {
    padding: 10px 40px;
}

.details-ul li:after {
    content: '';
    width: 1px;
    height: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-right: dashed 1px rgba(255, 255, 255, 0.25);
    position: absolute;
}

.details-ul li:last-child:after {
    display: none;
}

.divider {
    width: 100%;
    height: 1px;
    margin: 30px 0;
    background-color: rgba(255, 255, 255, 0.05);
}

.telegram-link {
    padding: 10px 30px;
    border-radius: 10px;
    background-image: linear-gradient(to bottom left, #4095ff, #0057c3);
    color: #ffffff;
    font-size: 18px;
}

.telegram-link .icon-panel img {
    max-width: 40px;
    margin-right: 10px;
}

.telegram-link .account {
    color: rgba(0, 0, 0, 0.75);
    margin-left: 5px;
}

.footer-copyright {
    width: 100%;
    color: #999999;
    font-size: 14px;
    background-color: var(--bg-03);
    padding: 30px 0;
    box-shadow: 0 70px 0 var(--bg-03);
}

.footer-copyright .copyright-panel .icon {
    height: 40px;
    margin-right: 15px;
}

.footer-copyright .copyright-panel .text-panel br {
    display: none;
}

.footer-copyright .sub {
    font-size: 12px;
}

.socmed-ul li a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #205bdd;
    color: rgba(255, 255, 255, 1.0);
    font-size: 28px;
    margin-left: 10px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.socmed-ul li a.youtube {
    background-color: #dd2727;
}

.socmed-ul li a.instagram {
    background-color: #ba2dc3;
}


/* Scroll To Top */

.scroll-top {
    width: 80px;
    height: 80px;
    position:fixed;
    bottom: 20px;
    right: 20px;
    z-index: 80;
    color: #ffffff;
    font-size: 16px;
    border-radius: 50%;
    padding: 0 0 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);
}

.scroll-top:hover {
    color: #ffffff;
}

.scroll-top i {
    color: #ffffff;
    font-size: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    transition: 0.3s;
}

.scroll-top:hover i {
    color: rgba(0, 0, 0, 0.75);
    top: -8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.scroll-top span {
    width: 100%;
    position: absolute;
    display: inline-block;
    bottom: 15px;
    left: 0;
    transition: 0.3s;
    opacity: 0;
}

.scroll-top:hover span {
    opacity: 1.0;
}


/*=========================================================== M O D A L ===============================================================*/

.modal-backdrop {
    background-color: transparent;
    background-image: linear-gradient(to bottom right, rgba(0, 0, 1, 0.75), rgba(10, 0, 70, 0.75), rgba(4, 46, 144, 0.75), rgba(46, 128, 234, 0.75));
    backdrop-filter: blur(5px);
}

.modal-backdrop.show {
    opacity: 1.0;
}

.modal {
    padding: 0 50px !important;
    overflow-y: auto;
}

.modal::-webkit-scrollbar {
    width: 0;
}

.modal-dialog {
    max-width: 600px;
    padding: 0 !important;
    margin: 20px auto !important;
}

.oddModal .modal-dialog {
    max-width: 900px;
}

.size-lg .modal-dialog {
    max-width: 1024px;
}

.modal-content {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding: 50px 0 30px;
    backdrop-filter: blur(20px);
}

.size-lg .modal-content {
    min-height: 600px;
}


/* Modal Close */

.modal .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: none;
    position: absolute;
    right: -45px;
    top: -3px;
}

.modal .close-btn:before,
.modal .close-btn:after {
    width: 1px;
    height: 60%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #999999;
    transition: 0.3s;
}

.modal .close-btn:before {
    transform: rotate(-45deg);
}

.modal .close-btn:after {
    transform: rotate(45deg);
}

.modal .close-btn:hover:before {
    transform: rotate(-135deg);
    background-color: #dd3000;
}

.modal .close-btn:hover:after {
    transform: rotate(-45deg);
    background-color: #dd3000;
}


/* Logo */

.modal .logo {
    margin: 0 auto 10px;
}


/* Modal Header */

.modal-header {
    border: none;
    padding: 0 0 15px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    margin: 0 0 15px;
}

.modal-header .title-panel {
    font-weight: 600;
    font-size: 24px;
}

.modal-header i {
    font-size: 30px;
}


/* Modal Badge */

.modal-badge {
    width: 100%;
    border-radius: 10px;
    padding: 15px;
    margin: 0 0 15px;
    background-color: #010912;
}

.modal-badge i {
    font-size: 18px;
}


/* Modal Toggle */

.modal-toggle {
    flex-wrap: nowrap;
    border-bottom: solid 1px #1b2c47;
    margin: 0 0 15px;
}

.modal-toggle button {
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: none;
    color: #999999;
    font-size: 16px;
}

.modal-toggle button:hover,
.modal-toggle button.active {
    color: #ffffff;
}

.modal-toggle button:before {
    width: 0;
    height: 1px;
    background-color: #e6ac12;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: 0 auto;
}

.modal-toggle button.active:before {
    width: 100%;
}

.modal-toggle button:after {
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(230, 170, 18, 0), rgba(230, 170, 18, 0.1), rgba(230, 170, 18, 0.2));
}

.modal-toggle button.active:after {
    width: 100%;
    height: 100%;
}


/* Form Container */

.form-container {
    width: 100%;
    max-width: 1024px;
    display: inline-block;
    position: relative;
    margin: 10px 0 0;
}

.form-group {
    width: 100%;
    display: inline-block;
    margin: 0 0 10px;
}

.form-group:last-child {
    margin: 0 0;
}

.form-container .labels {
    width: 100%;
    text-align: left;
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding:0 0 0 8px;
    margin: 0 0 5px;
    color: #a3b4d3;
}

.form-container .labels.font-size-sm {
    margin-bottom: 2px;
}

.form-container .infos {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.form-container .infos.convert-menu a:first-child {
    width: 100%;
    margin: 0 0 1px;
}

.form-container .infos.convert-menu a {
    width: calc(14.28% - 2px);
    height: 38px;
    border-radius: 5px;
    margin: 1px;
    font-size: 14px;
    white-space: nowrap;
}

.form-container .infos.convert-menu a.active {
    background-color: var(--primary);
}

.form-group .input-container {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(56, 61, 68, 0);
    border: solid 1px rgba(56, 61, 68, 0);
}

.form-group.w-icon .input-container {
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0 5px;
}

.loginModal .form-group.w-icon .input-container,
.joinModal .form-group.w-icon .input-container {
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
}

.form-container .comment-form .input-container {
    background-color: rgba(255, 255, 255, 0.03);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0 5px;
}

.form-container .w-btn .input-container {
    width: calc(100% - 165px);
}

.form-container .w-btn-sm .input-container {
    width: calc(100% - 55px);
}

.form-group .input-container .icon-panel{
    width: 40px;
    height: 40px;
    color: #a3b4d3;
    font-size: 20px;
}

.form-group input {
    width: 100%;
    height: 50px;
    float: left;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: 0.3s;
    padding: 0 15px;
}

.form-group.w-icon input {
    width: calc(100% - 40px);
    background-color: rgba(56, 61, 68, 0);
    border: solid 1px rgba(56, 61, 68, 0);
    padding-left: 0;
}

.form-group input::-webkit-input-placeholder {
    color: var(--text-gray);
}

.form-group input::placeholder {
    color: var(--text-gray);
}

.form-container .infos .symbol {
    position: absolute;
    right: 15px;
}

.password-toggle {
    right: 10px;
    position: absolute;
    font-size: 20px;
    color: #999999;
    cursor: pointer;
}

.select-input {
    width: 100%;
    height: 50px;
    background-color: rgba(56, 61, 68, 0.25);
    border: solid 1px rgba(56, 61, 68, 0.5);
    border-radius: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 5px;
}

.select-input:last-child {
    margin-right: 0;
}

.select-input select {
    width: 100%;
    height: 100%;
    border: none;
    color: #999999;
    background-color: transparent;
    -webkit-appearance: none;
    padding: 0 20px;
    cursor: pointer;
}

.form-container .w-icon .select-input select {
    padding-left: 65px;
}

.select-input select option {
    background-color: #1f0a0a;
    color: #fff;
}

.select-input i {
    color: #999999;
    font-size: 28px;
    position: absolute;
    right: 10px;
    pointer-events: none;
}

.form-group textarea {
    width: 100%;
    height: 200px;
    float: left;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    padding: 20px 18px;
    border-radius: 10px;
    resize: none;
}

.form-group textarea.ckeditor {
    height: 470px;
}

.form-container .comment-form textarea {
    width: calc(100% - 100px);
    height: 80px;
    background-color: rgba(255, 255, 255, 0);
    border: solid 1px rgba(255, 255, 255, 0);
    padding: 10px;
}

.form-container .comment-form button {
    width: 100px;
    height: calc(100% - 10px);
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-radius: 8px;
}

.form-group .form-btn {
    width: 160px;
    height: 50px;
    float: right;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    transition: 0.3s;
    margin: 0 0 0 5px;
    font-size: 14px;
    border-radius: 5px;
}

.form-group.w-btn-sm .form-btn {
    width: 50px;
}

.modal-body {
    margin-left: auto;
    margin-right: auto;
}

.loginModal .modal-body {
    max-width: 400px;
}

.joinModal .modal-body {
    max-width: 500px;
}


/* Form Comment */

.comment-form .header {
    padding: 0 10px;
}

.comment-form .header .title-panel {
    font-size: 18px;
}

.comment-form .header .title-panel i {
    font-size: 28px;
    margin-right: 5px;
    color: var(--text-prime);
}

.comment-form .header button {
    font-size: 14px;
    border-radius: 5px;
    padding: 0 10px;
    height: 28px;
}

.comment-form .form-head,
.comment-form .form-foot {
    height: 44px;
    background-color: #131921;
    padding: 0 10px;
}

.comment-form .form-head {
    border-radius: 5px 5px 0 0;
}

.comment-form .form-foot {
    border-radius: 0 0 5px 5px;
}

.comment-form .form-head button {
    border-radius: 5px;
    height: 28px;
    font-size: 14px;
    padding: 0 15px;
}

.comment-form .form-head .btn-gray {
    background-color: #3e4d5f;
}

.comment-form .form-head .btn-gray:hover {
    background-color: #576d87;
}

.comment-form .form-drop {
    background-color: var(--bg-03);
}

.comment-form .form-drop .tab {
    display: none;
    padding: 10px;
}

.comment-form .form-group textarea {
    border-radius: 0;
    border-color: #232b35;
    background-color: #0a0d10;
}

.comment-form .form-drop input {
    height: 40px;
}

input[type="file"] {
    padding: 0;
    font-size: 14px;
}

input[type="file"]::file-selector-button {
    background-color: transparent;
    color: var(--text-gray);
    border: none;
    border-radius: 0;
    cursor: pointer;
    height: 48px;
    padding: 0 20px;
    margin-right: 20px;
    border-right: solid 1px rgba(255, 255, 255, 0.05);
}

.comment-form input[type="file"]::file-selector-button {
    height: 38px;
}

.comment-form .form-drop .form-btn {
    height: 40px;
    border-radius: 5px;
}


/* Modal Footer */

.modal-footer {
    width: 100%;
    border: none;
    margin: 40px auto 0;
    padding: 0;
}

.form-footer {
    width: calc(100% + 10px);
    margin: 0 -5px;
    flex-wrap: nowrap;
}

.form-footer button {
    width: 100%;
    max-width: 160px;
    height: 50px;
    margin: 0 5px;
    font-size: 18px;
}

.loginModal .form-footer button,
.joinModal .form-footer button {
    max-width: 240px;
}


/* Modal Tab */

.modal-tabs {
    width: 100%;
}

.modal-tabs .tab {
    width: 100%;
    display: none;
}

.modal-tabs .tab.active {
    display: block;
    animation: hlAnim 0.5s ease 1 forwards;
}


/* Subpage Modal */

.subpage-modal .modal-content,
.oddModal .modal-content {
    padding: 20px;
}

.subpage-modal .modal-panel,
.oddModal .modal-panel {
    width: 100%;
}


/* BS Table */

.bs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1px;
}

.bs-table thead th {
    height: 48px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    background-color: #2a2a2a;
    white-space: nowrap;
}

.modal .bs-table thead th {
    background-color: #010912;
}

.bs-table thead th:first-child {
    border-radius: 10px 0 0 10px;
}

.bs-table thead th:last-child {
    border-radius: 0 10px 10px 0;
}

.bs-table thead th[colspan="2"] {
    border-radius: 10px;
}

.bs-table thead .th-title {
    font-size: 18px;
}

.bs-table tr {
    cursor: pointer;
}

.bs-table tr td {
    height: 50px;
    text-align: center;
    padding: 1px;
    transition: 0.3s;
    background-color: rgba(255, 255, 255, 0.03);
    border-top: solid 1px rgba(255, 255, 255, 0.05);
    border-bottom: solid 1px rgba(255, 255, 255, 0.05);
    color: #999999;
}

.bs-table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.05);
}

.bs-table.with-depth tr:nth-child(4n-1) td {
    background-color: rgba(255, 255, 255, 0.05);
}

.bs-table tr:nth-child(even):hover td,
.bs-table.with-depth tr:nth-child(4n-1):hover td {
    background-color: rgba(255, 255, 255, 0.08);
}

.bs-table tr td.td-orange {
    background-color: #412617 !important;
}

.bs-table tr td.td-pink {
    background-color: #4a262c !important;
}

.bs-table tr.highlight td,
.bs-table tr.highlight:hover td {
    background-color: #1a1a1a;
}

.bs-table tr td:first-child {
    border-radius: 10px 0 0 10px;
}

.bs-table tr td:last-child {
    border-radius: 0 10px 10px 0;
}

.bs-table.with-depth tr:nth-last-child(2) td:first-child {
    border-radius: 10px 0 0 10px;
}

.bs-table.with-depth tr:nth-last-child(2) td:last-child {
    border-radius: 0 10px 10px 0;
}

.bs-table tr:hover td,
.bs-table tr.active td {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.bs-table tr td.date-td {
    width: 18%;
    color: var(--text-gray);
}

.bs-table tr td.title-td {
    text-align: left;
    padding-left: 15px;
}

.bs-table tr td.status-td,
.bs-table tr td.count-td {
    width: 8%;
}

.bs-table tr td.nav-td {
    width: 50px;
}

.bs-table tr td.tag-td {
    width: 11%;
}

.bs-table tr td.author-td i {
    font-size: 20px;
}

.bs-table tr td .count-tag {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #ffffff;
    font-size: 12px;
    background-color: #FF4E00;
}

.bs-table tr td a {
    transition: 0.3s;
    display: inline-block;
    vertical-align: middle;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    position: relative;
    color: #ffffff;
}

.bs-table tr td a:hover,
.bs-table tr.active td a {
    color: #ffffff;
    text-decoration: none;
}

.bs-table tr td a:before {
    content: '';
    width: 0;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    position: absolute;
    transition: 0.3s;
    background-color: var(--secondary);
}

.bs-table tr td a:hover:before {
    width: 100%;
}

.bs-table tr td .plus-btn {
    width: 20px;
    height: 20px;
    background-color: #ff6a00;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    padding: 0 0 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.bs-table tr td .plus-btn:hover {
    background-color: #ed3000;
}

.bs-table tr td .plus-btn:before,
.bs-table tr td .plus-btn:after {
    content: '';
    width: 2px;
    height: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    background-color: #ffffff;
    transition: 0.3s;
}

.bs-table tr td .plus-btn:after {
    transform: rotate(90deg);
}

.bs-table tr.active td .plus-btn:before {
    height: 0;
}

.bs-table tr td .plus-btn:hover:before,
.bs-table tr td .plus-btn:hover:after {
    background-color: #ffffff;
}


/* With Depth */

.with-depth .message-content {
    display: none;
}

.message-content {
    margin: 2px 0 5px;
    padding: 10px;
    border-radius: 15px;
    background-color: #111111;
    border: solid 1px #2a2a2a;
}

.message-content .scroll-panel {
    color: #999999;
    max-height: 350px;
    text-align: left;
    overflow-y: scroll;
    padding: 5px 0 5px 10px;
}

.message-content .scroll-panel.size-lg {
    max-height: 500px;
}

.message-content .scroll-panel.pre-wrap {
    white-space: pre-wrap;
}

.message-content .scroll-panel.mh-auto {
    max-height: initial;
    overflow-y: auto;
}

.with-depth tr.depth-click {
    cursor: pointer;
}

.with-depth tr.dropdown {
    background-color: transparent;
}

.with-depth tr.dropdown td {
    padding: 0;
    border: none;
    height: auto;
    box-shadow: none;
}

.with-depth tr.dropdown td {
    background-color: transparent;
    border: none;
}

.with-depth tr.dropdown:hover td {
    background-color: transparent;
    border: none;
}

.notice-tag {
    max-width: 56px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
    color: #ffffff;
    background-color: #d42100;
    margin: 0 auto;
    border-radius: 3px;
    padding: 0 0 1px;
}


/* Table Nav */

.table-nav {
    width: 100%;
    padding: 10px 0;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.15);
}

.table-nav:last-child {
    border-bottom: none;
}

.table-nav .btn-grp button {
    width: 80px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 5px;
}

.table-nav ul li {
    padding: 0 10px;
}

.table-nav ul li i {
    font-size: 16px;
}


/* Pagination */

.pagination-wrap {
    margin: 20px 0 0;
}

.pagination li {
    float: left;
}

.pagination>li>a {
    width: 28px;
    height: 28px;
    text-decoration: none;
    color: #cccccc;
    background-color: #333333;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    position: relative;
    z-index: 1;
    transition: 0.3s;
    overflow: hidden;
    border-radius: 5px;
    padding: 0;
}

.pagination .turn-pg a {
    color: #999999;
    margin: 0 10px;
    box-shadow: none;
    padding: 2px 0 0;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
}

.pagination .turn-pg a i {
    font-size: 24px;
}

.pagination li a:hover {
    color: #ffffff;
    background-color: #666666;
}

.pagination .turn-pg a:hover {
    color: #ffde34;
    background-color: transparent;
}

.pagination li a.active {
    color: #ffffff;
    background-color: var(--primary);
}


/* Bulletin Table */

.bulletin-table td .sport-icon {
    max-width: 20px;
}

.bulletin-table tr td.count-td {
    width: initial;
}

.status-tag {
    width: 40px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d42100;
    margin: 0 auto;
    color: #ffffff;
    font-size: 12px;
}

.status-tag.size-lg {
    min-width: 70px;
    height: 24px;
}

.status-tag.complete {
    background-color: var(--secondary);
}

.progress-tag {
    width: 80px;
    height: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary);
    margin: 0 auto;
    color: #000000;
    font-size: 12px;
}

.progress-tag.done {
    background-color: var(--primary);
    color: #ffffff;
}

.bs-table .hot-icon,
.bs-table .new-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    color: #ffffff;
    background-image: linear-gradient(red, red);
    vertical-align: middle;
    padding: 0 0 4px 4px;
    font-size: 10px;
    font-weight: 900;
    margin-right: 5px;
}

.bs-table .hot-icon {
    color: #731e0d;
    padding: 0 0 4px 3px;
    background-image: linear-gradient(#ffd722, #ff8f00);
    font-size: 11px;
}

.bs-table .hot-icon i {
    position: relative;
    top: -1px;
}

.bulletin-table tr td .mob-icon {
    display: none;
}


/* Emoji Menu */

.emoji-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.emoji-menu button {
    width: calc(10% - 16px);
    background-color: transparent;
    border: none;
    max-width: 40px;
    max-height: 40px;
    overflow: hidden;
    border-radius: 50%;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-menu button img {
    width: 100%;
}


/* Dropdown */

.drop-down {
    min-width: 110px;
    position: relative;
    transition: 0.3s;
}

.drop-down .nav-btn {
    min-width: 150px;
    height: 30px;
    transition: 0s;
    flex-wrap: nowrap;
    white-space: nowrap;
    background-color: #24262b;
    border: solid 1px #40444d;
    border-radius: 5px;
    color: var(--text-gray);
    font-size: 14px;
    padding: 0 5px 0 15px;
}

.drop-down .nav-btn .dd-title {
    margin-right: auto;
}

.drop-down .nav-btn .dd-title.mob {
    display: none;
}

.drop-down .nav-btn .icon{
    position: relative;
    top: 0;
    transition: 0.3s;
}

.drop-down.active .nav-btn .icon{
    top: -5px;
}

.drop-down:hover .nav-btn .icon{
    top: -5px;
}

.drop-down .nav-btn .count {
    width: 20px;
    height: 20px;
    position: absolute;
    right: -5px;
    top: -4px;
    background-color: #f73a31;
    color: #ffffff;
    border-radius: 50%;
}

.drop-down .nav-btn .arrow-icon {
    color: var(--text-prime);
    position: relative;
    transition: 0.3s;
    text-shadow: none;
    font-size: 24px;
    margin-left: 5px;
}

.drop-down.active .nav-btn .arrow-icon {
    opacity: 1;
    bottom: 1px;
    transform: rotate(180deg);
}

.drop-down-menu {
    width: 240px;
    position: absolute;
    right: 0;
    top: 75%;
    background-color: #14161a;
    border: solid 1px #282c35;
    padding: 5px 15px 5px;
    border-radius: 15px;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 10;
}

.drop-down.active .drop-down-menu {
    top: calc( 100% + 5px);
    opacity: 1;
    pointer-events: auto;
}

.drop-down-menu .header .title {
    color: #cccccc;
    font-size: 16px;
    position: relative;
    top: 2px;
}

.drop-down-menu .header .close-btn {
    color: #999999;
    font-size: 24px;
    border: none;
    background-color: transparent;
}

.drop-down-menu .header .close-btn:hover {
    color: #ff4d2c;
}

.drop-down-menu .menu-panel {
    width: 100%;
    max-height: 304px;
    overflow-y: auto;
    overflow-x: hidden;
}

.drop-down-menu .menu-panel .title {
    padding: 0 5px;
    margin: 0 0 5px;
    font-size: 16px;
}

.drop-down-menu .menu-panel button {
    width: 100%;
    height: 44px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.1);
    color: #98a7b5;
    font-size: 14px;
    position: relative;
}

.drop-down-menu .menu-panel button:last-child {
    border-bottom: none;
}

.drop-down-menu .menu-panel button:after {
    content: '';
    width: 16px;
    height: 16px;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    position: absolute;
    background-color: #2c2e31;
    border: solid 1px #2c2e31;
    background-position: top 4px center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-radius: 50%;
    transition: 0.3s;
}

.drop-down-menu .menu-panel button:hover:after {
    border-color: var(--primary);
}

.drop-down-menu .menu-panel button.active:after {
    background-color: rgba(0, 102, 255, 0.15);
    border: solid 1px var(--primary);
    background-image: url(../img/icon/check.svg);
}

.drop-down-menu .menu-panel button:hover {
    background-color: rgba(56, 61, 68, 0.15);
}

.drop-down-menu .menu-panel button:hover,
.drop-down-menu .menu-panel button.active {
    color: #ffffff;
}

.drop-down-menu .menu-panel button .icon-panel {
    height: 100%;
    font-size: 22px;
    transition: 0.3s;
    margin-right: 5px;
}

.drop-down-menu .menu-panel button:hover .icon-panel,
.drop-down-menu .menu-panel button.active .icon-panel {
    color: var(--text-prime);
}

.drop-down-menu .menu-panel button .icon-panel img {
    max-width: 24px;
    max-height: 20px;
}

.drop-down-menu .menu-panel button .icon-panel .plain-img {
    transition: 0.3s;
    opacity: 0.5;
    filter: brightness(0) invert(1);
}

.drop-down-menu .menu-panel button.active .icon-panel .plain-img {
    opacity: 1.0;
}


/* My Page */

.mypage-wrap {
    width: 100%;
    margin: 15px 0 0;
}

.mypage-wrap .header {
    width: 100%;
    margin: 0 0 5px;
}

.mypage-wrap .header .title {
    font-size: 20px;
}

.mypage-wrap .header .btn-grp button {
    height: 26px;
    padding: 0 20px;
    margin: 0 0 0 5px;
    font-size: 14px;
    border-radius: 5px;
}

.mypage-panel {
    background-color: var(--bg-03);
}

.mypage-panel .mp-row {
    padding: 20px 0;
    align-items: stretch;
}

.mypage-panel .profile-panel {
    width: 200px;
    flex-direction: column;
    border-right: solid 1px rgba(255, 255, 255, 0.1);
}

.mypage-panel .avatar-panel {
    width: 100px;
    border-radius: 50%;
    margin: 0 0 10px;
    overflow: hidden;
}

.profileModal .avatar-panel {
    width: 80px;
    border-radius: 50%;
    margin: 0 0 10px;
    overflow: hidden;
}

.mypage-panel .photo-btn {
    padding: 0 20px;
    height: 24px;
    border-radius: 5px;
    font-size: 14px;
}

.mypage-panel .progress-panel {
    width: calc(100% - 200px);
    padding: 0 50px;
}

.mypage-panel .progress-panel ul,
.mypage-panel .progress-panel ul li {
    width: 100%;
    justify-content: flex-start;
}

.mypage-panel .progress-panel ul li:nth-child(1),
.mypage-panel .progress-panel ul li:nth-child(2) {
    width: 50%;
}

.mypage-panel .progress-panel ul li {
    padding: 5px 0;
    flex-wrap: wrap;
}

.mypage-panel .progress-panel ul li a {
    color: var(--text-secondary);
}

.mypage-panel .progress-panel ul li a:hover {
    color: #ffed5f;
}

.progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background-color: var(--bg-04);
    margin: 5px 0 0;
    position: relative;
    overflow: hidden;
}

.progress-bar .percent {
    width: 68%;
    height: 100%;
    overflow: hidden;
    background-color: var(--primary);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
    animation: 1s linear infinite progress-bar-stripes;
}

.mypage-panel .follow-tag {
    padding: 0 10px;
    min-width: 80px;
    height: 18px;
    background-color: var(--bg-05);
    font-size: 12px;
    border-radius: 4px;
}

.mypage-panel .follow-tag.friend {
    background-color: var(--secondary);
}


/* Info Row */

.mypage-panel .info-row {
    background-color: #131921;
}

.mypage-panel .info-row ul {
    width: 100%;
}

.mypage-panel .info-row ul li {
    width: 100%;
    height: 48px;
    justify-content: flex-start;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.15);
    padding: 0 20px;
}

.mypage-panel .info-row ul li:last-child {
    border-bottom: none;
}

.mypage-panel .info-row ul li .labels {
    margin: 0 15px 0 0;
}


/* Activity Wrap */

.activity-wrap {
    margin: 15px 0 0;
    padding: 60px 0;
}

.activity-wrap:before {
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--bg-04);
}

.activity-panel {
    border: solid 1px #232b35;
    background-color: #0a0d10;
    width: calc(50% - 30px);
    padding: 15px;
    font-size: 16px;
    margin-top: -40px;
    margin-bottom: -40px;
}

.activity-panel:nth-child(odd) {
    margin-right: auto;
}

.activity-panel:nth-child(even) {
    margin-left: auto;
}

.activity-panel:before {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.activity-panel:nth-child(odd):before {
    border-left: 10px solid #0a0d10;
    right: -10px;
    bottom: 32px;
    filter: drop-shadow(1px 0 0 #232b35);
}

.activity-panel:nth-child(even):before {
    left: -10px;
    border-right: 10px solid #0a0d10;
    top: 32px;
    filter: drop-shadow(-1px 0 0 #232b35);
}

.activity-panel .date {
    margin: 0 0 15px;
}

.activity-panel .indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 4px var(--secondary);
    position: absolute;
}

.activity-panel:nth-child(odd) .indicator {
    right: -38px;
    bottom: 35px;
}

.activity-panel:nth-child(even) .indicator {
    left: -38px;
    top: 35px;
}

.activity-more {
    padding: 0 20px;
    min-width: 200px;
    height: 50px;
}

.change-profile {
    width: 100%;
}

.change-profile .img-panel {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
}

.change-profile button {
    width: calc(100% - 45px);
    height: 40px;
    border-radius: 5px;
    margin-left: auto;
}

.avatar-wrap button {
    width: calc(20% - 20px);
    border: none;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 10px 20px;
}
.sound_only {
    display:none;
}
.cke_sc {
    display:none;
}