.wrap-body {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
a {
    display: flex;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrap-body-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 290px;
    height: auto;
}

.wrap-body-center {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 600px;
    height: auto;

    & .wrap-main-banner {
        width: 100%;
        height: 290px;
    }
}

.wrap-body-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 290px;
    height: auto;
}

.wrap-box { display: flex;padding: 20px 12px;flex-direction: column;align-items: flex-start;gap: 8px;align-self: stretch; border: 1px solid #ddd;}
.wrap-box .box-header { width: 100%; padding: 0px 12px 8px 12px;border-bottom: 1px solid #DDD;}
.wrap-box .box-header h3 { width: 100%; margin: 0; font-size: 18px; font-weight: 700;}
.wrap-box .box-body {
    display: flex;
    padding: 0px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.wrap-box .box-header-tab {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0;
    border-bottom: 1px solid #ddd;
    & a {
        display: flex;
        padding: 8px 16px 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        font-family: Pretendard;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px; /* 131.25% */
        letter-spacing: -0.32px;
        color: #666666;
        &.on, &:hover {
            color: var(--main_color);
            border-bottom: 2px solid var(--main_color);
            text-decoration: none;
            margin-bottom: -1px;
        }
    }
}

.wrap-body-left .wrap-box:first-child { height: 177px;}

.wrap-body-left .wrap-box-btns {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
    flex-direction: row;
    & a {height: 58px;}
    margin-top: -17px;
}

.wrap-box .box-body .box-body-btns {
    display: flex;
    padding: 12px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    & .wrap-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        padding: 0;
        margin: 0;
        & a {
            display: flex;
            padding: 6px 12px 8px 12px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 6px;
            border: 1px solid #D0D0D0;
            background: #FFF;
            &:hover {
                text-decoration: none;
                background-color: var(--main_color) !important;
                color: #FFF;
            }
        }
    }
}

.box-body-site {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 4px;
    gap: 10px;
    & .wrap-row {
        width: 100%;
        display: flex;
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        align-self: stretch;
        & .wrap-row-select {
            display: flex;
            flex-direction: row;
            gap: 8px;
            width: 100%;
            align-items: center;
            & select {
                width: 100%;
            }
        }
    }
}

.wrap-box-download {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px 8px 0px 8px;
    height: 174.5px;
    overflow: hidden;
    & .wrap-download-item {
        display: flex;
        width: 120px;
        height: 30px;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-bottom: 12px;
        & img {
            height: 30px;
        }
        & a {
            color: #000;
            font-family: Pretendard;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: -0.28px;
        }
    }
}

.wrap-body-center .wrap-final-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 51px;
    border: 1px solid #d0d0d0;
    background-color: #efefef;
    align-items: center;
    padding: 0 24px;
    font-size: 14px;
    overflow: hidden;
    & .final_title {
        width: 91px;
        font-size: 14px;
        font-weight: 700;
    }
    & .final_body {
        width: 440px;
        font-size: 14px;
        height: 20px;
        overflow: hidden;
        & .rolling {
            width: 440px;
            display: flex;
            flex-direction: column;
            & li {
                width: 440px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
                height: 20px;
            }
        }
    }
}

#tab-notice_content, #tab-bid_content {
    width: 100%;
}
.tc-item {
    width: 100%;
    display: none;
    height: auto;
    &.tc-selected {
        display: flex;

    }
    & ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px 0 16px 0;
        & .td_notice {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: start;
            & a {
                color: #000;
                font-family: Pretendard;
                font-size: 14px;
                font-style: normal;
                line-height: 21px; /* 150% */
                letter-spacing: -0.28px;
                display: flex;
                flex-direction: row;
                gap: 12px;
                align-items: center;
                &:hover {
                    text-decoration: none;
                    color: var(--main_color);
                }
                & i {font-size: 18px;}

            }
            & span {
                color: #666;
                font-family: Pretendard;
                font-size: 14px;
                font-style: normal;
                font-weight: 700;
                line-height: 21px; /* 150% */
                letter-spacing: -0.28px;
                margin-left: auto;
            }
        }
    }

}

.wrap-login {
    width: 100%;
    & ul, & li, & form {
        width: 100%;
    }
    & input {
        height: 36px !important;
    }
    & .box-header {
        border: none;
        padding-bottom: 0;
    }
    & .main_log_in {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        & .inner-login-flex {
            display: flex;
            justify-content: center;
            flex-direction: row;
            gap: 16px;
            font-size: 12px;
        }
    }

}

.wrap-body-right .wrap-box-btns {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
    flex-direction: row;
    margin-top: -17px;
}

.wrap-etc-link {
    border: 1px solid #ddd;
    display: flex;
    width: 100%;
    padding: 12px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    background: url(/skin/v1.0/image/first/bg_etc.png) right bottom no-repeat;
    & a {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: row;
        color: #333;
        text-align: center;
        font-family: Pretendard;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px; /* 200% */
        letter-spacing: -0.28px;
        &:hover {
            color: var(--main_color);
            text-decoration: none;
        }
    }
}

.wrap-order-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main_log_out {
    display: flex;
    padding: 12px 20px;
    flex-direction: column;
    gap: 8px;
}

.final_body {
    max-height: 20px;
}