@charset "UTF-8";

/* =========================================
   제조업 랜딩 페이지
   ========================================= */


/* --- 공통 --- */
/* common_new.css 의 .content {padding-top:80px} 해제 — 상단 여백은 content_head 에서만 준다 */
.content.industry {padding-top: 0 !important;}
.industry img {max-width: 100%; height: auto;}


/* --- content_head : 상단 비주얼 --- */
.industry .content_head {padding: 90px 0 120px !important; margin: 0 auto; width: 100%; text-align: center;}
.industry .content_head .title_wrap {display: flex; flex-direction: column; align-items: center; width: 100%;}
.industry .content_head .main_title {display: flex; flex-direction: column; align-items: center; gap: 24px !important; width: 100%;}

/* 업종 라벨 */
.industry .content_head .label {display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; font-weight: 500; line-height: 140%; letter-spacing: -0.04em; color: #4E7CE4; padding-top: 0;}
.industry .content_head .label .ic_industry {display: inline-block; width: 32px; height: 32px; background: no-repeat center/contain;}
/* 업종별 아이콘 */
.industry.manufacturing .content_head .label .ic_industry {background-image: url(../images/industry/ic_factory.png);}
.industry.hospitality .content_head .label .ic_industry {background-image: url(../images/industry/ic_hotel.png);}

/* 타이틀 */
.industry .content_head h1 {display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; font-size: 64px; font-weight: 500; line-height: 140%; letter-spacing: -0.04em; color: #333; word-break: keep-all;}
.industry .content_head h1 .sub {font-size: 48px; font-weight: 300; line-height: 140%; letter-spacing: -0.04em; color: #333;}

/* 버튼 */
.industry .content_head .btn_wrap {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 44px 0 0 !important;}
.industry .content_head .btn_wrap .btn_general,
.industry .content_head .btn_wrap .btn_ghost {display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 28px; border-radius: 42px; font-size: 20px; font-weight: 600; line-height: 150%; letter-spacing: -0.04em; white-space: nowrap;}
.industry .content_head .btn_wrap .btn_general {background-color: #262626; border: 1.5px solid #262626; color: #fff;}
.industry .content_head .btn_wrap .btn_general:hover {background-color: #3D3D3D; border-color: #3D3D3D;}
.industry .content_head .btn_wrap .btn_ghost {background-color: #fff; border: 1.5px solid #6175F7; color: #6175F7;}
.industry .content_head .btn_wrap .btn_ghost:hover {background-color: #EAF1FD;}
.industry .content_head .btn_wrap .ic_cta {display: block; width: 24px; height: 24px; background: no-repeat center/contain;}
.industry .content_head .btn_wrap .ic_check {background-image: url(../images/industry/ic_check.png);}
.industry .content_head .btn_wrap .ic_down {background-image: url(../images/industry/ic_down.png);}

/* 비주얼 이미지 */
.industry .content_head .visual_wrap {margin: 80px auto 0; width: 100%; max-width: 1200px;}
.industry .content_head .visual_wrap img {width: 100%;}
.industry .content_head .visual_wrap img.pc {display: block !important;}
.industry .content_head .visual_wrap img.mo {display: none !important;}


/* --- content_body --- */

/* 이런 불편함 */
.industry .area_problem {padding: 120px 0 140px; width: 100%; background-color: #F5F6F8;}
.industry .area_problem .inner {margin: 0 auto; width: 100%; max-width: 1200px;}
.industry .area_problem .title_wrap {margin-bottom: 60px; text-align: center;}
.industry .area_problem .title_wrap h2 {font-size: 42px; font-weight: 600; line-height: 150%; letter-spacing: -0.03em; color: #333; word-break: keep-all;}

/* 카드 */
.industry .area_problem .card_wrap {display: flex; align-items: stretch; gap: 16px;}
.industry .area_problem .card {display: flex; flex-direction: column; gap: 24px; flex: 1 1 0; min-width: 0; padding: 24px 32px 48px; border-radius: 24px; background-color: #fff;}
.industry .area_problem .card .badge {font-size: 16px; font-weight: 600; line-height: 150%; letter-spacing: -0.04em; color: #86AAFF; padding-top: 0;}
.industry .area_problem .card .txt_wrap {display: flex; flex-direction: column; gap: 4px; word-break: keep-all;}
.industry .area_problem .card .tit {font-size: 20px; font-weight: 600; line-height: 150%; letter-spacing: -0.04em; color: #333; padding-top: 0;}
.industry .area_problem .card .desc {font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: -0.04em; color: #333; padding-top: 0;}

/* 해결 배너 */


/* 시작 안내 배너 (전면 그라데이션) */
.industry .banner_solution {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; min-height: 323px; padding: 40px 6%; text-align: center; background: url(../images/industry/img_manifacturing_02.png) no-repeat center center/cover;}
.industry .banner_solution .ic_bulb {display: block; width: 52px; height: 52px; background: url(../images/industry/ic_lightbulb.png) no-repeat center/contain;}
.industry .banner_solution .tit {font-size: 36px; font-weight: 600; line-height: 134%; letter-spacing: -0.03em; color: #fff; padding-top: 0; word-break: keep-all;}
.industry .banner_solution .tit .ln1 {display: block; font-size: 32px; font-weight: 300;}
.industry .banner_solution .tit .ln2 {display: block;}


/* 기능 소개 (카드 3단 + 더보기 링크) */
.industry .area_function {padding: 140px 0 100px; width: 100%; background-color: #fff;}
.industry .area_function .inner {margin: 0 auto; width: 100%; max-width: 1200px;}
.industry .area_function .title_wrap {display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; text-align: left;}
.industry .area_function .title_wrap .caption {font-size: 18px; font-weight: 400; line-height: 140%; letter-spacing: -0.08em; color: #6175F7; padding-top: 0;}
.industry .area_function .title_wrap h2 {font-size: 42px; font-weight: 600; line-height: 140%; letter-spacing: -0.04em; color: #1B1B1B; text-align: left; word-break: keep-all;}
/* content.css 가 959px 이하에서 br.p 를 숨기므로 타이틀 줄바꿈은 되살린다 */
.industry .area_function .title_wrap h2 br.p {display: block;}

/* 카드 */
.industry .area_function .card_wrap {display: flex; align-items: stretch; gap: 24px;}
.industry .area_function .card {display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; border: 1px solid #EFEFF1; border-radius: 20px; overflow: hidden;}
.industry .area_function .card .txt_wrap {display: flex; flex-direction: column; gap: 8px; flex: 1 0 auto; padding: 40px 32px 32px; background-color: #F5F6F8; word-break: keep-all;}
.industry .area_function .card .tit {font-size: 22px; font-weight: 500; line-height: 120%; letter-spacing: -0.04em; color: #333; padding-top: 0;}
.industry .area_function .card .desc {font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: -0.04em; color: #8a8a8e; padding-top: 0;}
/* 이미지 영역은 제조업 기준 비율(384:232)로 고정 — 업종별 이미지 비율이 달라도 카드 높이가 같아진다 */
.industry .area_function .card .thumb {aspect-ratio: 384 / 232; overflow: hidden;}
.industry .area_function .card .thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;}
/* 메신저 · 전자결재 섹션 : 카드 배경만 블루 톤 */
.industry .area_function.blue .card .txt_wrap {background-color: #F1F4FF;}
.industry .area_function.blue .card .thumb {background-color: #F1F4FF;}

/* 더 알아보기 링크 */
.industry .area_function .link_more {display: inline-flex; align-items: center; gap: 8px; margin-top: 40px;}
.industry .area_function .link_more .ic_link {display: block; width: 24px; height: 24px; background: no-repeat center/contain;}
.industry .area_function .link_more .ic_attendance {background-image: url(../images/industry/ic_attendance.png);}
.industry .area_function .link_more .ic_message {background-image: url(../images/industry/ic_message.png);}
.industry .area_function .link_more .ic_payment {background-image: url(../images/industry/ic_payment.png);}
.industry .area_function .link_more .ic_contract {background-image: url(../images/industry/ic_contract.png);}
.industry .area_function .link_more .ic_law {background-image: url(../images/industry/ic_law.png);}
.industry .area_function .link_more .ic_vacation {background-image: url(../images/industry/ic_vacation.png);}
.industry .area_function .link_more .ic_calendar {background-image: url(../images/industry/ic_calendar.png);}
.industry .area_function .link_more .txt {min-width: 160px; font-size: 17px; font-weight: 500; line-height: 140%; letter-spacing: -0.04em; color: #333; white-space: nowrap;}
.industry .area_function .link_more .btn_arrow {display: block; width: 24px; height: 24px; border-radius: 999px; background: #555 url(../images/industry/ic_left_arrow.png) no-repeat center/14px 14px; transition: background-color 0.25s ease, transform 0.25s ease;}
.industry .area_function .link_more:hover .btn_arrow {background-color: #758BF6; transform: rotate(-45deg);}
.industry .area_function .link_wrap {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px;}
.industry .area_function .link_wrap .link_more {margin-top: 0;}

/* 기능 섹션이 연달아 올 때는 위아래 여백을 좁힌다 */
.industry .area_function + .area_function {padding: 80px 0 100px;}
/* 마지막 기능 섹션은 푸터 CTA 앞이라 아래 여백을 넓힌다 */
.industry .content_body .area_function:last-child {padding-bottom: 140px;}


/* --- 스크롤 진입 페이드업 : JS 가 .reveal 을 붙였을 때만 동작. 미실행 시 평상시 노출 --- */
.industry .reveal {opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);}
.industry .reveal.on {opacity: 1; transform: none;}

@media (prefers-reduced-motion: reduce) {
  .industry .reveal {opacity: 1; transform: none; transition: none;}
}


/* --- content_foot : 하단 CTA 배너 --- */
.industry .content_foot {padding: 80px 0 !important; width: 100%; text-align: center; background: url(../images/industry/img_bottom.png) no-repeat center center/cover;}
.industry .content_foot .inner {margin: 0 auto; width: 100%; max-width: 1200px;}

.industry .content_foot .title_wrap h2 {font-size: 48px; font-weight: 400; line-height: 140%; letter-spacing: -0.04em; color: #fff; text-align: center; word-break: keep-all;}
.industry .content_foot .title_wrap h2 .bold {font-weight: 600;}

/* 버튼 */
.industry .content_foot .btn_wrap {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 48px 0 0 !important;}
.industry .content_foot .btn_wrap .btn_general,
.industry .content_foot .btn_wrap .btn_ghost {display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 32px; border-radius: 32px; font-size: 20px; font-weight: 600; line-height: 150%; letter-spacing: -0.04em; white-space: nowrap;}
.industry .content_foot .btn_wrap .btn_general {background-color: #3E4CE6; border: 1px solid #3E4CE6; color: #fff; box-shadow: 0 7px 21px rgba(0, 0, 0, 0.08);}
.industry .content_foot .btn_wrap .btn_general:hover {background-color: #3341C9; border-color: #3341C9;}
.industry .content_foot .btn_wrap .btn_ghost {background-color: #fff; border: 1px solid #3E4CE6; color: #3E4CE6; box-shadow: 0 7px 21px rgba(0, 0, 0, 0.04);}
.industry .content_foot .btn_wrap .btn_ghost:hover {background-color: #EAF1FD;}
.industry .content_foot .btn_wrap .ic_cta {display: block; width: 24px; height: 24px; background: no-repeat center/contain;}
.industry .content_foot .btn_wrap .ic_gift {background-image: url(../images/industry/ic_gift.png);}
.industry .content_foot .btn_wrap .ic_smile {background-image: url(../images/industry/ic_smile.png);}


/* --- 반응형 --- */

@media (max-width: 959px) {
  .industry .content_head {padding: 60px 6% 80px !important;}
  .industry .content_head .label {font-size: 20px;}
  .industry .content_head .label .ic_industry {width: 28px; height: 28px;}
  .industry .content_head h1 {font-size: clamp(30px, calc(-4.08px + 7.1vw), 64px);}
  .industry .content_head h1 .sub {font-size: clamp(28px, calc(7.96px + 4.17vw), 48px);}
  .industry .content_head .btn_wrap {margin: 36px 0 0 !important;}
  .industry .content_head .visual_wrap {margin: 60px auto 0;}

  .industry .area_problem {padding: 80px 6% 90px;}
  .industry .area_problem .title_wrap {margin-bottom: 40px;}
  .industry .area_problem .title_wrap h2 {font-size: clamp(28px, calc(7.96px + 4.17vw), 52px);}
  .industry .area_problem .card_wrap {flex-direction: column; gap: 12px;}
  .industry .area_problem .card {flex: 0 0 auto; padding: 22px 24px 36px; gap: 18px;}

  .industry .banner_solution {min-height: 240px; gap: 14px; padding: 36px 6%;}
  .industry .banner_solution .ic_bulb {width: 44px; height: 44px;}
  .industry .banner_solution .tit {font-size: 28px;}
  .industry .banner_solution .tit .ln1 {font-size: 24px;}

  .industry .area_function {padding: 80px 6% 70px;}
  .industry .area_function + .area_function {padding: 50px 6%;}
  .industry .content_body .area_function:last-child {padding-bottom: 110px;}

  .industry .content_foot {padding: 80px 6% !important;}
  .industry .content_foot .title_wrap h2 {font-size: clamp(26px, calc(7.96px + 4.17vw), 48px);}
  .industry .content_foot .btn_wrap {margin: 36px 0 0 !important;}
  .industry .content_foot .btn_wrap .btn_general,
  .industry .content_foot .btn_wrap .btn_ghost {padding: 14px 26px; font-size: 18px;}
  .industry .area_function .link_wrap {margin-top: 32px;}
  .industry .area_function .title_wrap {margin-bottom: 32px;}
  .industry .area_function .title_wrap .caption {font-size: 16px;}
  .industry .area_function .title_wrap h2 {font-size: clamp(26px, calc(6px + 3.7vw), 42px);}
  .industry .area_function .card_wrap {gap: 16px;}
  .industry .area_function .card .txt_wrap {padding: 28px 20px 24px;}
  .industry .area_function .card .tit {font-size: 20px;}
  .industry .area_function .card .desc {font-size: 16px;}
  .industry .area_function .card .desc br.p {display: none;}
  .industry .area_function .link_more {margin-top: 32px;}
}

@media (max-width: 768px) {
  .industry .content_head {padding: 50px 6% 70px !important;}
  .industry .content_head .label {font-size: 18px;}
  .industry .content_head .label .ic_industry {width: 24px; height: 24px;}
  .industry .content_head .btn_wrap .btn_general,
  .industry .content_head .btn_wrap .btn_ghost {padding: 14px 22px; font-size: 16px;}
  .industry .content_head .btn_wrap .ic_cta {width: 20px; height: 20px;}
  .industry .content_head .visual_wrap {margin: 50px auto 0;}
  .industry .content_head .visual_wrap img.pc {display: none !important;}
  .industry .content_head .visual_wrap img.mo {display: block !important;}

  .industry .area_problem {padding: 70px 6% 80px;}
  .industry .banner_solution {min-height: 210px; padding: 32px 6%;}
  .industry .banner_solution .ic_bulb {width: 38px; height: 38px;}
  .industry .banner_solution .tit {font-size: 26px;}
  .industry .banner_solution .tit .ln1 {font-size: 20px;}
  .industry .area_problem .card .badge {font-size: 15px;}
  .industry .area_problem .card .tit {font-size: 17px;}
  .industry .area_problem .card .desc {font-size: 15px;}
  .industry .area_problem .card .desc br.p {display: none;}

  .industry .area_function {padding: 70px 6% 60px;}
  .industry .area_function + .area_function {padding: 45px 6%;}
  .industry .content_body .area_function:last-child {padding-bottom: 100px;}
  .industry .area_function .card_wrap {flex-direction: column; gap: 20px;}
  .industry .area_function .card {flex: 0 0 auto;}
  .industry .area_function .card .txt_wrap {flex: 0 0 auto; padding: 32px 28px 28px;}
  .industry .area_function .link_more .txt {min-width: 132px; font-size: 14px;}
  .industry .area_function .link_more .ic_link {width: 20px; height: 20px;}
  .industry .area_function .link_more .btn_arrow {width: 20px; height: 20px; background-size: 12px 12px;}

  .industry .content_foot {padding: 70px 6% !important;}
  .industry .content_foot .btn_wrap {gap: 12px; margin: 32px 0 0 !important;}
  .industry .content_foot .btn_wrap .btn_general,
  .industry .content_foot .btn_wrap .btn_ghost {padding: 13px 22px; font-size: 16px;}
  .industry .content_foot .btn_wrap .ic_cta {width: 20px; height: 20px;}
}

@media (max-width: 480px) {
  .industry .content_head {padding: 40px 6% 60px !important;}
  .industry .content_head .label {font-size: 16px; gap: 6px;}
  .industry .content_head .main_title {gap: 8px !important;}
  .industry .content_head .btn_wrap {gap: 8px; margin: 28px 0 0 !important;}
  .industry .content_head .btn_wrap .btn_general,
  .industry .content_head .btn_wrap .btn_ghost {padding: 13px 18px; font-size: 15px;}
  .industry .content_head .btn_wrap .ic_cta {width: 18px; height: 18px;}
  .industry .content_head .visual_wrap {margin: 40px auto 0;}

  .industry .area_problem {padding: 60px 6% 70px;}
  .industry .area_problem .title_wrap {margin-bottom: 32px;}
  .industry .area_problem .card {padding: 20px 20px 32px;}

  .industry .banner_solution {min-height: 180px; gap: 12px; padding: 28px 6%;}
  .industry .banner_solution .ic_bulb {width: 32px; height: 32px;}
  .industry .banner_solution .tit {font-size: 22px;}
  .industry .banner_solution .tit .ln1 {font-size: 17px;}

  .industry .area_function {padding: 60px 6% 50px;}
  .industry .area_function + .area_function {padding: 40px 6%;}
  .industry .content_body .area_function:last-child {padding-bottom: 90px;}
  .industry .content_foot .title_wrap h2 {font-size: clamp(18px, 5.5vw, 27px);}

  .industry .content_foot {padding: 60px 6% !important;}
  .industry .content_foot .btn_wrap {gap: 8px; margin: 28px 0 0 !important;}
  .industry .content_foot .btn_wrap .btn_general,
  .industry .content_foot .btn_wrap .btn_ghost {padding: 12px 18px; font-size: 15px;}
  .industry .area_function .link_wrap {margin-top: 28px; gap: 14px;}
  .industry .area_function .card .txt_wrap {padding: 28px 22px 24px;}
  .industry .area_function .card .tit {font-size: 18px;}
  .industry .area_function .card .desc {font-size: 15px;}
  .industry .area_function .link_more {margin-top: 28px;}
}