@charset "utf-8";
/* ============================================================
(주)하람 메인 A안 스킨 (views/layout/layout_index.php 전용)
- 헤더/푸터 공통 스타일은 /css/common_a.css (먼저 로드)
- CMS 출력 마크업(#nav, .top_menu, .mvisual, .recent_notice 등)은
구조 변경 없이 스타일만 입힘
============================================================ */
/* 메인 전용: 헤더를 히어로 위 투명 오버레이로 */
div#wrap div#header { position:absolute; top:0; left:0; width:100%; background:transparent; }
div#wrap div#header div.util-bar { border-bottom:none; }
/* ============================== hero (메인비주얼) ============================== */
div#wrap div.hero { position:relative; height:880px; overflow:hidden; background:url('/images/main/hero_bg.jpg') center 42% / cover no-repeat; }
div#wrap div.hero div.mvisual { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; }
div#wrap div.hero div.mvisual .bx-wrapper { background:transparent; border:none; box-shadow:none; margin:0; }
div#wrap div.hero div.mvisual .bx-viewport { height:880px !important; }
div#wrap div.hero div.mvisual ul { margin:0; padding:0; }
div#wrap div.hero div.mvisual ul li { list-style:none; }
div#wrap div.hero div.mvisual ul li img { width:100%; height:880px; object-fit:cover; margin:0; }
div#wrap div.hero div.hero-veil { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(4,40,22,.46); pointer-events:none; z-index:2; }
div#wrap div.hero div.hero-in { position:absolute; left:50%; transform:translateX(-680px); top:290px; z-index:3; }
div#wrap div.hero .hero-eye { font-size:13px; letter-spacing:.34em; color:var(--ha-lime); font-weight:700; }
div#wrap div.hero .hero-h1 { margin-top:26px; font-size:66px; line-height:1.24; color:#fff; font-weight:200; }
div#wrap div.hero .hero-h1 b { font-weight:800; }
div#wrap div.hero .hero-sub { margin-top:30px; font-size:18px; line-height:1.82; color:rgba(255,255,255,.88); font-weight:400; }
div#wrap div.hero .hero-btns { margin-top:48px; white-space:nowrap; }
div#wrap div.hero .btn-fill { display:inline-block; background:var(--ha-lime); color:#0B2E17; font-size:16px; font-weight:800; padding:19px 44px; border-radius:40px; margin-right:14px; text-decoration:none; }
div#wrap div.hero .btn-line { display:inline-block; border:1.5px solid rgba(255,255,255,.6); color:#fff; font-size:16px; font-weight:600; padding:18px 40px; border-radius:40px; text-decoration:none; }
div#wrap div.hero .btn-fill:hover { background:#a7d42a; }
div#wrap div.hero .btn-line:hover { border-color:#fff; }
/* 슬라이드 컨트롤/페이저 */
div#wrap div.hero div.hero-idx { position:absolute; left:50%; transform:translateX(-680px); bottom:76px; z-index:3; }
div#wrap div.hero .ctrl-prev, div#wrap div.hero .ctrl-next { display:inline-block; width:34px; height:34px; line-height:32px; text-align:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:#fff; font-size:12px; cursor:pointer; margin-right:10px; text-decoration:none; vertical-align:middle; }
div#wrap div.hero .ctrl-prev:hover, div#wrap div.hero .ctrl-next:hover { background:var(--ha-lime); border-color:var(--ha-lime); color:#0B2E17; }
div#wrap div.hero .pg-on { margin-left:22px; font-size:16px; font-weight:800; color:#fff; vertical-align:middle; }
div#wrap div.hero .pg-bar { display:inline-block; width:96px; height:2px; background:rgba(255,255,255,.34); margin:0 14px; vertical-align:middle; }
div#wrap div.hero .pg-off { font-size:16px; color:rgba(255,255,255,.5); vertical-align:middle; }
div#wrap div.hero .pg-txt { margin-left:32px; font-size:14px; color:rgba(255,255,255,.62); letter-spacing:.02em; white-space:nowrap; vertical-align:middle; }
div#wrap div.hero div.hero-scroll { position:absolute; left:50%; bottom:40px; transform:translateX(-50%); font-size:11px; letter-spacing:.3em; color:rgba(255,255,255,.68); z-index:3; }
/* 퀵메뉴 (화면 고정 — 스크롤 추적) */
div#wrap div.quick { position:fixed; right:0; top:50%; transform:translateY(-50%); width:124px; z-index:1300; }
div#wrap div.quick a { display:block; text-decoration:none; }
div#wrap div.quick a.q-i { background:rgba(4,40,22,.72); border-bottom:1px solid rgba(255,255,255,.22); color:#fff; font-size:14px; font-weight:800; text-align:center; padding:19px 0 16px; letter-spacing:.04em; line-height:1.5; }
div#wrap div.quick a.q-i span { display:block; font-size:10.5px; font-weight:400; color:rgba(255,255,255,.72); letter-spacing:0; }
div#wrap div.quick a.q-i:hover, div#wrap div.quick a.q-on { background:var(--ha-lime); border-color:var(--ha-lime); color:#0B2E17; }
div#wrap div.quick a.q-i:hover span, div#wrap div.quick a.q-on span { color:rgba(11,46,23,.75); }
div#wrap div.quick a.q-top { background:var(--ha-green-deep); color:#fff; text-align:center; font-size:12px; font-weight:800; padding:14px 0; letter-spacing:.12em; }
/* ============================== about ============================== */
div.sec-about { padding-bottom:96px; }
div.sec-about .ab-r { display:flex; align-items:flex-start; }
div.sec-about .ab-l { width:640px; padding-top:16px; }
div.sec-about .ab-body { margin-top:34px; font-size:16.5px; line-height:2.0; color:var(--ha-gray); }
div.sec-about .ab-body2 { margin-top:20px; font-size:16.5px; line-height:2.0; color:var(--ha-gray); }
div.sec-about .ab-body2 b { color:var(--ha-green); font-weight:800; }
div.sec-about .ab-p { width:640px; margin-left:80px; position:relative; }
div.sec-about .ab-img { height:430px; background:url('/images/main/about.jpg') center / cover no-repeat; }
div.sec-about .ab-badge { position:absolute; left:-46px; bottom:-38px; background:var(--ha-green); color:#fff; padding:26px 30px; font-size:13px; line-height:1.6; letter-spacing:.14em; white-space:nowrap; }
div.sec-about .ab-badge b { font-size:22px; font-weight:800; letter-spacing:.06em; }
div.sec-about .st-r { display:flex; margin-top:104px; border-top:1px solid var(--ha-line); padding-top:52px; }
div.sec-about .st-c { width:340px; }
div.sec-about .st-n { font-size:52px; font-weight:800; color:var(--ha-green); line-height:1; white-space:nowrap; }
div.sec-about .st-n em { font-style:normal; font-size:22px; font-weight:700; margin-left:6px; color:var(--ha-lime); }
div.sec-about .st-l { margin-top:14px; font-size:15px; color:var(--ha-gray); white-space:nowrap; }
/* ============================== business (이미지 카드) ============================== */
div.sec-bz { background:var(--ha-bg-soft); }
div.sec-bz .bz-r { display:flex; margin-top:64px; }
div.sec-bz .bz-c { width:319px; background:#fff; margin-right:28px; border-top:3px solid var(--ha-lime); overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; }
div.sec-bz .bz-c:last-child { margin-right:0; }
div.sec-bz .bz-c:hover { box-shadow:0 18px 36px rgba(4,40,22,.14); transform:translateY(-4px); }
div.sec-bz .bz-img { position:relative; height:200px; background-size:cover; background-position:center; }
div.sec-bz .bz-img:after { content:''; position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(to top, rgba(4,40,22,.55), transparent); }
div.sec-bz .bz-n { position:absolute; left:24px; bottom:16px; z-index:1; font-size:14px; font-weight:800; letter-spacing:.2em; color:var(--ha-lime); }
div.sec-bz .bz-tx { padding:30px 32px 40px; }
div.sec-bz .bz-t { font-size:24px; font-weight:800; white-space:nowrap; }
div.sec-bz .bz-d { margin-top:14px; font-size:14.5px; line-height:1.86; color:var(--ha-gray); }
/* ============================== products (큰/작은 카드 교차 슬라이더) ============================== */
div.sec-pd { overflow:hidden; height:1140px; } /*제품 이미지 짝수,홀수 이미지크기가 달라서 슬라이드 넘어갈때마다 화면이 덜그럭거림. 해당 div 높이 고정시킴 260904 재철*/
div.sec-pd .pd-hd { margin-bottom:64px; }
div.sec-pd .pd-slider-wrap { width:100%; }
div.sec-pd .pd-slider .slick-track { display:flex; align-items:center; }
div.sec-pd .pd-slide { padding:0 26px; }
div.sec-pd .pd-slide a { display:flex; align-items:flex-start; justify-content:center; text-decoration:none; }
div.sec-pd .pd-simg { display:block; background-size:cover; background-position:center; background-color:var(--ha-bg-soft); transition:filter .3s ease, height .5s ease, width .5s ease; }
/* 슬롯 위치별 크기 (JS가 sz-big/sz-small 부여): 중앙·양끝(1·3·5번째)=작게, 중앙 양옆(2·4번째)=크게 */
div.sec-pd .pd-slide .pd-simg, div.sec-pd .sz-small .pd-simg { width:calc(82% - 34px); height:400px; }
div.sec-pd .sz-big .pd-simg { width:calc(100% - 34px); height:560px; }
div.sec-pd .pd-slide a:hover .pd-simg { filter:brightness(1.06); }
div.sec-pd .pd-slider .slick-slide { cursor:grab; }
div.sec-pd .pd-slider .slick-slide:active { cursor:grabbing; }
/* 세로 캡션 (이미지 우측) */
div.sec-pd .pd-scap { display:block; writing-mode:vertical-rl; margin:6px 0 0 14px; white-space:nowrap; }
div.sec-pd .pd-scap:before { content:'\25A0'; font-size:9px; color:var(--ha-lime); margin-bottom:10px; }
div.sec-pd .pd-scap em { display:block; font-style:normal; font-size:11.5px; letter-spacing:.18em; color:var(--ha-lime); font-weight:700; }
div.sec-pd .pd-scap strong { /*display:block;*/ font-size:15.5px; font-weight:800; color:var(--ha-ink); letter-spacing:.04em; }
div.sec-pd .pd-slide a:hover .pd-scap strong { color:var(--ha-green); }
/* 하단: 화살표 + 전체보기 */
div.sec-pd .pd-foot { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:70px; }
div.sec-pd .pd-arrow { display:inline-block; width:44px; height:44px; line-height:42px; text-align:center; border:1px solid var(--ha-line); border-radius:50%; color:var(--ha-gray); font-size:13px; text-decoration:none; }
div.sec-pd .pd-arrow:hover { background:var(--ha-green); border-color:var(--ha-green); color:#fff; }
div.sec-pd .pd-all { font-size:15px; font-weight:700; color:var(--ha-green); border:1px solid var(--ha-line); padding:15px 34px; border-radius:40px; text-decoration:none; white-space:nowrap; }
div.sec-pd .pd-all:hover { background:var(--ha-green); color:#fff; border-color:var(--ha-green); }
/* ============================== finder ============================== */
/* 메인에서 가장 넓은 단색 면. 딥그린 계열이 연달아 나오면 화면이 무거워져 중간톤으로 한 단계 밝힘
(흰 글자 대비 5.0:1 로 가독성은 유지) */
div.sec-fd { background:var(--ha-green-mid); padding:86px 0; }
div.sec-fd .fd-r { display:flex; align-items:center; }
div.sec-fd .fd-l { width:640px; }
div.sec-fd .fd-d { margin-top:20px; font-size:16px; color:rgba(255,255,255,.72); }
div.sec-fd .fd-f { margin-left:60px; padding-top:8px; white-space:nowrap; }
div.sec-fd select.fd-p { display:inline-block; width:194px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30); color:rgba(255,255,255,.86); font-size:15px; padding:18px 22px; margin-right:10px; border-radius:4px; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2396C11F'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
div.sec-fd select.fd-p:focus { outline:none; border-color:var(--ha-lime); }
div.sec-fd select.fd-p option { color:var(--ha-ink); background:#fff; }
div.sec-fd .fd-btn { display:inline-block; background:var(--ha-lime); color:#0B2E17; font-size:15px; font-weight:800; padding:20px 34px; border-radius:4px; text-decoration:none; }
div.sec-fd .fd-btn:hover { background:#a7d42a; }
/* 파인더 검색 결과 (같은 화면 표시) */
div.sec-fd .fd-result { margin-top:52px; border-top:1px solid rgba(255,255,255,.2); padding-top:32px; }
div.sec-fd .fd-rh { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
div.sec-fd .fd-rh span { font-size:16px; color:rgba(255,255,255,.85); }
div.sec-fd .fd-rh span i { color:var(--ha-lime); margin-right:6px; }
div.sec-fd .fd-rh b { color:#fff; font-weight:800; }
div.sec-fd .fd-rmore { font-size:13px; font-weight:700; color:var(--ha-lime); text-decoration:none; border-bottom:1px solid rgba(150,193,31,.5); padding-bottom:3px; }
div.sec-fd .fd-rmore:hover { border-color:var(--ha-lime); }
div.sec-fd .fd-cards { display:flex; flex-wrap:wrap; gap:16px; }
div.sec-fd .fd-card { width:calc(25% - 12px); background:#fff; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
div.sec-fd .fd-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
div.sec-fd .fd-cimg { display:block; height:130px; background-size:cover; background-position:center; background-color:var(--ha-bg-soft); }
div.sec-fd .fd-cimg.noimg { position:relative; }
div.sec-fd .fd-cimg.noimg:before { content:'NO IMAGE'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:11px; letter-spacing:.2em; color:#b7c2ba; font-weight:700; }
div.sec-fd .fd-ctx { display:block; padding:13px 16px 15px; }
div.sec-fd .fd-ctx em { font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--ha-lime); }
div.sec-fd .fd-ctx strong { display:block; margin-top:5px; font-size:14px; font-weight:800; color:var(--ha-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.sec-fd .fd-card:hover .fd-ctx strong { color:var(--ha-green); }
div.sec-fd .fd-none { text-align:center; padding:40px 20px; background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.25); }
div.sec-fd .fd-none p { margin:0 0 8px; font-size:14px; color:rgba(255,255,255,.7); }
div.sec-fd .fd-none p strong { font-size:16px; color:#fff; }
div.sec-fd .fd-none-btn { display:inline-block; margin-top:14px; background:var(--ha-lime); color:#0B2E17; font-size:14px; font-weight:800; padding:13px 32px; border-radius:40px; text-decoration:none; }
div.sec-fd .fd-none-btn:hover { background:#a7d42a; }
/* ============================== R&D ============================== */
div.sec-rd { position:relative; padding:132px 0; }
div.sec-rd .rd-bg { position:absolute; top:0; left:0; right:0; bottom:0; background:url('/images/main/rnd_bg.jpg') center 36% / cover no-repeat; }
div.sec-rd .rd-veil { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(4,40,22,.62); }
div.sec-rd .rd-r { position:relative; display:flex; align-items:flex-start; }
div.sec-rd .rd-l { width:660px; }
div.sec-rd .rd-d { margin-top:28px; font-size:16.5px; line-height:1.94; color:rgba(255,255,255,.78); }
/* 연구 수행 분야: 클릭 가능한 태그(알약형 버튼)가 아니라 정보 나열용 목록 — 2열 그리드 + 라임 점 + 얇은 구분선 */
div.sec-rd .rd-ks { margin-top:34px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; border-top:1px solid rgba(255,255,255,.22); }
div.sec-rd .rd-k { display:flex; align-items:center; gap:10px; padding:13px 2px; font-size:15px; color:rgba(255,255,255,.9); border-bottom:1px solid rgba(255,255,255,.14); cursor:default; }
div.sec-rd .rd-k:before { content:''; flex:none; width:5px; height:5px; border-radius:50%; background:var(--ha-lime); }
div.sec-rd .rd-g { margin-left:80px; width:620px; display:flex; flex-wrap:wrap; }
/*div.sec-rd .rd-t { width:300px; height:196px; margin:0 20px 20px 0; background-size:cover; background-position:center; }
div.sec-rd .rd-t:nth-child(2n) { margin-right:0; }*/
div.sec-rd .rd-t { width:100%; height:412px; margin:0; background-size:cover; background-position:center; }
/* ============================== news (CMS 게시판 최근글) ============================== */
div#wrap div#container { width:auto; margin:0; }
/* 하람소식 (recent_notice = CMS 게시판1) — 게시판 목록(gallery_haram)과 동일한 카드형 */
div#wrap div#container div.recent_notice { position:static; float:none; width:100%; margin:0; }
div#wrap div#container div.recent_notice .nw-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--ha-ink); padding-bottom:20px; margin-bottom:28px; }
div#wrap div#container div.recent_notice .nw-hd h4 { margin:0; padding:0; font-size:26px; font-weight:800; }
div#wrap div#container div.recent_notice .nw-hd h4 a { color:var(--ha-ink); text-decoration:none; }
div#wrap div#container div.recent_notice .nw-hd p { position:static; margin:0; }
div#wrap div#container div.recent_notice .nw-hd p a { font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--ha-gray); text-decoration:none; }
div#wrap div#container .nws-grid { display:flex; flex-wrap:wrap; gap:24px; }
div#wrap div#container .nws-card { width:calc(25% - 18px); border:1px solid var(--ha-line); background:#fff; transition:box-shadow .25s ease, transform .25s ease; }
div#wrap div#container .nws-card:hover { box-shadow:0 16px 32px rgba(4,40,22,.12); transform:translateY(-3px); }
div#wrap div#container .nws-card > a { display:flex; flex-direction:column; height:100%; text-decoration:none; }
div#wrap div#container .nws-head { display:block; padding:18px 20px 14px; border-bottom:1px solid var(--ha-line); }
div#wrap div#container .nws-head strong { font-size:15.5px; font-weight:700; color:var(--ha-ink); line-height:1.5; }
div#wrap div#container .nws-card:hover .nws-head strong { color:var(--ha-green); }
div#wrap div#container .nws-head img { vertical-align:middle; margin-left:4px; width:auto; }
div#wrap div#container .nws-cmt { font-size:12.5px; font-weight:800; color:var(--ha-green); margin-left:4px; }
div#wrap div#container .nws-media { display:block; height:190px; overflow:hidden; background:var(--ha-bg-soft); }
div#wrap div#container .nws-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; margin:0; }
div#wrap div#container .nws-card:hover .nws-media img { transform:scale(1.05); }
div#wrap div#container .nws-media { position:relative; }
div#wrap div#container .nws-media.vid:after { content:''; position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:rgba(0,0,0,.55) url('data:image/svg+xml;utf8,') center / 22px no-repeat; transition:background-color .25s ease; }
div#wrap div#container .nws-card:hover .nws-media.vid:after { background-color:rgba(7,102,51,.8); }
div#wrap div#container .nws-excerpt { display:block; height:190px; overflow:hidden; padding:18px 20px; font-size:13.5px; line-height:1.85; color:var(--ha-gray); background:linear-gradient(180deg, #fff 55%, var(--ha-bg-soft) 100%); word-break:break-all; }
div#wrap div#container .nws-excerpt em { font-style:normal; color:#b7c2ba; }
div#wrap div#container .nws-meta { display:flex; justify-content:space-between; margin-top:auto; padding:12px 20px 16px; font-size:12.5px; color:#9aa69f; border-top:1px solid var(--ha-line); }
div#wrap div#container .nws-read i { font-size:11px; }
/* 제품 슬라이더 이미지 없음 표시 */
div.sec-pd .pd-simg.noimg { display:flex; align-items:center; justify-content:center; }
div.sec-pd .pd-simg.noimg:before { content:'NO IMAGE'; font-size:12px; letter-spacing:.2em; color:#b7c2ba; font-weight:700; }
/* 인증 현황 */
div.ct-r { margin-top:76px; border-top:1px solid var(--ha-line); padding-top:34px; }
div.ct-r .ct-l { font-size:14px; font-weight:800; color:var(--ha-ink); margin-right:28px; white-space:nowrap; }
div.ct-r .ct-i { display:inline-block; font-size:13.5px; color:var(--ha-gray); border:1px solid var(--ha-line); padding:10px 20px; border-radius:30px; margin:0 8px 8px 0; white-space:nowrap; }
/* 인증서 게시판 연동형 */
div.ct-r .ct-hd { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }
div.ct-r .ct-more { font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--ha-gray); text-decoration:none; }
div.ct-r .ct-more:hover { color:var(--ha-green); }
div.ct-r .ct-g { display:flex; flex-wrap:wrap; gap:14px; }
/* 인증서명 텍스트 뱃지 (이미지·클릭 없음 — 2026-09-15) */
div.ct-r .ct-c.txt { display:flex; align-items:center; gap:10px; width:calc(33.333% - 10px); box-sizing:border-box; padding:13px 22px 13px 16px; border:1px solid var(--ha-line); background:#fff; cursor:default; }
div.ct-r .ct-c.txt .ct-ico { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ha-bg-soft); color:var(--ha-green); font-size:13px; }
div.ct-r .ct-c.txt p { margin:0; font-size:14px; font-weight:600; color:var(--ha-ink); line-height:1.5; word-break:keep-all; } /*긴 인증서명은 말줄임 대신 두 줄로 (같은 행 카드는 flex 가 높이를 맞춰준다)*/
/* ============================== partners ============================== */
div.sec-pt { background:var(--ha-bg-soft); padding-bottom:112px; }
div.sec-pt .pt-hd { text-align:center; margin-bottom:52px; }
div.sec-pt .pt-hd .ha-h2 { font-size:38px; }
div.sec-pt .pt-r { display:flex; flex-wrap:wrap; border-top:1px solid #DDE4DA; border-left:1px solid #DDE4DA; }
div.sec-pt .pt-c { display:flex; align-items:center; justify-content:center; width:20%; height:104px; padding:18px 22px; text-align:center; background:#fff; border-right:1px solid #DDE4DA; border-bottom:1px solid #DDE4DA; font-size:15px; font-weight:700; color:#7A8880; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-decoration:none; }
div.sec-pt .pt-c img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .25s ease, opacity .25s ease; }
div.sec-pt .pt-c:hover img { filter:none; opacity:1; }
div.sec-pt a.pt-c:hover { color:var(--ha-green); }
div.sec-pt .pt-more { margin-top:28px; text-align:center; }
div.sec-pt .pt-more a { display:inline-block; font-size:14px; font-weight:700; color:var(--ha-green); border:1px solid var(--ha-line); padding:12px 32px; border-radius:30px; text-decoration:none; background:#fff; }
div.sec-pt .pt-more a:hover { background:var(--ha-green); color:#fff; border-color:var(--ha-green); }
/* ---------- 브랜드 필름 (기업홍보영상, 2026-11-03) ----------
lite embed — 클릭 전엔 유튜브 썸네일만. .bf-v 안의 img 가 클릭 시 iframe 으로 교체된다.
배경: 영상에 레터박스(상하 검은 띠)가 있어 다크 톤으로 — 라벨은 common_a 의
어두운 배경 목록(div#wrap div.sec-bf .ha-eye → --ha-lime)에 등록돼 있다 */
div.sec-bf { background:var(--ha-green-dark); padding:88px 0 96px; }
div.sec-bf .ha-eye { margin-bottom:30px; }
div.sec-bf .bf-v { position:relative; max-width:960px; margin:0 auto; aspect-ratio:16/9; border-radius:18px; overflow:hidden; cursor:pointer; background:#0B1710; box-shadow:0 34px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
div.sec-bf .bf-v img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
div.sec-bf .bf-v:hover img { transform:scale(1.03); }
div.sec-bf .bf-v iframe { position:absolute; left:0; top:0; width:100%; height:100%; border:0; }
/* 재생 버튼 — 게시판 유튜브 썸네일(.nws-media.vid)과 같은 문법, 크기만 섹션 규모에 맞춤 */
div.sec-bf .bf-play { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:rgba(0,0,0,.55) url('data:image/svg+xml;utf8,') center / 32px no-repeat; transition:background-color .25s ease, transform .25s ease; }
div.sec-bf .bf-v:hover .bf-play { background-color:rgba(7,102,51,.85); transform:scale(1.07); }
div.sec-bf .bf-v[data-on] .bf-play { display:none; }
/* ============================== responsive ============================== */
@media screen and (max-width:1440px) {
div#wrap div.hero div.hero-in,
div#wrap div.hero div.hero-idx { left:3%; transform:none; }
div.sec-about .ab-r, div.sec-rd .rd-r { flex-wrap:wrap; }
div.sec-about .ab-l, div.sec-rd .rd-l { width:100%; }
div.sec-about .ab-p { margin:64px 0 38px; width:100%; }
div.sec-about .ab-badge { left:0; }
div.sec-about .st-r { flex-wrap:wrap; }
div.sec-about .st-c { width:50%; margin-bottom:30px; }
div.sec-rd .rd-g { margin:48px 0 0; width:100%; }
div.sec-fd .fd-r { flex-wrap:wrap; }
div.sec-fd .fd-f { margin:36px 0 0; white-space:normal; }
div.sec-fd select.fd-p { margin-bottom:10px; }
div.sec-fd .fd-card { width:calc(50% - 8px); }
div#wrap div#container .nws-card { width:calc(50% - 12px); }
}
@media screen and (max-width:1024px) {
div#wrap div#header { position:relative; }
div#wrap div.hero { height:640px; }
div#wrap div.hero div.mvisual .bx-viewport { height:640px !important; }
div#wrap div.hero div.mvisual ul li img { height:640px; }
div#wrap div.hero div.hero-in { top:150px; }
div#wrap div.hero .hero-h1 { font-size:48px; }
div#wrap div.quick { display:none; }
div.sec-bz .bz-r { flex-wrap:wrap; }
div.sec-bz .bz-c { width:48.5%; margin:0 3% 24px 0; }
div.sec-bz .bz-c:nth-child(2n) { margin-right:0; }
div.sec-pd { height:880px; } /*이미지 축소분만큼 고정 높이도 축소 (덜그럭 방지용 고정은 유지)*/
div.sec-pd .pd-slide { padding:0 16px; }
div.sec-pd .pd-slide .pd-simg, div.sec-pd .sz-small .pd-simg { height:310px; }
div.sec-pd .sz-big .pd-simg { height:430px; }
div.sec-rd .rd-t { width:48.5%; margin-right:3%; height:160px; }
div.sec-rd .rd-t:nth-child(2n) { margin-right:0; }
div.sec-pt .pt-c { width:25%; }
div.ct-r .ct-c.txt { width:calc(50% - 7px); }
}
@media screen and (max-width:640px) {
div#wrap div.hero { height:540px; }
/* hero/section 전용 조정 (헤더·푸터 공통 조정은 common_a.css) */
div#wrap div.hero div.mvisual .bx-viewport { height:540px !important; }
div.sec-bf { padding:54px 0 62px; }
div.sec-bf .ha-eye { margin-bottom:20px; }
div.sec-bf .bf-v { border-radius:12px; }
div.sec-bf .bf-play { width:56px; height:56px; margin:-28px 0 0 -28px; background-size:24px; }
div#wrap div.hero div.mvisual ul li img { height:540px; }
/* 문구가 우측 끝에 붙고, 버튼이 있는 슬라이드는 하단 페이저(01 ─ 03)와 겹쳐서 여백·크기를 한 단계 줄인다 */
div#wrap div.hero div.hero-in { top:96px; left:20px; right:20px; }
div#wrap div.hero .hero-h1 { margin-top:16px; font-size:30px; }
div#wrap div.hero .hero-sub { margin-top:18px; font-size:14px; line-height:1.7; }
div#wrap div.hero .hero-btns { margin-top:26px; }
div#wrap div.hero div.hero-idx { left:20px; }
div#wrap div.hero .hero-sub br { display:none; }
div#wrap div.hero .btn-fill, div#wrap div.hero .btn-line { padding:14px 28px; font-size:14px; }
div#wrap div.hero div.hero-idx { bottom:40px; }
div#wrap div.hero div.hero-scroll { display:none; }
div.sec-about .st-c { width:100%; }
div.sec-bz .bz-c { width:100%; margin-right:0; }
div.sec-pd { height:830px; }
div.sec-pd .pd-slide { padding:0 10px; }
div.sec-pd .pd-slide .pd-simg, div.sec-pd .sz-small .pd-simg { height:235px; }
div.sec-pd .sz-big .pd-simg { height:300px; }
div.sec-pd .pd-scap strong { font-size:13.5px; }
div.sec-pd .pd-foot { margin-top:44px; }
div.sec-fd select.fd-p { width:100%; margin-right:0; }
div.sec-fd .fd-card { width:100%; }
div.sec-rd .rd-t { width:100%; margin-right:0 !important; }
div.sec-rd .rd-ks { grid-template-columns:1fr; }
div.sec-pt .pt-c { width:50%; }
div#wrap div#container .nws-card { width:100%; }
div#wrap div#container .nws-media, div#wrap div#container .nws-excerpt { height:170px; }
div.ct-r .ct-g { gap:10px; }
div.ct-r .ct-c.txt { width:100%; padding:12px 16px; }
div.ct-r .ct-c.txt p { white-space:normal; word-break:keep-all; }
}
/* ============================== 2026-09-11 레퍼런스(현대바이오랜드) 채택분 — 메인 ==============================
고객이 미리보기(?rp=1)에서 고른 5개: A2 히어로 · A4 흰 헤더 · A5 각진 버튼 · B7 제품 카드 라벨 · B8 섹션 표시
여기엔 메인 전용(A2·A5 메인 버튼·B7)만. A4·B8 은 motion_a.css/js, A5 서브페이지 버튼은 common_a.css */
/* A2 히어로 밝게: 짙은 초록 막 → 글자가 있는 왼쪽만 어두운 무채색 그라데이션(사진은 밝게) */
div#wrap div.hero div.hero-veil { background:linear-gradient(90deg, rgba(12,18,14,.58) 0%, rgba(12,18,14,.30) 42%, rgba(12,18,14,.04) 100%); }
/* 설명문 최대 2줄 — 넘치면 말줄임(…)이 생기므로 관리자 메인비주얼 문구를 2줄 이내로 유지할 것 */
div#wrap div.hero > .hero-in .hero-sub { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:640px; }
div#wrap div.hero > .hero-in .hero-sub br { display:none; }
/* A5 각진 버튼 (메인) — 알약형 → 사각형, 히어로 버튼엔 화살표 */
div#wrap div.hero .btn-fill, div#wrap div.hero .btn-line,
div.sec-pd .pd-all, div.sec-pt .pt-more a, div.sec-fd .fd-btn, div.sec-fd .fd-none-btn { border-radius:0; }
div#wrap div.hero .btn-fill:after, div#wrap div.hero .btn-line:after { content:' \2192'; }
/* B7 제품 카드 라벨 — 세로 캡션 → 이미지 왼쪽 위 흰 제품명.
이미지는 슬라이드 안에서 가운데 정렬이라 좌측 여백 = (100% - 이미지폭)/2 = 9% + 17px(작은 칸) / 17px(큰 칸) */
div.sec-pd { background:#F3F4F2; }
div.sec-pd .pd-slide a { position:relative; }
div.sec-pd .pd-scap { position:absolute; top:24px; left:calc(9% + 39px); z-index:1; margin:0; writing-mode:horizontal-tb; white-space:normal; max-width:62%; }
div.sec-pd .sz-big .pd-scap { left:39px; }
div.sec-pd .pd-scap:before { display:none; }
div.sec-pd .pd-scap strong,
div.sec-pd .pd-slide a:hover .pd-scap strong { color:#fff; font-size:19px; font-weight:700; letter-spacing:-.01em; text-shadow:0 1px 10px rgba(0,0,0,.28); }
div.sec-pd .pd-simg { box-shadow:inset 0 120px 80px -60px rgba(0,0,0,.5); } /* 밝은 사진에서도 흰 글자가 읽히도록 윗부분만 어둡게 */
@media screen and (max-width:640px) {
div.sec-pd .pd-scap { top:16px; left:calc(9% + 31px); }
div.sec-pd .sz-big .pd-scap { left:31px; }
div.sec-pd .pd-scap strong, div.sec-pd .pd-slide a:hover .pd-scap strong { font-size:15.5px; }
}