@charset "utf-8";
/*------------------------------------*\
	header CSS
\*------------------------------------*/
/* header { position: fixed; width: 100%; z-index: 999; top: 0;} */
header h1 { float: left; margin-top: .3em;}
header nav { clear: both; width: 100%; background-color: rgba(47, 52, 63, .6); border-top: 1px solid rgba(255, 255, 255, .4); border-bottom: 1px solid rgba(255, 255, 255, .6); overflow: hidden;}
header nav { padding: 0;}
header .mainNav { float: left;}
header .mainNav li { float: left; border-right: 1px solid rgba(255, 255, 255, .4);}
header .mainNav li:first-child { border-left: 1px solid rgba(255, 255, 255, .4);}
header .mainNav li a { display: block; padding: .6em 2em; font-size: 1.2rem; color: #fff;}
header .mainNav li a:hover,
header .mainNav li a:focus,
header .mainNav li.active a{ background-color: #00a99d;}

header .login { float: right; display: table; height: 3.2em; color: #fff;}
header .login > div { display: table-cell; vertical-align: middle; white-space: nowrap;}
header .loginInfo { padding-right: 1em;}
header .login .login-btn { position: relative; display: block; height: 100%; padding-left: 0; padding-right: 3em; font-size: 1.1rem; color: #d2d6e2;}
header .login .login-btn:after { 
	content: url(../images/ic_login.png);
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	padding: .6em;
	border-right: 1px solid rgba(255, 255, 255, .4);
	border-left: 1px solid rgba(255, 255, 255, .4);
}
header .login .login-btn:hover:after,
header .login .login-btn:focus:after { background-color: #00a99d;}

header .subTitle { padding: 1em 0;}
header .subTitle:after { content: ""; display: block; clear: both;}
header .subTitle .rTitle { float: left; background-color: #fff;}
header .subTitle .rTitle .hTit{ position: relative; width: 2.2em; height: 2.2em; border-radius: 3em; margin: .3em; background-color: #7885a4;}
header .subTitle .rTitle .hTit i { position: absolute; top: 50%; left: 50%; margin-top: -0.9em; margin-left: -0.9em;}
header .subTitle .rTitle .hCopy{ font-size: 1.5rem; padding:.2em 2em .2em .5em;}
header .subTitle .breadCrumb { margin-top: 1em; float: right; overflow: hidden;}
header .subTitle .breadCrumb li { float: left; padding-right: 2.5em; margin-left: 1.8em; background: url(../images/ic_breadcrumb.png) no-repeat right;}
header .subTitle .breadCrumb li:last-child { font-weight: 500; background: none; padding-right: 0;}
header .subTitle .breadCrumb li:first-child .home { display: inline-block; padding-left: 2em; background: url(../images/ic_home.png) no-repeat left;}

.selfPart {width: 64%; float: right; margin-top: 5em; margin-right: .4em;}
.selfPart h2 .hTit { border-radius: 3em; padding-left: 2em; padding-right: 2em; background-color: #39435d; color: #fff;}
.selfPart h2 .hCopy { padding-right: 2em; font-weight: 400;}
.selfPart ul { margin: .5em 0; border-radius: 1.2em; padding: 1em 0; padding-left: 1em; background-color: rgba(248, 240, 237, .8); overflow: hidden; box-shadow: 0 0 8px #646c83;}
.selfPart ul li { float: left; padding-right: 1em;}
.selfPart ul li a { display: table; width: 100%; padding: 4em .5em .3em .5em; position: relative; border-radius: 1em; background-color: #7885a4; color: #fff; text-align: center; word-break: keep-all; background-repeat: no-repeat; background-position: center 1em; border: 5px solid rgba(256,256,256,0); transition: .2s background-color, .3s border;}
.selfPart ul li a > span { display: table-cell; min-width:74px; height: 3.5em; vertical-align: middle; line-height: 1.3em;}
.selfPart ul li a:hover { background-color: #00a99d; border: 5px solid rgba(256,256,256,.5);}
.selfPart ul li:nth-child(1) a { background-image: url(../images/ic_self01.png);}
.selfPart ul li:nth-child(2) a { background-image: url(../images/ic_self05.png);}
.selfPart ul li:nth-child(3) a { background-image: url(../images/ic_self06.png);}
.selfPart ul li:nth-child(4) a { background-image: url(../images/ic_self02.png);}
.selfPart ul li:nth-child(5) a { background-image: url(../images/ic_self03.png);}
.selfPart ul li:nth-child(6) a { background-image: url(../images/ic_self04.png);}
.selfPart ul li:nth-child(7) a { background-image: url(../images/ic_self07.png);}
.selfPart ul li:nth-child(8) a { background-image: url(../images/ic_self02.png);}
.selfPart ul li:nth-child(9) a { background-image: url(../images/ic_self07.png);} /* 2025.03.25 학폭법령 추가 */

.centerForm { background-color: #eef2f7;}
.centerForm > li { padding: .5em 1em; border-right: 1px solid #d6d6d6;}
.centerForm > li > .inputList { padding: 0; margin: 0;}
.centerForm > li > .inputList > li { margin-bottom: .2em;}
.centerForm > li > .inputList > li input { padding: .2em .5em; background-color: #fff;}
.centerForm > li .readInput { margin: .3em 0; padding: .2em 1em;; border: 1px solid #aab6d3;}
.centerForm > li:first-child .readInput { margin: 0; padding: 0; border: none; background-color: transparent; border-radius: 0;}
.centerForm h3 { font-size: 1rem;}
.centerForm .btnContainer { margin: 0; padding: 0; text-align: center;}
.centerForm .btnContainer .search { padding-left: 2em; background:#fff url(../images/ic_search.png) no-repeat .5em;}
.centerForm .btnContainer .agree { padding-left: 2em; margin-top: .25em; background:#fff url(../images/ic_agree.png) no-repeat .5em;}

/*------------------------------------*\
	Local Navigation CSS
\*------------------------------------*/
.localNav { padding: 0 1em; background-color: #e5e7ec; border: 1px solid #d6d6d6; border-radius: 1em;}
.localNav ul li { margin: 1em 0;}
.localNav ul li a { position: relative; display: block; padding: .5em .8em; border-radius: .5em; font-size: 1.1rem;  color: #292f45; background-color: #fff; border: 2px solid transparent;}
.localNav ul li a:hover { background-color: #00a99d; color: #fff; border: 2px solid rgb(256, 256, 256,.5);}
.localNav ul li.active a { border: 2px solid #292f45; font-weight: 500; background-color: #fff; color: #292f45;}
.localNav ul li.active a:after { content: ""; display: block; position: absolute; width: 1.6em; height: 1.6em; border-radius: 50%; background: #292f45 url(../images/ic_nextNav.png) no-repeat center; top: 50%; margin-top: -0.8em; right: .5em;}

/*------------------------------------*\
	Notice CSS & otherPart CSS
\*------------------------------------*/
.notice { float: left; width: 36%; padding: 1.4em 1em; position: relative;}
.notice .moreBtn { position: absolute; top: 1.5em; right: 1.5em;}
.notice dl { position: relative; margin-top: 1em; margin-bottom: 1em; padding: .5em .5em 0 5em;}
.notice dl .date { position: absolute; top: 0; left: 0; padding: .5em; background-color: #fff; border: 1px solid #d6d6d6; border-radius: .5em;}
.notice dl .date > span { display: block; text-align: center;}
.notice dl .date > span.YM { font-size: .9rem; color: #f6751d}
.notice dl .date > span.today { font-size: 1.5rem; font-weight: 500; color: #025185;}
.notice dl dt a { position: relative; display: inline-block; font-size: 1.1rem; color: #025185; padding-right: 2em; max-width: 465px; font-weight: 500;}
.notice dl dt a:hover { color: #00a99d;}
.notice dl dt a,
.notice dl .summary { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.notice dl .summary { padding-top: .2em;}

.otherPart { float: right; width: 64%; background-color: #39435d;}
.otherPart h2 { float: left; width: 45%; padding: 1.25em 1em; text-align: right; color: #fff;}
.otherPart h2 .hTit { display: inline-block; border-radius: 3em; padding: .3em 1em; color: #39435d; background-color: #fff;}
.otherPart h2 .hCopy { display: block; margin-top: .4em; font-size: 1rem; font-weight: 300;}
.otherPart > ul { margin-left: 45%; overflow: hidden;}
.otherPart > ul > li { width: 50%; float: left;}
.otherPart > ul > li > a { display: block; padding: 5.9em 1em 1.5em 1em; color: #fff; font-size: 1.1rem; word-break: keep-all; text-align: center; background-repeat: no-repeat; background-position: center 2em; outline: 5px solid rgba(256,256,256,0);outline-offset: -5px; transition: .2s background-color,.3s outline;}
.otherPart > ul > li > a:hover { background-color: #00a99d; outline: 5px solid rgba(256,256,256,.5); outline-offset: -5px;}
.otherPart .cate { display: block;}
.otherPart .seeker { background-color: #12b5cb; background-image: url(../images/ic_seeker.png);}
.otherPart .chief { background-color: #025185; background-image: url(../images/ic_chief.png);}


/*------------------------------------*\
	index contents CSS
\*------------------------------------*/
.link { width: 100%; overflow: hidden;}
.link li { float: left; width: 33.3333%; padding: 3em 1em;}
.link li .rTitle { position: relative;}
.link li .rTitle .hTit { background-color: #7885a4; border-radius: 3em;}
.link li .hCopy { font-size: 1.3rem; font-weight: 500;}
.link li a { display: block; position: absolute; padding: 0; top: 50%; margin-top: -18px; right: .5em;}
.link h2 + p { margin-top: 1em; padding: 1em;}

.stepContainer { margin-top: 1em;}
.stepContainer:after { content: ""; display: block; clear: both;}
.stepContainer > div { float: left; padding: .5em 1em;}
.stepContainer > div:first-child { padding-left: 0;}
.stepContainer > div:last-child { padding-right: 0;}
.stepContainer .selfStep { width: 50%;}
.stepContainer .otherStep { width: 50%;}
.stepContainer ul.step { display: table; margin-top: 1em; width: 100%; padding: 1em; background-color: #e5e7ec; border-radius: .5em; overflow: hidden;}
.stepContainer .step li { display: table-cell; text-align: center; vertical-align: middle;}
.stepContainer .step li.stepItem { padding: .2em; width: 5em; height: 5em; border-radius: 2.5em; word-break: keep-all; color: #fff;}
.stepContainer .selfStep li.stepItem { background-color: #00a99d;}
.stepContainer .otherStep li.stepItem { background-color: #025185; line-height: 1.5em;}
.stepContainer .otherStep li.stepItem b { display: block; font-size: 1.5rem;}
.stepContainer .otherStep li.stepItem + li { text-align: left; color: #025185; padding-right: 0 !important; letter-spacing: -0.1em; font-weight: 500;}
.stepContainer .otherStep li:not(.stepItem) { padding: 0 .3em;}
.stepContainer .otherStep li.stepItem:nth-child(4) { background-color: #12b5cb;}
.stepContainer .otherStep li.stepItem:nth-child(4) + li { color: #12b5cb;}

#relationBnr { padding: 3em 4em;}
#relationBnr .owl-nav [class*='owl-'] { border-radius: 50%; border: 2px solid #aab2bd;}
#relationBnr .owl-nav [class*='owl-'] i { margin-top: -8px;}
#relationBnr .owl-nav { opacity: 1; margin-top: 0;}

/*------------------------------------*\
	sub contents CSS
\*------------------------------------*/

/* issue Step CSS */
.issueStep { margin-top: 2em; margin-bottom: 2em; padding: 1em 12em; position: relative;}
.issueStep.step5 { padding: 1em 8em;}
.issueStep:before { content: ""; display: block; position: absolute; height: 3.4em; top: 50%; margin-top: -1.5em; left: 10em; right: 10em; border-radius: 1.7em; background-color: #1cbbb4; z-index: -1;}
.issueStep ul { display: table; width: 100%;}
.issueStep ul li { display: table-cell; text-align: center; vertical-align: middle;}
.issueStep ul li:nth-child(2n) { font-size: 0;}
.issueStep ul li:nth-child(2n) > img { display: inline-block; margin-top: 5px;}
.issueStep .stepItem { display: inline-block; width: 10em; height: 10em; border-radius: 50%; background-color: #fff; border: 8px solid #1cbbb4;}
.issueStep .stepItem span.mainColor { display: block; font-size: 1.5rem; padding-top: .7em; font-weight: 500; letter-spacing: -0.1em;}
.issueStep .stepItem span.mainColor b { font-size: 2rem;}
.issueStep .stepItem .title { margin: 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
.issueStep .stepItem .title > span { display: block;}
.issueStep .active .stepItem { position: relative; border-color: #fff; background-color: #00a99d;}
.issueStep .active .stepItem,
.issueStep .active .stepItem .blue-text,
.issueStep .active .stepItem .mainColor{ color: #fff;}
.issueStep .active .stepItem:before { content: url(../images/ic_issue_active.png); position: absolute; left: 50%; margin-left: -29px; bottom: -1.85em;}

.issueStep .issueCopy { position: absolute; width: calc( 100% - 24em ); padding: .5em 1em; border-radius: 3em; border: 3px solid #00a99d; bottom: -2.5em;}
.issueStep.step5 .issueCopy { width: calc( 100% - 16em );}
.issueStep .issueCopy p { margin: 0; padding-left: 2em; background: url(../images/ic_check.png) no-repeat left;}

/* 아이핀로그인 */
.ipin .listHeader { padding: 0; margin: 0;}
.ipin .listHeader h3 { margin-top: 0; float:none; background: url(../images/img_niceipin.png) no-repeat right;}
.ipin .itemContainer { text-align: center;}
.ipin .itemContainer .formGroup { padding: 1.5em 4em 2em;}
.ipin .btnContainer { margin-top: 1.6em; margin-bottom: 3em;}


/* 모달 팝업 */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Close Button */
.close { float: right; font-size: 2em; font-weight: 500; margin-top: -0.3em}
.close:hover,
.close:focus { color: black; text-decoration: none; cursor: pointer;}

/* Modal Header */
.modal-header { padding: .5em 1em; border-bottom: 2px solid #2f343f;}

/* Modal Body */
.modal-body { padding: 1em; background-color: #eef2f7;}
.modal-body-header { padding: .2em; border-radius: .2em; margin-bottom: 1em; background-color: #fff; border: 1px solid #aab6d3;}
.modal-body-header div:first-child { float: left; width: auto; margin-top: .05em;}
.modal-body-header div:last-child { float: right;}
.modal-body-header:after { content: ""; display: block; clear: both;}
.modal-body-header.title { font-size: 1.3rem; padding-left: 1em; font-weight: 500; color: #000; background-color: #fff; border: 2px solid #f29222; border-radius: 3em;}
.modal-body-header.title > i.icon { margin-right: .5em;}

/* Modal Footer */
.modal-footer { padding: .5em 1em; border-top: 1px solid #2f343f; text-align: center;}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
	margin: 0 auto;
	top: 10em;
  padding: 0;
  border: 1px solid #888;
  max-width: 50em;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}



/* Add Animation */
@keyframes animatetop {
  from {top: -10em; opacity: 0}
  to {top: 10em; opacity: 1}
}

/*------------------------------------*\
	Footer CSS
\*------------------------------------*/
footer { text-align: center;}
footer .footLink { padding: .5em 0; margin-bottom: 1em; background-color: #f9f9fb; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;}
footer .footLink li { padding: .2em 2em; display: inline-block; background: url(../images/bullet.png) no-repeat right;}
footer .footLink li:last-child { background: none;}
footer .footLink li a { color: #31344b;}
footer .copyright { margin-top:.5em; font-size: .9em;}

/*------------------------------------*\
	captcha
\*------------------------------------*/

.captcha { display: table; width: 100%; table-layout: fixed; border-collapse: collapse;}
.captcha > div { display: table-cell; vertical-align: middle; overflow: hidden;}
.captcha > div.captchaImg { padding-right: 40px;}
.captcha > div.captchaImg img { float: left;}
.captcha > div.captchaImg button { padding: 0; width: 36px; height: 36px; margin: .1em .1em .1em .5em; border-radius: 5px; background: #7885a4;}
.captcha > div.captchaImg + div p { margin: 0;}


/*------------------------------------*\
	Owl theme
\*------------------------------------*/

/* -- dots -- */

.owl-theme .owl-dots .owl-dot span {
	border: none;
	background: #EEE;
	-webkit-transition: 0.2s all;
	transition: 0.2s all;
}

.owl-theme .owl-dots .owl-dot:hover span {
	background: #12b5cb;
}
.owl-theme .owl-dots .owl-dot.active span {
	  background: #12b5cb;
	  width:20px;
}

/* -- nav -- */

.owl-theme .owl-nav {
	opacity: 0;
	-webkit-transition: 0.2s opacity;
	transition: 0.2s opacity;
}

.owl-theme:hover .owl-nav {	opacity: 1;}
.owl-theme .owl-nav [class*='owl-'] {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
			transform: translateY(-50%);
	background: transparent;
	color: #999;
  	padding: 0px;
  	width: 50px;
  	height: 50px;
  	border-radius:3px;
  	line-height: 50px;
  	margin: 0;
}

.owl-theme .owl-prev { left: 0; background:transparent url(../images/ic_prev.png) no-repeat center !important;}
.owl-theme .owl-next { right: 0; background:transparent url(../images/ic_next.png) no-repeat center !important;}
.owl-theme .owl-nav [class*='owl-']:hover {	opacity: 0.8;}

.owl-carousel .owl-stage-outer {
    height:50px;
 }
.owl-carousel .owl-item {
    /*margin-left: 20px; */
    height: 50px;
    width: 215px;
    border: 1px solid #dedede ;
}
.owl-carousel .owl-item a {display: flex; height: 50px; flex-wrap: wrap; justify-content: center; align-items: center; }
.owl-carousel .owl-item a > img { width: auto; max-width: 100%;}

#kcasedialog .kc-dialog .kc-content-box { width: auto !important;}
#kcasedialog,
#kcasedialog button { font-family: '맑은고딕',sans-serif;}
a[id*="V"]:hover,
a[id*="V"]:focus { opacity: 1;}
#kcasedialog table { width: 100%;}

/*------------------------------------*\
	메뉴 /게시판 운영 개편 알림 div popup 용 CSS
\*------------------------------------*/
.modal2 {/* display: block; */display:none; position: fixed; z-index: 997; left: 100px; top: 100px; width: 700px; height: 800px; overflow: auto; background-color: #fff; border: 1px solid;}

button.btn27e { display:inline-block; zoom:1; padding:0 1px 0 2px; margin-right:-1px; vertical-align:middle; }
button.btn27e span { display:block; padding-right:20px; }
button.btn27e em { display:block; height:26px; margin-left:-2px; padding-left:32px; font-weight:bold; color:#587797; line-height:26px; white-space:nowrap; }

button.btn27e.lok span { background:url(../../images/button/btnBg_25-3.png) no-repeat right top; }
button.btn27e.lok em { background:url(../../images/button/btnBg_25-3.png) no-repeat left top; }
button.btn27e.lcancle span { background:url(../../images/button/btnBg_25-4.png) no-repeat right top; }
button.btn27e.lcancle em { background:url(../../images/button/btnBg_25-4.png) no-repeat left top; }