/* 공통 */ * {margin:0px; padding:0px;letter-spacing:0px;font-family:'EISO Sans','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-text-size-adjust:none; line-height:150%; font-size:14px; color:#515456;} html, body {height:100%; padding:0px; margin:0px;} ul,ol,li{list-style:none outside} img { border:0px;} td, div, th, p {font-family:'EISO Sans','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:14px; COLOR:#515456;} A:visited {text-decoration:none;color:#515456;font-family:'EISO Sans','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;} A:hover {text-decoration:underline;color:#222222;} A:link {text-decoration:none;color:#515456;font-family:'EISO Sans','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;} .blind {position:absolute; left:-8000px} .blind2 {position:absolute; left:-8000px; display:none;} #skip-navi {position:absolute; left:-8000px} @font-face { /* 2026-10-07: 원본부터 404 이던 자체 글꼴 파일(eot/woff/ttf) 대신, 설치된 나눔고딕이 있으면 쓴다. 화면은 전과 같다. */ font-family:'NanumGothic'; src:local('NanumGothic'), local('나눔고딕'); } /**padding**/ .pad_b15 {padding-bottom:15px;} .pad_b20 {padding-bottom:20px;} .pad_b30 {padding-bottom:30px;} .pad_b40 {padding-bottom:40px;} .pad_r5 {padding-right:5px;} .pad_r60 {padding-right:60px;} .pad_t30 {padding-top:30px;} #wrap { margin:0 auto; position:relative; min-width:1200px; width:100%;} #header {position:relative; width:100%; height:100px; margin:0px auto; z-index:33; border-bottom:0px solid #0c61b8;} #header #hd_ar {position:absolute; width:1200px; height:100px; background-color:#f3f7f9; top:0px; left:50%; margin-left:-600px; z-index:33;} #header #hd_ar h1 {position:absolute; top:30px; left:0px; border:0px solid #F00; overflow:hidden; z-index:2000;} #menu-box {position:absolute; top:30px; left:0px; z-index:1000; width:100%; min-height:70px; border-bottom:0px solid #fff; background:url(/api/public/sites/eisocokr/assets/d9422addddaf6181bc35bdbd945590ca101b2095037723173c2613a5276e26da.png) top center no-repeat;} #header #top_ar {position:absolute; top:40px; right:0px; width:265px; height:30px; border:0px solid #F00; overflow:hidden; z-index:2000;} #header #top_ar li {float:left;} #mainimg {position:relative; width:1200px; margin:0px auto; height:550px; z-index:1;border-bottom:0px solid #dbdbdb ; overflow:hidden;} #mainimg .mainEf {height:550px} #mainimg .mainEf li {height:550px; width:100%; position:absolute; top:0px; left:0px; display:none; background-repeat:no-repeat; background-position:50% 0px;} #mainimg .mvbtn {cursor:pointer} #mainimg .wrapper {height:550px} #mainimg .mvimg {width:100%; height:550px; background-repeat:no-repeat; background-position:50% 0px; border:0px solid #f00} #mainimg #img1 {background-image:url(/api/public/sites/eisocokr/assets/ee836b21f999e7e487dd01705e366430390594139f14ca1642b200a174420924.webp);} #mainimg #img2 {background-image:url(/api/public/sites/eisocokr/assets/ced3de173047961e52999f20c2cf347c1cf6cd9c50fae8dbcf2b70fb925bfeba.webp);} #mainimg #img3 {background-image:url(/api/public/sites/eisocokr/assets/d21be679c6fff061b457c0a6b2215e988e5d27921d3d12fc6d533c4de0de1e94.webp);} #mbn_ar {position:relative; width:1200px; height:170px; margin:0px auto; padding:50px 0px; overflow:hidden;} #mbn_ar li {float:left; font-size:0px;} #main_bot {position:relative; width:100%; height:280px; padding:50px 0px; margin:0px auto; background-color:#f6f6f6; overflow:hidden;} #mb_ar {position:relative; width:1200px; height:280px; margin:0px auto; overflow:hidden;} #mb_ar #main_not {float:left; width:400px; height:210px; padding:34px 39px; background-color:#fff; border:1px solid #e1e1e1; overflow:hidden;} #mb_ar #main_not h2 {position:relative; padding-bottom:25px; overflow:hidden;} #mb_ar #main_not li {position:relative; padding-bottom:9px;} #mb_ar #main_bn {float:left; width:350px; height:280px; padding:0px 30px; border:0px solid #e1e1e1; overflow:hidden;} #mb_ar #mc_ar {float:left; width:310px; height:280px; border:0px solid #e1e1e1; overflow:hidden;} /**sub**/ #sv1 {position:relative; width:1200px; margin:0px auto; height:250px; background-image:url(/api/public/sites/eisocokr/assets/42161eada40bd1e6cbc37ce195f781eb20e0be29582b3a205b6eaa54a8dc81d6.jpg); background-position:top center; background-repeat:no-repeat; z-index:22;} #sv2 {position:relative; width:1200px; margin:0px auto; height:250px; background-image:url(/api/public/sites/eisocokr/assets/f631a95bb7ce2220826a5402f3bd7cf5ae9827f2cb9dbaaa9fd19f9ac71ff71b.jpg); background-position:top center; background-repeat:no-repeat; z-index:22;} #sv3 {position:relative; width:1200px; margin:0px auto; height:250px; background-image:url(/api/public/sites/eisocokr/assets/4734656565a023d08903aca94ccedc71986643987a2f4c42349df8f187fe8714.jpg); background-position:top center; background-repeat:no-repeat; z-index:22;} #sv4 {position:relative; width:1200px; margin:0px auto; height:250px; background-image:url(/api/public/sites/eisocokr/assets/2b1e401fc4c8aacbb19f9c2080efed0f5d53b024485c1f327df675058034f1ee.jpg); background-position:top center; background-repeat:no-repeat; z-index:22;} #con_ar {position:relative; width:100%; margin:0px auto; padding:40px 0px 60px 0px; background-color:#fff; border:0px solid #f00; overflow:hidden;} #container {position:relative; width:1200px; margin:0px auto; border:0px solid #f00; overflow:hidden;} #left_ar {float:left; width:240px; padding-right:60px; overflow:hidden;} #left_ar h2 {position:relative; width:240px; height:110px; text-align:center; margin-bottom:10px; line-height:120%; color:#fff; font-size:28px; font-weight:normal; padding-top:38px; box-sizing: border-box; background:url(/api/public/sites/eisocokr/assets/ab86ca3493d373a00ca735e87d516e0430ca07d24b0d2be126f8d4791dcbf22d.jpg) top center no-repeat;} #leftmenu2 li{position:relative; width:auto; font-size:14px; font-weight:normal; background:url(/api/public/sites/eisocokr/assets/d3241483d2dac1663a4c465d7788a1fbe3702e13d9d4425ff7acd83fd86df111.jpg) top center no-repeat;} #leftmenu2 a {display:block; padding-left:10px; padding-top:10px; height:30px; width:auto; color:#515456;} #leftmenu2 #leftOver {width:auto; background:url(/api/public/sites/eisocokr/assets/4ff539884c9e7bcc6e20194899d6074594a5cc575433ff8c41a67e89dbb7c056.jpg) top center no-repeat; border:0px solid #00f; color:#fff; font-weight:bold; z-index:5;} #leftmenu2 A:hover {text-decoration:none;color:#000;} #leftmenu2 A:active {text-decoration:none;color:#222;} #leftmenu2 .leftmenu-sub {display:none; width:auto; overflow:hidden;} #leftmenu2 .leftmenu-sub ul {background-color:#f8f8f8; width:auto; border-top:0px solid #e0e0e0} #leftmenu2 .leftmenu-sub ul li {font-size:13px; font-weight:normal; font-family:'EISO Sans','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:url(/api/public/sites/eisocokr/assets/0b86e2cdc23ea6a860efb8e2370ed267cf9d30f8f817292281b664f7e9c3068b.jpg) top center no-repeat; border:0px none} #leftmenu2 .leftmenu-sub ul li a { border:0px solid #f00; height:auto; padding:5px 10px 6px 22px; letter-spacing:0px; border-bottom:1px dashed #bbb;} #leftmenu2 .leftmenu-sub ul li a.sub-over {color:#111; height:auto; background:url(/api/public/sites/eisocokr/assets/4a1a59cb04fc3812cdc9f8450dea8902d53d1588d10c243e6d4008ddddcb81be.jpg) top center no-repeat; border-bottom:1px dashed #bbb;} #left_ban {position:relative; margin-top:60px;} #left_ban p { display:none; } #left_ban ul { color:#767676; padding:30px 32px; margin-top:30px; border:1px solid #ccc; background-color:#f9f9f9; } #left_ban ul li span { font-size:20px; font-weight:900; line-height:25px; } #left_ban ul li a {} #left_ban ul li { color:#454545; } #left_ban ul li.tell { font-size:26px; font-weight:600; } #left_ban ul li:first-child { font-size:16px; font-weight:600; margin-bottom:15px; } #left_ban ul li:last-child { color:#797979; } #right_ar {float:left; width:900px; overflow:hidden;} #tit_ar {position:relative; width:900px; margin:0px auto; font-size:30px; color:#222; padding-bottom:20px; border-bottom:1px solid #ddd;} #contents {position:relative; width:900px; margin:0px auto; padding-top:40px; min-height:450px; border:0px solid #f00; overflow:hidden;} /**table**/ .tbbst01 {border-top:2px solid #1b84d7; border-left:1px solid #ccc;} .tbbst01 th {border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#fafafa; text-align:center; font-weight:normal; color:#333; padding:10px;} .tbbst01 td {border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:10px;} .tbbst02 {border-top:2px solid #515456; border-left:1px solid #ccc;} .tbbst02 th {border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#fafafa; text-align:center; font-weight:normal; color:#333; padding:7px;} .tbbst02 th.stt {border-right:1px solid #ccc; border-bottom:1px solid #515456; background-color:#fafafa; text-align:center; font-weight:normal; color:#333; padding:7px;} .tbbst02 th.mdd {border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#fafafa; text-align:left; font-weight:normal; color:#333; padding:7px;} .tbbst02 td {border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:7px; text-align:center;} .tbbst02 td.mdd {border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:7px 7px 7px 20px; text-align:left;} .tbbst02 td.mdd02 {border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:7px 7px 7px 20px; text-align:left; font-weight:600; color:#3266a8;} .tbbst02 td.edd {border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-top:1px solid #777; padding:7px; text-align:center; background-color:#f5f5f5; color:#222; font-weight:600;} .tbbst03 td {text-align:left; vertical-align:top;} .tbbst04 {border-top:1px solid #777; border-left:1px solid #ccc;} .tbbst04 th {border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#fafafa; text-align:center; font-weight:normal; color:#333; padding:5px;} .tbbst04 td {border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:5px; text-align:center;} /**table**/ .tbb_tit {position:relative; width:900px; padding-bottom:20px; padding-top:10px; text-align:center; font-size:20px; font-weight:600; color:#222; background:url(/api/public/sites/eisocokr/assets/3edc0542c7f535ad9af6a091bfa06f7191f9a54abc5a220242567db17bed32ee.jpg) bottom center no-repeat; margin-bottom:30px; overflow:hidden;} .tbb_tit02 {position:relative; width:900px; padding-bottom:30px; padding-top:10px; text-align:center; font-size:20px; font-weight:500; color:#3379d1; margin-bottom:0px; overflow:hidden;} .iptst {padding:7px; height:20px; border:1px solid #ddd;} .ipt_btn {height:40px; padding:10px; text-align:center; color:#fff; font-weight:bold; background-color:#222; cursor:pointer; border:0px solid #f00; box-sizing: border-box;} .ipt_btn33 {display:block; float:left; width:100%; box-sizing: border-box; height:40px; padding:10px; text-align:center; border-radius: 2px; color:#fff; font-weight:bold; background-color:#f54646; border:0px solid #222; font-size:14px; box-sizing: border-box;} #login_box2 {position:relative; width:786px; margin:0px auto; padding:40px 50px; border:7px solid #eee;} #login_box2 li {padding-bottom:10px;} #jointbb {border-top:2px solid #666;} #jointbb th {padding:10px 0px 10px 15px; text-align:left; font-weight:normal; color:#333; background-color:#f9f9f9; border-right:1px solid #ddd; border-bottom:1px solid #ddd;} #jointbb td {padding:10px 0px 10px 15px; border-right:0px solid #ddd; border-bottom:1px solid #ddd;} .ipt_ar {height:35px; padding:5px 15px; border:1px solid #ddd; box-sizing: border-box;} .ipt_ar2 {height:30px; padding:5px 15px; border:1px solid #ddd; box-sizing: border-box;} .ipt_ar3 {height:30px; padding:5px 15px; margin:5px 0px; border:1px solid #ddd; box-sizing: border-box;} .st0301 {position:relative; width:550px; min-height:500px; padding-right:350px; background:url(/api/public/sites/eisocokr/assets/680ed9b4133296962ca12dd052576c2c28143041a3dfcfadae2f1237ad59d173.jpg) top right no-repeat; overflow:hidden;} #tab_btn {position:relative; width:900px; margin-bottom:30px; overflow:hidden;} #tab_btn li {float:left; width:295px; margin-right:5px; margin-bottom:5px; height:40px; background-color:#f9f9f9; border:1px solid #ddd; padding:10px 0px; text-align:center; box-sizing: border-box;} #tab_btn li.on {float:left; width:295px; margin-right:5px; margin-bottom:5px; height:40px; background-color:#2ba600; border:1px solid #2ba600; padding:10px 0px; text-align:center; box-sizing: border-box;} .tbox {position:relative; width:820px; height:auto; padding:29px 39px; border:1px solid #ddd; background-color:#fbfbfb; border-radius:3px; overflow:hidden;} .tbox02 {position:relative; width:820px; height:auto; font-weight:600; padding:29px 39px; border:1px solid #ddd; background-color:#fbfbfb; border-radius:3px; overflow:hidden;} .tbox03 {position:relative; width:820px; height:auto; padding:29px 39px; border:1px solid #ddd; text-align:center; color:#c05555; background-color:#fbfbfb; border-radius:3px; overflow:hidden;} .sp_bd {font-weight:600;} h3 {position:relative; background:url(/api/public/sites/eisocokr/assets/b24a4be9e0968404669b68251c285de3814ca815c29d55852424f09062e698af.jpg) no-repeat; background-position:0px 2px; color:#486180; font-weight:600; font-size:15px; padding:0px 0px 0px 25px; margin-bottom:20px;} h4 {position:relative; color:#486180; font-weight:600; font-size:15px; padding:0px 0px 0px 0px; margin-bottom:20px;} h5 {position:relative; color:#333; font-weight:600; font-size:14px; padding:0px 0px 0px 15px; margin-bottom:20px;} .ptst02 {position:relative; background:url(/api/public/sites/eisocokr/assets/a7567f48b7a72473f7a33a5d63d2dac4be4f91fca99cecce295e30c0c20a909e.jpg) no-repeat; background-position:0px 0px; color:#333; font-weight:600; font-size:14px; padding:0px 0px 0px 23px; margin-bottom:20px;} .ptst04 {position:relative; background:url(/api/public/sites/eisocokr/assets/5847b5feeee7e527f7d32318f212418a1a83ee2c504f1b2caab1c6b86f5de7db.jpg) no-repeat; background-position:5px 0px; padding:0px 0px 10px 28px;} /****/ #footer {position:relative; width:100%; margin:0px auto; padding:50px 0px; background-color:#fff; border-top:1px solid #ddd;} #footer ul {position:relative; width:1200px; height:50px; margin:0px auto;} #footer ul li {float:left; color:#777; font-size:13px; line-height:160%;} #footer ul li a {color:#111;} .p_top {position:fixed; left:50%; margin-left:620px; bottom:200px; z-index:50000;} /**개인정보취급방침**/ #pri_st {color:#777;} #pri_st li {padding-bottom:0px;} .pri_tit {padding-bottom:0px; font-weight:bold; color:#4d65a5;} #pti_tb {border-top:2px solid #6f82b5; border-left:1px solid #ddd;} #pti_tb th {text-align:center; padding:10px; font-weight:bold; color:#515456; background-color:#f9f9f9; border-right:1px solid #ddd; border-bottom:1px solid #ddd;} #pti_tb td {padding:10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd;} /**/ #tab1{position:relative; margin-bottom:20px; overflow:hidden;} #tab1 .on{position:relative; height:20px; color:#222; border:1px solid #111;} #tab1 .on a{color:#222;} #tab1 li{float:left; height:25px; padding:14px 30px 9px 30px; text-align:center; margin-right:10px; border:1px solid #d6d6d6; font-weight:bold; margin-bottom:10px;} #tab1 li a{display:block;width:100%; height:30px;} /**/ /* 2026-10-16 큰 화면(1080p) 레이아웃 — 1200px 고정폭 틀이 1920 화면 가운데에 작은 카드처럼 떠 있던 것을 다듬는다. · 머리와 첫 화면(큰 그림) 띠를 화면 전체 폭으로 깐다 — 양옆 흰 여백 때문에 가운데에 몰려 보였다. · 확대(zoom)는 하지 않는다 — 처음에 1.25배로 키웠더니 첫 화면 큰 그림이 너무 커져 한눈에 들어오지 않았다. · 메뉴: 펼침 메뉴 글자가 칸 너비(110px)에 걸려 두 줄로 꺾이던 것을 막고(칸 190px, 줄바꿈 없음), 펼친 판은 머리와 같은 색으로 화면 전체 폭에 깔아 큰 그림 위에 글자만 떠 보이지 않게 한다. 모든 화면에 적용. */ #header{background:#f3f7f9;} #header #hd_ar{background:transparent;} #mainimg{width:100%; background:#f3f7f9;} /* 큰 그림 PNG 의 반투명 가장자리가 겹쳐 바뀔 때 회색 덩어리로 비치던 것 — 각 장을 머리와 같은 색 위에 올려 불투명하게 한다 */ #mainimg .mainEf li{background-color:#f3f7f9;} #mainimg #thumbNav{left:50%; margin-left:-600px;} /* 안쪽 쪽 위 큰 띠 그림(1200px)도 첫 화면처럼 화면 전체 폭으로 깐다 */ #sv1, #sv2, #sv3, #sv4{width:100%; background-color:#f3f7f9;} #menu-box .tMenu > ul{width:570px;} #menu-box .tMenu > ul > li.s1, #menu-box .tMenu > ul > li.s2, #menu-box .tMenu > ul > li.s3{width:190px;} #menu-box .tMenu > ul > li > ul > li > a{white-space:nowrap;} #menu-box .tMenu.on{background:#f3f7f9; box-shadow:0 0 0 100vmax #f3f7f9; clip-path:inset(0 -100vmax 0 -100vmax);} #menu-box{filter:drop-shadow(0 8px 10px rgba(30,60,100,.10));} /* 글자·그림은 키우지 않는다(1080p 첫 화면이 한눈에 들어오게) — 1200px 틀을 가운데 두고 머리·띠만 화면 전체 폭으로 깐다. */ /* 한글은 낱말 단위로 줄을 바꾼다 — 기본값은 글자 사이에서도 꺾여 "문서작/성", "구/성" 처럼 낱말이 쪼개졌다. 아주 긴 영문·파일 이름은 칸 끝에서 꺾는다. */ body{word-break:keep-all; overflow-wrap:break-word;} /* 2026-10-16 메인 아래 띠(공지·온라인문의·전화)와 글자 다듬기 · 세 칸이 높이가 달라 들쭉날쭉하던 것(공지 280, 배너 130 가운데, 전화 280)을 같은 높이·같은 위쪽 선의 한 줄로 — 칸 사이 24px, 안쪽 여백 같게. · 제목·짧은 문장은 줄 길이를 고르게(text-wrap:balance), 긴 문단은 한 글자 줄이 남지 않게(pretty). 본문 줄 간격을 넉넉히. */ #main_bot{height:auto; padding:50px 0;} #mb_ar{display:flex; gap:24px; align-items:stretch; height:auto; overflow:visible;} #mb_ar #main_not{float:none; flex:1 1 0; width:auto; height:auto; min-height:280px; box-sizing:border-box; padding:34px 39px; overflow:hidden;} #mb_ar #main_not li{padding-bottom:12px; line-height:1.5;} #mb_ar #main_bn{float:none; flex:1 1 0; width:auto; height:auto; min-height:280px; box-sizing:border-box; padding:0; background:#fff; border:1px solid #e1e1e1; display:flex; align-items:center; justify-content:center; overflow:hidden;} #mb_ar #main_bn ul, #mb_ar #main_bn li{padding:0 !important; margin:0; list-style:none;} #mb_ar #main_bn img{display:block; max-width:100%; height:auto;} #mb_ar #mc_ar{float:none; flex:0 0 310px; width:310px; height:auto; min-height:280px; overflow:hidden;} #mb_ar #mc_ar img{display:block; width:100%; height:100%; min-height:280px; object-fit:cover;} h1, h2, h3, #hero-cta .hc-h, #greet-ar .gr-title, #go-ar .go-h, #kms-ar .kms-h, #go-ar .go-card b, #kms-ar .kms-card h3, #mbn_ar .mbn-h{text-wrap:balance;} p, li, dd{text-wrap:pretty;} #contents p, #contents li{line-height:1.7;} /* 2026-10-16 모바일 1단계 — 메인 화면(body.eiso-mobile: index.html·index.htm·vn/index.*)만. 안쪽 쪽은 지금처럼 1200px 틀을 폰이 줄여 보인다(viewport width=1200). 메인은 머리 스크립트가 폰에서만 viewport 를 device-width 로 바꾸고(태블릿·PC 는 그대로), 아래 규칙이 폰 폭(820px 이하)에서 한 줄 틀로 접는다. */ @media (max-width:1199px){ body.eiso-mobile{-webkit-text-size-adjust:100%; text-size-adjust:100%;} body.eiso-mobile #wrap{min-width:0;} /* 머리: 로고 → (로그인·가입·언어) → 3개 메뉴 한 줄. 펼침 메뉴는 폰에 없고, 세 메뉴를 누르면 각 안내 쪽(문서자료실·eiso 운용·커뮤니티)에서 고른다. */ body.eiso-mobile #header{height:auto; background:#f3f7f9; padding:8px 12px 0; box-sizing:border-box;} body.eiso-mobile #header #hd_ar{position:static; width:auto; height:auto; margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} body.eiso-mobile #header #hd_ar h1{position:static; flex:0 0 128px; width:128px; min-width:0; overflow:hidden;} body.eiso-mobile #header #hd_ar h1 img{display:block; width:401px; max-width:none; height:auto;} body.eiso-mobile #header #top_ar{position:static; width:auto; height:auto; overflow:visible; flex:0 1 auto; margin:0 0 0 auto; padding-left:6px;} body.eiso-mobile #header #top_ar img{height:clamp(17px,5.6vw,22px); width:auto; display:block;} body.eiso-mobile #header #top_ar ul{display:flex; align-items:center; gap:4px;} body.eiso-mobile #header #top_ar li{float:none;} body.eiso-mobile #menu_ar{order:3; flex:0 0 100%;} body.eiso-mobile #menu-box{position:static; width:auto; min-height:0; background:none; filter:none;} body.eiso-mobile #menu-box .tMenu, body.eiso-mobile #menu-box .tMenu.on{width:auto; height:auto !important; overflow:visible; background:none; box-shadow:none; clip-path:none;} body.eiso-mobile #menu-box .tMenu > ul{width:auto; margin:0; padding:0; display:flex;} body.eiso-mobile #menu-box .tMenu > ul > li, body.eiso-mobile #menu-box .tMenu > ul > li.s1, body.eiso-mobile #menu-box .tMenu > ul > li.s2, body.eiso-mobile #menu-box .tMenu > ul > li.s3{float:none; flex:1 1 0; width:auto; min-width:0; text-align:center; padding:0;} body.eiso-mobile #menu-box .tMenu > ul > li > a{display:block; padding:6px 0;} body.eiso-mobile #menu-box .tMenu > ul > li > a img{display:inline-block; max-width:100%; height:auto; max-height:34px; width:auto; object-fit:contain;} body.eiso-mobile #menu-box .tMenu > ul > li > ul{display:none !important;} /* 첫 화면 큰 그림: 글자가 왼쪽 반에 있어 폰 폭에서는 깨알이 된다 → 오른쪽 그림만 장식으로 보이고, 한 줄 문장·단추가 바로 아래 */ body.eiso-mobile #mainimg, body.eiso-mobile #mainimg .mainEf, body.eiso-mobile #mainimg .wrapper, body.eiso-mobile #mainimg .mainEf li, body.eiso-mobile #mainimg .mvimg{height:210px;} body.eiso-mobile #mainimg .mainEf li{background-size:auto 300px; background-position:100% 38%;} body.eiso-mobile #mainimg #thumbNav{left:0; right:0; margin:0; bottom:0; text-align:center;} body.eiso-mobile #hero-cta .hc-in{width:auto; flex-direction:column; align-items:stretch; gap:14px; padding:18px 16px;} body.eiso-mobile #hero-cta .hc-h{font-size:18px;} body.eiso-mobile #hero-cta .hc-sub{display:none;} body.eiso-mobile #hero-cta .hc-btns{flex-direction:column; gap:8px;} body.eiso-mobile #hero-cta .hc-btns a{display:block; text-align:center; padding:12px 14px;} body.eiso-mobile #greet-ar{padding:26px 0 24px 0;} body.eiso-mobile #greet-ar .gr-in{width:auto; flex-direction:column; gap:14px; padding:0 16px;} body.eiso-mobile #greet-ar .gr-art{display:none;} body.eiso-mobile #greet-ar .gr-title{font-size:20px;} body.eiso-mobile #greet-ar .gr-facts{flex-direction:row; gap:6px;} body.eiso-mobile #greet-ar .gr-facts li{padding:6px 8px;} body.eiso-mobile #greet-ar .gr-facts b{font-size:15px;} body.eiso-mobile #greet-ar .gr-facts span{font-size:12px;} body.eiso-mobile #greet-ar .gr-facts + p{display:none;} body.eiso-mobile #greet-ar .gr-title + p{display:none;} body.eiso-mobile #go-ar .go-in, body.eiso-mobile #kms-ar .kms-in{width:auto;} body.eiso-mobile #go-ar, body.eiso-mobile #kms-ar{padding-left:16px; padding-right:16px;} body.eiso-mobile #go-ar .go-h, body.eiso-mobile #kms-ar .kms-h{font-size:20px;} body.eiso-mobile #go-ar .go-cards{flex-wrap:wrap; padding:0; gap:10px;} body.eiso-mobile #go-ar .go-cards li{flex:1 1 calc(50% - 10px);} body.eiso-mobile #go-ar .go-sub, body.eiso-mobile #go-ar .go-tel{margin-left:0; margin-right:0;} body.eiso-mobile #go-ar .go-card{min-height:0; padding-bottom:34px;} body.eiso-mobile #go-ar .go-card span{display:none;} /* 운용 구성 카드 여섯은 세로로 쌓지 않고 옆으로 넘겨 보는 한 줄로(스크롤을 줄임) */ body.eiso-mobile #kms-ar .kms-cards{display:flex; gap:10px; overflow-x:auto; border-spacing:0; margin:0 -16px; padding:0 16px 8px; width:auto; scroll-snap-type:x mandatory; scroll-padding:0 16px; -webkit-overflow-scrolling:touch;} body.eiso-mobile #kms-ar .kms-card{display:block; flex:0 0 78%; width:auto; margin:0; padding-bottom:46px; scroll-snap-align:start; box-sizing:border-box;} body.eiso-mobile #kms-ar .kms-card p{margin-bottom:12px;} body.eiso-mobile #kms-ar .kms-card h3{min-height:0;} body.eiso-mobile #kms-ar .kms-axbar, body.eiso-mobile #kms-ar .kms-foot{margin-left:0; margin-right:0;} body.eiso-mobile #kms-ar .kms-axbar .kms-ex{white-space:normal;} body.eiso-mobile #mbn_ar{width:auto; padding:24px 16px;} body.eiso-mobile #mbn_ar ul li{width:33.3333%;} body.eiso-mobile #main_bot{height:auto; padding:24px 0;} body.eiso-mobile #mb_ar{display:block; width:auto; height:auto; padding:0 16px; overflow:visible;} body.eiso-mobile #mb_ar #main_not, body.eiso-mobile #mb_ar #main_bn{float:none; width:auto; height:auto; padding:18px; margin:0 0 12px 0; box-sizing:border-box;} body.eiso-mobile #mb_ar #main_bn li{padding-top:0 !important;} body.eiso-mobile #mc_ar{float:none; flex:none; width:auto; min-height:0;} body.eiso-mobile #mb_ar #main_bn{min-height:0; display:block; text-align:center;} body.eiso-mobile #mc_ar img{height:auto; min-height:0;} body.eiso-mobile #mc_ar img, body.eiso-mobile #main_bn img, body.eiso-mobile #main_not img{max-width:100%; height:auto;} body.eiso-mobile #footer{padding:28px 0;} body.eiso-mobile #footer ul{width:auto; height:auto; padding:0 16px;} body.eiso-mobile #footer ul li{float:none; width:auto !important;} /* ── 모바일 2단계: 안쪽 쪽 ── 위 머리·바닥글 규칙은 메인과 같이 쓴다. 왼쪽 메뉴는 구역 제목을 눌러 펼친다(머리 스크립트), 본문은 한 줄 폭, 표·그림이 넘치면 본문 칸 안에서 옆으로 민다(쪽 전체가 옆으로 밀리지 않게). 문의 전화 상자는 본문 아래로. */ body.eiso-mobile #sv1, body.eiso-mobile #sv2, body.eiso-mobile #sv3, body.eiso-mobile #sv4{width:auto; height:112px; background-size:auto 150px; background-position:100% 40%;} body.eiso-mobile #con_ar{padding:16px 0 36px 0;} body.eiso-mobile #container{width:auto; padding:0 16px; display:flex; flex-direction:column; overflow:visible;} body.eiso-mobile #left_ar{display:contents;} body.eiso-mobile #left_ar h2{order:1; position:relative; width:auto; height:auto; margin:0 0 8px 0; padding:13px 44px 13px 14px; box-sizing:border-box; background:#1f3864; color:#fff; font-size:16px; font-weight:bold; text-align:left; line-height:1.3; cursor:pointer;} body.eiso-mobile #left_ar h2 a{color:#fff !important; pointer-events:none; text-decoration:none;} body.eiso-mobile #left_ar h2:after{content:"\25BE"; position:absolute; right:16px; top:50%; margin-top:-9px; font-size:16px; line-height:18px;} body.eiso-mobile #left_ar.m-open h2:after{content:"\25B4";} body.eiso-mobile #left_ar > div:not(#left_ban){order:2; display:none; margin:0 0 14px 0;} body.eiso-mobile #left_ar.m-open > div:not(#left_ban){display:block;} body.eiso-mobile #leftmenu2 li{background:none; border-bottom:1px solid #e5e9ef;} body.eiso-mobile #leftmenu2 a{display:block; height:auto; padding:13px 12px; font-size:15px; line-height:1.35; color:#333; background:none;} body.eiso-mobile #leftmenu2 #leftOver{background:#e8f1fc; color:#1f3864; font-weight:bold;} body.eiso-mobile #leftmenu2 .leftmenu-sub ul{background:#f8fafc;} body.eiso-mobile #leftmenu2 .leftmenu-sub ul li{background:none;} body.eiso-mobile #leftmenu2 .leftmenu-sub ul li a{padding:11px 12px 11px 28px; font-size:14px; border-bottom:0;} body.eiso-mobile #right_ar{order:3; float:none; width:auto; overflow:visible;} body.eiso-mobile #tit_ar{width:auto; margin:0; font-size:22px; line-height:1.35; padding-bottom:12px;} body.eiso-mobile #contents{width:auto; margin:0; padding-top:18px; min-height:0; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;} body.eiso-mobile #contents img, body.eiso-mobile #contents video, body.eiso-mobile #contents iframe{max-width:100%; height:auto;} body.eiso-mobile #contents input[type=text], body.eiso-mobile #contents input[type=email], body.eiso-mobile #contents input[type=password], body.eiso-mobile #contents input[type=tel], body.eiso-mobile #contents input[type=search], body.eiso-mobile #contents select, body.eiso-mobile #contents textarea{max-width:100%; box-sizing:border-box;} body.eiso-mobile #left_ban{order:5; margin-top:22px;} body.eiso-mobile #left_ban ul{margin-top:12px; padding:18px 20px;} /* 게시판(K-ESG·공지·질문과 답변): 번호·머리 줄을 감추고, 제목 아래에 첨부·날짜·조회수를 한 줄로 */ body.eiso-mobile #bbs-wrap #bbs-list2 li.blist-title{display:none;} body.eiso-mobile #bbs-wrap #bbs-list2 li div.bbs-num{display:none !important;} body.eiso-mobile #bbs-wrap #bbs-list2 li div.bbs-subject{margin:0 !important; white-space:normal; overflow:visible; text-overflow:clip;} body.eiso-mobile #bbs-wrap #bbs-list2 li div.bbs-etc{position:static !important; margin-top:4px; padding-left:12px;} body.eiso-mobile #bbs-wrap #bbs-list2 li div.bbs-etc span{float:none !important; display:inline-block; width:auto !important; margin-right:12px; font-size:13px; color:#7a8899; text-align:left;} body.eiso-mobile #bbs-wrap #bbs-list2 li.blist-list{padding:12px 0;} /* 쪽마다 따로 만든 가로 배치(구입 안내 요약·운용 흐름·자료실 카드·사용 예시 단계 등)는 폰에서 세로로 쌓는다. 3칸 이상 표는 칸 폭을 지키고 본문 칸 안에서 옆으로 민다. */ body.eiso-mobile #buy-sum .bs-cols{flex-direction:column;} body.eiso-mobile #buy-sum .bs-col{border-right:0; border-bottom:1px solid #dce6f1; padding:14px 16px 12px 16px;} body.eiso-mobile #buy-sum .bs-col:last-child{border-bottom:0;} body.eiso-mobile #buy-sum .bs-ft{flex-wrap:wrap;} body.eiso-mobile #ds-sample .dss-row{flex-wrap:wrap; gap:10px;} body.eiso-mobile #ds-sample a.dss-th{flex:1 1 calc(50% - 10px);} body.eiso-mobile #opg .og-flow{flex-direction:column;} body.eiso-mobile #libg .lg-stats{flex-wrap:wrap;} body.eiso-mobile #libg .lg-stats div{flex:1 1 calc(50% - 10px);} body.eiso-mobile #libg .lg-card, body.eiso-mobile #cmg .cg-card{width:100% !important;} body.eiso-mobile .ez-prob{grid-template-columns:1fr;} body.eiso-mobile .ez-prob .arw{transform:rotate(90deg); height:26px;} body.eiso-mobile .ez-arch{flex-direction:column;} body.eiso-mobile .ez-arch .to{width:auto; height:30px; transform:rotate(90deg);} body.eiso-mobile .ez-people{flex-wrap:wrap;} body.eiso-mobile .ez-fitorg{grid-template-columns:1fr;} body.eiso-mobile .ai42-steps, body.eiso-mobile .ai42-flow, body.eiso-mobile .axm-steps, body.eiso-mobile .axm-phase, body.eiso-mobile .ai42-pdca .row{flex-direction:column;} body.eiso-mobile #contents table:has(tr > *:nth-child(3)):not(form table):not(.m-cards){min-width:560px;} /* 칸 이름이 붙은 카드 표(public/js/eiso-guide.js 가 .m-cards 를 붙임) — 줄마다 카드 한 장, 칸은 이름 아래 글 */ body.eiso-mobile #contents table.m-cards, body.eiso-mobile #contents table.m-cards tbody, body.eiso-mobile #contents table.m-cards tr, body.eiso-mobile #contents table.m-cards td{display:block; width:auto !important; height:auto !important; box-sizing:border-box; min-width:0;} body.eiso-mobile #contents table.m-cards{border:0; background:none;} body.eiso-mobile #contents table.m-cards tr:first-child{display:none;} body.eiso-mobile #contents table.m-cards.m-nohead tr:first-child{display:block;} body.eiso-mobile #contents table.m-cards.m-nohead td{padding-left:12px !important;} body.eiso-mobile #contents table.m-cards.m-nohead td:before{display:none;} body.eiso-mobile #contents table.m-cards tr[data-grp]:before{content:attr(data-grp); display:block; padding:8px 12px; background:#f4f7fb; border-bottom:1px solid #e1e7ef; font-weight:bold; color:#1f3864;} body.eiso-mobile #contents table.m-cards td.m-grp{display:none !important;} body.eiso-mobile #contents table.m-cards tr{margin:0 0 12px 0; border:1px solid #dce6f1; border-radius:6px; background:#fff; overflow:hidden;} body.eiso-mobile #contents table.m-cards td{border:0 !important; border-bottom:1px solid #eef1f5 !important; padding:7px 12px; text-align:left !important; word-break:keep-all; overflow-wrap:anywhere;} body.eiso-mobile #contents table.m-cards td:last-child{border-bottom:0 !important;} body.eiso-mobile #contents table.m-cards td{position:relative; padding-left:calc(5.2em + 22px) !important; min-height:1.6em;} body.eiso-mobile #contents table.m-cards td:before{content:attr(data-label); position:absolute; left:12px; top:9px; width:5.2em; font-size:12px; font-weight:bold; color:#7a8899;} body.eiso-mobile #contents table.m-cards td[data-label=""]{padding-left:12px !important;} body.eiso-mobile #contents table.m-cards td[data-label=""]:before{display:none;} body.eiso-mobile #contents :where(div,ul,li,p,form,fieldset,input,select,textarea){max-width:100%; box-sizing:border-box;} body.eiso-mobile #contents [style*="width:600px"], body.eiso-mobile #contents [style*="width:586px"]{width:100% !important;} body.eiso-mobile #mc_ar{display:block; width:100% !important; box-sizing:border-box;} body.eiso-mobile #mc_ar img{width:100%; max-width:100%; height:auto; display:block;} body.eiso-mobile #footer{padding-bottom:84px;} body.eiso-mobile #footer, body.eiso-mobile #footer *{text-align:left !important;} /* 체크 상자 묶음(한 줄 두 칸·세 칸으로 짠 label)은 한 칸으로, 긴 설명 글은 줄을 바꾼다 */ body.eiso-mobile #contents label, body.eiso-mobile #contents label *{white-space:normal !important;} body.eiso-mobile #contents label[style*="width:50%"], body.eiso-mobile #contents label[style*="width:33"], body.eiso-mobile #contents label[style*="width:25%"]{width:100% !important;} /* 고정폭 상자·탭 */ body.eiso-mobile .tbox, body.eiso-mobile .tbox02, body.eiso-mobile .tbox03, body.eiso-mobile .eiso-cta, body.eiso-mobile .st0301, body.eiso-mobile #login_box2{width:auto !important; max-width:100%; box-sizing:border-box;} body.eiso-mobile .tbox, body.eiso-mobile .tbox02, body.eiso-mobile .tbox03{padding:18px 16px;} body.eiso-mobile .tbb_tit, body.eiso-mobile .tbb_tit02{width:auto; font-size:18px;} body.eiso-mobile #tab_btn{width:auto; margin-bottom:20px;} body.eiso-mobile #tab_btn li, body.eiso-mobile #tab_btn li.on{float:none; width:auto; height:auto; margin-right:0; padding:11px 10px; line-height:1.4;} /* 양식(신청서·구매·가입·로그인): 표를 세로로 풀어 이름 칸 아래에 입력 칸이 오게 */ body.eiso-mobile #contents form table, body.eiso-mobile #contents form tbody, body.eiso-mobile #contents form tr, body.eiso-mobile #contents form th, body.eiso-mobile #contents form td{display:block; width:auto !important; height:auto !important; box-sizing:border-box;} body.eiso-mobile #contents form table{border-left:0; border-right:0; min-width:0 !important;} body.eiso-mobile #contents form th{background:#f4f7fb; padding:9px 10px; text-align:left; border:0; border-bottom:1px solid #e1e7ef; font-weight:bold; color:#1f3864;} body.eiso-mobile #contents form td{padding:9px 10px; border:0; border-bottom:1px solid #eef1f5; text-align:left;} body.eiso-mobile #contents form input[type=text], body.eiso-mobile #contents form input[type=email], body.eiso-mobile #contents form input[type=password], body.eiso-mobile #contents form input[type=tel], body.eiso-mobile #contents form select, body.eiso-mobile #contents form textarea{width:100% !important; font-size:16px;} body.eiso-mobile #tab_btn li, body.eiso-mobile #tab_btn li.on{display:block; text-align:left;} } /* 2026-10-16 글꼴 — Pretendard 1.3.9(SIL OFL 1.1) 자체 호스팅. 외부 글꼴 서버(구글 나눔고딕)를 더는 부르지 않는다. 폰트·라이선스는 /fonts/pretendard-1.3.9/ */ @font-face{font-family:'EISO Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/eisosans-1/EISOSans-Latin-Regular.woff2) format('woff2');unicode-range:U+0000-007F,U+00A0-00FF,U+0100-017F,U+01A0-01B0,U+0300-036F,U+1EA0-1EF9,U+2000-206F,U+20A0-20CF,U+2100-27BF,U+FE00-FE0F,U+FEFF,U+FFFD;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/eisosans-1/EISOSans-Latin-Regular.woff2) format('woff2');unicode-range:U+0000-007F,U+00A0-00FF,U+0100-017F,U+01A0-01B0,U+0300-036F,U+1EA0-1EF9,U+2000-206F,U+20A0-20CF,U+2100-27BF,U+FE00-FE0F,U+FEFF,U+FFFD;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/eisosans-1/EISOSans-Latin-Bold.woff2) format('woff2');unicode-range:U+0000-007F,U+00A0-00FF,U+0100-017F,U+01A0-01B0,U+0300-036F,U+1EA0-1EF9,U+2000-206F,U+20A0-20CF,U+2100-27BF,U+FE00-FE0F,U+FEFF,U+FFFD;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Segoe UI Symbol'),local('Apple Symbols'),local('Noto Sans Symbols2'),local('Noto Sans Symbols'),local('Arial Unicode MS');unicode-range:U+229E,U+2318,U+2460-2473,U+2500,U+2611,U+2715,U+266A;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:500;font-display:swap;src:local('Segoe UI Symbol'),local('Apple Symbols'),local('Noto Sans Symbols2'),local('Noto Sans Symbols'),local('Arial Unicode MS');unicode-range:U+229E,U+2318,U+2460-2473,U+2500,U+2611,U+2715,U+266A;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Segoe UI Symbol'),local('Apple Symbols'),local('Noto Sans Symbols2'),local('Noto Sans Symbols'),local('Arial Unicode MS');unicode-range:U+229E,U+2318,U+2460-2473,U+2500,U+2611,U+2715,U+266A;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Segoe UI Emoji'),local('Apple Color Emoji'),local('Noto Color Emoji');unicode-range:U+1F000-1FAFF,U+200D;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:500;font-display:swap;src:local('Segoe UI Emoji'),local('Apple Color Emoji'),local('Noto Color Emoji');unicode-range:U+1F000-1FAFF,U+200D;} @font-face{font-family:'EISO Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Segoe UI Emoji'),local('Apple Color Emoji'),local('Noto Color Emoji');unicode-range:U+1F000-1FAFF,U+200D;} /* 2026-10-16 메인 큰 그림 높이 550 → 500(스크롤 줄이기 — 그림 위 여백을 위로 당김). 폰은 body.eiso-mobile 규칙이 따로 정한다. */ #mainimg, #mainimg .mainEf, #mainimg .wrapper, #mainimg .mainEf li, #mainimg .mvimg{height:500px;} #mainimg .mainEf li, #mainimg .mvimg{background-position:50% -30px;} /* 2026-10-16 안쪽 쪽 세로 길이 줄이기(휠을 덜 굴리게) — 배너 250 → 190(그림 위쪽 빈 여백을 당김), 위아래 여백·왼쪽 제목 칸·문의 상자를 낮춤. 폰은 body.eiso-mobile 규칙이 따로 정한다. */ #sv1, #sv2, #sv3, #sv4{height:190px; background-position:50% -40px;} #con_ar{padding:26px 0 44px 0;} #left_ar h2{height:84px; padding-top:26px; margin-bottom:8px; background-size:cover;} #left_ban{margin-top:36px;} #left_ban ul{padding:22px 28px; margin-top:20px;} #contents{padding-top:24px;} /* 2026-10-17 다섯 묶음 머리 메뉴 — 자료 찾기 · 경영시스템 문서작성 · 경영시스템 운영 · 교육교재 작성 · 커뮤니티(대표 요청, 차례는 같은 날 다시 정함). 그림 단추 세 칸(로고 옆)을 로고 줄 아래 화면 전체 폭 띠로 옮기고, 다섯 칸을 같은 너비의 색 단추(글자)로. 펼침은 그 아래(메뉴 스크립트가 .tMenu 높이를 70 → 펼침 높이로). */ #header, #header #hd_ar{height:156px;} #menu-box{top:100px; background:none;} #menu-box .tMenu{height:56px; background:#fff; box-shadow:0 0 0 100vmax #fff; clip-path:inset(0 -100vmax 0 -100vmax); border-top:1px solid #e3e9ef;} #menu-box .tMenu > ul{width:1200px; margin:0 auto; padding:0; display:flex; letter-spacing:0;} #menu-box .tMenu > ul > li, #menu-box .tMenu > ul > li.s1, #menu-box .tMenu > ul > li.s2, #menu-box .tMenu > ul > li.s3, #menu-box .tMenu > ul > li.s4, #menu-box .tMenu > ul > li.s5{float:none; flex:1 1 0; width:auto; min-width:0; padding:0 14px; box-sizing:border-box;} #menu-box .tMenu > ul > li > a.mm{display:flex; align-items:center; justify-content:center; height:38px; margin-top:9px; border-radius:19px; color:#fff; font-size:16px; font-weight:700; letter-spacing:-0.5px; white-space:nowrap; text-decoration:none; transition:filter .15s, transform .15s;} #menu-box .tMenu > ul > li.s1 > a.mm{background:#3373c0;} #menu-box .tMenu > ul > li.s2 > a.mm{background:#a8404f;} #menu-box .tMenu > ul > li.s3 > a.mm{background:#2f7a64;} #menu-box .tMenu > ul > li.s4 > a.mm{background:#7a4da7;} #menu-box .tMenu > ul > li.s5 > a.mm{background:#aa5b0a;} #menu-box .tMenu > ul > li > a.mm:hover, #menu-box .tMenu > ul > li > a.mm:focus{color:#fff; filter:brightness(.88);} #menu-box .tMenu > ul > li > ul, #menu-box .tMenu > ul > li.s1 > ul, #menu-box .tMenu > ul > li.s2 > ul, #menu-box .tMenu > ul > li.s3 > ul, #menu-box .tMenu > ul > li.s4 > ul, #menu-box .tMenu > ul > li.s5 > ul{margin-top:20px; padding:0 0 0 18px;} #menu-box .tMenu > ul > li > ul > li{margin-bottom:8px;} #menu-box .tMenu > ul > li.s3 > ul > li{margin-bottom:4px;} /* 2026-10-19 경영시스템 운영 19단계 — 줄이 많아 촘촘히 */ #menu-box .tMenu > ul > li > ul > li > a{font-size:14px; letter-spacing:-0.5px; white-space:normal;} @media (max-width:1199px){ body.eiso-mobile #header, body.eiso-mobile #header #hd_ar{height:auto;} body.eiso-mobile #menu-box .tMenu{border-top:0;} body.eiso-mobile #menu-box .tMenu > ul{flex-wrap:wrap; gap:4px; padding:6px 0;} body.eiso-mobile #menu-box .tMenu > ul > li, body.eiso-mobile #menu-box .tMenu > ul > li.s1, body.eiso-mobile #menu-box .tMenu > ul > li.s2, body.eiso-mobile #menu-box .tMenu > ul > li.s3, body.eiso-mobile #menu-box .tMenu > ul > li.s4, body.eiso-mobile #menu-box .tMenu > ul > li.s5{flex:1 1 30%; padding:0;} body.eiso-mobile #menu-box .tMenu > ul > li > a.mm{height:auto; min-height:34px; margin:0; padding:4px 6px; border-radius:17px; font-size:13px; white-space:normal; text-align:center; line-height:1.25;} } /* 폭 340px 이하 폰(작은 기종): 머리 마크·버튼을 한 줄에 맞춘다 */ @media (max-width:340px){ body.eiso-mobile #header #hd_ar h1{flex-basis:104px; width:104px;} body.eiso-mobile #header #hd_ar h1 img{width:325px;} body.eiso-mobile #header #top_ar img{height:17px;} body.eiso-mobile #header #top_ar ul{gap:3px;} } /* 2026-10-19 경영시스템 운영 쪽(#ops) 가독성 — 대표 레이아웃은 그대로, 제목과 글 사이 간격을 줄이고 줄·칸을 또렷하게 */ #ops{line-height:1.85;} #ops .op-lead, #ops .op-box, #ops .op-wait{padding:14px 20px; line-height:1.85;} #ops .op-lead p, #ops .op-box p, #ops .op-wait p{margin:4px 0 0 0;} #ops .op-lead > b:first-child{display:block; margin:0 0 2px 0; font-size:15px;} #ops table.op-t{border:1px solid #d9e0ea;} #ops table.op-t th, #ops table.op-t td{padding:11px 14px; line-height:1.8; word-break:keep-all; overflow-wrap:anywhere;} #ops table.op-t td:first-child{font-weight:bold; color:#3b4a60; background:#f8fafc; white-space:normal;} #ops table.op-t tr:nth-child(even) td{background:#fbfcfe;} #ops table.op-t tr:nth-child(even) td:first-child{background:#f4f7fb;} #ops table.op-t td .op-ln{display:block; margin:0 0 4px 0; padding-left:14px; text-indent:-14px;} #ops table.op-t td .op-ln:last-child{margin-bottom:0;} #ops h4{margin:26px 0 10px 0; padding-bottom:6px; border-bottom:1px solid #e5eaf1;} /* 2026-10-19 폰 — 소개 카드는 옆으로 밀지 않고 세로로 쌓는다. 운영 20칸은 한 줄 목록형(번호 · 이름·설명 · 단추). 머리 로고는 원래 크기로(마크만 보이게 자른다). */ @media (max-width:1199px){ body.eiso-mobile #header #hd_ar h1 img{width:auto; max-width:none; height:50px;} body.eiso-mobile #kms-ar .kms-cards{display:grid; grid-template-columns:1fr; overflow:visible; margin:0; padding:0; gap:8px; scroll-snap-type:none; width:auto;} body.eiso-mobile #kms-ar .kms-card{flex:none; width:auto; margin:0; padding:12px 14px; min-height:0;} body.eiso-mobile #kms-ar .kms-card h3{margin:6px 0 4px 0; font-size:16px;} body.eiso-mobile #kms-ar .kms-card p{margin:0; font-size:13.5px; line-height:1.55;} body.eiso-mobile #kms-ar .kms-card p.kms-go{position:static; margin:8px 0 0 0;} body.eiso-mobile #kms-ar .kms-go a{padding:4px 12px; font-size:12.5px;} body.eiso-mobile #kms-ar .kms-ops{gap:6px;} body.eiso-mobile #kms-ar .kms-ops .kms-step{display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:10px; row-gap:1px; align-items:center; padding:9px 12px;} body.eiso-mobile #kms-ar .kms-ops .kms-step .kms-no{grid-column:1; grid-row:1 / span 2; float:none; min-width:26px; height:26px; line-height:26px; padding:0 4px; text-align:center; font-size:14px; background:#e8edf4; border-radius:13px; box-sizing:border-box;} body.eiso-mobile #kms-ar .kms-ops .kms-step h3{grid-column:2; grid-row:1; margin:0; font-size:15px; line-height:1.3;} body.eiso-mobile #kms-ar .kms-ops .kms-step p{grid-column:2; grid-row:2; font-size:12.5px; line-height:1.45;} body.eiso-mobile #kms-ar .kms-ops .kms-step p.kms-go{grid-column:3; grid-row:1 / span 2; margin:0; align-self:center;} body.eiso-mobile #kms-ar .kms-ops .kms-step .kms-go a{padding:4px 10px; font-size:12px; white-space:nowrap;} body.eiso-mobile #kms-ar .kms-ops .kms-soon .kms-tag{position:static; grid-column:1; grid-row:1 / span 2; margin:0; font-size:11px; padding:2px 8px;} } /* 2026-10-19 바닥글(큰 화면) — 왼쪽 900px + 오른쪽 420px 이 1200px 을 넘어 링크가 아랫줄로 밀리던 것: 두 칸을 양끝에 맞춘다(왼쪽은 남는 폭, 오른쪽은 한 줄). */ @media (min-width:1200px){ #footer ul{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; height:auto; min-height:50px;} #footer ul li{float:none; width:auto !important;} #footer ul li:first-child{flex:1 1 auto; min-width:0;} #footer ul li:last-child{flex:0 0 auto; text-align:right; white-space:nowrap;} } /* 2026-10-19 폰 — 다섯 메뉴 단추를 한 줄에 같은 폭으로(3+2 두 줄은 폭이 달라 어긋났다) */ @media (max-width:1199px){ body.eiso-mobile #menu-box .tMenu > ul{flex-wrap:nowrap; gap:4px; padding:6px 0;} body.eiso-mobile #menu-box .tMenu > ul > li, body.eiso-mobile #menu-box .tMenu > ul > li.s1, body.eiso-mobile #menu-box .tMenu > ul > li.s2, body.eiso-mobile #menu-box .tMenu > ul > li.s3, body.eiso-mobile #menu-box .tMenu > ul > li.s4, body.eiso-mobile #menu-box .tMenu > ul > li.s5{flex:1 1 0; width:auto !important; min-width:0; padding:0; display:flex;} body.eiso-mobile #menu-box .tMenu > ul > li > a.mm{flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:34px; padding:3px 2px; border-radius:17px; font-size:12px; letter-spacing:-0.6px; line-height:1.2; word-break:keep-all; text-align:center;} } /* 2026-10-19 폰 — 상단 그림 없앰(폭이 좁아 글자가 잘려 보였다 — 안쪽 쪽 띠와 메인 큰 그림), 긴 칸은 이름을 글 위에 둔다 */ @media (max-width:1199px){ body.eiso-mobile #sv1, body.eiso-mobile #sv2, body.eiso-mobile #sv3, body.eiso-mobile #sv4, body.eiso-mobile #mainimg{display:none;} body.eiso-mobile #contents table.m-cards tr > th{display:block; width:auto !important; padding:9px 12px; background:#f4f7fb; border:0; border-bottom:1px solid #e1e7ef; font-weight:bold; text-align:left; white-space:normal !important; box-sizing:border-box;} body.eiso-mobile #contents table.m-cards td[data-long]{padding-left:12px !important;} body.eiso-mobile #contents table.m-cards td[data-long]:before{position:static; display:block; width:auto; margin:0 0 2px 0;} } /* 2026-10-21 다시 다섯 묶음 — ICT 경영시스템 운영(옛 AI 경영시스템 운영, s4)은 경영시스템 운영의 셋째 갈래로 들어갔다. 교육교재 작성 s4, 커뮤니티 s5 — 위 다섯 묶음 색 그대로. */ /* 2026-10-19 폰 — 목적별 안내 칸: 제목이 여러 줄이어도 링크 줄과 겹치지 않게(링크를 칸 아래에 흐름대로), 제목 줄 간격을 줄인다. 첫 칸이 짧은 2칸 표는 첫 칸을 좁게 */ @media (max-width:1199px){ body.eiso-mobile #go-ar .go-card{display:flex; flex-direction:column; padding:12px 14px 12px 14px;} body.eiso-mobile #go-ar .go-card b{line-height:1.3; margin-bottom:6px; padding-right:28px; text-wrap:pretty;} body.eiso-mobile #go-ar .go-card em{position:static; margin-top:auto; padding-top:2px; line-height:1.3; font-size:12.5px;} body.eiso-mobile #mbn_ar .mbn-h{font-size:20px; line-height:1.3;} body.eiso-mobile #mbn_ar .mbn-h a{display:block; margin:4px 0 0 0 !important;} body.eiso-mobile #contents table td, body.eiso-mobile #contents table th, body.eiso-mobile #contents p.ptst04, body.eiso-mobile #contents p.mdd{line-height:1.6;} body.eiso-mobile #contents table.m-narrow1 col:first-child{width:calc(var(--c1, 3) * .85em + 1.2em) !important;} body.eiso-mobile #contents table.m-narrow1 tr > :first-child{width:calc(var(--c1, 3) * .85em + 1.2em) !important; padding-left:4px !important; padding-right:4px !important; text-align:center; white-space:normal;} } /* 2026-10-19 폰 — 이름(첫 칸)이 길고 글(둘째 칸)이 긴 2칸 표: 이름을 위에·글을 아래 전체 폭으로(세로로 너무 길어지지 않게). 머리 줄이 있는 표는 첫 칸 폭만 34% */ @media (max-width:1199px){ body.eiso-mobile #contents table.m-stack, body.eiso-mobile #contents table.m-stack tbody, body.eiso-mobile #contents table.m-stack tr, body.eiso-mobile #contents table.m-stack td, body.eiso-mobile #contents table.m-stack th{display:block; width:auto !important; box-sizing:border-box;} body.eiso-mobile #contents table.m-stack{border:0 !important; background:none;} body.eiso-mobile #contents table.m-stack colgroup{display:none;} body.eiso-mobile #contents table.m-stack tr{margin:0 0 10px 0; border:1px solid #dce6f1; border-radius:6px; background:#fff; overflow:hidden;} body.eiso-mobile #contents table.m-stack tr > :first-child{padding:8px 12px !important; background:#f4f7fb; border:0 !important; border-bottom:1px solid #e1e7ef !important; font-weight:bold; text-align:left !important; white-space:normal !important; line-height:1.4;} body.eiso-mobile #contents table.m-stack tr > :last-child{padding:9px 12px !important; border:0 !important; text-align:left !important; line-height:1.6;} body.eiso-mobile #contents table.m-col34 tr > :first-child{width:34% !important; white-space:normal !important;} body.eiso-mobile #contents table.m-col34 colgroup{display:none;} body.eiso-mobile #contents table.m-col34{table-layout:fixed; width:100% !important; min-width:0 !important;} body.eiso-mobile #contents table.m-col34 td, body.eiso-mobile #contents table.m-col34 th{overflow-wrap:anywhere; word-break:keep-all; min-width:0;} body.eiso-mobile #contents table.m-col34 td *, body.eiso-mobile #contents table.m-stack td *{white-space:normal !important;} } /* 2026-10-20 서식 자료 › 부문별 서식(scripts/form-fn.cjs) — 열두 부문은 부문별 서식 아래, 그 쪽들에서만 펼침 */ #leftmenu2 .leftmenu-sub li.lm-fn > ul{display:none; background:#f1f4f8;} #leftmenu2 .leftmenu-sub li.lm-fn.on > ul{display:block;} #leftmenu2 .leftmenu-sub li.lm-fn > ul > li{background:none;} #leftmenu2 .leftmenu-sub li.lm-fn > ul > li > a{padding-left:34px; font-size:12.5px;} @media (max-width:1199px){ body.eiso-mobile #leftmenu2 .leftmenu-sub li.lm-fn > ul > li > a{padding-left:42px; font-size:13.5px;} } /* 2026-10-20 왼쪽 아래 상자 — 짧은 이름 세 칸, 머리 메뉴와 같은 색(문의 파랑 · 플랫폼 초록 · 지원·교육 주황) */ #left_ar #left_ban ul.lb3{padding:0; margin-top:24px; border:0; background:none;} #left_ar #left_ban ul.lb3 li{margin:0 0 8px; padding:0; border-radius:8px; font-size:16px; font-weight:700; line-height:1.3; color:#fff;} #left_ar #left_ban ul.lb3 li:last-child{margin-bottom:0; color:#fff;} #left_ar #left_ban ul.lb3 li a{display:block; padding:11px 14px; color:#fff !important; text-decoration:none; border-radius:8px;} #left_ar #left_ban ul.lb3 li a:hover{filter:brightness(.92);} #left_ar #left_ban ul.lb3 li span{display:block; margin-top:3px; font-size:13px; font-weight:500; line-height:1.3; color:#fff !important; opacity:.92; word-break:break-all;} #left_ar #left_ban ul.lb3 li.c1{background:#3373c0;} #left_ar #left_ban ul.lb3 li.c2{background:#2f7a64;} #left_ar #left_ban ul.lb3 li.c3{background:#aa5b0a;} /* 2026-10-20 고르는 칸 — 모두 파란 바탕·흰 굵은 글씨, 고르기 전에는 "선택해주세요"(대표 요청 "고객이 놓치지 않게"). 펼친 목록은 읽기 쉽게 흰 바탕. * AI 기능 화면은 kf.js 가 kf-step-sel, 그 밖의 정적 쪽은 scripts/pick-sel.cjs 가 pick-sel 을 붙인다. */ select.pick-sel, select.kf-step-sel{background-color:#5b7fae !important; color:#fff !important; border:1px solid #4a6c99 !important; font-weight:normal; border-radius:4px; cursor:pointer;} select.pick-sel option, select.kf-step-sel option{background:#fff; color:#222; font-weight:normal;} select.pick-sel:disabled, select.kf-step-sel:disabled{opacity:.6; cursor:not-allowed;} /* 체크·라디오도 같은 파란색(대표 요청 "모두 선택하는 부분은 색깔로 일관되게 식별"). label 로 감싼 것은 칩 — 고르기 전 옅은 파랑, 고르면 파란 바탕·흰 글씨. * 표 칸에 바로 놓인 체크(경영시스템 지원 및 교육 신청서·비용 안내 신청서)는 고른 칸을 옅은 파랑으로. */ input[type=checkbox], input[type=radio]{accent-color:#5b7fae; cursor:pointer;} label:has(> input[type=checkbox]), label:has(> input[type=radio]){background:#f4f7fb; border:1px solid #c3d1e3; border-radius:14px; padding:3px 12px 3px 10px; display:inline-flex; align-items:center; gap:6px; max-width:100%; box-sizing:border-box; color:#33506f; cursor:pointer; line-height:1.6; transition:background .15s, border-color .15s;} label:has(> input[type=checkbox]):hover, label:has(> input[type=radio]):hover{background:#e8eff8; border-color:#7f9cc2;} label:has(> input[type=checkbox]:checked), label:has(> input[type=radio]:checked){background:#5b7fae; border-color:#4a6c99; color:#fff;} label:has(> input:checked) *{color:inherit !important;} label:has(> input:focus-visible){outline:2px solid #4a6c99; outline-offset:1px;} label:has(> input:disabled){opacity:.55; cursor:not-allowed;} /* 칩의 안쪽 여백이 인라인 padding:…0(왼쪽 0)에 덮여 체크칸이 둥근 끝에 닿던 것, 같은 줄 칩이 서로 붙던 것(2026-10-20 팀장) */ label:not(.adm-ck):has(> input[type=checkbox]), label:not(.adm-ck):has(> input[type=radio]){padding-left:10px !important; padding-right:12px !important;} #kf .kf-opt-l label{padding-left:0 !important; padding-right:0 !important;} label[style*="width:50%"]:has(> input){width:calc(50% - 10px) !important; margin:0 6px 5px 0;} label[style*="width:33.3%"]:has(> input){width:calc(33.3% - 10px) !important; margin:0 6px 5px 0;} td:has(> input[type=checkbox]:checked), tr:has(> td > input.ds-chk:checked) > td{background:#eaf0f8 !important;} td:has(> input[type=checkbox]:checked){color:#3f5f88;} .ipt_btn33{min-height:44px; border-radius:4px;} /* 메뉴 묶음 소제목(계획·지원·운용·평가·개선) — 눌리지 않는 작은 제목 줄 */ #menu-box .tMenu > ul > li > ul > li.mgrp{font-size:12px; font-weight:bold; color:#586577; padding:8px 0 2px 0; margin-top:3px; border-top:1px solid #e3e9ef; cursor:default; white-space:nowrap; line-height:1.3;} #menu-box .tMenu > ul > li > ul > li.mgrp:first-child{border-top:0; margin-top:0;} #leftmenu2 li.mgrp{background:none !important; height:auto !important; padding:12px 10px 4px 10px; font-size:12px; font-weight:bold; color:#586577; border:0 !important; width:auto;} /* 예외 — 관리자 화면(.adm-box)은 칩 없이 글자 옆 체크 칸 그대로(승인 칸이 큰 알약이 되던 것) */ .adm-box label:not(.adm-ck):has(> input[type=checkbox]), .adm-box label:not(.adm-ck):has(> input[type=radio]), .adm-box label:not(.adm-ck):has(> input:checked){background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; color:inherit !important; display:inline !important;} .adm-box label.adm-ck:has(> input:checked){background:#eef4fb !important; border-color:#8fb0d8 !important; color:#1f3864 !important;} .adm-box label.adm-ck{color:#444; cursor:pointer;} .adm-box td:has(> input[type=checkbox]:checked){background:none !important; color:inherit; font-weight:inherit;} /* 모바일: 짧은 낱말이 글자 하나씩 세로로 꺾이지 않게(표 칸·굵은 글씨 — 한국어 어색한 세로 쓰기 방지) */ @media (max-width:1199px){ body.eiso-mobile td, body.eiso-mobile th, body.eiso-mobile b, body.eiso-mobile strong, body.eiso-mobile em{word-break:keep-all; overflow-wrap:break-word;} } /* 예외 — 결과의 "선택 항목 고르기" 목록은 줄 목록 그대로 */ #kf .kf-opt-l label, #kf .kf-opt-l label:hover, #kf .kf-opt-l label:has(> input:checked){background:none; border:0; border-radius:0; padding:1px 0; color:inherit;} /* polish:start (scripts/polish-layout.cjs) */ /* 왼쪽 위 제목 상자: 글자를 가운데에 크게 */ @media (min-width:1200px){ /* 머리 단추 그림은 2배 해상도(170×60)라 화면 크기를 85×30 으로 못 박는다 */ #header #top_ar li img{width:85px; height:30px;} #left_ar h2{display:flex; align-items:center; justify-content:center; height:64px !important; padding:0 14px !important; margin-bottom:10px; font-size:20px !important; font-weight:700; letter-spacing:-.3px; line-height:1.3; text-align:center;} #left_ar h2 a{font-size:inherit !important; font-weight:inherit !important;} } /* 문서형 쪽(제목 li.tbb_tit + 본문 li): 글자 크기·줄 간격·여백 */ #cont_ar:has(li.tbb_tit) > ul > li:not(.tbb_tit):not(.tbb_tit02){font-size:15px; line-height:1.95; color:#3a3a3a; word-break:keep-all; overflow-wrap:break-word; padding-left:8px; padding-right:8px;} #cont_ar:has(li.tbb_tit) > ul > li.tbb_tit{margin-top:6px; margin-bottom:24px; font-size:21px; letter-spacing:-.3px;} /* 박스 안 글자는 좌우 여백을 넉넉히 */ #cont_ar .ez-fitorg{gap:12px 16px;} #cont_ar .ez-fitorg li{padding:14px 20px; line-height:1.75;} #cont_ar .ez-prob .now, #cont_ar .ez-prob .fix{padding:14px 18px; line-height:1.75;} #cont_ar .ez-arch .col{padding:18px 22px; line-height:1.8;} #cont_ar .ez-people{gap:10px;} #cont_ar .ez-people div{padding:14px 10px;} #cont_ar .ez-three li{padding:6px 0 6px 36px; line-height:1.8;} /* AI AX: 볼드 대신 아이콘 칩 */ .ax-chip{display:inline-flex; align-items:center; gap:4px; padding:2px 10px 2px 8px; border-radius:12px; background:#efedfa; color:#5a4fb0; font-size:12.5px; font-weight:400; line-height:1.6; white-space:nowrap; vertical-align:middle;} .ax-chip svg{width:12px; height:12px; flex:0 0 auto; fill:#5a4fb0;} .mdd .st-ok{display:inline-block; margin-right:4px; color:#2e7a1b; white-space:nowrap;} table td.mdd[style*="text-align:center"]{vertical-align:middle;} /* 구축 방법 2가지 선택(그림 대신 카드) */ .way2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 8px; padding:0; list-style:none;} .way2 .way{box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 22px 26px; background:#fff; border:1px solid #dce6f1; border-radius:8px; text-align:center;} .way2 .way .no{display:inline-block; padding:1px 12px; border-radius:12px; background:#eaf0f8; color:#3f5f88; font-size:13px; line-height:1.7;} .way2 .way .ic{display:flex; align-items:center; justify-content:center; width:112px; height:112px; border-radius:50%; background:#eef3f8;} .way2 .way svg{width:64px; height:64px; fill:none; stroke:#47638a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .way2 .way b{display:block; font-size:16px; line-height:1.55; color:#1f3864; word-break:keep-all;} @media (max-width:1199px){ .way2{grid-template-columns:1fr;} } /* 버튼 크기 단계: 주(폼) 44 / 쪽 단추 40 / 작은 단추 32 — 글자는 14px·굵게, 모서리 4px */ #cont_ar a.lg-btn, #cont_ar a.bs-go, #cont_ar a.faq-btn, #cont_ar a.eiso-cta__btn, #cont_ar .kfs button, #cont_ar .kf-jump a{display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box; min-height:40px; padding:0 20px !important; font-size:14px !important; font-weight:700; line-height:1.2; border-radius:4px !important; text-decoration:none;} #cont_ar button[type=submit][style*="padding:12px 34px"]{min-height:44px; padding:0 30px !important; font-size:14px !important; line-height:1.2; border-radius:4px !important;} #cont_ar input.s-btn{height:34px; min-width:64px; padding:0 14px; font-size:13.5px; border-radius:4px;} #cont_ar a.fn-dl{display:inline-flex !important; align-items:center; justify-content:center; line-height:1.2; border-radius:4px !important;} /* 바로 운용하기 단추(설명이 길어 도구가 멀리 있는 기능 쪽) */ #cont_ar .kf-jump{margin:4px 0 20px;} #cont_ar .kf-jump a{border:1px solid #5b7fae; color:#3f5f88 !important; background:#fff;} #cont_ar .kf-jump a:hover{background:#eef3fa;} /* 가입 동의 체크: 글자를 눌러도 체크되게 label 로 감쌌다 */ label.agree-l{white-space:normal; font-weight:700; line-height:1.6; padding-top:8px !important; padding-bottom:8px !important; text-align:left;} /* 12px 미만이던 작은 글자 */ #ops .op-steps8 li small{font-size:12.5px !important;} #hero-cta small, #greet-ar .gr-date small, #greet-ar .gr-meta small{font-size:12.5px;} /* 폰: 입력칸·고르기는 손가락으로 누르기 쉽게(16px 이상이면 아이폰이 확대하지 않는다) */ @media (max-width:1199px){ body.eiso-mobile #contents input[type=text], body.eiso-mobile #contents input[type=password], body.eiso-mobile #contents input[type=email], body.eiso-mobile #contents input[type=tel], body.eiso-mobile #contents input[type=number], body.eiso-mobile #contents select{min-height:40px; font-size:16px;} body.eiso-mobile #contents textarea{font-size:16px;} /* 폰: 눌러야 하는 작은 단추·탭은 높이 36~44px */ body.eiso-mobile #tab_btn li a{display:flex !important; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; text-align:center;} body.eiso-mobile a.fn-dl, body.eiso-mobile a.mdl-go{min-height:36px; display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box;} body.eiso-mobile a.fn-board, body.eiso-mobile a.bs-link{display:inline-block; padding:9px 0;} body.eiso-mobile .ez-tag{padding:4px 9px; font-size:12.5px; line-height:1.4;} body.eiso-mobile input.s-btn{min-height:40px;} body.eiso-mobile #cont_ar .ez-three li .to{display:block; white-space:normal !important; margin-top:2px;} body.eiso-mobile .gr-facts{flex-direction:column;} body.eiso-mobile #tab_btn.tab4 > ul{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0; padding:0; list-style:none;} body.eiso-mobile #tab_btn.tab4 li{width:auto !important; float:none;} body.eiso-mobile #tab_btn li{float:none; width:100%;} body.eiso-mobile #tab_btn.tab4 li{width:auto;} } /* 야간 점검 보완(시각 점검): 미리 체크된 분석 방법 카드·용어 풀이 글자 크기·탭 넷·접힌 상자 여백·제목 위 간격·※ 안내 */ #kf table.kf-form label[style*="width:"]:has(> input:checked){background:#eaf0f8 !important; border-color:#8fb0d8 !important; color:#1f3864 !important;} #kf table.kf-form label[style*="width:"]:has(> input:checked) :is(span,small,em,i){color:#55698a !important;} #kf table.kf-form label[style*="width:"]:has(> input:checked) *{color:inherit;} .gt{font-size:inherit;} #tab_btn.tab4 li{width:25%; box-sizing:border-box;} details.sp-old > :not(summary){padding-left:24px; padding-right:24px; box-sizing:border-box;} details.sp-old[open]{padding-bottom:24px;} #contents .axm-note + h4, #contents table + h4, #contents .axm-phase + h4{margin-top:28px;} p.ptst04.note{background:none; padding-left:0;} .lg-card{display:flex; flex-direction:column;} .lg-card .use{margin-top:auto;} label:has(> input[type=radio] ~ b ~ b){display:block !important; background:none !important; border:0 !important; color:inherit !important; padding:4px 0 !important;} /* 고른 칩(파란 바탕) 안의 작은 설명 글자는 인라인 회색이어도 흰색 계열로 — 묻히지 않게 */ label:has(input:checked) :is(span,small,em,i){color:rgba(255,255,255,.92) !important;} .adm-box label:has(input:checked) :is(span,small,em,i), #kf .kf-opt-l label:has(input:checked) :is(span,small,em,i){color:inherit !important;} /* 색 톤 — 업무분장 표·접힘 상자는 파란 회색 톤으로(초록 바탕 위 살구색 머리 금지) */ #ops details.op-fold{background:#fff !important;} #ops .op-role thead th{background:#eef3f9 !important; color:#1f3864 !important;} #ops .op-role th, #ops .op-role td{border-color:#dce6f1 !important;} #ops .op-role details{border-color:#dce6f1 !important;} #ops .op-role summary{color:#1f3864 !important;} #ops .op-lead{background:#eef3f9 !important; border-color:#5b7fae !important;} #ops .op-lead b{color:#1f3864;} #ops .op-lead{line-height:1.7 !important; padding:16px 22px !important;} #ops .op-lead p{line-height:1.7; margin:0 0 4px;} #ops .op-lead p:last-child{margin-bottom:0;} /* 탭 단추 — 한 줄 칸 수를 맞추고 높이를 같게, 줄바꿈 글자도 가운데, 마지막 줄은 남는 폭을 나눠 채움, 고른 탭은 파랑 */ @media (min-width:1200px){ #tab_btn{overflow:visible;} #tab_btn > ul{display:grid !important; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:6px; margin:0; padding:0; list-style:none;} #tab_btn li, #tab_btn li.on{float:none; grid-column:span 2; width:auto !important; height:auto !important; min-height:46px !important; margin:0 !important; padding:0 !important; display:flex;} #tab_btn:has(li:nth-child(5):last-child) li:nth-child(n+4){grid-column:span 3;} #tab_btn:has(li:nth-child(4):last-child) > ul{grid-template-columns:repeat(4,1fr) !important;} #tab_btn:has(li:nth-child(4):last-child) li{grid-column:span 1;} #tab_btn:has(li:nth-child(3):last-child) li{grid-column:span 2;} #tab_btn:has(li:nth-child(2):last-child) li{grid-column:span 3;} #tab_btn li a{display:flex; align-items:center; justify-content:center; width:100%; padding:8px 6px; box-sizing:border-box; text-align:center; line-height:1.3; font-size:14px; word-break:keep-all;} } #tab_btn li.on{background:#5b7fae !important; border-color:#5b7fae !important;} #tab_btn li.on a{color:#fff !important;} @media (max-width:1199px){ #tab_btn > ul{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none;} #tab_btn li, #tab_btn li.on{float:none; width:100% !important; height:auto !important; min-height:56px !important; margin:0 !important; padding:0 !important; display:flex; box-sizing:border-box;} #tab_btn li a{display:flex; align-items:center; justify-content:center; width:100%; padding:10px 12px; box-sizing:border-box; text-align:center; line-height:1.35;} } /* 좌우 균등 — 단추 줄은 칸 폭 전체를 같은 폭으로 나눈다(한쪽으로 쏠리지 않게) */ @media (min-width:1200px){ #faq .faq-nav{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px; overflow:visible;} #faq .faq-nav li{float:none; margin:0;} #faq .faq-nav a{display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:40px; text-align:center;} #corp .cp-go{display:flex; gap:8px;} #corp .cp-go a{flex:1 1 0; margin:8px 0 0 0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:40px; text-align:center;} .am-box .am-bar{gap:8px;} .am-box .am-bar > *{flex:1 1 0; min-height:34px;} } /* 베트남어 왼쪽 메뉴 — 두 줄로 꺾이는 이름이 칸 밖으로 나가지 않게(높이를 글자에 맞춤, 칸 선·화살표는 직접 그림) */ html:lang(vi) #leftmenu2 > li{background:none !important; border-bottom:1px solid #d9d9d9; position:relative;} html:lang(vi) #leftmenu2 > li > a{height:auto !important; min-height:40px; box-sizing:border-box; padding:10px 28px 10px 10px !important; line-height:1.35; display:flex; align-items:center;} html:lang(vi) #leftmenu2 > li::after{content:""; position:absolute; right:14px; top:50%; width:6px; height:6px; margin-top:-4px; border-top:2px solid #999; border-right:2px solid #999; transform:rotate(45deg); pointer-events:none;} html:lang(vi) #leftmenu2 > li > #leftOver{background:#3a6fba !important; color:#fff;} html:lang(vi) #leftmenu2 > li:has(> #leftOver)::after{border-color:#fff;} /* 질문과 답변 목록 — 폰에서는 번호·작성자 칸을 접어 한 화면에 */ @media (max-width:1199px){ body.eiso-mobile #qna table.qna-list{table-layout:fixed; min-width:0 !important; width:100% !important;} body.eiso-mobile #qna table.qna-list col:nth-child(1), body.eiso-mobile #qna table.qna-list col:nth-child(4), body.eiso-mobile #qna table.qna-list tr > :nth-child(1), body.eiso-mobile #qna table.qna-list tr > :nth-child(4){display:none;} body.eiso-mobile #qna table.qna-list col:nth-child(3), body.eiso-mobile #qna table.qna-list col:nth-child(5){width:84px !important;} body.eiso-mobile #qna table.qna-list td.t{word-break:break-word;} } /* 맨위로(TOP) 단추는 안내 도우미 상자 아래로, 상자가 열리면 숨김 */ .p_top{z-index:9000 !important;} body:has(#eg-root.eg-open) .p_top{display:none !important;} /* polish:end */ /* xb:start — "펼쳐 보기" 표지(2026-10-21 대표 요청, scripts/xb.cjs) */ summary .xb{display:inline-block !important; margin:0 0 0 8px !important; padding:2px 11px !important; border:1px solid #8fb0d8 !important; border-radius:12px !important; background:#eaf0f8 !important; color:#3f5f88 !important; font-size:12.5px !important; font-weight:bold !important; line-height:1.6 !important; vertical-align:middle; white-space:nowrap; letter-spacing:0 !important; text-decoration:none !important;} details[open] > summary .xb{opacity:.8;} summary.sec-sum .xb{margin-left:0 !important;} details.sec-more > summary:after{content:none !important;} /* 펼쳐 보기 — 줄을 차지하지 않고 제목 줄 오른쪽의 작은 단추로(파란 톤), 펼친 뒤에도 같은 자리 */ summary .xb{float:right; margin:0 0 0 12px !important; padding:2px 10px 2px 11px !important; border:1px solid #8fb0d8 !important; background:#eaf0f8 !important; color:#3f5f88 !important; font-size:12px !important; line-height:1.55 !important; font-weight:600 !important;} summary .xb::after{content:""; display:inline-block; width:5px; height:5px; margin-left:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); position:relative; top:-2px;} details[open] > summary .xb::after{transform:rotate(-135deg); top:1px;} summary:hover .xb{background:#dce8f6 !important; border-color:#5b7fae !important;} details:not(.sec-more) > summary:has(> .xb)::after{content:""; display:table; clear:both;} h2:has(+ details.sec-more){display:flex !important; align-items:center; box-sizing:border-box !important; height:46px !important; min-height:0 !important; margin:14px 0 0 0 !important; padding:0 !important;} h2 + details.sec-more{margin:-46px 0 0 0 !important; position:relative;} h2 + details.sec-more > summary.sec-sum{display:flex !important; justify-content:flex-end; align-items:center; height:46px; padding:0 !important; border:0 !important; background:none !important; box-sizing:border-box;} h2 + details.sec-more > summary.sec-sum .xb{float:none; margin:0 !important;} h2 + details.sec-more > .sec-body{padding-top:12px;} details > summary:has(> .xb)::after{content:"" !important; display:table !important; clear:both; margin:0 !important;} h2 + details.sec-more > summary.sec-sum::after{content:none !important; display:none !important;} /* 메인 묶음 제목 줄 — 줄마다 높이 64px 로 같고, 글이 줄 가운데에, 구분선은 줄 맨 위(2026-10-21 팀장: 위아래 간격·칸 크기가 들쭉날쭉) */ #go-ar, #mbn_ar{padding-top:0 !important; padding-bottom:0 !important;} #kms-ar{padding-top:0 !important;} #mbn_ar{background:#f4f7fb; box-shadow:0 0 0 100vmax #f4f7fb; clip-path:inset(0 -100vmax);} #kms-ar{border-top:0 !important;} #kms-ar h2#doc-ar{border-top:1px solid #dce6f1 !important;} #go-ar h2:has(+ details.sec-more), #mbn_ar h2:has(+ details.sec-more), #kms-ar h2:has(+ details.sec-more){height:64px !important; margin:0 !important; padding:9px 0 !important;} #go-ar h2 + details.sec-more, #mbn_ar h2 + details.sec-more, #kms-ar h2 + details.sec-more{margin:-64px 0 0 0 !important;} #go-ar h2 + details.sec-more > summary.sec-sum, #mbn_ar h2 + details.sec-more > summary.sec-sum, #kms-ar h2 + details.sec-more > summary.sec-sum{height:64px;} #go-ar h2 + details.sec-more > .sec-body, #mbn_ar h2 + details.sec-more > .sec-body, #kms-ar h2 + details.sec-more > .sec-body{padding:0 0 18px 0;} #go-ar h2 + details.sec-more > summary:focus, #mbn_ar h2 + details.sec-more > summary:focus, #kms-ar h2 + details.sec-more > summary:focus{outline:none;} #go-ar h2 + details.sec-more > summary:focus-visible, #mbn_ar h2 + details.sec-more > summary:focus-visible, #kms-ar h2 + details.sec-more > summary:focus-visible{outline:2px solid #5b7fae; outline-offset:-2px; border-radius:4px;} /* 갈래 카드 — 단계 이름 나열은 숨기고(안내 쪽에 있음), 설명은 몇 줄까지만 */ .kms-trk > p[style*="font-size:12px"]{display:none;} .kms-trk > p:not(.kms-go):not([style]){display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; line-height:1.65;} .kms-trk .kms-cl{display:block; margin-bottom:6px; line-height:1.5;} .op-lead p{line-height:1.85; margin:0 0 10px;} /* 운영 안내 자세히 보기(녹색 제목줄) — 표지는 흰 알약에 녹색 글자로 같은 계열, 안의 표 제목줄도 녹색 계열로 짙게(2026-10-21 팀장: 초록에 하늘색 단추가 어울리지 않고, 표 제목줄이 바탕에 묻힘) */ details#ops-fold > summary .xb, details#aims-fold > summary .xb, details#ops-fold-ict > summary .xb{background:#fff !important; border-color:#fff !important; color:#2f7a64 !important;} details#ops-fold > summary:hover .xb, details#aims-fold > summary:hover .xb, details#ops-fold-ict > summary:hover .xb{background:#eaf5f0 !important; border-color:#eaf5f0 !important;} details#ops-fold table.op-t th, details#aims-fold table.op-t th, details#ops-fold-ict table.op-t th, details#ops-fold .op-role thead th, details#aims-fold .op-role thead th, details#ops-fold-ict .op-role thead th{background:#d6e9e1 !important; color:#14483a !important; font-weight:bold; border-bottom:2px solid #2f7a64 !important;} details#ops-fold table.op-t td:first-child, details#aims-fold table.op-t td:first-child, details#ops-fold-ict table.op-t td:first-child{background:#f1f8f5 !important; color:#2b3a36;} details#ops-fold h4, details#aims-fold h4, details#ops-fold-ict h4, details#ops-fold .op-lead b, details#aims-fold .op-lead b, details#ops-fold-ict .op-lead b, details#ops-fold details:not(.op-fold) > summary, details#aims-fold details:not(.op-fold) > summary, details#ops-fold-ict details:not(.op-fold) > summary{color:#1d5a47 !important;} /* 같은 상자 안의 연관도(그림·단추·소제목)도 초록 한 계열로(ICT 갈래 카드·단추는 보라 그대로) */ details#ops-fold .am-box, details#aims-fold .am-box, details#ops-fold-ict .am-box{--am:#2f7a64 !important;} details#ops-fold .am-box a[style*="6357b6"], details#aims-fold .am-box a[style*="6357b6"], details#ops-fold-ict .am-box a[style*="6357b6"]{background:#2f7a64 !important; border-color:#2f7a64 !important;} /* 운영 갈래 카드 셋 — 제목 줄·본문 시작·단추 줄이 같은 높이에 서도록(단추는 카드 바닥), 제목 글자는 색을 짙게(초록이 묻힘) */ #ops-tracks .ot-g{align-items:stretch !important;} #ops-tracks .ot-c{display:flex !important; flex-direction:column;} #ops-tracks .ot-c h5{padding-left:0 !important; color:color-mix(in srgb, var(--c) 68%, #000) !important;} #ops-tracks .ot-c a.ot-go{margin-top:auto !important; align-self:flex-start;} #ops-tracks .ot-c > p:last-of-type{margin-bottom:14px;} /* 메인 경영시스템 운영 카드 — 설명 길이가 달라도 "운용하기" 단추는 카드 바닥 같은 줄 */ .kms-ops > li.kms-trk, .kms-ops > li.kms-ws{display:flex !important; flex-direction:column;} .kms-ops > li.kms-trk > .kms-go, .kms-ops > li.kms-ws > .kms-go{margin-top:auto !important;} /* 초록 통일: 제목줄 바탕은 흰 글자 대비가 5:1 이상이 되게 짙게, 표지는 열려 있어도 흐려지지 않게, 지난 작업 상자도 같은 초록 */ details#ops-fold > summary, details#aims-fold > summary, details#ops-fold-ict > summary{background:#2f7a64 !important;} details#ops-fold, details#aims-fold, details#ops-fold-ict{border-color:#2f7a64 !important;} details#ops-fold[open] > summary .xb, details#aims-fold[open] > summary .xb, details#ops-fold-ict[open] > summary .xb{opacity:1 !important;} #kf-hist > summary .xb{background:#e3f1ea !important; border-color:#7fb59f !important; color:#1d5a47 !important; opacity:1 !important;} #kf-hist > summary:hover .xb{background:#d3e8de !important;} /* 머리 메뉴 — 경영시스템 운영 갈래 옆 가지(2026-10-22 팀장 요청 "운영 파트가 너무 길다", scripts/menu.cjs). 마우스는 오른쪽으로 뻗고, 터치 화면은 눌러서 아래로 펼친다 */ #menu-box .tMenu li.hasfly{position:relative;} #menu-box .tMenu li.hasfly > a{display:flex; align-items:center; justify-content:space-between; gap:6px;} #menu-box .tMenu li.hasfly > a::after{content:"›"; font-size:20px; font-weight:700; line-height:1; color:#1d5a47;} #menu-box .tMenu li.hasfly > ul.fly{display:none; position:absolute; left:100%; top:-6px; z-index:30; box-sizing:border-box; width:470px; margin:0; padding:0 0 0 24px; list-style:none; background:transparent; border:0; border-left:2px solid #b9cbd8; column-count:2; column-gap:26px;} /* 커뮤니티(맨 오른쪽 단추)의 두 선실 안내실·여객실(2026-10-29) — 화면 밖으로 나가지 않게 왼쪽으로 한 단 */ #menu-box .tMenu > ul > li.s5 li.hasfly > ul.fly{left:auto; right:100%; width:300px; padding:0 24px 0 0; border-left:0; border-right:2px solid #b9cbd8; column-count:1;} /* 두 선실은 엷은 색(2026-10-29 대표 "커뮤니티 내에 안내실과 여객실은 색깔을 넣어주세요, 엷은 색으로") — 배 그림의 선실 색과 한 벌(안내실 모래색·여객실 민트색) */ #menu-box .tMenu li.hasfly.room-desk > a, #menu-box .tMenu li.hasfly.room-comm > a{display:block; margin:0 0 4px; padding:4px 8px; border-radius:4px; font-weight:700;} #menu-box .tMenu li.hasfly.room-desk > a{background:#fbf2de; border-left:3px solid #1d6b45; color:#185a3b;} #menu-box .tMenu li.hasfly.room-comm > a{background:#e7f3ee; border-left:3px solid #2f7a64; color:#1d5a47;} #menu-box .tMenu > ul > li.s5 li.hasfly.room-desk > ul.fly{padding:10px 16px; border-right:3px solid #1d6b45; border-radius:6px 0 0 6px; background:#fdf8ee;} #menu-box .tMenu > ul > li.s5 li.hasfly.room-comm > ul.fly{padding:10px 16px; border-right:3px solid #2f7a64; border-radius:6px 0 0 6px; background:#f3f9f6;} #leftmenu2 li.mgrp.room-desk, #leftmenu2 li.mgrp.room-comm{margin-top:6px; padding:8px 10px 6px 10px; font-size:12.5px;} #leftmenu2 li.mgrp.room-desk{background:#fbf2de !important; border-left:3px solid #1d6b45 !important; color:#185a3b;} #leftmenu2 li.mgrp.room-comm{background:#e7f3ee !important; border-left:3px solid #2f7a64 !important; color:#1d5a47;} #leftmenu2 li.mgrp.room-desk ~ li:not(.mgrp){background-color:#fdf8ee;} #leftmenu2 li.mgrp.room-comm ~ li:not(.mgrp){background-color:#f3f9f6;} /* 머리 다섯 단추의 모듈 묶음 — 점선 상자(2026-10-30 대표 "같은 모듈이므로 … 점선으로 묶거나", 시안 B): 정보 수집·교육교재 작성 = 화물실 모듈(초록), 경영시스템 수립·운영 = 기관실 모듈(산호색). 상자는 s1·s3 의 ::after 가 이웃 단추까지 덮는다(HTML 은 그대로). PC: 칸 240·단추 212(양쪽 14) → 상자 = 단추 둘 + 6px. 폭 1200 미만: 칸 = 단추, 간격 4px → 짝 사이에 6px 를 더 띄우고 상자 = 단추 둘 + 3px. */ #menu-box .tMenu > ul > li.s1, #menu-box .tMenu > ul > li.s3{position:relative;} #menu-box .tMenu > ul > li.s1::after, #menu-box .tMenu > ul > li.s3::after{content:""; position:absolute; z-index:0; pointer-events:none; left:8px; top:4px; width:calc(200% - 16px); height:50px; box-sizing:border-box; border:2px dashed #2f9461; border-radius:26px;} #menu-box .tMenu > ul > li.s3::after{border-color:#cc5a4d;} @media (max-width:1199px){ #menu-box .tMenu > ul > li.s3, #menu-box .tMenu > ul > li.s5{margin-left:6px;} #menu-box .tMenu > ul > li.s1::after, #menu-box .tMenu > ul > li.s3::after{left:-3px; top:-3px; width:calc(200% + 10px); height:calc(100% + 6px); max-height:46px; border-radius:24px;} } /* 같은 모듈의 짝 기능 한 줄(2026-10-30 대표 "정보수집 밑에 칸에 교육교재 작성을 색깔로 표시하여 누르면 교육교재 작성으로") — 왼쪽 메뉴 바로 밑(scripts/menu.cjs PAIR), 머리 단추 묶음과 같은 점선·색(화물실 초록·기관실 산호색), 위 작은 글은 모듈 이름(언어별) */ /* 2026-10-30 대표 "글씨가 작고 식별하기 어려우니 색깔을 넣어주고 글씨도 크게, 모든 모듈에 동일하게" — 굵은 점선(3px)·글씨 18px, 모듈 이름은 모듈 색 띠(흰 글 13.5px). 통째로 짙게 채우면 바로 밑 초록 "문의" 상자와 구분되지 않아 옅은 바탕 + 색 띠로 했다(화물실 초록 #1f7a4d · 기관실 산호 #a8443a — 흰 글 대비 4.5 이상) */ a.mod-pair{display:block; margin:12px 0 6px; padding:10px 14px 12px; border:3px dashed #2f9461; border-radius:12px; background:#e4f3ea; color:#1f7a4d !important; font-size:18px; font-weight:bold; line-height:1.35; text-decoration:none;} a.mod-pair.mod-general{border-color:#cc5a4d; background:#fcece9; color:#a8443a !important;} a.mod-pair::before{display:table; margin:0 0 6px; padding:2px 10px 3px; border-radius:10px; background:#1f7a4d; color:#fff; font-size:13.5px; font-weight:bold; line-height:1.4;} a.mod-pair.mod-general::before{background:#a8443a;} a.mod-pair::after{content:" ›"; font-size:20px;} /* 폰(왼쪽 상자가 펼침 막대로 바뀌는 배치)에서는 막대 바로 밑(order 2), 한 줄로 낮게(2026-10-30 검토) */ #left_ar > a.mod-pair{order:2;} @media (max-width:1199px){ #left_ar > a.mod-pair{margin:10px 0 2px; padding:8px 12px 10px; font-size:17px;} #left_ar > a.mod-pair::before{display:inline-block; margin:0 8px 0 0; vertical-align:2px;} } a.mod-pair:hover{text-decoration:underline; filter:brightness(1.08);} html[lang="ko"] a.mod-pair.mod-basic::before{content:"같은 화물실 모듈";} html[lang="ko"] a.mod-pair.mod-general::before{content:"같은 기관실 모듈";} html[lang="vi"] a.mod-pair.mod-basic::before{content:"Cùng mô-đun Khoang hàng hóa";} html[lang="vi"] a.mod-pair.mod-general::before{content:"Cùng mô-đun Phòng máy";} html[lang="en"] a.mod-pair.mod-basic::before{content:"Same module: Cargo Hold";} html[lang="en"] a.mod-pair.mod-general::before{content:"Same module: Engine Room";} /* 다른 선실은 이름 한 줄로 접힘(2026-10-29) — 누르면 그 선실 첫 쪽 */ #leftmenu2 li.mgrp.shut{padding:0 !important;} #leftmenu2 li.mgrp.shut > a{display:block; padding:8px 10px 6px 10px; color:inherit; font-size:12.5px; font-weight:bold; text-decoration:none; background:none !important; border:0 !important; height:auto !important; line-height:1.4;} #leftmenu2 li.mgrp.shut > a{display:flex !important; justify-content:space-between; align-items:center;} #leftmenu2 li.mgrp.shut > a::after{content:"›" !important; display:inline !important; float:none !important; position:static !important; margin:0 0 0 8px !important; font-size:16px; line-height:1;} #leftmenu2 li.mgrp.shut > a:hover{text-decoration:underline;} @media (hover:hover){ /* 옆 가지가 덮는 다른 단추의 목록만 숨긴다 — 운영(넷째)은 오른쪽(다섯째)을, 커뮤니티(다섯째)는 왼쪽(셋째·넷째)을 덮는다(2026-10-29 단추별로 나눔) */ #menu-box .tMenu:has(li.s4 li.hasfly:hover) > ul > li.s5 > ul, #menu-box .tMenu:has(li.s4 li.hasfly:focus-within) > ul > li.s5 > ul{visibility:hidden;} #menu-box .tMenu:has(li.s5 li.hasfly:hover) > ul > li.s3 > ul, #menu-box .tMenu:has(li.s5 li.hasfly:hover) > ul > li.s4 > ul, #menu-box .tMenu:has(li.s5 li.hasfly:focus-within) > ul > li.s3 > ul, #menu-box .tMenu:has(li.s5 li.hasfly:focus-within) > ul > li.s4 > ul{visibility:hidden;} } #menu-box .tMenu li.hasfly:hover > ul.fly, #menu-box .tMenu li.hasfly:focus-within > ul.fly, #menu-box .tMenu li.hasfly.open > ul.fly{display:block;} #menu-box .tMenu li.hasfly:hover > a, #menu-box .tMenu li.hasfly.open > a, #menu-box .tMenu li.hasfly:focus-within > a{color:#1d5a47; font-weight:700;} #menu-box .tMenu ul.fly li{margin:0 0 5px; break-inside:avoid; list-style:none;} #menu-box .tMenu ul.fly li > a{font-size:14px; color:#222; white-space:normal; display:block; line-height:1.35;} #menu-box .tMenu ul.fly li > a:hover{color:#1d5a47; text-decoration:underline;} #menu-box .tMenu ul.fly li.mgrp{break-after:avoid; margin:8px 0 4px; padding:0 0 3px; border-top:0; border-bottom:1px solid #c9d6df; font-size:12.5px; font-weight:700; color:#1d5a47;} #menu-box .tMenu ul.fly li.mgrp:first-child{margin-top:0;} @media (hover:none){ #menu-box .tMenu li.hasfly > ul.fly{position:static; width:auto; margin:4px 0 8px; padding:8px 10px; column-count:1; box-shadow:none; background:#f6faf8; border-color:#dcebe4;} #menu-box .tMenu li.hasfly:hover > ul.fly, #menu-box .tMenu li.hasfly:focus-within > ul.fly{display:none;} #menu-box .tMenu li.hasfly.open > ul.fly{display:block;} #menu-box .tMenu > ul > li > ul{display:none;} #menu-box .tMenu > ul > li.sel > ul{display:block;} #menu-box .tMenu > ul > li.sel > a.mm{box-shadow:0 0 0 3px rgba(31,56,100,.35);} #menu-box .tMenu li.hasfly > a::after{content:"⌄";} #menu-box .tMenu li.hasfly.open > a::after{content:"⌃";} } /* 폰: 쪽 위 회색 단추(#tab_btn)의 글이 위로 쏠리던 것(2026-10-22 팀장 "상하 밸런스") — 칸(li) 최소 높이 56px 인데 안의 링크는 44px 이라 아래가 비었다. 링크가 칸을 꽉 채우고 글은 가운데 */ @media (max-width:1199px){ #tab_btn li, #tab_btn li.on{display:flex !important; align-items:stretch;} #tab_btn li > a{flex:1 1 auto; width:100%; min-height:54px !important; display:flex !important; align-items:center; justify-content:center; text-align:center; box-sizing:border-box;} } /* 연관도·연계표(폰) — 그림과 큰 표는 가로로 잘리고 숫자뿐이라 이해하기 어렵다(2026-10-22 팀장). 폭 900 이하에서는 단계 카드를 눌러 이름·조항·까닭으로 펼친다(public/kf/kf-linkmap.js) */ .am-box .am-sd, .am-box .am-mnote{display:none;} /* 폰은 스크롤을 늘이지 않게(2026-10-22 팀장) — 카드 표 칸 여백을 줄이고, 기능 선택 카드는 이름 옆에 "이 기능 선택" 단추를 나란히, 이름표 "기능" 칸은 감춘다 */ body.eiso-mobile #contents table.m-cards td{padding-top:5px !important; padding-bottom:5px !important;} body.eiso-mobile #contents table.m-cards tr{margin-bottom:10px;} body.eiso-mobile #contents table.m-cards td:before{top:7px;} body.eiso-mobile #sp-guide table.sp-fn td:first-child{display:flex !important; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px 8px 16px !important; min-width:0;} body.eiso-mobile #sp-guide table.sp-fn td:first-child:before{display:none;} body.eiso-mobile #sp-guide table.sp-fn td:first-child > a:first-child{flex:1 1 auto; min-width:0;} body.eiso-mobile #sp-guide table.sp-fn a.sp-pick{flex:0 0 auto; margin:0; padding:5px 12px;} body.eiso-mobile #sp-guide table.sp-fn td[data-long]{padding-top:4px !important; padding-bottom:6px !important;} body.eiso-mobile #sp-guide table.sp-fn td[data-long]:before{position:static; display:block; width:auto; margin:0 0 1px;} /* 수립 안내 하위 쪽(솔루션 구성·구축 방법, 2026-10-22 팀장 "수립 안내만 다듬어지고 나머지는 빈약") — 제목은 왼쪽 띠, 본문은 카드로 수립 안내(#sp-guide)와 같은 결 */ #cont_ar > ul.sp-doc{margin:0 0 30px;} #cont_ar > ul.sp-doc > li.tbb_tit{width:auto !important; text-align:left; background:#fdf3f4 !important; border-left:5px solid #a8404f; border-radius:0 8px 8px 0; padding:11px 18px !important; margin:0 0 12px !important; font-size:19px !important; color:#6b1f2a;} #cont_ar > ul.sp-doc > li:not(.tbb_tit){border:1px solid #e6e6e6; border-radius:10px; padding:18px 24px !important; margin:0 0 28px; background:#fff; box-sizing:border-box;} #cont_ar > ul.sp-doc > li:first-child:not(.tbb_tit){background:#fdf8f8; border-color:#f0d3d7; border-left:4px solid #a8404f;} #cont_ar > ul.sp-doc > li:not(.tbb_tit) h3{margin:4px 0 10px; padding:0 0 8px; background:none !important; font-size:16px; color:#8a2333; border-bottom:1px solid #f0d3d7;} #cont_ar > ul.sp-doc > li:not(.tbb_tit) b{color:#222;} #cont_ar > ul.sp-doc b.sp-pc{display:inline-block; margin-right:6px; padding:0 10px; border-radius:11px; font-size:13px; line-height:22px;} #cont_ar > ul.sp-doc b.sp-pc.pro{background:#e7f3e6; color:#2e6b24;} #cont_ar > ul.sp-doc b.sp-pc.con{background:#fbe9e9; color:#a02a2a;} @media (max-width:1199px){#cont_ar > ul.sp-doc > li:not(.tbb_tit){padding:14px 14px !important;} #cont_ar > ul.sp-doc > li.tbb_tit{font-size:17px !important; padding:9px 14px !important;}} /* 기능 표 상태 칸(2026-10-22 팀장 "이용 가능 밸런스") — 모든 줄이 같은 모양: 위 "이용 가능", 아래 칩 한 개(자료실·AI AX), 가운데 맞춤 */ td.mdd[style*="text-align:center"]:has(> .st-ok) > .st-ok{display:block; margin:0 0 4px; line-height:1.4;} .ax-chip.ax-plain{background:#eef1f5; color:#4a5a70;} @media (max-width:1199px){ .am-box .am-wrap, .am-box .am-hint, .am-box .am-bar, .am-box .am-lg, .am-box details.am-more, .am-box .am-pan{display:none !important;} .am-box .am-mnote{display:block; margin:0 0 10px; padding:9px 12px; border-radius:8px; background:#f1f8f5; border:1px solid #dcebe4; color:#1d5a47; font-size:13.5px; line-height:1.6;} .am-box .am-note{display:none !important;} /* 마우스 안내는 폰에서 뺀다 */ .am-box .am-sg{display:grid !important; grid-template-columns:1fr !important; gap:8px !important;} .am-box .am-sc{width:auto !important; box-sizing:border-box;} .am-box .am-sc > p{display:none !important;} .am-box .am-sd{display:block; margin-top:8px;} .am-box .am-tg{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:8px 12px; border:1px solid #c9d6e6; border-radius:10px; background:#f7fafd; color:#1f3864; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-align:left;} .am-box .am-tg span{color:inherit; background:none; padding:0; border:0; font:inherit; display:block;} .am-box .am-tg i{font-style:normal; color:#586577;} .am-box .am-sc.open .am-tg{background:#1f3864; color:#fff;} .am-box .am-sc.open .am-tg i{color:#fff; transform:rotate(180deg);} .am-box .am-sdb{margin-top:8px;} .am-box .am-sdb h6{margin:10px 0 6px; padding:0 0 4px; border-bottom:1px solid #dcebe4; color:#1d5a47; font-size:13px; font-weight:700;} .am-box .am-sdb ul{margin:0; padding:0; list-style:none;} .am-box .am-sdb li{margin:0 0 6px; padding:8px 10px 8px 12px; border:1px solid #e3e9ef; border-left:4px solid #7d95b3; border-radius:6px; background:#fff; font-size:13.5px; line-height:1.5; color:#222;} .am-box .am-sdb li.fb{border-left-color:#aa5b0a; background:#fffaf4;} .am-box .am-sdb li b{display:block; color:#1f3864;} .am-box .am-sdb li.fb b{color:#8a4a08;} .am-box .am-sdb li span{display:block; margin-top:2px; color:#444; font-size:13px; word-break:keep-all;} .am-box .am-sdb p{margin:0; color:#586577; font-size:13px;} } /* 경영시스템 수립 및 교육 문의(sub01_6) — 칩이 따닥따닥 붙던 것(2026-10-22 팀장). 대상 표준 칩은 두 칸 격자에 위아래 10·좌우 12px, 지원 유형·이용 현황 칩은 위아래 숨 쉴 자리, 희망 교육 입력은 칩 줄에서 띄운다 */ .ms-std .kf-std-grp{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; padding:8px 12px 9px !important; margin-bottom:6px !important;} .ms-std .kf-std-grp > b{grid-column:1 / -1; margin:0 !important;} .ms-std .kf-std-grp > label{width:auto !important; max-width:none !important; margin:0 !important; min-height:30px; padding-top:2px !important; padding-bottom:2px !important; box-sizing:border-box;} td:has(> label > input[name="data13"]) > label, td:has(> label > input[name="data15"]) > label{margin:0 6px 6px 0 !important; padding:3px 14px 3px 12px !important;} td:has(> label > input[name="data13"]) > input[name="data08"]{margin-top:8px;} td:has(> label > input[name="data13"]), td:has(> label > input[name="data15"]){padding-top:8px !important; padding-bottom:4px !important;} /* xb:end */