
section.header {
    background-image: url(../image/header4.jpg);
}

section.info {
    background-color: #f8f8f8;
    background-image: url(../image/bg.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
    text-align: center;
    padding-top: 7rem;
    padding-bottom: 12rem;
    position: relative;
}

section.info:before {
    content: 'JADY';
    display: block;
    font-family: Arial;
    font-weight: bold;
    font-size: 10rem;
    color: #e6e6e6;
    transform: rotate(90deg);
    position: absolute;
    left: 50%;
    margin-left: 18.75rem;
    top: 16rem;
}

section.info ul {
    width: 60rem;
    margin: auto;
    background: #fff;
    box-shadow: 1rem 1.75rem 2.75rem rgba(0, 47, 112, 0.17);
    position: relative;
    z-index: 10;
}

section.info ul li {
    display: inline-block;
    vertical-align: top;
    width: 19rem;
    box-sizing: border-box;
    text-align: left;
    padding: 9rem 4rem 4rem;
    position: relative;
}

section.info ul li h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

section.info ul li h2, section.info ul li p {
    position: relative;
    z-index: 2;
}

section.info ul li:before {
    font-size: 12rem;
    font-family: Arial;
    font-weight: bold;
    line-height: 1;
    color: #f7f9fd;
    position: absolute;
    left: 3.5rem;
    top: 3rem;
    z-index: 1;
}

section.info ul li:after {
    font-family: Arial;
    position: absolute;
    left: 4rem;
    top: 7rem;
    z-index: 2;
}

section.info ul li.i1:before {
    content: '01';
}

section.info ul li.i2:before {
    content: '02';
}

section.info ul li.i3:before {
    content: '03';
}

section.info ul li.i1:after {
    content: '01 ——';
}

section.info ul li.i2:after {
    content: '02 ——';
}

section.info ul li.i3:after {
    content: '03 ——';
}

section.info > p {
    font-size: 1.5rem;
    font-weight: lighter;
    width: 54rem;
    color: #fff;
    margin: auto;
    padding: 2rem 0;
    background-color: #004199;
    position: relative;
}

section.info > p:before {
    content: '';
    display: block;
    width: 100rem;
    height: 15rem;
    background: #004199;
    position: absolute;
    right: 100%;
    bottom: 0;
    z-index: 1;
}

@media (max-width: 920px) {
    section.info {
        padding-bottom: 0;
    }

    section.info:before {
        display: none;
    }

    section.info ul {
        box-shadow: 0 1.5rem 2.75rem rgba(0, 47, 112, 0.17);
    }

    section.info > p {
        width: 100%;
        padding-top: 12rem;
        margin-top: -10rem;
    }

    section.info > p:before {
        display: none;
    }
}

@media (max-width: 780px) {
    section.info ul {
        width: 48rem;
    }

    section.info ul li {
        width: 16rem;
        padding: 7rem 2rem 2rem;
    }

    section.info ul li:before {
        font-size: 12rem;
        font-family: Arial;
        font-weight: bold;
        line-height: 1;
        color: #f7f9fd;
        position: absolute;
        left: 1.5rem;
        top: 1rem;
        z-index: 1;
    }

    section.info ul li:after {
        font-family: Arial;
        position: absolute;
        left: 2rem;
        top: 5rem;
        z-index: 2;
    }
}

@media (max-width: 620px) {
    section.info {
        padding-top: 0;
    }

    section.info ul {
        width: 100%;
        padding: 3rem 0;
    }

    section.info ul li {
        width: 100%;
        display: block;
        padding: 3rem 10rem 2rem;
    }

    section.info ul li:before {
        font-size: 8rem;
        left: 9rem;
        top: 0rem;
    }

    section.info ul li:after {
        left: 10rem;
        top: 1rem;
    }

    section.info > p {
        width: 100%;
        padding-top: 2rem;
        margin-top: 0;
    }

    section.info > p:before {
        display: none;
    }
}

@media (max-width: 440px) {
    section.info ul li {
        padding: 3rem 3rem 2rem;
    }

    section.info ul li:before {
        left: 3rem;
        top: 0rem;
    }

    section.info ul li:after {
        left: 3rem;
        top: 1rem;
    }
}

/*# sourceMappingURL=service.css.map */
