@import url('color.css');

/* #region 内页页面顶部banner */
.page-banner {
    height: 300px;
    background: linear-gradient(rgba(15,52,96,0.8), rgba(15,52,96,0.8)), url(/static/images/top.jpg) no-repeat center center;
    background-size: cover;
    color: var(--white);
    display: flex;
    align-items: center;            
    text-align: center;
}
.page-banner h2 {
    font-size: 42px;
    margin-bottom: 15px;
}

.page-banner p {
    font-size: 18px;
    opacity: 0.9;
}
/* #endregion */

/*  #region 内页类别导航菜单*/
.sorts-list {
    margin-top:30px;
}

.sorts-filter {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.sorts-filter-item {
    padding: 8px 25px;
    background: var(--white);
    border-radius: 30px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.sorts-filter-item.active {
    background: var(--primary);
    color: var(--white);
}
.sorts-filter-item.active a {color:var(--white);}
/* #endregion */


/* #region 文章/案例/项目列表 */

.news-list {
    padding: 10px 0 50px 0;
}
.news-wrap {
    padding:0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.news-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-card-content {
    padding: 25px;
}

.news-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--light-gray);
    color: var(--primary);
    font-size: 12px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.news-card h3 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1.5;
    height: 54px;
    overflow: hidden;
}

.news-desc {
    color: var(--mid-gray);
    font-size: 14px;
    line-height: 1.6;
    height: 48px;
    overflow: hidden;
    margin-bottom: 15px;
}

.news-info {
    display: flex;
    justify-content: space-between;
    color: var(--mid-gray);
    font-size: 12px;
}

/* #endregion */
       

/* #region 文章/案例/项目详情 */
.article-detail {
    max-width: 960px;
    margin: 0 auto;
    margin-top:50px;
    margin-bottom:50px;
}

.article-header {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    text-align: center;
}

.article-tag {
    display: inline-block;
    padding: 5px 15px;
    background: var(--light-gray);
    color: var(--primary);
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 15px;
}

.article-header h1 {
    font-size: 32px;
    color: var(--primary);
    line-height: 1.4;
    margin-bottom: 20px;
}

.article-meta {
    color: var(--mid-gray);
    font-size: 14px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.article-content {
    background: var(--white);
    padding: 50px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: 16px;
    line-height: 1.9;
    color: #444;
}

.article-content p {
    margin-bottom: 25px;
}

.article-content h2 {
    font-size: 24px;
    color: var(--primary);
    margin: 35px 0 20px;
    padding-left: 12px;
    border-left: 4px solid var(--secondary);
}

.article-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 20px 0;
}
    /* #region 相关推荐 */
    .related-news {
        margin-top: 50px;
    }

    .related-title {
        font-size: 22px;
        color: var(--primary);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light-gray);
    }

    .related-list {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }

    .related-item {
        background: #fff;
        padding: 15px;
        border-radius: 6px;
        box-shadow: var(--shadow);
    }

    .related-item h4 {
        font-size: 16px;
        color: var(--primary);
        line-height: 1.5;
    }
    /* #endregion */

/* #endregion */










/*页面顶部大图片*/
.headbanner{width:100%; height:222px; position:relative; background:#eee; overflow:hidden;}
.headbanner img {width: 1920px;position: absolute;left: 50%;top: 0;margin-left: -960px;}



.inside { /*background: var(--nav-bg);*/ background: linear-gradient(180deg,#ece9ff 0%,#ece9ff 26.04%,rgba(236,233,255,0) 100%); }
/*
.about { width: 1156px; margin: 0 auto; padding: 22px; background: rgba(255, 255, 255, 0.9); position: relative; z-index: 300; margin-top: -80px; border-top-left-radius: 10px;border-top-right-radius:10px; min-height: 500px; }
.about .location{height:60px;line-height:60px;color:var(--font-bold);}
.about .location a { color: var(--font-bold); }
.about .location i{margin:0 10px;}

.about .content{font-size:16px;line-height:26px;padding:30px;}
.about .content h1{font-size:26px;color:var(--font-bold);margin:30px 0;text-align:center;}
.about .content p{margin-bottom:20px;}*/

  .about-intro {
            padding: 100px 0;
        }

        .about-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-img img {
            width: 100%;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .about-text h3 {
            font-size: 30px;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .about-text p {
            font-size: 16px;
            line-height: 1.9;
            color: var(--mid-gray);
            margin-bottom: 15px;
        }

        /*联系我们*/

           .contact-page {
            padding: 100px 0;
        }

        .contact-wrap {
            margin:0 100px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
        }

        .contact-info {
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .contact-info h3 {
            color: var(--primary);
            margin-bottom: 30px;
            font-size: 24px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        .contact-item span {
            font-size: 22px;
            color: var(--secondary);
            margin-right: 15px;
            width: 30px;
            text-align: center;
        }

        .contact-item div h4 {
            color: var(--primary);
            margin-bottom: 5px;
        }

        .contact-item div p {
            color: var(--mid-gray);
        }

        .contact-form {
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #eee;
            border-radius: 4px;
            font-size: 16px;
        }

        .contact-form textarea {
            height: 120px;
            resize: none;
        }

      


.site { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin:30px 0px;}
.site .item { width:23%; text-align: center; margin:20px 0px; }
.site .photo { width: 200px; height: 200px; border: 1px solid var(--border); overflow: hidden; margin: 0 auto; border-radius:5px;}
.site .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site .name { margin-top: 10px; text-align: center; color: var(--font-bold); }
.site .name a{color:var(--font-bold);}



/*错误页面*/
.error { width: 600px; margin: 0 auto; padding: 60px 0; text-align: center; color:var(--font-bold);}
.error .note { font-weight: 500; font-size: 20px; margin: 30px 0px; }
.error .return { border: 1px solid var(--font-bold); width: 160px; height: 35px; line-height: 35px; border-radius: 5px; text-align: center; font-size: 16px; margin: 0 auto; font-weight: 600; }
.error .jump { margin: 30px 0; }
.error .jump b { color: red; }


/*项目图片列表*/

.products { width: 100%;padding:30px;}
.productslist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; width:calc(100% - 60px); }
.productslist .items { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; background: var(--border-list); border-radius: 5px; overflow: hidden; }
.productslist .items:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.productslist .items .photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.productslist .items .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.productslist .items .name { padding:20px 10px 10px 10px;; text-align: center; font-size: 16px; color: var(--font-bold); }
.productslist .items .note {padding:10px 10px 20px 10px;text-align:center;}
.productslist .items .note a { color: var(--font-light); margin-right: 10px;font-size:14px; }

.productsdetail { padding: 30px;  font-size: 16px; line-height: 26px; color:var(--font-light);}
.productsdetail strong { font-size: 18px; color:var(--font-bold); letter-spacing: 3px; }
.productsdetail p { margin-bottom: 20px; letter-spacing: 1px; text-align: justify; }
.productsdetail p:last-child { margin-bottom: 0px; }
.productsdetail img { max-width: 100%; }



.shownews { padding: 30px; }
.shownews .articletitle { font-size: 24px; line-height: 35px; text-align: center; }
.shownews .articletitle h1 { font-size: 24px; color:var(--font-bold);}
.shownews .articlefrom { margin-top: 20px; border-bottom: 1px solid var(--border); padding-bottom: 30px; text-align: center; color:var(--font-span);}
.shownews .articlefrom ul { text-align: center; width: 100%; height: 100%; }
.shownews .articlefrom li { display: inline; margin-right: 20px; }
.shownews .articlefrom li i { margin-right: 10px; }

.shownews .articlecontent { margin-top: 30px; width: 100%; overflow: hidden; }
.shownews .articlecontent p, .shownews .articlecontent section { margin-top: 20px; font-size: 16px; line-height: 1.75em; text-align: justify; word-break: break-word; }
.shownews .articlecontent img { max-width: 100%; display: block !important; margin: 0 auto; border-radius: 5px; }


/*合作伙伴*/
.case { width: 100%; padding: 30px; }
.case .aboutphotolist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; width: calc(100% - 60px);  }
.case .items { background: var(--border-list); border-radius: 8px; padding: 0 10px; border: 1px solid var(--border); overflow: hidden;margin:10px 0px; }
.case .items img { width: 100%; height: 100%; object-fit: cover; }



/*解决方案*/
/*.insidenav{background:#f4f4f4;height:64px;width:100%;}
.insidenav .sort {height:32px;line-height:32px;padding-top:16px; }
.insidenav .sort ul{}
.insidenav .sort li{float:left;font-size:20px;*//*width:119px;*//*border-left:1px solid #e0e0e0;text-align:center;}
.insidenav .sort li a{color:#000000;padding-bottom:5px;margin:0 30px;}
.insidenav .sort li.hover a,.insidenav .sort li:hover a{color:#c7161e;border-bottom:2px solid #c7161e;}

.insidenav .sorten li{font-size:16px;}
.insidenav .sorten li a { margin:0 25px; }



.inside{width:100%;clear:both;}

.websitecontent{padding:60px 10px 120px 10px;color:#555555;font-size:16px;line-height:26px;}
.websitecontent p strong{font-size:28px;color:#0543bc;letter-spacing:3px;}
.websitecontent p{margin-bottom:20px;text-align:justify;letter-spacing:1px;}
.websitecontent p:last-child{margin-bottom:0px;}
.websitecontent img{max-width:100%;}
.websitecontent .more{visibility:hidden; background:#e24c2e;width:124px;height:40px;line-height:40px;border-radius:20px;text-align:center;font-size:18px;letter-spacing:2px;margin:0 auto;margin-top:90px;position:relative;}
.websitecontent .more a{color:#ffffff;}

.websitecontent .returntop{font-size:18px;line-height:26px;height:26px;display: flex;align-items:center;float:right;margin-top:-34px;}
.websitecontent .returntop i{font-size:26px;margin-left:10px;
                             }
.websitecontent .returntop a{color:#555555;}

.websitecontenten p strong{letter-spacing:1px;}*/


/*产品*/
/*.productsnav { background: #f3f5f7; height: 80px; width: 100%; }
.productsnav .sort {height:80px;line-height:80px;}
.productsnav .sort ul{}
.productsnav .sort li{float:left;font-size:20px;width:392px;text-align:center;background:#ffffff;margin-right:12px;}
.productsnav .sort li:last-child{margin-right:0px;}
.productsnav .sort li a{color:#000000;padding-bottom:5px;}
.productsnav .sort li.hover a,.productsnav .sort li:hover a{color:#c7161e;}


.products{width:100%;clear:both;background:#f3f5f7;padding-top:12px;padding-bottom:60px;}

.productsleft{float:left;width:254px;padding-bottom:60px;background:#ffffff;}
.productsleft .sortslist li{height:54px;line-height:54px;border-bottom:1px solid #f3f5f7;text-align:center;}
.productsleft .sortslist li a{font-size:18px;font-weight:500;color:#000;padding-bottom:5px;}
.productsleft .sortslist li a:hover,.productsleft .sortslist li.hover a{color:#c7161e;*//*border-bottom:2px solid #c7161e;*//*}

.productsright{float:left;width:922px;margin-bottom:60px;margin-left:24px;background:#ffffff;}
.productsdetail{padding:60px;color:#555555;font-size:16px;line-height:26px;}
.productsdetail p strong{font-size:22px;color:#0543bc;letter-spacing:3px;}
.productsdetail p{margin-bottom:20px;letter-spacing:1px;text-align:justify;}
.productsdetail p:last-child{margin-bottom:0px;}
.productsdetail img{max-width:100%;}

.productsdetail .more{visibility:hidden;background:#e24c2e;width:124px;height:40px;line-height:40px;border-radius:20px;text-align:center;font-size:18px;letter-spacing:2px;margin:0 auto;margin-top:60px;position:relative;}
.productsdetail .more a{color:#ffffff;}
.productsdetail .returntop{font-size:18px;line-height:26px;height:26px;display: flex;align-items:center;float:right;margin-top:-34px;}
.productsdetail .returntop i{font-size:26px;margin-left:10px;}
.productsdetail .returntop a{color:#555555;}

.productsdetailen p {  }
.productsdetailen p strong{letter-spacing:1px;}




*/


/* #region 查询列表页*/
.query {}
.query .tit{margin:50px 0px;font-size:var(--font-size-medium);text-align:center;color:var(--color-primary);}
.query .querylist{margin:0 100px;}
.querylist .items { border-bottom: 1px solid var(--color-border); margin: 10px 20px; padding-bottom: 10px; width: calc(100% - 40px); overflow: hidden; }
.querylist .items:nth-child(2n+1) {background-color:var(--color-bg-secondary);}
.querylist .items:last-child { border-bottom: none; }

.querylist .items .photo { width:100%;margin: 10px 0px; }
.querylist .items .photo .img { width: 40%; height: 220px; overflow: hidden; float: left; border-radius: 5px; }
.querylist .items .photo .img img { width: 100%; height: 100%; object-fit: cover;  }
.querylist .items .photo .text { width:calc(60% - 70px); float: left; margin-left: 30px; padding:10px 20px;}
.querylist .items .photo .text .title {color:var(--color-primary); font-size: 20px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.querylist .items .photo .text .remark { color:var(--font-light); font-size: 14px; line-height: 22px; overflow: hidden; margin: 16px 0px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; }
.querylist .items .photo .text .user { line-height: 30px; height: 30px; overflow: hidden; color:var(--font-span); font-size: 13px; }
.querylist .items .photo .text .user i { line-height: 30px; margin-right:10px; }
.querylist .items .photo .text .user i:last-child {margin-left:20px; }

.querylist .items .nophoto { width:100%;margin: 10px 0px; padding:10px 20px;}
.querylist .items .nophoto .title {color:var(--color-primary); font-size: 20px; line-height: 30px; overflow: hidden; margin-bottom: 20px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.querylist .items .nophoto .remark { color:var(--font-light); font-size: 14px; line-height: 22px; overflow: hidden; margin: 16px 0px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; }
.querylist .items .nophoto .user { line-height: 30px; height: 30px; overflow: hidden; color:var(--font-span); font-size: 13px; }
.querylist .items .nophoto .user i { line-height: 30px; margin-right:10px; }
.querylist .items .nophoto .user i:last-child {margin-left:20px; }

/* #endregion */




/* #region 表格/留言/视频 样式*/

/*有边框的表格*/
table { border: 1px #dcdcdc solid; border-collapse: collapse; }

table tr th { background: #dcdcdc; padding: 5px; border: 1px solid #aaa; font-weight: normal; }
table tr td { padding: 8px; color: #333; border: 1px solid #aaa; }
table tr td p { margin: 0px !important; padding: 0px !important; }
/*table tr:nth-child(2n+1) {background-color: #F5F5F5;}*/

.table { border: none !important; border-collapse: collapse; margin-top: 15px; }
.table tr th { padding: 0px; border: none; font-weight: normal; }
.table tr td { padding: 0px; border: none; }
.table tr td p { margin: 0px !important; padding: 0px !important; }

/*在线留言表格*/

/*在线留言表格*/
.uctable { width: 100%; overflow: hidden; border: none; }
.uctable * a { color: #0066CC; }
.uctable * a:hover { color: #FF0000; text-decoration: underline; }
.uctable tr th { background: #FFE; border-bottom: 1px solid #DBDFE1; padding: 10px; }
.uctable tr td { padding: 5px 10px; color: #333; vertical-align: top; text-align: left; border: none; }
.uctable input, .uctable button { padding: 5px 10px; border: 1px solid #dcdcdc; cursor: pointer; font-size: 16px; }

.uctable input.btn { padding: 10px 20px; cursor: pointer; font-size: 16px; border-radius: 5px; }
.uctable input.btn:hover { background: #e60e17; color: #fff; }

/*视频*/
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video iframe,
.video object,
.video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* #endregion */




/*  #region 分页导航样式 */
.pagelist {
    clear: both;
    text-align: center;
    font-size: var(--font-size-title);
    margin: 50px 0;
}

/* 链接样式 */
.pagelist a {
    display: inline-block;
    background:var(--color-bg-secondary);
    padding: 8px 15px;    
    margin-right: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
}

/* 链接 hover 效果 */
.pagelist a:hover {
    background: var(--color-primary);
    color: var(--white);
    text-decoration: none;
}

/* 非链接元素样式（当前页、省略号、禁用状态） */
.pagelist span {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--color-border);
    margin-right: 10px;
    border-radius: 5px;
}

/* 当前页码样式 */
.pagelist span.current {
    background: var(--color-primary);
    color: var(--white);
}

/* 省略号样式 */
.pagelist span.ellipsis {
    border: none;
    padding: 8px 5px;
}

/* 上一页/下一页禁用状态 */
.pagelist span.prev.disabled,
.pagelist span.next.disabled {
    color: #999;
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* 上一页/下一页链接样式 */
.pagelist a.prev,
.pagelist a.next {
    /* 可根据需要添加特殊样式 */
}

/* #endregion */