@charset "utf-8"; /* ============================================================ 더웨일주식회사 — screen-ui.css 통이미지 → 하드코딩 리빌드 공용 디자인 시스템 (gwangjin 공용구조 재활용) ------------------------------------------------------------ 규칙: 1rem=10px / Noto Sans / 폰트 4단계(3.6·2.4·1.8·1.5rem) / width 1200 / 반응형(~480px) / 공용 클래스 목차 00. 변수 / 리셋 / 타이포 기본 01. 레이아웃 (container / section / 타이틀) 02. 그리드 · 미디어 스플릿 03. 카드 · 썸네일 04. 스펙 표 (반응형 스크롤) 05. 아이콘 피처 (원형 3종) 06. 연혁 타임라인 07. 인증서 갤러리 08. 제품 내부 pill 서브탭 09. 버튼 10. 폼 (온라인문의) 11. 게시판 (공지/자료실/실적) 12. 오시는길 (지도/정보) 13. 메인(index) ============================================================ */ /* ===== 00. 변수 / 리셋 / 타이포 ============================= */ :root{ --container-xl:1200px; --point:#0c7f8e; /* 네이비 (메인 포인트) */ --point-2:#0c7f8e; /* 미드 블루 */ --accent:#0c7f8e; /* 시안 (강조) */ /* --point:#0fa3b5; --point-2:#0c7f8e; --accent:#16b6c6; */ --ink:#222222; --body:#444444; --muted:#7a7a7a; --faint:#a8a8a8; --line:#e4e4e4; --line-2:#eef0f2; --soft:#f4f7fa; --soft-2:#f7f8fa; --radius:8px; --shadow:0 6px 20px rgba(15,163,181,0.08); --shadow-hover:0 12px 30px rgba(15,163,181,0.16); --ease:cubic-bezier(0.22,1,0.36,1); } *,*::before,*::after{box-sizing:border-box;} html{font-size:62.5%;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:"Noto Sans KR","Noto Sans",sans-serif; font-size:1.8rem; line-height:1.7; color:var(--body); font-weight:400; background:#fff; letter-spacing:-0.02em; -webkit-font-smoothing:antialiased; } img{max-width:100%; height:auto; border:0; vertical-align:middle;} a{color:inherit;} h1,h2,h3,h4,h5,p,ul,ol,li,figure,table,dl,dd{margin:0; padding:0;} ul,ol{list-style:none;} table{border-collapse:collapse; width:100%;} /* 폰트 4단계 유틸 */ .t-title{font-size:3.6rem; line-height:1.35; font-weight:700; color:var(--ink);} .t-subtitle{font-size:2.4rem; line-height:1.45; font-weight:700; color:var(--ink);} .t-body{font-size:1.8rem; line-height:1.85;} .t-note{font-size:1.5rem; line-height:1.75; color:var(--muted);} /* ===== 01. 레이아웃 ========================================= */ .sub-page{width:100%;} .sub-inner{max-width:var(--container-xl); margin:0 auto; padding:0 20px;} .sub-section{padding:0 0 20px;} .sub-section + .sub-section{padding-top:70px;} /* 섹션 타이틀 (좌측 액센트 바) */ .sec-head{margin-bottom:36px;} .sec-title{ position:relative; font-size:2.4rem; font-weight:700; color:var(--ink); padding-left:18px; line-height:1.35; margin:0 0 26px; } /* 콘텐츠 흐름 중 뒤따르는 섹션 타이틀은 위 여백으로 구분 (첫 타이틀 제외) */ * + .sec-title{margin-top:60px;} .sec-head .sec-title{margin:0;} .prod-head + .sec-title{margin-top:8px;} .sec-title::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:6px; border-radius:3px; background:linear-gradient(180deg,var(--point),var(--accent)); } .sec-title .accent{color:var(--point);} .sec-desc{margin-top:14px; font-size:1.8rem; line-height:1.9; color:var(--body);} .sec-note{margin-top:10px; font-size:1.5rem; color:var(--muted);} .center{text-align:center;} .mt-s{margin-top:16px;} .mt-m{margin-top:34px;} .mt-l{margin-top:60px;} /* 페이지 상단 리드 문구 */ .page-lead{ text-align:center; font-size:2.4rem; font-weight:500; color:var(--ink); line-height:1.6; margin-bottom:16px; } .page-lead .accent{color:var(--point); font-weight:700;} .page-lead::before{content:""; display:block; width:46px; height:3px; margin:0 auto 22px; border-radius:2px; background:linear-gradient(90deg,var(--point),var(--accent));} .page-sub{text-align:center; font-size:1.8rem; color:var(--muted); margin-bottom:50px;} /* ===== 02. 그리드 · 미디어 스플릿 ========================== */ .grid{display:grid; gap:30px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} /* 이미지 + 텍스트 2단 */ .media-split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;} .media-split.media-right{grid-template-columns:1fr 1fr;} .media-split__img img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow);} .media-split__text h3{font-size:2.4rem; font-weight:700; color:var(--ink); margin-bottom:18px;} .media-split__text p{font-size:1.8rem; line-height:1.9; color:var(--body);} /* ===== 03. 카드 · 썸네일 ==================================== */ .photo-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .25s var(--ease), transform .25s var(--ease); } .photo-card:hover{box-shadow:var(--shadow-hover); transform:translateY(-4px);} .photo-card__media{background:var(--soft); overflow:hidden;} .photo-card__media img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover;} .photo-card__body{padding:22px 24px;} .photo-card__tit{font-size:2.0rem; font-weight:700; color:var(--ink); margin-bottom:10px;} .photo-card__desc{font-size:1.6rem; line-height:1.7; color:var(--muted);} /* 캡션 썸네일 (인증서/사진 라벨용) */ .thumb{text-align:center;} .thumb img{width:100%; border:1px solid var(--line); border-radius:6px; background:#fff;} .thumb figcaption{margin-top:12px; font-size:1.5rem; color:var(--body);} /* ===== 04. 스펙 표 ========================================== */ .table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 40px;} .spec-table{min-width:640px; font-size:1.5rem;} .spec-table caption{ caption-side:top; text-align:left; font-size:1.8rem; font-weight:700; color:var(--ink); padding:0 0 14px; } .spec-table th,.spec-table td{ border:1px solid var(--line); padding:12px 14px; text-align:center; line-height:1.5; color:var(--body); vertical-align:middle; } .spec-table thead th{background:var(--point); color:#fff; font-weight:700; border-color:rgba(255,255,255,0.38);} .spec-table tbody th{background:var(--soft); color:var(--ink); font-weight:700;} .spec-table tbody tr:nth-child(even) td{background:var(--soft-2);} .spec-table td strong{color:var(--point);} .spec-table .td-left{text-align:left;} .table-guide{font-size:1.5rem; color:var(--muted); line-height:1.9; margin-top:10px;} /* ===== 05. 아이콘 피처 (원형 3종) ========================== */ .feature-row{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center;} .feature{display:flex; flex-direction:column; align-items:center;} .feature__circle{ width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:3px solid var(--accent); margin-bottom:18px; transition:transform .25s var(--ease); } .feature:nth-child(2) .feature__circle{border-color:var(--point-2);} .feature:nth-child(3) .feature__circle{border-color:var(--point);} .feature:hover .feature__circle{transform:translateY(-6px);} .feature__circle svg{width:60px; height:60px;} .feature__circle svg [stroke]{stroke:var(--point);} .feature__label{font-size:1.5rem; color:var(--muted); margin-bottom:2px;} .feature__en{font-size:2.4rem; font-weight:700; color:var(--point); letter-spacing:.02em;} /* ===== 06. 연혁 타임라인 =================================== */ .timeline{position:relative; max-width:960px; margin:0 auto; padding:10px 0 30px;} .timeline::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--line); transform:translateX(-50%);} .era-badge{ position:relative; z-index:2; width:110px; height:110px; margin:30px auto; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:700; box-shadow:0 8px 20px rgba(63,184,221,.35); } .era-badge:first-child{margin-top:0;} .tl-item{position:relative; width:50%; padding:14px 44px; min-height:56px;} .tl-item::before{content:""; position:absolute; top:20px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--accent); z-index:2;} .tl-item.left{left:0; text-align:right;} .tl-item.right{left:50%; text-align:left;} .tl-item.left::before{right:-7px;} .tl-item.right::before{left:-7px;} .tl-item.left::after,.tl-item.right::after{content:""; position:absolute; top:26px; width:34px; height:2px; background:var(--accent);} .tl-item.left::after{right:0;} .tl-item.right::after{left:0;} .tl-date{font-size:1.8rem; font-weight:700; color:var(--muted); letter-spacing:.03em;} .tl-item.right .tl-date{color:var(--point-2);} .tl-desc{font-size:1.7rem; color:var(--body); line-height:1.55; margin-top:6px;} /* ===== 07. 인증서 갤러리 =================================== */ .gallery-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:28px 26px; padding:0 18px;} .gallery-item{text-align:center;} .gallery-item img{width:100%; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); background:#fff;} .gallery-item figcaption{margin-top:10px; font-size:1.4rem; color:var(--body); line-height:1.45;} /* 디자인/도면 타일 반응형 그리드 (제품 이미지 조각) */ .design-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 44px; align-items:start;} .design-grid figure{margin:0;} .design-grid img{width:100%; border:1px solid var(--line); border-radius:6px; background:#fff; display:block;} .design-grid figcaption{margin-top:12px; font-size:1.6rem; color:var(--body); text-align:center;} .design-grid--2{grid-template-columns:repeat(2,1fr);} .design-grid--4{grid-template-columns:repeat(4,1fr); gap:18px;} .design-grid .code{margin-top:8px; font-size:1.5rem; font-weight:600; color:var(--point); text-align:center; letter-spacing:.02em;} /* 디자인 하위 그룹 라벨 (CEILING standard/deluxe, COP/ETCHING 등) */ .subgroup-label{font-size:1.8rem; font-weight:700; color:var(--point-2); margin:30px 0 16px; padding-left:14px; position:relative;} .subgroup-label::before{content:""; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:2px; background:var(--accent);} .subgroup-label:first-of-type{margin-top:6px;} /* 사진 갤러리: 고정 4:3 비율 + cover (임의 확대·왜곡 방지, 높이 통일) */ .design-grid--photo figure{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--soft);} .design-grid--photo img{width:100%; aspect-ratio:4/3; object-fit:cover; border:0; border-radius:0; display:block;} .design-grid--photo.design-grid--tall img{aspect-ratio:3/4;} .design-grid--photo figcaption{margin-top:12px;} .design-grid--photo figure > figcaption{margin:0; padding:10px 12px 12px; background:#fff; text-align:center;} /* 동작 순서 스텝 플로우 (렌더+텍스트+SVG 화살표) */ .step-flow{display:flex; align-items:stretch; justify-content:center; flex-wrap:nowrap; max-width:1080px; margin:0 auto 44px;} .step-flow__item{flex:1 1 0; max-width:300px; text-align:center; display:flex; flex-direction:column; align-items:center;} .step-flow__fig{width:100%; background:var(--soft); border-radius:var(--radius); padding:10px;} .step-flow__fig img{width:100%; display:block;} .step-flow__num{margin-top:16px; font-size:1.5rem; font-weight:700; color:#fff; background:var(--point); padding:5px 20px; border-radius:16px;} .step-flow__desc{margin-top:12px; font-size:1.7rem; line-height:1.65; color:var(--body);} .step-flow__arrow{flex:0 0 auto; display:flex; align-items:center; padding:0 10px; color:var(--accent);} .step-flow__arrow svg{width:26px; height:26px;} @media (max-width:768px){ .step-flow{flex-direction:column; align-items:center;} .step-flow__item{max-width:360px; width:100%;} .step-flow__arrow{transform:rotate(90deg); padding:14px 0;} } /* 강조 포인트 배지 (원형) — 제품 특징 요약 */ .point-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:6px 0 36px;} .point-badge{width:132px; height:132px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.6rem; font-weight:700; line-height:1.4; padding:10px; box-shadow:0 8px 18px rgba(63,184,221,.3);} .point-badge:nth-child(2){background:var(--point-2);} .point-badge:nth-child(3){background:var(--point-2);} .point-badge:nth-child(4){background:var(--point);} @media (max-width:480px){.point-badges{gap:14px;} .point-badge{width:108px; height:108px; font-size:1.5rem;}} /* 카리프트 특징 소제목 */ .feature-lead{font-size:2.4rem; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:6px;} .feature-lead span{display:block; font-size:1.8rem; font-weight:400; color:var(--muted); margin-top:6px;} .feature-cert{font-size:2.0rem; font-weight:700; color:var(--point); margin:0 0 20px; padding-left:16px; position:relative;} .feature-cert::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:3px; background:var(--point);} /* 시공 완료 현장 등 이름 리스트 (다단 컬럼) */ .name-list{columns:3; column-gap:34px; max-width:1000px; margin:0 auto; list-style:none; padding:0;} .name-list li{break-inside:avoid; padding:9px 0 9px 18px; position:relative; font-size:1.6rem; color:var(--body); border-bottom:1px solid var(--line-2);} .name-list li::before{content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:var(--point);} @media (max-width:768px){.name-list{columns:2; column-gap:18px;}} @media (max-width:480px){.name-list{columns:1;}} /* ===== 08. 제품 내부 pill 서브탭 =========================== */ .pill-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto 50px;} .pill{ appearance:none; border:1px solid var(--line); background:var(--soft); cursor:pointer; min-width:150px; padding:0 22px; height:52px; line-height:50px; border-radius:26px; font-size:1.5rem; font-weight:500; color:var(--muted); font-family:inherit; transition:all .2s var(--ease); text-align:center; } .pill:hover{color:var(--point); border-color:var(--point);} .pill.is-active{background:var(--point); border-color:var(--point); color:#fff; font-weight:700;} .pill-panel{display:none;} .pill-panel.is-active{display:block; animation:fadeUp .35s var(--ease);} @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}} /* 제품 상세 블록 */ .prod-head{text-align:center; margin-bottom:30px;} .prod-head h2{font-size:2.4rem; font-weight:700; color:var(--ink);} .prod-head h2 span{display:block; font-size:1.5rem; color:var(--muted); font-weight:400; margin-top:6px;} .prod-figure{text-align:center; margin:0 auto 44px;} .prod-figure img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow);} .prod-figure figcaption{margin-top:14px; font-size:1.6rem; color:var(--muted);} .prod-desc{font-size:1.8rem; line-height:1.9; text-align:center; color:var(--body); margin-bottom:34px;} /* 특징 리스트 (체크) */ .check-list{max-width:1000px; margin:0 auto 40px;} .check-list li{position:relative; padding:12px 0 12px 34px; font-size:1.8rem; line-height:1.7; border-bottom:1px dashed var(--line);} .check-list li::before{content:""; position:absolute; left:4px; top:20px; width:14px; height:8px; border-left:3px solid var(--point); border-bottom:3px solid var(--point); transform:rotate(-45deg);} .dot-list{margin:0 0 34px;} .dot-list li{position:relative; padding:9px 0 9px 20px; font-size:1.8rem; line-height:1.75; color:var(--body);} .dot-list li::before{content:""; position:absolute; left:0; top:19px; width:6px; height:6px; border-radius:50%; background:var(--point);} .check-list strong, .dot-list strong{color:var(--point); font-weight:700;} /* ===== 09. 버튼 ============================================ */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 34px; border-radius:28px; font-size:1.6rem; font-weight:700; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:all .2s var(--ease); font-family:inherit;} .btn-primary{background:var(--point); color:#fff;} .btn-primary:hover{background:#0f3358;} .btn-line{background:transparent; border-color:var(--point); color:var(--point);} .btn-line:hover{background:var(--point); color:#fff;} .btn-ghost{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5);} .btn-ghost:hover{background:#fff; color:var(--point);} /* ===== 10. 폼 (온라인문의) ================================= */ .form-wrap{max-width:1000px; margin:0 auto;} .form-note{font-size:1.5rem; color:var(--muted); margin-bottom:18px;} .form-note .req{color:#d0433b; font-weight:700;} .form-table{border-top:2px solid var(--point); font-size:1.6rem;} .form-table th,.form-table td{border-bottom:1px solid var(--line); padding:16px 20px; text-align:left; vertical-align:middle;} .form-table th{width:200px; background:var(--soft); color:var(--ink); font-weight:500;} .form-table th .req{color:#d0433b; margin-left:3px;} .form-table input[type=text],.form-table input[type=email],.form-table select,.form-table textarea{ width:100%; max-width:480px; height:50px; padding:0 16px; border:1px solid var(--line); border-radius:6px; font-size:1.6rem; font-family:inherit; color:var(--ink); background:#fff; } .form-table textarea{height:150px; padding:12px 16px; max-width:100%; resize:vertical;} .form-inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .form-inline input{max-width:160px;} .agree-box{margin:30px 0; padding:26px 28px; background:var(--soft); border-radius:var(--radius); font-size:1.6rem; line-height:1.9;} .agree-check{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:1.6rem;} .agree-check input{width:20px; height:20px;} .form-submit{text-align:center; margin-top:30px;} /* ===== 11. 게시판 ========================================== */ .board-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:1.5rem; color:var(--muted);} .board-table{border-top:2px solid var(--point); font-size:1.6rem; table-layout:fixed; width:100%;} .board-table thead th{background:var(--soft); color:var(--ink); font-weight:700; padding:16px 10px; border-bottom:1px solid var(--line); font-size:1.5rem;} .board-table td{padding:16px 10px; border-bottom:1px solid var(--line); text-align:center; color:var(--body);} .board-table td.subject{text-align:left;} .board-table .w-no{width:12%;} .board-table .w-date{width:18%;} .board-table .w-hit{width:12%;} .board-table .w-file{width:12%;} .board-table .w-loc{width:24%;} .board-table .w-year{width:16%;} .board-table td.subject a{text-decoration:none; color:var(--ink);} .board-table td.subject a:hover{color:var(--point); text-decoration:underline;} .board-empty{padding:80px 20px; text-align:center; color:var(--muted); font-size:1.8rem;} .board-empty .ico{display:block; font-size:4.2rem; margin-bottom:12px; opacity:.5;} /* ===== 공용 게시판 렌더러(board-render.php) ===== */ .blind{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0;} .sub-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 10px;} .sub-table{width:100%; border-collapse:collapse;} .board-table .col-num{width:10%;} .board-table .col-name{width:14%;} .board-table .col-date{width:16%;} .board-table .col-hit{width:10%;} .board-table td.col-subject{text-align:left;} .board-table td.col-subject a{display:block; max-width:100%; text-decoration:none; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .board-table td.col-subject a:hover{color:var(--point); text-decoration:underline;} /* Board 반응형 */ @media (max-width:600px){ .board-table{font-size:1.5rem;} .board-table thead th{padding:13px 8px;} .board-table td{padding:14px 8px;} .board-table .col-name, .board-table .col-hit{display:none;} .board-table .col-num{width:16%;} .board-table .col-date{width:28%;} .board-view-title{font-size:2.0rem;} .board-view-content{font-size:1.6rem; padding:28px 4px; min-height:160px;} .board-view-meta{gap:6px 16px;} } .board-paging{margin-top:30px; text-align:center;} .board-paging span{display:inline-block; min-width:38px; padding:8px 10px; margin:0 3px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:1.5rem;} .board-paging .on{color:#fff; background:var(--point); border-color:var(--point); font-weight:700;} .board-view{border-top:2px solid var(--point);} .board-view-head{padding:24px 6px; border-bottom:1px solid var(--line);} .board-view-title{font-size:2.4rem; font-weight:700; color:var(--ink); margin-bottom:12px; line-height:1.4;} .board-view-meta{display:flex; flex-wrap:wrap; gap:20px; font-size:1.5rem; color:var(--muted);} .board-view-content{padding:36px 6px; min-height:220px; font-size:1.8rem; line-height:1.8; color:var(--body); border-bottom:1px solid var(--line);} .board-view-content img{max-width:100%; height:auto;} .board-view-empty{color:var(--muted); text-align:center; padding:70px 0;} .board-view-foot{margin-top:28px; text-align:center;} .board-btn{display:inline-block; padding:12px 44px; background:var(--point); color:#fff; text-decoration:none; border-radius:6px; font-size:1.6rem; font-weight:700;} .board-btn:hover{background:var(--point-2);} /* ===== ECoRA : 서비스 리스트 ===== */ .svc-list{margin:14px 0 0;} .svc-item{position:relative; border:1px solid var(--line); border-left:4px solid var(--point); border-radius:var(--radius); padding:24px 30px 22px; margin-bottom:18px; background:#fff; transition:box-shadow .2s ease, transform .2s ease;} .svc-item:hover{box-shadow:var(--shadow); transform:translateY(-2px);} .svc-item__tit{font-size:2.0rem; font-weight:700; color:var(--point); line-height:1.45;} .svc-item__note{font-size:1.8rem; font-weight:700; color:var(--ink); margin:12px 0 6px;} .svc-item__desc{font-size:1.8rem; color:var(--body); line-height:1.7; margin-top:6px;} .svc-item__ul{margin:8px 0 0; padding:0; list-style:none;} .svc-item__ul li{position:relative; padding:5px 0 5px 18px; font-size:1.6rem; color:var(--body); line-height:1.7;} .svc-item__ul li::before{content:""; position:absolute; left:2px; top:15px; width:6px; height:6px; border-radius:50%; background:var(--accent);} /* ECoRA : 프로필(Professionals) */ .profile{border-bottom:1px solid var(--line); padding:22px 4px 20px;} .profile:last-child{border-bottom:none;} .profile__name{font-size:2.0rem; font-weight:700; color:var(--ink); margin-bottom:10px;} .profile__list{list-style:none; margin:0; padding:0;} .profile__list li{position:relative; padding:4px 0 4px 18px; font-size:1.7rem; color:var(--body); line-height:1.7;} .profile__list li::before{content:"–"; position:absolute; left:2px; color:var(--point);} /* ECoRA : 홈 히어로 */ .eco-hero{position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; background:linear-gradient(135deg,rgba(11,125,155,.70) 0%,rgba(0,160,198,.58) 55%,rgba(56,193,224,.47) 100%), url(/resources/images/main/main_01.jpg) center 62%/cover no-repeat;} /* 히어로 배경 장식 (은은한 원형 글로우) */ .eco-hero::before{content:""; position:absolute; width:540px; height:540px; border-radius:50%; top:-180px; right:-140px; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); z-index:1;} .eco-hero::after{content:""; position:absolute; width:400px; height:400px; border-radius:50%; bottom:-150px; left:-110px; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); z-index:1;} .eco-hero__inner{position:relative; z-index:2; padding:40px 20px; text-shadow:0 0.2rem 1.6rem rgba(3,45,60,.45);} .eco-hero__mark{font-size:6.4rem; font-weight:900; letter-spacing:.04em; line-height:1;} .eco-hero__mark em{font-style:normal; color:#eafaff;} .eco-hero__rule{width:64px; height:3px; background:rgba(255,255,255,.75); margin:24px auto;} .eco-hero__tag{font-size:2.4rem; font-weight:300; letter-spacing:.02em;} .eco-hero__tag b{font-weight:700;} .eco-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:60px auto 0;} .eco-nav__card{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:170px; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; background:#fff; transition:all .2s ease;} .eco-nav__card:hover{background:var(--point); border-color:var(--point); transform:translateY(-4px); box-shadow:var(--shadow-hover);} .eco-nav__ico{width:86px; height:86px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; background:var(--soft); border-radius:50%; transition:background .2s ease;} .eco-nav__ico svg{width:42px; height:42px;} .eco-nav__ico svg [stroke]{stroke:var(--point);} .eco-nav__card:hover .eco-nav__ico{background:rgba(255,255,255,.18);} .eco-nav__card:hover .eco-nav__ico svg [stroke]{stroke:#fff;} .eco-nav__label{font-size:1.8rem; font-weight:700; color:var(--ink); letter-spacing:.06em;} .eco-nav__card:hover .eco-nav__label{color:#fff;} .eco-intro{margin:0 auto; text-align:center;} @media (max-width:768px){ .eco-nav{grid-template-columns:1fr; gap:16px;} .eco-hero__mark{font-size:4.6rem;} .eco-hero__tag{font-size:2.0rem;} } /* ============================================================ 홈(메인) 리디자인 — 섹션 / 서비스 / 강점 / 탐색 / CTA ============================================================ */ .home-page{width:100%;} .hm-section{padding:92px 0;} .hm-section--soft{background:var(--soft);} .hm-inner{max-width:var(--container-xl); margin:0 auto; padding:0 20px;} /* 섹션 헤드 */ .hm-head{text-align:center; margin-bottom:52px;} .hm-eyebrow{display:inline-block; font-size:1.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--point); margin-bottom:14px;} .hm-eyebrow--light{color:rgba(255,255,255,.85);} .hm-title{font-size:2.4rem; font-weight:800; line-height:1.35; color:var(--ink);} .hm-title .accent{color:var(--point);} .hm-subtit{margin-top:14px; font-size:1.5rem; line-height:1.7; color:var(--muted); word-break:keep-all;} /* 인트로 CTA 버튼 */ .hm-cta-row{display:flex; justify-content: center; flex-wrap:wrap; gap:14px; margin-top:34px;} .hm-btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border-radius:50px; font-size:1.5rem; font-weight:700; letter-spacing:.02em; text-decoration:none; border:1.5px solid transparent; transition:all .2s ease;} .hm-btn--fill{background:var(--point); color:#fff; box-shadow:0 8px 20px rgba(15,163,181,.28);} .hm-btn--fill:hover{background:var(--point-2); transform:translateY(-2px);} .hm-btn--ghost{background:#fff; color:var(--point); border-color:var(--line);} .hm-btn--ghost:hover{border-color:var(--point); transform:translateY(-2px);} .hm-btn--white{background:#fff; color:var(--point);} .hm-btn--white:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18);} .hm-btn--outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.6);} .hm-btn--outline:hover{border-color:#fff; background:rgba(255,255,255,.12); transform:translateY(-2px);} /* 스탯 스트립 */ .hm-stats{display:flex; flex-wrap:wrap; margin-top:64px; background:var(--soft); border:1px solid var(--line-2); border-radius:10px;} .hm-stats > li{width:25%; padding:30px 18px; text-align:center; position:relative;} .hm-stats > li + li::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:54px; background:var(--line);} .hm-stats strong{display:block; font-size:3.6rem; font-weight:800; line-height:1; color:var(--point);} .hm-stats strong span{color:var(--accent);} .hm-stats em{display:block; margin-top:12px; font-style:normal; font-size:1.5rem; line-height:1.5; color:var(--muted);} /* 서비스 카드 */ .hm-svc{display:flex; flex-wrap:wrap; margin:0 -12px;} .hm-svc > li{width:33.3333%; padding:12px; display:flex;} .hm-svc--2 > li{width:50%;} .hm-svc__card{width:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:10px; padding:34px 30px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;} .hm-svc__card:hover{transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--point);} .hm-svc__ico{width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--point)); color:#fff; margin-bottom:22px; box-shadow:0 8px 18px rgba(15,163,181,.26);} .hm-svc__ico svg{width:28px; height:28px;} .hm-svc__tit{font-size:1.8rem; font-weight:700; color:var(--ink); line-height:1.4;} .hm-svc__desc{margin-top:11px; margin-bottom:16px; font-size:1.5rem; line-height:1.7; color:var(--muted); word-break:keep-all;} .hm-svc__meta{margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); font-size:1.35rem; color:var(--point-2); font-weight:600; letter-spacing:.01em;} .hm-svc__meta span{display:inline-block; margin-right:10px; font-size:1.2rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);} .hm-more{text-align:center; margin-top:40px;} .hm-more a{display:inline-flex; align-items:center; min-height:50px; padding:0 30px; border-radius:50px; background:var(--point); color:#fff; font-size:1.5rem; font-weight:700; letter-spacing:.02em; text-decoration:none; box-shadow:0 8px 20px rgba(15,163,181,.24); transition:all .2s ease;} .hm-more a:hover{background:var(--point-2); color:#fff; transform:translateY(-2px);} /* Why ECoRA */ .hm-why{display:flex; flex-wrap:wrap; align-items:center; margin:0 -20px;} .hm-why__text{width:42%; padding:0 20px;} .hm-why__text .hm-title{text-align:left;} .hm-why__lead{margin-top:22px; font-size:1.8rem; line-height:1.85; color:var(--body);} .hm-why__list{width:58%; padding:0 20px;} .hm-why__list li{display:flex; align-items:flex-start; gap:20px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 28px; transition:transform .2s ease, box-shadow .2s ease;} .hm-why__list li + li{margin-top:16px;} .hm-why__list li:hover{transform:translateX(4px); box-shadow:var(--shadow);} .hm-why__ico{flex-shrink:0; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--soft); color:var(--point);} .hm-why__ico svg{width:28px; height:28px;} .hm-why__tit{font-size:1.8rem; font-weight:700; color:var(--ink);} .hm-why__desc{margin-top:6px; font-size:1.5rem; line-height:1.65; color:var(--muted);} /* Explore 카드 */ .hm-explore{display:flex; flex-wrap:wrap; margin:0 -12px;} .hm-explore > li{width:25%; padding:12px; display:flex;} .hm-explore__card{position:relative; width:100%; display:flex; flex-direction:column; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px 26px; text-decoration:none; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;} .hm-explore__card:hover{transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--point);} .hm-explore__ico{width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--soft); color:var(--point); margin-bottom:20px; transition:background .2s ease, color .2s ease;} .hm-explore__card:hover .hm-explore__ico{background:var(--point); color:#fff;} .hm-explore__ico svg{width:28px; height:28px;} .hm-explore__label{font-size:1.8rem; font-weight:700; color:var(--ink);} .hm-explore__desc{margin-top:8px; font-size:1.5rem; line-height:1.6; color:var(--muted);} .hm-explore__arrow{align-self:flex-end; margin-top:16px; font-size:2.4rem; line-height:1; color:var(--point);} /* Contact CTA 밴드 */ .hm-contact{background:linear-gradient(rgba(8,25,40,.3), rgba(8,25,40,.3)), url(/resources/images/common/banner-partner.jpg) center / cover no-repeat; color:#fff; padding:74px 0; text-shadow:0 1px 10px rgba(3,45,60,.5);} .hm-contact .hm-btn{text-shadow:none;} .hm-contact__inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:30px;} .hm-contact__text{flex:1 1 420px;} .hm-contact__title{font-size:2.4rem; font-weight:800; line-height:1.3;} .hm-contact__sub{margin-top:12px; font-size:1.8rem; line-height:1.7; color:rgba(255,255,255,.92);} .hm-contact__actions{display:flex; flex-wrap:wrap; gap:14px;} @media (max-width:900px){ .hm-svc > li{width:50%;} .hm-explore > li{width:50%;} .hm-why__text, .hm-why__list{width:100%;} .hm-why__list{margin-top:30px;} .hm-title{font-size:2.0rem;} .hm-contact__title{font-size:2.0rem;} } @media (max-width:600px){ .hm-section{padding:60px 0;} .hm-svc > li{width:100%;} .hm-explore > li{width:100%;} .hm-stats > li{width:50%;} .hm-stats > li::before{display:none;} .hm-contact__inner{flex-direction:column; align-items:flex-start;} } /* ============================================================ 서브페이지 공용 추가 컴포넌트 (홈 디자인 시스템 확장) ============================================================ */ /* 인페이지 섹션 헤드 (좌측정렬 eyebrow + 타이틀) */ .eco-sec{margin-top:76px;} .eco-sec--tight{margin-top:48px;} .eco-sec__eyebrow{display:block; font-size:1.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--point); margin-bottom:12px;} .eco-sec__title{font-size:2.4rem; font-weight:800; line-height:1.35; color:var(--ink); margin:0;} .eco-sec__title .accent{color:var(--point);} .eco-sec__desc{margin-top:16px; margin-bottom: 16px; font-size:1.8rem; line-height:1.85; color:var(--body);} /* 소프트 패널 / 강조 콜아웃 */ .eco-panel{background:var(--soft); border:1px solid var(--line-2); border-radius:10px; padding:40px 44px;} .eco-callout{position:relative; background:var(--soft); border-radius:10px; padding:34px 38px 34px 44px; overflow:hidden; margin-top: 2rem;} .eco-callout::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,var(--point),var(--accent));} .eco-callout p{font-size:1.8rem; line-height:1.85; color:var(--body);} .eco-callout .accent{color:var(--point); font-weight:700;} /* 컨테인드 CTA 패널 (페이지 하단) */ .eco-cta{margin-top:84px; background:linear-gradient(135deg,rgba(11,125,155,.52) 0%,rgba(0,160,198,.44) 58%,rgba(56,193,224,.4) 130%), url(/resources/images/common/cta.jpg) center top / cover no-repeat; border-radius:12px; padding:56px 40px; text-align:center; color:#fff; text-shadow:0 1px 10px rgba(3,45,60,.5);} .eco-cta .hm-btn{text-shadow:none;} .eco-cta__title{font-size:2.4rem; font-weight:800; line-height:1.3;} .eco-cta__sub{margin-top:12px; font-size:1.8rem; line-height:1.7; color:rgba(255,255,255,.92);} .eco-cta .hm-cta-row{margin-top:28px;} /* 프로필 카드 (Professionals) */ .pro-grid{display:flex; flex-wrap:wrap; margin:16px -12px;} .pro-grid > li{width:50%; padding:12px; display:flex;} .pro-card{width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;} .pro-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--point);} .pro-card__head{display:flex; align-items:center; gap:16px;} .pro-card__avatar{flex-shrink:0; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--point)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:800;} .pro-card__avatar svg{width:26px; height:26px;} .pro-card__name{font-size:1.8rem; font-weight:700; color:var(--ink);} .pro-card__role{margin-top:3px; font-size:1.5rem; font-weight:600; color:var(--point);} .pro-card__list{margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2);} .pro-card__list li{position:relative; padding:6px 0 6px 16px; font-size:1.5rem; line-height:1.65; color:var(--muted);} .pro-card__list li::before{content:""; position:absolute; left:0; top:14px; width:5px; height:5px; border-radius:50%; background:var(--accent);} /* 넘버 스텝 (Methodology 등) */ .steps{counter-reset:st;} .steps__item{display:flex; gap:22px; align-items:center;} .steps__item + .steps__item{margin-top:14px;} .steps__num{counter-increment:st; flex-shrink:0; width:46px; height:46px; border-radius:50%; background:var(--point); color:#fff; font-size:1.8rem; font-weight:800; display:flex; align-items:center; justify-content:center;} .steps__num::before{content:counter(st,decimal-leading-zero);} .steps__body{flex:1; background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 26px;} .steps__tit{font-size:1.8rem; font-weight:700; color:var(--ink);} .steps__tit .accent{color:var(--point);} .steps__desc{margin-top:6px; font-size:1.5rem; line-height:1.7; color:var(--muted);} /* 아이콘+텍스트 피처 행 (dot-list 대체용, 강점/특징) */ .feat-rows{display:flex; flex-direction:column; gap:14px;} .feat-row{display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 28px;} .feat-row__ico{flex-shrink:0; width:50px; height:50px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--point)); color:#fff; display:flex; align-items:center; justify-content:center;} .feat-row__ico svg{width:26px; height:26px;} .feat-row__tit{font-size:1.8rem; font-weight:700; color:var(--ink);} .feat-row__desc{margin-top:5px; font-size:1.5rem; line-height:1.7; color:var(--muted);} @media (max-width:900px){ .pro-grid > li{width:100%;} .eco-sec{margin-top:54px;} .eco-sec__title{font-size:2.0rem;} .eco-panel,.eco-callout{padding:28px 24px 28px 30px;} .eco-sec__desc,.eco-callout p{font-size:1.6rem;} } @media (max-width:600px){ .eco-cta{padding:40px 24px; margin-top:56px;} .steps__item{gap:14px;} .steps__num{width:40px; height:40px; font-size:1.6rem;} } .pager{display:flex; justify-content:center; gap:6px; margin-top:34px;} .pager a,.pager span{min-width:40px; height:40px; line-height:38px; text-align:center; border:1px solid var(--line); border-radius:6px; font-size:1.5rem; color:var(--muted); text-decoration:none;} .pager .is-current{background:var(--point); border-color:var(--point); color:#fff; font-weight:700;} /* ===== 12. 오시는길 ======================================== */ .map-embed{width:100%; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--soft);} .map-embed iframe{width:100%; height:440px; border:0; display:block;} /* 구글맵 임베드 */ .map-embed{position:relative; width:100%; aspect-ratio:16/7; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);} .map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;} @media (max-width:600px){ .map-embed{aspect-ratio:4/3;} } .map-info{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;} .map-info__item:first-child{grid-column:1 / -1;} .map-info__item{background:var(--soft); border-radius:var(--radius); padding:28px 26px; text-align:center; border-top:3px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, background .25s;} .map-info__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-top-color:var(--accent); background:#fff;} .map-info__ico{width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);} .map-info__ico svg{width:28px; height:28px;} .map-info__label{font-size:1.5rem; color:var(--muted); margin-bottom:6px;} .map-info__value{font-size:1.8rem; font-weight:700; color:var(--ink); line-height:1.5;} /* 회사개요 표 */ .overview-table{border-top:2px solid var(--point); font-size:1.6rem;} .overview-table th,.overview-table td{border-bottom:1px solid var(--line); padding:16px 20px; text-align:left; vertical-align:middle;} .overview-table th{width:150px; background:var(--soft); color:var(--ink); font-weight:700; text-align:center;} .overview-table td{color:var(--body);} /* 조직도 */ .org{max-width:960px; margin:0 auto; text-align:center;} .org__top{display:inline-flex; flex-direction:column; align-items:center; gap:0;} .org__ceo{width:120px; height:120px; border-radius:50%; background:var(--point); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700;} .org__line{width:2px; height:34px; background:var(--line);} .org__director{border:2px solid var(--point); color:var(--point); font-weight:700; font-size:1.8rem; padding:10px 34px; border-radius:6px; background:#fff;} .org__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;} .org__dept{background:var(--soft); border-radius:var(--radius); padding:26px 20px; border-top:4px solid var(--accent);} .org__dept:nth-child(2){border-top-color:var(--point-2);} .org__dept:nth-child(3){border-top-color:var(--point-2);} .org__dept:nth-child(4){border-top-color:var(--point);} .org__dept h4{font-size:2.0rem; font-weight:700; color:var(--point); margin-bottom:14px;} .org__dept li{font-size:1.6rem; color:var(--body); line-height:1.9;} /* ===== 13. 메인(index) ===================================== */ .main-hero{position:relative; width:100%; height:640px; overflow:hidden; background:#0b1a30;} .main-hero__slides{position:absolute; inset:0;} .main-hero__slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s var(--ease);} .main-hero__slide.is-active{opacity:1;} .main-hero__slide.hs1{background-image:url(/resources/images/main/main_01.jpg);} .main-hero__slide.hs2{background-image:url(/resources/images/main/main_02.jpg);} .main-hero__slide.hs3{background-image:url(/resources/images/main/main_03.jpg);} .main-hero__slide.hs4{background-image:url(/resources/images/main/main_04.jpg);} .main-hero__inner{position:relative; z-index:3; max-width:var(--container-xl); margin:0 auto; height:100%; padding:0 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff;} .main-hero__eyebrow{font-size:1.8rem; letter-spacing:.14em; color:rgba(255,255,255,.85); margin-bottom:20px; font-weight:400;} .main-hero__tit{font-size:3.6rem; font-weight:700; line-height:1.45; text-shadow:0 2px 14px rgba(0,0,0,.4);} .main-hero__dots{position:absolute; z-index:4; left:0; right:0; bottom:28px; display:flex; justify-content:center; gap:10px;} .main-hero__dots button{width:12px; height:12px; border-radius:50%; border:2px solid #fff; background:transparent; cursor:pointer; padding:0;} .main-hero__dots button.is-active{background:#fff;} /* 히어로 좌우 화살표 */ .main-hero__arrow{position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s var(--ease);} .main-hero__arrow:hover{background:rgba(255,255,255,0.32);} .main-hero__arrow--prev{left:3%;} .main-hero__arrow--next{right:3%;} .main-hero__arrow svg{width:26px; height:26px;} /* 제품소개 슬라이더 (원본 구조 재현) */ .prod-slider{position:relative; background:var(--soft);} .prod-slider__track{position:relative; max-width:var(--container-xl); margin:0 auto; padding:0 20px;} .prod-slide{display:none; align-items:center; gap:70px; min-height:530px; padding:50px 0; animation:fadeUp .4s var(--ease);} .prod-slide.is-active{display:flex;} .prod-slide__media{flex:0 0 400px; width:400px; background:#fff; box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden;} .prod-slide__media img{width:100%; display:block; aspect-ratio:400/540; object-fit:cover;} .prod-slide__body{flex:1;} .prod-slide__body h4{font-size:1.8rem; color:var(--muted); font-weight:400; margin-bottom:10px;} .prod-slide__body h3{font-size:3.6rem; color:var(--ink); font-weight:700; margin-bottom:22px; letter-spacing:-0.03em;} .prod-slide__body p{font-size:1.8rem; color:var(--body); line-height:1.9;} .prod-slide__body .btn{margin-top:34px;} .prod-slider__arrow{position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--shadow); border:1px solid var(--line); color:var(--point); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s var(--ease);} .prod-slider__arrow:hover{background:var(--point); color:#fff; border-color:var(--point);} .prod-slider__arrow svg{width:24px; height:24px;} .prod-slider__arrow--prev{left:3%;} .prod-slider__arrow--next{right:3%;} .prod-slider__tabs{display:flex; justify-content:center; gap:0; max-width:var(--container-xl); margin:0 auto; background:#fff; border-top:1px solid var(--line);} .prod-slider__tab{flex:1; max-width:220px; height:60px; border:none; border-bottom:3px solid transparent; background:none; font-family:inherit; font-size:1.6rem; color:var(--muted); cursor:pointer; transition:all .15s;} .prod-slider__tab:hover{color:var(--point);} .prod-slider__tab.is-active{color:var(--point); font-weight:700; border-bottom-color:var(--accent);} @media (max-width:960px){ .prod-slide{flex-direction:column; gap:30px; min-height:0; text-align:center;} .prod-slide__media{flex:0 0 auto; width:320px; max-width:80%;} .prod-slide__body h3{font-size:2.8rem;} .prod-slider__arrow{width:44px; height:44px;} .prod-slider__arrow--prev{left:6px;} .prod-slider__arrow--next{right:6px;} } @media (max-width:480px){ .prod-slider__tab{font-size:1.5rem; height:52px;} .main-hero__arrow{width:44px; height:44px;} .main-hero__arrow--prev{left:8px;} .main-hero__arrow--next{right:8px;} } .main-section{padding:90px 0;} .main-section .sub-inner{padding:0 20px;} .main-section--soft{background:var(--soft);} .main-sec-head{text-align:center; margin-bottom:50px;} .main-sec-head h2{font-size:3.6rem; font-weight:700; color:var(--ink);} .main-sec-head h2 span{color:var(--point);} .main-sec-head p{margin-top:14px; font-size:1.8rem; color:var(--muted);} /* 메인 인트로 카피 */ .main-intro{text-align:center;} .main-intro__copy{font-size:2.4rem; font-weight:500; line-height:1.6; color:var(--ink);} .main-intro__copy b{color:var(--point); font-weight:700;} /* 메인 제품 3분류 카드 */ .main-prod{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;} .main-prod__item{position:relative; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow);} .main-prod__item img{width:100%; aspect-ratio:4/3.2; object-fit:cover; opacity:.82; transition:transform .4s var(--ease), opacity .3s;} .main-prod__item:hover img{transform:scale(1.06); opacity:.7;} .main-prod__cap{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; background:linear-gradient(180deg,rgba(9,23,46,.15),rgba(9,23,46,.6));} .main-prod__cap h3{font-size:2.4rem; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.4);} .main-prod__cap p{margin-top:8px; font-size:1.5rem; color:rgba(255,255,255,.9);} .main-prod__cap .go{margin-top:16px; font-size:1.5rem; border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:6px 18px;} .main-prod__item a{position:absolute; inset:0; z-index:2;} /* 메인 게시판 2단 */ .main-news{margin-top:70px;} .main-boards{display:grid; grid-template-columns:1fr 1fr; gap:36px;} .main-board__head{display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--point); padding-bottom:14px; margin-bottom:6px;} .main-board__head h3{font-size:2.4rem; font-weight:700; color:var(--ink);} .main-board__head a{font-size:1.5rem; color:var(--muted); text-decoration:none;} .main-board__head a:hover{color:var(--point);} .main-board__list li{display:flex; justify-content:space-between; gap:14px; padding:15px 4px; border-bottom:1px solid var(--line); font-size:1.6rem;} .main-board__list a{text-decoration:none; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .main-board__list a:hover{color:var(--point);} .main-board__list .date{color:var(--faint); font-size:1.5rem; flex-shrink:0;} /* 메인 CTA 배너 */ .main-cta{position:relative; background:linear-gradient(120deg,var(--point) 0%,var(--point-2) 100%); color:#fff; text-align:center; padding:70px 20px;} .main-cta h2{font-size:3.6rem; font-weight:700; line-height:1.4;} .main-cta p{margin-top:14px; font-size:1.8rem; color:rgba(255,255,255,.85);} .main-cta .btn{margin-top:28px;} /* ===== 14. 페이지 보정 ===================================== */ /* 연혁 연도별 타임라인 (더웨일) */ .year-tl{max-width:1000px; margin:0 auto;} .year-tl__row{display:grid; grid-template-columns:120px 1fr; gap:28px; padding:20px 0; border-bottom:1px solid var(--line-2); position:relative;} .year-tl__row:first-child{padding-top:0;} .year-tl__year{font-size:2.4rem; font-weight:700; color:var(--point); line-height:1.2;} .year-tl__list li{position:relative; padding:3px 0 3px 16px; font-size:1.6rem; color:var(--body); line-height:1.7;} .year-tl__list li::before{content:""; position:absolute; left:0; top:15px; width:5px; height:5px; border-radius:50%; background:var(--accent);} @media (max-width:480px){.year-tl__row{grid-template-columns:1fr; gap:6px;} .year-tl__year{font-size:2.0rem;}} /* 메인 히어로/섹션카드 (더웨일) */ .whale-hero{background:linear-gradient(120deg,#0f3358 0%,var(--point-2) 55%,var(--accent) 150%); padding:96px 20px;} .whale-hero .main-hero__eyebrow{color:rgba(255,255,255,.88); margin-bottom:18px;} .section-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px; text-decoration:none; transition:box-shadow .25s var(--ease), transform .25s var(--ease); border-top:4px solid var(--accent);} .section-card:hover{box-shadow:var(--shadow-hover); transform:translateY(-5px);} .section-card__en{font-size:1.5rem; color:var(--accent); font-weight:700; letter-spacing:.06em;} .section-card__tit{font-size:2.4rem; font-weight:700; color:var(--ink); margin:8px 0 14px;} .section-card__desc{font-size:1.6rem; color:var(--muted); line-height:1.7; flex:1 0 auto;} .section-card__go{margin-top:20px; font-size:1.5rem; color:var(--point); font-weight:700;} /* 인사말 서명 */ .greeting-sign{margin-top:34px; font-size:1.8rem; color:var(--muted);} .greeting-sign b{font-size:2.4rem; color:var(--ink); margin-left:8px;} /* 광진소개 섹션 간격 */ .company-page .sub-section + .sub-section{padding-top:80px;} /* 유지관리 안내 문단 */ .mnt-block{margin-bottom:44px;} .mnt-block:last-child{margin-bottom:0;} .mnt-block .sec-title{margin-bottom:16px;} /* 유지관리 절차 플로우차트 */ .flow{max-width:720px; margin:0 auto;} .flow__step{display:flex; flex-direction:column; align-items:center;} .flow__row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;} .flow__chip{ min-width:130px; text-align:center; padding:12px 20px; border-radius:6px; font-size:1.6rem; font-weight:700; color:#fff; background:var(--point); } .flow__chip.is-circle{border-radius:50%; width:110px; height:110px; display:flex; align-items:center; justify-content:center; min-width:0;} .flow__chip.tone-line{background:#fff; color:var(--point); border:2px solid var(--point);} .flow__chip.tone-accent{background:var(--accent);} .flow__chip.tone-gray{background:#eef0f2; color:var(--muted);} .flow__chip.tone-amber{background:#eb9b3e;} .flow__arrow{width:2px; height:26px; background:var(--line); margin:8px 0; position:relative;} .flow__arrow::after{content:""; position:absolute; left:50%; bottom:-2px; width:9px; height:9px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:translateX(-50%) rotate(45deg);} .flow__label{font-size:1.5rem; color:var(--muted); margin-bottom:10px;} /* ============================================================ 반응형 ============================================================ */ @media (max-width:960px){ body{font-size:1.7rem;} .sub-section + .sub-section{padding-top:54px;} .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} .media-split{grid-template-columns:1fr; gap:26px;} .feature-row{gap:20px;} .feature__circle{width:120px; height:120px;} .feature__circle svg{width:48px; height:48px;} .gallery-grid{grid-template-columns:repeat(3,1fr); gap:20px 18px; padding:0;} .design-grid{grid-template-columns:repeat(2,1fr); gap:16px;} .design-grid--4{grid-template-columns:repeat(3,1fr);} .map-info{grid-template-columns:repeat(3,1fr); gap:14px;} .org__grid{grid-template-columns:repeat(2,1fr);} .main-section{padding:64px 0;} .main-sec-head h2,.main-cta h2,.main-hero__tit{font-size:2.8rem;} .main-prod{grid-template-columns:1fr; gap:20px;} .main-boards{grid-template-columns:1fr; gap:30px;} .main-hero{height:520px;} .form-table th{width:130px; padding:14px 12px;} } @media (max-width:480px){ body{font-size:1.6rem;} .sub-inner{padding:0 16px;} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .page-lead,.main-intro__copy{font-size:2.0rem;} .sec-title,.media-split__text h3,.prod-head h2,.main-board__head h3{font-size:2.0rem;} .t-title{font-size:2.8rem;} /* 타임라인 → 한쪽 정렬 */ .timeline::before{left:18px;} .era-badge{margin-left:18px; transform:translateX(-50%); width:90px; height:90px; font-size:2.0rem;} .tl-item{width:100%; left:0 !important; padding:10px 10px 10px 44px; text-align:left !important;} .tl-item.left::before,.tl-item.right::before{left:11px; right:auto;} .tl-item.left::after,.tl-item.right::after{left:25px; right:auto; width:18px;} .feature-row{grid-template-columns:1fr; gap:26px;} .gallery-grid{grid-template-columns:repeat(3,1fr); gap:14px;} .design-grid{grid-template-columns:1fr;} .design-grid--4{grid-template-columns:repeat(2,1fr);} .map-info{grid-template-columns:1fr;} .org__grid{grid-template-columns:1fr;} .main-hero{height:440px;} .form-table th,.form-table td{display:block; width:100%; text-align:left;} .form-table th{border-bottom:none;} .form-table input[type=text],.form-table input[type=email],.form-table select{max-width:100%;} } /* ===== 사업활동 : 시스템 카드 / 스펙 그리드 / 실적 카드 ===== */ .sys-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:0 0 44px;} .sys-card{display:flex; gap:18px; align-items:flex-start; padding:24px 26px; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); transition:box-shadow .2s ease, transform .2s ease;} .sys-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);} .sys-card__ico{flex:0 0 58px; width:58px; height:58px; border-radius:50%; background:#fff; border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;} .sys-card__ico svg{width:30px; height:30px;} .sys-card__ico svg [stroke]{stroke:var(--point);} .sys-card__body{flex:1; min-width:0;} .sys-card__tit{font-size:1.8rem; font-weight:700; color:var(--ink); margin-bottom:6px;} .sys-card__desc{font-size:1.6rem; line-height:1.6; color:var(--muted);} .spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 26px;} .spec-grid__item{background:#fff; padding:18px 22px;} .spec-grid__k{font-size:1.5rem; font-weight:700; color:var(--point-2); margin-bottom:6px;} .spec-grid__v{font-size:1.6rem; line-height:1.5; color:var(--ink);} .case-card{border:1px solid var(--line); border-radius:var(--radius); padding:32px; margin:0 0 40px; background:#fff; box-shadow:var(--shadow);} .case-card__head{border-bottom:2px solid var(--point); padding-bottom:14px; margin-bottom:26px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;} .case-card__tit{font-size:2.4rem; font-weight:700; color:var(--ink);} .case-card__en{font-size:1.6rem; color:var(--muted);} .case-card__photos{display:grid; gap:16px; margin-bottom:26px;} .case-card__photos--2{grid-template-columns:repeat(2,1fr);} .case-card__photos--3{grid-template-columns:repeat(3,1fr);} .case-card__photos--4{grid-template-columns:repeat(2,1fr);} .case-card__photos img{width:100%; height:100%; display:block; border-radius:6px; object-fit:cover;} .case-card .check-list{max-width:none; margin:0;} .case-card .check-list li:last-child{border-bottom:none;} .check-list--grid{max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 44px;} @media (max-width:480px){ .check-list--grid{grid-template-columns:1fr;} } .tech-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:0 0 44px;} .tech-grid img{width:100%; display:block; border:1px solid var(--line); border-radius:var(--radius); background:#fff;} .cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 20px;} .cert-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow);} .cert-card__label{font-size:1.8rem; font-weight:700; color:#fff; background:var(--point); padding:13px 20px;} .cert-card__img{flex:1; padding:22px; display:flex; align-items:center; justify-content:center; background:var(--soft);} .cert-card__img img{max-width:100%; height:auto; display:block; box-shadow:0 2px 10px rgba(0,0,0,.12);} .client-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 20px;} .client-card{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:92px; padding:18px 16px; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); font-size:1.8rem; font-weight:700; color:var(--point); line-height:1.4; transition:box-shadow .2s ease, transform .2s ease;} .client-card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--accent);} .client-card small{display:block; font-size:1.5rem; font-weight:400; color:var(--muted); margin-top:5px;} @media (max-width:768px){ .spec-grid{grid-template-columns:repeat(2,1fr);} .client-grid{grid-template-columns:repeat(2,1fr);} .cert-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:480px){ .tech-grid{grid-template-columns:1fr;} .cert-grid{grid-template-columns:1fr;} } @media (max-width:480px){ .sys-grid{grid-template-columns:1fr; gap:14px;} .sys-card{padding:18px 20px;} .spec-grid{grid-template-columns:1fr;} .case-card{padding:20px;} .case-card__photos--2,.case-card__photos--3,.case-card__photos--4{grid-template-columns:1fr;} .case-card__tit{font-size:2.0rem;} } /* ============================================================ 조직도 (Organization chart) — 하드코딩 ============================================================ */ .orgchart{ max-width:920px; margin-left:auto; margin-right:auto; } .org-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px 16px; border-radius:8px; font-size:1.5rem; line-height:1.34; min-height:56px; box-shadow:0 2px 8px rgba(0,0,0,.07); } .org-box strong{ font-weight:700; } .org-box span{ font-weight:400; font-size:1.4rem; opacity:.9; margin-top:3px; } .org-box--ceo{ background:#0b6d86; color:#fff; } .org-box--ceo strong{ font-size:1.7rem; } .org-box--bu{ background:var(--point); color:#fff; font-weight:700; } .org-box--affil{ background:#16324e; color:#fff; font-weight:700; } .org-box--soft{ background:#e3e7ea; color:#4f5459; } .org-box--dark{ background:#71757b; color:#fff; } /* CEO */ .org-head{ text-align:center; } .org-head .org-box--ceo{ display:inline-flex; min-width:240px; } /* 트렁크 + MS BU 분기 */ .org-connect{ position:relative; height:96px; } .org-connect::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--line); transform:translateX(-50%); } .org-connect::after{ content:''; position:absolute; top:50%; left:50%; right:0; height:2px; background:var(--line); transform:translateY(-50%); } .org-ms{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; z-index:1; } .org-ms__bu{ min-width:96px; align-self:stretch; } .org-ms-list{ display:flex; flex-direction:column; gap:8px; margin-left:16px; position:relative; } .org-ms-list::before{ content:''; position:absolute; left:-16px; top:50%; width:16px; height:2px; background:var(--line); } .org-ms-list .org-box{ min-width:214px; } /* 3개 컬럼 + 상단 버스 */ .org-cols{ position:relative; display:flex; gap:30px; padding-top:44px; } .org-cols::before{ content:''; position:absolute; top:0; left:16.667%; right:16.667%; height:2px; background:var(--line); } .org-col{ flex:1; position:relative; display:flex; flex-direction:column; gap:26px; } .org-col::before{ content:''; position:absolute; top:-44px; left:50%; width:2px; height:44px; background:var(--line); transform:translateX(-50%); } .org-col > *{ position:relative; } .org-col > * + *::before{ content:''; position:absolute; top:-26px; left:50%; width:2px; height:26px; background:var(--line); transform:translateX(-50%); } /* 쌍(pair) 분기 */ .org-pair{ display:flex; gap:14px; } .org-pair > *{ flex:1; position:relative; } .org-col > * + .org-pair::before{ top:-26px; height:13px; } .org-pair::after{ content:''; position:absolute; top:-13px; left:25%; right:25%; height:2px; background:var(--line); } .org-pair > *::before{ content:''; position:absolute; top:-13px; left:50%; width:2px; height:13px; background:var(--line); transform:translateX(-50%); } @media (max-width:768px){ .org-connect{ height:auto; padding:18px 0 6px; } .org-connect::after{ display:none; } .org-connect::before{ top:0; height:24px; bottom:auto; } .org-ms{ position:static; transform:none; flex-direction:column; align-items:center; gap:10px; margin:20px auto 0; } .org-ms-list{ margin-left:0; } .org-ms-list::before{ display:none; } .org-cols{ flex-direction:column; gap:22px; padding-top:22px; } .org-cols::before, .org-col::before{ display:none; } .org-col{ gap:18px; } .org-col > * + *::before{ top:-18px; height:18px; } .org-col > * + .org-pair::before{ top:-18px; height:9px; } .org-pair::after{ top:-9px; } .org-pair > *::before{ top:-9px; height:9px; } } /* ============================================================ Contact Us 블록 (Overview) + 홈 여백 ============================================================ */ .contact{ margin-top:64px; } .contact__title{ display:flex; align-items:center; font-size:2.8rem; font-weight:800; color:var(--ink); letter-spacing:-0.01em; margin-bottom:32px; } .contact__title span{ color:var(--point); } .contact__title::after{ content:""; flex:1; height:2px; margin-left:22px; background:var(--point); border-radius:1px; } .contact__list{ display:flex; flex-direction:column; gap:16px; padding-left:6px; } .contact__list li{ position:relative; display:flex; gap:22px; padding-left:24px; font-size:1.8rem; line-height:1.6; align-items:baseline; } .contact__list li::before{ content:""; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background:var(--point); } .contact__k{ flex:0 0 150px; color:var(--point); font-weight:700; } .contact__v{ color:var(--ink); } .contact__v a{ color:var(--ink); } .contact__v a:hover{ color:var(--point); text-decoration:underline; } /* 홈(index)만 메인 상하 여백 넉넉히 */ .home-page .sub-section{ padding-top:96px; padding-bottom:104px; } @media (max-width:768px){ .contact__title{ font-size:2.2rem; } .contact__title::after{ margin-left:16px; } .contact__list li{ flex-direction:column; gap:3px; padding-left:22px; } .contact__k{ flex-basis:auto; } .home-page .sub-section{ padding-top:56px; padding-bottom:64px; } } /* ============================================================ YR — 서브페이지 요리엔 무드 공용 컴포넌트 (yr- 프리픽스) · 홈(cbx-)과 동일 팔레트/무드, 콘텐츠 폭(max-width) 안에서 동작 · 글래스 카드 / STEP 카드 / 에디토리얼 분할 / 그라데이션 패널 / 알약 버튼 / 타임라인 / 스탯 ============================================================ */ .yr{ --yr-ease:cubic-bezier(.22,1,.36,1); } .yr-wrap{ max-width:var(--container-xl); margin:0 auto; } /* 섹션 헤드(중앙) */ .yr-head{ text-align:center; margin:0 auto 48px; max-width:820px; } .yr-head__eye{ display:inline-block; font-size:1.4rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--point); margin-bottom:14px; } .yr-head__tit{ font-size:3rem; font-weight:800; line-height:1.3; letter-spacing:-0.03em; color:var(--ink); margin:0; word-break:keep-all; } .yr-head__tit .accent{ color:var(--point); } .yr-head__sub{ margin:16px 0 0; font-size:1.7rem; line-height:1.75; color:var(--muted); word-break:keep-all; } .yr-section{ margin-top:96px; } .yr-section:first-child{ margin-top:0; } /* 알약 버튼 */ .yr-pill{ display:inline-flex; align-items:center; gap:11px; height:54px; padding:0 30px; border-radius:999px; font-size:1.55rem; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s var(--yr-ease), background .2s, color .2s, border-color .2s; } .yr-pill svg{ width:18px; height:18px; transition:transform .25s var(--yr-ease); } .yr-pill:hover svg{ transform:translateX(4px); } .yr-pill--solid{ background:var(--point); color:#fff; box-shadow:0 12px 26px -10px rgba(15,163,181,.7); } .yr-pill--solid:hover{ background:var(--point-2); transform:translateY(-2px); } .yr-pill--line{ background:#fff; color:var(--point-2); border-color:var(--line); } .yr-pill--line:hover{ border-color:var(--point); transform:translateY(-2px); } /* 그라데이션 히어로 패널(라운드) — 비전/철학 문장용 */ .yr-hero{ position:relative; overflow:hidden; border-radius:12px; padding:72px 40px; text-align:center; color:#fff; background:radial-gradient(700px 360px at 82% -20%, rgba(127,227,238,.34), transparent 62%), linear-gradient(150deg,#0a333c 0%,#0e5561 55%,#127a89 120%); } .yr-hero__eye{ display:inline-block; font-size:1.4rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#7fe3ee; margin-bottom:16px; } .yr-hero__tit{ font-size:3rem; font-weight:800; line-height:1.4; letter-spacing:-0.02em; margin:0; text-shadow:0 2px 16px rgba(3,45,60,.3); word-break:keep-all; } .yr-hero__sub{ margin:18px auto 0; max-width:720px; font-size:1.75rem; line-height:1.7; color:rgba(255,255,255,.85); word-break:keep-all; } .yr-hero--light{ color:var(--ink); border:1px solid var(--line-2); background:radial-gradient(680px 340px at 82% -20%, rgba(127,227,238,.3), transparent 60%), linear-gradient(160deg,#eaf4f6 0%,#f2f9fa 60%,#fff 120%); } .yr-hero--light .yr-hero__eye{ color:var(--point); } .yr-hero--light .yr-hero__tit{ text-shadow:none; } .yr-hero--light .yr-hero__sub{ color:var(--muted); } /* 비전 스테이트먼트 — 배너가 아닌 타이포 컴포넌트(코너 브래킷 + 태그칩) */ .yr-vision{ position:relative; max-width:860px; margin:0 auto; padding:56px 48px; text-align:center; } .yr-vision::before, .yr-vision::after{ content:""; position:absolute; width:36px; height:36px; border:2px solid rgba(15,163,181,.5); } .yr-vision::before{ top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:8px; } .yr-vision::after{ bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:8px; } .yr-vision__tag{ display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 16px; border-radius:999px; border:1px solid rgba(15,163,181,.32); background:rgba(15,163,181,.07); font-size:1.25rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--point-2); margin-bottom:24px; } .yr-vision__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--point); } .yr-vision__tit{ font-size:3.2rem; font-weight:800; line-height:1.5; letter-spacing:-0.02em; color:var(--ink); margin:0; word-break:keep-all; } .yr-vision__tit .accent{ color:var(--point); } /* 글래스 카드 그리드 */ .yr-cards{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); } .yr-cards--2{ grid-template-columns:repeat(2,1fr); } .yr-cards--4{ grid-template-columns:repeat(4,1fr); } .yr-card{ position:relative; padding:36px 32px 38px; border-radius:12px; background:#fff; border:1px solid var(--line-2); box-shadow:0 24px 56px -34px rgba(16,60,70,.4); transition:transform .3s var(--yr-ease), box-shadow .3s var(--yr-ease), border-color .3s; } .yr-card:hover{ transform:translateY(-8px); box-shadow:0 34px 70px -30px rgba(16,60,70,.45); border-color:rgba(15,163,181,.3); } .yr-card__no{ font-size:1.3rem; font-weight:800; letter-spacing:.14em; color:var(--accent); } .yr-card__ico{ width:64px; height:64px; margin:16px 0 22px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--point)); box-shadow:0 12px 24px -8px rgba(15,163,181,.55); } .yr-card__ico svg{ width:32px; height:32px; } .yr-card__tit{ font-size:2rem; font-weight:700; color:var(--ink); margin:0 0 12px; line-height:1.4; } .yr-card__desc{ font-size:1.55rem; line-height:1.75; color:var(--body); word-break:keep-all; margin:0; } /* STEP 카드(라벨+화살표 → 호버 화이트+알약) */ .yr-steps{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); } .yr-steps--4{ grid-template-columns:repeat(4,1fr); } .yr-step{ display:flex; flex-direction:column; padding:26px 28px 32px; border-radius:12px; text-decoration:none; background:linear-gradient(180deg,#f3f8f9,#eaf2f4); border:1px solid var(--line-2); box-shadow:0 22px 52px -34px rgba(16,60,70,.45); transition:transform .3s var(--yr-ease), background .3s, box-shadow .3s; } .yr-step:hover{ transform:translateY(-8px); background:#fff; box-shadow:0 34px 72px -30px rgba(16,60,70,.5); } .yr-step__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:22px; min-height:38px; } .yr-step__label{ font-size:1.4rem; font-weight:700; color:var(--point-2); } .yr-step__arrow{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(20,60,70,.22); color:var(--ink); } .yr-step__arrow svg{ width:16px; height:16px; } .yr-step__pill{ display:none; align-items:center; gap:7px; height:38px; padding:0 15px; border-radius:999px; flex-shrink:0; background:var(--point); color:#fff; font-size:1.35rem; font-weight:700; white-space:nowrap; } .yr-step__pill svg{ width:14px; height:14px; } .yr-step:hover .yr-step__arrow{ display:none; } .yr-step:hover .yr-step__pill{ display:inline-flex; } .yr-step__ico{ width:60px; height:60px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:var(--point); background:radial-gradient(circle at 50% 40%,#fff,#eef6f7); box-shadow:inset 0 0 0 1px rgba(15,163,181,.14); } .yr-step__ico svg{ width:32px; height:32px; } .yr-step__img{ border-radius:8px; overflow:hidden; background:#fff; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; } .yr-step__img img{ max-width:82%; max-height:82%; object-fit:contain; } .yr-step__tit{ margin:22px 0 12px; font-size:1.9rem; font-weight:700; color:var(--ink); line-height:1.4; word-break:keep-all; } .yr-step__desc{ font-size:1.5rem; line-height:1.72; color:var(--body); word-break:keep-all; margin:0; } /* 에디토리얼 분할(미디어 + 텍스트) */ .yr-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; } .yr-split--flip .yr-split__media{ order:2; } .yr-split__media{ border-radius:12px; overflow:hidden; box-shadow:0 26px 60px -34px rgba(16,60,70,.5); background:var(--soft); } .yr-split__media img{ display:block; width:100%; height:100%; object-fit:cover; } .yr-split__eye{ display:inline-block; font-size:1.4rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--point); margin-bottom:14px; } .yr-split__tit{ font-size:2.6rem; font-weight:800; line-height:1.35; letter-spacing:-0.02em; color:var(--ink); margin:0 0 18px; word-break:keep-all; } .yr-split__tit .accent{ color:var(--point); } .yr-split__body{ font-size:1.65rem; line-height:1.85; color:var(--body); word-break:keep-all; } .yr-split__body p{ margin:0 0 16px; } .yr-split__body p:last-child{ margin-bottom:0; } /* 피처 로우(아이콘 + 텍스트) */ .yr-feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .yr-feat{ display:flex; gap:20px; align-items:flex-start; padding:28px 30px; border-radius:10px; background:var(--soft); border:1px solid var(--line-2); } .yr-feat__ico{ flex-shrink:0; width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--point)); } .yr-feat__ico svg{ width:28px; height:28px; } .yr-feat__tit{ font-size:1.85rem; font-weight:700; color:var(--ink); margin:0 0 8px; } .yr-feat__desc{ font-size:1.5rem; line-height:1.7; color:var(--body); word-break:keep-all; margin:0; } /* 스탯 스트립 */ .yr-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:#fff; } .yr-stat{ padding:34px 20px; text-align:center; position:relative; } .yr-stat + .yr-stat::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:52px; background:var(--line); } .yr-stat__num{ font-size:3.4rem; font-weight:800; line-height:1; color:var(--point); } .yr-stat__lab{ margin-top:12px; font-size:1.5rem; color:var(--muted); } /* 타임라인(연혁) */ .yr-timeline{ position:relative; max-width:920px; margin:0 auto; padding-left:0; } .yr-timeline::before{ content:""; position:absolute; left:calc(20% - 1px); top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--point),var(--accent),transparent); } .yr-tl{ position:relative; display:grid; grid-template-columns:20% 1fr; gap:34px; padding-bottom:34px; } .yr-tl:last-child{ padding-bottom:0; } .yr-tl__year{ text-align:right; font-size:2.2rem; font-weight:800; color:var(--point); line-height:1.1; } .yr-tl__body{ position:relative; padding-left:34px; } .yr-tl__body::before{ content:""; position:absolute; left:-7px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--point); box-shadow:0 0 0 4px rgba(15,163,181,.18); } .yr-tl__card{ background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:22px 26px; box-shadow:0 18px 44px -30px rgba(16,60,70,.4); } .yr-tl__row{ font-size:1.6rem; line-height:1.7; color:var(--body); } .yr-tl__row + .yr-tl__row{ margin-top:6px; } .yr-tl__row b{ color:var(--point-2); font-weight:700; margin-right:8px; } @media (max-width:1024px){ .yr-head__tit{ font-size:2.6rem; } .yr-hero__tit{ font-size:2.6rem; } .yr-vision__tit{ font-size:2.6rem; } .yr-section{ margin-top:72px; } .yr-cards,.yr-cards--4,.yr-steps,.yr-steps--4{ grid-template-columns:repeat(2,1fr); } .yr-split{ grid-template-columns:1fr; gap:26px; } .yr-split--flip .yr-split__media{ order:0; } .yr-stats{ grid-template-columns:repeat(2,1fr); } .yr-stat:nth-child(3)::before,.yr-stat:nth-child(2n+1)::before{ display:none; } } @media (max-width:640px){ .yr-head__tit{ font-size:2.3rem; } .yr-hero{ padding:52px 24px; } .yr-hero__tit{ font-size:2.2rem; } .yr-vision{ padding:40px 20px; } .yr-vision__tit{ font-size:2.1rem; } .yr-vision::before,.yr-vision::after{ width:26px; height:26px; } .yr-cards,.yr-cards--2,.yr-cards--4,.yr-steps,.yr-steps--4{ grid-template-columns:1fr; } .yr-feats{ grid-template-columns:1fr; } .yr-step__pill{ display:inline-flex; } .yr-step__arrow{ display:none; } .yr-timeline::before{ left:7px; } .yr-tl{ grid-template-columns:1fr; gap:6px; } .yr-tl__year{ text-align:left; padding-left:34px; } .yr-tl__body{ padding-left:34px; } .yr-tl__body::before{ left:0; } .yr-stats{ grid-template-columns:1fr; } .yr-stat + .yr-stat::before{ display:none; } .yr-stat{ border-top:1px solid var(--line); } } /* ============================================================ PD-PAGE — 제품 상세(The Ordinary 무드: 여백·얇은 구분선·미니멀) · 제품 상세
스코프. 페이지별 중복