.main_con {width:100%;  margin:0 auto;  overflow-x:hidden;  font-size:16.5px;  font-weight:300; line-height:1.4}
.main_con .in {  max-width:1400px;}


hr {height:100px}
h3 {font-size:2.5em}
 
@media all and (max-width:1400px) {
	.main_con .in  {padding:0 5%; box-sizing:border-box  }

}

@media all and (max-width:900px) {
  		.main_con {font-size:15px}
  		h3 {font-size:2em}


}

 
 
.main_t {position:absolute; text-shadow:2px 2px 10px rgba(0,0,0,.3);  bottom:30%; left:100px; color:#fff; font-size:70px; z-index:99}
.main_t span {font-size:25px; font-weight:300;}
.main_t b {font-weight:600}

.tit {text-align:center; margin-bottom:30px }
.tit  + p {color:#555; margin-top:8px}


.swiper-container + hr {height:150px}
 

@media all and (max-width:900px) {
 	.main_t {font-size:30px; left:4%; }
 

}

.m_vi {position:Relative}
.m_vi iframe {height:100vh}


.main_about {margin-top:100px}
.main_about .in.flex {gap:100px}
.main_about .in.flex .left {width:400px}
.main_about .in.flex .left  h3 {font-size:3em;  white-space:nowrap}
.main_about .in.flex .right .img {width:100%; height:350px; background:url('/common/img/vi4.jpg') no-repeat center; opacity:1; background-size:cover}
.main_about .in.flex .right .r { background-color:#fff; padding:20px 0; box-sizing:border-box; position:relative; z-index:9}
.main_about .in.flex .right .r h4 {font-size:2.5em; font-weight:600; line-height:1.2}
.main_about .in.flex .right .t1 {font-weight:600; font-size:1.3em}

@media all and (max-width:900px) {
	.main_about hr {height:100px}
	.main_about .in.flex {gap:30px}
	.main_about .in.flex .right .r h4  {font-size:1.7em}
	.main_about .in.flex .left  h3 {font-size:2em;  }
	.main_about .in.flex .right .t1 { font-size:1.2em}

}
.main_product {margin-top:100px}
.main_product .in.flex {gap:50px}
.main_product .box_wrap {  gap:30px;  flex-wrap:wrap}
.main_product .box  {width:calc(33% - 16px); position:Relative;  padding:0; padding-bottom:33%; background-color:#333; overflow:hidden}
.main_product * {transition: all 0.3s ease-out;}
.main_product .box img {width:100%}
.main_product .box div {position:absolute; width:100%; height:100%; padding:50px;   box-sizing:border-box;  top:0; left:0; color:#fff; height:100%; display:flex; flex-direction:column; justify-content:center; text-align:center}
.main_product .box div h5 {font-size:1.6em; font-weight:500; letter-spacing:0; position:relative; z-index:9}
.main_product .box div p {height:0;  opacity:0; margin-top:20px;  overflow:hidden;   position:relative; z-index:9; font-size:.95em; line-height:1.5; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; word-wrap: break-word; overflow:hidden }
.main_product .box:hover div {background:rgba(0,0,0,.5); }
.main_product .box:hover div p {opacity:1; height:auto;  }
 
.main_product .box  div:after {background:rgba(0,0,0,.2); width:100%; height:100%; position:absolute; left:0; top:0; content:''}




@media all and (max-width:900px) {

  .main_product .box  {width:100%; padding-bottom:100%}
  .main_product .box div h5 {font-size:1.3em; font-weight:600}

}


.main_why { margin-top:100px; background-size:cover;  overflow:hidden; color:#fff; padding:150px 0; position:relative}
.main_why .in {position:relative; z-index:9}
.main_why ul {gap:50px;}
.main_why li {width:20%; font-size:22px; border:1px solid rgba(255,255,255,.5); padding:30px 20px; box-sizing:border-box; border-radius:5px; text-align:center; display:flex; flex-direction:column;  align-items:center; justify-content:center}
.main_why li  i {margin-bottom:10px; font-size:32px}
.main_why video {width:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }

@media all and (max-width:900px) {
	.main_why {padding:100px 0; background:url('/common/img/main_why_bg.png') no-repeat; background-size:cover}
	.main_why video {display:none}
	.main_why ul {gap:10px}
	.main_why li {width:calc(50% - 10px); font-size:16px}
 
}

.logo_list {margin-top:100px}
 .logo-track {
 
  display: flex;
  width: calc(100%); /* 두 번 반복된 로고 슬라이드 */
  animation: scroll-left 20s linear infinite;
}

.logo-slide {
  display: flex;
  gap: 40px;
   

}
.logo-slide p {  box-sizing:border-box; padding:20px; width:250px; height:100px;  display:flex; align-items:Center; justify-content:center}
.logo-slide img {
max-width:90%; 
max-height:90%; 
   object-fit: contain;
   transition: all 0.3s ease;
}

 

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}



  
 @media all and (max-width:900px) {
	.logo-slide {gap:20px}
	.logo-slide p { width:200px; height:80px}

 
}