@charset "utf-8";

body {margin:0 auto; width:100%; color:#fff; background: #0b0e18;}
.x-scrollable {position: relative; margin:0 auto; width:auto; flex-wrap:unset; white-space: nowrap; overflow-x: auto; scroll-behavior: smooth;}
.x-scrollable ::-webkit-scrollbar {width: 3px; height: 3px; border-radius: 3px;}
.x-scrollable ::-webkit-scrollbar-track {background-color: #000; border-radius: 3px;}
.x-scrollable ::-webkit-scrollbar-thumb {border-radius: 3px; background-color: #6a7178;}
.x-scrollable ::-webkit-scrollbar-button {width: 0; height: 0;} 


.txt-white {color:#fff !important;}
.txt-gray {color:#8f8f8f !important;}

.txt-orange {color:#ff8635 !important;}
.txt-red {color: #ff0000 !important;}
.txt-blue {color:#00ffff !important;}
.txt-skyblue {color:#00ffff !important;}

.txt-left {text-align: left !important;}
.txt-right {text-align: right !important;}

.no-scroll {overflow: hidden;}

/****************************************************************************************************************************************
Header
*****************************************************************************************************************************************/
.header {position: fixed; top: 0; right: 0; left: 0; z-index: 999; margin: 0 auto; padding:0; min-width: 1200px; width: 100%; text-align: center; }   
.intro-hd {position: fixed; top: 0; right: 0; left: 0; z-index: 999; margin: 0 auto; padding:0; min-width: 1200px; width: 100%; height: 130px; text-align: center; background: transparent; border-bottom:none;}
.sticky {position: fixed; left: 0; top: 0; z-index: 100; width: 100%;}

.hd-inner {position: relative; margin:0; padding:0 20px; width: 100%; height: 130px; display: flex; justify-content: space-between; align-items: center; background: #222a33; border-bottom: 1px solid #6a7178; box-shadow: 0 0 20px rgba(0, 0, 0, 0.89);}

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

/* nav */
.nav {position: relative; display: flex; flex-direction: column;}

.tnb {position: relative; height: 75px; display: flex; justify-content: flex-end; align-items: center;}

/* 로그인 전 */
ul.tnb-before {position: relative; display: none; gap:10px;}
ul.tnb-before > li {padding:5px 20px; font-weight: 500; color: #fff; background: #16bdf9; border-radius: 25px; cursor: pointer;}

/* 다국어 */
.lang-select {position: relative; margin:0 0 0 15px; padding:3px 10px; width: 100%; max-width: 120px; display: flex; justify-content: center; align-items: center; color: #fff; background: #3a4653; border: 1px #506275 solid; border-radius: 25px; cursor: pointer;}
.lang-select > select {position: relative; margin:0; padding:0; width: 100%; height: 100%; color: #fff; background: unset; border:unset;cursor: pointer;}
.lang-select > select:focus {outline: none;}
.lang-select > select option { padding:3px 10px; background: #000; cursor: pointer;}

/* 로그인 후 */
.tnb-after {position:relative; display: flex; gap:15px; justify-content: flex-end; align-items: center;}
.hd-icons {display: flex; flex-direction: column; gap: 4px;}
.icon-top,
.icon-bottom  {display: flex; gap: 4px;}
.icon-bor {position: relative; width: 23px; height: 23px; display: flex; justify-content: center; align-items: center; border: 2px solid #fff; border-radius: 12px; cursor: pointer;}
.icon-bor > i {color:#fff;}
.icon-count {position: absolute; top: -10px; right: -13px;  z-index: 1; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; color:#fff; background: #f00; border-radius: 50%;}
.pulsate-fwd > i {animation: pulsate-fwd .5s ease-in-out infinite both;}
@keyframes pulsate-fwd {
    0% {transform: scale(1);}
    50% {transform: scale(1.3);}
    100% {transform: scale(1);}
}

/* user-info */
ul.user-info {position:relative; display: flex; gap:15px; justify-content: flex-end; align-items: center;}
ul.user-info > li {position:relative; display: flex; gap:10px; align-items: center;}
ul.user-info > li > span {font-size:15px; font-weight:500; color:#fff;}
ul.user-info > li > span > .user-name {margin-right:2px; font-weight:600; color: #c5f403;}
ul.user-info > li > span > .amount {margin-right:2px; font-weight:600; color: #ff8f44;}

ul.tnb-menu {position:relative; display: flex; gap:5px; justify-content: flex-end; align-items: center;}
ul.tnb-menu > li {position:relative;}
ul.tnb-menu > li > a {display: block; padding:5px 20px; font-weight: 500; color: #fff; background: linear-gradient(0deg, #1681c0, #16bdf9); box-shadow:inset 0px 1px 0 rgb(255, 255, 255, 0.3); border-radius: 25px;}
ul.tnb-menu > li.active > a {color: #fff;}

/* main-menu */
ul.main-menu {position: relative; display: flex; gap:40px; justify-content: flex-end; align-items: center;}
ul.main-menu > li {position: relative;}
ul.main-menu > li > a {display: block; line-height: 55px; font-size: 16px; font-weight: 600; color:#8b8b8b;}
ul.main-menu > li.active > a {color: #fff; text-shadow: 0 0 0 #16bdf9, 0 0 10px #16bdf9, 0 0 30px #16bdf9;}

/* 서브메뉴 */
ul.sub-menu {display: none; position: absolute; top:55px; left: -58px; z-index: 9999; width:160px;}
ul.sub-menu > li {position:relative; display: block; padding:0; width:100%;}

/* 3단 메뉴 */
ul.dan-menu {display: none; position: absolute; top:0; left:160px; z-index: 9999; width:160px;}
ul.dan-menu > li {position:relative; display: block; padding:0; width:100%;}

ul.sub-menu > li > a,
ul.dan-menu > li > a {display: block; padding:0 15px; width:100%; text-align: center; line-height: 40px; font-weight: 500; color:#8b8b8b; background: #1e252c; cursor: pointer;}

/* 흐르는 줄 공지 */
.top-notice {position: relative; margin:0 auto; padding:0; width: 100%; background: rgba(0, 0, 0, 0.5); border-bottom: 1px #1e232a solid;}
.top-notice > marquee {height: 35px; line-height: 35px; font-weight: 500; color: #6bfa54;}


@media (hover: hover) and (pointer: fine) {
    /* logo */
    .hd-logo:hover {filter: invert(53%) sepia(90%) saturate(2600%) hue-rotate(3deg) brightness(102%) contrast(102%);}

    /* 로그인 전 */
    ul.tnb-before > li:hover {filter: brightness(120%);}

    /* 로그인 후 */
    .icon-bor:hover {background: #16bdf9; box-shadow: 0 0 10px #16bdf9, 0 0 15px hsla(0, 0%, 100%, .333), 0 0 30px #16bdf9;}
    ul.tnb-menu > li:hover > a,
    ul.tnb-menu > li:hover.active > a {background: linear-gradient(180deg, #1681c0, #16bdf9);}

    ul.main-menu > li:hover > a,
    ul.main-menu > li:hover.active > a {color: #fff; text-shadow: 0 0 0 #16bdf9, 0 0 10px #16bdf9, 0 0 30px #16bdf9;}

    /* main-menu */
    ul.main-menu > li:hover  ul.sub-menu {display: block;}
    ul.sub-menu > li:hover > ul.dan-menu {display: block;}
    ul.sub-menu > li:hover > a,
    ul.dan-menu > li:hover > a {color:#fff; background: #171c21; text-shadow: 0 0 0 #fff, 0 0 10px #16bdf9, 0 0 30px #16bdf9;}
}

/* pc일때 hidden */
.mo-bar,
.mo-user,
ul.mo-tnb-before {display: none;}

/****************************************************************************************************************************************
contents
*****************************************************************************************************************************************/
.contents {position: relative; margin: 130px auto 0 auto; padding:0; min-width: 1200px; width: 100%;}
/* 환영 메시지(공지사항)가 있을 때 여백 증가 */
.contents.has-notice {margin-top: 170px;}

/****************************************************************************************************************************************
footer
*****************************************************************************************************************************************/
footer {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
.pc-footer {position: relative; margin:0 auto; padding:30px 15px; width: 100%; background: #030304;}
.copyright {margin-top: 20px; font-size: 12px; color: #adbac9;}

.mo-footer {display: none;}

/****************************************************************************************************************************************
채팅상담창
*****************************************************************************************************************************************/
.chat-icon {position: fixed; bottom:20px; right:20px; z-index: 999; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; color: #fff; background: #0ca812; border-radius: 50%; cursor: pointer;}
.chat-icon > svg {font-size: 32px;}

/****************************************************************************************************************************************
페이지변호
*****************************************************************************************************************************************/
.pagination {position: relative; margin:0 auto; padding:15px 0; width: 100%; text-align: center; background:#0b0e18;}
.page-number {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:5px; justify-content: center; align-items: center;}
.page-number > a {opacity: 0.5; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-weight: 600; color: #fff; background: #38383a; border: 1px solid #53545b; border-radius: 5px;}
.page-number > a.prev,
.page-number > a.next {width: 60px; font-size: 12px;}
.page-number > a.prev > i,
.page-number > a.next > i {margin:0 3px; font-size: 14px;}
.page-number > a.active {opacity: 1; background: #16bdf9; border: 1px #16bdf9 solid;}

@media (hover: hover) and (pointer: fine) {
    .page-number > a:hover {opacity: 1;}
    .page-number > a:hover.active {opacity: 1; background: #16bdf9; border: 1px #16bdf9 solid;}
}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 800px) {   
    /* header */
    .header,
    .hd-inner,
    .intro-hd {min-width:100%; height: 50px; background: #081b37;}
    .hd-inner {padding:0 5px;}
    .hd-logo > img {width:120px;}

    /* 흐르는 줄공지 */
    .top-notice > marquee {height: 30px; line-height: 30px; font-size: 13px;}

    /* 모바일 버튼 */
    .mo-bar, 
    .mo-user {display: block;}
    .mo-user > i {padding:3px 3px; font-size:16px; color:#fff; border: 2px #fff solid; border-radius: 50%; cursor: pointer;}
    
    .mo-bar {display: block; position: relative; width: 27px; cursor: pointer;}
    .mo-bar > span {display: block; margin: 0 auto 7px auto; width:100%; height: 2px; background: #fff;}
    .mo-bar > span:first-child {position: relative; margin-top: 0; top: 0; transition: top .2s .2s, transform .2s 0s;}
    .mo-bar > span:nth-child(2) {opacity: 1; transition: opacity .3s;}
    .mo-bar > span:last-child {position: relative; top: 0; margin-bottom: 0; transition: top .2s .2s, transform .2s 0s;}
    .mo-bar.active > span:first-child {top: 9px; transform: rotate(-45deg); transition: top .2s 0s, transform .2s .2s, color .3s .3s;}
    .mo-bar.active > span:nth-child(2) {opacity: 0}
    .mo-bar.active > span:last-child {top: -9px; transform: rotate(45deg); transition: top .2s 0s, transform .2s .2s;}

    /* nav */
    .nav {position: fixed; top: 50px; left: -120%; z-index: 99999999999999999; display: block; padding:0; width:100%; height: calc(100% - 110px); background:#14131a; transition: all 0.3s; overflow-y: auto;}
    .nav.active {left: 0; width:280px;}

    /* tnb */
    .tnb {width: 100%; height: auto;}
    /* tnb-before */
    ul.tnb-before {display: none;}
    ul.mo-tnb-before {display: none; height: auto;}
    ul.mo-tnb-before.active {display:block; position: absolute; top: 50px; left:0; right:0; z-index: 99; margin-top: 0; padding:0; width: 100%;}
    ul.mo-tnb-before > li {margin:0 auto; padding:10px 30px; text-align: left; color:#000; font-weight: 500; background: #16bdf9; border-bottom: 2px solid #0a303e; cursor: pointer;}

    /* tnb-after */
    .tnb-after {margin:0; padding:10px 10px; width:100%; justify-content: flex-start; background: linear-gradient(270deg, #072d4b, transparent);}
    .hd-icons {display: none;}
    ul.user-info {flex-direction: column; gap:5px; justify-content: center; align-items: flex-start;}
    ul.user-info > li > span {font-size: 13px; font-weight: 500;}
    ul.user-info > li > span.user-level {display: none;}

    /* tnb-menu */
    ul.tnb-menu {position: absolute; top:97px; left:0; gap: 2px; padding:0 5px; width: 100%; justify-content: center;}
    ul.tnb-menu > li {margin:0 auto; width: 100%; text-align: center;}
    ul.tnb-menu > li:last-child {display: none;}
    ul.tnb-menu > li > a {margin:0 auto; padding:10px 0; text-align: center; font-size: 13px; font-weight: 600; color:#000; background: #16bdf9; border-radius: 6px;}

    /* 다국어 */
    .lang-select {position: fixed; top:10px; right:35px; z-index: 99; padding: 3px 3px; max-width:55px; background: #0d2e5e; border: 1px #154893 solid;}
    .lang-select > svg {display: none;}
    .lang-select > select {font-size: 13px;}

    /* menu */
    ul.main-menu {top:50px; margin:20px auto 70px auto; width: 100%; gap:10px; flex-direction: column; justify-content: center; align-items: flex-start;}
    ul.main-menu > li {width: 100%;}
    ul.main-menu > li > a {margin:0 auto; padding:0 20px; line-height: 40px; text-align: left;}
    ul.main-menu > li:hover ul.sub-menu {display: none;}
    ul.main-menu > li.active ul.sub-menu {display: block;}
    ul.sub-menu {position:relative; top:unset; left:unset; z-index: unset; width: 100%;}
    ul.sub-menu > li > a {padding:0 15px 0 40px; text-align: left; font-size: 14px; font-weight: 500; background: #1e1c27; border-bottom:2px #14131a solid;}
    ul.dan-menu,
    ul.sub-menu > li:hover ul.dan-menu,
    ul.sub-menu > li.active ul.dan-menu {display: none;}

    /* .contents */
    .contents {margin:0; padding:50px 0 80px 0; min-width: 100%;}
    .contents.active {opacity: 0.7;}
    /* 환영 메시지(공지사항)가 있을 때 모바일 여백 */
    .contents.has-notice {margin-top: 0px;}
    .mo-content {margin:0; padding:0;}

    /* .contents */
    footer {position:fixed; bottom:0; left:0; right: 0; z-index: 9999; margin:0; padding:0; width: 100%; height: 60px; background: linear-gradient(#212e54, #0b101e);}
    footer.active {opacity: 0.7;}

    .pc-footer {display: none;}

    .mo-footer {display: block; position: relative; margin:0; width: 100%; height: 100%;}
    ul.footer-menu {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; display: flex; gap:10px; justify-content: center; align-items: center;}
    ul.footer-menu > li {position: relative; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent;}
    ul.footer-menu > li > i {font-size: 15px;}
    ul.footer-menu > li > p {font-size: 12px; margin: 0 auto; width: 100%; text-align: center;}
    ul.footer-menu > li > .cart-count-badge {position: absolute; top:-5px; left:50%; transform: translateX(-50%); margin-left:15px; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; font-size: 11px; color: #fff; background: #ff3b30; border-radius: 9px;}

    ul.footer-menu > li.game-menu {position: relative; top: -8px; display: flex; flex-direction: column;justify-content: center; align-items: center;}
    ul.footer-menu > li.game-menu > img {z-index: 999; width: 60px; object-position: 0 -15px;}
    ul.footer-menu > li.game-menu > p {position: absolute; top: 35px;}

    ul.footer-menu > li.game-menu.active {transition: all 0.3s;}
    ul.footer-menu > li.game-menu.active > img {position: absolute; top: -45px; object-position: unset; margin: 0 auto; padding: 10px 10px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; color: #fff; background: linear-gradient(#131b33, #0b101e); border: 1px solid #283253; border-radius: 20px;}
    ul.footer-menu > li.game-menu.active > p {top: 5px; color:#fff; text-shadow: 0 0 5px #283253, 0 0 10px #fff;}

    ul.ft-gameSub {display: none;}
    ul.ft-gameSub.active {display: block; position: fixed; left:0; right:10px; bottom:120px; z-index: 99; margin:0 auto; padding:0; width: 100%; max-width: 320px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; transition: all 0.3s;}
    ul.ft-gameSub.active > li {margin:10px 0; width: calc(100% / 3 - 10px); display:flex; justify-content: center; align-items: center;}
    ul.ft-gameSub.active > li  > a {width:80px; height:80px; display:flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; letter-spacing: -1px; font-weight: 500; color:#fff; background: linear-gradient(#131b33, #0b101e); border: 1px solid #283253; border-radius: 20px;}
    ul.ft-gameSub.active > li  > a > img {margin-bottom:3px; width: 25px;}

    ul.footer-menu > li.ft-cashBtn.active {transition: all 0.3s;}
    ul.footer-menu > li.ft-cashBtn.active > i {position:absolute; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 999; width:50px; height:50px; display: flex; justify-content: center; align-items: center; color:#fff; background: linear-gradient(#131b33, #0b101e); border: 1px solid #283253; border-radius: 20px;}
    ul.footer-menu > li.ft-cashBtn.active > p {margin-top: 24px; color:#fff; text-shadow: 0 0 5px #283253, 0 0 10px #fff;}

    ul.ft-cashSub {display: none;}
    ul.ft-cashSub.active {display: block; position: absolute; right:10px; bottom:80px; z-index: 99; transition: all 0.3s;}
    ul.ft-cashSub.active > li {margin:10px 0; width:80px; height:80px; display:flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; letter-spacing: -1px; font-weight: 500; color:#fff; background: linear-gradient(#131b33, #0b101e); border: 1px solid #283253; border-radius: 20px;}
    ul.ft-cashSub.active > li > i {font-size: 28px; font-weight: 300; color:#fff;}

    ul.ft-historySub {display: none;}
    ul.ft-historySub.active {display: block; position: absolute; right:10px; bottom:80px; z-index: 99; transition: all 0.3s;}
    ul.ft-historySub.active > li {margin:10px 0; width:80px; height:80px; display:flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; letter-spacing: -1px; font-weight: 500; color:#fff; background: linear-gradient(#131b33, #0b101e); border: 1px solid #283253; border-radius: 20px;}
    ul.ft-historySub.active > li > i {font-size: 28px; font-weight: 300; color:#fff;}

    ul.footer-menu > li.mo-cartBtn.active {transition: all 0.3s; z-index: 999;}
    ul.footer-menu > li.mo-cartBtn.active > i {position:absolute; bottom: 25px; left: 50%; transform: translateX(-50%); width:50px; height:50px; display: flex; justify-content: center; align-items: center; color:#fff; background: linear-gradient(#131b33, #0b101e); border: 1px solid #283253; border-radius: 20px;}
    ul.footer-menu > li.mo-cartBtn.active > p {margin-top:21px; color:#fff; text-shadow: 0 0 5px #283253, 0 0 10px #fff;}
    ul.footer-menu > li.mo-cartBtn.active > .cart-count-badge {top:-40px;}

    .mo-ftBG {display: none;}
    .mo-ftBG.active {display: block; position: fixed; bottom:60px; left:0; right:0; z-index: -1; width: 100%; height:100%; background: linear-gradient(0deg, #000, transparent);}

    /* 채팅 상담창 */
    .chat-icon {display:none; bottom:67px; right:10px; width: 40px; height: 40px;}
    .chat-icon > svg {font-size: 22px;}

}/* 미디어쿼리문 끝 */