﻿.navone:fabonedesnth-child(2):after { content: ''; display: block; width: 60px; height: 4px; background-color: #ff6a00; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); }
.topimg { height: 500px; width: 100%; object-fit: cover; }
.topbanner { height: 500px; width: 100%; background: url(/Images/jjfa/sjds1.jpg); background-size: auto 100%; background-position: center; }

.faa { width: 1200px; margin: 30px auto; }
.faatitle { text-align: center; height: 45px; line-height: 45px; font-size: 36px; font-weight: bold; }
.faades { text-align: center; line-height: 25px; font-size: 18px; margin-top: 15px; color: #999; }
.faabg { width: 1200px; height: 360px; position: relative; padding-top: 50px; }
.faaone { width: 215px; height: 280px; float: left; margin-right: 31px; border-radius: 10px; }
    .faaone:nth-child(5n) { margin-right: 0; }
.faaotitle { color: #fff; padding: 0 0px; text-align: center; font-size: 20px; font-weight: bold; transform: translateY(195px); position: relative; }
    .faaotitle:before { content: ""; display: block; background-color: #fff; width: 50px; height: 2px; position: absolute; left: 50%; transform: translateX(-50%); top: 40px; }
.faaodes { color: #fff; padding: 0 20px; line-height: 25px; transform: translateY(136px); position: relative; text-align: center; opacity: 0; }
.faimg1 { background-image: url(/Images/jjfa/sjds2.jpg); }
.faimg2 { background-image: url(/Images/jjfa/sjds3.jpg); }
.faimg3 { background-image: url(/Images/jjfa/sjds4.jpg); }
.faimg4 { background-image: url(/Images/jjfa/sjds5.jpg); }
.faimg5 { background-image: url(/Images/jjfa/sjds6.jpg); }
.faaone:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: translateY(-2px); }
    .faaone:hover .faaotitle { transform: translateY(100px); }
    .faaone:hover .faaodes { opacity: 1; }

.fab { background-image: url(/Images/jjfa/sjds7.jpg); background-position: center center; background-size: auto 100%; height: 688px; }
.fabtitle { text-align: center; line-height: 45px; font-size: 36px; font-weight: bold; color: #fff; height: 45px; padding-top: 60px; }
.fabdes { text-align: center; line-height: 25px; font-size: 18px; margin-top: 15px; color: #fff; }
.fabbg { width: 1200px; margin: 0px auto; position: relative; }
.fabone1 { color: #fff; text-align: right; width: 350px; position: absolute; left: 100px; top: 85px; }
.fabone2 { color: #fff; text-align: left; width: 350px; position: absolute; right: 100px; top: 85px; }
.fabone3 { color: #fff; text-align: right; width: 220px; position: absolute; left: 30px; top: 250px; }
.fabone4 { color: #fff; text-align: left; width: 220px; position: absolute; right: 30px; top: 250px; }
.fabonetitle { font-size: 20px; font-weight: bold; }
.fabonedes { line-height: 25px; padding-top: 5px; font-size: 16px; }

.fac { width: 1200px; margin: 50px auto 30px auto; }
.factitle { text-align: center; height: 45px; line-height: 45px; font-size: 36px; font-weight: bold; }
.facdes { text-align: center; line-height: 25px; font-size: 18px; margin-top: 15px; color: #999; }
.facbg { height: 380px; padding-top: 50px; }
.facone { float: left; width: 280px; text-align: center; height: 335px; border-radius: 10px; margin-right: 26px; padding: 45px 35px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    .facone:last-child { margin-right: 0px; }
    .facone:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: translateY(-2px); }
    .facone img { margin: 0 auto; }
.faconetitle { font-size: 20px; font-weight: bold; line-height: 50px; }
.faconedes { color: #999; font-size: 15px; line-height: 30px; text-align: justify; padding-top: 10px; }

.fad { background: #f4f5f9; }
.fadtitle { text-align: center; height: 45px; line-height: 45px; font-size: 36px; font-weight: bold; padding-top: 55px; }
.faddes { text-align: center; line-height: 25px; font-size: 18px; margin-top: 15px; color: #999; }
.fadbg { height: 460px; padding-top: 50px; width: 1200px; margin: 0 auto; }
.fadone { float: left; width: 374px; text-align: center; height: 120px; border-radius: 10px; margin-right: 26px; background-color: #fff; position: relative; margin-bottom: 25px; }
    .fadone:last-child { margin-right: 0px; }
    .fadone:hover { box-shadow: 0 0 10px rgba(0,0,0,0.3); transform: translateY(-2px); }
    .fadone img { margin: 0 auto; position: absolute; left: 20px; top: 23px; }
.fadonetitle { font-size: 20px; font-weight: bold; line-height: 40px; text-align: left; padding: 15px 0 0 105px; }
.fadonedes { color: #999; font-size: 15px; line-height: 22px; text-align: justify; padding: 0px 30px 0 105px; }

.faetitle { text-align: center; height: 45px; line-height: 45px; font-size: 36px; font-weight: bold; padding-top: 55px; }
.faedes { text-align: center; line-height: 25px; font-size: 18px; margin-top: 15px; color: #999; }
.faebg { height: 510px; padding-top: 50px; width: 1200px; margin: 0 auto; }
.faeone { float: left; width: 240px; text-align: center; border-radius: 10px; position: relative; margin-bottom: 30px; }
    .faeone:last-child { margin-right: 0px; }
    .faeone:hover { transform: translateY(-2px); }
    .faeone img { margin: 0 auto; }
.faeonetitle { font-size: 20px; font-weight: bold; line-height: 40px; text-align: center; padding: 10px 0 0 0; }
.faeonedes { color: #999; font-size: 15px; line-height: 22px; text-align: center; }



@media screen and (max-width:800px) {
    /*.topimg{height:50vw; width:100%; object-fit:cover;}*/
    .topbanner { height: 55vw; width: 100%; background-position: 25% center; }
    .faa { width: 100vw; padding: 0 3vw; box-sizing: border-box; margin: 0; }
    .faatitle, .fabtitle, .factitle, .fadtitle, .faetitle { font-size: 24px; padding: 0 2vw; }
    .tit_p { margin-top: 5px; }
    .faabg { width: 88vw; padding: 3vw; height: auto; }
    .faaone { float: none; margin: 2vw 0; width: 88vw; background-repeat: no-repeat; background-size: 100% auto; background-position: center center; }
    .faabg:after, .fac:after, .facbg:after, .fadbg:after, .faebg:after { content: ""; display: table; clear: both; }
    .faaone .faaotitle { transform: translateY(100px); }
    .faaone .faaodes { opacity: 1; }
    .faaone:hover { box-shadow: none; transform: translateY(0); }
    .fabtitle { padding-top: 30px; }
    .fabbg { width: 100vw; height: calc(100% - 75px); }
    .fabone1 { width: 40vw; left: 5vw; top: 5vw; text-shadow: 0 0 30px rgba(197,71,43,1); }
    .fabone2 { width: 40vw; right: 5vw; top: 5vw; text-shadow: 0 0 30px rgba(197,71,43,1); }
    .fabone3 { width: 38vw; left: 1vw; top: calc(5vw + 125px); text-shadow: 0 0 30px rgb(197,71,43),0 0 30px rgb(197,71,43); }
    .fabone4 { width: 38vw; right: 1vw; top: calc(5vw + 125px); text-shadow: 0 0 30px rgb(197,71,43),0 0 30px rgb(197,71,43); }
    .fac { width: 100vw; }
    .facbg { height: auto; padding: 2vw 3vw; }
    .facone { width: 43vw; padding: 5vw; margin: 2vw; }
    .faconetitle { line-height: 24px; }
    .fad { padding: 3vw; }
    .fadone { width: 92vw; float: none; margin: 2vw 1vw; }
    .fadbg { height: auto; padding-top: 2vw; }
    .fae { padding-top: 30px; }
    .faebg { width: 100vw; height: auto; }
    .faeone { width: 50vw; }
    .faades { margin-top: 0; }
    .fabonetitle { font-size: 18px; }
    .fabonedes { font-size: 13px; line-height: 20px; }
    .faddes { margin-top: 0; }
    .faeonetitle { font-size: 18px; }
    .faades, .faddes { font-size: 16px; }
    .faeonedes { color: #999; font-size: 15px; line-height: 22px; text-align: center; width: 40vw; margin: 0 auto; height: 50px; }
}
