.sy_jjfa { display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; justify-content: space-between; padding: 0px; margin: 0 auto; } .jjfa { width: 100%; margin-top: 0px; margin-bottom: 0%; max-height:700px; height:100vh; } .jjfa_list:hover .jjfa_title01{ font-size: 28px; font-weight: bold;} .jjfa_list { width: 25%; float: left; border-top: rgba(255, 255, 255, .2) 1px solid; border-left: rgba(255, 255, 255, .2) 1px solid; height: 100%; cursor: pointer; display: flex; align-items: flex-end; padding-bottom: 50px; } .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; width: 100%; } .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: 50px 0 0 30px; float: left; } .jjfa_bq { position: relative; width: 100%; float: left; } .jjfa_q02 { position: absolute; width: 100%; height: auto; bottom: 0px; left: 0; color: #fff; opacity: 0; transition: all .5s ease; } .jjfa_title01 { width: 100%; padding: 50px 0 0 30px; float: left; font-size: 24px; line-height: 36px;cursor: auto; } .jjfa_sum { width: 100%; padding: 0px 30px 0 30px; float: left; font-size: 14px; line-height: 24px; height: auto; overflow: hidden; margin-top: 10px; margin-bottom:10px;cursor: auto; } .jjfa_more { width: 100%; padding: 0px 0 0 30px; float: left; color: #fff; } .jjfa_bg { position: absolute; top: 0; left: 0; background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023042719513827258/cms/image/2a0f1a01-160a-4f64-a17a-f2d7f1194fab.jpg) no-repeat top center; width: 100%; height: 700px; z-index: -2; /* background-attachment: fixed; transition: all 1s ease;*/ } .jjfa_y { margin-top: 8%; margin-bottom: 8%; max-width: 500px; width: 50%; padding-top: 80px; padding-left: 60px; } .jjfa_y_title { width: 100%; font-size: 36px; color: #fff; line-height: 50px; } .jjfa_y_sum { width: 100%; font-size: 16px; color: #fff; line-height: 28px; margin: 10px 0 0 0; } .jjfa_y_more { color: #fff; width: 100%; float: left; margin-top: 20px; } .jjfa_list01:hover .jjfa_bg { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023042719513827258/cms/image/2a0f1a01-160a-4f64-a17a-f2d7f1194fab.jpg) no-repeat top center; z-index: -1; } .jjfa_list01:hover .jjfa_q01 { opacity: 0; } .jjfa_list02:hover .jjfa_q01 { opacity: 0; } .jjfa_list03:hover .jjfa_q01{ opacity: 0; } .jjfa_list04:hover .jjfa_q01 { opacity: 0; } .jjfa_list01:hover .jjfa_q02 { opacity: 1; } .jjfa_list02:hover .jjfa_bg { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023042719513827258/cms/image/eb8b87ac-2c57-4a2c-ad90-0fdb390324f6.jpg) no-repeat top center; z-index: -1; } .jjfa_list02:hover .jjfa_q02 { opacity: 1; } .jjfa_list03:hover .jjfa_bg { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023042719513827258/cms/image/290c056b-5863-45ff-8d4a-f95f4b7a04f2.jpg) no-repeat top center; z-index: -1; } .jjfa_list03:hover .jjfa_q02 { opacity: 1; } .jjfa_list04:hover .jjfa_bg { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023042719513827258/cms/image/0553f7eb-c79f-47ce-9bbc-65d43aa7901e.jpg) no-repeat top center; z-index: -1; } .jjfa_list04:hover .jjfa_q02 { opacity: 1; } @media only screen and (max-width:768px) { .jjfa_list01:hover .jjfa_q01 { opacity: 1; } .jjfa_list02:hover .jjfa_q01 { opacity: 1; } .jjfa_list03:hover .jjfa_q01{ opacity: 1; } .jjfa_list04:hover .jjfa_q01 { opacity: 1; } .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; height:100vh; max-height:240px; } .jjfa_y_sum { padding-right: 20px; } .jjfa_list { height: 50%; width:50%; display: flex; padding-bottom: 0px; align-items: center; } .jjfa_q02 { height: 149px; display:none; } .jjfa_title { margin-top: 10px; font-size: 16px; padding-left:20px; } .jjfa_tb { padding: 17px 0 0 30px; } .jjfa_tb img { max-width: 60%; } .jjfa_title01 { padding: 17px 0 0 20px; font-size: 20px; } .jjfa_sum { padding: 0px 0 0 20px; } .jjfa_more { padding: 0px 0 0 20px; } .jjfa_bg { position: absolute; height:100%; background-size:200%; } } }