@charset "UTF-8";
@import url('reset.css');

body {outline:0; color:#444; overflow-x:hidden; font-weight:400; font-size:18px;}
h1, h2, h3, h4, h5, h6 {font-size: 24px; font-weight: 500;}
a {color:inherit;}
img{max-width: 100%;}
*{line-height: 1.4; letter-spacing: -0.5px; margin: 0; padding: 0;}


/* 공통 */
#wrap{width: 100%;}
#mcontainer{display: none;}	
#mobile-menu-view{display: none;}


/* 상단 */
.dept02_top{max-width: 1400px;}
.dept02_top_wrap{justify-content: center; box-shadow: 1px 3px 6px rgb(0 0 0 / 8%);}
.menu_right{position: relative;}
.dept02_top h1.logo{width: 500px}
.dept02_top h1.logo > p{font-size: 20px;}
.headermenurow .tabcontent_wrap > div{width: calc(100% / 3);}


/* 풋터 */
footer.row{padding:25px 0 0 0; background-color: #f9f9f9;}
.footer_info{border: none;}




/* 메인 */
.main_visul{background-image: url(../images/main/inno_main.png); border-radius: 20px;}
.main_visul .main_visul_txt{
	padding: 0 0 0 100px;
	text-align:left;
	display: flex;
    flex-direction: column;
    
	position: absolute;
	left:0;
	top:47.5%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}

.main_visul .main_visul_txt p,
.main_visul .main_visul_txt span,
.main_visul .main_visul_txt h2{
	text-align:left;
	color:#fff;
	font-weight: 600;
	text-shadow: unset;
	font-size: 30px;
}
.main_visul .main_visul_txt span{
	font-weight: 300;
	font-size: 16px;
}
.main_visul .main_visul_txt h2{
	margin:25px 0 0 0;
	padding:0 0 10px 0;
	font-size: 50px;
	font-weight: 800;
	position: relative;
}
.main_visul .main_visul_txt h2::before{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: #27409a;
	position: absolute;
	display: block;
	content: '';
	bottom:0;
	left:0;
	opacity: 0.5;
}
.main_visul .main_visul_txt h2::before{
	animation: mainTitle 1.5s infinite;
    animation-direction: alternate;	
}
@keyframes mainTitle {
	from {
		left:-10px;
		opacity: 0.5;
	}
	to {
		left:50px;
		opacity: 0.1;
	}
}


.dept_sec1 > div > ul li {
    background-position: bottom right;
    background-color: #f7f7f7;
}
.dept_sec1 > div > ul li:hover{
	animation-name:unset !important;
}
.dept_sec1 > div > ul li {
    animation-name: key4 !important;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes key4 {
	from {
		background-position: bottom right;
	}
	to {
		background-position: bottom 10px right;
	}
}



.dept_sec2 ul li a p{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    height: 4.8em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}














/* 서브 */
.sub_visul_wrap{margin:25px auto 0;}
.sub_visul{background-image: url(../images/sub/inno_sub.png); border-radius: 20px;}
.submenupan{margin: 25px auto 0;}
.submenupan::before{display: none;}
.contentHeader{display: none;}
#subTopMenu > li:not(li:first-child) a{height: 50px; line-height: 50px;}

.submenuTitleText{
	position: relative;
	padding-top:15px;
	top:0;
	width: fit-content;
	margin:0 0 75px 0;
}
.submenuTitleText::before{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: #27409a;
	position: absolute;
	display: block;
	content: '';
	top:0;
	left:0;
	opacity: 0.5;
}
.submenuTitleText::before{
	animation: mainTitle 1.5s infinite;
    animation-direction: alternate;	
}
@keyframes mainTitle {
	from {
		left:-10px;
		opacity: 0.5;
	}
	to {
		left:50px;
		opacity: 0.1;
	}
}
#subTopMenu > li:not(li:first-child){width: 200px;}
#subTopMenu > li:not(li:first-child) ul{
	top:-1000px;
}



/* 버튼 */
.fix_mov{
	position: fixed;
	bottom:75px;
	right: 90px;
	width: 50px;
	height: 50px;
	line-height: 60px;
	background-color: #c6c7ca;
	border-radius: 100%;
	text-align: center;
	box-shadow: 1px 3px 6px rgb(0 0 0 / 8%);
}
.fix_mov a{
	font-size: 14px;
	font-weight: 300;
	position: relative;
	color:#000;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 100%;
	padding:10px 0 0 0;
}
.fix_mov a::before,
.fix_mov a::after {
	display: block;
	content: '';
	position: absolute;
	top:13px;
	width: 8px;
	height: 1px;
	background-color: #000;
}
.fix_mov a::before{
	transform: rotate(45deg);
	left:23px;
}
.fix_mov a::after {
	transform: rotate(-45deg);
	left:17px;
}
.fix_mov a:hover::before,
.fix_mov a:hover::after {
	top:10px;
	transition-duration: 0.25s;
}

/* 게시판 */
.innersearchpan *{float: unset !important;}
.innersearchpan,
.combolayer,
.innersearchpan .smcstylegroup{
	width:100% !important;
	display: flex;
	align-items: center;
    justify-content: center;
}
.contentpan{background-image: unset;}
.comboCate_st, .smcstylegroup input, .btn-flat.btn{
	margin:0 2.5px;
	padding:0 15px !important;
	height: 40px !important;
	line-height: 40px !important
}




/* 서브컨텐츠 */
table{width: 100%; margin:25px auto;}
table tr:first-child{border-top: 2px solid #999; transition-duration: 0.25s;}
table tr th, table tr td{padding:20px 10px; border: 1px solid #ddd; vertical-align: middle;}
table tr th{background-color: #f5f5f5; font-weight: 400;}
table th:hover, table td:hover{background-color: #f5f5f5;}


.contentpan{background-color: #f6f7f9; min-height: fit-content;}
#contents{width: 1400px; background-color: #fff; padding: 50px 100px 100px; margin-top:50px; border-radius: 20px 20px 0 0;}

.title_line{font-size: 24px; font-weight: 800; margin:25px 0 0 0; position: relative; padding-bottom: 10px; display: block;}
.title_line::before {display: block; position:absolute; content: ''; left:0; bottom:0; width: 50px; height: 4px; background-color: #27409a;}
.title_line::before{
	animation: titleLine 1.5s infinite;
    animation-direction: alternate;	
}
@keyframes titleLine {
	from {
		width:0;
	}
	to {
		width: 50px;
	}
}



.dept_width{display: flex;}
.dept_width img{display: block; width: 40%; height:fit-content; margin-left: 50px;}
.depth01_textimg h2,
.depth01_textimg h3,
.depth01_textimg h4,
.depth01_textimg h5,
.depth01_textimg h6{font-size: 24px; font-weight: 700; margin:5px 0 15px 0;}

.depth01_text h2,
.depth01_text h3,
.depth01_text h4,
.depth01_text h5,
.depth01_text h6{font-size: 24px; font-weight: 700; margin:25px 0 15px 0;}

.departlist li{background-color: #f9f9f9; border-radius: 20px; margin:25px 0; padding:50px 25px;}
.departlist li:first-child {margin-top: 0;}
.departlist li:last-child {margin-bottom: 0;}

.departlist li .title{font-size: 24px; font-weight: 700; margin:25px 0 15px 0;}

.contentBody {background-color: #fff; margin:0 auto; float: unset;}
.contentBody *{float: unset;}
.active, .dot:hover{border:unset;}

.ideology_chart dl{
	background-color: #f9f9f9; border-radius: 20px; padding:50px; margin:0 auto 25px;
}
.ideology_chart dl:last-child{margin-bottom: 0;}
.ideology_chart dl dt{font-size: 24px; font-weight: 800;}

.tabs_cm{padding:0 !important; display: flex; border-radius: 0 !important; margin:0 0 50px 0 !important;}
.tabs_cm > li{width: calc(100% / 4); padding:25px 0; cursor: pointer; text-align: center; background-color: #f9f9f9;}
.tabs_cm > li.on{font-weight: 700; background-color: #27409a; color:#fff;}

.dept_show{
	position: relative;
	padding-top:15px;
	font-size: 24px;
	margin:25px 0 10px;
}
.dept_show::before{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: #27409a;
	position: absolute;
	display: block;
	content: '';
	bottom:0;
	left:0;
	opacity: 0.5;	
	
	animation: deptShow 1.5s infinite;
    animation-direction: alternate;
}
@keyframes deptShow {
	from {
		left:-10px;
		opacity: 0.25;
	}
	to {
		left:50px;
		opacity: 0.1;
	}
}

.inno02 img{width: 100% !important; margin:5px 0 50px;}



/* 반응형 공통 */
@media screen and (max-width: 1599px){
	.row.headermenurow{padding:0;}
	.menu_right{padding: 0 50px 0 25px;}
	.dept_sec1 > div > ul li {
	    animation-name: none !important;
	}
	.dept_sec1 > div > ul li{background-position: bottom center !important;}
	.dept_sec1 > div > ul li a{padding:50px 0;}
	
	#contents{width: 100%;}
	
	
}

@media screen and (max-width: 1199px){
	.sub_visul_wrap{padding:75px 15px 0 !important; background-color: #f6f7f9;}
	.sub_visul{border-radius: 20px 20px 0 0;}
	#contents{border-radius: 0;}
	#mobile-menu-view.on{display: block;}
	footer.row{padding:25px 0;}
	.mobile_top_wrap .mobile_top{box-shadow: 1px 3px 6px rgb(0 0 0 / 8%);}
	.main_visul .main_visul_txt{width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); left:50%; top:50%; transform:translate(-50%, -50%); padding:0 5%; justify-content: center; align-items: center;}
	.main_visul .main_visul_txt *{text-align: center !important; color:#fff !important; font-size: 20px !important;}
	.main_visul .main_visul_txt span{display: none;}
	.main_visul .main_visul_txt h2{font-size: 30px !important;}
	.main_visul .main_visul_txt h2::before{background-color: #fff; font-size: 30px !important;}
	
	.dept_sec1 > div:nth-of-type(2) a img,
	.dept_shake{
		animation: usnet;	
	}
	.dept_sec1 > div:nth-of-type(2) > div{max-width: 100%;}
	.main_side > div{height: 50vh; border-radius: 0 0 20px 20px;}
	.main_visul{background-position: center;}
	.dept_sec2 ul li a h6{text-align: left;}
	.dept_sec2 ul li a span{margin:0 0 20px 0; display: block;}
	.dept_sec2 ul li a em{right: unset; left:40px;}
	
	.copyright > div {
	    display: flex;
	    flex-direction: column;
	    flex-wrap: wrap;
	    justify-content: center;
	}
	.dept_width{display: flex; flex-direction: column;}
	
	.dept_width img{margin: 50px 0 0 0; width: 100%;}
	.nbige03 img{width: 175px !important; margin:0 auto 25px;}
	.nbige03 ul{padding:0;}
}

@media screen and (max-width: 767px){
	.sub_visul{height: 25vh;}
	#contents{width: 100%; margin-top: 0; padding:50px 2.5% 100px; overflow: hidden; overflow-x: scroll;}
	.main_side{margin-top: 0;}
	.dept_contents{
		padding:50px 0 0 ;
	}
	.innersearchpan{
		padding:20px 10px;
		margin:0 0 25px 0;
	}
	.innersearchpan .smcstylegroup{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.smcstyleselect2, .comboCate_st, .smcstylegroup input, .btn-flat.btn{width: 100%;}
	.searchcombo3, .innersearchpan .smcstylegroup{margin:0;}
	.smcstyleselect2{margin:0 0 20px 0;
	}
	
	.main_visul .main_visul_txt br{
		display: none;
	}
	.dept_sec2 ul li{width: 100%;}
	.dept_sec1 > div:nth-of-type(2) > ul li a{padding:50px 10px;}
	.dept_sec2 ul li a{height: unset; line-height: unset;}
	
	.tabs_cm{flex-wrap: wrap;}
	.tabs_cm > li{width: calc(100% / 2) !important;}
	
}
@media screen and (max-width: 499x){
	
	
}






/* 0127 수정 */
@media screen and (max-width: 1199px){
	footer.row .container{width: 100%;}
	.fix_mov{right:5%; bottom:5%;}
}
@media screen and (max-width: 767px){
	.sub_content_form *{font-size: 16px;}
	.submenuTitleText{font-size: 30px; font-weight: 600;}
	
	.mobile_top_wrap .mobile_top .mobile_title a{font-size: 16px;}
	.mobile_top_wrap .mobile_top .mobile_title a img{width: 100px; margin-right: 10px;}
	
	.main_visul{height: 50vh;}
	.main_visul_side{height: 10vh; background-size: 50%;}
	.main_visul .main_visul_left p br,
	.main_visul .main_visul_left span{display: none;}
	.main_visul .main_visul_left p{font-size: 24px;}
	.main_visul .main_visul_left h6{font-size: 40px;}
	
	.modal-body > ul > li > a,
	.modal-body > ul > li ul li a{font-size: 16px;}
	
	.depth01_textimg h2, .depth01_textimg h3, .depth01_textimg h4, .depth01_textimg h5, .depth01_textimg h6,
	.depth01_text h2, .depth01_text h3, .depth01_text h4, .depth01_text h5, .depth01_text h6{
		font-size: 20px;
	}
}