@charset "utf-8";

#mainContainer{margin-bottom:0;}
/* ******************  메인 비주얼 ********************** */
.ms-preloader {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  background-color: #151515;
}
#mainVisual{position:relative;width:100%;height:100vh;}	/* 비주얼높이값 이미지에 맞게 수정 */

.mainVisualWrap .slick-track,
.mainVisualWrap .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.mainVisualWrap, 
.mainVisualWrap .slick-list,  
.mainVisualWrap .slick-track, 
.mainVisualItem{
	height:100%;
}
.mainVisualWrap{z-index:1;}

/* 메인 비주얼 :: 이미지 */
.mainVisualItem{position:relative;}
.mainVisualItem .mainVisualImg-pc,
.mainVisualItem .mainVisualImg-m{
	width:100%;
	height:100%;
	background-size:cover !important;
	-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 ;	
	-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);
}
.mainVisualItem .mainVisualImg-pc{display:none;}

/* 메인 비주얼 :: 텍스트 */
.mainVisualItem .mainVisualTxt{
	position:absolute; top:50%; left:0px; width:100%;
	-ms-transform: translateY(-50%); 
  -o-transform: translateY(-50%); 
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%); 
  transform: translateY(-50%);
}
.mainVisualItem .mainVisualTxt .mainVisualTxt-inner{width:100%;padding:0 30px;text-align:center;}
.mainVisualItem .mainVisualTxt .mainVisualTxt-logo,
.mainVisualItem .mainVisualTxt .mainVisualTxt-tit,
.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit,
.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:opacity 1.0s 0s, transform 1.0s 0s;
	-moz-transition:opacity 1.0s 0s, transform 1.0s 0s;
	-o-transition:opacity 1.0s 0s, transform 1.0s 0s;
	-ms-transition:opacity 1.0s, transform 1.0s 0s;
	transition:opacity 1.0s 0s, transform 1.0s 0s;
}
.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{display:block; font-size:2.2rem; font-weight:400; line-height:1.2;letter-spacing:-1px; color:#fff; margin-top:30px; margin-bottom:30px; }
.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit{font-size:1.3rem; font-weight:400; line-height:1.3; color:#fff; margin-bottom:50px;}
.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:15px; font-weight:400; line-height:1.5; color:#fff;}

.mainVisualItem .mainVisualTxt .mainVisualTxt-logo-pc{display:none;}

/* 메인 비주얼 :: active효과 */
.mainVisualItem.active-item .mainVisualImg-pc{
	-ms-transform: scale(1.0,1.0);
  -o-transform: scale(1.0,1.0);
  -moz-transform: scale(1.0,1.0);
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
}
.mainVisualItem.active-item .mainVisualImg-m{
	-ms-transform: scale(1.0,1.0);
  -o-transform: scale(1.0,1.0);
  -moz-transform: scale(1.0,1.0);
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
}
.mainVisualItem.active-item .mainVisualTxt-logo,
.mainVisualItem.active-item .mainVisualTxt-tit,
.mainVisualItem.active-item .mainVisualTxt-subtit,
.mainVisualItem.active-item .mainVisualTxt-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);
}

/* 메인비주얼 :: paging 영역 */
.mainVisualWrap .slick-dots{position:absolute; right:30px; left:30px; text-align:center; bottom:30px; max-width:900px; margin:0 auto; z-index:11;}
.mainVisualWrap .slick-dots li{float:left; width:32%; margin:0 0.5%; cursor:pointer;}
.mainVisualWrap .slick-dots li a{display:block; width:100%;}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit{color:#fff; font-size:12px; line-height:1.3; letter-spacing:-0.25px; text-align:left; padding-top:10px;display:none;}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit strong{font-size:15px; font-weight:400; margin-right:9px}
.mainVisualWrap .slick-dots li .loading-bar-paging-tit span{letter-spacing:0.25px; opacity:1;filter:Alpha(opacity=1);}
.mainVisualWrap .slick-dots li .loading-bar-line{display:block; position:relative; height:2px; width:100%; background-color:rgba(255,255,255,1.0);}
.mainVisualWrap .slick-dots li .loading-bar-line:after{position:absolute; top:0px; left:0px; height:2px; background-color:var(--primary); width:0; content:""; z-index:1}
.mainVisualWrap .slick-dots li.active-item .loading-bar-line:after{width:100%; -webkit-transition:all 4s;-moz-transition:all 4s;-o-transition:all 4s;-ms-transition:all 4s;transition:all 4s; }


/* 메인 비주얼 :: 애니메이션 */
.mainVisualTxt .move-up {
  display: block;
  padding-bottom: 0.1em;
  overflow-y: hidden;
}
.mainVisualTxt .move-up p {
  position: relative;
  display: inline-block;
}
.active-item .mainVisualTxt .move-up p {
  animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay:0.3s;
}
.active-item .mainVisualTxt .move-up.mainVisualTxt-tit p {
  animation-delay: 0.6s;
}
.active-item .mainVisualTxt .move-up.mainVisualTxt-subtit p {
  animation-delay: 0.9s;
}
.active-item .mainVisualTxt .move-up.mainVisualTxt-btn span {
  animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 1.2s;
}
@keyframes text-up {
  from {
    transform: translate3d(0, 150%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ******************  메인 비주얼 반응형********************** */
@media (min-width: 576px) {
	.mainVisualItem .mainVisualTxt .mainVisualTxt-btn{font-size:16px;}
}
@media (min-width: 768px) {
  .mainVisualItem .mainVisualTxt .mainVisualTxt-inner{padding:0 50px !important;}
	.mainVisualWrap .slick-dots{right:50px; left:50px; bottom:50px;}
	.mainVisualWrap .slick-dots li .loading-bar-paging-tit{display:block;}
}
@media (min-width: 992px) {
  /*#mainVisual{height:648px;margin-top:80px;}*/
	.mainVisualItem .mainVisualImg-pc{display:block;}
	.mainVisualItem .mainVisualImg-m{display:none;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-logo-pc{display:block;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-logo-m{display:none;}
}
@media (min-width: 1025px) {
  /*#mainVisual{height:calc(100vh - 100px);margin-top:100px;}*/
  .mainVisualItem .mainVisualTxt .mainVisualTxt-inner{padding:0 100px !important;}
	.mainVisualWrap .slick-dots{right:100px; left:100px; bottom:50px;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-tit{font-size:3.8rem;}
	.mainVisualItem .mainVisualTxt .mainVisualTxt-subtit{font-size:1.8rem;}
}
@media (min-width: 1310px){
  .mainVisualItem .mainVisualTxt .mainVisualTxt-inner{padding:0 0px !important;}
}


/* ******************  메인컨텐츠 레이아웃 & 텍스트 ********************* */
.mainSectionTit{font-size:1.8rem;font-weight:700;line-height:1.0;margin-bottom:20px;text-align:center;}
.mainSectionTitsub{font-size:1.1rem;line-height:1.3;margin-bottom:0px;text-align:center;}
.maincontentsTit{font-size:1.8rem;font-weight:700;}
/*  min MD  */
@media (min-width: 768px) {
	.mainSectionTit{font-size:3rem;}
	.maincontentsTit{font-size:2.0rem;}
}
/*  min LG  */
@media (min-width:992px) {
	.mainSectionTit{font-size:3.3rem;}
}
@media (min-width: 1200px) {
	.no-pl{padding-left:0 !important;}
	.maincontentsTit{font-size:2.4rem;}
}



/* ****************** Business 섹션 ********************* */
.businessContainer {
  display: grid;
  grid-gap:20px; 
  grid-template-columns: 1fr;
	padding:0;
}
.businessItem {
  position: relative;
	display: block;
  padding: 30px; 
  border: 1px solid #fff;
  border-radius:25px;
  text-decoration: none;
  color: #000;
  /*box-shadow: 0 2px 8px rgba(0,0,0,0.06); */
  position: relative; 
  overflow: hidden;     
  transition: all 0.3s ease-in-out; 
}
.businessItem:hover {
  border-color: #e0e0e0;
  transform: translateY(0px);
}
/*.businessItem:hover h5, .businessItem:hover p{color:var(--primary);}
.businessItem::before {
  content: ""; position: absolute; inset: 0;
  background: inherit; 
  filter: blur(0); transition: filter 180ms ease, transform 180ms ease;
}
.businessItem:hover::before {filter: blur(4px);}
*/
.btnLocation{ width:200px; margin-top:20px;}
.btnLocation > button {
  padding: 8px 10px;	
	width:130px;
	font-size:1.1rem;
	color: #fff;
  font-weight:500;
  background-color: var(--primary); 
  transition: all 0.3s ease-in-out; 
}
.btnLocation:hover > button {
	width:150px;
  /*transform: translateX(10px); */
}
.bg01{background:#f6f6f6 url(/imgs/main/business01-m.jpg) no-repeat 50% 50%;background-size:cover;}
.bg02{background:#f6f6f6 url(/imgs/main/business02-m.jpg) no-repeat 50% 50%;background-size:cover;}
.bg03{background:#f6f6f6 url(/imgs/main/business03-m.jpg) no-repeat 50% 50%;background-size:cover;}
.bg04{background:#f6f6f6 url(/imgs/main/business04-m.jpg) no-repeat 50% 50%;background-size:cover;}
.bg05{background:#f6f6f6 url(/imgs/main/business05-m.jpg) no-repeat 50% 50%;background-size:cover;}
.txtR{text-align:left;}
.floatL{float:left;}
.floatR{float:left;}
.businessTit{font-size:1.3rem;font-weight:700;line-height:1.3;margin-bottom:10px;}
.titSub{font-size:1rem;font-weight:500;}
.txtDes{display:none;}

@media (min-width: 576px) {
	.businessTit{font-size:1.6rem;margin-bottom:15px;}
	.titSub{font-size:1.2rem;margin-bottom:5px;}
	.txtDes{font-weight:300;}
	.btnLocation > button {padding:10px 15px; width:160px;}
	.btnLocation:hover > button {width:200px;}
}
@media (min-width: 768px) {
  /*.contentsContainer {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}	*/
	.businessContainer {grid-gap:30px;}
	.businessItem{padding:40px 40px;}
	.businessTit{font-size:1.9rem;margin-bottom:15px;}
	.titSub{font-size:1.3rem;font-weight:600;}
	.txtDes{
		overflow: hidden;
		display: -webkit-box; 
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 3; 
		line-height: 1.5;
		max-height: calc(1.5em * 3); 
		font-weight:400;
	}
.btnLocation{margin-top:30px;}
}
@media (min-width: 992px) {
	.bg01{background:#f6f6f6 url(/imgs/main/business01.jpg) no-repeat 50% 50%;background-size:cover;}
	.bg02{background:#f6f6f6 url(/imgs/main/business02.jpg) no-repeat 50% 50%;background-size:cover;}
	.bg03{background:#f6f6f6 url(/imgs/main/business03.jpg) no-repeat 50% 50%;background-size:cover;}
	.bg04{background:#f6f6f6 url(/imgs/main/business04.jpg) no-repeat 50% 50%;background-size:cover;}
	.bg05{background:#f6f6f6 url(/imgs/main/business05.jpg) no-repeat 50% 50%;;background-size:cover;}	
	.btnLocation > button {padding:12px 15px; width:180px;}
	.btnLocation:hover > button {width:220px;}
	.txtR{text-align:right;}
	.floatR{float:right;}	
	.businessTit{font-size:2.2rem;margin-bottom:25px;}
	.titSub{font-size:1.4rem;}
}
@media (min-width: 1025px) {
	.businessItem{padding:40px 60px;}
}


/* ****************** Newsroom 섹션 ********************* */
#mainNews{position:relative;width:100%;background:#f6f6f6 url(/imgs/main/bg-newsroom.jpg) no-repeat 50% 50%;background-size:cover;}


/* ******************  Investors 섹션 ********************* */
.investorsContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap:15px; 
  padding:0px;
}
.investorsContainer > div {
  padding: 20px 30px;
  border-radius:20px;
}
.investorsBox1 {
	grid-row:1; 
}
.investorsBox2 {color:#fff; background-color:var(--primary);}
.investorsBox3 {color:#fff; background:#f6f6f6 url(/imgs/main/investors.jpg) no-repeat 50% 50%; background-size:cover; transition: all 0.3s ease-in-out;}
.investorsBox3 button.link{font-size:2.0rem;font-weight:700;color:#fff;transition: all 0.3s ease-in-out;}
.investorsBox3 button.link:hover{color:var(--primary); transform: translateX(10px);}
.titLeftBox{display:none;}
.titPipeline{font-size:1.3rem;font-weight:600;}
.titRightBox{font-size:1.4rem;font-weight:600;}
.txtStock{font-size:2.0rem;font-weight:700;}
/* 주가 정보 연동 박스 */
.flexBox{position:relative; widht:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items: center; margin-top:15px;}
.flexBox > div{flex:100%;}

@media (min-width: 576px) {
  .flexBox > div{flex:50%;}
}
@media (min-width: 768px) { 
	.investorsContainer {grid-template-columns: 1fr 1fr; grid-gap:20px;}
	.investorsBox1 {grid-row: 1 / span 2;}
	.investorsContainer > div {padding: 25px 40px;}
	.titLeftBox{display:block; font-size:1.2rem;}
	.titPipeline{font-size:2.0rem;font-weight:700;}
	.titRightBox{font-size:1.9rem;}
	.txtStock{font-size:2.5rem;}
	.investorsBox3 button.link{font-size:2.5rem;}
}
@media (min-width: 992px) {
	.investorsContainer > div {padding: 30px 50px;}
	.titPipeline{font-size:2.4rem;}
}
@media (min-width: 1025px) {
	.investorsContainer {grid-gap:30px; row-gap:20px;}
}