/*正文*/
* { -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;}

/*320-850 手机横屏*/
@media screen and (orientation : landscape) {
/*section1*/
.applyCard{width: 100%; height: 100%; background-color: #fff;}
.BG{width:100%; height: 50px; background-color: #fff;}
.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:8%;}
.card0Text{position: absolute; width: 100%; height: 40%; 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: 40%;}
.card0button{position: absolute; top:35%; width: 100%; height: 40%; margin:0 auto; text-align: center; padding-top:0%; }
.card0button img{width: 25%;}
.card0-bottom{position: absolute; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:0%; top:43%;
  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: 30%;}
/* 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:40%;
  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%; position:relative;}
.bg2{ width:100%; height:100%;  background-position:center;
  background-image: url(../../images/PhoneApplyCard/bg11.jpg); background-size: auto 100%; }
/*section2-上文字*/
.bg20 { position: absolute; left:10%; width: 40%; height: 70%; top:15%;
  opacity: 1; 
  transition: all 1s; 
  -moz-transition: all 1s; 
  -webkit-transition: all 1s; 
  -o-transition: all 1s; 
  -ms-transition-delay: all 1s;}
.bg20 img{height: 73%; padding-top: 10%;}
/*section2-下图*/
.bg21 { position: absolute; left: 45%; width: 60%; height: 70%; top:15%;
 opacity: 1;
transition: all 1s; 
-moz-transition: all 1s; 
-webkit-transition: all 1s; 
-o-transition: all 1s; 
-ms-transition-delay: all 1s; }
.bg21 img{height: 100%; padding-top: 15%;}
/* CSS3过度及动画 */
.active .bg20 { left:15%; 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:40%; 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%; position: relative;}
.bg3{width: 100%; height: 100%; background-position:center;
  background-image: url(../../images/PhoneApplyCard/bg22.jpg);  background-size: auto 100%;}
/*section3-上文字*/
.bg30 { position:absolute; right:30%; top: 20%; width: 50%; height: 50%; opacity: 0; text-align: right;
  transition: all 1s; 
  -moz-transition: all 1s; 
  -webkit-transition: all 1s; 
  -o-transition: all 1s; 
  -ms-transition-delay: all 1s;}
.bg30 img{position: absolute; height: 99%; }
/* CSS3过度及动画 */
.active .bg30 { right: 35%; 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; position: relative;}
.bg4{width: 100%; height: 100%;  background-color: #f0f1f5;}
/*section4-上文字*/
.bg40 { position: absolute; top:0%; width: 100%; height: 16%; 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; }
.bg40 img{ height: 100%; }
/*section4-下图*/
.bg41 {position: absolute; top: 28%; 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{height: 100%; text-align: center; margin:0 auto;}
 /* CSS3过度及动画 */ 
.active .bg40 {top: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;}
.active .bg41 {top: 26%;
  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: center;
  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: 40%; padding-left: 10%;}
.bg51 { position: absolute; top: 21%; 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: 15%; height: 100%; display: inline-block; background-size: 100% auto; background-repeat: no-repeat;
  background-image: url(../../images/PhoneApplyCard/img4-button.png); background-position:center;}
/*.bg51 a:hover{background-image: url(../../images/PhoneApplyCard/img4-button-click.png);}*/

.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: 30%; 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:24%;
  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:80%; width: 100%; height: 20%; background-color:#f5f6fb;}
.footer-m{width:94%; height:100%; margin:0px auto; color:#858383;}
.footer-1-l{width: 100%; height: auto; height: 35%; padding-top:5px;}
.footer-1-l li{list-style-type:none; float: left; width:16.5%; color:#858383; font-size:8px; text-align: center; }
.footer-1-l li a{ color:#999999; text-decoration: none;}
.footer-1-r{width:100%; height:auto;font-size: 6px;line-height: 12px; letter-spacing: 1px; text-align: center;}
.footer-icon{width:10px; padding-bottom: 2px;}
}













/*pad 横屏*/















/*850-1024 pad 横屏*/
@media screen and (orientation : landscape) {
@media screen and (min-width: 850px) and (max-width: 1024px){
/*section1*/
.BG{width:100%; height: 70px; background-color: #fff;}
.card-top{ width: 100%; height: 30%; margin-top:12%;}
.card0Text{ width: 100%; height: 40%; margin:0 auto; text-align: center; }
.card0Text img{width: 50%;}
.card0button{top:35%; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:0%; }
.card0button img{width: 35%;}
.card0-bottom{position: absolute; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:0%; top:46%;}
.card0-bottom img{width: 40%;}
/* CSS3过度及动画 */
.active .card0-bottom {top:43%;}


/*section2*/
.bg20 {left:8%; width: 40%; height: 70%; top:15%;}
.bg20 img{height: 62%; padding-top: 10%;}
.bg21 { left: 45%; width: 60%; height: 70%; top:18%;}
.bg21 img{height: 90%; padding-top: 17%;}
/* CSS3过度及动画 */
.active .bg20 { left:13%;}
.active .bg21 {left:40%;}

/*section3*/
.bg30 {right:35%;}
.bg30 img{height: 93%; }
/* CSS3过度及动画 */
.active .bg30 { right: 40%;}

/*section4*/
.bg40 { padding-left:-1%;}
.bg40 img{ height: 92%; }
.bg41 img{height: 92%;}

/*section5*/
.bg50 { position: absolute; width: 90%; left: 5%; height: 18%; top:1%; text-align: center;}
.bg50 img{ width: 53%; padding-left: 10%;}
.bg51 { position: absolute; top: 21%; width: 100%; height: 8%; text-align: center;}
.bg51 a{width: 24%; }
.bg52{position: absolute; width: 100%; height: 50%; top:31%; text-align: center;}
.bg52 img{width: 45%; 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:5px; }
.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: 14px;line-height: 22px; letter-spacing: 1px; text-align: center;}
.footer-icon{width:13px; padding-bottom: 2px;}
}}










/*pad pro横屏*/









/*1100-2100 pad pro横屏*/
@media screen and (orientation : landscape) {
@media screen and (min-width: 1100px) and (max-width: 2100px){
/*section1*/
.BG{width:100%; height: 90px; background-color: #fff;}
.card-top{ width: 100%; height: 30%; margin-top:12%;}
.card0Text{ width: 100%; height: 40%; margin:0 auto; text-align: center; }
.card0Text img{width: 50%;}
.card0button{top:35%; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:0%; }
.card0button img{width: 35%;}
.card0-bottom{position: absolute; width: 100%; height: 60%; margin:0 auto; text-align: center; padding-top:0%; top:46%;}
.card0-bottom img{width: 40%;}
/* CSS3过度及动画 */
.active .card0-bottom {top:43%;}

/*section2*/
.bg20 {left:8%; width: 40%; height: 70%; top:15%;}
.bg20 img{height: 62%; padding-top: 10%;}
.bg21 { left: 45%; width: 60%; height: 70%; top:18%;}
.bg21 img{height: 90%; padding-top: 17%;}
/* CSS3过度及动画 */
.active .bg20 { left:13%;}
.active .bg21 {left:40%;}

/*section3*/
.bg30 {right:35%;}
.bg30 img{height: 93%; }
/* CSS3过度及动画 */
.active .bg30 { right: 40%;}

/*section4*/
.bg40 { padding-left:-1%;}
.bg40 img{ height: 92%; }
.bg41 img{height: 92%;}

/*section5*/
.bg50 { position: absolute; width: 90%; left: 5%; height: 18%; top:1%; text-align: center;}
.bg50 img{ width: 53%; padding-left: 10%;}
.bg51 { position: absolute; top: 21%; width: 100%; height: 8%; text-align: center;}
.bg51 a{width: 24%; }
.bg52{position: absolute; width: 100%; height: 50%; top:31%; text-align: center;}
.bg52 img{width: 45%; 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:5px; }
.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: 3px;}
}}