@charset "utf-8";

/* common */
.main{position:relative;z-index:999;padding-top:200px;background: url(../images/main/img_bg.png) repeat;}
.main:after{content:"";position:absolute;top: -290px;z-index:-1;width:100%;height: 290px;background: url(../images/main/img_visualBg.png) 50% 60% no-repeat;background-size: cover;}
.open .main{z-index:1;}

#content article[class^="area_"]{position:relative; overflow:hidden; z-index:30;}
#content article[class^="area_"] h2{line-height:1; padding-top:29px; background:url(../images/main/icon_title.png) no-repeat 50% 8px; font-size:40px; color:#fff; text-align:center;}

.main .area_line > div > ul li{border-right:1px solid rgba(255,255,255,0.04);}

/* main_visual */
.area_visual{overflow:hidden; width:100% !important; background:#000;}
.area_visual .bx-wrapper,
.area_visual .bx-viewport{height:100% !important;max-width:100% !important;position: relative;}
.area_visual .bx-controls-direction{position:absolute;top: 40%;right:60px;z-index:99;}
.area_visual .box_text > div + span{position:absolute;top:50%;left:69px;z-index:99;margin-top:-25px;font-weight:200;font-size:16px;color:rgba(255,255,255,0.6);}
.area_visual .box_text > div + span:after{content:"";position:absolute;top: 11px;right: -58px;width:40px;height:1px;background:#fff;}
.area_visual .ml12 > *{opacity:0;}
.area_visual .bxslider > li {background-size:cover; background-repeat:no-repeat; background-position:50% 50%; }

.bx-controls-direction > a{display:block; position:relative; width:45px; height:45px; text-indent:-9999px;}
.bx-controls-direction > .bx-prev{background:url(../images/main/icon_arrLeft.svg) no-repeat 50% 50%; background-size:7px;}
.bx-controls-direction > .bx-prev:hover{background:url(../images/main/icon_arrLeft_hover.svg) no-repeat 50% 50%; background-size:7px;}
.bx-controls-direction > .bx-next{margin-top:25px; background:url(../images/main/icon_arrRight.svg) no-repeat 50% 50%; background-size:7px;}
.bx-controls-direction > .bx-next:hover{background:url(../images/main/icon_arrRight_hover.svg) no-repeat 50% 50%; background-size:7px;}
.bx-controls-direction > a:after{content:""; position:absolute; top:-1px; left:-1px; z-index:-1; width:100%; height:100%; border:1px solid #fff; transition:all 0.3s ease-out 0s; transform:rotate(45deg); border-radius:8px;}
.bx-controls-direction > a:hover:after{background:#fff;}
.bx-pager.bx-default-pager{display:inline-block;position:absolute;overflow:hidden;top: 33px;left:55px;z-index:99;width:13px;font-size:23px;color:#fff;letter-spacing: 16px;white-space:nowrap;text-overflow:ellipsis;}
.bx-controls.bx-has-controls-direction.bx-has-pager{position:absolute;top: 367px;width:100%;}

.box_text,
.box_quick,
.box_scrollDown{position:absolute; z-index:1000; color:#fff;}
.open .box_text,
.open .box_quick,
.open .box_scrollDown{z-index:1; transition-delay:0.5s;}
.box_text{top: 55%;z-index:98;width:100%;margin-top:-142px;}
.box_text h2{display:inline-block;position:relative;font-weight: 400;font-size: 60px;text-transform:uppercase;font-family: Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;letter-spacing: -0.08rem;}
.box_text h2:after{content:""; position:absolute; top:50%; right:-513px; width:480px; height:1px; background:rgba(255,255,255,0.2);}
.box_text h2:before{content:""; position:absolute; top:50%; left:-237px; width:209px; height:1px; background:rgba(255,255,255,0.2);}
.box_text p{margin-top:3px;font-weight:300;color: rgba(255,255,255,0.7);}
.box_text p b{font-weight:400; color:rgba(255,255,255,1);}

.box_quick{right:60px; bottom:30px;}
.box_quick > ul > li > a{display:block; opacity:0.3; padding:19px 80px 19px 0; color:#fff; transition:all 0.4s ease-out 0s;}
.box_quick > ul > li > a > i{font-size:15px;}
.box_quick > ul > li > a > p{margin-top:6px; font-weight:300; font-size:17px;}
.box_quick > ul > li{position:relative; border-bottom:1px solid rgba(255,255,255,0.1);}
.box_quick > ul > li:last-child{border:none;}
.box_quick > ul > li:hover a{opacity:1;}
.box_quick > ul > li > a:after{content:""; position:absolute; opacity:0; top:21px; right:19px; width:54px; height:54px; background:url(../images/main/icon_more.png) no-repeat 50% 50%; transition:all 0.4s ease-out 0s;}
.box_quick > ul > li:hover > a:after{opacity:1; right:0;}

.box_scrollDown{opacity:1; bottom:40px; left:50%; margin-left:-37px; transition:all 0.4s ease-out 0s;}
.box_scrollDown:hover{opacity:0.7;}
.box_scrollDown > a{display:block;}
.box_scrollDown > a > i{display:block; margin-bottom:9px; font-weight:300; font-size:11px; color:#fff;}
.box_scrollDown > a > div > img:last-child{position:absolute; top:51px; left:24px; width:23px;}
.box_scrollDown > a > div > img:first-child{animation:iconSpin 20s  linear infinite;-webkit-animation:iconSpin 20s  linear infinite;height: 62px;float: left;margin-left: 4px;}
.box_scrollDown > a > div{text-align:center;}

.video_visual{position:absolute;overflow:hidden;width:100%;}
.videof,
.videot{height:100% !important;}

/* 포트폴리오 */
.img_portfolio{position:relative;box-shadow:28px 28px 85px 0px rgba(0, 0, 0, 0.4);overflow: hidden;}
.area_portfolio,
.area_portfolio .inr_portfolio{overflow:hidden;}
.area_portfolio .inr_portfolio{margin-top:80px; padding-bottom:600px;}
.area_portfolio .list_portfolio{position:relative; line-height:1.5 !important;}
.area_portfolio .list_portfolio.direcL{float:left; margin-left:70px;}
.area_portfolio .list_portfolio.direcR{float:right; top:130px; margin-top:146px; margin-right:70px;}
.area_portfolio .list_portfolio.direcL > h4{position:absolute; top:-187px; left:0; line-height:1.3; font-weight:100; font-size:42px; color:#fff;}
.area_portfolio .list_portfolio.direcL > h4 > b{font-weight:400;}
.area_portfolio .list_portfolio:nth-child(2){margin-top:0;}
.area_portfolio .list_portfolio:nth-child(3){top:285px;}
.area_portfolio .list_portfolio:nth-child(5){top:466px;}
.area_portfolio .list_portfolio:nth-child(6){top:300px;}
.area_portfolio .list_portfolio:nth-child(7){top:800px;}
.area_portfolio .list_portfolio a .img_portfolio:after{content:"";position:absolute;opacity:0;top:0;left: 100%;width:100%;height:100%;background: linear-gradient(-30deg, #0470dc, #13f1fc);background-position: 1% 50%;transition: all 0.5s ease-out 0s;}
.area_portfolio .list_portfolio a:hover .img_portfolio:after{opacity:0.6;background-position: 99% 50%;left: 0;}

.area_portfolio .text_portfolio > h3{font-weight:600; font-size:25px; color:#fff;}
.area_portfolio .text_portfolio > p{margin-top: 6px;font-size: 16px;color:#666;}
.area_portfolio .text_portfolio{margin-top: 29px;}
.area_portfolio .box_btn{margin-top:70px;}

.box_hover{position:absolute;top:34px;right: 0;text-align:right;transition: all 0.4s ease-out 0s;opacity: 0;}
.area_portfolio .list_portfolio a:hover .box_hover{opacity:1; right:35px;}

.box_hover > p{margin-bottom:15px; font-weight:300; font-size:15px; color:#fff;}
.box_hover > img{width:45px;transition: all 0.4s ease-out 0s;display: none;}

/* 강점 */
.area_advantage{overflow:hidden;margin: 120px 0 80px;padding:70px 0;}
.area_advantage .slideup.slideup-in{top:0;}
.area_advantage ul > li{position:relative; float:left; top:0; width:25%; color:#fff; text-align:center; transition:all 0.8s ease-out 0s;}
.area_advantage ul > li img{display:block; margin:0 auto; padding-bottom:20px;}
.area_advantage ul > li i{display:block; margin-bottom:2px; font-size:14px; text-transform:uppercase;}
.area_advantage ul > li em{font-weight:300;}
.area_advantage ul > li > div{margin:0 27px;padding:70px 0px;background:#201d20;box-shadow: 18px 29px 31px 0px rgba(0, 0, 0, 0.28);}
.area_advantage ul > li:nth-child(2){top:70px;}
.area_advantage ul > li:last-child{top:-70px;}

/* 수주현황 */
#content.area_status .tit_status > h2{text-align:left;}
#content .area_status .tit_status > h2{background-position:0% 0%; text-align:left; text-transform:uppercase;}
#content  .tit_status > a{width:190px; margin-top:60px;}

.area_status .tit_status{float:left; text-align:left;}
.area_status .list_status{float:right; width:900px; border-top:2px solid #13f1fc;}
.area_status .tit_status > h2 > span{display:block; margin-top:24px; font-weight:200; font-size:16px; text-align:left;}
.area_status .list_status > ul > li{border-bottom:1px solid #828081;}
.area_status .list_status > ul > li > a{display:block; padding:30px 0;}
.area_status .list_status > ul > li > a > *{display:inline-block;}
.area_status .list_status > ul > li > a > i{float:right; margin-right:30px;}
.area_status .list_status > ul > li > a > em{margin-left:30px;color: #8b8b8b;font-weight: 400;}
.area_status .list_status > ul > li > a > p{margin-left:45px;color: #dbdbdb;font-weight: 300;}

/* 문의 */
.area_inquiry{padding:280px 0 200px 0;background:url(../images/main/img_inquiry02.png) 50% 50% no-repeat;background-size: cover;}
.area_inquiry h5{line-height:1.5; margin-bottom:78px; font-weight:100; font-size:40px; color:#fff; text-align:center;}


/* layer pop */
.layerPop{position:absolute; z-index:9999;}
.layerPop .btn{padding:3px 10px; background:#292b42; text-align:right;}
.layerPop .btn button{display:inline-block; margin-left:15px; background:none; color:#fff; font-size:12px;}


/* keyframes */
@-ms-keyframes iconSpin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes iconSpin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes iconSpin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes iconSpin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/* resposive */
@media all and (min-width:1921px){
	.videof,
	.videot{width:100%;}
	.area_visual .wrapper{width:auto; margin:0 300px;}

	.area_inquiry{background-position:50% 30%;}

	.bx-pager.bx-default-pager,
	.area_visual .box_text > div + span{display:none;}

	.box_text h2{font-size:79px;}
	.box_text{top:50%;}
	.box_text h2:after,
	.box_text h2:before{display:none;}
	.box_text p{position:relative; left:5px; margin-top:13px; font-size:18px;}

	.box_quick > ul > li > a > p{font-size:20px;}
	.box_quick > ul > li > a > i{font-size:16px;}
	.box_quick > ul > li > a{padding:27px 80px 27px 0;}

	.bx-controls-direction > a{width:65px; height:65px;}
	.bx-controls-direction > .bx-next{margin-top:35px;}
	
	#header > h1{width:200px;}
}

@media all and (min-width:1919px){
	.video_visual video {
		margin-left: 0 !important;
	}
}
@media all and (max-width:1919px){
	.box_text h2:after,
	.box_text h2:before,
	.area_visual .box_text > div + span:after{display:none;}
}

@media all and (max-width:1600px){
	.area_portfolio .list_portfolio{width:40%;}
	.img_portfolio > img{width: 100% !important;}
}

@media all and (max-width:1380px){
	.area_visual .bx-controls-direction{right:4%;}
	.box_quick{right:4%;}
	.area_visual .box_text > div + span,
	.bx-pager.bx-default-pager{display:none;}
	.box_text h2{font-size: 40px;}
	
	.area_advantage{margin:60px 0; padding:50px 0;}
	.area_advantage ul > li > div{margin:0 17px; padding:60px 0px;}
	.area_advantage ul > li img{height:90px;}
	.area_advantage ul > li:nth-child(2){top:50px;}
	.area_advantage ul > li:last-child{top:-50px;}
	.area_status .list_status{width:75%;}
}

@media all and (max-width:1200px){
	.area_portfolio .list_portfolio.direcL{margin-left:4%;}
	.area_portfolio .list_portfolio.direcR{top:110px; margin-top:96px; margin-right:4%;}
	.area_portfolio .list_portfolio{width:42%;}
	.area_portfolio .list_portfolio.direcL > h4{top:-137px; font-size:35px;}
	.area_portfolio .list_portfolio:nth-child(3){top:295px;}
	.area_portfolio .list_portfolio.direcR{top:0;}
	.area_portfolio .list_portfolio:nth-child(5){top:400px;}
	.area_portfolio .list_portfolio:nth-child(7){top:500px;}
	.area_portfolio .inr_portfolio{padding-bottom:120px;}

	.box{transform:none !important;}	
	.main{padding-top:150px;}
}

@media all and (max-width:1110px){
	.box_quick > ul > li > a > p{font-size:16px;}
	.box_quick > ul > li > a{padding:19px 70px 19px 0;}
}

@media all and (max-width:1023px){
	.box_text h2{line-height:1.1;padding-right:90px;font-size: 30px;}
	.box_scrollDown{left:8%;}
	.box_scrollDown > a > div > img:first-child{height:56px; margin-left:10px;}
	.box_scrollDown > a > div > img:last-child{top:49px; left:27px; width:20px;}
	.box_quick > ul > li > a:after{width:50px; height:50px; background-size:cover;}
	.box_hover{top:20px; right:20px;}
	
	.area_portfolio .list_portfolio.direcL > h4{top:-80px; font-size:25px;}
	.area_portfolio .text_portfolio > h3{font-size:20px;}
	.area_portfolio .text_portfolio > p{font-size: 12px;margin-top: 1px;min-height: 36px;}	
	
	.area_portfolio .list_portfolio.direcR{margin-top:56px;}
	.area_portfolio .list_portfolio:nth-child(3){top:160px;}
	.area_portfolio .list_portfolio:nth-child(5){top:220px;}
	.area_portfolio .list_portfolio:nth-child(7){top:270px;}
	.area_portfolio .inr_portfolio{padding-bottom:60px;}
	.area_portfolio .box_btn{margin-top:40px;}
	.area_portfolio .inr_portfolio{margin-top:40px;}
	.area_line > div > ul li > img{display:none;}
	
	.main{padding-top:70px;}
	#content article[class^="area_"] h2{font-size:30px;}
	
	.area_advantage ul > li > div{margin:0 7px;padding:40px 0px;}
	.area_advantage ul > li em{font-size:15px;}
	.area_advantage ul > li i{margin-bottom:0px; font-size:13px;}
	.area_advantage ul > li img{height:70px;}

	.area_status .tit_status{float:left; width:100%; text-align:center;}
	#content .area_status .tit_status > h2{background-position:50% 8px; text-align:center;}
	#content .area_status .tit_status > h2 br{display:none;}
	.area_status .tit_status > h2 > span{margin-top:10px; text-align:center;}
	#content .tit_status > a{display:none;}
	.area_status .list_status{width:100%; margin-top:40px;}
	.area_status .list_status > ul > li > a > em{margin-left:20px;}
	.area_status .list_status > ul > li > a > i{margin-right:20px;}
	.area_status .list_status > ul > li > a > p{margin-left:35px;}
}

@media all and (max-width:767px){
	body,
	input,
	textarea,
	button,
	select{font-family:'Kanit', Sans-serif;}
	.box_text h2{line-height:1;font-size: 27px;}
	.box_text p{margin-top:9px;font-size: 14px;}

	.area_portfolio .list_portfolio.direcL > h4{display:none;}
	.area_portfolio .list_portfolio:nth-child(3),
	.area_portfolio .list_portfolio:nth-child(5){top:0;}
	.area_portfolio .list_portfolio.direcR{margin-top:0;}
	.box_hover{opacity:1; top:0; right:0;}
	.area_portfolio .list_portfolio a:hover .box_hover{right:0;}
	.box_hover > p{padding:6px 9px; font-size:12px; background-image:linear-gradient(-30deg, #6773f8, #c6125e);}
	.box_hover > img{display:none;}
	.area_portfolio .list_portfolio{margin-bottom:50px;}
	.area_portfolio .inr_portfolio{padding-bottom:0;}
	.area_portfolio .list_portfolio:nth-child(7){top:0px;}
	.area_portfolio .box_btn{margin-top:0;}
	.area_advantage{margin:100px 0; padding:0;}
	.area_advantage ul > li{width:50%; margin-bottom:13px;}

	.area_status .list_status > ul > li > a > em{margin-left:0;}
	.area_status .list_status > ul > li > a > em,
	.area_status .list_status > ul > li > a > p{font-size:14px;}
	.area_status .list_status > ul > li > a > i{display:none;}
	.area_status .list_status > ul > li > a > p{opacity:0.4; margin-left:15px; color:#fff;}
	.area_status .list_status > ul > li > a{padding:21px 0;}
	.area_status .list_status > ul > li{border-bottom:1px solid #484848;}
	.area_inquiry h5{line-height:1.6; font-size:25px;}

	.video_visual video{display:none;}
	.area_visual .bxslider > li{background:url(../images/main/img_visual01.png) no-repeat 50% 50%; background-size:cover;}

	.box_text {
		top: 61vh;
	}
}

@media all and (max-width:639px){
	.area_visual .bx-controls-direction{display: none;}

	.box_quick{display:none;}
	.box_text h2{}
	.box_scrollDown{bottom:40px; left:50%;}
	.box_scrollDown > a > div > img:first-child{height:51px;}
	.box_scrollDown > a > div > img:last-child{top:47px; left:28px; width:16px;}

	.area_portfolio .list_portfolio.direcL{margin-left:0;}
	.area_portfolio .list_portfolio.direcR{margin-right:0;}
	.area_portfolio .list_portfolio{width: 49%;}
	.area_portfolio .text_portfolio > h3{font-weight:500; font-size:18px;}
	.area_portfolio .list_portfolio a .img_portfolio:after{display:none;}
	.area_portfolio .box_btn{margin-top: 2px;}

	#content article[class^="area_"] h2{font-size:26px;}
	.main{padding-top:50px;}
	.box_hover{display:none;}
	#container .btn_basic01{width: 157px;height: 52px;line-height: 50px;font-size:14px;}	

	.area_advantage{margin: 70px 0;}
	.area_advantage ul > li > div{padding:30px 0px;}
	.area_advantage ul > li em{font-size:14px;}
	.area_inquiry{padding:190px 0 120px 0;}
}

@media all and (max-width:500px){
	.layerPop img{width:300px;max-width:inherit;}
}

@media all and (max-width:519px){
	.box_text h2{}
	.area_visual .bx-controls-direction{display:none;}

	.area_portfolio .inr_portfolio{margin-top:20px;}
	#content article[class^="area_"] h2{font-weight:500;font-size: 22px;background-size: 29px;padding-top: 20px;}
	.area_portfolio .text_portfolio > h3{overflow:hidden; font-size:16px; white-space:nowrap; text-overflow:ellipsis;}
	.area_portfolio .list_portfolio{margin-bottom:24px;}
	
	.area_status .list_status > ul > li > a > p{display:block; margin-left:0;}
	.area_status .list_status > ul > li > a > em,
	.area_status .list_status > ul > li > a > p{font-size:13px;}
	.area_status .list_status > ul > li > a > em{margin-bottom:4px;}
	.area_status .tit_status > h2 > span{margin-top:10px; font-size:14px;}
	.area_status .list_status{margin-top: 20px;}
	.area_status .list_status > ul > li > a {padding: 11px 0;}
	
	.area_inquiry{padding:100px 0 120px 0; background-size:cover;}
	.area_inquiry h5{margin:0 20px 38px 20px; font-size:19px; word-break:keep-all;}
	.area_inquiry h5 br, .box_scrollDown{/* display:none; */}

	.box_scrollDown > a > div > img:last-child{top:48px; left:29px; width:13px;}	
}

@media all and (max-width:400px){
	.box_text h2{font-size:28px;line-height: 1.5;padding-right: 0;}
	.box_text p{margin-top: 14px;font-size: 14px;word-break:keep-all;line-height: 1.8;}
	.box_scrollDown{bottom:30px;}

	.main{padding-top:0;}
	.area_advantage{margin:60px 0;}
	.area_advantage ul > li em{font-size:12px;}
	.area_advantage ul > li img{height:60px;}
	.area_advantage ul > li > div{padding:25px 0px;}
}

/* cross browsing  */
@media all and (-ms-high-contrast:none){
	.box_text{top:53%; z-index:98; width:100%; margin-top:-144px;}
}