@charset "utf-8";
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	html{font-size: 30px;}
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
	html{font-size: 24px;}
}
@media only screen and (min-width: 376px) and (max-width: 414px) {
	html{font-size: 15.525px;}
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
	html{font-size: 14px;}
}
@media only screen and (max-width: 320px) {
	html{font-size: 12px;}
}

img{vertical-align: middle;}
section:before,section:after{content: '';display: block;clear: both;overflow: hidden;}
.wrap{padding-left: 4%;padding-right: 4%;}

.banner{position: relative;padding-bottom: 35px;}
.banner img{width: 100%;}
.banner span{position: absolute;margin: 0 auto;width: 70px;height: 70px;left: 0;right: 0;bottom: 0;background: url(../images/pro-ban.png) no-repeat;background-size: 100% 100%;}
@media only screen and (max-width: 414px) {
	.banner{padding-bottom: 25px;}
	.banner span{width: 50px;height: 50px;}
}

/*网站案例列表*/
.leval{padding-top: 5%;}
.leval .levalchild{float: left;width: 50%;padding: 2% 10%;color: #fff;text-align: center;}
.levalzl{background-color: #4361df;}
.levalhy{background-color: #fcae13}
.leval .levalchild strong{font-size: 1.4rem;line-height: 2.4rem;}
.leval .levalchild p{font-size: 1rem;line-height: 1.8rem;}
.levallist{display: none;border:#e7e7e7 1px solid;border-top: none;padding: 1% 2%;}
.levallist a{display: inline-block;font-size: 1rem;line-height: 1.6rem;padding: 0 .5rem;margin:.2rem;color: #333;}
.levalzllist a.on{background-color: #4361df;color: #fff;}
.levalhylist a.on{background-color: #fcae13;color: #fff;}

.prolist{padding-top: 5%;padding-bottom: 5%;}
.prochild{padding-bottom: 8%;}
.propic{border-radius: 12px;border:#f0f0f0 1px solid;padding: 20px;}
.pic-box{display: table-cell;vertical-align: middle;}
.pic-box img{max-width: 100%;max-height: 100%;}
.protxt{margin-top: 20px;background-color: #f5f5f5;padding: 10px 10%;position: relative;}
.protxt strong{font-size: .8rem;line-height: 1.4rem;color: #333;}
.protxt p{font-size: .6rem;line-height: 1rem;color: #aaa;}
@media only screen and (max-width: 414px) {
	.protxt strong{font-size: 1rem;}
}
/*网站案例详情*/
.infobg{background-repeat: no-repeat;background-color: #f2f2f2;background-size: 100% auto;background-position: top center;padding: 30% 5% 5% 5%;}
.infoBox{box-shadow: 0 0 15px rgba(0,0,0,0.4);background-color: #fff;padding: 2% 4%;}
.infoBox{border-bottom: #ccc 1px dashed;}
.infoBox span{display: block;font-size: 1.2rem;line-height: 1.8rem;font-family: "Times New Roman";color: #999;margin-bottom: .2rem;}
.infoBox strong{display: block;padding-bottom: 1rem;font-size: 1rem;line-height: 1.4rem;color: #000;}
.infoBox p{font-size: 1rem;line-height: 1.4rem;color: #333;}
.infoBox a{display: inline-block;float: right;;font-size: 1rem;line-height: 1.8rem;padding: 0 1rem;margin-top: 1rem;background-image: url(../images/contenta.jpg);-webkit-animation: bam1 3s linear infinite;-o-animation: bam1 3s linear infinite;animation: bam1 3s linear infinite;color: #fff;-webkit-transition-duration: 3s;-o-transition-duration: 3s;transition-duration: 3s;}
.infoBox .R a:hover{-webkit-animation: none;-o-animation: none;animation: none;}
.contentimg{padding-top: 30px;}
.contentimg img{max-width: 100%;}
@media only screen and (max-width: 414px) {
	.infobg{padding-top: 20%;}
}

.gost-center{text-align: center;}
.gost-center:before{content: '';display: inline-block;width: 0%;height: 100%;vertical-align: middle;}
.gost-center p{display: inline-block;vertical-align: middle;}

.clear:after{content: '';display: block;clear: both;overflow: hidden;}

.fadeInUp {animation: fadeInUp 1s forwards;}
.fadeInLeft {animation: fadeInLeft 1s forwards;}

@keyframes fadeInUp{
	0% {    opacity: 0;    transform: translate3d(0,100%,0);}
	100% {    opacity: 1;    transform: none;}	
}
@keyframes fadeInLeft{
	0% {    opacity: 0;    transform: translate3d(-100%,0,0);}
	100% {    opacity: 1;    transform: none;}	
}
@keyframes bam1 {
	0% { background-position:-368px bottom;}
	50% { background-position:0 bottom;}
	100%{ background-position:368px bottom;}
}

@keyframes bam2 {
	0% { background-position:-862px bottom;}
	50% { background-position:0 bottom;}
	100%{ background-position:862px bottom;}
}