@import 'leftNav.css';


.layui-flow-more {
    width: 100%!important;
    /*margin: 10px auto !important;*/
}



/* 顶部横幅 */
.top-banner {
    width: 100%;
    background: linear-gradient(to right,rgba(2,113,115,1), rgba(26, 140, 122, 0.9));
/*url('https://images.unsplash.com/photo-1581094794329-c8112a7c0d32?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');*/
    /*background-size: cover;*/
    /*background-position: center;*/
    color: white;
    padding: 1.5rem 0;
}

.banner-content {
    width: 70%;
    margin: 0 auto;
}

.banner-content .title {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2rem;
}

.banner-content .titleText {
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.banner-buttons {
    width: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}
.banner-buttons .btn{
    font-size: 0.6rem;
    border: 1px solid white;
    color: white;
    letter-spacing: 1px;
    border-radius: 5px;
    margin-right: 2%;
    padding: 8px 5px;
}
.banner-buttons .btn:hover{
    background: white;
    transition: 0.6s;
    color: #027173;
    cursor: pointer;
}

/* 主要内容区域 */
.main-content {
    display: flex;
    flex-wrap: wrap;
    /*gap: 40px;*/
    padding: 2rem 0;
    /*background: pink;*/
    justify-content: space-between;
}

/* 左侧导航 */
/*.left-nav {*/
/*    width: 25%;*/
/*}*/

/*.nav-title {*/
/*    width: 100%;*/
/*    font-size: 1rem;*/
/*    color: #1a3c5a;*/
/*    !*margin-bottom: 20px;*!*/
/*    padding-bottom: 10px;*/
/*    !*border-bottom: 3px solid #1a8c7a;*!*/
/*}*/

/*.category-list {*/
/*    width: 100%;*/
/*    background: white;*/
/*    border-radius: 8px;*/
/*    overflow: hidden;*/
/*    box-shadow: 0 5px 15px rgba(0,0,0,0.05);*/
/*}*/

/*.category-item {*/
/*    padding: 1rem;*/
/*    border-bottom: 1px solid #eee;*/
/*    cursor: pointer;*/
/*    transition: all 0.3s;*/
/*    width: 100%;*/
/*    font-size: 0.6rem;*/
/*}*/

/*.category-item:last-child {*/
/*    border-bottom: none;*/
/*}*/

/*.category-item:hover {*/
/*    background: #f0f7ff;*/
/*}*/

/*.category-item.active {*/
/*    background: #027173;*/
/*    color: white;*/
/*    padding-left: 2rem;*/
/*    font-size: 0.7rem;*/
/*}*/

/* 右侧产品网格 */
.right-content {
    width: 73%;
    /*flex: 1;*/
}
.rightTopBox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    /*background: pink;*/
}
.textBox{
    width: 90%;
}
.section-title {
    width: 100%;
    font-size: 1rem;
    color: #1a3c5a;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    width: 100%;
    color: rgba(0,0,0,0.7);
    margin-bottom: 0.5rem;
    font-size: 0.6rem;
    text-align: justify;
}
.rightTopBox img{
    width: 3.5%;
    height: auto;
}

.products-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    /*display: grid;*/
    /*grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));*/
    /*gap: 30px;*/
}

.product-card {
    width: 32%;
    background: rgba(0,0,0,0.03);
    border-radius: 10px;
    overflow: hidden;
    /*box-shadow: 0 5px 15px rgba(0,0,0,0.05);*/
    transition: transform 0.3s ease;
    margin-top: 0.7rem;
    margin-right: 1%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.product-image {
    height: 8rem;
    width: 100%;
    background: rgba(255,255,255,0.7);
    /*padding:1rem 0.6rem;*/
}
.product-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-content {
    width: 100%;
    padding: 0 0.6rem;
}

.product-title {
    width: 100%;
    font-size: 0.7rem;
    line-height: 1rem;
    /*letter-spacing: 1px;*/
    word-spacing: 5px;
    color: #1a3c5a;
    margin: 0.5rem 0;
    font-weight: 600;
    text-align: justify;
    text-justify:auto;
}


.view-details {
    font-size: 0.6rem;
    background: rgba(0,0,0,0)!important;
    margin-bottom: 0.5rem;
    color: #2d5b8a;
    padding: 0 0!important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    /*gap: 8px;*/
    transition: all 0.3s;
    height: auto!important;
    line-height: 1rem!important;
}

.view-details:hover {
    color: #027173;
    /*gap: 12px;*/
}

/*媒体查询*/
@media (max-width: 900px) {
    .top-banner {
        padding: 1rem 0;
    }
    .banner-content {
        width: 96%;
    }
    .banner-content .titleText {
        opacity: 1;
        text-align: justify;
    }
    .banner-buttons {
        width: 100%;
       justify-content: space-between;
    }


    .main-content {
        padding: 1rem 0;
    }
    /*.left-nav {*/
    /*    width: 100%;*/
    /*    margin-bottom: 1rem;*/
    /*    !*padding-bottom: 0.5rem;*!*/
    /*    !*border-bottom: 1px solid #027173;*!*/
    /*}*/
    /*.category-list {*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    align-items: center;*/
    /*    border-radius: 0;*/
    /*    !*box-shadow: none;*!*/
    /*}*/
    /*.category-item {*/
    /*    padding: 0.4rem;*/
    /*    border-bottom: none;*/
    /*    width: 33%;*/
    /*    font-size: 0.7rem;*/
    /*    !*border: 1px solid #027173;*!*/
    /*    margin-bottom: 0.4rem;*/
    /*    text-align: center;*/
    /*}*/
    /*.last-category-item{*/
    /*    width: 66%;*/
    /*    text-align: justify;*/
    /*}*/
    /*.category-item .active {*/
    /*    padding-left: 0rem;*/
    /*    font-size: 0.6rem;*/
    /*}*/


    .right-content {
        width: 100%;
        /* flex: 1; */
    }
    .section-subtitle {
       line-height: 1rem;
    }
    .rightTopBox img {
        width: 8%;
    }
    .product-card{
        width: 100%;
    }

}