/* =============== header =============== */
.header {position: relative; width: 100%;}
.header .container {display: flex; justify-content: space-between; align-items: flex-start; width: 1400px;}
.logo {width: 300px;}
.logo img {width: 100%;}
.nav {_position: absolute; top: 0; left: 50%; _transform: translateX(-50%); _width: 692px;}
.top_info_box {position: absolute; top: -20%; right: 0; display: flex; justify-content: space-between;}
.info_flex{display: flex; align-items: center;}
.user_box{display: flex; align-items: center; gap: 6px; margin-left: 43px;}
.user_info {display: flex; align-items: center; gap: 14px;}
.user_info p {display: flex; align-items: center; gap: 5px; font-size: 18px; cursor: pointer;}
.user_info p img {width: 26px;}
.grade {display: flex; align-items: center; gap: 6px; border: 1px solid rgba(148,140,140,.5);
    padding: 4px 10px 4px 5px; border-radius: 4px;}
.grade span {font-size: 14px; color: #FFEFAD;}
.grade img {width: 20px; height: 20px;}
.message p {display: flex; align-items: center; gap: 5px; font-size: 14px; margin-top: 6px; cursor: pointer;}

.money_list {display: flex; align-items: center; gap: 43px;}
.money_box {display: flex; gap: 6px; align-items: center;}
.money_box span {font-size: 14px; color: #999; cursor: pointer;}
.money_box p {font-size: 15px; font-weight: 500; color: #FFF4A0; margin-top: 6px; cursor: pointer;}
.gnb {gap: 14px; display: flex; align-items: center; justify-content: center;margin-top: 22px;}
.gnb li {position: relative;}
.gnb li:last-child {border-right: none;}
.gnb li a {font-size: 18px; padding: 17px 56px;}
.gnb li a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3058823529), rgba(255, 255, 255, 0.4196078431), rgba(0, 0, 0, 0.3058823529), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-size: 1000% 100%;
    animation: gradient 4s infinite;
}
.logout_box {position: relative; display: flex; align-items: center; gap: 8px; margin-top: 20px; z-index: 3;}
.logout_box button {position: relative; padding:17px 56px;  font-size: 18px; border: 1px solid #F4DB85; z-index: 1; font-weight: 500;}
.logout_box button span{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3058823529), rgba(255, 255, 255, 0.4196078431), rgba(0, 0, 0, 0.3058823529), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-size: 1000% 100%;
    animation: gradient 4s infinite;
}
.inquiry_btn{color: #000;}
.inquiry_btn::before {content: ''; position: absolute; left: 0; top: 0; display: block;
    width: 100%; height: 100%; background: #FFEFAD; z-index: -2;}
.logout_box button::after {content: ''; position: absolute; left: 0; top: 0; display: block;
    width: 0; height: 100%; background: #200303; z-index: -1; transition: 0.5s;}
.logout_box button:hover::after {width: 100%;}
.inquiry_btn:hover {color: #FFEFAD;}
.logout_btn {border: 1px solid #F4DB85; color: #ffeec1f5;}
.mb_gnb_btn {display: none;}

/* =============== footer =============== */
.footer {width: 100%; padding-top: 60px;}
.bt_logo {width: 264px; margin: 0 auto 60px;}
.bt_logo img {width: 100%;}
.bt_game_list {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.bt_game_list {padding: 5px 0;}
.bt_game_list li {font-size: 14px; color: rgba(255,255,255,.3); padding: 0 16px; border-right: 1px solid #726450;}
.bt_game_list li:nth-child(6n) {border-right: none;}
.bt_logo_list {border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 40px; padding-bottom: 80px;}
.bt_logo_list img {width: 1400px; margin: 0 auto;}
.bt_logo_list img.mb {display: none;}
/* .bt_game_list li::after {content: ''; width: 1px; height: 12px; display: block; background: #726450;} */


/* =============== popup =============== */
html.hidden {overflow: hidden;}
body.hidden {height: auto; overflow: hidden;}
.popup {display: none;}
.popup.on {display: block;}
.popup_blank {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(1,1,1,0.8); z-index: 1000;}
.popup_inner {position: fixed; top: 50%; left: 50%; width: 560px; height: 600px; max-height: 90vh; border-radius: 6px;
    transform: translate(-50%, -50%); z-index: 1100; overflow-y: auto; border: 1px solid #FFEFAD;}
.popup_inner.on {display: block;}
.popup_inner h3 {font-size: 28px; padding-bottom: 20px; border-bottom: 4px solid #93c120; margin-bottom: 18px;}
.popup_inner p {font-size: 18px; color: #7b7b7b;}
.close_btn {position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; cursor: pointer;}
.close_btn img {width: 100%; height: 100%; object-fit: contain;}
.or_btn {position: relative; background: #FFEFAD !important; color: #000 !important; z-index: 1; transition: 0.5s; font-weight: 500;}
.or_btn:hover{color: #fff !important;}
.or_btn::before {content: ''; position: absolute; left: 0; top: 0; display: block;
    width: 100%; height: 100%; background: linear-gradient(to right,
#FFFFFF 1%,
#F4DB85 100%); z-index: -2;}
.or_btn::after {content: ''; position: absolute; left: 0; top: 0; display: block;
    width: 0; height: 100%; background: #323135; z-index: -1; transition: 0.5s;}
.or_btn:hover::after {width: 100%;}
.gy_btn {position: relative; background: #A0A0A0 !important; color: #fff !important;
    border: 1px solid #A0A0A0; z-index: 3; transition: 0.5s;}
.gy_btn::before {content: ''; position: absolute; left: 0; top: 0; display: block;
    width: 100%; height: 100%; background: #A0A0A0; z-index: -2;}
.gy_btn::after {content: ''; position: absolute; left: 0; top: 0; display: block;
    width: 0; height: 100%; background: #424242; z-index: -1; transition: 0.5s;}
.gy_btn:hover::after {width: 100%;}

/* 회원가입 모달 */
.popup_signup .popup_inner {width: 650px; background: #262626;}
.popup_bar {display: flex; align-items: center; justify-content: center; width: 100%; height: 105px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.66%, #000000 100%);}
.popup_bar img {width: 286px;}
.popup_bar.join{padding:10px 0; height: auto;}
.popup_bar.join img{width: calc(100vw*(200/1545));}
.signup_box {width: 100%; padding: 54px 160px 54px 100px;}
.signup_box .row {display: flex; align-items: center; gap: 20px; width: 100%; margin-bottom: 12px;}
.popup_signup .row:nth-child(4) .popup_bar{margin-bottom: 28px;}
.signup_box label {position: relative; display: block; width: 100px; font-size: 13px;
    font-weight: 400; color: #fff; text-align: right;}
.signup_box label i {position: absolute; top: -6px; right: -10px; width: 12px; height: 8px;
    background: url('../img/icon/icon_required.png') no-repeat center/contain;}
.signup_box input {width: calc(100% - 120px); height: 40px; border: 1px solid #726450;
    font-size: 16px; background: rgba(255,255,255,0.1); text-indent: 20px; padding-top: 3px;}
.signup_box input::placeholder {font-size: 15px; color: #9B9B9B; font-weight: 300;}
.signup_btn_box {display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 32px;}
.signup_btn_box * {width: 133px; height: 48px; font-size: 16px; font-weight: 500; background: #A0A0A0; color: #000;}
.signup_btn_box a {display: flex; align-items: center; justify-content: center; cursor: pointer;}
.btn { background: #A0A0A0; color: #000;}

/* 회원가입 완료 모달 */
.popup_complete .popup_inner {width: 480px; background: #262626;}
.popup_complete .popup_bar {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.66%, #000000 100%);}
.complete_box {display: flex; flex-direction: column; align-items: center; padding: 28px 0 50px;}
.complete_box img {width: 220px;}
.complete_box p {font-size: 24px; color: #FFC914; text-align: center;}
.complete_box span {display: block; text-align: center; font-size: 18px; color: #8C7651; margin-top: 15px;}

/* 고객센터 모달 */
.popup_err .popup_inner {width: 480px; background: #262626;}
.popup_err .popup_bar {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.66%, #000000 100%);}
.err_box {display: flex; flex-direction: column; align-items: center; padding: 0 0 50px;}
.err_box img {width: 220px;}
.err_box p {font-size: 24px; color: #FFC914; text-align: center;}
.err_box span {display: block; text-align: center; font-size: 18px; color: #8C7651; margin-top: 15px;}

/* popup thumb */
.popup_thumb .popup_inner {width: fit-content; background: #262626; height: 800px;}
.popup_thumb .popup_bar {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.66%, #000000 100%);}
.popup_bar p {width: 100%; font-size: 18px; padding: 0 45px; color: #FFEFAD;}
.thumb_box {padding: 50px 52px 80px;}
.thumb_img {width: 216px; height: auto; background: #D9D9D9; overflow: hidden;
    border: 1px solid #A7A7A7; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7); border-radius: 4px;}
.thumb_img img {width: 100%; height: auto; object-fit: contain;}
.thumb_list {display: flex; flex-wrap: wrap; gap: 6px;}
.thumb_list li {display: flex; flex-direction: column; gap: 10px; width: calc(100%/6 - 5px);
    cursor: pointer; margin-bottom: 40px; transition: 0.5s;}
.thumb_list li:hover img {box-shadow: 0 0 10px rgba(255,255,255,.5);}
.thumb_list li:hover p {color: #fff;}
.thumb_list p {width: 100%; font-size: 18px; color: #FFEFAD; text-align: center;}

/* 입금신청 모달 */
.popup_bank .popup_inner {width: 680px; height: 610px; background: #262626;}
.popup_bank .signup_box {padding: 54px 50px 54px 50px;}
.popup_bank .popup_bar {display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 50px; padding: 0 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.66%, #000000 100%);}
.popup_bank .popup_bar a {padding: 0 16px; font-size: 16px; color: rgba(202,128,16,.3);}
.popup_bank .popup_bar a.on {color: #FFEFAD;}
.popup_bank .popup_bar a:first-child {border-right: 1px solid rgba(202,128,16,.5);}
.popup_bank input {width: 280px;}
.popup_bank .row p {display: flex; align-items: center; width: 280px; height: 40px; font-size: 13px; color: #F2C57B; text-indent: 20px;}
.price_btn {display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-left: 120px; margin-top: 24px;}
.price_btn button {width: 70px; height: 30px; background: #000; border: 1px solid #FFEFAD;
    border-radius: 3px; font-size: 13px; color: #FFEFAD; transition: 0.5s;}
.price_btn button:hover {color: #fff; box-shadow: 0 0 5px rgba(255,255,255,0.5);}
.deposit_btn_box {justify-content: flex-start; margin-top: 40px; padding-left: 120px;}

/* 나의정보 모달 */
.popup_mypage .popup_inner {width: 800px; height: 600px; background: #262626;}
.popup_mypage .myinfo_box {display: flex; align-items: center; flex-direction: column; padding: 80px 50px}
.popup_mypage .popup_bar {display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 50px; padding: 0 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.66%, #000000 100%);}
.popup_mypage .row {width: fit-content; margin-bottom: 22px;}
.popup_mypage .popup_bar a {padding: 0 16px; font-size: 16px; color: rgba(202,128,16,.3); border-right: 1px solid rgba(202,128,16,.5)}
.popup_mypage .popup_bar a.on {color: #FFEFAD;}
.popup_mypage .popup_bar a:last-child {border-right: none;}
.popup_mypage .row p {display: flex; align-items: center; width: 150px; font-size: 13px; color: #F2C57B; text-indent: 20px;}
.myinfo_box label {width: 100px;}
.myinfo_btn_box {margin-top: 90px;}

/* 입출금리스트 모달 */
.popup_banklist .popup_inner {width: 800px; background: #262626;}
.popup_mypage .banklist_box {padding: 38px 42px 90px;}
.banklist_title {display: flex; align-items: center; width: 100%; height: 50px; border: 1px solid rgba(148,140,140,.25); margin-bottom: 12px;}
.banklist_title p {font-size: 16px; color: #C1AD8B; text-align: center;}
.banklist_title p:first-child, .banklist_row p:first-child {width: 110px;}
.banklist_title p:nth-child(2), .banklist_row p:nth-child(2) {width: 170px;}
.banklist_title p:nth-child(3), .banklist_row p:nth-child(3) {width: 145px;}
.banklist_title p:nth-child(4), .banklist_row p:nth-child(4) {width: 160px;}
.banklist_title p:nth-child(5), .banklist_row p:nth-child(5) {width: 128px;}
.banklist_row {display: flex; align-items: center; width: 100%; height: 40px; background: #424040;}
.banklist_row:nth-child(2n) {background: #333333;}
.banklist_row p {font-size: 14px; color: #fff; text-align: center;}
.point_btn_box {margin-top: 90px;}

/* 포인트 모달 */
.popup_point .popup_inner {width: 800px; background: #262626;}
.point_box {padding: 100px 75px;}
.point_box .row {position: relative; width: 100%;}
.point_box .err {display: block; position: absolute; right: 90px; line-height: 1.4;}
.err {display: none; font-size: 12px; color: #D93131;}
.err.on {display: block;}
.point_box input {width: 280px;}

/* 쪽지 모달 */
.popup_message .popup_inner {width: 800px; background: #262626;}
.popup_mypage .message_box {padding: 38px 40px 90px;}
.mes_title {display: flex; align-items: center; margin-bottom: 26px;}
.mes_title p {display: flex; align-items: center; font-size: 18px; color: #fff;}
.mes_title p span {display: block; padding: 0 2px; border-bottom: 1px solid #FFEFAD;
    font-size: 18px; margin: 0 5px; color: #FFEFAD;}
.mes_title img {width: 50px;}
.mes_list_title {display: flex; align-items: center; width: 100%; height: 50px; border: 1px solid rgba(148,140,140,.25); margin-bottom: 12px;}
.mes_list_title p {font-size: 16px; color: #C1AD8B;}
.mes_list_title p:first-child, .mes_row p:first-child {width: calc(100% - 120px); padding-left: 24px;}
.mes_list_title p:nth-child(2), .mes_row p:nth-child(2) {width: 120px; text-align: right; padding-right: 38px;}
.mes_list {width: 100%; margin-top: 12px;}
.mes_row {position: relative; display: flex; align-items: center; width: 100%; height: 40px; background: #424040;}
.mes_row:nth-child(2n) {background: #333333;}
.mes_row p {font-size: 14px; color: #fff;}
.mes_row p:first-child {white-space: nowrap; overflow: hidden; line-height: 1.3; text-overflow: ellipsis; margin-top: 3px;}
.mes_row p.new {color: #DE9613;}
.mes_row button {position: absolute; top: 50%; right: 10px; display: block; width: 20px; height: 20px; padding: 5px;
    background: url('../img/icon/icon_list_delete.png') no-repeat center/10px; transform: translateY(-50%);}
.message_detail_btn {cursor: pointer;}
.mes_detail_btn_box {display: flex; align-items: center; gap: 8px; margin-right: 15px;}
.mes_detail_btn_box button {display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 68px; height: 28px; background: #000; color: rgba(202,128,16,0.6); font-size: 13px; padding-top: 2px;}
.mes_detail_btn_box button:first-child img {width: 10px; margin-bottom: 2px;}
.mes_detail_btn_box button:nth-child(2) img {width: 7px; margin-bottom: 2px;}
.mes_detail_btn_box button:hover {box-shadow: 0 0 3px rgba(255,255,255,0.3);}
.mes_detail_box {overflow-y:auto;  width: 100%; height: 300px; background: #333333; padding: 20px 25px;}
.mes_detail_box p {font-size: 14px; color: #fff; line-height: 1.6;}

/* 입출금리스트 모달 */
.popup_coupon .popup_inner {width: 800px; background: #262626;}

/*게임모달*/
.popup_game .popup_inner {width: 100%;}

/* 고객문의 모달 */
.popup_service .popup_inner {width: 800px; background: #262626;}
.popup_service_detail .popup_inner {width: 800px; background: #262626;}
.popup_service_detail .message_box, .popup_service_write .message_box {padding: 38px 40px 50px;}
.popup_service_write .popup_inner {width: 800px; background: #262626;}
.popup_service_detail .mes_list_title p:nth-child(2) {width: 138px;}
.service_btn_box {display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px;}
.service_btn_box button {width: 134px; height: 48px; background: #A0A0A0; font-size: 16px; color: rgba(0,0,0,0.6); padding-top: 3px;}
.service_write_btn {width: 100px; height: 40px; background: #FFEFAD; font-size: 13px;}
.service_write_box {display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px;}
.service_write_box .mes_title {margin-bottom: 0;}
.popup_service_write .mes_list_title {border-left: none; border-right: none; border-bottom: none; margin-bottom: 0;}
.popup_service_write .mes_list_title p:nth-child(2) {width: 138px; padding-right: 0;}
.popup_service_write textarea.mes_detail_box {border: 1px solid rgba(114,100,80,.1);}
.popup_service_write .mes_list {margin-top: 0;}
.popup_service_write .mes_list_title p:first-child {padding-left: 0;}

/* 공지사항 */
.popup_etc .popup_inner {width: 800px; background: #262626;}
.popup_etc .popup_bar {justify-content: flex-start; height: 50px;}
.popup_etc .message_box {position: relative; padding: 38px 40px 40px;}
.popup_etc .notice_title p {text-align: center; padding: 0;}
.popup_etc .notice_list p {text-align: center; padding: 0;}
.notice_title p:first-child, .notice_list p:first-child {width: 72px;}
.notice_title p:nth-child(2), .notice_list p:nth-child(2) {width: 420px;}
.notice_title p:nth-child(3), .notice_list p:nth-child(3) {width: 85px;}
.notice_title p:nth-child(4), .notice_list p:nth-child(4) {width: 136px;}
.notice_list p:nth-child(2) {text-align: left; white-space: nowrap; overflow: hidden; line-height: 1.3; text-overflow: ellipsis;}
.notice_list {margin-bottom: 30px;}
.popup_notice_detail .date {position: absolute; top: 14px; right: 40px; font-size: 12px; color: #C1AD8B;}
.popup_notice_detail .mes_list_title p:first-child {width: 100%;}

/* pagination */
.pagination {display: flex; align-items: center; justify-content: center; gap: 4px;}
.pagination li {width: 16px; height: 16px;}
.pagination li a {display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #FFEFAD; font-size: 14px; cursor: pointer;}
.pagination .page {width: 20px; padding-top: 3px;}
.page_btn {background: url('../img/icon/icon_prev_step.svg') no-repeat center/16px;}
.prev {background: url('../img/icon/icon_prev.svg');}
.next {background: url('../img/icon/icon_next.svg');}
.next_step {background: url('../img/icon/icon_next_step.svg');}

/* 이벤트 */
.popup_event .notice_title p:nth-child(2), .popup_event .notice_list p:nth-child(2) {width: 535px;}
.popup_event_detail .date {position: absolute; top: 14px; right: 40px; font-size: 12px; color: #C1AD8B;}


@media screen and (max-width: 1545px){
    /* =============== header =============== */
    .header .container {width: calc(100vw*(1400/1545));         display: flex;
        flex-direction: column;
        align-items: flex-end;}
    .logo {width: calc(100vw*(300/1545));}
    .nav {_width: calc(100vw*(720/1545));}
    .top_info_box {top: calc(100vw*(-100/1545))}
    .user_info {gap: calc(100vw*(14/1545));}
    .user_info p {gap: calc(100vw*(5/1545)); font-size: calc(100vw*(18/1545));}
    .user_info p img {width: calc(100vw*(26/1545));}
    .grade {gap: calc(100vw*(6/1545)); padding: calc(100vw*(4/1545)) calc(100vw*(10/1545)) calc(100vw*(4/1545)) calc(100vw*(5/1545)); border-radius: calc(100vw*(4/1545));}
    .grade span {font-size: calc(100vw*(14/1545));}
    .grade img {width: calc(100vw*(20/1545)); height: calc(100vw*(20/1545));}
    .message p {gap: calc(100vw*(5/1545)); font-size: calc(100vw*(14/1545)); margin-top: calc(100vw*(6/1545));}

    .money_box {width: calc(100vw*(145/1545)); padding: calc(100vw*(8/1545)) 0 calc(100vw*(4/1545)) calc(100vw*(10/1545));}
    .money_box span {font-size: calc(100vw*(14/1545));}
    .money_box p {font-size: calc(100vw*(15/1545)); margin-top: calc(100vw*(6/1545));}
    .gnb {margin-top: calc(100vw*(25/1545));}
    .gnb li {_padding: 0 calc(100vw*(24/1545));}
    .gnb li a {font-size: calc(100vw*(18/1545)); padding: calc(100vw*(17/1545)) calc(100vw*(56/1545));}
    .logout_box {gap: calc(100vw*(8/1545)); margin-top: calc(100vw*(20/1545));}
    .logout_box button {font-size: calc(100vw*(18 / 1545));
        padding: calc(100vw*(17 / 1545)) calc(100vw*(56 / 1545));}

    /* =============== footer =============== */
    .footer {padding-top: calc(100vw*(60/1545));}
    .bt_logo {width: calc(100vw*(264/1545)); margin: 0 auto calc(100vw*(60/1545));}
    .bt_game_list {padding: calc(100vw*(5/1545)) 0;}
    .bt_game_list li {font-size: calc(100vw*(14/1545)); padding: 0 calc(100vw*(16/1545));}
    .bt_logo_list {margin-top: calc(100vw*(40/1545)); padding-top: calc(100vw*(40/1545)); padding-bottom: calc(100vw*(80/1545));}
    .bt_logo_list img {width: calc(100vw*(1400/1545));}


    /* =============== popup =============== */
    .popup_inner {width: calc(100vw*(560/1545)); height: calc(100vw*(600/1545)); max-height: 80vh; border-radius: calc(100vw*(6/1545));}
    .popup_inner h3 {font-size: calc(100vw*(28/1545)); padding-bottom: calc(100vw*(20/1545)); margin-bottom: calc(100vw*(18/1545));}
    .popup_inner p {font-size: calc(100vw*(18/1545));}
    .close_btn {top: calc(100vw*(14/1545)); right: calc(100vw*(14/1545)); width: calc(100vw*(18/1545)); height: calc(100vw*(18/1545));}

    /* 회원가입 모달 */
    .popup_signup .popup_inner {width: calc(100vw*(650/1545));}
    .popup_bar {height: calc(100vw*(105/1545));}
    .popup_bar img {width: calc(100vw*(286/1545));}
    .popup_bar.join img {width: calc(100vw*(200/1545));}

    .signup_box {padding: calc(100vw*(54/1545)) calc(100vw*(160/1545)) calc(100vw*(54/1545)) calc(100vw*(100/1545));}
    .signup_box .row {gap: calc(100vw*(20/1545));margin-bottom: calc(100vw*(12/1545));}
    .popup_signup .row:nth-child(4) {margin-bottom: calc(100vw*(28/1545));}
    .signup_box label {width: calc(100vw*(100/1545)); font-size: calc(100vw*(13/1545));}
    .signup_box label i {top: -calc(100vw*(6/1545)); right: -calc(100vw*(10/1545)); width: calc(100vw*(12/1545)); height: calc(100vw*(8/1545));}
    .signup_box input {width: calc(100% - calc(100vw*(120/1545))); height: calc(100vw*(40/1545)); font-size: calc(100vw*(16/1545)); text-indent: calc(100vw*(20/1545)); padding-top: calc(100vw*(3/1545));}
    .signup_box input::placeholder {font-size: calc(100vw*(15/1545));}
    .signup_btn_box {gap: calc(100vw*(14/1545)); margin-top: calc(100vw*(32/1545));}
    .signup_btn_box * {width: calc(100vw*(133/1545)); height: calc(100vw*(48/1545)); font-size: calc(100vw*(16/1545));}

    /* 회원가입 완료 모달 */
    .popup_complete .popup_inner {width: calc(100vw*(480/1545));}
    .popup_complete .popup_bar {height: calc(100vw*(50/1545));}
    .complete_box {padding: calc(100vw*(28/1545)) 0 calc(100vw*(50/1545));}
    .complete_box img {width: calc(100vw*(220/1545));}
    .complete_box p {font-size: calc(100vw*(24/1545));}
    .complete_box span {font-size: calc(100vw*(18/1545)); margin-top: calc(100vw*(15/1545));}

    /* 고객센터 모달 */
    .popup_err .popup_inner {width: calc(100vw*(480/1545));}
    .popup_err .popup_bar {height: calc(100vw*(50/1545));}
    .err_box {padding: 0 0 calc(100vw*(50/1545));}
    .err_box img {width: calc(100vw*(220/1545));}
    .err_box p {font-size: calc(100vw*(24/1545));}
    .err_box span {font-size: calc(100vw*(18/1545)); margin-top: calc(100vw*(15/1545));}

    /* popup thumb */
    .popup_thumb .popup_inner {height: calc(100vw*(800/1545));}
    .popup_thumb .popup_bar {height: calc(100vw*(50/1545));}
    .popup_bar p {font-size: calc(100vw*(18/1545)); padding: 0 calc(100vw*(45/1545));}
    .thumb_box {padding: calc(100vw*(50/1545)) calc(100vw*(52/1545)) calc(100vw*(80/1545));}
    .thumb_img {width: calc(100vw*(216/1545)); box-shadow: calc(100vw*(4/1545)) calc(100vw*(4/1545)) calc(100vw*(10/1545)) rgba(0, 0, 0, 0.7); border-radius: calc(100vw*(4/1545));}
    .thumb_list {gap: calc(100vw*(6/1545));}
    .thumb_list li {gap: calc(100vw*(10/1545)); width: calc(100%/6 - calc(100vw*(5/1545))); margin-bottom: calc(100vw*(40/1545));}
    .thumb_list li:hover img {box-shadow: 0 0 calc(100vw*(10/1545)) rgba(255,255,255,.5);}
    .thumb_list p {font-size: calc(100vw*(18/1545));}

    /* 입금신청 모달 */
    .popup_bank .popup_inner {width: calc(100vw*(680/1545)); height: calc(100vw*(610/1545));}
    .popup_bank .signup_box {padding: calc(100vw*(54/1545)) calc(100vw*(50/1545)) calc(100vw*(54/1545)) calc(100vw*(50/1545));}
    .popup_bank .popup_bar {height: calc(100vw*(50/1545)); padding: 0 calc(100vw*(10/1545));}
    .popup_bank .popup_bar a {padding: 0 calc(100vw*(16/1545)); font-size: calc(100vw*(16/1545));}
    .popup_bank input {width: calc(100vw*(280/1545));}
    .popup_bank .row p {width: calc(100vw*(280/1545)); height: calc(100vw*(40/1545)); font-size: calc(100vw*(13/1545)); text-indent: calc(100vw*(20/1545));}
    .price_btn {gap: calc(100vw*(4/1545)); padding-left: calc(100vw*(120/1545)); margin-top: calc(100vw*(24/1545));}
    .price_btn button {width: calc(100vw*(70/1545)); height: calc(100vw*(30/1545));  border-radius: calc(100vw*(3/1545)); font-size: calc(100vw*(13/1545));}
    .price_btn button:hover {box-shadow: 0 0 calc(100vw*(5/1545)) rgba(255,255,255,0.5);}
    .deposit_btn_box {margin-top: calc(100vw*(40/1545)); padding-left: calc(100vw*(120/1545));}

    /* 나의정보 모달 */
    .popup_mypage .popup_inner {width: calc(100vw*(800/1545)); height: calc(100vw*(650/1545));}
    .popup_mypage .myinfo_box {padding: calc(100vw*(80/1545)) calc(100vw*(50/1545))}
    .popup_mypage .popup_bar {height: calc(100vw*(50/1545)); padding: 0 calc(100vw*(10/1545));}
    .popup_mypage .row {margin-bottom: calc(100vw*(22/1545));}
    .popup_mypage .popup_bar a {padding: 0 calc(100vw*(16/1545)); font-size: calc(100vw*(16/1545));}
    .popup_mypage .row p {width: calc(100vw*(150/1545)); font-size: calc(100vw*(13/1545)); text-indent: calc(100vw*(20/1545));}
    .myinfo_box label {width: calc(100vw*(100/1545));}
    .myinfo_btn_box {margin-top: calc(100vw*(90/1545));}

    /* 입출금리스트 모달 */
    .popup_banklist .popup_inner {width: calc(100vw*(800/1545));}
    .popup_mypage .banklist_box {padding: calc(100vw*(38/1545)) calc(100vw*(42/1545)) calc(100vw*(90/1545));}
    .banklist_title {height: calc(100vw*(50/1545)); margin-bottom: calc(100vw*(12/1545));}
    .banklist_title p {font-size: calc(100vw*(16/1545));}
    .banklist_title p:first-child, .banklist_row p:first-child {width: calc(100vw*(110/1545));}
    .banklist_title p:nth-child(2), .banklist_row p:nth-child(2) {width: calc(100vw*(170/1545));}
    .banklist_title p:nth-child(3), .banklist_row p:nth-child(3) {width: calc(100vw*(145/1545));}
    .banklist_title p:nth-child(4), .banklist_row p:nth-child(4) {width: calc(100vw*(160/1545));}
    .banklist_title p:nth-child(5), .banklist_row p:nth-child(5) {width: calc(100vw*(128/1545));}
    .banklist_row {height: calc(100vw*(40/1545));}
    .banklist_row p {font-size: calc(100vw*(14/1545));}
    .point_btn_box {margin-top: calc(100vw*(90/1545));}

    /* 포인트 모달 */
    .popup_point .popup_inner {width: calc(100vw*(800/1545));}
    .point_box {padding: calc(100vw*(100/1545)) calc(100vw*(75/1545));}
    .point_box .err {right: calc(100vw*(90/1545));}
    .err {font-size: calc(100vw*(12/1545));}
    .point_box input {width: calc(100vw*(280/1545));}

    /* 쪽지 모달 */
    .popup_message .popup_inner {width: calc(100vw*(800/1545));}
    .popup_mypage .message_box {padding: calc(100vw*(38/1545)) calc(100vw*(40/1545)) calc(100vw*(90/1545));}
    .mes_title {margin-bottom: calc(100vw*(26/1545));}
    .mes_title p {font-size: calc(100vw*(18/1545));}
    .mes_title p span { padding: 0 calc(100vw*(2/1545)); font-size: calc(100vw*(18/1545)); margin: 0 calc(100vw*(5/1545));}
    .mes_title img {width: calc(100vw*(50/1545));}
    .mes_list_title {height: calc(100vw*(50/1545)); margin-bottom: calc(100vw*(12/1545));}
    .mes_list_title p {font-size: calc(100vw*(16/1545));}
    .mes_list_title p:first-child, .mes_row p:first-child {width: calc(100% - calc(100vw*(120/1545))); padding-left: calc(100vw*(24/1545));}
    .mes_list_title p:nth-child(2), .mes_row p:nth-child(2) {width: calc(100vw*(120/1545)); padding-right: calc(100vw*(38/1545));}
    .mes_list {margin-top: calc(100vw*(12/1545));}
    .mes_row {height: calc(100vw*(40/1545));}
    .mes_row p {font-size: calc(100vw*(14/1545));}
    .mes_row p:first-child {margin-top: calc(100vw*(3/1545));}
    .mes_row button {right: calc(100vw*(10/1545)); width: calc(100vw*(20/1545)); height: calc(100vw*(20/1545)); padding: calc(100vw*(5/1545)); background-size: calc(100vw*(10/1545));}
    .mes_detail_btn_box {gap: calc(100vw*(8/1545)); margin-right: calc(100vw*(15/1545));}
    .mes_detail_btn_box button {gap: calc(100vw*(10/1545)); width: calc(100vw*(68/1545)); height: calc(100vw*(28/1545)); font-size: calc(100vw*(13/1545)); padding-top: calc(100vw*(2/1545));}
    .mes_detail_btn_box button:first-child img {width: calc(100vw*(10/1545)); margin-bottom: calc(100vw*(2/1545));}
    .mes_detail_btn_box button:nth-child(2) img {width: calc(100vw*(7/1545)); margin-bottom: calc(100vw*(2/1545));}
    .mes_detail_btn_box button:hover {box-shadow: 0 0 calc(100vw*(3/1545)) rgba(255,255,255,0.3);}
    .mes_detail_box {height: calc(100vw*(300/1545)); padding: calc(100vw*(20/1545)) calc(100vw*(25/1545));}
    .mes_detail_box p {font-size: calc(100vw*(14/1545));}

    /* 입출금리스트 모달 */
    .popup_coupon .popup_inner {width: calc(100vw*(800/1545));}

    /*게임모달*/
    .popup_game .popup_inner {_width: calc(100vw*(800/1545)); width: 60%; height: 60%;}

    /* 고객문의 모달 */
    .popup_service .popup_inner {width: calc(100vw*(800/1545));}
    .popup_service_detail .popup_inner {width: calc(100vw*(800/1545));}
    .popup_service_detail .message_box, .popup_service_write .message_box {padding: calc(100vw*(38/1545)) calc(100vw*(40/1545)) calc(100vw*(50/1545));}
    .popup_service_write .popup_inner {width: calc(100vw*(800/1545));}
    .popup_service_detail .mes_list_title p:nth-child(2) {width: calc(100vw*(138/1545));}
    .service_btn_box {gap: calc(100vw*(12/1545)); margin-top: calc(100vw*(24/1545));}
    .service_btn_box button {width: calc(100vw*(134/1545)); height: calc(100vw*(48/1545)); font-size: calc(100vw*(16/1545)); padding-top: calc(100vw*(3/1545));}
    .service_write_btn {width: calc(100vw*(100/1545)); height: calc(100vw*(40/1545)); font-size: calc(100vw*(13/1545));}
    .service_write_box {margin-bottom: calc(100vw*(26/1545));}
    .popup_service_write .mes_list_title p:nth-child(2) {width: calc(100vw*(138/1545));}

    /* 공지사항 */
    .popup_etc .popup_inner {width: calc(100vw*(800/1545));}
    .popup_etc .popup_bar {height: calc(100vw*(50/1545));}
    .popup_etc .message_box {padding: calc(100vw*(38/1545)) calc(100vw*(40/1545)) calc(100vw*(40/1545));}
    .notice_title p:first-child, .notice_list p:first-child {width: calc(100vw*(72/1545));}
    .notice_title p:nth-child(2), .notice_list p:nth-child(2) {width: calc(100vw*(420/1545));}
    .notice_title p:nth-child(3), .notice_list p:nth-child(3) {width: calc(100vw*(85/1545));}
    .notice_title p:nth-child(4), .notice_list p:nth-child(4) {width: calc(100vw*(136/1545));}
    .notice_list {margin-bottom: calc(100vw*(30/1545));}
    .popup_notice_detail .date {top: calc(100vw*(14/1545)); right: calc(100vw*(40/1545)); font-size: calc(100vw*(12/1545));}

    /* pagination */
    .pagination {gap: calc(100vw*(4/1545));}
    .pagination li {width: calc(100vw*(16/1545)); height: calc(100vw*(16/1545));}
    .pagination li a {font-size: calc(100vw*(14/1545));}
    .pagination .page {width: calc(100vw*(20/1545)); padding-top: calc(100vw*(3/1545));}
    .page_btn {background-size: calc(100vw*(16/1545));}

    /* 이벤트 */
    .popup_event .notice_title p:nth-child(2), .popup_event .notice_list p:nth-child(2) {width: calc(100vw*(535/1545));}
    .popup_event_detail .date {top: calc(100vw*(14/1545)); right: calc(100vw*(40/1545)); font-size: calc(100vw*(12/1545));}
}


@media screen and (max-width: 700px){
    /* =============== header =============== */
    .header .container {width: 100%; padding: 0 calc(100vw*(15/360));}
    .logo {width: calc(100vw*(164/360));}
    .nav {display: none;}
    .top_info_box {display: none; padding: calc(100vw*(15/360)) calc(100vw*(35/360)); background: rgba(1,1,1,.8); border-radius: 0 0 calc(100vw*(30/360)) calc(100vw*(30/360));}
    .user_info {gap: calc(100vw*(14/360)); justify-content: space-between;}
    .user_info p {gap: calc(100vw*(5/360));}
    .user_info p img {width: calc(100vw*(26/360));}
    .grade {gap: calc(100vw*(6/360)); padding: calc(100vw*(4/360)) calc(100vw*(10/360)) calc(100vw*(4/360)) calc(100vw*(5/360)); border-radius: calc(100vw*(4/360));}
    .grade span {font-size: calc(100vw*(14/360));}
    .message p {gap: calc(100vw*(5/360)); font-size: calc(100vw*(14/360)); margin-top: calc(100vw*(6/360));}

    .money_box {width: calc(100vw*(132/360)); padding: calc(100vw*(8/360)) 0 calc(100vw*(4/360)) calc(100vw*(10/360));}
    .money_box span {font-size: calc(100vw*(14/360));}
    .money_box p {font-size: calc(100vw*(15/360)); margin-top: calc(100vw*(6/360));}
    .gnb {margin-top: calc(100vw*(25/360));}
    .gnb li {padding: 0 calc(100vw*(24/360));}
    .gnb li a {font-size: calc(100vw*(18/360));}
    .logout_box {display: none;}
    .mb_gnb_btn {display: flex; align-items: center; justify-content: center; width: calc(100vw*(44/360)); height: calc(100vw*(44/360));
        background: rgb(1, 1, 1); border-radius: calc(100vw*(8/360)); margin-top: calc(100vw*(38/360)); cursor: pointer; margin-left: auto;
        margin-right: 20px; border: 3px solid #F4DB85;}
    .mb_gnb_btn img {width: calc(100vw*(25/360)); height: calc(100vw*(22/360));}
    /* =============== footer =============== */
    .footer {padding-top: calc(100vw*(60/360));}
    .bt_logo {width: calc(100vw*(136/360)); margin: 0 auto calc(100vw*(60/360));}
    .bt_game_list {padding: calc(100vw*(5/360)) 0;}
    .bt_game_list li {font-size: calc(100vw*(12/360)); padding: 0 calc(100vw*(16/360));}
    .bt_game_list li:nth-child(n+4) {display: none;}
    .bt_game_list li:nth-child(3) {border-right: none;}
    .bt_logo_list {margin-top: calc(100vw*(40/360)); padding-top: calc(100vw*(40/360)); padding-bottom: calc(100vw*(80/360));}
    .bt_logo_list img {display: none; width: calc(100vw*(330/360));}
    .bt_logo_list img.mb {display: block;}


    /* =============== popup =============== */
    .popup_inner {top: 0; left: 0; transform: unset; width: calc(100vw*(560/360)); height: 100vh; max-height: 100vh; border-radius: 0; border: none;}
    .popup_inner h3 {font-size: calc(100vw*(28/360)); padding-bottom: calc(100vw*(20/360)); margin-bottom: calc(100vw*(18/360));}
    .popup_inner p {font-size: calc(100vw*(18/360));}
    .close_btn {top: calc(100vw*(14/360)); right: calc(100vw*(14/360)); width: calc(100vw*(14/360)); height: calc(100vw*(14/360));}

    /* 회원가입 모달 */
    .popup_signup .popup_inner {width: 100%;}
    .popup_bar {height: calc(100vw*(64/360));}
    .popup_bar img {width: calc(100vw*(224/360));}
    .popup_bar.join img {width: calc(100vw*(120/360));}
    .signup_box {padding: calc(100vw*(42/360)) calc(100vw*(30/360)) calc(100vw*(54/360)) calc(100vw*(20/360));}
    .signup_box .row {gap: calc(100vw*(15/360)); margin-bottom: calc(100vw*(12/360));}
    .popup_signup .row:nth-child(4) {margin-bottom: calc(100vw*(28/360));}
    .signup_box label {width: calc(100vw*(70/360)); font-size: calc(100vw*(11/360));}
    .signup_box label i {top: -calc(100vw*(6/360)); right: calc(100vw*(-10/360)); width: calc(100vw*(12/360)); height: calc(100vw*(8/360));}
    .signup_box input {width: calc(100% - calc(100vw*(70/360))); height: calc(100vw*(32/360)); font-size: calc(100vw*(13/360)); text-indent: calc(100vw*(10/360)); padding-top: calc(100vw*(3/360));}
    .signup_box input::placeholder {font-size: calc(100vw*(13/360));}
    .signup_btn_box {gap: calc(100vw*(14/360)); margin-top: calc(100vw*(24/360));}
    .signup_btn_box * {width: calc(100vw*(108/360)); height: calc(100vw*(38/360)); font-size: calc(100vw*(13/360));}

    /* 회원가입 완료 모달 */
    .popup_complete .popup_inner {width: 100%;}
    .popup_complete .popup_bar {height: calc(100vw*(50/360));}
    .complete_box {padding: calc(100vw*(65/360)) 0 calc(100vw*(50/360));}
    .complete_box img {width: calc(100vw*(180/360));}
    .complete_box p {font-size: calc(100vw*(18/360));}
    .complete_box span {font-size: calc(100vw*(16/360)); margin-top: calc(100vw*(15/360));}

    /* 고객센터 모달 */
    .popup_err .popup_inner {width: 100%;}
    .popup_err .popup_bar {height: calc(100vw*(50/360));}
    .err_box {padding: 0 0 calc(100vw*(50/360));}
    .err_box img {width: calc(100vw*(220/360));}
    .err_box p {font-size: calc(100vw*(24/360));}
    .err_box span {font-size: calc(100vw*(18/360)); margin-top: calc(100vw*(15/360));}

    /* popup thumb */
    .popup_thumb .popup_inner {width: 100%; height: 100vh;}
    .popup_thumb .popup_bar {height: calc(100vw*(50/360));}
    .popup_bar p {font-size: calc(100vw*(16/360)); padding: 0 calc(100vw*(28/360));}
    .thumb_box {padding: calc(100vw*(26/360)) calc(100vw*(30/360)) calc(100vw*(80/360));}
    .thumb_box.container {width: 100%;}
    .thumb_img {width: 100%; box-shadow: calc(100vw*(4/360)) calc(100vw*(4/360)) calc(100vw*(10/360)) rgba(0, 0, 0, 0.7); border-radius: calc(100vw*(4/360));}
    .thumb_list {gap: calc(100vw*(20/360));}
    .thumb_list li {gap: calc(100vw*(10/360)); width: calc(100vw*(137/360)); margin-bottom: calc(100vw*(15/360));}
    .thumb_list li:hover img {box-shadow: 0 0 calc(100vw*(10/360)) rgba(255,255,255,.5);}
    .thumb_list p {font-size: calc(100vw*(12/360));}

    /* 입금신청 모달 */
    .popup_bank .popup_inner {width: 100%; height: 100vh;}
    .popup_bank .signup_box {padding: calc(100vw*(34/360)) calc(100vw*(36/360));}
    .popup_bank .popup_bar {height: calc(100vw*(50/360)); padding: 0 calc(100vw*(10/360));}
    .popup_bank .popup_bar a {padding: 0 calc(100vw*(16/360)); font-size: calc(100vw*(16/360));}
    .popup_bank input {width: calc(100% - calc(100vw*(85/360)));}
    .popup_bank .row p {width: calc(100% - calc(100vw*(85/360))); height: calc(100vw*(40/360)); font-size: calc(100vw*(13/360)); text-indent: calc(100vw*(20/360));}
    .price_btn {gap: calc(100vw*(4/360)); padding-left: calc(100vw*(85/360)); margin-top: calc(100vw*(24/360));}
    .price_btn button {width: calc(100vw*(65/360)); height: calc(100vw*(30/360));  border-radius: calc(100vw*(3/360)); font-size: calc(100vw*(13/360));}
    .price_btn button:hover {box-shadow: 0 0 calc(100vw*(5/360)) rgba(255,255,255,0.5);}
    .deposit_btn_box {margin-top: calc(100vw*(40/360)); padding-left: calc(100vw*(85/360));}
    .popup_deposit .deposit_btn_box * {width: calc(100vw*(105/360));}

    /* 나의정보 모달 */
    .popup_mypage .popup_inner {width: 100%; height: 100vh;}
    .popup_mypage .myinfo_box {padding: calc(100vw*(80/360)) calc(100vw*(50/360))}
    .popup_mypage .popup_bar {width: 100%; height: calc(100vw*(50/360)); padding: 0 calc(100vw*(30/360)) 0 calc(100vw*(10/360)); overflow-x: auto;}
    .popup_mypage .popup_bar::-webkit-scrollbar {display: none;}
    .popup_mypage .row {margin-bottom: calc(100vw*(22/360));}
    .popup_mypage .popup_bar a {padding: 0 calc(100vw*(16/360)); font-size: calc(100vw*(16/360)); white-space: nowrap;}
    .popup_mypage .row p {width: calc(100vw*(150/360)); font-size: calc(100vw*(13/360)); text-indent: calc(100vw*(20/360));}
    .myinfo_box label {width: calc(100vw*(100/360));}
    .myinfo_btn_box {margin-top: calc(100vw*(90/360));}

    /* 입출금리스트 모달 */
    .popup_banklist .popup_inner {width: 100%;}
    .popup_mypage .banklist_box {padding: calc(100vw*(38/360)) calc(100vw*(42/360)) calc(100vw*(90/360)); overflow-x: auto;}
    .popup_mypage .banklist_box::-webkit-scrollbar {display: none;}
    .banklist_title {width: fit-content; height: calc(100vw*(50/360)); margin-bottom: calc(100vw*(12/360));}
    .banklist_title p {font-size: calc(100vw*(16/360));}
    .banklist_title p:first-child, .banklist_row p:first-child {width: calc(100vw*(110/360));}
    .banklist_title p:nth-child(2), .banklist_row p:nth-child(2) {width: calc(100vw*(170/360));}
    .banklist_title p:nth-child(3), .banklist_row p:nth-child(3) {width: calc(100vw*(145/360));}
    .banklist_title p:nth-child(4), .banklist_row p:nth-child(4) {width: calc(100vw*(160/360));}
    .banklist_title p:nth-child(5), .banklist_row p:nth-child(5) {width: calc(100vw*(128/360));}
    .banklist_list {width: fit-content;}
    .banklist_row {height: calc(100vw*(40/360));}
    .banklist_row p {font-size: calc(100vw*(14/360));}
    .point_btn_box {margin-top: calc(100vw*(90/360));}

    /* 포인트 모달 */
    .popup_point .popup_inner {width: 100%;}
    .point_box {padding: calc(100vw*(60/360)) calc(100vw*(30/360)) calc(100vw*(54/360)) calc(100vw*(20/360));}
    .point_box .err {right: calc(100vw*(90/360));}
    .err {font-size: calc(100vw*(12/360));}
    .point_box label {font-size: calc(100vw*(12/360));}
    .point_box input {width: calc(100% - calc(100vw*(100/360)));}

    /* 쪽지 모달 */
    .popup_message .popup_inner {width: 100%;}
    .popup_mypage .message_box {padding: calc(100vw*(38/360)) calc(100vw*(20/360)) calc(100vw*(60/360));}
    .mes_title {margin-bottom: calc(100vw*(26/360));}
    .mes_title p {font-size: calc(100vw*(14/360));}
    .mes_title p span { padding: 0 calc(100vw*(2/360)); font-size: calc(100vw*(16/360)); margin: 0 calc(100vw*(5/360));}
    .mes_title img {width: calc(100vw*(40/360));}
    .mes_list_title {height: calc(100vw*(50/360)); margin-bottom: calc(100vw*(12/360));}
    .mes_list_title p {font-size: calc(100vw*(12/360));}
    .mes_list_title p:first-child, .mes_row p:first-child {width: calc(100% - calc(100vw*(80/360))); padding-left: calc(100vw*(16/360));}
    .mes_list_title p:nth-child(2), .mes_row p:nth-child(2) {width: calc(100vw*(120/360)); padding-right: calc(100vw*(38/360));}
    .mes_list {margin-top: calc(100vw*(12/360));}
    .mes_row {height: fit-content; min-height: calc(100vw*(40/360)); padding: calc(100vw*(5/360)) 0;}
    .mes_row p {font-size: calc(100vw*(13/360));}
    .mes_row p:first-child {margin-top: calc(100vw*(3/360)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        white-space: break-spaces; line-height: 1.6;}
    .mes_row button {right: calc(100vw*(10/360)); width: calc(100vw*(20/360)); height: calc(100vw*(20/360)); padding: calc(100vw*(5/360)); background-size: calc(100vw*(10/360));}
    .mes_detail_btn_box {gap: calc(100vw*(8/360)); margin-right: calc(100vw*(15/360));}
    .mes_detail_btn_box button {gap: calc(100vw*(10/360)); width: calc(100vw*(62/360)); height: calc(100vw*(28/360)); font-size: calc(100vw*(12/360)); padding-top: calc(100vw*(2/360));}
    .mes_detail_btn_box button:first-child img {width: calc(100vw*(10/360)); margin-bottom: calc(100vw*(2/360));}
    .mes_detail_btn_box button:nth-child(2) img {width: calc(100vw*(7/360)); margin-bottom: calc(100vw*(2/360));}
    .mes_detail_btn_box button:hover {box-shadow: 0 0 calc(100vw*(3/360)) rgba(255,255,255,0.3);}
    .mes_detail_box {height: calc(100vw*(275/360)); padding: calc(100vw*(20/360)) calc(100vw*(25/360));}
    .mes_detail_box p {font-size: calc(100vw*(13/360));}

    /* 입출금리스트 모달 */
    .popup_coupon .popup_inner {width: 100%;}

    /*게임모달*/
    .popup_game .popup_inner {width: 100%;}

    /* 고객문의 모달 */
    .popup_service .popup_inner {width: 100%;}
    .popup_service_detail .popup_inner {width: 100%;}
    .popup_service_detail .message_box, .popup_service_write .message_box {padding: calc(100vw*(38/360)) calc(100vw*(20/360)) calc(100vw*(60/360));}
    .popup_service_write .popup_inner {width: 100%;}
    .popup_service_detail .mes_list_title p:nth-child(2) {width: calc(100vw*(138/360));}
    .service_btn_box {gap: calc(100vw*(12/360)); margin-top: calc(100vw*(24/360));}
    .service_btn_box button {width: calc(100vw*(110/360)); height: calc(100vw*(36/360)); font-size: calc(100vw*(13/360)); padding-top: calc(100vw*(3/360));}
    .service_write_btn {width: calc(100vw*(85/360)); height: calc(100vw*(36/360)); font-size: calc(100vw*(12/360));}
    .service_write_box {margin-bottom: calc(100vw*(26/360));}
    .popup_service_write .mes_list_title p:nth-child(2) {width: calc(100vw*(138/360));}

    /* 공지사항 */
    .popup_etc .popup_inner {width: 100%;}
    .popup_etc .popup_bar {height: calc(100vw*(50/360));}
    .popup_etc .message_box {padding: calc(100vw*(38/360)) calc(100vw*(40/360)) calc(100vw*(40/360));}
    .notice_title p:nth-child(2), .notice_list p:nth-child(2) {width: calc(100vw*(180/360)); text-align: left; padding-left: calc(100vw*(20/360));}
    .notice_title p:nth-child(3), .notice_list p:nth-child(3) {width: calc(100vw*(95/360));}
    .notice_title p:nth-child(4), .notice_list p:nth-child(4) {width: calc(100vw*(80/360));}
    .notice_list {margin-bottom: calc(100vw*(30/360));}
    .popup_notice_detail .date {top: calc(100vw*(14/360)); right: calc(100vw*(40/360)); font-size: calc(100vw*(12/360));}
    .notice_title p:nth-child(1), .notice_title p:nth-child(3) {display: none;}
    .notice_detail_btn p:nth-child(1), .notice_detail_btn p:nth-child(3) {display: none;}
    .popup_notice_detail .mes_list_title p:first-child {width: 100%; font-size: calc(100vw*(14/360)); line-height: 1.5; padding-left: 0;}
    .popup_notice_detail .mes_list_title {height: fit-content; min-height: calc(100vw*(50/360)); padding: calc(100vw*(12/360)) calc(100vw*(16/360));}

    /* pagination */
    .pagination {gap: calc(100vw*(4/360));}
    .pagination li {width: calc(100vw*(16/360)); height: calc(100vw*(16/360));}
    .pagination li a {font-size: calc(100vw*(14/360));}
    .pagination .page {width: calc(100vw*(20/360)); padding-top: calc(100vw*(3/360));}
    .page_btn {background-size: calc(100vw*(16/360));}

    /* 이벤트 */
    .popup_event_detail .date {top: calc(100vw*(14/360)); right: calc(100vw*(40/360)); font-size: calc(100vw*(12/360));}
    .event_btn_detail p:first-child {display: none;}
    .popup_event .notice_list p:nth-child(2) {width: calc(100vw*(200/360));}
    .popup_event_detail .mes_list_title p:first-child {width: 100%; font-size: calc(100vw*(14/360)); line-height: 1.5; padding-left: 0;}
    .popup_event_detail .mes_list_title {height: fit-content; min-height: calc(100vw*(50/360)); padding: calc(100vw*(12/360)) calc(100vw*(16/360));}

    /* 모바일 메뉴 popup */
    .popup_mb_menu {position: relative;}
    .popup_mb_menu .popup_inner {width: 100%; background: #000;}
    .popup_mb_menu .popup_bar {position: relative; justify-content: flex-end; gap: calc(100vw*(8/360)); padding: 0 calc(100vw*(20/360)); border-bottom: 1px solid rgba(255,255,255,0.1);}
    .popup_mb_menu .menu_btn {width: calc(100vw*(94/360)); height: calc(100vw*(34/360)); font-size: calc(100vw*(13/360));}
    .popup_mb_menu .close_btn {top: 50%; right: auto; left: calc(100vw*(15/360)); width: calc(100vw*(20/360)); transform: translateY(-50%);}
    .popup_mb_menu .close_btn img {width: 100%;}
    .mb_menu_box {width: 100%;}
    .nav {width: 100%;}
    .user_box {margin-left: 0; padding: calc(100vw*(20/360)) calc(100vw*(25/360)) calc(100vw*(20/360)) 35px; display: block; }
    /*.user_info {gap: 0; justify-content: space-between;}*/
    .user_info p {gap: calc(100vw*(5/360)); font-size: calc(100vw*(18/360)); color: #fff;}
    .user_info p img {width: calc(100vw*(26/360));}
    .grade {gap: calc(100vw*(12/360)); width: calc(100vw*(100/360)); height: calc(100vw*(30/360));
        padding: calc(100vw*(4/360)) calc(100vw*(10/360)) calc(100vw*(4/360)) calc(100vw*(5/360)); border-radius: calc(100vw*(4/360));}
    .grade span {font-size: calc(100vw*(15/360));}
    .grade img {width: calc(100vw*(20/360)); height: calc(100vw*(20/360));}
    .message p {gap: calc(100vw*(5/360)); font-size: calc(100vw*(14/360)); margin-top: calc(100vw*(6/360)); color: #fff;}

    .money_list {width: 100%;}
    .money_box {width: 50%; padding: calc(100vw*(8/360)) calc(100vw*(25/360));}
    .money_box img{display: none;}
    .money_box span {font-size: calc(100vw*(14/360));}
    .money_box p {font-size: calc(100vw*(18/360)); margin-top: calc(100vw*(6/360)); color: #FFEFAD;}
    .gnb {margin-top: calc(100vw*(25/360));}
    .gnb li {padding: 0 calc(100vw*(24/360));}
    .gnb li a {font-size: calc(100vw*(18/360));}
    .logout_box {gap: calc(100vw*(8/360)); margin-top: calc(100vw*(20/360));}
    .logout_box button {width: calc(100vw*(100/360)); height: calc(100vw*(40/360)); font-size: calc(100vw*(13/360));}
    .mb_menu_list {border-top: 1px solid #FFEFAD; margin-top: calc(100vw*(25/360));}
    .mb_menu_list li a {width: 100%; padding: calc(100vw*(20/360)) calc(100vw*(30/360)); font-size: calc(100vw*(16/360));}
    .mb_menu_list li {border-bottom: 1px solid rgba(255,255,255,0.3);}
    .mb_menu_list li:last-child {border-bottom: none;}
}

/*오늘만 팝업*/
.popup.today{
    display: block;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 6px;
    transform: translate(-50%, -50%);
    z-index: 1100;
    border: 1px solid #FFEFAD;
}
.popup.today img{
    width: 100%;
    height: inherit;
}

.popup.today .close_wrap{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #8b600f;
    color: #fff;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 15px 5px;
}
.popup.today .close_wrap span input{
    -webkit-appearance: button;
}

.today_popup_close img{
    filter: brightness(1) invert(1);
}

@keyframes gradient {
    0% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}