@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;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; }

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

	--main-color : #6c4a15; /* mainColor */

	/*font (40px 미만은 min 400부터, 이상은 min 없이 rem이었다가 해당 구간에서 vw로 600부터)*/
	--font-size15 : min(3.75vw,15px); 
	--font-size16 : min(4vw,16px); 
	--font-size18 : min(4.50vw,18px); 
	--font-size20 : min(5vw,20px); 
	--font-size23 : min(5.75vw, 23px); 
	--font-size25 : min(6.25vw, 25px); 
	--font-size30 : min(7.50vw, 30px); 
	--font-size45 : 5.63vw; 
	--font-size50 : 6.17vw; 
	
}

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

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

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

.logo { transform:translateY(-0.5em); }
.logo a { display: block; width: 9.5em; }


/* menu */
/*---------------------------------------- outer ---------------------------------------------*/
#h_menu { display:flex; align-items:center; }
#h_menu .outer { -ms-display:flex; display:flex; }
#h_menu .outer > li { position:relative; margin-right: 4.72em; } 
#h_menu .outer > li:last-child { margin-right: 3.333em; }
#h_menu .outer > li > a {
display:block; font-size:inherit; font-weight:bold; text-align:center; transition:0.4s; color: #313131; height: var(--header-height); 
line-height: var(--header-height);
}
#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;
}
#h_menu .download a { font-size:0.83em; color: #535353; border: 1px solid #959595; padding: 0.444em 1.333em; transition:0.3s; }
#h_menu .download a:hover { background: #959595; color: #fff; }
/*---------------------------------------- //outer ---------------------------------------------*/


/*---------------------------------------- inner ---------------------------------------------*/
#h_menu .outer > li > .inner {
position:absolute; right:0; top:100%; z-index:1; border-top:0.25em solid var(--main-color);
width:11.111em; background:#fff; padding:0.55em 0; display:none; box-shadow:0 5px 5px rgba(0,0,0,0.2);
}
#h_menu .outer > li > .inner > li > a  { display:block; transition:all 0.4s; padding:0.83em 1.1em; font-size:0.83em; text-align:right; }

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



/* hover */
#h_menu .outer > li:hover > a::before {width: 100%;}
#h_menu .outer > li:hover > .inner { display:block; } 
#h_menu .outer > li > .inner > li > a:hover { color:#fff; background:var(--main-color); } 


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


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



@media (max-width:1200px) {
	#h_menu .outer > li { margin-right: 2.72em; } 
	#h_menu .outer > li:last-child { margin-right: 1.333em; }
}




@media (max-width:991px) {
	.header_wrap { padding: 1em 0; z-index:9000; }

	.logo { transform:translateY(0); }

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


	/* menu */
	.menu_box { 
	background-color:var(--main-color); width: 20em; height: 100%; 
	position: fixed; right:0; top: 0; z-index:9999; margin-right:-20em; transition:margin-right 0.3s;
	}
	.menu_box_bg { position: absolute; right: 0; top: 0; z-index:8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); }
	#h_menu {
	width: 20em; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; flex-direction:column;
	}

	/* 모바일닫기버튼 */
	.close_btn { order:1; width:50px; height:50px; margin-right:auto; margin-left:0; cursor:pointer; }
	.close_btn > i { display:block; color:#fff; text-align:center; line-height:50px; font-size:30px; }
	
	#h_menu .download { order:2; width: 100%; }
	#h_menu .download a { 
	color: #fff; display: block; border-color: rgba(255,255,255,0.7); border-right:none; border-left:none; padding: 1em; 
	text-align: center;
	}
	#h_menu .download a:hover { background: rgba(255,255,255,0.1); }
	#h_menu .download a:active { background: rgba(255,255,255,0.1); }

	/*---------------------------------------- outer ---------------------------------------------*/
	#h_menu .outer { order:3; flex-wrap:wrap; padding:0.5em 0; }
	#h_menu .outer > li { width:100%; margin-right: 0; padding: 0.2em 0.5em; }
	#h_menu .outer > li:last-child { margin-right: 0; }
	#h_menu .outer > li > a { 
	padding:10px 20px; font-weight:500; color:rgba(255,255,255,0.7); text-align:left; height:auto; line-height:1; border-bottom:1px solid rgba(255,255,255,.4);
	font-size: 16px; pointer-events:none; 
	}
	#h_menu .outer > li > a::before{display: none;}
	/*---------------------------------------- //outer ---------------------------------------------*/

	/*---------------------------------------- inner ---------------------------------------------*/
	#h_menu .outer > li > .inner { 
	position:static; width:100%; padding:0; margin-left:30px; border-left:1px solid rgba(255,255,255,0.4); background:none; border-top:none; border-bottom: none;
	box-shadow:none;
	}
	#h_menu .outer > li > .inner > li:last-child > a { border-bottom:none; }
	#h_menu .outer > li > .inner > li > a { padding:10px 0 10px 15px; font-size: 14px; position:relative; text-align:left; color:#fff; }
	#h_menu .outer > li > .inner > li > a:before { 
	content:''; position:absolute; left:-3px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#fff; 
	}
	/*---------------------------------------- //inner ---------------------------------------------*/
	

	/* hover */
	#h_menu .outer > li:hover > a { color:#fff; }
	#h_menu .outer > li:hover .inner { display:none; } /* 모바일일때 inner 나오게 하는 후버 효과 X */
	#h_menu .outer > li > .inner > li > a:hover { color:#fff; background:none; } 


	/* 모바일메뉴박스 보이게 하는 클래스 */
	.menu_box.inactive { margin-right:0; } 

	/* 모바일에서 outer li 클릭했을때 inner 나오는 효과 */
	#h_menu .outer > li.on > a { border-bottom:1px solid transparent; background: #fff; color: #000; border-radius:0.2em; }
	#h_menu .outer > li.on .inner { display:block; }

	/* 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
	#h_menu .outer > li > a.on { color:#000; background: #fff; border-bottom:1px solid transparent; border-radius:0.2em; } 
}


/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



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

/* 타이틀 */
#index .titleBox .title { font-size: min(7.14vw,45px); line-height: 1.4em; text-transform: uppercase; }
#index .titleBox .title .lightV1 { font-weight: 300; display: inline-block; }
#index .titleBox .text1 { font-size: min(4.29vw,18px); line-height: 1.6em; padding-top: 0.1em; }
/* 더보기 */
#index .moreV1 { font-size: min(3.71vw,15px); text-align: center; text-transform: uppercase; }
#index .moreV1 a { padding:0.74em 1.82em 0.82em; display: inline-block; background:var(--main-color); color: #fff; transition:0.4s; }
#index .moreV1 a:hover { border-radius:0.5em; box-shadow:0 0.2em 0 rgba(24,149,190,0.5); transform:translateY(-0.2em); }

@media (max-width:768px) {
	#index .titleBox .text1 { line-height: 1.4em; padding-top: 0.3em; }
}

/* section */
#index .section { font-size: min(17.14vw,120px); overflow-x: hidden; }

/* section1 */
#index .section1 { padding: 0.83em 0 1em; /* background: url(img/index_section1_bg.jpg) no-repeat center / cover; */ }
#index .section1 .titleBox { text-align: center; padding-bottom: 0.42em; }
#index .section1 .titleBox .title b { color: var(--main-color); }
#index .section1 .titleBox .title .lightV1 { color: #000; margin-left: 0.2em; }
#index .section1 .titleBox .text1 { color: #707070; }

#index .section1 .itemBox { 
display:flex; font-size: min(3.71vw,15px); gap:3.333em; 
}
#index .section1 .itemBox > li { flex:1; border: 1px solid #bfbfbf; transition:0.4s; background: #fff; }
#index .section1 .itemBox > li > a { display:flex; align-items:center; gap:1.5em; height: 19.5em; }
#index .section1 .itemBox > li > a .img { flex:1; transition:0.8s; overflow: hidden; }
#index .section1 .itemBox > li > a .img img { transition:1s; }
#index .section1 .itemBox > li > a .textBox { flex:1; padding: 1.5em 0; transition:0.4s; }
#index .section1 .itemBox > li > a .textBox .text1 { color: var(--main-color); font-size: 2.33em; font-weight: bold; padding-bottom: 0.2em; transition:0.4s; }
#index .section1 .itemBox > li > a .textBox .text2 { color: #434343; font-size: 1.33em; padding: 0.2em 0 0.3em; transition:0.4s; }
#index .section1 .itemBox > li > a .textBox .text3 { color: #959595; font-size: 1.06em; line-height: 1.5em; padding: 0.3em 0 0.5em; transition:0.4s; }
#index .section1 .itemBox > li > a .textBox .moreV1 {
display: inline-block; background:var(--main-color); color: #fff; padding:0.74em 1.82em 0.82em; text-transform: uppercase; margin-top: 0.6em; font-size: 1em;
transition:0.4s;
}
#index .section1 .itemBox > li:nth-child(2) a { gap:0; }
#index .section1 .itemBox > li:nth-child(2) a .img { flex:1.1; }

/* section1 item hover */
#index .section1 .itemBox > li:hover { transform:translateY(-1em); border-radius:0.5em; box-shadow:0 0.5em 0.5em rgba(0,0,0,0.2); }
#index .section1 .itemBox > li > a:hover .img { flex:1.3; }
#index .section1 .itemBox > li > a:hover .img img { transform:scale(1.05); }
#index .section1 .itemBox > li > a:hover .textBox { transform:translateY(-10%); }
#index .section1 .itemBox > li > a:hover .textBox .text1 { font-size: 1.9em; }
#index .section1 .itemBox > li > a:hover .textBox .text2 { font-size: 1.1em; }
#index .section1 .itemBox > li > a:hover .textBox .text3 { font-size: 0.9em; }
#index .section1 .itemBox > li > a:hover .textBox .moreV1 { 
font-size: 1.1em; border-radius:0.5em; box-shadow:0 0.2em 0 rgba(24,149,190,0.5); transform:translateY(0);
}

@media (max-width:1200px) {
	#index .section1 .itemBox > li > a { height: 22.5em; }
	#index .section1 .itemBox > li > a .textBox { padding: 1.5em; }
	#index .section1 .itemBox > li > a .textBox .text3 br { display: none; }
}
@media (max-width:991px) {
	#index .section1 { background: #fff; }
	#index .section1 .itemBox { flex-wrap:wrap; gap:2em; }
	#index .section1 .itemBox > li { flex:auto; width: 100%; }
}
@media (max-width:768px) {
	#index .section1 .itemBox > li > a { flex-wrap:wrap; height: auto; padding: 1em 0; }
	#index .section1 .itemBox > li > a .img { flex:auto; width: 100%; text-align: center; }
	#index .section1 .itemBox > li > a .textBox { flex:auto; width: 100%; }
	#index .section1 .itemBox > li:nth-child(2) a { gap:1.5em; }
	#index .section1 .itemBox > li:nth-child(2) a .img { flex:auto; }

	/* section1 item hover */
	#index .section1 .itemBox > li:hover { transform:translateY(0); box-shadow:none; }
	#index .section1 .itemBox > li > a:hover .img { flex:auto; }
	#index .section1 .itemBox > li > a:hover .textBox { transform:translateY(-5%); }
	#index .section1 .itemBox > li > a:hover .textBox .text1 { font-size: 2.33em; }
	#index .section1 .itemBox > li > a:hover .textBox .text2 { font-size: 1.33em; }
	#index .section1 .itemBox > li > a:hover .textBox .text3 { font-size: 1.06em; }
	#index .section1 .itemBox > li > a:hover .textBox .moreV1 { font-size: 1em; }
}


/* section2 */
#index .section2 { padding: 0.66em 0; background: url(img/index_section2_bg.jpg) no-repeat center / cover; }
#index .section2 .titleBox { text-align: center; color: #fff; padding-bottom: 0.42em; }
#index .section2 .titleBox .title .lightV1 { margin-left: 0.2em; }
#index .section2 .moreV1 { padding-top: 4em; }

/* section3 */
#index .section3 { padding: 0.83em 0; }
#index .section3 .titleBox { text-align: center; padding-bottom: 0.42em; }
#index .section3 .titleBox .title b { color: var(--main-color); }
#index .section3 .titleBox .title .lightV1 { color: #000; margin-left: 0.2em; }
#index .section3 .moreV1 { padding-top: 4em; }

/* section4 */
#index .section4 { padding: 0.91em 0; background: url(img/index_section4_bg.jpg) no-repeat center / cover; }
#index .section4 .itemBox { display:flex; align-items:center; gap:0.2em; }
#index .section4 .titleBox { color: #fff; flex:1; }
#index .section4 .text1 a { color: inherit; }
#index .section4 .titleBox .title { padding-bottom: 0.2em; }
#index .section4 .titleBox .title .lightV1 { margin-right: 0.2em; }
#index .section4 .titleBox .box1  { padding: 0.05em 0; }
#index .section4 .titleBox .box2  { padding: 0.05em 0 0; }
#index .section4 .itemBox .inner { 
flex:1; font-size: min(3.71vw,15px); display:grid; grid-template-columns:repeat(2,1fr); gap:1em;
}
#index .section4 .itemBox .inner > li > a { 
display: flex; align-items:center; padding:2.6em 2em; background: rgba(0,0,0,0.5); color: #fff; gap:2.6em; transition:0.4s; height: 100%;
}
#index .section4 .itemBox .inner > li > a .img { width: 4.33em; position: relative; }
#index .section4 .itemBox .inner > li > a .img:after {
content: ''; position: absolute; right: 0; bottom: 0; width: 2.93em; height: 2.93em; background: var(--main-color); border-radius:50%;
transform:translate(0.6em,0.6em);
}
#index .section4 .itemBox .inner > li > a .img img { z-index: 1; position: relative; }
#index .section4 .itemBox .inner > li > a .textBox { flex:1; }
#index .section4 .itemBox .inner > li > a .textBox p span { text-transform: uppercase; }
#index .section4 .itemBox .inner > li > a .textBox .text1 { font-size: 1.2em; padding-bottom: 0.2em; }
#index .section4 .itemBox .inner > li > a .textBox .text2 { font-size: 1.666em; padding: 0.3em 0 0.4em; }
#index .section4 .itemBox .inner > li > a .textBox .moreV2 { font-size: 1em; text-transform: uppercase; padding-top: 0.5em; }

#index .section4 .itemBox .inner > li > a:hover { background: var(--main-color); }

@media (max-width:1400px) {
	#index .section4 .itemBox .inner { flex:1.5; }
}
@media (max-width:1200px) {
	#index .section4 .itemBox .inner { flex:2; }
	#index .section4 .itemBox .inner > li > a { padding:2em 1.5em; }
}
@media (max-width:991px) {
	#index .section4 .itemBox { flex-wrap:wrap; gap:0.4em 0.2em; }
	#index .section4 .titleBox { flex:auto; width: 100%;  }
	#index .section4 .itemBox .inner { flex:auto; width: 100%;  }
}
@media (max-width:768px) {
	#index .section4 .itemBox .inner { grid-template-columns:1fr; }
}

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { background: #313131;  }
footer a { color: inherit; }

footer > .contents_box { padding: 2.5rem 0; }
footer .contents { display:flex; flex-wrap:wrap; align-items:flex-start; }
footer .contents > li:nth-child(1) { width: 25%; }
footer .item2 { width: 75%; }
footer .item2 > div { line-height: 1.8; font-size: 13px; color: #fff; }  /*211223폰트 사이즈 13에서 14로 수정.*/
footer .item2 > div a { color: inherit; }
footer .item2 > .text > span { position: relative; margin-right:10px; font-weight: inherit;  }
footer .item2 > .text > span:after { content:'|'; position:absolute; right:-8px; top:50%; transform:translateY(-55%); }
footer .item2 > .text > span:last-child:after { display: none; }
footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; color: #fff; }
footer .item2 > .copy a { color: inherit; }




footer > .info_box { padding:10px 0; background:#1b1b1b; }


footer > .info_box .info { 
-ms-display:flex; -ms-justify-content:center; -ms-flex-wrap:wrap; 
display:flex; justify-content:center; flex-wrap:wrap; 
text-align: center;
}
footer .info > .item { position:relative; }
footer .info > .item:before { content:''; position:absolute; right:7px; top:50%; transform:translateY(-50%); width:1px; height:13px; background:#fff; }
footer .info > .item:last-child:before { display:none; }
footer .info > .item > a { display:block; color:#fff; font-size:14px; font-weight:500; line-height:1.8; margin-right:15px;  }  /*211223폰트 사이즈 13에서 14로 수정.*/

@media (max-width:1200px) {
footer .contents > li:nth-child(1) { margin-right: 40px; }
footer .item2 { width: calc( 75% - 40px ); }
}

@media (max-width:991px) {
footer .contents > li:nth-child(1) { width: 100%; margin-right: 0; margin-bottom: 20px; }
footer .item2 { width: 100%; }
}

@media (max-width:768px) {
footer .item2 > .text > span { display:block; margin-right:0; }
footer .item2 > .text > span:after { display:none; }

footer .item2 { margin-top: 0; text-align: center; }

footer .info_box { display: none; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/







/* 서브페이지 패딩 */
.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);}

.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }