body{ background: #fbfbfb}

.g-joinsearch-box{ margin-top:20px; background: #fff; padding: 0 40px 25px; width: 1120px}
.g-joinsearch-box .m-joinsearch-top{ width: 100%; height: auto; margin: 26px 0 0; display: block; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-top dt{ width: auto; height: 45px; line-height: 45px; font-size: 20px; font-weight: bold; color: #222; float: left; display: inline; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-top dd{ width: auto; height: auto; float:right; display: inline; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-top dd .u-search-input{ width: 379px; height: 43px; line-height: 43px; font-size: 14px; font-weight: normal; color: #333; padding: 0 15px; float: left; display: inline; overflow: hidden; border-radius: 5px 0 0 5px; border: 1px solid #f4f6f9}
.g-joinsearch-box .m-joinsearch-top dd .u-search-btn{ width: 100px; height: 45px; line-height: 45px; font-size: 16px; font-weight: normal; color: #fff; text-align: center; background: #0c74de; border-radius: 0 5px 5px 0; float: left; display: inline; overflow: hidden; border:0; padding: 0;}
.g-joinsearch-box .m-joinsearch-middle{ width: 100%; height: auto; font-size: 14px; font-weight: normal; margin: 8px 0 0; display: block; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-middle dt{ width: 72px; float: left; line-height: 30px; color: #222; font-weight: bold; display: inline; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-middle dt i{ font-style: normal}
.g-joinsearch-box .m-joinsearch-middle dd{ width: 1048px; float: left; line-height: 30px; display: inline; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-middle dd .u-label{ width: auto;  color: #666; float: left; margin: 0 10px 0 10px; display: inline; overflow: hidden;}
.g-joinsearch-box .m-joinsearch-middle dd .f-hover{ color: #0559af}

.g-main-box{ background: #fff; margin-top: 20px; padding: 30px 40px; width: 1120px;}
.g-main-box .m-main-tab{ width: 100%; height: 45px; line-height: 45px; font-size: 14px; font-weight: bold; color: #666; text-align: center; background: #f9f9f9; display: block; overflow: hidden;}
.g-main-box .m-main-tab li{ width: 25%; float: left; display: inline; overflow: hidden;}
.g-main-box .m-main-list{ width: 100%; height: 45px; line-height: 45px; font-size: 14px; font-weight: normal; color: #666; text-align: center; border-bottom: 1px dashed #eee; display: block; overflow: hidden;}
.g-main-box .m-main-list li{ width: 25%; float: left; display: inline; overflow: hidden; font-weight: normal}
.g-main-box .m-main-list li a{ color: #0559af}
.g-m-job-screen{ display: none;}

@media only screen and (max-width: 640px) {
    .g-joinsearch-box{ margin: 0; width: 100%; padding: 14px 14px 0; box-sizing: border-box;}
    .g-joinsearch-box .m-joinsearch-top{ margin: 0;}
    .g-joinsearch-box .m-joinsearch-top dt{ display: none}
    .g-joinsearch-box .m-joinsearch-top dd{ width: 100%;}
    .g-joinsearch-box .m-joinsearch-top dd form{ display: -webkit-box}
    .g-joinsearch-box .m-joinsearch-top dd .u-search-input{ width: auto; height: 40px; line-height: 40px; background: #f9f9f9; border-right: 0; float: none; display: block; -webkit-box-flex: 1; box-sizing: border-box;}
    .g-joinsearch-box .m-joinsearch-top dd .u-search-btn{ width: 75px; height: 40px; line-height: 40px; font-size: 1px; float: none; display: block;}
    .g-joinsearch-box .m-joinsearch-middle{ width: 50%; float: left; margin: 0;}
    .g-joinsearch-box .m-joinsearch-middle dd,.g-joinsearch-box .m-joinsearch-middle dt i{ display: none;}
    .g-joinsearch-box .m-joinsearch-middle dt{ width: 100%; height: 42px; line-height: 42px; text-align: center; font-size: 13px; font-weight: normal; color: #666; position: relative;}
    .g-joinsearch-box .m-joinsearch-middle dt::after{ content: ""; width: 7px; height: 7px; border-right: 1px solid #666; border-bottom: 1px solid #666; transform:rotate(45deg); display: block; overflow: hidden; position: absolute; left: 50%; top: 0; margin: 15px 0 0 36px;}

    .g-main-box{ width: 100%; margin: 0; padding:0 14px 14px; box-sizing: border-box;}
    .g-main-box .m-main-tab{ height:33px; line-height: 33px; font-size: 13px; font-weight: normal}
    .g-main-box .m-main-list{ height: auto; line-height: 22px; padding: 8px 0; box-sizing: border-box;display:flex; justify-content: center; align-items: center;}
    .g-main-box .m-main-list li{ height: auto; padding: 0 5px; box-sizing: border-box}

    .g-m-job-screen{ width: 100%; height: 100%; display: none; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999;}
    .g-m-job-screen .m-m-job-main{ width: 100%; height: auto; background: #fff; display: block; overflow: hidden; position: relative; z-index: 10;}
    .g-m-job-screen .m-m-job-main .m-m-job-btn{ width: 100%; height: 42px; line-height: 42px; font-size: 14px; font-weight: normal; color: #666; text-align: center; display: flex; overflow: hidden; border-bottom: 1px solid #f6f5f5;}
    .g-m-job-screen .m-m-job-main .m-m-job-btn li{ width: auto; height: auto; display: block; overflow: hidden; flex: 1; position: relative;}
    .g-m-job-screen .m-m-job-main .m-m-job-btn li::after{  content: ""; width: 7px; height: 7px; border-right: 1px solid #666; border-bottom: 1px solid #666; transform:rotate(45deg); display: block; overflow: hidden; position: absolute; left: 50%; top: 0; margin: 14px 0 0 36px;}
    .g-m-job-screen .m-m-job-type{ width: 100%; height: auto; padding: 0 20px; box-sizing: border-box; display: none; overflow: hidden;}
    .g-m-job-screen .m-m-job-type .u-label{ width: 100%; height: 40px; line-height: 40px; font-size: 14px; font-weight: normal; color: #999; display: block; overflow: hidden;}

    .g-m-job-screen .u-bg{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: block; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 0}
    .g-m-job-screen .m-m-job-main .m-m-job-btn li.f-hover{ color: #0559af}
    .g-m-job-screen .m-m-job-main .m-m-job-btn li.f-hover::after{transform:rotate(-135deg); margin: 19px 0 0 36px; border-color: #0559af}
    .g-m-job-screen .m-m-job-type .u-label.f-hover{ color:#222; font-weight: bold}
    .g-m-job-screen .m-m-job-type.f-hover{ display: block;}
}



@media(hover: hover) and (pointer: fine) {
    .g-joinsearch-box .m-joinsearch-middle dd .u-label:hover{ color: #0559af}

}