#main { position: relative; } 
#section1 { overflow: hidden; } 
.msec1 { position: relative; } 
.msec1::before{content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.5); position: absolute; top: 65%; left: 0; z-index: 8;}
.msec1 .swiper-slide { overflow:hidden } 
.msec1 .swiper-slide .slogan { position:absolute; z-index:10; top:50%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); } 
.msec1 .swiper-slide .slogan p { color:#fff; font-weight: bold; text-align: left; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1); } 
.msec1 .swiper-slide .slogan .text1 { top:0; opacity:0; font-size:1.8rem; font-family: var(--font-eng); color:var(--sub_color);  transition:0.5s 0.5s } 
.msec1 .swiper-slide .slogan .text2 { top:10px; opacity:0; filter: blur(10px); font-size:11rem; font-family: var(--font-eng); font-weight: bold; margin-bottom: 3rem; transition:0.5s 1s } 
.msec1 .swiper-slide .slogan .text3 { top:10px; opacity:0; filter: blur(10px); font-size:3rem; margin-left: 88rem; transition:0.5s 1s } 


.msec1 .swiper-slide .bg { transform:scale(1.1); transition:10s; height:96rem; position: relative; } 
.msec1 .swiper-slide .bg::before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; } 
.msec1 .swiper-slide .bg img { width:100%; height: 100%; object-fit: cover; } 

.msec1 .swiper-slide-active .bg { transform:scale(1) } 
.msec1 .swiper-slide-active .slogan .text1 { top:0; opacity:1; letter-spacing:normal; } 
.msec1 .swiper-slide-active .slogan .text2 { top:0; opacity:1; filter:blur(0) } 
.msec1 .swiper-slide-active .slogan .text3 { top:0; opacity:1; filter:blur(0) } 

/*swiper*/
.msec1 .swiper-button-prev,
.msec1 .swiper-button-next { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; color:#fff; background: none; bottom:20rem; top:auto; border:1px solid rgba(255,255,255,0.5); border-radius: 100%; } 

.msec1 .swiper-button-prev { left:0;} 
.msec1 .swiper-button-next { left:7rem; right: auto; } 
.msec1 .swiper-pagination { max-width:var(--container); font-weight: bold; padding:0 2rem; color:#fff; text-align: center; position: absolute; left: 50%; transform: translate(-50%); bottom: 10rem; } 


.slide_btn{position: absolute; left: 50%; transform: translateX(-800px);z-index: 9;}


.msec1 .swiper-progress-bar { position: absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; } 
.msec1 .swiper-progress-bar .slide_progress-bar { position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 15rem; left: 50%; transform: translateX(-50%); right: 0; } 
.msec1 .swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear; } 
.msec1 .swiper-progress-bar.active .slide_progress-bar { opacity: 1; } 
.msec1 .swiper-progress-bar.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; } 


.msec1 .swiper-pagination-bullet { 
 background: transparent; width: 4rem; height: 4rem; 
 } 
 .msec1 .swiper-pagination-bullet-active .path { 
 display: inline-block !important; 
 stroke-dasharray: 1000; 
 stroke-dashoffset: 0; 
 -webkit-animation: dash linear 120s; 
 animation: dash linear 120s; 
 -webkit-animation-iteration-count: unset; 
 animation-iteration-count: unset; 
 } 
 .path { 
 display: none; 
 } 
 @-webkit-keyframes dash { 
 from { 
 stroke-dashoffset: 1000; 
 } 
 to { 
 stroke-dashoffset: 0; 
 } 
 } 
 @keyframes dash { 
 from { 
 stroke-dashoffset: 1000; 
 } 
 to { 
 stroke-dashoffset: 0; 
 } 
 } 

 /* 메인 제품 */
.main_product{padding:10rem 0}
.main_product .inner{display: flex; max-width: 1400px;}
.product_text{width: 50%;}
.product_text dl{margin-bottom: 6rem;}
.product_text dl dt{font-weight: bold; font-size: 5rem; margin-bottom: 6rem;}
.product_text dl dt span{display: block; font-weight: bold; font-family: var(--font-eng); color:var(--sub_color); font-size: 1.8rem; margin-bottom: 4.2rem;}
.product_text dl dd{font-size: 2.2rem; font-weight: bold;}
.product_text dl dd span{color:var(--sub_color)}
.product_text ul{display: flex; gap:1.3rem; margin-bottom: 6rem}
.product_text ul li a{display: flex; align-items: center; justify-content: space-between; gap:1rem; width: 17.2rem; background: var(--sub_color); color:#fff; padding:1rem 2rem; border-radius: 100px; font-size:1.6rem; font-weight: bold;}
.product_text ul li a span{font-size: 2rem;}
.product_text ul li:last-child a{background: #fff; border:1px solid var(--sub_color); color:var(--sub_color)}
 
.product_img{width: 50%; position: relative; overflow: hidden;}
.product_slide .swiper-pagination-bullet{background: #757575; width: 1rem; height: 1rem; transform: scale(1); opacity: 1;}
.product_slide .swiper-pagination-bullet-active{background: var(--sub_color); width: 2.7rem; height: 1rem; border-radius: 1rem;}

 
.flow_text{display:flex;white-space:nowrap;font-size:14rem;font-weight:bold; font-family: var(--font-eng); color:#E6E6E6; overflow:hidden; position: relative;}
.flow_text::before{content: ''; width: 100%; height: 1px; background: #e6e6e6; position: absolute; bottom: 5rem; left: 0;}
.flow_text span{animation: textLoop 50s linear infinite;}

@keyframes textLoop {
0% {
    transform: translate3d(0, 0, 0);
}
100% {
    transform: translate3d(-100%, 0, 0);
}
}

/* 메인 사업분야 */
.main_business{padding:5rem 0 10rem 0; position: relative;}
.main_business .inner{position: relative;}
.main_business h2{font-weight: bold; font-size:5rem; text-align: center; margin-bottom: 7rem;}
.main_business h2 span{display: block; font-size:1.8rem; color:var(--sub_color); font-family: var(--font-eng); margin-bottom: 4.2rem;}

.business_slide{padding-bottom:9.2rem ;}
.business_slide .swiper-slide{position: relative; height: 46.3rem !important; overflow: hidden;}
.business_slide .swiper-slide::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; border-radius: 2rem; z-index: 1;}
.business_slide .swiper-slide img{position: relative; overflow: hidden; border-radius: 2rem; width: 100%; height: 100%; object-fit: cover;}
.business_slide dl{position: absolute; top:4rem; left:4rem; font-weight: bold; color:#fff; z-index: 8;}
.business_slide dl dt{font-size: 3.2rem; margin-bottom: 3rem;}
.business_slide dl dd{font-size: 2.2rem; font-weight: 400; display: none;}

.business_slide .swiper-slide-active{width: 67.8rem !important;}
.business_slide .swiper-slide-active dl dd{display: block;}

.business_slide .swiper-pagination-progressbar{top: auto; bottom: 0; z-index: 8;}
.business_slide .swiper-pagination-progressbar-fill{background: var(--sub_color);}

/* 메인 why */
.main_why{background: url(../images/main/why_bg.jpg) no-repeat center; padding:13rem 0; position: relative;}
.main_why::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; top: 0; left: 0;}
.main_why h2{font-weight: bold; font-size: 5rem; color:#fff; position: relative; margin-bottom: 6rem;}
.main_why h2 span{display: block; font-size: 1.8rem; color:var(--sub_color); font-family: var(--font-eng); margin-bottom: 4.2rem;}
.main_why ul{display: flex; gap:5rem; color:#fff; position: relative; height: 45.7rem;}
.main_why ul li{flex:1; backdrop-filter: blur(30px); background: rgba(255,255,255,0.1); padding:3.8rem; border-radius: 2rem; overflow: hidden; }
.main_why ul li dl dt{font-size: 2.4rem; font-weight: 600;}
.main_why ul li dl dt span{display: block; font-size: 1.6rem; font-weight: bold; color:var(--sub_color); font-family: var(--font-eng); margin-bottom: 1.6rem;}
.main_why ul li p{position: absolute; bottom: 4rem; right: 4rem;}

/* 메인 실적 */
.main_performance{padding: 10rem 0; position: relative;}
.main_performance::before{content: ''; width: 100%; height: 1px; background: #E6E6E6; position: absolute; top: 25rem; left: 0;}
.main_performance h2{font-weight: bold; font-size: 5rem; position: relative; margin-bottom: 5.8rem;}
.main_performance h2::before{content: 'Easy Robot'; font-family: var(--font-eng); font-size:14rem; color:#E6E6E6; position: absolute; bottom: -3.5rem; right: 0;}
.main_performance h2 span{display: block; font-family: var(--font-eng); color:var(--sub_color); font-weight: bold; font-size: 1.8rem;}

.performance_con{display: flex; gap:5rem}
.performance_list{flex:3}
.performance_list ul{display: flex; gap:5rem}
.performance_list ul li{flex:1}
.performance_list ul li p{overflow: hidden; height: 20.2rem;  border-radius: 2rem; margin-bottom: 3rem;}
.performance_list ul li p img{width: 100%;  height: 100%; object-fit: cover; transition: .5s;}
.performance_list ul li p img:hover{transform: scale(1.2);}
.performance_list ul li span{display: block; font-size: 2.2rem;}

.inquiry_box{flex:1; overflow: hidden; }
.inquiry_box a{display: block; height: 20.2rem; background: var(--sub_color); color:#fff;border-radius: 2rem;padding: 3rem 3.5rem; position: relative; }
.inquiry_box a dl dt{font-family: var(--font-eng); font-weight: bold; font-size: 1.6rem;}
.inquiry_box a dl dd{font-size: 2.4rem;}
.inquiry_box a p{position: absolute; bottom: 3rem; right: 3rem;}
