@charset 'utf-8';
@media(max-width:1199px) {
	.mauto {
		max-width: 1170px;
		padding-left: 15px;
		padding-right: 15px
	}
	.header .nav {
		padding-right: .15rem
	}
	.header .nav ul li h2>a {
		padding: 0 5px
	}
	.header .btn a {
		margin-left: 5px
	}
	.banner h2 {
		padding: 0!important;
		margin-left: 20px
	}
}

@media(max-width:1023px) {
	body {
		padding-top: 60px
	}
	.header {
		display: none
	}
	header,
	.i-main,
	.footer,
	.main {
		-webkit-transition: all .5s;
		transition: all .5s
	}
	header {
		display: block!important;
		z-index: 888;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 60px;
		background: #fff;
		box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1)
	}
	header::after {
		display: none;
		position: fixed;
		content: '';
		top: 60px;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5)
	}
	header .logo {
		position: absolute;
		left: 50%;
		line-height: 60px;
		-webkit-transform: translateY(-50%);
		transform: translateX(-50%)
	}
	header .logo img {
		height: 35px
	}
	header .m-menu-b {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 60px;
		height: 60px;
		cursor: pointer
	}
	header .m-menu-b::before,
	header .m-menu-b::after {
		position: absolute;
		top: 50%;
		left: calc(35px / 2);
		content: '';
		width: 25px;
		height: 1px;
		z-index: 9999;
		-webkit-transition: all .3s ease-out .3s;
		transition: all .3s ease-out .3s;
		background: #999
	}
	header .m-menu-b::before {
		-webkit-transform: translateY(-4px) rotate(0);
		transform: translateY(-4px) rotate(0)
	}
	header .m-menu-b::after {
		-webkit-transform: translateY(4px) rotate(0);
		transform: translateY(4px) rotate(0)
	}
	header .m-menu {
		display: none;
		z-index: 888;
		position: fixed;
		width: 100%;
		width: 260px;
		height: 100%;
		top: 0;
		left: -260px;
		opacity: 1;
		background: #fafafa;
		text-align: left;
		padding-top: 60px
	}
	header .m-menu::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 1px;
		background: #ebebeb;
		top: 60px
	}
	header nav {
		height: calc(100% - 82px);
		overflow-x: hidden;
		overflow-y: auto
	}
	header nav>a {
		position: relative;
		display: block;
		font-size: 15px;
		padding: 0 20px 0 40px;
		color: #666;
		height: 50px;
		line-height: 51px;
		border-bottom: 1px solid #ebebeb;
		-webkit-animation: resize .5s both;
		animation: resize .5s both
	}
	header nav>a::after {
		position: absolute;
		left: 20px;
		top: 50%;
		margin-top: -5px;
		content: '';
		width: 8px;
		height: 8px;
		border: 1px solid #999;
		border-radius: 50%;
		background: transparent
	}
	header .m-language {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center
	}
	header .m-language a {
		color: #666;
		line-height: 40px;
		font-size: 16px;
		display: block;
		border-bottom: 1px solid #ebebeb;
		-webkit-animation: slideInUp 1.5s both;
		animation: slideInUp 1.5s both
	}
	header .m-search-b {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 35px;
		height: 60px;
		background: url(../images/m_search.png) no-repeat left center;
		background-size: 18px;
		cursor: pointer
	}
	header .m-search {
		display: none;
		position: fixed;
		top: 65px;
		left: 3%;
		width: 94%;
		height: 40px;
		border-radius: 5px;
		border: 1px solid #ccc;
		padding: 0 2%;
		overflow: hidden;
		background: #fff
	}
	header .m-search .txt {
		float: left;
		width: 82%;
		margin-top: 8px;
		font-size: 14px;
		background: transparent
	}
	header .m-search .btn {
		float: right;
		width: 40px;
		height: 40px;
		cursor: pointer;
		font-size: 0;
		background: url(../images/m_search.png) no-repeat 70% center;
		background-size: 20px
	}
	html.active {
		height: 100%;
		overflow: hidden
	}
	html.active body {
		height: 100%;
		overflow: hidden
	}
	html.active header {
		left: 260px
	}
	html.active header::after {
		display: block
	}
	html.active header .m-menu-b::before,
	html.active header .m-menu-b::after {
		background: #000
	}
	html.active header .m-menu-b::before {
		-webkit-transform: translateY(0) rotate(225deg);
		transform: translateY(0) rotate(225deg)
	}
	html.active header .m-menu-b::after {
		-webkit-transform: translateY(0) rotate(-225deg);
		transform: translateY(0) rotate(-225deg)
	}
	html.active header .m-menu {
		display: block;
		left: 0
	}
	html.active .i-main,
	html.active .footer,
	html.active .main {
		-webkit-transform: translateX(260px);
		transform: translateX(260px)
	}
	.head-top {
		display: none
	}
	.footer .foot-head dl {
		margin-right: 4%
	}
	.i-main .i-news .mauto>.img {
		width: auto;
		float: none;
		display: table;
		margin: 0 auto
	}
	.i-main .i-news .mauto>.img h3 {
		font-size: 16px
	}
	.i-main .i-news .info-w {
		width: 100%;
		padding: .2rem 0
	}
	.i-main .i-news .info-w .btn {
		display: table;
		margin: 0 auto
	}
	.i-main .i-news .info-w .btn a {
		width: auto;
		padding: 0 5px;
		margin: 0 3px
	}
	.i-main .i-pro .owl-pagination {
		display: block
	}
	.i-main .i-tel {
		height: auto;
		padding: .2rem 0
	}
	.i-main .i-tel .dtcell {
		text-align: center
	}
	.i-main .i-tel .dtcell>div {
		margin: .1rem 0
	}
	.i-main .i-tel strong {
		font-size: 14px
	}
	.i-main .i-tel .box2 {
		padding-left: 0
	}
	.i-main .i-tel .box3 span {
		font-size: 16px
	}
	.i-main .i-tel .box3 em {
		font-size: 24px
	}
	.md-dn {
		display: none
	}
}

@media(max-width:767px) {
	.mauto {
		padding-left: 10px;
		padding-right: 10px
	}
	.banner {
		padding-top: 60px
	}
	.i-main .i-guide li {
		padding-top: 5%
	}
	.i-main .i-guide h3 img {
		height: 25px;
		vertical-align: -5px
	}
	.i-main .i-guide .txt {
		height: 75px;
		line-height: 25px
	}
	.i-main .i-pro .baf {
		padding: .55rem 10px .25rem 10px
	}
	.i-main .i-pro li {
		padding: 0 5px
	}
	.i-main .i-pro .img {
		height: auto;
	}
	.i-main .i-news .news-l .img {
		height: auto
	}
	.i-main .i-news .news-r ul {
		margin-left: -0.15rem
	}
	.i-main .i-news .news-r .img {
		height: 1.278rem
	}
	.main .main-nav-m {
		position: relative;
		z-index: 555;
		cursor: pointer
	}
	.main .main-nav-m .title {
		position: relative;
		height: 40px;
		line-height: 40px;
		background: #00bd0b;
		padding: 0 10px
	}
	.main .main-nav-m .title strong {
		color: #fff;
		font-size: 16px;
		font-weight: bold
	}
	.main .main-nav-m .title i {
		position: absolute;
		content: '';
		width: 45px;
		height: 100%;
		right: 0
	}
	.main .main-nav-m .title i::before,
	.main .main-nav-m .title i::after {
		position: absolute;
		top: 50%;
		content: '';
		width: 12px;
		height: 1px;
		background: #fff;
		-webkit-transition: all .3s;
		transition: all .3s
	}
	.main .main-nav-m .title i::before {
		right: 50%;
		right: 47%;
		-webkit-transform: rotate(-40deg) scaleY(1.5);
		transform: rotate(-40deg) scaleY(1.5)
	}
	.main .main-nav-m .title i::after {
		left: 50%;
		left: 47%;
		-webkit-transform: rotate(40deg) scaleY(1.5);
		transform: rotate(40deg) scaleY(1.5)
	}
	.main .main-nav-m .title.active i::before {
		-webkit-transform: rotate(40deg) scaleY(1.5);
		transform: rotate(40deg) scaleY(1.5)
	}
	.main .main-nav-m .title.active i::after {
		-webkit-transform: rotate(-40deg) scaleY(1.5);
		transform: rotate(-40deg) scaleY(1.5)
	}
	.main .main-nav-m ul {
		display: none;
		position: absolute;
		top: 40px;
		width: 100%;
		padding: 0 10px;
		background: rgba(0, 189, 11, 0.8);
		color: #fff
	}
	.main .main-nav-m ul li {
		-webkit-animation: ReturnToNormal .5s both;
		animation: ReturnToNormal .5s both
	}
	.main .main-nav-m ul li a {
		display: block;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.55)
	}
	.main .case-list ul {
		margin-left: -0.15em
	}
	.main .case-list li {
		padding-left: .15rem;
		margin-bottom: .1rem
	}
	.main .case-list .img {
		height: 1.9263rem
	}
	.main .honor-list ul {
		margin-left: -0.25rem
	}
	.main .honor-list li {
		margin-bottom: .2rem
	}
	.main .honor-list li a .img {
		height: 4.286rem
	}
	.main .join-wrap {
		padding-left: 5px;
		padding-right: 5px
	}
	.main .join-wrap .join-list .join-head li,
	.main .join-wrap .join-list .join-body li {
		font-size: 12px
	}
	.main .event ul {
		padding: 70px 0 0 67px
	}
	.main .event ul::before {
		width: 50px;
		height: 50px;
		background-size: cover
	}
	.main .event ul::after {
		top: 60px;
		left: 26px
	}
	.main .event h3 {
		width: 60px;
		font-size: 25px
	}
	.main .event h3::after {
		left: -40px;
		width: 30px;
		height: 1px
	}
	.main .event .list {
		width: calc(100% - 60px)
	}
	.main .event .item {
		font-size: 12px
	}
}

@-webkit-keyframes resize {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: scale(5, 5);
		transform: scale(5, 5)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1)
	}
}

@keyframes resize {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: scale(5, 5);
		transform: scale(5, 5)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1)
	}
}

@keyframes ReturnToNormal {
	from {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0
	}
	to {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@-webkit-keyframes ReturnToNormal {
	from {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0
	}
	to {
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}