@charset "UTF-8";
.body_home { height: 100%; }
.body_b { position: fixed; inset: 100% 0px 0px 0%; background: rgb(255, 255, 255); transition: top 0.7s cubic-bezier(0.5, 0, 0.2, 1); z-index: 100; overflow: auto; outline: none; padding-top: 101px; }
.body_b.showdiv { top: 0px; }
.home body { height: 100%; overflow: hidden; padding: 0px; }

.banner {position: relative; animation: 0.8s ease 0.1s 1 normal backwards running fadeInUp; }
.banner .slider { overflow: hidden; width: 100%; max-height: 100vh; }
.banner .slider img {width: 100%;transform: scale(1.2);transition: opacity 0.3s, transform 1s;vertical-align: bottom;height: 100vh;object-fit: cover;}
.banner .slick-active img { transform: scale(1); transition: 5s cubic-bezier(0, 0.56, 0.44, 1); }
.juanzhou { position: absolute; bottom: 0px; }
.banner .bannertb2 { position: absolute; left: 50%; transform: translateX(-50%); bottom: 52px; color: rgb(255, 255, 255); z-index: 11; cursor: pointer; }
.banner .bannertb2 .jt { margin: auto; display: block; position: relative; width: 36px; cursor: pointer; }
.banner .bannertb2 .jt1 { width: 100%; }
.banner .bannertb2 .jt2 { width: 15px; position: absolute; left: 11px; top: 7px; animation: 2s ease 0s infinite normal none running scrollAnia; }
@keyframes scrollAnia {
    0% { transform: translate(0px, 5px); opacity: 0; }
    40% { opacity: 1; }
    80% { transform: translate(0px, 17px); opacity: 0; }
    100% { opacity: 0; }
}
.index1 {padding: 6rem 0px;}
.title {margin-bottom: 3rem;}
.title h2 {position: relative;font-size: 32px;color: rgb(21 126 107);font-family: "Source Sans Variable";line-height: 100px;float: left;}
.title .more {float: right;line-height: 100px;font-size: 1rem;color: #157e6b;font-family: Verdana;background: url("../img/more01.png") right center no-repeat;padding-right: 20px;}
.title .more:hover {color: rgb(21 126 107);padding-right: 15px;}
.title h2::before {display: block;position: absolute;content: "";width: 84px;height: 4px;background: rgb(245, 190, 44);left: 0px;bottom: -5px;}
.Overview .text { width: 40%; }
.Overview .text p {font-size: 1.2rem;color: rgb(31, 31, 31);text-align: left;line-height: 2.8;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 6;}
.Overview .img { width: 56%; overflow: hidden; }
.Overview .img .pic { height: 600px; }
.Overview .img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.Overview .more {width: 180px;height: 60px;line-height: 60px;font-size: 15px;color: rgb(255, 255, 255);background: rgb(21 126 107);display: block;margin-top: 60px;float: right;text-align: center;}
.Overview .more:hover {background: url(../img/icon1.png) right 28px center no-repeat rgb(33 176 150);}
.Technology { margin: 160px 0px 0px; }
.Technology li { float: left; width: 32%; margin-right: 2%; }
.Technology li:nth-child(3n) { margin-right: 0px; }
.Technology li h2 {font-size: 1.3rem;color: rgb(21 126 107);font-family: "Source Sans Variable";line-height: 45px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;padding-right: 30px;background: url("../img/jt.png") right center no-repeat;}
.Technology li .img {width: 100%;height: 300px;margin: 1rem 0px;overflow: hidden;}
.Technology li .img img { width: 100%; height: 100%; object-fit: cover; }
.Technology li p {font-size: 1rem;color: rgb(31, 31, 31);overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-align: left;line-height: 28px;}
.Technology li:hover p {color: rgb(21 126 107);}
.index2 {padding: 2rem 0px 4rem;background: #f6fbfa;}
.index2 h3 { font-size: 18px; color: rgb(31, 31, 31); line-height: 28px; font-weight: normal; margin-bottom: 40px; font-family: Arial; }
.index2 li { float: left; width: 32%; margin-right: 2%; }
.index2 li:nth-child(3) { margin-right: 0px; }
.index2 li .img {width: 100%;height: 320px;overflow: hidden;background: #fff;}
.index2 li .img img { width: 100%; height: 100%; object-fit: cover; }
.index2 li h2 {font-size: 1.1rem;color: rgb(21 126 107);line-height: 48px;font-family: "Source Sans Variable";margin: 15px 0px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;background: url("../img/jt.png") right center no-repeat;padding-right: 30px;}
.index2 li p {font-size: 0.95rem;color: rgb(31, 31, 31);line-height: 24px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-align: left;}
.index2 li:hover p {color: rgb(21 126 107);}
.index3 {padding: 3rem 0px;background: url("../img/index3bg.png") center center / cover no-repeat;}
.index3 .title h2 { color: rgb(255, 255, 255); }
.index3 .title .more { color: rgb(255, 255, 255); background: url("../img/more02.png") right center no-repeat; }
.index3 .tux {width: 45%;overflow: hidden;}
.index3 .box3{}

.newstp {width: 40rem;height: 100%;overflow: hidden}
.newstp .xwbox { position: relative; }
.newstp .xwbox .item{}
.newstp .xwbox .item a{}
.newstp .xwbox .item .xwt {max-height: 24rem;overflow: hidden;position: relative;}
.newstp .xwbox .item .xwt img {width: 100%;height: 100%;object-fit: cover;}
.newstp .xwbox .item:hover .xwt img { transition: all 0.4s; transform: scale(1.1); }
.newstp .xwbox .item .bt {font-size: 1.1rem;width: 100%;padding: 20px;z-index: 2;box-sizing: border-box;background: #FFF;}
.newslb {width: calc(100% - 43rem);}

.newslb ul {}
.newslb ul li{display: block;}
.newslb ul li:first-child { padding-top: 0; }
.newslb ul li a {padding: 1.4rem 0;display: flex;border-bottom: 1px solid rgba(255,255,255,.3);align-items: center;justify-content: space-between;transition: .5s;}
.newslb ul li:first-child a {padding: 0 0 1.4rem 0;margin: 0;}
.newslb ul li:last-child a { padding: 1.4rem 0 0 0; border: none; }
.newslb ul .date-box {float: left;text-align: center;color: rgba(255,255,255,.7);}
.newslb ul .date-day {font-size: 1.3rem;line-height: 2.5rem;color: #FFF;}
.newslb ul .date-month {line-height: 2rem;font-size: 15px;background: #f5f5f5;color: #d7000e;transition: .5s;}
.newslb ul .text-box {width: calc(100% - 90px);vertical-align: middle;color: #333;}
.newslb ul li:hover .date-day, .newslb ul li:hover .text-box h1 {color: #efbc1c;}
.newslb ul:hover .date-month { background: #d7000e; color: #fff; }
.newslb ul li:hover .text-box h1 {}
.newslb ul .text-box h1 {font-weight: normal;font-size: 1.2rem;color: #FFF;transition: .5s;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.newslb ul .text-box p { font-size: 13px; color: #999; line-height: 20px; }

@media only screen and (max-width: 1500px) {
    .newstp {width: 38rem;}
    .newslb {width: calc(100% - 41rem);}
    .newslb ul .text-box h1{font-size:1.1rem}
}
@media only screen and (max-width: 1200px) {
    .newstp {width: 35rem;}
    .newslb {width: calc(100% - 38rem);}
    .newslb ul .text-box h1{font-size:1.1rem}
    .newslb ul li a {padding: 1rem 0;display: flex;border-bottom: 1px solid rgba(255,255,255,.3);align-items: center;justify-content: space-between;transition: .5s;}
    .newslb ul li:first-child a {padding: 0 0 1rem 0;margin: 0;}
    .newslb ul li:last-child a {padding: 1rem 0 0 0;border: none;}
    .newslb ul .date-box {float: left;text-align: center;color: rgba(255,255,255,.7);}
    .newstp .xwbox .item .xwt{max-height: 19rem;}
}
@media only screen and (max-width: 1000px) {
    .newstp {width: 100%;}
    .newslb {width: 100%;margin-top: 1.5rem;}
    .newslb ul .text-box h1{font-size: 1rem;}
    .newslb ul li a {padding: 1rem 0;display: flex;border-bottom: 1px solid rgba(255,255,255,.3);align-items: center;justify-content: space-between;transition: .5s;}
    .newslb ul li:first-child a {padding: 0 0 1rem 0;margin: 0;}
    .newslb ul li:last-child a {padding: 1rem 0 0 0;border: none;}
    .newslb ul .date-box {float: left;text-align: center;color: rgba(255,255,255,.7);}
    .newstp .xwbox .item .xwt{max-height: initial;}
}
.dcls-container {/* width: 100%; *//* height: 460px; *//* margin: 0px auto; *//* position: relative; */}
.dcls-logo {
    top: 18%;
    position: absolute;
    left: 5%;
    width: 45%;
    height: auto;
}

.index3 .lib {width: 47%;float: right;padding-top: 55px;}
.index3 .lib li a { font-size: 18px; font-family: Verdana; color: rgb(255, 255, 255); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; }
.index3 .lib li { line-height: 58px; position: relative; padding-left: 45px; }
.index3 .lib li::before { position: absolute; display: block; content: ""; width: 22px; height: 3px; background: rgb(241, 149, 50); left: 0px; top: 0px; bottom: 0px; margin: auto; }
.index3 .lib li:nth-child(3)::before { background: rgb(244, 67, 54); }
.index3 .lib li:nth-child(4)::before { background: rgb(76, 175, 80); }
.index3 .lib li:nth-child(5)::before, .index3 .lib li:nth-child(6)::before { background: rgb(3, 169, 244); }
.links {background: rgb(255, 255, 255);padding: 35px 60px;display: none;}
.links .ul {display: flex;place-content: center flex-start;flex-flow: wrap;justify-content: space-around;}
.links li {width: 21%;}
.links li a {
    text-align: center;
}
.links li a span{
    width: 25%;
    display: block;
    margin: auto;
}
.links li a span img{
    width: 100%;
}
.links li a p{font-size: 18px;line-height: 24px;color: rgb(17, 17, 17);display: block;width: 70%;margin: 15px auto 0;}
.links li a:hover p{color: #084089;}
.Stations-phone { display: none; }

/* 外层父容器 */
.fl.tux {
}

/* 核心包裹容器：锁定原图宽高比，百分比定位永远生效 */
.dcls-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1429 / 960; /* 严格匹配你图片原始比例 */
}

/* Logo样式自适应 */
.dcls-logo img {
    width: 100%;
}

/* 底部基准白色横线 */
.base-line {
    position: absolute;
    top: 50.3%;
    left: 5%;
    width: 44.3%;
    height: 3px;
    background: #ffffff;
    transform: translateY(-50%);
    transform-origin: left center;
    z-index: 99;
}

/* 所有放射线通用样式：统一原点、旋转自适应 */
.radial-line {
    position: absolute;
    /* 放射原点 = 基准白线右端 */
    left: 49%;
    top: 50%;
    width: 51%;
    height: 2px;
    transform-origin: left center; /* 旋转锚点固定在起点 */
}

/* 每条线只改旋转角度，宽度变化角度永远不变 */
.line-orange-2 {transform: rotate(30deg);background: #ff9900;}
.line-red      {transform: rotate(14deg);background: #ff3333;width: 51%;}
.line-green    {transform: rotate(-4deg);background: #36c94a;}
.line-blue-1   {transform: rotate(-27deg);background: #22aaff;width: 51%;}

/* 所有编号圆点通用 */
.dot {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 2.2vw, 20px);
}

/* 6个点位百分比精准定位，全宽度自适应 */
.dot-1 {top: 76%;left: 81%;background: #ff9900;}
.dot-2 {top: 86%;right: 0;background: #ff9900;}
.dot-3 {top: 63%;right: 0;background: #ff3333;}
.dot-4 {top: 41%;right: 0;background: #36c94a;}
.dot-5 {top: 18%;left: 82%;background: #22aaff;}
.dot-6 {top: 10%;right: 0;background: #22aaff;}

@media only screen and (max-width: 1600px) {
    .dot {/* font-size: 18px; */}
    .dot-1 {}
    .dot-2 {/* bottom: 45px; */}
    .dot-5 {}
    .dot-6 {}
    .links li a p { font-size: 18px; }
}
@media only screen and (max-width: 1500px) {
    .dot-5 {}
}
@media only screen and (max-width: 1400px) {
    .title h2 {/* font-size: 60px; */}
    .title h2::before { bottom: -20px; }
    .title { margin-bottom: 50px; }
    .Overview .img .pic { height: 500px; }
    .Overview .more { margin-top: 30px; }
    .index2 li h2 {/* font-size: 24px; */}
    .index3 .lib li a { font-size: 15px; }
    .dot-5 {}
    .dot-6 {}
    .dot-3 {}
    .dot-1 {}
    .dot-2 {}
    .links li a p {}
    .links { padding: 30px; }
}
@media only screen and (max-width: 1300px) {
    .dot-5 {top: 18%;left: 79%;}
    .dot-6 {}
    .dot-1 {}
    .dot-2 {}
    .dot-4{
    }
}
@media only screen and (max-width: 1200px) {
    .body_home { height: auto; }
    .body_b { width: auto; height: auto; position: static; opacity: 1; transform: none; overflow: hidden; padding-top: 0px; }
    .home body { overflow: auto; height: auto; }
    .banner .slider img { height: auto; }
    .banner .bannertb2 { display: none; }
    .Overview .img { width: 100%; float: none; }
    .Overview .text { width: 100%; float: none; margin-top: 30px; }
    .index1 { padding: 50px 0px; }
    .title h2 {/* font-size: 50px; */line-height: 1;}
    .title .more { line-height: 50px; }
    .title h2::before { display: none; }
    .title { margin-bottom: 40px; }
    .Overview .img .pic { height: auto; }
    .Technology li h2 {/* font-size: 24px; */}
    .Technology li .img {/* margin: 25px 0px; */height: 220px;}
    .Technology li p {/* font-size: 16px; */}
    .Technology { margin: 100px 0px 0px; }
    .index2 li .img { height: 240px; }
    .index2 li h2 {/* font-size: 20px; *//* line-height: 35px; */}
    .index2 li p, .index2 h3 {/* font-size: 17px; */}
    .index2 { padding: 70px 0px; }
    .index3 .tux {width: 90%;margin: auto 0;float: none;padding: 20px 0;}
    .index3 .lib { width: 100%; }
    .base-line {width: 31%;}
    .dcls-logo{
        width: 30%;
        top: 26%;
    }
    .radial-line {
        width: 65%;
        left: 36%;
    }
    .line-orange-2 {
        transform: rotate(29deg);
        background: #ff9900;
        width: 63%;
    }
    .line-blue-1 {
        transform: rotate(-23deg);
    }
    .dot-1 {
        top: 86%;
    }
    .dot-2 {top: 92%;right: 7%;}
    .dcls-container {}
    .dot-3 {
        top: 70%;
    }
    .dot-4 {
        top: 40%;
    }
    .dot-6 {top: 8%;right: 0%;}
    .dot-5 {
        top: 17%;
        left: 81%;
    }
    .links .ul{
    row-gap: 2rem;
    margin: 30px 0;
}
    .links li a p {}
    .links li {width: 47%;}
    .links li a span{
    width: 35%;
}
    .links li a p{
    width: 100%;
}
}
@media only screen and (max-width: 1100px) {
    .dot-6 {}
    .dot-5 {}
    .dot-1 {}
    .dot-2 {}
}
@media only screen and (max-width: 1000px) {
    .dot-6 {}
    .dot-5 {top: 15%;}
    .dot-4 {top: 40%;}
    .dot-1 {top: 83%;left: 77%;}
    .dot-2 {}
    .dot-3 {}
    .index3 .lib { padding: 0px; }
    .index3 { padding: 80px 0px; }
}
@media only screen and (max-width: 840px) {
    .line-orange-2 {width: 65%;}
    .index3 .tux{width:100%}
    .dot-3 {top: 68%;}
    .dot-1 {top: 83%;left: 78%;}
    .dot-2 {top: 91%;right: 4%;}
    .dot-5 {}
    .dot-6 {}
}
@media only screen and (max-width:600px) {
    .dot-6 {
        top: 6%;
        right: 0%;
    }
    .dot-5 {top: 16%;left: 75%;}
    .dot-4 {top: 38%;}
    .dot-1 {top: 84%;left: 79%;}
    .dot-2 {
        top: 92%;
        right: 0;
    }
    .dot-3 {
        top: 66%;
    }
    .index3 .lib { padding: 0px; }
    .index3 { padding: 80px 0px; }
}

@media only screen and (max-width:480px) {
    .dot{
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
    }
    .dot-6 {
        top: 7%;
        right: 0%;
    }
    .dot-5 {top: 16%;left: 76%;}
    .dot-4 {top: 38%;}
    .dot-1 {top: 84%;left: 79%;}
    .dot-2 {
        top: 93%;
        right: 0;
    }
    .dot-3 {
        top: 66%;
    }
    .index3 .lib { padding: 0px; }
    .index3 { padding: 80px 0px; }
}

@media only screen and (max-width: 960px) {
    .title h2 { font-size: 40px; }
    .title .more { line-height: 40px; }
    .Technology li h2 { font-size: 20px; }
    .Technology li { float: none; width: 100%; margin-right: 0px; margin-bottom: 20px; }
    .Technology li:last-child { margin-bottom: 0px; }
    .Technology li .img { height: auto; margin: 10px 0px; }
    .index2 li { width: 100%; margin-bottom: 25px; }
    .index2 li .img { height: auto; }
    .index2 { padding: 50px 0px; }
    .index2 li:last-child { margin-bottom: 0px; }
}
@media only screen and (max-width: 768px) {
    .title h2 { font-size: 30px; }
    .index1 { padding: 30px 0px; }
    .title { margin-bottom: 30px; }
    .w1480 { width: 100%; padding: 0px 3.5%; }
    .title .more { line-height: 30px; }
    .Technology { margin: 80px 0px 0px; }
    .Technology li h2 { font-size: 18px; }
    .index3 { padding: 40px 0px; }
    .dcls-container { }
    .index3 .lib li { line-height: 40px; padding-left: 30px; }
    .links { padding: 10px 3.5%; }
}
@media only screen and (max-width: 640px) {
    .title h2 { font-size: 20px; }
    .index1 { padding: 25px 0px; }
    .title { margin-bottom: 25px; }
    .Overview .text p { font-size: 15px; line-height: 28px; }
    .Overview .text { margin-top: 20px; }
    .Overview .more { margin: 20px auto 0px; float: none; height: 50px; line-height: 50px; width: 100%; }
    .title .more { line-height: 20px; font-size: 12px; }
    .Technology { margin: 50px 0px 0px; }
    .Technology li h2 { font-size: 17px; }
    .index2 li p, .index2 h3 { font-size: 15px; line-height: 25px; text-align: justify; margin-bottom: 20px; }
    .index2 li p { margin-bottom: 0px; }
    .index2 { padding: 30px 0px; }
    .index2 li h2 { font-size: 17px; line-height: 1; margin: 15px 0px 10px; }
    .links li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    }
    .links .ul{
    row-gap: 2rem;
    margin: 20px 0;
}
    .links li a span{width: 16%;}
    .links li a p {font-size: 18px;text-align: left;padding-left: 15px;margin: 0;}
    .links li {width: 100%;}
}
@media only screen and (min-width: 1200px) {
    .aos-animate.text { animation: 1s ease 0.5s 1 normal backwards running fadeInLeft; }
    .aos-animate.img { animation: 1s ease 0.5s 1 normal backwards running fadeInRight; }
    .Technology .title, .Technology li, .index2 .title, .index2 h3, .index2 li, .index3 .title { opacity: 0; visibility: hidden; }
    .Technology .title.aos-animate, .index2 .title.aos-animate, .index3 .title.aos-animate { opacity: 1; visibility: visible; animation: 1s ease 0.5s 1 normal backwards running fadeInUp; }
    .Technology .aos-animate li { opacity: 1; visibility: visible; animation: 1s ease 1s 1 normal backwards running fadeInUp; }
    .Technology .aos-animate li:nth-child(2) { animation: 1.2s ease 1.2s 1 normal backwards running fadeInUp; }
    .Technology .aos-animate li:nth-child(3) { animation: 1.4s ease 1.4s 1 normal backwards running fadeInUp; }
    .index2 h3.aos-animate { opacity: 1; visibility: visible; animation: 1s ease 1s 1 normal backwards running fadeInUp; }
    .index2 .aos-animate li { opacity: 1; visibility: visible; animation: 1.2s ease 1.2s 1 normal backwards running fadeInUp; }
    .index2 .aos-animate li:nth-child(2) { animation: 1.4s ease 1.4s 1 normal backwards running fadeInUp; }
    .index2 .aos-animate li:nth-child(3) { animation: 1.6s ease 1.6s 1 normal backwards running fadeInUp; }
    .index3 .dcls-logo, .index3 .base-line, .index3 .radial-line, .index3 .dot { opacity: 0; visibility: hidden; }
    .index3 .aos-animate .dcls-logo { opacity: 1; visibility: visible; animation: 1s ease 0.8s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .base-line { opacity: 1; visibility: visible; animation: 1s ease 1s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .line-blue-1 { opacity: 1; visibility: visible; animation: 1s ease 1.2s 1 normal backwards running fadeInUp1; }
    .index3 .aos-animate .line-green { opacity: 1; visibility: visible; animation: 1s ease 1.4s 1 normal backwards running fadeInUp2; }
    .index3 .aos-animate .line-red { opacity: 1; visibility: visible; animation: 1s ease 1.6s 1 normal backwards running fadeInUp3; }
    .index3 .aos-animate .line-orange-2 { opacity: 1; visibility: visible; animation: 1s ease 1.8s 1 normal backwards running fadeInUp4; }
    .index3 .aos-animate .dot { opacity: 1; visibility: visible; }
    .index3 .aos-animate .dot-1 { animation: 1s ease 2s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .dot-2 { animation: 1s ease 2.2s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .dot-3 { animation: 1s ease 2.4s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .dot-4 { animation: 1s ease 2.6s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .dot-5 { animation: 1s ease 2.8s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .dot-6 { animation: 1s ease 3s 1 normal backwards running fadeInUp; }
    .index3 .lib li { opacity: 0; visibility: hidden; }
    .index3 .aos-animate .lib li { opacity: 1; visibility: visible; }
    .index3 .aos-animate .lib li:nth-child(1) { animation: 1s ease 2s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .lib li:nth-child(2) { animation: 1s ease 2.2s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .lib li:nth-child(3) { animation: 1s ease 2.4s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .lib li:nth-child(4) { animation: 1s ease 2.6s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .lib li:nth-child(5) { animation: 1s ease 2.8s 1 normal backwards running fadeInUp; }
    .index3 .aos-animate .lib li:nth-child(6) { animation: 1s ease 3s 1 normal backwards running fadeInUp; }
}