@charset "utf-8";

.hint {
    position: relative;
    padding-left:20px;
    font-size: 12px;
    color:var(--text-sub-color);
    margin-top: 5px;    
}
.hint::before {
    content: "";
    display:block;
    position: absolute;
    left: 0;
    top:0;
    width:15px;
    height:15px;    
    background-color:var(--text-sub-color);
    background-repeat:no-repeat;
    background-size:100% 100%;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image:url(../images/icon/icon_exclamation.svg);
    mask-image:url(../images/icon/icon_exclamation.svg);
}

.text-muted {
    font-size:13px;
    color:var(--color-2-divider-primary);
}
svg rect.fill {
    fill:var(--color--textbox);
}
[class^=material-symbols-],
[class=material-icons], 
[class^=material-icons-] {vertical-align:middle;}
.real-chat {
    width:280px;  
    background: var(--color-textbox);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    border-radius:10px;
    overflow: hidden;
}
.real-chat__head {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width:100%;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px 10px 0 0;
    background-color: #0E9D9D;
    color: #fff;
}
[data-theme="dark"] .real-chat__head {
    background-color:#159393;
}
.real-chat__title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.real-chat__menu-btn {
    margin-left: auto;
    background-color: transparent;
    border: 0;
}
#aside .real-chat__body {
    height:350px;
}
.real-chat__body {
    width: 286px;
    height: 227px;
    padding:10px;
    border: 1px solid var(--border-light-color);
    border-top:0;
    border-bottom:0;
    color:var(--text-basic-color);
    font-size: 12px;
    overflow: hidden;
    overflow-y: auto;
}
.real-chat__body::-webkit-scrollbar {
    width: 5px;
    background-color:var(--text-basic-color);
}
.real-chat__body::-webkit-scrollbar-thumb {
    background: rgba(172, 172, 172, 0.54);
    border-radius: 2.5px;
}
.real-chat__body .profile-image {
    flex: none;
    width: 22px;
    height: 22px;
    margin-right:5px;
}
.real-chat__body .profile-image img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.real-chat__body .profile-image + div {
    padding-top:3px;
}
.real-chat__text {
    display: flex;
    flex-direction: row;
}
.real-chat__text strong {
    font-weight:400;
}
.real-chat__text + .real-chat__text {
    margin-top:5px;
}
.real-chat__foot {
    position: relative;
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid var(--border-light-color);
    border-top:0;
    border-radius:0 0 10px 10px;    
}
.real-chat__foot input[type=text] {
    display: block;
    position: relative;
    width: 230px;
    height: 27px;
    line-height: 27px;
    padding-left:5px;
    padding-right: 5px;
    border-radius: 5px;
    border: 1px solid var(--input-border-color);
    font-size: 13px;
    color: var(--text-basic-color);
    background-color:transparent;
}
:root[data-theme='dark'] .real-chat__foot input[type=text] {
    background-color: transparent;
    color: var(--text-sub-color);
}
:root[data-theme='dark'] {
    .real-chat__foot input[type=text]::-webkit-input-placeholder {
        color: var(--text-sub-color);
    }
    .real-chat__foot input[type=text]::-moz-placeholder {
        color: var(--text-sub-color);
    }
    .real-chat__foot input[type=text]::-ms-placeholder {
        color: var(--text-sub-color);
    }
    .real-chat__foot input[type=text]::-o-placeholder {
        color: var(--text-sub-color);
    }
}

.real-chat__foot input[type=text]:focus {
    outline: 0;
}
.real-chat__foot button {
    position: absolute;
    top: 7px;
    right: 16px;
    width: 26px;
    height: 26px;
    border: 0;
    background-color: transparent;
}
.real-chat__foot button img {
    width: 26px;
}

.live-chat-setting {
    position: absolute;
    top: 7px;
    right:0;
    display: none;
    align-items: flex-end;
    flex-direction: column;
}
.live-chat-setting .setting-menu {
    width: 150px;
    background-color:var(--color-textbox);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 1px 2px 0 0;;
    display: none;
    z-index: 1;
    color:var(--text-sub-color);
}
.live-chat-setting .setting-menu > button {
    padding: 15px 0 12px 10px;
    border: 0;
    border-bottom: 1px solid var(--border-light-color);
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    width: 100%;
    font-size: 13px;
    color: var(--text-sub-color);
}
.live-chat-setting .setting-menu > button > img {
    margin-right: 8px;
}
.live-chat-setting .setting-menu > button > i {
    vertical-align: middle;
    font-size: 15px;
    margin-right: 6px;
}
.live-chat-setting__open {display: flex;}
.live-chat-setting__open .setting-menu {display: block;}
.live-chat-setting .setting-icon {
    background-color: #0E9D9D;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    border: 0;
    color: #fff;
    font-size: 21px;
}
.live-chat-setting .svg-icon.icon-close {background-color:#fff}
.live-chat-setting .setting-icon:hover,
.live-chat-setting .chat-message-scroll:hover,
.live-chat-setting .active-icon {
    background-color: #0E9D9D;
}
.page-header {
    position: relative;
    width: 100%;
    padding:32px;
    background-size:cover;  
    background-repeat:no-repeat;
    font-size:16px;
    border-radius:10px;
    border:2px solid var(--prmary-color);
    margin-bottom:32px;
}
.page-header.not-bg {
    padding:0;
    border-radius:0;
    border:0;
    background:none;
}
.page-header.bg1 {
    background-image:url(../images/sub/sub_title_image_01.png);
}
.page-header.bg2 {
    background-image:url(../images/sub/sub_title_image_02.png);
}
.page-header.bg3 {
    background-image:url(../images/sub/sub_title_image_03.png);
}
.page-title {
    font-size:32px;
    font-weight: 700;
    color: var(--text-basic-color);        
}

.sub-title {
    font-size:26px;
    font-weight: 700;
    color: var(--text-basic-color);        
}
.sub-title2 {
    font-size:20px;
    font-weight: 700;
    color: var(--text-basic-color);        
}
.page-header.bg1 .page-title,
.page-header.bg3 .page-title,
.page-header.bg2 .page-title {color:#fff;}
.page-header.bg1 .page-header__text,
.page-header.bg3 .page-header__text,
.page-header.bg2 .page-header__text {color:#fff;}
.page-header__text {
    margin-top:9px;
    font-size:16px;
}


.guide-text {
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:center;
    margin-top:17px;
    padding:26px;
    border-radius:10px;
    font-size:16px;
    color: var(--text-sub-color);
    background-color:var(--color-surface-secondary-subtler);
    border:1px solid var(--border-light-color);
}
.guide-text .text {
    font-size:18px;
    color:var(--text-sub-color);
}
.guide-text img {
    flex:none;
    width:40px;
}
.guide-text dl {
    display:flex;
    flex-direction:row;   
    flex-wrap:wrap;
    align-items:baseline;
    font-size:16px; 
    margin-top:20px;
}
.guide-text dl + dl {
    margin-top:10px;
}
.guide-text > div {width:100%;}
.guide-text dl dt {
    flex:none;
    display:inline-block;
    padding:5px 20px;
    background-color: var(--color-border-gray-darker);
    font-weight:700;
    margin-right:8px;
    color:#fff;
    border-radius:50px;
}
.guide-text .in-box {
    padding:20px;
    border:1px solid var(--border-light-color);
    border-radius:10px;
    background-color:var(--color-textbox);
    margin-top:10px;
}
.guide-text .icon {
    flex:none;
    width:24px;
    margin-right:12px;
}
.guide-text.justify-center {
    justify-content:center;
    text-align:flex-start;
}

.aside-attend {
    display:flex;
    align-items:center;
    padding:16px;
    margin-top:26px;
    border-radius: 10px;
    border: 1px solid var(--border-light-color);
    background: var(--color-high-contrast-secondary-10, #D5EBF1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    overflow:hidden;
}
.aside-attend a {
    display:flex;
    align-items:center;
    text-decoration:none;
    color: var(--text-basic-color);
}
.aside-attend img {
    flex:none;
    width:50px;
    margin-right:12px;
}
.aside-attend dl dt {
    color: #000;
    font-size: 19px;
    font-weight: 700;
}
.aside-attend dl dd {
    color: var(--color-subtle, #464C53);
    font-size: 13px;
    font-weight: 400;
}
.aside-event {
    position:relative;
    margin-top:20px;
}
.card {
    position:relative;
    border-radius:10px;
    border: 1px solid var(--border-light-color);
    background: var(--color-textbox);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    overflow:hidden;
}
.card__header {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:9px 10px;
    font-size:16px;
    font-weight:700;
    color:#fff;
    background-color:var(--color-2-icon-success-static);    
}
[data-theme="dark"] .card__header {
    background-color:#006115;
}
.card__title {
    font-size:16px;
    font-weight:700;
    color:#fff;
}
.card__body {
    padding:16px;
    background-color:var(--color-textbox);
    font-size:13px;
    color:var(--text-sub-color);
}
.card__body .event-list {
    position:relative;
    display:block;
}
.card__body .event-list a {
    display:flex;
    align-items:center;
    text-decoration:none;
    justify-content:space-between;
    color:var(--text-basic-color);
}
.card__body .event-list a .title {
    display:block;
    width:80%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.card__body .event-list a + a {
    margin-top:5px;
}

.badge-group {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.badge-group .badge {
    display:inline-block;
    padding:6px 8px;
    border-radius:5px;
    font-size:16px;
    color: var(--text-basic-color);
    background-color: var(--color-background-gray-subtler);
}
.profile {
    position:relative;
    display:inline-flex;
    align-items:center;
}
.profile.inline-flex {
    display:inline-flex;
}
.profile__image {
    flex:none;
    width:20px;
    height:20px;
    margin-right:3px;
}
.profile__image img {
    width:20px;
    height:20px;
    border-radius:50%;
}
.profile__info {
    display:flex;
}
.profile__name {
    position:relative;
}

.sv-on {
    display: block !important;
    position: absolute;
    top: 23px;
    left: 0px;
    width: auto;
    height: auto;
}
.sv-wrap .sv {
    z-index: 1000;
    display: none;
    margin: 5px 0 0;
    font-size: 12px;
    background: rgb(50, 60, 70);
    padding: 6px 0;
    -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);
}
.sv-wrap .sv::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #333 transparent;
}
.sv-wrap .sv a {
    display: block;
    margin: 0;
    padding: 0 10px;
    line-height: 28px;
    width: 100px;
    font-weight: normal;
    color: #fff;
}

.date-ctrl {
    position: relative;
    text-align: center;
    margin-top: 12px;
}
.date-ctrl .year {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-51%);
    letter-spacing: -0.05rem;
}
.date-ctrl .btn-month {
    display: inline-block;
    padding: 0 5px;
    cursor: pointer;
}
.date-ctrl .btn-month img {
    width:20px;
    margin-top: -2px;
}
.date-ctrl .month {
    font-size: 18px;
    font-weight: bold;
    margin-right: 2px;
}

.badge {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 16px;
    color: var(--text-basic-color);
    background-color: var(--color-background-gray-subtler);
}
.badge.danger {
    color:#fff;
    background-color:var(--color-2-border-danger);
}


.attendance-title {
    font-size:36px; 
    text-align:center; 
    font-weight:700;
    letter-spacing:-0.05rem;
}
.attendance-title span {color:var( --color-divider-point);}
.attendance-info {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding-bottom:20px;
    border-bottom:3px solid var(--border-light-color);
}
.attendance-live-datetime {
    display:flex;
    align-items:baseline;
    color:var(--text-basic-color);
}
.attendance-live-datetime span {
    display:inline-block; 
}
.attendance-live-datetime .time-wrap {
    font-size:26px; 
    letter-spacing:-0.05rem;
}
.attendance-live-datetime .time-wrap .time {
    font-weight:700;
}
.attendance-live-datetime .date {
    margin-left:5px;
}
.attendance-info .gray-box {
    position:relative; 
    display:inline-block; 
    background:var(--color-element-gray-lighter); 
    padding:11px 10px 5px 48px; 
    font-size:13px; 
    color:var(--text-sub-color);
    border-radius:5px; 
    text-align:left;
}
.attendance-info .gray-box span {
    position:absolute; 
    top:6px; 
    left:5px; 
    background:var( --color-divider-point); 
    color:#fff; 
    font-size:16px; 
    font-weight:700;
    padding:6px 6px; 
    border-radius:3px; 
    line-height:1;
}
.attendance-calendar-top {
    position:relative; 
    text-align:center; 
    margin:25px 0;
}
.attendance-calendar-top .year {
    position:absolute; 
    top:50%; 
    left:0; 
    transform:translateY(-50%); 
    font-size:28px; 
    text-align:center; 
    font-weight:700;
    letter-spacing:-0.05rem;
}
.attendance-calendar-top .month {
    position:relative; 
    font-size:36px; 
    text-align:center; 
    font-weight:700;
    letter-spacing:-1px;
}
.attendance-calendar-top .month img {
    position:absolute; 
    top:-6px; 
    right:-58px;
}
.attendance-calendar-top .month-ctrl {
    position:absolute; 
    top:50%; 
    right:0; 
    transform:translateY(-50%);
}
.attendance-calendar-top .month-ctrl a {
    display:inline-block; 
    background:#333; 
    color:#fff; 
    padding:0 8px; height:30px; 
    line-height:30px; 
    border-radius:5px; 
    transition:background .2s;
}
.attendance-calendar-top .month-ctrl a:hover {background:#000;}
.attendance-my-info-wrap {
    position:relative; 
    margin-bottom:20px; 
    margin-top:20px;
    min-height:36px;
}
.attendance-wr-time {
    font-weight:700;
    font-size:18px;
}
.attendance-my-info span {margin-right:15px;}
.attendance-rank-point-info {
    position:absolute; 
    top:50%; 
    transform:translateY(-50%); 
    right:0;
}
.attendance-rank-point-info span {
    display:inline-block; 
    border-radius:8px; 
    background:var(--color-textbox); 
    height:36px; 
    line-height:36px; 
    padding:0 12px 0 10px; 
    cursor:pointer; 
    box-shadow:2px 2px 5px #d9d9d9;     
    transition:background .2s;
}
.attendance-rank-point-info #chulsuk-rank-info {border:1px solid #85ccff;}
.attendance-rank-point-info #chulsuk-rank-info:hover {background:#f8fcff;}
.attendance-rank-point-info #chulsuk-point-info {border:1px solid #eebd3a; margin-left:5px;}
.attendance-rank-point-info #chulsuk-point-info:hover {background:#fdfbf5;}
.attendance-submit-wrap {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
}
.attendance-submit-wrap .frm-input {
    width:70%;
    height:60px;
    line-height:60px;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.attendance-submit-wrap .b-btn{
    width:30%;
    height:60px;
    line-height:60px;
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
}

#calendar-tbl tr th {
    background-color:var(--table-th-bg-color);
    color:#fff; 
    border:1px solid var(--border-light-color); 
    font-weight:normal; 
    padding:10px 0 10px;
}
#calendar-tbl tr th:first-child {border-left:0;}
#calendar-tbl tr th:last-child {border-right:0;}
#calendar-tbl tr td {
    border:1px solid var(--border-light-color); 
    padding:0;
}
#calendar-tbl tr td:first-child {border-left:0;}
#calendar-tbl tr td:last-child {border-right:0;}
#calendar-tbl tr td.active {background:var(--color-textbox); }
#calendar-tbl tr td a {
    position:relative; 
    display:block; 
    padding:0.6rem; 
    line-height:1; 
    font-size:16px; 
    letter-spacing:-1px;
}
#calendar-tbl tr td a:hover div {color:crimson !important;}
#calendar-tbl tr td span {color:var(--text-basic-color);}
#calendar-tbl tr td .red {color:#ff4646;}
#calendar-tbl tr td .blue {color:#009cff;}
#calendar-tbl tr td .green {color:#28a745;}
#calendar-tbl tr td .cnday-wrap {margin-top:20px;}
#calendar-tbl tr td .cnday-wrap .cnday {
    font-size:18px; 
    letter-spacing:-1px; 
    color:var( --color-divider-point);
}
#calendar-tbl tr td .icon-chulsuk-stamp {
    position:absolute; 
    width:40%; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    opacity:0.6;
}
.attendance-popup {display:none; /*position:absolute; top:3.5rem; left:50%; transform:translateX(-50%); */ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); border:3px solid var( --color-divider-point); padding:26px 27px 36px 27px; width:340px; max-width:100%; background:var(--color-textbox);  border-radius:30px; box-shadow:8px 8px 20px rgb(50 60 70 / 30%); -webkit-box-shadow:8px 8px 20px rgb(50 60 70 / 30%); -moz-box-shadow:8px 8px 20px rgb(50 60 70 / 30%); z-index:5;}
.attendance-popup > div {position:relative;}
.attendance-popup .btn-close {
    position:absolute; 
    top:-30px; 
    right:-97px; 
    width:50px; 
    height:50px; 
    border-radius:50px; 
    background:rgba(90, 90, 91, 0.8); 
    text-align:center; 
    line-height:49px; 
    cursor:pointer; 
    border:0;
}
.attendance-popup .title {
    font-size:28px; 
    color:var( --color-divider-point); 
    font-weight:700;
    letter-spacing:-0.05rem; 
    text-align:center;
}
.attendance-popup .text {line-height:1.3; text-align:center; color:#888; margin-top:5px;}
.attendance-popup .text span {color:var(--text-basic-color); text-decoration:underline;}
.attendance-popup .tabs {margin-top:10px;}
.attendance-popup .tabs span {display:inline-block; width:50%; height:40px; line-height:38px; border:1px solid #e8e9eb; color:#666; text-align:center; font-size:16px; cursor:pointer;}
.attendance-popup .tabs span:first-child {border-radius:10px 0 0 10px;}
.attendance-popup .tabs span:last-child {border-radius:0 10px 10px 0;}
.attendance-popup .tabs span.active {background:var( --color-divider-point); color:#fff; border:1px solid var( --color-divider-point);}
.attendance-popup .tbl-wrap {display:none; margin-top:10px; border-radius:10px; overflow:hidden;}
.attendance-popup .tbl-wrap.active {display:block;}
.attendance-popup table {width:100%; border-spacing:0; padding:0;}
.attendance-popup table tr th {background-color:var(--table-th-bg-color); color:#fff; text-align:center; font-size:12px; font-weight:normal; padding-top:3px; padding-bottom:3px; letter-spacing:-0.02rem;}
.attendance-popup table tr td {background:#f7f8fa; color:var(--text-basic-color); text-align:center; font-size:12px; border-bottom:1px solid #e8e9eb; padding-top:2px; padding-bottom:1px; letter-spacing:-0.02rem;}
.attendance-popup table tr td.red {color:var( --color-divider-point); font-weight:bold;}
.attendance-popup table tr:last-child td {border-bottom:0;}
.attendance-submit-wrap {padding-top:30px; margin-bottom:30px; border-top:3px solid var( --color-divider-point); position:relative;}
.attendance-submit-wrap:after {display:block; content:''; visibility:hidden; clear:both;}
.attendance-submit-wrap input#wr-content {float:left; border:0; box-shadow:5px 5px 8px #e1e1e1; -webkit-box-shadow:5px 5px 8px #e1e1e1; -moz-box-shadow:5px 5px 8px #e1e1e1; width:calc(100% - 230px); height:60px; line-height:60px; border-radius:10px 0 0 10px; font-size:20px; color:#999; padding:0 20px; letter-spacing:-0.05rem; outline:none;}
.attendance-submit-wrap #btn-chulsuk-submit {float:left; width:230px; height:60px; line-height:60px; border-radius:0 10px 10px 0; background:var( --color-divider-point); font-size:20px; color:#fff; border:0; letter-spacing:-0.05rem; text-align:center; transition:background .2s;}
.attendance-submit-wrap #btn-chulsuk-submit img {vertical-align:top; margin-top:8px; margin-left:5px;}
.attendance-complete-wrap {
    display:flex; 
    justify-content:center; 
    align-items:center; 
    padding-top:30px; 
    margin-bottom:30px; 
    border-top:3px solid var( --color-divider-point);
}
.attendance-complete-wrap .attendance-complete-text {
    text-align:center; 
    line-height:1.3;
}
.attendance-complete-wrap .attendance-complete-text > div:first-child {
    font-size:28px; 
    text-align:center; 
    font-weight:700;
    letter-spacing:-0.05rem;
}
.attendance-complete-wrap .attendance-complete-text > div:first-child span.red {color:var( --color-divider-point);}
.attendance-complete-wrap .attendance-complete-text > div:last-child {
    color:#666; 
    font-weight:700;
    font-size:15px;
}
.attendance-complete-wrap .icon-chulsuk-stamp {
    width:90px;
    margin-right:20px;
}
.attendance-list-wrap {overflow:visible;}
.attendance-list-wrap table {}
.attendance-list-wrap table tr th {
    border:0; 
    text-align:center; 
    background-color:var(--table-th-bg-color);
    color:#fff; 
    font-weight:normal; 
    vertical-align:middle; 
    letter-spacing:-0.05rem;
}
.attendance-list-wrap table tr th:first-child {border-radius:10px 0 0 0;}
.attendance-list-wrap table tr th:last-child {border-radius:0 10px 0 0;}
.attendance-list-wrap table tr td {
    border:0; 
    border-bottom:1px solid var(--border-light-color); 
    text-align:center; 
    background:var(--color-textbox); 
    font-size:16px; 
    color:var(--text-sub-color) !important; 
    vertical-align:middle; 
    letter-spacing:-0.05rem; 
    font-weight:normal;
}
.attendance-list-wrap table tr:last-child td {border-bottom:0;}
.attendance-list-wrap table tr:last-child td:first-child {border-radius:0 0 0 10px;}
.attendance-list-wrap table tr:last-child td:last-child {border-radius:0 0 10px 0;}
.attendance-list-wrap table tr td b {font-weight:bold;}
/*.attendance-list-wrap table tr:nth-child(even) td {background:var(--color-background-gray-subtler);}*/
.attendance-list-wrap .icon-medal {
    width:30px;
}

/*
@media (max-width:992px) {
	.attendance-title {font-size:26px;}
	.attendance-live-datetime {font-size:16px; text-align:center; width:100% !important;}
	.attendance-live-datetime .time-wrap {font-size:16px; padding-left:0 !important;}
	.attendance-info {text-align:left !important; margin-top:5px;}
	.attendance-info .gray-box {display:block;}
	.attendance-calendar-top {margin-top:1.2rem;}
	.attendance-calendar-top .year {font-size:20px; display:none;}
	.attendance-calendar-top .month {font-size:26px;}
	.attendance-calendar-top .month img {width:36px; top:-3px; right:-42px;}
	.attendance-calendar-top .month-ctrl {display:block; position:unset; transform:unset; margin-top:10px; text-align:center;}
	.attendance-wr-time {font-size:16px;}
	.attendance-calendar-top .month-ctrl a {font-size:13px;}
	.attendance-my-info span {display:block; font-size:13px;}
	.attendance-rank-point-info {position:unset; transform:unset; text-align:right;}
	.attendance-rank-point-info #chulsuk-rank-info,
	.attendance-rank-point-info #chulsuk-point-info {margin-top:10px;}
	.attendance-rank-point-info span {font-size:13px;}
	#calendar-tbl tr th,
	#calendar-tbl tr td {font-size:13px;}
	#calendar-tbl tr td a {padding:0.3rem;}
	#calendar-tbl tr td .cnday-wrap {margin-top:10px;}
	#calendar-tbl tr td .cnday-wrap .cnday {font-size:13px;}
	#calendar-tbl tr td .icon-chulsuk-stamp {width:70%;}
	.attendance-popup {padding:16px 17px 26px 17px;}
	.attendance-popup .btn-close {top:-11px; right:-12px; width:40px; height:40px; line-height:39px;}
	.attendance-popup .title {font-size:20px;}
	.attendance-popup .text {font-size:16px;}
	.attendance-submit-wrap {padding-top:20px; margin-bottom:20px;}
	.attendance-submit-wrap input#wr-content {width:calc(100% - 80px); font-size:16px;}
	.attendance-submit-wrap #btn-chulsuk-submit {width:80px;}
	.attendance-submit-wrap #btn-chulsuk-submit span {display:none;}
	.attendance-submit-wrap #btn-chulsuk-submit img {margin-left:0;}
	.attendance-complete-wrap {padding-top:20px; margin-bottom:20px;}
	.attendance-complete-wrap .attendance-complete-img img {width:60px;}
	.attendance-complete-wrap .attendance-complete-text > div:first-child {font-size:20px;}
	.attendance-complete-wrap .attendance-complete-text > div:first-child span {display:block;}
	.attendance-complete-wrap .attendance-complete-text > div:last-child {font-size:13px; margin-top:5px;}
	.attendance-complete-wrap .attendance-complete-text > div:last-child span {display:block;}
	.attendance-list-wrap table tr th,
	.attendance-list-wrap table tr td {font-size:13px; padding-left:5px; padding-right:5px;}
	.attendance-list-wrap table tr th.attendance-list-comment,
	.attendance-list-wrap table tr td.attendance-list-comment {display:none;}
}
@media (max-width:576px) {
	.attendance-popup {max-width:calc(100% - 30px); position:absolute; top:3.5rem; left:50%; transform:translateX(-50%);}
	.attendance-live-datetime .time-wrap .time {margin-top:0;}
}
*/
.dot-list {position:relative;}
.dot-list li {position:relative;}
.dot-list li + li {margin-top:5px;}
.dot-list.mt-10 {margin-top:10px;}

.conts-box {position:relative;}
.conts-box .grid-2 {
    display:grid; 
    grid-template-columns:repeat(2, 1fr); 
    gap:20px;
}
.conts-box .grid-2.mt-20 {margin-top:20px;}
.conts-box.mt-32 {margin-top:32px;}

.iframe-wrap {
    position:relative;
    width:100%;
    margin-top:32px;
    aspect-ratio: 896 / 633;
}
.iframe-wrap iframe {
    position:relative;
    width:100%;
    height:100%;
    
}

.tab {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.tab li {
    flex:1;
    position:relative;
    margin-left:-1px;
}
.tab li a {
    display:block;
    width:100%;
    padding:15px 0;
    text-align:center;
    color:var(--text-sub-color);
    font-size:18px;
    font-weight: 400;    
    border: 1px solid var(--border-light-color);
}
.tab li.active a {
    position:relative;
    background-color:#0E3799;
    color:#fff;
    font-weight:700;
    border-color:#0E3799;
    box-shadow: 3px 3px 20px rgb(14 55 153 / 35%);
    z-index:2;
}
.tab li a[aria-selected=true] {
    position:relative;
    background-color:#0E3799;
    color:#fff;
    font-weight:700;
    border-color:#0E3799;
    box-shadow: 3px 3px 20px rgb(14 55 153 / 35%);
    z-index:2;
}

.tab2 {
    position:relative;
    display:flex;
    width:100%;
}
.tab2::after {
    display:block;
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    background-color:var(--border-light-color);
}
.tab2 li {
    position:relative;
    margin-left:-1px;
}
.tab2 li a {
    display:block;
    width:100%;
    padding:8px 12px;
    text-align:center;
    color:var(--text-basic-color);
    font-size:16px;
    font-weight: 400;    
    border: 1px solid var(--border-light-color);
    border-bottom:0;
    background-color:var(--color-textbox);
}
.tab2 li.active a {
    position:relative;
    font-weight:700;
    border-color:var(--primary-color);
    border-bottom-color:var(--color-textbox);
    z-index:2;
}
[data-theme="dark"] .tab2 li.active a {
    border-color:var(--color--textbox);
}


.tab-content {position:relative;}
.tab-content iframe {
    position:relative;
    width:100%;
}
.game-tab-content {
    position:relative;
    width:840px;
    margin:32px auto 0;
}
.game-tab-content iframe {
    position:relative;
    width:100%;
}

.outlogin {
    position: relative;
    box-shadow: 5px 5px 8px rgb(50 60 70 / 10%), -3px -3px 6px #fff;
    -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 10%), -3px -3px 6px #fff;
    -moz-box-shadow: 5px 5px 8px rgb(50 60 70 / 10%), -3px -3px 6px #fff;
    background: var(--color--textbox);
    overflow: hidden;
    border-radius: 10px;
    margin-bottom:26px;
}
.outlogin__top {
    display:flex;
    padding:16px 10px 10px;
    font-size:15px;
}
.outlogin__top .profile-image {
    flex:none;
    width:60px;
    height:60px;
    margin-right:12px;
}
.outlogin__top .user-info {
    display:flex;
}
.outlogin__top .user-info .xp-icon {
    width:25px;
}
.outlogin__top .user-info .xp-icon img {
    width:25px;
    height:auto;
}
.outlogin__top .user-info .sv-wrap {position:relative;}
.outlogin .mb_signature {
    border-radius: 50px;
    color: #929292;
    background: #fff;
    box-shadow: 0px 1px 3px #00000024;
    font-size: 12px;
    padding: 1px 10px 0;
}
.outlogin .exp {
    display:flex;
    background: var(--color-textbox);
    border-top: 1px solid var(--border-light-color);
    padding: 0px 3px;
}
.outlogin .exp__name {
    flex:none;
    font-size:12px;
    color:var(--text-sub-color);
    line-height:27px;
}
#aside-sidebar {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100%;
    padding-bottom: 20px;
    overflow-y: auto;
    background: var(--color-textbox);
    z-index: 1000;
    box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);
    -webkit-box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);
    -moz-box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);
    transition: right 0.3s ease;
    z-index:10;
}
#aside-sidebar.open {right:0;}
.aside-sidebar__header {
    position: relative;
    font-size: 21px;
    font-weight: bold;
    background: var(--color--textbox);
    color:var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    padding: 8px 15px 6px;
}
:root[data-theme='dark'] {
    .aside-sidebar__header {
        color:#34d531;
    }
}
.aside-sidebar__close-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 12px;
    transform: translateY(-50%);
    cursor: pointer;
}
.aside-sidebar__body {position:relative;}
.aside-sidebar__item {position:relative;}
.aside-sidebar__member {
    padding: 18px 15px 20px;
    font-size: 13px;
    color:var(--text-basic-color);
}   
.aside-sidebar .hide-photo  {
    display:flex;
    align-items:center;
}
.aside-sidebar__member .d-flex {align-items:center;}
.d-flex {display:flex;}
.pr-4 {padding-right:16px;}
.pt-2, .py-2 {
    padding-top:5px;
}
.flex-grow-1 {
    position:relative;
    -ms-flex-positive: 1!important;
    flex-grow: 1 !important;
}
.rounded-circle {
    width:60px;
    border-radius: 50% !important;
}
.aside-sidebar .hide-photo {
    position:relative;
    display:flex;
    justify-content:space-between;
}
.aside-sidebar .hide-photo .xp-icon img {
    width:20px !important;
    vertical-align: top;
}
.aside-sidebar .hide-photo .sv_wrap {
    position:relative;
    font-weight: bold;
    font-size: 15px;
}
.aside-sidebar .hide-photo .notice-cnt {
    position: relative;
    cursor: pointer;
}
.aside-sidebar .hide-photo .mb-userinfo{position:relative;}
.aside-sidebar .hide-photo .mb-username {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-basic-color);
    display:flex;
    align-items:center;
}

.aside-sidebar .count {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    top: 0px;
    right:10px;
    line-height: 1;
    min-width: 10px;
    padding: 3px 6px 2px;
    background: #db3232;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0px 6px 6px -2px #727272;
    -webkit-box-shadow: 0px 6px 6px -2px #727272;
    -moz-box-shadow: 0px 6px 6px -2px #727272;
    white-space: nowrap;
    vertical-align: baseline;
}
.aside-sidebar .hide-photo .notice-cnt img {
    width: 35px;
}
.aside-sidebar .mb-level {
    padding-left: 1px;
}
.aside-sidebar .mb-level img {
    width: 16px;
    vertical-align: middle;
    margin-right: 4px;
}   
.aside-sidebar .mb-exp {
    display:flex;
    align-items:flex-start;
    padding-top:16px;
    line-height: 1;
}
.aside-sidebar .mb-level-text {
    padding-right:16px;
    padding-top:4px;
}
.aside-sidebar .mb-exp .div-progress {
    border-radius: 50px;
    color: #929292;
    background: #fff;
    box-shadow: 0px 1px 3px #00000024;
    overflow: hidden;
    margin-bottom:4px;
}
.aside-sidebar .at-tip {position:relative;}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color:var(--color-2-divider-primary);
    transition: width .6s ease;
}
.aside-sidebar .mb-exp .div-progress .progress-bar {   
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    border-radius: 50px;
}
.aside-sidebar .mb-point {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:16px;
}
.aside-sidebar .mb-point__text {
    padding-right:16px;
}
.aside-sidebar .mb-point b {
    letter-spacing: -0.05rem;
}
.aside-sidebar .mb-point .btn-point {
    display: inline-block;
    vertical-align: top;
    background: #db3232;
    color: #fff;
    border-radius: 5px;
    font-size: 11px;
    padding: 5px 8px;
    margin-left: 5px;
    line-height: 1;
}
.aside-sidebar__top-menu {
    position:relative;
    margin-top:10px;
}
.aside-sidebar__top-menu__c {
    font-size: 13px;
}
.aside-sidebar__top-menu__c ul {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:15px;
}
.aside-sidebar__top-menu__c ul li {
    position:relative;
}
.aside-sidebar__top-menu__c ul li a {
    position: relative;
    display: block;
    width:100%;
    text-align: center;
}
.aside-sidebar__top-menu__c ul li a .img {
    position:relative;
    display:block;
    width:100%;
    height:70px;
    font-size:20px;
    margin-bottom:5px;
}
.aside-sidebar__top-menu__c ul li a .img .material-symbols-outlined {
    font-size:35px;
    color:var(--text-sub-color);
}
.aside-sidebar__top-menu__c ul li a .bg-circle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    background:var(--color--textbox);
    border-radius: 50%;
    box-shadow: 2px 2px 6px 1px #e9e9e9;
    -webkit-box-shadow: 2px 2px 6px 1px #e9e9e9;
    -moz-box-shadow: 2px 2px 6px 1px #e9e9e9;    
}
[data-theme="dark"] .aside-sidebar__top-menu__c ul li a .bg-circle {
     box-shadow: 2px 2px 6px 1px #333333;
    -webkit-box-shadow: 2px 2px 6px 1px #333333;
    -moz-box-shadow: 2px 2px 6px 1px #333333; 
}

.aside-sidebar .mb-signature {
    margin-top:10px;
    border-radius: 50px;
    color: #929292;
    background:var(--color--textbox);
    box-shadow: 0px 1px 3px #00000024;
    padding: 1px 10px 0;
    overflow: hidden;
    font-size:13px;
}
.aside-sidebar_m-date {
    background:var(--color--textbox);
}
.aside-sidebar_m-date > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 6px 15px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light-color);
    margin-top:10px;
}
.aside-sidebar_m-date > div:last-child {
    border-bottom:0;
}

.widget_outlogin_tooltip {font-size:12px;}


.tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 12px;
    word-wrap: break-word;
    opacity: 0;
}
.tooltip.show {
    opacity: 0.9;
}
.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 12px;
    height: 6px;
}
.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {
    padding: 6px 0;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
    bottom: 0;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: -1px;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {
    padding: 0 6px;
}
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
    left: 0;
    width: 6px;
    height: 12px;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    right: -1px;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}

.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {
    padding: 6px 0;
}
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
    top: 0;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}

.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {
    padding: 0 6px;
}
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
    right: 0;
    width: 6px;
    height: 12px;
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    left: -1px;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}

.tooltip-inner {
    max-width: 200px;
    padding: 4px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
}

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: var(--color-textbox);
    border-bottom: 1px solid var(--border-light-color);
    color: var(--text-basic-color);
}
.list-group-item.flex {
    display:flex;
}
.list-group-item.justify-content-between{
    justify-content:space-between;
} 
.list-group-item.align-items-center {
    align-items:center;
}
.pr-image {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius:50%;
}

.point-exchange-day-notice-wrap {
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    margin-bottom:20px;
}
.point-exchange-day-notice {
    display:flex;
    flex-direction:row;
    align-items:center;
    background:var(--color-divider-point);
    padding:20px;
    border-radius:10px;
}
.point-exchange-day-notice .icon {
    flex:none;
    display:flex;
    justify-content:center;
    align-items:center;
    width:60px;
    height:60px;
    margin-right:12px;
    background-color:#fff;
    border-radius:50%;
}
.point-exchange-day-notice .text {    
    color:#fff;
    font-size:16px;
}
.point-exchange-day-notice .highlight {
    color: #fff899;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight:700;
}

.terms {position:relative;}
.terms__title {
  margin-top:20px;
  margin-bottom:10px;
  font-size:15px;
  color:var(--text-basic-color);
  font-weight: 700;
}
.terms__title--mt0 {
  margin-top: 0;
}
.terms__title--mt50 {
  margin-top: 50px;
}
.terms__title--s14 {
  font-size:14px;
}
.terms__text {
  font-size:13px;
  color: var(--text-sub-color);
  line-height: 1.5;
}
.terms .in-list {
  padding-left:20px;
}
.terms strong {
  font-weight: 700;
}

.game-info-box {
    position:relative;
    padding:24px;
    border:1px solid var(--border-light-color);
    border-radius:10px;
    background-color:var(--color-textbox);
}
.game-info-box .dot-list li {
    padding-left:12px;
}
.game-info-box .dot-list li::before {
    content:'';
    position:absolute;
    top:8px;
    left:0;
    width:3px;
    height:3px;
    background:var(--primary-color);
    border-radius:50%;
}
.mt-20 {margin-top:20px;}
.mt-30 {margin-top:30px;}

.etc-box {
    border:1px solid var(--border-light-color);
    padding:24px;
    margin:20px 0;
    line-height:1.5;
}
.after-place {
    padding:10px;
    border-left:4px solid #d63384;
}
.after-place-blue {
    padding:10px;
    border-left:4px solid #0066cc;
}
.waring-box {
    border:1px solid #ffcccc;
    padding:15px;
    font-weight:600;
    color:#d63384;
}

.alert {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width:100%;
    height:100vh;
}
.alert__icon {
    position:relative;
}
.alert__icon img,
.alert__icon .svg {
    width:60px;
    height:60px;
}
.alert__content {
    margin-top:20px;
    font-size:20px;
    color:var(--text-basic-color);
    text-align:center;    
    line-height:1.5;
}
.alert__message {
    margin-bottom:20px;
}

.blur {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: filter 0.3s ease;
}