﻿
.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: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: #386dbd; }
    .txttitle.bai { color: #fff; }
.txtsubtitle { padding: 2rem 0px; margin: 0px auto; text-align: left; 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; }
}




.contentbg { width: 100%; }
.contentbig { width: 100%; max-width: 1400px; padding: 2rem 3% 10rem 3%; margin: 0px auto; text-align: center; }
    .contentbig > .list { width: 100%; max-width: 1200px; display: flex; margin: 0px auto; flex-wrap: wrap; }
        .contentbig > .list > .left { width: 40%; max-width: 1200px; margin-right: 10% }
            .contentbig > .list > .left ul { width: 100%; }
                .contentbig > .list > .left ul > li { margin-bottom: 1.5rem; width: 100%; text-align: left; color: #000; font-size: 1.25rem; font-family: 'IBMPlexSans-Regular'; }
                    .contentbig > .list > .left ul > li > div.input { background-image: linear-gradient(to right, #f8f3ef, #fff); border-radius: 10px; }



        .contentbig > .list > .right { flex: 1; text-align: left }
            .contentbig > .list > .right > .img { max-width: 377px; text-align: left; border-radius: 1.8rem; overflow: hidden; }
            .contentbig > .list > .right > div.line { border-bottom: solid 2px #e2e2e2; margin-bottom: 1.5rem; }

            .contentbig > .list > .right > dl { width: 100%; text-align: left; margin-top: 1rem; }
                .contentbig > .list > .right > dl > dt { color: #e50012; font-size: 1.375rem; font-family: 'IBMPlexSans-Regular'; }
                .contentbig > .list > .right > dl > dd { margin-bottom: 1.5rem; color: #000; font-size: 1.25rem; font-family: 'IBMPlexSans-Regular'; }
                    .contentbig > .list > .right > dl > dd > i { color: #324bb3; font-style: normal; text-decoration: underline; }
                .contentbig > .list > .right > dl > dt > span.language { margin-left: 2rem; }


            .contentbig > .list > .right > p { margin-bottom: 2rem; color: #000; font-size: 1.25rem; font-family: 'IBMPlexSans-Regular'; }
                .contentbig > .list > .right > p > b { color: #e50012; display: block; }

.cicons { display: block; margin-top: 4rem; margin-bottom: 1rem; text-align: left; }
    .cicons > p { color: #e50012; font-size: 1.25rem; margin-bottom: 1rem; }
    .cicons > a { margin-right: 10px; position: relative; }
        .cicons > a > img { max-width: 50px; }
        .cicons > a > .box { display: none; position: absolute; top: -138px; right: 5px; width: 128px; }
            .cicons > a > .box > img { max-width: 128px; }
        .cicons > a:hover > .box { display: block; }





@media only screen and (max-width:1024px) {
    .contentbig { padding-top: 2rem; padding-bottom: 7rem; }
}

@media only screen and (max-width:768px) {
    .contentbig { padding-top: 2rem; padding-bottom: 5rem; }
        .contentbig > .list > .left { width: 100%; max-width: 1200px; margin-right: 0% }
        .contentbig > .list > .right { width: 100%; flex: none; margin-top: 2rem; }
}


.send2 { display: flex; margin: 1rem 0px; align-items: center; }
    .send2 > div:first-child { flex: 1; font-size: 12px; color: #000; }
        .send2 > div:first-child > label { margin-left: 5px; }



input.word { border-style: none; border-bottom-style: none; text-align: left; padding-left: 10px; height: 50px; color: #000; background-color: transparent; width: 100%; font-size: 1.25rem; font-family: "IBMPlexSans-Regular", Arial,'Microsoft YaHei',-apple-system,sans-serif; letter-spacing: 1px; transition: all 0.5s; }
    input.word:focus { outline: none; border-bottom: solid 0px #fff; }
    input.word:-ms-input-placeholder { color: #333; font-family: "IBMPlexSans-Regular"; font-size: 1.375rem; }
    input.word::-webkit-input-placeholder { color: #333; font-family: "IBMPlexSans-Regular"; font-size: 1.375rem; }
    input.word::-moz-placeholder { color: #333; font-family: "IBMPlexSans-Regular"; font-size: 1.375rem; }
    input.word:-moz-placeholder { color: #333; font-family: "IBMPlexSans-Regular"; font-size: 1.375rem; }






.whobg { width: 100%; background-image: linear-gradient(to bottom, #f8f3ef, #fff); z-index: -100; position: relative; }
.whobig { width: 100%; max-width: 1500px; padding: 6rem 3% 5rem 3%; margin: 0px auto; }
    .whobig > ul { display: flex; flex-wrap: wrap; margin-top: 4rem; flex-wrap: wrap; }
        .whobig > ul > li { cursor: pointer; width: 48%; margin: 5px 1%; background-color: #fff; border-radius: 100px; line-height: 1.8; font-family: 'IBMPlexSans-Regular'; font-size: 1.125rem; color: #000; padding: 5px 2rem; background-image: url('../images/icon/ir7.png'); background-repeat: no-repeat; background-position: center right 20px; }
            .whobig > ul > li:hover { background-color: #293365; color: #fff; background-image: url('../images/icon/id1.png'); }
            .whobig > ul > li.action { background-color: #293365; color: #fff; background-image: url('../images/icon/id1.png'); }
    .whobig > .map { margin-top: 4rem; }
        .whobig > .map > img { max-width: 100% }
    .whobig > .date { margin-top: 2rem; }
        .whobig > .date > img { max-width: 100% }


@media only screen and (max-width:768px) {
    .whobig > ul > li { width: 98%; }
}
