.sy_jjfa { display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; justify-content: space-between; } .jjfa { width: 100%; } .jjfa_list { width: calc(100% / 5); float: left; border-top: rgba(255, 255, 255, .2) 1px solid; border-left: rgba(255, 255, 255, .2) 1px solid; height: 100vh; cursor: pointer; max-height:1000px; } .jjfa_list01::after{ content: ""; position: absolute; width: 20%; height: 400px; left: 0; bottom: 0; background-image1: linear-gradient(transparent,#0000009c); z-index: -1; opacity: 0; } .jjfa_list02::after{ content: ""; position: absolute; width: 20%; height: 400px; left: 20%; bottom: 0; background-image1: linear-gradient(transparent,#0000009c); z-index: -1; opacity: 0; } .jjfa_list01:hover::after{ opacity: 1; } .jjfa_list01:hover .jjfa_tb img{ background: rgba(255,255,255,0.8); border:0; filter: none; opacity: 1; } .jjfa_list02:hover::after{ opacity: 1; } .jjfa_list02:hover .jjfa_tb img{ background: rgba(255,255,255,0.8); border:0; filter: none; opacity: 1; } .jjfa_list03::after{ content: ""; position: absolute; width: 20%; height: 400px; left: 40%; bottom: 0; background-image1: linear-gradient(transparent,#0000009c); z-index: -1; opacity: 0; } .jjfa_list03:hover::after{ opacity: 1; } .jjfa_list03:hover .jjfa_tb img{ background:rgba(255,255,255,0.8); border:0; filter: none; opacity: 1; } .jjfa_list04::after{ content: ""; position: absolute; width: 20%; height: 400px; left: 60%; bottom: 0; background-image1: linear-gradient(transparent,#0000009c); z-index: -1; opacity: 0; } .jjfa_list04:hover::after{ opacity: 1; } .jjfa_list04:hover .jjfa_tb img{ background: rgba(255,255,255,0.8); border:0; filter: none; opacity: 1; } .jjfa_list05::after{ content: ""; position: absolute; width: 80%; height: 400px; left: 80%; bottom: 0; background-image1: linear-gradient(transparent,#0a2b5e85); z-index: -1; opacity: 0; } .jjfa_list05:hover::after{ opacity: 1; } .jjfa_list05:hover .jjfa_tb img{ background: rgba(255,255,255,0.8); border:0; filter: none; opacity: 1; } .jjfa_list02 { border-right: 0; } .jjfa_list03 { border-bottom: rgba(255, 255, 255, .2) 1px solid; } .jjfa_list04 { border-bottom: rgba(255, 255, 255, .2) 1px solid; border-right: 0; } .jjfa_nr { width: 100%; float: left; } .jjfa_q01 { width: 100%; float: left; margin-top: 140%; position: relative; transition: 0.5s; } .jjfa_list01:hover .jjfa_q01{ margin-top:90%; transition: 0.5s; } .jjfa_list01:hover .jjfa_title{ opacity: 1; margin-top: 110px; } .jjfa_list01:hover .jjfa_subtitle{ opacity: 1; } .jjfa_list01:hover hr{ top: 255px !important; } .jjfa_list02:hover .jjfa_q01{ margin-top:90%; transition: 0.5s; } .jjfa_list02:hover .jjfa_title{ opacity: 1; margin-top: 110px; } .jjfa_list02:hover .jjfa_subtitle{ opacity: 1; } .jjfa_list02:hover hr{ top: 255px !important; } .jjfa_list03:hover .jjfa_q01{ margin-top:90%; transition: 0.5s; } .jjfa_list03:hover .jjfa_title{ opacity: 1; margin-top: 110px; } .jjfa_list03:hover hr{ top: 255px !important; } .jjfa_list03:hover .jjfa_subtitle{ opacity: 1; } .jjfa_list04:hover .jjfa_q01{ margin-top:90%; transition: 0.5s; } .jjfa_list04:hover .jjfa_title{ opacity: 1; margin-top: 110px; } .jjfa_list04:hover .jjfa_subtitle{ opacity: 1; } .jjfa_list04:hover hr{ top: 255px !important; } .jjfa_list05:hover .jjfa_q01{ margin-top:90%; transition: 0.5s; } .jjfa_list05:hover .jjfa_title{ opacity: 1; margin-top: 110px; } .jjfa_list05:hover .jjfa_subtitle{ opacity: 1; } .jjfa_list05:hover hr{ top: 255px !important; } .jjfa_list01:hover .jjfa_niu{ opacity: 1; } .jjfa_list02:hover .jjfa_niu{ opacity: 1; } .jjfa_list03:hover .jjfa_niu{ opacity: 1; } .jjfa_list04:hover .jjfa_niu{ opacity: 1; } .jjfa_list05:hover .jjfa_niu{ opacity: 1; } .jjfa_title { width: 100%; float: left; font-size: 26px; color: #fff; line-height: 4rem; margin-top: 50px; font-weight: bold; padding-left: 2rem; opacity: 0.5; } .jjfa_subtitle{ width: 90%; float: left; font-size: 16px; color: #ffffff; padding-left: 2rem; margin-top: 20px; opacity: 0.5; text-align: justify !important; } .jjfa_niu{ width1: 100%; float: left; font-size: 14px; color: rgba(0,66,153,1); padding: 0 30px; margin-top: 10px; opacity: 0; background: rgba(255,255,255,0.85); margin-left: 31px; line-height: 3; } .jjfa_tb { width: 100%; text-align: center; float: left; margin-left1: 35px; } .jjfa_bq { position: relative; width: 100%; float: left; } .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: 16px; 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: 8%; margin-bottom: 8%; max-width: 500px; width: 50%; padding-top: 80px; padding-left: 20px; } .jjfa_y_title { width: 100%; font-size: 36px; color: #fff; line-height: 50px; } .jjfa_y_sum { width: 100%; font-size: 16px; color: rgba(255, 255, 255, .6); line-height: 28px; margin: 10px 0 0 0; } .jjfa_y_more { color: #fff; width: 100%; float: left; margin-top: 20px; } .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_jjfa::after{ content: ''; background: #0a2b5e61; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: .7; z-index: -1; } .sy_jjfa:hover::after{ content: ''; background: #0a2b5e61; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0.3; z-index: -1; } .sy_bg .jjfa_bg0 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023122510105925857/cms/image/2f400bd4-9c0a-4da2-8a9b-91d572c33045.png) no-repeat center; background-attachment1: fixed; z-index: -3; } body[style="overflow: hidden;"] .sy_bg .jjfa_bg0 { background-attachment: inherit; } .jjfa_bg1 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023122510105925857/cms/image/a8cd79c8-ac72-4180-a10c-6cb1f547b6a8.png) no-repeat center; background-attachment1: fixed; opacity: 0; } .jjfa_bg2 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023122510105925857/cms/image/26d3ca89-9fd4-4c20-a8a7-abb8f0432f53.png) no-repeat center; background-attachment1: fixed; opacity: 0; } .jjfa_bg3 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023122510105925857/cms/image/3618e1e1-55ef-4928-a6f7-21a029bd9351.png) no-repeat center; background-attachment1: fixed; opacity: 0; } .jjfa_bg4 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023122510105925857/cms/image/731bb2fa-ba32-49a4-849d-08f41429bdd6.png) no-repeat center; background-attachment1: fixed; opacity: 0; } .jjfa_bg5 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023122510105925857/cms/image/8c4481eb-da61-42c1-a0d8-ecb38178bed0.png) no-repeat center; background-attachment1: fixed; opacity: 0; } .sy_bg>div.a { opacity: 1; } .jjfa_list01:hover .sy_bg::after{ opacity: 0;} .jjfa_list01:hover .niu { opacity: 1; } .jjfa_list02:hover .niu { opacity: 1; } .jjfa_list03:hover .niu { opacity: 1; } .jjfa_list04:hover .niu { opacity: 1; } .jjfa_list05:hover .niu { opacity: 1; } .jjfa_tb img{ border: 2px solid #fff; border-radius: 100px; padding: 12px; width: 95px; filter: brightness(0) invert(100%); transition: auto; opacity: 0.5; } @media only screen and (max-width:768px) { .jjfa_list01:hover .jjfa_q01{ margin-top: 0; } .jjfa_list01:hover .jjfa_title{ margin-top: 0; } .jjfa_list01:hover hr{ top: 92px !important; } .jjfa_list02:hover .jjfa_q01{ margin-top: 0; } .jjfa_list02:hover .jjfa_title{ margin-top: 0; } .jjfa_list02:hover hr{ top: 92px !important; } .jjfa_list03:hover .jjfa_q01{ margin-top: 0; } .jjfa_list03:hover .jjfa_title{ margin-top: 0; } .jjfa_list03:hover hr{ top: 92px !important; } .jjfa_list04:hover .jjfa_q01{ margin-top: 0; } .jjfa_list04:hover .jjfa_title{ margin-top: 0; } .jjfa_list04:hover hr{ top: 92px !important; } .jjfa_list05:hover .jjfa_q01{ margin-top: 0; } .jjfa_list05:hover .jjfa_title{ margin-top: 0; } .jjfa_list05:hover hr{ top: 92px !important; } .jjfa_niu { margin-left: 22px; display:none; } .jjfa_y { margin-left: 0; width: 100%; padding: 0; } .jjfa_tb img{ border: 2px solid #fff; border-radius: 100px; padding: 2px; width: 50px; filter: brightness(0) invert(100%); transition: auto; opacity: 0.5; } .sy_jjfa { margin-top: 0px; display: flex; flex-wrap: wrap-reverse; } .jjfa { width: 100%; float: left; margin-top: 0; margin-left: 0; } .jjfa_y_sum { padding-right: 20px; font-size: 15px; line-height: 1.5; margin: 0; } .jjfa_list { height: 200px; width:100%; } .jjfa_q01{ margin-top:0; } .jjfa_q02 { height: 240px; } .jjfa_title { margin-top: 10px; font-size: 14px; padding-left: 20px; padding-right: 20px; line-height: 2; } .jjfa_subtitle{ padding-left:20px; font-size: 12px; } .jjfa_tb { padding: 20px 0 0 20px; text-align: left; } .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; } }