#content-div {
    padding-left: 0;
    padding-right: 0;
}

.index_tab {
    padding-left: 0;
    padding-right: 0;
}

    .index_tab > div {
        padding-left: 15px;
        padding-right: 15px;
    }

.titleWarp {
    max-width: 1280px;
    margin: 0 auto;
}

#JobSearchTab input, #JobSearchTab select {
    width: 100%;
    height: 100%;
    padding: 0 0 0 .5rem;
}

#JobSearchTab select {
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("../../../Image/common/JobSeeker/select_icon.png") no-repeat scroll 96% center transparent;
}

#JobSearchTab option {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari 和 Chrome */
    appearance: none;
}

#JobSearchTab .nav-link {
    height: 100%;
}

.larger_bold_txt {
    font-size: 14pt;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .pc {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .mobile {
        display: none;
    }
}

#customCalendarDiv {
    padding-top: 0;
    padding-bottom: 0;
}

#customCalendar {
    border: 1px solid gray;
    background-color: white;
}

    #customCalendar #cHeader {
        border-bottom: 1px solid;
        height: 45px;
    }

#mainBanner .carousel-inner .carousel-item img {
    width: 100%;
    max-height: 523px;
}

#mainBanner .carousel-control-prev {
    left: 5%;
}

#mainBanner .carousel-control-next {
    right: 5%;
}

#mainBanner .carousel-control-prev,
#mainBanner .carousel-control-next {
    top: 40%;
    width: 5%;
    max-width: 30px;
    height: 20%;
    background-color: #bbbbbb;
    padding: 5px;
}

#mainBanner #carousel-controls {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

    #mainBanner .carousel-control-prev:not(:hover),
    #mainBanner .carousel-control-next:not(:hover),
    #mainBanner #carousel-controls:not(:hover) .pause,
    #mainBanner #carousel-controls:not(:hover) .cycle,
    #mainBanner ul.carousel-indicators:not(:hover) > li {
        opacity: 0.3;
    }

#mainBanner .carousel-control:not(.active) {
    display: none;
}

#mainBanner .carousel-control::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

#mainBanner .carousel-control.pause::after {
    background: url(../../../Image/common/carousel_pause.svg);
    background-size: 32px 32px;
}

#mainBanner .carousel-control.cycle::after {
    background-image: url(../../../Image/common/carousel_play.svg);
    background-size: 32px 32px;
}

#mainBanner ul.carousel-indicators {
    margin-bottom: 0;
}

    #mainBanner ul.carousel-indicators li.active {
        background-color: #0070BA
    }

#mainBanner .carousel-caption {
    color: #1a120e;
    font-size: 2em;
    font-weight: 900;
    right: 5%;
    text-align: right;
}

.icon_menu {
    border-bottom: 3px solid #9fdd05;
    background-color: #e3f4f0;
}

    .icon_menu .icon_menu_item {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: end;
        padding-top: 1rem;
    }

        .icon_menu .icon_menu_item a {
            color: black;
        }

            .icon_menu .icon_menu_item a:hover {
                color: black;
                text-decoration: none;
            }

        .icon_menu .icon_menu_item p {
            padding-top: 8px;
        }

.news {
    background-color: #e9ffec;
    padding: 10px 0 30px;
}

    .news .news_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .news .news_contact {
        word-break: break-word;
    }

    .news .news_title .news_title_btn button {
        font-weight: bolder;
        padding-right: 45px;
        font-size: 1.125em;
    }

    .news .news_title .news_title_btn .jobseeker {
        background: url(../../../Image/common/JobSeeker/bt_job_seeker_off.svg) no-repeat center;
    }

        .news .news_title .news_title_btn .jobseeker:hover, .news .news_title .news_title_btn .jobseeker.active {
            background: url(../../../Image/common/JobSeeker/bt_job_seeker_on.svg) no-repeat center;
        }

    .news .news_title .news_title_btn .employer {
        width: 131px;
        background: url(../../../Image/common/JobSeeker/bt_job_seeker_off.svg) no-repeat center;
    }

        .news .news_title .news_title_btn .employer:hover, .news_title .news_title_btn .employer.active {
            background: url(../../../Image/common/JobSeeker/bt_job_seeker_on.svg) no-repeat center;
        }

    .news .slick-track {
        display: flex !important;
    }

    .news .slick-slide {
        height: inherit !important;
    }

        .news .slick-slide > div {
            height: 100%;
        }

.news_box .news_item {
    background-color: #fff;
    padding: 15px 10px;
    height: inherit !important;
}

.news .news_item a#news_hyper {
    color: black;
}

    .news .news_item a#news_hyper:hover {
        color: black;
        text-decoration: none;
    }

.news .news_item > span {
    display: block;
    padding-top: 10px;
}

.news_item .title {
    font-weight: bolder;
    /*font-size: 1.125em;*/
}

.news .news_item .content {
    margin-top: 10px;
}

.news .news_item .title_label {
    padding: 0 .5rem;
    /*text-align: center;*/
    display: inline-block;
    color: #fff;
    margin-right: .5rem;
}

.news .news_item .green {
    background-color: #127e6b;
}

.news .news_item .blue {
    background-color: #2a6092;
}

.news .news_item .orange {
    background-color: #c12d0e;
}

#emp_whatsnews {
    display: none;
}

h2.index_title {
    font-size: 1.5em;
    font-weight: bolder;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 1;
}


#typeSearchTab #OutsideHKItem {
    margin-top: 1.5rem;
}

#myTab, #myTabContent {
    max-width: 830px;
    margin: 0 auto;
}

    #myTabContent #adv_langDiv label.form-control {
        height: auto;
    }

/*    #myTabContent #adv_langDiv .input-group-prepend .input-group-text {
        white-space: break-spaces;
        text-align: left;
        width: 100%;
    }*/

.tab_title .tab_title_box {
    position: relative;
}

    .tab_title .tab_title_box .tab_title_icon {
        position: absolute;
        bottom: 0;
        right: 10px;
    }

#jobSearchDiv {
    background-color: #e9e4f5;
}

#myTab {
    display: flex;
    border-bottom: none;
}

    #myTab li {
        flex: 1;
        background-color: #e3f4f0;
        text-align: center;
        margin-right: 5px;
        margin-bottom: 0;
    }

        #myTab li:last-child {
            margin-right: 0;
        }

    #myTab .nav-item .nav-link {
        position: relative;
        padding-top: 45px;
        border: none;
        color: #005FFF;
    }

    #myTab .nav-item.show .nav-link, #myTab .nav-link.active {
        /*background-color: #007FAC;*/
        border: none;
        color: #000000;
    }

    #myTab .nav-item .nav-link h6 {
        font-size: 1.125em;
    }

    #myTab .nav-item img {
        margin-bottom: 10px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-40%);
    }

.seeAllBtn {
    color: #0056B3;
}

.tab_content_bg,
#myTab .nav-item.show .nav-link, #myTab .nav-link.active {
    /*background-image: linear-gradient(to bottom,#007FAC,#00A68D);*/
    background-color: #c4c4ff;
}

#myTabContent .input-group-text {
    /*padding: 0;
    padding-left: .5rem;*/
    color: #495057;
    background-color: #fff;
    border: none;
    border-right: none;
}

#advancedSearchTab .input-group-text {
    /*padding: .375rem .75rem;*/
    height: 100%;
}

#myTabContent .form-control {
    color: #495057;
    background-color: #fff;
    border: none;
    /*   border-left: none;*/
    /*    padding: 0 0 0 3px;*/
}

.jobseeker_category_txt {
    background-color: #ffd05b;
    color: #0056b3;
    padding: 8px 20px;
    margin-bottom: 20px;
}

    .jobseeker_category_txt:hover {
        text-decoration: none;
    }

.salary, .wkHrs, .expYrs, .postedDt, .jobNature {
    /*padding-right: 8px !important;*/
}

.home_search_btn {
    display: flex;
    justify-content: center;
}

    .home_search_btn input {
        background-color: #c12d0e;
        color: #fff;
    }

        .home_search_btn input:hover {
            color: #fff;
        }

.white {
    color: #fff;
}

a.text-black:hover,
a.white:hover {
    color: #001647;
}

.bg_yellow {
    background-color: #ffff00;
    color: #707070;
    padding: 3px 5px;
}

#JobSearchTable h3,
#bannerDiv h3 {
    font-size: 1.25em;
    padding-bottom: .75rem;
}

#mainBanner .carousel-item h3 {
    font-weight: bold;
}

.item_title_box {
    padding-left: 0;
}

    .item_title_box li {
        padding: 10px;
        font-size: 1.25rem;
        font-weight: bolder;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

        .item_title_box li:not(.active):after {
            position: absolute;
            right: 5%;
            content: '';
            border-top: 5px transparent dashed;
            border-bottom: 5px transparent dashed;
            border-left: 5px #000000 solid;
        }

        .item_title_box li.active {
            color: #000000;
            background-color: #ffffff;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

.item_content_box .item h3 {
    font-size: 1.25em;
    padding: 10px 1rem;
    background-color: #ffd97c;
    display: flex;
    align-items: center;
}

    .item_content_box .item h3:after {
        content: '';
        position: absolute;
        width: 20px;
        height: 13px;
        right: 1rem;
        background: url(../images/arrow_down.png) no-repeat center;
    }

.item_content_box .item.active h3:after {
    background: url(../images/arrow_up.png) no-repeat center;
}

.item_content {
    width: 100%;
    color: #005FFF;
}

ul.item_box {
    list-style: none;
    padding-left: 2rem !important;
    padding-top: 1rem;
}

    ul.item_box:last-child {
        padding-right: 1rem;
    }


    ul.item_box li:before {
        content: "\2022";
        color: #00929d;
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 1em; /* Also needed for space (tweak if needed) */
        margin-left: -1em;
    }

    ul.item_box > li {
        margin-bottom: .25rem;
    }

.item_content {
    display: none;
    background-color: #fff;
    position: relative;
}

.item_content_box .item.active .item_content {
    display: flex;
}

.slick, .other_slick, .related_slick {
    padding: 0 2rem;
}

.slick-slide {
    margin: 0 8px;
}

.slick-arrow {
    position: absolute;
    top: 35%;
    display: block;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    background: transparent;
    width: 30px;
    height: 78px;
    background-size: 30px 78px;
}

    .slick-arrow.slick-prev:not(.slick-disabled) {
        left: 0;
        background-image: url(../../../Image/common/JobSeeker/icon-slide-left.png)
    }

        .slick-arrow.slick-prev:not(.slick-disabled):hover {
            background-image: url(../../../Image/common/JobSeeker/icon-slide-left-hover.png)
        }

    .slick-arrow.slick-next:not(.slick-disabled) {
        right: 0;
        background-image: url(../../../Image/common/JobSeeker/icon-slide-right.png)
    }

        .slick-arrow.slick-next:not(.slick-disabled):hover {
            background-image: url(../../../Image/common/JobSeeker/icon-slide-right-hover.png)
        }

    .slick-arrow.slick-disabled {
        outline: none !important;
    }

.slick-dots {
    display: block;
    width: 100%;
    list-style: none;
    text-align: center;
    margin-top: 20px;
}

ul.slick-dots {
    padding-inline-start: 0;
}

.slick-dots li {
    display: inline-flex;
    margin: 0 .375rem;
}

.slick-dots button {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    padding: 0;
    color: transparent;
    vertical-align: top;
    border: 0;
    border-radius: 50%;
    background-color: #c9c9c9;
}

.slick-dots > li.slick-active button {
    background-color: #929292;
}

.daily_bg {
    position: relative;
}

.jobfair .card-border {
    overflow: hidden;
    height: 100%;
}

.jobfair .card {
    background-color: #fff;
    height: 100%;
    border-top: 5px solid #0070ba;
}

    .jobfair .card .card-header {
        background-color: #fff;
        border: 0;
        padding: .75rem .75rem;
    }

    .jobfair .card .card-body {
        padding: .75rem .75rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .jobfair .card .jobfair-banner {
        width: 100%;
    }

    .jobfair .card .jobfair-desc {
        color: #202020;
    }

    .jobfair .card .jobfair-list {
    }

    .jobfair .card .btn.jobfair-list {
        padding-right: 38px;
        background: #717783 url(../../../Image/common/JobSeeker/icon-search-button.png) no-repeat right 10px center;
        background-size: 16px 8px;
        color: #fff;
        width: 80%;
        margin-left: auto;
    }

    .jobfair .card:hover {
        transform: scale(1.05);
        text-decoration: none;
    }

        .jobfair .card:hover .card-header {
            font-weight: 700;
            color: #fff;
            background-color: #0070ba;
        }

        .jobfair .card:hover .btn.jobfair-list {
            background-color: #CE4C00;
        }

.jobfair .slick-track {
    display: flex !important;
}

.jobfair .slick-slide {
    height: inherit !important;
}

    .jobfair .slick-slide > div {
        height: 100%;
        transition: transform 0.25s ease 0s;
    }


#jobFairDiv .slick-list .slick-slide.slick-active .new:hover span.btn.jobfair-list {
    margin-bottom: 0.6rem;
}

#jobFairDiv span.jf-cancel {
    color: red;
}

#jobFairDiv #no-job-fair-msg {
    text-align: center;
    padding-bottom: 5rem;
    font-size: 1.2rem;
    margin-bottom: 0;
}

.daliy_more {
    border: 1px solid #e3e3e3;
    padding: 0.5rem 3rem 0.5rem 1.5rem;
    background: url('../../../Image/common/JobSeeker/daliy_arrow.png') no-repeat right 20px center #f0f0f0;
    background-size: 13px 13px;
    text-decoration: none;
}

.Special_webpage_bg {
    position: relative;
    background: url('../../../Image/common/JobSeeker/bg-news-event.png') 100% 0;
    padding-bottom: 1px;
}


.Special_webpage_content_box .item {
    background-color: #fff;
    margin-bottom: 15px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    height: inherit;
}

    .Special_webpage_content_box .item a {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

        .Special_webpage_content_box .item a:hover {
            transform: scale(1.05);
            text-decoration: none;
            color: #202020;
        }

    .Special_webpage_content_box .item img {
        width: 100%;
        padding: 8px 12px;
    }

    .Special_webpage_content_box .item h6 {
        font-weight: bold;
        min-height: 60px;
        padding: 8px 12px;
        text-align: center;
        color: #0070BA;
    }

.Special_webpage_content_box .slick-track {
    display: flex !important;
}

.Special_webpage_content_box .slick-slide {
    height: inherit !important;
}

    .Special_webpage_content_box .slick-slide > div {
        height: 98%;
        transition: transform 0.25s ease 0s;
    }

.other_special_webpage_content_box img, .related_special_webpage_content_box img {
    width: 100%;
}

.job_vacancies {
    position: relative;
}

    .job_vacancies .job_vacancies_icon {
        display: flex;
        position: absolute;
        bottom: 0;
    }

        .job_vacancies .job_vacancies_icon.job_vacancies_icon_prev {
            left: 15px;
            max-width: 15%;
        }

        .job_vacancies .job_vacancies_icon.job_vacancies_icon_next {
            right: 15px;
            max-width: 15%;
        }

.job_vacancies_content {
    display: flex;
    justify-content: center;
}

    .job_vacancies_content a > span {
        word-break: keep-all;
    }

.job_vacancies .item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
}

.job_vacancies .dropdown > a.item {
    margin-left: -15px;
    margin-right: -15px;
}

.job_vacancies .item:hover img {
    transition: 0.3s;
    transform: translateY(-4px)
}

.job_vacancies .item span {
    padding: 10px;
    text-align: center;
    min-height: 60px;
    color: #0070BA;
}

@media screen and (max-width: 767px) {

    #mainBanner .carousel-caption {
        font-size: 1.25em;
        right: 5%;
        text-align: right;
    }

    .news .news_title {
        flex-direction: column;
    }

        .news .news_title .news_title_btn {
            margin-bottom: 20px;
        }

    #myTabContent .tab-pane > div {
        padding-right: 1rem;
        padding-left: 1rem;
    }





    .item_content_box .item {
        margin-bottom: 1rem;
    }

    ul.item_box {
        border-top: 1px solid rgba(0,0,0,0.1);
    }

        ul.item_box:nth-child(2n) {
            padding-right: .25rem;
        }

    h2.index_title {
        text-align: center;
        color: #000000;
    }

    .jobfair .item .new .newsTop {
        border-top: 5px solid #ffd05b;
    }

        .jobfair .item .new .newsTop h5 {
            color: #000;
        }

    .other_slick {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .related_slick {
        padding: 0;
    }

        .other_slick .slick-arrow, .related_slick .slick-arrow {
            display: none !important;
        }

    .other_slick img {
        padding: .5rem !important;
    }

    .other_slick .slick-slide, .related_slick .slick-slide {
        margin: 0;
    }

    .job_vacancies_content {
        justify-content: flex-start;
    }
}

@media screen and (min-width: 768px) {
    .custom-pr-3 {
        padding-right: 1rem !important;
    }

    #mainBanner .carousel-caption {
        right: 15%;
        top: 40%;
    }

    .jobseeker_category_txt {
        position: absolute;
        bottom: 20px;
        right: 35px;
    }

    .tab_content {
        background: url('../../../Image/common/JobSeeker/search_bg.png');
    }
}

@media screen and (min-width: 1550px) {
    .daily_bg .daily_icon {
        display: flex;
        position: absolute;
        top: 60px;
    }

        .daily_bg .daily_icon.daily_icon_prev {
            left: 15px;
        }

        .daily_bg .daily_icon.daily_icon_next {
            right: 15px;
        }
}

@media screen and (min-width: 768px) and (max-width: 1549px) {
    .daily_bg .daily_icon {
        position: absolute;
        bottom: 0;
        height: 150px;
    }

        .daily_bg .daily_icon.daily_icon_prev {
            left: 0;
        }

        .daily_bg .daily_icon.daily_icon_next {
            right: 0;
        }
}

@media screen and (max-width: 767px) {
    .daily_bg .daily_icon {
        display: block;
        position: absolute;
        top: 5px;
        width: 12%;
        height: 12%;
    }

        .daily_bg .daily_icon.daily_icon_prev {
            left: 50px;
        }

        .daily_bg .daily_icon.daily_icon_next {
            right: 50px;
        }
}

#jobFairDiv {
    /*background: linear-gradient(180deg, #ff8e50 50%, #ffffff 50%);*/
    background-color: #ff8e50;
}

#jobVancDiv .job-vacancy-dropdown-menu {
    display: flex;
    justify-content: space-around;
}

    #jobVancDiv .job-vacancy-dropdown-menu > a {
        padding: .5rem 1rem;
        border-radius: .5rem;
        background-color: #c12d0e;
        color: #fff;
    }

/*#JobSearchTable input,
#JobSearchTable select {
   height: 100%;
}*/


#JobSearchTable .col-form-label {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: #495057;
}

#JobSearchTable .col-form-label {
    white-space: nowrap;
}

#JobSearchTable .range .input-group:nth-child(1) .form-control {
    border-bottom-right-radius: 0 !important;
}

@media (max-width: 575.98px) {
    #JobSearchTable .form-group > label.col-12.col-form-label {
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: .25rem;
    }

        #JobSearchTable .form-group > label.col-12.col-form-label ~ div > .form-control {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

    #JobSearchTable .range .input-group:nth-child(2) .form-control {
        border-top-right-radius: 0;
    }

    #JobSearchTable .range .input-group-prepend:lang(en) {
        flex-basis: 64px;
    }

    #JobSearchTable .range .input-group-prepend > .input-group-text {
        width: 100%;
    }
}

@media (min-width: 576px) {
    #JobSearchTable .range .input-group:nth-child(1) .form-control {
        border-top-right-radius: 0 !important;
    }
}

/*#JobSearchTable .input-group-append {
    margin-left: 0px;
}

#JobSearchTable .input-group-prepend {
    margin-right: 0px;
}*/

/*#quickSearchFlex {
    display: flex;
    flex-direction: row;
}*/

.quickRightFlex,
.quickLeftFlex {
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.quickLeftFlex {
    flex-basis: 45%;
    max-width: 45%;
}

.quickRightFlex {
    flex-basis: 55%;
    max-width: 55%;
    flex-direction: column-reverse;
}
/*
#quickSearchFlex .quickLeftFlex .quickSearchItem {
    flex: 1;
}

#quickSearchFlex .quickRightFlex .quickSearchItem {
    flex: 2;
}*/

@media(max-width:1280px) {
    #nav-button-bar {
        display: none;
    }

    #mainBanner #carousel-control-prev-div .carousel-control-prev-icon,
    #mainBanner #carousel-control-next-div .carousel-control-next-icon {
        width: 10px;
    }

    /*    #quickSearchFlex {
        flex-direction: column;
    }*/

    .quickRightFlex {
        flex-direction: column;
    }

    .quickRightFlex,
    .quickLeftFlex {
        padding: 5px;
    }

    #JobSearchTable #adv_langDiv .input-group-prepend.w-pre-50 {
        width: 50%;
        max-width: 50%;
    }
}

#myTabContent .input-group-text.search_title {
    white-space: break-spaces;
    text-align: left;
}

@media(max-width:575px) {
    .salary, .wkHrs, .expYrs, .postedDt {
        padding-right: 0px !important;
    }
}

#allJobList {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #FFF38F;
    color: #0056B3;
    padding: 5px;
}

@media(min-width:768px) {
    #nav-button-bar {
        /*background-color: blue;*/
        top: 30%;
        right: 1rem;
        position: fixed;
        padding: .25rem;
        display: flex;
        flex-direction: column;
        margin-left: 1rem;
        z-index: 99999;
    }

        #nav-button-bar .nav-button-spot {
            background-color: rgba(0, 0, 0, 0.5);
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            margin-top: .5rem;
            margin-bottom: .5rem;
        }

            #nav-button-bar .nav-button-spot.active {
                background-color: rgba(0, 0, 0, 0.9);
            }
}

@media (min-width:576px) {
    #othLangLvl.input-group-prepend {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

@media (min-width:1230px) {
    #jobVancDiv .job_vacancies_content .item.mw-lg-13 {
        max-width: 13%;
    }
}


.multipleSelectBox {
    position: relative;
    width: 100%;
}

    .multipleSelectBox select {
        width: 100%;
    }

.multiSelectionDiv {
    height: 100%;
    width: 100%;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#multPostTitleDiv,
#multWkLocDiv {
    width: 100%;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-left: .5rem;
}

    #multPostTitleDiv .dropdown-item label,
    #multWkLocDiv .dropdown-item label {
        width: 100%;
    }