.j-sec1 img, article {
    width: 100%
}

.j-sec3 ul, .j-sec4 ul, .j-sec5 ul, article {
    overflow: hidden
}

article {

}

.j-sec1 .sec-banner p a {
    color: #fff;
}

.sec-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff
}

.j-sec2, .j-sec2 a, .j-sec3 .title h2, .j-sec3 .title p, .j-sec3 ul li {
    color: #0054a7
}

.sec-banner p {
    width: 100%;
    max-width: 1200px;
    margin-top: 20px;
    font-weight: lighter
}

.j-sec2 {
    background-color: #fff
}

.j-sec3, .j-sec3 ul li {
    background-color: #e6e6e6
}

.j-sec2 p {
    margin-bottom: 20px;
    padding-top: 10px
}

.j-sec2 p:first-child {
    display: none
}

.j-sec2 a {
    font-weight: 600
}

.j-sec3 img {
    display: inline-block;
    width: 115px;
    margin: 0 auto
}

.j-sec3 .title p {
    margin-top: 20px
}

.j-sec3 ul {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.j-sec3 ul li {
    position: relative;
    height: 320px;
    min-height: 320px;
    width: 33.3333%;
    float: left
}

.j-sec3 ul li > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: .4s all ease;
    -o-transition: .4s all ease;
    transition: .4s all ease
}

.j-sec3 ul li .before {
    z-index: 3;
    bottom: 0
}

.j-sec3 ul li .before p {
    margin-bottom: 10px
}

.j-sec4 .mw, .j-sec4 img, .j-sec4 ul, .j-sec5 img {
    margin: 0 auto
}

.j-sec3 ul li .hover {
    opacity: 0
}

.j-sec3 ul li .before div, .j-sec3 ul li .hover {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%
}

.j-sec3 ul li:hover .before {
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
    transform: rotate3d(0, 1, 0, -90deg)
}

.j-sec3 ul li:hover .hover {
    opacity: 1
}

.j-sec3 ul li:nth-child(3), .j-sec3 ul li:nth-child(7) {
    background-color: #8dc11f
}

.j-sec3 ul li:nth-child(1), .j-sec3 ul li:nth-child(9) {
    background-color: #0054a7
}

.j-sec3 ul li:nth-child(5) {
    background-color: #00a098
}

.j-sec3 ul li:nth-child(2n+1) {
    color: #fff !important
}

.j-sec4 .title h2, .j-sec4 .title p, .j-sec4 ul li {
    color: #00a29a
}

.j-sec4 .mw {
    max-width: 750px;
    min-width: 320px;
    width: 60%;
    padding: 0 20px
}

.j-sec4 .title {
    padding-top: 30px
}

.j-sec4 .title p {
    padding-top: 10px
}

.j-sec4 ul {
    /*width: 80%*/
}

.j-sec4 ul li {
    padding-top: 30px
}

.j-sec5 .title h2, .j-sec5 .title p, .j-sec5 ul {
    color: #fff
}

.j-sec5 {
    background-color: #0054a7
}

.j-sec5 img {
    display: inline-block;
    width: 124px
}

.j-sec5 .title {
    padding: 30px 0
}

.j-sec5 .title h2 {
    margin-bottom: 10px
}

.j-sec5 ul {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.j-sec5 ul li {
    float: left;
    width: 33.333%;
    padding: 20px
}

.j-sec5 ul p:last-child {
    margin-top: 10px
}

.sec-banner p {
    /* display: block !important; */
}

@media screen and (max-width: 750px) {
    .j-sec3 ul li .before, .sec-banner p {
        display: none;
    }

    .j-sec1 .sec-banner p {
        display: block;
        font-size: 12px;
        width: 200px;
        margin-top: 0;
    }

    .j-sec5 ul li, section .p {
        width: 100%
    }

    .j-sec3 ul li .hover {
        opacity: 1
    }

    .j-sec3 ul li .hover p {
        padding: 0 10px
    }

    .j-sec2 {
        padding-left: 10px !important;
        padding-right: 10px !important
    }

    .j-sec2 p:first-child {
        display: block
    }

    .j-sec3 ul li {
        height: 250px;
        min-height: 250px;
        padding: 5px
    }

    .j-sec3 ul li p {
        font-size: 12px
    }

    .j-sec5 h4, .j-sec5 p {
        font-size: 14px
    }
}