.banner-bg {
    background: url("img/banner.png") no-repeat center;
    background-size: cover;
    height: 100%
}

.banner-t {
    margin-top: 169px;
    text-align: center;
    font-size: 48px;
    color: #FFF
}

.banner-subt {
    margin-top: 14px;
    line-height: 36px
}

.banner-subt,.banner-btn {
    font-size: 24px;
    text-align: center;
    color: #FFF
}

.banner-btn {
    display: block;
    width: 180px;
    height: 50px;
    line-height: 50px;
    background: #2689ff;
    border-radius: 5px;
    margin: 64px auto 0
}

.banner-btn:hover {
    background-color: #2755e1
}

.popup-video-wrap {
    overflow: hidden;
    height: 862px;
    background: url("img/re-bg.png") no-repeat center
}

.popup-video-mid {
    overflow: hidden;
    height: 100%;
    background: url("img/video_bg.png") no-repeat center
}

.popup-video-box {
    margin: 122px auto 0;
    width: 822px;
    height: 514px;
    border-radius: 10px;
    overflow: hidden
}

.f2-wrap {
    background-image: linear-gradient(-180deg,#f9f9fb 0%,#f1f1f5 100%)
}

.f2-title {
    font-weight: 700;
    font-size: 30px;
    color: #595961;
    letter-spacing: 0;
    text-align: center;
    line-height: 30px;
    margin-top: 40px
}

.f2-items {
    width: 1225px;
    overflow: hidden;
    margin-left: 34px
}

.f2-item {
    position: relative;
    float: left;
    width: 270px;
    height: 354px;
    border-radius: 8px;
    background: url("img/2L_img.png?20200306") no-repeat center;
    margin: 56px 25px 80px 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.f2-item:hover {
    margin-top: 50px
}

.f2-item-0 {
    background-position: 0 0
}

.f2-item-1 {
    background-position: 0 -364px
}

.f2-item-2 {
    background-position: 0 -728px
}

.f2-item-3 {
    background-position: 0 -1092px
}

.f2-item-hide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 20px 40px 0 rgba(0,0,0,.05)
}

.f2-item:hover .f2-item-hide {
    opacity: 1;
    filter: alpha(opacity=100)
}

.f2-hide-qa {
    width: 180px;
    height: 180px;
    background: url("img/2L_code.png?20200306") no-repeat center;
    margin: 68px auto 42px
}

.f2-hide-qa0 {
    background-position: 0 0
}

.f2-hide-qa1 {
    background-position: 0 -190px
}

.f2-hide-qa2 {
    background-position: 0 -380px
}

.f2-hide-qa3 {
    background-position: 0 -570px
}

.f2-hide-t {
    font-weight: 700;
    font-size: 22px;
    color: #595961;
    letter-spacing: 0;
    text-align: center
}

.f3 {
    height: 600px
}

.f4 {
    height: 640px
}

.f9 {
    height: 804px
}

.g-boxtop {
    width: 1240px;
    height: 100%;
    margin: 0 auto
}

.f3-ul>li {
    width: 280px;
    height: 360px;
    background-image: url("img/2L_img01.png");
    background-size: cover;
    position: relative;
    margin-bottom: 50px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.09);
    border-radius: 10px
}

.f3-ul>li.fl1 {
    background-position: 0 0
}

.f3-ul>li.fl2 {
    background-position: 0 -370px
}

.f3-ul>li.fl3 {
    background-position: 0 -740px
}

.f3-ul>li.fl4 {
    background-position: 0 -1110px
}

.f3-bottom {
    height: 90px;
    width: 280px;
    position: absolute;
    bottom: 0
}

.f3-xian {
    width: 20px;
    height: 2px;
    background: #278dfc;
    display: block;
    margin: 4px auto
}

.f3-1 {
    height: 800px;
    background-image: url("img/3L_bg.png");
    background-size: auto
}

.f3-1-ul>li {
    width: 240px;
    height: 50px;
    position: relative
}

.f3-1-img {
    width: 80px;
    height: 80px;
    background-image: url("img/3L-icon-1.png");
    background-size: cover;
    margin: 0 80px
}

.f3-1-pos1 {
    background-position: 0 0
}

.f3-1-pos2 {
    background-position: 0 -90px
}

.f3-1-pos3 {
    background-position: 0 -180px
}

.f3-1-pos4 {
    background-position: 0 -270px
}

.f3-1-pos5 {
    background-position: 0 -360px
}

.g-box1 {
    width: 1200px;
    margin: 0 auto
}

.xian {
    width: 4px;
    height: 100%;
    opacity: .21;
    filter: alpha(opacity=21);
    background: #d8d8d8
}

.f3-swiper {
    height: 682px;
    color: #c8ccd3
}

.f3-con {
    width: 1200px;
    margin: 40px auto;
    height: 590px;
    display: none
}

.f3-con.active {
    display: block
}

.con-ul {
    width: 202px;
    height: 504px;
    border-right: 4px solid #39445a
}

.name-content-title {
    position: absolute;
    top: 2px;
    font-size: 22px
}

.con-ul>li {
    padding: 12px 0;
    width: 200px;
    cursor: pointer;
    margin-top: 14px
}

.con-ul>li.active {
    border-right: 8px solid #278dfc;
    color: #278dfc;
    background-image: linear-gradient(-90deg,#000 0%,rgba(0,0,0,0)100%)
}

.con-ul-p {
    margin-right: 30px
}

.f3-1-ul>li span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10px;
    width: 80px;
    height: 3px;
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.f3-1-ul>li.active .f3-1-img {
    background-image: url("img/3L-icon.png");
    transition: background .2s ease-in-out
}

.f3-1-ul>li.active .f3-1-p {
    color: #fff
}

.f3-1-ul>li.active span {
    opacity: 1;
    filter: alpha(opacity=100)
}

.f3-1-p {
    font-size: 22px;
    line-height: 30px;
    color: #a2a8b4
}

.img-bottom {
    width: 950px;
    height: 420px
}

.name-content {
    display: none
}

.name-content.active {
    display: block
}

.f4-wrap {
    height: 600px;
    background: #f9f9fb
}

.f4-left {
    float: left;
    margin-left: 30px;
    overflow: hidden
}

.f4-left-t,.f5-right-t {
    margin-top: 210px;
    font-weight: 700;
    font-size: 30px;
    color: #595961;
    letter-spacing: 0;
    text-align: center;
    line-height: 30px
}

.f4-left-sub,.f5-right-sub {
    font-size: 18px;
    color: #595961;
    letter-spacing: 0;
    line-height: 28px;
    margin-top: 20px
}

.f4-btn {
    display: block;
    width: 140px;
    height: 40px;
    font-size: 16px;
    color: #FFF;
    line-height: 40px;
    letter-spacing: 0;
    text-align: center;
    background: #2589ff;
    border-radius: 4px;
    margin-top: 60px
}

.f4-btn:hover {
    background-color: #2755e1
}

.f4-img {
    width: 700px;
    height: 560px;
    margin-top: 20px;
    float: right
}

.f5-wrap {
    height: 600px;
    background-color: #fff
}

.f5-img {
    margin-top: 20px;
    float: left;
    width: 700px;
    height: 560px;
    display: block
}

.f5-right {
    float: left;
    margin-left: 50px
}

.f6-wrap {
    height: 664px;
    background-color: #f9f9fb
}

.f6-right {
    overflow: hidden;
    float: left;
    margin-left: 30px
}

.f6-right-t {
    margin-top: 124px;
    font-weight: 700;
    font-size: 30px;
    line-height: 30px
}

.f6-right-t,.f6-right-sub {
    color: #595961;
    letter-spacing: 0
}

.f6-right-sub {
    margin-top: 20px;
    font-size: 18px;
    line-height: 28px
}

.f6-tab {
    overflow: hidden;
    width: 320px;
    margin-top: 30px;
    border: 1px solid #dfe1e6;
    border-radius: 10px
}

.f6-tab-b {
    border-top: 1px solid #dfe1e6;
    border-bottom: 1px solid #dfe1e6
}

.f6-tab>li.active {
    background: #dfe1e6;
    color: #595961
}

.f6-tab>li {
    height: 70px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
    color: #9a9aa9;
    background-color: #fff;
    letter-spacing: 2px
}

.f6-imgs {
    width: 700px;
    height: 560px;
    margin-top: 52px;
    float: right
}

.f6-imgs>img {
    width: 100%;
    height: 100%;
    display: none
}

.f6-imgs .active {
    display: block
}

.f7-wrap {
    height: 664px
}

.f7-left {
    width: 700px;
    height: 560px;
    margin-top: 54px;
    float: left
}

.f7-left>img {
    width: 100%;
    height: 100%;
    display: none
}

.f7-left>img.active {
    display: block
}

.f7-right {
    overflow: hidden;
    float: left;
    margin-left: 50px
}

.footer-wrap {
    height: 140px;
    background: #292d3b
}

.footer-txt {
    font-size: 30px;
    margin-left: 290px
}

.footer-txt,.footer-btn {
    float: left;
    margin-top: 50px;
    color: #FFF;
    letter-spacing: 0;
    text-align: center
}

.footer-btn {
    display: block;
    width: 160px;
    height: 40px;
    margin-left: 54px;
    font-size: 18px;
    line-height: 40px;
    border: 1px solid #FFF;
    border-radius: 2px
}

.footer-btn:hover {
    background: #fff;
    color: #292d3b
}

.footer-time {
    font-size: 30px;
    color: #f5a623;
    letter-spacing: 0;
    text-align: center;
    line-height: 42px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (-moz-min-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) {
    .f2-item {
        background-image: url("img/2L_img@2x.png?20200306")
    }

    .f2-item,.f2-hide-qa {
        background-size: 100% auto
    }

    .f2-hide-qa {
        background-image: url("img/2L_code@2x.png?20200306")
    }

    .popup-video-mid {
        background-image: url("img/video_bg@2x.png");
        background-size: auto 100%
    }
}