html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;background: #f9f9f9;width: 100%;line-height: 24px;letter-spacing: .2px;min-height: 100vh;font-size: 16px;font-weight: 500;transition: color .5s,background-color .5s;overflow-wrap: break-word;font-family:Quotes, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;}
*{box-sizing: border-box;margin:0;padding: 0}
header,section,article{background: #fff}
ul li{list-style-type: none;float: left;}
a{text-decoration: none}
a:hover{color: #14C187 !important;}
.logo{width: 200px;height: 80px}
.flex{display: flex}
.between{justify-content: space-between}
.just-center{justify-content: center}
.center{align-items: center}
.column{flex-direction: column}
.w100{width: 100%}
.head{margin:0 auto; width: 1200px; display: flex;justify-content: space-between;align-items: center;}
.head ul li a{color: #333;padding: 20px 30px;font-size: 20px;}
.head li.active a{color: #14C187;font-weight: bold;}
.default-color{color: #14C187}
.mobile,.mobile-nav{display: none}
.banner #playBox{ width:100%; height:550px; background:#333; position:relative; overflow:hidden;}
.banner #playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;}
.banner #playBox .oUlplay li{ float:left;width: 100vw;}
.banner #playBox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:230px; left:10px; z-index:10;}
.banner #playBox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:230px; right:10px; z-index:10;}
.banner #playBox .smalltitle {width:100%; height:10px; position:absolute; bottom:15px; z-index:10}
.banner #playBox .smalltitle ul{ width:120px; margin:0 auto;}
.banner #playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
.banner #playBox img{width: 100vw;height: 550px}
.banner #playBox .smalltitle .thistitle{ background:#69aaec;}
section.content{margin: 0 auto;display: flex;justify-content: center;align-items: center;flex-direction: column}
h1{padding: 80px 0 30px 0;}
section.content h1{font-size: 36px;margin: 0}
.pt50{padding: 50px 0 30px 0;}
.section-desc{font-size: 20px}
.section1-content{width: 100%;position: relative;}
.section1-content img{width: 100%;height: 400px;}
.desc-box{position: absolute; top: 180px;color: #fff;text-align: center;width: 100%;line-height: 1.5;}
.desc-box .desc-title{font-size: 46px;font-weight: bold;}
.desc-box .desc{font-size: 28px;}
.section2-content{width: 1200px; display: flex; justify-content: space-between; align-items: center;}
.section2-content .img-box{width: 50%}
.section2-content .img-box img{width: 600px;height: 230px;}
.heng img{width: 400px !important;}
.shu img{width: 100% !important;}
.section2-content .desc-boxs{width: 46%}
.desc-boxs h3{padding-bottom:30px;font-size: 28px}
.desc-boxs p{padding: 10px 0}
.heng .desc-boxs{display: flex;flex-direction: column;justify-content: space-around;}
.heng h2, .shu h2, .tu h2{font-size: 28px}
.desc-boxs h4{font-size: 22px}
.shu .desc-boxs{width: 40%}
.shu .img-box{width: 60%}
.tu img{padding-top: 50px;height: 450px}
.changjing{justify-content: space-between;}
.changjing img{ width: 100%; height: 220px;}
.changjing .cj-img{position: relative; width: 24%;cursor: pointer;opacity: 1;transform: translateY(0px) scale(1);transition: opacity 0.6s, transform 0.6s;    backdrop-filter: blur(10px);overflow: hidden;}
.changjing .cj-img::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(247, 147, 30, 0.1), transparent);transition: left 0.5s ease;}
.changjing .cj-img:hover::before {left: 100%;}
.changjing .cj-title{position: absolute;top: 95px;color: #fff; font-size: 26px; left: 66px; text-align: center;width: 150px;}
.sha img{ width: 1200px; height: 660px;}
.footer {padding: 50px 0;color: #5f676f;background: #0c1623; box-shadow: 0 5px 24px 0 rgba(159,169,176,.15),0 5px 24px 0 rgba(159,169,176,.15); margin-top: 50px;}
.container {width: 1200px;margin: 0 auto;padding: 0 100px;}
.footer-col {display: flex;flex-direction: column;justify-content: center;align-items: center;}
.footer .footer-nav, .footer .menu ul, .footer ul.menu {padding: 0;margin: 0 0 20px;font-size: 16px;list-style: none;}
.footer .footer-nav a, .footer .menu ul a, .footer ul.menu a {color: #76818c;}
.footer .footer-nav li, .footer .menu ul li, .footer ul.menu li {display: inline-block; margin-right: 15px;line-height: 1.4;}
.footer .copyright {font-size: 14px;}
.footer .copyright p:last-child { margin-bottom: 0;}
.footer .copyright p {margin: 0 0 5px;}
.footer .copyright p span{padding-right: 10px}
.clearfix::after {clear: both;}
.footer .copyright p a{color: #5f676f}
.clearfix::after, .clearfix::before {content: " ";display: table;}
.box-scoll {z-index: 2000;width: 50px;float: right;position: fixed;right: 4% !important;bottom: 80px;}
.box-scoll a {position: relative;color: #999;padding-top: 8px;display: block;font-size: 12px;text-align: center;line-height: 21px;width: 50px; height: 50px;background: rgb(93, 138, 244); margin: 0 0 2px 0; overflow: visible !important; border-radius: 100px;}
.box-scoll a:hover {background: #0279ff;color: #fff;}
.box-scoll a:hover span {display: block !important; width: 50px;height: 50px;line-height: 50px;text-align: center; background: #0279ff;color: #fff;position: absolute;left: 0;top: 0;font-size: 15px;border-radius: 100px;}
.box-scoll a:hover i {color: #fff;}
.box-scoll a#backTop {display: none;}
.box-scoll a i {margin: 0 auto;display: block;font-size: 25px;color: #0279ff; margin-bottom: 3px;}
.box-scoll a img{width: 35px;height: 35px;}
.box-scoll a span {display: none; font-size: 12px;}
.about-box{padding: 30px 0}
.about-title{font-size: 40px;display: flex;justify-content: center;align-items: center; padding: 50px 0 30px 0;}
.about, .product, .news, .contact, .news-detail{width: 1200px;margin: 20px auto;padding: 10px 20px;border-radius: 10px}
.about-left{width: 55%}
.about-left span{font-size: 36px;padding: 15px 0;font-weight: 300;}
.about-left span:first-child{color: #2851cc;}
.about-left p{text-indent: 2em;font-size: 20px;line-height: 2}
.about-content{padding-top: 60px}
.about-right{width: 43%}
.about-right img{width: 100%}
.intro{border: 1px solid #879ed5;border-radius: 10px;padding: 20px;margin: 25px 0;display: flex;justify-content: space-between;}
.intro span.title {font-size: 34px;padding: 40px 0;width: 22%; display: flex;justify-content: center; align-items: center;}
.intro span.desc {font-size: 20px;padding: 10px 0;width: 75%; line-height: 2;display: flex; align-items: center;}
.intro span:first-child {color: #5d8af4;border-right: 2px solid #5d8af4;}
.descs{font-size: 20px;padding: 0; width: 75%;line-height: 1.3;}
.product .product-title{font-size: 28px; padding:20px 0; border-bottom: 5px solid #f5f5f5;}
.product .product-box, .product .product1, .product .product2, .product .product3, .product .product4{padding: 50px 0}
.product .img-box{width: 45%;text-align: center;font-size: 18px}
.product .img-box img, .product .product1 .img1 img{width: 100%;height: auto;object-fit: cover;}
.product .product-desc{width: 50%;display: flex;flex-direction: column; justify-content: space-around;line-height: 2;}
.product .product1 .img1{width: 40%}
.product .product1 .desc1{width: 55%;font-size: 20px;display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}
.product .product1 .desc1 p{text-align: left;line-height: 2; font-size: 22px;padding-top: 30px;}
.product .product1 .img1 img{height: 300px}
.product .product2 .img1{width: 38%}
.product .product2 .desc1{width:65%;display: flex;flex-direction: column; justify-content: space-around;line-height: 1.5}
.product .product2 .desc1 h2{font-size: 30px;color: #3281d5;}
.product .product2 .desc1 p{font-size: 20px}
.product .product3 .img1{width: 48%}
.product .product3 .desc1{width:52%;display: flex;flex-direction: column; justify-content: space-around;line-height: 1.8}
.product .product4{position: relative}
.product .product4 img{width: 100%;position: relative}
.product .product4 .left, .product .product4 .right{position: absolute;top:310px;display: flex;flex-direction: column;z-index: 10;line-height: 2; width: 25%;}
.product .product4 .left{left: 150px;font-size: 18px;}
.product .product4 .right{right: 135px;top:333px;align-items: flex-end;}
.product:nth-child(2) .product-title, .product:nth-child(4) .product-title, .product:nth-child(6) .product-title{text-align: right}
.entry-breadcrumb {padding: 0 0 10px 0;margin: 0 !important;color: #999;background: #fff !important;border-radius: 0;border-bottom: 1px solid #f7f7f7;}
.breadcrumb {margin-bottom: 20px;list-style: none; background-color: #f5f5f5;border-radius: 4px;}
.breadcrumb img{vertical-align: text-bottom;}
.breadcrumb > li {display: inline-block;}
li {list-style: none;}
.breadcrumb > li + li::before {content: "/"; padding: 0 5px;color: #ccc;}
.entry-breadcrumb a, .entry-breadcrumb span {color: #999;}
.news .news-box{margin: 40px 0;cursor: pointer}
.news .news-box .news-img{width: 20%;position: relative;}
.news .news-box .news-info{width: 78%;display: flex;flex-direction: column;justify-content: space-around;}
.news .news-box img{width: 100%;border-radius: 8px;}
.news .news-box:hover {    background: #1a1a1a08; border-radius: 10px;margin: 30px 5px; padding: 5px;transition: all .3s ease 0s;}
.news .news-box .news-info a{color: #333;font-size:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.news .news-box .news-info .desc{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news .news-box .item-category {background: #00000080; border-radius: 3px;color: #fff;font-size: 12px; left: 10px;line-height: 14px; padding: 4px 8px;    position: absolute;text-decoration: none;top: 10px;}
.news .news-box .item-img-inner {border-radius: 8px;display: block;overflow: hidden;}
.news .news-box .item-img-inner:hover {box-shadow: 0 0 1px 0 rgba(0,0,0,.3);transition: box-shadow .3s ease 0s;}
.news .news-box .item-img-inner:hover img {transform: scale(1.03);    transition: all .3s ease-out 0s;}
.entry{padding: 20px}
.news-detail .wrap h1.title{padding: 10px 0 20px 0;line-height: 1.5;}
.entry .entry-head {margin-bottom: 30px;}
.entry .entry-head span{padding-right: 10px;}
.entry .entry-info .dot {
    color: #1a1a1a99;
    margin: 0 5px;
}
.nickname {color: #206be7;}
.entry .entry-content {
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    position: relative;
    counter-reset: footnotes;
}

.entry .entry-content .entry-copyright p {
    margin-bottom: 8px;
    text-align: left;
    text-indent: 0;
}
.entry .entry-content .entry-copyright span {
    color: #1a1a1acc;
}

.entry .entry-content p {
    line-height: 1.8;
    margin: 0 0 20px;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.entry .entry-content img{
    width: 100%;
    display: inline-block;
}
.entry .entry-content .entry-copyright {
    background: #1a1a1a08;
    border: 1px solid #1a1a1a12;
    border-radius: 8px;
    color: #1a1a1a99;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 30px;
    padding: 15px;
}
.entry-page{padding-top:50px}
.entry-page .prev, .entry-page .next{width: 48%;color: #206be7;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.entry-page a{color: #206be7;}
.entry-page .prev span:first-child, .entry-page .next span:first-child{color: #333}
.entry-page .next{text-align: right}
.entry-related-title {
    padding: 0 0 0 12px;
    position: relative;
}
.entry-related-title::before {
    background-color: #206be7;
    background-image: linear-gradient(180deg,hsla(0,0%,100%,.15),transparent);
    border-radius: 3px;
    content: "";
    height: calc(100% - 2px);
    left: 0;
    position: absolute;
    top: 1px;
    width: 3px;
}
.contact-img{width: 100%}
.contact-img img{width: 100%;height: 500px;object-fit: cover;}
.contact-head{display: flex;justify-content: center;align-items: center;flex-direction: column;padding:30px 0;line-height: 1.5}
.contact-head .title{font-size: 34px;}
.contact-head .desc{font-size: 20px;color: #888888}
.contact-head span{width: 50px;height: 3px;background: #206be7;margin-top: 10px;}
.contact main{display: flex;justify-content: space-between;align-items: center;padding: 30px 0 100px 0}
.contact-box{
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 200px;
    background: #f6f6f6;
    border-radius: 10px;
}
.contact-box .desc{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.contact-box .img{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 40px;
}
.contact-box .img img{width: 50px;height: 50px}
.contact-box:last-child .desc span{padding: 0 10px}
@media (max-width:767px){
    header{position: relative;}
    h1{padding: 30px 0 15px 0;font-size: 24px}
    .hidden-xs{display: none}
    .section-desc{font-size: 16px;}
    .head{width: 100%}
    .toollist{display: none}
    .logo{height: 60px}
    .nav{padding: 0 10px;display: flex;cursor: pointer}
    .nav img{width: 25px;height: 25px}
    .mobile-nav{display: none;padding: 15px;width: 100%; position: absolute;z-index: 999; background: #fff;    }
    .footer {padding: 20px 0;}
    .mobile-nav li{width: 100%;padding: 10px;border-bottom: 1px solid #f7f7f7;}
    .mobile-nav li a{color: #333;width: 100%;display: block;}
    .banner #playBox{width: 100%;height: 200px}
    .banner #playBox img{height: 200px;width: 100%;object-fit: cover;}
    .banner #playBox .pre, .banner #playBox .next{top:75px}
    .banner #playBox .oUlplay li{width: 100vw}
    .section2-content{width: 100%;flex-direction: column;padding:30px 10px 0 10px}
    .sha img {width: 100%; height: auto; object-fit: cover;}
    .tu img{padding-top: 30px;height: auto}
    .section2-content .img-box, .section2-content .desc-boxs{width: 100%;}
    .section2-content .img-box img {width: 100%;height: 150px;}
    .desc-boxs h3 {padding-bottom: 10px; font-size: 20px;}
    .pt50{padding-top: 30px}
    .desc-boxs p {padding: 5px 0;font-size: 14px;}
    .heng h2, .shu h2, .tu h2, .chuantong h2{font-size: 20px;}
    .shu .between{flex-direction: column}
    .chuantong,.changjing{padding: 0}
    .chuantong h2{padding-bottom:20px}
    .heng,.heng img{width: 100% !important;}
    .heng .pt50{flex-direction: column}
    .desc-boxs h4 {font-size: 16px;text-align: center;}
    .changjing{flex-direction: column;}
    .changjing .cj-img,.changjing img{width: 100%}
    .changjing .cj-title{left: 100px;}
    .section1-content img{height: 180px;}
    .desc-box{top: 80px;}
    .desc-box .desc-title{font-size: 20px;}
    .desc-box .desc {font-size: 12px;}
    .container{width: 100%;padding: 0 20px}
    .copyright p{display: flex; flex-direction: column;justify-content: center;align-items: center;}
    .about-title {font-size: 30px;padding:25px 0 10px 0}
    .about, .product, .news, .contact{width: 100%;padding: 10px}
    .about .about-box{flex-direction: column}
    .about-left p{font-size: 16px}
    .about-left span{font-size: 28px;padding: 10px 0}
    .about-left, .about-right{width: 100%}
    .about-left span{text-align: center}
    .about-content{padding: 20px 0}
    .intro span.title {font-size: 20px;padding: 10px;width: 25%;}
    .intro{padding: 10px}
    .intro span.desc {font-size: 12px;padding: 10px 0 10px 10px;line-height: 1.5;}
    .intro .descs{font-size: 12px;padding: 10px 0 10px 10px;}
    .product .product-title{font-size: 18px;padding: 15px 0;font-weight: bold;}
    .product .product-box{flex-direction: column}
    .product .product-box .img-box, .product .product-box .product-desc{width: 100%}
    .product .product-box .product-desc h2{font-size: 18px;padding-top: 30px}
    .product .product1,.product .product3{flex-direction: column;padding: 30px 0}
    .product .product1 .img1, .product .product1 .desc1,.product .product3 .img1, .product .product3 .desc1, .news-detail,.contact{width: 100%}
    .product .product1 .desc1 p{font-size: 14px;padding-top: 10px}
    .product .product1 .desc1 img{height: 40px}
    .product .product1 .img1 img{height: 230px}
    .product .product1{padding: 10px 0}
    .product .product2{align-items: center}
    .product .product2 img,.product .product3 img{width: 100%}
    .product .product2 .desc1 h2, .product .product3 .desc1 h2{font-size: 16px;}
    .product .product2 .desc1 p {font-size: 12px;}
    .product .product-box p, .product .product3 .desc1 p{font-size: 14px;}
    .product .product4 .left {left: 10px;font-size: 10px; width: 38%;top: 135px;}
    .product .product4 .right {right: 10px;top: 140px; font-size: 10px;width: 36%;}
    .news .news-box .news-img {width: 33%;}
    .news .news-box .news-info a {font-size: 18px;}
    .news .news-box .item-category {display: none}
    .news .news-box .news-info .desc {font-size: 14px;-webkit-line-clamp: 1;}
    .news .news-box .news-info{width: 70%;padding-left: 10px;}
    .news-detail{padding-top: 20px}
    .entry{padding: 0}
    .entry-page{flex-direction: column;padding-top: 30px;}
    .entry-page .prev, .entry-page .next{width: 100%;margin: 10px 0}
    .entry-page .next{text-align: left}
    .entry .entry-content .entry-copyright{font-size: 12px}
    .contact-img img{height: 180px}
    .contact main{flex-direction: column}
    .contact-box {width: 100%;margin-bottom: 20px}
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%); /* 元素开始在左侧之外 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 元素移动到右侧 */
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100%); /* 元素开始在侧之外 */
    }
    to {
        opacity: 1;
        transform: translateX(0%); /* 元素移动到右侧 */
    }
}

.fade-in-up {
    animation: fadeInUp 1s ease-out;
}
.fade-in-left {
    animation: fadeInLeft 1s ease-out;
}
.fade-in-right {
    animation: fadeInRight 1s ease-out;
}

@keyframes fadeInRight{
    from{opacity:0;transform:translate3d(100%,0,0)}
    to{opacity:1;transform:none}
}