@charset "utf-8";
/* User: PL Kim */

/********************/
/* header           */
/********************/
.contants { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; max-width: var(--header-max-width); height: var(--horizontal-header-height); margin: 0 auto; padding: var(--padding); }

/* top-menu */
#top-menu { position: fixed; top: 0; width: 100%; min-width: var(--contents-min-width); height: var(--horizontal-top-height); z-index: 99999; background: var(--horizontal-top-bg); box-shadow: var(--box-shadow); }
#top-menu .logo img	{ width: 164px; }

#top-menu .tnb											{ display: inline-block; }
#top-menu .tnb .menu li									{ display: inline-block; width: auto; }
#top-menu .tnb .menu li a.btn-square					{ font-weight: 500; }
#top-menu .tnb .menu li a:not(.btn, .btn-square)		{ display: inline-block; overflow: hidden; margin-left: var(--margin-text); color: var(--horizontal-tnb-color); font-size: 16px; vertical-align: bottom; }
#top-menu .tnb .menu li a:not(.btn, .btn-square):hover	{ color: var(--horizontal-tnb-color--hover); }
#top-menu .tnb .menu li a:second-child					{ max-width: 260px; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }
#top-menu .menu-close	{ display: none; }
#top-menu .menu-close i	{ color: var(--horizontal-hamburger-color); font-size: var(--font-size--lg); }

/* header */
#header { position: fixed; top: var(--horizontal-header-height); width: 100%; min-width: var(--contents-min-width); z-index: 9999; background: var(--horizontal-header-bg); box-shadow: var(--box-shadow); }
#header .header-area						{ width: 100%; overflow: hidden; }
#header .header-area .header-wrap			{ width: 100%; }
#header .header-area .header-wrap .gnb-wrap	{ width: 100%; top: var(--horizontal-gnb-height); }
#header .logo		{ display: none; }
#header .logo img	{ width: 164px; }

/* gnb */
#header .gnb { display: table; width: var(--horizontal-gnb-width); }
#header .gnb .menu { display: table-cell; width: var(--horizontal-gnb-menu-width); font-weight: bold; text-align: center; }
#header .gnb .menu a.category { display: block; color: var(--horizontal-gnb-color); font-size: var(--font-size--md); line-height: var(--horizontal-header-height); cursor: default; }
#header .gnb .menu .lnb { height: 200px; padding-top: var(--padding); border-right: var(--horizontal-navi-border); }
#header .gnb .menu:first-child .lnb { border-left: var(--horizontal-navi-border); }
#header .gnb .menu .lnb li		{ line-height: 50px; }
#header .gnb .menu .lnb li a	{ display: block; color: var(--horizontal-gnb-color--active); font-size: var(--font-size--sm); }
#header .gnb .menu .lnb li a:hover	{ color: var(--horizontal-lnb-color--hover); }

/* gnb - on */
/* #header .gnb .on a.category { background: var(--horizontal-header-bg--on); } */

/* gnb - scroll */
/* #header.header-scroll { background: var(--horizontal-header-bg--scroll); }
#header.header-scroll .gnb .menu a.category { color: var(--horizontal-gnb-color--scroll); }
#header.header-scroll .gnb .menu .lnb li a	{ color: var(--horizontal-lnb-color--scroll); } */

/* gnb - active */
#header .header-area.active { background: var(--horizontal-header-bg--active); box-shadow: var(--box-shadow); }
#header .header-area.active .header-wrap { border-bottom: var(--horizontal-navi-border); }
#header .header-area.active .gnb .menu a.category	{ color: var(--horizontal-gnb-color--active); background: var(--horizontal-header-bg--active); }
#header .header-area.active .gnb .menu .lnb li a	{ color: var(--horizontal-lnb-color--active); }

/* hamburger */
#header .hamburger { display: none; }

@media screen and (max-width: 1200px) {
	/* top-menu */
	#top-menu { display: none; width: 100%; background: var(--horizontal-top-bg--mobile);}
	#top-menu .logo { display: none; }
	#top-menu .tnb .menu li:nth-child(2) a:first-child { max-width: 70px!important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	
	/* header */
	#header { top: 0; background: var(--horizontal-header-bg--mobile); }
	#header .logo { display: block; }
	
	/* menu */
    #header .header-area .header-wrap .gnb-wrap { display: none; position: fixed; top: var(--horizontal-header-height); right: 0; height: 100%; background: var(--overlay); }
    
	/* menu - gnb */
	#header .gnb { width: 100%; background: var(--horizontal-gnb-bg--mobile); }
	#header .gnb .menu { display: block; width: 100%; padding: var(--padding-text) 0; }
	#header .gnb .menu .category { color: var(--horizontal-gnb-color--mobile); cursor: pointer; }
	#header .gnb .menu .lnb { display: none; height: auto; padding: var(--padding) 0; background: var(--horizontal-lnb-bg--mobile); border: var(--border--none)!important; }
	/* mobile - hamburger */
	#header .hamburger		{ display: inline-block; width: 40px; height: 40px; }
	#header .hamburger i	{ color: var(--horizontal-hamburger-color); font-size: 40px; }
}

/********************/
/* footer           */
/********************/
footer { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
footer { width: 100%; height: var(--footer-height); margin-top: var(--footer-height); transform: translateY(-100%); background: var(--footer-bg); }
footer .container { width: 100%; max-width: var(--contents-max-width); text-align: left; color: var(--footer-color); }

footer .container ul li { display: inline-block; width: auto; }
footer .container ul li::after { content: "|"; padding: 0 8px 0 10px; }
footer .container ul li:last-child::after { content: ''; padding: 0; }
footer .container .logo img { margin: 20px 0; }

@media screen and (max-width: 1024px){
	footer { height: var(--footer-height--mobile); margin-top: var(--footer-height--mobile); }
}

.extra-footer { width: 100%; height: var(--extra-footer-height); background: var(--extra-footer-bg); }
.extra-footer .contants { height: 100%; }
.extra-footer .contants ul { width: auto; margin: 0; }
.extra-footer .contants ul li { display: inline-block; width: auto; margin: 0 14px; color: var(--footer-color); }
.extra-footer .contants ul li a { color: var(--footer-color); }
.extra-footer .contants ul li:nth-child(2) { margin-left: 40px; }