:hover {-webkit-transition: all 0.3s; /* Safari */  transition: all 0.3s;}
::-webkit-scrollbar {
    width: 5px;
    height:5px;
}
::-webkit-scrollbar-thumb {
    background: #c5dbe0;border-radius:5px;
}
:hover {-webkit-transition: all 0.3s; /* Safari */  transition: all 0.3s;}

#container #sub_contents .t_title { 
  opacity: 0;                /* 처음엔 안 보이게 */
  transform: translateY(30px); /* 아래쪽에서 시작 */
  animation: textUp 1s ease-out 0.2s forwards;
  /* 1s 동안 애니메이션, 0.5초 지연 후 실행, 끝나면 상태 유지 */
}
#container #sub_contents section.contents-1 { 
  opacity: 0;                /* 처음엔 안 보이게 */
  transform: translateY(30px); /* 아래쪽에서 시작 */
  animation: textUp 1s ease-out 0.6s forwards;
  /* 1s 동안 애니메이션, 0.5초 지연 후 실행, 끝나면 상태 유지 */
}


@keyframes textUp {
  0% {
    opacity: 0;
    transform: translateY(30px); /* 아래에서 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);    /* 원래 위치 */
  }
}

#container #sub_contents {width:100%;background: url(/images/sub/sub_01.jpg) top right fixed no-repeat;  padding-top:180px; padding-bottom: 80px; word-break:keep-all;}
#container #sub_contents h2 { font-size: 2.9em; line-height: 1.2; color:#fff; padding:15px 0; }
#container #sub_contents h3 { font-size: 1.5em; line-height: 1.2; color:#fff; padding:5px 0; }
#container #sub_contents h3.tit { background:url(/images/bullet/point_bar.gif) no-repeat left bottom; padding-left:25px;line-height: 0.5;}
#container #sub_contents h4 { font-size: 1.2em; line-height: 1.2; font-weight:300; color:#ddd; padding:5px 0; }
#container #sub_contents h5 { font-size: 1.1em; line-height: 1.2; font-weight:400; color:#58bdff; padding:5px 0; }

#container #sub_contents section {width:100%; font-size:1em; line-height:1.5; font-weight:300; position:relative; padding-top:40px;}

#container #sub_contents ul.box { font-size: 1.1em; margin:40px 0; text-align:center;color:#ddd; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px;}
#container #sub_contents ul.box li { background:rgba(10, 43, 79, 0.8); padding:30px 15px; border-radius:10px; border: 1px solid #214b71;}
#container #sub_contents ul.box li i { font-size:2.5em; color:#58bdff; padding-bottom:25px; display:block;}

#container #sub_contents section > ul.box2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin:20px 0;}
#container #sub_contents section > ul.box2 > li { background: rgba(10, 43, 79, 0.8); border-radius: 10px; border: 1px solid #214b71; padding:35px 30px; box-sizing: border-box;}
#container #sub_contents section > ul.box2 > li i { font-size:2.3em; color:#58bdff; display:inline-block;}


/* company > 인사말 */
.company .greeting .words { position:relative; font-size:1.6em; background:rgba(10, 43, 79, 0.4); padding:60px 20px; border-radius:10px; border: 1px solid #214b71; margin:40px 0; text-align:center;}
.company .greeting .words  i.fa-solid { font-size:4.5em; color:#58bdff; position:absolute;}
.company .greeting .words  i.fa-quote-left {left:0; top:-50px;}
.company .greeting .words  i.fa-quote-right {right:0; bottom:-52px;}
.company .greeting .name h3 { color:#58bdff !important;}
.company .greeting .name {font-size: 1.2em; color:#ddd; text-align:center;}

.company .greeting ul.star h3 { padding-bottom:15px !important;}
.company .greeting ul.star li { flex: 1 1 31%;}

.company .overview ul.intro { font-size: 1.2em; 
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 기본 2칸 */
  column-gap: 20px; /* 가로 간격만 */
}
.company .overview ul.intro li strong { color:#58bdff;font-weight:600; display:inline-block; flex: 0 0 20%; width:20%; max-width:200px; min-width:90px;}
.company .overview ul.intro li:nth-child(1), .company .overview ul.intro li:nth-child(2) {border-top: 3px solid #3471a9;}
.company .overview ul.intro li { padding:20px 3%; background:rgba(10, 43, 79, 0.5); border-bottom: 1px solid #214b71;box-sizing: border-box;
display: flex; align-items: flex-start;}

.company .overview ul.certify { line-height:1.2; font-weight: 400;}
.company .overview ul.certify li { margin-bottom:10px; flex: 0 0 calc((100% - 90px) / 4); flex-direction: column; display: flex; justify-content: center;}

.company .overview h3.tit { margin-top: 60px;}
.company .overview .bgg { background:rgba(10, 43, 79, 0.8); border-radius:10px; border: 1px solid #214b71; text-align:center;padding:60px 20px;margin:40px 0;}
.company .overview .bgg img { width:100%; max-width:1000px; margin:0 auto;}
.company .overview .bgg img.mb { width:100%; max-width:500px;}

.company .history .timeline {
  position: relative;
  list-style: none;
  margin: 20px 0;
  padding: 0;
  font-size:1.4em;
}
.company .history .timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #007979; /* 중앙 라인 */
}
.company .history .timeline li {
  position: relative;
  width: 50%;
  box-sizing: border-box;
  padding:5px 50px;
  margin-bottom:20px;  
}
/* 연도 텍스트를 내용과 같은 방향으로 */
.company .history .timeline li::before {
  content: attr(data-year);
  position: relative;   /* 절대 위치 대신 내용 흐름에 맞게 */
  display: block;
  font-weight: bold;
  font-size: 2.3em;
  color: #58bdff;
}
.company .history .timeline li::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 25px;
  height: 25px;
  background: #58bdff;
  border-radius: 50%;
  z-index: 1;
}
/* 홀수 항목: 왼쪽 */
.company .history .timeline li:nth-child(odd) {
  left: 0;
  text-align: right;
}
.company .history .timeline li:nth-child(odd)::after {
  right: -14px;
}
/* 짝수 항목: 오른쪽 */
.company .history .timeline li:nth-child(even) {
  left: 50%;
  text-align: left;
}
.company .history .timeline li:nth-child(even)::after {
  left: -11px;
}
/* 마지막 항목(예: 2025년) 원 색상 변경 */
.company .history .timeline li:last-child::after {
  background: #12c286; /* 원하는 색상 */
}
.company .history .timeline li:last-child::before{
  color: #12c286;
}
.company .history .timeline li span {
  display: block;
  color: #ddd;
  font-size:0.85em;
}

.IT .m_business > ul > li {  flex: 0 0 calc(50% - 15px);}
.IT .m_business > ul > li i { margin-right:30px; text-align:center; width:50px;vertical-align:middle;} 
.IT .m_business > ul > li h3 {display:inline-block; font-size:1.7em !important;}
.IT .m_business > ul > li span { font-size:1.1em; color:#ddd; display:block; margin:10px 0 20px 0; padding-left:80px; }
.IT .m_business ul > li ul { display: flex; flex-wrap: wrap; /* 줄바꿈 허용 */gap: 7px; margin-left:80px; margin-bottom:5px;}
.IT .m_business ul > li ul.point li { font-size:1em; font-weight:400; background:rgba(0, 0, 0, 0.2); border: 1px solid #1a3c5a; padding:1px 10px; border-radius:5px;}

.IT .reference > ul > li { flex: 0 0 calc((100% - 60px) / 3);}
.IT .reference > ul > li h3 {display:inline-block;}
.IT .reference > ul > li .date { position:relative;color:#58bdff; font-size:0.85em; margin-bottom:10px;}
.IT .reference > ul > li .date .spoint { position:absolute; right:0; top:-5px; display: inline-block; font-size: 1em; padding: 2px 15px; letter-spacing: -1px; color: #fff; border-radius: 5px;}
.IT .reference > ul > li > span { font-size:1.1em; color:#ddd; display:block; margin:10px 0 20px 0; }
.IT .reference ul > li ul { display: flex; flex-wrap: wrap; /* 줄바꿈 허용 */gap: 7px; margin-bottom:5px;}
.IT .reference ul > li ul.point li { font-size:1em; font-weight:400; background:rgba(0, 0, 0, 0.2); border: 1px solid #1a3c5a; padding:1px 10px; border-radius:5px;}

.IT .development > ul.steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

/* 전체 연결선 */
.IT .development > ul.steps::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  height: 3px;
  background: #007979;
  width: 85%;
  margin: 0 auto;
}

/* 각 단계 박스 */
.IT .development > ul.steps li {
  flex: 1 1 25%;
  text-align: center;
  position: relative;
  background: rgba(10, 43, 79, 1);
  padding: 50px 20px 30px;
  border-radius: 10px;
  border: 1px solid #214b71;
  margin: 0 15px;
  max-width:350px;
}

/* 숫자 원 */
.IT .development .step-number {
  position: absolute;
  top: -80px; /* 박스 위로 반쯤 걸치게 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(to right, #003399, #0066cc);
  color: #fff;
  font-weight: bold;
  font-size: 1.7em;
}

/* 헤더 (숫자 원 + 아이콘) */
.IT .development .step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  position: relative;
}

.IT .development .step-header i {
  font-size: 2.5em;
  color: #58bdff;
  padding: 10px;
}

.IT .development > ul.steps li h3 {
  margin: 20px 0;
  color: #fff;
}

.IT .development > ul.steps li span {
  font-size: 1.2em;
  color: #ddd;
  line-height: 1.4;
}

/* IT > 솔루션개발 */
.IT .development ul.skill h3 { padding-bottom:15px !important;}
.IT .development ul.skill li { flex: 0 0 calc((100% - 90px) / 4);}

/* IT > 유지보수 */
.IT .operation ul.oper li { flex: 0 0 calc((100% - 60px) / 3);}
.IT .operation ul.oper li i { margin-right:30px; text-align:center; width:50px;vertical-align:middle;} 
.IT .operation ul.oper li h3 {display:inline-block; }
.IT .operation ul.oper li span { font-size:1.1em; color:#ddd; display:block; margin:10px 0 20px 0; padding-left:80px; }

.IT .operation .wrap_out { 
  width: 100vw;        /* 뷰포트 전체 너비 */
  margin-left: calc(-50vw + 50%); /* 부모 중앙 정렬을 깨고 화면 전체로 확장 */
  background: rgba(0, 0, 0, 0.3); padding:30px 0; margin-bottom:50px; }
.IT .operation .wrap_out ul.import {width:100%; max-width:1500px; margin: 0 auto; padding:0 3%; display: flex;flex-wrap: wrap; justify-content: center; }
.IT .operation .wrap_out ul.import li {border-right: 1px solid #546972; font-weight:500; font-size:1.15em; flex: 1 1 25%; text-align:center; margin:20px 0;}
.IT .operation .wrap_out ul.import li:last-child { border-right: 0px solid #060d18;}
.IT .operation .wrap_out ul.import li strong {color:#58bdff; font-size:40px; padding-bottom:10px; display:inline-block;}


/* 제품소개 */
.product section.contents-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.product .left {
  width: 60%;
  display: flex;
  flex-direction: column;
  padding-right: 50px;
  order: 1; 
}
.product .right {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:-115px;
  order: 2; 
}
.product .left .description {
  text-align: left;
  background: rgba(10, 43, 79, 0.5); border-radius: 10px; border: 1px solid #214b71; padding:35px 30px; box-sizing: border-box;
}

.product .left .description p { font-size:1.2em;}
.product .left .description ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;   /* li가 여러 줄이 될 때 h4와 상단 정렬 */
    gap: 7px;
    margin-top: 20px;
}
.product .left .description ul h4 {
    flex: 0 0 auto;
    background: #003366;
    padding: 7px 15px !important;
    font-size: 1em !important;
    border-radius: 5px;
    margin-right: 5px;
    white-space: nowrap;
}
.product .left .description ul.point li {
    flex: 0 1 auto;             /* 늘어나진 않지만 필요하면 줄어듦 */
    max-width: calc(100% - 115px);            /* 부모(ul) 폭을 넘지 않게 — 필요시 px로 조정, 예: max-width: 320px; */
    font-size: 1em;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #1a3c5a;
    padding: 4px 5%;
    border-radius: 5px;
    word-break: keep-all;       /* 한글 단어 중간 끊김 방지 */
    overflow-wrap: break-word;  /* 긴 단어/영문도 필요시 줄바꿈 */
}

.product .left h3 { margin-top:70px;}
.product .left ul.box li { flex: 0 0 calc((100% - 30px) / 2); text-align:left; display: flex; align-items: center; padding:35px 4% !important;}
.product .left ul.box li i { display:inline-block !important; font-size:2em !important; padding-bottom:0px!important; padding-right:20px;}

.product .right .product_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
}

.product .right .product_img h2 {
  aspect-ratio: 1 / 1; /* 항상 1:1 비율 유지 */
  width: 100%;
  height: auto;
  max-width:450px;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 텍스트를 아래쪽으로 */
  padding-bottom: 10% !important;
  color: #58bdff !important;
  text-align: center;
  z-index:1;
}
.product .AMMD .right .product_img h2 {background: url('../images/sub/product_AMMD.png') center center / contain no-repeat;}
.product .VDS  .right .product_img h2 {background: url('../images/sub/product_VDS.png') center center / contain no-repeat;}
.product .AGMS .right .product_img h2 {background: url('../images/sub/product_AGMS.png') center center / contain no-repeat;padding-bottom: 6% !important;}
.product .RWSL .right .product_img h2 {background: url('../images/sub/product_RWSL.png') center center / contain no-repeat;padding-bottom: 6% !important;}

.product .right ul {
  margin-top: -20px; /* product_img 아래로 간격 */
  width: 90%;
  max-width:450px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 25px 30px 15px 30px;
  border-radius: 10px;
  border: 1px solid #214b71;
  z-index:2;
}

.product .right ul h3 {
  margin-bottom: 15px;
  text-align:center;
  color:#58bdff !important;
}

.product .right ul li {
  padding-left: 35px;
  margin-bottom: 13px;
  background: url('../images/bullet/point_chack.png') no-repeat left center;
  background-size: 20px 20px;
}

.consulting .intro > ul > li { position:relative; flex: 0 0 calc((100% - 60px) / 3);}
.consulting .intro > ul > li:last-child { border:1px solid #12c286 !important;}
.consulting .intro > ul > li i { margin-right:15px; text-align:center; width:50px;} 
.consulting .intro > ul > li h3 { display:inline-block; font-size:1.7em !important;}
.consulting .intro > ul > li span.spoint { position:absolute; right:20px; top:20px; display: inline-block; font-size: 0.9em; padding: 2px 15px; letter-spacing: -0.5px; color: #ddd; border-radius: 5px;}

.consulting .intro > ul > li .cont {  padding:30px 0 40px 0; border-top: 1px solid #214b71; border-bottom: 1px solid #214b71; margin:30px 0;} 
.consulting .intro > ul > li .cont span { font-size:1em; color:#ddd; display:block; margin:10px 0 40px 0; }
.consulting .intro > ul > li .cont p {font-size:1.2em;}

.consulting .intro > ul > li h4 { color:#58bdff !important; font-weight:600!important;}
.consulting .intro > ul > li ul.service li {
  padding-left: 35px;
  margin-bottom: 13px; margin-top:20px;
  background: url('../images/bullet/point_chack.png') no-repeat left center;
  background-size: 20px 20px;
}
.consulting .btn_area a { margin-top:30px; display:block;}
.consulting .btn_area .arrow {opacity:1;fill:#fff; width:36px; height:10px; padding-left:7px;}
.consulting .btn_area .button_t { width:100%;height:50px; line-height:40px;}

.consulting .process > ul.steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.consulting .process > ul.steps::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  height: 3px;
  background: #007979;
  width: 85%;
  margin: 0 auto;
}

.consulting .process > ul.steps li {
  flex: 1 1 25%;
  text-align: center;
  position: relative;
  background: rgba(10, 43, 79, 1);
  padding: 70px 20px 100px 20px;
  border-radius: 10px;
  border: 1px solid #214b71;
  margin: 0 15px;
  max-width:350px;
}
.consulting .process > ul.steps li:nth-child(4) i{ color: #12c286;}

.consulting .process .step-number {
  position: absolute;
  top: -100px; /* 박스 위로 반쯤 걸치게 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(to right, #003399, #0066cc);
  color: #fff;
  font-weight: bold;
  font-size: 1.7em;
}

.consulting .process .step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  position: relative;
}

.consulting .process .step-header i {
  font-size: 2.5em;
  color: #58bdff;
  padding: 10px;
}

.consulting .process > ul.steps li h3 {
  margin: 20px 0;
  color: #fff;
  font-size:1.3em !important;
}

.consulting .process > ul.steps li span {
  font-size: 1.1em;
  color: #ddd;
  line-height: 1.4;
  margin-bottom:30px; display:block;
}
.consulting .process .spoint { position:absolute; bottom:20px; width:80%; font-size: 0.9em; padding: 5px 15px; letter-spacing: -0.5px; color: #58bdff; border-radius: 5px; background:#07223e; left: 50%; transform: translateX(-50%); }
.consulting .FAQ ul.box2 li { flex: 0 0 calc((100% - 30px) / 2);}

.consulting .FAQ ul li h3 { border-bottom: 1px solid #214b71; padding-bottom:25px !important; margin-top:-5px; margin-bottom:30px; font-size:1.35em !important;
  position: relative;
  padding-left: 55px !important; 
}

.consulting .FAQ ul li h3::before {
  content: "Q";
  position: absolute;        /* h3 내부에서 절대 위치 */
  left: 0;                   /* h3 왼쪽에 고정 */
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #58bdff;
  color: #fff;
  font-weight: 500;
  font-size: 1.1em;
}
.consulting .FAQ ul li .A { color:#ddd; font-size:1.1em;}


/* 소식/문의 */
.board .notice ul.t_notice { margin:20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  align-items: stretch;
}
.board .notice ul.t_notice li {
  flex: 0 0 calc(50% - 15px); /* 2칸 배치 */
  display: flex;              /* li를 flex 컨테이너로 */
  flex-direction: column;
}
.board .notice ul.t_notice li a { background: rgba(10, 43, 79, 0.5); border-radius: 10px; border: 1px solid #214b71; margin-bottom: 10px; padding: 30px; width: 100%; color:#ddd; 
  flex: 1; /* li 높이에 맞춰 a도 늘어나게 */	
  display: flex;              /* a도 flex 컨테이너로 */
  flex-direction: column;     /* 내부 요소 세로 배치 */
}
.board .notice ul.t_notice li a:hover { border: 1px solid #58bdff;}

.board .notice ul.t_notice li a .date { font-size: 0.85em; line-height:1.2; color: #b6cada;
  display: flex;          /* 가로 배치 */
  align-items: center;    /* 세로 중앙 정렬 */
  gap: 10px;               /* 간격 */
}
.board .date .spoint { display: inline-block; font-size: 1em; padding: 2px 10px; letter-spacing: -1px; color: #fff; border-radius: 5px;}
.board .notice ul.t_notice li a h3 { margin:10px 0; font-size:1.35em !important;}
span.order { background:#2f90e9;}
span.foreign { background:#12c286;}
span.notice { background:#e0a022;}
span.recruit { background:#914de5;}
span.news { background:#e84aa7;}
span.consult { background:#07223e;}

.board .notice .view { width:100%; background: rgba(10, 43, 79, 0.5); border-radius: 10px 10px 0 0; border: 1px solid #214b71; padding:30px;} 
.board .notice .view .date { line-height:1.2;color:#ddd;}
.board .notice .view .date .spoint { margin-right:10px; }
.board .notice .view h3 { padding:20px 10px 30px 10px !important; font-size:2em !important; text-align:center; font-weight:500 !important;}
.board .notice .view .view_contents {padding:40px 0px; border-top:1px solid #214b71; color:#eee; font-size:1.15em; line-height:1.8;}
.board .notice .view .view_contents .g_view{ text-align:center; margin-bottom:10px;}
.board .notice .view .view_contents .g_view img { 
  max-width: 100%;  /* 부모 요소 너비에 맞춰 줄어듦 */
  height: auto;     /* 세로 비율 자동 유지 */
  display: block;   /* 불필요한 여백 제거 */
  margin: 0 auto;   /* 가운데 정렬 */
}
.board .notice .prev_next { width:100%; background: rgba(10, 43, 79, 0.5); border-radius: 0 0 10px 10px; border: 1px solid #214b71; margin-top:-1px; padding:15px;} 
.board .notice .prev i{ background: url(../images/bullet/btn_prev.png) no-repeat center center; width:30px; height:30px;}
.board .notice .next i{ background: url(../images/bullet/btn_next.png) no-repeat center center; width:30px; height:30px;}
.board .notice .prev i, .board .next i{ display:inline-block; margin-right:12px;border-radius: 3px; }
.board .notice .prev a:hover i, .board .notice .next a:hover i { background-color:#58bdff; text-decoration:none;color:#fff;}
.board .notice .prev a:hover, .board .notice .next a:hover { text-decoration:underline;}
.board .notice .prev a, .board .notice .next a {
  display:inline-flex;
  align-items:center;   /* 아이콘과 글자 수직 중앙 정렬 */
  line-height:1.3;
  margin-top:5px;
  word-break:break-all;
  color:#ddd;
}
.board .text_left { margin:30px 0; }

.board .contact {
  display: flex;        /* 좌우 배치 */
  gap: 35px;            /* 두 영역 사이 간격 */
  align-items: flex-start; /* 각 블록을 자기 콘텐츠 높이에 맞게 */
}
.board .contact h3 { margin-bottom:30px;}
/* 왼쪽 정보 영역 */
.board .contact .c_infor {flex: 0 0 30%; width:100%; background: rgba(10, 43, 79, 0.5); border-radius: 10px; border: 1px solid #214b71; padding:30px; margin:20px 0;
  flex: 0 0 30%;        /* 전체의 30% 차지 */
}
/* 오른쪽 폼 영역 */
.board .contact .c_form { flex: 0 0 70%; width:100%; background: rgba(10, 43, 79, 0.5); border-radius: 10px; border: 1px solid #214b71; padding:30px; margin:20px 0;
  flex: 0 0 70%;        /* 전체의 70% 차지 */
}
.board .contact .c_infor dt i { font-size:1.5em; color:#58bdff; vertical-align: text-top; width:30px; margin-right:10px; }
.board .contact .c_infor dt, .board .contact .c_form dt {
  font-weight: 500; color:#58bdff; margin-top:20px; margin-bottom: 6px;
}
.board .contact .c_infor dd { margin-left:40px;}
.board .contact .c_infor dd, .board .contact .c_form dd {
  margin-bottom: 25px;
}
.board .contact .c_form .req { color:#e53d3d; }
.board .contact select.input_t { background:rgba(0,0,0,0.3); color:#eee; border:1px solid #214b71; height:50px; padding:0 15px; }
.form_msg { padding:16px 20px; border-radius:8px; margin-bottom:25px; font-weight:600; }
.form_msg_ok { background:rgba(18,194,134,0.15); border:1px solid #12c286; color:#12c286; }
.form_msg_error { background:rgba(229,61,61,0.15); border:1px solid #e53d3d; color:#e53d3d; }

.board .contact .input_t, .board .contact .input_th { width:100%;}
.board .contact a .button_t { width:100%; padding:5px 10px; height:50px; line-height:40px;margin-bottom:10px;}


.pc { display:block;}
.mb { display:none;}
.coming {
	text-align:center;
	font-size:30px;
	color:#999;
	width:100%;
	height:300px;
	background:url(/images/comingsoon.png) no-repeat center;
	margin-bottom:30px;
	text-indent: -9999px;
}


@media all and (max-width: 1000px) {


}
@media all and (max-width: 960px) {
.IT .operation ul.oper li { flex: 0 0 calc((100% - 30px) / 2);}
.consulting .intro > ul > li { flex: 0 0 100%;}
}

@media all and (max-width: 768px) {
#container #sub_contents { padding-top:120px;}

.company .greeting .words { font-size:1.2em; }
.company .greeting .words  i.fa-solid { font-size:3.5em; }
.company .greeting .words  i.fa-quote-left {left:0; top:-28px;}
.company .greeting .words  i.fa-quote-right {right:0; bottom:-30px;}
.company .greeting .name { font-size:1.1em;}
.company .greeting ul.star { font-size: 1em;gap: 15px;}

.company .overview ul.intro { grid-template-columns: 1fr; column-gap: 0; }
.company .overview ul.intro li:nth-child(2) {border-top: 0px;}
.company .overview .bgg { padding:35px 20px;}

.company .overview ul.certify li, .IT .development ul.skill li { flex: 0 0 calc((100% - 30px) / 2); margin-bottom:0px;}
.company .history .timeline { padding-left: 20px; font-size:1.15em;}
.company .history .timeline::before { 
left: 20px;          /* 중앙 라인을 왼쪽으로 이동 */
right: auto;
}
.company .history .timeline li {
width: 100%;         /* 전체 너비 사용 */
text-align: left !important;    /* 글자 왼쪽 정렬 */
padding: 11px 20px 15px 40px; /* 왼쪽 여백 확보 */
left: 0 !important;  /* 좌우 교차 배치 제거 */
margin-bottom:30px;
}
.company .history .timeline li::after { width:20px; height:20px;
left: -9px !important;           /* 점(circle)을 왼쪽 라인에 붙임 */
right: auto;
}
.company .history .timeline li::before {font-size:2em;
text-align: left;    /* 연도도 왼쪽 정렬 */
}
.IT .m_business > ul > li { flex: 0 0 calc(100% - 0px);}
.IT .reference > ul {justify-content: space-between;}
.IT .reference > ul > li { flex: 0 0 calc(50% - 15px);}

  .IT .development > ul.steps {
    flex-direction: column;
    align-items: center;
	margin-top:10px;
  }
  .IT .development > ul.steps::before {
    content: "";
    position: absolute;
    top: 20px;
    transform: translateX(-50%);
    width: 3px;       /* 세로줄 두께 */
    height: 90%;     /* 전체 높이 */
    background: #007979;
    z-index: 0;
  }
  .IT .development > ul.steps li {
	width: 90%;
    margin: 30px 0; /* 세로 간격 */
  }
  
  .consulting .process > ul.steps {
    flex-direction: column;
    align-items: center;
	margin-top:10px;
  }
  .consulting .process .step-number { top: -80px;}

  .consulting .process > ul.steps::before {
    content: "";
    position: absolute;
    top: 20px;
    transform: translateX(-50%);
    width: 3px;       /* 세로줄 두께 */
    height: 90%;     /* 전체 높이 */
    background: #007979;
    z-index: 0;
  }
  .consulting .process > ul.steps li {
	width: 90%;
    margin: 30px 0; /* 세로 간격 */
	padding: 50px 20px 60px 20px;
  }
.IT .operation .wrap_out ul.import li { flex: 1 1 50%; }
.IT .operation .wrap_out ul.import li:nth-child(2) { border-right: 0px;}
  
.product section.contents-1 { flex-direction: column; }  
.product .left { width: 100%; padding-right: 0px;order: 2;}
.product .right { width: 100%; margin-top:-20px;order: 1; margin-bottom:80px;}


.board .notice ul.t_notice li { flex: 0 0 calc(100% - 0px);}
.board .notice ul.t_notice li a { margin-bottom: 0px;}
.board .notice .view { padding:20px;}
.board .notice .view h3 { padding:20px 0 20px 0 !important; font-size:1.5em !important;}

.board .contact { flex-direction: column; }
.board .contact .c_infor, .board .contact .c_form, .consulting .FAQ ul.box2 li { flex: 0 0 100%; }


.pc { display:none;}
.mb { display:block;}
}

@media all and (max-width: 640px) {
#container #sub_contents ul.box,  #container #sub_contents section > ul.box2 { gap: 20px;}
.company .overview ul.certify li, .IT .development ul.skill li { flex: 0 0 calc((100% - 20px) / 2);}

.company .overview ul.intro li { padding:20px;}
.board .contact a .button_t { margin-bottom:30px;}

.IT .reference > ul > li, .IT .operation ul.oper li { flex: 0 0 100%;}

}
@media all and (max-width: 460px) {
#container #sub_contents h2 { font-size: 2.5em;}
.IT .m_business > ul > li i, .IT .operation ul.oper li i { font-size:1.8em !important; width:30px; margin-right:20px;} 
.IT .m_business > ul > li h3, .IT .operation ul.oper li h3 { font-size:1.3em !important;} 
.IT .m_business > ul > li span, .IT .operation ul.oper li span { font-size:1.1em; padding-left:50px; }
.IT .operation ul.oper li span { margin-bottom:0px; }
.IT .m_business ul > li ul { gap: 7px; margin-left:50px;}

.IT .operation .wrap_out ul.import li { font-size:1em; }
.IT .operation .wrap_out ul.import li strong { font-size:30px;}

.product .left ul.box li { flex: 0 0 100%; padding:25px 12% !important;}

}

@media all and (max-width: 360px) {
.company .overview ul.certify li, .IT .development ul.skill li, .IT .development > ul.steps li { flex: 0 0 100% ;}
}