/* ========================================
   我们的服务
======================================== */

.ys-service-section,
.ys-service-section *{
    box-sizing:border-box;
}

.ys-service-section{
    width:100%;
    background:#ffffff;
    padding:58px 28px 62px;
    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        Arial,
        sans-serif;
    color:#10253d;
}

.ys-service-container{
    max-width:1480px;
    margin:0 auto;
}


/* ========================================
   标题区域
======================================== */

.ys-service-header{
    text-align:center;
    margin-bottom:44px;
}

.ys-service-title{
    margin:0;
    font-size:40px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:2px;
    color:#10253d;
}

.ys-service-title-line{
    width:58px;
    height:3px;
    margin:18px auto 20px;
    background:#367bb7;
    border-radius:3px;
}

.ys-service-subtitle{
    margin:0;
    font-size:17px;
    line-height:1.8;
    color:#667b91;
}


/* ========================================
   四列卡片
======================================== */

.ys-service-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:24px;
}


/* 单张卡片 */

.ys-service-card{
    position:relative;
    background:#ffffff;

    border:1px solid #e7edf2;
    border-radius:10px;

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(31,67,100,.055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* 卡片轻微动效 */

.ys-service-card:hover{
    transform:translateY(-7px);

    border-color:#d9e4ed;

    box-shadow:
        0 16px 36px rgba(31,67,100,.11);
}


/* ========================================
   图片
======================================== */

.ys-service-photo{
    width:100%;
    height:330px;

    position:relative;
    overflow:hidden;

    margin:0;

    background:#edf2f5;

    border-radius:9px 9px 6px 6px;
}

.ys-service-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .55s ease;
}


/* 图片轻微放大 */

.ys-service-card:hover .ys-service-photo img{
    transform:scale(1.035);
}


/* ========================================
   卡片文字
======================================== */

.ys-service-content{
    padding:27px 32px 32px;
}


/* 编号 */

.ys-service-number{
    font-size:47px;
    line-height:1;
    font-weight:300;

    letter-spacing:-2px;

    color:#cbd8e4;

    margin-bottom:11px;
}

.ys-service-number-line{
    width:35px;
    height:2px;

    background:#cbd8e4;

    margin-bottom:18px;
}


/* 标题 */

.ys-service-name{
    margin:0 0 13px;

    font-size:23px;
    line-height:1.45;

    font-weight:700;

    color:#10253d;
}


/* 描述 */

.ys-service-desc{
    margin:0;

    font-size:15px;
    line-height:1.85;

    color:#62778c;
}


/* ========================================
   平板
======================================== */

@media(max-width:1200px){

    .ys-service-grid{
        grid-template-columns:repeat(2,1fr);
        gap:26px;
    }

    .ys-service-photo{
        height:340px;
    }
}


/* ========================================
   手机
======================================== */

@media(max-width:700px){

    .ys-service-section{
        padding:42px 15px 44px;
    }

    .ys-service-header{
        margin-bottom:32px;
    }

    .ys-service-title{
        font-size:30px;
    }

    .ys-service-title-line{
        width:48px;
        margin:14px auto 16px;
    }

    .ys-service-subtitle{
        font-size:14px;
        padding:0 10px;
    }

    .ys-service-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .ys-service-photo{
        height:310px;
    }

    .ys-service-content{
        padding:22px 25px 27px;
    }

    .ys-service-number{
        font-size:40px;
    }

    .ys-service-name{
        font-size:20px;
    }

    .ys-service-desc{
        font-size:14px;
    }
}