@import "common.css";

/* 轮播 */
.inner-banner{height: 680px;}
.inner-banner .banner-txt{top: 245px;}

/* 简介 */
.about .txt{line-height: 36px;}
.about ul li:last-child{margin-right: 0;}
.about ul li h2{font-size: 45px; line-height: 45px;}

/* 服务 */
.service li{width: calc((100% - 90px) / 4); height: 280px; padding: 40px; margin-right: 30px;box-shadow: none;}
.service li:last-child{margin-right: 0}
.service li h3{font-size: 22px;}
.service li img{height: 48px;}
.service li p{line-height: 28px;}
.service li a{text-decoration: underline;}
.service li a:hover{color: #1668FF;}
.service li:hover{transform: translateY(-10px); box-shadow: 3px 3px 10px #e9ecf4;}

/* 优势 */
.good li img{width: 160px; height: 118px;}

/* 步骤 */
.step li{width: calc((100% - 320px) / 5); height: 100%; position: relative;}
.step li .dt{width: 100%; height: 88px; padding: 0 25px; border-radius: 8px;}
.step li .dt h2{font-size: 42px; line-height: 42px; color: rgba(255,255,255,0.5);}
.step li .dt .info{height: 38px; margin-left: 15px; align-items: flex-start;}
.step li .dt .info b{line-height: 16px;}
.step li .dt .info p{font-size: 13px; line-height: 13px;}
.step li .down-img{width: 10px; height: 10px;}
.step li .dd{width: 100%; height: 280px; padding: 30px 0; border-radius: 8px;}
.step li .dd p{width: 80%; text-align: center; line-height: 40px; border-radius: 50px;}
.step li .dd p:not(:first-child){margin-top: 20px;}
.step .right-img{width: 36px; height: 10px; margin-top: 39px;}

/* 保障 */
.ensure dl{width: 25%; align-items: flex-start;}
.ensure dl dt{width: 80px; height: 85px;}
.ensure dl dd{width: 100%; height: 0; margin-top: -20px; padding-bottom: 133%; position: relative;}
.ensure dl dd:after{width: 100%; height: 108%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,.2); content: '';}
.ensure dl dd img{width: 100%; object-fit: cover;}
.ensure dl dd .info{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.ensure dl dd .info span{width: 20px; height: 4px; position: absolute; left: 30px; top: 30px; opacity: 0;}
.ensure dl dd .info .txt{width: 240px; height: 120px; position: absolute; left: 50px; bottom: -64px; align-items: flex-start;}
.ensure dl dd .info .txt b{font-size: 26px; line-height: 26px;}
.ensure dl dd .info .txt p{opacity: 0;}
.ensure dl dd .info .txt p:before{width: 6px; height: 6px; border-radius: 50px; margin-right: 10px; background-color: #FFFFFF; float: left; content: ''}
.ensure dl dd:hover:after{background-color: rgba(22,104,255,0.8);}
.ensure dl dd:hover .info span{opacity: 1;}
.ensure dl dd:hover .info .txt{bottom: 50px;}
.ensure dl dd:hover .info .txt p{opacity: 1;}

/* 响应式 */
@media (max-width: 1680px) {
    .service li{padding: 25px; height: 250px;}
    .service li img{height: 38px;}
    .service li p,.service li a{font-size: 14px;}
    .step li{width: calc((100% - 200px) / 5);}
    .step li .dt{height: 68px; padding: 0 15px; border-radius: 6px;}
    .step li .dt h2{font-size: 40px;}
    .step li .dt .info{margin-left: 10px;}
    .step li .dt .info p{font-size: 12px; line-height: 12px;}
    .step li .dd{height: 260px; padding: 20px 0; border-radius: 6px;}
    .step .right-img{width: 30px; height: 8px; margin-top: 30px;}
    .ensure dl dd .info .txt{left: 35px; bottom: -70px;}
    .ensure dl dd .info .txt b{font-size: 22px; line-height: 22px;}
    .ensure dl dd .info .txt p{font-size: 14px;}
    .ensure dl dd:hover .info .txt{bottom: 35px;}
}