@media only screen and (min-width: 996px) {
   .con4 {
        padding: 20px 0;
    }
    .con4con {
        max-width: 1630px;
        padding: 0 69px;
        margin: 0 auto;
    }
    .con4con ul {
        display: flex;
        flex-wrap: wrap; 
    }
    .con4con ul li {
        width: calc((100% - 60px) / 3);  
        margin-right: 30px;
        margin-bottom: 30px;
        cursor: pointer;
    }
    .con6 li {
        margin-right: 0 !important;
    }
    .con4con ul li:hover a {
        color: var(--main-color);
    }
    .con4con ul li a {
        color: var(--main-color-333);
        font-size: 16px;
    }
    .con4con ul li span {
        display: block;
        font-size: 14px;
        color: var(--main-color-999);
        margin: 10px 0;
    }
    .con4con ul li:nth-child(3n) {
        margin-right: 0;
    }
    .con4con ul li p {
        color: var(--main-color-666);
        font-size: 14px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 30px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


/*
Theme Name: Autel Green
*/

.ttcon4 {
        padding: 10px 0;
    }
    .ttcon4con {
        max-width: 1630px;
        margin: 0 auto;
        padding: 0 65px;
    }
    .ttcon4con ul {
        display: flex;
        flex-wrap: wrap;
    }
    .ttcon4con ul li:hover {
        box-shadow: var(--main-shadow);
    }
    .ttcon4con ul li {
        padding: 15px;
        transition: var(--main-transition);
        width: calc((100% - 40px) / 3);
        margin-right: 20px;
        cursor: pointer;
        margin-bottom: 20px;
    }
    .ttcon4con ul li:nth-child(3n) {
        margin-right: 0;
    }
    .ttcon4img {
        overflow: hidden;
    }
    .ttcon4img img {
        transition: var(--main-transition);
        width: 100%;
        height: 240px;
        object-fit: cover;
    }
    .ttcon4con ul li a {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #000;
        font-size: 16px;
        margin: 10px 0;
    }
    .ttcon4con ul li:hover a {
        color: var(--main-color);
    }
   
    .ttcon4con ul li p {
        font-size: 14px;
        color: var(--main-color-666);
        margin-bottom: 10px;
    }
    .ttcon4con ul li span {
        display: block;
        line-height: 25px;
        color: var(--main-color-999);
        font-size: 14px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
	 }

	 @media only screen and (max-width: 996px) { .con4 {
        padding: 30px 15px;
    }
    .con4con ul {
        display: flex;
        flex-wrap: wrap;
    }
    .con4con ul li {
        width: 100%;
        margin-bottom: 40px;
        cursor: pointer;
    }
    .con4con ul li:hover a {
        color: var(--main-color);
    }
    .con4con ul li a {
        color: var(--main-color);
        font-size: 15px;
    }
    .con4con ul li span {
        display: block;
        font-size: 13px;
        color: var(--main-color-999);
        margin: 10px 0;
    }
    .con4con ul li p {
        color: var(--main-color-666);
        font-size: 12px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 30px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }



	 .ttcon4 {
        padding: 30px 15px;
    }
    .ttcon4con {
        margin: 0 auto;
    }
    .ttcon4con ul {
        display: flex;
        flex-wrap: wrap;
    }
    .ttcon4con ul li:hover {
        box-shadow: var(--main-shadow);
    }
    .ttcon4con ul li {
        box-shadow: var(--main-shadow);
        padding: 15px;
        transition: var(--main-transition);
        width: 100%;
        cursor: pointer;
        margin-bottom: 20px;
    }
    .ttcon4img {
        overflow: hidden;
    }
    .ttcon4img img {
        transition: var(--main-transition);
        width: 100%;
        height: 240px;
        object-fit: cover;
    }
    .ttcon4con ul li a {
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #000;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .ttcon4con ul li:hover a {
        color: var(--main-color);
    }
    .ttcon4con ul li p {
        font-size: 14px;
        color: var(--main-color-666);
        margin-bottom: 5px;
    }
    .ttcon4con ul li span {
        display: block;
        line-height: 25px;
        color: var(--main-color-999);
        font-size: 14px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
	}