@charset "utf-8";

/* 공통 */
span.bold {font-weight:600;}
.badge {font-size:22px; color:#975EFF; font-weight:500;}
.content_body h2 {font-size:48px;}

.dxconsulting .content_head {position:relative; padding:120px 0 130px;}
.dxconsulting .content_head::before {content: ""; position: absolute; inset: 0; background: url(https://hr.daouoffice.com/lp/2026/0306_dxconsulting/images/img_bg_pc.webp) center / cover no-repeat; z-index: 0; pointer-events: none;}
.dxconsulting .content_head .title_wrap {margin:0 auto !important;}
.dxconsulting .content_head .title_wrap h1.sub {font-size:38px; color:#fff; font-weight:400; letter-spacing:-2px;}
.dxconsulting .content_head .title_wrap h2.title {font-size:84px; color:#fff; font-weight:700; letter-spacing:-3px; margin-top:20px;}
.dxconsulting .content_head .cont_wrap {margin-top:64px; display:flex; flex-direction:column; gap:6px;}
.dxconsulting .content_head .cont_wrap span.desc {font-size:20px; font-weight:300; color:#f8edff; gap: 8px; display: flex;flex-direction: row; align-items: center; justify-content: center;}
.dxconsulting .content_head .btn_wrap {margin-top:64px !important;}
.dxconsulting .content_head .btn_wrap .btn_general_purple {display: inline-flex; align-items: center; justify-content: center; height: 70px; padding:0 30px; border: 1px solid #fff; border-radius:35px; background: linear-gradient(90deg, #A366FF 0%, #6700FF 100%); color: #fff; font-size:20px; font-weight:500; box-shadow:0 8px 20px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;}
.dxconsulting .content_head .btn_wrap .btn_general_purple:hover {transform: translateY(-1px);}

.area_problem {padding:100px 0; text-align:center; background-color:#1A171D;}
.area_problem .title_wrap {margin-bottom:40px;}
.area_problem .title_wrap h2 {font-weight:300; color:#fff; margin-top:20px;}
.area_problem .cont_wrap {display:flex; flex-direction:column; gap:24px; align-items:center; margin-top:80px;}
.area_problem .cont_wrap .bubble {display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
.area_problem .cont_wrap .bubble li {display: inline-block; padding:2px; border-radius:40px; background: linear-gradient(180deg, #8D6AFF 50%, #5138A2 100%);}
.area_problem .cont_wrap .bubble li span {display: inline-flex; align-items: center; justify-content: center; min-height:64px; padding:0 40px; border-radius:40px; background: #17141d; color: #f5f5f7; font-size:22px; font-weight:300;}

.area_solution {padding:50px 0 140px; background:linear-gradient(180deg, #1A171D 0%, #7741C2 100%);}
.area_solution .title_wrap {text-align:center;}
.area_solution .title_wrap .sub {margin:20px 0 4px; font-size:34px; font-weight:300; color:#fff;}
.area_solution .title_wrap h2 {font-weight:700; color: #fff;}
.area_solution .cont_wrap {margin-top:70px; max-width:1280px;}
.area_solution .cont_wrap .card_section {display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;}
.area_solution .cont_wrap .card_section .card {border-radius: 16px; background: #fff; text-align: center; display: flex; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); flex-direction:column; padding:30px 0 45px;}
.area_solution .cont_wrap .card_section .card .icon {background-image:url("./images/icon_set.svg"); display: block; width:88px; height:88px; margin:0 auto 18px;}
.area_solution .cont_wrap .card_section .card .title {margin-bottom:8px; color:#6B3BE9; font-size:24px; font-weight:600;}
.area_solution .cont_wrap .card_section .card .desc {color:#6B6B6B; font-size:20px; font-weight:300;}
.area_solution .icon.ticket {background-position:0 0;}
.area_solution .icon.charge {background-position:-107px 0;}
.area_solution .icon.guide {background-position:-216px 0;}
.area_solution .icon.after {background-position:-327px 0;}

.area_process {padding:130px 0 100px; background-color:#1D1D1F;}
.area_process .img_wrap {overflow: hidden;}
.area_process .img_wrap img {width: 100%;}
.area_process .align {display:flex; flex-direction:row; justify-content:space-between; margin-top:65px;}
.area_process .title_wrap h2 {display:block; color:#fff; font-size:48px; font-weight:600; background:linear-gradient(90deg, #ffffff 10%, #872BFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.area_process .title_wrap h2 br + * {color: #9a63ff;}
.area_process .cont_wrap {grid-area:content; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}
.area_process .cont_wrap .feature_card {display:contents;}
.area_process .cont_wrap .card {min-width:340px; padding:34px 40px 36px; border-radius:15px; background:#282828;}
.area_process .cont_wrap .card .title {color:#fff; font-size:22px; font-weight:500;}
.area_process .cont_wrap .card .desc {color:#888; font-size:18px; margin:8px 0 0 40px;}
.area_process .cont_wrap .card .circle {display:inline-flex; align-items:center; justify-content:center; margin-right:12px; font-weight:400; width:26px; height:26px; font-size:16px; color:#fff; border-radius:50%; background-color:#744AFF; position:relative; top:-1px;}

.area_footer {padding:20px 0 110px; text-align:center; background-color:#1D1D1F;}
.area_footer .box_section {width:100%; max-width:1280px; margin:0 auto 30px; padding:80px 0 60px; border-radius:25px; background:radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.36) 0, rgba(255, 255, 255, 0) 28%), linear-gradient(135deg, #8e55ff 0%, #7f54ff 50%, #d6c8d0 100%);}
.area_footer .title_wrap {margin-bottom:48px;}
.area_footer h2 {color:#fff; font-size:48px; font-weight:600;}
.area_footer .desc {color:#BEBEBE; font-size:14px; font-weight:400; margin-top:40px;}
.area_footer .btn_wrap .btn_general {display: inline-flex; align-items: center; justify-content: center; height:70px; padding:0 40px; border-radius:35px; background-color: #fff; color: #744AFF; font-size:20px; font-weight:500; box-shadow:0 8px 20px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08);}
.area_footer .btn_wrap .btn_general:hover {transform: translateY(-2px);}


@media screen and (max-width: 959px) {
  /* 공통 */
  .badge {font-size:16px;}
  .content_body h2 {font-size:28px;}  

  .dxconsulting .content_head {position:relative; height:560px; padding:60px 0;}
  .dxconsulting .content_head::before {content: ""; background: url(https://hr.daouoffice.com/lp/2026/0306_dxconsulting/images/img_bg_mo.webp) center / cover no-repeat;}
  .dxconsulting .content_head .title_wrap {margin:12px auto 0 !important;}
  .dxconsulting .content_head .title_wrap h1.sub {font-size:17px; font-weight:300;}
  .dxconsulting .content_head .title_wrap h2.title {font-size:42px; margin-top:18px; line-height:140%;}
  .dxconsulting .content_head .cont_wrap {margin-top:24px; gap:12px;}
  .dxconsulting .content_head .cont_wrap span.desc {font-size:16px; gap:4px; flex-direction:column;}
  .dxconsulting .content_head .btn_wrap {margin-top:40px !important;}
  .dxconsulting .content_head .btn_wrap .btn_general_purple {height:58px; width:100%; padding:0; border:none; background:#fff; color:#6B3BE9; font-size:18px;}

  .area_problem .title_wrap {margin-bottom:0;}
  .area_problem .title_wrap h2 {margin-top:12px;}
  .area_problem .cont_wrap {gap:16px; margin-top:60px;}
  .area_problem .cont_wrap .bubble {gap:16px;}
  .area_problem .cont_wrap .bubble li {padding:1px;}
  .area_problem .cont_wrap .bubble li span {min-height:50px; padding:0 25px; font-size:16px;}  
  
  .area_solution {height: 820px;}
  .area_solution .title_wrap {text-align:center;}
  .area_solution .title_wrap .sub {margin:20px 0 4px; font-size:22px;}
  .area_solution .cont_wrap {margin-top:30px; max-width:100%;}
  .area_solution .cont_wrap .card_section {display:flex; flex-direction:column; gap:14px;}
  .area_solution .cont_wrap .card_section .card {border-radius:14px; height:120px; display:flex; flex-direction:row; align-items:center; gap:25px; padding:20px 30px;}
  .area_solution .cont_wrap .card_section .card .icon {width:50px; height:50px; margin:0;}
  .area_solution .cont_wrap .card_section .card .txt {display:flex; flex-direction:column; align-items:flex-start;}
  .area_solution .cont_wrap .card_section .card .title {font-size:18px; margin-bottom:4px;}
  .area_solution .cont_wrap .card_section .card .desc {font-size:16px; text-align:left;}
  .area_solution .icon.ticket {background-position:0 -121px;}
  .area_solution .icon.charge {background-position:-69px -118px;}
  .area_solution .icon.guide {background-position:-139px -119px;}
  .area_solution .icon.after {background-position:-210px -119px;}  

  .area_process .inner {padding:0;}
  .area_process .align {flex-direction:column; margin-top:30px;}
  .area_process .title_wrap h2 {font-size:28px;}
  .area_process .cont_wrap {display:flex; flex-direction:column; gap:16px;}
  .area_process .cont_wrap .feature_card {display:flex; flex-direction:column; gap:16px;}
  .area_process .cont_wrap .card {min-width:100%; padding:25px 30px; border-radius:14px;}
  .area_process .cont_wrap .card .title {font-size:18px;}
  .area_process .cont_wrap .card .desc {font-size:16px; margin:8px 0 0 33px;}
  .area_process .cont_wrap .card .circle {margin-right:10px; width:22px; height:22px; font-size:14px; position:relative; top:-1px;}  

  .area_footer .box_section {max-width:100%; margin:0 auto 24px; padding:50px 0 53px;}
  .area_footer .title_wrap {margin-bottom:28px;}
  .area_footer h2 {font-size:30px;}
  .area_footer .btn_wrap {width:60%; margin:0 auto;}
  .area_footer .btn_wrap .btn_general {height:58px; width:100%; padding:0; font-size:18px;}
}