@charset "utf-8";

/****************************************************************************************************************************************
공통
*****************************************************************************************************************************************/
body {position:relative; color:#fff; background:#001854;}

.contents {position:relative; margin:0 auto; padding:0; width: 100%;}
.container {position:relative; margin: 0 auto; padding:0 15px; width: 1680px; text-align: center;}

/* 버튼 */
.btn-blue {font-weight:600; color:#fff; background: #214375;}
.btn-white {font-weight:600; color:#000; background: #fff;}
.btn-skyblue {font-weight:600; color:#000; background: #80b3ff;}
.btn-green {font-weight:600; color:#fff; background: #5ab55e;}
.btn-redline {font-weight:600; color:#f44336; background: transparent; border: 1px #f44336 solid; border-radius: 5px;}

@media (hover: hover) and (pointer: fine) {
   .btn-white:hover {filter: brightness(0.9);}
}

/****************************************************************************************************************************************
header 시작
*****************************************************************************************************************************************/
header {position: fixed; top: 0; left:0; right: 0; z-index: 99; margin:0 auto; padding:0 15px; width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center; background: #001854; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);}

/* hd-logo */
.hd-logo {position: relative;}
.hd-logo > img {width: 189px; cursor: pointer;}

/* sideBar-wrap */
.sideBar-wrap {position: relative; flex:1; display: flex; justify-content: space-between; align-items: center;}

/* 모바일 로고 및 닫기 */
.mo-side-top {display:none; position: relative; margin:0 auto; padding:10px 0 0 0; width: 100%; text-align: center;}
.mo-sideclose {position: absolute; top:10px; left:10; cursor: pointer;}
.mo-sideclose > i, .mo-sideclose > svg {font-size: 30px;}
.mo-logo {margin:0 auto; padding:10px 0; width: 100%; text-align: center;}
/* 햄버거(모바일 사이드) 로고 — 업체요청(PPT 9, 2026-10-01): 30px 는 너무 작다 → 48px.
   height 만 키우면 비율은 그대로다(로고는 가로가 긴 이미지). 드로어는 모바일에서만 뜨므로
   미디어쿼리로 나누지 않고 기본값 하나만 둔다 — 두 곳에 두면 한쪽만 고치는 회귀가 난다. */
.mo-logo > img {height:48px; cursor: pointer;}
.mo-profileBtn {margin:20px 0 10px 0; padding:10px 0; width: 100%; text-align: center; font-size: 16px; font-weight: bold; border-radius: 5px;}

/* 즐겨찾기 */
.favorite-zone {position: relative; margin-left:30px; display: flex; justify-content:flex-start; align-items: center; cursor: pointer;}
.favorite-zone > i, .favorite-zone > svg {margin-right:5px; font-size: 15px;}
.favorite-zone > span {font-size: 15px;}

/* top-menu */
ul.top-menu {position: relative; top:2px; height: 90px; display: flex; justify-content:flex-end; align-items: center; gap:15px;}
ul.top-menu > li {margin:0; padding:5px 8px; min-width: 110px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;background:#001854; border-radius: 8px; box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.2); cursor: pointer;}
ul.top-menu > li > img {display:block; margin:0 auto; width: 38px; text-align: center;}
ul.top-menu > li > p {margin-top:3px; font-size: 16px; font-weight: 600;}
ul.top-menu > li.active {background: #0c2973;}

/* mo-logout */
.mo-logout {display:none; position:absolute; bottom:15px; left: 10px; right:10px; margin:0 auto; padding:10px 0; width:calc(100% - 20px); text-align: center; font-size: 16px; font-weight: bold; border-radius: 8px;}

/* before-btns */
.before-btns {position: relative; display: flex; justify-content:flex-end; align-items: center; gap:5px;}
.before-btns > button {padding:8px 10px; min-width: 120px; border-radius: 5px;}

/* after-wrap */
.after-wrap {position: relative; display: flex; justify-content:flex-end; align-items: center; gap:10px;}
.my-credit {position: relative; margin:0; padding:0; display: flex; align-items: center; gap: 5px;}
.my-credit > span {font-size: 20px; font-weight: 600; color:#fff;}
.after-wrap > button {width:80px; height: 36px; line-height: 36px; border-radius: 5px;}

.after-info {position: relative;}
.btn-user {width: 36px; height: 36px; background: #001854; border: 1px #fff solid; border-radius: 5px;}
.btn-user > i, .btn-user > svg {color:#fff; font-size: 20px;}

ul.top-drop {display: none; position: absolute; top:40px; right: 0; z-index: 99; margin:0 auto; padding:5px 5px; width: 140px; background: #fff; border-radius: 5px;}
ul.top-drop > li {position: relative; margin: 0; padding:0 8px; width: 100%; height: 36px; display: flex; justify-content: flex-start; align-items: center; gap:5px; font-weight: 600; color:#0c2973; cursor: pointer;}
ul.top-drop > li > i, ul.top-drop > li > svg {color:#0c2973;}

/* mo-bar */
.mo-bar {display:none; width: 30px; cursor: pointer;}
.mo-bar span {display: block; margin: 6px 0; height: 3px; background: #fff;}
.mo-bar span:nth-child(1) {animation: random1 0.9s linear infinite;}
.mo-bar span:nth-child(2) {animation: random2 1.3s linear infinite; animation-delay: 0.2s;}
.mo-bar span:nth-child(3) {animation: random3 1.7s linear infinite; animation-delay: 0.4s;}

@keyframes random1 {
    0%   {width: 100%;}
    15%  {width: 60%;}
    33%  {width: 85%;}
    55%  {width: 40%;}
    72%  {width: 90%;}
    100% {width: 100%;}
}

@keyframes random2 {
    0%   {width: 70%;}
    20%  {width: 100%;}
    38%  {width: 50%;}
    60%  {width: 95%;}
    85%  {width: 30%;}
    100% {width: 70%;}
}

@keyframes random3 {
    0%   {width: 90%;}
    25%  {width: 40%;}
    45%  {width: 80%;}
    65%  {width: 35%;}
    88%  {width: 75%;}
    100% {width: 90%;}
}

@media (hover: hover) and (pointer: fine) {
    /* mo-bar */
    .mo-bar:hover span {animation-play-state: paused;}

    ul.top-menu > li:hover,
    .btn-user:hover {background: #0c2973;}
    .before-btns > button:hover {filter: brightness(0.9);}

    ul.top-drop > li:hover {background: #ededed;}
}

/****************************************************************************************************************************************
top-banner
*****************************************************************************************************************************************/
.top-banner {position: relative; margin:80px auto 10px auto; padding:0; width: 100%; background: #001854;}

/****************************************************************************************************************************************
top-sticky 시작
*****************************************************************************************************************************************/
.top-sticky {position: relative; z-index: 9; margin:0 auto; padding:0; width: 100%; text-align: center; transition: all 0.3s ease; transform: translateY(-10px);}
.top-sticky.sticky {position: fixed; top: 80px; z-index: 9; padding-bottom:10px; transform: translateY(0); background: #001854;}
.top-sticky.sticky::before {content: ''; position:absolute; left:0; right:0; bottom:5px; z-index: 1; margin:0 auto; width: 500px; height: 5px; background: linear-gradient(90deg, #3f91fd 0, #0c2973 50%, #0c2973 125%, #001854 180%);  border-radius: 4px;}

/* notice */
.notice {position:relative; margin:0 auto; padding:12px 0 8px 0; width: 100%; background: radial-gradient(circle at 50% 50%, #0c2973, #001854); background-position: 70% 100%; background-repeat: no-repeat;}
.notice marquee {font-weight: 600; color: #fff;}
.notice marquee > span {margin-right:15px; font-weight: 600; color: #fff;}

/* nav */
.nav {position: relative; margin: 0 auto; padding:10px 0; width: 100%; text-align: center; background:#001854;}
ul.nav-menu {position: relative; margin:5px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
ul.nav-menu > li {position: relative; margin: 0; padding: 6px; width: 92px; height: 92px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #00113b; border-radius: 8px; box-shadow: 0 0 2px #3f91fd; cursor: pointer;}
ul.nav-menu > li > img {width: 45px;}
ul.nav-menu > li > p {position: relative; margin:5px auto 0 auto; width: 100%; text-align: center; font-weight: 600;}
ul.nav-menu > li.active {background: #3f91fd;}

@media (hover: hover) and (pointer: fine) {
    ul.nav-menu > li:hover {background: #3f91fd;}
}

/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {position: relative; margin:50px auto 0 auto; padding:40px 40px; width: 100%; text-align: center; background:#000e32; border-top: 2px #fff solid;}
footer > h3 {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center; font-size: 30px; font-weight: bold; color:#fff;}
.products {position: relative; margin:20px 0; padding:0; width: 100%; text-align: center;}
.products > img {height: 70px; margin-right: 10px;}

.ft-logo {position: relative; margin:30px auto; padding:0; width: 100%; text-align: center;}
.ft-logo > img {display:block; margin:10px auto; padding:0;}
.ft-logo > .logo-img {width: 250px;}
.ft-logo > .aware-img {width: 300px;}

.ft-copyright {position: relative; margin:30px auto; padding:0; width: 100%; text-align: center;}
.ft-copyright > p {font-size: 16px;}

ul.ft-menu {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
ul.ft-menu > li {position: relative; margin:0; padding:0 15px; line-height: 24px; font-size: 12px; font-weight: 400; color:#000; background: #fff; border-radius: 20px;}

/* mo-footer */
.mo-footer {display:none; position: fixed; left: 0; right:0; bottom:0; z-index: 9; margin: 0; padding:0; width: 100%; height: 70px;}
.mo-left,
.mo-right {position:relative; display: inline-flex; flex: 1 1 0; min-width: 0; height: 100%; background: #fff; border-top: 1px solid #fff;}
.mo-left {border-top-right-radius: 30px;}
.mo-right {border-top-left-radius: 30px;}

.moft-menu {position:relative; z-index: 1; margin: 0; width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer;}
.moft-menu > img {width: 32px;}
.moft-menu > p {font-size:12px; letter-spacing: -1px; color:#000;}

.moft-cen {position: relative; flex: 0 0 140px; display: flex; justify-content: center; align-items: flex-end; margin:0 -1px; width: 140px; height: 50%; background: transparent; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; box-shadow: 0 30px 0 20px #fff;}
.moft-cen > .moft-menu,
.moft-cenMenu {position: absolute; left: 50%; bottom: -35px; transform: translateX(-50%); width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #0c2973; border-radius: 50%; cursor: pointer;}
.moft-cen > .moft-menu {z-index: 2;}
.moft-cen > .moft-menu > p {color:#fff;}
.moft-cenMenu > img {width: 32px;}

/****************************************************************************************************************************************
left-fixed 시작
*****************************************************************************************************************************************/
.left-fixed {position: fixed; top:50%; right: 0; z-index: 9; transform:translateY(-50%); transition: right 0.3s ease;}
ul.fixed-menu {position:relative; margin:0; padding:15px 15px; width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center;background: rgba(0,0,0,0.8); border-radius: 8px 0 0 8px;}
ul.fixed-menu > li {position:relative; margin:10px 0; padding:0; cursor: pointer;}

/* launch-btn */
.launch-btn {position: absolute; left:-50px; top: 50%; transform: translateY(-50%); width: 50px; height: 120px; transition: transform 0.3s ease; overflow: hidden;}
.launch-bg {position: absolute; top: 50%; left: 25px; transform: translateY(-50%) rotate(-45deg); width: 100px; height: 100px; background:#fff; border-radius: 25px;}
.launch-btn > i, .launch-btn > svg {position: absolute; left:26px; top: 50%; z-index: 1; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform 0.3s ease;font-size: 30px; color:#000;}

.left-fixed.hide {right:-80px;}
.left-fixed.hide .launch-btn > i, .left-fixed.hide .launch-btn > svg {left:26px; top: 50%; transform: translateY(-50%) rotate(180deg);}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1710px) {
    .container {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:1270px) {
    /* header */
    header {padding:0 10px; height:60px;}
    .hd-logo > img {width: 150px;}
    .mo-bar {display: block;}
    .hd-logo {flex:1; margin-right: 0;}

    .top-sticky.sticky {top:60px;}

    .sideBar-wrap {display: none;}
    .sideBar-wrap.active {display:block; position: fixed; left: 0; right: 0; top:0; bottom: 0; z-index: 9999; padding:0 10px; width: 100%; height:100%; background: #001854;}
    .mo-side-top {display:block;}

    /* 즐겨찾기 */
    .favorite-zone {margin:0 0 20px 0; padding:10px 0; width: 100%; justify-content: center; font-weight: bold; border:1px #fff solid; border-radius: 5px;}

    /* top-menu */
    ul.top-menu {top:unset; height: unset; flex-direction: column; justify-content: flex-start;}
    ul.top-menu > li {padding:10px 15px; min-width: 100%; flex-direction:unset; justify-content: flex-start; border-left:5px #556a9d solid; border-radius: 10px; overflow:hidden;}
    ul.top-menu > li > img {display: inline-block; margin: 0 8px 0 0; width: 30px;}
    ul.top-menu > li > p {margin-top:0; font-size: 16px; font-weight: 600;}

    /* mo-logout */
    .mo-logout {display:block;}

    .before-btns,
    .after-wrap {margin: 0;}

    /* before-btns */
    .before-btns > button {padding:5px 5px; min-width: 60px; font-size: 12px;}

    /* after-wrap */    
    .after-wrap {gap:0;}
    .after-wrap > button {margin-left:5px; width: 55px; height: 30px; line-height: 30px;}
    .my-credit > span {font-size: 15px; letter-spacing: -1px;}
    .btn-user {display: none;}

    /* top-banner */
    .top-banner {margin:60px auto 10px auto;}

    /* nav */
    .nav {padding:10px 10px;}
    
    /* footer */
    footer {padding:40px 40px 100px 40px;}
    .mo-footer {display: flex; align-items: center;}
}/* 미디어쿼리문 끝 */

@media (max-width:960px) {
    .container {padding:0 10px;}
    
    /* nav */
    ul.nav-menu > li {padding:0; width: 85px; height: 75px;}
    ul.nav-menu > li > img {width: 35px;}
    ul.nav-menu > li > p {letter-spacing: -1px;}
}/* 미디어쿼리문 끝 */

@media (max-width:850px) {
    /* header */
    .top-sticky.sticky::before {display:none;}

    /* nav — 업체요청(PPT 8, 2026-10-01): 모바일에서 카지노/슬롯 메뉴가 좌측에 붙어 스크롤되는 문제.
       원인은 항목 수와 무관하게 폭을 900px 로 고정한 것이다(원본 템플릿은 카테고리가 10개였다).
       🔴 플레이스홀더 카테고리를 숨긴 뒤로 항목이 2개뿐이라 900px 안에서 왼쪽에 몰려 보였다.
       → 내용폭(max-content)으로 두고 화면보다 좁으면 중앙 정렬. 항목이 많아지면 예전처럼 스크롤된다. */
    .nav {overflow-x: auto;}
    ul.nav-menu {width: max-content; min-width: 100%; justify-content: center;}

    /* footer */
    footer {padding:40px 10px 100px 10px;}
    footer > h3 {font-size: 24px;}
    .products > img {margin:5px 5px; height: 50px;}
    ul.ft-menu > li {padding:0 8px; letter-spacing: -1px;}
}/* 미디어쿼리문 끝 */

/* ── 내 정보 드롭다운 가독성 (업체 요청 2026-09-26 · BIG CHANCE PPT 11) ──
   🔴 ul.top-drop 은 background:#fff 인데 **color 지정이 없다.** 헤더가 흰 글씨(color:#fff)를
      쓰는 탓에 상속으로 흰 배경에 흰 글씨가 되어 항목이 거의 안 보였다.
      배경을 바꾸는 대신 **글자색을 고정**한다 — 흰 패널은 원본 디자인 그대로 둔다. */
ul.top-drop {color:#0c2973;}
ul.top-drop > li {color:#0c2973;}
ul.top-drop > li:hover {color:#091d52;}