.bg-f8f8f8 {
    background: #f8f8f8
}

.cooperate-hd {
    height: 500px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.cooperate-title {
    padding: 45px 0;
    text-align: center
}

.cooperate-title .name {
    color: #444;
    font-size: 24px;
    margin-bottom: 12px
}

.cooperate-title .txt {
    color: #54545b;
    font-size: 18px
}

.cooperate-title .heng {
    width: 300px;
    height: 1px;
    background: #e5e5e5;
    margin: 0 auto;
    margin-top: 20px
}

.cooperate-title .heng-2 {
    width: 120px;
    height: 2px;
    background: #f5a623;
    margin: 0 auto;
    position: relative;
    top: -2px
}

.cooperate-spread {
    margin-top: -100px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding-bottom: 150px;
    position: relative
}

.cooperate-spread-list-box {
    display: flex;
    justify-content: space-between;
    padding: 0 103px;
    line-height: 0
}

.cooperate-spread-list {
    width: calc(33.33% - 40px);
    position: relative
}

.cooperate-spread-list::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: -2px;
    background: #f82141;
    height: 2px;
    width: 0;
    transition-property: left right;
    transition-duration: .3s;
    transition-timing-function: ease-out
}

.cooperate-spread-list:hover {
    box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer
}

.cooperate-spread-list:hover:after,
.cooperate-spread-list:focus:after,
.cooperate-spread-list:active:after {
    width: 100%
}

.cooperate-spread-list:hover .txt-box {
    background: #fff
}

.cooperate-spread-list img {
    width: 100%;
    height: 270px;
    vertical-align: top
}

.cooperate-spread-list .txt-box {
    background: #f8f8f8;
    padding: 37px
}

.cooperate-spread-list .txt-box .title {
    font-size: 18px;
    color: #333;
    margin-bottom: 25px
}

.cooperate-spread-list .txt-box .desc {
    font-size: 16px;
    line-height: 30px;
    color: #666;
    position: relative
}

.cooperate-contact {
    background: #fff;
    margin-top: 20px;
    padding: 0 103px 70px
}

.cooperate-contact-main {
    display: flex;
    position: relative
}

.cooperate-contact-main .img {
    flex: 0 0 auto;
    width: 310px;
    height: 260px;
    margin-right: 40px
}

.cooperate-contact-main .rigtArea {
    flex: 1 1 auto
}

.cooperate-contact-main .rigtArea .title {
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    color: #333
}

.cooperate-contact-main .rigtArea .txt {
    font-size: 16px;
    line-height: 30px;
    color: #666;
    margin-bottom: 40px
}

.phone {
    height: 77px;
    width: 77px;
    background: url('../images/cooperate/phone1.png') center center no-repeat #f8f8f8;
    border-radius: 50%;
    border: 2px solid #f8f8f8;
    background-size: 48px 48px;
    cursor: pointer;
    transition: all ease-in-out .5s;
    z-index: 2;
    position: absolute
}

.cooperate-spread .phone {
    bottom: 40px;
    left: 50%;
    margin-left: -38.5px
}

.cooperate-contact-main .phone {
    bottom: 10px;
    right: 0
}

.phone::before {
    position: absolute;
    display: block;
    width: 90px;
    height: 90px;
    content: '';
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    border: 10px solid rgba(248, 33, 65, 0.5);
    top: -8px;
    left: -9px;
    opacity: 0;
    transition: opacity .5s ease-out 0s;
    border-radius: 50%
}

.phone:hover::before,
.phone.active::before {
    opacity: 1
}

.phone.active,
.phone:hover {
    background: url('../images/cooperate/phone.png') center center no-repeat #f82141;
    background-size: 48px 48px
}

.cooperate-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10
}

.cooperate-dialog-com {
    background: #fff;
    border-radius: 16px;
    padding: 33px;
    display: flex;
    position: relative;
    margin-top: -420px
}

.cooperate-dialog-com .close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d6c4c4;
    border-radius: 50%;
    cursor: pointer
}

.cooperate-dialog-com .close:hover {
    background: #999
}

.cooperate-dialog-com .close img {
    width: 24px
}

.cooperate-dialog-com .leftArea {
    display: flex;
    align-items: center
}

.cooperate-dialog-com .leftArea img {
    width: 126px;
    height: 126px;
    flex: 0 0 auto;
    margin-right: 25px;
    border-radius: 50%
}

.cooperate-dialog-com .leftArea .txt-box {
    flex: 1 1 auto
}

.cooperate-dialog-com .leftArea .txt-box .title {
    color: #333;
    font-size: 36px;
    margin-bottom: 10px
}

.cooperate-dialog-com .leftArea .txt-box .txt {
    color: #666;
    font-size: 24px
}

.cooperate-dialog-com .rightArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-left: 90px
}

.cooperate-dialog-com .rightArea::before {
    content: '';
    position: absolute;
    width: 2px;
    background: #eae1e1;
    height: 103px;
    top: 50%;
    margin-top: -52px;
    left: -52px
}

.cooperate-dialog-com .rightArea .txt {
    display: flex;
    color: #666;
    align-items: center;
    font-size: 36px
}

.cooperate-dialog-com .rightArea .txt:first-child {
    margin-bottom: 23px
}

.cooperate-dialog-com .rightArea img {
    height: 50px;
    width: 50px;
    margin-right: 23px
}

@media all and (max-width:1600px) {
    .cooperate-spread-list-box {
        padding: 0 80px
    }
    .cooperate-spread-list {
        width: calc(33.33% - 30px)
    }
    .cooperate-spread {
        padding-bottom: 80px
    }
    .cooperate-contact {
        padding: 0 80px 50px
    }
}

@media all and (max-width:1360px) {
    .cooperate-spread-list-box {
        padding: 0 50px
    }
    .cooperate-spread-list {
        width: calc(33.33% - 20px)
    }
    .cooperate-spread {
        padding-bottom: 60px
    }
    .cooperate-contact {
        padding: 0 50px 40px
    }
}