.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #2694e8;
    background: #3baae3;
    font-weight: bold;
    color: #ffffff;
}

.ui-menu {
    width: 400px;
    max-height: 250px;
    height: auto;
    overflow-y: auto;
}

.list-inline-item a,
.list-inline-item a:hover {
    color: #fff;
}

.list-inline-item.red a,
.list-inline-item.red a:hover {
    color: #E9262A;
    text-decoration: underline;
}

.navbar-collapse ul li:last-child a:hover {
    color: #fff;
}


/*toggle button*/

.switch {
    position: relative;
    display: inline-block;
    height: 50px;
    margin-top: 8px;
    width: 180px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6F7071;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 15px;
    font-size: 18px;
    color: #fff;
}

.slider:before {
    position: absolute;
    content: "";
    height: 50px;
    width: 50px;
    left: 0px;
    bottom: 0px;
    background-color: white;
    background-image: url("../../images/new_design/login_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: .4s;
    transition: .4s;
    border: 2px solid #CACED1;
}

.nopad-left {
    padding-left: 0px;
}

.nopad-right {
    padding-right: 0px;
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.slider-logout {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 10;
    bottom: 0;
    background-color: #E9262A;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 15px;
    font-size: 18px;
    color: #fff;
    width: 100%;
}

.slider-logout:hover,
.slider:hover {
    background-color: #e6e6e6;
    color: #000;
}

.slider-logout:before {
    position: absolute;
    content: "";
    height: 50px;
    width: 50px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    background-image: url("../../images/new_design/login_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: .4s;
    transition: .4s;
    border: 2px solid #CACED1;
}


/* Rounded sliders */

.slider-logout.round {
    border-radius: 34px;
}

.slider-logout.round:before {
    border-radius: 50%;
}

.switch-logout {
    position: relative;
    display: inline-block;
    height: 50px;
    margin-top: 8px;
    width: 180px;
}

.login-text {
    width: 75%;
    text-align: center;
    float: right;
}

.logout-text {
    text-align: center;
    width: 80%;
}


/*toggle button*/

#job_cate_text {
    background-color: #fff;
    cursor: pointer;
}

#mjob_cate_text {
    background-color: #fff;
    cursor: pointer;
}

.text-black,
.text-black:hover,
.text-black:active,
.text-black:visited {
    color: #000000;
}

.text-red {
    color: #ff0000;
}

.text-white {
    color: #ffffff;
}

.text-gred {
    color: #f5f5f5;
}

#map {
    height: 400px;
    width: 100%;
}

.fix-tab {
    width: 168px;
    height: 65px;
}

.navi {
    color: #87837C;
    font-size: 13px;
}

.navi.space {
    width: 10px;
}

.navi>li.active {
    color: #E9262A;
}

.navi>li {
    padding-right: 0px;
}

label.title-red {
    color: #BA3658;
    font-size: 15px;
}

.company-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.link-for-jobseeker,
.link-for-jobseeker:hover,
.link-for-jobseeker:visited,
.link-for-jobseeker:active {
    color: #466B1F;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

label.remember {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    vertical-align: middle;
}

.contact-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.form-control {
    border: 1px solid #BFBFBF;
    height: 40px;
    border-radius: 8px;
}

.t-10 {
    margin-top: 10px;
}

.t-20 {
    margin-top: 20px;
}

.t-30 {
    margin-top: 30px;
}

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

.footer {
    border-top: 1px solid #E4E6E8;
    background-color: #FBFBFD !important;
}

.jumbotron {
    background-color: #FBFBFD !important;
}

.company-quote {
    font-size: 17px;
    margin-top: 20px;
    color: #707070;
    max-width: 280px;
    word-wrap: break-word;
}

.footer-social li {
    display: inline-block;
    padding: 0px 8px !important;
}

.footer-link,
.footer-link:hover,
.footer-link:active,
.footer-link:visited {
    color: #707070;
}

.copyright {
    color: #707070;
    font-size: 12px;
    text-align: center;
}


/**company overview**/

.overview-title {
    background-color: #e12a2e;
    border: 0px solid;
    border-radius: 20px;
    padding-left: 70px;
    padding-right: 70px;
    color: #ffffff !important;
    font-weight: bold;
}

.company-map {
    border: 5px solid #CACED1;
}

.overview-detail {
    color: #878889;
    font-size: 14px;
}

.overview-cover {
    width: 100%;
}

.morejob-title {
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
}

.morejob-company {
    margin-top: 7px;
    font-size: 14px;
    color: #878889;
    padding-left: 10px;
}

.morejob-title2 {
    font-size: 16px;
    font-weight: bold;
}

.morejob-company2 {
    margin-top: 7px;
    font-size: 14px;
    color: #878889;
}

.morejob-background {
    background-color: #f5f5f5;
}

.morejob-place {
    font-size: 12px;
    color: #878889;
}

.morejob-button-view {
    background-color: #F5F5F5;
    border-radius: 20px;
    border: 1px solid #e9262a;
    padding-left: 20px;
    padding-right: 20px;
    color: #e03835;
}

.morejob-button-more {
    background-color: #F5F5F5;
    border-radius: 20px;
    border: 1px solid #000;
    padding-left: 30px;
    padding-right: 30px;
    color: #707070;
    font-weight: bold;
    margin: 0 auto;
}

.morejob-block {
    text-align: center;
}

.company-image-sp {
    display: none;
}

.company-image {
    display: block;
}

.bx-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.bx-wrapper img {
    margin: 0 auto;
}

.new-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 7px dashed;
    border-top: 7px solid \9;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.owl-carousel .owl-item img {
    width: auto !important;
    margin: 0 auto;
    max-width: 100%;
}

.btn-default.btn-forcompany {
    color: #d60b1f;
    border-color: #ccc;
    font-weight: bold;
}

.btn-forcompany:hover {
    color: #000;
}

.navbar-default .navbar-nav.navbar-right h3.btn-company {
    margin-top: 10px;
}

.navbar-collapse .navbar-right ul li:first-child a:hover,
.navbar-default .navbar-nav.navbar-right>li>a:hover {
    background-color: transparent;
    border-top-left-radius: 0;
}

.nav-lang:hover {
    background-color: #E9262A;
    color: #fff;
}

.navbar-right {
    float: right !important;
    margin-right: 0;
}


/*header menu*/

.btn-default.nav-btn-jobseeker {
    background-color: #e9262a;
    color: #ffffff;
}

.btn-default.nav-btn-jobseeker:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.navbar-right {
    float: right;
    margin: 0;
}

.dropdown-menu {
    background-color: #000;
    opacity: 0.7;
    border: none;
}

ul.dropdown-menu {
    padding: 0;
    border-radius: 0;
    width: 250px;
}

.navbar-collapse ul.navbar-nav li a:hover {
    border-radius: 0;
}

.dropdown-menu>li>a {
    font-weight: bold;
    padding: 20px 10px;
    color: #fff;
}

.navbar-collapse ul.navbar-right li a:hover {
    background: none;
    border-radius: 0;
}

#btnFilter {
    display: none;
}

.close-search {
    display: none;
}

.rec-company-title {
    height: 50px;
}


/**article**/

.article-tab {
    border: 1px solid #CED2D5;
    font-size: 16px;
    font-weight: bold;
    color: #8C8D8D;
    padding-left: 0px;
    margin-top: 20px;
}

.article-tab a {
    color: #8C8D8D;
}

.article-tab .tab {
    border-bottom: 5px solid #CED2D5;
    float: left;
    width: 180px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-right: 5px;
    text-align: center;
}

.article-tab .tab-active {
    border-bottom: 5px solid #E9262A;
    float: left;
    width: 180px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-right: 5px;
    text-align: center;
}

.article-tag {
    background-color: #920003;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
}

.article-tag-green {
    background-color: #36927B;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
}

.article-tag-sm {
    background-color: #920003;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.article-tag-sm-green {
    background-color: #36927B;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.article-list {
    display: block;
    border: 1px solid #ddd;
}

.article-list .image img {
    height: 230px;
}

.article-list .desc {
    padding: 20px;
}

.article-caption {
    line-height: 30px;
    height: 180px;
}

.article-caption .title {
    font-size: 20px;
    font-weight: bold;
}

.article-button-more {
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid #000;
    width: 180px;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    color: #707070;
    font-weight: bold;
    font-size: 18px;
    margin: 0 auto;
}

.article-button-more-sm {
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid #000;
    width: 160px;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    color: #707070;
    font-weight: bold;
    font-size: 16px;
    margin: 0 auto;
}

.article-pc {
    display: block;
}

.article-sp {
    display: none;
}

.arl-com-desc {
    padding-top: 20px;
    padding-bottom: 20px;
}

.arl-com-other .image img {
    margin: 0 auto;
}

.other-article-bg {
    background-color: #f5f5f5;
}

.article-job-sp {
    display: none;
}

.article-job-pc {
    display: block;
}

.job-expired {
    font-size: 20px;
    font-weight: bold;
}

.job-expired-back a {
    font-size: 12px;
    color: #fff;
    text-decoration: underline;
}

.job-expired-b {
    font-size: 22px;
    font-weight: bold;
}

.job-expired-back-b a {
    font-size: 14px;
    color: #fff;
    text-decoration: underline;
}


/**job info**/

.lang-skill {
    border-radius: 15px;
    float: left;
    color: #fff;
    background-color: #e12a2e;
    padding-top: 13px;
    padding-bottom: 13px;
    font-weight: bold;
    text-align: center;
    width: 170px;
}

.lang-skill-1 {
    font-weight: bold;
    border: none;
    height: 46px;
    text-align: left;
}

.lang-skill-1 .image {
    float: left;
}

.lang-skill-1 .text {
    float: left;
    padding-left: 10px;
    padding-top: 12px;
}

.lang-skill-2 {
    border-radius: 15px;
    font-weight: bold;
    border: none;
    height: 46px;
    margin-top: 1px;
}

.lang-skill-2 .image {
    float: left;
}

.lang-skill-2 .text {
    float: left;
    padding-left: 10px;
    padding-top: 12px;
}

.quali-table th {
    width: 200px;
    border: 0px;
}

.quali-table td {
    width: 200px;
    border: 0px;
}

.quali-table td div {
    border: 1px solid #000;
    border-radius: 5px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 150px;
    font-size: 16px;
}

.train-image {
    float: left;
    width: 15%;
}

.train-text {
    float: left;
    padding-left: 20px;
    padding-top: 10px;
    width: 85%;
}

.category-pc {
    display: block;
}

.category-sp {
    display: none;
}

.top-banner-sp {
    display: none;
}

.top-banner-pe {
    display: none;
}

.top-banner-ep {
    display: none;
}

.top-banner-se {
    display: none;
}

.top-banner-ipad {
    display: none;
}

.top-banner-pc {
    display: block;
}

.banner-sp {
    display: none;
}

.banner-pc {
    display: block;
}

@media only screen and (max-width: 1199px) {
    .article-caption {
        height: 210px;
    }
}

@media only screen and (max-width: 991px) {
    .morejob-button-more {
        border-radius: 4px;
    }
    .morejob-button-view {
        border-radius: 4px;
    }
    .company-frm-background {
        height: 370px;
        background: none;
    }
    .top-banner-ipad {
        display: block;
    }
    .top-banner-pc {
        display: none;
    }
    .top-banner-pe {
        display: none;
    }
    .footer-about {
        margin-top: 20px;
    }
    /**company overview**/
    .overview-navi {
        display: none;
    }
    .overview-cover {
        width: 100%;
        height: 150px;
    }
    .morejob-title {
        margin-top: 10px;
    }
    .company-image {
        display: none;
    }
    .company-image-sp {
        display: block;
    }
    .bx-wrapper {
        padding-left: 0px !important;
        padding-right: 0px !important;
        background-color: #fff !important;
    }
    .overview-nopad-sp {
        margin-left: -30px;
        margin-right: -30px;
    }
    .overview-nopad-sp2 {
        margin-left: -45px;
        margin-right: -45px;
    }
    .jobdetail-nopad-sp {
        margin-left: -30px;
        margin-right: -30px;
    }
    .contain-nopad {
        padding-left: 0px;
        padding-right: 0px;
    }
    .overview-title-sp {
        padding-left: 15px;
        padding-right: 15px;
    }
    .table-clear-border1 {
        border-right: 0px;
    }
    .table-clear-border2 {
        border-left: 0px;
    }
    .depart-popup {
        top: 0px;
    }
    .home-category {
        display: none;
    }
    .jobsearch-title {
        font-size: 18px;
    }
    .jobsearch-company {
        font-size: 14px;
    }
    .switch-logout,
    .switch {
        width: 85%;
    }
    .navbar-collapse ul li h3 {
        margin-top: 10px;
    }
    .navbar-collapse .navbar-right ul li:first-child a:hover,
    .navbar-default .navbar-nav.navbar-right>li>a:hover {
        background: #79292e;
        border-radius: 0;
    }
    .navbar-default .navbar-nav.navbar-right li.changLang a:hover {
        background: transparent;
        border-radius: 0;
    }
    .navbar-right .btn-default {
        color: #fff;
        background-color: transparent;
        border: none;
        font-weight: inherit;
        padding: 0;
        font-size: 24px;
    }
    .navbar-default .navbar-nav>li>a {
        color: #fff;
        border-bottom: 1px solid #d0d0d0;
        padding: 10px;
        font-weight: bold;
    }
    #btnFilter {
        position: absolute;
        right: 0px;
        top: 50px;
        z-index: 888;
        display: block;
    }
    .box {
        float: right;
        overflow: hidden;
        background: #f5f5f5;
        width: 0px;
    }
    .box-inner {
        width: 300px;
        padding: 10px;
        border-left: 1px solid #B2B2B2;
        border-top: 1px solid #B2B2B2;
        border-bottom: 1px solid #B2B2B2;
        display: none;
    }
    .search-slide {
        position: absolute;
        z-index: 99;
        width: 100%;
        float: right;
    }
    .close-search {
        position: absolute;
        z-index: 100;
        margin-left: -37px;
        display: none;
        width: 30px;
        margin-top: 25px;
    }
    .register-space {
        margin-top: 20px;
    }
    .mt-20 {
        margin-top: 20px;
    }
    .article-sp {
        display: block;
    }
    .article-pc {
        display: none;
    }
    .sp-article-nopad-left {
        padding-left: 0px;
    }
    .sp-article-nopad-right {
        padding-right: 0px;
    }
    .row-article {
        margin-right: -15px;
        margin-left: -15px;
    }
    .article-tab {
        padding-right: 0px;
        border: none;
        border-top: 1px solid #CED2D5;
        border-bottom: 1px solid #CED2D5;
    }
    .article-tab .tab-active {
        border-bottom: 5px solid #E9262A;
        float: left;
        width: calc(34.33333333% - 6px);
        padding-top: 40px;
        padding-bottom: 40px;
        margin-right: 3px;
        margin-left: 3px;
        text-align: center;
    }
    .article-tab .tab {
        border-bottom: 5px solid #CED2D5;
        float: left;
        width: calc(34.33333333% - 6px);
        padding-top: 40px;
        padding-bottom: 40px;
        margin-right: 3px;
        margin-left: 3px;
        text-align: center;
    }
    .article-caption {
        height: 180px;
    }
    .other-article-bg {
        background-color: #fff;
    }
    .arl-com-other-sp-box {
        border: 1px solid #ddd;
    }
    .arl-com-other-sp-caption {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    .tag-ipad {
        float: right;
    }
    .sp-t-10 {
        margin-top: 10px;
    }
    .category-pc {
        display: none;
    }
    .category-sp {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .article-caption {
        height: auto;
    }
    .top-banner-sp {
        display: none;
        max-width: 100%;
    }
    .top-banner-se {
        display: none;
        max-width: 100%;
    }
    .top-banner-pe {
        display: none;
    }
    .top-banner-ipad {
        display: block;
    }
    .top-banner-pc {
        display: none;
    }
    .article-job-sp {
        display: block;
    }
    .article-job-pc {
        display: none;
    }
}

@media only screen and (max-width: 630px) {
    .article-caption {
        height: auto;
    }
    .top-banner-sp {
        display: none;
        max-width: 100%;
    }
    .top-banner-se {
        display: none;
        max-width: 100%;
    }
    .top-banner-pe {
        display: block;
    }
    .top-banner-ipad {
        display: none;
    }
    .top-banner-pc {
        display: none;
    }
    .article-job-sp {
        display: block;
    }
    .article-job-pc {
        display: none;
    }
}

@media only screen and (max-width: 520px) {
    .quali-table th {
        width: 50%;
        border: 0px;
    }
    .quali-table td {
        width: 50%;
        border: 0px;
    }
    .quali-table td div {
        width: 100%;
    }
    .top-banner-sp {
        display: block;
        max-width: 100%;
    }
    .top-banner-pe {
        display: none;
    }
    .top-banner-se {
        display: none;
        max-width: 100%;
    }
    .top-banner-ipad {
        display: none;
        max-width: 100%;
    }
    .top-banner-pc {
        display: none;
    }
	.banner-sp {
        display: block;
    }
    .banner-pc {
        display: none;
    } 
}

@media only screen and (max-width: 370px) {
    .article-caption {
        height: auto;
    }
    .top-banner-sp {
        display: none;
        max-width: 100%;
    }
    .top-banner-pe {
        display: none;
    }
    .top-banner-se {
        display: block;
        max-width: 100%;
    }
    .top-banner-ipad {
        display: none;
        max-width: 100%;
    }
    .top-banner-pc {
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    /* .company-quote{
        width: 242px;
    } */
    .top-banner-sp {
        display: none;
        max-width: 100%;
    }
    .top-banner-pe {
        display: none;
    }
    .top-banner-se {
        display: none;
        max-width: 100%;
    }
    .top-banner-ipad {
        display: none;
    }
    .top-banner-se {
        display: block;
        max-width: 100%;
    }
    .top-banner-pc {
        display: none;
    }
}

@media (min-width: 276px) {
    .footer-social li {
        padding: 0px 4px !important;
    }
    .footer-social img {
        width: 45px;
    }
}

#image {
    width: 1000px;
    height: 100px;
    box-sizing: border-box;
    background-image: url(../../images/new_design/TH_SUGOI.png);
}

#image>a {
    display: block;
    width: 50%;
    height: 100%;
    text-align: center;
    font: bold 12px/100px Sans-Serif;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

#image:hover>a {
    display: inline-block;
}

f