.sy_jjfa { display: flex; flex-wrap: wrap; overflow: hidden; width: 94%; justify-content: space-between; padding: 0 0px; max-width: 1600px; margin: 0 auto; } .jjfa { width: 50%; margin-top: 8%; margin-bottom: 8%; } .jjfa_list { width: 32%; float: left; border: rgba(255, 255, 255, .2) 1px solid; height: 250px; cursor: pointer; margin: 5px; } .jjfa_list:hover{ border: rgba(255, 255, 255, 0) 1px solid;} .jjfa_list02 { } .jjfa_list04, .jjfa_list08{ border-right: rgba(255, 255, 255, .2) 1px solid; } .jjfa_nr { width: 100%; float: left; } .jjfa_q01 { width: 100%; float: left; } .jjfa_title { width: 100%; float: left; font-size: 21px; color: #fff; padding-left: 30px; margin-top: 20px; font-family: "a5764067-f30d-441e-9b16-ca6cf51a06d2"; } .jjfa_tb { width: 100%; padding: 50px 0 0 30px; float: left; } .jjfa_bq { position: relative; width: 100%; float: left; } .jjfa_q02 { position: absolute; width: 100%; height: 249px; top: 0; left: 0; background:rgba(46, 99, 191, 1); color: #fff; opacity: 0; transition: all ease .3s; } .jjfa_title01 { width: 100%; padding: 40px 0 0 30px; float: left; font-size: 21px; line-height: 36px;font-family: "a5764067-f30d-441e-9b16-ca6cf51a06d2"; } .jjfa_sum { width: 100%; padding: 0px 30px 0 30px; float: left; font-size: 14px; line-height: 24px; overflow: hidden; margin-top: 10px; opacity: .5; } .jjfa_more { width: 100%; padding: 0px 0 0 30px; float: left; color: #fff; margin-top: 15px; } .jjfa_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; transition: all ease .5s; } .jjfa_y { margin-top:0; margin-bottom: 8%; max-width: 600px; width: 50%; padding-top: 8%; padding-left: 0px; } .jjfa_y_title { line-height: normal; font_radio: 2; display-radio: 1; color:#FFF; font-size: 50px; font-family: "a5764067-f30d-441e-9b16-ca6cf51a06d2"; margin-top: -50PX; } .jjfa_y_sum { width: 100%; font-size: 20px; color: rgba(255, 255, 255); line-height: 28px; margin: 10px 0 0 0; } .jjfa_y_sum span{ display: block; width: 100%; font-size: 14px; color: rgba(255, 255, 255, .8); line-height: 20px; margin: 10px 0 0 0; max-width: 477px; word-break: break-word; } .jjfa_y_more { color: #fff; width: 100%; float: left; margin-top: 20px; } .jjfa_y_con{ margin-top:4%; max-width: 60%; } .jjfa_y_con h2{font-size:18px;color:#fff;line-height:1.8;} .jjfa_y_con a{ color: #fff; border: 1px solid #fff; padding: 15px 25px; margin-top: 71px; display: block; max-width: 200px; text-align: center; font-size: 16px; } .jjfa_y_con a:hover{background:#1854bb; border: 1px solid #1854bb;} .sy_bg>div { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -2; transition: all ease .3s; background-size: cover !important; } .sy_bg::after{ content: ''; background: rgb(0 0 0); position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: .3; z-index: -1; } .sy_bg>div.a { opacity: 1; } .jjfa_list01:hover .jjfa_q02 { opacity: 1; } .jjfa_list02:hover .jjfa_q02 { opacity: 1; } .jjfa_list03:hover .jjfa_q02 { opacity: 1; } .jjfa_list04:hover .jjfa_q02 { opacity: 1; } .jjfa_list05:hover .jjfa_q02 { opacity: 1; } .jjfa_list06:hover .jjfa_q02 { opacity: 1; } .jjfa_list07:hover .jjfa_q02 { opacity: 1; } .jjfa_list08:hover .jjfa_q02 { opacity: 1; } @media only screen and (max-width:768px) { .jjfa_y_con h2 { font-size: 13px; color: #fff; line-height: 1.8; display: none; }.jjfa_y_con a { color: #fff; border: 1px solid #fff; padding: 5px 8px; margin-top: 21px; display: block; max-width: 110px; text-align: center; font-size: 14px; } .jjfa_y { margin-left: 0; width: 100%; padding: 0; } .sy_jjfa { margin-top: 0px; display: flex; } .jjfa_list { width: 45%;border-right: rgba(255, 255, 255, .2) 1px solid; } .jjfa { width: 100%; float: left; margin-top: 0; margin-left: 0; margin-bottom: 12%; } .jjfa_y_sum { padding-right: 0; font-size: 15px; line-height: 1.8; margin: 20px 0px; } .jjfa_list { height: 180px; } .jjfa_q02 { height: 180px; } .jjfa_title { margin-top: 10px; font-size: 16px; padding-left: 20px; padding-right: 20px; } .jjfa_tb { padding: 20px 0 0 20px; } .jjfa_tb img { max-width: 40%; } .jjfa_title01 { padding: 25px 0 0 20px; font-size: 16px; line-height: 1; } .jjfa_sum { padding: 0px 6px 0 6px; font-size: 13px; line-height: 20px; height: auto; } .jjfa_more { padding: 0px 0 0 6px; } .jjfa_bg { position: absolute; } .jjfa_y_title { font-size: 26px; } }