@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/

/*common*/

.msr{font-family: 'Montserrat', sans-serif !important;}
.title{font-family: 'ns', sans-serif !important; letter-spacing:-0.065em}
.inner{width:1200px; position:relative; margin: 0 auto;}
.sub_rt {text-align:right;}
.pdinner{width:1200px; padding:0 20px; position:relative; margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:0.9em;}
.txt-m{font-size:1.2em;}
.txt-l{font-size:1.4em;}

.tit_h3{font-size:32px;font-weight:bold; color:#323232;}
.tit_h4{font-size:26px;font-weight:bold; color:#15569a; display:inline-block; border-bottom:3px solid #15569a; margin-bottom:30px;}
.tit_h5{font-size:20px;margin-bottom:20px}

/*owl 컨트롤러 css변경*/
.owl-controls{position:absolute; width:100%; margin:0 auto;}

/*owl pagenation css변경 */
.page_btn .owl-page span{width:20px !important; height:20px !important; background:none !important; border:4px solid #ffffff; border-radius:20px; opacity:0.7 }
.page_btn .owl-page.active span{opacity:1;}

.page_btn2 .owl-page span{width:5px !important; height:5px !important; background:#808080 !important; border-radius:20px; position:relative; opacity:1 !important; margin:0 20px !important;}
.page_btn2 .owl-page.active span:before{content:''; width:30px; height:30px; position:absolute; margin-left:-15px; left:50%; margin-top:-15px; top:50%; border:1px solid #808080; border-radius:200px;}

/*owl navigation css변경*/
.arrow_btn .owl-buttons{position:absolute; width:100%; top:-300px;}
.arrow_btn .owl-buttons div{position:absolute; font-family:'FontAwesome'; text-indent:-999999px; background:none !important; padding:0px !important; margin:0px !important;}
.arrow_btn .owl-buttons div:first-child{left:-10%;}
.arrow_btn .owl-buttons div:last-child{right:-10%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{content:'\f104'; font-family:'FontAwesome'; position:absolute; left:0; top:0; text-indent:0 !important; font-size:5em;}
.arrow_btn .owl-buttons div.owl-next:after{content:'\f105';}


/**/
.wrap{max-width:2000px; min-width:1200px; width:100%; margin: 0 auto; position:relative; }

/*gnb*/
#header{width: 100%; position: relative; z-index:100000;}
#header .rang{line-height: 65px; float: right; }
#header .logo{position:absolute; left:20px ; top:15px;}
#header .d1{position:absolute; width:100%;}
#header .d1:hover{background:rgba(21,86,154,0.9)}
#header .d1 .inner{position:relative; }
#header .gnb{float: right; width: 80%; position:relative; z-index:100000; font-weight: bold;}
#header .gnb>ul>li{float:left; position:relative; width:20%; text-align: center;}
#header .gnb li a{font-family:'ns'; color:#ffffff;}
#header .gnb li.long{width:30%}
#header .gnb li .m{display:block;  font-size:1.1em; color: #fff; line-height: 100px; font-weight:800; text-transform:uppercase}
#header .gnb li .sub{position:absolute; top: 100px; left:0; padding: 20px 20px; width:100%; height:200px; display:none; overflow:hidden; border-right: 1px solid #ddd; border-color:rgba(255,255,255,0.2)}
#header .gnb li:last-child .sub{border-right:0px;}
#header .gnb .sub > ul > li a{display: block; text-align:left; font-size:17px; font-weight:normal; margin-bottom:5px;}
#header .gnb .sub > ul > li a:hover{color: #33a1db; font-weight:bold}
#header .subBg{position:absolute; top: 100px; left:0; width:100%; background:rgba(21,86,154,0.9); height:200px;  display:none; border-top: 1px solid #ddd; z-index: 99999; border-bottom: 1px solid #ddd; border-color:rgba(255,255,255,0.2)}

/*메인비주얼*/
.main_visual{position:relative;}
.main_visual h2, .main_visual p{position:absolute; width:600px; margin-left:-300px; left:calc( 50% + 500px); text-transform:uppercase; font-size:26px; top:350px; font-weight:800; color:#ffffff;}
.main_visual p{top:385px; font-size:22px;}
.main_visual .owl-controls{bottom:80px}



/*메인 section02*/
.section02{width:100%; max-width:1800px; margin: 0 auto; margin-bottom:30px; padding:90px 0px; background:url(../img/business_bg.jpg) no-repeat center top; color:#ffffff; text-align:center;margin-top:50px;}
.section02 h2, .section02 a{color:#ffffff;}
.section02 h2{font-size:32px; text-transform:uppercase; font-weight:800; margin-bottom:20px;}
.section02 p.tit-m{margin-bottom:50px;}

#business_li{text-align:left; position:relative; z-index:1; padding-left:300px;}
#business_li .item{min-height:460px; padding:30px; background:#909090; position:relative;z-index:1;}
#business_li h3{font-size:22px; font-weight:bold;}
#business_li .owl-controls{margin-top:30px;padding-left: 1px;}
#business_li .item .txt{position:absolute; width:100%; padding:30px; bottom:0px; left:0px; z-index:1; }
#business_li .busi01 .bg{background:url(../img/busi01.jpg) no-repeat center top;}
#business_li .busi02 .bg{background:url(../img/busi02.jpg) no-repeat center top;}
#business_li .busi03 .bg{background:url(../img/busi03.jpg) no-repeat center top;}
#business_li .busi04 .bg{background:url(../img/busi04.jpg) no-repeat center top;}
#business_li .busi05 .bg{background:url(../img/busi05.jpg) no-repeat center top;}
#business_li .busi06 .bg{background:url(../img/busi06.jpg) no-repeat center top;}
#business_li .busi07 .bg{background:url(../img/busi07.jpg) no-repeat center top;}
#business_li .item .bg:hover{transform:scale(1.1); transition:1s}
#business_li .item .bg{position:absolute; width:100%; height:100%; left:0px; top:0px; z-index:0}
#business_li .item .bg a{display:block; width:100%; height:100%;}


/*메인 section03*/
.section03{padding:0px 0px 90px;}
.cscon .box{width:100%; float:left; margin-right:2%; background:#f0f0f0; height:360px; position:relative;}
.cscon .box h2{font-weight:800; margin-bottom:30px;}
.cscon .box h3{font-size:24px; margin-bottom:20px;}


#client {width:100%; height:100px; display: inline-block;}
#client .item{min-height:160px; padding:30px; position:relative;z-index:1;}
#client .cli01 {background:url("../img/client_00.png") no-repeat center center;}
#client .cli02 {background:url("../img/client_01.png") no-repeat center center;}
#client .cli03 {background:url("../img/client_02.png") no-repeat center center;}
#client .cli04 {background:url("../img/client_03.png") no-repeat center center;}
#client .cli05 {background:url("../img/client_04.png") no-repeat center center;}
#client .cli06 {background:url("../img/client_05.png") no-repeat center center;}
#client .cli07 {background:url("../img/client_06.png") no-repeat center center;}
#client .cli08 {background:url("../img/client_07.png") no-repeat center center;}
#client .cli09 {background:url("../img/client_08.png") no-repeat center center;}
#client .cli10 {background:url("../img/client_09.png") no-repeat center center;}
#client .cli11 {background:url("../img/client_10.png") no-repeat center center;}
#client .cli12 {background:url("../img/client_11.png") no-repeat center center;}
#client .cli13 {background:url("../img/client_12.png") no-repeat center center;}
#client li {width:20%; height:auto; float:left; background-color:#fff;}

.cscon .bo_bottom{position:absolute; left:0px; width:100%; padding:0 40px 40px; bottom:0px; overflow:hidden;}
.cscon .bo_bottom li{float:left; width:50%;}
.cscon .bo_bottom li:first-child{text-align:left;}
.cscon .bo_bottom li:last-child{text-align:right;}
.cscon .bo_bottom li.more_btn a{font-family: 'Montserrat', sans-serif ;  text-transform:uppercase; font-weight:600; font-size:0.8em}

.cscon .notice a{color:#323232;}
.cscon .notice p{
overflow : hidden;  
text-overflow: ellipsis;  
 display: -webkit-box;  
 -webkit-line-clamp:3; /* 라인수 */
 -webkit-box-orient: vertical;
  white-space:normal;}

  /*firefox only hack*/
  @-moz-document url-prefix(){
	.cscon .notice p{white-space:normal;word-wrap:break-word; height:70px;}
  }

.cscon .catalog{background:#fff; color:#4b4b4b}
.cscon .catalog a{color:#ffffff}
.cscon .catalog .bo_bottom li{float:right}


/*footer*/
#footer{background:#414141; padding:50px 0px; color:#c8c8c8; font-size:0.9em; width:100%}
#footer div{background:url(../img/foot_logo.png) no-repeat right center;}
#footer p{margin-top:20px; font-size:0.8em}
#footer p span{font-weight:bold; color:#33a1db}


/*page up*/
#pageup {position: fixed; z-index:999; right: 50px; bottom: 50px; width: 50px; height: 50px; background-image: url('../img/Htop.png');background-repeat: no-repeat;  background-position: center center;background-size: 50px 50px;display: none;cursor: pointer; z-index:4000;}










/*서브레이아웃*/
#sub_visual{position:relative; background:#808080 url(../img/subvisu.jpg) no-repeat center top; padding:140px 0 70px;}
#sub_visual{text-align:center; color:#ffffff}
#sub_visual .tit_h2{font-weight:bold; font-size:40px; margin-bottom:20px;}
#sub_visual p{font-size:20px; }


.sub_con{width:1200px; margin: 0 auto; position:relative;}

#sidemenu {display:block;float: left; position:fixed;width:220px;  z-index:10; top:140px; background:#ffffff} /*기준*/
#sidemenu h2 {display:block;font-size:1.9em; text-align:center; line-height:1.2;  color:#fff; min-height:100px; padding:55px 0; background:#33a1db; position:relative; text-transform:uppercase;  font-weight:bold}
#sidemenu h2 span {display:block; font-size:0.9rem; margin-bottom:10px;}

#sidemenu .snblist{border:1px solid #e6e6e6; border-width:0 1px 1px;}
#sidemenu .snblist li a {font-family:'ns'; position:relative; display: block; padding:15px 20px;  font-size: 1.06em; font-weight:400; border-bottom:1px solid #e6e6e6; color:#323232}
#sidemenu .snblist li:last-child a{border-bottom:0px;}
#sidemenu .snblist li a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;}
#sidemenu .snblist li a:hover {text-indent:5px; 	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; font-weight:900; color:#323232; transition:0.3s}
#sidemenu .snblist li.active a {font-weight:900; color:#000000}
#sidemenu .snblist li a i:after,#sidemenu .snblist li.active a i:after {
	position: absolute;
	top: 43%;
	right: 5px;
	width:15px;
	height:5px;
	background:#e94638;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-family: FontAwesome;
	content: "";
	font-style:normal;  
	color:#808080
}
#sidemenu .snblist li a:hover i:after{right: 7px;}
#sidemenu .snblist li.active a:hover i:after{right:7px;}


#sidemenu .snblist li a i:after {background:rgba(255,255,255,0)}

#sidemenu .snblist li a:hover i:after {
	-webkit-transform: translateY(-50%) translateX(20%);
	-moz-transform: translateY(-50%) translateX(20%);
	-ms-transform: translateY(-50%) translateX(20%);
	-o-transform: translateY(-50%) translateX(20%);
	transform: translateY(0) translateX(20%);
	color:#fff;
	background:rgba(255, 255, 255, 1);
}

#sidemenu .snblist li.select a:hover i:after {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	color:#fff;
	background:rgba(255, 255, 255, 1);
}

.con{position:relative; margin-left:270px; padding:60px 20px 80px 0px; min-height:700px;}
.con h3.tit_h3{margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid #e6e6e6}

.path{display:block; margin-bottom:20px;}
.path li{color:#868686; font-size:0.9em; display:inline-block;}
.path li:before{font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f105"; margin: 0 7px 3px; vertical-align: middle;}
.path li:first-child:before{display:none;}








/*텍스트효과*/

.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1500ms;animation-fill-mode:both;animation-delay:300ms;animation-timing-fonction:ease-out;}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt { 
	0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 1;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity:1;}
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt {
    0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 0;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity: 1;}
}