@charset "utf-8"; :root {
    --color-black: #000;
    --color-gray-black: #222;
    --color-gray-black2: #333;
    --color-white: #fff;
    --color-white2: #f5f6f7;
    --color-gray-light: #f4f4f4;
    --color-gray-dark: #464646;
    --color-gray-dark2: #484848;
    --color-gray-border: #ddd;
    --color-gray-border-bottom: #ccc;
    --color-accent-pink: #E1006A;
    --color-accent-orange: #F14636;
    --color-accent-yellow: #e3311d;
    --color-accent-blue: #0a85d1;
    --color-blue-light: #357AF6;
    --color-gray-text: #828282;
    --color-gray-light: #f5f5f7;
    --color-purple-dark: #BF266E;
    --color-orange-bright: #ff7916;
    --color-gold: #F2D194;
    --color-red: #EA334B;
    --color-menuback: #FAFAFA;
    --color-kindBox: #D4D4D4;
    --color-menu-text: #888888;
    --color-notice-red: #D71E3D;
    --color-casino-blue: #2E83F2;
    --color-casino-pink: #F28585;
    --color-success-green: #03BD57;
    --color-inputback-white: #F5F5F5;
    --color-company-sub: #404040;
    --color-company-desc: #ECECEC;
    --color-comment-write: #ef6500;
    --color-vote-yellow: #b3893e;
    --color-comment-tag: #009DFF;
    --color-company-condition: #F5E1BB;
    --color-damage: #DC3644;
    --color-dark-back: #1f1f1f;
    --color-dark-wrapper: #1f1f1f;
    --color-dark-main: #2e2e2e;
    --color-dark-font: #d3d3d3;
    --color-dark-backon: #e49c12;
}

@font-face {
    font-family: 'NoonnuBasicGothicRegular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noon-2410@1.0/NoonnuBasicGothicRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); */
/* 노트산스 Noto Sans KR */
/* 프리텐다드 */
/* @font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src: local('Pretendard Bold'), url(../images/fonts/Pretendard-Bold.woff2) format('woff2'), url(../images/fonts/Pretendard-Bold.woff) format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	src: local('Pretendard SemiBold'), url(../images/fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../images/fonts/Pretendard-SemiBold.woff) format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src: local('Pretendard Medium'), url(../images/fonts/Pretendard-Medium.woff2) format('woff2'), url(../images/fonts/Pretendard-Medium.woff) format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src: local('Pretendard Regular'), url(../images/fonts/Pretendard-Regular.woff2) format('woff2'), url(../images/fonts/Pretendard-Regular.woff) format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	src: local('Pretendard Light'), url(../images/fonts/Pretendard-Light.woff2) format('woff2'), url(../images/fonts/Pretendard-Light.woff) format('woff');
	font-display: swap;
} */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    word-break: keep-all;
}

body,div,span,button,a,td,th,select,textarea,input,dl,dt,dd {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

em {
    font-style: normal;
}

h1,h2,h3,h4,h5 {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: var(--color-black);
}

a:hover {
    cursor: pointer;
}

button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background: transparent;
    cursor: pointer;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

dl, dt, dd {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
    line-height: 1.8;
}

u {
    display: inline-block;
    text-decoration: none;
    line-height: 1.8;
}

img {
    border: 0;
}

.frame {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

label {
    display: flex;
}

input {
    border: none;
    outline: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

input[type="radio"] {
    position: relative;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 0;
    height: 0;
    border: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

input[type="radio"] + span {
    position: relative;
    display: inline-block;
    padding: 3px 7px 4px 27px;
}

input[type="radio"] + span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(../images/etc/radio.png) 0 0 no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

input[type="radio"]:checked ~ span {
    color: var(--color-black);
}

input[type="radio"]:checked + span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(../images/etc/radio-checked.png) 0 0 no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

input[type="checkBox"] {
    position: relative;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 0;
    height: 0;
    border: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

input[type="checkBox"] + span {
    position: relative;
    display: inline-block;
    padding: 3px 7px 4px 27px;
}

input[type="checkBox"] + span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(/images/etc/check_box.svg) no-repeat center/contain;
}

input[type="checkBox"]:checked ~ span {
    color: var(--color-black);
}

input[type="checkBox"]:checked + span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(/images/etc/checked_box.svg) no-repeat center/contain;
}

select {
    position: relative;
    padding: 10px 30px 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--color-gray-border);
    color: var(--color-gray-text);
    appearance: none;
    background: url(/images/etc/appearance.png) 90% 50% no-repeat;
    background-size: 15px auto;
    background-color: var(--color-white);
}

textarea {
    padding: 10px;
    border-radius: 15px;
}

.note-btn.btn.btn-default.btn-sm {
    font-size: 14px;
}

/* 폰트 눈누 예외 */
.header *, .footer *, .home .board_box.desc .copy, .home .kindBox * , .home .companyInfo *, .board_box.desc .qnaBox * , .subTabBox *, .lotteryBox *, .infoBox *, .baccarat *, .joinBox *, .loginBox *, .myinfoBox *, .accessorBox *, .searchList *,.casinoInfo * {
    font-family: 'SUIT-Regular';
}

@media screen and (min-width: 1000px) {
    p {
        line-height: 2;
    }

    select {
        margin-right: 10px;
    }
}

@media screen and (min-width: 1440px) {
    .frame {
        padding: 0;
    }
}

@supports (-webkit-touch-callout: none) {
    video::-webkit-media-controls {
        display: none !important;
    }
}

.lucky {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: var(--color-gray-black);
    padding: 10px 0;
}

.lucky b {
    padding-left: 20px;
    padding-right: 5px;
    color: var(--color-accent-orange);
}

.lucky b::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    background: url(../images/etc/point.png) no-repeat center/contain;
}

.off {
    display: none;
}

.wrapper.dark-mode select {
    background: url(/images/etc/appearance_dark.png) 90% 50% no-repeat;
}

.wrapper.dark-mode input[type="radio"]:checked + span:before {
    background: url(/images/etc/radio-checked_dark.png) 90% 50% no-repeat;
}

.wrapper.dark-mode input[type="radio"]:checked ~ span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode input[type="radio"] + span {
    color: var(--color-dark-backon);
}

.wrapper.dark-mode input[type="radio"] + span:before {
    background: url(/images/etc/radio_dark.png) 90% 50% no-repeat;
}

.wrapper.dark-mode input[type="checkBox"]:checked ~ span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode input:-webkit-autofill,.wrapper.dark-mode input:-webkit-autofill:hover, .wrapper.dark-mode input:-webkit-autofill:focus, .wrapper.dark-mode input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-dark-font);
}

.wrapper.dark-mode * {
    color: var(--color-dark-font);
    border-color: var( --color-dark-main);
}

.dark-mode input {
    color: var(--color-dark-font);
    background-color: var( --color-dark-backon);
}

.wrapper.dark-mode {
    background-color: var( --color-dark-wrapper);
}

.wrapper.dark-mode .footer {
    background-color: var( --color-dark-wrapper);
}

.wrapper.dark-mode .header {
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-wrapper);
}

.wrapper.dark-mode .header .top_bg {
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb::after {
    background-color: var( --color-dark-font);
}

.wrapper.dark-mode h2 {
    color: var(--color-white);
}

.wrapper.dark-mode .header .topHeader {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .topHeader {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .leftMenu .navBox {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .leftMenu .navBox .logo,.wrapper.dark-mode .header .openNavBtn {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
    margin-bottom: 10px;
    border-radius: 10px;
    border: 5px solid var(--color-company-sub);
}

.wrapper.dark-mode .header .topHeader ul {
    background-color: var( --color-dark-back);
}

.wrapper.dark-mode .header .topHeader ul li a {
    background-color: var( --color-dark-back);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb .lnb li > a {
    background-color: var( --color-dark-back);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
    border-left: 3px solid var(--color-company-sub);
    padding-left: 10px;
}

.wrapper.dark-mode .header .topHeader a.accessor {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button,.wrapper.dark-mode .leftMenu .navBox ul li.gnb > a {
    background-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .header .menuBack {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .leftMenu .navBox .loginBox form .submit {
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .leftMenu .navBox .loginBox form .submit:hover {
    border-color: var( --color-dark-backon);
}

.wrapper.dark-mode .infoBox .profileBox {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .infoBox .profileBox .logout a {
    display: block;
    width: 25px;
    height: 25px;
    background: url(../images/etc/logout_dark.png) no-repeat center/contain;
}

.wrapper.dark-mode .infoBox .profileBox .logout img {
    display: none;
}

.wrapper.dark-mode .sidebar .loginBox {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .sidebar .loginBox form .submit {
    background-color: var(--color-dark-back);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .sidebar .loginBox form .submit:hover {
    background-color: var( --color-white);
    border-color: var(--color-dark-back);
    color: var(--color-dark-back);
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb:hover .lnb {
    background: var(--color-dark-back);
    height: auto;
}

.wrapper.dark-mode .section .board_box .tabBox {
    background-color: var(--color-dark-main);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box.desc .titleBox {
    background-color: var(--color-dark-main);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .sidebar .board_box .listBox .list .link .txt {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box .listBox .list .link .txt {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box.desc .copyBox .copy {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box.desc .copyBox .qnaBox ul li .qna .q {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .loginBox form .toggle-wrapper .toggle-label {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .joinBox form {
    background-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode.service .joinBox form dl dd input {
    background-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view > .subject {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view > .sub {
    background-color: var(--color-dark-back);
    border-color: var(--color-dark-back);
}

.wrapper.dark-mode .boardBox.view .message {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box.desc .copyBox .qnaBox ul li .qna .a {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .section .kindBox ul li {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .section .board_box.free .theme {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box.site .copyBox ul li .txt {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .sidebar .board_box .tabBox {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .sidebar .board_box .listBox .list .link .theme {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .section .board_box .board .listBox .best .link .txt {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .boardAnswerBox .title {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .infoBox {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .infoBox .cardBox .couponBox button {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .infoBox .profileBox .namebox .name {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .infoBox .profileBox .gradeBox {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .infoBox .profileBox .gradeBox .admin {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .companyInfo .notice {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .companyInfo .topInfo {
    outline: none;
}

.wrapper.dark-mode .companyInfo .topInfo .subDesc {
    color: var(--color-dark-main);
    outline: none;
}

.wrapper.dark-mode .companyInfo .botInfo {
    background: none;
}

.wrapper.dark-mode .companyInfo .botInfo .title {
    color: var(--color-gray-dark);
}

.wrapper.dark-mode .companyInfo .botInfo .copyBox ul li .subDesc, .wrapper.dark-mode .companyInfo .botInfo .copyBox ul li span.num, .wrapper.dark-mode .companyInfo .botInfo .copyBox ul li h3.numTitle ,.wrapper.dark-mode .casinoInfo .copyBox .copy span, .wrapper.dark-mode .casinoInfo .copyBox .desc {
    color: var(--color-dark-font);
    border-color: var(--color-dark-font);
}

.wrapper.dark-mode .subTabBox ul li a {
    border: none;
    background-color: var( --color-dark-back);
}

.wrapper.dark-mode .subTabBox ul li a.on {
    color: var(--color-dark-font);
    background-color: var( --color-dark-backon);
}

.wrapper.dark-mode .boardBox.list .listBox.site.casino ul li .box .index .subject, .wrapper.dark-mode .boardBox.list .listBox.site.casino ul li .box .desc {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .subTabBox ul li a {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .editBox .pageing {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .editBox .pageing .page {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .editBox .settingBox .settingList {
    background-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox .editBox .edit {
    background-color: #e49c12;
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .editBox .settingBox .order {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
    border: 0;
}

.wrapper.dark-mode .boardBox.list .listBox ul li a .subject {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .editBox .settingBox .order {
    border: 1px solid var(--color-dark-main);
    background: url(/images/etc/appearance_dark.png) 90% 50% no-repeat;
}

.wrapper.dark-mode .boardBox.view .viewList .del {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
    border: 0;
}

.wrapper.dark-mode .boardBox.view .viewList .list {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
    border: 0;
}

.wrapper.dark-mode .commentListBox .list > li .user button.line {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox form dl dd .radioButton {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .note-editor.note-frame {
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .panel-default > .panel-heading {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
}

.wrapper.dark-mode .note-btn.btn.btn-default.btn-sm {
    background-color: var( --color-dark-back);
}

.wrapper.dark-mode .note-palette *, .wrapper.dark-mode .dropdown-fontname *, .wrapper.dark-mode .note-dimension-display, .wrapper.dark-mode .modal-content * {
    color: var(--color-dark-back);
}

.wrapper.dark-mode .modal-content input[type="text"], .wrapper.dark-mode .modal-content input[type="file"] {
    background-color: var(--color-white);
}

.wrapper.dark-mode .dropdown-menu.dropdown-style li * {
    color: var(--color-dark-back);
}

.wrapper.dark-mode .boardBox form dl dd > button, .wrapper.dark-mode .boardBox form dl dd .fileBox label .tag, .wrapper.dark-mode .boardBox form dl dd > input[type="radio"]:checked + .radioButton {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .boardBox form dl dd > select {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .boardBox form dl dd .fileBox label {
    color: var(--color-dark-font);
    background-color: #464646;
}

.wrapper.dark-mode .boardBox form dl dd .fileBox label .select {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .boardBox form .requireBtn > button.submit {
    background-color: #e49c12;
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .boardBox form .requireBtn > button.cancle {
    background-color: var( --color-menu-text);
    border-color: var( --color-menu-text);
}

.wrapper.dark-mode .baccarat .bettingBox * {
    color: var(--color-gray-black);
}

.wrapper.dark-mode .betcolor .betBox .bet .btn button * {
    color: var(--color-white);
}

.wrapper.dark-mode .betcolor .betBox .betForm * {
    color: var(--color-gray-black);
    border-color: var(--color-gray-border);
}

.wrapper.dark-mode .betcolor .betBox .bettingPoint * {
    color: var(--color-gray-black);
    border-color: var(--color-gray-border);
}

.wrapper.dark-mode .betcolor .betBox .nowPoint * {
    color: var(--color-gray-black);
    border-color: var(--color-gray-border);
}

.wrapper.dark-mode .betcolor .betBox .nowPoint input {
    color: var(--color-dark-font);
    border-color: var(--color-gray-border);
}

.wrapper.dark-mode .betcolor .betPointArea {
    border-color: var(--color-gray-border);
}

.wrapper.dark-mode .indexBoxW {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
}

.wrapper.dark-mode .boardBox.list .listBox ul {
    background-color: var(--color-dark-main);
    border-top: 0;
    padding: 10px;
}

.wrapper.dark-mode .boardBox.list .listBox ul li:not(:last-child) {
    border-color: var( --color-gray-text);
}

.wrapper.dark-mode .boardBox.list .listBox ul li a span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .listBox ul li span {
    color: var(--color-dark-font);
}

/* .wrapper.dark-mode .boardBox.list .listBox ul li .state { position: absolute; top: -5px; right: 5px; } */
.wrapper.dark-mode .boardBox.list .listBox ul li .subject .comment {
    margin-left: 5px;
    color: var(--color-orange-bright);
}

.wrapper.dark-mode .boardBox .transactionInfo .transactionTitle {
    color: var(--color-dark-font);
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .boardBox .transactionInfo .pointInfo .info span {
    color: var(--color-gray-border-bottom);
}

.wrapper.dark-mode .boardBox .transactionInfo .pointArea .minPoint {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .boardBox .transactionInfo .pointArea .maxPoint {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .boardBox .transactionInfo .pointArea .maxPoint span, .wrapper.dark-mode .boardBox .transactionInfo .pointArea .minPoint span {
    color: var(--color-white);
}

.wrapper.dark-mode .boardBox.view .text .siteCode {
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .boardBox.view .sub .name {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .countButton button {
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .boardBox.view .countButton button.disCount {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .commentBox {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .commentBox .comment {
    background-color: #464646;
}

.wrapper.dark-mode .commentBox .box #submit {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
    border-color: var(--color-dark-backon);
}

.wrapper.dark-mode .commentBox .box #submit:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-backon);
}

.wrapper.dark-mode .commentListBox .list > li {
    border-color: var( --color-gray-text);
}

.wrapper.dark-mode .commentListBox .list > li .who .isme {
    background-color: var(--color-dark-backon);
    border-color: var(--color-dark-backon);
    color: var(--color-company-condition);
}

.wrapper.dark-mode .commentListBox .list > li.blind {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-wrapper);
}

.wrapper.dark-mode .commentListBox .list > li .alert {
    background-color: var(--color-dark-backon);
    border-color: var(--color-dark-backon);
    color: var(--color-white);
}

.wrapper.dark-mode .commentListBox .list > li.depth1, .wrapper.dark-mode .commentListBox .list > li.depth2, .wrapper.dark-mode .commentListBox .list > li.depth3 {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-main);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .calendarBox .commentBox form {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .calendarBox .attendanceListBox .index {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border: none;
}

.wrapper.dark-mode .calendarBox * {
    color: var(--color-dark-font);
    border-color: var(--color-gray-text);
}

.wrapper.dark-mode .calendarBox .commentBox .noticeBox {
    border-color: var(--color-gray-text);
}

.wrapper.dark-mode .calendarBox .attendanceListBox .date {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .calendarBox .attendanceListBox ul li {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .calendarBox .commentBox form .commArea button {
    background-color: var( --color-dark-backon);
    border-color: var( --color-dark-back);
}

.wrapper.dark-mode .rankingBox .rankBox .title {
    background-color: var( --color-dark-backon);
}

.wrapper.dark-mode .memberEditBox {
    background-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .conversionBox .companyList .list li {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .conversionBox .companyList .list li .box .info span.company {
    background-color: var( --color-dark-back);
    color: var(--color-dark-font);
    border-color: var( --color-gray-text);
}

.wrapper.dark-mode .conversionBox .companyList .list li .info span.min {
    border-color: var( --color-gray-text);
}

.wrapper.dark-mode .conversionBox .companyList .list li .info span.max {
    border-color: var( --color-gray-text);
}

.wrapper.dark-mode .conversionBox .companyList .list li .condition {
    border-color: var( --color-gray-text);
}

.wrapper.dark-mode .commentListBox .list > li .admin button {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .commentListBox .list > li .admin button.openComment {
    color: var(--color-gray-black);
}

.wrapper.dark-mode .commentReplyBox {
    background-color: var( --color-dark-back);
}

.wrapper.dark-mode .commentReplyBox .comment {
    background-color: #464646;
}

.wrapper.dark-mode .commentReplyBox .box #submit {
    background-color: var(--color-dark-backon);
    border: 1px solid var( --color-dark-backon);
}

.wrapper.dark-mode .commentReplyBox .box #submit:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-backon);
}

.wrapper.dark-mode .commentListBox .list > li.depth3 {
    background-color: var( --color-dark-main);
    border-color: var( --color-dark-main);
}

.wrapper.dark-mode .companyList .list li .conversion {
    background-color: var( --color-dark-backon);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .companyList .list li .conversion:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-backon);
}

.wrapper.dark-mode .conversionBox .companyList .index {
    background-color: var( --color-dark-backon);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .text .title {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .text .event {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .text .joinEvent {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .text .info {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .prevStep {
    background-color: var(--color-blue-light);
    opacity: 0.5;
}

.wrapper.dark-mode .nextStep {
    background-color: var(--color-blue-light);
    opacity: 0.5;
}

.wrapper.dark-mode .boardBox.view .text .box dl {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .boardBox.view .text .box dl div dt {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .text .box dl div dd {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view div {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .voteBox .subject {
    background-color: var( --color-dark-backon);
}

.wrapper.dark-mode .boardBox.view .voteBox .box .pointAddBox .box form .buttonBox button {
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.view .voteBox .box .pointAddBox .box form .buttonBox button:hover {
    border-color: var( --color-dark-backon);
}

.wrapper.dark-mode .boardBox.view .voteBox .box .vote .voteSel {
    color: var(--color-dark-font);
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .boardBox.view .voteBox .subject .count b {
    color: var(--color-company-condition);
}

.wrapper.dark-mode .boardBox.view .voteBox .box .vote .voteSel.on {
    color: var(--color-company-condition);
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .boardBox.view .voteBox .box .vote .voteSel:hover {
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .boardBox.view .voteBox .box .vote.blank::before {
    background-color: var(--color-dark-main);
    opacity: .7;
}

.wrapper.dark-mode .boardBox.view .voteBox .box .pointAddBox .box form input[type="text"] {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-main);
}

.wrapper.dark-mode .boardBox.view .answer .reply {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode.service .myinfoBox #myinfoForm {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode.service .myinfoBox form dl dd > span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode input, .wrapper.dark-mode textarea {
    color: var(--color-dark-font);
    background-color: #464646;
}

.wrapper.dark-mode.service .myinfoBox form dl dd input[type="text"] {
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode.service .myinfoBox .requireBtn > button.submit {
    background-color: var(--color-dark-backon);
    border: 1px solid var( --color-dark-backon);
}

.wrapper.dark-mode.service .myinfoBox .requireBtn > button.submit:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-backon);
}

.dark-mode .content {
    background-color: var(--color-dark-wrapper);
}

.dark-mode .couponBox {
    background-color: var(--color-dark-backon);
}

.dark-mode .couponBox .title {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .couponBox .box, .dark-mode .couponBox .buttonBox {
    background-color: var(--color-dark-wrapper);
    color: var(--color-dark-font);
}

.dark-mode .couponBox .buttonBox button {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .couponBox .box input {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentBox dl dt, .dark-mode .infoPopupBox .contentBox dl dd {
    border-color: var( --color-dark-main);
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox {
    background-color: var(--color-dark-wrapper);
}

.dark-mode .infoPopupBox .titleBox {
    background-color: var(--color-dark-backon);
}

.dark-mode .infoPopupBox .titleBox span {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox .box {
    background-color: var(--color-dark-wrapper);
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note ul li {
    color: var(--color-dark-font);
    border-color: var( --color-dark-main);
}

.dark-mode .infoPopupBox .contentsBox ul li {
    border-color: var(--color-dark-main);
}

.dark-mode .infoPopupBox .contentsBox .tabBox ul li button {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
}

.dark-mode .infoPopupBox .contentsBox .tabBox ul li.on button {
    color: var(--color-dark-font);
    background-color: var( --color-dark-backon);
    border-color: var( --color-dark-backon);
}

.dark-mode .infoPopupBox .contentsBox .tabBox .desc .top {
    color: var(--color-dark-font);
    background-color: var( --color-dark-wrapper);
}

.dark-mode .infoPopupBox .contentsBox .tabBox .desc .notice {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border: none;
}

.dark-mode .infoPopupBox .contentsBox .tabBox .desc .notice .point {
    color: var(--color-white);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note dl dd input, .dark-mode .infoPopupBox .contentsBox .box .list .note dl dd textarea {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
    border-color: var( --color-dark-back);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note .btnBox button {
    color: var(--color-dark-font);
    background-color: var( --color-dark-backon);
    border-color: var( --color-dark-backon);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note .btnBox button:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-backon);
}

.dark-mode .infoPopupBox .tabBox .info, .dark-mode .infoPopupBox .tabBox .total {
    color: var(--color-dark-font);
    background-color: var( --color-dark-back);
}

.dark-mode .infoPopupBox .contentsBox ul {
    background-color: var( --color-dark-wrapper);
}

.dark-mode .infoPopupBox .contentsBox ul li button {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox ul li .copy * {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note ul li .copy .subject a {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note ul li .copy .subject a {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox .box .list .note .allClear button {
    color: var(--color-dark-font);
    background-color: var(--color-dark-back);
}

.dark-mode .infoPopupBox .contentsBox {
    border-color: var(--color-dark-main);
}

.dark-mode .addpopupBox .titleBox {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .addpopupBox .ttl {
    background-color: var(--color-dark-wrapper);
    color: var(--color-dark-font);
}

.dark-mode .addpopupBox .inputBox input {
    background-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.dark-mode .addpopupBox .inputBox button {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .addpopupBox ul li {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .contentsBox .box .noteView, .dark-mode .infoPopupBox .contentsBox .box .noteView .top {
    background-color: var(--color-dark-wrapper);
}

.dark-mode .infoPopupBox .contentsBox .box .noteView .buttonBox button {
    background-color: var(--color-dark-backon);
}

.dark-mode .pageBox {
    color: var(--color-dark-font);
    background-color: var( --color-dark-wrapper);
}

.dark-mode .pageBox button.now span {
    color: var(--color-white);
}

.dark-mode .infoPopupBox .tabBox .info span {
    color: var(--color-dark-font);
    background-color: var( --color-dark-main);
}

.dark-mode .infoPopupBox .tabBox .info span.totalPoint {
    color: var(--color-dark-font);
    background-color: var( --color-dark-wrapper);
}

.dark-mode .infoPopupBox .contentsBox ul li .copy .etc {
    color: var(--color-dark-font);
}

.dark-mode .couponStorageBox ,.dark-mode .couponStorageBox .titleBox {
    background-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .couponStorageBox > div {
    background-color: var( --color-dark-wrapper);
    color: var(--color-dark-font);
}

.dark-mode .couponStorageBox .goodsList .title, .dark-mode .couponStorageBox .drawRequest span {
    background-color: var( --color-dark-backon);
    color: var(--color-dark-font);
}

.dark-mode .alarmPopup {
    background-color: var( --color-dark-wrapper);
}

.dark-mode .alarmPopup .bell span {
    color: var(--color-dark-font);
}

.dark-mode .alarmPopup .buttonBox {
    border-color: var(--color-dark-main);
}

.dark-mode .alarmPopup .buttonBox button {
    color: var(--color-dark-font);
}

.wrapper.dark-mode.service .findBox form dl dd input {
    background-color: var( --color-dark-backon);
}

.wrapper.dark-mode.service .findBox form dl dd input {
    background-color: var( --color-dark-backon);
}

.wrapper.dark-mode .searchList .searchBox {
    background-color: transparent;
}

.wrapper.dark-mode .searchList .searchBox .box .searchForm .inputBox input {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .searchList .searchBox .box .searchForm .searchSel {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-main);
}

.wrapper.dark-mode .searchList .tabBox ul {
    border-color: var(--color-dark-main);
}

.wrapper.dark-mode .searchList .tabBox ul li {
    border-color: var(--color-dark-back);
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .searchList .tabBox ul li.on {
    border-color: var(--color-dark-backon);
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .searchList .searchBox .box .countBox div .word {
    color: var(--color-white);
}

.wrapper.dark-mode .searchList .tabBox ul li .count {
    background: var(--color-dark-wrapper);
    color: var(--color-white);
}

.wrapper.dark-mode .searchList .searchBox .box .countBox > div {
    color: var(--color-dark-font);
    border-color: var(--color-dark-main);
}

.wrapper.dark-mode .searchList .list .subTitle {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .searchList .list ul li .box .subjectBox {
    background-color: var(--color-dark-backon);
    border-color: var(--color-dark-main);
}

.wrapper.dark-mode .searchList .list ul li .box .date {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .searchList .list ul li .box .subjectBox .word {
    color: var(--color-white);
}

.wrapper.dark-mode .searchList .list ul li .box .descBox div {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .searchBox, .wrapper.dark-mode .boardBox.list .searchBox form , .wrapper.dark-mode .boardBox.list .searchBox .radioBox {
    background: var(--color-dark-back)
}

.wrapper.dark-mode .boardBox.list .searchBox .searchSel, .wrapper.dark-mode .boardBox.list .searchBox .inputBox input {
    background-color: var(--color-dark-backon)
}

.wrapper.dark-mode .header .topHeader ul .search .glasses img {
    display: none;
}

.wrapper.dark-mode .header .topHeader ul .search .glasses {
    background: url(../images/etc/glasses_dark.png) no-repeat center/contain;
    top: 50%;
    width: 18px;
    height: 18px;
}

.wrapper.dark-mode .searchList .searchBox .box .searchForm .inputBox .glasses {
    background: url(../images/etc/glasses_dark.png) no-repeat center/contain;
    top: 50%;
    width: 18px;
    height: 18px;
}

.wrapper.dark-mode .searchList .searchBox .box .searchForm .inputBox .glasses img {
    display: none;
}

.wrapper.dark-mode .boardBox.list .editBox .settingBox .search {
    width: 20px;
    height: 20px;
    background: url(../images/etc/glasses_dark.png) no-repeat center/contain;
}

.wrapper.dark-mode .boardBox.list .searchBox .inputBox .glasses {
    width: 20px;
    height: 20px;
    background: url(../images/etc/glasses_dark.png) no-repeat center/contain;
}

.wrapper.dark-mode .boardBox.list .searchBox .inputBox .glasses img {
    display: none;
}

.wrapper.dark-mode .freeGameBox .gameBox .noticeBox, .wrapper.dark-mode .freeGameBox .gameBox .box .gamedata {
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .freeGameBox .gameBox .noticeBox span, .wrapper.dark-mode .freeGameBox .gameBox .box .gamedata div span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .freeGameBox .gameBox .box .gamedata .dataBox span {
    border-color: var(--color-company-condition);
}

.wrapper.dark-mode .freeGameBox .gameBox .info .title::before, .wrapper.dark-mode .freeGameBox .gameBox .subject::before {
    background-color: var(--color-dark-font);
}

.wrapper.dark-mode .freeGameBox .gameBox .info .desc {
    background-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .freeGameBox .cateBox ul li {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .freeGameBox .cateBox ul li:hover {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .freeGameBox .cateBox ul li button {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .casinoInfo .topBox {
    background-color: transparent;
}

.wrapper.dark-mode .casinoInfo .topBox .desc {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .casinoInfo .copyBox {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .casinoInfo .copyBox h3 {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .casinoInfo .copyBox .copy .title {
    color: var(--color-dark-white);
}

.wrapper.dark-mode .casinoInfo .copyBox .copy .title::before {
    color: var(--color-white);
    opacity: .5;
}

.wrapper.dark-mode .casinoInfo .copyBox .copy span b {
    background-color: var(--color-dark-wrapper);
    color: var(--color-white);
}

.wrapper.dark-mode .casinoInfo .copyBox .copy .subCopy h4 {
    color: var(--color-dark-white);
}

.wrapper.dark-mode .casinoInfo .copyBox .copy .subCopy h4 b {
    background-color: var(--color-dark-backon);
}

.wrapper.dark-mode .boardBox.list .listBox.site ul li .box .index .subject {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .boardBox.list .listBox ul li .subject .new {
    color: var(--color-white);
}

.wrapper.dark-mode .lotteryBox .lotteryBtnBox button {
    color: var(--color-dark-font);
    background-color: var(--color-dark-back);
    border-color: var(--color-dark-back);
}

.wrapper.dark-mode .lotteryBox .noticeBox {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-main);
}

.wrapper.dark-mode .lotteryBox .noticeBox span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .lotteryBox .normal .title, .wrapper.dark-mode .lotteryBox .high .title {
    background-color: var(--color-dark-backon);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .lotteryBox .normal ul, .wrapper.dark-mode .lotteryBox .high ul {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .lotteryBox .normal ul li span, .wrapper.dark-mode .lotteryBox .high ul li span {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .lotteryBox ul li .confirm {
    background-color: var(--color-dark-backon);
    border-color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .index {
    background-color: var(--color-dark-back);
}

.dark-mode .infoPopupBox .index span {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .resultBox .list ul li .box span {
    color: var(--color-dark-font);
}

.dark-mode .infoPopupBox .resultBox .list ul li .box span .lotteryConfirm {
    background-color: var(--color-dark-backon);
    border: 1px solid var( --color-dark-backon);
}

.dark-mode .infoPopupBox .resultBox .list ul li .box span .lotteryConfirm:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-backon);
    color: var(--color-dark-backon);
}

.dark-mode .infoPopupBox .resultBox .list ul li .box span .requestHigh {
    background-color: var(--color-dark-back);
    border: 1px solid var( --color-dark-back);
}

.dark-mode .dark-mode .infoPopupBox .resultBox .list ul li .box span .requestHigh:hover {
    background-color: var( --color-white);
    border-color: var( --color-dark-back);
    color: var(--color-dark-back);
}

.dark-mode .infoPopupBox .lotteryConfirmBox button.normalConfirmAll {
    background-color: var( --color-dark-main);
    border-color: var( --color-dark-main);
    color: var(--color-dark-font);
}

.dark-mode .boardBox.view .boardAnswerBox .message p {
    color: var(--color-dark-font);
}

.wrapper.dark-mode .footNavi .box a.home::before {
    background-color: var(--color-dark-wrapper);
}

.wrapper.dark-mode .boardBox.list .board_boxP .listBox .list .link .txt {
    color: var(--color-dark-font);
}

/* .wrapper.dark-mode .lotteryBox .normal ul li, .wrapper.dark-mode .lotteryBox .high ul li {border-color: var(--color-dark-main);}

/* .wrapper.dark-mode .wrapper .leftMenu .navBox ul li.gnb .lnb li a { color: var(--color-white); } */
@media screen and (min-width: 1000px) {
    .wrapper.dark-mode .header .topHeader ul li input {
        background-color: var(--color-dark-backon);
        border-color: var(--color-dark-backon);
    }

    .wrapper.dark-mode .leftMenu .navBox ul li.gnb:hover .lnb {
        height: auto;
    }
}

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.wrapper .rightContain {
    width: 100%;
}

.wrapper .container {
    padding: 0;
}

.wrapper .container .frame {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.wrapper .container .frame main {
    width: 100%;
}

.wrapper:not(.home) > .container .frame main h2 {
    text-indent: -9999px;
    line-height: 0;
    margin: 0;
}

/* 헤더 */
.header h1 {
    text-indent: -9999px;
    line-height: 0;
    margin: 0;
}

.header .topHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative;
    height: 60px;
    background-color: var(--color-gray-dark);
}

.header .topHeader .box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.header .topHeader a.login {
    margin-right: 10px;
    color: var(--color-white);
    background-color: var(--color-company-sub);
    font-weight: 500;
    border: 2px solid var(--color-gray-dark);
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 10px;
}

.header .topHeader a.join {
    color: var(--color-white);
    background-color: var(--color-company-sub);
    font-weight: 500;
    border: 2px solid var(--color-gray-dark);
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 10px;
}

.header .topHeader .point {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-white);
    background-color: var(--color-company-sub);
    font-weight: 500;
    border: 2px solid var(--color-gray-dark);
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 10px;
}

.header .topHeader .alarm {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-white);
    background-color: var(--color-company-sub);
    font-weight: 500;
    border: 2px solid var(--color-gray-dark);
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 10px;
}

.wrapper .header .topHeader .list {
    width: 100%;
    position: absolute;
    margin-top: 5px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: visible;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

.wrapper .header .topHeader .list.on {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
}

.wrapper .header .topHeader .list button {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.wrapper .header .topHeader .list button:hover {
    background: #f0f0f0;
}

.wrapper .header .topHeader .list button span {
    color: var(--color-black);
}

.wrapper .header .topHeader .list a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.wrapper .header .topHeader .list a:hover {
    background: #f0f0f0;
}

.wrapper .header .topHeader .list a span {
    color: var(--color-black);
}

.wrapper .header .topHeader .list::before {
    content: "";
    position: absolute;
    top: -10px;
    left: calc(50% - 7px);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid white;
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.1));
}

.wrapper.dark-mode .header .topHeader a.login {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .header .topHeader a.join {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .header .topHeader .point {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

.wrapper.dark-mode .header .topHeader .alarm {
    background-color: var(--color-dark-main);
    border-color: var(--color-dark-back);
    color: var(--color-dark-font);
}

/* .header .topHeader a.accessor { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--color-gray-dark); background-color: var(--color-gray-light); font-weight: 500; border: 2px solid var(--color-gray-light);  transition: all 0.3s; padding: 8px 10px 8px 16px; border-radius: 10px;} */
.header .topHeader a.accessor span.count {
    background-color: var(--color-accent-pink);
    color: var(--color-white);
    border-radius: 15px;
    padding: 5px 10px;
    margin-left: 5px;
    text-align: center;
}

.header .infoBoxM {
    position: relative;
}

.infoBox .modeBtn {
    top: 13px;
    right: 45px;
    left: unset;
}

@keyframes sparkle {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.8);
    }
}

.sparkle {
    animation: sparkle 1s infinite;
}

@media screen and (min-width: 1000px) {
    .header .topHeader .box {
        display:none;
    }

    .wrapper .rightContain {
        width: 100%;
        margin-left: 60px;
        transition: margin-left 0.3s ease;
    }

    .wrapper .container .frame main {
        width: 75%;
    }

    .wrapper .rightContain.active {
        margin-left: 330px;
    }
}

.modeBtn .toggle-switch {
    width: 40px;
    height: 20px;
    background-color: var(--color-white);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--color-black);
}

.modeBtn .toggle-switch .toggle-circle {
    width: 14px;
    height: 14px;
    background-color: var(--color-black);
    border-radius: 50%;
    transition: transform 0.3s, background-color 0.3s;
    transform: translateX(0);
}

/* 다크 모드 상태에서의 토글 스위치 */
.modeBtn.dark-mode .toggle-switch {
    background-color: var(--color-white);
}

.modeBtn.dark-mode .toggle-switch .toggle-circle {
    transform: translateX(20px);
    background-color: var(--color-black);
}

.header .topHeader ul {
    display: none;
}

.header .topHeader ul .search {
    position: relative;
}

.header .topHeader ul .search .glasses {
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
    right: 10px;
}

.header .topHeader ul .search .glasses img {
    max-width: 18px;
    width: 100%;
}

.header .container {
    position: relative;
    width: 100%;
}

.header .dim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.header.on .dim {
    display: block;
}

.header .frame {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.wrapper .leftMenu .navBox .openNavBtn {
    display: none;
}

.header .top_bg .snow_bg_src {
    width: 100%;
    height: 200px;
}

.wrapper .leftMenu {
    width: 100%;
    display: none;
}

.wrapper .leftMenu .navBoxside {
    display: none;
}

.wrapper .leftMenu .navBox {
    width: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 9;
    height: 100%;
    padding: 15px;
    background-color: var(--color-white);
}

.wrapper .leftMenu .navBox .logo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background-color: var(--color-gray-dark);
    border-radius: 10px;
    margin-bottom: 20px;
    border: 5px solid var(--color-gray-dark);
}

.wrapper .leftMenu .navBox .logo a {
    display: block;
    width: 140px;
    height: 40px;
    background: url(../images/logo/logo-white.webp) left 5px center no-repeat;
    background-size: contain;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    color: transparent;
}

.wrapper .leftMenu .navBox .loginBox {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 40px 10px 25px 10px;
}

.wrapper .leftMenu .navBox .loginBox img {
    margin-bottom: 25px;
}

.wrapper .leftMenu .navBox .loginBox form {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.wrapper .leftMenu .navBox .loginBox .toggle-wrapper .toggle-label {
    color: var(--color-gray-black);
}

.wrapper.dark-mode .leftMenu .navBox .loginBox .toggle-wrapper .toggle-label {
    color: var(--color-dark-font);
}

.wrapper .leftMenu .navBox .loginBox form input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 1px solid var(--color-dark-backon);
}

.wrapper .leftMenu .navBox .loginBox form .submit {
    padding: 10px 15px;
    text-align: center;
    border: 1px solid var(--color-accent-yellow);
    background-color: var(--color-accent-yellow);
    color: var(--color-white);
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.wrapper .leftMenu .navBox .loginBox form .submit:hover {
    font-weight: 700;
    background: var(--color-white);
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
}

.wrapper .leftMenu .navBox .infoBox {
    border-radius: 0;
}

.wrapper .leftMenu .navBox .infoBox .profileBox {
    border-radius: 0;
}

.wrapper .leftMenu .navBox > ul {
    margin-bottom: 100px;
    padding-bottom: 100px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--color-gray-border);
}

.wrapper .leftMenu .navBox ul li.gnb > button,.wrapper .leftMenu .navBox ul li.gnb > a {
    display: block;
    position: relative;
    font-size: 16px;
    width: 100%;
    padding: 10px 45px;
    background: var(--color-white);
    text-align: left;
    color: var(--color-gray-dark);
}

.wrapper .leftMenu .navBox ul li.gnb.sub > button::after,.wrapper .leftMenu .navBox ul li.gnb.sub > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(/images/etc/menu-plus-black.png) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb.on > button::after,.wrapper .leftMenu .navBox ul li.gnb.on > a::after {
    transform: translateY(-50%) rotate(-90deg);
    background: url(/images/etc/menu-icon-arrow.png) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb .lnb {
    display: none;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-white);
}

.wrapper .leftMenu.open .navBox ul li.gnb.on .lnb {
    display: block;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb .lnb {
    background: var(--color-gray-dark);
}

.wrapper .leftMenu .navBox ul li.gnb .lnb li > a {
    margin: 0px 40px;
    padding: 10px 0;
    background-color: var(--color-white);
    font-size: 16px;
    text-align: left;
    line-height: 20px;
    display: block;
    border-left: 3px solid var(--color-company-desc);
    padding-left: 10px;
}

.wrapper .leftMenu .navBox ul li.lnb a {
    display: block;
    font-size: 14px;
    line-height: 42px;
    font-weight: 400;
    padding-left: 10px;
}

.wrapper .header .top_logo a {
    display: block;
    min-width: 120px;
    max-width: 340.5px;
    height: 25px;
    background: url(/images/logo/logo-white.webp) 0 0 no-repeat;
    background-size: contain;
    object-fit: fill;
}

.wrapper.dark-mode .header .top_logo a {
    background: url(/images/logo/logo-white.webp) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb.on .lnb li.on a {
    color: var(--color-accent-yellow);
}

.wrapper .leftMenu .navBox ul li.gnb > button.profile::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-profile.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > a.sports::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-sports.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.site::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-guar.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.sport::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-anal.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.community::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-comm.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.eatAndRun::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-warn.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.liveScore::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-score.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.eventAndconversion::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-event.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.pointGame::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-game.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > a.sportsnews::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-news.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper .leftMenu .navBox ul li.gnb > button.notiAndInqu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-noti.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.profile::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-profile-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > a.sports::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-sports-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.site::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-guar-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.sport::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-anal-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.community::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-comm-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.eatAndRun::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-warn-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.liveScore::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-score-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.eventAndconversion::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-event-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.pointGame::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-game-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > a.sportsnews::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-news-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb > button.notiAndInqu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url(/images/etc/menu-icon-noti-dark.svg) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .header .container .top_logo a {
    background: url(/images/logo/logo-white.webp) 0 0 no-repeat;
    background-size: contain;
}

.header .infoBoxM .modeBtn {
    top: 13px;
}

.bannerBox.main_banner {
    margin-top: 30px;
}

.wrapper.dark-mode .leftMenu .navBox .loginBox {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .leftMenu .navBox > ul {
    background-color: var(--color-dark-back);
    background-color: var(--color-company-sub);
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb button::after,.wrapper.dark-mode .leftMenu .navBox ul li.gnb a::after {
    background: url(/images/etc/menu-plus-white.png) 0 0 no-repeat;
    background-size: contain;
}

.wrapper.dark-mode .leftMenu .navBox ul li.gnb .lnb li {
    background-color: var(--color-dark-back);
    border-bottom : 0;
}

@media screen and (max-width: 350px) {
    .header .top_logo {
        transform: translate(5%, -50%);
    }

    .header .top_logo a {
        min-width: 100px;
    }
}

@media screen and (min-width: 1000px) {
    .wrapper .leftMenu .navBox .openNavBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        line-height: 0;
        text-indent: -9999px;
        color: transparent;
        z-index: 11;
    }

    .wrapper .leftMenu .navBox .openNavBtn > div {
        position: relative;
        width: 17px;
        height: 16px;
    }

    .wrapper .leftMenu .navBox .openNavBtn span {
        position: absolute;
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-white);
        transition: transform 0.5s, width 0.2s, opacity 0.2s, background-color 0.5s;
    }

    .wrapper .leftMenu .navBox .openNavBtn span:nth-child(1) {
        top: 0;
        transform-origin: top left;
    }

    .wrapper .leftMenu .navBox .openNavBtn span:nth-child(2) {
        top: 50%;
    }

    .wrapper .leftMenu .navBox .openNavBtn span:nth-child(3) {
        top: 100%;
        transform-origin: bottom left;
    }

    .header .top_logo {
        display: block;
    }

    .wrapper .header .top_logo a {
        display: block;
        min-width: 135px;
        max-width: 340.5px;
        height: 30px;
        background: url(/images/logo/logo-black.webp) 0 0 no-repeat;
        background-size: contain;
        object-fit: fill;
    }

    .header .topHeader a.login {
        display: none;
    }

    .header .topHeader a.join {
        display: none;
    }

    .wrapper .leftMenu.active .navBox {
        transform: translateX(0);
        opacity: 1;
        width: 330px;
    }

    .wrapper .leftMenu.active .navBoxside {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    .wrapper .leftMenu.open .navBox {
        transition: none;
        transform: translateX(0%);
        opacity: 1;
        width: 330px;
    }

    .wrapper .leftMenu.open .navBoxside {
        transition: none;
        opacity: 0;
        display: none;
    }

    .wrapper .leftMenu:not(.active) .navBoxside .gnb {
        opacity: 1;
        transform: translateY(0);
    }

    .wrapper .leftMenu.active .navBoxside .gnb {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 1s ease, transform 1s ease;
    }

    .wrapper .leftMenu {
        display: flex;
        position: relative;
        transition: width 0.4s ease 0.5s;
    }

    .wrapper .leftMenu .navBoxside {
        transform: translateX(0);
        opacity: 1;
        transition: all 0.4s ease;
        display: block;
    }

    .wrapper .leftMenu .navBoxside .top {
        margin-bottom: 10px;
        display: block;
        background-color: var(--color-gray-dark);
    }

    .wrapper .leftMenu .navBoxside .openNavBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        line-height: 0;
        text-indent: -9999px;
        color: transparent;
        z-index: 11;
    }

    .wrapper .leftMenu .navBoxside .openNavBtn > div {
        position: relative;
        width: 25px;
        height: 16px;
    }

    .wrapper .leftMenu .navBoxside .openNavBtn span {
        position: absolute;
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-white);
        transition: transform 0.5s, width 0.2s, opacity 0.2s, background-color 0.5s;
    }

    .wrapper .leftMenu .navBoxside .openNavBtn span:nth-child(1) {
        top: 0;
        transform-origin: top left;
    }

    .wrapper .leftMenu .navBoxside .openNavBtn span:nth-child(2) {
        top: 50%;
    }

    .wrapper .leftMenu .navBoxside .openNavBtn span:nth-child(3) {
        top: 100%;
        transform-origin: bottom left;
    }

    .wrapper .leftMenu .navBoxside > .gnb {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .wrapper .leftMenu .navBoxside ul li {
        margin-bottom: 10px;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button,.wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > a {
        background-color: var(--color-dark-back);
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button,.wrapper .leftMenu .navBoxside ul li.gnb > a {
        width: 46px;
        display: block;
        height: 46px;
        position: relative;
        text-indent: -9999px;
        font-size: 0;
        line-height: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: none;
        background-color: #fff;
        color: #000;
        /* 필요 시 조정 */
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        border-radius: 4px;
        /* 부드러운 느낌 */
    }

    .wrapper .leftMenu .navBoxside ul li.gnb a:hover, .wrapper .leftMenu .navBoxside ul li.gnb button:hover {
        background-color: var(--color-accent-yellow);
        /* 회색 배경에 어울리는 자연스러운 hover */
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb a:hover, .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb button:hover {
        background-color: var(--color-dark-backon);
        /* 회색 배경에 어울리는 자연스러운 hover */
    }

    .tooltip-text {
        position: absolute;
        bottom: 120%;
        /* 버튼 위 */
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 10;
        text-indent: 0;
        line-height: 1.5;
    }

    .tooltip-text::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #333;
    }

    /* 호버 시 말풍선 보이기 */
    .gnb a:hover .tooltip-text, .gnb button:hover .tooltip-text {
        opacity: 1;
        visibility: visible;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb a:hover::after, .gnb a:hover::before, .gnb button:hover::after, .gnb button:hover::before {
        opacity: 1;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button::after {
        content: "▶";
        font-size: 8px;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 4px;
        line-height: 1.5;
        text-indent: 0;
        color: #464646;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button::after {
        color: var(--color-dark-font);
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.profile::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-profile.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > a.sports::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-sports.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.site::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-guar.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.sport::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-anal.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.community::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-comm.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.eatAndRun::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-warn.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.liveScore::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-score.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.eventAndconversion::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-event.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.pointGame::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-game.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > a.sportsnews::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-news.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu .navBoxside ul li.gnb > button.notiAndInqu::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-noti.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.profile::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-profile-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > a.sports::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-sports-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.site::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-guar-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.sport::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-anal-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.community::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-comm-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.eatAndRun::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-warn-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.liveScore::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-score-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.eventAndconversion::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-event-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.pointGame::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-game-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > a.sportsnews::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-news-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper.dark-mode .leftMenu .navBoxside ul li.gnb > button.notiAndInqu::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url(/images/etc/menu-icon-noti-dark.svg) 0 0 no-repeat;
        background-size: contain;
    }

    .wrapper .leftMenu {
        width: auto;
        display: block;
        background-color: var(--color-menuback);
        position: fixed;
        height: 100%;
    }

    .wrapper.dark-mode .leftMenu {
        background-color: var(--color-dark-main);
    }

    .wrapper .leftMenu .navBox {
        position: relative;
        width: 60px;
        transform: translateX(-100%);
        opacity: 0;
        transition: all 0.4s ease;
        padding-top: 5px;
        background-color: var(--color-menuback);
    }

    .header .top_bg {
        width: 100%;
        height: 70px;
    }

    .header .container .top_logo {
        position: absolute;
        top: 60px;
        left: 15px;
        z-index: 1;
        transform: translate(-13%, -50%);
    }

    .header .container .top_logo a {
        display: block;
        min-width: 170px;
        max-width: 340.5px;
        background: url(/images/logo/logo-black.webp) 0 0 no-repeat;
        background-size: contain;
    }

    .bannerBox.main_banner {
        margin-top: 0px;
    }

    .wrapper > .container .frame main {
        width: 75%;
    }

    .header {
        border-bottom: 1px solid var(--color-gray-border-bottom);
        margin-bottom: 30px;
    }

    .header .container {
        margin-top: -60px;
    }

    .header .topHeader {
        position: relative;
        background-color: var(--color-white);
        z-index: 1;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }

    .header .topHeader ul {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        line-height: 60px;
        padding-right: 20px;
    }

    .header .topHeader ul li {
        margin-left: 15px;
    }

    .header .topHeader ul li input {
        height: 35px;
        border-radius: 30px;
        border: 2px solid var(--color-gray-dark);
        padding-left: 10px;
    }

    .header .topHeader ul li a {
        color: var(--color-white);
        background-color: var(--color-gray-dark);
        font-weight: 500;
        border: 2px solid var(--color-gray-dark);
        transition: all 0.3s;
        padding: 8px 16px;
        border-radius: 10px;
    }

    .header .topHeader ul li a:hover {
        color: var(--color-gray-dark);
        border: 2px solid var(--color-gray-dark);
        background-color: var(--color-white);
        font-weight: 600;
    }

    /* .header .topHeader a.accessor {  color: var(--color-white); background-color: var(--color-gray-dark); font-weight: 500; border: 2px solid var(--color-gray-dark); transition: all 0.3s; }
	.header .topHeader a.accessor:hover {color: var(--color-gray-dark); border: 2px solid var(--color-gray-dark); background-color: var(--color-white); font-weight: 600;} */
    .header .menuBack {
        position: absolute;
        top: 57px;
        left: 0px;
        display: none;
        width: 100%;
        height: 527px;
        background: var(--color-menuback);
    }

    /* .header .container .top_logo { transform: translateY(-65%); } */
    .header .top_logo .logo {
        width: 300px;
        height: 150px;
        object-fit: fill;
    }

    /* .wrapper .leftMenu .navBox { overflow-y: inherit;  position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; right: 0; background: none; height: 63px;}
	.wrapper .leftMenu .navBox ul { padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%;}
	.wrapper .leftMenu .navBox ul li.gnb { width: 12.5%; position: relative; }
 	.wrapper .leftMenu .navBox ul li.gnb::after { position: relative; content: ''; position: absolute; left: 50%; transform: translateX(50%); bottom: 0px;  width: 0; height: 2px; background-color: var(--color-accent-yellow); transition: width 0.4s ease, left 0.4s ease; }
	.wrapper .leftMenu .navBox ul li.gnb:hover::after { width: 50%;  left: 0; }
	.wrapper .leftMenu .navBox ul li.gnb button,.wrapper .leftMenu .navBox ul li.gnb > a { line-height: 42px; border:0; text-align: center; position: relative; width: 100%; color: var(--color-gray-dark); font-weight: bold; }
 	.wrapper .leftMenu .navBox ul li.gnb button::after,.wrapper .leftMenu .navBox ul li.gnb > a::after { display: none; }
 	.wrapper .leftMenu .navBox ul li.gnb.on button,.wrapper .leftMenu .navBox ul li.gnb.on > a{ background-color: var(--color-white); color: var(--color-gray-dark);} 
	.wrapper .leftMenu .navBox ul li.gnb .lnb {display:none; top: 62px; border:0; width:100%; height: auto; position: absolute; background:none; border-top: 1px solid var(--color-gray-border-bottom); border-left: 1px solid rgba(196, 196, 196, 0.4); border-bottom: 1px solid var(--color-gray-border-bottom);}
	.wrapper .leftMenu .navBox ul li.gnb .lnb:last-child {border-right: 1px solid rgba(196, 196, 196, 0.4);}
	.wrapper .leftMenu .navBox ul li.gnb:hover .lnb {background: var(--color-white); height: auto;}
	.wrapper .leftMenu .navBox ul li.gnb .lnb li {height:auto; border: 0;}
	.wrapper .leftMenu .navBox ul li.gnb .lnb li:not(:last-child) { border-bottom:0; }
	.wrapper .leftMenu .navBox ul li.gnb .lnb li a {padding: 0px; text-align:center; display:block; margin:0; line-height: 52px; background: none; text-decoration: none; padding-left: 0; color: var(--color-menu-text); transition: all 0.3s;}
	.wrapper .leftMenu .navBox ul li.gnb .lnb li a:hover {font-weight: 600; color: var(--color-gray-dark);} */
    .header .infoBoxM {
        display: none;
    }
}

/* 사이드바 */
.sidebar {
    position: relative;
    display: none;
    width: 25%;
}

.sidebar .modeBtn .modeName {
    color: var(--color-gray-dark);
}

.sidebar .loginBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--color-gray-dark);
    padding: 25px 10px;
    border-radius: 20px;
}

.sidebar .loginBox img {
    margin-bottom: 25px;
}

.sidebar .loginBox form {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.sidebar .loginBox form input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.sidebar .loginBox form .submit {
    padding: 10px 15px;
    text-align: center;
    border: 1px solid var(--color-accent-yellow);
    background-color: var(--color-accent-yellow);
    color: var(--color-black);
    font-weight: bold;
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.sidebar .loginBox form .submit:hover {
    font-weight: 700;
    background: var(--color-white);
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
}

.loginBox .toggle-wrapper {
    display: flex;
    align-items: center;
}

.loginBox .toggle-wrapper .toggle-input {
    display: none;
}

.loginBox .toggle-wrapper .toggle-slider {
    position: relative;
    width: 35px;
    height: 20px;
    background-color: var(--color-gray-border-bottom);
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.loginBox .toggle-wrapper .toggle-slider::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0%);
    background: var(--color-white);
}

.loginBox .toggle-wrapper .toggle-input:checked + .toggle-slider {
    background-color: var(--color-black);
}

.loginBox .toggle-wrapper .toggle-input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.loginBox .toggle-wrapper .toggle-label {
    margin-left: 10px;
    font-size: 16px;
    color: var(--color-white);
}

.sidebar .loginBox .etcMenu {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.sidebar .loginBox .etcMenu > div {
    position: relative;
    width: 25%;
    text-align: center;
}

.sidebar .loginBox .etcMenu > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--color-white);
}

.sidebar .loginBox .etcMenu > div a {
    display: block;
    color: var(--color-white);
    text-align: center;
}

.infoBox {
    background: var(--color-gray-dark);
    border-radius: 20px;
}

.infoBox .profileBox {
    position: relative;
    background : var(--color-gray-light);
    padding: 15px 10px 10px 10px;
    border-radius: 15px 15px 0 0;
}

.infoBox .profileBox .logout {
    position: absolute;
    top: 10px;
    right: 10px;
}

.infoBox .profileBox .logout img {
    width: 25px;
}

.infoBox .profileBox .namebox {
    display: flex;
    align-items: center;
}

.infoBox .profileBox .namebox .name {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.infoBox .profileBox .namebox .name img {
    width: 100%;
    max-width: 25px;
}

.infoBox .profileBox .namebox .name .penalty {
    position: relative;
    display: flex;
}

.infoBox .profileBox .namebox .name .penalty .penaltyMemo {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-dark);
    border-radius: 15px;
    padding: 10px;
    z-index: 5;
    width: 200px;
    text-align: center;
}

.infoBox .profileBox .namebox .name span {
    margin-left: 5px;
}

.infoBox .profileBox .namebox .imgBox img {
    border-radius: 50%;
    margin-right: 25px;
    max-width: 60px;
}

.infoBox .profileBox .namebox .gradeBox {
    position: relative;
}

.infoBox .cardBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: var(--color-white);
}

.infoBox .cardBox .levelBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    width: 100%;
}

.infoBox .cardBox .levelBox .exp button {
    position: relative;
    color: var(--color-gray-border-bottom);
}

.infoBox .cardBox .levelBox .exp::before {
    content: 'Exp ';
}

.infoBox .cardBox .couponBox {
    padding: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

.infoBox .cardBox .couponBox button {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: var(--color-white);
}

.infoBox .cardBox .couponBox button img {
    width: 20px;
    margin-right: 5px;
}

.infoBox .cardBox .couponBox button span {
    color: var(--color-gray-border-bottom);
    margin-left: 5px;
}

.infoBox .cardBox .bar {
    position: relative;
    background: var(--color-gray-light);
    width: 100%;
    height: 10px;
    border-radius: 10px;
}

.infoBox .cardBox .bar .gauge {
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    background: var(--color-accent-yellow);
    border-radius: 10px;
}

.infoBox .cardBox .pointBox {
    position: relative;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.infoBox .cardBox .pointBox img {
    width: 18px;
    margin-right: 5px;
}

.infoBox .cardBox .pointBox .title {
    margin-right: 10px;
}

.infoBox .cardBox .pointBox .point button {
    color: var(--color-gray-border-bottom);
}

/* .infoBox .cardBox .pointBox .title:after {content: ''; position: absolute; top: 50%; left: 57px; margin-top: -5px; width: 2px; height: 10px; background: var(--color-gray-text); } */
.infoBox .cardBox .miniMenu {
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--color-gray-text);
}

.infoBox .cardBox .miniMenu .list {
    display: flex;
    justify-content: space-around;
}

.infoBox .cardBox .miniMenu .list button {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-white);
}

.sidebar .board_box {
    margin-top: 20px;
    border: 1px solid var(--color-gray-dark);
    border-radius: 20px;
}

.sidebar .board_box .tabBox {
    background-color: var(--color-gray-dark);
    border-radius: 19px 19px 0 0;
}

.sidebar .board_box .tabBox ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    justify-content: center;
}

.sidebar .board_box .tabBox ul li {
    position: relative;
    cursor: pointer;
    width: 50%;
    line-height: 40px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    color: var(--color-white);
    font-size: 15px;
    padding: 0 10px;
}

.sidebar .board_box .tabBox ul li:not(:last-child)::after {
    content: "|";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    color: var(--color-gray-text);
}

.sidebar .board_box .tabBox ul li.on {
    color: var(--color-accent-yellow);
}

.sidebar .board_box .board.week {
    display: none;
}

.sidebar .board_box .board.month {
    display: none;
}

.sidebar .board_box .board.normal {
    display: none;
}

.sidebar .board_box .board.casinoInfo {
    display: none;
}

.sidebar .board_box .board.onCasino {
    display: none;
}

.sidebar .board_box .board.comment {
    display: none;
}

.sidebar .board_box .board .listBox {
    min-height: 286.72px;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.sidebar .board_box .board .listBox .best {
    width: 31%;
    margin-right: 3.5%;
}

.sidebar .board_box .board .listBox li:nth-child(3) {
    margin-right: 0;
}

.sidebar .board_box .board .listBox .best .link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.sidebar .board_box .board .listBox .best .link .num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    width: 24px;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    border-radius: 2px;
}

.sidebar .board_box .board .listBox .best .link .thume {
    width: 100%;
}

.sidebar .board_box .board .listBox .best .link .thume img {
    width: 100%;
}

.sidebar .board_box .board .listBox .best .link .txt {
    width: 100%;
    overflow: hidden;
    color: var(--color-gray-text);
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .sidebar  .board_box .listBox { display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; padding-bottom: 20px;} */
.sidebar .board_box .listBox .list {
    width: 100%;
}

.sidebar .board_box .listBox .list .link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.sidebar .board_box .listBox .list .link .num {
    width: 10%;
    text-align: center;
    font-size: 13px;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    border-radius: 2px;
}

.sidebar .board_box .listBox .list .link .theme {
    width: 25%;
    text-align: center;
    font-size: 13px;
    overflow: hidden;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding-left: 10px;
}

.sidebar .board_box .listBox .list .link .txt {
    position: relative;
    padding-left: 10px;
    padding-right: 20px;
    width: 45%;
    overflow: hidden;
    color: var(--color-gray-dark2);
    font-size: 13px;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .board_box .listBox .list .link .txt .count {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    color: var(--color-accent-pink);
}

.sidebar .board_box .listBox .list .link .date {
    width: 20%;
    font-size: 13px;
    text-align: right;
    color: var(--color-gray-black);
}

.chattingBox {
    position: relative;
    margin-top: 20px;
    border: 1px solid var(--color-gray-dark);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
}

.chattingBox > div {
    width: 100%;
}

.chattingBox .chatHead {
    color: var(--color-white);
    border-radius: 19px 19px 0 0 ;
    background: var(--color-gray-dark);
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.chattingBox .chatHead .count {
    color: var(--color-white);
    width: 50%;
    display: flex;
}

.chattingBox .chatHead .count em {
    padding-left: 5px;
    color: var(--color-purple-dark);
}

.chattingBox .chatHead .telegram {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.chattingBox .chatHead .telegram img {
    padding-left: 5px;
}

.chattingBox .listBox {
    height: 600px;
    overflow-y: auto;
    padding: 10px;
}

.chattingBox .fixbar {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #dff3ff;
    z-index: 1;
}

.wrapper.dark-mode .chattingBox .fixbar {
    background-color: var(--color-dark-main);
}

.chattingBox .fixbar a {
    position: relative;
    padding-right: 20px;
}

.chattingBox .fixbar a::after {
    content: "";
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    right: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/link.png) 50% 50% no-repeat;
    background-size: auto;
}

.chattingBox .listBox .list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.chattingBox .listBox .list li {
    width: 100%;
}

.chattingBox .listBox .list li .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.chattingBox .listBox .list li .box .user {
    width: 60%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.chattingBox .listBox .list li .box .user img {
    padding-right: 5px;
}

.chattingBox .listBox .list li .box .data {
    display: none;
    width: 40%;
    text-align: right;
}

.chattingBox .listBox .list li .box .message {
    word-break: break-all;
    background-color: #F5F5F5;
    margin: 5px 0px 10px 5%;
    border-radius: 10px;
    position: relative;
    width: 100%;
    padding: 10px;
}

.chattingBox .listBox .list li .box .message::after {
    border-top: 10px solid #F5F5F5;
    border-left: 10px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    position: absolute;
    top: 10px;
    left: -10px;
}

.wrapper.dark-mode .chattingBox .listBox .list li .box .message {
    background-color: var(--color-dark-back);
}

.wrapper.dark-mode .chattingBox .listBox .list li .box .message::after {
    border-top: 10px solid var(--color-dark-back);
    border-left: 10px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    position: absolute;
    top: 10px;
    left: -10px;
}

.foot.chattingBox {
    position: fixed;
    padding-bottom: 15px;
    bottom: 73px;
    left: 0;
    z-index: 5;
    background-color: var(--color-white);
    height: 300px;
    width: 100%;
}

.foot.chattingBox.dark-mode {
    background-color: var(--color-dark-wrapper);
    color: var(--color-dark-font);
}

.foot.chattingBox.dark-mode .listBox .list li .box .message {
    background-color: var(--color-dark-back);
}

.foot.chattingBox.dark-mode .listBox .list li .box .message::after {
    border-top: 10px solid var(--color-dark-back);
    border-left: 10px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    position: absolute;
    top: 10px;
    left: -10px;
}

@media screen and (min-width: 1000px) {
    .foot.chattingBox {
        display: none;
    }
}

.sidebar .chattingBox .listBox::-webkit-scrollbar-track {
    background-color: var(--color-gray-light);
}

.sidebar .chattingBox .listBox::-webkit-scrollbar-track, .sidebar .chattingBox .listBox::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.sidebar .chattingBox .listBox::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-border-bottom);
}

.sidebar .chattingBox .listBox::-webkit-scrollbar-track, .sidebar .chattingBox .listBox::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.sidebar .chattingBox .listBox::-webkit-scrollbar {
    width: 10px;
}

.sidebar .side_banner {
    margin-top: 20px;
}

.sidebar .side_banner a {
    border-radius: 20px;
}

.sidebar .side_banner video {
    border-radius: 20px;
    width: 100%;
}

/* subMenuBar */
.subTabBox {
    border-bottom: 1px solid var(--color-gray-border-bottom);
}

.subTabBox ul {
    margin-bottom: 0;
    margin-top: 30px;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.subTabBox ul li a {
    width: 150px;
    height: 50px;
    line-height: 30px;
    display: block;
    padding: 10px 0;
    box-sizing: border-box;
    background-color: var(--color-white);
    color: var(--color-gray-text);
    border-top: 1px solid var(--color-gray-border);
    border-left: 1px solid var(--color-gray-border);
    text-align: center;
}

.subTabBox ul li:last-child a {
    border-right: 1px solid var(--color-gray-border);
}

.subTabBox ul li a.on {
    background-color: var(--color-gray-dark2);
    color: var(--color-white);
}

.subTabBox ul::-webkit-scrollbar {
    height: 10px;
}

.subTabBox ul::-webkit-scrollbar-track {
    background-color: var(--color-gray-light);
}

.subTabBox ul::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-border-bottom);
}

.subTabBox ul::-webkit-scrollbar-track, .subTabBox ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.bannerBox:not(.main_banner) {
    margin-top: 40px;
}

.bannerBox .noBanner {
    background: var(--color-gray-light);
    color: var(--color-gray-border-bottom);
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.bannerBox img {
    width: 100%;
}

@media screen and (min-width: 1000px) {
    .sidebar {
        display: block;
    }
}

@media screen and (min-width: 1230px) {
    .subTabBox ul li a {
        padding: 10px 15px;
    }
}

/* 홈 */
.home .section {
    margin-bottom: 25px;
}

.home .section.boardSec .frame {
    max-width: 500px;
}

.home .section .board_box {
    margin-bottom: 20px;
}

.home .section .bannerBox img {
    width: 100%;
}

.home .section .board_box {
    border: 1px solid var(--color-gray-dark);
    border-radius: 20px;
}

.home .section .board_box.site {
    width: 100%;
}

.home .section .board_box.site .copyBox ul {
    gap: 4%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.home .section .board_box.site .copyBox ul li {
    width: 48%;
}

.home .section .board_box.site .copyBox ul li .thume img {
    width: 100%;
    border-radius: 10px;
}

.home .section .board_box.site .copyBox ul li .txt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.home .section .board_box.site .copyBox ul li .txt .guar {
    padding: 2px 5px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-radius: 5px;
    display: inline-block;
}

.home .section .board_box .tabBox {
    background-color: var(--color-gray-dark);
    border-radius: 19px 19px 0 0;
}

.home .section .board_box .tabBox ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    justify-content: center;
}

.home .section .board_box .tabBox ul li {
    position: relative;
    cursor: pointer;
    width: 50%;
    line-height: 40px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    color: var(--color-white);
    font-size: 15px;
    padding: 0 10px;
}

.home .section .board_box .tabBox ul li:not(:last-child)::after {
    content: "|";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    color: var(--color-gray-text);
}

.home .section .board_box .tabBox ul li.on {
    color: var(--color-accent-yellow);
}

.home .section .board_box .board.week {
    display: none;
}

.home .section .board_box .board.month {
    display: none;
}

.home .section .board_box .board.review {
    display: none;
}

.home .section .board_box .board.declaration {
    display: none;
}

.home .section .board_box .board.onCasino {
    display: none;
}

.home .section .board_box .board.comment {
    display: none;
}

.home .section .board_box .board .listBox {
    min-height: 300px;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.home .section .board_box .board.free .listBox {
    min-height: 286.72px;
}

.home .section .board_box .board .listBox .best {
    width: 30%;
    margin-right: 1.3%;
}

.home .section .board_box .board .listBox li:nth-child(3) {
    margin-right: 0;
}

.home .section .board_box .board .listBox .best .link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.home .section .board_box .board .listBox .best .link .num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    width: 24px;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    border-radius: 2px;
}

.home .section .board_box .board .listBox .best .link .thume {
    width: 100%;
    padding-top: 80%;
}

.home .section .board_box .board .listBox .best .link .thume img {
    width: 100%;
    max-width: 100px;
}

.home .section .board_box .board .listBox .best .link .txt {
    width: 100%;
    overflow: hidden;
    color: var(--color-gray-dark2);
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .home .section .board_box .listBox { display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; padding-bottom: 20px;} */
.home .section .board_box .listBox .list {
    width: 100%;
    box-sizing: border-box;
}

.home .section .board_box .listBox .list .link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}

.home .section .board_box .listBox .list .link .num {
    width: 10%;
    text-align: center;
    font-size: 13px;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    border-radius: 2px;
}

.home .section .board_box .listBox .list .link .txt {
    position: relative;
    padding-left: 10px;
    padding-right: 20px;
    width: 75%;
    overflow: hidden;
    color: var(--color-gray-dark2);
    font-size: 13px;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home .section .board_box .listBox .list .link .txt .count {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3px;
    color: var(--color-accent-pink);
}

.home .section .board_box .listBox .list .link .date {
    width: 15%;
    font-size: 13px;
    text-align: right;
    color: var(--color-gray-black);
}

.home .section .board_box.free .num {
    width: 10%;
}

.home .section .board_box.free .theme {
    width: 30%;
    text-align: center;
}

.home .section .board_box.free .txt {
    width: 45%;
}

.home .section .board_box.free .date {
    width: 15%;
}

.home .section .board_box.desc .titleBox {
    display: flex;
    background-color: var(--color-gray-dark);
    border-radius: 19px 19px 0 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0 5px 20px;
}

.home .section .board_box.desc .titleBox .title {
    padding-left: 10px;
    color: var(--color-white);
    font-size: 20px;
    font-weight: bold;
}

.home .section .board_box.desc .copyBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 10px;
}

.home .section .board_box.desc .copyBox h3 {
    background-color: #205E42 !important;
    padding-right: 3rem !important;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 1rem !important;
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
    color: var(--color-white);
}

.home .section .board_box.desc .copyBox .copy {
    color: var(--color-gray-dark2);
    margin-bottom: 10px;
    padding: 10px;
}

.home .section .board_box.desc .copyBox .qnaBox {
    border-top: 2px solid var(--color-gray-border);
    width: 100%;
}

.home .section .board_box.desc .copyBox .qnaBox ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.home .section .board_box.desc .copyBox .qnaBox ul li {
    padding: 10px;
    width: 100%;
    cursor: pointer;
}

.home .section .board_box.desc .copyBox .qnaBox ul li:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-border-bottom);
}

.home .section .board_box.desc .copyBox .qnaBox ul li .qna .q:hover {
    font-weight: bold;
}

.home .section .board_box.desc .copyBox .qnaBox ul li .qna .q {
    padding: 10px 10px 10px 5px;
    position: relative;
    padding-left: 20px;
    color: var(--color-gray-dark2);
    display: block;
}

.home .section .board_box.desc .copyBox .qnaBox ul li .qna .q::before {
    content: "Q";
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    color: var(--color-gray-dark2);
}

.home .section .board_box.desc .copyBox .qnaBox ul li .qna .a {
    display: none;
    padding: 10px;
    background-color: var(--color-gray-dark);
    border-radius: 20px;
    color: var(--color-white);
}

/* 홈- kindBox  */
.home .section .kindBox ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.home .section .kindBox ul li {
    display: flex;
    background: var(--color-gray-dark);
    flex-direction: column;
    align-items: center;
    width: 48.5%;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.home .section .kindBox ul li img {
    margin-bottom: 10px;
}

.home .section .kindBox ul li > div {
    color: var(--color-kindBox);
    text-align: center;
}

.home .section .kindBox ul li > div span {
    display: block;
}

.home .section .kindBox ul li > div .title {
    letter-spacing: -1px;
    font-size: 16px;
    color: var(--color-accent-yellow);
    margin-bottom: 10px;
}

.board_box.sports {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    border: 1px solid var(--color-gray-dark);
    border-radius: 20px;
}

.board_box.sports .tabBox {
    border-radius: 19px 19px 0 0;
    padding-top: 30px;
    padding-bottom: 10px;
    background-color: var(--color-gray-dark);
}

.wrapper.dark-mode .board_box.sports .tabBox {
    background-color: var(--color-dark-main);
    color: var(--color-dark-font);
}

.board_box.sports .tabBox .sportsFilter {
    padding-right: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 0px;
}

.board_box.sports .tabBox .sportsFilter input[type="date"] {
    text-indent: -9999px;
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.board_box.sports .tabBox .sportsFilter input[type="date"]::-webkit-date-and-time-value {
    visibility: hidden;
}

.board_box.sports .tabBox .sportsFilter input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    color: transparent;
    background: url('/images/etc/calendar1.svg') no-repeat center;
}

.board_box.sports .tabBox .sportsFilter .onoffBtn {
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    line-height: 0;
    font-size: 0;
}

.board_box.sports .tabBox .sportsFilter .onoffBtn.open {
    background: url("/images/etc/minus_box1.svg") 50% 50% no-repeat;
    background-size: revert;
}

.board_box.sports .tabBox .sportsFilter .onoffBtn.close {
    background: url("/images/etc/add_box1.svg") 50% 50% no-repeat;
    background-size: revert;
}

.board_box.sports .tabBox {
    max-width: 100%;
    overflow: auto;
}

.board_box.sports .tabBox ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    min-width: 500px;
    padding-left: .75rem;
    padding-right: .75rem;
    margin-left: -.75rem;
    margin-right: -.75rem;
    box-sizing: border-box;
    width: 100%;
}

.board_box.sports .tabBox li {
    position: relative;
    cursor: pointer;
    width: 50%;
    line-height: 40px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    color: var(--color-gray-text);
    font-size: 15px;
    padding: 0 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.board_box.sports .tabBox li button {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.board_box.sports .tabBox .cate li button {
    position: relative;
    padding-top: 40px;
    width: 40px;
}

.board_box.sports .tabBox .cate li button.soccer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_soccer.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li button.baseketball::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_baseketball.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li button.baseball::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_baseball.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li button.volleyball::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_volleyball.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li button.hockey::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_hockey.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li button.etc::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_etc.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li.on button.soccer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_soccer_one.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li.on button.baseketball::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_basketball_one.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li.on button.baseball::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_baseball_one.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li.on button.volleyball::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_volleyball_one.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li.on button.hockey::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_hockey_one.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox .cate li.on button.etc::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("/images/etc/sports_etc_one.svg") 50% 50% no-repeat;
    background-size: contain;
}

.board_box.sports .tabBox li button span {
    color: var(--color-white);
}

.board_box.sports .tabBox li.on button span {
    color: #00f79c;
}

.board_box.sports .listBox.off {
    display: none;
}

.board_box.sports .listBox {
    min-height: 300px;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.board_box.sports .listBox li {
    padding: 0 0 5px 0;
    width: 100%;
    padding: 0 0 5px 0;
    width: 100%;
}

.board_box.sports .listBox li:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-border);
}

.board_box.sports .listBox li .box .subject .box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.board_box.sports .listBox li .box .subject .box .cate {
    width: 20%;
}

.board_box.sports .listBox li .box .subject .box .play {
    width: 80%;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.board_box.sports .listBox li .box .subject .box .cate span {
    justify-content: center;
}

.board_box.sports .listBox li .box .subject span {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.board_box.sports .listBox li .box .subject span img {
    max-width: 30px;
}

.board_box.sports .listBox li .box .subject span em {
    width: 120px;
    text-align: center;
}

.board_box.sports .listBox li .box .subject span.home .tag {
    width: 37px;
    display: block;
    text-align: center;
    color: var(--color-white);
    border-radius: 7px;
    background-color: var(--color-red);
    font-size: 12px;
    padding: 2px 8px;
}

.board_box.sports .listBox li .box .subject span.main .vs {
    width: auto;
    display: block;
    text-align: center;
    color: var(--color-white);
    border-radius: 7px;
    background-color: rgb(0 0 0 / 50%);
    font-size: 12px;
    padding: 2px 8px;
}

.board_box.sports .listBox li .box .subject span.expedition .tag {
    width: 37px;
    display: block;
    text-align: center;
    color: var(--color-white);
    border-radius: 7px;
    background-color: var(--color-accent-blue);
    font-size: 12px;
    padding: 2px 8px;
}

@media screen and (min-width: 1000px) {
    .board_box.sports .listBox li .box .subject .box .play {
        gap: 0;
        flex-direction: row
    }

    .board_box.sports .listBox li .box .subject .box .play .home {
        width: 40%;
    }

    .board_box.sports .listBox li .box .subject .box .play .main {
        width: 17%;
    }

    .board_box.sports .listBox li .box .subject .box .play .expedition {
        width: 40%;
    }
}

@media screen and (min-width: 600px) {
    .home .section .board_box.site .copyBox ul li {
        width: 48%;
    }
}

@media screen and (min-width: 1000px) {
    .home .section.boardSec .inner {
        max-width: 1090px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .home .section .board_box.populity {
        width: 49%;
    }

    .home .section .board_box.solt {
        width: 49%;
    }

    .home .section .board_box.free {
        width: 100%;
    }

    .home .section .board_box.free .listBox {
        display: flex;
    }

    .home .section .board_box.free .listBox .list {
        flex: 0 0 50%;
        box-sizing: border-box;
        max-width: 49.4%;
    }

    .home .section .board_box.site .copyBox ul {
        gap: 0 20px;
    }

    .home .section .board_box.site .copyBox ul li {
        width: 23.4%;
    }

    .home .section .board_box.desc .copyBox .copy {
        font-size: 16px;
    }

    .home .section .kindBox ul li {
        flex-direction: row;
        padding: 20px;
        margin-bottom: 20px;
        width: 31.5%;
    }

    .home .section .kindBox ul li img {
        margin-bottom: 0;
        margin-right: 20px;
    }

    .home .section .kindBox ul li > div {
        text-align: left;
    }

    .home .section .kindBox ul li > div .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 5px;
    }
}

/* 로그인 */
.wrapper.login > .container .frame {
    display: block;
}

.wrapper.login > .container .frame main {
    width: 100%;
}

.login .loginBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 25px 10px;
    margin-bottom: 30px;
}

.login .loginBox .imgBox {
    border-bottom: 2px solid var(--color-gray-dark);
    padding-bottom: 30px;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
}

.login .loginBox form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.login .loginBox form input {
    padding: 15px;
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: var(--color-inputback-white);
}

.wrapper.dark-mode.login .loginBox form input {
    background-color: #464646;
}

.login .loginBox form .submit {
    padding: 15px;
    text-align: center;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.login .loginBox form .sub {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.login .loginBox form .toggle-wrapper .toggle-label {
    margin-left: 10px;
    font-size: 14px;
    color: var(--color-gray-dark);
}

.login .loginBox .toggle-wrapper {
    margin-bottom: 10px;
}

/* 회원가입 */
.wrapper.service.join > .container .frame {
    display: block;
}

.wrapper.service.join > .container .frame main {
    width: 100%;
}

.service .joinBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.service .joinBox .imgBox {
    border-bottom: 2px solid var(--color-gray-dark);
    padding-bottom: 30px;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
}

.service .joinBox form {
    max-width: 800px;
    background: var(--color-white);
    border-radius: 20px;
    width: 100%;
}

.service .joinBox form dl {
    display: flex;
    flex-direction: column;
}

.service .joinBox form dl dt {
    margin-bottom: 5px;
}

.service .joinBox form dl dt b {
    color: var(--color-accent-yellow);
}

.service .joinBox form dl dd {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}

.service .joinBox form dl dd > span {
    position: absolute;
    bottom: -25px;
    left: 0px;
    padding-left: 20px;
    letter-spacing: -0.5px;
    margin-top: 5px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    color: var(--color-gray-text);
}

.service .joinBox form dl dd > span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 5px;
    height: 5px;
    background-color: var(--color-accent-yellow);
    border-radius: 5px;
}

.service .joinBox form dl dd input {
    width: 100%;
    border-radius: 10px;
    height: 45px;
    padding: 10px;
    background-color: var(--color-inputback-white);
}

.service .joinBox form dl dd input::placeholder {
    font-size: 12px;
}

.service .joinBox form dl dd input[type="text"]:focus, select:focus, textarea:focus {
    outline: none;
}

.service .joinBox form dl dd select {
    width: 48%;
    height: 40px;
    border-radius: 15px;
    padding: 0 20px;
}

.service .joinBox form dl dd .timer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -65px;
    color: var(--color-red);
    font-size: 12px;
    font-weight: 300;
}

.service .joinBox form dl dd .certifyNum.off {
    display: none;
}

.service .joinBox form dl dd > div {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.service .joinBox form dl dd button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    padding: 5px 10px;
    font-weight: 600;
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-blue-light);
    transition: all 0.3s;
}

.service .joinBox .requireBtn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 800px;
}

.service .joinBox .requireBtn > button {
    width: 100%;
    border-radius: 5px;
    padding: 15px;
}

.service .joinBox .requireBtn > button.join {
    margin-bottom: 10px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    transition: all 0.3s;
}

.service .joinBox .requireBtn > button.join:hover {
    background-color: var(--color-white);
    color: var(--color-gray-dark);
    border: 1px solid var(--color-gray-dark);
}

.service .joinBox .requireBtn > button.cancle {
    border: 1px solid var(--color-gray-dark);
}

@media screen and (min-width : 800px) {
    .service .joinBox {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .service .joinBox form {
        max-width: 800px;
        padding: 40px;
    }

    .service .joinBox form dl {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }

    .service .joinBox form dl dt {
        font-weight: bold;
        position: relative;
        z-index: 9;
        line-height: 45px;
        text-align: left;
        width: 20%;
    }

    .service .joinBox form dl dd {
        width: 80%;
        padding: 15px 0;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .service .joinBox form dl dd > span {
        bottom: -15px;
    }

    .service .joinBox form dl dd input {
        min-height: 60px;
    }

    .service .joinBox form dl dd input::placeholder {
        font-size: 14px;
    }

    .service .joinBox form dl dd button {
        padding: 10px 20px;
    }

    .service .joinBox form dl dd .certify {
        padding: 13px 10px;
        font-size: 14px;
    }

    .service .joinBox .requireBtn {
        margin-top: 30px;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .service .joinBox .requireBtn > button {
        width: 48%;
        padding: 10px 20px;
    }

    .service .joinBox .requireBtn > button.join {
        margin-bottom: 0;
        font-size: 18px;
        height: 60px;
    }

    .service .joinBox .requireBtn > button.cancle {
        margin-bottom: 0;
        font-size: 18px;
        height: 60px;
    }
}

/* 내정보 */
.service .myinfoBox #myinfoForm {
    max-width: 800px;
    background: var(--color-white);
    border-radius: 20px;
    width: 100%;
}

.service .myinfoBox form dl {
    display: flex;
    flex-direction: column;
}

.service .myinfoBox form dl dt {
    margin-bottom: 5px;
}

.service .myinfoBox form dl dt b {
    color: var(--color-accent-yellow);
}

.service .myinfoBox form dl dd {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}

.service .myinfoBox form dl dd > span {
    position: absolute;
    bottom: -25px;
    left: 0px;
    padding-left: 20px;
    letter-spacing: -0.5px;
    margin-top: 5px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    color: var(--color-gray-text);
}

.service .myinfoBox form dl dd > span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 5px;
    height: 5px;
    background-color: var(--color-accent-yellow);
    border-radius: 5px;
}

.service .myinfoBox form dl dd input[type="text"] {
    width: 100%;
    border-radius: 10px;
    height: 45px;
    padding: 10px;
    background-color: var(--color-inputback-white);
}

.service .myinfoBox form dl dd input::placeholder {
    font-size: 12px;
}

.service .myinfoBox form dl dd input[type="text"]:focus, select:focus, textarea:focus {
    outline: none;
}

.service .myinfoBox form dl dd select {
    width: 48%;
    height: 40px;
    border-radius: 15px;
    padding: 0 20px;
}

.service .myinfoBox form dl dd .timer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -65px;
    color: var(--color-red);
    font-size: 12px;
    font-weight: 300;
}

.service .myinfoBox form dl dd .certifyNum.off {
    display: none;
}

.service .myinfoBox form dl dd > div {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.service .myinfoBox form dl dd > div img {
    max-width: 100px;
}

.service .myinfoBox form dl dd button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    padding: 5px 10px;
    font-weight: 600;
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-blue-light);
    transition: all 0.3s;
}

.service .myinfoBox .requireBtn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 800px;
}

.service .myinfoBox .requireBtn > button {
    width: 100%;
    border-radius: 5px;
    padding: 15px;
}

.service .myinfoBox .requireBtn > button.submit {
    margin-bottom: 10px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    transition: all 0.3s;
}

.service .myinfoBox .requireBtn > button.submit:hover {
    background-color: var(--color-white);
    color: var(--color-gray-dark);
    border: 1px solid var(--color-gray-dark);
}

@media screen and (min-width : 800px) {
    .service .myinfoBox {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .service .myinfoBox form {
        max-width: 800px;
        padding: 40px;
    }

    .service .myinfoBox form dl {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }

    .service .myinfoBox form dl dt {
        font-weight: bold;
        position: relative;
        z-index: 8;
        line-height: 45px;
        text-align: left;
        width: 20%;
    }

    .service .myinfoBox form dl dd {
        width: 80%;
        padding: 15px 0;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .service .myinfoBox form dl dd > span {
        bottom: -15px;
    }

    .service .myinfoBox form dl dd input[type="text"] {
        min-height: 60px;
    }

    .service .myinfoBox form dl dd input::placeholder {
        font-size: 14px;
    }

    .service .myinfoBox form dl dd button {
        padding: 10px 20px;
    }

    .service .myinfoBox form dl dd .certify {
        padding: 13px 10px;
        font-size: 14px;
    }

    .service .myinfoBox .requireBtn {
        margin-top: 30px;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .service .myinfoBox .requireBtn > button {
        width: 48%;
        padding: 10px 20px;
    }

    .service .myinfoBox .requireBtn > button.join {
        margin-bottom: 0;
        font-size: 18px;
        height: 60px;
    }
}

/* 아이디 비밀번호 찾기 */
.wrapper.service.findId > .container .frame {
    display: block;
}

.wrapper.service.findId > .container .frame main {
    width: 100%;
}

.wrapper.service.findPw > .container .frame {
    display: block;
}

.wrapper.service.findPw > .container .frame main {
    width: 100%;
}

.service .findBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.service .findBox .imgBox {
    border-bottom: 2px solid var(--color-gray-dark);
    padding-bottom: 30px;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
}

.service .findBox form {
    width: 100%;
    max-width: 800px;
    border-radius: 20px;
}

.service .findBox form dl {
    display: flex;
    flex-direction: column;
}

.service .findBox form dl dt {
    margin-bottom: 5px;
}

.service .findBox form dl dt b {
    color: var(--color-accent-yellow);
}

.service .findBox form dl dd {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.service .findBox form dl dd > span {
    position: relative;
    padding-left: 20px;
    margin-top: 5px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    color: var(--color-gray-text);
}

.service .findBox form dl dd > span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 5px;
    height: 5px;
    background-color: var(--color-accent-yellow);
    border-radius: 5px;
}

.service .findBox form dl dd input {
    width: 100%;
    border-radius: 10px;
    height: 45px;
    padding: 10px;
    background-color: var(--color-inputback-white);
}

.service .findBox form dl dd input[type="text"]:focus, select:focus, textarea:focus {
    outline: none;
}

.service .findBox form dl dd select {
    width: 48%;
    height: 40px;
    border-radius: 15px;
    padding: 0 20px;
}

.service .findBox form dl dd .timer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -65px;
    color: var(--color-red);
    font-size: 12px;
    font-weight: 300;
}

.service .findBox form dl dd .certifyNum.off {
    display: none;
}

.service .findBox form dl dd > div {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.service .findBox form dl dd button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    padding: 5px 10px;
    font-weight: 600;
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-blue-light);
    transition: all 0.3s;
}

.service .findBox .requireBtn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 800px;
}

.service .findBox .requireBtn > button {
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
    padding: 15px;
}

.service .findBox .requireBtn > button {
    margin-bottom: 10px;
    background-color: var(--color-gray-dark);
    border: 1px solid var(--color-gray-dark);
    color: var(--color-white);
    transition: all 0.3s;
}

.service .findBox .requireBtn > button:hover {
    background-color: var(--color-white);
    color: var(--color-gray-dark);
    border: 1px solid var(--color-gray-dark);
}

@media screen and (min-width : 800px) {
    .service .findBox {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .service .findBox form {
        max-width: 800px;
        padding: 40px;
    }

    .service .findBox form dl {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }

    .service .findBox form dl dt {
        font-weight: bold;
        position: relative;
        z-index: 9;
        line-height: 45px;
        text-align: center;
        width: 20%;
    }

    .service .findBox form dl dd {
        width: 80%;
        padding: 15px 0;
        box-sizing: border-box;
    }

    .service .findBox form dl dd input {
        min-height: 60px;
    }

    .service .findBox form dl dd .certify {
        padding: 13px 10px;
        font-size: 14px;
    }

    .service .findBox form dl dd .timer {
        font-size: 14px;
        font-weight: 400;
        left: -70px;
    }

    .service .findBox form dl dd button {
        padding: 10px 20px;
        right: 10px;
    }

    .service .findBox .requireBtn {
        margin-top: 30px;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .service .findBox .requireBtn > button {
        width: 50%;
        margin-bottom: 0;
    }
}

/* 접속자 수 */
.accessorBox {
    overflow-x: auto;
    margin-bottom: 30px;
}

.accessorBox table {
    min-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.accessorBox table.second thead {
    display: none;
}

.accessorBox table thead {
    width: 100%;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    padding: 10px;
}

.accessorBox table thead tr {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.accessorBox table thead th.num, .accessorBox table tbody tr td.num {
    width: 5%;
    padding-right: 50px;
}

.accessorBox table thead th.name, .accessorBox table tbody tr td.name {
    width: 40%;
}

.accessorBox table thead th.memo, .accessorBox table tbody tr td.memo {
    width: 55%;
    padding-left: 25px;
}

.accessorBox table tbody tr td.memo {
    text-align: left;
}

.accessorBox table tbody {
    width: 100%;
}

.accessorBox table tbody tr {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid var(--color-gray-border);
}

.accessorBox table tbody tr td.name {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.accessorBox table tbody tr td.name .grade, .accessorBox table tbody tr td.name .level {
    display: flex;
    min-width: 15px;
    max-width: 20px;
}

.accessorBox table tbody tr td.name .level {
    margin: 0 3px;
}

.accessorBox table tbody tr td.name .grade img, .accessorBox table tbody tr td.name .level img {
    width: 100%;
}

@media screen and (min-width : 1000px) {
    .accessorBox {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
    }

    .accessorBox table {
        width: 50%;
        min-width: auto;
    }

    .accessorBox table.second thead {
        display: block;
    }
}

.companyInfo {
    margin-bottom: 30px;
    border-radius: 20px;
}

.companyInfo h2 {
    font-size: 30px;
    font-weight: 700;
}

.companyInfo h3 {
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}

.companyInfo .notice {
    background-color: var(--color-gray-dark);
    padding: 10px;
    padding-left: 20px;
    border-radius: 19px 19px 0 0;
    color: var(--color-white);
}

.companyInfo .topInfo .copyBox .title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
}

.companyInfo .topInfo .copyBox .subTitle {
    color: var(--color-company-sub);
    margin: 10px 0;
    font-size: 16px;
}

.companyInfo .botInfo {
    border: 1px solid var(--color-gray-dark);
    padding: 10px;
    border-radius: 0 0 19px 19px;
}

.companyInfo .botInfo .title {
    margin: 0;
    background-color: var(--color-accent-yellow);
    padding: 10px;
    text-align: center;
    border-radius: 30px;
    color: var(--color-white);
    font-size: 20px;
    font-weight: 600;
}

.companyInfo .botInfo .copyBox ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 20px;
}

.companyInfo .botInfo .copyBox ul li .subTitle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.companyInfo .botInfo .copyBox ul li span.num {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-white);
    border-bottom: 3px solid var(--color-white);
}

.companyInfo .botInfo .copyBox ul li h3.numTitle {
    background-color: #205E42 !important;
    padding-right: 3rem !important;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 1rem !important;
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
    color: var(--color-white);
}

.companyInfo .botInfo .copyBox ul li .subDesc {
    margin-top: 10px;
    font-size: 16px;
    color: var(--color-gray-dark2);
}

.companyInfo .botInfo .copyBox ul li .subDesc span {
    color: var(--color-accent-yellow);
    font-weight: 600;
}

.companyInfo .botInfo .copyBox .botDesc {
    color: var(--color-white);
    width: 100%;
    text-align: center;
    font-size: 16px;
    background: var(--color-black);
}

@media screen and (min-width: 1000px) {
    .companyInfo .notice {
        font-size: 18px;
    }

    .companyInfo .botInfo .title {
        display: inline-block;
        padding: 10px 25px;
        left: -30px;
        position: absolute;
    }

    .companyInfo .botInfo .copyBox {
        padding-top: 40px;
    }

    .companyInfo .botInfo .copyBox ul li span.num {
        font-size: 30px;
    }

    .companyInfo .botInfo .copyBox ul li h4.numTitle {
        font-size: 18px;
    }

    .companyInfo .botInfo .copyBox ul li .subDesc span {
        font-size: 16px;
    }
}

/* 게시판 뷰 */
.boardBox.view img {
    vertical-align: baseline;
}

.boardBox.view {
    position: relative;
}

.wrapper.dark-mode .boardBox.view {
    background-color: #2e2e2e;
    border: 1px solid #484848;
    padding: 10px;
}

.boardBox.view .viewList {
    text-align: right;
    padding: 0 0 20px 0;
}

.boardBox.view .viewList .list {
    position: relative;
    display: inline-block;
    border: 1px solid var(--color-gray-border);
    padding: 8px 10px 7px 30px;
    border-radius: 20px;
    color: var(--color-gray-text);
}

.boardBox.view .viewList .list::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: url(/images/etc/boardBox_view.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.view .viewList .del {
    position: relative;
    display: inline-block;
    border: 1px solid var(--color-gray-border);
    padding: 8px 10px 7px 30px;
    border-radius: 20px;
    color: var(--color-gray-text);
}

.boardBox.view .viewList .del::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(/images/etc/del.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.view > .subject {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    word-break: break-all;
}

.boardBox.view .answer {
    text-align: center;
}

.boardBox.view .answer .reply {
    padding: 15px;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 20px;
}

.boardBox.view .sub {
    border-top: 2px solid var(--color-gray-border);
    color: var(--color-gray-black2);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: var(--color-gray-text);
}

.boardBox.view .sub .name {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-gray-text);
    padding-right: 50px;
}

.boardBox.view .sub .name > div {
    display: flex;
    padding: 0;
}

.boardBox.view .sub .name > div img {
    max-width: 20px;
    width: 100%;
}

.boardBox.view .message {
    padding: 50px 0;
    font-size: 16px;
    word-break: break-all;
}

.boardBox.view .message p {
    margin : 0;
    line-height: 1.5;
}

.boardBox.view .message img {
    width: 100%;
}

.boardBox.view div {
    color: var(--color-gray-dark);
}

.boardBox.view .text .box .siteContent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0 0 0;
}

.boardBox.view .text .box .siteContent .imgBox {
    width: 100%;
}

.boardBox.view .text .box .siteContent .imgBox img {
    width: 100%;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
}

.boardBox.view .text .box .siteContent .content {
    margin-top: 20px;
    width: 100%;
    border: 1px solid var(--color-gray-dark);
}

.boardBox.view .text .box .siteContent .content > div {
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
}

.boardBox.view .text .box .siteContent .content > div > dt {
    display: flex;
    align-items: center;
    width: 30%;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.boardBox.view .text .box .siteContent .content > div > dd {
    display: flex;
    align-items: center;
    width: 70%;
    border-bottom: 1px solid #e8e9eb;
    padding: 10px;
    color: var(--color-black);
}

.boardBox.view .text .box .siteContent .content > div > dd.link a {
    position: relative;
}

.boardBox.view .text .box .siteContent .content > div > dd.link a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/link.png) 50% 50% no-repeat;
    background-size: auto;
}

.totosite .boardBox.view .text .box .message img {
    max-width: unset;
}

@media screen and (min-width: 1000px) {
    .boardBox.view .text .box .siteContent .imgBox {
        max-width: 270px;
        margin-right: 20px;
    }

    .boardBox.view .text .box .siteContent .content {
        width: calc(100% - 290px);
        margin-top: 0;
        -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 10%);
    }
}

.boardBox.view .text .explanation {
    text-align: center;
}

.boardBox.view .text .siteCode {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    background: var(--color-gray-dark);
    padding: 10px;
    color: var(--color-white);
    border-radius: 10px;
}

.boardBox.view .text .siteCode span, .boardBox.view .text .explanation span {
    font-size: 16px;
    font-weight: 600;
}

.boardBox.view .text .siteCode span a {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
}

.boardBox.view .text .event {
    padding: 10px;
    border: 1px solid var(--color-gray-border);
    margin-top: 20px;
    border-radius: 10px;
    word-break: break-all;
}

.boardBox.view .text .joinEvent {
    padding: 10px;
    border: 1px solid var(--color-gray-border);
    margin-top: 20px;
    border-radius: 10px;
    word-break: break-all;
}

.boardBox.view .text .info {
    padding: 10px;
    border: 1px solid var(--color-gray-border);
    margin-top: 20px;
    border-radius: 10px;
    word-break: break-all;
}

.boardBox.view .text .title {
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-black2);
    border-bottom: 1px solid var(--color-gray-border);
    padding-bottom: 3px;
}

.boardBox.view .text .logoImg {
    text-align: center;
}

.boardBox.view .text .screenImg {
    text-align: center;
}

.boardBox.view .text .logoImg img {
    max-width: 200px;
}

.boardBox.view .text.half {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.boardBox.view .text img {
    width: 100%;
    border-radius: 10px;
}

.stepBox {
    position: absolute;
    top: 50%;
    width: 100%;
    max-width: 1010px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    z-index: 9;
}

.inner .prevStep {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    font-size: 0;
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
    background-color: rgba(0,0,0,0.1);
}

.inner .prevStep::before {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    left: 17px;
    width: 25px;
    height: 25px;
    background: url(../images/etc/right-arrow.png) 0 0 no-repeat;
    background-size: contain;
}

.inner .nextStep {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    text-indent: -9999px;
    overflow: hidden;
    font-size: 0;
    width: 50px;
    height: 100px;
    border-radius: 0px 50px 50px 0;
    background-color: rgba(0,0,0,0.1);
}

.inner .nextStep::before {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    right: 17px;
    width: 25px;
    height: 25px;
    background: url(../images/etc/right-arrow.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.view div .period {
    display: block;
    margin-top: 10px;
    padding: 0;
}

.boardBox.view div span.comment {
    position: relative;
    padding-left: 20px;
}

.boardBox.view div span.comment::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: 15px;
    height: 15px;
    background: url(/images/etc/comment.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.view div span.count {
    position: relative;
    padding-left: 20px;
}

.boardBox.view div span.count::before {
    content: "";
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    left: 2px;
    width: 16px;
    height: 16px;
    background: url(/images/etc/check.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.view div span.suggestion {
    position: relative;
    padding-left: 20px;
}

.boardBox.view div span.suggestion::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: 15px;
    height: 15px;
    background: url(/images/etc/suggestion.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.view .countButton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.boardBox.view .countButton button {
    position: relative;
    display: inline-block;
    padding: 10px 20px 10px 40px;
    background: var(--color-gray-dark);
    border-radius: 15px;
    font-size: 18px;
    color: var(--color-white);
    margin-right: 10px;
}

.boardBox.view .countButton button:not(.star)::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(/images/etc/borderBox_view_button.png) no-repeat center/contain;
}

.boardBox.view .countButton button.on:not(.star)::before {
    position: absolute;
    content: '';
    top: 51%;
    left: 19%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url(/images/etc/borderBox_view_button_on.png) no-repeat center/contain;
}

.boardBox.view .countButton button.disCount {
    background: var(--color-gray-text);
}

.boardBox.view .countButton button.disCount::before {
    transform: rotate(180deg);
    top: 36%;
}

.boardBox.view .countButton button.disCount.on::before {
    transform: rotate(180deg);
    background: url(/images/etc/borderBox_view_button_on.png) no-repeat center/contain;
    top: 32%;
}

.boardBox.view .countButton button.star {
    max-width: 50px;
    padding : 10px 10px 5px 10px;
    background-color: var(--color-black);
    margin-right: 0;
}

.boardBox.view .countButton button.star img {
    width: 100%;
    max-width: 25px;
}

.boardBox.view .panelRecentBox {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.boardBox.view .panelRecentBox > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.boardBox.view .panelRecentBox > div .title {
    margin-right: 10px;
    width: 70px;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
}

.boardBox.view .panelRecentBox .recent {
    margin-bottom: 5px;
}

.boardBox.view .panelRecentBox .recent .title {
    background-color: var(--color-gray-dark);
    color: var(--color-gold);
}

.boardBox.view .panelRecentBox .total .title {
    background-color: var(--color-red);
    color: var(--color-gray-light);
}

.boardBox.view .panelRecentBox > div .result .rate {
    color: var(--color-accent-pink);
}

.boardBox.view .pickBox {
    margin-top: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    border: 1px solid var(--color-gray-border);
}

.boardBox.view .pickBox > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.boardBox.view .pickBox .index {
    border-radius: 10px 10px 0 0;
    padding: 5px 0;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.boardBox.view .pickBox > div span {
    text-align: center;
    display: block;
    width: 25%;
    font-size: 12px;
}

.boardBox.view .pickBox .box {
    border-radius: 0 0 10px 10px;
    padding: 5px 0;
}

@media screen and (min-width: 500px) {
    .boardBox.view .pickBox > div span {
        font-size: 16px;
    }
}

.boardBox.view .giftconRequestBox {
    margin: 0 auto;
    max-width : 600px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.boardBox.view .giftconRequestBox .notice {
    width: 100%;
    text-align: center;
    background-color: var(--color-white);
    border: 2px solid var(--color-accent-pink);
    color: var(--color-accent-pink);
    font-weight: 700;
    font-size: 15px;
    border-radius: 15px;
}

.boardBox.view .giftconRequestBox .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.boardBox.view .giftconRequestBox .box .title {
    width: 20%;
    color: var(--color-black);
    text-align: left;
    margin: 10px 0;
}

.boardBox.view .giftconRequestBox .box .text {
    width: 80%;
    margin: 10px 0;
}

.boardBox.view .giftconRequestBox .box .text input {
    background: var(--color-inputback-white);
    width: 100%;
    height: 40px;
    padding-left: 10px;
    border-radius: 10px;
}

.boardBox.view .giftconRequestBox .btnBox {
    text-align: center;
}

.boardBox.view .giftconRequestBox .btnBox button {
    padding: 10px 20px;
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-dark);
    color: var(--color-gray-dark);
    transition: all 0.3s;
    border-radius: 10px;
    font-size: 18px;
}

.boardBox.view .giftconRequestBox .btnBox button:hover {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.boardBox.view b.state {
    background-color: var(--color-gray-text);
    color: var(--color-white);
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 5px;
}

.boardBox.view b.state0 {
    background-color: var(--color-gray-text);
}

.boardBox.view b.state1 {
    background-color: var(--color-success-green);
}

.boardBox.view b.state2 {
    background-color: var(--color-accent-orange);
}

.boardBox.view .text .box dl {
    margin-top: 30px;
    border-top: 2px solid var(--color-gray-border);
    border-bottom: 2px solid var(--color-gray-border);
}

.boardBox.view .text .box dl div {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.boardBox.view .text .box dl div dt {
    width: 35%;
    color: var(--color-gray-black);
    font-weight: 300;
    background-color: var(--color-gray-ligh);
    padding: 10px;
}

.boardBox.view .text .box dl div dd {
    width: 65%;
    color: var(--color-gray-text);
    padding-left: 10px;
}

.boardBox.view .text .box form {
    max-width: 100%;
}

.boardBox.view .text .box .buttonBox {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.boardBox.view .text .box .buttonBox button {
    background-color: var(--color-gray-text);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 15px;
    margin-right: 10px;
    font-size: 16px;
}

.boardBox.view .text .box .buttonBox button.complete {
    background-color: var(--color-success-green);
}

.boardBox.view .text .box .buttonBox button.hold {
    background-color: var(--color-accent-orange);
    margin-right: 0;
}

.point .boardBox.view .text .box dl {
    display: block;
}

.point .boardBox.view .text .box dl dt {
    margin-bottom: 0;
    line-height: 1.5;
}

.point .boardBox.view .text .box dl dd {
    margin-bottom: 0;
    line-height: 1.5;
}

/* .boardBox.view .voteBox .box {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;} */
.boardBox.view .voteBox .subject {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    padding: 20px;
}

.boardBox.view .voteBox .subject .count {
    color: var(--color-white);
    margin-bottom: 10px;
}

.boardBox.view .voteBox .subject .count b {
    color: var(--color-accent-orange);
    padding-left: 10px;
    font-weight: 600;
}

.boardBox.view .voteBox .subject .endDay {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.boardBox.view .voteBox .subject .endDay .title {
    color: var(--color-white);
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
}

.boardBox.view .voteBox .subject .endDay .date {
    width: 100%;
    text-align: center;
}

.boardBox.view .voteBox .subject .endDay .date span {
    color: var(--color-accent-yellow);
    font-weight: bold;
    font-size: 1.375rem;
}

.boardBox.view .voteBox .box .already {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    z-index: 9;
    font-size: 18px;
    width: 100%;
    text-align: center;
}

.boardBox.view .voteBox .box .eventEnd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    z-index: 9;
}

.boardBox.view .voteBox .flipBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.boardBox.view .voteBox .flipBox .title {
    width: 100%;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
}

.boardBox.view .voteBox .flipdown .date {
    width: 100%;
    text-align: center;
}

.boardBox.view .voteBox .eventAdd {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    background-color: var(--color-gray-dark);
    border-radius: 10px;
    transition: all 0.3s;
}

.boardBox.view .voteBox .eventAdd input {
    padding: 5px;
    border-radius: 10px;
}

.boardBox.view .voteBox .eventAdd button {
    padding-left: 5px;
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-gray-dark);
    border-radius: 10px;
    transition: all 0.3s;
}

.boardBox.view .voteBox .notice {
    width: 100%;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.boardBox.view .voteBox .box .vote {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 60px 0;
}

.boardBox.view .voteBox .box .vote.blank::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 8;
}

.boardBox.view .voteBox .box .vote .voteSel {
    position: relative;
    padding: 30px;
    font-size: 16px;
    color: var(--color-gray-text);
    border: 0;
    padding: 15px 25px;
    display: inline-block;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-accent-yellow);
    border-radius: 10px;
    transition: all 0.3s;
}

.boardBox.view .voteBox .box .vote .voteSel.on {
    background-color: var(--color-gray-dark);
    color: var(--color-accent-yellow);
}

.boardBox.view .voteBox .box .vote .voteSel:hover {
    top: 2px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.boardBox.view .voteBox .box span.complete {
    background: url(../images/etc/bg_coin.png) no-repeat center/contain;
    margin: 20px 0;
    display: block;
    text-align: center;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    font-weight: 700;
    font-size: 18px;
    font-weight: 600;
    padding: 20px;
}

.boardBox.view .voteBox .box .pointAddBox .desc {
    padding: 20px 0 0 0;
    text-align: center;
    font-weight: 700;
}

.boardBox.view .voteBox .box .pointAddBox .box form {
    max-width: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin: 20px 0;
}

.boardBox.view .voteBox .box .pointAddBox .box form input[type="text"] {
    border: 1px solid var(--color-gray-border);
    padding: 11px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.boardBox.view .voteBox .box .pointAddBox .box form .buttonBox button {
    background-color: var(--color-gray-dark);
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-gray-dark);
    padding: 10px 30px;
    border-radius: 10px;
    transition: all 0.3s;
}

.boardBox.view .voteBox .box .pointAddBox .box form .buttonBox button:hover {
    background-color: var(--color-white);
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
    padding: 10px 30px;
    border-radius: 10px;
}

.boardBox.edit textarea {
    width: 100%;
}

@media screen and (min-width: 600px) {
    .boardBox.view div img {
        width: 100%;
        max-width: 600px;
    }

    .boardBox.view .giftconRequestBox .btnBox button {
        padding: 10px 30px;
    }

    .boardBox.view .giftconRequestBox .box .title {
        font-size: 16px;
    }

    .boardBox.view .giftconRequestBox .box .text input {
        height: 50px;
    }

    .boardBox.view .text .explanation span {
        font-size: 16px;
    }

    .boardBox.view .text .siteCode {
        max-width: 600px;
        margin: 20px auto;
        padding: 50px 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .boardBox.view .text .siteCode span {
        font-size: 18px;
    }

    .boardBox.view .text .siteCode span a {
        font-size: 18px;
    }

    .boardBox.view .text .box dl div dt {
        width: 15%;
    }

    .boardBox.view .text .box dl div dd {
        width: 85%;
    }
}

@media screen and (min-width: 600px) {
    .boardBox.view div img {
        width: 100%;
        max-width: 600px;
    }
}

@media screen and (min-width: 1000px) {
    .boardBox.view .text.half {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .boardBox.view .text.half .box {
        width: 48%;
    }

    .boardBox.view .text.half .landingImg {
        width: 48%;
    }
}

.commentBox {
    position: relative;
    padding: 10px 10px 5px 10px;
    color: var(--color-gray-black2);
    background: var(--color-gray-dark);
    text-align: center;
    border-radius: 15px;
}

.commentBox .comment {
    min-height: 90px;
    background: var(--color-white);
    width: 80%;
    border-radius: 10px;
    text-align: left;
    padding: 5px;
}

.commentBox .comment:focus {
    outline: none;
}

.commentBox .comment .tag {
    color: var(--color-comment-tag);
    user-select: none;
}

/* .commentBox .comment .name{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;} */
.commentBox .tryLogin {
    color: var(--color-white);
    padding: 10px 0 14px 0;
    font-size: 15px;
}

.commentBox .already {
    padding: 20px 20px 35px 20px;
    font-size: 18px;
    color: var(--color-white);
}

.nicList {
    position: absolute;
    top: 50px;
    left: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-dark);
    border-radius: 10px;
    z-index: 2;
    max-height: 200px;
    overflow-y: auto;
}

.nicList ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
}

.nicList ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-gray-border-bottom);
}

.nicList ul li:last-child {
    border-bottom: 0;
}

.nicList ul li .name {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.nicList ul li .name:hover {
    color: var(--color-comment-tag);
}

.nicList ul li .name img {
    max-width: 20px;
}

.nicList::-webkit-scrollbar {
    width: 10px;
}

.nicList::-webkit-scrollbar-track, .nicList::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.nicList::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-border-bottom);
}

.commentBox .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.commentBox .box .attachList {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--color-white);
}

.commentBox .box .attachList label {
    padding: 5px;
}

.commentBox .box .attachList button {
    padding: 5px;
}

.commentBox .box .attachList button img {
    width: 100%;
    max-width: 15px;
}

.commentBox .box .submit {
    width: 18%;
    background: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
    border-radius: 15px;
    color: var(--color-white);
    font-size: 16px;
    transition: all 0.3s;
}

.commentBox .box .submit:hover {
    background: var(--color-white);
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
}

.commentBox textarea {
    width: 80%;
    height: 60px;
    border-radius: 15px;
    padding: 10px;
}

/* 댓글에 댓글 */
.commentReplyBox {
    width: 100%;
    position: relative;
    padding: 30px 10px 5px 10px;
    color: var(--color-gray-black2);
    background: var(--color-gray-dark);
    text-align: center;
    border-radius: 15px;
    margin: 10px 0;
}

.commentReplyBox .comment {
    min-height: 90px;
    background: var(--color-white);
    width: 80%;
    border-radius: 10px;
    text-align: left;
    padding: 5px;
}

.commentReplyBox .comment:focus {
    outline: none;
}

.commentReplyBox .comment .tag {
    color: var(--color-comment-tag);
    user-select: none;
}

/* .commentBox .comment .name{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;} */
.commentReplyBox .closeBtn button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 12px;
    height: 12px;
    background: url(/images/etc/close.png) 0px 0px no-repeat;
    background-size: contain;
    font-size: 0px;
    line-height: 0;
    text-indent: -9999px;
}

.commentReplyBox .tryLogin {
    color: var(--color-white);
    padding: 10px 0 14px 0;
    font-size: 15px;
}

.commentReplyBox .already {
    padding: 20px 20px 35px 20px;
    font-size: 18px;
    color: var(--color-white);
}

.commentReplyBox .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.commentReplyBox .box .attachList {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--color-white);
}

.commentReplyBox .box .attachList button {
    padding: 5px;
}

.commentReplyBox .box .attachList button img {
    width: 100%;
    max-width: 15px;
}

.commentReplyBox .box .submit {
    width: 18%;
    background: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
    border-radius: 15px;
    color: var(--color-white);
    font-size: 16px;
    transition: all 0.3s;
}

.commentReplyBox .box .submit:hover {
    background: var(--color-white);
    color: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
}

.commentReplyBox textarea {
    width: 80%;
    height: 60px;
    border-radius: 15px;
    padding: 10px;
}

.commentListBox {
    margin-top: 30px;
}

.commentListBox .write {
    position: relative;
    border: 1px solid var(--color-comment-write);
    margin-top: -1px;
    background: var(--color-white);
}

.commentListBox .write .upper {
    background: var(--color-white);
    padding: 10px;
    position: relative;
}

.commentListBox .write .upper > span {
    font-size: 13px;
    cursor: pointer;
}

.commentListBox .write .upper button.cmnt {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-gray-border);
}

.commentListBox .write .upper button.cmnt:hover {
    color: var(--color-white);
}

.commentListBox .write.open .upper {
    background: var(--color-white);
}

.commentListBox .write form {
    display: none;
}

.commentListBox .write.open form {
    display: block;
    padding: 20px;
}

.commentListBox .write form .open {
    float: right;
    margin-top: -35px;
}

.commentListBox .write form textarea {
    display: block;
    width: 100%;
    height: 120px;
    padding: 8px;
    line-height: 1.8em;
    background: var(--color-white);
}

.commentListBox .write form .length {
    font-size: 12px;
    text-align: right;
}

.commentListBox .write form .button {
    margin-top: 0;
    text-align: center;
    position: relative;
    padding: 16px 0;
}

.commentListBox .write form .button .g-recaptcha {
    position: absolute;
    top: 0;
    left: 0;
}

.commentListBox .write form .button button {
    display: inline-block;
    background: var(--color-white);
    padding: 5px 10px;
    color: var(--color-gray-border);
    border-radius: 20px;
    margin: 0 5px;
}

.commentListBox .write form .button button:hover {
    color: var(--color-white);
    text-decoration: none;
}

.commentListBox .write form .g-recaptcha.off {
    display: none;
}

.commentListBox .write form .reply {
    display: none;
}

.commentListBox .write form .reply.on {
    display: block;
    padding: 10px;
    background: var(--color-gray-black);
}

.commentListBox .order {
    border-top: 1px solid var(--color-gray-dark2);
    border-bottom: 1px solid var(--color-gray-border-bottom);
    background: var(--color-white);
}

.commentListBox .order button {
    background: transparent;
    padding: 8px 20px;
    font-size: 13px;
    height: 36px;
    margin-bottom: -1px;
}

.commentListBox .order .on {
    font-weight: bold;
    background: var(--color-white);
    border-left: 1px solid var(--color-gray-border-bottom);
    border-right: 1px solid var(--color-gray-border-bottom);
}

.commentListBox .order .count {
    float: right;
    font-size: 13px;
    padding: 8px 10px;
}

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

.commentListBox .list > li {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid var(--color-gray-border);
    color: var(--color-gray-text);
    padding: 10px 10px 30px 10px;
}

.commentListBox .list > li .admin {
    position: absolute;
    bottom: 10px;
}

.commentListBox .list > li .user {
    position: absolute;
    right: 10px;
    bottom: 10px;
    text-align: right;
}

/* .commentListBox .list > li.depth0:not(:first-child) { border-bottom: 1px solid var(--color-gray-border-bottom); } */
.commentListBox .list > li.depth0 {
    width: 100%;
    margin-top: 10px;
}

.commentListBox .list > li .name {
    position: relative;
}

.commentListBox .list > li .who span {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.commentListBox .list > li .who span.name {
    position: absolute;
    top: 10px;
    left: 100px;
}

.commentListBox .list > li .who .isme {
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 30px;
    color: var(--color-white);
    border: 1px solid var(--color-purple-dark);
    background-color: var(--color-purple-dark);
    margin-left: 10px;
}

.commentListBox .list > li .who img {
    border-radius: 50%;
    width: 80px;
    margin-right: 10px;
}

.commentListBox .list > li .who .winner1 {
    margin-right: 5px;
    background-color: var(--color-gray-text);
    color: var(--color-white);
    border-radius: 15px;
    padding: 5px 10px;
}

.commentListBox .list > li .who .winner2 {
    margin-right: 5px;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    border-radius: 15px;
    padding: 5px 10px;
}

.commentListBox .list > li .who .grade {
    width: 20px;
}

.commentListBox .list > li .who .level {
    width: 20px;
}

.commentListBox .list > li .who .grade img {
    width: 20px;
}

.commentListBox .list > li .who .level img {
    width: 20px;
}

.commentListBox .list > li .noteLogin {
    position: relative;
}

.commentListBox .list > li .alert {
    padding: 8px 10px;
    color: var(--color-white);
    background-color: var(--color-black);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.commentListBox .list > li .message {
    padding: 30px 0 20px 0;
    width: calc(100% - 90px);
    word-break: break-all;
}

.commentListBox .list > li .message .iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: calc(9/16 * 100%);
}

.commentListBox .list > li .message .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.commentListBox .list > li.depth1 {
    position: relative;
    margin: 10px 0 10px 50px;
    background-color: var(--color-white2);
    border-radius: 30px;
    border: none;
}

.commentListBox .list > li.depth1:before {
    content: "";
    position: absolute;
    top: 20px;
    left: -40px;
    width: 20px;
    height: 20px;
    background: url(../images/etc/reply_arrow.png) 50% 50% no-repeat;
    background-size: contain;
}

.commentListBox .list > li.depth2 {
    margin-left: 60px;
    margin-bottom: 10px;
    background-color: var(--color-white2);
    border-radius: 30px;
    border: none;
}

.commentListBox .list > li.depth2:before {
    content: "";
    position: absolute;
    top: 20px;
    left: -40px;
    width: 20px;
    height: 20px;
    background: url(../images/etc/reply_arrow.png) 50% 50% no-repeat;
    background-size: contain;
}

.commentListBox .list > li.depth1 .who .date {
    padding-right: 10px;
}

.commentListBox .list > li.depth1 .admin button {
    padding-right: 10px;
}

.commentListBox .list > li.depth1 .user {
    padding-right: 10px;
}

.commentListBox .list > li.depth2 .who .date {
    padding-right: 10px;
}

.commentListBox .list > li.depth2 .admin button {
    padding-right: 10px;
}

.commentListBox .list > li.depth2 .user {
    padding-right: 10px;
}

.commentListBox .list > li.depth3 .who .date {
    padding-right: 10px;
}

.commentListBox .list > li.depth3 .admin button {
    padding-right: 10px;
}

.commentListBox .list > li.depth3 .user {
    padding-right: 10px;
}

.commentListBox .list > li .transactionBox {
    position: absolute;
    bottom: 35px;
    right: 10px;
}

.commentListBox .list > li .transactionBox button {
    padding: 3px 9px;
    border: 1px solid var(--color-black);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: 10px;
    transition: all 0.3s;
}

.commentListBox .list > li .transactionBox button:hover {
    background: var(--color-white);
    color: var(--color-black);
}

.commentListBox .list > li.depth3 {
    margin-left: 90px;
    background: var(--color-white);
    margin-bottom: 10px;
    border-radius: 30px;
}

.commentListBox .list > li.depth3:before {
    content: "";
    position: absolute;
    top: 20px;
    left: -40px;
    width: 20px;
    height: 20px;
    background: url(../images/etc/reply_arrow.png) 50% 50% no-repeat;
    background-size: contain;
}

/* .commentListBox .list > li .admin { position: absolute; top: 35px; right: 10px; } */
.commentListBox .list > li .admin button {
    background: transparent;
    font-size: 12px;
    color: var(--color-gray-black);
}

.commentListBox .list > li .admin button:hover {
    font-weight: bold;
}

/* .commentListBox .list > li .user { position: absolute; bottom: 10px; right: 10px; } */
.commentListBox .list > li .user button.line {
    background: transparent;
    font-size: 12px;
    color: var(--color-gray-dark2);
}

.commentListBox .list > li .user button.line:hover {
    font-weight: bold;
}

.commentListBox .list > li.delete, .commentListBox .list > li.secret {
    background: var(--color-gray-border);
}

.commentListBox .list > li.blind {
    background: var(--color-black);
    opacity: .7;
}

.commentListBox .blank {
    text-align: center;
    padding: 50px;
}

@media screen and (min-width : 1000px) {
    .inner .prevStep {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .inner .nextStep {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .inner .prevStep::before {
        left: 10px;
    }

    .inner .nextStep::before {
        right: 10px;
    }

    .boardBox.view .countButton button {
        padding: 10px 30px 10px 60px;
        font-size: 22px;
    }

    .boardBox.view .countButton button::before {
        width: 28px;
        height: 28px;
    }

    .boardBox.view .countButton button.disCount::before {
        top: 36%;
    }

    .boardBox.view .countButton button.star {
        padding : 12px 10px 6px 10px;
    }

    .commentBox {
        padding: 20px 20px 5px 20px;
    }

    .commentBox textarea {
        width: 85%;
        height: 80px;
    }

    .commentBox .box .submit {
        width: 13%;
    }

    .commentBox .box .attachList label {
        padding: 10px;
    }

    .commentBox .box .attachList button {
        padding: 10px;
    }

    .commentBox .tryLogin {
        padding: 0 0 15px 0;
    }

    .commentListBox .list > li .who .date {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .commentReplyBox {
        width: 100%;
        padding: 35px 20px 5px 20px;
    }

    .commentReplyBox textarea {
        width: 85%;
        height: 80px;
    }

    .commentReplyBox .box .submit {
        width: 13%;
    }

    .commentReplyBox .box .attachList label {
        padding: 10px;
    }

    .commentReplyBox .box .attachList button {
        padding: 10px;
    }

    .commentReplyBox .tryLogin {
        padding: 0 0 15px 0;
    }
}

.conversionBox > .title {
    font-size: 18px;
    margin: 30px 0 10px 0;
}

.conversionBox .calculatorBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 600px;
    background-color: var(--color-gray-dark);
    padding: 10px;
    border-radius: 15px;
}

.conversionBox .calculatorBox .controllerBox {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-white);
}

.conversionBox .calculatorBox .controllerBox > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.conversionBox .calculatorBox .controllerBox > div input {
    border: 1px solid var(--color-black);
}

.conversionBox .calculatorBox .controllerBox .company .title {
    width: 100%;
    padding: 10px;
    font-weight: 700;
    font-size: 16px;
}

.conversionBox .calculatorBox .controllerBox .company select {
    width: 100%;
    padding: 5px 15px;
}

.wrapper.dark-mode .conversionBox .calculatorBox .controllerBox .company select {
    background-color: var(--color-dark-backon);
}

.conversionBox .calculatorBox .controllerBox .price .title {
    width: 100%;
    padding: 10px;
    font-weight: 700;
    font-size: 16px;
}

.conversionBox .calculatorBox .controllerBox .price input {
    text-align: right;
    width: 100%;
    padding: 5px 15px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 16px;
}

.conversionBox .calculatorBox .write {
    color: var(--color-gray-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.conversionBox .calculatorBox .conversion {
    color: var(--color-gray-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.conversionBox .calculatorBox .myMonth {
    color: var(--color-gray-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.conversionBox .calculatorBox .myRemain {
    color: var(--color-gray-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.conversionBox .calculatorBox .write {
    width: 100%;
}

.conversionBox .calculatorBox .conversion {
    width: 100%;
}

.conversionBox .calculatorBox .myMonth {
    width: 100%;
}

.conversionBox .calculatorBox .myRemain {
    width: 100%;
}

.conversionBox .calculatorBox .write >span {
    font-size: 16px;
}

.conversionBox .calculatorBox .write .ttl {
    color: var(--color-accent-yellow);
    font-weight: bold;
}

.conversionBox .calculatorBox .conversion >span {
    font-size: 16px;
}

.conversionBox .calculatorBox .conversion .ttl {
    color: var(--color-accent-yellow);
    font-weight: bold;
}

.conversionBox .calculatorBox .myMonth >span {
    font-size: 16px;
}

.conversionBox .calculatorBox .myMonth .ttl {
    color: var(--color-accent-yellow);
    font-weight: bold;
}

.conversionBox .calculatorBox .myRemain >span {
    font-size: 16px;
}

.conversionBox .calculatorBox .myRemain .ttl {
    color: var(--color-accent-yellow);
    font-weight: bold;
}

@media screen and (min-width : 600px) {
    .conversionBox .calculatorBox {
    }

    .conversionBox .calculatorBox .controllerBox > div {
        width: 50%;
        padding: 10px;
    }

    .conversionBox .calculatorBox .write {
        width: 50%;
        padding: 20px;
    }

    .conversionBox .calculatorBox .conversion {
        width: 50%;
        padding: 20px;
    }

    .conversionBox .calculatorBox .myMonth {
        width: 50%;
        padding: 20px;
    }

    .conversionBox .calculatorBox .myRemain {
        width: 50%;
        padding: 20px;
    }

    .conversionBox .calculatorBox .controllerBox {
        margin-bottom: 0px;
    }
}

.conversionBox .companyList .index {
    display: none;
}

.conversionBox .companyList .title {
    font-size: 18px;
    margin: 30px 0 10px 0;
}

.conversionBox .companyList .list li {
    position: relative;
    padding: 10px;
    margin-bottom: 20px;
    background: var(--color-gray-dark);
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.conversionBox .companyList .list li .box {
    display: flex;
    padding-bottom: 60px;
}

.conversionBox .companyList .list li .box .info {
    color: var(--color-gray-border);
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.conversionBox .companyList .list li .info span {
    position: relative;
    margin-bottom: 5px;
    padding: 5px 0;
}

.conversionBox .companyList .list li .info span.company {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-white);
}

.conversionBox .companyList .list li .info span.min, .conversionBox .companyList .list li .info span.max {
    padding-left: 30px;
}

.conversionBox .companyList .list li .info span.min::before {
    position: absolute;
    content: '최소 ';
    left: 0;
}

.conversionBox .companyList .list li .info span.max::before {
    position: absolute;
    content: '최대 ';
    left: 0;
}

.conversionBox .companyList .list li .exchangeRequest {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.companyList .list li .conversion {
    position: absolute;
    top: 130px;
    left: 10px;
    width: calc(100% - 20px);
    text-align: center;
    padding: 5px 10px;
    background-color: var(--color-accent-yellow);
    border: 1px solid var(--color-accent-yellow);
    color: var(--color-white);
    border-radius: 10px;
}

.companyList .list li .conversion:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-accent-yellow);
    color: var(--color-accent-yellow);
}

.companyList .list li .exchangeRequest input {
    margin-bottom: 5px;
}

.companyList .list li .exchangeRequest input[type="text"] {
    width: 100%;
    padding: 5px 10px;
    background-color: var(--color-white);
    border-radius: 10px;
}

.conversionBox .companyList .list li .condition {
    width: 100%;
    color: var(--color-white);
    text-align: left;
    font-size: 13px;
}

.conversionBox .companyList .list li .condition span {
    display: block;
    color: var(--color-company-condition);
    font-size: 14px;
    font-weight: 600;
}

/* .conversionBox .companyList .list li span.company {width: 33.3%;}
.conversionBox .companyList .list li span.min {width: 33.3%;}
.conversionBox .companyList .list li span.max {width: 33.3%;} */
@media screen and (min-width : 1000px) {
    .conversionBox .companyList .index {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        background-color: var(--color-gray-dark);
        color: var(--color-white);
        border-bottom: 2px solid var(--color-gray-border);
    }

    .conversionBox .companyList .index span {
        text-align: center;
        font-size: 16px;
    }

    .conversionBox .companyList .index span.company {
        width: 28%;
        padding: 10px;
    }

    .conversionBox .companyList .list li .info span {
        font-size: 16px;
    }

    .conversionBox .companyList .list li .info span.company {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--color-gray-border);
        padding: 10px;
    }

    .conversionBox .companyList .index span.min {
        width: 21%;
        padding: 10px;
    }

    .conversionBox .companyList .list li .info span.min {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--color-gray-border);
        padding: 10px;
    }

    .conversionBox .companyList .index span.max {
        width: 21%;
        padding: 10px;
    }

    .conversionBox .companyList .list li .info span.max {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--color-gray-border);
        padding: 10px;
    }

    .conversionBox .companyList .list li {
        width: 100%;
    }

    .conversionBox .companyList .list li {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        border-radius: 0;
        padding: 0;
    }

    .conversionBox .companyList .list li .box {
        width: 100%;
        display: flex;
        padding-bottom: 0px;
    }

    .conversionBox .companyList .list li .box .info {
        width: 70%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .conversionBox .companyList .list li .info span {
        display: inline-block;
        text-align: center;
        padding: 0;
        margin-bottom: 0;
    }

    .conversionBox .companyList .list li .info span.min::before {
        position: inherit;
        content: '';
    }

    .conversionBox .companyList .list li .info span.max::before {
        position: inherit;
        content: '';
    }

    .conversionBox .companyList .index span.exchangeRequest {
        width: 30%;
    }

    .conversionBox .companyList .list li .exchangeRequest {
        width: 30%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        padding: 10px;
    }

    .conversionBox .companyList .list li .exchangeRequest .inputBox {
        width: 70%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .companyList .list li .exchangeRequest input[type="text"] {
        width: 95%;
        border-radius: 2px;
    }

    .companyList .list li .exchangeRequest input:nth-child(3) {
        margin-bottom: 0;
    }

    .companyList .list li .conversion {
        position: inherit;
        bottom: unset;
        width: 30%;
        left: unset;
        padding: 0;
        border-radius: 2px;
        font-size: 16px;
    }

    .conversionBox .companyList .list li .condition {
        width: 100%;
        margin-top: 0;
        border-top: 1px solid var(--color-gray-border);
        padding: 10px;
        font-size: 15px;
    }

    .conversionBox .companyList .list li .condition span {
        display: inline-block;
        margin-right: 10px;
        font-size: 16px;
    }
}

.lotteryBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 30px 0;
    position: relative;
}

.lotteryBox .noticeBox {
    width: 100%;
    padding: 20px 10px;
    border: 1px solid var(--color-gray-border);
    border-radius: 10px;
}

.lotteryBox .noticeBox span {
    display: block;
    color: var(--color-accent-blue);
    font-weight: 600;
    line-height: 1.7;
}

.lotteryBox .lotteryBtnBox {
    overflow: hidden;
    overflow-X: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.lotteryBox .lotteryBtnBox button {
    font-size: 16px;
    color: var(--color-gray-black2);
    background-color: #EDF3FE;
    padding: 10px 15px;
    border-radius: 30px;
    border: 1px solid #EDF3FE;
    text-align: center;
    transition: all 0.3s;
}

.lotteryBox .lotteryBtnBox button.on, .lotteryBox .lotteryBtnBox button:hover {
    background-color: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
    color: var(--color-white);
}

.lotteryBox .normal, .lotteryBox .high {
    width: 100%;
}

.lotteryBox .high {
    margin-top: 30px;
}

.lotteryBox .normal .title, .lotteryBox .high .title {
    background: var(--color-gray-dark);
    color: var(--color-white);
    padding: 10px;
    text-align: center;
    font-size: 16px;
    border-radius: 15px 15px 0 0;
}

.lotteryBox .normal ul, .lotteryBox .high ul {
    background-color: var(--color-white);
}

.lotteryBox .normal ul li, .lotteryBox .high ul li {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--color-gray-border);
}

.lotteryBox ul li .confirm {
    z-index: 10;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-dark);
    color: var(--color-gray-dark);
}

.lotteryBox ul li .confirm .title {
    position: relative;
    background-color: var(--color-white);
    color: var(--color-gray-dark);
    font-weight: 700;
    padding: 0 0 10px;
}

.lotteryBox ul li .confirm .title img.close {
    position: absolute;
    right: 10px;
    top: 0;
}

.lotteryBox ul li .confirm .list {
    text-align: center;
}

.lotteryBox .normal ul li:last-child, .lotteryBox .high ul li:last-child {
    border-bottom: 0;
}

.lotteryBox .normal ul li span, .lotteryBox .high ul li span {
    width: 100%;
    color: var(--color-gray-dark2);
    text-align: center;
    border-right: 1px solid var(--color-gray-border);
    padding: 10px 0;
}

.lotteryBox .normal ul li span:last-child, .lotteryBox .high ul li span:last-child {
    border-right: 0;
}

.lotteryBox .normal ul li span.num, .lotteryBox .high ul li span.num {
    width: 20%;
}

.lotteryBox .normal ul li span.price, .lotteryBox .high ul li span.price {
    width: 60%;
    font-weight: 500;
}

.lotteryBox .normal ul li span.limit, .lotteryBox .high ul li span.limit {
    width: 20%;
}

/* 복권판매 */
.lotteryBox .saleBox {
    width: 100%;
    margin-top: 20px;
    background-color: var(--color-gray-dark);
    border-radius: 15px;
    padding: 20px;
}

.lotteryBox .saleBox .stateBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.lotteryBox .saleBox .stateBox .title {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-accent-yellow);
}

.lotteryBox .saleBox .stateBox > div {
    border-radius: 15px;
    border: 1px solid var(--color-accent-yellow);
    width: 49%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.lotteryBox .saleBox .stateBox > div.highBox {
    margin-left: 2%;
}

.lotteryBox .saleBox .stateBox > div .name {
    padding: 10px;
    font-size: 16px;
    color: var(--color-dark-font);
}

.lotteryBox .saleBox .stateBox > div .count {
    border: 1px solid var(--color-accent-yellow);
    border-radius: 0 0 15px 15px;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    background-color: var(--color-white2)
}

.lotteryBox .saleBox dl {
    background-color: var(--color-gray-dark2);
    margin-top: 20px;
    border-top: 2px solid var(--color-dark-font);
    border-bottom: 2px solid var(--color-dark-font);
    padding: 10px;
}

.lotteryBox .saleBox dl div {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.lotteryBox .saleBox dl div dt {
    width: 100%;
    color: var(--color-dark-font);
    margin-bottom: 10px;
}

.lotteryBox .saleBox dl div dd {
    width: 100%;
    display: flex;
    color: var(--color-dark-font);
}

.lotteryBox .saleBox dl div dd input[type='text'] {
    padding: 10px;
    border-radius: 15px;
    width: 100%;
}

.lotteryBox .saleBox .buttonBox {
    margin-top: 20px;
    text-align: center;
}

.lotteryBox .saleBox .buttonBox button {
    padding: 10px 15px;
    background-color: var(--color-dark-font);
    color: var(--color-gray-dark);
    border-radius: 15px;
    font-weight: bold;
}

@media screen and (min-width : 1000px) {
    .lotteryBox {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 30px 0px 50px 0px;
    }

    .lotteryBox .noticeBox {
        padding: 20px;
    }

    .lotteryBox .noticeBox span {
        font-size: 16px;
    }

    .lotteryBox .high {
        margin-top: 0;
    }

    .lotteryBox .normal, .lotteryBox .high {
        width: 49%;
    }

    .lotteryBox ul li .confirm .title img.close {
        display: none;
    }

    .lotteryBox .saleBox dl {
        padding: 0;
    }

    .lotteryBox .saleBox dl div {
        margin: 0;
        padding: 10px;
        border-bottom: 1px solid var(--color-dark-font);
    }

    .lotteryBox .saleBox dl div dt {
        width: 30%;
        margin: 0;
        font-size: 16px;
        text-align: center;
    }

    .lotteryBox .saleBox dl div dd {
        width: 70%;
        padding: 10px;
    }

    .lotteryBox .saleBox dl div dd label:last-child {
        margin-left: 20px;
    }

    .lotteryBox .saleBox dl div dd label span {
        font-size: 16px;
    }

    .lotteryBox .saleBox .buttonBox button {
        padding: 15px 20px;
        font-size: 16px;
    }
}

.lottery-container {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 10px;
    background-color: var(--color-white)fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 300px;
    /* 캔버스와 같은 너비로 설정 */
    height: 200px;
    background: url(/images/etc/lotteryBg.jpg) 0 0 no-repeat;
    background-size: cover;
    z-index: 10;
}

.lottery-container canvas {
    border-radius: 8px;
    cursor: pointer;
    /* 마우스 포인터 스타일 */
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.lottery-container #amount {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    color: var(--color-white);
}

.lottery-container .prize-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.lottery-container .prize-info .notice {
    font-size: 14px;
}

.lottery-container button {
    font-size: 14px;
    display: none;
    color: var(--color-white);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

.lottery-container .lotteryClose {
    position: absolute;
    bottom: 0;
    right: 0;
}

.lottery-container .lotteryStorage {
    position: absolute;
    bottom: 0;
    left: 0;
}

/* 페이지 */
.pageBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 30px 0;
}

.pageBox button {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

.pageBox button:hover::before {
    position: absolute;
    content: '';
    width: 100%;
    padding-top: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(39,39,39,0.05);
    border-radius: 50%;
}

.pageBox button.now span {
    color: var(--color-gray-black2);
    font-weight: 600;
}

.pageBox button span {
    font-size: 14px;
    color: var(--color-gray-text);
    text-align: center;
}

/* 검색 결과 */
.searchList {
    padding-bottom: 30px;
}

.searchList .searchBox {
    background-color: var(--color-gray-dark);
}

.searchList .searchBox .box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 50px 10px;
    max-width: 600px;
    margin: 0 auto;
}

.searchList .searchBox .box .searchForm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 25px 10px;
    width: 100%;
}

.searchList .searchBox .box .searchForm .searchSel {
    width: 38%;
}

.searchList .searchBox .box .searchForm .inputBox {
    position: relative;
    width: 60%;
}

.searchList .searchBox .box .searchForm .inputBox input {
    width: 100%;
    padding: 10px 30px 10px 15px;
    border-radius: 30px;
    padding-left: 15px;
}

.searchList .searchBox .box .searchForm .inputBox .glasses {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.searchList .searchBox .box .countBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.searchList .searchBox .box .countBox div {
    font-weight: bold;
    color: var(--color-white);
}

.searchList .searchBox .box .countBox div.result {
    font-size: 18px;
    margin-bottom: 20px;
}

.searchList .searchBox .box .countBox div.result .word {
    font-size: 18px;
}

.searchList .searchBox .box .countBox div.count {
    border-bottom: 2px solid var(--color-white);
}

.searchList .searchBox .box .countBox div .word {
    color: var(--color-accent-yellow);
}

.searchList .tabBox ul {
    overflow: hidden;
    overflow-X: auto;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--color-gray-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.searchList .tabBox ul li {
    height: 50px;
    display: block;
    background-color: var(--color-white);
    text-align: center;
    border-left: 1px solid var(--color-gray-border);
}

.searchList .tabBox ul li:last-child {
    border-right: 1px solid var(--color-gray-border);
}

.searchList .tabBox ul li button {
    padding: 0 20px;
    color: var(--color-gray-text);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
}

.searchList .tabBox ul li.on {
    background-color: var(--color-gray-dark2);
}

.searchList .tabBox ul li.on button {
    color: var(--color-white);
}

.searchList .tabBox ul li .name {
    margin-right: 5px;
    white-space: nowrap;
}

.searchList .tabBox ul li .count {
    display: inline-block;
    background: var(--color-accent-yellow);
    border-radius: 50%;
    padding: 5px;
    width: 25px;
    height: 25px;
    font-size: 12px;
    line-height: 1.4;
}

.searchList .list .subTitle {
    font-size: 18px;
    color: var(--color-gray-black2);
    font-weight: bold;
    margin: 30px 0;
}

.searchList .list ul .nodata {
    text-align: center;
    margin-bottom: 30px;
}

.searchList .list ul li .box .subjectBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-border);
}

.searchList .list ul li .box .subjectBox .subject {
    width: 20%;
    padding: 10px 15px 10px 15px;
}

.searchList .list ul li .box .subjectBox .word {
    padding: 10px 10px 0 0;
    width: 80%;
    color: var(--color-black);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchList .list ul li .box .subjectBox .word a:hover {
    text-decoration: underline;
}

.searchList .list ul li .box .date {
    width: 100%;
    padding: 0 10px 0 0;
    text-align: right;
    color: var(--color-gray-text);
    font-size: 12px;
}

.searchList .list ul li .box .descBox {
    padding: 15px;
}

.searchList .list ul li .box .descBox .nicName {
    color: var(--color-gray-text);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.searchList .list ul li .box .descBox .desc {
    color: var(--color-gray-text);
    max-height: 100px;
    overflow: hidden;
}

@media screen and (min-width : 1000px) {
    .searchList .list ul li .box .subjectBox {
        flex-wrap: nowrap;
    }

    .searchList .list ul li .box .subjectBox .subject {
        text-align: cetner;
        border-right: 1px solid var(--color-gray-border);
    }

    .searchList .list ul li .box .subjectBox .word {
        padding: 10px;
    }

    .searchList .list ul li .box .subjectBox div {
        padding: 10px;
    }
}

/* 게시판 글쓰기 */
.container {
    padding: 0;
    margin: 0;
    width: 100%;
}

.note-editing-area {
    min-height: 350px;
}

.panel-heading.note-toolbar .dropdown-menu.note-check li a i.note-icon-menu-check {
    visibility: unset;
    color: var(--color-black);
}

.panel-heading.note-toolbar .dropdown-menu.note-check li i.note-icon-menu-check::before {
    display: none;
}

.note-editor.note-frame .note-editing-area .note-editable {
    min-height: 150px;
}

.boardBox {
    margin-top: 30px;
    margin-bottom: 30px;
}

.boardBox form {
    max-width: 800px;
    border-radius: 20px;
}

.boardBox form dl {
    display: flex;
    flex-direction: column;
}

.boardBox form dl dt {
    margin-bottom: 15px;
    color: var(--color-gray-text);
}

.boardBox form dl dd {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.boardBox form dl dd > span {
    position: relative;
    padding-left: 20px;
    margin-top: 5px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    color: var(--color-gray-text);
}

.boardBox form dl dd > input {
    width: 100%;
    border-radius: 10px;
    height: 40px;
    padding: 10px;
    background-color: var(--color-inputback-white);
}

.boardBox form dl dd > input[type="text"]:focus, select:focus, textarea:focus {
    outline: none;
}

.boardBox form dl dd > input[type="date"] {
    margin-bottom: 10px;
}

.boardBox form dl dd > input[type="radio"] {
    display: none;
}

.boardBox form dl dd > input[type="checkBox"] {
    display: none;
}

.boardBox form dl dd .radioButton {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid var(--color-gray-border);
    border-radius: 5px;
    background-color: var(--color-white);
    color: var(--color-gray-text);
    cursor: pointer;
}

.boardBox form dl dd > input[type="radio"]:checked + .radioButton {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-color: var(--color-gray-dark);
}

.boardBox form dl dd > input[type="checkBox"]:checked + .radioButton {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-color: var(--color-gray-dark);
}

.boardBox form dl dd > select {
    width: 48%;
    height: 40px;
    border-radius: 15px;
    padding: 0 20px;
    background-color: var(--color-inputback-white);
    border: 0;
    color: var(--color-gray-text);
}

.boardBox form dl dd > button {
    background-color: var(--color-white);
    color: var(--color-gray-text);
    padding: 10px 20px;
    border: 1px solid var(--color-gray-border);
    margin-right: 10px;
    border-radius: 10px;
}

.boardBox form dl dd > button:hover {
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.boardBox form dl dd.button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.boardBox form dl dd.link input {
    margin-bottom: 10px;
}

.boardBox form dl dd.radio {
    flex-direction: row;
    justify-content: flex-start;
}

.boardBox form dl dd.checkBox {
    flex-direction: row;
    justify-content: flex-start;
}

.boardBox form dl dd .add {
    position: relative;
    padding-left: 30px;
}

.boardBox form dl dd .add::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 20px;
    height: 20px;
    background-color: var(--color-gray-border);
    padding: 2px;
    border-radius: 10px;
}

.boardBox form dl dd .add::after {
    content: "+";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 11px;
    color: var(--color-gray-text);
    font-size: 13px;
}

.boardBox form dl dd .fileList {
    width: 100%;
    margin-top: 10px;
}

.boardBox form dl dd .fileList li {
    margin-bottom: 10px;
}

.boardBox form dl dd .fileBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.boardBox form dl dd .fileBox label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: var(--color-inputback-white);
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    margin: 0;
}

.boardBox form dl dd .fileBox label[for="attach[]"] {
    width: 90%;
}

.boardBox form dl dd .fileBox label .tag {
    text-align: center;
    max-width: 80px;
    width: 30%;
    height: 100%;
    color: var(--color-white);
    background-color: var(--color-kindBox);
    margin: 0;
    line-height: 45px;
    border-radius: 10px 0 0 10px;
}

.boardBox form dl dd .fileBox label .fileName {
    text-align: center;
    width: 50%;
    height: 100%;
    margin: 0;
    line-height: 45px;
}

.boardBox form dl dd .fileBox label .select {
    text-align: center;
    max-width: 80px;
    width: 20%;
    height: 100%;
    color: var(--color-white);
    background-color: var(--color-gray-text);
    margin: 0;
    line-height: 45px;
    border-radius: 0 10px 10px 0;
}

.boardBox form dl dd .fileBox .remove {
    position: relative;
    width: 8%;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 0;
}

.boardBox form dl dd .fileBox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.boardBox form dl dd .fileList .imgBox {
    position: relative;
    max-width: 200px;
    margin-top: 20px;
}

.boardBox form dl dd .fileList .imgBox .del {
    position: absolute;
    top: 0;
    right: -40px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    padding: 5px;
    border-radius: 5px;
}

.boardBox form dl dd .fileList .imgBox img {
    width: 100%;
}

.boardBox form dl dd .leaguelist {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 200px;
    background-color: var(--color-white);
    border: 1px solid;
    z-index: 1;
    height: 300px;
    overflow-y: auto;
}

.wrapper.dark-mode .boardBox form dl dd .leaguelist {
    background-color: var(--color-dark-backon);
}

.boardBox form dl dd .leaguelist.open {
    display: block;
}

.boardBox form dl dd .leaguelist ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.boardBox form dl dd .leaguelist ul li {
    width: 100%;
    cursor: pointer;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.boardBox form dl dd .leaguelist ul li:hover {
    background-color: var(--color-gray-light);
}

.boardBox form dl dd .leaguelist ul li span {
    width: 70%;
    text-align: center;
}

.boardBox form dl dd .leaguelist ul li img {
    width: 30%;
}

.boardBox form .requireBtn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 800px;
}

.boardBox form .requireBtn > button {
    width: 100%;
    border-radius: 5px;
    padding: 15px;
}

.boardBox form .requireBtn > button.submit {
    margin-bottom: 10px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.boardBox form .requireBtn > button.cancle {
    border: 1px solid var(--color-gray-dark);
}

@media screen and (min-width : 800px) {
    .boardBox form .requireBtn {
        margin-top: 30px;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .boardBox form .requireBtn > button {
        width: 48%;
    }

    .boardBox form .requireBtn > button.submit {
        margin-bottom: 0;
    }
}

/* 게시판 리스트 */
.boardBox.list .searchBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white2);
    ; flex-wrap: nowrap;
    padding: 20px 10px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.boardBox.list .searchBox.off {
    display: none;
}

.boardBox.list .searchBox form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.boardBox.list .searchBox .radioBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px 0;
    align-items: center;
    flex-wrap: nowrap;
    background-color: var(--color-white2);
}

.boardBox.list .searchBox .searchSel {
    width: 100%;
    margin-bottom: 15px;
    border: none;
}

.boardBox.list .searchBox .inputBox {
    position: relative;
    width: 100%;
}

.boardBox.list .searchBox .inputBox input {
    width: 100%;
    height: 38px;
    border-radius: 30px;
    padding-left: 15px;
}

.boardBox.list .searchBox .inputBox .glasses {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.boardBox.list .editBox {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    padding: 10px 0;
    align-items: flex-start;
}

.boardBox.list .editBox .pageing .page {
    color: var(--color-gray-text);
}

.boardBox.list .bannerBox img {
    width: 100%;
}

.boardBox.list .board_boxP {
    margin-bottom: 20px;
}

.boardBox.list .board_boxP {
    border: 1px solid var(--color-gray-dark);
    border-radius: 20px;
}

.boardBox.list .board_boxP.site {
    width: 100%;
}

.boardBox.list .board_boxP.site .copyBox ul {
    gap: 4%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.boardBox.list .board_boxP.site .copyBox ul li {
    width: 48%;
}

.boardBox.list .board_boxP.site .copyBox ul li .thume img {
    width: 100%;
    border-radius: 10px;
}

.boardBox.list .board_boxP.site .copyBox ul li .txt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.boardBox.list .board_boxP.site .copyBox ul li .txt .guar {
    padding: 2px 5px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-radius: 5px;
    display: inline-block;
}

.boardBox.list .board_boxP .tabBox {
    background-color: var(--color-gray-dark);
    border-radius: 19px 19px 0 0;
}

.boardBox.list .board_boxP .tabBox ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    justify-content: center;
}

.boardBox.list .board_boxP .tabBox ul li {
    position: relative;
    cursor: pointer;
    width: 50%;
    line-height: 40px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    color: var(--color-gray-text);
    font-size: 15px;
    padding: 0 10px;
}

.boardBox.list .board_boxP .tabBox ul li:not(:last-child)::after {
    content: "|";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    color: var(--color-gray-text);
}

.boardBox.list .board_boxP .tabBox ul li.on {
    color: var(--color-white);
}

.boardBox.list .board_boxP .board.week {
    display: none;
}

.boardBox.list .board_boxP .board.month {
    display: none;
}

.boardBox.list .board_boxP .board .listBox {
    min-height: 150px;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.boardBox.list .board_boxP .board .listBox .best {
    width: 30%;
    margin-right: 1.3%;
}

.boardBox.list .board_boxP .board .listBox li:nth-child(3) {
    margin-right: 0;
}

.boardBox.list .board_boxP .board .listBox .best .link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.boardBox.list .board_boxP .board .listBox .best .link .num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    width: 24px;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    border-radius: 2px;
}

.boardBox.list .board_boxP .board .listBox .best .link .thume {
    width: 100%;
}

.boardBox.list .board_boxP .board .listBox .best .link .thume img {
    width: 100%;
    max-width: 100px;
}

.boardBox.list .board_boxP .board .listBox .best .link .txt {
    width: 100%;
    overflow: hidden;
    color: var(--color-gray-dark2);
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .boardBox.list .board_boxP .listBox { display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; padding-bottom: 20px;} */
.boardBox.list .board_boxP .listBox .list {
    width: 100%;
    box-sizing: border-box;
}

.boardBox.list .board_boxP .listBox .list .link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}

.boardBox.list .board_boxP .listBox .list .link .num {
    width: 10%;
    text-align: center;
    font-size: 13px;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    border-radius: 2px;
}

.boardBox.list .board_boxP .listBox .list .link .txt {
    position: relative;
    padding-left: 10px;
    padding-right: 20px;
    width: 75%;
    overflow: hidden;
    color: var(--color-gray-dark2);
    font-size: 13px;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boardBox.list .board_boxP .listBox .list .link .txt .count {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3px;
    color: var(--color-orange-bright);
}

.boardBox.list .board_boxP .listBox .list .link .date {
    width: 15%;
    font-size: 13px;
    text-align: right;
    color: var(--color-gray-text);
}

@media screen and (min-width : 1000px) {
    .boardBox.list .board_boxP .listBox .list {
        flex: 0 0 50%;
        box-sizing: border-box;
        max-width: 49.2%;
    }
}

.boardBox.list .editBox .eventRequestBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--color-gray-border);
    padding: 10px;
    border-radius: 15px;
    margin: 10px 0;
}

.boardBox.list .editBox .eventRequestBox span em {
    font-weight: bold;
    color: var(--color-accent-orange);
}

.boardBox.list .editBox .settingBox {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.boardBox.list .editBox .settingBox .box {
    position: relative;
}

.boardBox.list .editBox .settingBox .settingList {
    display: none;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px 20px 20px 25px;
    background: var(--color-gray-dark);
    border-radius: 20px;
    z-index: 1;
}

.boardBox.list .editBox .settingBox .settingList.open {
    display: flex;
}

.boardBox.list .editBox .settingBox .settingList.off {
    display: none;
}

.boardBox.list .editBox .settingBox .settingList button {
    position: relative;
    padding: 5px 5px 5px 20px;
    color: var(--color-white);
}

.boardBox.list .editBox .settingBox .settingList button.boardSet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-boardSet.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.skinSet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-skinSet.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.allSet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-allSet.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.selectDel::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectDel.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.selectCopy::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectCopy.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.selectMove::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectMove.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.selectRestore::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectRestore.svg) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.selectBest::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectBest.svg) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.payment1::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-point.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .settingList button.payment2::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-stop.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .setting {
    position: relative;
    text-indent: -9999px;
    line-height: 0;
    width: 25px;
    height: 25px;
    background: url(/images/etc/setting.png) 0 0 no-repeat;
    background-size: contain;
    margin-right: 10px;
}

.boardBox.list .editBox .settingBox .search {
    margin-right: 10px;
    text-indent: -9999px;
    line-height: 0;
    width: 18px;
    height: 18px;
    background: url(/images/etc/glasses.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .order {
    margin-right: 5px;
    position: relative;
    padding: 10px 30px 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--color-gray-border);
    color: var(--color-gray-text);
    appearance: none;
    background: url(/images/etc/appearance.png) 90% 50% no-repeat;
}

.boardBox .editBox .edit {
    margin-right: 5px;
    position: relative;
    padding: 10px 30px 10px 15px;
    border-radius: 20px;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.boardBox .editBox .edit::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 15px;
    height: 15px;
    background: url(/images/etc/edit.png) 0 0 no-repeat;
    background-size: contain;
}

.boardBox.list .editBox .settingBox .lotterReuest {
    color: var(--color-gray-black2);
    background-color: #EAEDF6;
    padding: 10px 15px;
    border-radius: 30px;
    border: 1px solid var(--color-white);
    text-align: center;
    transition: all 0.3s;
}

.boardBox.list .editBox .settingBox .lotterReuest:hover {
    background-color: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
    color: var(--color-white);
}

.boardBox .transactionInfo {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.boardBox .transactionInfo .transactionTitle {
    width: 100%;
    padding: 3px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background-color: #EDF3FE;
}

.boardBox .transactionInfo .pointInfo {
    padding: 10px;
    width: 100%;
}

.boardBox .transactionInfo .pointInfo .info span {
    display: block;
    color: var(--color-gray-dark);
    margin-bottom: 10px;
}

.boardBox .transactionInfo .pointInfo .info span.notice {
    color: var(--color-accent-blue);
    text-align: center;
    font-weight: 600;
}

.boardBox .transactionInfo .pointInfo p {
    font-size: 16px;
    color: var(--color-accent-blue);
}

.boardBox .transactionInfo .pointArea {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.boardBox .transactionInfo .pointArea .minPoint {
    padding: 10px;
    background-color: var(--color-gray-light);
}

.boardBox .transactionInfo .pointArea .maxPoint {
    padding: 10px;
    background-color: var(--color-accent-blue);
    color: var(--color-white);
}

.boardBox .transactionInfo .pointArea .grade {
    font-weight: 600;
}

.freeGameBox .editBox {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 0;
}

.freeGameBox .editBox .settingBox {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.freeGameBox .editBox .settingBox .box {
    position: relative;
}

.freeGameBox .editBox .settingBox .settingList {
    display: none;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px 20px 20px 25px;
    background: var(--color-gray-dark);
    border-radius: 20px;
    z-index: 1;
}

.freeGameBox .editBox .settingBox .settingList.open {
    display: flex;
}

.freeGameBox .editBox .settingBox .settingList.off {
    display: none;
}

.freeGameBox .editBox .settingBox .settingList button {
    position: relative;
    padding: 5px 5px 5px 20px;
    color: var(--color-white);
}

.freeGameBox .editBox .settingBox .settingList button.boardSet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-boardSet.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.skinSet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-skinSet.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.allSet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-allSet.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.selectDel::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectDel.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.selectCopy::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectCopy.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.selectMove::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectMove.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.selectRestore::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectRestore.svg) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .settingList button.selectBest::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/setting-selectBest.svg) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .editBox .settingBox .setting {
    position: relative;
    text-indent: -9999px;
    line-height: 0;
    width: 25px;
    height: 25px;
    background: url(/images/etc/setting.png) 0 0 no-repeat;
    background-size: contain;
    margin-right: 10px;
}

.freeGameBox .listBox ul li {
    position: relative;
}

.freeGameBox .listBox ul li label {
    position: absolute;
    top: 10px;
    right: -10px;
}

@media screen and (min-width : 1000px) {
    .boardBox .transactionInfo .pointInfo .info span.notice {
        text-align: left;
    }

    .boardBox.list .searchBox form {
        width: 100%;
        max-width: none;
    }

    .boardBox.list .searchBox .radioBox {
        justify-content: flex-end;
    }

    .boardBox.list .searchBox .searchSel {
        width: 28%;
        margin-bottom: 0
    }

    .boardBox.list .searchBox .inputBox {
        width: 70%;
    }
}

.writerInfoBox {
    margin-bottom: 30px;
    border: 1px solid var(--color-gray-border);
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.writerInfoBox .profileBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0;
    width: 100%;
    border-bottom: 1px solid var(--color-gray-border);
    background-color: var(--color-gray-dark);
    padding: 20px;
    border-radius: 15px 15px 0 0;
}

.writerInfoBox .profileBox .imgBox {
    max-width: 70px;
    width: 50%;
    margin: 0 auto;
}

.writerInfoBox .profileBox .imgBox img {
    width: 100%;
    border-radius: 50%;
}

.writerInfoBox .profileBox .namebox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.writerInfoBox .profileBox .namebox .level {
    width: auto;
}

.writerInfoBox .profileBox .namebox .name {
    color: var(--color-white);
    width: 100%;
    text-align: center;
}

.writerInfoBox .profileBox .level {
    width: 50%;
    text-align: right;
    color: var(--color-white);
}

.writerInfoBox .profileBox .pointBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 50%;
    color: var(--color-white);
}

.writerInfoBox .profileBox .pointBox img {
    width: 100%;
    max-width: 20px;
}

.writerInfoBox .profileBox .nicName {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.writerInfoBox .profileBox .nicName .name {
    font-size: 16px;
}

.writerInfoBox .profileBox .bar {
    position: relative;
    background: var(--color-gray-light);
    width: 100%;
    height: 10px;
    border-radius: 10px;
}

.writerInfoBox .profileBox .bar .gauge {
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    background: var(--color-accent-yellow);
    border-radius: 10px;
}

.writerInfoBox .currentBoard {
    width: 100%;
    padding: 20px;
}

.writerInfoBox .currentBoard ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
}

.writerInfoBox .currentBoard ul li {
    width: 100%;
}

.writerInfoBox .currentBoard ul li a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.writerInfoBox .currentBoard ul li .subject {
    width: 80%;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.writerInfoBox .currentBoard ul li .subject .new {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #e49c12;
    border-radius: 50%;
    color: var(--color-white);
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    margin-right: 5px
}

.writerInfoBox .currentBoard ul li .date {
    width: 20%;
    color: var(--color-gray-text);
    text-align: right;
}

@media screen and (min-width : 800px) {
    .writerInfoBox {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }

    .writerInfoBox .profileBox {
        width: 35%;
        border-radius: 15px 0 0 15px;
        align-items: center;
        gap: 10px 0;
        border-bottom: 0;
    }

    .writerInfoBox .currentBoard {
        width: 65%;
    }

    .writerInfoBox .currentBoard ul li .subject {
        position: relative;
        width: 85%;
        padding-left: 10px;
    }

    .writerInfoBox .currentBoard ul li .subject::before {
        position: absolute;
        content: '';
        width: 5px;
        height: 5px;
        top: 50%;
        left: 0;
        border-radius: 30px;
        transform: translateY(-50%);
        background-color: var(--color-gray-dark);
    }

    .writerInfoBox .currentBoard ul li .date {
        width: 15%;
    }
}

.boardBox.list .indexBox {
    background-color: var(--color-gray-dark);
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.boardBox.list .indexBox span {
    color: var(--color-white);
    width: 25%;
    display: block;
    text-align: center;
}

.boardBox.list .listBox ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    border-top: 2px solid var(--color-gray-dark);
}

.boardBox.list .listBox ul li {
    position: relative;
    padding: 10px;
    width: 100%;
}

.boardBox.list .listBox ul li.expired a::after {
    content: "시작 되었거나 종료 된 경기입니다";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-black2);
    color: var(--color-white);
    opacity: 0.6;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrapper.dark-mode .boardBox.list .listBox ul li.expired a::after {
    content: "시작 되었거나 종료 된 경기입니다";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark-back);
    color: var(--color-white);
    opacity: 0.8;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.boardBox.list .listBox ul li span {
    color: var(--color-gray-text);
}

.boardBox.list .listBox ul li a {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-decoration: none;
}

.boardBox.list .listBox ul li.penalty {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-gray-border);
}

.boardBox.list .listBox ul li.penalty span.kind {
    color: var(--color-accent-orange);
    font-weight: 600;
    padding-right: 10px;
}

.boardBox.list .listBox ul li.penalty span.date {
    padding-right: 0;
    position: absolute;
    top: 10px;
    right: 10px;
}

.boardBox.list .listBox ul li.penalty:last-child {
    border-bottom: 0;
}

.boardBox.list .listBox ul li.onCasino a .site {
    width: 100%;
    margin-bottom: 10px;
}

.boardBox.list .listBox ul li.current {
    background-color: #f0f8ff;
}

.wrapper.dark-mode .boardBox.list .listBox ul li.current {
    background-color: #4a4f5c;
}

.boardBox.list .listBox.admin ul li label {
    position: absolute;
    top: 10px;
    right: -10px;
}

.boardBox.list .listBox.admin ul li.thumb label {
    position: absolute;
    top: -15px;
    right: -10px;
}

.boardBox.list .listBox ul li:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-border);
}

.boardBox.list .indexBoxW {
    display: none;
}

.boardBox.list .listBox ul li div.index {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.boardBox.list .listBox ul li div.index.commu {
    width: 100%;
    margin-bottom: 0;
}

.boardBox.list .listBox ul li div.index.commu .name {
    width: 70%;
    justify-content: flex-end;
}

.boardBox.list .listBox ul li div.index.commu .block {
    color: var(--color-notice-red);
    font-weight: 600;
    padding-right: 5px;
}

.boardBox.list .listBox ul li div.index.require {
    display: flex;
    justify-content: flex-start;
}

.boardBox.list .listBox ul li div.index.require .list {
    position: relative;
    padding-right: 10px;
}

.boardBox.list .listBox ul li div.index.require .list::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    width: 2px;
    height: 12px;
    background: var(--color-gray-text);
}

.boardBox.list .listBox ul li div.index.event {
    width: 100%;
    display: flex;
    margin-bottom: 0;
    justify-content: space-between;
}

.boardBox.list .listBox ul li div.index.event .name {
    width: 60%;
}

.boardBox.list .listBox ul li div.index.event .price {
    padding: 10px;
}

.boardBox.list .listBox ul li.notice span.subject {
    color: var(--color-black);
    font-size: 15px;
    font-weight: 600;
}

.boardBox.list .listBox ul li.notice span.num b {
    padding: 5px 10px;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    border-radius: 5px;
}

.boardBox.list .listBox ul li.main span.subject {
    color: var(--color-black);
    font-size: 15px;
    font-weight: 600;
}

.boardBox.list .listBox ul li.main span.num b {
    padding: 5px 10px;
    background-color: var(--color-gray-text);
    color: var(--color-white);
    border-radius: 5px;
}

.boardBox.list .listBox ul li div.priceEvent {
    margin-bottom: 10px;
}

.boardBox.list .listBox ul li.del {
    position: relative;
}

.boardBox.list .listBox ul li.del::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 1px;
    border: 1px double var(--color-black);
}

.boardBox.list .listBox ul li .realDel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    color: var(--color-accent-orange);
    font-weight: 600;
    background-color: var(--color-white);
    padding: 2px 5px;
    border-radius: 4px;
}

.boardBox.list .listBox ul li .realDel:hover {
    background-color: var(--color-accent-orange);
    color: var(--color-white);
}

/*.boardBox.list .listBox ul li span:not(.name) { overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 1;} */
.boardBox.list .listBox ul li span.point {
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gray-black);
}

.boardBox.list .listBox ul li a .subject {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    width: 80%;
    margin-bottom: 10px;
}

.boardBox.list .listBox ul li a .subject .subJe {
    color: var(--color-gray-black2);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.boardBox.list .listBox ul li.notice a .subject .subJe {
    font-weight: bold;
}

.boardBox.list .listBox ul li.verification a .subject {
    width: 75%;
}

.boardBox.list .listBox.admin ul li a .subject {
    width: 80%;
    margin-bottom: 10px;
}

.boardBox.list .listBox.admin ul li.notiAndInqu a .subject {
    width: 80%;
}

.boardBox.list .listBox ul.admin li .subject {
    width: 90%;
    display: -webkit-box;
    /*  flex-direction: row; flex-wrap: nowrap; align-items: center;  */
    font-weight: bold;
    color: var(--color-gray-black2);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* .boardBox.list .listBox ul li.event .subject {width: auto;} */
.boardBox.list .listBox ul li .subject .new {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #e49c12;
    border-radius: 50%;
    color: var(--color-white);
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    padding: 0px 5px;
    margin-right: 5px
}

.boardBox.list .listBox ul li .subject .comment {
    margin-left: 5px;
    color: var(--color-accent-pink);
}

.boardBox.list .listBox ul li div.desc {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    word-break: break-word;
}

.boardBox.list .listBox ul li div.desc > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.boardBox.list .listBox ul li .num b {
    margin-right: 5px;
}

.boardBox.list .listBox ul li .name {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.boardBox.list .listBox ul li .name .grade, .boardBox.list .listBox ul li .name .level {
    display: flex;
}

.memberEditBox {
    border-radius: 10px;
    z-index: 5;
    display: none;
    position: absolute;
    top: 15px;
    left: 30%;
    background-color: var(--color-gray-dark);
}

.memberEditBox .box {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.memberEditBox .box button {
    color: var(--color-gray-border);
    padding: 5px;
}

.memberEditBox .box button:hover {
    color: var(--color-white);
}

.boardBox.list .listBox ul li .name img {
    width: 18px;
    margin-right: 3px;
}

.boardBox.list .listBox ul li div.desc div span {
    position: relative;
}

.boardBox.list .listBox ul li div.desc div span:not(:last-child) {
    margin-right: 5px;
}

.boardBox.list .listBox ul li div a.waiting {
    padding: 2px 8px;
    background: var(--color-gray-border-bottom);
    color: var(--color-white);
    border-radius: 10px;
}

.boardBox.list .listBox ul li div a.holding {
    padding: 2px 8px;
    background: var(--color-accent-pink);
    color: var(--color-white);
    border-radius: 10px;
}

.boardBox.list .listBox ul li .date {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-right: 10px;
}

.boardBox.list .listBox ul li .date img {
    padding-right: 5px;
}

.boardBox.list .listBox ul li .check {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-right: 10px;
}

.boardBox.list .listBox ul li .check img {
    padding-right: 5px;
}

.boardBox.list .listBox ul li .suggestion {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-right: 10px;
}

.boardBox.list .listBox ul li .suggestion img {
    padding-right: 5px;
}

.boardBox.list .listBox ul li .nosuggestion {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.boardBox.list .listBox ul li .nosuggestion img {
    transform: rotate(180deg);
    padding-left: 5px;
}

/* .boardBox.list .listBox ul li .date { position: relative; padding-left: 20px;}
.boardBox.list .listBox ul li .date b { font-weight: 500px; color: var(--color-accent-orange);}
.boardBox.list .listBox ul li .date::before { content:""; position: absolute; top:50%; transform: translateY(-50%); left: 0;  width: 15px; height: 15px; background: url(/images/etc/date.png) 0 0 no-repeat; background-size: contain;}
.boardBox.list .listBox ul li .check { position: relative; padding-left: 25px;}
.boardBox.list .listBox ul li .check::before { content:""; position: absolute; top:60%; transform: translateY(-50%); left:5px;  width: 17px; height: 17px; background: url(/images/etc/check.png) 0 0 no-repeat; background-size: contain;}
.boardBox.list .listBox ul li .suggestion { position: relative; padding-left: 25px;}
.boardBox.list .listBox ul li .suggestion::before { content:""; position: absolute; top:50%; transform: translateY(-50%); left:5px;  width: 15px; height: 15px; background: url(/images/etc/suggestion.png) 0 0 no-repeat; background-size: contain;} */
.boardBox.list .listBox ul li.eatAndRun.mtscam .siteName {
    font-weight: bold;
    width: 100%;
    margin-bottom: 5px;
}

.boardBox.list .listBox ul li.eatAndRun.mtscam .siteAdress {
    color: var(--color-casino-blue);
}

.boardBox.list .listBox ul li.eatAndRun.mtscam .siteAdress:hover {
    border-bottom: 1px solid var(--color-casino-blue);
}

.boardBox.list .listBox ul li.eatAndRun.mtscam .damagePrice {
    position: absolute;
    bottom: 10px;
    right: 0px;
}

.boardBox.list .listBox ul li.eatAndRun.mtscam .damagePrice b {
    background-color: var(--color-damage);
    color: var(--color-white);
    padding: 3px;
    border-radius: 5px;
}

.boardBox.list .listBox ul li.slot a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.boardBox.list .listBox ul li.slot a .thumbBox img {
    width: 100%;
}

.boardBox.list .listBox ul li.slot a .subject {
    width: 100%;
}

.boardBox.list .listBox ul li.honor a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.boardBox.list .listBox ul li.honor a .thumbBox img {
    width: 100%;
}

.boardBox.list .listBox ul li.honor a .subject {
    width: 100%;
    margin-top: 10px;
}

.boardBox.list .listBox.eventAndconversion.gift ul li a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

/* 게시판 예외처리 */
.boardBox.view .replyBox {
    display: none;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--color-gray-dark);
    padding-bottom: 30px;
}

.boardBox.view .replyBox .replytitle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    font-size: 20px;
}

.boardBox.list .listBox.admin ul li .state {
    position: absolute;
    top: 0;
    right: 30px;
}

.boardBox.list .listBox ul li .state {
    position: absolute;
    top: -3px;
    right: 0;
}

.boardBox.list .listBox.admin ul li .state {
    position: absolute;
    bottom: 23px;
    right: 0;
    top: unset;
}

.boardBox.list .listBox.admin ul li.eventAndconversion .state {
    position: absolute;
    bottom: 23px;
    right: 30px;
    top: unset;
}

.boardBox.list .listBox.admin ul li.eventAndconversion.event .state {
    max-width: 100px;
    width: 30%;
    right: 0;
    text-align: center;
}

.boardBox.list .listBox ul li.eventAndconversion.event .state {
    max-width: 100px;
    width: 30%;
    right: 0;
    text-align: center;
}

.boardBox.list .listBox.admin ul li.pointTransaction .state {
    position: absolute;
    bottom: 23px;
    right: 0;
    top: unset;
}

.boardBox.list .listBox ul li .state b {
    background-color: var(--color-gray-text);
    color: var(--color-white);
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
}

.boardBox.list .listBox ul li .state .state1 {
    background-color: var(--color-success-green);
}

.boardBox.list .listBox ul li .state .state2 {
    background-color: var(--color-accent-orange);
}

.boardBox.list .listBox ul li.gifticon .state .state1 {
    background-color: var(--color-gray-text);
}

.boardBox.list .listBox ul li.gifticon .state .state2 {
    background-color: var(--color-success-green);
}

.boardBox.list .listBox ul li.gifticon .state .state3 {
    background-color: var(--color-accent-orange);
}

.boardBox.list .listBox ul li.lotteryTransaction .buy {
    padding: 5px 10px;
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    border-radius: 10px;
}

.boardBox.list .listBox ul li.lotteryTransaction .cancle {
    padding: 5px 10px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-radius: 10px;
}

/* 스포츠 분석 */
.boardBox.list .listBox.admin ul li.sport.analysis {
    margin-top: 20px;
}

.boardBox.list .listBox.admin ul li.sport.analysis label {
    position: absolute;
    right: -10px;
    top: -20px;
}

.boardBox.list .listBox ul li.sport.analysis {
    border: 0;
    margin-bottom: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
    box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
}

.wrapper.dark-mode .boardBox.list .listBox ul li.sport.analysis {
    -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
    box-shadow: 5px 5px 8px rgb(91 88 100 / 100%);
}

.boardBox.list .listBox ul li.sport.analysis a {
    justify-content: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject {
    width: 100%;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box .new {
    position: absolute;
    top: 0;
    left: -10px;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.home {
    width: 40%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.home img {
    max-width: 50px;
    width: 100%;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.home em {
    display: block;
    text-align: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.home .tag {
    display: block;
    text-align: center;
    color: var(--color-white);
    border-radius: 7px;
    background-color: var(--color-red);
    font-size: 12px;
    padding: 2px 8px;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.main {
    width: 35%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.main .date {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    padding-right: 0;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.main .vs {
    display: block;
    text-align: center;
    color: var(--color-white);
    border-radius: 7px;
    background-color: rgb(0 0 0 / 50%);
    font-size: 12px;
    padding: 2px 8px;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.expedition {
    width: 40%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.expedition img {
    max-width: 50px;
    width: 100%;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.expedition em {
    display: block;
    text-align: center;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box span.expedition .tag {
    display: block;
    text-align: center;
    color: var(--color-white);
    border-radius: 7px;
    background-color: var(--color-accent-blue);
    font-size: 12px;
    padding: 2px 8px;
}

.boardBox.list .listBox ul li.sport.analysis .subject .box .subJe {
    display: block;
    text-align: center;
    word-break: keep-all;
    width: 100%;
}

@media screen and (min-width : 1000px) {
    .boardBox.list .listBox.sport.analysis ul {
        gap: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .boardBox.list .listBox ul li.sport.analysis {
        width: calc(50% - 10px);
    }

    .boardBox.list .listBox ul li.sport.analysis a {
        flex-wrap: wrap;
    }
}

/* 게시물 답변 */
.boardBox.view .boardAnswerBox {
    margin-bottom: 30px;
}

.boardBox.view .boardAnswerBox .title {
    border-radius: 5px 5px 0 0;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.boardBox.view .boardAnswerBox .title .info {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.boardBox.view .boardAnswerBox .title .info .nic {
    font-size: 16px;
}

.boardBox.view .boardAnswerBox .title img {
    width: 100%;
    max-width: 60px;
}

.boardBox.view .boardAnswerBox .message {
    padding: 20px;
    border: 1px solid var(--color-gray-border);
    border-radius: 0 0 5px 5px;
}

.boardBox.view .boardAnswerBox .message p {
    color: var(--color-gray-dark);
}

.boardBox.view .boardAnswerBox .message p img {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

@media screen and (min-width : 1000px) {
    .boardBox.list .listBox ul li.notice a .subject .subJe {
        font-size: 16px;
    }

    .boardBox.list .listBox.admin ul li a .subject {
        width: 50%;
    }

    .boardBox.list .listBox.admin ul li label {
        position: relative;
        top: unset;
        right: unset;
        transform: none;
    }

    .boardBox.list .listBox.admin ul li.thumb label {
        position: absolute;
        top: -12px;
        left: 0;
    }

    .boardBox.list .listBox ul li a {
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }

    .boardBox.list .listBox ul li .num b {
        margin-right: 0;
    }

    .boardBox.list .listBox ul li .state {
        position: relative;
        display: inline-block;
        top: unset;
        bottom: unset;
        right: unset;
    }

    .boardBox.list .listBox ul li .num {
        width: 5%;
    }

    .boardBox.list .listBox ul li span.point {
        position: relative;
        right: 0;
    }

    .boardBox.list .listBox.admin ul li .state {
        position: relative;
        right: 0;
        bottom: unset;
    }

    .boardBox.list .listBox ul li .state {
        width: 10%;
    }

    .boardBox.list .listBox ul li a .subject {
        padding-left: 15px;
        padding-right: 30px;
        text-align: left;
        width: 50%;
        margin-bottom: 0;
    }

    .boardBox.list .listBox ul li.pointTransaction span.point {
        text-align: left;
        width: 10%;
        position: inherit;
        bottom: unset;
        right: unset;
    }

    .boardBox.list .listBox ul li.notice span.subject {
        font-size: 16px;
    }

    .boardBox.list .listBox ul li.main span.subject {
        font-size: 16px;
    }

    .boardBox.list .listBox ul li.point .company {
        width: 40%;
    }

    .boardBox.list .listBox ul li.point .point {
        width: 20%;
    }

    .boardBox.list .listBox ul li.point .state {
        width: 20%;
    }

    .boardBox.list .listBox ul li .name {
        width: 20%;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .boardBox.list .listBox ul li.eatAndRun .name {
        width: 15%;
    }

    .boardBox.list .listBox ul li.eatAndRun.site .name {
        width: 15%;
    }

    .boardBox.list .listBox ul li .date {
        width: 15%;
        justify-content: center;
    }

    .boardBox.list .listBox ul li .date b {
        font-weight: 400;
    }

    .boardBox.list .listBox ul li .date img {
        max-width: 20px;
        width: 100%;
    }

    .boardBox.list .listBox ul li .check {
        width: 10%;
        justify-content: center;
    }

    .boardBox.list .listBox ul li .check img {
        max-width: 23px;
        width: 100%;
    }

    .boardBox.list .listBox ul li .suggestion {
        width: 10%;
        justify-content: center;
    }

    .boardBox.list .listBox ul li .suggestion img {
        max-width: 20px;
        width: 100%;
    }

    .boardBox.list .listBox ul li.eatAndRun.mtscam .num {
        width: 5%;
    }

    .boardBox.list .listBox ul li.eatAndRun.mtscam .subject {
        width: 10%;
        margin: 0;
        padding-right: 0;
    }

    .boardBox.list .listBox ul li.eatAndRun.mtscam .siteName {
        width: 20%;
        margin: 0;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .boardBox.list .listBox ul li.eatAndRun.mtscam .siteAdress {
        width: 20%;
        padding: 0;
        margin: 0;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .boardBox.list .listBox ul li.eatAndRun.mtscam .damagePrice {
        width: 10%;
        padding: 0;
        position: relative;
        bottom: unset;
        right: unset;
    }

    .boardBox.list .listBox ul li.eatAndRun.mtscam .check {
        width: 10%;
    }

    .boardBox.list .listBox ul li.community.onCasino .num {
        width: 5%;
    }

    .boardBox.list .listBox ul li.community.onCasino .site {
        width: 10%;
    }

    .boardBox.list .listBox ul li.community.onCasino .subject {
        width: 40%;
    }

    .boardBox.list .listBox ul li.community.onCasino .suggestion {
        width: 10%;
    }

    .boardBox.list .listBox ul li.community.totoSite .num {
        width: 5%;
    }

    .boardBox.list .listBox ul li.community.totoSite .site {
        width: 20%;
    }

    .boardBox.list .listBox ul li.community.totoSite .subject {
        width: 30%;
    }

    .boardBox.list .listBox ul li.community.totoSite .suggestion {
        width: 5%;
    }

    .boardBox.list .listBox ul li.eventAndconversion.gifticon .goods {
        width: 40%;
    }

    .boardBox.list .listBox ul li.eventAndconversion.gifticon .state {
        width: 20%;
    }

    .boardBox.list .listBox ul li.eventAndconversion.gifticon .date {
        width: 20%;
    }

    .boardBox.list .listBox.admin ul li.eventAndconversion.event .state {
        width: 11%;
    }

    .boardBox.list .listBox ul li.eventAndconversion.event .state {
        width: 11%;
    }

    .boardBox.list .listBox ul li.notiAndInqu.notif .subject {
        width: 50%;
    }

    .boardBox.list .listBox.slot ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .boardBox.list .listBox.honor ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 2%;
    }

    .boardBox.list .listBox ul li.notiAndInqu.honor a .subject {
        width: 100%;
        padding: 0;
    }

    .boardBox.list .listBox ul li {
        border-bottom: none;
    }

    .boardBox.list .listBox ul li.slot {
        width: 31.3%
    }

    .boardBox.list .listBox ul li.slot a {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .boardBox.list .listBox ul li.slot a .thumbBox img {
        width: 100%;
    }

    .boardBox.list .listBox ul li.slot a .subject {
        width: 100%;
    }

    .boardBox.list .listBox ul li.honor {
        width: 32%
    }

    .boardBox.list .listBox ul li.honor a {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .boardBox.list .listBox ul li.honor a .thumbBox img {
        width: 100%;
    }

    .boardBox.list .listBox ul li.honor a .subject {
        width: 100%;
    }

    .boardBox.list .listBox ul li.eventAndconversion.event .subject {
        padding-right: 0;
    }

    .boardBox.list .listBox ul li.eventAndconversion.event .subject .subJe {
        font-weight: bold;
    }

    .boardBox.list .listBox.eventAndconversion ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .boardBox.list .listBox ul li.eventAndconversion.gift {
        width: 31.3%
    }

    .boardBox.list .listBox.eventAndconversion.gift ul li {
        border: 0;
    }

    .boardBox.list .listBox.eventAndconversion.gift ul li .subject {
        width: 100%;
    }

    .boardBox.view .boardAnswerBox .title .info .nic {
        font-size: 24px;
    }

    .boardBox.view .boardAnswerBox .title .info .field {
        font-size: 16px;
    }

    .boardBox.view .boardAnswerBox .title img {
        max-width: 70px;
    }

    .boardBox.list .listBox ul li.penalty span {
        text-align: center;
    }

    .boardBox.list .listBox ul li.penalty span.num {
        width: 10%;
    }

    .boardBox.list .listBox ul li.penalty span.name {
        width: 20%;
        justify-content: center;
    }

    .boardBox.list .listBox ul li.penalty span.kind {
        width: 30%;
    }

    .boardBox.list .listBox ul li.penalty span.subject {
        width: 20%;
    }

    .boardBox.list .listBox ul li.penalty span.date {
        width: 20%;
    }

    .boardBox.list .listBox.admin ul li a .subject {
        margin-bottom: 0;
    }

    .boardBox.list .listBox.admin ul li.eventAndconversion .state {
        position: relative;
        top: unset;
        right: unset;
        bottom: unset;
    }

    .boardBox.list .listBox ul li.onCasino a .site {
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .boardBox.list .listBox ul li.lotteryTransaction a {
        cursor: auto;
    }

    .boardBox.list .listBox ul li.lotteryTransaction span {
        width: 20%;
    }

    .boardBox.list .listBox ul li.lotteryTransaction span.point {
        text-align: left;
    }

    .boardBox.list .listBox ul li.lotteryTransaction .buy {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .boardBox.list .listBox ul li.lotteryTransaction .cancle {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}

@media screen and (min-width : 1000px) {
    /* 게시판 리스트 */ .boardBox.list .indexBoxW {
        display: none;
        background-color: var(--color-gray-dark);
        padding: 10px;
        /* display: flex; */
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

    .boardBox.list .indexBoxW span {
        color: var(--color-white);
        display: block;
        text-align: center;
    }

    .boardBox.list .indexBoxW span.no {
        width: 10%;
        text-align: left;
        padding-left: 10px;
    }

    .boardBox.list .indexBoxW span.subject {
        width: 30%;
    }

    .boardBox.list .indexBoxW span.nicName {
        width: 20%;
    }

    .boardBox.list .indexBoxW span.date {
        width: 10%;
    }

    .boardBox.list .indexBoxW span.check {
        width: 10%;
    }

    .boardBox.list .indexBoxW span.suggestion {
        width: 10%;
    }
}

/* 보증사이트 */
.boardBox.list .listBox.admin ul li.thumb.site label {
    top: 12px;
}

.boardBox.list .listBox.admin ul li.thumb {
    padding-top: 30px;
}

.wrapper.dark-mode .boardBox.list .listBox.site ul li {
    -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
    box-shadow: 5px 5px 8px rgb(91 88 100 / 100%);
    -moz-box-shadow: 5px 5px 8px rgb(91 88 100 / 100%);
}

.boardBox.list .listBox ul li.site {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
    box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
    -moz-box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
    border-radius: 10px;
    margin-bottom: 20px;
    border-bottom: 0;
}

.boardBox.list .listBox ul li.site a {
    width: 35%;
    margin-right: 10px;
}

.boardBox.list .listBox ul li.site a img {
    width: 100%;
    border-radius: 10px;
}

.boardBox.list .listBox ul li.site .contents {
    width: calc(65% - 10px);
}

.boardBox.list .listBox ul li.site .contents dl {
    border: 2px solid var(--color-gray-border);
    border-radius: 10px;
}

.boardBox.list .listBox ul li.site .contents dl div {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.boardBox.list .listBox ul li.site .contents dl div dt {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    width: 50%;
    font-weight: 300;
    padding: 10px;
    text-align: center;
}

.boardBox.list .listBox ul li.site .contents dl div:first-child dt {
    border-radius: 8px 0 0 0;
}

.boardBox.list .listBox ul li.site .contents dl div:last-child dt {
    border-radius: 0 0 0 8px;
}

.boardBox.list .listBox ul li.site .contents dl div dd {
    width: 50%;
    text-align: center;
}

.boardBox.list .listBox ul li.site .contents dl div dd.code {
    color: var(--color-damage);
    font-weight: bold;
}

.boardBox.list .listBox ul li.site .contents .buttonBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    gap: 10px;
}

.boardBox.list .listBox ul li.site .contents .buttonBox a {
    display: block;
    width: calc(50% - 5px);
    text-align: center;
    border-radius: 5px;
    margin-right: 0;
    font-weight: bold;
}

.boardBox.list .listBox ul li.site .contents .buttonBox a.detail {
    padding: 0 10px 0 0;
    position: relative;
    border: 2px solid var(--color-gray-dark);
    color: var(--color-gray-dark);
}

.boardBox.list .listBox ul li.site .contents .buttonBox a.detail::after {
    content: "+";
    position: absolute;
    top: -6px;
    right: 7px;
    font-size: 20px;
}

.boardBox.list .listBox ul li.site .contents .buttonBox a.barogo {
    padding: 0 10px 0 0;
    position: relative;
    border: 2px solid var(--color-damage);
    color: var(--color-damage);
}

.boardBox.list .listBox ul li.site .contents .buttonBox a.barogo::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3px;
    width: 20px;
    height: 20px;
    background: url(/images/etc/link.png) 50% 50% no-repeat;
    background-size: auto;
}

.wrapper.dark-mode .boardBox.list .listBox ul li.site .contents .buttonBox a.detail {
    border: 2px solid var(--color-gray-border);
    ; color: var(--color-gray-border);
}

.boardBox.list .listBox ul li.site .contents dl div dd.siteName {
    font-weight: bold;
}

.wrapper.dark-mode .boardBox.list .listBox ul li.site .contents dl div dd.siteName {
    color: var(--color-white);
    font-weight: bold;
}

@media screen and (min-width : 1000px) {
    .wrapper.dark-mode .boardBox.list .listBox.site ul {
        gap: 1%;
    }

    .wrapper.dark-mode .boardBox.list .listBox.site ul li {
        -webkit-box-shadow: 5px 5px 8px rgb(50 60 70 / 8%);
        box-shadow: 5px 5px 8px rgb(91 88 100 / 100%);
        -moz-box-shadow: 5px 5px 8px rgb(91 88 100 / 100%);
    }

    .boardBox.list .listBox.site ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }

    .boardBox.list .listBox.admin.site ul li label {
        top: 7px
    }

    .boardBox.list .listBox ul li.site {
        width: 32.6%;
    }

    .boardBox.list .listBox ul li.site .contents {
        width: 100%;
    }

    .boardBox.list .listBox ul li.site a {
        width: 100%;
        margin-right: 0px;
    }

    .boardBox.list .listBox ul li.site .contents .buttonBox a {
        font-size: 16px;
    }

    .boardBox.list .listBox ul li.site .contents .buttonBox a.detail {
        padding: 0 10px 0 0;
        position: relative;
        border: 2px solid var(--color-gray-dark);
        color: var(--color-gray-dark);
    }

    .boardBox.list .listBox ul li.site .contents .buttonBox a.detail::after {
        content: "+";
        position: absolute;
        top: -5px;
        right: 25px;
        font-size: 20px;
    }

    .boardBox.list .listBox ul li.site .contents .buttonBox a.barogo {
        padding: 0 10px 0 0;
        position: relative;
        border: 2px solid var(--color-damage);
        color: var(--color-damage);
    }

    .boardBox.list .listBox ul li.site .contents .buttonBox a.barogo::after {
        content: "";
        position: absolute;
        top: 48%;
        transform: translateY(-50%);
        right: 20px;
        width: 20px;
        height: 20px;
        background: url(/images/etc/link.png) 50% 50% no-repeat;
        background-size: auto;
    }
}

/* 게시판 이벤트 */
/* .boardBox.list .listBox.event ul { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%;}
.boardBox.list .listBox.event ul li { position: relative; display: flex; justify-content: center; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.boardBox.list .listBox.event ul li a{display: flex; justify-content: center; width: 100%; padding-top: 10px; padding-bottom: 30px; border-bottom: 2px solid var(--color-gray-border);flex-direction: column; flex-wrap: nowrap; align-items: center; max-width: 400px;}
.boardBox.list .listBox.event ul li a:last-child {padding-bottom: 0; border-bottom: none;}
.boardBox.list .listBox.event ul li .box .imgBox { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin-bottom: 10px;}
.boardBox.list .listBox.event ul li .box .imgBox img {width: 100%;}
.boardBox.list .listBox.event ul li .box .descBox {width: 100%;}
.boardBox.list .listBox.event ul li .box .descBox .status {display: inline-block; padding: 5px 15px; background: var(--color-accent-pink); color: var(--color-white); font-weight: 400; border-radius: 5px; margin-bottom: 5px;}
.boardBox.list .listBox.event ul li .box .descBox .end {display: inline-block; padding: 5px 15px; background: var(--color-gray-text); color: var(--color-white); font-weight: 400; border-radius: 5px; margin-bottom: 5px;}
.boardBox.list .listBox.event ul li .box .descBox span {display: block; color: var(--color-gray-text); font-size: 14px; font-weight: 500;}
.boardBox.list .listBox.event ul li .box .descBox span.subject {color: var(--color-gray-black2); font-size: 17px; font-weight: 500; margin-bottom: 5px; letter-spacing: -1px;}
.boardBox.list .listBox.event ul li .box .descBox span.subject:hover {color: var(--color-black); font-weight: 600;}
.boardBox.list .listBox.event ul li .box .imgBox.state2::after { content:"종료된 이벤트"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: var(--color-white2); background-color: rgba(0,0,0,0.6); display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 16px;}
 */
/* 게시판 블로그 */
.boardBox.list .listBox.blog ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.boardBox.list .listBox.blog ul li {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.boardBox.list .listBox.blog ul li a {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--color-gray-border);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 400px;
}

.boardBox.list .listBox.blog ul li a:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.boardBox.list .listBox.blog ul li .box .imgBox {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.boardBox.list .listBox.blog ul li .box .imgBox img {
    width: 100%;
}

.boardBox.list .listBox.blog ul li .box .descBox {
    width: 100%;
}

.boardBox.list .listBox.blog ul li .box .descBox .status {
    display: inline-block;
    padding: 5px 15px;
    background: var(--color-accent-pink);
    color: var(--color-white);
    font-weight: 400;
    border-radius: 5px;
    margin-bottom: 5px;
}

.boardBox.list .listBox.blog ul li .box .descBox .end {
    display: inline-block;
    padding: 5px 15px;
    background: var(--color-gray-text);
    color: var(--color-white);
    font-weight: 400;
    border-radius: 5px;
    margin-bottom: 5px;
}

.boardBox.list .listBox.blog ul li .box .descBox span {
    display: block;
    color: var(--color-gray-text);
    font-size: 14px;
    font-weight: 500;
}

.boardBox.list .listBox.blog ul li .box .descBox span.subject {
    color: var(--color-gray-black2);
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.boardBox.list .listBox.blog ul li .box .descBox span.subject:hover {
    color: var(--color-black);
    font-weight: 600;
}

.boardBox.list .listBox.blog ul li .box .imgBox.state2::after {
    content: "종료된 이벤트";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--color-white2);
    background-color: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.boardBox.list .listBox.admin ul li.notiAndInqu.blog a .subject {
    width: 100%;
    padding: 0;
}

.boardBox.list .listBox ul li.notiAndInqu.blog a .subject {
    width: 100%;
    padding: 0;
}

@media screen and (min-width : 800px) {
    .boardBox {
        margin-bottom: 60px;
        margin-top: 40px;
    }

    .boardBox form {
        max-width: 800px;
    }

    .boardBox form dl {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .boardBox form dl dt {
        font-weight: bold;
        position: relative;
        z-index: 8;
        line-height: 85px;
        text-align: center;
        width: 20%;
    }

    .boardBox form dl dd {
        width: 80%;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .boardBox form dl dd > input {
        min-height: 60px;
    }

    .boardBox form dl dd > button {
        padding: 13px 10px;
        font-size: 14px;
    }
}

/* 게시판 casionInfo */
.wrapper:not(.home) .container .frame main .casinoInfo .topBox h2 {
    text-indent: 0;
    line-height: 1.5;
    background-color: var(--color-gray-dark);
    padding: 10px;
    padding-left: 20px;
    border-radius: 19px 19px 0 0;
    color: var(--color-white);
}

.casinoInfo {
    margin-bottom: 30px;
    border-radius: 20px;
}

.casinoInfo .botInfo {
    margin: 30px 0;
    outline: solid 5px var(--color-accent-yellow);
    background-color: var(--color-gray-dark);
    padding: 20px;
    border-radius: 30px;
}

.casinoInfo .botInfo .subDesc {
    color: var(--color-gray-light);
    line-height: 1.6;
}

.casinoInfo .topBox .desc {
    color: var(--color-gray-light);
    line-height: 1.6;
}

.casinoInfo .copyBox {
    border: 1px solid var(--color-gray-dark);
    padding: 10px;
    border-radius: 0 0 19px 19px;
}

/* .casinoInfo .copyBox h3 { margin-bottom: 20px; color: var(--color-white); padding: 10px; background-color: var(--color-gray-dark); border-radius: 30px; text-align: center; font-size: 18px;} */
.casinoInfo .copyBox .copy {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.casinoInfo .copyBox .copy .title {
    margin-bottom: 10px;
    background-color: #205E42 !important;
    padding-right: 3rem !important;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 1rem !important;
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
    color: var(--color-white);
}

.casinoInfo .copyBox .desc {
    font-size: 16px;
    color: var(--color-gray-dark2);
}

.casinoInfo .copyBox .copy span {
    font-size: 16px;
    color: var(--color-gray-dark2);
}

.casinoInfo .copyBox .copy span b {
    color: var(--color-accent-yellow);
    font-weight: 600;
}

.casinoInfo .copyBox .copy .subCopy {
    padding-left: 10px;
}

.casinoInfo .copyBox .copy .subCopy h4 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0;
    color: var(--color-gray-black);
    font-weight: 600;
}

.casinoInfo .copyBox .copy .subCopy h4 b {
    min-width: 30px;
    width: 30px;
    height: 30px;
    background-color: var(--color-gray-dark);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 10px;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    font-weight: 400;
}

@media screen and (min-width: 1000px) {
    .wrapper:not(.home) > .container .frame main .casinoInfo .topBox h2 {
        font-size: 18px;
    }

    .casinoInfo .topBox h3 {
        font-size: 20px;
    }

    .casinoInfo .copyBox {
        position: relative;
        padding: 30px 20px 20px 20px;
    }

    /* .casinoInfo .copyBox h3 {display: inline-block; padding: 10px 25px; position: absolute; left: -26px; top: 20px; font-size: 20px;} */
    .casinoInfo .copyBox .copy .title {
        font-size: 18px;
        font-weight: 700;
    }

    .casinoInfo .copyBox .copy .subCopy h4 {
        font-size: 15px;
    }

    .casinoInfo .copyBox .copy .subCopy h4 b {
        font-size: 12px;
        min-width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .boardBox.list .listBox.blog ul {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }

    .boardBox.list .listBox.blog ul li {
        width: 32%;
        margin-right: 2%;
        margin-bottom: 50px;
        border: none;
        padding: 0
    }

    .boardBox.list .listBox.blog ul li:nth-child(3n) {
        margin-right: 0;
    }

    .boardBox.list .listBox.blog ul li .box .descBox span.subject {
        min-height: 50px;
        margin-bottom: 0;
    }
}

/* .freeGameBox { margin: 30px 0; }
.freeGameBox .category { background-color: var(--color-gray-dark); overflow: auto; border-radius: 20px 20px 0 0;}
.freeGameBox .category ul { display: flex;  }
.freeGameBox .category ul li button { padding: 10px; color: var(--color-white); } */
/* 프리게임 */
/* .freeGameBox .category ul { margin-bottom: 30px; border-bottom: 1px solid var(--color-gray-border); margin-top: 30px;  overflow-x: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;} 
.freeGameBox .category ul li {width: 50%;}
.freeGameBox .category ul li button  {width: 130px; height: 50px; line-height: 30px; display: block; box-sizing: border-box; background-color: var(--color-white); color: var(--color-gray-text); border-top:1px solid var(--color-gray-border); border-left: 1px solid var(--color-gray-border); text-align: center;}
.freeGameBox .category ul li:last-child button { border-right: 1px solid var(--color-gray-border);}
.freeGameBox .category ul li.on button { background-color: var(--color-gray-dark2); color: var(--color-white); } */
.freeGameBox .gameBox .subject {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 600;
}

.freeGameBox .gameBox .subject::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-gray-dark);
    content: '';
}

.freeGameBox .gameBox .noticeBox {
    padding: 10px;
    background-color: var(--color-gray-dark);
    border-radius: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.freeGameBox .gameBox .noticeBox span {
    color: var(--color-white);
    text-align: center;
    display: block;
}

.freeGameBox .gameBox .box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.freeGameBox .gameBox .box .game {
    width: 100%;
    height: 500px;
}

.freeGameBox .gameBox .box .gamedata {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    background-color: var(--color-gray-dark);
    border-radius: 15px;
    padding: 10px;
}

.freeGameBox .gameBox .box .gamedata iframe {
    border-radius: 15px;
}

.freeGameBox .gameBox .box .gamedata .imgBox {
    width: 100%;
}

.freeGameBox .gameBox .box .gamedata img {
    width: 100%;
    border-radius: 10px;
}

.freeGameBox .gameBox .box .gamedata .dataBox {
    width: 100%;
}

.freeGameBox .gameBox .box .gamedata .dataBox span {
    display: block;
    padding: 10px 0;
    color: var(--color-white);
    border-bottom: 1px dotted var(--color-accent-yellow);
    text-align: center;
}

.freeGameBox .gameBox .box .gamedata .dataBox span.tag {
    border: none;
    color: var(--color-gray-border-bottom);
}

.freeGameBox .gameBox .info {
    padding: 20px 0;
}

.freeGameBox .gameBox .info .title {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.freeGameBox .gameBox .info .title::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-gray-dark);
    content: '';
}

.freeGameBox .gameBox .info .desc {
    padding: 10px;
    background-color: var(--color-white);
    border-radius: 15px;
    text-align: center;
    color: var(--color-gray-text);
    font-weight: 500;
}

@media screen and (min-width: 800px) {
    .freeGameBox .gameBox .subject {
        font-size: 20px;
        font-weight: 700;
    }

    .freeGameBox .gameBox .noticeBox span {
        text-align: left;
        padding: 5px;
        font-size: 16px;
    }

    .freeGameBox .gameBox .box {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .freeGameBox .gameBox .box .game {
        width: 70%;
    }

    .freeGameBox .gameBox .box .gamedata {
        width: 30%;
    }

    .freeGameBox .gameBox .info .desc {
        text-align: left;
        font-size: 16px;
        padding: 15px;
    }

    .freeGameBox .gameBox .info .title {
        font-size: 20px;
    }
}

/* bettingBox */
.baccarat .indexBoxW {
    margin-top: 30px;
    background-color: var(--color-gray-dark);
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.baccarat .indexBoxW span {
    color: var(--color-white);
    display: block;
    text-align: center;
    font-size: 10px;
}

.baccarat .betResultTable li {
    border-bottom: 1px solid var(--color-gray-border);
}

.baccarat .betResultTable li {
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.baccarat .betResultTable li span {
    display: block;
    font-size: 10px;
    text-align: center;
}

.baccarat .betResultTable li span.round {
    width: 10%;
}

.baccarat .betResultTable li span.time {
    width: 15%;
}

.baccarat .betResultTable li span.select {
    width: 15%;
}

.baccarat .betResultTable li span.odds {
    width: 10%;
}

.baccarat .betResultTable li span.point {
    width: 20%;
}

.baccarat .betResultTable li span.hitPoint {
    width: 20%;
}

.baccarat .betResultTable li span.winResult {
    width: 10%;
}

.bettingBox .betTitle {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 30px 0;
}

.bettingBox .betList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.bettingBox .betList .playBox {
    width: 49%;
    margin-right: 2%;
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray-border);
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--color-gray-black2);
}

.bettingBox .betList .playBox:nth-child(2n) {
    margin-right: 0;
}

.bettingBox .betList .playBox .bet-point {
    margin-top: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    padding: 10px;
    border-radius: 10px;
    color: var(--color-gray-black2);
}

.bettingBox .betList .p-2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
}

.bettingBox .betList .p-2 li {
    width: 100%;
}

.bettingBox .betList .p-2 li div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    color: var(--color-black);
    font-weight: 700;
}

.bettingBox .betList .p-2 li div.col-6.point {
    color: var(--color-accent-orange);
}

.betcolor {
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray-border);
    border-radius: 15px;
    padding: 10px;
}

.betcolor .betBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.betcolor .betBox .bet {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.betcolor .betBox .bet .btn {
    background: #63B0F2;
    border-radius: 10px;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 10px;
    text-align: center;
}

.betcolor .betBox .bet .btn button {
    width: 100%;
    color: var(--color-white);
    padding: 10px;
}

.betcolor .betBox .bet .btn.tie {
    background: #63F28C;
    width: 100%;
    margin-right: 0;
}

.betcolor .betBox .bet .btn.banker {
    background: var(--color-casino-pink);
    margin-right: 0;
}

.betcolor .betBox .bet .btn.bpair {
    background: var(--color-casino-pink);
    margin-right: 0;
}

.bet-inform {
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    color: var(--color-gray-black2);
    border-radius: 10px;
    padding: 10px;
}

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

.bet-inform li:last-child {
    margin-bottom: 0;
}

.bet-inform li .gameName {
    font-weight: 600;
}

.bet-inform li #txtDpId {
    font-weight: 600;
}

.bet-inform li #txtBetType {
    font-weight: 600;
}

.betPointArea {
    border: 1px solid var(--color-gray-border);
    background: var(--color-white);
    color: var(--color-gray-black2);
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
}

.betPointArea > div {
    width: 100%;
}

.betPointArea .pointList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.betPointArea .bettingPoint {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

.betPointArea .bettingPoint .betTitle {
    width: 30%;
    margin-bottom: 10px;
    text-align: center;
}

.betPointArea .bettingPoint input {
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray-border);
    width: 70%;
    height: 35px;
    padding-left: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* .betPointArea .pointArea {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;} */
.betPointArea .pointArea .pointButton {
    width: 32.3%;
    margin-right: 1%;
    margin-bottom: 10px;
}

.betPointArea .pointArea button {
    background: var(--color-gray-dark);
    color: var(--color-white);
    padding: 10px 0px;
    border-radius: 10px;
    width: 100%;
}

.gaugeArea {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.gaugeArea .max {
    width: 49%;
    margin-right: 1%;
}

.gaugeArea .max button {
    color: var(--color-white);
    background: #259BCA;
    width: 100%;
    margin-right: 1%;
    padding: 10px 30px;
    border-radius: 10px;
    color: var(--color-white);
}

.gaugeArea .reset {
    width: 49%;
}

.gaugeArea .reset button {
    color: var(--color-white);
    background: #EAEDF6;
    width: 100%;
    padding: 10px 30px;
    border-radius: 10px;
    color: var(--color-gray-black2);
}

.nowPoint {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.nowPoint .pointTitle {
    width: 30%;
}

.nowPoint input {
    background: var(--color-white);
    width: 70%;
    height: 35px;
    padding-left: 10px;
    border-radius: 10px;
}

.nowPoint {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.nowPoint .pointTitle {
    width: 30%;
    text-align: center;
}

.nowPoint input {
    background: var(--color-gray-light);
    border: 1px solid var(--color-gray-border);
    width: 70%;
    height: 35px;
    padding-left: 10px;
    border-radius: 10px;
}

.betButton {
    text-align: center;
    margin: 20px 0;
}

.betButton button {
    width: 100%;
    padding: 10px 50px;
    font-size: 18px;
    background: var(--color-gray-dark);
    color: var(--color-accent-yellow);
    border-radius: 10px;
}

@media screen and (min-width: 1000px) {
    .bet-inform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bettingBox .betList {
        flex-wrap: nowrap;
    }

    .bettingBox .betList .playBox {
        width: 28%;
        margin-bottom: 20px;
        margin-right: 2%;
    }

    .bettingBox .betList .playBox:nth-child(2) {
        margin-right: 2%;
    }

    .betPointArea {
        margin-top: 0;
        width: 60%;
    }

    .betPointArea .bettingPoint {
        flex-wrap: nowrap;
        margin-bottom: 0;
    }

    .betPointArea .bettingPoint .betTitle {
        text-align: center;
    }

    .betPointArea .pointList {
        width: 100%;
        flex-wrap: nowrap;
    }

    .betPointArea .gaugeArea {
        width: 30%;
        margin-top: 10px;
        margin-bottom: 0;
    }

    .betPointArea .nowPoint {
        width: 65%;
        margin-bottom: 0;
    }

    .betPointArea .gaugeArea .nowPoint .pointTitle {
        text-align: center;
    }

    .betPointArea .gaugeArea .max {
        width: 45%;
        margin-right: 0;
    }

    .betPointArea .gaugeArea .max button {
        padding: 10px 0px;
        width: 100%;
    }

    .betPointArea .gaugeArea .reset {
        width: 45%;
    }

    .betPointArea .gaugeArea .reset button {
        padding: 10px 0px;
        width: 100%;
    }

    .betPointArea .pointArea .pointButton {
        width: 16%;
        margin-right: 1%;
        margin-bottom: 0;
    }

    .betPointArea .pointArea .pointButton:last-child {
        margin-right: 0;
    }

    .betcolor .betBox .bet .btn {
        width: 19.2%;
        margin-right: 1%;
    }

    .betcolor .betBox .bet .btn.tie {
        width: 19.2%;
        margin-right: 1%;
    }

    .betcolor .betBox .bet .btn.player {
        margin-right: 1%;
    }

    .betcolor .betBox .bet .btn.banker {
        margin-right: 1%;
    }

    .betButton {
        margin: 0;
    }

    .betButton button {
        height: 100%;
    }

    #betFrm {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    #betFrm .betForm {
        width: 20%;
    }

    .baccarat .indexBoxW {
        padding: 10px;
    }

    .baccarat .indexBoxW span {
        font-size: 16px;
    }

    .baccarat .betResultTable li {
        padding: 10px;
    }

    .baccarat .betResultTable li span {
        font-size: 16px;
    }

    .baccarat .betResultTable li span.odds {
        font-size: 16px;
    }

    /* .bettingBox .betList .p-2 {flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;}
	.bettingBox .betList .p-2 li {width: 46%;} */
}

/* 기프티콘 */
.cateBox {
    margin: 20px 0;
}

.cateBox ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    gap: 10px;
}

.cateBox ul::-webkit-scrollbar {
    height: 10px;
}

.cateBox ul::-webkit-scrollbar-track {
    background-color: var(--color-gray-light);
}

.cateBox ul::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-border-bottom);
}

.cateBox ul::-webkit-scrollbar-track, .cateBox ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.cateBox ul li {
    padding: 10px 20px;
    display: block;
    box-sizing: border-box;
    background-color: #F2F8F8;
    border-radius: 30px;
    text-align: center;
    white-space: nowrap;
}

.cateBox ul li:hover {
    background-color: #58AFAF;
    color: #FFF;
}

.cateBox ul li:hover button {
    color: #FFF;
}

.cateBox ul li.on {
    background-color: #58AFAF;
}

.cateBox ul li.on button {
    color: var(--color-white);
    font-weight: 600;
}

.cateBox ul li button {
    color: var(--color-gray-black2);
    font-weight: 500;
}

.wrapper.dark-mode .cateBox ul li {
    background-color: var(--color-dark-main);
}

.wrapper.dark-mode .cateBox ul li.on {
    background-color: var(--color-dark-back);
}

.freeGameBox .editBox {
    padding: 20px;
    text-align: right;
}

.freeGameBox .editBox .edit {
    margin-right: 5px;
    position: relative;
    padding: 10px 30px 10px 15px;
    border-radius: 20px;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.freeGameBox .editBox .edit::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 15px;
    height: 15px;
    background: url(/images/etc/edit.png) 0 0 no-repeat;
    background-size: contain;
}

.freeGameBox .cateBox ul li {
    background-color: #F6F0FF;
}

.freeGameBox .cateBox ul li:hover {
    background-color: #9148F7;
}

.freeGameBox .cateBox ul li:hover button {
    color: #FFF;
}

.freeGameBox .cateBox ul li button {
    color: #9148F7;
}

.freeGameBox .cateBox ul li.on {
    background-color: #9148F7;
}

.freeGameBox .cateBox ul li.on button {
    color: var(--color-white);
}

.freeGameBox .listBox ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.freeGameBox .listBox ul li {
    margin-bottom: 30px;
}

.freeGameBox .listBox ul li .box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.freeGameBox .listBox ul li .box .thumbBox img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
}

.freeGameBox .listBox ul li .box .index .subject {
    color: var(--color-gray-text);
    font-weight: 600;
}

.freeGameBox .listBox ul li .box .index .subject:hover {
    color: var(--color-gray-black2);
    font-weight: 600;
}

@media screen and (min-width: 600px) {
    .freeGameBox .listBox ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .freeGameBox .listBox ul li {
        width: 49%;
        margin-right: 2%;
    }

    .freeGameBox .listBox ul li:nth-child(2n) {
        margin-right: 0;
    }
}

@media screen and (min-width: 800px) {
    .freeGameBox .listBox ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .freeGameBox .listBox ul li {
        width: 32%;
        margin-right: 2%;
    }

    .freeGameBox .listBox ul li:nth-child(2n) {
        margin-right: 2%;
    }

    .freeGameBox .listBox ul li:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (min-width: 1000px) {
    .cateBox ul {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .freeGameBox .listBox ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .freeGameBox .listBox ul li {
        width: 23.5%;
        margin-right: 2%;
    }

    .freeGameBox .listBox ul li:nth-child(2n) {
        margin-right: 2%;
    }

    .freeGameBox .listBox ul li:nth-child(3n) {
        margin-right: 2%;
    }

    .freeGameBox .listBox ul li:nth-child(4n) {
        margin-right: 0;
    }
}

/* 출석체크 */
.calendarBox .topBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 20px 0;
}

.calendarBox .topBox h3 {
    padding: 0 10px;
}

.calendarBox .topBox button {
    overflow: hidden;
    text-indent: -9999px;
    line-height: 0;
    padding: 10px;
}

.calendarBox .topBox button#prevMonth {
    position: absolute;
    content: '';
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url(/images/etc/arrow_left.png) 0 0 no-repeat;
    background-size: contain;
}

.calendarBox .topBox button#nextMonth {
    position: absolute;
    content: '';
    top: 35%;
    right: 25%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url(/images/etc/arrow_left.png) 0 0 no-repeat;
    background-size: contain;
    transform: rotate(180deg);
}

.calendarBox .calendar {
    margin-bottom: 20px;
}

.calendarBox .calendar table {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-border);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.calendarBox .calendar table thead {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-border);
}

.calendarBox .calendar table thead tr {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.calendarBox .calendar table thead tr th {
    font-weight: 600;
    color: var(--color-gray-black2);
}

.calendarBox .calendar table tbody {
    width: 100%;
}

.calendarBox .calendar table tbody tr td {
    height: 50px;
    padding: 5px;
}

.calendarBox .calendar table tbody tr td button {
    font-size: 12px;
    color: var(--color-gray-text);
}

.calendarBox .calendar table tbody tr td img {
    width: 100%;
    max-width: 120px;
}

.calendarBox p {
    font-size: 16px;
    color: var(--color-gray-black2);
    font-weight: 600;
    margin-bottom: 10px;
}

.calendarBox .commentBox {
    padding: 10px;
    border: none;
}

.calendarBox .commentBox form {
    background: var(--color-gray-dark);
    padding: 10px;
    color: var(--color-white);
    border-radius: 15px;
}

.calendarBox .commentBox form .commArea input {
    width: 75%;
    height: 60px;
    padding-left: 10px;
    border-radius: 10px;
}

.calendarBox .commentBox form .commArea {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.calendarBox .commentBox form .commArea button {
    width: 20%;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    color: var(--color-white);
    background: var(--color-accent-yellow);
}

.calendarBox .attendanceListBox .index {
    display: none;
}

.calendarBox .attendanceListBox .date {
    padding: 20px 0;
    color: var(--color-gray-text);
    font-weight: 600;
}

.calendarBox .commentBox .noticeBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid var(--color-gray-border-bottom);
    border-radius: 20px;
    padding: 10px;
}

.calendarBox .commentBox .noticeBox img {
    max-width: 50px;
}

.calendarBox .commentBox .noticeBox .notice {
    color: var(--color-gray-border-bottom);
    text-align: left;
    margin-left: 20px;
}

.calendarBox .commentBox .noticeBox .notice span {
    word-break: break-all;
}

.calendarBox .attendanceListBox .index span.nicName {
    width: 25%;
}

.calendarBox .attendanceListBox .index span.comment {
    width: 25%;
}

.calendarBox .attendanceListBox .index span.check {
    width: 10%;
}

.calendarBox .attendanceListBox ul {
    display: flex;
    flex-direction: column;
}

.calendarBox .attendanceListBox ul li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--color-gray-border);
    text-align: center;
    padding: 10px;
}

.calendarBox .attendanceListBox .index {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    background: var(--color-white2);
    text-align: center;
    border-top: 2px solid var(--color-gray-dark);
    padding: 10px;
    color: var(--color-gray-black2);
}

.calendarBox .attendanceListBox .index span {
    font-weight: 600;
}

.calendarBox .attendanceListBox .index span.rate {
    width: 15%;
}

.calendarBox .attendanceListBox .index span.time {
    width: 25%;
}

.calendarBox .attendanceListBox ul li span {
    color: var(--color-gray-text);
}

.calendarBox .attendanceListBox ul li span.rate {
    width: 15%;
}

.calendarBox .attendanceListBox ul li span.time {
    width: 25%;
}

.calendarBox .attendanceListBox ul li span.nicName {
    width: 25%;
}

.calendarBox .attendanceListBox ul li span.comment {
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.calendarBox .attendanceListBox ul li span.check {
    width: 10%;
}

@media screen and (max-width: 400px) {
    .calendarBox .attendanceListBox .index span {
        font-size: 12px;
    }

    .calendarBox .attendanceListBox ul li span {
        font-size: 12px;
    }
}

@media screen and (min-width: 800px) {
    .calendarBox .calendar table thead tr th {
        font-size: 16px;
    }

    .calendarBox .calendar table tbody tr td {
        width: 140px;
    }

    .calendarBox .calendar table tbody tr td button {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .calendarBox .commentBox form .commArea input {
        width: 80%;
        height: 80px;
    }

    .calendarBox .commentBox form .commArea button {
        width: 19%;
        height: 80px;
        font-size: 16px;
    }

    .calendarBox .attendanceListBox ul li.nodata {
        text-align: center;
        color: var(--color-gray-text);
        justify-content: center;
    }

    .calendarBox .commentBox .noticeBox img {
        max-width: 100px;
        padding-left: 10px;
    }

    .calendarBox .commentBox .noticeBox .notice {
        margin-left: 50px;
    }

    .calendarBox .commentBox .noticeBox .notice span {
        font-size: 16px;
    }

    .calendarBox .attendanceListBox .index span {
        font-size: 16px;
    }

    .calendarBox .attendanceListBox ul li span {
        font-size: 16px;
    }

    .calendarBox .attendanceListBox .date {
        font-size: 16px;
    }
}

/* 랭킹박스 */
.rankingBox .rankBox .title {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-radius: 5px;
}

.rankingBox .rankBox ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.rankingBox .rankBox ul li > .box {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin: 5px 0;
}

.rankingBox .rankBox.pointRankBox .num {
    background: var(--color-gray-dark);
    color: var(--color-white);
    width: 25px;
    border-radius: 2px;
}

.rankingBox .rankBox.expRankBox .num {
    background: var(--color-accent-pink);
    color: var(--color-white);
    width: 25px;
    border-radius: 2px;
}

.rankingBox .rankBox.writerRankBox .num {
    background: var(--color-accent-yellow);
    color: var(--color-white);
    width: 25px;
    border-radius: 2px;
}

.rankingBox .rankBox.commentRankBox .num {
    background: #1ED760;
    color: var(--color-white);
    width: 25px;
    border-radius: 2px;
}

.rankingBox .rankBox ul li .box .num {
    text-align: center;
    font-size: 14px;
    margin-right: 30px;
}

.rankingBox .rankBox ul li .box .name {
    display: flex;
    align-items: center;
    color: var(--color-gray-text);
    cursor: pointer;
}

.rankingBox .rankBox ul li .box .point {
    position: absolute;
    right: 0;
    color: var(--color-gray-text);
    font-weight: 600;
}

.rankingBox .rankBox ul li .box .name .level img {
    width: 100%;
    max-width: 25px;
}

.rankingBox .rankBox ul li .box .name .grade img {
    width: 100%;
    max-width: 25px;
    margin-right: 5px;
}

@media screen and (min-width: 1200px) {
    .rankingBox {
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .rankingBox .rankBox {
        width: 23.5%;
        margin-right: 2%;
    }

    .rankingBox .rankBox:last-child {
        margin-right: 0;
    }

    .rankingBox .rankBox .title {
        font-size: 16px;
        text-align: center;
    }

    .rankingBox .rankBox ul li .box .point {
        padding: 5px 0;
    }

    .rankingBox .rankBox ul li .box .num {
        margin-right: 5px;
    }

    .rankingBox .rankBox ul li .box .name {
        padding-right: 10px;
    }

    .rankingBox .rankBox ul li .box .name .level img {
        max-width: 20px;
    }

    .rankingBox .rankBox ul li .box .name .grade img {
        max-width: 20px;
        margin-right: 3px;
    }
}

/* 경험치 내역 */
.infoPopupBox .tabBox .info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
}

.infoPopupBox .tabBox .info span {
    padding: 15px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

.infoPopupBox .tabBox .info span.totalPoint {
    margin-left: 10px;
    color: var(--color-accent-orange);
    background-color: var(--color-white2);
}

.infoPopupBox .tabBox .total {
    padding: 0 15px 15px 15px;
    font-size: 16px;
    color: var(--color-gray-text);
}

.infoPopupBox .contentsBox {
    border-top: 2px solid var(--color-gray-dark);
}

.infoPopupBox .contentsBox ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.infoPopupBox .contentsBox ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-gray-border);
}

.infoPopupBox .contentsBox ul li .copy {
    display: flex;
    padding: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.infoPopupBox .contentsBox ul li .copy .subject {
    width: 100%;
    margin-bottom: 5px;
}

.infoPopupBox .contentsBox ul li .copy .exp {
    width: 50%;
    font-weight: 700;
}

.infoPopupBox .contentsBox ul li .copy .etc {
    width: 50%;
    text-align: right;
    color: var(--color-gray-text);
}

/* 알림팝업 */
.alarmPopup {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    background-color: var(--color-white);
}

.alarmPopup .bell {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.alarmPopup .bell span {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0;
}

.alarmPopup .bell img {
    width: 100%;
    max-width: 80px;
}

.alarmPopup .buttonBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border-top: 1px solid var(--color-gray-border);
}

.alarmPopup .buttonBox button {
    font-size: 16px;
    width: 100%;
}

/* 쪽지함 */
.infoPopupBox {
    max-height: 750px;
}

.mobile .infoPopupBox {
    max-height: 600px;
}

.infoPopupBox .titleBox {
    padding: 15px;
    background-color: var(--color-gray-dark);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.infoPopupBox .titleBox button.close {
    display: flex;
}

.infoPopupBox .titleBox span {
    color: var(--color-white);
    font-weight: bold;
    font-size: 18px;
}

.infoPopupBox .contentsBox .tabBox ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

.infoPopupBox .contentsBox .tabBox ul li {
    width: 33.4%;
    padding: 0;
}

.infoPopupBox .contentsBox .tabBox ul li button {
    display: block;
    box-sizing: border-box;
    padding: 15px;
    background-color: var(--color-inputback-white);
    color: var(--color-gray-text);
    text-align: center;
    width: 100%;
}

.infoPopupBox .contentsBox .tabBox ul li.on button {
    background-color: var(--color-white);
    color: var(--color-black);
    font-weight: bold;
}

.infoPopupBox .contentsBox .tabBox .desc {
    width: 100%;
}

.infoPopupBox .contentsBox .tabBox .desc .top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px 10px;
    background-color: var(--color-gray-dark);
}

.infoPopupBox .contentsBox .tabBox .desc .top span {
    color: var(--color-white);
    margin-left: 10px;
}

.infoPopupBox .contentsBox .tabBox .desc .notice {
    padding: 10px 20px;
    display: block;
    border-bottom: 1px solid var(--color-gray-border);
    color: var(--color-gray-text);
}

.infoPopupBox .contentsBox .tabBox .desc .notice .point {
    color: var(--color-black);
}

.infoPopupBox .contentsBox .tabBox .desc .notice.off {
    display: none;
}

.infoPopupBox .contentsBox .box {
    min-height: 300px;
    position: relative;
}

.infoPopupBox .contentsBox .box .list .note {
    display: none;
    padding-bottom: 80px;
}

.infoPopupBox .contentsBox .box .list .note.open {
    display: block;
}

.infoPopupBox .contentsBox .box .list .note .allClear {
    text-align: right;
    margin-top: 10px;
}

.infoPopupBox .contentsBox .box .list .note .allClear button {
    padding: 10px 15px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-radius: 10px;
    margin-right: 10px;
}

.infoPopupBox .contentsBox .box .list .note dl {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 20px;
}

.infoPopupBox .contentsBox .box .list .note dl dt {
    font-weight: bold;
    position: relative;
    z-index: 10;
    line-height: 45px;
    text-align: center;
    width: 20%;
}

.infoPopupBox .contentsBox .box .list .note dl dd {
    width: 80%;
    padding: 15px 0;
    box-sizing: border-box;
}

.infoPopupBox .contentsBox .box .list .note dl dd input {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.infoPopupBox .contentsBox .box .list .note dl dd textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.infoPopupBox .contentsBox .box .list .note .btnBox {
    text-align: center;
}

.infoPopupBox .contentsBox .box .list .note .btnBox button {
    background-color: var(--color-gray-dark);
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--color-white);
}

.infoPopupBox .contentsBox .box .list .note ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.infoPopupBox .contentsBox .box .list .note ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-gray-border);
}

.infoPopupBox .contentsBox .box .list .note ul li .copy {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy button {
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%
}

.infoPopupBox .contentsBox .box .list .note ul li .copy button.del {
    justify-content: flex-end;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy .state {
    width: 30%;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy .subject {
    width: 70%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy .subject .nic {
    margin-bottom: 10px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    word-break: break-word;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy .subject a {
    color: var(--color-gray-text);
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    word-break: break-word;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy .etc {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.infoPopupBox .contentsBox .box .list .note ul li .copy .etc .date {
    color: var(--color-gray-text);
    font-size: 12px;
    margin-bottom: 10px;
}

.infoPopupBox .contentsBox .box .noteView {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.infoPopupBox .contentsBox .box .noteView .top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--color-inputback-white);
}

.infoPopupBox .contentsBox .box .noteView .note {
    height: 200px;
    padding: 15px;
    overflow: auto;
    word-break: break-all;
}

.infoPopupBox .contentsBox .box .noteView .buttonBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.infoPopupBox .contentsBox .box .noteView .buttonBox button {
    position: relative;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: 5px;
}

.infoPopupBox .contentsBox .box .noteView .buttonBox button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
}

.infoPopupBox .contentsBox .box .noteView .buttonBox button.reply {
    margin-right: 10px;
}

/* .infoPopupBox .contentsBox .box .noteView .buttonBox button.list::after { background: url(/images/etc/boardBox_view.png) 50% 50% no-repeat; background-size: contain;} */
.infoPopupBox .lotteryConfirmBox {
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.infoPopupBox .lotteryConfirmBox button {
    padding: 10px;
    color: var(--color-white);
    border-radius: 10px;
}

.infoPopupBox .lotteryConfirmBox button.normalConfirmAll {
    background-color: var(--color-gray-dark2);
    margin-right: 10px;
    border: 1px solid var(--color-gray-dark2);
    transition: all 0.3s;
}

.infoPopupBox .lotteryConfirmBox button.normalConfirmAll:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-dark2);
    color: var(--color-gray-dark2);
}

.infoPopupBox .lotteryConfirmBox button.highConfirmAll {
    background-color: var(--color-accent-orange);
    border: 1px solid var(--color-accent-orange);
    transition: all 0.3s;
}

.infoPopupBox .lotteryConfirmBox button.highConfirmAll:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-accent-orange);
    color: var(--color-accent-orange);
}

.infoPopupBox .index {
    padding: 10px 5px;
    background-color: #EDF3FE;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.infoPopupBox .index span {
    width: 20%;
    text-align: center;
    color: var(--color-gray-black);
    font-weight: 600;
}

.infoPopupBox .resultBox .list ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.infoPopupBox .resultBox .list ul li {
    padding: 5px;
    width: 100%;
    border-bottom: 1px solid var(--color-gray-border);
}

.infoPopupBox .resultBox .list ul li .box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.infoPopupBox .resultBox .list ul li .box span {
    width: 20%;
    text-align: center;
}

.infoPopupBox .resultBox .list ul li .box span.point {
    color: var(--color-accent-orange);
}

.infoPopupBox .resultBox .list ul li .box span .lotteryConfirm {
    padding: 5px;
    color: var(--color-white);
    background-color: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
    border-radius: 5px;
    transition: all 0.3s;
}

.infoPopupBox .resultBox .list ul li .box span .lotteryConfirm:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-accent-blue);
    color: var(--color-accent-blue);
}

.infoPopupBox .resultBox .list ul li .box span .requestHigh {
    padding: 5px;
    color: var(--color-white);
    background-color: var(--color-accent-orange);
    border-radius: 5px;
    transition: all 0.3s;
}

.infoPopupBox .resultBox .list ul li .box span .requestHigh:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-accent-orange);
    color: var(--color-accent-orange);
}

/* .infoPopupBox .contentBox { padding: 20px; } */
.infoPopupBox .contentBox dl {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.infoPopupBox .contentBox dl dt {
    font-weight: bold;
    position: relative;
    z-index: 10;
    line-height: 45px;
    width: 30%;
    padding: 10px;
    border-bottom: 1px solid var(--color-gray-border);
}

.infoPopupBox .contentBox dl dd {
    width: 70%;
    padding: 10px;
    line-height: 45px;
    box-sizing: border-box;
    text-align: right;
    border-bottom: 1px solid var(--color-gray-border);
}

.layerPopup .paymentBox {
    border-radius: 15px 15px 0 0;
    background-color: var(--color-white);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 400px;
}

.layerPopup .paymentBox .titleBox {
    border-radius: 15px 15px 0 0;
    padding: 15px;
    background-color: var(--color-gray-dark);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.layerPopup .paymentBox .titleBox span {
    color: var(--color-white);
    font-weight: bold;
    font-size: 18px;
}

.layerPopup .paymentBox .payment {
    padding: 20px;
    border: 1px solid var(--color-gray-dark);
}

.layerPopup .paymentBox dl {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.layerPopup .paymentBox dl dt {
    font-weight: bold;
    position: relative;
    z-index: 10;
    line-height: 45px;
    text-align: left;
    width: 20%;
    padding-right: 15px;
}

.layerPopup .paymentBox dl dd {
    width: 80%;
    padding: 15px 0;
    box-sizing: border-box;
}

.layerPopup .paymentBox dl dd input {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.layerPopup .paymentBox .notice {
    padding: 20px;
    color: var(--color-gray-text);
    font-size: 13px;
}

.layerPopup .paymentBox .buttonBox {
    text-align: center;
}

.layerPopup .paymentBox .buttonBox button {
    background-color: var(--color-accent-orange);
    padding: 10px;
    color: var(--color-white);
    border-radius: 10px;
}

/* 댓글 동영상링크 첨부 */
.addpopupBox .titleBox {
    padding: 15px;
    background-color: var(--color-gray-dark);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.addpopupBox .titleBox span {
    color: var(--color-white);
    font-weight: bold;
    font-size: 18px;
    font-weight: 600;
}

.titleBox .close {
    opacity: 1;
}

.addpopupBox .ttl {
    background-color: var(--color-white);
    padding: 15px 15px 0 15px;
    font-size: 16px;
    font-weight: 600;
}

.addpopupBox .inputBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px;
}

.addpopupBox .inputBox input {
    padding: 10px;
    background-color: var(--color-inputback-white);
    border-radius: 15px;
}

.addpopupBox .inputBox button {
    padding: 10px 15px;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    border-radius: 10px;
}

.addpopupBox ul {
    padding: 20px;
}

/* 모바일 네비*/
.footNavi {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;
}

.footNavi .box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px 20px 0 0;
    border: 1px solid #EEEEEE;
    padding: 5px 20px;
    background-color: var(--color-white);
}

.footNavi .box a {
    position: relative;
    width: 18%;
    padding-top: 40px;
    box-sizing: border-box;
}

.footNavi .box a.home {
    width: 28%;
}

.footNavi .box a.home span {
    text-indent: -9999px;
    line-height: 0;
    color: var(--color-gray-text);
}

.footNavi .box a.menu::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-menu.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.phone::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-phone.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.gift::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-gift.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.home::after {
    content: "";
    position: absolute;
    top: -70%;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    padding-top: 70%;
    background: url(/images/etc/foot-m-home.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.home::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: var(--color-gray-dark);
    border-radius: 50%;
}

.footNavi .box a.join::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-join.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.login::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-login.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.casino::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-site.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.freeSlot::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-game.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.chatting::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-chat.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.menu.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-menu-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.phone.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-phone-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.gift.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-gift-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.join.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-join-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.login.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-login-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.casino.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-site-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.freeSlot.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-game-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a.chatting.on::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: url(/images/etc/foot-m-chat-on.png) 0 0 no-repeat;
    background-size: contain;
}

.footNavi .box a span {
    display: block;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    color: var(--color-gray-text);
}

.footNavi .box a.on span {
    color: var(--color-gray-dark);
    font-weight: 500;
}

@media screen and (min-width: 800px) {
    .infoPopupBox .contentsBox .box .list .note {
        padding-bottom: 0px;
    }
}

@media screen and (min-width: 1000px) {
    .footNavi {
        display: none;
    }
}

/* 푸터 */
.footer {
    background: var(--color-gray-dark);
    padding: 20px 0 100px;
    border-top: 1px solid #E5E5E5;
    margin-top: 60px;
}

.footer .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.footer .inner .logo {
    max-width: 200px;
    margin-bottom: 10px;
}

.footer .inner .logo img {
    width: 100%;
}

.footer .inner .box .company {
    transition: all 0.3s;
    margin-bottom: 10px;
    color: var(--color-dark-font);
}

.footer .inner .box .company span:hover {
    color: var(--color-white);
}

.footer .inner .box .company span, .footer .frame .box .contact span {
    display: block;
    font-size: 12px;
    color: var(--color-dark-font);
}

.footer .inner .box .contact {
    margin-bottom: 20px;
    color: var(--color-dark-font);
}

.footer .inner .box .rights {
    font-size: 12px;
    color: var(--color-dark-font);
}

@media screen and (min-width: 800px) {
    .footer .inner .box .company span, .footer .frame .box .contact span {
        font-size: 15px;
    }

    .footer .inner .box .rights {
        font-size: 15px;
    }

    .footer {
        padding: 20px;
    }
}

/* 팝업 */
.layerPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
}

.layerPopup .dimBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    opacity: .5;
    filter: alpha(opacity=50);
}

.layerPopup .frame {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 300px;
    height: auto;
    background-color: var(--color-white);
    z-index: 10;
    overflow: hidden;
    padding: 0;
}

.layerPopup .head {
    background: #017dc7;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 50px;
    min-height: 40px;
}

.layerPopup .head h3 {
    font-size: 16px;
    color: var(--color-white);
    font-weight: 700;
}

.layerPopup .head .btnClose {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    background: url(/images/etc/close.png) 0px 0px no-repeat;
    background-size: contain;
    font-size: 0px;
    line-height: 0;
    text-indent: -9999px;
}

.layerPopup .frame.alarm {
    border-radius: 30px;
    background-color: transparent;
}

.adPopup {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    width: 90%;
    z-index: 8;
}

.adPopup .content p {
    line-height: 0;
}

.adPopup .content p img {
    width: 100%;
}

.adPopup .btnClose {
    display: flex;
    justify-content: space-between;
    background: var(--color-black);
    border-top: 1px solid #555;
}

.adPopup .btnClose .closeDays {
    color: var(--color-gray-text);
    flex: 1;
    border-right: 1px solid #555;
    padding: 10px 0;
    transition: all 0.3s;
}

.adPopup .btnClose .closeDays:hover {
    color: var(--color-white);
}

.adPopup .btnClose .closeDirect {
    color: var(--color-gray-text);
    flex: 1;
    transition: all 0.3s;
}

.adPopup .btnClose .closeDirect:hover {
    color: var(--color-white);
}

.couponBox {
    display: flex;
    padding: 15px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--color-gray-dark);
}

.couponBox .title {
    position: relative;
    width: 100%;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    text-align: center;
    font-size: 18px;
    padding-bottom: 15px;
}

.couponBox .title .close {
    position: absolute;
    right: 3px;
    top: 6px;
    width: 15px;
    height: 15px;
    background: url(/images/etc/close.png) 0px 0px no-repeat;
    background-size: contain;
    font-size: 0px;
    line-height: 0;
    text-indent: -9999px;
}

.couponBox .box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    background: var(--color-white);
    padding: 20px;
}

.couponBox .box span {
    padding: 5px;
    font-weight: bold;
}

.couponBox .box input {
    background-color: var(--color-gray-border);
    border-radius: 20px;
    padding: 10px;
}

.couponBox .buttonBox {
    text-align: center;
    width: 100%;
    background-color: var(--color-white);
    padding-bottom: 20px;
}

.couponBox .buttonBox button {
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 16px;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.couponStorageBox {
    position: relative;
    display: flex;
    padding: 15px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--color-gray-dark);
}

.couponStorageBox .titleBox {
    position: relative;
    width: 100%;
    background-color: var(--color-gray-dark);
    color: var(--color-white);
    text-align: center;
    font-size: 18px;
    padding-bottom: 15px;
}

.couponStorageBox .titleBox span {
    font-size: 18px;
}

.couponStorageBox .titleBox .close {
    position: absolute;
    right: 0px;
    top: 6px;
    width: 15px;
    height: 15px;
    background: url(/images/etc/close.png) 0px 0px no-repeat;
    background-size: contain;
    font-size: 0px;
    line-height: 0;
    text-indent: -9999px;
}

.couponStorageBox > div {
    width: 100%;
    background-color: var(--color-menuback);
}

.couponStorageBox .drawRequest {
    padding: 20px;
}

.couponStorageBox .drawRequest span {
    color: var(--color-accent-yellow);
    background-color: var(--color-gray-dark);
    border-radius: 15px;
    padding: 10px;
    display: inline-block;
}

.couponStorageBox .drawRequest button {
    padding: 10px 15px;
    border-radius: 15px;
    background-color: var(--color-red);
    color: var(--color-white);
    margin-left: 10px;
}

.couponStorageBox .goodsList {
    padding: 0 20px;
}

.couponStorageBox .goodsList .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--color-gray-dark);
}

.couponStorageBox .goodsList .title .boxBtn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.couponStorageBox .goodsList .title span {
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
}

.couponStorageBox .goodsList .title button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--color-menu-text);
    width: 60px;
    padding: 10px;
    text-align: center;
    background-color: var(--color-white);
    margin-left: 10px;
    border-radius: 10px;
    border: 1px solid var(--color-gray-dark);
}

.couponStorageBox .goodsList .title button.lucky {
    padding: 10px;
}

.couponStorageBox .goodsList .title button.on {
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.couponStorageBox .goodsList ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.couponStorageBox .goodsList ul li {
    width: 24%;
    margin-right: 1.3%;
    padding: 10px;
    background-color: #464646;
    border-radius: 15px;
}

.couponStorageBox .goodsList ul li:last-child {
    margin-right: 0;
}

.couponStorageBox .goodsList ul li .box {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.couponStorageBox .goodsList ul li .box .thumbBox img {
    width: 100%;
    border-radius: 15px;
}

.couponStorageBox .goodsList ul li .box .name {
    text-align: center;
    color: var(--color-menu-text);
}

.couponStorageBox .goodsList ul li .box .requestBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.couponStorageBox .goodsList ul li .box .requestBox.use {
    background-color: rgba(0,0,0,0.3)
}

.couponStorageBox .goodsList ul li .box .requestBox span img {
    width: 100%;
}

.couponStorageBox .goodsList ul li .box .requestBox button {
    background-color: var(--color-red);
    color: var(--color-white);
    border: 1px solid var(--color-red);
    padding: 5px 10px;
    border-radius: 10px;
}

.couponStorageBox .goodsList ul li .box .requestBox button:hover {
    background-color: var(--color-white);
    color: var(--color-red);
}

.couponStorageBox .gifticonRequestBox {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
}

.couponStorageBox .gifticonRequestBox .titleBox {
    padding: 15px;
}

.couponStorageBox .gifticonRequestBox .titleBox .closeGifticon {
    display: flex;
    position: absolute;
    top: 20px;
    right: 10px;
    width: 20px;
    height: 20px;
}

.couponStorageBox .gifticonRequestBox .contentsBox {
    padding: 10px;
}

.couponStorageBox .gifticonRequestBox .contentsBox .content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.couponStorageBox .gifticonRequestBox .contentsBox .content .thumbBox {
    max-width: 150px;
}

.couponStorageBox .gifticonRequestBox .contentsBox .content img {
    width: 100%;
}

.couponStorageBox .gifticonRequestBox .contentsBox .content .name {
    font-weight: bold;
    margin-bottom: 10px;
}

.couponStorageBox .gifticonRequestBox .contentsBox dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    border-top: 1px solid var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray-dark);
}

.couponStorageBox .gifticonRequestBox .contentsBox dl dt {
    width: 40%;
}

.couponStorageBox .gifticonRequestBox .contentsBox dl dd {
    width: 60%;
    margin-bottom: 10px;
}

.couponStorageBox .gifticonRequestBox .contentsBox dl dd input {
    width: 100%;
    border: 1px solid var(--color-gray-border-bottom);
}

.couponStorageBox .gifticonRequestBox .contentsBox .buttonBox {
    text-align: center;
    margin-top: 10px;
}

.couponStorageBox .gifticonRequestBox .contentsBox .buttonBox button {
    padding: 5px 10px;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
    border-radius: 10px;
}

.layerPopup.roullette .frame {
    background: transparent;
}

.layerPopup.roullette .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layerPopup.roullette .content .rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    line-height: 0;
    width: 25%;
    height: 25%;
    background: url(/images/game/start_button_on.png) 0 0 no-repeat;
    background-size: contain;
}

.layerPopup.roullette .content .closeBox {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 5%;
    height: 5%;
}

.layerPopup.roullette .content .closeBox button {
    width: 100%;
    height: 100%;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    line-height: 0;
    background: url(/images/etc/close.png) 0 0 no-repeat;
    background-size: contain;
}

.layerPopup.roullette .rouletteImg {
    background: radial-gradient(circle, #333, #000);
    border: 8px solid #554800;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(85, 72, 0, 0.8);
    display: block;
    margin: 20px auto;
    transition: 3s;
    pointer-events: none;
    width: 100%;
    height: auto;
}

.layerPopup.roullette .content {
    position: relative;
}

.layerPopup.roullette .content::before {
    content: "";
    position: absolute;
    width: 15%;
    height: 20%;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: url(/images/game/point.png) 0 0 no-repeat;
    background-size: contain;
}

/* 투표팝업 */
/* .votePopup { position: absolute; top: 100px; left: 100px;  background: white; max-width: 400px; width: 100%; border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; } */
.votePopup {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    width: 90%;
    z-index: 8;
    background: #F5F6F7;
    border-radius: 10px;
}

.votePopup .head {
    border-radius: 10px 10px 0 0 ;
    background: var(--color-gray-dark);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 50px;
    min-height: 40px;
}

.votePopup .head .title {
    font-size: 18px;
    color: var(--color-white);
}

.votePopup .head .btnClose {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: url(/images/etc/close.png) 50% 50% no-repeat;
    background-size: contain;
    font-size: 0px;
    line-height: 0;
    text-indent: -9999px;
}

.votePopup .content {
    margin: 20px;
    background-color: var(--color-white);
}

.votePopup .content .notice {
    border-top: 2px solid var(--color-gray-border);
    border-bottom: 2px solid var(--color-gray-border);
    color: var(--color-black);
    padding: 10px;
    text-align: center;
}

.votePopup .content .box {
    padding: 20px;
}

.votePopup .content .box .title {
    font-weight: bold;
    font-size: 20px;
}

.votePopup .content .box .list li {
    padding: 10px 0;
}

.votePopup .content .box .count {
    color: #7F3DBF;
}

.votePopup .content .btnBox button {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--color-white2);
    border: 1px solid var(--color-white2);
    color: var(--color-gray-text);
    margin-bottom: 10px;
    transition: all 0.3s;
}

.votePopup .content .btnBox.on button:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-dark);
    color: var(--color-gray-dark);
}

.votePopup .content .btnBox.on button {
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}