@charset "utf-8";
/* CSS Document */


::-webkit-input-placeholder { /* WebKit browsers */
    color:    #b3b3b3;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #b3b3b3;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #b3b3b3;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #b3b3b3;
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "微软雅黑";
}
a{
    text-decoration: none;
    color: inherit;
}

.form-box ul li{margin:10px 0px}
.form-box ul li a{color:#333}

.form-box ul li h3{line-height:36px}
.form-box ul li p{font-size:14px;color:#696969}

.clear{
    clear: both;
}
.com{
    width:1190px;
    margin:0 auto;
    position: relative;
}
.c-title{
    height:110px;
}
.c-title-a{
    font-size: 60px;
    letter-spacing: 2px;
    color: #7c7c7c;
    opacity: 0.1;
    font-weight: bold;
    font-family: Impact;
    line-height: 60px;
    text-align: center;
}
.c-title-b{
    font-size: 40px;
    letter-spacing: 1px;
    color: #1e1e1e;
    line-height: 40px;
    text-align: center;
    position: relative;
    top:-30px;
}
.c-title-c{
    color: #999999;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    position: relative;
    top:-13px;
    letter-spacing: 2px;
}
.banner{
    width:100%;
    height:659px;
    background: url("../images/abanner.jpg")center center no-repeat;
}
.banner > .com > a{
    display: block;
    width: 400px;
    height: 48px;
    background: url("../images/a1.png")center center no-repeat;
    float: left;
    margin-top: 18px;
}
.banner > .com > ul{
    height:18px;
    float: right;
    margin-top: 31px;
}
.banner > .com > ul > a:not(:last-of-type) li{
    margin-right: 38px;
}
.banner > .com > ul > a:nth-of-type(1) li:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../images/a2.png")center center no-repeat;
    position: relative;
    top:2px;
    margin-right: 13px;
}
.banner > .com > ul li{
    font-size: 16px;
    line-height: 18px;
    color: #ffffff;
    float: left;
}
.banner  ul a li:hover{
    color: #5074eb;
}
.banner .quan{
    width: 1050px;
    height: 150px;
    background-color: #ffffff;
    box-shadow: 0px 3px 7px 0px
    rgba(4, 0, 0, 0.35);
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top:609px;
    overflow: hidden;
    border-radius: 8px;
}
.banner .quan .t{
    width: 220px;
    height: 40px;
    background-image: linear-gradient(270deg,
    #2ba2fe 0%,
    #3656ff 100%),
    linear-gradient(
            #000000,
            #000000);

    border-radius: 0px 0px 18px 18px;
    margin:0 auto;
    font-size: 18px;
    letter-spacing: 3px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
}
.banner .quan ul{
    margin-top: 12px;
}
.banner .quan ul li{
    float: left;
    width: 510px;
    height: 80px;
    background-color: #6fa0ed;
    border-radius: 8px;
    position: relative;
}
.banner .quan ul li:nth-child(1){
    margin-left: 9px;
}
.banner .quan ul li:nth-child(2){
    margin-left: 14px;
}
.banner .quan ul li .x1{
    font-size: 14px;
    letter-spacing: 3px;
    color: #fff;
    line-height: 14px;
    margin:10px 0 0 13px;
}
.banner .quan ul li .x1 span{
    font-size: 12px;
    margin-left: 10px;
	color: #fff
}
.banner .quan ul li .x{
    color:red;
    line-height: 26px;
    margin:21px 0 0 15px;
}
.banner .quan ul li .x span:nth-of-type(1){
    font-size: 26px;
    color: #fff;
}
.banner .quan ul li .x span:nth-of-type(2){
    font-size: 16px;
    color: #fff;
    margin-left:4px; ;
}
.banner .quan ul li .x span:nth-of-type(3){
    font-size: 18px;
    color: #fff;
    margin-left: 7px;
}
.banner .quan ul li .lxkf{
    height:14px;
    color: #fff;
    line-height: 14px;
    position: absolute;
    right:10px;
    bottom:14px;
}
.banner .quan ul li .lxkf:after{
    content: '';
    display:inline-block ;
    width: 6px;
    height: 12px;
    background: url("../images/rrr.png")center center no-repeat;
    position: relative;
    top:1px;
    margin-left: 8px;
}
.banner .quan ul li:nth-of-type(1):after{
    content: '';
    display: block;
    width: 42px;
    height: 42px;

    position: absolute;
    right:10px;
    top:7px;
    transition: 3s;
}
.banner .quan ul li:nth-of-type(2):after{
    content: '';
    display: block;
    width: 38px;
    height: 39px;

    position: absolute;
    right:12px;
    top:7px;
    transition: 3s;
}


.banner .quan ul li:hover:after{
    transform:rotate(360deg) scale(0.8);
    transition: 3s;
}
.f1{
    height:713px;
    width:100%;
    background: url("../images/c1.jpg")center center no-repeat;
    padding-top: 163px;
    box-sizing: border-box;
}
.f1 ul{
    width:1167px;
    margin-top: 46px;

}
.f1 ul:after{
    content: '';
    display: block;
    clear: both;
}
.f1 ul  li{
    width: 191px;
    height: 260px;
    background-color: #ffffff;
    box-shadow: 0px 3px 7px 0px
    rgba(4, 0, 0, 0.35);
    border-radius: 8px;
    position: relative;
    float: left;
}
.f1 ul  li .bg{
    width: 191px;
    height: 260px;

    border-radius: 8px;
    position: absolute;
    left:7px;
    top:-7px;
    transition: .5s;
}
.f1 ul  li.on .bg{
    left:14px;
    top:-14px;
    transition: .5s;
}
.f1 ul  li .content{
    width: 191px;
    height: 260px;
    position: absolute;
    left:0;
    top:0;
    background-color: #fff;
    border-radius: 8px;
}
.f1 ul  li .content .icon{
    width: 64px;
    height: 64px;

    margin:25px auto 0 auto;
    transition: .5s;
}
.f1 ul  li.on .content .icon{
    border-radius: 50%;
    transition: .5s;
}
.f1 ul  li .content .name{
    font-size: 20px;
    color: #333333;
    line-height: 20px;
    text-align: center;
    margin-top: 14px;
}
.f1 ul  li .content .x-line{
    width: 51px;
    height: 1px;

    margin:14px auto 5px auto;
}

.f1 ul  li .content .keyword{
    font-size: 16px;
    color: #666666;
    text-align: center;
    line-height: 32px;
}
.f1 ul  li .content .ljbl{
    width: 99px;
    height: 29px;
    border-radius: 8px;
    display: block;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    margin:9px auto 0 auto;

}

.f1 ul li:nth-of-type(1) .content .ljbl{
    border:1px solid #21d9c8;
    color:#21d9c8;
}

.f1 ul li:nth-of-type(1) .content .ljbl:hover{
    background-color: #21d9c8;
}




.f1 ul li:nth-of-type(2) .content .ljbl{
    border:1px solid #ffa667;
    color:#ffa667;
}
.f1 ul li:nth-of-type(2) .content .ljbl:hover{
    background-color: #ffa667;
}



.f1 ul li:nth-of-type(3) .content .ljbl{
    border:1px solid #58acff;
    color:#58acff;
}
.f1 ul li:nth-of-type(3) .content .ljbl:hover{
    background-color: #58acff;
}


.f1 ul li:nth-of-type(4) .content .ljbl{
    border:1px solid #ff828b;
    color: #ff828b;
}
.f1 ul li:nth-of-type(4) .content .ljbl:hover{
    background-color: #21d9c8;
}

.f1 ul li:nth-of-type(5) .content .ljbl{
    border:1px solid  #d247db;
    color: #d247db;
}
.f1 ul li:nth-of-type(5) .content .ljbl:hover{
    background-color: #d247db;
}




.f1 ul  li:not(:last-child){
    margin-right: 53px;
}

.f1 ul  li:nth-of-type(1) .bg{
    background-image: linear-gradient(0deg,
    #1fd9c8 0%,
    #96f5d2 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.f1 ul  li:nth-of-type(2) .bg{
    background-image: linear-gradient(0deg,
    #ffa566 0%,
    #ffd984 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.f1 ul  li:nth-of-type(3) .bg{
    background-image: linear-gradient(0deg,
    #57abff 0%,
    #89e9ff 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.f1 ul  li:nth-of-type(4) .bg{
    background-image: linear-gradient(0deg,
    #ff808a 0%,
    #ffccb2 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.f1 ul  li:nth-of-type(5) .bg{
    background-image: linear-gradient(0deg,
    #d143da 0%,
    #ed96f5 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.f1 ul  li:nth-of-type(1) .content .icon{
    background: url("../images/c2.png")center  center no-repeat;
}
.f1 ul  li:nth-of-type(2) .content .icon{
    background: url("../images/c3.png")center  center no-repeat;
}
.f1 ul  li:nth-of-type(3) .content .icon{
    background: url("../images/c4.png")center  center no-repeat;
}
.f1 ul  li:nth-of-type(4) .content .icon{
    background: url("../images/c5.png")center  center no-repeat;
}
.f1 ul  li:nth-of-type(5) .content .icon{
    background: url("../images/c6.png")center  center no-repeat;
}
.f1 ul  li:nth-of-type(1) .content .x-line{
    background-color: #21d9c8;
}
.f1 ul  li:nth-of-type(2) .content .x-line{
    background-color: #ffa666;
}
.f1 ul  li:nth-of-type(3) .content .x-line{
    background-color: #58acff;
}
.f1 ul  li:nth-of-type(4) .content .x-line{
    background-color: #ff818b;
}
.f1 ul  li:nth-of-type(5) .content .x-line{
    background-color: #d247db;
}
.f1 ul li .content .ljbl:hover{
    color:#fff;
    border:0;
}
.f1  .lxkf{
    width: 190px;
    height: 45px;
    position: relative;
    margin:70px auto 0 auto;
}
.f1  .lxkf a{
    position: absolute;
    left:0;
    top:0;
    background-image: linear-gradient(0deg,
    #56aafd 0%,
    #89e9ff 100%),
    linear-gradient(
            #ffa666,
            #ffa666);
    width: 190px;
    height: 45px;
    border-radius: 23px;
    display: block;
    letter-spacing: 3px;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
}
.f1  .lxkf .ls{
    width:40px;
    height:16px;
    position: absolute;
    left: -58px;
    top: 15px;
}
.f1  .lxkf .ls:after{
    content: '';
    display:block;
    clear:both;
}
.f1  .lxkf .ls > div{
    width: 16px;
    height: 16px;
    background: url("../images/c8.png")center center no-repeat;
    position: absolute;
    top:0;
}
.f1  .lxkf .ls > div:nth-child(1){
    left:0;
}
.f1  .lxkf .ls > div:nth-child(2){
    left:14px;
}
.f1  .lxkf .ls > div:nth-child(3){
    left:28px;
}
.f1  .lxkf .ls > div.a{

    background: url("../images/c10.png")center center no-repeat;
}
.f1  .lxkf .ls > div.b{

    background: url("../images/c9.png")center center no-repeat;
}
.f1  .lxkf .ls > div.c{

    background: url("../images/c8.png")center center no-repeat;
}
.f1  .lxkf .ls.right{
    transform: rotateY(180deg);
    left: 208px;
    top: 15px;
}


.f2{
    width:100%;
    height:733px;
    background: url("../images/d26.jpg")center center no-repeat;
    padding-top: 50px;
    box-sizing: border-box;
    position: relative;
}
.f2 .the-content{
    width: 1190px;
    height: 440px;
    background-color: rgba(49,49,49,.5);
    border-radius: 8px;
    margin-top:39px;
}
.f2 .the-content .left-menus{
    width:185px;
    float: left;
    height:440px;
    background-color:rgba(49,49,49,.5);
}
.f2 .the-content .left-menus li {
    height:88px;
    width:185px;
    position: relative;
    padding-top: 25px;
    box-sizing: border-box;
}
.f2 .the-content .left-menus li.on{
    background-image: linear-gradient(90deg,
    #00a1ff 0%,
    #0b61ff 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
}
.f2 .the-content .left-menus li .t1{
    font-size: 18px;
    line-height: 18px;
    color: #ffffff;
    margin-left: 37px ;
}
.f2 .the-content .left-menus li .t2{
    color: #999999;
    font-size: 14px;
    line-height: 14px;
    margin:10px 0 0 36px;
}
.f2 .the-content .left-menus li.on .t2{
    color: #ffffff;
    opacity: 0.8;
}
.f2 .the-content .left-menus li.on:before{
    width: 8px;
    height: 16px;
    content: '';
    display: block;
    background:url("../images/d25.png")center center no-repeat;
    position: absolute;
    right:39px;
    top:23px;
}
.f2 .the-content .left-menus li:not(:last-child):after{
    content: '';
    display: block;
    position: absolute;
    width: 150px;
    height: 1px;
    background-color: #12171f;
    left:17px;
    bottom: -1px;
}

.f2 .the-content .right-info{
    width:1005px;
    float: left;
    height:440px;
    position: relative;
}
.f2 .the-content .right-info > li{
    position: absolute;
    left:0;
    top:0;
    width:1005px;
    height:440px;
    z-index: -1;
    opacity: 0;
    padding: 35px 0 0 62px;
}
.f2 .the-content .right-info > li.on{
    z-index: 1;
    opacity: 1;
    transition: .3s;
}
.f2 .the-content .right-info > li .t-t{
    font-size: 24px;
    color: #ffffff;
    line-height: 14px;
}
.f2 .the-content .right-info > li > ul{
    margin-top: 40px;
}
.f2 .the-content .right-info > li > ul > li{
    height: 60px;
    width:220px;
    float: left;

}
.f2 .the-content .right-info > li > ul > li .icon{
    width: 60px;
    height: 60px;
    border-radius: 8px;
    float: left;
    margin-right:10px;
}
.f2 .the-content .right-info > li > ul > li  .r{
    float: left;
}
.f2 .the-content .right-info > li > ul > li  .r .r1{
    font-size: 18px;
    line-height: 18px;
    color: #ffffff;
    margin-top: 8px;
}
.f2 .the-content .right-info > li > ul:after{
    content: '';
    display: block;
    clear: both;
}
.f2 .the-content .right-info > li > ul > li  .r .r2{
    font-size: 14px;
    color: #b7b7b7;
    line-height: 14px;
    margin-top: 8px;
}
.f2 .the-content .right-info > li .lxkf{
    width: 139px;
    height: 34px;
    border-radius: 8px;
    border: solid 1px #0299ee;
    display: block;
    margin-top: 40px;
    font-size: 16px;
    color: #0299ee;
    text-align: center;
    line-height:34px;
    box-sizing: border-box;
}
.f2 .the-content .right-info > li .lxkf:hover{
    color:#fff;
    background-color: #0299ee;
}
.f2 .the-content .right-info > li .x-line{
    width: 874px;
    height: 0px;
    border-bottom: 1px dashed #667080;
    margin-top: 40px;
}
.f2 .the-content .right-info > li p{
    font-size: 14px;
    color: #b7b7b7;
    margin-top: 40px;
    width:870px;
    line-height: 32px;
}
.f2 .the-content .right-info > li:nth-child(1) > ul > li:nth-child(1) .icon{
    background: url("../images/d1.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(1) > ul > li:nth-child(2) .icon{
    background: url("../images/d2.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(1) > ul > li:nth-child(3) .icon{
    background: url("../images/d3.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(1) > ul > li:nth-child(4) .icon{
    background: url("../images/d4.png")center center no-repeat;
}


.f2 .the-content .right-info > li:nth-child(2) > ul > li:nth-child(1) .icon{
    background: url("../images/d5.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(2) > ul > li:nth-child(2) .icon{
    background: url("../images/d6.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(2) > ul > li:nth-child(3) .icon{
    background: url("../images/d7.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(2) > ul > li:nth-child(4) .icon{
    background: url("../images/d8.png")center center no-repeat;
}


.f2 .the-content .right-info > li:nth-child(3) > ul > li:nth-child(1) .icon{
    background: url("../images/d9.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(3) > ul > li:nth-child(2) .icon{
    background: url("../images/d10.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(3) > ul > li:nth-child(3) .icon{
    background: url("../images/d11.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(3) > ul > li:nth-child(4) .icon{
    background: url("../images/d12.png")center center no-repeat;
}



.f2 .the-content .right-info > li:nth-child(4) > ul > li:nth-child(1) .icon{
    background: url("../images/d13.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(4) > ul > li:nth-child(2) .icon{
    background: url("../images/d14.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(4) > ul > li:nth-child(3) .icon{
    background: url("../images/d15.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(4) > ul > li:nth-child(4) .icon{
    background: url("../images/d16.png")center center no-repeat;
}

.f2 .the-content .right-info > li:nth-child(5) > ul > li:nth-child(1) .icon{
    background: url("../images/d17.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(5) > ul > li:nth-child(2) .icon{
    background: url("../images/d18.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(5) > ul > li:nth-child(3) .icon{
    background: url("../images/d19.png")center center no-repeat;
}
.f2 .the-content .right-info > li:nth-child(5) > ul > li:nth-child(4) .icon{
    background: url("../images/d20.png")center center no-repeat;
}


.f2 .ball-a{
    width: 58px;
    height: 58px;
    background-color: #75cede;
    position: absolute;
    left: -113px;
    top: 391px;
    border-radius: 50%;
    animation: hovera 5s ease-in 0s infinite alternate;
}
@keyframes hovera{
    0%{top: 391px;}
    50%{top: 530px;}
    100%{top: 191px;}
}

.f2 .ball-b{
    width: 36px;
    height: 36px;
    background-color: #75cede;
    position: absolute;
    left: -233px;
    top: 251px;
    border-radius: 50%;
    animation: hoverb 5s ease-in 0s infinite alternate;
}
@keyframes hoverb{
    0%{top: 251px;}
    50%{top: 0px;}
    100%{top: 491px;}
}
.f2 .ball-c{
    width: 36px;
    height: 36px;
    background-color: #75cede;
    position: absolute;
    right: -110px;
    top: 488px;
    border-radius: 50%;
    animation: hoverc 5s ease-in 0s infinite alternate;
}
@keyframes hoverc{
    0%{top: 488px;}
    50%{top: 599px;}
    100%{top: 300px;}
}

.f3{
    height:600px;
    width:100%;
    padding-top: 69px;
    box-sizing: border-box;
}
.f3 ul{
    width:1190px;
    margin-top: 39px;
}
.f3 ul li{
    width: 230px;
    height: 315px;
    background-color: #ffffff;
    box-shadow: 0px 3px 13px 0px
    rgba(4, 0, 0, 0.15);
    border-radius: 8px;
    float: left;
    overflow: hidden;
    position: relative;
}
.f3 ul li:not(:last-child){
    margin-right: 90px;

}
.f3 ul li .t-top{
    width: 230px;
    height: 252px;
    transition: .3s;
    overflow: hidden;
    position: relative;
}

.f3 ul li .t-top .num-bg{
    width:54px;
    height:41px;
    margin:20px auto 0 auto;

}
.f3 ul li .t-top .learn-more{
    width: 110px;
    height: 28px;
    border-radius: 14px;
    border: solid 1px #ffffff;
    display: block;
    box-sizing: border-box;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 28px;
    margin: 18px auto;
}


.f3 ul li:nth-child(1) .t-top{
    background-image: linear-gradient(-90deg,
    #c568ff 0%,
    #fd80fb 100%),
    linear-gradient(
            #667080,
            #667080);
}
.f3 ul li:nth-child(1) .t-top .num-bg{
    background: url("../images/e1.png")center center no-repeat;
}


.f3 ul li:nth-child(2) .t-top{
    background-image: linear-gradient(-90deg,
    #38d07b 0%,
    #32dab7 100%),
    linear-gradient(
            #667080,
            #667080);
}
.f3 ul li:nth-child(2) .t-top .num-bg{
    background: url("../images/e2.png")center center no-repeat;
}



.f3 ul li:nth-child(3) .t-top{
    background-image: linear-gradient(-90deg,
    #b277ff 0%,
    #42a9f8 100%),
    linear-gradient(
            #667080,
            #667080);
}
.f3 ul li:nth-child(3) .t-top .num-bg{
    background: url("../images/e3.png")center center no-repeat;
}



.f3 ul li:nth-child(4) .t-top{
    background-image: linear-gradient(-90deg,
    #6cbaf8 0%,
    #7de0f9 100%),
    linear-gradient(
            #667080,
            #667080);
}
.f3 ul li:nth-child(4) .t-top .num-bg{
    background: url("../images/e4.png")center center no-repeat;
}
.f3 ul li .t-top  .normal{
    font-size: 16px;
    color: #ffffff;
    line-height: 27px;
    text-align: center;
    margin-top: 8px;
    display: block;
}

.f3 ul li.on .t-top{
    height: 150px;
    transition: .3s;
}
.f3 ul li.on .t-top  .normal{
    display: none;
}
.f3 ul li.on .t-top .on-type{
    display: block;
}
.f3 ul li .t-top .on-type{
    display: none;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    margin-top: 8px;
}
.f3 ul li.on  .t-top .learn-more{
    bottom: 20px;
    transition: .3s;
}
.f3 ul li .t-bottom{
    position: absolute;
    height:165px;
    width:230px;
    left:0;
    top:252px;
    transition: .3s;
}

.f3 ul li .t-bottom .tit{
    height:63px;
    font-size: 22px;
    color: #666666;
    font-weight: bold;
    text-align: center;
    line-height:63px;
}
.f3 ul li.on .t-bottom{
    top:150px;
    transition: .3s;
}
.f3 ul li .t-bottom .content{
    width: 155px;
    color: #999999;
    margin: 0 auto;
    font-size: 14px;
}
.f4{
    width:100%;
    height:743px;
    background: url("../images/f1.jpg")center center no-repeat;
    padding-top: 48px;
    box-sizing: border-box;
}
.f4 .t-box{
    width: 1190px;
    height: 510px;
    background-color: #ffffff;
    margin-top: 39px;
    position: relative;
}
.f4 .t-box li{
    width:396.666px;
    height:255px;
    float: left;
    position: relative;
    overflow: hidden;
}
.f4 .t-box .x-line{
    width: 1180px;
    height: 1px;
    background-color: #dddddd;
    position: absolute;
    left:5px;
    top:254px;
}
.f4 .t-box .y-line-a,.f4 .t-box .y-line-b{
    width: 1px;
    height: 480px;
    background-color: #dddddd;
    position: absolute;
    top:16px;
}
.f4 .t-box .y-line-a{
    left:395px;
}
.f4 .t-box .y-line-b{
    left:791px;
}
.f4 .t-box li .c{
    position: absolute;
    width: 396.666px;
    height:400px;
    left:0;
    top: -8px;
    transition: .3s;

}
.f4 .t-box li .c .icon{
    width: 74px;
    height: 61px;
    position: relative;
    margin:37px auto 0 auto ;
    transition: .3s;
    opacity: 1;
}
.f4 .t-box li.on .c .icon{
    margin-top: 5px;
    transition: .3s;
    opacity:0;
}

.f4 .t-box li .c .title{
    font-size: 18px;
    letter-spacing: 1px;
    color: #333333;
    text-align: center;
    margin-top: 10px;
    transition: .3s;
}
.f4 .t-box li.on .c .title{
    color: #4ba0ff;
    transition: .3s;
}
.f4 .t-box li .c .cont{
    width: 324px;
    height: auto;
    color: #999999;
    margin:13px auto 0 auto;
    line-height: 26px;
    font-size: 14px;
    transition: .3s;
}
.f4 .t-box li .c .icon .a-icon{
    width: 74px;
    height: 61px;
    position: absolute;
    left:0;
    top:0;
    background: url("../images/f5.png")center center no-repeat;

}
.f4 .t-box li .c .icon .my-icon{
    position: absolute;
    width: 74px;
    height: 61px;
}
.f4 .t-box li .c .chat{
    width: 120px;
    height: 35px;
    background-image: linear-gradient(0deg,
    #5385ff 0%,
    #43baff 100%),
    linear-gradient(
            #f2f2f2,
            #f2f2f2);
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
    display: block;
    border-radius: 10px;
    margin:10px auto 0 auto;
}
.f4 .t-box li:nth-child(1) .c .icon .my-icon{
    background: url("../images/f8.png")center center no-repeat;
}
.f4 .t-box li:nth-child(2) .c .icon .my-icon{
    background: url("../images/f4.png")center center no-repeat;
}
.f4 .t-box li:nth-child(3) .c .icon .my-icon{
    background: url("../images/f2.png")center center no-repeat;
}
.f4 .t-box li:nth-child(4) .c .icon .my-icon{
    background: url("../images/f3.png")center center no-repeat;
}
.f4 .t-box li:nth-child(5) .c .icon .my-icon{
    background: url("../images/f6.png")center center no-repeat;
}
.f4 .t-box li:nth-child(6) .c .icon .my-icon{
    background: url("../images/f7.png")center center no-repeat;
}


.f4 .t-box li.on .c{
    top: -70px;
    transition: .3s;
}
.f4 .t-box li.on .c .cont{
    margin-top:30px;
    transition: .3s;
}

.f5{
    width:100%;
    height:1143px;
    background-color: #feffff;
    padding-top: 69px;
    box-sizing: border-box;
    z-index:11;
    position: relative;
}
.f5 .menus{
    width:400px;
    height:39px;
    margin:27px auto 0 auto;
}

.f5 .menus .menu.on{
    background: url("../images/g1.png")center center no-repeat;
    color:#fff;
}
.f5 .menus .menu{
    font-size: 14px;
    width: 120px;
    height: 39px;
    float: left;
    color: #2e9ffe;
    letter-spacing: 2px;
    text-align: center;
    line-height: 32px;
    position: relative;
    cursor:pointer;
}
.f5 .menus .menu.on:after{
    display: none;
}
.f5 .menus .menu:after{
    content: '';
    display: block;
    width: 120px;
    height: 32px;
    border: 1px solid #2ba2fe;
    position: absolute;
    left:0;
    top:0;
    box-sizing: border-box;
    border-radius: 20px;
}
.f5 .menus .menu:not(:last-child){
    margin-right:20px ;
}

.f5 .type-box{
    width:1190px;
    height:417px;
    margin:23px auto 0 auto;
    position: relative;
}
.f5 .type-box .l-menu{
    width: 46px;
    height: 46px;
    background: url("../images/g2.png")center center no-repeat;
    position: absolute;
    left:-66px;
    top:163px;
}
.f5 .type-box .r-menu{
    width: 46px;
    height: 46px;
    background: url("../images/g2.png")center center no-repeat;
    transform:rotate(180deg);
    position: absolute;
    right:-66px;
    top:163px;

}
.f5 .type-box .type-item{
    width:1190px;
    height:417px;
    position: absolute;
    left:0;
    top:0;
    z-index: -1;
    opacity:0;
    transition: .3s;
}
.f5 .type-box .type-item.on{
    z-index:1;
    opacity: 1;
    transition: .3s;
}
.f5 .type-box .type-item .tts{
    width:1190px;
    height:417px;
    position: absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;
    transition: .3s;
}
.f5 .type-box .type-item .tts.on{
    z-index:1;
    opacity:1;
    transition: .3s;
}


.f5 .type-box .type-item .tts .al-item{
    width: 258px;
    height:417px;

    border-radius: 8px;
    float: left;
    position: relative;
    overflow: hidden;

    background-size:258px 417px;
}
.f5 .type-box .type-item .tts .al-item .detail{
    width: 258px;
    height: 209px;
    background: url("../images/bbg.png")center center no-repeat;
    border-radius: 6px;
    position: absolute;
    left:0;
    bottom:-209px;
    padding:27px 0 0 25px;
    box-sizing: border-box;
    transition: .3s;
}
.f5 .type-box .type-item .tts .al-item .detail .the-s{
    font-size: 16px;
    color: #ffffff;
    line-height: 27px;
    margin-top: 12px;
}
.f5 .type-box .type-item .tts .al-item.on  .detail{
    transition: .3s;
    bottom: 0;
}
.f5 .type-box .type-item .tts .al-item .detail .lm{
    font-size: 20px;
    color: #ffffff;
    line-height: 20px;
}
.f5 .type-box .type-item .tts .al-item .detail .lm:before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../images/lm.png")center center no-repeat;
    margin-right: 9px;
    position: relative;
    top:2px;
}
.f5 .type-box .type-item .tts .al-item .detail .x-line{
    width: 44px;
    height: 2px;
    background-color: #ffffff;
    margin-top: 20px;
}
.f5 .type-box .type-item .tts .al-item img{
    width: 268px;
    height: 417px;
    margin: 0 auto;
    display: block;
    position: relative;
    left: -5px;
}
.f5 .type-box .type-item .tts .al-item:not(:last-child){
    margin-right: 51px;
}
.f5 .x-d{
    width:53px;
    height:8px;
    margin:35px auto 0 auto;
}
.f5 .x-d .d{
    width: 8px;
    height: 8px;
    background-color: #81b8ff;
    border-radius:4px;
    float: left;
    cursor:pointer;
    transition: .3s;
}
.f5 .x-d .d:not(:last-of-type){
    margin-right: 5px;
}
.f5 .x-d .d.on{
    width: 27px;
    transition: .3s;
}
.f5 .yyzy{
    position: absolute;
    width:1190px;
    left:0;
    top:720px;
}

.f5 .yyzy .kfs .out{
    width:960px;
    height:121px;
    position: absolute;
    left:50px;
    top:34px;
    z-index:1;
}
.f5 .yyzy .kfs .kf-list{
    position: absolute;
    left:0;
    top:0;
    height:121px;
}
.f5 .yyzy .kfs .kf-list .kf-item{
    width: 192px;
    height: 121px;
    float: left;
    position: relative;
    cursor: pointer;
}

.f5 .yyzy .kfs .kf-list .kf-item .timg{
    width: 121px;
    height: 121px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 9;
    transition: .3s;
    border-radius:50%;
}

.f5 .yyzy .kfs .kf-list .kf-item.on .timg{
    width: 145px;
    height: 145px;
}
.f5 .yyzy .kfs{
    width: 1060px;
    height: 330px;
    background-image: linear-gradient(0deg,
    #2ba2fe 0%,
    #536efe 100%),
    linear-gradient(
            #ffffff,
            #ffffff);
    box-shadow: 0px 3px 7px 0px
    rgba(4, 0, 0, 0.5);
    border-radius: 8px;
    margin: 39px auto 0 auto;
    overflow: hidden;
    position: relative;
}
.f5 .yyzy .kfs .w-block{
    width: 960px;
    height: 195px;
    background-image: url("../images/g3.png");
    background-size: 960px 195px;
    margin:113px auto 0 auto;
    position: relative;
    padding-top: 74px;
    padding-left: 39px;
    box-sizing: border-box;
}
.f5 .yyzy .kfs .w-block  .name{
    font-size: 20px;
    color: #479eff;
    line-height: 20px;
    font-weight: bold;
}

.f5 .yyzy .kfs .w-block .ks-infos{
    position: relative;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item{
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item.on{
    z-index:1;
    opacity:1;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf{
    width: 120px;
    height: 30px;
    background-image: linear-gradient(0deg,
    #005dff 0%,
    #43a6ff 100%),
    linear-gradient(
            #479eff,
            #479eff);
    border-radius: 15px;
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.tel{
    margin-top: 14px;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item ul{
    display: inline-block;
    position: relative;
    top: 6px;
    left: 20px;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item ul li{
    width: 80px;
    height: 25px;
    background-image: linear-gradient(180deg,
    #2b42ef 0%,
    #25a0ff 100%),
    linear-gradient(
            #206acf,
            #206acf);
    border-radius: 8px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height:  25px;
    float: left;
    margin-right: 10px;

}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.tel:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../images/kf.png")center center no-repeat;
    margin-right: 10px;
    position: relative;
    top:2px;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.wx{
    display: inline-block;
    margin-top: 10px;
    position: relative;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.wx  .wx-icon{
    width: 102px;
    height: 111px;
    background: url("../images/sanjiaoxing.png")center center no-repeat;
    position: absolute;
    left: 10px;
    top: -116px;
    opacity: 0;
    z-index: -1;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.wx:hover .wx-icon{
    opacity: 1;
    z-index: 999;
    transition: .3s;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.wx  .wx-icon img{
    display: block;
    width: 96px;
    height: 96px;
    margin: 4px auto;
}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .lxkf.wx:before{
    content: '';
    display: inline-block;
    width: 21px;
    height: 17px;
    background: url("../images/wx.png")center center no-repeat;
    margin-right: 8px;
    position: relative;
    top:2px;

}
.f5 .yyzy .kfs .w-block .ks-infos .ks-item .js{
        position: relative;
	    display: inline-block;
	    top: 4px;
	    left: 21px;
	    font-size: 16px;
	    color: #999999;
	    overflow: hidden;
	    height: 20px;
	    width: 706px;
	    line-height: 20px;
}
.f5 .yyzy .kfs .w-block .l-c,.f5 .yyzy .kfs .w-block .r-c{
    width: 46px;
    height: 46px;
    background: url("../images/g4.png")center center no-repeat;
    position: absolute;
    top:61px;
}
.f5 .yyzy .kfs .w-block .l-c{
    left:-23px;

}
.f5 .yyzy .kfs .w-block .r-c{
    right:-23px;
    transform:rotate(180deg);
}
.f6{
    width:100%;
    height:506px;
    background: url("../images/h1.jpg")center center no-repeat;
    padding-top: 187px;
    box-sizing: border-box;
    position: relative;
}

.f6 .option{
    width:610px;
    height:150px;
    position: absolute;
    bottom: 0;
    left:0;
    right:0;
    margin:auto;
}
.f6 .option > div{
    width:305px;
    height:150px;
    float: left;
    cursor:pointer;
    position: relative;
}
.f6 .option > div .x-line{
    position: absolute;
    bottom: 0;
    left:0;
    right:0;
    margin:auto;
    width:0;
    height: 2px;
    background-color: #1f8fff;
    transition: .3s;
}
.f6 .option > div.on .x-line{
    width: 305px;
    transition: .3s;
}
.f6 .option > div > .ic{
    height:80px;
    width:80px;
    margin:0 auto;
}
.f6 .option > div:nth-of-type(1) > .ic{
    background: url("../images/h4.png")center center no-repeat;
    transition: .3s;
}
.f6 .option > div:nth-of-type(1).on > .ic{
    background: url("../images/h2.png")center center no-repeat;
    transition: .3s;
}
.f6 .option > div:nth-of-type(2) > .ic{
    background: url("../images/h3.png")center center no-repeat;
    transition: .3s;
}
.f6 .option > div:nth-of-type(2).on > .ic{
    background: url("../images/h5.png")center center no-repeat;
    transition: .3s;
}
.f6 .option > div > .t-n{
    font-size: 20px;
    letter-spacing: 1px;
    color: #fefefe;
    line-height: 20px;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
    transition: .3s;
}
.f6 .option > div.on > .t-n{
    color: #319dea;
    transition: .3s;
}
.f7{
    width:100%;
    height:537px;
    background: url("../images/h0.1.jpg")center center no-repeat;
    overflow: hidden;
}
.f7 > .com > div{
    z-index:0;
    opacity:0;
    transition: .3s;
}
.f7 > .com > div:nth-of-type(1){
    width:1190px;
    position: absolute;
    left:0;
    top:0;
    margin-top: 7px;
}
.f7 > .com > div.on{
    z-index:1;
    opacity:1;
    transition: .3s;
}
.f7 > .com > div:nth-of-type(1) >  .item{
    width: 260px;
    height: 177px;
    border-radius: 8px;
    float: left;
    margin-bottom: 39px;
    position: relative;
    overflow: hidden;
}
.f7 > .com > div:nth-of-type(1) >  .item:not(:nth-child(4n)){
    margin-right: 50px;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(1){
    background: url("../images/h6.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(2){
    background: url("../images/h11.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(3){
    background: url("../images/h8.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(4){
    background: url("../images/h9.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(5){
    background: url("../images/h10.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(6){
    background: url("../images/h7.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item:nth-child(7){
    background: url("../images/h12.png")center center no-repeat;
}

.f7 > .com > div:nth-of-type(1) >  .item:nth-child(8){
    background: url("../images/h13.png")center center no-repeat;
}
.f7 > .com > div:nth-of-type(1) >  .item .info{
    position: absolute;
    left:0;
    bottom: -43px;
    background-color: rgba(51,51,51,.5);
    width: 260px;
    height: 82px;
    transition: .3s;
    padding: 7px 0 0 15px;
    box-sizing: border-box;
}
.f7 > .com > div:nth-of-type(1) >  .item.on .info{
    transition: .3s;
    bottom:0px;
}
.f7 > .com > div:nth-of-type(1) >  .item .info .c-name{
    height: 22px;
    font-size: 16px;
    color: #fefefe;
    line-height: 22px;
    font-weight: bold;
}
.f7 > .com > div:nth-of-type(1) >  .item .info .c-name:after{
    content: '';
    display: inline-block;
    width: 18px;
    height: 22px;
    background: url("../images/h0.png")center center no-repeat;
    position: relative;
    top:2px;
    margin-left: 10px;
}

.f7 > .com > div:nth-of-type(1) >  .item .info .dz{
    font-size: 16px;
    color: #fefefe;
    margin-top: 8px;
}

.f7 > .com > div:nth-of-type(2){
    width:1190px;
    margin-top: 72px;
}
.f7 > .com > div:nth-of-type(2) .left{
    width: 595px;
    height: 395px;
    background: url("../images/1.jpg")center center no-repeat;
    float: left;
}
.f7 > .com > div:nth-of-type(2) .right{
    width: 524px;
    float: left;
    margin-left:64px; ;
}
.f7 > .com > div:nth-of-type(2) .right p{
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 45px;
    line-height: 30px;
}

.f8{
    height:auto;
padding-bottom:30px;
    width:100%;
    background-color: #fff;
    padding-top: 69px;
    box-sizing: border-box;
}
.f8  .form-box{
    width: 1200px;
 
    background-color: #ffffff;
    box-shadow: 0px 3px 7px 0px
    rgba(4, 0, 0, 0.15);
    border-radius: 8px;
    margin:50px auto 0 auto;
    overflow: hidden;
}
.f8  .form-box > input{
    width: 355px;
    height: 52px;
    background-color: #ffffff;
    box-shadow: 0px 3px 7px 0px
    rgba(4, 0, 0, 0.05);
    border: solid 1px #e5e5e5;
    display: block;
    margin:0 auto;
    outline: none;
    text-indent: 59px;

}
.f8  .form-box > input:nth-of-type(1){
    margin-top: 35px;
    background: url("../images/y2.png")left center no-repeat;
    background-position: 15px;

}
.f8  .form-box > input:nth-of-type(2){
    margin-top: 24px;
    background: url("../images/y1.png")left center no-repeat;
    background-position: 15px;
 }
.f8  .form-box .tj{
    width: 170px;
    height: 50px;
    background-image: linear-gradient(0deg,
    #526ffe 0%,
    #2ba2fe 100%),
    linear-gradient(
            #ffa767,
            #ffa767);
    box-shadow: 0px 3px 7px 0px
    rgba(78, 116, 254, 0.6);
    border-radius: 8px;
    display: inline-block;
    float: left;
    margin:40px 0 0 123px;
    letter-spacing: 1px;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}

.f8  .form-box .lxkf{
    width: 170px;
    height: 50px;
    border-radius: 8px;
    border: solid 1px #3397fe;
    box-sizing: border-box;
    letter-spacing: 1px;
    color: #3397fe;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    float: left;
    margin:40px 0 0 15px;
}


.tc_hide{
    position: fixed;
    width: 80px;
    height: 208px;
    background-image: url(../images/go.png);
    background-position: center;
    background-repeat: no-repeat;
    bottom: 320px;
    right: calc(50% - 742px);
    z-index: 20;
    cursor:pointer;
}

.tc_mask{
    top: 0;
    z-index: 9999;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}
.tc_show{
    position: absolute;
    z-index: 999;
    width: 736px;
    height: 440px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.tc_show .title{
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    overflow: hidden;
}
.tc_show .title .tc_close{
    position: absolute;
    z-index: 10;
    width: 30px;
    height: 30px;
    right: 125px;
    top: 0;
    background-image: url(../images/close.png);
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.tc_list{
    width: 736px;
    height: 350px;
    margin-top: 58px;
}

.tc_list .list{
    float: left;
    width: 224px;
    height: 350px;
    background-position: center 82px;
    background-repeat: no-repeat;
    margin: 0 10px;
    position: relative;
}
.tc_list .list .b1{
    width: 224px;
    height: 236px;
    background-image: linear-gradient(0deg,
    #3a81e7 0%,
    #418dfa 100%);
    border-radius: 10px;
    position: absolute;
    top: 82px;
    left: 0;
}

.tc_list .list .b2{
    width: 204px;
    height: 236px;
    background-color: #ffffff;
    position: absolute;
    left: 10px;
    top: 0;
}
.tc_list .list .cc{
    width: 224px;
    height: 350px;
    position: absolute;
    top:0;
    left: 0;

}
.tc_list .list .img{
    width: 148px;
    height: 148px;
    background-color: #ffffff;
    border: solid 8px rgba(58, 129, 231, 0.5);
    border-radius: 50%;
    margin: 0 auto;
}
.tc_list .list .img img{
    display: block;
    width: 148px;
    height: 148px;
    border-radius:50%;
}
.tc_list .list .p1{
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 12px;
}
.tc_list .list .p2{
    font-size: 14px;
    color: #956b3b;
    text-align: center;
    margin-top: 8px;
}

.tc_list .list .p3{
    display: block;
    width: 160px;
    font-size: 12px;
    color: #999;
    text-align: center;
    margin: 18px auto 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:hidden;
}
.tc_list .list .btn{
    display: block;
    width: 146px;
    height: 36px;
    background-image: linear-gradient(0deg,
    #3a81e7 0%,
    #3b8bff 100%);
    border-radius: 8px;
    margin: 24px auto 0;
    overflow: hidden;
    transition: .3s;
    text-align: center;
}
.tc_list .list .btn a{
    height: 36px;
    display: inline-block;
    color: #ffffff;
    font-size: 14px;
    line-height: 36px;
}

.tc_list .list .btn a::before{
    content: "";
    width: 24px;
    height: 36px;
    float: left;
    display: block;
    background: url("../images/go1.png") left center no-repeat;
}