body {
     margin: 0px !important;
}
/* 기존 asp 사이트 css 그대로 가져온것 */
 .game_btns {
     height: 20px;
     padding: 1px 3px;
     display: inline-block;
     font-size: 11px;
     border: 1px solid #a9bcce;
     color: #6a8198 !important;
     vertical-align: middle;
}
 .my_ico5{
    display:inline-block;
    top:13px;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#15bdc8;
    text-align:center;
    color:#fff;
    font:600 24px tahoma;
    line-height:52px
}
 .my_ico4{
    display:inline-block;
    top:13px;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#c2c3c7;
    text-align:center;
    color:#fff;
    font:600 24px tahoma;
    line-height:52px
}
 .my_ico3{
    display:inline-block;
    top:13px;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#e4b541;
    text-align:center;
    color:#fff;
    font:600 24px tahoma;
    line-height:52px
}
 .my_ico2{
    display:inline-block;
    top:13px;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#e44f77;
    text-align:center;
    color:#fff;
    font:600 24px tahoma;
    line-height:52px
}
 .my_ico1{
    display:inline-block;
    top:13px;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#7d6eb1;
    text-align:center;
    color:#fff;
    font:600 24px tahoma;
    line-height:52px
}
 .my_ico0{
    display:inline-block;
    top:13px;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#cc0000;
    text-align:center;
    color:#fff;
    font:600 24px tahoma;
    line-height:52px
}
/* 커스템 체크박스 */
 .ant-checkbox-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     cursor: pointer;
}
 .ant-checkbox-input-custom {
     position: absolute;
     opacity: 0;
     inset: 0;
     cursor: pointer;
}
 .ant-checkbox-inner {
     width: 16px;
     height: 16px;
     border: 1px solid #d9d9d9;
     border-radius: 2px;
     background: #fff;
     transition: all 0.2s;
}
/* 체크됨 */
 .ant-checkbox-input-custom:checked + .ant-checkbox-inner {
     background: #1677ff;
     border-color: #1677ff;
}
 .ant-checkbox-input-custom:checked + .ant-checkbox-inner::after {
     content: "";
     position: absolute;
     left: 4px;
     top: 1px;
     width: 5px;
     height: 9px;
     border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
}
/* 테이블 하단 더보기 버튼 */
 .table-more-wrap {
     width: 100%;
}
 .table-more-btn {
     width: 100%;
     height: 48px;
     background: #fff;
    /* 상단 포함 전체 테두리 */
     border: 1px solid #d9d9d9;
     cursor: pointer;
     font-size: 14px;
     color: #595959;
}
 .table-more-btn:hover {
     background: #fafafa;
     color: #216ED7;
}
/* 슬라이드 높이 자동 */
 .slick-slide {
     height: auto !important;
}
 .slick-slide img {
     width: 100%;
     height: 220px !important;
    /* 원하는 값 */
     object-fit: cover;
}
/* Slick의 높이 계산 버그 방지 */
 .slick-track {
     display: flex !important;
}
/* 주변 영역 침범 방지 */
 .slick-list {
     overflow: hidden !important;
}
 .ant-carousel .slick-dots {
     bottom: 10px !important;
    /* 원하는 값으로 조절 */
}
/* 컨텐츠 내용 h1 타이틀 부분이 밑으로 내려가는거 조절 */
 .ant-flex h1{
     margin-top:0px !important;
}
 .ant-col h1{
     margin-top:0px !important;
}
/* 컨테이너 (.game-slider-area) 설정 */
 .game-slider-area {
    /* 최종 강제: 모든 상위 스타일(Flexbox 포함)을 초기화 */
     all: unset;
     display: block !important;
     box-sizing: border-box !important;
    /* 스크롤 및 너비 설정 */
     width: 100% !important;
     min-width: 0 !important;
     overflow-x: scroll !important;
     overflow-y: hidden !important;
     white-space: nowrap !important;
    /* 항목을 강제로 한 줄에 배치 */
     padding: 0 !important;
     margin: 0 !important;
    /* 드래그 및 스크롤바 설정 */
     touch-action: none !important;
     -ms-overflow-style: none;
     scrollbar-width: none;
     cursor: grab !important;
     user-select: none !important;
}
 .game-slider-area::-webkit-scrollbar {
     display: none;
}
/* a 태그들 (자식 항목) 설정: 정렬 및 마진 유지 */
 .game-slider-area > a {
     display: inline-flex !important;
    /* inline-block + flex 속성 */
     align-items: center !important;
     justify-content: center !important;
     width: auto !important;
     margin-left: 12px !important;
     margin-right: 0 !important;
     margin-bottom:5px !important;
     flex-shrink: unset !important;
    /* 버튼 높이(수직 정렬) */
     line-height: normal !important;
     height: 33px !important;
}
/* 제스처 첫 번째 항목의 마진 설정 유지 */
 .game-slider-area > a:first-child {
     margin-left: 20px !important;
}
/* 총 마일리지 텍스트가 들어있는 첫 번째 버튼(.ant-btn-compact-first-item)을 선택 */
 .ant-space-compact .ant-btn-compact-first-item {
    /*오른쪽 위 라운딩 제거 */
     border-top-right-radius: 0 !important;
    /*오른쪽 아래 라운딩 제거 */
     border-bottom-right-radius: 0 !important;
}
/* 메인 상단 마일리지 새로고침 버튼 (마지막 항목) 왼쪽 라운딩 제거 */
 .ant-space-compact .ant-btn-compact-last-item {
    /* ant-btn-circle 등에 의해 강제되는 라운딩을 무효화 */
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
}
/* 모달 배경 및 중앙 정렬 */
 .modal-mask {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.45);
     display: flex;
     justify-content: center;
     align-items: flex-start;
    /* 상단에서 시작하도록 변경 (모바일에서 키보드 올라올 때 대비) */
     padding-top: 10vh;
    /* 상단 여백 추가 */
     box-sizing: border-box;
     z-index: 1000;
     overflow-y: auto;
    /* 내용이 길어지면 스크롤 가능하도록 */
}
/* 모달 컨테이너 (반응형 적용) */
 .modal {
     background: white;
     border-radius: 8px;
     width: 100%;
    /* 기본적으로 전체 너비를 사용 */
     max-width: 520px;
    /* 최대 너비는 520px 유지 */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     margin: 0 16px;
    /* 좌우 여백 추가 (모바일 환경에서 꽉 차는 문제 해결) */
}
/* 모달 헤더 (X 버튼 포함) */
 .modal-header {
     padding: 16px 24px;
     border-bottom: 1px solid #f0f0f0;
     position: relative;
    /* X 버튼 위치 지정을 위해 */
}
 .modal-title {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     text-align: center;
}
/* X 닫기 버튼 스타일 */
 .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: none;
     border: none;
     cursor: pointer;
     font-size: 20px;
     line-height: 1;
     color: #888;
}
/* 폼 스타일 */
 .modal-body {
     padding: 24px;
}
 .form-item {
     margin-bottom: 24px;
}
 .form-item-label label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
}
 .required::after {
     content: '*';
     color: #ff4d4f;
    /* Ant Design 기본 빨간색 */
     margin-left: 4px;
}
 .input-text, .select-box {
     width: 100%;
    /* 두 입력 필드의 너비를 100%로 통일 */
     padding: 8px 12px;
     border: 1px solid #d9d9d9;
     border-radius: 6px;
     box-sizing: border-box;
    /* 패딩이 너비에 포함되도록 */
}
 .small-text {
     font-size: 12px;
     color: #888;
     margin-left: 5px;
}
/* 모달 푸터 */
 .modal-footer {
     padding: 10px 16px;
     border-top: 1px solid #f0f0f0;
     text-align: right;
}
 .button-default {
     padding: 8px 15px;
     border: 1px solid #d9d9d9;
     background-color: white;
     border-radius: 6px;
     cursor: pointer;
     margin-right: 8px;
}
 .button-primary {
     padding: 8px 15px;
     border: none;
     background-color: #1890ff;
     color: white;
     border-radius: 6px;
     cursor: pointer;
}
/* 모달 숨기기/보이기 상태 */
 .hidden {
     display: none;
}
/* 검색창 전체 컨테이너 설정 */
 .search-container {
     padding: 10px 0;
     width: 100%;
     max-width: 500px;
    /* 검색창의 최대 너비 설정 */
     margin: 0 auto;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}
/* 입력 그룹 (Flexbox) */
 .input-group {
     display: flex;
     border: 1px solid #d9d9d9;
    /* 외부 테두리 색상 */
     border-radius: 6px;
     overflow: hidden;
     align-items: center;
}
/* 셀렉트 박스 컨테이너 및 화살표 위치 설정 */
 .input-group-prepend {
     position: relative;
    /* 화살표 가상 요소의 기준점 */
     border-right: 1px solid #d9d9d9;
    /* 입력창과의 구분선 */
     background-color: #fafafa;
    /* 배경색 */
}
 .form-control-select {
     border: none;
    /* 패딩 조정: 오른쪽 패딩을 넓혀서 화살표 공간 확보 */
     padding: 0 25px 0 12px;
     height: 38px;
     line-height: 38px;
     background-color: transparent;
    /* 컨테이너 배경색을 따르도록 투명 설정 */
     cursor: pointer;
     outline: none;
     font-size: 14px;
     color: #000000d9;
    /* 기본 브라우저 드롭다운 아이콘 제거 */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}
/* 드롭다운 화살표 CSS (::after 가상 요소 사용) */
 .input-group-prepend::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 8px;
    /* 오른쪽에서 띄우기 */
     width: 0;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 5px solid #8c8c8c;
    /* 화살표 모양과 색상 */
     transform: translateY(-50%);
     pointer-events: none;
    /* 클릭 이벤트가 select 요소로 전달되도록 설정 */
}
/* 검색어 입력 필드 */
 .form-control-input {
     flex-grow: 1;
     border: none;
     padding: 0 12px;
     height: 38px;
     line-height: 1.5;
     outline: none;
     font-size: 14px;
     color: #000000d9;
}
 .form-control-input::placeholder {
     color: #bfbfbf;
}
/* 검색 버튼 컨테이너 */
 .input-group-append {
     border-left: 1px solid #d9d9d9;
    /* 입력창과의 구분선 */
}
 .search-button {
    /* 배경 흰색에 회색 돋보기 스타일 */
     background-color: #fafafa;
    /* 버튼 배경색 (흰색과 유사) */
     color: #595959;
    /* 돋보기 아이콘 (텍스트) 색상 - 진한 회색 */
     border: none;
     padding: 0 12px;
     height: 38px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     transition: background-color 0.3s;
}
 .search-button:hover {
     background-color: #e6e6e6;
    /* 마우스 오버 시 약간 어두워짐 */
}
/* 돋보기 아이콘 스타일 */
 .search-icon {
     display: inline-block;
     font-size: 18px;
     line-height: 1;
}
/* 부모 .ant-select 영역 100% 너비 */
 .ant-select {
     width: 100%;
     position: relative;
     display: inline-block;
     font-size: 14px;
     line-height: 1.5715;
     box-sizing: border-box;
}
/* custom wrapper */
 .custom-ant-select {
     width: 100%;
     position: relative;
}
/* 실제 select */
 .custom-ant-select select {
     width: 100%;
     padding: 6px 32px 6px 12px;
    /* 오른쪽 공간 충분히 확보 */
     font-size: 14px;
     line-height: 20px;
     height: 32px;
    /* 화살표와 맞춰서 고정 */
     border: 1px solid #d9d9d9;
     border-radius: 2px;
     background-color: #fff;
     color: rgba(0,0,0,0.85);
     appearance: none;
     cursor: pointer;
     box-sizing: border-box;
}
/* Hover / Focus */
 .custom-ant-select select:hover {
     border-color: #40a9ff;
}
 .custom-ant-select select:focus {
     border-color: #40a9ff;
     box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
     outline: none;
}
/* 화살표 스타일 */
 .ant-select-arrow {
     position: absolute;
     top: 0;
     right: 12px;
     height: 100%;
     display: flex;
     align-items: center;
    /* vertical center */
     pointer-events: none;
}
/* SVG 크기 조절 */
 .ant-select-arrow svg {
     width: 1em;
     height: 1em;
     fill: currentColor;
}
 .acss-15f0ho1 {
     font-weight: 700;
    /* 일반 bold보다 조금 더 두껍게 */
     color: #222;
    /* 기본보다 진한 색상으로 강조 */
    /* 선택 사항: 그림자 효과로 살짝 더 강조 */
     text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
/* 마이룸 오른쪽에 레이어 열릴때 body 스크롤 안되게 하기 */
 html.drawer-open, body.drawer-open {
     overflow: hidden !important;
     height: 100%;
}
 .ant-drawer {
     display: none;
}
 .ant-drawer.ant-drawer-open {
     display: block;
}
/* 테이블 스타일 */
 .tbl {
     border-spacing: 0px;
     border-top: 1px solid #dbe8f0;
     margin: 0 0 60px;
     font-size: 13px;
     width: 100%;
     max-width: 820px;
     table-layout: fixed;
}
 .tbl th {
     text-align: center;
     padding: 12px 15px;
     line-height: 1.6;
     font-weight: 600;
     border-bottom: 1px solid #dbe8f0;
     border-left: 1px solid #dbe8f0;
     color: #111;
     background: #eff9ff;
}
 .tbl td {
     text-align: center;
     padding: 10px 12px;
     line-height: 1.6;
     border-left: 1px solid #dbe8f0;
     border-bottom: 1px solid #dbe8f0;
     vertical-align: top;
}
 .tbl th:first-child, .tbl td:first-child {
     border-left: 0;
}
 .tbl tfoot td {
     background: #eff9ff;
     padding: 15px 0;
     text-align: center;
}
/* select 박스 스타일 (Ant Design 느낌) */
 .select-box, .seltxt {
     height: 32px;
     padding: 0 11px;
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     font-size: 14px;
     outline: none;
     transition: all 0.2s;
     width: 100%;
     box-sizing: border-box;
}
 .select-box:focus, .seltxt:focus {
     border-color: #40a9ff;
     box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
}
/* tip 텍스트 스타일 */
 .tip {
     padding: 3px 0;
     color: #ed4949;
     font-size: 13px;
     letter-spacing: -1px;
     margin-bottom: 4px;
}
/* total 금액 스타일 */
 .total {
     font-weight: 600;
     color: #111;
     font-size: 16px;
     margin-top: 8px;
}
 .total strong {
     color: #ed4949;
}
/* 설명 텍스트 */
 .char_ser dd {
     margin: 4px 0 0 0;
     font-size: 13px;
     color: #595959;
}
 .char_ser dd .fb {
     font-weight: bold;
     color: #1890ff;
}
/******** 파일업로드 부분 ***********/
/* 전체 tip 텍스트 스타일 */
 .tip {
     font-size: 14px;
     color: #595959;
     margin-bottom: 8px;
}
/* 파일 input 스타일 */
 .inptxt {
     width: 100%;
     max-width: 500px;
     height: 32px;
     padding: 4px 11px;
     font-size: 14px;
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     outline: none;
     transition: all 0.2s;
     box-sizing: border-box;
}
 .inptxt:focus {
     border-color: #40a9ff;
     box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
}
/* 파일 input margin */
 #file_view1, #file_view2, #file_view3, #file_view4 {
     margin-top: 8px;
}
/* 버튼 스타일 */
 .tmp_btn {
     display: inline-block !important;
     margin-top: 10px !important;
     margin-right: 8px !important;
     padding: 4px 15px !important;
     font-size: 14px !important;
     line-height: 1.5 !important;
     border-radius: 4px !important;
     border: 1px solid #d9d9d9 !important;
     cursor: pointer !important;
     text-decoration: none !important;
     transition: all 0.2s !important;
}
 .tmp_btn.white {
     background-color: #fff !important;
     color: #000 !important;
}
 .tmp_btn.white:hover {
     color: #1890ff !important;
     border-color: #1890ff !important;
}
/* Ant Design col 요소 */
 :where(.css-xb7myp).ant-col-18 {
     display: block;
     width: 100%;
     max-width: 75%;
     flex: 0 0 auto;
     margin: 0 auto;
    /* PC에서도 가운데 정렬 */
}
/* 모바일 대응 */
 @media (max-width: 768px) {
     :where(.css-xb7myp).ant-col-18 {
         max-width: 100%;
    }
}
/* 반응형 */
 @media (max-width: 768px) {
    .tbl, .tbl thead, .tbl tfoot, .tbl tbody, .tbl th, .tbl td, .tbl tr {
         display: block;
         width: 100%;
    }
    .tbl thead {
         display: none;
    }    
    .tbl th {
         text-align: left;
         background-color: #eff9ff;
         border-bottom: none;
         border-left: none;
    }
    .tbl td {
         text-align: left;
         border-left: none;
         border-bottom: 1px solid #dbe8f0;
         padding: 10px 0;
         position: relative;
    }
    .tbl td:before {
         content: attr(data-label);
         font-weight: 600;
         display: block;
         margin-bottom: 4px;
         color: #111;
    }
}
 @media (max-width: 480px) {
     .custom-ant-select select {
         font-size: 13px;
         padding: 3px 10px;
    }
}
/* 상단 제목 영역 */
 .sub_tit {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     max-width: 1200px;
     margin: 0 auto 12px;
     padding: 0 16px;
     box-sizing: border-box;
}
 .sub_tit h4 {
     margin: 0;
     font-size: 18px;
     font-weight: 600;
}
/* 버튼 */
 .sub_tit .game_btn {
     font-size: 14px;
     padding: 6px 12px;
     white-space: nowrap;
}
/* 설명 영역 */
 .bosang_info {
     max-width: 1200px;
     margin: 0 auto;
     padding: 16px;
     box-sizing: border-box;
     background: #f9f9f9;
     border-radius: 8px;
}
 .bosang_info ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .bosang_info h4 {
     font-size: 15px;
     line-height: 1.6;
     margin: 0 0 6px;
     word-break: keep-all;
}
/* 금액 리스트 줄 간격 */
 .bosang_info li {
     font-size: 14px;
     line-height: 1.6;
}
/* 📱 모바일 반응형 */
 @media (max-width: 768px) {
     .sub_tit {
         flex-direction: column;
         align-items: flex-start;
         gap: 6px;
    }
     .sub_tit h4 {
         font-size: 16px;
    }
     .sub_tit .game_btn {
         font-size: 13px;
         padding: 5px 10px;
    }
     .bosang_info {
         padding: 12px;
    }
     .bosang_info h4 {
         font-size: 14px;
    }
     .bosang_info li {
         font-size: 13px;
    }
}
/* 체크 영역 정렬 */
 .bosang_write {
     display: flex;
     align-items: center;
     gap: 12px;
     list-style: none;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
    /* 모바일 줄바꿈 */
}
 .bosang_write li {
     display: flex;
     align-items: center;
}
/* 텍스트 */
 .bosang_write .info {
     flex-direction: column;
     align-items: flex-start;
}
 .bosang_write .not {
     font-size: 13px;
     color: #888;
     margin: 2px 0 0;
}
 .bosang_write .dan {
     font-size: 13px;
     color: #d00;
     margin: 0;
}
 .ant-pagination .ant-pagination-prev .ant-pagination-item-link, :where(.css-xb7myp).ant-pagination .ant-pagination-next .ant-pagination-item-link {
     padding-top:10px;
}
 .ant-pagination .ant-pagination-next .ant-pagination-item-link {
     padding-top:10px;
}
 .ant-picker-panels {
     display: flex;
     gap: 8px;
     position: absolute;
     z-index: 1000;
     background: #fff;
     border: 1px solid #d9d9d9;
     box-shadow: 0 6px 16px rgba(0,0,0,0.08);
     border-radius: 6px;
     padding: 12px;
}
 .ant-picker-panel {
     width: 220px;
    /* jQuery UI 달력 크기 */
}
/* ========================= 전체 래퍼 ========================= */
 .gs_list_wrap {
     width: 100%;
     max-width: 610px;
     position: relative;
     margin-top: 4px;
     font-size: 14px;
}
/* ========================= 드롭다운 영역 ========================= */
 .gs_list_area {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     background: #ffffff;
     border: 1px solid #d9d9d9;
     border-top: 0;
     border-radius: 0 0 6px 6px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
     z-index: 1000;
}
/* ========================= 컬럼 컨테이너 ========================= */
 .gm_list {
     display: flex;
     width: 100%;
}
/* ========================= 각 컬럼 ========================= */
 .gm_list > div {
     flex: 1;
     min-width: 0;
     padding: 8px;
     box-sizing: border-box;
     border-left: 1px solid #f0f0f0;
}
 .gm_list > div:first-child {
     border-left: none;
}
/* ========================= 컬럼 제목 ========================= */
 .gm_title {
     height: 28px;
     line-height: 28px;
     margin: 0;
     text-align: center;
     font-weight: 600;
     font-size: 13px;
     color: rgba(0, 0, 0, 0.88);
     background: #f5f5f5;
     border-radius: 4px;
}
/* ========================= 리스트 영역 ========================= */
 .gm_list ul {
     margin: 6px 0 0;
     padding: 0;
     list-style: none;
     max-height: 200px;
     overflow-y: auto;
}
/* ========================= 스크롤바 (AntD 느낌) ========================= */
 .gm_list ul::-webkit-scrollbar {
     width: 6px;
}
 .gm_list ul::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.25);
     border-radius: 4px;
}
 .gm_list ul::-webkit-scrollbar-track {
     background: transparent;
}
/* ========================= 리스트 아이템 ========================= */
 .gm_list ul li {
     padding: 6px 8px;
     border-radius: 4px;
     cursor: pointer;
     color: rgba(0, 0, 0, 0.85);
     transition: background 0.15s ease;
}
 .gm_list ul li:hover {
     background: #e6f4ff;
}
/* 선택 상태 */
 .gm_list ul li.active {
     background: #bae0ff;
     color: #0958d9;
     font-weight: 500;
}
/* ========================= 태블릿 (2컬럼) ========================= */
 @media (max-width: 768px) {
     .gm_list {
         flex-wrap: wrap;
    }
     .gm_list > div {
         width: 50%;
         border-left: none;
         border-top: 1px solid #f0f0f0;
    }
     .gm_list > div:nth-child(1), .gm_list > div:nth-child(2) {
         border-top: none;
    }
}
/* ========================= 모바일 (1컬럼) ========================= */
 @media (max-width: 480px) {
     .gm_list {
         flex-direction: column;
    }
     .gm_list > div {
         width: 100%;
         border-left: none;
         border-top: 1px solid #f0f0f0;
    }
     .gm_list ul {
         max-height: 160px;
    }
    /* 모바일 드로어 느낌 */
     .gs_list_area {
         position: fixed;
         left: 8px;
         right: 8px;
         bottom: 8px;
         top: auto;
         border-radius: 8px;
    }
}
/* ========================= 등장 애니메이션 ========================= */
 .gs_list_wrap {
     animation: antFadeIn 0.15s ease-out;
}
 @keyframes antFadeIn {
     from {
         opacity: 0;
         transform: translateY(-4px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 

/* ================================
   전체 스타일
================================= */
#main_popular_game {
  padding: 16px;
  box-sizing: border-box;
  background-color: #f8f8f8; /* 전체 배경색 설정 */
}

/* 기존 PC 리스트 */
#acss-lhkb2p {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* ================================
   모바일 탭 스타일
================================= */
.adm-capsule-tabs {
  display: none; /* 기본 숨김 */
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
  background-color: #f8f8f8; /* 배경색 맞춤 */
  border-radius: 12px;
  padding: 8px 0;
}

.adm-capsule-tabs-header {
  display: flex;
  align-items: center;
  position: relative;
}

.adm-capsule-tabs-tab-list {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 14px;   /* 버튼과 스크롤 분리 */
  margin-bottom: -6px;    /* 스크롤바 공간 보정 */
}

.adm-capsule-tabs-tab-wrapper {
  flex: 0 0 auto;
  margin-right: 8px;
}

.adm-capsule-tabs-tab {
  padding: 8px 16px;
  border-radius: 999px;
  background-color: #e0e0e0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  transition: background-color 0.3s, color 0.3s;
}

.adm-capsule-tabs-tab-active {
  background-color: #467fe1;
  color: #fff;
}

/* 끝부분 스크롤 마스크 */
.adm-scroll-mask-left,
.adm-scroll-mask-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
}

.adm-scroll-mask-left {
  left: 0;
  background: linear-gradient(to right, #f8f8f8, rgba(248,248,248,0));
}

.adm-scroll-mask-right {
  right: 0;
  background: linear-gradient(to left, #f8f8f8, rgba(248,248,248,0));
}

/* ================================
   모바일 전용
================================= */
@media (max-width: 767px) {
  /* PC 리스트 숨김 */
  .acss-lhkb2p {
    display: none;
  }
  
  /* 모바일 탭 표시 */
  .adm-capsule-tabs {
    display: block;
  }
}

/* ================================
   모바일 스크롤바 커스텀
================================= */
.adm-capsule-tabs-tab-list::-webkit-scrollbar {
  height: 5px;            /* 얇게 */
}

.adm-capsule-tabs-tab-list::-webkit-scrollbar-track {
  background: transparent;
}

.adm-capsule-tabs-tab-list::-webkit-scrollbar-thumb {
  background-color: rgba(70, 127, 225, 0.6);
  border-radius: 999px;
}

.adm-capsule-tabs-tab-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(70, 127, 225, 0.9);
}
.adm-capsule-tabs-tab-list::-webkit-scrollbar-thumb {
  background-color: rgba(70, 127, 225, 0.35);
}

#content-container img {
    max-width: 100%;      /* 이미지가 부모 컨테이너를 넘지 않도록 제한 */
    width: auto;          /* 이미지의 가로 길이를 자동으로 조정 */
    height: auto;         /* 비율에 맞게 높이 자동 조정 */
    object-fit: contain;  /* 이미지가 컨테이너 크기에 맞도록 비율 유지 */
}

.ant-bubble-content img.memo_img {
    max-width: 260px;
    height: auto;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .ant-bubble-content img.memo_img {
        max-width: 100%;
        max-height: 40vh;
        object-fit: contain;
    }
}

/* 원래 버튼 스타일 */
.abtn2 {
    background-color: #fff;   /* 원래 버튼 배경 */
    color: red;               /* 원래 텍스트 */
    border: 1px solid red;
    transition: all 0.3s ease;
}

/* 깜빡임 적용: on 클래스가 있는 버튼만 */
.abtn2.on {
    animation: blinkRed 1.5s linear infinite;
}

/* 텍스트도 span 기준으로 깜빡임 */
.abtn2.on span {
    animation: blinkText 1.5s linear infinite;
}

/* 배경 깜빡임 */
@keyframes blinkRed {
    0%, 100% {
        background-color: #fff; /* 원래 배경 */
    }
    50% {
        background-color: red;  /* 깜빡일 때 배경 */
    }
}

/* 텍스트 깜빡임 */
@keyframes blinkText {
    0%, 100% {
        color: red; /* 원래 텍스트 */
    }
    50% {
        color: #fff; /* 깜빡일 때 텍스트 */
    }
}

/* 기본 스타일 */
.wtop-banarea {
    text-align: center;
    width: 100%;
    display: block;
    position: relative; /* 배너를 기준으로 자식 요소를 절대 배치 */
}

#TopBnr {
    background-color: #08AAF1;
    position: relative; /* 배너 내부의 자식 요소들이 절대 위치를 가질 수 있도록 설정 */
}

#TopBnr img {
    width: 100%; /* 이미지가 화면 크기에 맞게 축소 */
    height: auto; /* 비율 유지 */
}

#btn_topmenu_close {
    position: absolute; /* 배너 영역 안에서 고정 위치 */
    top: 10px; /* 이미지 상단에서 약간 떨어지도록 설정 */
    right: 10px; /* 이미지 오른쪽 끝에 위치 */
    cursor: pointer; /* 클릭 가능한 손 모양 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 반응형 디자인 - 768px 이하에서 적용 */
@media (max-width: 768px) {
    .wtop-banarea {
        padding: 10px; /* 화면이 작을 때 패딩 추가 */
    }

    #btn_topmenu_close {
        font-size: 4px; /* 닫기 버튼 텍스트 크기 줄이기 */
        top: 8px; /* 작은 화면에서 버튼 위치 약간 조정 */
        right: 8px; /* 버튼 위치 조정 */
    }
}

/* 반응형 디자인 - 480px 이하에서 적용 */
@media (max-width: 480px) {
    .wtop-banarea {
        padding: 5px; /* 화면이 더 작을 때 패딩 추가 */
    }

    #btn_topmenu_close {
        font-size: 4px; /* 작은 화면에서 텍스트 크기 더 줄이기 */
        top: 5px; /* 버튼 위치 더 조정 */
        right: 5px; /* 버튼 위치 더 조정 */
    }
}

/* 선택된 라디오 버튼의 내부 점 표시 */
.ant-radio-inner::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 8px; /* 점의 크기 */
    height: 8px;
    margin-top: -4px; /* 높이의 절반만큼 보정 */
    margin-left: -4px; /* 너비의 절반만큼 보정 */
    background-color: #fff; /* 하얀 동그란 점 */
    border-radius: 50%;
    content: "";
    transform: scale(0); /* 기본 상태에선 안보임 */
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.ant-radio-checked .ant-radio-inner::after {
    transform: scale(1);
    opacity: 1;
}

/* 선택된 라벨의 테두리 및 텍스트 색상 */
.ant-radio-wrapper-checked .ant-radio-inner {
    border-color: #1677ff;
}

.ant-radio-wrapper:hover .ant-radio-inner {
    border-color: #4096ff;
}

/* 라디오 버튼 기본 스타일 정리 */
.ant-radio-inner {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    transition: all 0.3s;
}

.ant-radio-inner::after {
    position: absolute;
    top: 3px;
    left: 3px;
    display: table;
    width: 8px;
    height: 8px;
    background-color: #1677ff;
    border-top: 0;
    border-left: 0;
    border-radius: 8px;
    transform: scale(0);
    opacity: 0;
    content: "";
    transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

/*  asp 공통   */
.pr15{padding:0 15px 0 0}
.fg{color:#222!important}
.fb{color:#1534FD!important}
.fc{color:#ff6633!important}
.fr{color:#ed4949!important}
.fb2{color:#277fe8!important}
.fb3{color:#35ac59!important}

.f_blue{color:#056400!important}

.f_blue2{color:#056400!important}
.f_bold{font-weight:600}
.mb50{margin:0 0 50px}
.w600{width:600px}
.w500{width:500px}
.w540{width:540px}
.w300{width:300px}
.w200{width:200px}
.w120{width:120px}
.w100{width:100px}
.w110{width:110px}
.w150{width:150px}
.w80{width:80px}
.w70{width:70px}
.w60{width:65px}
.w50{width:55px}
.w40{width:40px}
.mt5{margin:5px 0 0 0}

.center-td {
    cursor: pointer;
}

.cell-inner {
    height: 100%;
    display: flex;
    flex-direction: column;      
    align-items: center;
    justify-content: center; 
}

.prd-img {
    width: 25px;
    margin-bottom: 6px;
}

.main_charge_list2 {
    display: flex;
    flex-direction: column; /* ul끼리는 세로로 쌓이게 */
    gap: 12px;
}

.pay-list {
    display: flex;
    flex-wrap: wrap; /* ul 내부는 필요 시 줄바꿈 허용 */
    gap: 12px;
    padding: 0;
    margin: 0 0 12px 0; /* ul 간격 */
    list-style: none;
    width: 100%;       /* ul이 부모 폭 전체 차지 */
    box-sizing: border-box;
}

.pay-list > li {
    display: flex;
    flex: 1 0 auto;
}

.pay-list > li button {
    width: 100%;
}

/* 브라우저 폭이 768px 이하이면 줄바꿈 허용 */
@media (max-width: 768px) {
    .pay-list {
        flex-wrap: wrap;
    }
    .pay-list > li {
        flex: 1 1 45%;   /* 2개씩 가로 정렬, 화면 좁아지면 줄바꿈 */
    }
}

/* 화면이 480px 이하이면 한 줄에 1개 */
@media (max-width: 480px) {
    .pay-list > li {
        flex: 1 1 100%;
    }
}

.save_price_select {
    display: flex;
    flex-wrap: wrap; /* ul 내부는 필요 시 줄바꿈 허용 */
    gap: 12px;
    padding: 0;
    margin: 0 0 12px 0; /* ul 간격 */
    list-style: none;
    width: 100%;       /* ul이 부모 폭 전체 차지 */
    box-sizing: border-box;
}

.save_price_select > li {
    display: flex;
    flex: 1 0 auto;
    width:20%;
}

.save_price_select > li button {
    width: 100%;
}

/* 브라우저 폭이 768px 이하이면 줄바꿈 허용 */
@media (max-width: 768px) {
    .save_price_select {
        flex-wrap: wrap;
    }
    .save_price_select > li {
        flex: 1 1 45%;   /* 2개씩 가로 정렬, 화면 좁아지면 줄바꿈 */
    }
}

/* 화면이 480px 이하이면 한 줄에 1개 */
@media (max-width: 480px) {
    .save_price_select > li {
        flex: 1 1 100%;
    }
}

#pay_divList8 {
    display: flex;
    gap: 8px;
}

/* ===============================
   MobileMenuModal 전체 컨테이너
   =============================== */
#MobileMenuModal.ant-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none; /* [보정] 닫혔을 때 클릭 방해를 막기 위해 기본 none */
    justify-content: flex-end;
    pointer-events: none;
}

/* 열림 상태 */
#MobileMenuModal.ant-drawer.is-open {
    display: flex !important;
    pointer-events: auto;
}

/* ===============================
   MobileMenuModal 배경 마스크
   =============================== */
#MobileMenuModal .ant-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: auto;
}

#MobileMenuModal.is-open .ant-drawer-mask {
    opacity: 1;
}

/* ===============================
   MobileMenuModal Drawer 본체 (우측 패널)
   =============================== */
#MobileMenuModal .ant-drawer-content-wrapper {
    position: relative;
    z-index: 1001;
    width: 378px;
    height: 100%;
    background: #141414;
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: auto;
}

#MobileMenuModal.is-open .ant-drawer-content-wrapper {
    transform: translateX(0);
}

#MobileMenuModal .ant-drawer-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #1f1f1f;
}

/* ===============================
   Header
   =============================== */
#MobileMenuModal .ant-drawer-header {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(253, 253, 253, 0.12);
}

#MobileMenuModal .ant-drawer-close {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 16px;
    cursor: pointer;
}

/* ===============================
   Body
   =============================== */
#MobileMenuModal .ant-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ===============================
   Menu
   =============================== */
#MobileMenuModal .ant-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #141414;
    color: rgba(255, 255, 255, 0.85);
}

#MobileMenuModal .ant-menu-item,
#MobileMenuModal .ant-menu-submenu-title {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    padding-left: 24px;
    cursor: pointer;
    transition: background 0.2s;
}

#MobileMenuModal .ant-menu-item:hover,
#MobileMenuModal .ant-menu-submenu-title:hover {
    background: rgba(255, 255, 255, 0.08);
}

#MobileMenuModal .ant-menu-item-group-title {
    padding: 12px 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

/* ===============================
   Sub Menu
   =============================== */
#MobileMenuModal .ant-menu-sub {
    display: none;
    padding: 0;
    list-style: none;
    background: #000;
}

#MobileMenuModal .ant-menu-submenu-open > .ant-menu-sub {
    display: block;
}

#MobileMenuModal .ant-menu-item-divider {
    height: 1px;
    margin: 4px 0;
    background: rgba(253, 253, 253, 0.12);
}

/* ===============================
   Submenu Arrow
   =============================== */
#MobileMenuModal .ant-menu-submenu-arrow {
    position: absolute;
    right: 20px;
    width: 10px;
    height: 10px;
}

#MobileMenuModal .ant-menu-submenu-arrow::before,
#MobileMenuModal .ant-menu-submenu-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.45);
    transition: transform 0.3s;
}

/* 닫힘 (V) */
#MobileMenuModal .ant-menu-submenu-arrow::before {
    transform: rotate(45deg) translateX(2px);
}
#MobileMenuModal .ant-menu-submenu-arrow::after {
    transform: rotate(-45deg) translateX(-2px);
}

/* 열림 (^) */
#MobileMenuModal .ant-menu-submenu-open .ant-menu-submenu-arrow::before {
    transform: rotate(-45deg) translateX(2px);
}
#MobileMenuModal .ant-menu-submenu-open .ant-menu-submenu-arrow::after {
    transform: rotate(45deg) translateX(-2px);
}

/* ===============================
   고정 오픈 (로그인)
   =============================== */
#MobileMenuModal .fixed-open > .ant-menu-sub {
    display: block !important;
}

/* 모바일/PC 화면에 따른 기본 표시 */
#fullScreenMenuModal { display: none; }
#MobileMenuModal { display: none; }

/* PC 사이즈일 때 모바일 메뉴 강제 숨김 */
@media (min-width: 768px) {
    #MobileMenuModal { display: none !important; }
}

/* 모바일 사이즈일 때 PC 메뉴 강제 숨김 */
@media (max-width: 767px) {
    #fullScreenMenuModal { display: none !important; }
}