@charset "utf-8";

/****************************************************************************************************************************************
page-tit
*****************************************************************************************************************************************/
.page-tit {position: relative; margin:0 auto; padding:0; width: 100%;}
.page-bg {position: relative; margin:0; padding:35px 0 0 20px; width: 100%; height: 150px; display: flex; flex-direction: column; justify-content: center; background: url('/assets/v7/Img/ko/Board/page-bg.png') center no-repeat; background-size: cover;}
.page-bg > h3 {margin:0; padding:0; line-height: 1; text-align: center; font-size: 42px; font-weight: 600; color:#00ff88;}
.page-bg > p {margin:0; padding:0; text-align: center; font-size: 17px; color:#ac4500;}

/* page-nav */
ul.page-nav {position:relative; margin:0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; background: #070808;}
ul.page-nav > li {position:relative; margin:0 auto; padding:10px 5px; width: 100%; text-align: center; font-weight: 600; color: #8b8b8b; cursor: pointer;}
ul.page-nav > li:nth-child(odd) {background: #1e252c;}
ul.page-nav > li:nth-child(2n) {background: #222a33;}
ul.page-nav > li.pc-hid {display: none;}
ul.page-nav > li > a {display: block; width: 100%; height: 100%;}
ul.page-nav > li.active {color: #fff; text-shadow: 0 0 0 #00ff88, 0 0 10px #00ff88, 0 0 30px #00ff88; background: #0c0e17;}

ul.page-nav::-webkit-scrollbar {width: 3px; height: 3px; border-radius: 3px;}
ul.page-nav::-webkit-scrollbar-track {background-color: #000; border-radius: 3px;}
ul.page-nav::-webkit-scrollbar-thumb {border-radius: 3px; background-color: #6a7178;}
ul.page-nav::-webkit-scrollbar-button {width: 0; height: 0;} 

@media (hover: hover) and (pointer: fine) {
    ul.page-nav > li:hover,
    ul.page-nav > li:hover.active {color: #fff; text-shadow: 0 0 0 #00ff88, 0 0 10px #00ff88, 0 0 30px #00ff88; background: #0c0e17;}
}

/****************************************************************************************************************************************
bo-wrap 공통
*****************************************************************************************************************************************/
.bo-wrap {position: relative; margin:0 auto; padding:40px 0; width: 100%; display: flex; justify-content: center; background: #1a1c24;}
.bo-con {position: relative; margin:40px auto; padding:0; width: 100%;}
.bo-inner {position: relative; margin:0 auto; padding:20px 15px; width: 1200px; text-align: center;}

.left-bo,
.right-bo {padding:0 15px; width: calc(100% / 2);} 

.left-event {width: 500px;} 
.right-evebt {width: calc(100% - 500px);} 


/****************************************************************************************************************************************
충환전 포인트전환
*****************************************************************************************************************************************/
/* 레이어 머니타이틀 */
ul.money-tit {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; color: #fff; background: #1b222c; border-radius: 10px 10px 0 0;}
ul.money-tit > li {margin:0 auto; padding:10px 0; width: calc(100% / 2); text-align: center; font-weight: 500; color: #8b8b8b; border: 1px solid #394558; cursor: pointer;}
ul.money-tit > li.active {color:#fff; background: #00ff88; border: 1px solid #00ff88;}

/* 충환전 */
ul.money-guide {position: relative; margin-bottom: 20px; padding:0; width: 100%;}
ul.money-guide > li {position: relative; margin:0 0 10px 0; padding: 30px 40px; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; background: #000; border-radius: 20px; box-shadow: inset 0 0 25px #00ff88; cursor: pointer;}
.guide-tit {position: relative; display: flex; gap:10px; justify-content: center; align-items: center; font-size: 15px; font-weight: 600;}
.guide-con {position: relative;  gap:10px; flex: 1; justify-content: space-between; align-items: center; padding:0 0 0 20px;}
.guide-con > p {line-height: 1.8;}
.btn-guide {padding: 10px 20px; font-weight: 600; background: #00ff88; border: 1px #ff8f44 solid; border-radius: 10px;}

@media (hover: hover) and (pointer: fine) {
    .btn-guide:hover {background: #c25207;}
}
/* bo-tab */
ul.bo-tab {position: relative; margin-bottom: 20px; padding:0; width: 100%; display: flex; gap: 30px; justify-content: space-between; align-items: center; background: #000; border-radius: 200px;}
ul.bo-tab > li {padding: 20px 0 20px 40px; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; background: #000; border-radius: 200px; box-shadow: inset 0 0 38px #000; cursor: pointer;}
ul.bo-tab > li > .amount-txt {font-size:20px; font-weight: 700; color: #fff;}
ul.bo-tab > li > .amount-txt > p {font-size:20px; font-weight: 700; color: #fe913e;}
ul.bo-tab > li.active {background: #1b222c;}

ul.mo-bo-tab {display: none;}

/* deposit-txt */
.deposit-txt {margin-bottom: 10px; font-size: 20px;font-weight: 600; color: #ffc400;}

/* writeType-tb */
.writeType-tb {width: 100%;}
.writeType-tb th,
.writeType-tb td {position: relative; padding:10px 15px; background: #1b222c; border-bottom: 3px #1a1c24 solid; border-radius: 5px;}
.writeType-tb th {width:170px; text-align: left; font-weight: 600; color: #acb5c1;}
.writeType-tb td > input {position: relative; padding:10px 10px; width: 100%; font-weight: 500; color: #ec9e63; background: #0b0e18; border: none;}
.writeType-tb td > .deposit-btn {position: absolute; right: -15px; top: 50%; transform: translate(-50%, -50%); padding:3px 0; width: 70px; font-size:12px; color:#fff; background: #1b222c; border: 1px solid #0d121b; border-radius: 4px;}
.writeType-tb td > select {position: relative; padding:10px 10px; width: 100%; font-weight: 500; color: #ec9e63; background: #0b0e18; border: none;}
.writeType-tb td > input:focus,
.writeType-tb td > select:focus {outline: none;}
.writeType-tb td > .right-txt {margin:0 auto; padding:10px 10px; width: 100%; text-align: right; font-size: 16px; font-weight: 600; color: #fe913e;}

/* money-info */
ul.money-info {position: relative; margin:10px 0; padding:0; width:100%; display: flex; gap:5px; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
ul.money-info > li {margin:0; padding:7px 10px; width: calc(100% / 2 - 5px); display: flex; justify-content: space-between; align-items: center; background: #0b0e18;}
ul.money-info > li > span {color: #fe913e;}
ul.money-info > li > span.con-txt {color:#fff;}

ul.money-box {position: relative; margin:10px 0; padding:0; width: 100%; display: flex; gap:10px; justify-content: center; align-items: center;}
ul.money-box > li {margin:0; padding:18px 5px; width: 100%; text-align: center; font-size: 15px; font-weight: 600; color: #fff; background: #2b3646; border-radius: 5px; cursor: pointer;}

.money-go {position: relative; z-index: 11; padding: 10px 15px;  width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; background: #00ffaa; border-radius: 8px; box-shadow: 0 0 10px #00ff88, 0 0 15px #00ff88, 0 0 20px #00ff88, inset 0 0 10px #00ff88; transition: all 0.2s; overflow: hidden; cursor: pointer;}
.money-go::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 20%;
    background: conic-gradient(#fff 200deg, transparent 200deg);
    box-shadow: inset 0 0 1px #fff;
    animation: rotate 5s linear infinite;
}
.money-go > span {position: absolute; width: 100%; height: 35px; display: flex; justify-content: center; align-items: center; font-size: 15px; color: #fff; background: #00cc6d; border-radius: 8px; box-shadow: inset 0 0 10px #00ff88, inset 0 0 15px #00ff88;}

.layerMoney-go {position: relative; margin:0; padding:20px 0; width: 100%; text-align: center; font-size: 18px; font-weight: 600; color:#fff; background: #1b222c; border: 1px solid #394558;}

/* casino-coupon */
.casino-coupon {position: relative; margin:5px 5px; padding:10px 15px; width: calc(100% - 10px); display: flex; justify-content: space-between; align-items: center; background: #1b222c; border-bottom: 3px #1a1c24 solid; border-radius: 5px;}
.casino-coupon > .coupon-txt {font-weight: 600; color: #acb5c1;}

.layer-coupon {position: relative; margin:5px 5px; padding:2px 10px; width: calc(100% - 10px); display: flex; justify-content: space-between; align-items: center; background: #0b0e18;}
.label-txt {font-size:16px; font-weight: 600; color: #acb5c1;}

select.coupon-choice {appearance:none; margin:5px 0; padding:6px 10px; width: 200px; text-align: left; font-size: 13px; font-weight: 600; background: #1b222a; border: 1px solid #454462;}
select.coupon-choice:invalid {color:#fff;}
select.coupon-choice:focus {outline: none;}

ul.layerMoney-info {position: relative; margin:0 5px; padding:0; width: calc(100% - 10px);}
ul.layerMoney-info > li {margin:5px 0; padding:7px 10px; display: flex; justify-content: space-between; align-items: center; background: #0b0e18;}
ul.layerMoney-info > li > .krw-txt {font-size: 18px; font-weight: 600; color: #00ff88;}
ul.layerMoney-box {position: relative; margin:0; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
ul.layerMoney-box > li {margin:0 auto; padding:8px 0; width:calc(100% / 4); text-align: center; font-size: 15px; font-weight: 600; color: #8d8d8d; background: #1b222c; border: 1px solid #394558; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.money-tit > li:hover  {color:#fff;}
    ul.money-tit > li:hover.active,
    ul.layerMoney-box > li:hover,
    .layerMoney-go:hover {color: #fff; background: #00cc6d; border: 1px solid #00ff88;}

    .writeType-tb td > .deposit-btn:hover {background: rgba(0, 255, 136, .149); border-color: #00ff88;}
    ul.money-box > li:hover {color:#fff; background: #00ff88;}

    .money-go:hover {background: #fff;}
    .money-go:hover::before {background: conic-gradient(transparent 10deg, transparent 200deg);}
    .money-go:hover > span {font-weight: bold; background: #00cc6d; box-shadow: inset 0 0 10px #fff; transition: all .2s;}
}

/* right-money */
.listType-tb {width: 100%;}
.listType-tb th,
.listType-tb td {padding:8px 5px; text-align: center; border: 1px solid #474747;}
.listType-tb th {font-size: 13px; color:#ccc; background: linear-gradient(180deg, #1d232c, #0e1116)}
.listType-tb td {font-size: 12px; color: #c7c7c7; cursor: pointer;}
.listType-tb td > img {width: 20px;}

/* total-list */
ul.total-list {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:15px; justify-content: center; align-items: center;}
ul.total-list > li {position: relative; width: calc(100% / 3); height: 80px; display: flex; gap:5px; flex-direction: column; justify-content: center; align-items: center; background: #0b0e18; border: 1px solid #6d747b; box-shadow: inset 0 0 10px #4b5156; border-radius: 5px;}
ul.total-list > li > h3 {color:#fff;}
ul.total-list > li > p {font-size: 18px; font-weight: 600; color: #fe913e;}

/* momeyList-tit */
.momeyList-tit {position: relative; margin:10px 0; padding:15px 15px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #0b0e18; border: 1px solid #6d747b; box-shadow: inset 0 0 10px #4b5156; border-radius: 5px;}
.momeyList-tit > span {color:#fff;}
.momeyList-tit > button {margin:0; padding:7px 15px; display:flex; gap:5px; justify-content: center; align-items: center; font-size: 12px; font-weight: 500; color:#fff; background: #1d222b; border:1px #1d222b solid; border-radius: 5px;}
.momeyList-tit > button > img {width: 20px;}

/* 테이블 내용이 없을때 */
.none-momeyList {position: relative; margin:0; padding:0; width: 100%; height:530px; background: #1b222c;}
.none-momeyList > p {width:100%; height:100%; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #fff;}

.Layer-noneList {position: relative; margin:0; padding:0; width: 100%; height: calc(100% - 70px);}
.Layer-noneList > p {width:100%; height:100%; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #fff;}

/* right-btns */
.right-btns {position: relative; margin:20px auto; padding:0 5px; width: 100%; display: flex; justify-content: flex-end;}
.right-btns > button {margin:0; padding:7px 15px; display:flex; gap:5px; justify-content: center; align-items: center; font-size: 12px; font-weight: 500; color:#fff; background: #00ff88; border: 1px solid #00ff88; border-radius: 5px;}
.right-btns > button > img {width: 20px;}

.cen-btns {position: relative; margin:30px auto; padding:0; width: 100%; gap:10px; display: flex; justify-content:center; align-items: center;}
.btn-go {margin:0; padding:10px 25px; min-width:120px; font-size: 16px; font-weight: 500; color:#fff; background: #00ff88; border: 1px solid #00ff88; border-radius: 5px;}
.btn-ok {margin:0; padding:10px 25px; min-width:120px; font-size: 16px; font-weight: 500; color:#fff; background: #00ff88; border: 1px solid #00ffaa; border-radius: 5px;}
.btn-read {margin:0; padding:5px 15px; font-size: 13px; font-weight: 500; color:#fff; background: #00ff88; border: 1px solid #00ff88; border-radius: 5px;}

@media (hover: hover) and (pointer: fine) {
    .listType-tb tbody tr:hover {background: #293442;} 
    .right-btns > button:hover,
    .btn-go:hover,
    .btn-ok:hover {color:#000;}
    .btn-read:hover {color:#000; background: #ff944d;}

    .momeyList-tit > button:hover {border:1px #00ff88 solid;}
    
}

/****************************************************************************************************************************************
고객센터
*****************************************************************************************************************************************/
/* 고객센터 리스트 */
.tb-list {position: relative; margin: 0; padding:0; width: 100%;}
.tb-list > thead > tr {background: #0b0e18; border: 1px solid #6d747b; box-shadow: inset 0 0 15px #76787a;}
.tb-list > tbody > tr {background: #1a1c24; border-bottom: 1px solid #474747;}
.tb-list > tbody > tr:nth-child(even) {background: #1b222c;}

.tb-list th {margin:0 auto; padding:0 5px; height: 50px; text-align: center;}
.tb-list td {margin:0 auto; padding:0 5px; height: 45px; text-align: center;}
.left-txt {text-align: left !important; cursor: pointer;}
.left-txt2 {text-align: left !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.left-txt2 > a {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.txt-done {color: #7c7c7c;}

/* tb-moneyList */
.tb-moneyList > tbody > tr {background: #22242f;}

@media (hover: hover) and (pointer: fine) {
    .tb-list > tbody > tr:hover {background: #0b0e18; box-shadow: inset 0 0 10px #4b5156;}
    .tb-list td.left-txt:hover {text-decoration: underline;}
}

/* 고객센터 뷰 */
dl.tb-view {position: relative; margin:0 auto; padding:0; width: 100%;}
dl.tb-view > dt {position: relative; margin:0 auto; padding:0 20px; width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; background: #0b0e18; border: 1px solid #6d747b; box-shadow: inset 0 0 10px #4b5156;}
dl.tb-view > dt > span {font-size: 15px;}
dl.tb-view > dd {margin:0 auto; padding:15px 15px; width: 100%; text-align: left;  background: #1a1c24; border-bottom: 1px solid #474747;}

dl.manager-answer {position: relative; margin:40px auto 0 auto; padding:0; width: 100%;}
dl.manager-answer > dt {position: relative; margin:0 auto; padding:0 20px; width: 100%; height: 50px; display: flex; justify-content:flex-start; align-items: center; background: #18120b; border: 1px solid #00ff88; box-shadow: inset 0 0 10px #f59b5e;}
dl.manager-answer > dt > span {padding:0 15px 0 0; text-align: left; font-size: 15px;}
dl.manager-answer > dd {margin:0 auto; padding:15px 15px; width: 100%; text-align: left; background: #18120b; border-bottom: 1px solid #00ff88;}


/* 고객센터 글쓰기 */
.tb-write {width: 100%;}
.tb-write th,
.tb-write td {position: relative; margin:0; padding:10px 15px; text-align: left; background: #1b222c; border-bottom: 3px #1a1c24 solid; border-radius: 5px;}
.tb-write th {width:170px; font-weight: 600; color: #acb5c1; border-right: 3px #1a1c24 solid;}
.tb-write td > input {position: relative; padding:10px 10px; width: 100%; font-weight: 500; color: #fff; background: #0b0e18; border: none;}
.tb-write td > textarea {position: relative; padding:10px 10px; width: 100%; height: 200px; font-weight: 500; color: #fff; background: #0b0e18; border: none;}
.tb-write td > input:focus,
.tb-write td > textarea:focus {outline: none;}
.tb-write td > p {margin-top:5px; color: #00ff88;}

/****************************************************************************************************************************************
출석부
*****************************************************************************************************************************************/
.claender-tit {position:relative; margin:0 auto; padding:0; width: 100%; text-align: center; font-size: 42px; color: #545454; font-family: "Red Hat Display", 'serif';}
.claender-tit > span {margin-left:10px; font-size: 42px; font-weight: 600; color: #f77c16; font-family: "Red Hat Display", 'serif';}
.claender-info {position:relative; margin:5px auto 30px auto; padding:0; width: 100%; text-align: center; font-size: 16px; font-weight: 500; color:#e7e7e8;}

.claender-box {position:relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:10px; justify-content: center; align-items: center;}

.this-month {width: 290px; line-height: 50px; font-size: 15px; font-weight: 500; color: #f77c16; background: #11141d; border: 1px solid #313742; border-radius: 15px;}
.btn-eventGo {position: relative; z-index: 11; padding: 10px 15px; width: 195px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; background: #00ffaa; border-radius: 8px; box-shadow: 0 0 10px #00ff88, 0 0 15px #00ff88, 0 0 20px #00ff88, inset 0 0 10px #00ff88; transition: all 0.2s; overflow: hidden; cursor: pointer;}
.btn-eventGo::before {content: ""; position: absolute; width: 150%; height: 20%; background: conic-gradient(#fff 200deg, transparent 200deg); box-shadow: inset 0 0 1px #fff; animation: rotate 5s linear infinite;}
.btn-eventGo > span {position: absolute; width: 190px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 15px; color: #fff; background: #00cc6d; border-radius: 8px; box-shadow: inset 0 0 10px #00ff88, inset 0 0 15px #00ff88;}

@media (hover: hover) and (pointer: fine) {
    .btn-eventGo:hover {background: #fff;}
    .btn-eventGo:hover::before {background: conic-gradient(transparent 10deg, transparent 200deg);}
    .btn-eventGo:hover > span {font-weight: bold; background: #00cc6d; box-shadow: inset 0 0 10px #fff; transition: all .2s;}
}

.calendar-tb {position: relative; margin:40px auto 0 auto; padding:0; width: 100%; border-top:1px #313742 solid;}
.calendar-tb tr {border-bottom:1px #313742 solid;}
.calendar-tb th,
.calendar-tb td {position: relative; margin:0 auto; padding:20px 20px; width: 14.28%; height: 100px; text-align: center; font-weight: 600; font-family: "Red Hat Display", 'serif';}
.calendar-tb th {font-size: 24px;}
.calendar-tb td {font-size: 30px;}
.calendar-tb td.past-day {color:#6d6e74;}


/****************************************************************************************************************************************
쿠폰
*****************************************************************************************************************************************/
.coupon-tit {position: relative; margin:0 auto; padding:0; width: 100%; text-align: left;}
.coupon-wrap {position: relative; margin:40px auto 0 auto; padding:0; width: 100%;}
.event-done {position: relative; margin: 0 auto; padding:50px 0; text-align: center; font-size: 26px;}

ul.coupon-list {position:relative; margin:0 auto; padding:0; width: 100%; display:flex; gap:20px; justify-content: center; flex-wrap: wrap;}
ul.coupon-list > li {position:relative; margin:0 auto; padding:0 20px; width: calc(100% / 4 - 20px); height: 160px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background: #00ff88; border-radius: 20px; cursor: pointer;}
ul.coupon-list > li::before, 
ul.coupon-list > li::after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
    transform: scale3d(0, 0, 1);
    transition: transform 0.3s ease-out 0s;
    background: rgba(13, 13, 13, 0.3);
}
ul.coupon-list > li::before {transform-origin: left top;}
ul.coupon-list > li::after {transform-origin: right bottom;}

ul.coupon-list > li > .coupon-name {margin:0 auto; width: 100%; text-align:left; font-size: 16px; font-weight: 600; color:#00ff88;}
ul.coupon-list > li > .coupon-amount {margin:0 auto 10px auto; width: 100%; text-align:center; font-size:32px; font-weight: 600; color:#fff; font-family: "Red Hat Display", 'serif';}
ul.coupon-list > li > .coupon-period {margin:0 auto; width: 100%; text-align:center; font-weight: 600; color:#00ff88;}

.coupon-use {opacity: 0; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 9; margin:0 auto; padding:10px 20px; font-size: 16px; font-weight: 600; color:#00ff88; background:#fff; border:none; border-radius: 5px; cursor: pointer;}
ul.coupon-list > li.active {opacity: 1;}

@media (hover: hover) and (pointer: fine) {
    ul.coupon-list > li:hover::before, 
    ul.coupon-list > li:hover::after{transform: scale3d(1, 1, 1);}
    ul.coupon-list > li:hover .coupon-use {opacity: 1; transition: all 0.2s ease-in-out;}
}

/****************************************************************************************************************************************
이벤트 및 공지사항
*****************************************************************************************************************************************/
.event-wrap {position: relative; margin: 0; padding:0; width: 100%; display: flex; gap:20px; justify-content: center;}
/* event-left */
.event-left {position:relative; margin:0; padding:0; width: 500px; height: calc(var(--vh, 1vh) * 100 - 80px); background:#090b13; border: 1px solid #353535; border-left:none; border-bottom:none;}
.event-left > h3 {position: relative; margin:0 auto; padding:20px 15px; width: 100%; text-align: center; font-size: 30px; font-family: "Red Hat Display", 'serif'; border-bottom: 1px solid #353535;}

ul.event-menu {position:relative; margin:0; padding:0; width: 100%; height:calc(100% - 81px); overflow-y: auto;}
ul.event-menu > li {position:relative; margin:0; padding:0 15px 0 50px; width: 100%; line-height: 60px; text-align: left; font-size: 15px; font-weight: 500; color: #aaa; border-bottom: 1px solid #353535; cursor: pointer;}
ul.event-menu > li.active {color: #fff; background: #de5900; border-bottom: 1px solid #ff9147;}

@media (hover: hover) and (pointer: fine) {
    ul.event-menu > li:hover {background: #1f2327;}
    ul.event-menu > li.active:hover {color: #fff; background: #de5900; border-bottom: 1px solid #ff9147; filter: unset;}

}

/* event-right */
.event-right {position:relative; margin:0; padding:0; width: calc(100% - 500px); height: calc(var(--vh, 1vh) * 100 - 80px);}
.event-view {position: relative; margin:0; padding:0; width: 100%; height: 100%;}
.event-view > h3 {position: relative; margin:0 auto; padding:0 20px; width: 100%; line-height: 55px; text-align: left; font-size: 25px; color: #fff; text-shadow: 0 0 0 #00ff88, 0 0 10px #00ff88, 0 0 30px #00ff88; background: linear-gradient(97deg, #1b222c, rgba(14, 19, 27, 0) 35%); border-left: 5px solid #00ff88; border-top: 1px solid #353535;}
.event-con {position: relative; margin:0; padding:40px 20px; width: 100%; height: calc(100% - 56px); text-align: center; background:#090b13; border-left: 1px solid #353535;overflow-y: auto;}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1230px) {
    /* 고객센터 */
    .bo-inner {padding:20px 5px; width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 800px) { 
    .page-bg {padding:35px 0 0 0; height: 100px;}
    .page-bg > h3 {font-size: 24px;}
    .page-bg > p {display: none;}

    ul.page-nav {padding: 5px 0; justify-content: flex-start;}
    ul.page-nav > li {padding:15px 10px;}
    ul.page-nav > li.active {background: linear-gradient(#000 30%, #2c1203); box-shadow: inset 0 -2px #00ff88;}

    .bo-con {margin:0 auto;}
    .bo-wrap {padding:0; flex-direction: column;}

    /* 입출금 신청 */
    .left-bo, 
    .right-bo {padding:0; width: 100%;}
    .right-bo {margin:20px 0; padding:0 5px;}

    /* money-guide */
    ul.money-guide {margin-top:10px;}
    ul.money-guide > li {margin:0 0 5px 0; padding:0; flex-direction: column; background: #242732; border:1px #434343 solid; box-shadow: none; border-radius: 0;}
    .guide-tit,
    .guide-con {margin:0 auto; width: 100%; flex: unset;}
    .guide-tit {padding:8px 10px; text-align: center; background: #462b02;}
    .guide-tit > img {display: none;}
    .guide-con {padding:10px 10px; flex-direction: column; justify-content: flex-start; align-items: unset;}
    .guide-con > p {margin:0 auto; width: 100%; text-align: left;}
    .btn-guide {margin:0 auto; padding:5px 0; width: 150px; font-size: 13px;}

    /* bo-tab */
    ul.bo-tab {display: none;}

    ul.mo-bo-tab {display: flex; justify-content: flex-start; align-items: center; position:relative; margin:0; padding:0; width: 100%; background: #070808;}
    ul.mo-bo-tab > li {position:relative; margin:0 auto; padding: 15px 10px; width: 100%; text-align: center; font-weight: 600; color: #8b8b8b; cursor: pointer;}
    ul.mo-bo-tab > li.active {color: #fff; text-shadow: 0 0 3px #00ffaa, 0 0 10px #00cc6d, 0 0 15px #00ff88;background: linear-gradient(#000 30%, #20032c); box-shadow: inset 0 -2px #00ff88;}

    .deposit-txt {margin:10px 0; padding:0 5px; font-size: 15px;}

    ul.total-list {gap:5px;}
    ul.total-list > li > h3 {font-size: 13px;}

    .tb-moneyList th,
    .tb-moneyList td {font-size: 12px;}
    input[type=checkbox] {width:14px !important; height:14px !important;}

    .writeType-tb th {width: 20%; font-size: 13px;}
    .writeType-tb th, 
    .writeType-tb td {padding:5px 5px;}
    .writeType-tb td {background: #232a33;}
    .writeType-tb td > input {width: 99%;}

    ul.money-info {flex-direction: column; align-items: flex-start;}
    ul.money-info > li {width: 100%; background: transparent;}

    ul.money-box {flex-wrap: wrap; gap:0;}
    ul.money-box > li {padding:10px 5px; width: calc(100% / 3); font-size: 14px; background: #1b222c; border-color: #364156 #13171e #13171e #364156; border-style: solid; border-width: 1px;}
    ul.money-box > li:last-child {width: 100%; background: #1d242d; border-bottom: 1px #364156 solid;}

    .money-go {margin:5px 5px; width: calc(100% - 10px);}
    .money-go > span {width: calc(100% - 5px);}

    .none-momeyList {height: auto;}

    /* 이벤트 및 공지사항 */
    .event-wrap {flex-direction: column; gap: 10px;}
    .event-left,
    .event-right {width: 100%; height: auto;}

    .event-left > h3 {display: none;}
    ul.event-menu {display: flex;}
    ul.event-menu > li {margin:0 auto; padding:0 10px; line-height: 45px; text-align: center; font-weight: 500; letter-spacing: -1px;}

    .event-view > h3 {padding:0 10px; font-size: 14px; line-height: 45px;}
    .event-con {padding: 20px 15px;}
   
    /* 고객센터 */
    .customerTb th:nth-child(1),
    .customerTb td:nth-child(1) {width: 15%;}
    .customerTb th:nth-child(2),
    .customerTb td:nth-child(2) {width: 70%;}
    .customerTb th:nth-child(3),
    .customerTb td:nth-child(3) {width: 15%;}
    .customerTb th:nth-child(3),
    .customerTb td:nth-child(3) {display: none;}

    .tb-list th {font-size: 12px;}
    .tb-list td {font-size: 13px;}    

    dl.tb-view > dt,
    dl.manager-answer > dt {padding:0 10px;}
    dl.tb-view > dt > span,
    dl.manager-answer > dt > span {font-size: 13px;}

    .tb-write th {width: 20%; font-size: 13px;}
    .tb-write th, 
    .tb-write td {padding:5px 5px;}
    .tb-write td > p {padding:5px 5px; font-size: 11px;}

    /* 쪽지함 */
    .messageTb th:nth-child(1),
    .messageTb td:nth-child(1) {width: 13%;}
    .messageTb th:nth-child(2),
    .messageTb td:nth-child(2) {width: 60%;}
    .messageTb th:nth-child(3),
    .messageTb td:nth-child(3) {width: 14%;}
    .messageTb th:nth-child(4),
    .messageTb td:nth-child(4) {display: none;}
    .messageTb th:nth-child(5),
    .messageTb td:nth-child(5) {width: 13%;}
    
    .btn-read {padding:2px 5px; font-size: 12px;}

    /* 쿠폰 */
    ul.coupon-list {gap:10px}
    ul.coupon-list > li {width: calc(100% / 2 - 10px);}

    /* 출석부 */
    .claender-tit {color:#fff; font-size: 20px;}
    .claender-tit > span {font-size: 20px;}
    .claender-info {margin:20px 0; font-size: 13px;}

    .btn-eventGo {display: none;}
    .this-month {width: 90%; line-height: 35px; border-radius: 5px;}

    .calendar-tb {margin: 20px auto 0 auto;}
    .calendar-tb th, 
    .calendar-tb td {padding:5px 5px; height: 40px; color: #eee;}
    .calendar-tb th {font-size: 12px;}
    .calendar-tb td {font-size: 13px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 600px) {
    /* 쿠폰 */
    .coupon-tit > img {width: 90px;}
    ul.coupon-list > li {width: 100%;}
}/* 미디어쿼리문 끝 */


/* checked day (출석 완료) */
.calendar-tb td.checked {
    color: #fff;
    background: #0b0e18;
    box-shadow: inset 0 0 10px #00ff88;
    position: relative;
}
.calendar-tb td.checked::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff88;
}