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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:600px; position:relative;}
#mainVisual .slick-track,
#mainVisual .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%;
}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute; width:100%; text-align:center; bottom:20px;}
#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; background-color:#fff; 
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
#mainVisual .slick-dots li.slick-active button{background-color:#000;}		/* 버튼 active */

/* 메인 비주얼 :: 화살표 */
#mainVisual .slick-arrow{	position:absolute; width:84px; height:71px; top:50%; margin-top:-35px; cursor:pointer; border:0; cursor:pointer; z-index:9; font-size:0;}
#mainVisual .slick-arrow.slick-prev{left:10px; background:url(/images/button/main_prev_btn.png) no-repeat}
#mainVisual .slick-arrow.slick-next{right:10px; background:url(/images/button/main_next_btn.png) no-repeat}


/* ******************  메인 컨텐츠 ********************** */
#mainContent { overflow:hidden; min-height:500px; }

#mainVisualBx {margin-top: 20px;}
.main-visual-img img {width:880px; height:461px;}
.main-visual-wrap {width:880px; height:461px;  position:relative; float:left}

#pause {position:absolute; right:42px; bottom:10px; z-index:10;}
#pause i {color:#fff; padding-bottom:5px; }

.main-visual-tit {position:absolute; width:100%; height:33px; padding-top: 17px; background-color:rgba(0, 0, 0, 0.5); left:0; bottom:0;}
.main-visual-tit .slick-arrow {position:absolute; border:0; z-index:10; top:-8px;}
.main-visual-tit .slick-arrow i {color:#fff; font-size:30px}
.main-visual-tit .slick-prev {right:62px}
.main-visual-tit .slick-next {right:16px;}

.main-visual-tit-inner p {font-size:15px; letter-spacing: -0.65px; color:#fff; width:85%; margin-left: 25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:300;}
.main-visual-tit-inner p .tit {font-size:17px; color:#fff; display:inline-block; margin-right:20px;}


#mainCustom {margin-bottom: 20px; margin-top: 15px;}

.main-news {float:left; width:383px; height:188px; padding:0 25px; border:1px solid #E7E7E7; background-color:#fff;}
.main-news.main-event {margin-left:8px; margin-right:20px }

.main-news-tit {border-bottom: 1px solid #E5E5E5; margin-bottom: 10px;}
.main-news-tit h3 {float:left; font-size:18px; line-height: 50px; color:#333; padding-left: 5px;}
.main-news-tit a {float:right; color:#999999; line-height: 50px;}
.main-news-tit i::before {float:left; padding-top: 19px; color:#4cbfcd;}
.main-news-tit .material-icons:hover {color:#009FE0;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}

.main-news ul li a {display:block; overflow:hidden; color:#555555; }
.main-news ul li a:hover {color:#4cbfcd;}
.main-news ul li p {float:left; font-size:14px; line-height: 28px; letter-spacing: -0.75px; font-weight: 300; width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-news ul li .date {float:right; font-size:13.5px; line-height: 28px; letter-spacing: -0.5px; }
.main-news ul li .date:hover {color:#4cbfcd;}


.main-customer-link {float:right; width:300px; }

.custom-business-bg {position:absolute; width:100%; height:100%; left:0; top:0;}
.custom-business-bg img {width:100%; height:100%;}

.custom-business-tit {padding:0 20px; background:#a7be35; z-index:-1;}
.custom-business-tit h3 {float:left; line-height: 48px; font-size:16px; color:#fff;}
.custom-business-tit i {float:right; margin-top: 15px; font-size:21px;color:#fff;}

.custom-business a {display:block; width:298px; height:48px; position:relative; color:#333; font-size:16px;  letter-spacing: -0.5px; border:1px solid #E7E7E7}
.custom-business a,
.custom-business a::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}

.custom-business a::before,
.custom-business a::after {
  background: #809325;
  content: '';
  position: absolute;
  z-index: -1;
}

.custom-business a:hover {
  color: #fff;
}

.custom-business a::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.custom-business a:hover:after {
  width: 100%;
}

.custom-study {margin-top: 4px;}
.custom-study a {display:block; width:280px; height:114px; background:url("/images/main/main_content_bg5.jpg") no-repeat center top; padding-left: 20px; padding-top: 22px; position:relative; overflow:hidden;}
.custom-study a h3 {font-size:22px; line-height: 44px; letter-spacing: -0.5px; color:#fff;font-weight: 300;}
.custom-study a p {font-size:13.5px; line-height: 20px; letter-spacing: -0.5px; color:#fff; font-weight: 300;}
.custom-study a .custom-study-img {position:absolute; bottom:15px; right:-4px;  -webkit-transition:all 0.1s ease;-moz-transition:all 0.1s ease;-o-transition:all 0.1s ease;transition:all 0.1s ease;}
.custom-study a:hover .custom-study-img {right:-1px; bottom:12px; -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}


.main-content-bx {float:right;}
.main-content-bx ul li {width:300px; height:149px; margin-top: 7px; position:relative;}
.main-content-bx ul li:first-child {margin-top: 0;}

.main-content-bx ul li.bx-info {background:url("/images/main/main_content_bg1.jpg") no-repeat center top;}
.main-content-bx ul li.bx-info h3 span {color:#6ab340}
.main-content-bx ul li.bx-master {background:url("/images/main/main_content_bg2.jpg") no-repeat center top;}
.main-content-bx ul li.bx-master h3 span {color:#e50278}
.main-content-bx ul li.bx-convention {background:url("/images/main/main_content_bg3.jpg") no-repeat center top;}
.main-content-bx ul li.bx-convention h3 span {color:#0081c1}

.main-content-bx ul li a {display:block; padding:20px;}
.main-content-bx ul li h3 {font-size:20px; line-height: 30px; color:#333333}
.main-content-bx ul li p {font-size:13.5px; line-height: 22px; letter-spacing: -0.5px; color:#6d6d6d; font-weight: 300;}
.main-content-bx ul li .detail {font-size:13px; line-height: 24px; letter-spacing: -0.5px; color:#989898; display:inline-block; margin-top: 10px;}
.main-content-bx ul li:hover .detail {color:#333;}

.main-content-bx ul li .bx-img {position:absolute; right:25px; bottom:10px;}
.main-content-bx ul li:hover .bx-img{animation:navani 0.4s ease-in-out; -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-link-bx {background-color:#fff;}
.main-link-bx ul li {width:150px; float:left; text-align:center; position:relative;}
.main-link-bx ul li::before {content:""; position:absolute; width:1px; height:40px; left:0; top:50%; margin-top: -20px; background-color:#E9ECED;}
.main-link-bx ul li:first-child::before {background-color:#fff;}
.main-link-bx ul li a {display:block; height:60px; padding-top: 70px; .main-link-bx;}
.main-link-bx ul li a .link-img{animation:navani2 0.4s ease-in-out; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
@keyframes navani2{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}

.main-link-bx ul li a p {font-size:15px; line-height: 32px; letter-spacing: -0.75px; color:#3d3d3d; margin-top: 10px; }
.main-link-bx ul li .link-img {position:absolute; width:100%; height:100%; left:0; top:0; }

.main-link-bx ul li.link1 .link-img {background:url("/images/main/main_bx_icon1.png") no-repeat center 30px}
.main-link-bx ul li.link2 .link-img {background:url("/images/main/main_bx_icon2.png") no-repeat center 30px}
.main-link-bx ul li.link3 .link-img {background:url("/images/main/main_bx_icon3.png") no-repeat center 30px}
.main-link-bx ul li.link4 .link-img {background:url("/images/main/main_bx_icon4.png") no-repeat center 30px}
.main-link-bx ul li.link5 .link-img {background:url("/images/main/main_bx_icon5.png") no-repeat center 30px}
.main-link-bx ul li.link6 .link-img {background:url("/images/main/main_bx_icon6.png") no-repeat center 30px}
.main-link-bx ul li.link7 .link-img {background:url("/images/main/main_bx_icon7.png") no-repeat center 30px}
.main-link-bx ul li.link8 .link-img {background:url("/images/main/main_bx_icon8.png") no-repeat center 30px}

.main-link-bx ul li.link1:hover a .link-img {background:url("/images/main/main_bx_icon1_on.png") no-repeat center 30px;}
.main-link-bx ul li.link2:hover a .link-img {background:url("/images/main/main_bx_icon2_on.png") no-repeat center 30px;}
.main-link-bx ul li.link3:hover a .link-img {background:url("/images/main/main_bx_icon3_on.png") no-repeat center 30px;}
.main-link-bx ul li.link4:hover a .link-img {background:url("/images/main/main_bx_icon4_on.png") no-repeat center 30px;}
.main-link-bx ul li.link5:hover a .link-img {background:url("/images/main/main_bx_icon5_on.png") no-repeat center 30px;}
.main-link-bx ul li.link6:hover a .link-img {background:url("/images/main/main_bx_icon6_on.png") no-repeat center 30px;}
.main-link-bx ul li.link7:hover a .link-img {background:url("/images/main/main_bx_icon7_on.png") no-repeat center 30px;}
.main-link-bx ul li.link8:hover a .link-img {background:url("/images/main/main_bx_icon8_on.png") no-repeat center 30px; }

.main-link-bx ul li:hover a .link-img{animation:navani 0.4s ease-in-out; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-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)}
}