/*reset*/
/*폰트링크*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
/*clearfix*/
.clearfix::after, .clearfix::before{
    display: block;
    content: "";
    clear: both;
}

/* 여백 초기화 */   
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,
legend,p,select,table,th,td,tr,textarea,button,form{margin:0;padding:0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #666;}
/*img*/
img{
    display: block;
}
/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family: 'NanumSquare','Noto Sans KR', sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em {font-style: normal;}

/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style:none;}
/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}
/* 테두리 초기화 */
img, fieldset{border:0 none;}

/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}

.swiper-button-next, .swiper-button-prev{margin-top:0;}

/*패럴럭스공통*/

.section{
box-sizing:border-box;
}

/*container,row*/
/* .container{
width: 1400px; margin: 0 auto;
} */
.row{
padding: 0 5%;
}


/*기존헤더*/
.header{margin-top: 0;}
/*footer*/
/* 푸터 */
#footer{background: #333;		}
.footer_01 {padding:20px 10px;}
.footer_01:after {content:''; display:block; clear:both;}
.footer_logo {float:none; padding:10px 0; text-align:center; }
.footer_logo img {height:40px; }
.footer_info {float:none; padding-left:0; text-align:center;}
.address ul {text-align:center;}
.address ul li {position: relative; display: inline-block; padding: 0 2px; font-size: 13px; color: #999; line-height: 20px; text-align: left;}

.sns_wrap {position:relative; margin-top:20px; text-align:center;color: #fff; }
.sns_icon a { font-size: 13px; color: #ccc; border-radius: 50%; font-weight:bold}
.sns_icon .icon-facebook2 {background: #3b5999;}
.sns_icon .icon-twitter2 {background: #00bbf5;}
.sns_icon .icon-instagram{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffce65+0,f91b62+51,6b36ee+100 */
background: #ffce65; /* Old browsers */
background: -moz-linear-gradient(45deg, #ffce65 0%, #f91b62 51%, #6b36ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ffce65 0%,#f91b62 51%,#6b36ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ffce65 0%,#f91b62 51%,#6b36ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffce65', endColorstr='#6b36ee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }
 
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1100px) {
.footer_01 {padding:20px 0; }
.footer_logo {float:left; padding:30px 0 0 0;}
.footer_info {float:left; text-align:left; padding-left:50px;}
.address ul {text-align:left;}

.sns_wrap {position:absolute; right:0; top:20px; margin-top:0;}
}

/* 푸터 navi_foot*/
.navi_foot {margin-bottom:20px;}
.navi_foot li {display:inline-block; position:relative; padding:0 10px;}
.navi_foot li:first-child {padding:0 10px 0 0;}
.navi_foot li:after {content:''; position:absolute; left:-4px; top:5px; width:1px; height:10px; background:#666;}
.navi_foot li:first-child:after {display:none;}
.navi_foot li a {display:block; color:#999; font-size:13px;}
.navi_foot li a:hover {text-decoration:underline;}

/*google recaptcha*/
.g-recaptcha{display: inline-block;}


/*미디어쿼리*/
@media(max-width:1290px) {
    .container {width: 100%;}
}

/*배너*/
.banner{position: relative; width: 100%; height: 100%; overflow: hidden;}
.banner img{width: 100%;}
.banner_txt{
position: absolute;
top: 34%;
left: 15%;
z-index:  99;
}
.banner_txt h1{
color: #fff;
font-size: 45px;
font-weight: 900;
margin-bottom: 30px;
}
.banner_txt p{
font-size: 24px;
font-weight: bold;
color: #fff;
margin-bottom: 50px;
}

		/*메인 배너 - 타이핑*/
.banner-txt {
	font-family: 'Montserrat', sans-serif;
	font-size: 55px;
	font-weight: 900;
	z-index: 1;
	white-space: nowrap;
	position:absolute;
	top:34%;
	left:6%;
	margin-left:auto;
	width:48%;
	height:420px;
	color: #fff;
	transition:0.3s;
}


.typing {
	display: inline-block;
	border-right: 6px solid #4271d9;
}
.typing4 {
/* 	margin-top:50px; */
}
.typing-active {
	animation-name: cursor; 
	animation-duration: 0.6s; 
	animation-iteration-count: infinite; 
}
@keyframes cursor { 
	0% {border-right: 6px solid #fff; } 
	50% {border-right: 6px solid #4271d9; } 
	100% {border-right: 6px solid #fff; } 
}
		a.banner_btn{
		/* background: #00a0e9; */
		background-color: rgba(0,160,233,0.89);
		color: #fff;
		font-size: 22px;
		font-weight: bold;
		/* padding: 20px 100px; */
		width:300px;
		height:60px;
		text-align:center;
		box-sizing:border-box;
		line-height:60px;
		border-radius:20px;
		left:0;
/* 		bottom:0; */
		position: absolute;
		font-family: "LotteMartDream", "Malgun Gothic", sans-serif;
		float:left;
		}

		a.banner_btn.baner_btn_right{margin-left:305px;/* bottom:33px; */}


		a.banner_btn:hover{
		background: #1d2088;		
		transition:0.3s;
		font-family: "LotteMartDream", "Malgun Gothic", sans-serif;
		}


		/*공통*/
		.main_tit{
		font-family: 'Montserrat', sans-serif;
		font-size: 50px;
		font-weight: 900;
		position: relative;
		padding-top: 5px;
		padding-bottom: 20px;
			
		}
		.main_tit::before{
		position: absolute;
		content:"";
		width: 50px;
		height: 5px;
		background: #0068b7;
		top:0px
		}


		/*퀵메뉴*/
		.quickmenu{
		overflow: hidden;
		margin: 40px 0;
		}
		.quickmenu .quick{
		width: 19%;
		margin:0.5%;
		float:left;
		box-sizing:border-box;
		border: 1px solid #ccc;
		padding: 50px 10px;
		transition:0.3s ease-in-out;
		}
		.quickmenu .quick:hover{
		margin-top: -20px;
		transition:0.3s ease-in-out;
		box-shadow: 2px 2px 2px #ddd;
		}
		.quick_tit{
		text-align: center;
		margin-bottom: 30px;
		}
		.quick_tit span{
		position: relative;
		font-size: 20px;
		font-weight: bold;
		}
		.quick_tit span::before{
		position:absolute;
		content:"";
		width: 100%;
		height: 12px;
		background: #b7c5fd;
		top: 16px;
		z-index: -1;
		}
		.quick_img{
		width: 200px;
		margin: 0 auto 20px auto;
		}
		.quick_txt{
		font-size: 14px;
		text-align: center;
		font-weight: 500;
		}
		.main_txt{
		font-size: 28px;
		font-weight: 900;
		text-align: left;
		}
		.main_txt:last-child{
		margin-bottom: 40px;		
		}
		/*프로젝트*/
		.project{
		overflow: hidden;
		margin: 40px 0;
		}
		.project .p_box{
		float: left;
		width: 33.3%;
		height: 300px;
		border: 1px solid #ccc;
		box-sizing:border-box;
		position: relative;
		overflow: hidden;
		}
		.project .p_box img{
		width: 100%;
		height: 100%;
		}
		.project .p_box span{
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		background: #000;
		opacity: 0;
		top: 300px;
		left:0;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		}
		.project .p_box:hover span{
		display: block;
		opacity: 0.7;
		top:0;
		transition: 0.5s;
		}
		.project .p_box span p{
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%)
		}
		.project .p_box span p:last-child{
		top: 65%;
		}
		.p_more{
		display:flex;
		align-items:center;
		justify-content:center;
		margin: 40px auto;
		}
		.p_more a{
		padding: 20px 100px;
		background: #0068b7;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		}

		/*컨택트*/
		#section5{
		background: #0068bc;
		box-sizing:border-box;

		}
		#section5 .main_tit{
		color: #fff;
		}
		#section5 .main_tit::before{
		background: #fff;	
		}
		#section5 .main_txt{
		color: #fff;
		}
		.c_box{
		overflow: hidden;
		margin-bottom: 0px;
		}
		.c_box .con_left{
		width: 40%;
		height: 470px;
		background: #fff;
		float: left;	
		margin-top: 15px;
		}
		.c_box .con_right{
		width: 60%;
		float: left;
		padding: 0px 40px;
		box-sizing:border-box;
		}
		.con_right>p{
		border-bottom: 1px solid #fff;
		padding: 10px;
		font-size: 17px;
		font-weight: 700;
		position: relative;
		}
		.con_right>p.contents label{
		top: 10%;
		}
		.con_right>p label{
		color: #fff;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		}
		.con_right>p label span{
		color: lightskyblue;
		}
		.con_right>p input{
		box-sizing:border-box;
		padding: 10px 10px 10px 70px;
		width: 100%;
		border:none;
	  outline: none;
		font-size: 17px;
		background: none;
		color: #fff;
		}
		.con_right>p textarea{
		/* height: 270px; */
		height: 230px;
		box-sizing:border-box;
		padding: 10px 10px 10px 70px;
		width: 100%;
		border:none;
	    outline: none;
		font-size: 17px;
		background: none;
		color: #fff;
		padding-top:3px;
		}
		#section5 .p_more a{
		background: #fff;
		color: #0068b7;
		}
		input::placeholder{color: #dbdbdb;}
		textarea::placeholder{color: #dbdbdb;}

/*컨텐츠미디어쿼리*/

.top_logo > a > img{
	height:50px;
}

@media(max-width:1400px){
.main_tit{font-size: 35px;}
.main_txt{font-size: 20px;}
}
@media(max-width:1280px){
.quick_tit span{font-size: 16px;}
.quick_img{width: 100%; }
.quick_img img{width: 70%; margin: 0 auto;}
}
@media(max-width:1100px){
	.footer_logo{display:flex; justify-content:center;}
}
@media(max-width:960px){
body{overflow-x: hidden !important;}
#section1{height: 500px !important;}
#section1 .fp-tableCell{height: 100% !important;}
#section1 .banner1{background-size: cover !important;}
.banner-txt{font-size: 25px; height: auto; top:42%; left:15%;}
a.banner_btn{
	/* padding: 10px 50px;  */
	padding-left:0;
	font-size: 17px; bottom: -65px;
	width:230px;
	height:35px;
	line-height:35px;
}
.typing-list.typing-list1 li:last-child{height:10px;}
a.banner_btn.baner_btn_right{margin-left:0; bottom:-105px;}
#section5{padding: 40px 0;}
#section4{padding: 0px 0;}
.main_tit{font-size: 28px;}
.main_txt{font-size: 17px;}
.quickmenu .quick {
    width: 49%;
    margin: 0.5%;
    float: left;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 50px 10px;
    transition: 0.3s ease-in-out;
}
.quickmenu .last{display: none;}
.quickmenu .quick:hover{
margin-top: 0.5%;
box-shadow: 0px 0px 0px ;
}
}
@media(max-width:768px){
.con_right>p textarea{height: 170px; padding-top: 2px; font-size: 12px;}
.c_box .con_left{height: 380px;}
.address ul li{font-size:12px;}
.navi_foot li a{font-size:12px;}

}
@media(max-width:600px){
.c_box .con_left{width: 100%; float: none;}
.c_box .con_right{width: 100%; float: none; padding:  0 10px;}
.con_right>p input{font-size: 12px;}
.con_right>p{font-size: 15px;}
.p_more a{padding: 10px 50px;}
.banner-txt{left:15%; top:42%;}
.footer_01{padding:20px 0;}
}
@media(max-width:480px){
	.main_tit{font-size: 24px;}
	.main_txt{font-size: 12px;}
	.quickmenu .quick{
	width: 100%;
	margin: 8px 0;
	float: none;
	padding: 30px 10px;
	}
	.quickmenu .last{display: block;}
	.quick_img{width: 60%;}
	a.banner_btn{
		font-size:13px;
		width:170px;
		height:33px;
		line-height:33px;
	}
	.banner-txt{font-size:21px;}
	a.banner_btn.baner_btn_right{bottom:-102px;  font-size:13px;}
	.banner-txt{left:15%; top:44%;}
	.swiper-button-next, .swiper-button-prev{margin-top:20px;}
}

/*메인노트북사이즈*/
@media (min-width:1440px) and (max-width:1550px){
.main_tit{font-size: 40px;}
.main_txt{font-size: 22px;}
.quick_img{width: 150px;}
.quick_txt{font-size: 11px;}
.c_box .con_left{height: 340px;}
.con_right>p textarea{height: 170px;}
.con_right>p{padding: 5px;}
.p_more a{padding: 10px 80px;}	
}

.con_right > .contact_info{
	border-bottom:none;
	font-size:16px;
	font-weight:400;
	padding:3px 0;
	color:#fefefe;
	text-align:right;
}


@media(max-width:900px){
.con_right > .contact_info{font-size:13px;}
}

@media(max-width:600px){
.con_right > .contact_info{font-size:12px;}
.p_more{margin:30px auto;}
#section5{padding-bottom:0px;}
}

@media(max-width:400px){
.row{padding:0 2%;}
}