@charset "utf-8";
/* ----------
main.css
---------- */

/* ******************  200515 메인리뉴얼 ********************** */
#mainVisual{position:relative; overflow:hidden; background:#fff; height:777px; }
/* -------- 메인 동영상 -------- */
.visual-video-bg{position:relative; left:50%; width:1920px; height:777px; margin-left:-960px; } /* padding-top:96px; */
.visual-video-bg:after{position:absolute; top:0px; left:0px; right:0px; bottom:0px; content:""; }
.embed-container { position: relative; padding-top:56.25%; overflow: hidden; max-width: 100%; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position: absolute; top: 50%; margin-top:-40%; left: 0; width: 100%; height: 100%; }

/* -------- 메인 비주얼 롤링 -------- */
/* 메인 비주얼 :: 텍스트 */
.visual-cover-txt-con{position:absolute; left:0; top:100px; width:100%; bottom:300px; z-index:1; text-align:center; }
.visual-cover-txt-con .visual-cover-txt-inner{display:table; width:100%; height:100%; opacity:0; }
.visual-cover-txt-con .visual-cover-txt-inner-con{display:table-cell; vertical-align:middle; }
.visual-cover-txt-con .visual-txt1{margin-bottom:122px; line-height:1.5em; color:#ffffff; font-size:35px; font-weight:600; text-shadow: 2px 2px 2px #6a6a6a;}	
.visual-cover-txt-con .visual-txt1 #bigTxt{font-size:35px; font-weight:600; text-shadow: 2px 2px 2px #6a6a6a;}	
.visual-cover-txt-con .visual-txt1 #middleTxt div{font-size:20px; font-weight:600; text-shadow: 2px 2px 2px #6a6a6a;}	
.visual-cover-txt-con .visual-txt1 #smallTxt{font-size:18px; font-weight:600; text-shadow: 2px 2px 2px #6a6a6a; }	


#mainVisual.active .visual-cover-txt-inner{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@-webkit-keyframes text-active-animation {
from {
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-30px); 
	-o-transform: translateY(-30px); 
	-moz-transform: translateY(-30px);
	-webkit-transform: translateY(-30px); 
	transform: translateY(-30px); 
}
to {
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0); 
	-o-transform: translateY(0); 
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0); 
	transform: translateY(0); 
}
}
@keyframes text-active-animation {
from {
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-30px); 
	-o-transform: translateY(-30px); 
	-moz-transform: translateY(-30px);
	-webkit-transform: translateY(-30px); 
	transform: translateY(-30px); 
}
to {
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0); 
	-o-transform: translateY(0); 
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0); 
	transform: translateY(0); 
}
}	

/* 메인 비주얼 :: 온라인예약/간편견적신청 버튼 */

/* 메인 비주얼 :: 이미지 */
.visual-img-rolling-container{height:100%; }
.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-item a{display:block; height:100%;}
.main-visual-con{z-index:1;}
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
}
/* 메인 비주얼 :: dots */
.main-visual-con .slick-dots{position:absolute; width:100%; text-align:center; bottom:53px;}
.main-visual-con .slick-dots li{display:inline-block; margin:0 5px ; }
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; border:0; font-size:0; width:15px; height:15px; background-color:#fff; 
	-webkit-border-radius:15px;-moz-border-radius:15px;-o-border-radius:15px;border-radius:15px;
	transition:all 0.4s
}
.main-visual-con .slick-dots li.slick-active button{width:53px; background-color:#00b7f3;}		/* 버튼 active */


/* ******************  메인 공통  ********************** */
#mainContent{font-family:"Nanum Square",'NanumSquare',sans-serif;}
.main-tit-box{text-align:center; margin-bottom:60px; letter-spacing:-0.25px; font-weight:700; color:#303030; }
.main-tit-box .main-en-tit{display:block; font-size:20px; font-family:Arial ,"Nanum Square",'NanumSquare',sans-serif; margin-bottom:20px; color:#c0c0c0; text-transform:uppercase}
.main-tit-box .main-cm-tit{font-size:42px; font-weight:400; }
/* ******************  프로모션  ********************** */
#mainPromotionContent{padding:56px 0; background-color:#f1f3f8;}
#mainPromotionContent .main-tit-box{margin-bottom:35px;}
.main-promotion-inner-box{position:relative; max-width:1192px; margin:0px auto;}
.main-promotion-inner-box:before{position:absolute; top:0px; bottom:0px; left:486px; width:1px; content:""; background-color:#d2d2d2}
/* 상시이벤트 */
.all-day-event-con{float:left; width:434px; margin-top:13px;}
.all-day-event-con a{display:block; text-align:center;}
.all-day-event-con .event-thumb{display:block; width:100%; height:242px; }
.all-day-event-con .event-thumb img{max-width:100%; max-height:100%;}
.all-day-event-con .all-event-tit{display:block; margin-top:20px; color:#303030; font-size:16px; letter-spacing:-0.25px; font-weight:400;}
.all-day-event-con a:hover .all-event-tit{color:#00b7f3;}
/* 진행중이벤트 리스트 */
.ing-event-con{float:right; width:652px; margin-top:13px;}
.ing-event-con .main-tit-box{text-align:left;}
.ing-event-con .ing-event-list-con li{float:left; width:208px; margin-left:14px}
.ing-event-con .ing-event-list-con li:first-child{margin-left:0}
.ing-event-con .ing-event-list-con li a{display:block;}
.ing-event-con .ing-event-list-con li a .event-thumb{display:block; width:208px; height:126px;}
.ing-event-con .ing-event-list-con li a .event-thumb img{width:100%; height:100%;}
.ing-event-con .ing-event-list-con li a .event-tit{display:block; font-size:16px; letter-spacing:-0.25px; color:#303030; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; margin-top:17px;}


/* ******************  제작 및 홍보영상  ********************** */
#mainVideoContent{padding:145px 0 194px;}
/* 홍보영상 :: 헤드라인 */
.main-video-headline-con .headline-left-con{position:relative; float:left; width:612px; height:320px;}
.main-video-headline-con .headline-left-con dl{padding:25px 0 0 0;}
.main-video-headline-con .headline-left-con dl dt{margin-bottom:35px; color:#c0c0c0; font-weight:600; font-size:20px;}
.main-video-headline-con .headline-left-con dl dt img{margin-right:15px; margin-bottom:6px}
.main-video-headline-con .headline-left-con dl dd{color:#454545; line-height:1.88; font-size:17px; letter-spacing:-0.2px; }
.main-video-headline-con .headline-left-con .youtube-icon{position:absolute; bottom:0px; right:0px;}
.main-video-headline-con .headline-right-con{position:relative; float:right; width:615px;}
.main-video-headline-con .headline-right-con .play-icon{position:absolute; top:50%; left:50%; margin:-56px 0 0 -60px}
/* 홍보영상 리스트 */
.main-video-list-con{margin-top:42px;}
.main-video-list-con li{float:left; width:390px; margin-left:45px;}
.main-video-list-con li:first-child{margin-left:0}
.main-video-list-con li a{position:relative; display:block; overflow:hidden;}
.main-video-list-con li .play-icon{position:absolute; top:50%; left:50%; margin:-56px 0 0 -60px; transform:scale(0.6); opacity:0.8}
.main-video-list-con li .ad-info-box{padding-top:20px;} 
.main-video-list-con li .ad-info-box dt{position:relative; color:#c0c0c0; font-size:18px; letter-spacing:-0.2px; margin-bottom:22px; padding-right:70px}
.main-video-list-con li .ad-info-box dt em{font-weight:600}
.main-video-list-con li .ad-info-box dt em,
.main-video-list-con li .ad-info-box dt img{vertical-align:middle; display:inline-block;}
.main-video-list-con li .ad-info-box dt .youtube-icon{position:absolute; top:5px; right:0px;}
.main-video-list-con li .ad-info-box dd{color:#454545; font-size:17px; line-height:32px; }


/* ******************  기업서비스  ********************** */
#mainService2{width:100%; background-color:#00b7f3; padding:38px 0 63px;}
#mainService2 > div.area{overflow:hidden; text-align:center;}
#mainService2 > div > p{float:left; display:inline-block; font-size:16px; letter-spacing:-0.5px; color:#fff; margin:119px 0 0 82px;}
.main-more-business-btn{margin-top:40px;}
.main-more-business-btn a{display:block; width:666px; height:50px; border:1px solid #fff; margin:0 auto; font-size:20px; line-height:50px; letter-spacing:-0.6px; color:#fff; }
.main-more-business-btn .more-icon{display:inline-block; position:relative; top:1px;width:16px; height:17px; margin-left:10px; background:url(/images/common/more_btn01.png) no-repeat}
.main-more-business-btn a:hover { color:#00b7f3; background-color:#fff;}
.main-more-business-btn a:hover .more-icon{top:2px;background-image:url(/images/common/more_btn02.png)}


/* ******************  한스클린 소식과 정보  ********************** */
#mainNoticeInfoContent{padding:100px 0 50px;} /* padding:125px 0 170px; */
/* 한스클린 소식 */
#mainNoticeCon{float:left; position:relative; width:600px;}
.main-notice-tit{color:#303030; font-size:18px; letter-spacing:-0.5px; margin-bottom:8px;}
.main-notice-tit .category-txt{display:inline-block; background-color:#303030; color:#fff; font-weight:600; font-size:12px; letter-spacing:-0.15px; padding:3px 4px 2px 5px; vertical-align:middle}
.main-notice-tit strong{margin-left:7px; line-height:28px;}
.main-notice-more-btn{ padding:5px 0; background-color:#9f9f9f; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;position:absolute; top:15px; right:0px; width:75px; height:35px; color:#ffffff !important; font-size:14px; line-height:24px; text-align:center;}
.main-notice-container{padding:20px 9px; border-top:2px solid #303030; border-bottom:1px solid #303030;}
.main-notice-container li:first-child{border-bottom:1px solid #c8c8c8;}
.main-notice-container li a{display:block; padding:20px 0; overflow:hidden;}
.main-notice-container li a .notice-thumb{float:left; display:block; width:182px; height:100px; margin-right:20px;}
.main-notice-container li a .notice-thumb img{width:100%; height:100%;}
.main-notice-container li a .notice-info-box{float:left; width:370px; padding:8px 0;}
.main-notice-container li a .notice-info-box dt{height:48px; overflow:hidden; width:270px; color:#151515; font-size:14px; line-height:24px; letter-spacing:-0.2px; }
.main-notice-container li a .notice-info-box dd{color:#aaa; font-size:14px; letter-spacing:-0.2px; text-align:right; margin-top:25px;}
.main-notice-container li a:hover .notice-info-box dt{color:#00b7f3}
/* 한스클린 특허 및 허가 */
#mainInfoCon{float:right; width:621px;}
.main-info-tab-list-con li{float:left; width:33.33%; text-align:center;}
.main-info-tab-list-con li a{display:block; height:36px; border-bottom:2px solid #c8c8c8; color:#c8c8c8; font-size:18px; letter-spacing:-0.2px; line-height:31px}
.main-info-tab-list-con li.selected a{border-bottom-color:#303030; color:#303030;}
.main-info-tab-wrapper{height:325px; border:1px solid #c8c8c8; border-top:0}
.main-info-tab-wrapper .main-info-con{padding:28px; text-align:center; }


/* ******************  한스클린 퍼포먼스  ********************** */
#mainPerformanceContent{margin-bottom:185px;}
/* 한스클린 퍼포먼스 텍스트 */
.performance-rolling-txt-box dl{text-align:center; color:#303030; font-size:22px; letter-spacing:-0.5px; margin-bottom:30px;}
.performance-rolling-txt-box dl dt{font-size:30px; margin-bottom:13px; font-weight:400;}			
/* 퍼포먼스 리스트 :: dots */
.performance-rolling-img-box .slick-dots{text-align:center; margin-top:30px;}
.performance-rolling-img-box .slick-dots li{display:inline-block; margin:0 3px ; }
.performance-rolling-img-box .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; border:0; font-size:0; width:17px; height:8px; background-color:#bfbfbf; 
	-webkit-border-radius:15px;-moz-border-radius:15px;-o-border-radius:15px;border-radius:15px;
	transition:all 0.4s
}
.performance-rolling-img-box .slick-dots li.slick-active button{width:58px; background-color:#00b7f3;}


/* ******************  한스클린 실제후기  ********************** */
#mainReviewContent{margin-bottom:185px;}
/* 베스트리뷰 */
#mainBestReveiwCon{overflow:hidden; float:left; position:relative; width:624px;}
.main-best-review-list{margin:0 -4px}
.main-best-review-list ul{}
.main-best-review-list li{float:left; width:308px; margin:0 4px;}
.main-best-review-list li a{display:block;}
.main-best-review-list li .review-thumb{display:block; width:100%; height:215px;}
.main-best-review-list li .review-thumb img{width:100%; height:100%;}
/* 실시간 후기 */
#mainRealTimeReviewCon{float:right; position:relative; width:470px; }
.main-realtime-review-list-con{border-top:2px solid #303030; border-bottom:1px solid #303030; padding:8px 0 0 0;}
.real-time-review-list > ul{padding:0 5px; width:470px;}
.real-time-review-list > ul li{width:100%; height:39px; border-bottom:1px dotted #b0b0b0;}
.real-time-review-list > ul li:last-child{border-bottom:0}
.real-time-review-list > ul li > a{font-size:13px; line-height:39px; letter-spacing:-0.5px; color:#7b7b7b; overflow:hidden;}
.real-time-review-list > ul li > a > span.board-tit{float:left; width:380px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block;}
.real-time-review-list > ul li > a > span.board-tit > img{margin-left:5px;}
.real-time-review-list > ul li > a > span.board-day{float:right;}
.real-time-review-list > ul li > a:hover{color:#26a4ea}


#mainNoticeContent{float:left; position:relative; width:624px;}
.main-notice-title{color:#303030; font-size:18px; letter-spacing:-0.5px; margin-bottom:8px;}
.main-notice-title .category-txt{display:inline-block; background-color:#303030; color:#fff; font-weight:600; font-size:12px; letter-spacing:-0.15px; padding:3px 4px 2px 5px; vertical-align:middle}
.main-notice-title strong{margin-left:7px; line-height:28px;}

.main-notice-list-con{border-top:2px solid #303030; border-bottom:1px solid #303030; padding:8px 0 0 0;}
.real-notice-list > ul{padding:0 5px; width:615px; }
.real-notice-list > ul li{width:100%; height:39px; border-bottom:1px dotted #b0b0b0;}
.real-notice-list > ul li:last-child{border-bottom:0}
.real-notice-list > ul li > a{font-size:13px; line-height:39px; letter-spacing:-0.5px; color:#7b7b7b; overflow:hidden;}
.real-notice-list > ul li > a > span.board-tit{float:left; width:380px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block;}
.real-notice-list > ul li > a > span.board-tit > img{margin-left:5px;}
.real-notice-list > ul li > a > span.board-day{float:right;}
.real-notice-list > ul li > a:hover{color:#26a4ea}





#mainNoticeCon{float:left; position:relative; width:600px;}
/* 하단 배너 */
#reviewBottomBanner{clear:both; margin:0 -9px; padding-top:47px}

/* ******************  한스클린과 상담하세요  ********************** */
#mainConsulting{margin:0 0 157px; }
#mainConsulting .water-img-con img{position:relative; left:50%; margin-left:-960px}
#mainConsulting .con-txt{position:relative;width:100%; padding:65px 0 60px;  background-color:#00b7f3}
#mainConsulting .con-txt:after{position:absolute; bottom:-33px; left:50%; margin-left:-32px; width:65px; height:33px; content:""; background:url(/kr/images/main/main_consulting_arrow.jpg)}
.con-txt > article.area > h2{display:block; text-align:center;padding-bottom:15px; color:#fff; letter-spacing:-0.2px; font-size:42px; font-weight:600;}
.con-txt > article.area > p{text-align:center; font-size:22px; line-height:26px; color:#fff; margin-bottom:45px; letter-spacing:-0.3px; }
.con-txt > article.area > .tel-box{text-align:center;}
.tel-box > a{width:210px; height:66px; display:inline-block; margin-right:30px; font-size:16px; line-height:66px; letter-spacing:-0.5px; color:#462a29; font-weight:600; background-color:#fff; border-radius:10px; box-shadow:10px 10px 10px rgba(100, 100, 100, .3);}
.tel-box > a:last-child{margin-right:0px;}
.tel-box > a > img{margin-right:5px;}


/* ******************  한스클린 통계  ********************** */
#mainStatisticsCon{max-width:1042px; margin:0px auto 185px;}
#mainStatisticsCon .main-tit-box{margin-bottom:75px;}
#mainStatisticsCon .statics-tit{color:#303030; font-size:17px; letter-spacing:-0.2px; font-weight:600; margin-bottom:22px;}
.main-statics-top-con{margin-bottom:40px;}
/* 최근 3년간 누적 고객수 */
.main-statics-left-con{float:left; width:505px;}
.statics-customer-num-chart{position:relative; height:240px; background:url(/kr/images/main/main_customer_num_bg.jpg) no-repeat; }
.statics-customer-num-chart .chart-line{position:absolute; top:0px; bottom:0px; left:0; width:0; transition:all 1s linear}
.statics-customer-num-chart .pink-line{background:url(/kr/images/main/customer_num_chart_pink_line.png) no-repeat 0 0}
.statics-customer-num-chart .purple-line{background:url(/kr/images/main/customer_num_chart_purple_line.png) no-repeat 0 0; transition-delay:0.3s}
.statics-customer-num-chart .blue-line{background:url(/kr/images/main/customer_num_chart_blue_line.png) no-repeat 0 0; transition-delay:0.7s}
.statics-customer-num-chart .chart-year{transition:all 0.5s; opacity:0;}
.statics-customer-num-chart .pink-year{position:absolute; bottom:40px; right:10px; transition-delay:0.5s}
.statics-customer-num-chart .purple-year{position:absolute; top:40px; right:178px; transition-delay:0.8s}
.statics-customer-num-chart .blue-year{position:absolute; top:0px; right:69px; transition-delay:1.5s}
.statics-customer-num-chart.active .chart-line{width:100%}
.statics-customer-num-chart.active .chart-year{opacity:1.0}

[data-aos="chart-active"].aos-animate .chart-line{
	width:100%;
}
[data-aos="chart-active"].aos-animate .chart-year{
	opacity:1.0
}

/* 국내 상위 업체와의 격차 */
.main-statics-right-con{float:right; width:500px;}
.statics-company-gap-chart{position:relative; height:273px; background:url(/kr/images/main/main_company_gap_bg.jpg) no-repeat; }
.statics-company-gap-chart .gap-txt{position:absolute; top:-40px; right:0px; color:#303030; font-size:12px;}
.company-gap-list{position:absolute; top:10px; left:0px; right:0px; bottom:34px; }
.company-gap-list li{float:left; position:relative; width:20px; height:100%; background-color:#c6c6c6; margin-left:91px}
.company-gap-list li:after{position:absolute; bottom:0px; left:0; width:100%; height:0px; content:""; transition:all 1s linear;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008bdb+0,00b7f3+100 */
	background: rgb(0,139,219); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,139,219,1) 0%, rgba(0,183,243,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,139,219,1) 0%,rgba(0,183,243,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,139,219,1) 0%,rgba(0,183,243,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bdb', endColorstr='#00b7f3',GradientType=0 ); /* IE6-9 */
}
.company-gap-list li:first-child{margin-left:71px}
.company-gap-list .hans-clean-company:after{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#003dac+0,0073e9+49,1a66b4+99 */
	background: rgb(0,61,172); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,61,172,1) 0%, rgba(0,115,233,1) 49%, rgba(26,102,180,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,61,172,1) 0%,rgba(0,115,233,1) 49%,rgba(26,102,180,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,61,172,1) 0%,rgba(0,115,233,1) 49%,rgba(26,102,180,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003dac', endColorstr='#1a66b4',GradientType=0 ); /* IE6-9 */

}
[data-aos="chart-active"].aos-animate .company-gap-list li:nth-child(1):after{height:142px;}
[data-aos="chart-active"].aos-animate .company-gap-list li:nth-child(2):after{height:102px;}
[data-aos="chart-active"].aos-animate .company-gap-list li:nth-child(3):after{height:135px;}
[data-aos="chart-active"].aos-animate .company-gap-list .hans-clean-company:after{height:203px; transition-duration:1.5s}

/* 홈페이지 누적 이용고객 */
.homepage-customer-num-con{width:100%; height:215px; padding:23px 26px 26px 23px; box-sizing:border-box; background-color:#f2f4fa}
.today-num-box{margin-bottom:32px;}
.today-num-box .today-date{float:left; color:#303030; font-size:12px; letter-spacing:-0.2px;}
.today-num-box .nujuk-hompage-num{float:right; color:#303030; font-size:17px; letter-spacing:-0.2px;}
.today-num-box .nujuk-hompage-num dt{display:inline-block; vertical-align:middle; font-weight:600; margin-right:15px;}
.today-num-box .nujuk-hompage-num dd{display:inline-block; vertical-align:middle; font-weight:600;}
.today-num-box .nujuk-hompage-num dd strong{display:inline-block; font-size:34px;}
.homepage-number-box h4{color:#303030; font-size:17px; letter-spacing:-0.3px; font-weight:400; text-align:center; margin-bottom:28px;}

/* 보유 현장팀 */
.main-statics-own-box{float:left; width:245px; box-sizing:border-box; background-color:#f2f4fa; height:215px; padding:23px 26px 26px 23px; }
.main-statics-own-box:first-child{margin-right:30px}
.main-statics-own-box h4{color:#303030; font-size:17px; letter-spacing:-0.2px; margin-bottom:14px;}
.own-team-list-con li{margin-bottom:8px;}
.own-team-list-con li dl{overflow:hidden;}
.own-team-list-con li dt{color:#303030; font-size:12px; margin-bottom:3px; font-weight:600;}
.own-team-list-con li dd .line{float:left; position:relative; width:166px; height:8px; background-color:#d3d6db}
.own-team-list-con li dd .line:after{position:absolute; top:0px; bottom:0px; left:0; width:0; content:""; transition:all 1s }
.own-team-list-con li dd .num{float:right; color:#303030; font-size:12px; }

.own-team-list-con li:nth-child(1) dd .line:after{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3875ff+0,124ac9+100 */
	background: rgb(56,117,255); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(56,117,255,1) 0%, rgba(18,74,201,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(56,117,255,1) 0%,rgba(18,74,201,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(56,117,255,1) 0%,rgba(18,74,201,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875ff', endColorstr='#124ac9',GradientType=1 ); /* IE6-9 */
}
.own-team-list-con li:nth-child(2) dd .line:after{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#676de7+0,6d09de+100 */
	background: rgb(103,109,231); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(103,109,231,1) 0%, rgba(109,9,222,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(103,109,231,1) 0%,rgba(109,9,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(103,109,231,1) 0%,rgba(109,9,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#676de7', endColorstr='#6d09de',GradientType=1 ); /* IE6-9 */
}
.own-team-list-con li:nth-child(3) dd .line:after{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#306aff+0,00459b+100 */
	background: rgb(48,106,255); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(48,106,255,1) 0%, rgba(0,69,155,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(48,106,255,1) 0%,rgba(0,69,155,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(48,106,255,1) 0%,rgba(0,69,155,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#306aff', endColorstr='#00459b',GradientType=1 ); /* IE6-9 */
}
.own-team-list-con li:nth-child(4) dd .line:after{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00c2d9+1,0090ba+100 */
	background: rgb(0,194,217); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(0,194,217,1) 1%, rgba(0,144,186,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,194,217,1) 1%,rgba(0,144,186,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,194,217,1) 1%,rgba(0,144,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c2d9', endColorstr='#0090ba',GradientType=1 ); /* IE6-9 */
}

[data-aos="chart-active"].aos-animate.own-team-list-con li:nth-child(1) .line:after{width:140px}
[data-aos="chart-active"].aos-animate.own-team-list-con li:nth-child(2) .line:after{width:63px}
[data-aos="chart-active"].aos-animate.own-team-list-con li:nth-child(3) .line:after{width:40px}
[data-aos="chart-active"].aos-animate.own-team-list-con li:nth-child(4) .line:after{width:49px}

/* 고객만족도 */
.main-satisfy-box{float:left; width:225px; box-sizing:border-box; background-color:#f2f4fa; height:215px; padding:23px 26px 26px 23px; }
.main-satisfy-box h4{color:#303030; font-size:17px; letter-spacing:-0.2px; margin-bottom:14px;}
.main-satisfy-box .satisfy-txt{font-size:12px; letter-spacing:-0.2px; color:#303030; text-align:right; display:block;}


/* ******************  한스클린 이념  / 집중투자 / 노하우 ********************** */
.main-img-only-wrapper{max-width:1044px; margin:0px auto 142px;}
#mainKnowHowContent{max-width:1124px; margin-top:165px}

/* ******************  한스클린 전국 ********************** */
#mainBottomMapCon.height-wide{height:426px; padding-top:40px; box-sizing:border-box; background-image:url(/kr/images/main/bottom_map_bg2.jpg)}

/* ******************  한스클린 비용절감 ********************** */
#mainPriceLowContent{margin-bottom:290px}
.main-hans-choide-graph-box{max-width:1170px; margin:0px auto;}


/* ******************  견적신청/온라인예약/파격이벤트/실시간상담 ********************** */
#mainBottomRequestContent{padding:50px 0 50px; font-family:"Nanum Square",'NanumSquare',sans-serif; } /* background-color:#edeef1;  */
/* -------- 왼쪽 신청 영역 -------- */
.main-request-form-wrapper{float:left; width:520px; height:760px; background-color:#fff; border:3px #bccad7 solid;border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;} /* box-shadow:10px 10px 15px rgba(100, 100, 100, .2);  */

/* 왼쪽신청영역 :: 탭 */
.request-tab-list-con li{float:left; width:297px; /* 198px */ text-align:center;}
.request-tab-list-con li a{display:block; height:60px; line-height:60px; color:#fff; font-size:18px; letter-spacing:-0.2px; font-size:18px; letter-spacing:-0.2px; background-color:#1d2088; border-left:1px solid #fff;}
.request-tab-list-con li:first-child a{border-left:0}
.request-tab-list-con li.selected a{background-color:#fff; color:#1d2088;}
/* 왼쪽신청영역 :: 공통 */
.request-tab-form-inner{display:none; padding:56px 49px 0 55px;}
.request-tab-tit{position:relative; color:#303030; font-size:28px; letter-spacing:-0.2px; margin-bottom:50px;}
.request-tab-tit img{margin-right:16px;}
.request-submit-btn-box{text-align:center;}
.request-submit-btn{display:inline-block; box-sizing:border-box; width:192px; height:46px; line-height:44px; background-color:#fff; border:2px solid #1d2088; font-size:16px; color:#1d2088; letter-spacing:-0.2px; font-family:"Nanum Square",'NanumSquare',sans-serif; padding:0; margin:0px;}
.request-submit-btn:hover{background-color:#1d2088; color:#fff}
/* 왼쪽신청영역 :: 간편견적신청 */
.simple-estimate-tbl{width:100%; }
.simple-estimate-tbl th{width:90px; color:#303030; font-size:18px; letter-spacing:-0.2px; font-weight:400; vertical-align:middle; line-height:50px; text-align:left;  font-family:"Nanum Square",'NanumSquare',sans-serif}
.simple-estimate-tbl td{padding:5px 0 ;font-family:"나눔고딕", 'NanumGothic', "WebNanumGothic", "맑은 고딕", Malgun Gothic, "돋움", Dotum, Tahoma, Verdana, Calibri, Arial, sans-serif }
.simple-estimate-tbl .simple-estimate-word{border:1px solid #eee; height:42px; width:100%; text-indent:17px; font-size:17px; box-sizing:border-box; }
.simple-estimate-tbl .select-box{border:1px solid #eee; padding:0 14px;}
.simple-estimate-tbl .simple-estimate-word.essential,
.simple-estimate-tbl .select-box.essential{border-color:#00b7f3}
.simple-estimate-tbl .simple-estimate-select{border:0; height:42px; width:100%; color:#bdbdbd; font-size:17px; padding:0; box-sizing:border-box; }
.simple-estimate-tbl .event-select .simple-estimate-select{}
.simple-estimate-tbl .select-box.essential .simple-estimate-select{color:#303030}
.simple-estimate-tbl .simple-estimate-word::placeholder,
.simple-estimate-tbl .simple-estimate-select::placeholder{color:#bdbdbd; }
.simple-etimate-address{margin-bottom:8px}
.simple-etimate-address .zip-code-btn{float:right; height:42px; width:60px; margin:0px; border:0px; background-color:#00b7f3; color:#fff; font-size:17px; }
.simple-etimate-address .simple-estimate-word{width:calc(100% - 60px);}
.simple-estimate-tbl .agree-td{/* padding:55px 0px; */ padding:30px 0; color:#303030; font-size:16px; letter-spacing:-0.2px; text-align:left;}
.simple-estimate-tbl .agree-td label{display:inline-block; margin:0 10px;}
.simple-estimate-tbl .agree-td a:hover{color:#00b7f3}

/* 왼쪽신청영역 :: 온라인예약하기 */
.online-reservation-txt{color:#303030; font-size:18px; letter-spacing:-0.2px; margin-bottom:33px;}
.online-reservation-list-con{max-width:400px; margin:0px auto 65px;}
.online-reservation-list-con li{margin-bottom:14px}
.online-reservation-list-con li input{display:none;}
.online-reservation-list-con li label{display:block; border:1px solid #c8c8c8; height:44px; width:100%; box-sizing:border-box;}
.online-reservation-list-con li label span{display:block; height:42px; border:1px solid #fff; color:#bdbdbd; line-height:42px; padding-left:18px; font-size:18px;}
.online-reservation-list-con li input:checked + label{border-color:#00b7f3;}
.online-reservation-list-con li input:checked + label span{border-color:#00b7f3; color:#00b7f3}

/* 왼쪽신청영역 :: 진행 중인 프로모션 */
.online-promotion-box .request-tab-tit{margin-bottom:40px;}
.online-promotion-img-list{max-width:345px; margin:0px auto 52px;}
.online-promotion-img-list li{margin-bottom:14px;}
.online-promotion-img-list li a{display:block; overflow:hidden;}
.online-promotion-img-list li img{width:100%; height:195px;}

/* 왼쪽신청영역 :: Contact Us */
.contact-us-list-con{max-width:395px; margin:0px auto;}
.contact-us-list-con li{margin-bottom:35px;}
.contact-us-list-con li a{display:block; height:76px; line-height:76px; padding-left:112px; border:1px solid #c6c6c6}
.contact-us-list-con li:first-child a:hover{border-color:#454eff}
.contact-us-list-con li:nth-child(2) a:hover{border-color:#ffcc00}
.contact-us-list-con li:nth-child(3) a:hover{border-color:#00b7f3}
.contact-us-list-con li:nth-child(4) a:hover{border-color:#ff6a30}
.contact-us-list-con li a .icon{display:inline-block; vertical-align:middle; margin-right:14px; }
.contact-us-list-con li a .icon .off-icon{display:block; opacity:1}
.contact-us-list-con li a .icon .on-icon{display:none; opacity:0}
.contact-us-list-con li a:hover .icon .off-icon{display:none; opacity:0}
.contact-us-list-con li a:hover .icon .on-icon{display:block; opacity:1}
.contact-us-list-con li a strong{display:inline-block; vertical-align:middle; color:#2e2d2d; font-weight:400; font-size:20px; letter-spacing:-0.5px;}

/* -------- 오른쪽 신청 영역 -------- */
.request-right-img-wrapper{ border:1px red solid; position:relative; float:right; width:520px; height:695px;  /*padding-top:128px;*/padding-top:100px; border:2px #d7d7d7 solid;border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; padding:0 20px;}
.request-right-img-wrapper .request-txt-inner{}
.request-right-img-wrapper .request-right-tit{font-size:42px; line-height:1.3; letter-spacing:-0.3px; color:#303030; margin-bottom:55px; opacity:0;}
.request-right-img-wrapper .request-right-txt{font-size:20px; line-height:1.3; letter-spacing:-0.2px; color:#303030; margin-bottom:55px;}

.request-right-img-wrapper .request-right-btn{display:block; position:relative; z-index:1; width:194px; height:50px; line-height:50px; background-color:#1d2088; text-align:center; border-radius:30px; color:#fff; font-size:18px; }
.request-right-img-wrapper .request-right-btn.none-link{cursor:default;}
.request-right-img-wrapper .request-right-btn img{margin-right:9px; }

.request-right-img-wrapper .request-right-btn02{display:block; position:absolute; top:325px; right:130px; z-index:1; width:194px; height:50px; line-height:50px; background-color:#1d2088; text-align:center; border-radius:30px; color:#fff; font-size:18px; }
.request-right-img-wrapper .request-right-btn02.none-link{cursor:default;}
.request-right-img-wrapper .request-right-btn02 img{margin-left:20px; }


.simple-request-img-box{display:block; position:absolute; bottom:-84px; right:-35px; opacity:0;}

.request-img-container.active .request-right-tit,
.request-img-container.active .request-right-txt,
.request-img-container.active .request-right-btn02,
.request-img-container.active .request-right-btn{
	-webkit-animation: request-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: request-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.request-img-container.active .simple-request-img-box{
	-webkit-animation: request-animation2 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: request-animation2 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes request-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateX(-30px); 
		-o-transform: translateX(-30px); 
		-moz-transform: translateX(-30px);
		-webkit-transform: translateX(-30px); 
		transform: translateX(-30px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateX(0); 
		-o-transform: translateX(0); 
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes request-animation2 {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateX(30px); 
		-o-transform: translateX(30px); 
		-moz-transform: translateX(30px);
		-webkit-transform: translateX(30px); 
		transform: translateX(30px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateX(0); 
		-o-transform: translateX(0); 
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}	



/* ******************  제휴서비스 ********************** */
#mainaffliatedContent{padding:190px 0 200px;}
.affliate-wrapper-con{max-width:925px; margin:0px auto;}
.affliate-wrapper-con .slick-slider{margin:0 30px;}
.affiliate-list-box{position:relative;}
/* 상단 */
.affiliate-detail-item a{overflow:hidden; display:block;}
.affiliate-detail-item .affiliate-left-con{float:left; width:420px; height:250px; border:1px solid #e5e5e5; box-sizing:border-box}
.affiliate-detail-item .affiliate-left-con img{width:100%; height:100%;}
.affiliate-detail-item .affiliate-right-con{float:right; width:410px; padding-top:44px;}
.affiliate-detail-item .affiliate-right-con dt{color:#00b7f3; font-size:32px; font-weight:400; letter-spacing:-0.3px; margin-bottom:45px;}
.affiliate-detail-item .affiliate-right-con dd{color:#303030; font-size:16px; line-height:1.75; letter-spacing:-0.25px; word-break:keep-all}
.affiliate-list-box .slick-arrow{position:absolute; top:92px; width:28px; height:66px; font-size:0; margin:0; padding:0; background:none; border:0; }
.affiliate-list-box .slick-prev{left:-112px; background:url(/kr/images/button/affiliate_prev_btn.jpg) no-repeat}
.affiliate-list-box .slick-next{right:-112px; background:url(/kr/images/button/affiliate_next_btn.jpg) no-repeat}
/* 하단 */
.affiliate-list-box .slick-dots{height:85px; margin:0 -50px; padding-top:31px; margin-top:31px; padding:30px 30px 0 30px; border-top:1px solid #e5e5e5}
.affiliate-list-box .slick-dots li{float:left; width:16%; margin:0 2%; cursor:pointer; }
.affiliate-list-box .slick-dots li span{display:block; background:#000 }
.affiliate-list-box .slick-dots li img{width:100%; height:85px; opacity:0.5; transition:all 0.5s} 
.affiliate-list-box .slick-dots li.slick-active img{opacity:1.0}
.affiliate-list-box .slick-dots li .affiliate-tit{text-align:center; color:#797979; font-size:14px; display:block; padding-top:10px; letter-spacing:-0.2px;}



/* ******************  청소 의미 ********************** */
#mainCleanMeanContent{height:857px; box-sizing:border-box; padding-top:107px; /*background:url(/kr/images/main/main_clean_mean_bg.gif) no-repeat*/ background-color:#a3a5a9; box-shadow:0px 5px 11px 5px rgba(0,0,0,0.13) inset}
.main-clean-img{box-shadow:10px 10px 20px rgba(0, 0, 0, .1); margin-bottom:50px;}
#mainCleanMeanContent .main-tit-box{margin-bottom:35px; color:#fff;}
#mainCleanMeanContent .main-tit-box .main-en-tit{color:#fff;}
.main-clean-mean-txt{max-width:1028px; margin:0px auto; color:#fff; font-size:18px; letter-spacing:-0.3px; line-height:1.55; word-break:keep-all;}
.main-clean-mean-txt:first-of-type{margin-bottom:16px;}
.main-clean-btn-box{margin-top:55px; text-align:center}
.main-clean-btn-box a{display:inline-block; width:315px; height:38px; color:#fff; background-color:#2363a8; font-size:18px; line-height:38px; letter-spacing:-0.3px;}