@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;
}
/* 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;
}
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:480px) {
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: 1600px;


/*mainColor*/

--main-color : #00848d; /*청록색*/


/*font*/

/*최소 400*/
--font-size16 : min(4vw,16px); 
--font-size18 : min(4.50vw,18px);
--font-size20 : min(5vw,20px);
/*20 이상은 min 없이 처리*/

--font-size25 : 4vw; 
--font-size30 : min(6.67vw, 30px); 
/*--font-size35 : min(8.75vw, 35px); */
--font-size40 : 5.78vw; 
--font-size45 : 6.67vw; 


/*예외*/
--font-size50-mob : max(20px, 7vw);
/*예외*/

--font-size50 : 7.11vw;
--font-size55 : 8vw;
--font-size60 : 8.89vw;
/*--font-size60 : min(10vw, 60px);*/
--font-size80 : 11.56vw;
--font-size90 : 12.89vw;
/*--font-size100 : min(14.29vw, 100px);*/
--font-size120 : 17.78vw;
--font-size150 : 24.89vw;
--font-size200 : 28.89vw;



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

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



/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
/*
해드에서 기준값 : #header의 폰트 사이즈 or 단위가 맞지 않을 경우 해당요소 부모 폰트사이즈 * em으로 기입된 단위

em 계산법
px -> em : 지정할 값 / 기준 값
ex) 지정할 값 20px, 기준값 18px -> 1.1111em

em -> px : 기준 값 * em값
ex)기준값 18px, em값 1.1111em -> 19.9998인데 소수점 올려서 20px
*/


/* 220607 em 기준점 찾을때 검색 : 폰트 em 기준점 */ 

#header {width: 100%; position: sticky; left: 0; top: 0; background: var(--main-color);  z-index: 1000; font-size: 0.52vw;}
#header .containerV1 {height: 100%;}
#header .head_wrap {display: flex; justify-content: space-between; align-items: center;}
#header .head_wrap #logo {display: flex; align-items: flex-end; height: 8.5rem;}
#header .head_wrap #logo a {display: block;}
#header .head_wrap #logo a img {width: 25.1rem;}
#header .head_wrap .menu_Box {}
#header .main_menu {display: flex; height: 100%;}
#header .main_menu li {font-size: 100%; padding-top: 20px;}
#header .main_menu li > a {color: #fff; display: block; padding: 0 1.2em; font-weight: 500; font-size: max(16px, 0.94vw); transition: all 0.3s; }

/*모바일 열기 닫기 버튼*/
#header .head_wrap .open_btn {display: none;}
#header .head_wrap .close_btn {display: none;}

@media all and (max-width: 1500px) {
	#header .main_menu li > a {padding: 0 0.5em;}
	#header .head_wrap #logo a img  {width: 22.1rem;}

}



/*hover*/
#header .main_menu li > a:hover {color: #fbc700;}

/*메뉴 이동시 스크롤 on*/
#header .main_menu li > a.on {color: #fbc700;}




/* .item-list .post-image {pointer-events: all;} */

/*모바일*/
@media all and (max-width: 1200px) {
	#header .head_wrap #logo {width: max(225px, 30rem); height: 8.5rem;} 
	#header .head_wrap .menu_Box {position: fixed; width: 280px; height: 100%; top: 0; right: -280px; z-index: 1100; transition: all 0.3s; background: var(--main-color);}
	#header .main_menu {flex-direction: column; width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute; top: 100px; left: 0; padding: 0 5px;} 
	#header .main_menu li  {border-bottom: 1px solid rgba(255,255,255,0.7); padding-top: 0;}
	#header .main_menu li > a {height: 50px; line-height: 50px;}


	/*모바일 열기 닫기 버튼*/
	#header .head_wrap .open_btn {display: block; width: 30px; height: 30px; position: relative;}
	#header .head_wrap .open_btn i {font-size: 30px; color: #fff;}
	#header .head_wrap .close_btn {display: block;}
	#header .head_wrap .close_btn {width: 100%; height: 50px; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 0 10px;}
	#header .head_wrap .close_btn i {font-size: 30px; float: left; color: #fff;}


/*	모바일메뉴 클릭시*/
	#header .head_wrap .menu_Box.inactive {right: 0;}
}
/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
.index_sec {width: 100%; line-height: 1.2; color: #333; font-size: 10px;}/*폰트 em 기준점*/
.index_sec .title-V1 {font-size: max(35px, 8em); line-height: 1.2; font-weight: 900;}
.index_sec .title-V2 {font-size: max(40px, 10em); line-height: 1.2; font-weight: bold;}
.index_sec .title-V3 {font-size: max(45px, 12em); line-height: 1.2; font-weight: bold;}
.index_sec .title-V4 {font-size: max(45px, 15em); line-height: 1.2; font-weight: bold;}



.index_sec .titleBox-V1 {margin-top: 14.1em; margin-left: 14.3em; display: flex; justify-content: center; text-align: center;}
.index_sec .titleBox-V1 > span {position: relative;} 
.index_sec .titleBox-V1 > span::before {content:""; position: absolute; left: -14.3em; width: 13em; height: 11.8em; top: 2em;
background: url(img/title_home.png) no-repeat; background-size: cover; }

.index_sec .titleBox-V2 {display: flex; justify-content: center; flex-direction: column; align-items: center; text-align: center;}
.index_sec .titleBox-V2 > span {position: relative; width: 13em; height: 11.8em;}
.index_sec .titleBox-V2 > span::before {content:""; position: absolute; left: 50%; width: 100%; height: 100%; bottom: 0; transform: translateX(-50%);
background: url(img/title_home.png) no-repeat; background-size: cover; }


@media (max-width: 1630px) {
	.index_sec {font-size: 0.61vw;}
}

@media (max-width: 991px) {
	.index_sec {font-size: 0.8vw;}/*폰트 em 기준점*/
	.index_sec .titleBox-V1 {margin-left: 0; position: relative; margin-top: 20em; text-align: center;}
	.index_sec .titleBox-V1 > span {position: absolute; left: 50%; top: -55%; transform: translate(-50%, -50%); }
	.index_sec .titleBox-V1 > span::before { left: 50%; top: 2em; transform: translate(-50%, -50%); }
}

@media (max-width: 768px) {
	.index_sec {font-size: 1vw;}/*폰트 em 기준점*/
	.index_sec .titleBox-V1 {text-align: center; }
	.index_sec .titleBox-V1 > span {top: -30%;}
}






/*section1*/
.index_sec01 {background: url(img/sec01_bg.jpg) no-repeat; background-size: cover; background-position: top; padding: max(50px, 14.5em) 0 max(50px, 5.3rem); }
.index_sec01 .widget_title {display: flex; padding-bottom: max(20px, 3.8em); justify-content: center;}
.index_sec01 .widget_title .title_item {padding-left: 15.5em;	}
.index_sec01 .widget_title .title_item > span {position: relative;}
.index_sec01 .widget_title .title_item > span::before {content:""; position: absolute; top: 0; left: -15.5em; width: 13.8em; height: 13.8em;
background: url(img/bamin_icon.png) no-repeat; background-size: cover;}
.index_sec01 .title_item .textBox > h2.title-V1 {color: #333;}
.index_sec01 .title_item .textBox > p.text1 {font-size: max(12px, 2em); line-height: 1.3; color: #333; letter-spacing: 2.8px;}
.index_sec01 .title_item .textBox .color-tag {color: var(--main-color);}
.index_sec01 .widget_title > h1.title-V3 {color: var(--main-color); position: relative; right: 0.16em; bottom: 0.22em;}
.index_sec01 .widget_title > h1.title-V3::before {content:""; position: absolute; width: 3.57em; height: 0.32em; 
background: url(img/title_star.png) no-repeat; background-size: cover; top: -0.15em; left: 0.03em;}
.index_sec01 .titleBox-V1 .title-V3 {color: #fff;}
.index_sec01 .titleBox-V1 .title-V3 span {position: relative; z-index: 2;}
.index_sec01 .titleBox-V1 .title-V3 span::before {content:""; position: absolute; width: 2.58333em; height: 1.6333em; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;
background: url(img/title_circle.png) no-repeat; background-size: cover;}
.index_sec01 .itemBox {display: grid; width: 100%; margin-top: 7em; gap: 2.5em 0; grid-template-columns: 78.8em 81.4em;}

.index_sec01 .itemBox li {font-size: 3.8em; font-weight: 300; line-height: 1.3; color: #fff; margin-left: 1.85em;}
.index_sec01 .itemBox li span {position: relative;}
.index_sec01 .itemBox li span::before {content:""; position: absolute; width: 1.6em; height: 1.6em; 
background: url(img/sec01_item_icon01.png) no-repeat; background-size: cover; top: 50%; left: -1.85em; transform: translateY(-50%);}
.index_sec01 .itemBox li p.text1 {font-size: max(12px, 0.5em); line-height: 1.4; color: #c7fbff; margin-top: 0.375em;}

.index_sec01 .itemBox li:nth-child(2) span::before {background: url(img/sec01_item_icon02.png) no-repeat; background-size: cover;}
.index_sec01 .itemBox li:nth-child(3) span::before {background: url(img/sec01_item_icon03.png) no-repeat; background-size: cover;}
.index_sec01 .itemBox li:nth-child(3) {grid-column: 1/3; justify-self: center;}


@media (max-width: 1630px) {
	.index_sec01 .itemBox {grid-template-columns: repeat(1, 1fr); width: fit-content; margin: 7em auto 0;}
	.index_sec01 .itemBox li:nth-child(3) {grid-column: unset; justify-self: unset;}
}



@media (max-width: 991px) {
/*	.index_sec01 {font-size: 0.8vw;}/*폰트 em 기준점*/
	.index_sec01 .widget_title {flex-direction: column; align-items: center; gap: 9em 0;}
	.index_sec01 .title_item .textBox {text-align: center;} 
	.index_sec01 .title_item .textBox > p.text1 {letter-spacing: 0; text-align: center;  margin-top: 0.5em; }
	.index_sec01 .widget_title > h1.title-V3 {right: unset; }
	.index_sec01 .widget_title > h1.title-V3::before {left: 49%; transform: translateX(-50%); top: -0.25em; width: 3.67em;}
}

@media (max-width: 768px) {
/*	.index_sec01 {font-size: 1vw;}/*폰트 em 기준점*/
	.index_sec01 .widget_title {margin-top: 11em;}
	.index_sec01 .widget_title .title_item {padding-left: 0; position: relative;}
	.index_sec01 .widget_title .title_item > span {position: absolute; left: 50%; top: -56%; transform: translate(-50%, -50%);}
	.index_sec01 .widget_title .title_item > span::before {left: 50%; top: 50%; transform: translate(-50%, -50%);}

	.index_sec01 .titleBox-V1 .title-V3 {position: relative; z-index: 2;}
	.index_sec01 .titleBox-V1 .title-V3 span {position: static;}
	.index_sec01 .titleBox-V1 .title-V3 span::before {top: 79%;}
	
	.index_sec01 .itemBox {font-size: 1.3vw;}/*폰트 em 기준점*/
	.index_sec01 .itemBox li p.text1 br {display: none;}
}

@media (max-width: 500px) {
	.index_sec01 .itemBox {font-size: 1.6vw;}/*폰트 em 기준점*/
}




/*section2*/
.index_sec02 { padding: max(50px, 17.4em) 0 max(50px, 5.8em) 0; background: url(img/sec02_bg.jpg) no-repeat; background-size: cover;}
.index_sec02 .itemBox {display: flex; gap: max(10px, 3em); }
.index_sec02 .itemBox .index_sec_img {display: flex; justify-content: center; align-items: end;}
.index_sec02 .itemBox .index_sec_img img {width: max(178.45px, 60em); height: max(263.23px, 88.5em);}
.index_sec02 .itemBox .textBox {position: relative; flex-basis: 0; flex-grow: 1; margin-top: 2em;}
.index_sec02 .itemBox .textBox::before {content:"";  position: absolute; background: url(img/sec01_arrow.png) no-repeat; background-size: cover; background-position: center;
width: 11.9em; height: 6em; top: -1%; left: -3%; transform: translate(-50%, -50%);}
.index_sec02 .itemBox .textBox .title-V2 {color: var(--main-color); letter-spacing: -5px;}
.index_sec02 .itemBox .textBox > h3 {font-size: max(25px, 3.8em); color: #00545d; font-weight: bold; margin-top: 0.25em; letter-spacing: -2px;
padding-left: 3px; line-height: 1.2;} /*반응형에서 padding-left 빠짐*/

.index_sec02 .textBox .text_item {color: #00545d;  line-height: 2; margin-top: 3em; letter-spacing: -1px;}
.index_sec02 .textBox .text_item p.text1 {font-size: max(16px, 2em); }

@media (max-width: 1630px) {
	.index_sec02 .itemBox .index_img {display: flex; align-items: center; justify-content: center;}
	.index_sec02 .itemBox .index_img img {}
	.index_sec02 .textBox .text_item p.text1 br:nth-child(n+3) {display: none;}
}

@media (max-width: 1080px) {
	.index_sec02 .itemBox {flex-direction: column;}
	.index_sec02 .itemBox .index_sec_img {align-items: center;}
	.index_sec02 .itemBox .textBox {text-align: center;}
	.index_sec02 .itemBox .textBox::before {left: 33%;transform: translate(-50%, -50%) rotateY(180deg); width: 22.9em; height: 11em; top: -7em; }
	.index_sec02 .itemBox .textBox > h3 {margin-top: 1.25em;}

/*	font*/
	.index_sec02 {font-size: 0.93vw;}/*개별 폰트 em 기준점*/
	.index_sec02 .textBox .text_item p.text1 br:nth-child(n+3) {display: block;}
}

@media (max-width: 768px) {
/*	.index_sec02 {font-size: 1vw;}/*폰트 em 기준점*/
}

@media (max-width: 500px) {
/*	.index_sec02 {font-size: 1.6vw;}*/
	.index_sec02 .textBox .text_item p.text1 br:nth-child(n+3) {display: none;}
}





/*section3*/
.index_sec03 {padding: max(50px, 13em) 0; background: url(img/sec03_bg.jpg) no-repeat; background-size: cover;}
.index_sec03 .itemBox01 .titleBox-V1 h1.title-V3 {color: #fff;}


.index_sec03 .itemBox01 {margin-bottom: max(100px, 13.7em);}
.index_sec03 .itemBox01 .gridBox {display: grid; grid-template-columns: 26.2em 22.9em 26.2em 22.9em  26.2em 9em; grid-template-rows: repeat(2, 26.2em);
gap: 8em 0; margin-top: 50px; justify-content: center;}

/* grid-item */
.index_sec03 .itemBox01 .gridBox li.item {background: #fff; box-shadow: 7px 9px 10px rgb(14 5 10 / 80%); border-radius: 50px; display: flex; flex-direction: column; align-items: center; 
width: 26.2em; height: 26.2em; padding: 2em 5px 0 5px;}
.index_sec03 .itemBox01 .gridBox li.item > span {color: #00848d; font-weight: bold; font-size: max(16px, 2.5em); line-height: 1.3; position: relative;}
.index_sec03 .itemBox01 .gridBox li.item > span::before {content:""; position: absolute; bottom: -20%; left: 50%; transform: translate(-50%, -50%); width: 57%; height: 2px; background: #00848d;}
.index_sec03 .itemBox01 .gridBox li.item > img {display: block; margin: 2.8em 0 1.5em;}
.index_sec03 .itemBox01 .gridBox li.item > p.text2 {font-size: max(12px, 2.2em); color: #333; font-weight: bold; line-height: 1.2; text-align: center;
display: flex; height: 2.6em; justify-content: center; align-items: center; }
.index_sec03 .itemBox01 .gridBox li.item06 p.text2 > span.color-tag {color: #00848d;}


.index_sec03 .itemBox01 .gridBox li.item01 img {width: 9.7em; height: 9.5em;}
.index_sec03 .itemBox01 .gridBox li.item02 img {width: 7.1em; height: 9.1em;}
.index_sec03 .itemBox01 .gridBox li.item03 img {width: 6.7em; height: 8.8em;}
.index_sec03 .itemBox01 .gridBox li.item04 img {width: 7.1em; height: 8.4em;}
.index_sec03 .itemBox01 .gridBox li.item05 img {width: 8.3em; height: 7.6em;}
.index_sec03 .itemBox01 .gridBox li.item06 img {width: 9.2em; height: 8.5em;}


/* grid-arrow */
.index_sec03 .itemBox01 .gridBox li.arrow {width: 22.9em; height: 26.2em; position: relative;}
.index_sec03 .itemBox01 .gridBox li.arrow::before {content: ''; position: absolute; width: 12.5em; height: 1.5em; 
background: url(img/sec03_arrow01.png) no-repeat; background-size: cover; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.index_sec03 .itemBox01 .gridBox li.arrow03 {width: 9em;}
.index_sec03 .itemBox01 .gridBox li.arrow03::before {background: url(img/sec03_arrow02.png) no-repeat; background-size: cover; width: 6.5em; height: 35.7em;
 top: 120%; left: 60%;}

/*화살표방향 전환*/
.index_sec03 .itemBox01 .gridBox li.arrow04::before,
.index_sec03 .itemBox01 .gridBox li.arrow05::before {transform: translate(-50%, -50%) rotate(180deg);}

.index_sec03 .itemBox01 .gridBox li.arrow03 {grid-row: 1/3;}

.index_sec03 .itemBox01 .gridBox li.item04 {grid-column: 5/6; grid-row: 2;}
.index_sec03 .itemBox01 .gridBox li.arrow04 {grid-column: 2/3; grid-row: 2;}
.index_sec03 .itemBox01 .gridBox li.item05 {grid-column: 3/4; grid-row: 2;}
.index_sec03 .itemBox01 .gridBox li.arrow05 {grid-column: 4/5; grid-row: 2;}
.index_sec03 .itemBox01 .gridBox li.item06 {grid-column: 1/2; grid-row: 2;}





/*table	*/

.index_sec03 .itemBox02 {background: url(img/sec03_note.png) no-repeat; background-size: 100% 100%; width: 100%; max-width: 1653px;
margin: 0 auto; padding: 26.4em 0 9.7em;}
.index_sec03 .itemBox02 .titleBox-V1 {margin-top: 0; margin-bottom: 43px;}
.index_sec03 .itemBox02 .titleBox-V1 > span::before {background: url(img/title_home_color.png) no-repeat; background-size: cover;}
.index_sec03 .itemBox02 .titleBox-V1 h1.title-V3 {color: #00848d;}
.index_sec03 .tableBox {width: 100%; max-width: 93.75%; margin: 0 auto;}
.index_sec03 .tableBox table {width: 100%; font-size: min(0.61vw, 10px);}
.index_sec03 .tableBox table tr > td {padding: 12px 5px; font-size: max(12px, 3em); color: #333; text-align: center; border-bottom: 2px solid #cacaca; border-right: 2px solid #cacaca;}
.index_sec03 .tableBox table tr > .td01 {text-align: left; padding-left: 2.6666em; font-weight: bold; position: relative; }
.index_sec03 .tableBox table tr > .td01 > span.mini-tag {font-size: max(10px, 0.666em);}
.index_sec03 .tableBox table tr > .td01 > span.number-tag {position: relative; position: absolute; top: 12px; left: 1.7em;}
.index_sec03 .tableBox table .tr03 > .td01 > span.number-tag {top: 50%; left: 1.7em; transform: translateY(-50%); } 

.index_sec03 .tableBox table tr > .td01 > span.t1-tag {font-weight: 400;}
.index_sec03 .tableBox table tr > td:last-child {border-right-style: none;}

.index_sec03 .tableBox table .tr_head > td {background: #25acbb; color: #fff; font-size: max(14px, 3.5em); border-bottom-style: none;
font-weight: bold; text-align: center;}
.index_sec03 .tableBox table .tr_head > .td01 {width: 70%; padding-left: 5px;}
.index_sec03 .tableBox table .tr_head > .td02 {width: 30%;}

.index_sec03 .tableBox table .tr10 > td, .index_sec03 .tableBox table .tr_footer > td {border-right-style: none;}
 .index_sec03 .tableBox table .tr_footer > td {border-bottom: 3px solid #25acbb;}



@media (max-width: 1670px) {
	.index_sec03 .itemBox02 {max-width: 100%; padding: 26.4em 15px 9.7em 15px;}

}

@media (max-width: 991px) {
/*	.index_sec03 {font-size: 0.8vw;}/*폰트 em 기준점*/

/*	itemBox01 gridBox*/
	.index_sec03 .itemBox01 .gridBox {grid-template-columns: 8em 26.2em 19.9em 26.2em 8em; grid-template-rows: repeat(3, 26.2em);}
	.index_sec03 .itemBox01 .gridBox li.arrow {width: 19.9em;}

	.index_sec03 .itemBox01 .gridBox li.item01 {grid-column: 2/3; grid-row: 1;}
	.index_sec03 .itemBox01 .gridBox li.arrow01 {grid-column: 3/4; grid-row: 1;}
	.index_sec03 .itemBox01 .gridBox li.item02 {grid-column: 4/5; grid-row: 1;}
	.index_sec03 .itemBox01 .gridBox li.arrow02 {grid-column: 5/6; grid-row: 1/2; width: 8em;}
	.index_sec03 .itemBox01 .gridBox li.arrow02::before {background: url(img/sec03_arrow02.png) no-repeat; background-size: cover; width: 6.5em; height: 35.7em;
	top: 120%; left: 60%;}

	.index_sec03 .itemBox01 .gridBox li.item03 {grid-column: 4/5; grid-row: 2;}
	.index_sec03 .itemBox01 .gridBox li.arrow03 {grid-column: 3/4; grid-row: 2; width: 19.9em;}
	.index_sec03 .itemBox01 .gridBox li.arrow03::before {width: 12.5em; height: 1.5em; 
	background: url(img/sec03_arrow01.png) no-repeat; background-size: cover; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg);}

	.index_sec03 .itemBox01 .gridBox li.item04 {grid-column: 2/3; grid-row: 2;}

	.index_sec03 .itemBox01 .gridBox li.arrow04 {grid-column: 1/2; grid-row: 2/4; width: 8em;}
	.index_sec03 .itemBox01 .gridBox li.arrow04::before {background: url(img/sec03_arrow02.png) no-repeat; background-size: cover; width: 6.5em; height: 35.7em;
	top: 120%; left: 40%; transform: translate(-50%, -50%) scaleX(-1);}

	.index_sec03 .itemBox01 .gridBox li.item05 {grid-column: 2/3; grid-row: 3;}
	.index_sec03 .itemBox01 .gridBox li.arrow05 {grid-column: 3/4; grid-row: 3; }
	.index_sec03 .itemBox01 .gridBox li.arrow05::before {transform: translate(-50%, -50%) rotate(0deg);}
	.index_sec03 .itemBox01 .gridBox li.item06 {grid-column: 4/5; grid-row: 3;}


/*table */
	.index_sec03 .itemBox02 {padding: 31.4em 15px 9.7em 15px;}

}

@media (max-width: 768px) {
/*	.index_sec03 {font-size: 1vw;}/*폰트 em 기준점*/

/*	itemBox01 gridBox*/
	.index_sec03 .itemBox01 .gridBox {grid-template-columns: 8em 32.15em 8em 32.15em 8em; grid-template-rows: repeat(3, 32.15em);}
	.index_sec03 .itemBox01 .gridBox li.item {width: 32.15em; height: 32.15em; padding: 4em 5px 0 5px;}
	.index_sec03 .itemBox01 .gridBox li.arrow {width: 8em; height: 32.15em;}
	.index_sec03 .itemBox01 .gridBox li.arrow::before  {width: 3.5em; }
	.index_sec03 .itemBox01 .gridBox li.arrow02::before,
	.index_sec03 .itemBox01 .gridBox li.arrow04::before {width: 6.5em;}
	
	.index_sec03 .itemBox01 .gridBox li.arrow03 {width: 8em;}

/*table */
	.index_sec03 .itemBox02 {padding: 35.4em 15px 9.7em 15px;}


}

@media (max-width: 500px) {
/*	itemBox01 gridBox*/
	.index_sec03 .itemBox01 .gridBox li.item {padding: 2em 5px 0 5px; border-radius: 30px; }

/*table */
	.index_sec03 .itemBox02 {background: url(img/sec03_note_mob.jpg) no-repeat; background-size: 95% 100%; background-position: center;
	padding: 20.4em 15px 9.7em 15px;}
}





/*section4*/
.index_sec04 {background: url(img/sec04_bg.jpg) no-repeat; background-size: cover; padding: max(50px, 15em) 0;}
.index_sec04 .titleBox-V2 {margin-bottom: 40px;}
.index_sec04 .titleBox-V2 h1.title-V3 {color: #fff;} 






/*section5*/
.index_sec05 {background: url(img/sec05_bg.jpg) no-repeat; background-size: cover; padding: max(50px, 14.5em) 0;}
.index_sec05 .titleBox-V2 {margin-bottom: 65px;}
.index_sec05 .titleBox-V2 > span::before {background: url(img/title_home_color.png) no-repeat; background-size: cover;}
.index_sec05 .titleBox-V2 h1.title-V3 {color: #228890; text-shadow: 6px -5px 0px #fff;} 

.index_sec05 .itemBox {display: grid; grid-template-columns: 55.5em 55.5em 5em; grid-template-rows: repeat(2, 17.3em);  gap: 3.5em 0;}
.index_sec05 .itemBox > .item {width: 55.5em; display: flex; gap: 0 1.5em; align-items: center; }
.index_sec05 .itemBox > .item img {box-shadow: 5px 10px 10px rgba(8,1,2,0.7); border-radius: 30px; width: 16.2em; height: 16.2em; transition: all  0.3s; position: relative; bottom: 0;}
.index_sec05 .itemBox > .item > .item_textBox {display: flex; flex-direction: column; flex-basis: 0; flex-grow: 1; padding: 1.6em 0 0 0; }
.index_sec05 .itemBox > .item > .item_textBox > h4 {font-size: max(25px, 5em); font-weight: bold; color: #00545d; line-height: 1.2; }
.index_sec05 .itemBox > .item > .item_textBox > p.text1 {font-size: max(16px, 2em); color: #5fa3ab; line-height: 1.3; margin: 0.5em 0 1em;}
.index_sec05 .itemBox > .item > .item_textBox > p.text1 br {display: none;}
.index_sec05 .itemBox > .item > .item_textBox > a.item_btn {display: flex; width: 100%; max-width: 10em; height: 2.5em; box-sizing: border-box; border: 1px solid #5fa3ab;
color: #5fa3ab; line-height: 2.5em; text-align: center; font-size: 12px; transition: all 0.3s; justify-content: center; align-items: center; gap: 0 2px;}

.index_sec05 .itemBox > .item:hover img {bottom: 10px;}
.index_sec05 .itemBox > .item > .item_textBox > a.item_btn:hover {background: #5fa3ab; color: #fff; }

.index_sec05 .itemBox > .item > .item_textBox > a.item_btn span.plus_icon {font-weight: bold; font-size: 16px; position: relative; bottom: 1px;}


@media (max-width: 1280px) {
	.index_sec05 .itemBox {grid-template-columns: repeat(3, 1fr); justify-items: center; width: 90%; margin: 0 auto; grid-template-rows: unset; gap: 3.5em 20px;}
	.index_sec05 .itemBox > .item {width: auto; display: grid; justify-items: center;}
	.index_sec05 .itemBox > .item img  {width: auto; height: auto;}
	.index_sec05 .itemBox > .item > .item_textBox {align-items: center; text-align: center;}
	.index_sec05 .itemBox > .item h4 {height: 2.54em; display: flex; align-items: center;}
	.index_sec05 .itemBox > .item > .item_textBox > p.text1 {height: 3.05em; display: flex; align-items: center; margin: 0 0 1em;}
	.index_sec05 .itemBox > .item > .item_textBox > p.text1 br {display: block;}
}

@media (max-width: 768px) {
	.index_sec05 .itemBox {grid-template-columns: repeat(2, 1fr); gap: 10em 20px;}
	.index_sec05 .itemBox > .item05 > .item_textBox > p.text1 br {display: none;}
}

@media (max-width: 550px) {
	.index_sec05 .itemBox {width: 100%;}
}






/*section6*/
.index_sec06 {background: #228890; padding: max(50px, 15em) 0 max(50px, 20em);}
.index_sec06 .titleBox-V2 h1.title-V3 {color: #fff; margin-bottom: 40px;}




/*section7*/
.index_sec07 {background: url(img/sec07_bg.jpg) no-repeat; background-size: cover;  padding: max(50px, 14.5em) 0 max(50px, 15em);}
.index_sec07 .titleBox-V2 > h3 {font-size: max(25px, 5em); color: #fff; font-weight: bold; line-height: 1.2; }
.index_sec07 .titleBox-V2 h1.title-V3 {color: #fff; margin-bottom: 9rem;}


.index_sec07 .itemBox .item { display:flex;}
.index_sec07 .itemBox .item .icon { 
width: 4rem; height: 4rem; background: #00545d; border-radius:50%; text-align: center; margin: 0 1.5rem;
color: #fff; font-size: var(--page-font-size3, max( 18px, 1.3vw )); font-weight: 500; text-transform: uppercase;
}
.index_sec07 .itemBox .item .text { flex:1; padding: 0 1.5rem; }
.index_sec07 .itemBox dt { align-items:center; border-bottom: 1px solid #d3d3d3; padding: 1.8rem 0; cursor:pointer; background: #fff;}
.index_sec07 .itemBox dt > .icon { line-height: 3.2rem; }
.index_sec07 .itemBox dt > .text {
color: #00545d; font-weight: 500; font-size: var(--page-font-size5, max( 15px, 1.04vw )); line-height: 1.3;
}
.index_sec07 .itemBox dt > .img { width: 2.1rem; margin: 0 3rem; transition:0.4s; }
.index_sec07 .itemBox dd { border-bottom: 1px solid #d3d3d3; padding: 1.5rem 0 2.2rem; background: #e4f4f5;}
.index_sec07 .itemBox dd > .icon { line-height: 3.6rem; }
.index_sec07 .itemBox dd > .text { line-height: 1.5; font-size: var(--page-font-size2, max( 14px, 0.94vw )); color: #638487; }

/* on */
.index_sec07 .itemBox dt.on { border-bottom: none; }
.index_sec07 .itemBox dt.on > .img { transform:rotate(180deg); }

/*font*/
@media all and (max-width: 500px) {
	.index_sec07 .containerV1 .title_box > h4 {font-size: var(--font-size50); }
	.index_sec07 .containerV1 .title_box > h1 {font-size: var(--font-size90);}
}




/*section8*/
.index_sec08 {background: url(img/sec08_bg.jpg) no-repeat; background-size: cover; padding: max(50px, 14.5em) 0 max(50px, 11em);}
.index_sec08 .titleBox-V2 > span::before {background: url(img/title_home_color.png) no-repeat; background-size: cover;}
.index_sec08 .titleBox-V2 h1.title-V3 {color: #228890; margin-bottom: 45px;}

/*font*/
@media all and (max-width: 500px) {
	.index_sec08 .title_box > h3 {font-size: var(--font-size45); width: 66vw; height: 10vw;}
	.index_sec08 .title_box > h1 {font-size: var(--font-size90);}
}




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











/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
.footer {background: #00545d;}
.footer .containerV1 {color: #fff; font-size: min(3.43vw, 13px); line-height: 25px; display: flex; justify-content: center;}
.footer  a {color: #fff ;}
.footer .list_box1 {display: flex; gap: 0 15px; padding: 13px 0 13px; border-bottom: 1px solid #46696d; justify-content: center;}
.footer .list_box1 span {position: relative; font-size: min(4vw, 15px); }
.footer .list_box1 span::before {content: ""; position: absolute; width: 1px; height: 13px; background: #fff; right: -10px; top: 50%; transform: translateY(-50%);}
.footer .list_box1 span:last-child:before {display: none;} 
.footer .containerV1 .copy_list {width: fit-content; padding: 2.8rem 0 9rem 0; display: flex; flex-direction: column; align-items: center; font-size: min(3.75vw, 15px);}
.footer .containerV1 .copy_list .list_box2 {display: flex; gap: 0 15px; flex-wrap: wrap; justify-content: center;}
.footer .containerV1 .copy_list .list_box2 li {position: relative;}
.footer .containerV1 .copy_list .list_box2 li > a {color: #fff !important;}
.footer .containerV1 .copy_list .list_box2 li.box_li05::before {display: none;}
.footer .containerV1 .copy_list .list_box2 li::before {content: ""; position: absolute; width: 1px; height: 13px; background: #fff; right: -8px; top: 50%; transform: translateY(-50%);}
.footer .containerV1 .copy_list .list_box2 li:last-child:before {display: none;}
.footer .containerV1 .copy_list .copy_text .login_text {display: flex; justify-content: center; gap: 0 5px;}


@media (max-width:991px) {
	.footer .containerV1 {justify-content: center; }
	.footer .list_box1 {display: none;}
	.footer .containerV1 .copy_list {width: 80%; padding: 15px 5px 30px; display: flex; flex-direction: column; align-items: center;}
	.footer .containerV1 .copy_list .list_box2 li {margin-bottom: 5px;}
	.footer .containerV1 .copy_list .copy_text {text-align: center; }
	.footer .containerV1 .copy_list .list_box2 {text-align: center; justify-content: center;}
}



@media (max-width:840px) {
	.footer .containerV1 .copy_list {width: 100%;}
}

@media (max-width:671px) {
	
}

@media (max-width: 500px) {
	.footer .containerV1 .copy_list .list_box1 span:nth-child(1) {order: 1;}
	.footer .containerV1 .copy_list .list_box1 span:nth-child(2) {order: 3;}
	.footer .containerV1 .copy_list .list_box1 span:nth-child(3) {order: 4;}
	.footer .containerV1 .copy_list .list_box1 span:nth-child(3):before {display: none;}
	.footer .containerV1 .copy_list .list_box1 span:nth-child(4) {order: 2;}

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







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