<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-03-25
******************************************************** */
/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:892px; 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; /*height: calc(100vh - 185px);*/ height:100%}
/* 메인 비주얼 :: 이미지 */
.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;}
.slick-initialized .slick-slide &gt; div{width:100%; height:100%}
/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute; top:50%; left:0px; width:100%; /* margin-top:-160px; */margin-top: -80px; text-align: center;} /* 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{
	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:15px; font-weight:600; letter-spacing:2px; color:#fff; margin-bottom:20px; }
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:45px; line-height:85px; letter-spacing:-0.25px; color:#fff; font-weight: 300; margin-bottom:25px; -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:500; font-size:75px}
.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:30px; letter-spacing:-0.5px; color:#fff; line-height:30px; -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-txt3 i{ display: inline-block;width: 15px;}

/* 메인 비주얼 :: 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-txt3{
	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-con .slick-dots{position:absolute; width:100%; text-align:center; /* bottom:85px; */ bottom:30%;}
.main-visual-con .slick-dots li{display:inline-block; margin:0 7px;}
.main-visual-con .slick-dots li button{
	position: relative; cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:30px; height:7px; background-color:rgba(255,255,255,0.5); -webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg); -ms-transform: skew(-20deg); -o-transform: skew(-20deg); transform: skew(-20deg);}
.main-visual-con .slick-dots li.slick-active button{width: 82px;}		/* 버튼 active */

.main-visual-con .slick-dots li button:before{width: 0; height: 7px; content: ''; position: absolute; top: 0; left: 0; background-color: #fff; -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;}

/* 슬라이드css */
.num-slide-con{width: 20px; height: 20px; position:absolute; left: 50%; margin-left: -150px; text-align:center; bottom:29.9%; /*bottom: 342px;*/z-index: 1;}
.num-slide-con &gt; div{}
.num-slide-con &gt; div span{float: left; display: inline-block; font-size: 15px; font-weight: 400; color: #fff;}

/* 마우스 스크롤 */
.scroll-icon{width:100%; position:absolute; top:827px; left:0; text-align:center; z-index:10}
.scroll-icon &gt; p{font-size:13px; color:#fff; letter-spacing:-0.2px; margin-bottom:14px;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
#mainContent &gt; article{padding:110px 0 120px;}
/* 공통 :: 타이틀 */
.main-tit h1{margin-bottom:10px; text-align:center;font-size: 43px;  font-weight:400; letter-spacing:-1.5px}
.main-tit h1 strong{font-weight: 600; color:#0174b7}
.main-tit p{text-align: center;font-size: 19px;color: #666;font-weight: 300;letter-spacing: 0.4px;}
.main-tit .middle-line{display: block; width: 5px; height: 13px; margin: 30px auto 20px;}
.main-tit .main-sub-tit{display:block; font-size:18px; font-weight: 300; letter-spacing:-0.5px; line-height:1.6; -ms-word-break: keep-all; word-break: keep-all;}
/*마우스 오버 이미지 확대 공통*/
.over-img{overflow:hidden;}
.over-img img{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
a:hover .over-img img{
	-ms-transform: scale(1.1) rotate(0.02deg);
	  -o-transform: scale(1.1) rotate(0.02deg);
	  -moz-transform: scale(1.1) rotate(0.02deg);
	  -webkit-transform: scale(1.1) rotate(0.02deg);
	  transform: scale(1.1) rotate(0.02deg);
}
/* -------- 메인 컨텐츠 :: 컨텐츠2 :: product -------- */
#mainContent2{ padding:100px 0 120px; background:#f9f9f9}
#mainContent2 .area-box{} 
#mainContent2 .slick-list{ overflow:visible!important}
#mainContent2 .slick-slide{ margin:0 15px 0}
#mainContent2 .list {margin-top:3rem;position:relative; overflow:hidden; padding:15px 0}
#mainContent2 .list li {-webkit-box-shadow: 2px 3px 3px 2px rgba(50, 50, 50, 0.3);-moz-box-shadow: 2px 3px 3px 2px rgba(50, 50, 50, 0.3);box-shadow: 2px 3px 3px 2px rgba(50, 50, 50, 0.3); box-sizing:border-box; opacity:0;position:relative;} 
#mainContent2 .list li a, #mainContent2 .list li span{display:block;}
#mainContent2 .list li .pro_inner .img img{width: 100%;}
#mainContent2 .list li .txtBox {padding: 30px 16px;text-align: center;background: #fff;min-height: 160px; border-top:1px solid #ddd; height:240px; position:relative; box-sizing:border-box;}
#mainContent2 .list li dt {font-size: 19px;color:#333;font-weight:500; letter-spacing:-1.3px;word-break:keep-all;}
#mainContent2 .list li dt &gt; span{ display:block; font-size:13px; color:#999; font-weight:400; letter-spacing:-0.5px}
#mainContent2 .list li dd {display: none;}
#mainContent2 .list li span.btnMore {display:block;width:200px;line-height:38px;text-align:center;border-radius:5px;border:1px solid #0174b7;font-size:14px;color:#0174b7;font-weight:300;margin:20px auto 0 auto;transition:0.6s; position: absolute;bottom: 35px; left: 50%;margin-left: -100px;}
#mainContent2 .list li:hover span.btnMore {background:#0174b7;color:#fff;}
#mainContent2 .pager {text-align:center;margin-top:40px;}
#mainContent2 .pager .swiper-pagination-bullet {width:10px;height:10px;background:#0756a2;opacity:0.6;}
#mainContent2 .pager .swiper-pagination-bullet-active {width:42px;border-radius:10px;opacity:1;}
#mainContent2.active .list li { top: 0; opacity: 1; }
#mainContent2.active .list li.secvice1 { -webkit-transition: all 0.5s 0.2s; transition: all 0.5s 0.2s; }
#mainContent2.active .list li.secvice2 { -webkit-transition: all 0.5s 0.4s; transition: all 0.5s 0.4s; }
#mainContent2.active .list li.secvice3 { -webkit-transition: all 0.5s 0.6s; transition: all 0.5s 0.6s; }
#mainContent2.active .list li.secvice4 { -webkit-transition: all 0.5s 0.8s; transition: all 0.5s 0.8s; }
#mainContent2 .list button{ background:url(../../img/grd_bg.png) no-repeat center; width:48px; height:48px; display:block; position:absolute;top:50%; margin-top: -24px;}
#mainContent2 .list button.slide-btn-prev{left:0;}
#mainContent2 .list button.slide-btn-next{ right:0;}
/* -------- 메인 컨텐츠 :: 컨텐츠3 :: 배너 -------- */
.main-banner-group{}
.main-banner-group li{float: left; width: 50%; height: auto; box-sizing:border-box; overflow:hidden}
.main-banner-group li &gt; a{display: block; width: 100%; height: 406px; background-position: center right; background-repeat:no-repeat;}
/* .main-banner-group li a .bg{width: 100%; height: auto;}
.main-banner-group li a .bg img{width: 100%; height: 100%;} */
.main-banner-group li.left-bnr &gt; a{background-image: url("../../img/main_bnr01.jpg");}
.main-banner-group li.right-bnr &gt; a{background-image: url("../../img/main_bnr02.jpg");}
.bnr-txt-con{display: table; width: 100%; height: 100%;}
.bnr-txt-con .bnr-inner{display: table-cell; vertical-align: middle; padding: 0 13%; letter-spacing: -0.5px; color: #fff; -ms-word-break: break-all; word-break: break-all; width: 100%; height: 100%; text-align:center}
.bnr-txt-con .bnr-inner .txt01{font-weight: 300; line-height: 1.5; font-size:22px}
.bnr-txt-con .bnr-inner .txt01 b{font-weight: 500; display:block;font-size: 36px; }
.bnr-txt-con .bnr-inner .txt02{margin:10px 0 20px ;font-size: 18px; font-weight: 300; line-height: 1.6;}
.bnr-txt-con .bnr-inner .more-btn{margin-top: 25px; position:relative; display:inline-block; width:175px; height:54px; line-height:52px; font-size:15px; border:1px solid #d5d5d5; color:#fff; text-align: center; border-radius:30px; overflow:hidden; letter-spacing:1px}
.bnr-txt-con .bnr-inner .more-btn:before, .bnr-txt-con .bnr-inner .more-btn:after{display:inline-block; position:absolute; 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}
.bnr-txt-con .bnr-inner .more-btn:before{left: 0; bottom:-1px; width:100%; height:1px; background-color:#fff}
.bnr-txt-con .bnr-inner .more-btn:after{left: 0; bottom:0px; width:100%; height:1px;}
.bnr-txt-con .bnr-inner .more-btn span{position:relative; z-index:1;}
.bnr-txt-con .bnr-inner .more-btn .arrow{font-size: 16px; margin-left: 8px;}
.main-banner-group li &gt; a:hover .bnr-inner .more-btn:before{height: 0;}
.main-banner-group li &gt; a:hover .bnr-inner .more-btn:after{height: 55px; background-color: #fff;}
.main-banner-group li &gt; a:hover .bnr-inner .more-btn span{color:#333;}
</pre></body></html>