* { font-family: "Montserrat", sans-serif;}
body {height:100%; min-width:1400px}
html {height:100%}

 
.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }

#wrap {height:100%; position:relative; width:100%; min-width:1400px;  display:inline-block; }
.sian_tab {min-width:1400px; }

   
#container {  width:100%; display:inline-block;  }

header {height:90px;  position:fixed; z-index:99999;width:100%;  display:flex; align-items:center; background-color:#fff; transition: all 0.3s ease-out;}
header * { transition: all 0.3s ease-out; }
header .flex.in {align-items:center;  box-sizing:border-box; padding:0 3.5%; max-width:100%; justify-content:space-between }
header ul {width:1300px; margin-right:50px;  display:flex; align-items:center;  justify-content:flex-end;  }
header ul li {font-size:18px; padding:0 40px; line-height:90px;  font-weight:500;  text-align:center; position:relative}
header ul li:last-child {padding-right:5px}
header ul li:after {content:' '; width:3px; height:3px; background-color:#555;  position:absolute; right:0; top:50%;   transform:translateY(-50%);
  }
header ul li:last-child:after {display:none}


header ul > li > ul { display:none;  width:200px; background-color:#fff;  position:absolute; left:50%; transform: translate(-50%, 0);   padding:15px 0 }
header ul > li > ul > li {width:100%; padding:5px 5px; line-height:1;  box-sizing:border-box; white-space:nowrap; }
header ul > li > ul > li > a{display:inline-block;width:100%; font-size:16px; font-weight:400; color:#333}
header ul > li > ul > li:hover a {color:var(--main_c); text-decoration:underline} 
header ul > li > ul > li:after {display:none}

header h1 img:nth-child(1) {display:block}
header h1 img:nth-child(2) {display:none}


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

hr {height:100px}
h3 {font-size:2.5em}

section {position:Relative}

.arrow { position: absolute;   }
.arrow::after {
	position: absolute;
    right:0; 
	top: 30%;
	content: '';
	width: 35%;  
	height: 35%; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
		transform: rotate( 45deg );

} 
.arrow::before {
  content:'';
  width:80%;
  height:2px;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  background:#fff
}

 
footer {width:100%; background-color:#fff; display:inline-block;  font-size:16px;  font-weight:300;  padding:43px 0 50px 0; box-sizing:border-box; line-height:1.5em;  border-top:1px solid #ddd;  color:#444 }
  footer div {  padding:0 4%; box-sizing:border-box; width:100%; display:inline-block  }
footer b {font-weight:500; color:#222}
.up_btn {width:60px; height:60px; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 10px rgba(0,0,0,.15);  border-radius:50%;  position:fixed; right:25px; bottom:70px; background-color:#fff; z-index:9999999999}



a.basic_btn {background-color:#0d2997;   font-size:1rem; box-sizing:border-box; padding:0 20px; width:150px; line-height:40px; color:#fff; border-radius:5px; display:flex; transition: all 0.3s ease-out; }
a.basic_btn:after {content:'→'; margin-left:auto}
a.basic_btn:hover {background-color:#1739c1} 
a.basic_btn + a.basic_btn {margin-left:5px}

section + section {margin-top:120px}

.vi * {transition: all 0.3s ease;}
 

.swiper-container {width:100%; height:100vh !important; min-height:100vh !important;  position:relative; }
.slider {min-height:50vh;}
.swiper-slide {
	 overflow:hidden; position:relative; height:100%;
	display:flex; justify-content:center; align-items:center; text-align:center; font-size:18px;
}
.slide-inner {position:absolute; width:100%; height:100vh; left:0; top:0;}
.slide-inner img {position:absolute; width:100%; left:0; top:0; bottom:0; margin:auto;}
.swiper-pagination-bullet {background-color:transparent; width:10px; height:10px}
.swiper-pagination {
	display:flex; flex-direction:column; align-items:center; 
	width:50px; position:absolute; z-index:3; right:10px;

}
.swiper-pagination span {
 color:#000; display:flex; opacity:1; gap:20px; width:10px; height:10px; font-size:0; align-items:center; border:1px solid #fff
}
.swiper-pagination span.swiper-pagination-bullet-active {background-color:#fff}

 


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

 .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%);
  }
}



.logo_list ul {display:flex;  flex-wrap:wrap; border:1px solid #ddd; border-top:none; border-right:none; box-sizing:border-box; }
.logo_list ul li {width:20%; border-top:1px solid #ddd;  border-right:1px solid #ddd; box-sizing:border-box;  height:90px; display:flex; align-items:Center; justify-content:center }
.logo_list ul li img {max-width:80%; max-height:80%; }
 
.long_link {background:url('../img/22741096.jpg') no-repeat; background-size:cover; display:inline-block; width:100%; }

.long_link a {width:50%; text-align:center; color:#fff; transition: all 0.3s ease; padding:100px 0}
.long_link a:hover {width:70%}



.custom-btn {
  display: inline-flex;
  align-items: center;
  gap:10px;
  padding: 10px 20px;
  font-size: 1em;
  color: #333;
  background-color: transparent;
  border: 1px solid #333;
  
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-btn:hover {gap:20px}


.why {/* background:url('../img/22825616.jpg') no-repeat center;  */ background-size:cover;  overflow:hidden; color:#fff; padding:150px 0; position:relative}
/* .why:after {content:''; width:100%; height:100%; background:rgba(0,0,0,.5); position:absolute; left:0; top:0}
 */.why .in {position:relative; z-index:9}
.why ul {gap:50px;}
.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}
.why li  i {margin-bottom:10px; font-size:32px}


 


.product ul.flex {width:100%; gap:20px}
.product .box  {width:100%;  position:Relative; height:420px;   padding:0; background-color:#333; overflow:hidden}
.product * {transition: all 0.3s ease-out;}
.product .box  img {width:100%}
.product .box  div {position:absolute; width:100%; padding:60px 40px  30px 40px; box-sizing:border-box;  top:0; left:0; color:#fff; height:100%; display:flex; flex-direction:column; justify-content:flex-end}
.product .box span { position:relative; z-index:9; letter-spacing:0; font-size:1.3em; font-weight:500}
.product .box h5 {font-size:1.6em; font-weight:500; letter-spacing:0; position:relative; z-index:9}
.product .box  div p {height:0;  opacity:0; margin-top:20px;  overflow:hidden;   position:relative; z-index:9}
.product .box:hover div p {opacity:1; height:100px}
.product .box:hover div {background:rgba(0,0,0,.5); }
.product .box:hover > p {  filter: blur(5px);
    -webkit-filter: blur(5px);}
.product .box  div:after {background:rgba(0,0,0,.2); width:100%; height:100%; position:absolute; left:0; top:0; content:''}



.sub_con {width:100%;  padding-bottom:100px; margin:0 auto; min-width:1300px;  font-size:16.5px;  font-weight:300; line-height:1.4 }
.sub_con .vi {position:relative; width:100%; height:700px; border-radius:0 0 50px 50px; overflow:hidden;  background:url('/3sglobal/img/21918191 (3).jpg') no-repeat center; background-size:cover;}
.sub_con .vi:after {content:''; position:absolute; left:0; top:0; background:rgba(0,0,0,.5); width:100%; height:100%;}
.sub_con .vi .text {position:absolute; z-index:9; width:100%; display:flex; flex-direction:column; align-items:center; height:100%;  justify-content:center;}


 aside {width:100%;background: rgba(255, 255, 255, 1); border-bottom:1px solid #ddd;  position:relative; z-index:99;  }
 aside ul {width:100%; display:flex; justify-content:center;  }
 aside ul li { font-size:1.15em;  padding:18px 0;  margin:0 20px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
 aside ul li a {color:#222}
 aside ul li.ov {border-bottom:4px solid var(--main_c);}
 aside ul li.ov * {color:var(--main_c); font-weight:500}