@charset "utf-8";
:root {
	--logo: url(/literature/img/logo.svg) no-repeat 0 0 / 25rem;
}

.wrap {
	margin: 0 auto;
	max-width: 160rem;
	width: 100%;
}

header {
	position: relative;
	z-index: 999;
}

header .wrap {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 12rem;
	z-index: 99;
}

header h1 a {
	display: block;
	width: 25rem;	
	height: 5.8rem;
	background: var(--logo);
	background-position: 0 -5.8rem ;
}

#lnb {
	display: flex;
	align-items: center;
	gap: 6.4rem;
}

#lnb>li {
	position: relative;
}

#lnb>li>a {
	position: relative;
	color: #3C3733;
	font-size: 2rem;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.04rem;
}

#lnb>li>.culture-264 i {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2.4rem;
	width: 9.9rem;
	height: 2.5rem;
	border-radius: 5rem;
	box-sizing: content-box;
	text-shadow: none;
	border: 0.2rem solid #3C3733;
}

#lnb>li>.culture-264 i::before {
	content: '';
	position: absolute;
	width: 10.3rem;
	height: 2.9rem;
	background: url(/literature/img/menu07.svg) no-repeat 0 0 / 10.3rem;
	background-position: 0 -2.9rem;
}

#lnb .sub-menu a {
	color: #3C3733;
	font-weight: 600;
	letter-spacing: -0.032rem;
}

#lnb .sub-menu .select a,
#lnb .sub-menu a:hover {
	color: #744925;
	text-decoration: underline;
}

#gnb {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

#gnb a {
	display: block;
}

#gnb .login {
	display: flex;
	gap: 1rem;
}

#gnb .login a {
	width: 4rem;
	height: 4rem;
	background: url(/literature/img/gnb.svg) no-repeat 0 -4rem / 12rem;
}

#gnb .login .logout {
	background-position: -4rem -4rem;
}

#gnb .login .mypage {
	background-position: -8rem -4rem;
}

#gnb .allmenu {
	position: relative;
	width: 3.6rem;
	height: 3.6rem;
}

#gnb .allmenu::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7rem;
	width: 100%;
	height: 0.2rem;
	background: #3E3833;
	box-shadow: 0 1rem #3E3833, 0 2rem #3E3833;
	transition: .3s;
}

#gnb .allmenu::after {
	content: '';
	position: absolute;
	top: 1.8rem;
	left: 0;
	width: 100%;
	height: 0.2rem;
	background: #3E3833;
	opacity: 0;
	transition: .3s;
}

footer {
	position: relative;
	padding-top: 10rem;
	padding-bottom: 10rem;
	background: #F5F5F5;
	z-index: 2;
}

footer .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap: 2rem;
}

footer .logo {
	width: 25rem;
	height: 5.8rem;
	background: var(--logo);
	background-position: 0 -11.6rem;
}

footer .btm-link {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
}

footer .btm-link a {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	color: #685A4D;
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
	line-height: 180%;
}

footer .btm-link a::before {
	content: '';
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: #D9D9D9;
}

footer .btm-link li:first-child a::before {
	display: none;
}

footer .btm-link .personal {
	color: #B7641E;
	font-weight: 600;
}

footer .copy * {
	color: #8B8784;
	text-align: center;
	font-weight: 500;
	line-height: 180%;
}

footer .copy address {
	margin-top: 3rem;
	font-size: 2rem;
}

footer .btm-sns {
	display: flex;
	align-items: center;
	gap: 3.2rem;
}

footer .btm-sns a {
	display: block;
	background: url(/literature/img/btm-sns.svg) no-repeat 0 0 / 9.9rem;
}

footer .btm-sns .insta a {
	width: 2.3rem;
	height: 2.2rem;
}

footer .btm-sns .blog a {	
	width: 4.5rem;
	height: 2rem;
	background-position: -2.5rem 0;
}

footer .btm-sns .youtube a {
	width: 2.6rem;
	height: 2.6rem;
	background-position: -7.2rem 0;
}

#top {
	position: fixed;
	right: 5rem;
	bottom: 5rem;
	width: 6.1rem;
	height: 6.1rem;
	border-radius: 50%;
	background: #444 url(/literature/img/top.svg) no-repeat 0 0 / 100%;
	z-index: 9;
	overflow: hidden;
}

/*** pc ***/
@media all and (min-width:1301px) {
	html{
		font-size: 62.5% !important;
	}
}

@media all and (min-width:1101px) {
  body.lnb-on::after,
	body.allmenu-on::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
		background: rgba(0, 0, 0, 0.70);
    z-index: 3;
  }

	header .bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		width: 100%;
		background: #fff;
		z-index: -1;
	}

	#lnb>li.select>a::before {
		content: '';
		position: absolute;
		right: -0.7rem;
		top: -0.7rem;
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 50%;
		background: #F09F26;
	}

	#lnb>li.select>a.culture-264::before {
		display: none;
	}
	
	#lnb>li.select>a,	
	#lnb>li>a:hover {
		color: #F09F26 !important;
		text-shadow: none;
	}

	#lnb .sub-menu {
		position: absolute;
		top: 11rem;
		left: 0;
		width: 100%;
		height: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		text-align: center;
		opacity: 0;
		overflow: hidden;
	}
	
	#lnb>li:nth-child(1) .sub-menu {
		min-width: 7.5rem;
	}
	
	#lnb>li:nth-child(2) .sub-menu {
		margin-left: -0.5rem;
		min-width: 8.2rem;
	}
	
	#lnb>li:nth-child(3) .sub-menu {
		margin-left: -1rem;
		min-width: 5.5rem;
	}
	
	#lnb>li:nth-child(4) .sub-menu {
		min-width: 6rem;
	}
	
	#lnb>li:nth-child(5) .sub-menu {
		margin-left: -1rem;
		min-width: 9rem;
	}
	
	#lnb>li:nth-child(6) .sub-menu {
		margin-left: -0.5rem;
		min-width: 5.5rem;
	}
	
	#lnb>li:nth-child(7) .sub-menu {
		top: 12rem;
		min-width: 8.2rem;
	}

	.lnb-on header::before,
	.allmenu-on header::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-bottom: 1px solid #E7E7E7;
	}
	
	.lnb-on .bg,
	.allmenu-on .bg {
		height: 44rem;
	}	
	
	.lnb-on #lnb .sub-menu, 
	.allmenu-on #lnb .sub-menu {
		height: 100%;
		opacity: 1;
		overflow: visible;
	}
	
	.allmenu-on #gnb .allmenu::after {
		transform: rotate(45deg);
		opacity: 1;
	}
	
	.allmenu-on #gnb .allmenu::before {
		top: 1.8rem;
		width: 3.6rem;
		height: 0.2rem;
		transform: rotate(-45deg);
		box-shadow: none !important;
	}
	
}

/*** min-pc ***/
@media screen and (max-width:1300px) {
	html{
		font-size: 50% !important;
	}
	
	.wrap {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/*** tablet ***/
@media screen and (max-width:1100px) {
	#lnb {
		display: none;
	}

	.fix {
		overflow: hidden;
	}

	.fix header {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background: #fff;
	}

	.fix #lnb {
		position: absolute;
		left: 0;
		top: 12rem;
		display: block;
		padding: 2rem 2.4rem 4rem 2.4rem;
		width: 100%;
		height: calc(100vh - 12rem);
		border-top: 1px solid #E7E7E7;
		background: #fff;
		overflow: scroll;
	}
	
	.fix header h1 a {
		background-position: 0 -5.8rem;
	}

	.fix #gnb .login a {
		background-position: 0 -4rem;
	}
	
	.fix #gnb .login .logout {
		background-position: -4rem -4rem;
	}
	
	.fix #gnb .login .mypage {
		background-position: -8rem -4rem;
	}
	
	.fix #gnb .allmenu::before,
	.fix #gnb .allmenu::after {
		background: #3E3833;
	}
	
	.fix #gnb .allmenu::after {
		transform: rotate(45deg);
		opacity: 1;
	}
	
	.fix #gnb .allmenu::before {
		top: 1.8rem;
		width: 100%;
		height: 0.2rem;
		transform: rotate(-45deg);
		box-shadow: none;
	}
	
	#lnb>li {
		width: 100%;
	}

	#lnb>li>a {
		position: relative;
		display: block;
		padding: 2rem 3rem 2rem 0;
		color: #161616 !important;
		font-weight: 700;
		text-shadow: none !important;
	}
	
	#lnb>li.select>a {
		background: url(/literature/img/menu-mb.svg) no-repeat right center / 2.4rem;
	}

	#lnb>li>a::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 0.1rem solid #ECE7E4;
	}

	#lnb>li.select>a::after {
		border-bottom: 0.3rem solid #263238;
	}

	#lnb>li>a.culture-264::after {
		display: none;
	}

	#lnb>li.select>a.culture-264::after { 
		display: block;
	}

	#lnb>li>.culture-264 i {
		border-color: #3C3733 !important;
	}
	
	#lnb>li>.culture-264 i::before  {
		background-position: 0 -2.9rem !important;
	}
	
	#lnb>li>.culture-264 i::after {
		display: none;
	}

	#lnb .sub-menu {
		display: none;
		padding: 1rem 1.2rem;
		border-radius: 0rem 0rem 1rem 1rem;
		border-bottom: 1px solid #ECE7E4;
	}

	#lnb .select .sub-menu {
		display: block;
	}

	#lnb .sub-menu a {
		display: block;
		padding: 0.8rem 0rem;
	}
	
	footer {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	footer .wrap {
		flex-direction: column;
	}
}

/*** mobile ***/
@media screen and (max-width:840px) {
	header .wrap {
		height: 8rem;
	}

	header h1 a {
		width: 15rem;
		height: 3.5rem;
		background-size: 15rem;
	}

	.fix header h1 a {
		background-position: 0 -3.5rem;
	}

	.fix #lnb {
		top: 8rem;
		height: calc(100vh - 8rem);
	}

	#gnb {
		gap: 1rem;
	}
	
	#gnb .allmenu {
		width: 3rem;
	}

	footer .logo {
		width: 16rem;
		height: 3.7rem;
		background-position: 0 -7.4rem;
		background-size: 100%;
	}
	
	footer .btm-link {
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	
	footer .btm-link li {
		flex-basis: calc(50% - 0.2rem);
	}

	footer .btm-link a {
		justify-content: center;
		text-align: center;
		padding: 0.8rem;
		font-size: 1.6rem;
		background: #EBEBEB;
	}

	footer .btm-link a::before {
		display: none;
	}

	footer .copy * {
		font-size: 1.3rem;
	}

	footer .copy address {
		font-size: 1.6rem;
	}

	#top {
		right: 3%;
		bottom: 3%;
		width: 5rem;
		height: 5rem;
	}	
}

/* 레이어 팝업 */
.layer_popup{position:absolute; left:var(--popL); top:var(--popT); z-index:9999; padding:1px; background:#444; --popL:5px; --popT:5px}
.layer_popup img{max-width: 100%;}
.layer_popup .pop_tit{padding:5px 10px; background:#2b2b2b; color:#fff; font-weight:600;}
.layer_popup .pop_con{font-size: 0px; line-height: 0;}
.layer_popup .pop_con img{width: 100%; }
.layer_popup .pop_close{overflow:hidden; padding:7px 10px; background:#444; font-weight:600; color:#fff; text-align:left; font-size:14px;}
.layer_popup .pop_close .today{float:left; text-align:right; color:#fff;}
.layer_popup .pop_close .close{display: block; float:right; margin-top:1px; color:#fff;}

.layer_popup:nth-of-type(2){left:calc(var(--popL) * 2); top:calc(var(--popT) * 2);}
.layer_popup:nth-of-type(3){left:calc(var(--popL) * 3); top:calc(var(--popT) * 3);}
.layer_popup:nth-of-type(4){left:calc(var(--popL) * 4); top:calc(var(--popT) * 4);}
.layer_popup:nth-of-type(5){left:calc(var(--popL) * 5); top:calc(var(--popT) * 5);}