@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,600,700');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');

/* start defaut CSS */
* { margin:0; padding:0; border:0; outline:0; vertical-align:top; box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; text-rendering: optimizeLegibility; word-break:break-all}
body{ font-family: Noto Sans KR, Malgun Gothic,"맑은 고딕", NanumGothic, '나눔고딕', "돋움", Dotum, Arial, sans-serif, Verdana, Helvetica, geneva; font-size: 16px; line-height: 1.4; color: #333; margin: 0; padding: 0;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td{ margin:0;padding:0;}
h1, h2, h3, h4, h5, h6{ font-size:100%; }
ol, ul{ list-style:none;}
address, caption, cite, code, dfn, em, label{ font-style: normal; font-weight:normal;}
img{ border:none; vertical-align:top;}
caption{ position: absolute; height:0; width:0; clear:both; table-layout:fixed; border-collapse:collapse;}
fieldset{ border: none; margin: 0; padding: 0; display: block; position: relative}
input{ color: #4d4d4d; font-size: 12px/*0.90em*/;}
select, input, textarea{ color:#b7b7b7}
textarea{ color: #777; font-size:100%; box-sizing: border-box; border:1px solid #b7b7b7; overflow:auto; scrollbar-base-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-face-color: #d9d9d9; scrollbar-highlight-color: #d9d9d9; scrollbar-shadow-color: #d9d9d9; scrollbar-track-color: #f2f2f2;}

.checkbox, .radio{ margin-right: 3px;}
* html .radio{ margin-top:-4px; margin-right: 0;}
*:first-child+html .radio{ margin-top:-4px;  margin-right: 0;}
* html .checkbox{ margin-top:-4px;  margin-right: 0;}
*:first-child+html .checkbox{ margin-top:-4px;  margin-right: 0;}

a{ text-decoration:none;}
a:hover, a:active, a:focus{ text-decoration:none;}

input[type=checkbox], input[type=radio]{ margin:0 3px; display: inline-block; vertical-align: middle;}
button{ cursor:pointer; border-width:0; background:transparent; color:transparent; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
[hidden]{ display: none}

/* contents */
#contents{background: #1F366B;}
.section1,.section2,.section3, .section4, .section5{ position: relative; height: 100vh; z-index: 1}
.section2,.section3, .section4, .section5{ min-height:1024px}
.section1{ }
.section2{ background-color: #fff;}
.section3{ background:linear-gradient(90deg, #e5f8fa, white 50%, #ffdcd2)}
.section4{ background-color: #fff;}
.section5{ background-color: #0C1B37;}

/*메인-좌우슬라이드*/
.owl-carousel{}
.owl-theme{}
.owl-theme .item{height: 100vh; color:#fff; letter-spacing: -1px; display:flex; align-items:center; justify-content:center; text-align:center;}
.owl-theme .item strong{font:900 7.000em Arial; text-transform:uppercase;}
.owl-theme .item span{display:block; font-size:2.750em; margin: -15px 0 5px 0;}
.owl-theme .item strong em{display:none}
.owl-theme .slider1{background:url('../images/bg_slide1.png') no-repeat left bottom; background-size:100%;}
.owl-theme .slider1 strong i{font-style: normal;}
.owl-theme .slider2{background:url('../images/bg_slide2.png') no-repeat left bottom; background-size:100%;}
.owl-theme .slider3{background:url('../images/bg_slide3.png') no-repeat left bottom; background-size:100%;}
.owl-theme .slider4{background:url('../images/bg_slide4.png') no-repeat left bottom; background-size:100%;}
.owl-theme .slider2 p,.owl-theme .slider3 p,.owl-theme .slider4 p{margin-top:-30px}


/* layout */
#wrapper{width:100%; min-width:320px; position:relative}
#contents{margin-top:0 !important;width:100%}
#main{width:100%; background:#21366e;/* background:linear-gradient(120deg, #1F366B, #1F366B, #274770, #1D1431);*/ position:relative}
#introduce{padding:130px 0}  
#introduce:after{content:""; display:block; clear:both;}
#bussSector{padding:100px 0; background:linear-gradient(90deg, #e5f8fa, white 50%, #ffdcd2)}
#bussContent{width:100%; padding:100px 0;}
#recruit{padding:80px 0 0 0; background:#0c1b37;} /*border:1px solid #25324b*/
#recruit:after{content:""; display:block; clear:both;}
#contact{padding:80px 0; background:#0c1b37} 
#footer{width:100%; background:#000; padding: 20px 0; text-align:center}
#footer:after{content:""; display:block; clear:both;}

#main .scrol{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 60%}
#main .scrol:after{ content: ''; display: block; width: 1px; height: 60px; margin: 8px auto 0; background: rgba(255,255,255,0.5)}
#main .scrol:before{ content: ''; display: block; position: absolute; width: 1px; height: 15px; background: #fff; left: 50%; transform: translateX(-50%); bottom: 0}


/* common */
.cts{ width:1200px; height:100%; margin:0 auto; position:relative;}

h2{font-size:2.125em; font-weight:bold; color:#000; text-align:center}
h2 span{display:block; width:100%; font-size:0.529em; font-weight:normal; opacity:0.75; margin-top:5px}


/* floating menu */
.floatingMenu{ position: fixed; right: 50px; z-index:50; top: 60%; margin: -220px 0 0 0;}
.floatingMenu li{ margin: 8px 0}
.floatingMenu li a.menu1{ width: 0; height: 0; border: 0}
.floatingMenu li a{ width: 34px; height: 34px; border: 2px solid #d3d3d3; border-radius: 50%; color: transparent; display:flex; align-items:center; justify-content:center; text-align:center;}
.floatingMenu li a span{display:none}
.floatingMenu li.on a{ background: #f16825; border-color: #f16825}
.floatingMenu li.btn_top{ position: absolute; top: -40px}
.floatingMenu li.btn_top a{ border: 0; border-radius: 0;padding: 0 0 0 4px;}
.floatingMenu li.btn_top a:after{ content: '\276E'; display: block; font-size: 20px; font-weight: 500; color: #f16825; transform: rotate(90deg)}


/* header border-bottom: 1px solid #465886; */
#header{position: fixed; top:0; width: 100%; padding: 0 0 15px 0; background: transparent; z-index: 10; text-align: center; color: #fff}
#header.bgChg{ background: rgba(33,54,110,1);}
#header h1{display:inline-block; width:210px; padding:20px 0 0px 0; text-align: left;}
#header h1 button img{width: 90%}
#header .gnb{display:inline-block; width:calc(100% - 300px); padding-top:35px; text-align:right;}
#header .gnb button{display:inline-block; font-size:1.1em; color:#fff; padding: 10px 40px; font-weight: 500}
#header .hamMenu{display:none}


/* home-main */
#main .cts{display:flex; align-items:center; justify-content:center; text-align:center;}
#main .cts div{text-align:center; color:#fff;}
#main .cts div img{ width: 70%}
/*#main p:nth-child(2){display:inline-block; padding:0 0 10px 0; margin: 20px 0 0 0; font-size:3.7em; opacity:.85; letter-spacing: -0.055em}
#main p:nth-child(3){margin:10px 0 15px 0; font-size:2.2em}
#main p:nth-child(4){font-size:3em; font-weight:400}
#main p:nth-child(5){font-size:1.375em; margin-top:10px; text-transform:uppercase; opacity:.1; word-break:keep-all}
#main span{display:inline-block; background:#2453a4; padding:5px 35px;}
#main strong{display:inline-block; background:#f16825; padding:5px 35px; font-weight:normal}*/

#main dl{position:absolute; bottom:0; width:100%; text-align:center}
#main dl:after{content:""; display:block; clear:both;}
#main dt{color:#fff; text-align:center; font-size:0.625em; text-transform:uppercase; margin-bottom:5px}

/* introduce-회사소개 */
#introduce h2 span{ letter-spacing:1.5px; opacity:.25; text-transform:uppercase;}
#introduce .cts{margin-top:80px}
#introduce .cts div{text-align:center}
#introduce .cts div ul{margin:50px auto 80px auto}
#introduce .cts div ul:after{content:""; display:block; clear:both;}
#introduce .cts div li{display:inline-block; text-align:center; margin:0 10px}
#introduce .cts div li:nth-child(1) p{background:#2453a4 url('../images/img_blt2.png') no-repeat center 37px;}
#introduce .cts div li:nth-child(2) p{background:#c8c8c8 url('../images/img_blt1.png') no-repeat center 37px}
#introduce .cts div li:nth-child(3) p{background:#f16825 url('../images/img_blt3.png') no-repeat center 37px}
#introduce .cts div p{width:190px; height:190px; border-radius:50%; color:#fff;}
#introduce .cts div p span{display:block; padding-top:110px; font-size:1.500em; font-weight:bold}
#introduce .cts div dt{text-transform:uppercase; font-size:1.125em; font-weight:bold; margin:25px 0 10px 0}
#introduce .cts div dt span{opacity:0.5}
#introduce .cts div dd{font-size:1.125em;}

#introduce h6{float:left; width:100%; font-size:1.500em; text-align:center; font-weight:normal}
#introduce h6 span{color:#f16825;}


/* bussSector-주요사업분야  */
#bussSector .cts{margin-top:150px}
#bussSector .cts div{height:362px; padding:0px 0px; margin:70px 0; background:url('../images/img_cts4.png') no-repeat 50% 50%; background-size:364px 362px; position:relative}
#bussSector .cts div p{position:absolute; left:70px; top:160px}
#bussSector .cts div span{position:absolute; right:0; top:160px}
#bussSector li{float:left; width:50%;}
#bussSector li:nth-child(even){float:right; text-align:right;}
#bussSector li:nth-child(1),#bussSector li:nth-child(2){margin-top:20px;}
#bussSector li:nth-child(1),#bussSector li:nth-child(3){padding-left:100px;}
#bussSector li:nth-child(2),#bussSector li:nth-child(4){padding-right:130px; }
#bussSector li:nth-child(3),#bussSector li:nth-child(4){margin-top:150px}

#bussSector dl{font-size:0.875em}
#bussSector dt{text-transform:uppercase; font-weight:bold; margin-bottom:10px}


/* bussContent-주요사업내용 */
#bussContent .cts{margin-top:60px}
#bussContent ul{margin:50px 0 0 7.5%}
#bussContent ul:after{content:""; display:block; clear:both;}
#bussContent li{float:left; width:16.6%; position:relative;}
#bussContent li p{position:relative;}
#bussContent li strong{position:relative; z-index:6; width:160px; height:160px; display:flex; align-items:center; justify-content:center; text-align:center; background:#fff;  border:7px solid #2453a4; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%;} 
#bussContent li span{position:absolute; top:80px; right:0; width:25px; height:11px; z-index:5; background:#91a9d1;}
#bussContent li:nth-child(even) strong{border-color:#f16825}
#bussContent li:nth-child(even) span{background:#f8b392}
#bussContent li dl{width:100%; font-size:0.875em; padding:30px 30px 0 10px}
#bussContent li dt{font-weight:bold; color:#000; margin-bottom:10px}
#bussContent li dd{word-break:break-all}


/* recruit-채용정보,찾아오는 길 */
#recruit .cts{margin-top:40px}
#recruit h3{width:100%; color:#fff; font-weight:bold; font-size:1.500em; margin:0 0 15px 0;}
#recruit h4{width:100%; color:#6588c4; font-size:1.000em; margin:0 0 15px 0;}
 
.myunjub{float:left; width:51%; color:#fff; padding:0 0 30px 0; margin-bottom:30px;}
.myunjub li{width:100%; margin-bottom:15px;  font-size:0.875em}
.myunjub li:after{content:""; display:block; clear:both;}
.myunjub li:nth-child(1) p{height:165px}
.myunjub li:nth-child(2) p,.myunjub li:nth-child(3) p{height:44px}
.myunjub p{float:left; width:15%; margin-right:12px; text-align:center; border:1px solid #3d495f;display:flex; align-items:center; justify-content:center;}
.myunjub dl{float:left; width:80%;}
.myunjub dt{font-size:1.143em}
.myunjub dd{font-weight:normal; color:#a6a8ae; margin-bottom:20px}
.myunjub dd:nth-last-child(-n+1){margin-bottom:0}

.bokli{float:left; width:48%;}
.bokli h3{color:#6588c4 !important}
.bokli li{display:inline-block; padding:9px 30px; margin:0 5px 10px 0; font-size:0.875em; color:#6588c4; border:1px solid #2b4168; -webkit-border-radius:25px; -moz-border-radius:25px; -o-border-radius:25px; border-radius:25px;}

.rMap{float:left; width:100%; padding-bottom:50px}
.rMap h3{width:100%; color:#fff; font-weight:bold; font-size:1.500em; margin:0 0 15px 0;}
.rMap dl{width:100%; color:#fff; margin-top:5px; font-size:0.875em; font-weight:normal; opacity:0.75}
.rMap dl:after{content:""; display:block; clear:both;}
.rMap dt{display:inline-block; margin-right:15px}
.rMap dd{display:inline-block;text-transform:uppercase;}

#map{width:100%; height:438px; margin:0 0 15px 0;}


/* foot */
#footer p{color:#fff; opacity:0.3; font-size:0.688em; margin-top:15px}


@media (min-width:320px) and (max-width:1024px) {	
	.floatingMenu{position:fixed; top:inherit; bottom:30px; right:20px; z-index:10; width:34px; height:34px; text-align:center; background:rgba(255,255,255,.3); border-radius:50%;}
	.floatingMenu li{display:none}
	.floatingMenu li:nth-last-child(-N+1){display:block; cursor:pointer}
	.floatingMenu li:nth-last-child(-n+1) span{}
	.floatingMenu li.btn_top{position:relative; top:inherit; margin:0}
	.floatingMenu li.btn _top a{width:35px; height:35px; padding-top:2px; text-align:center}

	.section2, .section3, .section4, .section5{height:inherit}
	
	.cts{ width:100%; padding:0 20px;}	
	
	#header{background:rgba(33,54,110,1); padding:0 15px 15px 20px}
	#header h1{float:left; padding:0; margin:12px 0px 0 0px; width:auto;}	
	#header h1 button{ text-align: left;}
	#header h1 button img{ width: 145px}
	#header .gnb{display:none;}	
	#header .hamMenu{float:right; display:inline-block; width:auto; text-align:right; margin:17px 0 0 0;}
	#header .hamMenu button#open{ width:40px; height:40px; background:url('../images/btn_hamb.png') no-repeat center center; background-size:25px 19px; opacity:.9; cursor:pointer}
	
	nav{width:100%; height:100%; position:fixed; top:75px; left:0; z-index:100; background:linear-gradient(120deg, #1F366B, #1F366B, #274770, #1D1431);transition:all 0.3s; -webkit-transition:all 0.3s;}
	nav.on{transform:translate(0%,0); -webkit-transform:translate(0%,0);}	
	nav button#closed{ position: absolute; top: -55px; width: 45px; height: 40px; z-index: 99; right: 15px; background: #21366E; text-align: center; border: 0; font-size: 120%;}
	nav button#closed:before{ content: '\2573'; display: block; color: #fff; position: absolute; top: 5px; line-height: 1.5;}
	nav button{display:block; width:100%; padding:20px; color:#fff; font-size:1.125em; text-align:left; border-top:1px solid #0f2256; cursor:pointer}
	nav button:nth-child(1):after{display:none}
	nav button:nth-last-child(-n+1){border-bottom:none}
	nav button:after{content: '\276E'; float:right; font-size: 20px; font-weight: 500; color: #fff; transform: rotate(180deg); opacity:.75}
		
	.owl-theme .item p{padding:0 20px}
	.owl-theme .item span{font-size:1.750em; margin: 5px 0 0 0; word-break:keep-all}
	.owl-theme .item strong {font-size:2.992em}
	.owl-theme .item strong em{display:block; line-height: 21px;}
	.owl-theme .item br{display:none}
	.owl-theme .slider1 strong{font-size: 2.382em;}
	.owl-theme .slider1,.owl-theme .slider2,.owl-theme .slider3,.owl-theme .slider4{background-size:200vh; background-position:center bottom}
	/*.owl-theme .slider1 strong{font-size:2.292em}
	.owl-theme .slider2 strong,.owl-theme .slider3 strong,.owl-theme .slider4 strong{{font-size:3.092em}*/
		
	.owl-theme .slider1 strong i{display: none;}	
	.owl-theme .slider1 span{word-break:break-all}
	.owl-theme .slider1 br{display:none}
	.owl-theme .slider1 p{margin-top:-50px}
	.owl-theme .slider2 p,.owl-theme .slider3 p,.owl-theme .slider4 p{margin-top:-50px; }	

	#introduce{padding:100px 0;}	
	#introduce .cts{ margin-top:0}
	#introduce .cts div li{margin: 20px 10px;}

	#bussSector{padding:70px 0 50px 0;}	
	#bussSector .cts div{ padding:0px 0; margin:50px 0 400px 0; background-size:80%;}
	#bussSector .cts div img{ width:60%}
	#bussSector .cts div p{left:0px; top:0px;}
	#bussSector .cts div span{right:0; top:340px; text-align:right}
	#bussSector ul{padding-top:400px}
	#bussSector li{float:left; width:100%;}	
	
	
	#bussSector .cts	{ margin-top:100px}
	#bussSector li:nth-child(1),#bussSector li:nth-child(3){padding-left:0px;}
	#bussSector li:nth-child(2),#bussSector li:nth-child(4){padding-right:0px; text-align:left}
	#bussSector li:nth-child(3),#bussSector li:nth-child(4){margin-top:20px}
	#bussSector li dd br{display:none}
	
	#bussContent{padding: 50px 0 30px 0;}
	#bussContent ul{margin-left:0}
	#bussContent li{width:100%; text-align:center; padding:0px 0;}
	#bussContent li p{float:left; width:90px;}
	#bussContent li strong{ width:90px; height:90px; margin:0 auto; border: 5px solid #2453a4; background:#fff}	
	#bussContent li img{width: 70%;}	
	#bussContent li:nth-child(1) span{height:150px;}
	#bussContent li:nth-child(3) span,	#bussContent li:nth-child(5) span{ height:30px;}
	#bussContent li span{position:relative; top:0px; left:40px; width:7px; height:200px; z-index:5; background:#91a9d1; display:block}
	#bussContent li dl{padding:5px 0 0 10px; float:left; text-align:left; width:calc(100% - 90px)}	
	
	#bussContent li dt{margin-bottom:0}
	#bussContent li dd{margin-bottom:0px}	

	#recruit{padding: 50px 0 0 0;}
	#recruit .cts{padding:0}
	.myunjub{width:100%; padding: 0 20px 10px 20px; margin-bottom: 20px;}
	.myunjub li:nth-child(2) p, .myunjub li:nth-child(3) p{height: 64px;}	
	.bokli{width:100%; padding:0 20px}
	.bokli li{padding: 7px 10px; margin: 0 0px 5px 0;}	
	.rMap{margin-top:40px}
	.rMap h3,.rMap dl{ padding:0 20px}   
} 

@media (min-width:320px) and (max-width:374px) {
	#header{height:75px}
	#bussContent li span{height:320px;}	
	.myunjub li:nth-child(1) p{height: 225px;}
} 

@media (min-width:468px) and (max-width:710px) {
	#introduce .cts div li{width:100%; text-align:center; margin: 20px 10px;}
	#introduce .cts div li p{margin:0 auto}
}

@media (min-width:426px) and (max-width:767px) {	
	#introduce .cts div li{display:inline-block}
	#bussContent li dd br{display:none}	
	#bussSector .cts div{background-size:60%}
}

@media (min-width:426px) and (max-width:767px) {
	#bussSector .cts div{background-size: 50%;}
}

@media (min-width:768px) and (max-width:1439px) {	
	#header h1{width:25%}
	#header .gnb{display:inline-block; width:74%; padding: 30px 10px 0 0;	}
	#header .gnb button{padding: 0 10px;     font-size: inherit;}
	#header .hamMenu{display:none;}
	
	.owl-theme .item p{padding:0 50px}
	.owl-theme .item span{font-size:1.750em;}
	.owl-theme .item strong {font-size:4.000em !important}
	.owl-theme .item br{display:block;}
			
	#bussSector .cts div{background-size:35%; margin:70px 0 40px 0}
	#bussSector .cts div p{left:20px; top:170px}
	#bussSector .cts div span{right:0; top:170px}
	#bussSector ul{padding-top:0px}
	#bussSector li{float:left; width:50%;}
	#bussSector li:nth-child(odd){float:left; text-align:left;}
	#bussSector li:nth-child(even){float:right; text-align:right;}
	#bussSector li:nth-child(1),#bussSector li:nth-child(2){margin-top:20px;}
	#bussSector li:nth-child(1),#bussSector li:nth-child(3){padding-right:20px;}
	#bussSector li:nth-child(2),#bussSector li:nth-child(4){padding-left:20px; }
	#bussSector li:nth-child(3),#bussSector li:nth-child(4){margin-top:150px}
	#bussSector li dd br{display:inline-block}
	
	#bussContent li{float:left; width:16.6%;}
	#bussContent li p{width:100% }
	#bussContent li strong{width:100px; height:100px; margin:0;} 
	#bussContent li span{position:absolute; top:45px; left:inherit; right:0;  width:70px; height:11px !important;}
	#bussContent li dl{width:100%; font-size:0.875em; padding:30px 30px 0 10px}

	.myunjub li:nth-child(2) p, .myunjub li:nth-child(3) p{height:44px}		
}
@media (min-width:1025px) and (max-width:1439px) {	
	#header h1{width:25%}
	#header .gnb{padding-top:55px}
	
	.owl-theme .slider1, .owl-theme .slider2, .owl-theme .slider3, .owl-theme .slider4  {background-position: center center; background-size: 170vh;}	
	
	.floatingMenu li a{width: 17px; height: 17px;}
	
	.cts{width:inherit}
	
	#introduce h6{ word-break: keep-all}
	#introduce h6 br{display:none}
	
	#main .cts li span, #main .cts li strong{height:inherit}
	
	#bussSector .cts div{background-size:30%;}
	#bussContent li strong img{width:70%}
	#recruit .cts{padding:0 20px}
	#map{height:328px}
}
@media (min-width:1440px) {
	#map{height:358px;}
	.owl-theme .slider1, .owl-theme .slider2, .owl-theme .slider3, .owl-theme .slider4  {background-position: center center; background-size: 170vh;}	
	.floatingMenu li a{width: 17px; height: 17px;}
}
@media (min-width:1108px) {
	#bussContent li strong{width: 130px; height: 130px;}
	#bussContent li strong img{width:70%}
	#bussContent li span{width:170px; top: 55px;}
	
	
}

@media (max-width: 768px) {
.owl-carousel .owl-dots{ bottom: 20%;}
.owl-carousel .owl-dots .owl-dot{ padding: 0 !important; width: 10px; height: 10px}
}

/* Visual 영역 슬라이디이 표시-Shape */
.owl-carousel .owl-dots{ position: absolute; width: auto; height: auto; bottom: 30%; left: 50%; transform: translateX(-50%);}
.owl-carousel .owl-dots .owl-dot{ width: 15px; height: 15px; border-radius: 100%; box-sizing: border-box; margin: 0 3px; padding: 3px !important; background: transparent}
.owl-carousel .owl-dots .owl-dot.active{ border-color: #f16825 !important; padding: 0}
.owl-carousel .owl-dots .owl-dot span{ display: block; width: 100%; height: 100%; border-radius: 100%; background:#fff}
.owl-carousel .owl-dots .owl-dot.active span{ background: #f16825}