.banner {
	width: 100%
}

.banner .swiper-pagination {
	bottom: 90px;
	position: absolute;
	z-index: 9999
}
.banner .swiper-pagination-bullet:after {
	border-width: 2px
}
.banner .swiper-pagination-bullet {
	opacity: 1;
	margin: 0 8px!important
}
.tab-item {
	background: #fff;
	position: relative;
	top: -64px;
	z-index: 2;
	box-shadow: 0 0 26px -8px #acacac
}
.tab-list {
	width: 33.33%;
	padding: 22px 0;
	text-align: center;
	border-right: 1px solid #d0d0d0;
	position: relative;
	overflow: hidden
}
.tab-list .mobile {
	display: none
}
.tab-list:last-child {
	border-right: 0
}
.tab-list:nth-child(1) {
	transition-delay: .3s
}
.tab-list:nth-child(1):after {
	background: #000
}
.tab-list:nth-child(2) {
	transition-delay: .5s
}
.tab-list:nth-child(2):after {
	background: #e80113
}
.tab-list:nth-child(2) .t-mask {
	left: -162px
}
.tab-list:nth-child(3) {
	transition-delay: .6s
}
.tab-list:nth-child(3):after {
	background: #0a3e8a
}
.tab-list:nth-child(3) .t-mask {
	left: -145px
}
.tab-list:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px
}
.process-gif{width:1350px;margin:auto;overflow:hidden;}
.i-advantage {
    float: left;
    width: 100%;
    margin-top: 0px;
    padding: 0px 0px;
}.i-advantage ul {
    margin-top: 0px;
}.i-advantage li{width:24.2%; text-align:center; margin-right:1%; float:left}
.i-advantage li:last-child{margin-right:0px;}
.i-advantage li figure{padding:0;margin:0;display:block; line-height:normal; width:100%; float:left; overflow:hidden; position:relative}
.i-advantage img{text-align:center; transition:460ms}
.i-advantage li:hover img{ transform:scale(1.05,1.05)}
.i-advantage li figcaption{background:#fff; transition:460ms; display:block; float:left; height:50px; width:100%;}
.i-advantage li figcaption h4{display:block; font-size:16px; color:#333; line-height:50px; margin-bottom:0; margin-top:0;}
.i-advantage li:hover figcaption{background:#cccccc;}
.i-advantage li:hover figcaption h4{color:#fff}








@media (min-width:1200px) {
.tab-list:hover .t-mask {
	width: 450px;
	height: 450px;
	border-radius: 0;
	left: 0
}
.tab-list:hover .desc {
	transform: translateX(-190px)
}
.tab-list:hover .desc p {
	color: #fff
}
.tab-list:hover .desc span {
	color: #fff
}
.tab-list:hover i {
	opacity: 0;
	transition: .2s
}
}
.tab-list i {
	width: 78px;
	height: 78px;
	transition: opacity .8s .6s
}
.tab-list .t-mask {
	width: 76px;
	height: 76px;
	top: 0;
	left: -145px;
	right: 0;
	bottom: 0;
	margin: auto;
	position: absolute;
	border-radius: 50%;
	transition: .8s;
	z-index: -1
}
.tab-list .desc {
	text-align: left;
	margin-left: 25px;
	transition: .8s
}
.tab-list .desc p {
	font-size: 20px;
	color: #444;
	transition: .8s
}
.tab-list .desc span {
	font-size: 14px;
	color: #d0d0d0;
	font-family: Arial;
	transition: .8s
}
.product {
	overflow: hidden
}
.product .swiper-container {
	padding: 20px
}
.product .swiper-pagination {
	padding: 10px 0
}
.product .swiper-pagination-bullet:before {
	background: #d8d8d8
}
.product .swiper-pagination-bullet-active:before {
	background: #0a3e8a
}
.product .more {
	margin: 0px 0 67px
}
.product-list {
	padding: 0 16px 20px 16px;
	background: #e5e5e5;
	transition: transform cubic-bezier(.215, .61, .355, 1) .8s, box-shadow .8s;
	-ms-transition: transform cubic-bezier(.215, .61, .355, 1) .8s, box-shadow .8s;
	-o-transition: transform cubic-bezier(.215, .61, .355, 1) .8s, box-shadow .8s;
	-webkit-transition: transform cubic-bezier(.215, .61, .355, 1) .8s, box-shadow .8s;
	-moz-transition: transform cubic-bezier(.215, .61, .355, 1) .8s, box-shadow .8s
}
@media (min-width:640px) {
.product-list:hover {
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	/*box-shadow: 0 3px 21px -7px #000*/
}
.product-list:hover .more {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0)
}
.product-list:hover .pro:after {
	width: 100%
}
.product-list:hover .desc p {
	color: #ef8200
}
.product-list:hover img {
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1)
}
}
.product-list .pro {
	 margin-top:16px;
	background: #fff;
	text-align: center;
	
	
	overflow: hidden;
	position: relative
}
.product-list .pro img {
	width: auto
}

.product-list .pro img {
	width:100%;
	transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-ms-transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-o-transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-webkit-transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-moz-transition: transform cubic-bezier(.215, .61, .355, 1) .8s
}
.product-list .desc {
	margin-top: 20px; margin-left:10px; margin-right:10px;
}
.product-list .desc p {
	font-size: 16px;
	color: #444;
	margin-bottom: 10px;
	position: relative
}
.product-list .desc p:after {
	content: '';
	float: right; margin-top:5px;
	width: 22px;
	height: 9px;
	background: url(../images/icon4.png) no-repeat center
}
.product-list .desc span {
	color: #333333;
	font-size: 14px
}
.product-list .more {
	width: 66px;
	height: 66px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -33px;
	margin-top: -33px;
	background: url(../images/more.png) no-repeat center;
	opacity: 0;
	filter: blur(4px);
	transform: translateY(20px);
	transition: ease .6s
}
.techo {
	text-align: center; /*background-attachment:fixed;*/
	overflow: hidden; background-image:url(../images/abbg.jpg); background-repeat:no-repeat;
	border-top: 1px solid #c6c6c6
}
.techo .mobile {
	display: none
}
.techo p {
	width: 1020px;
	max-width: 100%;
	margin: 30px auto 25px;
	font-size: 16px;
	color: #fff;
	line-height: 30px
}
.techo .more {
	margin: 40px 0 40px
}
.process-item {
	position: relative
}
.process-list {
	position: relative;
	z-index: 2
}
.process-list:nth-child(1) {
	left: 155px;
	z-index: 4
}
.process-list:nth-child(2) {
	left: 80px;
	transition-delay: 150ms;
	z-index: 3
}
.process-list:nth-child(2) .pro2 {
	left: 36px;
	top: 74px
}
.process-list:nth-child(3) {
	transition-delay: .3s
}
.process-list:nth-child(3) .pro2 {
	left: 36px;
	top: 93px
}
.process-list:nth-child(4) {
	transition-delay: 450ms;
	left: -80px;
	z-index: 1
}
.process-list:nth-child(5) {
	transition-delay: .6s;
	left: -160px;
	z-index: 0
}
.process-list:nth-child(6) {
	transition-delay: .8s;
	left: -194px
}
.process-list:nth-child(6) .desc {
	width: 100px;
	bottom: -347px
}
.process-list:nth-child(6) .desc:before {
	height: 100px;
	top: -109px
}
.process-list .pro {
	position: relative
}
.process-list .pro2 {
	position: absolute;
	left: 7px;
	top: 55px;
	z-index: 11
}
.process-list .desc {
	position: absolute;
	left: 0;
	bottom: -108px
}
.process-list .desc:before {
	content: '';
	width: 1px;
	height: 30px;
	background: #d5d5d5;
	position: absolute;
	left: 50%;
	top: -41px
}
.process-list .desc .num {
	display: inline-block;
	width: 37px;
	height: 37px;
	line-height: 35px;
	font-size: 20px;
	color: #ef8200;
	border: 1px solid #ef8200;
	text-align: center;
	border-radius: 50%;
	margin-bottom: 15px
}
.process-list .desc span {
	display: block;
	font-size: 14px;
	color: #666;
	line-height: 20px
}
.cross {
	width: 1153px;
	position: absolute;
	top: 56%;
	transform: translate(-50%, -50%);
	z-index: 10;
	left: 45%;
	transition: cubic-bezier(.4, 0, .2, 1) 1s;
	-ms-transition: cubic-bezier(.4, 0, .2, 1) 1s;
	-o-transition: cubic-bezier(.4, 0, .2, 1) 1s;
	-webkit-transition: cubic-bezier(.4, 0, .2, 1) 1s;
	-moz-transition: cubic-bezier(.4, 0, .2, 1) 1s
}
.cross>div {
	overflow: hidden;
	width: 0;
	transition: cubic-bezier(.4, 0, .2, 1) 1.3s;
	-ms-transition: cubic-bezier(.4, 0, .2, 1) 1.3s;
	-o-transition: cubic-bezier(.4, 0, .2, 1) 1.3s;
	-webkit-transition: cubic-bezier(.4, 0, .2, 1) 1.3s;
	-moz-transition: cubic-bezier(.4, 0, .2, 1) 1.3s;
	transition-delay: .8s
}
.cross.scroll-watch-in-view>div {
	width: 100%
}
.point {
	width: 100%;
	height: 1px;
	position: absolute!important;
	top: 0;
	z-index: 11
}
.point .point-box {
	position: relative;
	height: 1px;
	width: 816px;
	margin: 0 auto
}
.point .point1 {
	position: absolute;
	top: 60px;
	left: 4px
}
.point .point2 {
	position: absolute;
	top: 79px;
	left: 183px;
	transition-delay: .2s
}
.point .point3 {
	position: absolute;
	top: 94px;
	left: 330px;
	transition-delay: .3s
}
.process-gif img {
	max-width: 100%
}
.create {
	font-size: 0;
	position: relative;
	border-top: 1px solid #c6c6c6
}
.create .title {
	margin-top: 0;
	margin-bottom: 50px;
	font-weight: lighter
}
.create .more {
	text-align: right;
	margin-top: 50px
}
.create .more a {
	text-align: center
}
.create .left {
	width: 50%
}
.create .left .swiper-container {
	width: 70%
}
.create .left .desc {
	font-size: 14px;
	color: #666;
	line-height: 24px
}
.create .right {
	float: right;
	width: 50%
}
.create .right .swiper-pagination-bullet {
	opacity: 1;
	margin: 0 2px
}
.create .right .swiper-pagination-bullet:after {
	border-width: 2px
}
.create .right .swiper-pagination {
	position: absolute;
	text-align: left;
	bottom: 70px;
	left: 40px
}
.right-list {
height:calc(.4647 * 100vw)
}
.right-list .pic {
	opacity: 0;
	background-size: cover;
	transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	background-position: center
}
.left-page {
	position: absolute;
	bottom: 88px;
	left: 7.2%
}
.left-page .swiper-pagination-bullet {
	opacity: 1;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: 0;
	margin: 0;
	padding: 0 8px;
	border-right: 1px solid #dfdfdf
}
.left-page .swiper-pagination-bullet:before {
	display: none
}
.left-page .swiper-pagination-bullet a {
	display: inline-block;
	transition: .4s;
	-ms-transition: .4s;
	-o-transition: .4s;
	-webkit-transition: .4s;
	-moz-transition: .4s
}
.left-page .swiper-pagination-bullet:last-child {
	border-right: 0
}
.left-page .swiper-pagination-bullet:after {
	display: none
}
.left-page .swiper-pagination-bullet.swiper-pagination-bullet-active a {
	color: #ef8200;
	font-size: 16px
}
.left-page a {
	font-size: 14px;
	color: #666
}
.video {
	position: relative;
	overflow: hidden
}
.video .fengmian {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer
}
.video .fengmian .pro {
	position: absolute;
	z-index: 1;
	transition: 6s;
	-ms-transition: 6s;
	-o-transition: 6s;
	-webkit-transition: 6s;
	-moz-transition: 6s
}
.video:hover .play-icon i {
	transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px)
}
.video:hover .play-icon p {
	opacity: 1;
	transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px)
}
.video:hover .pro {
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05)
}
.video .play-icon {
	position: absolute;
	width: 400px;
	height: 70px;
	top: 50%;
	left: 50%;
	margin-top: -35px;
	margin-left: -200px;
	z-index: 11
}
.video .play-icon i {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/play-icon.png) no-repeat center;
	transition: ease .6s;
	-ms-transition: ease .6s;
	-o-transition: ease .6s;
	-webkit-transition: ease .6s;
	-moz-transition: ease .6s
}
.video .play-icon p {
	margin-top: 40px;
	font-size: 22px;
	color: #fff;
	text-align: center;
	transition: ease .6s;
	-ms-transition: ease .6s;
	-o-transition: ease .6s;
	-webkit-transition: ease .6s;
	-moz-transition: ease .6s;
	opacity: 0
}
.video-lp {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto
}
.v-mask:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.5)
}
.news {
	font-size: 0;
	padding: 50px 0 0
}
.news:hover .logen i:after {
	height: 100%
}
.news .title {
	color: #022f5d;
	text-align: left
}
.news .title .line {
	margin-bottom: 10px
}
.news .logen {
	width: 5%;float:left;
	text-align: center
}
.news .logen span {
	display: block;
	font-size: 48px;
	width: 100%;
	word-break: break-all;
	font-family: Arial;
	writing-mode: tb-lr;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	color: #e9e9e9;
	float: left
}
.news .logen i {
	margin-top: 20px;
	display: inline-block;
	width: 1px;
	height: 156px;
	background: #e9e9e9;
	position: relative
}
.news .logen i:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 0;
	background: #ef8200;
	top: 0;
	left: 0;
	transition: ease .6s;
	-ms-transition: ease .6s;
	-o-transition: ease .6s;
	-webkit-transition: ease .6s;
	-moz-transition: ease .6s
}
.news .more {
	margin: 53px 0 55px
}
.news-left {
	padding: 60px 45px 40px;
	width: 41%;float:left;
	background: #f3f3f3
}
.news-left .time {
	font-size: 30px;
	color: #b1b1b1;
	font-family: HNT;
	margin-bottom: 30px
}
.news-left h3 {
	font-size: 18px;
	color: #333
}
.news-left p {
	font-size: 14px;
	color: #666;
	margin: 40px 0;
	line-height: 25px;
	padding-left: 15px;
	position: relative;
	max-height: 75px;
	overflow: hidden
}
.news-left p:before {
	content: '';
	width: 1px;
	height: 100%;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 0;
	background: #d3d3d3
}
.news-left .pro {
	display: inline-block;
	overflow: hidden
}
.news-left .pic {
	width: 501px;
	height: 250px;
	transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-ms-transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-o-transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-webkit-transition: transform cubic-bezier(.215, .61, .355, 1) .8s;
	-moz-transition: transform cubic-bezier(.215, .61, .355, 1) .8s
}
.news-left .more2 {
	text-align: left;
	margin-top: 35px
}
.news-left .more2 a {
	text-align: center;
	background: 0 0;
	color: #9d9d9d;
	font-family: Arial;
	border: 1px solid #dadada;
	line-height: 40px
}
.news-left:hover {
	box-shadow: 6px 14px 20px -10px #c8c8c8
}
.news-left:hover .pic {
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1)
}
.news-right {
	width: 51.3%;
	padding-left: 5.7%
}
.news-list {
	padding: 25px 20px;
	border-bottom: 1px solid #e0dde8;
	transition: .6s;
	-ms-transition: .6s;
	-o-transition: .6s;
	-webkit-transition: .6s;
	-moz-transition: .6s
}
.news-list:first-child {
	border-top: 1px solid #e0dde8
}
.news-list>div {
	transition: ease .6s;
	-ms-transition: ease .6s;
	-o-transition: ease .6s;
	-webkit-transition: ease .6s;
	-moz-transition: ease .6s
}
.news-list:hover {
	box-shadow: 0 2px 16px -2px #d9d9d9
}
.news-list:hover>div {
	transform: translateX(5px);
	-ms-transform: translateX(5px);
	-o-transform: translateX(5px);
	-webkit-transform: translateX(5px);
	-moz-transform: translateX(5px)
}
.news-list:hover h3 {
	color: #f6a702
}
.news-list:hover h3:before {
	background: #f6a702
}
.news-list h3 {
	color: #494949;
	font-size: 18px;
	margin-bottom: 20px;
	display: block;
	position: relative;
	padding-right: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	transition: .6s;
	-ms-transition: .6s;
	-o-transition: .6s;
	-webkit-transition: .6s;
	-moz-transition: .6s
}
.news-list h3 .date {
	font-family: HNT;
	font-size: 22px;
	color: #919191;
	position: absolute;
	top: 1px;
	right: 0;
	line-height: 1
}
.news-list h3:before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #494949;
	display: inline-block;
	margin: 0 12px 2px 0;
	transition: .6s;
	-ms-transition: .6s;
	-o-transition: .6s;
	-webkit-transition: .6s;
	-moz-transition: .6s
}
.news-list p {
	color: #7f7f7f;
	font-size: 14px;
	line-height: 24px;
	width: 80%;
	padding-left: 0px;
	transition: 1s;
	-ms-transition: 1s;
	-o-transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
.news-list .desc {
	position: relative
}
.news-list .icon {
	width: 36px;
	height: 16px;
	position: absolute;
	right: 7px;
	top: 17px;
	background: url(../images/icon.jpg) no-repeat center
}



.sopop{ display:none;}


.v_h_search{
    width: 515px;
    height: 358px;
    position: fixed;
    left:50%;
    top: 50%;
    margin: -179px 0 0 -257px;
    z-index:991;
}
.v_h_search .searchContent{
    width: 100%;
}
.v_h_search .searchContent.animate .closeBig:hover{
  transform: rotate(180deg);
  transition: all .5s ease;
}
.v_h_search .searchContent.animate .closeBig{
  opacity: 1;
  transform: translate(0);
}
.v_h_search .searchContent.animate .searchCase{
  opacity: 1;
  transform: translate(0);
}
.v_h_search .searchContent.animate .whatContent .list{
  opacity: 1;
  transform: translate(0);
}

.v_h_search .closeBig{
    display: block;
    width:40px;
    height:40px;
    margin:0 auto 46px;
    background: url(../images/i-closeBig.png) center no-repeat;
    cursor:pointer;
    opacity: 0;
    transform: translateY(40px);
    transition: all .3s ease;
}
.v_h_search .searchCase{
    width:100%;
    position: relative;
    height:68px;
    margin-bottom:40px;
    opacity: 0;
    transform: translateY(40px);
    transition: all .3s ease .1s;
}
.v_h_search .searchCase input{
    border:none;
    display: block;
    width:100%;
    height: 68px;
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-indent: 64px;
    font-size: 20px;
}
.v_h_search .searchCase .searchBig{
    display: block;
    width:21px;
    height:23px;
    position: absolute;
    left: 20px;
    top:50%;
    margin-top:-11.5px;
    background: url(../images/i-searchBig.png) center no-repeat;
}
.v_h_search .whatContent{
    width: 100%;

}
.v_h_search .whatContent .list:nth-of-type(1){
    transition: all .3s ease .2s;
}
.v_h_search .whatContent .list:nth-of-type(2){
    transition: all .3s ease .3s;
}
.v_h_search .whatContent .list:nth-of-type(3){
    transition: all .3s ease .4s;
}
.v_h_search .whatContent .list:nth-of-type(4){
    transition: all .3s ease .5s;
}
.v_h_search .whatContent .list{
    float: left;
    margin-bottom:36px;
    padding: 0 25px;
    width:50%;
    opacity: 0;
    transform: translateY(40px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.v_h_search .whatContent .list .pad{
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.5);
}
.v_h_search .whatContent .list a{
    color: #fff;height:40px;line-height:40px;
    font-style: 16px;
}.bgcolor {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
    opacity: 1;
    transition: all .8s ease;
}


#sear{ cursor:pointer;}



@media (max-width:1430px) {
.process-gif{width:100%;}

.scroll-watch-in-view.show_bottom{}

}




@media (max-width:1200px) {
.tab-list .t-mask {
	display: none
}
.process-item {
	display: none
}
.techo .mobile {
	display: block;
	width: 10rem
}
.techo .more {
margin:.8rem 0 1.2rem
}
.m-process-item {
	margin-top: 1rem;
	margin-left: 1.4rem
}
.m-process-list {
	font-size: 20px;
	color: #666;
	width: 50%;
margin-bottom:.3rem
}
.m-process-list:nth-child(2n) span {
padding-left:.4rem
}
.m-process-list span {
	display: block;
	text-align: left
}
.create .left {
	width: 100%;
	position: static;
	transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0)
}
.create .left .swiper-container {
	width: 80%;
	padding: 1rem 0 0
}
.create .right {
	width: 100%;
	float: none
}
.create .right .swiper-pagination {
	bottom: 30px;
	left: 0;
	text-align: center
}
.left-page {
	position: static;
	width: 80%;
margin:.4rem auto 1rem
}
.video .play-icon i {
	transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px)
}
.video .play-icon p {
	opacity: 1;
	transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px)
}
.news-left .pic {
	width: 3.2rem;
	height: 1.5rem
}
.product-list .pro img{max-height: 100%;max-width:100%;}
.product-list .pro{height:auto;}

}
@media (max-width:780px) {
.m-process-list {
	font-size: 18px
}
.news .logen {
	display: none
}
.news-left {
	width: 100%
}
.news-right {
	width: 100%;
	padding-left: 0
}
.news-left .pic {
	width: 8rem;
	height: 3rem
}
.product-list .desc span {
	display: block;
	line-height: 18px;
	height: 36px;
	overflow: hidden
}
.create .right .swiper-pagination {
	bottom: 15px
}
}
@media (max-width:640px) {
	.i-advantage li{width:48.5%;margin-bottom:15px;}
.banner .swiper-pagination {
	bottom: 20px
}
.tab-item {
	top: 0;
	box-shadow: none
}
.tab-list {
padding:.3rem 0 .45rem
}
.tab-list .mobile {
	display: block
}
.tab-list .pc {
	display: none
}
.tab-list i {
	background-size: contain!important;
	width: 50px;
	height: 50px;
	text-align: center
}
.tab-list .desc {
	text-align: center;
	margin-left: 0;
	display: block;
	line-height: 1
}
.tab-list .desc p {
	font-size: 14px;
	margin: 10px 0 3px
}
.tab-list .desc span {
	font-family: 'Microsoft YaHei';
	font-weight: lighter;
	font-size: 12px
}
.product {
padding:1rem .1rem .8rem
}
.product .swiper-container {
	padding: 0
}
.product .swiper-pagination {
padding:.3rem 0 0
}
.product .more {
margin:.5rem 0 0
}
.product-list .desc span {
	line-height: 20px;
	font-size: 13px;

}
.product-list {
padding:0 10PX 0px 10px;
border-left:.1rem solid #fff;
border-right:.1rem solid #fff
}
.product-list .pro{ margin-top:10px ;}

.product-list .desc p {
	font-size: 14px
}
.product-list .desc p:after {
	display: none
}
.techo {
padding:0 .5rem
}
.techo p {
	font-size: 13px;
margin:.6rem 0 .4rem;
	text-align: justify;
	line-height: 24px
}
.techo .mobile {
margin-left:-.4rem
}
.techo .more {
margin:.5rem 0 1.4rem
}
.m-process-item {
	margin-top: 1rem;
	margin-left: 1rem
}
.m-process-list {
	font-size: 13px
}
.create .left .swiper-container {
	width: 90%;
	padding: 1.5rem 0 1rem
}
.create .left .desc {
	font-size: 13px;
	line-height: 24px
}
.create .title {
margin-bottom:.6rem
}
.create .more {
margin-top:.5rem;
	text-align: center
}
.right-list {
height:calc(.6 * 100vw)
}
.left-page {
	position: absolute;
	top: calc(60vw);
	bottom: auto;
	width: 90%;
margin:.5rem auto .5rem
}
.video .play-icon i {
	background-size: 40px
}
.video .play-icon p {
	margin-top: 10px;
	font-size: 16px;
	color: #dcd9d9
}
.video .responsive {
	height: 5.6rem
}
.news {
	padding: 1rem 0
}
.news .more {
margin:.5rem 0 0
}
.news-left {
padding:.8rem .5rem .8rem
}
.news-list {
padding:.5rem .4rem
}
.news-list h3 {
	margin-bottom: 15px;
	font-size: 16px
}
.news-list h3 .date {
	font-size: 16px;
	top: 5px
}
.news-list p {
	height: 50px
}
.news-left .pic {
	width: 9rem;
	height: 3.6rem
}
.news-left p {
	margin: 25px 0;
	font-size: 13px;
	line-height: 24px
}
}
@media (max-width:480px) {
.title {
	font-size: 18px
}
.title i {
	margin-right: 10px;
	width: 30px;
	height: 21px
}
.news-left p {
	margin-top: 10px;
	margin-bottom: 15px
}
.news-list h3 {
	margin-bottom: 8px
}
.news-list p {
	line-height: 22px;
	height: 44px;
	font-size: 13px
}
.create .left .swiper-container {
	padding: 1.8rem 0 1rem
}
}
@media (max-width:360px) {
.m-process-item {
margin-left:.2rem
}
.m-process-list {
	font-size: 12px
}
.left-page a {
	font-size: 12px
}
.left-page .swiper-pagination-bullet.swiper-pagination-bullet-active a {
	font-size: 14px
}
}










/* menu */
.main-menu nav > ul > li {
  display: inline-block;
  position: relative;
  margin-left: 68px; }

.main-menu nav > ul > li:first-child {
  margin-left: 0; }

.main-menu nav > ul > li > a {
  color: #333333; font-weight:bold;
  display: block;
  font-size: 16px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: transparent;
  line-height: 80px;
  position: relative;
  text-transform: capitalize;
  font-family: 'cerebri_sanssemibold'; }

.main-menu nav > ul > li > a i {
  font-size: 14px;
  position: relative;
  top: 1px;
  left: 4px;
  color: #8f8f8f; }

.main-menu nav > ul > li:hover > a, .main-menu nav > ul > li.active > a {
  color:#333333 }

.main-menu > nav > ul > li > a::before {
  background: #333333;
  content: "";
  height: 3px;
  position: absolute;
  bottom: 0;
  width: 0;
  transition: .5s; }

.main-menu > nav > ul > li:hover > a::before, .main-menu > nav > ul > li.active > a::before {
  width: 100%; }

.menu-4 .main-menu nav > ul > li > a {
  color: #ffffff; }

.menu-4 .main-menu nav > ul > li > a i {
  color: #ffffff; }

.menu-2 .main-menu > nav > ul > li > a::before {
  display: none; }

.menu-3 .main-menu > nav > ul > li > a::before {
  display: none; }

/* sub-menu */
.main-menu nav > ul > li .sub-menu {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 120%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 220px;
  z-index: 9;
  border-bottom: 3px solid #333333;
  text-align: left; }

.main-menu nav > ul > li:hover .sub-menu {
  opacity: 1;
  top: 100%;
  visibility: visible; }

.main-menu nav > ul > li .sub-menu li {
  display: block; }

.main-menu nav > ul > li .sub-menu li a {
  color: #666666;
  font-size: 14px;
  font-family: 'cerebri_sansregular';
  margin: 0;
  padding: 13px 20px;
  text-transform: capitalize;
  display: block; }

.main-menu nav > ul > li:hover > .sub-menu li > a:hover {
  color: #fff;
  background: #333333 }

.header-menu-3 .main-menu nav > ul > li:hover > .sub-menu li > a:hover {
  color: #fff;
  background: #d10459; }

.header-menu-3 .main-menu nav > ul > li .sub-menu {
  border-top: 3px solid #d10459; }

.header-menu-4 .main-menu nav > ul > li .sub-menu {
  border-top: 3px solid #d10459; }



.logo {width:20.5%; height:auto; transition: all 1.7s;z-index: 25; margin-top:10px; float:left;}

.head_right{ width:60%;transition: all 1.6s; margin-right:8%; text-align:right;}


.search{}
.search {
  width:8%; margin:0 0 0 0; float:right; background:#cccccc; text-align:center;
}

.search .search-btn {
  color: #03a3f0;
  border: 0;
  padding: 0;
  background:url(../images/search.png) center no-repeat #cccccc;
  font-size: 17px;
  line-height: 19px;
  outline: none;
   width:100%; height:80px;
}

.search-modal {
  background: rgba(0, 0, 0, 0.7);
}

.search-modal .modal-dialog {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.search-modal .modal-dialog .modal-content {
  background: transparent;
  border: 0;
}

.search-modal .modal-dialog .modal-content form {
  background: transparent;
  border: 0;
  padding: 0px;
  position: relative;
   border: 2px solid #ffffff;
   height: 60px;
   border-radius:60px;
}

.search-text{
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  padding: 0 10px;
  background: transparent;
  outline:none; border:none; line-height:56px; padding-left:20px; width:80%;
}

.search-icon {
  background:url(../images/search.png) center no-repeat; position:absolute; right:20px; top:0px; width:56px; height:56px;outline:none;border:none; text-indent:-999px;
}

.search-modal .close-modal {
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 32px;
  padding: 14px;
}

/******************head end************/

.btn {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    box-sizing: border-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    height: 46px;
    line-height: 36px;
    padding: 5px 20px;
    vertical-align: middle;
    white-space: nowrap;
}
#mobile-menu ul{ margin-bottom:0;}

a:hover{ text-decoration:none !important;}

.modal{ z-index:99999999999999999999999 !important;}

.product .swiper-pagination{ margin-top:20px;}


/* ------------------------news----------------------------- */

.news {
    width: 100%;
    overflow: hidden;
    padding-bottom: 100px;
}

.news-content {
    width: 1350px;
    margin: 0 auto;
}

.news-title {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
    overflow: hidden;
}

.news-title h4 {
    font-size: 36px;
    color: #000;
}

/* ----------- */

.news-matter {
    width: 100%;
}

.news-matter ul li {
    float: left;
    width: 33.333333333333333333%;
    height: 350px;
    background-color: #ffffff;
    overflow: hidden;
}

.news-matter ul li img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: all 1s ease;
}

.news-matter ul li img:hover {
    transform: scale(1.1);
}
.news-shadow-one {
    -moz-box-shadow: 4px -4px 15px 0px #f5f5f5;
    -webkit-box-shadow: 4px -4px 15px 0px #f5f5f5;
    box-shadow: 4px -4px 15px 0px #f5f5f5;
}

.news-shadow-two {
    -moz-box-shadow: -1px 4px 15px 0px #f5f5f5;
    -webkit-box-shadow: -1px 4px 15px 0px #f5f5f5;
    box-shadow: -1px 4px 15px 0px #f5f5f5;
}

.news-shadow-three {
    -moz-box-shadow: 1px 4px 15px 0px #f5f5f5;
    -webkit-box-shadow: 1px 4px 15px 0px #f5f5f5;
    box-shadow: 1px 4px 15px 0px #f5f5f5;
}
/* .news-shadow-one:hover {
    -moz-box-shadow: 4px -4px 15px 0px #f5f5f5;
    -webkit-box-shadow: 4px -4px 15px 0px #f5f5f5;
    box-shadow: 4px -4px 15px 0px #f5f5f5;
}

.news-shadow-two:hover {
    -moz-box-shadow: -1px 4px 15px 0px #f5f5f5;
    -webkit-box-shadow: -1px 4px 15px 0px #f5f5f5;
    box-shadow: -1px 4px 15px 0px #f5f5f5;
}

.news-shadow-three:hover {
    -moz-box-shadow: 1px 4px 15px 0px #f5f5f5;
    -webkit-box-shadow: 1px 4px 15px 0px #f5f5f5;
    box-shadow: 1px 4px 15px 0px #f5f5f5;
} */

.news-matter ul li h2 {
    font-size: 16px;
    color: #3c3950;
    font-weight: bold;
    text-align: center;
    margin-top: 60px;
    width: 84%;
    margin-left: 8%;
}

.news-matter ul li p {
    font-size: 14px;
    color: #5f727f;
    width: 70%;
    margin-left: 15%;
    text-align: center;
    margin-top: 50px;
    line-height: 24px;
}

.news-matter ul li h4 {
    font-size: 12px;
    color: #666666;
    text-align: center;
    margin-top: 60px;
}

.news-matter ul li h4:hover {
    font-weight: bold;
}


/*--- Footer ---*/

.Footer-wrapper {
	width: 100%;
}

.Footer-top {
	width: 100%;
	padding-bottom: 80px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #242327;
}

.Footer-Ctop {
	width: 1350px;
	margin: 0 auto;
}

.Footer-Ctop>div {
	float: left;
}

/* ------------------------------------------------------ */

.Footer-top-l {
	width: 25%;
	margin-top: 80px;
	overflow: hidden;
}

.Top-l-pic {
	width:123px;
	height: 49px; margin-top:15px;
}

.Top-l-pic img {
	width: 100%;
	height: 100%;
}

.Top-l-title {
	font-size: 14px;
	color: #888;
	margin-top: 56px;
}

.Top-l-list {
	margin-top: 20px;
}

.Top-l-list img {
	float: left;
	margin-top: 2px;
}

.Top-l-list p {
	font-size: 14px;
	width: 80%;
	
	color: #888;
}



.Top-l-title a:hover{color: #ffffff;}

/* ------------- */

.Footer-top-c {
	width: 22.5%;
	margin-top: 80px;
	overflow: hidden; margin-right:5%;
}

.Top-c-title {
	font-size: 24px;
	color: #ffffff;
}

.Top-c-line {
	width: 100%;
	height: 1px;
	background-color: #454447;
	margin-top: 16px;
}

.Top-c-list {
	margin-top: 10px;
}

.Top-c-list ul li {
	width: 50%;
	height: auto;
	float: left;
	font-size: 14px;
	color: #888888;
	margin-top: 16px;
}

.Top-c-list ul li:hover {
	color: #ffffff;
}

/* --------------- */

.Footer-top-r {
	width:22%;
	margin-top: 80px;
	overflow: hidden;
}

.Top-r-title {
	font-size: 24px;
	color: #ffffff;
	text-align: left;
margin-left: 38.4%;
}

.Top-r-line {
	width: 58.8%;
	height: 1px;
	background-color: #454447;
	margin-top: 16px;
	/* margin-left: 41.2%; */
	margin-left: 38.4%;
}

.Top-r-list ul {
	width: 200px;
	float: right;
	/* margin-right: -10px; */
	margin-right: -3px; 
}
.Top-r-list{ margin-top:10px;}
.Top-r-list ul li {
	width: 100%;
	
	float: left;
	margin-left: 14px;
	margin-top: 16px;
	overflow: hidden; color:#888888;
}
.Top-r-list ul a li:hover{color:#fff;}
.Top-r-list ul li img {
	width: 100%;
	height: 100%;
	transition: all 1s ease;
}

.Top-r-list ul li img:hover {
	transform: scale(1.1);
}

/* ----------------------------------------------------------- */

.Footer-bottom {
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 16px;
	background-color: #19181b;
}

.Footer-Cbottom {
	width: 1350px;
	margin: 0 auto;
}

.Footer-Cbottom h4 {
	font-size: 14px;
	color: #888888;
	float: left;
	margin-top: 22px;
}

.Footer-Cbottom div {
	float: right;
	margin-top: 16px;
}

.Footer-Cbottom div a {
	float: right;
	margin-left: 16px;
}

.Footer-Cbottom div a img {
	width: 30px;
	height: 30px;
}

.Footer-Cbottom div a img:hover {
	border-radius: 30px;
	border: 1px solid #ffffff;
}



.ewm{ width:150px;}
.mr{ margin-right:0; width:20%;}
@media (max-width:1400px) {
	.container{ width:98%; margin:auto;}
	.Footer-Cbottom,.news-content,.Footer-Ctop{width: 1200px;}
}
@media (max-width:1250px) {
	
	.Footer-Cbottom,.news-content,.Footer-Ctop{width: 960px;}
}

@media (max-width:1100px) {
	.main-menu nav > ul > li{ margin-left:30px;}
	.Footer-Cbottom,.news-content,.Footer-Ctop{width: 800px;}
}
@media (max-width:900px) {
	.Footer-Cbottom,.news-content,.Footer-Ctop{ width:100% !important;}
	.Footer-Cbottom,.Footer-Ctop{ width:100% ; padding-left:15px; padding-right:15px;}
 .news-title h4 {
        font-size: 24px;;
    }
    .news-title {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .news-matter ul li {
        width: 100%;
        height: 232px;
       /* margin-top: 20px;*/
    }
    .news-matter ul li h2 {
        font-size: 16px;
        margin-top: 30px;
    }
    .news-matter ul li p {
        width: 90%;
        margin-left: 5%;
        margin-top: 15px;
    }
	.news-matter a{ display:block;}
    .news-matter ul li h4 {
        margin-top: 40px;
    }
    .news-matter ul li img {
        height: 232px; max-width:100%; display:block;
    }
    .news {
        width: 96%;
        margin-left: 2%;
        padding-bottom: 26px;
    }
	
	.Footer-Ctop>div {
		float: none;
	}
	.Footer-top-l {
		width: 100%;
		margin-top: 20px;
		overflow: hidden;
	}
	.Top-l-pic {
		margin-left:0
	}
	.Top-l-title {
		margin-left: 10%;
		margin-top: 16px;
	}
	.Top-l-list {
		margin-top: 12px;
		margin-left: 0;
	}
	.Top-l-list p {
		font-size: 14px;
		width: 90%;
		margin-left: 0;
		color: #888888;
	}
	/* -------- */
	.Footer-top-c {
		width: 100%;
		margin-top: 20px;
		overflow: hidden;
	}
	.Top-c-title {
		font-size: 20px;
		margin-left: 0;
	}
	.Top-c-list {
		margin-top: 12px;
	}
	.Top-c-list ul li {
		width: 100%;
		height: auto;
		font-size: 14px;
		margin-top: 10px;
		margin-left: 0;
	}
	/* ------ */
	.Footer-top-r {
		width: 100%;
		margin-top: 20px;
		overflow: hidden;
	}
	.Top-r-title {
		font-size: 20px;
		text-align: left;
		margin-right: 0px;
		margin-left: 10%;
	}
	.Top-r-line {
		width: 100%;
		margin-left: 0%;
	}
	.Top-r-list ul {
		width: 200px;
		float: left;
		margin-right: 0px;
		margin-left: 6%;
	}
	.Footer-Cbottom div {
	
		margin-top: 10px;
	}
	.Footer-Cbottom div a {
		/* float: left; */
		margin-left: 6px;
		margin-top: 6px;
	}
	.Footer-Cbottom h4 {
		
		margin-left: 2%;
	}
	.Footer-top {
		padding-bottom: 30px;
	}

}


