@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");

.after:after{display:block;visibility:hidden;clear:both;content:""}

/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess*/

/* 초기화 */
a{color: inherit; text-decoration: none;}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	/*font-family:'Noto Sans KR';*/
	/*font-weight:400;*/
	/*font-size:16px;*/
}


input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}
.placeholdersjs { color: #aaa !important; }

.clearfix{clear: both;}


body{
	font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 16px;
	font-weight:400;
	line-height:1;
	overflow-x: hidden;
	overflow-y: auto;
	word-break: keep-all;
	position:relative;
}
html{
	width: 100%;
	height: 100%;
	overflow-x :  hidden;
}

/*  ---------------------  header S------------------------*/
#header{
	position: fixed;
	width:100%;
	top: 0;
	left: 0;
	right: 0;
	z-index:10;
	background:rgba(0,0,0,0.4);
}

#header .inner {
	width:1200px;
	margin:auto;
	padding:25px 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}

nav {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
.gnb_wrap {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
.gnb_wrap li a {
	display:inline-block;
	color:#fff;
	font-size:18px;
	margin-left:45px;
}

/*  ---------------------  footer S------------------------*/
#footer{
	width:100%;
	background:#dddddd;
}

#footer .inner {
	width:1200px;
	margin:auto;
	padding:25px 0;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-wrap:wrap;
}


/*  ---------------------  main S------------------------*/
.main_slide {
	position:relative;
}
.mainBox {
	width:1200px;
	color:#fff;
	margin:auto;
	padding-top:420px;
}
.slogan_txt {
	font-size:22px;
}
.mainTxt {
	font-size:45px;
}

.companyBanner_wrap{
	width:100%;
	height:750px;
	padding:90px 0;
	background:url('/images/banner01_bg.png') center center / cover no-repeat;
}

.companyBanner_wrap .inner {
	width:1200px;
	margin:auto;
	display:flex;
	justify-content:space-between;;
	align-items:center;
	flex-wrap:wrap;
}
.companyBanner_textBox {
	width:470px;
}
.title_box {
	padding-bottom:65px;
}
.title_box .txt {
	color:#666666;
	font-size:18px;
	font-weight:900;
	line-height:1;
}
.title_box .tit {
	color:#1f59ae;
	font-size:40px;
	font-weight:900;
}
.txt_Box .txt {
	font-size:18px;
	font-weight:400;
	line-height:30px;
	letter-spacing:-0.5px;
}
.companyBanner_list {
	width:730px;

	display:flex;
	justify-content:space-between;;
	align-items:center;
	flex-wrap:wrap;
}
.companyBanner_list > li {
	width:360px;
	height:466px;

	color:#fff;
	padding-left:32px;

	display:flex;
	align-items:center;
}
.companyBanner_list .textBox .txt{
	font-size:15px;
	font-weight:400;
	line-height:1;
}
.companyBanner_list .textBox .tit{
	font-size:25px;
	font-weight:500;
}
.companyBanner_list .box01 {
	background:url('/images/company_01.png') center center / cover no-repeat;
	cursor:pointer;
}
.companyBanner_list .box02 {
	position:relative;
	top:85px;
	background:url('/images/company_02.png') center center / cover no-repeat;
	cursor:pointer;
}

.techBanner_wrap{
	width:100%;
	height:335px;
	/*padding-top:95px;*/
	background:url('/images/mid_banner.png') center center / cover no-repeat;
}

.techBanner_wrap .inner {
	width:1200px;
	margin:auto;

	display:flex;
	align-items:center;
}
.techBanner_wrap .textBox {
	width:100%;
	color:#fff;
	text-align:center;
	padding-top:70px;
}
.techBanner_wrap .textBox .tit{
	color:#fff;
	font-size:37px;
	font-weight:500;
	padding-bottom:40px;
}
.techBanner_wrap .textBox .txt{
	color:#fff;
	font-size:18px;
	font-weight:400;
	padding-bottom:40px;
}
.techBanner_wrap .textBox .tech_link{
	color:#fff;
	font-size:18px;
	font-weight:400;
	border-bottom:1px solid #fff;
}



.productBanner_wrap{
	width:100%;
	height:670px;
	/*padding-top:95px;*/
	background:url('/images/banner02_bg.png') center center / cover no-repeat;
}
.productBanner_wrap .inner {
	width:1200px;
	margin:auto;
	padding:67px 0;
}
.productBanner_wrap .titBox {
	text-align:center;
}
.productBanner_wrap .titBox .tit {
	font-size:37px;
	font-weight:500;
	padding-bottom:25px;
}
.productBanner_wrap .titBox .txt {
	font-size:15px;
}

.productList_wrap {
	display:flex;
	justify-content:space-between;;
	align-items:center;
	flex-wrap:wrap;
	margin-top:55px;
}
.productList_wrap li{
	/*width:300px;*/
	width:280px;
	cursor:pointer;
}
.pro_bannerImg {
	/*width:300px;*/
	width:280px;
	margin-bottom:15px;
}
.pro_bannerImg img {
	width: 100%;;
}
.productList_wrap li .tit {
	width:100%;
	color:#fff;
	font-size:18px;
	position:relative;
}
.productList_wrap li .tit a {
	font-size:15px;
	font-weight:300;
	opacity:0.8;
	position:absolute;
	right:0;
}

.projectBanner_wrap{
	width:100%;
	padding:60px 0;
	background:#163661;
}
.projectBanner_wrap .inner {
	width:1200px;
	margin:auto;
	padding:67px 0;
}
.projectBanner_wrap .titBox {
	color:#fff;
	text-align:center;
}
.projectBanner_wrap .titBox .tit {
	font-size:37px;
	font-weight:500;
	padding-bottom:25px;
}
.projectBanner_wrap .titBox .txt {
	font-size:15px;
}

.projectList_wrap {
	display:flex;
	justify-content:space-between;;
	align-items:center;
	flex-wrap:wrap;
	margin-top:55px;
}
.projectList_wrap li {
	width:275px;
	background:#000;
}
.projectList_wrap li:nth-child(n+5) {
  margin-top:30px;
}
.projectList_wrap li a {
	width:100%;
}
.projectList_wrap li img {
	width:100%;
	transition:all 250ms ease;
}
.projectList_wrap li a:hover img {
	opacity:0.5;
}