﻿html, body, form {
    color: #333333;
    letter-spacing: 0.1em;
}

body {
    background-color: #F6F6F6;
}

#Base_Worker {
    /*max-width: 768px;*/
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
}

    #Base_Worker .Body {
        margin-top: 53.72px;
        padding-bottom: 90px;
        min-height: 90vh;
    }

    /*導覽列*/
    #Base_Worker .navbar {
        padding: 6.5px 30px;
        box-shadow: 0px 3px 6px #00000029;
    }

        #Base_Worker .navbar .navbar-toggler {
            color: #02020200;
            border: 0px dashed;
            padding: 4px 8px;
        }

        #Base_Worker .navbar .nav-item .nav-link {
            color: #002D5D;
            font-weight: bold;
        }

        #Base_Worker .navbar .nav-item .dropdown-menu {
            border: 0px solid rgba(0, 0, 0, .15);
        }

        #Base_Worker .navbar .offcanvas-body .btn-group .dropdown-menu {
            padding: 24px 16px;
            border: 0px solid rgba(0, 0, 0, .15);
            border-radius: 8px;
        }

            #Base_Worker .navbar .offcanvas-body .btn-group .dropdown-menu[data-bs-popper] {
                margin-top: 24px;
            }

        #Base_Worker .navbar .offcanvas .offcanvas-header {
            justify-content: center;
            padding: 32px;
            flex-direction: column;
            border-bottom: 4px solid hsl(0deg 0% 85% / 60%);
            position: relative;
        }

        #Base_Worker .navbar .offcanvas-body .btn-group .dropdown-menu .dropdown-item {
            padding: 8px 16px;
            border-radius: 8px;
            color: #002D5D;
        }

            #Base_Worker .navbar .offcanvas-body .btn-group .dropdown-menu .dropdown-item:focus,
            #Base_Worker .navbar .offcanvas-body .btn-group .dropdown-menu .dropdown-item:hover {
                color: #ffffff !important;
                background-color: #FF9E18;
            }

        #Base_Worker .navbar .offcanvas .offcanvas-header .btn-close {
            position: absolute;
            right: 24px;
            top: 24px;
        }

        #Base_Worker .navbar .offcanvas .offcanvas-body {
            padding: 20px 32px;
        }

    #Base_Worker .Logo {
        display: none;
    }


    #Base_Worker .TopMenu {
        display: grid;
        grid-template-columns: auto;
        gap: 8px;
    }

    #Base_Worker .Return {
        position: absolute;
        top: 0;
        left: 2px;
        width: 48px;
        bottom: 0;
        height: 48px;
        margin: auto 0;
    }

        #Base_Worker .Return .ReturnIcon {
            font-size: 3rem;
            color: #fff;
        }

    #Base_Worker .Footer {
        background-color: #EBEBEB;
    }

        #Base_Worker .Footer .FooterTop {
            padding: 60px 0 30px;
        }

            #Base_Worker .Footer .FooterTop .FooterIconPanel {
                margin-top: 28px;
            }

                #Base_Worker .Footer .FooterTop .FooterIconPanel .FooterIcon {
                    width: 2.19vw;
                    margin: 0 4px;
                    min-width: 32px;
                }

            #Base_Worker .Footer .FooterTop .ServicePanel {
                align-self: center;
                color: #464646;
                font-weight: bold;
            }

        #Base_Worker .Footer .FooterBottom .StatementPanel {
            margin: 30px 0 60px;
        }

        #Base_Worker .Footer .FooterBottom .StatementItem {
            color: #464646;
            font-size: 14px;
        }

    #Base_Worker .Selected {
        color: #FF9E18 !important;
    }

    #Base_Worker .FullPageCardPanel {
        max-width: 100%;
        padding: var(--spacing);
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    }

    #Base_Worker .FullPageCardPanel_Position {
        background-color: #FFF;
        border-radius: 8px;
        padding: 48px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
        position: relative;
    }

    #Base_Worker .FullPageCardPanel .AmountInput {
        width: 100px !important;
    }

    #Base_Worker .FullPageCardPanel input[type=text] {
        width: 450px;
    }

    /*職缺列表*/
    #Base_Worker .PositionList-Job .PositionPanel-Job {
        display: block;
        position: relative;
        padding: 24px 16px;
        background-color: #fff;
        border-bottom: 0.25px solid #B9B9B9;
    }

        #Base_Worker .PositionList-Job .PositionPanel-Job .PositionItem-Job {
            display: grid;
            grid-template-columns: 1px auto;
            gap: 23px;
        }

            #Base_Worker .PositionList-Job .PositionPanel-Job .PositionItem-Job .DetailPanel-Job {
                display: grid;
                grid-template-columns: auto 32px;
                gap: 4px;
            }

                #Base_Worker .PositionList-Job .PositionPanel-Job .PositionItem-Job .DetailPanel-Job .DetailItem-Job {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 5px;
                    grid-auto-rows: auto 26px 26px 26px auto;
                    align-self: start;
                    align-items: center;
                }

    #Base_Worker .PositionPanel {
        display: block;
        position: relative;
        padding: var(--spacing);
        overflow: hidden;
        background-color: #fff;
        border-bottom: 0.25px solid #9EA7BE;
    }

    #Base_Worker .DetailPanel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 95%;
        position: relative;
        z-index: 2;
    }

    #Base_Worker .PositionList-JobList.js-PositionList .PositionPanel-JobList:last-child,
    #Base_Worker .PositionList-Job .PositionPanel-Job:last-child,
    #Base_Worker .PositionList .PositionPanel:last-child {
        border-bottom: 0 solid #B9B9B9;
    }

    #Base_Worker .DetailItem-JobList > *,
    #Base_Worker .DetailItem-Job > *,
    #Base_Worker .DetailItem > * {
        line-height: 26px;
    }


    #Base_Worker .PositionPanel.EnterPriseImage {
        background-color: #FFFAE3;
    }

    #Base_Worker .PositionPanel .EnterPriseImageIcon {
        position: absolute;
        bottom: -112px;
        right: -32px;
        opacity: 0.4;
        font-size: 19rem;
        color: #ffd192;
        pointer-events: none;
    }

    /*職缺標題*/
    #Base_Worker .DetailPanel .InfoItem {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 70vw;
        display: inline-block;
    }

    #Base_Worker .DetailPanel-JobList .InfoItem,
    #Base_Worker .DetailPanel-Job .InfoItem {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #Base_Worker .DetailPanel-JobList .DetailItem-JobList .Title.InfoItem,
    #Base_Worker .DetailPanel-Job .DetailItem-Job .Title.InfoItem,
    #Base_Worker .DetailPanel-JobList .DetailItem-JobList .EnterpriseOtherPanel.InfoItem,
    #Base_Worker .DetailPanel-Job .DetailItem-Job .EnterpriseOtherPanel.InfoItem {
        -webkit-line-clamp: 2 !important;
    }

    #Base_Worker .DetailPanel-JobList .SalaryRange,
    #Base_Worker .DetailPanel-Job .SalaryRange,
    #Base_Worker .DetailPanel .SalaryRange {
        color: #FF9E18;
    }

    #Base_Worker .MedalIcon {
        vertical-align: middle;
        width: 20px;
        margin-left: -5px;
        color: #FF9E18;
    }

    #Base_Worker .DetailPanel-JobList .AddressPanel,
    #Base_Worker .DetailPanel-Job .AddressPanel,
    #Base_Worker .DetailPanel .AddressPanel {
        display: grid;
        grid-template-columns: 12px auto;
        gap: 3px;
    }

    #Base_Worker .MapIcon {
        margin-left: -2px !important;
        display: inline-block;
        width: 12px;
    }

    #Base_Worker .IconWght {
        font-variation-settings: 'wght' 200;
    }

    #Base_Worker .text-gray {
        color: #717070;
    }

    #Base_Worker .DetailPanel-JobList .FavIcon,
    #Base_Worker .DetailPanel-Job .FavIcon {
        color: #d1d1d1;
        z-index: 2;
        font-size: 32px;
        position: relative;
        top: initial;
        right: initial;
    }

    #Base_Worker .FavIcon {
        position: absolute;
        top: var(--spacing);
        right: var(--spacing);
        color: #d1d1d1;
        z-index: 2;
    }

        #Base_Worker .FavIcon.Selected {
            color: #CC0000;
            font-variation-settings: 'FILL' 1;
        }

    /*職缺、公司內容形象圖*/
    #Base_Worker .EnterpriseTitlePanel {
        display: grid;
        grid-template-columns: auto 25px;
        gap: 10px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
        border-radius: 0 0 4px 4px;
        background-color: #FFF;
        padding: 38px 48px;
        position: relative
    }

    #Base_Worker .EnterpriseTitleItem {
        position: absolute;
        bottom: 0px;
        display: grid;
        grid-template-columns: auto 3fr;
        gap: 16px;
    }

    #Base_Worker .EnterpriseLogo {
        width: 9vw;
        max-width: 180px;
        min-width: 87px;
        border: 1px solid #D9D9D9 !important;
        border-radius: 16px;
        margin: auto;
    }

    #Base_Worker .EnterpriseOtherPanel .EnterpriseOtherItem {
        display: inline-block;
        padding: 3px 5px;
        background-color: #d9d9d996;
        border-radius: 5px;
        margin-top: 2px;
        color: #888;
    }

    #Base_Worker .Tab {
        display: block;
        background-color: #FFF;
        border-radius: 10px 10px 0px 0px;
    }

    #Base_Worker .ItemGrid {
        display: grid;
        padding: 0px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    #Base_Worker .ItemGrid2 {
        display: grid;
        padding: 0px;
        grid-template-columns: 1fr 1fr;
    }

    #Base_Worker .Tab .Item {
        height: 45px;
        line-height: 45px;
        border-bottom: 0.5px solid #9EA7BE;
        border-right: 0.5px solid #9EA7BE;
        color: #333333;
    }

        #Base_Worker .Tab .Item:first-child {
            border-radius: 10px 0px 0px 0px;
        }

        #Base_Worker .Tab .Item:last-child {
            border-radius: 0px 10px 0px 0px;
            border-right: none;
        }

    #Base_Worker .Tab .ItemSelected {
        background-color: #FF9E18;
        color: #FFF;
        border: none;
    }

    #Base_Worker .OptionList {
        font-size: 16px;
    }

        #Base_Worker .OptionList input,
        #Base_Worker .OptionList input::placeholder,
        #Base_Worker .OptionList select {
            font-size: 12px !important;
        }

    #Base_Worker .GridColumn2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
    }

    #Base_Worker .GridColumn4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 5px;
    }

    #Base_Worker .OptionList .SelectList input {
        display: none;
    }

    #Base_Worker .OptionList label {
        border: 1px solid #E7E8E5;
        color: #717070;
        background-color: #fff;
        padding: 5px;
        width: 100%;
        border-radius: 6px;
        text-align: center;
    }

    #Base_Worker .OptionList .input-group span,
    #Base_Worker .OptionList .input-group input {
        font-size: 12px;
    }

    #Base_Worker .OptionList input:checked + label {
        background-color: #002D5D;
        color: #FFF;
    }

    #Base_Worker .PasswordPanel {
        position: relative;
    }

        #Base_Worker .PasswordPanel input {
            padding-right: 40px;
        }

        #Base_Worker .PasswordPanel .EyeIcon {
            position: absolute;
            top: 7px;
            right: 11px;
        }

    /*移工標題*/
    #Base_Worker .WorkerTitle {
        font-weight: bolder !important;
        color: #333333 !important;
    }


    /*移工文章*/

    #Base_Worker .NewsItem .Title,
    #Base_Worker .NewsDeatil .Title {
        font-size: 16px;
        /*      word-break: break-all;*/
        overflow-wrap: anywhere;
        font-weight: bold;
    }

    #Base_Worker .NewsItem .Content,
    #Base_Worker .NewsDeatil .Content,
    #Base_Worker .SearchRow .Content {
        color: #717070;
        font-size: 12px;
        /*word-break: break-all;*/
        overflow-wrap: anywhere;
    }

    #Base_Worker .NewsItem .Tag,
    #Base_Worker .NewsDeatil .Tag,
    #Base_Worker .SearchRow .Tag {
        display: inline-block;
        font-size: 12px;
        color: #FFF;
        background-color: #FF9E18;
        border-radius: 3.5px;
        padding: 3px 5px;
        /*margin-right:6px;*/
    }

    #Base_Worker .NewsItem {
        display: grid;
        grid-template-columns: auto 91px;
        gap: 0 16px;
        position: relative;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    #Base_Worker .Line::after {
        content: " ";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #9EA7BE;
        bottom: -1px;
    }

/*bootstrap 按鈕改圓角*/
.btn-primary, .btn-outline-primary, .btn-orange, .btn-orange2, .btn-secondary {
    border-radius: 12px;
}

#Base_Worker .GoogleLogin {
    cursor: pointer;
    padding: 5px 20px;
    display: block;
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #666;
    border-radius: 5px;
    border: 1px solid #CCC;
}

    #Base_Worker .GoogleLogin img {
        width: 25px;
        vertical-align: top;
        margin-right: 8px;
    }

#Base_Worker .FbLogin {
    cursor: pointer;
    padding: 5px 20px;
    display: block;
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #FFF;
    background-color: #0064E0;
    border-radius: 5px;
}

    #Base_Worker .FbLogin img {
        width: 18px;
        vertical-align: text-top;
        margin-right: 12px;
    }

#Base_Worker .FbLogin2 {
    cursor: pointer;
    padding: 6px 8px;
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #FFF;
    background-color: #0064E0;
    border-radius: 5px;
    vertical-align: top;
    margin-top: 5px;
    margin-right: 6px;
}


    #Base_Worker .FbLogin2 img {
        width: 20px;
        vertical-align: text-top;
    }


@media (max-width: 1400px) {
    #Base_Worker .container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    #Base_Worker .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width:992px) {
    #Base_Worker .row > * {
        padding-right: 0;
        padding-left: 0;
    }

    #Base_Worker .Footer .FooterTop .ServicePanel {
        font-size: 12px;
        margin-top: 20px;
    }

    #Base_Worker .Footer .FooterBottom .StatementItem {
        font-size: 9px;
    }

    #Base_Worker .navbar .container {
        max-width: 920px !important;
    }
}

@media (min-width: 992px) {
    #Base_Worker .navbar {
        padding-top: 19.33px;
        padding-bottom: 19.32px;
    }

        #Base_Worker .navbar .navbar-brand {
            margin-right: 72px;
        }

        #Base_Worker .navbar .nav-item {
            position: relative;
        }

            #Base_Worker .navbar .nav-item .nav-link,
            #Base_Worker .navbar .nav-item .nav-link span {
                color: #002D5D;
                font-size: 16px;
                font-weight: bold;
                padding-right: .9rem;
                padding-left: .9rem;
            }

                #Base_Worker .navbar .nav-item .nav-link:hover,
                #Base_Worker .navbar .nav-item .nav-link.active {
                    color: #FF9E18;
                }

                    #Base_Worker .navbar .nav-item .nav-link:hover::after,
                    #Base_Worker .navbar .nav-item .nav-link.active::after {
                        content: " ";
                        position: absolute;
                        width: 100%;
                        height: 4px;
                        background-color: #FF9E18;
                        bottom: -20px;
                        left: 0;
                    }

        #Base_Worker .navbar .offcanvas .offcanvas-body {
            padding: 0px;
        }

    #Base_Worker .Body {
        margin-top: 79.36px !important
    }
}

@media (min-width: 768px) {
    #Base_Worker .DetailPanel .InfoItem {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 644px;
        display: inline-block;
    }
}

@media (max-width: 430px) {
    #Base_Worker .EnterpriseTitlePanel {
        padding: 16px !important;
    }

    #Base_Worker .EnterpriseTitleItem {
        bottom: 2px !important;
    }

    #Base_Worker .EnterpriseTitle {
        font-size: 13px !important;
    }

    #Base_Worker .FullPageCardPanel_Position {
        padding: 16px !important;
    }

    #Base_Worker .PositionList-Job .PositionPanel-Job {
        padding: 24px 0px !important;
        font-size: 10px !important;
    }

        #Base_Worker .PositionList-Job .PositionPanel-Job .DetailPanel-Job .DetailItem-Job .Title.InfoItem {
            font-size: 13px !important;
        }

        #Base_Worker .PositionList-Job .PositionPanel-Job .PositionItem-Job .DetailPanel-Job .DetailItem-Job {
            gap: 0px !important;
        }

        #Base_Worker .PositionList-Job .PositionPanel-Job .DetailPanel-Job .DetailItem-Job .Text1.InfoItem,
        #Base_Worker .PositionList-Job .PositionPanel-Job .DetailPanel-Job .DetailItem-Job .EnterpriseOtherItem.Text2 {
            font-size: 10px !important;
        }

    /*移工文章*/

    #Base_Worker .NewsItem .Title,
    #Base_Worker .NewsDeatil .Title {
        font-size: 15px !important;
    }
}
