.blogs_banner {
    position: relative;
    background: url(../image/blog-banner.webp) no-repeat center 15% / cover
}

.blogs_banner:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(0,0,0,.3)
}

.blogs_banner>.content {
    position: relative;
    z-index: 3
}

body form#sytech-newsletter-subscription p.failed:after,body form#sytech-newsletter-subscription p.success:after {
    border-color: var(--theme_color) transparent transparent transparent
}

.blogs_banner .head {
    width: 50%;
    padding: 9.375rem 0 14.375rem
}

body form#sytech-newsletter-subscription p.failed.active,body form#sytech-newsletter-subscription p.success.active {
    top: -6rem
}

.blogs_banner .head span {
    color: #fff;
    opacity: .75
}

.blogs_banner .head h1 {
    font-weight: 600;
    width: 80%;
    font-size: 52px;
    color: #fff;
    padding-top: 15px;
    line-height: 4.5rem
}

.blogs_banner .head p {
    width: 90%;
    font-weight: 200;
    color: #fff;
    padding-top: 16px
}

.blogs_banner .head form {
    margin-top: 40px;
    width: 88.2%;
    height: 54px;
    position: relative
}

.blogs_banner .head form input[type="email"] {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    border-radius: 20rem;
    padding: 0 calc(32.342% + 25px) 0 25px
}

body form#sytech-newsletter-subscription p.failed,body form#sytech-newsletter-subscription p.success {
    background-color: var(--theme_color)
}

.blogs_banner .head form input[type="submit"] {
    position: absolute;
    top: 0;
    border-radius: 20rem;
    right: 0;
    width: 32.342%;
    height: 100%;
    background-image: linear-gradient(to right,var(--theme_color),var(--subtheme_color),var(--theme_color));
    color: #fff;
    background-size: 200%;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s;
    border-radius: 27px
}

.blogs_banner .head form input[type="submit"]:hover {
    background-position: right
}

.blogs_main {
    padding: 95px 0 150px
}

.blogs_main .head h2 {
    padding-top: 18px
}

.blogs_main .blog_center {
    padding-top: 4.0625rem
}

.blogs_main .blog_center .img {
    border-radius: 8px;
    overflow: hidden
}

.blogs_main .blog_center .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s
}

.blogs_main .blog_center .left {
    width: 62.95%;
    display: block
}

.blogs_main .blog_center .left:hover .img img {
    transform: scale(1.1)
}

.blogs_main .blog_center .left .img {
    height: 488px
}

.blogs_main .blog_center .left span {
    display: block;
    margin-top: 35px;
    font-size: 18px;
    font-weight: 500;
    color: var(--theme_color)
}

.blogs_main .blog_center .left h2 {
    width: 90%;
    font-size: 28px;
    font-weight: 600;
    color: #25292d;
    margin: 1rem 0;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.blogs_main .blog_center .left p {
    font-size: 17px;
    color: #8a8a8a;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.blogs_main .blog_center .left .button {
    margin-top: 35px;
    font-size: 18px;
    width: 187px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px
}

.blogs_main .blog_center .right {
    width: 32.05%
}

.blogs_main .blog_center .right a {
    display: block;
    margin-bottom: 3.125rem
}

.blogs_main .blog_center .right a:nth-child(2) {
    margin-bottom: 0
}

.blogs_main .blog_center .right a:hover .img img {
    transform: scale(1.1)
}

.blogs_main .blog_center .right a .img {
    height: 15.5625rem
}

.blogs_main .blog_center .right a span {
    display: block;
    margin-top: 1.5625rem;
    font-weight: 500;
    color: var(--theme_color)
}

.blogs_main .blog_center .right a h2 {
    margin-top: .5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #25292d;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.blogs_main .bottom {
    padding: 70px 0
}

.blogs_main .bottom ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.375rem
}

.blogs_main .bottom ul li {
    box-shadow: 0 0 15px rgba(0,0,0,.1)
}

.blogs_main .bottom ul li:hover .img img {
    transform: scale(1.1)
}

.blogs_main .bottom ul li .info {
    padding: 1.375rem 1.5625rem 2.5rem
}

.blogs_main .bottom ul li .img {
    height: 15.5rem;
    border-radius: .5rem;
    overflow: hidden
}

.blogs_main .bottom ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s
}

.blogs_main .bottom ul li span {
    font-size: 1rem;
    color: var(--theme_color)
}

.blogs_main .bottom ul li h2 {
    min-height: 4rem;
    font-size: 23px;
    font-weight: 600;
    line-height: 2rem;
    color: var(--title_color);
    margin: 12px 0 15px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.blogs_main .bottom ul li p {
    min-height: 78px;
    font-size: 15px;
    line-height: 26px;
    color: var(--content_color);
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.blogs_main .bottom ul li strong {
    display: block;
    width: 164px;
    height: 44px;
    line-height: 44px;
    border-radius: 22px;
    background-color: #ebecee;
    font-size: 17px;
    font-weight: 500;
    color: var(--title_color);
    text-align: center;
    margin-top: 25px
}

.blogs_main .bottom ul li strong:hover {
    color: #fff;
    background-image: var(--bg_color)
}

.category-nav {
    margin-top: 3rem
}

.category-nav ul {
    justify-content: center;
    gap: 1.5rem
}

.category-nav a {
    display: inline-block;
    padding-bottom: .7rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease
}

.category-nav li.active a,.category-nav li:hover a {
    border-bottom: 2px solid var(--theme_color)
}