@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: #D9BA82;
  --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:not(.subscribe),.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 {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; } 
.modeBtn {  position: absolute; top: 10px;  left: 10px; display: flex; flex-direction: column; justify-content: flex-start;  align-items: center; flex-wrap: nowrap; }
.modeBtn .modeName {  color: var(--color-white); }
.modeBtn .modeChange { line-height: 0; text-indent: -9999px; overflow: hidden; width: 20px; height: 20px; background: url(/images/etc/darkMode.png) 0 0 no-repeat; background-size: contain;}
.modeBtn.dark-mode .modeChange { background: url(/images/etc/ligthMode.png) 0 0 no-repeat; background-size: contain;}
.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 { position: relative; }
.wrapper .leftMenu .navBox ul li.gnb > button:not(.subscribe),.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 .subscribe { position: absolute; width: 20px; height: 20px; top: 50%; right: 20px; transform: translateY(-50%); z-index: 1;}
.wrapper .leftMenu .navBox ul li.gnb .subscribe img { width: 100%; }
.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 .leftMenu .navBox ul li.gnb > a.gallery::before { content:""; position: absolute; top: 50%; left: 10px; width: 25px; height: 25px; transform: translateY(-50%); background: url(/images/etc/menu-icon-gal.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 .leftMenu .navBox ul li.gnb > a.gallery::before { content:""; position: absolute; top: 50%; left: 10px; width: 25px; height: 25px; transform: translateY(-50%); background: url(/images/etc/menu-icon-gal-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 .leftMenu .navBoxside ul li.gnb > a.gallery::before { content:""; position: absolute; top: 50%; left: 10px; width: 25px; height: 25px; transform: translateY(-50%); background: url(/images/etc/menu-icon-gal.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.dark-mode .leftMenu .navBoxside ul li.gnb > a.gallery::before { content:""; position: absolute; top: 50%; left: 10px; width: 25px; height: 25px; transform: translateY(-50%); background: url(/images/etc/menu-icon-gal-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/community/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/community/minus_box1.svg") 50% 50% no-repeat; background-size: revert;  }
.board_box.sports .tabBox .sportsFilter .onoffBtn.close { background: url("/images/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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 2.1%; }
	.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 .sub .subscribeDate { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;} 
.boardBox.view .subscribe { margin-left: 10px; }
.boardBox.view .subscribe button{ display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center; color: var(--color-white); position: relative; padding: 10px; background-color: var(--color-accent-yellow); border-radius: 5px; transition: all 0.2s ease;}
.boardBox.view .subscribe button.subOn { background-color: var(--color-dark-backon); }
.boardBox.view .subscribe button img { width: 20px; margin-right: 5px;}
.boardBox.view .subscribe button:hover {
  background-color: var(--color-dark-backon);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/setting.png) 0 0 no-repeat; background-size: contain; margin-right: 10px; }
.boardBox.list .editBox .settingBox .search { margin-right: 5px; 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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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/community/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{ 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: 10%; 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;}
}

/* 갤러리 */
.gallery .galleryBox { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1%;}
.gallery .board_box { margin-bottom: 20px; width: 100%; border: 1px solid var(--color-gray-dark); border-radius: 20px;}
.gallery .board_box .tabBoxG { background-color: var(--color-gray-dark); border-radius: 19px 19px 0 0;}
.gallery .board_box .tabBoxG ul {  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; justify-content: center;}
.gallery .board_box .tabBoxG ul li { width: 100%; display: flex; position:relative; cursor: pointer; text-align: center; box-sizing: border-box; padding: 0 10px;}
.gallery .board_box .tabBoxG ul li:not(:last-child)::after { content:"|"; position: absolute; top: 50%; transform: translateY(-50%); right: 0px; color: var(--color-gray-text); }
.gallery .board_box .tabBoxG ul li.on span{ padding-left: 30px; width: calc(100% - 30px); color: var(--color-accent-yellow); line-height: 40px; font-weight: 500; font-size: 15px; }
.gallery .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;}
.gallery .board_box .tabBoxG ul li .plus-btn { width: 30px; height: 40px; position: relative; font-size: 16px; cursor: pointer; border-radius: 5px; text-indent: -9999px;}

.gallery .board_box .tabBoxG ul li .plus-btn::before,
.gallery .board_box .tabBoxG ul li .plus-btn::after {
  content: '';
  position: absolute;
  background-color: var(--color-accent-yellow);
  width: 12px;
  height: 2px;
  left: 10px;
  top: 50%;
}

.gallery .board_box .tabBoxG ul li .plus-btn::after {
  transform: translateY(-50%) rotate(90deg);
}
/* 가로 막대 */
.gallery .board_box .tabBoxG ul li .plus-btn::before {
  transform: translateY(-50%) rotate(0deg);
}
.galleryBox .board_box .index { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; margin: 10px; background-color: #F1F7FD; padding: 10px 0; border-radius: 10px;}
.galleryBox .board_box .index .txt { width: 85%; text-align: center; padding-left: 10px; padding-right: 20px;}
.galleryBox .board_box .index .date { width: 15%; text-align: center;}
.galleryBox .board_box .listBox .list { width: 100%; box-sizing: border-box;  border-bottom: 1px solid var(--color-dark-font); padding-bottom: 10px;}
.galleryBox .board_box .listBox .list .link { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 3px; }
.galleryBox .board_box .listBox .list .link .txt {position:relative; padding-left: 10px; padding-right: 20px; width: 85%; overflow: hidden; color:  var(--color-gray-dark2); font-size: 13px; letter-spacing: -1px; text-overflow: ellipsis; white-space: nowrap;}
.galleryBox .board_box .listBox .list .link .txt .count { position: absolute; top: 50%; transform: translateY(-50%); right: 3px; color: var(--color-accent-pink); }
.galleryBox .board_box .listBox .list .link .date { width: 15%; font-size: 13px; text-align: center; color: var(--color-gray-black);}
.wrapper.dark-mode .galleryBox .board_box .listBox .list .link .txt { color: var(--color-dark-font); } 
.wrapper.dark-mode .galleryBox .board_box .listBox .list .link .date { color: var(--color-dark-font); } 
.wrapper.dark-mode .galleryBox .board_box .index { background-color: var(--color-dark-main); }
@media screen and (min-width : 1000px) {
	.gallery .board_box { margin-bottom: 20px; width: 49%;}
}

/* 게시판 이벤트 */
/* .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/community/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); }