@charset "utf-8";
/* *******************************************************
 * filename : layout_responsive.css
 * description : 전체 레이아웃 반응형 CSS
 * date : 2022-07-26
******************************************************** */

/* ========================================================
 * SETTING
======================================================== */
@media all and (max-width:1280px) {
	:root {
		--sub-visual-height: 600px;
		--sub-visual-height: auto;
		--header-top: 0;
		--header-height: 90px;
		--header-fixed-height: 90px;
	}
}

@media all and (max-width:800px) {
	:root {
		nav-open-btn --area-padding: 5vw;
		--sub-menu-height: 60px;
	}
}

/* ========================================================
 * FONT SIZE
======================================================== */
@media all and (max-width:1536px) {
	html {
		font-size: 0.6510vw;
	}

	/* 10 */
}

@media all and (max-width:1280px) {
	html {
		font-size: 0.8594vw;
	}

	/* 10 -> 11*/
}

@media all and (max-width:800px) {
	html {
		font-size: 1.375vw
	}

	/* 10 -> 11*/
}

@media all and (max-width:640px) {
	html {
		font-size: 1.7188vw
	}

	/* 10 -> 11*/
}

@media all and (max-width: 480px) {
	html {
		font-size: 2.2vw
	}

	/* 10 */
}

@media all and (max-width: 412px) {
	html {
		font-size: 2.4272vw
	}

	/* 10 */
}

@media all and (max-width:390px) {
	html {
		font-size: 2.1795vw
	}

	/* 10 -> 8.5 */
}

/* ========================================================
 * LAYOUT
======================================================== */
/* ****************** 공통클래스 ********************** */
@media all and (max-width:1620px) {

	/* max-width : (area-box width) + 60px */
	.area-box {
		padding: 0 var(--area-padding);
		max-width: none;
	}

	.memver-balance.pc {
		padding: 0 30px;
	}
}

@media all and (max-width:1460px) {
	.area {
		padding: 0 var(--area-padding);
		max-width: none;
	}
}

@media all and (max-width:1280px) {
	.pc-br {
		display: none;
	}

	.m-br {
		display: block;
	}

	.display-m {
		display: block;
	}

	.display-pc {
		display: none;
	}
}

@media all and (min-width: 801px) and (min-height: 970px) {
	.pc-br {
		display: none;
	}
}

@media all and (min-width: 1025px) and (max-height: 830px) {
	.pc-br {
		display: none;
	}
}

/* ****************** HEADER ********************** */
@media all and (max-width:1620px) {
	#headerInner {
		padding: 0 var(--area-padding);
	}

	#gnb>ul {
		margin-left: 8rem;
	}
}

@media all and (max-width: 1280px) {

	#header {
		visibility: visible;
		opacity: 1;
	}

	.sub-wrap #header {
		top: 0;
	}

	#headerInnerWrap {
		position: fixed;
		z-index: 99;
	}

	#header .logo a {
		height: 5.6rem;
	}

	#header.top-fixed #headerInner {
		background-color: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(5px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	#header.top-fixed .logo .white-ver {
		visibility: hidden;
		opacity: 0;
	}

	#header.top-fixed .logo .black-ver {
		visibility: visible;
		opacity: 1;
	}

	#header.top-fixed .header-lang-list li:before {
		background-color: rgba(0, 0, 0, 0.5);
	}

	#header.top-fixed .header-lang-list li a {
		color: #000;
	}

	#header.top-fixed .header-lang-list li a:after {
		background-color: #000;
	}

	#header.top-fixed .nav-open-btn {
		border-color: rgba(0, 0, 0, 0.2);
	}

	#header.top-fixed .nav-open-btn i {
		color: #000;
	}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box {
		padding-right: 70px;
	}

	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn,
	.sitemap-custom-btn {
		display: none;
	}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb {
		display: none;
	}

	.gnb-overlay-bg {
		display: none
	}


	/* -------- Header :: GNB(Mobile/기본스타일) -------- */
	.gnb-overlay-bg-m {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	#gnbM {
		display: block;
		position: fixed;
		top: 0px;
		right: -82%;
		width: 80%;
		height: 100%;
		max-width: 280px;
		background-color: #fff;
		z-index: 1000;
		transition: var(--transition-custom);
		visibility: hidden;
	}

	#gnbM.open {
		right: 0px;
		visibility: visible;
	}

	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-logo {
		position: relative;
		width: 100%;
		height: 130px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gnb-navigation-logo img {}

	.gnb-navigation-wrapper {
		position: relative;
		height: 100%;
		box-sizing: border-box;
		padding-top: var(--header-height);
		overflow-y: auto;
	}

	.header-util-menu-box+.gnb-navigation-wrapper {
		padding-top: 0;
		height: calc(100% - var(--header-height));
	}

	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation>li {
		border-bottom: 1px dashed rgba(241, 5, 77, 0.6);
	}

	#navigation>li>a {
		position: relative;
		display: block;
		padding: 2rem 0;
		color: #000;
		font-size: 1.8rem;
		font-weight: 500;
		letter-spacing: -0.01em;
	}

	#navigation>li.active>a {
		color: var(--main-color);
	}

	#navigation>li.has-2dep>a:before {
		font-family: xeicon;
		content: "\e914";
		position: absolute;
		top: 50%;
		right: 0;
		font-size: 1.3em;
		transform: translateY(-50%);
		font-weight: 400;
	}

	#navigation>li.has-2dep.active>a:before {
		content: "\e91b";
	}

	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation>li .gnb-2dep {
		display: none;
		padding: 15px 0;
		border-top: 1px dashed rgba(241, 5, 77, 0.6);
	}

	#navigation>li .gnb-2dep>ul>li {
		height: auto !important;
	}

	#navigation>li .gnb-2dep>ul>li>a {
		position: relative;
		display: block;
		color: rgba(0, 0, 0, 0.78);
		font-size: 1.6rem;
		padding: 1rem 1rem;
	}

	#navigation>li .gnb-2dep>ul>li>a:before {
		position: absolute;
		top: 1rem;
		left: 0;
		content: '·';
		display: inline-block;
	}

	#navigation>li .gnb-2dep>ul>li.on>a {
		color: #000;
		font-weight: 500;
	}

	/* GNB Mobile :: 메뉴영역 ::  3차 */
	#navigation>li .gnb-2dep>ul>li>.gnb-3dep {
		display: none;
		padding: 10px;
		background-color: #aaa;
		margin: 0 10px
	}

	#navigation>li .gnb-2dep>ul>li>.gnb-3dep>li>a {
		display: block;
		padding: 8px 0;
		font-size: 13px;
		color: #fff;
	}

	#navigation>li .gnb-2dep>ul>li>.gnb-3dep>li>a:before {
		display: inline-block;
		content: "-";
		margin-right: 5px;
	}

	/* -------- GNB Mobile :: 스타일2 (Full Style) -------- */
	#gnbM.gnb-style-full {
		top: -100%;
		right: 0;
		width: 100%;
		height: 100%;
		max-width: none;
	}

	#gnbM.gnb-style-full.open {
		top: 0px;
	}

	.gnb-style-full .gnb-navigation-wrapper {
		height: auto;
		width: 100%;
		position: relative;
		padding-top: 0;
	}

	.gnb-style-full .header-util-menu-box+.gnb-navigation-wrapper {
		top: var(--header-height);
	}

	.gnb-style-full-member .gnb-navigation-wrapper {
		bottom: var(--header-height);
	}

	.gnb-style-full .gnb-navigation-inner {
		display: table;
		width: 100%;
		height: 100%;
	}

	.gnb-style-full #navigation {
		display: block;
		vertical-align: top;
		padding: 0 var(--area-padding);
	}

	.gnb-style-full #navigation>li {
		opacity: 0;
		transform: translateY(-20px);
		transition: all 0s 0s;
	}

	.gnb-style-full #navigation>li>a {}

	.gnb-style-full #navigation>li .gnb-icon i {
		display: none;
	}

	.gnb-style-full.open #navigation>li {
		opacity: 1.0;
		transform: translateY(0px);
		transition: transform 0.8s, opacity 0.8s;
	}

	.gnb-style-full.open #navigation>li:nth-child(1) {
		transition-delay: 0.3s;
	}

	.gnb-style-full.open #navigation>li:nth-child(2) {
		transition-delay: 0.4s;
	}

	.gnb-style-full.open #navigation>li:nth-child(3) {
		transition-delay: 0.6s;
	}

	.gnb-style-full.open #navigation>li:nth-child(4) {
		transition-delay: 0.7s;
	}

	.gnb-style-full.open #navigation>li:nth-child(5) {
		transition-delay: 0.9s;
	}

	.gnb-style-full.open #navigation>li:nth-child(6) {
		transition-delay: 0.9s;
	}

	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn-box {
		display: block;
		position: fixed;
		top: 20px;
		right: var(--area-padding);
		z-index: 10000;
	}

	.nav-open-btn {
		width: 50px;
		height: 50px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		background-color: transparent;
		border-radius: 100%;
		text-align: center;
		position: relative;
		z-index: 10000;
		top: 40px;
		transition: all .3s;
		transition: var(--transition-custom);
		transition-property: border-color;
	}

	.nav-open-btn i {
		font-size: 22px;
		color: #fff;
		transition: var(--transition-custom);
		transition-property: color;
	}

	.nav-open-btn .open {
		display: block;
	}

	.nav-open-btn .close {
		display: none;
	}

	.nav-open-btn-box.active {
		right: 20px;
	}

	#header.top-fixed .nav-open-btn-box.active .nav-open-btn,
	.nav-open-btn-box.active .nav-open-btn {
		border: none;
	}

	.nav-open-btn-box.active .nav-open-btn i {
		color: #000;
	}

	.nav-open-btn-box.active .nav-open-btn .open {
		display: none;
	}

	.nav-open-btn-box.active .nav-open-btn .close {
		display: block;
	}
}

@media all and (max-width: 800px) {
	.header-lang-list li.lang-pc {
		display: none;
	}

	.gnb-style-full .gnb-navigation-inner .lang-m {
		display: block;
		padding: 30px;
	}

	.lang-m select {
		font-size: 18px;
		line-height: 24px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		width: 100%;
		height: 50px;
		padding: 0 10px;
	}

	.memver-balance.pc {
		display: none;
	}

	.memver-balance.m {
		display: block;
		margin: 0 30px;
		background-color: #e7e7e7;
		padding: 20px;
		border-radius: 5px;
	}

	.username {
		line-height: 40px;
		font-size: 18px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
	}

	.username strong {
		color: #0ba9b5;
	}

	.balance-box {
		overflow: hidden;
	}

	.balance-box ul {
		float: left;
		overflow: hidden;
	}

	.balance-box ul:last-child {
		margin-left: 20px;
	}

	.balance-box ul li {
		float: left;
		font-size: 16px;
		line-height: 40px;
	}

	.balance-box ul li:last-child {
		margin-left: 10px;
	}

	.balance-box ul li button {
		border: 1px solid rgba(0, 0, 0, 0.1);
		width: 40px;
		height: 40px;
		line-height: 38px;
		text-align: center;
		cursor: pointer;
		border-radius: 20px;
	}

	.balance-box ul li button i {
		position: relative;
		top: 3px;
		font-size: 18px;
	}

	.balance-box ul li>i {
		font-size: 24px;
		display: inline-block;
		position: relative;
		left: 0;
		top: 5px;
		color: #2bb673;
	}

	.balance-box ul li span {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0 20px;
		border-radius: 25px;
		color: #FFF;
		line-height: 40px;
		display: inline-block;
	}

	.nav-open-btn-box {
		top: 20px;
	}

	.nav-open-btn {
		top: 0;
	}
}

@media all and (max-width: 480px) {
	#header .logo a {
		height: 3.7rem;
	}

	.memver-balance.m {
		padding: 15px;
	}

	.balance-box ul li {
		font-size: 14px;
		line-height: 30px;
	}

	.balance-box ul li>i {
		font-size: 20px;
	}

	.balance-box ul li span {
		line-height: 30px;
	}

	.balance-box ul li button {
		width: 30px;
		height: 30px;
		line-height: 28px;
	}

	.balance-box ul li:last-child {
		margin-left: 5px;
	}

	.balance-box ul:last-child {
		margin-left: 10px;
	}

	.w-fixd {
		width: 98%;
	}
}

@media (max-width: 750px) {
	.popup {
		width: 95%;
	}

	.scroll-box {
		width: 100%;
		height: 400px;
	}
}

@media all and (max-width:320px) {
	.nav-open-btn-box {
		top: 24px;
	}

	.header-util-box {
		padding-right: 50px;
	}

	.nav-open-btn {
		width: 40px;
		height: 40px;
	}

	.gnb-navigation-logo img {
		height: 5rem;
	}
}


/* ****************** FOOTER ********************** */
@media all and (max-width:1280px) {

	/* -------- FOOTER :: 레이아웃 -------- */
	#footerInner {
		padding: 5rem 0 0;
		text-align: center;
	}

	.footer-left-con,
	.footer-right-con {
		float: none;
	}

	.footer-left-con {
		display: block;
	}

	/* Footer :: 푸터로고 */
	.foot-logo {
		margin-right: 0;
	}

	/* Footer :: 정보 */
	.footer-address {
		padding-top: 2.5rem;
	}

	.footer-address p:first-child {
		margin-bottom: 0.5rem;
		display: block;
		padding-right: 0;
	}

	/* Footer :: 푸터메뉴 */
	.foot-menu {
		margin-top: 1rem;
		text-align: center;
	}

	.foot-menu li {
		margin-top: 0;
		width: 100%;
		display: block;
		position: relative;
	}

	.foot-menu li a {
		padding: 1.5rem 0;
	}
}

@media all and (max-width:800px) {

	/* Footer :: 푸터로고 */
	.foot-logo img {
		height: 7.6rem;
	}

	/* Footer :: 정보 */
	.footer-address .footer-address-txt {
		font-size: 1.6rem;
	}

	/* Footer :: Copyright */
	.footer-copyright {
		font-size: 1.2rem;
	}

}