#wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#main_row1 {
    width: 100%;
    max-width: 1176px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 64px;
    padding: 36px 0;
    & h3 {
        font-size: 21px;
        line-height: 21px;
        font-weight: 700;
        margin: 0;
        padding: 0;
        margin-bottom: 1rem;
        color: var(--col_black);
    }
    & .wrap-main-slide {
        width: 658px;
        flex-shrink: 0;
        & img {
            width: 100%;
        }

    }

    & .wrap-main-menu {
        display: flex;
        flex-direction: column;
        gap: 42px;
        width: 100%;
        & .wrap-main-menu-container {
            grid-template-columns: repeat(3, minmax(117px, 1fr));
            gap: 1.25rem;
            display: grid;
            & a {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 104px;
                padding: 1.125rem 0.75rem;
                border-radius: 1.25rem;
                box-sizing: border-box;
                border: 0;
                background-color: var(--col_white);
                box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 20px 0px;
                animation-duration: 0.5s;
                transition:0.5s;
                & img {
                    height: 36px;
                    width: 36px;
                }
                & span {
                    color: var(--col_black);
                    font-size: 14px;
                    font-weight: 500;
                }

            }
            & a:hover {
                text-decoration: none;
                transform: translateY(-8px);
                background-color: var(--main_color);
                & span {
                    color: var(--col_white);
                    font-weight: 600;
                }
            }
        }
    }
}

#main_row2 {
    width: 100%;
    background-color: var(--col-bg-gray);
}

.wrap-main-row-container {
    width: 1176px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 44px 0;
    & .wrap-title {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 12px;
        & h3 {
            margin: 0;
            padding: 0;
        }
        & .wrap-callcenter {
            margin-left:  auto;
            font-size: 21px;
            font-weight: 600;
        }
    }
}

.wrap-main-new {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    gap: 24px;
    & .wrap-main-new-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 30px;
        gap: 24px;
        border-radius: 16px;
        border: none;
        background: var(--col_white, #FFF);
        box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 20px 0px;
        & h4 { margin: 0; padding: 0;}
        & ul {list-style: none; display: flex; flex-direction: column; width: 100%; gap: 6px;}
        & li {
            flex-direction: row; width: 100%;display: flex;
            & a { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;
                & span { width: 240px;
                        display: inline-block;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        font-size: 16px;
                        color: var(--col_black);
                    &::before { content: " - ";}
                }
                & small { margin-left: auto; color:var(--col_gray); font-size: 14px;}
            }
            & a:hover {
                text-decoration: none;
                & span {text-decoration: underline;}

            }

        }
    }
}