.sy_jjfa { display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; padding: 0 15px; max-width: 1400px; margin: 0 auto; flex-direction: column; align-items: center; min-height: 805px; } .jjfa { width: 100%; max-width: 1450px; margin-top: 60px; margin-bottom: 80px; display: flex; position: absolute; bottom: 0; } .jjfa_list { width: 100%; cursor: pointer; } .jjfa_list02 { /* border-right: rgba(255, 255, 255, .2) 1px solid; */ } .jjfa_list03 { /* border-bottom: rgba(255, 255, 255, .2) 1px solid; */ } .jjfa_list04 { /* border-bottom: rgba(255, 255, 255, .2) 1px solid; */ /* border-right: rgba(255, 255, 255, .2) 1px solid; */ } .jjfa_nr { width: 100%; float: left; } .jjfa_q01 { width: 100%; float: left; display: flex; justify-content: center; flex-direction: column; } .jjfa_title { width: 100%; font-size: 16px; color: #fff; text-align: center; margin-top: 20px; } .jjfa_tb { width: 100%; display: flex; justify-content: center; min-height: 139px; } .jjfa_bq { position: relative; width: 100%; float: left; } .jjfa_q02 { position: absolute; width: 100%; height: 249px; top: 0; left: 0; background-image: linear-gradient(120deg, #0056b8, #36d8a6); color: #fff; opacity: 0; transition: all ease .3s; } .jjfa_title01 { width: 100%; padding: 50px 0 0 30px; float: left; font-size: 24px; line-height: 36px; } .jjfa_sum { width: 100%; padding: 0px 30px 0 30px; float: left; font-size: 14px; line-height: 24px; height: 48px; 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: 81px; margin-bottom: 8%; width: 80%; /* padding-top: 80px; */ padding-left: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; } .jjfa_y_title { width: 100%; font-size: 40px; color: #fff; line-height: 50px; } .jjfa_y_sum { width: 100%; font-size: 16px; color: rgb(255 255 255); line-height: 28px; margin: 10px 0 0 0; } .jjfa_y_more { color: #fff; width: 100%; float: left; margin-top: 20px; /* height: 58px; */ width: 100%; max-width: 200px; border: 1px solid #ffffff8c; margin: 50px auto; line-height: 50px; transition: 0.3s all; } .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(24 27 32); */ position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: .7; 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; } @media only screen and (max-width:768px) { .jjfa_y { margin-left: 0; width: 100%; padding: 0; } .sy_jjfa { margin-top: 0px; display: flex; flex-wrap: wrap-reverse; } .jjfa { width: 100%; /* float: left; */ margin-top: 0; margin-left: 0; margin-bottom: 12%; display: flex; flex-direction: row; flex-wrap: wrap; } .jjfa_y_sum { padding-right: 20px; font-size: 15px; line-height: 1.5; margin: 0; } .jjfa_list { /* height: 180px; */ width: 50%; } .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 20px 0 20px; font-size: 13px; line-height: 20px; height: auto; } .jjfa_more { padding: 0px 0 0 20px; } .jjfa_bg { position: absolute; } .jjfa_y_title { font-size: 26px; } } .jjfa_y_yingwen { color: #ff8722; font-size: 50px; text-transform: uppercase; font-weight: bold; font-family: Arial; } .jjfa_y_hengxian { display-radio: 1; border-top-width: 4px; border-top-color: rgba(204,204,204,1); border-top-style: solid; width: 50PX; margin: 20px auto; margin-right: auto; } .jjfa_tb img { margin: 0 auto; position: absolute; transition: 0.3s all; } .jjfa_tb img:nth-child(1) { } .jjfa_tb img:nth-child(2) { opacity: 0; } .jjfa_list:hover .jjfa_tb img:nth-child(1) { } .jjfa_list:hover .jjfa_tb img:nth-child(2) { opacity: 1; } .jjfa_y_more:hover { background: var(--main-color); border: 1px solid transparent; color: #fff; } .jjfa_quanquan { width: 100px; height: 100px; border: solid 1px #ffffff69; display: flex; justify-content: center; align-items: center; border-radius: 50px; transition: 0.3s all; } .jjfa_list:hover .jjfa_tb .jjfa_quanquan { background: var(--main-color); border: transparent; } .sy_bg .jjfa_bg0 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/9b916c02-2c9f-4c8a-b3da-f5193e406595.jpg) no-repeat center; background-attachment: fixed; z-index: -3; } body[style="overflow: hidden;"] .sy_bg .jjfa_bg0 { background-attachment: inherit; } .jjfa_bg1 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/0696f066-f8ff-4406-b17f-8577da648e65.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg2 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/659b3a37-c51b-4b90-bb0b-f5aac2890331.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg3 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/640f8f93-8338-46f3-afdc-d73a9937b8ba.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg4 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/20badb0e-3037-47cd-b6a6-cadc0e5b7bea.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg5 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/b736a4bf-ef83-4c36-a26b-9cfb30420257.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg6 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023011120483875275/cms/image/843536d2-548c-4baf-b15f-c64b3fe66d2b.jpg) no-repeat center; background-attachment: fixed; opacity: 0; }