/* responsive.css - 반응형 스타일 */

#header .hamburger_btn {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

#header .hamburger_btn > span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    top 0.3s ease 0.3s,
    opacity 0.2s ease 0.3s;
}

#header .hamburger_btn > span:nth-child(1) {
  top: 18px;
}

#header .hamburger_btn > span:nth-child(2) {
  top: 25px;
}

#header .hamburger_btn > span:nth-child(3) {
  top: 32px;
}

#header .hamburger_btn.active > span {
  transition:
    top 0.3s ease,
    opacity 0.2s ease,
    transform 0.3s ease 0.3s;
}

#header .hamburger_btn.active > span:nth-child(1) {
  top: 25px;
  transform: rotate(45deg);
}

#header .hamburger_btn.active > span:nth-child(2) {
  opacity: 0;
}

#header .hamburger_btn.active > span:nth-child(3) {
  top: 25px;
  transform: rotate(-45deg);
}

@media all and (max-width: 1300px) {
  #main .main_visual {
    width: calc((100vw - 60px) * 900 / 1240);
  }

  #main .mv_deco_img.pos1 {
    width: calc((100vw - 60px) * 340 / 1240);
    bottom: calc((100vw - 60px) * 80 / 1240);
    left: calc((100vw - 60px) * -140 / 1240);
  }

  #main .mv_deco_img.pos2 {
    width: calc((100vw - 60px) * 400 / 1240);
    right: calc((100vw - 60px) * -200 / 1240);
    bottom: calc((100vw - 60px) * 120 / 1240);
  }
}

@media all and (max-width: 1400px) {
  .header_inner {
    padding: 0 15px;
  }

  .container:not(.kfv_container, .main_container) {
    padding: 0 15px;
  }

  #footer .footer_inner {
    padding: 55px 30px 45px;
  }
}

@media all and (max-width: 1024px) {
  .main_vis_txt {
    padding: 0 15px;
  }

  body {
    padding-top: 72px;
  }

  .header_inner {
    height: 72px;
  }

  #header .logo a {
    width: 80px;
    height: 22px;
  }

  #header .hamburger_btn {
    display: block;
  }

  #header .right {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    height: calc(100dvh - 72px);
    background: #fff;
    border-left: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 30px 20px;
    gap: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: none;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.35s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 9999;
  }

  html:not(.menu-ready) #header .right,
  html:not(.menu-ready) .menu_overlay {
    transition: none !important;
  }

  #header .right.active {
    transform: translate3d(0, 0, 0);
  }

  #pc_gnb > .floor1 {
    flex-direction: column;
    gap: 0;
  }

  #pc_gnb > .floor1 > li {
    border-bottom: 1px solid #eaecf0;
    opacity: 0;
    transform: translateX(24px);
    transition:
      opacity 0.5s ease,
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #header .main_login {
    opacity: 0;
    transform: translateX(24px);
    transition:
      opacity 0.5s ease,
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #header .right.active > #pc_gnb > .floor1 > li,
  #header .right.active > .main_login {
    opacity: 1;
    transform: translateX(0);
  }

  #header .right.active > #pc_gnb > .floor1 > li,
  #header .right.active > .main_login {
    transition-delay: calc(var(--stagger-i, 0) * 80ms + 320ms);
  }

  #pc_gnb > .floor1 > li > a {
    display: block;
    padding: 16px 4px;
    /* font-size: 18px; */
  }

  #pc_gnb > .floor1 > li:not(.color) > a:hover {
    text-shadow: none;
  }

  #header .main_login {
    margin-left: 0;
    margin-top: 8px;
  }

  #header .main_login > a {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
  }

  html.menu-open,
  body.menu-open {
    overflow: hidden !important;
    height: 100%;
    touch-action: none;
  }

  .menu_chrome_guard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    height: max(
      env(safe-area-inset-bottom, 0px),
      var(--mobile-menu-browser-bar, 0px)
    );
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
    z-index: 10000;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout paint;
  }

  html.ios-safari .menu_chrome_guard {
    height: max(
      env(safe-area-inset-bottom, 0px),
      calc(100lvh - 100dvh),
      var(--mobile-menu-browser-bar, 0px)
    );
  }

  .menu_chrome_guard.active {
    opacity: 1;
    visibility: visible;
  }

  .menu_overlay {
    position: fixed;
    inset: 72px 0 0 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9998;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
    contain: paint;
  }

  .menu_overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  #main_solution .msl_list .text strong {
    font-size: 16px;
  }

  #main_diff .main_diff_list > li {
    min-height: 300px;
  }

  #main_diff .diff_item {
    padding: 30px 20px;
  }

  #main_diff .diff_item .cate {
    font-size: 14px;
  }

  #main_diff .diff_item.new .cate {
    font-size: 16px;
  }

  #main_diff .diff_item strong {
    font-size: 24px;
  }

  #main_diff .diff_item .diff_txt p {
    font-size: 17px;
  }

  #main_diff .diff_item .label {
    font-size: 14px;
  }

  #main_reason .main_reason_table {
    max-width: 100%;
  }

  #main_reason .main_reason_table thead th {
    height: 64px;
    padding: 14px 10px;
    font-size: 16px;
  }

  #main_reason .main_reason_table tbody td,
  #main_reason .main_reason_table tbody th {
    height: 72px;
    padding: 16px 12px;
  }

  #main_reason .main_reason_table tbody tr:first-child td:first-child,
  #main_reason .main_reason_table tbody tr:first-child th,
  #main_reason .main_reason_table tbody tr:first-child td:last-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  #main_reason .main_reason_table tbody tr:last-child td:first-child,
  #main_reason .main_reason_table tbody tr:last-child th,
  #main_reason .main_reason_table tbody tr:last-child td:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  #main_reason .main_reason_table tbody tr:first-child td:first-child {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody tr:last-child td:first-child {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody tr:first-child td:last-child {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody th .desc {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody td:last-child {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody tr.profit td:last-child {
    font-size: 16px;
  }

  #main_reason .main_reason_table .arrow {
    width: 12px;
    height: 12px;
  }

  #main_reason .main_reason_table tbody tr.profit .arrow {
    width: 13px;
    height: 13px;
  }

  #main_reason .main_reason_table .mrt_note {
    margin-top: 20px;
    font-size: 15px;
  }

  #main_reason .main_reason_list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 80px;
  }

  #main_reason .main_reason_list > li {
    border-radius: 16px;
  }

  #main_reason .main_reason_list .num span {
    font-size: 32px;
  }

  #main_reason .main_reason_list .num .arrow {
    width: 22px;
    height: 22px;
  }

  #main_review .card h3 {
    font-size: 24px;
  }

  #main_review .card p {
    font-size: 15px;
  }

  #main_review .card .info strong {
    font-size: 17px;
  }

  #main_review .card .info span {
    font-size: 15px;
  }

  section {
    padding-bottom: 120px;
  }

  #main_review {
    padding: 80px 0;
  }

  #main_dataTransform {
    padding: 120px 0;
  }

  #inc_freeTrial {
    padding: 60px 0;
  }

  #inc_freeTrial .ift_tit h2 {
    font-size: 36px;
  }

  #inc_freeTrial .ift_list li {
    font-size: 15px;
  }

  #inc_freeTrial .ift_btn {
    font-size: 17px;
  }

  #footer .footer_inner {
    padding: 45px 20px 40px;
    text-align: center;
  }

  #footer .footer_logo {
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  #footer .footer_body {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  #footer .footer_info {
    align-items: center;
  }

  #footer .footer_links {
    justify-content: center;
  }

  #footer .info_row li {
    font-size: 14px;
  }

  #footer .copyright {
    font-size: 14px;
  }

  #footer .footer_links a {
    font-size: 14px;
  }
}

@media all and (max-width: 1280px) {
  #main_solution .msl_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  #main_diff .main_diff_list > li {
    min-height: 340px;
  }

  #main_diff .diff_item .cate {
    font-size: 15px;
  }

  #main_diff .diff_item.new .cate {
    font-size: 17px;
  }

  #main_diff .diff_item strong {
    font-size: 28px;
  }

  #main_diff .diff_item .diff_txt p {
    font-size: 18px;
  }

  #main_diff .diff_item .label {
    font-size: 15px;
  }
}

@media all and (max-width: 864px) {
  section {
    padding-bottom: 100px;
  }

  #main_solution {
    z-index: 11;
  }

  .freetrial_btn {
    right: 15px;
    bottom: 15px;
  }

  #main_reason .main_reason_list .num {
    justify-content: flex-end;
  }

  #main_review .main_review_slide {
    margin-top: 0;
  }

  #main_dataTransform .mdt_container {
    flex-direction: column;
  }

  #main_dataTransform .left {
    padding-right: 0;
  }

  #main_dataTransform .right {
    width: 100%;
  }

  #main_review {
    padding: 60px 0;
  }

  #main_dataTransform {
    padding: 80px 0;
  }

  #inc_freeTrial {
    padding: 48px 0;
  }

  #main_reason .main_reason_list {
    grid-template-columns: 1fr;
  }

  #main_solution .msl_list {
    grid-template-columns: repeat(2, 1fr);
  }

  #main_diff .main_diff_list > li {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0;
  }

  #main_diff .diff_item {
    gap: 150px;
  }

  #main_diff .diff_item.old {
    gap: 20px;
  }

  #main_diff .diff_arrow {
    width: 48px;
    height: 48px;
    margin: -14px auto;
    transform: rotate(90deg);
  }

  #main_diff .diff_arrow i {
    width: 22px;
    height: 22px;
  }

  #main_diff .diff_item .cate {
    font-size: 14px;
  }

  #main_diff .diff_item.new .cate {
    font-size: 15px;
  }

  #main_diff .diff_item strong {
    font-size: 22px;
    margin-bottom: 12px;
  }

  #main_diff .diff_item .diff_txt p {
    font-size: 16px;
  }

  #main_diff .diff_item .label {
    font-size: 14px;
  }

  #main_review .card h3 {
    font-size: 22px;
  }

  #main_review .card p {
    font-size: 14px;
  }

  #main_review .card .info strong {
    font-size: 16px;
  }

  #main_review .card .info span {
    font-size: 14px;
  }

  #main_review .card .avatar {
    font-size: 22px;
  }

  #inc_freeTrial .ift_tit h2 {
    font-size: 30px;
  }

  #inc_freeTrial .ift_list li {
    font-size: 14px;
  }

  #inc_freeTrial .ift_btn {
    font-size: 16px;
  }

  #footer .info_row {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  #footer .info_row li + li::before {
    display: none;
  }

  #footer .info_row li {
    font-size: 13px;
  }

  #footer .copyright {
    font-size: 13px;
  }

  #footer .footer_links {
    width: 100%;
    gap: 24px;
    justify-content: center;
  }

  #footer .footer_links a {
    font-size: 13px;
  }
}

@media all and (max-width: 640px) {
  #main_review .swiper-slide {
    width: 100%;
  }

  #main_diff .diff_item {
    gap: 100px;
  }

  #main_review .swiper-slide-active .card {
    padding: 22px;
  }

  #main_review .card_top {
    margin-bottom: 22px;
    padding-bottom: 22px;
  }

  .main_vis_txt p .br_mo {
    display: inline;
  }

  #main_solution h2 .br_mo {
    display: inline;
  }

  
  #main_review .sec_tit h2 br{
    display: none;
  }

  #main_review .sec_tit h2 .br_mo {
    display: inline;
  }

}

@media all and (max-width: 568px) {
  #main_reason .main_reason_table thead th {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody td:first-child {
    font-size: 15px;
  }

  #main_reason .main_reason_table tbody tr:first-child td:last-child {
    font-size: 16px;
  }

  #main_reason .main_reason_table tbody th .desc {
    font-size: 14px;
  }
}

@media all and (max-width: 476px) {
  .main_vis_txt p {
  }

  .main_vis_txt p br:not(.br_mo) {
    display: none;
  }

  #main_reason .sec_tit {
    margin-bottom: 40px;
  }

  #main_reason .main_reason_table .col_before,
  #main_reason .main_reason_table .col_after {
    width: 29%;
  }

  #main_reason .main_reason_table .col_label {
    width: 42%;
  }

  #main_reason .main_reason_table thead th {
    height: 48px;
    padding: 14px 7.5px;
    font-size: 16px;
  }

  #main_reason .main_reason_table tbody td,
  #main_reason .main_reason_table tbody th {
    height: 85px;
    padding: 11.5px 7.5px;
  }

  #main_reason .main_reason_table tbody tr:first-child td:first-child,
  #main_reason .main_reason_table tbody tr:first-child th,
  #main_reason .main_reason_table tbody tr:first-child td:last-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  #main_reason .main_reason_table tbody tr:last-child td:first-child,
  #main_reason .main_reason_table tbody tr:last-child th,
  #main_reason .main_reason_table tbody tr:last-child td:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  #main_reason .main_reason_table tbody th .cate,
  #main_reason .main_reason_table tbody tr:first-child th .cate,
  #main_reason .main_reason_table tbody tr.profit th .cate {
    font-size: 14px;
    margin-bottom: 2px;
  }

  #main_reason .main_reason_table tbody tr.profit .arrow {
    width: 11px;
    height: 11px;
  }

  .sec_tit.type2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .sec_tit.type2 .more_btn {
    width: 100%;
    font-size: 15px;
  }

  #main_diff .diff_item {
    gap: 70px;
  }

  .sec_tit p br {
    display: none;
  }

  #main_review {
    padding: 48px 0;
  }

  #main_dataTransform {
    padding: 80px 0;
  }

  #inc_freeTrial {
    padding: 36px 0;
  }

  #main_solution .msl_list {
    grid-template-columns: 1fr;
  }

  #main_diff .diff_item .cate {
    font-size: 13px;
  }

  #main_diff .diff_item.new .cate {
    font-size: 14px;
  }

  #main_diff .diff_item strong {
    font-size: 20px;
  }

  #main_diff .diff_item .diff_txt p {
    font-size: 15px;
  }

  #main_diff .diff_item .label {
    font-size: 13px;
  }

  #main_review .card h3 {
    font-size: 20px;
  }

  #main_review .card p {
    font-size: 13px;
  }

  #main_review .card .info strong {
    font-size: 15px;
  }

  #main_review .card .info span {
    font-size: 13px;
  }

  #main_review .card .avatar {
    font-size: 20px;
  }

  #inc_freeTrial .ift_tit h2 {
    font-size: 26px;
  }

  #inc_freeTrial .ift_list li {
    font-size: 13px;
  }

  #inc_freeTrial .ift_btn {
    font-size: 15px;
  }

  #footer .footer_inner {
    padding: 36px 16px 32px;
  }

  #footer .footer_logo {
    margin-bottom: 28px;
  }

  #footer .footer_body {
    gap: 24px;
  }

  #footer .info_row li {
    font-size: 12px;
  }

  #footer .copyright {
    font-size: 12px;
    margin-top: 12px;
  }

  #footer .footer_links {
    gap: 20px;
  }

  #footer .footer_links a {
    font-size: 12px;
  }
}

/* ===== freeTrial page responsive ===== */
@media (max-width: 1440px) {
  .container {
    padding: 0 40px;
    box-sizing: border-box;
  }
}

@media (max-width: 991px) {
  #freeTrial_wrap {
    padding: 60px 0 100px 0;
  }

  .container {
    padding: 0 24px;
  }

  .ft_hero {
    margin-bottom: 40px;
  }

  .ft_hero_top {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .ft_hero_tit h2 {
    font-size: 48px;
  }

  .ft_hero_desc {
    padding-top: 0;
  }

  .ft_hero_desc p {
    font-size: 14px;
  }

  .ft_form_area {
    margin-top: 0px;
  }

  #freeTrial_form {
    gap: 20px;
  }

  #freeTrial_form .input_row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #freeTrial_form .input_item input,
  #freeTrial_form .input_item select {
    height: 56px;
    padding: 0 20px;
  }

  .agree_box {
    padding: 20px;
  }

  .submit_btn {
    width: 100%;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 20px;
  }

  .ft_hero_tit h2 {
    font-size: 42px;
  }

  .ft_hero_tit .cate {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .ft_hero_desc p br {
    display: none;
  }
}

/* freeTrial 모바일/데스크탑 텍스트 토글 */
.ft-text-mo {
  display: none;
}

.ft-text-pc {
  display: block;
}

@media (max-width: 991px) {
  .ft-text-pc {
    display: none;
  }

  .ft-text-mo {
    display: block;
  }

  .ft_hero_desc {
    gap: 0;
  }

  .ft_hero_desc .ft-text-mo + .ft-text-mo {
    margin-top: 2px;
  }
}

/* ===== inquiry page responsive ===== */
@media (max-width: 1400px) {
  .footer-content {
    padding: 0 80px;
  }
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
    line-height: 60px;
  }

  .hero-description {
    font-size: 16px;
  }

  .form-container {
    margin: 0 20px 100px;
    padding: 40px 40px 40px;
  }

  .footer-content {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .hero-badge {
    font-size: 14px;
  }

  .hero-title {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.64px;
  }

  .hero-description {
    font-size: 14px;
  }

  .form-container {
    padding: 30px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .btn-submit {
    width: 100%;
  }

  .footer-content {
    padding: 0 20px;
  }
}

/* ===== keyFeatures page section padding responsive ===== */
@media (min-width: 1025px) {
  #keyFeatures_visual .main_vis_txt h2 {
    font-size: clamp(28px, 8cqi, 72px);
  }
}

/* keyFeatures 비주얼 텍스트 모바일/데스크탑 토글 */
.kfv-text-mo {
  display: none;
}

.kfv-text-pc {
  display: block;
}

@media (max-width: 864px) {
  .kfv-text-pc {
    display: none;
  }

  .kfv-text-mo {
    display: block;
  }

  .kfv-text-mo + .kfv-text-mo {
    margin-top: 0;
  }
}

/* keyFeatures innerTab intro 텍스트 모바일 토글 */
.kfv-inner-mo {
  display: none;
}

.kfv-inner-pc {
  display: block;
}

@media (max-width: 864px) {
  .kfv-inner-pc {
    display: none;
  }

  .kfv-inner-mo {
    display: block;
    line-height: 1.4;
  }

  .kfv-inner-mo + .kfv-inner-mo {
    margin-top: 0;
  }

  /* 단일상품 섹션(sec_subTit)에서만 두 줄 사이 간격 축소 */
  .sec_subTit .kfv-inner-mo + .kfv-inner-mo {
    margin-top: -14px;
  }
}

@media all and (max-width: 1280px) {
  #why_Drfin {
    padding: 50px 0 100px;
  }

  #why_Drfin .why_list_area > ul > li {
    padding: 32px;
    min-height: 340px;
  }

  #why_Drfin .why_txt_box .why_tit {
    font-size: 28px;
    margin-bottom: 14px;
  }

  #why_Drfin .why_txt_box .why_desc {
    font-size: 15px;
  }

  #why_Drfin .why_txt_box .why_desc br {
    display: none;
  }

  #system_Features {
    padding: 0 0 80px 0;
  }

  .subPage_tabBtn > ul {
    gap: 8px;
  }

  .subPage_tabBtn > ul > li > button {
    padding: 14px 18px;
    font-size: 16px;
  }

  .sec_subTit h2 {
    font-size: 36px;
  }

  .sec_subTit p {
    font-size: 17px;
  }

  .subPage_colorList_txt .subPage_colorList_tit {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .subPage_colorList_txt .subPage_colorList_desc {
    font-size: 15px;
  }

  .subPage_colorList_txt .subPage_colorList_desc br {
    display: none;
  }

  #oneclick_upload {
    padding: 80px 0 160px 0;
  }

  #realTime_status {
    padding: 100px 0;
  }

  #time_saving {
    padding: 160px 0;
  }

  #selected_Data {
    padding: 100px 0;
  }

  #ai_Agent {
    padding: 160px 0;
  }

  .subPage_innerTab {
    gap: 48px;
  }

  .subPage_innerTab_body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .subPage_innerTab_list {
    padding-right: 0;
  }

  .subPage_innerTab_list > ul {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    height: auto;
  }

  .subPage_innerTab_intro > h3 {
    font-size: 38px;
  }

  .subPage_innerTab_intro > p {
    font-size: 17px;
  }

  .subPage_featureCard {
    padding: 24px 26px;
  }

  .subPage_featureCard > strong {
    font-size: 19px;
  }

  .subPage_featureCard > span {
    font-size: 15px;
    padding: 0;
  }
}

@media (max-width: 1200px) {
  #keyFeatures_visual .kfv_img_area {
    width: calc((100vw - 60px) * 900 / 1140);
  }

  #keyFeatures_visual .kfv_deco_img {
    width: calc((100vw - 60px) * 230 / 1140);
    bottom: calc((100vw - 60px) * 60 / 1140);
    left: calc((100vw - 60px) * -130 / 1140);
  }
}

@media all and (max-width: 1024px) {
  #why_Drfin {
    padding: 40px 0 80px;
  }

  #why_Drfin .why_list_area > ul {
    gap: 24px;
  }

  #why_Drfin .why_list_area > ul > li {
    padding: 28px;
    min-height: 300px;
  }

  #why_Drfin .why_txt_box .why_tit {
    font-size: 26px;
    margin-bottom: 12px;
  }

  #why_Drfin .why_txt_box .why_desc {
    font-size: 15px;
  }

  #system_Features {
    padding: 0 0 60px 0;
  }

  .subPage_tabBtn {
    margin-bottom: 80px;
  }

  .subPage_tabBtn > ul {
    gap: 6px;
  }

  .subPage_tabBtn > ul > li > button {
    padding: 12px 14px;
    font-size: 15px;
  }

  .subPage_tabBtn > ul > li.cmsn .cmsn_badge {
    top: -10px;
  }

  .sec_subTit {
    margin-bottom: 48px;
  }

  .sec_subTit h2 {
    font-size: 32px;
  }

  .sec_subTit p {
    font-size: 16px;
  }

  .subPage_colorList,
  .aiag_list {
    margin-top: 0;
  }

  .subPage_colorList > ul,
  .aiag_list > ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .subPage_colorList > ul > li,
  .aiag_list > ul > li {
    padding: 28px;
  }

  .subPage_colorList_txt .subPage_colorList_tit {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .subPage_colorList_txt .subPage_colorList_desc {
    font-size: 15px;
  }

  #oneclick_upload {
    padding: 60px 0 120px 0;
  }

  #realTime_status {
    padding: 80px 0;
  }

  #time_saving {
    padding: 120px 0;
  }

  #selected_Data {
    padding: 80px 0;
  }

  #ai_Agent {
    padding: 120px 0;
  }
}

@media (max-width: 991px) {
  .subPage_innerTab {
    gap: 36px;
  }

  .subPage_innerTab_intro > h3 {
    font-size: 22px;
  }

  .subPage_innerTab_intro > p {
    font-size: 16px;
  }

  .subPage_innerTab_body {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .subPage_innerTab_list > ul {
    gap: 24px;
  }

  .subPage_featureCard {
    padding: 22px 22px;
    border-radius: 18px;
  }

  .subPage_featureCard > strong {
    margin-bottom: 10px;
    font-size: 18px;
  }
}

@media all and (max-width: 864px) {
  #why_Drfin {
    padding: 30px 0 60px;
  }

  #why_Drfin .why_list_area > ul {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #why_Drfin .why_list_area > ul > li {
    padding: 24px;
    min-height: 260px;
  }

  #why_Drfin .why_txt_box .why_tit {
    font-size: 22px;
    margin-bottom: 10px;
  }

  #why_Drfin .why_txt_box .why_desc {
    font-size: 14px;
  }

  #why_Drfin .why_txt_box .why_desc br {
    display: none;
  }

  #system_Features {
    padding: 0 0 50px 0;
  }

  .subPage_tabBtn {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin-bottom: 60px;
  }

  .subPage_tabBtn::before,
  .subPage_tabBtn::after {
    content: "";
    flex: 0 0 90px;
    align-self: stretch;
    position: sticky;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  .subPage_tabBtn::before {
    left: 0;
    margin-right: -90px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.85) 45%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 10px 0 0 10px;
  }

  .subPage_tabBtn::after {
    right: 0;
    margin-left: -90px;
    order: 99;
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.85) 45%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 0 10px 10px 0;
  }

  .subPage_tabBtn.has-left-scroll::before {
    opacity: 1;
  }

  .subPage_tabBtn.has-right-scroll::after {
    opacity: 1;
  }

  .subPage_tabBtn > ul {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: max-content;
    padding: 12px;
  }

  .subPage_tabBtn > ul > li {
    flex: 1 0 auto;
  }

  .subPage_tabBtn > ul > li > button {
    width: 100%;
    white-space: nowrap;
  }

  .sec_subTit {
    gap: 12px;
    margin-bottom: 40px;
  }

  .sec_subTit h2 {
    font-size: 26px;
  }

  .sec_subTit p {
    font-size: 15px;
  }

  .sec_subTit p br {
    display: none;
  }

  .subPage_colorList_txt .subPage_colorList_tit {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .subPage_colorList_txt .subPage_colorList_desc {
    font-size: 14px;
  }

  .subPage_colorList_txt .subPage_colorList_desc br {
    display: none;
  }

  #oneclick_upload {
    padding: 50px 0 100px 0;
  }

  #realTime_status {
    padding: 60px 0;
  }

  #time_saving {
    padding: 100px 0;
  }

  #selected_Data {
    padding: 60px 0;
  }

  #ai_Agent {
    padding: 100px 0;
  }

  .subPage_innerTab_body,
  .subPage_innerTab.type02 .subPage_innerTab_body {
    display: block;
    gap: 0;
  }

  .subPage_innerTab_view {
    display: none;
  }

  .subPage_innerTab_list {
    padding-right: 0;
  }

  .subPage_innerTab_list > ul,
  .subPage_innerTab.type02 .subPage_innerTab_list > ul {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
    height: auto;
  }

  .subPage_innerTab_list > ul > li {
    display: block;
    border-top: 1px solid rgba(16, 24, 40, 0.1);
  }

  .subPage_innerTab_list > ul > li:last-child {
    border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  }

  .subPage_featureCard {
    position: relative;
    padding: 22px 44px 22px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: color 0.25s ease;
  }

  .subPage_innerTab_list > ul > li.active .subPage_featureCard {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .subPage_featureCard::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #475467;
    border-bottom: 2px solid #475467;
    transform: rotate(45deg);
    transform-origin: center;
    transition:
      transform 0.3s ease,
      border-color 0.3s ease,
      top 0.3s ease;
  }

  .subPage_innerTab_list > ul > li.active .subPage_featureCard::after {
    top: 34px;
    transform: rotate(-135deg);
    border-color: var(--main-brand-color);
  }

  .subPage_featureCard > strong {
    margin-bottom: 8px;
  }

  .subPage_featureCard > span,
  .subPage_innerTab.type02 .subPage_featureCard > span {
    padding-right: 0;
  }

  .subPage_innerTab_panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.4s ease,
      opacity 0.3s ease,
      padding 0.3s ease;
  }

  .subPage_innerTab_list > ul > li.active .subPage_innerTab_panel {
    max-height: 900px;
    opacity: 1;
    padding-bottom: 24px;
  }

  .subPage_innerTab_panel > .view {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
  }

  .subPage_innerTab_panel > .view > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: contain;
  }
}

@media all and (max-width: 640px) {
  #header .main_login {
    display: none;
  }

  .subPage_colorList > ul,
  .aiag_list > ul {
    grid-template-columns: 1fr;
  }

  .subPage_tabArea {
    margin-top: 72px;
  }

  .subPage_innerTab {
    gap: 28px;
  }

  .subPage_innerTab_intro > h3 {
    font-size: 22px;
  }

  .subPage_innerTab_intro > p {
    font-size: 15px;
  }

  .subPage_featureCard {
    padding: 20px 40px 20px 0;
  }

  .subPage_featureCard::after {
    top: 28px;
  }

  .subPage_innerTab_list > ul > li.active .subPage_featureCard::after {
    top: 32px;
  }

  .subPage_featureCard > strong {
    font-size: 17px;
  }

  .subPage_featureCard > span {
    font-size: 14px;
  }
}

@media all and (max-width: 476px) {
  .br_mo {
    display: inline;
  }

  #why_Drfin {
    padding: 20px 0 80px;
  }

  #why_Drfin .why_list_area > ul > li {
    padding: 20px;
    min-height: 0;
    gap: 16px;
  }

  #why_Drfin .why_list_area > ul > li:nth-child(n) .why_img_box {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
  }

  #why_Drfin .why_txt_box .why_tit {
    font-size: 20px;
    margin-bottom: 8px;
  }

  #why_Drfin .why_txt_box .why_desc {
    font-size: 13px;
    line-height: 1.5;
  }

  #system_Features {
    padding: 0 0 40px 0;
  }

  .subPage_tabBtn > ul > li.cmsn .cmsn_badge {
    font-size: 10px;
  }

  .sec_subTit {
    margin-bottom: 32px;
  }

  .sec_subTit h2 {
    font-size: 22px;
  }

  .sec_subTit p {
    font-size: 14px;
  }

  .subPage_colorList_txt .subPage_colorList_tit {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .subPage_colorList_txt .subPage_colorList_desc {
    font-size: 13px;
    line-height: 1.5;
  }

  #oneclick_upload {
    padding: 40px 0 60px 0;
  }

  #realTime_status {
    padding: 40px 0;
  }

  #time_saving {
    padding: 60px 0;
  }

  #selected_Data {
    padding: 40px 0;
  }

  #ai_Agent {
    padding: 60px 0;
  }
}