@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;  }
 
 
 
  
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:80px; position:fixed; cursor:pointer; 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:1200px; display:flex; align-items:center; justify-content:center   }
header ul li {font-size:18px; letter-spacing:.5px;  padding:20px 25px;  font-weight:800;  text-align:center; position:relative; color:#fff}
  

  .gnb{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}

.gnb > li{
  position:relative;
  white-space:nowrap;
 }

.gnb > li > a{
  display:block;
   
  text-decoration:none;
  color:#111;

}

/* 2차 메뉴 기본 숨김 */
.gnb .sub{
  position:absolute;
  top:100%;
   left:50%; 
   transform:translateX(-50%);
  width:200px; 
  flex-direction:column; 
  margin:0;
  padding:10px 0;
  background:rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.08);
 
padding:20px 0 ;	
  opacity:0;
  
  transition:all .18s ease;
  z-index:9999;
 
}
.gnb .sub li {padding:4px 0}
.gnb .sub a{
width:100%; 
  display:block;
   color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:400
}

 
/* hover 또는 focus-within 시 표시 */
.gnb > li:hover .sub,
.gnb > li:focus-within .sub{
  opacity:1;
  visibility:visible;
 }


/* header div.drop_menu {overflow:hidden;  width:100%; position:absolute; background-color:#fff;  z-index:999;  top:90px; left:50%; box-sizing:border-box;   transform:translateX(-50%);  height:0;  }
header:hover div.drop_menu  {height:160px; border:1px solid #ddd}
header div.drop_menu ul {width:1200px;  margin:0 auto;  border-left:1px solid #ddd;    align-items:stretch; }
header div.drop_menu ul li {width:100%; position:relative; border-right:1px solid #ddd; font-size:16px; font-weight:500;  padding:25px 0 }
 header div.drop_menu ul li a {width:100%; color:#222; 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:flex; color:#fff; align-items:center; justify-content:flex-end; gap:6px; }

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

.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 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:90px; height:90px;  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;  box-sizing:border-box; font-size:14.5px; font-weight:300; height:250px; color:#fff; line-height:1.6;  position:relative; z-index:99}
footer a {color:#fff; }
footer a.link {border:1px solid #ddd; font-size:0.93em;  padding:0 10px; line-height:25px;  font-weight:300;  border-radius:3px; display:inline-block; letter-spacing:0.5px; color:#fff}

 
 
 .section1 .tit {
	font-size: 40px; 
	font-weight:300;
	color: #fff;
	letter-spacing: -1px;
	line-height: 1.1;
	text-align: center;
}

.section1 .txt {
	font-size: 120px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -1px;
	line-height: 1.1;
	padding-top: 5px;
	text-align: center;
}

 
a.basic_btn{
  position:relative;
  border:2px solid #fff;
  margin-top:40px;
  display:block;
  width:200px;
  height:55px;
  line-height:55px;
  text-align:center;
  color:#fff;
  font-size:16px;
  font-weight:300;
  box-sizing:border-box;
  text-decoration:none;
  overflow:hidden;
  transition: border-color .2s ease; /* 추가 */
  background: rgba(255, 255, 255, .02);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
	 transition: all 0.3s ease-out;
}
 a.basic_btn span{
  position:relative;
  z-index:2;
}
 a.basic_btn:hover  {
  border-radius:50px
}

/* a.basic_btn .border-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
 }
 
 a.basic_btn .border-rect{
  fill:none;
  stroke:#fff;         
  stroke-width:2;
  vector-effect: non-scaling-stroke;
 
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity:0;
 }
 a.basic_btn:hover{
  border-color: transparent;
   
 }
 
 a.basic_btn:hover .border-rect{
  opacity:1;
  animation: draw-border 1.2s linear infinite;
 }
 
  */


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


 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}



.sub_list {gap:30px; width:85%; margin:0 auto  }
.sub_list li {background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background 0.5s; padding:40px; width:25%; font-size:16px; line-height:1.6;  color:rgba(255,255,255,.8);  transition: all 0.3s ease-out; border:1px solid rgba(255,255,255,.0)}

.sub_list li b { font-size:22px; height:70px; margin-bottom:10px;   display:flex; flex-direction:column; justify-content:center; align-items:center;   line-height:1.4;    color:#fff}
.sub_list li:hover { border:1px solid rgba(255,255,255,1)}

   


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

  /* 다크 모드 대비 */
  @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 }
  }