@media all and (max-width:900px) {
   html {width:100%; overflow-x:hidden}
   body {width:100%; overflow-x:hidden}
}


header {background-color:#fff}
header nav#gnb > ul > li > a {color:#000}
header h1 img:nth-child(1) {display:block}
header h1 img:nth-child(2) {display:none}
.last_div + .last_div i {  color:#111}


.main_con * {transition: all 0.3s ease-out;}
.main_con {width:100%; font-size:17px }
 

 
 .vi {width:100%;  height:91vh}
   
 h3.tit {font-size:2.2em; letter-spacing:-1px; margin-bottom:40px; font-weight:800; text-align:center;   display:flex; align-items:center; justify-content:center; gap:15px; }


 
 
@media all and (max-width:900px) {
  
	.main_con {  font-size:16px }
	h3.tit {font-size:1.5em; }
 
}


section.pin-el {
 box-sizing:border-box;
  display: flex;  
  align-items: flex-start;  
  position:relative; 
  width:100%; 
   padding:0 13%; padding-top:150px; padding-bottom:150px;  
}
 
 
 .pin-wrapper {

	display: flex;  
	width:33%; box-sizing:border-box;  
	align-self: stretch; max-width:350px; margin-top:-50px; padding-top:50px; transition: all 0.3s ease-out;
 
}

.content {  width:67%; margin-left:auto;  margin-top:0;  }



.main_about {width:100%;  display:inline-block; background-color:#f7f7f7;  line-height:1.3; margin-top:0}
 
.main_about .left {width:100%; }
.main_about .left h3 { font-size:4em; line-height:1;  font-weight:800; color:#000;   }
 
.main_about .left p {line-height:1.5; margin-top:20px; font-size:1.05em; font-weight:300; color:#222; margin-bottom:30px }

.main_about .right {width:100%; margin-left:auto;  justify-content:space-between; gap:30px 0 }
.main_about .right div.box {width:47%; }
.main_about .right div.box p.img {width:100%; padding-bottom:110%;  }
.main_about .right div.box div.text {border-radius:10px; margin-left:-20px; width:90%; background-color:#fff; padding:40px 30px; box-sizing:border-box; margin-top:-50px;  color:#333; box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.10); font-size:1em; line-height:1.4; font-weight:200; color:#222;} 
.main_about .right div.box div.text  h3 {margin-bottom:10px; font-size:1.4em; color:#000; font-weight:700}


@media all and (min-width:900px) {
  .main_about .left { position: sticky; top:200px}

}

@media all and (max-width:900px) {
		section.pin-el { flex-wrap:wrap; padding:60px 4%;   }
		.pin-wrapper {width:100%; max-width:100%; }
		.content {width:100%; margin-top:60px}
		.main_about .right div.box {width:100%; margin-top:30px !important}
		.main_about .right div.box p.img {width:100%; padding-bottom:90%;  }
		.main_about .left h3 {font-size:3em}
		.main_about .left p {  font-size:1em;  margin-bottom:15px}
		.main_about .right div.box div.text h3 {font-size:1.3em}


}

.board   {  margin-top:80px}



.x_banner {width:100%;; margin-top:80px; padding:90px 0  110px 0; box-sizing:border-box; background:url('/common/img/x_banner_bg.png') no-repeat top;  background-color:#333;  background-size:cover; color:#222;  position:relative;  }
.x_banner > div {box-sizing:border-box; padding-left:9%}
.x_banner p {  font-weight:300;  margin-top:25px; width:100%;  box-sizing:border-box;  line-height:1.5;  }
.x_banner p:nth-child(1) {font-size:1.6em; color:#000; font-weight:700;}
.x_banner p:nth-child(2) {margin-top:10px; font-size:1.03em}
.x_banner  img {position:absolute; max-width:90%; z-index:9; right:7%;  bottom:-140px}

@media all and (max-width:900px) {
		.x_banner {padding:40px 0 60px 0}
		.x_banner  img {  right:-100px;  bottom:-80px}
		.x_banner > div {padding:0 4%}
		.x_banner p:nth-child(1) {font-size:1.2em;  }
		.x_banner p:nth-child(2) {font-size:.95em}

 
}

 
.community  {width:100%; padding-top:100px; padding-bottom:100px; margin-top:70px}
 
ul.news  {width:100%; margin-left:auto;  display:flex; flex-wrap:wrap; gap:30px 20px;  }
ul.news li { width:calc(33% - 10px); 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: 10px; }
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:700; 
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 a b {color:#111}

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} 
  
 @media all and (max-width:900px) {
	  ul.news {gap:20px 0; justify-content:space-between;}
	  ul.news li {width:49%;  padding:25px 15px; border-radius:10px}
 
      ul.news li b {font-size:1.1em;  }
	  ul.news li span.label {  font-size:14px;  margin-bottom:15px; padding:4px 15px; border-radius:3px}
	  ul.news li p {font-size:.95em}

}

.last_bn {background:url('/common/img/last_bn_bg.png') no-repeat center; background-size:cover; margin-top:80px}
.last_bn ul {display:flex;}
.last_bn ul li {border-right:1px solid rgba(255,255,255,.5); display:flex; align-items:center; gap:15px; color:#fff; padding:60px 50px; box-sizing:border-box;  font-size:1.3em; width:33.333%; cursor:pointer}
.last_bn ul li:last-child {border:none}
.last_bn ul li:hover {width:50%}
.last_bn ul li:after {content:'자세히보기'; margin-left:auto; opacity:0}
.last_bn ul li:hover:after {opacity:1}
.last_bn ul li i {font-size:30px}

 
  @media all and (max-width:900px) {
	.last_bn ul li {width:50%; padding:30px; font-size:1em}
	.last_bn ul li:last-child {display:none}
 .last_bn ul li:after {display:none}

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

@media all and (max-width:900px) {
 .logo-slide p {  padding:10px; width:150px; height:50px;  }


}

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

footer {margin-top:0; border-top:none}