.area-title-contain{
    position: absolute;
}

.area-title1 {
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    color: #f2efde;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    transition: 1s;
    z-index: 10;

}

.area-title-contain:hover .title2-bj {
    transform: translateX(-43px);
}

.area-title-contain:hover .title3-bj {
    transform: translateX(43px);
}
.area-title-contain:hover .title2-yq {
    transform: translateX(-43px);
}

.area-title-contain:hover .title3-yq {
    transform: translateX(43px);
}

.area-title-contain:hover .title2-zjk {
    transform: translateX(-43px);
}

.area-title-contain:hover .title3-zjk{
    transform: translateX(43px);
}


.title2-bj {
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    color: #ad2934;
    opacity: 0.6;
    z-index: 9;
    transition: 0.5s ease-out;
    transform: translateX(-10px);

}

.title3-bj {
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    color: #101326;
    -webkit-text-stroke: #ad2934;
    -webkit-text-stroke-width: 1px;
    opacity: 0.8;
    z-index: 8;
    transition: 0.5s ease-out;
    transform: translateX(10px);


}
.title2-yq {
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    color: #3aa88b ;
    opacity: 0.6;
    z-index: 9;
    transition: 0.5s ease-out;
    transform: translateX(-10px);

}

.title3-yq{
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    color: #101326;
    -webkit-text-stroke: #3aa88b ;
    -webkit-text-stroke-width: 1px;
    opacity: 0.8;
    z-index: 8;
    transition: 0.5s ease-out;
    transform: translateX(10px);

}

.title2-zjk {
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    color: #ee8f0d ;
    opacity: 0.6;
    z-index: 9;
    transition: 0.5s ease-out;
    transform: translateX(-10px);

}

.title3-zjk {
    position: absolute;
    text-align: center;
    width: 400px;
    left: calc(50% - 200px);
    font-size: 36px;
    font-family: 'SourceHanSerifCN-Bold';
    line-height: 2;
    letter-spacing: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 1.25em;
    color: #101326;
    -webkit-text-stroke: #ee8f0d ;
    -webkit-text-stroke-width: 1px;
    opacity: 0.8;
    z-index: 8;
    transition: 0.5s ease-out;
    transform: translateX(10px);

}