@charset "utf-8";




/* ******************  메인 비주얼 ********************** */
#mainVisual { position:relative;  margin:0 0; }
.slick-track,
.slick-list { -webkit-perspective: 2000;-webkit-backface-visibility: hidden;}
#mainVisual .visual_con, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.visual_con_item { height:100%;}
.visual_con {z-index:1;}
/* 메인 비주얼 - 이미지 */
.visual_con_item { position:relative; overflow:hidden; }
.visual_con_item .visual_img,
.visual_con_item .visual_img_m{
	width:100%;
	height:100%;
	-ms-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5); 
    -moz-transform: scale(1.5,1.5); 
    -webkit-transform: scale(1.5,1.5); 
     transform: scale(1.5,1.5);
	-webkit-transition:transform 3000ms  ease-in-out ;
	-moz-transition:transform 3000ms ease-in-out ;
	-o-transition:transform 3000ms ease-in-out ;
	-ms-transition:transform 3000ms ease-in-out ;
    transition:transform 3000ms ease-in-out ;	
}
.visual_con_item .visual_img img { width:100%;}
.visual_con_item .visual_img_m { display:none;}

/* 메인 비주얼 - 텍스트 */
.visual_con_item .txt_con { position:absolute; top:0; left:0px; width:520px; bottom:0px; } /* margin-top은 조정 (텍스트영역 높이의 반) */
.visual_con_item .txt_con:before { position:absolute; top:0px; left:0px; width:0; bottom:0px; z-index:1; background:rgba(195,15,24,0.8); content:""; -webkit-transition:opacity 1.0s, width 1.1s; -moz-transition:opacity 1.0s, width 1.1s; -o-transition:opacity 1.0s, width 1.1s; -ms-transition:opacity 1.0s, width 1.1s; transition:opacity 1.0s, width 1.1s;}
.visual_con_item .txt_con .txt1,
.visual_con_item .txt_con .txt2{ overflow:hidden; position:relative; z-index:10; margin-left:45px;}
.visual_con_item .txt_con .txt1-2 { margin-bottom:30px; }
.visual_con_item .txt_con .txt1 strong,
.visual_con_item .txt_con .txt2 span { opacity:0;filter:Alpha(opacity=0); transform:translateY(100%); -webkit-transform:translateY(100%); -webkit-transition: opacity 1.4s  cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s, transform 1.4s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s; transition: opacity 1.4s  cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s, transform 1.4s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s;}
.visual_con_item .txt_con .txt1 strong { display:block; font-size:50px; color:#fff; font-weight:400; letter-spacing:-1px; font-family: 'Open Sans', sans-serif;}
.visual_con_item .txt_con .txt1-2 strong { font-size:76px !important; font-weight:600; letter-spacing:-3px; }
.visual_con_item .txt_con .txt1-2 strong { transition-delay:0.4s; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;}
.visual_con_item .txt_con .txt2 span { display:block; font-size:27px; font-weight:300; letter-spacing:-1.5px; color:#fff; line-height:36px; margin-bottom:20px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}
.visual_con_item .txt_con .txt2 b { font-weight:500;}


/* 메인 비주얼 - active효과 */
.visual_con_item.active-item .visual_img,
.visual_con_item.active-item .visual_img_m { -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);}
.visual_con_item.active-item .txt_con:before { width:520px}
.visual_con_item.active-item .txt1 strong,
.visual_con_item.active-item .txt2 span { opacity:1.0;filter:Alpha(opacity=100); -webkit-transform:translateX(0); transform:translateX(0);}

/* 메인 비주얼 - 버튼 */
#mainVisual .slick-dots { position:absolute; width:100px; text-align:center; left:0; top:50%; margin-top:0; }
#mainVisual .slick-dots li { margin:27px 0; height:3px; }
#mainVisual .slick-dots li button { margin:0px; padding:0px; width:15px; height:3px; background:none; font-size:0; background-color:#ddd; vertical-align:top; cursor:pointer; }
#mainVisual .slick-dots li.slick-active button{background-color:#9c2033;}		/* 버튼 active */

/* 메인 비주얼 - 화살표 */
#mainVisual .slick-arrow { position:absolute; bottom:50px; width:60px; height:60px; border:0; cursor:pointer; z-index:9; font-size:0;}		/* 버튼이미지에 맞게 크기 수정 */
#mainVisual .slick-arrow.slick-prev { margin-left:460px; background:rgba(0,0,0,0.5) url('https://hyundaitel.co.kr/images/button/main_visual_prev_btn_w.png') no-repeat 50% 50%}
#mainVisual .slick-arrow.slick-next { margin-left:520px; background:rgba(0,0,0,0.5) url('https://hyundaitel.co.kr/images/button/main_visual_next_btn_w.png') no-repeat 50% 50%}

/* 메인 비주얼 - 스크롤아이콘 */
.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; }



/* ******************  메인 컨텐츠 ********************** */
#mainContents {}
/* Our Business */
.busi_con { padding:80px 0; background:url('../../img/main/busi_bg.png') no-repeat center top; background-size:cover}
.busi_con .tit_con { margin-bottom:60px; text-align:center; }
.busi_con .tit_con strong { display:block; margin-bottom:10px; font-size:42px; color:#000; font-family:'Montserrat'; line-height:1;  }
.busi_con .tit_con span { font-size:20px; color:#333; font-weight:400}
.busi_con .busi dl { display:table; position:relative; float:left;  width:32%; height:527px; margin-right:10px; text-align:center;}
.busi_con .busi dl:last-child { margin-right:0;}
.busi_con .busi dl:nth-child(2) { margin-top:30px }
.busi_con .busi dl a { display:table-cell; width:100%; height:100%; vertical-align:middle;}
.busi_con .busi dl dt { padding-bottom:50px; transition:all 0.3s ease;}
.busi_con .busi dl.item1 { background:url('../../img/main/busi_item1.jpg') no-repeat center 0}
.busi_con .busi dl.item2 { background:url('../../img/main/busi_item2.jpg') no-repeat center 0}
.busi_con .busi dl.item3 { background:url('../../img/main/busi_item3.jpg') no-repeat center 0}
.busi_con .busi dl .txt_con { color:#fff; transition:all 0.3s ease;}
.busi_con .busi dl .line span { display:block;  position:absolute; background:#9f111c; transition:all 0.3s ease;}
.busi_con .busi dl .tit { position:relative; z-index:10; font-size:30px; line-height:24px; font-weight:600}
.busi_con .busi dl .txt { font-size:20px; letter-spacing:-1px; margin-top:9px;}
.busi_con .busi .line .left { width:8px; height:0px; left:-1px; top:-1px;}
.busi_con .busi .line .top { width:0; height:8px; right:-1px; top:-1px;}
.busi_con .busi .line .right { width:8px; height:0; right:-1px; bottom:-1px;}
.busi_con .busi .line .bot { width:0; height:8px; left:-1px; bottom:-1px;}
.busi_con .busi dl a:hover .left { height:100%;}
.busi_con .busi dl a:hover .top { width:100%;}
.busi_con .busi dl a:hover .right { height:100%;}
.busi_con .busi dl a:hover .bot { width:100%;}
.busi_con .busi dl a:hover dt {padding-bottom:10px; transition:all 0.3s ease;}

/* about company */
.comp_con { margin-top:50px; background:url('../../img/main/comp_bg.png') no-repeat bottom right  }
.comp_con .tit_con { margin:0 0 50px 3%; }
.comp_con .tit_con strong { display:block; margin-bottom:10px; font-size:42px; color:#000; font-family:'Montserrat'; line-height:1;  }
.comp_con .tit_con span { font-size:20px; color:#333; font-weight:400 }
.comp_con .item_con { width:100%; height:450px; background:linear-gradient(90deg, rgba(23,139,165,1) 0%, rgba(102,180,111,0.6445938238576681) 100%); }
.comp_con .item_con ul { width:60%; padding:130px 3% 0;}
.comp_con .item_con ul li { float:left; width:24.12553%; height:200px; padding:0 5px; border-right-width:1px; border-right-style:solid; border-color:rgba(255,255,255,0.5); text-align:center; overflow:hidden;}
.comp_con .item_con ul li:last-child { border-right:none}
.comp_con .item_con ul li img {transform: rotate(deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.comp_con .item_con ul li a:hover img { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); }
.comp_con .item_con ul li .txt_con { padding-top:30px; color:#fff; }
.comp_con .item_con ul li .txt_con .tit { font-size:24px; font-weight:500; line-height:50px;}
.comp_con .item_con ul li .txt_con .txt { font-size:17px; font-weight:300; }

/*/*careers*/
.careers_con { position:relative; float:left; width:49.9999%; height:565px; box-sizing:border-box; overflow:hidden; }
.careers_con .careers img { -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.careers_con .careers .txt_con { position:absolute; top:50%; left:3%; padding-right:20px; margin-top:-100px; width:100%; color:#fff; box-sizing:border-box;}
.careers_con .careers .txt_con .icon { width:50px; height:60px; background:url('../../img/main/careers_icon.png') no-repeat 0 0}
.careers_con .careers .txt_con dt { position:relative; font-size:40px; padding:20px 0;}
.careers_con .careers .txt_con dt span.more { position:absolute; top:50%; left:160px; width:40px; height:40px; margin-top:-15px;  z-index:999; background:url('../../img/main/careers_btn_more.png') no-repeat 0 0;}
.careers_con .careers .txt_con .txt { font-size:22px;}
.careers_con .careers .txt_con dd { font-size:22px;}
.careers_con .careers:hover img {-webkit-transform: scale(1.12);-moz-transform: scale(1.12); -o-transform: scale(1.12);-ms-transform: scale(1.12);transform: scale(1.12);}

/*News*/
.news_con { float:right;  position:relative; width:49.9999%; padding:2%}
.news_con .more { position:absolute; right:2%; top:3%; z-index:99}
.news_con .tit_con { margin:0 0 40px 0; }
.news_con .tit_con strong { display:block; margin-bottom:10px; font-size:42px; color:#000; font-family:'Montserrat'; line-height:1;  }
.news_con .tit_con span { font-size:20px; color:#333; font-weight:400; }
.news_con .new li { position:relative; float:left; width:32.1549%; margin-right:10px; box-sizing:border-box; overflow:hidden;}
.news_con .new li a { display:block; padding:25px 15px; height:330px; border:1px solid #bfbfbf; box-sizing:border-box; }
.news_con .new li:last-child { margin-right:0}
.news_con .new li dl { width:100%; margin-bottom:20px;}
.news_con .new li dl dt { width:100%; font-size:19px; color:#333; font-weight:600; letter-spacing:-1px }
.news_con .new li dl dt span { display:block; margin-top:20px; width:25px; height:2px; background:#333}
.news_con .new li dl dd { margin-top:30px; line-height:26px;}
.news_con .new li .date { padding-top:30px; font-size:15px; color:#999}
.news_con .new li .arr { position:absolute; right:15px; bottom:15px; z-index:99}
.news_con .new li a:hover { border:1px solid #000; }
/*banner*/
.main_banner { overflow: hidden; position:relative; margin:20px auto; padding-top:20px; width:1200px; }
.main_banner .banner { position:relative; }
.main_banner .banner .bannerSlide {  width:100%}
.main_banner .banner .bannerSlide .slick-list { width:1200px; margin:0 auto}
.main_banner .banner .bannerSlide .item { float:left; margin: 0 2px; width:220px; height:80px !important; }
.main_banner .banner .bannerSlide .item { }
.main_banner .banBtn .next, 
.main_banner .banBtn .prev{ position: absolute; top:20px; width:14px; height:25px; padding: 0; cursor: pointer; z-index:999}
.main_banner .banBtn .next{ right:5px !important}
.main_banner .banBtn .prev{ left:0 !important}


@media all and (max-width:1200px){
	/* ******************  메인 컨텐츠 ********************** */
	/* about company */
	.comp_con .item_con ul { width:100%; padding:130px 3% 0;}
	
	/*/*careers*/*/
	.careers_con .careers img { background-size:100% 100%}
	
	/*News*/
	.news_con .new li { float: none; width:100%; margin-right:0;}
	.news_con .new li a { width:100%; padding:20px 15px; height:auto; border:none; border-bottom:1px solid #bfbfbf}
	.news_con .new li:first-child a { border-top:2px solid #333}
	.news_con .new li dl dt { display:block; width:100%; font-size:17px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
	.news_con .new li dl dt span { display:none}
	.news_con .new li dl dd { display:block; width:100%; margin-top:10px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
	.news_con .new li .date { padding-top:0;}
	
	/*banner*/
	.main_banner { width:100%; }
	.main_banner .banner .bannerSlide .slick-list { width:100%;}
	.main_banner .banner .bannerSlide .item { margin: 0 1px; }
	.main_banner .banner .bannerSlide .item img { max-width:100%}
}

@media (max-width:1024px){
	
	/* 메인 비주얼 - 텍스트 */
	.visual_con_item .txt_con { width:420px; padding-top:30px} 
	.visual_con_item .txt_con .txt1,
	.visual_con_item .txt_con .txt2 {  margin-left:25px;}
	.visual_con_item .txt_con .txt1-2 { margin-bottom:20px; }
	.visual_con_item .txt_con .txt1 strong { font-size:40px; }
	.visual_con_item .txt_con .txt1-2 strong { font-size:56px !important; }
	
	/* 메인 비주얼 - active효과 */
	.visual_con_item.active-item .txt_con:before { width:420px}
	
	/* 메인 비주얼 - 화살표 */
	#mainVisual .slick-arrow.slick-prev { margin-left:360px;}
	#mainVisual .slick-arrow.slick-next { margin-left:420px;}
	
	/* ******************  메인 컨텐츠 ********************** */
	/* Our Business */
	.busi_con .busi dl .line span { display:none}
	.busi_con .busi dl dt { padding-bottom:0; transition:none;}
	.busi_con .busi dl a:hover dt {padding-bottom:0; transition:none;}
	
	/* about company */
	.comp_con { margin-top:50px; background-size:50%}

}

@media (max-width: 960px){
	
	/* 메인 비주얼 - 텍스트 */
	.visual_con_item .txt_con { width:320px; padding-top:80px} 
	.visual_con_item .txt_con .txt1,
	.visual_con_item .txt_con .txt2 {  margin-left:25px;}
	.visual_con_item .txt_con .txt1-2 { margin-bottom:10px; }
	.visual_con_item .txt_con .txt1 strong { font-size:30px; }
	.visual_con_item .txt_con .txt1-2 strong { font-size:46px !important; }
	.visual_con_item .txt_con .txt2 span { font-size:22px;}
	
	/* 메인 비주얼 - active효과 */
	.visual_con_item.active-item .txt_con:before { width:320px}
	
	/* 메인 비주얼 - 화살표 */
	#mainVisual .slick-arrow { bottom:0; width:50px; height:50px; }	
	#mainVisual .slick-arrow.slick-prev { margin-left:270px;}
	#mainVisual .slick-arrow.slick-next { margin-left:320px;}
	
	/* ******************  메인 컨텐츠 ********************** */
	/* Our Business */
	.busi_con { padding:30px 0; background:none; margin:0 2%}
	.busi_con .tit_con { margin-bottom:20px; }
	.busi_con .tit_con strong { font-size:36px;}
	.busi_con .tit_con span { font-size:17px; font-weight:300}
	.busi_con .busi dl { float:none; width:100%; height:235px; margin-right:0; text-align:left;}
	.busi_con .busi dl:last-child { margin-top:1px }
	.busi_con .busi dl:nth-child(2) { margin-top:1px }
	.busi_con .busi dl dt { padding-bottom:0;}
	.busi_con .busi dl.item1 { background-position:center center; background-size:cover}
	.busi_con .busi dl.item2 { background-position:center center; background-size:cover}
	.busi_con .busi dl.item3 { background-position:center center; background-size:cover}
	.busi_con .busi dl img { position:absolute; right:2%; width:80px }
	.busi_con .busi dl .txt_con { padding-left:10px;}
	.busi_con .busi dl .txt_con .block { display:none}
	.busi_con .busi dl .tit { font-size:28px;}
	.busi_con .busi dl .txt { font-size:18px;}

	
	
	/* about company */
	.comp_con .tit_con { text-align:center }
	.comp_con .item_con ul {  padding:50px 0 0;}
	.comp_con .item_con { height:200px; }
	.comp_con .item_con ul li img {}
	.comp_con .item_con ul li .txt_con .txt { display:none}

}

@media (max-width: 768px){
	.visual_con_item { height:580px;}
	/* 메인 비주얼 - 이미지 */
	.visual_con_item .visual_img_ m{ 
	-ms-transform: scale(1.05,1.05);
    -o-transform: scale(1.05,1.05); 
    -moz-transform: scale(1.05,1.05); 
    -webkit-transform: scale(1.05,1.05); 
     transform: scale(1.05,1.05);
	-webkit-transition:transform 200ms  ease-in ;
	-moz-transition:transform 200ms ease-in ;
	-o-transition:transform 200ms ease-in ;
	-ms-transition:transform 200ms ease-in ;
    transition:transform 200ms ease-in ;
}
	.visual_con_item .visual_img { display:none}
	.visual_con_item .visual_img_m { display: block; background-size:cover !important;}
	.visual_img_m img{width:100%;}

	
	/* 메인 비주얼 - 텍스트 */
	.visual_con_item .txt_con { top:auto; right:0; left:0; width:auto; height:180px; padding-top:10px; background:rgba(195,15,24,0.8); } /* margin-top은 조정 (텍스트영역 높이의 반) */
	.visual_con_item .txt_con:before { display:none}
	.visual_con_item .txt_con .txt1-2 { margin-bottom:10px; }
	.visual_con_item .txt_con .txt1 strong { font-size:25px; }
	.visual_con_item .txt_con .txt1-2 strong { font-size:36px !important; letter-spacing:-1px; }
	.visual_con_item .txt_con .txt2 span { font-size:18px; line-height:24px;}
	
	/* 메인 비주얼 - 화살표 */
	#mainVisual .slick-arrow { bottom:0; top:530px}	
	#mainVisual .slick-arrow.slick-prev { right:0; margin-left:0; margin-right:50px;}
	#mainVisual .slick-arrow.slick-next { right:0; margin-left:0;}
	
	/* ******************  메인 컨텐츠 ********************** */
	
	/* about company */
	.comp_con .tit_con strong { font-size:36px; }
	.comp_con .tit_con span { font-size:17px; font-weight:300 }
	.comp_con .item_con ul li .txt_con .tit { font-size:20px;}
	
	/*careers*/
	.careers_con { float:none; width:100%; height:200px; }
	.careers_con .careers .txt_con { position:absolute; top:50%; left:3%; padding-right:0; margin-top:-30px; width:100%; color:#fff; box-sizing:border-box;}
	.careers_con .careers .txt_con .icon { float:left; width:50px; height:60px; background:url('../../img/main/careers_icon.png') no-repeat 0 0}
	.careers_con .careers .txt_con dl { float:left; width:80%; padding-left:10px; }
	.careers_con .careers .txt_con dt {font-size:30px; padding:0;}
	.careers_con .careers .txt_con dt span.more { position:absolute; top:50%; left:99%;}
	.careers_con .careers .txt_con dd { font-size:16px;}
	.careers_con .careers:hover img {-webkit-transform: scale(1.12);-moz-transform: scale(1.12); -o-transform: scale(1.12);-ms-transform: scale(1.12);transform: scale(1.12);}
	
	/*News*/
	.news_con { float:none; width:100%;}
	.news_con .more { top:30px; }
	.news_con .tit_con { text-align:center}
	.news_con .tit_con strong { font-size:36px; }
	.news_con .tit_con span { font-size:17px; font-weight:300 }
	
	/*banner*/
	.main_banner .banBtn .next, 
	.main_banner .banBtn .prev{  top:10px; }

}

@media (max-width: 640px){
	/* ******************  메인 컨텐츠 ********************** */
	/* Our Business */
	.busi_con .tit_con strong { font-size:26px;}
	.busi_con .busi dl { height:150px;}
	.busi_con .busi dl .txt_con { width:70%}
	
	/* about company */
	.comp_con .tit_con strong { font-size:26px;}
	.comp_con .item_con ul li img { width:40px}
	.comp_con .item_con ul li .txt_con { padding-top:20px; }
	.comp_con .item_con ul li .txt_con .tit { line-height:20px;}
	
	/*careers*/
	.careers_con .careers .txt_con dt span.more { left:95%;}

}

@media (max-width: 480px){
	/* ******************  메인 컨텐츠 ********************** */
	/* Our Business */
	.busi_con .busi dl img { top:40px }
	.busi_con .busi dl .tit { font-size:24px;}
	.busi_con .busi dl .txt { font-size:16px;}

	/* about company */
	.comp_con .item_con { height:250px; }
	.comp_con .item_con ul { padding:30px 0 0;}
	.comp_con .item_con ul li { float:left; width:49%; height:auto; margin-bottom:30px; border:none}
	.comp_con .item_con ul li .txt_con .tit { font-size:18px;}

	/*careers*/
	.careers_con .careers .txt_con dt span.more { left:90%;}
	
	
	
	
}