@charset "utf-8";

body {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; color:#fff; background: #000 url('../img/body-bg.png') center no-repeat fixed;
    /* transform: scale(0.8); transform-origin: top; */
}

/****************************************************************************************************************************************
Header
*****************************************************************************************************************************************/
header {position: relative; margin:0 auto; padding:0; width: 1528px; background: #1d1d1d;}
/* 로고 */
.logo-wrap {position: absolute; top:17px; left:0; right: 0; z-index: 99; margin:0 auto; padding:0; width: 240px;}
.logo-wrap > img {width: 300px; height: 95px; cursor: pointer;}

/* tnb */
.tnb {position: relative; margin:0 auto; padding:10px 30px; height: 69px; display: flex; align-items: center;}

ul.left-tnb,
.right-btn {position: relative; margin:0; padding:0; width:35%; display: flex; align-items: center;}
ul.left-tnb {justify-content: flex-end;}
.right-btn {justify-content:flex-start; gap: 10px;}

ul.left-tnb > li {position: relative; margin-left:20px; color:#ffd32d; font-weight: 600;}
ul.left-tnb > li > span {margin-left:3px; color:#ffd32d; font-weight: 600;}
.right-info {margin-right:10px; display:flex; align-items: center;}
.right-info > span {font-weight: 500;}
.right-info > i {margin-right:3px; color:#b489ff; font-size: 22px;}


/* 버튼 */
.btn-bg {width:120px; height: 30px; font-size: 14px; font-weight: 600; color:#999; background: url('../img/btn-frame.jpg') center no-repeat;}
.btn-point {margin:0 auto; padding:2px 40px; color:#fff; background: #0a3b52; border-radius: 8px; cursor: pointer;}

/* nav */
.nav {position: relative;}
.nav-inner {position: relative; margin:0 auto; padding:0 100px; width: 100%; height: 66px; display: flex; justify-content: center; align-items: center;}

/* menu */
ul.left-menu,
ul.right-menu {position: relative; margin:0 auto; padding:0; width: calc(100% / 2); display: flex; justify-content: space-between; align-items: center;}

ul.menu > li {text-align: center; font-weight: 600; color:#ffd32d; cursor: pointer;}
ul.menu > li > p {font-size: 14px;}
ul.menu > li > i {display: none;}

/* 유동적인 가운데 공간 */
.spacer {flex-grow: 1;}
.spacer2 {width: 600px;}

@media (hover: hover) and (pointer: fine) {
    .logo-wrap > img:hover {filter: brightness(120%);}
    .btn-bg:hover {color:#c1ad8b ;}
    .btn-point:hover {background:#0e65b1;}
    ul.menu > li:hover {color: #c1ad8b;}
}

/* pc-hidden처리 */
.mo-bar,
.mo-tnb {display: none;}

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


/****************************************************************************************************************************************
footer
*****************************************************************************************************************************************/
footer {position:relative; margin:40px auto; padding:0; width: 100%; text-align: center;}
.ft-inner {position: relative; margin:0 auto; padding:0 15px; width: 1300px; display: flex; gap:15px; justify-content: center;}
.ft-con {width: calc(100% / 3);}
.ft-con > h3 {margin:0 auto 20px auto; padding:0; width:100%; text-align: left; font-size: 20px; font-weight: 500; color: #c1ad8b;}
.ft-con > img {width: 100%;}

ul.quick-btn {position: relative; margin:0 auto; padding:0; display: flex; gap:20px; justify-content: flex-start; align-items: center;}
ul.quick-btn > li {position: relative; cursor: pointer;}
ul.quick-btn > li > img {width: 70px;}
ul.quick-btn > li > p { margin-top: 10px; font-size: 16px; font-weight: 500; color: #888;}

.copyright {margin:30px auto 0 auto; padding:0; width: 100%; text-align: center; font-size: 14px; font-weight: 500; color: #888;}

ul.quick-link {position: relative; margin:0 auto 20px auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
ul.quick-link > li {padding:0 5px; line-height: 20px; font-size: 16px; font-weight: 600; color: #888; cursor: pointer;}

.ft-logo {position: relative; margin:0 auto; padding:0; width: 100%; border-bottom: 1px solid #ffc107;}
.ft-logo > img {width: 100%;}

.copyright-2 {margin:0 auto; padding:30px 0; width: 100%; text-align: center; font-size: 16px; font-weight: 500; color: #fff;}

.back-to-top {position: relative; margin:-30px auto 0 auto; padding:0 15px 40px 15px; width:100%; text-align: right;}
.go-top {margin:0 auto; padding:10px 20px; font-size: 18px; font-weight: 700; text-align: center; color: #000; background: #ffc107; border: none; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.quick-btn > li:hover > p,
    ul.quick-link > li:hover {color: #fff;}
    .go-top:hover {background: #fff;}
}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1558px) {
    header {width: 100%;}
}

@media (max-width: 1380px) {
    header {position:fixed; top:0; height:69px; z-index: 9999;}
    .container {margin-top:69px; padding:0; width: 100%;}

    /* 모바일 메뉴바 */
    .mo-bar {display: block; position: absolute; left:10px; top:22px; width: 30px; cursor: pointer;}
    .mo-bar > span {display: block; margin: 0 auto 9px auto; width:100%; height: 2px; background: #ffd32d;}
    .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: 11px; 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: -11px; transform: rotate(45deg); transition: top .2s 0s, transform .2s .2s;}

    /* logo */
    .logo-wrap {top:0; padding:0; width: 150px; line-height: 69px;}
    .logo-wrap > img {width: 100%; height: auto;} 

    /* tnb */
    .tnb,
    .spacer,
    .spacer2 {display: none;}

    /* nav */
    .nav {display:none; position: fixed; top:69px; left:0; right:0; bottom:0; z-index: 999; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
    .nav.active {display:block;}
    .nav-inner {position: fixed; top: 69px; left: -100%; bottom:0; padding:0 5px; width: 280px; height: 110vh; flex-direction: column; justify-content:  flex-start; align-items: center; background: #161616; border-right: solid 1px #252525; transition: all 0.3s; z-index: 999; overflow-y: auto;}
    .nav-inner.active {left: 0;}

    ul.left-menu, 
    ul.right-menu {width: 100%;}
    ul.left-menu {margin-top:20px;}

    ul.menu {padding:0 10px; height: auto; flex-direction: column; align-items: flex-start; background: none; border: none; border-radius: 0;}
    ul.menu > li {display:flex; justify-content: flex-start; gap:5px; align-items: center; width: 100%; line-height: 35px; font-size: 15px; text-align: left; color:#fff;}
    ul.menu > li > p {display: none;}
    ul.menu > li > i {display: flex; margin-top:3px; font-size: 20px;}

    /* 모바일 로그인 후 */
    .mo-tnb {display: block; position:relative; margin:15px auto; padding:0; width: 100%;}
    ul.mo-info {display:flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;}
    ul.mo-info > li {margin:0; padding:5px 10px; width: calc(100% / 2 - 10px); text-align: center; font-size: 15px; color:#ffd32d; border: 1px #ffd32d solid; cursor: pointer;}
    ul.mo-info > li:first-child {margin:0 5px; width: calc(100% - 10px);}
    ul.mo-info > li > button {margin:0 auto; padding:0; width: 100%; text-align: center; color:#ffd32d; background: transparent; border: none;}
    ul.mo-info > li:hover {color:#fff; border:1px #1b67ba solid;}

   /* footer */
   .ft-inner {width: 100%;}
}/* 미디어쿼리문 끝 */


@media (max-width: 767px) {
    /* footer */
    .ft-inner {flex-direction: column; justify-content: center;}
    .ft-con {width: 100%;} 
    .mo-hid {display: none;}

    .ft-con > img {width:150px; filter: grayscale(1);}
    .copyright {margin:15px auto 30px auto; font-size: 12px;}

    .back-to-top {margin:0 auto; padding:20px 15px; border-top: 1px #ffd32d solid;}
    .go-top {padding:7px 15px; font-size: 14px;}
}/* 미디어쿼리문 끝 */