/* 焦距fouces 部分  开始 */
/* 背景视频不会随着缩放变化 开始*/
.fouces {
    position: relative;
    top: -90px;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 99vh;
}

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

/* 背景视频不会随着缩放变化 结束*/
/* 文字内容 开始*/
.fouces .cover {
    position: absolute;
    top: 40%;
    left: 200px;
    z-index: 99;
}

.fouces .cover h3 {
    font-size: 54px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 40px;
}

.fouces .cover .content {
    display: block;
    width: 80%;
    font-size: 20px;
    color: #ffffff;
    line-height: 44px;
    margin-bottom: 40px;
    white-space: break-spaces;
}

.fouces .cover .detail {
    display: block;
    width: 160px;
    background-color: #bcd12b;
    text-align: center;
    font-size: 18px;
    color: #fff;
    line-height: 50px;
}

/* 文字内容 结束*/

/* 加载圈与点点模块 开始 */
.fouces ul {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -100px;
    width: 200px;
    height: 30px;
    display: flex;
    justify-content: center;
}

.fouces ul li {
    float: left;
    display: block;
    width: 6px;
    height: 6px;
    margin-left: 12px;
    margin-top: 5px;
    border-radius: 50%;
    background-color: #fff;
    transition: all .3s;
}



/* 选中加载圈 开始 */
.loading {
    display: block;
    width: 12px !important;
    height: 12px !important;
    background: transparent !important;
    margin-top: 2px !important;
    aspect-ratio: 1;
    border: 3px solid #ddd;
    border-radius: 50%;
    position: relative;
    transform: rotate(45deg);
    transition: all .3s;
}

.loading::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid #cc2532;
    animation: l18 5s infinite linear;
}

@keyframes l18 {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

/* 选中加载圈 结束 */
/* 加载圈与点点模块 开始 */

/* 左右箭头部分 可同下面使用 */
.prev,
.next {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    margin-top: 33px;
    width: 72px;
    height: 72px;
    z-index: 999;
    cursor: pointer;
}

.prev img {
    width: 48px;
    height: 48px;
    margin-left: -10px;
}

.next img {
    width: 56px;
    height: 56px;
}

.prev {
    left: 50px;
}

.next {
    right: 50px;
}

/* 焦距fouces 部分 结束 */
/* 标题title 模块 开始 */
.title {
    position: relative;
    top: -90px;
    text-align: center;
    padding: 60px 0;
    background-color: #f8f8f8;
}

.title h3 {
    margin-bottom: 30px;
    margin-top: 40px;
    font-size: 30px;
    font-weight: 700;
    color: #064659;
}

.title span {
    white-space: break-spaces;
}

/* 标题title 模块 结束 */
/* 以下模块 鼠标放置图片变大 */
.safety:hover img,
.mod:hover img,
.comfort:hover img,
.int:hover img,
.env_pro:hover img {
    transform: scale(1.1);
}


/* 安全safety 模块化mod  舒适化 comfort 智能化int 环保env_pro 公共部分 开始 */
.safety,
.mod,
.comfort,
.int,
.env_pro {
    position: relative;
    top: -90px;
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
}


.safety .img,
.mod .img,
.comfort .img,
.int .img,
.env_pro .img {
    float: left;
    width: 60%;
    overflow: hidden;
}

.safety .img img,
.mod .img img,
.comfort .img img,
.int .img img,
.env_pro .img img {
    width: 100%;
    transition: all 0.5s;
}

.safety .content,
.mod .content,
.comfort .content,
.int .content,
.env_pro .content {
    float: left;
    width: 40%;
    padding-top: 80px;
}

.safety .content h3,
.mod .content h3,
.comfort .content h3,
.int .content h3,
.env_pro .content h3 {
    margin-left: 30px;
    font-size: 60px;
    font-weight: 700;
}

.safety .content h4,
.mod .content h4,
.comfort .content h4,
.int .content h4,
.env_pro .content h4 {
    margin-left: 60px;
    margin-bottom: 10px;
    font-size: 36px;
    font-weight: 700;
}

.safety .content p,
.mod .content p,
.comfort .content p,
.int .content p,
.env_pro .content p {
    width: 80%;
    margin: 30px 0 30px 60px;
    font-size: 20px;
}

/*安全safety 模块化mod 舒适化 comfort 智能化int 环保env_pro 公共部分 结束 */
/* 安全safety 舒适化comfort 环保env_pro 部分 开始 */
.safety,
.int {
    background-color: #fff;
}

.safety .content h3,
.int .content h3 {
    color: rgba(0, 0, 0, 0.2);
}

.safety .content h4,
.int .content h4 {
    color: #064659;
}

.safety .content p,
.int .content p {
    color: #666666;
}

/* 安全safety 舒适化comfort 环保env_pro 部分 结束 */
/* 模块化 mod模块 env_pro模块 开始 */
.mod,
.env_pro {
    background-color: #054558;
}

.mod .content h3,
.env_pro .content h3 {
    color: rgba(0, 0, 0, 0.2);
}

.mod .content h4,
.env_pro .content h4 {
    color: #bcd12b;
}

.mod .content p,
.env_pro .content p {
    color: #fff;
}

/* 模块化 mod 模块 env_pro模块  结束 */
/* 舒适化 comfort部分 开始 */
.comfort {
    background-color: #444;
}

.comfort .content h3 {
    color: rgba(0, 0, 0, 0.2);
}

.comfort .content h4 {
    color: #fff;
}

.comfort .content p {
    color: #fff;
}

/* 舒适化 comfort部分 结束 */
/* 底部footer 向上移去掉空隙 */
footer {
    margin-top: -90px;
}