@charset "utf-8";

body {margin:0 auto; padding:0; color:#fff; background: #0c0603; background-attachment: fixed; transition: all 0.3s; overflow-y: auto; overflow-x: hidden;}

/****************************************************************************************************************************************
공통 시작
*****************************************************************************************************************************************/
.btn-yellow {position: relative; z-index: 1; color:#000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(#ffce6b, #ffbd3f); border: solid 1px #ffd273; border-radius: 5px; box-shadow: inset 0 0 0 1px #1d160e; transition: 0.3s;}
.btn-red {position: relative; z-index: 1; color:#fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 1); background: linear-gradient(#e3603b, #a3321e); border: solid 1px #d85c38; border-radius: 5px; box-shadow: inset 0 0 0 1px #1d160e; transition: 0.3s;}
.btn-orange {position: relative; z-index: 1; color:#000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(#ffac66, #d77421); border: solid 1px #ffac66; border-radius: 5px; box-shadow: inset 0 0 0 1px #1d160e; transition: 0.3s;}
.btn-gold {position: relative; z-index: 1; color:#000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(#dece8f, #998643); border: solid 1px #dece8f; border-radius: 5px; box-shadow: inset 0 0 0 1px #1d160e; transition: 0.3s;}

@media (hover: hover) and (pointer: fine) {
	.btn-yellow:hover {color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); background: linear-gradient(#ffac66, #d77421); border-color: #ffa04f; box-shadow: inset 0 0 0 1px #1d160e, 0 0 8px rgba(255, 255, 255, 0.4);}
	.btn-red:hover {color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); background: linear-gradient(#7188ff, #3243a3); border-color: #7188ff; box-shadow: inset 0 0 0 1px #1d160e, 0 0 8px rgba(255, 255, 255, 0.4);}
	.btn-orange:hover {color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);background: linear-gradient(#ffce6b, #ffbd3f); border-color: #ffd273; box-shadow: inset 0 0 0 1px #1d160e, 0 0 8px rgba(255, 255, 255, 0.4);}
	.btn-gold:hover {color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); background: linear-gradient(#ffeb9a, #c99e04); border-color: #fbe89d; box-shadow: inset 0 0 0 1px #1d160e, 0 0 8px rgba(255, 255, 255, 0.4);}
}

/****************************************************************************************************************************************
header 시작
*****************************************************************************************************************************************/
header {position: relative; z-index: 1; width: 100%; height: 88px; background: linear-gradient(180deg, #261e12, #17110b); border-top: solid 1px #614822; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);}
header::before,
header::after {content: ''; position: absolute; left: 0; width: 100%; height: 7px;}
header::before {top: 0; border-bottom: solid 1px #3d301f;}
header::after {bottom: 0; z-index: 2; height: 5px; background: linear-gradient(#9f6c40, #4f3319);}

/* header sticky */
header.sticky {position: fixed; left:0; top:0; z-index: 9;}
.hd-inner {position: relative; margin: 0 auto; padding:0 15px; width:1560px; height:100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

/* nav */
.nav {position:relative; height: 100%;}
ul.main-menu {position: relative; height: 100%; display: flex; justify-content: flex-start; align-items: center;}
ul.main-menu > li {position: relative; margin:0; padding:0 15px; width: auto; height: 100%; display: flex; align-items: center; font-size: 15px; color:#ffd989; font-weight: 500; white-space: nowrap; cursor: pointer;}
ul.main-menu > li > svg {margin-right: 5px; font-size: 15px;}

/* info-wrap */
.info-wrap {position: relative; margin: 0; display: flex; justify-content:flex-end; align-items: center;}

/* before-info */
.before-info {position: relative; display: flex; justify-content: flex-end; align-items: center; gap:5px;}
.before-info > button {width: 120px; height: 40px; font-weight: 600;}

/* after-info */
.after-info {position: relative; display: flex; justify-content: flex-end; align-items: center; gap:5px;}

.mo-info-btns {display: none;}

ul.info-list {position: relative; margin:0; padding:0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center}
ul.info-list > li {position: relative; margin: 2px 2px; width: calc(100% / 3 - 4px); height: 30px; display: flex; justify-content: flex-start; align-items: center; cursor: pointer;}
.icon-info {position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(#afa462, #6a5128, #372b17); border-radius: 5px; transition: 0.3s;}
.icon-info::before {content: ''; position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); background: #341e08; border-radius: 50%;}	
.icon-info > svg {position: absolute; z-index: 1; color: #ffdf46; font-size: 10px;}

.info-txt {margin-left:5px; font-size: 12px; font-weight: 500; white-space: nowrap; color: #fff;}
.info-txt > em {margin-left:5px; font-style: normal; font-size: 12px;  font-weight: 500; white-space: nowrap; color:#ff8b2d;}

.info-btns {gap:5px;}
.info-btns > button {width:calc(100% / 2 - 5px); height: 26px; font-size: 10px; font-weight: 600;}

@media (hover: hover) and (pointer: fine) {
	ul.main-menu > li:hover {color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 8px rgba(255, 255, 255, 0.5); background: linear-gradient(#afa462, #6a5128, #372b17);}
}


/****************************************************************************************************************************************
 footer 시작
*****************************************************************************************************************************************/
footer {clear:both; position: relative; margin:0 auto; padding:35px 0; width: 100%; overflow: hidden;}
footer::before,
footer::after {content: ''; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; box-shadow: 0 0 1000px #5e3310;}
footer::before {top: -100%; width: 70%; box-shadow: 0 0 1400px #5e3310, 0 0 2000px #5e3310;}
footer::after {top: -2px; left: 50%; transform: translateX(-50%); width: 956px; height: 12px;
    background: radial-gradient(#fed885, transparent, transparent);
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.footer-inner {position:relative; margin:0 auto; padding:0; width:1560px; text-align: center;}
.provider-logo {position: relative; margin:0 auto; padding:0 0 40px 0;}
.provider-logo > img {margin: 8px 15px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 1));}

.copyright {position:relative; margin:0 auto; padding: 30px 0 0 0;}
.copyright::before, 
.copyright::after {content: ''; position: absolute; z-index: -1;}
.copyright::after {left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(45deg, rgba(124, 100, 59, 0),rgba(124, 100, 59, 1),rgba(124, 100, 59, 0));}
.copyright > h1 > img {width:200px;}
.copyright > p {margin-top:10px; color: #65544a; font-size: 13px; 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; text-align: center; background: linear-gradient(#96653b, #59351d); border: none; border-radius: 10px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 1); cursor: pointer;
    color: #ffe890; font-size: 38px; overflow: hidden;
}
.back-to-top::before, 
.back-to-top::after {content: ''; position: absolute; z-index: -1;}
.back-to-top::before {left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: calc(100% - 6px); height: calc(100% - 6px); background: radial-gradient(#492f16, #291304); border-radius: 8px; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.5); transition: 0.2s;}
.back-to-top::after {left: 0; bottom: -5%; width: 140%; height: 100%; background: rgba(255, 255, 255, 0.05); border-radius: 30%;
    transform-origin: bottom left; 
    transform: rotate(-45deg);
}
.back-to-top > svg {color: #ffe890; font-size: 38px; vertical-align: middle; text-shadow: 0 1px 2px rgba(0, 0, 0, 1);}

@media (hover: hover) and (pointer: fine) {
	.back-to-top:hover {box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 15px rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.5);}
}

/****************************************************************************************************************************************
 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: 40px; font-size:16px; color:#fff; background: #5e3310; border: 1px #895328 solid; cursor: pointer}
.page-number > ul > li:hover {background:#7d4517;}
.page-number > ul > li.active {background:#9f571d; border:1px #cf8244 solid;}

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


/****************************************************************************************************************************************
page-content 시작
*****************************************************************************************************************************************/
.page-content {position: relative; z-index: 1; margin:0 auto; padding: 0 0 30px 0; width:100%; background: #442a14 url('../img/main/main-bg.png') top center; background-size: cover;}
.page-content::before {content: ''; position: absolute; top:0; left: 0; width: 100%;height: 100%; background: url('../img/main/toggle-glow.png') top center no-repeat; animation: toggleGLow 2s ease infinite;}
@keyframes toggleGLow {
    0% {opacity: 1;}
    50% {opacity: 0.6;}
    100% {opacity: 1;}
}


/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1590px) {
	.hd-inner,
	.container,
	.footer-inner {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:1300px) {
	/* header */
	header {height: auto;}
	header::before,
	header::after {height: 3px;}
	.hd-inner {padding:0;}

	/* nav */
	.nav {width: 100%; border-bottom: solid 1px rgba(255, 255, 255, 0.1);}
	ul.main-menu {width: 100%; height: 44px; justify-content: space-around;}
	ul.main-menu > li {width: auto; justify-content: center;}

	/* .info-wrap */
	.info-wrap {width:100%; flex-wrap: wrap; justify-content: center;}

	/* before-info */
	.before-info {padding:10px 0; width: 100%; justify-content: center;}
	.before-info > button {width: calc(50% - 8px); height: 33px; display: flex; justify-content: center; align-items: center; gap: 5px;}

	/* after-info */
	.after-info {padding:8px 5px; width:100%; flex-wrap: wrap; justify-content: center;}
	.mo-info-btns {width:100%; display: flex; justify-content: center; align-items: center; gap:5px;}
	.mo-info-btns > button {padding: 5px 0; width: calc(100% / 2 - 5px); display: flex; justify-content: center; align-items: center; gap:5px;}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
	/* nav */
	ul.main-menu {padding:0 5px;}
	ul.main-menu > li {font-size: 13px;}
	ul.main-menu > li > svg {display: none;}

	/* after-info */
	.after-info {gap:5px;}
	ul.info-list {padding:10px 10px;}

	/* footer */
    .provider-logo > img {margin:8px 10px; max-width:80px; max-height:34px;}
}/* 미디어쿼리문 끝 */

@media (max-width:639px) {
	/* nav */
	ul.main-menu > li {padding:0; font-size: 12px; font-weight: 600; letter-spacing: -0.5px;}

	/* after-info */
	ul.info-list > li {width: calc(100% / 2 - 4px);}
	ul.info-list > li:nth-child(1) {order: 1;}
	ul.info-list > li:nth-child(2) {order: 3;}
	ul.info-list > li:nth-child(3) {order: 5;}
	ul.info-list > li:nth-child(4) {order: 2;}
	ul.info-list > li:nth-child(5) {order: 4;}
	ul.info-list > li:nth-child(6) {order: 6;}
}/* 미디어쿼리문 끝 */

@media (max-width:500px) {
	/* back-to-top */
    .back-to-top {bottom: 10px; right: 10px; width:50px; height: 50px;}
    .back-to-top > svg {font-size: 30px; vertical-align: 3px;}    
} /* 미디어쿼리문 끝 */

@media (max-width:400px) {
	ul.main-menu > li {font-size: 11px;}
}/* 미디어쿼리문 끝 */