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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,
#fullpage #mainVisual{height:1000px;}
.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-con{z-index:1; position:relative;}
/* .main-visual-con:before {content:""; width:100%; height:1px; background-color:red; position:absolute; top:50%; left:0; z-index:9;}
 *//* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
     transform: scale(1.05,1.05);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms 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; bottom:50%; padding-bottom:76px; 
	width:100%; 
	/* -webkit-transform: translateY(-50%);
	transform: translateY(-50%); */
}
.main-visual-item .main-visual-txt-con .main-visual-txt1 span,
.main-visual-item .main-visual-txt-con .main-visual-txt2 span{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1 {display:block; font-size:78px; letter-spacing:-0.35px; color:#fff; line-height:1.2; overflow:hidden; margin-top:15px;}
.main-visual-item .main-visual-txt-con .main-visual-txt1.kor{font-size:66px; letter-spacing:-0.75px;}
.main-visual-item .main-visual-txt-con .main-visual-txt1 span {display:block;}
.main-visual-item .main-visual-txt-con .main-visual-txt1 em {position:relative; display:inline-block; margin:0 4px;padding-top: 23px; width:12px; height:38px; font-weight:600;  }
.main-visual-item .main-visual-txt-con .main-visual-txt1 em:before {content:""; position:absolute; top:0; left:50%; margin-left:-10px; width:20px; height:20px; background:url("/images/main/main_visual_txt_icon.png") no-repeat; z-index:1;}
.main-visual-item .main-visual-txt-con .main-visual-txt1 em:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:38px; background-color: #fff;}
.main-visual-item .main-visual-txt-con .main-visual-txt2 {font-size:20px; line-height:1.3; letter-spacing:-1px; color:rgba(255,255,255,0.85); overflow:hidden; font-weight:500;}
.main-visual-item .main-visual-txt-con .main-visual-txt2 span {display:block;}
.main-visual-item.blue-item .main-visual-txt-con .main-visual-txt1 em:before {background-image:url("/images/main/main_visual_txt_icon_blue.png");}
.main-visual-item.blue-item .main-visual-txt-con .main-visual-txt1 em:after{background-color: #4e97fb; }
.main-visual-item.item01 .main-visual-txt-con .main-visual-txt1 {margin-bottom:15px;}


/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual-item.active-item .main-visual-txt1 span,
.main-visual-item.active-item .main-visual-txt2 span{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1 span{ -webkit-animation-delay:0.8s; animation-delay:0.8s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2 span{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}

.main-visual-item.active-item.item01 .main-visual-txt-con .main-visual-txt1 span{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.active-item.item01 .main-visual-txt-con .main-visual-txt2 span{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}


@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:50%; margin-bottom:-10px; width:100%; text-align:left; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:15px; }
.main-visual-con .slick-dots li:first-child{margin-left:5px}
.main-visual-con .slick-dots li button {
	cursor:pointer; position:relative; margin:0; padding:0; vertical-align:top; width:28px; height:28px;   font-size:0; 
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%; 
}
.main-visual-con .slick-dots li button:before {content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; background-color:#fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%; }
.main-visual-con .slick-dots li.slick-active button{border:1px solid rgba(255,255,255,0.25); }

/* 메인 비주얼 :: 필옵틱스 그룹 */
.main-group {position:absolute; width:100%; bottom:15%; z-index:9; }
.main-group .inner-box {position:relative; padding-left:250px; }
.main-group .tit {position:absolute; left:0; font-size:26px; line-height:66px; color:#fff;  display:block; margin-bottom:30px;}
.main-group .main-group-list {margin:0 -9px;}
.main-group .main-group-list li {float:left; width:17.83%; margin:0 9px;}
.main-group .main-group-list li a {position:relative; display:block; width:100%; height:66px; border:3px solid #fff; font-size:18px; color:#fff; padding:0 38px 0 20px; transition: all 0.4s; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;  }
.main-group .main-group-list li a span {display:table; height:100%;}
.main-group .main-group-list li a span em {display:table-cell; vertical-align:middle;  font-weight:600;}
.main-group .main-group-list li a i {position:absolute; right:20px; top:0; font-size:18px; line-height:60px; opacity:0.5;filter:Alpha(opacity=50);}
.main-group .main-group-list li a:hover {background-color: #fff; color: #0e3a9d; }
.main-group .main-group-list li a:hover i {opacity:0.7;filter:Alpha(opacity=70);}

/* 메인 비주얼 :: 필옵틱스 그룹 :: 모달 */
.philop-group-modal {position:relative; width:96%; max-width:880px; margin: 20px auto; background-color: #fff;}
.philop-group-modal .inner-box { padding:25px 35px; background-color:#fff;  border:12px solid #e4eefb;}
.philop-group-modal .inner {position:relative; padding:55px 40px; max-height:400px; overflow-y:auto; overflow-x:hidden; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.philop-group-modal .modal-close-btn i , 
.philop-group-modal .modal-close-btn:hover i {color: #000;}
.philop-group-list .item-tit {position:relative; margin-bottom: 20px; padding-bottom:20px; border-bottom:1px solid #ddd; }
.philop-group-list .item-tit:before {content:""; width:27px; height:1px; background-color: #133775; position:absolute; left:0; bottom:-1px; }
.philop-group-list .item-tit .group-logo {display:inline-block; vertical-align:middle; width:100%; font-size:22px; letter-spacing:0.5px; color: #222; font-weight:600;}
.philop-group-list .item-tit .group-logo img {margin-right: 3px;}
.philop-group-list .item-tit .group-logo.short {width:185px;}
.philop-group-list .item-tit .link {display: inline-block; vertical-align: middle; font-size: 14px; letter-spacing: -0.25px; color: #5c5c5c; border-bottom: 1px solid #5c5c5c; }
.philop-group-list .txt-box {position:relative; padding-left:185px; }
.philop-group-list .txt-box .tit {position:absolute; left:0; display:block; padding-left: 20px; font-size:16.5px; line-height:2.25em; letter-spacing:-0.75px; color: #1b1b1b; }
.philop-group-list .txt-box .tit:before {content:"\e914"; font-size:16px; color:#133775; position:absolute; left:0;  font-weight:600;}
.philop-group-list .txt-box .txt {display: inline-block; font-size: 16px; line-height: 2.25em; color: #5c5c5c; letter-spacing: -0.75px;}
.philop-group-list .txt-box .link { font-size: 12px; line-height: 1; letter-spacing: -0.25px; color: #002060; border-bottom: 1px solid #002060; display: inline-block; vertical-align: middle; margin-left: 10px;}
.philop-group-list .txt-box .homepage:hover{color:#002060;text-decoration:underline;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:30px; left:50%; transform:translateX(-50%) rotate(.001deg); text-align:center; z-index:9;  animation: upDown 1.5s ease-in-out infinite; }	
.main-scroll-icon img{float:left;}
.main-scroll-icon .scroll-txt{display:block; float:left; color:#fff; padding-top:5px; line-height:1.5em; font-weight:300; letter-spacing:0.5px; opacity:0.5;filter:Alpha(opacity=50); margin-left:10px; }
html[lang="ko"] .main-scroll-icon .scroll-txt{padding-top:0; margin-top:-3px;}
/* .main-scroll-icon .scroll-txt p {margin-top:5px;}
.main-scroll-icon .scroll-txt p:first-child{margin-top:0;} */
@keyframes upDown {
	0% {
		bottom:25px; 
	}
	50% {
		bottom:35px;
	}
	100% {
		bottom:25px;
	}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:5%; letter-spacing:-0.75px; text-align:center;}
.main-tit-box .main-tit{color:#000; font-size:50px; overflow:hidden;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:#aaa; font-size:15px; letter-spacing:-0.75px; font-weight:300; line-height:1.5; }
.main-tit-box .main-tit span {
	opacity:0; display:block;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
} 
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.aos-animate .main-tit-box .main-tit.splitting .char,
.active-section .main-tit-box .main-tit span {
	opacity:1.0;
	transform:translateY(0);
}


/* -------- 메인 컨텐츠 :: Business -------- */
.main-business-list { margin:0 -0.11%;}
.main-business-list li {float:left; width:24.76%; margin:0 0.11%;}
.main-business-list li a {position:relative; display:block; padding-top:100%; overflow:hidden;}
.main-business-list li a .over-bg {display:block; background:no-repeat; background-size: cover; }
.main-business-list li.item01 a .over-bg {display:block; background-image:url("/images/main/main_business_img_01.jpg");}
.main-business-list li.item02 a .over-bg {display:block; background-image:url("/images/main/main_business_img_02.jpg");}
.main-business-list li.item03 a .over-bg {display:block; background-image:url("/images/main/main_business_img_03.jpg");}
.main-business-list li.item04 a .over-bg {display:block; background-image:url("/images/main/main_business_img_04.jpg");}
.main-business-list li a .inner-box {position:absolute; top:10.4%; left:8.4%; color:#000;}
.main-business-list li a .tit {font-size:22.5px; letter-spacing:-0.5px; font-weight:500;} 
.main-business-list li a .txt {display:block; font-size:17px; letter-spacing:0.25px; font-weight:600; opacity:0.5;filter:Alpha(opacity=50);  margin-top:15px;}
.main-business-list li.white a .inner-box {color:#fff;}


/* -------- 메인 컨텐츠 :: About -------- */
#mainAboutCon .area1680 {margin-top:60px;}
/* About :: 숫자리스트 */
.main-about-list { text-align:center;}
.main-about-list li {float:left; width:28.09%; background-color: #fff; color:#111; padding:4.16% 0 7.44%; border-left: 1px solid #edeef0; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-about-list .small {width:21.9%;}
.main-about-list li:first-child {border-left:0;}
.main-about-list li .icon i {font-size: 27px;  }
.main-about-list li .icon dd {font-size: 16.5px;  font-weight:500; padding-top:10px;}
.main-about-list li .num {display:inline-block; margin-top:50px; font-size: 54px; margin-top:44px;}
.main-about-list li .txt {display:inline-block; margin-left: 5px; font-size:16px; font-weight:400; color:#222;}
.main-about-list .item04 .inner-box {display:inline-block; }
/* 투자정보 */
.main-about-list .item04 .inner-box {position:relative; padding-right:170px;  }
.main-about-list .item04 .inner-box .stock-box {position:absolute; right:0; bottom:5px; }
.main-about-list .item04 .inner-box .stock-box .stock-item {position:relative; padding-left: 80px; margin-top:10px; font-size: 15px; color:#111; font-weight:500; text-align:left;}
.main-about-list .item04 .inner-box .stock-box .stock-item .tit {position:absolute; left:0;  top:0; }
.main-about-list .item04 .inner-box .stock-box .stock-item .count-num {font-weight:600;}
.main-about-list .item04 .inner-box .stock-box .stock-item i {font-size: 16px; font-style:normal; margin-right:5px;}
.main-about-list .item04 .inner-box .stock-box .stock-item i.up {color:#d21b1b;}
.main-about-list .item04 .inner-box .stock-box .stock-item i.up:before {content:"\e92f"; }
.main-about-list .item04 .inner-box .stock-box .stock-item i.down {color:#0e3a9d;}
.main-about-list .item04 .inner-box .stock-box .stock-item i.down:before {content:"\e935"; }

/* 하단 박스 */
.maind-about-link-box {position:relative; top:-34px;}
.main-link-list li {float:left; width:50%;}
.main-link-list li a {position:relative; display:block; height:100%;}
.main-link-list li a .bg {display:block;}
.main-link-list li a .bg img {width:100%;}
.main-link-list li a .inner-box {position:absolute; width:100%; height:100%; top:0; left:0; }
.main-link-list li a .inner {display:table; width:100%; height:100%; padding-left:8.63%; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-link-list li a .tit {display:table-cell; vertical-align:middle; font-size: 25px; color: #000;} 
.main-link-list li.item01 a .tit {color:#fff;}
.main-link-list li a .tit span {display:inline-block; vertical-align:top; margin-left: 15px; font-size: 20px; line-height:25px; letter-spacing:5px; font-weight:400; color: #000; opacity:0.35;filter:Alpha(opacity=35);}
 


/* -------- 메인 컨텐츠 :: Notice & Media -------- */
#mainNoticeCon .main-tit-box {margin-top:50px;}
.main-notice-list {padding-right: 8.63%;}
.main-notice-list li {padding:19px 0;}
.main-notice-list li:first-child {padding-top:0;}
.main-notice-list li:last-child {padding-bottom:30px;}
.main-notice-list a {position:relative; display:block; }
.main-notice-list a:before {content: "\e914"; font-family: 'xeicon' !important; position:absolute; right:0; bottom:0; margin-bottom:-23px;  width: 46px; height:46px; line-height:46px; font-size:24px; color:#fff; background-color: #ddd; text-align:center; border-radius:50%; transition:all 0.4s;}
.main-notice-list a dl {display:table; width:100%; height:100%; table-layout:fixed;} 
.main-notice-list a dl dt {display:table-cell; vertical-align:middle; width: 20.6%;}
.main-notice-list a dl dt .img-wrap {display:block; position:relative; padding-top:61.56%;}
.main-notice-list a dl dt img {width:100%;}
.main-notice-list a dl dd {display:table-cell; vertical-align:middle; width:79.4%;padding:0 5.91%; border-bottom:1px solid #ddd; transition:all 0.4s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.main-notice-list a .inner {position:relative; padding-left: 100px;}
.main-notice-list a .category {display:inline-block; position:absolute; left:0; top:0;  width:77px; height:26px; font-size: 14.5px; line-height:26px; color:#fff; text-align:center; background-color: #3e84c6; border-radius:50px; transition:all 0.4s;}
.main-notice-list a .tit {display:block; font-size: 18.5px; letter-spacing:-0.75px; color: #222; }
.main-notice-list a .txt {font-size: 16px; letter-spacing:-0.75px; color: #9c9c9c; margin-top:20px; }
.main-notice-list a .txt-box {position:relative; padding-right: 88px; }
.main-notice-list a .date {position: absolute; right: 0; bottom: 0; font-size: 14px; color: #c0c0c0; transition:all 0.4s; }

.m-list {display:none;}
.main-notice-btn { position:relative; display:none; margin:30px auto 0; width:130px; height: 46px; border: 2px solid #000; font-size: 14px; padding: 0 35px 0 20px;}
.main-notice-btn span {display:table; height:100%; color:#000;}
.main-notice-btn span em {display:table-cell; vertical-align:middle;  font-weight:600;}
.main-notice-btn i {position:absolute; right:20px; top:0; font-size:18px; line-height:46px; color:#000;}


/* 오버시 */
@media all and (min-width:1025px){
	.main-notice-list a:hover:before  {background-color: #0e3a9d; }
	.main-notice-list a:hover dl dd {border-color:#0e3a9d; }
	.main-notice-list a:hover .category {background-color: #0e3a9d; }
	.main-notice-list a:hover .date  {color:#0e3a9d; }
}
/* 스크롤바 */
.main-notice-list-wrap .mCSB_scrollTools {opacity:1;filter:Alpha(opacity=100);}
.main-notice-list-wrap .mCSB_scrollTools .mCSB_draggerRail {width:6px; }
.main-notice-list-wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width:6px; background-color: #1f3567 !important; }



/* -------- 메인 컨텐츠 :: Careers -------- */
#mainCareerCon {position:relative; background-color: #eff2f6;}
#mainCareerCon:before {position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 100%;
    background-color: #d9e3ee;
    content: "";
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    -ms-transition: width 0.3s;
    transition: width 1s;
}

#mainCareerCon.active-section:before{width:508px;}
.main-careers-list {position:relative; margin:0 -0.45%; z-index:1;}
.main-careers-list li {float:left; width: 24.09%; margin:0 0.45%; }
.main-careers-list li a {position:relative; padding-top:124.26%; display:block; overflow:hidden; }
.main-careers-list li a .inner-box {position:absolute; top:0; left:0; width:100%; height:100%; }
.main-careers-list li a .inner {display:table; width:100%; height:100%; background:no-repeat; background-size:cover;}
.main-careers-list li a .over-bg { background:no-repeat; background-size:cover;}
.main-careers-list li a .inner dl {display:table-cell; vertical-align:middle; text-align:center; color:#fff; padding:0 15px;}
.main-careers-list li a .icon {display:block; padding-top:28.48%; background:center no-repeat; background-size: auto 100%;}
.main-careers-list li a .tit {font-size: 23px; letter-spacing:-1px; font-weight:500; display:block; margin-top:13.53%;}
.main-careers-list li a .txt {font-size: 15.5px; line-height:1.4em; letter-spacing:-1px; font-weight:300; opacity:0.7;filter:Alpha(opacity=70); margin-top:4.45%;}
.main-careers-list li.item01 a .over-bg {background-image:url("/images/main/main_career_img_01.jpg");}
.main-careers-list li.item01 a .icon {background-image:url("/images/main/main_career_icon_01.png");}
.main-careers-list li.item02 a .over-bg {background-image:url("/images/main/main_career_img_02.jpg");}
.main-careers-list li.item02 a .icon {background-image:url("/images/main/main_career_icon_02.png");}
.main-careers-list li.item03 a .over-bg {background-image:url("/images/main/main_career_img_03.jpg");}
.main-careers-list li.item03 a .icon {background-image:url("/images/main/main_career_icon_03.png");}
.main-careers-list li.item04 a .over-bg {background-image:url("/images/main/main_career_img_04.jpg");}
.main-careers-list li.item04 a .icon {background-image:url("/images/main/main_career_icon_04.png");}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:50px;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:20px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:20px; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:10px; height:10px; background-color:#fff; border-radius:50%; opacity:0.2;filter:Alpha(opacity=20);}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-o-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}

/* Black Style */
#fp-nav.black ul li a span{background-color:#000}
#fp-nav.black ul li .fp-tooltip{color:#222;}


/* ******************  메인 :: Footer ********************** */
#mainFooter #footer { background-color: #fff;}
#mainFooter #footer .footer-address .footer-address-txt{color:#333;}
#mainFooter #footer .footer-copyright{color:#666;}
#mainFooter #footer .footer-btn:hover{color:#1c4aaf; border:1px solid #1c4aaf; }
#mainFooter #footer .footer-btn{border:1px solid  rgba(0,0,0,0.15); color:#888;}
#mainFooter #footer .footer-address p:before{background-color:rgba(0,0,0,0.35);}