/*正文*/
* { -webkit-tap-highlight-color: transparent }
html{ width: 100%;height: 100%; font-size: 62.5%; }
body{ width: 100%;height: 100%; font-size: 62.5%; background:#fff;}
.section { position: relative; overflow: hidden; width:100%; height:100%;}

/*320-420 手机竖屏*/
@media screen and (orientation : portrait){
/*section1*/
.applyCard{width: 100%; height: 100%; background-color: #fff;}
.BG{width:100%; height: 50px; background-color: #fff;
-webkit-box-shadow: #f0f1f5 0px 0px 10px;
-moz-box-shadow: #f0f1f5 0px 0px 10px;
box-shadow: #f0f1f5 0px 0px 10px;}
.card0{position:relative; width: 100%; height: 100%; background-image: url(../../images/PhoneApplyCard/bg0.jpg);
  background-repeat:no-repeat; background-size: 100% 100%; }
.card-top{position: absolute; width: 100%; height: 30%; margin-top:20%; top:4%;}
.card0Text{position: absolute; width: 100%; height: 30%; margin:0 auto; text-align: center; 
  opacity: 0;transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.card0Text img{width: 80%; }
.card0button{position: absolute; top:21%; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:3%; }
.card0button img{width: 55%; height: auto; display: inline-block;}

.card0-bottom{position: absolute; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:20%; 
  top:33%; opacity: 0; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.card0-bottom img{width: 70%;}
/* CSS3过度及动画 */
.active .card0Text { opacity: 1;  
  transition: all 2s; -moz-transition: all 2s; -webkit-transition: all 2s; 
  -o-transition: all 2s; -ms-transition-delay: all 2s;}
.active .card0-bottom {top:28%; opacity: 1;  
  transition: all 1.5s; -moz-transition: all 1.5s; -webkit-transition: all 1.5s; 
  -o-transition: all 1.5s; -ms-transition-delay: all 1.5s;}


/*section2*/
.section2{width: 100%; height: 100%; }
.bg2{ width:100%; height:100%; position:relative; background-position:center;
  background-image: url(../../images/PhoneApplyCard/bg1.jpg); background-size: auto 100%; }
/*section2-上文字*/
.bg20 { position: absolute; top: 9%; height: 39%;  width: 90%; left: 3%; opacity: 0; 
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.bg20 img{width: 46%; }
/*section2-下图*/
.bg21 { position: absolute; right: -3%; top:45%; height: 50%; width: 100%; left: 6%;  opacity: 0;
transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
-o-transition: all 1s; -ms-transition-delay: all 1s; }
.bg21 img{width: 140%; }
/* CSS3过度及动画 */
.active .bg20 { left:8%; opacity: 1; 
transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
-o-transition-delay: 0.7s;-ms-transition-delay: 0.7s; }
.active .bg21 { left:3%; opacity: 1; 
transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
-o-transition-delay: 0.7s;-ms-transition-delay: 0.7s;}*


/*section3*/
.section3{width: 100%; height: 100%;}
.bg3{width: 100%; height: 100%; position: relative; background-position:center;
  background-image: url(../../images/PhoneApplyCard/bg2.jpg);  background-size: auto 100%;}
/*section3-上文字*/
.bg30 { position:absolute; right:0%; top: 11%; width: 90%; height: 39%; opacity: 0; text-align: right; float: right;
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.bg30 img{width: 53%; }
/* CSS3过度及动画 */
.active .bg30 { right: 5%; opacity: 1; 
  transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s;-ms-transition-delay: 0.7s;}


/*section4*/
.section4{width: 100%; height: 100%; margin:0 auto;}
.bg4{width: 100%; height: 100%; position: relative; background-color: #f0f1f5;}
/*section4-上文字*/
.bg40 { position: absolute; top:3%; width: 90%; height: 16%; margin:0 auto; padding-left:13%;opacity: 0;
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s; }
.bg40 img{ width: 97%; }
/*section4-下图*/
.bg41 {position: absolute; top: 27%; width: 100%; height: 72%; text-align: center;opacity:0;
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.bg41 img{width: 83%;}
 /* CSS3过度及动画 */ 
.active .bg40 {top:6%; opacity: 1; 
  transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s;-ms-transition-delay: 0.7s;}
.active .bg41 {top: 25%; opacity: 1; 
  transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s;-ms-transition-delay: 0.7s;}


/*section5*/
.section5{width: 100%; height: 100%; position: relative; background-repeat:repeat-x; 
  background-image: url(../../images/PhoneApplyCard/bg4.png); background-size: 100% 85%;}
.bg50 { position: absolute; width: 90%; left: 5%; height: 18%; top:1%; text-align: right;opacity: 1; 
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.bg50 img{ width: 81%;}
.bg51 { position: absolute; top: 19%; width: 100%; height: 8%; text-align: center;opacity: 1; 
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.bg51 a{width: 40%; height: 100%; display: inline-block; background-size: 100% auto; background-repeat: no-repeat;
  background-image: url(../../images/PhoneApplyCard/img4-button.png); background-position:center;}
.bg52{position: absolute; width: 100%; height: 50%; top:31%; text-align: center; opacity: 1; 
  transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; 
  -o-transition: all 1s; -ms-transition-delay: all 1s;}
.bg52 img{width: 85%; padding-left: 15px;}
/* CSS3过度及动画 */
.active .bg50{top:4%;opacity: 1;
  transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s; -ms-transition-delay: 0.7s;}
.active .bg51{top:22%;opacity: 1;
  transition-delay: 0.7s; -moz-transition-delay: 0.7s;  -webkit-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s;-ms-transition-delay: 0.7s; }
.active .bg52{top:34%; opacity: 1;
  transition-delay: 0.7s; -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s;-ms-transition-delay: 0.7s; }


/*页脚*/
.footer{position: absolute; top:85%; width: 100%; height: 15%; background-color:#f5f6fb;}
.footer-m{width:94%; height:80%; margin:0px auto; color:#858383; padding-top:3%; }
.footer-1-l{width: 100%; height: auto; height: 40%;}
.footer-1-l li{list-style-type:none; float: left; width:16.5%; color:#858383; font-size:10px; text-align: center; }
.footer-1-l li a{ color:#999999; text-decoration: none;}
.footer-1-r{width:100%; height:auto;font-size: 8px;line-height: 14px; letter-spacing: 1px; text-align: center;}
.footer-icon{width:10px; padding-bottom: 2px;}
}












/*pad 竖屏*/














/*420-800 pad竖屏*/
@media screen and (orientation : portrait){
@media screen and (min-width: 420px) and (max-width: 800px){
/*section1*/
.BG{width:100%; height: 80px; background-color: #fff;
-webkit-box-shadow: #f0f1f5 0px 0px 10px;
-moz-box-shadow: #f0f1f5 0px 0px 10px;
box-shadow: #f0f1f5 0px 0px 10px;}
.card-top{ width: 100%; height: 30%; margin-top:17%;}
.card0Text{ width: 100%; height: 30%; }
.card0Text img{width: 70%; }
.card0button{ top:18%; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:3%; }
.card0button a{width: 42%;}
.card0-bottom{ width: 100%; height: 60%; padding-top:18%; top:35%;}
.card0-bottom img{width: 60%;}

/*section2*/
.bg20 {top: 10%; height: 39%;  width: 90%; left: 7%;}
.bg20 img{width: 40%; }
/*section2-下图*/
.bg21 {right: -3%; top:50%; height: 50%; width: 90%; left: 8%;   }
.bg21 img{width: 125%; padding-top: 3%;}
/* CSS3过度及动画 */
.active .bg20 { left:10%;}

/*section3*/
.bg30 {right:0%; top: 11%; width: 90%; height: 39%;}
.bg30 img{width: 45%; }
/* CSS3过度及动画 */
.active .bg30 { right: 5%;}

/*section4*/
.bg40 { top:4%; width: 90%; height: 16%; margin:0 auto; padding-left:15%;}
.bg40 img{ width: 86%; }
/*section4-下图*/
.bg41 { top: 28%; width: 100%; height: 72%; text-align: center;}
.bg41 img{width: 73%;}

/*section5*/
.bg50 {width: 90%; left: 5%; height: 18%; top:1%; text-align: right;}
.bg50 img{ width: 78%; padding-right:8%;}
.bg51 {top: 21%; width: 100%; height: 8%; text-align: center;}
.bg51 a{width: 38%;}
.bg52{width: 100%; height: 50%; top:31%; text-align: center;}
.bg52 img{width: 75%; padding-left: 15px;}


/*页脚*/
.footer{position: absolute; top:85%; width: 100%; height: 15%; background-color:#f5f6fb;}
.footer-m{width:94%; height:80%; margin:0px auto; color:#858383; padding-top:3%; }
.footer-1-l{width: 100%; height: auto; height: 40%;}
.footer-1-l li{list-style-type:none; float: left; width:16.5%; color:#858383; font-size:18px; text-align: center; }
.footer-1-l li a{ color:#999999; text-decoration: none;}
.footer-1-r{width:100%; height:auto;font-size: 16px;line-height: 26px; letter-spacing: 1px; text-align: center;}
.footer-icon{width:13px; padding-bottom: 2px;}
}}








/*pad pro竖屏*/







/*800-1024 pad竖屏*/
@media screen and (orientation : portrait) {
@media screen and (min-width: 800px) and (max-width: 1024px){
/*section1*/
.BG{width:100%; height: 120px; background-color: #fff;}
.card-top{ width: 100%; height: 30%; margin-top:17%;}
.card0Text{ width: 100%; height: 30%; }
.card0Text img{width: 68%; }
.card0button{ top:18%; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:3%; }
.card0button a{width: 40%;}
.card0-bottom{ width: 100%; height: 60%; padding-top:18%; top:35%;}
.card0-bottom img{width: 58%;}

/*section2*/
.bg20 {top: 10%; height: 39%;  width: 90%; left: 7%;}
.bg20 img{width: 40%; }
/*section2-下图*/
.bg21 {right: -3%; top:50%; height: 50%; width: 90%; left: 8%;   }
.bg21 img{width: 125%; padding-top: 3%;}
/* CSS3过度及动画 */
.active .bg20 { left:10%;}

/*section3*/
.bg30 {right:0%; top: 11%; width: 90%; height: 39%;}
.bg30 img{width: 45%; }
/* CSS3过度及动画 */
.active .bg30 { right: 5%;}

/*section4*/
.bg40 { top:4%; width: 90%; height: 16%; margin:0 auto; padding-left:15%;}
.bg40 img{ width: 86%; }
/*section4-下图*/
.bg41 { top: 28%; width: 100%; height: 72%; text-align: center;}
.bg41 img{width: 73%;}

/*section5*/
.bg50 {width: 90%; left: 5%; height: 18%; top:1%; text-align: right;}
.bg50 img{ width: 78%; padding-right:8%;}
.bg51 {top: 21%; width: 100%; height: 8%; text-align: center;}
.bg51 a{width: 38%;}
.bg52{width: 100%; height: 50%; top:31%; text-align: center;}
.bg52 img{width: 75%; padding-left: 15px;}

/*页脚*/
.footer{position: absolute; top:85%; width: 100%; height: 15%; background-color:#f5f6fb;}
.footer-m{width:94%; height:80%; margin:0px auto; color:#858383; padding-top:3%; }
.footer-1-l{width: 100%; height: auto; height: 40%;}
.footer-1-l li{list-style-type:none; float: left; width:16.5%; color:#858383; font-size:24px; text-align: center; }
.footer-1-l li a{ color:#999999; text-decoration: none;}
.footer-1-r{width:100%; height:auto;font-size: 20px;line-height: 33px; letter-spacing: 1px; text-align: center;}
.footer-icon{width:18px; padding-bottom: 2px;}
}}