img { max-width: 100%; }
.video { position: relative; width: 100%; height: 100vh; min-height: 900px; background-color: #fff; margin: 0px auto; }
    .video > video { width: 100%; height: 100%; object-fit: cover; border-style: none; background-color: #fff; }
        .video > video:focus { outline: none }


    .video > .text { z-index: 1; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        .video > .text > .subtitle { flex: 1; font-size: 3rem; color: #eee; display: flex; align-items: center; justify-content: center; }
        .video > .text > .down { margin-bottom: 30px; }
            .video > .text > .down > .mouse { position: relative; border: solid 1px #fff; height: 10px; width: 30px; height: 50px; border: 1px solid #eee; border-radius: 60px; }
                .video > .text > .down > .mouse::before { content: ''; width: 10px; height: 10px; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background-color: #eee; border-radius: 50%; opacity: 1; animation: wheel 1s infinite; -webkit-animation: wheel 1s infinite; }

@keyframes wheel {
    to { opacity: 0; top: 30px }
}

@-webkit-keyframes wheel {
    to { opacity: 0; top: 30px }
}


@media only screen and (max-width:760px) {
    .video { min-height: 500px; }
        .video > .text > .subtitle { font-size: 2rem; }
}


.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; }
}

.aboutbig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; background-image: url('../images/home/bg1.jpg'); background-position: top center; background-repeat: no-repeat; }
    .aboutbig > .conn { width: 100%; padding: 6.25rem 0px; }
        .aboutbig > .conn > .text { width: 100%; padding: 4rem; margin-top: 3.25rem; border-radius: 15px; background-color: #fff; }
            .aboutbig > .conn > .text > .box1 { width: 100%; display: flex; flex-wrap: wrap; }
                .aboutbig > .conn > .text > .box1 > .left { flex: 1; padding-right: 8%; color: #666 }
                    .aboutbig > .conn > .text > .box1 > .left > p { line-height: 2; margin-bottom: 2rem; font-size: 1rem; }
                    .aboutbig > .conn > .text > .box1 > .left > a { font-size: 14px; padding: 0px; height: 40px; line-height: 40px; display: inline-block; padding: 0px 2.5rem; background-color: #f08200; border-radius: 20px; color: #fff; }
                .aboutbig > .conn > .text > .box1 > .right { width: 46%; }
                    .aboutbig > .conn > .text > .box1 > .right > img { width: 100%; object-fit: cover; }

            .aboutbig > .conn > .text > .box2 { width: 100%; margin-top: 2.5rem; }
                .aboutbig > .conn > .text > .box2 > 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; }
                    .aboutbig > .conn > .text > .box2 > ul > li { width: 25%; display: flex; align-items: center; position: relative; }
                        .aboutbig > .conn > .text > .box2 > ul > li > .l { flex: 1; }
                            .aboutbig > .conn > .text > .box2 > ul > li > .l > p { color: #999999; font-size: 14px; }
                                .aboutbig > .conn > .text > .box2 > ul > li > .l > p.p1 { color: #003686; font-size: 1.25rem; }
                                    .aboutbig > .conn > .text > .box2 > ul > li > .l > p.p1 > span { font-size: 2.85rem; }
                        .aboutbig > .conn > .text > .box2 > ul > li > .r { margin-right: 1.25rem; }

                        .aboutbig > .conn > .text > .box2 > ul > li:after { position: absolute; content: ""; right: 0px; height: 48px; width: 1px; background-color: #e5e5e5 }
                        .aboutbig > .conn > .text > .box2 > ul > li:last-child:after { background-color: #fff }
                        .aboutbig > .conn > .text > .box2 > ul > li:nth-child(2) { padding-left: 1.25rem; }
                        .aboutbig > .conn > .text > .box2 > ul > li:nth-child(3) { padding-left: 1.25rem; }
                        .aboutbig > .conn > .text > .box2 > ul > li:nth-child(4) { padding-left: 1.25rem; }
                            .aboutbig > .conn > .text > .box2 > ul > li:nth-child(4) > .r { margin-right: 0rem; }

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



@media only screen and (max-width:1024px) {
    .aboutbig > .conn { padding: 4rem 0px; }
        .aboutbig > .conn > .text { padding: 2rem; margin-top: 3rem; }
            .aboutbig > .conn > .text > .box1 > .left { padding-right: 4%; }
                .aboutbig > .conn > .text > .box1 > .left > a { height: 32px; line-height: 32px; border-radius: 16px; padding: 0px 2rem; }
}


@media only screen and (max-width:768px) {
    .aboutbig { padding-left: 1rem; padding-right: 1rem; }
        .aboutbig > .conn { padding: 2rem 0px; }
            .aboutbig > .conn > .text > .box1 { flex-direction: column-reverse; }
                .aboutbig > .conn > .text > .box1 > .left { width: 100%; flex: none; padding-right: 0%; }
                .aboutbig > .conn > .text > .box1 > .right { width: 100%; margin-bottom: 1rem; }

            .aboutbig > .conn > .text > .box2 > ul { padding: 1.5rem 0px; }
                .aboutbig > .conn > .text > .box2 > ul > li { width: 50%; margin-bottom: 1rem; }
                    .aboutbig > .conn > .text > .box2 > ul > li:after { position: absolute; content: ""; right: 0px; height: 48px; width: 1px; background-color: #fff }
                    .aboutbig > .conn > .text > .box2 > ul > li:nth-child(2) { padding-left: 0rem; }
                        .aboutbig > .conn > .text > .box2 > ul > li:nth-child(2) > .r { margin-right: 0rem; }
                    .aboutbig > .conn > .text > .box2 > ul > li:nth-child(3) { padding-left: 0rem; }
                    .aboutbig > .conn > .text > .box2 > ul > li:nth-child(4) { padding-left: 0rem; }
}






.prolistbig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; background-image: url('../images/home/bg2.jpg'); background-size: cover; background-position: top center; background-repeat: no-repeat; }
    .prolistbig > .conn { width: 100%; padding: 6.25rem 0px; position: relative; }
        .prolistbig > .conn > .text { width: 100%; position: relative; }

.procids { position: absolute; top: -3rem; width: 100%; right: 0px; left: 0px; text-align: right }
.prolist { padding: 3rem 0px; }

.mySwiper { width: 50%; display: inline-block; height: 50px; box-sizing: border-box; padding: 5px 0; color: #fff; }
    .mySwiper .swiper-slide-thumb-active { color: #f08200; position: relative; }
        .mySwiper .swiper-slide-thumb-active > a { border-radius: 20px; color: #f08200; position: relative; background-color: #fff }
        .mySwiper .swiper-slide-thumb-active::after { content: ""; height: 2px; width: 30px; bottom: -5px; position: absolute; left: calc(50% - 15px); }
.my-slide { text-align: right; font-size: 1.25rem; cursor: pointer; position: relative; }
    .my-slide > a { font-size: 1.25rem; color: #fff; padding: 5px 20px; display: inline-block; }

.proslide { width: 100%; padding: 2rem 0px }
    .proslide > ul { display: flex; justify-content: space-between; }
        .proslide > ul > li { width: 23%; margin: 0% 0px; border-radius: 10px; background-color: #fff; padding: 1rem; -moz-transition: all, 0.5s; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s }
            .proslide > ul > li img { margin: 0px auto; }
            .proslide > ul > li div { margin: 1rem auto; }
                .proslide > ul > li div > b { display: block; padding: 10px 0px; font-weight: 400; color: #232323; font-size: 1.125rem; -moz-transition: all, 0.5s; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s }
                .proslide > ul > li div > p { color: #999999; font-size: 14px; }
            .proslide > ul > li:hover { transform: translateY(-30px); }
                .proslide > ul > li:hover div > b { color: #f08200 }


@media only screen and (max-width:1600px) {
    .mySwiper { width: 60%; }
}

@media only screen and (max-width:1366px) {
    .mySwiper { width: 70%; }
    .my-slide > a { font-size: 1rem; }
}

@media only screen and (max-width:1280px) {
    .prolistbig { padding: 0px 3%; }
    .mySwiper { width: 80%; height: 40px; }
    .procids { top: -2rem; }
}

@media only screen and (max-width:1024px) {
    .prolistbig > .conn { padding: 4rem 0px; }
    .mySwiper { width: 80%; }
}


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

    .my-slide { text-align: center; }
    .procids { top: 2rem; }
    .mySwiper { width: 100%; height: 60px; }
        .mySwiper .swiper-slide-thumb-active > a { border-radius: 0px; }
    .my-slide > a { padding: 3px 3px; font-size: 14px; }
    .prolist { padding-top: 6rem; padding-bottom: 0rem; }
    .proslide > ul { flex-wrap: wrap; }
        .proslide > ul > li { width: 48%; margin-bottom: 2rem; }
            .proslide > ul > li:hover { transform: translateY(0px); }
}




.contactbig { width: 100%; padding: 0px 6%; max-width: 1920px; margin: 0px auto; background-position: top center; background-repeat: no-repeat; }
    .contactbig > .conn { width: 100%; padding: 6.25rem 0px; }

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

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


.contacttext { width: 100%; max-width: 1920px; position: relative; margin: 0px auto; }
    .contacttext > .addlist { width: 100%; }
.swiper-wrapper { width: 100%; }
.listslide { width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
    .listslide > img { width: 100%; height: 100%; min-height: 600px; object-fit: cover; }



.addrescids { width: 100%; padding: 0px 6%; position: absolute; bottom: 3rem; }
    .addrescids .add-wrapper { display: flex; align-items: stretch;   }
    .addrescids .add-slide { width: 25%; cursor: pointer;   }
        .addrescids .add-slide > .box { width: 95%; height: 100%;  margin: 0px auto; background-color: #fff; border-radius: 5px; padding: 1rem; }
            .addrescids .add-slide > .box > b { color: #232323; display: block; padding: 0px 0px 10px 0px; font-weight: 400; font-size: 1.125rem; }
            .addrescids .add-slide > .box > p { font-size: 14px; color: #666; }

.addSwiper1 { position: relative; }
    .addSwiper1 .swiper-slide-thumb-active { position: relative; }
        .addSwiper1 .swiper-slide-thumb-active > .box { background-color: #003686 }
            .addSwiper1 .swiper-slide-thumb-active > .box > b { color: #fff; }
            .addSwiper1 .swiper-slide-thumb-active > .box > p { color: #fff; }
                .addSwiper1 .swiper-slide-thumb-active > .box > p.add > img { content: url("/static/images/icon/ic1.png") }
                .addSwiper1 .swiper-slide-thumb-active > .box > p.email > img { content: url("/static/images/icon/ic2.png") }
                .addSwiper1 .swiper-slide-thumb-active > .box > p.tel > img { content: url("/static/images/icon/ic3.png") }
                .addSwiper1 .swiper-slide-thumb-active > .box > p.fax > img { content: url("/static/images/icon/ic4.png") }

@media only screen and ( max-width:1280px) {
    .addrescids { padding-left: 1rem; padding-right: 1rem; }
        .addrescids .add-slide { width: 33.33%; }
}



@media only screen and ( max-width:960px) {
    .addrescids .add-slide { width: 50%; }
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0px; left: 0; width: 100% }