.bg-f4fa { background-color: #f4fafb; }
.banner { height: 720px; padding-top: 80px; overflow: hidden; position: relative; background: url(../image/top.png) no-repeat center center; }
.banner .img_tree { position: absolute; left: 50%; top: 20%; width: 618px; height: 464px; animation: downshow .65s linear forwards; }
.banner .txt { position: absolute; left: 50%; top: 32%; z-index: 10; width: 530px; margin-left: -512px; animation: upshow .65s linear forwards; }
.banner .txt h2 { font-size: 40px; color: #fff; line-height: 60px; }
.banner .txt p { font-size: 20px; color: #fff; line-height: 28px; margin: 18px 0 5px; }
.banner .txt .tips { width: 330px; height: 38px; border-radius: 4px; background: linear-gradient(90deg,rgba(0,220,238,1) 0%,rgba(0,77,234,1) 100%); font-size: 16px; line-height: 38px; text-align: center; }
.banner .txt .btn { float: left; width: 140px; height: 46px; background-color: #fff; border-radius: 4px; color: #0781e3; line-height: 46px; text-align: center; transition: all .25s linear; margin-top: 55px; }
.banner .txt .btn i { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); border-top: 1px solid #0781e3; border-right: 1px solid #0781e3; vertical-align: middle; margin: -2px 0 0 3px; }
.banner .txt .btn:hover { opacity: .9; }

/* box-bar */
.box-bar { padding: 105px 0 70px; text-align: center; }
.box-bar h3 { font-size: 30px; color: #333; line-height: 50px; }
.box-bar p { font-size: 20px; line-height: 28px; margin-top: 15px; }
.box-bar ul { margin-top: 80px; }
.box-bar li { float: left; width: 25%; text-align: center; }
.box-bar li img { display: block; width: 180px; height: 180px; margin: 0px auto; border-radius: 50%; }
.box-bar li span {display:block; line-height:200%; margin-top:20px;}


/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .banner { height: 100vh; }
    .banner .img_tree { width: 310px; height: 232px; top: 16%; margin-left: -155px; animation: downshow2 .65s linear forwards; }
    .banner .txt { left: 20px; top: 40%; right: 20px; width: auto; margin-left: 0; text-shadow: 0 0 10px rgba(0,77,234, 1); }
    .banner .txt h2 { font-size: 20px; line-height: 50px; }
    .banner .txt p { font-size: 12px; }
    .banner .txt .tips { width: 100%; font-size: 14px; }
    .banner .txt .btn { width: 90px; height: 36px; font-size: 14px; line-height: 36px; text-shadow: none; margin-top: 30px; }

    .box-bar { padding: 50px 20px 35px; }
    .box-bar h3 { font-size: 24px; line-height: 30px; }
    .box-bar p { font-size: 16px; }
    .box-bar ul { margin-top: 20px; }
    .box-bar li { width: 50%; padding: 20px 0; }
    .box-bar li img { width: 100px; height: 100px; margin: 0px auto; }
}

@keyframes downshow2 {
    0% { opacity: 0; transform: translateY(-20%); }
    5% { opacity: 0; transform: translateY(-10%); }
    100% { opacity: .2; transform: translateY(0%); }
}