/*------- slide-text version -------*/
 .sildes_text{ font-size:2.8em;left:10%;height:100%;width:820px;color:#ffffff;font-weight:bold; position:absolute;word-break:keep-all;display: flex;align-items:center; }

 @media screen and (max-width:1680px) {
  .sildes_text{ font-size:2.4em;left:10%;width:820px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 @media screen and (max-width:1600px) {
  .sildes_text{ font-size:2.4em;left:10%;width:820px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 @media screen and (max-width:1360px) {
  .sildes_text{ font-size:2.4em;left:10%;width:820px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 /* slide-text 1120px version */
 @media screen and (max-width:1120px) {
  .sildes_text{ font-size:2.4em;left:10%;width:820px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 @media screen and (max-width:968px) {
   .sildes_text{ font-size:2.0em;left:10%;width:630px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 /* slide-text 768px version */
 @media screen and (max-width:768px) {
   .sildes_text{ font-size:2.0em;left:10%;width:530px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 /* slide-text  480px version */
 @media screen and (max-width:480px) {
   .sildes_text{ font-size:1.4em;left:10%;width:280px;color:#ffffff;font-weight:bold; position:absolute; }
 }
 @media screen and (max-width:320px) {
   .sildes_text{ font-size:1.4em;left:10%;width:250px;color:#ffffff;font-weight:bold; position:absolute; }
 }

 @media screen and (max-width:1024px){
   .product-text{ font-size:18px; }
 }
  
 @media screen and (max-width:768px){
   .product-text{ font-size:14px; } 
 }
 /*------- slide-text version 끝 -------*/

 /*------- 전화번호 박스 -------*/
 .outer-box {
  position: relative;
  height: 80px;
  background: #4aa9b3;
  max-width: 100%;
}

.inner-box {
  position: relative;
  top: 0px;
  height: 80px;
  background: #4aa9b3;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}


@media (max-width: 768px) {
  .outer-box {
    height: 60px;
  }

  .inner-box {
    height: 60px;
    font-size: 16px;
  }
}
/*------- 전화번호 박스 끝 -------*/

/*------- 중앙 좌우 이미지 -------*/
.img_wrap {
  position:relative;
  float: left;
  width: 50%;
}


.img_wrap img {
  vertical-align: middle;
  width: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.img_text { 
   z-index:1;
   position:absolute;
   top:30px;
   left:40px;
   font-size:1.2em;
   color:#999;
}

.img_textl { 
   z-index:1;
   position:absolute;
   top:60px;
   left:40px;
   font-size:2em;
   color:#fff;
}

.img_textr { 
   z-index:1;
   position:absolute;
   top:60px;
   left:40px;
   font-size:2em;
   color:#fff;
}


/* tablet 규격 */
@media screen and (max-width: 1023px){
   .img_wrap {
    position:relative;
    float: left;
    width: 50%;
   }


  .img_wrap img {
   vertical-align: middle;
   width: 100%;
  }

  .row:after {
   content: "";
   display: table;
   clear: both;
   padding-bottom:1.25em;
  }
   .img_text { 
   z-index:1;
   position:absolute;
   top:20px;
   left:40px;
   font-size:0.8em;
   color:#999;
  }
  .img_textl { 
   z-index:1;
   position:absolute;
   top:40px;
   left:40px;
   font-size:1.2em;
   color:#fff;
  }

  .img_textr { 
   z-index:1;
   position:absolute;
   top:40px;
   left:40px;
   font-size:1.2em;
   color:#fff;
  }
 
}

 /* mobile 규격 */
 @media screen and (max-width: 540px){
  .img_wrap {
  width: 100%;
  }
  .img_wrap img {
  vertical-align: middle;
  width: 100%;
  }
  .row:after {
   content: "";
   display: table;
   clear: both;
   padding-bottom:1.25em;
  }
  .img_text { 
   z-index:1;
   position:absolute;
   top:20px;
   left:40px;
   font-size:0.8em;
   color:#999;
  }
  .img_textl { z-index:1;
   position:absolute;
   top:40px;
   left:40px;
   font-size:1.2em;
   color:#fff;
  }

  .img_textr { z-index:1;
   position:absolute;
   top:40px;
   left:40px;
   font-size:1.2em;
   color:#fff;
  }
}
/*------- 중앙 좌우 이미지 끝 -------*/

/*------- 중앙 좌우 이미지 버튼 공통 스타일 -------*/
.img_button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #618099;
  color: #fff;
  padding: 0.6em 1.5em;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 2;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.img_button:hover {
  background-color: #556a7a;
}

/* 반응형 버튼 크기
@media screen and (max-width: 1023px) {
  .img_button {
    padding: 0.5em 1.2em;
    font-size: 0.9em;
  }
}

@media screen and (max-width: 540px) {
  .img_button {
    padding: 0.4em 1em;
    font-size: 0.85em;
  }
}
*/
/*------- 중앙 좌우 이미지 버튼 공통 스타일 끝 -------*/

/*-------- 업무분야 ---------*/
 #b_wrap {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   padding: 10px;
   max-width: 1280px;
   margin: auto;
  }

  .menu-item {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .menu-item img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.4s ease; /* 부드러운 전환 효과 */
  }

  /* 마우스 오버 시 이미지 확대 효과 */
 .menu-item:hover img {
   transform: scale(1.1); /* 10% 확대 */
  }

  /* 새로 추가 대각선으로 오버레이가 지나가는 효과 */
  .menu-item::after {
   content: '';
   position: absolute;
   top: -100%;
   left: -100%;
   width: 200%;
   height: 200%;
   background: linear-gradient(135deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 55%);
   transform: rotate(0deg);
   pointer-events: none;
   opacity: 0;
  }

  .menu-item:hover::after {
   animation: sweep-diagonal 0.8s ease-out forwards;
   opacity: 1;
  }

  @keyframes sweep-diagonal {
    0% {
      transform: translate(-100%, -100%);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      transform: translate(100%, 100%);
      opacity: 0;
    }
  }

  /* 새로 추가 새로 추가 대각선으로 오버레이가 지나가는 효과 끝 */

  /* 새로운 박스 추가 */
  .menu-item .decorative-border {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #fff;
    border-radius: 8px; /* 라운드 처리 */
    pointer-events: none; /* 마우스 이벤트를 차단하여 이미지 위로 클릭 가능하도록 */
  }

  .menu-item .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
  }

  @media (max-width: 768px) {
    #b_wrap {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    #b_wrap {
      grid-template-columns: 1fr;
    }
  }
  /*-------- 업무분야 끝 ----------- */

  /*-------- qt -----------------*/
 .qt-background{
    margin-top:-60px;
	width:100%;
	background: url(../ace_img/server.png) no-repeat;
	background-size: cover;
	padding: 100px 0;
	background-attachment: fixed;
	background-position: center center;
	position: relative;
 }
 .qt-background p {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 44px;
    color: #fff;
 }

 .qt-background span {
    color: #fff;
    font-size: 20px;  
	font-weight: 500;	
 }
 .text-left{text-align:left!important}
 .lead { word-break:keep-all; }
/*---------- qt 끝 ---------- */

/*------- 푸터 시작 -------*/
 #footer {
    background-color: #1e1e1e;
    color: #fff;
    padding: 40px 20px;
    font-size: 14px;
 }

 .footer_container {
    max-width: 1200px;
    margin: 0 auto;
 }

 .footer-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
 }

 

 /* 회사 정보 리스트 */
 .company-info-l,
 .company-info-r {
    list-style: none;
    padding: 0;
    margin: 0;
 }

 .company-info-l li,
 .company-info-r li {
    margin-bottom: 6px;
    line-height: 1.6;
 }

 .company {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
 }

 /* 푸터 하단 */
 .footer-bottom {
    background-color: #111;
    color: #aaa;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    line-height: 1.4;
    border-top: 1px solid #333; /* 얇은 경계선 추가하면 고급스러움 */
 }

 .company-info-r a {
    color: #fff;
    text-decoration: none;
 }

 .company-info-r a:hover {
    color: #ccc;
    text-decoration: none;
 }


 /* 반응형: 모바일 대응 */
 @media (max-width: 768px) {
    .footer-wrap {
       flex-direction: column;
       align-items: flex-start;
    }

 }

 /* 작은 화면에서 글자 크기 줄이기 */
 @media (max-width: 768px) {
    .company-info-l li p,
    .company-info-r li p{
       font-size: 13px;  
	   line-height: 1.5; /* 살짝 줄임 */
    }
    .footer-bottom p { font-size: 11px; }
 }

 /* 아주 작은 화면에서 글자 크기 더 줄이기 */
 @media (max-width: 480px) {
    .company-info-l li p,
    .company-info-r li p{
       font-size: 12px;  
	   line-height: 1.4; /* 글자 작아지니 줄간격도 조금 더 타이트하게 */
    } 
 }
 /*------- 푸터 끝 -------*/