/******
布局
******/
html {height: 100%;}
body {min-width: 320px; max-width: 1920px; line-height: 1.6; margin: auto; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease;}
/*business*/
.header1{width: 100%; height: 50px; z-index: 999; position: fixed; top: 0; left: 0;}
.header1 .header-bg{display: block; background-color: #000; width: 100%; height: 50px; position: fixed; top: 0; left: 0;}
.header1 .content{width: 1200px; position: relative; margin: 0 auto; height: 50px;}
.header1 .content .right{height: 50px; line-height: 50px; _line-height: 50px; *line-height: 50px;}
.icon7,.icon8,.icon9{display: block; margin-right: 5px;}
@media screen and (max-width: 1240px) and (min-width: 1001px) {
.header1 .content{width: 100%;}
}
@media screen and (max-width: 1000px) {
.header1 .content{width: 96%; margin: 0 auto;}
}
/*banner1*/
.banner1{width: 100%; padding-top: 60px; background-image: url(../img/banner.jpg); background-position: center; background-repeat: no-repeat; background-size: 100% 100%;}
.banner1 .content{width: 1200px; position: relative; z-index: 99; margin:50px auto 0 auto; padding-bottom: 40px;}
.banner1 .content .left{width: 543px; float: left;animation:mygift 0.6s linear 1s both;-webkit-animation:mygift 0.6s linear 1s both;}
.banner1 .content .right{width: 440px; animation:foactive 0.6s linear 1s both;-webkit-animation:foactive 0.6s linear 1s both; margin-right: 70px; float: right;}
.banner1 .content .right .tit{font-size: 30px; color: #fff; margin-top: 30px;}
.banner1 .content .right .nr{font-size: 16px; color: #fff; margin-top: 20px;}
.banner1 .content .right .tel{font-size: 28px; color: #fde517; margin-top: 20px; padding-left: 30px; background: url(../img/tel2.png) left center no-repeat;}
@keyframes mygift{
0%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 0;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 0); filter: alpha(opacity = 0); -moz-opacity: 0; -khtml-opacity: 0;}
30%{ opacity: .4;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 40); filter: alpha(opacity = 20); -moz-opacity: .4; -khtml-opacity: .4;},
50%{opacity: .6;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 60); filter: alpha(opacity = 60); -moz-opacity: .6; -khtml-opacity: .6;},
70%{opacity: .8;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 80); filter: alpha(opacity = 80); -moz-opacity: .8; -khtml-opacity: .8;},
100%{
-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 1;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 100); filter: alpha(opacity = 100); -moz-opacity: 1; -khtml-opacity: 1;
}
}
@-webkit-keyframes mygift{
0%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 0;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 0); filter: alpha(opacity = 0); -moz-opacity: 0; -khtml-opacity: 0;}
30%{ opacity: .4;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 40); filter: alpha(opacity = 20); -moz-opacity: .4; -khtml-opacity: .4;},
50%{opacity: .6;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 60); filter: alpha(opacity = 60); -moz-opacity: .6; -khtml-opacity: .6;},
70%{opacity: .8;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 80); filter: alpha(opacity = 80); -moz-opacity: .8; -khtml-opacity: .8;},
100%{
-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 1;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 100); filter: alpha(opacity = 100); -moz-opacity: 1; -khtml-opacity: 1;
}
}
@keyframes foactive{
0%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 0;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 0); filter: alpha(opacity = 0); -moz-opacity: 0; -khtml-opacity: 0;}
30%{ opacity: .4;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 40); filter: alpha(opacity = 20); -moz-opacity: .4; -khtml-opacity: .4;},
50%{opacity: .6;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 60); filter: alpha(opacity = 60); -moz-opacity: .6; -khtml-opacity: .6;},
70%{opacity: .8;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 80); filter: alpha(opacity = 80); -moz-opacity: .8; -khtml-opacity: .8;},
100%{
-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 1;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 100); filter: alpha(opacity = 100); -moz-opacity: 1; -khtml-opacity: 1;
}
}
@-webkit-keyframes foactive{
0%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 0;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 0); filter: alpha(opacity = 0); -moz-opacity: 0; -khtml-opacity: 0;}
30%{ opacity: .4;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 40); filter: alpha(opacity = 20); -moz-opacity: .4; -khtml-opacity: .4;},
50%{opacity: .6;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 60); filter: alpha(opacity = 60); -moz-opacity: .6; -khtml-opacity: .6;},
70%{opacity: .8;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 80); filter: alpha(opacity = 80); -moz-opacity: .8; -khtml-opacity: .8;},
100%{
-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);
opacity: 1;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 100); filter: alpha(opacity = 100); -moz-opacity: 1; -khtml-opacity: 1;
}
}
@media screen and (max-width: 1240px) and (min-width: 1001px) {
.banner1 .content{width: 100%;}
.banner1 .content .left{width: 50%;}
.banner1 .content .right{width: 40%; margin-right: 5%;}
.banner1{padding-top: 30px;}
}
@media screen and (max-width: 1000px) {
.banner1 .content{width: 96%; margin:0 auto; padding-top: 30px;}
.banner1 .content .left{width: 50%;}
.banner1 .content .right{width: 40%; margin-right: 5%;}
.banner1 .content .right .tit{margin-top: 10%;}
.banner1{padding-top: 30px;}
}
@media screen and (max-width: 768px) {
.banner1 .content{width: 96%; margin:0 auto; padding-top: 30px;}
.banner1 .content .right .nr{font-size: 12px; margin-top: 10px;}
.banner1 .content .right .tel{font-size: 16px; margin-top: 10px;}
}
@media screen and (max-width: 480px) {
.banner1{background-image: none; background-color: #1b9fe9;}
.banner1 .content{width: 96%; margin:0 auto; padding-top: 30px;}
.banner1 .content .left,.banner1 .content .right{width: 90%; margin: 0 auto; float: none;}
}
.b-first{width: 100%; background-color: #fff; padding: 50px 0;}
.b-first .content{width: 1200px; margin: 0 auto; overflow: hidden;}
.b-first .content .left{width: 560px; float: left; animation:zhong 3s linear 1s both;-webkit-animation:zhong 3s linear 1s both;}
.b-first .content .right{width: 350px; animation:myactive 3s linear 2s both;-webkit-animation:myactive 3s linear 2s both; float: right; margin-right: 70px; margin-top: 100px;}
.b-first .content .right .tit{font-size: 24px; color: #333333;}
.b-first .content .right .nr{font-size: 16px; color: #333333; margin-top: 15px;}
@keyframes myactive{0%{-webkit-transform: translate3d(600px,0,0);transform: translate3d(600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes myactive{0%{-webkit-transform: translate3d(600px,0,0);transform: translate3d(600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@keyframes zhong{
0%{-webkit-transform: translate3d(-600px,0,0);transform: translate3d(-600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes zhong{0%{-webkit-transform: translate3d(-600px,0,0);transform: translate3d(-600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@media screen and (max-width: 1240px) and (min-width: 1001px) {
.b-first .content{width: 100%;}
}
@media screen and (max-width: 1000px) {
.b-first{padding: 30px 0;}
.b-first .content{width: 100%;}
.b-first .content .left{width: 46.6666%;}
.b-first .content .right{width: 29.1666%; margin-top: 50px;}
}
@media screen and (max-width: 768px) {
.b-first .content .left{width: 40%;}
.b-first .content .right{width: 45%; margin-top: 20px; margin-right: 5%;}
.b-first .content .right .tit{font-size: 16px;}
.b-first .content .right .nr{font-size: 14px; margin-top: 10px;}
}
@media screen and (max-width: 480px) {
.b-first .content .left{width: 90%; float: none; margin: 0 auto;}
.b-first .content .right{width: 90%;float: none; margin: 0 auto; margin-top: 20px; margin-top: 20px;}
.b-first .content .right .tit{font-size: 14px;}
.b-first .content .right .nr{font-size: 12px;}
}
.b-two{width: 100%; background-color: #cee9f4; padding: 50px 0;}
.b-two .content{width: 1200px; margin: 0 auto; overflow: hidden;}
.b-two .content .left{width: 644px; animation:myactive 3s linear 3s both;-webkit-animation:myactive 3s linear 3s both; float: right;}
.b-two .content .right{width: 340px; margin-left: 70px; animation:zhong 3s linear 4s both;-webkit-animation:zhong 3s linear 4s both; float: left; margin-top: 100px;}
.b-two .content .right .tit{font-size: 24px; color: #333333;}
.b-two .content .right .nr{font-size: 16px; color: #333333; margin-top: 15px;}
@keyframes myactive{0%{-webkit-transform: translate3d(800px,0,0);transform: translate3d(800px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes myactive{0%{-webkit-transform: translate3d(800px,0,0);transform: translate3d(800px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@keyframes zhong{
0%{-webkit-transform: translate3d(-700px,0,0);transform: translate3d(-700px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes zhong{0%{-webkit-transform: translate3d(-700px,0,0);transform: translate3d(-700px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@media screen and (max-width: 1240px) and (min-width: 1001px) {
.b-two .content{width: 100%;}
}
@media screen and (max-width: 1000px) {
.b-two{padding: 30px 0;}
.b-two .content{width: 100%;}
.b-two .content .left{width: 40%; margin-top: 30px;}
.b-two .content .right{width: 29%; margin-top: 30px;}
}
@media screen and (max-width: 768px) {
.b-two .content .left{width: 35%; margin-top: 20px;}
.b-two .content .right{width: 28%; margin-top: 20px;}
.b-two .content .right .tit{font-size: 16px;}
.b-two .content .right .nr{font-size: 14px; margin-top: 10px;}
}
@media screen and (max-width: 600px) {
.b-two .content .left{width: 35%; margin-top: 20px; margin-right: 5%;}
.b-two .content .right{width: 30%; margin-top: 20px; margin-left: 5%;}
.b-two .content .right .tit{font-size: 14px;}
.b-two .content .right .nr{font-size: 12px;}
}
@media screen and (max-width: 480px) {
.b-two .content .left{width: 90%; float: none; margin: 0 auto;}
.b-two .content .right{width: 90%;float: none; margin: 0 auto; margin-top: 20px; margin-top: 20px;}
.b-two .content .right .tit{font-size: 14px;}
.b-two .content .right .nr{font-size: 12px;}
}
.b-three{width: 100%; background-color: #fff; padding: 50px 0;}
.b-three .content{width: 1200px; margin: 0 auto; overflow: hidden;}
.b-three .content .left{width: 560px; float: left; animation:zhong 3s linear 5s both;-webkit-animation:zhong 3s linear 5s both;}
.b-three .content .right{width: 350px; animation:myactive 3s linear 6s both;-webkit-animation:myactive 3s linear 6s both; float: right; margin-right: 70px; margin-top: 100px;}
.b-three .content .right .tit{font-size: 24px; color: #333333;}
.b-three .content .right .nr{font-size: 16px; color: #333333; margin-top: 15px;}
@keyframes myactive{0%{-webkit-transform: translate3d(600px,0,0);transform: translate3d(600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes myactive{0%{-webkit-transform: translate3d(600px,0,0);transform: translate3d(600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@keyframes zhong{
0%{-webkit-transform: translate3d(-600px,0,0);transform: translate3d(-600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes zhong{0%{-webkit-transform: translate3d(-600px,0,0);transform: translate3d(-600px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@media screen and (max-width: 1240px) and (min-width: 1001px) {
.b-three .content{width: 100%;}
}
@media screen and (max-width: 1000px) {
.b-three{padding: 30px 0;}
.b-three .content{width: 100%;}
.b-three .content .left{width: 46.6666%;}
.b-three .content .right{width: 29.1666%; margin-top: 50px;}
}
@media screen and (max-width: 768px) {
.b-three .content .left{width: 40%;}
.b-three .content .right{width: 45%; margin-top: 20px; margin-right: 5%;}
.b-three .content .right .tit{font-size: 16px;}
.b-three .content .right .nr{font-size: 14px; margin-top: 10px;}
}
@media screen and (max-width: 480px) {
.b-three .content .left{width: 90%; float: none; margin: 0 auto;}
.b-three .content .right{width: 90%;float: none; margin: 0 auto; margin-top: 20px; margin-top: 20px;}
.b-three .content .right .tit{font-size: 14px;}
.b-three .content .right .nr{font-size: 12px;}
}
.b-four{width: 100%; background-color: #cee9f4; padding: 50px 0;}
.b-four .content{width: 1200px; margin: 0 auto; overflow: hidden;}
.b-four .content .left{width: 644px; animation:myactive 3s linear 7s both;-webkit-animation:myactive 3s linear 7s both; float: right;}
.b-four .content .right{width: 340px; margin-left: 70px; animation:zhong 3s linear 8s both;-webkit-animation:zhong 3s linear 8s both; float: left; margin-top: 100px;}
.b-four .content .right .tit{font-size: 24px; color: #333333;}
.b-four .content .right .nr{font-size: 16px; color: #333333; margin-top: 15px;}
@keyframes myactive{0%{-webkit-transform: translate3d(800px,0,0);transform: translate3d(800px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes myactive{0%{-webkit-transform: translate3d(800px,0,0);transform: translate3d(800px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@keyframes zhong{
0%{-webkit-transform: translate3d(-700px,0,0);transform: translate3d(-700px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@-webkit-keyframes zhong{0%{-webkit-transform: translate3d(-700px,0,0);transform: translate3d(-700px,0,0);}30%,50%,70%,100%{-webkit-transform: anslate3d(0,0,0);transform: translate3d(0,0,0);}}
@media screen and (max-width: 1240px) and (min-width: 1001px) {
.b-four .content{width: 100%;}
}
@media screen and (max-width: 1000px) {
.b-four{padding: 30px 0;}
.b-four .content{width: 100%;}
.b-four .content .left{width: 40%; margin-top: 30px;}
.b-four .content .right{width: 29%; margin-top: 30px;}
}
@media screen and (max-width: 768px) {
.b-four .content .left{width: 35%; margin-top: 20px;}
.b-four .content .right{width: 28%; margin-top: 20px;}
.b-four .content .right .tit{font-size: 16px;}
.b-four .content .right .nr{font-size: 14px; margin-top: 10px;}
}
@media screen and (max-width: 600px) {
.b-four .content .left{width: 35%; margin-top: 20px; margin-right: 5%;}
.b-four .content .right{width: 30%; margin-top: 20px; margin-left: 5%;}
.b-four .content .right .tit{font-size: 14px;}
.b-four .content .right .nr{font-size: 12px;}
}
@media screen and (max-width: 480px) {
.b-four .content .left{width: 90%; float: none; margin: 0 auto;}
.b-four .content .right{width: 90%;float: none; margin: 0 auto; margin-top: 20px; margin-top: 20px;}
.b-four .content .right .tit{font-size: 14px;}
.b-four .content .right .nr{font-size: 12px;}
}