*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

html,body{
    font-family: Arial, sans-serif;
    line-height: 1.36;
    width: 100%;
    height:100%;
}

.base{
    width: 100%;
}

div.white{
    background-color: rgba(255, 255, 255, 1)
}
div.gray{
    background-color: #4d4f4e
}
div.lightgray{
    background-color: #929493
}
div.blue{
    background-color: #5365af;
}
div.black{
    background-color: #000;
}

.a_fade_out{
    opacity: 0.2;
}

/* conitainer */
@media (min-width: 1020px){
    .container{
        width: 100%;
        z-index: 100;
        position: relative;
        padding: 0 40px;
    }
}
@media (max-width: 1020px){
    .container{
        width: 100%;
        z-index: 100;
        position: relative;
        padding: 0 30px;
    }
}

/* header */
@media (min-width: 1020px){
    .page_header{
        position: fixed;
        z-index: 101;
        width: 100%;
        height: 85px;
        background-color: transparent;

        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        opacity: 0;
        transform: translate(0, -85px);
        transition: all .5s;
    }

    .page_header a.logo{
        font-size: 0;
        display: inline-block;
        width: 260px;
        margin-right: auto;
    }
    .page_header a.logo img{
        width: 100%;
    }

    .page_header a.logo img.logo_light{
        display: inline-block;
    }
    .page_header a.logo img.logo_dark{
        display: none;
    }

    .page_header.dark_header a.logo img.logo_light{
        display: none;
    }
    .page_header.dark_header a.logo img.logo_dark{
        display: inline-block;
    }

    /* nav 导航 */
    .page_header nav{
        font-size: 16px;
    }
    .page_header nav>ul{
        display: flex;
        gap: 40px
    }
    .page_header nav>ul>li{
        /* padding: 0 20px; */
        position: relative;
        height: 40px;
        line-height: 40px;
    }
    .page_header nav>ul>li a{
        color: white;
        display: inline-block;
        transition: opacity .4s ease-in-out;
    }
    .page_header nav>ul>li a>span{}
    .page_header nav>ul>li a>span>svg{}
    .page_header nav>ul>li a>span>svg.icon-nohover{}
    .page_header nav>ul>li a>span>svg.icon-hover{
        display: none;
    }

    .page_header nav>ul>li>ul{
        position: relative;
        /* top: 40px;
        left:40px; */
        display: none;
    }
    .page_header nav>ul>li>ul>li{
        line-height: 40px;
    }
    .page_header nav>ul>li>ul>li>a{}




 
    .nav-trigger{
        display: none;
    }

    .page_header_fadein{
        opacity: 1;
        transform: translate(0, 0);
    }
    .page_header_fadeout{
        opacity: 0;
        transform: translate(0, -85px);
    }



    .page_header.light_header{
        background-color: transparent;
    }
    .page_header.light_header nav ul li a{
        color: #FFF;
    }
    .page_header.dark_header{
        background-color: #FFF;
    }
    .page_header.dark_header nav ul li a{
        color:#000
    }
}
@media (max-width: 1020px){
    .page_header{
        position: fixed;
        z-index: 101;
        width: 100vw;
        /* height: 4rem; */
        /* min-height: 48px; */
        background-color: #000;

        padding: 0 0 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        opacity: 0;
        transform: translate(0, -4rem);
        transition: all 1s; 
    }
    .page_header_fadein{
        opacity: 1;
        transform: translate(0, 0);
    }

    .page_header a.logo{
        font-size: 0;
        display: inline-block;
        width: 180px;
    }
    .page_header a.logo img{
        width: 100%;
    }
    .page_header a.logo img.logo_dark{
        display: none;
    }

    .page_header nav{
        display: none;
        position: fixed;
        
        top: 61px;
        left: 0;
        width: 100%;
        height: 0;
        height: calc(100vh - 61px) !important;

        background-color: #000;
        padding: 80px 30px;
        /* opacity: 0; */

        /* transition: all .6s; */
    }

    .page_header nav>ul{
        display: flex;
        flex-direction: column;
        
        font-size:1.2rem;
        gap: 2rem;
    }

    .page_header nav>ul>li{
        /* padding: 0 10px; */
    }
    .page_header nav>ul>li a{
        color: white;
        /* transition: opacity .4s ease-in-out; */
    }

    .page_header nav>ul>li a>span{}
    .page_header nav>ul>li a>span>svg{}
    .page_header nav>ul>li a>span>svg.icon-nohover{
        display: none;
    }
    .page_header nav>ul>li a>span>svg.icon-hover{
        display: inline;
    }

    .page_header nav>ul>li>ul{
        position: relative;
        /* top: 40px;
        left:40px; */
        display: block !important;
        margin-top: 1rem;
        left:5rem;
    }
    .page_header nav>ul>li>ul>li{
        line-height: 3rem;
    }
    .page_header nav>ul>li>ul>li>a{}




    .nav-trigger{
        display: block;

        position: relative;
        border: none;
        background: none;
        padding: 20px 30px;
        z-index: 10;
        cursor: pointer;
        color:#FFF;
        transition: all 0.4s;
    }

    .nav-trigger-open{
        transform: rotate(90deg);
    }

    /* 这个暂时不用 */
    .page_header nav.nav-open{
        display: block;
        opacity: 1;
        height: calc(100vh - 61px) !important;
    }
}

/* banner */
@media (min-width: 1020px){
    .page_lead{
        position: relative;
        color: #FFF;
        background-color: #111;

        /* width: 100vw; */
        height:100vh;
        padding: 40px 20px;

        z-index: 1;
        
    }

    .page_lead_inner{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
    }

    .page_lead_video{
        background-color: #000;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .page_lead_video video{
        position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是.video-container） */
        top: 50%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 使用transform移动到正确的位置 */
        min-width: 100%; /* 确保视频宽度至少覆盖容器宽度 */
        min-height: 100%; /* 确保视频高度至少覆盖容器高度 */
        width: auto; /* 根据需要自动调整宽度 */
        height: auto; /* 根据需要自动调整高度 */
    }

    .page_lead_image{
        background-color: #000;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .page_lead_image img{
        position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是.video-container） */
        top: 50%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 使用transform移动到正确的位置 */
        min-width: 100%; /* 确保视频宽度至少覆盖容器宽度 */
        min-height: 100%; /* 确保视频高度至少覆盖容器高度 */
        width: auto; /* 根据需要自动调整宽度 */
        height: auto; /* 根据需要自动调整高度 */
    }

    .page_lead_content{
        width: 100%;
        height: 100%;
        padding: 40px;

        background-color: rgba(0, 0, 0, 0.4);

        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page_lead_content h2{
        max-width: 1000px;
        text-align: center;
        font-size: 5rem;

        opacity: 0;
        transform: translate(0, -20px);
        transition: all 1s ease-in-out .5s;
    }
    .page_lead_content h3{
        max-width: 1000px;
        font-style: normal;
        text-align: center;
        line-height: 3rem;
        font-weight: 300;
        margin-top: 1rem;
        font-size: 2rem;
        font-style: italic;

        opacity: 0;
        transform: translate(0, -20px);
        transition: all 1s ease-in-out 1s;
    }

    .page_lead_content_fadein{
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
}
@media (max-width: 1020px){
    .base{
        width: 100%;
        height: 100vh;
    }
    .page_lead{
        position: relative;
        color: #FFF;
        background-color: #111;

        /* width: 100vw; */
        height:100vh;
        padding: 40px 30px;

        z-index: 1;
    }

    .page_lead_inner{
        position:fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height:100vh;
    }

    .page_lead_video{
        position: relative;
        height: 100vh;        
        overflow: hidden;
    }
    .page_lead_video video{
        position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是.video-container） */
        top: 50%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 使用transform移动到正确的位置 */
        min-width: 100%; /* 确保视频宽度至少覆盖容器宽度 */
        min-height: 100%; /* 确保视频高度至少覆盖容器高度 */
        width: auto; /* 根据需要自动调整宽度 */
        height: auto; /* 根据需要自动调整高度 */
    }

    .page_lead_image{
        background-color: #000;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
    .page_lead_image img{
        position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是.video-container） */
        top: 50%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 使用transform移动到正确的位置 */
        min-width: 100%; /* 确保视频宽度至少覆盖容器宽度 */
        min-height: 100%; /* 确保视频高度至少覆盖容器高度 */
        width: auto; /* 根据需要自动调整宽度 */
        height: auto; /* 根据需要自动调整高度 */
    }

    .page_lead_content{
        width: 100vw;
        height: 100vh;
        /* padding: 40px; */

        background-color: rgba(0, 0, 0, 0.4);

        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page_lead_content h2{
        max-width: 80vw;
        text-align: center;
        font-size: 3rem;

        opacity: 0;
        transform: translate(0, -20px);
        transition: all 1s ease-in-out .5s;
    }
    .page_lead_content h3{
        max-width: 80vw;
        font-style: normal;
        text-align: center;
        line-height: 3rem;
        font-weight: 300;
        margin-top: 1rem;
        font-size: 2rem;
        font-style: italic;

        opacity: 0;
        transform: translate(0, -20px);
        transition: all 1s ease-in-out 1s;
    }

    .page_lead_content_fadein{
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
}

/* index 数字见证力量 */
@media (min-width: 1020px){
    .section1{
        max-width: 980px;
        margin: 0 auto;

        padding: 100px 0 80px;
        display: flex;
        justify-content: space-between;
    }
    .section1 h2{
        font-size: 32px;
        font-weight: 400;
    }
    .section1 div{
        width: 50%;
        font-size: 16px;
    }
}
@media (max-width: 1020px){
    .section1{
        padding: 4rem 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .section1 h2{
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section1 div{
        font-size: 1rem;
    }
}

/* index 3小数字块 */
@media (min-width: 1020px){
    .section2{
        max-width: 980px;
        margin: 0 auto;

        display: flex;
        justify-content: space-between;
        padding-bottom: 50px;
    }
    .section2 div{
        border-left: 1px solid rgba(0, 0, 0, 0.2);
        padding-left: 50px;
    }
    .section2 div h3{
        /* font-size: calc(36px + 40 * ((100vw - 500px) / 1000)); */
        font-size: 4.5rem;
    }
    .section2 div p{
        font-size: 18px;
    }
}
@media (max-width: 1020px){
    .section2{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .section2 div{
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 2rem;
        margin-bottom: 1rem;
    }
    .section2 div h3{
        font-size: 3rem;
    }
    .section2 div p{
        font-size: 1rem;
    }
}

/* index 解决方案 */
@media (min-width: 1020px){
    .section3{
        padding: 100px 0;
    }
    .section3>h2{
        font-size: 3.6rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section3>p{
        font-size: 1rem;
        width: 60%;
        text-align: center;
        margin: 0 auto;
        line-height: 1.8rem;
    }
    .section3>ul{
        display: flex;
        justify-content: space-between;
        gap: 4rem;
        padding: 4rem 0;
    }
    .section3>ul>li{}
    .section3>ul>li>a{
        display: inline-block;
        color: #111;
    }
    .section3>ul>li>a>img{
        width: 100%;
        /* object-fit: cover;
        aspect-ratio: 1.39 / 1; */
        transition: all 0.4s;
    }
    .section3>ul>li>a>h3{
        font-size: 2.4rem;
        font-weight: 400;
        text-align: center;
        margin: 1rem auto;
        transition: all 0.4s;
    }
    .section3>ul>li>a>p{
        font-size: 1rem;
        transition: all 0.4s;
    }


    .section3>ul>li>a:hover>img{
        border-radius: 2rem;
    }
    .section3>ul>li>a:hover :not(img){
        opacity: 0.4;
    }

    .section3>a.more{
        display: block;
        width: 120px;
        color: #111;
        border: 1px solid #d7d7d7;
        border-radius: 5px;
        margin: 0 auto;
        text-align: center;
        line-height: 2.2rem;
        transition: all 0.4s;
    }
    .section3>a.more:hover{
        background-color: #d7d7d7;
        /* border-color: #FFF; */
    }
}
@media (max-width: 1020px){
    .section3{
        padding: 5rem 0;
    }
    .section3>h2{
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section3>p{
        font-size: 1rem;
        margin: 0 auto;
        line-height: 1.5rem;
    }
    .section3>ul{
        display: flex;
        flex-direction: column;

        justify-content: space-between;

        gap: 2rem;
        padding: 2rem 0;
    }
    .section3>ul>li{}
    .section3>ul>li>a{
        display: inline-block;
        color: #111;
    }
    .section3>ul>li>a>img{
        width: 100%;
        /* aspect-ratio: 1.39 / 1; */
        transition: all 0.4s;
    }
    .section3>ul>li>a>h3{
        font-size: 1.5rem;
        font-weight: 400;
        text-align: center;
        margin: 1rem auto;
        transition: all 0.4s;
    }
    .section3>ul>li>a>p{
        font-size: 1rem;
        transition: all 0.4s;
    }


    .section3>ul>li>a:hover>img{
        border-radius: 2rem;
    }
    .section3>ul>li>a:hover :not(img){
        opacity: 0.4;
    }

    .section3>a.more{
        display: block;
        width: 8rem;
        color: #111;
        border: 1px solid #d7d7d7;
        border-radius: .3rem;
        margin: 0 auto;
        text-align: center;
        line-height: 2.2rem;
        transition: all 0.4s;
    }
    .section3>a.more:hover{
        background-color: #d7d7d7;
        border-color: #FFF;
    }
}

/* index Yun蕴算 */
@media (min-width: 1020px){
    .section4{
        color: #FFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        padding: 20rem 0;
    }
    .section4 h2{
        text-align: center;
        font-size: 4.5rem;
        font-weight: 400;
    }
    .section4 p{
        width: 50%;
        line-height: 2rem;
        text-align: center;
        margin: 0 auto;
        font-size: 18px;
    }
    .section4>a.more{
        color: #111;
        display: inline-block;
        background-color: rgba(255, 255, 255, 1);

        border-radius: 5px;
        padding: 0.5rem 1rem;

        transition: all 0.4s;
    }
    .section4>a.more:hover{
        background-color: #ededed;
    }
}
@media (max-width: 1020px){
    .section4{
        color: #FFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        padding: 5rem 0;
    }
    .section4 h2{
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
    }
    .section4 p{
        line-height: 1.5rem;
        text-align: center;
        margin: 0 auto;
        font-size: 1rem;
    }
    .section4>a.more{
        color: #111;
        display: inline-block;
        background-color: rgba(255, 255, 255, 1);

        border-radius: 5px;
        padding: 0.5rem 1rem;

        transition: all 0.4s;
    }
    .section4>a.more:hover{
        background-color: #d7d7d7;
    }
}

/* index 蓝色4个块 */
@media (min-width: 1020px){
    .section5{
        padding: 5rem 0;
    }
    .section5>ul{
        display: flex;
        gap: 4rem;
    }
    .section5>ul>li{}
    .section5>ul>li>a{
        color: #FFF;
        display: inline-block;
    }
    .section5>ul>li>a>img{
        width: 100%;
        transition: all 0.4s;
    }
    .section5>ul>li>a>h3{
        font-size: 1.5rem;
        font-weight: 400;
        margin: 1rem auto;
        transition: all 0.4s;
    }
    .section5>ul>li>a>h4{
        font-size: 1rem;
        font-weight:normal;
        margin-bottom: 1rem;
        transition: all 0.4s;
    }
    .section5>ul>li>a>p{
        font-size: .8rem;
        transition: all 0.4s;
    }

    .section5>ul>li>a:hover>img{
        border-radius: 1rem;
    }
    .section5>ul>li>a:hover :not(img){
        opacity: 0.4;
    }
}
@media (max-width: 1020px){
    .section5{
        padding: 3rem 0;
    }
    .section5>ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .section5>ul>li{}
    .section5>ul>li>a{
        color: #FFF;
        display: inline-block;
    }
    .section5>ul>li>a>img{
        width: 100%;
        transition: all 0.4s;
    }
    .section5>ul>li>a>h3{
        font-size: 1.2rem;
        font-weight: 400;
        margin: 1rem auto;
        transition: all 0.4s;
    }
    .section5>ul>li>a>h4{
        font-size: 1rem;
        font-weight:normal;
        margin-bottom: 1rem;
        transition: all 0.4s;
    }
    .section5>ul>li>a>p{
        font-size: 0.8rem;
        transition: all 0.4s;
    }

    .section5>ul>li>a:hover>img{
        border-radius: 1rem;
    }
    .section5>ul>li>a:hover :not(img){
        opacity: 0.4;
    }
}

/* footer */
@media (min-width: 1020px){
    footer{
        color: #FFF;
        background-color: #000;
        z-index: 100;
        position: relative;
        padding: 100px 120px;
    }
    footer a{
        color: #FFF;
    }
    .footer-top{
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: 5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    .footer-top>div.logo{
        margin-bottom: 2rem;
    }
    .footer-top>div.logo>a{}
    .footer-top>div.logo>a>img{}

    .footer-top>ul{
        display: flex;
        gap: 3rem;
    }
    .footer-top>ul>li{}
    .footer-top>ul>li>a{
        transition: opacity .4s ease-in-out;
    }
     .footer-top>ul>li>ul{
        padding-top: 10px;
     }
    .footer-top>ul>li>ul>li{
        line-height: 30px;
    }

    .footer-bottom{
        display: flex;
        justify-content: space-between;
        padding-top: 2rem;
    }
    .footer-bottom>div.copyright{
        font-size: 1rem;
        opacity: 0.6;
    }
    .footer-bottom>div.beian{
        font-size: 1rem;
        opacity: 0.6;
    }
    .footer-bottom>ul{
        display: flex;
        gap: 3rem;
    }
    .footer-bottom>ul>li{}
    .footer-bottom>ul>li>a{
        transition: opacity .4s ease-in-out;
    }
}
@media (max-width: 1020px){
    footer{
        color: #FFF;
        background-color: #000;
        z-index: 100;
        position: relative;
        padding: 3rem 20px;
    }
    footer a{
        color: #FFF;
    }
    .footer-top{
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: 3rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    .footer-top>div.logo{
        margin-bottom: 1rem;
    }
    .footer-top>div.logo>a{}
    .footer-top>div.logo>a>img{
        width: 160px;
    }

    .footer-top>ul{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .footer-top>ul>li{
        text-align: center;
    }
    .footer-top>ul>li>a{
        transition: opacity .4s ease-in-out;
    }
    .footer-top>ul>li>ul{
        padding-top: .5rem;
    }

    .footer-bottom{
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: space-between; */
        padding-top: 2rem;
    }
    .footer-bottom>div.copyright{
        font-size: 1rem;
        margin-bottom: 1rem;
        opacity: 0.6;
    }
    .footer-bottom>ul{
        display: flex;
        gap: 3rem;
    }
    .footer-bottom>ul>li{}
    .footer-bottom>ul>li>a{
        transition: opacity .4s ease-in-out;
    }
}

/* yun 材料设计与合成Agent */
@media (min-width: 1020px){
    .section6{
        padding: 100px 0;
    }
    .section6 h2{
        font-size: 3rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section6 div.content_div{
        width: 70%;
        text-align: center;
        margin: 0 auto;
        line-height: 1.5rem;
        margin-bottom: 2rem;
    }


    .section6 div.img_div{
        position: relative;
        zoom:1;
        font-size: 0;
        overflow: hidden;
    }
    .section6 div.img_div img{
        width:100%;
    }
     .section6 div.img_div video{
        position: absolute;
        width: 60%;
        left:0;
        top:0;
        bottom: 0;
        right: 0;
        margin:auto;
     }

    .section6 div.img_div div.play_mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.2);

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .section6 div.img_div div.play_mask>a{
        display: inline-block;
        width: 80px;
        height: 80px;
    }
    .section6 div.img_div div.play_mask>a>img{
        width: 100%;
    }



    .section7{
        display: flex;
        padding: 100px 0 200px;
        gap: 100px;
    }
    .section7 .left_img{
        width: 50%;
    }
    .section7 .left_img img{
        width: 100%;
        border-radius: 5px;
    }
    .section7 .right_list{
        width: 50%;
    }
    .section7 .right_list ul{
        display: flex;
        flex-wrap: wrap;
        /* gap: 2rem; */
        
        /* justify-content: space-between;
        align-items:center; */
    }
    .section7 .right_list ul li{
        /* width: 40%; */
        flex: 1 1 50%;
        aspect-ratio: 1;
        padding-right:50px;
    }
    .section7 .right_list ul li div{
        width: 42px;
    }
    .section7 .right_list ul li div img{
        width:100%;
    }
    .section7 .right_list ul li dl{}
    .section7 .right_list ul li dt{
        font-size: 1.5rem;
        margin: 1rem 0;
    }
    .section7 .right_list ul li dd{
        margin-bottom: 6px;
    }


    .section8{
        padding: 100px 0;
        margin-bottom: 200px;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        background-color: #f2f2f2;
        border:1px solid rgba(255, 255, 255, 0.6);
        border-radius: 5px;
    }
    .section8 h2{
        font-size: 3rem;
        font-weight: 400;
    }
    .section8 p{
        font-size: 1.2rem;
    }
    .section8 .btn_div{
        display: flex;
        gap: 2rem;
    }
    .section8 .btn_div a{
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        transition: all 0.4s;
    }
    .section8 .btn_div a.btn_login{
        color: #FFF;
        background-color: #677edb;
    }
    .section8 .btn_div a.btn_login:hover{
        background-color: #4054a5;
    }
    .section8 .btn_div a.btn_register{
        color: #FFF;
        background-color: #4d4f4e;
    }
    .section8 .btn_div a.btn_register:hover{
        background-color: #111;
    }
}
@media (max-width: 1020px){
    .section6{
        padding: 5rem 0 0;
    }
    .section6 h2{
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section6 div.content_div{
        text-align: center;
        margin: 0 auto;
        line-height: 1.5rem;
        margin-bottom: 2rem;
    }

    .section6 div.img_div{
        position: relative;
        zoom:1;
        overflow: hidden;
        font-size: 0;
    }
    .section6 div.img_div img{
        width:100%;
    }
     .section6 div.img_div video{
        position: absolute;
        width: 80%;

        left:0;
        top:0;
        bottom: 0;
        right: 0;
        margin:auto;
     }

    .section6 div.img_div div.play_mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.2);

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .section6 div.img_div div.play_mask>a{
        display: inline-block;
        width: 3rem;
        height: 3rem;
    }
    .section6 div.img_div div.play_mask>a>img{
        width: 100%;
    }

    .section7{
        display: flex;
        padding: 5rem 0;
        flex-direction: column;
    }
    .section7 .left_img{
        width: 100%;
        margin-bottom: 2rem;
    }
    .section7 .left_img img{
        width: 100%;
        border-radius: .5rem;
    }
    .section7 .right_list{
        width: 100%;
    }
    .section7 .right_list ul{
        display: flex;
        flex-direction: column;
    }
    .section7 .right_list ul li{
        display: flex;
        margin-bottom: 2rem;
    }
    .section7 .right_list ul li div{
        width: 2.5rem;
        margin-right: 1rem;
    }
    .section7 .right_list ul li div img{
        width:100%;
    }
    .section7 .right_list ul li dl{
  
    }
    .section7 .right_list ul li dt{
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .section7 .right_list ul li dd{
        margin-bottom: .4rem;
    }


    .section8{
        padding: 5rem 0;
        margin-bottom: 2rem;

        zoom:1;
        clear: both;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        background-color: #f2f2f2;
        border:1px solid #d7d7d7;
        border-radius: .5rem;
    }

    .section8 h2{
        font-size: 2rem;
        font-weight: 400;
    }
    .section8 p{
        font-size: 1rem;
    }
    .section8 .btn_div{
        display: flex;
        gap: 2rem;
    }
    .section8 .btn_div a{
        display: inline-block;
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-radius: .3rem;
        transition: all 0.4s;
    }
    .section8 .btn_div a.btn_login{
        color: #FFF;
        background-color: #677edb;
    }
    .section8 .btn_div a.btn_login:hover{
        background-color: #4054a5;
    }
    .section8 .btn_div a.btn_register{
        color: #FFF;
        background-color: #4d4f4e;
    }
    .section8 .btn_div a.btn_register:hover{
        background-color: #111;
    }
}

/* xuanlab 产品配置 */
@media (min-width: 1020px){
    .section9{
        padding: 0 0;
        margin-bottom: 100px;
    }
    .section9>h2{
        font-size: 3rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 20px;
    }
    .section9>p{
        font-size: 1rem;
        text-align: center;
        margin-bottom: 20px;
    }
    .section9>div.div_block{
        display: flex;
        justify-content: space-between;
        gap: 2rem;
    }
    .section9>div.div_block>div{
        overflow: hidden;
        width: 50%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .section9>div.div_block>div>img{
        width: 100%;
        font-size: 0;
    }


    .section10{
        padding: 50px 0;
    }
    .section10>ul{}
    .section10>ul>li{
        position: relative;
        overflow: hidden;
        margin-bottom: 100px;
    }
    .section10>ul>li>div.left_content{
        width: 48%;
        float: left;
    
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .section10>ul>li>div.left_content>h3{
        font-size: 2rem;
        font-weight: 400;
    }
    .section10>ul>li>div.left_content>p{
        font-size: 1rem;
        line-height: 1.5rem;
        margin: 20px 0;
    }
    .section10>ul>li>div.left_content>ul{
        padding-left: 20px;
        font-size: .8rem;
    }
    .section10>ul>li>div.left_content>ul>li{
        list-style:disc;
        line-height: 1.5rem;
    }
    .section10>ul>li>div.left_content>div{
        display: flex;
        gap: 40px;
        margin-top:30px;
    }
    .section10>ul>li>div.left_content>div>dl{
        flex: 1 1 50%;
    }
    .section10>ul>li>div.left_content>div>dl>dt{
        margin-bottom: .5rem;
    }
    .section10>ul>li>div.left_content>div>dl>dd{
        font-size: .8rem;
        line-height: 1.5rem;
    }
    .section10>ul>li>div.right_img{
        width: 48%;
        float: right;
    }
    .section10>ul>li>div.right_img>img{
        width: 100%;
    }

    .section10>ul>li:nth-child(even)>div.left_content{
        right:0;
        float: right;
    }
    .section10>ul>li:nth-child(even)>div.right_img{
        float: left;

    }
}
@media (max-width: 1020px){
    .section9{
        padding: 5rem 0 0;
        margin-bottom: 5rem;
    }
    .section9>h2{
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section9>p{
        font-size: 1rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .section9>div.div_block{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
    }
    .section9>div.div_block>div{
        overflow: hidden;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .section9>div.div_block>div>img{
        width: 100%;
        font-size: 0;
    }


    .section10{
        padding: 2rem 0;
    }
    .section10>ul{}
    .section10>ul>li{
        position: relative;
        overflow: hidden;
        margin-bottom: 3rem;
    }
    .section10>ul>li>div.left_content{

    }
    .section10>ul>li>div.left_content>h3{
        font-size: 1.5rem;
        font-weight: 400;
    }
    .section10>ul>li>div.left_content>p{
        font-size: 1rem;
        line-height: 1.5rem;
        margin: 1rem 0;
    }
    .section10>ul>li>div.left_content>ul{
        padding-left: 1rem;
        font-size: .8rem;
    }
    .section10>ul>li>div.left_content>ul>li{
        list-style:disc;
        line-height: 1.5rem;
    }
    .section10>ul>li>div.left_content>div{
        /* display: flex;
        gap: 50px; */
        margin-top:1rem;
    }
    .section10>ul>li>div.left_content>div>dl{
        margin-bottom: 1rem;
    }
    .section10>ul>li>div.left_content>div>dl>dt{
        margin-bottom: .5rem;
    }
    .section10>ul>li>div.left_content>div>dl>dd{
        font-size: .8rem;
        line-height: 1.5rem;
    }
    .section10>ul>li>div.right_img{
        margin-top: 1rem;
    }
    .section10>ul>li>div.right_img>img{
        width: 100%;
    }
}

/* cases 服务领域 */
@media (min-width: 1020px){
    .section11{
        max-width: 1200px;
        margin: 0 auto;
        padding: 100px 0 0;
    }
    .section11>h2{
        text-align: center;
        font-size: 3rem;
        font-weight: 400;
        margin-bottom: 20px;
    }
    .section11>p{
        text-align: center;
    }

    #tabs{
        margin: 100px auto;
    }
    #tabs>ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #dedede;
        border-bottom: none;
    }
    #tabs>ul>li{
        flex: 1 1;
        text-align: center;
        line-height: 2.5rem;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
    }
    #tabs>ul>li:last-child{
        border-right: none;
    }
    #tabs>ul>li.ui-tabs-active{
        background-color: #f2f2f2;
        border-bottom: none ;
    }
    #tabs>ul>li>a{
        color: #111;
    }

    #tabs>div{
        background-color: #f2f2f2;
        border: 1px solid #dedede;
        border-top: none;
        padding: 60px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 80px;
    }
    #tabs>div>div.left_img{
        flex: 1 1 50%;
    }
    #tabs>div>div.left_img>img{
        width: 100%;
    }
    #tabs>div>div.right_content{
        flex: 1 1 50%;
    }
    
    #tabs>div>div.right_content>h3{
        font-size: 2.5rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }
    #tabs>div>div.right_content>p{}

    .section12{
        max-width: 1200px;
        margin: 0 auto;
        padding: 50px 0 100px;
    }
    .section12>h2{
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }
    .section12>div.div_block{
        display: flex;
        margin-bottom: 80px;
    }
    .section12>div.div_block>h3{
        font-size: 2rem;
        font-weight: 400;
        width: 40%;
    }
    .section12>div.div_block>div.right_content{
        width: 60%;
    }
    .section12>div.div_block>div.right_content>p{
        font-size: .8rem;
        line-height: 1.5rem;
        margin-bottom: 1rem;
    }
    .section12>div.div_block>div.right_content>ul{
        border-top: 1px solid #dedede;
        margin-top: 50px;
    }
    .section12>div.div_block>div.right_content>ul>li{
        padding: 10px 0;
        border-bottom: 1px solid #dedede;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .section12>div.div_block>div.right_content>ul>li>h4{
        font-size: 1.2rem;
        font-weight: normal;
    }
    .section12>div.div_block>div.right_content>ul>li>span{
        font-size: 1rem;
    }

    .section13{
        max-width: 1200px;
        margin: 0 auto;

        padding: 50px 0 150px 0;
        overflow: hidden;
    }
    .swiper-container {
        width: 100%;
        height: 200px;

        position: relative;
    } 

    .swiper-button-next, .swiper-button-prev {
        color: #050707 !important;
    }
    .swiper-pagination-bullet-active{
        background-color:#050707 !important;
    }

    .swiper-slide{
        padding: 0 150px;
        /* text-align: center; */
        display: flex !important;
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }
    .swiper-slide h3{
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    .swiper-slide h4{
        font-size: .7rem;
        font-weight: 400;
    }
    .swiper-slide h5{
        font-size: .8rem;
        font-weight: 400;
    }
}
@media (max-width: 1020px){
    .section11{
        padding: 3rem 0 0;
    }
    .section11>h2{
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }
    .section11>p{
        text-align: center;
    }

    #tabs{
        margin: 2rem auto;
    }
    #tabs>ul{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        margin-bottom: .5rem;
    }
    #tabs>ul>li{
        text-align: center;
        line-height: 2.5rem;
        padding: 0 1rem;
        background-color: #f2f2f2;
    }

    #tabs>ul>li.ui-tabs-active{
        background-color: #d7d7d7;
        /* border-bottom: none ; */
    }
    #tabs>ul>li>a{
        color: #111;
    }

    #tabs>div{
        background-color: #f2f2f2;
        border: 1px solid #d7d7d7;
        padding: 1rem;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    #tabs>div>div.left_img{}
    #tabs>div>div.left_img>img{
        width: 100%;
    }
    #tabs>div>div.right_content{}
    #tabs>div>div.right_content>h3{
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }
    #tabs>div>div.right_content>p{}


    .section12{
        padding: 2rem 0 3rem;
    }
    .section12>h2{
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }
    .section12>div.div_block{
        display: flex;
        flex-direction: column;
        margin-bottom: 3rem;
    }
    .section12>div.div_block>h3{
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }
    .section12>div.div_block>div.right_content{

    }
    .section12>div.div_block>div.right_content>p{
        font-size: .8rem;
        line-height: 1.5rem;
        margin-bottom: 1rem;
    }
    .section12>div.div_block>div.right_content>ul{
        border-top: 1px solid #d7d7d7;
        margin-top: 1.5rem;
    }
    .section12>div.div_block>div.right_content>ul>li{
        padding: .8rem 0;
        border-bottom: 1px solid #d7d7d7;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .section12>div.div_block>div.right_content>ul>li>h4{
        font-size: 1.2rem;
        font-weight: normal;
    }
    .section12>div.div_block>div.right_content>ul>li>span{
        font-size: 1rem;
    }

    .section13{
        padding: 3rem 0 5rem 0;
        overflow: hidden;
    }
    .swiper-container {
        width: 100%;
        padding: 2rem 0;
        /* height: 200px; */

        position: relative;
        /* background-color: #4054a5; */
    } 

    .swiper-button-next, .swiper-button-prev {
        color: #050707 !important;
        display: none !important;
    }
    .swiper-pagination-bullet-active{
        background-color:#050707 !important;
    }

    .swiper-slide{
        padding: 0;
        /* text-align: center; */
        display: flex !important;
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }
    .swiper-slide h3{
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    .swiper-slide h4{
        font-size: .7rem;
        font-weight: 400;
    }
    .swiper-slide h5{
        font-size: .8rem;
        font-weight: 400;
    }
}

/* about 我们的愿景 */
@media (min-width: 1020px){
    .section14{
        max-width: 780px;
        margin: 0 auto;

        color: #FFF;
        padding: 100px 0;
        text-align: center;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .section14 h3{
        font-size: .8rem;
        font-weight: normal;
    }
    .section14 h2{
        font-size: 2rem;
        font-weight: 400;
        margin: 1rem 2rem;
    }
    .section14 p{
        font-size: 1rem;
        line-height: 1.8rem;
    }

     .section15{
        max-width: 1200px;
        margin: 0 auto;

        padding: 100px 0;
    }
    .section15>h2{
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section15>p{
        font-size: 1rem;
        text-align: center;
        line-height: 1.5rem;
        margin-bottom: 5rem;
    }


    /* 因为职位少，暂时不需要 */
    /* .section15 #accordion{}
    .section15 #accordion>h3{
        font-size: 1.6rem;
        font-weight: 400;

        background: url("images/drop-down.png") no-repeat center right;
        background-size: 4%;
        
        
        cursor: pointer;
        border-top: 1px solid #ddd;
        padding: 20px 0;
        
        transition: background .5s;
    }
    .section15 #accordion>h3:first-child{
        border-top: none;
    }
    .section15 #accordion>h3.ui-accordion-header-active{
        background-image: url("images/drop-up.png");
    }

    .section15 #accordion>div{
        padding-bottom: 2rem;
        overflow: hidden;
    }
    .section15 #accordion>div>ul{
    }
    .section15 #accordion>div>ul>li{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .section15 #accordion>div>ul>li>div.job_left{}
    .section15 #accordion>div>ul>li>div.job_left>h4{
        font-size: 1.2rem;
        font-weight: 400;
    }
    .section15 #accordion>div>ul>li>div.job_left>address{
        font-style: normal;
        font-size: .8rem;
        margin-bottom: 1rem;
    }
    .section15 #accordion>div>ul>li>div.job_left>p{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .section15 #accordion>div>ul>li>a.apply{
        text-wrap: nowrap;
        font-size: 1rem;
        line-height: 1rem;
        display: inline-block;
        color: #111;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
    }
    .section15 #accordion>div>ul>li>a.apply:hover{
        background-color: #f2f2f2;
    } */

    .section15 div.jobs{
        /* padding-bottom: 2rem; */
        overflow: hidden;
    }
    .section15 div.jobs>ul{
    }
    .section15 div.jobs>ul>li{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 40px;
        overflow: hidden;
        padding-top: 40px;
        border-top: 1px solid #d7d7d7;
    }
    .section15 div.jobs>ul>li:last-child{
        padding-bottom: 40px;
        border-bottom: 1px solid #d7d7d7;
    }
    .section15 div.jobs>ul>li>div.job_left{}
    .section15 div.jobs>ul>li>div.job_left>h4{
        font-size: 1.2rem;
        font-weight: 400;
    }
    .section15 div.jobs>ul>li>div.job_left>address{
        font-style: normal;
        font-size: .8rem;
        margin-bottom: .5rem;
    }
    .section15 div.jobs>ul>li>div.job_left>p{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .section15 div.jobs>ul>li>a.apply{


        text-wrap: nowrap;
        font-size: 1rem;
        line-height: 1rem;
        display: inline-block;
        color: #111;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;

        /* 先暂时隐藏 */
        display: none;
    }
   .section15 div.jobs>ul>li>a.apply:hover{
        background-color: #f2f2f2;
    }
}
@media (max-width: 1020px){
    .section14{
        color: #FFF;
        padding: 3rem 0;
        text-align: center;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .section14 h3{
        font-size: .8rem;
        font-weight: normal;
    }
    .section14 h2{
        font-size: 1.5rem;
        font-weight: 400;
        margin: 1rem 2rem;
    }
    .section14 p{
        font-size: 1rem;
        line-height: 1.8rem;
    }

    .section15{
        padding: 3rem 0;
    }
    .section15>h2{
        font-size: 1.5rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1rem;
    }
    .section15>p{
        font-size: 1rem;
        margin-bottom: 3rem;
    }


    /* .section15 #accordion{}
    .section15 #accordion>h3{
        font-size: 1.2rem;
        font-weight: 400;

        background: url("images/drop-down.png") no-repeat center right;
        background-size: 5%;
        
        
        cursor: pointer;
        border-top: 1px solid #ddd;
        padding: 1.5rem 0;
        
        transition: background .5s;
    }
    .section15 #accordion>h3:first-child{
        border-top: none;
    }
    .section15 #accordion>h3.ui-accordion-header-active{
        background-image: url("images/drop-up.png");
    }

    .section15 #accordion>div{

        overflow: hidden;
    }
    .section15 #accordion>div>ul{
    }
    .section15 #accordion>div>ul>li{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        overflow: hidden;
    }
    .section15 #accordion>div>ul>li>div.job_left{}
    .section15 #accordion>div>ul>li>div.job_left>h4{
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: .5rem;
    }
    .section15 #accordion>div>ul>li>div.job_left>address{
        font-style: normal;
        font-size: .8rem;
        margin-bottom: 1rem;
    }
    .section15 #accordion>div>ul>li>div.job_left>p{
        font-size: .8rem;
        line-height: 1.2rem;
    }
    .section15 #accordion>div>ul>li>a.apply{
        text-wrap: nowrap;
        font-size: .8rem;
        line-height: 1rem;
        display: inline-block;
        color: #111;
        border: 1px solid #ccc;
        padding: .4rem .8rem;
        border-radius: .3rem;
    }
    .section15 #accordion>div>ul>li>a.apply:hover{
        background-color: #f2f2f2;
    } */


    .section15 div.jobs{
        overflow: hidden;
    }
    .section15 div.jobs>ul{
    }
    .section15 div.jobs>ul>li{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        overflow: hidden;
        padding-top: 1.5rem;
        border-top: 1px solid #d7d7d7;
    }
    .section15 div.jobs>ul>li:last-child{
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #d7d7d7;
    }
    .section15 div.jobs>ul>li>div.job_left{}
    .section15 #accordion>div>ul>li>div.job_left>h4{
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: .5rem;
    }
   .section15 div.jobs>ul>li>div.job_left>address{
        font-style: normal;
        font-size: .8rem;
        margin-bottom: 0.5rem;
    }
    .section15 div.jobs>ul>li>div.job_left>p{
        font-size: .8rem;
        line-height: 1.2rem;
    }
    .section15 div.jobs>ul>li>a.apply{
         text-wrap: nowrap;
        font-size: .8rem;
        line-height: 1rem;
        display: inline-block;
        color: #111;
        border: 1px solid #ccc;
        padding: .4rem .8rem;
        border-radius: .3rem;

         /* 先暂时隐藏 */
        display: none;
    }
    .section15 div.jobs>ul>li>a.apply:hover{
        background-color: #f2f2f2;
    }
}

/* news 精选 */
@media (min-width: 1020px){
    .section16{
        color: #FFF;
        padding: 60px 0;
    }
    .section16 h2{
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
        margin-bottom: 40px;
    }
    .section16 p{
        font-size: 1rem;
        line-height: 1.8rem;
    }

    .section16>ul{
        display: flex;
        justify-content: space-between;
        gap: 30px;
    }
    .section16>ul>li{}
    .section16>ul>li>a{
        display: inline-block;
        color: #ccc;
    }
    .section16>ul>li>a>div.top_img{
        margin-bottom: 20px;
    }
    .section16>ul>li>a>div.top_img>img{
        width: 100%;
        transition: all .5s;
    }
    .section16>ul>li>a>h3{
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 5px;
        transition: all .5s;
    }
    .section16>ul>li>a>p{
        font-size: 1rem;
        margin-bottom: 20px;
        transition: all .5s;
    }
    .section16>ul>li>a>time{
        font-size: .8rem;
        transition: all .5s;
    }

    .section16>ul>li>a:hover{
        color: #FFF;
    }
    .section16>ul>li>a:hover>div.top_img>img{
        border-radius: 20px;
    }

    .section17{
        padding: 100px 0;
    }
    .section17>h2{
        font-size: 3rem;
        font-size: 400;
        text-align: center;
        margin-bottom: 60px;
    }
    .section17>ul.category{
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 60px;
    }
    .section17>ul.category>li{}
    .section17>ul.category>li>a{
        color: #111;
        display: inline-block;
        padding: 7px 12px;
        border: 1px solid transparent;
        transition: all .5s;
    }
    .section17>ul.category>li>a.current,.section17>ul.category>li>a:hover{
        background-color: #f2f2f2;
        border: 1px solid #d7d7d7;
        border-radius: 3px;
    }

    .section17>ul.news_list{
        display: flex;
        flex-wrap: wrap;
        gap:40px
    }
    .section17>ul.news_list>li{
        flex: 1 1 45%;
    }
    .section17>ul.news_list>li>a{
        color: #111;
    }
    .section17>ul.news_list>li>a>div.top_img{
        margin-bottom: 10px;
    }
    .section17>ul.news_list>li>a>div.top_img>img{
        width: 100%;
        transition: all .5s;
    }
    .section17>ul.news_list>li>a>p.tags{
        font-size: .8rem;
    }
    .section17>ul.news_list>li>a>p.tags>span{
        display: inline-block;
        background-color: #f2f2f2;
        border: 1px solid #d7d7d7;
        padding: 3px 5px;
        border-radius: 3px;
        margin-right: 10px;
        margin-bottom: 15px;
    }
    .section17>ul.news_list>li>a>p.tags>time{}
    .section17>ul.news_list>li>a>h3{
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 10px;
    }
    .section17>ul.news_list>li>a>p.description{
        margin-bottom: 20px;
    }
    .section17>ul.news_list>li>a>p.more{
        font-size: .8rem;
        background: url("images/arrow.png") 55px 2px/2% 80% no-repeat ;
    }

    .section17>ul.news_list>li>a:hover{
        color: #000;
    }
    .section17>ul.news_list>li>a:hover>div.top_img>img{
        border-radius: 20px;
    }

    .section17 div.pagination{
        margin-top: 80px;
        text-align: center;
    }
    .section17 div.pagination>a{
        display: inline-block;
        text-indent: -9999px;
        overflow: hidden;
        box-sizing:content-box;
        width: 20px;
        height: 20px;
        padding: 10px;
        margin: 0 20px;
        opacity: .4;
        transition: all .5s;
    }
    .section17 div.pagination>a:hover{
        opacity: 1;
    }
    .section17 div.pagination>a.page_prev{
        background: url("images/left.svg") no-repeat center/cover;
        background-clip: content-box;
    }
    .section17 div.pagination>a.page_next{
        background: url("images/right.svg") no-repeat center/cover;
        background-clip: content-box;
    }

}
@media (max-width: 1020px){
    .section16{
        color: #FFF;
        padding: 3rem 0;
    }
    .section16 h2{
        text-align: center;
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 2rem;
    }
    .section16>ul{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }
    .section16>ul>li{}
    .section16>ul>li>a{
        display: inline-block;
        color: #ccc;
    }
    .section16>ul>li>a>div.top_img{
        margin-bottom: 1rem;
    }
    .section16>ul>li>a>div.top_img>img{
        width: 100%;
        transition: all .5s;
    }
    .section16>ul>li>a>h3{
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: .5rem;
        transition: all .5s;
    }
    .section16>ul>li>a>p{
        font-size: 1rem;
        margin-bottom: 1rem;
        transition: all .5s;
    }
    .section16>ul>li>a>time{
        font-size: .8rem;
        transition: all .5s;
    }

    .section16>ul>li>a:hover{
        color: #FFF;
    }
    .section16>ul>li>a:hover>div.top_img>img{
        border-radius: 1rem;
    }

    .section17{
        padding: 3rem 0;
    }
    .section17>h2{
        font-size: 2rem;
        font-size: 400;
        text-align: center;
        margin-bottom: 2rem;
    }
    .section17>ul.category{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .section17>ul.category>li{}
    .section17>ul.category>li>a{
        color: #111;
        display: inline-block;
        padding: .3rem 1rem;
        border: 1px solid transparent;
        transition: all .3s;
    }
    .section17>ul.category>li>a.current,.section17>ul.category>li>a:hover{
        background-color: #f2f2f2;
        border: 1px solid #d7d7d7;
        border-radius: .3rem;
    }

    .section17>ul.news_list{
        display: flex;
        flex-direction: column;
        gap:2rem;
    }
    .section17>ul.news_list>li{
        /* flex: 1 1 45%; */
    }
    .section17>ul.news_list>li>a{
        color: #111;
    }
    .section17>ul.news_list>li>a>div.top_img{
        margin-bottom: .8rem;
    }
    .section17>ul.news_list>li>a>div.top_img>img{
        width: 100%;
        transition: all .5s;
    }
    .section17>ul.news_list>li>a>p.tags{
        font-size: .8rem;
        margin-bottom: .6rem;
    }
    .section17>ul.news_list>li>a>p.tags>span{
        display: inline-block;
        background-color: #f2f2f2;
        border: 1px solid #d7d7d7;
        padding: .1rem .5rem;
        border-radius: .2rem;
        margin-right: .5rem;
    }
    .section17>ul.news_list>li>a>p.tags>time{}
    .section17>ul.news_list>li>a>h3{
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: .5rem;
    }
    .section17>ul.news_list>li>a>p.description{
        margin-bottom: .5rem;
    }
    .section17>ul.news_list>li>a>p.more{
        font-size: .8rem;
        /* background: url("images/arrow.png") 55px 2px/4% 80% no-repeat; */
        background: url("images/arrow.png") 55px center/contain no-repeat;
        /* background-repeat: no-repeat; */
        /* background-position: 55px center; */
        /* background-origin: content-box; */
        /* background-size: contain; */
        /* background-clip: content-box; */

        /* background-attachment: local; */
    }

    .section17>ul.news_list>li>a:hover{
        color: #000;
    }
    .section17>ul.news_list>li>a:hover>div.top_img>img{
        border-radius: 1rem;
    }

    .section17 div.pagination{
        margin-top: 3rem;
        text-align: center;
    }
    .section17 div.pagination>a{
        display: inline-block;
        text-indent: -9999px;
        overflow: hidden;
        box-sizing:content-box;
        width: 1.2rem;
        height: 1.2rem;
        padding: .5rem;
        margin: 0 1rem;
        opacity: .4;
        transition: all .5s;
    }
    .section17 div.pagination>a:hover{
        opacity: 1;
    }
    .section17 div.pagination>a.page_prev{
        background: url("images/left.svg") no-repeat center/cover;
        background-clip: content-box;
    }
    .section17 div.pagination>a.page_next{
        background: url("images/right.svg") no-repeat center/cover;
        background-clip: content-box;
    }
}

/* detail 新闻详情 */
@media (min-width: 1020px){
    .section18{
        width: 980px;
        margin: 200px auto 100px;
    }
    .section18>a.btn_back{
        color: #111;
        display: inline-block;
        border: 1px solid #d7d7d7;
        padding: 6px 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        transition: all .2s ease-in-out;
    }
    .section18>a.btn_back:hover{
        background-color: #d7d7d7;
    }
    .section18>h1{
        font-size: 2rem;
        font-size: 400;
        margin-bottom: 20px;
    }
    .section18>p{
        font-size: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #d7d7d7;
        margin-bottom: 50px;
    }
    .section18>p>span{
        margin-right: 10px;
    }
    .section18>p>time{}
    .section18>div.content{
        line-height: 180%;
    }
    .section18>div.content div{
        
    }
    .section18>div.content p{
        margin-bottom: 20px;
    }
    .section18>div.content img{
        width: 100%;
    }
}
@media (max-width: 1020px){
    .section18{
        padding: 0;
        margin: 6rem auto 3rem;
    }
    .section18>h1{
        font-size: 1.5rem;
        font-size: 400;
        margin-bottom: 1rem;
    }
    .section18>a.btn_back{
        color: #333;
        display: inline-block;
        border: 1px solid #d7d7d7;
        padding: .2rem 1rem;
        border-radius: .2rem;
        margin-bottom: 1.5rem;
        transition: all .2s ease-in-out;
    }
    .section18>a.btn_back:hover{
        background-color: #d7d7d7;
    }

    .section18>p{
        color: #666;
        font-size: .8rem;
        padding-bottom: .3rem;
        border-bottom: 1px solid #d7d7d7;
        margin-bottom: 3rem;
    }
    .section18>p>span{
        margin-right: 1rem;
    }
    .section18>p>time{}
    .section18>div.content{
        line-height: 180%;
    }
    .section18>div.content div{
        
    }
    .section18>div.content p{
        margin-bottom: 1rem;
    }
    .section18>div.content div img{
        width: 100%;
    }
}