/* 한유경영시스템 — 예전 홈페이지(webpeople 제작) 디자인을 그대로 옮기고 화면 크기에 맞게 보정 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: #555;
  font-family: "Nanum Gothic", "나눔고딕", "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: 12px; line-height: 1.2; word-break: keep-all;
}
img { border: 0; max-width: 100%; height: auto; }
a { color: #555; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
:focus-visible { outline: 2px solid #0c4da2; outline-offset: 2px; }

/* ---------- 상단 ---------- */
.site-header { border-bottom: 1px solid #ddd; background: #fff; }
.site-header .wrap { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 20px; min-height: 100px; padding: 0 10px; }
.brand { display: block; flex: none; }
.brand img { display: block; width: 348px; }
.nav { margin-left: auto; display: flex; align-items: center; }
.nav summary {
  display: block; padding: 10px 0 10px 40px; color: #444; font-size: 17px; font-weight: 700;
  cursor: pointer; list-style: none;
}
.nav summary::-webkit-details-marker { display: none; }
.nav summary:hover, .nav details[open] summary { color: #0c4da2; }
.nav details { position: relative; }
.nav .menu {
  position: absolute; top: calc(100% + 8px); left: 20px; z-index: 20; min-width: 130px;
  background: #fff; border: 1px solid #abb2bc; padding: 10px;
}
.nav .menu a { display: block; padding: 3px 10px; color: #777; font-size: 13px; font-weight: 700; line-height: 1.8; white-space: nowrap; }
.nav .menu a:hover, .nav .menu a[aria-current="page"] { color: #0c4da2; text-decoration: none; }
.tel { flex: none; margin-left: 30px; color: #0c4da2; font-weight: 800; font-size: 17px; }
.tel:hover { text-decoration: none; color: #004e91; }
.menu-toggle { display: none; }

/* ---------- 메인 비주얼 ---------- */
#visual { width: 100%; height: 450px; background: #05070f url('/images/common/mimg.jpg') no-repeat center top; }
#visual .vwrap { position: relative; max-width: 1000px; height: 100%; margin: 0 auto; }
.mtxt01 { position: absolute; left: 570px; top: 220px; }
.mtxt01 p { margin: 0; line-height: 0; }
.mtxt01 img { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mtxt01 p { opacity: 0; transform: translateY(50px); animation: mtxt-in .4s cubic-bezier(.08,.82,.17,1) forwards; }
  #mtxt01_01 { animation-delay: 1.5s; }
  #mtxt01_02 { animation-delay: 1.9s; }
  #mtxt01_03 { animation-delay: 2.3s; }
  #mtxt01_04 { animation-delay: 2.7s; }
}
@keyframes mtxt-in { to { opacity: 1; transform: none; } }

/* ---------- 메인 함께한 기업 ---------- */
.home-clients { padding: 40px 0 50px; }
.hc-wrap { max-width: 1000px; margin: 0 auto; padding: 0 10px; }
.hc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.hc-head h2 { margin: 0; font-size: 20px; color: #000; font-weight: 700; }
.hc-head a { font-size: 13px; color: #0c4da2; }

/* ---------- 사업실적 로고 ---------- */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; margin: 0; padding: 10px 0 0; list-style: none; }
.home-clients .logos { grid-template-columns: repeat(4, 1fr); }
.logos li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0; padding: 0; }
.logos .box { display: flex; align-items: center; justify-content: center; width: 100%; height: 96px; border: 1px solid #d2d2d2; padding: 5px; background: #fff; }
.logos img { max-height: 84px; max-width: 198px; width: auto; object-fit: contain; }
.logos span { font-size: 14px; color: #555; line-height: 1.4; }
.logos .nologo { font-size: 15px; font-weight: 700; color: #004e91; }

/* ---------- 서브 배너 ---------- */
.svisual { height: 130px; width: 100%; border-bottom: 1px solid #ddd; background: #004e91 no-repeat center top; }
#svisaul1 { background-image: url('/images/common/simg1.jpg'); }
#svisaul2 { background-image: url('/images/common/simg2.jpg'); }
#svisaul3 { background-image: url('/images/common/simg3.jpg'); }
#svisaul4 { background-image: url('/images/common/simg4.jpg'); }
#svisaul5 { background-image: url('/images/common/simg5.jpg'); }
.svisual .stxt { max-width: 1000px; margin: 0 auto; color: #fff; text-align: right; padding: 40px 10px 0 0; font-size: 20px; font-weight: 700; line-height: 130%; letter-spacing: -1px; }
.svisual .stxt u { text-decoration: none; font-size: 13px; letter-spacing: 0; }

/* ---------- 서브 본문 틀 ---------- */
#sub { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; padding: 0 0 30px; }
.sleft { flex: 0 0 200px; padding: 0 0 30px; }
.sleft dl { margin: 0; }
.sleft dt { font-weight: 700; color: #0169ba; font-size: 26px; line-height: 150%; height: 70px; padding: 30px 0 0; border-bottom: 2px solid #017eba; }
.sleft dd { margin: 0; }
.sleft dd p { margin: 0; border-bottom: 1px solid #ddd; padding: 11px 0 13px; background: url('/images/common/sleft_arrow.gif') no-repeat right; }
.sleft dd p.over { background: #0c4da2 url('/images/common/sleft_arrow_o.gif') no-repeat right; }
.sleft dd a { display: block; font-size: 15px; font-weight: 700; color: #444; padding: 0 0 0 15px; line-height: 110%; }
.sleft dd a:hover { color: #004e91; text-decoration: none; }
.sleft dd p.over a { color: #fff; }
.sleft .cs { margin: 20px 0 0; }
.scon_body { flex: 0 1 770px; min-width: 0; padding: 0 0 20px; position: relative; }
.smap { color: #666; font-size: 13px; padding: 20px 0 0; }
.smap span { background: url('/images/common/smap_icon.gif') no-repeat left; padding: 0 0 0 20px; }
.stitle { padding: 20px 0 15px; width: 100%; }
.stitle h1 { margin: 0; font-size: 30px; color: #444; font-weight: 700; line-height: 150%; }

/* ---------- 하단 ---------- */
#footer { width: 100%; background: #f6f6f6; padding: 25px 0; border-top: 1px solid #ddd; }
#foot { max-width: 1000px; margin: 0 auto; position: relative; display: flex; gap: 35px; padding: 0 10px; }
#foot p { margin: 0; color: #666; font-size: 12px; line-height: 150%; }
#foot .flogo { flex: none; }
#foot a { color: #666; }

/* ---------- 본문(예전 홈페이지 본문 영역) 기본값 ---------- */
.legacy { font-size: 12px; color: #555; line-height: 14px; }
.legacy div, .legacy h1, .legacy h2, .legacy h3, .legacy h4, .legacy h5, .legacy h6, .legacy ul, .legacy ol, .legacy li,
.legacy dl, .legacy dt, .legacy dd, .legacy form, .legacy fieldset, .legacy p {
  margin: 0; padding: 0; font-size: 12px; line-height: 14px; color: #555; list-style: none; border: none;
}
.legacy table { border-collapse: separate; border-spacing: 0; }
.legacy a:link, .legacy a:visited { color: #555; text-decoration: none; }
.legacy a:hover { color: #000; text-decoration: underline; }
.legacy .table-scroll { overflow-x: auto; }
.legacy .table1 th.t {border-top:2px solid #333;}
.legacy .table1 td.t {border-top:2px solid #333;}
.legacy .table1 th {border-bottom:1px solid #dddddd; border-right:1px solid #dddddd; background:#f7f7f7; text-align:center; color:#333; font-size:13px; padding:10px 0 10px 0}
.legacy .table1 td {font-size:13px;  padding:10px 0 10px 10px; border-bottom:1px solid #dddddd;}
.legacy .table2 th {text-align:left; font-size:18px; color:#0c4da2; font-weight:bold; line-height:150%; vertical-align:top}
.legacy .table2 td {font-size:14px; color:#666;  text-align:left; line-height:200%}
.legacy .table2 td SPAN {font-weight:bold; padding: 0 10px 0 0}
.legacy .table3 th.t {border-top:2px solid #0062c3; border-bottom:1px solid #ccc}
.legacy .table3 th {background:#f7f8fb; border-bottom:1px solid #ccc; padding:10px 0 10px 0; text-align:center; font-weight:600; font-size:14px; color:#333; line-height:150%}
.legacy .table3 td.t {border-top:2px solid #0062c3; border-bottom:1px solid #ccc}
.legacy .table3 td {border-bottom:1px solid #ccc; padding:10px; font-size:13px; line-height:150%;  border-left:1px solid #ccc;}
.legacy .table3 td.e {text-align:center;  border-left:none;}
.legacy .table3 td.ec {text-align:center;}
.legacy .table3 td span {font-weight:600;  color:#1999d5; font-size:14px;}
.legacy .table4 th.e {border-left:none}
.legacy .table4 th {border-top:2px solid #0062c3; background:#f7f8fb; border-bottom:1px solid #ccc;border-left:1px solid #ccc; padding:10px 0 10px 0; font-weight:600; font-size:14px; color:#333; line-height:150%; text-align:center;}
.legacy .table4 td.e {border-left:none; color:#333; background:#fafafa; font-weight:600; font-size:13px}
.legacy .table4 td.e1 {border-left:none; color:#333; background:#none; font-weight: normal; font-size:13px}
.legacy .table4 td.e2 {border-left:none; color:#333; background:#fafafa; text-align:center; font-weight:600; font-size:13px}
.legacy .table4 td {border-bottom:1px solid #ccc;  border-left:1px solid #ccc;padding:10px; font-size:13px; line-height:150%;}
.legacy .table5 td {font-weight:normal; font-size:14px; color:#666; vertical-align:top; line-height:180%; padding:0 0 4px 0}
.legacy .table6 th {text-align:left; font-size:14px; color:#666; vertical-align:top; line-height:180%; padding:0 0 4px 0}
.legacy .table6 td {font-weight:normal; font-size:14px; color:#666; vertical-align:top; line-height:180%; padding:0 0 4px 15px}
.legacy .table7 th.e {border-left:none}
.legacy .table7 th {border-top:2px solid #0062c3; background:#f7f8fb; border-bottom:1px solid #ccc;border-left:1px solid #ccc; padding:10px 0 10px 0; font-weight:600; font-size:14px; color:#333; line-height:150%; text-align:center;}
.legacy .table7 td.e {border-left:none; color:#333; background:#fafafa; font-weight:600; font-size:13px}
.legacy .table7 td {border-bottom:1px solid #ccc; text-align:center;  border-left:1px solid #ccc;padding:10px; font-size:13px; line-height:150%;}
.legacy .s01_3 {padding:0 0 30px 0; position:relative;}
.legacy .s01_3 P {font-weight:600; font-size:16px; color:#000; line-height:180%}
.legacy .s01_3 P.txt {padding:10px 0 0 0}
.legacy .s01_3 P.txt u {text-decoration:none;font-size:11px; font-weight:normal; color:#666;}
.legacy .s01_3 P.txt2 {font-weight:normal; font-size:14px; color:#666; padding:0 0 0 20px}
.legacy .s01_3 P.txt2 span {font-weight:600;  color:#1999d5;}
.legacy .s01_3 P.txt2  li {font-weight:normal; font-size:14px; color:#666}
.legacy .tab1_btn {padding: 0 0 15px 0; height:50px}
.legacy .tab1_btn ul {border-left:1px solid #ccc;}
.legacy .tab1_btn li {float: left;  border-top:1px solid #ccc; border-right:1px solid #ccc;  border-bottom:1px solid #ccc; background:#f2f2f2; width:19.8%; text-align:center;  padding:12px 0 12px 0}
.legacy .tab1_btn li.e {float: left; border-left:1px solid #ccc;  border-top:1px solid #ccc; border-right:1px solid #ccc;  border-bottom:1px solid #ccc; background:#f2f2f2; width:19.8%; text-align:center;  padding:12px 0 12px 0}
.legacy .tab1_btn li a {font-size:15px; color:#555}
.legacy .tab1_btn li.over {background:#0075c1;  border-bottom:1px solid #0075c1; width:20.1%; position:relative}
.legacy .tab1_btn li.over a {color:#fff}
.legacy .txt_box1 li {padding:0 0 5px 0}
.legacy .txt_box1 li p {border:1px solid #bed7e2; background:#f8fbfc; padding:0 0 0 10px; font-size:14px; color:#666;}
.legacy .txt_box1 li.txt_box1_s {padding:0 0 0 20px}
.legacy .txt_box1 li.txt_box1_s p {border:1px solid #eee; background:#fafafa; padding:0 0 0 10px; font-size:13px; color:#666; font-weight:normal}
.legacy .img_box1 {border:1px solid #CCC; text-align: center; padding:10px}
.legacy .stxt_title1 {font-weight:600; font-size:19px; color:#0062c3; line-height:180%; padding:10px 0 10px 0}
.legacy .stxt_title1  span {background:url('/images/txt/bullet1.gif') no-repeat left; padding:0 0 0 20px; color:#0062c3}
.legacy .tab1 {background:url('/images/txt/line_f.jpg') bottom repeat-x; width:100%}
.legacy .tab1 li {float:left; font-size:14px; color:#666; width:20%; text-align:center}
.legacy .tab1 li.down {border:1px solid #cfcfcf;background:#f6f6f6;  padding:10px 0 10px 0; width:33%}
.legacy .tab1 li.over {border-top:2px solid #626d77; border-left:2px solid #626d77; border-right:2px solid #626d77; font-weight:bold; color:#0774bf ;  padding:8px 0 10px 0; width:32.3%}
.legacy .btn_blue {float:left; font-size:14px; display:block; padding:10px; text-align:center;  font-weight:600; background:#0c4da2; height:20px; border-right:2px solid #FFF}
.legacy .btn_gray {float:left; font-size:14px; display:block; padding:10px; text-align:center;  font-weight:600; background:#666; height:20px}
.legacy .txt_center {text-align:center}
.legacy .txt_right {text-align:right}
.legacy .txt_left {text-align:left}
.legacy .left_pad02 {padding:0 0 0 20px}

/* ---------- 화면이 좁을 때(태블릿·휴대폰) ---------- */
@media (max-width: 1020px) {
  .site-header .wrap { flex-wrap: wrap; gap: 10px; min-height: 70px; padding: 10px 16px; }
  .brand img { width: 220px; }
  .tel { margin-left: auto; order: 2; font-size: 15px; }
  .menu-toggle { display: block; order: 3; border: 1px solid #ccc; background: #fff; color: #444; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
  .nav { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; margin: 0; }
  .nav.open { display: flex; }
  .nav summary { padding: 12px 4px; border-top: 1px solid #eee; }
  .nav .menu { position: static; border: 0; padding: 0 0 8px 12px; }
  .nav .menu a { font-size: 14px; padding: 6px 4px; }

  #visual { height: auto; padding-top: 36vw; background-color: #0b1030; background-size: 160vw auto; background-position: 35% top; }
  #visual .vwrap { height: auto; }
  .mtxt01 { position: static; padding: 14px 16px 20px; }
  .mtxt01 img { width: min(430px, 100%); }

  .home-clients .logos { grid-template-columns: repeat(2, 1fr); }
  .hc-wrap { padding: 0 16px; }

  .svisual { height: 90px; background-size: auto 100%; }
  .svisual .stxt { padding: 22px 16px 0; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

  #sub { flex-direction: column; gap: 0; padding: 0 16px 30px; }
  .sleft { order: 2; flex-basis: auto; padding-top: 20px; }
  .sleft dt { font-size: 22px; height: auto; padding: 10px 0; }
  .sleft .cs { display: none; }
  .scon_body { flex-basis: auto; }
  .stitle h1 { font-size: 24px; }

  /* 예전 본문의 고정 위치·여백을 좁은 화면에 맞게 */
  .legacy [style*="position:absolute"] { position: static !important; padding: 0 0 10px !important; }
  .legacy [style*="padding:0 0 0 180px"], .legacy [style*="150px"] { padding-left: 0 !important; }
  .legacy [style*="background:url"] { background-image: none !important; }
  .legacy { overflow-x: auto; }
  .legacy table { min-width: 560px; }
  .legacy .table5, .legacy .table6 { min-width: 0; }
  .legacy .tab1_btn li, .legacy .tab1_btn li.over { width: 50%; }

  #foot { flex-direction: column; gap: 10px; padding: 0 16px; }
}
@media (max-width: 480px) {
  .brand img { width: 168px; }
  .tel { font-size: 14px; }
  .home-clients .logos, .logos { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .logos img { max-width: 130px; max-height: 60px; }
  .logos .box { height: 76px; }
}