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; }

.t_color {color:var(--main_c);}
  
#container {  width:100%; display:inline-block;  }

header {height:90px;  position:fixed; z-index:99999;width:100%;  display:flex; align-items:center; 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:40px;  display:flex; align-items:center;  justify-content:flex-end;  }
header ul li {font-size:21px; color:#fff;  padding:0 40px; line-height:90px;  font-weight:400;  text-align:center; position:relative}
header.over  {background-color:#fff}
header.over ul li {color:#111}

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:2em}

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:#333; display:inline-block;  font-size:16px;  font-weight:300;  padding:60px 0; box-sizing:border-box; line-height:1.5; color:#fff; margin-top:100px }
  footer div {  padding:0 4%; box-sizing:border-box; width:100%; display:inline-block  }
footer b {font-weight:500; color:#fff}
 

.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:160px}

.vi * {transition: all 0.3s ease;}
 
.tit {text-align:center; margin-bottom:40px; font-size:45px }
.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%);
  }
}

.product .box {position:relative; width:30%; line-height:0; display:inline-block}
.product .box .img {width:100%;   padding-bottom:100%;  display:inline-block; background-color:#333}
.product .box .in_box {width:80%; transition: all 0.3s ease;  display:flex;  background-color:#fff; position:absolute; right:0; bottom:0}
.product .box:hover .in_box  {width:100%}
.product .box .in_box .plus {width:70px; font-size:25px; background-color:var(--main_c); display:flex; align-items:center; justify-content:center; color:#fff}
.product .box .in_box div {display:flex; cursor:pointer;  line-height:1.2; padding:20px 15px; flex-direction:column; justify-content:center}
.product .box .in_box h4 {font-size:25px}

.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 {  display:inline-block; width:100%; }

.long_link ul {display:flex; width:100%; gap:1px; background-color:#fff}
.long_link ul li {width:50%; display:flex; align-items:center;  background-color:var(--main_c);; font-size:23px; font-weight:300; line-height:1;   padding:21px 25px; box-sizing:border-box}
.long_link ul li a {color:#fff; }
 .long_link ul li i {color:#fff; margin-left:auto}

.why {background:url('../img/22825616.jpg') no-repeat center; background-attachment: fixed; background-size:cover;  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:30px;}
.why li {width:20%; display:flex; align-items:center; justify-content:center;  position:relative; font-size:25px; border:1px solid rgba(255,255,255,.2); background: rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); padding:45px 30px; box-sizing:border-box; border-radius:5px; text-align:center; transition: all 0.3s ease;}
.why li span {position:absolute; top:10px; right:15px; font-family: "Montserrat", sans-serif; font-size:22px}
.why li:hover {border:1px solid rgba(255,255,255,.8); }






/* 기본 글자 색(회색) */
  .scroll-letters { 
    font-size:60px;
    font-weight: 700;
    line-height: 1.25;
    white-space: pre-wrap; /* 줄바꿈/공백 유지 */
    word-break: keep-all;
  }
  .scroll-letters .char{
    color: #b6b6b6;
    transition: color .2s linear;
    will-change: color;
  }
  /* 활성(검은색) */
  .scroll-letters .char.on{ color:#111; }

  /* 다크 모드 대비 */
  @media (prefers-color-scheme: dark){
    body{background:#0b0b0b; color:#aaa}
    .scroll-letters .char{ color:#666 }
    .scroll-letters .char.on{ color:#f5f5f5 }
  }

  /* 모션 최소화 환경 배려 */
  @media (prefers-reduced-motion: reduce){
    .scroll-letters .char{ transition:none }
  }



.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.w {color:#fff; border:1px solid #fff}
.custom-btn:hover {gap:20px}

.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:500px; 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}