@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  
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; }
#wrap * { transition: all 0.2s ease-out; }

  
#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:hover {background-color:#fff}
header * { transition: all 0.3s ease-out; }
header .flex.in {align-items:center;  box-sizing:border-box;  max-width:1400px; justify-content:space-between }
header ul {width:94%; margin:0 auto; display:flex; align-items:center;  justify-content:space-between;  }
header ul li {font-size:20px;  width:15%; font-weight:500;  text-align:center; position:relative}
header ul li:nth-child(4) {width:20%}
header.over {background-color:#fff}
 

 .topnav { position: relative; z-index: 1000;  width:100%}
  .topnav__list{
    display:flex; align-items:center; justify-content:center;
    gap: 24px; margin:0; padding:0; list-style:none;
  }
  .topnav__list > li { position: relative; }
  .topnav__list > li > a{
    display:flex; align-items:center; justify-content:center; height:70px;
    padding:0 10px; text-decoration:none;
    color:#111; font-weight:600; white-space:nowrap;
 
	
  }
 
  /* ✅ dropdown */
  .sub{
    position:absolute; left:50%; top:60px; transform:translateX(-50%);
    min-width: 180px;
    margin:0; padding:20px 0; list-style:none;
    background:#fff;  
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    border-radius:12px;
	display:block; 

    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .sub li  {width:100%; padding:0}
  .sub li a {
    display:block; padding:3px 14px;
	font-size:16px; 
	
    text-decoration:none; color:#333; font-weight:300;
  }
 
  /* ✅ hover open (PC) */
  .has-sub:hover > .sub{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(6px);
  }

  /* ✅ keyboard/accessibility: focus open */
  .has-sub:focus-within > .sub{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(6px);
  }

  /* ✅ 모바일 대응: 클릭으로 열기 위한 클래스 */
  .has-sub.is-open > .sub{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(6px);
  }



.main_con {width:100%;  margin:0 auto; min-width:1300px;  font-size:16.5px;  font-weight:300; line-height:1.4}
.in {width:100%; margin:0 auto;  min-width:1300px;  max-width:1300px;  }
.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;  font-size:16px;  font-weight:300;  padding:43px 0 50px 0; box-sizing:border-box; line-height:1.5em;    color:#111 }
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 ; box-sizing:border-box; width:100%; display:inline-block  }
footer b {font-weight:500; color:#111}
footer a {color:#111}
footer a:hover {text-decoration:underline}


 

a.basic_btn {background-color:yellow; text-align:center; margin-top:15px; display:inline-block }
 

section + section {margin-top:90px}

.vi * {transition: all 0.3s ease;}
.vi .in {position:Absolute;  position:absolute; left:50%; top:44%; transform: translate(-50%, -50%);  color:#111;  }
.vi .in  .flex {gap:20px; margin-top:20px}
.vi .in  a {background-color:var(--main_c);  color:#fff;  margin-top:10px;  border-radius:50px; font-size:19px;   padding:13px 50px; display:inline-block}
  
.tit {text-align:center;  font-size:2em;  }
 


ul.news  {width:100%;  margin-top:40px; margin-left:auto;  display:flex; flex-wrap:wrap; gap:30px 0; justify-content:space-between}
ul.news li { width:32%; padding:35px 25px 35px 25px; box-sizing:border-box; background-color:#fff;  position:relative; cursor:pointer;
 box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.10);
    border-radius:5px;  
}
 
ul.news li span.label {border:1px solid var(--main_c); font-size:16px; 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:600; 
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;
	color:#333;  
	font-size:1em; 
	font-weight:200; 
	line-height:1.35; 
	margin:10px 0; 
	
    }
ul.news li span {color:#888; 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 }

 button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #333;
  color: #333;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: yellow;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: yellow;
  border-right-color: yellow;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: yellow;
  border-left-color: yellow;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
  color: var(--main_c);
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: var(--main_c);
  border-right-color: var(--main_c);
}
.meet:hover::after {
  border-bottom-color: var(--main_c);
  border-left-color: var(--main_c);
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}


.acodian {width:100%}
.acodian +  .acodian {margin-top:15px}
.acodian dt {cursor:pointer; width:100%; display:flex; align-items:center; background-color:#fff;  border:1px solid #D0D0D0; box-sizing:border-box; padding:15px 30px 15px 30px; border-radius:10px; font-size:1.13em;  color:#000; font-weight:500 }
.acodian dt i {margin-left:auto; font-size:23px;  transition: all 0.3s ease-out;}
.acodian.on dt   {border-radius:10px 10px 0 0;  }
.acodian.on dt i {transform: rotate(180deg);   }
.acodian dd { height:0; overflow:hidden; opacity:0;  transition: all 0.2s ease-out; background-color:#fff;  border:1px solid #ddd; border-top:none;  width:100%;   box-sizing:border-box;  padding:0 40px 0 30px; color:#333;  font-weight:300}

.acodian.on dt {    }
.acodian.on dd {  height:auto; opacity:1; padding:20px 40px 20px 30px; background-color:#f1f1f1; border:none }
.acodian dd div {width:100%}
.acodian dd * { word-break: break-all;}
.acodian dd table td {background-color:#fff }
.acodian dd img {max-width:100%}
 
.acodian span:first-child {width:40px; flex-shrink:0; background-color:var(--main_c); border-radius:50%; height:40px; margin-right:20px; display:flex;align-items:center; justify-content:center; font-size:20px; font-weight:400; color:#fff}
 
.section-divider--fade{
  width:100%;
  height:1px;
  margin:80px 0;
  background:linear-gradient(to right, transparent, #e5e7eb, transparent);
}
 
.business_list_wrap {width:100%; display:flex; gap:20px;  margin-top:30px}
.business_list_wrap .business_list_box  {width:100%;  position:Relative; height:470px;  padding:0; background-color:#333; overflow:hidden}
.business_list_wrap   * {transition: all 0.3s ease-out;}
.business_list_wrap .business_list_box  img {width:100%}
.business_list_wrap .business_list_box  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_list_wrap .business_list_box span { position:relative; z-index:9; letter-spacing:0; font-size:1em; font-weight:400;  font-family: "Montserrat", sans-serif;}
.business_list_wrap .business_list_box  h5 {font-size:1.7em; position:relative; z-index:9}
.business_list_wrap .business_list_box  div p {height:0;  opacity:0; margin-top:20px; font-weight:300;   overflow:hidden;   position:relative; z-index:9}
.business_list_wrap .business_list_box:hover div p {opacity:1; height:150px; font-size:.95em}
.business_list_wrap .business_list_box:hover div {background:rgba(0,0,0,.5); }
.business_list_wrap .business_list_box:hover > p {  filter: blur(5px);  -webkit-filter: blur(5px); }
.business_list_wrap .business_list_box  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:30px}
.board  * { transition: all 0.3s ease;}
.board ul.flex li {width:100%; }
.board ul.flex li img {width:100%; border:1px solid #ddd}
 .board ul.flex li h5 {font-size:1.2em; font-weight:500;  margin:10px 0 5px 0 }
  
.board  ul li:hover h5 {text-decoration:underline}
 



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

.logo-track {
  display: flex;
  width: calc(280px * 27);
  animation: scroll-left 50s linear infinite;
}

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

}
.logo-slide p { color:#ddd; font-size:7em; opacity:.4; font-weight:600;  box-sizing:border-box; padding:20px;  gap:10px;  display:flex;   align-items:Center; justify-content:center;    font-family: "Montserrat", sans-serif; }
 
 

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


 

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

}



.customer {  width:100%;   padding:100px 0;   background:url('../img/bg.png') no-repeat bottom;   background-size:cover; color:#111; position:relative; }
.customer .in {position:relative;  z-index:99; max-width:1300px}
.customer p {  }
.customer h3 + b {margin-top:20px; font-size:.16em; letter-spacing:1.5; margin-bottom:8px; width:100%; display:inline-block }
 


.link_box { display:inline-flex; gap:20px; margin-top:30px}
.link_box h3 {background-color:var(--main_c); color:#fff;    border-radius:5px;  text-align:center; box-sizing:border-box; display:flex; align-items:center; padding:0 60px; height:67px; cursor:pointer; font-weight:300; font-size:1.3em }
.link_box div i {font-size:25px; margin-right:10px}
 
 
 section.main_section3 ul {display:flex; gap:30px; margin-top:40px}
section.main_section3 ul li {width:25%; background-color:#fff;  border:1px solid #D0D0D0; box-sizing:border-box;  overflow:hidden;  position:relative; padding:20px; padding-bottom:30px}
section.main_section3 ul li img {width:100%}
 section.main_section3 ul li h4 {font-size:1.3em; font-weight:600; margin:5px 0 10px 0}
section.main_section3 ul li p {color:#222; font-weight:300 }
section.main_section3 ul li:after {width:100%; height:100%; content:''; background-color:var(--main_c); position:absolute; left:0; top:-100%; transition: all 0.3s ease-out; }
section.main_section3 ul li:hover:after {  top:0 }
section.main_section3 ul li:before {  content:'+'; color:#fff; width:70px; text-align:center; line-height:70px; border-radius:50%; font-size:50px; border:2px solid #fff; z-index:99; position:absolute; left:50%; top:50%; margin-left:-35px; margin-top:-35px;    animation: ani_rata 1s infinite linear; opacity:0
}

section.main_section3 ul li:hover:before { opacity:1}
@-webkit-keyframes ani_rata {
  0% {
        transform: rotate(0deg); 
  }
 100% {
      transform: rotate(-360deg); 
	}
 

}



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