@charset "UTF-8";

html, body{ font-size:12px!important; }

.language{ margin-left:15px; }
.language span{ margin:0 5px; font-size:14px; }
.footer{ width:100%; display:flex; flex-direction: column; align-items: stretch; justify-content: flex-start; position:absolute; bottom:3rem; right:0; left:0; color:#333333; font-size:16px; }
.footer .tips{ display:flex; flex-direction: row; align-items: center; justify-content: center; line-height:30px; }
.footer .tips #shenhe,
.footer .tips #jianguan,
.footer .tips #xieyi,
.footer .tips #xieyi-en,
.footer .tips #yinsi,
.footer .tips #yinsi-en{ margin:0 .5rem; cursor:pointer; }
.footer .copyright{ line-height:30px; text-align:center; font-size:14px; display:flex; flex-direction: column; align-items: center; justify-content: flex-start; }

.body-bg{ background-image:url(../images/pic-right.jpg); position:fixed; left:0; right:0; top:0; bottom:0; width:100vw; height:100vh; opacity:.1; background-repeat:repeat; background-color:rgba(255, 220, 0, .3); z-index:-1; }
.zbr-content{ display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; position:absolute; }
.zbr-left{ width:74%; display:flex; flex-direction: column; align-items: stretch; justify-content: center; }
.zbr-right{ width:24%; background-image:url(../images/pic-right.jpg); background-repeat: no-repeat; background-size: contain; background-position: center; }
.xieyi{ text-indent: 2rem; font-size:1.2rem; line-height:2rem; padding:1rem; box-sizing: border-box; text-align: justify; }
.xieyi-title{ text-align:center; font-size:1.5rem; font-weight:bold; height:3rem; }

@media (max-width:800px) {
    .zbr-content{ width:calc(100% - 2rem);  left:1rem; right:1rem; top:9.25rem; }

    .zbr-left .title{ flex:0 0 5rem; display:flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom:1rem; position:relative; }
    .zbr-left .title img{ height:5rem; position:absolute; }
    .zbr-left .title img:nth-child(1){ width:14rem; top:0.4rem }
    .zbr-left .title img:nth-child(2){ width:5rem; top:0; left:15rem; bottom:0; }
    .zbr-left .subtitle{ flex:1; text-align:justify; font-size:1rem; line-height:2rem; }
    .zbr-left .zbr-btns{ flex:1 1 4rem; display:flex; flex-direction: row; align-items: center; justify-content: flex-start; }
    .zbr-left .zbr-btns img{ width:calc(50% - 1rem); height:auto; margin-right:1rem; }
    .footer{ bottom:1rem; }
    .footer .tips{ font-size:1.2rem; }
    .footer .copyright{ line-height:2rem; font-size:1rem; text-align:center; }
}

@media screen and (min-width:400px) and (max-width:1115px) {
    .aboutus{ font-size:1.2rem!important; font-weight:bold!important; }
    .head-pc{ margin:0!important; }
    .zbr-content{ width:calc(100% - 6rem); left:3rem; right:3rem; top:20%; min-height:34rem; }

    .zbr-left{ width:calc(100% - 24% - 2rem); }
    .zbr-left .title{ flex:0 0 5rem; display:flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom:1rem; position:relative; }
    .zbr-left .title img{ height:5rem; position:absolute; }
    .zbr-left .title img:nth-child(1){ width:14rem; top:0.4rem }
    .zbr-left .title img:nth-child(2){ width:5rem; top:0; left:15rem; bottom:0; }
    .zbr-left .subtitle{ flex:1; text-align:justify; font-size:1.5rem; line-height:2.5rem; }
    .zbr-left .zbr-btns{ flex:1 1 4rem; display:flex; flex-direction: row; align-items: center; justify-content: flex-start; margin:1rem 0; }
    .zbr-left .zbr-btns img{ width:calc(50% - 10px); max-height:50px; max-width:162px; margin-right:10px; }
    .zbr-right{ width:24%; background-position: left center; }
    .footer .tips{ font-size:1.2rem; }
    .footer .copyright{ line-height:2rem; font-size:1rem; text-align:center; }
}

@media screen and (min-width:1115px) {
    .aboutus{ font-size:1.2rem!important; font-weight:bold!important; }
    .zbr-content{ width:64%; left:18%; right:18%; top:20%; min-height:34rem; }

    .zbr-left{ width:calc(100% - 24% - 2rem); }
    .zbr-left .title{ flex:0 0 5rem; display:flex; flex-direction: row; align-items: center; justify-content: flex-start; margin:3rem 2rem 3rem 0; position:relative; height:6rem; }
    .zbr-left .title img{ height:6rem; position:absolute; }
    .zbr-left .title img:nth-child(1){ width:16.8rem; top:0.4rem }
    .zbr-left .title img:nth-child(2){ width:7rem; height:7rem; top:0; left:17.8rem; bottom:0; }
    .zbr-left .subtitle{ flex:1; text-align:justify; font-size:22px; line-height:38px; }

    .zbr-left .zbr-btns{ flex:1 1 80px; display:flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; margin:1rem 0; padding:0 20px; box-sizing: border-box; }
    .zbr-left .zbr-btns img{ width:calc(50% - 10px); max-height:50px; max-width:162px; margin-right:10px; }
    .zbr-right{ width:24%; background-position: left center; }
    .nav-modal{ display:none!important; }
    /* 整个滚动条 */
    .overflow-y-auto::-webkit-scrollbar {
        width: 5px; /* 滚动条宽度 */
    }

    /* 滚动条轨道 */
    .overflow-y-auto::-webkit-scrollbar-track {
        background: #f1f1f1; /* 滚动条轨道颜色 */
    }

    /* 滚动条的滑块 */
    .overflow-y-auto::-webkit-scrollbar-thumb {
        background: #888; /* 滚动条滑块颜色 */
    }

    /* 滚动条的滑块：鼠标悬停时 */
    .overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: #555; /* 滚动条滑块颜色：鼠标悬停时 */
    }
}