.banner {
    width: 100%;
    /* background: #FFF; */
}

.banner_top {
    position: relative;
    height: calc(var(--design-height) * 420vh);
}

.banner_top img {
    width: 100%;
    height: 100%;
}

.banner_top h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
}

.banner_bottom {
    padding: calc(var(--design-height) * 88vh) 0;
    text-align: center;
}

.tabs {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--design-height) * 56vh) calc(var(--design-width) * 480vw);
    text-align: center;
}

.tabs li {
    width: calc(var(--design-width) * 240vw);
    height: calc(var(--design-height) * 68vh);
    line-height: calc(var(--design-height) * 68vh);
    font-weight: 400;
    font-size: 20px;
    color: #666666;
    border: 1px solid #CCCCCC;
}

.tabs .current {
    font-weight: bold;
    font-size: 20px;
    color: #13599C;
    border: 1px solid #13599C;
}

.content {
    display: none;
}

.content.show {
    display: block;
}

.contentBox {
    display: flex;
    justify-content: space-between;
    padding: 0 calc(var(--design-width) * 180vw) calc(var(--design-height) * 96vh);
}

.content_left {
    /* width: calc(var(--design-width) * 416vw);
    height: calc(var(--design-height) * 243vh); */
    height:calc(230/1440*100vw);
}
.content_left1 {
    height:calc(236/1440*100vw);
}

.content_right p {
    width: calc(var(--design-width) * 526vw);
    padding-bottom: calc(var(--design-height) * 40vh);
    text-align: left;
    font-weight: 400;
    font-size: calc(var(--design-width) * 24vw);
    color: #666666;
    border-bottom: 1px solid #CCCCCC;
}

.content_right h3 {
    padding-top: calc(var(--design-height) * 30vh);
    line-height: 2;
    text-align: left;
    text-align: left;
    font-weight: bold;
    font-size: calc(var(--design-width) * 28vw);
    color: #333333;
}

.derive {
    width: 100vw;
    margin: 0 auto;
    padding: calc(var(--design-height) * 88vh) 0 0;
    color: #333;
    text-align: center;
    background: #F9F9F9;
}

.derive p {
    margin: calc(var(--design-height) * 14vh) auto calc(var(--design-height) * 64vh);
    font-family: 'Source Han Sans CN, Source Han Sans CN';
    font-weight: 400;
    font-size: calc(var(--design-width) * 24vw);
    line-height: 2;
    text-align: center;
    color: #666;
}

.derive ul {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.derive ul li {
    position: relative;
    width: calc(var(--design-width) * 333vw);
    height: calc(var(--design-height) * 600vh);

}

.derive ul li img {
    width: 100%;
    height: 100%;
}

.derive ul li .derive_content {
    position: absolute;
    bottom: calc(var(--design-height) * 48vh);
    left: calc(var(--design-width) * 48vw);
    font-weight: 400;
    font-size: calc(var(--design-width) * 32vw);
    color: #FFFFFF;
}

.derive ul li .derive_content img {
    display: block;
    width: calc(var(--design-width) * 56vw);
}

/* .derive ul li .derive_content text:nth-child(2) {
    display: none;
    text-align: left;
} */

.derive_content .line {
    display: none;
    width: calc(var(--design-width) * 32vw);
    height: calc(var(--design-height) * 8vh);
    background: #fff;
}

.derive_content .hoverShow {
    display: none;
}

.derive_content text {
    text-align: left;
}

.derive_content .hoverShow p {
    position: absolute;
    bottom: calc(var(--design-height) * 48vh);
    left: calc(var(--design-width) * 48vw);
    right: calc(var(--design-width) * 48vw);
    text-align: left;
    font-size: calc(var(--design-width) * 20vw);
    color: #FFFFFF;
    line-height: calc(var(--design-width) * 32vw);
}

.derive ul li:hover {
    width: calc(var(--design-width) * 441vw);
}

.derive ul li:hover .derive_content {
    width: calc(var(--design-width) * 441vw);
    height: calc(var(--design-height) * 600vh);
    bottom: 0;
    left: 0;
    padding: calc(var(--design-width) * 48vw);
    background: rgba(19, 89, 156, 0.9);
}

.derive ul li:hover .derive_content div:first-child {
    display: none;
}

.derive ul li:hover .derive_content .hoverShow {
    text-align: left;
}

.derive ul li:hover .derive_content img {
    width: calc(var(--design-width) * 80vw);
    height: calc(var(--design-width) * 80vw);
    text-align: left;
}

.derive ul li:hover .derive_content .hoverShow text {
    text-align: left;
    margin-top: calc(var(--design-height) * 40vh);
}

.derive ul li:hover .derive_content .hoverShow {
    display: block;
}