#dBody[data-ui-corporate="v1.0"] {
    padding-top: 230px;
    padding-bottom: 0;
}

[data-component="SearchAiAssistant"] {
    &.c-section {
        position: relative;
    }

    & .c-sheet {
        display: flex;
        justify-content: space-between;
        gap: 0 20px;
        box-sizing: border-box;
        max-width: 1522px;
        margin: 0 auto;
        padding: 0 16px;

        & *,
        & *::before,
        & *::after {
            box-sizing: inherit;
        }
    }

    & .c-card {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0 30px;
        border: 4px solid #f58220;
        background-color: #fff;

        &:only-child {
            flex: 1 0 0;
        }

        & label {
            flex: 1 0 0;
            position: relative;
        }

        & input {
            width: 100%;
            height: calc(4.2rem * var(--scale-factor));
            padding: 14px 0 14px 40px;
            border-radius: 0;
            border: 0 none;
            font-size: calc(1.4375rem * var(--scale-factor));
            letter-spacing: -1px;
            position: relative;
            background: none;

            &:focus {
                outline: none;
            }
        }

        & .typing-animated {
            font-size: 23px;
            font-weight: 500;
            color: #949494;
            line-height: 30px;
            letter-spacing: -0.46px;
            position: absolute;
            top: 50%;
            left: 40px;
            z-index: 0;
            transform: translateY(-50%);
        }

        & .submit {
            position: relative;
            width: 42px;
            height: 42px;
            margin-right: 25px;
            font-size: calc(1rem * var(--scale-factor));

            &::before {
                position: absolute;
                inset: 0;
                background: url('/magi/assets/images/common/header_methods_search.svg') no-repeat center;
                background-size: 100% auto;
                content: '';
            }

            & .val {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                clip: rect(0 0 0 0);
                overflow: hidden;
            }
        }

    }



}

[data-component="MainHero"] {
    &.c-section {
        position: relative;
        letter-spacing: normal;
        margin-block: 60px;

        & * {
            letter-spacing: inherit;
        }
    }

    & .c-sheet {
        display: flex;
        justify-content: space-between;
        gap: 0 20px;
        box-sizing: border-box;
        max-width: 1522px;
        margin: 0 auto;
        padding: 0 16px;

        & > .c-card:only-child {
            flex: 1 0 0;
        }

        & *,
        & *::before,
        & *::after {
            box-sizing: inherit;
        }

        &.main-hero-items {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0 24px;

            &:has(.main-hero-item:nth-child(1):is(:last-child)) {
                grid-template-columns: repeat(1, 1fr);
            }

            &:has(.main-hero-item:nth-child(2):is(:last-child)) {
                grid-template-columns: repeat(2, 1fr);
            }

            &:has(.main-hero-item:nth-child(3):is(:last-child)) {
                grid-template-columns: repeat(3, 1fr);
            }

            &:has(.main-hero-item:nth-child(4):is(:last-child)) {
                grid-template-columns: repeat(4, 1fr);
            }

            .main-hero-item {
                display: flex;
                height: 460px;
            }
        }
    }

    .c-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fbfaff;
        gap: 40px;
        transition: all 0.5s ease;

        &:not(.lead) {
            &:hover {
                background: linear-gradient(159deg,
                rgba(255, 255, 255, 0) 2.66%,
                rgba(255, 60, 0, 0.2) 71.16%),
                rgba(245, 130, 32, 1);

                & .category .val,
                & .title,
                & .description {
                    color: #fff;
                }

                & .category .val {
                    border-color: inherit;
                }

                & .link {
                    visibility: hidden;
                }

                & figure {
                    visibility: visible;
                }
            }

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background-color: #f58220;
                content: "";
            }

            & figure {
                position: absolute;
                right: 20px;
                bottom: 20px;
                width: 120px;
                height: 120px;
                visibility: hidden;
            }

            & figure img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }
        }

        &:only-child {
            flex: 1 0 0;
        }

        & .content {
            position: relative;
            z-index: 1;
            flex: 1 0 0;
            padding: 40px 32px;
        }

        & .category {
            display: flex;

            & .val {
                padding-bottom: 0;
                text-decoration: underline;
                text-underline-offset: 5px;
                text-decoration-thickness: 8%;
                color: #043b72;
                font-size: 20px;
                line-height: 1.4;
            }
        }

        & .title {
            margin: 24px 0 16px;
            color: #000;
            font-weight: 700;
            font-size: 32px;
            line-height: 1.4;
            letter-spacing: -2px;
            overflow-wrap: anywhere;
        }

        & .description {
            margin: 10px 0;
            color: #666;
            font-size: 18px;
            line-height: 1.5;
        }

        & .link {
            position: absolute;
            right: 32px;
            bottom: 40px;
            display: flex;
            width: 45px;
            height: 45px;

            &::before {
                position: absolute;
                inset: 0;
                background: url("/magi/assets/images/main/featured_icon_arrow.svg") no-repeat center;
                background-size: 100% auto;
                content: "";
            }

            & .val {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                clip: rect(0 0 0 0);
                overflow: hidden;
            }
        }

        &.lead {
            flex-direction: row;
            padding: 0;
            background-color: transparent;

            & figure {
                order: 1;
                width: 540px;
                height: 278px;
                background-color: #eee;

                & a {
                    width: 100%;
                    height: 100%;
                    display: block;
                    overflow: hidden;

                    &:hover img {
                        transform: scale(1.1);
                    }
                }
            }

            & .title {
                font-weight: 700;
                font-size: 48px;
                line-height: 1.4;
                letter-spacing: -2px;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            & .description {
                color: #2e2e2e;
                font-size: 20px;
                line-height: 1.4;
                font-weight: 400;
            }

            & .content {
                display: block;
                padding: 0;
            }

            & .link {
                position: static;
                width: 160px;
                margin-top: 60px;
                text-align: center;
                display: flex;
                align-items: center;

                &::before {
                    content: none;
                }

                & a {
                    flex: 1 0 0;
                    padding: 0 16px;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 2px solid #043b72;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 29px;
                    transition: all 0.25s ease;

                    &:link,
                    &:visited {
                        color: #043b72;
                    }

                    /* &:hover,
                  &:active {
                      color: #043b72;
                  } */

                    &:hover,
                    &:active {
                        color: #fff;
                        background-color: #043b72;
                    }
                }
            }
        }
    }

    figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s ease;
    }
}

[data-component="TigerEtfMainHero"] {
    position: relative;
    background-color: #043b72 !important;
    margin-block: 60px;

    &.preview {
        margin-block: 0;
    }

    & .c-sheet {
        display: flex;
        justify-content: space-between;
        gap: 0 20px;
        box-sizing: border-box;
        max-width: 1522px;
        margin: 0 auto;
        padding: 0 16px;

        & > .c-card:only-child {
            flex: 1 0 0;
        }
    }

    & .c-card {
        padding: 60px 0;

        & h3 {
            margin: 0 0 20px;
            font-size: 24px;
            line-height: 36px;
            color: #fff;
            font-weight: normal;
        }
    }

    & .etf-focus {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        &:has(li:nth-child(1):is(:last-child)) {
            grid-template-columns: repeat(1, 1fr);
        }

        &:has(li:nth-child(2):is(:last-child)),
        &:has(li:nth-child(4):is(:last-child)) {
            grid-template-columns: repeat(2, 1fr);
        }

        &:has(li:nth-child(3):is(:last-child)),
        &:has(li:nth-child(6):is(:last-child)) {
            grid-template-columns: repeat(3, 1fr);
        }

        &:has(li:nth-child(5):is(:last-child)) {
            grid-template-columns: repeat(6, 1fr);

            li:nth-child(1),
            li:nth-child(2),
            li:nth-child(3) {
                grid-column: span 2;
            }

            li:nth-child(4),
            li:nth-child(5) {
                grid-column: span 3;
            }
        }

        & a {
            display: block;
            height: 70px;
            padding: 16px 32px;
            background-color: #fff;
            color: #043b72;
            font-weight: 700;
            font-size: 24px;
            line-height: 38px;
            text-align: center;
            transition: all 0.5s ease;
            align-items: center;
            justify-content: center;

            &:hover,
            &:active {
                background: linear-gradient(180deg,
                #e37500 0%,
                #f58220 59.62%,
                #ff9840 100%);
                color: #fff;
            }
        }
    }

    & .sec2 {
        padding: 0;
        width: auto;
        overflow: visible;
        display: block;
        text-align: left;
    }
}

[data-component="InvestmentMainSlot2"] {
    &.c-section {
        position: relative;
    }

    & .c-sheet {
        box-sizing: border-box;
        max-width: 1522px;
        margin: 0 auto;
        padding: 0 16px;

        & .c-sheet *,
        & .c-sheet *::before,
        & .c-sheet *::after {
            box-sizing: inherit;
        }
    }

    &.slot2 h2 {
        margin: 0 0 33px;
        color: #002b57;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.4;
        letter-spacing: -2px;
    }

    & .focus-list {
        display: flex;
        align-items: stretch;
        gap: 24px;

        & .focus-item {
            background-color: #fff;

            & .figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                transition: transform 0.5s ease;
            }

            & .content {
                & a {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                }

                & .title {
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 1.4;
                    color: #000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                & .info {
                    display: flex;
                    align-items: center;
                    gap: 20px;

                    & .date {
                        font-size: 20px;
                        font-weight: 400;
                        line-height: 1.4;
                        color: #757575;
                    }

                    & .source {
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 1.4;
                        color: #f58220;
                    }
                }
            }
        }

        & .list-left {
            width: 733px;
            flex: none;
            overflow: hidden;

            @media (max-width: 1180px) {
                width: 484px;
            }
        }

        & .focus-list-big {
            width: 100%;
            height: 100%;
            position: relative;

            & .focus-item {
                display: flex;
                flex-direction: column;
                gap: 15px;
                height: 100%;
            }

            & .figure {
                width: 100%;
                aspect-ratio: 16/9;
                overflow: hidden;

                & a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    &:hover img {
                        transform: scale(1.1);
                    }
                }

                & .figure img {
                    transition: transform 0.5s ease;
                }
            }
        }

        & .focus-list-small {
            flex: 1;
            overflow: hidden;
            border-bottom: 1px solid #eee;
            align-self: flex-start;

            & .swiper-wrapper {
                display: flex;
                flex-direction: column;
            }

            & .focus-item {
                width: 100%;
                display: flex;
                align-items: center;
                height: 103px;
            }

            & .figure {
                width: 144px;
                height: 81px;
                aspect-ratio: 16/9;
                overflow: hidden;
                flex: none;

                & a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    &:hover img {
                        transform: scale(1.1);
                    }
                }

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    transition: transform 0.5s ease;
                }
            }

            & .content {
                height: 100%;
                border-top: 1px solid #ececec;
                flex: 1;
                padding-inline: 20px;
                overflow: hidden;
                display: flex;
                align-items: center;

                & a {
                    width: 100%;
                    overflow: hidden;
                }
            }

            & .swiper-slide.swiper-slide-thumb-active {
                display: none;
            }
        }
    }

    & .swiper-controls {
        position: absolute;
        inset: auto;
        bottom: 108px;
        right: 20px;
        background: #f5f7f9;
        border-radius: 12px;
        display: flex;
        gap: 8px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        height: 24px;
        z-index: 1;

        @media (max-width: 1180px) {
            bottom: 159px;
        }

        & .swiper-pagination {
            position: relative;
            inset: auto;
            font-size: 10px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: -0.26px;
            color: #585e6b;
            vertical-align: middle;

            & span {
                vertical-align: bottom;
                font-size: 13px;
            }
        }

        & .swiper-pagination-current {
            color: #f58220;
            font-weight: 500;
        }

        & button {
            width: 12px;
            height: 12px;
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            z-index: 1;
            margin-top: 0;
        }

        & .swiper-button-prev {
            background: url("/magi/assets/images/main/icon_main_focus_prev.svg") no-repeat center center / contain;

            &::after {
                display: none;
            }
        }

        & .swiper-button-next {
            background: url("/magi/assets/images/main/icon_main_focus_next.svg") no-repeat center center / contain;

            &::after {
                display: none;
            }
        }

        & .swiper-button-pause {
            background: url("/magi/assets/images/main/icon_main_focus_pause.svg") no-repeat center center / contain;
        }

        & .swiper-button-play {
            background: url("/magi/assets/images/main/icon_main_focus_play.svg") no-repeat center center / contain;
        }
    }

    & .section-more {
        margin-top: 40px;
    }
}

[data-component="TigerEtfMainPension"].c-section {
    position: relative;

    & .c-sheet {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0 20px;
        box-sizing: border-box;
        max-width: 1522px;
        margin: 0 auto;
        padding: 0 16px;

        &>.c-card:only-child {
            flex: 1 0 0;
        }

        & *,
        & *::before,
        & *::after {
            box-sizing: inherit;
        }
    }



    & .title {
        color: #043b72;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.4;
    }

    & .list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 1fr;
        gap: max(24px, .625vw);

        & .each a {
            display: block;
            width: 314px;
            height: 80px;
            padding: 20px 30px;
            background-color: #043b72;
            color: #fff;
            font-weight: 700;
            font-size: 24px;
            line-height: 1.66667;
            text-align: center;
            text-transform: uppercase;
            transition: all 0.5s ease;

            @media screen and (max-width:1180px) {
                width: 250px;
            }

            &:hover {
                background-color: #F58220;
            }
        }


    }

}


[data-component="InvestmentMainSlot3"] {
    &.c-section {
        position: relative;
    }

    & .c-sheet {
        box-sizing: border-box;
        max-width: 1522px;
        margin: 0 auto;
        padding: 0 16px;

        &:only-child {
            flex: 1 0 0;
        }

        & *,
        & *::before,
        & *::after {
            box-sizing: inherit;
        }

        & .closer {
            margin: 50px 0 120px;
        }
    }

    & .tabs {
        display: flex;
        align-items: center;
        padding-right: 0;
        padding-left: 0;
        border-bottom: 2px solid rgba(17, 17, 17, 0.16);
        margin-bottom: 80px;

        & .each {
            padding-right: 0;
            padding-bottom: 30px;
            padding-left: 0;
            color: #474747;
            font-size: 32px;
            line-height: 1.65625;
            transition: all 0.25s ease;

            &:not(:first-child) {
                margin-left: 72px;
            }

            &.active,
            &.on {
                margin-bottom: -2px;
                padding-bottom: 28px;
                border-bottom: 4px solid #ff8300;
                font-weight: 700;
                font-size: 36px;
                color: #f58220;
            }

            &:hover {
                font-weight: 700;
                color: #f58220;
            }
        }
    }

    & .c-list-handler {
        margin-bottom: 60px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        & p {
            display: flex;
            align-items: center;
            gap: 24px;
            justify-content: space-between;
            font-size: 32px;
            font-weight: 500;
            line-height: 1.41667;
            color: #002b57;
            letter-spacing: -0.864px;
        }

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

        & .selcted {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 32px;
            color: #111;
            font-weight: 700;
            letter-spacing: -0.192px;

            & select {
                appearance: none;
                color: #1a1a1a;
                border: 1px solid #d2dcf3;
                height: 46px;
                font-size: 20px;
                line-height: 29px;
                background-color: #ffdcc6;
                padding-inline: 14px 46px;
                background-image: url("/magi/assets/images/icon/icon_main_select_arrow.svg");
                background-size: 24px;
                background-repeat: no-repeat;
                background-position: right 14px center;
                font-weight: 700;
                color: #000;

                & option {
                    background-color: #fff;
                }
            }
        }

        & .form select {
            width: 100%;
            height: 45px;
            padding: 7px 13px;
        }
    }

    & .products {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 1fr;
        gap: max(24px, 0.625vw);
        grid-auto-flow: column;

        & > .each {
            display: flex;
            flex-direction: column;
            align-self: stretch;
            border: 1px solid #c9c9c9;
            transition: all 0.3s ease;

            &:hover {
                border-color: #f58220;
            }

            & > a {
                padding: 50px 30px 50px;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            & .header {
                display: flex;
                justify-content: space-between;
            }
        }

        & .rank {
            color: #000;
            font-weight: 700;
            font-size: 24px;
            line-height: 1.4;
        }

        & .area {
            margin-bottom: 10px;
        }

        & .chart {
            margin-top: auto;

            & canvas {
                max-width: 100%;
            }
        }

        & .info,
        & .calculation {
            margin-top: 30px;
        }

        & .info .rate {
        }

        & .title {
            min-height: 5.625rem;
            margin: 24px 0 6px;
            color: #043b72;
            font-weight: 700;
            font-size: 32px;
            line-height: 1.4;
            letter-spacing: -2px;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            & a {
                display: block;
                font-size: inherit;
                line-height: inherit;
            }
        }

        & .code {
            color: #043b72;
            font-size: 14px;
            line-height: 1.71429;
        }

        & .type {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-left: -10px;

            & span {
                position: relative;
                margin: 0 10px;
                color: #949494;
                font-size: 14px;
                line-height: 1.4;

                &:not(:first-child) {
                    margin-left: 11px;

                    &::before {
                        position: absolute;
                        top: 50%;
                        left: -11px;
                        height: 12px;
                        margin-top: -6px;
                        border-left: 1px solid #c9c9c9;
                        content: "";
                    }
                }
            }
        }

        & .graph {
            margin: 8px 0 30px;
        }
    }

    & .calculation {
        & .this-label {
            color: #757575;
            font-size: 12px;
            line-height: 1.66667;
            font-weight: 400;
        }

        & .val {
            display: flex;
            align-items: baseline;

            &.increased span {
                color: #d93b3b;
            }

            &.decreased span {
                color: #245dab;
            }

            & .number {
                font-weight: 500;
                font-size: 38px;
                line-height: 1.39474;
                letter-spacing: -0.76px;
            }

            & .unit {
                position: relative;
                font-weight: 700;
                font-size: 24px;
                line-height: 28px;
            }
        }
    }

    & .prices {
        display: flex;
        margin-top: 26px;

        & > div {
            flex: 0 0 50%;
        }

        & .this-label {
            display: block;
            color: #757575;
            font-size: 13px;
            line-height: 1.53846;
            letter-spacing: normal;
        }

        & .val {
            color: #000;
            font-size: 14px;
            line-height: 1.57143;
            font-weight: 500;
            letter-spacing: normal;
        }
    }

    & .bookmark {
        position: relative;
        width: 17px;
        height: 22px;

        &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17px;
            height: 22px;
            background: url("/magi/assets/images/icon/bookmark_default.svg") no-repeat center;
            background-size: 100% auto;
            content: "";
        }

        &.active::before,
        &.on::before {
            background-image: url("/magi/assets/images/icon/bookmark_active.svg");
        }

        & .val {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            clip: rect(0 0 0 0);
            overflow: hidden;
        }
    }

    & .criteria {
        position: relative;
        padding-left: 22px;
        color: #757575;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.6;

        &::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 18px;
            height: 18px;
            margin-top: -9px;
            background: url("/magi/assets/images/icon/icon_main_criteria.svg") no-repeat center;
            background-size: 100% auto;
            content: "";
        }
    }

    & .shortcut {
        display: flex;
        justify-content: center;

        & .link {
            position: relative;
            padding: 1px 26px 1px 0;
            color: #5e5e5e;
            font-size: 16px;
            line-height: 1.375;

            &::after {
                position: absolute;
                top: 50%;
                right: 0;
                width: 24px;
                height: 24px;
                margin-top: -12px;
                background: url("/magi/assets/images/icon/icon_main_shortcut_caret_right.svg") no-repeat right center;
                background-size: auto 100%;
                content: "";
            }
        }
    }
}

.section-divider {
    width: 100%;
    height: 30px;
    background-color: #f5f7f9;
    border: 0;
    margin-block: 75px;
    /*margin-bottom:80px;*/
}

.section-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
    margin-inline: auto;

    & .btn-more {
        display: inline-flex;
        align-items: center;
        gap: 2px;

        & span {
            font-size: 16px;
            color: #757575;
            line-height: 1.625;
            display: block;
            font-weight: 500;
        }

        & .icon-arrow-right {
            width: 24px;
            height: 24px;
            display: block;
            background-image: url("/magi/assets/images/icon/icon_arrow_main_section_right.svg");
            background-size: contain;
            background-repeat: no-repeat;
            /*margin-top:3px;*/
        }
    }
}


/* 관리자 연동용 CSS */
#main:has(.component-container) {
    height: 100%;

    .component-container {
        height: 100%;

        #mainSectionHero {
            height: 100%;

            .c-card {
                min-height: 264px;
            }
        }

    }

    [data-component="MainHero"] {
        &.c-section {
            margin-block: 0;
        }

        & .c-sheet {
            padding: 0;
        }
    }

    #mainSectionAttention {
        margin: 0;
        border-top: 0;
    }
}