html, body, form {
    margin: 0;
    padding: 0;
    color: #4E4E4E;
    font-size: 16px;
    font-family: Arial,Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.5;
    --spacing: 24px;
}

a {
    color: #4E4E4E;
    text-decoration: none;
}

    a:hover {
        color: inherit;
    }

div {
    Box-sizing: border-box;
}

html, body, form, #Base {
    /*height: 100%;*/
}

.Clearfix::before,
.Clearfix::after {
    content: " ";
    display: table;
}

.Clearfix::after {
    clear: both;
}

input {
    color: #4E4E4E;
}

.text-decoration-underline {
    text-decoration: none !important;
}
/*自訂class*/
.Text8 {
    font-size: 2.81rem;
}

.Text7 {
    font-size: 2.5rem;
}

.Text6 {
    font-size: 1.77rem;
}

.Text5 {
    font-size: 1.375rem;
}

.Text4 {
    font-size: 1.25rem;
}

.Text3 {
    font-size: 0.875rem;
}

.Text2 {
    font-size: 0.8rem;
}

.Text1 {
    font-size: 0.6875rem;
}

/*自訂padding、margin*/
.PaddingTop1 {
    padding-top: calc( var(--spacing) * 0.5 );
}

.PaddingTop2 {
    padding-top: calc( var(--spacing) * 0.625 );
}

.PaddingTop3 {
    padding-top: 33px;
}

.PaddingTop4 {
    padding-top: calc( var(--spacing) * 1.25 );
}

.PaddingTop5 {
    padding-top: calc( var(--spacing) * 1.5 );
}

.PaddingTop6 {
    padding-top: calc( var(--spacing) * 2 );
}

.PaddingBottom1 {
    padding-bottom: calc( var(--spacing) / 2 );
}

.PaddingBottom2 {
    padding-bottom: calc( var(--spacing) * 0.625 );
}

.PaddingBottom3 {
    padding-bottom: 33px;
}

.PaddingBottom4 {
    padding-bottom: calc( var(--spacing) * 1.25 );
}

.PaddingBottom5 {
    padding-bottom: calc( var(--spacing) * 1.5 );
}

.PaddingBottom6 {
    padding-bottom: calc( var(--spacing) * 2 );
}

.PannelPy {
    padding-top: 48px;
    padding-bottom: 48px;
}

.MarginTop1 {
    margin-top: calc( var(--spacing) / 2);
}

.MarginTop2 {
    margin-top: calc( var(--spacing) * 0.625 );
}

.MarginTop3 {
    margin-top: 33px;
}

.MarginTop4 {
    margin-top: calc(var(--spacing) * 1.25);
}

.MarginTop5 {
    margin-top: calc(var(--spacing) * 1.5);
}

.MarginTop6 {
    margin-top: calc(var(--spacing) * 2);
}

.MarginTop7 {
    margin-top: calc(var(--spacing) * 3);
}

.MarginTop8 {
    margin-top: calc(var(--spacing) * 4);
}

.MarginBottom1 {
    margin-bottom: calc( var(--spacing) / 2);
}

.MarginBottom2 {
    margin-bottom: calc( var(--spacing) * 0.625 );
}

.MarginBottom3 {
    margin-bottom: 33px;
}

.MarginBottom4 {
    margin-bottom: calc(var(--spacing) * 1.25);
}

.MarginBottom5 {
    margin-bottom: calc(var(--spacing) * 1.5);
}

.MarginBottom6 {
    margin-bottom: calc(var(--spacing) * 2);
}

.Mt-150 {
    margin-top: 150px;
}

.Mt-60 {
    margin-top: 60px;
}

.Mt-40 {
    margin-top: 40px;
}


.Indent {
    margin-left: calc( var(--spacing) * 0.833 );
}

.Divider1 {
    padding-top: calc( var(--spacing) / 2);
}

.Divider2 {
    padding-top: var(--spacing);
}
/*Html Tag*/
textarea {
    resize: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

h1 {
    font-size: 2rem;
    letter-spacing: 0.1rem;
}

h2 {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
}

h3 {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}

h4 {
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
}

h5 {
    font-size: 1rem;
    letter-spacing: 0.1rem;
}

h6 {
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
}

/*bootstrap 按鈕改顏色*/
.btn {
    min-width: 100px;
}

    .btn.active.focus,
    .btn.active:focus,
    .btn.focus,
    .btn.focus:active,
    .btn:active:focus,
    .btn:focus,
    .form-control:focus {
        box-shadow: none !important;
        outline: none !important;
    }

.btn-primary {
    background-color: #002D5D;
    border-color: #002D5D;
    color: #ffffff;
    box-shadow: none;
}

.border-primary {
    border-color: #002D5D !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #002D5D !important;
    border-color: #002D5D !important;
    color: #ffffff !important;
}

.btn-primary.disabled {
    background-color: #697a96 !important;
    border-color: #697a96 !important;
}

    .btn-primary.disabled:hover,
    .btn-primary.disabled:focus,
    .btn-primary.disabled:active,
    .btn-primary.disabled.active,
    .btn-primary:disabled,
    .btn-primary[disabled]:hover,
    .btn-primary[disabled]:focus,
    .btn-primary[disabled]:active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary:hover,
    fieldset[disabled] .btn-primary:focus,
    fieldset[disabled] .btn-primary:active,
    fieldset[disabled] .btn-primary.active {
        background-color: #697a96 !important;
        border-color: #697a96 !important;
        color: #ffffff !important;
    }

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #ffc06b;
    border-color: #ffc06b;
}

.btn-outline-primary {
    color: #002D5D;
    border-color: #002D5D;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: #002D5D !important;
        border-color: #002D5D !important;
        color: #ffffff !important;
    }

.btn-orange {
    background-color: #fff !important;
    color: #FF9E18;
    border-color: #FF9E18 !important;
}

    .btn-orange:hover {
        background-color: #FF9E18 !important;
        color: #fff;
    }

.btn-orange2 {
    background-color: #FF9E18 !important;
    color: #FFF;
    border-color: #FF9E18 !important;
}

    .btn-orange2:hover {
        background-color: rgba(255, 158, 24, 0.8) !important;
        border-color: rgba(255, 158, 24, 0.8) !important;
        color: #FFF !important;
    }

    .btn-secondary {
        background-color: #666666;
        border-color: #666666;
    }

/*bootstrap 文字改顏色*/
.text-primary {
    color: #002D5D !important;
}

.text-orange {
    color: #FF9E18 !important;
}

.text-dark {
    color: #464646 !important;
}

.tex-Secondary {
    color: #D9D9D9 !important;
}

.text-red {
    color:#dc3545!important;
}

.bg-orange {
    background-color: #FF9E18 !important;
}

.btn-danger:hover {
    background-color: #dc3545 !important;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: var(--spacing);
    padding-left: var(--spacing);
}

.modal .modal-header {
    position: relative;
    padding: var(--spacing);
}

.modal .btn-close {
    position: absolute;
    top: calc( var(--spacing) * 1.12);
    right: var(--spacing);
}

.modal .modal-body {
    padding: var(--spacing);
}

input::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/*fancybox*/
.fancybox-slide--iframe .fancybox-close-small {
    top: 3px;
    right: 3px;
    box-shadow: none;
    background-color: #fff;
    border-color: #fff;
    width: 39px;
    height: 39px;
    border-radius: 0;
}

    .fancybox-slide--iframe .fancybox-close-small:hover:after,
    .fancybox-slide--iframe .fancybox-close-small::after {
        font-size: 35px;
        color: #888;
        outline: 0;
    }

/*字太多單行隱藏*/
.Ellipse1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.Ellipse2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.Ellipse3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*英強迫換行*/
.EnWordBreak {
    word-wrap: break-word; /*只对英文起作用，以字母作为换行依据*/
}

.EnWordBreak2 {
    overflow-wrap: anywhere;
}

/*企業端職缺列表*/
.Information {
}

    .Information .information-box {
        box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
        height: 100%;
        padding: 30px;
        text-align: left;
        transition: 0.3s;
        border-radius: 10px;
    }

    .Information .DetailPanel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        position: relative;
        z-index: 2;
    }

        .Information .DetailPanel .AddressPanel {
            display: grid;
            grid-template-columns: 12px auto;
            gap: 3px;
        }