/* 한유경영시스템 — 예전 홈페이지(webpeople 제작) 디자인을 그대로 옮기고 화면 크기에 맞게 보정 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: #555;
  font-family: Gulim, "굴림", AppleGothic, "Apple SD Gothic Neo", 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; }
.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; } }

/* ---------- 메인 아래쪽 3단 (예전 홈페이지 구성) ---------- */
#container { max-width: 1000px; margin: 0 auto; padding: 0 10px; }
.main { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 40px 0; list-style: none; }
.main .m-col { padding: 0 30px; min-height: 140px; }
.main .m-col:first-child { padding-left: 0; }
.main .m-col:nth-child(2) { border-left: 1px solid #eee; border-right: 1px solid #eee; }
.main .m-col:last-child { padding-right: 0; }
.main dl, .main dd { margin: 0; }
.main dt { position: relative; font-size: 16px; color: #000; font-weight: 700; line-height: 150%; }
.main dt .more { position: absolute; right: 0; top: 2px; line-height: 0; }
.main dt .icon4 { position: absolute; right: 10px; top: 30px; line-height: 0; }
.main .sub { margin: 6px 0 18px; font-size: 12px; color: #666; line-height: 1.4; }
.main .m_icon { display: flex; gap: 0; justify-content: space-between; max-width: 260px; }
.main .m_icon a { display: block; padding: 46px 0 0; background-repeat: no-repeat; background-position: center top; font-size: 13px; color: #333; font-weight: 700; text-align: center; min-width: 60px; }
.main .m_icon a:hover { color: #0c4da2; text-decoration: none; }
.main .m_icon1 { background-image: url('/images/common/m_icon1.jpg'); }
.main .m_icon2 { background-image: url('/images/common/m_icon2.jpg'); }
.main .m_icon3 { background-image: url('/images/common/m_icon3.jpg'); }
.main .tel-big { margin: 0; color: #555; font-size: 35px; font-weight: 700; line-height: 30px; padding: 0 0 20px; }
.main .tel-big a { color: #555; }
.main .tel-big a:hover { text-decoration: none; }
.main .tel-big u { text-decoration: none; color: #777; font-size: 23px; }

/* 사업실적 한 개씩 위로 넘어가는 로고 */
.ticker { position: relative; width: 250px; max-width: 100%; height: 72px; overflow: hidden; border: 1px solid #eee; background: #fff; }
.ticker .tk-track { position: absolute; left: 0; right: 0; top: 0; }
.ticker .tk-item { display: flex; align-items: center; justify-content: center; height: 70px; padding: 6px; }
.ticker .tk-item img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.ticker .tk-track.moving { transition: transform .6s ease; }

.main_notice { border-top: 1px solid #ddd; }
.main_notice ul { max-width: 1000px; margin: 0 auto; padding: 15px 10px; display: flex; align-items: center; gap: 30px; list-style: none; }
.main_notice li { font-size: 13px; color: #444; }
.main_notice .t { font-weight: 700; }
.main_notice .n { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.main_notice .n a { font-size: 12px; color: #666; }
.main_notice .m { line-height: 0; }

/* ---------- 사업실적 로고 ---------- */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; margin: 0; padding: 10px 0 0; list-style: none; }
.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: 1.2; }
.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: 1.2; 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}

/* ---------- 인사말 ---------- */
.legacy .greeting p { font-size: 14px; line-height: 1.8; color: #555; margin: 0 0 16px; }
.legacy .greeting .g-lead { padding: 30px 0 10px; font-size: 18px; line-height: 1.6; color: #000; }
.legacy .greeting .g-main { overflow: hidden; }
.legacy .greeting .g-img { float: right; margin: 0 0 10px 20px; }
.legacy .greeting .g-blue { font-size: 16px; line-height: 1.9; font-weight: 700; color: #004e91; }
.legacy .greeting .g-blue strong { font-size: 18px; color: #003a6c; }
.legacy .greeting .g-sign { padding: 20px 0; text-align: right; font-size: 14px; font-weight: 700; color: #333; }

/* ---------- 편집 화면에서 덧붙인 내용·첨부파일 ---------- */
.legacy .extra { margin: 30px 0 0; font-size: 14px; line-height: 1.8; color: #555; }
.legacy .extra p, .legacy .extra li { font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.legacy .extra ul, .legacy .extra ol { padding-left: 20px; margin: 0 0 10px; }
.legacy .extra ul li { list-style: disc; } .legacy .extra ol li { list-style: decimal; }
.legacy .extra h1, .legacy .extra h2, .legacy .extra h3 { font-size: 19px; line-height: 1.6; color: #0062c3; font-weight: 700; margin: 20px 0 10px; }
.legacy .extra img { max-width: 100%; height: auto; }
.legacy .extra table { border-collapse: collapse; margin: 0 0 10px; }
.legacy .extra th, .legacy .extra td { border: 1px solid #ccc; padding: 8px 10px; font-size: 13px; line-height: 1.5; }
.legacy .extra th { background: #f7f8fb; }
.legacy .attach { margin: 30px 0 0; border-top: 2px solid #0062c3; border-bottom: 1px solid #ccc; padding: 12px 10px; background: #f7f8fb; }
.legacy .attach .attach-title { font-size: 14px; font-weight: 700; color: #333; margin: 0 0 8px; }
.legacy .attach li { font-size: 13px; line-height: 1.8; }
.legacy .attach a { color: #0c4da2; text-decoration: underline; }

/* ---------- 공지사항 (예전 게시판 모양) ---------- */
.legacy .notice-list { border-collapse: collapse; }
.legacy .notice-list th { border-top: 2px solid #63a5c7; border-bottom: 1px solid #63a5c7; background: #f5f9fb; color: #111; font-size: 14px; font-weight: 700; padding: 10px 0; text-align: center; }
.legacy .notice-list td { border-bottom: 1px solid #e2e2e2; height: 40px; font-size: 13px; color: #666; text-align: center; padding: 0 6px; }
.legacy .notice-list td.tt { text-align: left; }
.legacy .notice-list td.tt a { color: #111; }
.legacy .notice-list .no { width: 60px; } .legacy .notice-list .w { width: 90px; } .legacy .notice-list .d { width: 110px; }
.legacy .s_form_t { border-collapse: collapse; }
.legacy .s_form_t th { border-top: 1px solid #c5c5c5; background: #f4f4f4; text-align: center; color: #444; font-size: 13px; padding: 10px 0; font-weight: 700; }
.legacy .s_form_t td { border-top: 1px solid #c5c5c5; padding: 10px; font-size: 13px; }
.legacy .notice-head { border-bottom: 1px solid #c5c5c5; }
.legacy .notice-head .nt { font-size: 15px; font-weight: 700; line-height: 1.5; }
.legacy .notice-body { padding: 20px 10px; border-bottom: 1px solid #c5c5c5; font-size: 13px; line-height: 1.6; overflow-x: auto; }
.legacy .notice-body p, .legacy .notice-body div, .legacy .notice-body span, .legacy .notice-body td { line-height: 1.6; }
.legacy .notice-body img { max-width: 100%; height: auto; }
.legacy .notice-back { margin: 20px 0 0; text-align: right; }
.legacy .notice-back a { display: inline-block; padding: 8px 18px; background: #666; color: #fff; font-size: 13px; font-weight: 700; }

/* ---------- 화면이 좁을 때(태블릿·휴대폰) ---------- */
@media (max-width: 1020px) {
  .site-header .wrap { flex-wrap: wrap; gap: 10px; min-height: 70px; padding: 10px 16px; }
  .brand img { width: 220px; }
  .menu-toggle { margin-left: auto; 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%); }

  #container { padding: 0 16px; }
  .main { grid-template-columns: 1fr; padding: 24px 0; }
  .main .m-col, .main .m-col:first-child, .main .m-col:last-child { padding: 18px 0; min-height: 0; border: 0; border-bottom: 1px solid #eee; }
  .main .m-col:nth-child(2) { border-left: 0; border-right: 0; }
  .main .m_icon { max-width: 300px; }
  .main_notice ul { padding: 15px 16px; gap: 14px; }

  .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 .notice-list, .legacy .s_form_t { min-width: 0; }
  .legacy .notice-list .w { display: none; }
  .legacy .greeting .g-img { float: none; display: block; margin: 0 auto 16px; max-width: 70%; }
  .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; }
  .logos { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .logos img { max-width: 130px; max-height: 60px; }
  .logos .box { height: 76px; }
}

/* 글꼴 통일: 예전 게시판 편집기가 글마다 넣어 둔 굴림 지정은 무시하고 나눔고딕으로 보여 준다 (글 내용은 그대로) */
.legacy *, .notice-body *, .extra * { font-family: inherit !important; }
button, input, select, textarea { font-family: inherit; }

/* 편집 화면에서 새로 올린 본문 이미지 (본문 맨 아래) */
.legacy .page-images { margin-top: 20px; }
.legacy .page-images img { max-width: 100%; height: auto; }

/* ===== v1.1 페이지 본문 =====
   본문은 웹에디터가 그대로 지키는 기본 태그만 씀(제목 h3, 문단 p, 기울임 em, 굵게 strong, 목록 ul, 들여쓰기 blockquote, 표, 사진).
   예전 홈페이지 모양(■ 소제목, 파란 강조, 표 선)은 아래 규칙으로 입힌다. */
.doc { font-size: 14px; color: #666; }
.doc > :first-child { margin-top: 0 !important; }
.doc h1, .doc h2, .doc h3 { margin: 30px 0 0; padding: 10px 0 10px 20px; font-size: 16px; font-weight: 600; line-height: 180%; color: #0062c3;
  background: url('/images/txt/bullet1.gif') no-repeat 0 50%; }
.doc h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 180%; color: #000; }
.doc p { margin: 0; padding: 0 0 0 20px; font-size: 14px; line-height: 180%; color: #666; }
.doc em { font-style: normal; font-weight: 600; color: #1999d5; }
.doc strong { font-weight: 700; }
.doc u { text-decoration: underline; }
.doc a { color: #0c4da2; }
.doc blockquote { margin: 0; padding: 0 0 0 20px; border: 0; }
.doc blockquote > blockquote { padding-left: 20px; }
.doc ul, .doc ol { margin: 0; padding: 0; }
.doc li { list-style: none; padding: 0; }
.doc li p { padding: 0 0 0 1.5em; text-indent: -1.5em; }
.doc ol { counter-reset: n; }
.doc ol > li { counter-increment: n; }
.doc ol > li > p:first-child::before { content: counter(n) ". "; }
.doc img { display: block; max-width: calc(100% - 20px); height: auto; margin: 10px 0 10px 20px; }
.doc p + img, .doc img + img { margin-top: 20px; }
/* 표 (예전 table3·table4 모양) */
.doc table { width: 100% !important; margin: 10px 0 0; border-collapse: separate; border-spacing: 0; table-layout: auto; }
.doc th, .doc td { position: relative; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; padding: 10px; font-size: 13px; line-height: 150%; color: #555; vertical-align: middle; }
.doc .c0 { border-left: none; }  /* 맨 왼쪽 열만 왼쪽 선 없음 (빌드가 열 번호를 붙임) */
.doc tr:first-child > * { border-top: 2px solid #0062c3; }
.doc th { background: #fafafa; color: #333; font-weight: 600; text-align: left; }
/* 첫 줄이 모두 제목 칸인 표: 첫 줄 = 회색 제목 줄 */
.doc tr:first-child:not(:has(> td)) > th { background: #f7f8fb; font-size: 14px; text-align: center; padding: 10px 0; }
/* 왼쪽 칸이 제목인 표(예전 table3, 첫 줄에 내용 칸이 섞임): 왼쪽 제목 칸은 모두 같은 모양(가운데) */
.doc table:has(> tbody > tr:first-child > td) th { background: #f7f8fb; font-size: 14px; text-align: center; }
.doc th p, .doc td p { padding: 0; font-size: inherit; line-height: inherit; color: inherit; text-indent: 0; }
.doc th img, .doc td img { margin: 0; }
.doc table + p, .doc table + h4, .doc table + ul, .doc blockquote:has(> table:last-child) + p { margin-top: 18px; }
/* 글 옆에 붙는 인증 마크 (예전 페이지와 같은 배치) */
.doc img[src$="s03_1_img2.jpg"], .doc img[src$="s03_2_img1.jpg"], .doc img[src$="s03_3_img1.jpg"],
.doc img[src$="s04_2_img1.jpg"], .doc img[src$="s04_3_img1.jpg"] { float: left; margin: 0 20px 10px 0; }
.doc h1, .doc h2, .doc h3 { clear: both; }
.doc img[src$="s02_6_arrow.png"] { position: absolute; right: -25px; top: 7px; margin: 0; }
/* 인사말 */
.page-greeting > p { margin: 0 0 16px; padding: 0; line-height: 1.8; }
.page-greeting > p:first-child { padding: 30px 0 10px; font-size: 18px; line-height: 1.6; color: #000; }
.page-greeting > img[src$="s01_1.jpg"] { float: right; margin: 0 0 10px 20px; }
.page-greeting em { font-size: 16px; line-height: 1.9; font-weight: 700; color: #004e91; }
.page-greeting em strong, .page-greeting strong em { font-size: 18px; color: #003a6c; }
.page-greeting > p:last-of-type { clear: both; padding: 20px 0; text-align: right; font-weight: 700; color: #333; }
/* 컨설팅 및 인증: 도식 가운데 */
.page-process img, .page-process-certification img { margin: 10px auto; }
/* 메인비즈 첫 줄 */
.page-mainbiz > img + p { padding: 10px 0 15px; font-size: 20px; font-weight: 600; }
.page-mainbiz > img + p em:nth-of-type(1) { color: #4666c0; } .page-mainbiz > img + p em:nth-of-type(2) { color: #f78723; } .page-mainbiz > img + p em:nth-of-type(3) { color: #999; }
.page-mainbiz > img + p em { font-weight: 600; }
/* ISO 14001 규격 주요 내용 상자 */
.page-iso14001 ul:has(ul) { padding: 0; }
.page-iso14001 ul:has(ul) > li { padding: 0 0 5px; }
.page-iso14001 ul:has(ul) li p { border: 1px solid #bed7e2; background: #f8fbfc; padding: 0 0 0 10px !important; text-indent: 0 !important; }
.page-iso14001 ul:has(ul) li ul { padding: 5px 0 0 20px; }
.page-iso14001 ul:has(ul) li li { padding: 0; }
.page-iso14001 ul:has(ul) li li p { border-color: #eee; background: #fafafa; font-size: 13px; }
@media (max-width: 1020px) {
  .doc img[src$="s03_1_img2.jpg"], .doc img[src$="s03_2_img1.jpg"], .doc img[src$="s03_3_img1.jpg"],
  .doc img[src$="s04_2_img1.jpg"], .doc img[src$="s04_3_img1.jpg"] { float: none; margin: 0 0 10px; }
  .page-greeting > img[src$="s01_1.jpg"] { float: none; margin: 0 auto 16px; max-width: 70%; }
  .doc p, .doc blockquote { padding-left: 0; }
  .doc img { margin-left: 0; max-width: 100%; }
}
.doc p { overflow-wrap: anywhere; }
.doc td p, .doc th p { overflow-wrap: normal; }
/* 기업부설연구소 진행 순서 표 (예전 table7: 가운데 정렬, 40px 들여쓰기) */
.page-rnd blockquote > table { margin-left: 20px; width: calc(100% - 20px) !important; }
.page-rnd blockquote td { text-align: center; }
/* ISO 22000: 두 표를 나란히 (예전 배치) */
.page-iso22000 > blockquote > table:nth-of-type(1) { float: left; width: 55% !important; }
.page-iso22000 > blockquote > table:nth-of-type(2) { float: right; width: 40% !important; }
.page-iso22000 > blockquote:has(> table + table)::after { content: ""; display: block; clear: both; }
.page-iso22000 th:has(img[src$="s02_6_arrow.png"]) { background: #f7f8fb; font-size: 18px; color: #0062c3; }
@media (max-width: 1020px) { .page-iso22000 > blockquote > table:nth-of-type(n) { float: none; width: 100% !important; } }
.doc blockquote p { padding-left: 0; }
.doc blockquote li p { padding-left: 1.5em; }
.doc blockquote + p:has(> strong:only-child) { margin-top: 14px; }
.doc > ul, .doc > ol { padding-left: 20px; }
/* KC 인증 기대효과 표: 왼쪽 칸 가운데 (예전과 같게) */
.page-kc > table:first-of-type th { text-align: center; }

/* ISO 13485 요구사항 표·ISO 22000 요구사항 표: 큰 구분 번호 칸 가운데 (예전과 같게) */
.page-iso13485 table:first-of-type .c0, .page-iso13485 table:first-of-type .c2 { text-align: center; }
.page-iso22000 > table:last-of-type .c0 { text-align: center; }
.page-iso22000 > table:last-of-type th { text-align: left !important; background: #f8fbfc !important; font-size: 13px !important; }
/* ISO 22000: 나란히 놓은 두 표 위쪽 맞춤 */
.page-iso22000 > blockquote > table { margin-top: 10px !important; }
/* 메인비즈: 로고 옆은 영문 한 줄, 그 아래 글은 로고 밑에서 시작 */
.page-mainbiz > img + p + p { clear: left; padding-top: 10px; }

/* v1.1 다듬기 */
/* 문단은 양쪽 맞춤 (엔터로 끊은 줄은 그대로, 넘쳐서 넘어간 줄만 오른쪽 끝이 맞음) */
.doc > p, .doc blockquote > p, .doc li > p { text-align: justify; text-justify: inter-character; }
.doc td { text-align: justify; text-justify: inter-character; }
.doc td p { text-align: inherit; }
.doc li { font-size: 14px; line-height: 180%; color: #666; }
.doc td li, .doc th li, .doc td ul, .doc th ul { font-size: inherit; line-height: inherit; color: inherit; }
/* 신문식 줄바꿈: 줄 끝에서는 낱말 중간에서도 끊어서 양쪽 맞춤 때 글자 사이가 벌어지지 않게 */
.doc p, .doc li, .doc td { word-break: normal; overflow-wrap: break-word; } /* 한글은 글자 단위, 영어는 단어 단위로 줄바꿈 */
.doc > p, .doc blockquote > p, .doc > ul li { overflow-wrap: anywhere; }

/* ===== v1.1 다듬기 2 ===== */
/* 글은 왼쪽 정렬 + 신문식 줄바꿈 (줄 끝이 거의 맞고 글자 사이는 벌어지지 않음) */
.doc > p, .doc blockquote > p, .doc li > p, .doc td { text-align: left !important; }
/* 들여쓰기(인용) 한 단계 = 20px. 안의 글·목록은 본문보다 한 칸 더, 표는 본문 글 위치에 */
.doc blockquote { padding-left: 20px; }
.doc blockquote > p, .doc blockquote > ul, .doc blockquote > ol { padding-left: 20px !important; }
.doc blockquote > table { margin-left: 0; }
/* 번호·기호 줄: 둘째 줄부터 기호 뒤 글자에 맞춤 */
.doc li p, .doc blockquote li p { padding-left: 0; text-indent: 0; }
.doc p.hang { display: flex; align-items: baseline; }
.doc p.hang > .mk { flex: none; white-space: pre; }
.doc p.hang > .tx { flex: 1 1 auto; min-width: 0; }