@charset "UTF-8";

.m_set {width:100%; position:relative;}
.m_set h2 {font-weight:900;}
.m_set p.txt {color:#bbb; margin-top:40px;}

/* 에니메이션 */
@keyframes mainCopyFade {
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes lineGrow120 {
	0% {opacity: 0; height:0;}
	100% {opacity:.8; height:120px;}
}

@keyframes slideDown {
	from {transform:translate(0px, -30px);}
	to {transform:translate(0px, 0px);}
}

.main_visual {width:100%; position:relative; text-align:center; background-color:#000; opacity:0.9; z-index:1;}
.visual_area {position:relative; width:100%; color:#fff;}
.visual_area .inner {position:absolute; padding-top:17%; left:8%;}
.visual_area h2 {text-shadow:3px 3px 3px rgba(0,0,0,1.0); opacity:0; filter: blur(0px); text-align:left; font-weight:800;}
.visual_area h2.main_txt01 {font-size:90px; animation:mainCopyFade 2s .5s ease-out forwards;}
.visual_area h2.main_txt02 {font-size:90px; animation:mainCopyFade 2s 1s ease-out forwards;}
.visual_area h2.main_txt03 {font-size:90px; animation:mainCopyFade 2s 1.5s ease-out forwards;}
.main_slider {position:absolute; inset:0; z-index:-1; object-fit:cover; display:block;}
.main_slider .mv_img img {width:100%; height:100vh; object-fit:cover; display:block;}
.main_slider .mv_img video {width:100%; height:100vh; object-fit:cover; display:block; opacity:0.7;}
.main_sliderNav {position:absolute; bottom:0; left:40px; width:calc(100% - 80px); display:flex; justify-content:space-evenly; align-items:flex-end; gap:20px;}
.main_sliderNav button {width:100%; padding:20px 40px; text-align:left; background:rgba(256,256,256,.8); color:#222; font-size:20px; font-weight:700; height:min-content;}
.main_sliderNav button > span {display:none; font-size:16px; font-weight:400;}
.main_sliderNav button.active {background:#00134B; color:#fff;}
.main_sliderNav button.active > span {display:block;}
.main_sliderNav button:hover {border-top:2px solid #00134B;}
.main_sliderNav button.active:hover {border-top:0;}

/* 메인 컨텐츠 main_sec1 */
.main_sec1 {}
.main_sec1 .inner {padding-top:90px; }
.main_sec1 h2 {font-size:48px; font-weight:800; align-items:center; display:flex; flex-direction:column; justify-content:center;}
.main_sec1 h2 span {opacity:0;}
.main_sec1 .line_bar {width:1px; height:120px;}
.main_sec1 .line_bar i {display:block; width:1px; height:0; background-color:#222; margin:24px 0 0;}
.main_sec1 .count_wrap {display:flex; justify-content:center; position:relative; height:100%; width:100%; margin:60px 0 0;}
.main_sec1 .count_wrap .count_scale {display:flex; flex-direction:column; justify-content:center; overflow:hidden; height:520px; background: url('../images/count_wrap_bg.jpg') repeat 50% 0;}

.main_sec1 .count_wrap .count_top {text-align:center; width:100%; font-size:36px; font-weight:900; color:#fff; margin-bottom:100px;}
.main_sec1 .count_wrap .count_bottom {display:flex; justify-content: space-evenly; color:#fff;}
.main_sec1 .count_wrap .count_bottom li {display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:8px; min-width:122px;}
.main_sec1 .count_wrap .count_bottom li p {font-size:24px; opacity: 0.6;}
.main_sec1 .count_wrap .count_bottom li span {font-size:60px; font-weight:900;}
.main_sec1 .count_wrap .count_bottom li span .icon {font-size:24px; font-weight:400; margin-left:10px;}

.main_sec1 .inner.active span:nth-of-type(1) {animation:mainCopyFade .5s .5s ease-out forwards, slideDown .5s .5s ease-out forwards;}
.main_sec1 .inner.active span:nth-of-type(2) {animation:mainCopyFade .7s .8s ease-out forwards, slideDown .7s .8s ease-out forwards;}
.main_sec1 .inner.active span:nth-of-type(3) {animation:mainCopyFade .9s 1.1s ease-out forwards, slideDown .9s 1.1s ease-out forwards;}
.main_sec1 .inner.active .line_bar i {animation:lineGrow120 1.5s .8s ease-out forwards;}

/* 메인 컨텐츠 main_sec2 */
.main_sec2 {display:flex; align-items:center; height:100svh; background-image: url('../images/tech_wrap_bg.jpg'); background-size:cover;}
.main_sec2 h2 {font-size:36px; color:#fff;}
.main_sec2 h3 {font-size:60px; color:#fff; font-weight:800; margin-top:20px;}
.main_sec2 .inner {display:flex; justify-content:space-between; align-items:center; width:100%;}
.main_sec2 .__left {text-align:left;}
.main_sec2 .__right {}

.global-loops {max-width:46.89rem; margin-left:auto;}
.global-loops .info .info-wrapper {display:grid; gap:1.89rem; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:center; align-items:flex-start;}
.global-loops .info .info-wrapper .info-slide {height:auto;}
.global-loops .__loop-group {gap:1.89rem; display:grid;}
.global-loops .loop-item {position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:50px 40px 200px 40px; background:rgba(10, 49, 168, 0.6); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:40px; box-sizing:border-box; color:#fff; /* transition: .2s ease-in-out; */}
.global-loops .loop-item:hover {background:#fff url('../images/arrow01.png') no-repeat 90% 90%; color:#222; }
.global-loops .loop-item .__title {font-size:24px; line-height:1.2; font-weight:900; margin-bottom:20px; letter-spacing: -0.02em;}
.global-loops .loop-item p {font-weight:400;}

/* 메인 컨텐츠 main_sec3 */
.main_sec3 {padding-top:140px;}
.main_sec3 h2 {font-size:36px;}
.main_sec3 h3 {font-size:60px; font-weight:800; margin-top:20px;}
.main_sec3 .count_wrap {padding:50px 0;}
.main_sec3 .xpr-pinned {display:flex; gap: 15%; align-items:stretch; overflow:hidden; height:calc(100svh - 100px);}
.xpr-pinned__visual {max-width:930px; flex-shrink: 0; position:sticky; display:flex; align-items:center; justify-content:center; height:calc(100svh - 100px); flex-basis:100%; z-index:-1;}
.xpr-pinned__img-item {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}
.xpr-pinned__img-wrap {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; border-radius:0 40px 40px 0; transition: .4s ease-out;}
.xpr-pinned__img-wrap:nth-child(2),
.xpr-pinned__img-wrap:nth-child(3) {opacity:0;}
.xpr-pinned__img-wrap.active {opacity:1;}
.xpr-pinned__img {object-fit:cover; width:100%; height:100%;}

.xpr-pinned__content {}
.xpr-pinned__text-item { display:flex; flex-direction:column; justify-content:center; height:calc(100svh - 100px);}
.xpr-pinned__text-item h4 {font-size:72px; font-weight:800;}
.xpr-pinned__text-item h5 {font-size:36px; font-weight:800; margin:20px 0;}
.xpr-pinned__text-item p {font-size:16px; color:#666; line-height:1.6;}

.btn-group {display:flex; gap:1rem; margin-top:40px;}
.btn-group .btn {display:inline-flex; justify-content:center; align-items:center; padding:12px 20px; font-size:18px; font-weight:700; border:2px solid #222; cursor:pointer; transition:all 0.3s ease; position:relative; overflow:hidden; z-index:1; white-space:nowrap; max-height:46px; border-radius:10px;}
.btn-group .btn:hover {border:2px solid #222; background-color:#222; color:#fff;}
.btn-group .btn i {margin-left:10px;}

/* 메인 컨텐츠 main_sec4 */
.main_sec4 {padding:160px 0;}
.main_sec4 h2 {font-size:36px;}
.main_sec4 h3 {font-size:60px; font-weight:800; margin-top:20px;}

.galley_list {display:flex; flex-flow:row wrap; margin-top:80px;}
.galley_list li {max-width:280px; margin:0 10px; background-color:#fff; }
.galley_list li .img {border:1px #dcdcdc solid; transition:all 0.3s; border-radius:25px;}
.galley_list li .img img {width:100%; border-radius:25px;}
.galley_list li .img:hover, .galley_list .img li:focus {border:1px solid #222; box-shadow:0 8px 15px 0 rgba(0,0,0,0.1);}
.galley_list li a {position:relative;}
.galley_list li a p {font-size:24px; font-weight:900; margin-top:30px;}
.galley_list li a span {display:block; font-weight:400; margin-top:15px;}

.galley_list .slick-prev, 
.galley_list .slick-next {width:60px; height:60px; border-radius:100%; z-index:9; margin-top:2%; border:1px #dcdcdc solid; background-color:#fff;}
.galley_list .slick-prev:hover,
.galley_list .slick-prev:focus,
.galley_list .slick-next:hover,
.galley_list .slick-next:focus {background:#79563c; border:0;}
.galley_list .slick-prev:before, 
.galley_list .slick-next:before {transition: all ease 0.2s 0s; font-size:24px; font-family:'xeicon';}
.galley_list .slick-prev:before {content:'\e93b'; margin-left:-3px;}
.galley_list .slick-next:before {content:'\e93e'; margin-right:-3px;}

.main_sec4 .inner h2,
.main_sec4 .inner h3 span {opacity:0;}
.main_sec4 .inner.active h2 {animation:mainCopyFade .5s .2s ease-out forwards, slideDown .5s .2s ease-out forwards;}
.main_sec4 .inner.active h3 span:nth-of-type(1) {animation:mainCopyFade .7s .6s ease-out forwards, slideDown .7s .6s ease-out forwards;}
.main_sec4 .inner.active h3 span:nth-of-type(2) {animation:mainCopyFade .9s 1s ease-out forwards, slideDown .9s 1s ease-out forwards;}

/* 메인 컨텐츠 main_sec5 */
.main_sec5 {padding:160px 0; background-color:#f4f4f4;}
.main_sec5 .inner {display:flex; align-items:center;}
.main_sec5 h2 {font-size:36px;}
.main_sec5 h3 {font-size:60px; font-weight:800; margin-top:20px;}
.main_sec5 .__left {text-align:left; width:40%;}
.main_sec5 .__right {width:60%;}

.news_list {}
.news_list li {border-top:1px solid #2346b1; border-bottom:1px solid #dcdcdc;}
.news_list li + li {border-top:0;}
.news_list li a {display:flex; align-items:center; padding:40px 0; transition:all 0.3s ease;}
.news_list li a:hover {background-color:#fff;}
.news_list li .day {text-align:center; width:150px; flex:0 0 auto;}
.news_list li .day dt {font-size:30px; color:#2346b1; font-weight:900;}
.news_list li .txt {flex:1; min-width:0;}
.news_list li .txt dt {font-size:20px; font-weight:700; margin-top:8px;}
.news_list li .txt dd {color:#666; margin-top:5px; font-weight:400;}
.news_list li .txt dt,.news_list li .txt dd {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:94%;}

.main_sec5 .inner h2,
.main_sec5 .inner h3 span {opacity:0;}
.main_sec5 .inner.active h2 {animation:mainCopyFade .5s .2s ease-out forwards, slideDown .5s .2s ease-out forwards;}
.main_sec5 .inner.active h3 span:nth-of-type(1) {animation:mainCopyFade .7s .6s ease-out forwards, slideDown .7s .6s ease-out forwards;}
.main_sec5 .inner.active h3 span:nth-of-type(2) {animation:mainCopyFade .9s 1s ease-out forwards, slideDown .9s 1s ease-out forwards;}

/* 메인 컨텐츠 main_sec6 */
.main_sec6 {padding:160px 0; background-image: url('../images/careers_wrap_bg.jpg');}
.main_sec6 .inner {display:flex; justify-content:space-between; align-items:center;}
.main_sec6 h2 {font-size:36px; color:#fff;}
.main_sec6 h3 {font-size:60px; color:#fff; font-weight:800; margin-top:20px;}
.main_sec6 .__left {text-align:left;}
.main_sec6 .__right {max-width:880px; margin-left:auto;}

.links {display:flex; gap:0.89rem;}
.links a {position:relative; flex:1; min-height:280px; background:#fff; border-radius:20px; padding:40px; box-sizing:border-box; display:flex; flex-direction:column;}
.links a h4 {font-size:36px; font-weight:800;}
.links a p {font-size:18px; color:#666; margin-top:20px;}
.links a .btn {position:absolute; right:40px; bottom:40px;}
.links a .btn span {display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50px; background-color:#f4f4f4; transition:all 0.3s ease;}
.links a:hover .btn span {background-color:#2346b1; color:#fff;}

.main_sec6 .inner h2,
.main_sec6 .inner h3 span {opacity:0;}
.main_sec6 .inner.active h2 {animation:mainCopyFade .5s .2s ease-out forwards, slideDown .5s .2s ease-out forwards;}
.main_sec6 .inner.active h3 span:nth-of-type(1) {animation:mainCopyFade .7s .6s ease-out forwards, slideDown .7s .6s ease-out forwards;}
.main_sec6 .inner.active h3 span:nth-of-type(2) {animation:mainCopyFade .9s 1s ease-out forwards, slideDown .9s 1s ease-out forwards;}


/* media query */
@media screen and (max-width:1690px) {
	.main_sec3 .xpr-pinned {gap: 10%;}
	.xpr-pinned__visual {max-width:700px;}
}

@media screen and (max-width:1350px) {
	.xpr-pinned__visual {max-width:500px;}
}

@media screen and (max-width:1280px) {
	/* 메인 컨텐츠 */
	.m_set .inner {flex-direction: column; align-items: stretch;}
	.m_set {padding:100px 0;}
	.m_set .__left {margin:0 0 60px;}
	.m_set h3 br {display:none}
	.m_set h3 {font-size:50px;}
	.m_set h4 {font-size:60px;}
	.global-loops,
	.main_sec6 .__right {max-width:100%; margin-left:0;}
	.main_sec5 .__left,.main_sec5 .__right {width:100%;}

	/* 메인 컨텐츠 main_sec1 */ 
	.main_sec1 {padding-bottom:0;}

	/* 메인 컨텐츠 main_sec2 */ 
	.global-loops .loop-item {padding-bottom:80px;}
	.main_sec2 .__left {margin-bottom:30px;}
}

@media screen and (max-width:1090px) {
	.xpr-pinned__visual {max-width:400px;}
}

@media screen and (max-width:1024px) {
	/* 메인 컨텐츠 */
	.m_set h4 {font-size:46px;}
	
	/* 메인 비주얼 */
	.visual_area h2 {font-size:80px!important;}
	.main_sliderNav {display:none;}
	
	/* 메인 컨텐츠 main_sec3 */
	.xpr-pinned__content {margin-left:40px;}

	/* 메인 컨텐츠 main_sec4 */
	.galley_list li {max-width:none; width:calc(33.33333% - 20px);}
	.visual_area .inner {padding-top:40%;}
}

@media screen and (max-width:860px) {
	/* 메인 컨텐츠 main_sec3 */
	.main_sec3 .xpr-pinned {display:block; height:auto;}
	.xpr-pinned__visual {display:none;}
	.xpr-pinned__content {margin-left:0;}
	.xpr-pinned__text-item {position:relative; display:block; padding:30px; height:auto; border-bottom:1px solid #dcdcdc;}
	.xpr-pinned__text-item:nth-child(1) {border-top:1px solid #dcdcdc;}
	.xpr-pinned__text-item h5 {font-size:30px; margin:0 0 20px;}
	.xpr-pinned__text-item .btn-group {margin:30px 0 5px;}
	.xpr-pinned__text-item:before {content:""; position:absolute; right:30px; display:block; width:50%; height:calc(100% - 60px); border-radius:20px;}
	.xpr-pinned__text-item.scrollT_esg1:before {background:url(../images/main_esg_03.jpg) 50% 50%; background-size:cover;}
	.xpr-pinned__text-item.scrollT_esg2:before {background:url(../images/main_esg_01.jpg) 50% 50%; background-size:cover;}
	.xpr-pinned__text-item.scrollT_esg3:before {background:url(../images/main_esg_02.jpg) 50% 50%; background-size:cover;}
}

@media screen and (max-width:768px) {
	/* 메인 컨텐츠 */
	.m_set .__left {margin:0 0 40px;}
	.m_set h2 {font-size:32px;}
	.m_set h3 {font-size:36px;}
	.m_set h4 {font-size:32px;}
	
	/* 메인 비주얼 */
	.visual_area h2 {font-size:70px!important;}

	/* 메인 컨텐츠 main_sec1 */
	.main_sec1 .count_wrap .count_scale {height:420px;}
	.main_sec1 .count_wrap .count_top {margin-bottom:60px;}
	.main_sec1 .count_wrap .count_bottom li {min-width:auto;}
	.main_sec1 .count_wrap .count_bottom li p {font-size:20px;}
	.main_sec1 .count_wrap .count_bottom li span {font-size:34px; font-weight:700;}
	
	/* 메인 컨텐츠 main_sec3 */
	.main_sec3 {padding:70px 0 0; min-height:auto;}

	/* 메인 컨텐츠 main_sec6 */
	.links a {padding:30px; min-height:250px;}
	.links a h4 {font-size:28px;}
	.visual_area .inner {padding-top:50%;}
	
}

@media screen and (max-width:640px) {	
	/* 메인 비주얼 */
	.visual_area h2 {font-size:60px!important;}

	/* 메인 컨텐츠 main_sec2 */ 
	.global-loops .loop-item {padding:25px 25px 60px 25px;}

	/* 메인 컨텐츠 main_sec3 */
	.main_sec3 .xpr-pinned {display:block;}
	.xpr-pinned__img-wrap {border-radius:0;}
	.xpr-pinned__img {border-radius:0;}
	.xpr-pinned__text-item:before {width:40%;}

	/* 메인 컨텐츠 main_sec4 */
	.galley_list {margin-top:40px;}
	.galley_list li {max-width:none; width:calc(50% - 20px);}
	.galley_list li a p {font-size:24px; font-weight:900; margin-top:15px;}
	.galley_list li a span {display:block; font-weight:400; margin-top:5px; margin-bottom:30px}

	/* 메인 컨텐츠 main_sec5 */	
	.news_list li .day {text-align:left; width:80px;}

	/* 메인 컨텐츠 main_sec6 */
	.links {display:block;}
	.links a {padding:25px; min-height:auto;}
	.links a + a {margin-top: 20px;}
	.links a h4 {font-size:26px;}
	.links a .btn {top:20px; right:25px;}
	.links a .btn span {width:40px; height:40px; }
}

@media screen and (max-width:480px) {
	/* 메인 컨텐츠 */
	.m_set h2 {font-size:26px;}
	.m_set h3 {font-size:30px;}
	.m_set h4 {font-size:24px;}
	
	/* 메인 비주얼 */
	.visual_area h2 {font-size:44px!important;}

	/* 메인 컨텐츠 main_sec1 */
	.main_sec1 .count_wrap .count_top {margin-bottom:30px; font-size:28px;}
	.main_sec1 .count_wrap .count_bottom {flex-wrap: wrap;}
	.main_sec1 .count_wrap .count_bottom li {width:36%; margin-top:20px;}
	.main_sec1 .count_wrap .count_bottom li p {font-size:16px;}
	.main_sec1 .count_wrap .count_bottom li span {font-size:28px;}
	
	/* 메인 컨텐츠 main_sec2 */
	.main_sec2 {height:auto;}
	.main_sec2 .__left {margin:0 0 20px;}
	.global-loops .info .info-wrapper {display:block;}
	.global-loops .__loop-group {gap:20px;}
	.global-loops .info .info-wrapper .info-slide.m_t_100 {margin-top:30px!important;}
	.global-loops .loop-item {padding:20px 20px 20px 20px;}
	.main_sec2 h3 {font-size:24px;}
}

@media screen and (max-width:410px) {	
	/* 메인 컨텐츠 main_sec3 */
	.xpr-pinned__text-item:before {width:30%;}
}