@charset "utf-8";
/* 메인 롤링 이미지 */
#mainSlider {position:relative; margin-top:80px; overflow:hidden}
#mainSlider ul.imgList {position:relative; width:1000%}
#mainSlider ul.imgList li {position:relative; float:left; min-width:100vw; height:600px; background-size:cover !important; overflow:hidden}
#mainSlider ul.imgList li.item1 {background:url(../img/main_visual1.jpg) center top no-repeat}
#mainSlider ul.imgList li.item2 {background:url(../img/main_visual2.jpg) center top no-repeat}
#mainSlider ul.imgList li.item3 {background:url(../img/main_visual3.jpg) center top no-repeat}
#mainSlider ul.imgList li img {position:absolute; display:block; top:0; left:0; width:100%; height:100%}
#mainSlider ul.imgList li .caption {position:relative; top:20%; max-width:1400px; margin:0 auto; padding:0 50px; z-index:20}
#mainSlider ul.imgList li .caption h2 {font-size:56px; font-weight:600; color:#000; line-height:1.1; max-width:75%}
#mainSlider ul.imgList li .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px 0; background:#000}
#mainSlider ul.imgList li .caption p {font-size:15px; color:#000; max-width:75%}
#mainSlider ul.imgList li .caption a.btn_main {position:relative; display:inline-block; margin-top:60px; padding:10px 35px; font-size:15px; font-weight:600; color:#000; border:2px solid #000}
#mainSlider ul.imgList li .caption a.btn_main span {position:relative; transition:all .3s ease; z-index:10}
#mainSlider ul.imgList li .caption a.btn_main:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#000; transition:all .3s ease}
#mainSlider ul.imgList li .caption a.btn_main:hover:before {height:100%}
#mainSlider ul.imgList li .caption a.btn_main:hover span {color:#fff}
#mainSlider ul.imgList li .caption.white h2 {color:#fff !important}
#mainSlider ul.imgList li .caption.white h2:after {background:#fff !important}
#mainSlider ul.imgList li .caption.white p {color:#fff !important}
#mainSlider ul.imgList li .caption.white a.btn_main {color:#fff; border:2px solid #fff}
#mainSlider ul.imgList li .caption.white a.btn_main:before {background:#fff}
#mainSlider ul.imgList li .caption.white a.btn_main:hover span {color:#000}
#mainSlider ul.pagination {display:none; position:absolute; bottom:30px; left:0; width:100%; text-align:center; z-index:50}
#mainSlider ul.pagination li {display:inline-block; width:16px; height:16px; margin:0 3px; border:2px solid #fff; border-radius:50%; transition:all .3s ease; cursor:pointer}
#mainSlider ul.pagination li.active {background:#fff}
#mainSlider a.control {position:absolute; width:40px; height:50px; top:50%; margin-top:-25px; text-align:center; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .2s ease; z-index:50}
#mainSlider a.control:hover {opacity:.7 !important; filter:alpha(opacity='70') !important}
#mainSlider a.control i {color:#fff; line-height:50px}
#mainSlider a.control.prev {left:30px}
#mainSlider a.control.prev:hover {left:25px}
#mainSlider a.control.next {right:30px}
#mainSlider a.control.next:hover {right:25px}
/* 메인 섹션 */
#container .mainSection {position:relative; padding:40px 0}
#container .mainSection .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px}
#container .mainSection .inner:after {clear:both; display:block; content:''}
/*#container .mainSection .inner .title {text-align:center; margin-bottom:30px}*/
#container .mainSection .inner .title h2 {font-size:36px; font-weight:300; color:#555; line-height:1}
#container .mainSection .inner .title h2:after {display:block; width:40px; height:1px; content:''; margin:20px auto 40px auto; background:#999}
/* 상단 섹션 */
.mainSection.section1 .inner .latestBox {float:left; width:30%; margin-right:3%}
.mainSection.section1 .inner > div .tit {text-align:left; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #eee; overflow:hidden}
.mainSection.section1 .inner > div .tit h3 {float:left; font-size:16px; color:#444; line-height:1}
.mainSection.section1 .inner .latestBox > .board_output td {line-height:2; color:#ccc}
.mainSection.section1 .inner .latestBox > .board_output td a {color:#666}
.mainSection.section1 .inner .latestBox > .board_output td a:hover {text-decoration:none}
.mainSection.section1 .inner .photoBox {display:inline-block;float:left; width:44%}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {float:left; width:30%; height:157px; margin-left:5%; overflow:hidden}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td:first-child {margin-left:0}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td table {width:100% !important}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody img {display:block; width:100% !important; height:auto !important}
.mainSection.section1 .inner .customerBox {float:right; width:20%}
.mainSection.section1 .inner .customerBox .info h4 {font-size:28px; color:#444; line-height:1.2; margin-bottom:10px}
.mainSection.section1 .inner .customerBox .info h4 a {font-size:28px !important; color:#444}
.mainSection.section1 .inner .customerBox .info p {color:#777; margin-bottom:20px}
.mainSection.section1 .inner .customerBox .info p span {font-weight:600}
.mainSection.section1 .inner .customerBox .info i {font-weight:normal; color:#aaa; margin-right:8px}
.mainSection.section1 .inner .customerBox .info a.btnContact {display:block; width:100%; height:50px; font-size:inherit; color:#fff; text-align:center; line-height:46px; border:2px solid #000; background:#000; transition:all .3s ease}
.mainSection.section1 .inner .customerBox .info a.btnContact:hover {color:#000; background:#fff}
/* 하단 섹션 */
.mainSection.section2 {padding-top:0 !important}
.mainSection.section2:before {display:block; max-width:1300px; margin:0 auto 30px auto; content:''; border-top:1px solid #ececec}
.mainSection.section2 .inner .imgArea {float:left; width:30%; height:300px; margin-right:3%}
.mainSection.section2 .inner .desc {float:left; width:44%}
.mainSection.section2 .inner .desc span {font-size:15px; color:#999; letter-spacing:2px}
.mainSection.section2 .inner .desc h2 {font-size:34px; font-weight:600; color:#444; line-height:1; margin:10px 0 30px 0}
.mainSection.section2 .inner .desc p {margin-bottom:30px; text-align:justify}
.mainSection.section2 .inner .desc a.btn_main {display:inline-block; padding:6px 30px; color:#444; border:2px solid #ececec; border-radius:4px; background:#fff; transition:all .3s ease}
.mainSection.section2 .inner .desc a.btn_main:hover {color:#fff; border-color:#000; background:#000}
.mainSection.section2 .inner .rBanner {float:right; width:20%; height:300px}
.mainSection.section2 .inner .rBanner img {display:block; width:100%; height:100%}
/* 하단 좌측 페이드 슬라이더 */
#fadeSlider {position:relative}
#fadeSlider > ul {position:relative; overflow:hidden}
#fadeSlider > ul > li {position:absolute; top:0; left:0; z-index:5}
#fadeSlider > ul > li.active {position:relative; z-index:30}
#fadeSlider > ul > li > img {width:100%; height:100%}
#fadeSlider > ol.indicator {position:absolute; top:30px; right:30px; z-index:50}
#fadeSlider > ol.indicator > li {display:inline-block; width:14px; height:14px; margin:0 3px; border-radius:50%; border:2px solid #000; cursor:pointer; transition:all .3s ease}
#fadeSlider > ol.indicator > li.on {background:#000}
/* 미디어 쿼리 */
@media screen and (max-width:1024px) {
 /* 메인 롤링 이미지 */
 #mainSlider ul.imgList li {height:500px}
 #mainSlider ul.imgList li .caption h2 {font-size:38px}
 #mainSlider ul.imgList li .caption p {font-size:13px}
 #mainSlider ul.imgList li .caption a.btn {font-size:13px; margin-top:40px}
 /* 상단 섹션 */
 .mainSection.section1 .inner .latestBox {float:none; width:100%; margin-bottom:30px}
 .mainSection.section1 .inner .photoBox {float:none; width:100%; margin-bottom:30px}
 .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {width:32%; margin-left:2%; height:auto}
 .mainSection.section1 .inner .customerBox {float:none; width:100%}
 /* 하단 섹션 */
 .mainSection.section2 .inner .imgArea {float:none; width:100%; height:auto; margin:0 0 30px 0}
 .mainSection.section2 .inner .desc {float:none; width:100%; margin-bottom:50px}
 .mainSection.section2 .inner .rBanner {float:none; width:60%; height:auto; margin:0 auto}
}
@media screen and (max-width:640px) {
 /* 메인 롤링 이미지 */
 #mainSlider ul.imgList li {height:430px}
 #mainSlider ul.imgList li img {width:auto !important}
 #mainSlider ul.imgList li .caption {top:15%; padding:0 20px}
 #mainSlider ul.imgList li .caption h2 {font-size:24px; max-width:100%}
 #mainSlider ul.imgList li .caption h2:after {margin:15px 0; width:40px; height:1px}
 #mainSlider ul.imgList li .caption p {font-size:12px; max-width:100%}
 #mainSlider ul.imgList li .caption a.btn {font-size:12px; padding:8px 25px}
 /* 메인 섹션 */
 #container .mainSection .inner {padding:0 20px}
 #container .mainSection .inner .title h2 {font-size:24px; font-weight:500}
 /* 상단 섹션 */
 .mainSection.section1 .inner .latestBox > .board_output td {font-size:12px}
 .mainSection.section1 .inner .latestBox > .board_output td a {font-size:12px}
 .mainSection.section1 .inner .photoBox ul li {width:32%; height:120px}
 /* 하단 섹션 */
 .mainSection.section2 .inner span {font-size:11px !important}
 .mainSection.section2 .inner .desc h2 {font-size:24px; margin:0 0 15px 0}
 .mainSection.section2 .inner .desc a.btn {width:100%; text-align:center}
 .mainSection.section2 .inner .rBanner {width:100%}
}


@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');	
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* 슬라이드 공통 */
.carousel-caption {z-index:10 !important;left:20%;right: 10%; text-align:left;}

.carousel-fade .carousel-inner .item {opacity: 0;-webkit-transition-property: opacity;transition-property:opacity;}
.carousel-fade .carousel-inner .active {opacity: 1;}
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right {left:0;opacity: 0;z-index: 1;}
.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {opacity:1;}
.carousel-fade .carousel-control {z-index: 2;}
/* 제어 배경 투명도 */
.carousel-control{ width:10%; z-index:99;}
/* 도트 메뉴 디자인*/
.carousel-indicators li {width:8px;height:8px;background-color:transparent;border:1px solid rgba(255, 255, 255, 1);transition: background-color 0.2s, border-color 0.2s;box-sizing:content-box;margin:0 3px 2px 0;}
.carousel-indicators .active {width:8px;height:8px;border:3px solid #4389fa;margin:0 3px 0 0;background:#4389fa;}

/* 슬라이드 메인 */
#main_carousel.carousel {}
#main_carousel .carousel-inner .item {background-repeat:no-repeat;background-position:center center;background-size:cover;}
#main_carousel .carousel-inner .item:before{content:'';position:absolute; width:100%; height:100%;z-index:1}
#main_carousel .carousel-inner .banner_num01 {background-image:url(../../img/main/main1.png);}
#main_carousel .carousel-inner .banner_num02 {background-image:url(../../img/main/main2.png);}
#main_carousel .carousel-inner .banner_num03 {background-image:url(../../img/main/main3.png);}

#main_carousel .carousel-caption {text-shadow:none;margin-bottom:17vmin;text-align:left;}
#main_carousel .carousel-caption *{color:#FFFFFF;}

#main_carousel .carousel-caption div:first-child {-webkit-animation-delay:1s;animation-delay:1s;}
#main_carousel .carousel-caption div:nth-child(2) {-webkit-animation-delay:2s;animation-delay:2s;}
#main_carousel .carousel-caption div:nth-child(3) {-webkit-animation-delay:3s;animation-delay:3s;}

#main_carousel .carousel-inner .item {height:64vmin;letter-spacing:-0.1em;}

#main_carousel .mtext00 {font-size:1.5vmin; margin:0 0 4vmin; padding:0 0 1vmin; font-weight:300; border-bottom:1px solid #fff; display:inline-block; min-width:100px; letter-spacing:0.0em;}
#main_carousel .mtext01 {font-size:4.5vmin;margin:0 0 4vmin;font-weight:100;}
#main_carousel .mtext01 strong{font-weight:550}
#main_carousel .mtext02 {font-size:2.5vmin;margin-bottom:6vmin;letter-spacing:-0.05em;}
#main_carousel .btn-lg{border-radius:30px;letter-spacing:0em;font-size:1.5vmin; padding:10px 20px}

@media only screen and (max-width:479px) {
	#main_carousel .carousel-inner .item {height:70vmin;letter-spacing:-0.05em;}
	#main_carousel .carousel-caption{margin-bottom:9.5vmin;}
}
@media (min-width:480px) and (max-width:725px) {
	#main_carousel .carousel-inner .item {height:65vmin;letter-spacing:-0.05em;}
	#main_carousel .carousel-caption{margin-bottom:12.5vmin;}
}


.boardWrap {padding-top:40px; height: 300px;color:#fff; background-image:url(../img/bk60.png)}
.boardWrap .widget .lt_more{right:5px; color:#fff;}
.boardWrap .widget .widget-title{font-weight:600}
.boardWrap .widget .widget-title:after{height:2px;}
.boardWrap .widget .widget-title:before{background-color:rgba(255,255,255,0.3)}
.boardWrap .widget_txt ul{ padding:15px 0px}
.boardWrap .widget_txt ul li a {color:#fff;}


/* 사업영역 */
#services {padding:30px 0px 80px 0px; background:#f5f5f5}
#services .grid-layout li:after{display:none;}

@media (min-width: 660px) and (max-width: 999px){
#services .grid-layout li {width:50%;}
}

@media (min-width: 480px) and (max-width: 659px){
#services .grid-layout li {width:100%;}
}


.services-box {text-align:center;padding:0px 4px; }
.services-box h3 {font-weight:500;text-transform:uppercase;font-size:14px; padding-bottom:10px; } 
.services-box .icon-box {display:block;margin:0px auto;text-align:center;position:relative;transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;-ms-transition:all ease-in-out .3s;-webkit-transition:all ease-in-out .3s;overflow:hidden;z-index:2;}
.services-box .icon-box img {-webkit-transition:all 0.2s ease-out;transition: all 0.2s ease-out;-webkit-transform: scale(1.2);transform: scale(1.2);width:100%;}
.services-box:hover .icon-box img {-webkit-transform: scale(1.5);transform: scale(1.5);}
.services-box .icon-box span.overlay {-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; position: absolute; bottom: 0px; left: 0px; z-index: 1; background-color: #000; width: 100%; height: 100%; opacity: 0.1;}
.services-box:hover .icon-box span.overlay {opacity:0.3;}

.services-box .sb-content-wrap {display:block;padding:30px 20px; border:1px solid #f5f5f5; border-top:none; background:#fff;}
.services-box:hover .sb-content-wrap p:after {width:90px;margin-left:-45px;height:1px;} 

.services-box .sb-content-wrap p {margin-top:20px;margin-bottom:30px;position:relative;font-size:13px;line-height:normal;} 
.services-box .sb-content-wrap p:after,.services-box .sb-content-wrap p:before {content:'';position:absolute;background:#CCC;width:140px;height:1px;left:50%;top:-20px;margin-left:-70px;}
.services-box .sb-content-wrap p:after {width:60px;margin-left:-30px;background:#4389fa;transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;-moz-transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;-ms-transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;-o-transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;-webkit-transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;}

.services-box .sb-content-wrap a{background:#4389fa; color:#fff; padding-bottom:3px;text-transform:capitalize; padding:10px;}
.services-box .sb-content-wrap a:hover {background:#213152; color:#fff !important;}

/*Contact*/
.locationWrap {padding:0px 0px; color:#fff; background:url(../img/location.jpg) no-repeat fixed; background-size:cover;}
.locationWrap .loca-text {padding-top:15px;}
.locationWrap .loca-text h4 {position: relative;font-size: 40px;  line-height: normal; margin-top:0px;}
.locationWrap .loca-text h4:before {position: absolute; content: ''; background: rgba(256, 256, 256, .3); width: 100%; height: 1px; left: 0; bottom: -20px;}
.locationWrap .loca-text h4:after{position: absolute; content: ''; width: 50px; height: 2px; left: 0; bottom: -20px; background-color:#4389fa !important;}
.locationWrap .loca-text p.text-p {margin-top:50px; font-size:14px; word-wrap:break-word; letter-spacing:-0.03em;}
.locationWrap .loca-text ul {padding-top:25px;}
.locationWrap .loca-text ul li {font-size:15px; margin-bottom:7px}
.locationWrap .loca-text ul li span {position:relative;top:-7px;left:10px; font-size:1.05em}

@media (max-width: 520px) {
	.locationWrap .loca-text {}
	.locationWrap .loca-text ul {margin:15px 0px;}
	.locationWrap .loca-text ul li {padding:3px 0px; position:relative; letter-spacing:-0.05em;}
	.locationWrap .loca-text ul li i {font-size:42px;}
	.locationWrap .loca-text ul li span {position:absolute; margin-top:12px;}
	.locationWrap .loca-text ul li span.second {margin-top:2px;}
}


/* 파트너 */
#partners {background:#fff;padding:35px 0}
#partners .owl-carousel .item{text-align:center;}
#partners .owl-carousel .item img{height:auto;vertical-align:middle}
#partners .owl-carousel:hover{padding:0 25px}
#partners .owl-carousel:hover .owl-next {right:-10px;}
#partners .owl-carousel:hover .owl-prev {left:-10px;}

/*고객센터*/
.csbox{position:relative;margin-bottom:40px}
.csbox h3 {border-bottom: 1px solid #ddd;line-height:40px;padding-left:5px;margin: 0 0 10px;font-size:1.5rem;font-weight:600}
.csbox div{margin-bottom:0.55rem;overflow:hidden}
.csbox div:last-child{ margin-bottom:0}
.csbox div p {margin:0}
.csbox .tel{font-size:3.2rem;font-weight:bold;color:#333;line-height: normal}
.csbox .fr{float:left;margin-right:10px;}
.csbox .ov{overflow:hidden;padding-top:5px;}
.csbox .icon{display:inline-block;width:30px;height:30px; text-align:center;line-height:30px;border-radius:3px;background:#888;color:#fff;}

@media (min-width: 768px) {
	.csbox .telnum span{font-size:2.5rem;}	
	.csbox li{font-size:1.15rem;}
}
@media (min-width: 992px) {
	.csbox .telnum span{font-size:3rem;}
	.csbox li{font-size:1.2rem;}
}
@media (min-width: 1200px) {
	.csbox .telnum span{font-size:3rem;}
	.csbox li{font-size:1.25rem;}
}