@charset "UTF-8";
/*banner图*/
#banner_tabs {width: 100%;height: 100vh;_height:800px;position: relative;margin-top:136px;}
#banner_tabs .slides li {width: 100%;height: 100%;}
.flex-direction-nav a {width: 50px;height: 100px;overflow: hidden;text-indent: 999999em;background: url(../images/flexnav.png) no-repeat;display: block;position: absolute;top: 50%;margin-top: -60px;z-index: 10;cursor: pointer;opacity: 0;filter: alpha(opacity=0);-webkit-transition: all .6s ease;}
.flex-direction-nav .flex-prev {left: 2%;background-position: 0px 0px;}
.flex-direction-nav .flex-next {right: 2%;background-position: -50px 0px;}
#banner_tabs:hover .flex-next {opacity: 0.9;filter: alpha(opacity=80);}
#banner_tabs:hover .flex-prev {opacity: 0.9;filter: alpha(opacity=80);}

#page {height: 60px;margin-top: -60px;}

.index-page section.active>div{display:block;}
.index-page section {height:100vh;position:relative;overflow:hidden;}
.index-page section>div {position:absolute;top:50%;left:30%;z-index:2;display:none;transition:all .6s;}
.index-page2 section>div {position:absolute;top:50%;left:50%;z-index:2;display:none;transition:all .6s;}
.index-page3 section>div {position:absolute;top:50%;left:50%;z-index:2;display:none;transition:all .6s;}
/*APP-HOME*/
.index-page .app-home .bg {background:url(bg.jpg);background-position: center center;height:100vh;display:block;width:100%;top:0;left:0;opacity: 1;-webkit-animation:bg-scale 10s linear infinite;animation:bg-scale 10s linear infinite;}
.index-page2 .app-home .bg {background:url(bg2.jpg);background-position: center center;}
.index-page3 .app-home .bg {background:url(bg3.jpg);background-position: center center;}
/*slogan*/
.index-page .app-home .slogan {height:162px;margin-top:-160px;margin-left: 60px;}
.index-page2 .app-home .slogan {width:100%;height:80px;margin-left:-50%;margin-top:-340px;text-align: center;}
.index-page3 .app-home .slogan {width:852px;height:100px;margin-left:-426px;margin-top:-90px;}

/*second-slogan*/
.index-page .app-home .second-slogan {width:495px;height:50px;margin-top:40px;margin-left: 60px;}
.index-page2 .app-home .second-slogan {width: 100%;height: 50px;margin-top:-240px;margin-left: -50%;text-align: center;}
.index-page2 .app-home .second-slogan2 {width: 100%;margin-left: -50%;text-align: center;top: auto;bottom: 0px;}
.index-page3 .app-home .second-slogan {width: 100%;margin-left: -50%;text-align: center;}


/*second-slogan end*/
.index-page .app-home .create-btn {margin-left:-130px;margin-top:110px;}
.index-page .app-home .mask {position:absolute;background:rgba(0,0,0,.68);width:150px;height:150px;top:50%;margin-top:-75px;margin-left:-75px;transition:all 2s;border-radius:50%;opacity:0;}

.maskscale {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:mask-scale;animation-name:mask-scale;}


/*按钮*/
.nav-arrow {position:absolute;bottom:30px;left:50%;z-index:3;margin-left:-27px;width:55px;height:55px;cursor:pointer;background-image:url(jiantou_a.png);background-repeat: no-repeat;background-position: center;background-size:55px 55px;opacity: 0.5;
animation-name:arrowing;-webkit-animation-name:arrowing;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx) {
	.nav-arrow {background-size:35px 35px}
}
.nav-arrow:hover {opacity: 1;}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx) {
	.nav-arrow:hover {background-size:35px 35px}
}

@-webkit-keyframes arrowing {
	0%,100% {-webkit-transform:translateY(-5px);	transform:translateY(-5px)}50% {-webkit-transform:translateY(10px);transform:translateY(10px)}
}
@keyframes arrowing {
	0%,100% {-webkit-transform:translateY(-5px);transform:translateY(-5px);}
	50% {-webkit-transform:translateY(10px);transform:translateY(10px);}
}

@-webkit-keyframes mask-scale {
	0%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.1}
	20%{-webkit-transform:scale(2);transform:scale(2);opacity:.2}
	30%{-webkit-transform:scale(3);transform:scale(3);opacity:.3}
	40%{-webkit-transform:scale(4);transform:scale(4);opacity:.4}
	50%{-webkit-transform:scale(5);transform:scale(5);opacity:.5}
	60%{-webkit-transform:scale(6);transform:scale(6);opacity:.6}
	70%{-webkit-transform:scale(8);transform:scale(8);opacity:.7}
	80%{-webkit-transform:scale(10);transform:scale(10);opacity:.8}
	90%{-webkit-transform:scale(12);transform:scale(12);opacity:.9}
	100%{-webkit-transform:scale(18);transform:scale(18);opacity:1}
}
@keyframes mask-scale {
	0%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.1}
	20%{-webkit-transform:scale(2);transform:scale(2);opacity:.2}
	30%{-webkit-transform:scale(3);transform:scale(3);opacity:.3}
	40%{-webkit-transform:scale(4);transform:scale(4);opacity:.4}
	50%{-webkit-transform:scale(5);transform:scale(5);opacity:.5}
	60%{-webkit-transform:scale(6);transform:scale(6);opacity:.6}
	70%{-webkit-transform:scale(8);transform:scale(8);opacity:.7}
	80%{-webkit-transform:scale(10);transform:scale(10);opacity:.8}
	90%{-webkit-transform:scale(12);transform:scale(12);opacity:.9}
	100%{-webkit-transform:scale(18);transform:scale(18);opacity:1}
}
@-webkit-keyframes bg-scale {
	0%,99%{-webkit-transform:scale(1);transform:scale(1)}
	33%{-webkit-transform:scale(1.05);transform:scale(1.05)}
	66%{-webkit-transform:scale(1.1);transform:scale(1.1)}
}
@keyframes bg-scale {
	0%,99%{-webkit-transform:scale(1);transform:scale(1)}
	33%{-webkit-transform:scale(1.05);transform:scale(1.05)}
	66%{-webkit-transform:scale(1.1);transform:scale(1.1)}
}
.delay100 {animation-delay:.1s;-webkit-animation-delay:.1s;}
.delay200 {animation-delay:.2s;-webkit-animation-delay:.2s;}
.delay300 {animation-delay:.3s;-webkit-animation-delay:.3s;}
.delay400 {animation-delay:.4s;-webkit-animation-delay:.4s;}
.delay500 {animation-delay:.5s;-webkit-animation-delay:.5s;}
.delay600 {animation-delay:.6s;-webkit-animation-delay:.6s;}
.delay700 {animation-delay:.7s;-webkit-animation-delay:.7s;}
.delay800 {animation-delay:.8s;-webkit-animation-delay:.8s;}
.delay900 {animation-delay:.9s;-webkit-animation-delay:.9s;}
.delay1000 {animation-delay:1s;-webkit-animation-delay:1s;}
.delay1200 {animation-delay:1.2s;-webkit-animation-delay:1.2s;}
.delay1400 {animation-delay:1.4s;-webkit-animation-delay:1.4s;}
.delay1600 {animation-delay:1.6s;-webkit-animation-delay:1.6s;}
.delay1800 {animation-delay:1.8s;-webkit-animation-delay:1.8s;}
.delay1900 {animation-delay:1.9s;-webkit-animation-delay:1.9s;}
.delay2500 {animation-delay:2.5s;-webkit-animation-delay:2.5s;}
.delay3500 {animation-delay:3.5s;-webkit-animation-delay:3.5s;}
.delay4500 {animation-delay:4.5s;-webkit-animation-delay:4.5s;}
.delay7000 {animation-delay:7s;-webkit-animation-delay:7s;}

.animated {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fadeInDown {
0% {opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}
100% {opacity:1;-webkit-transform:none;transform:none}
}
.fadeInDown {-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInUp {
0% {opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}
100% {opacity:1;-webkit-transform:none;transform:none}
}
.fadeInUp {-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
/* ---------------- Responsive website ---------------- */

/*屏幕小于1440px应用一下样式*/
@media (max-width:1440px) {
.index-page .app-home .slogan {height:120px;margin-top:-140px;}
.index-page .app-home .slogan img {height: 120px;}
.index-page2 .app-home .slogan {margin-top:-240px;}
.index-page2 .app-home .slogan img {height: auto;}
.index-page3 .app-home .slogan img {height: auto;}

.index-page2 .app-home .second-slogan {margin-top:-150px;}
.index-page2 .app-home .second-slogan2 img {height: 420px;}
.index-page3 .app-home .second-slogan {width: 100%;margin-left: -50%;text-align: center;}

.footer-mess .mess-right .form .ind_mess textarea {width:calc(66% - 20px);}
.footer-mess .mess-right .form .ind_mess .code {width:34%;}

}

/*屏幕小于1366px应用一下样式*/
@media (max-width:1366px) {
.index-page2 .app-home .slogan {margin-top:-200px;}
.index-page2 .app-home .slogan img {height: 60px;}
.index-page2 .app-home .second-slogan {margin-top:-120px;}
.index-page2 .app-home .second-slogan img {height: 45px;}
.index-page2 .app-home .second-slogan2 img {height: 350px;}
}

@media (max-width:1200px) {
.header .info {display: none;}

.footer-mess .mess-right .form .ind_mess textarea {width: calc(50% - 9px);}
.footer-mess .mess-right .form .ind_mess .code {width: calc(50% - 9px);}
}

/*屏幕小于1024px应用一下样式*/
@media (max-width:1024px) {
.case_wrap{width:99%;margin:0 auto;}

.footer-mess .mess-left, .footer-mess .mess-right {width: 100%;}
.footer-mess .mess-left .left_con .top p{font-size:2.5rem;}
.footer-mess .mess-left .left_con .top span{font-size:1.9rem;}
.footer-mess .mess-left .left_con b{font-size:2.5rem;}
}

@media (max-width:769px) {
#banner_tabs {margin-top:0px;}
.index-page .app-home .slogan,
.index-page .app-home .second-slogan {width: 100%;margin-left: -50%;text-align: center;height: auto;padding: 0 45px;box-sizing:border-box;}
.index-page .app-home .slogan img,.index-page2 .app-home .slogan img,.index-page2 .app-home .second-slogan img,.index-page2 .app-home .second-slogan2 img  {height: auto;}

.index-page .app-home .slogan {margin-top:-120px;}
.index-page2 .app-home .slogan {margin-top: -90px;}
.index-page3 .app-home .slogan {margin-top: -90px;}
.index-page .app-home .second-slogan {margin-top: -10px;}

/*共用元素*/
.container {margin: 0 auto;}
.section {padding: 30px 0px;}

}

/*屏幕小于768px应用一下样式*/
@media (max-width:768px) {
#banner_tabs {margin-top:0px;}
/*banner图*/
.section_head {padding: 30px 10px;}
.section_head .title p {font-size: 24px;}
.section_head .title span {font-size: 14px;}

.flex-direction-nav a {opacity: 1;width: 30px;height: 60px;background-size: 60px 60px;}
.flex-direction-nav .flex-prev {left: 2%;background-position: 0px 0px;}
.flex-direction-nav .flex-next {right: 2%;background-position: -30px 0px;}

}