@font-face {
    font-family: roboto;
    font-weight: 400;
    src: url(../font/roboto-condensed-regular.woff2) format('woff2');
}

/* 容器盒子 */
.container{width:96%;max-width:19rem;margin:0 auto;box-sizing:border-box}

/* 头部 */
header{height:1.32rem;position:relative;z-index:2}

header nav{display:flex;height:100%;justify-content:space-between;align-items:center}
header nav>a{flex-shrink:0;display:flex;align-items:center;width:2.64rem;height:100%}
header nav>a img{width:2.64rem;height:auto}

header nav ul{flex:1;display:flex;justify-content:flex-end;margin:0 1rem}
header nav ul li{position:relative}
header nav ul li>a{position:relative;display:block;height:1.32rem;line-height:1.32rem;padding:0 .35rem;font-size:.18rem;color:#434343}
header nav ul li>a::after{content:""}
header nav ul li p{position:absolute;top:calc(100% + .2rem);left:50%;transform:translateX(-50%);background:#fff;border-radius:.08rem;box-shadow:0 0 .1rem rgba(0,0,0,.1);opacity:0;pointer-events:none;min-width:1.8rem;transition:all .3s}
header nav ul li p::before{content:"";position:absolute;top:-.1rem;left:50%;transform:translateX(-50%);border-left:.1rem solid transparent;border-right:.1rem solid transparent;border-bottom:.1rem solid #0104a9}
header nav ul li p::after{content:"";position:absolute;top:-.3rem;width:100%;height:.2rem}
header nav ul li p>a{display:block;padding:0 .15rem;white-space:nowrap;font-size:.16rem;line-height:2.5;text-align:center;color:#434343}
header nav ul .active>a,nav ul li a:hover{color:#0104a9}
header nav ul li:hover p{opacity:1;top:100%;pointer-events:auto}
header nav ul li p>a:hover{color:#0104a9}

header nav dl{flex-shrink:0;display:flex;align-items:center}
header nav dl .search{position:relative;margin-right:.24rem}
header nav dl .search i{display:block;width:.22rem;height:1.32rem;background:url(../images/search.png) no-repeat center center;background-size:100%;cursor:pointer}
header nav dl .search form{display:none;align-items:center;justify-content:space-between;padding:0 .1rem;width:1.8rem;height:.5rem;background:#f6f6f6;position:absolute;right:0;top:100%}
header nav dl .search form input[type=text]{text-indent:.5em;width:1.4rem;height:.3rem;line-height:1;background-color:#fff;border:0}
header nav dl .search form input[type=submit]{width:.3rem;height:.3rem;border-radius:50%;background:#0104a9 url(../images/search.png) no-repeat center center;background-size:50%;border:0}
header nav dl .search .show{display:flex}
header nav dl>a{display:inline-block;width:.4rem;height:.24rem;text-align:center;line-height:.24rem;background:#0104a9;font-size:.16rem;color:#fff}


/* banner */
.banner{width:100%;height:5rem}
.banner img{width:100%;height:6.5rem;object-fit:cover;object-position:left center}

.banner .slogan{position:absolute;width:85%;max-width:16.15rem;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}
.banner .slogan strong{position:relative;font-size:.48rem;font-weight:400;display:block;transform:translateX(1rem);opacity:0;transition:all .8s .3s}
.banner .slogan strong::after{position:absolute;left:0;bottom:-.1rem;display:block;content:"";width:1.4rem;height:.02rem;background:#fff}
.banner .slogan p{margin-top:.35rem;font-size:.32rem;transform:translateX(1rem);opacity:0;transition:all .8s .4s}
.banner .slogan a{display:flex;justify-content:center;align-items:center;width:1.6rem;height:.5rem;border-radius:.06rem;background:#fff;margin-top:.25rem;font-size:.16rem;color:#022fa6;opacity:0;transform:translateX(1rem);transition:all .8s .5s}
.banner .swiper-slide-active .slogan a,.banner .swiper-slide-active .slogan p,.banner .swiper-slide-active .slogan strong{opacity:1;transform:translateX(0)}
.banner .swiper-slide-active img{animation: img_scale 12s linear 0.5s 1 normal forwards;}

.banner .swiper-pagination{bottom:.3rem!important}
.banner .swiper-pagination .swiper-pagination-bullet-active{background:#0104a9!important}



/* 解决方案 */
.solution{padding:0.5rem 0;background:#f6f6f6}
.solution h5{font-size:.42rem;color:#0104a9}
.solution h6{margin-top:.3rem;font-size:.18rem}

.solution dl{display:flex;margin-top:.3rem}
.solution dl dt{width:calc(100% / 3);height:7.2rem}

.solution dl a{display:flex;width:100%;height:100%;position:relative}
.solution dl a::after{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%) rotateY(180deg);display:block;content:"";width:0;height:0;transition:all .8s}
.solution dl a > img{width:100%;height:100%;object-fit:cover}

.solution dl a p{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;opacity:.8;font-size:.28rem;color:#fff;transition:opacity .5s ease-out}
.solution dl a p i{display:block;width:.46rem;height:.46rem;overflow:hidden;margin-bottom:.22rem}
.solution dl a p i img{display:block;object-fit:contain;width:100%;height:100%;transform:translateY(0);transition:transform .5s ease-out}

.solution dl dd{width:calc(100% / 3 * 2);height:7.2rem;display:flex;flex-wrap:wrap}
.solution dl dd a{width:calc(100% / 3);height:50%}
.solution dl dd a:nth-child(-n+2){width:50%}

.solution dl a:hover::after{width:100%;height:100%;background:rgba(1,4,171,.5);transform:translate(-50%,-50%) rotateY(0)}
.solution dl a:hover p{opacity:1}
.solution dl a:hover p i img{transform:translateY(-100%)}

/* 市场应用 */
.market .market-box{height:100vh}
.market .swiper-slide img{width:100%;height:100vh;object-fit:cover;transition:transform 1s linear 2s;transform:scale(1.1,1.1)}
.market .swiper-slide-active img{transition:transform 6s linear;transform:scale(1,1)}

.market .slogan{position:absolute;top:50%;left:50%;transform:translate(-50%,-150%);width:83%;color:#fff}
.market .slogan p{font-size:.32rem;opacity:0;transform:translateX(1rem);transition:.8s .3s}
.market .slogan strong{display:block;margin-top:.3rem;font-size:.4rem;opacity:0;transform:translateX(1rem);transition:.8s .4s}
.market .slogan a{margin-top:.3rem;display:flex;justify-content:center;align-items:center;width:1.6rem;height:.5rem;background:#0104ab;border-radius:.06rem;font-size:.16rem;color:#fff;opacity:0;transform:translateX(1rem);transition:.8s .5s}
.market .swiper-slide-active a,.market .swiper-slide-active p,.market .swiper-slide-active strong{opacity:1;transform:translateX(0)}

.market .swiper-pagination{bottom:.6rem!important;display:flex;justify-content:center;gap:.8rem}
.market .swiper-pagination-bullet{background:0 0!important;display:flex;flex-direction:column;align-items:center;width:.8rem;height:auto!important;opacity:.5!important}
.market .swiper-pagination-bullet img{display:block;width:auto;height:.8rem;object-fit:contain}
.market .swiper-pagination-bullet p{white-space:nowrap;margin-top:.2rem;font-size:.16rem;color:#fff}
.market .swiper-pagination-bullet-active{opacity:1!important}

.market .prev,.market .next{display:none!important}

/* 底部 */
footer{padding:.36rem 0 0;background:#f5f5f5}

footer nav{display:flex;align-items:center;justify-content:space-between}
footer nav img{flex-shrink:0;width:3.64rem;height:.71rem}
footer nav .f-nav{display:flex;justify-content:flex-end;gap:1rem}
footer nav .f-nav dl dt{white-space:nowrap;font-size:.24rem;color:#1f1f1f}
footer nav .f-nav dl dd{margin-top:.26rem;display:flex;flex-direction:column}
footer nav .f-nav dl dd a{display:flex;height:.36rem;align-items:center;font-size:.16rem;color:#999;transition:transform .5s,color .5s}
footer nav .f-nav dl dd a:hover{transform:translateX(.1rem);color:#0104a9}

footer .copyright{margin-top:.2rem;border-top:1px solid #ccc;display:flex;justify-content:center;align-items:center;height:.6rem;font-size:.14rem;color:#999}
footer .copyright a{color:#999}

/* 内页banner */
.column-banner{position:relative;height:6.5rem;overflow:hidden}
.column-banner img{width:100%;height:6.5rem;object-fit:cover;animation: img_scale 12s linear 0.5s 1 normal forwards;}
.column-banner .solgan{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff}
.column-banner .solgan h6{font-size:.24rem}
.column-banner .solgan h5{margin-top:.22rem;font-size:.52rem}

@keyframes img_scale{
    form{transform:scale(1)}
    to{transform:scale(1.1)}
}

/* 内页容器 */
.main-box{width:73%;max-width:14rem;margin:0 auto}

/* 面包屑导航 */
.position{height:1rem;border-bottom:1px solid #c8c8c8;font-size:.16rem;color:#333}
.position nav{display:flex;flex-wrap:wrap;align-items:center;height:100%}
.position nav::before{flex-shrink:0;display:block;content:"";width:.22rem;height:.27rem;background:url(../images/icon-map.png) no-repeat;background-size:.22rem .27rem;margin-right:.12rem}
.position nav a{color:#333}
.position nav span{margin:0 .12rem}

/* 关于我们 详情 */
.about-us{position:relative;min-height:3rem;padding:.8rem 0;box-sizing:border-box}
.about-us::before{content:"ABOUT US";position:absolute;z-index:1;right:0;top:0;font-family:roboto;font-weight:400;font-size:clamp(1.2rem, 60vw, 3rem);color:rgba(242,242,242,.3);letter-spacing:.2rem;line-height:.8;white-space:nowrap;user-select:none}
.about-us article{display:flex;justify-content:space-between;position:relative;z-index:2}
.about-us .detail h1{display:inline-flex;padding-bottom:.28rem;border-bottom:2px solid #0104a9;font-size:.3rem;font-weight:700;color:#0104a9}
.about-us .detail .txt{margin-top:.38rem;font-size:.16rem;line-height:.4rem;color:#333}
.about-us .img{flex-shrink:0;margin-left:1.2rem;width:4.6rem;height:4rem}
.about-us .img img{width:100%;height:100%;object-fit:cover}

/* 新闻列表 */
.news-list{margin-bottom:.3rem}
.news-list li{padding:.3rem 0;position:relative}
.news-list li::before{position:absolute;left:0;bottom:0;display:block;content:"";height:1px;width:100%;background:#c8c8c8}
.news-list li::after{position:absolute;left:0;bottom:0;display:block;content:"";height:1px;width:0;background:#0104a9;transition:all .5s ease-in}

.news-list li a{display:flex;justify-content:space-between}

.news-list li .left-box{flex:1;min-width:0}
.news-list li .left-box .date{display:block;font-size:.16rem}
.news-list li .left-box h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.24rem 0;font-size:.2rem;color:#333}
.news-list li .left-box p{display:flex;align-items:center}
.news-list li .left-box p span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;height:.84rem;line-height:.28rem;overflow:hidden;color:#999}
.news-list li .left-box .more{display:block;margin-top:.12rem;font-size:.14rem;color:#666}

.news-list li i{flex-shrink:0;display:block;margin-left:1rem;width:3.15rem;height:2.1rem;overflow:hidden}
.news-list li i img{width:100%;height:100%;object-fit:cover;transition:transform .5s}

.news-list li:hover .more,.news-list li:hover h2{color:#0104a9}
.news-list li:hover i img{transform:scale(1.1)}
.news-list li:hover::after{width:100%}

/* 解决方案类：产品，市场应用等 */
.image-list{margin:.28rem 0;display:flex;flex-wrap:wrap;gap:.3rem .15rem}
.image-list li{width:calc((100% - .3rem)/ 3)}
.image-list li i{display:block;height:3.38rem;overflow:hidden}
.image-list li i img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.image-list li h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem;min-width:0;height:.6rem;width:100%;padding:0 2%;box-sizing:border-box;background:#eaeaea;text-align:center;line-height:.6rem;font-size:.16rem;transition:background .5s,color .5s}
.image-list li:hover i img{transform:scale(1.1)}
.image-list li:hover h2{background:#0104a9;color:#fff}

/* 详情 */
.article-info{margin:.18rem 0}
.article-info .title{text-align:center;line-height:1.3;font-size:.3rem;font-weight:700}
.article-info .date{margin-top:.14rem;text-align:center;font-size:14px;color:#666}
.article-info .date span+span{margin-left:10px}
.article-info .content{padding:.1rem 0;line-height:.38rem;font-size:16px;color:#333}

/* 留言 */
.feedback{padding:0 0 .4rem;background:url(../images/feedback_bg.jpg) no-repeat center top;background-size:cover}
.feedback h5{display:flex;height:1.2rem;justify-content:center;align-items:center;font-size:.3rem;color:#0104a9}

.feedback ul{display:flex;justify-content:space-between}
.feedback ul li{width:49%}
.feedback p{font-size:.18rem;font-weight:700}
.feedback ul li input{margin-top:.15rem;box-sizing:border-box;border:1px solid #e5e5e5;padding-left:.6rem;width:100%;height:.6rem;color:#666}
.feedback ul li .name{background:#fff url(../images/icon-u.png) no-repeat .2rem center;background-size:.21rem auto}
.feedback ul li .tel{background:#fff url(../images/icon-tel.png) no-repeat .2rem center;background-size:.23rem auto}

.feedback .message{margin-top:.2rem}
.feedback .message textarea{box-sizing:border-box;border:1px solid #e5e5e5;padding:.24rem 0 0 .6rem;line-height:.24rem;margin-top:.15rem;width:100%;height:3.6rem;background:#fff url(../images/icon-edit.png) no-repeat .24rem .21rem;background-size:.24rem auto;color:#666}

.feedback input[type=submit]{margin-top:.46rem;width:100%;height:.6rem;background:#0104a9;border:none;font-size:.2rem;color:#fff}

.contact-us::before{content:"CONTACT"}

/* 适配显示设备 */
@media screen and (max-width:1600px){
    html{font-size:95px}

    footer nav .f-nav{gap:0.75rem}
}
@media screen and (max-width:1500px){
    html{font-size:90px}
}

/* 小屏电脑 */
@media screen and (max-width:1400px){
    html{font-size:85px}

    .main-box{width:96%;max-width:none}

    footer nav .f-nav{gap:0.5rem}

    
}

/* 竖屏平板 */
@media screen and (max-width:1200px) {
    html{font-size:80px}
    nav ul{margin:0 .2rem}
    nav ul li>a{padding:0 .15rem}

    .market .swiper-pagination{gap:.6rem}
    .market .swiper-pagination-bullet img{width:100%;height:auto}

    footer nav img{width:3.2rem;height:auto}
    footer nav .f-nav dl dd a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* 手机端 */
@media screen and (max-width:768px) {
    body{padding-top:1rem}
    header{position:fixed;z-index:10;top:0;width:100%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
    header nav>a img{width:2rem;height:auto}

    header nav ul{flex:initial;display:none;position:absolute;top:1rem;left:0;width:100%;margin:0;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.2);max-height:calc(100vh - 1rem);overflow-y:auto}
    header nav ul li{border-bottom:1px solid #f5f5f5}
    header nav ul li.active{border-bottom:1px solid #0104a9}
    header nav ul li>a{position:relative;display:flex;justify-content:space-between;align-items:center;height:.75rem;padding:0 2%;font-size:.2rem}
    header nav ul li>a::after{display:block;content:"+"}

    header nav ul li p{position:relative;top:0;left:0;transform:translateX(0);background:#f5f5f5;border-radius:0;box-shadow:0 0;opacity:1;pointer-events:auto;display:none;transition:none!important;overflow-y:auto}
    header nav ul li p::after,nav ul li p::before{content:none}
    header nav ul li p>a{display:flex;justify-content:space-between;align-items:center;padding:0 2%;height:.625rem;font-size:.175rem}
    header nav ul li p>a::after{display:block;content:"";width:13px;height:24px;background:url(../images/arrow.png) no-repeat center center;background-size:auto 12px;transform:rotate(180deg)}

    header nav dl{flex:1;justify-content:flex-end}
    header nav dl .search form{right:.42rem;top:50%;transform:translateY(-50%)}

    header nav ol{margin-left:.25rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:.24rem;height:.24rem;padding:.13rem;background:#0104a9;border-radius:4px}
    header nav ol li{width:24px;height:2px;background:#fff;transition:all .5s}

    header nav ol.active li:first-child{transform:rotate(45deg) translate(6.5px,6px)}
    header nav ol.active li:nth-child(2){opacity:0}
    header nav ol.active li:last-child{transform:rotate(-45deg) translate(6.5px,-6px)}

    .banner img{object-position:20% center}
    .banner .slogan p{line-height:1.5}

    .solution dl{flex-wrap:wrap}
    .solution dl dt{height:auto;aspect-ratio:1/1.2}
    .solution dl dd{display:contents}
    .solution dl dd a{height:auto;aspect-ratio:1/1.2}
    .solution dl dd a:nth-child(-n+2){width:calc(100% / 3)}
    .solution dl a p{font-size:.18rem}

    .market .prev,.market .next{display:flex !important}
    .market .swiper{--swiper-navigation-color:#fff;--swiper-navigation-size:32px}
    .market .swiper-pagination{display:none!important}
    .market .market-box{height:calc(100vh - 1rem)}
    .market .slogan{transform:translate(-50%,-200%)}

    footer nav{justify-content:center}
    footer nav img{width:2rem}
    footer nav .f-nav{display:none}

    footer .copyright{display:block;height:auto;padding:.1rem 2%;line-height:.28rem;text-align:center;font-size:.175rem}

    .column-banner .solgan h5{font-size:.42rem}

    .about-us{padding:.3rem 0}
    .about-us::before{font-size:clamp(.4rem, 16vw, .6rem)}
    .about-us article{flex-direction:column-reverse}
    .about-us .detail{margin-top:.3rem}
    .about-us .detail .txt{margin-top:.2rem;font-size:.175rem}
    .about-us .img{margin:0;width:100%;height:auto}

    .news-list li a{flex-direction:row-reverse}
    .news-list li .left-box h2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:.56rem;line-height:.28rem;padding:0;margin:.2rem 0}
    .news-list li .left-box p{display:none}

    .news-list li i{margin:0 .125rem 0 0;width:1.25rem;height:1.25rem}


    .image-list li{width:calc((100% - .15rem)/ 2)}
    .image-list li i{height:auto;aspect-ratio:1/1.15}

    .feedback h5{display:block;height:auto;padding:.3rem 0;text-align:center;line-height:1.5;font-size:.3rem}
    .feedback ul{display:block;}
    .feedback ul li{width:100%; margin-bottom: 0.2rem;}
}