/* CSS Document */
body{font:12px/1.5 "\5b8b\4f53",arial,Helvetica,Tahoma,sans-serif; margin:0 auto; color:#333;}
p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe{margin:0; padding:0;}
img{border:0 none;}
ul,li,ol{list-style-type:none;}
i,em,address, caption, cite, code, dfn, th, var {font-style: normal;font-weight: normal}
.msf{font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:none;}
a,a:hover{outline:none;blur:expression(this.onFocus=this.blur());}
.layout{ clear:both;width:1000px;text-align:left;margin:0 auto;}
.clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
.clearfix{*zoom:1;}
.fl{ float:left;_display: inline}
.fr{ float:right;_display: inline}
.pr{ position:relative}
.abs{position:absolute;}

body{background:#fff;font-family: 'Microsoft yahei'}
.dLangBtn{top:10px;right:10px}
.dLangBtnTopPc{top:15px;right:15px;}
.dLangBtnTopPc a{display:none;height:30px;line-height:30px;background:#57a9f6;color:#fff;padding:0 12px;border-radius:5px}
.dLangBtnTopPc a:hover{opacity:0.8}
.dbody{top:0;left:0;width:100%;height:100%;overflow:hidden}
.dwrap{width:100%;height:100%;}
.dline{border-top:1px solid #65b9f8;width:100%;height:0;top:60%;left:0}
.dcityInverted{height:16%;width:100%;top:60%;left:0;overflow:hidden}
.dcityInverted p{height:100%;width:100%}
.dcityInverted p em{display:block;height:100%;width:100%;background:url(../images/cityInverted.png) repeat-x top left;background-size:auto 100%}
.dcity{height:16%;width:100%;bottom:40%;left:0;overflow:hidden}
.dcity p{height:100%;width:100%}
.dcity p em{display:block;height:100%;width:100%;background:url(../images/city.png) repeat-x top left;background-size:auto 100%}
.dpanel{width:1000px;margin:0 auto;height:522px;top:50%;margin-top:-261px}
.dplane{width:170px;top:-20px;right:80px;
    -webkit-animation : fly 1s 1 2s both;
    -moz-animation : fly 1s 1 2s both;
    -o-animation : fly 1s 1 2s both;
    animation:fly 1s 1 2s both;    
}
.dcon{height:100%}
.dcon .dconp{display:none;}
.dcon .on{display:block}
.ddesc{width:500px;margin:120px 0 0 70px}
.ddesc h1{font-size:28px;font-weight:normal;color:#3f403f;}
.ddesc h2{font-size:16px;font-weight:normal;color:#3f403f;margin:0 0 22px 0}
.dphone{width:260px;margin:0px 0 0 120px}
.downloadBtns a{display:block;width:95px;padding-left:55px;height:34px;border:1px solid red;border-radius:8px;line-height:34px;font-size:14px;box-shadow:0px 0px 3px #57a9f6}
.downloadBtns a.ao{border:1px solid #57a9f6;color:#fff;background:#57a9f6 url(../images/android.png) no-repeat 17px center}
.downloadBtns a.at{border:1px solid #57a9f6;margin:12px 0 0 0;color:#57a9f6;background:#fff url(../images/iphone.png) no-repeat 20px center}
.downloadCode{width:82px;height:82px;border:1px solid #e8f6fe;background:#fff;margin:0 0 0 24px;box-shadow:0px 0px 3px #57a9f6;
    -webkit-transition:.3s ease all;
    -moz-transition:.3s ease all;
    -o-transition:.3s ease all;
    transition:.3s ease all;
}
.downloadCode:hover{
    width:202px;height:202px;
}
.downloadCode img,.downloadCode canvas{width:96%;height:96%;margin:2%;}
.dtab{height:34px;top:30px;left:450px;border-radius:18px;border:1px solid #57a9f6}
.dtab a{display:block;width:130px;height:34px;border-radius:18px;line-height:34px;text-align:center;color:#57a9f6;font-size:16px;cursor: default;}
.dtab a.on{background:#57a9f6;color:#fff;
    -webkit-animation : bounceIn 1s 1 0s both;
    -moz-animation : bounceIn 1s 1 0s both;
    -o-animation : bounceIn 1s 1 0s both;
    animation : bounceIn 1s 1 0s both;
}

.animated-delay1000 {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
.animated-delay3000 {
    -webkit-animation-delay: 2.6s;
    -moz-animation-delay: 2.6s;
    -o-animation-delay: 2.6s;
    animation-delay: 2.6s;
}
@-webkit-keyframes fly{
    0%{-webkit-transform: scale(0,0);right:250px;top:30%}
    100% {-webkit-transform: scale(1,1);right:80px;top:-20px}
}
@-moz-keyframes fly{
    0%{-moz-transform: scale(0,0);right:250px;top:30%}
    100% {-moz-transform: scale(1,1);right:80px;top:-20px}
}
@-o-keyframes fly{
    0%{-o-transform: scale(0,0);right:250px;top:30%}
    100% {-o-transform: scale(1,1);right:80px;top:-20px}
}
@keyframes fly{
    0%{transform: scale(0,0);right:250px;top:30%}
    100% {transform: scale(1,1);right:80px;top:-20px}
}
/* 动画组 */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}
@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

.pplane,.ppanel{display: none;}

@media only screen and (max-width: 1024px) {
    .dLangBtnTopPc{display:none}
    .dtab{position:relative;top:0;left:0}
    .dtab .dLangBtnTop{top:0;right:0;width:110px;}
    .dtab .dLangBtnTop a{display:none;cursor:pointer;width:100%;overflow:hidden;height:34px;line-height:34px;background:none;color:#57a9f6;padding:0;border-radius:5px}
    .dtab .dLangBtnTop a:hover{opacity:0.8}

    .dcity {bottom:0;}
    .dline,.dpanel,.dLangBtn,.dcityInverted {display: none;}
    .ppanel .titleText{text-align: center;font-size: 18px;margin-top:10px;}
    .pplane{display:block;top:79%;width:100%;}
    .dplane{width:100px;top:-20px;right:80px;
        -webkit-animation : fly 1s 1 2s both;
        -moz-animation : fly 1s 1 2s both;
        -o-animation : fly 1s 1 2s both;
        animation:fly 1s 1 2s both;    
    }
    @-webkit-keyframes fly{
        0%{-webkit-transform: scale(0,0);right:250px;top:30%}
        100% {-webkit-transform: scale(1,1);right:50px;top:0px}
    }
    @-moz-keyframes fly{
        0%{-moz-transform: scale(0,0);right:250px;top:30%}
        100% {-moz-transform: scale(1,1);right:50px;top:0px}
    }
    @-o-keyframes fly{
        0%{-o-transform: scale(0,0);right:250px;top:30%}
        100% {-o-transform: scale(1,1);right:50px;top:0px}
    }
    @keyframes fly{
        0%{transform: scale(0,0);right:250px;top:30%}
        100% {transform: scale(1,1);right:50px;top:0px}
    }
    .ppanel{display: block;}
    .ppanel .clearfix{width: 160px;margin: 0 auto;}
    .downloadBtns a {width: 160px;height: 44px;font-size:20px;border-radius: 8px;line-height: 44px;padding-left:90px;}
    .downloadBtns a.ao{background: #57a9f6 url(../images/anzhuo.png) no-repeat 36px center;background-size:25px 25px;color:#fff;margin-left:-44px;}
    .downloadBtns a.at{background: #57a9f6 url(../images/ios.png) no-repeat 36px center;background-size:25px 25px;color:#fff;margin-left:-44px;}
    .dtab{width: 110px;margin: 20px auto 20px}
    .dtab a {width: 110px}
    .dphone{width:110px;margin:0}
    .ptitle{text-align: center;margin: 5px 0}
    .pSubTitle{text-align: center;}
    .picon{width:100%;margin:0 auto 30px;text-align: center;}
    
}

@media only screen and (max-width: 1024px) and (min-width: 768px){
    .ppanel{margin-top:15%}
}

@media only screen and (max-width: 320px){
    .dtab{width: 110px;margin: 10px auto 10px}
    .ptitle{text-align: center;margin:0}
    .picon{width:100%;margin:0 auto 10px;text-align: center;}
}