@charset "utf-8";

body {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; color:#adadad; background:url('../img/bg_70p.png') top center no-repeat fixed; background-size: cover; cursor: default;}

/****************************************************************************************************************************************
공통
*****************************************************************************************************************************************/
.container {position:relative; margin:0 auto; padding:0 15px; width:1430px;}

.txt-blue {color:#ff4d54 !important;}
.txt-red {color: #007fff !important;}

/****************************************************************************************************************************************
Header
*****************************************************************************************************************************************/
header {position: relative; z-index: 99; margin:0 auto; padding:0; width:100%;}

/* hd-notice */
.hd-notice {position: relative; margin:0 auto; padding:0; width:100%; height: 35px;}
.hd-notice > marquee {margin:0 auto; padding:0; width:100%; line-height: 35px; color:#e5ceff;}

/* logo */
.logo {position:absolute; top:90px; left:252px; z-index: 1; cursor: pointer;}
.logo > img {width: 160px;}

/* 언어선택 */
.dropdown-lang {position:absolute; top:38px; right:30px; z-index: 9;}
.btn-lang {position: relative; display:flex; align-items: center; padding:0 10px; height: 30px; line-height: 30px; font-size: 13px; font-weight: 600; color:#adadad; cursor: pointer;}
.btn-lang > img {margin-right:5px; width: 16px;}
.btn-lang > i {margin-left:5px; color:#adadad;}

ul.lang-list {display:none; position: absolute; top: 35px; right: 0; z-index: 99; margin: 0; padding:0; background:#fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius:5px;}
ul.lang-list > li {padding:10px 20px; display: flex; align-items: center; text-align: left; color:#222; transition: 0.3s; cursor: pointer;}
ul.lang-list > li > img {margin-right:5px; width: 18px;}

ul.lang-list.active {display: block;}

/* tnb */
.tnb {position: relative; margin: 0 auto; padding:0; width: 100%;}
.tnb-inner {position: relative; margin: 0 auto; padding:5px 25px; width: 100%; display: flex; justify-content: space-between; align-items: center;}

.left-tnb {text-align: left;}
ul.left-info {position: relative; margin: 0 auto; padding:0; display: flex; justify-content: flex-start; align-items: center;}
ul.left-info > li {position: relative; margin: 0 auto; padding:0 5px; display: flex; align-items: center; font-size: 13px; font-weight:600;}
ul.left-info > li > i {margin:3px 2px 0 0; font-size: 14px;}
ul.left-info > li.tnb-cash > .cash-btn {font-size: 12px;}

.red-bg {margin:0 5px; padding:3px 10px; color: #c50101; background: #f9e5e5; border-radius: 25px;}
.blue-bg {padding:3px 10px; color: #0152c5; background: #e5edf9; border-radius: 25px;}

.right-tnb {padding-right:110px; display: flex; justify-content:flex-end; align-items: center;} 
ul.right-info {position: relative; margin: 0 auto; padding:0; display: flex; gap:15px; justify-content:flex-end; align-items: center;}
ul.right-info > li {position: relative; margin: 0; padding:0; line-height: 22px; display: flex; align-items: center; font-size: 13px; font-weight: 600; transition: all 0.3s; cursor: pointer;}
ul.right-info > li > i {margin:3px 2px 0 0; font-size: 13px; font-weight: 600;}

/* nav */
.nav {position: relative; margin: 0 auto; padding:0; width: 100%;}
.nav-inner {position: relative; margin: 0 auto; padding:10px 15px; width:1430px; text-align: right;}

ul.menu-list {position: relative; margin:0; padding:0; display: flex; justify-content: flex-end; align-items: center;}
ul.menu-list > li {position: relative;}
ul.menu-list > li > a {position: relative; display:flex; align-items: center; margin:0; padding:15px 25px;}
ul.menu-list > li > a > span {position: relative; font-size: 16px; font-weight: 700; color: #fff;}
ul.menu-list > li > a > img {opacity: 0; overflow: hidden; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); margin: 0; width: 42px; border-radius: 15px; overflow: hidden;}
ul.menu-list > li > a > i {margin:2px 0 0 15px; color: #fff;}

ul.menu-list > li > a.dimmed > span,
ul.menu-list > li > a.dimmed > i {color: #8c8c8c;}

/* turn-btn */
.turn-btn {position: relative; margin-left: 10px; padding: 10px 15px; display: inline-flex; justify-content: center; align-items: center; background: #8256b7; border-radius: 6px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s;}
.turn-wrap {position: relative; display: inline-block; overflow: hidden;}
.turn-wrap > .turn-txt {display: block; font-size: 13px; font-weight: 500; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); transition: transform 0.4s ease;}
.txt-front {transform: translateY(0%);}
.txt-back {position: absolute; top: 0; left: 0; transform: translateY(100%);}
.turn-btn > i {padding-left:5px; font-size: 13px; font-weight: 500; color: #fff;}

ul.sub-menu {opacity: 0; visibility: hidden; position: absolute; top: 100%; right: 5px; z-index: 11; padding:15px 15px; min-width: 240px; background: #fff; border-radius: 5px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.07); transform: translateY(10px); transition: all .55s;}
ul.sub-menu > li {position: relative; width: 100%;}
ul.sub-menu > li > a {display:block; margin:0; padding:10px 10px; width: 100%; text-align:left; font-size:14px; font-weight: 500; color:#404040;}

@media (hover: hover) and (pointer: fine) {
    ul.lang-list > li:hover {background: #f0f0f0;}

    ul.right-info > li:hover,
    ul.right-info > li:hover > i {color:#8601f6; transform:scale(1.1)}

    ul.menu-list > li > a:hover {text-shadow: 0px 2px 13px #fff; transform: scale(1.1);}
    ul.menu-list > li > a:hover > i {transform: rotate(180deg)}
    ul.menu-list > li > a:hover > span {z-index: 1; padding:-5px 0;}
    ul.menu-list > li > a:hover > img {opacity: 1; transform: translate(-50%, -25px);}
    
    .turn-btn:hover {transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2);}
    .turn-btn:hover .txt-front {transform: translateY(-100%);}
    .turn-btn:hover .txt-back {transform: translateY(0%);}

    /* 서브메뉴 */
    ul.menu-list > li:hover  ul.sub-menu, 
    ul.menu-list > li > a:hover  ul.sub-menu {opacity: 1; visibility: visible; transform: translateY(0);}
    ul.sub-menu > li > a:hover {color:#451979; font-weight: bold;}
}


/* pc-hid */
.mo-bar,
ul.mo-gameMenu,
ul.left-info > li.mo-drop {display: none;}
.mo-member {display: none !important;}

/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {position: relative; margin:0 auto; padding:0;}
.footer-inner {position:relative; margin:0 auto; padding:60px 0; width:1430px; text-align: center; overflow: hidden;}

ul.ft-logo {position: relative; margin:0; padding:0; width:100%; display: flex; justify-content: center; align-items: center;}
ul.ft-logo > li {position: relative;}
ul.ft-logo > li > img {width: 100%; opacity: 0.85; filter: grayscale(100%);}

.ft-logo-2 {position: relative; margin:10px 0; padding:0; width: 100%; display: flex; gap:10px; justify-content: center; align-items: center;}
.ft-logo-2 > img {height: 100px;}

.ft-info {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:40px; justify-content: space-between; align-items: center;}
.ft-info > h2 {width:25%; text-align: left;}
.ft-info > h2 > span {font-size: 46px; font-weight:600; color:#fff; letter-spacing: 1px;}
.ft-info > h2 > img {width: 300px; height: 23px;}
.copy-right {margin-top:30px; font-size: 15px; color: rgba(255, 255, 255, .7);}
.ft-txt {width:calc(100% - 25%); text-align: left; font-size: 12px; color: rgba(255, 255, 255, .7);}

.mo-ft {display: none;}

/****************************************************************************************************************************************
스크롤 진행 바
*****************************************************************************************************************************************/
.fixed-scroll {position: fixed; top: 50%; right: 20px; transform: translateY(-50%); z-index: 9; padding:20px 0; width: 30px; text-align: center; color: #000; background: rgba(255, 255, 255, .45); border-radius: 20px;}
.scroll-tit {writing-mode: vertical-rl; margin: 0 0 8px 6px; font-size: 13px; font-weight: 500; color:#000; letter-spacing: 0.5px;}
.scroll-bar {position: relative; margin: 0 auto; width: 2px; height: 60px; background: rgba(0, 0, 0, .3);}
.scroll-indicator {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: #000; border-radius: 50%; transition: background-color 0.3s ease;}


/****************************************************************************************************************************************
커스텀 커서
*****************************************************************************************************************************************/
#cursor-dot {position: fixed; z-index:100000; transform: translate(-50%, -50%); width: 12px; height: 12px; background:#ae61fb; border-radius: 50%;transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease; pointer-events: none;}
#cursor-dot.grow {width: 17px; height: 17px;  transform: translate(-50%, -50%) scale(1.1);}
#cursor-circle {position: fixed; z-index: 100000; transform: translate(-50%, -50%); width: 35px; height: 35px; background: transparent; border: 2px solid #ae61fb; border-radius: 50%; transition: transform 0.2s ease; pointer-events: none;}
#cursor-dot.grow + #cursor-circle {width: 40px; height: 40px; transform: translate(-50%, -50%) scale(1.1);}
#cursor-ani {display: none; position: relative; top:-20px; left:-20px; margin: 0; padding: 10px 10px; width: 70px; height: 70px; background: #fff; border-radius: 50%;}
#cursor-ani > img {width: 100%; height: 100%; object-fit: cover;} 


/* hover 대상 별 기본 커서 */
.hover-target[data-type="cursor-img"] {cursor: none;}
.hover-target[data-type="cursor-dot"] {cursor: default;}


/****************************************************************************************************************************************
page-tit 시작
*****************************************************************************************************************************************/
.page-tit {position: relative; margin: 0 auto 70px auto; padding:0; height: 240px; background: #000;}
.tit-bg {position: relative; width: 100%; height:100%;}
.tit-bg > div {position: relative; width: 100%; height: 100%;}

.tit-caption {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin:0; padding:0 15px; width:1430px;}
.tit-caption > h3 {position:relative; z-index:2; margin: 0 auto 5px auto; font-size:40px; font-weight:700; color:#fff; text-shadow: 1px 1px 3px #000; animation:fadeInUp 1s both 0.3s; visibility:visible;}
.tit-caption > p {margin:0; font-size: 14px; font-weight:400; color:#fff; text-shadow: 1px 1px 3px #000; animation:fadeInUp 1s both 0.5s; visibility:visible;}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width:1900px) {
    .logo {left:15px;}
    .nav-inner {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1460px) {
    .container,
    .tit-caption {width: 100%;}
    .footer-inner {padding:60px 15px; width: 100%;}
    ul.ft-logo > li > img {width: 100%;}
}/* 미디어쿼리문 끝 */


@media (max-width:1195px) {
    .page-tit {margin:0 auto 40px auto; height: 180px;}
}/* 미디어쿼리문 끝 */


@media (max-width: 992px) {
    header {position: fixed; top:0; left:0; right:0; z-index: 999; width: 100%; height: 50px; background: rgba(0,0,0,0.5);}
    .hd-notice {display: none;}

    .logo {left:10px; top:0; line-height: 50px;}
    .logo > img {width: 100px;}

    .dropdown-lang {right:40px; top:10px;}

    .mo-bar {display:block; position: fixed; right:10px; top:15px; z-index: 999; cursor: pointer; transition: all 0.2s;}
    .mo-bar .menu-item {display: block; margin-bottom:5px; width:20px; height: 2px; background: #fff; transition: all 0.2s;}
    .mo-bar.active .menu-item {background: #fff;}
    .mo-bar.active .menu-item:first-child {transform: rotate(45deg); transform-origin: 0;}
    .mo-bar.active .menu-item:nth-child(2) {opacity: 0;}
    .mo-bar.active .menu-item:nth-child(3) {transform: rotate(-45deg); transform-origin: 0;}

    .mo-hid {display: none !important;}

    .tnb,
    .nav {display:none;}

    .tnb.active {display: block; top:50px; padding:10px 10px; width: 100%; height: 270px; border-radius: 0; background:#000; box-shadow: 0px 9px 5px 5px rgba(0, 0, 0, .54);}
    .tnb-inner {padding:10px 0; min-height: 54px; border: 1px #8601f6 solid; border-radius: 6px;}

    .left-tnb,
    .right-tnb {padding:0; width: calc(100% / 2);}

    ul.left-info {position:unset; padding:0; width: 100%; justify-content:flex-start; align-items: flex-start;}
    ul.right-info {padding:0 10px; width: 100%; gap:5px; align-items: flex-start;}

    ul.left-info > li,
    ul.right-info > li {margin:0; padding:0 10px; color: #fff;}

    ul.left-info > li.nick-name {margin-left:5px; font-size: 22px;}
    
    ul.left-info > li.tnb-cash {position:absolute; top:63px; margin: 0 auto; padding: 15px 10px; width: 100%; border: 1px #8601f6 solid; border-radius: 6px;}
    ul.left-info > li.tnb-cash > .cash-btn {width: 50%; line-height: 25px;}
    .red-bg {background: #fff; color: #c50101; box-shadow: inset 3px 0px 12px -2px #e07e7e; border-radius: 5px;}
    .blue-bg {background: #fff; color: #0152c5; box-shadow: inset -3px 0px 12px -2px #5bacca; border-left: 1px solid #abc1c8; border-radius: 5px;}

    ul.left-info > li.mo-member {display: flex !important; gap:10px; justify-content: space-between; align-items: center; position:absolute; top:58px; margin: 0 auto; padding: 15px 10px; width: 100%; border: 1px #8601f6 solid; border-radius: 6px;}
    ul.left-info > li.mo-member > button {margin:0; padding:0; width: calc(100% / 2); height: 38px; display: flex; gap:5px; justify-content: center; align-items: center; font-weight: 500; color:#fff; border-radius: 4px; box-shadow: inset 0px 1px 3px rgba(255, 255, 255, 0.4);}
    ul.left-info > li.mo-member > button > i {margin:0; padding: 5px 5px 5px 5px; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; font-weight: 500; color: #fff; background: rgba(0, 0, 0, 0.2); border-radius: 50%;  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4), inset 0px -1px 0px rgba(255, 255, 255, .5); overflow: hidden;}

    ul.left-info > li.mo-member > button.top-login {background: linear-gradient(180deg, #44bbdd 0%, #40b5d6 30%, #30a5c6 65%, #129abc 100%);}
    ul.left-info > li.mo-member > button.top-join {background: linear-gradient(180deg, #ddbb44 0%, #d6b540 30%, #c6a530 65%, #bc9a12 100%);}

    ul.right-info > li.top-logout {margin:0; padding:5px 10px; font-size: 13px; font-weight: 400; color:#fff; background: rgb(255, 255, 255, 0.2); border-radius: 5px;}
    ul.right-info > li.top-logout > i {display: none;}
    
    ul.right-info > li:hover, 
    ul.right-info > li:hover > i {transform: unset; color: #fff;}


    /* 모바일 게임버튼 */
    ul.mo-gameMenu {display: flex; position: relative; top: 70px; margin:0; padding:0; width: 100%; gap:5px; justify-content: center; align-items: center;}
    ul.mo-gameMenu > li {position:relative; margin:10px auto 0 auto; padding:0; width: calc(100% / 2 - 5px); text-align: center; color:#fff; background: #000; border: 1px solid #8c00f6; border-radius: 5px; cursor: pointer;}
    ul.mo-gameMenu > li > img {position:relative; width: 100%; opacity: 0.5;}
    ul.mo-gameMenu > li > span {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index: 1; margin:0 auto; font-size: 20px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000;}

    /* 모바일 드럽메뉴 */
    ul.left-info > li.mo-drop {display: inline-block; position: relative; padding:0 0 0 10px;}
    .mo-dropBtn {width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, .15);}
    .mo-dropBtn > i {font-size:18px; font-weight: 600; color:#fff;}

    ul.mo-dropMenu {display:none; position: fixed; left:10px; right:10px; z-index: 9; margin:20px auto 0 auto; padding:10px 10px; width: calc(100% - 20px); background: #000; border: 1px solid #8c00f6; border-radius: 5px;}
    ul.mo-dropMenu > li {position: relative; margin:3px auto; padding:10px 15px; text-align: left; font-weight: 500; background: #fff; cursor: pointer;}
    ul.mo-dropMenu > li > a {color:#000; font-weight: 500;}
    ul.mo-dropMenu.active {display: block;}

    /* footer */
    .footer-inner {padding:40px 20px 90px 20px;}
    ul.ft-logo {flex-direction: column;}
    ul.ft-logo > li {width: 100%;}
    ul.ft-logo > li > img {max-width: 100%; width: unset;}

    .ft-logo-2 > img {height: 70px;}

    .ft-info  {flex-direction: column; justify-content: center;}
    .ft-info > h2,
    .ft-txt {margin:0 auto; width: 100%; text-align: center;}
    .ft-info > h2 > img {display: block; margin:10px auto 0 auto; min-width:300px; width:unset; text-align: center;}
    .copy-right {margin-top:-30px}


    .mo-ft {display: block; position: fixed; bottom:0; left:0; right: 0; z-index: 99; margin:0 auto; padding:5px 0; width: 100%; background: #6f32b8;}
    ul.mo-ftMenu {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center;}
    ul.mo-ftMenu > li {margin:0 auto; padding:5px 0; width: calc(100% / 4); text-align: center; line-height: 1.1; font-size: 13px; font-weight: 500; color:#fff; cursor: pointer;}
    ul.mo-ftMenu > li > img {display: block; margin:0 auto 3px auto; width:25px;text-align: center;}

    /* fixed-scroll */
    .fixed-scroll {display: none;}

    /* .page-tit */
    .page-tit {margin: 45px 0 30px auto;}    
}/* 미디어쿼리문 끝 */


@media (max-width:600px) {
    ul.mo-gameMenu > li > img {height: 105px; object-fit: cover;}
    ul.mo-gameMenu > li > span {font-size: 14px;}


    /*  페이지별 타이틀 이미지 */
    .page-tit {height: 150px;}

    .tit-caption {padding-left:10px;}
    .tit-caption > h3 {margin:0; font-size: 24px;}
    .tit-caption > p {font-size: 11px;}
}/* 미디어쿼리문 끝 */