* {
    -webkit-text-size-adjust: none;
}

body,
html {
    height: 100%;

}

body {
    margin: 0 auto;
    color: var(--main-text);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

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

em {
    font-style: normal;
}

a {
    color: inherit;
    text-decoration: none;
}

abbr {
    text-decoration: none;
}

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

.color-purple {
    color: var(--color-purple);
}

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

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

.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: 0 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 {
    padding-top: 5px !important;
}

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

.pt15 {
    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 {
    padding-bottom: 5px !important;
}

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

.pb15 {
    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,
.my5 {
    margin-top: 5px !important;
}

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

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

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

.mt25,
.my25 {
    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,
.my5 {
    margin-bottom: 5px !important;
}

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

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

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

.mb25,
.my25 {
    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;
}

.ml3 {
    margin-left: 3px !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-bottom: 5px !important;
}

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

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

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

.pb15,
.py15 {
    padding-bottom: 15px !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;
}

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

@media screen and (max-width: 767px) {

    input,
    select,
    textarea {
        font-size: 0.75rem;
    }
}

.scroll-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.h88 {
    height: calc(100% - 88px);
}

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

.panel-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.panel-body {
    padding: 15px;
}

.panel-footer {
    padding: 15px;
}

.title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.title-flex.bg {
    background-color: var(--point-color);
    color: var(--color-white);
}

.title-flex.bg a {
    color: var(--color-white);
}

.title-flex.border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.panel .title-flex {
    padding: 0.75rem 1.25rem;
}

.panel.large .title-flex {
    padding: 25px 20px 0;
}

/* Header */
.go-header {
    height: 50px;
}

.go-header .nav-container {
    position: relative;
    height: 50px;
    background-color: var(--color-white);
}

.nav-mobile {
    position: absolute;
    top: 50%;
    left: 15px;
    font-size: 18px;
    font-weight: 600;
    transform: translateY(-50%);
    z-index: 10;
}

#nav-toggle {
    display: block;
    cursor: pointer;
    padding: 15px;
}

#nav-toggle span,
#nav-toggle span:after,
#nav-toggle span:before {
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    width: 23px;
    background-color: var(--main-text);
    position: absolute;
    left: 0;
    display: block;
    content: "";
    transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
    top: -7px;
}

#nav-toggle span:after {
    bottom: -7px;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:after,
#nav-toggle.active span:before {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: rotate(-45deg);
}

.brand {
    background-image: url("/mobile/imgs/logo.svg");
    background-size: 95px 30px;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 96px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    z-index: 10;
}

.brand a {
    display: block;
    height: 100%;
}

.brand.event {
    background-image: url("/mobile/imgs/logo_event_day_3_1.svg");
    background-size: 140px 50px;
    width: 140px;
    height: 50px;
}

.go-page-header {
    height: 50px;
}

.go-page-header .nav-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.go-page-header .nav-container a.back {
    display: block;
    font-size: 1.125rem;
    padding: 0 0.875rem;
    line-height: 50px;
}

.go-page-header .page-nav {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.25rem;
}

.go-page-header .page-nav a {
    display: block;
    line-height: 45px;
    padding: 3px 10px 0;
    text-align: center;
}

.page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

.page-title h6 {
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.go-page-header .util-menu {
    font-size: 0.75rem;
}

.brand a object {
    pointer-events: none;
    display: block;
}

.my-nav {
    position: absolute;
    top: 50%;
    right: 7px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transform: translateY(-50%);
    z-index: 10;
}

.go-header .my-nav li,
.nav-list .my-nav li {
    position: static;
}

.go-header .my-nav li > a,
.nav-list .my-nav li > a {
    position: relative;
    display: block;
    width: 30px;
    line-height: 100%;
    padding: 3px 5px 0;
    text-align: center;
}

.go-header .my-nav li > a > i,
.nav-list .my-nav li > a > i {
    font-size: 1.25rem;
}

.go-header .my-nav li a .badge {
    position: absolute;
    right: 3px;
    top: 2px;
    background-color: var(--hover-color);
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

.go-header .nav-container .dropdown-list {
    position: absolute;
    display: none;
    width: 100%;
    right: 0;
    top: 100%;
    z-index: 10;
}

.go-header .my-nav li .dropdown-list:before {
    content: "";
    position: absolute;
    top: -7px;
    right: 80px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent var(--point-color) transparent;
    border-width: 0 5px 7px 5px;
}

.go-header .my-nav li .dropdown-list .title-flex {
    padding: 0.75rem 0.875rem;
}

.go-header .my-nav li .dropdown-list .panel-body {
    padding: 15px !important;
    overflow-y: auto;
    height: 300px;
}

.go-header .my-nav li .dropdown-list .thumb-list li {
    position: relative;
}

.go-header .my-nav li .dropdown-list .thumb-list li.empty,
.go-msg .thumb-list li.empty {
    text-align: center;
    padding: 1.5rem 0;
}

.go-header .my-nav li .dropdown-list .thumb-list li.empty i,
.go-msg .thumb-list li.empty i {
    padding: 0.5rem 0;
    font-size: 1.75rem;
}

.go-header .my-nav li .dropdown-list .thumb-list li:after,
.go-msg .thumb-list li:after {
    content: "";
    clear: both;
    display: block;
}

.go-header .my-nav li .dropdown-list .thumb-list li .msg-icon,
.go-header .my-nav li .dropdown-list .thumb-list li .profile-photo {
    float: left;
}

.go-header .my-nav li .dropdown-list .thumb-list li .msg-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    color: var(--color-white);
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
}

.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-header .my-nav li .dropdown-list .thumb-list li .msg-icon.success,
.go-msg .thumb-list li .msg-icon.success {
    background-color: var(--point-color);
}

.go-header .my-nav li .dropdown-list .thumb-list li .msg-icon.comment,
.go-msg .thumb-list li .msg-icon.comment {
    background-color: var(--color-green);
}

.go-header .my-nav li .dropdown-list .thumb-list li .msg-icon.gamechip,
.go-msg .thumb-list li .msg-icon.gamechip {
    background-color: var(--hover-color);
}

.go-header .my-nav li .dropdown-list .thumb-list li .msg-icon.gift,
.go-msg .thumb-list li .msg-icon.gift {
    background-color: #ff9900;
}

.go-header .my-nav li .dropdown-list .thumb-list li .msg-icon.like,
.go-msg .thumb-list li .msg-icon.like {
    background-color: var(--color-yellow);
}

.go-msg .thumb-list li .subject p {
    font-size: 1rem;
    display: block;
}

.go-header .my-nav li .dropdown-list .thumb-list li a,
.go-msg .thumb-list li a {
    display: block;
}

.go-header .my-nav li .dropdown-list .thumb-list li a.close,
.go-msg .thumb-list li a.close {
    position: absolute;
    display: block;
    right: -10px;
    top: 0;
}

.go-header .my-nav li .dropdown-list .thumb-list .info {
    display: block;
    font-size: 0.75rem;
}

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

.go-header .my-nav li .dropdown-list.panel .panel-footer {
    background-color: var(--gray-bg);
    text-align: center;
}

.go-header .my-nav li .dropdown-list.panel .panel-footer a {
    display: block;
    width: 100%;
    height: 100%;
}

.go-header .my-nav li.mypage .dropdown-list {
    width: 12rem;
}

.go-header .my-nav li.mypage .dropdown-list ul li {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.go-header .my-nav li.mypage .dropdown-list ul li a {
    display: block;
    width: 100%;
    height: 100%;
}

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

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

.header-flex {
    height: 88px;
}

.nav-right {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 20;
}

.nav-right a {
    color: var(--color-white);
}

.go-mylog {
    padding: 0.375rem 1rem 2.7rem;
    border-bottom: 1px solid var(--border-color);
}

.go-mylog .user-info {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 45px;
    column-gap: 10px;
}

.go-mylog .profile {
    position: relative;
}

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

.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 {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    gap: 5px;
}

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

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

.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 .btn_gotalk {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    border: 1px solid #c3c3c3;
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 45px;
    font-size: 0.875rem;
    font-weight: 600;
    transform: translateY(-50%);
}

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

.go-mylog .user-point {
    position: relative;
    background: var(--main-bg);
    border: 1px solid rgba(0, 0, 0, 5%);
    padding: 10px 15px 15px 15px;
    margin: 15px 0;
    border-radius: 10px;
}

.go-mylog .user-point ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 13px 0 0;
}

.go-mylog .user-point ul li span {
    font-size: 1.0rem;
    font-weight: 600;
    padding: 0 0.5rem;
}

.go-mylog .user-point ul li {
    font-size: 0.688rem;
}

.go-mylog .user-point .follows {
    font-size: 0.825rem;
    font-size: 0.825rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 15px;
}

.go-mylog .user-point .follows li {
    font-size: 0.8rem;
}

.go-mylog .user-point .point_check li {
    font-size: 0.563rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.go-mylog .user-point .point_check .my_cash abbr {
    background-color: var(--color-red);
}

.go-mylog .user-point .point_check .my_point abbr {
    background-color: var(--color-blue);
}

.go-mylog .user-point .point_check .my_experience abbr {
    background-color: var(--color-green);
}

.go-mylog .user-point .point_check .my_gmoney abbr {
    background-color: var(--color-yellow);
}

.go-mylog .user-point .point_check li p {
    font-size: 0.9rem;
    font-weight: 600;
}

.go-mylog .user-point .point_check li abbr {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    color: #fff;
    font-size: 0.9rem;
    line-height: 28px;
    text-align: center;
}

.go-mylog .user-point .point_check li span {
    font-size: 0.85rem;
}

.attend_check {
    position: absolute;
    left: 0;
    bottom: -25%;
    display: block;
    /* border: 1px solid #c3c3c3; */
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    transform: translateY(25%);
    background-color: var(--point-color);
    color: #fff;
}

.nav-list {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin-top: 50px;
    background: var(--color-white);
    z-index: 130;
}

.nav-list .my-nav {
    padding: 0.75rem 0.75rem 0;
}

.nav-list .user-login {
    padding: 1rem 0.9rem;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
}

.nav-list .user-login b {
    color: var(--dark-color);
}

.nav-list .user-login i {
    font-size: 0.8rem;
    color: var(--sub-text02);
    margin-left: 10px;
}

.nav-list .user-login p {
    margin-bottom: 5px;
}

.nav-list .nav-link {
    padding: 1rem 1rem 1.25rem;
    overflow-y: auto;
}

.nav-list .nav-link .title {
    color: var(--sub-text01);
    font-size: 0.75rem;
}

.nav-list .nav-link li {
    position: relative;
}

.nav-list .nav-link li a {
    position: relative;
    display: block;
    padding: 0.75rem 0;
    font-size: 14px;
    font-weight: 500;
}

.nav-list .nav-link li.new a:after {
    content: "N";
    position: relative;
    top: -2px;
    right: -3px;
    color: var(--color-white);
    background: var(--color-red);
    font-size: 0.625rem;
    line-height: 10px;
    text-align: center;
    padding: 0 3px 2px;
    border-radius: 5px;
}

/* 메인 GNB */

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

.go-gnb.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.go-gnb > .container {
    background-color: var(--gnb-color);
    overflow-x: scroll;
    display: flex;
    align-items: center;
    scroll-behavior: smooth;
}

.go-gnb > .container > li {
    position: relative;
    white-space: nowrap;
    margin: 0;
    text-align: center;
}

.go-gnb .container li a {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1rem;
    font-weight: 500;
    height: 44px;
    font-size: 0.875rem;
}

.go-gnb > .container > li.show > a {
    color: rgba(255, 255, 255, 1);
    transition: 0.3s;
}

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

.gnb-sub {
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.go-gnb ul::-webkit-scrollbar {
    display: none;
}

.gnb-sub ul::-webkit-scrollbar {
    display: none;
}

.gnb-sub ul {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    flex-direction: row;
    flex-wrap: nowrap;
}

.gnb-sub ul li {
    position: relative;
}

.gnb-sub ul li a {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px;
    height: 40px;
    color: var(--main-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.gnb-sub ul li.show:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background-color: var(--main-text);
}

.gnb-sub ul li.show:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3.5px 4px 3.5px;
    border-color: transparent transparent #000 transparent;
    transform: translateX(-50%);
}

.gnb-sub ul li.show a {
    position: relative;
    color: var(--main-text);
    font-weight: 600;
}

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

/* 페이지내 메인 탭 네비 */
.nav-wrapper {
    display: grid;
    max-width: 100%;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.nav-wrapper.col-3 {
    grid-template-columns: repeat(auto-fill, minmax(33.3333%, 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 > div {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.nav-wrapper > div > a {
    position: relative;
    background-color: var(--main-bg);
    display: block;
    color: var(--sub-text01);
    text-align: center;
    padding: 15px 5px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -1px;
}

.nav-wrapper > div.show > a {
    background-color: var(--color-white);
    color: var(--point-color);
    font-weight: 600;
}

.nav-wrapper > div.show > a:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--point-color);
}

.nav-wrapper > div > a:hover {
    color: var(--main-text);
}

.nav-wrapper > div.show > a:hover {
    color: var(--point-color);
}

.nav-wrapper.scroll {
    display: flex;
    align-items: center;
    scroll-behavior: smooth;
    overflow-x: scroll;
}

.nav-wrapper.scroll > div {
    float: left;
    min-width: 110px;
}

/* 페이지내 서브 탭 네비 */
.sub-nav-wrapper {
    position: relative;

}

.sub-nav-wrapper::-webkit-scrollbar {
    display: none;
}

.sub-nav-wrapper > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: auto;
}

.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: 0.813rem;
    font-weight: 600;
}

.sub-nav-wrapper ul li.show a {
    color: var(--point-color);
    font-weight: 600;
}

.sub-nav-wrapper ul li.btn-dropdown a:after {
    content: "\f107";
    font-family: "Font Awesome 6 Pro";
    margin-left: 5px;
}

.sub-nav-wrapper ul li ul.dropdown-menu {
    position: absolute;
    background-color: var(--color-white);
    display: none;
    min-width: 110px;
    transition: 0.3s;
    left: 0;
    top: 100%;
    z-index: 99;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.btn-dropdown.open > .dropdown-menu {
    display: block !important;
}

.sub-nav-wrapper ul li ul.dropdown-menu li {
    border-bottom: 1px solid var(--dark-box);
}

.sub-nav-wrapper ul li ul.dropdown-menu li a {
    color: var(--main-text);
}

/* 소팅 메뉴 */
.sorting-nav {
    background-color: var(--color-white);
}

.sorting-nav .container {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 5px;
    padding: 15px;
    scroll-behavior: smooth;
}

.sorting-nav .container label {
    position: relative;
    white-space: nowrap;
    margin: 0;
    text-align: center;
    letter-spacing: -0.1em;
}

/* Profile 공통 */
.profile-photo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: var(--main-bg);
    background-image: url("/mobile/imgs/avatar.png");
    background-size: cover;
    border: 1px solid var(--light-trp-color);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
}

.profile-photo.xs {
    width: 18px;
    height: 18px;
}

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

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

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

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

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

.id_name {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

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

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

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

.id_name .m-lev,
.id_name .user-level .chat-symbol,
.id_name .user-level img {
    width: 26px;
    height: 26px;
}

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

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

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

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

.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;
}

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

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

.chat-list img.m-lev {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    line-height: 15px;
}

span.m-lev {
    display: inline-block;
    background-image: url("/mobile/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;
}

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

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

.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(48, 48, 48);
    background: linear-gradient(0deg, rgba(48, 48, 48, 1) 0%, rgba(147, 147, 147, 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 {
    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 */

/* Account */
.go-login .zone {
    position: relative;
    padding: 20px;
}

.go-login .zone input[type="text"],
.go-login .zone input[type="password"] {
    border: 1px solid var(--color-border);
    width: 250px;
    height: 28px;
    margin-bottom: 2px;
}

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

.go-login input[type="checkbox"] {
    position: absolute;
    top: 88px;
    left: 16px;
    width: 16px;
    height: 16px;
}

.go-login label {
    position: absolute;
    top: 90px;
    left: 46px;
}

.find-my-id,
.sns-links {
    float: right;
    margin-top: 11px;
}

.find-my-id a::after {
    content: "|";
    padding-left: 15px;
    padding-right: 15px;
}

.find-my-id a:last-child::after {
    content: "";
    padding-right: 0;
}

.sns-links {
    position: relative;
    top: -45px;
}

/* .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;
}

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

.form-group label {
    font-size: 0.875rem;
}

.go-account {
    margin: 0 auto;
    padding: 50px 1rem;
}

.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;
    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;
    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("/mobile/imgs/google-icon.png");
}

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

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

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

.go-account .sns-join a.wechat em {
    background-image: url("/mobile/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-privacy .panel-body,
.card-terms .panel-body {
    height: 150px;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--border-color);
    height: 72px;
    transition: bottom 0.3s;
    z-index: 40;
    /* padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
    padding: 15px 0 calc(constant(safe-area-inset-bottom) + 15px);
    padding: 15px 0 calc(env(safe-area-inset-bottom) + 15px); */
}

.bottom-nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bottom-nav ul li {
    min-width: 57px;
}

.bottom-nav ul li a {
    display: block;
    height: 62px;
    padding: 7px 10px 3px;
    text-align: center;
}

.bottom-nav ul li a i {
    display: block;
    margin: 0 auto;
    font-size: 1.375rem;
    background-position: center center;
    width: 36px;
    height: 32px;
    background-size: 36px 32px;
    background-repeat: no-repeat;
}

.bottom-nav ul li a i.bottom_icon_00 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_00.png");
}

.bottom-nav ul li a i.bottom_icon_01 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_01.png");
}

.bottom-nav ul li a i.bottom_icon_02 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_02.png");
}

.bottom-nav ul li a i.bottom_icon_03 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_03.png");
}

.bottom-nav ul li a i.bottom_icon_04 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_04.png");
}

.bottom-nav ul li a i.bottom_icon_05 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_05.png");
}

.bottom-nav ul li a i.bottom_icon_06 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_06.png");
}

.bottom-nav ul li a i.bottom_icon_07 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_07.png");
}

.bottom-nav ul li a i.bottom_icon_08 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_08.png");
}

.bottom-nav ul li a i.bottom_icon_09 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_09.png");
}

.bottom-nav ul li a i.bottom_icon_10 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_10.png");
}

.bottom-nav ul li a i.bottom_icon_11 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_11.png");
}

.bottom-nav ul li a i.bottom_icon_12 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_12.png");
}

.bottom-nav ul li a i.bottom_icon_13 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_13.png");
}

.bottom-nav ul li a i.bottom_icon_14 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_14.png");
}

.bottom-nav ul li a i.bottom_icon_15 {
    background-image: url("/mobile/imgs/bottom_gnb_icon_15.png");
}

.bottom-nav ul li span {
    font-size: 0.5rem;
}

.bottom-nav ul li.on a {
    color: var(--point-color);
}

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

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

.current-bar .bar_graph .bar {
    height: 17px;
}

.current-bar .bar_graph .baseball_h_left,
.current-bar .bar_graph .baseball_h_right,
.current-bar .bar_graph .baseball_homerun,
.current-bar .bar_graph .baseball_s_left,
.current-bar .bar_graph .baseball_s_right,
.current-bar .bar_graph .baseball_strike,
.current-bar .bar_graph .nuguri_even,
.current-bar .bar_graph .nuguri_left,
.current-bar .bar_graph .nuguri_line3,
.current-bar .bar_graph .nuguri_line4,
.current-bar .bar_graph .nuguri_odd,
.current-bar .bar_graph .nuguri_right,
.current-bar .bar_graph .powerball_even,
.current-bar .bar_graph .powerball_odd,
.current-bar .bar_graph .powerball_over,
.current-bar .bar_graph .powerball_under,
.current-bar .bar_graph .soccer_goal,
.current-bar .bar_graph .soccer_keeper_left,
.current-bar .bar_graph .soccer_keeper_right,
.current-bar .bar_graph .soccer_kick_left,
.current-bar .bar_graph .soccer_kick_right,
.current-bar .bar_graph .soccer_nogoal,
.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 .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 .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 {
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 3px 6px;
}

.current-bar .bar-chart.large .bar-name.on {
    background-color: var(--color-red);
    color: var(--color-white);
}

.current-bar .bar-chart.middle .bar-name.on {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.current-bar .bar-chart.small .bar-name.on {
    background-color: var(--color-green);
    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 .bar-chart .bar {
    position: relative;
    margin-left: -2px;
    flex: 1;
    display: flex;
    overflow: hidden;
    height: 15px;
}

.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%);
}

/* 메인 채팅방랭킹 순위 */
.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: 10px;
    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 span.badge {
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: 1px 10px;
    font-size: 0.625rem;
    border-radius: 5px;
    height: 17px;
    line-height: 17px;
}

.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랭킹 */
.go-rankings {
    position: relative;
    overflow: hidden;
    padding-bottom: 1rem;
}

.panel.large .title-flex {
    padding: 25px 20px 0;
}

.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-user-ranking .ranking-list {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    column-gap: 20px;
}

.top-user-ranking .ranking-list li {
    display: flex;
    width: 120px;
    flex-shrink: 0;
    padding: 0;
    flex-direction: column;
    row-gap: 5px;
    line-height: 1.25rem;
}

.top-user-ranking .ranking-list .profile-photo {
    width: 80px;
    height: 80px;
}

.top-user-ranking .ranking-list .profile-photo + .id_name {
    margin-left: 0;
}

.top-user-ranking .ranking-list > li:before {
    top: 0;
    background-color: var(--color-red);
    transform: translateY(0);
}

.top-pickster .ranking-list li .id_name {
    width: 95px;
}

.top-pickster .ranking-list > li:before {
    background-color: var(--point-color);
}

.top-pickster .ranking-list li .clan-lev {
    width: 18px;
    height: 18px;
}

.top-pickster .ranking-list li span {
    margin: 0 5px;
}

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

.profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

.ranking-list > li span {
    display: inline-block;
    margin: 0 10px;
}

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

.ranking-list > li span {
    display: inline-block;
    margin: 0 10px;
}

.go-forum .title h6 {
    display: flex;
    overflow: hidden;
    justify-content: flex-start;
}

/* 회차결과 */
.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: -0.5px;
}

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

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

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

.result-list .ball-list li > span > i {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    top: -1px;
    right: -2px;
    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: 0.9;
}

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

.go-recent-result .result-list .ball-list li {
    padding: 0 2px;
}

.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.goal,
.go-recent-result .result-list .ball-list li > span.nogoal {
    width: 1.625rem;
}

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

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

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

.game-pick .panel .panel-body .game-pick-info span.keeper_right,
.go-recent-result .result-list span.keeper_right,
.pick-live .record-table span.keeper_right {
    min-width: 45px !important;
    background-image: url("/mobile/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.jellyfish,
.go-recent-result .result-list .ball-list li > span.shark,
.go-recent-result .result-list .ball-list li > span.starfish,
.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.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;
}

/* 메인 랭킹*/
.go-contents-container {
    padding: 15px;
}

.go-contents-container .header-title {
    margin-bottom: 20px;
}

#ranking-pickster .pickster {
    position: relative;
}

#ranking-pickster .pickster .item:nth-child(1) {
    position: relative;
    width: 46%;
    left: 27%;
    padding: 0 10px;
}

#ranking-pickster .pickster .item:nth-child(2) {
    position: absolute;
    width: 27%;
    top: 55px;
    left: 0;
    padding-right: 10px;
}

#ranking-pickster .pickster .item:nth-child(3) {
    position: absolute;
    width: 27%;
    top: 55px;
    right: 0;
    padding-left: 10px;
}

#ranking-pickster .pickster .item:nth-child(-n + 3) figure.ranking {
    padding: 10px;
}

#ranking-pickster .pickster .item:nth-child(-n + 3) figure.ranking .profile-ranking {
    left: 50%;
    transform: translateX(-50%);
}

#ranking-pickster .pickster .item:nth-child(n + 4) {
    position: relative;
    padding: 18px 0 18px 100px;
    height: 80px;
    text-align: left;
    clear: both;
    float: none;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
}

#ranking-pickster .pickster .item:nth-child(n + 4) figure {
    position: absolute;
    left: 25px;
    top: 5px;
    width: 70px;
}

#ranking-pickster .pickster .item:nth-child(n + 4) figure .profile-crown {
    display: none;
}

#ranking-pickster .pickster .item:nth-child(n + 4) .profile-name {
    font-size: 1rem;
    text-align: left;
}

#ranking-pickster .pickster .item:nth-child(n + 4) .profile-level {
    font-size: 12px;
    text-align: left;
    margin: 0;
}

#ranking-pickster .pickster .item:nth-child(n + 4) .profile-ranking {
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    background-color: var(--color-white);
    color: var(--main-text);
}

#ranking-pickster .pickster .item .profile-level {
    display: block;
    text-align: center;
    color: var(--sub-text01);
}

#ranking-pickster .pickster .item .profile-name {
    margin-bottom: 0;
}

#ranking-pickster .pickster .item:nth-child(1) figure.ranking .profile-ranking {
    width: 36px;
    height: 36px;
    line-height: 34px;
    font-size: 16px;
}

#ranking-clan .clan .item figure.ranking {
    background-color: var(--main-bg);
    padding: 20px 10px;
}

#ranking-clan .clan .item figure.ranking .profile-ranking {
    border-radius: 0 3px 0 0;
    top: 0;
    right: 0;
}

#ranking-clan .clan .item figure.ranking .profile-level {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    background: url("/mobile/imgs/best_fam_lv_bg.png") no-repeat top center;
    background-size: 28px 35px;
    height: 35px;
    width: 28px;
}

#ranking-clan .clan .item figure.ranking .profile-level span {
    display: block;
    text-align: center;
    color: var(--color-white);
    font-size: 11px;
}

#ranking-clan .clan .item .profile-notice {
    font-size: 12px;
}

.horizontal .item {
    position: relative;
    padding: 15px 25px 15px 80px;
    height: 80px;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
}

#ranking-chat .chat .item figure.ranking,
.horizontal .item figure.ranking {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
}

.horizontal .item .profile-name {
    text-align: left;
}

.horizontal .item .profile-notice {
    font-size: 12px;
    text-align: left;
}

.horizontal .item:after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

figure {
    margin: 0;
}

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

figure.ranking {
    position: relative;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 10px;
}

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

figure.ranking .profile-ranking {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    line-height: 24px;
    background-color: var(--point-color);
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
}

/* OWL CAROUCEL */
.owl-carousel .owl-item img {
    width: inherit;
}

.owl-carousel .owl-dots {
    padding-top: 10px;
    text-align: center;
}

.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}

.owl-carousel .owl-dots .owl-dot span {
    display: block;
    background-color: rgba(0, 0, 0, 0.2);
    width: 20px;
    height: 3px;
    transition: 0.3s;
    margin: 0 2px;
    border-radius: 5px;
}

.owl-carousel .owl-dots .owl-dot.active span {
    background-color: var(--point-color);
    width: 30px;
}

/* 상단 배너 */
.go-pr {
    padding: 25px 15px;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

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

.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;
    bottom: -20px;
    right: -20px;
    background-image: url("/mobile/imgs/ev-pr.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    width: 110px;
    height: 110px;
}

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

.ev-pr a:after {
    content: "";
    background-image: url("/mobile/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;
    padding: 15px;
}

/* 게임픽 */
.pick-frame {
    position: relative;
    padding-top: 172%;
    height: 100%;
    overflow: hidden;
}

.pick-frame iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

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

.gochat-list.premium {
    height: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.gochat-list.premium .item {
    position: relative;
    background-color: var(--color-white);
    border: none;
}

.gochat-list.premium .item .chat-profile {
    border: 1px solid var(--color-red);
}

/* 채팅방리스트 구버전
.gochat-list .item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 10px;
  border-bottom: 1px solid var(--border-color);
  height: 105px;
  gap: 15px;
  cursor: pointer;
}
.gochat-list .item .rank {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.gochat-list .item .chat-profile {
  position: relative;
  background-color: var(--gray-bg);
  background-image: url(/mobile/imgs/chat_bg_icon.png);
  background-position: 0 0;
  background-size: cover;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  display: inline-block;
}
.gochat-list.premium .item .chat-profile {
  border: 1px solid var(--color-red);
}
.gochat-list .item .chat-profile img {
  background-color: var(--color-white);
}
.gochat-list .item .chat-profile .profile-ranking {
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--point-color);
  border-radius: 0;
  border: none;
  color: var(--color-white);
  font-size: 0.75rem;
  width: auto;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.gochat-list .item .chat-profile span {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 10px;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: 0 0 5px 0;
  opacity: 0.85;
}
.gochat-list .item .rank.best .chat-profile span {
  background-color: var(--color-red);
}
.gochat-list .item .rank.out .chat-profile span {
  background-color: var(--color-placeholder);
}
.gochat-list .item .situation label {
  font-size: 0.688rem;
  border-radius: 12px;
}
.gochat-list .item .chat-info .record {
  border: 1px solid var(--point-color);
  background-color: var(--color-white);
  border-radius: 12px;
  color: var(--point-color);
  font-weight: 600;
}
.gochat-list .item .chat-info .score {
  background-color: var(--main-text);
}
.gochat-list .item .situation .id_name {
  display: flex;
}
.gochat-list .item .chat-info {
  display: block;
}
.gochat-list .item .chat-info .situation {
  display: flex;
  row-gap: 3px;
  flex-direction: column;
}
.gochat-list .item .chat-info .situation .subject {
  font-size: 0.875rem;
}
.gochat-list .item .chat-info label {
  color: var(--color-white);
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 0;
  width: 65px;
  text-align: center;
}
.gochat-list .item .chat-info i {
  color: var(--point-color);
}
.gochat-list .item .chat-info .m-lev {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.gochat-list .item .hit-badge {
  display: flex;
  justify-content: flex-start;
  column-gap: 5px;
  position: absolute;
  right: 10px;
  bottom: 15px;
}
.gochat-list .item .hit-badge .badge-5,
.gochat-list .item .hit-badge .badge-10,
.gochat-list .item .hit-badge .badge-15 {
  position: relative;
  background-position: 0 0;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  font-size: 0.75rem;
  text-align: center;
}
.gochat-list .item .hit-badge .badge-5 {
  background-image: url(/mobile/imgs/str-5win.png);
}
.gochat-list .item .hit-badge .badge-10 {
  background-image: url(/mobile/imgs/str-10win.png);
}
.gochat-list .item .hit-badge .badge-15 {
  background-image: url(/mobile/imgs/str-15win.png);
}
 채팅방 리스 구버전 */

/* 채팅방 리스트 신버전*/
.gochat-list {
    padding: 5px 0;
}

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

.gochat-list .item.rank1 {
    background-color: var(--main-bg);
}

.gochat-list .item.rank2 {
    background-color: var(--warning-bg);
}

.gochat-list .item.rank3 {
    background-color: #d9f3ef;
}

.gochat-list .item .rank {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

.gochat-list .profile-ranking {
    display: inline-block;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    width: 23px;
    height: 23px;
    text-align: center;
    line-height: 21px;
}

.gochat-list .profile-ranking.rank1 {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    color: var(--color-white);
}

.gochat-list .profile-ranking.rank2 {
    background-color: var(--hover-color);
    border: 1px solid var(--hover-color);
    color: var(--color-white);
}

.gochat-list .profile-ranking.rank3 {
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
    color: var(--color-white);
}

.gochat-list .item .chat-profile {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    left: 15px;
    background-image: url("/mobile/imgs/chat_bg_icon.png");
    background-position: 0 0;
    background-size: cover;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    overflow: hidden;
    width: 60px;
    height: 60px;
}

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

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

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

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

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

.gochat-list .item .host-info .subject .badge {
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--color-white);
    padding: 1px 4px;
}

.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.688rem;
    column-gap: 5px;
}

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

.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 .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 .chat-info {
    position: absolute;
    right: 10px;
    bottom: 15px;
}

.gochat-list .item .chat-info .meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.688rem;
    color: var(--sub-text01);
    column-gap: 8px;
}

.gochat-list .item .premium {
    position: absolute;
    top: -4px;
    right: 0;
    background-image: url("/mobile/imgs/badge_premium.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 80px 23px;
    width: 80px;
    height: 23px;
}

/* 채팅방 채널 및 픽정보 */
.chatroom-info {
    display: flex;
    flex-direction: column;
}

.chatroom-info .record-info {
    display: flex;
    flex-direction: column;
    padding: 10px;
    row-gap: 5px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.813rem;
}

.chatroom-info .record-info .host-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatroom-info .record-info .meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--sub-text01);
    font-size: 0.688rem;
    column-gap: 5px;
}

.chatroom-info .record-info .meta li {
    position: relative;
    padding-right: 5px;
}

.chatroom-info .record-info .meta li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 7px;
    background-color: #ccc;
    transform: translateY(-50%);
}

.chatroom-info .record-info .meta li.game-name {
    background: url("/mobile/imgs/ready-icon.png") left center no-repeat;
    background-size: 16px 16px;
}

.chatroom-info .record-info .meta li:last-child {
    padding-right: 0;
}

.chatroom-info .record-info .meta li:last-child:after {
    display: none;
}

.chatroom-info .record-info .meta li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 7px;
    background-color: #ccc;
    transform: translateY(-50%);
}

.chatroom-info .pick-ui {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-color);
}

.chatroom-info .pick-ui .form-group label {
    font-size: 0.75rem;
}

.hit-badge .badge-10 span,
.hit-badge .badge-15 span,
.hit-badge .badge-5 span {
    position: absolute;
    background-color: var(--color-yellow);
    top: 0;
    right: -7px;
    font-size: 0.625rem;
    text-align: center;
    color: var(--color-white);
    padding: 0 1px;
    border-radius: 50%;
}

.gochat-empty {
    padding-top: 50px;
    text-align: center;
    color: var(--sub-text02);
}

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

.chatroom-create {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.25rem;
}

.chatroom-create a {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    text-align: center;
    background-color: var(--point-color);
    z-index: 10;
    font-size: 2rem;
    line-height: 55px;
}

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

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

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

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

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

.chat-header .chat-profile {
    background-image: url("/mobile/imgs/chat_bg_icon.png");
    background-position: 0 0;
    background-size: cover;
    border: 1px solid var(--border-color);
    overflow: hidden;
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-right: 10px;
}

.chat-header .chat-count,
.chat-header .chat-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.7rem;
    height: 60px;
}

.chat-header .chat-count {
    width: 70px;
}

.chat-header label {
    color: var(--color-white);
    display: inline-block;
    padding: 2px 0 4px;
    width: 65px;
    font-size: 0.7rem;
    text-align: center;
}

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

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

.chat-header .chat-info {
    margin-right: 15px;
}

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

.chat-header .hit-badge {
    display: flex;
    height: 100%;
    margin-right: 5px;
}

.chat-header .hit-badge .badge-10,
.chat-header .hit-badge .badge-15,
.chat-header .hit-badge .badge-5 {
    background-position: 0 0;
    background-size: 30px 37px;
    background-repeat: no-repeat;
    width: 30px;
    height: 37px;
    text-align: center;
    line-height: 90px;
}

.chat-header .hit-badge .badge-5 {
    background-image: url("/mobile/imgs/medal-5.png");
}

.chat-header .hit-badge .badge-10 {
    background-image: url("/mobile/imgs/medal-10.png");
}

.chat-header .hit-badge .badge-15 {
    background-image: url("/mobile/imgs/medal-15.png");
}

.gochat-frame-talk {
    border-right: 1px solid var(--border-color);
    height: calc(100% - 140px);
}

.gochat-frame-talk .chat-window {
    background-color: rgba(180, 203, 219, 1);
    padding: 15px;
    overflow-y: auto;
    height: calc(100% - 45px);
}

/* 개설채팅 */
#chat-main .msg-list.chat-create {
    height: calc(100vh - 280px);
}

/* 채팅 */
.chat-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.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);
}

#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: 270px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 2px 0 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-exit .chat-time {
    display: flex;
    align-items: center;
    margin-top: 0;
}

.msg-list .chatting-alarm.pick {
    align-items: center;
    justify-content: center;
}

.msg-list .chatting-alarm.pick .chat-time {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: center;
    justify-content: center;
}

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

.entrant .entrant-user .controlNav,
.msg-list .chatting-item .chatUser {
    position: relative;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
}

/*
.msg-list .chatting-item .chatUser {
    display: block;
    overflow: hidden;
}
*/
.msg-list .chatting-item .chatUser ul li {
    font-size: 0.75rem !important;
}

.chatUser-toggle,
#gopick-talk .tab-nav ul,
.comment-list .user-part .id_name ul,
.entrant .entrant-user .controlNav ul,
.msg-list .chatting-item .chatUser ul,
.msg-list .chatting-alarm .chatUser 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: 0 0 2px 0 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 {
    padding: 0 10px;
}

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

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

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

#gopick-talk .tab-nav ul li,
.chatUser-toggle ul li,
.comment-list .user-part .id_name ul li,
.entrant .entrant-user .controlNav ul li,
.msg-list .chatting-item .chatUser ul li,
.msg-list .chatting-alarm .chatUser 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;
}

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

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

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

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

#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;
}

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

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

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

.msg-list .chatting-item.writer {
    justify-content: flex-end;
    margin-bottom: 0;
    padding: 5px 10px;
}

.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;
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
}

.msg-list .chatting-item.writer .talkMsg {
    display: block;
    font-size: 0.875rem;
    line-height: 130%;
    padding: 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: 0 0 2px 0 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: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    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.938rem;
    line-height: 120%;
    resize: none;
    padding: 3px 10px 3px;
    font-weight: 400;
    outline: none;
    overflow: hidden;
}

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

.chat-message .chat-input-prepend .send {
    position: absolute;
    top: 50%;
    right: 5px;
    background-color: var(--point-color);
    display: block;
    color: var(--color-white);
    border: none;
    border-radius: 100px;
    padding: 0;
    width: 32px;
    height: 32px;
    text-align: center;
    transform: translateY(-50%);
}

.chat-message .chat-input-prepend .send i:before {
    margin-left: -2px;
}

.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(4, 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 .chat-option,
.chat-message.gopick-talk form .inChat {
    display: none;
}

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

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

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

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

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

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

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

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

/* 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;
}

/* 고픽톡 */
#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: 38px;
}

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

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

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

#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 .talk-setting .form-group {
    display: flex;
    column-gap: 5px;
    margin-bottom: 0;
}

#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 .tab-nav .tab-link.current:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
}

#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 p {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
}

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

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

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

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

.host-pick {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}

.host-pick .hit-icon,
.host-pick .miss-icon,
.host-pick .pick-icon {
    display: block;
    background-size: 42px 42px;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.host-pick .pick-icon {
    background-image: url("/mobile/imgs/pick_icon.png");
}

.host-pick .hit-icon {
    background-image: url("/mobile/imgs/hit_icon.png");
}

.host-pick .miss-icon {
    background-image: url("/mobile/imgs/miss_icon.png");
}

.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.vertical .bar {
    overflow: inherit;
}

.current-bar.vertical .bar-chart .bar {
    margin-left: 0;
    margin-bottom: -2px;
}

.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.jellyfish .bar-name,
.current-bar .bar-chart.shark .bar-name,
.current-bar .bar-chart.starfish .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("/mobile/imgs/01.png") center/contain no-repeat;
}

.current-bar .bar-chart.starfish .bar-name {
    background: var(--color-yellow) url("/mobile/imgs/02.png") center/contain no-repeat;
}

.current-bar .bar-chart.jellyfish .bar-name {
    background: var(--color-red) url("/mobile/imgs/03.png") center/contain no-repeat;
}

.current-bar .bar-chart.shark .bar-name {
    background: var(--color-purple) url("/mobile/imgs/04.png") center/contain no-repeat;
}

.current-bar .bar-chart.turtle .bar-name {
    background: #38e928 url("/mobile/imgs/05.png") center/contain no-repeat;
}

.current-bar .bar-chart.whale .bar-name {
    background: var(--color-sky) url("/mobile/imgs/06.png") center/contain no-repeat;
}

.current-bar .bar-chart.left .bar-name,
.current-bar .bar-chart.middle .bar-name {
    background-color: var(--color-blue);
    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 .bar-name,
.current-bar .bar-chart.right .bar-name {
    background-color: var(--color-red);
    color: var(--color-white);
}

.current-bar .bar-chart.small .bar-name {
    background-color: var(--color-green);
    color: var(--color-white);
}

.current-bar .bar-chart.shark .bar-name {
    background-color: var(--color-purple);
    color: var(--color-white);
}

.current-bar.vertical .bar-chart.center .progress-bar,
.current-bar.vertical .bar-chart.fish .progress-bar,
.current-bar.vertical .bar-chart.jellyfish .progress-bar,
.current-bar.vertical .bar-chart.left .progress-bar,
.current-bar.vertical .bar-chart.right .progress-bar,
.current-bar.vertical .bar-chart.shark .progress-bar,
.current-bar.vertical .bar-chart.starfish .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.jellyfish .progress-bar,
.current-bar.vertical .bar-chart.right .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%);
}

.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;
}

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

.chat-live,
.chat-user,
.drop-user,
.pick-live,
.room-list,
.room-setting {
    position: relative;
    height: 100%;
    overflow-y: auto;
}

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

.chat-live .title-flex a,
.chat-user .title-flex a,
.drop-user .title-flex a,
.pick-live .title-flex a,
.room-list .title-flex a,
.room-setting .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-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 .record-table {
    overflow-y: auto;
    height: calc(100% - 110px);
}

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

.pick-live .record-table span {
    position: relative;
    min-width: 23px !important;
    height: 23px !important;
    font-size: 0.75rem !important;
    line-height: 23px !important;
    padding: 0 3px !important;
}

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: 80%;
}

span.odd > i.lucky,
span.even > i.lucky,
span.green > i.lucky,
span.under > i.lucky,
span.over > i.lucky,
span.odd > i.moneydot,
span.even > i.moneydot,
span.under > i.moneydot,
span.over > i.moneydot {
    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: 50px;
    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 td:first-child,
.pick-live table th:first-child {
    border-left: none;
}

.pick-live table td:last-child,
.pick-live table th: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-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 10px;
    font-size: 14px;
    column-gap: 15px;
}

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

.chat-user .controlNav,
.drop-user .controlNav {
    float: right;
}

.chat-user .controlNav a {
    display: block;
    text-align: center;
    padding: 5px 15px;
}

.chat-user .controlNav ul {
    display: none;
    position: absolute;
    right: 10px !important;
    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: 0 0 2px 0 rgb(0 0 0 / 10%);
}

.chat-user .controlNav ul li {
    display: block;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
}

.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 {
    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%;
}

.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 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 .fx_result {
    display: flex;
    flex-direction: column;
}

.pick-board .fx_result ul {
    display: unset;
    margin-top: 5px;
}

.pick-board .fx_result ul li {
    text-align: left;
    display: block;
    margin: 0 30px 0 0;
    max-width: 150px;
}

.pick-board .fx_result h6 {
    width: 45px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 5px;
}

.pick-board .fx_result_badge {
    position: relative;
    max-width: 50px;
}

.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.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 .fx_result_badge.success {
    background-color: var(--warning-bg);
    border: 1px solid var(--color-red);
    color: var(--color-red);
}

.pick-board.squid ul .left,
.pick-live .record-table span.squid.left {
    background-image: url("/mobile/imgs/triangle.png");
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    background-size: 14px 11px;
    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("/mobile/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.5rem 0.875rem;
    text-align: center;
    font-size: 0.875rem;
    border-top: 1px solid var(--border-color);
}

.latest-pick {
    margin-bottom: 1rem;
}

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

.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.racoon ul,
.leader-pick .pick-board.rps ul,
.leader-pick .pick-board.soccer ul,
.leader-pick .pick-board.squid ul,
.leader-pick .pick-board.sutda ul {
    width: 205px;
}

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

/*end채팅 */

.fam-box p,
.msg-box p,
.subc-box p {
    position: relative;
    padding-left: 12px;
    line-height: 150%;
    font-weight: 400;
}

.fam-box p:before,
.msg-box p:before,
.subc-box p:before {
    content: "·";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 22px;
    color: var(--point-color);
    font-weight: 600;
}

.fam-box > ul,
.msg-box > ul,
.subc-box > ul {
    overflow-y: auto;
    padding: 0 15px;
    max-height: 250px;
}

.fam-box > ul > li,
.msg-box > ul > li,
.subc-box > ul > li {
    position: relative;
    float: none;
    padding: 7px 20px 7px 0;
    border-bottom: 1px solid var(--border-color);
}

.fam-box > ul > li:last-child,
.msg-box > ul > li:last-child,
.subc-box > ul > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.msg-box > ul > li > .remove {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    background-image: url("/mobile/imgs/remove_icon.png");
    background-position: center center;
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
    text-indent: -9999px;
}

.fam-box .box-footer,
.msg-box .box-footer,
.subc-box .box-footer {
    background-color: var(--main-bg);
    border-top: 1px solid var(--border-color);
    text-align: right;
    padding: 5px 20px;
}

.open-chat-layout {
    display: flex;
    height: 100%;
    justify-content: flex-start;
    overflow-y: auto;
    flex: 1;
}

.chatroom-best {
    width: 48px;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, .05);
    padding: 1px 3px;
    text-align: center;
    flex-shrink: 0;
    background-color: var(--main-bg);
}

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

.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 .list {
    display: flex;
    padding: 3px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.chatroom-best .list li {
    width: 42px;
    height: 42px;
}

.chatroom-best .list li span {
    display: block;
    background-image: url(/imgs/chat_bg_icon.png);
    background-color: var(--main-bg);
    background-position: 0 0;
    background-size: cover;
    width: 42px;
    height: 42px;
    overflow: hidden;
    margin: 0 auto;
}

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

#chatrooms {
    float: right;
    width: 335px;
    height: 490px;
}

#chatrooms .send span {
    display: none;
}

#chatrooms .send {
    border: 0;
    width: 32px;
    height: 32px;
    background: url("/mobile/imgs/chat_update_btn.png") no-repeat top center;
}

#host-chat {
    position: relative;
    height: calc(100% - 88px);
}

#chat-main {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#chat-main .msg-list {
    height: 100%;
    flex: 1;
    overflow-y: auto;
}

#chat-all,
#chat-drop,
#chat-setting,
#reg-pick {
    height: 100%;
    overflow-y: auto;
}

#chat-all h6,
#chat-drop h6,
#chat-setting h6,
#reg-pick h6 {
    padding: 10px;
}

.pickreg-toggle {
    background: var(--color-red);
    color: var(--color-white);
    border-radius: 3px;
    padding: 4px 7px;
    text-align: center;
    border: none;
    margin-right: 0.75rem;
}

.pickreg-toggle i {
    padding: 0 5px 0 0;
}

.pickreg-toggle small {
    font-size: 0.75rem;
}

#host-chat .pickreg-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0;
    right: -100%;
    z-index: 99;
    transition: 300ms;
}

#host-chat .pickreg-layer.show {
    right: 0;
}

#host-chat .pickreg-layer .go-page-header {
    width: 100%;
}

#host-chat .pickreg-layer .pick-frame {
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
}

#host-chat .pickreg-layer .pick-frame iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.go-learn-games ol {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 25px 15px;
}

.go-learn-games ol li {
    display: inline-block;
    text-align: center;
    transition: 0.3s;
}

.go-learn-games ol li a {
    display: block;
}

.go-learn-games ol li a span {
    display: block;
    background-color: var(--main-bg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto;
    width: 68px;
    height: 68px;
}

.go-learn-games ol li:hover a span {
    background-color: var(--point-color);
}

.go-learn-games ol li:nth-child(1) span {
    background-image: url("/mobile/imgs/game-icon/game_01_off.png");
}

.go-learn-games ol li:nth-child(2) span {
    background-image: url("/mobile/imgs/game-icon/game_02_off.png");
}

.go-learn-games ol li:nth-child(3) span {
    background-image: url("/mobile/imgs/game-icon/game_03_off.png");
}

.go-learn-games ol li:nth-child(4) span {
    background-image: url("/mobile/imgs/game-icon/game_04_off.png");
}

.go-learn-games ol li:nth-child(5) span {
    background-image: url("/mobile/imgs/game-icon/game_05_off.png");
}

.go-learn-games ol li:nth-child(6) span {
    background-image: url("/mobile/imgs/game-icon/game_06_off.png");
}

.go-learn-games ol li:nth-child(7) span {
    background-image: url("/mobile/imgs/game-icon/game_07_off.png");
}

.go-learn-games ol li:nth-child(8) span {
    background-image: url("/mobile/imgs/game-icon/game_08_off.png");
}

.go-learn-games ol li:nth-child(9) span {
    background-image: url("/mobile/imgs/game-icon/game_09_off.png");
}

.go-learn-games ol li:nth-child(10) span {
    background-image: url("/mobile/imgs/game-icon/game_10_off.png");
}

.go-learn-games ol li:nth-child(11) span {
    background-image: url("/mobile/imgs/game-icon/game_11_off.png");
}

.go-learn-games ol li:nth-child(12) span {
    background-image: url("/mobile/imgs/game-icon/game_12_off.png");
}

.go-learn-games ol li:nth-child(1):hover span {
    background-image: url("/mobile/imgs/game-icon/game_01_on.png");
}

.go-learn-games ol li:nth-child(2):hover span {
    background-image: url("/mobile/imgs/game-icon/game_02_on.png");
}

.go-learn-games ol li:nth-child(3):hover span {
    background-image: url("/mobile/imgs/game-icon/game_03_on.png");
}

.go-learn-games ol li:nth-child(4):hover span {
    background-image: url("/mobile/imgs/game-icon/game_04_on.png");
}

.go-learn-games ol li:nth-child(5):hover span {
    background-image: url("/mobile/imgs/game-icon/game_05_on.png");
}

.go-learn-games ol li:nth-child(6):hover span {
    background-image: url("/mobile/imgs/game-icon/game_06_on.png");
}

.go-learn-games ol li:nth-child(7):hover span {
    background-image: url("/mobile/imgs/game-icon/game_07_on.png");
}

.go-learn-games ol li:nth-child(8):hover span {
    background-image: url("/mobile/imgs/game-icon/game_08_on.png");
}

.go-learn-games ol li:nth-child(9):hover span {
    background-image: url("/mobile/imgs/game-icon/game_09_on.png");
}

.go-learn-games ol li:nth-child(10):hover span {
    background-image: url("/mobile/imgs/game-icon/game_10_on.png");
}

.go-learn-games ol li:nth-child(11):hover span {
    background-image: url("/mobile/imgs/game-icon/game_11_on.png");
}

.go-learn-games ol li:nth-child(12):hover span {
    background-image: url("/mobile/imgs/game-icon/game_12_on.png");
}

.go-learn-games ol li a p {
    font-weight: 400;
    text-align: center;
}

.go-learn-games ol li a:hover p {
    text-decoration: underline;
}

#learn_games ol li p:active,
#learn_games ol li p:hover,
#learn_games ol li p:visited,
.go-learn-games ol li p:link,
.go-learn-games ol li:hover p {
    color: var(--point-color);
}

#community ul {
    margin: 0;
    padding: 0;
}

#community ul > li {
    width: 330px;
    border: 1px solid var(--point-color);
}

#community ul > li {
    display: inline-block;
    overflow: hidden;
}

.go-section h2 {
    margin-bottom: 20px;
}

.go-games {
    position: relative;
    background-color: #563ba4;
    padding: 1rem;
    margin: -15px -15px 50px;
}

.go-games .panel {
    border-radius: 1rem;
}

.go-games .owl-carousel .owl-dots .owl-dot span {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    width: 20px;
    height: 3px;
    transition: 0.3s;
    margin: 0 2px;
    border-radius: 5px;
}

.go-games .owl-carousel .owl-dots .owl-dot.active span {
    background-color: var(--color-yellow);
    width: 30px;
}

.go-analysis > button {
    background-color: transparent;
    display: inline-block;
    margin-right: 5px;
    border: none;
    color: #888;
    padding: 2px 5px;
    cursor: pointer;
}

.go-analysis > button.current {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    border-radius: 5px;
    color: var(--color-white);
}

.go-analysis > .tab-in-content {
    display: none;
    padding: 15px 0;
    width: 100%;
}

.go-analysis > .tab-in-content.current {
    display: block;
}

.go-community .post-lists {
    margin: 20px 0;
}

#go-community-humor figure {
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

#go-community-humor p.title {
    display: flex;
    overflow: hidden;
    justify-content: center;
    font-size: 0.875rem;
}

#go-community-humor p.title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-lists li {
    margin: 10px 0;
    font-size: 0.875rem;
}

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

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

.post-lists .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 120%;
}

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

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

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

.comments {
    margin: 0 5px;
    font-weight: bold;
}

.go-footer-container {
    margin-top: 30px;
}

.go-fnb {
    text-align: center;
    font-size: 11px;
}

.go-fnb .footer-logo {
    padding: 0.5rem 0;
    text-align: center;
}

.go-fnb .logo {
    width: 80px;
    margin: 0 auto;
    opacity: 0.3;
}

.go-fnb ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 3px 0;
}

.go-fnb ul li {
    line-height: 0.75rem;
    padding: 0 10px;
}

.go-fnb ul li a::before {
    display: inline-block;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #d7d7d7;
    margin-right: 3px;
    vertical-align: middle;
}

.go-fnb ul > li:last-child {
    border-right: none;
}

.go-fnb ul > li > a,
.go-footer p {
    color: var(--sub-text02);
}

.go-footer {
    background-color: var(--main-bg);
    padding-top: 20px;
    padding-bottom: 20px;
}

.go-footer p {
    font-family: var(--font-sub);
}

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

.profile-name {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}

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

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

.tab_item {
    width: calc(100% / 4);
    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;
    color: var(--sub-text02);
}

input.tab-radio {
    display: none;
}

.tab_content {
    display: none;
    width: 99%;
    height: 446px;
    padding: 10px;
    clear: both;
    border-bottom: 1px solid var(--color-border);
}

#chatroom-hash:checked ~ #chat-hash,
#chatroom-lottery:checked ~ #chat-lottery,
#chatroom-others:checked ~ #chat-others,
#chatroom-token:checked ~ #chat-token {
    display: block;
}

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

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

#recent-result {
    position: relative;
}

#recent-result h2 {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    font-weight: 400;
    font-size: 22px;
    font-style: normal;
}

#recent-result .tabs {
    padding-top: 25px;
    float: left;
    width: 100%;
}

#recent-result .tab_item {
    width: 60px;
    height: 22px;
    background-color: var(--main-bg);
    border-radius: 60px;
    font-size: 13px;
    text-align: center;
    color: #6c6c6c;
    line-height: 22px;
    font-weight: 400;
    margin-right: 4px;
    padding: 0;
    cursor: pointer;
}

#result-token + .tab_item {
    margin-left: 130px;
}

#recent-result .tab_content {
    float: left;
    width: 100%;
    height: 280px;
    margin-top: 22px;
    padding: 7px 13px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}

#result-hash:checked ~ #result-hash,
#result-lottery:checked ~ #result-lottery,
#result-others:checked ~ #result-others,
#result-token:checked ~ #result-token {
    display: block;
}

#recent-result .tabs input:checked + .tab_item {
    background-color: var(--point-color);
    color: var(--color-white);
    box-shadow: 0 0 0 0;
}

.result > ol > li {
    display: block;
    line-height: 34px;
}

.result > ol > li:after {
    content: "";
    clear: both;
    display: table;
}

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

.result-list .time {
    color: var(--point-color);
    padding: 0 10px;
    font-weight: 400;
}

.result-list .round {
    color: var(--color-default);
    font-weight: 400;
}

.result-list .results {
    color: var(--color-white);
    padding: 0 10px;
    float: right;
}

.result-list .results li > span {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
}

/*마이페이지, 커뮤니티 공통*/
.go-latest-card {
    padding: 0 10px 5px;
    border: 1px solid var(--border-color);
    min-height: 150px;
}

.go-latest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.go-latest-card-header h5 {
    margin: 10px 0;
}

.go-latest-card-header button {
    background: none;
    border: none;
    padding: 1px 3px 2px 2px;
    display: inline-block;
    color: var(--sub-text01);
    cursor: pointer;
    border-radius: 15px;
    letter-spacing: -1px;
}

.go-latest-card-header button.small {
    font-size: 12px;
}

.go-latest-card-header button.current,
.go-latest-card-header button:hover {
    background-color: var(--point-color);
    color: var(--color-white);
    padding: 1px 6px 2px 5px;
}

.go-latest-card .post-lists {
    list-style-type: none;
    clear: both;
}

.go-latest-card .post-lists li {
    margin: 5px 0;
}

.go-latest-live .post-lists .title {
    max-width: 47%;
}

.go-latest-live .post-lists .meta {
    font-size: 12px;
    float: right;
}

.go-banner-manage {
    background-color: var(--main-bg);
    display: block;
    text-align: center;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.popup-body .go-banner-manage {
    margin: 15px auto;
}

.banner-link a {
    display: block;
}

.banner-link img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80px;
    overflow: hidden;
    object-fit: cover;
}

.go-my-dashboard {
    padding: 0;
}

.go-my-dashboard .profile,
.popup-body .profile {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

.go-my-dashboard .profile .todayword {
    display: block;
    line-height: 120%;
}

.go-my-dashboard .profile .profile-photo,
.popup-body .profile .profile-photo {
    display: block;
    margin: 0 auto 15px;
}

.dash-wrapper {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

.dash-wrapper.c3 {
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    place-items: center;
}

.dash-wrapper > div {
    padding: 15px 7px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--sub-text01);
}

.dash-wrapper > div > span {
    display: block;
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--main-text);
}

/* myhome */
.my-home .dash-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.my-home .dash-wrapper > div {
    border-right: 1px solid var(--border-color);
    border-bottom: none;
}

.my-home .dash-wrapper > div:last-of-type {
    border-right: none;
}

.my-home ul.dash-wrapper,
.my-home ul.dash-wrapper > div {
    border: none;
}

ul.dash-wrapper li {
    text-align: center;
    padding: 15px 7px;
}

ul.dash-wrapper span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
}

.my-home span.badge {
    color: var(--color-white);
    font-weight: 400;
    width: 20px;
    height: 20px;
    font-size: 0.563rem;
    line-height: 2;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto 5px;
    display: block;
}

.my-home .dash-wrapper.money,
.my-home .dash-wrapper.money > div {
    border: none;
}

.my-home .dash-wrapper.money > div > span {
    font-size: 0.75rem;
    font-weight: 400;
}

/* userhome */
.user-home {
    position: relative;
    z-index: 1;
}

.user-home .dash-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(33.333%, 1fr));
}

.user-home ul.dash-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    border: 1px solid var(--border-color);
}

.user-home ul.dash-wrapper li {
    padding: 10px 5px;
    white-space: nowrap;
    border-right: 1px solid var(--border-color);
}

.user-home ul.dash-wrapper li:last-of-type {
    border-right: none;
}

.following-list {
    height: 100%;
    overflow-y: auto;
    border-top: 1px solid var(--main-text);
}

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

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

.following-list li .btn {
    position: absolute;
    top: 0.625rem;
    right: 0;
}

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

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

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

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

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

#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;
}


/* gamepick history */
.game-pick-title {
    border-bottom: 1px solid var(--main-text);
    margin-bottom: 1.125rem;
    padding: 0.75rem 0;
}

.game-pick-title h6 {
    font-size: 1rem;
    font-weight: 600;
}

.game-pick-title p {
    font-size: 0.75rem;
    color: var(--sub-text01);
    letter-spacing: -1px;
}

.game-pick {
    display: grid;
    grid-template-rows: auto;
    gap: 20px;
}

.game-pick .panel {
    border: 1px solid var(--border-color);
    text-align: center;
    margin-bottom: 0;
    border-radius: 10px;
}

.game-pick .panel .panel-header {
    justify-content: center;
    background-color: var(--main-bg);
    border-radius: 0.625rem 0.625rem 0 0;
}

.game-pick .panel .panel-body {
    padding: 0;
}

.game-pick .panel .panel-body .game-pick-info {
    padding: 1.5rem 0;
}

.game-pick .panel .panel-body a,
.game-pick .panel .panel-body p,
.game-pick .panel .panel-body ul {
    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-info ul > li > span > i {
    position: absolute;
    font-style: normal;
    display: block;
    width: 14px;
    height: 14px;
    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%;
}

.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.5rem;
    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;
}

/* user record */
.record-table li {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-bg);
}

.record-table li .round-result {
    padding: 5px 0;
}

.record-table li h6 {
    position: absolute;
    right: 0;
    bottom: 14px;
    font-size: 0.875rem;
    font-weight: 400;
}

.record-table span.anytriple,
.record-table span.draw,
.record-table span.even,
.record-table span.even_over,
.record-table span.even_under,
.record-table span.even_large,
.record-table span.even_middle,
.record-table span.even_small,
.record-table span.fish,
.record-table span.garu,
.record-table span.goal,
.record-table span.h_center,
.record-table span.h_left,
.record-table span.h_right,
.record-table span.homerun,
.record-table span.jellyfish,
.record-table span.keeper_left,
.record-table span.keeper_right,
.record-table span.kick_left,
.record-table span.kick_right,
.record-table span.kk_left,
.record-table span.kk_right,
.record-table span.kp_left,
.record-table span.kp_right,
.record-table span.large,
.record-table span.left,
.record-table span.left,
.record-table span.line_3,
.record-table span.line_4,
.record-table span.middle,
.record-table span.nogoal,
.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.odd,
.record-table span.odd_over,
.record-table span.odd_under,
.record-table span.odd_large,
.record-table span.odd_middle,
.record-table span.odd_small,
.record-table span.ong,
.record-table span.over,
.record-table span.paper,
.record-table span.pass,
.record-table span.right,
.record-table span.rock,
.record-table span.s_center,
.record-table span.s_left,
.record-table span.s_right,
.record-table span.scissors,
.record-table span.shark,
.record-table span.small,
.record-table span.starfish,
.record-table span.strike,
.record-table span.turtle,
.record-table span.under,
.record-table span.whale,
.record-table span.red,
.record-table span.blue,
.record-table span.hi,
.record-table span.low,
.record-table span.sell,
.record-table span.buy,
.record-table span.total_result {
    position: relative;
    height: 30px;
    min-width: 30px;
    padding: 0 0.55rem;
    line-height: 30px;
    font-size: 0.875rem;
}

.record-table span em {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 13px;
    font-size: 9px;
    font-style: normal;
    padding: 0 3px 1px;
    border-radius: 13px;
    word-break: keep-all;
    text-indent: 0;
    text-shadow: none;
}

.record-table span em.hit {
    background: var(--color-white);
    border: 1px solid var(--color-red);
}

.record-table span em.fail {
    background: var(--color-white);
    border: 1px solid var(--sub-text02);
}

.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.kick_left {
    text-indent: -9999px;
    min-width: 45px;
    background-image: url("/mobile/imgs/games/soccer/left.png");
}

.record-table span.keeper_left {
    text-indent: -9999px;
    min-width: 45px;
    background-image: url("/mobile/imgs/games/soccer/left.png");
}

.record-table span.kick_right {
    text-indent: -9999px;
    min-width: 45px;
    background-image: url("/mobile/imgs/games/soccer/right.png");
}

.record-table span.keeper_right {
    text-indent: -9999px;
    min-width: 45px;
    background-image: url("/mobile/imgs/games/soccer/right.png");
}

.record-table span.garu {
    text-indent: -9999px;
    min-width: 30px;
    background-image: url("/mobile/imgs/games/garujigi/garu_bg.png");
}

.record-table span.ong {
    text-indent: -9999px;
    min-width: 30px;
    background-image: url("/mobile/imgs/games/garujigi/ong_bg.png");
}

.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;
}

.record-table span.kk_left {
    background-image: url("/mobile/imgs/games/soccer/kicker_left.png");

}

.record-table span.kk_right {
    background-image: url("/mobile/imgs/games/soccer/kicker_right.png");
}

.record-table span.kp_left {
    background-image: url("/mobile/imgs/games/soccer/keeper_left.png");
}

.record-table span.kp_right {
    background-image: url("/mobile/imgs/games/soccer/keeper_right.png");
}

.record-table span.rock {
    background-image: url("/mobile/imgs/games/rps/img_R.png");
}

.record-table span.scissors {
    background-image: url("/mobile/imgs/games/rps/img_S.png");
}

.record-table span.paper {
    background-image: url("/mobile/imgs/games/rps/img_P.png");
}

.record-table span.paper,
.record-table span.rock,
.record-table span.scissors {
    background-color: transparent;
    background-size: cover;
    text-indent: -9999px;
    padding: 0;
    width: 30px;
    height: 30px;
}

.record-table span.anytriple,
.record-table span.fish,
.record-table span.jellyfish,
.record-table span.shark,
.record-table span.starfish,
.record-table span.turtle,
.record-table span.whale,
.record-table span.sb_blue,
.record-table span.sb_red {
    display: inline-block !important;
    text-indent: -9999px;
    min-width: 30px;
    line-height: 30px !important;
}

.hit {
    color: var(--color-red);
}

.fail {
    color: var(--sub-text02);
}

/*Game Analysis*/
em.center,
em.draw,
em.green,
em.even,
em.fish,
em.garu,
em.goal,
em.gray,
em.h_center,
em.h_left,
em.h_right,
em.homerun,
em.jellyfish,
em.keeper_left,
em.keeper_right,
em.kick_left,
em.kick_right,
em.large,
em.left,
em.line_3,
em.line_4,
em.pbladder_evo_line_3,
em.pbladder_evo_line_4,
em.middle,
em.nogoal,
em.odd,
em.ong,
em.over,
em.paper,
em.pass,
em.right,
em.rock,
em.s_center,
em.s_right,
em.scissors,
em.shark,
em.small,
em.starfish,
em.strike em.s_left,
em.turtle,
em.under,
em.whale,
em.total_result,
span.anytriple,
span.center,
span.draw,
span.even,
span.even_over,
span.even_under,
span.even_large,
span.even_middle,
span.even_small,
span.fish,
span.garu,
span.goal,
span.gray,
span.green,
span.h_center,
span.h_left,
span.h_right,
span.homerun,
span.jellyfish,
span.keeper_left,
span.keeper_right,
span.kick_left,
span.kick_right,
span.kk_left,
span.kk_right,
span.kp_left,
span.kp_right,
span.large,
span.left,
span.left,
span.line_3,
span.line_4,
span.middle,
span.nogoal,
span.nuguri_line3,
span.nuguri_line4,
span.pbladder_evo_line3,
span.pbladder_evo_line4,
span.odd,
span.odd_over,
span.odd_under,
span.odd_large,
span.odd_middle,
span.odd_small,
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.ong,
span.over,
span.paper,
span.pass,
span.right,
span.rock,
span.s_center,
span.s_left,
span.s_right,
span.scissors,
span.shark,
span.small,
span.starfish,
span.strike,
span.turtle,
span.under,
span.whale,
span.sb_ntry_low,
span.sb_ntry_hi,
span.sell,
span.buy,
span.nullity,
span.low,
span.hi,
span.total_result {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    border-radius: 20px;
    text-align: center;
    font-style: normal;
    font-size: inherit;
}

em.gray,
em.pass,
span.gray,
span.pass {
    background-color: var(--main-bg) !important;
    color: var(--sub-text02) !important;
    border: 1px solid var(--border-color);
}

h6.sell,
em.blue,
em.garu,
em.goal,
em.h_left,
em.keeper_left,
em.kick_left,
em.left,
em.middle,
em.odd,
em.s_left,
em.scissors,
em.strike,
em.under,
em.low,
em.odd_large,
em.odd_middle,
em.odd_small,
em.pbladder_evo_line3,
em.sell,
em.left_3line,
span.blue,
span.garu,
span.goal,
span.h_left,
span.keeper_left,
span.kick_left,
span.kk_left,
span.kk_left,
span.kp_left,
span.kp_left,
span.left,
span.middle,
span.odd,
span.odd_over,
span.odd_under,
span.odd_large,
span.odd_middle,
span.odd_small,
span.pbladder_evo_line3,
span.s_left,
span.scissors,
span.strike,
span.under,
span.low,
span.blue,
span.sell,
span.left_3line {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}

em.even,
em.h_right,
em.homerun,
em.jellyfish,
em.keeper_right,
em.kick_right,
em.large,
em.nogoal,
em.ong,
em.over,
em.paper,
em.red,
em.right,
em.s_right,
em.hi,
em.even_large,
em.even_middle,
em.even_small,
em.pbladder_evo_line4,
em.buy,
em.right_3line,
span.even,
span.even_over,
span.even_under,
span.h_right,
span.homerun,
span.jellyfish,
span.keeper_right,
span.kick_right,
span.kk_right,
span.kk_right,
span.kp_right,
span.kp_right,
span.large,
span.nogoal,
span.even_large,
span.even_middle,
span.even_small,
span.pbladder_evo_line4,
span.odd_large_sp,
span.ong,
span.over,
span.paper,
span.red,
span.right,
span.s_right,
span.hi,
span.red,
span.buy,
h6.buy,
span.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;
}

em.draw,
em.line_3,
em.rock,
em.small,
em.turtle,
span.draw,
span.line_3,
span.nuguri_line3,
span.rock,
span.small,
span.turtle {
    background-color: var(--color-green) !important;
    color: var(--color-white) !important;
}

em.fall,
em.line_4,
em.shark,
span.fall,
span.line_4,
span.nuguri_line4,
span.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;
}


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

em.break,
span.break {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

span.keeper_left,
span.keeper_right,
span.kick_left,
span.kick_right,
span.kk_left,
span.kk_right,
span.kp_left,
span.kp_right {
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: center center;
}

span.keeper_left,
span.kick_left {
    text-indent: -9999px;
    background-image: url("/mobile/imgs/games/soccer/left.png");
}

span.keeper_right,
span.kick_right {
    text-indent: -9999px;
    background-image: url("/mobile/imgs/games/soccer/right.png");
}

em.h_center,
em.s_center,
em.starfish,
span.anytriple,
span.h_center,
span.s_center,
span.starfish {
    background-color: var(--color-yellow) !important;
    color: var(--color-white) !important;
    text-shadow: 1px 1px 2px #000000;
}

span.anytriple,
span.fish,
span.jellyfish,
span.shark,
span.starfish,
span.turtle,
span.whale {
    text-indent: -9999px;
}

em.fish,
span.fish {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

em.whale,
span.whale,
span.left_4line {
    background-color: var(--color-sky) !important;
    color: var(--color-white) !important;
}

span.right_4line {
    background-color: #ff8d99 !important;
    color: var(--color-white) !important;
}

em.garu,
em.ong,
span.garu,
span.ong {
    background-size: cover;
}

span.nullity {
    background-color: #ccc;
    color: #000;
}

em.garu,
span.garu {
    text-indent: -9999px;
    background-image: url("/mobile/imgs/games/garujigi/garu_bg.png");
}

em.ong,
span.ong {
    text-indent: -9999px;
    background-image: url("/mobile/imgs/games/garujigi/ong_bg.png");
}

span.sb_red {
    background: url("/mobile/imgs/games/sb_ntry/sb_red.png") center/contain no-repeat;
    text-indent: -9999px;
}

span.sb_blue {
    background: url("/mobile/imgs/games/sb_ntry/sb_blue.png") center/contain no-repeat;
    text-indent: -9999px;
}

em.fish,
span.fish {
    background: url("/mobile/imgs/games/aquafriends/01.png") center/contain no-repeat;
}

em.starfish,
span.starfish {
    background: url("/mobile/imgs/games/aquafriends/02.png") center/contain no-repeat;
}

em.jellyfish,
span.jellyfish {
    background: url("/mobile/imgs/games/aquafriends/03.png") center/contain no-repeat;
}

em.shark,
span.shark {
    background: url("/mobile/imgs/games/aquafriends/04.png") center/contain no-repeat;
}

em.turtle,
span.turtle {
    background: url("/mobile/imgs/games/aquafriends/05.png") center/contain no-repeat;
}

em.whale,
span.whale {
    background: url("/mobile/imgs/games/aquafriends/06.png") center/contain no-repeat;
}

span.anytriple {
    background: url("/mobile/imgs/games/aquafriends/aqua_triple.png") center/contain no-repeat;
}

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;
}

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: 60px;
    height: 36px;
    font-size: 0;
    text-indent: -9999;
    background-size: 60px 36px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

span.card_AD {
    background-image: url(/mobile/imgs/games/card/ad.png);
}

span.card_2D {
    background-image: url(/mobile/imgs/games/card/2d.png);
}

span.card_3D {
    background-image: url(/mobile/imgs/games/card/3d.png);
}

span.card_4D {
    background-image: url(/mobile/imgs/games/card/4d.png);
}

span.card_5D {
    background-image: url(/mobile/imgs/games/card/5d.png);
}

span.card_6D {
    background-image: url(/mobile/imgs/games/card/6d.png);
}

span.card_7D {
    background-image: url(/mobile/imgs/games/card/7d.png);
}

span.card_8D {
    background-image: url(/mobile/imgs/games/card/8d.png);
}

span.card_9D {
    background-image: url(/mobile/imgs/games/card/9d.png);
}

span.card_TD {
    background-image: url(/mobile/imgs/games/card/td.png);
}

span.card_JD {
    background-image: url(/mobile/imgs/games/card/jd.png);
}

span.card_QD {
    background-image: url(/mobile/imgs/games/card/qd.png);
}

span.card_KD {
    background-image: url(/mobile/imgs/games/card/kd.png);
}

span.card_AS {
    background-image: url(/mobile/imgs/games/card/as.png);
}

span.card_2S {
    background-image: url(/mobile/imgs/games/card/2s.png);
}

span.card_3S {
    background-image: url(/mobile/imgs/games/card/3s.png);
}

span.card_4S {
    background-image: url(/mobile/imgs/games/card/4s.png);
}

span.card_5S {
    background-image: url(/mobile/imgs/games/card/5s.png);
}

span.card_6S {
    background-image: url(/mobile/imgs/games/card/6s.png);
}

span.card_7S {
    background-image: url(/imgs/games/card/7s.png);
}

span.card_8S {
    background-image: url(/mobile/imgs/games/card/8s.png);
}

span.card_9S {
    background-image: url(/mobile/imgs/games/card/9s.png);
}

span.card_TS {
    background-image: url(/mobile/imgs/games/card/ts.png);
}

span.card_JS {
    background-image: url(/mobile/imgs/games/card/js.png);
}

span.card_QS {
    background-image: url(/mobile/imgs/games/card/qs.png);
}

span.card_KS {
    background-image: url(/mobile/imgs/games/card/ks.png);
}

span.card_AC {
    background-image: url(/mobile/imgs/games/card/ac.png);
}

span.card_2C {
    background-image: url(/mobile/imgs/games/card/2c.png);
}

span.card_3C {
    background-image: url(/mobile/imgs/games/card/3c.png);
}

span.card_4C {
    background-image: url(/mobile/imgs/games/card/4c.png);
}

span.card_5C {
    background-image: url(/mobile/imgs/games/card/5c.png);
}

span.card_6C {
    background-image: url(/mobile/imgs/games/card/6c.png);
}

span.card_7C {
    background-image: url(/mobile/imgs/games/card/7c.png);
}

span.card_8C {
    background-image: url(/mobile/imgs/games/card/8c.png);
}

span.card_9C {
    background-image: url(/mobile/imgs/games/card/9c.png);
}

span.card_TC {
    background-image: url(/mobile/imgs/games/card/tc.png);
}

span.card_JC {
    background-image: url(/mobile/imgs/games/card/jc.png);
}

span.card_QC {
    background-image: url(/mobile/imgs/games/card/qc.png);
}

span.card_KC {
    background-image: url(/mobile/imgs/games/card/kc.png);
}

span.card_AH {
    background-image: url(/mobile/imgs/games/card/ah.png);
}

span.card_2H {
    background-image: url(/mobile/imgs/games/card/2h.png);
}

span.card_3H {
    background-image: url(/mobile/imgs/games/card/3h.png);
}

span.card_4H {
    background-image: url(/mobile/imgs/games/card/4h.png);
}

span.card_5H {
    background-image: url(/mobile/imgs/games/card/5h.png);
}

span.card_6H {
    background-image: url(/mobile/imgs/games/card/6h.png);
}

span.card_7H {
    background-image: url(/mobile/imgs/games/card/7h.png);
}

span.card_8H {
    background-image: url(/mobile/imgs/games/card/8h.png);
}

span.card_9H {
    background-image: url(/mobile/imgs/games/card/9h.png);
}

span.card_TH {
    background-image: url(/mobile/imgs/games/card/th.png);
}

span.card_JH {
    background-image: url(/mobile/imgs/games/card/jh.png);
}

span.card_QH {
    background-image: url(/mobile/imgs/games/card/qh.png);
}

span.card_KH {
    background-image: url(/mobile/imgs/games/card/kh.png);
}

span.total_even,
span.total_odd {
    font-family: 'Swagger';
    font-weight: 400;
    width: 50px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    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;
}

.fam-notice {
    background-color: #666;
    width: 100%;
    height: 50px;
    overflow: hidden;
}

.fam-notice p {
    height: 50px;
    line-height: 50px;
    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: 50px;
    line-height: 50px;
}

.rolling li a {
    display: block;
    color: var(--color-white);
    width: 100%;
    height: 100%;
}

.attn-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 10px;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    padding: 15px;
    color: var(--main-text);
    font-weight: 400;
    margin: 10px auto;
}

.attn-box:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 7px;
    background-color: var(--point-color);
}

.attn-box div .badge {
    width: auto;
    height: auto;
    background-color: var(--main-bg);
    display: inline-block;
    color: var(--point-color);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 2px 12px 3px;
    font-weight: 600;
    margin: 0;
}

.attn-box p .badge {
    background-color: var(--main-bg);
    display: inline-block;
    color: var(--point-color);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    margin: 0 5px;
    padding: 2px 12px 3px;
    font-weight: 600;
}

.attn-box p i {
    display: inline-block;
    background-size: cover;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    vertical-align: middle;
}

.attn-box p i.cash {
    background-image: url("/mobile/imgs/cash_icon_on.png");
}

.attn-box p i.point {
    background-image: url("/mobile/imgs/point_icon_on.png");
}

.attn-box p i.exp {
    background-image: url("/mobile/imgs/exp_icon_on.png");
}

.attn-box p.cash .badge {
    color: var(--point-color) !important;
}

.attn-box p.point .badge {
    color: var(--color-blue) !important;
}

.attn-box p.exp .badge {
    color: var(--color-purple) !important;
}

.attn-box .btn-inline a {
    display: block;
    margin: 3px 0;
}

.my-record-panel {
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem 0.625rem 0 0;
}

.my-record-panel .panel-header {
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
    padding: 10px;
    font-size: 0.875rem;
    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: 0.875rem;
    color: var(--color-white);
}

.select-items div,
.select-selected .my-record-panel h4 {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.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%;
}

/*
.live-frame {
    width: 100%;
    height: auto;
    background-color: var(--dark-color);
    overflow: hidden;
}
.live-frame iframe {
    width: 100%;
    height: 100%;
}
*/
/* gamepick_recode */

.gamepick_recode td,
.gamepick_recode th {
    border: none;
    text-align: left;
    padding: 10px 0;
}

.gamepick_recode th {
    width: 100px;
    color: var(--sub-text01);
}

.gamepick_recode td 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%);
}

.gamepick_recode td .hit,
.gamepick_recode td .fail {
    font-style: normal;
    padding: 0 10px;
}

.record-table .panel {
    border: 1px solid var(--border-color);
}

.record-table,
.table-wrap {
    overflow-x: auto;
    white-space: nowrap;
}

.record-table .pick-result {
    margin-bottom: 5px;
}

.record-table span.nullity {
    background-color: #919191;
    color: #fff;
}

.my-info-list .go-banner-manage,
.popup-body .go-banner-manage {
    position: relative;
    display: block;
    background-image: url("/mobile/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;
    min-height: 20px;
}

.my-info-list .go-banner-manage .inner,
.popup-body .go-banner-manage .inner {
    display: block;
    width: 100%;
    padding: 0;
}

.my-info-list .go-banner-manage img,
.popup-body .go-banner-manage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-info-list dl {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 5px;
}

.my-info-list dl dt {
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
}

.my-info-list dl dd .btn-inline {
    margin: 15px auto;
}

.rel-icon {
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 25px;
    height: 25px;
}

.rel-icon.talk {
    background-image: url("/mobile/imgs/talk_icon.png");
}

.rel-icon.chatt {
    background-image: url("/mobile/imgs/chat_icon.png");
}

.rel-icon.scrb {
    background-image: url("/mobile/imgs/scrb_icon.png");
}

.rel-icon.chatt,
.rel-icon.scrb,
.rel-icon.talk {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.4;
}

.rel-icon.chatt.active,
.rel-icon.scrb.active,
.rel-icon.talk.active {
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}

.filterSearch {
    background-color: var(--main-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
    width: 100%;
}

.filterSearch .filterSearch-wrap {
    display: grid;
    grid-gap: 10px 0;
}

.filterSearch .date .form-control {
    min-width: 110px;
}

.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: center;
    align-items: center;
}

.inline-field .btn,
.inline-field .go-select,
.inline-field .input-group {
    margin: 0;
}

.inline-field.center {
    justify-content: center;
}

.dateSelect {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.check-link a {
    position: relative;
    padding-left: 22px;
    margin: 10px 5px;
}

.check-link a:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-white);
    background: var(--border-color);
    border-radius: 50%;
}

.check-link a.active:before {
    color: var(--color-white);
    background: var(--color-red);
    border-radius: 50%;
}

.input-group.date {
    position: relative;
}

.input-group.date:after {
    content: "\f073";
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    top: 50%;
    right: 7px;
    color: var(--sub-text02);
    font-weight: 300;
    transform: translateY(-50%);
}

.go-live .filterSearch-wrap .input-group.date .form-control {
    width: 0;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    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;
}

.form-control.md {
    font-size: 15px;
    padding: 0.675rem 0.75rem;
}

.input-group > .form-control {
    position: relative;
    margin-bottom: 0;
}

.btn-radio + .form-control {
    display: inline-block;
    width: auto;
    padding: 0.175rem 0.5rem;
}

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;
}

.datepicker.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;
    margin-bottom: 10px;
}

.go-select select {
    display: none;
}

.go-select.md .select-items div,
.go-select.md .select-selected {
    padding: 0.75rem;
}

.go-select.bottom .select-items {
    top: auto;
    bottom: 100%;
}

.select-selected {
    border: 1px solid var(--border-color);
    background-color: var(--color-white);
}

.select-selected:after {
    position: absolute;
    content: "\f107";
    font-family: "Font Awesome 6 Pro";
    right: 7px;
}

.select-selected.select-arrow-active:after {
    content: "\f106";
    font-family: "Font Awesome 6 Pro";
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #666 transparent;
    top: 7px;
}

.go-select.border-none {
    /*min-width: auto;*/
    min-width: 140px;
}

.go-select.border-none .select-selected {
    border: none;
}

.go-select.border-none .select-selected:after {
    content: "\f107";
    font-family: 'Font Awesome 6 pro';
    display: inline-block;
    border: none;
    position: static;
    margin-left: 5px;
}

.go-select.border-none .select-selected.select-arrow-active:after {
    content: "\f106";
}

.go-select.border-none .select-items {
    border-top: 1px solid var(--border-color);
}

.select-items div,
.select-selected,
.pattern-select {
    padding: 0.375rem 1.25rem 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    word-break: keep-all;
}

.pattern-select-wrap {
    padding: 10px;
}

.pattern-select {
    width: 50%;
}

.pattern-select:focus {
    outline: none;
}

.select-items {
    position: absolute;
    background-color: var(--color-white);
    border-top: 1px solid var(--border-color);
    max-height: 250px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    min-width: 120px;
}

.select-items div {
    border-top: none;
}

.select-hide {
    display: none;
}

/* 분석용 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.full {
    width: 100%;
}

.data-select.mwide {
    width: 70%;
}

.data-select.half {
    width: 50%;
}

.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;
}

/* hack to fall back in opera */
.data-select .selector,
_:-o-prefocus {
    .styled-select {
        background: none;
    }
}

.same-as-selected,
.select-items div:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.tab-content {
    display: none;
}

.tab-content .container {
    padding: 0 10px;
}

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

.tab-group {
    background-color: var(--gray-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-group a,
.tab-group li {
    width: 100%;
}

.tab-group a {
    position: relative;
    display: block;
    background-color: transparent;
    border: none;
    text-align: center;
    padding: 10px 0;
    color: var(--sub-text02);
    cursor: pointer;
}

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

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

.tab-group.dark {
    background-color: #212529;
}

.tab-group.dark li {
    border: none;
}

.tab-group.dark a {
    color: var(--color-white);
    border: none;
    border-right: 1px solid #000;
}

.tab-group.dark li:last-child {
    border-right: none;
}

.tab-group.dark a.active,
.tab-group.dark a.current,
.tab-group.dark li.active,
.tab-group.dark li.current {
    background-color: var(--color-blue);
}

/* 내 아이템*/
.item-box {
    padding: 10px;
}

.item-box figure {
    margin: 20px;
}

.item-box p.memta {
    color: var(--point-color);
}

.item-box p.memta.expired {
    color: var(--sub-text02);
}

.item-box .inven {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item-box .inven li {
    display: inline-block;
    border: 1px solid var(--border-color);
    padding: 3px 5px;
    font-weight: 500;
}

.item-box .inven li span {
    color: var(--point-color);
    padding-left: 10px;
}

.myExp-grade {
    margin: 10px auto;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.myExp-grade li {
    display: inline-block;
    text-align: center;
    padding: 0 2px;
    font-size: 11px;
}

.grade-icon {
    display: block;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    margin: 0 auto 5px;
    background-repeat: no-repeat;
    background-size: contain;
}

.grade-icon.lv1 {
    background-image: url("/mobile/imgs/level-01.png");
}

.grade-icon.lv2 {
    background-image: url("/mobile/imgs/level-02.png");
}

.grade-icon.lv3 {
    background-image: url("/mobile/imgs/level-03.png");
}

.grade-icon.lv4 {
    background-image: url("/mobile/imgs/level-04.png");
}

.grade-icon.lv5 {
    background-image: url("/mobile/imgs/level-05.png");
}

.grade-icon.lv6 {
    background-image: url("/mobile/imgs/level-06.png");
}

.grade-icon.lv7 {
    background-image: url("/mobile/imgs/level-07.png");
}

.grade-icon.lv8 {
    background-image: url("/mobile/imgs/level-08.png");
}

.grade-icon.lv9 {
    background-image: url("/mobile/imgs/level-09.png");
}

.grade-icon.lv10 {
    background-image: url("/mobile/imgs/level-10.png");
}

.grade-icon.lv11 {
    background-image: url("/mobile/imgs/level-11.png");
}

.myExp-grade-bar {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
}

.grade-bar {
    background-color: #ddd;
    width: 200px;
    height: 10px;
    border-radius: 30px;
    overflow: hidden;
}

.grade-bar .bar {
    background-color: var(--point-color);
    border-radius: 30px;
    height: 100%;
}

.exp-plus {
    color: var(--point-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.exp-plus i {
    color: var(--point-color);
    font-size: 1.25rem;
    margin-right: 10px;
}

.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: fixed;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    z-index: 10001;
    overflow: hidden;
}

#pick-button .modal {
    display: block;
    left: 0;
    bottom: 0;
    top: 5%;
    transform: none;
    padding: 0;
    background-color: var(--color-white);
}

#pick-button .modal.active {
    bottom: 0;
    top: auto;
    height: auto;
    transition: 0.5s ease;
}

.modal.full {
    height: 100%;
}

.modal-dialog {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    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%;
    height: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
}

.modal-content .btn,
.modal-content .form-control {
    padding: 0.75rem;
}

.modal-header {
    background-color: var(--gnb-color);
    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;
}

.close,
.modal-close {
    display: inline-block;
    padding: 0 5px;
}

.close:after,
.modal-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-control.whbtn + a,
.form-control.whbtn + button,
.form-control.whbtn + input {
    float: left;
    width: 40%;
}

.btn-modal {
    cursor: pointer;
}

body.hidden {
    overflow: hidden;
}

/* thumb-list */
.thumb-list li {
    position: relative;
}

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

.thumb-list li a {
    position: relative;
    display: block;
    padding: 15px 0 15px 80px;
}

.thumb-list .thumbnail-box {
    position: absolute;
    left: 0;
    width: 70px;
    height: 50px;
}

.thumb-list li a .title {
    display: flex;
    overflow: hidden;
}

.thumb-list li .title p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13.5px;
}

.thumb-list li .title .comment {
    font-size: 0.85rem;
}

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

.thumb-list .thumbnail-img {
    border-radius: 0;
    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 .info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 3px 0;
    font-size: 0.688rem;
    font-weight: 300;
    color: var(--sub-text02);
    column-gap: 5px;
}

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

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

.thumb-list .info span.dot {
    position: relative;
    padding-right: 8px;
    margin-right: 3px;
}

.thumb-list .info span.dot:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 7px;
    background: var(--border-color);
}

.thumb-list .subject .cate {
    display: inline-block;
    background-color: var(--hover-color);
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--color-white);
    padding: 1px 5px;
    border-radius: 5px;
    margin-bottom: 3px;
}

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

.thumb-list .subject .title .cate {
    color: #777;
    background: var(--gray-bg);
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    margin-right: 5px;
}

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

.thumb-list .subject p.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;
}

.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 1px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 9px;
    margin-left: 5px;
}

.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-bbs .board-contents {
    border-top: 1px solid var(--gnb-color);
}

.go-bbs .thumb-list,
.go-bbs .webzine-list {
    margin: 10px auto;
}

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

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

.go-bbs .thumb-list .thumbnail-img,
.go-forum .thumb-list .thumbnail-img {
    object-fit: cover;
}

/* 출석부 */
.month-table {
    background-color: var(--color-white);
    display: grid;
    grid-template-columns: repeat(7, 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;
}

/* sports */
.owl-nav {
    position: absolute;
    z-index: 2;
    top: 27%;
    width: 100%;
}

.headline .owl-nav {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    top: auto;
    bottom: 5px;
    left: 0;
    /* transform: translateY(-50%); */
    color: var(--color-white);
    font-size: 2rem;
    gap: 20px;
    line-height: 2rem;
}

.headline article {
    height: 130px;
    background-size: cover;
}

.headline article .subject {
    position: absolute;
    left: 10px;
    bottom: 5px;
    color: var(--color-white);
}

.sports label.cate {
    background-color: var(--hover-color);
    font-size: 0.75rem;
    border-radius: 2px;
    padding: 2px 12px;
    color: var(--color-white);
}

.column-50 .media img {
    height: 120px;
}

.media {
    position: relative;
    margin-bottom: 0.75rem;
}

.media label.cate {
    position: absolute;
    left: 5px;
    bottom: 5px;
    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;
}

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

.sports .thumb-list li a {
    padding: 0;
    height: 100%;
}

.sports .thumb-list .thumbnail-box {
    position: relative;
}

.sports .thumb-list li .subject {
    width: 100%;
    overflow: hidden;
}

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

/* Webzine & Board */
.board .title {
    word-break: keep-all;
}

.board .title h6 {
    display: flex;
    overflow: hidden;
    justify-content: flex-start;

}

.board .title h5 p {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

.board .title h5 p a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* .board .category {
  border: none;
} */
.list-sorting {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.875rem;
}

.list-sorting li {
    padding: 0 0.3rem;
}

.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;
}

.post-validated {
    padding: 50px;
    text-align: center;
    color: var(--sub-text02);
}

.post-validated i {
    font-size: 3rem;
    margin: 20px;
}

.post-validated .title,
.post-validated h6 {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: -0.1em;
    color: #777777;
}

ul.webzine-list li {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

ul.webzine-list li.notice {
    background: var(--gray-bg);
    margin: 0 -15px;
    padding: 10px 15px;
}

ul.webzine-list li:after {
    clear: both;
    display: table;
    content: "";
}

ul.webzine-list li figure {
    float: right;
    width: 70px;
    height: 70px;
    overflow: hidden;
}

ul.webzine-list li .title-header {
    float: left;
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
    width: calc(100% - 90px);
}

ul.webzine-list li .title-header h4 {
    margin-bottom: 5px;
}

ul.webzine-list li .title-header p {
    margin-bottom: 10px;
}

ul.webzine-list li .title {
    margin-bottom: 5px;
    position: relative;
}

ul.webzine-list li .title h5 {
    font-weight: 400;
    overflow: hidden;
}

ul.webzine-list li .title .add-point {
    position: absolute;
    right: 0;
    /* top: 50%; */
}

ul.webzine-list li .title .add-point span {
    font-size: 13px;
    font-weight: 500;
}

ul.webzine-list li .title .add-point span.p-num {
    color: #1983DF;
}

ul.webzine-list li .title .add-point span.ex-num {
    color: #199681;
}

ul.webzine-list li .title p {
    display: block;
    font-size: 13.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

ul.webzine-list li .id_name {
    display: inline-block;
}

ul.webzine-list li .id_name .m-lev {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

ul.webzine-list li span {
    position: relative;
    font-size: 0.688rem;
    display: inline-block;
    color: var(--sub-text01);
    margin-right: 5px;
}

ul.webzine-list li.notice .classification {
    background: var(--point-color);
    color: #fff;
}

ul.webzine-list li span.dot {
    position: relative;
    padding-right: 8px;
    margin-right: 3px;
}

ul.webzine-list li span.complete {
    color: #1983DF;
}

ul.webzine-list li span.dot:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 7px;
    background: var(--border-color);
}

ul.webzine-list li .cate {
    color: var(--main-text);
    font-size: 0.85rem;
    font-weight: 400;
}

ul.webzine-list li .comment {
    color: var(--color-blue);
    margin-left: 5px;
    font-size: 0.85rem;
    font-weight: bold;
}

ul.webzine-list li .hits:before {
    content: "\f06e";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

ul.webzine-list li .like:before {
    content: "\f164";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

ul.webzine-list li .hits,
ul.webzine-list li .like {
    padding-left: 20px;
}

ul.webzine-list .badge {
    display: inline-block;
    padding: 1px 5px;
    color: var(--color-white);
}

ul.webzine-list .badge.waiting {
    background-color: var(--point-color);
}

ul.webzine-list .badge.complete {
    background-color: var(--sub-text02);
}

ul.webzine-list .classification {
    padding: 3px;
    background: var(--gray-bg);
    border-radius: 3px;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.1em;
    color: #777777;
}

ul.webzine-list .classification + h5 {
    display: inline;
    font-size: 13px;
}

ul.webzine-list.scrap li {
    position: relative;
    padding-left: 20px;
}

.webzine-list.scrap li input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 18px;
}

ul.webzine-list span.comment.new {
    position: relative;
}

ul.webzine-list span.comment.new:after {
    content: 'N';
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    padding: 0 3px 1px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 9px;
    margin-left: 5px;
}

ul.webzine-list a.new {
    position: relative;
}

ul.webzine-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;
}

.attendance ul.webzine-list p.new {
    position: relative;
}

.attendance ul.webzine-list p.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;
}

/* util small */
small.util {
    color: var(--font-sub);
}

.dot {
    position: relative;
    padding-right: 8px;
    margin-right: 5px;
}

.dot:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 7px;
    background: var(--border-color);
}

.hits:before {
    content: "\f06e";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    left: 0;
    top: 1px;
    font-weight: 900;
}

.info-wrap .util a {
    color: var(--sub-text02);
}

.info-wrap .util a.scraped {
    color: var(--point-color);
}

.info-wrap .util a {
    color: var(--sub-text02);
}

.info-wrap .util a.scrape:before {
    content: "\f02e";
    font-family: "Font Awesome 6 Pro";
    margin-right: 5px;
    font-size: 18px;
}

.info-wrap .util a.scraped:before {
    content: "\f02e";
    font-family: "Font Awesome 6 Pro";
    margin-right: 5px;
    font-weight: 900;
    font-size: 18px;
}

table tr.notice > td {
    background-color: var(--main-bg);
}

table tr.notice > td {
    color: var(--point-color) !important;
}

.article-wrap {
    /* border-top: 1px solid var(--border-color); */
    border-bottom: 1px solid var(--border-color);
    padding: 25px 15px;
}

.article-wrap .board-write h3 {
    margin: 20px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--gnb-color);
}

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin: 10px;
}

.board-footer {
    display: flex;
    margin: 15px auto;
    padding: 0 1rem 2rem;
    justify-content: flex-end;
    align-items: center;
}

.btn.go-write {
    position: fixed;
    right: 10px;
    bottom: 65px;
    width: 62px;
    height: 62px;
    background: #F64356;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 2.5;
    z-index: 10;
    transition: all 0.2s ease;
}

.info-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0 0 15px;
    margin: 15px 0;
}

.user-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
}

.user-wrap p small {
    display: block;
}

.user-wrap .id_name {
    /* display: inline-block !important; */
}

article {
    padding-bottom: 25px;
    font-size: 0.875rem;
}

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-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: -6px;
    top: -4px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 9px;
    background-color: #8d8d8d;
    border-radius: 50%;
    color: #fff;
    text-align: center;
}

.comment-login a {
    background: #f4f4f4;
    padding: 10px;
    display: block;
    border: 1px solid #ddd;
}

.comment-attach {
    padding-top: 5px;
}

.comment-attach > label input[type="file"] {
    display: none;
}

.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;
    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(16.6666%, 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: 30px;
    line-height: 30px;
    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);
}

.rebirth-list li {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.rebirth-list li:last-child {
    border-bottom: none;
}

.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);
}

.prv-con span {
    display: inline-block;
    width: 21px;
    height: 21px;
    line-height: 20px;
    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);
}

#rule-01 p {
    margin-bottom: 25px;
}

.record-empty {
    margin: 25px auto;
    text-align: center;
}

.record-empty i {
    font-size: 3rem;
    color: #ccc;
}

.record-empty p {
    margin-top: 20px;
    color: var(--sub-text01);
}

.list-more {
    padding: 15px;
    margin: 30px auto;
    text-align: center;
}

.list-more button {
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 0.5rem 3.125rem;
}

.page-wrap {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.pg_page {
    color: var(--sub-text01);
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    min-width: 30px;
    text-decoration: none;
    border-radius: 0;
    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;
    border-radius: 0;
}

.pg_end,
.pg_next,
.pg_prev,
.pg_start {
    text-indent: -999px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border-color);
}

.pg_start {
    background: #fff url("/mobile/imgs/btn_first.png") no-repeat center center;
}

.pg_prev {
    background: #fff url("/mobile/imgs/btn_prev.png") no-repeat center center;
}

.pg_next {
    background: #fff url("/mobile/imgs/btn_next.png") no-repeat center center;
}

.pg_end {
    background: #fff url("/mobile/imgs/btn_end.png") no-repeat center center;
}

.market-list {
    margin-top: 10px;
    margin-bottom: 10px;
}

.market-list .item-title {
    margin-bottom: 5px;
}

.market-list .item {
    border: 1px solid var(--border-color);
}

.market-list .item:after {
    content: "";
    clear: both;
    display: block;
}

.market-list .item .item-tit {
    float: left;
    padding: 15px 0;
    width: 100px;
    text-align: center;
}

.market-list .item .item-tit figure {
    padding: 0;
}

.market-list .item .buy-btn {
    clear: both;
}

.market-list .item .buy-btn .btn {
    display: block;
    font-size: 1rem;
    margin: 0;
    padding: 0.85rem 0.75rem;
}

.market-list .item-select {
    float: right;
    border-left: 1px solid var(--border-color);
    width: calc(100% - 100px);
}

.market-list .item-select ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    height: 51px;
    border-bottom: 1px solid var(--border-color);
}

.market-list .item-select ul li:last-child {
    border-bottom: none;
}

.market-list {
    margin-top: 10px;
    margin-bottom: 10px;
}

.market-list .item-title {
    margin-bottom: 5px;
}

.market-list .item {
    border: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
}

.market-list .item .item-tit {
    width: 100px;
    text-align: center;
}

.market-list .item .item-tit div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.market-list .item .buy-btn {
    width: 100%;
}

.market-list .item .buy-btn .btn {
    display: block;
    font-size: 1rem;
    margin: 0;
    padding: 0.85rem 0.75rem;
}

.market-list .item-select {
    border-left: 1px solid var(--border-color);
    width: calc(100% - 100px);
}

.market-list .item-select ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    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"] {
    display: none;
}

.form-check-input[type="radio"] + .btn-radio,
.form-check-input[type="checkbox"] + .btn-checkbox {
    /* background-image: url("/mobile/imgs/uncheck_icon.png"); */
    /* background-size: 20px 20px; */
    /* background-repeat: no-repeat; */
    /* background-position: left center; */
    position: relative;
    padding-left: 22px;
    cursor: pointer;
}

.form-check-input[type="radio"]:checked + .btn-radio,
.form-check-input[type="checkbox"]:checked + .btn-checkbox {
    /* background-image: url("/mobile/imgs/checked_icon.png"); */
    /* background-size: 20px 20px; */
    /* background-repeat: no-repeat; */
    /* background-position: left center; */
}

.form-check-input[type="radio"] + .btn-radio::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-white);
    background: var(--border-color);
    border-radius: 50%;
    text-align: center;
}

.form-check-input[type="radio"]:checked + .btn-radio::before {
    color: var(--color-white);
    background: var(--color-red);
    border-radius: 50%;
}

.form-check-input[type="checkbox"] + .btn-checkbox::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-white);
    background: var(--border-color);
    text-align: center;
}

.form-check-input[type="checkbox"]:checked + .btn-checkbox::before {
    color: var(--color-white);
    background: var(--color-red);
}


.form-check-input[type="radio"]:checked + label + .item-count {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
}

.item-count {
    display: none;
}

.item-count .qty-minus,
.item-count .qty-plus {
    width: 30px;
    height: 30px;
    line-height: 22px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid var(--color-placeholder);
    display: inline-block;
    text-align: center;
    font-size: 22px;
    padding: 0;
}

.item-count input {
    width: 40px;
    padding: 0.25rem !important;
    text-align: center;
    border: 1px solid var(--color-placeholder);
    display: inline-block;
    font-size: 13px;
}

.qty-minus:hover,
.qty-plus:hover {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    color: #fff;
}

/* Popup */
.popup-container .popup-header {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gnb-color);
    color: var(--color-white);
    padding: 11px;
}

.popup-container .popup-header h3 {
    font-size: 18px;
}

.popup-body {
    padding: 15px;
}

.popup-body.gray {
    background-color: var(--main-bg);
}

.popup-body figure {
    margin: 15px auto;
    width: 150px;
}

.popup-body .item-select label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-footer {
    text-align: center;
    padding: 15px;
}

.popup-container .tabs {
    width: 100%;
}

.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(--point-color);
    font-size: 13px;
    text-align: center;
    line-height: 45px;
    font-weight: 400;
    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);
    padding: 15px;
    overflow: hidden;
}

.addBox .list-box {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 15px;
    height: 210px;
    overflow-y: auto;
    margin: 15px 0;
}

.addBox #nickname-list {
    list-style-type: none;
}

.addBox #nickname-list li {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 200%;
    font-size: 15px;
}

.addBox #nickname-list li i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.message textarea {
    width: 100%;
    height: 140px;
}

#charging-100:checked ~ #charging-100,
#charging-10:checked ~ #charging-10,
#charging-1:checked ~ #charging-1,
#charging-200:checked ~ #charging-200,
#charging-500:checked ~ #charging-500 {
    display: block;
}

.btn-checkbox,
.btn-radio {
    display: inline-block;
    font-weight: 500;
    margin: 10px 5px;
}

.popup-container .inner {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.popup-container .inner .tab-content {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--main-bg);
    padding: 20px;
}

.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;
}

.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;
}

/* 채팅랭킹, 가족방 등등 */
.guide .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--point-color);
    color: var(--color-white);
    padding: 10px 15px;
}

.guide-box {
    display: none;
    padding: 15px;
}

.rank-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.rank-list li a {
    display: grid;
    grid-template-columns: 30px auto;
    align-items: center;
}

.rank-list li a:after {
    content: "";
    clear: both;
    display: block;
}

.rank-list li a .description .inner {
    display: grid;
    grid-template-columns: auto auto;
}

.rank-list li a .description p {
    font-size: 12px;
}

.profile-ranking {
    display: inline-block;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

.profile-ranking.rank1 {
    background-color: var(--point-color);
    color: var(--color-white);
}

.profile-ranking.rank2 {
    background-color: var(--color-green);
    color: var(--color-white);
}

.profile-ranking.rank3 {
    background-color: var(--color-placeholder);
    color: var(--color-white);
}

.rank-list .profile-ranking {
    margin-right: 10px;
}

.rank-list .id_name {
    display: grid;
    align-items: center;
    font-weight: 400;
    grid-template-columns: 60px auto;
}

.rank-list .id_name .chat-profile {
    width: 50px;
    height: 50px;
}

.rank-list .id_name img.m-lev {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.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;
}

.weekact-wrap {
    margin: 10px 0;
    border: 1px solid var(--border-color);
}

.weekact-wrap h5 {
    text-align: center;
    background-color: var(--main-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.weekact-wrap .weekact li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 15px;
    line-height: 30px;
}

.weekact-wrap .weekact li:last-child {
    border-bottom: none;
}

.weekact-wrap .weekact li p {
    position: relative;
    padding-left: 40px;
}

.weekact-wrap .weekact li p:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--main-bg);
    background-image: url("/mobile/imgs/log_icon.png");
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
}

/* Time Countdown Progress bar */
#timeBar {
    position: relative;
    width: 100%;
    margin: 10px auto;
    height: 14px;
    background-color: var(--gray-bg);
}

#timeBar div {
    height: 100%;
    text-align: center;
    line-height: 14px;
    width: 0;
    background-color: yellow;
    box-sizing: border-box;
}

#timeBar span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/**/
.faq {
    margin: 0 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: 1rem;
    left: 1rem;
}

.faq-item.active .faq-item-content {
    display: block;
}

.faq.inquiry {
    margin-bottom: 10px;
}

.faq.inquiry .faq-item-title {
    font-size: 14px;
    letter-spacing: -0.1em;
}

.faq.inquiry,
.faq.inquiry .faq-item-content {
    background-color: var(--contents-bg);
}

.faq.inquiry .faq-item-content {
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.1em;
    color: #777777;
    word-break: keep-all;
    word-wrap: break-word;
}

.faq.inquiry ul,
.section ul {
    padding-left: 7px;
    color: var(--sub-text01);
    list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='6' viewBox='-1 -1 2 2'><circle r='0.4' /></svg>");
}

.faq.inquiry li {
    margin-bottom: 5px;
    letter-spacing: -0.1em;
}

.mobile .go-select {
    margin-bottom: 5px;
}

.mobile .select-selected {
    height: 44px;
    line-height: 30px;
    padding-left: 17px;
    vertical-align: middle;
    color: #AAAAAA;
    font-size: 13px;
    align-items: center;
    letter-spacing: -0.1em;
}

.mobile .select-selected:after {
    top: 8px;
    right: 0;
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    /* background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'><path style='color:rgb(160,160,160);' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m17 10-7 7-7-7'/></svg>") no-repeat 10% 50%; */
    border: 0;
    font-size: 16px;
    font-weight: 300;
    width: 28px;
    height: 28px;
}

.mobile .select-selected.select-arrow-active:after {
    border-color: transparent transparent #666 transparent;
}

.mobile .select-selected.select-arrow-active:after {
    content: "\f077";
    font-family: "Font Awesome 6 Pro";
    /* background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'><path style='color:rgb(160,160,160);' transform='rotate(180,10,10)' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m17 10-7 7-7-7'/></svg>") no-repeat 10% 50%; */
}

.mobile input[type="text"] {
    height: 44px;
}

.mobile input::placeholder {
    color: #AAAAAA;
    font-size: 13px;
    font-weight: 400;
    padding-left: 7px;
}

.mobile .editor-wrap {
    margin-top: 5px;
}

.mobile .editor-wrap textarea {
    min-height: 311px;
}

.mobile .btn-group.full .btn {
    height: 44px;
    padding-top: 10px;
    font-size: 14px;
}

.terms-subect {
    display: inline-block;
    width: 48%;
}

.addBox .list-box ul li {
    position: relative;
}

.addBox .list-box ul li .close {
    position: absolute;
    top: 0;
    right: -10px;
}

/* ---- EXP ---- */
.card {
    padding-bottom: 10px;
}

.contents-ranking {
    letter-spacing: -0.1em;
}

.contents-ranking article {
    padding-bottom: 0;
    font-size: inherit;
}

.contents-ranking article p {
    margin-bottom: 0;
}

.caution {
    padding: 5px 5px 5px 20px;
    background: #F0F6FE;
    border: 1px solid #DAE1E6;
    border-radius: 2px;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: -0.1em;
    color: #333333;
}

.caution p:before {
    top: 5px;
    content: "\f0a1";
    font-size: 12px;
    font-family: "Font Awesome 6 Pro";
    border: 0;
    margin-right: 5px;
}

.dictionary {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1em;
    color: #333333;
}

.dictionary dt {
    margin-bottom: 4px;
}

.dictionary dd {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 19px;
    color: #777777;
}

.paragraph {
    margin: 10px 0;
}

.paragraph-title {
    padding: 20px 0 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1em;
    color: #333333;
}

.btn-default-line.active,
.radio-tabs.btn-group .btn-check:checked + .btn-default-line {
    color: #1983DF !important;
    border: 1px solid #F0F6FE;
    background-color: #F0F6FE;
}

.radio-tabs.btn-group .btn-check + .btn-default-line {
    border: 1px solid var(--gray-bg);
    background-color: var(--gray-bg);
    border-radius: 5px 0 0 5px;
}

.radio-tabs.btn-group .btn-check:checked + .btn-default-line {
    border: 1px solid #1983DF;
    background-color: var(--color-white);
}

.radio-tabs.btn-group .btn-check + .btn-default-line.right {
    border-radius: 0 5px 5px 0;
    text-align: center;
}

.inline-field .go-select {
    margin-right: 4px;
    width: 100%;
}

.inline-field .select-selected:after {
    top: 50%;
    content: "\f078";
    font-size: 12px;
    font-family: "Font Awesome 6 Pro";
    border: 0;
    transform: translateY(-50%);
}

.inline-field .select-selected.select-arrow-active:after {
    content: "\f077";
}

/* 영창 */
.filterSearch {
    border: 0;
}

.filterSearch .btn-group > .btn {
    color: var(--sub-text02);
}

.filterSearch,
.guideBox {
    background-color: var(--color-white);
    margin: 7px auto;
    padding: 7px 0;
}

.incarceration-zone {
    margin-top: 10px;
}

.incarceration-list {
    border-top: 1px solid #000;
}

.incarceration-list li {
    position: relative;
    padding: 10px 0 10px 44px;
    border-bottom: 0.5px solid #DAE1E6;
}

.incarceration-list dd,
.incarceration-list dt {
    display: inline;
    color: var(--sub-text01);
}

.incarceration-list .inc_reason,
.incarceration-list .inmate-id,
.incarceration-list .inmate-name,
.incarceration-list .number_of_inc {
    display: none;
}

.incarceration-list .inmate-id + dd > img {
    width: 26px;
    height: 26px;
}

.incarceration-list .inmate-name + dd {
    font-size: 13px;
    color: #333;
}

.incarceration-list .inc_reason + dd {
    color: #333;
}

.incarceration-list .inc_date + dd::after,
.incarceration-list .inc_reason + dd::after,
.incarceration-list .inmate-name + dd::after {
    content: " ";
    display: block;
}

.incarceration-list .number_of_inc + dd {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.incarceration-list button {
    position: absolute;
    right: 0;
    top: 40%;
    width: 62px;
    height: 26px;
    padding: 4.5px 10px;
    letter-spacing: -0.1em;
    border: 1px solid #DAE1E6;
    background: #FFFFFF;
    font-size: 12px;
    border-radius: 3px;
}

#restriction-table {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    letter-spacing: -0.1em;
    color: #333333;
    word-break: keep-all;
    word-wrap: normal;
}

#restriction-table th {
    font-weight: 400;
}

#restriction-table td {
    word-wrap: break-word;
    border-right: 1px solid #DAE1E6;
}

#restriction-table th:nth-child(1),
#restriction-table th:nth-child(2) {
    width: 80px;
}

/* 아이템 */
.card-banner-1 {
    position: relative;
    border: 1px solid #DAE1E6;
    border-left: 2px solid #1983DF;
    margin: 10px 0;
    padding: 12px 14px;
    background: #FFFFFF;
}

.card-banner-1 .title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1em;
    color: #333333;
}

.card-banner-1 .link-box,
.profile-item .link-box {
    display: block;
    width: 100%;
    margin: 12px 0;
    text-align: center;
    background: #1983DF;
    border: 1px solid #1F6DB1;
    border-radius: 2px;
    padding: 10px;
    color: var(--color-white);
}

.card-banner-1 .link-name {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1em;
    color: #FFFFFF;
}

.card-banner-1 .counter {
    position: absolute;
    right: 14px;
    top: 12px;
    padding: 2px 12px;
    border: 1px solid #DAE1E6;
    border-radius: 14px;
    background: #F0F6FE;
    color: #1983DF;
    font-size: 13px;
}

.card-banner-1 .comment {
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.1em;
    color: #999999;
}

.my-items {
    border-top: 0.5px solid #000000;
    letter-spacing: -0.5px;
}

.my-items .my-item {
    position: relative;
    padding: 12px 0 12px 60px;
    border-bottom: 0.5px solid #DAE1E6;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
}

.my-item .title {
    font-size: 13px;
    line-height: 19px;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 40px;
}

.my-item .explain {
    color: #777777;
}

.my-item .period {
    color: #F64356;
}

.my-item .button {
    width: 100%;
    margin-top: 6px;
    padding: 7.5px;
    border: 0.5px solid #1983DF;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    background: #FFFFFF;
    color: #1983DF;
    letter-spacing: -0.1em;
}

.my-item .button.use {
    font-size: 13px;
}

.my-item .icon {
    position: absolute;
    left: 0;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    border-radius: 50px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.my-item .icon.profile-photo {
    border: none;
}

.my-item .cnt {
    position: absolute;
    right: 0;
    top: 45%;
    height: 19px;
    text-align: right;
    font-size: 13px;
    color: #F64356;
}

.my-item .cnt span {
    color: #F64356;
    margin-right: 2px;
}

.my-item .cnt.minus,
.my-item .cnt.minus span {
    color: #333333;
}

.my-item .comment {
    font-size: 10px;
    line-height: 14px;
    color: #999999;
}

.my-item .half-button {
    width: 48%;
}

.my-item .room {
    margin-right: 8px;
    border: 0.5px solid #DAE1E6;
    background: #EFEFEF;
}

.my-item .gift,
.my-item .use-half {
    float: right;
}

.my-item .gift::after {
    clear: both;
}

.awesome-list .my-items .my-item {
    padding-left: 44px;
}

.awesome-list .btn-point {
    background-color: #333333;
    border-color: #333333;
}

.awesome-list .my-item .icon {
    width: 30px;
    height: 30px;
}

.awesome-list .my-items.alarms .my-item .icon {
    top: 50%;
    transform: translateY(-50%);
}

.awesome-list .my-items.alarms .my-item .close {
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 13px;
    transform: translateY(-50%);
}

.awesome-list .period {
    color: #777777;
    font-size: 11px;
}

.my-items .icon.circle {
    background: #EFEFEF;
    border: 0.5px solid #DAE1E6;
    border-radius: 50%;
    padding: 6px 0;
}

.my-items.alarms .icon.circle {
    color: #FFFFFF;
    border: 0;
    font-weight: 300;
}

.my-items .icon.circle img {
    width: 30px;
    height: 30px;
    border: 0;
}

.my-items .icon.circle.photo {
    padding-top: 0;
}

.my-items .icon-title {
    display: none;
}

.my-items .icon.plus::after {
    content: "\2b";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.minus::after {
    content: "\f068";
    color: #999999;
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.gift::after {
    content: "\f06b";
    color: #F64356;
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.gift-send::after {
    content: "\f06b";
    color: #999999;
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.like::after {
    content: "\f164";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.comment::after {
    content: "\f4ad";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.gamechips::after {
    content: "\f51e";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items .icon.bullseye::after {
    content: "\f648";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.my-items.alarms {
    border-top: 0;
}

.my-items.alarms .icon.like {
    color: #FFFFFF;
}

.my-items.alarms .icon.like {
    background: var(--color-yellow);
}

.my-items.alarms .icon.gift {
    background: #FF9900;
}

.my-items.alarms .icon.gift::after {
    color: #FFFFFF;
}

.my-items.alarms .icon.gamechips {
    background: #F64356;
}

.my-items.alarms .icon.comment {
    background: #1FB99F;
}

.my-items.alarms .icon.bullseye {
    background: #1983DF;
}

.my-items.alarms .my-item .cnt {
    color: #777777;
}

.my-items.alarms .my-item .title {
    font-size: 12px;
}

#my_cash .my-item .title,
#my_cash_list .my-item .title,
.my-items.alarms .my-item .title {
    font-weight: 400;
}

#my_cash_list .my-items .my-item {
    padding-left: 0;
    font-size: 13px !important;
}

#my_cash_list .my-item .cnt span,
#my_cash_list .my-item .status span.done {
    color: #F64356;
}

#my_cash_list .my-item .amount {
    font-weight: 600;
}

.myExp-grade-bar {
    position: relative;
    width: 100%;
    margin-top: 30px;
}

.card-banner-1 .grade-bar {
    width: 80%;
}

.card-banner-1 .mr20 {
    margin-right: 10px !important;
}

.card-banner-1 .ml20 {
    margin-left: 10px !important;
}

.card-banner-1 .level {
    color: #999999;
    font-size: 11px;
}

.myExp-grade-bar .exp {
    position: absolute;
    top: -12px;
    text-align: center;
    font-size: 11px;
}

.myExp-grade-bar #level_exp {
    color: #1983DF;
}

.card-banner-1 #level_exp,
.card-banner-1 #level_next {
    margin: 0 3px;
}

.btn-full {
    display: block;
    position: relative;
    width: 100%;
    text-align: left;
    padding: 11px 17px;
    border: 1px solid #DAE1E6;
    background: #ffffff;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1em;
    color: #333333;
}

.btn-full::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f054";
    position: absolute;
    right: 17px;
    font-weight: 900;
}

.modal-close {
    color: #fff;
}

.modal-close span {
    display: none;
}

table.level-chart {
    border-top: 1px solid #DAE1E6;
}

table.level-chart th {
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.1em;
    color: #333333;
}

table.level-chart th:nth-child(1) {
    text-align: left;
    width: 70%;
}

table.level-chart td:nth-child(1) {
    padding-left: 50px;
    text-align: left;
}

table.level-chart td:nth-child(2),
table.level-chart th:nth-child(2) {
    text-align: right;
}

table.level-chart th {
    border-bottom: 0.5px solid #DAE1E6;
}

table.level-chart td {
    border: 0;
}

/*
table.level-chart .level-1 {
  background: url(/mobile/imgs/level-01.png) no-repeat 10px/15%;
}
table.level-chart .level-2 {
  background: url(/mobile/imgs/level-02.png) no-repeat 10px/15%;
}
table.level-chart .level-3 {
  background: url(/mobile/imgs/level-03.png) no-repeat 10px/15%;
}
table.level-chart .level-4 {
  background: url(/mobile/imgs/level-04.png) no-repeat 10px/15%;
}
table.level-chart .level-5 {
  background: url(/mobile/imgs/level-05.png) no-repeat 10px/15%;
}
table.level-chart .level-6 {
  background: url(/mobile/imgs/level-06.png) no-repeat 10px/15%;
}
table.level-chart .level-7 {
  background: url(/mobile/imgs/level-07.png) no-repeat 10px/15%;
}
table.level-chart .level-8 {
  background: url(/mobile/imgs/level-08.png) no-repeat 10px/15%;
}
table.level-chart .level-9 {
  background: url(/mobile/imgs/level-09.png) no-repeat 10px/15%;
}
table.level-chart .level-10 {
  background: url(/mobile/imgs/level-10.png) no-repeat 10px/15%;
}
table.level-chart .level-11 {
  background: url(/mobile/imgs/level-11.png) no-repeat 10px/15%;
}*/
.level-01,
.level-1 {
    background: url("/mobile/imgs/level-01.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-02,
.level-2 {
    background: url("/mobile/imgs/level-02.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-03,
.level-3 {
    background: url("/mobile/imgs/level-03.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-04,
.level-4 {
    background: url("/mobile/imgs/level-04.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-05,
.level-5 {
    background: url("/mobile/imgs/level-05.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-06,
.level-6 {
    background: url("/mobile/imgs/level-06.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-07,
.level-7 {
    background: url("/mobile/imgs/level-07.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-08,
.level-8 {
    background: url("/mobile/imgs/level-08.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-09,
.level-9 {
    background: url("/mobile/imgs/level-09.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-10 {
    background: url("/mobile/imgs/level-10.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-11 {
    background: url("/mobile/imgs/level-11.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-12 {
    background: url("/mobile/imgs/level-12.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-13 {
    background: url("/mobile/imgs/level-13.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-14 {
    background: url("/mobile/imgs/level-14.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-15 {
    background: url("/mobile/imgs/level-15.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-16 {
    background: url("/mobile/imgs/level-16.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-17 {
    background: url("/mobile/imgs/level-17.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-18 {
    background: url("/mobile/imgs/level-18.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-19 {
    background: url("/mobile/imgs/level-19.png") no-repeat left center;
    background-size: 26px 26px;
}

.level-20 {
    background: url("/mobile/imgs/level-20.png") no-repeat left center;
    background-size: 26px 26px;
}

.modal[data-id="menu-list-popup"] .nav-link li > a {
    position: relative;
    display: block;
    padding: 10px 5px 10px 40px;
    font-size: 0.875rem;
}

.modal[data-id="menu-list-popup"] .nav-link li > a.level-all::before {
    content: "\f648";
    position: absolute;
    top: 50%;
    left: 1px;
    font-family: "Font Awesome 6 Pro";
    transform: translateY(-50%);
    font-size: 26px;
}

.card-banner-1.section {
    border: 0;
    margin-bottom: 0;
}

.contents-ranking .card-banner-1.section {
    /* padding-bottom: 0; */
    border-bottom: 1px solid #DAE1E6;
}

.contents-ranking .card-banner-1.section + .card-banner-1.section {
    padding-bottom: 10px;
    border-bottom: 0;
    margin: 0;
}

.section .title {
    font-weight: 700;
    text-align: left;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -0.1em;
    color: #333333;
}

.section .paragraph {
    font-weight: 400;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: -0.1em;
    color: #777777;
}

.sorting-nav .container label {
    font-size: 12px;
}

.btn-default-line.active,
.sorting-nav .btn-check:checked + .btn-default-line {
    background: #F0F6FE;
    color: #1983DF;
    border-color: #1983DF;
    font-weight: 700;
}

.cranking-list.my-items .my-item {
    padding-left: 90px;
    padding-bottom: 12px;
}

.cranking-list.my-items .my-item .cnt,
.cranking-list.my-items .my-item .cnt > span {
    font-size: 14px;
}

.cranking-list.my-items .my-item .cnt,
.cranking-list.my-items .my-item .grade,
.cranking-list.my-items .my-item .profile-photo,
.cranking-list.my-items .my-item .ranking {
    position: absolute;
    top: 20px;
}

.cranking-list.my-items .my-item .title {
    margin-top: 10px;
    font-weight: 400;
}

.cranking-list.my-items .my-item .title span {
    color: #999999;
}

.cranking-list.my-items .my-item .ranking {
    top: 23px;
    left: 0;
    color: #777777;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    width: 25px;
    text-align: center;
}

.cranking-list.my-items .my-item .profile-photo {
    left: 31px;
}

.grade-icon.lv01 {
    background-image: url("/mobile/imgs/level-01.png");
}

.grade-icon.lv02 {
    background-image: url("/mobile/imgs/level-02.png");
}

.grade-icon.lv03 {
    background-image: url("/mobile/imgs/level-03.png");
}

.grade-icon.lv04 {
    background-image: url("/mobile/imgs/level-04.png");
}

.grade-icon.lv05 {
    background-image: url("/mobile/imgs/level-05.png");
}

.grade-icon.lv06 {
    background-image: url("/mobile/imgs/level-06.png");
}

.grade-icon.lv07 {
    background-image: url("/mobile/imgs/level-07.png");
}

.grade-icon.lv08 {
    background-image: url("/mobile/imgs/level-08.png");
}

.grade-icon.lv09 {
    background-image: url("/mobile/imgs/level-09.png");
}

.grade-icon.lv10 {
    background-image: url("/mobile/imgs/level-10.png");
}

.grade-icon.lv11 {
    background-image: url("/mobile/imgs/level-11.png");
}

.grade-icon.lv12 {
    background-image: url("/mobile/imgs/level-12.png");
}

.grade-icon.lv13 {
    background-image: url("/mobile/imgs/level-13.png");
}

.grade-icon.lv14 {
    background-image: url("/mobile/imgs/level-14.png");
}

.grade-icon.lv15 {
    background-image: url("/mobile/imgs/level-15.png");
}

.grade-icon.lv16 {
    background-image: url("/mobile/imgs/level-16.png");
}

.grade-icon.lv17 {
    background-image: url("/mobile/imgs/level-17.png");
}

.grade-icon.lv18 {
    background-image: url("/mobile/imgs/level-18.png");
}

.grade-icon.lv19 {
    background-image: url("/mobile/imgs/level-19.png");
}

.grade-icon.lv20 {
    background-image: url("/mobile/imgs/level-20.png");
}

.contents-ranking .grade-icon,
.my-items .my-item .grade-icon.lv01,
.my-items .my-item .grade-icon.lv02,
.my-items .my-item .grade-icon.lv03,
.my-items .my-item .grade-icon.lv04,
.my-items .my-item .grade-icon.lv05,
.my-items .my-item .grade-icon.lv06,
.my-items .my-item .grade-icon.lv07,
.my-items .my-item .grade-icon.lv08,
.my-items .my-item .grade-icon.lv09,
.my-items .my-item .grade-icon.lv1,
.my-items .my-item .grade-icon.lv10,
.my-items .my-item .grade-icon.lv11,
.my-items .my-item .grade-icon.lv12,
.my-items .my-item .grade-icon.lv13,
.my-items .my-item .grade-icon.lv2,
.my-items .my-item .grade-icon.lv3,
.my-items .my-item .grade-icon.lv4,
.my-items .my-item .grade-icon.lv5,
.my-items .my-item .grade-icon.lv6,
.my-items .my-item .grade-icon.lv7,
.my-items .my-item .grade-icon.lv8,
.my-items .my-item .grade-icon.lv9,
.my-items .my-item .profile-photo.sm {
    width: 26px;
    height: 26px;
}

.cranking-list.my-items .my-item .grade {
    left: 60px;
}

.cranking-list.my-items .my-item .grade span {
    display: none;
}

.cranking-list.my-items .my-item .cnt,
section.best .cnt {
    top: 15px;
    right: 5px;
}

.cranking-list.my-items .my-item .clan {
    font-weight: 400;
    margin-right: 3px;
}

.cranking-list.my-items .my-item .ranking.n1-place {
    color: #1983DF;
}

.cranking-list.my-items .my-item .ranking.n2-place {
    color: #F64356;
}

.cranking-list.my-items .my-item .ranking.n3-place {
    color: #1FB99F;
}

.cranking-list .my-item .clarification {
    position: relative;
    left: -62px;
    margin-top: 8px;
}

.cranking-list .my-item .new-line {
    position: relative;
    text-align: right;
}

.cranking-list .my-item .button {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    border-color: #F64356;
    color: #F64356;
}

.cranking-list .my-item .button.chat-room {
    position: relative;
    top: -3px;
    margin-left: 22px;
}

.cranking-list .my-item .button.chat-room.deactive {
    border-color: #DAE1E6;
    color: #DAE1E6;
}

.contents-sections {
    background: #EAEEF3;
    padding-bottom: 10px;
}

.lv-icon {
    background-size: 26px 26px;
}

#user-ranking-list.my-items {
    border-top: 0;
}

#user-ranking-list.cranking-list.my-items .my-item .cnt {
    font-size: 11px;
    top: 30px;
    right: unset;
    left: 60px;
    color: #1FB99F;
}

#user-ranking-list.cranking-list.my-items .my-item {
    padding-left: 60px;
}

#user-ranking-list.cranking-list.my-items .my-item .grade {
    left: 28px;
}

#user-ranking-list.cranking-list.my-items .my-item .cnt > span {
    color: #1FB99F;
}

#user-ranking-list.cranking-list.my-items .my-item .title {
    margin-top: 0;
}

#user-ranking-list.cranking-list.my-items .my-item .grade,
#user-ranking-list.cranking-list.my-items .my-item .profile-photo,
#user-ranking-list.cranking-list.my-items .my-item .ranking {
    top: 17px;
}

#user-ranking-list.cranking-list .my-item .button.chat-room {
    top: -10px;
}

#clan-ranking-list.cranking-list.my-items .my-item .grade,
#clan-ranking-list.cranking-list.my-items .my-item .profile-photo,
#clan-ranking-list.cranking-list.my-items .my-item .ranking {
    top: 12px;
}

#clan-ranking-list.cranking-list.my-items .my-item .title {
    margin-top: 3px;
}

#clan-ranking-list.cranking-list.my-items .my-item .cnt,
.cranking-list.my-items .my-item .cnt > span {
    color: #333333;
}

#clan-ranking-list.cranking-list.my-items .my-item .title span {
    color: #333333;
}

.cranking-list.my-items .my-item .profile-photo.clan-level {
    left: 60px;
}

.box {
    border: 0.5px solid #1983DF;
    padding: 10px;
}

.contents-ranking .clarification {
    font-size: 11px;
    color: #999999;
}

section {
    position: relative;
}

section.best .cnt {
    position: absolute;
    top: 36px;
}

#clan-ranking-list.my-items {
    border: 0;
}

section.best {
    position: relative;
}

section.best .title,
section.best h5 {
    font-weight: 700;
    margin-bottom: 6px;
}

section.best .title {
    position: absolute;
    left: 70px;
    margin-top: 5px;
}

section.best article.clarification {
    margin-top: 3px;
}

section.best .profile-photo img,
section.best .profile-photo.sm {
    width: 26px;
    height: 26px;
}

section.best .cnt {
    font-size: 14px;
}

.profile-container {
    text-align: center;
    line-height: 22px;
    background-color: #FFFFFF;
}

.profile-item.title {
    height: 26px;
}

.profile-item.title .clan-level {
    padding-left: 20px;
    background-position-y: top;
    background-size: contain;
}

.profile-item:not(:first-child) {
    padding: 0 15px;
}

.profile-container article {
    padding: 0;
}

.profile-item .link-box {
    margin-bottom: 0;
}

.circle img {
    border-radius: 50%;
    border: 2px solid #DAE1E6;
}

.profile-item.circle {
    background-color: var(--gray-bg);
    background-image: url("/mobile/imgs/avatar.png");
    background-size: cover;
    border-radius: 50%;
    border: 1px solid var(--light-trp-color);
    background-position: center center;
    background-repeat: no-repeat;
    width: 98px;
    height: 98px;
    padding: 0;
    margin: 10px auto;
    overflow: hidden;
}

.profile-item.circle img {
    width: 98px;
    height: 98px;
}

.profile-item.title {
    font-size: 14px;
}

.profile-item.sub {
    font-size: 11px;
    color: #777777;
}

.profile-item .link-box {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
}

.profile-item ul.dash-wrapper {
    color: #999999;
}

.profile-item ul.dash-wrapper span {
    font-size: 13px;
    color: #333333;
}

.clan-room {
    display: inline-block;
    height: 26px;
    margin-right: 3px;
    padding-left: 28px;
    padding-top: 3px;
    margin-left: 3px;
    background-size: 26px 26px;
}

span.profile-banner {
    position: relative;
    display: block;
    background-image: url(/mobile/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;
}

span.profile-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

span.profile-image {
    display: inline-block;
    border-radius: 50%;
    width: 49px;
    height: 49px;
    background-color: var(--gray-bg) !important;
    position: relative;
    left: 0;
    background-image: url(/mobile/imgs/avatar.png);
    background-repeat: no-repeat;
    background-size: cover;
}

span.profile-image img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

span.profile-image.small {
    width: 26px;
    height: 26px;
}

section.list-container {
    background: #FFFFFF;
    padding: 0 15px;
    letter-spacing: -0.5px;
}

section.list-container ol,
section.list-container ul {
    border-top: 0.5px solid #333333;
    padding-bottom: 23px;
}

section.list-container li {
    position: relative;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #DAE1E6;
    font-size: 13px;
}

section.list-container.fit ol,
section.list-container.fit ul {
    padding-bottom: 0;
}

section.list-container.fit li:nth-last-child(1) {
    border-bottom: 0;
}

section.list-container .title {
    font-weight: 700;
    font-size: 16px;
    padding: 14px 0;
}

section.list-container li .title {
    display: flex;
    font-weight: 400;
    font-size: 13px;
    padding: 0;
    overflow: hidden;
}

section.list-container li .title a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

section.list-container li .sub {
    width: 100%;
    height: 18px;
    overflow: hidden;
    color: #999999;
    font-size: 11px;
}

section.list-container li .condition {
    color: #777777;
    font-size: 12px;
}

section.list-container .title.more {
    position: relative;
}

section.list-container .title.more::after {
    content: '\2b';
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    right: 0;
    font-size: 12px;
    font-weight: 400;
    top: 50%;
    transform: translateY(-50%);
}

section.list-container .sub-title {
    font-size: 13px;
    font-weight: 400;
}

section.list-container .sub-title + p {
    font-size: 11px;
    color: #777777;
    margin-bottom: 10px;
}

.c777 {
    color: #777777;
}

section.list-container.recent-posts .post .title {
    font-weight: 400;
    font-size: 13px;
    padding: 0;
}

.post .views::before {
    content: '\f06e';
    font-family: "Font Awesome 6 Pro";
    margin-right: 3px;
    font-weight: 900;
}

.post .likes::before {
    content: '\f164';
    font-family: "Font Awesome 6 Pro";
    margin-right: 3px;
    font-weight: 900;
}

.post p {
    color: #777777;
    font-size: 11px;
    margin-bottom: 0;
}

/* .post p span::after {
  content: '\e122';
  font-family: "Font Awesome 6 Pro";
  color: #000000;
  font-weight: 600;
  font-size: 3px;
  margin: 0 3px;
} */
.post p span:nth-child(4)::after {
    content: '';
}

.post .reply-numbers {
    color: #1983DF;
}

.post .reply-numbers:before {
    content: ' ';
}

.alarm:before {
    content: '\f0a1';
    font-family: "Font Awesome 6 Pro";
    color: #000000;
    font-weight: 900;
    font-size: 3px;
    margin: 0 3px;
}

.rolling-container .alarms {
    height: 30px;
    padding: 6px 18px 8px 8px;
    overflow: hidden;
    background: #F0F6FE;
}

.rolling-container .rolling-item,
.rolling-container .rolling-items {
    padding: 0;
}

.rolling-container .rolling-items {
    height: 16px;
    overflow: hidden;
}

.rolling-container .rolling-item {
    padding-left: 16px;
    font-size: 11px;
    letter-spacing: -0.1em;
    line-height: 16px;
    overflow: hidden;
}

.rolling-item::before {
    content: '\f027';
    font-family: "Font Awesome 6 Pro";
    color: #000000;
    font-weight: 900;
    margin-right: 5px;
}

.link-box.continue {
    background: #FFFFFF;
    color: #1983DF;
    border: 1px solid #1983DF;
}

.link-box.secession {
    background: #FFFFFF;
    color: #333333;
    border: 1px solid #DAE1E6;
}

.tabs .nav-wrapper.scroll {
    overflow-x: unset;
    border-left: 0;
}

.tabs .nav-wrapper > li {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.radio-tabs {
    width: 100%;
    padding-left: 1px;
}

.tabs.basic .radio-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}

.tabs.basic .btn {
    border: 1px solid #DAE1E6;
    height: 46px;
    line-height: 2.4;
    background: #F8F9FA;
}

.tabs.basic input[type="radio"]:checked + .btn {
    background-color: #013369;
    color: #FFFFFF;
}

.card .filters {
    background: #FFFFFF;
    padding: 8px 0;
    font-weight: 400;
    font-size: 12px;
}

.filters li {
    display: inline;
    margin-right: 7px;
}

.filters li a.check {
    color: #1983DF;
}

.filters li a.check::before {
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    margin-right: 3px;
}

.write.btn {
    position: absolute;
    bottom: 67px;
    right: 15px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #F64356;
    border: 0;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 2.5;
}

.search-panel {
    padding: 15px;
}

#board-write {
    padding-bottom: 12px;
}

section.list-container .filters li {
    display: inline;
    border-bottom: 0;
}

section.list-container ol.filters,
section.list-container ul.filters {
    border-top: 0;
}

#board-list .search-panel {
    padding: 15px 0;
}

#board-write .btn-group {
    display: flex;
}

#board-view .links {
    position: relative;
    width: 100%;
    padding: 14px 0;
}

#board-view a:nth-last-child(1) {
    position: absolute;
    right: 0;
}

.tabs .links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    align-items: center;
}

.tabs.basic .links li {
    background: #F8F9FA;
    line-height: 40px;
    border-top: 1px solid #DAE1E6;
    border-bottom: 1px solid #DAE1E6;
    border-right: 1px solid #DAE1E6;
    border-collapse: collapse;
    font-weight: 700;
    text-align: center;

}

.tabs.basic .links li:nth-last-child(1) {
    border-right: 0;
}

.tabs .links a {
    display: block;
    width: 100%;
    height: 100%;
}

.tabs.basic .links a.check {
    background: #013369;
    color: #FFFFFF;
}

section.list-container .card-banner-1 .title {
    padding: 0;
}

.card .card-banner-1 .link-box {
    margin-bottom: 0;
}

.abs {
    line-height: 16px;
    color: #777777;
    font-size: 11px;
}

.abs.controls {
    position: absolute;
    top: 10px;
    right: 0;
}

.abs .sub {
    display: block;
    padding: 0;
    text-align: right;
}

.abs .sub:nth-child(2) {
    line-height: 11px;
}

.abs span:nth-child(1) {
    margin-left: 3px;
}

.abs span:nth-child(1)::after {
    content: '·';
    margin: 0 3px;
}

section.list-container li .abs .sub {
    color: #F64356;
}

#clan_benefit_area section.list-container {
    padding: 0;
}

#clan_benefit_area section.list-container > .title {
    padding-left: 15px;
}

#clan_benefit_area section.list-container li {
    padding-left: 15px;
}

#clan_benefit_area section.list-container li article {
    display: grid;
    grid-template-columns: 50% 50%;
    place-items: right center;
}

#clan_benefit_area section.list-container li article .grid-item {
    align-items: center;
}

#clan_benefit_area section.list-container li article .grid-item:nth-last-child(1) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
}

#clan_benefit_area section.list-container li .title {
    font-weight: 700;
}

#clan_benefit_area section.list-container li .abs {
    right: 15px;
}

.my-item .cnt span.plus {
    color: var(--point-color);
}

.my-item .cnt span.minus {
    color: #F64356;
}

.my-clan-level {
    background: #F8ECEC;
}

.my-clan-level .title::after {
    content: '현재레벨';
    background: #F64356;
    color: #FFFFFF;
    border: 0.5px solid #F64356;
    border-radius: 10px;
    font-size: 9px;
    padding: 0 5px 12px 3px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
}

.clan-level.level-1 {
    background-image: url("/mobile/imgs/clan_1.png");
}

.clan-level.level-2 {
    background-image: url("/mobile/imgs/clan_2.png");
}

.clan-level.level-3 {
    background-image: url("/mobile/imgs/clan_3.png");
}

.clan-level.level-4 {
    background-image: url("/mobile/imgs/clan_4.png");
}

.clan-level.level-5 {
    background-image: url("/mobile/imgs/clan_5.png");
}

.clan-level.level-6 {
    background-image: url("/mobile/imgs/clan_6.png");
}

.clan-level.level-7 {
    background-image: url("/mobile/imgs/clan_7.png");
}

.clan-level.level-8 {
    background-image: url("/mobile/imgs/clan_8.png");
}

.clan-level.level-9 {
    background-image: url("/mobile/imgs/clan_9.png");
}

.clan-level.level-10 {
    background-image: url("/mobile/imgs/clan_10.png");
}

.clan-level.level-11 {
    background-image: url("/mobile/imgs/clan_11.png");
}

.clan-level.level-12 {
    background-image: url("/mobile/imgs/clan_12.png");
    background-repeat: no-repeat;
}

.clan-level.level-13 {
    background-image: url("/mobile/imgs/clan_13.png");
    background-repeat: no-repeat;
}

.clan-level.level-14 {
    background-image: url("/mobile/imgs/clan_14.png");
    background-repeat: no-repeat;
}

.clan-level.level-15 {
    background-image: url("/mobile/imgs/clan_15.png");
    background-repeat: no-repeat;
}

.clan-level.level-16 {
    background-image: url("/mobile/imgs/clan_16.png");
    background-repeat: no-repeat;
}

.clan-level.level-17 {
    background-image: url("/mobile/imgs/clan_17.png");
    background-repeat: no-repeat;
}

.clan-level.level-18 {
    background-image: url("/mobile/imgs/clan_18.png");
    background-repeat: no-repeat;
}

.clan-level.level-19 {
    background-image: url("/mobile/imgs/clan_19.png");
    background-repeat: no-repeat;
}

.clan-level.level-20 {
    background-image: url("/mobile/imgs/clan_20.png");
    background-repeat: no-repeat;
}

.clan-level.level-21 {
    background-image: url("/mobile/imgs/clan_21.png");
    background-repeat: no-repeat;
}

.clan-level.level-22 {
    background-image: url("/mobile/imgs/clan_22.png");
    background-repeat: no-repeat;
}

.clan-level.level-23 {
    background-image: url("/mobile/imgs/clan_23.png");
    background-repeat: no-repeat;
}

.clan-level.level-24 {
    background-image: url("/mobile/imgs/clan_24.png");
    background-repeat: no-repeat;
}

.clan-level.level-25 {
    background-image: url("/mobile/imgs/clan_25.png");
    background-repeat: no-repeat;
}

.clan-level.level-26 {
    background-image: url("/mobile/imgs/clan_26.png");
    background-repeat: no-repeat;
}

.clan-level.level-27 {
    background-image: url("/mobile/imgs/clan_27.png");
    background-repeat: no-repeat;
}

.clan-level.level-28 {
    background-image: url("/mobile/imgs/clan_28.png");
    background-repeat: no-repeat;
}

.clan-level.level-29 {
    background-image: url("/mobile/imgs/clan_29.png");
    background-repeat: no-repeat;
}

.clan-level.level-30 {
    background-image: url("/mobile/imgs/clan_30.png");
    background-repeat: no-repeat;
}

#clan_setting_area article .title {
    margin-bottom: 7px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: -0.1em;
    color: #777777;
}

#clan_setting_area article .title + p {
    font-size: 13px;
    margin-bottom: 10px;
}

#clan_setting_area article .result > span,
#clan_setting_area article .result button {
    padding: 7.5px 10px;
    background: #EFEFEF;
    border: 0.5px solid #DAE1E6;
    font-size: 12px;
}

#clan_setting_area article .result button {
    background: #FFFFFF;
    font-size: 12px;
}

#clan_setting_area .grid-c {
    display: flex;
    grid-template-columns: auto 1fr;
    place-items: left center;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
}

#clan_setting_area .grid-c .grid-item {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: -0.1em;
    color: #999999;
}

#clan_setting_area .grid-c .grid-item:nth-child(2) a {
    font-size: 11px;
    text-decoration-line: underline;
    color: #333333;
    display: block;
    margin-bottom: 5px;
}

.card article {
    padding-bottom: 0;
    /* font-size: 0.875rem; */
}

.card article p {
    margin-bottom: 0;
}

.nav-basic-menu {
    background: #013369;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 15px;
}

.nav-basic-menu li {
    color: #FFFFFF;
    display: inline;
    margin-right: 18px;
}

.nav-basic-menu li.show {
    font-weight: 700;
}

#notification .header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    padding: 12px 15px 0;
}

#notification .header .title {
    font-size: 12px;
    font-weight: 400;
    color: #777777;
}

#notification .header .del {
    text-align: right;
    font-size: 12px;
}

#notification .panel {
    border: 0;
}

#notification .panel-body {
    padding-top: 0;
}

.my-items.no-border .my-item {
    border: 0;
}

.my-items.full .my-item {
    padding-left: 0;
}

#notification .my-items.full .my-item .title {
    font-size: 12px;
    font-weight: 400;
}

#notification .my-items.full .my-item .period span:nth-last-child(1)::before {
    content: '·';
    margin: 0 3px;
}

#my_notes > section {
    margin-top: 10px;
    border-top: 1px solid #DAE1E6;
}

#my_notes > section .post-title {
    margin: 10px 0;
    font-size: 16px;
    letter-spacing: -0.1em;
    color: #333333;
    font-weight: 400;
}

#my_notes > section .post-meta {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: -0.1em;
    color: #777777;
    font-weight: 400;
}

dl.define-list {
    overflow: hidden;
}

.define-list dt {
    float: left;
    width: 16%;
    margin: 0;
}

.define-list dd {
    float: right;
    width: 83%;
    margin: 0;
    color: #333333;
}

.post-detail {
    margin: 10px 0;
    padding: 16px 0;
    border-top: 1px solid #DAE1E6;
    border-bottom: 1px solid #DAE1E6;
    font-weight: 400;
    font-size: 13px;
    line-height: 21px;
    text-align: justify;
    letter-spacing: -0.1em;
}

.post .footer,
.post .header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    padding: 12px 15px 0;
    margin: 10px 0 20px;
}

.post .footer div:nth-child(2),
.post .header div:nth-child(2) {
    text-align: right;
}

.post .box {
    padding: 8.5px 14px;
    border: 1px solid #D2D2D2;
}

.post p.post-detail {
    color: #333333;
    font-size: 13px;
}

.post .footer {
    margin-top: 0;
}

.post .panel-body {
    padding-bottom: 0;
}

.go-mobile-list li {
    padding: 10px 20px 10px 60px;
    border-bottom: 1px solid #DAE1E6;
}

dl.no-title dt {
    display: none;
}

dl.no-title dd {
    display: inline;
}

.go-mobile-list.thumb-list .thumbnail-box {
    top: 15px;
}

.go-mobile-list.thumb-list li article {
    padding-bottom: 0;
}

.go-mobile-list.thumb-list li .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.go-mobile-list.thumb-list li .sub-line {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 21px;
    color: var(--sub-text02);
}

.go-mobile-list.thumb-list li dt + dd {
    margin-right: 3px;
}

.go-mobile-list.thumb-list li dt.dot + dd::after {
    content: "\2e";
    font-family: "Font Awesome 6 Pro";
    position: relative;
    top: -3px;
    right: 0;
    font-weight: 900;
    margin-left: 3px;
}

.go-mobile-list.thumb-list li dt.views + dd::before {
    content: "\f06e";
    font-family: "Font Awesome 6 Pro";
    position: relative;
    right: 0;
    font-weight: 900;
    margin-right: 3px;
}

.go-mobile-list.thumb-list li dt.likes + dd::before {
    content: "\f164";
    font-family: "Font Awesome 6 Pro";
    position: relative;
    right: 0;
    font-weight: 900;
    margin-right: 3px;
}

.go-mobile-list.thumb-list li .game-name + dd {
    font-size: 10px;
    font-weight: 300;
    padding: 1px 5px;
    background-color: var(--hover-color);
    border-radius: 5px;
    color: white;
    text-align: center;
}

.go-mobile-list.thumb-list li .comments + dd {
    position: absolute;
    top: 10px;
    right: 0;
    color: var(--point-color);
    font-size: 0.938rem;
}

.go-mobile-list.thumb-list li .comments + dd::before {
    content: "(";
}

.go-mobile-list.thumb-list li .comments + dd::after {
    content: ")";
}

#board-forum .list-sorting {
    font-size: 0.75rem;
}

#board-forum .list-sorting li {
    padding: 0 0.1rem;
}

/* 게임 */

table.contour {
    min-width: 600px;
    border: 0;
}

div.center {
    text-align: center;
}

.report .tab-content {
    height: inherit;
}

.report .go-graph-report {
    border: 0;
}

.card .mix-report,
.card .panel-body,
.card .panel-header,
.card .round_list,
.card .tab-content {
    background: #FFFFFF;
}

.dateSelect a.prev {
    display: inline-block;
    background-image: url("/mobile/imgs/last_date.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: top center;
    width: 20px;
    height: 20px;
    text-indent: -99999px;
    margin-right: 20px;
}

.dateSelect .next {
    display: inline-block;
    background-image: url("/mobile/imgs/next_date.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: top center;
    width: 20px;
    height: 20px;
    text-indent: -99999px;
    margin-left: 20px;
}

.dateSelect .dateNumber {
    font-size: 16px;
}

.go-live .filterSearch {
    margin-bottom: 0;
    padding: 10px;
    background: #F0F6FE;
}

.card .max_min_data table {
    min-width: 640px;
    background-color: #FFFFFF;
}

.card .max_min_data.weekend table {
    min-width: 860px;
}

.card .max_min_data {
    overflow-x: scroll;
}

/* pc common css 인용 */

.analysis .go-select {
    min-width: 80px;
    margin-bottom: 0;
}

.analysis #mode-container.go-select {
    min-width: 130px;
    margin-bottom: 0;
}

.pattern #mode-container.go-select {
    min-width: 140px;
}

.analysis .select-selected,
.pattern .select-selected {
    font-size: 12px;
    text-align: left;
}

.analysis .form-group {
    margin-bottom: 0;
}

.analysis .inline-field {
    padding-left: 7px;
}

.analysis .filterSearch .btn-group > .btn {
    margin-right: 0;
    border-radius: 0;
    padding: 5px;
}

.analysis .filterSearch .btn-group {
    width: 300px;
    margin-left: 8px;
}

.analysis .btn-group > .btn-check:checked + .btn {
    color: #FFFFFF;
}

.analysis .panel-header > p {
    margin-bottom: 6px;
}

.analysis .panel-header p > strong {
    font-weight: 400;
    font-size: 14px;
}

.bar_graph_area > div {
    /*overflow: hidden;*/
}

#forex .bar_graph_area {
    margin-top: 20px;
}

.btn-plus span {
    display: block;
    background-image: url("/mobile/imgs/pattern_plus.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
}

.btn-minus span {
    display: block;
    background-image: url("/mobile/imgs/pattern_minus.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
}

.pattern #chartTitle {
    font-size: 13px;
    color: #777777;
    font-weight: 400;
    word-wrap: break-word;
    word-break: keep-all;
}

.pattern #chartTitle strong {
    font-weight: 700;
    color: #333333;
}

.title .classification {
    padding: 3px;
    background: var(--gray-bg);
    border-radius: 3px;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.1em;
    color: #777777;
}

.profile-item .dash-wrapper li {
    color: #333333;
    font-weight: 400;
    align-items: center;
}

.profile-item .dash-wrapper li span {
    font-weight: 700;
    color: #333333;
    font-size: 0.938rem;
}

#incarceration_regulations table.contour {
    min-width: unset;
    border-left: 1px solid #DAE1E6;
    border-top: 1.5px solid #333333;
}

.history-list li {
    border-bottom: 0.5px solid #DAE1E6;
    padding: 10px 0;
    color: #333333;
    font-weight: 400;
}

.history-list article {
    padding: 0;
    font-size: 11px;
    position: relative;
}

.history-list article p {
    margin-bottom: 0;
}

.history-list article .title {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}

.history-list article .channel,
.history-list article .date,
.history-list article .ip {
    color: #777777;
}

.history-list article .date {
    position: absolute;
    top: 0;
    right: 0;
}

.history-list article .comment {
    padding: 3px 0;
    font-size: 13px;
}

section.information {
    padding: 0;
}

.information h3 {
    font-size: 1rem;
    margin-bottom: 15px;
}

.information article {
    position: relative;
    padding: 0 0 0 25px;
    margin-bottom: 15px;
}

.information article::before {
    content: '\f00c';
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 1rem;
}

.information article p {
    margin-bottom: 5px;
    font-size: 0.75rem;
    color: #777777;
    letter-spacing: -0.1em;
    word-break: keep-all;
}

.information article > p:nth-child(1) {
    margin-bottom: 10px;
    color: #333333;
    margin-bottom: 4px;
}

.information .caution-red {
    margin-top: 20px;
    margin-bottom: 17px;
    padding-top: 12px;
    border-top: 0.5px solid #DAE1E6;
    color: #F64356;
}

.information input[id="box1"] {
    position: relative;
    top: 1.5px;
}

.information label[for="box1"] {
    position: relative;
    top: -1.5px;
}

button.link-box {
    margin: 20px 0;
    width: 100%;
    background: #333333;
    padding: 10px 12px;
    color: #FFFFFF;
}

/* 채팅규정 */

.open_chat_guide {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    font-size: 0.688rem;
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    cursor: pointer;
}

.open_chat_guide.active {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    width: 280px;
    padding: 1rem;
    z-index: 10;
    border-radius: 8px;
    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_guide_txt {
    display: none;
}

.open_chat_guide .chat_close {
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 1.2;
}

.open_chat_guide.active p {
    display: none;
}

.open_chat_guide.active .chat_guide_txt {
    display: block;
}

.inline-field.chat-list {
    gap: 5px;
    margin: 5px;
}

.inline-field.chat-list .go-select {
    margin-right: 0;
    width: 100%;
}

.btn.add-chat,
.btn.my-chat {
    position: fixed;
    width: 62px;
    height: 62px;
    background: #F64356;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 2.5;
    opacity: 0.8;
    z-index: 10;
    transition: all 0.2s ease;
}

.btn.my-chat {
    right: 10px;
    bottom: 60px;
    padding: 0.375rem 0;
    line-height: 2.1;
}

.btn.add-chat {
    right: 10px;
    bottom: 60px;
}

.btn.my-chat span {
    font-size: 0.75rem;
    text-align: center;
}

/* 참여자 */
.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 .id_name {
    float: left;
    width: 200px;
}

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

.entrant-list .entrant-user .controlNav {
    float: right;
}

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

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

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

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

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

.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: 35px;
    object-fit: cover;
}

.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);
}

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

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

.id_level .m-lev {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    flex-shrink: 0;
}

.id_name a {
    font-size: 15px;
}

.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;
}

/*Bottom Slide Box*/
.bottom_sheet {
    /* display: flex; */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #FFFFFF;
    flex-direction: column;
    align-items: center;
    transition-duration: 0.5s;
    -webkit-box-shadow: 0 -4px 14px 1px rgba(0, 0, 0, 0.49);
    box-shadow: 0 -4px 14px 1px rgba(0, 0, 0, 0.49);
    z-index: 41;
}

.bottom_sheet .title-flex {
    border-bottom: 1px solid var(--border-color);
}

.bottom_sheet .title {
    padding: 10px 20px;
    text-align: left;
}

.bottom_sheet .title p {
    font-weight: 700;
    font-size: 1.1rem;
}

.bottom_sheet .title + .q-board-close {
    font-size: 2rem;
    padding: 5px 15px 5px 10px;
}

.bottom_sheet .q-chat-box {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 0;
    overflow: auto;
    height: 100%;
}


.bottom_sheet .q-board-box {
    overflow: auto;
}

#openchatSheet.bottom_sheet,
#patternSheet.bottom_sheet,
#statisticsSheet.bottom_sheet {
    top: 120%;
    display: none;
}

#openchatSheet.bottom_sheet.active {
    top: 30%;
    height: 70%;
    bottom: 0;
    display: block;
}

#patternSheet.bottom_sheet.active,
#statisticsSheet.bottom_sheet.active {
    top: auto;
    bottom: 0;
    display: block;
}

#patternSheet.bottom_sheet {
    bottom: -120%;
    display: none;
}

#patternSheet.bottom_sheet.active {
    bottom: 0;
    height: max-content;
    display: block;
}

#bottomSheet.bottom_sheet {
    bottom: -120%;
}

#bottomSheet.bottom_sheet.active {
    bottom: 0;
}

@media (max-width: 419.8px) {
    .graph-header ul {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 319.8px) {
    .brand a {
        width: 80px;
    }

    .go-header .my-nav li > a > i {
        font-size: 16px;
    }

    /* myhome */

    .my-home .dash-wrapper.money {
        display: block;
    }

    .my-home .dash-wrapper.money > div {
        display: flex;
        justify-content: space-between;
        text-align: left;
        padding: 5px;
    }

    .my-home .dash-wrapper > div > span.badge {
        margin-bottom: 0 !important;
    }

    ul.dash-wrapper {
        display: block;
    }

    ul.dash-wrapper li {
        position: relative;
        text-align: left;
        padding: 5px 130px 5px 7px;
    }

    span.badge {
        margin-bottom: 0;
    }

    ul.dash-wrapper li span.num {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 7px;
        font-size: 1.25rem;
    }

    /* userhome */
    .user-home ul.dash-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16.667%, auto));
    }

    .user-home ul.dash-wrapper li {
        border-bottom: 1px solid var(--border-color);
        text-align: center;
    }

    .user-home ul.dash-wrapper li:nth-of-type(1),
    .user-home ul.dash-wrapper li:nth-of-type(2),
    .user-home ul.dash-wrapper li:nth-of-type(3) {
        grid-column: auto / span 2;
    }

    .user-home ul.dash-wrapper li:nth-of-type(3) {
        border-right: none;
    }

    .user-home ul.dash-wrapper li:nth-of-type(4),
    .user-home ul.dash-wrapper li:nth-of-type(5) {
        grid-column: auto / span 3;
        border-bottom: none;
    }

    .title-flex {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

#twc-chat {
    position: fixed;
    bottom: 70px;
    right: 15px;
    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 {
    position: relative;
    display: block;
}

#twc-chat #chat-icon img {
    cursor: pointer;
    border: 0;
    width: 60px;
    height: 60px;
}

#twc-chat #chat-icon .close {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--color-white);
    color: var(--main-text);
    width: 23px;
    height: 23px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0.15rem 0.3rem 0 rgb(0 0 0 / 20%);
}

#twc-chat #chat-icon .close:after {
    font-size: 1.0rem;
}

/*landscape*/
.landscape-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: #013369;
    z-index: 10000;
    display: none;
}

.landscape-overlay::after {
    content: "";
    background-image: url(/mobile/imgs/popup/mobile-01.png);
    background-size: 434px;
    background-position: 0px 326px;
    background-repeat: no-repeat;
    width: 434px;
    height: 906px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    z-index: 10;
    opacity: 10%;
}


.landscape-overlay .main_landscape_pop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 25px;
    height: 100%;
}

.landscape-overlay .main_landscape_pop .info-body {
    display: block;
}


.landscape-overlay .main_landscape_pop .rotate-p {
    width: 100px;
    animation: rotate 2s infinite
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

.landscape-overlay .main_landscape_pop .info-letter {
    color: #fff;
    font-size: 14px;
    text-align: center;
}

@media all and (orientation: landscape) and (min-width: 716px) {
    .landscape-overlay {
        display: block;
    }

    body {
        overflow: hidden;
    }
}

.btn.disabled.collection {
    background-color: #95a4b3;
    border: none;
}

.btn.collection:hover {
    border: none;
}

/* 게시판 Toggle Switch */
.my-board {
    display: flex;
    justify-content: flex-end;
}

.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);
}

/*게시판 new*/
.go-bbs.attendance .title h6 {
    word-break: break-all;
}

.go-bbs.attendance .title p {
    overflow: unset;
    white-space: unset;
    text-overflow: unset;
}

.go-bbs.attendance .title.new {
    position: relative;
}

.go-bbs.attendance .title.new p:after {
    content: "N";
    margin-left: 5px;
    background: var(--color-red);
    color: #fff;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
    padding: 0 3px 1px;
    border-radius: 5px;
}


.board-list-new:after {
    content: 'N';
    box-sizing: border-box;
    /*width: 13px;*/
    /*height: 14px;*/
    padding: 0 3px 1px;
    background-color: var(--color-red);
    border-radius: 5px;
    color: #ffffff;
    font-size: 9px;
    margin-left: 5px;
    /*display: inline-block;*/
    vertical-align: sub;
}

.board-list-title-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* width: 95%; */
}

.board-list-title-wrap a {
    max-width: 62%;
}

.board-list-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    font-size: 13px;
}

.ml4 {
    margin-left: 4px;
}

.mb4 {
    margin-bottom: 4px;
}

.attendance-pop {
    border-top: 10px solid #f4f4f4;
}

.attendance-pop img {
    width: 100%;
}

/**/
.go-livescore .go-select.border-none {
    min-width: 120px;
}

.go-livescore .list-sorting {
    font-size: 0.8rem;
}

.go-livescore .list-sorting li {
    padding: 0 0.2rem;
}

.go-livescore .go-bbs .thumb-list li a {
    padding: 15px 0 15px 0px;
}

.go-livescore .go-bbs .game-info {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.go-livescore .webzine-list .game-info span {
    margin-right: 0;
}

.go-livescore .webzine-list .game-info .team-name span {
    color: #000;
}

.go-livescore ul.webzine-list li .comment {
    color: var(--point-color);
}

.go-livescore .go-bbs .game-category {
    font-size: 11px;
    color: #035DB7;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.go-livescore .go-bbs .game-info .team-name span {
    max-width: 135px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}

.go-livescore .go-bbs .basic-badge {
    color: #333;
    font-weight: 600;
    font-size: 12px;
}

.go-livescore .go-bbs .victory-badge {
    display: inline-block;
    color: #fff;
    background-color: #05529E;
    border-radius: 5px;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0;
    width: 56px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

.go-livescore .go-bbs .analyze-badge {
    display: inline-block;
    background-color: #d9d3cc;
    border-radius: 5px;
    font-size: 11px;
    width: 56px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0;
    color: #333;
}

.go-livescore .go-bbs .game-info .game-category.basic .category-txt span {
    color: #333;
    font-weight: 600;
}

.go-livescore .go-bbs .game-info .game-category .category-txt span {
    color: #035DB7;
    font-weight: 600;
}

.go-livescore .go-bbs .game-info .game-category .team-name span {
    color: #333;
    font-weight: 600;
}

.go-livescore .go-bbs .game-info .game-category time {
    color: #333333;
    font-weight: normal;
}

.go-livescore ul.webzine-list li .comment {
    color: #025951;
}

/*event-board*/
.event-board .list-sorting {
    font-size: 0.8rem;
}

.event-board .list-sorting li {
    padding: 0 0.2rem;
}

.event-board.go-bbs .thumb-list li a {
    padding: 15px 0 15px 0px;
}

.event-board.go-bbs .thumb-list .event-category {
    color: var(--point-color);
}

.event-board.go-bbs .board-footer {
    padding: 0;
}

/*이미지 클릭 팝업*/
.img-pop-wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0);
    z-index: 10000;
    padding: 10px;
}

.img-pop-wrap i {
    color: #fff;
    font-size: 30px;
    display: block;
    text-align: right;
}

.img-pop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.img-pop img {
    min-width: 250px;
}

/*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;
}

.dh-pwg_blist {
    display: flex;
    gap: 8px;
}

.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;
}