/*

@Author Xieliuhao
@Create_Time 2020/5/10 3:13 下午
@Tip 

*/

body {
    margin: 0;
    padding: 0;
}

.box-1 {
    display: grid;
    background: #e0f2f1;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    justify-items: center;
}

.box-1 .img {
    grid-row-start: 5;
    grid-row-end: 9;
    grid-column-start: 5;
    grid-column-end: 7;
}

.box-1 .img img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 4px 4px 4px #80808029;
}

.box-1 .text {
    width: 100%;
    height: 100%;
    grid-row-start: 5;
    grid-row-end: 9;
    grid-column-start: 7;
    grid-column-end: 11;
    color: darkslategrey;
    justify-self: left;
}

.box-1 .text h1 {
    margin-left: 32px;
}

.box-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    justify-items: center;
}

.box-2 .img {
    width: 100%;
    height: 100%;
    grid-row-start: 3;
    grid-row-end: 11;
    grid-column-start: 4;
    grid-column-end: 7;
    text-align: center;
}

.box-2 .img img {
    width: auto;
    height: 100%;
}

.box-2 .text {
    grid-row-start: 4;
    grid-row-end: 7;
    grid-column-start: 7;
    grid-column-end: 12;
    color: darkslategrey;
}

.box-2 .download-btn {
    display: none;
    grid-row-start: 6;
    grid-row-end: 7;
    grid-column-start: 5;
    grid-column-end: 6;
    padding: 8px 24px;
    border-radius: 4px;
    background: #4caf50;
    align-self: start;
    justify-self: start;
}

.box-2 .download-btn a {
    color: white;
    text-decoration: none
}

.box-3 {
    text-align: center;
}

.box-3 h5 {
    color: #455a64;
}

.box-3 a {
    text-decoration: none
}