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;  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:800px; display:flex; align-items:center;  justify-content:space-between;  }
header ul li {font-size:21px; color:#fff;  width:25%; font-weight:500;  text-align:center; position:relative}
header ul li:after {content:'·'; position:absolute; right:0; }
header ul li:last-child:after {content:' ' }
header div.drop_menu {overflow:hidden;  width:100%; position:absolute; background:rgba(0,0,0,.8);   z-index:999;  top:90px; left:50%; box-sizing:border-box;   transform:translateX(-50%);  height:0;  }
header:hover div.drop_menu  {height:195px; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3)}
header div.drop_menu ul {width:800px; border-left:1px solid rgba(255,255,255,.3); margin:0 auto; align-items:stretch; }
header div.drop_menu ul li {width:100%; border-right:1px solid rgba(255,255,255,.3); font-size:16px; font-weight:500;  padding:25px 0 }
  
header div.drop_menu ul li a {width:100%; color:#fff; font-weight:300;  margin-bottom:7px; display:inline-block; text-align:center }
header div.drop_menu ul li a:hover {text-decoration:underline}
header div.drop_menu  ul li:after {display:none}
 
header div.lang a {display:inline-flex; background-color:#fff; color:#000; align-items:center; padding:4px 15px;  border-radius:50px;   }

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

 
header.over { background:rgba(0,0,0,.8); }
 
header:hover { background:rgba(0,0,0,.8); }
 

.main_con {width:100%;  margin:0 auto; min-width:1400px;  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 {}
 

.fixed_q.over { opacity:1; right:20px}   
.fixed_q { position:fixed; right:-200px;  bottom:45vh;   z-index:999999999;   opacity:0; transition: all 0.6s ease-out; }
.fixed_q a div {font-size:17px; letter-spacing:-1px;  line-height:1.2; font-weight:400  }
.fixed_q a {  z-index:9999; margin:10px 0; background-color:var(--main_c);  color:#fff; 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:nth-child(2) {background-color:var(--main_c2);}
.fixed_q a:nth-child(3) {background-color:#2db400}
.fixed_q a:nth-child(4) {background-color:#00557A}
.fixed_q a:nth-child(5) {background-color:#ADB5BD}




footer {width:100%;  display:inline-block;    font-size:16px;  font-weight:300;  padding:50px 5%;  box-sizing:border-box; line-height:1.5    }
footer b {font-weight:500; color:#fff}
 footer a {color:#fff}

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:130px}

.youtube-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.youtube-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 클릭 방지 */
}


.scroll_me {position:absolute; bottom:50px;   width:100px; height:100px; margin-left:-50px;  left:50%}


 .scroll-btn {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}
.scroll-btn > * {
	display: inline-block;
  
 }
 
 
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;


}

.scroll-btn  p {width:100%; color: #ffffff;  }

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



.vi * {transition: all 0.3s ease;}
.vi .in {position:Absolute;  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);  color:#111;  }
.vi .in h3 {font-size:3em; font-family: 'SpoqaHanSansNeo-Regular';  }
.vi .in  .flex {gap:20px; margin-top:20px}
.vi .in  a {color:#333; border:1px solid #333; margin-top:20px;  border-radius:50px; font-size:18px;   padding:11px 48px; display:inline-block}
 .vi .in  a:hover {background-color:var(--main_c); color:#fff;  border:1px solid var(--main_c)}
 
.tit {text-align:center;  font-size:3em; letter-spacing:-2px}
 

 .zoom-wrap{
  position: relative;
  height:350px; /* 스크롤할 구간(원하면 120~200vh로 조정) */
  overflow: clip; /* 확대 시 튀어나오는 영역 컷 */
}

.zoom-img{
  position: sticky;
  top: 0;
  width: 100%;
  height: 100%;                /* 뷰포트 꽉 채우기 */
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  transition: transform 0.08s linear; /* 미세한 떨림 방지용 */
}


.business ul.flex {width:100%; gap:30px; margin-top:50px; }
.business ul.flex li {width:100%;   padding:0; background-color:#fff; color:#333; }
.business ul.flex li img {width:100%; }
.business ul.flex li h5 {font-size:1.4em; margin:10px 0; color:#000}
.business ul.flex li div {position:Relative; line-height:0;  overflow:hidden}
.business ul.flex li div:after {content:"+more"; background:#f4f6f8; width:100%; height:0; overflow:hidden;  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:500;   position:absolute; top:0; left:0;   transition: all 0.3s ease;
}
.business ul.flex li div:hover:after {height:100%; }




ul.news  {width:100%; margin-left:auto;  display:flex; flex-wrap:wrap; gap:30px 0; justify-content:space-between}
ul.news li { width:32%; padding:40px; box-sizing:border-box; background-color:#111;  position:relative; cursor:pointer;
 
     background: linear-gradient(146deg, rgba(255, 255, 255, 0.16) 0%, transparent 60%, transparent 100%);
      border-radius:10px; 
    transition: transform 1.7s cubic-bezier(0.5, 0, 0, 1);
    z-index: 12;
   
}

ul.news li::before {
    display: block;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    bottom: 0.1rem;
    left: 0.1rem;
    content: "";
      border-radius:10px; 
    background-color: #0f0f0f;
    z-index: -1;
}
ul.news li span.label {border:1px solid var(--main_c); font-size:15px; font-weight:300;  margin-bottom:20px; color:var(--main_c); display:inline-block; padding:6px 20px; border-radius:5px; }
ul.news li span.label.type2 {border:1px solid var(--main_c2);   color:var(--main_c2); }

ul.news li b {font-size:1.2em; font-weight:500; 
text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
    overflow: hidden;
	 
	
 }
ul.news li p {text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
    overflow: hidden;
 	font-size:.93em; 
	font-weight:200; 
	line-height:1.35; 
	margin:10px 0; 
	
    }
ul.news li span {	letter-spacing:0; color:rgba(255,255,255,.8);   font-weight:200; font-size:.9em} 
ul.news li a.more {position:absolute; right:30px; top:20px;  display:flex; align-items:center; justify-content:center;  }

ul.news li a.plus {position:absolute; right:20px; top:20px; width:25px; height:25px; display:flex; align-items:center; justify-content:center;  }
ul.news li a.plus:after {width:100%; height:2px; background-color:#555; content:''; }
ul.news li a.plus:before {width:2px; height:100%; position:Absolute; left:50%; margin-left:-1px; top:0; background-color:#555; content:''; }
ul.news li:hover a.plus {animation: rotate 1s infinite }
ul.news li  * {color:#fff}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
 

@media all and (max-width:900px) {
 
	.logo-track { width: calc(250px * 27); }
	.logo-slider.type2 .logo-slide div {width:250px; gap:10px}
 	.logo-slider.type2 .logo-track {width: calc(250px * 30); }

}

 
 .bn * {transition: all 0.3s ease-out;}
.bn ul {display:flex; width:100%; gap:20px; margin-top:50px}
.bn ul li {width:25%; display:flex; align-items:center; gap:10px; font-size:18px;  padding:30px 30px; box-sizing:border-box;   background-color:#111}
.bn ul li i {font-size:24px}
.bn ul li {   box-sizing:border-box; background-color:#111;  cursor:pointer;
position: relative;
     background: linear-gradient(146deg, rgba(255, 255, 255, 0.16) 0%, transparent 60%, transparent 100%);
      border-radius:10px; 
    transition: transform 1.7s cubic-bezier(0.5, 0, 0, 1);
    z-index: 12;
   
}
 .bn ul li svg {width:22px; margin-left:auto; opacity:0}
.bn ul li:hover svg {opacity:1}
.bn ul li::before {
    display: block;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    bottom: 0.1rem;
    left: 0.1rem;
    content: "";
      border-radius:10px; 
    background-color: #0f0f0f;
    z-index: -1;
}

.mouse-dot{
  position: fixed;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
 border:2px solid #fff; 
  pointer-events: none;      /* 클릭 방해 X */
  z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference; /* 어두운 배경에서 잘 보이게(원하면 제거) */
  transition: transform .08s linear;
}


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


 aside {width:100%;  max-width:1400px; margin:0 auto; background-color:#fff; margin-top:0px;  position:absolute; left:50%; bottom:100px; z-index:99;  transform:translateX(-50%); }
 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}