@charset "UTF-8";

/* --- fuction 공통 정의 --- */
.inner {max-width: 1200px; width: 100%; margin: 0 auto;}

/* 1. 주요기능 폰트 색상 재정의 */
h1 {color: #fff;}  
h2 {color: #fff; font-weight: 400;}
h3 {color: #fff; font-size: 28px; font-weight: 500;}
span.sub {color: #fff;}
p.point {color: #49B5C9;}
p.desc {color: rgba(255, 255, 255, 0.5); text-align: left;}
p.tit {color: #DEDEE6;}
p.des {color: #86868B;}
.highlight { background: linear-gradient(to right, #7CF5FF, #5D88FF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.area_comparison h1,
.area_comparison h2,
.area_comparison h3 {color: #212121; font-weight: 500;}
.area_comparison p.desc {color: #888888}


/* 2. 배경 색상 정의 */
body {background-color: #1B1B1B;}

/* 3. 버튼 색상 재정의 */
.btn_wrap .btn_general {background: #FFF; color: #1B1B1B;}
.btn_wrap .btn_ghost {background: #1B1B1B; border: 1px solid #ebebeb; color: #fff;}
.btn_wrap .btn_general:hover {background: #eaf7f9;}
.btn_wrap .btn_ghost:hover {background: #313131; border:1px solid #FFF;}

/* 5. 탭 및 버튼 스타일 */
.function .title_wrap .tab_default .tablink:hover, .function .title_wrap .tab_default .tablink.active {color:#fff; border-bottom:3px solid #fff;}
.function .btn_link {color: rgba(255, 255, 255, 0.7);}

/* 6.푸터 스타일 */
.function .content_foot {background: linear-gradient(to bottom right, #9ADFF8, #A8DEFF, #E8F5FF); color: #fff;}

/* --- 엔터프라이즈 콘텐츠 시작 --- */
/* 인트로 */
.function .area_intro {padding: 150px 0 130px 0;}
.function .area_intro .title {display: flex; flex-direction: column; align-items: flex-start; gap: 8px;}
.function .area_intro .title_wrap {width:100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: auto;}
.function .area_intro .btn_wrap_link {margin:0 ; align-self: flex-start;}
.function .area_intro .box .title {display:flex; flex-direction: row; align-items: center; gap: 4px;}
.function .area_intro .cont_wrap {gap: 40px; border: 0; display: grid; gap: 20px;}
.function .area_intro .cont_wrap .box {padding: 36px; border-radius: 24px; width: 100%; min-height: 246px; width: 100%;}
.function .area_intro .cont_wrap .box.sub {padding: 32px 36px; background: #2b2b2d; min-height: 160px; gap: 14px;}
.function .area_intro .cont_wrap .box_cont {height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;}
.function .area_intro .cont_wrap .box_grid.top {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;}
.function .area_intro .cont_wrap .box_grid.bottom {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;}
.function .area_intro .cont_wrap .box_grid.right {display: grid; gap: 20px;}
.function .area_intro .cont_wrap .box.work {background:linear-gradient(to bottom,#22aec7,#bbbbbb )}
.function .area_intro .cont_wrap .box.hr {background:linear-gradient(to bottom,#715AC9,#bbbbbb)}
.function .area_intro .cont_wrap .box.payroll {background:linear-gradient(to bottom,#32C032,#bbbbbb)}
.function .area_intro .cont_wrap .box .title_wrap img {width: 40px; height: 40px;}
.function .area_intro .cont_wrap .box p.desc {color: rgba(255, 255, 255, 0.6);}

/* 주요 기능 */
.function .area_function {padding: 72px 0 130px 0; margin: 0 auto;}
.function .area_function .inner {display: flex; flex-direction: column; gap: 24px;}
.function .area_function .tab_content {width: 100%; max-width: 1200px; box-sizing: border-box;}
.function .area_function .box_thumb {width: 100%; display: flex; flex-direction: column; align-items: center; background-color: #272729; border-radius: 24px; border: 1px solid #2E2E2E;}
.function .area_function .tab_content .box_thumb.row {width: 100%; max-width: 1200px; margin: 0 1px; display: flex; flex-direction: row; align-items: stretch; padding: 1px; background: linear-gradient(to bottom, #7CF5FF, #5DA9FF); border-radius: 24px; min-height: 242px; box-sizing: border-box;}
.function .area_function .box_thumb.row img {width: 100%; max-width: 600px; flex: 0 0 auto; height: auto; object-fit: contain; display: block; background-color: #2A2A2D; border-radius: 0 23px 23px 0;}
.function .area_function .box_thumb.row .box_text {padding: 66px; width: 100%; margin: 0 auto; flex: 1 1 auto; background-color: #2A2A2D; border-radius: 23px 0 0 23px;}
.function .area_function .box_text {padding: 40px 72px; flex: 1 1 0; display: flex; flex-direction: column; gap: 24px; width: 100%;}
.function .area_function .box_text h3 {font-size: 26px;}
.function .area_function .inner .title_wrap {margin-bottom: 0px;}

/*보안 인증*/
.function .area_mark {padding: 84px 0 130px 0; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; background-color: #0E0E11;}
.function .area_mark .inner .title_wrap {display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 0px;}
.function .area_mark img {height: 111px; width: 114px;}
.function .area_mark p {font-size: 18px; font-weight: 400; line-height: 140%; text-align: center; color: #969696;}
.function .area_mark .tag_wrap {display: flex; flex-direction: row; gap: 24px; width: 100%; max-width: 1200px; margin: 0 auto; justify-content: center; flex-wrap: wrap;}
.function .area_mark .tag_wrap .tag_list {display: flex; flex-direction: row; gap: 8px; justify-content: center; flex-wrap: wrap; margin: auto 0; align-items: center;  }
.function .area_mark .tag {padding: 2px 8px; background: #A5A5A5; border-radius: 4px; display: flex; align-items: center; justify-content: center;}

/*서비스 및 레퍼런스*/
.function .area_support {padding: 150px 0 130px 0; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center;}
.function .area_support .feature_item p {font-size: 18px; color: #979797; margin-top: auto; height: 100%;}
.function .feature_item .icon {margin-bottom: 24px; display: flex; justify-content: center; align-items: center; height: 40px;}
.function .feature_list {height: auto; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; align-items: stretch;}
.function .feature_item {display: flex; flex-direction: column; justify-content: space-between; background-color: #2b2b2d; border-radius: 24px; padding: 40px 32px; text-align: center; flex: 1 1 calc(25% - 18px); min-width: 260px;}
.function .feature_item .icon {margin-bottom: 24px; display: flex; justify-content: center; align-items: center; height: 40px;}
.function .feature_item .icon img {width: 40px; height: 40px;}
.function .feature_item h3 {font-size: 26px; margin-bottom: 6px; letter-spacing: 0px;}

.function .area_reference {padding: 100px 0 230px 0; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center;}
.function .area_reference .feature_item {gap: 32px;}
.function .area_reference .icon {margin-bottom: 0px; height: 64px;}
.function .area_reference .icon img {width: 64px; height: 64px;}
.function .area_reference .feature_item {height: auto; text-align: left; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 40px; flex: 1 1 calc(25% - 18px);}
.function .area_reference .feature_item .info {display: flex; flex-direction: row; gap: 8px; width: 100%; align-items: center; margin-top: auto;}
.function .area_reference .feature_item .info h3 {margin-bottom: 0px;}
.function .area_reference .feature_item .desc {flex-grow: 1;}
.function .area_reference .feature_item .divider {color:#686868; font-size: 24px; font-weight: 300;}

/*가격 비교*/
.area_comparison {padding:150px 0 210px 0; background:linear-gradient(to top, #DBF8FF, #FFF, #FFF, #FFF);}
.area_comparison .table_wrap {border:1px solid #EDEDED; border-radius: 24px; background-color: #fff; overflow: hidden;}
.area_comparison .tb_price th.m1 {padding:12px; background-color:#0DB6FF;}
.area_comparison .tb_price th.m2 {padding:12px; background:#8F8F8F;}
.area_comparison .tb_price .name th {text-align: center;}
.area_comparison .bold {font-weight:600;}
.area_comparison .gray {color:#666666; font-size:16px; font-weight:600;}
.area_comparison .mint {color:#0DB6FF; font-size:16px; font-weight:600;}
.area_comparison .tb_price .name th .desc {color:#888; font-size:14px; text-align:center; margin-top:8px;}
.area_comparison .tb_price thead tr:first-child th:first-child {background-color:#F5F6F8;}

.area_comparison .tb_price tr.name th {padding:12px 0 12px 0;}
.area_comparison .tb_price th, .price .tb_price td {position:relative; box-sizing:border-box;}
.area_comparison .tb_price h3 {font-size:18px; color:#fff;}
.area_comparison .tb_price thead th.m2 .subtit,
.area_comparison .tb_price thead th.m3 .subtit {top:-33px;}
.area_comparison .tb_price thead th .subtit {display:block; position:absolute; left:0; height:32px; line-height:32px; font-size:14px; text-align:center; color:#fff;}
.area_comparison .tb_price tbody td {text-align:center;}
.area_comparison .tb_price tbody th,
.area_comparison .tb_price tbody td {padding:15px 0 15px 15px; text-align:center;}
.area_comparison .tb_price th, .price .tb_price td {position:relative; box-sizing:border-box; border-right:1px solid #eee;}
.area_comparison .tb_price th.m2 {border:none;}
.area_comparison .label {background-color:#F5F6F8; padding:8px 0;}

.area_comparison .check {width:22px; height:22px; display:inline-block; background:url(../images/enterprise/ic_check.svg);}
.area_comparison .check.mint {background-position:0px 0px;}
.area_comparison .check.gray {background-position: -30px 0;}


@media (max-width: 959px) {
  /* 모바일 이미지 */
  img.pc {display: none !important;}
  img.mo {display: block !important;}

  /* 패딩 및 정렬*/
  .function .box {padding: 32px !important;}
  .function .area_intro .box .title h3 {display:flex; align-items: flex-start;}
  .function .area_intro .cont_wrap .box_grid.top {grid-template-columns: repeat(2, 1fr);}
  .function .area_intro .cont_wrap .box_grid.top > .box:last-child {grid-column: span 2;}
  
  /*보안 콘텐츠 정렬 조정*/
  .function .area_function .box_text {padding: 32px; gap: 16px;}
  .function .area_function .box_thumb.row .box_text {padding: 32px; border-radius: 0 0 24px 24px;}
  .function .area_function .tab_content .box_thumb.row {flex-direction: column-reverse;}
  .function .area_function .tab_content .box_thumb.row img {width: 100%; max-width: none; height: auto; border-radius: 24px 24px 0 0;}
}

@media (max-width: 768px) {
  .function .area_intro .cont_wrap .box_grid.top {grid-template-columns: 1fr;}
  .function .area_intro .cont_wrap .box_grid.top > .box:last-child {grid-column: auto;}
  .function .area_intro .cont_wrap .box_grid.bottom {grid-template-columns: 1fr;}
  .function .area_intro .box {min-height: 160px !important;}
  .function .area_function .box_text {padding: 24px}

  /*보안 인증 간격 및 정렬 조정*/
  .function .area_mark .tag_wrap {display: flex; flex-direction: column; margin-top: 24px; gap: 12px;}
}

@media (max-width: 480px) {
  /* 폰트 재정의 */
  h1 {color: #fff;}  
  h2 {color: #fff; text-align: left;}
  h3 {font-size: 20px !important; color: #fff; }
  span.sub {color: #fff;}
  p.point {color: #1EC6DF;}
  p.desc {color: rgba(255, 255, 255, 0.5); text-align: left;}
  p.tit {color: #DEDEE6;}
  p.des {color: #86868B;}

  /*보안 인증 간격 및 정렬 조정*/
  .function .area_mark .tag_wrap {align-items: flex-start;}
  .function .area_mark .inner .title_wrap {align-items: flex-start;}
  .function .area_mark .inner .title_wrap p {text-align: left;}

  /*가격비교 모바일*/
  .area_comparison h3 {font-size: 14px !important;}
  .area_comparison .tb_price th,
  .area_comparison .tb_price td {font-size: 14px; padding:12px !important; vertical-align: middle;}
  .area_comparison .table_wrap {border-radius: 16px;}  .area_comparison .gray,
  .area_comparison .mint {font-size: 14px;}
}