@font-face { font-family: 'BebasKai'; src: url('/skin/fonts/BebasKai_2.ttf'); font-style: normal }
@font-face { font-family: 'IBMPlexSans-Regular'; src: url('/skin/fonts/IBMPlexSans-Regular.ttf'); font-style: normal }


.header { max-width: 1920px }
img { max-width: 100%; }
.video { text-align: center; border-style: none; position: relative; width: 100%; max-height: 1080px; height: 100vh; min-height: 600px; background-color: #fff; margin: 0px auto; }
    .video > img { max-width: 1920px; width: 100%; height: 100%; object-fit: cover; margin: 0px auto; }
    .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 > .box { text-align: left; max-width: 1800px; padding: 0px 10%; width: 100%; flex: 1; display: flex; align-items: center; }
            .video > .text > .box > .bl { flex: 1; max-width: 675px; }
                .video > .text > .box > .bl > p { font-size: 5rem; color: #fff; line-height: 1.15; font-family: BebasKai; }
                    .video > .text > .box > .bl > p > i { font-style: normal; background-color: #e50112; padding: 0px 10px; }
                .video > .text > .box > .bl > ul.links { max-width: 350px; text-align: left; display: flex; flex-wrap: wrap; margin-top: 2rem; align-items: stretch; }
                    .video > .text > .box > .bl > ul.links > li { width: 100%; margin-bottom: 1rem; text-align: left; }
                        .video > .text > .box > .bl > ul.links > li:last-child { margin-bottom: 0rem; }
                        .video > .text > .box > .bl > ul.links > li > a { width: 100%; font-family: "IBMPlexSans-Regular"; position: relative; display: inline-block; border-radius: 20px; height: 40px; line-height: 40px; padding: 0px 4rem; color: #000; background-color: #fff; font-size: 1.3rem; }
                            .video > .text > .box > .bl > ul.links > li > a > img { position: absolute; right: 20px; top: 8px; }


        .video > .text > .down { margin-bottom: 120px; height: 3.75rem; width: 3.75rem; border: 0.625rem solid rgba(255,255,255,0.6); border-radius: 60px; }
            .video > .text > .down > .mouse { position: relative; height: 2.5rem; width: 2.5rem; background-color: #fff; border-radius: 40px; }
                .video > .text > .down > .mouse::before { content: ''; width: 0.625rem; height: 0.625rem; position: absolute; top: 0.625rem; left: 50%; transform: translateX(-50%); background-color: #333; border-radius: 50%; opacity: 1; animation: wheel 1s infinite; -webkit-animation: wheel 1s infinite; }

@media only screen and (max-width:1600px) {
    .video > .text > .box > .bl > p { font-size: 4.4rem; }
}

@media only screen and (max-width:1440px) {
    .video > .text > .box > .bl > p { font-size: 4rem; }
}

@media only screen and (max-width:1366px) {
    .video > .text > .box > .bl > p { font-size: 3.8rem; }
}

@media only screen and (max-width:1280px) {
    .video > .text > .box > .bl > p { font-size: 3.6rem; }
}

@media only screen and (max-width:1024px) {
    .video > .text > .box > .bl > p { font-size: 2.8rem; }
    .video > .text > .box > .bl > ul.links > li > a { font-size: 1.15rem; padding: 0px 2rem; max-width: 320px; }
}

@media only screen and (max-width:960px) {
    .video > .text > .box > .bl > p { font-size: 2.6rem; }
}

@media only screen and (max-width:768px) {
    .video > .text > .box > .bl > p { font-size: 2.25rem; }
    .video > .text > .box > .br { width: 1%; }
    .video > .text > .down { margin-bottom: 50px; height: 3rem; width: 3rem; border: 0.5rem solid rgba(255,255,255,0.6); border-radius: 50px; }
        .video > .text > .down > .mouse { height: 2rem; width: 2rem; }
}

@media only screen and (max-width:640px) {
    .video > .text > .box > .bl > p { font-size: 1.8rem; }
}

@media only screen and (max-width:480px) {
    .video > .text > .box > .bl > p { font-size: 1.35rem; }
}




@keyframes wheel {
    to { opacity: 0; top: 1.5rem }
}

@-webkit-keyframes wheel {
    to { opacity: 0; top: 1.5rem }
}



.yhtop { width: 100%; max-width: 1920px; transform: translateY(-100px); margin: 0px auto; height: 130px; }
    .yhtop > img { width: 100%; object-fit: cover; }

@media only screen and (max-width:1600px) {
    .yhtop { height: 115px; }
}

@media only screen and (max-width:1440px) {
    .yhtop { height: 100px; }
}

@media only screen and (max-width:1280px) {
    .yhtop { transform: translateY(-80px); height: 90px; }
}

@media only screen and (max-width:1024px) {
    .yhtop { transform: translateY(-60px); height: 75px; }
}

@media only screen and (max-width:768px) {
    .yhtop { transform: translateY(-40px); height: 60px; }
}

@media only screen and (max-width:480px) {
    .yhtop { transform: translateY(-20px); }
}



.txttitle { position: relative; text-transform: uppercase; font-size: 4.375rem; color: #000; font-family: "BebasKai"; text-align: center; line-height: 1; }
    .txttitle > i { font-style: normal; position: relative; }
        .txttitle > i::after { z-index: -99; content: ''; position: absolute; left: 0; bottom: 0.625rem; width: 100%; height: 0.625rem; background: #fcc14f; }
    .txttitle.bai { color: #fff; }
    .txttitle.huangdi > i::after { background: #fcc14f; }
    .txttitle.hongdi > i::after { background: #c3000c; }
    .txttitle.landi > i::after { background: #91a9d8; }


.txtsubtitle { margin: 2rem auto; text-align: center; font-size: 1.25rem; max-width: 1100px; color: #000; font-family: 'IBMPlexSans-Regular'; }
    .txtsubtitle.bai { color: #fff; }



@media only screen and (max-width:1600px) {
    .txttitle { font-size: 3.85rem; }
}

@media only screen and (max-width:1440px) {
    .txttitle { font-size: 3.5rem; }
}

@media only screen and (max-width:1366px) {
    .txttitle { font-size: 3.3rem; }
}

@media only screen and (max-width:1280px) {
    .txttitle { font-size: 3.1rem; }
}

@media only screen and (max-width:1024px) {
    .txttitle { font-size: 2.65rem; }
}

@media only screen and (max-width:960px) {
    .txttitle { font-size: 2.5rem; }
}

@media only screen and (max-width:768px) {
    .txttitle { font-size: 20px; }
        .txttitle > i::after { bottom: 5px; height: 5px; }
    .txtsubtitle { font-size: 16px; }
}




.manufacturingbg { width: 100%; z-index: -100; position: relative; }
    .manufacturingbg > div { position: relative; z-index: -100; background-color: #182c4e; border-radius: 3.125rem 3.125rem 3.125rem 3.125rem; max-width: 1920px; margin: 0px auto; }
.manufacturingbig { width: 100%; max-width: 1600px; padding: 10rem 3%; margin: 0px auto; }
    .manufacturingbig > .cidslist { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
        .manufacturingbig > .cidslist > span { margin: 0px 1rem; border-radius: 1rem; background-image: linear-gradient(to right, #182c4e, #0b4070); margin-bottom: 1rem; font-size: 1.15rem; display: inline-block; padding: 0.5rem 1rem; color: #fff; font-family: 'IBMPlexSans-Regular'; }


    .manufacturingbig > ul.list { width: 100%; display: flex; margin: 3rem 0px; flex-wrap: wrap; }
        .manufacturingbig > ul.list > li { width: 25%; padding: 0.5%; margin-bottom: 1.5rem; }
            .manufacturingbig > ul.list > li > .img { width: 100%; border-radius: 1.8rem; overflow: hidden; }
            .manufacturingbig > ul.list > li > b { line-height: 1.15; text-align: center; font-family: "BebasKai"; display: block; color: #fbb653; font-weight: 400; font-size: 2.25rem; padding: 1rem 0px; }
            .manufacturingbig > ul.list > li > p { text-align: center; margin: 1rem auto; font-size: 1.15rem; color: #fff; font-family: 'IBMPlexSans-Regular'; }



@media only screen and (max-width:1024px) {
    .manufacturingbig { padding-top: 7rem; padding-bottom: 7rem; }
        .manufacturingbig > ul.list > li { width: 33.33%; }
            .manufacturingbig > ul.list > li > b { font-size: 1.5rem; }
            .manufacturingbig > ul.list > li > .img { border-radius: 1rem; }
}


@media only screen and (max-width:768px) {
    .manufacturingbig { padding-top: 5rem; padding-bottom: 5rem; }
        .manufacturingbig > ul.list > li { width: 50%; }
            .manufacturingbig > ul.list > li > b { font-size: 16px; }
}



.excellencebg { width: 100%; }
.excellencebig { width: 100%; max-width: 1500px; padding: 10rem 3%; margin: 0px auto; text-align: center; }
    .excellencebig > .boxtxt { display: inline-block; margin: 1rem auto; line-height: 1; border-radius: 5rem; padding: 0.5rem 2rem; text-align: center; max-width: 760px; background-image: linear-gradient(to right, #e9f2f7, #cee5f7); font-size: 1.5rem; color: #000; font-family: 'IBMPlexSans-Regular'; }

    .excellencebig > ul.list { width: 100%; display: flex; margin: 3rem 0px; flex-wrap: wrap; }
        .excellencebig > ul.list > li { width: 24%; margin: 1% 0.5%; border-radius: 1.5rem; overflow: hidden; background-image: linear-gradient(to bottom, #f8f8f8, #fdfdfd); }
            .excellencebig > ul.list > li > .img { border-radius: 1.5rem 1.5rem 0px 0px; overflow: hidden; }
            .excellencebig > ul.list > li > b { line-height: 1.15; text-align: left; font-family: "BebasKai"; display: block; color: #174a76; font-weight: 400; font-size: 2.25rem; padding: 1rem 1rem; }
            .excellencebig > ul.list > li > p { text-align: left; margin: 0rem auto; font-size: 1.15rem; color: #000; font-family: 'IBMPlexSans-Regular'; padding: 1rem 1rem; }
            .excellencebig > ul.list > li > ul { width: 100%; padding: 1rem 1rem; list-style-type: disc; margin-left: 1rem; }
                .excellencebig > ul.list > li > ul > li { text-align: left; width: 100%; color: #000; font-size: 1.15rem; font-family: 'IBMPlexSans-Regular'; }


@media only screen and (max-width:1024px) {
    .excellencebig { padding-top: 7rem; padding-bottom: 7rem; }
        .excellencebig > ul.list > li > b { font-size: 1.5rem; }
        .excellencebig > .boxtxt { font-size: 16px; }
}


@media only screen and (max-width:768px) {
    .excellencebig { padding-top: 5rem; padding-bottom: 5rem; }
        .excellencebig > ul.list > li { width: 49%; border-radius: 0.75rem; }
            .excellencebig > ul.list > li > b { font-size: 16px; }
            .excellencebig > ul.list > li > ul > li { font-size: 16px; }
            .excellencebig > ul.list > li > .img { border-radius: 0.75rem 0.75rem 0px 0px; }
}


.systembg { width: 100%; }
.systembig { width: 100%; max-width: 1500px; padding: 0rem 3% 10rem 3%; margin: 0px auto; text-align: center; }
    .systembig > .img { margin: 0px auto; }

@media only screen and (max-width:1024px) {
    .systembig { padding-bottom: 7rem; }
}


@media only screen and (max-width:768px) {
    .systembig { padding-bottom: 5rem; }
}


.globalbg { width: 100%; }
    .globalbg > div { position: relative; z-index: -100; background-image: linear-gradient(to bottom, #f1f0f0, #fff); max-width: 1920px; margin: 0px auto; }
.globalbig { width: 100%; max-width: 1500px; padding: 10rem 3%; margin: 0px auto; text-align: center; }
    .globalbig > .img { margin: 4rem auto 6rem auto; }
    .globalbig > .boxtxt { display: inline-block; margin: 1rem auto; border-radius: 5rem; padding: 1rem 2rem; text-align: center; max-width: 1000px; background-image: linear-gradient(to right, #e9f2f7, #cee5f7); font-size: 1.5rem; color: #000; font-family: 'IBMPlexSans-Regular'; }

@media only screen and (max-width:1024px) {
    .systembig { padding-top: 7rem; padding-bottom: 7rem; }
    .globalbig > .img { margin-bottom: 5rem; }
}


@media only screen and (max-width:768px) {
    .systembig { padding-top: 5rem; padding-bottom: 5rem; }
    .globalbig > .img { margin-bottom: 5rem; }
}