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

/* reset */

* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px;  scroll-behavior: smooth;}

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;
}
/*body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }*/
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 : 1170px;

--logo-width: max(200px, 16.46vw);

--header-height: 10rem;



/*
mainColor
#
--main-color : #64a25e; /* mainColor */

--page-main-color : #6ea669;
--page-main-color2 : #6fa669;

*/

--font-size22 : max(16px,2.2rem); /* 22px */
--font-size20 : max(15px,2rem); /* 20px */
--font-size18 : max(14px,1.8rem); /* 18px */
--font-size16 : max(13px,1.6rem); /* 16px */
--font-size15 : max(12px,1.5rem); /* 15px */
--font-size14 : max(11.5px,1.4rem); /* 14px */
}



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

.subMob { height: 7.294rem; background: transparent;  }

.tmt_sub_frame {min-height: 90vh; position: relative; padding-top: 40px;}



/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
.header_wrap {width: 100%; position: absolute; left: 0; top: 0; height: 97px;  transition: height 0.5s , background 0.2s; z-index: 999;}
.header_wrap .containerV1 {height: 97px; max-width: 1400px;}

#header {display: flex; align-items: center; height: 100%; gap: 0 5.21vw; justify-content: space-between;; }

/*logo*/
.logo {width: 200px; overflow: hidden; height: 50px; position: relative;}
.logo a {position: absolute; top: 8%; left: 0; transition: top 0.5s; width: 100%;}
.logo a img{width: 100%;}


#header .menu_box {display: flex; align-items: center; height: 100%;}
#header .menu_box nav {height: 100%;}
 #header .menu_box .menu_box_bg {opacity: 0; visibility: hidden; transition-delay: 0.2s;}

/*main_menu*/
.main_menu {display: flex; height: 100%;}
.main_menu > li  {height: 100%; position: relative;}
.main_menu > li > a {color: #fff; font-size: min(1.54vw, 24px); font-weight: bold; padding: 0 90px 0 0; position: relative; line-height: 97px;}
.main_menu > li > a::before {content: ""; position: absolute; height: 3px; width: 0; background: linear-gradient(to right, #B06AB3, #4568DC); box-shadow: 1px 1px 2px rgb(0 0 0 / 40%); transition: 0.5s; top: 130%;}
.main_menu > li > a > i {display: none;}

/*sub_menu*/
.sub_menu {width: 100%; display: flex; opacity: 0; visibility: hidden; position: absolute; top: 70%; flex-direction: column; gap: 5px 0; padding-top: 0; transition: all 0.3s; }
.sub_menu li a {color: #666; font-size: min(1.12vw, 18px); font-weight: 400; transition: all 0.5s ease;}

/*hover*/

.header_full {height: 340px; background: #fff;}
.header_full .logo a {top: -120%;}
.header_full .main_menu > li a {color: #000;}
.header_full .main_menu > li:hover > a::before {width: 55%;}
.header_full .rightText a {background: #000; }
.header_full .sub_menu {opacity: 1; visibility: visible; padding-top: 2.71vw; gap: 20px 0;}
.header_full .sub_menu li a:hover {padding-left: 5px; color: #3e3e3e;}

/*모바일 상단 타이틀*/
.title_wrap{display: none;}

/*모바일 하단 copyright*/
.menu_copy_text {display: none;}

@media (max-width:1430px) {
	.header_wrap .containerV1 {max-width: 100%;  padding: 0 15px;}
	.logo {width: 170px;}
	.header_full .logo a {top: -100%;}
}

@media (max-width:1200px) {
.main_menu > li > a {padding: 0 7vw 0 0;}
}




/*모바일*/
@media (max-width:991px) {
/*	body 모바일 스크롤 지우는 구문*/
	body.active { overflow-y:hidden !important; }

	.header_wrap {border-bottom: 1px solid rgba(255, 255, 255, 0.2); height: 80px;}
	.header_wrap .containerV1 {height: 80px;}
	#header {overflow: hidden;}
	#header .menu_box {flex-direction: column; width: 320px; z-index: 9999;
	position: fixed; top: 0; right: -320px; min-height: 100vh; transition: right 0.5s; background: url(img/m_menu_bg.jpg); overflow-x: hidden; overflow-y: auto; }

/*header_full*/
	.header_full {height: 97px; background: transparent;}
	.header_full .logo a {top: 5%;}
	.header_full .main_menu > li a {color: #fff; font-size: 16px;}
	.header_full .main_menu > li > a::before {display: none;}
	.header_full .rightText a{background: transparent; }
	.header_full .main_menu > li > .sub_menu { top: 0; position: relative;  opacity: 0; visibility: hidden; width: 100%; padding:0 0 0 30px; gap: 20px 0; height: 0; }
	.header_full .sub_menu li a:hover {padding-left: 0; color: #fff;}
	.header_full .sub_menu li a {color: #fff; font-size: 14px;} 

/*	상단 타이틀*/
	.title_wrap {background-color: #635dd1; width: 100%; padding-top: 30px; padding-bottom: 30px;  padding-left: 30px; padding-right: 30px; display: flex; justify-content: space-between;}
	.title_wrap h3 {color: #fff; font-size: 20px; font-weight: bold;}
	.title_wrap .close_btn {position: relative; z-index: 9999999; color: #fff; font-size: 18px; cursor: pointer;}
	.title_wrap .close_btn i {transition: transform 0.2s;}

/*	nav main_menu*/
    #header .menu_box nav.m_menu {width: 100%; height: auto; padding: 40px 30px 0 30px;}
	#header .menu_box .main_menu {flex-direction: column; width: 100%;}
	.main_menu > li {height: auto; cursor: pointer; overflow: hidden; font-size: 16px;}
	.main_menu > li > a {font-size: 16px; padding: 0 0 0 15px; display: block;  border-bottom: 1px solid; border-color: rgba(255, 255, 255, 0.1); pointer-events: none; position: relative; 
	line-height: 64px; font-weight: 400; font-family: "Roboto";}
	.main_menu > li > a > i {display: block; position: absolute; top: 50%; right: 10%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s;}
	
    

/*	sub_menu*/
.main_menu > li .sub_menu { 
top: 0; position: relative;  opacity: 0; visibility: hidden; width: 100%; padding:0 0 0 30px; gap: 20px 0; height: 0;}
.sub_menu li a {color: #fff; font-size: 14px;} 

/*.main_menu > li.on {overflow: hidden;}*/
.main_menu > li.on > .sub_menu {opacity: 1; visibility: visible; height: var(--mob-height); padding: 20px 0 10px 30px;}


/*모바일 메뉴 inactive*/
.open_btn {width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); right: 3%;cursor: pointer;}
.open_item {width: 30px; height: 4px; position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 40px;}
.open_item::before, .open_item::after{content: ''; position: absolute; width: 30px; height: 4px; background: #fff; transition: 0.3s; border-radius: 40px;}
.open_item::before {top: -280%;}
.open_item::after{bottom: -280%;}
.open_btn .trans_btn::before {transform: rotate(-20deg);}
.open_btn .trans_btn::after {transform: rotate(20deg);}

/*메뉴 하단 copyright*/
.menu_copy_text {display: block; font-size: 13px; text-align: center; padding-top: 23px; font-family: "Open Sans"; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px;}


/*hover*/
#header .inactive {right: 0; transition-delay: 0.2s;}
/*#header .inactive .menu_box_bg {opacity: 1; visibility: visible; position: absolute; width: 100%; left: -100%; height: 100%; background: rgba(0, 0, 0, 0.5);}*/
.close_btn:hover > i {transform: rotate(360deg);}
.main_menu > li:hover > a > i {transform: rotate(-270deg);}

.header_wrap .main_menu > li > a.on > i {transform: rotate(-270deg);}
.header_wrap .main_menu > li > a.on {font-weight: 900;}


    
}

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



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
/*body {background: #999;}*/
 .wrap {color: #353434;}

/*공통*/
 .wrap .con_h1{font-size: min(9.14vw, 42px); line-height: 2.1; font-weight: 700; color: #353434; font-family: 'Open Sans'; position: relative;}
 .wrap .text1 {font-size: min(4vw, 16px); line-height: 1.7;}
 .wrap .title1 {font-size: min(4.29vw, 18px);  line-height: min(8vw, 28px);}
 a.con_button {font-size: 13px; font-weight: 800; font-family: "Malgun Gothic"; display: flex; justify-content: center; align-items:center; width: 228px; 
 box-sizing: border-box; border: 1px solid #111; height: 48px; letter-spacing: .25em; position: relative; }
 a.con_button > span {color: #111; transition: all 0.4s; position: relative; z-index: 996;}
  a.con_button::before {content: ""; position: absolute; width: 0%; height: 100%; background: #111; top:0; left: 0; transition: all 0.4s; z-index: 995;}
  a.con_button:hover:before {width: 100%;} 
  a.con_button:hover > span { color: #fff;}


  @media all and (max-width: 1150px) {
  	.wrap br {display: none;}
  }

  @media all and (max-width: 992px) {
  	 a.con_button::before {width: 100%;} 
	a.con_button > span{color: #fff;}
  }

/* section1*/
 .section1 {background: url(img/index_sec01_img.jpg) no-repeat; background-position: 100% 0; padding: 64px 0 60px 0;}
 .section1 .containerV1{display: flex; flex-direction: column;  justify-content: center; gap: 3.4rem 0;}
 .section1 .containerV1 .con_h1::before {content: ""; position: absolute; width: 30px; height: 1px; background: #000; bottom: 0;}


 @media all and (max-width: 650px) {
  	.section1 .containerV1 {color: #fff; text-align: center; align-items: center;}
	.section1 .containerV1 .con_h1 {color: #fff;}
	.section1 .containerV1 .con_h1::before {left: 50%; transform: translateX(-50%); background: #fff;}
  }



/* section2*/
	.section2 {padding-top: 7.7%;}
	.section2 .containerV1{}
	.section2 .containerV1 .con_title_box {display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding-bottom: 30px;}
	.section2 .containerV1 .con_title_box::before {content: ""; position: absolute; width: 80px; height: 1px; bottom: 0; background: #000;}
	.section2 .containerV1 .con_title_box .con_h1 {font-size: min(10vw, 52px); font-family: "Ubuntu";}
	.section2 .containerV1 .con_title_box  .title1 {font-family: 'NanumSquare'; color: #474747;}

/*슬라이드박스	*/
	.section2 .containerV1 .con_slideBox {margin-top: 100px; position: relative; height: 411px; margin-bottom: 140px;}
	.section2 .containerV1 .con_slideBox  .slide_list {width: 100%; height: 100%;}
	.section2 .containerV1 .con_slideBox .slide_item {position: absolute; width: 100%; height: 100%; transition: all 1s; opacity: 0; visibility: hidden;}
	.section2 .containerV1 .con_slideBox .slide_item01 {z-index: 998;}
	.section2 .containerV1 .con_slideBox .slide_item02 {z-index: 997;}
	.section2 .containerV1 .con_slideBox .slide_item a {display: flex; gap: 0 40px; width: 100%; height: 100%;}
	.section2 .containerV1 .con_slideBox .slide_item a .slide_item_img {overflow: hidden; clip-path: polygon(100% 0%, 100% 8%, 94% 8%, 94% 86%, 100% 86%, 100% 100%, 0 100%, 0% 0);}
	.section2 .containerV1 .con_slideBox .slide_item a .slide_textBox {padding-top: 100px; flex-basis: 0; flex-grow: 1;}
	.section2 .containerV1 .con_slideBox .slide_h2 {font-size: 32px; font-weight: 900; color: #000; font-family: 'NanumSquare'; position: relative;}
	.section2 .containerV1 .con_slideBox .slide_h2::before {content: ""; position: absolute; width: 90px; height: 1px; background: #000; bottom: -40%;}
	.section2 .containerV1 .con_slideBox .slide_text1 {font-size: 16px; line-height: 26px; font-weight: 400; color: #5a5a5a; margin-top: 35px;}
	.section2 .containerV1 .con_slideBox .slide_button {display: flex; position: absolute; top: 65%; right: 32.4%; z-index: 999;}

	

/*슬라이드 버튼*/
	.section2 .containerV1 .con_slideBox .slide_button > div{width: 52px; height: 52px; border: 1px solid #000; color: #000; 
	cursor: pointer; font-size: 30px; font-weight: 800; text-align: center; transition: all 0.5s; transition: all 0.4s;}
	.section2 .containerV1 .con_slideBox .slide_button > div:hover {background: #000; color: #fff;}
	.section2 .containerV1 .con_slideBox .slide_button > .prev {border-right: none;}
	.section2 .containerV1 .con_slideBox .slide_button > div i {position: relative; top: 45%; transform: translateY(-50%);}

/*슬라이드 클래스 부여	*/
	.section2 .containerV1 .con_slideBox .slide_item.on {opacity: 1; visibility: visible;}

  @media all and (max-width: 1200px) {
  	.section2 br {display: none;}
	.section2 .containerV1 .con_slideBox .slide_button {top: 80%; right: 0;}
  }

  @media all and (max-width: 991px) {
  	.section2 br {display: none;}
	.section2 .containerV1 .con_slideBox {min-height: 48vmin; height: auto;}
	.section2 .containerV1 .con_slideBox .slide_item01 a .slide_item_img {clip-path: none; background: url(img/slide_item01.jpg) no-repeat; background-size: cover; width:100%;}
	.section2 .containerV1 .con_slideBox .slide_item02 a .slide_item_img {clip-path: none; background: url(img/slide_item02.jpg) no-repeat; background-size: cover; width:100%;}
	.section2 .containerV1 .con_slideBox .slide_item03 a .slide_item_img {clip-path: none; background: url(img/slide_item03.jpg) no-repeat; background-size: cover; width:100%;}
	.section2 .containerV1 .con_slideBox .slide_item a {position: relative;}
	.section2 .containerV1 .con_slideBox .slide_item a .slide_item_img {width: 100%; height: 100%;}
	.section2 .containerV1 .con_slideBox .slide_item a .slide_item_img img {display: none;}
	.section2 .containerV1 .con_slideBox .slide_item a .slide_textBox {width: 100%; position: absolute; bottom: 0; left: 0; padding-top: 0; color: #fff; background: rgba(0,0,0,0.4); padding: 15px;}
	.section2 .containerV1 .con_slideBox .slide_h2::before {display: none;}
	.section2 .containerV1 .con_slideBox .slide_item a .slide_textBox h2 {color: inherit; font-size: min(3.71vw, 16px); line-height: 20px; margin-bottom: 10px;}
	.section2 .containerV1 .con_slideBox .slide_text1 {color: #fff; margin-top: 0;  font-size: min(3.43vw, 14px); line-height: 20px;}
	
/*	button*/
	.section2 .containerV1 .con_slideBox .slide_button {position: absolute; top: 107%; left: 50%; transform: translateX(-50%); right: unset; padding: 0 10px;}
/*	.section2 .containerV1 .con_slideBox .slide_button > div {width: 20px; height: 20px; background: rgba(0,0,0,0.3); border-radius: 50%; border-style: none;}*/
/*	.section2 .containerV1 .con_slideBox .slide_button > div i {display: block;}*/

/*	.section2 .containerV1 .con_slideBox .slide_button > div.circle {background: rgba(0,0,0,0.8); border-radius: }*/
	}



/* section3*/
	.section3 {position: relative; background: url(img/index_sec03_img.jpg) no-repeat; background-attachment: fixed; background-size: cover; background-position: top center; padding: 4.8% 0 50px 0;
	margin-bottom: 70px;}

	.section3::after {content: ""; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; z-index: 997;}
	.section3 .containerV1 {display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; position: relative; z-index: 999; max-width: 100%; padding: 0 15px;}
	.section3 .containerV1 .con_title_box  {color: #fff; position: relative; margin-bottom: 70px; text-align: center;}
	.section3 .containerV1 .con_title_box .con_h1 {color: #fff; position: relative;  font-size: min(9.14vw, 50px); font-family: "Ubuntu";}
	.section3 .containerV1 .con_title_box .con_h1::before {content: ""; position: absolute; width: 12%; height: 1px; background: #fff; left: 50%; transform: translateX(-50%); bottom: 5%;}
	.section3 .containerV1 .con_title_box  .title1 {margin-top: 30px; font-family: "Nanum Baroun Gothic";}
	.section3 .con_widgetBox {width: 100%; height: 100%;}

	@media all and (max-width: 992px) {
	.section3{background-attachment: unset;}
  }

/* section4*/
	.section4 {position: relative; padding: 5.608% 0;}
	.section4_bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; 
	background: url(img/index_sec04_img.jpg) no-repeat; background-attachment: fixed; background-size: cover; background-position: top center !important;}
/*	background_bg*/
	.section4_bg::after {content: ""; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%;}
/*	background_bg*/
	.section4 .containerV1 {display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff;}
	.section4 .containerV1 .con_title_box .con_h1 {color: #fff; position: relative;  font-size: min(9.14vw, 50px);}
	.section4 .containerV1 .con_title_box .con_h1::before {content: ""; position: absolute; width: 85%; height: 3px; background: #fff; left: 50%; transform: translateX(-50%); bottom: 5%;}
	.section4 .containerV1 .con_text_box {position: relative; margin: 25px 0 50px 0;}
	.section4 .containerV1 .con_text_box .con_h3 {font-size: min(6.57vw, 27px); font-weight: 400; line-height: 34px; text-align: center;}
	.section4 .containerV1 a.con_button {border-color: #fff; transition: border 0.3s; height: 57px;}
	.section4 .containerV1 a.con_button span {color: #fff; font-size: 14px;}
	.section4 .containerV1 a.con_button:hover {border: 1px solid rgba(0,0,0,0.2);}

	@media all and (max-width: 1150px) {
  	.section4 br {display: block;}
  }

  @media all and (max-width: 992px) {
  	 .section4 .containerV1 a.con_button {border: 1px solid rgba(0,0,0,0.2);}
	 .section4_bg {padding-top: 12vmin; padding-bottom: 10vmin; background-attachment: unset; background-size: inherit; background-position: 54% center !important;}
  }

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
footer {background: #13161b; padding: 20px 0 50px 0;}
/*footer .containverV1 {margin-top: 20px;}*/
.contents {margin-top: 20px;}
.contents  span {font-size: max(13px, 1.6rem); color: #fff; font-family: "Nanum Barun Gothic";}
.contents  span a {color: #fff !important;}
.contents .text {display: flex; flex-direction: column;}
.contents .text li {line-height: 23px; display: flex; gap: 0 10px; flex-wrap: wrap;}
.copy {font-size: max(13px, 1.6rem); color: #fff; font-family: "Nanum Barun Gothic"; padding-bottom: 20px; line-height: 23px;}
.copy a {color: #fff;}


/*info*/
.contents .info {display: flex; gap: 10px 10px; margin-bottom: 3px; flex-wrap: wrap;}
.contents .info li {position: relative;}
.contents .info li::after {content: "|"; position: absolute; right: -7px; color: #fff;}
.contents .info li:last-child::after {display: none;} 
.contents .info li a {color: #fff; font-size: max(13px, 1.6rem); font-family: "Nanum Barun Gothic";}
.contents .info li a:hover {text-decoration: underline;}


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










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