@font-face {
    font-family: "SourceHanSansCN";
    src: url(../fonts/SourceHanSansCN-Regular.ttf) format('truetype');
}

main.container {
    display: flex;
}

.main-content-left {
    width: 920px;
    margin-right: 20px;
}

.main-content-right {
    width: 260px; margin-top: 20px;
}

/* 任务详情左侧 */
.main-content-left .bg-wrapper .cycle,
.main-content-left .bg-wrapper .deadline {
    color: #fff;
    left: 20px;
}

/* 任务详情右侧文字 */
.main-content-left .task-detail {
    font-size: 14px;
    color: #333;
    position: relative;
    margin-top: 20px;
    padding: 70px 20px 36px 20px;
}

.main-content-left .task-detail .bid-status-wrapper{
    position: absolute;
    left: 0;
    top: 20px;
}

.main-content-left .task-detail .bid-status{
    color: #fff;
    width: 92px; height: 30px; line-height: 30px;
    padding: 0 0 0 20px;
    font-size: 16px;
    background: #0092FF;
    background-size: 100% 100%;
    position: relative;
}
.main-content-left .task-detail .bid-status::after{
    content: '';
    position: absolute;
    right: -30px;
    top: 0;
    height: 0;
    width: 0;
    border: 15px solid;
    border-color: transparent transparent transparent #0092FF;
}

.main-content-left .task-detail .develop-time {
    color: #fff;
    font-size: 16px;
    width: 120px;
    height: 40px;
    border-radius: 4px;
    background: #0092FF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 40px;
    top: 54px;
    cursor: pointer;
}

.main-content-left .task-detail .task-detail-text > *:not(:last-child) {
    margin-bottom: 12px;
}

.main-content-left .task-detail .task-detail-text .reward {
    font-weight: 400;
    margin-right: 10px;
    margin-bottom: 30px;
}

.main-content-left .task-detail .task-detail-text .reward .price {
    font-weight: bold;
    font-size: 24px;
    color: #ff0000;
}

.main-content-left .task-detail .task-detail-text h2 {
    font-weight: bold;
    margin-bottom: 36px!important;
    font-size: 24px;
    color: #333333;
}

.main-content-left .task-detail-text .task-type-wrapper {
    color: #000;
}

.main-content-left .task-detail-text .task-type {
    height: 24px; line-height: 24px;
    background: #EEEEEE;
    padding: 0 10px;
    border-radius: 4px;
    margin-left: 22px;
}

.task-detail .task-detail-text .operate {
    display: flex;
    justify-content: space-between;
}

.task-detail .task-detail-text .operate span {
    margin-right: 25px;
    font-size: 16px;
    color: #fff;
    background: #0092FF;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    cursor: pointer;
}

.main-content-left .task-detail .already-pay {
    color: #000;
    font-size: 12px;
    margin-left: 10px;
}

.main-content-left .task-detail .already-pay .num {
    font-size: 14px;
    color: #F66902;
}

.main-content-left .task-detail .task-num {
    color: #F66902;
}

.white-bg {background: #fff;}

/* 项目流程 */
.project-process{background: #FAFAFA;padding: 20px 94px;}
.project-process .title .avatar {
    width: 50px;
    height: 50px;
    margin-right: 18px;
}

.project-process .title {
    text-align: center;
    position: relative;
    padding: 16px 20px;
}

.project-process .title h3 {
    color: #fff;
    font-size: 14px;
    padding: 2px 12px;
    border-radius: 12px;
    position: absolute;
    background: linear-gradient(36deg, rgba(252, 91, 91, 1), rgba(239, 48, 48, 1), rgba(237, 55, 6, 1));
}

.project-process .title div {
    color: #656565;
    position: absolute;
    left: calc(50% + 30px);
    top: 40px;
}

.process-bar {
    color: #656565;
    display: flex;
    justify-content: space-around;
}

.process-bar div.process-bar-item div {
    line-height: 1.8;
}

.process-bar div.process-bar-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.process-bar > div.process-bar-item::after {
    content: '';
    height: 2px;
    width: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    background: #DFDFDF;
    z-index: 1;
}

.process-bar > div.process-bar-item.active{color: #0092FF}
.process-bar > div.process-bar-item.active::after {
    background: #0092FF;
}

.process-bar > div.process-bar-item.active i {
    color: #0092FF;
}

.process-bar > div i,
.process-bar > div img {
    position: relative;
    z-index: 2;
}

.process-bar img {
    width: 20px;
    height: 20px;
}

.process-bar .layui-icon-ok-circle {
    color: #C3C3C3;
    font-size: 22px;
    vertical-align: middle;
    background: #fff;
    border-radius: 100%;
}
/*  进度条 End */

/*  任务描述  */
.blue-title-bar {
    font-weight: bold;
    font-size: 16px;
    color: #282828;
    margin-right: 26px;
}
.project-desc{margin-top: 16px}
.project-desc-top {
    padding: 14px 50px 20px 20px;
}

.project-desc-top .go-login{position: relative}
.project-desc-top .go-login .un-login{width: 690px;height: 150px}
.project-desc-top .go-login a{font-size:14px;color:#fff;width: 132px;height: 40px;line-height:40px;text-align:center;display: block;border-radius: 3px;background: #0092FF;
    position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}

.project-desc-top > div:not(:last-child) {
    padding-bottom: 20px;
}

.project-desc-top img.download-file {
    width: 16px;
    height: 16px;
}

.project-desc-top .content {
    color: #282828;
    padding-top: 16px;
    padding-left: 16px;
    line-height: 1.8;
}

/* 相关任务推荐 */
.task-recommend {border: 1px solid #EEEEEE;margin: 16px 0 20px 0;}
.task-recommend .recommend-title{font-size: 15px;padding: 12px 20px;background: #F6F6F6;}
.task-recommend .task-list{padding: 0 20px;background: #fff}
.task-recommend .task-list .task-item {width: 420px;display: flex;padding: 18px 0;border-bottom: 1px solid #eee}
.task-recommend .task-list .task-item:hover .task-name{ color: #0092FF}
.task-recommend .task-list .task-item .task-price{color: #ff0000;width: 106px;margin-right: 30px}
.task-recommend .task-list .task-item:nth-child(odd){margin-right: 30px;}
/* 相关任务推荐 End */

/* 投标信息  */
/* 投标信息 */
.bid-info {margin: 0px 0 16px 0}
.bid-info > span{margin-right: 48px}
.bid-info > span img{margin-right: 6px}
.bid-info span.deadline{min-width: 216px}
.bid-info span.deadline span.color-blue{display: inline-block;min-width: 2em;text-align: center}
.bid-info .lookup-people {
    text-align: center;
    padding: 20px 0 26px 0;
    border-bottom: 1px solid #EBEBEB;
}
.bid-info .lookup-people div{flex:1}
.bid-info .lookup-text {
    position: relative;
    padding-top: 4px;
}

.bid-info .lookup-num {
    color: #282828;
    font-size: 24px;
    font-weight: bold;
    margin-top: 26px;
}

.bid-info .bid-operate {
    padding: 14px 20px 18px 20px;
}

.bid-info .bid-operate img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.bid-info button.biding {
    font-size: 18px;
    width: 100%;
    height: 46px;
    border-radius: 3px;
    margin: 14px 0 18px 0;
}

.bid-info .other-operate button {
    color: #282828;
    background: #f4f4f4;
    height: 30px;
    width: 100px;
    border: 1px solid #C3C3C3;
}
/* 投标信息 End */
/* 投标信息 End */


/* 二维码关注 */
.right .contact,
.main-content-right .contact{
    color: #333;
    background: #fff;
    margin-top: 16px;
    padding: 10px;
    padding-bottom: 0;
}
.right .contact .wechat,
.main-content-right .contact .wechat {text-align: center}
.right .contact .wechat img,
.main-content-right .contact .wechat  img{width: 85px;height: 85px;flex-shrink: 0}
.right .contact h3,
.main-content-right .contact h3{text-align: center;color:#485766;font-size:14px;font-weight: 700;margin: 0 0 11px 0}
.right .contact .row,
.main-content-right .contact .row{
    height: 60px;
    line-height: 60px;
}
.right .contact .row:not(:last-child),
.main-content-right .contact .row:not(:last-child){    border-bottom: 1px solid #eee;}
.right .contact .row .row-left,
.main-content-right .contact .row .row-left{font-size: 12px;color: #999}
.right .contact .row .row-left img,
.main-content-right .contact .row .row-left img{
    margin-right: 12px;
}
.right .contact .row .row-right,
.main-content-right .contact .row .row-right {
    color: #333;
    font-weight: bold;
}
/* 二维码关注 End */

/* 任务分类 */
.main-content-right .task-category{ margin-bottom: 16px }
.main-content-right .task-category,
.hot-tag{padding: 0 10px 18px 10px;}
.tag-wrapper {
    min-height: 94px;
    position: relative;
}

.main-content-right .task-category .hot-tag-list {flex-wrap: wrap;}
.main-content-right .task-category .hot-tag-list .tag-item {
    width: 7.5em;height: 36px; line-height: 36px;text-align: center;
    border: 1px solid #C3C3C3;
    border-radius: 4px;
    white-space: nowrap;
    padding: 0 4px;
    margin-bottom: 16px;
}
.main-content-right .task-category .hot-tag-list .tag-item a:hover{color: #0092FF}

.main-content-right .task-category .more-task-tag {
    width: 100%;
    padding: 8px 0;
    border: 1px solid #EEEEEE;
    color: #000;
}
.main-content-right .hot-tag .hot-tag-title{font-weight: bold}
.main-content-right .hot-tag .hot-tag-title,
.main-content-right .task-category .hot-tag-title {
    color: #282828;
    font-size: 16px;
    padding: 12px 0 14px 0px;
}
.main-content-right  .title-bottom-bar{width: 60px;height: 2px;background: #0092FF;}
.main-content-right .title-bottom-border{
    height: 1px;
    background: #EEEEEE;
    margin: 0px 0 18px;
}

.main-content-right .hot-tag .hot-tag-list,
.main-content-right .task-category .hot-tag-list {
    flex-wrap: wrap;
}
/* 任务分类 End */

/* 热门标签 */
.hot-tag{margin-top: 16px}
.hot-tag .hot-tag-list .tag-item{ height: 34px;line-height: 34px;text-align: center; border: 1px solid #C3C3C3;border-radius: 3px;margin-bottom: 8px}
.hot-tag .hot-tag-list .tag-item a:hover{ color: #0092FF }
.hot-tag .hot-tag-list .tag-item:nth-child(odd){margin-right: 8px }

.hot-tag .hot-tag-list .tag-item:nth-child(1){ width: 142px;}
.hot-tag .hot-tag-list .tag-item:nth-child(2){ width: 70px;}
.hot-tag .hot-tag-list .tag-item:nth-child(3){ width: 80px;}
.hot-tag .hot-tag-list .tag-item:nth-child(4){ width: 132px;}
.hot-tag .hot-tag-list .tag-item:nth-child(5){ width: 140px;}
.hot-tag .hot-tag-list .tag-item:nth-child(6){ width: 72px;}
.hot-tag .hot-tag-list .tag-item:nth-child(7){ width: 84px;}
.hot-tag .hot-tag-list .tag-item:nth-child(8){ width: 128px;}
.hot-tag .hot-tag-list .tag-item:nth-child(9){ width: 120px;}
.hot-tag .hot-tag-list .tag-item:nth-child(10){ width: 92px;}
.hot-tag .hot-tag-list .tag-item:nth-child(11){ width: 104px;}
.hot-tag .hot-tag-list .tag-item:nth-child(12){ width: 108px;}
/* 热门标签 End */

/* 热门专题 */
.hot-subject .subject-list{flex-wrap: wrap;text-align: center;}
.hot-subject .subject-list .subject-item{width: 115px;height: 35px;line-height: 35px;border: 1px solid #EEEEEE;margin-bottom: 10px;background: #FAFAFA}
.hot-subject .more{display: block;padding: 16px 0;text-align: right}
/* 热门专题 End */

/* 该雇主其他任务 */
.other-task .other-task-title {
    color: #fff;
    height: 48px;
    line-height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid #EEEEEE;
}

.other-task .other-task-list .other-task-item {border: 1px solid #E5E5E5;border-radius: 4px}
.other-task .other-task-list .other-task-item:not(:last-child) {margin-bottom: 16px;}

.other-task .other-task-list .other-task-item .top {padding: 8px 6px;}
.other-task .other-task-item .top .project-name-price {margin-bottom: 8px;}
.other-task .other-task-item .top .price-status {font-size: 12px}
.other-task .other-task-item .top .project-name-price .name {width: 120px;}
.other-task .other-task-item .bottom button {
    font-size: 12px;
    flex: 1;
    border-radius: 0;
    color: #888888;
    text-align: center;
    border-right: 1px solid #EEEEEE;
    border-top: 1px solid #eee;
    padding: 6px 0;
}

.other-task .other-task-item .price-status span {
    color: #999;
    font-size: 12px;
    padding: 0 6px;
    border: 1px solid #999;
    border-radius: 8px;
    margin-left: 10px;
}
.other-task .other-task-item .price-status span.active{color: #0092FF;border-color: #0092FF}
/* 该雇主其他任务 End */

.news .hot-title div {
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 50%;
    border-bottom: 1px solid #EEEEEE;
}

.news .hot-title div.active {
    color: #fff;
    background: #0092FF;
}

.news .hot-news {
    height: 342px;
    color: #656565;
    padding: 16px 8px 18px 8px;
}

.news .hot-news ul div {
    text-align: right;
}

.news .hot-news ul li {
    margin-bottom: 8px;
}

.news .hot-news li a {
    display: block;
    width: 220px;
}