.mobile-view { width:100%; height:530px; background:url(./bg-1.png) center top no-repeat; position:relative; overflow:hidden; }
.mobile-view .a { width:450px; height:470px; position:absolute; top:60px; left:50%; margin-left:-542px; opacity:0; opacity:1\9\0; -webkit-animation:flyInLeft 1s ease-in-out forwards; -moz-animation:flyInLeft 1s ease-in-out forwards; -ms-animation:flyInLeft 1s ease-in-out forwards; animation:flyInLeft 1s ease-in-out forwards; }
.mobile-view .b { width:450px; height:380px; position:absolute; top:60px; left:50%; margin-left:-65px; opacity:0; opacity:1\9\0; -webkit-animation:flyInUp 1s ease forwards 0.2s; -moz-animation:flyInUp 1s ease forwards 0.2s; -ms-animation:flyInUp 1s ease forwards 0.2s; animation:flyInUp 1s ease forwards 0.2s; }

.mobile-chart { width:100%; height:720px; padding-top:50px; position:relative; overflow:hidden; }
.mobile-chart .head { text-align:center; padding-bottom:20px; }
.mobile-chart .head h2 { height:80px; line-height:70px; font-size:40px; color:#427edf; }
.mobile-chart .head p { font-size:18px; line-height:30px; }
.mobile-chart .head span { color:#e24949; }
.mobile-chart .cloud { width:720px; margin:0 auto 30px; }
.mobile-chart .cloud dd { float:left; width:122px; height:122px; margin-left:25px; position:relative; }
.mobile-chart .cloud dd:first-child { margin-left:0; }
.mobile-chart .cloud dd.even { top:25px; }
.mobile-chart .chart { width:1027px; height:358px; margin:0 auto; }
.mobile-chart .chart img:hover { -webkit-transform:translateY(20px); -moz-transform:translateY(20px); -ms-transform:translateY(20px); transform:translateY(20px); }

.mobile-advantage { height:700px; padding-top:40px; background:url(./bg-2.png) center top no-repeat #0078cd; overflow:hidden; }
.mobile-advantage .head { text-align:center; }
.mobile-advantage .head h2 { height:70px; line-height:70px; font-size:40px; color:#FFF; }
.mobile-advantage .head p { line-height:30px; font-size:18px; color:#FFF; }
.mobile-advantage .main { width:225px; margin:0 auto; padding:25px 0; position:relative; }
.mobile-advantage .phone { width:225px; height:465px; background:url(./3-1.png) center center no-repeat; }
.mobile-advantage .row { position:absolute; top:0; color:#ffdd40; z-index:2; }
.mobile-advantage .row-1, .mobile-advantage .row-3 { left:260px; width:250px; }
.mobile-advantage .row-2, .mobile-advantage .row-4 { right:260px; width:340px; text-align:right; }
.mobile-advantage .row-1 { top:110px; }
.mobile-advantage .row-2 { top:150px; }
.mobile-advantage .row-3 { top:270px; }
.mobile-advantage .row-4 { top:320px; }
.mobile-advantage .row h3 { font-size:25px; line-height:35px; }
.mobile-advantage .row p { font-size:18px; line-height:26px; }
.mobile-advantage .row:before { content:""; width:23px; height:23px; background:url(./3-2.png) center center no-repeat; position:absolute; top:6px; border-radius:50%; -webkit-animation:lamp 2s ease infinite; -moz-animation:lamp 2s ease infinite; -ms-animation:lamp 2s ease infinite; animation:lamp 2s ease infinite; }
.mobile-advantage .row:after { content:""; width:60px; height:1px; background:#ffdd40; position:absolute; top:17px; }
.mobile-advantage .row-1:before, .mobile-advantage .row-3:before { left:-80px; }
.mobile-advantage .row-2:before, .mobile-advantage .row-4:before { right:-80px; }
.mobile-advantage .row-1:after, .mobile-advantage .row-3:after { left:-70px; }
.mobile-advantage .row-2:after, .mobile-advantage .row-4:after { right:-70px; }
.mobile-advantage .foot { text-align:center; line-height:30px; font-size:18px; color:#FFF; }

.mobile-advan { height:730px; padding-top:70px; overflow:hidden; position:relative; }
.mobile-advan .head { font-size:40px; line-height:60px; color:#427edf; text-align:center; font-weight:700; }
.mobile-advan .img { position:absolute; width:770px; height:640px; bottom:0; right:50%; margin-right:116px; }
.mobile-advan .list { position:absolute; left:50%; top:190px; margin-left:-80px; }
.mobile-advan .list dd { width:370px; height:110px; background:#ebebeb; border-radius:110px; position:relative; margin-bottom:30px; }
.mobile-advan .list dd:hover { background:#d9d9d9; }
.mobile-advan .list .hd { width:110px; height:110px; line-height:110px; text-align:center; border-radius:50%; background:#0076ca; position:absolute; top:0; font-size:22px; color:#FFF; }
.mobile-advan .list dd:hover .hd { background:#5dafe9; box-shadow:0 0 0 2px #0076ca inset; -webkit-animation:pudding 0.1s linear; -moz-animation:pudding 0.1s linear; -ms-animation:pudding 0.1s linear; animation:pudding 2s linear; }
.mobile-advan .list .hd strong { font-size:60px; }
.mobile-advan .list dd.odd { padding:0 30px 0 130px; }
.mobile-advan .list dd.even { padding:0 130px 0 30px; }
.mobile-advan .list dd.odd .hd { left:0; }
.mobile-advan .list dd.even .hd { right:0; }
.mobile-advan .list h3 { font-size:24px; line-height:30px; padding:12px 0 5px; color:#333; }
.mobile-advan .list p { font-size:16px; line-height:25px; }
.mobile-advan .list span { color:#e24949; }

.mobile-benefit { height:540px; padding-top:60px; background:url(./bg-3.png) center center no-repeat #444; overflow:hidden; }
.mobile-benefit .head { text-align:center; line-height:60px; color:#FFF; margin-bottom:60px; }
.mobile-benefit .head p { font-size:30px; height:80px; }
.mobile-benefit .head h2 { font-size:47px; }
.mobile-benefit .list { width:1140px; margin:0 auto; color:#e2e2e2; }
.mobile-benefit .list dd { float:left; width:180px; margin-left:60px; text-align:center; }
.mobile-benefit .list dd:first-child { margin-left:0; }
.mobile-benefit .list img { display:block; width:125px; height:125px; border-radius:50%; margin:0 auto; }
.mobile-benefit .list img:hover { -webkit-animation:pudding 1s linear forwards; -moz-animation:pudding 1s linear forwards; -ms-animation:pudding 1s linear forwards; animation:pudding 1s linear forwards; }
.mobile-benefit .list h3 { height:30px; line-height:30px; padding:15px 0; font-size:20px; font-weight:400; }
.mobile-benefit .list p { color:#aaa; line-height:20px; font-size:14px; text-align:justify; }

.mobile-case { position:relative; padding-top:50px; padding-bottom:100px; margin-bottom:60px; overflow:hidden; }
.mobile-case .head { height:60px; line-height:60px; font-size:28px; text-align:center; color:#427edf; margin-bottom:40px; }
.mobile-case .head strong { font-size:42px; color:#e24949; }
.mobile-case .list { width:100%; margin-bottom:60px; }
.mobile-case .item { float:left; width:225px; height:442px; background:url(./phone.png) center top no-repeat; margin:0 0 0 18px; position:relative; }
.mobile-case .item:first-child { margin-left:0; }
.mobile-case .main { width:200px; height:356px; background:#fff; position:relative; left:13px; top:30px; overflow:hidden; }
.mobile-case .img { display:block; width:100%; height:100%; overflow:hidden; }
.mobile-case .img img { display:block; width:100%; }
.mobile-case .inf { width:100%; height:100%; position:absolute; left:0; top:0; display:none; }
.mobile-case .inf:before { content:""; width:100%; height:100%; background:rgba(0,0,0,0.7) !important; filter:Alpha(opacity=0.7); background:#000; position:absolute; left:0; top:0; z-index:0; }
.mobile-case .inf > * { position:relative; z-index:1; text-align:center; color:#FFF; }
.mobile-case .inf p { height:50px; line-height:50px; padding-top:20px; font-size:18px; }
.mobile-case .code { width:130px; height:130px; padding:10px; background:#FFF; margin:0 auto 15px; }
.mobile-case h3 { font-weight:400; margin:0 20px; }
.mobile-case .link { width:150px; height:40px; line-height:40px; position:absolute; left:50%; margin-left:-75px; bottom:30px; background:#1999d6; border-radius:5px; color:#FFF; font-size:15px; }
.mobile-case .link:hover { background:#0573a7; }
.mobile-case .item:hover .inf { display:block; }
.mobile-case .item:hover p { -webkit-animation:flyInUp 0.3s ease both; animation:flyInUp 0.3s ease both; }
.mobile-case .item:hover .code { -webkit-animation:flyInUp 0.4s ease both; animation:flyInUp 0.4s ease both; }
.mobile-case .item:hover h3 { -webkit-animation:flyInUp 0.6s ease both; animation:flyInUp 0.6s ease both; }
.mobile-case .item:hover .link { -webkit-animation:flyInUp 0.7s ease both; animation:flyInUp 0.7s ease both; }

.mobile-case .foot { width:100%; height:35px; }
.mobile-case .foot a { display:block; width:240px; height:35px; line-height:35px; background:#e14848; color:#fff; border-radius:35px; margin:0 auto; font-size:18px; text-align:center; }
.mobile-case .foot a:hover { background:#af0000; }