@charset "UTF-8";

@media (max-width: 980px){
    :root{
        --fz12:12px;
        --fz14:12px;
        --fz16:13px;
        --fz18:14px;
        --fz20:15px;
        --fz22:16px;
        --fz24:17px;
        --fz26:18px;
        --fz28:19px;
        --fz30:20px;
        --fz32:22px;
        --fz34:24px;
        --fz36:26px;
        --fz38:28px;
        --fz40:30px;
        --fz45:34px;
        --fz64:40px;
    }
}


/*—————————————————————————— 公共部分 header —————————————————————————————*/

@media (max-width: 1300px){
    header .bar-box {width: 95%;}
}

@media (min-width: 1100px) {
    header .ul-01 .toList {display: none;}
    header .ul-01>li>a {padding: 20px;}
    header .li-01>a, header .li-02, header .li-03 {position: relative;}
    header .li-01>a>span::after {content: "\e65e"; font-weight: bold; margin-left: 5px; color: #fffa; font-size: var(--fz14); transition: color .2s;}
    header .li-01>a:hover>span::after {color: #fff;}
    header .li-01:hover .ul-02{display: flex;}
    header .li-01 ul {display: none; position: absolute; flex-direction: column;}
    header .li-01 ul li {background: #f1f1f1; transition: all .2s;}
    header .ul-02 li a {color: #333; white-space: nowrap; width: 100%; box-sizing: border-box; padding: 10px 50px 10px 20px; display: inline-block; transition: all .2s;}
    header .ul-02 li:hover {background: #fff;}
    header .ul-02 li:hover>a {color: #000; box-shadow: #ccc inset 0 0 1px 1px;}
    header .li-02>a>span::after, header .li-03>a>span::after {content: "\e65f"; position: absolute; right: 10px; top: 15px; font-size: var(--fz14); color: #333; transition: all .2s;}
    header .li-02>a:hover>span::after, header .li-03>a:hover>span::after {color: #000;}
    header .li-02 {position: relative;}
    header .li-02:hover .ul-03{display: flex;}
    header .ul-03 {top: 0; left: 100%;}
    header .li-03 {position: relative;}
    header .li-03:hover .ul-04{display: flex;}
    header .ul-04 {top: 0; left: 100%;}
    header .current>a {color: #fff !important;}
}

@media (max-width: 1100px){
    header .active_ul {display: flex !important;}
    header .ul-01 .toList {position: absolute; right: 0; top: 0; padding: 10px 20px; line-height: 26px; box-sizing: border-box; display: inline-block; cursor: pointer; transition: all .2s;}
    header .ul-01>.li-01>.toList {line-height: 35px;}
    header .ul-01>li {width: 100%;}
    header .ul-01>li>a {color: #000;}
    header .ul-01 li {transition: color .2s;}
    header .ul-01 a {transition: color .2s;}
    header .ul-02 a {transition: all .2s;}
    header .li-01, header .ul-02 li {position: relative;}
    header .ul-02, header .ul-03, header .ul-04 {width: 100%; display: none; flex-direction: column;}
    header .ul-01 {display: none; width: 100%; margin-left: -2.5%; flex-direction: column; position: absolute; top: 100px; background: #fff;}
    header .ul-01 a {border-bottom: 1px solid #eaeaea;}
    header .ul-01>li>a {padding: 10px 20px; line-height: 35px;}
    header .ul-01 .li-select {display: none;}
    header .more-list {display: block;}
    header .active_ul_01 {display: flex;}
    header .li-01 a {display: block; padding-top: 10px; padding-bottom: 10px; line-height: 26px;}
    header .ul-02>li>a {padding-left: 40px;}
    header .ul-03>li>a {padding-left: 80px;}
    header .ul-04>li>a {padding-left: 120px;}
    header .ul-01 .toList::after {content: "\e65e"; color: #000; font-size: var(--fz16); transition: color .2s;}
    header .ul-02 li>a>span::before {content: "\e65f"; position: absolute; top: 10px; font-size: var(--fz14); color: #333; transition: all .2s;}
    header .ul-02>li>a>span::before {left: 20px;}
    header .ul-03>li>a>span::before {left: 60px;}
    header .ul-04>li>a>span::before {left: 100px;}
    header li:hover>a {background: #fff;}
    header .ul-02 li:hover>a {color: #dd3333;}
    header .ul-02 li:hover>a>span::before {color: #dd3333;}
    header .ul-01>li>a:hover {color: #3b4fe4;}
    header .ul-02>li, header .ul-03>li {background: #f5f5f5;}
    header .li-01:hover>a {color: #3b4fe4;}
    header .li-01:hover>.toList::after {color: #3b4fe4;}
    header .ul-02 li:hover>.toList::after {color: #dd3333;}
    header .li-01>.toList:hover::before {content:""; width: 1px; height: 35px; position: absolute; left: 0; top: 10px; background: #ccc;}
    header .li-02 .toList:hover::before {content:""; width: 1px; height: 30px; position: absolute; left: 0; top: 10px; background: #ccc;}
    header .current>a {color: #3b4fe4 !important;}
}


/*—————————————————————————— 公共部分 footer —————————————————————————————*/

@media (max-width: 1300px){
    footer .top {width: 95%;}
    footer .bottom {width: 95%;}
}

@media (max-width: 980px){
    footer .content-top {padding: 30px 0 20px;}
    footer .top {flex-wrap: wrap; align-items: center;}
    footer .top .logo {width: 100%; text-align: center; margin-bottom: 30px;}
    footer .top .ul-01 {width: 100%;}
    footer .top .ul-01 .li-contact {flex: 0.8;}
    footer .content-bottom {padding: 15px 0;}
}

@media (max-width: 600px){
    footer .top .ul-01 {flex-wrap: wrap;}
    footer .top .ul-01 {justify-content: left;}
    footer .top .ul-01>li:nth-child(1) {margin: 0 10% 20px 0;}
    footer .top .ul-01>li {margin-bottom: 20px;}
    footer .top .ul-01 .li-contact {width: 100%;flex: unset;}
}

@media (max-width: 400px){
    footer .top .ul-02>li>a {line-height: 24px;}
    footer .top .ul-contact {line-height: 24px;}
}

/*—————————————————————————— 首页 —————————————————————————————*/

@media (max-width: 1300px){
    .index-01 .content {width: 95%;}
    .index-02 .content {width: 95%;}
    .index-03 .left {width: 90%;}
    .index-03 .right h2 {width: 100%;}
    .index-03 .right p {width: 100%;}
    .index-03 .right .list {width: 100%;}
    .index-03 .left .img {right: 0; top: 15%;}
    .index-03 .left .img img {width: 400px;}
    .index-03 .right {width: 100%; padding: 20px 2.5% 40px 200px;}
    .index-04 .content {width: 700px; margin: 0 auto;}
    .index-04 .ul-box>li {flex-direction: column;}
    .index-04 .left {width: 95%; margin: 0 auto;}
    .index-04 .right {width: 95%; margin: 20px auto 0;}
    .index-04 .right .list {width: 100%;}
    .index-06 .content {width: 95%;}
}

@media (max-width: 980px){
    .index-02 .content {padding: 30px 0;}
    .index-03 .content {padding: 30px 0;}
    .index-04 .content {padding: 30px 0;}
    .index-05 .content {padding: 30px 0;}
    .index-06 .content {padding: 30px 0;}

    .index-01 h1 {width: 100%;}
    .index-02 .list li {width: 47%;}
    .index-03 .left {width: 90%; position: absolute; left: 5%; top: -5%;}
    .index-03 .left .img {left: 0; top: 0;}
    .index-03 .left .img img {width: 400px;}
    .index-03 .right .list {width: 100%;}
    .index-03 .right {width: 100%; padding: 250px 2.5% 40px 2.5%;}

    .index-06 .list .img {height: 20vw;}
    .index-06 .list li:nth-child(2n+2) {margin-right: 0;}
    .index-06 .list li {width: 48%; margin-right: 4%;}
}

@media (min-width: 980px){
    .index-06 .list li:nth-child(3n+3) {margin-right: 0;}
}


@media (max-width: 750px){
    .index-02 .list li {width: 100%;}
    .index-04 .left .list {flex-wrap: wrap;}
    .index-04 .left .list li {margin-bottom: 20px;}
    .index-04 .left .list li:nth-last-child(1) {margin-right: 0;}
    .index-04 .content {width: 95%; flex-direction: column;}
    .index-04 .left {width: 100%; margin: 0 auto;}
    .index-04 .right {width: 100%; margin: 20px auto 0;}
    .index-05 .content {width: 95%; flex-direction: column;}
    .index-05 .right .list-01 {flex-wrap: wrap;}
    .index-05 .right .list-01 li {margin-bottom: 20px;}
    .index-05 .left {width: 100%; margin: 20px auto 0;}
    .index-05 .right {width: 100%; text-align: center; margin: 0 auto;}
    .index-05 .right .list {width: 100%;}
}

@media (max-width: 600px){
    .index-06 .list li {width: 100%; margin-right: 0;}
    .index-06 .list .img {height: 50vw;}
}

@media (max-width: 450px){
    .index-03 .left {width: 90%; position: absolute; left: 5%;}
    .index-03 .left .img {width: 100%;}
    .index-03 .left .img img {width: 100%;}
    .index-03 .right {width: 100%; padding: 50vw 2.5% 40px 2.5%;}
}

/*—————————————————————————— 产品列表页 —————————————————————————————*/

@media (max-width: 1300px){
    .list-product-01 .content {width: 95%;}
    .list-product-02 .content {width: 95%;}
    .list-product-03 .content {width: 900px; flex-wrap: wrap;}
    .list-product-03 .left {width: 100%;}
    .list-product-03 .right {width: 100%;}
}

@media (max-width: 980px){
    .list-product-01 .content {padding: 100px 0;}
    .list-product-02 .list {flex-direction: column; align-items: center;}
    .list-product-02 .list li {width: 100%; margin-bottom: 30px;}
    .list-product-02 .title {margin-bottom: 20px;}
    .list-product-03 .content {width: 95%; flex-wrap: wrap;}
}

@media (max-width: 750px){
}

/*—————————————————————————— blog列表页 —————————————————————————————*/

@media (max-width: 1300px){
    .blog-01 .content {width: 95%;}
    .list-blog-02 .content {width: 95%;}
    /*.list-blog-02 .list .img {height: 20vw;}*/
    .blog-03 .content {width: 95%;}
    .blog-03 .right {width: 35%;}
    .blog-03 .content {width: 95%;}
    .blog-03 .right .img img {margin-top: -120px;}
}

@media (min-width: 980px){
    .list-blog-02 .list li:nth-child(3n+3) {margin-right: 0;}
}

@media (max-width: 980px){
    .blog-01 .content {padding: 100px 0;}
    .blog-01 .content {padding: 100px 0;}
    .list-blog-02 .content {padding: 50px 0;}
    .list-blog-02 .list li {width: 48%; margin-right: 4%;}
    .list-blog-02 .list li:nth-child(2n+2) {margin-right: 0;}
    .list-blog-02 .list .img {height: 20vw;}
    .blog-03 {padding: 30px 0;}
    .blog-03 .content {flex-wrap: wrap;}
    .blog-03 .curve svg {height: 50px;}
    .blog-03 .left {width: 100%;}
    .blog-03 .right {width: 100%;}
    .blog-03 .right .img img {margin-top: -60px;}
}

@media (max-width: 800px){
    .blog-03 .content {flex-wrap: wrap; text-align: center;}
    .blog-03 .left {width: 100%; margin-bottom: 60px;}
    .blog-03 .right {width: 100%;}
    .blog-03 .right .img {}
    .blog-03 .right .img img {margin-top: 0;}
}

@media (max-width: 600px){
    .list-blog-02 .list li {width: 100%; margin-right: 0;}
    .list-blog-02 .list .img {height: 50vw;}
}

/*—————————————————————————— blog详情页 —————————————————————————————*/

@media (max-width: 1300px){
    .single-blog-02 .content {width: 95%}
}

@media (max-width: 980px){
    .single-blog-02 .left {width: 70%; padding: 20px;}
    .single-blog-02 .left .directory {padding: 20px 10px 0;}
    .single-blog-02 .left .directory h4 {margin-bottom: 20px;}
    .single-blog-02 .left .directory .list li {margin: 0; line-height: 30px;}
    .single-blog-02 .left p {margin: 10px 0; line-height: 26px;}
    .single-blog-02 .left .num-box {margin: 20px 0;}
    .single-blog-02 .right {width: 30%; padding: 20px;}

}

@media (max-width: 800px){
    .single-blog-02>.content {flex-direction: column;}
    .single-blog-02 .left {width: 100%;}
    .single-blog-02 .right {width: 100%;}
}

/*—————————————————————————— 解决问题 —————————————————————————————*/

@media (max-width: 1300px){
    .page-solution-01 .content {width: 95%;}
    .page-solution-01 .content h1 {width: 100%;}
    .page-solution-04 .content {width: 95%;}
    .page-solution-05 .content {width: 95%;}
}

@media (max-width: 980px){
    .page-solution-01 .content h1 {width: 100%; font-size: 32px; line-height: 40px;}
    .page-solution-03 .content {height: 40px;}
    .page-solution-04 .content {flex-direction: column; justify-content: center;}
    .page-solution-04 .left {width: 100%; margin-bottom: 20px;}
    .page-solution-04 .right {width: 100%;}

    .page-solution-05 .content {padding: 40px 0 30px; flex-direction: column; justify-content: center;}
    .page-solution-05 .left {width: 100%;}
    .page-solution-05 .right {width: 90%; margin: 0 auto;}
    .page-solution-05 p {margin: 10px 0; line-height: 24px;}
}

@media (max-width: 600px){
    .page-solution-01 .content {padding: 150px 0;}
    .page-solution-02 .img {width: 95%; margin: 0 auto;}
}

@media (max-width: 400px){
    .page-solution-01 .content {padding: 120px 0 80px;}
}

/*—————————————————————————— 关于我们 —————————————————————————————*/

@media (max-width: 1300px){
    .page-about-01 .content {width: 95%;}
    .page-about-01 h1 {width: 70%;}
    .page-about-01 p {width: 70%;}
    .page-about-02 .content {width: 95%;}
    .page-about-02 .content-box {flex-direction: column;}
    .page-about-02 .left {width: 100%; margin-bottom: 40px;}
    .page-about-02 .right {width: 100%;}

    .page-about-03 .content {width: 95%;}

    .page-about-04 .right p {width: 100%;}

    .page-about-05 .content {width: 95%;}
}

@media (max-width: 980px){
    .page-about-02 .content {padding: 20px 0;}
    .page-about-03 .content {padding: 20px 0;}
    .page-about-04 .content {flex-direction: column; padding: 50px 0 20px;}
    .page-about-04 .left {width: 100%;}
    .page-about-04 .left .img {right: unset; left: 2.5%; top: -50px;}
    .page-about-04 .left .img img {width: 400px;}
    .page-about-04 .right {width: 100%; padding: 300px 2.5% 40px 2.5%;}

    .page-about-05 .content {padding: 20px 0;}
    .page-about-05 .list {flex-wrap: wrap;}
    .page-about-05 .list li {width: 48%; margin-bottom: 20px;}
}

@media (max-width: 700px){
.page-about-03 .list {flex-direction: column;}
.page-about-03 .list li {width: 100%; margin-bottom: 20px;}
}

@media (max-width: 450px){
    .page-about-04 .left .img {width: 100%;}
    .page-about-04 .left .img img {width: 95%;}

    .page-about-05 .list li {width: 100%; margin-bottom: 20px;}
}

/*—————————————————————————— 联系我们 —————————————————————————————*/

@media (max-width:1300px){
    .page-contact-01 .content {width: 95%;}
    .page-contact-02 .content {width: 95%;}
    .page-contact-03 .content {width: 95%;}
}

@media (max-width: 980px){
    .page-contact-02 .content {padding: 20px 0;}
    .page-contact-02 .list-01 {flex-direction: column; justify-content: center;}
    .page-contact-02 .list-01>li {width: 60%; margin: 10px auto;}
    .page-contact-03 .content {padding: 20px 0;}
}

@media (max-width: 600px){
    .page-contact-01 .content {padding: 100px 0;}
    .page-contact-01 h1 {width: 80%;}
    .page-contact-01 p {width: 80%;}
    .page-contact-02 .list-01>li {width: 100%;}
}