.clean-project-area .section-sub-title {position:relative;display:inline-block;}
.clean-project-area .section-sub-title::before {position:absolute;content:"";height:3px;width:50px;background:var(--color-second);left:-54px;top:8px;}
.clean-project-area .section-sub-title::after {position:absolute;content:"";height:3px;width:50px;background:var(--color-second);right:-56px;top:8px;}
.clean-project-area .section-sub-title h4 {font-size:17px;color:var(--color-second);font-weight:600;margin-bottom:19px;}
.clean-project-area .section-main-title {margin-bottom:13px;}
.clean-project-area .section-main-title h2 {font-size:44px;color:var(--color-second);font-weight:600;}
.clean-project-area .section-discription {width:44%;margin:auto;margin-bottom:60px;}
.clean-project-area .section-discription p {color:#616161;font-weight:400;opacity:0.800;font-size:16px;line-height:24px;font-weight:700;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;}
.clean-project-area {padding-top:30px;}
.clean-project-area .project-single-box {overflow:hidden;margin-bottom:50px;}
.clean-project-area .project-thumb {position:relative;transition:.5s;}
.clean-project-area .project-single-box:hover .project-thumb {}
.clean-project-area .project-content {position:absolute;bottom:-120px;left:0;background:url('./pic/project-shape.png');width:66%;right:0;margin:auto;transition:.5s;display:flex;justify-content:space-between;}
.clean-project-area .project-single-box:hover .project-content {bottom:40px;}
.clean-project-area .project-content-title {padding:19px 23px 20px;}
.clean-project-area .project-content-title h5 a {display:inline-block;text-decoration:none;font-size:18px;line-height:24px;color:var(--color-second);font-weight:600;transition:.5s;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.clean-project-area .project-content-title h5 a:hover {color:#ffff;}
.clean-project-area .project-content h6 {font-size:14px;line-height:24px;color:#ffffff;font-weight:400;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.clean-project-area .project-thumb img {aspect-ratio:3/2;}
.clean-project-area .project-content-icon {padding:15px 20px 0;}
.clean-project-area .project-content-icon i {width:40px;height:40px;border-radius:20px;background-color:#ffffff;border:1px solid #ffff;display:inline-block;line-height:40px;text-align:center;font-size:26px;color:#000;transition:.5s;}
.clean-project-area .project-content-icon i:hover {border:1px solid #fff;background:inherit;color:#fff;}
.clean-project-area .project-text {position:absolute;bottom:-95px;left:13px;transition:.5s;}
.clean-project-area .project-single-box:hover .project-text {bottom:-190px;}
.clean-project-area .project-text h3 {font-size:30px;color:var(--color-second);font-weight:600;background:var(--color-primary);text-align:center;width:189px;height:189px;line-height:123px;clip-path:polygon(9% 41%,50% 0%,100% 50%,0% 49%);}

/* project button */
.clean-project-area .clean-home-btn.project a {background:var(--color-primary);color:#ffff;padding:18px 35px;border-radius:var(--button-radius);}
.clean-project-area .clean-home-btn.project a:hover {background-color:var(--btn-hover);}
.clean-project-area .clean-home-btn.project a::before {background:var(--color-second);}
.clean-project-area .clean-home-btn.project a::after {background:var(--color-second);}

@media (min-width:1200px) and (max-width:1600px) {
.clean-project-area .project-thumb img {width:100%;}
.clean-project-area .project-text h3 {font-size:24px;width:150px;height:190px;}
.clean-project-area .project-content {width:80%;}
}

@media screen and (max-width:1441px) {
.clean-project-area .project-single-box{margin-bottom:40px;}
}

@media screen and (max-width:1280px) {
.clean-project-area .project-single-box{margin-bottom:30px;}
}


@media screen and (max-width:1171px) {
.clean-project-area .project-thumb img {width:100%;}
.clean-project-area .project-text h3 {font-size:24px;width:150px;height:190px;}
.clean-project-area .project-content {width:76%;}
.clean-project-area .project-content-title {padding:19px 18px 20px;}
.clean-project-area .project-content-title h5 a {font-size:16px;}
.clean-project-area .project-content-icon i {width:35px;height:35px;line-height:35px;font-size:20px;}
.clean-project-area .project-text {bottom:-97px;}
}

@media screen and (max-width:991px) {
.clean-project-area .project-thumb img {width:100%;}
.clean-project-area .project-content {width:72%;}
.clean-project-area .project-content-title {padding:18px 23px 16px;}
.clean-project-area .project-content-title h5 a {font-size:16px;}
.clean-project-area .project-content-icon i {width:35px;height:35px;line-height:35px;font-size:20px;}
.clean-project-area .project-text {bottom:-98px;left:85px;}
.clean-project-area .clean-home-btn.project a {padding:16px 30px;font-size:16px;}
}

@media screen and (max-width:767px) {

.clean-project-area .project-single-box{margin-bottom:20px;}


}

@media screen and (max-width:576px) {
.clean-project-area .section-discription {width:100%;}

}

@media screen and (max-width:480px) {

.clean-project-area .project-single-box{margin-bottom:15px;}

.clean-project-area .project-thumb img {width:100%;}
.clean-project-area .project-content {width:88%;}
.clean-project-area .project-content-title {padding:11px 20px 10px;}
.clean-project-area .project-content-title h5 a {font-size:16px;}
.clean-project-area .project-content-icon {padding:17px 19px 0;}
.clean-project-area .project-content-icon i {width:35px;height:35px;line-height:35px;font-size:20px;}
.clean-project-area .project-text {bottom:-99px;left:63px;}
.clean-project-area .project-text h3 {font-size:24px;width:165px;height:174px;line-height:100px;}
.clean-project-area .clean-home-btn.project a {padding:12px 22px;font-size:16px;}
.clean-project-area .section-discription {width:100%;}
}