@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");

*:focus-visible{outline:0.3rem solid #000; box-shadow: inset 0.2rem 0.2rem #ffd84e, inset -0.2rem -0.2rem #ffd84e;}
* {box-sizing:border-box;}
body, body * {color: #252525; font-family:'Pretendard Variable', 'Malgun Gothic', '맑은고딕', sans-serif; letter-spacing: -0.1px;}
html,body,div,p,dl,dt,dd,ol,ul,li,label,legend,table,input,button,input[type=text], input[type=password], textarea, select {font-family:'Pretendard Variable', 'Malgun Gothic', '맑은고딕', sans-serif;}
select, textarea {font-family:'Pretendard Variable', 'Malgun Gothic','맑은고딕',sans-serif;}

:root {
	--navy: #112637;
  --charcoal: #252525;
	--lemon: #FFF175;
	--turquoise: #01919C;
  --purple: #7048C5;
	--margenta: #F33261;
	--margenta-with: #F0F4FF;
	--gradation: linear-gradient(135deg, #00AE96 0%, #0173BA 100%);
	--bright-gray: #DEDEDE;
  --blue: #006AB6;
  --dark-blue: #004F88;

	--inc: url(../img/inc.svg) no-repeat 0 0;
	--inc40: 40px;
	--inc-40: -40px;
}

a[href^=tel] {
	text-decoration:inherit;
	color: inherit;
}

.wrap {
	margin: 0 auto;
	max-width: 1600px;
	width: 100%;
}

header {
	position: relative;
	width: 100%;
	height: 120px;
	z-index: 9;
}

header .wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	z-index: 9;
}

header h1 a {
	display: flex;
	align-items: center;
	gap: 10px;
}

#lnb>ul>li>a {
	display: block;
}

#lnb>ul>li>a span {
	position: relative;
	display: inline-block;
	padding: 10px;
	color: var(--navy);
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	word-break: keep-all;
}

#lnb>ul>li.select span {
	color: var(--turquoise);
	font-weight: 700;
}

#lnb>ul>li>a> span::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7.5px;
	margin: auto;
	width: 0;
	height: 12px;
	background: var(--lemon);
	transition: .3s;
	z-index: -1;
}

#lnb>ul>li.select>a span::before,
#lnb>ul>li>a:hover span::before {
	width: 100%;
}

.gnb {
	display: flex;
	align-items: center;
	gap: 20px;
}

.gnb a {
	width: var(--inc40);
	height: var(--inc40);
	background: var(--inc);
}

.gnb .login {
	background-position: 0 0;
}

.gnb .logout {
	background-position: var(--inc-40) 0;
}

.gnb .mypage {
	background-position: calc(var(--inc-40) * 2) 0;
}

.gnb .search {
	background-position: calc(var(--inc-40) * 3) 0;
}

.search-on .gnb .search {
	background-position: calc(var(--inc-40) * 4) 0;
}

.search-on::after {
	content: '';
	position: absolute;
	left: 0;
	top: 120px;
	width: 100%;
	height: 72px;
	background: var(--turquoise);
	z-index: -1;
}

.search-on #search-box {
	display: flex;
}

#search-box {
	position: absolute;
	left: 0;
	right: 0;
	top: 120px;
	display: none;
	align-items: center;
	width: 100%;
	height: 72px;
}

#search-box form {
	display: flex;
	gap: 20px;
	width: 100%;
}

#search-box form label {
	position: absolute;
	margin: 0;
}

#search-box input[type="text"],
#search-box input::placeholder {
	text-align: right;
	width: 100%;
	height: var(--inc40);
	color: #F0F4FF;
	font-size: 19px;
	font-weight: 600;
	line-height: 22px;
	border: none;
	background: none;
}

#search-box input[type="submit"] {
	width: var(--inc40);
	height: var(--inc40);
	border: none;
	text-indent: -5000px;
	background: var(--inc);
	background-position: calc(var(--inc-40) * 5) 0;
}

footer {
	background: #4F5C82;
}

footer .wrap {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding-top: 80px;
	padding-bottom: 80px;
}

footer .copy address,
footer .copy address span {
	color: #FFF;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}

footer .copy p {
	margin-top: 16px;
	color: #A6AFC9;
	font-size: 17px;
	font-weight: 500;
	line-height: 28px;
}

footer .link {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

footer .link ul {
	display: flex;
	gap: 40px;
}

footer .link li a {
	position: relative;
	color: #FFF;
	font-size: 18px;
	font-weight: 700;
}

footer .link li:nth-child(2) a {
	color: var(--lemon);
}

footer .link li a::before {
	content: '';
	position: absolute;
	top: 4.5px;
	left: -20px;
	width: 2px;
	height: 12px;
	background: #6A7593;
}

footer .link li:nth-child(1) a::before {
	display: none;
}

footer .top {
	position: relative;
	padding: 9px 50px 8px 28px;
	color: #FFF;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	border-radius: 44px;
	background: #384363;
}

footer .top::before {
	content: '';
	position: absolute;
	right: 24px;
	top: 12px;
	width: 20px;
	height: 20px;
	background: var(--inc);
	background-position: 0 -40px;
	transition: .3s;
}

footer .top:hover::before {
	top: 5px;
}

/*뉴스레터*/
.news-letter {
  align-items: flex-start;
	border-radius: 28px;
  border: 10px solid #FFF;
  background: url(../img/news-letter.png) no-repeat right -10px bottom, linear-gradient(116deg, #FFF4F8 0%, #F5E9FF 98.22%);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
}

.news-letter .stit {
	color: rgba(17, 38, 55, 0.21);
	letter-spacing: 0.56px;
}

.news-letter h3 span {
  display: block;
}

.news-letter .more {
  padding: 9px 46px 9px 20px;
  color: #FFF;
  font-weight: 700;
  border-radius: 100px;
  background: var(--margenta);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
}

.news-letter .more::before {
  right: 20px;
  top: 10px;
  background: var(--inc);
  background-position: 0 -60px;
  transition: .3s;
}

/*pc*/
@media screen and (min-width:1281px){
	header h1 a {
		color: #666;
		font-size: 21px;
		font-weight: 700;
	}

	#lnb {
		width: 60%;
	}

	#lnb h2 {
		display: none;
	}

	#lnb>ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	#lnb>ul>li {
		position: relative;
		text-align: center;
		min-width: 120px;
	}

	#lnb>ul>li:nth-last-child(1) {
		display: none;
	}

	#lnb .sub-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		text-align: center;
		gap: 20px;
		padding-top: 30px;
		width: 100%;
		z-index: 3;
	}

	.nav-on  #lnb .sub-menu {
		display: flex;
	}

	#lnb .sub-menu a {
		color: #444;
		text-align: center;
		font-size: 17px;
		font-weight: 500;
		line-height: 22px;
	}

	#lnb .sub-menu li.select a,
	#lnb .sub-menu li a:hover {
		color: var(--turquoise);
		text-decoration-line: underline;
	}

	#lnb .sub-menu .depth {
		display: none;
	}

	.nav-on::after {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.70);
		z-index: 1;
	}

	.nav-bg {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 580px;
		background: #fff;
	}

	.nav-bg:before {
		content: '';
		position: absolute;
		left: 0;
		right:0;
		top: 0;
		margin: 0 auto;
		max-width: 2000px;
		width: 100%;
		height: 100%;
		background: url(../img/nav-bg.png) no-repeat left bottom;
	}
	
	.nav-bg .wrap {
		position: relative;
		height: 100%;
		z-index: 1;
	}

	.nav-bg span {
		position: absolute;
		left: 0;
		bottom: 114px;
		width: 310px;
		height: 206px;
		background: url(../img/nav-bg-slogan.svg) no-repeat center;
	}

	.nav-on .nav-bg {
		display: block;
	}
}

/*mb*/
@media screen and (max-width:1280px){
	.fixed {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	.wrap {
		padding-left: 80px;
		padding-right: 80px;
	}

	header .wrap {
		justify-content: center;
	}

	header h1 a {
		color: var(--navy);
		font-size: 24px;
		font-weight: 700;
	}

	header h1 img {
		height: 60px;
	}

	#lnb h2 a {
		position: absolute;
		top: calc(50% - calc(var(--inc40) / 2));
		left: 80px;
		width: var(--inc40);
		height: var(--inc40);
		background: var(--inc);
		background-position: calc(var(--inc-40) * 6) 0;
	}

	#lnb h2 a.close {
		background-position: calc(var(--inc-40) * 7) 0;
	}

	#lnb>ul {
		position: fixed;
		left: 0;
		top: 120px;
		display: none;
		flex-direction: column;
		padding: 40px 80px;
		width: 100%;
		height: calc(100% - 120px);
		word-break: keep-all;
		background: #fff url(../img/nav-mb.png) no-repeat left bottom;
		overflow-y: auto;
	}

	.fixed #lnb>ul {
		display:flex;
	}

	.search-on #lnb>ul {
		top: calc(120px + 72px);
		height: calc(100% - (120px + 72px));
	}

	#lnb li br {
		display: none;
	}

	#lnb>ul>li>a {
		width: 142px;
	}

	#lnb>ul>li>a span {
		padding: 16px 4px;
		font-size: 17px;
		font-weight: 700;
	}

	#lnb>ul>li>a span::before {
		bottom: 12px;
	}

	#lnb .sub-menu {
		position: absolute;
		right: 80px;
		top: 40px;
		display: none;
		width: calc(100% - 326px);
		flex-direction: column;
		gap: 4px;
	}

	#lnb .select .sub-menu {
		display: flex;
		padding-bottom: 24px;
	}

	#lnb .sub-menu>li>a {
		position: relative;
		display: block;
		padding: 12px 38px 12px 16px;
		color: #444;
		font-size: 16px;
		font-weight: 600;
		border-radius: 4px;
		background: var(--margenta-with);
	}

	#lnb .sub-menu li.has-depth>a::before {
		content: '';
		position: absolute;
		right: 14px;
		top: 50%;
		width: 10px;
		height: 2px;
		background: #ACBADE;
	}

	#lnb .sub-menu li.has-depth>a::after {
		content: '';
		position: absolute;
		right: 14px;
		top: 50%;
		width: 10px;
		height: 2px;
		background: #ACBADE;
		transform: rotate(90deg);
	}

	#lnb .sub-menu>li.select>a {
		color: #fff;
		background: var(--purple);
	}

	#lnb .sub-menu li.select.has-depth>a::before {
		background: #fff;
	}

	#lnb .sub-menu li.select.has-depth>a::after {
		display: none;
	}

	#lnb .sub-menu .depth {
		display: none;
		flex-direction: column;
		padding: 10px 16px;
	}

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

	#lnb .sub-menu .depth a {
		position: relative;
		display: inline-block;
		padding-left: 8px;
		color: #444;
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
	}

	#lnb .sub-menu .depth a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 9px;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: var(--purple);
	}

	#lnb .sub-menu .depth .select a {
		color: var(--purple);
	}

	.gnb {
		position: absolute;
		right: 80px;
	}

	#search-box {
		left: auto;
		top: 80px;
		width: calc(100vw - 160px);
	}

	.search-on::after {
		top: 120px;
	}

	footer .wrap {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		text-align: center;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	footer .link {
		align-items: center;
		gap: 20px;
	}
}

@media screen and (max-width:800px){
	:root {
		--inc: url(../img/inc.svg) no-repeat 0 0 / 254px;
		--inc40: 32px;
		--inc-40: -32px;
	}

	.wrap {
		padding-left: 40px;
		padding-right: 40px;
	}

	header {
		height: 100px;
	}

	header h1 a {
		gap: 8px;
		font-size: 20px;
	}

	header h1 img {
		height: 46px;
	}

	#lnb h2 a {
		left: 40px;
	}

	#lnb>ul {
		top: 100px;
		padding: 24px 40px;
		height: calc(100% - 100px);
	}

	.search-on #lnb>ul {
		top: calc(100px + 60px);
		height: calc(100% - (100px + 60px));
	}

	#lnb .sub-menu {
		top: 24px;
		right: 40px;
		width: calc(100% - 250px);
	}

	.gnb {
		right: 40px;
		gap: 4px;
	}

	#search-box {
		top: 65px;
		width: calc(100vw - 80px);
		height: 60px;
	}

	#search-box input[type="text"],
	#search-box input::placeholder {
		font-size: 13px;
		text-align: left;
	}

	.search-on::after {
		top: 100px;
		height: 60px;
	}

  footer .copy address,
  footer .copy address span {
    font-size: 14px;
    line-height: 24px;
  }

  footer .copy address span {
		display: block;
	}

  footer .copy address br {
		display: none;
	}

	footer .copy p {
		font-size: 14px;
		line-height: 18px;
	}

	footer .link ul {
		gap: 0 32px;
	}

	footer .link li a {
		font-size: 14px;
	}

	footer .link li a::before {
		top: 2px;
		left: -16px;
	}

	footer .top {
		padding-top: 4px;
		padding-bottom: 5px;
		font-size: 14px;
	}

	footer .top::before {
		top: 8px;
		background-size: 320px;
	}

}

@media screen and (max-width:480px){
	.wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	header {
		height: 70px;
	}

	header h1 a {
		flex-direction: column;
		gap: 2px;
		font-size: 14px;
		line-height: 16px;
	}

	header h1 img {
		height: 30px;
	}

	#lnb h2 a {
		left: 20px;
	}

	#lnb>ul {
		top: 70px;
		padding-left: 24px;
		padding-right: 24px;
		height: calc(100% - 70px);
	}

	#lnb .sub-menu {
		right: 24px;
		width: calc(100% - 210px);
	}

	.search-on #lnb>ul {
		top: calc(70px + 60px);
		height: calc(100% - (70px + 60px));
	}

	.gnb {
		right: 20px;
	}

	#search-box {
		top: 50px;
		width: calc(100vw - 40px);
	}

	.search-on::after {
		top: 70px;
	}

	footer .link ul {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media print {
	body::before,
	header,
	footer,
	#lmenu,
	#contentShare {display:none !important;}

	#contents{padding:0px; margin:0px; width:100% !important}
}