@charset "utf-8";

/****************************************************************************************************************************************
레이어 팝업 공통
*****************************************************************************************************************************************/
#layerPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 9999; width: 100%; height: 100%;}
.layer-bg {position:relative; padding:30px 0; width:100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background:rgba(0,0,0,0.7);}

.layer-wrap {position: relative; margin:0; padding:0; width: auto; max-width: 996px; max-height: 80vh; display: inline-flex; flex-direction: column; 
    background: #001854; border-radius: 10px; overflow: hidden; 
    animation: popup_style 0.4s ease;
}

@keyframes popup_style {
	0% {transform: translateY(-500%);}			
	100% {transform: translateY(0%);}		
}

.layer-con {position: relative; display: flex; flex-direction: column; min-height: 0;}
.layer-close {position: absolute; top:15px; right:15px; z-index: 9; margin:0; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: #000e32; border: 1px #fff solid; border-radius: 5px;cursor: pointer;}
.layer-close > i, .layer-close > svg {font-size:28px; font-weight: 400; color:#fff;}

.popup-wrap {padding: 15px 25px; min-height: 0; border-radius: 0 0 5px 5px; overflow-y: auto;}
.popup-tit {position: relative; margin:10px auto 20px auto; padding:0; width: 100%; text-align: center; font-size: 20px; font-weight: 600;}

@media (hover: hover) and (pointer: fine) {
    .layer-close:hover {border: 1px #3f91fd solid;}
    .layer-close:hover > i, .layer-close:hover > svg {color: #3f91fd;}
} 

/****************************************************************************************************************************************
공지 팝업
*****************************************************************************************************************************************/
.notice-popup {display:none; position:fixed; inset:0; z-index:9999; padding:30px 15px; background:rgba(0,0,0,0.65); overflow-y:auto;}
.notice-popup.active {display:flex; justify-content:center; align-items:center;}
.notice-popup-inner {position:relative; width:500px; max-width:calc(100vw - 30px); max-height:calc(100dvh - 60px); display:flex; flex-direction:column; background:#001854; border:1px solid rgba(255,255,255,0.25); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.45); overflow:hidden;}
.notice-popup-close {position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; display:flex; justify-content:center; align-items:center; color:#fff; background:rgba(0,14,50,0.9); border:1px solid rgba(255,255,255,0.55); border-radius:5px; cursor:pointer;}
.notice-popup-close > i, .notice-popup-close > svg {font-size:20px;}
.notice-popup-swiper {width:100%; min-width:0; flex:0 1 auto; overflow:hidden;}
.notice-popup-slide {padding:0;}
.notice-popup-title {margin:0; padding:18px 55px 18px 20px; text-align:left; font-size:18px; font-weight:600; color:#fff; background:#0c2973; border-bottom:1px solid rgba(255,255,255,0.18);}
.notice-popup-body {padding:20px; min-height:240px; max-height:calc(100dvh - 160px); overflow-y:auto;}
.notice-popup-image {margin-bottom:15px; text-align:center;}
.notice-popup-image img {max-width:100%; height:auto; border-radius:8px;}
.notice-popup-content {text-align:left; font-size:14px; line-height:1.7; color:#fff; word-break:break-word; white-space:pre-wrap;}
.notice-popup-pagination {padding:10px 0; text-align:center; background:#001854;}
.notice-popup-pagination .swiper-pagination-bullet {width:8px; height:8px; margin:0 4px; background:rgba(255,255,255,0.45); opacity:1;}
.notice-popup-pagination .swiper-pagination-bullet-active {background:#80b3ff;}
.notice-popup-footer {display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; background:#000e32; border-top:1px solid rgba(255,255,255,0.18);}
.notice-popup-check {display:flex; align-items:center; gap:6px; min-width:0; text-align:left; font-size:13px; color:#fff; cursor:pointer;}
.notice-popup-check input[type="checkbox"] {flex:0 0 auto; width:16px; height:16px; accent-color:#80b3ff; cursor:pointer;}
.notice-popup-close-btn {flex:0 0 auto; padding:7px 20px; font-size:13px; font-weight:600; color:#fff; background:#0c2973; border-radius:5px; cursor:pointer;}

.row-popup-container {display:none; position:fixed; inset:0; z-index:9999; padding:60px 30px; pointer-events:none;}
.row-popup-container.active {display:flex; justify-content:center; align-items:center; gap:16px;}
.row-popup-card {flex:1 1 0; min-width:0; max-width:340px; max-height:calc(100dvh - 120px); display:flex; flex-direction:column; color:#fff; background:#001854; border:1px solid rgba(255,255,255,0.25); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.45); overflow:hidden; pointer-events:auto;}
.row-popup-card-header {display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; background:#0c2973; border-bottom:1px solid rgba(255,255,255,0.18);}
.row-popup-card-title {margin:0; flex:1; min-width:0; text-align:left; font-size:15px; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.row-popup-card-close {flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; line-height:1; background:rgba(0,14,50,0.8); border-radius:50%; cursor:pointer;}
.row-popup-card-body {flex:1 1 auto; min-height:0; padding:16px; overflow-y:auto;}
.row-popup-card-image {margin-bottom:12px; text-align:center;}
.row-popup-card-image img {max-width:100%; height:auto; border-radius:6px;}
.row-popup-card-content {text-align:left; font-size:13px; line-height:1.6; color:#fff; word-break:break-word; white-space:pre-wrap;}
.row-popup-card-footer {padding:10px 16px; background:#000e32; border-top:1px solid rgba(255,255,255,0.18);}
.row-popup-card-dontshow {display:flex; align-items:center; gap:6px; text-align:left; font-size:12px; color:#fff; cursor:pointer;}
.row-popup-card-dontshow input[type="checkbox"] {width:14px; height:14px; accent-color:#80b3ff; cursor:pointer;}

@media (hover: hover) and (pointer: fine) {
    .notice-popup-close:hover,
    .notice-popup-close-btn:hover,
    .row-popup-card-close:hover {filter:brightness(1.15);}
}

@media (max-width:1279px) {
    .row-popup-container {display:none !important;}
}

@media (max-width:600px) {
    .notice-popup {padding:15px 10px;}
    .notice-popup.active {align-items:center;}
    .notice-popup-inner {width:100%; max-width:100%; max-height:calc(100dvh - 30px);}
    .notice-popup-body {max-height:calc(85dvh - 120px); padding:15px;}
    .notice-popup-footer {padding:10px 15px;}
    .notice-popup-check {font-size:12px;}
}

/****************************************************************************************************************************************
intro-wrap
*****************************************************************************************************************************************/
.intro-wrap {position: relative; margin:0 auto; padding:30px 30px; min-width: 450px; width: auto; overflow-y: auto;}
.intro-wrap > h3 {margin:0 auto; padding:20px 0; width: 100%; text-align: center; font-size: 28px; font-weight: 600;}

.input-group {position: relative; margin: 20px auto; padding: 0 10px; width: 100%; height: 46px; display: flex; justify-content: flex-start; align-items: center; gap:10px; background: #001854; border: 2px #fff solid; border-radius: 8px;}
.input-group > i, .input-group > svg {font-size: 20px;}
.input-group:focus-within {transition: 0.2s; border: 1px solid #ff3333;}
.input-group:focus-within > i, .input-group:focus-within > svg {color: #ff3333;}

.input-group > input {position: relative; width: 100%; height: calc(100% - 2px); font-size: 16px; color:#fff; background: none; border: none; caret-color: #ff3333;}
.input-group > input:focus {outline: none;}
.input-group > input::placeholder {color:#fcfcfd;}

.input-group > select {position: relative; padding: 0 10px; width: 100%; height: 46px; line-height: 46px; font-size: 16px; color:#fff; background: none; border: none; caret-color: #ff3333;}
.input-group > select:invalid {color:#fcfcfd;}
.input-group > select:focus {outline: none;}
.input-group > select > option {color:#000;}

/* login-btns */
.login-btns {position: relative; margin:0 auto; padding:0; width: 100%;}
.login-btns > button {position: relative; margin:5px auto; padding:0; width:100%; height: 42px; font-size: 16px; border-radius: 8px;}

@media (hover: hover) and (pointer: fine) {
    .login-btns > button:hover {filter: brightness(0.9);}
}

/****************************************************************************************************************************************
즐겨찾기시작
*****************************************************************************************************************************************/
ul.popup-tab {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
ul.popup-tab > li {display: block; margin: 0; padding: 5px 15px; font-size: 16px; font-weight:600; color:#fff; background: #001854; border: 1px #fff solid; border-radius: 5px; cursor: pointer;}
ul.popup-tab > li.active {color:#000; background: #fff;}

/* tab-con */
.popup-tabcon {display: none; position: relative; margin:20px auto; padding:0; width: 100%;}
.popup-tabcon.active {display: block;}

ul.popupgame-list {position: relative; margin:0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
ul.popupgame-list > li {position: relative; margin:0; padding:0; width: calc(100% / 4 - 10px); border-radius: 5px; overflow: hidden; cursor: pointer;}
ul.popupgame-list > li > p {position: absolute; bottom: 0; left:0; right:0; z-index: 2; margin:0 auto; padding:5px 8px; width:100%; text-align: left; color:#fff; background: rgba(0, 0, 0, 0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ul.popupgame-list > li > img {width: 100%;}
ul.popupgame-list > li.active > .game-neme > button > i.normal, ul.popupgame-list > li.active > .game-neme > button > svg.normal {display: none;}
ul.popupgame-list > li.active > .game-neme > button i.active, ul.popupgame-list > li.active > .game-neme > button svg.active {display: block;}

@media (hover: hover) and (pointer: fine) {
    ul.popupgame-list > li:hover .btn-hover {display: block;}
}

/****************************************************************************************************************************************
이벤트 및 프로모션 시작
*****************************************************************************************************************************************/
ul.event-list {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: flex-start; gap: 15px;}
ul.event-list > li {position: relative; margin:0; padding:0; width: calc(100% / 4 - 15px); background: #0c2973; cursor: pointer;}
.event-txt {position: relative; margin:0 auto; padding:15px 15px; width: 100%; text-align: left;}
.event-txt > h3 {margin:0 auto; padding:0; width: 100%; height: 40px; line-height: 20px; font-size: 18px; font-weight: 600;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.event-txt > p {margin:20px auto; padding:0; width: 100%; height: 56px; line-height: 18px; font-size: 16px; 
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.event-txt > a {display:block; margin:0 auto; padding:5px 0; width: 100%; font-size: 14px;}

/* view */
.border-hd {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content:flex-start; align-items: center;}
.btn-borderback {position: relative; margin:0; padding:8px 15px; display: flex; justify-content: flex-start; align-items: center; gap:10px; background: #2e4273; border-radius: 5px; cursor: pointer;}
.btn-borderback > i,
.btn-borderback > svg,
.btn-borderback > span {font-size: 16px;}

.view-con {position: relative; margin:20px 0; padding:20px 20px; width: 100%; background: #00113b;}
.view-con > h3 {position: relative; margin:20px auto; padding:0 20px; width: 100%; text-align: center; font-size: 26px; font-weight: 600;}
.view-con > img {width: 350px;}

.article-wrap {position: relative; margin:40px 0; padding:0; width: 100%; display: flex; justify-content: center; gap:20px;}
.left-article,
.right-article {position: relative; width: calc(100% / 2 - 20px); text-align: left;}
.article-txt {width: 100%; text-align: left;}
.article-txt > h3 {margin-bottom:15px; font-size: 26px; font-weight: 600;}
.article-txt > p {margin:0 auto; line-height: 2; text-align: left; font-size: 16px;}
.article-txt > p.list-style {display: list-item; list-style: disc; margin-left: 20px;}
.article-txt > ul {position: relative; margin:20px 0; padding:0; width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.article-txt > ul > li:nth-child(odd) {text-align: left;}
.article-txt > ul > li:nth-child(even) {text-align: right;}
.article-txt > ul > li {padding:5px 0; width:calc(100% / 2); font-size: 16px;}
.article-txt > button {margin:0 auto; padding:10px 0; width: 100%; text-align: center; font-size: 16px; color:#fff; background: #808080; border-radius: 5px; cursor: default;}

@media (hover: hover) and (pointer: fine) {
    .event-txt > a:hover,
    .btn-borderback:hover {filter: brightness(0.9);}
}

/****************************************************************************************************************************************
.contact-list 시작
*****************************************************************************************************************************************/
ul.contact-list {position: relative; margin:30px 0; padding:0 15px; width: 100%; min-width: 430px;}
ul.contact-list > li {position: relative; margin:20px 0; padding: 10px 0 10px 20px; width: 100%; display: flex; justify-content: flex-start; align-items: center; background: #0c2973; border-radius: 8px; cursor: pointer;}
ul.contact-list > li::before {content: ''; position: absolute; left:0; top:50%; transform:translateY(-50%); width: 3px; height: 55%; background: rgba(255,255,255,0.3); border-radius: 0 20px 20px 0;}
ul.contact-list > li > img {margin-right:10px; width: 45px;}
.contact-txt {margin:0; padding:0; text-align: left;}
.contact-txt > h3 {font-size: 18px; font-weight: 600;}
.contact-txt > p {font-size: 16px;}

/****************************************************************************************************************************************
내계정 시작
*****************************************************************************************************************************************/
/* 공통 */
.popup-con {position: relative; margin:0; padding:0; width: 100%; min-width: 996px; min-height: 0; display: flex; overflow-y: auto; overflow-x: hidden;}
.popup-left {position: relative; margin:0 auto; padding:0; min-width: 260px; min-height: 600px;}
.popup-right {position: relative; margin:0 auto; padding:0 30px 30px 30px; min-width: 736px; height: 100%;}
.popupsub-tit {margin: 0 auto; padding:20px 0; width: 100%; text-align: center; font-size: 18px; font-weight: 600; color:#fff;}

.btns-wrap {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px}
.btns-wrap > button {margin:0; padding:8px 20px; min-width:100px; border-radius: 5px;}

/* popup-menu */
ul.popup-menu {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
ul.popup-menu > li {position: relative; margin:0 0 5px 0; padding:15px 25px; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:10px; cursor: pointer;}
ul.popup-menu > li::before {content: ''; display: none; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); z-index: 1; width: 0; height: 0; 
    border-bottom: 30px solid transparent;   
    border-left: 30px solid #0c2973; 
    border-top: 30px solid transparent;
}
ul.popup-menu > li > img {width: 50px;}
ul.popup-menu > li > span {margin:0 auto; width: calc(100% - 60px); font-size: 16px; font-weight: 600; text-align: left;}
ul.popup-menu > li.active {background: #0c2973;}
ul.popup-menu > li.active::before {display: block;}

/* 내계정 */
.detail {position: relative; margin:20px auto; padding:15px 15px; width: 100%; background: rgba(0,0,0,0.4); border-radius: 8px;}
.border {border: 2px #fff solid;}
.detail-rank {position: absolute; top:-45px; right: 0; left:0; z-index: 1; margin:0 auto; text-align: center;}
.detail-rank > img {width: 100px;}

.red-box {position:relative; margin:15px auto; padding:10px 10px; text-align: center; font-size: 15px; color:#fff; background: #661e3f; border:1px #c92b43 solid; border-radius: 8px;}
.detail > p {margin:20px auto; padding:0; width: 100%; text-align: left; font-size: 16px;}

ul.detail-list {position: relative; margin: 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
ul.detail-list > li {position: relative; margin: 0 auto; padding:5px 5px; width: calc(100% / 2); display: flex; gap:5px;}
ul.detail-list > li:nth-child(odd) {text-align: left; justify-content: flex-start;}
ul.detail-list > li:nth-child(even) {text-align: right; justify-content: flex-end;}
ul.detail-list > li > img {width: 24px;}

dl.detailinfo-txt {position: relative; margin: 0; padding:0; width: 100%;}
dl.detailinfo-txt > dt {margin:0 auto 10px auto; padding:0; width: 100%; text-align: left; font-size: 18px; font-weight: 600;}
dl.detailinfo-txt > dd {display: list-item; list-style: decimal; margin-left: 20px; padding:5px 0;}

.issues-link {margin:0 auto; padding:0; width: 100%; text-align: center;}

/* 비밀번호 변경 */
.password-wrap {position: relative; margin:20px auto; padding:15px 30px; width: 100%; text-align: center;}
.input-box {position: relative; margin:0 auto 20px auto; padding:0; width: 100%; text-align: center;}
.input-box > label {display:block; margin:0 auto 10px auto; padding:0; width: 100%; text-align: left;}
.input-box > input {margin:0 auto; padding:10px 15px; width: 100%; color:#fff; background: rgba(0,0,0,0.4); border: 1px #fff solid; border-radius: 8px;}
.input-box > P {margin:5px auto; padding:0; width: 100%; text-align: left; font-size: 12px;}
.btn-password {margin:10px auto; padding:8px 20px; font-size: 15px; border-radius: 5px;}
.btn-next {margin:10px auto; padding:8px 20px; width: 100%; font-size: 15px; border-radius: 5px;}

/* 입출금 */
ul.money-tab {position: relative; margin:0 0 20px 0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
ul.money-tab > li {margin: 0; padding: 15px 0; width: calc(100% / 3); display: flex; justify-content: center; align-items: center; gap:5px; font-size: 16px; font-weight:600; color:#fff; background: #001854; border-bottom: 2px transparent solid; cursor: pointer;}
ul.money-tab > li > img {height: 16px;}
ul.money-tab > li.active {border-bottom: 2px #fff solid;}

.money-con {display: none; position: relative; margin:10px auto; padding:0; width: 100%;}
.money-con.active {display: flex; gap:15px;}
.record-con {position: relative; margin:0; padding: 0; width: 100%; display: block; background: rgba(0,0,0,0.6);}

/* 기록 */
ul.cashier-tab {position: relative; margin:0 0 20px 0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
ul.cashier-tab > li {margin: 0; padding: 15px 40px; font-size: 14px; font-weight:600; color:#fff; border-bottom: 2px transparent solid; cursor: pointer;}
ul.cashier-tab > li.active {border-bottom: 2px #fff solid;}

.table-con {display: none; position: relative; margin:10px auto; padding:0; width: 100%;}
.table-con.active {display: block;}

.tb-cashier {position: relative; margin:0 0 20px 0; padding:0; width: 100%; text-align: center;}
.tb-cashier > thead > tr {border-bottom: 1px solid #1f2e53;}
.tb-cashier > tbody > tr {border-bottom: 1px solid #1f2e53;}
.tb-cashier th,
.tb-cashier td {padding:10px 15px; text-align: center; font-weight: 600; color:#fff;}
.btn-success {padding:3px 10px; font-size: 12px; background: #018323; border-radius: 25px;}

.deposit-item {position: relative; margin:10px auto; padding:15px 15px; width: calc(100% / 2 - 15px); display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.4); border-radius: 8px; cursor: pointer;}
.deposit-item > img {margin-right:15px; width: 55px;}

.deposit-txt {position: relative; flex: 1;}
.deposit-txt > h3 {margin-bottom:5px; font-size: 16px; font-weight: 600;}
.deposit-txt > p {font-size: 12px;}

.credit-box {position: relative; margin:20px auto; padding:15px 15px; width: 100%; background: rgba(0,0,0,0.4); border-radius: 8px;}
.credit-box > p {margin: 0 auto 10px auto; padding:0; width: 100%; text-align: center; font-size: 14px;}
.credit {margin: 0 auto; padding:0; width: 100%; text-align: center; font-size: 40px; font-weight: 900;}

/* money-info */
.popup-hd {position: relative; margin:0; padding:0; width: 100%;}
.btn-popupback {position: relative; margin:0; padding:8px 15px; cursor: pointer;}
.btn-popupback > i, .btn-popupback > svg {font-size: 20px;}

/* qrcode */
.qrcode-wrap {position: relative; margin:20px auto; padding:40px 40px; background:#2f2f2f; border:30px #fff solid; border-radius: 10px;}
.qr-logo {margin:20px auto; width: 100%; text-align: center;}
.qr-logo > img {width: 170px;}
.qrcode-wrap > .blue-txt {margin:20px auto; width:100%; text-align: center; color: #74C3ED;}
.qrcode-img {margin:30px auto; padding-bottom:40px; text-align:center; border-bottom: 1px #fff solid;}
.qrcode-img > img {width: 300px;}
.qrcode-wrap > h3 {margin:0 auto 10px auto; width: 100%; text-align: center; font-size: 30px; font-weight: 600;}
.qrcode-wrap > p {margin:0 auto; width: 100%; text-align: center; font-size: 16px; font-weight: 600;}

@media (hover: hover) and (pointer: fine) {
    ul.popup-menu > li:hover {background: #0c2973;}
    .deposit-item:hover {background: #0c2973;}
    .tb-cashier > tbody > tr:hover {background: #616161;}
    .tb-cashier > tbody > tr.non-data:hover {background: unset !important;}
}
/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1030px) {
    .layer-bg {padding:0;}
    .layer-fullWrap {position: relative; margin:0; padding:0; width: 100%; height: 100%; max-width: unset; max-height: unset; display: inline-flex; flex-direction: column; 
        background: #001854; border-radius: 10px; overflow: hidden; 
        animation: popup_style 0.4s ease;
    }

    .layer-con,
    .popup-con {min-width: unset; min-height: unset; width: 100%; height: 100%;}
    .popup-left {padding:0; min-width: unset; min-height: unset; width:80px; height: 100%;}
    .popup-right {min-width: unset; width: calc(100% - 80px);}

    ul.popup-menu > li {margin:0 auto; padding:15px 5px; flex-direction: column; justify-content: center;}
    ul.popup-menu > li > img {width: 30px;}
    ul.popup-menu > li > span {width: 100%; text-align: center; font-size: 13px; letter-spacing: -1px;}

    .money-con.active {flex-direction: column; align-items: center;}
    .deposit-item {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:960px) {
    .popup-wrap {padding:15px 10px;}
    
    /* 이벤트 리스트 */
    ul.event-list {gap:10px; flex-wrap: wrap;}
    ul.event-list > li {width: calc(100% / 2 - 10px);}

    /* 이벤트 뷰 */
    .article-wrap {flex-wrap: wrap;}
    .left-article, 
    .right-article {width:100%}

    /* 출납원 */
    ul.cashier-tab > li {padding: 15px 10px;}
    .table-con {overflow-x: auto;}    
    .tb-cashier {width: 820px;}

    /* 즐겨찾기 */
    ul.popup-tab > li {font-size: 14px;}

    ul.popupgame-list {justify-content: center;}
    ul.popupgame-list > li {width: calc(100% / 2 - 10px);}
}/* 미디어쿼리문 끝 */

@media (max-width:639px) {
    .layer-wrap {width: 95%;}
    .layer-close {top:10px; right: 10px; width: 30px; height: 30px;}
    .layer-close > i, .layer-close > svg {font-size: 24px;}

    .intro-wrap {width: 100%;}
    
    .popup-left {width:60px;}
    .popup-right {padding: 0 10px 10px 10px; width: calc(100% - 60px);}
    ul.popup-menu > li::before {
        right: -8px;
        border-bottom: 10px solid transparent;   
        border-left: 10px solid #0c2973; 
        border-top: 10px solid transparent;
    }

    /* border-hd */
    .border-hd {margin:10px 0 0 0;}
    .btn-borderback {gap:5px;}
    .btn-borderback > span {font-size: 14px;}

    /* 출납원 */
    .deposit-item > img {margin-right: 5px; width: 40px;}
    .deposit-txt > h3 {font-size: 14px;}

    ul.money-tab > li {font-size: 13px;}

    .credit-box {margin:0 auto;}

    /* 이벤트 리스트 */
    ul.event-list > li {width:100%;}

    /* 이벤트 뷰 */
    .view-con > h3 {margin:5px auto 20px auto; font-size: 20px;}
    .article-txt > h3 {font-size: 20px;}
    .article-txt > p,
    .article-txt > ul > li,
    .article-txt > button {font-size: 14px;}

    /* 고객센터 */
    ul.contact-list {min-width: 100%;}
    ul.contact-list > li {padding:10px 20px;}

    /* 비밀번호 변경 */
    .password-wrap {padding:15px 15px;}
}/* 미디어쿼리문 끝 */

@media (max-width:480px) {
    .intro-wrap {padding: 30px 20px 40px 20px; min-width: 100%;}
}/* 미디어쿼리문 끝 */