@charset "utf-8";

body {position: relative; color: #fff; background:#000 url('../img/body-bg7.jpg') center repeat-y; background-size:cover;}

/****************************************************************************************************************************************
공통 txt color 시작
*****************************************************************************************************************************************/
.txt-yellow {color: #ffeb3b !important;}
.txt-white {color:#fff !important;}
.txt-gray {color: #d0d0d1 !important;}
.txt-green {color:#01ff20 !important;}
.txt-blue {color: #4eebff !important;}

.btn-orange {background: #a56c00 !important;}

.btn-p2m {display: inline-block; background:#1e2332; width: 40px; text-align: center; font-size:12px; font-weight: 500; color: #ededed; border-radius: 5px;}
.msg_confirm {padding:0 40px 10px 0; text-align:right;}
.msg_confirm button {padding:5px 15px; font-weight: 500; color:#fff; background:#a31aff; border: none; border-radius: 5px;}
.msg_confirm button:hover {background:#851bcc;}

/****************************************************************************************************************************************
공통 style 시작
*****************************************************************************************************************************************/
.container {position:relative; margin:0 auto; padding:40px 15px; width:1560px; text-align: center;}
.row {display: flex; flex-wrap: wrap;}

.page-tit {margin:0 auto 30px auto; padding:0 0 0 10px; width: 100%; line-height: 30px; text-align: left; font-size: 26px; font-weight:600; border-left:5px #ffd727 solid;}

/****************************************************************************************************************************************
header 시작
*****************************************************************************************************************************************/
header {position: relative; width: 100%;background: linear-gradient(180deg, rgba(191, 143, 45, 0.4) 0%, rgb(0, 0, 0, 0.8) 100%);}
.hd-inner {position: relative; margin: 0 auto; padding:0 15px; width:1650px;}

.mo-hd {display: none;}

/* tnb */
.tnb {position: relative; margin: 0 auto; padding:0 15px; width: 100%; width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; border-bottom:1px #55411a solid;}

.moright-close {display: none;}

ul.left-info {position: relative; margin:0; padding:0; width: 70%; display: flex; justify-content: flex-start; align-items: center;}
ul.left-info > li {position: relative; padding:0 5px; cursor: pointer;}
ul.left-info > li > svg {position: relative; padding:7px 7px; width: 20px; height:20px; color:#e6bc57; border-radius: 50%; background: #785604; border:1px #c99006 solid;}
ul.left-info > li.info-money {margin-right:5px; padding:6px 5px; display: flex; justify-content: center; align-items: center; background: #0e0f17; border: 1px solid #90929d; border-radius: 3px;}
ul.left-info > li.info-money > svg {width:23px; height: 23px; color:#ffd060; padding:0; background: none; border: none;}
ul.left-info > li.info-money > font {margin:0 0 0 8px; font-weight: 600; color:#10df8b}

ul.left-info > li.info-point {display: flex; justify-content: center; align-items: center;}
ul.left-info > li.info-point > font {margin:0 5px; font-size: 16px; font-weight: 600;}
ul.left-info > li.info-point > svg {padding:0; width: 25px; height: 25px; color:#f0ab05; background: none; border: none;}

.btn-point {padding:3px 10px; font-weight:600; color:#0b0b11; background: #f0ab05; border-radius: 100px;}
.message-number {position: absolute; top:-5px; right: 0; margin: 0 auto; padding:2px 4px; width: 24px; height: 24px; text-align: center; font-size: 13px; font-weight: 600; color:#fff; background: #0d83e0; border-radius: 50%;}

/* right-info */
ul.right-info {position: relative; margin:0; padding:0; width: 30%; display: flex; justify-content:flex-end; align-items: center;}
ul.right-info > li {position: relative; padding:0 10px; cursor: pointer;}
ul.right-info > li > img {position: relative; padding:5px 5px; width:40px;}
ul.right-info > li > svg {position: relative; padding:5px 5px; font-size: 30px; color:#ffb200; cursor: pointer;}

.tooltip {display: none; position: absolute; top:40px; left: 50%; transform: translate(-50%, 0); min-width: 80px; width: auto; z-index: 100; padding:3px 8px; text-align: center; font-size: 14px; font-weight:500; color: #000; background: #ffd989; border-radius: 5px; transition:all 0.2s ease-in-out;}
.tooltip::after {content: " "; position: absolute; top: -17%; left: 50%; transform: translate(-50%, 0) rotate(180deg); width: 0; height: 0; border-style: solid; border-width: 12px 12.5px 0 12.5px; border-color: #ffd989 transparent transparent transparent;}

/* top-btn */
.top-btn {margin-left:3px; padding:0 15px; min-width: 100px; line-height: 35px; font-size:13px; font-weight: 500; border-radius: 100px;}
.btn-login {color:#fff; background: #0cab6b; border: 1px solid #0cab6b;}
.btn-join {color:#000; background: #f0ab05; border: 1px solid #f0ab05;}
.btn-nonMember {color:#fff; background: transparent; border: 1px #90929d solid;}

/* top-notice */
.top-notice {position: relative; margin:0 auto; padding:10px 0; width: 100%;}
.notice-inner {position: relative; padding:5px 0; width: 100%; display: flex; align-items: center;}
.notice-inner > img {width: 30px;}
.notice-inner > marquee {margin-left:10px; padding:0; width: calc(100% - 40px); text-align: left; font-weight: 500;}


@media (hover: hover) and (pointer: fine) {
    ul.left-info > li:hover > svg {color:#ffe3a0;}

    ul.right-info > li:hover > svg,
    ul.right-info > li:hover > img {transform: scale(0.95);}

    ul.left-info > li:hover > .tooltip,
    ul.right-info > li:hover > .tooltip {display: block;}

    ul.left-info > li.info-money:hover > svg {color:#ffd060;}
    ul.left-info > li.info-point:hover > font, 
    ul.left-info > li.info-point:hover > svg {color:#f0ab05;}

    .btn-login:hover{background: #0acc7e; transform: scale(0.95);}
    .btn-join:hover {background: #fbc33b; transform: scale(0.95);}
    .btn-nonMember:hover {background: #90929d; transform: scale(0.95);}
}

/* nav */
.nav {position: relative; margin:0 auto; padding:0 0 15px 0; width: 100%; display: flex; justify-content:space-between; align-items: center;}
.top-logo > img {width: 230px; cursor: pointer;}
.moleft-close {display: none;}

ul.main-menu {position: relative; margin:0; padding:6px 12px; width: calc(100% - 300px); display: flex; justify-content:space-around; align-items: center; flex-wrap:nowrap; min-height:52px;
    background: #f37d28; border-radius: 100px; box-shadow: 0 -3px rgba(0,0,0,0.35) inset;
}
ul.main-menu > li {position: relative; margin:0; padding:0; flex:0 0 auto; display:flex; align-items:center;}
ul.main-menu > li > a {position: relative; display: inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; height:40px; line-height:1; text-align: center; font-size:16px; font-weight: 600; color:#fff; transition: 0.2s; white-space: nowrap; border-radius: 100px;}
ul.main-menu > li > a::before {display:none;}
ul.main-menu > li > a > img {position: relative; z-index: 1; width: 24px; height:24px; object-fit:contain; vertical-align: middle;}


@media (hover: hover) and (pointer: fine) {
    ul.main-menu > li > a:hover {background:#aa4b07; border-radius: 100px;}  
    ul.main-menu > li > a:hover::before {display: none;}  
}

/****************************************************************************************************************************************
logout modal 시작
*****************************************************************************************************************************************/
#logout-modal {display: none; position: fixed; left: 0; top: 0;width: 100%; height: 100%; z-index: 999999;}
.modal-overlay {display: flex; align-items: center; justify-content: center; height: 100%; background:rgba(36,43,69,.46);}
.modal-cont {position: relative; margin:0; padding: 46px 24px; width: 500px; background: rgba(19,22,32,.96); border-radius: 8px; border:1px solid #1a2645; box-shadow: 0 24px 60px rgba(36,43,69,.28);}
.modal-cont p {position: relative; margin: 0 auto; line-height: 56px; font-size:20px; font-weight: 900; text-align: center; color:#e7e9f2;}

.modal-btn {position:relative; margin:40px auto 0 auto; padding:0; width:100%; text-align: center;}
.modal-btn > a {display:inline-block; margin:0 6px; padding:0; width: 120px; line-height: 42px; font-size: 15px; font-weight: 900; text-align: center; color:#e7e9f2; text-shadow: none; border-radius: 6px; cursor: pointer; border:1px solid #1a2645; background:#121c2f;}
.modal-btn > a.modal-ok {background:#567cff; border-color:#567cff; color:#fff;}
.modal-btn > a.modal-cancel {background:#121c2f; border-color:#1a2645; color:#e7e9f2;}

@media (hover: hover) and (pointer: fine) {
    .modal-btn > a.modal-ok:hover {background:#436cf3;}
    .modal-btn > a.modal-cancel:hover {background:#162239;}
}

/****************************************************************************************************************************************
page_number 부분시작
*****************************************************************************************************************************************/
.page-number {position: relative; margin:0 auto; padding:40px 0; width:100%; text-align: center;}
.page-number > ul {position: relative; margin:0 auto; padding:0; width:100%; display: flex; justify-content: center;}
.page-number > ul > li {margin:0 2px; padding:0; width:40px; height:40px; line-height: 38px; font-size:16px; font-weight: 600; color:#fff; background: #735908; border: 1px #a28309  solid; cursor: pointer}
.page-number > ul > li:hover {background:#574201;}
.page-number > ul > li.active {background:#674f02;}


/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {clear:both; position: relative; margin:0 auto; padding:35px 0 0 0; width: 100%; background: rgba(191, 143, 45, 0.15); border-top: 1px solid #bf8e2e; overflow: hidden;}
.footer-logo {position: relative; margin:0 auto; padding:0 15px 40px 15px; width:1560px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px;}
.footer-logo > img {margin:0; padding: 5px 0; width: calc(100% / 10 - 2px); transition:0.3s; cursor: pointer;}

.copyright {position:relative; margin:0 auto; padding: 50px 0; text-align: center; border-top: 1px solid #bf8e2e;}
.copyright > p {color: #8e7956; font-size: 14px; font-weight: 500;}
.copyright > p > b {color: #cab083; font-weight: 500;}

/* back-to-top */
.back-to-top {position: fixed; bottom: 20px; right: 30px; z-index: 10; transition: 0.3s; margin:0 auto; width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; background:#312804; border: 1px #d9b00d solid; border-radius: 50%; cursor: pointer;}
.back-to-top > svg {color: #d9b00d; font-size: 38px; text-shadow: 0 1px 2px rgba(0, 0, 0, 1);}


ul.miniSub-tab {position: relative; margin:0 auto 30px auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center;}
ul.miniSub-tab > li {position: relative; margin:2px 2px;}
ul.miniSub-tab > li > a {cursor: pointer; display: inline-block; padding:0 10px; min-width: 140px; line-height: 40px; text-align: center; font-size: 16px; font-weight: 500; color:#e2cc92; background:#53441c; border-radius: 3px; border: 1px solid #756949;}    
ul.miniSub-tab > li.active > a {font-weight:600; color:#000; background: #ffd46e;}
ul.miniSub-tab > li.active > a:hover,
ul.miniSub-tab > li > a:hover {font-weight:600; color:#000; background:#ffbe25;}

@media (hover: hover) and (pointer: fine) {
    .back-to-top:hover > svg {color:#fff;}
}

/****************************************************************************************************************************************
모달 스타일 시작
*****************************************************************************************************************************************/
.modal {display: none; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; color: #fff; background: rgba(0, 0, 0, 0.5); }
.loader {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-bottom: 10px; width: 30px; height: 30px; border: 4px solid #1b1f2d; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite;}

@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1680px) {
    .hd-inner {padding:0; width: 100%;}

    .top-logo > img {width: 200px;}
    ul.main-menu {width: calc(100% - 230px);}
    ul.main-menu > li > a {font-size: 14px; padding:0 12px; gap:6px;}
    ul.main-menu > li > a > img {width: 20px; height:20px;}
} /* 미디어쿼리문 끝 */

@media (max-width:1590px) {
    .container, 
    .footer-logo {width: 100%;}
    
    .tnb {border-left:none; border-right:none;}
    .notice-inner,
    .nav {padding:0 15px;}
} /* 미디어쿼리문 끝 */

@media (max-width:1300px) { 
    .container {padding:15px 15px;}  
    
    /* mo-hd */
    .mo-hd {display: flex; justify-content: space-between; align-items: center; margin:0 auto; padding:5px 10px; width: 100%; background: linear-gradient(180deg, rgba(191, 143, 45, 0.4) 0%, rgb(0, 0, 0, 0.8) 100%); border-bottom:1px #55411a solid;}
    .mo-bars > svg,
    .mo-singUp > svg {font-size: 28px; color: #ebc978;}
    .mo-logo > img {width: 180px; cursor: pointer;}

    /* tnb */
    .tnb {position: fixed; top: 0; right: -120%; z-index: 99999; display: flex; flex-direction: column; justify-content: flex-start; padding:5px 0; width:100%; height:100%; background: #242424; border: none; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); transition: all 0.3s; overflow-y: auto;}
    .tnb.active {right: 0; width:260px;}
    .moright-close {display: block; padding:10px 10px; width: 100%; text-align: left;}
    .moright-close > svg {font-size: 28px; color: #ebc978; cursor: pointer;}

    ul.left-info {order: 2;}
    ul.right-info {order: 1;}

    ul.left-info {margin-top:30px; padding:0 15px; width: 100%; flex-direction: column;}
    ul.left-info > li {margin:5px auto; padding:10px 15px; width: 100%; display: flex; justify-content: flex-start; align-items: center; background:#3b3422; border: 1px solid #6a5d3d; border-radius: 5px;}
    ul.left-info > li.info-money {margin:5px auto; padding:10px 15px; width: 100%; justify-content: flex-start; border-radius: 5px;}
    ul.left-info > li.info-money > font {font-size: 16px; font-weight: 600;}

    ul.left-info > li.info-point {justify-content: flex-start;}
    ul.left-info > li.info-point > svg {width: 35px; height: 35px;}
    ul.left-info > li.info-point > font {padding:0 8px;}

    .tooltip {display:block; position: relative; top:unset; left:unset; transform: unset; z-index: unset; width: calc(100% - 30px); text-align: left; font-size: 16px; color:#fff; background: none;}
    .tooltip::after {display: none;}

    /* 로그인 전 */
    ul.right-info {width:100%; padding:0 5px; flex-direction: column; justify-content: center;}
    ul.right-info > li {margin:3px auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center;}
    .top-btn {padding: 0 8px; min-width: unset; width:100%; line-height: 30px; font-size: 13px; letter-spacing: -0.5px;}

    /* 로그인후 */
    ul.right-info > li > svg {display: none;}
    ul.right-info > li.nickName {padding:5px 0; background: #242424; border: 1px #ffd989 solid; border-radius: 5px;}
    ul.right-info > li.nickName > .mo-tip {padding:0 !important; width: auto !important; font-size: 14px !important; color: #fff !important; background: transparent !important;}
    ul.right-info > li.nickName > img {width: 35px;}
    ul.right-info > li > .top-logout {padding:8px 0; width:100%; text-align: center !important; color: #fff !important; background: #0cab6b !important;}

    /* nav */
    .nav {position: fixed; top: 0; left: -120%; z-index: 99999; display: block; padding:0; width:100%; height:100%; background: #242424; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); transition: all 0.3s; overflow-y: auto;}
    .nav.active {left: 0; width:250px;}
    .top-logo {position:relative; margin:0 auto; padding:10px 10px; width: 100%; display: flex; justify-content: space-between; align-items: center;}
    .top-logo > img {width: 150px;}
    .moleft-close {display: block;}
    .moleft-close > svg {font-size: 28px; color: #ebc978; cursor: pointer;}

    ul.main-menu {width: 100%; flex-direction: column; background: none; border-radius: 0; box-shadow: none;}
    ul.main-menu > li {padding:3px 10px; width: 100%;}
    ul.main-menu > li > a {text-align: left; padding:10px 15px; font-size: 16px; font-weight: 500; background:#3b3422; border: 1px solid #6a5d3d; border-radius: 5px;}
    ul.main-menu > li > a::before {display: none;}
    ul.main-menu > li > a > img {margin:0 5px 0 0; width: 30px;}

    /* top-notice */
    .top-notice {padding:5px 0; border-bottom:1px #55411a solid;}
    .notice-inner {padding:0 10px;}
    .notice-inner > img {width: 25px;}
    .notice-inner > marquee {width: calc(100% - 35px);}

    ul.miniSub-tab {margin:0 auto 15px auto; flex-wrap: wrap;}
    ul.miniSub-tab > li > a {min-width: unset; width: 100%; line-height: 36px; font-size: 13px;}
} /* 미디어쿼리문 끝 */

@media (max-width:640px) {
    .msg_confirm {padding:0 0 15px 0;}

    footer {padding: 15px 0 0 0;}
    .footer-logo {padding: 0 15px 15px 15px;}
    .footer-logo > img {padding:3px 0;width: calc(100% / 4 - 2px);}
    .copyright {padding:30px 0;}
    .copyright > p {font-size: 13px;}

    /* back-to-top */
    .back-to-top {bottom: 10px; right: 10px; width: 50px; height: 50px; background:#bf8e2e; border:1px #bf8e2e solid;}
    .back-to-top > svg {color:#fff; font-size: 24px;}

    .page-tit {margin:0 0 20px 0; font-size: 22px;}
} /* 미디어쿼리문 끝 */


@media (max-width:530px) {
    .modal-cont {margin:0 15px; width: calc(100% - 30px);}
} /* 미디어쿼리문 끝 */