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

	--main-color : #100964; /* mainColor */

	/* 해드 높이 값 */
	--header-height: 100px;
}
@media (max-width:768px) {
	:root {
		/* 해드 높이 값 */
		--header-height: 65px;
	}
}

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

/* 애니메이션 */
@keyframes ani_opacity {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* 해드세팅 */
	.header_wrap { 
		/* 폰트 사이즈 pc */
		--head-font-size-pc: 18;
		/* 폰트 사이즈 mob */
		--head-font-size-mob:15;

		font-size: min( calc( var(--head-font-size-mob) / 350 * 100vw ), calc(var(--head-font-size-pc) * 1px) );
		position:fixed; right:0; top:0; width:100%; z-index:2000; transition:0.4s; 

	}

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

	/* 로고 */
	.logo{
		/* 로고 너비 */
		--logo-width:190;
		width:calc( var(--logo-width) / var(--head-font-size-pc) * 1em );
	}
	.logo a { 
		display: block; background-repeat: no-repeat; background-position: center; background-size:cover;
		background-image: url(./img/logo-white.png); padding-bottom: calc(50 / var(--logo-width) * 100% );
	}


	/* 대메뉴 */
	#h_menu .outer > li { position:relative; } 


	/* 스크롤 했을 때 해드 효과 */
		.header_wrap.scroll { box-shadow:0 0 10px rgba(0,0,0,0.2); background: #fff; }
		.header_wrap.scroll .logo a { background-image: url(./img/logo.png); }




	@media (min-width:991px) { /* pc */
		#h_menu { 
			/* 스크롤 컬러 */
			--scroll-color: #fff;
			display:flex; align-items:center;
		}

		/* menu */
		/*---------------------------------------- outer ---------------------------------------------*/
		#h_menu .outer { 
			/* 대메뉴 갭 */
			--h-menu-gap:60;
			display:flex; 
			gap: calc( var(--h-menu-gap) / var(--head-font-size-pc) * 1em );
		}
		#h_menu .outer > li > a {
			display:block; font-size:inherit; text-align:center; transition:0.4s; color: var(--scroll-color); height: var(--header-height); 
			line-height: var(--header-height);
		}
		#h_menu .outer > li > a::before{
			content: "";
			position: absolute;
			width: 0%;
			height: 2px;
			background: var(--scroll-color);
			top: 70%;
			transform: translateY(70%);
			transition: all 0.3s;
		}
		#h_menu .catalog { color: var(--scroll-color); font-size: 0.72em; margin-left: 4.61em; display: flex; gap: 1.5em;}
		#h_menu .catalog > li > a { display: block; color: inherit; height: var(--header-height); line-height: var(--header-height); }
		#h_menu .catalog > li > a > i { margin-left: 0.2em; transform:translateY(-7%); }

		#h_menu .catalog > li.search_icon > a {height: auto;}
		#h_menu .catalog > li.search_icon > a > i {font-size: 1.5em;}

		/*---------------------------------------- //outer ---------------------------------------------*/

		/*---------------------------------------- inner ---------------------------------------------*/
		#h_menu .outer > li > .inner {
			/* 소메뉴 너비 */
			--inner-width:220;
			width: calc( var(--inner-width) / var(--head-font-size-pc) * 1em );
			position:absolute; left:0; transform:translateX(-50%); top:100%; z-index:1; border-top:2px solid var(--main-color);
			background:#fff; padding:0.3em 0; display:none; box-shadow:0 5px 10px rgba(0,0,0,0.1);
		}
		#h_menu .outer > li > .inner > li > a { display:block; transition:all 0.4s; padding:0.83em 1.1em; font-size:0.83em; color: #000; }

		/*---------------------------------------- //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); } 
		#h_menu .outer > li.g01:hover .g01Inner { display: block; }

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

		/* 스크롤 했을 때 해드 효과 */
			.header_wrap.scroll #h_menu  { 
				/* 스크롤 컬러 */
				--scroll-color: #000;
			}
	}


	@media (max-width:1400px) {
		.header_wrap { --head-font-size-pc: 16; }
		/* 로고 */
		.logo{
			/* 로고 너비 */
			--logo-width:200;
		}
		.logo a { background-size: 100%; }
		#h_menu .outer { --h-menu-gap:30; }
	}



	@media (max-width:991px) {/* 모바일 */
		.header_wrap { padding: 0; z-index:9000; }

		

		.logo{
			/* 로고 너비 */
			--logo-width:160;
		}

		/* 메뉴 안의 로고 */
		.logo_mob { 
			padding: 1.2em 1em;
		}
		.logo_mob > div {
			--logo-mob-width:180;
			width:calc( var(--logo-mob-width) / var(--head-font-size-mob) * 1em );
		}
		.logo_mob a { 
			display: block; background-repeat: no-repeat; background-position: center; background-size:cover;
			background-image: url(./img/logo.png); padding-bottom: calc(48 / var(--logo-mob-width) * 100% );
		}

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


		/* menu */
		.menu_box { 
			--close-btn-size:50px;
			background-color:#fff; width: 80%; height: 100%; transform:translateX( calc(100% + var(--close-btn-size)) ) ;
			position: fixed; right:0; top: 0; z-index:9999; transition: 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); }

		/* 모바일닫기버튼 */
		.close_btn { 
		position: absolute; left: 0; top: 20px; transform:translateX(-100%); background: #fff;
		width:50px; height:50px; cursor:pointer;
		}
		.close_btn > i { display:block; color:#000; text-align:center; line-height:50px; font-size:30px; }

		#h_menu {
		width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; display:grid; align-content:start;
		}
		#h_menu .outer { order:3; }
		#h_menu .outer > li > a { 
		display: flex; justify-content:space-between; border-bottom: 1px solid #bbb; padding: 1em; color: #313131; transition:0.3s;
		}
		#h_menu .outer > li.dropDown > a { pointer-events:none; }
		#h_menu .outer > li.dropDown > a:after { content: '\f105'; font-family: fontAwesome; opacity: 0.6; transition:0.3s; }

		#h_menu .catalog { color: #fff; font-size: 0.8em; background: #a0a0a0; padding: 1em; text-align: center;  }
		#h_menu .catalog > li > a { display: block; color: inherit; }
		#h_menu .catalog > li > a > i { margin-left: 0.2em; transform:translateY(-7%); }

		#h_menu .outer > li > .inner { 
		border-bottom: 1px solid #bbb; display:grid; gap:0.8em; height: 0; visibility:hidden; opacity: 0; transition:0.2s;
		}
		#h_menu .outer > li > .inner > li > a { 
			--inner-mob-font-size:13;
			font-size:calc( var(--inner-mob-font-size) / var(--head-font-size-mob) * 1em );
			display:block; color: #313131; padding: 0 1.4em;
		}

		#h_menu .catalog > li.search_icon {position: absolute; top: 30px; right: 10px; color: #000; font-size: 25px;}



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

		/* 클릭시 드롭다운 화살표 효과 */
		#h_menu .outer > li.dropDown.on > a:after { transform:rotate(90deg); opacity: 1; }

		/* 모바일에서 outer li 클릭했을때 inner 나오는 효과 */
		#h_menu .outer > li.on .inner { height: auto; visibility:visible; opacity: 1; padding: 1em 0; }

		/* 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
		#h_menu .outer > li > a.on { color: var(--main-color); } 

		/* 스크롤 했을 때 해드 효과 */
		.header_wrap.scroll .open_btn { color: #000; }
	}
	@media (max-width:768px) {
		.header_wrap { 
			height: var(--header-height);
		}

		.header_wrap { box-shadow:0 0 10px rgba(0,0,0,0.2); background: #fff; }
		.header_wrap .logo a { background-image: url(./img/logo.png); }
		.header_wrap .open_btn {color: #000;}
	}




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



#index { min-height: 50vh; }

/* 타이틀 */
#index .titleBox .text1 { 
    font-size: min(4.29vw, 20px); display: inline-block; padding-bottom: 0.7em;
    font-weight: 500;
}

#index .titleBox .text2 { font-size: min(6.29vw, 45px); line-height: 1.3em; position: relative;  margin-bottom: 1em; font-weight: 500; font-family: 'Poppins'; color: var(--main-color);}
#index .titleBox .text2:after { 
    content: ''; position: absolute; left: 50%; bottom: -10px; transform:translateX(-50%); width: 100%; max-width: 110px; height: 5px; background: #0e1138;
    }

#index .titleBox .text3 { font-size: min(3.43vw,16px); line-height: 1.6em; color: #434343; font-weight: 500;}
@media (max-width:768px) {
	#index .titleBox .text1 { padding-bottom: 0.5em; margin-bottom: 0.2em; }
	#index .titleBox .text1:after { height: 2px; }
	#index .titleBox .text2 { line-height: 1.1; padding: 0.2em 0 0.4em; }
}

/* 타이틀애니메이션 */
#index .char {
display: inline-block;
animation-delay: calc(0.1s + var(--char-index) * 0.1s);
transition: all 0.1s calc(0.1s + var(--char-index) * 0.1s);
}

#index .titleBox .text1[data-scroll] { opacity: 0; transition:2s; }
#index .titleBox .text1[data-scroll]:after { width: 0; transition:1s; }
#index .titleBox .text1[data-scroll='in'] { opacity: 1; }
#index .titleBox .text1[data-scroll='in']:after { width: 100%; }
#index .titleBox .text1[data-scroll='out'] { opacity: 0; }
#index .titleBox .text1[data-scroll='out']:after { width: 0; }

#index .titleBox .text2 { transition:1s; }
#index .titleBox .text2[data-scroll='out'] { opacity: 0; transform:translateY(20%); }

#index .titleBox .text3[data-scroll] { opacity: 0; transition:2s; }
#index .titleBox .text3[data-scroll='in'] { opacity: 1; }
#index .titleBox .text3[data-scroll='out'] { opacity: 0; }
/* //타이틀애니메이션 */

/* view more */
/* #index .moreV1 {
--transition:0.4s;
text-align: center; font-size: min(3.71vw,15px);
}
#index .moreV1 a { display: inline-block;  color: #fff; padding: 0.6em 1.6em 0.8em; position: relative; transition:var(--transition); }
#index .moreV1 a:before { 
content: ''; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%);
width: 100%; height: 100%; background: var(--main-color); border-radius:0.5em; transition:var(--transition);
}
#index .moreV1 a span { position: relative; z-index: 1; }
#index .moreV1 a .text { transition:var(--transition); position: relative; }
#index .moreV1 a .text:before { 
content: ''; position: absolute; left: 0; top: 0; background: url(./img/index_icon1.png) no-repeat center / cover; width: 1em; height: 1.2em;
transform:translate(0,-30%); transition:var(--transition); opacity: 0;
}
#index .moreV1 a .icon:before { content: '\f101'; font-family: fontAwesome; margin-left: 0.2em; }

#index .moreV1 a:hover { transform:scale(1.3); }
#index .moreV1 a:hover:before { height: 10%; width: 70%; bottom: 0.4em; }
#index .moreV1 a:hover .text { color: #000; padding-left: 1em; }
#index .moreV1 a:hover .text:before { opacity: 1; }
#index .moreV1 a:hover .icon { color: #000; } */

/* section */
#index .section {
    /* font-size: min(7.14vw,50px);  */
    font-size: min(calc(25 / 350 * 100vw),50px);
    overflow: hidden; 
}

/* 애니메이션 */
#index .section > *[data-scroll] { 
opacity: 0; 
will-change:transform,scale,opacity; 
transform:translateY(6rem) scale(0.97); 
transition:all 0.8s cubic-bezier(0.165,0.84,0.44,1);
}
#index .section > *[data-scroll='in'] {
	opacity: 1;
	transform:translateY(0) scale(1);
}
#index .section > *[data-scroll='out'] {
	opacity: 0;
}


/* section 공통 버튼 CSS */
#index .More a{display: flex; gap: 10px; align-items: center; position: relative;}
#index .More a p{font-size: 1.5em; position: relative;}
#index .More a p:after{
    content: ''; position: absolute;
    width: 24px; height: 24px;
    background-color: #5679a0;
    opacity: 0.3;
    top: -6px; left: -6px;
    border-radius: 50%;
    transition: 0.5s;
}
#index .More a img{transition: 0.3s;}

#index .More a:hover p:after{
    width: 160%; border-radius: 0;
}
#index .More a:hover img{
    transform:translateX(5px);
}

#index .More a:hover{
    color: inherit;
}

/* 공통 버튼 css */
#index .section .btnV1{
    font-size: 10px;
    display: flex; justify-content: center; align-items: center;
    width: 100%; max-width: 150px; height: 40px;
    transition: 0.2s;
    background-color: #0e1138; overflow: hidden;
}
#index .section .btnV1 a{
    font-size: 1.5em; width: 100%; height: 100%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    gap: 0.5em; transition: 0.2s;
}
#index .section .btnV1 a img{transition: 0.2s;}
#index .section .btnV1 a:hover img{opacity: 0;}

#index .section .btnV1:hover{
    background-color: var(--main-color);
}

/* section1 */
#index .section1 {
    font-size: min(calc(10 / 500 * 100vw), 10px); padding: 11.5em 0;
    background: url(./img/sec01_bg.jpg) no-repeat center center / cover;
}

#index .section1 .containerV1{display: flex; justify-content: space-between; align-items: center; gap: 3em;}
#index .section1 .titleBox {text-align: left; flex: 1;}

#index .section1 .titleBox .text1 { color: var(--main-color); font-size: 6.5em; font-weight: 600; font-family: 'Poppins', sans-serif;}
#index .section1 .titleBox .text1:after{display: none;}
#index .section1 .titleBox .text2 {color : #000; font-size: 2.5em; font-weight: normal; margin-bottom: 1em; font-family: 'Noto Sans KR', sans-serif;}
#index .section1 .titleBox .text2:after{display: none;}
#index .section1 .titleBox .text3 {color : #535353; font-size: 1.6em; line-height: 1.625; margin-bottom: 3.1em;}


#index .section1 .sec01_box{flex: 1;}
@media (max-width: 1350px) {
    #index .section1 .titleBox .text3 br{display: none;}
}

@media (max-width: 1200px) {
    #index .section1 .containerV1{flex-direction: column-reverse;}
    #index .section1 .titleBox{text-align: center;}
    #index .section1 .btnV1{margin: 0 auto;}
}


/* section3 */
#index .section3{
    font-size: min(calc(10 / 500 * 100vw), 10px); padding: 11.5em 0;
    background: url(./img/sec03_bg.jpg) no-repeat center center / cover;
}

#index .section3 .img_wrap{display: grid; grid-template-columns: repeat(2, 1fr); gap: 3em; margin-top: 6em;}

#index .section3 .img_wrap .imgBox .Box1-1{display: flex; align-items: center; background-color: #fff; border: 1px solid #959595;}
#index .section3 .img_wrap .imgBox .Box1-1 .Box-text{padding: 2em 2em 2em 2.5em;}
#index .section3 .img_wrap .imgBox .Box1-1 .Box-text .text1{font-size: 2.5em; font-weight: 600; margin-bottom: 0.52em;}
#index .section3 .img_wrap .imgBox .Box1-1 .Box-text .text2{font-size: 1.8em; font-weight: 500; line-height: 1.3; margin-bottom: 0.8em;}
#index .section3 .img_wrap .imgBox .Box1-1 .Box-text .text3{font-size: 1.6em; line-height: 1.5; color: #898989; margin-bottom: 2em;}

#index .section3 .img_wrap .imgBox1{display: flex; flex-direction: column; gap: 1.5em;}

#index .section3 .img_wrap .imgBox2{grid-column: 2 / 3; grid-row: 1 / 2;}
#index .section3 .img_wrap .imgBox2 .Box1-1{flex-direction: column; height: 100%;}
#index .section3 .img_wrap .imgBox2 .Box1-1 .Box-text{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding-left: 0;}

/* section03 - btn */
#index .section3 .Box-btn{
    width: 100%; max-width: 95px; transition: 0.3s;
}
#index .section3 .Box-btn a{
    padding: 7px 0;
    width: 100%;
    border-bottom: 1px solid #000; display: inline-block;
    transition: 0.3s;
    text-align: center;
    position: relative;
}
#index .section3 .Box-btn a:after{
    content:''; position: absolute;
    width: 0%; height: 100%; background-color: #000;
    top: 0; left: 0;
    transition: 0.3s;
}

#index .section3 .Box-btn a p{font-size: 1.5em;}
#index .section3 .Box-btn a p span{transition: 0.5s; display: inline-block;}

/* btn - hover */
#index .section3 .Box-btn:hover{max-width: 110px;}
#index .section3 .Box-btn a:hover{color: #fff; z-index: 0;}
#index .section3 .Box-btn a:hover:after{width: 100%; z-index: -1;}
#index .section3 .Box-btn a:hover p span{transform: rotate(90deg);}


@media (max-width: 1430px) {
    #index .section3 .img_wrap{grid-template-columns: repeat(1, 1fr);}
    #index .section3 .img_wrap .imgBox{width: 100%; max-width: 800px; margin: 0 auto;}
    #index .section3 .img_wrap .imgBox2{grid-column: initial; grid-row: initial;}

    #index .section3 .img_wrap .imgBox2 .Box1-1{ margin: 0 auto; padding-top: 2em;}
    #index .section3 .img_wrap .imgBox2 .Box1-1 .Box-text{padding-left: 2.5em;}
}

@media (max-width: 768px) {
    #index .section3 .img_wrap .imgBox .Box1-1{padding: 2em; flex-direction: column;}
    #index .section3 .img_wrap .imgBox .Box1-1 .Box-text{display: flex; flex-direction: column; align-items: center; justify-content: center;}
    #index .section3 .img_wrap .imgBox .Box1-1 .Box-text .text3{text-align: center;}
    #index .section3 .img_wrap .imgBox .Box1-1 .Box-text .text3 br{display: none;}
}

/* section4 */
#index .section4 { padding: 1.8em 0; }
#index .section4 .titleBox { padding-bottom: 1em; }
#index .section4 .tabBox1 { 
--transition:0.4s;
--tab-color:#0e1138;
padding-bottom: 0.8em;
}

/* section4 - nav */
#index .section4 .tabBox1 .nav { 
display:flex; font-size: min(3.14vw,18px); font-weight: 500; color: #898989; border-bottom: 2px solid #dcdcdc; margin-bottom: 2.22em;
}
#index .section4 .tabBox1 .nav > li { flex:1 1 auto; text-align: center; position: relative; }
#index .section4 .tabBox1 .nav > li:not(:last-child):after {
display: none;
content: '|'; font-size: 0.8em; position: absolute; right: -1px; top: 50%; transform:translateY(-50%);
}
#index .section4 .tabBox1 .nav > li > a { color: inherit; display: block; position: relative; padding: 0.5em 0; transition:var(--transition); }
#index .section4 .tabBox1 .nav > li > a:after {
content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--tab-color); opacity: 0;
transition:var(--transition);
}
#index .section4 .tabBox1 .nav > li > a span { position: relative; z-index: 1; color: inherit; }

/* section4 - tab-content */
#index .section4 .tabBox1 .tab-content > li { font-size: min(3.71vw,16px); }

/* active & hover */
#index .section4 .tabBox1 .nav > li > a:hover { color: var(--tab-color); }
#index .section4 .tabBox1 .nav > li.active > a { color: var(--tab-color); }
#index .section4 .tabBox1 .nav > li.active > a:after { opacity: 1; }

/* btn */
#index .section4 .btnV1{margin: 0 auto;}

@media (max-width:991px) {
	#index .section4 .tabBox1 .nav:before, 
	#index .section4 .tabBox1 .nav:after { display: none; }
	#index .section4 .tabBox1 .nav { 
	display:grid; grid-template-columns:repeat(2,1fr); border-bottom: none; gap:0.4em;
	}
	#index .section4 .tabBox1 .nav > li { flex:auto; }
	#index .section4 .tabBox1 .nav > li:not(:last-child):after { display: none; }
	#index .section4 .tabBox1 .nav > li > a { border: 1px solid var(--tab-color); color: var(--tab-color); }
	#index .section4 .tabBox1 .nav > li > a:after { display: none; }

	#index .section4 .tabBox1 .nav > li > a:hover { color: #fff; background: var(--tab-color); }
	#index .section4 .tabBox1 .nav > li.active > a { color: #fff; background: var(--tab-color); }
}


/* section5 */
#index .section5 { padding: 2.35em 0; background: url(./img/index_section5_bg.jpg) no-repeat center / cover; }
#index .section5 .containerV1 > .itemBox { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }

#index .section5 .titleBox .text2:after{
    left: 0; transform: initial;
}
@media (max-width: 991px) {
    #index .section5 .containerV1 > .itemBox{grid-template-columns: repeat(1, 1fr);}
}

/* seciton5 - item1 */
#index .section5 .itemBox .item1 { font-size: 15px; }
#index .section5 .itemBox .item1 .titleBox { padding-bottom: 2.5em; position: relative;}
#index .section5 .itemBox .item1 .titleBox:after{
    content:''; position: absolute;
    width: 130px; height: 1px; background-color: #959595; 
    bottom: 15px; left: 0;
}

#index .section5 .itemBox .item1 .titleBox .text3 { padding-bottom: 1em; }
#index .section5 .itemBox .item1 .titleBox .text4 { font-size: min(5.14vw, 16px); line-height: 1.5em; font-weight: 500; color: #434343;}
#index .section5 .itemBox .item1 .info { font-size: min(3.71vw, 17px); line-height: 1.6em; padding-bottom: 1em; }


#index .section5 .itemBox .item1 .info a { color: inherit; }
#index .section5 .itemBox .item1 .moreV3 {
--transition:0.5s;
width: 100%; max-width: 575px;
font-size: min(3.43vw,15px); padding-top: 1.4em;
display:flex; gap:1em; max-width: 573px; justify-content: space-between;
}
#index .section5 .itemBox .item1 .moreV3 > li{font-size: min(calc(10 / 400 *  100vw), 10px);}
#index .section5 .itemBox .item1 .moreV3 > li{flex: 1; padding: 1.5em 2.5em; border: 1px solid #959595; border-radius: 15px;}
#index .section5 .itemBox .item1 .moreV3 > li.list{display: flex; align-items: center; gap: 2em;}

#index .section5 .itemBox .item1 .moreV3 > li.list .text_box h2{font-size: 2.5em; margin-bottom: 0.4em; font-weight: 500; color: #434343;}


/* section03 - btn */
#index .section5 .itemBox .item1 .moreV3 .Box-btn{
    width: 100%; max-width: 100px; transition: 0.3s;
}
#index .section5 .itemBox .item1 .moreV3 .Box-btn a{
    padding: 7px 0;
    width: 100%;
    border-bottom: 1px solid #000; display: inline-block;
    transition: 0.3s;
    text-align: center;
}

#index .section5 .itemBox .item1 .moreV3 .Box-btn a p{font-size: 1.5em;}
#index .section5 .itemBox .item1 .moreV3 .Box-btn a p span{transition: 0.5s; display: inline-block;}

/* btn - hover */
#index .section5 .itemBox .item1 .moreV3 .Box-btn:hover{max-width: 110px;}
#index .section5 .itemBox .item1 .moreV3 .Box-btn a:hover{font-weight: bold; color: var(--main-color); border-bottom: 1px solid var(--main-color);}
#index .section5 .itemBox .item1 .moreV3 .Box-btn a:hover:after{width: 100%; z-index: -1;}
#index .section5 .itemBox .item1 .moreV3 .Box-btn a:hover p span{transform: rotate(90deg);}


/* 애니메이션 */
#index .section5 .titleBox .text4[data-scroll] { opacity: 0; transition:1.5s; transform:translateX(-2rem); }
#index .section5 .titleBox .text4[data-scroll='in'] { opacity: 1; transform:translateX(0); }
#index .section5 .titleBox .text4[data-scroll='out'] { opacity: 0; transform:translateX(-2rem); }

#index .section5 .itemBox .item1 .info[data-scroll] { opacity: 0; transition:1.5s; transform:translateX(2rem); }
#index .section5 .itemBox .item1 .info[data-scroll='in'] { opacity: 1; transform:translateX(0); }
#index .section5 .itemBox .item1 .info[data-scroll='out'] { opacity: 0; transform:translateX(2rem); }

#index .section5 .itemBox .item1 .moreV3 > .item1[data-scroll] { opacity: 0; transition:1.5s; transform:translateX(-1rem); }
#index .section5 .itemBox .item1 .moreV3 > .item1[data-scroll='in'] { opacity: 1; transform:translateX(0); }
#index .section5 .itemBox .item1 .moreV3 > .item1[data-scroll='out'] { opacity: 0; transform:translateX(-1rem); }

#index .section5 .itemBox .item1 .moreV3 > .item2[data-scroll] { opacity: 0; transition:1.5s; transform:translateX(1rem); }
#index .section5 .itemBox .item1 .moreV3 > .item2[data-scroll='in'] { opacity: 1; transform:translateX(0); }
#index .section5 .itemBox .item1 .moreV3 > .item2[data-scroll='out'] { opacity: 0; transform:translateX(1rem); }


@media (max-width: 1320px) {
    #index .section5 .itemBox .item1 .titleBox .text4 br { display: none; }
}

@media (max-width: 1220px) {
    #index .section5 .itemBox .item1 .moreV3{flex-direction: column;}
}

@media (max-width: 991px) {
    #index .section5 .itemBox .item1 .moreV3{flex-direction: row;}
}

@media (max-width:768px) {
	#index .section5 .itemBox .item1 .moreV3 > li > a { font-size: 0.85em;}
	#index .section5 .itemBox .item1 .moreV3 > li > a .inner p { font-size: 1.4em; }
}

@media (max-width: 600px) {
    #index .section5 .itemBox .item1 .moreV3 { flex-direction: column; max-width: 500px; margin: 0 auto;  }
}

@media (max-width:500px) {
	#index .section5 .itemBox .item1 .moreV3 > li { flex:auto; width: 100%; }
	#index .section5 .itemBox .item1 .moreV3 > li > a  { display:grid; grid-template-columns:40px auto; padding: 10px 15px; }
	#index .section5 .itemBox .item1 .moreV3 > li > a > .icon { width: auto; }
	#index .section5 .itemBox .item1 .moreV3 > li > a .inner { flex:auto; }
	#index .section5 .itemBox .item1 .moreV3 > li > a .inner p { font-size: 15px; }
	#index .section5 .itemBox .item1 .moreV3 > li > a .inner .moreV2 { font-size: 11px; }
}


/* section6 */
#index .section6 { padding: 1em 0;  }
#index .section6 .titleBox { padding-bottom: 1em; }
#index .section6 .itemBox { position: relative; padding-bottom: 56.25%; }
#index .section6 .itemBox iframe { width: 100%; height: 100%; position: absolute;  }

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { 
--footer-color1: #fff; font-size: 15px;
background: #313131;
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 #6e6e6e; }
footer .info .containerV1{display: flex; align-items: center; justify-content: space-between;}
footer .info .item1 { 
-ms-display:flex; -ms-flex-wrap:wrap; 
display:flex; flex-wrap:wrap; 
text-align: center; padding-top: 1em; padding-bottom: 1em;
}
footer .info .item1 > li { position:relative; }
footer .info .item1 > li:before { 
content:''; position:absolute; right:0.5em; top:50%; transform:translateY(-45%); width:1px; height:0.8em; background:var(--footer-color1); 
}
footer .info .item1 > li:last-child:before { display:none; }
footer .info .item1 > 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: 2.6em 0 1.6em; }
footer .contents .item1 { flex:1; }
footer .contents .item1 .f_logo { display: inline-block; }
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 {font-weight: inherit; align-self:end; }
footer .contents .item3 { flex:1; }
footer .contents .item3 .inner { display:flex; justify-content:flex-end; gap:0.2em; }


footer .ft_sitemap {position: relative;height: 100%;}
footer .ft_sitemap > select {
    width: 160px; height: 40px; border-color: #cecece; background: #313131;
    padding: 10px 15px; font-size: 0.89em; color: #fff; 
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
footer .ft_sitemap::after {
    content:''; position: absolute; 
    top: 50%; right: 6px;
    transform: translateY(-3px);
    width: 17px;
    height: 17px;
    background: url("./img/footer_box.png") no-repeat;
}

@media (max-width: 991px) {
    footer .contents{flex-direction: column;}
}

@media (max-width: 767px) {
    footer .contents .item2 .text > span{display: block; text-align: center;}
    footer .contents .item2 > .copy{text-align: center;}

    footer .contents .item1{text-align: center;}
    footer .contents .item2 .text > span:before{display: none;}
    footer .info .containerV1{justify-content: center;}
    footer .info .containerV1 .item2{display: none;}
}



/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/








/* 서브페이지 패딩 */
.tmt_sub_frame { padding:40px 0 50px; min-height: 70vh; overflow: hidden; }
/* .tmt_sub_frame .containerV1 {position: relative;} */
.tmt_sub_frame .containerV1[data-scroll] { 
opacity: 0; 
/* will-change:top, opacity;  */
top: 1rem;
transition:all 1s cubic-bezier(0.165,0.84,0.44,1);
}
.tmt_sub_frame .containerV1[data-scroll='in'] {
	opacity: 1;
	top: 0;
}
.tmt_sub_frame .containerV1[data-scroll='out'] {
	opacity: 0;
}

.page_frame{padding-top: 3em;}

/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.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; }