/* ÄÚ¾î - ¼­ºñ½º ¼Ò°³ */
#core-renewal {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    background: #ffffff;
    color: #131313;
    font-family: "Pretendard", sans-serif;
    letter-spacing: -0.03em;
}

#core-renewal *,
#core-renewal *::before,
#core-renewal *::after {
    box-sizing: border-box;
}

#core-renewal h2 {
    font-size: clamp(24px, 3.125vw, 60px);
    font-weight: 700;
    line-height: 140%;
}

#core-renewal .core-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.core-service-info {
    padding: 0 0 0;
    padding-top: calc(290px - var(--site-promotion-offset, 0px));
    transition: padding-top 0.32s ease;
}


/* section01: ´©±¸³ª */
#core-renewal .core-section01 {
    padding: 0 0 clamp(48px, 7.7083vw, 148px);
    text-align: center;
    overflow: hidden;
}

#core-renewal .core-section01 h1 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: clamp(28px, 3.6458vw, 70px);
    font-weight: 600;
}

#core-renewal .core-section01 h1 span:nth-of-type(1) {
    display: block;
    font-size: clamp(16px, 1.3542vw, 26px);
    color: #858689;
    font-weight: 600;
    line-height: 140%;
}

#core-renewal .core-section01 h1 span:nth-of-type(2) {
    display: block;
    line-height: 120%;
}

#core-renewal .core-section01__flex {
    display: flex;
    margin: clamp(38px, 3.4896vw, 67px) auto 0;
    width: max-content;
    flex-wrap: nowrap;
    gap: clamp(14px, 1.0417vw, 20px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

#core-renewal .core-section01-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: clamp(290px, 17.71vw, 340px);
    height: clamp(344px, 20.84vw, 400px);
    padding: clamp(34px, 2.09vw, 40px) 0 clamp(25px, 1.57vw, 30px);
    overflow: hidden;
    border-radius: 20px;
    flex-shrink: 0;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translate3d(0, 0, 0);
    background-clip: padding-box;
}

#core-renewal .core-section01-card picture {
    display: block;
    text-align: center;
    width: clamp(240px, 14.59vw, 280px);
    height: clamp(240px, 14.59vw, 280px);
    margin: 0 auto;
}

#core-renewal .core-section01-card p {
    font-size: clamp(17px, 1.05vw, 20px);
    font-weight: 600;
    line-height: 150%;
}

#core-renewal .core-section01-card:nth-child(5n + 1) { background-color: #8EED99; }
#core-renewal .core-section01-card:nth-child(5n + 2) { background-color: #99C2FF; }
#core-renewal .core-section01-card:nth-child(5n + 3) { background-color: #AF84FF; }
#core-renewal .core-section01-card:nth-child(5n + 4) { background-color: #F68D8E; }
#core-renewal .core-section01-card:nth-child(5n + 5) { background-color: #FFCD62; }

#core-renewal .core-section01-card:nth-child(5n + 1) p { color: #268D32; }
#core-renewal .core-section01-card:nth-child(5n + 2) p { color: #52679C; }
#core-renewal .core-section01-card:nth-child(5n + 3) p { color: #6737BF; }
#core-renewal .core-section01-card:nth-child(5n + 4) p { color: #BE3839; }
#core-renewal .core-section01-card:nth-child(5n + 5) p { color: #AD6E26; }


/* section02: óÀ½ ½ÃÀÛÇÑ´Ù¸é */
#core-renewal .core-section02 {
    background: linear-gradient(0deg, #F2F1F9 42.27%, #FFFFFF 100%);
    padding: clamp(100px, 10.4167vw, 200px) clamp(0px, 3.125vw, 60px);
}

#core-renewal .core-section02 .core-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
}

#core-renewal .core-section02 h2 {
    flex-shrink: 0;
}

#core-renewal .core-section02 h2 .gradient-text {
    background: linear-gradient(110.92deg, #5B1EFD 16.3%, #C444FF 82.03%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#core-renewal .core-section02__rolling-wrap {
    max-width: 840px;
    width: 100%;
    min-width: 0;
    height: 446px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#core-renewal .rolling-list-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#core-renewal .rolling-list-container .fixed-active-box {
    position: absolute;
    top: 176px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    width: calc(100% - 40px);
    height: 94px;
    margin: 0 auto;
    border-radius: 12px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}

#core-renewal .rolling-list-container .fixed-active-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(90deg, #4A83FF 0%, #BA0BFF 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

#core-renewal .rolling-list-container .rolling-list {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#core-renewal .rolling-list-container .rolling-item {
    max-width: 800px;
    width: calc(100% - 40px);
    height: 74px;
    padding: 0 30px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    font-size: clamp(16px, 1.20vw, 23px);
    font-weight: 600;
    color: #2C2C2C;
    opacity: 0.5;
    transition: opacity 0.5s, background 0.5s, height 0.5s;
    border: 2px solid transparent;
    box-shadow: 0px 7px 14.5px 0px #7C5D880F;
}

#core-renewal .rolling-list-container .rolling-item.visible-item {
    opacity: 1;
}

#core-renewal .rolling-list-container .rolling-item.active {
    height: 94px;
    opacity: 1;
    box-shadow: 0px 8.61px 17.7px 0px #331F3B29;
    font-size: clamp(18px, 1.46vw, 28px);
}

#core-renewal .rolling-list-container .rolling-item .icon {
    width: clamp(26px, 1.78vw, 34px);
    height: clamp(26px, 1.78vw, 34px);
    flex-shrink: 0;
}

#core-renewal .rolling-list-container .rolling-item.active .icon {
    width: clamp(34px, 2.09vw, 40px);
    height: clamp(34px, 2.09vw, 40px);
}


/* section03: ½ÃÀÛºÎÅÍ ¿î¿µ±îÁö */
#core-renewal .core-section03 {
    padding: clamp(140px, 7.82vw, 150px) 10px 0;
    background: linear-gradient(360deg, #FFFFFF 51.95%, #F2F1F9 100%);
    text-align: center;
}

#core-renewal .core-section03__video-wrap .core-video {
    max-width: 1500px;
    overflow: hidden;
    margin: clamp(40px, 3.13vw, 60px) auto 0;
    border-radius: clamp(10px, 1.25vw, 24px);
    aspect-ratio: 359/202;
}


/* section04: ¾ðÁ¦ ¾îµð¼­³ª */
#core-renewal .core-section04 {
    padding: clamp(140px, 10.42vw, 200px) 0 clamp(48px, 12.19vw, 234px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

#core-renewal .core-section04-wapper {
    position: relative;
    padding: clamp(93px, 11.25vw, 216px) 0 0;
    margin: clamp(40px, 3.13vw, 60px) auto 0;
}

#core-renewal .core-section04-wapper::before,
#core-renewal .core-section04-wapper::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: clamp(56px, 8vw, 160px);
    pointer-events: none;
    content: "";
}

#core-renewal .core-section04-wapper::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0) 100%);
}

#core-renewal .core-section04-wapper::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0) 100%);
}

#core-renewal .core-section04__flex {
    display: flex;
    margin: 0 auto;
    width: max-content;
    flex-wrap: nowrap;
    gap: clamp(14px, 1.57vw, 30px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

#core-renewal .core-section04-card {
    position: relative;
    min-width: 0;
    flex-shrink: 0;
}

#core-renewal .core-section04-card picture {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

#core-renewal .core-section04-card img {
    display: block;
    width: clamp(99px, 11.46vw, 220px);
    height: auto;
    border-radius: clamp(14px, 1.57vw, 20px);
}

#core-renewal .core-section04-ms {
    position: absolute;
    top: clamp(20px, 1.78vw, 34px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: clamp(200px, 24.38vw, 468px);
}

#core-renewal .core-section04-ms img {
    display: block;
    width: 100%;
    height: auto;
}


/* section05: ¿ì¸®°¡ ¿î¿µ °í¹ÎÀ» */
#core-renewal .core-section05 {
    padding: clamp(140px, 10.42vw, 200px) clamp(20px, 3.13vw, 60px) clamp(0px, 10.4167vw, 200px);
    text-align: center;
    overflow: hidden;
}

#core-renewal .core-section05__grid {
    display: grid;
    grid-template-columns: repeat(5, clamp(238px, 17.20vw, 330px));
    justify-content: center;
    gap: clamp(14px, 1.57vw, 30px);
    margin: clamp(40px, 4.17vw, 80px) auto 0;
}

#core-renewal .core-section05-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: clamp(288px, 20.84vw, 400px);
    padding: clamp(22px, 1.57vw, 30px);
    border-radius: clamp(15px, 1.05vw, 20px);
}

#core-renewal .core-section05-card picture {
    display: block;
    text-align: right;
}

#core-renewal .core-section05-card-title {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.53vw, 10px);
    text-align: left;
}

#core-renewal .core-section05-card-title h3 {
    font-size: clamp(20px, 1.57vw, 30px);
    font-weight: 700;
    line-height: 150%;
}

#core-renewal .core-section05-card-title p {
    color: #000;
    font-size: clamp(14px, 0.84vw, 16px);
    font-weight: 400;
    line-height: 160%;
    opacity: 0.5;
}

#core-renewal .core-section05-card:nth-child(5n + 1),
#core-renewal .core-section05-card:nth-child(5n + 3),
#core-renewal .core-section05-card:nth-child(5n + 5) {
    background: linear-gradient(180deg, #DFD7FF 0%, #D5DFF7 100%);
}

#core-renewal .core-section05-card:nth-child(5n + 2),
#core-renewal .core-section05-card:nth-child(5n + 4) {
    background: linear-gradient(180deg, #F8E0DA 0%, #FDF9EA 100%);
}


/* section06: ¹«¾ùÀ» ÇØ¾ß ÇÒÁö */
#core-renewal .core-section06 {
    padding: clamp(140px, 10.42vw, 200px) clamp(20px, 3.13vw, 60px) clamp(60px, 10.42vw, 200px);
}

#core-renewal .core-section06 .core-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1500px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}

#core-renewal .core-section06 h2 {
    flex-shrink: 0;
    padding-right: clamp(50px, 5.73vw, 110px);
}

#core-renewal .core-section06__grid {
    display: flex;
    gap: 39px;
    max-width: 999px;
    width: 100%;
    min-width: 0;
}

#core-renewal .core-section06-card {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

#core-renewal .core-section06__video-wrap .core-video {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 480 / 300;
}

#core-renewal .core-section06__video-wrap h3 {
    margin-top: clamp(16px, 1.05vw, 20px);
    font-size: clamp(18px, 1.31vw, 25px);
    font-weight: 600;
    line-height: 146%;
}

#core-renewal .core-section06__link-wrap a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(60px, 4.02vw, 77px);
    padding: 0 10px;
    color: #131313;
    font-size: clamp(16px, 0.99vw, 19px);
    font-weight: 500;
    line-height: 140%;
    border-bottom: 1px solid #E2E8F0;
}

#core-renewal .core-section06__link-wrap a:nth-child(1) {
    border-top: 1px solid #E2E8F0;
}

#core-renewal .core-section06__arrow {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M4 13L9.85858 7.14142C9.93668 7.06332 9.93668 6.93668 9.85858 6.85858L4 1' stroke='%23D2DAED' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center center / 14px 14px no-repeat;
}


/* section07: ÃÖÁ¾ CTA */
#core-renewal .core-section07 {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(117px, 7.71vw, 148px) 0 clamp(70px, 6.83vw, 131px);
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, rgba(227, 195, 255, 0.61) 100%);
    text-align: center;
}

#core-renewal .core-section07::before {
    position: absolute;
    z-index: 0;
    bottom: -44vw;
    left: 50%;
    width: min(72vw, 1360px);
    height: min(38vw, 720px);
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #a17eff;
    filter: blur(clamp(120px, 15.63vw, 300px));
    pointer-events: none;
    content: "";
}

#core-renewal .core-section07 h2 {
    font-size: clamp(24px, 2.82vw, 54px);
    font-weight: 600;
}

#core-renewal .core-section07 > * {
    position: relative;
    z-index: 1;
}

#core-renewal .core-section07 a {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(135px, 8.30vw, 159px);
    height: clamp(51px, 3.13vw, 60px);
    margin-top: clamp(30px, 4.02vw, 77px);
    font-size: clamp(16px, 1.05vw, 20px);
    border: 2px solid transparent;
    border-radius: 100px;
    background: linear-gradient(#111111, #111111) padding-box, linear-gradient(102.47deg, #7a4dff 22.86%, #ff6eca 77.14%) border-box;
    color: #ffffff;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(48, 31, 103, 0.12);
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#core-renewal .core-section07 a::before {
    position: absolute;
    top: -30%;
    left: -75%;
    width: 55%;
    height: 160%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: skewX(-18deg);
    transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    content: "";
}

@media (hover: hover) {
    #core-renewal .core-section07 a:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(98, 65, 192, 0.24), 0 4px 12px rgba(0, 0, 0, 0.16);
    }

    #core-renewal .core-section07 a:hover::before {
        left: 125%;
    }
}

#core-renewal .core-section07 a:active {
    transform: translateY(-1px) scale(0.985);
    transition-duration: 0.12s;
}


/* 1440px ÀÌÇÏ */
@media screen and (max-width: 1440px) {
    #core-renewal .core-section05__grid {
        grid-template-columns: repeat(5, 1fr);
    }

    #core-renewal .core-section05-card picture img {
        max-width: 40%;
    }
}


/* 1110px ÀÌÇÏ */
@media screen and (max-width: 1110px) {
    #core-renewal .core-section05__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    #core-renewal .core-section05-card picture img {
        max-width: 25%;
    }

    #core-renewal .core-section05-card:nth-child(1),
    #core-renewal .core-section05-card:nth-child(2),
    #core-renewal .core-section05-card:nth-child(3) {
        grid-column: span 2;
    }

    #core-renewal .core-section05-card:nth-child(4),
    #core-renewal .core-section05-card:nth-child(5) {
        grid-column: span 3;
    }

    #core-renewal .core-section06 .core-inner {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    #core-renewal .core-section06 h2 {
        padding-right: 0;
        text-align: center;
    }
}

/* 768px ÀÌÇÏ */
@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }
    .core-service-info{
        padding: 0 0 0;
        padding-top: calc(190px - var(--site-promotion-offset, 0px));
    }
    #core-renewal .core-section02,
    #core-renewal .core-section03 {
        background: #fff;
    }

    #core-renewal .core-section01 {
        /*padding-top: 190px;*/
    }

    #core-renewal .core-section01 h1 {
        gap: 10px;
    }

    #core-renewal .core-section01 h1 span:nth-of-type(2) {
        font-weight: 700;
        line-height: 140%;
    }

    #core-renewal .core-section02 {
        padding-bottom: 0;
    }

    #core-renewal .core-section02 h2 {
        text-align: center;
    }

    #core-renewal .core-section02 .core-inner {
        flex-direction: column;
        gap: 40px;
    }

    #core-renewal .core-section02__rolling-wrap {
        height: 328px;
    }

    #core-renewal .rolling-list-container .fixed-active-box {
        top: 132px;
        height: 66px;
        border-radius: 10px;
    }

    #core-renewal .rolling-list-container .rolling-list {
        gap: 10px;
    }

    #core-renewal .rolling-list-container .rolling-item {
        height: 56px;
        border-radius: 10px;
        gap: 16px;
    }

    #core-renewal .rolling-list-container .rolling-item.active {
        height: 64px;
    }

    #core-renewal .core-section03__video-wrap .core-video {
        aspect-ratio: 227/170;
    }

    #core-renewal .core-section05 {
        padding-bottom: 0;
    }

    #core-renewal .core-section05-card {
        height: auto;
        border-radius: 14px;
    }

    #core-renewal .core-section05__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #core-renewal .core-section05-card:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    #core-renewal .core-section05-card:nth-child(5) {
        grid-column: span 2;
    }

    #core-renewal .core-section05-card:nth-child(5) img {
        max-width: 13%;
    }

    #core-renewal .core-section05-card-title p {
        line-height: 140%;
    }

    #core-renewal .core-section06__grid {
        flex-direction: column;
        gap: 60px;
    }

    #core-renewal .core-section06-card {
        gap: 30px;
    }
}

@media screen and (max-width: 500px) {
    #core-renewal .core-section05__grid {
        grid-template-columns: 1fr;
    }

    #core-renewal .core-section05-card:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    #core-renewal .core-section05-card:nth-child(n) img {
        max-width: 20%;
    }
}