@charset "UTF-8";

/* ===================================
   52시간 근무제 페이지 전용 스타일
   =================================== */

/* 폼 보더 라인 움직이는 효과 */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes leadformBorderRotate {
  to { --border-angle: 360deg; }
}

.area_uncomfortable .title_wrap h2 .mo_br {display: none;}
.title_wrap {margin-bottom: 44px;}

/* 기능 네비게이션 */
.area_navigation {padding: 120px 0 120px 0; width: 100%; background-color: #FAFAFA;}
.area_navigation .inner {margin: 0 auto;}
.area_navigation .title_wrap img {display: flex; align-items: center; margin: 0 auto 12px; max-width: 102px; width: 100%;}
.area_navigation .navigation_wrap {display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: flex-start; max-width: 1200px; width: 100%; padding: 16px 0; margin: auto;}
.area_navigation .navigation_wrap .card {position:relative; display: flex; flex: 1 1 calc(33.333% - 20px); align-items: center; height: 150px; width: 100%; padding: 32px; border: 2px solid #E9E9E9; background-color: #ffffff; border-radius: 20px; box-sizing: border-box;}
.area_navigation .navigation_wrap .card:hover {border: 2px solid #BFA6FF; box-shadow: 0 0 15px rgba(0,0,0,0.1); cursor: pointer; transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;}
.area_navigation .navigation_wrap .card .title {display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: auto;}
.area_navigation .navigation_wrap .card .title p {font-size: 22px; font-weight: 400; padding-top: 0; color: #333;}

/* 네비게이션 아이콘 */
.area_navigation .ic_industry {display: inline-block; width:32px; height:32px; background:url(../images/52hour-workweek/ic_industry.svg); background-repeat:no-repeat;}
.area_navigation .ic_industry.arrow {position: absolute; top: 20px; right: 20px; background-position: -372px -32px;}
.card:hover .ic_industry.arrow {background-position: -372px -92px; transition: transform 0.3s ease;}
.area_navigation .ic_industry.attendance {background-position: -14px -34px;}
.area_navigation .ic_industry.vacation {background-position: -74px -34px;}
.area_navigation .ic_industry.money {background-position: -134px -34px;}
.area_navigation .ic_industry.contract {background-position: -194px -34px;}
.area_navigation .ic_industry.messenger {background-position: -254px -34px;}
.area_navigation .ic_industry.sign {background-position: -314px -34px;}
.area_navigation .ic_industry.legal {background-position: -14px -94px;}
.area_navigation .ic_industry.setting {background-position: -74px -94px;}
.area_navigation .ic_industry.secure {background-position: -134px -94px;}


/* ==========================================
   반응형
   ========================================== */

@media all and (max-width: 959px) {

  /* 네비게이션 숨김 */
  .area_navigation {display: none;}

  /* 리드 폼 */
  .hr-landing .area_downloadforms {padding: 60px 6%; flex-direction: column; gap: 40px;}
  .hr-landing .area_downloadforms .forms {width: 100%;}
  .hr-landing .area_downloadforms .forms h2 {font-size: 48px;}
  .hr-landing .area_downloadforms .forms .desc {font-size: 18px !important;}
  .hr-landing .area_downloadforms .leadform {min-width: 0; width: 100%; flex: none;}

}

@media all and (max-width: 768px) {
  /* 불편함 타이틀 첫 줄 숨김 및 모바일 줄바꿈 */
   .area_uncomfortable .title_wrap h2 .pc_title {display: none;}
   .area_uncomfortable .title_wrap h2 .mo_br {display: inline;}

  /* 불편함 타이틀-카드 여백 */
   .area_uncomfortable .title_wrap {margin-bottom: 24px;}

  /* 불편함 카드 아이콘 숨김 */
   .area_uncomfortable .card_wrap img {display: none;}

  /* 불편함 카드 뱃지 */
   .area_uncomfortable .card_wrap .badge {font-size: 12px;}

  /* 리드 폼 */
   .hr-landing .area_downloadforms .forms h2 {font-size: 28px;}
   .hr-landing .area_downloadforms .forms .desc {font-size: 16px !important;}
   .hr-landing .section_leadform {padding: 0;}

}

@media all and (max-width: 480px) {
  /* 불편함 */
   .area_uncomfortable {padding: 50px 0 60px;}
  /* 리드 폼 */
   .hr-landing .area_downloadforms {padding: 50px 6%;}
   .hr-landing .area_downloadforms .forms h2 {font-size: 28px;}
   .hr-landing .area_downloadforms .leadform {padding: 28px 20px 36px;}
}