﻿
img { max-width: 100%; }
.banner { width: 100%; margin: 0px auto; }
    .banner > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }


nav.breadbig { width: 100%; background-color: #f7f7f7; font-size: 14px; color: #999; margin: 0px auto; }
    nav.breadbig > .conn { display: flex; width: 100%; flex-wrap: wrap; max-width: 1920px; padding: 20px 6%; margin: 0px auto; }
        nav.breadbig > .conn > .l { flex: 1; }
            nav.breadbig > .conn > .l > a { font-size: 14px; color: #999; }
        nav.breadbig > .conn > .r { text-align: right; }
            nav.breadbig > .conn > .r > a { margin-left: 4rem; font-size: 1.125rem; color: #363636; position: relative; line-height: 1; }
                nav.breadbig > .conn > .r > a.action { color: #f08200 }
                    nav.breadbig > .conn > .r > a.action:after { position: absolute; margin: 0px auto; bottom: -20px; left: 0px; right: 0px; content: ""; height: 2px; width: 18px; background-color: #f08200 }


@media only screen and (max-width:1280px) {
    nav.breadbig > .conn { padding: 20px 3%; }
}

@media only screen and (max-width:1024px) {
    nav.breadbig > .conn { padding-left: 1rem; padding-right: 1rem; }
}

@media only screen and (max-width:768px) {
    nav.breadbig > .conn > .r > a { margin-left: 3rem; }
}

@media only screen and (max-width:480px) {
    nav.breadbig > .conn { padding-top: 10px; padding-bottom: 10px }
        nav.breadbig > .conn > .l { flex: none; width: 100%; margin-bottom: 1.5rem; }
        nav.breadbig > .conn > .r { width: 100%; text-align: center; }
            nav.breadbig > .conn > .r > a { margin-left: 2rem; margin-right: 2rem; }
                nav.breadbig > .conn > .r > a.action:after { bottom: -10px; }
}





.title { width: 100%; }
    .title > b { color: #232323; font-size: 2rem; font-weight: 400; position: relative; }
        .title > b::after { position: absolute; content: ""; border-bottom: solid 2px #f08200; width: 28px; left: 0px; bottom: -1.25rem; }

.titlebai > b { color: #fff; }

@media only screen and (max-width:1400px) {
    .title > b { font-size: 1.85rem; }
}

@media only screen and (max-width:1280px) {
    .title > b { font-size: 1.6rem; }
}

@media only screen and (max-width:1024px) {
    .title > b { font-size: 1.45rem; }
}

@media only screen and (max-width:960px) {
    .title > b { font-size: 1.3rem; }
}

@media only screen and (max-width:768px) {
    .title > b { font-size: 1.15rem; }
}

@media only screen and (max-width:480px) {
    .title > b { font-size: 1rem; }
}





.contentbig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; }
    .contentbig > .conn { width: 100%; padding: 6.25rem 0px; }
        .contentbig > .conn > .text { width: 100%; margin-top: 3.25rem; background-color: #fff; }
            .contentbig > .conn > .text > img { width: 100%; margin: 0px auto; object-fit: cover; min-height: 200px; }
            .contentbig > .conn > .text > p { line-height: 1.8; color: #666; font-size: 1rem; word-break: break-all }
                .contentbig > .conn > .text > p > b { display: block; padding: 1rem 0px; color: #f08200; font-size: 1.25rem; font-weight: 400; }

@media only screen and (max-width:1280px) {
    .contentbig { padding: 0px 3%; }
}

@media only screen and (max-width:1024px) {
    .contentbig { padding-left: 1rem; padding-right: 1rem; }
        .contentbig > .conn { padding: 4rem 0px; }
            .contentbig > .conn > .text { margin-top: 3rem; }
}

@media only screen and (max-width:768px) {
    .contentbig > .conn { padding: 2rem 0px; }
}


.contentnumbig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; background-color: #f7f7f7; }
    .contentnumbig > .box { width: 100%; }
        .contentnumbig > .box > ul { width: 100%; padding: 2.5rem 0px; display: flex; flex-wrap: wrap; flex-wrap: wrap; border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; }
            .contentnumbig > .box > ul > li { width: 25%; display: flex; align-items: center; position: relative; }
                .contentnumbig > .box > ul > li > .l { flex: 1; }
                    .contentnumbig > .box > ul > li > .l > p { color: #999999; font-size: 14px; }
                        .contentnumbig > .box > ul > li > .l > p.p1 { color: #003686; font-size: 1.25rem; }
                            .contentnumbig > .box > ul > li > .l > p.p1 > span { font-size: 2.85rem; }
                .contentnumbig > .box > ul > li > .r { margin-right: 1.25rem; }
                .contentnumbig > .box > ul > li:after { position: absolute; content: ""; right: 0px; height: 48px; width: 1px; background-color: #e5e5e5 }
                .contentnumbig > .box > ul > li:last-child:after { background-color: #fff }
                .contentnumbig > .box > ul > li:nth-child(2) { padding-left: 1.25rem; }
                .contentnumbig > .box > ul > li:nth-child(3) { padding-left: 1.25rem; }
                .contentnumbig > .box > ul > li:nth-child(4) { padding-left: 1.25rem; }
                    .contentnumbig > .box > ul > li:nth-child(4) > .r { margin-right: 0rem; }

@media only screen and (max-width:1280px) {
    .contentnumbig { padding: 0px 3%; }
}

@media only screen and (max-width:1024px) {
    .contentnumbig { padding-left: 1rem; padding-right: 1rem; }
}

@media only screen and (max-width:768px) {
    .contentnumbig > .box > ul { padding: 1.5rem 0px; }
        .contentnumbig > .box > ul > li { width: 50%; margin-bottom: 1rem; }
            .contentnumbig > .box > ul > li:after { position: absolute; content: ""; right: 0px; height: 48px; width: 1px; background-color: #fff }
            .contentnumbig > .box > ul > li:nth-child(2) { padding-left: 0rem; }
                .contentnumbig > .box > ul > li:nth-child(2) > .r { margin-right: 0rem; }
            .contentnumbig > .box > ul > li:nth-child(3) { padding-left: 0rem; }
            .contentnumbig > .box > ul > li:nth-child(4) { padding-left: 0rem; }
}






.wenhuabig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; }
    .wenhuabig > .conn { width: 100%; padding: 6.25rem 0px 0px 0px; }
        .wenhuabig > .conn > .text { width: 100%; margin-top: 3.25rem; background-color: #fff; }
            .wenhuabig > .conn > .text > ul { width: 100%; display: flex; }
                .wenhuabig > .conn > .text > ul > li { flex: 1; padding: 2rem; }
                    .wenhuabig > .conn > .text > ul > li.item1 { background-color: #003686; background-image: url('../images/about/bg1.png'); background-position: 90% bottom; background-repeat: no-repeat; }
                    .wenhuabig > .conn > .text > ul > li.item2 { background-color: #194a92; background-image: url('../images/about/bg2.png'); background-position: 90% bottom; background-repeat: no-repeat; }
                    .wenhuabig > .conn > .text > ul > li.item3 { background-color: #335e9e; background-image: url('../images/about/bg3.png'); background-position: 90% bottom; background-repeat: no-repeat; }
                    .wenhuabig > .conn > .text > ul > li > b { display: block; font-weight: 400; color: #fff; font-size: 1.25rem; margin-bottom: 1rem; margin-top: 0.5rem; }
                    .wenhuabig > .conn > .text > ul > li > p { color: #fff; font-size: 1rem; }

            .wenhuabig > .conn > .text > .video { position: relative; width: 100%; height: 600px; min-height: 400px; background-color: #fff; margin: 0px auto; }
                .wenhuabig > .conn > .text > .video > video { width: 100%; height: 100%; object-fit: cover; border-style: none; background-color: #fff; }


@media only screen and (max-width:1280px) {
    .wenhuabig { padding: 0px 3%; }
}

@media only screen and (max-width:1024px) {
    .wenhuabig { padding-left: 1rem; padding-right: 1rem; }
        .wenhuabig > .conn { padding: 4rem 0px; }
}

@media only screen and (max-width:768px) {
    .wenhuabig > .conn { padding: 2rem 0px; }
        .wenhuabig > .conn > .text > ul > li.item1 { background-size: 50%; }
        .wenhuabig > .conn > .text > ul > li.item2 { background-size: 50%; }
        .wenhuabig > .conn > .text > ul > li.item3 { background-size: 50%; }
}

@media only screen and (max-width:480px) {
    .wenhuabig > .conn > .text > ul { flex-wrap: wrap; }
        .wenhuabig > .conn > .text > ul > li { flex: none; width: 100%; }
            .wenhuabig > .conn > .text > ul > li.item1 { background-size: 20%; }
            .wenhuabig > .conn > .text > ul > li.item2 { background-size: 20%; }
            .wenhuabig > .conn > .text > ul > li.item3 { background-size: 20%; }
}



.wenhuabig2 { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; }
    .wenhuabig2 > .conn { width: 100%; padding: 3rem 0px 6.25rem 0px; }
        .wenhuabig2 > .conn > .text > .box { width: 100%; }
            .wenhuabig2 > .conn > .text > .box > .item { width: 100%; text-align: left; padding: 1rem; color: #666; box-shadow: 2px 2px 3px 3px rgba(0,0,0,.05); margin-bottom: 1rem; border-radius: 10px; }
                .wenhuabig2 > .conn > .text > .box > .item > b { display: block; font-size: 1.25rem; color: #f08200; margin-bottom: 1rem; }
                .wenhuabig2 > .conn > .text > .box > .item > p { text-align: left; font-size: 1rem; }




.gsrybig { width: 100%; max-width: 1920px; margin: 0px auto; }
.mySwiper { height: 100vh; position: relative; min-height: 700px; }
.slideitem { width: 100%; height: 100%; position: relative; padding: 0px 6%; display: flex; align-items: center; }
    .slideitem:after { content: ""; position: absolute; top: 50%; background-color: #bfbfbf; height: 1px; left: 0px; right: 0px; width: 100%; }
    .slideitem b { font-size: 1.25rem; color: #363636; }


.sbox { height: 1px; position: relative; }
    .sbox.s1 { width: 15%; }
    .sbox.s2 { width: 4%; }
    .sbox.s3 { width: 4%; }
    .sbox.s4 { width: 10%; }
    .sbox.s4a { width: 4%; }
    .sbox.s5 { width: 6%; }
    .sbox.s6 { width: 10%; }
    .sbox.s7 { width: 7%; }
    .sbox.s8 { width: 6%; }
    .sbox.s9 { width: 6%; }
    .sbox.s10 { width: 6%; }
    .sbox.s11 { width: 6%; }
    .sbox.s12 { flex: 1; }


.sbox1 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 60px 10px; color: #666; width: 200px; }
    .sbox1::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox2 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 240px 10px; color: #666; width: 300px; }
    .sbox2::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox3 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 100px 10px; color: #666; width: 300px; }
    .sbox3::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox4 { position: absolute; top: 0%; border-left: solid 1px #bfbfbf; padding: 30px 10px 0px 10px; color: #666; width: 200px; }
    .sbox4::after { z-index: 1; content: ""; background-color: #fff; position: absolute; top: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }


.sbox4a { position: absolute; top: 0%; border-left: solid 1px #bfbfbf; padding: 160px 10px 0px 10px; color: #666; width: 300px; }
    .sbox4a::after { z-index: 1; content: ""; background-color: #fff; position: absolute; top: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox5 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 40px 10px; color: #666; width: 300px; }
    .sbox5::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox6 { position: absolute; top: 0%; border-left: solid 1px #bfbfbf; padding: 60px 10px 0px 10px; color: #666; width: 300px; }
    .sbox6::after { z-index: 1; content: ""; background-color: #fff; position: absolute; top: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox7 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 240px 10px; color: #666; width: 300px; }
    .sbox7::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox8 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 60px 10px; color: #666; width: 200px; }
    .sbox8::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox9 { position: absolute; top: 0%; border-left: solid 1px #bfbfbf; padding: 160px 10px 0px 10px; color: #666; width: 300px; }
    .sbox9::after { z-index: 1; content: ""; background-color: #fff; position: absolute; top: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }

.sbox10 { position: absolute; top: 0%; border-left: solid 1px #bfbfbf; padding: 60px 10px 0px 10px; color: #666; width: 300px; }
    .sbox10::after { z-index: 1; content: ""; background-color: #fff; position: absolute; top: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }


.sbox11 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 200px 10px; color: #666; width: 300px; }
    .sbox11::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }


.sbox12 { position: absolute; bottom: 0%; border-left: solid 1px #bfbfbf; padding: 0px 10px 60px 10px; color: #666; width: 200px; }
    .sbox12::after { z-index: 1; content: ""; background-color: #fff; position: absolute; bottom: -6px; left: -7px; width: 10px; height: 10px; border-radius: 5px; border: solid 1px #ccc; }



.parallax-bg { position: absolute; left: 0; top: 0; width: 130%; height: 100%; background-size: cover; background-position: center; background-image: url(/static/images/about/c1.png); }
.swiper-button-next, .swiper-button-prev { color: #666666 }

@media only screen and (max-width:1280px) {
    .slideitem { padding: 0px 3%; }
        .slideitem b { font-size: 1.5rem; }
}

@media only screen and (max-width:1024px) {
    .mySwiper { min-height: auto }
    .slideitem { padding: 0px 1rem 1rem 1rem; flex-wrap: wrap; }
        .slideitem:after { background-color: none; height: 0px; }

    .sbox { height: auto; }
        .sbox.s1 { width: 50%; }
        .sbox.s2 { width: 50%; }
        .sbox.s3 { width: 50%; }
        .sbox.s4 { width: 50%; }
        .sbox.s4a { width: 50%; }
        .sbox.s5 { width: 50%; }
        .sbox.s6 { width: 50%; }
        .sbox.s7 { width: 50%; }
        .sbox.s8 { width: 50%; }
        .sbox.s9 { width: 50%; }
        .sbox.s10 { width: 50%; }
        .sbox.s11 { width: 50%; }
        .sbox.s12 { flex: none; width: 50%; }

    .sbox1 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox2 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox3 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox4 { width: 100%; bottom: 0%; top: auto; padding: 0px 10px 10px 10px; position: relative; }
        .sbox4::after { bottom: -6px; top: initial; }
    .sbox4a { width: 100%; bottom: 0%; top: auto; padding: 0px 10px 10px 10px; position: relative; }
        .sbox4a::after { bottom: -6px; top: initial; }

    .sbox5 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox6 { width: 100%; bottom: 0%; top: auto; padding: 0px 10px 10px 10px; position: relative; }
        .sbox6::after { bottom: -6px; top: initial; }

    .sbox7 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox8 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox9 { width: 100%; bottom: 0%; top: auto; padding: 0px 10px 10px 10px; position: relative; }
        .sbox9::after { bottom: -6px; top: initial; }
    .sbox10 { width: 100%; bottom: 0%; top: auto; padding: 0px 10px 10px 10px; position: relative; }
        .sbox10::after { bottom: -6px; top: initial; }
    .sbox11 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
    .sbox12 { width: 100%; padding: 0px 10px 10px 10px; position: relative; }
}

@media only screen and (max-width:768px) {
    .slideitem b { font-size: 1.25rem; }
}
