@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;}
h4 {color: #fff; font-size: 22px; font-weight: 400;}
span.sub {color: #fff;}
p.point {color: #49B5C9;}
.acs p.point {color: #F3B9FF}
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;}
.number.highlight { background: linear-gradient(to bottom,#7CF5FF, #5D88FF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hr.highlight { background: linear-gradient(to left,#fff3d1, #ae85ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.acs.highlight { background: linear-gradient(130deg, #FFF0C7 -40%, #EF92FF 100%); 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.enterprise {background: #FFF; color: #45464f;}
.btn_wrap .btn_ghost.enterprise {background: #1B1B1B; border: 1px solid #ebebeb; color: #fff;}
.btn_wrap .btn_general.enterprise:hover {background: #eaf7f9;}
.btn_wrap .btn_ghost.enterprise:hover {background: #313131; border:1px solid #FFF;}

.function .title_wrap.button {display: flex; justify-content: space-between; align-items: flex-end;}
.function .title_wrap.button .btn_wrap_link {margin:0 ;}
.function .title_wrap.button .btn_wrap_link a {font-size: 16px; color: #ffffff; font-weight: 400;}

/* 4. 태그 */
.enterprise.function .title_wrap .title .badge {background-color: #363341; color: #7CF5FF; font-weight: 500; padding: 4px 16px; border-radius: 8px;}
.enterprise.function.hr .title_wrap .title .badge {color: #B792FF;}
.enterprise.function.acs .title_wrap .title .badge {color: #EF92FF;}

/* 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.하단 푸터 */
.api .content_foot .main_title span.sub {color:#222;}
.api .content_foot .main_title h2 {color:#222; font-weight:600;}
.api .content_foot .btn_wrap .btn_general {background-color:#1b1b1b; color:#fff;}
.api .content_foot .btn_wrap .btn_general:hover {background-color:#555;}
.api .content_foot .btn_wrap .btn_ghost {padding-left: 30px; background: linear-gradient(#FFF) padding-box, linear-gradient(90deg, #02B6D7 0%, #9F1AFF 100%) border-box; border: 2px solid transparent; color: #5FAEFF; font-weight: 500;}

/* --- 엔터프라이즈 콘텐츠 시작 --- */

/* 메인타이틀 */
.enterprise.function .content_head .title_wrap .desc {margin-top: 12px; text-align: center;}

/* 롤링배너 영역 */
.enterprise.function .content_head {padding: 90px 0 40px 0;}
.enterprise.function .area_customer {padding: 32px 0;  border-bottom: 1px solid #333;}

/* 페이지 네비게이션 */
:root{
  --gnb-h: 80px;       /* GNB 높이 */
  --nav-h: 12px;       /* 너네 page_nav(또는 sticky 되는 상단 바) 높이 있으면 */
  --anchor-gap: 12px;  /* 살짝 여백 */
}
.sec[id^="sec-"]{ scroll-margin-top: calc(var(--gnb-h) + var(--nav-h) + var(--anchor-gap));}
.enterprise .area_function.nav {padding: 48px 0 28px;}
.enterprise .area_function .page_nav {display: flex; flex-direction: row; gap: 12px; justify-content: flex-start; padding: 20px 0 28px;}
.enterprise .area_function .page_nav a.active{background-color: #fff; color: #333; font-weight: 600;}
.enterprise .area_function .page_nav a {display: inline-block; padding: 10px 32px; font-size: 18px; font-weight: 300; color: #ffffff; background-color: #2E2E2E; border-radius: 16px;} 
.enterprise .area_function .page_nav a:hover {background-color: #4e4e4e;}

/* 비율 */
.enterprise .area_function.top {padding: 100px 0 130px;}
.enterprise .area_function .cont_wrap {display: flex; flex-direction: row; align-items: flex-start;}
.enterprise .area_function .cont_wrap .card {display: flex; flex-direction: column; max-width: 300px; width: 100%; padding: 8px 44px; border-right: 1px solid #7CF5FF;}
.enterprise .area_function .cont_wrap .card:last-child {border-right: none;}
.enterprise .area_function .cont_wrap .card p {font-size: 48px;}
.enterprise .area_function .cont_wrap .card span.tit {font-size: 18px; font-weight: 350; color: #fff;}
.enterprise .area_function .cont_wrap .card span.desc {font-size: 14px; font-weight: 300; color: #BDBDC9;}

/* 보더 컬러 */
.function.enterprise.hr .area_function .cont_wrap .card {border-color: #654f8c;}
.function.enterprise.acs .area_function .cont_wrap .card {border-color: #5C5C5C;}

/* 상단기능 오버뷰 */
.btn_wrap .btn_ghost.enterprise .ic_down {background: url(/images/ic_down_white.svg); width:24px !important; height: 24px !important; margin-right: 8px; top: 2px;}
.btn_wrap .btn_general.enterprise .ic_check.black {background: url(/images/ic_check_black.svg); width:24px !important; height: 24px !important; margin-right: 8px; top: 1px;}

.function .area_intro {padding: 72px 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.sub img {margin-bottom: 16px;}
.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_patent {background-color:#0E0E11; padding:110px 0 30px;}
.function .area_patent .cont_wrap {background-color:#2A2A2D; max-width:1200px; border-radius:20px; padding:60px 0; display:flex; justify-content:center; gap:140px;}
.function .area_patent .img_patent {width:82px; height:122px; display:inline-block; background: url(../images/main_new/2025/img_patent.png) 82px 0;}
.function .area_patent .img_patent:after {content:''; display:inline-block; position:relative; width:1px; height:100px; background-color:#616161; top:20px; left:152px;}
.function .area_patent .txt_box {display:flex; flex-direction:column;}
.function .area_patent .txt_box .sub {margin-top:0px; font-size:22px; color:#888; margin-top:4px;}
.function .area_patent .txt_box .box_tag {font-size:16px; display:flex; flex-direction:row; align-items:center; color:#888; gap:10px; margin-top:4px;}
.function .area_patent .txt_box .box_tag .tag {padding: 2px 8px; color:#333; background: #A5A5A5; border-radius: 4px; display: flex; align-items: center; justify-content: center;}

/* 연동 서비스, 방식, 데이터 이전 */
.function .area_function {padding: 72px 0 130px 0; margin: 0 auto; padding-inline:6%;}
.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: row; align-items: center; overflow: hidden; background-color: #272729; border-radius: 24px; border: 1px solid #2E2E2E;}
.function .area_function.security .box_thumb {width: 100%; display: flex; flex-direction: row; align-items: center; background-color: #272729; border-radius: 24px; border: 1px solid #2E2E2E;}
.enterprise.function .area_function .tab_content .box_thumb.row {width: 100%; max-width: 1200px; margin: 0 2px; 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: 62px; 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; flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 260px;}
.function .area_function .box_text h3 {font-size: 26px;}
.function .area_function .box_text p.desc {font-size: 16px; font-weight: 300; margin-bottom: 16px;}
.function .area_function .inner .title_wrap {margin-bottom: 0px;}
.function .area_function .btn_wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: left; margin-bottom: 16px; margin-top: 0px !important }
.function .area_function .btn_wrap a { padding: 3px 24px !important; min-width: 150px; max-height: 62px;}
.function .area_function .btn_wrap .btn_ghost {padding-left: 30px; background: linear-gradient(#1B1B1B) padding-box, linear-gradient(90deg, #7CF5FF 0%, #5D88FF 100%) border-box; border: 2px solid transparent; color: #fff; font-weight: 500;}
.function .area_function .btn_wrap .btn_ghost:hover {background: linear-gradient(#313131) padding-box, linear-gradient(90deg, #7CF5FF 0%, #5D88FF 100%) border-box;}
.function .area_function .btn_wrap .btn_ghost .ic_video {background: url(/images/ic_video_white.svg); width:24px !important; height: 24px !important; margin-right: 8px; top: 2px;}

/*보안 인증*/
.function.enterprise .area_function .tab_content .tablink .box_thumb img {border-radius: 0 23px 23px 0; border: none !important; width: 100%; height: -webkit-fill-available;}
.function.enterprise .area_function .tab_content .box_thumb.row {overflow: hidden;}
.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; padding-inline: 6%;}
.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: 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 .icon_detail {display: flex; justify-content: right; margin-top: 12px;}
.function .feature_item h3 {font-size: 26px; margin-bottom: 12px; letter-spacing: 0px;}

.function .area_reference {padding: 100px 0 160px 0; padding-inline:6%; 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;}


.api .area_intro .box {display:flex; gap:16px; background-color:#2b2b2d;}
.api .area_intro .box_grid {display:flex; gap:16px;}
.api .area_intro .cont_wrap .box {min-height:186px;}
.function .area_review_center .title_center h3 {color:#333;}

/* FAQ */
.enterprise .area_box {margin-top:80px; border-top:1px solid #8a8a8a; border-bottom:1px solid #8a8a8a;}
.enterprise .box_qna {border-bottom:1px solid #333; padding:24px 0;}
.enterprise .question p {font-weight: 350; color:#fff;}
.enterprise .box_qna .answer li {font-weight: 300;}
.enterprise .question .ic_detail {filter: brightness(0) invert(1);}

/* CTA */
.function.enterprise .content_foot { background-image: url(https://daouoffice.com/images/main_new/2025/function/img_footer_pc_01.png), linear-gradient(to bottom right, #006dcd, #4fa6da, #d2ecff);}
.function.enterprise .content_foot h2.center {text-align: center;}


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

  /* 패딩 및 정렬*/
  .function .box {padding: 32px !important;}
  .function .area_intro {padding-inline: 6%;}
  .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;}

  /* 비율 */
  .enterprise .area_function .cont_wrap {flex-direction: column; align-items: center;}
  .enterprise .area_function .cont_wrap .card { max-width: none; width: 100%;  padding: 24px 16px; border-right: 0; border-bottom: 1px solid #7CF5FF;}
  .enterprise .area_function .cont_wrap .card:last-child {border-bottom: none;}

  /* 연동 서비스, 방식, 데이터 이전 */
  .enterprise.function .area_function .title_wrap .title {width: 100%;}
  .enterprise.function .area_function .box_thumb {flex-direction: column;}

  /* 보안 */
  .function.enterprise .area_function .tab_content .tablink .box_thumb img {border-radius: 23px 23px 0 0; border: none !important;}
  .function.enterprise .area_function .tab_content .tablink .box_thumb img.normal {border-radius:0 !important;}
  .function.enterprise .area_function .tab_content .box_thumb.row {overflow: hidden;}
  .function.enterprise .area_function.security .inner {padding: 0;}

  /*보안 콘텐츠 정렬 조정*/
  .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;}
  .enterprise.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;}

  /* 레퍼런스 사례 */
  .function .title_wrap.button {flex-direction: column; align-items: flex-start;}
  .function .title_wrap.button .btn_wrap_link {margin-top: 16px;}
}

@media (max-width: 1020px) {
  .function .area_function .box_text {padding: 28px;}
}

@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;}

  .api .area_intro .box_grid {display:flex; gap:16px; flex-direction:column;}
  .api .area_review_center .title_center h3 {text-align: left;}
  .api .area_review_center .title_center {text-align: left;}
  .api .content_foot .main_title h2 {text-align:center;}
  .api .area_review_center .title_center img {margin:0;}

  .enterprise .area_function .page_nav {gap: 8px; padding: 0 0 12px; flex-direction: column;}
  .enterprise .area_function .page_nav a {padding: 8px 16px; font-size: 14px; border-radius: 8px;}

}

@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;}
}