@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; }


/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; }
.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;  }


/* html 폰트 사이즈 */
@media (max-width:1200px) {
	html { font-size: 8.5px; }
}
@media (max-width:991px) {
	html { font-size: 8px; }
}
@media (max-width:768px) {
	html { font-size: 7.5px; }
}
@media (max-width:580px) {
	html { font-size: 6.5px; }
}
@media (min-width:1200px) and (max-height:800px) {/* 너비 1200이상 높이 800이하 */
html { font-size: 8px; }
}
@media (min-width:1200px) and (max-height:650px) {/* 너비 1200이상 높이 650이하 */
html { font-size: 7.5px; }
}
@media (min-width:1200px) and (max-height:500px) {/* 너비 1200이상 높이 500이하 */
html { font-size: 6.5px; }
}



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

	--color1 : #00a0e9; /* mainColor */
	--color2 : #b5b5b5;
	--color3 : #959595;
	--color4 : #313131;
	--color9 : #295c9c;
	--color10 : #3a3a3a;
	--color11 : #333;

	/*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-size35 : min(8.75vw, 35px); 
	--font-size45 : 5.63vw; 
	--font-size50 : 6.17vw; 


	
}

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


.wrap { padding-top: 0; }
@media (max-width:991px) {
	.wrap { padding-top: 0;}
}


/*메인 비디오영상 참고 스타일*/
.main .videoBox { position:relative; padding-bottom:49.4%; height:0; overflow:hidden; background: #000;}
.main .videoBox::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; z-index: 2;}
.main .video_title {position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: fit-content;}
.main .video_title > * {font-weight: bold; color: #fff; line-height: 1.3; text-align: center;}
.main .video_title .video_titleV2 {font-size: min(4.07vw, 50px); margin-bottom: 10px;}
.main .video_title .video_titleV1 {font-size: min(5.69vw, 70px);}

.main .videoBox video { position:absolute; left:0; top:0; width:100%; height:100%; z-index: 0; object-fit: fill;}




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

#header { position: fixed; left: 0; top: 0; width: 100%; height: 10rem; z-index: 1000; transition:0.4s;}

/*서브페이지 배경*/

/*서브메뉴 배경 높이값이랑 top값은 스크립트로 내용물 값에 따라 바뀌게 해놓아서 여기에 적어놓은 높이값이랑 top값은 장식임*/
#header > .submenu_bg {position: absolute; top: -400px; left: 0; width: 100%; height: 300px; background: rgba(255,255,255,0.9); z-index: 1; transition: all 0.3s linear;
border-bottom: 1px solid rgba(0,0,0,0.2);}


#header .itemBox {
	width: 100%; max-width: var(--containerV1-width,1200px); height: 100%; display:flex; justify-content:space-between; align-items:center; position: relative; z-index: 2;
	margin: 0 auto;
}

#logo { width: 15.06vw; min-width: 196px;}
#logo a { display: block; position: relative;}
#logo a img.logo_pc {display: block;}
#logo a img.logo_hover { display: none;}

/*main_menu---------------------------------------------------------------------------*/
#nav .nav_inner { display:flex; align-items:center; width: 100%;}
#nav .outer {display: flex;}
#nav .outer > li {position: relative;}
#nav .outer > li > a {
display: block; color: #fff;  font-size: max(16px, 0.94vw); font-weight: 500; height: 100%; line-height: 10rem;
padding: 0 3.1rem; position: relative; transition: all 0.3s;
}
#nav .outer > li > a:after {
content: ''; position: absolute; left:50%; transform:translateX(-50%); bottom: 0; width: 0; height: 3px; background: var(--color1); transition:0.4s;
}


/*sub_menu---------------------------------------------------------------------------*/
#nav .inner {
position: absolute; left: 0; top: -300%; width: 100%; padding: 30px 0 0; text-align: center;
border-top: 1px solid rgba(255,255,255,0.2);  opacity: 0; transition: opacity 0.4s;
}
#nav .inner > li {position: relative; color: #333; margin-bottom: 20px;}

#nav .inner > li > a { display: block; font-size: 16px; color: inherit; transition: all 0.3s;}
#nav .outer > li:nth-child(1) .inner { z-index: 10;}



/* hover */
/*submenu_bg top값을 js로 줘서 높이값 0이 주어지도록 !important를 줌*/
#header:hover > .submenu_bg {top: 0 !important;}
#header:hover #logo a img.logo_pc {display: none;}
#header:hover #logo a img.logo_hover {display: block;}
#header:hover #nav .outer > li > a {color: #333;}
#header:hover #nav .inner {opacity: 1; top: 100%;}

#nav .outer > li:hover > a:after {width: 100%;}

#nav .inner > li > a:hover { color: var(--color1); }

/* 해드 스크롤 했을때 */
#header.scroll {background: rgba(255,255,255,0.9);}
#header.scroll #nav .outer > li > a {color: #333;}
#header.scroll #logo a img.logo_pc {display: none;}
#header.scroll #logo a img.logo_hover {display: block;}
#header.scroll:hover {background: transparent;}


#header.scroll #nav .inner {}


/* 해당페이지 일때 */
#nav .outer > li > a.on:after {width: 100%;}



@media (max-width:1230px) {
	#header .itemBox {padding: 0 15px; }
}

@media (max-width:1200px) {
	#nav .outer > li > a { padding: 0 15px; }
}


@media all and (max-width:991px) {
	
	#header {background-color: transparent; z-index: 9999999;}
	


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

	#nav {
	background-color: var(--color1); width: 20em; height: 100%;  display: block;
	position: fixed; right:0; top: 0; z-index:9999; margin-right:-20em;  transition:margin-right 0.3s;
	}
	#nav .nav_inner { 
	width: 20em; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; 
	flex-direction:column; justify-content:flex-start; align-items:stretch;
	}


	/* 모바일닫기버튼 */
	.close_btn { width:50px; height:50px; margin-right:0; margin-left:auto; cursor:pointer; position: absolute; right: 0; top: 15px;}
	.close_btn > i { display:block; color:#fff; text-align:center; line-height:50px; font-size:30px; }



	#nav .outer { display: block; margin-top: 9.9rem;}
	#nav .outer > li { margin-right: 0; width: 100%; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.7);}
	#nav .outer > li:first-child { border-top:1px solid #fff; }
	#nav .outer > li > a { font-weight: 500; padding:15px 20px; color: #fff; position: relative; pointer-events:none; height: auto; line-height: 1; }

	#nav .outer > li > a:after {background: #fff; left: 10px; width: 7px; height: 7px; border-radius: 50%; top: 50%; bottom: unset; transform: translate(-50%, -50%); }

	#nav .inner { position: static; padding: 0; display: none; border:0; opacity: 1; background: #fff;}
	#nav .inner > li { margin-bottom:0; position: relative; padding: 0; }


	#nav .inner > li > a {
	color: #333; padding: 15px 25px; position: relative; transition: all 0.3s;
	text-align: left; left: 0; font-size: 13px;
	}

	/*	pc 메뉴 효과 지움*/
	#header > .submenu_bg {display: none;}
	#header.scroll:hover {background: rgba(255,255,255,0.9);}
	
	#header:hover #nav .outer > li > a {color: #fff;}
	#header:hover #nav .inner {opacity: 1; top: 100%;}
	#nav .outer > li:hover > a:after {display: block; width: 7px;}
	#nav .inner > li > a:hover { color: var(--color1); }


	/* 헤드 스크롤 했을때 */
	#header.scroll .open_btn > i {color: #333;}
	#header.scroll {background: rgba(255,255,255,0.9);}
	#header.scroll #nav .outer > li > a {color: #fff;}
	#header.scroll #logo a img.logo_pc {display: none;}
	#header.scroll #logo a img.logo_hover {display: block;}

	/* hover */
	#nav .outer > li:hover > a {}
	#nav .outer > li:hover > .inner { display:none; }
	#nav .inner > li > a:hover {left: 5px;}
	#nav .outer > li.on > a:after {background: #000;}






	/* 해당페이지 일때 */
	#nav .outer > li > a.on {}
	#nav .outer > li > a.on:after {display: block; width: 7px; background: #000;}


	/* outer 클릭시 inner보이는 효과 */
	#nav .outer > li.on > .inner { display: block; }
	

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

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



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

.index .title-V1 {font-size: var(--font-size35); font-weight: bold; color: #000; line-height: 1.3;}
.index .tag_text {font-size: var(--font-size18); color: var(--color1); margin-bottom: 10px; line-height: 1.4;}


/*section1 틀*/
.index .section1 { padding: max(50px, 8.3rem) 0 max(50px, 14.3rem) 0;}
.index .section1 .titleBox { margin-bottom: 42px;}
.index .section1 .itemBox { display:grid; grid-template-columns:repeat(3,1fr); gap:0 1.5rem;}
.index .section1 .itemBox > li {}
.index .section1 .itemBox .imgBox { position: relative; transition:0.4s ease-in; overflow: hidden; border-radius: 15px;}
.index .section1 .itemBox .imgBox > .textBox {
position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; background: rgba(0,0,0,0.6); font-size: max(2.4rem,1.30vw); color: #fff; padding: 10px;
text-align: center; height: calc(1em + 4.1rem); transition:0.4s; display:flex; align-items:center; justify-content:center; line-height: 1.3;
}

.index .section1 .itemBox > li > a:hover .imgBox { box-shadow:0 10px 10px rgba(0,0,0,0.5); transform:translateY(-10px); }
.index .section1 .itemBox > li > a:hover .imgBox > .textBox { height: 100%;}
/*grid-template-rows: repeat(3, 200px);*/
@media (max-width:768px) {
.index .section1 .titleBox {margin-bottom: 60px;}
.index .section1 .itemBox { grid-template-columns:repeat(1,1fr); gap: 20px 0;}
.index .section1 .itemBox .imgBox {height: 25rem;}
.index .section1 .itemBox img { width: 100%; position: absolute; top: 70%; transform: translateY(-50%);}
.index .section1 .itemBox > li > a:hover .imgBox { box-shadow:none; transform:translateY(0);}

/*hover*/
.index .section1 .itemBox .imgBox > .textBox {height: auto;}
}


/*sec2 틀*/
.section2  {background: url(img/sec02_bg.jpg) no-repeat center bottom / cover; padding: max(50px, 7.5rem) 0; font-size: 0.52vw;}
.section2 .itemBox {display: flex; gap: 0 7em;}
.section2  .frame_text {padding-top: max(10px, 2.5em); flex-basis: 0; flex-grow: 1;}
.section2  .frame_01_box1 {color: #fff; font-weight: 400;}
.section2  .frame_01_box1 .box1_text1 .title-V1 {margin-bottom: 30px; color: #fff; }
.section2  .frame_01_box1 .box1_text2 {padding-bottom: 35px;}
.section2  .frame_01_box1 .box1_text2 p.text1 {font-size: var(--font-size18); line-height: 1.5; color: #fff;}
.section2  .frame_01_box1 .box1_text3 { padding-bottom: 3rem;  line-height: 18px; display: flex; gap: 20px; flex-wrap: wrap;}

.section2  .frame_01_box1 .box1_text3 a {display: block; width: 100%; max-width: 180px; height: 50px;}
.section2  .frame_01_box1 .box1_text3 a > div{display: inline-block; width:100%; height:100%; background: var(--color1); color: #fff; padding: 5px; transition: 0.5s;
display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 10px;}
.section2  .frame_01_box1 .box1_text3 a > div > span {font-size: 15px;}
.section2  .frame_01_box1 .box1_text3 a > div:hover span > i  {position: relative; left: 0;}

.section2  .frame_01_box1 .box1_text3 a > div:hover {background: #fff; color: #0e1138; transition: 0.5s;}
.section2  .frame_01_box1 .box1_text3 a > div:hover span > i {animation: move 0.3s infinite alternate;}


.section2 .frame_01_box2 {overflow: hidden; border-radius: 15px; display: flex; align-items: center; justify-content: center;}
.section2 .frame_01_box2 img {width: 100%;}

@media all and (max-width: 1230px) {
	.section2  .frame_01_box1 .box1_text2 p.text1 br {display: none;}
}

@media all and (max-width: 1030px) {
	.section2  .frame_01_box1 .box1_text3 a {max-width: 80%;}
}
@media all and (max-width: 991px) {
	.section2 .itemBox {display: flex; gap: 15px 0; flex-direction: column; align-items: center;}
	.section2 .frame_01_box1 .box1_text3 {justify-content: center; }
	.section2  .frame_01_box1 .box1_text3 a {max-width: 90%;} 
	.section2  .frame_01_box1 .box1_text3 a > div:hover {background: var(--color1); color: #fff;}
	.section2  .frame_01_box1 .box1_text3 a > div:hover span > i {animation: unset;}
}

@media all and (max-width: 550px) {
.section2  .frame_01_box1 .box1_text3 > a {max-width: 100%; }
}





/* section3 */
.index .section3 {padding: max(50px, 8rem) 0 max(50px, 8rem) 0;}
.index .section3 .titleBox {text-align: center; line-height: 1.4; margin-bottom: 50px;}

/* btn */
.index .section3 .containerV1 > a.item_button {display: inline-block; width:100%; max-width: 180px; height: 50px; background: var(--color1); color: #fff; padding: 5px; transition: 0.3s;
display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 10px; margin: 60px auto 0; position: relative; bottom: 0;}
.index .section3 .containerV1 > a.item_button > span {font-size: 15px;}
.index .section3 .containerV1 > a.item_button > span i {position: relative; left: 0; transition: all 0.3s;}
.index .section3 .containerV1 > a.item_button:hover {bottom: 10px;}
.index .section3 .containerV1 > a.item_button:hover > span i  {animation: move 0.3s infinite alternate;}


/*버튼 i 통합 애니메이션*/
@keyframes move {
	to {left: 3px;}
}

@media all and (max-width: 991px) {
	.index .section3 .containerV1 > a.item_button {max-width: 90%;}
	.index .section3 .containerV1 > a.item_button:hover {bottom: 0;}
	.index .section3 .containerV1 > a.item_button:hover > span i {animation: unset;}
}

@media all and (max-width: 550px) {
	.index .section3 .containerV1 > a.item_button {max-width: 100%;}
}

/* section4 */
.index .section4 {padding: max(50px, 8rem) 0 max(50px, 11rem) 0; background: #fbfbfb;}
.index .section4 .titleBox {text-align: center; line-height: 1.4; margin-bottom: 50px;}
.index .section4 .widget_box {width: 100%;}


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



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

footer > .contents_box {}
footer > .contents_box > .containerV1 { padding: 30px 0 25px 0;}
footer .contents { display:flex; flex-wrap:wrap; align-items:flex-start;}
footer .contents > li { font-weight: 300;  }
footer .contents > li.item1 { width: 25%;}
footer .contents > li.item2 { width: 50%; }
footer .contents > li.item3 { width: 25%;}
footer .item2 > div { line-height: 1.6; font-size: 14px; 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;}

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

/* item3 */
footer .contents > li.item3 p.text1 {color: #fff; font-size: 15px; line-height: 1.4; margin-bottom: 5px;}
footer .contents > li.item3 > span {font-size: max(20px, 3.5rem); color: #fff; font-weight: bold;}
footer .contents > li.item3 > span > a {color: #fff;}

@media (max-width:1230px) {
	footer > .contents_box > .containerV1 { padding: 30px 15px 25px;}
	footer .contents > li.item1 {width: 30%;}
	footer .contents > li.item2 {width: 45%;}
}

@media (max-width:991px) {
	footer > .contents_box > .containerV1 { padding: 15px 15px 20px;}
	footer .item1 {display: none;}
	footer .info_box {display: none;}
	footer .contents {justify-content: space-between; align-items: center;}
	footer .contents > li.item2 {max-width: 390px; width: 100%;}
	footer .contents > li.item3  {max-width: fit-content; width: 100%;}
	footer .item2 > .text > span { display:block; margin-right:0; }
	footer .item2 > .text > span:after { display:none; }
}

@media (max-width:626px) {
	footer .contents > li.item3 {order: 1; margin-bottom: 20px;}
	footer .contents > li.item2 {order: 2;}
}

@media (max-width:450px) {
footer .info_box .info > .item:nth-child(1) { order:1; }
footer .info_box .info > .item:nth-child(2) { order:4; }
footer .info_box .info > .item:nth-child(3) { order:3; }
footer .info_box .info > .item:nth-child(4) { order:2; }
footer .info_box .info > .item:before { right: 0; }
footer .info_box .info > .item:nth-child(2n):before { display:none; }
footer .info_box .info > .item > a { margin-right: 0; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/







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


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