@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 CSS
 * date : 2024-01-31
******************************************************** */

.gnb {position: fixed; z-index: 9;}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
	height: auto !important;
}

.short-con {height: 400px;}

body #fp-nav ul li a, .fp-slidesNav ul li a{color: #fff;}
body #fp-nav ul li a span, body  .fp-slidesNav ul li a span{width: 5px; height: 5px; background-color: transparent; background-color: #fff; opacity: .8;}
body #fp-nav ul li a.active span, body .fp-slidesNav ul li a.active span, body #fp-nav ul li:hover a.active span, body .fp-slidesNav ul li:hover a.active span{margin:-22px 0 20px -4px; width: 10px; height: 45px; border: 0; background-color: #fff; opacity: 1; border-radius: 10px;}
body #fp-nav ul li, body .fp-slidesNav ul li{margin: 29px 7px;}

body.fp-viewing-1 #fp-nav ul li a span, body.fp-viewing-3 #fp-nav ul li a span{background-color: #c8c8c8;}
body.fp-viewing-1 #fp-nav ul li a.active span, body.fp-viewing-3 #fp-nav ul li a.active span{border:0; background-color: #7a13f0;}

body.fp-viewing-0 #fp-nav ul li a.active span{margin: -30px 0 20px -4px;}
body.fp-viewing-1 #fp-nav ul li a.active span{margin: -22px 0 15px -4px;}
body.fp-viewing-2 #fp-nav ul li a.active span{margin: -21px 0 15px -4px;}
body.fp-viewing-3 #fp-nav ul li a.active span{margin: -20px 0 15px -4px;}
body.fp-viewing-4 #fp-nav ul li a.active span{margin: -10px 0 15px -4px;}

/* 마우스 스크롤 */
.scr_icon{position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 100;}
.scr_icon_symb{position: relative; width: 27px; height: 51px; border-radius: 15px; border: 1.5px solid #fff; opacity: 1;}
.scr_icon_symb span{position: absolute; top: 5px; left: 50%; z-index: 1; width: 2px; height: 6px; background-color: #fff; margin-left: -1.5px; border-radius: 30px; animation: scrani 1.3s linear infinite;}
.scr_icon_symb {margin: 0 auto;}
.scr_icon > span {color: #fff; font-size: 16px; font-weight: 300; margin-bottom: 7px; display: inline-block;}

/* 메인 비주얼 :: Animation */
@keyframes motion {
	0% {margin-bottom: 0px;}
	100% {margin-bottom: -5px;}
}

@-webkit-keyframes scrani {
	0% {top:5px; opacity: 1;}
	100% {top:15px; opacity: 0.4;}
}
@keyframes fadeInSlow {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes image-zoom-out {
	from {
		transform: scale(1.2,1.2)
	}
	to {
		transform: scale(1.1,1.1)
	}
}
@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);
	}
}

@keyframes text-up {
	from {
		transform: translate3d(0, 150%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes text-up2 {
	from {
		transform: translate3d(0, 150%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

/* section01 */
.section.first{overflow: hidden;}
.main_visual {position: relative; height: 100vh;}
.main_visual .for_size_change {position: absolute; left: 50%; top: -webkit-calc(100vh - 100px); top: calc(100vh - 100px); transform: translateX(-50%); margin: 0 auto; width: 90vw; height: 200px; max-height: 100%; overflow: hidden; opacity: 0;}
.main_visual .visual_img_area {position: relative; left: 50%; top: 0; transform: translateX(-50%); height: 100%; background:url('/common/images/main/banner.jpg') no-repeat center center / cover; background:#000;}
.main_visual .visual_img_area img{position:absolute; left:0; top:0; width:100%; height:100%; opacity:.9; object-fit: cover;}
.intro_txt_wrap {position: absolute; z-index:10; left: 50%; top: 47%; transform: translate(-50%, -50%); text-align: center; width:1600px;}
.intro_txt_wrap .txt_wrap h2{font-size:80px; font-weight:700;}
.intro_txt_wrap .txt_wrap h2 span:nth-child(-n+13){font-weight: 400; font-size: 60px;}
.intro_txt_wrap .txt_wrap p{opacity:.8; font-weight:300; text-transform: uppercase; font-size: 25px; margin-bottom: 10px;}
.animated-text span {opacity: 0; animation: fadeInSlow .6s forwards; display: initial; letter-spacing: -.5px;}

@media(max-width:1270px){
	.intro_txt_wrap .txt_wrap h2 span:nth-child(13){clear: both; display: block;}
	.intro_txt_wrap .txt_wrap h2{line-height:90px;}
}
@media(max-width:768px){
	.animated-text span{font-size: 19px;}
	.intro_txt_wrap .txt_wrap p{margin-bottom: 0;}
	.intro_txt_wrap .txt_wrap h2{line-height:50px;}
	.intro_txt_wrap .txt_wrap h2 span{font-size:60px;}
	.intro_txt_wrap .txt_wrap h2 span:nth-child(-n+12){font-size:30px;}
	.scr_icon{bottom:50px}
}

/* section02 */
.second{background-color: #1a1a1a; position: relative;}
.second h2{font-size: 50px; font-weight: bold; text-align: center; color: #fff; margin-bottom: 50px;}
.second .wrapper{text-align: center;}
.slick-slide {/* space(여백)/2 */ margin: 0 30px;}
.slick-list {/* space(여백)/-2 */ margin: 0 -30px;}
.slick-slide img{filter: invert(100%) grayscale(100%); opacity: .5;}
.slide_container{margin-top: 80px;}
.main_partners_list02{margin-top: 30px;}
.count_wrap {margin-top: 80px; display: flex; align-items: center; justify-content: space-around;}
.count {font-weight: bold; font-size: 100px; margin-right: 10px;}
.count_box{color: #fff; font-size: 30px; font-weight: 400; text-align: center;}
.count_box p{color: #979797; font-size: 20px; font-weight: 400; margin-top: 10px;}
.count_box div{margin-bottom: 15px;}
@media all and (max-width:1270px){
	.second h2{font-size: 2.5rem; line-height: 1.3;}
	.count{font-size: 40px;}
}
@media all and (max-width:768px){
	.count_box{font-size: 1.5rem;}
	.count_box img{width: 50px;}
	.count{font-size: 2rem;}
	.count_box p{font-size: 1.2rem;}
	.slide_container{overflow: hidden;}
}
@media(max-width:400px){
	.second h2{font-size: 2rem;}
	.slick-slide img{height:25px;}
	.slide_container{margin-top: 50px;}
	.count_wrap{margin-top: 50px;}
}

/* section03 */
#section3 {overflow:hidden; position: relative;}
.section .main-bg{width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background: no-repeat center; transform: scale(1.08,1.08); background-size: cover;}
.main_bg{background:url(/common/images/main/third_background.jpg) 100% no-repeat; position: absolute; width: 100%; left: 0; top: 0; height: 100%; z-index: -1;}
.active .main_bg{animation:image-zoom-out 5s 0s forwards; animation-fill-mode : forwards;}
.solution_box{width: 100%; text-align: center;}
.content_title{position: absolute; top: 175px; text-align: center; color: #fff; z-index: 3; display: inline-block; left: 50%; transform: translateX(-50%);}
.content_title p{font-size: 25px; font-weight: 300; display: block; margin-bottom: 20px;}
.content_title p:last-child{font-size: 55px; font-weight: bold;}
.content_title p {animation-delay: 0.1s;}
.third.active .content_title p:first-child{display: inline-block; animation: text-up2 1.5s cubic-bezier(0.2, 0, 0.2, 1) both; opacity: 1;}
.third.active .content_title p:last-child{display: inline-block; animation: text-up2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; opacity: 1;}
.content_title p:last-child{font-size: 55px; font-weight: bold;}

.business_wrap{width: 100%; height: 100%; z-index: 2; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center;}
.business_wrap li{border-right: 1px solid rgba(255, 255, 255, 0.3); box-sizing: border-box; width: 100%; height: 100%; display: flex;}
.business_wrap li div{width: 100%; text-align: center; color: #fff; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 160px;}
.business_wrap li div:hover{background:linear-gradient(-45deg, rgba(102, 163, 255, .7), rgba(4, 39, 126, .7), rgba(156, 39, 176, .5), rgba(0, 0, 0, .7)); background-size: 400% 400%; animation: gradient 7s ease infinite;}
.business_wrap li h3{font-size: 50px; font-weight: bold; position: relative; transition: .5s;}
.business_wrap li p{font-size: 20px; font-weight: 300; margin-top: 23px; transition: .5s;}

.business_wrap .more {position: relative; display:inline-block; border-radius:50px; margin:0 auto; opacity:0; transition:width 0.4s; box-sizing:border-box; margin-top: 50px; width:5rem;}
.business_wrap .more span {display:flex; align-items:center; justify-content:center; width:5rem; height:5rem; border-radius:50%; border:1px solid rgba(255,255,255,0.3); box-sizing:border-box; transition:all 0.4s;}
.business_wrap .more em {font-size:1.5rem; color:#fff; font-weight: 400; margin-left: 6rem; white-space:nowrap; opacity:0;}
.business_wrap i {font-size:2rem; letter-spacing:-0.065em; color:#fff;}
#section3 .business_wrap li:hover .more {display:flex; align-items:center; width: 15rem; border:1px solid rgba(255,255,255,0.3); height:5rem;}
#section3 .business_wrap li:hover .more span {position: absolute; margin:0; margin-left:-1px; background: #fff; color: #000;}
#section3 .business_wrap li:hover .more em {opacity:1;}
#section3 .business_wrap li:hover .more i{color: #000;}
#section3.active .business_wrap li .icon-box,
#section3.active .business_wrap .s-name{overflow-y:hidden; opacity:1;}
#section3.active .business_wrap .more {opacity:1; animation:text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; height: 5rem;}
#mainContent2.active-section .solution-list .item .icon-box img,
#section3.active .business_wrap .s-name span{overflow:visible; animation:text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#section3.active .business_wrap .more span {line-height:5rem;}
#section3.activen .business_wrap li .icon-box {animation-delay:0.1s;}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@media all and (max-width:1270px){
	.content_title p:first-child{font-size: 1.5rem;}
	.content_title p:last-child{font-size: 3rem;}
	.business_wrap li h3{font-size: 2.3rem; transition: .5s;}
	.business_wrap li p{font-size: 1.1rem; font-weight: 300; margin-top: 10px;}
	.business_wrap li h3{padding-top:30px;}
	.business_wrap .more em{font-size:1.3rem; margin-left:5.6rem;}
	.business_wrap i{font-size: 2rem;}
	#section3 .business_wrap li:hover .more{width: 13rem;}
}
@media all and (max-width:768px){
	.business_wrap{flex-wrap: wrap;}
	.business_wrap li{flex: 50%; box-sizing: border-box; height: 50%;}
	.business_wrap li:nth-child(-n+3){border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
	.content_title{top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
	.main_bg{background-position: 60%;}
	.business_wrap li a:hover p{font-size: 1.5rem;}
	.business_wrap li a:hover .blind_text{font-size: .9rem;}
	.business_wrap li div{padding-top: 0;}
	.business_wrap .more{margin-top: 20px;}
	.business_wrap .more em{margin-left: 4.6rem;}
	.business_wrap .more span{width:3rem; height: 3rem;}
	#section3.active .business_wrap .more{height: 3rem; width: 3rem;}
	#section3.active .business_wrap .more span{line-height: 3rem;}
}
@media all and (max-width:400px){
	.third.active .content_title p:first-child{font-size: 1.3rem;}
	.third.active .content_title p:last-child{font-size: 2.5rem;}
	.business_wrap li h3{font-size: 2rem;}
}

/* section04 */
#section4{background-color: #1a1a1a;}
#section4 .section_title{color: #fff; font-weight: bold; width: 400px; z-index: 2;}
.section_title p{font-size: 25px; font-weight: 300; animation: text-up 1.5s cubic-bezier(0.5, 0, 0.1, 1) both; opacity: 1;}
.section_title h3{font-size: 50px; margin-top: 10px; animation: text-up 1.5s cubic-bezier(0.5, 0, 0.1, 1) both; opacity: 1;}
#section4 ul.tabs {width: 400px; margin-top: 55px; padding: 0; animation: text-up 1.5s cubic-bezier(0.5, 0, 0.1, 1) both; opacity: 1;}
#section4 ul.tabs li {position: relative; cursor: pointer; width:100%; padding: 0 0 0 20px; margin-bottom: 40px; font-size: 20px; font-weight: 400; color: #939393; letter-spacing: -1px; transition: .5s; z-index: 2;}
#section4 ul.tabs li.active {color:#7912ef; transition: .5s;}
#section4 ul.tabs li:after{content: ''; position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; display: inline-block; left: 0; top: 3px;}
#section4 ul.tabs li.active:after{background-color: #7912ef; transition: .5s;}
.tab_container {max-width:1200px; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; position: absolute; right: 0; top: 50%; transform: translate(0, -50%);}
#section4 .tab_content{display: flex; justify-content: space-evenly; align-items: center;}
#section4 .tab_content h4{color: #fff; font-size: 22px; margin-bottom: 30px; line-height: 1.5;}
#section4 .tab_content p{color: #fff; font-size: 17px; margin-bottom: 70px; font-weight: 300; line-height: 1.5;}
#section4 .tab_content > div:first-child{position: relative;}
#section4 .tab_content > div:first-child:after{position: absolute; background-color: #7912ef; border-radius: 50%; width: 600px; height: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; z-index: -1; display: block;}
@media all and (max-width:1600px){
	.section_title p{font-size: 1.5rem;}
	.section_title h3{font-size: 2.5rem;}
	.fourth .wrapper{display: flex; flex-direction:column;}
	#section4 .section_title{width: 100%;}
	.fourth .wrapper > .section_title{order: 1; padding-bottom: 40px; padding-top:20px; text-align: center;}
	.fourth .wrapper > .tab_container{order:2; padding-bottom: 120px;}
	.fourth .wrapper > .tabs{order: 3;}
	#section4 ul.tabs{width: 100%; margin-top: 30px; overflow: hidden; text-align: center;}
	#section4 ul.tabs li{font-size: 1.2rem; width: auto; box-sizing: border-box; margin-right: 20px; display: inline-block;}
	#section4 .tab_content > div:first-child:after{width: 400px; height: 400px;}
	#section4 .tab_content > div:first-child img{width: 100%; max-width: 500px;}
	#section4 .tab_content > div:last-child{min-width:300px}
	.tab_container {position: inherit; width: 100%; max-width: 100%; right: inherit; top: inherit; transform: translate(0, 0); margin-top: 65px;}
}
@media all and (max-width:768px){
	.fourth .wrapper > .section_title{padding-bottom: 30px;}
	.fourth .wrapper > .tab_container{padding-bottom: 30px; margin-top: 0;}
	#section4 ul.tabs li{margin-bottom: 15px; margin-right: 0; width: 100%; text-align: left; font-size: 1rem;}
	#section4 .tab_content{flex-direction:column;}
	#section4 .tab_content p{margin-bottom: 40px;}
	#section4 .tab_content h4{font-size: 1.4rem; margin-bottom: 15px;}
	#section4 .tab_content p{font-size: 1rem;}
	#section4 .section_title{text-align: center; width: 100%;}
	.section_title h3{font-size: 2.5rem;}
	.section_title p{font-size: 1.5rem;}
	#section4 .tab_content > div:first-child img{max-height: 200px; max-width: 250px;}
	#section4 .tab_content > div:first-child:after{width:300px; height: 300px;}
	.center_wrap{position: absolute; top: 53%; left: 50%; transform: translate(-50%, -53%); width: 100%;}
}
@media all and (max-width:400px){
	#section4 .tab_content p {margin-bottom: 25px;}
	#section4 ul.tabs{margin-top: 15px;}
	#section4 .tab_content > div:first-child img{max-height: 100px; width: 100%;}
}

/* section05 */
.fifth{background-color: #000000;}
.more_wrap{width: 100%; height:580px; padding-top: 180px; margin-top: 70px; box-sizing: border-box;}
.more_wrap .main_bg{background:url(/common/images/main/fifth_background.jpg) no-repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.more_wrap h3{font-size: 50px; font-weight: bold; color: #fff; line-height: 1.2; margin-bottom: 50px; transition: .5s;}
.more_wrap .main_bg{z-index: 0; animation: none; z-index: 0;}
a.btn_more_animation{color: #fff; font-size: 18.5px; font-weight: 300; letter-spacing: 0; position: relative; display: inline-block; transition: .5s; height: 50px; line-height: 49px;}
a.btn_more_animation span{margin-left: 5px; background:url(/common/images/main/icon_arrow_long.png) no-repeat; width: 96px; height:13px; display: inline-block; transition: .5s;}
a.btn_more_animation:before{position: absolute; top: calc(50% - 26px); left: 170px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #fff; content: ''; transition: .5s;}
a.btn_more_animation:hover span{position: relative; margin-left: 5px; background:url(/common/images/main/icon_arrow_short.png) no-repeat; width: 18px; height:13px; display: inline-block; transition: .5s;}
a.btn_more_animation:hover{transition: .5s; width: 218px; text-align: center;}
a.btn_more_animation:hover:before{width: 218px; right: inherit; left:0; transition: .5s; border-radius: 25px;}

@media (max-width:1280px){
	.more_wrap{margin-top: 0; padding-top: 100px; height: 400px; transition: .5s;}
	.more_wrap h3{font-size: 40px; margin-top: 50px; transition: .5s;}
	.more_wrap .main_bg{height:48vh;}
}
@media all and (max-width:768px){
	.more_wrap h3{font-size: 25px; transition: .5s;}
	a.btn_more_animation{font-size: 14px; transition: .5s;}
	a.btn_more_animation:before{left: 145px; top: calc(50% - 28px);}

}
@media all and (max-width:400px){
	.more_wrap .main_bg{background: url(/common/images/main/fifth_background.jpg) no-repeat top / cover;}
	.active.section .main_bg{animation: none;}
	.more_wrap .main_bg{z-index: 0; animation: none; z-index: 0;}
	.more_wrap .main_bg{height:370px;}
}

/* 20240213 오류 수정 */
.slick-slide img:hover{opacity: 1; transition: .5s;}

/****** 20240215 모바일 관련 추가 ******/
a.btn_more_animation:hover{font-weight: 600; transition: .5s;}
@media all and (max-width:768px){
	#section4 ul.tabs li{font-size:1.3rem;}
	#section4 ul.tabs{margin-top: 0;}
	.section_title h3{margin-top: 0;}
	.fourth .wrapper > .section_title {padding-bottom: 20px;}
}
@media all and (max-width:450px){
	.more_wrap .main_bg{height:310px;}
	.more_wrap h3{margin-top: 0; text-align: center;}
	.more_wrap .wrapper{text-align: center;}
	#section4 ul.tabs li{font-size:1.3rem;}
}