@charset "utf-8";
/* 모바일 회사소개 (m/company/greeting2.php) - 모바일 디자인(가로 600px) 기준, 화면 폭에 맞춰 비율로 줄어듦 */

/* --px : 디자인 1px 이 화면에서 차지하는 길이 (600px 이상은 1px), --c : 선택하는 이유 카드용 (좌우 16px 여백 확보) */
.grm { --px:min(1px, calc(100vw / 600)); --c:min(1px, calc((100vw - 32px) / 479)); font-family:'Pretendard', 'Pretendard-Regular', sans-serif; color:#333; word-break:keep-all; overflow:hidden; }
.grm *, .grm *::before, .grm *::after { box-sizing:border-box; }
:where(.grm) :where(h2, h3, p, ul, li) { margin:0; padding:0; list-style:none; font-weight:inherit; } /* 우선순위 0 : 아래 개별 여백이 적용되도록 */
.grm img { display:block; max-width:none; }

.grm-label { font-size:max(12px, calc(13 * var(--px))); font-weight:700; line-height:1; color:#EC5051; }
.grm-title { margin-top:calc(10 * var(--px)); font-size:max(22px, calc(32 * var(--px))); font-weight:700; line-height:1.35; color:#333; letter-spacing:-0.5px; }
.grm-txt { font-size:max(14px, calc(16.5 * var(--px))); line-height:1.5; color:#555; }
.grm .c-red { color:#EC5051; }
@media (max-width:539px) { .grm br.w { display:none; } } /* 디자인 줄바꿈은 넓은 화면에서만 */

/* 점 목록 */
.grm-dot li { position:relative; padding-left:12px; font-size:max(13px, calc(15.5 * var(--px))); line-height:1.55; color:#333; }
.grm-dot li::before { content:''; position:absolute; left:2px; top:0.7em; width:4px; height:4px; border-radius:50%; background:#EC5051; }

/* 등장 애니메이션 (스크립트가 .ani-ready 를 붙인 뒤에만 숨김 → 스크립트 오류 시에도 내용 표시) */
.grm.ani-ready [data-ani] { opacity:0; transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s); }
.grm.ani-ready [data-ani="up"]    { transform:translateY(40px); }
.grm.ani-ready [data-ani="down"]  { transform:translateY(-40px); }
.grm.ani-ready [data-ani="right"] { transform:translateX(120px); }
.grm.ani-ready [data-ani].on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
    .grm.ani-ready [data-ani] { opacity:1; transform:none; transition:none; }
}

/* 0. 동영상 */
.grm-hero { position:relative; padding-top:56.25%; background:#000; }
.grm-hero iframe { position:absolute; left:0; top:0; width:100%; height:100%; border:0; }

/* 1. 회사개요 */
.grm-overview { background:#F5F5F5; padding:calc(97 * var(--px)) 0 calc(54 * var(--px)); text-align:center; }
.grm-head { padding:0 max(16px, calc(30 * var(--px))); }
.grm-overview .grm-txt { margin-top:calc(30 * var(--px)); font-size:max(14px, calc(17.5 * var(--px))); line-height:1.4; color:#444; }
.grm-overview .grm-txt + .grm-txt { margin-top:calc(22 * var(--px)); }
.grm-svc { margin:calc(80 * var(--px)) max(16px, calc(35 * var(--px))) 0; text-align:left; }
.grm-svc > li { display:flex; align-items:center; min-height:calc(226 * var(--px)); padding:calc(40 * var(--px)) calc(20 * var(--px)) calc(40 * var(--px)) 0; background:#fff; border-radius:max(10px, calc(14 * var(--px))); box-shadow:0 4px 16px rgba(0,0,0,0.04); }
.grm-svc > li + li { margin-top:calc(27 * var(--px)); }
.grm-svc .ico { flex:0 0 calc(196 * var(--px)); display:flex; justify-content:center; padding-right:calc(8 * var(--px)); }
.grm-svc .txt { flex:1; min-width:0; }
.grm-svc h3 { font-size:max(16px, calc(21 * var(--px))); font-weight:700; line-height:1.3; color:#333; }
.grm-svc .grm-dot { margin-top:calc(14 * var(--px)); }

/* 2. 선택하는 이유 */
.grm-core { background:#fff; padding:calc(97 * var(--px)) 0 calc(55 * var(--px)); text-align:center; }
.grm-core-grid { display:flex; justify-content:center; gap:calc(17 * var(--c)); margin-top:calc(64 * var(--px)); text-align:left; }
.grm-core-col { display:flex; flex-direction:column; gap:calc(17 * var(--c)); width:calc(231 * var(--c)); }
.grm-core-col.right { margin-top:calc(130 * var(--c)); }
.grm-cc { position:relative; min-height:calc(231 * var(--c)); padding:calc(32 * var(--c)) calc(14 * var(--c)) calc(20 * var(--c)) calc(31 * var(--c)); border-radius:calc(12 * var(--c)); overflow:hidden; }
.grm-cc.tall { min-height:calc(479 * var(--c)); padding-top:calc(56 * var(--c)); }
.grm-cc.cc-yellow { background:#FFCC00; color:#fff; }
.grm-cc.cc-red { background:#EC5050; color:#fff; }
.grm-cc.cc-pink { background:#FDEDED; color:#333; }
.grm-cc .s { font-size:max(11.5px, calc(16 * var(--c))); line-height:1.55; }
.grm-cc .b { margin-top:calc(2 * var(--c)); font-size:max(14px, calc(21 * var(--c))); font-weight:700; line-height:1.15; }
.grm-cc.cc-yellow .b { margin-top:calc(6 * var(--c)); font-size:max(17px, calc(27 * var(--c))); line-height:1.15; }
.grm-cc .ico { position:absolute; }
.grm-cc .list { margin-top:calc(16 * var(--c)); }
.grm-cc .list li { position:relative; padding-left:calc(12 * var(--c)); font-size:max(11.5px, calc(16 * var(--c))); font-weight:700; line-height:1.56; }
.grm-cc .list li::before { content:''; position:absolute; left:0; top:0.72em; width:3px; height:3px; border-radius:50%; background:#FFD43B; }
.grm-cc.visit { padding-top:calc(76 * var(--c)); }
.grm-cc .visit-num { display:inline-block; margin-top:calc(8 * var(--c)); text-align:center; color:#FFE45C; }
.grm-cc .visit-num strong { font-size:max(26px, calc(44 * var(--c))); font-weight:700; line-height:1; letter-spacing:-1px; }
.grm-cc .visit-num small { margin-left:2px; font-size:max(14px, calc(21 * var(--c))); font-weight:600; }
.grm-cc .visit-num p { margin-top:calc(8 * var(--c)); font-size:max(11px, calc(15 * var(--c))); }

/* 3. 사회공헌 */
.grm-social { background:#F4F4F4; padding:calc(97 * var(--px)) max(16px, calc(35 * var(--px))) calc(118 * var(--px)); }
.grm-social .grm-title { margin-top:calc(14 * var(--px)); }
.grm-social .grm-txt { margin-top:calc(26 * var(--px)); font-size:max(14px, calc(15 * var(--px))); line-height:1.58; color:#444; }
.grm-social-item { margin-top:calc(84 * var(--px)); }
.grm-social-item + .grm-social-item { margin-top:calc(76 * var(--px)); }
.grm-social-item .no { font-size:max(17px, calc(21 * var(--px))); font-weight:700; line-height:1; color:#EC5051; }
.grm-social-item h3 { margin-top:calc(20 * var(--px)); font-size:max(20px, calc(26 * var(--px))); font-weight:700; line-height:1.3; color:#333; }
.grm-social-item .line { width:calc(48 * var(--px)); min-width:32px; height:2px; margin-top:calc(22 * var(--px)); background:#333; }
.grm-social-item .desc { margin-top:calc(22 * var(--px)); font-size:max(14px, calc(17 * var(--px))); line-height:1.6; color:#888; }
.grm-social-item .desc b { font-weight:700; color:#555; }
.grm-social-item .photo { margin-top:calc(26 * var(--px)); border-radius:max(10px, calc(12 * var(--px))); overflow:hidden; }
.grm-social-item .photo img { width:100%; height:auto; }

/* 4. 비전 */
.grm-vision { position:relative; padding-top:calc(99 * var(--px)); background:#fff url(https://jejussok.com/company/img/greeting2/vision_bg_m.jpg) no-repeat 0 0 / 100% auto; overflow:hidden; }
.grm-vision-head { position:relative; z-index:2; padding:0 max(16px, calc(27 * var(--px))); }
.grm-vision-head .grm-title { margin-top:calc(20 * var(--px)); line-height:1.5; }
.grm-vision-head .grm-txt { margin-top:calc(28 * var(--px)); font-size:max(14px, calc(18.5 * var(--px))); line-height:1.35; color:#333; }
.grm-vision-items { position:relative; height:calc(621 * var(--px)); min-height:340px; margin-top:calc(110 * var(--px)); }
.grm-vision-items .circle { position:absolute; aspect-ratio:1; border-radius:50%; background:rgba(236,80,81,0.1); }
.grm-vision-items .text { position:absolute; z-index:2; width:0; display:flex; justify-content:center; }
.grm-vision-items .in { flex:none; text-align:center; white-space:nowrap; }
.grm-vision-items h3 { font-size:max(15px, calc(20 * var(--px))); font-weight:700; line-height:1.3; color:#EC5051; }
.grm-vision-items .desc { margin-top:calc(10 * var(--px)); font-size:max(11.5px, calc(13 * var(--px))); line-height:1.3; color:#333; }
.grm-vision-items ul { margin-top:calc(12 * var(--px)); }
.grm-vision-items li { font-size:max(11.5px, calc(13 * var(--px))); line-height:1.3; color:#777; }
.grm-vision-items li + li::before { content:'•'; display:block; font-size:max(10px, calc(12 * var(--px))); line-height:1.3; color:#666; }

/* 5. 앱 */
.grm-app { padding:calc(97 * var(--px)) 0 calc(58 * var(--px)); background:#EC5051; color:#fff; overflow:hidden; }
.grm-app-text { padding:0 max(16px, calc(35 * var(--px))); }
.grm-app-text .s { font-size:max(13px, calc(19 * var(--px))); line-height:1.35; }
.grm-app-text h2 { margin-top:calc(12 * var(--px)); font-size:max(22px, calc(32 * var(--px))); font-weight:700; line-height:1.3; }
.grm-app-text .sub { margin-top:calc(38 * var(--px)); font-size:max(15px, calc(18.5 * var(--px))); font-weight:700; line-height:1.35; }
.grm-app-text .feat { margin-top:calc(15 * var(--px)); }
.grm-app-text .feat li { position:relative; padding-left:max(12px, calc(16 * var(--px))); font-size:max(14px, calc(18.5 * var(--px))); line-height:1.68; }
.grm-app-text .feat li::before { content:''; position:absolute; left:0; top:0.75em; width:5px; height:5px; border-radius:50%; background:#FFD43B; }
.grm-app-text .cta { margin-top:calc(16 * var(--px)); font-size:max(15px, calc(19 * var(--px))); line-height:1.4; }
.grm-app-phone { width:97.3%; margin:calc(74 * var(--px)) auto 0; }
.grm-app-phone img { width:100%; height:auto; }
.grm-app-shots { display:flex; justify-content:center; gap:calc(22 * var(--px)); margin-top:calc(76 * var(--px)); }
.grm-app-shots li { width:calc(155 * var(--px)); text-align:center; }
.grm-app-shots .shot { height:calc(307 * var(--px)); border-radius:max(6px, calc(10 * var(--px))); overflow:hidden; background:#fff; }
.grm-app-shots .shot img { width:100%; height:auto; }
.grm-app-shots p { margin-top:calc(7 * var(--px)); font-size:max(12px, calc(17 * var(--px))); line-height:1.3; white-space:nowrap; }

/* 6. 마무리 */
.grm-future { position:relative; min-height:calc(911 * var(--px)); padding-bottom:calc(40 * var(--px)); background:#6A9DB6 no-repeat center top / cover; color:#fff; text-align:center; }
.grm-future-head { padding:calc(94 * var(--px)) max(16px, calc(30 * var(--px))) 0; }
.grm-future-head .grm-label { font-size:max(12px, calc(13.5 * var(--px))); color:#F7F04A; }
.grm-future-head h2 { margin-top:calc(8 * var(--px)); font-size:max(19px, calc(26 * var(--px))); font-weight:700; line-height:1.25; }
.grm-future-head .sub { margin-top:calc(2 * var(--px)); font-size:max(13px, calc(15 * var(--px))); line-height:1.5; }
.grm-future-logo { width:max(28px, calc(36 * var(--px))); margin:calc(36 * var(--px)) auto 0; }
.grm-future-logo svg { display:block; width:100%; height:auto; }
.grm-future-contact { position:absolute; left:max(16px, calc(35 * var(--px))); bottom:calc(28 * var(--px)); text-align:left; }
.grm-future-contact li { display:flex; align-items:center; gap:max(12px, calc(18 * var(--px))); height:max(40px, calc(55.5 * var(--px))); font-size:max(14px, calc(15.5 * var(--px))); }
.grm-future-contact .ci { display:flex; align-items:center; justify-content:center; flex:none; width:max(30px, calc(35 * var(--px))); height:max(30px, calc(35 * var(--px))); border:2px solid #fff; border-radius:50%; font-size:max(14px, calc(17 * var(--px))); }
.grm-future-contact a { color:#fff; text-decoration:none; }