@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; 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: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 : 1400px;
	
	--color1 : #154992;
	--color2 : #d9356b;

	/*font (22px 미만은 min 400부터, 이상은 500부터)*/
	--font-size14 : min(3.50vw,14px);
	--font-size15 : min(3.75vw,15px); 
	--font-size16 : min(4vw,16px); 
	--font-size18 : min(4.50vw,18px); 
	--font-size20 : min(5vw,20px); 
	--font-size22 : min(4.40vw, 22px); 
	--font-size23 : min(4.60vw, 23px); 
	--font-size25 : min(5vw, 25px); 
	--font-size30 : min(6vw, 30px); 
	--font-size35 : min(7vw, 35px); 
	--font-size45 : min(9vw, 45px); 
	--font-size50 : min(10vw, 50px); 
	--font-size60 : min(12vw, 60px); 

}

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


@media (max-width: 1430px) {
	.containerV1 { padding: 0 15px;}
}


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



/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
/*로그인시 서브페이지에서만 해당*/

header {width: 100%; position: sticky; background: #ffbece; padding: 10px 0;}
header .containerV1 a {display: block; margin: 0 auto; width: 150px;}




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



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

/*.index > .section {font-size: 10px;}*/

.section01 {padding: max(50px, 14.5em) 0; background: url(img/sec01_bg.jpg) no-repeat; background-position: top left; background-size: cover; position: relative; font-size: 10px;}
.section01 > img.sec_img {position: absolute; width: 51em; height: 43em; bottom: 14.7em; right: 7.6em; z-index: 1;}
.section01 .sec_wrap {display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 2;}
.section01 .sec_wrap .logo {margin-bottom: 40px; width: fit-content;}
.section01 .sec_wrap .logo img {width: 22.5em; height: 15.4em;}
.section01 .sec_wrap > .title-text {text-align: center; line-height: 1; -webkit-text-stroke: 3px #fff;}
.section01 .sec_wrap > .img_text {display: block;  }
.section01 .sec_wrap .itemBox {display: grid; width: 100%; gap: 3em 0; margin-top: 7em;}
.section01 .sec_wrap .itemBox > li {display: flex; align-items: center; gap: 0 2em; width: 100%;}
.section01 .sec_wrap .itemBox > li h2.item_number {font-size: 10em; font-weight: 900; color: #fff;}
.section01 .sec_wrap .itemBox > li .item_text {background: #fff; display: flex; flex-direction: column; height: 10em; justify-content: center; padding-left: 1.4em; border-radius: 0px 50px 50px 0;
padding: 0 3em 0 2em; letter-spacing: -1px; width: 100%; max-width: 65%;}
.section01 .sec_wrap .itemBox > li .item_text p.text1 {color: #333; line-height: 1.5; font-size: 2em;} 
.section01 .sec_wrap .itemBox > li.item03 .item_text .clolor-tag {color: var(--color1); padding-left: 1em;}
.section01 .sec_wrap .itemBox > li.item03 .item_text .clolor-tag span {position: relative;}
.section01 .sec_wrap .itemBox > li.item03 .item_text .clolor-tag span::before {font-size: 8px; top: 50%; left: -2.2em; content:"▶"; position: absolute; transform: translateY(-50%); color: #bdd4f4;}

@media (max-width: 991px) {
	.section01 {font-size: 1.01vw;}
	.section01 .sec_wrap .itemBox > li .item_text {max-width: 100%;}
}

@media (max-width: 768px) {
	.section01 {font-size: 1.30vw;}
}

@media (max-width: 550px) {
	.section01 {font-size: 1.6vw;}
	.section01 .sec_wrap .itemBox {grid-auto-rows: minmax(80px, auto);}
	.section01 .sec_wrap .itemBox > li .item_text {padding: 10px 3em 10px 2em; height: 100%;}
	.section01 .sec_wrap .itemBox > li .item_text p.text1 {font-size: 13px; }
}

.section02 {
/*기본 컬러*/
	--item01-color : #00ccd4;
	--item02-color : #ff25f6;
	--item03-color : #001eff;
	--item04-color : #ece200;
	--item05-color : #f60f0f;
	--item06-color : #15d500;
	--item07-color : #ff7f00;
	--item08-color : #8e00ff;
	
/*배경*/
	--item01-bg-color : #e3feff;
	--item02-bg-color : #ffe7fe;
	--item03-bg-color : #eef0ff;
	--item04-bg-color : #fffee7;
	--item05-bg-color : #ffefef;
	--item06-bg-color : #edffeb;
	--item07-bg-color : #fff5eb;
	--item08-bg-color : #f7edff;

	font-size: 10px;
}

.section02 .itemBox {display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); }
.section02 .itemBox > article {display: flex; align-items: center; justify-content: center; gap: 0 2em;}

/*item-color*/
	.section02 .itemBox > .item01 {background: var(--item01-bg-color);}
	.section02 .itemBox > .item02 {background: var(--item02-bg-color);}
	.section02 .itemBox > .item03 {background: var(--item03-bg-color);}
	.section02 .itemBox > .item04 {background: var(--item04-bg-color);}
	.section02 .itemBox > .item05 {background: var(--item05-bg-color);}
	.section02 .itemBox > .item06 {background: var(--item06-bg-color);}
	.section02 .itemBox > .item07 {background: var(--item07-bg-color);}
	.section02 .itemBox > .item08 {background: var(--item08-bg-color);}

.section02 .itemBox > article > .item_img {border-radius: 50%; width: 11em; height: 11em; background: #fff; display: flex; justify-content: center; align-items: center;
box-shadow: 0px 8px 20px -11px #080102; }
.section02 .itemBox > article .item_img img {width: 5.9em; height: 6.2em;}
.section02 .itemBox > article .item_text {position: relative;}
.section02 .itemBox > article .item_text .bg_before {position: absolute; width: 5.2em; height: 4.2em; top: -3.5em; left: -2.5em;
background: url(img/sec02_before01.png) no-repeat; background-position: center; background-size: cover;}

/*before-color*/
	.section02 .itemBox > .item01 .item_text .bg_before {background: url(img/sec02_before01.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item02 .item_text .bg_before {background: url(img/sec02_before02.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item03 .item_text .bg_before {background: url(img/sec02_before03.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item04 .item_text .bg_before {background: url(img/sec02_before04.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item05 .item_text .bg_before {background: url(img/sec02_before05.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item06 .item_text .bg_before {background: url(img/sec02_before06.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item07 .item_text .bg_before {background: url(img/sec02_before07.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item08 .item_text .bg_before {background: url(img/sec02_before08.png) no-repeat; background-position: center; background-size: cover;}

.section02 .itemBox > article .item_text .bg_after {position: absolute; content:""; width: 2.3em; height: 2.1em; bottom: -1.5em; right: 2em; 
background: url(img/sec02_before01.png) no-repeat; background-position: center; background-size: cover;}

/*after-color*/
	.section02 .itemBox > .item01 .item_text .bg_after {background: url(img/sec02_after01.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item02 .item_text .bg_after {background: url(img/sec02_after02.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item03 .item_text .bg_after {background: url(img/sec02_after03.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item04 .item_text .bg_after {background: url(img/sec02_after04.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item05 .item_text .bg_after {background: url(img/sec02_after05.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item06 .item_text .bg_after {background: url(img/sec02_after06.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item07 .item_text .bg_after {background: url(img/sec02_after07.png) no-repeat; background-position: center; background-size: cover;}
	.section02 .itemBox > .item08 .item_text .bg_after {background: url(img/sec02_after08.png) no-repeat; background-position: center; background-size: cover;}

.section02 .itemBox > article .item_text h4 {font-size: 3em; font-weight: bold; color: #333; display: flex; align-items: center;}
.section02 .itemBox > article .item_text h4 span.text_icon {display: block; border-radius: 50%; width: 1.4em/*42px*/; height: 1.4em/*42px*/; color: #fff; text-align: center; line-height: 1.3em; margin: 0 2px;}

/*text-icon-color*/
	.section02 .itemBox > .item01 .item_text h4 span.text_icon {background: var(--item01-color);}
	.section02 .itemBox > .item02 .item_text h4 span.text_icon {background: var(--item02-color);}
	.section02 .itemBox > .item03 .item_text h4 span.text_icon {background: var(--item03-color);}
	.section02 .itemBox > .item04 .item_text h4 span.text_icon {background: var(--item04-color);}
	.section02 .itemBox > .item05 .item_text h4 span.text_icon {background: var(--item05-color);}
	.section02 .itemBox > .item06 .item_text h4 span.text_icon {background: var(--item06-color);}
	.section02 .itemBox > .item07 .item_text h4 span.text_icon {background: var(--item07-color);}
	.section02 .itemBox > .item08 .item_text h4 span.text_icon {background: var(--item08-color);}

.section02 .itemBox > article .item_text p.text1 {font-size: 2.5em; color: #999; line-height: 1.4; margin-top: 3px;}
.section02 .itemBox > article .item_text p.text1 .color-tag {font-weight: bold; display: inline-block; margin: 0 4px;}

/*color-tag-color*/
	.section02 .itemBox > .item01 .item_text p.text1 .color-tag {color: var(--item01-color);}
	.section02 .itemBox > .item02 .item_text p.text1 .color-tag {color: var(--item02-color);}
	.section02 .itemBox > .item03 .item_text p.text1 .color-tag {color: var(--item03-color);}
	.section02 .itemBox > .item04 .item_text p.text1 .color-tag {color: var(--item04-color);}
	.section02 .itemBox > .item05 .item_text p.text1 .color-tag {color: var(--item05-color);}
	.section02 .itemBox > .item06 .item_text p.text1 .color-tag {color: var(--item06-color);}
	.section02 .itemBox > .item07 .item_text p.text1 .color-tag {color: var(--item07-color);}
	.section02 .itemBox > .item08 .item_text p.text1 .color-tag {color: var(--item08-color);}

@media (max-width: 1430px) {
	.section02 {font-size: 0.70vw;}
}

@media (max-width: 991px) {
	.section02 {font-size: 1.01vw;}
	.section02 .itemBox {grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto);}
}

@media (max-width: 768px) {
	.section02 {font-size: 1.30vw;}
	.section02 .itemBox {grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto);}
}

@media (max-width: 525px) {
	.section02 {font-size: 1.90vw;}
	.section02 .itemBox {grid-auto-rows: minmax(30em, auto);}
	.section02 .itemBox > article {gap: 2em; flex-direction: column;}
	.section02 .itemBox > article > .item_img {box-shadow: unset;}
	.section02 .itemBox > article .item_text p.text1{text-align: center;}
	.section02 .itemBox > article .item_text .bg_after {bottom: -2.5em;}
}


.section03 {padding: max(50px, 19em) 0 max(50px, 14em) 0; background: url(img/sec03_bg.jpg) no-repeat; background-position: top left; background-size: cover; position: relative; font-size: 0.52vw;
overflow: hidden;}
.section03 .containerV1 {margin: 0; padding-left: 13.54%; max-width: 100%;}
.section03 .item_img {position: absolute; top: -22em; left: -69em; z-index: 1; }
.section03 .item_img img {width: 159.5em; height: 159.5em;}
.section03 .containerV1 {position: relative; z-index: 2;}
.section03 .itemBox {display: flex; align-items: center; gap: 0 33em;}
.section03 .itemBox .item_title {text-align: center; padding-bottom: 11em;}
.section03 .itemBox .item_title h1 {font-size: 10em; font-weight: bold; line-height: 1.2; color: #333;}
.section03 .itemBox .item_title h1 .color-tag {color: var(--color2);}
.section03 .itemBox .item_title p.text1 {color: var(--color2); font-size: max(16px, 2em); font-weight: 900; line-height: 1.2; margin-top: 1.5em;}

.section03 .itemBox ul {display: grid; gap: 18em 0;}
.section03 .itemBox ul.item_text li {font-size: 3em; font-weight: bold; color: #333; line-height: 1.4; letter-spacing: -1px; position: relative;} 
.section03 .itemBox ul.item_text li span {position: absolute; top: 0.7em;}
.section03 .itemBox ul.item_text li .circle-tag::before {position: absolute; content:""; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);}
.section03 .itemBox ul.item_text li .line-tag {width: 100px;}
.section03 .itemBox ul.item_text li .line-tag::before {position: absolute; content:""; background: #fff; width: 100%; height: 2px; transform: translateY(-50%);}

.section03 .itemBox ul.item_text li.item01 span {left: -8.5em;}
.section03 .itemBox ul.item_text li.item01 .line-tag {width: 8em;}

.section03 .itemBox ul.item_text li.item02 span {left: -5em;}
.section03 .itemBox ul.item_text li.item02 .line-tag {width: 4.6em;}

.section03 .itemBox ul.item_text li.item03 span {left: -4.9em;}
.section03 .itemBox ul.item_text li.item03 .line-tag {width: 4.5em;}

.section03 .itemBox ul.item_text li.item04 span {left: -8em;}
.section03 .itemBox ul.item_text li.item04 .line-tag {width: 7.6em;}



@media (max-width: 1430px) {
	.section03 {font-size: 0.70vw;}
	.section03 .containerV1 {padding: 0 15px; margin: 0 auto;}
	.section03 .item_img {left: -92em;}

}

@media (max-width: 650px) {
	.section03 {font-size: 1.2vw; padding: min(50px, 19em) 0 min(50px, 14em) 0;;}
	.section03 .item_img {left: -125em; top: 20em; display: none;}
	.section03 .itemBox {flex-direction: column;}
	.section03 .itemBox ul {gap: 11em 0;}
	.section03 .itemBox ul.item_text li {text-align: center;}
	.section03 .itemBox ul.item_text li span {display: none;}
	.section03 .itemBox .item_title p.text1 {font-size: var(--font-size16);}
}

@media (max-width: 460px) {
	.section03 {font-size: 1.3vw;}
}

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer {
--footer-font : 13px;
 position: relative;
 font-size: 0.52vw;
 }

footer > .itemBox {display: flex; background: var(--color1); padding: 4em 13.54% 4em 13.54%; overflow: hidden; gap: 0 9em; }
footer > .itemBox li {display: flex; gap: 0 1.5em; align-items: center;}
footer > .itemBox li .item_text {color: #fff;}
footer > .itemBox li .item_text > h3 {color: inherit; font-size: 4em; font-weight: bold; line-height: 1.3;}
footer > .itemBox li .item_text > h3 a {color: #fff;}
footer > .itemBox li .item_text > p.text1 {color: inherit; font-size: 2.2em; line-height: 1.4;}
footer > .itemBox li .item_text > p.text1 a {color: #fff;}
footer > .itemBox li .item_text > p.text_call {color: inherit; font-size: 13px; line-height: 1.4;}

footer > .itemBox li.item_left {padding-left: 29em;}
footer > .itemBox li.item_left img {width: 10.1em; height: 9.2em;}
footer > .itemBox li.item_right {position: relative;}
footer > .itemBox li.item_right img {width: 9.5em; height: 9.4em;}
footer > .itemBox li.item_right::before {background: #84a0c6; content:""; position: absolute; width: 2px; height: 100%; top: 0; left: -4em;}

footer .copy_box {background: #fff; display: flex; position: relative; padding: 4.3em 13.54% 10em 13.54%;  gap: 0 1em;}

footer .item1 { padding-left: 29em; }
footer .item1 {display: flex; flex-direction: column; flex-basis: 0; flex-grow: 1;}
footer .item1 > div { line-height: 1.6; font-size: var(--font-size16); color: #555; }
footer .item1 > div a { color: inherit;}
footer .item1 > .text {display: flex; gap: 0px 10px;  flex-wrap: wrap;}
footer .item1 > .text > span { position: relative; font-weight: inherit; }
footer .item2 {width: 100%; max-width: 350px;}
footer .item2 a {width: 100%; height: 2.6em; background: var(--color2); display: flex; align-items: center; justify-content: center; 
text-align: center; gap: 0 4px; font-size: var(--font-size25); color: #fff; font-weight: bold;}

footer .copy_box .tail_img {position: absolute; z-index: 2; bottom: 5.2em; left: 13.54%; width: 25em; height: 51em;}

footer .copy {font-size: var(--font-size15); color: #818181; text-transform: uppercase; font-weight: inherit; line-height: 1.3; background: #e9e9e9; padding: 13px 0; text-align: center;}
footer .copy a {color: #818181;}



@media (max-width:1430px) {
	footer {font-size: 0.70vw;}
	footer > .itemBox {padding: 4em 15px; gap: 0 5em}
	footer .copy_box {padding: 4.3em 15px 10em 15px;}
	footer .copy_box .tail_img {left: 15px;}
	footer > .itemBox li.item_right::before {display: none;}
}

@media (max-width:991px) {
	footer {font-size: 1.01vw;}
	footer > .itemBox {flex-wrap: wrap; justify-content: start; align-items: center; gap: 2em 0;}
	footer > .itemBox li.item_left {padding-left: 0;}
	footer .copy_box {justify-content: center; flex-wrap: wrap; align-items: center; flex-direction: column; gap: 5em 0; padding: 4.3em 15px 4em 15px;}
	footer .item1 {padding-left: 0;}
	footer .copy_box .tail_img {display: none;}
}

@media (max-width:768px) {
	footer {font-size: 1.30vw;}
}


@media (max-width:450px) {
	footer {font-size: 1.60vw;}
	footer > .itemBox li .item_text > p.text_call {font-size: 11px;}
		footer .item1 {align-self: flex-start;}
	footer .item1 > .text {flex-direction: column;}
}



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





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

@media (max-width: 991px) {
	.tmt_sub_frame { padding: 80px 0 50px; min-height: 85vh;}
}


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