.sy_jjfa { display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; justify-content: space-between; padding: 0 10px; max-width: 1620px; margin: 0 auto; } .jjfa { width: 60%; margin-top: 15%; margin-bottom: 16%; } .jjfa_list { width: 40%; float: left; border-top: rgba(255, 255, 255, .2) 1px solid; border-left: rgba(255, 255, 255, .2) 1px solid; height: 200px; 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; } .jjfa_title { width: 100%; float: left; font-size: 24px; color: #fff; padding-left: 30px; margin-top: 20px; } .jjfa_tb { width: 100%; padding: 40px 0 0 30px; float: left; } .jjfa_bq { position: relative; width: 100%; float: left; } .jjfa_q02 { position: absolute; width: 100%; height: 200px; top: 0; left: 0; background-image: linear-gradient(120deg, #F37335, rgba(240,130,0,1)); 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: 8%; margin-bottom: 8%; max-width: 650px; width: 40%; /* padding-top: 80px; */ /* padding-left: 20px; */ padding-top: 9%; } .jjfa_y_title { width: 100%; font-size: 48px; color: #fff; line-height: 50px; } .jjfa_y_sum { width: 100%; font-size: 16px; color: #fff; line-height: 28px; margin: 2% 0 6% 0; } .jjfa_y_more { color: #fff; width: 100%; float: left; margin-top: 20px; background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2022113013511161637/cms/image/9829b0c0-d08d-4f48-86b5-98c5df973dc7.png) no-repeat center right 20px #2c74bc; width: 160px; /* background: #ddd; */ border-radius: 30px; padding: 2% 25px; font-size: 15px; transition: 0.5s; } .jjfa_y_more:hover{ background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2022113013511161637/cms/image/9829b0c0-d08d-4f48-86b5-98c5df973dc7.png) no-repeat center right 20px #ED5B10; letter-spacing: 2px; } .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: 0; z-index: -1; } .sy_bg .jjfa_bg0 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023061516082735275/cms/image/14cf9b93-7104-490e-9902-347f1ef91e8b.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-image.thefastimg.com/portal-saas/new2023061516082735275/cms/image/14cf9b93-7104-490e-9902-347f1ef91e8b.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg2 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023061516082735275/cms/image/8bfca3ad-0c1c-43ea-ac34-de1b9837512f.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg3 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2022113013511161637/cms/image/a7428076-8dd0-4c09-809b-ef1de460e7f0.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_bg4 { background: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2022113013511161637/cms/image/5fdb8aa3-ef0b-4129-b7f2-c5328e5e0a2a.jpg) no-repeat center; background-attachment: fixed; opacity: 0; } .jjfa_y_small { color: #fff; opacity: 0.6; font-family: arial; font-size: 28px; } .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; padding: 0 25px; } .jjfa { width: 100%; float: left; margin-top: 0; margin-left: 0; margin-bottom: 12%; } .jjfa_y_sum { padding-right: 0px; font-size: 15px; line-height: 1.5; margin: 0; } .jjfa_y_more { color: #fff; width: 100%; float: left; margin-top: 20px; background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2022113013511161637/cms/image/9829b0c0-d08d-4f48-86b5-98c5df973dc7.png) no-repeat center right 20px #2c74bc; width: 160px; /* background: #ddd; */ border-radius: 30px; padding: 4% 25px; font-size: 15px; transition: 0.5s; } .jjfa_list { height: 150px; } .jjfa_q02 { height: 150px; } .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; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .jjfa_more { padding: 0px 0 0 20px; } .jjfa_bg { position: absolute; } .jjfa_y_title { font-size: 26px; } .jjfa_list { width: 50%; float: left; border-top: rgba(255, 255, 255, .2) 1px solid; border-left: rgba(255, 255, 255, .2) 1px solid; height: 150px; cursor: pointer; } }