@charset "utf-8";

@media (max-width: 1440px) {
    .main-area .text-wrap,
    .section-container {
        margin-left: auto;
        margin-right: auto;
        max-width: clamp(328px, 91.3vw, 1320px);
        width: 100%;
    }
    
    /* 요금안내 - 부가기능 */
    .addon-card {
        padding: var(--padding-32);
    }
    
    .tablet_br {
        display: none;
    }
}


@media (max-width: 1439px) and (min-width: 1280px) {
    
    /* GNB */
    .btn--gnb.pc-only {
        display: block !important;
    }
    
    
    /* 시스템구축 노하우 */
    .saas-inner {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    
    /* 전체기능맵 */
    .pc-only {
        display: none !important;
    }
    
    .lgta-only {
        display: block;
    }
    
    .lgta-only img {
        width: 100%;
    }
    
    .step .list {
        gap: 0 !important;
    }
    
    .list .box {
        width: clamp(120px, 12vw, 160px) !important;
    }
    
    .line {
        width: clamp(1000px, 80vw, 1172.5px) !important;
    }
    
    .step-4 {
        right: clamp(14px, 12vw, 20px) !important;
    }
    
    .tablet_br {
        display: none;
    }
}


@media screen and (max-width: 1280px) {
    .quick-wrap {
        display: none;
    }
}

@media screen and (max-width: 1279px) {
    /* 시스템 구축 노하우 */
    .section-container.full.saas {
        height: auto;
        padding-top: clamp(80px, 10vw, 160px);
    }
    
    .saas-inner {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    
    .saas-text {
        text-align: center;
    }
    
    .saas-img-area {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        margin-top: 40px;
        text-align: center;
    }
    
    .saas-img-area .pc-img {
        display: none;
    }
    
    .saas-img-area .mo-img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

@media (max-width: 1279px) and (min-width: 768px) {
    .pc_br {
        display: none;
    }
    
    .main-area {
        background-image: url("/image/intro/main_img_md.png");
        background-position: center;
        background-size: cover;
        border-radius: 0 0 80px 80px;
        height: 860px;
    }
    
    .tablet_br {
        display: block;
    }
    
    .accordion-item.active .accordion-content {
        max-height: 235px;
    }
}


@media (max-width: 1279px) and (min-width: 1024px) {
    /* 중기업/중견기업 HR플랫폼 */
    .pljecHR-wap .list {
        gap: 0;
    }
    
    .pljecHR-wap .item {
        width: calc((100% - 24px) / 2);
    }
    
    .pljecHR-wap .item:nth-child(1),
    .pljecHR-wap .item:nth-child(4) {
        margin-right: 24px;
    }
    
    .pljecHR-wap .item:nth-child(2),
    .pljecHR-wap .item:nth-child(3) {
        margin-top: 24px;
    }
    
    .pljecHR-wap .item:nth-child(1) {
        order: 1;
    }
    
    .pljecHR-wap .item:nth-child(2) {
        order: 2;
    }
    
    .pljecHR-wap .item:nth-child(4) {
        order: 3;
        margin-top: 0;
    }
    
    .pljecHR-wap .item:nth-child(3) {
        order: 4;
    }
    
    
    /* 요금안내 - 추가옵션&확장서비스   */
    .card-free {
        margin-top: var(--gap-4);
    }
    
    .plan-cards {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 1 1 calc(50% - 12px);
    }
    
    .plus-icon,
    .plan-card.plus {
        flex: 1 1 100%;
    }
    
    .plus .card-features {
        height: auto;
    }
    
    .main-btn .btn-contact-text {
        color: var(--color-button-white, #FFF);
        text-align: center;
        
        /* body/medium-700 */
        font-size: var(--typo-font-size-20, 20px);
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 30px */
    }
    
    /*  무료체험 form  */
    .form-row {
        flex-direction: column;
    }
}


@media (max-width: 1279px) and (min-width: 768px) {
    
    /* gnb */
    .gnb_nav li:nth-child(2) {
        display: none;
    }
    
    /* HR 데이터 */
    .contents-wrap.HRdata {
        display: none;
    }
    
    .mobile-layout {
        display: block;
        margin: 0 auto;
        max-width: clamp(328px, 91.3vw, 1320px);
        position: relative;
        width: 100%;
    }
    
    .mobile-top {
        align-items: center;
        display: flex;
        flex-direction: row;
    }
    
    .mobile-top .heading-xl-bold {
        flex: 1;
    }
    
    .mobile-top .cert-img {
        flex: 1;
        height: auto;
        position: absolute;
        right: 0;
        width: 44%;
    }
    
    .mobile-layout .certification-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--gap-24);
    }
    
    .mobile-layout .cert-item {
        width: calc(50% - 12px);
    }
    
    
    /* 온보딩특징 */
    .onboarding-item {
        width: calc(50% - var(--gap-24) / 2);
    }
    
    
    /* 전체기능맵 */
    .pc-only {
        display: none !important;
    }
    
    .lgta-only {
        display: none !important;
    }
    
    .ta-only {
        display: block !important;
    }
    
    .ta-only img {
        width: 100%;
    }
    
    
    /* 요금안내 - 맞춤견적상담 */
    .custom-quote {
        padding-left: var(--padding-60);
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    
    .section-container {
        gap: var(--gap-32);
    }
    
    .chart_main_text {
        width: 100%;
    }
    
    .btn--lg .btn__icon {
        height: 12px;
        width: 12px;
    }
    
    .contents-tit {
        padding: 0 40px;
    }
    
    .rolling-area {
        height: 60px;
    }
    
    .customer {
        height: 30px;
    }
    
    .heading-lg {
        font-size: clamp(28px, calc(1.57vw + 15.96px), 32px);
    }
    
    .heading-md {
        font-size: clamp(28px, calc(1.57vw + 15.96px), 32px);
    }
    
    .main-tit {
        font-size: clamp(48px, calc(6.27vw - 0.22px), 64px);
    }
    
    .btn-contact-text {
        font-size: clamp(16px, calc(1.57vw + 4.94px), 20px);
    }
    
    .heading-xl {
        font-size: clamp(36px, calc(4.71vw + 0.83px), 48px);
    }
    
    .body-md {
        font-size: clamp(18px, calc(0.78vw + 12.01px), 20px);
    }
    
    /* 중기업/중견기업 HR플랫폼 */
    .pljecHR-wap .list {
        gap: 0;
    }
    
    .pljecHR-wap .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: calc((100% - 24px) / 2);
        border-radius: 32px;
        height: auto;
    }
    
    .pljecHR-wap .item:nth-child(1),
    .pljecHR-wap .item:nth-child(4) {
        margin-right: 16px;
    }
    
    .pljecHR-wap .item:nth-child(2),
    .pljecHR-wap .item:nth-child(3) {
        margin-top: 16px;
    }
    
    .pljecHR-wap .item:nth-child(1) {
        order: 1;
    }
    
    .pljecHR-wap .item:nth-child(2) {
        order: 2;
    }
    
    .pljecHR-wap .item:nth-child(4) {
        order: 3;
        margin-top: 0;
    }
    
    .pljecHR-wap .item:nth-child(3) {
        order: 4;
    }
    
    .pljecHR-wap .infoText {
        text-align: left;
    }
    
    
    /* 상담신청 */
    .contact-container {
        padding-top: 120px
    }
    
    .form-section {
        gap: var(--gap-32) !important;
        margin-bottom: var(--gap-40) !important;
    }
    
    .form-row {
        flex-direction: column;
        gap: var(--gap-32) !important;
    }
    
    .form-row .form-field {
        flex-basis: auto;
    }
    
    hr {
        margin-bottom: 40px !important;
    }
    
    .tablet-w100 {
        flex: 100%;
    }
    
    .form-field .checkbox-group label {
        width: 180px;
    }
}


@media (max-width: 1023px) {
    .research_con .pc_br {
        display: none;
    }
    
    .section-container.full.light,
    .section-container.full.primary {
        padding: 120px 0;
    }
    
    /* 탭 */
    .panel-tit.sub {
        flex-direction: column;
        gap: 0px;
    }
    
    .panel-tit.sub .heading-md.bold {
        width: 100%;
        white-space: normal;
        font-size: var(--typography-font-size-body-lg, 24px);
    }
    
    .panel-tit.sub .body-sm.regular {
        width: 100%;
        margin-top: 8px;
        text-align: left;
        white-space: normal;
    }
    
    
    /* 요금안내 */
    .contents-wrap {
        flex-direction: column;
    }
    
    .addon-card {
        width: 100%;
        padding: var(--padding-32);
    }
    
    
    /* 요금안내 - 추가옵선&확장서비스 */
    .plan-cards {
        flex-direction: column;
        gap: var(--gap-16);
    }
    
    .plan-card, .plus-icon, .plan-card.plus {
        flex: 1 1 100%;
    }
    
    .card-features {
        height: auto;
    }
    
    .custom {
        flex-direction: column;
        gap: 80px;
    }
    
    
}


@media (max-width: 767px) {
    .tablet_br {
        display: none;
    }
    
    .mobile_br {
        display: block;
    }
    
    .mo-hide {
        display: none;
    }
    
    .gnb-link.mo-hide {
        display: none;
    }
    
    /* 상단배너 */
    .banner {
        height: clamp(40px, 8vw, 60px);
        padding: 0 var(--padding-8, 8px);
    }
    
    .banner-arrow-icon {
        display: none;
        width: clamp(12px, 2vw, 16px);
        height: clamp(12px, 2vw, 16px);
    }
    
    .banner_con {
        justify-content: flex-start;
        gap: var(--gap-4, 4px);
    }
    
    .banner_con .body-md {
        font-size: clamp(9px, calc(0.78vw + 12.01px), 11px);
        gap: var(--gap-4, 4px);
    }
    
    .deadline {
        font-size: var(--typography-font-size-caption-sm, 11px);
        height: 18px;
        padding: 0 8px;
    }
    
    .banner_img {
        width: auto;
        height: clamp(40px, 8vw, 60px);
    }
    
    .ic_close {
        width: clamp(12px, 2vw, 16px);
        height: clamp(12px, 2vw, 16px);
    }
    
    
    /* gnb */
    .gnb {
        height: 60px;
    }
    
    .gnb .logo {
        width: 90px;
        height: 28px;
    }
    
    .gnb_nav {
        gap: var(--gap-12);
    }
    
    .gnb_nav li a {
        font-size: var(--font-size-caption-L);
    }
    
    .gnb_nav li:nth-child(2) {
        display: none;
    }
    
    .gnb_actions button:nth-child(1) {
        display: none;
    }
    
    .gnb_nav .gnb-link a {
        font-size: clamp(14px, calc(0.26vw + 12px), 16px);
    }
    
    .heading-md {
        font-size: clamp(22px, calc(0.78vw + 16px), 24px);
    }
    
    .main-tit {
        font-size: clamp(40px, calc(1.04vw + 32px), 48px);
    }
    
    .main-btn .btn-contact-text {
        font-size: clamp(14px, calc(0.26vw + 12px), 16px);
    }
    
    .btn__text {
        font-size: clamp(14px, calc(0.26vw + 12px), 16px);
    }
    
    .heading-xl {
        font-size: clamp(24px, calc(1.57vw + 12.94px), 36px);
    }
    
    .body-sm.medium {
        font-size: clamp(14px, calc(0.26vw + 12px), 16px);
    }
    
    /* 메인 */
    .section-container {
        gap: var(--gap-20);
    }
    
    .main-area {
        aspect-ratio: 375 / 420;
        height: auto;
        background: url("/image/intro/main_img_xs.png") 50% / cover no-repeat;
        /*background-size: cover;*/
        /*background-position: center;*/
        /*background-repeat: no-repeat;*/
        border-radius: 0 0 40px 40px;
    }
    
    .text-wrap {
        margin-top: clamp(80px, 20vw, 240px);
    }
    
    .pc_br {
        display: none;
    }
    
    .eva {
        display: none;
    }
    
    .chart_main_text {
        width: 100%;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: var(--gap-8);
        width: 100%;
    }
    
    .btn--gnb {
        height: 36px;
        padding: 0 16px;
        font-size: var(--font-size-caption-M);
    }
    
    .btn--lg {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 48px;
        padding: 0 24px;
        font-size: var(--font-size-caption-L);
        font-weight: 700;
        gap: var(--gap-8);
    }
    
    .btn--lg .btn__icon {
        height: 12px;
        width: 12px;
        margin-top: -1px;
    }
    
    .btn--sm {
        font-size: 14px;
    }
    
    .section-container.full.gra {
        padding: var(--padding-80) 0;
    }
    
    .pricing-container {
        gap: var(--gap-80);
    }
    
    .main-btn .btn.btn--solid, .main-btn .btn.b {
        margin-bottom: var(--gap-8);
        width: 100% !important;
    }
    
    .main-btn .btn.btn--line {
        display: flex;
        width: 100% !important;
    }
    
    .saas-text .heading-lg {
        font-size: 24px !important;
    }
    
    .chart-data {
        min-width: 100%;
    }
    
    .contents-wrap.HRdata {
        display: none;
    }
    
    .mobile-layout {
        display: flex;
        flex-direction: column;
        max-width: clamp(328px, 91.3vw, 1320px);
        width: 100%;
        
        gap: 20px;
    }
    
    .mobile-top .heading-xl-bold {
        flex: 1;
        z-index: 1;
    }
    
    .mobile-top .cert-img {
        flex: 1;
        height: auto;
        position: absolute;
        right: 0;
        width: 50%;
        top: -60px;
    }
    
    .mobile-layout .certification-list {
        display: flex;
        flex-direction: column;
        gap: var(--gap-12);
        z-index: 3;
    }
    
    .mobile-layout .cert-item {
        width: 100%;
    }
    
    .mobile-layout .cert-icon {
        right: 16px;
        top: 16px;
    }
    
    .section-container.full.light,
    .section-container.full.primary {
        padding: 80px 0;
    }
    
    .btn-pc {
        display: none;
    }
    
    .btn-mo {
        display: block;
        margin-top: var(--gap-16);
        width: 100%;
    }
    
    .company-logo img {
        height: 30px;
    }
    
    .fab {
        width: 50px;
        height: 50px;
    }
    
    .fab img {
        width: 20px;
        height: 20px;
    }
    
    .fab-group {
        bottom: 20px;
        right: 20px;
        gap: 6px;
    }
    
    
    /* 중기업/중견기업 */
    .pljecHR-wap .list {
        flex-direction: column;
        gap: var(--gap-8) !important;
    }
    
    .pljecHR-wap .item {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-radius: 20px;
        height: auto;
        margin: 0;
    }
    
    .infoText {
        gap: var(--gap-4);
    }
    
    .item_p.ani-card:hover {
        transform: translateY(0px);
    }
    
    .item_b.ani-card:hover {
        transform: translateY(0px);
    }
    
    /* 전체기능맵 */
    .pc-only {
        display: none !important;
    }
    
    .lgta-only {
        display: none !important;
    }
    
    .ta-only {
        display: none !important;
    }
    
    .mo-only {
        display: block !important;
    }
    
    .mo-only img {
        width: 100%;
    }
    
    /* 탭 */
    .tab-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
        position: relative;
        background-color: var(--color-action-white);
    }
    
    .tab-list::-webkit-scrollbar {
        display: none;
    }
    
    .tab-item {
        flex-shrink: 0;
        padding: 0 var(--padding-12);
        border-radius: 6px; /*예외*/
    }
    
    /*.tab-list::after {*/
    /*    content: "";*/
    /*    flex: 0 0 16px; !* 끝 여백 확보 *!*/
    /*}*/
    .arrow-icon {
        width: 16px;
        height: 16px;
    }
    
    .panel-tit.sub {
        gap: var(--gap-4);
    }
    
    .panel-tit.sub .body-sm.regular {
        margin-top: 0px;
    }
    
    
    /* 온보딩 특징 */
    .features-list {
        gap: 0;
    }
    
    .onboarding-item {
        width: 100%;
        padding: var(--padding-20) var(--padding-16);
        flex-direction: row;
        align-items: flex-start;
        gap: var(--gap-16);
    }
    
    .feature-item__image {
        width: clamp(60px, 10vw, 88px) !important;;
        height: clamp(60px, 10vw, 88px) !important;;
        flex-shrink: 0;
        object-fit: contain;
    }
    
    .feature-item__text-group {
        margin-top: 0;
        text-align: left;
        gap: var(--gap-8);
    }
    
    .feature-item__title {
        margin-bottom: var(--gap-8);
    }
    
    .feature-item__title {
        text-align: left;
    }
    
    .feature-item__text-group br {
        display: none;
    }
    
    .feature-item__text-group br.mobile_br {
        display: block;
    }
    
    /* Q&A */
    .faq-answer {
        width: 100%;
    }
    
    
    /* 요금안내 */
    .plan .section-container {
        gap: var(--gap-80);
    }
    
    .contents-wrap {
        flex-direction: column;
        gap: var(--gap-12);
    }
    
    .section_tit_keyword .body-sm {
        font-size: 12px;
    }
    
    .plan {
        gap: var(--gap-40);
    }
    
    .addon-card {
        width: 100%;
        padding: var(--padding-20);
        border-radius: var(--radius-medium);
    }
    
    .addon-card:hover {
        transform: translateY(0px);
    }
    
    .addon-card-header {
        padding-bottom: var(--gap-16);
    }
    
    .addon-card ul {
        padding: 16px 0 0 0;
    }
    
    .price .body-lg {
        font-size: 18px;
    }
    
    .card-features {
        height: auto;
        gap: var(--gap-8);
    }
    
    .inquiry-features {
        row-gap: var(--gap-8);
    }
    
    .title-badge {
        height: 22px;
        padding: 0 8px;
    }
    
    
    /* 요금안내 - 맞춤견적상담 */
    .custom-quote {
        position: relative;
        height: auto;
        padding: 40px 20px 60px 20px;
        border-radius: var(--radius-medium);
        overflow: hidden;
    }
    
    .custom-quote__img {
        position: absolute;
        right: -75px;
        bottom: 0;
        width: 100%;
        max-width: none;
    }
    
    .custom-quote__text {
        align-items: center;
        gap: var(--gap-24);
        text-align: center;
        z-index: 1;
    }
    
    .btn--lg {
        width: auto !important;
    }
    
    
    /* 요금안내 - 추가옵션&확장서비스*/
    .standard {
        gap: var(--gap-12);
    }
    
    .plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .pricing {
        gap: var(--gap-12);
    }
    
    .plan-title-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0px;
    }
    
    .plan-title-group h3.bold {
        display: inline;
    }
    
    .plan-capacity {
        display: inline-flex;
        position: relative;
        top: 9px;
        align-self: center;
        align-items: center;
        gap: var(--gap-4);
    }
    
    .capacity-icon {
        align-self: center;
    }
    
    .plan-card {
        padding: var(--padding-24);
        border-radius: var(--radius-medium);
        gap: var(--gap-16);
    }
    
    .plan-card .hidden {
        display: none;
    }
    
    .card-free {
        margin-top: 0px;
    }
    
    .plan-title-group p.body-sm.regular {
        flex-basis: 100%;
        margin-top: 4px;
    }
    
    .plan-cards {
        gap: var(--gap-12);
    }
    
    .features-check {
        width: 16px;
        height: 16px;
    }
    
    .plan-title-group .body-sm.regular {
        order: 2;
        width: 100%;
    }
    
    .plan-title-group h2 {
        order: 1;
    }
    
    .card-logo,
    .card-logo img {
        width: 28px;
        height: 28px;
    }
    
    .plus-icon img {
        width: 28px;
        height: 28px;
    }
    
    .card-free-title {
        margin-bottom: var(--gap-4);
        gap: var(--gap-4);
    }
    
    .card-free-title img {
        width: 12px;
    }
    
    .inq {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: var(--gap-20);
    }
    
    .inq-title {
        width: 100%;
    }
    
    .inquiry-features {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    
    
    /* 요금안내 - 주요기능 & 확장서비스*/
    .features-container {
        padding: 0 var(--padding-16);
        gap: var(--gap-32);
    }
    
    .feature-category {
        gap: var(--gap-8);
    }
    
    .feature-category-list {
        display: flex;
        flex-direction: column;
        gap: var(--gap-56);
    }
    
    .category-header {
        gap: var(--gap-8);
    }
    
    .accordion-header {
        padding: var(--padding-16) 0;
    }
    
    .symbol {
        width: 32px;
        height: 32px;
    }
    
    .accordion-item.active {
        margin-bottom: var(--gap-20);
    }
    
    .accordion-toggle {
        width: 16px;
        height: 16px;
    }
    
    .feature-item {
        flex-direction: column;
        gap: var(--gap-8);
    }
    
    .feature-item:first-child {
        padding-top: 0;
    }
    
    .feature-item.top {
        padding-top: var(--padding-8);
    }
    
    
    .feature-name {
        width: 100%;
        font-weight: 600;
    }
    
    
    /* 상담신청 */
    .contact-container {
        padding: 80px 0 !important;
    }
    
    .section_tit_keyword.contact {
        margin-bottom: var(--gap-32) !important;
    }
    
    .form-section {
        gap: var(--gap-24) !important;
        margin-bottom: var(--gap-32) !important;
    }
    
    .form-row {
        flex-direction: column;
        gap: var(--gap-24) !important;
    }
    
    .form-row .form-field {
        flex-basis: auto;
    }
    
    input, .custom-select, textarea {
        padding: 12px 16px !important;
    }
    
    .check {
        margin-bottom: var(--gap-16) !important;
    }
    
    .checkbox-group, .radio-toggle-group {
        display: flex;
        gap: var(--gap-12) 60px;
        flex-direction: column;
    }
    
    .checkbox-box {
        width: 20px;
        height: 20px;
    }
    
    .custom-radio {
        width: 20px;
        height: 20px;
        width: 50%;
    }
    
    .checkbox-box img {
        width: 12px;
        height: 12px;
    }
    
    hr {
        margin-top: 0;
        margin-bottom: var(--gap-32) !important;
    }
    
    .form-section.privacy {
        gap: var(--gap-16);
    }
    
    .btn-m {
        display: block !important;
    }
    
    .error-message.radio-emsg {
        margin-top: var(--gap-8);
    }
    
    
    .company-info {
        width: 100%;
        gap: var(--gap-4) var(--gap-20);
    }
    
    .info {
        gap: var(--gap-16) !important;
    }
    
    .sns {
        width: 100%;
        justify-content: start !important;
    }
    
    .legal {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: var(--gap-4);
    }
    
    .copyright {
        white-space: normal;
    }
    
    .mobile-w100 {
        flex-basis: 100%;
    }
    
    .accordion-item.active .accordion-content {
        max-height: 235px;
    }
    
    .feature-item .body-sm.medium {
        flex-basis: unset;
    }
    
    .btn--solid.btn--purple {
        flex: 1;
    }
    
    
    .mobile-top {
        margin-bottom: 0;
    }
    
    .section_tit_keyword .btn--solid.btn--purple,
    .cta-buttons .btn--solid.btn--purple {
        flex: unset;
    }
    
    .form-field fieldset .free-trial-field {
        gap: 16px;
    }
}


@media (max-width: 500px) {
    .only-m-600-hide-br {
        display: none;
    }
}

/* LT area */
@media all and (max-width: 1439px) {
    
    /* gnb area */
    .gnb-fixed {
        height: auto;
        padding: var(--space-20) 0;
    }
    
    .gnb-max-width {
        max-width: var(--size-944);
    }
    
    .btn-login {
        display: block;
    }
    
    .btn-demoapply:hover {
        color: var(--color-white-fff);
        background-color: transparent;
    }
    
    .gnb-fixed.scroll .btn-demoapply:hover {
        color: var(--color-main-original);
        background-color: var(--color-white-fff);
    }
    
    /* top-bg-container */
    .top-bg-container {
        background: url("/image/intro/bg_top.jpg") center top / cover no-repeat;
    }
    
    /* section1 */
    .section1 {
        padding: var(--space-200) var(--space-40) var(--space-150);
        background: none;
    }
    
    .section1 .content-wrapper {
        gap: 0;
        max-width: var(--size-944);
    }
    
    .section1-text-wrapper {
        width: var(--size-450);
        min-width: var(--size-450);
    }
    
    .section1-img-t {
        display: block;
        width: 100%;
    }
    
    .section1 .btn-demoapply:hover {
        color: var(--color-main-original);
        background-color: var(--color-white-fff);
    }
    
    /* middle-bg-container */
    .middle-bg-container {
        background: url("/image/intro/bg_middle.jpg") center top / cover no-repeat;
    }
    
    /* content common */
    .content1,
    .content3,
    .content5,
    .content2,
    .content4 {
        padding: calc(115 / 1920 * 100%) var(--space-40);
        background: none;
    }
    
    .content1 .content-wrapper,
    .content2 .content-wrapper,
    .content3 .content-wrapper,
    .content4 .content-wrapper,
    .content5 .content-wrapper {
        gap: 0;
        max-width: var(--size-944);
        height: auto;
    }
    
    .content-img-t {
        display: block;
        width: 100%;
    }
    
    .right-text-container {
        width: var(--size-350);
        min-width: var(--size-350);
        padding-left: var(--space-30);
    }
    
    .left-text-container {
        width: var(--size-350);
        min-width: var(--size-350);
        padding-right: var(--space-30);
    }
    
    .left-img-container {
        width: 100%;
        max-width: unset;
    }
    
    .dd-container {
        gap: var(--space-16);
    }
    
    .dt-title {
        grid-column: 1 / 3;
    }
    
    
    /* section7 */
    .section7 {
        padding: var(--space-110) var(--space-40);
    }
    
    .logo-container {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-30) var(--space-20);
        width: var(--size-944);
    }
    
    .companies-img {
        width: 100%;
        max-width: var(--size-183);
    }
    
    /* bottom-bg-container */
    .bottom-bg-container {
        background: url("/image/intro/bg_bottom_v2.jpg") center top / cover no-repeat;
    }
    
    /* section8 */
    .section8 {
        padding: var(--space-90) var(--space-40);
    }
    
    .section8 .content-wrapper {
        max-width: var(--size-944);
    }
    
    .pay-contents-wrapper {
        width: 100%;
    }
    
    .grid-div {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }
    
    .pay-bottom-detail-text:first-child {
        margin-top: var(--space-15);
    }
    
    /* section9 */
    .section9 {
        padding: var(--space-110) var(--space-40);
    }
    
    .crm-container {
        width: 100%;
        max-width: var(--size-944);
    }
    
    .crm-submit-btn:hover::before {
        width: 0;
    }
    
    /* footer */
    .footer {
        width: 100%;
        padding: var(--space-50);
    }
    
    .footer-text-title-t {
        display: block;
        font-size: var(--font-25);
        font-weight: var(--weight-normal);
        line-height: 1.3;
    }
    
    /* display: none */
    .footer-text-title {
        display: none;
    }
}

/* ST area */
@media all and (max-width: 1024px) {
    
    .pay-contents-container {
        display: flex;
        flex-direction: column;
    }
    
    .pay-contents-wrapper {
        width: 100%;
    }
    
    /* gnb area */
    .gnb-fixed {
        padding: var(--space-20) var(--space-40);
    }
    
    /* section1 */
    .section1 {
        padding: var(--space-200) 0 var(--space-90);
        background: none;
    }
    
    .section1 .content-wrapper {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }
    
    .section1-text-wrapper {
        width: 100%;
        min-width: unset;
        padding: 0 var(--space-40);
    }
    
    .section1 .text-title-t {
        display: block;
        margin: var(--space-30) 0 var(--space-15);
        font-size: var(--font-50);
        font-weight: var(--weight-medium);
        line-height: 1.3;
        color: #fff;
    }
    
    .section1 .text-desc-t {
        display: block;
        color: var(--color-main-light);
        font-size: var(--font-20);
        font-weight: var(--weight-normal);
        line-height: 1.5;
    }
    
    .section1 .btn-demoapply {
        margin: var(--space-40) 0 var(--space-50);
    }
    
    .section1-img-wrapper {
        width: 100%;
        padding: 0 var(--space-20);
    }
    
    /* top-bg-container */
    .top-bg-container {
        background: url("/image/intro/bg_top_t.jpg") center top / auto no-repeat;
    }
    
    /* middle-bg-container */
    .middle-bg-container {
        background: url("/image/intro/bg_middle_t.jpg") center top / cover no-repeat;
    }
    
    /* content common */
    .content1,
    .content2,
    .content3,
    .content4,
    .content5 {
        padding: 0 0 var(--space-120);
    }
    
    .content1 .content-wrapper,
    .content3 .content-wrapper,
    .content5 .content-wrapper {
        justify-content: unset;
        flex-direction: column;
        align-items: center;
        gap: var(--space-16);
        height: auto;
    }
    
    .content2 .content-wrapper,
    .content4 .content-wrapper {
        justify-content: unset;
        flex-direction: column-reverse;
        align-items: center;
        gap: var(--space-16);
        height: auto;
    }
    
    .left-img-container {
        max-width: unset;
    }
    
    .left-text-container,
    .right-text-container {
        max-width: var(--size-1024);
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 var(--space-24);
        padding: 0 var(--space-70);
        width: 100%;
    }
    
    .dd-container {
        gap: var(--space-16);
        margin-bottom: var(--space-35);
    }
    
    .dd-container:nth-child(4) {
        margin-bottom: 0;
    }
    
    .dt-title {
        margin-bottom: var(--space-45);
    }
    
    /* bottom-bg-container */
    .bottom-bg-container {
        background: url("/image/intro/bg_bottom_t_v2.jpg") center bottom / auto no-repeat;
    }
    
    .section7 .text-title,
    .section8 .text-title,
    .section9 .text-title {
        font-size: var(--font-40);
    }
    
    /* section7 */
    .section7 {
        padding: var(--space-90) var(--space-40);
    }
    
    .section7 .text-desc {
        margin: var(--space-20) 0 var(--space-40);
    }
    
    .logo-container {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-20);
        width: 100%;
    }
    
    /* section8 */
    .pay-info-small-text-wrapper {
        margin: var(--space-60) 0 var(--space-25);
    }
    
    .pay-etc-text-wrapper {
        padding-top: var(--space-40);
    }
    
    .pay-etc-text {
        text-align: center;
    }
    
    /* section9 */
    .crm-container {
        padding: var(--space-50);
    }
    
    .crm-left-right-wrapper {
        gap: var(--space-24);
        flex-direction: column;
    }
    
    /* footer */
    .footer {
        width: 100%;
        padding: 0 var(--space-40) var(--space-50);
    }
    
    .footer-text-title-t {
        font-size: var(--font-20);
        line-height: 1.4;
    }
    
    .footer-top-right {
        gap: var(--space-24);
    }
    
    /* display: none */
    .btn-login,
    .section1 .text-title,
    .section1 .text-desc {
        display: none;
    }
}

/* LM area */
@media all and (max-width: 768px) {
    
    .pay-contents-container {
        display: flex;
        flex-direction: column;
    }
    
    .pay-contents-wrapper {
        width: 100%;
    }
    
    .target-hr-btn:hover {
        background-color: #01359f;
    }
    
    /* gnb area */
    .gnb-fixed,
    .gnb-fixed.scroll {
        padding: var(--space-30) var(--space-50);
    }
    
    .gnb-max-width {
        max-width: var(--size-720);
    }
    
    /* floating area */
    .floating-container {
        display: block;
        position: fixed;
        right: var(--space-50);
        bottom: var(--space-50);
        z-index: 100;
    }
    
    .btn-top-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--size-75);
        height: var(--size-75);
        cursor: pointer;
        border: var(--size-2) solid var(--color-black-999);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .btn-top-icon {
        width: var(--size-26);
    }
    
    /* companies */
    .logo-container {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-20);
        width: 100%;
    }
    
    /* section8 */
    .section8 {
        padding: var(--space-90) var(--space-50);
    }
    
    /* section9 */
    .section9 {
        padding: var(--space-80) var(--space-50);
    }
    
    /* bottom-bg-container */
    .bottom-bg-container {
        overflow: hidden;
        background: url("/image/intro/bg_bottom_t_v2.jpg") center top / cover no-repeat;
    }
    
    .footer-top {
        flex-direction: column;
        gap: var(--space-35);
    }
    
    .footer-text-title-t {
        font-size: var(--font-30);
        text-align: center;
    }
    
    .footer-top-right {
        justify-content: center;
        /* gap: 60px; */
        gap: 60px;
        width: 100%;
        padding: 0 var(--space-40);
    }
    
    .footer-family-wrapper {
        flex-direction: column;
        gap: var(--space-15);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-40);
    }
    
    .footer-bottom-left.footer_img_con {
        text-align: center;
    }
    
    .footer-bottom-right {
        text-align: center;
    }
    
    .footer-info-list {
        justify-content: center;
        gap: var(--space-30);
        margin-bottom: var(--space-30);
    }
    
    .footer-company-address-m {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-7);
        margin-bottom: var(--space-7);
    }
    
    .footer-company-info p {
        margin-bottom: var(--space-15);
    }
    
    .footer-company-info p:last-child {
        margin-bottom: 0;
    }
    
    /* display: none */
    .footer-company-address {
        display: none;
    }
    
}

/* M area */
/* @media screen and (max-width: 650px) and (hover: none) and (pointer: coarse) { */
@media all and (max-width: 650px) {
    
    .target-hr-btn:hover {
        background-color: #01359f;
    }
    
    .pay-contents-box.pay .pay-bottom-small-text,
    .pay-contents-box.agreement .pay-bottom-small-text {
        height: 30rem;
        line-height: 30rem;
    }
    
    .pay-contents-box.agreement .pay-bottom-small-text {
        margin-bottom: 25rem;
    }
    
    .target-hr-btn {
        height: 54rem;
        font-size: 24rem;
        line-height: 24rem;
        border-radius: 8rem;
        padding: 0px 24rem;
        gap: 14rem;
    }
    
    .icon-target-hr {
        background-image: url("/image/intro/ic_arrow_m.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 11rem;
        height: 18rem;
    }
    
    .discount-badge {
        width: 120rem;
        height: 34rem;
        font-size: 20rem;
        font-weight: 700;
        line-height: 34rem;
        margin-left: 20rem;
        border-radius: 4rem;
        box-sizing: border-box;
    }
    
    /* .discount-badge.year {
        color: #0447d3;
        border: 1rem solid #0447d3;
    }
    
    .discount-badge.set {
        color: #ff799b;
        border: 1rem solid #ff799b;
    } */
    
    .discount-text {
        font-size: 26rem;
        font-weight: 400;
        color: #999999;
        margin-left: 0px;
    }
    
    .pay-contents-box-icon-wrapper {
        display: none;
    }
    
    #pay_container {
        display: none;
    }
    
    #pay_container_m {
        display: block;
    }
    
    .pay-contents-box-price-wrapper {
        flex-direction: column;
        align-items: start;
    }
    
    .pay-contents-box-price-wrapper.agreement {
        align-items: center;
    }
    
    .pay-badge {
        width: 145rem;
        height: 54rem;
        border-radius: 27rem;
        box-sizing: border-box;
        font-size: 26rem;
        font-weight: 500;
        line-height: 54rem;
        color: #ffffff;
        margin-bottom: 30rem;
    }
    
    .pay-badge-year-text {
        margin-bottom: 50rem;
    }
    
    .pay-badge-set-text {
        margin-bottom: 80rem;
    }
    
    .pay-badge-month-text {
        display: flex;
        flex-wrap: wrap;
        gap: 16rem;
    }
    
    /* gnb area */
    .gnb-fixed,
    .gnb-fixed.scroll {
        padding: var(--m-space-30) var(--m-space-50);
    }
    
    .gnb-max-width {
        max-width: var(--m-size-720);
    }
    
    .gnb-logo-wrapper {
        width: var(--m-size-198);
    }
    
    .gnb-fixed .gnb-btn-logo-m {
        display: block;
        height: var(--m-size-59);
        content: url("/image/intro/gnb_logo_m.png");
    }
    
    .gnb .logo {
        width: 100%;
    }
    
    .gnb .logo,
    .gnb-fixed.scroll .gnb-btn-logo-m {
        display: block;
        height: var(--m-size-59);
        content: url("/image/intro/gnb_logo_scroll_m.png");
    }
    
    .gnb .logo {
        width: 90px;
        height: 28px;
    }
    
    .gnb-btn-logo-m {
        display: block;
        width: 100%;
    }
    
    .btn-demoapply {
        padding: var(--m-space-24) var(--m-space-55);
        font-size: var(--m-font-24);
        border: var(--m-size-2) solid var(--color-white-fff);
        border-radius: var(--m-size-40);
    }
    
    .gnb-fixed.scroll .btn-demoapply {
        border: var(--m-size-2) solid var(--color-main-original);
    }
    
    /* floating area */
    .floating-container {
        right: var(--m-space-50);
        bottom: var(--m-space-50);
    }
    
    .btn-top-wrapper {
        width: var(--m-size-100);
        height: var(--m-size-100);
        border: var(--m-size-2) solid var(--color-black-999);
    }
    
    .btn-top-icon {
        width: var(--m-size-32);
    }
    
    /* top-bg-container */
    .top-bg-container {
        overflow: hidden;
        background: url("/image/intro/bg_top_m.jpg") center top / contain no-repeat;
    }
    
    /* section1 */
    .section1 {
        padding: var(--m-space-260) 0 var(--m-space-90);
    }
    
    .section1-text-wrapper {
        padding: 0 var(--m-space-80);
    }
    
    .section1 .text-title {
        display: block;
        margin: 0;
        font-size: var(--m-font-60);
        color: #fff;
    }
    
    .section1 .text-desc-t {
        margin: var(--m-space-30) 0 var(--m-space-70);
        font-size: var(--m-font-30);
        line-height: 1.4;
    }
    
    .section1 .btn-demoapply {
        margin: 0 0 var(--m-space-125);
        padding: var(--m-space-36) var(--m-space-120);
        font-size: var(--m-font-28);
        border-radius: var(--m-size-55);
    }
    
    .section1-img-wrapper {
        padding: 0;
    }
    
    .section1-img-m {
        display: block;
        width: 100%;
    }
    
    /* middle-bg-container */
    .middle-bg-container {
        overflow: hidden;
        background: url("/image/intro/bg_middle_m.jpg") center top / 100% 100% no-repeat;
    }
    
    .content1,
    .content2,
    .content3,
    .content4,
    .content5 {
        padding: var(--m-space-70) 0 var(--m-space-100);
    }
    
    .left-text-container,
    .right-text-container {
        gap: var(--m-space-50) var(--m-space-24);
        padding: 0 var(--m-space-50);
    }
    
    .content-img-m {
        display: block;
        width: 100%;
    }
    
    .dd-container {
        align-items: center;
        gap: var(--m-space-30);
        margin-bottom: 0;
    }
    
    .dd-icon-m {
        image-rendering: -webkit-optimize-contrast;
        display: block;
        width: var(--m-size-70);
        height: var(--m-size-70);
    }
    
    .dd-text-bold {
        margin-bottom: 0;
        font-size: var(--m-font-28);
        line-height: 1.4;
    }
    
    /* bottom-bg-container */
    .bottom-bg-container {
        overflow: hidden;
        background-image: url("/image/intro/bg_bottom_m_v2.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
    
    .section7 .text-title-m,
    .section8 .text-title,
    .section9 .text-title-m {
        display: block;
        font-size: var(--m-font-60);
        font-weight: var(--weight-medium);
        text-align: center;
        line-height: 1.3;
    }
    
    /* section7 */
    .section7 {
        padding: var(--m-space-120) var(--m-space-50) var(--m-space-170);
    }
    
    .logo-container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--m-space-30) var(--m-space-20);
    }
    
    .section7 .text-desc-m {
        display: block;
        margin: var(--m-space-15) 0 var(--m-space-55);
        color: var(--color-black-666);
        font-size: var(--m-font-30);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.2px;
    }
    
    /* section8 */
    .section8 {
        padding: var(--m-space-60) var(--m-space-50) 0;
    }
    
    .pay-contents-container {
        /* grid-template-columns: repeat(1, 1fr);
        gap: var(--m-space-60); */
        display: flex;
        flex-direction: column;
    }
    
    .pay-info-small-text-wrapper {
        gap: var(--m-space-25);
        margin: var(--m-space-60) 0 var(--m-space-30);
        font-size: var(--m-font-28);
    }
    
    .pay-info-devider {
        height: var(--m-size-24);
    }
    
    .pay-contents-box-top {
        padding: 70rem 60rem 70rem 60rem;
        /* padding: var(--m-space-90) 0 var(--m-space-70); */
        border-bottom: var(--m-size-2) solid var(--color-white-eee);
    }
    
    /* .pay-contents-box-top .text-desc {
        font-size: var(--m-font-36);
        font-weight: var(--weight-medium);
        margin: var(--m-space-44) 0 var(--m-space-20);
    } */
    
    .pay-contents-box-top .text-desc {
        font-size: 36rem;
        font-weight: 700;
        color: #222;
        margin: 10rem 0rem 40rem 0rem;
    }
    
    .pay-contents-box-icon-m {
        display: inline-block;
        width: var(--m-size-150);
    }
    
    .pay-contents-box-price {
        font-size: 56rem;
        font-weight: 700;
        line-height: 42rem;
        color: #222;
    }
    
    .pay-contents-box-price-small {
        font-size: 30rem;
        font-weight: 400;
        color: #222;
    }
    
    .pay-contents-box:last-child .pay-contents-box-price {
        font-size: var(--m-font-50);
    }
    
    .pay-contents-box-bottom {
        padding: 55rem 50rem 80rem 50rem;
    }
    
    .pay-contents-box.agreement .pay-contents-box-bottom {
        padding: 70rem 50rem 80rem 50rem;
    }
    
    .pay-bottom-small-text {
        font-size: var(--m-font-26);
        /* margin-bottom: var(--m-space-15); */
    }
    
    .pay-bottom-detail-check-icon {
        image-rendering: -webkit-optimize-contrast;
        margin: var(--m-space-3) var(--m-space-5) 0 0;
    }
    
    .pay-bottom-detail-text {
        font-size: var(--m-font-28);
    }
    
    .pay-bottom-detail-add-text {
        font-size: var(--m-font-26);
        
        margin-top: var(--m-space-12);
        margin-bottom: var(--m-space-12);
    }
    
    .pay-bottom-detail-add-text2 {
        font-size: var(--m-font-20);
    }
    
    .pay-etc-text-wrapper {
        padding-top: var(--m-space-50);
    }
    
    .pay-etc-text {
        font-size: var(--m-font-26);
        color: #666;
    }
    
    .pay-contents-box-agreement {
        font-size: 56rem !important;
        font-weight: 700 !important;
        line-height: 52rem !important;
        color: #01359f !important;
        height: fit-content !important;
    }
    
    /* section9 */
    .section9 {
        padding: var(--m-space-80) var(--m-space-50) var(--m-space-150);
    }
    
    .section9 .content-wrapper {
        gap: var(--m-space-50);
    }
    
    .crm-container {
        padding: var(--m-space-70) var(--m-space-50);
    }
    
    .crm-left-right-wrapper {
        gap: var(--m-space-70);
    }
    
    .crm-info-container {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: var(--m-space-20);
        margin-bottom: var(--m-space-30);
        height: auto;
    }
    
    .crm-right-container .crm-info-container {
        margin-bottom: var(--m-space-40);
    }
    
    .crm-info-text-desc {
        font-size: var(--m-font-30);
    }
    
    .crm-checkbox {
        width: var(--m-size-30);
        height: var(--m-size-30);
    }
    
    .crm-private-txt {
        font-size: var(--m-font-22);
        font-weight: var(--weight-normal);
    }
    
    .crm-right-user-container {
        height: auto;
    }
    
    .input-wrapper {
        gap: unset;
        grid-template-rows: var(--m-size-60) var(--m-size-100) var(--m-size-100) var(--m-size-100) var(--m-size-210);
    }
    
    .crm-input {
        padding: var(--m-space-40) 0 var(--m-space-25);
        font-size: var(--m-font-30);
        border-bottom: var(--m-size-2) solid var(--color-white-eee);
    }
    
    .crm-input-company {
        padding-top: 0;
    }
    
    .crm-input-phone,
    .crm-input-email {
        grid-column: 1 / 3;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .crm-textarea-wrapper {
        height: var(--m-size-280);
    }
    
    .crm-textarea {
        margin-top: var(--m-space-50);
        font-size: var(--m-font-30);
        border-radius: var(--m-size-10);
    }
    
    .crm-input::placeholder,
    .crm-textarea::placeholder {
        padding-bottom: var(--m-space-5);
        font-size: var(--m-font-30);
    }
    
    .crm-submit-btn {
        max-width: unset;
        border-radius: 999px;
        background-color: #01359F;
        color: var(--color-white-fff);
        /*height: 48px;*/
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: var(--m-space-36) var(--m-space-120);
        font-size: var(--m-font-28);
    }
    
    /* footer */
    .footer {
        padding: var(--m-space-220) var(--m-space-50) var(--m-space-50);
    }
    
    .footer-top {
        flex-direction: column;
        gap: var(--m-space-50);
    }
    
    .footer-text-title-t {
        font-size: var(--m-font-36);
        text-align: center;
    }
    
    .footer-top-right {
        justify-content: space-between;
        width: 100%;
        max-width: var(--m-size-720);
        padding: 0 var(--m-space-80);
        gap: 60rem;
    }
    
    .footer-family-wrapper {
        flex-direction: column;
        gap: var(--m-space-30);
    }
    
    .footer-family-wrapper img {
        width: var(--m-size-82);
        height: var(--m-size-82);
    }
    
    .footer-family-m {
        display: block;
    }
    
    
    .footer-family-wrapper a {
        font-size: var(--m-font-28);
    }
    
    .footer-devider {
        margin: var(--m-space-80) 0;
        height: var(--m-size-2);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--m-space-60);
    }
    
    .footer-bottom img {
        width: var(--m-size-165);
    }
    
    .footer-bottom-left.footer_img_con {
        text-align: center;
    }
    
    .footer-bottom-right {
        text-align: center;
    }
    
    .footer-info-list {
        justify-content: center;
        gap: var(--m-space-30);
        margin-bottom: var(--m-space-36);
        font-size: var(--m-font-24);
    }
    
    .footer-company-address-m {
        gap: var(--m-space-10);
        margin-bottom: var(--m-space-10);
    }
    
    .footer-company-address-m span {
        font-size: var(--m-font-24);
    }
    
    .footer-company-address-m span:first-child {
        line-height: 1.5;
    }
    
    .footer-company-info .footer-company-contact {
        font-size: var(--m-font-22);
        margin-bottom: var(--m-space-30);
    }
    
    .footer-company-info .footer-company-copyright {
        font-size: var(--m-font-20);
    }
    
    /* display: none */
    .section1 .text-subtitle,
    .gnb-btn-logo,
    .section1-img-t,
    .content-img-t,
    .pay-contents-box-icon,
    .footer-family,
    .section1 .text-title-t,
    .dt-title,
    .dd-text-normal,
    .section7 .text-title,
    .section7 .text-desc,
    .section9 .text-title,
    .crm-checkbox-text,
    .dd-icon {
        display: none;
    }
    
    /* body font size */
    /* html {
        font-size: 0.13vw;
    } */
    html {
        font-size: 0.1538vw;
    }
}

.bottom-bg-container {
    container-type: inline-size;
    container-name: bottom-bg-container;
}

/* @supports (-webkit-touch-callout: none) and (max-width: 768px) {
    .footer-company-address-m {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-10);
        margin-bottom: var(--space-10);
    }
}

@supports (-webkit-touch-callout: none) and (max-width: 650px) {
    .footrer-info-list {
        gap: var(--m-space-30);
    }

    .footer-bottom {
        gap: var(--m-space-60);
    }

    .footer-company-address-m {
        gap: var(--m-space-10);
        margin-bottom: var(--m-space-10);
    }
} */

@media all and (min-width: 1921px) {
    html {
        font-size: var(--view-width-full);
    }

    .section_slide,
    .section1 .content-wrapper,
    .section5,
    .section6 {
        background-size: cover;
    }
}

/* T area */
@media all and (max-width: 1439px) {

    /* gnb area */
    .gnb-fixed {
        /* height: auto; */
        height: 100px;
        padding: 0;
    }

    .gnb-max-width {
        max-width: 944rem;
    }

    /* main */
    .section_slide {
        background: url("/image/intro/mv_bg.png?ver=2024070801") center top / cover no-repeat;
    }

    .carousel-item-bg1 {
        background: url("/image/intro/mv01_img.png?ver=2024070801") center center / 130% no-repeat;
    }

    .carousel-item-bg2 {
        background: url("/image/intro/mv02_img.png?ver=2024070801") center center / 130% no-repeat;
    }

    .section_slide .content-wrapper {
        max-width: 944rem;
    }

    .carousel-btn-wrapper {
        width: 944rem;
    }

    /* section */
    .section1 {
        height: auto;
        margin-bottom: 80rem;
    }

    .box-section {
        align-items: unset;
        flex-direction: column;
        margin: 0 40rem;
        max-width: 944rem;
        padding: 100rem 0 0;
    }

    .wide-section {
        width: 944rem;
        padding: 100rem 0 0;
    }

    .left-contents {
        width: 100%;
        padding-left: 60rem;
    }

    .right-contents {
        justify-content: flex-start;
        width: 100%;
        padding-left: 60rem;
    }

    .img-wrapper {
        width: 100%;
        padding-top: 60rem;
    }

    .section-img-t {
        display: block;
        float: right;
    }

    .section-wrapper .text-wrapper {
        width: 100%;
    }

    .section1 .content-wrapper {
        margin: 0 40rem;
        height: auto;
        background-image: none;
    }

    .section1 .img-wrapper {
        height: 512rem;
    }

    .section2,
    .section4 {
        display: flex;
        justify-content: center;
        margin-bottom: 80rem;
        height: auto;
    }

    .section2 .content-wrapper {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 0;
        height: auto;
        background-color: #f9f9f9 !important;
        background-image: none;
        border-radius: 20rem;
    }

    .section2 .img-wrapper {
        height: 580rem;
        background: url("/image/intro/contents_02_1_t.png?ver=2024070801") left bottom / contain no-repeat;
    }

    .section3 {
        height: auto;
    }

    .section3 .box-section {
        flex-direction: column-reverse;
        background-image: none;
    }

    .section3 .box-section {
        flex-direction: column-reverse;
        background-image: none;
    }

    .section3 .img-wrapper {
        height: 600rem;
        background: url("/image/intro/contents_03_1_t.png?ver=2024070801") right bottom / contain no-repeat;
    }

    .section4 {
        overflow: hidden;
        /* margin-bottom: 0; */
    }

    .section4 .content-wrapper {
        display: flex;
        flex-direction: column-reverse;
        height: auto;
        background-image: none;
        border-radius: 20rem;
    }

    .section4 .img-wrapper {
        height: 610rem;
    }


    /* section5 - crm */
    .crm-container {
        width: 944rem;
        padding: 60rem;
    }

    .crm-bottom-container {
        gap: 24rem;
    }

    .crm-text-title {
        margin-bottom: 30rem;
        font-size: 35rem;
    }

    /* footer */
    .footer .content-wrapper {
        max-width: 944rem;
    }

    .footer-text-title-t {
        display: block;
        color: var(--gray-color-1300);
        font-size: 25rem;
        font-weight: var(--font-medium);
        line-height: 1.4;
    }

    .footer-text-title-t b {
        color: var(--gray-color-1300);
        font-weight: var(--font-bold);
    }

    .footer-devider {
        margin: 45rem 0 50rem;
    }

    /* display: none */
    .footer-text-title {
        display: none;
    }

    .footer-company-info {
        .address {
            width: 100%;
        }

        li:nth-child(3) .vertical-devider {
            display: none;
        }
    }
}

/* ST area */
@media all and (max-width: 1024px) {

    /* common */
    .text-desc {
        font-size: 20rem;
    }

    /* gnb */
    .gnb-fixed,
    .gnb-fixed.scroll {
        padding: 25px 40px;
    }

    .gnb-max-width {
        /* margin: 0 40rem; */
        max-width: 1024rem;
    }

    .gnb-demo:hover {
        color: var(--primary-color);
        background-color: inherit;
    }

    .gnb-fixed.scroll .gnb-demo:hover {
        color: var(--primary-color);
        background-color: inherit;
    }

    /* carousel */
    .section_slide {
        margin-bottom: 275rem;
        height: fit-content !important;
        background: url("/image/intro/mv_bg_t.png?ver=2024070801") center top / auto no-repeat;
    }

    .carousel-item-bg1,
    .carousel-item-bg2 {
        background: none;
    }

    .section_slide .content-wrapper {
        max-width: unset;
    }

    .section_slide .text-wrapper {
        margin-bottom: 50rem;
        width: 100%;
        text-align: center;
        padding: 200rem 40rem 0;
    }

    .section_slide .text-title {
        margin: 30rem 0 10rem;
    }

    .sections-title .text-desc {
        margin: 10rem auto 30rem;
        width: 560rem;
        line-height: 1.4;
        word-break: keep-all;
    }

    .carousel-item-bg1 .text-desc {
        width: 100%;
    }

    .btn-carousel {
        margin-top: 40rem;
    }

    .btn-carousel:hover {
        box-shadow: none;
    }

    .carousel-item .carousel-img-t {
        display: block;
        width: 100%;
    }

    .carousel-btn-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: -48rem;
        width: 100%;
    }

    .btn-pause {
        margin-bottom: 3rem;
        margin-right: 15rem;
    }

    .carousel-indicators {
        justify-content: center;
        position: relative;
        margin: 0;
        width: fit-content;
    }

    /* section */
    .section-img-t {
        width: 100%;
    }

    .img-wrapper {
        padding-top: 0;
    }

    .section1 .img-wrapper {
        margin-top: 60rem;
        height: auto;
    }

    .section2 .img-wrapper {
        margin-top: 25rem;
        height: 53.516vw;
    }

    .section3 .img-wrapper {
        margin-top: 60rem;
        height: 51.66vw;
    }

    .section4 .img-wrapper {
        margin-top: 70rem;
        height: auto;
    }

    /* section6 - price / 가격표 */
    .section6 {
        height: 1053rem;
        background-image: url("/image/intro/price_t.jpg?ver=1");
    }

    .section5-footer-bg {
        background-image: url("/image/intro/counsel_bg_t.png?ver=2024070801");
        background-position-y: -1rem;
    }

    /* section5 - crm */
    .section5 {
        padding: 100rem 0;
    }

    .crm-container {
        width: 100%;
        padding: 50rem;
    }

    .crm-bottom-container {
        gap: 40rem;
    }

    .privacy-wrapper {
        margin: 0 100rem;
        width: calc(100% - 200rem);
    }

    /* footer */
    .footer-bottom {
        flex-direction: column;
        gap: 40rem;
    }

    .footer {
        padding: 0 0 60rem 0;
    }

    .footer .content-wrapper {
        margin: 0 40rem;
        width: auto;
    }

    .footer-text-title-t {
        font-size: 20rem;
        line-height: 1.4;
    }

    .footer-family-wrapper {
        margin-right: 24rem;
    }
}

/* M area */
@media screen and (max-width: 768px) {

    /* common */
    .btn-common {
        font-size: 24rem;
    }

    .text-title {
        font-size: 60rem;
    }

    .text-subtitle {
        font-size: 32rem;
    }

    .text-desc-m {
        color: var(--gray-color-1200);
        font-size: 30rem;
        font-weight: var(--font-light);
        line-height: 1.3;
    }

    /* gnb */
    .gnb-fixed,
    .gnb-fixed.scroll {
        padding: 36rem 50rem;
        height: auto;
    }

    .gnb-max-width {
        max-width: 720rem;
    }

    .gnb-logo-wrapper {
        width: 198rem;
    }

    .gnb-btn-logo-m {
        display: block !important;
        height: 60rem;
    }

    .gnb-demo {
        margin-right: 30rem;
        padding: 18rem 50rem;
        font-size: 26rem;
        border: 2rem solid var(--primary-color);
        border-radius: 40rem;
    }

    .btn-login {
        padding-top: 3rem;
        font-size: 28rem;
    }

    /* floating */
    .floating-container {
        gap: 25rem;
    }

    a.btn-news-wrapper {
        gap: 12rem;
        width: 160rem;
        height: 160rem;
        font-size: 18rem;

        img {
            content: url("/image/intro/icon_newsletter_m.png?ver=2024070801");
            width: 60rem;
        }
    }

    .btn-top-wrapper {
        width: 100rem;
        height: 100rem;

        img {
            content: url("/image/intro/btn_top_scroll_m.png?ver=2024070801");
            width: 32rem;
        }
    }

    /* carousel */
    .section_slide {
        margin-bottom: 280rem;
        background: url("/image/intro/mv_bg_m.png?ver=2024070801") center top / contain no-repeat;
    }

    .section_slide .text-wrapper {
        padding: 260rem 70rem 0;
    }

    .section_slide .text-title {
        margin: 50rem 0 30rem;
    }

    .carousel-item-bg1 .text-desc,
    .carousel-item-bg2 .text-desc {
        display: none;
    }

    .carousel-item-bg1 .text-desc-m,
    .carousel-item-bg2 .text-desc-m {
        display: block;
        height: 165rem;
    }

    .carousel-item .carousel-img-m {
        display: block;
        width: 100%;
    }

    .carousel-btn-wrapper {
        bottom: -30rem;
    }

    .btn-carousel {
        margin-top: 40rem;
        padding: 36rem 120rem;
        font-size: 28rem !important;
        border-radius: 55rem;
    }


    /* section */
    .sections-title {
        padding: 0 50rem;
    }

    .sections-title .text-title {
        margin: 0 auto;
        width: 100%;
        font-size: 60rem;
        font-weight: var(--font-light);
        letter-spacing: -1.6rem;
    }

    .sections-title .text-desc {
        margin: 30rem 0 50rem;
        width: 100%;
        font-size: 30rem;
    }

    .left-contents {
        padding: 0 0 0 40rem;
    }

    .right-contents {
        padding: 0 0 0 40rem;
    }

    .box-section {
        margin: 0 50rem !important;
        max-width: 720rem;
        padding: 100rem 0 0;
    }

    .section-wrapper .text-subtitle {
        margin-left: 15rem;
    }

    .text-contents {
        margin-top: 30rem;
        font-size: 32rem;
    }

    .section1,
    .section3,
    .section4 {
        margin-bottom: 100rem;
    }

    .section1 .img-wrapper {
        margin-top: 50rem;
    }

    .section-img-m {
        display: block;
        width: 100%;
    }

    .contents-icon-m {
        display: block;
        width: 42rem;
    }

    .section-wrapper .section-btn-wrapper {
        margin-top: 50rem;
    }

    .section-wrapper .btn-common {
        padding: 15rem 36rem 16rem;
        border-radius: 30rem;
    }

    .section-wrapper .btn-common:last-child {
        margin-left: 5rem;
    }

    .section2 .img-wrapper {
        margin-top: 0;
        height: 510rem;
        background: url("/image/intro/contents_02_1_m.png?ver=2024070801") left bottom / contain no-repeat;
    }

    .section3 .img-wrapper {
        margin-top: 0;
        height: 500rem;
        background: url("/image/intro/contents_03_1_m.png?ver=2024070801") right bottom / contain no-repeat;
    }

    .section4 .img-wrapper {
        margin-top: 50rem;
    }

    .section6 {
        height: 1688rem;
        background: url("/image/intro/price_m.jpg?ver=1") center top / contain no-repeat;
    }

    .section5-footer-bg {
        background: url("/image/intro/counsel_bg_m.png?ver=2024070801") center top / contain no-repeat;
    }

    /* section5 - crm */
    .section5 {
        padding: 200rem 0;
    }

    .section5 .content-wrapper {
        margin: unset;
    }

    .crm-container {
        margin: unset;
        max-width: unset;
        padding: 0 75rem;
        background-color: unset;
        box-shadow: unset;
    }

    .crm-left-container,
    .crm-right-container {
        width: unset;
    }

    .crm-text-title-m {
        display: block;
        margin-bottom: 60rem;
        color: var(--gray-color-1300);
        font-size: 60rem;
        font-weight: var(--font-bold);
        text-align: center;
        line-height: 1.3;
    }

    .crm-bottom-container {
        flex-direction: column;
        gap: 70rem;
    }

    .crm-textarea-wrapper {
        padding: 30rem 20rem 30rem 30rem;
        border-radius: 20rem;
    }

    .crm-private-txt {
        font-size: 22rem;
    }

    .crm-textarea-wrapper {
        height: 280rem;
    }

    .crm-right-user-container {
        margin-top: 34rem;
        height: auto;
    }

    .crm-left-container .crm-info-container {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 40rem;
        height: auto;
    }

    .crm-right-container .crm-info-container {
        justify-content: unset;
        align-items: flex-start;
        margin: 70rem 0 0;
        height: auto;
    }

    .crm-left-container .crm-check-box-wrapper {
        gap: 10rem;
    }

    .crm-left-container .crm-info-container:nth-child(2) {
        margin-top: 70rem;
    }

    .crm-left-container .crm-info-container:nth-child(2) .crm-check-box-wrapper {
        gap: 30rem 50rem;
    }

    .crm-info-text-desc {
        font-size: 28rem;
    }

    .crm-checkbox {
        width: 36rem;
        height: 36rem;
        border: 2rem solid var(--gray-color-600);
        border-radius: 8rem;
    }

    .crm-checkbox-text input:checked+.crm-checkbox::before {
        width: 24rem;
        height: 24rem;
        border: 4rem solid var(--white-color);
        border-radius: 4rem;
    }

    .crm-checkbox-text {
        gap: 10rem;
        font-size: 28rem;
    }

    .crm-right-container .crm-check-box-wrapper {
        gap: 8rem;
        width: 100%;
    }

    .crm-check-type {
        padding: 0 30rem;
        font-size: 28rem;
        line-height: 68rem;
        border-width: 2rem;
        border-radius: 40rem;
    }

    .crm-check-type.active {
        border-color: var(--gray-color-1300);
    }

    .input-wrapper {
        grid-template-rows: 55rem 75rem 75rem 75rem 75rem;
        gap: 16rem 30rem;
    }

    .crm-input {
        padding: 20rem 0;
        font-size: 28rem;
        border-bottom: 2rem solid var(--gray-color-500);
    }

    #company {
        grid-column: 1 / 3;
    }

    #empNum {
        padding-top: 20rem;
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    #name {
        grid-row: 3 / 4;
    }

    #jobTitle {
        grid-row: 3 / 4;
    }

    #email {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }

    #phone {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }

    .crm-submit-btn {
        margin-top: 30rem;
        padding: 28rem;
        font-size: 28rem;
        line-height: 1.5;
        border-radius: 20rem;
    }

    .privacy-wrapper {
        padding: 60rem;
        width: calc(100% - 80rem);
        height: calc(100% - 450rem);
    }

    .privacy-title {
        margin-bottom: 40rem;
        font-size: 36rem;
    }

    .private-desc {
        padding: 35rem 40rem !important;
        height: calc(100% - 75rem);
    }


    .private-desc textarea {
        font-size: 26rem;
        resize: none;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .private-desc textarea::-webkit-scrollbar {
        display: none;
    }


    /* footer */
    .footer {
        padding-bottom: 70rem;
    }

    .footer-top {
        flex-direction: column;
    }

    .footer-top-right {
        justify-content: space-between;
        width: 100%;
        padding: 0 80rem;
    }

    .footer-text-title-t {
        margin-bottom: 60rem;
        font-size: 36rem;
        text-align: center;
    }

    .footer-family-wrapper {
        flex-direction: column;
    }

    .footer-family-wrapper:not(:last-child) {
        margin-right: 0;
    }

    .footer-family-wrapper img {
        margin-right: 0;
        width: 82rem;
        height: 82rem;
    }

    .footer-family-wrapper span {
        margin-top: 15rem;
        color: var(--gray-color-1200) !important;
        font-size: 28rem;
    }

    .footer-devider {
        margin: 80rem 0;
        height: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 80rem;
    }

    .footer-bottom img {
        width: 165rem;
        height: auto;
    }


    .footer-info-list {
        gap: 50rem;
        margin: 50rem 0;
        font-size: 24rem;
    }

    .footer-company-info {
        flex-direction: column;
        gap: 20rem;

        li p {
            font-size: 22rem;
            text-decoration: none;

            b {
                margin-right: 20rem;
            }
        }
    }

    .vertical-devider {
        display: none;
    }

    .footer-company-copyright {
        margin-top: 30rem;
        font-size: 20rem;
    }

    .sns-lists {
        gap: 60rem;
    }

    .sns-lists li {

        a,
        a::after {
            width: 44rem;
            height: 36rem;
        }

        .sns-nv {
            background: url("/image/intro/btn_naver_m.png?ver=2024070801") center / 44rem 36rem no-repeat;
        }

        .sns-yt {
            background: url("/image/intro/btn_youtube_m.png?ver=2024070801") center / 44rem 36rem no-repeat;
        }

        .sns-li {
            background: url("/image/intro/btn_linked_in_m.png?ver=2024070801") center / 44rem 36rem no-repeat;
        }
    }

    .sns-lists li:hover {
        a::after {
            opacity: 0;
        }

        .sns-nv::after,
        .sns-yt::after,
        .sns-li::after {
            background: unset;
        }
    }

    .footer-family-m {
        display: block;
    }

    /* display: none */
    .gnb-fixed .gnb-btn-logo,
    .carousel-item .text-desc,
    .carousel-item .carousel-img-t,
    .contents-icon,
    .section-img-t,
    .crm-text-title,
    .footer-family {
        display: none;
    }

    /* body font size */
    html {
        font-size: var(--view-width-mobile);
    }
}