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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; 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%;
}
.main-visual-con{}
/* 메인 비주얼 :: 이미지 */
.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 ;	
}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
	-ms-transform: scale(1.0,1.0) rotate(0.01deg);
    -o-transform: scale(1.0,1.0) rotate(0.01deg);
    -moz-transform: scale(1.0,1.0) rotate(0.01deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.01deg);
     transform: scale(1.0,1.0) rotate(0.01deg);
}

.main-visual-item .main-visual-m-img{display:none;}


.main-visual-item-txt {position:absolute; width:100%; top:25%; z-index:9; text-align:center;}

.main-visual-3 .main-visual-item-txt {top:34%;}

.main-visual-item-txt strong, .main-visual-item-txt img, .main-visual-txt-inner > p, .main-visual-input-group, .main-visual-request-form button {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 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-txt {position:absolute; width:100%; left:0; top:30%; z-index:10; text-align:center;}


.main-visual-txt-wrap {display:table; width:100%; height:100%;}
.main-visual-txt-inner {display:table-cell; width:100%; height:100%; vertical-align: middle;}
.main-visual-item-txt strong {display:block; font-size:50px; line-height: 60px; letter-spacing: -0.5px; color:#fff; font-weight: 600;}
.main-visual-item .main-visual-item-txt img {display:inline-block; transition-delay:0.3s; margin-top: -30px;}
.main-visual-item-txt .main-visual-txt2 {transition-delay:0.3s; margin-top: 10px;}
.main-visual-item-txt .main-visual-txt2 span {color:#FEC93B; }
.main-visual-item-txt .main-visual-txt2 #counter1{display:inline-block; min-width:220px; text-align:right;}
.main-visual-txt-inner > p {font-size:22px; letter-spacing: -0.5px; color:#fff; margin-top: 190px; transition-delay:0.5s;}

.main-visual-request-form {max-width:900px; margin:0 auto;}
.main-visual-input-group {margin-bottom: 15px; margin-top: 70px; transition-delay:0.7s;}
.main-visual-request-form .main-visual-input {float:left; width:267px; height:58px; padding:0 15px; border-radius:5px; background-color:rgba(255, 255, 255, 0.9);}
.main-visual-request-form .main-visual-input.middle {margin:0 4.5px;}
.main-visual-request-form .main-visual-input p {display:inline-block; vertical-align: middle; line-height: 58px; font-size:16px; letter-spacing: -0.5px; color:#553f28; font-weight: 600; width:60px;}
.main-visual-request-form .main-visual-input input {display:inline-block; vertical-align: middle; width:198px; height:58px; background:transparent; border:0; font-size:14px; letter-spacing: -0.25px; color:#553f28}
.main-visual-request-form .main-visual-input #datepicker {padding-left: 23px; width:177px; background:url("../images/icon/ic_calendar.png") no-repeat center left;}
.main-visual-request-form button {display:inline-block; width:297px; height:58px; line-height: 58px; border-radius:5px; background-color:#FEC93B; font-size:17px; letter-spacing: -0.5px; color:#553f28; font-weight: 600; transition-delay:0.9s; overflow:hidden;  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);}
.main-visual-request-form button span {position:relative; z-index:10; font-size: 23px; font-weight: 800;}


.main-visual-item.active-item .main-visual-item-txt strong, .main-visual-item.active-item .main-visual-item-txt img, #mainVisual.active .main-visual-txt-inner > p, #mainVisual.active .main-visual-input-group, #mainVisual.active .main-visual-request-form button {
	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);
}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute; width:100%; text-align:center; top:46%; z-index:11;}
#mainVisual .slick-dots li{display:inline-block; margin:0 10px ;}
#mainVisual .slick-dots li:last-child {margin-right:30px;}
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:8px; height:8px; background-color:#fff; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s; 
}
#mainVisual .slick-dots li.slick-active button{background-color:#FEC93B; width:40px;}		/* 버튼 active */

/* 메인 비주얼 :: 화살표 */
#mainVisual .slick-arrow{	position:absolute; width:32px; height:57px; top:50%; margin-top: 10px; cursor:pointer; border:0; cursor:pointer; z-index:11; font-size:0;}		/* 버튼이미지에 맞게 크기 수정 */
#mainVisual .slick-arrow.slick-prev{left:50%; margin-left: -780px; background:url(../images/main/main_visual_prev.png) no-repeat}
#mainVisual .slick-arrow.slick-next{right:50%; margin-right:-780px; background:url(../images/main/main_visual_next.png) no-repeat}

.main-visual-btn {position:absolute; z-index:12; cursor:pointer; left:50%; top:46.3%; margin-left: 55px; cursor:pointer; }
.main-visual-btn i {color:#fff; font-size:16px;}
.main-visual-btn .main-visual-play {display:none;}

.main-visual-btn.pause .main-visual-pause {display:none;}
.main-visual-btn.pause .main-visual-play {display:block;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-41px; text-align:center; z-index:9}	/* width값에 맞게 margin-left수정 */
.main-scroll-icon span{display:block; color:#fff; padding-bottom:5px; letter-spacing:-0.5px; font-weight:300; }

.main-visual-m-btn, .main-m-link {display:none;}


@media all and ( max-width: 800px ){
	#mainVisual {height:345px; }

	.main-visual-item-txt {top:34%;}
	.main-visual-3 .main-visual-item-txt {top:40%;}
	.main-visual-3 .main-visual-item-txt span {display:block;}

	.main-visual-m-btn {display:block; position:fixed; bottom:80px; z-index:20; right:3%;}
	.main-visual-m-btn li {float:left; width:60px;}
	.main-visual-m-btn li:first-child {margin-right:10px;}
	.main-visual-m-btn li a {display:block;}
	.main-visual-m-btn li img {max-width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{margin-top:-42px}
	.main-visual-item-txt strong {font-size:22px; line-height: 35px; word-break:keep-all;}
	.main-visual-txt {top:40%;}
	.main-visual-item-txt .main-visual-txt2 {margin-top: 0;}
	.main-visual-txt-img {}
	.main-visual-item .main-visual-item-txt img {margin-top: -15px; height:45px;}
	.main-visual-txt-inner > p {font-size:14px; line-height: 20px; word-break:keep-all; margin-top: 130px;}

	.main-visual-request-form {display:none;}
	.main-visual-item-txt .main-visual-txt2 #counter1{min-width:110px}

	/* 메인 비주얼 :: 화살표 */
	#mainVisual .slick-arrow{display:none !important; width:47px; height:40px; margin-top:-20px; background-size:47px auto !important; } /* 화살표사용시 display:none 삭제 */ 

	#mainVisual .slick-dots {top:auto; bottom:120px;}
	#mainVisual .slick-dots li {margin:0 5px;}
	#mainVisual .slick-dots li button {width:4px; height:4px;}

	.main-visual-btn {top:auto; bottom:116px; margin-left: 35px;}
	.main-visual-btn i {font-size:14px;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}

	.main-m-link {display:block; position:fixed; left:0; bottom:0; width:100%; z-index:10;}
	.main-m-link li {float:left; width:50%;}
	.main-m-link li a {display:block; padding:20px 0; text-align:center; font-size:14px; letter-spacing: -0.5px; color:#553f28; font-weight: 600; background-color:#FEC93B}
	.main-m-link li a i {margin-right:10px;}
	.main-m-link li:first-child a {background-color:#553F28; color:#fff; font-size:21px;}
}

@media all and (max-width:480px){
	#mainVisual .slick-dots { bottom:100px;}
	.main-visual-btn {bottom:95px;}
}

/* ******************  메인 컨텐츠 ********************** */
#mainReview {padding:80px 0;}
.main-review-tit {text-align:center; padding-bottom: 50px; position:relative;}
.main-review-tit h3 {font-size:40px; letter-spacing: -0.5px; color:#333333;}
.main-review-tit h3 span {color:#61553e;}
.main-review-tit > p {font-size:18px; letter-spacing: -0.5px; color:#666666; margin-top: 15px;}

.main-review-btn {position:absolute; right:0; top:50%; margin-top: -22.5px;}
.main-review-btn a {display:block;}
.main-review-btn p {display:inline-block; vertical-align: middle; font-size:14px; letter-spacing: -0.5px; color:#553f28; font-weight: 600; margin-right:15px;}
.main-review-btn span {display:inline-block; width:45px; height:45px; border:1px solid rgba(85, 63, 40, 0.8); border-radius:50%; text-align:center; line-height: 48px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.main-review-btn span i {color:#553F28; font-size:26px; display:inline-block; vertical-align: middle; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

.main-review-btn a:hover span {background-color:#553F28}
.main-review-btn a:hover span i {color:#fff;}

@media all and (max-width:800px){
	#mainReview {padding:40px 0;}
	.main-review-tit {padding-bottom: 60px;}
	.main-review-tit h3 {font-size:22px;}
	.main-review-tit > p {font-size:12px; margin-top: 10px;}

	#mainReview .cm-review-slider .slick-arrow {top:-50px;}
	#mainReview .cm-review-slider .slick-prev {margin-left: -65px;}
	#mainReview .cm-review-slider .slick-next {margin-right:-60px;}

	.main-review-btn {bottom:15px; top:auto; right:50%; margin-right: -17.5px;}
	.main-review-btn p {display:none;}
	.main-review-btn span {width:35px; height:35px; line-height: 35px;}
}

#mainReason .cm-reason-bg {padding:85px 0;}
.main-reason-tit {text-align:center; margin-bottom: 70px;}
.main-reason-tit h3 {display:inline-block; vertical-align: bottom; font-size:40px; letter-spacing: -0.5px; color:#fff; vertical-align: bottom; word-break:keep-all;}
.main-reason-tit h3 br{display:none;}
.main-reason-tit img {display:inline-block; vertical-align: bottom; margin-right:5px; position:relative; top:-5px;}
.main-reason-tit p {display:inline-block; vertical-align: middle; font-size:18px; letter-spacing: -0.5px; color:rgba(255, 255, 255, 0.8); line-height: 38px; margin-right:10px; margin-top: 15px;}
.main-reason-tit a {position:relative; overflow:hidden; display:inline-block; vertical-align: middle; width:145px; height:38px; border:1px solid rgba(255, 255, 255, 0.6); font-size:15px; letter-spacing: -0.5px; color:rgba(255, 255, 255, 0.8); line-height: 38px; border-radius:5px; margin-top: 15px;}
.main-reason-tit a::before {content:""; position:absolute;  width:70px; height:120px; background-color:#ffc52e;
left:-100px; -ms-transform:skewX(-20deg);  -webkit-transform:skewX(-20deg); -moz-transform:skewX(-20deg); -o-transform:skewX(-20deg); transform:skewX(-20deg); -webkit-transition:all 0s;-moz-transition:all 0s;-o-transition:all 0s;transition:all 0s;}
.main-reason-tit a span {position:relative; z-index:10;}
.main-reason-tit a i {font-size:16px;}

.main-reason-tit a:hover::before {left:150px; -webkit-transition:all 1.0s;-moz-transition:all 1.0s;-o-transition:all 1.0s;transition:all 1.0s;}

@media all and (max-width:800px){	
	#mainReason .cm-reason-bg {padding:40px 0;}
	
	.main-reason-tit {margin-bottom: 30px;}
	.main-reason-tit img {max-width:120px;}
	.main-reason-tit h3 {display:inline; font-size:22px; line-height: 30px;} 
	.main-reason-tit h3 br{display:block;}
	.main-reason-tit p {display:block; margin-right:0; margin-top: 10px; font-size:12px; line-height: 20px;}
	.main-reason-tit a {width:110px; height:30px; line-height: 30px; font-size:11px; margin-top: 8px;}
}

#mainService {padding:90px 0;}
.main-service-tit {text-align:center; margin-bottom: 35px;}
.main-service-tit p {font-size:18px; letter-spacing: -0.5px; color:#666666; font-weight: 400; margin-top: 10px;}

.main-service-list-inner {float:left; width:285px; position:relative; margin-left: 20px;}
.main-service-list-inner:first-child {margin-left: 0;}
.main-service-list-inner a {display:block; overflow:hidden;}
.main-service-list-inner a img {-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.main-service-list-inner a p {position:absolute; left:20px; bottom:20px; font-size:22px; letter-spacing: -0.5px; color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3); font-weight: 600;}

.main-service-list-inner a:hover img {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}

@media all and (max-width:800px){
	#mainService {padding:30px 0;}
	.main-service-tit {margin-bottom: 20px;}
	.main-service-tit img {max-width:70%;}
	.main-service-tit p {display:none;}

	.main-service-list {margin:0 -1%;}
	.main-service-list-inner {width:48%; margin:0 1%; margin-bottom: 10px;}
	.main-service-list-inner:first-child {margin-left: 1%;}
	.main-service-list-inner a img {max-width:100%;}
	.main-service-list-inner a p {left:15px; bottom:10px; font-size:16px; }
}

#mainCustomer {background-color:#EEEEEE; padding:85px 0;}
.main-cusotmer-blog {float:left; width:630px;}
.main-blog-inner {float:left; width:303px; }
.main-blog-inner:first-child {margin-right:20px;}
.main-blog-inner a {display:block; border:1px solid #ddd;}
.main-blog-inner a img {max-width:100%;}
.main-blog-inner > a > img { width:303px; height:148px; }
.main-blog-inner a p {border-top: 1px solid #ddd; background-color:#fff; padding:15px 0;padding-left:15px; padding-right:50px; position:relative; font-size:15px; letter-spacing: -0.5px; color:#555555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-blog-inner a p i {position:absolute; right:10px; top:10px;}

.main-customer-sns {float:left; width:230px; margin:0 20px 0px 17px;}
.main-customer-inner a {display:block; position:relative; overflow:hidden; padding-left: 30px; padding-right:30px; height:72px; padding-top: 20px; box-shadow:3px 3px 11px rgba(0, 0, 0, 0.1);}
.main-customer-inner a::after {content:""; position:absolute; width:15px; height:15px; right:30px; top:50%; margin-top: -7.5px; background:url("../images/icon/ic_sns_more.png") no-repeat;  -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.main-customer-inner a img {display:inline-block; vertical-align: middle;}
.main-customer-inner a p {display:inline-block; vertical-align: middle; font-size:18px; line-height: 26px; letter-spacing: -0.5px; color:#fff; margin-left: 15px;}
.main-customer-inner a p strong {font-weight: 600;}
.main-customer-inner.facebook {margin-bottom: 12px;}
.main-customer-inner.facebook a {background-color:#3A5A98}
.main-customer-inner.blog a {background-color:#39C514}

.main-customer-hover {position:absolute; width:190px; height:190px; left:200px; top:50%; margin-top: -95px; background-color:rgba(255, 255, 255, 0.07); border-radius:50%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}

.main-customer-inner a:hover::after {-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.main-customer-inner a:hover .main-customer-hover {width:100%; border-radius:0; left:0;}
 
.main-customer-call {float:left; width:265px; height:151px; background:url("../images/main/main_customer_bg2.jpg") no-repeat; padding:17px 15px 0px 15px; box-shadow:3px 3px 11px rgba(0, 0, 0, 0.1); background-size:100% 100%; height:178px;}
.main-customer-call p {font-size:24px; line-height: 35px; letter-spacing: -0.5px; color:#333333; font-weight: 600; margin-bottom: 10px; padding-top:20px;}
.main-customer-call p span {font-size:35px; line-height: 41px; color:#453422; font-weight: 400;}
.main-customer-call dl {display:table; width:100%;}
.main-customer-call dl:last-child {margin-top: 10px;}
.main-customer-call dt {display:table-cell; vertical-align: middle; width:85px; border-right:1px solid #777777; font-size:14px; letter-spacing: -0.5px; color:rgba(51, 51, 51, 0.7);}
.main-customer-call dd {display:table-cell; vertical-align: middle; padding-left: 10px; font-size:14px; letter-spacing: -0.5px; color:rgba(51, 51, 51, 0.7);}

@media all and (max-width:800px){
	#mainCustomer {padding:35px 0;}
	.main-cusotmer-blog {float:none; width:100%; margin-bottom: 30px;}
	.main-blog-inner {width:48%; margin:0 1%;}
	.main-blog-inner:first-child {margin-right:1%;}
	.main-blog-inner img {max-width:100%;}
	.main-blog-inner > a > img { width:100%;}
	.main-blog-inner a p {padding:10px 0; padding-left: 10px; padding-right:30px; font-size:12px;}
	.main-blog-inner a p i {font-size:18px;}

	.main-customer-sns {float:none; width:100%; margin:0 -1%; padding:0 1%; overflow:hidden; margin-bottom: 10px;}
	.main-customer-inner {float:left; width:48%; margin:0 1%;}
	.main-customer-inner.facebook {margin-bottom: 0;}
	.main-customer-inner a {padding:20px 5%; height:auto;}
	.main-customer-inner a::after {width:10px; height:10px; background-size:100% auto; margin-top: -5px; right:20px;}
	.main-customer-inner a img {max-width:30px;}
	.main-customer-inner a p {margin-left: 10px; font-size:14px; line-height: 18px;}

	.main-customer-call {float:none; width:88%; padding:25px 6%; background-size:100% auto; height:auto;}
	.main-customer-call p {font-size:15px; line-height: 20px;}
	.main-customer-call p span {font-size:22px; line-height: 30px;}

	.main-customer-call dt {font-size:12px; width:70px;}
	.main-customer-call dd {font-size:12px;}
}

@media all and (max-width:180px){
	.main-cusotmer-blog {float:left; width:100%; margin-bottom:10px;}
	.main-blog-inner {float:left; width:49%; margin:0px; padding:0px 0.1%;}
	.main-blog-inner a { border:1px solid #ddd;}

	.main-blog-inner > a > img { width:100%; height:80px;}

	.main-customer-sns {float:left; width:100%;}
	.main-customer-inner {float:left; width:49%; margin:0px; padding:0px 0.5%;}
	.sns_img { width:100%; border:1px solid red;}
	.main-customer-call {margin-top:10px; float:left; box-shadow:3px 3px 11px rgba(0, 0, 0, 0.1); background-size:100% 100%;}
}


@media all and (max-width:480px){
	.main-cusotmer-blog {float:left; width:100%;}
	.main-blog-inner {float:left; width:100%; height:150px;}
	.main-blog-inner:first-child {  margin-bottom:50px;  }
	.main-blog-inner a {display:block; border:1px solid #ddd;}
	.main-blog-inner a img {max-width:100%;}
	.main-blog-inner > a > img { width:100%; height:150px; }	

	.main-customer-sns {float:left; width:100%; padding-top:20px;padding-left:7px; }
	.main-customer-inner a {display:block; position:relative; overflow:hidden; height:45px; padding-top: 25px; box-shadow:3px 3px 11px rgba(0, 0, 0, 0.1);}
	
	.main-customer-inner a p {display:inline-block; vertical-align: middle; font-size:15px; line-height: 21px; letter-spacing: -0.5px; color:#fff; margin-left: 15px;}
	.main-customer-inner a p strong {font-weight: 600;}
	.main-customer-hover {position:absolute; width:190px; height:190px; left:200px; top:50%; margin-top: -95px; background-color:rgba(255, 255, 255, 0.07); border-radius:50%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}

	.main-customer-inner a:hover::after {-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
	.main-customer-inner a:hover .main-customer-hover {width:100%; border-radius:0; left:0;}
	
	.call_subdiv { padding:0px 4px;}
	.main-customer-call {
		margin-top:10px;
		float:left; background:url("../images/main/main_customer_bg2.jpg") no-repeat; 
		box-shadow:3px 3px 11px rgba(0, 0, 0, 0.1); background-size:100% 100%;
	}

}