﻿.topbanner{height: 500px; width: 100%; background: url(/Images/jjfa/xinls/lingshou_01.jpg); background-size: auto 100%; background-position:center;}
.xinls_part1 { max-width: 1200px; margin: 0 auto; position: relative; }
.xinls_part2 ul::after, .xinls_part4 ul::after { content: ""; display: table; clear: both; }
.qyls_tit { text-align: center; font-size: 32px; font-weight: bold; }
.tit_p { text-align: center; font-size: 18px; color: #98a1ab; }
.xp1_main { padding: 60px 0; }
.xm_img { margin: 0 auto; }
.xinls_part1 ul { width: 100%; position: absolute; left: 0; top: 66px; height: 100%; }
    .xinls_part1 ul li { position: absolute; width: 260px; height: 70px; padding: 20px; }
        .xinls_part1 ul li h3 { font-size: 20px; font-weight: bold; }
        .xinls_part1 ul li p { line-height: 20px; padding-top: 5px; }
        .xinls_part1 ul li:nth-child(1) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.29, 0.01, 0.71, 1); animation: 2s floaty infinite alternate cubic-bezier(0.29, 0.01, 0.71, 1); background: #ddfbf5; color: #33c9b9; border-radius: 20px; border: 1px solid #90e9df; box-shadow: 20px 15px 30px rgba(23,210,189,0.2); left: 80px; top: 60px; }
            .xinls_part1 ul li:nth-child(1) img { position: absolute; right: -20px; top: 30%; }
        .xinls_part1 ul li:nth-child(2) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.4, 0, 1, 1); animation: 2s floaty infinite alternate cubic-bezier(0.4, 0, 1, 1); background: #e0eaff; color: #3f7cff; border-radius: 20px; border: 1px solid #8cb1ff; box-shadow: 20px 15px 30px rgba(15,91,255,0.1); left: 0; top: 250px; }
            .xinls_part1 ul li:nth-child(2) img { position: absolute; right: -20px; top: 30%; }
        .xinls_part1 ul li:nth-child(3) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); background: #fcefd7; color: #f5ad33; border-radius: 20px; border: 1px solid #f7d89f; box-shadow: 20px 15px 30px rgba(233,154,61,0.2); right: 80px; top: 60px; }
            .xinls_part1 ul li:nth-child(3) img { position: absolute; left: -20px; top: 30%; }
        .xinls_part1 ul li:nth-child(4) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); background: #ffdade; color: #fe6368; border-radius: 20px; border: 1px solid #fdb4b4; box-shadow: 20px 15px 30px rgba(231,60,81,0.2); right: 0; top: 250px; }
            .xinls_part1 ul li:nth-child(4) img { position: absolute; left: -20px; top: 30%; }
.xinls_part2 { background: url(/Images/jjfa/xinls/xinls_27.jpg); padding: 70px 0; }
    .xinls_part2 ul { max-width: 1200px; margin: 0 auto; padding: 20px 0; }
        .xinls_part2 ul li { width: 484px; height: 165px; float: left; border-radius: 20px; background-color: #fff !important; padding: 40px; margin: 18px; background-size: 100%; }
            .xinls_part2 ul li h2 { font-size: 22px; font-weight: bold; }
            .xinls_part2 ul li font { color: #0f5bff; font-size: 18px; display: block; padding: 15px 0; font-weight: bold; }
            .xinls_part2 ul li p { color: #797e8e; line-height: 24px; }
            .xinls_part2 ul li:nth-child(1) { background: url(/Images/jjfa/xinls/xinls_06.png) right bottom 100% no-repeat; }
            .xinls_part2 ul li:nth-child(2) { background: url(/Images/jjfa/xinls/xinls_08.png) right bottom 100% no-repeat; }
            .xinls_part2 ul li:nth-child(3) { background: url(/Images/jjfa/xinls/xinls_22.png) right bottom 100% no-repeat; }
            .xinls_part2 ul li:nth-child(4) { background: url(/Images/jjfa/xinls/xinls_24.png) right bottom 100% no-repeat; }
            .xinls_part2 ul li:hover { box-shadow: 10px 15px 30px rgba(153,185,255,0.3); transform: translateY(-2px); }

.xinls_part3 { position: relative; margin: 100px auto; max-width: 1200px; }
.xm3_img { border-radius: 50%; box-shadow: 0 0 35px rgba(233,0,52,0.1); margin: 0 auto; }
.xinls_part3 ul { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
    .xinls_part3 ul li { position: absolute; width: 340px; height: 85px; border-radius: 20px; color: #fff; padding: 20px 30px; }
        .xinls_part3 ul li h2 { font-size: 20px; font-weight: bold; padding-bottom: 10px; }
        .xinls_part3 ul li p { line-height: 24px; }
        .xinls_part3 ul li em { display: block; position: absolute; }
            .xinls_part3 ul li em::after { content: " "; width: 10px; height: 10px; border-radius: 50%; position: absolute; }
        .xinls_part3 ul li:nth-child(1) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.29, 0.01, 0.71, 1); animation: 2s floaty infinite alternate cubic-bezier(0.29, 0.01, 0.71, 1); border: 1px solid #ff7f2a; background: linear-gradient(90deg,#feae51,#fb6d1f); left: 0; top: 0; text-align: right; }
            .xinls_part3 ul li:nth-child(1) em { border-bottom: 1px dashed #fb6d1f; width: 52px; right: -51px; top: 50%; transform: rotate(30deg); }
                .xinls_part3 ul li:nth-child(1) em::after { background: #fb6d1f; display: inline-block; border: 1px solid #fff; box-shadow: 0 0 25px rgba(254,55,29,1); top: -6px; }
        .xinls_part3 ul li:nth-child(2) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.4, 0, 1, 1); animation: 2s floaty infinite alternate cubic-bezier(0.4, 0, 1, 1); border: 1px solid #0156da; background: linear-gradient(90deg,#4c7af5,#0064ff); left: 0; bottom: 0; text-align: right; }
            .xinls_part3 ul li:nth-child(2) em { border-bottom: 1px dashed #0164ff; width: 52px; right: -51px; top: 50%; transform: rotate(-30deg); }
                .xinls_part3 ul li:nth-child(2) em::after { background: #0164ff; display: inline-block; border: 1px solid #fff; box-shadow: 0 0 25px rgba(1,100,255,1); top: -6px; }
        .xinls_part3 ul li:nth-child(3) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); border: 1px solid #fe004e; background: linear-gradient(90deg,#ff0066,#ff6f6f); right: 0; top: 0; }
            .xinls_part3 ul li:nth-child(3) em { border-bottom: 1px dashed #ff4231; width: 69px; left: -64px; top: 50%; transform: rotate(-30deg); }
                .xinls_part3 ul li:nth-child(3) em::after { background: #ff4231; display: inline-block; border: 1px solid #fff; box-shadow: 0 0 25px rgba(255,66,49,1); top: -6px; }
        .xinls_part3 ul li:nth-child(4) { -webkit-animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); animation: 2s floaty infinite alternate cubic-bezier(0.23, 0.4, 0.63, 0.85); border: 1px solid #5d2ff4; background: linear-gradient(90deg,#5f51ed,#8d81f3); right: 0; bottom: 0; }
            .xinls_part3 ul li:nth-child(4) em { border-bottom: 1px dashed #5f51ed; width: 69px; left: -64px; top: 50%; transform: rotate(30deg); }
                .xinls_part3 ul li:nth-child(4) em::after { background: #5f51ed; display: inline-block; border: 1px solid #fff; box-shadow: 0 0 25px rgba(95,81,237,1); top: -6px; }
.xinls_part4 { background: url(/Images/jjfa/xinls/xinls_44.jpg) top center no-repeat; padding: 70px 0; }
    .xinls_part4 ul { max-width: 1200px; margin: 0 auto; padding: 50px 0; }
        .xinls_part4 ul li { width: 224px; height: 315px; border-radius: 20px; background: #fff; box-shadow: 0 0 30px rgba(0,101,253,0.2); float: left; padding: 25px; margin: 13px; transition: all 0.36s ease; }
    .xinls_part4 .qyls_tit, .xinls_part4 .tit_p { color: #fff; }
    .xinls_part4 ul li img { padding-bottom: 10px; }
    .xinls_part4 ul li h3 { font-size: 18px; font-weight: bold; padding: 10px 0; }
    .xinls_part4 ul li em { display: block; width: 67px; height: 5px; background: linear-gradient(90deg,#266eff,#ffffff); }
    .xinls_part4 ul li p { color: #98a1ab; line-height: 24px; padding-top: 20px; }
    .xinls_part4 ul li:hover { transform: translateY(-4px); }

@keyframes floaty {
    from { transform: translateY(5) rotateX(5deg); }
    to { transform: translateY(5px) rotateX(5deg); }
}

@media screen and (max-width: 800px) {
    /*.topimg { height:50vw; width: 100%; object-fit: cover; }*/
	 .topbanner{ height:55vw; width: 100%; background-position:35% center; }
    .faa { width: 100vw; padding: 0 3vw; box-sizing: border-box; margin: 0; }
    .qyls_tit { font-size: 28px; padding: 0 2vw; }
    .faddes, .faedes, .fafdes, .faades, .facdes { margin-top: 5px; }

    .faabg:after { content: ""; display: table; clear: both; }
    .xinls_part1 ul { width: 100%; position: absolute; left: 0; top: 90px; height: 100%; }
        .xinls_part1 ul li { width: 28vw; height: auto; }
            .xinls_part1 ul li:nth-child(1) { left: 25px; top: 15px; }
            .xinls_part1 ul li:nth-child(3) { right: 25px; top: 15px; left: auto; }
            .xinls_part1 ul li:nth-child(2) { left: 25px; bottom: 128px; top: auto; }
            .xinls_part1 ul li:nth-child(4) { right: 25px; bottom: 128px; left: auto; top: auto; }
    .xp1_main { padding: 225px 0 225px 0; }
    .xm_img { margin: 0 auto; width: 100%; }
    .xinls_part2 { padding: 50px 0 30px 0; }
        .xinls_part2 ul li { width: 80vw; padding: 5vw; height: auto; margin: 3vw auto; float: none; }
    .xinls_part3 ul li { width: 29vw; height: auto; }
        .xinls_part3 ul li em { display: none; }
        .xinls_part3 ul li:nth-child(1), .xinls_part3 ul li:nth-child(3) { top: -110px; }
        .xinls_part3 ul li:nth-child(2), .xinls_part3 ul li:nth-child(4) { bottom: -115px; top: auto; }
    .xinls_part4 ul { padding: 20px 0; }
        .xinls_part4 ul li { width: 45.5vw; margin: 3vw 0 0 3vw; height: 360px; padding: 3vw; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
    .xinls_part4 { padding: 50px 0 20px 0; }
    .xinls_part3 ul li p { line-height: 20px; font-size: 14px; }
    .xinls_part1 ul li:nth-child(1) img, .xinls_part1 ul li:nth-child(2) img { width: 15px; right: -15px; }
    .xinls_part1 ul li:nth-child(3) img, .xinls_part1 ul li:nth-child(4) img { width: 15px; left: -15px; }
    .xinls_part3 { position: relative; margin: 160px auto; max-width: 1200px; }
        .xinls_part3 ul { position: absolute; width: 94%; height: 100%; left: 3vw; top: 0; }
}
