@charset "utf-8";
.cloud-banner {
    padding: 55px 0;
    text-align: center
}

.cloud-banner dt {
    font-weight: bold;
    font-size: 36px;
    color: #000
}

.cloud-banner dd {
    padding-top: 4px;
    font-size: 20px;
    color: #999
}

.main {
    width: 100%;
    background: url(/proc/Apply/Public/Images/cloud-main.jpg?hash=15970378) no-repeat center center
}

.main > div {
    position: relative;
    padding: 65px 0
}

.main .moduleUserLay {
    float: left
}
.main .mulHead {
    border-bottom: 1px solid #dddddd;
    overflow: hidden;
    padding-bottom: 35px;
}
.main .mulHead img{
    float: left;
    margin-left: 10px;
}

.main .mulHead ul{
    float: left;
    margin-left: 20px;
    text-align: left;
}

.main .mulHead ul li:nth-of-type(1){
    font-size: 26px;    
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}

.main .mulHead ul li:nth-of-type(2){
    font-size: 18px;    
    color: #666;
}
.main .mulBody{
    padding-top: 35px;
    position: relative;
}
.main .mulBody img{
    margin-left: 10px;
    cursor: pointer;
}
.main .mulBody .ios:hover .hover-box-ios{
    display: block !important;
}
.main .mulBody .android:hover .hover-box-android{
    display: block !important;
}
.main .mulBody p{
    color: #666;
    font-size: 16px;
    margin-top: 30px;
}
.main .mulBody .hover-box-ios{
    width: 248px;
    height: 240px;
    padding: 38px 22px 22px 35px;
    position: absolute;
    top:20px;
    right: -230px;
    background: url(/proc/Apply/Public/Images/cloud-animation/hover.png?hash=937f615e) no-repeat;
    display: none;
}
.main .mulBody .hover-box-ios img{
    width: 162px;
}
.main .mulBody .hover-box-android{
    padding: 35px 22px 22px 35px;
    width: 248px;
    height: 240px;
    position: absolute;
    top:120px;
    right: -230px;
    background: url(/proc/Apply/Public/Images/cloud-animation/hover.png?hash=937f615e) no-repeat;
    display: none;
}
.main .mulBody .hover-box-android img{
    width: 172px;
    margin-left: 5px;
}
.main .mainText {
    float: right;
    padding: 115px 60px 0 0;
    font-size: 24px;
    color: #fff
}

.main .mainText dt {
    font-weight: bold;
    font-size: 50px
}

.main .mainText dd {
    padding-top: 10px
}

.main .mainText dd strong {
    color: #f9c81c
}

.cloud-step .step {
    display: block;
    width: 45px;
    min-height: 52px;
    margin: 0 auto;
    background: url(/proc/Apply/Public/Images/cloud-background-step.png?hash=1cee179c) no-repeat 0 0;
    font-size: 20px;
    line-height: 52px;
    color: #fff;
    text-align: center
}

.step-animate {
    position: relative;
    width: 226px;
    min-height: 226px;
    margin: 65px auto 33px;
    background-color: #fef4d2;
    border: 3px solid #f9c81c;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

.step-animate p {
    position: absolute
}

.ani01 .ani01-01, .ani01 .ani01-03 {
    bottom: 0;
    left: 10px
}

.ani01 .ani01-02 {
    top: 5px;
    left: 1px
}

@-moz-keyframes ani1-02 {

0
{
    -moz-transform-origin: 100% 68%
;
    -moz-transform: rotate(0)
}
33
%
{
    -moz-transform-origin: 100% 68%
;
    -moz-transform: rotate(6deg)
}
100
%
{
    -moz-transform-origin: 100% 68%
;
    -moz-transform: rotate(0)
}
}
@-webkit-keyframes ani1-02 {

0
{
    -moz-transform-origin: 100% 68%
;
    -webkit-transform: rotate(0)
}
33
%
{
    -moz-transform-origin: 100% 68%
;
    -webkit-transform: rotate(6deg)
}
100
%
{
    -moz-transform-origin: 100% 68%
;
    -webkit-transform: rotate(0)
}
}
@keyframes ani1-02 {

0
{
    transform-origin: 100% 68%
;
    transform: rotate(0)
}
33
%
{
    transform-origin: 100% 68%
;
    transform: rotate(6deg)
}
100
%
{
    transform-origin: 100% 68%
;
    transform: rotate(0)
}
}
@-moz-keyframes ani1-03 {

0
{
    left: 10px
}
20
%
{
    left: 8px
}
40
%
{
    left: 12px
}
60
%
{
    left: 8px
}
80
%
{
    left: 12px
}
100
%
{
    left: 10px
}
}
@-webkit-keyframes ani1-03 {

0
{
    left: 10px
}
20
%
{
    left: 8px
}
40
%
{
    left: 12px
}
60
%
{
    left: 8px
}
80
%
{
    left: 12px
}
100
%
{
    left: 10px
}
}
@keyframes ani1-03 {

0
{
    left: 10px
}
20
%
{
    left: 8px
}
40
%
{
    left: 12px
}
60
%
{
    left: 8px
}
80
%
{
    left: 12px
}
100
%
{
    left: 10px
}
}
.ani01:hover .ani01-02 {
    -moz-animation-name: ani1-02;
    -moz-animation-duration: 1.2s;
    -moz-animation-iteration-count: 2;
    -webkit-animation-name: ani1-02;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-iteration-count: 2;
    animation-name: ani1-02;
    animation-duration: 1.2s;
    animation-iteration-count: 2
}

.ani01:hover .ani01-03 {
    -moz-animation-name: ani1-03;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: ani1-03;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: ani1-03;
    animation-duration: .5s;
    animation-iteration-count: infinite
}

.ani02 .ani02-01 {
    bottom: 0;
    left: 3px
}

@-moz-keyframes ani2-02 {

0
{
    -moz-transform-origin: 0 100%
;
    -moz-transform: rotate(0)
}
33
%
{
    -moz-transform-origin: 0 100%
;
    -moz-transform: rotate(-6deg)
}
100
%
{
    -moz-transform-origin: 0 100%
;
    -moz-transform: rotate(0)
}
}
@-webkit-keyframes ani2-02 {

0
{
    -moz-transform-origin: 0 100%
;
    -webkit-transform: rotate(0)
}
33
%
{
    -moz-transform-origin: 0 100%
;
    -webkit-transform: rotate(-6deg)
}
100
%
{
    -moz-transform-origin: 0 100%
;
    -webkit-transform: rotate(0)
}
}
@keyframes ani2-02 {

0
{
    transform-origin: 0 100%
;
    transform: rotate(0)
}
33
%
{
    transform-origin: 0 100%
;
    transform: rotate(-6deg)
}
100
%
{
    transform-origin: 0 100%
;
    transform: rotate(0)
}
}
.ani02 .ani02-02 {
    top: -16px;
    right: -5px
}

.ani02:hover .ani02-02 {
    -moz-animation-name: ani2-02;
    -moz-animation-duration: .8s;
    -moz-animation-iteration-count: 2;
    -webkit-animation-name: ani2-02;
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: 2;
    animation-name: ani2-02;
    animation-duration: .8s;
    animation-iteration-count: 2
}

.ani03 .ani03-01 {
    bottom: 33px;
    left: -8px
}

@-moz-keyframes ani3-02 {

0
{
    -moz-transform-origin: 20% 80%
;
    -moz-transform: rotate(0)
}
33
%
{
    -moz-transform-origin: 20% 80%
;
    -moz-transform: rotate(-6deg)
}
100
%
{
    -moz-transform-origin: 20% 80%
;
    -moz-transform: rotate(0)
}
}
@-webkit-keyframes ani3-02 {

0
{
    -moz-transform-origin: 20% 80%
;
    -webkit-transform: rotate(0)
}
33
%
{
    -moz-transform-origin: 20% 80%
;
    -webkit-transform: rotate(-6deg)
}
100
%
{
    -moz-transform-origin: 20% 80%
;
    -webkit-transform: rotate(0)
}
}
@keyframes ani3-02 {

0
{
    transform-origin: 20% 80%
;
    transform: rotate(0)
}
33
%
{
    transform-origin: 20% 80%
;
    transform: rotate(-6deg)
}
100
%
{
    transform-origin: 20% 80%
;
    transform: rotate(0)
}
}
.ani03 .ani03-02 {
    top: -9px;
    right: 19px
}

.ani03:hover .ani03-02 {
    -moz-animation-name: ani3-02;
    -moz-animation-duration: .6s;
    -moz-animation-iteration-count: 2;
    -webkit-animation-name: ani3-02;
    -webkit-animation-duration: .6s;
    -webkit-animation-iteration-count: 2;
    animation-name: ani3-02;
    animation-duration: .6s;
    animation-iteration-count: 2
}

.ani04 .ani04-01 {
    bottom: 21px;
    left: -18px
}

@-moz-keyframes ani4-02 {

0
{
    top: -20px
;
    right: 18px
}
100
%
{
    top: -21px
;
    right: 13px
}
}
@-webkit-keyframes ani4-02 {

0
{
    top: -20px
;
    right: 18px
}
100
%
{
    top: -21px
;
    right: 13px
}
}
@keyframes ani4-02 {

0
{
    top: -20px
;
    right: 18px
}
100
%
{
    top: -21px
;
    right: 13px
}
}
.ani04 .ani04-02 {
    top: -21px;
    right: 13px
}

.ani04:hover .ani04-02 {
    -moz-animation-name: ani4-02;
    -moz-animation-duration: .6s;
    -moz-animation-iteration-count: 2;
    -webkit-animation-name: ani4-02;
    -webkit-animation-duration: .6s;
    -webkit-animation-iteration-count: 2;
    animation-name: ani4-02;
    animation-duration: .6s;
    animation-iteration-count: 2
}

.cloud-step .exposition {
    padding: 20px 0 150px;
    text-align: center
}

.cloud-step .exposition dt {
    font-weight: bold;
    font-size: 24px
}

.cloud-step .exposition dd {
    padding-top: 6px;
    font-size: 14px
}

.cloud-contrast {
    position: relative;
    padding: 80px 0 110px;
    background: #f9c81c url(/proc/Apply/Public/Images/cloud-background-contrast.png?hash=2f546a64) no-repeat center bottom
}

.cloud-contrast .text-vs {
    position: absolute;
    top: -113px;
    left: 50%;
    margin-left: -101px
}

.cloud-contrast .cloud-banner dt {
    color: #8c5704
}

.cloud-contrast .cloud-banner dd {
    color: #b6840d
}

.cloud-contrastName {
    position: relative;
    padding-bottom: 45px;
    font-weight: bold;
    font-size: 30px;
    color: #8c5704;
    text-align: center
}

.cloud-contrastName i {
    position: absolute;
    bottom: 14px;
    left: 50%;
    display: block;
    width: 41px;
    padding-top: 27px;
    margin-left: -20px;
    background: url(/proc/Apply/Public/Images/cloud-ico-arrow-down.png?hash=93b7eb5e) no-repeat 0 0
}

.contrastLeft, .contrastRight {
    min-height: 160px;
    margin-bottom: 20px
}

.contrastLeft {
    padding: 20px 40px 20px 0;
    background-color: #fff;
    text-align: right;
    -webkit-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px
}

.contrastRight {
    padding: 20px 0 20px 40px;
    background-color: #48b518;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0
}

.contrastLeft i, .contrastRight i {
    display: block;
    width: 120px;
    min-height: 120px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

.contrastLeft i {
    float: right;
    background-color: #999
}

.contrastRight i {
    float: left;
    background-color: #f9c81c
}

.contrastLeft dl {
    float: right;
    padding-right: 50px;
    color: #999
}

.contrastRight dl {
    float: left;
    padding-left: 50px;
    color: #fff
}

.contrastLeft dl dt, .contrastRight dl dt {
    display: inline-block;
    font-size: 26px
}

.contrastLeft dl dt {
    border-bottom: 1px solid #d5d5d5
}

.contrastRight dl dt {
    border-bottom: 1px solid #fff
}

.contrastLeft dl dd, .contrastRight dl dd {
    padding-top: 8px;
    line-height: 1.7
}

.leftLast {
    background-color: #999
}

.leftLast dl {
    color: #fff
}

.leftLast i {
    background-color: #fff
}

.rightLast {
    background-color: #ed6921
}

.rightLast i {
    background-color: #fff
}

.ico-left-01, .ico-left-02, .ico-left-03, .ico-left-04, .ico-left-05, .ico-left-06, .ico-left-07, .ico-left-08, .ico-right-01, .ico-right-02, .ico-right-03, .ico-right-04, .ico-right-05, .ico-right-06, .ico-right-07, .ico-right-08 {
    background: url(/proc/Apply/Public/Images/cloud-background-icons.png?hash=d2d625b0) no-repeat
}

.ico-left-01 {
    background-position: 0 0
}

.ico-left-02 {
    background-position: 0 -140px
}

.ico-left-03 {
    background-position: 0 -280px
}

.ico-left-04 {
    background-position: 0 -420px
}

.ico-left-05 {
    background-position: 0 -560px
}

.ico-left-06 {
    background-position: 0 0
}

.ico-left-07 {
    background-position: 0 0
}

.ico-left-08 {
    background-position: 0 -980px
}

.ico-right-01 {
    background-position: -140px 0
}

.ico-right-02 {
    background-position: -140px -140px
}

.ico-right-03 {
    background-position: -140px -280px
}

.ico-right-04 {
    background-position: -140px -420px
}

.ico-right-05 {
    background-position: -140px -560px
}

.ico-right-06 {
    background-position: -140px -700px
}

.ico-right-07 {
    background-position: -140px -840px
}

.ico-right-08 {
    background-position: -140px -980px
}

.cloud-cooperation {
    padding: 25px 0 100px;
    border-bottom: 1px solid #d5d5d5
}

.cloud-cooperation p {
    position: relative;
    width: 470px;
    padding: 0 0 47px 155px;
    color: #818181;
    line-height: 2
}

.cloud-cooperation p span {
    display: block;
    margin-bottom: 5px;
    border-bottom: 1px solid #d5d5d5;
    font-size: 20px;
    color: #000
}

.cloud-cooperation p i {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 140px;
    padding-top: 100px;
    background: #f5f6f8 url(/proc/Apply/Public/Images/cloud-cooperation-logos.png?hash=a115defa) no-repeat;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.cloud-cooperation p .coopLogo01 {
    background-position: 0 0
}

.cloud-cooperation p .coopLogo02 {
    background-position: -160px 0
}

.cloud-cooperation p .coopLogo03 {
    background-position: 0 -120px
}

.cloud-cooperation p .coopLogo04 {
    background-position: -160px -120px
}

.cloud-cooperation p .coopLogo05 {
    background-position: 0 -240px
}

.cloud-cooperation p .coopLogo06 {
    background-position: -160px -240px
}

.cloud-cooperation p .coopLogo07 {
    background-position: 0 -360px
}

.cloud-cooperation p .coopLogo08 {
    background-position: -160px -360px
}

.cloud-statistics {
    padding: 25px 0 105px
}

.cloud-statistics .cloud-number {
    text-align: center
}

.cloud-statistics .cloud-number span {
    display: inline-block;
    width: 92px;
    min-height: 112px
}

.cloud-statistics .cloud-number span {
    background: url(/proc/Apply/Public/Images/cloud-number.png?hash=09d2cfd2) no-repeat
}

.cloud-statistics .cloud-number .num0 {
    background-position: 0 0
}

.cloud-statistics .cloud-number .num1 {
    background-position: -92px 0
}

.cloud-statistics .cloud-number .num2 {
    background-position: -184px 0
}

.cloud-statistics .cloud-number .num3 {
    background-position: -276px 0
}

.cloud-statistics .cloud-number .num4 {
    background-position: -368px 0
}

.cloud-statistics .cloud-number .num5 {
    background-position: -460px 0
}

.cloud-statistics .cloud-number .num6 {
    background-position: -552px 0
}

.cloud-statistics .cloud-number .num7 {
    background-position: -644px 0
}

.cloud-statistics .cloud-number .num8 {
    background-position: -736px 0
}

.cloud-statistics .cloud-number .num9 {
    background-position: -828px 0
}

.cloud-statistics .cloud-number .num0.last {
    background-position: 0 -122px
}

.cloud-statistics .cloud-number .num1.last {
    background-position: -92px -122px
}

.cloud-statistics .cloud-number .num2.last {
    background-position: -184px -122px
}

.cloud-statistics .cloud-number .num3.last {
    background-position: -276px -122px
}

.cloud-statistics .cloud-number .num4.last {
    background-position: -368px -122px
}

.cloud-statistics .cloud-number .num5.last {
    background-position: -460px -122px
}

.cloud-statistics .cloud-number .num6.last {
    background-position: -552px -122px
}

.cloud-statistics .cloud-number .num7.last {
    background-position: -644px -122px
}

.cloud-statistics .cloud-number .num8.last {
    background-position: -736px -122px
}

.cloud-statistics .cloud-number .num9.last {
    background-position: -828px -122px
}

.cloud-statistics p {
    padding-top: 50px;
    text-align: center
}

.cloud-statistics p a {
    display: inline-block;
    padding: 24px 78px;
    background-color: #01a4e5;
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 24px;
    color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.cloud-statistics p a:hover {
    background-color: #01a4e5;
    text-decoration: none
}

#footer-float {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    padding: 16px 0;
    background-color: #fff;
    opacity: 0;
    -webkit-box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, .12);
    box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, .12);
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s
}

#footer-float > div {
    position: relative
}

#footer-float .f-logo {
    position: absolute;
    top: 10px;
    left: 0
}

#footer-float .cloud-number-s {
    margin: 0 auto;
    padding: 3px 0 0 305px;
    text-align: center
}

#footer-float .cloud-number-s div, #footer-float .cloud-number-s span, #footer-float .cloud-number-s strong {
    display: block;
    float: left;
    min-height: 56px;
    padding-left: 20px;
    font-weight: 300;
    font-size: 24px;
    line-height: 57px
}

#footer-float .cloud-number-s span {
    width: 46px;
    background: url(/proc/Apply/Public/Images/cloud-number-s.png?hash=23477d7a) no-repeat
}

#footer-float .cloud-number-s .nums0 {
    background-position: 0 0
}

#footer-float .cloud-number-s .nums1 {
    background-position: -46px 0
}

#footer-float .cloud-number-s .nums2 {
    background-position: -92px 0
}

#footer-float .cloud-number-s .nums3 {
    background-position: -138px 0
}

#footer-float .cloud-number-s .nums4 {
    background-position: -184px 0
}

#footer-float .cloud-number-s .nums5 {
    background-position: -230px 0
}

#footer-float .cloud-number-s .nums6 {
    background-position: -276px 0
}

#footer-float .cloud-number-s .nums7 {
    background-position: -322px 0
}

#footer-float .cloud-number-s .nums8 {
    background-position: -368px 0
}

#footer-float .cloud-number-s .nums9 {
    background-position: -414px 0
}

#footer-float .cloud-number-s .nums0.last {
    background-position: 0 -61px
}

#footer-float .cloud-number-s .nums1.last {
    background-position: -46px -61px
}

#footer-float .cloud-number-s .nums2.last {
    background-position: -92px -61px
}

#footer-float .cloud-number-s .nums3.last {
    background-position: -138px -61px
}

#footer-float .cloud-number-s .nums4.last {
    background-position: -184px -61px
}

#footer-float .cloud-number-s .nums5.last {
    background-position: -230px -61px
}

#footer-float .cloud-number-s .nums6.last {
    background-position: -276px -61px
}

#footer-float .cloud-number-s .nums7.last {
    background-position: -322px -61px
}

#footer-float .cloud-number-s .nums8.last {
    background-position: -368px -61px
}

#footer-float .cloud-number-s .nums9.last {
    background-position: -414px -61px
}

#footer-float p {
    position: absolute;
    top: 0;
    right: 0
}

#footer-float p a {
    display: block;
    padding: 16px 30px;
    background-color: #01a4e5;
    border: 1px solid rgba(255, 255, 255, .3);
    text-align: center;
    font-size: 18px;
    color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

#footer-float p a:hover {
    background-color: #01a4e5;
    text-decoration: none
}

#footer-float.in {
    bottom: 0;
    opacity: 1
}

.app-qr {
    position: fixed;
    top: 50%;
    right: -180px;
    margin-top: -115px;
    padding: 24px 25px 22px;
    background-color: rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    opacity: 0;
    z-index: 9;
}

.app-qr dl {
    padding-top: 18px;
    text-align: center;
    color: #5f5f5f
}

.app-qr dl dt {
    padding-bottom: 3px;
    font-weight: bold;
    font-size: 16px;
    color: #01a4e5
}

.app-qr dl dt img {
    max-width: 120px
}

.app-qr.in {
    right: 40px;
    opacity: 1
}