@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 
* { 
		font-family: "Roboto",'SUIT', sans-serif;
		word-break: keep-all;
		letter-spacing:-.5px;
}
 
  
body {height:100%; min-width:1300px}
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:1300px;  display:inline-block; }
.sian_tab {min-width:1300px; }

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

header {height:90px; border-bottom:1px solid rgba(255,255,255,.5); position:Relative;  z-index:99; display:flex; align-items:center;   transition: all 0.3s ease-out;}
header * { transition: all 0.3s ease-out;  line-height:1}
header .flex.in {align-items:center;  }
header ul {width:900px; margin-right:50px;  display:flex; align-items:center;  justify-content:flex-end; margin-left:auto;   }
header ul li {font-size:20px; height:90px; display:flex; align-items:center;  justify-content:center;  color:#fff;  width:16.66666%; font-weight:600;  position:relative}
header ul li a {}
header ul li:last-child {padding-right:5px}
header ul > li:after {content:' '; width:3px; height:3px; background-color:#fff;  position:absolute; right:0; top:50%;   transform:translateY(-50%);
  }
header ul li:last-child:after {display:none}
header ul li ul {
  position: absolute;
  left: 0;
  top:90px;
  width: 100%;
  background-color: #fff;
  padding:20px 0; 
  z-index: 99;
  flex-direction:column; 

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

header ul li:hover ul {
  max-height: 500px; /* 충분히 큰 값 */
  opacity: 1;
}  
header ul li ul li {font-size:17px; color:#000; height:auto; font-weight:400; width:100%; padding:7px 0}
header ul li ul li a {width:100%; text-align:center; font-size:16px }
header ul li ul li a:hover {text-decoration:underline }

header ul li ul li:after {display:none }
header div.lang a {display:flex; align-items:center; gap:6px; }

.main_con {width:100%;   margin:0 auto; min-width:1300px;  font-size:17px;  line-height:1.4;  font-weight:300}
.in {width:100%; margin:0 auto;  min-width:1300px;  max-width:1300px;  }
.flex {display:flex}

hr {height:80px;  box-sizing:border-box}
h3 {font-size:2em; line-height:1}
section {}

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

 

.fixed_q.over { opacity:1; right:1%}   
.fixed_q { position:fixed; right:-200px;  bottom:170px;     opacity:0; transition: all 0.6s ease-out; }
 .fixed_q a    {margin:10px 0;  z-index:9999; border:2px solid var(--main_c); color:var(--main_c); width:80px; height:80px;  display:flex; flex-direction:column;  justify-content: center;  align-items: center; border-radius:10px; text-align:center;  transition: all 0.1s ease-out;  }
 .fixed_q a div { font-size:17px; font-weight:500;  line-height:1.2; }
 .fixed_q.over { opacity:1}   




footer {width:100%; background-color:#fff; display:inline-block;  font-size:16px;  font-weight:400;  padding:43px 0 50px 0; box-sizing:border-box; line-height:1.5em;   color:#444 }
footer h2 {margin-bottom:10px; font-size:1.2em;  }
footer .top_link {width:60px;  line-height:60px; background-color:#ffa00b; text-align:Center; font-size:1rem; display:inline-block; color:#fff; margin-right:4%;  float:right; }
footer div {  padding:0 4%; box-sizing:border-box; width:100%; display:inline-block  }
footer b {color:#000; font-weight:700}
@media all and (max-width:900px) {
		footer {line-height:1.4em; padding-right:0}
		footer .top_link {margin-right:0}
		footer h2 {margin-bottom:10px; font-size:1.2em}

}


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

.vi {margin-top:-90px; }
.vi .in {position:Absolute; position:absolute; left:50%; top:50%;transform: translate(-50%, -50%);  color:#fff; }
.vi .in h3 {font-size:3em; margin-bottom:10px; text-shadow:2px 2px 10px rgba(0,0,0,.3)}
.vi .in  .flex {gap:20px; margin-top:20px}
.vi .in  a {color:#fff;    background: rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); padding:15px 60px; display:inline-block; font-size:20px; font-weight:400}
.vi .in  a:hover {background-color:#fff; color:#000; border-radius:50px}  
 .tit {font-weight:800}
 


.about ul.flex {width:100%; border-left:1px solid #fff }
.about ul.flex li {width:100%; border-right:1px solid #fff; font-size:19px; padding:50px 0 ;  text-align:Center;}
.about ul.flex li b {font-size:1.7em; line-height:1;  font-weight:600;  margin-top:10px; display:flex; gap:3px; justify-content:center;   align-items:center}
.about ul.flex li b span {font-size:1.5em; font-weight:800; letter-spacing:-2px}



.business ul.flex {width:100%; gap:20px}
.business .swiper-slide  {width:100%;  position:Relative; height:470px;  padding:0; background-color:#333; overflow:hidden}
.business   * {transition: all 0.3s ease-out;}
.business .swiper-slide  img {width:100%}
.business .swiper-slide  div {position:absolute; 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}
.business .swiper-slide span { position:relative; z-index:9; letter-spacing:0; font-size:1.3em; font-weight:500}
.business .swiper-slide  h5 {font-size:1.7em; position:relative; z-index:9}
.business .swiper-slide  div p {height:0;  opacity:0; margin-top:20px;  overflow:hidden;   position:relative; z-index:9}
.business .swiper-slide:hover div p {opacity:1; height:100px}
.business .swiper-slide:hover div {background:rgba(0,0,0,.5); }
.business .swiper-slide:hover > p {  filter: blur(5px);
    -webkit-filter: blur(5px);}
.business .swiper-slide  div:after {background:rgba(0,0,0,.2); width:100%; height:100%; position:absolute; left:0; top:0; content:''}



.board ul.flex {width:100%; gap:20px}
.board ul.flex li {width:100%; border-top:2px solid var(--main_c); padding-top:20px;    position:relative }
.board ul.flex li img {width:100%;  }
.board ul.flex li .img {position:relative; margin-top:30px; }
.board ul.flex li span {  position:absolute; left:20px; top:20px; color:#fff; border-radius:5px; padding:7px 20px; display:inline-block; font-size:16.5px}

.board ul.flex li span {background: rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.board ul.flex li h5 {font-size:1.3em; font-weight:700; margin-bottom:5px}
.board ul.flex li .text { box-sizing:border-box; }

.logo-slider {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  background: #fff;
 }

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

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

}
.logo-slide p {border:1px solid #ddd; 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 {padding:100px 0}
.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%; background-color:#fff; 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%; }




.sub_con {width:100%;  padding-bottom:100px; margin:0 auto; min-width:1300px;  font-size:16.5px;  font-weight:300; line-height:1.4  }


  


 .scroll-btn {
	display: block;
	position: absolute;
	left: 50%;
     transform: translate(-50%, 0); 
 z-index:999; 
	bottom:40px; 
	text-align: center;

	 
}
 .scroll-btn p {font-size:15px; letter-spacing:0;  font-weight:600; color:#fff}

.scroll-btn > * {
	display: inline-block;
 }
 
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 21px;
	height: 34px;
 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	 
	width: 4px;
	height: 7px;
	left:50%; 
 	margin-left:-3px;
 	background: #fff;
	border-radius: 100px;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;


}



@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
	 
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}


.sub_vi {
 
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../img/vi1.png') no-repeat center center;
  background-size: cover;
  animation: zoomOut 2s ease-out forwards;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}