@charset "utf-8";

/*추가 200629*/

/* ******************  메인 비주얼 ********************** */


/* 메인 비주얼 :: 이미지 */
.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 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute; top:50%; left:0px; width:100%; margin-top:-80px;} /* margin-top은 조정 (텍스트영역 높이의 반) */
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-txt3,
.main-visual-item .main-visual-txt-con .main-visual-more-btn{
	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; font-size:20px; letter-spacing:0.5px;  font-weight: 300; color:#fff; margin-bottom:10px; }
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:45px;  font-weight: 500;  letter-spacing:-0.75px; color:#fff; margin-bottom:20px; margin-top:20px; -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-txt3{font-size:20px; letter-spacing:-0.75px; color:rgba(255, 255, 255, 0.8); font-weight: 500; line-height:26px; margin-bottom:50px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}

.main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; font-size:15px; font-weight:600; color:#fff; width:60px; height:60px; text-align:center; line-height: 60px; border:2px solid rgba(255, 255, 255, 0.2); border-radius:50%; -webkit-transition-delay:0.8s;-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-ms-transition-delay:0.8s;transition-delay:0.8s;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn::after {content:""; position:absolute; width:65px; height:1px; background-color:rgba(255, 255, 255, 0.2); right:-67px; top:50%;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{text-shadow:1px 1px 2px rgba(0, 0, 0, .5);}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
	-ms-transform: scale(1.0,1.0) rotate(0.1deg);
    -o-transform: scale(1.0,1.0) rotate(0.1deg);
    -moz-transform: scale(1.0,1.0) rotate(0.1deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.1deg);
     transform: scale(1.0,1.0) rotate(0.1deg);
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3,
.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);
}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute; width:1400px; left:50%; margin-left: -700px; text-align:left; bottom:100px;}
#mainVisual .slick-dots li{display:inline-block; margin:0 5px ; }
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:12px; height:12px; border:1px solid rgba(255, 255, 255, 0.8); 

	background-color:transparent;
	}
#mainVisual .slick-dots li.slick-active button{background-color:rgba(255, 255, 255, 0.8); }		/* 버튼 active */

/*.main-left-banner{ position:relative;width:1250px; margin:0 auto; z-index:10; min-height:100%;}*/


.main-visual-btn {position:absolute; right:50%; margin-right: -620px; z-index:10; top:20px;  }
.main-visual-btn-inner {background-color:#4475cb; margin-bottom:10px; box-shadow:5px 5px 21px rgba(0, 0, 0, 0.26); -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.main-visual-btn-inner a {display:block; height:100px; width:250px; padding:30px 25px; position:relative; background: url(../img/main/main_b02.jpg) no-repeat;}
.main-visual-btn-inner:first-child {background-color:#0c4da2; }
.main-visual-btn-inner:first-child a {background: url(../img/main/main_b01.jpg) no-repeat;}


.main-visual-btn-inner:last-child {background-color:#31a2ac; }
.main-visual-btn-inner:last-child a {background: url(../img/main/main_b03.jpg) no-repeat;}



.main-visual-btn-inner a p {text-align:right; font-size:17px; line-height: 32px; letter-spacing: -0.75px; color:#fff; font-weight: 300;}
.main-visual-btn-inner a p strong {display:block; font-weight: 500; }
.main-visual-btn-inner a span {position:absolute; right:25px; bottom:20px; font-size:14px; letter-spacing: -0.75px; color:#fff; }

@media all and (max-width:1720px){
	.main-visual-btn {margin-right:0; right:5%;}
}
@media all and ( max-width: 1220px ){
	.main-visual-btn {display:none;}
		/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{margin-top:-30px; margin-left:0px}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:32px; margin-bottom: 5px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:32px; margin-top:0; margin-bottom: 15px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:20px; line-height:25px;  margin-bottom: 25px;}

		/* 메인 비주얼 :: 스크롤아이콘 */
	

	#mainVisual .slick-dots {width:auto; left:20px; margin-left: 0; bottom:45px; }
	#mainVisual .slick-dots li {margin:0 4px;}
	#mainVisual .slick-dots li button {width:10px; height:10px;}
}

@media all and ( max-width: 800px ){
	#mainVisual {height:325px;}
	.main-visual-btn {display:none;}
	/* 메인 비주얼 :: 이미지 */

	.main-visual-m-img img{width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{margin-top:-30px; margin-left:0px}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:20px; margin-bottom: 5px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:20px; margin-top:0; margin-bottom: 15px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:13px; line-height:16px;  margin-bottom: 25px;}

	.main-visual-item .main-visual-txt-con .main-visual-more-btn{width:30px; height:30px; line-height: 30px; font-size:11px;}
	/* 메인 비주얼 :: 화살표 */
	#mainVisual .slick-arrow{display:none !important; width:47px; height:40px; margin-top:-20px; background-size:47px auto !important; } /* 화살표사용시 display:none 삭제 */ 
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}

	#mainVisual .slick-dots {width:auto; bottom:45px; }
	#mainVisual .slick-dots li {margin:0 2px;}
	#mainVisual .slick-dots li button {width:8px; height:8px;}
}



/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height: 643px; position:relative; top:-1px; z-index:1;}	/* 비주얼높이값 이미지에맞게 수정 */
.slick-track,
.slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
#mainVisual .main-visual-list-con, 
#mainVisual .main-visual-con, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.main-visual-item{
	height:100%;
}
/* -------- 메인 비주얼 :: 이미지 -------- */
#mainVisualWrapper{position:relative; width: 100%; height: 643px;}
.main-visual{position: relative; height: 100%;}
.main-visual:before{position:absolute; top:0px; left:-5px; width:5px; height:100%; content:""; background:#fff; z-index:99} /*익스 1px보이는부분 덮는용도*/
.main-visual .slick-slide{overflow:hidden;}
.main-visual .slick-slide .main-visual-wrapper{ 
	overflow:hidden;
	width:100%; height: 100%;
}
/* .main-visual .main-visual-inner {
	width: 100%; height:100%;	
} */
.main-visual .main-visual-inner .m-img{display: none;}
.main-visual .main-visual-inner.m-visual-img{display: none;}
.main-visual .slick-slide .main-visual-inner{
	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 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual .slick-slide .main-visual-inner .m-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 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}

/* 첫 시작 이미지 효과 */
/* .main-visual .main-visual-inner .pc-img{
	position: absolute; top: 0; left: 50%; margin-left: -960px; display: block; width: 1920px; height:100%;
	-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 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual .start-item .main-visual-inner .pc-img, .main-visual .start-item .main-visual-inner .m-img{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}
*/
/* 비주얼 롤링 active */
.main-visual .active-item .main-visual-wrapper {
	
} 
.main-visual .active-item .main-visual-inner{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual .reset-animation .main-visual-inner{
	-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);
}
.slider-progress {
  margin-left:10%;
  margin-top:10px;
  height: 3px;
  background: #eee;
}
.slider-progress .progress {
  width: 0%;
  height: 3px;
  background: #000;
}


/*

.main-visual .slick-prev, .visual-img .slick-next{position:absolute; bottom:100px; left:50%; z-index:1;}
.main-visual .slick-prev{margin-left:-105px;}
.main-visual .slick-next{margin-left:95px;}
.main-visual .slick-dots{position:absolute; bottom:95px; left:0; width:100%; text-align:center;}
.main-visual .slick-dots li{display:inline-block; vertical-align:middle; width:29px; height:29px; background:url(../img/bt/visual_btn.png) no-repeat center center; background-size:cover; font-size:0; text-indent:-9999px; cursor:pointer; margin-left:10px;}
.main-visual .slick-dots li:first-child{margin-left:0;}
.main-visual .slick-dots li.slick-active{background:url(../img/bt/visual_btn_on.png) no-repeat center center; background-size:cover;}


 메인 비주얼 :: 버튼 */
.main-visual .slick-dots{position:absolute; width:1250px; left:50%; margin-left: -625px; text-align:left; bottom:100px;}
.main-visual .slick-dots li{display:inline-block; margin:0 5px ; }
.main-visual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:12px; height:12px; background-color:rgba(255, 255, 255, 0.8); border:1px solid rgba(255, 255, 255, 0.8); 
}
.main-visual .slick-dots li.slick-active button{background-color:transparent;}		


/*테스트
.main-visual .slick-dots{width: 215px; position: absolute; bottom: 0; right: 0;}
.main-visual .slick-dots li{margin-right: 8px;}
.main-visual .slick-dots li button{font-size: 0; width: 11px; height: 11px; border: 3px solid #b1b1b1; background-color: #b1b1b1; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.main-visual .slick-dots li.slick-active button{background-color: #fff; border-color: #132b88;}
*/




/*.main-left-banner{ position:relative;width:1250px; margin:0 auto; z-index:10; min-height:100%;}*/




/* -------- 메인 비주얼 :: 왼쪽영역 -------- */
#mainVisualInfoBox{position:absolute; width: 100%; top:50%; /* margin-top: -156px; */margin-top: -111px; left:0; bottom:90px; z-index: 999;}
#mainVisualInfoBox .slick-list{overflow: visible;}
/* 메인 비주얼 :: 왼쪽 설명 */
#mainVisualInfoBox .main-visual-info-item{position:relative;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt1,
#mainVisualInfoBox .main-visual-info-item .main-visual-txt2,
#mainVisualInfoBox .main-visual-info-item .main-visual-txt3{
	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;
}

#mainVisualInfoBox .main-visual-info-item .main-visual-txt1{
	display:inline-block; color:#fff ; font-size:20px; font-weight:500; line-height:1;
	-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.4s;-ms-transition-delay:0.3s;transition-delay:0.3s;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt1 .pc-txt{display: block;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt1 .m-txt{display: none;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt1 strong{font-weight: 500;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt2{
	margin-top: 20px; color:#212121 ; font-size:45px; line-height: 1; font-weight:500; color: #fff;
	-webkit-transition-delay:0.6s;-moz-transition-delay:0.6s;-o-transition-delay:0.6s;-ms-transition-delay:0.6s;transition-delay:0.6s;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt2 .pc-txt{display: block;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt2 .m-txt{display: none;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt2 strong{font-weight: 500;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt3{
	margin-top: 10px; font-size: 20px; line-height: 26px; font-weight: 400; color: rgba(255,255,255,0.8);
	-webkit-transition-delay:0.9s;-moz-transition-delay:0.9s;-o-transition-delay:0.9s;-ms-transition-delay:0.9s;transition-delay:0.9s; letter-spacing:-0.75px;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt3 .pc-txt{display: block;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt3 .m-txt{display: none;}
#mainVisualInfoBox .main-visual-info-item .main-visual-txt3 strong{font-weight: 300;}

#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn{
	margin-top: 70px;
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateX(-20px); 
    -o-transform: translateX(-20px); 
    -moz-transform: translateX(-20px);
    -webkit-transform: translateX(-20px); 
     transform: translateX(-20px);
	-webkit-transition:all 1.2s, opacity 1.2s 1.1s, transform 1.2s 1.1s;
	-moz-transition:all 1.2s, opacity 1.2s 1.1s, transform 1.2s 1.1s;
	-o-transition:all 1.2s, opacity 1.2s 1.1s, transform 1.2s 1.1s;
	-ms-transition:all 1.2s, opacity 1.2s 1.1s, transform 1.2s 1.1s;
	transition:all 1.2s, opacity 1.2s 1.1s, transform 1.2s 1.1s;
	position:relative; display:inline-block; text-align: center; width:212px; height:52px; line-height:52px; border:3px solid rgba(255,255,255,0.5); color:#fff; font-size:13.5px;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:before,
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:after{
    display:inline-block; position:absolute; top:-3px; content:""; 
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:before{left:-3px; width:3px; height:58px; background-color:#fff}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:after{left:0; width:40px; height:52px; border-top:3px solid #fff; border-bottom:3px solid #fff }
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:hover:before{width:218px}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:hover:after{width:212px}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn span{position:relative; z-index:1;}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn span em{font-weight: 500;}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:hover span{color:#333;}

/* 텍스트 active */
#mainVisualInfoBox .main-visual-info-item.active-item .main-visual-txt1,
#mainVisualInfoBox .main-visual-info-item.active-item .main-visual-txt2,
#mainVisualInfoBox .main-visual-info-item.active-item .main-visual-txt3,
#mainVisualInfoBox .main-visual-info-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);
}
/* 메인 비주얼 :: 화살표 및 번호 */
#mainVisual .main-slick-btn{position:absolute; bottom:5px; width:20px; height:50px; line-height: 50px; text-align: center; cursor:pointer; border:0; cursor:pointer; z-index:999; font-size: 13px; color: #fff;}		/* 버튼이미지에 맞게 크기 수정 */
#mainVisual .main-slick-prev{right: 180px; opacity: 0.6;}
#mainVisual .main-slick-next{right: 60px;}


/* 메인 비주얼 :: 로딩circle */
.main-circle-con{position: relative;}
.circle-line{position:absolute; bottom:5px; right:100px; width:50px; height:50px; z-index: 999;}
.circle-line:before{position:absolute; top:0px; left:0px; width:100%; height:100%; box-sizing:border-box; border:3px solid rgba(255,255,255,0.3); content:"";
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
#halfclip {overflow:hidden; width:50%; height:100%; position:absolute; right:0px; transform-origin: left center; }
.active.circle-line #halfclip {
	animation: cliprotate 8s 1;
	-webkit-animation: cliprotate 8s 1;
	-ms-transform:rotate(180deg); -webkit-tramain-slick-btnnsform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);
} 
@keyframes cliprotate {
	0% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50.01% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
	100% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
}
@-webkit-keyframes cliprotate {
	0% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50.01% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
	100% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
}
.halfcircle {
	box-sizing: border-box; height:100%; position:absolute; right:0; visibility:hidden;
	border: solid 3px transparent; border-top-color: #fff; border-left-color: #fff;
	border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%;
	transition: visibility 0.2s cubic-bezier(0.65, 0.02, 0.23, 1) ;
}
#clipped {width:200%; transform: rotate(135deg); }
.active .halfcircle{visibility:visible;}
.active #clipped{animation: rotate 4s linear 2;}
.active #circle-fixed{animation: showfixed 8s 1;}
@keyframes rotate {
	0% {transform: rotate(-45deg);}
	100% {transform: rotate(135deg);}
}
#circle-fixed {
	width:50px;
	transform: rotate(135deg);  
	opacity: 1;
}
@keyframes showfixed {
  0% {opacity: 0;}
  49.99% {opacity: 0;}
  50% {opacity: 1;}
 100% {opacity: 1;}
}

.halfcircle.clear{border-color:transparent;}

/* dot 배경 및 일시정지 추가 */
.main-dot-con{position:absolute; width: 50px; height: 50px; text-align:left; top: 0; left: 0; text-align: center;}
.main-dot-con .pause, .main-dot-con .play{}
.main-dot-con .pause a, .main-dot-con .play a{width: 100%; line-height: 50px; display: block;}
.main-dot-con .pause a i, .main-dot-con .play a i{line-height: 50px; font-size: 17px; color: #fff;}
.main-dot-con .play{display:none;}
.main-dot-con.active .play {display:block;}
.main-dot-con.active .pause {display:none;}







/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit{font-size: 37px; height: 37px; line-height: 34px; font-weight: 500; letter-spacing: -0.25px; color: #111; text-align: center; margin-bottom: 40px;}
.main-tit em{display: inline-block; font-weight: 500; color: #00397b;}

/* -------- 메인 컨텐츠 01:: WHO WE ARE, NEWS -------- */
#mainContent1{padding: 50px 0; background-color: #f4f4f4;}
/* WHO WE ARE */
.main-who-con{float: left; width: calc(100% - 570px); /* width: 830px; */}
.main-who-con .tit{font-size: 28px; height: 34px; line-height: 34px; font-weight: 500; letter-spacing: -0.25px; color: #111;}
.main-who-con .tit em{display: inline-block; font-weight: 500; color: #00397b;}
.main-who-con .tit .img{margin-left: 27px; display: inline-block;}
.main-who-con .tit .img img{display: inline-block; margin-right: 10px;}
.main-who-con .txt{padding-top: 20px; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -1px; color: #999; -ms-word-break: keep-all; word-break: keep-all;}
.main-who-con .txt .m-br{display: none;}
.main-who-con .txt b{display: inline-block; font-weight: 500; color: #4a4a4a;}
.main-who-con .m-img{display: none;}







/* -------- 메인 컨텐츠 01:: WHO WE ARE, NEWS -------- */
#mainContent100{padding: 0px 0; background-color: #ffffff;}
/* WHO WE ARE */
.main-who-con{float: left; width: calc(100% - 570px); /* width: 830px; */}
.main-who-con .tit{font-size: 28px; height: 34px; line-height: 34px; font-weight: 500; letter-spacing: -0.25px; color: #111;}
.main-who-con .tit em{display: inline-block; font-weight: 500; color: #00397b;}
.main-who-con .tit .img{margin-left: 27px; display: inline-block;}
.main-who-con .tit .img img{display: inline-block; margin-right: 10px;}
.main-who-con .txt{padding-top: 20px; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -1px; color: #999; -ms-word-break: keep-all; word-break: keep-all;}
.main-who-con .txt .m-br{display: none;}
.main-who-con .txt b{display: inline-block; font-weight: 500; color: #4a4a4a;}
.main-who-con .m-img{display: none;}









#mainContent100_m{ display:none;}
#mainContent1_m{ display:none;}


/* NEWS */
.main-news-con{position: relative; float: right; width: 530px;}
.main-news-tit{width: 215px; position: absolute; top: 0; right: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.25px; color: #1b1b1b;}
.main-news-tit em{display: inline-block; font-weight: 500; color: #00397b;}
.main-news-list{}
.main-news-list-inner{}
.main-news-list-inner li{float: left;}
.main-news-list-inner li a{display: inline;}
.main-news-list-inner li a .img-con{position: relative; display: block; float: left; width: 293px; height: 171px; border-radius:5px; overflow:hidden;}
/*.main-news-list-inner li a .img-con img{position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%;}*/

.main-news-list-inner li a .img-con img{position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; width: 100%; }
.main-news-list-inner li a .txt-con{width: 215px; float: right;}
.main-news-list-inner li a .txt-con .txt{margin-top: 40px; font-size: 16px; font-weight: 300; line-height: 26px; letter-spacing: -0.75px; color: #333; width:100%; height:62px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -ms-word-break: keep-all; word-break: keep-all;}

.main-news-list .slick-dots{width: 215px; position: absolute; bottom: 0; right: 0;}
.main-news-list .slick-dots li{margin-right: 8px;}
.main-news-list .slick-dots li button{font-size: 0; width: 11px; height: 11px; border: 3px solid #b1b1b1; background-color: #b1b1b1; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.main-news-list .slick-dots li.slick-active button{background-color: #fff; border-color: #132b88;}




/* -------- 메인 컨텐츠 02:: MARKET -------- */
#mainContent2{padding: 105px 0 0;}
.main-market-con{}

ul.main-market-list{max-width: 1034px; margin: 0 auto; width: 100%; position: relative;}
ul.main-market-list li{float: left; margin: 0 72px; position: relative;}
ul.main-market-list li a{display: block; position: relative; display: block; height: 0; padding-top: 52%;}
ul.main-market-list li a .img-con{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 0; padding-top: 52%; overflow: hidden; border-radius:5px;}
ul.main-market-list li a .img-con img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%;
-webkit-transform: scale(1.2) rotate(0.02deg); -moz-transform: scale(1.2) rotate(0.02deg); -ms-transform: scale(1.2) rotate(0.02deg); -o-transform: scale(1.2) rotate(0.02deg); transform: scale(1.2) rotate(0.02deg); -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s;}
ul.main-market-list li a .img-con:before{position: absolute; top: 0; left: 0; z-index: 1; display: block; content: ''; width: 100%; height: 100%; background-color: #000; opacity: 0.6; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s;}

ul.main-market-list li a:before{
	position: absolute; top: -57px; right: -7px; display: block; content: ''; width: 178px; height: 57px; background: url("../images/main/point_png01.png") 0 0 no-repeat;
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translate(-50px, 50px); 
    -o-transform: translate(-50px, 50px); 
    -moz-transform: translate(-50px, 50px);
    -webkit-transform: translate(-50px, 50px); 
    transform: translate(-50px, 50px);
	-webkit-transition:opacity 0.3s, transform 0.3s;
	-moz-transition:opacity: 0.3s, transform 0.3s;
	-o-transition:opacity 0.3s, transform 0.3s;
	-ms-transition:opacity 0.3s, transform 0.3s;
	transition:opacity 0.3s, transform 0.3s;
	-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;-ms-transition-delay:0s;transition-delay:0s;
	/* -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s; */
}
ul.main-market-list li:before{
	position: absolute; bottom: -65px; left: 17px; display: block; content: ''; width: 155px; height: 65px; background: url("../images/main/point_png02.png") 0 0 no-repeat;
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translate(50px, -50px); 
    -o-transform: translate(50px, -50px); 
    -moz-transform: translate(50px, -50px);
    -webkit-transform: translate(50px, -50px); 
    transform: translate(50px, -50px);
	-webkit-transition:opacity 0.3s, transform 0.3s;
	-moz-transition:opacity: 0.3s, transform 0.3s;
	-o-transition:opacity 0.3s, transform 0.3s;
	-ms-transition:opacity 0.3s, transform 0.3s;
	transition:opacity 0.3s, transform 0.3s;
	-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;-ms-transition-delay:0s;transition-delay:0s;
	/* -webkit-transition-delay:0.7s;-moz-transition-delay:0.7s;-o-transition-delay:0.7s;-ms-transition-delay:0.7s;transition-delay:0.7s; */
}
ul.main-market-list li a .txt-con{
	position: absolute; bottom: 0; right: 0; width: 365px; height: 100px; opacity: 0; background-color: #fff; text-align: center; 
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(50px); 
    -o-transform: translateY(50px); 
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px); 
    transform: translateY(50px);
	-webkit-transition:opacity 0.3s, transform 0.3s;
	-moz-transition:opacity: 0.3s, transform 0.3s;
	-o-transition:opacity 0.3s, transform 0.3s;
	-ms-transition:opacity 0.3s, transform 0.3s;
	transition:opacity 0.3s, transform 0.3s;
	-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;-ms-transition-delay:0s;transition-delay:0s;
	/* -webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;-ms-transition-delay:1s;transition-delay:1s; */
}
ul.main-market-list li a .txt-con .en-tit{padding-top: 25px; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; color: #132b88;}
ul.main-market-list li a .txt-con .kr-tit{padding-top: 15px; font-size: 24px; font-weight: 400; letter-spacing: -0.75px; color: #333;}

/* 슬라이드 추가 css */
ul.main-market-list .slick-list{overflow: visible;}
ul.main-market-list .slick-arrow{position: absolute; z-index: 1; top: 50%; margin-top: -29px; width: 31px; height: 58px; font-size: 0; border: 0;}
ul.main-market-list .slick-arrow.slick-prev{left: 0; margin-left: -15.5px; background: url("../images/button/arrow_prev_gr.png") 0 0 no-repeat;}
ul.main-market-list .slick-arrow.slick-next{right: 0; margin-right: -15.5px; background: url("../images/button/arrow_next_gr.png") 0 0 no-repeat;}
ul.main-market-list li.slick-current a .img-con:before{opacity: 0;}

@media all and ( min-width: 800px ){
	/* .active-item 효과 */
	ul.main-market-list li.slick-current a .img-con img{-webkit-transform: scale(1.0) rotate(0deg); -moz-transform: scale(1.0) rotate(0deg); -ms-transform: scale(1.0) rotate(0deg); -o-transform: scale(1.0) rotate(0deg); transform: scale(1.0) rotate(0deg);}

	ul.main-market-list li.slick-current a .txt-con{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
	-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;
	-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;-ms-transition-delay:1s;transition-delay:1s;
	}

	ul.main-market-list li.slick-current a:before{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translate(0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -moz-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px); 
    transform: translate(0px, 0px);
	-webkit-transition:opacity 0, transform 0;
	-moz-transition:opacity 0, transform 0;
	-o-transition:opacity 0, transform 0;
	-ms-transition:opacity 0, transform 0;
	transition:opacity 0, transform 0;
	-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;
	-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;
	}

	ul.main-market-list li.slick-current:before{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translate(0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -moz-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px); 
    transform: translate(0px, 0px);
	-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;
	-webkit-transition-delay:0.7s;-moz-transition-delay:0.7s;-o-transition-delay:0.7s;-ms-transition-delay:0.7s;transition-delay:0.7s;
	}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(연구기술) mukmuk -------- */
#mainContent3{padding:40px 0;}
.main-quick-menu-list{}
/*.main-quick-menu-list .quick-menu-item{float:left; width:25%; }*/

.main-quick-menu-list .quick-menu-item{float:left; width:33.33%; padding: 8px; 
    box-sizing: border-box; }

/* 1. 사각형 박스 역할을 하는 a 태그에 라운드와 overflow 추가 */
.main-quick-menu-list .quick-menu-item a{
    display:block; 
    position:relative; 
    width:100%; 
    padding-top:126%; 
    height:0px; 
    overflow: hidden;    /* 삐져나오는 자식 요소들을 잘라냄 */
    border-radius: 12px; /* ★ 박스 모서리 라운드 크기 (원하는 대로 조절) */
}

/* 2. 이미지를 감싸는 부모 썸네일 박스에도 똑같이 라운드 적용 */
.main-quick-menu-list .quick-menu-item a .quick-menu-thumb{
    display: block; 
    width:100%; 
    height:100%; 
    position: absolute; 
    top: 0; 
    left: 0;
    overflow: hidden;
    border-radius: 12px; /* ★ a 태그와 동일하게 적용 */
}

/* 3. 이미지 자체에도 라운드 유지 */
.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;
    border-radius: 12px; /* ★ 이미지도 부모와 맞춰줌 */
}

.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:400;}
.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);}

/* 가운데 컨텐츠 추가 css */
.main-quick-menu-list .quick-menu-item.quick-menu-item4 .item-txt-box span, 
.main-quick-menu-list .quick-menu-item.quick-menu-item4 .item-txt-box strong{color: #fff;}
.main-quick-menu-list .quick-menu-item.quick-menu-item4 .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(mice) mukmuk-------- */
#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: 250px; max-width: 450px; background-color: ; 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: 450px; vertical-align: middle; text-align:center; font-size: 28px; font-weight: 500; color: #fff;}
ul.main-rule-list li a .rule-list-inner .txt-box .sub-tit-main{display: inline-block; width: calc(100% - 5px); margin-top:10px; vertical-align: middle; text-align:center; font-size: 16px; font-weight: 500; color:rgba(255,255,255,0.9); 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{position: absolute; top:50px; left:50%; margin-left:-20px; margin-top: 25px; 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);}
}












/* -------- 메인 컨텐츠 :: 컨텐츠2(product) -------- */
#mainContent8{background: url("../img/main/main_con02_bg.jpg") center center no-repeat; -webkit-background-size: cover; background-size: cover;}
#mainContent8 .area-box{padding-top:95px; padding-bottom: 100px;}
#mainContent8 .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(22% - 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(78% - 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);}







/* -------- 메인 컨텐츠 :: 컨텐츠1(공지사항,기업소개,온라인문의) -------- */
/*#mainContent7{padding:80px 0 95px;}*/
#mainContent7{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{position: relative; float: left; width: 18%; 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;}


@media all and (max-width:800px){
	#mainContent7{padding:80px 0 25px;}
}





/* -------- 메인 컨텐츠 : 새롭게 변경 20220727: 컨텐츠1(공지사항,기업소개,온라인문의) -------- */
/*#mainContent9{padding:80px 0 95px;}*/
#mainContent9{padding:80px 0 95px;}
.main-customer-con_9{margin: 0 -3%;}

.main-customer-con_9 .customer-inner{position: relative; float: left; width: 18%; margin: 0 3%;}
.main-customer-con_9 .customer-inner:before{position: absolute; top: 0; left: -11%; display: block; content: ''; width: 1px; height: 227px; background-color: #ddd;}
.main-customer-con_9 .customer-inner:first-child:before{display: none;}

/*.main-customer-con_9{float: left; width: calc(100% - 570px); /* width: 830px; */}*/
.main-customer-con_9 .tit{font-size: 28px; height: 34px; line-height: 34px; font-weight: 500; letter-spacing: -0.25px; color: #111;}
.main-customer-con_9 .tit em{display: inline-block; font-weight: 500; color: #00397b;}
.main-customer-con_9 .tit .img{margin-left: 27px; display: inline-block;}
.main-customer-con_9 .tit .img img{display: inline-block; margin-right: 10px;}
.main-customer-con_9 .txt{padding-top: 20px; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -1px; color: #999; -ms-word-break: keep-all; word-break: keep-all;}
.main-customer-con_9 .txt .m-br{display: none;}
.main-customer-con_9 .txt b{display: inline-block; font-weight: 500; color: #4a4a4a;}
.main-customer-con_9 .m-img{display: none;}


@media all and (max-width:800px){
	#mainContent9{padding:80px 0 25px;}
}















/* 공지사항 */
.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: 500; line-height:18px; 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{ width:100%}
.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: 225px;/* 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:225px; -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;}
}



























/* ******************  메인 오른쪽 퀵메뉴 ********************** */
.sub-wrap #rightBar{top: 114px;}

#rightBar{
	position:fixed; /* top:50%; margin-top:-140px; */top: 230px; right:90px; z-index:3; 
	transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#rightBar > ul {width:90px;}
#rightBar > ul > li{
	background-color: #0089d0; width:80px; height:80px; margin-top: 2px;
	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;
}
#rightBar > ul > li:first-child{background-color: #003e78; margin-top: 0;}
#rightBar > ul > li:last-child {background-color: #76beea;}
#rightBar > ul > li > a{display:block; text-align:center; color:#fff; font-weight: 500; font-size: 10px; line-height: 14px; padding:19px 5px 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
#rightBar > ul > li > a > span{display: block; width: 100%; height: 25px; text-align: center;}
#rightBar > ul > li > a > span img{display: inline-block;}


#rightBar.active > ul > li{-webkit-transition-delay:0.6s;-moz-transition-delay:0.6s;-o-transition-delay:0.6s;-ms-transition-delay:0.6s;transition-delay:0.6s;}
#rightBar.active > ul > li:first-child {-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.4s;-ms-transition-delay:0.3s;transition-delay:0.3s;}
#rightBar.active > ul > li:last-child {-webkit-transition-delay:0.9s;-moz-transition-delay:0.9s;-o-transition-delay:0.9s;-ms-transition-delay:0.9s;transition-delay:0.9s;}

#rightBar.active > ul > li{
opacity:1.0;filter:Alpha(opacity=100);
-ms-transform: translateX(-20px); 
-o-transform: translateX(-20px); 
-moz-transform: translateX(-20px);
-webkit-transform: translateX(-20px); 
 transform: translateX(-20px);}


/* @media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;}
} */



/*메인 배너추가*/
.main-link-list-inner {float:left; width:32%; }
.main-link-list-inner a {display:block; position:relative; overflow:hidden;}
.main-link-tit {position:absolute; left:11%; width:80%; top:70px; text-align:center;}
.main-link-tit h3 {font-size:24px; color:#fff; font-weight: 500;}
.main-link-tit p {display:inline-block; font-size:13px; line-height: 15px; color:#fff; margin-top: 20px; padding-bottom: 2px;  opacity:0.5;filter:Alpha(opacity=50);  }

.main-link-icon { color:#fff; margin-top: 5px;}




.main-link-list-inner .cir{ position:absolute; margin-top:-80px; left: -50%; 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%;  text-align: center;}
.main-link-list-inner  .cir i{position: absolute; margin: auto;  top: 0; right: 0; left: 0; bottom: 0; font-size: 25px; 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 (max-width:1200px){
	


.main-link-tit h3 {font-size:20px; }
.main-link-tit p {display:inline-block; font-size:12px; line-height: 15px;  }



}






@media all and (max-width:800px){
	

	.main-link-list {margin-top: 20px;}
	.main-link-list-inner {width:49%;}
	.main-link-list-inner:first-child {margin-left: 0;}


	
	.main-link-tit {top:55px; left:5%; width:90%;}
	.main-link-tit h3 {font-size:18px;}
	.main-link-tit p {margin-top: 10px;}

	.main-link-icon {right:5%; bottom:25px;}
	.main-link-icon img {max-width:90px;}
	
	
	
	
	
	.main-link-list-inner .cir{ margin-top:-40px; }
.main-link-list-inner  .cir i{}

}

@media all and (max-width:480px){
	.main-link-list-inner {width:100%; margin-left: 0;}
	.main-link-list-inner:first-child {margin-bottom: 10px;}

	.main-link-img {padding-top: 50%;}
}








/**/

/* --------- MAIN::MENU --------- */
#mainMenu {background:url("../img/main/main_quickmenu_bg.jpg") no-repeat center top; background-size:cover; padding:70px 0; background-repeat: no-repeat;
    background-attachment: fixed;}
#mainMenu .main-menu-tit  {float:left; width:38%; margin-top:20px;  }
#mainMenu .main-menu-tit .main-sub-tit {font-size:16px; line-height: 50px; letter-spacing: -0.5px; color:#fff; opacity:0.5;filter:Alpha(opacity=50); font-weight: 600;}
#mainMenu .main-menu-tit h2 {font-size:40px; line-height: 46px; color:#76bfea; font-weight: 500; padding-top:10px; position:relative; letter-spacing:-0.9px; margin-bottom: 20px;}
#mainMenu .main-menu-tit h2 span {  color:#fff;}
#mainMenu .main-menu-tit h2::after {content:""; position:absolute; width:30px; height:5px; background-color:#76beea;  left:0; top:0;}
#mainMenu .main-menu-tit .main-txt {font-size:17px; line-height: 24px; letter-spacing: -0.5px; color:#fff; opacity:0.6;filter:Alpha(opacity=60);}




.main-menu-list {float:right; width:62%; margin-top:20px; margin-bottom:10px; right:0;}
.main-menu-list ul li {float:left; margin-left:90px; min-width:140px; padding:20px 0px;  border:1px solid #fff;   background:rgba(255, 255, 255, 0.2);}
.main-menu-list ul li:first-child {margin-left: 0;}

.main-menu-list ul li a {display:block; text-align:center;}

.main-menu-list ul li a h3 {font-size:20px; line-height: 25px; letter-spacing: -1px; color:#fff; font-weight: 500; margin-top: 25px; margin-bottom: 5px;}
.main-menu-list ul li a p {font-size:14px; letter-spacing:-0.9px; line-height: 25px; color:#fff; opacity:0.9;filter:Alpha(opacity=90);}
.main-menu-list ul li a .main-menu-img {position:relative;}

.main-menu-list ul li.menu1 a .main-menu-img .main-menu-front {background:url("../img/main/main_quickmemu_icon01.png") no-repeat center; background-size:contain;}
.main-menu-list ul li.menu2 a .main-menu-img .main-menu-front {background:url("../img/main/main_quickmemu_icon02.png") no-repeat center; background-size:contain;}
.main-menu-list ul li.menu3 a .main-menu-img .main-menu-front {background:url("../img/main/main_quickmemu_icon03.png") no-repeat center; background-size:contain;}
.main-menu-list ul li.menu4 a .main-menu-img .main-menu-front {background:url("../img/main/main_quickmemu_icon04.png") no-repeat center; background-size:contain;}

.main-menu-list ul li.menu5{display:none;}


/*
.main-menu-list ul li a .main-menu-img .main-menu-front {position:absolute; width:100%; height:100%; left:0; top:0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.main-menu-list ul li a .main-menu-img .main-menu-back {opacity:0;filter:Alpha(opacity=0); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s;}
.main-menu-list ul li a:hover .main-menu-img .main-menu-front {-webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0;}
.main-menu-list ul li a:hover .main-menu-img .main-menu-back {-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;filter:Alpha(opacity=100); }
*/

@media all and (max-width:1420px){
	#mainMenu {padding:50px 0;}
	#mainMenu .main-menu-tit {width:45%;text-align:center; margin-top:50px;}
	#mainMenu .main-menu-tit h2::after  {left:50%; margin-left: -15px;}
	.main-menu-list {width:55%;}
	.main-menu-list ul li {float:left; margin-left: 3%; width:40%; margin-bottom: 20px; min-width:100px; padding:20px 0px; }
	.main-menu-list ul li img {max-width:100%;}

	
	.main-menu-list ul li:nth-child(4) {margin-left: 0;}


	
	
	
}

@media all and (max-width:800px){
	#mainMenu {background:url("../img/main/main_quickmenu_bg_m.jpg") no-repeat center top; padding:20px 0;}
	#mainMenu .main-menu-tit {float:none; width:100%; margin-top: 10px; margin-bottom:20px;}
	#mainMenu .main-menu-tit .main-sub-tit {display:none;}
	#mainMenu .main-menu-tit h2 {font-size:20px; line-height: 25px; color:#fff; padding-bottom:0px; margin-bottom: 0;}
	#mainMenu .main-menu-tit h2 span {display:inline;}
	#mainMenu .main-menu-tit h2::after {background-color:transparent;}
	#mainMenu .main-menu-tit .main-txt {display:none;}

	.main-menu-list {float:none; width:220px; margin:0 auto; }
	.main-menu-list ul li {float:left; margin-left: 7%; width:43%; margin-bottom: 15px; max-width:60px; padding:20px 0px; }
	.main-menu-list ul li img {max-width:50%;}
	.main-menu-list ul li a {width:80%; margin:0 auto;}
	.main-menu-list ul li a h3 {font-size:16px; line-height: 19px; margin-top: 15px; margin-bottom: 0;} 
	.main-menu-list ul li a p {font-size:11px; line-height: 19px;}
	
	
	
	.main-menu-list ul li.menu5{display:block;}
	.main-menu-list ul li.menu2{display:none;}
	.main-menu-list ul li:nth-child(4) {margin-left: 0;}
	
	
	
}