body {
}

a {
    color: inherit;
    text-decoration: none;
}

a, button {
    -webkit-tap-highlight-color: transparent;
}

a:focus {
    outline: none;
}

.kmsol_wrap {
    position: relative;
    z-index: 1;
}

.kong_competition_title h2, .test_title h2, .kong_brand_product_title h2, .mobile_part_title h2, .kong_power_part_title h2 {
    font-family: Pretendard-SemiBold, sans-serif;
    font-size: 52px;
    line-height: 1.2;
}

.kong_competition_title h2 span, .test_title h2 span, .kong_brand_product_title h2 span, .mobile_part_title h2 span {
    color: #93c157;
}

.kong_competition_title p, .test_title p, .kong_brand_product_title p, .mobile_part_title p {
    font-family: Pretendard-Light, sans-serif;
    font-size: 22px;
    color: #898989;
    box-sizing: border-box;
    padding-top: 30px;
}

.kong_power_part_title h2 {
    color: #ffffff;
}

.kong_power_part_title h2 span {
    color: #b6ff57;
}

.kong_power_part_title p {
    font-family: Pretendard-Light, sans-serif;
    font-size: 22px;
    color: #ffffff;
    box-sizing: border-box;
    padding-top: 30px;
}

.kong_power_part_img {
    position: relative;
}

.kong_power_part_img img:nth-child(2) {
    position: absolute;
    bottom: -3%;
    left: 68%;
}

.kong_competition_part {
    padding: 150px 0 0;
    background-image: url(/resources/img/kongshop/competition_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.kong_competition_title {
    text-align: center;
}

.kong_competition_img {
    padding: 50px 0 0;
    text-align: center;
}

.kong_power_part {
    padding: 250px 0;
    background-image: url(/resources/img/kongshop/powerdeal_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kong_power_part_title {
    margin-right: 6rem;
}

.kong_test_part {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.kong_test_box {
    position: relative;
    margin-right: 6rem;
}

.kong_test_box_slide {
    width: 410px;
    position: absolute;
    top: 35%;
    left: 10%;
}

.kong_test_box_slide > img {
}

.kong_brand_product {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7faff;
    padding: 100px 0;
}

.kong_brand_product_title {
    margin-right: 6rem;
}

.kong_brand_product_box {
    width: 628px;
    position: absolute;
    top: 25%;
    left: 0%;
}

.kong_brand_product_img {
    position: relative;
}

.kong_mobile_part {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 250px 0 100px;
}

.kong_mobile_box {
    margin-right: 10rem;
}

.mobile_circle {
    width: 370px;
    height: 370px;
    border-radius: 275px;
    background-color: #cdf1dd;
    position: relative;
}

.kong_mobile_box_img {
    position: absolute;
    top: -9%;
    right: 2%;
}

.kong_mobile_box_deco {
    position: absolute;
    top: -43%;
    left: -24%;
}

.slick-slide.slick-current.slick-active {
    border: 1px solid red;
    box-shadow: 0 0 0 2px orangered inset;
    border-radius: 10px;
}

/* 기본 스타일 */
.kmsol_top_menu_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.kmsol_top_menu_list li {
    position: relative;
}

.kmsol_top_menu_list > li > a {
    display: block;
    padding: 15px 20px;
    color: #123;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.kmsol_top_menu_list > li > a:hover {
    color: rgba(56, 177, 83, 0.937255);
}

/* 서브 메뉴 스타일 */
.kmsol_top_menu_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(56, 177, 83, 0.937255);
    display: none;
    min-width: 150px;
    border-radius: 4px;
}

.kmsol_top_menu_list ul li a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    transition: background 0.3s;
}

.kmsol_top_menu_list ul li a:hover {
    background-color: rgba(47, 147, 206, 0.937255);
}

/* 마우스를 올리면 서브 메뉴 표시 */
.kmsol_top_menu_list li:hover > ul {
    display: block;
}

#top_menu_toggle .has-submenu ul {
    display: none;
    position: absolute;
    width: 150px;
    padding: 31px;
}

#top_menu_toggle li a {
    color: #123;
}

#top_menu_toggle li:hover ul {
    display: block;
}

#top_menu_toggle .has-submenu > ul > li > a {
    font-size: 16px;
    color: #fff;
}

#top_menu_toggle .has-submenu > ul > li {
    background: #43b175;
}

#top_menu_toggle .has-submenu > ul > li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#top_menu_toggle .has-submenu > ul > li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#top_menu_toggle .has-submenu > ul > li:hover {
    background: #3d9cc8;
}

.has-submenu {
    width: 100%;
}

.menu-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

#top_menu_toggle {
    display: flex;
    align-items: center;
    gap: 30px;
}

#top_menu_toggle > li > a {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgb(0 0 0 / 90%);
    /* 배경이 어두우니까 */
    padding: 0 !important;
}

.header-cta a {
    font-size: 18px;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/*뉴스*/
.news_link_section {
    padding: 80px 20px;
    background: #f8f9fb;
}

.news_link_inner {
    max-width: 1000px;
    margin: 0 auto;
}

.news_link_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news_link_btn {
    display: flex;
    align-items: center;
    gap: 27px;
    padding: 17px 26px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.news_link_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: #ccc;
}

.news_link_thumb {
    width: 135px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f1f1;
}

.news_link_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news_link_content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.news_link_media {
    width: 180px;
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.news_link_media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.news_link_title {
    font-size: 25px;
    font-weight: 700;
    color: #313131;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news_link_arrow {
    font-size: 30px;
    color: #999;
    flex-shrink: 0;
    margin-left: 12px;
}

/*두번째 섹션*/
.neo_stack_fill_section {
    position: relative;
    overflow: visible;
    padding: 150px 0;
    background: #05070a;
    color: #fff;
}

.neo_stack_fill_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.neo_stack_fill_bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 24%, rgba(0,255,148,0.16), transparent 30%), radial-gradient(circle at 84% 18%, rgba(0,162,255,0.13), transparent 28%), linear-gradient(180deg, #05070a 0%, #07110d 48%, #05070a 100%);
}

.neo_stack_fill_grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,255,148,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,148,0.045) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 92%);
}

.neo_stack_fill_glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(95px);
    opacity: 0.75;
    animation: neoStackGlow 9s ease-in-out infinite alternate;
}

.neo_stack_fill_glow_01 {
    width: 560px;
    height: 560px;
    left: -190px;
    top: 220px;
    background: rgba(0,255,148,0.24);
}

.neo_stack_fill_glow_02 {
    width: 660px;
    height: 660px;
    right: -260px;
    bottom: 120px;
    background: rgba(0,132,255,0.18);
    animation-delay: 1.2s;
}

.neo_stack_fill_inner {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 90px;
    align-items: flex-start;
}

.neo_stack_fill_left {
    position: sticky;
    top: 150px;
    align-self: flex-start;
    padding-top: 40px;
}

.neo_orb {
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), rgba(8,14,22,0.96));
    border: 1px solid rgba(0,255,148,0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px rgba(0,255,148,0.10), 0 0 42px rgba(0,255,148,0.05);
}

.neo_orb::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,148,0.10), transparent 72%);
    filter: blur(12px);
    z-index: -1;
    animation: neoOrbGlow 2.8s ease-in-out infinite alternate;
}

.neo_orb::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a2ff, #00ff94);
    box-shadow: 0 0 10px rgba(0,255,148,0.85), 0 0 18px rgba(0,162,255,0.42);
    animation: neoDataPulse 1.8s ease-in-out infinite;
}

.neo_stack_fill_left h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(44px, 5.5vw, 55px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.075em;
}

.neo_stack_fill_left h2 span {
    background: linear-gradient(90deg, #00ff94 0%, #8cffc8 48%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.neo_stack_fill_left p {
    margin: 32px 0 0;
    color: rgb(255 255 255 / 95%);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: -0.035em;
}

.neo_stack_fill_right {
    position: relative;
    padding: 40px 0;
}

.neo_stack_fill_line {
    position: absolute;
    left: 38px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: rgba(255,255,255,0.08);
    z-index: 1;
}

.neo_stack_fill_line::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 130px;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0,255,148,0.14), transparent 68%);
    filter: blur(16px);
}

.neo_stack_fill_progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, #00ff94, #7affc4);
    box-shadow: 0 0 18px rgba(0,255,148,0.9), 0 0 52px rgba(0,255,148,0.36);
}

.neo_stack_fill_cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-left: 101px;
}

.neo_stack_fill_card {
    position: relative;
    overflow: hidden;
    min-height: 256px;
    padding: 48px 58px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 34px 90px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.13);
    backdrop-filter: blur(24px);
    opacity: 0.42;
    transform: translateY(36px);
    transition: transform 0.65s cubic-bezier(.2,.8,.2,1), opacity 0.65s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.neo_stack_fill_card.is_active {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(0,255,148,0.26);
    box-shadow: 0 34px 90px rgba(0,0,0,0.42), 0 0 48px rgba(0,255,148,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
}

.neo_stack_fill_card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(0,255,148,0.13), transparent);
    transform: translateX(-120%);
    transition: transform 0.85s ease;
    z-index: 2;
}

.neo_stack_fill_card.is_active::before {
    transform: translateX(120%);
}

.neo_stack_fill_card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 34px;
    bottom: 34px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(to bottom, #00ff94, transparent);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 3;
}

.neo_stack_fill_card.is_active::after {
    opacity: 1;
}

.neo_stack_fill_gauge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,255,148,0.25), rgba(0,255,148,0.11), transparent);
    opacity: 0;
    transition: height 0.75s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease;
}

.neo_stack_fill_card.is_active .neo_stack_fill_gauge {
    height: 100%;
    opacity: 1;
}

.neo_stack_fill_icon {
    position: relative;
    z-index: 5;
    width: 74px;
    height: 74px;
    margin-bottom: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #9effd4, #00ff94 48%, #00a864 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 12px rgba(0,255,148,0.10), 0 0 55px rgba(0,255,148,0.38);
}

.neo_stack_fill_icon::before {
    content: "";
    position: absolute;
    inset: -17px;
    border-radius: 50%;
    border: 1px solid rgb(0 255 148 / 63%);
    animation: neoStackPulse 1.8s ease-in-out infinite;
}

.neo_stack_fill_icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.25));
}

.neo_stack_fill_card span, .neo_stack_fill_card h3, .neo_stack_fill_card p {
    position: relative;
    z-index: 5;
}

.neo_stack_fill_card span {
    display: block;
    margin-bottom: 14px;
    color: #00ff94;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.neo_stack_fill_card h3 {
    margin: 0;
    color: #fff;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.neo_stack_fill_card p {
    max-width: 560px;
    margin: 20px 0 0;
    color: rgb(255 255 255 / 89%);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.025em;
}

@keyframes neoStackGlow {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(80px, -42px) scale(1.12);
    }
}

@keyframes neoStackPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.45;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes neoOrbGlow {
    0% {
        opacity: 0.45;
        transform: scale(0.96);
    }

    100% {
        opacity: 0.85;
        transform: scale(1.04);
    }
}

@keyframes neoDataPulse {
    0%, 100% {
        transform: scale(0.72);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.28);
        opacity: 1;
    }
}

.neo_simple_orbit {
    position: relative;
    width: 48px;
    height: 48px;
    margin-bottom: 21px;
    border-radius: 50%;
    background: conic-gradient( from 0deg, transparent 0deg, transparent 42deg, rgba(0,162,255,0.35) 78deg, #00a2ff 120deg, #00ff94 185deg, #9dffe0 218deg, #00ff94 248deg, rgba(0,255,148,0.18) 292deg, transparent 330deg, transparent 360deg );
    -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%, #000 69%, transparent 71%);
    mask: radial-gradient(circle, transparent 56%, #000 58%, #000 69%, transparent 71%);
    filter: drop-shadow(0 0 14px rgba(0,255,148,0.28)) drop-shadow(0 0 34px rgba(0,162,255,0.18));
    animation: neoSimpleOrbitSpin 2.8s linear infinite;
}

.neo_orb {
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 34px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, rgba(255,255,255,0.06), rgba(8,14,22,0.96) );
    border: 1px solid rgba(0,255,148,0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px rgba(0,255,148,0.12);
    overflow: hidden;
    isolation: isolate;
}

/* 바깥 glow */
.neo_orb::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(0,255,148,0.12), transparent 72% );
    filter: blur(10px);
    z-index: -1;
}

/* 코드 텍스트 */
.neo_orb span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #00ff94;
    font-size: 14px;
    font-weight: 700;
    font-family: Consolas, Monaco, monospace;
    letter-spacing: -0.08em;
    text-shadow: 0 0 10px rgba(0,255,148,0.75);
    animation: neoCodePulse 1.8s ease-in-out infinite;
}

/* 회전 */
@keyframes neoOrbRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* pulse */
@keyframes neoCodePulse {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.96);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

/*섹션2*/
.section2_wrap {
    position: relative;
    overflow: hidden;
    padding: 180px 0 180px;
    background: linear-gradient(360deg, rgb(6 10 39 / 38%), rgb(11 34 69 / 23%)), url(/resources/img/section2_bg.jpg) center / cover no-repeat;
}

.section2_wrap::before {
    display: none;
}

.section2_inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.section2_title {
    text-align: center;
    margin-bottom: 70px;
}

.section2_title h2 {
    font-size: 52px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.section2_title h2 span {
    display: inline-block;
    color: #ffffff;
}

.section2_cards {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.section2_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 122px;
    padding: 28px 34px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.3s ease, transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.section2_card.show {
    opacity: 1;
    transform: translateY(0);
}

.section2_card:hover {
    transform: translateY(-4px);
    border-color: rgb(101 183 255 / 27%);
    box-shadow: 0 18px 40px rgb(25 255 255 / 9%);
}

.section2_card.active {
    background: linear-gradient(90deg, #0c84ff 0%, #003373 100%);
    border-color: rgba(255, 255, 255, 0.15);
}

.card_text {
    position: relative;
    z-index: 2;
    flex: 1;
}

.card_label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 800;
    color: #00d9ff;
    letter-spacing: -0.01em;
}

.section2_card h3 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.section2_card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.section2_card.active .card_label, .section2_card.active h3, .section2_card.active p {
    color: #ffffff;
}

.feature_icon {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: #0b0d14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature_icon img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.section2_card.active .feature_icon {
    background: #0a0c12;
}

/* ===== 카테고리 탭 ===== */
/* ============================= */
/* 카테고리 전체 래퍼 */
/* ============================= */
.main_category_tabs {
    position: relative;
    z-index: 20;
    background: transparent !important;
    border: 0 !important;
    padding-top: 6px;
    padding-bottom: 0;
    margin-bottom: -122px;
    transform: translateY(120px);
}

/* ============================= */
/* 떠있는 다크 글래스 박스 */
/* ============================= */
.main_category_inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: rgba(7, 15, 30, 0.45) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 23px;
    box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* ============================= */
/* í–‰ */
/* ============================= */
.main_category_inner .category_row {
    display: grid;
    grid-template-columns: 190px 1fr;
    margin: 0;
    padding: 0;
}

.main_category_inner .category_row + .category_row {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ============================= */
/* 왼쪽 라벨 */
/* ============================= */
.main_category_inner .category_label {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    background: rgba(8, 18, 38, 0.88) !important;
    /* 🔥 세로선 하나만 */
    border-right: 1px solid rgba(255,255,255,0.08);
}

.main_category_inner .category_label.accent {
    color: #ffffff !important;
    background: rgba(8, 18, 38, 0.94) !important;
}

/* ============================= */
/* 오른쪽 리스트 */
/* ============================= */
.main_category_inner .category_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

/* 🔥 핵심: 기존 border 전부 제거 */
.main_category_inner .category_list li {
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
}

/* 🔥 세로선은 여기서만 생성 (겹침 방지) */
.main_category_inner .category_list li + li {
    border-left: 1px solid rgba(255,255,255,0.08);
}

.main_category_inner .category_list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 10px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88) !important;
    background: #747bb11a !important;
    /* 🔥 기존 inset 라인 제거 (겹침 원인) */
    box-shadow: none;
    transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.main_category_inner .category_list li a:hover {
    color: #ffffff !important;
    background: #2d70efde !important;
    box-shadow: none;
}

/* 활성 메뉴 */
.main_category_inner .category_list li.is-active {
    background: rgba(37, 99, 235, 0.20) !important;
}

.main_category_inner .category_list li.is-active a {
    color: #ffffff !important;
    /* background: rgb(26 36 91 / 22%) !important; */
    font-weight: 700;
    box-shadow: none;
}

/* ============================= */
/* 메인 배너 */
/* ============================= */
.main_visual, .km_main_visual, .hero_section, .visual_section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 1;
}

/* ===== í–‰ ===== */
.category_row {
    display: grid;
    grid-template-columns: 180px 1fr;
    border-bottom: 1px solid #474747;
    /* border-left:1px solid #e5e7eb; */
    /* border-right:1px solid #e5e7eb; */
    padding-left: 10px;
}

.category_row:last-child {
    border-bottom: none;
}

/* ===== 왼쪽 라벨 ===== */
/* ===== 우측 테이블 ===== */
.category_list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    /* ← 세로선 시작 */
    /* font-size: 1.8em; */
}

/* ⭐ 핵심: 셀 높이 통일 */
.category_list li {
    display: flex;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: #f8fafc;
}

/* 마지막 세로선 제거 */
.category_list li:last-child {
    border-right: none;
}

/* ===== 링크 ===== */
.category_list li a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 10px;
    font-size: 0.85em;
    color: #374151;
    font-weight: 500;
    line-height: 1.3;
    transition: .15s ease;
}

/* hover */
.category_list li a:hover {
    background: #edf3f8;
    color: #111827;
}

/* ===== ✅ active (셀 안에서만 pill) ===== */
.category_list li.is-active a {
    font-weight: 700;
}

/* =========================
   📱 모바일
========================= */
/*section3*/
.main_section3_wrap {
    padding: 200px 0;
}

.main_section3 {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

.main_section3_wrap {
    display: flex;
    justify-content: center;
}

/* 글래스 패널 */
.section3_panel {
    position: relative;
    width: 100%;
    max-width: 1600px;
    border-radius: 32px;
    overflow: hidden;
}

/* 파란 글래스 PNG */
.panel_bg {
    width: 100%;
    display: block;
}

/* ë‚´ìš© */
.section3_content {
    position: absolute;
    inset: 0;
    padding: 120px 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 타이틀 */
.section3_title {
    max-width: 700px;
    margin-bottom: 90px;
}

.section3_badge {
    display: inline-flex;
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid rgba(124,243,255,.4);
    color: #7cf3ff;
    font-size: 13px;
    margin-bottom: 20px;
}

.section3_title h2 {
    font-size: 56px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

/* 카드 */
.section3_cards {
    display: flex;
    gap: 50px;
}

.section3_item {
    flex: 1;
    color: #fff;
}

.section3_item img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 24px;
}

.section3_item h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 14px;
}

.section3_item p {
    font-size: 22px;
    line-height: 1.7;
    color: #fff;
}

/*main4*/
.main_section4_wrap {
    position: relative;
    overflow: hidden;
    padding: 160px 0 200px;
    background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 70% );
}

.main_section4_wrap::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(circle at 18% 28%, rgba(69,176,73,0.12), transparent 55% ), radial-gradient(circle at 82% 72%, rgba(150,210,170,0.10), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.main_section4 {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: auto;
    justify-content: center;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.main_section4 .section4_left {
    max-width: 100%;
    text-align: left;
}

.main_section4 .section4_left h2 {
    margin-bottom: 20px;
    color: #111827;
    font-size: 56px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.main_section4 .section4_desc {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.7;
    margin-bottom: 32px;
    color: #4b5563;
}

.main_section4 .section4_desc br {
    display: none;
}

.main_section4 .section4_list {
    margin-bottom: 36px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.main_section4 .section4_list li {
    font-size: 20px;
    color: #334155;
    font-weight: 600;
    padding-left: 22px;
    position: relative;
}

.main_section4 .section4_list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: 900;
}

.main_section4 .section4_btn {
    display: inline-block;
    width: auto;
    text-align: center;
    font-size: 20px;
    padding: 14px 28px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #3590CF, #45B049);
    box-shadow: 0 12px 28px rgba(53,144,207,.35);
    transition: .2s;
}

.main_section4 .section4_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(53,144,207,.45);
}

.section4_mockup {
    position: relative;
    height: 520px;
}

.section4_mockup img {
    position: absolute;
    width: 305px;
    border-radius: 32px;
    transition: .3s;
}

.section4_mockup .mockup_1 {
    top: 0;
    left: 40px;
    transform: rotate(-6deg);
    z-index: 2;
}

.section4_mockup .mockup_2 {
    top: -77px;
    left: 260px;
    transform: rotate(5deg);
    z-index: 1;
}

.section4_mockup img:hover {
    transform: scale(1.03);
}

/* 복지몰 사례 */
.welfare_section {
    padding: 160px 0 200px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,#f8fbff 0%,#ffffff 70%);
}

.welfare_section::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(circle at 18% 28%, rgba(53,144,207,0.12), transparent 55%), radial-gradient(circle at 82% 72%, rgba(180,200,220,0.10), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.welfare_inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 46% 54%;
    gap: 48px;
    align-items: flex-start;
}

.welfare_text {
    position: sticky;
    top: 120px;
    align-self: flex-start;
}

.welfare_text h2 {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111827;
    margin-bottom: 8px;
}

.welfare_subtitle {
    font-size: 24px;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 26px;
}

.welfare_desc {
    font-size: 17px;
    line-height: 1.7;
    color: #475569;
    max-width: 560px;
    margin-bottom: 22px;
}

.welfare_list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px 0;
    display: grid;
    gap: 9px;
}

.welfare_list li {
    font-size: 18px;
    color: #334155;
    font-weight: 600;
    padding-left: 22px;
    position: relative;
}

.welfare_list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 900;
}

.welfare_btn {
    display: inline-block;
    width: auto;
    text-align: center;
    font-size: 20px;
    padding: 14px 28px;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 12px 28px rgba(53, 144, 207, .35);
    transition: .2s;
; }

.welfare_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(59,130,246,0.25);
}

/* 카드 레이아웃 */
.welfare_cards {
    display: grid;
    grid-template-columns: repeat(2,330px);
    gap: 16px 18px;
    justify-content: start;
    position: relative;
}

.welfare_card {
    width: 330px;
    height: 410px;
    border-radius: 18px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 14px 34px rgba(0,0,0,0.07);
    transition: .25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.welfare_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 26px 70px rgba(53,144,207,0.18);
    border-color: rgba(53,144,207,0.32);
}

.welfare_card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.welfare_card h3 {
    padding: 16px 18px 6px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
}

.welfare_card p {
    padding: 0 18px 16px;
    font-size: 18px;
    line-height: 1.55;
    color: #64748b;
}

/* 카드 미세 오프셋 (콩샵 느낌) */
.welfare_card:nth-child(odd) {
    transform: translateX(-12px);
}

.welfare_card:nth-child(even) {
    transform: translateX(12px);
    margin-top: 36px;
}

/*섹션5*/
.main_section5_wrap {
    position: relative;
    width: 100%;
    padding: 160px 0 200px;
    overflow: hidden;
}

.main_section5_wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/resources/img/solution_benefits_bg.jpg") no-repeat center/cover;
    opacity: 0;
    transform: scale(1.08);
    transition: transform 1.2s ease, opacity 1.2s ease;
    z-index: 0;
}

.main_section5_wrap.active::before {
    opacity: 1;
    transform: scale(1);
}

.main_section5_wrap > * {
    position: relative;
    z-index: 1;
}

.main_section5_wrap > * {
    position: relative;
    z-index: 1;
}

.kmsol_step_wrap {
    position: relative;
    overflow: hidden;
}

.kmsol_step_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.kmsol_step_bg img {
    position: absolute;
    width: 100%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    top: -300px;
}

.main_section5 {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

.section5_title h3 {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #222;
    margin-bottom: 50px;
}

.section5_title h2 {
    font-size: 56px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #222;
    margin-bottom: 20px;
}

.section5_title h2 .reveal_text {
    position: relative;
    display: inline;
    z-index: 1;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    vertical-align: baseline;
    color: #fff;
    margin: 0 auto;
}

/* 배경 박스 */
.section5_title h2 .reveal_text::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: -0.08em;
    bottom: -0.06em;
    background: #2563eb;
    border-radius: 0px;
    z-index: -1;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.section5_title h2 .reveal_text.active::after {
    transform: scaleX(0);
}

.section5_title h2 .reveal_text.active {
    color: #2563eb;
}

.section5_cards {
    display: flex;
    gap: 40px;
}

.section5_card {
    flex: 1;
    background: #ffffff8f;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 28px 36px;
    color: #222;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(40px);
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.main_section5_wrap.active .section5_card {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.main_section5_wrap.active .section5_card:nth-child(1) {
    transition-delay: 0.3s;
}

.main_section5_wrap.active .section5_card:nth-child(2) {
    transition-delay: 0.6s;
}

.main_section5_wrap.active .section5_card:nth-child(3) {
    transition-delay: 0.9s;
}

.main_section5_wrap.active .section5_card:nth-child(4) {
    transition-delay: 1.1s;
}

.section5_card .num {
    display: block;
    font-size: 57px;
    font-weight: 700;
    color: #2563eb ;
    margin-bottom: 14px;
}

.section5_card h3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 12px;
}

.section5_card p {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}

.card_icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card_icon img {
    width: 50px;
    height: 48px;
}

/*섹션6*/
@keyframes scrollMove {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

.scroll_icon {
    position: absolute;
    left: 50%;
    bottom: 158px;
    /* 위치 조절 */
    transform: translateX(-50%);
    z-index: 4;
}

/* 마우스 모양 */
.scroll_icon {
    width: 26px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 20px;
    opacity: 0.9;
}

/* 안에 움직이는 점 */
.scroll_icon span {
    display: block;
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    margin: 6px auto 0;
    animation: scrollMove 1.5s infinite;
}

.main_section6_wrap.section6_card_ver {
    padding: 230px 0 200px;
    background-image: url('/resources/img/back_test.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section6_card_ver .main_section6 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.section6_card_ver .section6_title {
    max-width: 760px;
    /* text-align: center; */
}

.section6_card_ver .section6_title h2 {
    font-size: 52px;
    line-height: 1.25;
    font-weight: 700;
    color: #111;
    margin: 0;
    letter-spacing: -0.03em;
}

.section6_card_ver .section6_desc {
    margin-top: 41px;
    font-size: 17px;
    line-height: 1.7;
    color: #222;
    letter-spacing: -0.02em;
}

/* 카드 리스트 */
.section6_card_ver .s6_card_list {
    display: flex;
    gap: 24px;
    margin-top: 80px;
    opacity: 0;
    transform: translateY(250px);
    transition: all 2.3s ease;
}

/* 등장 상태 */
.section6_card_ver.show .s6_card_list {
    opacity: 1;
    transform: translateY(0);
}

/* 카드 */
.section6_card_ver .s6_card_item {
    width: calc(25% - 18px);
}

.section6_card_ver .s6_card_box {
    position: relative;
    height: 510px;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all .35s ease;
}

/* 이미지 */
.bg1 {
    background-image: url('/resources/img/km_benefit_01.png');
}

.bg2 {
    background-image: url('/resources/img/km_benefit_02.png');
}

.bg3 {
    background-image: url('/resources/img/km_benefit_03.png');
}

.bg4 {
    background-image: url('/resources/img/km_benefit_04.png');
}

/* 기본 어두운 그라데이션 */
.section6_card_ver .s6_card_box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.85) 100% );
    z-index: 1;
}

/* hover 어둡게 */
.section6_card_ver .s6_card_box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
}

.section6_card_ver .s6_card_box:hover::after {
    opacity: 1;
}

/* 중앙 텍스트 */
.section6_card_ver .s6_card_center {
    position: absolute;
    top: 79%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 24px;
    text-align: center;
    z-index: 3;
    transition: transform .35s ease;
}

/* 제목 */
.section6_card_ver .s6_card_center h3 {
    color: #fff;
    font-size: 29px;
    font-weight: 600;
    margin: 0;
}

/* 설명 */
.section6_card_ver .s6_card_desc {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    opacity: 0;
    transform: translateY(12px);
    transition: all .35s ease;
}

/* hover 효과 */
.section6_card_ver .s6_card_box:hover .s6_card_center {
    transform: translate(-50%, -60%);
}

.section6_card_ver .s6_card_box:hover .s6_card_desc {
    opacity: 1;
    transform: translateY(0);
}

/* 카드 hover 상승 */
.section6_card_ver .s6_card_box:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* 반응형 */
/*섹션7*/
.main_section7_wrap {
    padding: 160px 0 220px;
    position: relative;
    background: linear-gradient(180deg, rgb(0 0 0 / 75%), rgba(10, 25, 47, 0.96)), url(/resources/img/section7_bg.png) center / cover no-repeat;
    overflow: hidden;
}

.main_section7 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.section7_title {
    margin-bottom: 90px;
    text-align: center;
}

.section7_title h2 {
    color: #ffffff;
    font-size: 56px;
    font-weight: 700;
    margin-top: 18px;
    letter-spacing: -0.02em;
}

.section7_title .ks_about_kicker {
    color: #7dd3fc !important;
}

.section2_title .ks_about_kicker {
    color: #7dd3fc !important;
}

.main_section8 .ks_about_kicker {
    color: #ffffff !important;
}

.section7_cards {
    display: flex;
    gap: 16px;
}

.section7_card {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.section7_card.show {
    opacity: 1;
    transform: translateY(0);
}

.section7_thumb {
    height: 270px;
    background: #4ea3ff;
    overflow: hidden;
}

.section7_thumb img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section7_card:hover .section7_thumb img {
    transform: scale(1.05);
}

.section7_caption {
    background: rgba(0,0,0,0.9);
    padding: 19px 21px;
    text-align: left;
}

.section7_caption p {
    margin: 0 0 4px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.section7_caption span {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 1.4;
}

.section7_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 0 2px #4ea3ff;
}

.section7_card:hover .section7_thumb img {
    transform: scale(1.04);
    transition: transform 0.45s ease;
}

.section7_icon::before {
    content: "";
    width: 54px;
    height: 54px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-network::before {
    background-image: url("/resources/img/kmsol_work_place1.png");
}

.icon-distributed::before {
    background-image: url("/resources/img/kmsol_work_place2.png");
}

.icon-error::before {
    background-image: url("/resources/img/kmsol_work_place3.png");
}

.icon-legacy::before {
    background-image: url("/resources/img/kmsol_work_place4.png");
}

/*섹션8*/
.main_section8 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 보여질 때 */
.main_section8.show {
    opacity: 1;
    transform: translateY(0);
}

.main_section8_wrap {
    padding: 150px 0 150px;
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
    background: #000;
}

.main_section8_video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.main_section8_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.main_section8 {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section8_left {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section8_left h2 {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.25;
    margin: 24px 0;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.section8_left p {
    font-size: 20px;
    line-height: 1.7;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}

.kmsol-consult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    height: 56px;
    padding: 0 32px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.9);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.kmsol-consult-btn:hover {
    background: linear-gradient(90deg, #1c1c1c, #2a2a2a);
}

.kmsol-consult-btn .arrow {
    display: inline-block;
    margin-left: 6px;
    animation: arrowFlow 1.6s ease-in-out infinite;
}

@keyframes arrowFlow {
    0% {
        transform: translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateX(6px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.6;
    }
}

/*메인 포트폴리오 부분*/
.main_section9_spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient( circle at 50% 50%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 18%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.85) 100% );
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
    transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.main_section9_wrap.main_section9_parallax {
    position: relative;
    overflow: hidden;
    min-height: 880px;
    background: #0b0b0d;
}

/* 실제 움직이는 배경 */
.main_section9_bg {
    position: absolute;
    top: -50px;
    left: -50px;
    width: calc(100% + 100px);
    height: calc(100% + 100px);
    z-index: 1;
    background-image: url('/resources/img/port_polio.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translate3d(0, 40px, 0) scale(1.14);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 1.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}

/* 어두운 오버레이 */
.main_section9_overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.80) 50%, rgba(0, 0, 0, 0.80) 70%, rgba(0, 0, 0, 0.65) 100% );
    opacity: 0;
    transition: opacity 1s ease;
}

.main_section9 {
    position: relative;
    z-index: 3;
    max-width: 1600px;
    min-height: 1030px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_section9_content {
    text-align: center;
    transform: translateY(40px);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}

.main_section9_title {
    margin: 0;
    color: #fff;
    font-size: 58px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.045em;
    word-break: keep-all;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.main_section9_title .count_num {
    display: inline-block;
    min-width: 2.9ch;
    font-size: 1.4em;
    letter-spacing: -5.02px;
    font-weight: 700;
}

.main_section9_desc {
    margin: 34px 0 0;
    color: rgb(255 255 255);
    font-size: 22px;
    line-height: 1.7;
    font-weight: 500;
    word-break: keep-all;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.main_section9_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 277px;
    height: 61px;
    margin-top: 46px;
    padding: 0 11px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transform: translateY(24px);
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .9s cubic-bezier(0.22, 1, 0.36, 1), opacity .8s ease;
}

/* 화면 진입 시 */
.main_section9_wrap.active .main_section9_bg {
    transform: translate3d(0, 0, 0) scale(1.06);
    opacity: 1;
}

.main_section9_wrap.active .main_section9_overlay {
    opacity: 1;
}

.main_section9_wrap.active .main_section9_content {
    transform: translateY(0);
    opacity: 1;
}

.main_section9_wrap.active .main_section9_btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
}

/* hover */
.main_section9_btn:hover {
    background: #fff;
    color: #111;
    border-color: #fff;
    transform: translateY(-2px);
}

/* 태블릿 */
/* 모바일 */
/*footer*/
#footer {
    max-width: 1500px;
    margin: 0 auto;
    padding: 50px 10px;
}

.footer_logo {
    margin-bottom: 20px;
}

.footer_content span {
    font-weight: 600;
    margin-top: 18px;
    color: #9ca3af;
    display: block
}

/*inquiry_content*/
.inquiry_page {
    position: relative;
    min-height: 100vh;
    padding: 48px 20px 80px;
    overflow: hidden;
    background: radial-gradient(circle at 20% 75%, rgb(0 56 255 / 25%) 0%, rgb(30 66 193 / 8%) 20%, transparent 45%), radial-gradient(circle at 80% 20%, rgb(23 52 255 / 18%) 0%, transparent 40%), linear-gradient(120deg, #000 0%, #020a16 35%, #031b2d 55%, #000 100%);
}

.inquiry_content {
    max-width: 760px;
    margin: 0 auto;
}

.main_wrap h2 {
    display: none;
}

/* 상단 비주얼 */
.inquiry_visual {
    margin-bottom: 20px;
    padding-top: 100px;
}

.inquiry_visual__inner {
    position: relative;
    overflow: hidden;
    min-height: 140px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: radial-gradient(circle at 40% 70%, rgba(40, 76, 255, 0.95) 0%, rgba(40, 76, 255, 0.2) 10%, rgba(0,0,0,0) 22%), radial-gradient(circle at 58% 35%, rgba(0, 163, 255, 0.30) 0%, rgba(0,0,0,0) 25%), linear-gradient(115deg, #020202 0%, #02111f 38%, #031423 55%, #000 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.inquiry_visual__inner::before {
    content: "";
    position: absolute;
    top: -40px;
    right: 22%;
    width: 180px;
    height: 240px;
    background: linear-gradient(180deg, rgba(0,153,255,0.35), rgba(0,153,255,0));
    filter: blur(10px);
    transform: rotate(25deg);
    opacity: 0.9;
}

.inquiry_visual__inner::after {
    content: "";
    position: absolute;
    top: -30px;
    right: 10%;
    width: 120px;
    height: 220px;
    background: linear-gradient(180deg, rgba(66,130,255,0.18), rgba(66,130,255,0));
    filter: blur(8px);
    transform: rotate(25deg);
}

.inquiry_visual__text {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 34px 32px;
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
    word-break: keep-all;
}

/* 폼 박스 */
.inquiry_form_box {
    background: linear-gradient(180deg, #232323 0%, #171717 100%);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.04);
}

.inquiry_content form {
    max-width: 100%;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.form_section + .form_section {
    margin-top: 28px;
}

.form_section_title {
    margin: 0 0 18px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 0;
}

.form_row {
    margin-bottom: 18px;
}

.inquiry_content label {
    display: block;
    margin-bottom: 8px;
    color: #f3f6fb;
    font-size: 15px;
    font-weight: 700;
}

.inquiry_content label span, .inquiry_content label em {
    color: #4d8dff;
    font-style: normal;
}

.inquiry_content input[type="text"], .inquiry_content input[type="tel"], .inquiry_content input[type="email"], .inquiry_content input[type="url"], .inquiry_content input[type="number"], .inquiry_content input[type="file"], .inquiry_content select, .inquiry_content textarea {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: #555;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.inquiry_content textarea {
    height: 140px;
    padding: 16px;
    resize: vertical;
    font-family: 'Pretendard', sans-serif;
}

.inquiry_content input[type="file"] {
    padding: 12px 16px;
    line-height: normal;
    background: #4e4e4e;
}

.inquiry_content input::placeholder, .inquiry_content textarea::placeholder {
    color: rgba(255,255,255,0.55);
}

.inquiry_content select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #cfd8ea 50%), linear-gradient(135deg, #cfd8ea 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.inquiry_content input:focus, .inquiry_content select:focus, .inquiry_content textarea:focus {
    border-color: #2890ff;
    box-shadow: 0 0 0 3px rgba(40, 144, 255, 0.15);
    background: #5c5c5c;
}

/* 체크박스 영역 */
.check_group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 14px 16px;
    background: #2b2b2b;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.check_item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #e9eefc !important;
    font-weight: 500 !important;
    cursor: pointer;
}

.inquiry_content input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #3150f0;
    flex: 0 0 auto;
}

.check_item span {
    color: #e9eefc;
    font-size: 14px;
    font-weight: 500;
}

/* 개인정보 */
.privacy_check {
    margin-bottom: 14px;
}

.agree_item {
    justify-content: flex-start;
}

.privacy_policy {
    height: 200px;
    overflow: hidden;
    overflow-y: auto;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: #111;
}

.privacy_policy > p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-line;
}

.privacy_policy > p > b {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-weight: 700;
}

/* 안내문구 / 버튼 */
.form_notice {
    margin: 18px 0 14px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.submit_btn {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #2f49df 0%, #3554f6 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.submit_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(49, 80, 240, 0.35);
    background: linear-gradient(90deg, #2f49df 0%, #3554f6 100%);
}

.submit_btn:active {
    transform: translateY(0);
}

.mobile-menu-wrap {
    display: none;
}

/* 반응형 */
/*kongshop*/
/*kong_platform_part*/
.kong_platform_part {
    background-image: url(/resources/img/kongshop/platform_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.platform_content {
    display: flex;
    justify-content: center;
    padding: 150px 0 60px 0;
}

.platform_content li {
    width: 280px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px 0;
    box-sizing: border-box;
    font-family: Pretendard-SemiBold, sans-serif;
    font-size: 25px;
    margin: 0 30px 30px 0;
    display: flex;
    align-items: center;
    height: 70px;
}

.platform_content li p {
    padding-left: 20px;
    box-sizing: border-box;
    width: 60%;
}

.platform_content img {
    padding-left: 20px;
    box-sizing: border-box;
}

.platform_title {
    max-width: 1300px;
    text-align: center;
    margin: 0 auto;
    color: #ffffff;
    font-family: Pretendard-Medium, sans-serif;
    font-size: 35px;
    padding-bottom: 150px;
    box-sizing: border-box;
    line-height: 1.2;
}

.platform_title p > span {
    font-weight: 600;
}

.ks_about_wrap {
    width: 100%;
    padding: 80px 20px;
    background: url(https://kmsol.kr/resources/img/kmsol_bg.png);
}

.ks_about_inner {
    max-width: 1500PX;
    margin: 0 auto;
}

.ks_about_section {
    padding: 52px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ks_about_section:last-child {
    border-bottom: 0;
}

.ks_about_head {
    margin: 133px 0 33px;
}

.ks_about_kicker {
    --mint: #359bb9;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border-radius: 999px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #2563eb;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 3px 0 35px;
    border: 1px solid;
}

.ks_about_title {
    font-size: 43px;
    line-height: 1.25;
    letter-spacing: -0.8px;
    color: #000000;
    font-weight: 800;
    padding: 0px 0 12px;
}

.ks_about_subtitle {
    margin-top: 12px;
    font-size: 25px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: rgb(59 59 59 / 72%);
}

.ks_about_body {
    display: grid;
    gap: 12px;
}

.ks_about_desc {
    font-size: 19px;
    line-height: 1.8;
    letter-spacing: -0.2px;
    color: rgb(0 0 0 / 78%);
}

.ks_service_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.ks_service_card {
    background: rgb(255 255 255);
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 16px;
    padding: 18px 18px 30px;
}

.ks_service_card_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ks_service_num {
    font-size: 17px;
    font-weight: 800;
    color: #03A9F4;
    background: rgb(192 212 255 / 22%);
    border: 1px solid rgb(0 80 255 / 35%);
    padding: 6px 20px;
    border-radius: 999px;
    margin: 10px;
}

.ks_service_title {
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: #575757;
    font-weight: 800;
    margin: 0;
    flex: 1;
    text-align: right;
}

.ks_service_list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
}

.ks_service_item {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: rgb(0 0 0 / 78%);
}

.ks_history_list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.ks_history_item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.ks_history_year {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: #000000;
    margin: 0;
}

.ks_history_text {
    font-size: 19px;
    line-height: 1.7;
    letter-spacing: -0.2px;
    color: rgb(20 20 20 / 78%);
    margin: 0;
    display: flex;
    align-items: center;
}

.ks_patent_grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
}

.ks_patent_card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
    transition: transform .25s ease,box-shadow .25s ease,opacity .7s ease,transform .7s ease;
    opacity: 0;
    transform: translateY(22px);
}

.ks_patent_card.is_show {
    opacity: 1;
    transform: translateY(0);
}

.ks_patent_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.ks_patent_top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.ks_patent_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: max-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.2px;
    background: rgba(0,0,0,.06);
    color: rgba(0,0,0,.72);
}

.ks_patent_badge.ks_patent_badge_on {
    background: rgba(0,0,0,.82);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ks_patent_badge.ks_patent_badge_on::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);
    animation: ks_patent_pulse 2.2s ease-in-out infinite;
}

@keyframes ks_patent_pulse {
    0% {
        transform: scale(.7);
        opacity: .0;
    }

    35% {
        opacity: .7;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.ks_patent_title {
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.3px;
    margin: 0;
    color: rgba(0,0,0,.88);
}

.ks_patent_en {
    font-size: 18px;
    line-height: 1.45;
    margin: 0;
    color: rgba(0,0,0,.55);
}

.ks_patent_meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.03);
    margin-bottom: 12px;
}

.ks_patent_row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ks_patent_key {
    width: 110px;
    flex: 0 0 110px;
    margin: 0;
    font-size: 12px;
    color: rgba(0,0,0,.55);
}

.ks_patent_val {
    margin: 0;
    font-size: 13px;
    color: rgba(0,0,0,.85);
    word-break: break-word;
}

.ks_patent_desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(0,0,0,.72);
}

.ks_patent_card.is_show:nth-child(1) {
    transition-delay: .08s;
}

.ks_patent_card.is_show:nth-child(2) {
    transition-delay: .16s;
}

.ks_patent_card.is_show:nth-child(3) {
    transition-delay: .24s;
}

.ks_patent_card.is_show:nth-child(4) {
    transition-delay: .32s;
}

/*포트폴리오*/
/*공통*/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section_head {
    margin-bottom: 48px;
}

.section_head h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1e2a3a;
}

.section_head .desc {
    font-size: 22px;
    color: #6b7c93;
    line-height: 1.6;
}

/*메인*/
.pf-dev-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* 중요: 이미지 튀어나오는거 막음 */
    border-radius: 18px;
}

.pf-dev-item:hover .pf-dev-thumb img {
    transform: scale(1.08);
    /* 살짝 확대 */
}

.pf-dev-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
    /* 부드럽게 */
}

.kmsol_portpolio_hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 110px;
    color: #fff;
}

.kmsol_portpolio_bg_video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.kmsol_portpolio_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(8, 15, 30, 0.72) 0%, rgba(8, 15, 30, 0.45) 45%, rgba(8, 15, 30, 0.68) 100% );
    z-index: 1;
}

.kmsol_portpolio_hero .kmsol_company_inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kmsol_portpolio_hero .kmsol_company_kicker {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #dbeafe;
}

.kmsol_portpolio_hero .kmsol_company_hero_title {
    color: #ffffff;
    max-width: 900px;
}

.kmsol_portpolio_hero .kmsol_company_hero_subtitle {
    color: rgba(255,255,255,0.88);
    max-width: 820px;
}

/* 히어로 아래 전체 영역 */
.portfolio_dark_wrap {
    background: #0a0a0a;
    color: #ffffff;
}

/* 공통 */
.section_head {
    text-align: center;
    margin-bottom: 48px;
}

.section_head h2 {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
}

.section_head .desc {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,0.72);
}

/* 포트폴리오 유형 */
.pf-dev-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0 160px;
    background: #0a0a0a;
}

.pf-dev-bg {
    position: absolute;
    inset: 0;
    background: url('/resources/img/test_kmsol.jpg') center center / cover no-repeat;
    pointer-events: none;
}

.pf-dev-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
}

.pf-dev-section .container {
    position: relative;
    z-index: 2;
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.pf-dev-header {
    text-align: center;
    margin-bottom: 80px;
    padding: 0 24px;
}

.pf-dev-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

.pf-dev-header p {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
}

.pf-dev-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.pf-dev-track {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    padding: 0 24px;
    animation: portfolioMarquee 36s linear infinite;
}

.pf-dev-item {
    flex: 0 0 auto;
    width: 360px;
    /* 기존보다 크게 */
}

.pf-dev-item img {
    width: 360px;
    height: 360px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

.pf-dev-item p {
    margin-top: 14px;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    font-weight: 600;
}

@keyframes portfolioMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 12px));
    }
}

/* 프로젝트 유형 */
.portfolio_types {
    padding: 120px 0;
    background: #0a0a0a;
}

.portfolio_types .container {
    max-width: 1180px;
}

.portfolio_types .section_head {
    grid-column: 1 / -1;
    margin-bottom: 20px;
}

.portfolio_types .section_head {
    text-align: center;
    margin-bottom: 56px;
}

.portfolio_types .section_head h2 {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
}

.portfolio_types .section_head .desc {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,0.72);
}

.type_card:hover .type_footer {
    background: rgba(255,255,255,0.1);
    color: #60a5fa;
    transform: translateY(-2px);
}

.type_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.type_hint {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    margin: 6px 0 5px;
    pointer-events: none;
}

.type_hint_arrow {
    position: relative;
    width: 18px;
    height: 18px;
    opacity: 0.9;
    animation: hintFloat 1.8s ease-in-out infinite;
}

.type_hint_arrow::before, .type_hint_arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.type_hint_arrow::before {
    top: 0;
    width: 2px;
    height: 18px;
    background: linear-gradient( 180deg, rgba(96,165,250,0) 0%, rgba(96,165,250,0.95) 100% );
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(96,165,250,0.35);
}

.type_hint_arrow::after {
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #60a5fa;
    border-bottom: 2px solid #60a5fa;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0 0 10px rgba(96,165,250,0.18);
}

@keyframes hintFloat {
    0% {
        transform: translateY(-4px);
        opacity: 0.45;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }

    100% {
        transform: translateY(-4px);
        opacity: 0.45;
    }
}

.type_card {
    position: relative;
    min-height: 326px;
    padding: 20px 22px 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
}

.type_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: radial-gradient( circle, #60a5fa 0%, rgba(96,165,250,0.6) 40%, transparent 100% );
    pointer-events: none;
    /* 핵심 */
}

.type_card:hover {
    transform: translateY(-6px);
    border-color: rgba(59,130,246,0.45);
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}

.type_badge {
    min-width: 102px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #25c7d9 0%, #357cff 100%);
    margin-bottom: 26px;
}

.type_icon {
    width: 50px;
    height: 50px;
    margin: 10px auto 18px;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 63%;
    background-color: rgba(255,255,255,0.04);
}

/* 1번 */
.type_card:nth-child(1) .type_icon {
    background-image: url('/resources/img/km_icon_01.png');
}

/* 2번 */
.type_card:nth-child(2) .type_icon {
    background-image: url('/resources/img/km_icon_02.png');
}

/* 3번 */
.type_card:nth-child(3) .type_icon {
    background-image: url('/resources/img/km_icon_03.png');
}

/* 4번 */
.type_card:nth-child(4) .type_icon {
    background-image: url('/resources/img/km_icon_04.png');
}

/* 제목 */
.type_card h3 {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    word-break: keep-all;
}

.type_card p {
    font-size: 1.1em;
    line-height: 1.8;
    color: rgba(255,255,255,0.78);
    margin: -3px 0 10px;
    word-break: keep-all;
}

.type_footer {
    margin-top: 15px;
    width: 100%;
    min-height: 28px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 800;
    color: #ffffff;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.type_link {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    opacity: 0.92;
}

/* 실제 구축 프로젝트 */
.portfolio_projects {
    position: relative;
    padding: 120px 0;
    background: radial-gradient( 900px circle at 80% 20%, rgba(0, 120, 255, 0.12), transparent 40% ), radial-gradient( 800px circle at 20% 80%, rgba(0, 160, 120, 0.14), transparent 45% ), radial-gradient( 600px circle at 50% 50%, rgba(0, 80, 200, 0.08), transparent 50% ), linear-gradient( to bottom, #0a0a0a 0%, #0a0a0a 20%, rgba(10, 10, 10, 0.6) 40%, rgba(10, 10, 10, 0.6) 60%, #0a0a0a 80%, #0a0a0a 100% ), #0a0a0a;
}

.project_result_controls {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.result_badge {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #ffffff;
}

.result_badge:empty {
    display: none;
}

.result_reset {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.result_reset:hover {
    color: #ffffff;
}

.project_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.project_item {
    display: flex;
    gap: 22px;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}

.project_item:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 18px 38px rgba(0,0,0,0.35);
}

.project_thumb {
    width: 210px;
    height: 145px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #141414;
    cursor: pointer;
}

.project_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.project_item:hover .project_thumb img {
    transform: scale(1.04);
}

.project_body h3 {
    margin-bottom: 12px;
    font-size: 21px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.4;
}

.project_body .badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ffffff;
}

.project_body p {
    font-size: 0.9em;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
}

/* CTA */
.portfolio_cta {
    padding: 120px 24px 140px;
    text-align: center;
    background: radial-gradient( ellipse at bottom center, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0.18) 25%, rgba(37, 99, 235, 0.08) 45%, rgba(10, 10, 10, 1) 70% ), #0a0a0a;
}

.portfolio_cta h2 {
    font-size: 38px;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #ffffff;
    font-weight: 800;
}

.btn_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 34px;
    border-radius: 999px;
    background: #ffffff;
    color: #0a0a0a;
    font-weight: 800;
    font-size: 17px;
    text-decoration: none;
    transition: all .25s ease;
}

.btn_primary:hover {
    transform: translateY(-2px);
    background: #f2f2f2;
}

/* 오버레이 */
.image_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.image_overlay[hidden] {
    display: none !important;
}

.overlay_inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.overlay_inner img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 14px;
    display: block;
}

.overlay_close {
    position: absolute;
    top: -42px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.overlay_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    font-size: 34px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.overlay_nav.prev {
    left: -70px;
}

.overlay_nav.next {
    right: -70px;
}

#overlayImage {
    opacity: 0;
    transition: opacity .25s ease;
}

#overlayImage.is-loaded {
    opacity: 1;
}

.overlay_index {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(255,255,255,.82);
}

.overlay_badge {
    position: absolute;
    top: -38px;
    left: 0;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: #ffffff;
}

/* 반응형 */
/* */
.dev_swiper_section {
    padding: 28px 0;
    max-width: 1920px;
    margin: 0 auto;
}

.dev_swiper_header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px 0;
}

.dev_swiper_title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}

.dev_swiper_desc {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.65;
}

.dev_swiper {
    position: relative;
}

/* 카드 유리(Glassmorphism) 느낌 */
.dev_card {
    height: 220px;
    border-radius: 16px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: url(https://kmsol.kr/resources/img/260112_kmsol_bg3.png);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    background-size: cover;
}

/* 유리 반사 하이라이트 */
.dev_card::before {
    content: "";
    position: absolute;
    left: -30%;
    top: -40%;
    width: 160%;
    height: 140%;
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.40), rgb(255 255 255 / 7%) 55%); */
    transform: rotate(8deg);
    pointer-events: none;
}

/* 살짝 테두리 라이트 */
.dev_card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.20);
    pointer-events: none;
}

/* 텍스트 가독성 */
.dev_card_category {
    color: #fff;
}

.dev_card_title {
    font-size: 29px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* dev_card_text 그라데이션 텍스트 느낌 */
.dev_card_text {
    font-size: 18px;
    line-height: 1.45;
    margin-top: 2px;
    position: relative;
    z-index: 1;
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 호버 효과(데스크탑) */
@media (hover: hover) {
    .dev_card {
    }

    .dev_card:hover {
    }
}

/* 모바일 높이만 살짝 */
.dev_swiper_nav {
    position: absolute;
    right: 0;
    top: -54px;
    display: flex;
    gap: 8px;
}

.dev_swiper_btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    cursor: pointer;
    position: relative;
}

.dev_swiper_prev::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-left: 2px solid rgba(0,0,0,0.55);
    border-bottom: 2px solid rgba(0,0,0,0.55);
    transform: rotate(45deg);
}

.dev_swiper_next::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(0,0,0,0.55);
    border-top: 2px solid rgba(0,0,0,0.55);
    transform: rotate(45deg);
}

.dev_swiper .swiper-pagination {
    position: relative;
    margin-top: 14px;
}

.dev_swiper .swiper-pagination-bullet {
    opacity: 0.25;
    background: #fff;
}

.dev_swiper .swiper-pagination-bullet-active {
    opacity: 0.85;
}

.welfare_example_swiper_wrap {
    width: 100%;
    padding: 30px 0;
}

.welfare_example_swiper {
    width: 100%;
}

.welfare_example_swiper_slide {
    border-radius: 14px;
    overflow: hidden;
}

.welfare_example_swiper_img {
    width: 100%;
    display: block;
}

.portfolio_wrap {
    width: 100%;
    background: url(/resources/img/kmsol_bg.png);
    background-size: cover;
}

.portfolio_container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 160px 24px 200px;
}

.portfolio_title {
    margin: 0 0 65px;
    text-align: center;
    font-size: 55px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.portfolio_title_em {
    color: #1e76ff;
    font-weight: 700;
    font-size: 55px;
}

.portfolio_grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
}

.portfolio_left {
    width: 440px;
    flex: 0 0 440px;
}

.portfolio_badge {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 900;
    color: #03A9F4;
    font-size: 31px;
    margin: 0 0 14px;
}

.portfolio_badge_small {
    font-weight: 800;
    font-size: 30px;
    vertical-align: super;
}

.portfolio_name {
    margin: 0 0 10px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.portfolio_desc {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
    color: #4b5563;
}

.portfolio_divider {
    height: 1px;
    background: #e5e7eb;
    margin: 28px 0 14px;
}

.portfolio_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.portfolio_pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portfolio_btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #0066ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    background: #fff;
}

.portfolio_btn svg {
    width: 16px;
    height: 16px;
}

.portfolio_count {
    font-size: 14px;
    color: #111;
    letter-spacing: -0.01em;
}

.portfolio_count_now {
    color: #1e76ff;
    font-weight: 800;
}

.portfolio_more {
    font-size: 20px;
    font-weight: 700;
    color: #374151;
}

.portfolio_more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portfolio_right {
    flex: 1;
    min-width: 0;
}

.portfolio_phones {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 24px;
}

.portfolio_phone_item {
    flex: 0 0 auto;
}

.portfolio_phone_item.is_big {
    width: 324px;
    background: url(/resources/img/phone_border.png);
    padding: 7px 2px;
    background-size: cover;
    height: 645px;
}

.portfolio_phone_item.is_small {
    position: relative;
    width: 324px;
    background: url(/resources/img/phone_border.png);
    padding: 7px 2px;
    background-size: cover;
    height: 645px;
}

.portfolio_phone_media {
    width: 92%;
    border-radius: 34px;
    overflow: hidden;
    height: 635px;
    position: relative;
    left: 15px;
    top: 9px;
    background: #fff;
    z-index: 1;
}

.portfolio_phone_item.is_small::before {
    position: absolute;
    content: '';
    background: url('https://kmsol.kr/resources/img/kmsol_logo.png') no-repeat;
    background-size: contain;
    /* 이미지가 잘리지 않도록 추가 */
    width: 64px;
    height: 38px;
    /* 정렬 핵심 */
    left: 50%;
    transform: translateX(-50%);
    /* 가로만 중앙 정렬할 때 */
    /* 위치 조정 (505% 대신 구체적인 px이나 % 사용 권장) */
    top: 44%;
    opacity: 0.2;
    z-index: 3;
}

.portfolio_phone_img {
    width: 100%;
    display: block;
}

.portfolio_mobile_video {
    width: 100%;
}

.portfolio_mobile_video_el {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 33px;
}

.welfare_logo_swiper {
    width: 100%;
    overflow: hidden;
}

.welfare_logo_swiper .swiper-wrapper {
    align-items: center;
    transition-timing-function: linear !important;
    padding: 0 0 40px
}

.welfare_logo_swiper .swiper-slide {
    width: auto !important;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.welfare_logo_swiper .swiper-slide img {
    height: 44px;
    max-width: 140px;
    object-fit: contain;
    display: block;
}

.welfare_logo_swiper .swiper-slide p {
    font-size: 13px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    display: none;
}

/* ======================================== */
/* HEADER */
/* ======================================== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: block;
    z-index: 1000;
}

/* ======================================== */
/* HEADER WRAP */
/* ======================================== */
.kmsol_header_wrap {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
}

.kmsol_header_wrap > div, .kmsol_header_inner {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 72px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    transition: width 0.35s ease, max-width 0.35s ease, padding 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, transform 0.35s ease;
}

/* ======================================== */
/* SCROLLED HEADER */
/* ======================================== */
.kmsol_header_wrap.is-scrolled {
    padding-top: 0;
    border-bottom: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    pointer-events: none;
}

.kmsol_header_wrap.is-scrolled > div, .kmsol_header_wrap.is-scrolled .kmsol_header_inner {
    width: calc(100% - 180px);
    max-width: 1380px;
    transform: translateY(18px);
    padding: 14px 32px;
    background-color: rgba(5, 8, 20, 0.88);
    background-image: none;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.02);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}

/* ======================================== */
/* LOGO */
/* ======================================== */
.kmsol_header_logo_wrap, .kmsol_logo_wrap {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    width: auto;
    flex-shrink: 0;
}

.kmsol_header_logo_wrap a, .kmsol_logo_wrap a {
    position: relative;
    display: flex;
    align-items: center;
}

.kmsol_header_logo_wrap img, .kmsol_logo_wrap img {
    display: block;
    height: 25px;
    width: auto;
}

.logo-default {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.kmsol_header_wrap.is-scrolled .logo-default {
    opacity: 0;
}

.kmsol_header_wrap.is-scrolled .logo-white {
    opacity: 1;
}

/* ======================================== */
/* MENU */
/* ======================================== */
.kmsol_header_menu_container {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.kmsol_header_top_menu, .kmsol_top_menu {
    width: auto;
    padding-right: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.kmsol_header_menu_list, .kmsol_top_menu_list, #top_menu_toggle {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
}

.kmsol_header_menu_list li, .kmsol_top_menu_list li, #top_menu_toggle li {
    margin: 0;
    padding: 0;
    flex: initial;
    flex-shrink: 0;
    display: block;
}

.kmsol_header_menu_list a, .kmsol_top_menu_list a, #top_menu_toggle a, .header-menu a {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
    transition: color 0.25s ease;
}

.kmsol_header_menu_list a:hover, .kmsol_top_menu_list a:hover, #top_menu_toggle a:hover, .header-menu a:hover {
    color: #8ec5ff;
}

.kmsol_header_wrap.is-scrolled .kmsol_header_menu_list a, .kmsol_header_wrap.is-scrolled .kmsol_top_menu_list a, .kmsol_header_wrap.is-scrolled #top_menu_toggle a, .kmsol_header_wrap.is-scrolled .header-menu a {
    color: #fff;
}

/* ======================================== */
/* CTA */
/* ======================================== */
.kmsol_header_cta_wrap, .header-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.kmsol_header_cta_btn, .header-cta a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 12px 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    border: 0;
    letter-spacing: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kmsol_header_cta_btn::before, .header-cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3590cf, #8bc34a);
    z-index: -2;
}

.kmsol_header_cta_btn::after, .header-cta a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.22);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.kmsol_header_cta_btn:hover::after, .header-cta a:hover::after {
    opacity: 1;
}

.kmsol_header_cta_btn:hover, .header-cta a:hover {
    transform: translateY(-1px);
    color: #fff;
}

/* ======================================== */
/* DESKTOP HAMBURGER OFF */
/* ======================================== */
.kmsol_header_menu_toggle_btn, #menu-toggle, .mobile-hamburger, .mobile-menu-overlay {
    display: none;
}

/* ======================================== */
/* LAYOUT RESET */
/* ======================================== */
body {
    margin: 0;
    padding: 0;
}

main, #main, .main_full_wrap, .main_wrap, .wrap, .container {
    margin-top: 0;
    padding-top: 0;
}

main > section:first-child, #main > section:first-child, .kmsol_main_visual, .main_visual, .visual_wrap, .main_slide, .hero_section {
    margin-top: 0;
    padding-top: 120px;
}

/* ======================================== */
/* DESKTOP RESPONSIVE */
/* ======================================== */
/* ======================================== */
/* MOBILE */
/* ======================================== */
body:not(.mobile-menu-open) .mobile-hamburger span:nth-child(1) {
    transform: translateY(0) rotate(0);
}

body:not(.mobile-menu-open) .mobile-hamburger span:nth-child(2) {
    transform: translateY(0) rotate(0);
    opacity: 1;
}

body:not(.mobile-menu-open) .mobile-hamburger span:nth-child(3) {
    transform: translateY(0) rotate(0);
}

/* ======================================== */
/* SMALL MOBILE */
/* ======================================== */
/* ======================================== */
/* DESKTOP ONLY FIX */
/* ======================================== */
@media (min-width: 1025px) {
    .mobile-hamburger, .mobile-menu-overlay {
        display: none;
    }

    #header.kmsol_header_wrap .kmsol_header_menu_list a, #header.kmsol_header_wrap .kmsol_top_menu_list a, #header.kmsol_header_wrap #top_menu_toggle a, #header.kmsol_header_wrap .header-menu a {
        color: #fff !important;
    }

    #header.kmsol_header_wrap .kmsol_header_menu_list a:hover, #header.kmsol_header_wrap .kmsol_top_menu_list a:hover, #header.kmsol_header_wrap #top_menu_toggle a:hover, #header.kmsol_header_wrap .header-menu a:hover {
        color: #8ec5ff !important;
    }
}

/*----------------*/
.ks_history_wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 16px 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ks_history_head {
    margin: 0 0 22px;
}

.ks_history_title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #111;
}

.ks_history_desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.ks_history_group {
    margin: 18px 0 0;
    border-radius: 16px;
    border: 1px solid #e9e9e9;
    background: #fff;
    overflow: hidden;
    flex: 0 0 auto;
    width: 49%;
}

.ks_history_group_head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.ks_history_year {
}

.ks_history_year_line {
    flex: 1;
    height: 1px;
    background: #e6e6e6;
}

.ks_history_group_body {
    position: relative;
    padding: 14px 16px 16px;
}

.ks_history_group_body::before {
    content: "";
    position: absolute;
    left: 42px;
    top: 14px;
    bottom: 16px;
    width: 2px;
    background: #efefef;
    border-radius: 2px;
}

.ks_history_row {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    padding: 10px 0;
}

.ks_history_row::before {
}

.ks_history_row + .ks_history_row {
    border-top: 1px dashed #efefef;
}

.ks_history_month {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #111;
    text-align: center;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 999px;
    /* opacity: 0; */
}

.ks_history_month_empty {
    color: #9a9a9a;
    border-color: #f0f0f0;
    background: #fcfcfc;
}

.ks_history_text {
    word-break: keep-all;
}

.ks_history_group {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease,transform .7s ease;
}

.ks_history_group.is_show {
    opacity: 1;
    transform: translateY(0);
}

.ks_history_group_head {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease,transform .6s ease;
}

.ks_history_group.is_show .ks_history_group_head {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .05s;
}

.ks_history_row {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease,transform .55s ease;
}

.ks_history_group.is_show .ks_history_row {
    opacity: 1;
    transform: translateY(0);
}

.ks_history_group.is_show .ks_history_row:nth-child(1) {
    transition-delay: .10s;
}

.ks_history_group.is_show .ks_history_row:nth-child(2) {
    transition-delay: .18s;
}

.ks_history_group.is_show .ks_history_row:nth-child(3) {
    transition-delay: .26s;
}

.ks_history_group.is_show .ks_history_row:nth-child(4) {
    transition-delay: .34s;
}

.ks_history_group.is_show .ks_history_row:nth-child(5) {
    transition-delay: .42s;
}

.ks_history_group.is_show .ks_history_row:nth-child(6) {
    transition-delay: .50s;
}

.ks_history_group.is_show .ks_history_row:nth-child(7) {
    transition-delay: .58s;
}

.ks_history_group.is_show .ks_history_row:nth-child(8) {
    transition-delay: .66s;
}

.solution_page_wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.solution_header {
    text-align: center;
    margin-bottom: 70px;
}

.solution_title {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #111;
}

.solution_sub_title {
    margin-top: 12px;
    font-size: 18px;
    color: #777;
    line-height: 1.6;
}

.solution_content {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.solution_main {
    flex: 1;
    padding: 44px 42px;
    border: 1px solid #eee;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.solution_main_title {
    font-size: 35px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #111;
    text-align: center;
}

.solution_main_desc {
    margin-top: 10px;
    font-size: 21px;
    color: #666;
    text-align: center;
}

.solution_badge {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    background: #f4f6ff;
    border: 1px solid #e6e9ff;
}

.solution_mockup {
    margin-top: 28px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.solution_mockup img {
    width: calc(50% - 8px);
    border-radius: 16px;
    border: 1px solid #f1f1f1;
    background: #fafafa;
}

.solution_main_footer {
    margin-top: 28px;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.3px;
}

.solution_main_footer strong {
    color: #ff3b3b;
}

.solution_cards {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.solution_card {
    padding: 26px 18px;
    border: 1px solid #eee;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.solution_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.08);
    border-color: #e2e2e2;
}

.solution_card img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin-bottom: 14px;
}

.solution_card_desc {
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    min-height: 44px;
}

.solution_card_title {
    display: block;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #111;
}

/* 샘플 사이트 */
.solution_sample_wrap {
    margin-top: 80px;
    padding: 60px 20px;
    border: 1px solid #eee;
    border-radius: 28px;
    background: #fff;
}

.solution_sample_header {
    text-align: center;
    margin-bottom: 36px;
}

.solution_sample_title {
    font-size: 38px;
    font-weight: 800;
    color: #111;
}

.solution_sample_desc {
    margin-top: 10px;
    font-size: 18px;
    color: #777;
}

.sample_site_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sample_site_item {
    border: 1px solid #eee;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}

.sample_site_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.sample_site_thumbnail {
    height: 330px;
    background-size: cover;
    background-position: center;
}

.sample_site_name {
    margin: 16px 16px 0;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    text-align: center;
}

.sample_site_buttons {
    display: flex;
    gap: 10px;
    padding: 14px 16px 20px;
}

.sample_site_btn {
    flex: 1;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
    color: #111;
    text-decoration: none;
}

.sample_site_btn.mobile {
    background: #fff2f2;
    border-color: #ffc6c6;
    color: #ff3b3b;
}

.sample_site_image_1 {
    background-image: url("/resources/img/sample_1.jpg");
}

.sample_site_image_2 {
    background-image: url("/resources/img/sample_2.jpg");
}

.sample_site_image_3 {
    background-image: url("/resources/img/sample_3.jpg");
}

.sample_site_image_4 {
    background-image: url("/resources/img/sample_4.jpg");
}

.sample_site_image_5 {
    background-image: url("/resources/img/sample_5.jpg");
}

.sample_site_image_6 {
    background-image: url("/resources/img/sample_6.jpg");
}

.sample_site_image_7 {
    background-image: url("/resources/img/sample_7.jpg");
}

.sample_site_image_8 {
    background-image: url("/resources/img/sample_8.jpg");
}

.sample_site_image_9 {
    background-image: url("/resources/img/sample_9.jpg");
}

.sample_site_image_10 {
    background-image: url("/resources/img/sample_10.jpg");
}

.sample_site_image_11 {
    background-image: url("/resources/img/sample_11.jpg");
}

.sample_site_image_12 {
    background-image: url("/resources/img/sample_12.jpg");
}

.sample_site_image_13 {
    background-image: url("/resources/img/sample_13.jpg");
}

/* 찾아오시는 길 */
.page_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}

.page_header {
    margin-bottom: 18px;
    text-align: center;
}

.page_title {
    margin: 0;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #111;
}

.page_sub_title {
    margin-top: 12px;
    font-size: 18px;
    color: #777;
    line-height: 1.6;
}

.page_content_grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 18px;
    margin-top: 18px;
}

.ui_card {
    background: #fff;
    border: 1px solid rgba(16,17,18,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16,17,18,0.06);
}

.ui_card_header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(16,17,18,0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ui_card_header_left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui_card_title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.ui_card_sub_title {
    margin: 0;
    font-size: 13px;
    color: #606573;
    line-height: 1.55;
}

.ui_card_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f2f4ff;
    border: 1px solid rgba(74,92,255,0.14);
    color: #2a38c7;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ui_card_body {
    padding: 18px;
}

.ui_divider {
    height: 1px;
    background: rgba(16,17,18,0.06);
    margin: 14px 0;
}

.ui_icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
}

.ui_button_row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.ui_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(16,17,18,0.12);
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.01em;
    transition: transform .05s ease;
}

.ui_button:active {
    transform: scale(0.99);
}

.ui_button_primary {
    background: #101114;
    color: #fff;
    border-color: #101114;
}

.ui_button_secondary {
    background: #f6f7fb;
    border-color: rgba(16,17,18,0.10);
}

.ui_note_box {
    padding: 14px 14px;
    border-radius: 16px;
    background: #f6f7fb;
    border: 1px dashed rgba(16,17,18,0.16);
    color: #4a4f5a;
    font-size: 17px;
    line-height: 1.7;
}

.map {
    padding: 0;
}

.map_header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(16,17,18,0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.map_header_left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map_title {
    margin: 0;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.map_sub_title {
    margin: 0;
    font-size: 18px;
    color: #606573;
    line-height: 1.55;
}

.map_header_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f2f4ff;
    border: 1px solid rgba(74,92,255,0.14);
    color: #2a38c7;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.map_content {
    padding: 0;
}

.map_embed_area {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: linear-gradient(180deg,#f4f6ff 0%,#f6f7fb 100%);
}

.map_embed_iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map_footer {
    padding: 18px;
    border-top: 1px solid rgba(16,17,18,0.06);
}

.map_action_buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.map_action_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(16,17,18,0.12);
    background: #fff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.01em;
    transition: transform .05s ease;
}

.map_action_button:active {
    transform: scale(0.99);
}

.map_action_button_primary {
    background: #101114;
    color: #fff;
    border-color: #101114;
}

.company_info {
    padding: 0;
}

.company_info_header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(16,17,18,0.06);
}

.company_info_title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.company_info_sub_title {
    margin: 6px 0 0;
    font-size: 13px;
    color: #606573;
    line-height: 1.55;
}

.company_info_body {
    padding: 18px;
}

.company_info_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.company_info_item {
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(16,17,18,0.07);
    background: #fff;
    display: flex;
    align-items: center;
}

.company_info_item_icon {
    margin-top: 2px;
}

.company_info_item_label {
    min-width: 86px;
    font-size: 14px;
    color: #6a7080;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.company_info_item_value {
    font-size: 14px;
    color: #101114;
    line-height: 1.6;
    word-break: keep-all;
}

.company_info_compact_text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #4a4f5a;
}

.company_info_compact_text strong {
    color: #101114;
}

/*모바일 버전 인덱스*/
/*카테고리*/
:root {
    --svc-max: 1200px;
    --svc-pad: 24px;
    --svc-ink: #0f172a;
    --svc-sub: #475569;
    --svc-line: rgba(15,23,42,.10);
    --svc-soft: rgba(15,23,42,.06);
    --svc-accent: #2563eb;
}

.svc_page {
    color: var(--svc-ink);
    background: #fff;
}

.svc_container {
    max-width: var(--svc-max);
    margin: 0 auto;
    padding: 0 var(--svc-pad);
    opacity: 0;
    transform: translateY(32px);
    animation: svcFadeUp 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes svcFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.svc_section {
    padding: 100px 0;
}

.svc_section_alt {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.svc_section_head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.svc_h2 {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0;
    font-weight: 700;
    color: var(--svc-ink);
}

.svc_h3 {
    font-size: 21px;
    line-height: 1.35;
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--svc-ink);
}

.svc_p {
    margin: 0;
    color: var(--svc-sub);
    font-size: 18px;
    line-height: 1.8;
}

.svc_p2 {
    margin: 0;
    color: var(--svc-sub);
    font-size: 16px;
    line-height: 1.75;
}

.svc_badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.svc_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: .18s ease;
    white-space: nowrap;
}

.svc_btn_primary {
    background: var(--svc-accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37,99,235,.20);
}

.svc_btn_primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(37,99,235,.28);
}

.svc_btn_ghost {
    background: #fff;
    color: #475569;
    border-color: rgb(255 255 255);
}

.svc_hero {
    position: relative;
    padding: 200px 0px 150px 0px;
    color: #fff;
    background: linear-gradient(rgb(6 19 55 / 95%), rgb(0 0 0 / 13%)), url(/resources/img/hero_network.jpg) center / cover no-repeat;
}

.svc_hero_grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: center;
}

.svc_title {
    margin: 21px 0 31px;
    font-size: 48px;
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 700;
}

.svc_desc {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.8;
    max-width: 560px;
    letter-spacing: -0.01em;
    /* font-weight: 500; */
}

/* 노트북 */
/* 태블릿 */
/* 작은 태블릿 */
/* 모바일 */
/* 작은 모바일 */
.svc_cta_row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.svc_points {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 37px 0 0;
}

.svc_points li {
    border: 1px solid var(--svc-line);
    background: #fff;
    border-radius: 14px;
    padding: 15px 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    display: none;
}

.svc_points b {
    font-size: 16px;
    font-weight: 560;
    color: #000
}

.svc_points span {
    font-size: 15px;
    color: var(--svc-sub);
}

/* 카드 그리드 (배경 제거) */
.svc_card_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* 카드 */
/* 카드 */
.svc_card {
    padding: 28px 22px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    transition: all .3s cubic-bezier(.22, .61, .36, 1);
    position: relative;
    overflow: hidden;
}

/* 🔥 상단 1px 그라디언트 라인 */
.svc_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient( 90deg, rgba(0,113,227,0) 0%, rgba(0,113,227,0.65) 50%, rgba(0,113,227,0) 100% );
    opacity: 0;
    transform: translateY(-2px) scaleX(0.7);
    transform-origin: center;
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* hover */
.svc_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

/* 🔥 라인 부드럽게 등장 */
.svc_card:hover::before {
    opacity: 1;
    transform: translateY(0) scaleX(1);
}

/* 아이콘 영역 */
.svc_icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: #f5f5f7;
}

/* 아이콘 SVG */
.svc_icon svg {
    width: 18px;
    height: 18px;
    stroke: #1d1d1f;
}

/* 제목 */
.svc_card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
}

/* 설명 */
.svc_card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6e6e73;
}

/* 반응형 */
.svc_scope_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.svc_scope {
    border: 1px solid var(--svc-line);
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    transition: all .28s cubic-bezier(.22, .61, .36, 1);
    position: relative;
    overflow: hidden;
}

/* 🔥 1px 그라디언트 라인 */
.svc_scope::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient( 90deg, rgba(0,113,227,0) 0%, rgba(0,113,227,0.6) 50%, rgba(0,113,227,0) 100% );
    opacity: 0;
    transform: translateY(-2px) scaleX(0.7);
    transform-origin: center;
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* hover */
.svc_scope:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.12);
}

/* 🔥 라인 부드럽게 등장 */
.svc_scope:hover::before {
    opacity: 1;
    transform: translateY(0) scaleX(1);
}

/* 리스트 */
.svc_list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--svc-sub);
    font-size: 16px;
    line-height: 1.7;
}

.svc_capture_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.svc_capture_box {
    position: relative;
    border: 1px solid var(--svc-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.svc_capture_box:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
    border-color: rgba(15,23,42,.12);
}

.svc_cap_caption {
    padding: 12px 14px;
    border-top: 1px solid var(--svc-line);
    font-weight: 900;
    font-size: 14px;
}

.svc_hero_capture {
    position: relative;
    border: 1px solid var(--svc-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    min-height: 0px;
    box-shadow: 0 18px 60px rgba(15,23,42,.12);
}

.svc_capture_img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    max-height: 430px;
    object-position: top;
    border-radius: 22px;
}

.svc_h2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svc_dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #60a5fa;
    /* 하늘색 */
    box-shadow: 0 0 0 rgba(96,165,250,.6);
    animation: svcDotPulse 1s infinite;
}

.svc_thumb {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 18px;
    background: #f6f7fb;
    aspect-ratio: 16 / 9;
}

.svc_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 은은한 퍼지는 효과 */
@keyframes svcDotPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(96,165,250,.5);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(96,165,250,0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(96,165,250,0);
    }
}

.svc_hero_capture .svc_capture_img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    max-height: 430px;
    background: #fff;
    object-position: top;
}

/* ✅ 이미지 src가 비었을 때 img는 숨기고 placeholder 보여주기 */
.svc_capture_img:not([src]), .svc_capture_img[src=""] {
    display: none;
}

.svc_capture_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    background: repeating-linear-gradient(45deg, rgba(15,23,42,.03) 0px, rgba(15,23,42,.03) 10px, rgba(15,23,42,.06) 10px, rgba(15,23,42,.06) 20px);
}

.svc_hero_capture .svc_capture_empty {
    min-height: 320px;
}

.svc_capture_empty_title {
    font-weight: 900;
    color: rgba(15,23,42,.70);
}

.svc_capture_empty_desc {
    font-size: 13px;
    color: rgba(15,23,42,.45);
}

.svc_cta {
    padding: 72px 0;
    background: linear-gradient(180deg,#0b1b2b 0%, #071521 100%);
    color: #fff;
}

.svc_cta_box {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
}

.svc_cta .svc_h2 {
    color: #fff;
    font-size: 30px;
}

.svc_cta .svc_p {
    color: rgba(255,255,255,.78);
}

.svc_cta_btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.svc_cta .svc_btn_ghost {
    color: #fff;
    border-color: rgba(255,255,255,.22);
}

.svc_cta .svc_btn_ghost:hover {
    background: rgba(255,255,255,.08);
}

:root {
    --svc-max: 1200px;
    --svc-pad: 24px;
    --svc-ink: #111827;
    --svc-sub: #6b7280;
    --svc-line: rgba(15, 23, 42, 0.08);
    --svc-soft: rgba(15, 23, 42, 0.04);
    --svc-accent: #1d4ed8;
    --svc-accent-dark: #163a8a;
    --svc-card-bg: rgba(255,255,255,0.88);
    --svc-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --svc-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.10);
    --svc-shadow-lg: 0 28px 60px rgba(15, 23, 42, 0.14);
    --svc-radius-sm: 16px;
    --svc-radius-md: 20px;
    --svc-radius-lg: 24px;
    --svc-transition: all .35s ease;
}

/* ✅ 반응형 */
.svc_hero_capture .svc_capture_img {
    display: block;
    object-fit: cover;
    max-height: 430px;
    background: #fff;
    object-position: top;
}

.svc_capture_box {
    position: relative;
    overflow: visible;
}

.svc_capture_img {
    position: relative;
    height: 430px;
}

/* ===== Image Modal ===== */
.image_modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.image_modal.active {
    display: block;
}

.modal_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
}

.modal_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}

.modal_content img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal_close {
    position: absolute;
    top: -40px;
    right: 0;
    background: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 27px;
    cursor: pointer;
}

.zoomable {
    cursor: pointer
}

.svc_kicker {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.9);
}

.svc_kicker b {
    font-weight: 800;
    color: #fff;
}

.svc_assets_grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: start;
    margin-top: 22px;
}

.svc_assets_cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    justify-content: space-between
}

.svc_asset_card {
    display: flex;
    gap: 12px;
    padding: 24px 16px;
    border: 1px solid #e9eef6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.04);
}

.svc_asset_icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg,rgba(56,124,227,.12),rgba(56,124,227,.04));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex: 0 0 46px;
}

.svc_asset_txt .svc_h3 {
    margin: 0 0 6px;
    font-size: 24px;
}

.svc_asset_txt .svc_p2 {
    margin: 0;
    color: #55657a;
}

.svc_asset_note {
    padding: 14px 16px;
    border-radius: 16px;
    background: #f6f9ff;
    border: 1px dashed #cfe0ff;
}

.svc_asset_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #387ce3;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.svc_assets_shots {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svc_shot_main,.svc_shot {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e9eef6;
    background: #fff;
}

.svc_shot_main img,.svc_shot img {
    width: 100%;
    height: auto;
    display: block;
}

.svc_shot_cap {
    padding: 10px 12px;
    font-size: 15px;
    color: #6b7b91;
    background: #fff;
    border-top: 1px solid #eef2f7;
}

.svc_shot_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ===== WHY VISUAL STYLE ===== */
.svc_why_visual .why_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 100px 0;
    border-bottom: 1px solid rgba(15,23,42,.06);
}

.svc_why_visual .why_item:last-child {
    border-bottom: none;
}

.why_text {
    max-width: 520px;
}

.why_no {
    font-size: 64px;
    font-weight: 800;
    color: rgba(15,23,42,.07);
    margin-bottom: 20px;
}

.why_text h3 {
    font-size: 30px;
    margin-bottom: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.why_text p {
    font-size: 20px;
    line-height: 1.8;
    color: #5b6b82;
}

.why_media img {
    width: 100%;
    border-radius: 18px;
    display: block;
}

/* 모바일 */
/* ===== SCOPE REDESIGN ===== */
.svc_scope_redesign .scope_rows {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.scope_row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    align-items: start;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(15,23,42,.06);
}

.scope_row:last-child {
    border-bottom: none;
}

.scope_icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 30px;
}

.scope_text h3 {
    font-size: 26px;
    margin-bottom: 12px;
    font-weight: 700;
}

.scope_text p {
    font-size: 17px;
    line-height: 1.8;
    color: #5b6b82;
    max-width: 620px;
}

/*메인 운영중인 구조 3-4*/
.svc_impact_landing {
    background: radial-gradient(1200px 600px at 15% 10%,rgba(37,99,235,.28),transparent 60%),radial-gradient(900px 520px at 85% 30%,rgba(96,165,250,.18),transparent 55%),linear-gradient(180deg,#0b1220 0%,#070f1a 100%);
    color: #fff;
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}

.svc_impact_head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svc_impact_kicker {
    margin: 0 auto;
    width: max-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 14px;
    color: rgba(255,255,255,.86);
}

.svc_impact_title {
    margin: 0;
    font-size: 56px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.svc_impact_title span {
    color: #60a5fa;
}

.svc_impact_desc {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 1.75;
}

.svc_impact_desc b {
    color: #fff;
    font-weight: 800;
}

.svc_compare_wrap {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    gap: 22px;
    align-items: stretch;
    max-width: 1050px;
    margin: 0 auto;
}

.svc_compare_col {
    border-radius: 24px;
    padding: 34px 34px 28px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 70px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden;
}

.svc_compare_col:before {
    content: "";
    position: absolute;
    inset: -2px;
    opacity: .6;
    pointer-events: none;
    background: radial-gradient(600px 240px at 20% 10%,rgba(255,255,255,.10),transparent 55%);
}

.svc_compare_left {
    opacity: .65;
    transform: translateY(6px);
}

.svc_compare_right {
    background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 55%,#1d4ed8 100%);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 22px 90px rgba(37,99,235,.34);
}

.svc_compare_top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.svc_compare_icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}

.svc_compare_icon.is-accent {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
}

.svc_compare_title {
    margin: 0;
    font-size: 24px;
    letter-spacing: -.02em;
}

.svc_compare_sub {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.5;
}

.svc_compare_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 20px;
    line-height: 1.55;
    color: rgba(255,255,255,.84);
}

.svc_compare_list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.svc_bullet {
    opacity: .9;
    margin-top: 1px;
}

.svc_compare_list.is-strong {
    color: #fff;
}

.svc_check {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    flex: 0 0 20px;
    margin-top: 2px;
    font-size: 13px;
}

.svc_compare_bottom {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.svc_pill {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.svc_vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
}

.svc_vs_badge {
    font-size: 42px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    letter-spacing: -.02em;
}

.svc_vs_line {
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg,rgba(255,255,255,.00),rgba(255,255,255,.22),rgba(255,255,255,.00));
}

.svc_stat_row {
    display: flex;
    gap: 12px;
    margin: 18px 0 10px;
}

.svc_stat {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid #e9eef5;
    border-radius: 14px;
    background: #fff;
}

.svc_stat b {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    color: #000;
    font-weight: 700
}

.svc_stat span {
    display: block;
    margin-top: 6px;
    color: #475569;
    font-size: 16px;
}

.svc_scope_layout {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 22px;
    align-items: start;
}

.svc_scope_media {
    position: sticky;
    top: 110px;
}

.svc_scope_media img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #e9eef5;
}

.kmshop_section {
    padding: 80px 0;
}

.kmshop_section.alt {
    background: #f8fafd;
}

.kmshop_h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 14px;
}

.kmshop_sub {
    margin-bottom: 40px;
    color: #555;
}

.kmshop_card_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.kmshop_card {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 16px;
    padding: 22px;
    transition: 0.3s;
}

.kmshop_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.kmshop_card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.kmshop_card p {
    font-size: 16px;
    color: #666;
}

.svc_scope_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 40px;
}

.svc_scope {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
}

.svc_scope h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.svc_list {
    list-style: none;
    padding: 0;
    margin-top: 14px;
}

.svc_list li {
    position: relative;
    padding-left: 21px;
    margin-bottom: 8px;
    color: #5d5d5d;
    line-height: 1.7;
    font-weight: 700;
}

.svc_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #106dff;
}

.svc_stat {
    background: #fff;
    color: #111;
    padding: 16px 20px;
    border-radius: 14px;
    min-width: 160px;
}

/* ===== process section ===== */
.svc_process {
    background: #f8fafc;
}

.svc_process_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-top: 50px;
}

.svc_process_item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    transition: 0.2s;
}

.svc_process_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.svc_process_num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.svc_process_item h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.svc_process_item p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* welfare assets - 복지몰 전용 */
.svc_kmwelfare .svc_welfare_assets {
    background: #f8fafc;
}

.svc_kmwelfare .svc_assets_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 50px;
}

.svc_kmwelfare .svc_asset {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.svc_kmwelfare .svc_asset:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.svc_kmwelfare .svc_asset_icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
    background: #f1f5f9;
    border-radius: 14px;
}

.svc_kmwelfare .svc_asset h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.svc_kmwelfare .svc_asset p {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.5;
}

body {
    word-break: keep-all;
}

/*메인섹션1*/
.main_section1_wrap {
    position: relative;
    overflow: hidden;
    padding: 0px 0 130px;
    background: radial-gradient(1200px 600px at 50% 10%, rgb(0 80 255 / 28%), transparent 60%), radial-gradient(900px 520px at 85% 30%, rgba(96, 165, 250, .18), transparent 55%), linear-gradient( 8deg, #0b1220 0%, #070f1a 100%);
}

.main_section1_wrap * {
    box-sizing: border-box;
}

.main_section_content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 가로 가운데 */
    justify-content: center;
    /* 세로 가운데 (높이 있을 때) */
    text-align: center;
}

.hero_visual {
    position: relative;
    width: 100%;
    margin: 0 auto -211px;
}

.scene {
    width: 100%;
    min-height: 810px;
    overflow: hidden;
    perspective: 37em;
    mask: linear-gradient(90deg, rgba(0,0,0,0), #000 12%, #000 88%, rgba(0,0,0,0));
    -webkit-mask: linear-gradient(90deg, rgba(0,0,0,0), #000 12%, #000 88%, rgba(0,0,0,0));
}

.scene, .a3d {
    display: grid;
}

.a3d {
    place-self: center;
    transform-style: preserve-3d;
    animation: heroRotate 45s linear infinite;
}

@keyframes heroRotate {
    to {
        transform: rotateY(360deg);
    }
}

.card {
    --w: 280px;
    --ba: calc(1turn/var(--n));
    grid-area: 1/1;
    width: var(--w);
    aspect-ratio: 7/10;
    object-fit: cover;
    border-radius: 28px;
    backface-visibility: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    transform: rotateY(calc(var(--i) * var(--ba))) translateZ(calc(-1 * (.5 * var(--w) + .5em) / tan(.5 * var(--ba))));
}

.hero-left {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.hero-left h1 {
    margin: 0 0 20px;
    font-family: 'Pretendard', sans-serif;
    font-size: 51px;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #ffffff;
}

.hero-left p {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: #ffffff;
    word-break: keep-all;
}

.hero_btn_group {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 17px;
    justify-content: center;
    /* 버튼 가운데 정렬 */
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250;
    height: 65px;
    padding: 0 35px;
    border-radius: 14px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all .25s ease;
}

.hero-btn-dark {
    background: #2365ff;
    color: #ffffff;
}

.hero-btn-dark:hover {
    transform: translateY(-2px);
    background: #17bd6a;
}

@media (prefers-reduced-motion: reduce) {
    .a3d {
        animation-duration: 120s;
    }
}

/* =========================
   현재 노출된 HTML 기준
   모바일 깨짐 보정만 최소 적용
========================= */
/* 초소형 폰만 추가 보정 */
.mobilebr {
    display: none;
}

/* 하단 배너 */
.svc_bottom_banner {
    padding: 40px 0 80px;
}

.svc_bottom_banner_inner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 28px 32px;
    text-align: center;
    color: #fff;
    background: #05070a;
    isolation: isolate;
}

/* 배경 영상 */
.svc_bottom_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* 어두운 오버레이 */
.svc_bottom_banner_inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(4, 9, 20, 0.36) 0%, rgba(3, 8, 18, 0.58) 45%, rgba(2, 5, 12, 0.78) 100% );
}

/* 살짝 블루/그린 톤 보정 */
.svc_bottom_banner_inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 20% 20%, rgba(0, 102, 255, 0.16), transparent 35%), radial-gradient(circle at 80% 30%, rgba(0, 255, 163, 0.08), transparent 35%);
    mix-blend-mode: screen;
}

/* 콘텐츠 위로 */
.svc_bottom_banner_inner > *:not(.svc_bottom_video) {
    position: relative;
    z-index: 2;
}

.svc_bottom_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    color: #eaf2ff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
}

.svc_bottom_title {
    margin: 0;
    font-size: 36px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

.svc_bottom_cta {
    margin-top: 23px;
}

.svc_bottom_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 47px;
    padding: 0 24px;
    border-radius: 15px;
    background: linear-gradient(135deg, #373737, #2f2f2f);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), 0 0 18px rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.svc_bottom_btn:hover {
    transform: translateY(-4px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 102, 255, 0.22);
}

.svc_bottom_btn:active {
    transform: translateY(-1px) scale(0.98);
}

..svc_bottom_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 240px;
    height: 47px;
    padding: 0 24px;
    border-radius: 15px;
    background: linear-gradient(135deg, #373737, #2f2f2f);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.btn_text {
    display: inline-block;
    line-height: 1;
}

.btn_arrow_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 24px;
    /* 기존보다 조금 넓게 */
    height: 20px;
    overflow: visible;
    /* 잘리는 느낌 방지 */
    flex-shrink: 0;
}

.btn_arrow_icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    will-change: transform, opacity;
    animation: arrowLoop 1.8s ease-in-out infinite;
}

@keyframes arrowLoop {
    0% {
        transform: translateX(0);
        opacity: 0.72;
    }

    50% {
        transform: translateX(4px);
        /* 6px -> 4px로 줄임 */
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.72;
    }
}

.svc_bottom_btn:hover {
    transform: translateY(-4px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 102, 255, 0.22);
}

/* hover 시 속도 변경하지 않고, 이동폭만 아주 살짝 */
.svc_bottom_btn:hover .btn_arrow_icon {
    animation: arrowLoopHover 1.8s ease-in-out infinite;
}

@keyframes arrowLoopHover {
    0% {
        transform: translateX(0);
        opacity: 0.82;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.82;
    }
}

.svc_bottom_btn:active {
    transform: translateY(-1px) scale(0.98);
}

.footer_policy {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #888;
}

.footer_policy:hover {
    color: #000;
    text-decoration: underline;
}

.privacy_wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}

.privacy_box {
    background: #fff;
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.privacy_title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
}

.privacy_date {
    font-size: 15px;
    color: #777;
    margin-bottom: 40px;
}

.privacy_desc {
    font-size: 16px;
    color: #444;
    margin-bottom: 40px;
}

.privacy_section {
    margin-bottom: 36px;
}

.privacy_section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.privacy_section p {
    font-size: 16px;
    color: #444;
    margin-bottom: 12px;
}

.privacy_section ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.privacy_section ul li {
    font-size: 16px;
    color: #444;
    margin-bottom: 8px;
}

.privacy_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.privacy_table th, .privacy_table td {
    border: 1px solid #ddd;
    padding: 14px 12px;
    text-align: left;
    font-size: 15px;
    vertical-align: top;
}

.privacy_table th {
    background: #f1f3f5;
    font-weight: 600;
    color: #111;
}

.privacy_notice {
    margin-top: 30px;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    color: #555;
}

.portfolio_feature_cases {
    position: relative;
    z-index: 5;
    overflow: visible;
    padding: 110px 0 130px;
    background: radial-gradient(circle at 20% 10%, rgba(52, 92, 255, 0.16), transparent 34%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06), transparent 30%), linear-gradient(180deg, #02030a 0%, #060814 48%, #02030a 100%);
    color: #fff;
}

.portfolio_feature_bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.62)), repeating-linear-gradient( 90deg, rgba(255,255,255,0.022) 0, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 90px );
    pointer-events: none;
}

.portfolio_feature_cases .container {
    position: relative;
    z-index: 10;
    overflow: visible;
}

.feature_case_head {
    text-align: center;
    margin-bottom: 58px;
}

.feature_case_head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feature_case_head h2 {
    font-size: 46px;
    font-weight: 850;
    letter-spacing: -0.045em;
    margin-bottom: 14px;
}

.feature_case_head p {
    color: rgba(255,255,255,0.68);
    font-size: 18px;
    line-height: 1.6;
}

.feature_case_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 76px;
    align-items: start;
}

.feature_case_card {
    position: relative;
    z-index: 20;
    opacity: 0;
    overflow: visible;
    transition: transform 0.95s cubic-bezier(.16,1,.3,1), opacity 0.95s ease;
}

.feature_case_left {
    transform: translateX(-130px);
}

.feature_case_right {
    transform: translateX(130px);
}

.portfolio_feature_cases.is-active .feature_case_card {
    opacity: 1;
    transform: translateX(0);
}

.feature_case_link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.feature_case_visual {
    position: relative;
    height: 480px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)), #303136;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 28px 70px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.feature_case_visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.48) 100%), radial-gradient(circle at 50% 34%, rgba(255,255,255,0.16), transparent 44%);
    transform: scale(1);
    transition: transform .6s ease;
    z-index: 1;
}

.feature_case_visual::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    border: 1px solid rgba(255,255,255,0.06);
    pointer-events: none;
    z-index: 3;
}

.global_case {
    background: linear-gradient(145deg, rgba(70, 93, 255, 0.18), rgba(255,255,255,0.04)), #303136;
}

.kongshop_case {
    background: linear-gradient(145deg, rgba(118,255,188,0.12), rgba(255,255,255,0.04)), #303136;
}

.feature_case_glow {
    position: absolute;
    width: 320px;
    height: 320px;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 64%);
    filter: blur(4px);
    z-index: 0;
    transition: transform .6s ease, opacity .6s ease;
}

.feature_case_card:hover .feature_case_visual {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 36px 90px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.16);
}

.feature_case_card:hover .feature_case_visual::before {
    transform: scale(1.12);
}

.feature_case_card:hover .feature_case_glow {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: .9;
}

.feature_tags {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    z-index: 4;
}

.feature_tags span {
    height: 46px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(3,4,11,0.86);
    border: 1px solid rgba(255,255,255,0.09);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.feature_case_body {
    position: relative;
    z-index: 30;
    overflow: visible;
    text-align: center;
    padding-top: 30px;
}

.feature_case_body h3 {
    font-size: 31px;
    font-weight: 850;
    letter-spacing: -0.045em;
    margin-bottom: 10px;
}

.feature_case_body p {
    color: rgba(255,255,255,0.76);
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 16px;
}

/* 보러가기 */
.feature_case_more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #32ffbe;
    font-size: 18px;
    font-weight: 850;
    cursor: pointer;
    text-decoration: none;
    z-index: 999;
}

/* 기존 밑줄 제거 */
.feature_case_more::after {
    display: none !important;
}

/* 작은 움직이는 화살표 */
.more_arrow {
    display: inline-block;
    color: #32ffbe;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    transform: translateY(2px);
    animation: featureArrowMove 1s ease-in-out infinite;
}

@keyframes featureArrowMove {
    0%, 100% {
        transform: translateX(0) translateY(-2px);
    }

    50% {
        transform: translateX(4px) translateY(-2px);
    }
}

.feature_case_more:hover {
    color: #62ffd0;
}

.feature_case_more:hover .more_arrow {
    color: #62ffd0;
}

/* 글로벌 보러가기 */
.global_more {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-bottom: 210px;
    margin-bottom: -210px;
}

/* 글로벌 드롭다운 */
.global_dropdown {
    position: absolute;
    left: 50%;
    top: 56px;
    transform: translateX(-50%) translateY(8px);
    width: 360px;
    padding: 14px;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    border-radius: 18px;
    background: rgba(12,13,22,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 70px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.global_more:hover .global_dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.global_dropdown a {
    height: 46px;
    min-width: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.04);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .22s ease, transform .22s ease, border-color .22s ease;
}

.global_dropdown a:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.pf-dev-section {
    position: relative;
    z-index: 1;
}

.feature_case_image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

.feature_case_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1);
    opacity: 0.88;
    transition: transform .7s ease, opacity .45s ease;
}

.feature_case_card:hover .feature_case_image img {
    transform: scale(1.06);
    opacity: 1;
}

/*혜택 */
.kmsol_benefit_view, .kmsol_benefit_view * {
    box-sizing: border-box;
}

.kmsol_benefit_view {
    position: relative;
    width: 100%;
    padding: 140px 20px;
    overflow: hidden;
    background: radial-gradient(circle at 18% 0%, rgba(34, 154, 206, 0.16), transparent 30%), radial-gradient(circle at 82% 100%, rgba(108, 190, 82, 0.12), transparent 34%), linear-gradient(135deg, #050607 0%, #0b1118 48%, #030405 100%);
}

.kmsol_benefit_view::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 120deg, rgba(255,255,255,0.045) 0%, transparent 30%, transparent 72%, rgba(255,255,255,0.025) 100% ), radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.34) 100%);
    pointer-events: none;
}

.kmsol_benefit_view::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
    pointer-events: none;
}

.kmsol_benefit_wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* HEADER */
.kmsol_benefit_heading {
    text-align: center;
    margin-bottom: 82px;
}

.kmsol_benefit_label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 26px;
    padding: 10px 24px;
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(80, 190, 210, 0.25);
    color: rgba(160, 232, 238, 0.92);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.4px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28), inset 0 1px 1px rgba(255,255,255,0.08);
}

.kmsol_benefit_title {
    margin: 0 0 24px;
    font-size: 53px;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -1.4px;
    color: #fff;
    text-shadow: 0 14px 34px rgba(0,0,0,0.52);
}

.kmsol_benefit_title strong, .kmsol_benefit_title em {
    font-style: normal;
    background: linear-gradient(90deg, #23a8d6 0%, #72c85a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kmsol_benefit_desc {
    margin: 0;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255,255,255,0.68);
}

/* GRID */
.kmsol_benefit_list {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px 30px;
}

/* CARD */
.kmsol_benefit_item {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 15px 15px 31px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.125) 0%, rgba(255,255,255,0.055) 100%), linear-gradient(135deg, rgba(35,168,214,0.08), rgba(114,200,90,0.045));
    border: 1px solid rgba(255,255,255,0.105);
    box-shadow: 0 24px 50px rgba(0,0,0,0.46), inset 0 1px 1px rgba(255,255,255,0.10);
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease;
}

.kmsol_benefit_item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient( 145deg, rgba(35,168,214,0.42), rgba(255,255,255,0.08) 38%, rgba(255,255,255,0.02) 68%, rgba(114,200,90,0.34) );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.kmsol_benefit_item:hover {
    transform: translateY(-10px);
    border-color: rgba(70, 205, 220, 0.26);
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.065) 100%), linear-gradient(135deg, rgba(35,168,214,0.13), rgba(114,200,90,0.075));
    box-shadow: 0 32px 66px rgba(0,0,0,0.58), 0 0 34px rgba(35,168,214,0.08), 0 0 28px rgba(114,200,90,0.045), inset 0 1px 1px rgba(255,255,255,0.12);
}

/* IMAGE */
.kmsol_benefit_img {
    position: relative;
    width: 100%;
    height: 190px;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(0,0,0,0.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.075), 0 12px 24px rgba(0,0,0,0.22);
}

.kmsol_benefit_img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.36), transparent 48%), linear-gradient(135deg, rgba(35,168,214,0.10), rgba(114,200,90,0.08));
    pointer-events: none;
}

.kmsol_benefit_img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.62s ease, filter 0.36s ease;
}

.kmsol_benefit_item:hover .kmsol_benefit_img img {
    transform: scale(1.075);
    filter: brightness(1.07) contrast(1.04) saturate(1.04);
}

/* TEXT */
.kmsol_benefit_item h3 {
    position: relative;
    margin: 0 0 12px;
    padding-top: 2px;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: #fff;
}

.kmsol_benefit_item h3::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #23a8d6 0%, #72c85a 100%);
    opacity: 0.95;
}

.kmsol_benefit_item p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: rgba(255,255,255,0.66);
}

/* TABLET */
/* MOBILE */
/* AI 섹션 */
.kmsol_ai_dark_section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: radial-gradient( circle at 82% 14%, rgba(37, 99, 235, 0.20) 0%, rgba(37, 99, 235, 0.08) 22%, transparent 46% ), radial-gradient( circle at 18% 82%, rgba(14, 165, 233, 0.10) 0%, rgba(14, 165, 233, 0.03) 24%, transparent 48% ), linear-gradient( 145deg, #01040b 0%, #020814 18%, #04101f 42%, #071427 68%, #02050d 100% );
    isolation: isolate;
}

/* 은은한 블루 오로라 */
.kmsol_ai_dark_section::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -10%;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.08) 32%, transparent 68% );
    filter: blur(100px);
    animation: kmsolAuroraMove 18s ease-in-out infinite alternate;
    z-index: -2;
}

/* 은은한 라이트 스윕 */
.kmsol_ai_dark_section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,0.015) 42%, rgba(125,211,252,0.05) 50%, rgba(255,255,255,0.015) 58%, transparent 100% );
    opacity: 0.45;
    transform: translateX(-120%);
    animation: kmsolLightSweep 14s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* 내부 컨텐츠 */
.kmsol_ai_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

/* 텍스트 */
.kmsol_ai_dark_section .kmsol_company_kicker {
    color: #ffffff;
    letter-spacing: 0em;
}

.kmsol_ai_dark_section .kmsol_company_title {
    color: #ffffff;
}

.kmsol_ai_dark_section .kmsol_company_subtitle {
    color: rgba(255,255,255,0.68);
}

/* 카드 */
.kmsol_ai_dark_section .kmsol_company_service_card {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 24px 80px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

/* 카드 호버 */
.kmsol_ai_dark_section .kmsol_company_service_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 100px rgba(0,0,0,0.42), 0 0 40px rgba(59,130,246,0.14);
}

/* 애니메이션 */
@keyframes kmsolAuroraMove {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.55;
    }

    100% {
        transform: translate(-40px, 30px) scale(1.08);
        opacity: 0.82;
    }
}

@keyframes kmsolLightSweep {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    30% {
        opacity: 0.35;
    }

    55% {
        transform: translateX(120%);
        opacity: 0.18;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/*------메인-------*/
/* =========================================================
   KOOKMIN CLUB MAIN HERO
   PREMIUM DARK BLUE VERSION
========================================================= */
/* =========================================================
   KM STARTUP HERO
========================================================= */
.km_startup_hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 245px 0 0;
    background: #030712;
    color: #fff;
    isolation: isolate;
}

.km_startup_hero * {
    box-sizing: border-box;
}

/* =========================================================
   DARK BLUE ANIMATED BACKGROUND
========================================================= */
.km_startup_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(circle at 18% 22%, rgba(20, 78, 255, .24), transparent 30%), radial-gradient(circle at 82% 18%, rgba(45, 118, 255, .18), transparent 34%), radial-gradient(circle at 50% 78%, rgba(0, 102, 255, .14), transparent 40%), linear-gradient(180deg, #01030a 0%, #030713 30%, #051020 58%, #02050d 100%);
}

.km_startup_bg::before {
    content: "";
    position: absolute;
    width: 1700px;
    height: 1700px;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient( from 0deg, rgba(20, 82, 255, .24), transparent 18%, rgba(66, 134, 255, .16) 32%, transparent 46%, rgba(0, 88, 255, .20) 62%, transparent 78%, rgba(42, 100, 255, .22) );
    filter: blur(92px);
    opacity: .95;
    animation: kmDarkBlueRotate 10s linear infinite, kmDarkBlueFloat 3.8s ease-in-out infinite alternate;
}

.km_startup_bg::after {
    content: "";
    position: absolute;
    width: 950px;
    height: 950px;
    right: -10%;
    top: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(40, 118, 255, .26) 0%, rgba(40, 118, 255, .12) 30%, rgba(40, 118, 255, .04) 52%, transparent 76%);
    filter: blur(60px);
    animation: kmBlueFastMove 4.5s ease-in-out infinite alternate;
}

@keyframes kmDarkBlueRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg) scale(1.12);
    }
}

@keyframes kmDarkBlueFloat {
    0% {
        margin-left: -60px;
        margin-top: -30px;
    }

    50% {
        margin-left: 90px;
        margin-top: 70px;
    }

    100% {
        margin-left: -40px;
        margin-top: 110px;
    }
}

@keyframes kmBlueFastMove {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    25% {
        transform: translate3d(-130px,80px,0) scale(1.16);
    }

    50% {
        transform: translate3d(90px,-90px,0) scale(.94);
    }

    75% {
        transform: translate3d(-60px,120px,0) scale(1.1);
    }

    100% {
        transform: translate3d(110px,-40px,0) scale(1);
    }
}

/* =========================================================
   HERO CONTENT
========================================================= */
.km_startup_inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    /* padding-top: 250px; */
}

.km_startup_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 3px 6px 3px 16px;
    margin-bottom: 30px;
    border-radius: 999px;
    border: 1px solid rgba(190,205,255,.42);
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 28px rgba(85,95,255,.16), inset 0 1px 0 rgba(255,255,255,.12);
    animation: kmFadeUp .8s ease both;
}

.km_startup_badge span {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.86);
}

.km_startup_badge a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #316bff, #6748ff);
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.km_startup_inner h1 {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 62px;
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: -.055em;
    color: #fff;
    text-shadow: 0 0 34px rgba(255,255,255,.07);
    animation: kmFadeUp .95s .1s ease both;
}

.km_startup_inner h1 strong {
    color: #9fb5ff;
    font-weight: inherit;
}

.km_startup_inner p {
    margin: 30px 0 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: -.035em;
    color: rgb(233 238 255 / 92%);
    word-break: keep-all;
    animation: kmFadeUp .95s .2s ease both;
}

@keyframes kmFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   HERO BUTTONS
========================================================= */
.km_startup_btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
    animation: kmFadeUp .95s .3s ease both;
}

.km_startup_btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    height: 56px;
    padding: 0 26px;
    border-radius: 12px;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.035em;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

.km_startup_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 48%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-24deg);
}

.km_startup_btn:hover {
    transform: translateY(-4px);
}

.km_startup_btn:hover::before {
    animation: kmBtnShine .75s ease;
}

.km_startup_btn_primary {
    background: linear-gradient(135deg, #2f6cff, #5643ff);
    color: #fff;
    box-shadow: 0 18px 48px rgba(47,108,255,.38);
}

.km_startup_btn_secondary {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.045);
    color: #fff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.km_startup_btn_secondary:hover {
    border-color: rgba(170,190,255,.42);
    background: rgba(255,255,255,.075);
}

@keyframes kmBtnShine {
    from {
        left: -80%;
    }

    to {
        left: 130%;
    }
}

/* =========================================================
   PORTFOLIO SLIDER
========================================================= */
.km_portfolio_slider {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 92px;
    padding: 34px 0 140px;
    overflow-x: hidden;
    overflow-y: visible;
}

.km_portfolio_slider::before {
    display: none;
    content: none;
}

.km_portfolio_slider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260px;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(3,7,18,0) 0%, rgba(3,7,18,.12) 38%, rgba(3,7,18,.72) 72%, rgba(3,7,18,1) 100%);
}

.km_portfolio_track {
    display: flex;
    width: max-content;
    animation: kmPortfolioLoop 23s linear infinite;
    -webkit-animation: kmPortfolioLoop 23s linear infinite;
    will-change: transform;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.km_portfolio_track:hover {
    animation-play-state: running;
    -webkit-animation-play-state: running;
}

.km_portfolio_group {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-right: 30px;
    flex: 0 0 auto;
}

.km_portfolio_card {
    position: relative;
    overflow: hidden;
    flex: 0 0 380px;
    width: 380px;
    height: 470px;
    border-radius: 22px;
    background: #071020;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 40px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    text-decoration: none;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.52) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.52) 86%, transparent 100%);
}

.km_portfolio_card img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: .95;
    filter: saturate(.92) brightness(.82);
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    transition: transform .55s ease, opacity .35s ease, filter .35s ease;
}

.km_portfolio_card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(3,7,18,.04) 0%, rgba(3,7,18,.08) 34%, rgba(3,7,18,.24) 64%, rgba(3,7,18,.62) 100%);
}

.km_portfolio_card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(110,145,255,.14), transparent 42%);
    mix-blend-mode: screen;
}

.km_portfolio_card div {
    position: absolute;
    top: 34px;
    left: 30px;
    right: 30px;
    z-index: 5;
    text-align: center;
}

.km_portfolio_card span {
    display: block;
    margin-bottom: 12px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(154,178,255,.92);
}

.km_portfolio_card strong {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.05em;
    color: #fff;
    word-break: keep-all;
}

.km_portfolio_card:hover {
    transform: translateY(-14px) scale(1.03);
    -webkit-transform: translateY(-14px) scale(1.03);
    border-color: rgba(175,195,255,.42);
    box-shadow: 0 46px 110px rgba(0,0,0,.52), 0 0 52px rgba(71,105,255,.24), inset 0 1px 0 rgba(255,255,255,.16);
}

.km_portfolio_card:hover img {
    opacity: 1;
    filter: saturate(1) brightness(.92);
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
}

@keyframes kmPortfolioLoop {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-50%,0,0);
    }
}

@-webkit-keyframes kmPortfolioLoop {
    from {
        -webkit-transform: translate3d(0,0,0);
    }

    to {
        -webkit-transform: translate3d(-50%,0,0);
    }
}

/* =========================================================
   KM SOLUTION DRAWER
========================================================= */
.km_solution_drawer {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translateY(115px);
    overflow: visible;
    pointer-events: none;
}

.km_solution_drawer * {
    box-sizing: border-box;
}

.km_solution_panel {
    position: relative;
    z-index: 99;
    width: fit-content;
    max-width: 1180px;
    margin: 0 auto;
    pointer-events: auto;
}

.km_solution_panel summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    height: 52px;
    padding: 5px 11px 4px 20px;
    border-radius: 999px;
    border: 1px solid rgba(190,205,255,.42);
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
    font-family: 'Pretendard', sans-serif;
}

.km_solution_panel summary::-webkit-details-marker {
    display: none;
}

.km_solution_panel summary span {
    font-size: 17px;
    font-weight: 800;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
}

.km_solution_panel summary strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    padding: 0 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00dd44, #6048ff);
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}

.km_solution_panel summary strong::after {
    content: "\2192";
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 900;
    transition: transform .2s ease;
    animation: kmArrowMove 1.2s ease-in-out infinite;
}

.km_solution_panel[open] summary strong::after {
    content: "\2191";
    animation: kmArrowUp 1s ease-in-out infinite;
}

@keyframes kmArrowMove {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(4px);
        opacity: .75;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes kmArrowUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-3px);
        opacity: .75;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.km_solution_panel_body {
    position: fixed;
    left: 50%;
    top: 59px;
    z-index: 999999;
    width: min(1180px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(6,15,34,.96), rgba(17,36,78,.92));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 32px 90px rgba(0,0,0,.46), 0 0 80px rgba(47,108,255,.18), inset 0 1px 0 rgba(255,255,255,.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-18px);
    clip-path: inset(0 0 100% 0 round 26px);
    transition: clip-path .55s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1), visibility .35s ease;
}

.km_solution_panel.is_open .km_solution_panel_body {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    clip-path: inset(0 0 0 0 round 26px);
}

.km_solution_panel_body::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 22% 0%, rgba(80,126,255,.18), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.05), transparent 58%);
}

.km_solution_group {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 160px 1fr;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
}

.km_solution_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 18px;
    border-right: 1px solid rgba(255,255,255,.08);
    background: rgba(3,10,24,.32);
}

.km_solution_title strong {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    color: #fff;
    word-break: keep-all;
}

.km_solution_title span {
    margin-top: 7px;
    font-family: 'Pretendard', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(150,178,255,.68);
}

.km_solution_links {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    min-width: 0;
    gap: 8px;
    padding: 14px;
}

.km_solution_links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.035em;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.km_solution_links a:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: rgba(170,195,255,.35);
    background: rgba(255,255,255,.075);
}

.km_solution_links a.is_active {
    color: #fff;
    border-color: rgba(115,155,255,.5);
    background: linear-gradient(135deg, rgba(47,108,255,.9), rgba(88,67,255,.82));
    box-shadow: 0 12px 30px rgba(47,108,255,.28), inset 0 1px 0 rgba(255,255,255,.22);
}

@media (hover: hover) and (pointer:fine) {
    .km_solution_panel:hover .km_solution_panel_body {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */
.cursor-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.04);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.cursor-circle.is-visible {
    opacity: 1;
}

.cursor-circle.is-hover {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}