h2.cate-title{
    position: relative;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    font-weight: normal;
    color: #4c4c4c;
}
.cate-synopsis > div{
    width: 50%;
}
.cate-synopsis > .left-con{
    padding-right: 15px;
}
.cate-synopsis h3{
    font-size: 26px;
    line-height: 28px;
    color: #4c4c4c;
    font-weight: normal;
}
.cate-synopsis p{
    margin-top: 20px;
    font-size: 14px;
    line-height: 24px;
    color: #333;
}
.cate-synopsis > .right-con{
    padding-left: 10px;
}
.cate-synopsis .office-img{
    margin-top: 3px;
    overflow: hidden;
}
.cate-synopsis .office-img-one{
    width: 580px;
    height: 340px;
}
.cate-synopsis .office-img-two{
    width: 260px;
    height: 160px;
}
.cate-synopsis .office-img-three{
    width: 318px;
    height: 160px;
}
.cate-synopsis > .right-con img{
    display: block;
    width: 100%;
}
.advantage-list .advantage-item{
    width: 350px;
    padding-top: 20px;
}
.advantage-list .advantage-item2{
    margin-left: 65px;
}
.advantage-list .advantage-item img{
    display: block;
    margin: 0 auto;
}
.advantage-list .advantage-item p{
    text-align: center;
    color: #4c4c4c;
}
.advantage-list .advantage-item .title{
    margin-top: 25px;
    font-size: 20px;
    line-height: 24px;
}
.advantage-list .advantage-item .text{
    margin-top: 15px;
    font-size: 16px;
    line-height: 22px;
}
.headline{
    padding-top: 0;
}
.team-container {
    margin: 30px 0;
}
.team-leader{
    margin-bottom: 60px;
}
.team-leader img{
    display: block;
    float: left;
    width: 340px;
}
.team-leader .desc {
    float: left;
    width: 410px;
    padding-right: 20px;
    padding-top: 20px;
}
.team-leader .title {
    padding-bottom: 15px;
}
.team-leader .title span {
    font-size: 24px;
    color: #004187;
}
.team-leader .title .normal {
    margin-left: 25px;
}
.content {
    font-size: 14px;
    color: #4d4d4d;
    line-height: 25px;
}
.team-leader .time-line{
    float: right;
    width: 390px;
    padding-top: 20px;
}
.team-leader .time-line ul{
    margin-left: 10px;
    border-left: 1px solid #2288df;
}
.team-leader .time-line li{
    position: relative;
    margin-top: 15px;
    padding-left: 15px;
    font-size: 14px;
    color: #4c4c4c;
    line-height: 22px;
}
.team-leader .time-line li:first-child{
    margin-top: 0;
}
.team-leader .time-line li:after{
    position: absolute;
    content: "";
    top: 4px;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 1px solid #2288df;
    border-radius: 50%;
    background-color: #fff;
}
.team-leader .time-line li:before{
    position: absolute;
    content: "";
    top: 8px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2288df;
    z-index: 9;
}
.team-core{
    position: relative;
}

.team-core  h3 {
    font-size: 26px;
    font-weight: normal;
    text-align: center;
    line-height: 40px;
    margin: 40px 0 25px 0;
    color: #4d4d4d;
}
.team-core .slider-box{
    position: relative;
    width: 1140px;
    height: 440px;
    margin: 0 auto;
    overflow: hidden;
}
.team-core ul{
    position: absolute;
}
.team-core  li {
    float: left;
    border: 1px solid #e0e0e0;
    width: 360px;
    height: 440px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}
.team-core  li img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border-radius: 50%;
}
.team-core .title {
    padding: 0 15px;
    margin-top: 10px;
    line-height: 28px;
    
}
.team-core .content {
    line-height: 24px;
    font-size: 14px;
    padding: 5px 20px 15px;
}

.team-core .title span{
    display: block;
    text-align: center;
}
.team-core .title .primary {
    color: #004187;
    font-size: 18px;
    font-weight: bold;
}
.team-core .title .normal{
    color: #004187;
    font-size: 16px;
}
.team-tech .title .normal{
    float: none;
}
.team-core .arrow-left,
.team-core .arrow-right{
    position: absolute;
    width: 20px;
    height: 34px;
    bottom: 205px;
    cursor: pointer;
}
.team-core .arrow-left{
    left: 0;
    background: url("../../images/hcr/about/left-arrow.png") center no-repeat;
}
.team-core .arrow-left:hover{
    background: url("../../images/hcr/about/left-arrow-blue.png") center no-repeat;
}
.team-core .arrow-right{
    right: 0;
    background: url("../../images/hcr/about/right-arrow.png") center no-repeat;
}
.team-core .arrow-right:hover{
    background: url("../../images/hcr/about/right-arrow-blue.png") center no-repeat;
}
.job-list li {
    border-bottom: 1px solid #f0f4f8;
    padding: 35px 0 15px 0;
}
a.job-title {
    font-size: 18px;
    color: #444;
    line-height: 26px;
    font-weight: bold;
}
a.job-title:hover {
    color: #004187;
    text-decoration: underline;
}
.job-desc {
    margin-top: 10px;
    line-height: 26px;
}
.job-salary {
    display: block;
    float: left;
    color: #004187;
    font-size: 16px;
    width: 135px;
}
.job-salary i {
    margin-right: 5px;
}
.job-meta {
    display: block;
    float: left;
    font-size: 16px;
    color: #333;
    width: 90px;
    margin-left: 50px;
}
.job-time {
    float: right;
    color: #333;
    font-size: 16px;
}
.job-search-container {
    margin-top: 30px;
    line-height: 42px;
    font-size: 16px;
}
.job-search-container select,
.job-search-container input {
    border: 1px solid #ccc;
    background: #f7faff;
    height: 42px;
    line-height: 42px;
    padding: 0 6px;
    width: 260px;
    margin-right: 30px;
    border-radius: 0;
}
.job-search-container select:focus,
.job-search-container input:focus {
    background: #fff;
    border-color: #004187;
}

.job-search-btn {
    display: inline-block;
    color: #fff;
    text-align: center;
    width: 140px;
    line-height: 42px;
    height: 42px;
    background: linear-gradient(to top right, #0262d9 ,#02ccff);
    font-size: 16px;
}

.job-search-btn:hover{
    background: linear-gradient(to top right, #018efb ,#49e7ff);
}

.hotjob-list li{
    margin-top: 25px;
    width: 100%;
    box-shadow:0 0 10px rgba(0, 0, 0, .1);
}
.hotjob-list li.active{
    box-shadow:0 0 20px rgba(0, 0, 0, .2);
}
.hotjob-list .basic-main{
    height: 100px;
    padding: 15px 20px;
    line-height: 24px;
    cursor: pointer;
}
.hotjob-list .title{
    float: left;
    width: 350px;
    font-size: 18px;
    color: #333;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.hotjob-list .basic-main:hover .title{
    color: #2288df;
}
.hotjob-list .basic-text{
    display: none;
    padding: 0 35px 20px;
}
.hotjob-list .salary {
    float: left;
    margin-left: 100px;
    font-size: 18px;
    color: #f65631;
}
.hotjob-list .head .icon{
    float: right;
    width: 24px;
    height: 24px;
    background: url(../../images/hcr/industry/left-arrow.png) center no-repeat;
}
.hotjob-list li.active .icon{
    background: url(../../images/hcr/industry/bottom-arrow.png) center no-repeat;
}
.hotjob-list .meta {
    margin-top: 15px;
    color: #4c4c4c;
    font-size: 16px;
    line-height: 24px;
}
.hotjob-list .meta span{
    margin-left: 70px;
}
.hotjob-list .meta span:first-child{
    margin-left: 0;
}
.hotjob-list .date {
    float: right;
    margin-right: 70px;
    font-size: 16px;
    color: #4c4c4c;
}
.hotjob-title {
    margin-top: 20px;
    font-size: 28px;
    font-weight: normal;
    color: #004187;
}

.jobs-summary {
    padding-bottom: 15px;
    border-bottom: 1px dashed #b2c6db;
}
.jobs-summary h2.cate-title {
    font-size: 28px;
    border-bottom: none;
}
.jobs-summary h3.jobs-subtitle {
    font-size: 18px;
    color: #333;
}
.jobs-contact {
    color: #004187;
    font-size: 14px;
    text-align: right;
}
.jobs-contact a:hover {
    text-decoration: underline;
}
.contact-map{
    position: relative;
    width: 955px;
    height: 666px;
    margin: 0 auto 80px;
    background: url("../../../statics/images/hcr/about/contact-map.png") center no-repeat;
}
.contact-map .point-box{
    position: absolute;
    width: 80px;
    height: 80px;
    visibility: visible;
    opacity: 1;
}
.contact-map .point-bj{
    top: 210px;
    right: 315px;
}
.contact-map .point-sh{
    top: 365px;
    right: 230px;
}
.contact-map .point-wh{
    bottom: 204px;
    left: 490px;
}
.contact-map .point-gz{
    bottom: 65px;
    left: 530px;
}
.point-box .point {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    border-radius: 50%;
    background: transparent;
}

.point-box .point-dot {
    z-index: 1;
    background-color: #31a0f6;
    border: 1px solid rgba(0, 205, 236, 0.37);
}

.point-box .point-1,
.point-box .point-2 {
    width: 100%;
    height: 100%;
}

.point-box .point-1::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 3px solid #31a0f6;
    opacity: 0;
    -webkit-animation: ripple 4500ms ease-out 225ms infinite;
    -moz-animation: ripple 4500ms ease-out 225ms infinite;
    -o-animation: ripple 4500ms ease-out 225ms infinite;
    animation: ripple 4500ms ease-out 225ms infinite;
}

.point-box .point-2::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 3px solid #31a0f6;
    opacity: 0;
    -webkit-animation: ripple 4500ms ease-out 1575ms infinite;
    -moz-animation: ripple 4500ms ease-out 1575ms infinite;
    -o-animation: ripple 4500ms ease-out 1575ms infinite;
    animation: ripple 4500ms ease-out 1575ms infinite;
}

@-webkit-keyframes ripple {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1, 0.1);
    }

    5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes ripple {
    0% {
        opacity: 0;
        -moz-transform: scale(0.1, 0.1);
    }

    5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -moz-transform: scale(1)
    }
}

@-o-keyframes ripple {
    0% {
        opacity: 0;
        -o-transform: scale(0.1, 0.1);
    }

    5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -o-transform: scale(1)
    }
}

@keyframes ripple {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
    }

    5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.contact-list li {
    width: 580px;
    height: 170px;
    padding-top: 25px;
    margin-bottom: 20px;
    box-shadow:0 0 10px rgba(0, 0, 0, .1);
}

.contact-list li p{
    text-align: center;
    font-size: 18px;
    color: #4c4c4c;
    line-height: 26px;
}
.contact-list p span{
    margin: 0 6px;
}
.contact-list li .company{
    font-size: 20px;
    color: #2288df;
}
.contact-list li .tel{
    margin-top: 20px;
}
.business-list li{
    width: 580px;
}
.business-list p{
    text-align: center;
}
.business-list>div{
    width: 580px;
    height: 180px;
    padding-top: 30px;
}
.business-list p i{
    color: #31a0f6;
    font-size: 30px;
    line-height: 30px;
}
.business-list .business{
    margin-top: 10px;
    font-size: 20px;
    color: #4c4c4c;
    line-height: 24px;
}
.business-list .tel{
    margin-top: 20px;
    font-size: 16px;
    line-height: 22px;
    color: #4c4c4c;
}
.business-list .tel span{
    margin: 0 25px;
}

.map-title {
    height: 37px;
    width: 100%;
    border-bottom: 1px dashed #bcdbf5;
}
.map-title .map-icon{
    float: left;
    height: 36px;
    width: 24px;
    background: url("../../../statics/images/hcr/about/map-icon.png") center no-repeat;
}
.map-title h1{
    float: left;
    margin-left: 10px;
    font-size: 18px;
    color: #2288df;
    font-weight: normal;
    line-height: 36px;
}
.map-nav {
    width: 100%;
    margin-bottom: 240px;
}

.map-nav strong{
    display: block;
    float: left;
    width: 120px;
    height: 36px;
    font-size: 18px;
    font-weight: normal;
    background-color: #2288df;
    color: #fff;
    line-height: 36px;
    text-align: center;
}
.map-nav > li{
    margin-bottom: 40px;
}
.second-nav{
    margin-left: 45px;
    float: left;
}
.second-nav li{
    position: relative;
    float: left;
    margin-right: 21px;
    line-height: 36px;
    font-size: 16px;
    color: #4c4c4c;
}
.second-nav li:after{
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    top: 10px;
    left: -11px;
    background-color: #a0a0a0;
}
.second-nav li:first-child:after{
    display: none;
}
.second-nav li a:hover{
    text-decoration: underline;
    color: #2288df;
}

.headline-info{
    padding: 25px;
    font-size: 24px;
    color: #1db2f5;
    text-align: center;
}
.vision-list{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
}

.vision-list li{
    float: left;
    width: 33.33333%;
}
.vision-list div{
    width: 184px;
    height: 184px;
    padding-top: 40px;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #1db2f5;
}
.vision-list div i{
    margin: 0 auto;
    display: block;
    width: 80px;
    height: 73px;
    background-repeat: no-repeat;
    background-position: center;
}
.vision-list div .client-icon{
    background-image: url("../../../statics/images/hcr/about/client-icon.png");
}
.vision-list div .staff-icon{
    background-image: url("../../../statics/images/hcr/about/staff-icon.png");
}
.vision-list div .society-icon{
    background-image: url("../../../statics/images/hcr/about/society-icon.png");
}
.vision-list div p{
    color: #fff;
    font-size: 20px;
    margin-top: 5px;
}
.vision-list p{
    margin-top: 25px;
    font-size: 16px;
    color: #333;
    text-align: center;
}
.mission-box{
    margin-top: 20px;
    width: 100%;
}
.mission-box div{
    display: table;
    width: 572px;
    height: 115px;
    padding: 0 20px;
    background-color: #f3f3f3;
    font-size: 18px;
    line-height: 36px;
    color: #333;
    text-align: center;
}
.mission-box p{
    display: table-cell;
    vertical-align: middle;
}
.photo-wall{
    display: block;
    margin: 100px auto 30px;
}

.value-box{
    position: relative;
    width: 100%;
    height: 645px;
    margin-top: 120px;
    background-image: url("../../../statics/images/hcr/about/value-bg.png");
    background-repeat: no-repeat;
    background-position: top left;
}
.value-box .value-main{
    position: absolute;
    width: 255px;
    height: 255px;
    left: 405px;
    top: 185px;
    padding-top: 55px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(to top right, #21a7f0 ,#63d8f8);
}
.value-main strong{
    display: block;
    margin-bottom: 10px;
    font-weight: normal;
}
.value-main strong p{
    font-size: 24px;
    line-height: 30px;
}
.value-main p{
    font-size: 14px;
    line-height: 24px;
}
.value-main-item {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    line-height: 90px;
    color: #fff;
    font-size: 24px;
}
.value-main-item.value-blue{
    background-color: #1db2f5;
}
.value-main-item.value-gray{
    background-color: #999;
}
.value-undertake{
    top: 66px;
    left: 530px;
}
.value-major{
    top: 138px;
    left: 648px;
}
.value-innovate{
    top: 270px;
    left: 693px;
}
.value-share{
    top: 398px;
    left: 646px;
}
.value-upright{
    top: 468px;
    left: 531px;
}
.value-main-info{
    position: absolute;
    width: 340px;
}
.value-main-info h3{
    font-size: 18px;
    color: #1db2f5;
    margin-bottom: 10px;
}
.value-main-info p{
    padding-left: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #666;
    border-left: 3px solid #3399ff;
}
.value-main-info.value-info-gray h3{
    color: #333;
}
.value-main-info.value-info-gray p{
    border-left: 3px solid #999;
}
.value-info-undertake{
    top: 22px;
    left: 651px;
}
.value-info-major{
    top: 150px;
    left: 767px;
}
.value-info-innovate{
    top: 276px;
    left: 812px;
}
.value-info-share{
    top: 401px;
    left: 767px;
}
.value-info-upright{
    top: 530px;
    left: 651px;
}

.common-info{
    margin-top: 90px;
    width: 100%;
    margin-bottom: 70px;
}
.common-info li{
    float: left;
    width: 33.333333%;
    height: 66px;
    text-align: center;
    line-height: 66px;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(to top right, #1aa1f0 ,#67dbf8);
}

.culture-info{
    width: 100%;
    margin-top: 70px;
    margin-bottom: 100px;
}

.culture-info li{
    float: left;
    width: 236px;
}
.culture-info li i{
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
}
.culture-info li .celebration-icon{
    background-image: url("../../../statics/images/hcr/about/celebration-icon.png");
}
.culture-info li .party-icon{
    background-image: url("../../../statics/images/hcr/about/party-icon.png");
}
.culture-info li .megagame-icon{
    background-image: url("../../../statics/images/hcr/about/megagame-icon.png");
}
.culture-info li .sports-icon{
    background-image: url("../../../statics/images/hcr/about/sports-icon.png");
}
.culture-info li .culture-icon{
    background-image: url("../../../statics/images/hcr/about/culture-icon.png");
}
.culture-info li p{
    margin-top: 30px;
    font-size: 16px;
    color: #333;
    text-align: center;
}