.career-page {position: relative;}
.career-page ul.-list-group li {width: 33.33%;}
.career-page .select-search { width: 310px; margin: 0;}
/*.career-page .select-search .select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: #f6f6f6; font-size: 24px;  color: #333333;padding-left: 20px; line-height: 48px;
}*/
.career-page .select-search .title { position: absolute; z-index: 1;  left: 20px; top: 13px; font-size: var(--typo-md); font-weight: var(--fw-bold); 
    color: var(--color-primary); line-height: 24px;padding-right: 15px;border-right: 1px solid #c5c5c5;
}

/*.career-page .select-search .select2-container--default .select2-selection--single .select2-selection__rendered:before {
    content: 'จัดเรียง';
    font-size: 16px;
    color: #5E7AA2;
    display: inline-block;
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid #c5c5c5;
    line-height: 24px;
}*/

.career-page.default-page .content-box .top-title-box{margin-bottom: 20px;}

.career-page .list-job {border-top: 1px solid #f5f5f5;}
.career-page .list-job .top { display: table; font-size: var(--typo-sm); color:var(--color-secondary);font-weight: var(--fw-medium);padding: 20px 30px;}
.career-page .list-job .top>div {display: table-cell;vertical-align: middle;}
.career-page .list-job ul {padding: 0; margin: 0;list-style: none;}
.career-page .list-job ul>li { position: relative;}
.career-page .list-job ul>li>a.link {display: table; padding: 30px 30px; border-bottom: 1px solid #f5f5f5; position: relative;}
.career-page .list-job ul>li>a.link:before{content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; background-color: var(--color-primary);
    transition: all 200ms ease; border-radius: 0px; box-shadow: 0 16px 30px rgba(146, 146, 146, 0.16);
}
.career-page .list-job ul>li>a.link>div {display: table-cell; vertical-align: top;}
.career-page .list-job .col-1 {width: 1%;}
.career-page .list-job .col-1 .inner {width: 100px;}
.career-page .list-job .col-1 .inner .date {font-size: var(--typo-default); color: var(--color-default); font-weight: var(--fw-bold);}
.career-page .list-job .col-2 {width: auto;}
.career-page .list-job .col-2 .inner { padding: 0 30px;}
.career-page .list-job .col-2 .inner .title {font-size: var(--typo-default); color: var(--color-default); font-weight: var(--fw-bold); margin-bottom: 10px;}
.career-page .list-job .col-2 .inner .desc {font-size: var(--typo-sm);color: var(--color-gray); font-weight: var(--fw-normal);}
.career-page .list-job .col-3 {width: 1%;}
.career-page .list-job .col-3 .inner{padding-top: 0px;}
.career-page .list-job .col-3 .btn {width: 180px;background-color: var(--color-primary); color: var(--color-white); 
    line-height: 60px; height: 60px; border-radius: 0;
}
.career-page .list-job ul>li>a.link:hover:before{opacity: 1;}
.career-page .list-job ul>li>a.link:hover .date,
.career-page .list-job ul>li>a.link:hover .title,
.career-page .list-job ul>li>a.link:hover .desc {color: var(--color-white);}
.career-page .list-job ul>li>a.link:hover .btn {background-color: var(--color-white);color: #4BB1B0;}
.career-page .list-job .txt-xs{display: none; font-size: var(--typo-sm); color:var(--color-secondary);font-weight: var(--fw-medium);}

@media (max-width: 1440px) {

}

@media (max-width: 991px) {

    .career-page .select-search .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 42px;}

    .career-page ul.-list-group li {width: 50%;}

    .career-page .list-job .top{padding: 20px;}
    .career-page .list-job .col-2 .inner{padding: 0;}
    .career-page .list-job .col-3 .btn {width: 150px;}
    .career-page .list-job ul>li>a.link{padding: 20px;}

}

@media (max-width: 767px) {
    .career-page .list-job .top{display: none;}
    .career-page .list-job .txt-xs{display: block;}
    .career-page .list-job ul>li:nth-child(odd){background-color: var(--color-white);}
    .career-page .list-job ul>li:nth-child(even){background-color: #f7f7f7;}
    .career-page .list-job ul>li>a.link{padding: 15px 0; display: block;}
    .career-page .list-job ul>li>a.link>div{display: block; max-width: 100%; width: auto;}
    .career-page .list-job .col-1{padding-bottom: 15px;}
    .career-page .list-job .col-2 .inner .title{margin-bottom: 5px;}
    .career-page .list-job .col-3 .inner{padding-top: 15px;}
    .career-page .list-job .col-3 .btn{height: 48px; line-height: 48px;}
}

@media (max-width: 575px) {

    .career-page ul.-list-group li {width: 100%;}

    .career-page .select-search{width: 100%;}

}