@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');
/* ******************  메인 비주얼 ********************** */
#mainVisual{ width:100%; height:750px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual::after{content: ""; display: block; width: 1px; height:  50px; background-color: #000;position: absolute; left: 50%; bottom: -90px; transform: translateX(-50%);}
#mainVisual.full-height,
#fullpage #mainVisual{height:750px;}

.main-slider-wrapper {position: relative;width: 100%;height: 100%;}
.main-slider-item {overflow: hidden;position: relative;}
.main-slider-item .slide-inner {position: absolute;width: 100%;height: 100%;left: 0;top: 0;}

/* 메인 비주얼 :: 이미지 */
.main-visual-img-con, .main-visual-img-con-m{position:relative; height:100%; width:100%; background-size:cover; background-repeat:no-repeat; background-position:70% 30%;}
.slider-item1 .main-visual-img-con{ background-image:url(../img/main_visual_03.png);}
.slider-item2 .main-visual-img-con{ background-image:url(../img/main_visual_02.png);}
.slider-item3 .main-visual-img-con{ background-image:url(../img/main_visual_01.png);}

.main-visual-img-con-m img{ width:100%;}
.main-visual-prd-item{position:absolute; bottom:0px; left:0px; width:21.56%}
.main-visual-prd-item.right{left:auto; right:0; text-align:right;}
.main-visual-prd-item img{max-width:100%;}
.main-visual-img-con-m{display:none;}


/* 메인 비주얼 :: 텍스트 */
#mainVisual .main-visual-txt-con{position:absolute; top:20%; left:13%; width:100%; z-index:1000}
#mainVisual .main-visual-txt-con .main-visual-txt1{display:block; font-size:110px; font-weight:800; color:#fff;  text-shadow: 0 3px 8px rgba(0,0,0,.4); font-family: 'Teko', sans-serif; letter-spacing: 2px; position: relative;}
#mainVisual .main-visual-txt-con .main-visual-txt1::after{content: ""; display: block; width: 80px; height: 1px; position: absolute; left: 0; bottom: 20px; background-color: #fff;}
#mainVisual .main-visual-txt-con .main-visual-txt1 .blue{color: #004fad;}
#mainVisual .main-visual-txt-con .main-visual-txt2{font-size:32px; letter-spacing:-0.75px;  color:#fff; font-weight: 300;line-height: 1.3; font-family: 'Cairo', sans-serif; text-shadow: 0 3px 8px rgba(0,0,0,.4);}
#mainVisual .main-visual-txt-con .main-visual-txt2 b { font-size: 32px; margin-bottom:15px; }

#mainVisual .main-visual-txt-con .main-visual-txt3{font-size:24px; line-height:1.85em; letter-spacing:-0.25px; color:#222; font-family: 'Noto Sans KR', sans-serif; font-weight: normal; margin-top: 30px;} 

/* 메인비주얼 페이지네이션 */
#mainVisual .swiper-pagination {bottom: 30%; text-align: left; left: 13%;}
#mainVisual .swiper-pagination-bullet {width: 150px; height: 3px; border-radius: 0; display: inline-block; margin: 3px; background: #fff; opacity: 1;}
#mainVisual .swiper-pagination-bullet-active {background: #004fad;}
#mainVisual .swiper-container-vertical > .swiper-pagination-bullets {left: 0; bottom:0}
/* 메인 비주얼 :: 컨트롤 */
.main-visual-control-box{position:absolute; bottom:0; left:0; right:0; z-index:11; margin-bottom:4.5%}

/* Arrow */
.main-visual-arrow{display:inline-block}
.main-visual-arrow > div{position:relative; right:0; left:0; display:inline-block; height:10px; margin:0; border:0; outline:0}
.main-visual-arrow .swiper-button-prev{margin-left:40px}
.main-visual-arrow .swiper-button-prev:after, .main-visual-arrow .swiper-button-next:after{content:""; width:21px; height:10px; background:url("../../img/main_arrow_icon.png"); display:inline-block; background-size:cover !important}
.main-visual-arrow .swiper-button-prev:after{transform:rotate(180deg)}
.main-visual-arrow .swiper-button-prev:before{position:absolute; display:inline-block; content:""; width:1px; height:11px; background:rgba(255,255,255,0.5); left:-23px; top:0}

/* bar */
.main-visual-num{position:relative; font-size:0; display:inline-block; width:245px; margin-left:30px; bottom:4px}
.main-visual-num .main-visual-conuter span{position:absolute; display:inline-block; font-size:14px; font-weight:400; color:#fff; padding-left:8px; top:0}
.main-visual-num .main-visual-conuter span.cur-num{left:0}
.main-visual-num .main-visual-conuter span.total-num{right:0}
.main-visual-loading-bar{width:186px; height:3px; display:inline-block; background:rgba(255,255,255,0.3); margin:6px 0 0 33px}
.main-visual-loading-bar span{display:block; width:0; height:3px; background-color: #fff}

/* 메인 비주얼 :: active효과 */
.main-visual-txt-con .main-visual-txt2 > span,  .main-visual-txt-con .main-visual-txt3 span{opacity:0;filter:Alpha(opacity=0); transition:all 0.4s; transition-delay:1s }

.main-slider-item.swiper-slide-active .main-visual-txt-con .title-line span{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2 > span, .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt3 span{opacity:1;filter:Alpha(opacity=100); }
.main-slider-item.swiper-slide-active .main-more-btn{-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;-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
@keyframes text-up {
  from {
    transform: translate3d(0, 150%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@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);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-6.5px; text-align:center; z-index:9}	/* width값에 맞게 margin-left수정 */
.main-scroll-icon span{display:block; text-align:center;}


.main_inner{max-width: 1700px; margin: 0 auto; }
.main_tit_top{font-family: 'Cairo', sans-serif; color: var(--main-color); font-size: 18px; text-align: center; font-weight: 800;}
.main_tit{font-family: 'Noto Sans KR', sans-serif; font-size: 32px; text-align: center;font-weight: 800; letter-spacing: -1px;}

/*메인제품*/
.main_sec2{height: 700px; margin-top: 150px;}
.section2{margin-top: 50px;}

.section2 .swiper-wrapper .swiper-slide .section2_slide a{display: block; border: 1px solid #ddd; transition: all .3s;}
.section2 .swiper-wrapper .swiper-slide .section2_slide .img_wrap{}
.section2 .swiper-wrapper .swiper-slide .section2_slide .img_wrap img{width: 100%;}
.section2 .swiper-wrapper .swiper-slide .section2_slide  h2{font-size: 20px; text-align: center; margin-top: 30px; font-weight: 500;}

.section2_btn .main_section2_control{ position: relative;bottom:-70px; left: 50%; transform: translateX(-50%);z-index: 10; width: 50%;}
.section2_btn .main_section2_control div{color: #000; --swiper-navigation-size:20px; }
.section2_btn .main_section2_control .swiper-pagination-bullet{background-color: #d7d7d7; width: 5px; height: 5px; opacity: 1; position: relative; z-index: 10;}
.section2_btn .main_section2_control .swiper-pagination-bullet-active{ background-color: var(--main-color);}
.section2_btn .main_section2_control .swiper-pagination-bullet-active::before{border: 6px solid #f5f5f5; content: ""; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: -7px;left: -7px; z-index: -10;}
.section2_btn .main_section2_control .swiper-pagination{display: flex; justify-content: space-around; width:50% !important; left: 50% !important; transform: translateX(-50%);}

.section2 .swiper-wrapper .swiper-slide .section2_slide:hover a{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border: 1px solid var(--main-color);}
.section2 .swiper-wrapper .swiper-slide .section2_slide:hover h2{color: var(--main-color);}



/*메인 about*/
.main_sec3{background: url(../img/main_sec3_bg.png) no-repeat; width: 100%; height: 890px; background-size: cover; position: relative;}
.main_sec3::before{content: ""; width: 1px; height: 150px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #000;}
.main_sec3 .main_inner{display: flex; justify-content: flex-end; height: 100%; align-items: center;}
.main_sec3 .main_sec3_wrap{width: 50%;}
.main_sec3 .main_sec3_wrap .main_tit_top{text-align: left;}
.main_sec3 .main_sec3_wrap h2{  font-size: 44px;font-weight: 400; margin: 30px 0;}
.main_sec3 .main_sec3_wrap h2 span{  color: var(--main-color); display: block; font-weight: 700;}
.main_sec3 .main_sec3_wrap .main3_txt{  }
.main_sec3 .main_sec3_wrap .main3_txt p{ font-size: 20px; line-height: 1.5;}
.main_sec3 .main_sec3_wrap .main3_txt p i{display: block;}
.main_sec3 .main_sec3_wrap .about_btn{ border: 1px solid #000; margin-top: 50px;display: flex; width: 220px; height: 50px; justify-content: space-around; border-radius: 25px; align-items: center; transition: all .3s;}
.main_sec3 .main_sec3_wrap .about_btn span{font-size: 15px;}
.main_sec3 .main_sec3_wrap .about_btn i{font-size: 15px; transition: all .3s;}
.main_sec3 .main_sec3_wrap .about_btn:hover{background-color: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border: none;}
.main_sec3 .main_sec3_wrap .about_btn:hover i{transform: translateX(10px);}

/*메인견적문의*/
.main_sec4{}
.main_sec4 .main_sec4_wrap{display: flex;  }
.main_sec4 .main_sec4_wrap li{width: 50%; display: flex; align-items: center;}
.main_sec4 .main_sec4_wrap .catalog{background: url(../img/main_sec4_img1.png) no-repeat;width: 100%; height:400px;}
.main_sec4 .main_sec4_wrap .inquiry{background: url(../img/main_sec4_img2.png) no-repeat;width: 100%; height:400px;}
.main_sec4 .main_sec4_wrap li div{width: 60%; margin: 0 auto;}
.main_sec4 .main_sec4_wrap li div h2{font-size: 28px; color: #fff;}
.main_sec4 .main_sec4_wrap li div p{font-size: 17px; margin:30px 0; color: #fff;}
.main_sec4 .main_sec4_wrap li div p i{display: block;}
.main_sec4 .main_sec4_wrap li div .more_btn{display: flex; justify-content: space-around;width: 170px; height: 45px;  border: 1px solid #fff; transition: all .3s; align-items: center;}
.main_sec4 .main_sec4_wrap li div .more_btn span{font-family: 'Noto Sans KR', sans-serif; color: #fff; font-size: 15px;}
.main_sec4 .main_sec4_wrap li div .more_btn i{color: #fff; font-size: 15px; transition: all .3s;}
.main_sec4 .main_sec4_wrap li div .more_btn:hover{background-color: #000; border: none; }
.main_sec4 .main_sec4_wrap li div .more_btn:hover i{transform: translateX(10px);}




/************************반응형*********************************/

@media all and (max-width:1540px){
  /*메인비주얼*/
  #mainVisual .main-visual-txt-con{top: 13%; left: 4%;}
  #mainVisual .main-visual-txt-con .main-visual-txt1{font-size: 90px;}
  #mainVisual .main-visual-txt-con .main-visual-txt1::after{bottom: 0;}
  #mainVisual .swiper-pagination{left: 4%; bottom: 35%;}
  #mainVisual .main-visual-txt-con .main-visual-txt2{margin-top: 30px;}

  .main_inner{width: 95%;}
  
    
}
@media all and (max-width:1380px){
	/*메인비주얼*/
	#mainVisual .main-visual-txt-con{ top: 11%;}
	#mainVisual .main-visual-txt-con .main-visual-txt1{font-size: 80px;}
	#mainVisual .swiper-pagination{bottom: 40%;}
    
}
@media all and (max-width:1280px){
	/*메인비주얼*/
	#mainVisual .main-visual-txt-con{top: 14%;}
	#mainVisual .main-visual-txt-con .main-visual-txt1{font-size: 60px;}
	#mainVisual .main-visual-txt-con .main-visual-txt2{font-size: 28px;}
	#mainVisual .main-visual-txt-con .main-visual-txt3{font-size: 22px;}
	#mainVisual .swiper-pagination{bottom: 40%;}
	#mainVisual .swiper-pagination-bullet{width: 80px;}

	/*section2*/
	.section2_btn .main_section2_control .swiper-pagination-bullet-active::before{display: none;}
	.section2_btn .main_section2_control{width: 80%;}

	/*section3*/
	.main_sec3{background-position: 30%;}
	.main_sec3::before{top: -40px;}
    .main_sec3 .main_sec3_wrap h2{font-size: 40px;}
}
@media all and (max-width:1024px){
	/*메인비주얼*/
	#mainVisual.full-height, #fullpage #mainVisual{height: 700px;}
	#mainVisual::after{height: 50px; bottom: -80px;}
	.main-visual-img-con, .main-visual-img-con-m{background-position: inherit; background-size: cover;}
	.slider-item1 .main-visual-img-con{ background-image:url(../img/main_visual_03_m.png);}
	.slider-item2 .main-visual-img-con{ background-image:url(../img/main_visual_02_m.png);}
	.slider-item3 .main-visual-img-con{ background-image:url(../img/main_visual_01_m.png);}

	#mainVisual .main-visual-txt-con{top: 50%; transform: translateY(-50%);}
	#mainVisual .swiper-pagination{bottom: 50px;}
	#mainVisual .main-visual-txt-con .main-visual-txt1{font-size: 50px;}
	#mainVisual .main-visual-txt-con .main-visual-txt2{font-size: 26px;}
	#mainVisual .main-visual-txt-con .main-visual-txt3{font-size: 20px; margin-top: 15px;}


	/*section2*/
	.main_tit{font-size: 26px;}
	.main_sec2{margin-top: 100px; height: 600px;}
	.section2 .swiper-wrapper .swiper-slide .section2_slide h2{font-size: 18px; margin-top: 20px;}

	/*section3*/
	.main_sec3::before{height: 50px; top: 30px;}
	.main_sec4 .main_sec4_wrap li div{width: 80%;}
    .main_sec4 .main_sec4_wrap li div h2{font-size: 26px;}
	.main_sec4 .main_sec4_wrap li div .more_btn{width: 200px;}

}
@media all and (max-width:800px){
	/*메인비주얼*/
	.main-visual-img-con, .main-visual-img-con-m{background-position: right;}
	#mainVisual .main-visual-txt-con .main-visual-txt1{font-size: 45px;}
	#mainVisual .main-visual-txt-con .main-visual-txt2{font-size: 24px;}
	#mainVisual .main-visual-txt-con .main-visual-txt3{font-size: 18px; }
    #mainVisual .swiper-pagination-bullet{width: 50px;}

	/*section2*/
	.main_tit_top{font-size: 16px;}
	.main_tit{font-size: 24px;}
	.section2_btn .main_section2_control{width: 100%;}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 10px !important;}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next{left:10px !important;}

	/*section3*/
	.main_sec3{background-position: 80%; height: 600px;}

	.main_sec3 .main_sec3_wrap{width: 100%;}
	.main_sec3 .main_sec3_wrap h2{font-size: 32px; margin: 20px 0;}
	.main_sec3 .main_sec3_wrap .main3_txt p{font-size: 18px;}
	.main_sec3 .main_sec3_wrap .about_btn{margin-top: 30px;}
	.main_sec4 .main_sec4_wrap{flex-direction: column;}
	.main_sec4 .main_sec4_wrap .catalog{height: 250px;}
	.main_sec4 .main_sec4_wrap .inquiry{height: 250px;}

}
@media all and (max-width:500px){
	/*메인비주얼*/
	#mainVisual.full-height, #fullpage #mainVisual{height: 550px;}
	.main-visual-img-con, .main-visual-img-con-m{background-position: 45%;}
	#mainVisual .main-visual-txt-con{ }
	#mainVisual .main-visual-txt-con .main-visual-txt1{font-size: 36px;}
	#mainVisual .main-visual-txt-con .main-visual-txt2{font-size: 20px; line-height: 1.5;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 b{font-size: 22px;}
	#mainVisual .main-visual-txt-con .main-visual-txt3{font-size: 16px;}

	/*section2*/
	.main_sec2{height: 460px;}
	.main_tit_top{font-size: 15px;}
	.main_tit{font-size: 20px;}
	.section2 .swiper-wrapper .swiper-slide .section2_slide h2{font-size: 16px;}

	/*section3*/
	
	.main_sec3 .main_sec3_wrap h2{font-size: 24px;}
	.main_sec3 .main_sec3_wrap .main3_txt p{font-size: 16px;}
	.main_sec3 .main_sec3_wrap .main3_txt p i{display: inline;}
	.main_sec3 .main_sec3_wrap .about_btn{width: 250px;}

	.main_sec4 .main_sec4_wrap li div{width: 90%;}
	.main_sec4 .main_sec4_wrap li div h2{font-size: 22px;}
	.main_sec4 .main_sec4_wrap li div p{font-size: 16px; margin: 20px 0;}
}
@media all and (max-width:400px){
	.main_sec2{height: 400px;}
	.main_sec3{margin-top: 30px;}
}