.banner{ height: 750px; background: url("../images/bg1.jpg") no-repeat center top; text-align: center;}
.banner h1{ margin: 30px 0 10px 0; font-size: 40px; color: #009c4d;}
.banner h1 span{ color: #111;}
.banner p{ font-size: 16px; color: #666;}
.banner a{ display: block; width: 240px; height: 50px; line-height: 50px; margin: 15px auto 40px auto; background: url("../images/btn1.png") no-repeat; font-size: 20px; color: white;}
.banner a:hover{ background-position-y: 100%;}
.banner .items{ height: 85px;}
.banner .items li{ display: inline-block; width: 94px; margin: 0 63px; font-size: 14px; color: #009550; text-align: center; cursor: pointer; *display: inline; *zoom: 1; -webkit-animation: upsidedown 3s linear infinite; -moz-animation: upsidedown 3s linear infinite; animation: upsidedown 3s linear infinite;}
.banner .items li:nth-child(2){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; animation-delay: .2s;}
.banner .items li:nth-child(3){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; animation-delay: .4s;}
.banner .items li:nth-child(4){ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; animation-delay: .6s;}
.banner .items li:nth-child(5){ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; animation-delay: .8s;}
.banner .items li img{ display: block; margin-bottom: -30px;}
.banner .items li:hover{ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused;}
.banner .items-show{ width: 534px; height: 356px; padding: 16px 77px 44px 77px; margin: 20px auto 0 auto; background: url("../images/computer.png") no-repeat;}
.banner .items-show div{ width: 534px; height: 356px; border-radius: 6px 6px 0 0; overflow: hidden;}
.banner .items-show ul{ width: 9999%;}
.banner .items-show li{ float: left; width: 534px; height: 356px;}
.banner .items-show li img{ display: block; width: 100%; height: 100%;}


.desc .tlt{ margin: 50px 0 -50px 0; text-align: center;}
.desc h3{ position: relative; font-size: 30px; color: #111;}
.desc p{ line-height: 24px; margin-top: 10px; font-size: 16px; color: #666;}
.desc > div{ position: relative;}
.desc img.fl{ margin-left: 120px;}
.desc img.fr{ margin-right: 120px;}
.desc div.fl{ margin-left: 120px;}
.desc .part-1{ height: 720px;}
.desc .part-1 .fr{ position: absolute; top: 300px; right: 0;}
.desc .part-2{ margin-top: -120px;}
.desc .part-2 .fl{ margin-top: 150px;}
.desc .part-3{ margin-top: -75px;}
.desc .part-3 .fr{ position: absolute; top: 300px; right: 0;}
.desc .part-4{ margin-top: -65px;}
.desc .part-4 .fl{ margin-top: -200px;}
.desc .part-4 .fr{ margin-right: 55px;}


.download{ height: 440px; margin-top: 85px; background: url("../images/bg2.jpg") no-repeat center top;}
.download ul{ margin-top: 50px;}
.download li{ display: inline-block; width: 33%; text-align: center; vertical-align: top; *display: inline; *zoom: 1;}
.download li img{ display: block; margin: 0 auto;}
.download li span{ display: block; margin: 0 0 15px 0; font-size: 24px; color: #111;}
.download li p{ line-height: 18px; color: #666;}
.download a{ display: block; width: 330px; height: 92px; line-height: 92px; margin: 20px auto 0 auto; background: url("../images/btn2.png") no-repeat; font-size: 24px; color: white; text-align: center;}
.download a:hover{ background-position-y: 100%;}



@-webkit-keyframes upsidedown {
    from, 50%, to{ -webkit-transform: translateY(0);}
    25%{ -webkit-transform: translateY(-8px);}
    75%{ -webkit-transform: translateY(8px);}
}


@-moz-keyframes upsidedown {
    from, 50%, to{ -moz-transform: translateY(0);}
    25%{ -moz-transform: translateY(-8px);}
    75%{ -moz-transform: translateY(8px);}
}


@keyframes upsidedown {
    from, 50%, to{ transform: translateY(0);}
    25%{ transform: translateY(-8px);}
    75%{ transform: translateY(8px);}
}


/* 添加使用教程按钮 */
.banner h1 a{ display: inline-block; width: 78px; height: 26px; line-height: 26px; margin: 0 5px; border: 1px solid #009550; border-radius: 3px; background: transparent; font-size: 14px; font-weight: normal; color: #009550; vertical-align: middle;}
.banner h1 a:hover{ background: #009550; color: white;}

/* 增加官方QQ、返回顶部操作按钮 */
.btn-bkt{ position: fixed; width: 70px; height: 70px; right: 0; top: 45%; background: url("../images/new_bkt.png") no-repeat; display: none;}
.btn-bkt:hover{ background-position-x: 100%;}
.btn-qq{ position: fixed; width: 70px; height: 70px; right: 0; top: 53%; background: url("../images/new_qq.png") no-repeat;}
.btn-qq:hover{ background-position-x: 100%;}