@charset "utf-8";
/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

/* 웹폰트 굵기 
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Heavy 900
*/


* { 
font-family: 'pretendard', sans-serif; font-size:16px; color:#111;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, 
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{font-family: 'pretendard', sans-serif; font-size:16px; color:#111; box-sizing:border-box; line-height:1.2;}
a {text-decoration:none;}

html {	
	/* Prevent font scaling in landscape */
	-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust: none; /*Firefox*/
	-ms-text-size-adjust: none;  /*Ie*/
	-o-text-size-adjust: none; /*old versions of Opera*/
}



input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {box-shadow:none; -webkit-box-shadow:none; border:1px solid #333 !Important;}


#wrap {width:100%; position:relative;}
.layout {max-width: 1500px; width:100%; margin: 0 auto;}
/* .flex {display:flex;}
.flex_align-center {display:flex; align-items: center;}
.flex_between {display:flex; justify-content: space-between;}
.flex-center {display:flex; align-items: center; justify-content: center;}
.flex-center-between {display:flex; align-items: center; justify-content: space-between;} */




/******************* header *******************/
.header {
	background: rgba(255,255,255,1);
	width: 100%;
	height: 140px;
	transition:0.2s all ease;
}


/* header-inner */
.header-inner {
	width: 1500px;
	margin: 0 auto;
	max-width:100%;
	height: 100%;
	/* padding: 32px 0px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header-inner .top-logo {
	position: relative;
	z-index: 9;
}
.header-inner .top-logo a {
	display: block;
	width: 393px;
	height: 70px;
	background:url('/images/logo-color.svg') center center no-repeat;
	background-size: 393px 70px;
}
.header-inner .top-logo img {
	display: block;
	width: 100%;
	height: 100%;
}
.header-inner .btn-sitemap {
	display: block;
	width: 42px;
	height: 23px;
	position: relative;
	z-index: 9;
	background:url('/images/btn-sitemap.svg') no-repeat;
	background-size: contain;
}
.header-inner .btn-mgnb {
	display: none;
	width: 42px;
	height: 23px;
	position: relative;
	z-index: 9;
	background: none;
	border: 0;	
	background:url('/images/btn-sitemap.svg') no-repeat;
	background-size: contain;
}
.mgnb-wrap {display: none;}



/* gnb */
.gnb-wrap {
	position: absolute;
	left: 0%;
	top: 0px;
	z-index: 4;
	width: 100%;
	height: 140px;
	display: flex;
	justify-content: center;
	text-align: center;
	/* overflow: hidden; */
	transition: 0.3s all ease;
}
.gnb {
	display: flex;
	/* width: 650px; */
	margin-left: 325px;
	/* gap: 80px; */
}
.gnb .gnb-menu01 {
	/* padding: 0 40px; */
	/* flex: 1; */
	position: relative;
}
.gnb .gnb-menu01 > a {
	font-size: 22px;
	font-weight: 700;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	padding: 0 40px;
}
.gnb .gnb-menu01 > a::before {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	display: block;
	width: 0;
	height: 4px;
	background: #2780be;
	transition:0.3s width ease;
}
.gnb .gnb-menu02-list {
	position: absolute;
	left: 0;
	top: 140px;
	padding-top: 20px;
	width: 100%;
	height: 220px;
	visibility: hidden;
  opacity: 0;
	transition:0.3s all ease;
}
.gnb .gnb-menu02 {}
.gnb .gnb-menu02 a {
	font-size: 20px;
	padding: 10px 0;
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: center;
}
.gnb-bg {
	position: absolute;
	top: 140px;
	left: 0;
	width: 100%;
	background: #fff;
	border-top:1px solid rgba(221, 221, 221, 0);
	height: 0;
	opacity:0;
	transition:0.4s all ease;
	z-index: 2;
}
.header.on {	
	background: #fff;
}
.header.on .gnb-bg {
	height: 220px;
	opacity:1;
	border-top:1px solid #dddddd;
	transition:0.4s all ease;
}
.header.on .gnb .gnb-menu02-list {
	visibility: visible;
  opacity: 1;
	transition:0.3s all ease;
	transition-delay: 0.1s;
}



/************************ hover ************************/
@media (hover: hover) and (pointer: fine) {

	.gnb .gnb-menu01:hover > a::before {
		width: 100%;
		transition:0.3s width ease;
	}

	.gnb .gnb-menu02 a:hover {
		color: #2780be;
		font-weight: 600;
	}

}
/************************ hover ************************/









/******************* sub_contents *******************/
/* sub_contents */
.sub-contents {width:100%;}
.sub-visual {
	width:100%; 
	height:354px;
	background:#f9f9f9;
	position: relative;
	background:url('/images/sub-visual-img.png') center center no-repeat;
	background-size: cover;
}
.sub-title {
	font-weight:800; 
	font-size:45px; 
	padding:100px 0 0px;
	color: #fff;
	text-align: center;
}

.sub-menu-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid #efefef;
}
.sub-menu-wrap .sub-menu-inner {
	width: 1200px;
	max-width:100%;
	margin: 0 auto;
}
.sub-menu-wrap .sub-menu-inner .sub-menu-list {
	display: flex;
	gap: 1px;
	background: rgba(0,0,0,0.6);
}
.sub-menu-wrap .sub-menu-inner .sub-menu-list li {flex: 1;}
.sub-menu-wrap .sub-menu-inner .sub-menu-list li a {
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: rgba(255,255,255,0.8);
	font-size: 22px;
	font-weight: 500;
	position: relative;
	transition:0.2s all ease;
}
/* .sub-menu-wrap .sub-menu-inner .sub-menu-list li a::before {
	position: absolute;
	right:0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	content: '';
	width: 1px;
	height: 25px;
	background: rgba(255,255,255,0.3);
}
.sub-menu-wrap .sub-menu-inner .sub-menu-list li:last-child a::before {display: none;} */
.sub-menu-wrap .sub-menu-inner .sub-menu-list li.on a {
	background: #fff;
	color: #111;
}
/* .sub-menu-wrap .sub-menu-inner .sub-menu-list li.on a::before {display: none;} */

.sub_contents_in {width:1200px; max-width:100%; margin:0 auto; padding:150px 0 160px; min-height:450px;}


/* page-load */
.page-load {
	display:flex;
	justify-content: center;
  gap: 15px;
	margin-top: 20px;
}

.page-load span {
	font-size: 14px;
  position: relative;
  display: block;
	color: #fff;
}

.page-load span:before {
	position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background-color: red;
  border-radius: 50%;
  background-color: #ddd;
}

.page-load span:last-child:before {
	display:none;
}







/******************* footer *******************/
.footer {}

.footer-partner {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.footer-partner .inner {
	position: relative;
	width: 1500px;
	max-width:100%;
	margin: 0 auto;
	display: flex;
}
.footer-partner .left {
	/* flex: 1; */
	width:20%;
	display: flex;
	align-items: center;
	gap: 16px;
}
.footer-partner .left .tit {
	font-size: 18px;
	font-weight: 600;
}
.footer-partner .right {
	/* flex: 4; */
	width: 80%;
}
.footer-partner .right .fpartner-list-wrap {}
.footer-partner .right .fpartner-list {
	display: flex;
}
.footer-partner .right .fpartner-item {
	/* flex: 1; */
}
.footer-partner .right .fpartner-item a {
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-partner .right .fpartner-item img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.footer-partner .fpartner-control {
	/* position: absolute;
	left: -10%;
	top: 0; */
	display: flex;
	gap: 9px;
}
.footer-partner .left .fpartner-control .btn {
	display: block;
  width: 7px;
  height: 10px;
  border: 0;
	background: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 0;
}
.footer-partner .left .fpartner-control .btn-prev {
	background-image:url('/images/parter-arrow-prev.svg');
}
.footer-partner .left .fpartner-control .btn-next {
	background-image:url('/images/parter-arrow-next.svg');
}

.footer-info {
	padding: 56px 0 62px;
}
.footer-info .inner {
	width: 1500px;
	max-width: 100%;
	margin: 0 auto;
}
.footer-info .top {
	display: flex;
	align-items: flex-end;
	gap: 70px;
}
.footer-info .top .bottom-logo {
	width: 393px;
	height: 70px;
}
.footer-info .top .bottom-logo img {
	display: block;
	width: 100%;
	height: 100%;
}
.footer-info .top .footer-textbox {}
.footer-info .top .footer-textbox span {
	color: #999;
	font-size: 14px;
	display: flex;
	gap: 40px;
}
.footer-info .top .footer-textbox span:first-child {}
.footer-info .top .footer-textbox span:last-child {margin-top: 7px;}
.footer-info .top .footer-textbox span i {
	color: inherit;
	font: inherit;
	font-style: normal;
}
.footer-info small {	
	display: flex;
	color: #999;
	font-size: 14px;
	margin-top: 36px;
}









/************************************ hover ************************************/
@media (hover: hover) and (pointer: fine) {

	
	.sub-menu-wrap .sub-menu-inner .sub-menu-list li a:hover {
		background: #fff;
		color: #111;
		transition:0.2s all ease;
	}


}
/************************************ hover ************************************/




/* 반응형 중간기기 1500px 사이즈 이하*/
@media all and (max-width:1500px){

	.header {padding: 0px 20px;}
	.main-inner {padding: 0 20px;}
	.footer-partner {padding: 0 20px;}	
	.footer-info {padding: 56px 20px 62px;}

}



/* 반응형 중간기기 1380px 사이즈 이하*/
@media all and (max-width:1380px){
	

	

}


/* 반응형 중간기기 1200px 사이즈 이하*/
@media all and (max-width:1200px){


	.sub_contents_in {
		padding:120px 20px 130px; 
	}

}



/* 반응형 중간기기 1100px 사이즈 이하*/
@media all and (max-width:1100px){

	.header {height: 120px;}
	.header-inner .btn-mgnb {display: block;}
	.header-inner .btn-sitemap {display: none;}
	.mgnb-wrap {
		display: flex;
		justify-content: flex-end;
	}
	.mgnb-wrap .btn-close {
		display: flex;
		width: 28px;
		height: 28px;
		font-size: 0;
		background: url('/images/btn-close-icon.svg') center center no-repeat;
		background-size: contain;
		border:0;
	}


	.gnb-wrap {
		position: fixed;
		right: -100%;
		left: auto;
		top: 0;
		z-index: 99;
		width: 500px;
		height: 100%;
		background: #fff;
		padding: 30px 30px;
		display: block;
		transition:0.3s ease all;
	}
	.gnb-wrap .gnb {
		display: block;
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top: 30px;
		border-top: 1px solid #555;
	}
	.gnb-wrap .gnb .gnb-menu01 {}
	.gnb-wrap .gnb .gnb-menu01 > a {
		display: block;
		height: auto;
		padding: 20px 20px;
		text-align: left;
		border-bottom: 1px solid #ddd;
	}
	.gnb-wrap .gnb .gnb-menu01 > a::before {
		position: absolute;
		right: 20px;
		left: auto;
		top: 27px;
		display: block;
		content: "";
		width: 13px;
		height: 7px;
		background: url('/images/mobile-menu-arrow.svg') center center no-repeat;
		background-size: contain;	
	}
	.gnb-wrap .gnb .gnb-menu02-list {
		background: #f9f9f9;
		visibility: visible;
		opacity: 1;
		position: initial;
		height: auto;
		padding-top: 0;
		display: none;
		transition:initial;
	}
	.gnb-wrap .gnb .gnb-menu02-list .gnb-menu02 {}
	.gnb-wrap .gnb .gnb-menu02-list .gnb-menu02 a {
		display: block;
		padding: 15px 20px;
		text-align: left;
	}
	.gnb-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		border-top:0;
		opacity:0;
		visibility: hidden;
		transition:0.3s all ease;
		z-index: 20;
	}


	.header.open {}
	.header.open .gnb-wrap {
		right: 0;
		transition:0.3s ease all;
	}
	.header.open .gnb-bg {
		opacity: 1;
		visibility: visible;
		transition:0.2s all ease;
	}
	.gnb-wrap .gnb .gnb-menu01.on > a {
		background: #555;
		color: #fff;
	}
	.gnb-wrap .gnb .gnb-menu01.on > a::before {
		background-image: url('/images/mobile-menu-arrow-w.svg');
	}



	.footer-partner {padding: 0;}
	.footer-partner .left {display: none;}
	.footer-partner .right {width: 100%;}


	
}



/* 반응형 중간기기 998px 사이즈 이하*/
@media all and (max-width:998px){

	.footer-info {
		padding: 30px 20px 30px;
	}
	.footer-info .top {
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
	}
	


}



/* 반응형 중간기기 768px 사이즈 이하*/
@media screen and (max-width: 768px) {
	
	
	.header {height: 100px;}
	.header-inner .top-logo a {
		width: 300px;
		height: 53px;
		background-size: 300px 53px;
	}


	.gnb .gnb-menu01 > a {font-size: 18px;}
	.gnb-wrap .gnb .gnb-menu02-list .gnb-menu02 a {font-size: 16px;}



	.sub-visual {
		height: 260px;
		padding-right: 20px;
		padding-left: 20px;
	}
	.sub-title {
		font-size: 36px;
		padding-top: 72px;
	}
	.page-load {
		margin-top: 10px;
	}
	.sub-menu-wrap .sub-menu-inner .sub-menu-list li a {
		height: 60px;
		font-size: 18px;
	}

	.footer-info .top .bottom-logo {
		width: 300px;
		height: 53px;
	}
	.footer-info .top .footer-textbox span:last-child {
		flex-direction: column;
		gap: 3px;
	}

}



/* 반응형 중간기기 480px 사이즈 이하*/
@media screen and (max-width: 480px) {	

	.header {height: 80px; padding: 0px 15px;}
	.main-inner {padding: 0 15px;}
	.footer-partner {padding: 0 15px;}	
	.footer-info {padding: 30px 15px 30px;}

	.header-inner .top-logo a {
		background-size: 220px 39px;
		width: 220px;
		height: 39px;
	}
	.header-inner .btn-mgnb {
		width: 32px;
		height: 18px;
	}

	.gnb-wrap {width: 100%;}
	.gnb .gnb-menu01 > a {font-size: 20px;}
	.gnb-wrap .gnb .gnb-menu02-list .gnb-menu02 a {font-size: 16px;}



	.sub-visual {
		height: 200px;
		padding-right: 15px;
		padding-left: 15px;
	}
	.sub-title {
		font-size: 32px;
		padding-top: 50px;
	}
	.page-load {margin-top: 5px;}
	.sub-menu-wrap .sub-menu-inner .sub-menu-list li a {
		height: 50px;
		font-size: 16px;
	}



	.footer-info .top .bottom-logo {
		width: 220px;
		height: 39px;
	}
	


}



/* 반응형 중간기기 360px 사이즈 이하*/
@media screen and (max-width: 360px) {	

	

}


