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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:727px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{}
.slick-track,
.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%;
	overflow:hidden;
}
.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;
	-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 7000ms  ease-in-out ;   /*이미지 속도 맞춤*/
	-moz-transition:transform 7000ms ease-in-out ;
	-o-transition:transform 7000ms ease-in-out ;
	-ms-transition:transform 7000ms ease-in-out ;
    transition:transform 7000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute; top:50%; left:0px; width:100%; /*margin-top:-121px;*/margin-top:-110px;} /* margin-top은 조정 (텍스트영역 높이의 반) */
.main-visual-item.item02 .main-visual-txt-con,
.main-visual-item.item03 .main-visual-txt-con{margin-top:-80px;}
.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,
.main-visual-item .main-visual-txt-con .main-visual-txt4,
.main-visual-item .main-visual-txt-con .main-visual-more-btn{
	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.left .main-visual-txt1,
.main-visual-item .main-visual-txt-con.left .main-visual-txt2,
.main-visual-item .main-visual-txt-con.left .main-visual-txt3,
.main-visual-item .main-visual-txt-con.left .main-visual-txt4,
.main-visual-item .main-visual-txt-con.left .main-visual-more-btn{
	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,
.main-visual-item .main-visual-txt-con.left .main-visual-txt1{display:block; font-size:18px; letter-spacing:-1px;line-height:25px; font-weight:200; color:#fff; margin-bottom:30px; padding-top:28px; -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-txt1:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:46px; height:3px; background-color:#ec2227;}
.main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{right:auto; left:0;}
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con.left .main-visual-txt2{display:block; font-size:50px; font-weight:300; letter-spacing:-0.5px; line-height:55px;  color:#fff; margin-bottom:30px; -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 strong{font-size:36px; font-weight:500;}
.main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:60px; font-weight:600;}
.main-visual-item .main-visual-txt-con .main-visual-txt2 b{font-weight:500;}
.main-visual-item .main-visual-txt-con .main-visual-txt3,
.main-visual-item .main-visual-txt-con.left .main-visual-txt3{display:block; font-size:17px; letter-spacing:-0.95px; color:#f2f2f2; line-height:28px; margin-bottom:35px;}
.main-visual-item .main-visual-txt-con .main-visual-txt4,
.main-visual-item .main-visual-txt-con.left .main-visual-txt4{display:block; font-size:18px; color:#00a1e4; margin-bottom:35px;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; font-size:16px; font-weight:300; color:#fff; padding-bottom:13px; border-bottom:3px solid #fff; -webkit-transition-delay:0.8s;-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-ms-transition-delay:0.8s;transition-delay:0.8s;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{text-shadow:1px 1px 2px rgba(0, 0, 0, .5);}
.main-visual-item .main-visual-txt-con img{display:inline-block;}

/*ey*/
.main-visual-item .main-visual-txt-con .main-visual-txt6,
.main-visual-item .main-visual-txt-con.left .main-visual-txt6{display:block; font-size:50px; font-weight:300; letter-spacing:-0.5px; line-height:55px;  color:#000; margin-bottom:30px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}

/*---*/

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
	-ms-transform: scale(1.0,1.0) rotate(0.1deg);
    -o-transform: scale(1.0,1.0) rotate(0.1deg);
    -moz-transform: scale(1.0,1.0) rotate(0.1deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.1deg);
     transform: scale(1.0,1.0) rotate(0.1deg);
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3,
.main-visual-item.active-item .main-visual-txt4,
.main-visual-item.active-item .main-visual-more-btn{
	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-item.active-item .main-visual-txt-con.left .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt3,
.main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt4,
.main-visual-item.active-item .main-visual-txt-con.left .main-visual-more-btn{
	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);
}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute; width:100%; text-align:center; bottom:38px;}
#mainVisual .slick-dots li{display:inline-block; margin:0 22px ; }
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:11px; height:11px; background-color:#5b5b5a; border:2px solid #5b5b5a;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
#mainVisual .slick-dots li.slick-active button{background-color:transparent;}		/* 버튼 active */


@media all and ( max-width: 800px ){
	#mainVisual{height:auto;}
	
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	.main-visual-m-img img{width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con,
	.main-visual-item.item02 .main-visual-txt-con,
	.main-visual-item.item03 .main-visual-txt-con{margin-top:-77px}
	.main-visual-item .main-visual-txt-con .main-visual-txt1,
	.main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:13px; margin-bottom:14px; padding-top:14px; letter-spacing:-1px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1:before,
	.main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{width:18px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2,
	.main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:30px; line-height:35px; margin-bottom:14px; letter-spacing:-1.75px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 strong{font-size:21px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:40px; line-height:40px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt3,
	.main-visual-item .main-visual-txt-con.left .main-visual-txt3{font-size:13px; line-height:18px; margin-bottom:15px; }
	.main-visual-item .main-visual-txt-con .main-visual-txt3 img,
	.main-visual-item .main-visual-txt-con.left .main-visual-txt3 img{max-width:116px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn{font-size:12px; padding-bottom:4px; border-bottom-width:2px;}
	
	/* 메인 비주얼 :: 버튼 */
	#mainVisual .slick-dots{bottom:19px;}
	#mainVisual .slick-dots li{margin:0 11px;}
}

@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con,
	.main-visual-item.item02 .main-visual-txt-con,
	.main-visual-item.item03 .main-visual-txt-con{margin-top:-50px}
	.main-visual-item .main-visual-txt-con.point{margin-top:-77px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2,
	.main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:26px; line-height:31px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 strong{font-size:18px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:30px; line-height:30px;}
}




/* -------- 메인컨텐츠 :: 컨텐츠 퀵메뉴 -------- */
#mainQuickMenuCon{padding:96px 0 110px;}
#mainQuickMenuCon ul{overflow:hidden; margin:0 -1%}
#mainQuickMenuCon ul li{float:left; width:31.33%; margin:0 1%;}
#mainQuickMenuCon ul li .main-quick-thumb{overflow:hidden; position:relative; display:block; height:0; padding-top:55%; }
#mainQuickMenuCon ul li .main-quick-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%;}
#mainQuickMenuCon ul li .main-quick-thumb em{position:absolute; left:38px; bottom:35px; font-size:20px; color:#fff; font-weight:500; letter-spacing:-1px;}
#mainQuickMenuCon ul li .main-quick-info-con{position:relative; padding:48px 0 34px 60px;}
#mainQuickMenuCon ul li .main-quick-info-con:before{display:block; position:absolute; top:1px; left:40px; height:100%; content:""; width:1px; background-color:#404041}
#mainQuickMenuCon ul li .main-quick-info-con p{color:#404040; font-size:23px; font-weight:300; line-height:34px; letter-spacing:-0.55px;}
#mainQuickMenuCon ul li .main-quick-info-con p b{font-weight:500;}
.main-quick-more-btn{
	position:absolute; top:50%; right:50px; width:56px; height:56px; margin-top:-18px; background:#ececec url(https://www.haein.com/images/button/main_quick_more_btn.gif) no-repeat 50% 50%;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}

/* Hover */
#mainQuickMenuCon ul li:hover .main-quick-info-con:before,
#mainQuickMenuCon ul li:hover .main-quick-info-con p,
#mainQuickMenuCon ul li:hover .main-quick-more-btn{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
#mainQuickMenuCon ul li:hover .main-quick-info-con:before{background-color:#3da2ef;}
#mainQuickMenuCon ul li:hover .main-quick-info-con p{color:#3da2ef;}
#mainQuickMenuCon ul li:hover .main-quick-more-btn{background:#3da2ef url(https://www.haein.com/images/button/main_quick_more_btn_hover.png) no-repeat 50% 50%;;}

@media all and ( max-width: 1600px ){
	.main-quick-more-btn{right:40px;}
}

@media all and ( max-width: 1220px ){
	#mainQuickMenuCon{padding:48px 0 55px;}
	#mainQuickMenuCon ul{margin:0 -0.5%}
	#mainQuickMenuCon ul li{width:32.33%; margin:0 0.5%;}
	#mainQuickMenuCon ul li .main-quick-thumb em{left:20px; bottom:17px; font-size:17px;}
	#mainQuickMenuCon ul li .main-quick-info-con{padding:34px 68px 24px 40px;}
	#mainQuickMenuCon ul li .main-quick-info-con:before{left:20px;}
	#mainQuickMenuCon ul li .main-quick-info-con p{font-size:20px; line-height:30px; word-break:keep-all;}
	.main-quick-more-btn{width:48px; height:48px; margin-top:-16px; right:20px;}
}

@media all and ( max-width: 800px ){
	#mainQuickMenuCon{padding:27px 0 47px;}
	#mainQuickMenuCon ul{margin:0px auto;}
	#mainQuickMenuCon ul li{float:none; width:calc(100% - 30px); margin:0px auto; margin-bottom:30px;}
	#mainQuickMenuCon ul li:last-child{margin-bottom:0;}
	#mainQuickMenuCon ul li .main-quick-thumb em{font-size:14px;}
	#mainQuickMenuCon ul li .main-quick-info-con{padding:24px 59px 17px 30px;}
	#mainQuickMenuCon ul li .main-quick-info-con:before{left:15px;}
	#mainQuickMenuCon ul li .main-quick-info-con p{font-size:16px; line-height:26px;}
	.main-quick-more-btn{width:39px; height:39px; margin-top:-14px;}
}

@media all and ( max-width: 480px ){
	#mainQuickMenuCon ul li{width:auto;}
}

/* -------- 메인컨텐츠 :: 혜인 NEWS -------- */
.main-news-wrapper{position:relative; z-index:11; max-width:684px; margin:0px auto 128px;}
.main-news-top-con{position:relative; border-bottom:1px solid #dedede; padding-bottom:25px;}
.main-news-top-con .main-news-tit {text-align:center; }
.main-news-top-con .main-news-tit strong{display:block; color:#404041; font-size:38px; font-weight:300; letter-spacing:-0.75px; padding-top:35px; }
.main-news-top-con .main-news-tit strong b{font-weight:500}
.main-news-top-con button{position:absolute; top:100px; color:#404041;}
.main-news-top-con .main-news-prev-btn{left:0px;}
.main-news-top-con .main-news-next-btn{right:0px;}
.main-news-container{/*padding-top:55px;*/min-height:200px; padding-top:38px;}
.main-news-container .main-news-box-item{/*float:left; width:50%;*/padding:0 31px;}
.main-news-container .main-news-box-item a{display:block; /*padding:5px 0 10px 28px*/}
.main-news-container .main-news-box-item:nth-child(odd) a{/*border-right:1px solid #c9c9c9; padding-left:0; padding-right:28px*/}
.main-news-container .main-news-box-item a *{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.main-news-container .main-news-box-item .news-tit{float:left; position:relative; padding-left:5px; max-width:75%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#404041; /*font-size:22px;*/font-size:16px; line-height:40px; font-weight:500; }
.main-news-container .main-news-box-item .news-tit:before{position:absolute; top:50%; left:0; display:inline-block; content:""; width:3px; height:3px; background-color:#404041;}
.main-news-container .main-news-box-item .news-txt{/*padding:26px 0 32px;*/padding-top:26px; margin-bottom:32px; color:#686868; font-size:16px; letter-spacing:-0.4px; line-height:24px; max-height:48px; overflow:hidden;}
.main-news-container .main-news-box-item .news-date{float:right; display:block; color:#181818; font-size:16px; line-height:40px; color:#6e6e6e; /*font-size:15px; font-style:italic;  letter-spacing:3px; padding-bottom:35px;*/ }
.main-news-container .news-more-btn{display:block; position:relative; letter-spacing:3px; font-size:30px; max-width:136px; margin:38px auto 0;}
.main-news-container .news-more-btn a{display:block; position:relative; padding-right:30px;}
.main-news-container .news-more-btn span{display:inline-block; color:#929292;  vertical-align:middle; padding-bottom:10px; font-size:16px; font-weight:400; border-bottom:1px solid #929292}
.main-news-container .news-more-btn img{position:absolute; top:10px; right:0px;}
.main-news-container .main-news-box-item a:hover .news-tit{color:#00a1e4}
.main-news-container .main-news-box-item a:hover .news-tit:before{background-color:#00a1e4;}
.main-news-container .main-news-box-item a:hover .news-txt{text-decoration:underline;}
.main-news-container .main-news-box-item a:hover .news-more-btn img{transform:rotate(-90deg);}

@media all and ( max-width: 1600px ){
	/* -------- 메인컨텐츠 :: 혜인 NEWS -------- */
	.main-news-wrapper{/*width:42.75%;*/width:36%;}
}

@media all and ( max-width: 1220px ){
	.main-news-wrapper{width:auto; max-width:684px; margin-bottom:64px;}
	.main-news-container{min-height:auto;}
}

@media all and ( max-width: 800px ){
	.main-news-wrapper{max-width:none; margin-bottom:42px;}
	.main-news-top-con{padding-bottom:13px;}
	.main-news-top-con .main-news-tit strong{font-size:25px; padding-top:15px;}
	.main-news-top-con button{top:72px;}
	.main-news-container{padding-top:30px;}
	.main-news-container .main-news-box-item{padding:0 15px;}
	/*.main-news-container .main-news-box-item a{padding-left:13px;}
	.main-news-container .main-news-box-item:nth-child(odd) a{padding-left:0; padding-right:13px;}*/
	.main-news-container .main-news-box-item .news-tit{font-size:13px; line-height:30px;}
	.main-news-container .main-news-box-item .news-txt{/*padding:10px 0 15px;*/padding-top:10px; margin-bottom:15px; font-size:12px; line-height:20px; max-height:40px;}
	.main-news-container .main-news-box-item .news-date{font-size:11px; line-height:30px;}
	.main-news-container .news-more-btn{font-size:20px; max-width:106px; margin-top:25px}
	.main-news-container .news-more-btn a{padding-right:20px;}
	.main-news-container .news-more-btn span{font-size:11px; padding-bottom:6px;}
	.main-news-container .news-more-btn img{top:7px; max-width:9px;}
}

/* -------- 메인컨텐츠 :: 중간 증시현황/홍보영상 -------- */
.main-cs-wrapper{position:absolute; top:20px; left:0px; width:100%;}
.main-cs-container{display:block;}
.main-cs-wrapper .main-invest-con,
.main-cs-wrapper .main-video-con{
	display:inline-block; width:415px; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.main-cs-wrapper .cs-circle-inner{position:relative; height:0; width:100%; padding-top:100%; }

/* 증시현황 */
.main-cs-wrapper .main-invest-con{float:left; margin-right:1%;}
.main-cs-wrapper .main-invest-con .cs-circle-inner{background:url(https://www.haein.com/kr/images/main/main_invest_bg.jpg) no-repeat; background-size:cover;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner{position:absolute;  text-align:center; top:0px; left:0px; right:0px; bottom:0px; color:#fff; letter-spacing:-0.55px; }
.main-cs-wrapper .main-invest-con .main-invest-con-inner h3{font-weight:300; font-size:36px}
.main-cs-wrapper .main-invest-con .main-invest-con-inner h3.en{font-size:28px; line-height:36px;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner h3 b{font-weight:500;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner h3:after{display:block; content:""; width:1px; height:12px; background-color:#fff; margin:12px auto 20px;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info{font-size:24px; margin-bottom:20px;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info b{font-size:48px; font-weight:600;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner dl,
.main-cs-wrapper .main-invest-con .main-invest-con-inner dt,
.main-cs-wrapper .main-invest-con .main-invest-con-inner dd{display:inline-block;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner dl{padding:16px 20px; background-color:#005172; font-size:18px; -webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner dd .arrow{margin-left:10px}
.main-cs-wrapper .main-invest-con .main-invest-con-inner dd.up{color:#c70e0e;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner dd.down{color:#00a1e4;}
.main-cs-wrapper .main-invest-con .main-invest-con-inner dd.normal{color:#fff;}
/* 홍보영상 */
.main-cs-wrapper .main-video-con{float:right; margin-left:1%}
.main-cs-wrapper .main-video-con .cs-circle-inner{background:url(https://www.haein.com/kr/images/main/main_video_bg.jpg) no-repeat; background-size:cover}
.main-cs-wrapper .main-video-con .cs-circle-inner h3{position:absolute; top:80px; left:0; right:0; font-weight:300; font-size:36px; text-align:center; color:#fff;}
.main-cs-wrapper .main-video-con .cs-circle-inner h3 b{font-weight:500;}
.main-cs-wrapper .main-video-con .cs-circle-inner h3:after{display:block; content:""; width:1px; height:12px; background-color:#fff; margin:12px auto 20px;}
.main-cs-wrapper .main-video-con .video-play-btn{position:absolute; top:50%; left:50%; color:#fff; width:70px; height:70px; margin:-15px 0 0 -35px}
.main-cs-wrapper .main-video-con .video-play-btn:after{display:none; position:absolute; content:""; bottom:-50px; left:50%; width:1px; height:12px; background-color:#fff;}

@media all and ( max-width: 1600px ){
	.main-cs-container{padding:0 15px;}
	.main-cs-wrapper .main-invest-con,
	.main-cs-wrapper .main-video-con{width:370px;}
}
@media all and ( max-width: 1220px ){
	.main-cs-wrapper{position:static; text-align:center; margin-bottom:64px;}
	.main-cs-container{padding:0;}
	.main-cs-wrapper .main-invest-con,
	.main-cs-wrapper .main-video-con{float:none;}
}
@media all and ( max-width: 800px ){
	.main-cs-wrapper{margin-bottom:32px;}
	.main-cs-wrapper .main-invest-con,
	.main-cs-wrapper .main-video-con{width:47%;}
	.main-cs-wrapper .main-invest-con .main-invest-con-inner h3, .main-cs-wrapper .main-video-con .cs-circle-inner h3{font-size:24px;}
	.main-cs-wrapper .main-invest-con .main-invest-con-inner h3.en{font-size:20px; line-height:24px;}
	.main-cs-wrapper .main-video-con .cs-circle-inner h3{top:30%;}
	.main-cs-wrapper .main-invest-con .main-invest-con-inner h3:after, .main-cs-wrapper .main-video-con .cs-circle-inner h3:after{margin:9px auto 15px;}
	.main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info{font-size:16px; margin-bottom:10px;}
	.main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info b{font-size:32px;}
	.main-cs-wrapper .main-invest-con .main-invest-con-inner dl{padding:10px 16px; font-size:12px;}
	.main-cs-wrapper .main-video-con .video-play-btn{top:55%; width:48px; height:48px; margin-left:-24px;}
	.main-cs-wrapper .main-video-con .video-play-btn img{max-width:100%;}
	.main-cs-wrapper .main-video-con .video-play-btn:after{bottom:-40px;}
}
@media all and ( max-width: 640px ){
	.main-cs-wrapper .main-invest-con,
	.main-cs-wrapper .main-video-con{width:100%; margin:0 0 15px 0; max-width:415px;}
}


/* -------- 메인컨텐츠 :: 하단 연혁 -------- */
#mainHistoryCon{overflow:hidden; position:relative; width:100%; /*height:499px;*/height:338px; background:url(/images/main/main_history_bg.jpg) repeat-x 50% 0}
.main-history-tit{text-align:center; color:#fff;}
.main-history-tit:before{display:block; content:""; width:1px; height:40px; background-color:#fff; margin:0px auto 24px;}
.main-history-tit span,
.main-history-tit strong{/*display:block;*/display:inline-block;}
.main-history-tit .hstory-year-txt{/*padding:18px 0 21px; font-size:60px;*/font-size:26px; font-weight:100; letter-spacing:0.1px;}
.main-history-tit .history-sub-txt{font-family: 'Noto Sans', sans-serif; font-size:14px;color:#222; -webkit-font-smoothing: antialiased; padding-top:190px;color:#ec2227; } /*letter-spacing:-0.25px;*/
.main-history-list-con{position:absolute; bottom:0px; left:0px; width:100%;}
.main-history-list-con.m{display:none;}
.main-history-list-con:after{display:block; content:""; position:absolute; bottom:0px; left:0px;width:100%; height:1px; background-color:#333; background-color:rgba(0,0,0,0.4); border-top:1px solid #fff; border-top-color:rgba(232,232,232,0.34)}
.main-history-list-con ul{position:relative; z-index:11;}
.main-history-list-con ul li{float:left; height:383px; position:relative; bottom:0px; width:16.65%; }
.main-history-list-con ul li .history-inner{position:relative; max-width:274px; height:100%; margin:0px auto; }
.main-history-list-con ul li .history-years{position:absolute; top:251px; right:50%; margin-right:-39px; padding-top:40px; text-align:left; -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.6s;transition:all 0.8s; cursor:pointer; z-index:2;}
.main-history-list-con ul li .history-years strong{color:#fff; color:rgba(255,255,255,0.6); font-size:28px; letter-spacing:-0.25px; font-weight:300;}
.main-history-list-con ul li .history-inner-con{position:absolute; bottom:-50%; width:calc(100% - 30px); height:calc(100% - 30px); padding:15px; background-color:#3da2ef; opacity:0;filter:Alpha(opacity=0); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s}
.main-history-list-con ul li .history-inner-con .history-thumb{display:block; width:100%;}
.main-history-list-con ul li .history-inner-con .history-thumb img{width:100%;}
.main-history-list-con ul li .history-inner-con dl{height:195px}
.main-history-list-con ul li .history-inner-con dl dd{/*padding-top:35px;*/padding-top:25px;}
.main-history-list-con ul li .history-inner-con dl dd p{position:relative; color:#fff; /*font-size:16.5px; padding-bottom:15px;*/font-size:15px; padding-bottom:10px; letter-spacing:-0.25px; font-weight:400;  padding-left:20px; text-shadow:1px 1px 5px rgba(0, 0, 0, .5); word-break:keep-all; line-height:20px;}
.main-history-list-con ul li .history-inner-con dl dd p:before{display:block; content:""; width:5px; height:5px; background-color:#fff; border-radius:5px; position:absolute; top:8px; left:6px;}

/* -------- 메인컨텐츠 :: 하단 연혁 :: 영문 -------- */
#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd p{font-size:14px; line-height:18px; padding-bottom:5px;}

@keyframes history-circle {
  0% {
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1.2);
			transform: scale(1.2);
	opacity: 0; } 
}
.history-circle{position:absolute; left:50%; top:0; display:inline-block; width:22px; height:22px; margin-left:-11px; }
.history-circle > span {
	border:1px solid rgba(255, 255, 255, 0.5) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: history-circle 1.5s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: history-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
.history-circle i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:8px; height:8px; background-color:#fff; 
	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
}

/* 활성화 시 */
.main-history-list-con ul li.active .history-inner,
.main-history-list-con ul li.slick-current .history-inner{}
.main-history-list-con ul li.active .history-years,
.main-history-list-con ul li.slick-current .history-years{/*top:-45px;*/top:0; margin-top:-45px; right:0px; margin-right:0; padding-top:0;}
.main-history-list-con ul li.active .history-years .history-circle,
.main-history-list-con ul li.slick-current .history-years .history-circle{display:none;}
.main-history-list-con ul li.active .history-years strong,
.main-history-list-con ul li.slick-current .history-years strong{color:#3da2ef; font-size:40px; font-weight:600;  font-family:'나눔고딕','Nanum Gothic','맑은 고딕','Malgun Gothic',AppleGothic,Arial, sans-serif;}
.main-history-list-con ul li.active .history-inner-con,
.main-history-list-con ul li.slick-current .history-inner-con{bottom:0px;opacity:1.0;filter:Alpha(opacity=100);}

@media all and ( max-width: 1220px ){
	.main-history-list-con.pc{display:none;}
	.main-history-list-con.m{display:block;}
	.main-history-list-con ul .slick-list{overflow:visible;}
	.main-history-list-con ul .slick-prev, .main-history-list-con ul .slick-next{position:absolute; bottom:110px; width:20px; height:20px; font-size:0; text-indent:-9999px; z-index:9;}
	.main-history-list-con ul .slick-prev{left:15px; background:url(https://www.haein.com/images/button/main_history_prev_btn.png) no-repeat;}
	.main-history-list-con ul .slick-next{right:15px; background:url(https://www.haein.com/images/button/main_history_next_btn.png) no-repeat;}
	.main-history-list-con ul li .history-years{}
	.main-history-list-con ul li .history-inner-con{padding:15px 10px; width:calc(100% - 20px); height:auto;}
	.main-history-list-con ul li .history-inner-con dl dd{padding-top:18px}
	.main-history-list-con ul li .history-inner-con dl dd p{font-size:13px; padding-bottom:12px;}

	
	.main-history-list-con ul li.active .history-years,
	.main-history-list-con ul li.slick-current .history-years{margin-top:-30px;}

	/* -------- 메인컨텐츠 :: 하단 연혁 :: 영문 -------- */
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con{padding:10px;}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con .history-thumb img{}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd{padding-top:10px;}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd p{font-size:13px; line-height:16px; padding-left:10px; word-break:break-all;}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd p:before{width:3px; height:3px; left:0;}

}

@media all and ( max-width: 800px ){
	#mainHistoryCon{height:350px; background-size:cover;}
	.main-history-tit:before{height:20px; margin-bottom:12px;}
	.main-history-tit .history-since-txt img{max-width:54px;}
	.main-history-tit .hstory-year-txt{font-size:30px; padding:10px 0 11px; letter-spacing:1px;}
	.main-history-tit .history-sub-txt{font-size:13px;}
	
	.main-history-list-con ul .slick-prev{left:5px;}
	.main-history-list-con ul .slick-next{right:5px;}
	.main-history-list-con ul li{/*height:196px;*/height:216px;}
	.main-history-list-con ul li .history-years{top:65px; margin-right:-19px;}
	.main-history-list-con ul li .history-years strong{font-size:14px;}
	.main-history-list-con ul li .history-inner-con{height:calc(100% - 50px); padding:10px;}
	.main-history-list-con ul li .history-inner-con .history-thumb{display:none;}
	.main-history-list-con ul li .history-inner-con dl{height:auto;}
	.main-history-list-con ul li .history-inner-con dl dd{padding-top:0px;}
	.main-history-list-con ul li .history-inner-con dl dd p{font-size:11px; line-height:16px; /*padding-bottom:9px; padding-left:10px;*/padding-bottom:5px; padding-left:5px; word-break:break-all; letter-spacing:-0.65px;}
	.main-history-list-con ul li .history-inner-con dl dd p:before{width:3px; height:3px; border-radius:3px; left:0;}
	
	.main-history-list-con ul li.active .history-years, 
	.main-history-list-con ul li.slick-current .history-years{margin-top:-10px;}
	.main-history-list-con ul li.active .history-years strong,
	.main-history-list-con ul li.slick-current .history-years strong{font-size:20px;}

	/* -------- 메인컨텐츠 :: 하단 연혁 :: 영문 -------- */
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con{width:calc(100% - 14px); height:calc(100% - 40px); padding:10px 7px;}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd{padding-top:0px;}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd p{font-size:11px; line-height:13px; padding-left:5px; word-break:break-all;}
	#mainHistoryCon.en .main-history-list-con ul li .history-inner-con dl dd p:before{top:6px; width:3px; height:3px; left:0;}
}