@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.clear:after { 
    content:""; 
    display:block; 
    clear:both;
}
* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px; }
body {
line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif; word-wrap: break-word; word-break: keep-all;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1; font-size: 1em; }
ul, ol { list-style:none; margin:0; padding: 0; }
a { outline:0; text-decoration:none; color: #000; }
a:focus { outline:none; }
figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
button, input, submit { border: none; background: none; }
dt { font-weight: normal; }

/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; float: none; }
.tabBox1 .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox1 .nav > li:hover > a { background: none; }
.tabBox1 .nav > li.active > a { border: none; background: none; }

:root {
	/* 컨텐츠 너비 */
	--containerV1-width : 1200px;

	--main-color : #1895be; /* mainColor */		
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: var(--containerV1-width,1200px); }
@media (max-width:1230px) {
	.containerV1 { padding: 0 15px; }
}

/* 스크롤 막기 (모바일 메뉴 열었을 때 적용) */
.scrollDisable { height:100%; min-height:100%; overflow:hidden !important; touch-action:none; }

/* 스크롤 애니메이션 */
@keyframes ani_up {
	0% { transform:translateY(0%); }
	50% { transform:translateY(-30%); }
	100% { transform:translateY(0%); }
}

@keyframes slide-in {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}
}

/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
.header_wrap { 
--header-height: 118px;
--topbar-height:34px;
--transtion:0.4s;
position:sticky; right:0; top:0; width:100%; z-index:2000; transition:var(--transtion); font-size: min(4.29vw,18px); background: #fff;
box-shadow:0 0 10px rgba(0,0,0,0.2); padding-top: var(--topbar-height);
}

#header { 
-ms-display:flex; -ms-justify-content:space-between; -ms-align-items:center;
display:flex; justify-content:space-between; align-items:center;
}

/* 로고 */
.logo a { display: block; }

/* top */
.topbar .containerV1 { display:flex; align-items:center; gap:0.8em; }
.topbar .containerV1 > li > a { display: block; color: #000; position: relative; }
.topbar .containerV1 > li:not(:last-child) > a:after { content: '|'; display: inline-block; font-size: 0.8em; margin-left: 1em; transform:translateY(-0.2em); }

/* menu */
/*---------------------------------------- outer ---------------------------------------------*/
#h_menu .outer > li { position: relative; }
#h_menu .outer > li > a { display:block; font-size:inherit; font-weight:bold; color: #000; }
/*---------------------------------------- //outer ---------------------------------------------*/


/*---------------------------------------- inner ---------------------------------------------*/

#h_menu .outer > li > .inner > li > a  { display:block; font-size:0.83em; }
/*---------------------------------------- //inner ---------------------------------------------*/


/* 스크롤 했을 때 해드 효과 */
.header_wrap.scroll { box-shadow:0 0 10px rgba(0,0,0,0.2); padding-top: 0; }


@media (min-width:991px) {/* pc */
	@keyframes head-inner-ani1 {
		0%{ transform:translateX(-10%); }
		70%{ transform:translateX(10%); }
		100%{ transform:translateX(0); }
	}

	/* pc - top */
	.topbar {
	position: absolute; left: 0; top: 0; width: 100%; background: #e5e5e5; font-size: 0.72em; transition:var(--transtion);
	}
	.topbar .containerV1 { justify-content:flex-end; height: var(--topbar-height); }

	/* pc - menu */
	/*---------------------------------------- pc - outer ---------------------------------------------*/
	#h_menu { display:flex; align-items:center; }
	#h_menu .outer { -ms-display:flex; display:flex; gap:4.72em }
	
	#h_menu .outer > li > a {
	transition:var(--transtion); color: #000; 
	height: calc( var(--header-height) - var(--topbar-height) ); 
	line-height: calc( var(--header-height) - var(--topbar-height) );
	}
	#h_menu .outer > li > a .icon { display: none; }
	#h_menu .outer > li > a::before{
		content: "";
		position: absolute;
		width: 0%;
		height: 2px;
		background: var(--main-color);
		top: 70%;
		transform: translateY(70%);
		transition: all 0.3s;
	}
	/*---------------------------------------- // pc -outer ---------------------------------------------*/


	/*---------------------------------------- pc - inner ---------------------------------------------*/
	#h_menu .outer > li > .inner {
	--inner-border-color:#dfdfdf;
	position:absolute; right:0; top:100%; z-index:1; border-top:0.2em solid var(--main-color);
	width:11.111em; visibility:hidden; opacity: 0;
	}
	#h_menu .outer > li > .inner > li {
	position: relative;
	box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);
	background-color: #fff;
	border-bottom: 1px solid var(--inner-border-color);
	border-right: 1px solid var(--inner-border-color);
	border-left: 1px solid var(--inner-border-color);
	visibility:hidden; opacity: 0;
	}
	#h_menu .outer > li > .inner > li > a  { transition:var(--transtion); padding:0.83em 1.1em; text-align:right; color: #888; }
	/*---------------------------------------- // pc - inner ---------------------------------------------*/

	/* pc - hover */
	#h_menu .outer > li:hover > a::before { width: 100%; }
	#h_menu .outer > li:hover > .inner { visibility:visible; opacity: 1; z-index: 2; } 
	#h_menu .outer > li:hover > .inner > li { 
	visibility:visible; opacity: 1; animation:head-inner-ani1 0.3s; animation-fill-mode:forwards; animation-delay:calc( var(--i) * 0.1s );
	transition:var(--transtion); transition-delay:calc( var(--i) * 0.1s );
	} 
	#h_menu .outer > li > .inner > li > a:hover { color:#fff; background:var(--main-color); } 

	/* pc - 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
	#h_menu .outer > li > a.on::before{width: 100%;} 

	/* pc - 스크롤 */
	.header_wrap.scroll .topbar { transform:translateY(-100%); }
}

@media (max-width:1200px) and (min-width:991px) {
	#h_menu .outer { gap: 2.72em; } 
}

@media (max-width:991px) {/* 모바일 */
	.header_wrap { --header-height: 50px; padding-top: 0; }
	#header { height: var(--header-height); }

	.logo { width: 170px; }

	/* 모바일 열기 버튼 */
	.header_wrap .open_btn { cursor:pointer; color:#000; font-size: 18px; }

	.menu_box { 
	--size-close-font:22px;
	--transition:0.4s;
	position: fixed; right: 0; top: 0; width: 18em; height: 100%; z-index:9999; background: #fff; transform:translateX(100%); transition:var(--transition); 
	}

	/* 모바일닫기버튼 */
	.close_btn { 
	font-size: var(--size-close-font);
	position: absolute; right: 0.2em; top: 0.2em; width:1.6em; height:1.6em; cursor:pointer; background: #000; border-radius:0.2em; z-index: 9999;
	}
	.close_btn > i { display:block; color:#fff; text-align:center; line-height:1.6em; font-size:1em; }

	.topbar { font-size: var(--size-close-font); padding-top: 2.6em; }
	.topbar .containerV1 { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; justify-content:center; }
	.topbar .containerV1 > li > a { display: block; font-size: 13px; padding: 1em 0; text-transform: uppercase; }

	#h_menu { 
	width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0;
	display:grid; align-items:start; align-content:start; padding: 0 15px;
	}
	#h_menu:after { 
	content: ''; position: absolute; left: 15px; top: 10px; width: 79px; height: 24px;
	background: url(./img/head_icon1.png) no-repeat center / cover;
	}
	.menu_box_bg { position: absolute; right: 0; top: 0; z-index:8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); }

	.menu_box #h_menu .outer { display:grid; padding-top: 1.5em; }
	.menu_box #h_menu .outer > li > a .icon { margin-right: 0.4em; }
	

	.menu_box #h_menu .inner {
	padding: 1.2em 1.5em 1.6em; margin-bottom: 1.4em;
	display:grid; grid-template-columns:1fr 1fr; gap:0.8em 1em; position: relative; 
	}
	.menu_box #h_menu .inner:after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ddd; 
	}

	/* 모바일메뉴박스 보이게 하는 클래스 */
	.menu_box.inactive { transform:translateX(0); } 

	/* on */
	.menu_box #h_menu .outer > li > a.on { color: var(--main-color); }
}
/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/

/* 인덱스 타이틀 */
#index .titleBox { font-size: min(3.43vw,18px); text-align: center; }
#index .titleBox .title { 
font-size: 2.77em; font-weight: bold; line-height: 1.4; font-family: 'Poppins', sans-serif; text-transform: uppercase; padding-bottom: 0.1em;
overflow: hidden;
}
#index .titleBox .text1 { font-size: 1em; line-height: 1.6; overflow: hidden;}

/* 인덱스 타이틀 스크롤 애니메이션 */
#index .titleBox[data-scroll='in'] .title { animation:ani_up 0.4s ease-in-out; animation-fill-mode:forwards; animation-delay:0.2s; }
#index .titleBox[data-scroll='in'] .text1 { animation:ani_up 0.4s ease-in-out; animation-fill-mode:forwards; animation-delay:0.35s; }

@media (max-width:768px) {
	#index .titleBox .text1 { font-size: 1em; }
	#index .titleBox .text1 br { display: none; }
}

/* section2 */
#index .section2 { 
padding: min(14.29vw,110px) 0 min(14.29vw,100px); position: relative; overflow: hidden;
}
#index .section2:after { 
content: ''; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; 
background: url(./img/index_section2_bg.jpg) no-repeat center / cover;
}

#index .section2 .titleBox { padding-bottom: 4.2em; color: #fff; position: relative; z-index: 1; }

#index .section2 .itemBox { 
--size-circle: 122px;
display:grid; grid-template-columns:repeat(4,1fr); gap:1.33em; font-size: min(3.43vw,18px); position: relative; z-index: 1;
}
#index .section2 .itemBox > li > a { 
display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 1.33em 0.5em;
color: #fff; text-align: center; transition:0.4s linear; transform:translate(0,0); background: rgba(0,0,0,0.6);
}
#index .section2 .itemBox > li > a:before {
content: ''; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: -1;
transition:0.2s linear;
}
#index .section2 .itemBox .icon { 
display: flex; align-items:center; width: var(--size-circle); height: var(--size-circle); background: #707070; border-radius:50%; margin: 0 auto 1em;
transition:0.2s linear; border: 2px solid transparent;
}
#index .section2 .itemBox .icon img { display: block; margin: 0 auto; width: 64%; }
#index .section2 .itemBox .text1 { font-size: 1em; line-height: 1.3; margin-bottom: 0.5em; transition:0.2s linear; }
#index .section2 .itemBox .text2 { font-size: 1.38em; line-height: 1.3; margin-bottom: 0.8em; transition:0.2s linear; font-weight: bold; }
#index .section2 .itemBox .more1 { 
border-radius:2em; transition:0.2s linear; font-size: 0.89em; background: var(--main-color); padding: 0.68em 1.56em; text-transform: uppercase;
}

#index .section2 .itemBox > li > a:hover:before { 
background: rgba(0,0,0,0.8); transform:translate(-50%,-50%) scale(0.9);
}
#index .section2 .itemBox > li > a:hover .icon { transform:scale(1.05) translateY(-2px); border: 2px solid #8d8d8d; }
#index .section2 .itemBox > li > a:hover .text1 { transform:translateY(-2px); }
#index .section2 .itemBox > li > a:hover .text2 { transform:translateY(-2px); }
#index .section2 .itemBox > li > a:hover .more1 { box-shadow: 0px 4px 5px 0px rgb(57 121 202); transform:translateY(-2px); }

/* section2 애니메이션 */
@keyframes index_section2_ani1 {
	0%{ transform:translate(-50%,-50%) scale(1); }
	50%{ transform:translate(-50%,-50%) scale(1.2); }
	100%{ transform:translate(-50%,-50%) scale(1); }
}
#index .section2:after { animation:index_section2_ani1 10s linear infinite; }

/* section2 스크롤애니메이션 */
#index .section2[data-scroll] .itemBox > li { transform:rotate(5deg); }
#index .section2[data-scroll='in'] .itemBox > li { transform:rotate(0deg); transition:0.4s ease-in-out; transition-delay:calc(var(--i) * 0.2s); }


@media (max-width:1200px) {
	#index .section2 .itemBox { gap:1em; }
}
@media (max-width:768px) {
	#index .section2 .itemBox { --size-circle: min(22.86vw,122px); grid-template-columns:repeat(2,1fr); }
}




/* section3 */
#index .section3 { 
padding: min(14.29vw,80px) 0 min(14.29vw,100px);
}

/* section3 - 타이틀 */
#index .section3 .titleBox { padding-bottom: 2.8em; }
#index .section3 .titleBox .title { color: var(--main-color); }
#index .section3 .titleBox .text1 { color: #626262; }

#index .section3 .more1 { text-align: center; font-size: min(3.43vw,16px); padding-top: 3.75em; }
#index .section3 .more1 a {
display: inline-block; color: #fff; background: var(--main-color); text-transform: uppercase;
border-radius:2em; transition:0.4s; border: 1px solid transparent; padding: 1em 3.125em 1.1em;
}
#index .section3 .more1 a:hover { color: var(--main-color); background: #fff; border-color: var(--main-color); }


/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { 
--footer-color1: #000; font-size: 15px;
background: #e5e5e5;
overflow: hidden;
}

footer > .contents_box[data-scroll] { opacity: 0; transition:1s; transform:translateY(0.5em); }
footer > .contents_box[data-scroll='in'] { opacity: 1; transform:translateY(0); }
footer > .contents_box[data-scroll='out'] { opacity: 0; transform:translateY(0.5em); }

footer .info { border-bottom: 1px solid #a0a0a0; }
footer .info .containerV1 { 
-ms-display:flex; -ms-flex-wrap:wrap; 
display:flex; flex-wrap:wrap; 
text-align: center; padding-top: 1em; padding-bottom: 1em;
}
footer .info .containerV1 > li { position:relative; }
footer .info .containerV1 > li:before { 
content:''; position:absolute; right:0.5em; top:50%; transform:translateY(-45%); width:1px; height:0.8em; background:var(--footer-color1); 
}
footer .info .containerV1 > li:last-child:before { display:none; }
footer .info .containerV1 > li > a { 
display:block; color:var(--footer-color1); line-height:1.8; margin-right:1.3em; 
}  

footer .contents { display:flex; flex-wrap:wrap; gap:1em; padding: 2em 0; }
footer .contents .item1 { flex:1; }
footer .contents .item1 .f_logo { display: inline-block; transform:translateY(0.5em); }
footer .contents .item2 { flex:2.4; display:grid; align-content:space-between; }
footer .contents .item2 > div { line-height: 1.6; color: var(--footer-color1); }
footer .contents .item2 > div a { color: inherit;}
footer .contents .item2 .text > span { position: relative; margin-right:1.2em; font-weight: inherit;  }
footer .contents .item2 .text > span:before { 
content:''; position:absolute; right:-0.8em; top:50%; transform:translateY(-45%); width:1px; height:0.8em; background:var(--footer-color1); 
}
footer .contents .item2 .text > span:last-child:before { display:none; }
footer .contents .item2 > .copy { text-transform: uppercase; font-weight: inherit; align-self:end; }


@media (max-width:1200px) {
	footer .info .containerV1 { text-align: center; justify-content:center; }
	footer .contents .item1 { display:flex; justify-content:center; }
	footer .contents .item1 .f_logo { transform:translateY(0); }
	footer .contents .item2 { text-align: center; flex:auto; width: 100%; }
}


@media (max-width:768px) {
	footer { font-size: 13px; --footer-color1: #747474; background: #fff; }
	footer > .contents_box { padding: 0; }
	footer > .contents_box .containerV1 { padding: 0; }

	footer .info { background: #fff; border-top: 1px solid #777; border-bottom: 1px solid #777; }
	footer .info .containerV1 { margin-top: 0; padding-top: 0.5em; padding-bottom: 0.5em; font-size: 0.9em; }
	footer .info .containerV1 > li { width:50%; }
	footer .info .containerV1 > .li1 { order:1; }
	footer .info .containerV1 > .li2 { order:4; }
	footer .info .containerV1 > .li3 { order:3; }
	footer .info .containerV1 > .li4 { order:2; }
	footer .info .containerV1 > li:before { right: 0; }
	footer .info .containerV1 > li:nth-child(2n):before { display:none; }
	footer .info .containerV1 > li > a { margin-right: 0; font-weight: bold; }

	footer .contents { gap:0; padding: 0; }
	footer .contents :is(.item1,.item3) { display: none; }
	footer .contents .item2 { text-align: left; background: #f9f9f9; }
	footer .contents .item2 > div { padding: 2em 1em; font-size: 0.85em; }
	footer .contents .item2 .text { display:grid; grid-template-columns:1fr 2fr; }
	footer .contents .item2 .text > span:before { display: none; }
	footer .contents .item2 > .copy { text-align: center; font-size: 0.8em; font-weight: bold; padding: 1em 0; background: #eee; color: #777; }
	footer .contents .item2 > .copy a { font-weight: inherit; color: #777; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/








/* 서브페이지 패딩 */
.tmt_sub_frame { padding:40px 0 50px; min-height: 75vh; }


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--main-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--main-color);}

/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }