@charset "utf-8";

body {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; color:#f8f8f8; background: #000 url('../img/bg-darkblue.jpg') center top repeat-y; background-size: cover;}

/****************************************************************************************************************************************
공통
*****************************************************************************************************************************************/
.cursor-pointer {cursor: pointer;}

/****************************************************************************************************************************************
Header
*****************************************************************************************************************************************/
header {position: relative; margin:0 auto; padding:0; width: 100%;}
/* 로고 */
.top-logo {position: absolute; top:0; left:0; right: 0; z-index: 99; margin:0 auto; padding:0; width: 280px; line-height:85px; text-align: center;}
.top-logo > img {cursor: pointer;}

/* tnb */
.tnb {position: relative; margin:0; padding:0; width: 100%; height: 85px; background: url('../img/top-bg.jpg') right top; background-size: 110% 100%; border-bottom: 1px #000 solid;}
.tnb-inner {position: relative; margin: 0; padding:0 15px; width: 100%; height: 85px; display: flex; justify-content: space-between; align-items: center;}

/* top-notice */
.top-notice {position: relative; margin:0; padding:5px 15px; width: 30%; height: 45px; display: flex; justify-content: flex-start; align-items: center; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 40px 40px;}
.top-notice > img {margin-right:5px;}
.top-notice > marquee {font-weight:bold; color:#f6b526;}

/* after-info */
.after-info {position: relative; margin: 0; padding:0; display: flex; justify-content: flex-end; align-items: center;}
.info-list {margin:0 5px; line-height:32px; font-size:18px; color:#fff; font-family: 'GmarketSans'; font-weight: 500;}
.info-list > img {margin-right:5px; width: 25px;}
.info-list > span {margin-right:5px; color: #ffcf3c; font-family: 'GmarketSans'; font-weight: 500;} 
.after-info > button {margin:0 0 0 5px; padding: 8px 20px 4px 20px; text-align: center; font-size: 13px; color:#fff; font-family: 'GmarketSans'; font-weight: 500; border-radius: 20px; cursor: pointer;}
.after-info > button.blue-bg {background:#04669f;}
.after-info > button.gray-bg {background:#555;}

/* nav */
.nav {position: relative; margin:0; padding:0; width: 100%; background: #050505; border-bottom: 1px solid #002044;}
.nav-inner {position: relative; margin: 0 auto; padding:0 15px; width: 1400px; text-align: center;}

ul.menu {position: relative; margin:0 auto; padding:0; width: 100%; height: 99px; display: flex; justify-content: center; align-items: center;}
ul.menu > li {position: relative; margin:0; padding: 62px 0 15px 0; width: 100%; height: 99px; text-align: center; font-size: 16px; font-family: 'GmarketSans'; font-weight: 600; border-right: 1px solid #0a1017; transition: all 0.3s 0s ease-in-out; cursor: pointer;}
ul.menu > li::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 2px; height: 50px; background: url('../img/top-bar.png') center center;}
ul.menu > li.game-menu {padding: 12px 0; box-shadow: 0px 0px 15px 5px #1e2f40 inset;}
ul.menu > li.game-menu::before {display: none;}
.game-icon {margin: 0 auto 10px auto; width: 40px; height: auto; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}

.nav-icon-off,
.nav-icon-on {position: absolute; top:10px; left:50%; transform: translateX(-50%); width: 30px; height: 30px; transition: all 0.3s 0s ease-in-out;}

.nav-icon-off {opacity: 1; top:20px;}
.nav-icon-on {opacity: 0; top:50px;}

@media (hover: hover) and (pointer: fine) {
    .top-logo:hover > img,
    .after-info > button:hover {filter: brightness(1.3);}

    ul.menu > li:hover {color: #fff084;}
    ul.menu > li.game-menu:hover {box-shadow: 0px 0px 15px 5px rgba(255,201,60,0.5) inset;}
    ul.menu > li.game-menu:hover .game-icon {animation: game-icon 0.15s linear infinite;}

    ul.menu > li:hover .nav-icon-off {opacity: 0; top:50px;}
    ul.menu > li:hover .nav-icon-on {opacity: 1; top:20px;}
}

@keyframes game-icon {
	50% {transform: translateX(3px) rotate(2deg);}
	100% {transform: translateX(-3px) rotate(-2deg);}
}

/* pc-hid */
.mo-bar,
.mo-user,
.tnb-close,
.nav-close {display: none;}

/****************************************************************************************************************************************
페이지 공통
*****************************************************************************************************************************************/
.container {position: relative; margin:0 auto; padding:0 15px; width: 1400px; text-align: center;}


/****************************************************************************************************************************************
footer
*****************************************************************************************************************************************/
footer {position: relative; margin:0 auto; padding:50px 15px; width: 100%; text-align: center; background: #000;}
.footer-text {position: relative; margin:0 auto 40px auto; width: 100%; text-align: center; line-height: 20px; font-size: 12px; font-weight: 300; letter-spacing: 0px; color: #424242;}
.ft-partners {position: relative;}
.copyright {position: relative; margin:15px auto 0 auto; width: 100%; text-align: center; line-height: 50px; font-size: 17px; letter-spacing: 0px; color: #424242;}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1600px) {
    .top-logo {left:15px; right:unset;}

    .tnb-inner {justify-content: flex-end;}
    .top-notice {position: absolute; bottom:-145px; left:0; right:0; z-index: 1; width: 100%; background: rgba(0, 0, 0, 0.8); border: none; border-top: 1px #383838 solid; border-radius: 0;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1430px) {
    .nav-inner,
    .container {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1024px) {
    header {position: fixed; top:0; left:0; right:0; z-index: 99; width: 100%; height: 60px; background: #000; border-bottom:1px #000 solid;}
    .top-logo {left:0; right:0; line-height: 60px; width: 180px;}

    /* 모바일 버튼 */
    .mo-bar {display: block; position: absolute; left:10px; z-index: 9; line-height: 60px;}
    .mo-bar > i {font-size: 32px; color: #8ec6f9; cursor: pointer;}

    .mo-user {display: block; position: absolute; right:10px; z-index: 9; line-height: 60px;}
    .mo-user > i {padding: 5px 5px; font-size: 18px; color: #8ec6f9; border: 2px #8ec6f9 solid; border-radius: 50%; cursor: pointer;}

    .tnb-close,
    .nav-close {display: block; margin:0 auto; padding:10px 10px; width: 100%; cursor: pointer;}
    .tnb-close {text-align: left;}
    .nav-close {text-align: right;}
    .tnb-close > i,
    .nav-close > i {font-size: 32px; color: #8ec6f9;}

    /* tnb */
    .tnb {visibility:hidden; opacity:0; transition:0.3s ease; position:fixed; top:0; bottom:0; left:0; right:0; padding:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;}
    .tnb.active {visibility:visible; opacity:1;}

    .tnb-inner {position:fixed; top:0; right:0; bottom:0; width:0; height:100%; flex-direction: column; justify-content: flex-start; align-items: center; background:#000; overflow-y:auto; transition:width 0.35s ease; z-index:999; border-left: 1px #193248 solid; box-shadow:0 5px 15px rgba(0,0,0,0.5);}
    .tnb-inner.active {width:300px;}
    .after-info {margin:20px auto; width:100%; justify-content: flex-start; flex-direction: column;}
    .info-list {width: 100%; line-height: 40px;}
    .info-cash {width:100%; display: flex; justify-content:space-between; align-items: center;}
    .after-info > button {display:block; margin:5px 0; padding:3px 0 0 0; width: 100%; height: 40px;}


    /* top-notice */
   .top-notice {display:none;}

    /* nav */
    .nav {visibility:hidden; opacity:0; transition:0.3s ease; position:fixed; top:0; bottom:0; left:0; right:0; padding:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;}
    .nav.active {visibility:visible; opacity:1;}
    .nav-inner {position:fixed; top:0; left:0; bottom:0; width:0; height:100%; flex-direction: column; justify-content: flex-start; align-items: center; background:#000; overflow-y:auto; transition:width 0.35s ease; z-index:999; border-right: 1px #193248 solid; box-shadow:0 5px 15px rgba(0,0,0,0.5);}
    .nav-inner.active {width:300px;}

    ul.menu {flex-direction: column; justify-content: flex-start; align-items: center;}
    ul.menu > li {margin:5px 0; padding: 10px 10px; width: 100%; height: unset; display: flex; justify-content: flex-start; align-items: center; font-weight: 500;}
    ul.menu > li::before {display: none;}
    ul.menu > li.game-menu {padding: 10px 10px; width: 100%;}
    .game-icon {margin:0 10px 0 0; width: unset; height: unset;}
    .game-icon > img {width: 30px;}
    .nav-icon-off {opacity: 0;}
    .nav-icon-on {opacity: 1; position: relative; top:unset; left:unset; transform:unset; margin:0 10px 0 0; width: unset; height: unset;}
    .nav-icon-on > img {width: 30px;}
    ul.menu > li:hover .nav-icon-on {opacity: 1; top:unset;}

    /* container */
    .container {padding:0 10px}
}/* 미디어쿼리문 끝 */

@media (max-width: 767px) {
    .copyright {font-size: 12px;}
}/* 미디어쿼리문 끝 */

/****************************************************************************************************************************************
🔴 이하 이식 추가 (원본에 없던 상태·요소). 원본 규칙은 위에 그대로 두고 여기서만 보탠다.
*****************************************************************************************************************************************/

/* 로그인 전 버튼 — 원본은 로그인 후(.after-info)만 있었다(데모가 늘 로그인 상태).
   같은 버튼 모양을 그대로 쓴다. 모바일(≤1024)에서는 .after-info 와 똑같이 우측 서랍 안에 세로로 선다. */
.before-info {position: relative; margin: 0; padding:0; display: flex; justify-content: flex-end; align-items: center;}
.before-info > button {margin:0 0 0 5px; padding: 8px 20px 4px 20px; text-align: center; font-size: 13px; color:#fff; font-family: 'GmarketSans'; font-weight: 500; border-radius: 20px; cursor: pointer;}
.before-info > button.blue-bg {background:#04669f;}
.before-info > button.gray-bg {background:#555;}
@media (hover: hover) and (pointer: fine) {
    .before-info > button:hover {filter: brightness(1.3);}
}

/* 쪽지 수 배지 — 원본 메뉴엔 숫자 자리가 없다. unread-count.js 가 #unread-count-pc 의 글자를 채운다(1분 폴링). */
ul.menu > li .msg-cnt {position: absolute; top: 12px; left: calc(50% + 12px); min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; font-size: 11px; font-weight: 700; color: #fff; background: #e91e63; border-radius: 9px;}
ul.menu > li .msg-cnt:empty {display: none;}

/* 아이콘 이미지가 없는 메뉴(이벤트) — 원본 아이콘(30px, 금빛 원형)과 같은 자리에 remixicon 을 둔다. */
.nav-icon-font {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; line-height: 30px; font-size: 26px; color: #ddbf90;}

/* 흐르는 공지 — 원본은 폐기 태그 <marquee>. 같은 동작을 CSS 로 낸다(W08 선례). */
.top-notice {overflow: hidden;}
.w10-marquee {position: relative; flex: 1; overflow: hidden; white-space: nowrap;}
.w10-marquee > span {display: inline-block; padding-left: 100%; font-weight: bold; color: #f6b526; animation: w10-marquee 18s linear infinite;}
@keyframes w10-marquee {from {transform: translateX(0);} to {transform: translateX(-100%);}}

/* 메뉴 활성(현재 화면) — 원본엔 상태가 없어 hover 색을 그대로 쓴다. */
ul.menu > li.active {color: #fff084;}
ul.menu > li.game-menu.active {box-shadow: 0px 0px 15px 5px rgba(255,201,60,0.5) inset;}

/* 마이크로게이밍 — 원본 game-menu 칸에 로고만 놓는다(_MicrogamingLogo, 로고 자체가 이름이라 글자 줄이 없다).
   그림+글자 두 줄인 이웃 칸과 높이를 맞추려 칸 안에서 세로 가운데로 둔다. 로고 높이는 _MicrogamingHead(W10=30px). */
ul.menu > li.game-menu.mg-menu {display: flex; align-items: center; justify-content: center;}
.game-icon.mg-icon {margin: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;}

/* 로고 — 브랜드 로고(BrandOptions.LogoPath)는 원본 logo.png 와 같은 952×144 캔버스로 만든다.
   다른 비율의 로고가 와도 헤더(85px)를 넘지 않게 높이만 막는다. */
.top-logo > img {max-height: 60px;}

/* 본문 래퍼 — 원본 _head.php 가 열고 _bottom.php 가 닫던 자리. 공용 뷰가 이 안에 그려진다.
   🔴 원본 .container(1400px, text-align:center)를 그대로 쓰면 공용 게시판·충전 화면 글자가 가운데로 몰린다.
      W10 전용 화면(메인·카지노·슬롯)은 스스로 .container 를 연다 — 바깥은 별도 클래스로 둔다. */
.w10-contents {position: relative; margin: 0 auto; padding: 0 0 60px 0; width: 100%; min-height: 400px;}
.w10-contents.sub-page {padding-top: 40px;}
/* 공용 뷰 폭 — 원본 본문 폭(1400px, 좌우 15px)과 같게. 글자 정렬은 공용 뷰에 맡긴다. */
.w10-sub-inner {position: relative; margin: 0 auto; padding: 0 15px; width: 100%; max-width: 1400px;}

@media (max-width: 1024px) {
    /* 고정 헤더(60px) 아래로 본문을 내린다 — 원본은 히어로 사진을 헤더 밑에 깔아 가려도 티가 안 났지만,
       업체 배너(글자·건물)는 위 60px 가 잘리면 바로 보인다. */
    .w10-contents {padding-top: 60px;}
    .w10-contents.sub-page {padding-top: 80px;}

    .before-info {margin:20px auto; width:100%; justify-content: flex-start; flex-direction: column;}
    .before-info > button {display:block; margin:5px 0; padding:3px 0 0 0; width: 100%; height: 40px;}

    ul.menu > li .msg-cnt {position: static; margin-left: 8px;}
    .nav-icon-font {position: relative; top: unset; left: unset; transform: none; margin: 0 10px 0 0;}
    ul.menu > li.game-menu.mg-menu {justify-content: flex-start;}
    .top-logo > img {max-height: 40px;}
}