.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: calc(var(--design-width) * 72vw);
    top: calc(var(--design-height) * 200vh);
    font-weight: 400;
    color: #fff;
}

.banner_top span {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: calc(var(--design-width) * 1296vw);
    height: calc(var(--design-height) * 72vh);
    transform: translateX(-50%);
    background: #FFF;
}

.banner_bottom {
    text-align: center;
}

.tabs {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--design-height) * 16vh) calc(var(--design-width) * 360vw) calc(var(--design-height) * 104vh);
    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: calc(var(--design-width) * 20vw);
    color: #666666;
    border: 1px solid #CCCCCC;
}

.tabs .current {
    font-weight: bold;
    font-size: calc(var(--design-width) * 20vw);
    color: #13599C;
    border: 1px solid #13599C;
}

.content.show {
    display: block;
}

.content {
    display: none;
    color: #333333;
}

.content>p {
    font-weight: 400;
    font-size: calc(var(--design-width) * 24vw);
    color: #666666;
    padding: calc(var(--design-height) * 48vh) 0 calc(var(--design-height) * 120vh) 0;
}

.content_left {
    width: calc(var(--design-width) * 416vw);
    height: calc(var(--design-height) * 243vh);
    padding: calc(var(--design-height) * 25vh) calc(var(--design-width) * 17vw);
    font-weight: 400;
    font-size: calc(var(--design-width) * 16vw);
    color: #FCFCFC;
    background: linear-gradient(90deg, #29323C 0%, #485563 100%);
    border-radius: calc(var(--design-width) * 16vw);
}

.option_img {
    width: calc(var(--design-width) * 1150vw);
    height: calc(var(--design-height) * 830vh);
    margin-bottom: calc(var(--design-height) * 80vh);
}

.warehouse {
    margin-bottom: calc(var(--design-height) * 96vh);
}

.advantage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 calc(var(--design-width) * 254vw);
}


.advantage img {
    width: calc(var(--design-width) * 400vw);
    height: calc(var(--design-width) * 400vw);
    outline: none;
    border: none;
    object-fit: cover;
}

.advantage_content {
    width: calc(var(--design-width) * 400vw);
    text-align: left;
}

.advantage_content>h3 {
    margin-bottom: calc(var(--design-height) * 24vh);
    color: #333333;
}

.advantage_content>p {
    font-weight: 400;
    font-size: calc(var(--design-width) * 16vw);
    color: #666666;
}


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

.scenario ul {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: calc(var(--design-height) * 80vh) auto;
}

.scenario ul li {
    position: relative;
    width: calc(var(--design-width) * 368vw);
    height: calc(var(--design-height) * 460vh);

}

.scenario ul li:nth-child(2) {
    margin: 0 calc(var(--design-width) * 24vw);
}

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

.scenario ul li h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    font-weight: bold;
    font-size: calc(var(--design-width) * 32vw);
    color: #FFFFFF;
}

.scenario ul li .scenario_content {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(var(--design-width) * 368vw);
    height: calc(var(--design-height) * 344vh);
    padding: calc(var(--design-width) * 30vw);
    font-weight: bold;
    text-align: left;
    font-size: calc(var(--design-width) * 32vw);
    color: #FFFFFF;
    background: rgba(19, 89, 156, 0.9);
}


.scenario_content p {
    margin-top: calc(var(--design-height) * 30vh);
    padding: calc(var(--design-height) * 30vh) 0;
    text-align: left;
    font-weight: 400;
    font-size: calc(var(--design-width) * 20vw);
    color: #D2DFEC;
    line-height: calc(var(--design-width) * 32vw);
    border-top: 1px solid #fff;
}

.scenario ul li:hover .scenario_content {
    display: block;
}

.scenario ul li:hover h2 {
    display: none;
}

.structure {
    width: 100%;
    background: #F9F9F9;
}

.structure h1 {
    padding: calc(var(--design-height) * 88vh) 0 calc(var(--design-height) * 72vh);
    font-weight: 400;
}

.structure img {
    width: calc(var(--design-width) * 1152vw);
    height: calc(var(--design-height) * 907vh);
}

.recovery {
    width: 100%;
}

.recovery h1 {
    padding: calc(var(--design-height) * 104vh) 0 calc(var(--design-height) * 72vh);
}

.recovery ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 calc(var(--design-width) * 144vw) calc(var(--design-height) * 96vh);
}

.recovery ul li {
    width: calc(var(--design-width) * 564vw);
    height: calc(var(--design-height) * 262vh);
    margin-bottom: calc(var(--design-height) * 24vh);
    padding: 0 calc(var(--design-width) * 48vw);
    text-align: left;
    background: #F9FAFB;
    border-radius: 2px;
}

.recovery ul li span {
    display: block;
    padding: calc(var(--design-height) * 48vh) 0 calc(var(--design-height) * 24vh);
    font-weight: bold;
    font-size: calc(var(--design-width) * 20vw);
}

.recovery ul li p {
    margin-right: calc(var(--design-width) *106vw);
    font-weight: 400;
    font-size: calc(var(--design-width) * 14vw);
    color: #666666;
}

.recovery ul li img {
    width: calc(var(--design-width) *70vw);
    margin-left: calc(var(--design-width) *406vw);
}

.recovery ul li .recovery_img2 {
    display: none;
}

.recovery ul li:hover {
    background: #13599C;
}

.recovery ul li:hover span,
.recovery ul li:hover p {
    color: #FFFFFF;
}

.recovery ul li:hover .recovery_img2 {
    display: block;
}

.recovery ul li:hover .recovery_img1 {
    display: none;
}

.abnormal_scenario {
    width: 100%;
    background: #F9F9F9;
}

.abnormal_scenario h1 {
    padding: calc(var(--design-height) * 88vh) 0 calc(var(--design-height) * 72vh);
}

.abnormal_scenario ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(var(--design-height) * 469vh);
    background-image: url('../images/tiredDriving.png');
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.abnormal_scenario ul li {
    width: calc(var(--design-width) * 432vw);
    height: calc(var(--design-height) * 344vh);
    padding: calc(var(--design-height) * 104vh) calc(var(--design-width) * 56vw);
    text-align: left;
    color: #D2DFEC;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.abnormal_scenario ul li p {
    margin-top: calc(var(--design-height) * 40vh);
    font-weight: 400;
    font-size: calc(var(--design-width) * 20vw);
}

.abnormal_scenario ul li:hover {
    padding: calc(var(--design-height) * 56vh) calc(var(--design-width) * 56vw);
    color: #FFF;
    background: #13599C;
    border: none;
}

.abnormal_scenario ul li:hover p {
    padding: calc(var(--design-height) * 40vh) 0;
    border-top: 1px solid #427AB0;
}