@charset "utf-8";

.nav_wrap_Right
{
	padding-right:30px;
}
/* common */
.pcbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}
.section{width:100%;overflow:hidden;box-sizing:border-box;}
#fp-nav{opacity:0;}

#ie_alert{display:none;}
.ie #ie_alert{
	display:flex;align-items:center;justify-content:center;box-sizing:border-box;
	position:fixed;z-index:5000;
	width:100%;height:80px;
	padding:0 10%;
	background:#fff;text-align:center;line-height:130%;font-size:14px;color:#222;word-break:keep-all;
}
.ie #ie_alert img{margin-right:5px;}
.ie #ie_alert .btn_close{
	width:30px;height:30px;
	position:absolute;right:3%;top:50%;margin:-7px 14px 0 0;
	transform:rotate(45deg) translateY(-50%);
}
.ie #ie_alert .btn_close:before{
	display:block;content:"";
	width:100%;height:2px;
	background:#ccc;
	position:absolute;left:0;top:50%;margin-top:-1px;
}
.ie #ie_alert .btn_close:after{
	display:block;content:"";
	width:2px;height:100%;
	background:#ccc;
	position:absolute;left:50%;top:0%;margin-left:-1px;
}

#video_popup .close{width: 60px;height: 60px;}
#video_popup .close:before,#video_popup .close:after{height: 25px;top: 18px;}
#video_popup .inner{margin-top: 70px;}
#video_popup .thumbnail .play{width: 70px;}
#video_popup .thumbnail .play svg{width:100%; height: auto;}



/* header */
#header{position:fixed;left:0;top:0;z-index:1000;width:100%;}
.head{
	display:flex;align-items:center;justify-content:space-between;
	box-sizing:border-box;position:relative;z-index:2000;
	width:100%;height:65px;
	padding:0 3%;
	border-bottom:1px solid rgba(255,255,255,0.25);
}
.head h1{position:relative;z-index:2000;}
.head h1 a{
	display:block;
	width:120px;height:36px;
	background:url(../images/common/logo1.png) no-repeat;background-size:cover;
	text-indent:-9999px;
}


.head .nav_wrap{
	position:relative;
	box-sizing:border-box;
	width:calc(100% - 120px - 70px);height:100%;	
}
.head .nav_wrap .nav{display:none;}
.head .nav_wrap .etc{position:relative;z-index:2000;}
.head .nav_wrap .etc{position:absolute;right:5%;top:20px;}
.head .nav_wrap .etc>li{display:inline-block;}
.head .nav_wrap .etc>li>a{display:block;width:26px;height:26px;}
.head .nav_wrap .etc>li.language{}
.head .nav_wrap .etc>li.language>a{}
.head .nav_wrap .etc>li.language>ul{
	display:none;
	position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:10px;
	border:1px solid rgba(255,255,255,0.25);
	background:rgba(0,0,0,0.8);
}
.head .nav_wrap .etc>li.language>ul>li{border-bottom:1px solid rgba(255,255,255,0.25);}
.head .nav_wrap .etc>li.language>ul>li:last-child{border-bottom:0;}
.head .nav_wrap .etc>li.language>ul>li>a{
	display:block;
	width:88px;height:38px;
	font-family:"Montserrat";font-size:12px;color:rgba(255,255,255,0.5);font-weight:600;line-height:38px;text-align:center;
}
.head .nav_wrap .etc>li.language>ul>li>a:hover{color:#50ccff;}

.head .nav_wrap .language{
	position:absolute;right:2%;top:20px;z-index:3000;
	display:flex;
}
.head .nav_wrap .language li{margin-left:10px;text-align:center;}
.head .nav_wrap .language li a{color:#fff;font-size:11px;}
.head .nav_wrap .language li a>div{opacity:0;}
.head .nav_wrap .language li:hover a>div{opacity:1;}
.head .nav_wrap .language li img{height:16px;}

.head .btn_menuwrap{
	display:flex;align-items:center;justify-content:flex-end;
	height:100%;padding:0 0 0 1%;
	cursor:pointer;
	border-left:1px solid rgba(255,255,255,0.25);
}
.head .btn_menuwrap .btn_menu{display:inline-flex;align-items:center;cursor:pointer;}
.head .btn_menuwrap .btn_menu .txt{display:none;font-family:"Roboto";font-size:13px;color:#fff;font-weight:500;}
.head .btn_menuwrap .btn_menu .hamburger{	
	position:relative;z-index:1100;
	width:27px;height:20px;
	margin-left:13px;
}
.head .btn_menuwrap .btn_menu .hamburger>div{
	width:100%;height:2px;
	margin-bottom:7px;
	background:#fff;
}



#header.on{}
#header.on .head{	border-bottom:1px solid rgba(0,0,0,0.25);}
#header.on .head h1 a{background:url(../images/common/logo2.png) no-repeat;background-size:cover;}
#header.on .head .nav_wrap{}
#header.on .head .nav_wrap .nav>li>a{color:#111;}
#header.on .head .nav_wrap .etc>li.language svg line,
#header.on .head .nav_wrap .etc>li.language svg circle,
#header.on .head .nav_wrap .etc>li.language svg ellipse{stroke:#111;}
#header.on .head .btn_menuwrap{border-left:1px solid rgba(0,0,0,0.25);}
#header.on .head .btn_menuwrap .btn_menu .txt{color:#111;}
#header.on .head .btn_menuwrap .btn_menu .hamburger>div{background:#111;}

#header.bl{}
#header.bl .head{background:#fff;border-bottom:1px solid rgba(0,0,0,0.25);}
#header.bl .head h1 a{background:url(../images/common/logo2.png) no-repeat;background-size:cover;}
#header.bl .head .nav_wrap .nav>li>a{color:#111;}
#header.bl .head .nav_wrap .etc>li.language svg line,
#header.bl .head .nav_wrap .etc>li.language svg circle,
#header.bl .head .nav_wrap .etc>li.language svg ellipse{stroke:#111;}
#header.bl .head .btn_menuwrap{border-left:1px solid rgba(0,0,0,0.25);}
#header.bl .head .btn_menuwrap .btn_menu .txt{color:#111;}
#header.bl .head .btn_menuwrap .btn_menu .hamburger>div{background:#111;}

#header.all .head{position:relative;z-index:2000;border-bottom:1px solid rgba(0,0,0,0.25);}
#header.all .head h1 a{background:url(../images/common/logo2.png) no-repeat;background-size:cover;}
#header.all .head .btn_menuwrap{position:relative;z-index:2000;border-left:1px solid #ddd;}
#header.all .head .btn_menuwrap .btn_menu .txt{color:#111;}
#header.all .head .btn_menuwrap .btn_menu .hamburger>div{background:#111;}
#header.all .head .nav_wrap .etc>li.language svg line,
#header.all .head .nav_wrap .etc>li.language svg circle,
#header.all .head .nav_wrap .etc>li.language svg ellipse{stroke:#111;}


.pc_subnav{display:none !important}
/* sitemap */
.pc_sitemap{display:none !important}
.m_sitemap{
	position:absolute;left:0;top:-100vh;z-index:1000;
	width:100%;height:100vh;
	background:#f2f2f2;
	background-size:cover;background-attachment:fixed;
	transition:all 1s cubic-bezier(.67,.34,.24,1);
}
.sitemap{
	box-sizing:border-box;
	width:100%;height:100%;
	margin:65px 0 0;border-top:1px solid #ddd;
}
.sitemap:before{
	display:block;content:"";
	width:1px;height:calc(100% - 65px);
	background:#ddd;
	position:absolute;left:50%;top:65px;
}
.sitemap .menuwrap{padding:0;}
.sitemap .menuwrap h2{
	box-sizing:border-box;
	width:50%;
	padding:20px;
	font-size:22px;color:#111;font-weight:500;text-align:center;
	border-bottom:1px solid #ddd;
}
.sitemap .menuwrap.on h2{background:#045c9e;color:#fff;}
.sitemap .menuwrap .sub{
	display:none;
	position:absolute;left:50%;top:90px;width:50%;box-sizing:border-box;padding:0 5%;word-break:keep-all;
}
.sitemap .menuwrap.on .sub{display:block;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(1){width:100%;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(2){margin-top:20px;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(2).btn_st1{display:inline-block;margin-top:20px;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(2).btn_st1 .btn_line1{stroke:#045c9e;transform-origin:left;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(2).btn_st1:hover .btn_line1{animation:btn2 1s linear;animation-fill-mode:forwards;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(2).btn_st1 text{fill:#045c9e;transition:all 0.4s linear;}
.sitemap .menuwrap .sub>div.btns>a:nth-child(2).btn_st1:hover text{fill:#045c9e;}
.sitemap .menuwrap .sub .dep2{box-sizing:border-box;width:100%;margin-bottom:20px;}
.sitemap .menuwrap .sub .dep2 h3{font-size:19px;color:#111;font-weight:500;}
.sitemap .menuwrap .sub .dep2 h3 a{font-size:19px;color:#111;font-weight:500;}
.sitemap .menuwrap .sub .dep2 ul{margin-top:5px;}
.sitemap .menuwrap .sub .dep2 ul.cc2{column-count:2;}
.sitemap .menuwrap .sub .dep2 ul.cc3{column-count:2;}
.sitemap .menuwrap .sub .dep2 ul li{margin-bottom:5px;}
.sitemap .menuwrap .sub .dep2 ul li a{font-size:14px;color:rgba(0,0,0,0.6);font-weight:400;}
.sitemap .menuwrap .sub .dep2 ul li a:hover{border-bottom:1px solid rgba(0,0,0,0.6)}
.sitemap .menuwrap .sub a{font-size:14px;color:rgba(0,0,0,0.6);font-weight:400;}



/* visual */
#section1{}
.visual{position:relative;width:100%;height:100%;box-sizing:border-box;}
.visual .swiper-wrapper,
.visual .swiper-container{width:100%;height:100%;}
.visual .swiper-slide{position:relative;overflow:hidden;}
.visual .swiper-slide .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;transform:scale(1.0);
}
.visual .swiper-slide-active .bg{transform:scale(1);}
.visual .txtarea{
	position:absolute;left:5%;top:50%;z-index:100;
	transform:translateY(-50%);	
	width:90%;text-align:center;word-break:keep-all;
}
.visual .txtarea .tit{overflow:hidden;font-family:"Roboto";font-size:28px;color:#fff;font-weight:bold;}
.visual .txtarea .tit span{display:block;transform:translateY(100px);opacity:0;}
.visual .txtarea p{font-size:12px;color:#fff;line-height:170%;margin-top:30px;opacity:0;transform:translateY(40px);}
.visual .txtarea a{opacity:0;transform:translateY(20px);}
.btn_st1{display:inline-block;margin-top:45px;}
.btn_st1 .btn_line1{stroke:#fff;transform-origin:left;}
.btn_st1:hover .btn_line1{animation:btn1 2s linear;animation-fill-mode:forwards;}
.btn_st1 text{transition:all 0.4s linear;}
.btn_st1:hover text{fill:#fff;}

.btn_st2{display:inline-block;margin-top:20px;}
.btn_st2 .btn_line1{stroke:#045c9e;transform-origin:left;}
.btn_st2:hover .btn_line1{animation:btn2 2s linear;animation-fill-mode:forwards;}
.btn_st2 text{transition:all 0.4s linear;}
.btn_st2:hover text{fill:#045c9e;}

@keyframes btn1{
	0%{stroke:#fff;stroke-dashoffset:1600; stroke-dasharray:1600;}
	100%{stroke:#fff;stroke-dashoffset:0;}
}
@keyframes btn2{
	0%{stroke:#045c9e;stroke-dashoffset:1600; stroke-dasharray:1600;}
	100%{stroke:#045c9e;stroke-dashoffset:0;}
}


.in-view .visual .txtarea .tit span{transform:translateY(0);opacity:1;transition:all 1s 0.2s;}
.in-view .visual .txtarea p{transform:translateY(0);opacity:1;transition:all 1s 0.4s ;}
.in-view .visual .txtarea a{transform:translateY(0);opacity:1;transition:all 1s 0.6s ;}




.visual .ctr{
	display:flex;justify-content:center;align-items:center;
	position:absolute;left:0;bottom:50px;z-index:100;
	width:100%;
	text-align:center;
}
.visual .ctr .vprev{
	display:inline-block;cursor:pointer;
	width:8px;height:8px;
	border-left:1px solid #fff;border-bottom:1px solid #fff;
	background:0;margin:0;outline:0;transform: rotate(45deg) skew(-5deg , -5deg);
}
.visual .ctr .vnext{
	display:inline-block;cursor:pointer;
	width:8px;height:8px;
	border-right:1px solid #fff;border-bottom:1px solid #fff;
	background:0;margin:0;outline:0;transform: rotate(-45deg) skew(5deg , 5deg);
}
.visual .swiper-pagination{position:relative;margin:0 40px;text-align:center;}
.visual .swiper-pagination span{
	display:inline-block;
	position:relative;
	width:11px;height:11px;
	margin:0 7px 0;
	border:1px solid #fff;background:0;	border-radius:50%;
	opacity:1;
}
.visual .swiper-pagination span:first-child:before{display:none;}
.visual .swiper-pagination .swiper-pagination-bullet-active{width:30px;background:#fff;border-radius:10px;}




#sec_intro .scroll {
	display: inline-flex;
	justify-content: space-between;
	width: 130px;
	position: absolute;
	right: -30px;
	bottom: 100px;
	z-index: 100;
	transform: rotate(90deg);
	cursor: pointer;
}

	#sec_intro .scroll .txt {
		font-family: "Montserrat";
		font-size: 13px;
		color: #fff;
		font-weight: 500;
	}

	#sec_intro .scroll .arr {
		position: relative;
		width: 70px;
		margin: 5px 0 0 0;
		border-top: 1px solid #fff;
		animation: scroll 1s infinite alternate;
	}

		#sec_intro .scroll .arr:after {
			display: block;
			content: "";
			width: 6px;
			height: 1px;
			border-bottom: 1px solid #fff;
			transform: rotate(-45deg);
			position: absolute;
			right: 0;
			top: 0;
		}

@keyframes scroll {
	0% {
		transform: translateX(10px);
	}

	100% {
		transform: translateX(0px);
	}
}




/* sec_tech */
#sec_tech {
	background: url(../images/main/main_tech.jpg) no-repeat center;
	background-size: cover;
	text-align: center;
}

	#sec_tech h2 {
		margin-top: 85px;
		font-family: "Roboto";
		font-size: 36px;
		color: #fff;
		font-weight: 400;
	}

		#sec_tech h2 span {
			display: inline-block;
			line-height: 100%;
			border-bottom: 1px solid #fff;
		}

	#sec_tech h3 {
		margin: 60px 0 15px;
		font-family: "Roboto";
		font-size: 22px;
		color: #fff;
		font-weight: 600;
	}

	#sec_tech p {
		font-size: 17px;
		color: rgba(255,255,255,1);
	}

	#sec_tech .business_tabcon {
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 305px;
		margin: 60px auto 80px;
	}

		#sec_tech .business_tabcon:before {
			display: block;
			content: "";
			width: 100%;
			height: 2px;
			background: rgba(255,255,255,0.6);
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -1px;
		}

		#sec_tech .business_tabcon:after {
		}

		#sec_tech .business_tabcon .tabcon {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			margin: 0 auto;
			padding: 0 5%;
		}

		#sec_tech .business_tabcon .business {
			position: relative;
			width: 100%;
			height: 305px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding: 0 30px;
			box-sizing: border-box;
		}

			#sec_tech .business_tabcon .business .swiper-slide {
				width: calc(20% - 28.8px);
				outline: 0;
			}

			#sec_tech .business_tabcon .business > div + div {
				margin-left: 36px;
			}

		#sec_tech .business_tabcon .swiper-button-prev {
			display: inline-block;
			cursor: pointer;
			width: 22px;
			height: 22px;
			border-left: 1px solid #fff;
			border-bottom: 1px solid #fff;
			background: 0;
			outline: 0;
			transform: rotate(45deg);
			left: -110px;
			top: 50%;
			margin: -11px 0 0 0;
			display: none;
		}

		#sec_tech .business_tabcon .swiper-button-next {
			display: inline-block;
			cursor: pointer;
			width: 22px;
			height: 22px;
			border-left: 1px solid #fff;
			border-bottom: 1px solid #fff;
			background: 0;
			outline: 0;
			transform: rotate(-135deg);
			right: -110px;
			top: 50%;
			margin: -11px 0 0 0;
		}

		#sec_tech .business_tabcon .business > div a {
			outline: 0;
			display: block;
			width: 100%;
			height: 100%;
		}

		#sec_tech .business_tabcon .swiper-slide .bg svg {
			width: 100%;
			height: 100%;
		}

		#sec_tech .business_tabcon .boxwrap {
			position: relative;
			width: 100%;
			height: 303px;
			margin: 0 auto;
			perspective: 1000px;
		}

			#sec_tech .business_tabcon .boxwrap:before {
				display: block;
				content: "";
				width: 9px;
				height: 9px;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}

			#sec_tech .business_tabcon .boxwrap .bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				/*background:url(/images/main/sec2_guide_bg.png) no-repeat;*/
				transform: rotate(0);
				transition: all 3s ease-out;
			}

		#sec_tech .business_tabcon .swiper-slide:hover .boxwrap .bg svg {
			filter: drop-shadow(10px -3px 12px rgba(255,255,255,0.8) inset);
		}

			#sec_tech .business_tabcon .swiper-slide:hover .boxwrap .bg svg polygon {
				stroke: #4ec3f4;
				stroke-opacity: 1;
			}

		#sec_tech .business_tabcon .swiper-slide:hover .boxwrap .bg {
			animation: business_ani 5s linear infinite;
		}

@keyframes business_ani {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes business_ani2 {
	0% {
		transform: rotate(360deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

#sec_tech .business_tabcon .boxwrap .ico {
	box-sizing: border-box;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 35px;
}

	#sec_tech .business_tabcon .boxwrap .ico img {
		margin-top: 70px;
	}

#sec_tech .business_tabcon .boxwrap .sbj {
	box-sizing: border-box;
	height: 50%;
	padding-top: 25px;
	font-size: 26px;
	color: #fff;
	font-weight: 500;
}

#sec_tech .business_tabcon .swiper-slide:hover .boxwrap .sbj {
	color: #4ec3f4;
}

#sec_tech .slick-list {
	width: 100%;
}

#sec_tech .slick-arrow {
	display: none !important;
}

@media(max-width:1600px) {
	#sec_tech .business_tabcon {
		height: 240px;
	}

		#sec_tech .business_tabcon .business {
		}

		#sec_tech .business_tabcon .boxwrap {
			width: 240px;
			height: 240px;
		}

			#sec_tech .business_tabcon .boxwrap .bg svg {
				width: 100%;
				height: 100%;
			}
}



#sec_tech .business_tabs {
	padding: 0 5%;
}

	#sec_tech .business_tabs > div {
		display: none;
	}

		#sec_tech .business_tabs > div:first-child {
			display: block;
		}

	#sec_tech .business_tabs ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		#sec_tech .business_tabs ul li {
			overflow: hidden;
			width: 15.5%;
		}

		#sec_tech .business_tabs ul.list1 li {
			width: 100%;
		}

		#sec_tech .business_tabs ul.list2 li {
			width: 49%;
		}

		#sec_tech .business_tabs ul.list3 li {
			width: 32.5%;
		}

		#sec_tech .business_tabs ul.list4 li {
			width: 24%;
		}

		#sec_tech .business_tabs ul.list5 li {
			width: 19%;
		}

		#sec_tech .business_tabs ul.list6 li {
			width: 16%;
		}

		#sec_tech .business_tabs ul.list7 li {
			width: 13%;
		}

		#sec_tech .business_tabs ul li a {
			display: block;
			position: relative;
			padding-bottom: 20px;
			font-size: 26px;
			color: #fff;
			font-weight: 500;
			text-align: left;
		}

			#sec_tech .business_tabs ul li a:before {
				display: block;
				content: "";
				width: 100%;
				height: 3px;
				border-bottom: 3px solid rgba(255,255,255,0.3);
				position: absolute;
				left: 0;
				bottom: 0;
			}

			#sec_tech .business_tabs ul li a:after {
				display: block;
				content: "";
				width: 0;
				height: 3px;
				border-bottom: 3px solid rgba(255,255,255,1);
				position: absolute;
				left: 0;
				bottom: 0;
				transition: all 0.6s;
			}

		#sec_tech .business_tabs ul li.on a {
		}

		#sec_tech .business_tabs ul li:hover a:after {
			width: 100%;
		}





/* sec_promotion */
#sec_promotion {
	background: #f3f3f3;
	position: relative;
	;
	text-align: center;
	padding: 0 5% 0;
	z-index: 10;
}

	#sec_promotion:before {
		display: block;
		content: "";
		width: 1150px;
		height: 1150px;
		background: url(../images/main/sec3_bg.png) no-repeat;
		background-size: cover;
		position: absolute;
		right: -20%;
		top: -40%;
	}

	#sec_promotion:after {
		display: block;
		content: "";
		width: 1150px;
		height: 1150px;
		background: url(../images/main/sec3_bg.png) no-repeat;
		background-size: cover;
		position: absolute;
		left: -20%;
		bottom: -40%;
	}

	#sec_promotion h2 {
		margin-top: 85px;
		font-family: "Roboto";
		font-size: 36px;
		color: #131313;
		font-weight: 600;
	}

		#sec_promotion h2 span {
			display: inline-block;
			line-height: 100%;
			border-bottom: 1px solid #131313;
		}

	#sec_promotion .project {
		margin: 60px 0 0;
	}

		#sec_promotion .project .swiper-slide {
			perspective: 800px;
		}

			#sec_promotion .project .swiper-slide > a {
				position: relative;
				display: block;
				transition: all 0.4s;
			}

				#sec_promotion .project .swiper-slide > a:hover {
					transform: translateZ(0px);
					box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
				}

			#sec_promotion .project .swiper-slide .thumb {
				overflow: hidden;
				width: 100%;
			}

				#sec_promotion .project .swiper-slide .thumb img {
					width: 100%;
					transform: scale(1);
					transition: all 0.6s;
				}

			#sec_promotion .project .swiper-slide:hover .thumb img {
				transform: scale(1.05);
			}

			#sec_promotion .project .swiper-slide .info {
				box-sizing: border-box;
				height: 160px;
				background: #fff;
				padding: 30px 30px;
				text-align: left;
			}

				#sec_promotion .project .swiper-slide .info .sbj {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 라인수 */
					-webkit-box-orient: vertical;
					line-height: 1.5em;
					height: 3.0em;
					font-size: 19px;
					color: #444;
					font-weight: 500;
					word-break: keep-all;
					margin-bottom: 20px;
				}

				#sec_promotion .project .swiper-slide .info .more {
					font-family: "Montserrat";
					font-size: 11px;
					color: #444;
					font-weight: 600;
				}

			#sec_promotion .project .swiper-slide:hover .info .more {
				color: #03569f;
			}

				#sec_promotion .project .swiper-slide:hover .info .more .arr {
					display: inline-block;
					animation: arr_ani1 0.4s linear infinite alternate;
				}

			#sec_promotion .project .swiper-slide .thumb:before {
				display: block;
				content: "";
				width: 0;
				height: 2px;
				background: #03569f;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				transition: all 0.3s 0.3s ease-out;
			}

			#sec_promotion .project .swiper-slide .thumb:after {
				display: block;
				content: "";
				width: 0;
				height: 2px;
				background: #03569f;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 1;
				transition: all 0.3s 0.3s ease-out;
			}

			#sec_promotion .project .swiper-slide .info:before {
				display: block;
				content: "";
				width: 2px;
				height: 0;
				background: #03569f;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 1;
				transition: all 0.3s 0.0s ease-out;
			}

			#sec_promotion .project .swiper-slide .info:after {
				display: block;
				content: "";
				width: 2px;
				height: 0;
				background: #03569f;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				transition: all 0.3s ease-out;
			}

			#sec_promotion .project .swiper-slide:hover .thumb:before {
				width: 100%;
				transition: all 0.3s 0s ease-out;
			}

			#sec_promotion .project .swiper-slide:hover .thumb:after {
				width: 100%;
				transition: all 0.3s 0s ease-out;
			}

			#sec_promotion .project .swiper-slide:hover .info:before {
				height: 100%;
				transition: all 0.3s 0.3s ease-out;
			}

			#sec_promotion .project .swiper-slide:hover .info:after {
				height: 100%;
				transition: all 0.3s 0.3s ease-out;
			}


		#sec_promotion .project .ctr {
			margin-top: 35px;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

			#sec_promotion .project .ctr .swiper-scrollbar1 {
				width: calc(100% - 320px);
				height: 4px;
				box-shadow: 0 -1px 0 #c6c6c6 inset;
			}

				#sec_promotion .project .ctr .swiper-scrollbar1 .swiper-scrollbar-drag {
					background: #03569f;
					border-radius: 0;
				}

			#sec_promotion .project .ctr .paging {
				box-sizing: border-box;
				width: 320px;
			}

				#sec_promotion .project .ctr .paging > div {
					display: inline-block;
					position: relative;
					outline: 0;
					box-sizing: border-box;
					width: 60px;
					height: 60px;
					cursor: pointer;
				}

					#sec_promotion .project .ctr .paging > div .arr {
					}

					#sec_promotion .project .ctr .paging > div.project-prev .line_prev {
						transition: all 0.6s;
						transform-origin: center;
					}

					#sec_promotion .project .ctr .paging > div.project-next .line_next {
						transition: all 0.6s;
						transform-origin: center;
					}

					#sec_promotion .project .ctr .paging > div.project-prev:hover .line_prev {
						transform: rotateZ(-23deg);
					}

					#sec_promotion .project .ctr .paging > div.project-next:hover .line_next {
						transform: rotateZ(23deg);
					}


/* section3 */
#section3 {
	background: #f3f3f3;
	position: relative;
	z-index: 10;
}

#sec_busi .main_busi {
}

#ul_busi li.main_busi {
	width: 33.2%;
	height: 50%;
	float: left;
	cursor: pointer;
	position: relative;
}

#ul_busi li:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 5px rgba(0,0,0,0.5);
}

	#ul_busi li:hover img {
		transform: scale(1.05);
	}

#ul_busi li:before { /*위*/
	display: block;
	content: "";
	width: 0;
	height: 5px;
	background: #1f4f6f;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	transition: all 0.4s;
}

#ul_busi li:after { /*아래*/
	display: block;
	content: "";
	width: 0;
	height: 5px;
	background: #f47920;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 10;
	transition: all 0.4s;
}

#ul_busi li a:before { /*왼쪽*/
	display: block;
	content: "";
	width: 5px;
	height: 0;
	background: #1f4f6f;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	transition: all 0.4s 0.2s;
}

#ul_busi li a:after { /*오른쪽*/
	display: block;
	content: "";
	width: 5px;
	height: 0;
	background: #f47920;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 10;
	transition: all 0.4s 0.2s;
}

#ul_busi li.main_busi:hover:before {
	width: 100%;
}

#ul_busi li.main_busi:hover:after {
	width: 100%;
}

#ul_busi li.main_busi:hover a:before {
	height: 100%;
}

#ul_busi li.main_busi:hover a:after {
	height: 100%;
}


#ul_busi li:nth-child(1) {
	background: url(../images/contents/main_busi1.jpg) no-repeat center;
}

#ul_busi li:nth-child(2) {
	background: url(../images/contents/main_busi2.jpg) no-repeat center;
}

#ul_busi li:nth-child(3) {
	background: url(../images/contents/main_busi3.jpg) no-repeat center;
}

#ul_busi li:nth-child(4) {
	background: url(../images/contents/main_busi4.jpg) no-repeat center;
}

#ul_busi li:nth-child(5) {
	background: url(../images/contents/main_busi5.jpg) no-repeat center;
}

#ul_busi li:nth-child(6) {
	background: url(../images/contents/main_busi6.jpg) no-repeat center;
}

#ul_busi li dl {
	position: relative;
	top: calc(50% - 30px);
	height: 30px;
}

	#ul_busi li dl dt {
		text-align: center;
		color: #ffffff;
		font-size: 16pt;
	}

	#ul_busi li dl dd {
		text-align: center;
		color: #ffffff;
		font-size: 6pt;
	}
/* section4 */
#sec_promotion {
	overflow: hidden;
	text-align: center;
	position: relative;
}

	#sec_promotion p {
		color: #ffffff;
	}

	#sec_promotion .bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url(../images/main/main_pr.jpg) no-repeat center;
		background-size: cover;
		transform: scale(1.1);
		transition: all 0.5s 1s;
	}

	#sec_promotion.active .bg {
		transform: scale(1);
		transition: all 2s 1s;
	}

	#sec_promotion h2 {
		font-size: 36px;
		color: #fff;
		font-weight: 500;
	}

		#sec_promotion h2 span {
			display: inline-block;
			line-height: 100%;
			border-bottom: 1px solid #fff;
		}

	#sec_promotion .conwrap {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 100;
		width: 90%;
		height: calc(100% - 85px);
		margin: 85px 5% 0;
		/*border-left:1px solid rgba(255,255,255,0.25);border-right:1px solid rgba(255,255,255,0.25);*/
	}

		#sec_promotion .conwrap > div {
			width: 100%;
		}

		#sec_promotion .conwrap .textwrap {
			margin: 45px 0 70px;
		}

			#sec_promotion .conwrap .textwrap h3 {
				font-size: 49px;
				color: #fff;
				font-weight: 600;
			}

			#sec_promotion .conwrap .textwrap p {
				margin-top: 20px;
				font-size: 17px;
				color: rgba(255,255,255,1);
			}

		#sec_promotion .conwrap .listwrap {
			display: flex;
			justify-content: space-between;
		}

			#sec_promotion .conwrap .listwrap dl {
				width: 25%;
				cursor: pointer;
			}

				#sec_promotion .conwrap .listwrap dl dt {
					font-size: 23px;
					color: #fff;
					font-weight: 500;
				}

					#sec_promotion .conwrap .listwrap dl dt .ico {
						height: 53px;
						margin-bottom: 30px;
					}

					#sec_promotion .conwrap .listwrap dl dt .tit {
					}

				#sec_promotion .conwrap .listwrap dl dd {
					margin-top: 20px;
					font-size: 14px;
					color: rgba(255,255,255,1);
				}




		#sec_promotion .conwrap > div:before {
			display: block;
			content: "";
			width: 1px;
			height: 100%;
			background: rgba(255,255,255,0.5);
			position: absolute;
			left: 25%;
			top: 0;
			transform: scaleY(0);
			transform-origin: top;
		}

		#sec_promotion .conwrap > div:after {
			display: block;
			content: "";
			width: 2px;
			height: 100%;
			background: rgba(255,255,255,0.5);
			position: absolute;
			left: 50%;
			top: 0;
			transform: scaleY(0);
			transform-origin: bottom;
		}

		#sec_promotion .conwrap:before {
			display: block;
			content: "";
			width: 2px;
			height: 100%;
			background: rgba(255,255,255,0.5);
			position: absolute;
			left: 75%;
			top: 0;
			transform: scaleY(0);
			transform-origin: top;
		}


	#sec_promotion.active .conwrap:before {
		display:none;
		transform: scaleY(1);
		transition: all 1s 1s;
	}

	#sec_promotion.active .conwrap > div:before {
		display:none;
		transform: scaleY(1);
		transition: all 1s 1s;
	}

	#sec_promotion.active .conwrap > div:after {
		display:none;
		transform: scaleY(1);
		transition: all 1s 1s;
	}

	#sec_promotion.active .conwrap:before {
		display:none;
		transform: scaleY(1);
		transition: all 1s 1s;
	}

	#sec_promotion h3
	{
		display:none;
	}





@keyframes btndown {
	0% {
		stroke: #fff;
		stroke-dashoffset: 1600;
		stroke-dasharray: 1600;
	}

	100% {
		stroke: #fff;
		stroke-dashoffset: 0;
	}
}

@keyframes spin {
	0% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg);
	}
}



@keyframes updown1 {
	0% {
		cy: 35.571;
	}

	100% {
		cy: 32.571;
	}
}

@keyframes updown1_1 {
	0% {
	}

	100% {
	}
}





/* sec_recruit */
#sec_recruit {
	background: url(../images/main/main_rec.jpg) no-repeat center;
	background-size: cover;
	text-align: center;
}

	#sec_recruit h2 {
		font-size: 36px;
		color: #fff;
		font-weight: 400;
	}

		#sec_recruit h2 span {
			display: inline-block;
			line-height: 100%;
			border-bottom: 1px solid #fff;
		}

	#sec_recruit h3 {
		margin: 25px 0 15px;
		font-size: 35px;
		color: #fff;
		font-weight: 600;
	}

	#sec_recruit p {
		font-size: 17px;
		color: #fff;
	}

	#sec_recruit a {
		display: inline-block;
	}

	#sec_recruit .btn_top {
		display: inline-flex;
		justify-content: space-between;
		width: 110px;
		position: absolute;
		right: -20px;
		bottom: 100px;
		z-index: 100;
		transform: rotate(90deg);
		cursor: pointer;
	}

		#sec_recruit .btn_top .txt {
			font-family: "Montserrat";
			font-size: 13px;
			color: #fff;
			font-weight: 500;
		}

		#sec_recruit .btn_top .arr {
			position: relative;
			width: 70px;
			margin: 5px 0 0 0;
			border-top: 1px solid #fff;
			animation: scroll 1s infinite alternate;
		}

			#sec_recruit .btn_top .arr:after {
				display: block;
				content: "";
				width: 6px;
				height: 1px;
				border-top: 1px solid #fff;
				transform: rotate(45deg);
				position: absolute;
				left: 0;
				top: 0;
			}

	#sec_recruit a text {
		font-family: "Noto Sans KR","돋움",dotum,sans-serif;
	}

@keyframes scroll {
	0% {
		transform: translateX(10px);
	}

	100% {
		transform: translateX(0px);
	}
}




@keyframes scroll{
	0%{transform:translateX(10px);}
	100%{transform:translateX(0px);}
}


@keyframes business_ani{
	0%{transform:rotate(0);}
	100%{transform:rotate(360deg);}
}
@keyframes business_ani2{
	0%{transform:rotate(360deg);}
	100%{transform:rotate(0deg);}
}
@keyframes arr_ani1{
	0%{transform:translateX(0px);}
	100%{transform:translateX(3px);}
}



@keyframes updown1{
	0%{cy:35.571;}
	100%{cy:32.571;}
}
@keyframes updown1_1{
	0%{}
	100%{}
}


/* allmenu */
.pc_allmenu {
	display: none !important
}

.m_allmenu {
	position: absolute;
	left: 0;
	top: -100vh;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	background: #f2f2f2;
	background-size: cover;
	background-attachment: fixed;
	transition: all 1s cubic-bezier(.67,.34,.24,1);
}

.allmenu {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 85px 0 0;
	border-top: 1px solid #ddd;
}

	.allmenu:before {
		display: block;
		content: "";
		width: 1px;
		height: calc(100% - 85px);
		background: #ddd;
		position: absolute;
		left: 50%;
		top: 85px;
	}

	.allmenu .menuwrap {
		padding: 0;
	}

		.allmenu .menuwrap h2 {
			box-sizing: border-box;
			width: 50%;
			padding: 20px;
			font-size: 15px;
			color: #111;
			font-weight: 500;
			text-align: center;
			border-bottom: 1px solid #ddd;
		}

		.allmenu .menuwrap.on h2 {
			background: #ee7701;
			color: #fff;
		}

		.allmenu .menuwrap .sub {
			display: none;
			position: absolute;
			left: 50%;
			top: 110px;
			width: 50%;
			box-sizing: border-box;
			padding: 0 5%;
			word-break: keep-all;
		}

		.allmenu .menuwrap.on .sub {
			display: block;
		}

		.allmenu .menuwrap .sub > div.btns > a:nth-child(1) {
			width: 100%;
		}

		.allmenu .menuwrap .sub > div.btns > a:nth-child(2) {
			margin-top: 20px;
		}

			.allmenu .menuwrap .sub > div.btns > a:nth-child(2).btn_st1 {
				display: inline-block;
				margin-top: 20px;
			}

				.allmenu .menuwrap .sub > div.btns > a:nth-child(2).btn_st1 .btn_line1 {
					stroke: #045c9e;
					transform-origin: left;
				}

				.allmenu .menuwrap .sub > div.btns > a:nth-child(2).btn_st1:hover .btn_line1 {
					animation: btn2 1s linear;
					animation-fill-mode: forwards;
				}

				.allmenu .menuwrap .sub > div.btns > a:nth-child(2).btn_st1 text {
					fill: #045c9e;
					transition: all 0.4s linear;
				}

				.allmenu .menuwrap .sub > div.btns > a:nth-child(2).btn_st1:hover text {
					fill: #045c9e;
				}

		.allmenu .menuwrap .sub .dep2 {
			box-sizing: border-box;
			width: 100%;
			margin-bottom: 20px;
		}

			.allmenu .menuwrap .sub .dep2 h3 {
				font-size: 19px;
				color: #111;
				font-weight: 500;
			}

				.allmenu .menuwrap .sub .dep2 h3 a {
					font-size: 15px;
					color: #111;
					font-weight: 500;
				}

			.allmenu .menuwrap .sub .dep2 ul {
				margin-top: 5px;
			}

				.allmenu .menuwrap .sub .dep2 ul.cc2 {
					column-count: 2;
				}

				.allmenu .menuwrap .sub .dep2 ul.cc3 {
					column-count: 2;
				}

				.allmenu .menuwrap .sub .dep2 ul li {
					margin-bottom: 5px;
				}

					.allmenu .menuwrap .sub .dep2 ul li a {
						font-size: 16px;
						color: rgba(0,0,0,0.6);
						font-weight: 400;
					}

						.allmenu .menuwrap .sub .dep2 ul li a:hover {
							border-bottom: 1px solid rgba(0,0,0,0.6)
						}

		.allmenu .menuwrap .sub a {
			font-size: 16px;
			color: rgba(0,0,0,0.6);
			font-weight: 400;
		}






/* footer */
#footer{background:#242424;}
.foot{position:relative;;box-sizing:border-box;padding:150px 3% 60px;}
.foot h1{width:282px;margin:0 0 20px;}
.foot h1 img{height:40px;}
.foot .foot_info{box-sizing:border-box;}
.foot .foot_info ul{display:flex;}
.foot .foot_info ul li{position:relative;padding-right:10px;margin-right:11px;}
.foot .foot_info ul li:after{
	display:block;content:"";
	width:1px;height:11px;
	background:#454545;
	position:absolute;right:0;top:8px;
}
.foot .foot_info ul li:last-child:after{display:none;}
.foot .foot_info ul li a{font-size:14px;color:rgba(255,255,255,0.5);font-weight:300;}
.foot .foot_info address{margin:10px 0;font-size:14px;color:rgba(255,255,255,0.5);font-weight:300;}
.foot .foot_info address .nbsp{display:block;margin:0 10px;}
.foot .foot_info .copy{font-size:12px;color:rgba(255,255,255,0.4);font-weight:300;}

.foot .core_links{width:90%;position:absolute;left:5%;top:40px;}
.foot .core_links ul{display:flex;justify-content:space-between;flex-wrap:wrap;}
.foot .core_links ul li{width:24%;}
.foot .core_links ul li a{
	display:block;position:relative;
	box-sizing:border-box;
	padding:0 0 18px;
	text-align:center;
}
.foot .core_links ul li a:before{
	display:block;content:"";box-sizing:border-box;
	width:100%;height:4px;
	border:1px solid rgba(255,255,255,0.2);
	position:absolute;left:0;bottom:0;
}
.foot .core_links ul li a:after{
	display:block;content:"";box-sizing:border-box;
	width:0%;height:4px;
	background:#50ccff;
	position:absolute;left:50%;bottom:0;transition:all 0.4s;transform:translateX(-50%);transform-origin:center;
}
.foot .core_links ul li:hover a:after{width:100%;}
.foot .core_links ul li a .ico{box-sizing:border-box;height:27px;margin-bottom:10px;}
.foot .core_links ul li:nth-child(2) a .ico{padding-top:3px;}
.foot .core_links ul li:nth-child(4) a .ico{padding-top:3px;}
.foot .core_links ul li a .sbj{font-size:14px;color:rgba(255,255,255,0.8);font-weight:300;transition:all 0.4s;}


.foot .core_links ul li:hover a{}
.foot .core_links ul li:hover a .sbj{color:#50ccff;}

/*
.foot .core_links ul li:nth-child(1):hover .ico circle{animation:footer_hover_ani1 1s linear;animation-fill-mode:forwards;stroke:#50ccff}
.foot .core_links ul li:nth-child(1):hover .ico line{animation:footer_hover_ani1 1s linear;animation-fill-mode:forwards;stroke:#50ccff}
@keyframes footer_hover_ani1{
	0%{stroke-dashoffset:40;stroke-dasharray:40;}
	100%{stroke-dashoffset:0;stroke-dasharray:40;}
}
*/
.foot .core_links ul li:nth-child(1):hover .ico{
	transform-origin:center;
	animation:footer_hover_ani1-1 1s linear;animation-fill-mode:forwards;stroke:#50ccff
}
.foot .core_links ul li:nth-child(1):hover .ico circle{stroke:#50ccff}
.foot .core_links ul li:nth-child(1):hover .ico line{stroke:#50ccff}
@keyframes footer_hover_ani1-1{
	0%{transform:rotateZ(360deg);}
	100%{transform:rotateZ(0);}
}
.foot .core_links ul li + li:hover .ico *{stroke-dashoffset:200; stroke-dasharray:200;animation:footer_hover_ani2 1.8s linear;animation-fill-mode:forwards; stroke:#50ccff}
@keyframes footer_hover_ani2{
	0%{}
	100%{stroke-dashoffset:0;}
}




#bgblack{
	display:none;
	position:fixed;left:0;top:0;z-index:2000;
	width:100vw;height:100vh;
	background:rgba(0,0,0,0.7);
}
.btn_x{
	overflow:hidden;
	position:relative;
	width:60px;height:60px;
	cursor:pointer;
	float:right;margin-bottom:20px;
}
.btn_x>div:nth-child(1){
	box-sizing:border-box;
	position:absolute;left:0;top:50%;
	width:100%;height:28px;
	background:#1f4a97;
	transform:translateY(-50%);
}
.btn_x>div:nth-child(2){
	box-sizing:border-box;
	position:absolute;left:50%;top:0%;
	width:28px;height:100%;
	background:#1f4a97;
	transform:translateX(-50%);
}
.btn_x>div:nth-child(3){
	box-sizing:border-box;
	position:absolute;left:50%;top:0%;
	width:28px;height:100%;
	background:#1f4a97;
	transform:rotate(-45deg);
	margin-left:-14px;
}
.btn_x>div:nth-child(4){
	box-sizing:border-box;
	position:absolute;left:50%;top:0%;
	width:28px;height:100%;
	background:#1f4a97;
	transform:rotate(45deg);
	margin-left:-14px;
}
.pop_st1{
	display:none;
	position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3000;
	max-width:1320px;width:94%;
}
.pop_st1 .conwrap{
	box-sizing:border-box;
	background:#fff;
	overflow-y:auto;
	width:100%;height:500px;
	padding:0 5%;
}
.pop_st1 .conwrap>div{width:100%;padding:60px 0;}
.pop_st1 .conwrap>div:nth-child(1){display:none;}
.pop_st1 .conwrap .tit{font-family:"NanumSquare_acEB";color:#000;font-size:30px;text-align:center;margin-bottom:50px;}
.pop_st1 .conwrap .textwrap{width:100%;}
.pop_st1 .conwrap .textwrap textarea{
	box-sizing:border-box;
	width:100%;height:300px;
	background:#f8f8f8;
	font-size:14px;color:#555;word-break:keep-all;line-height:170%;
	border:0;outline:0;resize:none;
	padding:30px
}

@keyframes hover_ani1{
	0%{stroke-dashoffset:70;}
	100%{stroke-dashoffset:0;}
}
@keyframes hover_ani2{
	0%{stroke-dashoffset:100;stroke-dasharray:100;}
	100%{stroke-dashoffset:0;}
}
@keyframes hover_ani22{
	0%{stroke-dashoffset:-5;stroke-dasharray:-5;}
	100%{stroke-dashoffset:0;}
}
@keyframes hover_ani3{
	0%{stroke-dashoffset:80}
	100%{stroke-dashoffset:0;}
}
@keyframes hover_ani4{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}
@keyframes hover_ani5{
	0%{transform:rotateY(0deg);}
	100%{transform:rotateY(45deg);}
}

/* 메인 레이어 팝업 */
.main_layer_popup{width:96%!important;left:50%!important;top:50px!important;transform:translateX(-50%)}
.main_layer_popup .popupContent{height:100%!important}
.main_layer_popup img{width:100%}