@charset "utf-8";

#visual-section{overflow:hidden; position:relative;}
#visual-section .visual-item{width:100%; overflow:hidden;}
#visual-section .visual-item .item{height:939px; transform:scale(1.2); transition:all 4s; background-position:center center; background-size:cover;}
#visual-section .visual-item .scale{transform:scale(1.2);}
#visual-section .visual-txt{width:100%; max-width:1300px; bottom:10%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); padding:0 15px; z-index:999; position:absolute;}
#visual-section .visual-txt h3{font-weight:700; font-size:70px; color:#fff;}
#visual-section .slick-active h3{animation:up 1s 1s both linear;}
#visual-section .slick-arrow{width:52px; height:101px; top:50%; margin-top:-50px; z-index:1000; border:0; background:transparent; position:absolute;}
#visual-section .slick-arrow.slick-next{right:50px; text-indent:-9000px;}
#visual-section .slick-arrow.slick-prev{left:50px; text-indent:-9000px;}
#visual-section .active .item{transform:scale(1);}
.visual-txt h3 .txt-ani{transform:translateY(140%); transform-origin:0 bottom;}

@media screen and (max-width:980px){
	#visual-section .visual-item .item{height:800px;}
	#visual-section .visual-txt h3{font-size:60px;}
}

@media screen and (max-width:880px){
	#visual-section .visual-item .item{height:750px;}
	#visual-section .visual-txt h3{font-size:55px;}
}

@media screen and (max-width:780px){
	#visual-section .visual-item .item{height:700px;}
	#visual-section .visual-txt h3{font-size:50px;}
}

@media screen and (max-width:680px){
	#visual-section .visual-item .item{height:650px;}
	#visual-section .visual-txt h3{font-size:45px;}
}

@media screen and (max-width:580px){
	#visual-section .visual-item .item{height:550px;}
	#visual-section .visual-txt h3{font-size:40px;}
}

@media screen and (max-width:480px){
	#visual-section .visual-item .item{height:500px;}
}


@keyframes up{
	0%{transform:translateY(100px); opacity:0;}
	100%{transform:translateY(0); opacity:1;}
}

.main-visual-dot{position:absolute;left:0;bottom:30px;width:100%;text-align:center;z-index:999;}
.main-visual-dot > .area {width:250px; display:inline-block;}
.visual-dot-list{display:inline-block;vertical-align:top;}
.visual-dot-list li{position:relative; float:left; margin-right:20px; -webkit-transition:all 0.3s; transition:all 0.3s;}
.visual-dot-list li a{cursor:pointer;margin:0px;padding:0px;background:none;vertical-align:top;font-size:18px;color:rgba(255,255,255,1);font-weight:900;font-family:'Noto Sans KR';}
.visual-dot-list li.slick-current{margin-right:115px;}
.visual-dot-list li.slick-current:before{position:absolute; left:30px; top:50%; margin-top:-1px; content:""; width:90px; height:1px; background-color:rgba(255,255,255,0.3);}
.visual-dot-list li.slick-current:after{position:absolute; left:30px; top:50%; margin-top:-1px; content:""; width:0; height:1px; background-color:#fff; animation:dotLoading 4s both;}

@-webkit-keyframes dotLoading{
	from{width:0px;}
	to{width:90px;}
}

@keyframes dotLoading{
	from{width:0px;}
	to{width:90px;}
}

@keyframes up{
	0%{transform:translateY(-30px); opacity:0;}
	100%{transform:translateY(0); opacity:1;}
}

.main-title-box{width:100%; max-width:1430px; margin:0 auto; padding:0 15px;}
.main-title-box span{margin-bottom:40px; font-weight:700; font-size:22px; color:#000; position:relative; display:inline-block;}
.main-title-box span:after{width:130px; height:1px; right:-140px; bottom:0; background-color:#9c9c9c; content:""; display:block; position:absolute;}
.main-title-box h2{font-weight:700; font-size:42px; line-height:140%; color:#000; letter-spacing:-0.5px;}

@media screen and (max-width:1240px){
	.main-title-box span{margin-bottom:35px; font-size:20px;}
	.main-title-box span:after{width:120px; right:-130px;}
	.main-title-box h2{font-size:38px;}
}

@media screen and (max-width:1120px){
	.main-title-box span{margin-bottom:30px; font-size:18px;}
	.main-title-box span:after{width:110px; right:-120px;}
	.main-title-box h2{font-size:34px;}
}

@media screen and (max-width:1000px){
	.main-title-box h2{font-size:30px;}
}

@media screen and (max-width:880px){
	.main-title-box h2{font-weight:600; font-size:26px;}
}

@media screen and (max-width:680px){
	.main-title-box h2{font-size:24px;}
	.main-title-box h2 br{display:none;}
}

@media screen and (max-width:580px){
	.main-title-box h2{font-size:22px;}
}


#main-company-section{margin-top:70px; padding:100px 0;}
#main-company-section .main-company-slider{width:100%; max-width:1430px; height:430px; margin:70px auto 0; padding:0 15px; overflow:hidden;}
#main-company-section .main-company-slider .com-box{width:100%; height:370px; background-position:0 0; background-repeat:no-repeat; position:relative; overflow:hidden;}
#main-company-section .main-company-slider .com-box:after{width:100%; height:100%; bottom:0; left:0; opacity:0; display:block; position:absolute; content:""; transition:all 0.3s ease-out; background:linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.8) 98%);}
#main-company-section .main-company-slider .com-box.bg1{background-image:url("../img/main_company_bg1.jpg");}
#main-company-section .main-company-slider .com-box.bg2{background-image:url("../img/main_company_bg2.jpg");}
#main-company-section .main-company-slider .com-box.bg3{background-image:url("../img/main_company_bg3.jpg");}
#main-company-section .main-company-slider .com-box.bg4{background-image:url("../img/main_company_bg4.jpg");}
#main-company-section .main-company-slider .com-box.bg5{background-image:url("../img/main_company_bg5.jpg");}
#main-company-section .main-company-slider .com-box.bg6{background-image:url("../img/main_company_bg6.jpg");}
#main-company-section .main-company-slider .com-box.bg7{background-image:url("../img/main_company_bg7.jpg");}
#main-company-section .main-company-slider .com-box.bg8{background-image:url("../img/main_company_bg8.jpg");}
#main-company-section .main-company-slider .swiper-slide{width:280px; transition:all 0.2s ease-out;}
#main-company-section .main-company-slider .swiper-slide a{height:370px; display:block;}

#main-company-section .main-company-slider .com-tit{width:100%; bottom:45px; opacity:1; font-weight:700; font-size:26px; text-align:center; color:#fff; position:absolute; transition:all 0.2s ease-out;}
#main-company-section .main-company-slider .com-desc{left:0; bottom:45px; padding-left:35px; padding-right:20px; opacity:0; position:absolute; transition:all 0.2s ease-out;}
#main-company-section .main-company-slider .com-desc h3{margin-bottom:20px; font-weight:700; font-size:26px; color:#fff;}
#main-company-section .main-company-slider .com-desc div{font-weight:200; font-size:16px; line-height:140%; color:#fff;}

#main-company-section .main-company-slider .swiper-slide:hover{width:440px;}
#main-company-section .main-company-slider .swiper-slide:hover a .com-box:after{opacity:1;}
#main-company-section .main-company-slider .swiper-slide:hover a .com-tit{opacity:0;}
#main-company-section .main-company-slider .swiper-slide:hover a .com-desc{opacity:1;}

#main-company-section .company-slider-pagination-area{z-index:888; position:relative; display:flex; flex-wrap:nowrap; justify-content:end; align-items:center;}
#main-company-section .company-slider-pagination-area .swiper-pagination-bullet{width:10px; height:10px; margin:0 15px !important; border:0; border-radius:50%; display:inline-block; background-color:#545454; position:relative;}
#main-company-section .company-slider-pagination-area .swiper-pagination-bullet{opacity:1; transition:0.3s;}
#main-company-section .company-slider-pagination-area .swiper-pagination-bullet-active{position:relative;}
#main-company-section .company-slider-pagination-area .swiper-pagination-bullet-active::before{width:34px; height:34px; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid #545454; content:''; position:absolute; animation:slide-pagination 0.5s linear 0s;}

@media screen and (max-width:1080px){
	#main-company-section .main-company-slider .swiper-slide:hover{width:400px;}
}

@media screen and (max-width:980px){
	#main-company-section{margin-top:50px; padding:80px 0;}

	#main-company-section .main-company-slider{height:380px; margin:50px auto 0;}
	#main-company-section .main-company-slider .swiper-slide{width:250px;}
	#main-company-section .main-company-slider .swiper-slide:hover{width:350px;}
	#main-company-section .main-company-slider .com-box{height:320px;}
	#main-company-section .main-company-slider .swiper-slide a{height:320px;}
	#main-company-section .main-company-slider .com-tit{bottom:35px; font-size:22px;}

	#main-company-section .main-company-slider .com-desc{bottom:35px; padding-left:25px; padding-right:10px;}
	#main-company-section .main-company-slider .com-desc h3{font-size:22px;}
	#main-company-section .main-company-slider .com-desc div{font-size:14px;}

}

@media screen and (max-width:880px){
	#main-company-section{margin-top:30px; padding:60px 0;}
	#main-company-section .main-company-slider .swiper-slide{width:200px;}
	#main-company-section .main-company-slider .swiper-slide:hover{width:50%;}

	#main-company-section .main-company-slider{height:330px; margin:40px auto 0;}
	#main-company-section .main-company-slider .com-box{height:280px;}
	#main-company-section .main-company-slider .swiper-slide a{height:280px;}

	#main-company-section .main-company-slider .com-tit{font-size:20px;}
	#main-company-section .main-company-slider .com-desc h3{font-size:20px;}
}

@media screen and (max-width:580px){
	#main-company-section .company-slider-pagination-area .swiper-pagination-bullet{margin:0 10px !important;}
	#main-company-section .company-slider-pagination-area .swiper-pagination-bullet-active::before{width:20px; height:20px;}

}


#main-business-section{padding:100px 0; background-color:#fafaf9;}
#main-business-section .business-box{width:100%; max-width:1430px; margin:65px auto 0; padding:0 15px; gap:20px; display:flex; align-items:center; justify-content:space-between;}
#main-business-section .business-box .box{position:relative;}
#main-business-section .business-box .box h3{top:50px; left:50px; z-index:999; font-weight:600; font-size:26px; color:#fff; position:absolute;}
#main-business-section .business-box .box a{display:block;}
#main-business-section .business-box .box a:after{width:100%; height:100%; top:0; left:0; display:block; position:absolute; content:""; background-color:transparent; transition:all 0.2s;}
#main-business-section .business-box .box a img{max-width:100%; vertical-align:middle;}
#main-business-section .business-box .box a:hover:after{background-color:rgba(0,0,0,.2);}

@media screen and (max-width:980px){
	#main-business-section{padding:80px 0;}
	#main-business-section .business-box{margin:40px auto 0;}
	#main-business-section .business-box .box h3{top:30px; left:30px; font-size:24px;}
}

@media screen and (max-width:880px){
	#main-business-section{padding:60px 0;}
	#main-business-section .business-box{gap:10px;}
	#main-business-section .business-box .box h3{top:25px; left:25px; font-size:22px;}
}

@media screen and (max-width:680px){
	#main-business-section .business-box{flex-direction:column;}
	#main-business-section .business-box .box h3{top:20px; left:20px; font-size:18px;}
	#main-business-section .business-box .box .img{height:230px; overflow:hidden;}
}


#main-technology-section{padding:100px 0; }

@media screen and (max-width:980px){
	#main-technology-section{padding:80px 0;}
}

@media screen and (max-width:880px){
	#main-technology-section{padding:60px 0;}
}

.technology-wrapper{width:100%; padding-top:230px; position:relative; overflow:hidden;}

.technology-slide-wrapper{height:370px; position:relative;}
.technology-slide{width:2700px; top:0; left:50%; margin-left:-1350px; position:absolute;}
.technology-slide .swiper-slide img{width:600px;}
.technology-slide .swiper-container{width:100%; margin:0 auto; overflow:inherit;}
.technology-slide .swiper-slide{position:relative; transition:all 0.2s ease;}
.technology-slide .swiper-slide-active{margin-top:-120px;}
.technology-slide .swiper-slide-next{margin-top:0;}
.technology-slide .swiper-slide a{width:fit-content; margin:0 auto; display:block; position:relative; box-shadow:3px 5px 15px 0px rgba(0, 0, 0, 0.2); transition:all 0.2s ease;}
.technology-slide .swiper-slide a:hover,
.technology-slide .swiper-slide a:focus{background-color:#f9f9f9; box-shadow:3px 5px 15px 0px rgba(0, 0, 0, 0.15);}
.technology-slide .swiper-slide a img{margin:0 auto; display:block;}
.technology-slide .swiper-slide .managetag{width:198px; height:198px; top:0; right:0; padding:24px 20px; z-index:88; align-items:center; justify-content:center; background-color:#ef5100; position:absolute; display:none;}
.technology-slide .swiper-slide-active .managetag{display:flex; animation:managetag-fadeIn 0.3s linear 0s forwards; animation-delay:0s;}
.technology-slide .swiper-slide .managetag span.mtag{font-weight:700; font-size:24px; text-align:center; color:#fff;}

.technology-pagination{width:585px; margin:-40px auto; z-index:888; position:relative; display:flex; flex-wrap:nowrap; justify-content:end; align-items:center;}
.technology-pagination .swiper-pagination-bullet{width:10px; height:10px; margin:0 30px !important; border:0; border-radius:50%; display:inline-block; background-color:#545454; position:relative;}
.technology-pagination .swiper-pagination-bullet{opacity:1; transition:0.3s;}
.technology-pagination .swiper-pagination-bullet-active{position:relative;}
.technology-pagination .swiper-pagination-bullet-active::before{width:34px; height:34px; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid #545454; position:absolute; content:''; animation:slide-pagination 0.5s linear 0s;}

.technology-option{width:100%; max-width:760px; top:15%; left:50%; transform:translate(-50%,-50%); z-index:900; position:absolute;}
.technology-option .prev,
.technology-option .next{width:70px; height:70px; z-index:80; font-size:30px; border:0; border-radius:50% !important; box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.2);}
.technology-option-area{display:flex; align-items:center; justify-content:space-between;}

@keyframes managetag-fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}

@keyframes slide-pagination {
	0%{opacity:0;}
	100%{opacity:1.0;}
}


@media only all and (max-width:1023px){
	.technology-wrapper{padding-top:50px;}

	.technology-slide-wrapper{height:auto;}
	.technology-slide{width:calc(100% - 80px); top:unset; left:unset; margin:0 auto; position:relative;}
	.technology-slide .swiper-slide{width:calc(100% - 400px); overflow:inherit;}
	.technology-slide .swiper-slide a{width:80%; height:65.5%; overflow:inherit;}
	.technology-slide .swiper-slide img{width:100%; height:100%;}
	.technology-slide .swiper-slide-active{margin-top:0;}
	.technology-slide .swiper-slide .managetag{display:flex;}

	.technology-option{max-width:calc(100% - 15px); top:calc( 50% - 40px );}
	.technology-pagination{width:80%; margin:0 auto; padding-top:50px;}
}

@media only all and (max-width: 767px) {
	.technology-pagination{justify-content:center; align-items:center;}
	.technology-slide .swiper-slide{width:calc(100% - 80px);}
	.technology-slide .swiper-slide a{width:100%;}
	.technology-slide .swiper-slide{transition: all 0.2s ease; position: relative;}
	.technology-slide .swiper-slide .managetag{width: 90px; height: 90px;}
	.technology-slide .swiper-slide .managetag span.mtag{font-size:14px;}

	.technology-option .prev,
	.technology-option .next{width:50px; height:50px; font-size:20px;}

	.technology-pagination .swiper-pagination-bullet{margin:0 10px !important;}
}

@media only all and (max-width: 580px) {
	.technology-pagination .swiper-pagination-bullet-active::before{width:24px; height:24px;}
}