.banner {height: 400px;position: relative;overflow: hidden;margin-bottom: 40px;}
.banner a {background-repeat: no-repeat;background-position: center;-webkit-background-size: cover;background-size: cover;}
.banner .swiper-pagination-bullet {height: 12px;width: 12px;border-radius: 12px;}
.index-title {margin-bottom: 40px;display: flex;flex-flow: column;align-items: center;justify-content: center;line-height: 1.5;}
.index-title h3 {position: relative;padding-bottom: .7em;color: #F70101;font-size: 22px;font-weight: 400;}
.index-title h3::before {content: '';position: absolute;bottom: .3em;left: 50%;transform: translateX(-50%);width: 6px;height: 6px;border-radius: 6px;background-color: #F70101}
.index-title p {font-size: 14px;color: #999}
.index-project {display: flex;justify-content: center;flex-flow: row wrap;margin-bottom: 50px;}
.index-project li {width: 300px;display: flex;flex-flow: column;justify-content: flex-start;align-items: center;max-width: 100vw;text-align: center;line-height: 1.5;font-size: 14px;color: #999;}
/* product */
.index-product {padding: 50px 0;}
.index-product .hd {height: 40px;display: flex;align-items: center;justify-content: space-between;}
.index-product h3 {position: relative;color: #F70101;font-size: 22px;font-weight: 400;padding-left: 1em;}
.index-product h3::before {content: '';position: absolute;left: .4em;width: 6px;height: 6px;border-radius: 6px;background-color: #F70101;top: 0;bottom: 0;margin: auto;}
.index-product .hd a {font-size: 14px;color: #999;}
.index-product .hd ul {display: flex;align-items: center;white-space: nowrap;}
.index-product .hd li {margin: 0 .5em;padding: 0 1em;line-height: 2em;cursor: pointer;}
.index-product .hd li.on {color: #F70101;position: relative;}
.index-product .hd li.on::before {content: '';position: absolute;bottom: -.3em;left: 50%;transform: translateX(-50%);width: 2em;height: 3px;border-radius: 3px;background-color: #F70101;}
.index-product .bd {width: 100%;overflow: hidden;}
.index-product .list {padding: 40px 0;display: none;gap: 14px;align-items: stretch;}
.index-product .list li {line-height: 1.5;flex-shrink: 0;width: calc(25% - 11px);}
.index-product .img {width: 100%;height: 212px;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.index-product .img img{ max-height:100%;}
.index-product .list a {background-color: #fff;padding: 14px;display: flex;flex-flow: column;text-align: center;position: relative;overflow: hidden;align-items: center;box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);transform: translateY(0);}
.index-product .list h4 {font-size: 14px;color: #222;font-weight: 400;}
.index-product .list p {font-size: 12px;color: #999;}
.index-product .list em {font-size: 14px;color: #FC5B1E;}
.index-product .list .tip {position: absolute;bottom: 1em;left: 0;font-size: 12px;color: #fff;padding: .4em .8em;z-index: 3;}
.index-product .list.on {display: flex;}
/* news */
.index-news {padding: 50px 0 60px;}
.index-news .hd {height: 40px;display: flex;align-items: center;justify-content: space-between;}
.index-news h3 {position: relative;color: #F70101;font-size: 22px;font-weight: 400;padding-left: 1em;}
.index-news h3::before {content: '';position: absolute;left: .4em;width: 6px;height: 6px;border-radius: 6px;background-color: #F70101;top: 0;bottom: 0;margin: auto;}
.index-news .hd a {font-size: 14px;color: #999;}
.index-news .hd ul {display: flex;align-items: center;white-space: nowrap;}
.index-news .hd li {margin: 0 .5em;padding: 0 1em;line-height: 2em;cursor: pointer;}
.index-news .hd li.on {color: #F70101;position: relative;}
.index-news .hd li.on::before {content: '';position: absolute;bottom: -.3em;left: 50%;transform: translateX(-50%);width: 2em;height: 3px;border-radius: 3px;background-color: #F70101;}
.index-news .bd {width: 100%;overflow: hidden;}
.index-news .list {padding: 40px 0;display: none;gap: 20px;align-items: stretch;flex-flow: row wrap;}
.index-news .list li {line-height: 1.5;flex-shrink: 0;width: calc(50% - 10px);}
.index-news .img {width: 186px;height: 130px;display: flex;align-items: center;justify-content: center;overflow: hidden;flex-shrink: 0;margin-right: 18px;}
.index-news .img img {max-width: 100%;max-height: 100%;}
.index-news .list a {background-color: #fff;padding: 14px;display: flex;flex-flow: row;position: relative;overflow: hidden;}
.index-news .list p {font-size: 16px;color: #222;margin-bottom: .5em;overflow: hidden;width: 100%;}
.index-news .list em {font-size: 14px;color: #999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.index-news .list.on {display: flex;}
.index-news .text {overflow: hidden;}
@media screen and (min-width:768px) {a:hover {transition: all .3s;}
	.index-product .hd a:hover, .index-news .hd a:hover {color: #F70101;}
	.index-product .list a:hover {box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);transform: translateY(-2px);}
	.index-news .list a:hover {box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset;background-color: #f9f9f9;}
	.index-news .list a p:hover {color: #F70101;}
	.index-product .li2 a {height: calc(50% - 7px);overflow: hidden;position: relative;}
	.index-product .li2 a+a {margin-top: 14px;}
	.index-product .li2 .img {position: absolute;right: 1px;bottom: 1px;width: 120px;height: 120px;}
	.index-product .li2 .text {position: absolute;left: 10px;top: 10px;text-align: left;z-index: 4;}
}
@media screen and (max-width:768px) {.banner {height: 32.25vw;max-height: 400px;margin-bottom: 20px;}
	.banner .swiper-pagination {transform: scale(.5);}
	.index-project li {width: 50%;font-size: 12px;}
	.index-project {margin-bottom: 30px;}
	.index-product {padding: 20px 0;}
	.index-product .hd, .index-news .hd {height: auto;display: flex;align-items: flex-start;justify-content: flex-start;flex-flow: column;position: relative;}
	.index-product .hd ul, .index-news .hd ul {width: 100%;overflow-x: scroll;padding: 10px;}
	.index-product .hd a, .index-news .hd a {position: absolute;right: 10px;line-height: 22px;}
	.index-product .list {padding: 10px;flex-flow: column;}
	.index-product .list li {width: 100%;}
	.index-product .li2 a+a {margin-top: 14px;}
	.index-news {padding: 20px 0;}
	.index-news .list {padding: 10px;gap: 10px;text-overflow: ellipsis;}
	.index-news .list li {width: 100%;}
	.index-news .img {width: 90px;height: 60px;margin-right: 10px;}
	.index-news .list a {padding: 10px;}
	.index-news .list p {font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	.index-news .list em {font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis;width: 100%;display: block;height: 3em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.index-product .list h4 {margin-top: 10px;}

}