.banner {position: relative;overflow: hidden;z-index: 0;}
.banner .swiper-slide a {display: block;height: 100vh;background-repeat: no-repeat;background-position: center;-webkit-background-size: cover;background-size: cover;}
.banner .swiper-pagination {bottom: 15px;width: 100%;display: flex;justify-content: center;}
.banner .swiper-pagination .swiper-pagination-bullet {width: 18px;height: 18px;border: 4px solid #fff;background: none;opacity: .8;margin: .4em;}
.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #fff;opacity: 1;}
/*about us*/
.index-title {text-align: center;padding: 5em 0;display: flex;justify-content: center;align-items: center;}
.index-title h3 {font-size: 1.8em;font-weight: 400;margin-right: .5em;}
.index-title em {font-size: 1.5em;text-transform: uppercase;color: #999;}
.index-about {background: url(../images/bg-about.jpg) #F7F7F7 no-repeat center / cover;padding-bottom: 2em;display: flex;flex-flow: column;align-items: center;}
.index-about ul {display: flex;align-items: center;text-align: center;border-bottom: 10px solid #2CAAF2;}
.index-about li {display: flex;flex-flow: column;justify-content: center;align-items: center;padding: 2em 4em;background-color: #fff;color: #222;}
.index-about li+li {margin-left: .2em;}
.index-about li.on {background-color: #2CAAF2;color: #fff;}
.index-about li.on .xuanzhong{ display:block;}
.index-about li.on .weixuan{ display:none;}
.index-about li img{max-width: 5em;}

.index-about li .xuanzhong{ display:none;}
.index-about li .weixuan{ display:block;}

.index-about h4 {font-size: 1.3em;font-weight: 400;display: inline-block;position: relative;padding-bottom: .8em;border-bottom: 2px solid #2CAAF2;white-space: nowrap;}
.index-about li.on h4 {border-color: #fff;}
.index-about i {font-size: 3em;display: block;padding: .5em 0;color: #2CAAF2;}
.index-about li.on i {color: #fff;}

.index-about>p {max-width: 1000px;margin: 2em;line-height: 1.6em;color: #777;font-size: .93em;}
/*product*/
.index-product {background-color: #fff;padding: 80px 0 40px;overflow: hidden;display: flex;flex-flow: column;align-items: center;}
.index-product .hd {position: relative;width: 100%;margin: auto;overflow: hidden;}
.index-product .btn {position: absolute;top: 0;height: 30px;width: 50px;text-align: center;line-height: 30px;z-index: 2;background-color: #fff;}
.index-product .prev {left: 0;}
.index-product .next {right: 0;}
.index-product .hd ul {text-align: center;}
.index-product .hd li {height: 30px;line-height: 30px;background-color: #f3f3f3;color: #666;text-align: center;cursor: pointer;}
.index-product .hd li.on {color: #fff;background-color: #2CAAF2;}
.index-product .bd {width: 100vw;max-width: 1200px;margin: 0 auto;}
.index-product .bd ul {display: none;flex-flow: row wrap;max-width: 1200px;margin: 0 auto;padding: 60px 0 0;}
.index-product .bd ul.on {display: flex;}
.index-product .bd li {flex-shrink: 0;width: 270px;margin-right: calc(33.333% - 360px);overflow: hidden;margin-bottom: 40px;}
.index-product .bd li:nth-child(4n) {margin-right: 0;}
.index-product .img {width: 270px;height: 240px;display: block;position: relative;overflow: hidden;background-color: #f6f6f6}
.index-product .img img {position: absolute;transform: translate(-50%, -50%);left: 50%;top: 50%;max-width: 100%;max-height: 100%;}
.index-product .text {white-space: nowrap;display: block;text-align: center;padding: 1em 0;}
.index-pro-tit {width: 100%;max-width: 1200px;margin: 0 auto;position: relative;padding: 0 50px;}
.index-product .text:hover {color: #2CAAF2;}
/*news*/
.index-news {background-color: #f6f6f6;padding-bottom: 40px;}
.index-news ul {display: flex;width: 1200px;margin: 0 auto;max-width: calc(100vw - 20px);flex-flow: row wrap;}
.index-news li {flex-shrink: 0;width: 580px;max-width: 100%;margin-right: calc(100% - 1160px);padding: 1.5em 0;border-bottom: 1px solid #aaa;position: relative;}
.index-news li:nth-child(2n) {margin-right: 0;}
.index-news li a {display: block;color: #333;line-height: 2;}
.index-news .index-title {max-width: 1200px;margin: 0 auto;position: relative;padding-bottom: 3em;}
.index-news .more {position: absolute;right: 0;}
.index-news li a:hover {color: #2CAAF2;}
.index-news .more:hover {color: #2CAAF2;}
.index-news li em {position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
/*case*/
.index-case .index-title {max-width: 1200px;margin: 0 auto;position: relative;padding-bottom: 3em;}
.index-case .more {position: absolute;right: 0;}
.index-case .more:hover {color: #2CAAF2;}
.index-case .list {max-width: 1200px;margin: 20px auto 40px;padding: 0 40px;position: relative;overflow: hidden;}
.index-case .btn {position: absolute;width: 40px;height: 100%;top: 0;z-index: 2;display: flex;align-items: center;justify-content: center;text-align: center;background-color: #f7f7f7;font-size: 40px;color: #2CAAF2;}
.index-case li {display: flex;flex-flow: column;align-items: center;flex-shrink: 0;width: 337px;border: 1px solid #e9e9e9;}
.index-case .img {display: block;position: relative;width: 100%;height: 320px;overflow: hidden;}
.index-case .img img {position: absolute;transform: translate(-50%, -50%);left: 50%;top: 50%;max-width: 100%;max-height: 100%;}
.index-case .text {display: block;line-height: 1.5em;padding: 1em;}
.index-case a:hover {color: #2CAAF2}
.index-case .prev {left: 0;}
.index-case .next {right: 0;}
.index-product .img img, .index-case .img img {transition: all .3s;}
.index-product .img:hover img, .index-case .img:hover img {transform: translate(-50%, -50%) scale(1.1);}
/*msg*/
.index-contact {background: url(../images/bg-contact.jpg) #2EABF2 no-repeat center / cover;display: flex;flex-flow: column;padding: 2em;}
.index-contact h4 {width: 100%;max-width: 1200px;display: block;margin: 0 auto;padding: 1em 10px;color: #fff;font-weight: 400;font-size: 20px;}
.index-contact form {width: 100%;max-width: 1200px;display: block;margin: 0 auto;position: relative;padding: 10px 290px 10px 10px;overflow: hidden;}
.index-contact .item {position: relative;background-color: #fff;width: 30%;float: left;}
.index-contact .item+.item {margin-left: 5%;}
.index-contact .item:last-of-type {margin-left: 0;width: 100%;margin-top: 30px;}
.index-contact input {height: 36px;width: 100%;border: 0;padding: 0 .51em;font: inherit;background: none;}
.index-contact .item i, .index-contact .item a {position: absolute;right: 0;font-size: 17px;top: 50%;transform: translateY(-50%);line-height: 0;width: 2em;text-align: center;color: #aaa;}
.index-contact .item a {font-size: 14px;width: 4em;cursor: pointer;}
.index-contact .item a:hover {color: #2CAAF2;}
.index-contact .submit {position: absolute;right: 40px;width: 160px;height: 52px;top: 0;bottom: 0;margin: auto;background-color: #FFE150;text-align: center;line-height: 52px;color: #fff;}
.index-contact .submit:hover {background-color: #2CAAF2;color: #fff;}
@media screen and (max-width:1180px) and (min-width:768px) {.index-product .bd li {width: 24%;margin: .5%;}
	.index-product .bd li:nth-child(4n) {margin-right: .5%;}
	.index-product .img {width: 100%;height: 0;padding-bottom: 100%;}
	.index-news li {width: 100%;}
}
@media screen and (max-width:768px) {.banner .swiper-slide a {height: 60vw;}
	.swiper-pagination {transform: scale(.6);}
	.index-title {padding: 1.8em 0;}
	.index-about {padding-bottom: 0;}
	.index-about ul {flex-flow: row wrap;border-bottom: 0;}
	.index-about li {padding: 1em;width: calc(50% - 2px);margin: 1px;}
	.index-about li+li {margin-left: 1px;}
	.index-about li .xuanzhong{ display:block;}
	.index-about li .weixuan{ display:none;}
	.index-about li {background-color: #2CAAF2;color: #fff;}
	.index-about li h4 {border-color: #fff;}
	.index-about li i {color: #fff;}
	.index-about li h4 {border: 0;}
	.index-product .hd ul {padding: 0;justify-content: flex-start;}
	.index-product .bd ul {padding: 20px 0 0;}
	.index-product .bd li {flex-shrink: 0;width: 49%;margin: .5%;}
	.index-product .bd li:nth-child(4n) {margin-right: .5%;}
	.index-product .img {width: 100%;height: 0;padding-bottom: 100%;}
	.index-news .more, .index-case .more {right: 10px;font-size: .9em;}
	.index-news .index-title {padding-bottom: 1em;}
	.index-title h3 {font-size: 1.3em;margin-right: .3em;}
	.index-title em {font-size: .9em;text-transform: uppercase;color: #999;}
	.index-news ul {flex-flow: column;}
	.index-news li {display: flex;flex-flow: column;padding: 14px 0;width: 100%;}
	.index-news li em {position: static;transform: none;font-size: .9em;color: #999;margin-top: 10px;display: block;}
	.index-case .index-title {padding-bottom: 1.8em;}
	.index-case .img {height: 260px;}
	.index-contact {padding: 1em;}
	.index-contact form {padding: 0;}
	.index-contact .item {width: 100%;}
	.index-contact .item+.item {margin-left: 0;margin-top: 20px;}
	.index-contact .submit {position: static;display: block;float: left;margin: 20px auto;}
}