/***********************公共样式***********************/
html,body{width: 100%;}
.tran{transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
.tranX{transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);}
.tranY{transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);}
/* flex布局 */
.flex-item{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.flex-center{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.flex-middle{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.flex-box{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.flex-betw{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}

/***********************首页***********************/
.w{width: 1200px;margin: 0 auto;}
.banner{width: 100%;}
.banner img{width: 100%;}
.mainWrap{margin-top: 35px;}

/* 侧边导航 */
.navL{width: 128px; margin-right: 20px;}
.navL{border-radius: 5px;box-shadow: 0 0 15px 5px #eee;overflow: hidden;}
.navL ul li a{display: block;background: #fff;color: #333;overflow: hidden;z-index: 1;height: 45px;line-height: 45px;padding: 0 6px;position: relative;text-align: center;font-size: 16px;width: 100%;border-bottom: 1px solid #fff;transition: all .4s;}
.navL ul li a::after {content: "";position: absolute;top: 0;right: 0;width: 260px;height: 260px;background: #3eb689;z-index: -1;transform-origin: 0% 0%;transform: translateX(-88%) translateY(9%) rotate(-45deg);transition: all .4s;}
.navL ul li a:hover,.navL ul li.active a{color: #fff;}
.navL ul li a:hover::after,.navL ul li.active a::after {transform: translateX(-20%) translateY(9%) rotate(-45deg);}

.listWrap{width: calc(100% - 160px);}
.listWrap .listIH ul{margin: 0 -3px;}
.listWrap .listIH ul li{float: left;width: 8.33%;padding: 0 3px;}
.listWrap .listIH ul li span{display:block;width: 100%;line-height: 35px;font-size:14px;color:#333;border-radius:8px;background: #f6f6f6;text-align: center;cursor: pointer;}
.listWrap .listIH ul li.active span{background: #3eb689;color: #fff;}
.listWrap .listItem{display: none;}
.listWrap .listItem.active{display: block;}
.listWrap .listIBItem{display: none;}
.listWrap .listIBItem.active{display: block;}
.listWrap .listIBItem .title{text-align: center;margin: 35px 0 30px;transition: all .4s;border-bottom: 1px dashed #ccc;padding-bottom: 25px;}
.listWrap .listIBItem .title a{color: #333;font-size: 22px;}
.listWrap .listIBItem .title a:hover,.listWrap .listIBItem .detail a:hover{color: #3eb689;}
.listWrap .listIBItem .img{width: 600px;margin: 0 auto;}
.listWrap .listIBItem .img a{display: block;width: 100%;}
.listWrap .listIBItem .img img{width: 100%;}
.listWrap .listIBItem .detail{text-align: center;margin-top: 20px;}
.listWrap .listIBItem .detail a{font-size: 16px;color: #666;transition: all .4s;}

.footer{width: 100%;padding: 30px 10px;background: #3eb689;margin-top: 30px;}
.footer p{font-size: 16px;color: #fff;text-align: center;line-height: 2;}

@media only screen and (max-width: 1220px) {
	.w{width: 920px;}
	.navL{width: 100px;}
	.navL ul li a::after{transform: translateX(-77%) translateY(9%) rotate(-45deg);}
	.listWrap{width: calc(100% - 120px);}
	.listWrap .listIBItem .title {margin: 25px 0 20px;padding-bottom: 20px;}
	.footer p{line-height: 1.6;font-size:14px;}
}
@media only screen and (max-width: 992px) {
	.w{width: 720px;}
	.listWrap .listIH ul{margin: 0 -2px;}
	.listWrap .listIH ul li{padding: 0 2px;}
	.listWrap .listIBItem .title {margin: 20px 0 15px;padding-bottom: 15px;}
	.listWrap .listIBItem .title a{font-size: 20px;}
	.listWrap .listIBItem .img{width: 500px;}
}
@media only screen and (max-width: 767px){
	.w{width: 100%;padding: 0 10px;}
	.mainWrap{margin-top: 20px;}
	.navL{box-shadow: none;margin-bottom: 10px;}
	.navL,.listWrap,.listWrap .listIBItem .img{width: 100%;}
	.navL ul li{float: left;width: 25%;padding: 0 3px;}
	.navL ul li a{display: block;background: #eee;margin-bottom: 6px;border-radius: 6px;height: auto;line-height: 30px;padding: 0 2px;}
	.navL ul li a::after{display: none;}
	.navL ul li a:hover, .navL ul li.active a{background: #3eb689;}
	.listWrap .listIH ul li{width: 16.66%;margin-bottom: 4px;}
	.listWrap .listIBItem .title{margin: 15px 0;}
	.listWrap .listIBItem .title a{font-size: 18px;}
	.footer{padding: 20px 10px;}
}