﻿

.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: 430px; }
                .video > .text > .box > .bl > p { font-size: 3rem; 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 { 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:1280px) {
    .video > .text > .box > .bl > p { font-size: 2.5rem; }
}

@media only screen and (max-width:1024px) {
    .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.15rem; }
}

@media only screen and (max-width:768px) {
    .video > .text > .box > .bl > p { font-size: 1.8rem; }
    .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 { position: absolute; bottom: 0px; max-width: 1920px; left: 0px; right: 0px; margin: 0px auto; }
    .yhtop > img { width: 100%; object-fit: cover; }




.txttitle { position: relative; text-transform: uppercase; font-size: 3rem; 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: 0rem; width: 100%; height: 0.625rem; background: #1c9dd6; }
    .txttitle.bai { color: #fff; }
    .txttitle.landi > i::after { background: #1c9dd6; }
    .txttitle.hongdi > i::after { background: #e14657; }
.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:1280px) {
    .txttitle { font-size: 2.5rem; }
}

@media only screen and (max-width:1024px) {
    .txttitle { font-size: 2.15rem; }
}

@media only screen and (max-width:960px) {
    .txttitle { font-size: 2rem; }
}


@media only screen and (max-width:768px) {
    .txttitle { font-size: 20px; }
        .txttitle > i::after { bottom: 5px; height: 5px; }
    .txtsubtitle { font-size: 16px; }
}




.productbg { width: 100%; background-image: linear-gradient(to bottom, #f3eded, #f8f0ed); z-index: -100; position: relative; }
    .productbg > div { background-color: #010101; border-radius: 0px 0px 3.125rem 3.125rem; max-width: 1920px; margin: 0px auto; }
.productbig { width: 100%; max-width: 1500px; padding: 10rem 3%; margin: 0px auto; }
    .productbig > ul { display: flex; width: 100%; flex-wrap: wrap; align-items: stretch; }
        .productbig > ul > li { width: 31.33%; margin: 1%; }
            .productbig > ul > li > .img { width: 100%; position: relative; overflow: hidden; border-radius: 2rem; }
                .productbig > ul > li > .img > img { object-fit: cover; width: 100%; -moz-transition: transform, 0.5s; -webkit-transition: transform, 0.5s; -o-transition: transform, 0.5s; transition: transform,0.5s }
                .productbig > ul > li > .img > .info { display: flex; position: absolute; bottom: 2rem; left: 1rem; right: 1rem; justify-content: center; }
                    .productbig > ul > li > .img > .info > a { font-family: 'IBMPlexSans-Regular'; color: #000; font-size: 1rem; border-radius: 2.25rem; line-height: 2.25rem; width: 48%; margin: 0% 1%; display: block; height: 2.25rem; text-align: center; background-color: #fff; }
                        .productbig > ul > li > .img > .info > a:nth-child(1) { background-image: url('../images/icon/ic1.png'); background-repeat: no-repeat; background-position: center left 20px; padding-left: 15px; }
                        .productbig > ul > li > .img > .info > a:nth-child(2) { background-image: url('../images/icon/ic2.png'); background-repeat: no-repeat; background-position: center left 20px; padding-left: 15px; }

            .productbig > ul > li > .text { width: 100%; text-align: center; padding: 1.5rem 0px; }
                .productbig > ul > li > .text > b { display: block; position: relative; font-weight: 400; font-size: 1.5rem; color: #fff; font-family: "BebasKai"; line-height: 1.15; }
                    .productbig > ul > li > .text > b > img { position: absolute; right: 0px; }
                .productbig > ul > li > .text > p { color: #fff; font-size: 14px; font-family: 'IBMPlexSans-Regular'; padding: 1rem 0px 0rem 0px; }
            .productbig > ul > li > .img:hover > img { -webkit-transform: scale(1.15); transform: scale(1.15) }



@media only screen and (max-width:1280px) {
    .productbig > ul > li { width: 48%; }
}

@media only screen and (max-width:1024px) {
    .productbig { padding-top: 7rem; padding-bottom: 7rem; }
}


@media only screen and (max-width:768px) {
    .productbig { padding-top: 5rem; padding-bottom: 5rem; }
        .productbig > ul > li > .img { border-radius: 1rem; }
            .productbig > ul > li > .img > .info { flex-wrap: wrap; }
                .productbig > ul > li > .img > .info > a { width: 98%; margin: 1% 1%; }
        .productbig > ul > li > .text > b { font-size: 1.15rem; }
            .productbig > ul > li > .text > b > img { max-width: 32px; }
}






.warehousingbg { width: 100%; }
.warehousingbig { width: 100%; max-width: 1600px; padding: 10rem 3%; margin: 0px auto; }
    .warehousingbig > .list { margin-top: 5rem; width: 100%; border-bottom: solid 2px #999; }
        .warehousingbig > .list > ul { display: flex; flex-wrap: wrap; width: 100%; }
            .warehousingbig > .list > ul > li { width: 14.28%; padding: 0px 1%; text-align: center; cursor: pointer; border-bottom: solid 3px #fff; }
                .warehousingbig > .list > ul > li > .img { width: 100%; text-align: center; margin: 0px auto; }
                .warehousingbig > .list > ul > li > p { display: block; font-weight: 400; padding: 2rem 0px; font-size: 1rem; color: #000; font-family: "IBMPlexSans-Regular"; }
                .warehousingbig > .list > ul > li.action { border-bottom: solid 3px #1c9dd6; }
                    .warehousingbig > .list > ul > li.action > p { color: #1c9dd6 }


    .warehousingbig > dl.listtext { margin-top: 4rem; width: 100%; }
        .warehousingbig > dl.listtext > dd { display: none; }
            .warehousingbig > dl.listtext > dd.action { width: 100%; display: flex; }
            .warehousingbig > dl.listtext > dd > .ll { flex: 1; padding: 0% 5%; }
                .warehousingbig > dl.listtext > dd > .ll > b { margin-bottom: 2.5rem; line-height: 1.15; position: relative; display: block; font-weight: bold; font-size: 1.5rem; color: #000; font-family: "IBMPlexSans-Regular"; }
                    .warehousingbig > dl.listtext > dd > .ll > b::after { content: ''; position: absolute; left: 0px; bottom: -1.25rem; background-color: #1c9dd6; width: 70px; height: 5px; font-family: "IBMPlexSans-Regular"; }
                .warehousingbig > dl.listtext > dd > .ll > p { font-size: 1.25rem; color: #000; font-family: "IBMPlexSans-Regular"; }
            .warehousingbig > dl.listtext > dd > .rr { width: 50%; padding: 0% 5%; }
                .warehousingbig > dl.listtext > dd > .rr > img { border-radius: 2.5rem; }

@media only screen and (max-width:1366px) {
    .warehousingbig > .list > ul > li > .img { max-width: 100px; }
}

@media only screen and (max-width:1280px) {
    .warehousingbig > .list > ul > li > .img { max-width: 80px; }
    .warehousingbig > dl.listtext > dd > .ll { padding: 0px 5% 0px 0px; }
    .warehousingbig > dl.listtext > dd > .rr { width: 45%; padding: 0px 0px 0px 5%; }
}

@media only screen and (max-width:1024px) {
    .warehousingbig { padding-top: 7rem; padding-bottom: 7rem; }
        .warehousingbig > .list > ul > li { width: 25%; margin-bottom: 2rem; }
        .warehousingbig > dl.listtext > dd > .ll > b { font-size: 1.25rem; }
        .warehousingbig > dl.listtext > dd > .rr > img { border-radius: 1.5rem; }
}


@media only screen and (max-width:768px) {
    .warehousingbig { padding-top: 5rem; padding-bottom: 5rem; }
        .warehousingbig > .list > ul > li > p { padding: 1rem 0px; font-size: 14px; }
        .warehousingbig > dl.listtext > dd > .ll { padding: 0px 5% 0px 0px; }
        .warehousingbig > dl.listtext > dd > .rr { width: 35%; padding: 0px 0px 0px 5%; }
            .warehousingbig > dl.listtext > dd > .rr > img { border-radius: 1rem; }
        .warehousingbig > dl.listtext > dd > .ll > b { font-size: 16px; }
        .warehousingbig > dl.listtext > dd > .ll > p { font-size: 14px; }
}






.servicebg { width: 100%; background-image: linear-gradient(to bottom, #fbfaf8, #fff); z-index: -100; position: relative; }
.servicebig { width: 100%; max-width: 1500px; padding: 10rem 3%; margin: 0px auto; }
    .servicebig > .lista { width: 100%; display: flex; flex-wrap: wrap; }
        .servicebig > .lista > li { width: 32.33%; margin: 1rem 0.5%; }
            .servicebig > .lista > li > .img { width: 100%; margin: 1rem auto; text-align: center; }
            .servicebig > .lista > li > b { display: block; text-align: center; font-size: 1.25rem; color: #000; font-family: 'BebasKai' }
            .servicebig > .lista > li > p { margin-top: 1rem; margin-bottom: 1.5rem; padding: 0px 1rem; text-align: center; min-height: 4rem; font-size: 1rem; color: #000; font-family: "IBMPlexSans-Regular"; }
            .servicebig > .lista > li > .bigimg { margin: 0px auto; text-align: center; border-radius: 2.25rem; overflow: hidden; }
                .servicebig > .lista > li > .bigimg > img { -moz-transition: transform, 0.5s; -webkit-transition: transform, 0.5s; -o-transition: transform, 0.5s; transition: transform,0.5s }
                .servicebig > .lista > li > .bigimg:hover > img { -webkit-transform: scale(1.15); transform: scale(1.15) }


    .servicebig > .context { margin: 0px auto; max-width: 1200px; border: dotted 3px #e14657; padding: 3rem 1rem; font-size: 3rem; color: #000; font-family: 'BebasKai'; text-align: center; border-radius: 2rem; }
.marginbom5 { margin-bottom: 5rem; }



@media only screen and (max-width:1440px) {
    .servicebig > .context { font-size: 2.8rem; }
}

@media only screen and (max-width:1366px) {
    .servicebig > .context { font-size: 2.5rem; }
}

@media only screen and (max-width:1280px) {
    .servicebig > .context { font-size: 2.25rem; }
}

@media only screen and (max-width:1024px) {
    .servicebig { padding-top: 7rem; padding-bottom: 7rem; }
        .servicebig > .context { font-size: 2.1rem; padding-top: 2rem; padding-bottom: 2rem; }
}

@media only screen and (max-width:960px) {
    .servicebig > .lista > li > p { min-height: 6rem; }
    .servicebig > .context { font-size: 2rem; }
}


@media only screen and (max-width:768px) {
    .servicebig { padding-top: 5rem; padding-bottom: 5rem; }
        .servicebig > .lista > li > b { font-size: 16px; }
        .servicebig > .lista > li > p { font-size: 14px; }
        .servicebig > .lista > li > .img { max-width: 48px; }
        .servicebig > .lista > li > .bigimg > img { border-radius: 1rem; }
        .servicebig > .context { font-size: 1.6rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

@media only screen and (max-width:640px) {
    .servicebig > .lista > li { width: 48%; margin: 1rem 1%; }
        .servicebig > .lista > li > .img { max-width: 32px; }
        .servicebig > .lista > li > p { min-height: 8rem; }
}





.blogbig { width: 100%; max-width: 1300px; padding: 0rem 3%; margin: 0px auto; }
    .blogbig > ul { display: flex; margin-top: 3rem; flex-wrap: wrap; }
        .blogbig > ul > li { width: 48%; margin: 1%; }
            .blogbig > ul > li > .img { width: 100%; position: relative; border-radius: 1.8rem; overflow: hidden; }
                .blogbig > ul > li > .img > img { max-width: 100%; -moz-transition: transform, 0.5s; -webkit-transition: transform, 0.5s; -o-transition: transform, 0.5s; transition: transform,0.5s }
                .blogbig > ul > li > .img > .icon { position: absolute; right: 1.5rem; top: 1.5rem; }
            .blogbig > ul > li > b { line-height: 1.15; padding: 1rem 0px; font-weight: 400; font-family: 'IBMPlexSans-Regular'; display: block; font-size: 1.5rem; color: #000; text-align: center; }
            .blogbig > ul > li > a { width: 50%; font-family: 'IBMPlexSans-Regular'; display: block; font-size: 1rem; color: #000; padding: 0.5rem 0px; text-align: center; border: solid 1px #e50012; border-radius: 50px; background-image: url('../images/icon/ir9.png'); background-repeat: no-repeat; background-position: center right 20px; }

            .blogbig > ul > li > .img:hover > img { -webkit-transform: scale(1.15); transform: scale(1.15) }


@media only screen and (max-width:1024px) {
    .blogbig { padding-top: 7rem; padding-bottom: 7rem; }
        .blogbig > ul > li > .img { border-radius: 1.5rem; }
            .blogbig > ul > li > .img > .icon { width: 40px; height: 40px; }
}


@media only screen and (max-width:768px) {
    .blogbig { padding-top: 5rem; padding-bottom: 5rem; }
        .blogbig > ul > li > .img { border-radius: 1rem; }
        .blogbig > ul > li > a { width: 100% }
        .blogbig > ul > li > .img > .icon { width: 30px; height: 30px; }
}

@media only screen and (max-width:480px) {
    .blogbig > ul > li { width: 98%; margin-bottom: 2rem; }
}
