/* Theme Name: Enfold Child Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then. Version: 1.0 Author: Kriesi Author URI: http://www.kriesi.at Template: enfold */ /*Add your own styles here:*/ @font-face { font-family: "Noto Sans JP","Noto Sans KR","Hiragino Sans","Apple SD Gothic Neo",sans-serif;} .html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a { text-align: center; font-size: 12px;} .sehin-ttl {overflow: visible; width: 100%; padding: 0; margin-bottom: 20px; border-bottom: 2px solid #017DBD!important;} #contact-block .contact-inner{ background-color:#f6f6f6;} #footer { padding: 15px 0 0;} #footer .widget {margin:0;} #socket .copyright {float: none;text-align: center;display: block;} #socket .container { padding-top: 0; padding-bottom: 20px;} h3.av-magazine-title.entry-title { font-size: 16px!important; font-weight: 500;} .big-preview.single-big { display: none;} h3.av-masonry-entry-title.entry-title { font-size: 18px!important; text-align: center!important;} .av-special-heading { margin-top: 20px;} span.av-masonry-date.meta-color.updated { display: none;} .js_active .av-elegant-toggle .toggler { padding: 20px;} /* Only Pc,Tablet Br */ #top br.br-pc { display: block;} /* Mobile (767px↓) Hidden */ @media (max-width: 767px) { #top br.br-pc { display: none;} } .desc-title {font-weight: bold; color: #33405a; font-size: 18px; border-left: 4px solid #0060B0!important; padding-left: 10px; margin-bottom: 10px;} .section-title {font-weight: bold; color: #333; font-size: 20px; border-left: 6px solid #0060B0!important; padding-left: 10px; margin-bottom: 10px;} /* small-img" Force Image Extensions */ #top .small-img .avia-image-container-inner, #top .small-img .avia-image-container { width: 100% !important;} #top .small-img img { width: 100% !important; height: auto !important; max-width: 100% !important object-fit: contain;} /*============ リーガルテック Mini Button =======================*/ #top #fss-mini{max-width:1400px;margin:0 auto;padding:10px 0;} #top #fss-mini .btn-wrap{ display:flex; flex-wrap:wrap; gap:10px;} /* 작은 버튼 */ #top #fss-mini .fss-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; min-height:36px; border:1px solid #d7dfec; border-radius:999px; background:#fff; color:#2f6bb8; font-size:14px; line-height:1; font-weight:600; text-decoration:none; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;max-width:100% } /* Icon */ #top #fss-mini .fss-btn::after{ content:"›"; margin-left:8px; font-size:16px; line-height:1;} /* Hover/Focus */ #top #fss-mini .fss-btn:hover, #top #fss-mini .fss-btn:focus-visible{ border-color:#2f6bb8; background:#f4f8ff; transform:translateY(-1px); outline:none;} #top #fss-mini .cols{display:grid; gap:12px} /* ===== Responsive ===== */ @media (min-width:768px){ #top #fss-mini .cols{grid-template-columns:1fr 1fr} } /**============================================= HOME CSS START ========================================**/ /* HOME FULLWIDTH BNR BTN */ #forensic-link-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 10px 16px; font-family: inherit; line-height: 1.4; } #forensic-link-row a { display: inline-block; font-size: 15px; color: #222; text-decoration: none; border-bottom: 1px solid #222; padding-bottom: 2px; white-space: nowrap; } /* ===== Responsive ===== */ @media (max-width: 480px) { #forensic-link-row { gap: 1rem 1.5rem; } #forensic-link-row a {font-size: 14px;} } /* ============== フォレンジックサービスのタイプ ============== */ /* Total Wrapper */ #top #forensic-type-block { max-width: 1400px; margin: 0 auto; padding: 20px 5px 40px;} /* Section Title */ #top #forensic-type-block .ft-section-title {text-align: center; font-weight: 600; margin: 0 0 20px;} /* Grid: PC 4 columns */ #top #forensic-type-block .ft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #f4faf8; } /* Link the entire card */ #top #forensic-type-block .ft-item { padding: 30px 10px 32px; border-left: 1px solid #e3ecec; border-top: 1px solid #e3ecec; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-decoration: none; box-sizing: border-box; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out; } /* First Column, First Row Border Cleanup */ #top #forensic-type-block .ft-item:nth-child(4n+1) { border-left: none;} #top #forensic-type-block .ft-item:nth-child(-n+4) {border-top: none;} /* Icon */ #top #forensic-type-block .ft-icon img { width: 70px; height: auto; display: block;} /* Label */ #top #forensic-type-block .ft-label { font-size: 14px; line-height: 1.6; color: #333; text-align: center; white-space: nowrap; } /* Hover Effect */ #top #forensic-type-block .ft-item:hover { background: #edf6f8; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.04); } /* ===== Responsive ===== */ /* Tablet: 2컬럼 */ @media (max-width: 1024px) { #top #forensic-type-block .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4n 규칙 대신 2컬럼 기준으로 보더 리셋 */ #top #forensic-type-block .ft-item { border-left: 1px solid #e3ecec; border-top: 1px solid #e3ecec!important;} #top #forensic-type-block .ft-item:nth-child(2n+1) { border-left: none; } #top #forensic-type-block .ft-item:nth-child(-n+2) { border-top: none;} } /* Mobile: 1컬럼 */ @media (max-width: 767px) { #top #forensic-type-block { padding: 20px 15px 35px;} #top #forensic-type-block .ft-grid { grid-template-columns: 1fr; } #top #forensic-type-block .ft-item { border-left: none; border-top: 1px solid #e3ecec; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; } #top #forensic-type-block .ft-item:first-child { border-top: none;} #top #forensic-type-block .ft-icon img {width: 54px;} #top #forensic-type-block .ft-label { text-align: left; white-space: normal;} } /* ============== お客様別フォレンジック調査 ============== */ /* Total Wrapper */ #top #customer-type-block { max-width: 1400px; margin: 0 auto; padding: 10px 5px;} #top #customer-type-block h3.ctb-title {text-align: center !important; margin: 0 0 30px !important; font-weight: 700;} /* Grid: PC 3 columns */ #top #customer-type-block .ctb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* Card (Full link) */ #top #customer-type-block .ctb-card { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 40px 20px; border: 1px solid #037cbd; border-radius: 6px; background: #fff; text-decoration: none; box-sizing: border-box; transition: background 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out; overflow: hidden; } /* Text */ #top #customer-type-block .ctb-label { font-weight: 600;line-height: 1.5; color: #222; padding-right: 20px; white-space: nowrap; } /* Right arrow */  #top #customer-type-block .ctb-card::after { content: "＞"; position: absolute; right: 14px; font-size: 14px; color: #037cbd; } /* Hover */ #top #customer-type-block .ctb-card:hover { background: #037cbd; border-color: #037cbd; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transform: translateY(-1px);} #top #customer-type-block .ctb-card:hover .ctb-label {color: #fff; } #top #customer-type-block .ctb-card:hover::after { color: #fff; } /* ===== Responsive ===== */ /* Tablet: 2컬럼 */ @media (max-width: 1024px) { #top #customer-type-block .ctb-grid { grid-template-columns: repeat(2, minmax(0, 1fr));} #top #customer-type-block .ctb-card { padding: 16px 32px 18px;} #top #customer-type-block .ctb-label { font-size: 15px; white-space: normal; text-align: center;} } /* Mobile: 1컬럼 */ @media (max-width: 767px) { #top #customer-type-block { padding: 20px 15px 30px;} #top #customer-type-block .ctb-grid { grid-template-columns: 1fr;} #top #customer-type-block .ctb-card { padding: 14px 28px 16px;} } /* ============== フォレンジック調査実績 & ツール導入実績 ============== */ /* Total Wrapper */ #top #forensic-case-block { max-width: 1400px; margin: 0 auto; padding: 40px 5px;} /* 2 Column Grid */ #top #forensic-case-block .fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } /* Card */ #top #forensic-case-block .fc-card { border: 1px solid #d7e4eb; border-radius: 8px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease-out, transform .15s ease-out;} #top #forensic-case-block .fc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.06);} /* Image */ #top #forensic-case-block .fc-img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover;} /* Inner Padding */ #top #forensic-case-block .fc-body { padding: 20px 22px 26px; } /* Title */ #top #forensic-case-block .fc-title { font-weight: 600; margin: 0 0 16px; } /* List */ #top #forensic-case-block .fc-list { margin: 0 0 22px; padding: 0; list-style: none; } #top #forensic-case-block .fc-list li { margin: 0 0 8px; padding-left: 16px; position: relative; font-size: 14px; line-height: 1.6; } #top #forensic-case-block .fc-list li::before { content: "›"; position: absolute; left: 0; color: #037cbd; } /* ===== Responsive ===== */ /* Mobile */ @media (max-width: 767px) { #top #forensic-case-block {padding: 30px 15px;} #top #forensic-case-block .fc-grid { grid-template-columns: 1fr;} } /* ===== リーガルテック書籍 (Compact 6/3/3 Grid) ===== */ #top #legal-books-block { max-width: 1400px; margin: 5px auto 0; padding: 5px 5px 30px; background: #e6f3fa;} /* Section Title */ #top #legal-books-block .lb-heading { text-align: center; margin: 0 0 6px;} #top #legal-books-block .lb-sub { text-align: center; margin: 0 0 16px;} /* Grid layout PC: 6 columns */ #top #legal-books-block .lb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;} /* Link the entire card */ #top #legal-books-block .lb-card { display: flex; flex-direction: column; align-items: center; padding: 10px 6px 12px; border-radius: 8px; background: #fff; text-decoration: none; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,0.04); transition: transform .15s ease-out, box-shadow .15s ease-out; } #top #legal-books-block .lb-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.08);} /* Book Cover */ #top #legal-books-block .lb-cover { width: 100%; max-width: 110px; height: auto; display: block; margin-bottom: 8px;} /* Tilte / Meta Text */ #top #legal-books-block .lb-title { font-size: 12px; font-weight: 600; line-height: 1.5; color: #333; text-align: center; margin: 10px 6px 4px; word-break: keep-all; overflow-wrap: anywhere; min-height: 40px; } #top #legal-books-block .lb-meta { font-size: 11px; line-height: 1.5; color: #666; text-align: center; margin-bottom: 4px;} /* “Amazonで見る” */ #top #legal-books-block .lb-cta { margin-top: auto; font-size: 11px; color: #037cbd; display: inline-flex; align-items: center; gap: 4px;} /* ===== Responsive ===== */ /* Tablet: 3컬럼 */ @media (max-width: 1024px) { #top #legal-books-block .lb-grid {grid-template-columns: repeat(3, minmax(0, 1fr));} #top #legal-books-block .lb-title { font-size: 11px; margin: 8px 4px 4px; min-height: 24px; } } @media (max-width: 799px) { #top #legal-books-block .lb-title { min-height: 34px; } } /* Mobile: 3컬럼 유지, 패딩만 조정 */ @media (max-width: 767px) { #top #legal-books-block { padding: 16px 10px 20px; } #top #legal-books-block .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;} #top #legal-books-block .lb-card { padding: 8px 4px 10px;} #top #legal-books-block .lb-cover { max-width: 90px; margin-bottom: 6px;} #top #legal-books-block .lb-title { margin: 6px 2px 2px; min-height: auto; } #top #legal-books-block .lb-meta, #top #legal-books-block .lb-cta { font-size: 10px; } } /*======================================== 画像解析フォレンジック 解析メニュー ========================================*/ :root{ --c-primary:#1354a1; --c-accent:#2f6bb8; --c-text:#1b2430; --c-muted:#333; --c-border:#e6ebf2; --c-row:#f7f9fc; } #top #forensic-menu{max-width:1400px;margin:0 auto;padding:40px 20px;color:var(--c-text)} #top #forensic-menu .lead{margin:0 0 25px;color:var(--c-muted);font-size:14px; text-align:center;} /* 3 Card : anchor */ #top #forensic-menu .quick3{ display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:26px} @media (max-width:768px){#top #forensic-menu .quick3{grid-template-columns:1fr 1fr}} @media (max-width:520px){#top #forensic-menu .quick3{grid-template-columns:1fr}} #top #forensic-menu .q{ display:flex;align-items:center;gap:12px;padding:12px 14px; border:1px solid var(--c-border);border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease} #top #forensic-menu .q:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)} #top #forensic-menu .ico{width:48px;height:48px;border-radius:50%; display:grid;place-items:center;background:linear-gradient(#f3f6fb,#eef3fa);border:1px solid var(--c-border)} #top #forensic-menu .ico img{width:40px;height:40px;object-fit:contain} #top #forensic-menu .q h3{margin:0;font-size:18px;color:var(--c-primary);font-weight:700} #top #forensic-menu .q p{margin:0;color:var(--c-muted);font-size:13px} /* 본문 카드(테이블 컨테이너) */ #top #forensic-menu .cards{display:grid;gap:24px} @media (min-width:992px){#top #forensic-menu .cards{grid-template-columns:1fr}} #top #forensic-menu .card{ border:1px solid var(--c-border);border-radius:0;background:#fff;overflow:hidden; scroll-margin-top:100px;} #top #forensic-menu .card .head{ display:flex;align-items:center;gap:12px;padding:18px 20px;background:#f0f5fb;border-bottom:1px solid var(--c-border)} #top #forensic-menu .card .head h4{margin:0;font-size:18px;color:var(--c-primary);font-weight:800} #top #forensic-menu .head .ico{width:40px;height:40px;border-radius:50%;background:#e9f0fb;border:0} #top #forensic-menu .head .ico img{width:28px;height:28px} /* details accordion */ #top #forensic-menu details{border-top:1px solid var(--c-border)} #top #forensic-menu details[open] summary .arr{transform:rotate(180deg)} #top #forensic-menu summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer; padding:14px 20px;font-weight:700;color:var(--c-primary)} #top #forensic-menu summary::-webkit-details-marker{display:none} #top #forensic-menu .arr{margin-left:auto;transition:.25s ease} /* 2열 K/V 테이블 (각진 보더) */ #top #forensic-menu .kv{ display:grid;grid-template-columns:220px 1fr;border-top:1px solid var(--c-border)} @media (max-width:720px){ #top #forensic-menu .kv{grid-template-columns:1fr} } #top #forensic-menu .kv .row{display:contents} #top #forensic-menu .k, #top #forensic-menu .v{ padding:12px 16px;border-bottom:1px solid var(--c-border) } #top #forensic-menu .k {background:var(--c-row);font-weight:700;color:#33405a} #top #forensic-menu .v {color:#39485b} /* 가벼운 등장 효과 */ @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} #top #forensic-menu .card{animation:fadeUp .45s ease both} #top #forensic-menu .card.d1{animation-delay:.05s} #top #forensic-menu .card.d2{animation-delay:.1s} #top #forensic-menu .card.d3{animation-delay:.15s} /*--- Mobile Forensics · Simple Original Layout ---*/ /* 스코프 & 컬러 */ #top #mf-simple{max-width:1400px;margin:0 auto;padding:5px 20px;} #top #mf-simple .h-lead{margin:0 0 18px;text-align:center;} #top #mf-simple .sub{margin:0 auto 16px;max-width:1000px;color:#333;font-size:14px;text-align:center} /* 섹션 제목 바(원안 느낌, 아주 얇게) */ #top #mf-simple .section-head{margin:22px 0 12px;padding:10px 12px;background:#eef3fa;border:1px solid #e0e6f0;color:#1354a1;font-weight:600;text-align:center} /* 리스트: 각 행이 독립 박스 */ #top #mf-simple .list{display:grid;gap:10px} #top #mf-simple .item{ border:1px solid #e6ebf2;background:#fff;padding:14px} /* 2열 그리드: 좌 타이틀 / 우 설명 */ #top #mf-simple .row{display:grid;gap:20px;grid-template-columns:1fr; /* mobile */} @media (min-width:760px){ #top #mf-simple .row{grid-template-columns:200px 1fr} } /* 타이틀(왼쪽) */ #top #mf-simple .k{ margin:0;color:#1354a1!important;line-height:1.6} /* 설명(오른쪽) */ #top #mf-simple .v{ margin:0;color:#39485b;line-height:1.9;font-size:15px} .only-block {display:block;} .pc-only {display:block;} #top #wrap_all .seminar-st h2 { font-size:20px; line-height: 1.7em;} .logo img {padding: 15px 0;} #top .avia-logo-element-container .slide-entry { padding: 0;} @media only screen and (max-width: 767px) { .responsive #top #wrap_all .hero-bnr {margin : 0;} .pc-only {display:none;} } .avia-image-container.avia-align-left {margin:0;} #forensics-merit{ max-width:1400px;margin:0 auto;} /* -------- top icons -------- */ #forensics-merit .merit-icons{ display:grid; grid-template-columns: repeat(6,1fr); gap:20px; text-align:center; margin-bottom:36px;} #forensics-merit .merit-icon{ text-decoration:none; color:#333; display:flex;flex-direction:column; align-items:center; gap:10px;} #forensics-merit .merit-icon img{ height:60px; width:auto;opacity:.85; transition:.25s;} #forensics-merit .merit-icon:hover img{ opacity:0.7;} /* -------- content -------- */ #forensics-merit .merit-contents{display:grid; grid-template-columns:1fr 1fr; gap:40px 30px;} #forensics-merit .merit-box{border:2px solid #e0e0e0;padding:25px;border-radius:12px;} #forensics-merit .merit-box h3{ margin:0 0 12px; font-size:16px;} #forensics-merit .merit-box p{ margin:0; font-size:14px;line-height:1.7;} /* 반응형 */ @media(max-width:990px){ #forensics-merit .merit-icons{ grid-template-columns: repeat(3,1fr); } #forensics-merit .merit-contents{ grid-template-columns:1fr; } } #top .avia-section:has(#ipgenius-hero) { padding-top:0 !important; padding-bottom:0 !important; border:0 !important; } /* Base */ #top #ipgenius-hero{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-top:-50px; margin-bottom:-50px; position:relative; isolation:isolate; color:#fff; } #top #ipgenius-hero .ipg-inner{ max-width:1300px; margin:0 auto; padding:20px ; display:grid; align-items:center; grid-template-columns:1fr 1fr; gap:5px; } /* Text */ #top #ipgenius-hero .ipg-title{ font-size:32px!important; line-height:1.4; font-weight:600; margin:0 0 16px; color:#fff!important; } #top #ipgenius-hero .ipg-sub{ font-size:22px!important; line-height:1.8; opacity:.95; margin:0 0 28px; } #top #ipgenius-hero .ipg-cta{ display:flex; flex-wrap:wrap; gap:20px } #top #ipgenius-hero .ipg-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:.15s transform,.15s opacity,.2s background-color } #top #ipgenius-hero .ipg-btn--primary{ background:#000; color:#fff; border:1px solid white;padding:6px 36px; } #top #ipgenius-hero .ipg-btn--secondary{ background:#dad840; color:#333; border:1px solid rgba(255,255,255,.15);padding:6px 24px; } #top #ipgenius-hero .ipg-btn:hover{ transform:translateY(-1px); opacity:.95 } /* Art */ #top #ipgenius-hero .ipg-art{ position:relative; min-height:400px } #top #ipgenius-hero .ipg-art img{ display:block; position:relative; width:clamp(600px,46vw,1000px); height:auto; margin-right:clamp(-140px,-6vw,-80px); filter:drop-shadow(0 16px 32px rgba(0,0,0,.18)); } /* ===== Breakpoints ===== */ /* Mobile ≤768px: 1열 + 이미지 하단 */ @media (max-width:768px){ #top #ipgenius-hero .ipg-inner{ grid-template-columns:1fr; padding:44px 20px 28px } #top #ipgenius-hero .ipg-cta{ gap:10px } #top #ipgenius-hero .ipg-art{ margin-top:14px; min-height:0 } #top #ipgenius-hero .ipg-art img{ margin:0 auto; width:min(92%,560px) } } /* Narrow tablet 769–911px: 잘림 방지 + 중앙 정렬 */ @media (min-width:769px) and (max-width:911px){ #top #ipgenius-hero .ipg-inner{ grid-template-columns:minmax(310px,0.9fr) minmax(500px,1.1fr); padding-left:20px; padding-right:20px; gap:clamp(8px,2vw,20px); } #top #ipgenius-hero .ipg-art{ display:flex; justify-content:center; align-items:center } #top #ipgenius-hero .ipg-art img{ margin:0; transform:none; width:min(82vw,760px); max-width:100%; height:auto; } } /* Wide tablet 912–1189px: 중앙 정렬 + 적절한 확대 */ @media (min-width:912px) and (max-width:1189px){ #top #ipgenius-hero .ipg-inner{ grid-template-columns:1fr 1fr; gap:6px; } #top #ipgenius-hero .ipg-art{ display:flex; justify-content:center; align-items:center } #top #ipgenius-hero .ipg-art img{ margin-right:0; width:min(100%,860px); max-width:86vw } } /* Desktop ≥1366px: 갭 최소화 + 이미지 살짝 축소(좌측 치우침 유지) */ @media (min-width:1366px){ #top #ipgenius-hero .ipg-inner{ grid-template-columns:minmax(440px,0.9fr) minmax(640px,1.1fr); gap:clamp(0px,1vw,10px); padding-left:5px; padding-right:5px; } #top #ipgenius-hero .ipg-art{ display:flex; justify-content:flex-start; align-items:center } #top #ipgenius-hero .ipg-art img{ width:100%; margin-right:-60px; margin-left:-24px; max-width:none; } } /* Ultra-wide ≥1920px: 상한 조정 */ @media (min-width:1920px){ #top #ipgenius-hero .ipg-art img{ width:clamp(1400px,58vw,1700px); margin-right:-40px; margin-left:-16px; } } /* 리스트 중앙 정렬 */ .case-links {text-align:center; padding: 10px 0;} /* 공통 버튼 스타일 */ .case-btn {display:block; padding: 10px 0; width: 100%; background: #dce9f3; border: 2px solid #4b90ca!important; border-radius: 10px; color: #2f5390;font-size: 16px; transition: all 0.2s ease;} /* Hover 효과 */ .case-btn:hover {background: #cde0ee; border-color: #4b7aa0;color: #234b63;} .menu-line {padding-bottom:10px; border-bottom: 1px solid; border-bottom-color:#999!important;} #top #device-six-wrap{ max-width:1400px; margin:20px 0; display:flex; flex-wrap:nowrap; gap:10px; justify-content:space-between;} #top #device-six-wrap .ds-item{ flex:1; padding:12px 10px; text-align:center; border:1px solid #d4dde5; background:#f4f7fa; font-size:14px; color:#333; box-sizing:border-box; white-space:nowrap;} #top #device-six-wrap .ds-item:hover{ background:#e9f0f7;} /* 768px 이하 두 줄 */ @media(max-width:768px){ #top #device-six-wrap{ flex-wrap:wrap;} #top #device-six-wrap .ds-item{ flex:0 0 48%;} } /* 480px 이하 1열 */ @media(max-width:480px){ #top #device-six-wrap .ds-item{ flex:0 0 100%; } } /* ===== 弁護士協同組合の特約店 ===== */ /* section */ #top .law-group-wrap { margin: 0 auto; padding: 0 10px 20px; max-width: 1400px;} /* Title */ #top .law-group-title { text-align: center; font-size: 22px; font-weight: 600; margin-bottom: 30px; color:#333;} /* ListT */ #top .law-group-list.equal-width { display: flex; flex-wrap: wrap; gap: 12px 5px; max-width: 1100px; margin: 0 auto; justify-content: flex-start;} /* Law Chip */ #top .law-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #d5e4ef; padding: 8px 12px; border-radius: 999px; font-size: 13px; color: #333; line-height: 1.4; overflow: hidden; white-space: nowrap; width: 260px; box-sizing: border-box;} /* Tablet */ @media (max-width: 1024px) { #top .law-chip { width: 220px; font-size: 12px; } } /* Mobile */ @media (max-width: 767px) { #top .law-group-list.equal-width { justify-content: center; } #top .law-chip { width: 200px;} } /* ===== STEP ===== */ /* 카드 */ #top .step-card { max-width: 900px; margin: 10px auto ; padding: 24px 28px; background: #fff; box-sizing: border-box;} /* STEP 라벨라인 */ #top .step-label { font-weight: 600; color: #0a4ea3; padding-left: 10px; border-left: 4px solid #0a4ea3; margin-bottom: 12px;} #top .step-label span { margin-right: 6px; font-weight: 600;} #top .step-title { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #1b334d!important;} #top .step-desc { margin: 0 0 16px; color: #4a5b6c!important; line-height: 1.7;} #top .step-card p { line-height: 1.8; margin-bottom: 10px;} /* 노트 */ #top .step-note {color: #6b7a88!important;} /* CASE BUTTON */ #top #case-nav-wrap { max-width: 1400px; margin: 25px auto 10px ; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;} /* 버튼 디자인 */ #top #case-nav-wrap .case-nav-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid #2f6bb8; color: #2f6bb8; background: #f7faff; transition: all 0.25s ease; min-width: 240px; box-sizing: border-box;} /* Hover */ #top #case-nav-wrap .case-nav-btn:hover { background: #2f6bb8; color: #fff; box-shadow: 0 4px 12px rgba(47, 107, 184, 0.25);} /* 모바일 정렬 */ @media (max-width: 600px) { #top #case-nav-wrap { gap: 12px; } #top #case-nav-wrap .case-nav-btn { width: 100%; min-width: unset;} } /* ===== TV Nav: 버튼 레이아웃 ===== */ #top #tv-nav { max-width: 1400px; width: 100%; margin: 20px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start;} /* 기본: PC (4개) */ #top #tv-nav a { flex: 0 0 calc(24% - 10px); padding: 10px 18px; background: #f7fbff; border: 1px solid #d6e4f3; border-radius: 6px; color: #2f6bb8; font-weight: 600; text-decoration: none; text-align: center; white-space: nowrap; transition: .25s; margin-bottom: 10px;} /* hover */ #top #tv-nav a:hover { background: #2f6bb8; color: #fff;} /* 태블릿: 3개 */ @media (max-width: 1024px) { #top #tv-nav a { flex: 0 0 calc(32% - 7px); } } /* 모바일: 2개 */ @media (max-width: 768px) { #top #tv-nav a { flex: 0 0 calc(50% - 15px); } } /* 아주 작은 모바일: 1개 */ @media (max-width: 480px) { #top #tv-nav {gap: 0;} #top #tv-nav a { flex: 0 0 100%; } } /* ===== Forensic Function List ===== */ #top #forensic-func{ margin: 0 auto; box-sizing: border-box;} /* 2열(PC) / 1열(모바일) */ #top #forensic-func .ff-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px;} @media (max-width: 768px){ #top #forensic-func .ff-grid{ grid-template-columns: 1fr; gap: 12px;} } /* 카드 */ #top #forensic-func .ff-item{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid #e3eaf3; border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;} /* hover: 과하지 않게 */ #top #forensic-func .ff-item:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.04); border-color: #cfe0f3;} /* 아이콘: 54 고정 + 라이트 배경 */ #top #forensic-func .ff-ico{ width: 54px; height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center; background: #f7fbff; border: 1px solid #d6e4f3; border-radius: 12px;} #top #forensic-func .ff-ico img{ width: 54px; height: 54px; display: block;} /* 텍스트 */ #top #forensic-func .ff-title{ font-size: 18px;font-weight: 800; color: #1b334d; line-height: 1.2; margin-bottom: 6px;} #top #forensic-func .ff-desc{ font-size: 14px; color: #43566b; line-height: 1.6;} /* 좁은 화면에서 타이포 살짝 다운 */ @media (max-width: 480px){ #top #forensic-func .ff-item{ padding: 14px 14px; } #top #forensic-func .ff-title{ font-size: 16px; } #top #forensic-func .ff-desc{ font-size: 13px; } }