body {
    background-color: #ffffff;
}
.ub-container {
    background-color: #ffffff;
}
.ub-nav-header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.ub-nav-header > .title {
    font-size: 48px;
    color: #333333;
    line-height: 63px;
    font-weight: normal;
}

.ub-nav-header > .sub-title {
    font-size: 24px;
    color: #666666;
    line-height: 32px;
    font-weight: normal;
}

.col-md-3 > .item-p {
    height: 200px;
    background-color: #EFF2FB;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.experience {
    display: flex;
    margin-top: 50px;
    justify-content: space-between;
}
.experience > .left {
    width: 50%;
}
.experience > .left > .title > .time {
    font-size: 68px;
    color: #333333;
}
.experience > .left > .title > .time-desc {
    font-size: 24px;
    color: #666666;
    padding-left: 20px;
}
.experience > .left > .content {
    margin-top: 20px;
    font-size: 18px;
    line-height: 30px;
    text-indent: 1.3rem;
}
.experience > .right {
    width: 50%;
}
.experience > .right > .box-row {
    position: relative;
    height: 150px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.experience > .right > .box-row > .box {
    width: 45%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.25);
}
.experience > .right > .box-row > .box > .icon {
    width: 50%;
    height: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.experience > .right > .box-row > .box > .box-content {
    width: 50%;
    height: 50%;
}
.experience > .right > .box-row > .box > .box-content > div {
    color: #1890FF;
}
.experience > .right > .box-row > .box > .box-content > div:first-child {
    font-size: 40px;
}
.experience > .right > .box-row > .box > .box-content > div:last-child {
    font-size: 16px;
}
@keyframes grow {
    0% {
        content: '0';
    }
    100% {
        content: '99';
    }
}
.counter {
    transition: 3s ease-in-out; /* 设置动画过渡效果 */
}
.custom-box {
    width: 100%;
    display: flex;
}
.custom-box > div {
    width: 50%;
    height: 300px;
}
.custom-box > .left-box {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.custom-box > .right-box {
    padding-left: 50px;
    position: relative;
}
.custom-box > .right-box > .title {
    font-size: 36px;
    color: #666666;
}
.custom-box > .right-box > .content {
    font-size: 18px;
    line-height: 30px;
    text-indent: 1.5rem;
    margin-top: 50px;
}
.custom-box > .right-box > .desc-box {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 0;
}
.custom-box > .right-box > .desc-box > .box {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.custom-box > .right-box > .desc-box > .box > .desc-title {
    font-size: 18px;
}
.custom-box > .right-box > .desc-box > .box > .desc-content {
    font-size: 16px;
    color: #666666;
}
.case-box {
    display: flex;
}
.case-box > .case-box-left {
    width: 30%;
    padding-left: 100px;
}
.case-box > .case-box-right {
    width: 70%;
}
.case-box > .case-box-left > .title-item {
    width: 200px;
    height: 60px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-bottom: 5px;
    cursor: pointer;
}
.default-bg-color {
    background-color: #d0d6e3;
}
.activity-bg-color {
    background-color: #3b83fe;
}
/*.case-box > .case-box-left > .title-item:first-child {*/
/*    background-color: #3b83fe;*/
/*}*/
/*.case-box > .case-box-left > .title-item:hover {*/
/*    background-color: #3b83fe;*/
/*}*/
.case-box > .case-box-right > .case-item {
    height: 350px;
    padding: 0 50px;
    display: none;
}
.case-box > .case-box-right > .case-item:first-child {
    display: block;
}
.case-box > .case-box-right > .case-item > p{
    font-size: 16px;
}
.service-box {
    width: 33%;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #666666;
    justify-content: space-evenly;
}
.service-box:hover {
    background-color: #E2F1FF;
}
.service-box > .service-box-desc {
    display: flex;
    justify-content: center;
    color: #68AFEB;
}
.service-box > .box-btn {
    width: 150px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b83fe;
    color: #ffffff;
    border-radius: 50px;
}
.icon-hexagon {
    width: 64px;
    height: 64px;
    background-image: url('/asset/image/hexagon.png');
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #6393ce;
}
.cast-box {
    display: flex;
}
.left, .right {
    width: 50%;
}
.left {
    margin-right: 15px;
}
.right {
    margin-left: 15px;
}
.left > .row > .icon-hexagon {
    margin-left: 20px;
}
.right > .row > .icon-hexagon {
    margin-right: 20px;
}
.left > .row {
    display: flex;
    align-items: center;
    margin: 40px 0;
    position: relative;
}

.left > .row::after {
    content: '';
    display: block;
    border-right: 1px solid #6393ce;
    width: 2px;
    height: 70px;
    position: absolute;
    top:70px;
    right: 34px;
}
.left > .row:last-child::after {
    display: none;
}
.right > .row {
    display: flex;
    align-items: center;
    margin: 40px 0;
    position: relative;
}
.right > .row::before {
    content: '';
    display: block;
    border-right: 1px solid #6393ce;
    width: 2px;
    height: 70px;
    position: absolute;
    top:70px;
    left: 31px;
}
.right > .row:last-child::before {
    display: none;
}
.right > .row > .desc {
    align-items: flex-start;
}
.right > .row > .desc > .info {
    text-align: left;
}
.desc {
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.title {
    color: #6393ce;
    font-size: 25px;
}
.info {
    width: 75%;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    font-size: 16px;
}