html,
body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    color: var(--main-text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.4px;
    display: grid;
}

button {
    outline: unset;
}

.fa,
.fab,
.fad,
.fal,
.far,
.fas {
    font-weight: 900 !important;
}

em {
    font-style: normal;
}

.highlight,
.text-blue {
    color: var(--point-color) !important;
}

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

.highlight,
.text-blue,
.text-red {
    transition: color 0.15s ease-in-out;
}

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

h1,
.h1 {
    font-size: 2.5rem;
}

h2,
.h2 {
    font-size: 2.125rem;
}

h3,
.h3 {
    font-size: 1.75rem;
}

h4,
.h4 {
    font-size: 1.5rem;
}

h5,
.h5 {
    font-size: 1.25rem;
}

h6,
.h6 {
    font-size: 1rem;
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

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

.divider {
    background-color: rgba(0, 0, 0, 0.1);
    width: 1px;
    height: 15px;
    display: inline-block;
    margin: 0px 5px;
}

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

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

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

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

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

.f17 {
    font-size: 17px !important;
}

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

.f25 {
    font-size: 25px !important;
}

.pn {
    padding: 0 !important;
}

.p5 {
    padding: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.p25 {
    padding: 25px !important;
}

.pt5 .py5 {
    padding-top: 5px !important;
}

.pt10,
.py10 {
    padding-top: 10px !important;
}

.pt15,
.py15 {
    padding-top: 15px !important;
}

.pt20,
.py20 {
    padding-top: 20px !important;
}

.pt25 {
    padding-top: 25px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt35 {
    padding-top: 35px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt45 {
    padding-top: 45px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pb5,
.py5 {
    padding-bottom: 5px !important;
}

.pb10,
.py10 {
    padding-bottom: 10px !important;
}

.pb15,
.py15 {
    padding-bottom: 15px !important;
}

.pb20,
.py20 {
    padding-bottom: 20px !important;
}

.pb25 {
    padding-bottom: 25px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb35 {
    padding-bottom: 35px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb45 {
    padding-bottom: 45px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt10,
.my10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20,
.my20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30,
.my30 {
    margin-top: 30px !important;
}

.mt35 {
    margin-top: 35px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt45 {
    margin-top: 45px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mbn {
    margin-bottom: 0 !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10,
.my10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20,
.my20 {
    margin-bottom: 20px !important;
}

.mb25 {
    margin-bottom: 25px !important;
}

.mb30,
.my30 {
    margin-bottom: 30px !important;
}

.mb35 {
    margin-bottom: 35px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb45 {
    margin-bottom: 45px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mtb5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.mtb10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.mtb15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.mtb20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mtb30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml25 {
    margin-left: 25px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml35 {
    margin-left: 35px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr25 {
    margin-right: 25px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr35 {
    margin-right: 35px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.pn {
    padding: 0;
}

.ptn,
.pyn {
    padding-top: 0 !important;
}

.pbn,
.pyn {
    padding-bottom: 0 !important;
}

.p5 {
    padding: 5px !important;
}

.pt5,
.py5 {
    padding-top: 5px !important;
}

.pb5,
.py5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.pl5,
.px5 {
    padding-left: 5px !important;
}

.pr5,
.px5 {
    padding-right: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.pl10,
.px10 {
    padding-left: 10px !important;
}

.pr10,
.px10 {
    padding-right: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.pl15,
.px15 {
    padding-left: 15px !important;
}

.pr15,
.px15 {
    padding-right: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.pl20,
.px20 {
    padding-left: 20px !important;
}

.pr20,
.px20 {
    padding-right: 20px !important;
}

.p30 {
    padding: 30px !important;
}

.pl30,
.px30 {
    padding-left: 30px !important;
}

.pr30,
.px30 {
    padding-right: 30px !important;
}

input::placeholder {
    color: var(--color-placeholder);
}

input::-webkit-input-placeholder {
    color: var(--color-placeholder);
}

input:-ms-input-placeholder {
    color: var(--color-placeholder);
}

input.form-control.sm {
    padding: 0.25rem 0.5rem;
}

input.form-control.md {
    padding: 0.675rem 0.75rem;
}

input.form-control + input.form-control {
    margin: 5px 0;
}

.drop-container {
    position: relative;
    display: block;
    padding: 10px 0;
    cursor: pointer;
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
}

.drop-title {
    color: #444;
    font-weight: bold;
    text-align: center;
    transition: color 0.2s ease-in-out;
}

input[type='file'] {
    width: 350px;
    max-width: 100%;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--border-color);
}

input[type='file']::file-selector-button {
    margin-right: 20px;
    border: none;
    background: var(--point-color);
    padding: 5px 20px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

input[type='file']::file-selector-button:hover {
    background: var(--hover-color);
}

.inline-b {
    display: inline-block;
}

.empty {
    text-align: center;
    padding: 2rem 0;
}

.empty .icon {
    font-size: 3rem;
    color: var(--sub-text01);
}

.empty p {
    color: var(--sub-text01);
}

.tooltip {
    position: relative;
    cursor: pointer;
}

.tooltip .txt {
    visibility: hidden;
    min-width: 120px;
    background-color: var(--point-color);
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1;
}

.tooltip:hover .txt {
    visibility: visible;
}

#loading {
    position: absolute;
    display: flex;
    padding: 25px;
    flex-direction: column;
    color: #ffae00;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 16px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Layout Elements */

.container {
    margin: auto;
    width: 1280px;
}

.go-header {
    position: relative;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--border-color);
}

.go-header .my-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 15px;
    font-size: 0.75rem;
}

.go-header .my-nav li a {
    display: flex;
    line-height: 18px;
    justify-content: flex-start;
    align-items: center;
    column-gap: 3px;
}

.go-header .my-nav li i {
    display: inline-block;
    width: 18px;
    height: 18px;
}

.go-header .my-nav li i.chatrank {
    background: url(/imgs/icon-chatrank.png) center center/cover no-repeat;
}

.go-header .my-nav li i.picksterrank {
    background: url(/imgs/icon-pickster.png) center center/cover no-repeat;
}

.go-header .my-nav li i.clanrank {
    background: url(/imgs/icon-clanrank.png) center center/cover no-repeat;
}

.go-header .my-nav li i.userrank {
    background: url(/imgs/icon-userrank.png) center center/cover no-repeat;
}

.go-header .my-nav li i.customer {
    background: url(/imgs/icon-customer.png) center center/cover no-repeat;
}

.go-mylog .my-menu li .msg-box .header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    padding: 10px;
    height: 50px !important;
    justify-content: space-between;
    align-items: center;
}

.go-mylog .my-menu li .msg-box .header h5 {
    font-size: 1rem;
}

.go-mylog .my-menu li .msg-box .header .close {
    position: static;
    font-size: 0.75rem;
}

.go-mylog .my-menu li .msg-box .thumb-list {
    font-size: 0.875rem;
}

.go-mylog .my-menu li .msg-box .thumb-list li {
    column-gap: 0;
    padding-right: 30px;
}

.go-msg .thumb-list li.empty,
.go-mylog .my-menu li .msg-box .empty {
    text-align: center;
    padding: 1.5rem 0;
}

.go-msg .thumb-list li.empty i,
.go-mylog .my-menu li .msg-box .empty i {
    padding: 0.5rem 0;
    font-size: 1.75rem;
}

.go-msg .thumb-list li:after,
.go-mylog .my-menu li .msg-box .thumb-list li:after {
    content: '';
    clear: both;
    display: block;
}

.go-msg .thumb-list li .profile-photo,
.go-msg .thumb-list li .msg-icon,
.go-mylog .my-menu li .msg-box .thumb-list li .profile-photo,
.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon {
    float: left;
    flex-shrink: 0;
}

.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon {
    width: 26px;
    height: 26px;
    color: var(--color-white);
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
}

.go-mylog .my-menu li .msg-box .thumb-list li .subject {
    display: flex;
    overflow: hidden;
}

.go-msg .thumb-list li .msg-icon {
    width: 55px;
    height: 55px;
    font-size: 1.25rem;
    margin-right: 10px;
    color: var(--color-white);
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
}

.go-msg .thumb-list li .profile-photo,
.go-msg .thumb-list li .msg-icon {
    flex-shrink: 0;
}

.go-msg .thumb-list li .msg-icon.success,
.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon.success {
    background-color: var(--point-color);
}

.go-msg .thumb-list li .msg-icon.comment,
.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon.comment {
    background-color: var(--color-green);
}

.go-msg .thumb-list li .msg-icon.gamechip,
.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon.gamechip {
    background-color: var(--hover-color);
}

.go-msg .thumb-list li .msg-icon.gift,
.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon.gift {
    background-color: #ff9900;
}

.go-msg .thumb-list li .msg-icon.like,
.go-mylog .my-menu li .msg-box .thumb-list li .msg-icon.like {
    background-color: var(--color-yellow);
}

.go-mylog .my-menu li .msg-box .thumb-list li .subject p {
    font-size: 0.875rem;
    display: block;
}

.go-msg .thumb-list li {
    display: block;
    padding-right: 50px;
    column-gap: 5px;
}

.go-msg .thumb-list li .subject a {
    /*display: flex;*/
    overflow: hidden;
}

.go-msg .thumb-list li .subject a p {
    font-size: 1rem;
    display: flex;
    overflow: hidden;
}

.go-msg .thumb-list li .subject p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.go-msg .thumb-list li a,
.go-mylog .my-menu li .msg-box .thumb-list li a {
    display: block;
}

.go-msg .thumb-list li a.close,
.go-mylog .my-menu li .msg-box .thumb-list li a.close {
    position: absolute;
    display: block;
    right: 0;
    top: 7px;
}

.go-mylog .my-menu li .msg-box .thumb-list .info {
    display: block;
    font-size: 0.75rem;
}

.go-msg .thumb-list li .info {
    display: block;
    font-size: 0.875rem;
}

.go-mylog .my-menu li .msg-box .footer {
    background-color: var(--gray-bg);
    text-align: center;
}

.go-mylog .my-menu li .msg-box .footer a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 0;
}

.go-header .my-nav li.mypage .dropdown-list {
    background-color: var(--gnb-color);
    width: 12rem;
    overflow: hidden;
}

.go-header .my-nav li.mypage .dropdown-list ul li a {
    display: block;
    padding: 0.5rem 0.875rem;
    color: var(--color-white);
    width: 100%;
    height: 100%;
}

.go-header .my-nav li.mypage .dropdown-list ul li a span {
    display: inline-block;
    width: 23px;
    text-align: center;
    margin-right: 10px;
}

.go-header .my-nav li.mypage .dropdown-list ul li:hover {
    background-color: var(--point-color);
}

.go-header .my-nav li.mypage .dropdown-list.panel {
    border-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.go-gnb {
    background-color: var(--color-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.go-gnb .logo {
    display: inline-block;
    width: 126px;
}

.go-gnb .logo object {
    pointer-events: none;
    display: block;
}

.go-gnb > .container > .navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1rem;
}

.go-gnb > .container > .navbar > li {
    position: relative;
    text-align: center;
}

.go-gnb ul li a {
    display: block;
    padding: 25px 15px;
}

.go-gnb ul li a span {
    font-weight: 500;
}

.go-gnb ul li:hover a,
.go-gnb ul li.active a {
    color: var(--point-color);
}

.go-gnb .navbar li:hover,
.go-gnb .navbar li:focus-within {
    transition: 0.3s;
}

.go-gnb .navbar li.new:after {
    content: "N";
    position: absolute;
    top: 15px;
    right: 1px;
    background: var(--color-red);
    font-size: 0.625rem;
    line-height: 10px;
    text-align: center;
    /* padding: 0 3px 2px; */
    border-radius: 5px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    color: #fff;
}

.gnb-sub {
    background-color: var(--gnb-color);
    min-height: 35px;
}

.gnb-sub ul li {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    font-weight: 500;
    font-size: 0.875rem;
}

.gnb-sub ul li a {
    display: block;
    color: var(--color-white);
    padding: 0.5rem 0.75rem;
}

.gnb-sub ul li a:hover,
.gnb-sub ul li.active a {
    color: var(--color-yellow) !important;
}

.gnb-sub ul li ul {
    position: absolute;
    background-color: var(--color-white);
    display: none;
    top: 100%;
    left: -30px;
    width: 150px;
    border: 1px solid var(--border-color);
    z-index: 99;
}

.gnb-sub ul li:hover ul {
    display: block;
}

.gnb-sub ul li ul li {
    display: block;
    border-bottom: 1px solid var(--border-color);
}

.gnb-sub ul li ul li a {
    display: block;
    padding: 0.688rem 1rem;
}

.gnb-sub ul li.new:after {
    content: "N";
    position: absolute;
    top: 5px;
    right: -3px;
    background: var(--color-red);
    font-size: 0.625rem;
    line-height: 10px;
    text-align: center;
    padding: 0 3px 2px;
    border-radius: 5px;
}


.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0.5rem;
    list-style: none;
    font-size: 0.75rem;
}

.breadcrumb li + li:before {
    content: '/';
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: var(--sub-text02);
}

.breadcrumb li a {
    color: var(--sub-text02);
}

.breadcrumb li.active a,
.breadcrumb li:last-child a {
    color: var(--sub-text01) !important;
}

.tabs {
    background-color: #ffffff;
    margin: 0 auto;
    position: relative;
}

.tab_item {
    width: calc(100% / 3);
    height: 70px;
    /*   border-bottom: 3px solid #333333; */
    background-color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    color: #000000;
    display: block;
    float: left;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-top: 18px;
}

.tab_item:hover {
    opacity: 0.75;
}

.tab_item > span {
    font-size: 0.5rem;
    font-weight: 400;
}

input.tab-radio {
    display: none;
}

.tabs input:checked + .tab_item {
    background-color: #ffffff;
    color: var(--color-point);
    box-shadow: 0 0 0 3px var(--color-point) inset;
}

.tabs input:checked + .tab_item > span {
    color: var(--color-point);
}

/* Tab Nav Basic UI */
.tab-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.tab-group a {
    position: relative;
    display: block;
    background-color: var(--gray-bg);
    border: 1px solid var(--border-color);
    width: 100%;
    text-align: center;
    padding: 15px 5px;
    font-weight: 500;
    letter-spacing: -1px;
}

.tab-group a.current,
.tab-group a.active {
    border: 1px solid var(--point-color);
    background-color: var(--color-white);
    color: var(--point-color);
    font-weight: 600;
}

.tab-group .btn {
    flex: 1 1 auto;
}

.tab-content {
    display: none;
}

.tab-content.current,
.tab-content.active {
    display: block;
}

/* 상단 배너 */
.go-pr {
    min-height: 250px;
    border-radius: 1rem;
    padding: 25px;
}

.ev-pr {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: #563ba4;
    color: var(--color-white);
    margin-bottom: 1.875rem;
}

.ev-pr p {
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.6;
}

.ev-pr h2 {
    margin-bottom: 5px;
}

.ev-pr p.highlight {
    color: #ffc300 !important;
    opacity: 1;
}

.ev-pr:after {
    content: '';
    position: absolute;
    top: 70px;
    right: 45px;
    background-image: url(/imgs/ev-pr.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    width: 330px;
    height: 150px;
}

.ev-pr a {
    position: relative;
    display: inline-block;
    padding: 10px 60px 10px 0;
}

.ev-pr a:after {
    content: '';
    background-image: url(/imgs/link-arrow.png);
    background-size: 53px 10px;
    width: 53px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.normal-pr {
    position: relative;
    min-height: 178px;
    padding: 25px;
    border: 1px solid var(--point-color);
}

.normal-pr:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 15px;
    background-image: url(/imgs/clan_pr.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    width: 329px;
    height: 148px;
}

.go-best-chat,
.go-recent-result {
    position: relative;
}

.form-group {
    position: relative;
    margin: 0 0 10px 0;
}

.input-group {
    position: relative;
}

.go-login .zone {
    position: relative;
    padding: 1rem;
}

.go-login .login-form {
    position: relative;
    padding: 0 105px 0 0;
}

.go-login .zone input[type='email'],
.go-login .zone input[type='password'],
.go-login .zone input[type='text'] {
    border: 1px solid var(--border-color);
    width: 100%;
    height: 31px;
    padding: 5px;
    margin-bottom: 2px;
}

.go-login .zone button[type='submit'] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 65px;
    border: 0;
    background-color: var(--gnb-color);
    color: var(--color-white);
}

.go-login input[type='checkbox'] {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.find-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.find-info a::after {
    content: '|';
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0.5;
}

.find-info a:last-child::after {
    content: '';
    padding-right: 0;
}

.keep-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 3px;
}

.sns-links {
    display: flex;
    justify-content: center;
    column-gap: 10px;
}

.sns-links a {
    display: block;
}

.sns-links a img {
    display: block;
}

.pwType-toggle {
    position: absolute;
    background: none;
    border: none;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: var(--sub-text01);
}

/* .validated .invalid-feedback {
  display: block;
} */

.is-invalid ~ .invalid-feedback {
    display: block;
}

input.is-invalid {
    border: 1px solid var(--hover-color);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    font-weight: 500;
    color: #dc3545;
}

.go-account {
    max-width: 400px;
    min-height: 340px;
    margin: 0 auto;
    padding: 50px 0;
}

.go-account .header {
    text-align: center;
    margin: 0 auto 20px;
    width: 126px;
}

.go-account .header .logo {
    display: inline-block;
    width: 126px;
    height: 45px;
}

.go-account .logo object {
    pointer-events: none;
    display: block;
}

.go-account .form-group {
    position: relative;
    float: none;
    margin: 10px 0 0 0;
    border: none;
    background: none;
}

.go-account .form-group input[type='text'],
.go-account .form-group input[type='email'],
.go-account .form-group input[type='password'] {
    height: 45px;
}

.go-account .form-group input:focus {
    border: 1px solid var(--point-color);
}

.go-account .form-group label {
    display: block;
    font-weight: 400;
    margin-bottom: 3px;
}

.go-account .btn-area .btn {
    width: 100%;
    height: 45px;
    font-size: 15px;
    margin: 10px 0 0 0;
    padding: 0;
    line-height: 45px;
}

.go-account .find-info {
    margin-top: 30px;
    text-align: center;
}

.go-account .find-info .bar {
    color: var(--border-color);
    font-size: 13px;
    margin: 0 9px;
}

.go-account .sns-join {
    margin-top: 30px;
}

.go-account .sns-join a {
    position: relative;
    display: block;
    text-align: center;
    height: 50px;
    margin-top: 12px;
    line-height: 50px;
    border: 1px solid var(--border-color);
}

.go-account .sns-join a em {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 12px;
    left: 18px;
    display: block;
    background-size: 24px 24px;
    background-position: 0 0;
}

.go-account .sns-join a.google em {
    background-image: url('/imgs/google-icon.png');
}

.go-account .sns-join a.naver em {
    background-image: url('/imgs/naver-icon.png');
}

.go-account .sns-join a.kakao em {
    background-image: url('/imgs/kakao-icon.png');
}

.go-account .sns-join a.telegram em {
    background-image: url('/imgs/telegram-icon.png');
}

.go-account .sns-join a.wechat em {
    background-image: url('/imgs/wechat-icon.png');
}

.go-account .account-body {
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}

.go-account .account-footer {
    padding: 30px 0;
}

.go-account .login-inline {
    position: relative;
    padding-right: 90px;
}

.go-account .login-inline button {
    position: absolute;
    top: 0;
    right: 0;
}

.card-terms .panel-body,
.card-privacy .panel-body {
    height: 150px;
}

/* Login */
.go-login .sns-join a {
    position: relative;
    display: block;
    text-align: center;
    height: 38px;
    line-height: 38px;
    border: 1px solid var(--border-color);
}

.go-login .sns-join a:hover {
    background-color: var(--point-color);
    color: var(--color-white);
}

.go-login .sns-join a em {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 6px;
    left: 18px;
    display: block;
    background-size: 24px 24px;
    background-position: 0 0;
}

.go-login .sns-join a.google em {
    background-image: url(/imgs/google-icon.png);
}

.go-login .sns-join a.google:hover em {
    background-image: url(/imgs/google-icon-w.png);
}

.go-mylog {
    background-color: var(--color-white);
}

.go-mylog .user-info {
    position: relative;
    display: flex;
    justify-content: flex-start;
    justify-items: center;
    align-items: center;
    padding: 17px 1rem;
    border-bottom: 1px solid #ddd;
    column-gap: 5px;
}

.go-mylog .profile {
    position: relative;
    border-radius: 50%;
}

.go-mylog .profile .profile-photo {
    display: block;
    width: 56px;
    height: 56px;
}

/*
  .go-mylog .profile:after {
    content: "";
    position: absolute;
    background-image: url("/imgs/setting_icon.png");
    background-color: #fff;
    background-size: 10px 10px;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 30px;
    right: -3px;
    bottom: 0;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    width: 23px;
    height: 23px;
    cursor: pointer;
  }
  */
.my-info img {
    vertical-align: middle;
}

.my-info > a,
.my-info > span > a {
    font-size: 110%;
    font-weight: 500;
}

.my-info > a:hover,
.my-info > span > a:hover {
    color: var(--point-color);
    text-decoration: underline;
}

.go-mylog .my-info .id_name {
    display: block;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
}

.go-mylog .my-info ul li {
    position: relative;
    float: left;
    padding: 0 10px;
}

.go-mylog .my-info ul li a {
    color: #666;
    font-size: 12px;
}

.go-mylog .my-info ul li a:hover {
    color: var(--main-text);
}

.go-mylog .my-info ul li:first-child {
    padding: 0 10px 0 0;
}

.go-mylog .my-info ul li:after {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    width: 1px;
    height: 10px;
    background-color: #999;
}

.go-mylog .my-info ul li:last-child {
    padding: 0 0 0 10px;
}

.go-mylog .my-info ul li:last-child:after {
    display: none;
}

.go-mylog .user-info .btn_logout {
    position: absolute;
    top: 1.125rem;
    right: 1rem;
    background-color: #ccd0d4;
    color: #fff;
    font-size: 0.688rem;
    padding: 3px 10px;
    border-radius: 50px;
}

.go-mylog .user-point ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0 16px 0;
    font-size: 0.788rem;
}

.go-mylog .user-point ul li span.badge {
    display: inline-block;
    color: var(--color-white);
    font-weight: 400;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    font-size: 0.563rem;
    line-height: 22px;
    text-align: center;
    text-shadow: none;
}

.go-mylog .my-menu {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

.go-mylog .my-menu:after {
    content: '';
    clear: both;
    display: table;
}

.go-mylog .my-menu > li {
    width: 100%;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.go-mylog .my-menu li:last-child {
    border-right: none;
}

.go-mylog .my-menu li.open {
    border-bottom: 1px solid #fff;
    background-color: var(--color-white);
    color: var(--main-text);
}

.go-mylog .my-menu li > a {
    display: block;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    font-weight: 600;
    transition: 0.3s;
    color: #666;
}

.go-mylog .my-menu li a span {
    position: relative;
}

.go-mylog .my-menu li a span em.badge {
    position: absolute;
    font-style: normal;
    top: -5px;
    right: -20px;
    color: var(--color-white);
    background-color: var(--color-red);
    border-radius: 5px;
    padding: 1px 5px 0 3px;
    text-align: center;
    transform: scale(0.5);
    transform-origin: left;
}

.go-mylog .my-menu li .msg-box {
    position: absolute;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-top: none !important;
    width: 360px;
    display: none;
    transition: 0.3s;
    left: -1px;
    top: 100%;
    box-shadow: rgb(0 0 0 / 15%) 0 1.95px 2.6px;
    z-index: 10;
}

.go-mylog .my-menu li .msg-box .body {
    height: 300px;
    padding: 15px !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.go-mylog .my-menu li.open .msg-box {
    display: block;
    visibility: visible;
    opacity: 1;
}

.go-mylog .my-menu li .msg-box .close {
    position: absolute;
    background-image: none;
    text-indent: unset;
    width: auto;
    height: auto;
    top: 20px;
    right: 20px;
    font-size: 12px;
    padding: 1px 5px;
}

.go-mylog .meta {
    color: #666;
    padding-left: 12px;
}

/* Profile 공통 */
.profile-photo {
    position: relative;
    display: inline-block;
    width: 98px;
    height: 98px;
    background-color: var(--main-bg);
    background-image: url('/imgs/avatar.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    padding: 0;
}

.profile-photo.xs {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.profile-photo.sm {
    width: 26px;
    height: 26px;
}

.profile-photo.md {
    width: 54px;
    height: 54px;
}

.profile-photo.lg {
    width: 120px;
    height: 120px;
}

.profile-photo.big {
    width: 150px;
    height: 150px;
    border: 4px solid var(--color-white);
    box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
}

.profile-photo.block {
    display: block !important;
    margin-left: auto;
    margin-right: auto;
}

.profile-photo img {
    display: block;
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

.id_name {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    column-gap: 2px;
    color: var(--main-text);
}

.id_name a {
    color: var(--main-text);
}

.id_name > a:hover,
.id_name > span > a:hover {
    color: var(--point-color);
    text-decoration: underline;
}

.id_name label.writer {
    background-color: var(--color-white);
    font-size: 0.625rem;
    color: var(--hover-color);
    border: 1px solid var(--hover-color);
    border-radius: 10rem;
    padding: 1px 10px;
    margin-left: 5px;
}

.profile-photo + .id_name {
    margin-left: 10px;
}

.profile-photo.sm + .id_name {
    margin-left: 5px;
}

.profile-photo.xs + .id_name {
    margin-left: 1px;
}

.id_name .chat-profile {
    background-image: url('/imgs/avatar.png');
    background-position: 0 0;
    background-size: cover;
    border-radius: 30px;
    overflow: hidden;
    width: 55px;
    height: 55px;
    position: relative;
    display: inline-block;
    margin-right: 10px;
    background-color: var(--main-bg);
}

.id_name .chat-profile img.chat-symbol {
    display: block;
    width: 100%;
    height: 100%;
}

.id_name .user-level,
.id_name .m-lev {
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-right: 5px;
}

.id_name label.badge {
    display: inline-block;
    font-size: 12px;
    color: var(--color-white);
    padding: 1px 5px;
    border-radius: 3rem;
    margin-right: 3px;
}

.id_name label.badge.host {
    background-color: var(--hover-color);
}

.id_name label.badge.manager {
    background-color: var(--point-color);
}

.my-info img {
    vertical-align: middle;
}

.my-info > a,
.my-info > span > a {
    font-size: 110%;
    font-weight: 500;
}

.my-info > a:hover,
.my-info > span > a:hover {
    color: var(--point-color);
    text-decoration: underline;
}

.chat-list li {
    margin: 5px 0;
}

.chat-list a {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    height: 15px;
    line-height: 15px;
}

span.m-lev {
    display: inline-block;
    background-image: url('/imgs/ribbon_icon.png');
    background-size: cover;
    background-position: 0 0;
    width: 28px;
    height: 31px;
    margin-right: 10px;
    color: var(--color-white);
    text-align: center;
    line-height: 28px;
}

.btn .m-lev {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.clan-lev {
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

.go-latest .go-latest-board .tab-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

.go-latest .go-latest-board .tab-group .tab-link {
    position: relative;
    display: block;
    width: 100%;
    background-color: var(--main-bg);
    border-left: none;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    font-weight: 600;
    padding: 0.75rem 0;
}

.go-latest .go-latest-board .tab-group .tab-link.current {
    background-color: var(--color-white);
    border-right: 1px solid var(--border-color);
    border-bottom: none;
}

.go-latest .go-latest-board .tab-group .tab-link:last-child {
    border-right: none;
}

.go-latest .go-latest-live .panel-body,
.go-latest .go-latest-board .panel-body {
    padding: 1rem;
}

.go-latest .go-latest-live .post-lists,
.go-latest .go-latest-board .post-lists {
    list-style-position: outside;
    font-size: 0.938rem;
    list-style-type: disc;
    padding-left: 17px;
    clear: both;
}

.go-latest-board .photo-lists {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 5px;
}

.go-latest-board .photo-lists li {
    flex-basis: 77px;
}

.go-latest-board .photo-lists li figure {
    width: 100%;
    height: 50px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.go-latest-board .photo-lists li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* user pick list */
.go-latest .user-pick {
    padding: 0 1rem;
}

.go-latest .user-pick .pick-list li {
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 3px;
    padding: 7px 5px;
    font-size: 14px;
    column-gap: 15px;
}

.go-latest .user-pick .pick-list li:last-child {
    border-bottom: none;
}

.go-latest .user-pick .pick-list li .id_name span {
    display: inline-block;
    width: auto;
    font-family: inherit;
    color: var(--main-text) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.go-latest .user-pick .pick-list li span.private:before {
    content: '\f30d';
    font-family: 'Font Awesome 6 Pro';
}

.go-latest .user-pick .pick-list li span.private {
    display: inline-block;
    background-color: #ccc;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    color: var(--color-white);
}

.go-latest .user-pick .pick-list li span.chat {
    display: inline-block;
    background-color: #ccc;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    color: var(--color-white);
}

.go-latest .user-pick .pick-list li span.chat.on {
    background-color: #ff9900;
}

.go-latest .user-pick .pick-list li span .odd {
    background: #2eabd9;
    background: -webkit-linear-gradient(0deg, #2eabd9, #47c9f9);
    background: linear-gradient(0deg, #2eabd9, #47c9f9);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span .even {
    background: #e83144;
    background: -webkit-linear-gradient(0deg, #e83144, #f86f7e);
    background: linear-gradient(0deg, #e83144, #f86f7e);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span .under {
    background: #2eabd9;
    background: -webkit-linear-gradient(0deg, #2eabd9, #47c9f9);
    background: linear-gradient(0deg, #2eabd9, #47c9f9);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span .over {
    background: #e83144;
    background: -webkit-linear-gradient(0deg, #e83144, #f86f7e);
    background: linear-gradient(0deg, #e83144, #f86f7e);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span .small {
    background: #60b13f;
    background: -webkit-linear-gradient(0deg, #60b13f, #a0e186);
    background: linear-gradient(0deg, #60b13f, #a0e186);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span .middle {
    background: #2eabd9;
    background: -webkit-linear-gradient(0deg, #2eabd9, #47c9f9);
    background: linear-gradient(0deg, #2eabd9, #47c9f9);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span .large {
    background: #e83144;
    background: -webkit-linear-gradient(0deg, #e83144, #f86f7e);
    background: linear-gradient(0deg, #e83144, #f86f7e);
    border-radius: 20px;
}

.go-latest .user-pick .pick-list li span.even,
.go-latest .user-pick .pick-list li span.odd,
.go-latest .user-pick .pick-list li span.under,
.go-latest .user-pick .pick-list li span.over,
.go-latest .user-pick .pick-list li span.large,
.go-latest .user-pick .pick-list li span.middle,
.go-latest .user-pick .pick-list li span.small {
    position: relative;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
}

.go-latest .user-pick .pick-list li span.even > i,
.go-latest .user-pick .pick-list li span.odd > i,
.go-latest .user-pick .pick-list li span.under > i,
.go-latest .user-pick .pick-list li span.over > i,
.go-latest .user-pick .pick-list li span.large > i,
.go-latest .user-pick .pick-list li span.middle > i,
.go-latest .user-pick .pick-list li span.small > i {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--light-color);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 90%;
    transform: scale(90%);
}

.go-latest .user-pick .pick-list.ranking {
    list-style: none;
    counter-reset: list;
}

.go-latest .user-pick .pick-list.ranking > li:before {
    background-color: var(--color-red);
    content: counter(list);
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
    border-radius: 50%;
    text-align: center;
    color: var(--color-white);
    transform: translateY(-50%);
}

.go-latest .user-pick .pick-list.ranking > li {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 2.125rem;
    counter-increment: list;
}

/* 채팅방 리스트 */
.no-scroll {
    overflow: hidden;
}

.gochat-rank {
    display: flex;
    flex-direction: column;
}

.chat-list a:hover {
    color: var(--point-color);
}

.gochat-frame-info {
    position: relative;
}

.gochat-frame-info .popup-sub-nav {
    background-color: var(--sub-text01);
}

.gochat-frame-info .tab-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -1px 0 0 0;
}

.gochat-frame-info .tab-group a {
    display: block;
    width: 100%;
    border-top: none;
}

.gochat-frame-info .pickreg-toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    color: var(--color-white);
    background: var(--color-red);
    border: none;
    z-index: 100;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}

.gochat-frame-info .pickreg-toggle i {
    font-size: 1.25rem;
}

.gochat-frame-info .pickreg-toggle small {
    font-size: 0.5rem;
    display: block;
}

.gochat-frame-info .pickreg-layer {
    position: fixed;
    height: 660px;
    background: #054e64;
    bottom: 0;
    right: -360px;
    z-index: 50;
    transition: 300ms;
}

.gochat-frame-info .pickreg-layer.show {
    right: 0;
}

.gochat-empty {
    padding: 100px 0;
    text-align: center;
}

.gochat-empty i {
    font-size: 100px;
    color: var(--sub-text02);
}

.gochat-list .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.gochat-list .item.rank1 {
    background-color: var(--main-bg);
    border: 1px solid var(--color-blue);
}

.gochat-list .item.rank2 {
    background-color: var(--warning-bg);
    border: 1px solid var(--color-red);
}

.gochat-list .item.rank3 {
    background-color: #d9f3ef;
    border: 1px solid var(--color-green);
}

.gochat-list .item.rank1:hover,
.gochat-list .item.rank2:hover,
.gochat-list .item.rank3:hover {
    background-color: transparent;
}

.gochat-list .item .rank {
    width: 70px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.gochat-list .item .profile-ranking {
    display: inline-block;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    width: 40px;
    font-size: 1.175rem;
    font-weight: 600;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.gochat-list .item .chat-profile {
    background-image: url(/imgs/chat_bg_icon.png);
    background-position: 0 0;
    background-size: cover;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    overflow: hidden;
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.gochat-list .item .chat-profile img {
    background-color: var(--color-white);
    display: block;
}

.gochat-list .item .meta li {
    position: relative;
    padding-right: 7px;
}

.gochat-list .item .meta li:last-child {
    padding-right: 0;
}

.gochat-list .item .host-info {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.gochat-list .item .host-info .subject {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    column-gap: 5px;
    font-size: 1rem;
    font-weight: 600;
}

.gochat-list .item .host-info .subject .badge {
    border-radius: 5px;
    font-size: 0.688rem;
    font-weight: 400;
    color: var(--color-white);
    padding: 2px 7px;
}

.gochat-list .item .host-info .subject .badge.private {
    background-color: var(--color-green);
}

.gochat-list .item .host-info .subject .badge.resting {
    background-color: var(--color-red);
}

.gochat-list .item .host-info .subject .badge.open {
    background-color: var(--color-sky);
}

.gochat-list .item .host-info .meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--sub-text01);
    font-size: 0.813rem;
    column-gap: 7px;
}

.gochat-list .item .host-info .meta li.game-name {
    background: url(/imgs/ready-icon.png) left center no-repeat;
    background-size: 16px 16px;
    padding-left: 20px;
}

.gochat-list .item .host-info .meta li:last-child {
    padding-right: 0;
}

.gochat-list .item .host-info .meta li:last-child:after {
    display: none;
}

.gochat-list .item .host-info .meta li:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 7px;
    background-color: #ccc;
    transform: translateY(-50%);
}

.gochat-list .item .host-info .m-lev {
    width: 21px;
    height: 21px;
}

.gochat-list .item .chat-info {
    position: absolute;
    top: 50%;
    right: 1rem;
    display: flex;
    flex-direction: column;
    text-align: right;
    color: var(--sub-text02);
    row-gap: 3px;
    height: auto;
}

.gochat-list .item .chat-info .meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.75rem;
    column-gap: 7px;
}

.gochat-list .item .premium {
    position: absolute;
    top: -6px;
    right: -5px;
    background-image: url(/imgs/badge_premium.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 109px 32px;
    width: 109px;
    height: 32px;
}

/* 채팅방 개설 Form */
#private:checked ~ .tab-content {
    display: block;
}

/* 채팅방 보기 */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gnb-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--color-white);
    height: 80px;
    padding: 0 15px;
    cursor: pointer;
}

.chat-header .f-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 15px;
}

.chat-header .f-right {
    display: inline-flex;
    align-items: center;
}

.chat-header .rank {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.chat-header .profile-ranking {
    display: inline-block;
    margin: 0 auto 4px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    width: 36px;
    font-size: 1.175rem;
    font-weight: 600;
    height: 36px;
    text-align: center;
    line-height: 36px;
}

.chat-header .chat-profile {
    background-image: url(/imgs/chat_bg_icon.png);
    background-color: var(--main-bg);
    background-position: 0 0;
    background-size: cover;
    overflow: hidden;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: inline-block;
}

.chat-header .chat-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 5px;
}

.chat-header .chat-info .id_name,
.chat-header .chat-info .id_name a {
    color: var(--color-white) !important;
}

.chat-header label {
    color: var(--color-white);
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 10px;
    text-align: center;
}

.chat-header .chat-record {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 5px;
}

.chat-header label.record {
    background-color: var(--point-color);
}

.chat-header label.score {
    background-color: var(--sub-text01);
}

.chat-header .chat-info i {
    color: var(--point-color);
}

.chat-header .btn-default-line {
    background-color: transparent;
}

.popup-chat-wrap .popup-sub-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--border-color);
    height: 43px;
    padding: 10px 15px;
}

.popup-chat-wrap .popup-sub-info .subject {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}

.popup-chat-wrap .popup-sub-info .status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 15px;
}

.gochat-frame-talk .chat-content {
    height: calc(100vh - 123px);
}

.best-chat {
    position: absolute;
    top: 0;
    left: -60px;
    width: 52px;
}

.chatroom-best {
    background-color: var(--color-white);
    text-align: center;
    z-index: 1;
    box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.chatroom-best > h2.premium {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    padding: 10px 0;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.chatroom-best.pwb-best > h2 {
    background-color: var(--color-red);
    padding: 10px 0;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.chatroom-best .list {
    padding: 3px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
}

.chatroom-best .list li {
    position: relative;
    display: block;
    cursor: pointer;
    width: 48px;
    height: 48px;
}

.chatroom-best .list li span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    background-image: url(/imgs/chat_bg_icon.png);
    background-color: var(--main-bg);
    background-position: 0 0;
    background-size: cover;
    width: 48px;
    height: 48px;
    overflow: hidden;
    margin: 0 auto;
}

.chatroom-best .list li span img {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chatroom-best .list li:hover span {
    border: 1px solid var(--hover-color);
    width: 50px;
    height: 50px;
}

.chatroom-best .list li .info {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -1px;
    width: 370px;
    height: 100%;
    border-radius: 1px;
    text-align: left;
    font-size: 12px;
    color: var(--color-white);
    background: var(--hover-color);
    padding: 7px 70px 7px 10px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
    z-index: 100;
    overflow: hidden;
    display: none;
}

body.right-theme .chatroom-best .list li .info {
    left: auto;
    right: 100%;
}

.chatroom-best .list li .info p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chatroom-best .list li .info small {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.chatroom-best .list li:hover .info {
    display: block;
}

body.right-theme .best-chat {
    right: -70px !important;
    left: auto;
}

#chatrooms {
    width: 100%;
    height: 100%;
}

.chat-box {
    height: calc(100% - 50px);
}

.chat-box .tab-group {
    margin: 0;
}

#chatrooms.chat-box .tab-group {
    background-color: var(--gnb-color);
    height: 50px;
}

#chatrooms.chat-box .tab-group a {
    background-color: transparent;
    border: none;
    padding: 7px 5px;
    color: rgba(255, 255, 255, 0.5);
    bottom: 0;
}

#chatrooms.chat-box .tab-group a.current {
    background-color: transparent;
    border: none !important;
    color: rgba(255, 255, 255, 1);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 50px;
    background: rgba(0, 0, 0, 0.3);
    height: 26px;
    border-radius: 50px;
}

.toggle-switch[name]:hover::after {
    position: absolute;
    content: attr(name);
    min-width: 100px;
    font-size: 0.688rem;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 5px;
    background-color: #000;
    color: var(--color-white);
    padding: 5px;
    border-radius: 3px;
    z-index: 10;
}

.toggle-switch input {
    display: none;
}

.toggle-switch .btn-on {
    position: relative;
    width: 46px;
    height: 22px;
    font-size: 0.75rem;
    background: rgb(46, 85, 128);
    background: linear-gradient(180deg,
            rgba(46, 85, 128, 1) 0%,
            rgba(80, 123, 168, 1) 100%);
    border-radius: 50px;
    margin: 2px;
    cursor: pointer;
}

.toggle-switch .btn-on:after {
    content: '';
    position: absolute;
    top: 50%;
    height: 6px;
    width: 6px;
    right: 5px;
    transform: translateY(-50%);
    border-radius: 23px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.2s;
}

.toggle-switch .btn-on span {
    display: block;
}

.toggle-switch .btn-on span:before {
    content: 'OFF';
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
    left: 50%;
    top: 50%;
    font-weight: 600;
    transform: translate(-50%, -50%);
    margin-left: -5px;
}

.toggle-switch input:checked + .btn-on span:before {
    content: 'ON';
    color: var(--color-white);
}

.toggle-switch input:checked + .btn-on,
#chatrooms.chat-box .toggle-switch input:checked + .btn-on {
    background: rgb(233, 105, 13);
    background: linear-gradient(0deg,
            rgba(233, 105, 13, 1) 0%,
            rgba(255, 152, 47, 1) 100%);
}

.toggle-switch input:checked + .btn-on:after {
    content: '';
    position: absolute;
    top: 50%;
    height: 6px;
    width: 6px;
    right: 5px;
    transform: translateY(-50%);
    border-radius: 23px;
    background-color: #fff;
    transition: 0.2s;
}

/* End Toggle Switch */

.chat-box .tab-group a small {
    display: block;
    font-size: 0.5rem;
}

.chat-box .tab-group a span {
    display: inline-block;
    padding: 6px;
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.chat-box .tab-group a.current span {
    background-color: var(--main-bg);
    color: var(--gnb-color);
    border: none;
}

.chat-box .tab-content {
    position: relative;
    height: calc(100% - 48px);
}

.chat-box .notice-latest {
    background-color: #dae7f5;
    height: 40px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.chat-box .latest-rolling {
    position: relative;
    height: auto;
    padding: 0 15px;
}

.chat-box .latest-rolling li {
    display: flex;
    overflow: hidden;
    height: 40px;
    width: 100%;
}

.chat-box .latest-rolling li a {
    background-image: url(/imgs/notice_badge.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 46px 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 5px 0 55px;
    font-size: 0.875rem;
    display: block;
    width: 330px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*고픽톡*/
#gopick-talk {
    height: calc(100% - 44px);
    overflow-y: hidden;
    min-width: 420px;
}

#gopick-talk .tab-nav {
    position: relative;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
}

#gopick-talk .tab-nav .tab-link {
    display: block;
    width: 100%;
    padding: 0 5px;
    text-align: center;
    color: var(--sub-text02);
    font-weight: 600;
    line-height: 44px;
}

#gopick-talk .tab-nav .tab-link.current {
    position: relative;
    color: var(--main-text);
}

#gopick-talk .tab-nav .tab-link.current:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

#gopick-talk .talk-setting {
    position: relative;
    height: 44px;
    font-size: 0.75rem;
    background-color: var(--gray-bg);
}

#gopick-talk .talk-setting .form-group {
    display: flex;
    column-gap: 5px;
    margin-bottom: 0;
}

#gopick-talk .tab-content {
    height: calc(100% - 44px);
}

#gopick-talk .talk-list {
    height: calc(100% - 44px);
    overflow-y: auto;
}

#gopick-talk .talk-list li {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

#gopick-talk .talk-list li .time-stamp {
    position: absolute;
    font-size: 0.688rem;
    color: var(--sub-text02);
    top: 0.75rem;
    right: 1rem;
}

#gopick-talk .talk-list li .btn {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

#gopick-talk .talk-list li p {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
}

#gopick-talk .tab-nav .dropdown-toggle {
    display: block;
    padding: 5px 10px;
    color: var(--sub-text02);
    font-size: 1.125rem;
}

#gopick-talk .talk-notice {
    background-color: var(--main-bg);
    padding: 10px;
}

#gopick-talk .talk-notice .inner {
    background-color: var(--color-white);
    border: 1px solid var(--color-blue);
    padding: 15px;
    box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.2);
}

#gopick-talk .talk-notice .inner ul li {
    font-size: 0.75rem;
}

#gopick-talk .talk-notice .inner .talk-condition {
    border-top: 1px solid var(--color-blue);
    margin-top: 15px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    padding-bottom: 0;
    text-align: center;
}

#gopick-talk .chat-view {
    height: calc(100% - 44px);
}

#gopick-talk .chat-view iframe {
    height: 100%;
}

#gopick-talk .talk-notice + .chat-view {
    height: calc(100% - 290px);
}

#gopick-talk .talk-notice + .chat-view.recall {
    height: calc(100% - 215px);
}

#gopick-talk .empty,
.pick-info .empty {
    text-align: center;
    padding: 2rem 0;
}

#gopick-talk .empty .icon,
.pick-info .empty .icon {
    font-size: 3rem;
    color: rgba(0, 0, 0, 0.2);
}

#gopick-talk .empty p,
.pick-info .empty p {
    color: var(--sub-text02);
}

/* Chat Color */
.chat_red {
    font-weight: 600 !important;
    color: #f64356;
}

.chat_blue {
    font-weight: 600 !important;
    color: #1983df;
}

.chat_green {
    font-weight: 600 !important;
    color: #199681;
}

.chat_violet {
    font-weight: 600 !important;
    color: #8911fa;
}

.chat_orange {
    font-weight: 600 !important;
    color: #ff6600;
}

.chat_yellow {
    font-weight: 600 !important;
    color: #e49700;
}

/* PICK */
.pick-cate {
    border-bottom: 1px solid var(--border-color);
}

.pick-cate ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.pick-cate ul li a {
    display: block;
    padding: 5px 0;
    line-height: 30px;
    text-align: center;
    border-right: 1px solid var(--border-color);
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(236, 243, 249, 1) 100%);
}

.pick-cate ul li a.current {
    background: var(--color-white);
}

.pick-cate ul li:last-child a {
    border-right: none;
}

.pick-nav {
    position: relative;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(33.333333%, 1fr));
}

.pick-nav .pick-game a {
    display: block;
    color: var(--gnb-color);
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: var(--main-bg);
    border: none;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: -1px;
}

.pick-nav div:nth-last-of-type(1) {
    border-right: 1px solid var(--border-color);
}

.pick-nav .pick-game a.current {
    background-color: var(--dark-color);
    color: var(--color-white);
    border-bottom: 1px solid var(--dark-color);
}

.pick-nav .pick-game.game-sub-menu {
    width: 100%;
    grid-area: span 1 / span 3;
}

.pick-nav .pick-game.game-sub-menu a {
    background-color: var(--dark-color);
    color: var(--color-white);
    border-bottom: 1px solid var(--dark-color);
}

.pick-nav .pick-game.game-sub-menu a.current {
    color: var(--color-yellow);
}

.pick-nav.short {
    height: 50px;
    overflow: hidden;
}

#chat-pick .view-toggle {
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    cursor: pointer;
    background-color: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--border-color);
}

#chat-pick .view-toggle span {
    position: relative;
    line-height: 50px;
    font-weight: 600;
    padding-right: 20px;
}

#chat-pick .view-toggle span:after {
    content: '\f107';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

#chat-pick .view-toggle span.up:after {
    content: '\f106';
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.msg-list {
    background-color: var(--main-bg);
    height: calc(100% - 60px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.msg-list .chatting-item,
.msg-list .chatting-warning,
.msg-list .chatting-alarm,
.msg-list .chatting-exit,
.msg-list .chatting-clean,
.msg-list .gopicktalk-guide {
    clear: both;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px 10px;
    margin: 2px 0;
}

.msg-list .chatting-item .chatMsg {
    overflow-x: hidden;
    word-break: break-all;
    line-height: 130%;
    font-size: 0.875rem;
    padding: 0 7px;
}

.msg-list .chatting-alarm .chatMsg {
    overflow-x: hidden;
    word-break: break-all;
    line-height: 130%;
}

.msg-list .chatting-alarm .chatUser,
.msg-list .chatting-item .chatUser {
    position: relative;
    font-size: 0.875rem;
}

.msg-list .chatting-item .chatUser a {
    font-weight: 600;
}

#open-chatting.msg-list .chatting-warning {
    background-color: var(--hover-color);
    color: var(--color-white);
}

#open-chatting.msg-list .chatting-alarm {
    background-color: var(--color-green);
    color: var(--color-white);
    padding: 5px 10px;
}

#open-chatting.msg-list .game-alarm {
    background-color: var(--color-white);
    border: 2px solid var(--point-color);
    border-radius: 0.5rem;
    margin: 5px 15px;
}

#open-chatting.msg-list .gopicktalk-guide {
    background-color: var(--gray-bg);
    color: var(--main-text);
    font-size: 0.75rem;
}

#open-chatting.msg-list .gopicktalk-guide h6 {
    font-size: 0.875rem;
}

#open-chatting.msg-list .chat-gift {
    background-color: var(--color-white);
    border-radius: 0.5rem;
    width: 75%;
    padding: 0;
    overflow: hidden;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 10%);
}

#open-chatting.msg-list .gift-info {
    background-color: #8778d6;
    padding: 10px;
}

#open-chatting.msg-list .chat-gift .gift-img {
    background-color: var(--color-white);
    border-radius: 0.3rem;
    padding: 10px;
    text-align: center;
}

#open-chatting.msg-list .chat-gift .gift-img img {
    display: block;
    margin: 0 auto;
    width: 212px;
    height: 127px;
}

#open-chatting.msg-list .chat-gift .gift-img p {
    text-align: center;
    font-weight: 600;
}

#open-chatting.msg-list .chat-gift .gift-img small {
    display: block;
    padding-top: 5px;
    line-height: 1.3;
}

#open-chatting.msg-list .chat-gift .recipient {
    background-color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 0.3rem;
    margin: 10px;
    column-gap: 5px;
}

#group-chatting.msg-list .chatting-warning {
    background-color: var(--warning-bg);
    border: 2px dotted var(--color-red);
    color: var(--color-red);
    border-radius: 0.5rem;
    margin: 5px 15px;
}

#group-chatting.msg-list .chatting-alarm {
    background-color: #d9e7f3;
    border: 2px dotted var(--point-color);
    color: var(--color-blue);
    border-radius: 0.5rem;
    margin: 5px 15px;
}

#group-chatting.msg-list .chatting-alarm.pick-result {
    background-color: var(--color-white);
    border: 2px solid var(--point-color);
    border-radius: 0.5rem;
    color: var(--main-text);
    margin: 5px 15px;
}

#group-chatting.msg-list .chatting-clean {
    background-color: #c2eee7;
    border: 2px dotted var(--color-green);
    color: #138d78;
    border-radius: 0.5rem;
    margin: 5px 15px;
}

#group-chatting.msg-list .chatting-exit {
    background-color: #eee;
    border: 2px dotted #c0bfbf;
    border-radius: 0.5rem;
    margin: 5px 15px;
    color: #666;
}

.msg-list .chatting-alarm .chat-time,
.msg-list .chatting-warning .chat-time,
.msg-list .chatting-clean .chat-time,
.msg-list .chatting-exit .chat-time {
    display: flex;
    align-items: center;
    margin-top: 0;
}

.msg-list.t-12 .chatUser,
.msg-list.t-12 .chatMsg {
    font-size: 0.75rem !important;
}

.msg-list.t-13 .chatUser,
.msg-list.t-13 .chatMsg {
    font-size: 0.813rem !important;
}

.msg-list.t-14 .chatUser,
.msg-list.t-14 .chatMsg {
    font-size: 0.875rem !important;
}

.msg-list.t-15 .chatUser,
.msg-list.t-15 .chatMsg {
    font-size: 0.938rem !important;
}

.msg-list.t-16 .chatUser,
.msg-list.t-16 .chatMsg {
    font-size: 1rem !important;
}

.msg-list.t-17 .chatUser,
.msg-list.t-17 .chatMsg {
    font-size: 1.063rem !important;
}

.msg-list.t-18 .chatUser,
.msg-list.t-18 .chatMsg {
    font-size: 1.125rem !important;
}

.chat-wrap {
    width: 100%;
    height: 100%;
}

.chat-live-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 65px;
}

.chat-live-header .logo {
    display: inline-block;
    width: 126px;
}

.chat-live-header .logo object {
    pointer-events: none;
    display: block;
}

.chat-live-header nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0.75rem;
}

.chat-live-header nav button {
    background-color: var(--sub-text02);
    border: none;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    color: var(--color-white);
}

.chat-live-header nav button.current {
    background-color: var(--color-blue);
}

.chat-grid {
    display: grid;
    grid-gap: 1rem;
    padding: 0 1rem;
    height: calc(100vh - 105px);
}

.chat-grid-2 {
    grid-template-columns: 600px 1fr;
}

.chat-grid-3 {
    grid-template-columns: 600px 1fr 320px;
}

.chat-live {
    min-width: 330px;
}

.pick-live,
.chat-live,
.room-list,
.room-setting,
.chat-user,
.drop-user {
    position: relative;
    height: calc(100vh - 105px);
    border: 1px solid var(--border-color);
}

.pick-live .title-flex,
.chat-live .title-flex,
.room-list .title-flex,
.room-setting .title-flex,
.chat-user .title-flex,
.drop-user .title-flex {
    padding-left: 1rem;
    padding-right: 1rem;
    color: var(--color-white);
    height: 50px;
}

.pick-live .title-flex a,
.chat-live .title-flex a,
.room-list .title-flex a,
.room-setting .title-flex a,
.chat-user .title-flex a,
.drop-user .title-flex a {
    color: var(--color-white);
}

.pick-live .title-flex {
    background-color: var(--color-sky);
}

.chat-live .title-flex {
    background-color: var(--gnb-color);
}

.room-list .title-flex {
    background-color: var(--color-red);
}

.room-setting .title-flex {
    background-color: var(--color-orange);
}

.chat-user .title-flex,
.drop-user .title-flex {
    background-color: var(--color-purple);
}

.pick-live .title-flex h6 {
    width: 320px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.chat-grid .live-body {
    position: relative;
    border-top: none;
    height: calc(100% - 50px);
    overflow: hidden;
}

.pick-live .control-table {
    background-color: #a1dff1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 50px;
}

.pick-live .control-table .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}

.pick-live .control-table .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pick-live .control-table .meta {
    background-color: var(--color-white);
    padding-right: 10px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.pick-live .control-table .meta em + em {
    border-left: 1px solid #ccc;
    margin-left: 5px;
    padding-left: 5px;
}

.pick-live .control-table .left span,
.pick-live .control-table .right span {
    display: inline-block;
    background-color: var(--color-sky);
    color: var(--color-white);
    padding: 3px 7px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-right: 8px;
}

.pick-live .control-table .left em {
    font-style: normal;
}

.pick-live .control-table .right em {
    font-family: 'arial';
    font-style: normal;
    color: var(--color-red);
}

.pick-live .host-table {
    background-color: var(--main-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-left: 1rem;
    padding-right: 1rem;
    height: 50px;
}

.pick-live .host-table .data-select {
    width: 180px;
}

.pick-live .record-table {
    overflow-y: auto;
    height: calc(100% - 110px);
}

.pick-live .record-table.host {
    height: calc(100% - 160px);
}

.pick-live .record-table span {
    position: relative;
}

.pick-live .footer .time {
    display: inline-block;
    width: 55px;
}

span.odd > i.pwb,
span.odd > i.lucky,
span.even > i.pwb,
span.even > i.lucky,
span.under > i.pwb,
span.under > i.lucky,
span.over > i.pwb,
span.over > i.lucky,
span.green > i.lucky,
span.large > i.pwb,
span.middle > i.pwb,
span.small > i.pwb,
span.odd > i.moneydot,
span.even > i.moneydot,
span.under > i.moneydot,
span.over > i.moneydot {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--color-white);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 90%;
    transform: scale(90%);
}

span.odd > i.lucky,
span.even > i.lucky,
span.green > i.lucky,
span.under > i.lucky,
span.over > i.lucky {
    background-color: #f64356;
}

.pick-live .footer {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--border-color);
    height: 60px;
    padding: 0 1rem;
}

.pick-live table,
.pick-reset table {
    position: relative;
    border: none;
}

.pick-live table thead,
.pick-reset table thead {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.pick-live table th,
.pick-reset table thead th {
    background-color: var(--main-bg);
}

.pick-live table th:first-child,
.pick-live table td:first-child {
    border-left: none;
}

.pick-live table th:last-child,
.pick-live table td:last-child {
    border-right: none;
}

.pick-live table tr:last-child td {
    border-bottom: none;
}

.pick-live table th .select-selected {
    background-color: var(--color-sky);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
}

.pick-live .record-table table tr.sucess td {
    background-color: var(--warning-bg);
}

.pick-live .record-table table tr.fail td {
    background-color: var(--gray-bg);
}

.pick-live .record-table table tr.fail td span {
    filter: grayscale(100%);
    opacity: 0.5;
}

.pick-live .modal-body {
    overflow-y: auto;
    height: calc(100% - 90px);
}

.pick-reset {
    overflow-y: auto;
    height: 350px;
}

.chat-live .msg-list .pick-result .chat-time {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin-top: 5px;
    border-top: 1px solid var(--border-color);
}

.room-list .gochat-list {
    background-color: var(--main-bg);
    overflow-y: auto;
    height: 100%;
}

.room-list .gochat-list .item {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 10px 10px 10px 70px;
    margin-bottom: 0;
    cursor: pointer;
}

.room-list .gochat-list .item .chat-profile {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
}

.room-list .gochat-list .item .host-info {
    row-gap: 3px;
}

.room-list .gochat-list .item:last-child {
    border-bottom: none;
}

.room-list .gochat-list .item .id_name {
    font-size: 0.688rem;
}

.room-list .gochat-list .item .id_name .m-lev {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}

.room-list .gochat-list .item .host-info .subject {
    font-size: 0.875rem;
}

.room-list .gochat-list .item .meta {
    font-size: 0.688rem;
    column-gap: 5px;
}

.room-list .gochat-list .item .meta li {
    padding-right: 5px;
}

.room-setting .live-body {
    padding: 1rem;
}

#chat-room {
    height: 720px;
    overflow-y: auto;
}

#chat-room .room-list {
    height: auto;
}

#chat-room .room-list .gochat-list .item .chat-profile {
    width: 48px;
    height: 48px;
}

.chat-user ul li,
.drop-user ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 3px;
    padding: 7px 5px;
    font-size: 14px;
    column-gap: 15px;
}

.chat-user ul li:last-child,
.drop-user ul li:last-child {
    border-bottom: none;
}

.chat-user ul .id_name span,
.drop-user ul .id_name span {
    display: inline-block;
    width: auto;
    font-family: inherit;
    color: var(--main-text) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.chat-live-footer {
    text-align: center;
    padding: 8px 0;
}

.host-pick {
    display: flex;
    padding: 1rem;
}

.pick-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 0.5rem;
    font-size: 0.75rem;
}

.pick-result-header h6 {
    font-size: 0.875rem;
}

.pick-result-header .badge,
.pick-board .fx_result_badge {
    padding: 3px 8px;
    border-radius: 30px;
}

.pick-result-header .badge.success {
    background-color: var(--warning-bg);
    border: 1px solid var(--color-red);
    color: var(--color-red);
}

.pick-result-header .badge.fail {
    background-color: var(--gray-bg);
    border: 1px solid var(--border-color);
    color: var(--sub-text02);
}

.pick-result-header ul li span {
    position: relative;
    display: block;
    font-weight: 700;
    border-radius: 25px;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    text-align: center;
    color: var(--color-white);
    line-height: 26px;
    font-size: 0.75rem;
}

.host-pick span {
    position: relative;
    display: block;
    font-weight: 700;
    border-radius: 25px;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    text-align: center;
    color: var(--color-white);
    line-height: 26px;
    font-size: 0.75rem;
}

.host-pick span img {
    display: block;
}

.host-pick span i.pwb,
.host-pick span i.lucky {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--color-white);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 80%;
    transform: scale(80%);
}

.host-pick span i.lucky {
    background-color: #f64356;
}

.pick-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 5px;
}


.pick-board ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
}

.pick-board ul li {
    text-align: center;
}

.pick-board .fx_result {
    display: flex;
    margin-right: 15px;
}

.pick-board .fx_result h6 {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
}

.pick-board .fx_result h6.nullity {
    background-color: #ccc;
    color: #000;
}

.pick-board .fx_result ul {
    display: unset;
}

.pick-board .fx_result ul li {
    display: block;
    margin: 0 15px;
    text-align: left;
}

.pick-board .fx_result_badge {
    position: relative;
}

.pick-board .fx_result_badge::before {
    position: absolute;
    left: -15px;
    top: -5px;
    content: "";
    width: 1px;
    height: 35px;
    background-color: #d9d9d9;
}

.pick-board .fx_result_badge.success {
    background-color: var(--warning-bg);
    border: 1px solid var(--color-red);
    color: var(--color-red);
}

.pick-board .fx_result_badge.fail {
    background-color: var(--gray-bg);
    border: 1px solid var(--border-color);
    color: var(--sub-text02);
}

.pick-board .fx_result_badge.badge_nullity {
    background-color: #ccc;
    color: #000;
    border: 1px solid var(--sub-text02);
}

.pick-board span.total_odd {
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    outline: 3px solid var(--color-blue);
    color: #fff !important;
    background-color: #000;
    line-height: 19px;
    padding: 1px;
    font-size: 13px;
    border: 2px solid var(--color-white);
    margin-left: 3px;
}

.pick-board span.total_even {
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    outline: 3px solid var(--color-red);
    color: #fff !important;
    background-color: #000;
    line-height: 19px;
    padding: 1px;
    font-size: 13px;
    border: 2px solid var(--color-white);
    margin-left: 3px;
}

.pick-board.squid ul .left,
.pick-live .record-table span.squid.left {
    background-image: url(/imgs/triangle.png);
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    background-size: 16px 14px;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

.pick-board.squid ul .right,
.pick-live .record-table span.squid.right {
    background-image: url(/imgs/circle.png);
    background-color: var(--color-red);
    border-color: var(--color-red);
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

.pick-info {
    height: calc(100vh - 122px);
    overflow-y: auto;
}

.pick-info .latest-pick {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
}

.pick-info .host-pick-list {
    padding: 0.875rem;
}

.pick-info .host-pick-list::-webkit-scrollbar {
    display: none;
}

/* leader pick */
.leader-pick {
    background-color: var(--color-white);
    border: 2px solid var(--point-color);
    border-radius: 0.5rem;
}

.leader-pick .leader-pick-title {
    background: var(--gnb-color);
    border-radius: 6px 6px 0 0;
    padding: 0.375rem;
}

.leader-pick h6 {
    text-align: center;
    color: var(--color-white);
    font-size: 0.875rem;
}

.leader-pick .pick-alarm {
    border: none;
    border-radius: 0 0 6px 6px;
    margin: 0;
    padding: 10px;
}

.leader-pick.result .pick-alarm {
    background: var(--color-white);
}

.leader-pick .leader-pick-bottom {
    padding: 0.375rem;
    text-align: center;
    font-size: 0.875rem;
    border-top: 1px solid var(--border-color);
}

.leader-pick.result {
    border: 1px solid var(--border-color);
    margin-bottom: 0.875rem;
}

.leader-pick.result .leader-pick-title {
    background: var(--gray-bg);
}

.leader-pick.result h6 {
    color: var(--main-text);
    font-weight: 400;
}

.leader-pick .host-pick {
    justify-content: center !important;
}

.leader-pick .pick-board.baseball ul,
.leader-pick .pick-board.soccer ul,
.leader-pick .pick-board.sutda ul,
.leader-pick .pick-board.racoon ul,
.leader-pick .pick-board.rps ul,
.leader-pick .pick-board.squid ul {
    width: 205px;
}

.leader-pick .pick-board.btc.mix ul {
    width: 130px;
}

.msg-list .chatting-item .id_name .chat-profile {
    margin-right: 5px;
}

.entrant .entrant-user .controlNav,
#user-list .live-body ul li .controlNav {
    position: relative;
    font-size: 0.875rem;
    font-weight: 600;
}

/*
.msg-list .chatting-item .chatUser {
    display: block;
    overflow: hidden;
}
*/
.chatUser-toggle,
.entrant .entrant-user .controlNav ul,
.comment-list .user-part .id_name ul,
#gopick-talk .tab-nav ul,
.msg-list .chatting-item .chatUser ul,
.msg-list .chatting-alarm .chatUser ul,
#user-list .live-body ul li .controlNav ul {
    display: none;
    position: absolute;
    width: 140px;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    top: 100%;
    z-index: 10;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 10%);
}

.chatUser-toggle {
    width: auto;
}

.chatUser-toggle .chatUser-header {
    background-color: var(--color-red);
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;
    padding: 6px 0px 6px 10px;
    color: var(--color-white);
}

.chatUser-toggle .chatUser-header .chat-symbol {
    width: 16px;
    height: 16px;
}

.chatUser-toggle .chatUser-header .id_name {
    color: var(--color-white);
    column-gap: 7px;
}

.chatUser-toggle .chatUser-header .close:after {
    font-size: 1rem;
}

.msg-list .chatting-alarm .chatUser ul,
.msg-list .chatting-item .chatUser ul {
    top: 20px;
    left: 0;
}

.entrant .entrant-user .controlNav ul,
.comment-list .user-part .id_name ul,
#gopick-talk .tab-nav ul,
#user-list .live-body ul li .controlNav ul {
    right: 0 !important;
    width: 140px;
}

.chatUser-toggle ul li,
.entrant .entrant-user .controlNav ul li,
.comment-list .user-part .id_name ul li,
#gopick-talk .tab-nav ul li,
#user-list .live-body ul li .controlNav ul li {
    display: block;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
}

.chatUser-toggle ul li {
    font-size: 0.75rem !important;
}

.chatUser-toggle ul li:last-child,
.entrant .entrant-user .controlNav ul li:last-child,
.comment-list .user-part .id_name ul li:last-child,
#gopick-talk .tab-nav ul li:last-child,
#user-list .live-body ul li .controlNav ul li:last-child {
    border-bottom: none;
}

.chatUser-toggle ul li:hover,
.entrant .entrant-user .controlNav ul li:hover,
.comment-list .user-part .id_name ul li:hover,
#gopick-talk .tab-nav ul li:hover,
#user-list .live-body ul li .controlNav ul li:hover {
    background-color: var(--point-color);
    color: var(--color-white) !important;
}

.chatUser-toggle ul li i,
.entrant .entrant-user .controlNav ul li i,
.comment-list .user-part .id_name ul li i,
#gopick-talk .tab-nav ul li i,
#user-list .live-body ul li .controlNav ul li i {
    display: inline-block;
    text-align: center;
    width: 15px;
    margin-right: 5px;
    color: var(--sub-text02);
}

.chatUser-toggle ul li:hover i,
.entrant .entrant-user .controlNav ul li:hover i,
.comment-list .user-part .id_name ul li:hover i,
#user-list .live-body ul li .controlNav ul li:hover i,
.chatUser-toggle ul li:hover a,
.entrant .entrant-user .controlNav ul li:hover a,
.comment-list .user-part .id_name ul li:hover a,
#gopick-talk .tab-nav ul li:hover a,
#gopick-talk .tab-nav ul li:hover i,
#user-list .live-body ul li .controlNav ul li:hover a {
    color: var(--color-white) !important;
}

.msg-list .chatting-item .chat-time {
    display: flex;
    margin-top: 5px;
    justify-content: flex-start;
    align-items: flex-end;
}

.msg-list .time-stamp {
    white-space: nowrap;
    font-size: 0.688rem;
    font-weight: 300;
    color: var(--sub-text02);
    padding-left: 7px 10px;
    width: 60px;
}

.msg-list .chatting-item.writer {
    justify-content: flex-end;
}

.msg-list .chatting-item.writer .chat-time {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.msg-list .chatting-item.writer .chatMsg {
    border: 1px solid #f6f6f6;
    background-color: var(--color-white);
    border-radius: 10px;
    border-top-right-radius: 0;
    padding: 5px 7px;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 10%);
}

.msg-list .chatting-item.writer .talkMsg {
    display: block;
    font-size: 0.875rem;
    line-height: 120%;
    padding: 7px 10px;
    background-color: var(--color-blue);
    border: 1px solid var(--color-blue);
    color: var(--color-white);
    border-radius: 10px;
    border-top-right-radius: 0;
    font-weight: 400;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 10%);
}

.msg-list .chatting-item.writer .chat-time .time-stamp {
    padding-left: 0;
    padding-right: 10px;
    margin-bottom: 2px;
}

.chat-message {
    position: absolute;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: 300ms;
}

.chat-message form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 5px;
    column-gap: 10px;
}

.inChat {
    position: relative;
}

.inChat .option-toggle {
    display: block;
    background-color: var(--color-white);
    font-size: 1.125rem;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
}

.chat-message .inChat .option-toggle:after {
    content: '\2b';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.chat-message.option-nav .inChat .option-toggle:after {
    content: '\f00d';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.chat-message.option-nav {
    bottom: 0;
}

.chat-input-prepend {
    position: relative;
    width: calc(100% - 35px);
    background-color: var(--color-white);
    padding-right: 37px;
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    resize: none;
    overflow: hidden;
}

.chat-message .chat-input-prepend input {
    width: 100%;
    height: 48px;
    border: none;
    font-size: 0.875rem;
    line-height: 120%;
    resize: none;
    padding: 3px 10px 3px;
    font-weight: 400;
    color: var(--main-text);
    outline: none;
    overflow: hidden;
}

.chat-message .chat-input-prepend input::placeholder {
    color: var(--sub-text02);
}

.chat-message .chat-input-prepend .nc {
    position: absolute;
    top: 50%;
    right: 5px;
    display: block;
    color: #999;
    font-size: 11px;
    transform: translateY(-50%);
}

.chat-message .chat-option {
    display: none;
    height: 0;
    background-color: var(--color-white);
    padding: 10px;
    transition: height 2s;
}

.chat-message.option-nav .chat-option {
    display: block;
    height: 100%;
}

.chat-option ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    font-size: 0.75rem;
}

.chat-option ul li {
    padding: 6px;
    cursor: pointer;
}

.chat-option ul li:hover {
    color: var(--hover-color);
}

.chat-option ul li i {
    display: block;
    font-size: 1rem;
    margin: 0 auto 5px;
}

.chat-message.gopick-talk form .inChat,
.chat-message.gopick-talk form .chat-option {
    display: none;
}

.chat-message.gopick-talk form .chat-input-prepend {
    width: 100% !important;
}

/* 채팅방 참여자 리스트*/
.entrant-list {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 5px 0;
    border-top: 1px solid var(--point-color);
}

.entrant-list .entrant-user {
    clear: both;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}

.entrant-list .entrant-user:after {
    content: '';
    display: block;
    clear: both;
}

.entrant-list .entrant-user .id_name {
    float: left;
    width: 200px;
}

.entrant-list .entrant-user .option {
    float: left;
    padding: 5px 0;
}

.entrant-list .entrant-user .controlNav,
#user-list .live-body ul li .controlNav {
    float: right;
}

.entrant-list .entrant-user .controlNav a {
    display: block;
    text-align: center;
    padding: 5px 15px;
    margin-right: -10px;
}

#user-list .live-body ul li .controlNav a {
    display: block;
    text-align: center;
    padding: 5px 15px;
}

/* End 채팅방 참여자 리스트 */

/* 내 채팅방 관련 아이템 사용 */
.mini-list .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
}

.mini-list .list .item-info {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 5px;
}

.mini-list .list .item-info i.item-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 5rem;
    border: 1px solid var(--border-color);
    background-color: var(--gray-bg);
}

.mini-list .list .item-info i.item-icon img {
    display: block;
    width: 35px;
    height: auto;
    object-fit: cover;
}

.list-top-border {
    border-top: 1px solid var(--point-color);
    margin: 5px 0;
}

.list-top-border .list {
    border-bottom: 1px solid var(--border-color);
}

.mini-list label {
    display: block;
    font-size: 0.75rem;
    background-color: var(--point-color);
    padding: 1px 10px;
    border-radius: 0.5rem;
    color: var(--color-white);
}

/* End 내 채팅방 관련 아이템 사용 */

/* Main Display */
.go-games {
    position: relative;
}

.go-forum {
    position: relative;
}

.go-forum button.expansion {
    position: absolute;
    left: 50%;
    bottom: -23px;
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 2.875rem;
    height: 2.875rem;
    line-height: 2.875rem;
    transform: translateX(-50%);
}

.go-forum button.expansion p {
    display: none;
}

.go-forum button.expansion:before {
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
}

.go-bbs .thumb-list {
    border-top: 1px solid var(--gnb-color);
    padding-top: 15px;
    margin: 10px auto;
}

.go-forum .thumb-list li,
.go-bbs .thumb-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 15px;
}

.go-forum .thumb-list li:last-child {
    border-bottom: none;
}

.thumb-list li {
    position: relative;
    display: flex;
    margin-bottom: 15px;
    padding-right: 50px;
    column-gap: 12px;
}

.thumb-list li:last-child {
    margin-bottom: 0;
}

.thumb-list .thumbnail-box {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 65px;
}

.thumb-list .comment {
    color: var(--point-color);
    padding: 0 0.375rem;
}

.thumb-list .thumbnail-img {
    border-radius: 0.5rem;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-list .thumbnail-box span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-size: 0.75rem;
    text-align: center;
    padding: 1px 10px;
    border-radius: 3rem;
}

.thumb-list .subject {
    display: block;
    overflow: hidden;
}

.thumb-list .subject a {
    overflow: hidden;
    vertical-align: middle;
}

.thumb-list .subject a:hover {
    color: var(--point-color);
}

.thumb-list .subject h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumb-list .subject p {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

.thumb-list .subject a.new {
    position: relative;
}

.thumb-list .subject a.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
    display: inline-block;
}

.thumb-list .subject span.new {
    position: relative;
}

.thumb-list .subject span.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
    display: inline-block;
}

.thumb-list .info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 3px 0;
    font-size: 0.75rem;
    color: var(--sub-text02);
    column-gap: 10px;
}

.thumb-list .info .user-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.thumb-list .info .profile-photo.xs {
    margin-right: 5px;
}

.thumb-list .info span {
    display: inline-block;
}

.thumb-list .info .cate {
    background-color: var(--hover-color);
    font-size: 0.688rem;
    color: var(--color-white);
    padding: 1px 5px;
    border-radius: 2px;
}

.thumb-list .attach {
    position: absolute !important;
    right: 0;
    top: 0;
}

.thumb-list.md .thumbnail-box {
    width: 100px;
    height: 65px;
}

.thumb-list.lg .thumbnail-box {
    width: 150px;
    height: 90px;
}

.thumb-list.big .thumbnail-box {
    width: 200px;
    height: 120px;
}

.thumb-list.lg li a {
    column-gap: 15px;
}

.thumb-list.big li a {
    column-gap: 20px;
}

.go-forum .thumb-list li {
    padding-right: 110px;
}

.go-forum .thumb-list .subject a {
    display: inline-block !important;
}

.go-community-card .post-lists {
    list-style-position: outside;
    font-size: 0.938rem;
    list-style-type: disc;
    padding-left: 17px;
    clear: both;
}

.go-community-card .photo-lists {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 0 auto 20px;
}

.go-community-card .photo-lists li {
    width: 30%;
}

.go-community-card .photo-lists li figure {
    width: 100%;
    height: 64px;
    margin-bottom: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.go-community-card .photo-lists li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.go-community-card .photo-lists li a p {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.go-community-card .photo-lists li a p span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-lists li {
    margin-bottom: 9px;
    height: 20px;
}

.post-lists li:after {
    clear: both;
    content: '';
}

.post-lists li a {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.post-lists .title {
    font-weight: 400;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 100%;
}

.post-lists a.new {
    position: relative;
}

.post-lists a.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
}

.post-lists .category {
    color: var(--sub-text01);
    font-weight: 400;
    margin-right: 3px;
}

.comments {
    margin: 0 5px;
}

.go-notice .post-lists {
    list-style-type: disc;
    padding-left: 12px;
}

.go-notice .post-lists li {
    margin-bottom: 0.75rem;
}

.go-notice .post-lists li::marker {
    font-size: 0.5rem;
    color: rgba(0, 0, 0, 0.7);
}

.go-notice .post-lists li:hover a {
    color: var(--point-color);
}

.go-notice .post-lists .title {
    font-size: 0.85rem;
    font-weight: 400;
}

.go-fnb {
    margin: auto;
    padding: 15px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.go-fnb ul > li {
    display: inline-block;
}

.go-fnb ul > li::after {
    content: '|';
    margin: 0 20px;
    color: var(--border-color);
}

.go-fnb ul > li:nth-last-child(1)::after {
    content: '';
}

.go-fnb ul > li > a {
    /*color: var(--color-white);*/
}

.go-footer {
    font-size: 0.75rem;
    font-weight: 300;
}

.go-footer-info {
    background-color: var(--gnb-color);
    color: rgba(255, 255, 255, 0.5);
    padding-top: 30px;
    padding-bottom: 30px;
}

.go-footer address {
    font-size: 0.813rem;
    font-style: normal;
}

.go-footer .footer_img {
    width: 35px;
}

figure {
    margin: 0;
}

figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figure.ranking {
    position: relative;
    background-color: var(--main-bg);
    overflow: hidden;
    width: 100%;
    height: 216px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 20px 32px;
    object-fit: cover;
}

figure.ranking p {
    margin: 0;
    padding: 0;
}

figure.ranking .profile-ranking {
    position: absolute;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    background-color: var(--point-color);
    color: #ffffff;
    font-size: 150%;
    text-align: center;
    font-weight: bold;
}

figure.ranking .profile-level {
    position: absolute;
    top: 0;
    right: 0;
    background: url('/imgs/best_fam_lv_bg.png') no-repeat top center;
    border-top-left-radius: 7px;
    height: 43px;
    width: 34px;
}

figure.ranking .profile-level span {
    display: block;
    text-align: center;
    color: var(--color-white);
}

figure.ranking .profile-crown {
    position: absolute;
    top: 0;
    left: 10px;
}

.profile-notice {
    text-align: center;
    color: var(--sub-text02);
    font-size: 100%;
    margin: 10px 0;
}

.profile-name {
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    margin: 10px 0;
}

.button-box {
    border: 1px solid var(--border-color);
    padding: 3px 7px;
}

/* 회차결과 */

.result > ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.result > ul > li:last-child {
    margin-bottom: 0;
}

.result ul > li > ul,
.result ul > li > ul > li {
    display: inline-block;
}

.result-list .round {
    font-size: 0.813rem;
    font-weight: 400;
    letter-spacing: -1px;
}

.result-list .round span {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-red);
    margin-right: 10px;
    width: 30px;
}

.result-list .ball-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.result-list .ball-list li {
    padding: 2px 5px;
}

.result-list .ball-list li > span {
    position: relative;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    min-width: 1.875rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    padding: 0 8px;
    color: var(--color-white);
    box-shadow: 0 0.15rem 0.3rem 0 rgb(0 0 0 / 20%) !important;
}

.result-list .ball-list li > span.sb_red,
.result-list .ball-list li > span.sb_blue {
    box-shadow: none !important;
}

.result-list .ball-list li > span > i {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--color-white);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 90%;
    transform: scale(90%);
}

.go-recent-result h2 {
    font-size: 1.25rem;
    font-style: normal;
}

.go-recent-result .result-list .ball-list li {
    position: relative;
    padding: 0 2px;
    animation-duration: 1s;
    animation-name: slidein;
}

.go-recent-result .result-list .ball-list li:nth-child(1) {
    animation-delay: 0;
}

.go-recent-result .result-list .ball-list li:nth-child(2) {
    animation-delay: 0.1s;
}

.go-recent-result .result-list .ball-list li:nth-child(3) {
    animation-delay: 0.2s;
}

.go-recent-result .result-list .ball-list li:nth-child(4) {
    animation-delay: 0.3s;
}

.go-recent-result .result-list .ball-list li:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes slidein {
    0% {
        left: 20px;
        opacity: 0;
    }

    50% {
        left: 5px;
        opacity: 0.1;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

.go-recent-result .result-list .ball-list li > span {
    background-color: var(--main-bg);
    min-width: 26px;
    font-size: 0.75rem;
    height: 1.625rem;
    line-height: 1.625rem;
    text-align: center;
    padding: 0 8px;
    color: var(--color-white);
}

.go-recent-result .result-list .ball-list li > span.keno_result {
    border-radius: 5px;
}

.go-recent-result .result-list .ball-list li > span.goal,
.go-recent-result .result-list .ball-list li > span.nogoal {
    width: 1.625rem;
}

.go-recent-result .result-list span.kick_left,
.game-pick .panel .panel-body .game-pick-info span.kick_left,
.pick-result .host-pick .pick-board.soccer span.kick_left,
.pick-live .record-table span.kick_left {
    min-width: 45px !important;
    background-image: url(/imgs/games/soccer/kicker_left.png);
}

.go-recent-result .result-list span.kick_right,
.game-pick .panel .panel-body .game-pick-info span.kick_right,
.pick-result .host-pick .pick-board.soccer span.kick_right,
.pick-live .record-table span.kick_right {
    min-width: 45px !important;
    background-image: url(/imgs/games/soccer/kicker_right.png);
}

.go-recent-result .result-list span.keeper_left,
.game-pick .panel .panel-body .game-pick-info span.keeper_left,
.pick-result .host-pick .pick-board.soccer span.keeper_left,
.pick-live .record-table span.keeper_left {
    min-width: 45px !important;
    background-image: url(/imgs/games/soccer/keeper_left.png);
}

.go-recent-result .result-list span.keeper_right,
.game-pick .panel .panel-body .game-pick-info span.keeper_right,
.pick-result .host-pick .pick-board.soccer span.keeper_right,
.pick-live .record-table span.keeper_right {
    min-width: 45px !important;
    background-image: url(/imgs/games/soccer/keeper_right.png);
}

.go-recent-result .result-list .ball-list li > span.fish,
.go-recent-result .result-list .ball-list li > span.starfish,
.go-recent-result .result-list .ball-list li > span.jellyfish,
.go-recent-result .result-list .ball-list li > span.shark,
.go-recent-result .result-list .ball-list li > span.turtle,
.go-recent-result .result-list .ball-list li > span.whale,
.pick-live .record-table span.kick_left,
.pick-live .record-table span.kick_right,
.pick-live .record-table span.keeper_left,
.pick-live .record-table span.keeper_right {
    text-indent: -9999px;
}

.game-pick-info ul > li > span > i {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -5px;
    right: 0px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--color-white);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 80%;
    transform: scale(80%);
}

.game-pick-info ul > li > span.private:before {
    content: '\f30d';
    font-family: 'Font Awesome 6 Pro';
    color: #fff;
}

.game-pick-info ul > li > span.private {
    background-color: #ccc;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}

/* 분포도 차트 */
.current-bar h6 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.current-bar .bar_graph {
    padding: 0 41px;
}

.current-bar.squid .bar_graph {
    padding: 0 0 0 41px;
}

.current-bar .bar_graph .bar {
    height: 17px;
}

.current-bar .bar_graph .powerball_odd,
.current-bar .bar_graph .powerball_under,
.current-bar .bar_graph .powerball_even,
.current-bar .bar_graph .powerball_over,
.current-bar .bar_graph .nuguri_odd,
.current-bar .bar_graph .nuguri_left,
.current-bar .bar_graph .nuguri_line3,
.current-bar .bar_graph .nuguri_even,
.current-bar .bar_graph .nuguri_right,
.current-bar .bar_graph .nuguri_line4,
.current-bar .bar_graph .soccer_goal,
.current-bar .bar_graph .soccer_nogoal,
.current-bar .bar_graph .soccer_kick_left,
.current-bar .bar_graph .soccer_kick_right,
.current-bar .bar_graph .soccer_keeper_left,
.current-bar .bar_graph .soccer_keeper_right,
.current-bar .bar_graph .baseball_strike,
.current-bar .bar_graph .baseball_homerun,
.current-bar .bar_graph .baseball_h_left,
.current-bar .bar_graph .baseball_h_right,
.current-bar .bar_graph .baseball_s_left,
.current-bar .bar_graph .baseball_s_right,
.current-bar .bar_graph .squidgame_left,
.current-bar .bar_graph .squidgame_right {
    height: 17px;
}

.current-bar .bar_graph .per {
    line-height: 17px;
}

.current-bar .bar_graph .tx {
    top: -4px;
    font-size: 0.688rem;
    width: 26px;
    height: 26px;
    line-height: 26px;
}

.current-bar .bar-chart {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #ccc;
    margin: 1.125rem auto;
    width: 100%;
    height: 15px;
    border-radius: 10px;
}

.current-bar.vertical .bar-chart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ededed;
    margin: 0 auto;
    width: 15px;
    height: 70px;
    border-radius: 10px;
}

.current-bar .bar-chart .progress-bar {
    position: absolute;
    top: 0;
    height: 15px;
    border-radius: 0;
}

.current-bar .bar-chart .bar-name {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 3px 8px;
    font-size: 0.75rem;
    border-radius: 5px;
    z-index: 10;
}

.current-bar.vertical .bar-chart .bar-name {
    border-radius: 20px;
}

.current-bar .bar-chart.large,
.current-bar .bar-chart.middle,
.current-bar .bar-chart.small {
    margin: 0.5rem auto;
}

.current-bar .bar-chart.large .bar-name,
.current-bar .bar-chart.middle .bar-name,
.current-bar .bar-chart.small .bar-name,
.current-bar .bar-chart.left .bar-name,
.current-bar .bar-chart.center .bar-name,
.current-bar .bar-chart.right .bar-name,
.current-bar .bar-chart.squid_left .bar-name,
.current-bar .bar-chart.squid_right .bar-name {
    min-width: 25px;
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 3px 6px;
}

.current-bar .bar-chart.fish .bar-name,
.current-bar .bar-chart.starfish .bar-name,
.current-bar .bar-chart.jellyfish .bar-name,
.current-bar .bar-chart.shark .bar-name,
.current-bar .bar-chart.turtle .bar-name,
.current-bar .bar-chart.whale .bar-name {
    min-width: 25px;
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 3px 6px;
    text-indent: -99999px;
}

.current-bar .bar-chart.fish .bar-name {
    background: var(--color-orange) url(/imgs/games/aquafriends/01.png) center/contain no-repeat;
}

.current-bar .bar-chart.starfish .bar-name {
    background: var(--color-yellow) url(/imgs/games/aquafriends/02.png) center/contain no-repeat;
}

.current-bar .bar-chart.jellyfish .bar-name {
    background: var(--color-red) url(/imgs/games/aquafriends/03.png) center/contain no-repeat;
}

.current-bar .bar-chart.shark .bar-name {
    background: var(--color-purple) url(/imgs/games/aquafriends/04.png) center/contain no-repeat;
}

.current-bar .bar-chart.turtle .bar-name {
    background: #38e928 url(/imgs/games/aquafriends/05.png) center/contain no-repeat;
}

.current-bar .bar-chart.whale .bar-name {
    background: var(--color-sky) url(/imgs/games/aquafriends/06.png) center/contain no-repeat;
}

.current-bar .bar-chart.large .bar-name,
.current-bar .bar-chart.right .bar-name {
    background-color: var(--color-red);
    color: var(--color-white);
}

.current-bar .bar-chart.middle .bar-name,
.current-bar .bar-chart.left .bar-name {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.current-bar .bar-chart.small .bar-name {
    background-color: var(--color-green);
    color: var(--color-white);
}

.current-bar .bar-chart.center .bar-name {
    background-color: var(--color-yellow);
    color: var(--color-white);
}

.current-bar .bar-chart.large .num,
.current-bar .bar-chart.middle .num,
.current-bar .bar-chart.small .num {
    position: absolute;
    top: 50%;
    right: 5px;
    font-size: 9px;
    color: #fff;
    transform: translateY(-50%);
}

.current-bar.vertical .bar-chart .num,
.current-bar.vertical .bar-chart .num,
.current-bar.vertical .bar-chart .num {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #979797;
}

.current-bar .bar-chart .bar {
    position: relative;
    margin-left: -2px;
    flex: 1;
    display: flex;
    overflow: hidden;
    height: 15px;
}

.current-bar.vertical .bar {
    overflow: inherit;
}

.current-bar.vertical .bar-chart .bar {
    margin-left: 0px;
    margin-bottom: -2px;
}

.current-bar .bar-chart.large .progress-bar,
.current-bar .bar-chart.middle .progress-bar,
.current-bar .bar-chart.small .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    border-radius: 0;
}

.current-bar .bar-chart.large .progress-bar {
    left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: rgb(219, 59, 76);
    background: linear-gradient(180deg,
            rgba(219, 59, 76, 1) 0%,
            rgba(255, 75, 94, 1) 50%,
            rgba(219, 59, 76, 1) 100%);
}

.current-bar .bar-chart.middle .progress-bar {
    right: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: rgb(26, 119, 200);
    background: linear-gradient(180deg,
            rgba(26, 119, 200, 1) 0%,
            rgba(25, 131, 223, 1) 50%,
            rgba(26, 119, 200, 1) 100%);
}

.current-bar .bar-chart.small .progress-bar {
    right: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: rgb(30, 173, 149);
    background: linear-gradient(180deg,
            rgba(30, 173, 149, 1) 0%,
            rgba(31, 185, 159, 1) 50%,
            rgba(30, 173, 149, 1) 100%);
}

.current-bar.vertical .bar-chart.left .progress-bar,
.current-bar.vertical .bar-chart.center .progress-bar,
.current-bar.vertical .bar-chart.right .progress-bar,
.current-bar.vertical .bar-chart.fish .progress-bar,
.current-bar.vertical .bar-chart.starfish .progress-bar,
.current-bar.vertical .bar-chart.jellyfish .progress-bar,
.current-bar.vertical .bar-chart.shark .progress-bar,
.current-bar.vertical .bar-chart.turtle .progress-bar,
.current-bar.vertical .bar-chart.whale .progress-bar {
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 15px;
    border-radius: 0;
}

.current-bar.vertical .bar-chart.fish .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(254, 102, 0);
    background: linear-gradient(90deg,
            rgba(254, 102, 0, 1) 0%,
            rgba(251, 156, 8, 1) 50%,
            rgba(254, 102, 1) 100%);
}

.current-bar.vertical .bar-chart.left .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(26, 119, 200);
    background: linear-gradient(90deg,
            rgba(26, 119, 200, 1) 0%,
            rgba(25, 131, 223, 1) 50%,
            rgba(26, 119, 200, 1) 100%);
}

.current-bar.vertical .bar-chart.center .progress-bar,
.current-bar.vertical .bar-chart.starfish .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(255, 196, 0);
    background: linear-gradient(90deg,
            rgb(255, 196, 0, 1) 0%,
            rgb(255, 211, 65) 50%,
            rgb(255, 196, 0, 1) 100%);
}

.current-bar.vertical .bar-chart.right .progress-bar,
.current-bar.vertical .bar-chart.jellyfish .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(219, 59, 76);
    background: linear-gradient(90deg,
            rgba(219, 59, 76, 1) 0%,
            rgba(255, 75, 94, 1) 50%,
            rgba(219, 59, 76, 1) 100%);
}

.current-bar.vertical .bar-chart.shark .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(155, 9, 204);
    background: linear-gradient(90deg,
            rgba(155, 9, 204, 1) 0%,
            rgba(196, 36, 220, 1) 50%,
            rgba(155, 9, 204, 1) 100%);
}

.current-bar.vertical .bar-chart.turtle .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(17, 174, 5);
    background: linear-gradient(90deg,
            rgba(17, 174, 5, 1) 0%,
            rgba(24, 215, 7, 1) 50%,
            rgba(17, 174, 5, 1) 100%);
}

.current-bar.vertical .bar-chart.whale .progress-bar {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: rgb(9, 114, 202);
    background: linear-gradient(90deg,
            rgba(9, 114, 202, 1) 0%,
            rgba(30, 186, 232, 1) 50%,
            rgba(9, 114, 202, 1) 100%);
}

/* 메인 채팅방랭킹 순위 */
.go-chatting-list {
    list-style: none;
    counter-reset: list;
}

.go-chatting-list > li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 2.125rem;
    line-height: 1.75rem;
    counter-increment: list;
}

.go-chatting-list > li:before {
    content: counter(list);
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
    border-radius: 50%;
    text-align: center;
    color: var(--color-white);
    transform: translateY(-50%);
}

.go-chatting-list > li:before {
    background-color: var(--color-blue);
}

.go-chatting-list > li span {
    display: inline-block;
    margin: 0 10px;
}

.go-chatting-list > li .user-profile {
    font-weight: 600;
}

.go-chatting-list > li .user-profile label {
    display: block;
    background-color: var(--sub-text01);
    color: var(--color-white);
    border-radius: 3rem;
    font-size: 0.688rem;
    line-height: 1rem;
    padding: 1px 10px;
}

.go-chatting-list > li:first-child .user-profile label {
    background-color: var(--hover-color) !important;
}

.go-chatting-list .profile-photo {
    width: 50px;
    height: 50px;
}

/* 랭킹 순위 */
.go-rankings {
    position: relative;
    font-size: 0.875rem;
    overflow: hidden;
    padding-bottom: 1rem;
}

.ranking-list {
    list-style: none;
    counter-reset: list;
}

.ranking-list > li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 2.125rem;
    line-height: 1.75rem;
    counter-increment: list;
}

.ranking-list > li:before {
    content: counter(list);
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
    border-radius: 50%;
    text-align: center;
    color: var(--color-white);
    transform: translateY(-50%);
}

.top-chatting .ranking-list > li:before {
    background-color: var(--color-blue);
}

.top-pickster .ranking-list > li:before {
    background-color: var(--color-red);
}

/*
.top-chatting .ranking-list li:first-child .profile-photo:before,
.top-pickster .ranking-list li:first-child .profile-photo:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    background-image: url(/imgs/best-ranking-crown.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 45px;
    height: 16px;
    transform: translateX(-50%);
    z-index: 1;
}
*/
.ranking-list > li span {
    display: inline-block;
    margin: 0 10px;
}

.ranking-list > li .user-profile {
    font-weight: 600;
}

.ranking-list > li .user-profile label {
    display: block;
    background-color: var(--sub-text01);
    color: var(--color-white);
    border-radius: 3rem;
    font-size: 0.688rem;
    line-height: 1rem;
    padding: 1px 10px;
}

.ranking-list > li:first-child .user-profile label {
    background-color: var(--hover-color) !important;
}

.ranking-list .profile-photo {
    width: 50px;
    height: 50px;
}

.offense {
    display: inline-block;
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
    text-align: center;
    font-weight: 600;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-red);
    box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
}

.offense.g1 {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
}

.offense.g2 {
    background-color: var(--color-white);
    border: 1px solid var(--color-red);
}

.offense.g3 {
    background-color: var(--color-red);
    color: var(--color-white);
}

.offense.g4 {
    background-color: var(--main-text);
    color: var(--color-white);
}

/* Gopick Game List */
.go-ddg {
    position: relative;
    font-size: 0.875rem;
    overflow: hidden;
    padding-bottom: 2rem;
    text-align: center;
}

.go-ddg .owl-dots {
    bottom: -2rem;
}

.go-ddg .progressBar {
    width: 50%;
    margin: 4px auto;
}

/* Time Countdown Progress Bar */
.progressBar {
    width: 100%;
    margin: 2px auto;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3rem;
}

.progressBar div {
    height: 100%;
    text-align: center;
    width: 0;
    background-color: rgba(0, 50, 105, 0.3);
    border-radius: 3rem;
    box-sizing: border-box;
}

/* Gopick Game Top5 */
.go-gametop .thumb-list {
    list-style: none;
    counter-reset: list;
}

.go-gametop .thumb-list li {
    position: relative;
    padding-left: 30px;
    counter-increment: list;
}

.go-gametop .thumb-list li:before {
    content: counter(list);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.go-gametop .thumb-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.go-gametop .thumb-list li a {
    display: flex;
    column-gap: 5px;
}

/*유저 홈 대시보드 공통*/
.user-profile-wrap {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.user-profile-wrap .inner {
    position: relative;
    flex: 1;
    display: flex;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.user-profile-wrap .inner .reg-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

.user-profile {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}

.user-profile a,
.user-profile .profile-photo {
    display: block;
}

.user-profile .profile-info {
    display: grid;
    row-gap: 3px;
}

.user-profile .profile-info .user-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 5px;
}

.user-profile-wrap .info-dashboard {
    display: flex;
    justify-content: space-around;
    align-items: center;
    column-gap: 15px;
}

.user-profile-footer .info-dashboard span.badge {
    display: inline-block;
    color: var(--color-white);
    font-weight: 400;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    font-size: 0.563rem;
    line-height: 22px;
    text-align: center;
    text-shadow: none;
}

.user-profile-wrap .info-dashboard p span {
    font-weight: 500;
}

.attn-box .wallet .wallet,
.user-profile-wrap .wallet,
.user-profile-wrap .user-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 15px;
    text-align: center;
}

.attn-box .wallet li,
.user-profile-wrap .wallet li {
    position: relative;
    font-size: 0.875rem;
    padding-right: 15px;
}

.attn-box .wallet li span {
    font-size: 1.25rem;
    font-weight: 600;
}

.user-profile-wrap .wallet li span {
    font-size: 1.5rem;
    font-weight: 600;
}

.user-profile-wrap .wallet li span {
    display: block;
}

.attn-box .wallet li:after,
.user-profile-wrap .wallet li:after {
    content: '';
    position: absolute;
    width: 1px;
    background-color: var(--border-color);
    height: 60%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.user-profile-wrap .wallet li:last-child:after {
    display: none;
}

.user-profile-wrap .user-profile-footer {
    display: flex;
    background-color: var(--main-bg);
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding: 9px 15px;
}

.user-profile-wrap .todayword {
    font-weight: 600;
}

.user-profile-wrap .user-profile-footer p,
.user-profile-wrap .todayword {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.fam-notice {
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    width: 100%;
    height: 50px;
    overflow: hidden;
}

.fam-notice p {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 400;
    padding: 0 15px;
}

.rolling {
    position: relative;
    width: 100%;
    height: auto;
    list-style-type: square;
    padding: 0 15px 0 25px;
    font-size: 14px;
    font-weight: 400;
}

.rolling li {
    width: 100%;
    height: 48px;
    line-height: 48px;
}

.nav-wrapper {
    display: grid;
    max-width: 100%;
}

.nav-wrapper.col-2 {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
}

.nav-wrapper.col-3 {
    grid-template-columns: repeat(auto-fill, minmax(33.3333%, 1fr));
}

.nav-wrapper.col-4 {
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

.nav-wrapper.col-5 {
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}

.nav-wrapper.col-6 {
    grid-template-columns: repeat(auto-fill, minmax(16.666%, 1fr));
}

.nav-wrapper.col-7 {
    grid-template-columns: repeat(auto-fill, minmax(14%, 1fr));
}

.nav-wrapper > div {
    position: relative;
}

.nav-wrapper > div:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 50%;
    background-color: var(--border-color);
    transform: translateY(-50%);
}

.nav-wrapper > div:hover:after {
    background-color: transparent;
}

.nav-wrapper > div.show:after,
.nav-wrapper > div:last-child:after {
    background-color: transparent;
}

.nav-wrapper > div > a {
    position: relative;
    background-color: transparent;
    display: block;
    color: var(--sub-text01);
    text-align: center;
    padding: 0 0.375rem;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: -1px;
}

.nav-wrapper > div.show {
    background-color: var(--gnb-color);
}

.nav-wrapper > div.show > a {
    color: var(--color-white);
}

.nav-wrapper > div > a:hover {
    background-color: #0f4986;
    color: var(--color-white);
}

.nav-wrapper > div .go-select {
    width: 90%;
    margin: 0.65rem auto 0;
}

.nav-wrapper > div .select-selected {
    background-color: transparent;
    border: none;
    font-weight: 600;
}

.nav-wrapper > div.show .select-selected {
    color: var(--color-white);
}

.nav-wrapper > div.show > a:hover {
    color: var(--color-white);
}

.nav-wrapper .dropdown-list {
    position: absolute;
    display: none;
    width: 100%;
    top: 100%;
    left: 0;
    background-color: var(--color-white);
    z-index: 10;
    box-shadow: 3px 3px 10px -2px rgb(0 0 0 / 20%);
    -webkit-box-shadow: 3px 3px 10px -2px rgb(0 0 0 / 20%);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
}

.nav-wrapper .dropdown-list li {
    padding: 0.375rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.nav-wrapper .dropdown-list li:hover {
    background-color: var(--point-color);
    color: var(--color-white);
}

.sub-nav-wrapper {
    position: relative;
    overflow: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sub-nav-wrapper::-webkit-scrollbar {
    display: none;
}

.sub-nav-wrapper ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.sub-nav-wrapper ul li {
    position: relative;
}

.sub-nav-wrapper ul li a {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px;
    color: var(--sub-text01);
    font-size: 15px;
    font-weight: 400;
}

.sub-nav-wrapper ul li:hover a {
    color: var(--point-color);
}

.sub-nav-wrapper ul li.show:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background-color: var(--main-text);
}

.sub-nav-wrapper ul li.show:after {
    content: '';
    position: absolute;
    background-image: url('/imgs/subnav_target.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 7px 4px;
    left: 50%;
    bottom: 2px;
    width: 7px;
    height: 4px;
    transform: translateX(-50%);
}

.sub-nav-wrapper ul li.show a {
    color: var(--main-text);
    font-weight: 600;
}

/*게임네비*/
.game-nav-wrapper {
    font-size: 13px;
}

.game-nav-wrapper ul {
    display: grid;
    grid-template-columns: repeat(6, 150px);
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.game-nav-wrapper ul li {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.game-nav-wrapper ul li a {
    display: block;
    padding: 10px 0;
}

.game-nav-wrapper ul li.show a {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-weight: 500;
}

.game-nav-wrapper ul li.show:before {
    content: none;
}

.game-nav-wrapper ul li.show:after {
    content: none;
}

.game-nav-wrapper ul.dom {
    display: grid;
    background-color: var(--color-white);
    grid-template-columns: repeat(6, auto);
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 10px 0;
}

.game-nav-wrapper ul.dom li {
    border: none;
}

.game-nav-wrapper ul.dom li a:hover,
.game-nav-wrapper ul.dom li.show a {
    background-color: transparent;
    color: var(--color-blue);
    font-weight: 600;
}

.game-nav-wrapper ul.dom li.show:before {
    content: none;
}

.game-nav-wrapper ul.dom li.show:after {
    content: none;
}

.attn-box {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 20px;
    border: 1px solid var(--border-color);
    padding: 15px;
    font-size: 15px;
    color: var(--main-text);
    font-weight: 400;
    margin: 10px auto;
}

.attn-box:before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 5px;
    background-color: var(--point-color);
}

.attn-box p .badge {
    background-color: var(--gray-bg);
    display: inline-block;
    border-radius: 50px;
    margin: 0 5px;
    padding: 2px 12px 1px;
    font-size: 0.688rem;
}

.attn-box p .badge.active {
    background-color: var(--color-yellow);
    color: var(--color-white);
}

.my-record {
    display: inline-block;
    background-color: var(--main-bg);
    border: 1px solid var(--color-blue);
    padding: 2px 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--point-color);
    border-radius: 25px;
    margin-left: 5px;
}

.my-record-panel {
    text-align: center;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    min-height: 1px;
    margin-bottom: 1.875rem;
    box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
}

.my-record-panel .panel-header {
    padding: 10px;
    font-size: 1rem;
    color: var(--color-white);
    background-color: var(--point-color);
    border-bottom: 1px solid var(--border-color);
}

.my-record-panel .panel-header .go-select {
    width: 200px;
    margin: 0 auto;
}

.my-record-panel .panel-header .select-items {
    color: var(--main-text) !important;
}

.my-record-panel .panel-header .select-selected {
    background-color: transparent;
    border: none;
    font-weight: 600;
    font-size: 1rem;
}

.my-record-panel .guide {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.my-record-panel .guide p {
    line-height: 31px;
}

.my-record-panel .guide a {
    display: block;
    margin: 0 auto;
    width: 70%;
    color: var(--point-color);
    outline: 1px solid var(--point-color);
    line-height: 31px;
}

.my-record-panel .guide a:hover {
    background-color: var(--point-color);
    color: var(--color-white);
}

.my-record-panel .score {
    position: relative;
    width: 50%;
    padding: 25px;
    font-size: 14px;
}

.my-record-panel .score span {
    display: block;
    color: #2e79eb;
    font-size: 26px;
    font-weight: 600;
    margin-top: 5px;
}

.my-record-panel .score:first-child:after {
    content: '';
    position: absolute;
    background-color: var(--border-color);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 70%;
}

/* user history */
.user-history {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.user-history .panel-body {
    text-align: center;
    font-weight: 600;
    line-height: 1;
}

.user-history .panel-body i {
    display: block;
    font-size: 1.5rem;
    padding: 5px 0;
}

.user-history .panel-body span {
    display: block;
    color: var(--point-color);
    padding: 5px 0;
}

/* gamepick history */
.game-pick-title {
    border-bottom: 1px solid var(--main-text);
    margin-bottom: 1.125rem;
    padding: 0.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-pick-title h6 {
    font-size: 1.375rem;
    font-weight: 800;
}

.game-pick-title p {
    font-size: 0.875rem;
    color: var(--sub-text01);
    letter-spacing: -1px;
}

.game-pick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.game-pick .panel {
    border: 1px solid var(--border-color);
    text-align: center;
    margin-bottom: 0;
}

.game-pick .panel .panel-header {
    justify-content: center;
    background-color: var(--main-bg);
}

.game-pick .panel .panel-body {
    padding: 0;
}

.game-pick .panel .panel-body .game-pick-info {
    padding: 2rem 0;
}

.game-pick .panel .panel-body a,
.game-pick .panel .panel-body ul,
.game-pick .panel .panel-body p {
    height: 35px;
}

.game-pick .panel .panel-body p {
    line-height: 35px;
}

.game-pick .panel .panel-body ul {
    display: flex;
    justify-content: center;
    gap: 5px;
    line-height: 30px;
}

.game-pick .panel .panel-body ul li {
    min-width: 30px;
    height: 30px;
}

.game-pick .panel .panel-body ul li span {
    display: block;
    padding: 0 7px;
}

.game-pick .panel .panel-body ul li .btn {
    border-radius: 20px;
    padding: 5px 8px;
}

.game-pick .panel .panel-body .winning-rate {
    border-top: 1px solid var(--border-color);
    text-align: center;
    padding: 1rem 0;
}

.game-pick .panel .panel-body .winning-rate p {
    color: var(--sub-text02);
    font-size: 1.75rem;
    font-weight: 800;
}

.game-pick .panel .panel-body .winning-rate.great p {
    color: var(--color-red);
}

.game-pick-empty {
    padding: 30px;
    text-align: center;
}

.game-pick-empty i {
    font-size: 3.75rem;
    color: var(--sub-text01);
}

.game-pick-empty p {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sub-text01);
    padding: 10px 0;
}

.pick-frame {
    background-color: var(--dark-color);
    overflow: hidden;
}

.reg-pick-frame {
    overflow: hidden;
}

.reg-pick-frame.powerball {
    height: 580px;
}

.reg-pick-frame.aqua {
    height: 630px;
}

.record-table table {
    table-layout: auto;
}

.record-table span + span {
    margin: 0 2px;
}

.go-my-record .record-table table tbody tr span .pwb {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--color-white);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 80%;
    transform: scale(80%);
}

.record-table span.pass,
.record-table span.odd,
.record-table span.even,
.record-table span.under,
.record-table span.over,
.record-table span.odd_under,
.record-table span.even_under,
.record-table span.odd_over,
.record-table span.even_over,
.record-table span.large,
.record-table span.middle,
.record-table span.small,
.record-table span.odd_large,
.record-table span.odd_middle,
.record-table span.odd_small,
.record-table span.even_large,
.record-table span.even_middle,
.record-table span.even_small,
.record-table span.left,
.record-table span.right,
.record-table span.nuguri_line3,
.record-table span.nuguri_line4,
.record-table span.pbladder_evo_line3,
.record-table span.pbladder_evo_line4,
.record-table span.line_3,
.record-table span.line_4,
.record-table span.right,
.record-table span.goal,
.record-table span.nogoal,
.record-table span.kick_left,
.record-table span.keeper_left,
.record-table span.kick_right,
.record-table span.keeper_right,
.record-table span.kk_left,
.record-table span.kp_left,
.record-table span.kk_right,
.record-table span.kp_right,
.record-table span.homerun,
.record-table span.h_left,
.record-table span.h_center,
.record-table span.h_right,
.record-table span.strike,
.record-table span.s_left,
.record-table span.s_center,
.record-table span.s_right,
.record-table span.draw,
.record-table span.garu,
.record-table span.ong,
.record-table span.rock,
.record-table span.paper,
.record-table span.scissors,
.record-table span.low,
.record-table span.hi,
.record-table span.sb_blue,
.record-table span.sb_red,
.record-table span.sell,
.record-table span.buy,
.record-table span.nullity,
.record-table span.total_result {
    height: 30px;
    min-width: 30px;
    padding: 0 0.55rem;
    line-height: 30px;
    font-size: 0.875rem;
}

.record-table span.total_odd,
.record-table span.total_even {
    position: relative;
    font-family: 'Swagger';
    font-weight: 600;
    text-align: center;
}

.record-table span.pass {
    background-color: var(--main-bg) !important;
    color: var(--sub-text02) !important;
    border: 1px solid var(--border-color);
}

.record-table span.break {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

.record-table span.kk_left,
.record-table span.kk_right,
.record-table span.kp_left,
.record-table span.kp_right {
    text-indent: -9999px;
    min-width: 45px;
    height: 1.625rem;
}

.record-table span.kk_left {
    background-image: url(/imgs/games/soccer/kicker_left.png);
}

.record-table span.kk_right {
    background-image: url(/imgs/games/soccer/kicker_right.png);
}

.record-table span.kp_left {
    background-image: url(/imgs/games/soccer/keeper_left.png);
}

.record-table span.kp_right {
    background-image: url(/imgs/games/soccer/keeper_right.png);
}

.record-table span.rock {
    background-image: url(/imgs/games/rps/img_R.png);
}

.record-table span.scissors {
    background-image: url(/imgs/games/rps/img_S.png);
}

.record-table span.paper {
    background-image: url(/imgs/games/rps/img_P.png);
}

.record-table span.sb_red {
    background-image: url(/imgs/games/sb_ntry/sb_red.png);
}

.record-table span.sb_blue {
    background-image: url(/imgs/games/sb_ntry/sb_blue.png);
}

.record-table span.rock,
.record-table span.scissors,
.record-table span.paper {
    background-color: transparent;
    background-size: cover;
    text-indent: -9999px;
    padding: 0;
    width: 30px;
    height: 30px;
}

.record-table span.fish,
.record-table span.starfish,
.record-table span.jellyfish,
.record-table span.turtle,
.record-table span.shark,
.record-table span.whale,
.record-table span.anytriple,
.record-table span.sb_red,
.record-table span.sb_blue {
    display: inline-block !important;
    text-indent: -9999px;
    min-width: 30px;
    height: 30px;
    line-height: 30px !important;
}

.record-table span.total_result {
    background-color: #03318c !important;
    border: 2px solid var(--color-yellow);
    color: aqua;
    width: 41px;
    height: 26px;
    line-height: 22px;
    text-align: center;
    border-radius: 5px;
}

.hit {
    color: var(--color-red);
}

.fail {
    color: var(--sub-text02);
}

/*Game Analysis*/
span.pass,
span.gray,
span.red,
span.blue,
span.odd,
span.even,
span.under,
span.over,
span.large,
span.middle,
span.center,
span.small,
span.left,
span.right,
span.nuguri_line3,
span.nuguri_line4,
span.pbladder_evo_line3,
span.pbladder_evo_line4,
span.line_3,
span.line_4,
span.left,
span.goal,
span.nogoal,
span.kick_left,
span.keeper_left,
span.kick_right,
span.keeper_right,
span.kk_left,
span.kk_right,
span.kp_left,
span.kp_right,
span.homerun,
span.h_left,
span.h_center,
span.h_right,
span.strike,
span.s_left,
span.s_center,
span.s_right,
span.draw,
span.garu,
span.ong,
span.fish,
span.starfish,
span.jellyfish,
span.shark,
span.whale,
span.turtle,
span.anytriple,
span.rock,
span.paper,
span.scissors,
span.green,
span.odd_under,
span.odd_over,
span.even_under,
span.even_over,
span.odd_large,
span.odd_middle,
span.odd_small,
span.even_large,
span.even_middle,
span.even_small,
span.odd_under_sp,
span.odd_over_sp,
span.even_under_sp,
span.even_over_sp,
span.odd_large_sp,
span.odd_middle_sp,
span.odd_small_sp,
span.even_large_sp,
span.even_middle_sp,
span.even_small_sp,
span.keno_result,
span.pw_result,
span.hi,
span.low,
span.sb_blue,
span.sb_red,
span.card_AD,
span.card_2D,
span.card_3D,
span.card_4D,
span.card_5D,
span.card_6D,
span.card_7D,
span.card_8D,
span.card_9D,
span.card_TD,
span.card_JD,
span.card_QD,
span.card_KD,
span.card_AS,
span.card_2S,
span.card_3S,
span.card_4S,
span.card_5S,
span.card_6S,
span.card_7S,
span.card_8S,
span.card_9S,
span.card_TS,
span.card_JS,
span.card_QS,
span.card_KS,
span.card_AC,
span.card_2C,
span.card_3C,
span.card_4C,
span.card_5C,
span.card_6C,
span.card_7C,
span.card_8C,
span.card_9C,
span.card_TC,
span.card_JC,
span.card_QC,
span.card_KC,
span.card_AH,
span.card_2H,
span.card_3H,
span.card_4H,
span.card_5H,
span.card_6H,
span.card_7H,
span.card_8H,
span.card_9H,
span.card_TH,
span.card_JH,
span.card_QH,
span.card_K,
span.total_odd,
span.total_even,
span.buy,
span.sell,
span.nullity,
span.total_result,
em.pass,
em.gray,
em.red,
em.blue,
em.odd,
em.even,
em.under,
em.over,
em.large,
em.middle,
em.center,
em.small,
em.left,
em.right,
em.line_3,
em.line_4,
em.goal,
em.nogoal,
em.kick_left,
em.kick_right,
em.keeper_left,
em.keeper_right,
em.homerun,
em.h_left,
em.h_center,
em.h_right,
em.strike em.s_left,
em.s_center,
em.s_right,
em.draw,
em.draw,
em.garu,
em.ong,
em.fish,
em.starfish,
em.jellyfish,
em.shark,
em.whale,
em.turtle,
em.rock,
em.paper,
em.scissors,
em.green,
em.odd_under,
em.odd_over,
em.even_under,
em.even_over,
em.odd_large,
em.odd_middle,
em.odd_small,
em.even_large,
em.even_middle,
em.even_small,
em.odd_under_sp,
em.odd_over_sp,
em.even_under_sp,
em.even_over_sp,
em.odd_large_sp,
em.odd_middle_sp,
em.odd_small_sp,
em.even_large_sp,
em.even_middle_sp,
em.even_small_sp,
em.hi,
em.low,
em.sb_blue,
em.sb_red,
em.buy,
em.sell,
em.nullity,
em.total_result {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    border-radius: 20px;
    text-align: center;
    font-style: normal;
    font-size: inherit;
}

span.pass,
span.gray,
em.pass,
em.gray {
    background-color: var(--main-bg) !important;
    color: var(--sub-text02) !important;
    border: 1px solid var(--border-color);
}

h6.sell,
span.odd,
span.under,
span.middle,
span.left,
span.goal,
span.kick_left,
span.keeper_left,
span.strike,
span.s_left,
span.h_left,
span.kk_left,
span.kp_left,
span.garu,
span.scissors,
span.blue,
span.odd_under,
span.odd_large,
span.odd_middle,
span.odd_small,
span.pbladder_evo_line3,
span.low,
span.sell,
span.left_3line,
span.odd_middle_sp,
em.odd,
em.under,
em.middle,
em.left,
em.goal,
em.kick_left,
em.keeper_left,
em.strike,
em.s_left,
em.h_left,
em.garu,
em.scissors,
em.blue,
em.odd_over,
em.odd_under,
em.odd_large,
em.odd_middle,
em.odd_small,
em.pbladder_evo_line3,
em.low,
em.sell,
em.left_3line,
em.odd_middle_sp {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}
h6.buy,
span.even,
span.over,
span.large,
span.red,
span.right,
span.nogoal,
span.kick_right,
span.keeper_right,
span.homerun,
span.s_right,
span.h_right,
span.kk_right,
span.kp_right,
span.ong,
span.jellyfish,
span.paper,
span.even_over,
span.even_under,
span.pbladder_evo_line4,
span.hi,
span.buy,
span.right_3line,
span.odd_large_sp,
em.even,
em.over,
em.large,
em.red,
em.right,
em.nogoal,
em.kick_right,
em.keeper_right,
em.homerun,
em.s_right,
em.h_right,
em.ong,
em.jellyfish,
em.paper,
em.even_over,
em.even_under,
em.even_large,
em.even_middle,
em.even_small,
em.pbladder_evo_line4,
em.hi,
em.buy,
em.right_3line {
    background-color: var(--color-red) !important;
    color: var(--color-white) !important;
}
span.odd_over_sp {
    background-color: #005a9e !important;
    color: var(--color-white) !important;
}
span.even_over_sp {
    background-color: #e60000 !important;
    color: var(--color-white) !important;
}
span.left_4line,
em.left_4line {
    background-color: var(--color-sky) !important;
    color: var(--color-white) !important;
}
span.right_4line,
em.right_4line {
    background-color: #ff8d99  !important;
    color: var(--color-white) !important;
}
em.nullity {
    background-color: #ccc !important;
    color: var(--color-white) !important;
}

span.small,
span.nuguri_line3,
span.line_3,
span.draw,
span.turtle,
span.rock,
span.green,
span.odd_small_sp,
em.small,
em.line_3,
em.draw,
em.turtle,
em.rock {
    background-color: var(--color-green) !important;
    color: var(--color-white) !important;
}

span.fall,
span.nuguri_line4,
span.line_4,
span.shark,
span.purple,
em.fall,
em.line_4,
em.shark {
    background-color: var(--color-purple) !important;
    color: var(--color-white) !important;
}
span.odd_over_sp,
span.even_middle_sp,
em.odd_over_sp,
em.even_middle_sp {
    background-color: #005a9e !important;
    color: var(--color-white) !important;
}
span.even_over_sp,
span.even_large_sp,
em.even_over_sp,
em.even_large_sp {
    background-color: #b92424 !important;
    color: var(--color-white) !important;
}
span.even_small_sp,
em.even_small_sp {
    background-color: #0c763c !important;
    color: var(--color-white) !important;
}
span.break,
em.break {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

span.nullity {
    background-color: #ccc;
    color: #000;
}

.record-table span.nullity {
    background-color: #919191;
    color: #fff;
}

span.kick_left,
span.keeper_left,
span.kick_right,
span.keeper_right,
span.kk_left,
span.kp_left,
span.kk_right,
span.kp_right {
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: center center;
}

span.kick_left,
span.keeper_left {
    text-indent: -9999px;
    background-image: url(/imgs/games/soccer/left.png);
}

span.kick_right,
span.keeper_right {
    text-indent: -9999px;
    background-image: url(/imgs/games/soccer/right.png);
}

span.h_center,
span.s_center,
span.starfish,
span.anytriple,
span.yellow,
em.h_center,
em.s_center,
em.starfish {
    background-color: var(--color-yellow) !important;
    color: var(--color-white) !important;
    text-shadow: 1px 1px 2px #000000;
}

span.fish,
span.starfish,
span.jellyfish,
span.turtle,
span.shark,
span.whale,
span.anytriple {
    text-indent: -9999px;
}

span.fish,
em.fish {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

span.whale,
span.left_4line,
em.whale {
    background-color: var(--color-sky) !important;
    color: var(--color-white) !important;
}

span.right_4line {
    background-color: #ff8d99 !important;
    color: var(--color-white) !important;
}

span.keno_result {
    background-color: #8c198f !important;
    border-radius: 5px;
}

span.pw_result {
    background-color: #03318c !important;
    border-radius: 5px;
}

span.total_result {
    background-color: #03318c !important;
    border: 2px solid var(--color-yellow);
    color: aqua;
    width: 36px;
    height: 26px;
    line-height: 22px;
    text-align: center;
    border-radius: 5px;
}

span.garu,
span.ong,
em.garu,
em.ong {
    background-size: cover;
}

span.garu,
em.garu {
    text-indent: -9999px;
    background-image: url(/imgs/games/garujigi/garu_bg.png);
}

span.ong,
em.ong {
    text-indent: -9999px;
    background-image: url(/imgs/games/garujigi/ong_bg.png);
}

span.fish,
em.fish {
    background: url(/imgs/games/aquafriends/01.png) center/contain no-repeat;
}

span.starfish,
em.starfish {
    background: url(/imgs/games/aquafriends/02.png) center/contain no-repeat;
}

span.jellyfish,
em.jellyfish {
    background: url(/imgs/games/aquafriends/03.png) center/contain no-repeat;
}

span.shark,
em.shark {
    background: url(/imgs/games/aquafriends/04.png) center/contain no-repeat;
}

span.turtle,
em.turtle {
    background: url(/imgs/games/aquafriends/05.png) center/contain no-repeat;
}

span.whale,
em.whale {
    background: url(/imgs/games/aquafriends/06.png) center/contain no-repeat;
}

span.anytriple {
    background: url(/imgs/games/aquafriends/aqua_triple.png) center/contain no-repeat;
}

span.sb_blue {
    background: url(/imgs/games/sb_ntry/sb_blue.png) center/contain no-repeat;
    text-indent: -9999px;
}

span.sb_red {
    background: url(/imgs/games/sb_ntry/sb_red.png) center/contain no-repeat;
    text-indent: -9999px;
}

span.card_AD,
span.card_2D,
span.card_3D,
span.card_4D,
span.card_5D,
span.card_6D,
span.card_7D,
span.card_8D,
span.card_9D,
span.card_TD,
span.card_JD,
span.card_QD,
span.card_KD,
span.card_AS,
span.card_2S,
span.card_3S,
span.card_4S,
span.card_5S,
span.card_6S,
span.card_7S,
span.card_8S,
span.card_9S,
span.card_TS,
span.card_JS,
span.card_QS,
span.card_KS,
span.card_AC,
span.card_2C,
span.card_3C,
span.card_4C,
span.card_5C,
span.card_6C,
span.card_7C,
span.card_8C,
span.card_9C,
span.card_TC,
span.card_JC,
span.card_QC,
span.card_KC,
span.card_AH,
span.card_2H,
span.card_3H,
span.card_4H,
span.card_5H,
span.card_6H,
span.card_7H,
span.card_8H,
span.card_9H,
span.card_TH,
span.card_JH,
span.card_QH,
span.card_KH {
    width: 54px;
    height: 32px;
    font-size: 0;
    text-indent: -9999;
    background-size: 54px 32px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

span.card_AD {
    background-image: url(/imgs/games/card/ad.png);
}

span.card_2D {
    background-image: url(/imgs/games/card/2d.png);
}

span.card_3D {
    background-image: url(/imgs/games/card/3d.png);
}

span.card_4D {
    background-image: url(/imgs/games/card/4d.png);
}

span.card_5D {
    background-image: url(/imgs/games/card/5d.png);
}

span.card_6D {
    background-image: url(/imgs/games/card/6d.png);
}

span.card_7D {
    background-image: url(/imgs/games/card/7d.png);
}

span.card_8D {
    background-image: url(/imgs/games/card/8d.png);
}

span.card_9D {
    background-image: url(/imgs/games/card/9d.png);
}

span.card_TD {
    background-image: url(/imgs/games/card/td.png);
}

span.card_JD {
    background-image: url(/imgs/games/card/jd.png);
}

span.card_QD {
    background-image: url(/imgs/games/card/qd.png);
}

span.card_KD {
    background-image: url(/imgs/games/card/kd.png);
}

span.card_AS {
    background-image: url(/imgs/games/card/as.png);
}

span.card_2S {
    background-image: url(/imgs/games/card/2s.png);
}

span.card_3S {
    background-image: url(/imgs/games/card/3s.png);
}

span.card_4S {
    background-image: url(/imgs/games/card/4s.png);
}

span.card_5S {
    background-image: url(/imgs/games/card/5s.png);
}

span.card_6S {
    background-image: url(/imgs/games/card/6s.png);
}

span.card_7S {
    background-image: url(/imgs/games/card/7s.png);
}

span.card_8S {
    background-image: url(/imgs/games/card/8s.png);
}

span.card_9S {
    background-image: url(/imgs/games/card/9s.png);
}

span.card_TS {
    background-image: url(/imgs/games/card/ts.png);
}

span.card_JS {
    background-image: url(/imgs/games/card/js.png);
}

span.card_QS {
    background-image: url(/imgs/games/card/qs.png);
}

span.card_KS {
    background-image: url(/imgs/games/card/ks.png);
}

span.card_AC {
    background-image: url(/imgs/games/card/ac.png);
}

span.card_2C {
    background-image: url(/imgs/games/card/2c.png);
}

span.card_3C {
    background-image: url(/imgs/games/card/3c.png);
}

span.card_4C {
    background-image: url(/imgs/games/card/4c.png);
}

span.card_5C {
    background-image: url(/imgs/games/card/5c.png);
}

span.card_6C {
    background-image: url(/imgs/games/card/6c.png);
}

span.card_7C {
    background-image: url(/imgs/games/card/7c.png);
}

span.card_8C {
    background-image: url(/imgs/games/card/8c.png);
}

span.card_9C {
    background-image: url(/imgs/games/card/9c.png);
}

span.card_TC {
    background-image: url(/imgs/games/card/tc.png);
}

span.card_JC {
    background-image: url(/imgs/games/card/jc.png);
}

span.card_QC {
    background-image: url(/imgs/games/card/qc.png);
}

span.card_KC {
    background-image: url(/imgs/games/card/kc.png);
}

span.card_AH {
    background-image: url(/imgs/games/card/ah.png);
}

span.card_2H {
    background-image: url(/imgs/games/card/2h.png);
}

span.card_3H {
    background-image: url(/imgs/games/card/3h.png);
}

span.card_4H {
    background-image: url(/imgs/games/card/4h.png);
}

span.card_5H {
    background-image: url(/imgs/games/card/5h.png);
}

span.card_6H {
    background-image: url(/imgs/games/card/6h.png);
}

span.card_7H {
    background-image: url(/imgs/games/card/7h.png);
}

span.card_8H {
    background-image: url(/imgs/games/card/8h.png);
}

span.card_9H {
    background-image: url(/imgs/games/card/9h.png);
}

span.card_TH {
    background-image: url(/imgs/games/card/th.png);
}

span.card_JH {
    background-image: url(/imgs/games/card/jh.png);
}

span.card_QH {
    background-image: url(/imgs/games/card/qh.png);
}

span.card_KH {
    background-image: url(/imgs/games/card/kh.png);
}

span.total_even,
span.total_odd {
    font-family: 'Swagger';
    width: 50px;
    height: 32px;
    border-radius: 5px !important;
    font-size: 18px;
    border: 2px solid var(--color-yellow);
}

span.total_even {
    color: var(--color-red) !important;
}

span.total_odd {
    color: var(--color-blue) !important;
}

.list-sorting {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.875rem;
}

.list-sorting li {
    padding: 0 0.5rem;
}

.list-sorting li.active {
    color: var(--point-color);
    font-weight: 500;
}

.list-sorting li.active:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    display: inline-block;
    padding-right: 0.325rem;
}

.banner img {
    display: block;
}

.my-info-list .go-banner-manage,
.popup-body .go-banner-manage {
    position: relative;
    display: block;
    background-image: url(/imgs/logo-light.png);
    background-size: 60px auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #062a5b;
    border: 1px solid var(--border-color);
    width: 150px;
    height: 20px;
}

.popup-body .go-banner-manage {
    margin: 15px auto;
}

.my-info-list .go-banner-manage .inner,
.popup-body .go-banner-manage .inner {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 0;
    overflow: hidden;
}

.my-info-list .go-banner-manage img,
.popup-body .go-banner-manage img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.my-info-list .go-banner-manage img {
    height: 100%;
}

.form-control {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.filterSearch,
.guideBox {
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
}

.filterSearch .filterSearch-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filterSearch .filterSearch-wrap.flexend {
    justify-content: flex-end !important;
}

.filterSearch .date .form-control {
    width: 110px;
    padding: 0.375rem 1rem 0.375rem 0.5rem;
}

.filterSearch-wrap .dateSelect.pattern-number-wrap {
    width: 120px;
}

.filterSearch-wrap .dateSelect.pattern-number-wrap .dateNumber {
    width: 20px;
    text-align: center;
}

.dateNumber {
    font-size: 20px;
    font-weight: 600;
}

.inline-field {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.inline-field .input-group,
.inline-field .go-select,
.inline-field .btn {
    margin: 0;
}

.inline-field .go-select + .form-control {
    margin-left: 5px;
}


.dateSelect {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.check-link a {
    position: relative;
    padding-left: 22px;
}

.check-link a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    background-image: url(/imgs/uncheck_icon.png);
    background-size: cover;
    transform: translateY(-50%);
}

.check-link a.active:before {
    background-image: url(/imgs/checked_icon.png);
}

.input-group.date {
    position: relative;
}

.input-group.date:after {
    content: '\f073';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    top: 50%;
    right: 7px;
    color: var(--sub-text02);
    font-weight: 300;
    transform: translateY(-50%);
}

.input-group > .form-control {
    position: relative;
    margin-bottom: 0;
}

.btn-radio + .form-control {
    display: inline-block;
    width: auto;
    padding: 0.175rem 0.5rem;
}

.btn-radio + input {
    margin-left: 15px;
}

input[type='radio'] + label + .form-control {
    display: none;
}

input[type='radio']:checked + label + .form-control {
    display: inline-block;
}

.datepicker table {
    border-top: none;
}

.datepicker td,
.datepicker th {
    padding: 5px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    width: 250px;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
}

.go-select {
    position: relative;
    min-width: 120px;
    font-size: 0.875rem;
}

.go-select.mwide,
.data-select.mwide {
    width: 20%;
}

.go-select.quarter,
.data-select.quarter {
    width: 25%;
}

.go-select.onethird,
.data-select.onethird {
    width: 33.3333%;
}

.go-select.half {
    width: 50%;
}

.go-select select {
    display: none;
}

.go-select.rd-shadow .select-selected {
    border-radius: 0.5rem;
    box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.go-select.md .select-items div,
.go-select.md .select-selected {
    padding: 0.375rem 0.5rem;
}

.select-selected {
    border: 1px solid var(--border-color);
    background-color: var(--color-white);
}

.select-selected:after {
    position: absolute;
    right: 7px;
    top: 50%;
    content: '\f107';
    font-family: 'Font Awesome 6 Pro';
    transform: translateY(-50%);
}

.select-selected.select-arrow-active:after {
    content: '\f106';
    font-family: 'Font Awesome 6 Pro';
}

.go-select.rd-shadow .select-selected + .select-items {
    border-radius: 0.375rem;
    box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.select-items {
    position: absolute;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    max-height: 300px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

.select-items div,
.select-selected {
    padding: 0.375rem 1.25rem 0.375rem 0.5em;
    border: 1px solid var(--border-color);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

.select-items div {
    border-top: none;
}

.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

/* 분석용 Select */
.data-select {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    min-width: 120px;
    font-size: 0.875rem;
    overflow: hidden;
}

.data-select select:focus {
    outline: none;
}

.data-select select {
    padding: 0.375rem 0.75rem 0.375rem 0.5em;
    width: 100%;
    background: transparent;
    border: none;
    line-height: 1.5;
    cursor: pointer;
    -webkit-appearance: none;
}

.data-select select option {
    padding: 3px 0;
}

@-moz-document url-prefix() {
    .styled-select select {
        width: 110%;
    }
}

.data-select i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.data-select select::-ms-expand {
    display: none;
}

/* hide default down arrow in IE10*/
.data-select .select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 내 아이템*/
.item-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
    padding: 10px;
}

.item-box figure {
    background-color: var(--gray-bg);
    border: 1px solid var(--border-color);
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50px;
    object-fit: cover;
}

.item-box p.memta {
    font-size: 0.875rem;
}

.item-box .subject {
    text-align: left;
}

.myExp-grade {
    margin: 20px auto;
    font-size: 0.75rem;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.myExp-grade li {
    position: relative;
    display: inline-block;
    padding: 0 5px;
}

.grade-icon,
.clan-icon {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 5px;
}

.myExp-grade li .grade-icon {
    opacity: 0.5;
}

.myExp-grade li:hover .grade-icon,
.myExp-grade li.active .grade-icon {
    opacity: 1;
}

.myExp-grade li .tooltip {
    display: none;
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    width: 175px;
    min-height: 100px;
    font-size: 0.75rem;
    background: var(--point-color);
    color: var(--color-white);
    border-radius: 0.5em;
    z-index: 10;
}

.myExp-grade li.hover .tooltip,
.myExp-grade li:hover .tooltip {
    display: block;
}

.myExp-grade li .tooltip:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 1em solid var(--point-color);
}

.myExp-grade li .tooltip .tooltip-title {
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.myExp-grade li .tooltip .tooltip-title,
.myExp-grade li .tooltip .tooltip-body {
    padding: 0.6em 1em;
}

.myExp-grade-bar {
    display: inline-flex;
    font-size: 0.75rem;
    align-items: center;
    justify-content: space-around;
}

.grade-bar {
    position: relative;
    background-color: #ddd;
    min-width: 250px;
    height: 15px;
    border-radius: 30px;
}

.grade-bar .bar {
    background-color: var(--point-color);
    border-radius: 30px;
    height: 100%;
}

.grade-bar .guideTxt {
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 0.875rem;
}

.exp-plus,
.exp-minus {
    display: inline-block;
    width: 65%;
    margin: 0 auto;
    text-align: right;
    font-weight: 600;
}

.exp-plus {
    color: var(--point-color);
}

.exp-plus i {
    color: var(--point-color);
    font-size: 0.875rem;
    margin-right: 2px;
}

.exp-minus {
    color: var(--hover-color);
}

.exp-minus i {
    color: var(--hover-color);
    font-size: 0.875rem;
    margin-right: 2px;
}

.mystatus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 20px;
    margin-bottom: 1rem;
}

.mystatus span {
    display: block;
    width: 55px;
    height: 55px;
    background-color: var(--point-color);
    color: var(--color-white);
    font-size: 1.5rem;
    text-align: center;
    line-height: 55px;
    border-radius: 50%;
}

.status-txt {
    text-align: right;
}

.status-txt input,
.status-txt .count {
    font-size: 1.125rem;
    font-weight: 600;
    text-align: right;
}

/* Modal Popup */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    overflow: hidden;
}

.modal {
    display: none;
    position: absolute;
    width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    overflow: hidden;
}

.modal-dialog {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (0.5rem * 2));
    max-width: 100%;
    margin: 0 auto;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    outline: 0;
}

.modal-content .form-control,
.modal-content .btn {
    padding: 0.5rem 0.75rem;
}

.modal-header {
    background-color: var(--main-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-white);
    padding: 15px;
}

.modal-header h3 {
    font-size: 18px;
}

.modal-body {
    padding: 15px;
    overflow-y: auto;
}

.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
}

.modal-body .tab-group {
    clear: both;
    margin: 10px auto;
}

.modal-body .tab-group:after {
    clear: both;
    display: table;
    content: '';
}

.modal-body .tab-group a {
    position: relative;
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--point-color);
    text-align: center;
    padding: 15px 0;
    float: left;
    color: var(--sub-text02);
    cursor: pointer;
    bottom: -1px;
}

.modal-body .tab-group a.half {
    width: 50%;
    font-size: 14px;
}

.modal-body .tab-group a.current {
    background-color: var(--color-white);
    border: 1px solid var(--point-color);
    border-bottom: none;
    color: var(--point-color);
    font-weight: 500;
}

.dimLayer {
    display: block;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    top: 0px;
    margin: 0;
    padding: 0;
    z-index: 9998;
}

.modal-section {
    background: #ffffff;
    text-align: center;
    width: 370px;
    padding: 30px 15px;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-sizing: border-box;
}

.menu_msg {
    font-size: 1rem;
    font-weight: 500;
}

.enroll_box p {
    padding-bottom: 2rem;
}

.close {
    display: inline-block;
    padding: 0 10px;
}

.close:after {
    content: '\f00d';
    font-family: 'Font Awesome 6 Pro';
    font-size: 1.25rem;
    display: inline-block;
    cursor: pointer;
}

.form-control.whbtn {
    float: left;
    width: 60%;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
}

.form-control.whbtn + input,
.form-control.whbtn + button,
.form-control.whbtn + a {
    float: left;
    width: 40%;
}

.btn-modal {
    cursor: pointer;
}

body.hidden {
    overflow: hidden;
}

/* Webzine & Board */
ul.webzine-list li {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

ul.webzine-list li:after {
    clear: both;
    display: table;
    content: '';
}

ul.webzine-list li figure {
    float: right;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

ul.webzine-list li .title-header {
    float: left;
    width: -moz-calc(100% - 130px);
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
}

ul.webzine-list li .title-header h6 {
    margin-bottom: 5px;
}

ul.webzine-list li .title-header h6:hover {
    color: var(--point-color);
}

ul.webzine-list li .title-header p {
    font-size: 0.875rem;
    margin-bottom: 10px;
}

ul.webzine-list li span {
    position: relative;
    display: inline-block;
    color: var(--sub-text01);
    margin-right: 10px;
}

ul.webzine-list li span p {
    min-height: 38px;
}

ul.webzine-list li .cate {
    color: var(--point-color);
    font-weight: 400;
}

ul.webzine-list li .comment {
    padding-left: 20px;
}

ul.webzine-list li .comment:before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    background-image: url('/imgs/comment_icon.png');
    background-position: 0 0;
    background-size: 16px 14px;
    width: 16px;
    height: 14px;
}

.attendance .webzine-list td.left {
    word-break: break-all;
}

.attendance .webzine-list td.new {
    position: relative;
}

.attendance .webzine-list td.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
}

.attendance span.p-num {
    color: #1983DF;
}

.attendance span.ex-num {
    color: #199681;
}

.board table,
.board-list table,
.item-list table {
    border-top: 1px solid var(--gnb-color);
    margin: 10px auto;
}

.board table .title a {
    display: block;
    height: 100%;
}

.board table .title a:hover {
    color: #333;
}

table tr.notice > td,
table tr.new > td {
    background-color: var(--gray-bg);
}

table tr.notice .cate span.classification {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: 0.75rem;
    padding: 3px 5px;
    border-radius: 3px;
}

table tr .cate {
    font-size: 0.75rem;
}

table .badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 5px;
    color: var(--color-white);
}

table .badge.waiting,
table .badge.deposit01 {
    background-color: var(--sub-text01);
}

table .badge.plus,
table .badge.complete,
table .badge.deposit02 {
    background-color: var(--point-color);
}

table .badge.deposit03,
table .badge.minus {
    background-color: var(--hover-color);
}

table .badge.deposit99 {
    background-color: var(--main-text);
}

.item-list table {
    table-layout: auto;
}

table tr.mylevel td {
    background-color: var(--warning-bg);
    color: var(--color-red);
}

table tr.mylevel:nth-child(1) td:first-child {
    background-color: var(--color-white) !important;
    color: inherit;
}

table tr.mylevel {
    position: relative;
}

table tr.mylevel:after {
    content: '현재레벨';
    position: absolute;
    top: -10px;
    right: -5px;
    background-color: var(--color-red);
    padding: 4px 10px 5px;
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--color-white);
    border-radius: 1rem;
    z-index: 10;
    box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
}

table td .subject {
    display: flex;
    text-align: left;
    overflow: hidden;
    flex-direction: column-reverse;
}

table td .subject a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

table td .subject .new:before {
    content: '\f0e0';
    font-family: 'Font Awesome 6 Pro';
    display: inline-block;
    margin-right: 5px;
    color: var(--color-red);
}

table td .subject .opend:before {
    content: '\f2b6';
    font-family: 'Font Awesome 6 Pro';
    display: inline-block;
    margin-right: 5px;
    color: var(--sub-text01);
}

.article-wrap {
    padding: 0 10px;
}

.article-title {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.article-title p:before {
    content: '\f104';
    font-family: 'Font Awesome 6 Pro';
    padding-right: 5px;
}

.board-write h3 {
    margin: 20px 0 10px 0;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--gnb-color);
}

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.board-footer {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

/* 갤러리 게시판 리스트 스킨 */
.gallery-list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 0;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.gallery-list ul li {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-list ul li figure {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.gallery-list ul li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.gallery-list ul li .meta {
    display: flex;
    flex-direction: column;
    row-gap: 3px;
    width: 100%;
    background-color: var(--color-white);
    padding: 10px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: 0.5s ease;
}

.gallery-list ul li .meta p {
    display: flex;
    overflow: hidden;
}

.gallery-list ul li .meta p a {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-list ul li .id_name .m-lev {
    width: 21px;
    height: 21px;
}

.gallery-list ul li .id_name a {
    font-size: 0.75rem;
}

.gallery-list ul li small {
    font-weight: 300;
    color: rgba(0, 0, 0, 0.5);
}

.gallery-list a.new {
    position: relative;
}

.gallery-list a.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
}

.gallery-list span.new {
    position: relative;
}

.gallery-list span.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
}

/*이벤트 게시판 리스트 스킨*/
.event-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}

.event-list ul li {
    padding: 10px 25px;
}

.event-list ul li figure {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.event-list ul li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.event-list ul li figure.end-event {
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.event-list ul li figure.end-event:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.event-list ul li figure.end-event p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86px;
    height: 36px;
    margin: -18px 0 0 -43px;
    border: 2px solid #fff;
    background-color: var(--gnb-color);
    font-size: 18px;
    text-align: center;
    color: #fff;
    line-height: 34px;
    border-radius: 80px;
    font-weight: 500;
}

.event-list ul li .meta {
    margin-top: 20px;
}

.event-list ul li .meta h6 {
    font-size: larger;
}

.event-list ul li .meta P {
    color: var(--sub-text01);
    font-weight: 500;
    line-height: 20px;
}

.event-list ul li .meta P:nth-child(2) {
    margin-top: 10px;
}

.post-validated {
    width: 100%;
    padding: 50px;
    text-align: center;
    color: var(--sub-text02);
}

.post-validated i {
    font-size: 3rem;
    margin: 15px auto;
}



.info-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0 0 15px 0;
    margin: 15px 0;
}

.info-wrap .util {
    display: flex;
    color: var(--sub-text02);
    /* justify-content: flex-end; */
    align-items: center;
    column-gap: 10px;
}

.info-wrap .util,
.info-wrap .util a {
    color: var(--sub-text02);
}

.info-wrap .util a:hover {
    color: var(--main-text);
}

.info-wrap .util a.btn:hover {
    color: var(--color-white);
}

.info-wrap .util a.scrape:before {
    content: '\f02e';
    font-family: 'Font Awesome 6 Pro';
    margin-right: 5px;
}

.info-wrap .util a.scraped:before {
    content: '\f02e';
    font-family: 'Font Awesome 6 Pro';
    margin-right: 5px;
    font-weight: 900;
}

.info-wrap .util a.scraped {
    color: var(--point-color);
}

.user-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.user-wrap .profile-photo {
    margin-right: 10px;
}

.user-wrap .profile-photo.sm {
    margin-right: 0;
}

.user-wrap p small {
    display: block;
}

.article-wrap article {
    padding-bottom: 25px;
}

.article-wrap article p {
    margin-bottom: 20px;
}

.comment-wrap {
    border: 1px solid var(--border-color);
    padding: 15px;
    margin: 10px 0;
}

.comment-wrap textarea {
    background-color: var(--main-bg);
    display: block;
    width: 100%;
    border: none;
    padding: 10px;
    margin: 5px 0;
}

.comment-wrap .text-area-wrap {
    background-color: var(--main-bg);
}

.comment-wrap .text-area-wrap .comment-img {
    width: 100%;
    padding: 0px 10px 5px;
}

.comment-wrap .text-area-wrap .comment-img a {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
}

.comment-login a {
    background: #f4f4f4;
    padding: 10px;
    display: block;
    border: 1px solid #ddd;
}

/* .comment-wrap .text-area-wrap .comment-img a:before {
    content: "";
    position: absolute;
    background-color: rgba(0, 0, 0, 0.15);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
} */

.comment-wrap .text-area-wrap .comment-img img {
    width: auto;
    height: auto;
    max-width: 54px;
    max-height: 54px;
    border-radius: 6px;
    aspect-ratio: 54 / 54;
}

.comment-wrap .text-area-wrap .comment-img i {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    background-color: #fff;
    border-radius: 50%;
    color: #000;
    font-size: 10px;
    text-align: center;
}

.comment-attach {
    padding-top: 5px;
}

.comment-attach > label input[type="file"] {
    display: none;
}

.comment-attach > label {
    cursor: pointer;
}

.comment-list .profile-photo {
    margin-right: 10px;
}

.comment-list .profile-photo.sm {
    margin-right: 5px;
}

.comment-list .user-part {
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 15px 0;
}

.comment-list .user-part .id_name .dropdown-toggle {
    position: absolute;
    top: 1px;
    right: 0;
    display: block;
    padding: 5px 10px;
    color: var(--sub-text02);
    font-size: 1.125rem;
}

.comment-scope {
    min-width: 0;
    -ms-flex: 1 1 0.000000001px;
    -webkit-flex: 1;
    flex: 1;
    -webkit-flex-basis: 1e-9px;
    flex-basis: 1e-9px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.comment-scope p {
    margin: 5px 0;
    word-wrap: break-word;
}

.comment-scope p a.writer {
    color: var(--point-color);
    font-weight: 600;
    margin-right: 10px;
}

.comment-scope a.upload-img img {
    max-width: 250px;
    max-height: 375px;
    display: block;
    margin: 10px 0;
}

.comment-scope .id_name.new:after {
    content: 'N';
    box-sizing: border-box;
    /*width: 13px;*/
    /*height: 14px;*/
    padding: 1px 3px 1px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 9px;
    margin-left: 5px;
}

.editor-wrap textarea {
    width: 100%;
    min-height: 400px;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid var(--border-color);
}

.rebirth-tab {
    margin: 15px 0;
}

.rebirth-tab ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.3333%, 1fr));
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.rebirth-tab ul li {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.rebirth-tab ul li a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.rebirth-tab ul li a:hover {
    background-color: var(--main-bg);
}

.rebirth-tab ul li a.selected {
    background-color: var(--point-color);
    color: var(--color-white);
}

.prv-con span {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    color: var(--color-white);
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
}

.prv-con .pc10 {
    background-color: #111;
}

.prv-con .pc09 {
    background-color: #c00046;
}

.prv-con .pc08 {
    background-color: #9b5480;
}

.prv-con .pc07 {
    background-color: #7654ad;
}

.prv-con .pc06 {
    background-color: #473faf;
}

.prv-con .pc05 {
    background-color: #1d8caa;
}

.prv-con .pc04 {
    background-color: #718751;
}

.prv-con .pc03 {
    background-color: #9b7f1b;
}

.prv-con .pc02 {
    background-color: #ce7643;
}

.prv-con .pc01 {
    background-color: #9a9592;
}

.bail_form dl:after {
    content: '';
    clear: both;
    display: table;
}

.bail_form dl dt {
    clear: both;
    float: left;
    width: 80px;
    font-weight: 500;
    margin-bottom: 10px;
}

.bail_form dl dd {
    float: left;
    margin-bottom: 10px;
}

.bail-tit {
    font-size: 14px;
    font-weight: 500;
}

.bail-tit i {
    color: var(--point-color);
}

.bail-total {
    font-size: 15px;
    font-weight: 500;
}

.bail-total #bailPoint {
    color: var(--point-color);
}

.naviSearch {
    padding: 15px;
    margin: 30px auto;
}

.page-wrap {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.naviSearch .inline-field {
    width: 50%;
    margin: 0 auto;
}

.pg_page {
    color: var(--sub-text01);
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    min-width: 30px;
    text-decoration: none;
    border-radius: 0px;
    display: inline-block;
    vertical-align: middle;
    background: var(--color-white);
    border: 1px solid var(--border-color);
}

.pg_current {
    display: inline-block;
    background: var(--point-color);
    border: 1px solid var(--point-color);
    color: var(--color-white);
    font-weight: bold;
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    min-width: 30px;
    vertical-align: middle;
    border-radius: 0px;
}

.pg_start,
.pg_prev,
.pg_next,
.pg_end {
    font-family: 'Font Awesome 6 Pro';
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border-color);
}

.pg_start:before {
    content: '\f100';
}

.pg_prev:before {
    content: '\f104';
}

.pg_next:before {
    content: '\f105';
}

.pg_end:before {
    content: '\f101';
}

.go-market .filterSearch {
    margin-top: 0;
}

.market-list {
    margin-top: 10px;
    margin-bottom: 10px;
}

.market-list .item {
    border: none;
}

.market-list .item .item-tit {
    background-color: var(--color-white);
    padding: 10px;
    text-align: center;
}

.market-list .item .item-tit figure {
    padding: 15px;
}

.market-list .item .item-tit figure img {
    display: block;
    width: 100%;
    height: 178px;
    object-fit: cover;
}

.market-list .item .item-tit p {
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.market-list .item .buy-btn .btn {
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 0.85rem 0.75rem;
}

.market-list .item-select {
    border-top: 1px solid var(--border-color);
}

.market-list .item-select ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 5px;
    height: 51px;
    line-height: 51px;
    border-bottom: 1px solid var(--border-color);
}

.market-list .item-select ul li:last-child {
    border-bottom: none;
}

.form-check-input[type='radio'],
.form-check-input[type='checkbox'],
.pay-amount-radio[type='radio'] {
    display: none;
}

.form-check-input[type='radio'] + .btn-radio {
    background-image: url('/imgs/uncheck_icon.png');
    background-repeat: no-repeat;
    background-position: left center;
    line-height: 1.25rem;
    padding-left: 22px;
    cursor: pointer;
}

.form-check-input[type='radio']:checked + .btn-radio {
    background-image: url('/imgs/checked_icon.png');
}

.form-check-input[type='radio']:checked + label + .item-count {
    display: block;
}

.form-check-input[type='checkbox'] + .btn-checkbox {
    background-image: url('/imgs/uncheckbox_icon.png');
    background-repeat: no-repeat;
    background-position: left 2px;
    padding-left: 22px;
    line-height: 22px;
    cursor: pointer;
    min-height: 22px;
}

.form-check-input[type='checkbox']:checked + .btn-checkbox {
    background-image: url('/imgs/checkbox_icon.png');
}

.chkbx-toggle {
    display: none;
}

.chkbx-toggle + label {
    position: relative;
    display: block;
    cursor: pointer;
    outline: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 40px;
    height: 18px;
    background-color: #e4e4e4;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    -webkit-transition: background 0.4s;
    transition: background 0.4s;
}

.chkbx-toggle + label::before,
.chkbx-toggle + label::after {
    content: '';
    display: block;
    position: absolute;
}

.chkbx-toggle + label::before {
    right: 1px;
    left: 1px;
    top: 1px;
    bottom: 1px;
    background-color: var(--color-white);
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    -webkit-transition: background 0.4s;
    transition: background 0.4s;
}

.chkbx-toggle + label::after {
    top: -1px;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #fff;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -moz-transition: -moz-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

.chkbx-toggle:checked + label {
    background-color: var(--point-color);
}

.chkbx-toggle:checked + label::before {
    background-color: var(--point-color);
}

.chkbx-toggle:checked + label::after {
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

.chkbx-toggle:disabled + label {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    cursor: default;
}

.select-buy .item-count {
    display: none;
}

.item-count {
    display: inline-block;
}

.item-count .qty-minus,
.item-count .qty-plus {
    width: 21px;
    height: 21px;
    line-height: 18px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    display: inline-block;
    text-align: center;
}

.item-count input {
    width: 35px;
    padding: 0.25rem !important;
    text-align: center;
    border: 1px solid var(--border-color);
    display: inline-block;
}

.qty-plus:hover,
.qty-minus:hover {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    color: #fff;
}

/* Popup */
.popup-container {
    height: 100%;
}

.popup-container .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gnb-color);
    color: var(--color-white);
    padding: 8px 5px 8px 15px;
}

.popup-container .popup-header h3 {
    font-size: 18px;
}

.popup-nav {
    background-color: var(--gnb-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 60px;
    color: var(--color-white);
}

.popup-nav .logo {
    display: inline-block;
    width: 111px;
    height: 20px;
}

.popup-nav ul li {
    float: left;
    font-size: 0.95rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.popup-nav ul li:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.popup-nav ul li a {
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
    text-align: center;
}

.popup-nav ul li a:hover,
.popup-nav ul li a.current {
    background-color: var(--point-color);
}

.popup-chat-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: calc(100vh - 80px);
}

.popup-nav .f-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 20px;
}

.popup-nav .f-right .tooltip i,
.popup-nav .f-right .btn-modal i {
    font-size: 1.125rem;
}

.popup-chat-list-wrap {
    height: 100%;
}

.popup-nav .f-right .form-control {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    width: 150px;
}

.popup-sub-nav {
    background-color: #212529;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 50px;
    color: var(--color-white);
}

.popup-sub-nav .flex-left,
.popup-sub-nav .flex-right {
    display: inline-flex;
    align-items: center;
}

.popup-sub-nav .select-selected {
    background-color: transparent;
    border: 1px solid var(--sub-text02);
}

.popup-sub-nav .select-items {
    background-color: var(--sub-text01);
}

.popup-nav .tooltip .txt,
.popup-sub-nav .tooltip .txt {
    width: 300px;
}

.popup-body {
    padding: 15px;
}

.popup-body.gray {
    background-color: var(--main-bg);
}

.popup-body figure {
    margin: 15px auto;
    width: 100px;
}

.popup-body figure.table {
    margin: 15px auto;
    width: 100%;
}

.popup-body .item-title h6 {
    margin-bottom: 5px;
}

.popup-body .item-title .badge {
    font-size: 0.875rem;
    background-color: var(--point-color);
    color: var(--color-white);
    border-radius: 5rem;
    padding: 2px 20px 3px;
}

.popup-body .item-select label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-body .total-gift {
    background-color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.popup-body .total-gift span {
    color: var(--point-color);
}

.popup-footer {
    padding: 15px;
    text-align: center;
}

.popup-container .tabs {
    width: 100%;
}

.popup-container .tab-group a {
    padding: 11px 5px;
}

.popup-container .tab-radio {
    float: left;
    background-color: var(--main-bg);
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    line-height: 45px;
    font-weight: 600;
    cursor: pointer;
}

.popup-container .tabs .form-check-input:checked + .tab-radio {
    border-top: 1px solid var(--point-color);
    border-left: 1px solid var(--point-color);
    border-right: 1px solid var(--point-color);
    border-bottom: 1px solid var(--color-white);
    background-color: var(--color-white);
    color: var(--point-color);
}

.popup-container .tabs.five .tab-radio {
    width: 20%;
}

.popup-container .tab-content {
    width: 100%;
    clear: both;
    background-color: var(--color-white);
}

.popup-container .tab-group ~ .tab-content {
    padding: 10px;
}

.popup-container .modal-section {
    width: 370px;
}

.addBox .list-box {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    height: 210px;
    overflow-y: auto;
    margin: 5px 0;
}

.addBox .nickname-list {
    list-style-type: none;
}

.addBox .nickname-list li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 280%;
    border-bottom: 1px solid var(--border-color);
}

.addBox .nickname-list li:last-child {
    border-bottom: none;
}

.addBox .nickname-list li i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.addBox .nickname-list label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message textarea {
    width: 100%;
    height: 140px;
}

#charging-1:checked ~ #charging-1,
#charging-10:checked ~ #charging-10,
#charging-100:checked ~ #charging-100,
#charging-200:checked ~ #charging-200,
#charging-500:checked ~ #charging-500 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.btn-radio,
.btn-checkbox {
    display: inline-block;
    margin: 5px;
}

.popup-container .inner {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.popup-container .inner .tab-content .bank-info {
    border: 1px solid var(--border-color);
    background-color: var(--main-bg);
    padding: 15px 20px;
    margin-bottom: 1rem;
}

.pay-amount-radio[type='radio'] + .btn-radio {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    text-align: center;
    padding: 0.75rem 0;
    font-weight: 600;
    width: 21%;
    cursor: pointer;
}

.pay-amount-radio[type='radio'] + .btn-radio i {
    display: block;
    margin-bottom: 0.5rem;
}

.pay-amount-radio[type='radio']:checked + .btn-radio {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    color: var(--color-white);
}

.pay-type-check[type='radio'] {
    display: none;
}

.pay-type-check[type='radio'] + .btn-radio {
    background-color: var(--main-bg);
    border-radius: 30px;
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    margin: 8px 10px;
    cursor: pointer;
}

.pay-type-check[type='radio']:checked + .btn-radio {
    background-color: var(--point-color);
    color: var(--color-white);
}

#pay-type-1:checked ~ #pay-type-1,
#pay-type-2:checked ~ #pay-type-2,
#pay-type-3:checked ~ #pay-type-3,
#pay-type-4:checked ~ #pay-type-4,
#pay-type-5:checked ~ #pay-type-5,
#pay-type-6:checked ~ #pay-type-6,
#pay-type-7:checked ~ #pay-type-7 {
    display: block;
}

#receipt-1:checked ~ #receipt-1,
#receipt-2:checked ~ #receipt-2 {
    display: block;
}

.pay-info {
    display: block;
    text-align: center;
    margin-top: 15px;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 400;
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
}

.bonus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0 0;
    padding: 15px 10px 0;
    border-top: 1px solid var(--border-color);
}

.bonus img {
    display: inline-block;
    margin-right: 15px;
    width: 40px;
    height: auto;
}

/* 채팅랭킹, 가족방 등등 */
.profile-ranking {
    display: inline-block;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    width: 23px;
    height: 23px;
    text-align: center;
    line-height: 21px;
}

.profile-ranking.rank1 {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    color: var(--color-white);
}

.profile-ranking.rank2 {
    background-color: var(--hover-color);
    border: 1px solid var(--hover-color);
    color: var(--color-white);
}

.profile-ranking.rank3 {
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
    color: var(--color-white);
}

.topMember li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 7px 0;
}

.topMember li:last-child {
    border-bottom: none;
}

.user-level-nav-group {
    display: grid;
    /*background-color: var(--color-white);
     display: inline-grid; */
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(50px, auto);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.user-level-nav-group li {
    text-align: center;
    line-height: 50px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.user-level-nav-group li a {
    display: block;
    line-height: 50px;
}

.user-level-nav-group li.active a {
    background-color: var(--point-color);
    color: var(--color-white);
}

.user-level-nav-group li a .m-lev {
    vertical-align: middle;
}

.customer-center .panel .link-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    text-align: center;
    transform: translateY(-50%);
    background-color: var(--color-white);
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    border-radius: 50%;
    box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.15);
}

.customer-center .panel .link-btn:hover {
    background-color: var(--point-color);
    color: var(--color-white);
}

.faq {
    margin: 10px auto;
}

.faq-item {
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.faq-item .faq-item-title {
    position: relative;
    padding: 1rem 2rem 1rem 3rem;
    background: var(--main-bg);
    cursor: pointer;
}

.faq-item .faq-item-title:before {
    content: 'Q';
    position: absolute;
    background-color: var(--sub-text02);
    color: var(--color-white);
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
    border-radius: 50%;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.faq-item .faq-item-title:after {
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    right: 15px;
    top: 50%;
    font-size: 0.9rem;
    color: var(--sub-text02);
    font-weight: bold;
    transform: translateY(-50%) rotate(0);
    transition: transform 0.15s ease;
}

.faq-item.active .faq-item-title:before {
    background-color: var(--gnb-color);
}

.faq-item.active .faq-item-title:after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-item-content {
    position: relative;
    display: none;
    padding: 1rem 2rem 1rem 3rem;
    transition: 0.3s;
}

.faq-item-content:before {
    content: 'A';
    position: absolute;
    background-color: var(--hover-color);
    color: var(--color-white);
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
    border-radius: 50%;
    top: 1.45rem;
    left: 1rem;
}

.faq-item.active .faq-item-content {
    display: block;
}

.terms-subect {
    display: inline-block;
    width: 48%;
}

/* Sports News */

/* 많이 본 뉴스 */
.sports-news-list {
    list-style: none;
    counter-reset: list;
}

.sports-news-list li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 2.125rem;
    line-height: 1.75rem;
    counter-increment: list;
}

.sports-news-list li:before {
    content: counter(list);
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 50%;
    text-align: center;
    color: var(--sub-text02);
}

.headline {
    position: relative;
}

.headline article {
    width: 100%;
    height: 360px;
    color: var(--color-white);
    border-radius: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.headline article::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5998774509803921) 70%);
}

.headline article a {
    display: block;
    width: 100%;
    height: 100%;
}

.headline article .subject {
    position: absolute;
    left: 35px;
    bottom: 25px;
}

.headline article label.cate,
.media label.cate {
    background-color: var(--hover-color);
    font-size: 0.75rem;
    border-radius: 2px;
    padding: 2px 12px;
    color: var(--color-white);
}

.headline article h1 {
    font-size: 2rem;
    letter-spacing: -1px;
    line-height: 2.4rem;
    margin: 10px 0;
}

.headline .owl-nav {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: var(--color-white);
    font-size: 3rem;
}

.headline .owl-prev,
.headline .owl-next {
    padding: 10px 15px;
}

.media {
    position: relative;
    margin-bottom: 1rem;
}

.media a {
    display: block;
    overflow: hidden;
    border-radius: 5px;
}

.media label.cate {
    position: absolute;
    left: 15px;
    bottom: 15px;
    z-index: 10;
}

.media img {
    display: block;
    width: 100%;
    min-height: 120px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    object-fit: cover;
}

.media img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.news-title {
    font-weight: 600;
}

.excerpt {
    margin: 6px 0;
    color: var(--sub-text01);
}

/* 베스트 베팅 */
.best-betting-container {
    margin-bottom: 1.875rem;
}

.sports-best-betting {
    grid-gap: 1rem 1rem;
    margin-top: 20px;
}

.sports-best-betting .card {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    border-radius: 0.625rem;
    background: var(--color-white);
    overflow: hidden;
    box-shadow: 2px 4px 8px rgb(0 0 0 / 10%);
}

.sports-best-betting .card .card-header,
.calendar_list.betting .list_top {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    color: #fff;
    background: var(--point-color);
}

.sports_title,
.sports_time_date {
    display: flex;
    gap: 0.5rem;
}

.icon svg {
    max-width: 1rem;
    fill: currentColor;
}

.sports_time_date .sports_date {
    font-weight: 400;
}

.sports_time_date .sports_time {
    position: relative;
    padding-left: 0.5rem;
    font-weight: 400;
}

.sports_time_date .sports_time::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--color-white);
}

.card-body a {
    display: block;
    padding: 1rem;
}

.sports_details .details_top,
.sports_resault .details_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.confidenceRating svg {
    max-width: 1rem;
    fill: var(--color-placeholder);
}

.confidenceRating svg.fill {
    fill: #ed1c24;
}

.tag_container .tag {
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    line-height: 1.5;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.tag.tag_blue {
    color: #1983df;
    background: #f0f6fe;
}

.tag.tag_red {
    color: #f64356;
    background: #fae1e1;
}

.details_bottom p {
    font-size: 1.125rem;
    color: var(--main-text);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.details_bottom .sports_name {
    display: flex;
    font-size: 1rem;
    color: var(--sub-text01);
}

.calendar-sports,
.calender_week {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.calendar-sports button {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    color: var(--point-color);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 0.625rem;
    padding: 1rem 1.625rem;
}

.calender_week button {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    color: var(--point-color);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 0.625rem;
    padding: 0.5rem 2.5rem;
}

.calender_week button.active,
.calendar-sports button.active {
    background: var(--point-color);
    color: var(--color-white);
}

.calendar-sports button svg {
    fill: currentColor;
    width: 2rem;
    height: 2rem;
}

.calender_week button {
    text-transform: uppercase;
}

.calendar_block {
    background: var(--color-white);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 0.625rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.calendar_block .list_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f6fe;
    color: var(--point-color);
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgb(0 0 0 / 5%);
}

.calendar_block .list_top .sportname {
    font-weight: 800;
}

.calendar_block .list_bottom {
    position: relative;
    padding: 0.625rem 1rem;
}

.list_bottom p {
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.list_bottom .sports_name {
    display: flex;
    flex-direction: column;
}

.calendar_block .list_bottom a {
    position: absolute;
    right: 1rem;
    bottom: 0.625rem;
    color: var(--point-color);
    font-weight: 800;
}

.calendar_block .list_bottom a svg {
    max-width: 0.5rem;
    fill: currentColor;
}

.btn.more {
    display: block;
    width: 128px;
    padding: 0.5rem 1rem;
    margin: 0 auto;
}

.news-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.news-list .card {
    display: grid;
    grid-template-columns: 114px auto;
    gap: 10px;
    padding: 0.625rem;
    background: var(--color-white);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 0.625rem;
}

.news-list .card .media,
.news-list .card .media img {
    min-width: 114px;
    min-height: 96px;
    margin: 0;
}

.news-list .card .news_list_title {
    position: relative;
}

.news-list .card h6 {
    font-size: 1rem;
    font-weight: 400;
}

.news-list .card .news_list_title .cate {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--hover-color);
    font-size: 0.75rem;
    border-radius: 2px;
    padding: 2px 12px;
    color: var(--color-white);
}

.calendar_list.betting .list_bottom {
    background: #f0f6fe;
    padding: 1rem;
}

.team_badge_container {
    display: flex;
    justify-content: start;
    gap: 4px;
    margin-bottom: 0.875rem;
}

.team_badge_container .team_badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / 10%);
    background: var(--color-white);
}

.team_badge_container .team_badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calendar_list.betting .sports_details .sports_name {
    flex-direction: row;
    gap: 3px;
    font-size: 1rem;
    font-weight: 700;
}

.calendar_list.betting .list_bottom a {
    bottom: 1rem;
}

.sports_resault {
    position: relative;
    padding: 1rem;
}

.sports_resault .reason {
    position: absolute;
    top: 92.578px;
    right: 1rem;
    color: var(--color-red);
    cursor: pointer;
}

.sports_resault .reason i {
    transition: all 0.2s ease;
}

.sports_resault .reason.filp i {
    transform: rotate(180deg);
    transition: all 0.2s ease;
}

.collapsible {
    /* display: none; */
}

.collapsible .betting_insight {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: #f0f6fe;
}

/* etc */

.floating {
    position: fixed;
    bottom: 2rem;
    right: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    z-index: 30;
}

.floating .gopicTalk-btn {
    display: block;
    width: 64px;
    height: 64px;
    background-color: var(--color-red);
    color: var(--color-white);
    padding: 10px 0;
    border-radius: 50%;
    text-align: center;
}

.floating .gopicTalk-btn i {
    font-size: 1rem;
}

.floating .gopicTalk-btn small {
    display: block;
    font-size: 11px;
    line-height: 110%;
}

.floating .gopicTalk-btn.new {
    animation: tilt-shaking 0.3s infinite;
}

@keyframes tilt-shaking {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0eg);
    }

    75% {
        transform: rotate(-5deg);
    }

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

.scroll-top {
    display: block;
    width: 60px;
    height: 60px;
    background-color: var(--color-white);
    color: var(--main-text);
    font-size: 1.25rem;
    border: 2px solid var(--sub-text02);
    padding: 10px 0;
    border-radius: 50%;
    text-align: center;
}

.scroll-top small {
    display: block;
    font-size: 11px;
    font-weight: 500;
}

#chat-icon {
    cursor: pointer;
}

.addBox .list-box ul li {
    position: relative;
}

.addBox .list-box ul li .close {
    position: absolute;
    top: 0;
    right: -10px;
}

/* 출석부 */
.month-table {
    background-color: var(--color-white);
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    width: 100%;
    margin: 10px 0;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.month-table li {
    position: relative;
    display: flex;
    text-align: center;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.month-table li.today {
    background-color: var(--warning-bg);
}

.month-table li .date {
    font-size: 0.5rem;
    padding: 2px;
    border-bottom: 1px solid var(--border-color);
}

.month-table li .date.sat {
    color: var(--color-blue);
}

.month-table li .date.sun {
    color: var(--color-red);
}

.month-table li .check,
.month-table li .muted {
    position: relative;
    padding: 5px 2px;
}

.month-table li .check:after {
    content: '\f00d';
    font-family: 'Font Awesome 6 Pro';
    color: var(--sub-text02);
    font-size: 0.875rem;
}

.month-table li .muted:after {
    content: '-';
    color: var(--sub-text02);
    font-size: 0.875rem;
}

.month-table li .check.attend:after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    color: var(--color-red);
    font-size: 0.875rem;
}

/*회원탈퇴*/
.secession {
    width: 700px;
}

.secession li:before {
    content: '\f00c';
    position: relative;
    top: 3px;
    left: -15px;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 1rem;
}

.secession li {
    list-style-position: inside;
    text-indent: -12px;
    margin-left: 35px;
}

/*사이드 픽등록*/
#powerball_evo_pick {
    width: 100%;
}

.sidebar_pick {
    background-color: var(--color-white);
}

.sidebar_pick .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    column-gap: 5px;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar_pick .title .count {
    color: var(--color-red);
    font-family: Arial, Helvetica, sans-serif;
}

.sidebar_pick .pick_box {
    position: relative;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    align-items: center;
    min-height: 130px;
    row-gap: 10px;
}

.sidebar_pick .pick_box div {
    width: 100%;
}

.sidebar_pick .pick_box .table-bg {
    position: relative;
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
}

.sidebar_pick .pick_box .table-bg h6 {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.675rem;
    background: #fff;
    border: 1px solid #efefef;
    color: #4f4f4f;
    padding: 0 10px;
    border-radius: 10px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}

.sidebar_pick .pick_box ul li span .pwb,
.sidebar_pick .pick_box ul li span .lucky,
.sidebar_pick .pick_box ul li span .moneydot {
    background-color: #bebebe;
    border: 1px solid var(--sub-text01);
}

.sidebar_pick .pick_box ul li span.pick .pwb,
.sidebar_pick .pick_box ul li span.pick .lucky,
.sidebar_pick .pick_box ul li span.pick .moneydot {
    filter: grayscale(0);
    opacity: 1;
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -3px;
    right: -3px;
    border: 1px solid var(--main-text);
    background-color: #ff6600;
    color: var(--color-white);
    font-size: 0.625rem;
    line-height: 0.625rem;
    border-radius: 4px;
    text-align: center;
    zoom: 90%;
    transform: scale(90%);
}

.sidebar_pick .pick_box .pick-lock {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray-bg);
    text-align: center;
    z-index: 10;
}

.sidebar_pick .pick_box .pick-lock .message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sidebar_pick .pick_box .pick-lock .message i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.sidebar_pick .pick_box .pick-result {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray-bg);
    text-align: center;
    z-index: 10;
}

.sidebar_pick .pick_box .pick-result .message-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 30px;
}

.sidebar_pick .pick_box .pick-result .result-message {
    border: 2px dashed var(--border-color);
    background-color: #fff;
    padding: 15px;
}

.sidebar_pick .pick_box .pick-result .result-message p {
    font-size: 15px;
    font-weight: 500;
}

.sidebar_pick .pick_box .pick-result .result-message span {
    display: inline-block !important;
    padding: 0 10px;
    min-width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

#twc-chat #chat-icon {
    position: fixed;
    bottom: 95px;
    right: 20px;
    z-index: 30;
    display: block;
    -webkit-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

#twc-chat #chat-icon img {
    cursor: pointer;
    border: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* 게시판 Toggle Switch */
.board-toggle-switch {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 77px;
    height: 26px;
    border-radius: 50px;
}

.board-toggle-switch[name]:hover::after {
    position: absolute;
    content: attr(name);
    min-width: 100px;
    font-size: 0.688rem;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 5px;
    background-color: #000;
    color: var(--color-white);
    padding: 5px;
    border-radius: 3px;
    z-index: 10;
}

.board-toggle-switch input {
    display: none;
}

.board-toggle-switch .btn-on {
    display: flex;
    width: 90px;
    height: 22px;
    font-size: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 50px;
    margin: 2px;
    cursor: pointer;
}

.board-toggle-switch .btn-on i {
    margin: 5px 0px 0px 10px;
}

.board-toggle-switch .btn-on span {
    text-align: center;
    font-size: 13px;
    margin: 2px 0px 0 7px;
    font-weight: 500;
}


.board-toggle-switch input:checked + .btn-on i {
    color: var(--point-color);
}

.board-toggle-switch input:checked + .btn-on span {
    color: var(--point-color);
}

/* End 게시판 Toggle Switch */

/*event-banner*/
.event-banner {
    position: absolute;
    z-index: 100;
}

.event-banner button {
    background: none;
    border: none;
}

.event-banner .banner-close {
    width: 30px;
    height: 30px;
    border: none;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    right: 0;
    top: 0;
}

.event-banner .banner-close::after {
    display: block;
    content: '\00d7';
    color: #fff;
    font-size: 25px;
    margin-top: -25px;
    margin-left: 7px;

}

/*당첨자 정보 입력*/
#event-info .person-onfo-form li {
    font-weight: 600;
}

#event-info .person-onfo-form li i {
    font-size: 10px;
    margin-right: 5px;
    color: var(--gnb-color);
}

#event-info .gray ul li span {
    margin-left: 10px;
    font-weight: 400;
    color: #797979;
}

.personal-politic {
    background-color: #d4e9ff;
    border-radius: 5px;
    margin-top: 5px;
    padding: 15px;
    font-size: 0.8rem;
}

.personal-politic li i {
    margin-right: 5px;
    font-size: 11px;
}

.personal-politic ul li {
    margin-left: 10px;
    font-size: 12px;
}

.btn.disabled.collection {
    background-color: #95a4b3;
    border: none;
}

.btn.collection:hover {
    border: none;
}

.bbs-list a.new {
    position: relative;
}

.bbs-list a.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
}

.board-list-new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 3px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
    display: inline-block;
}

.board-list-title-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 95%;
}

.board-list-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.event-category {
    font-size: 12px;
    color: var(--point-color);
}

.ml4 {
    margin-left: 4px;
}

.mb4 {
    margin-bottom: 4px;
}



/*승부예측*/
.livescore.go-bbs .victory-badge {
    display: inline-block;
    color: #fff;
    background-color: #05529E;
    border-radius: 5px;
    font-size: 12px;
    padding: 7px 9px;
    letter-spacing: 0;
    font-weight: normal;
}

.livescore.go-bbs .analyze-badge {
    display: inline-block;
    color: #000;
    background-color: #d9d3cc;
    border-radius: 15px;
    font-size: 11px;
    padding: 5px 10px;
    font-weight: 500;
    letter-spacing: 0;
}

.livescore.go-bbs .basic span {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.livescore.go-bbs tr.victory-notice td,
.livescore.go-bbs tr.notice td {
    background-color: #F6FAFF;
}

.livescore.go-bbs tr.victory-notice:hover td,
.livescore.go-bbs tr.notice:hover td {
    background-color: #EEF5FE;
    font-weight: 600;
}

.livescore.go-bbs .game-info {
    text-align: left;
}

.livescore.go-bbs .game-info .game-category {
    display: flex;
    gap: 5px;
    font-size: 11px;
}

.livescore.go-bbs .game-info .game-category span {
    color: #333;
    font-weight: 600;
}

.livescore.go-bbs .notice .game-info .game-category span,
.livescore.go-bbs .victory-notice .game-info .game-category span {
    color: #035DB7;
    font-weight: 600;
}

.livescore.go-bbs .game-info .game-category time {
    font-weight: normal;
}

.livescore.go-bbs .notice .game-info .game-category time,
.livescore.go-bbs .victory-notice .game-info .game-category time {
    color: #333;
    font-weight: 500;
}

.livescore.go-bbs .game-info .team-name {
    display: flex;
    gap: 5px;
    color: #333;
    font-weight: 600;
    font-size: 12px;
    margin-top: 3px;
}


.livescore.go-bbs .game-info .team-name span {
    display: inline-block;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*poweball_dh*/

span.section {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    border-radius: 20px;
    text-align: center;
    font-style: normal;
    font-size: inherit;
    background-color: var(--color-orange) !important;
}

.contour span.section {
    background-color: #fff !important;
    color: var(--color-orange);
    border: 1px solid var(--color-orange);
}

span.outline {
    border: 1px solid #777;
    border-radius: 30px;
    color: #333;
}

/*select table*/
.analyze-tab {
    display: flex;
    justify-content: space-between;
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
}

.analyze-table th {
    background-color: var(--main-bg);
    border-top: unset;
}

.analyze-table .line_left {
    border-left: 1px solid #d6d6d6;
}

.analyze-table td {
    border: 1px solid var(--border-color);
}

.analyze-table span {
    display: block;
}

.analyze-table small {
    font-size: 10px;
}

.analyze-table input[type='checkbox'] {
    display: none;
}


.analyze-table[type='checkbox'] + .btn-checkbox {
    background-image: url(/imgs/uncheckbox_icon.png);
    background-repeat: no-repeat;
    background-position: left 2px;
    padding-left: 22px;
    line-height: 22px;
    cursor: pointer;
    min-height: 22px;
}

.analyvze-table .date-info time {
    font-weight: 600;
}

.analyze-table .date-info time,
.analyze-table .date-info span {
    display: block;
    padding-bottom: 10px;
}

.analyze-table .date-info time {
    font-weight: 600;
}

.analyze-table .tot {
    font-size: 13px;
    color: #777;
}


.pattern-popup {
    display: block;
}

.day-date-popup {
    display: grid;
}

.day-date-popup .data-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.day-date-popup .data-wrap .day-data {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
    background-color: #fff;
}

.day-data .bar_graph {
    padding: 0px 50px 0 50px;
}

.day-data .pie_graph .info li {
    margin: 15px 0;
}


@media (max-width: 1120px) {
    .day-date-popup .data-wrap {
        display: block;
    }
}