@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:860px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:1030px;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 2500ms  ease-in-out ;
	-moz-transition:transform 2500ms ease-in-out ;
	-o-transition:transform 2500ms ease-in-out ;
	-ms-transition:transform 2500ms ease-in-out ;
    transition:transform 2500ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute; /* top:60px; */top: 80px; left:0px; width:100%; z-index: 1; text-align: center;} /* margin-top은 조정 (텍스트영역 높이의 반) */
.main-visual-item .main-visual-txt-con .main-visual-txt-inner{position: relative;}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateX(-50px); 
    -o-transform: translateX(-50px); 
    -moz-transform: translateX(-50px);
    -webkit-transform: translateX(-50px); 
     transform: translateX(-50px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; position: absolute; top: -10px; left: -25px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{width: 100%; /* font-size:38px; line-height: 48px; */font-size: 30px; line-height: 40px; letter-spacing:-0.5px; color:#fff; font-weight: 300; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}
.main-visual-item .main-visual-txt-con .main-visual-txt2 b{font-weight: 600; font-size:38px}




@media all and ( min-width: 800px ){
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover:before,
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover:after{width:50%;}
}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
	-ms-transform: scale(1.0,1.0) rotate(0.0001deg);
    -o-transform: scale(1.0,1.0) rotate(0.0001deg);
    -moz-transform: scale(1.0,1.0) rotate(0.0001deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.0001deg);
     transform: scale(1.0,1.0) rotate(0.0001deg);
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-more-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateX(0px); 
    -o-transform: translateX(0px); 
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px); 
     transform: translateX(0px);
}





/* 메인 비주얼 오버시 이미지 */
.main-visual-item .main-visual-over-bx > div {opacity:0;filter:Alpha(opacity=0); -webkit-transition: all 0.3s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;}
.main-visual-item.active-item .main-visual-over-bx > div {opacity:1;filter:Alpha(opacity=100);}

.main-visual-item.active-item .main-visual-over-bx > div:first-child {-webkit-transition-delay: 1.3s;
-moz-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
transition-delay: 1.3s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(2) {-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(3) {-webkit-transition-delay: 2.5s;
-moz-transition-delay: 2.5s;
-ms-transition-delay: 2.5s;
-o-transition-delay: 2.5s;
transition-delay: 2.5s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(4) {-webkit-transition-delay: 3s;
-moz-transition-delay: 3s;
-ms-transition-delay: 3s;
-o-transition-delay: 3s;
transition-delay: 3s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(5) {-webkit-transition-delay: 3.5s;
-moz-transition-delay: 3.5s;
-ms-transition-delay: 3.5s;
-o-transition-delay: 3.5s;
transition-delay: 3.5s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(6) {-webkit-transition-delay: 4s;
-moz-transition-delay: 4s;
-ms-transition-delay: 4s;
-o-transition-delay: 4s;
transition-delay: 4s;}
.main-visual-item.active-item .main-visual-over-bx > div:nth-child(7) {-webkit-transition-delay: 4.5s;
-moz-transition-delay: 4.5s;
-ms-transition-delay: 4.5s;
-o-transition-delay: 4.5s;
transition-delay: 4.5s;}


.main-visual-over-bx {position:absolute; width:100%; height:100%; left:0; top:0;}
.main-visual-over-bx > div{position:absolute; /* z-index:999; */}


/* 메인 비주얼01 :: circle 각각 위치 */
.main-visual-01 .v-list01{top: 50%; left: 50%; margin-top: 130px; margin-left: -245px;}
.main-visual-01 .v-list02{top: 50%; left: 50%; margin-top: -77px; margin-left: -75px;}
.main-visual-01 .v-list03{top: 50%; right: 50%; margin-top: -60px; margin-right: -90px;}
.main-visual-01 .v-list04{top: 50%; right: 50%; margin-top: -45px; margin-right: -160px;}
.main-visual-01 .v-list05{top: 50%; right: 50%; margin-top: -15px; margin-right: -630px;}
/* 메인 비주얼02:: circle 각각 위치 */
.main-visual-02 .v-list01{top: 50%; left: 50%; margin-top: 20px; margin-left: -360px;}
.main-visual-02 .v-list02{top: 50%; left: 50%; margin-top: 65px; margin-left: -285px;}
.main-visual-02 .v-list03{top: 50%; left: 50%; margin-top: 140px; margin-left: -90px;}
.main-visual-02 .v-list04{top: 50%; right: 50%; margin-top: 225px; margin-right: -215px;}
.main-visual-02 .v-list05{top: 50%; right: 50%; margin-top: 50px; margin-right: -275px;}
.main-visual-02 .v-list06{top: 50%; right: 50%; margin-top: 205px; margin-right: -330px;}
/* 메인 비주얼03:: circle 각각 위치 */
.main-visual-03 .v-list01{top: 50%; left: 50%; margin-top: -230px; margin-left: -530px;}
.main-visual-03 .v-list02{top: 50%; left: 50%; margin-top: 220px; margin-left: -410px;}
.main-visual-03 .v-list03{top: 50%; right: 50%; margin-top: -245px; margin-right: -505px;}
.main-visual-03 .v-list04{top: 50%; right: 50%; margin-top: 190px; margin-right: -540px;}

@media all and (max-width:1490px){
	.main-visual-over-bx {display:none;}
}


/* 애니메이션 영역구분 */
.circle-animation{height:86px; width:86px; margin:0px auto;}
.circle-animation:after{
	position:absolute; left:50%; bottom:50%;
	-moz-transition:height 0.5s, opacity 1.0s;
	-ms-transition:height 0.5s, opacity 1.0s;
	-webkit-transition:height 0.5s, opacity 1.0s;
	-o-transition:height 0.5s, opacity 1.0s;
	transition:height 0.5s, opacity 1.0s;
}
.circle-animation > .list-box{display:block; position:relative; width:100%; height:100%;
	opacity:0;filter:Alpha(opacity=0);
	-moz-transition:all 0.5s, opacity 1.0s;
	-ms-transition:all 0.5s, opacity 1.0s;
	-webkit-transition:all 0.5s, opacity 1.0s;
	-o-transition:all 0.5s, opacity 1.0s;
	transition:all 0.5s, opacity 1.0s;
	line-height: 83px; text-align:center;
}
/* 점선 */
.circle-animation > .list-box:before{display: block; position: absolute; left: 50%; bottom: 87px; content: ''; width: 1px; height: 0; background: url("../images/main/dot_bg.png") 0 100% no-repeat; opacity:0;filter:Alpha(opacity=0); -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; transition: all 0s;}

/* circle 애니메이션 css */
.ball-scale-multiple {position: relative; opacity:0;filter:Alpha(opacity=0);
	-moz-transition:all 0.7s, opacity 1.0s;
	-ms-transition:all 0.7s, opacity 1.0s;
	-webkit-transition:all 0.7s, opacity 1.0s;
	-o-transition:all 0.7s, opacity 1.0s;
	transition:all 0.7s, opacity 1.0s;
}
.ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s; 
}
.ball-scale-multiple > div {
    border-radius: 100%;
    position: absolute;
    top: -4px;
	left:-4px;
    opacity: 0;
    margin: 0;
    width: 83px;
    height: 83px;
	border:3px solid #fff;
    -webkit-animation: ball-scale-multiple 3s 0s linear infinite;
    animation: ball-scale-multiple 3s 0s linear infinite;
}

@keyframes ball-scale-multiple {
	0% {
		-webkit-transform: scale(0.4);
        transform: scale(0.4);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
        transform: scale(1);
		opacity: 0; 
	}  
}

@-webkit-keyframes ball-scale-multiple {
	0% {
		-webkit-transform: scale(0.4);
        transform: scale(0.4);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
        transform: scale(1);
		opacity: 0; 
	}  
}

/* 고정 circle css */
.list-txt-thum{width:100%; height:100%; text-align:center; z-index:2; display:table;}

.circle-animation{width:83px; height:83px;}
.circle-animation:after{display:block; content:""; width:1px; height:0; margin:0px auto; background-color:#111; background-color:rgba(255,255,255,0.45); margin-bottom:-180px; transition-delay:1.0s;}
.ball-scale-multiple > div{width:83px; height:83px;}

/* 고정 circle :: 중앙 circle 보더 */
.list-txt-thum{display:inline-block; line-height:38px; width:36px; height:36px; border-radius:50%; border:1px solid #fff;}
/* 고정 circle :: 중앙 dot */
.list-txt-inner-thum {display:inline-block; background-color:#fff; width:13px; height:13px; border-radius:50%;}

/* hover전 이미지 */
.list-bg{position:absolute; top:-350px; left:50%; z-index:11; margin-left:-121.5px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); width:243px; height:243px; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -webkit-transform: scale(0.33); -moz-transform: scale(0.33); -ms-transform: scale(0.33); -o-transform: scale(0.33); transform: scale(0.33); -webkit-box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.5); box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.5);}
.list-bg img{width:100%; height:100%;}
.list-bg p{position:absolute; top: 30px; width: 100%; height:48px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.list-bg p span{display: table; width: 100%; height: 48px;}
.list-bg p span em{display: table-cell; vertical-align: middle; font-size: 16px; font-weight: 400; line-height: 24px; color: #444;}
/* 이미지 높이조절 추가css */
.list-bg01-01{top:-300px;}
.list-bg03-01{top:-180px;}
.list-bg03-03{top:-175px;}

/* hover후 이미지 */
.list-box:hover .list-bg{opacity:1.0;filter:Alpha(opacity=100); visibility:visible; transform:scale(1); -webkit-box-shadow: 1px 1px 20px 5px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 20px 5px rgba(0,0,0,0.5); box-shadow: 1px 1px 20px 5px rgba(0,0,0,0.5);} 

/* hover시 점선 */
.circle-animation > .list-box:hover:before{height:87px; opacity:1.0;filter:Alpha(opacity=100); -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}

/* dot및 이미지 opacity */
.main-visual-item .ball-scale-multiple,
.main-visual-item .circle-animation > .list-box{opacity:1.0;filter:Alpha(opacity=100);}



/* 메인 비주얼 :: 버튼 */
.main-visual-con .slick-dots{position:absolute; width: 100%; top:180px; left: 0; text-align:center; z-index: 999;}
.main-visual-con .slick-dots li{display:inline-block; margin:0 3px;}
.main-visual-con .slick-dots li button{
	position: relative; cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:9px; height:17px; /* background-color:rgba(193,193,193,0.5); */ background-color:rgba(233,233,233,0.5); -webkit-transform: skew(-25deg);
	-moz-transform: skew(-25deg); -ms-transform: skew(-25deg); -o-transform: skew(-25deg); transform: skew(-25deg);}
.main-visual-con .slick-dots li.slick-active button{width: 9px;}		/* 버튼 active */

.main-visual-con .slick-dots li button:before{width: 0; height: 17px; content: ''; position: absolute; top: 0; left: 0; /* background-color:rgba(193,193,193,1); */background-color:rgba(233,233,233,1); -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; transition: all 0s;}
.main-visual-con .slick-dots li.slick-active button:before{width: 100%; -webkit-transition: all 4s; -moz-transition: all 4s; -ms-transition: all 4s; -o-transition: all 4s; transition: all 4s;}


/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{position:absolute; width:20px; height:20px; top:180px; cursor:pointer; border:0; cursor:pointer; z-index: 1000; font-size:0;}
.main-visual-con .slick-arrow.slick-prev{right:50%; margin-right: 40px; background:url("/images/button/main_prev_btn.png") center center no-repeat}
.main-visual-con .slick-arrow.slick-next{left:50%; margin-left: 40px; background:url("/images/button/main_next_btn.png") center center no-repeat}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit{margin-bottom:55px; letter-spacing:-0.5px; color:#333; font-size:40px; font-weight:500; text-align:center;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(공지사항,기업소개,온라인문의) -------- */
#mainContent1{padding:80px 0 95px;}
.main-customer-con{margin: 0 -3%;}
.main-customer-con .customer-inner{position: relative; float: left; width: 27.33%; margin: 0 3%;}
.main-customer-con .customer-inner:before{position: absolute; top: 0; left: -11%; display: block; content: ''; width: 1px; height: 227px; background-color: #ddd;}
.main-customer-con .customer-inner:first-child:before{display: none;}

/* 공지사항 */
.main-board-box{position:relative; float:left; width:47%}
.customer-inner .main-board-tit{color:#333; font-size:22px; letter-spacing: -0.5px; font-weight:500; padding-bottom:20px;}
.customer-inner{}
.customer-inner li{overflow:hidden; position:relative; margin-top:17px;}
.customer-inner li:first-child{margin-top:15px;}
.customer-inner li .bbs-tit{display:block; float:left; width:100%; color:#777; font-size:15px; letter-spacing:-0.5px; font-weight: 300; line-height: 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.customer-inner .board-more-btn{float: right; display: inline-block; font-size: 14px; font-weight: 300; letter-spacing: -0.5px; color: #134d99;}
.customer-inner .board-more-btn i{display: inline-block; margin-left: 5px; font-size:14px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
/* 배너 */
.customer-inner{float:right; width:47%;}
.customer-inner .img-con{}
.customer-inner .img-con a{display:block; position:relative;}
.customer-inner .img-con a .main-board-banner-thumb{display:block; overflow:hidden; position:relative; height:0; padding-top: 189px;/* padding-top:47.25%; */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.customer-inner .img-con a .main-board-banner-thumb img{position:absolute; top:0px; left:50%; margin-left: -200px; width:400px; height:189px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

@media all and (min-width:800px){
	.customer-inner .img-con a:hover .main-board-banner-thumb img{transform:scale(1.06);}
	.customer-inner .board-more-btn:hover i{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
	.customer-inner li .bbs-tit:hover{color: #134d99;}
}




/* -------- 메인 컨텐츠 :: 컨텐츠2(product) -------- */
#mainContent2{background: url("../images/main/main_con02_bg.jpg") center center no-repeat; -webkit-background-size: cover; background-size: cover;}
#mainContent2 .area-box{padding-top:95px; padding-bottom: 100px;}
#mainContent2 .main-tit{color: #fff;}
.main-prd-con{}
ul.main-prd-list{margin: 0 -13px; height: 174px;}
ul.main-prd-list li{float: left; margin: 0 13px; width: 100%; height: 174px; position: relative;}
ul.main-prd-list li a{position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 170px; background-color: #fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
ul.main-prd-list li a .img-con{float: left; width: calc(52% - 20px); padding-left: 20px; display: table; table-layout: fixed; height: 170px;}
ul.main-prd-list li a .img-con span{display: table-cell; vertical-align: middle; text-align: right;}
ul.main-prd-list li a .img-con span img{display: inline-block; max-width: 100%; height: auto;}
ul.main-prd-list li a .txt-con{float: left; width: calc(48% - 20px); padding-right: 20px; display: table; table-layout: fixed; height: 170px;}
ul.main-prd-list li a .txt-con p{padding-left: 17%; display: table-cell; vertical-align: middle; font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -0.25px; color: #111; -ms-word-break: keep-all; word-break: keep-all;}


@media all and (min-width:800px){
	ul.main-prd-list li a:hover {left: -4px; bottom: 4px;}
}



/* 슬라이드 버튼 */
ul.main-prd-list .slick-arrow{position: absolute; top: -100px; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,0.8); text-align: center; line-height: 68px;}
ul.main-prd-list .slick-arrow.slick-prev{left: 13px;}
ul.main-prd-list .slick-arrow.slick-next{right: 13px;}
ul.main-prd-list .slick-arrow.slick-prev i, .slick-arrow.slick-next i{font-size: 16px; color: rgba(255,255,255,0.8);}



/* -------- 메인 컨텐츠 :: 컨텐츠3(연구기술) -------- */
#mainContent3{padding:100px 0;}
.main-quick-menu-list{}
.main-quick-menu-list .quick-menu-item{float:left; width:33.33%;}
.main-quick-menu-list .quick-menu-item a{display:block; position:relative; width:100%; padding-top:96%; height:0; overflow: hidden;}
.main-quick-menu-list .quick-menu-item a .quick-menu-thumb{display: block; width:100%; height:100%; position: absolute; top: 0; left: 0;}
.main-quick-menu-list .quick-menu-item a .quick-menu-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.main-quick-menu-list .quick-menu-item a .quick-menu-thumb .m-img{display: none;}
.main-quick-menu-list .quick-menu-item .quick-menu-item-inner{overflow:hidden; display:block; position:absolute; top:15px; left:15px; bottom:15px; right:15px;}
.main-quick-menu-list .quick-menu-item .item-txt-box {position:absolute; width: 100%; top:16%; left:0; right:0; text-align: center;}
.main-quick-menu-list .quick-menu-item .item-txt-box span, 
.main-quick-menu-list .quick-menu-item .item-txt-box strong{display:inline-block; width: 100%; letter-spacing:-0.5px; color:#333; margin-bottom:15px; word-break:keep-all;}
.main-quick-menu-list .quick-menu-item .item-tit{font-size:28px; font-weight:500; color: #555;}
.main-quick-menu-list .quick-menu-item .item-sub-tit{font-size:16px; line-height: 24px; font-weight:300;}
.main-quick-menu-list .quick-menu-item .item-txt-box .cir{display: inline-block; position: relative; width: 35px; height: 35px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #aaa; text-align: center;}
.main-quick-menu-list .quick-menu-item .item-txt-box .cir i{position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; font-size: 16px; color: #fff; line-height: 35px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
/* 가운데 컨텐츠 추가 css */
.main-quick-menu-list .quick-menu-item.quick-menu-item2 .item-txt-box span, 
.main-quick-menu-list .quick-menu-item.quick-menu-item2 .item-txt-box strong{color: #fff;}
.main-quick-menu-list .quick-menu-item.quick-menu-item2 .item-sub-tit{opacity:0.8;filter:Alpha(opacity=80);}

@media all and ( min-width: 800px ){
	.main-quick-menu-list .quick-menu-item a:hover .quick-menu-thumb img{-webkit-transform: scale(1.1) rotate(0.02deg); -moz-transform: scale(1.1) rotate(0.02deg); -ms-transform: scale(1.1) rotate(0.02deg); -o-transform: scale(1.1) rotate(0.02deg); transform: scale(1.1) rotate(0.02deg);}
	.main-quick-menu-list .quick-menu-item a:hover .item-txt-box .cir i{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
}





/* -------- 메인 컨텐츠 :: 컨텐츠4(경영방침) -------- */
#mainContent4{}
.main-rule-con{}
ul.main-rule-list{}
ul.main-rule-list li{width: 50%; float: left;}
ul.main-rule-list li a{display: block; position:relative; width:100%; padding-top:54.4%; height:0; overflow: hidden;}
ul.main-rule-list li a .rule-list-thumb{display: block; width:100%; height:100%; position: absolute; top: 0; left: 0;}
ul.main-rule-list li a .rule-list-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
ul.main-rule-list li a .rule-list-inner{position:absolute; width: 100%; bottom:0; left:0; right:0;}
ul.main-rule-list li a .rule-list-inner .txt-box{position: relative; display: table; table-layout: fixed; margin: 0 auto; padding: 0 50px; width: 100%; height: 90px; max-width: 450px; background-color: #fff; letter-spacing: -0.5px;}
ul.main-rule-list li a .rule-list-inner .txt-box .txt-box-inner{width: 100%; padding-right: 40px; display: table-cell; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul.main-rule-list li a .rule-list-inner .txt-box .tit{display: inline-block; width: 100px; vertical-align: middle; font-size: 24px; font-weight: 500; color: #333;}
ul.main-rule-list li a .rule-list-inner .txt-box .sub-tit{display: inline-block; width: calc(100% - 105px); vertical-align: middle; font-size: 15px; font-weight: 300; color:rgba(51,51,51,0.8); line-height: 1.2; -ms-word-break: keep-all; word-break: keep-all;}
ul.main-rule-list li a .rule-list-inner .txt-box .cir{margin-top: 27.5px; margin-right: -20px; float: right; display: inline-block; position: relative; width: 35px; height: 35px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #aaa; text-align: center;}
ul.main-rule-list li a .rule-list-inner .txt-box .cir i{position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; font-size: 16px; color: #fff; line-height: 35px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}


@media all and ( min-width: 800px ){
	ul.main-rule-list li a:hover .rule-list-thumb img{-webkit-transform: scale(1.1) rotate(0.02deg); -moz-transform: scale(1.1) rotate(0.02deg); -ms-transform: scale(1.1) rotate(0.02deg); -o-transform: scale(1.1) rotate(0.02deg); transform: scale(1.1) rotate(0.02deg);}
	ul.main-rule-list li a:hover .rule-list-inner .txt-box .cir i{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
}




/* -------- 메인 컨텐츠 :: 컨텐츠5(퀵메뉴) -------- */
#mainContent5{padding: 100px 0 90px;}
/* 아이콘 리스트 컨텐츠 */
.icon-list-wrapper{}
.icon-list-wrapper li{position: relative; float: left; width: 25%;}
.icon-list-wrapper li:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 1px; height: 88px; background-color: #ccc;}
.icon-list-wrapper li:first-child:before{display: none;}
.icon-list-wrapper li a{display: block; width: 100%; height: 88px;}
.icon-list-wrapper li a > div{display: table; table-layout: fixed; width: calc(100% - 60px); height: 88px; padding: 0 30px;}
.icon-list-wrapper li a .cir-icon{position: absolute; top: 0; left: 0; display: inline-block; width: 88px; height: 88px; -webkit-border-radius: 100%;
-moz-border-radius: 100%; border-radius: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.icon-list-wrapper li.li-01 .cir-icon{background: transparent url("../images/main/main_con04_img01.png") center center no-repeat;}
.icon-list-wrapper li.li-02 .cir-icon{background: transparent url("../images/main/main_con04_img02.png") center center no-repeat;}
.icon-list-wrapper li.li-03 .cir-icon{background: transparent url("../images/main/main_con04_img03.png") center center no-repeat;}
.icon-list-wrapper li.li-04 .cir-icon{background: transparent url("../images/main/main_con04_img04.png") center center no-repeat;}
.icon-list-wrapper li a p{position: relative; width: 100%; padding-left: 110px; display: table-cell; vertical-align: middle; font-size: 22px; font-weight: 500; letter-spacing: -0.5px; color: #333; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-word-break: keep-all; word-break: keep-all;}
.icon-list-wrapper li a p .arrow{margin-top: 10px; display: block; font-size: 14px; font-weight: 300; color: #134d99; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.icon-list-wrapper li a p .arrow i{display: inline-block; margin-left: 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}

@media all and ( min-width: 800px ){
	.icon-list-wrapper li a:hover .cir-icon {animation: navani 0.3s ease-in-out;}
	.icon-list-wrapper li.li-01 a:hover .cir-icon{background: #134d99 url("../images/main/main_con04_img01_on.png") center center no-repeat;}
	.icon-list-wrapper li.li-02 a:hover .cir-icon{background: #134d99 url("../images/main/main_con04_img02_on.png") center center no-repeat;}
	.icon-list-wrapper li.li-03 a:hover .cir-icon{background: #134d99 url("../images/main/main_con04_img03_on.png") center center no-repeat;}
	.icon-list-wrapper li.li-04 a:hover .cir-icon{background: #134d99 url("../images/main/main_con04_img04_on.png") center center no-repeat;}
	.icon-list-wrapper li a:hover p{color: #134d99;}
	.icon-list-wrapper li a:hover p .arrow i{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
}