.responsibility_body { padding: 80px 0 0; /* padding: 80px 186px 0; */ } .responsibility_body_top { width: 100%; /* display: flex; */ } .responsibility_body_top_1 { width: 100%; } .responsibility_body_top_1 img { height: 410px; width: 100%; } .responsibility_body_top_1 { position: relative; } .responsibility_1_top { padding: 0 186px; } .responsibility_body_top_1_text { position: absolute; /* left: 10%; */ top: 50%; transform: translate(0px, -50%); width: 42%; margin: 9px 0px 0 50px; } .responsibility_body_top_1_text h5 { font-size: 24px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; height: 26px; width: 427px; max-width: 100%; overflow: hidden; margin-right: 20px; } .responsibility_body_top_1_text p { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 24px; margin-top: 36px; max-width: 543px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: scroll; } .responsibility_body_top_2 { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .responsibility_body_top_2 li { width: 31%; margin: 80px 0 0 0; background: #F7F7F7; transition: all 0.4s ease 0s; } .responsibility_b_li { padding: 29px; text-align: center; } .responsibility_body_top_2 img { width: 100%; } .responsibility_b_li p { /* height: 23px; */ font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #000000; margin-bottom: 23px; } .responsibility_b_li span { display: block; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; /* line-height: 32px; */ } .in-protu { transition: all 0.4s ease 0s; } /*可持续的无限可能*/ .responsibility_body_f_b { width: 100%; } .responsibility_body_f_b_ul, .m_list_respon_all { width: 100%; display: flex; flex-wrap: wrap; } .m_list_respon { display: none; } .responsibility_body_f_b_all { /*width: 33.33% !important;*/ height: auto; /* width: 640px !important; height: 600px !important; */ transition: all 0.4s ease 0s; } .responsibility_body_f_1 { position: relative; width: 100%; height: 100%; } .responsibility_body_f_1 img { width: 100%; height: 100%; } .responsibility_body_f_1_text { position: absolute; top: 50%; /* left: 50%; */ font-size: 36px; font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF; line-height: 24px; width: 100%; text-align: center; } .responsibility_zhe { display: none; background-image: url('../images/responsibility/zhe.png'); background-repeat: no-repeat; background-size: 100% 100%; /* width: 640px; height: 600px; */ width: 100%; height: 100%; position: absolute; z-index: 9; bottom: 0; left: 0; -webkit-transition: all 0.7s; transition: all 0.4s ease 0s; overflow: hidden; } .responsibility_zhe_t { width: 100%; position: absolute; top: 59%; left: 50%; transform: translate(-50%,-50%); /* right: 50%; */ font-family: Microsoft YaHei; color: #FFFFFF; line-height: 24px; padding: 0 83px; text-align: center; } .responsibility_zhe_t h5 { font-size: 30px; font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF; line-height: 24px; /*line-height: 43px;*/ } .responsibility_zhe_t p { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 24px; text-align: center; margin: 51px 0 34px; } .responsibility_zhe_t img { width: 73px; height: 73px; } .responsibility_body_f_b_all:hover .responsibility_zhe { display: block; } .responsibility_body_f_b_all:hover .responsibility_body_f_1_text { display: none; } .r_next { position: absolute; width: 100px; /* background: red; */ right: 0; top: 11%; margin-right: 260px; } .r_next .swiper-button-next { background-image: url(../images/responsibility/j_r.png); background-repeat: no-repeat; background-size: 100% 100%; width: 40px; height: 40px; margin-right: -22px; } .r_next .swiper-button-prev { background-image: url(../images/responsibility/j_l.png); background-repeat: no-repeat; background-size: 100% 100%; width: 40px; height: 40px; } .r_next .swiper-button-next:after, .r_next .swiper-rtl .swiper-button-prev:after { content: '' !important; } .r_next .swiper-button-prev:after, .r_next .swiper-rtl .swiper-button-next:after { content: '' !important; } /* .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 1 !important; } */ .footer { margin-top: 0; } .top_1_m { display: none; } .f1_m { display: none; } /* .responsibility_body_f_b_all img { width: 100%; } */ @media (max-width: 768px) { .responsibility_body { padding: 40px 0 0; } .top_1_m { display: block; } .top_1_pc { display: none; } .responsibility_body_top_1 img { height: auto; } .responsibility_body_top_1_text { width: 100%; padding: 30px 20px 0 20px; margin: 0; top: 0; transform: translate(0px, 0px); } .responsibility_body_all { width: 90%; } .responsibility_body_top_1_text h5 { width: 100%; height: auto; line-height: 48px; font-size: 19px; } .responsibility_body_top_1_text p { margin-top: 0; font-size: 12px; height: 150px; overflow-y: scroll; } .responsibility_body_top_2 { display: block; width: 90%; margin: 0 auto; } .responsibility_body_top_2 li { width: 100%; margin: 30px 0 0 0; } .responsibility_b_li { padding: 20px; } .responsibility_b_li p { margin-bottom: 12px; } .responsibility_b_li span { font-size: 12px; } .fwl-list { margin: 25px auto; } .fwl-list li { width: 90%; margin: 0 auto 20px; padding-bottom: 25px; } .ovfh { display: block; } .fwl-tuk, .fwl-link { width: 100%; } .fwl-link { width: 90%; margin: 0 auto; float: none; padding: 12.5px 0 0; } .fwl-link h5 { font-size: 19px; line-height: normal; } .fwl-link_info { margin-top: 14.5px; } .fwl-link p { font-size: 13px; max-width: 100%; width: 100%; line-height: 26px; } .responsibility_body_f_title { padding: 17px 17px 24px; font-size: 21px; } .r_next { margin-right: 1%; top: 3.5%; } .r_next .swiper-button-next, .r_next .swiper-button-prev { width: 30px; height: 30px; } .r_next .swiper-button-next { margin-right: 0px; } .r_next .swiper-button-prev { margin-left: 3px; } .responsibility_body_f_b_all { width: 100% !important; height: auto !important; } .responsibility_body_f_1_text { top: auto; bottom: 11%; text-align: left; padding-left: 25px; font-size: 18px; } .responsibility_body_f_b_all:hover .responsibility_zhe { display: none; } .responsibility_body_f_b_all:hover .responsibility_body_f_1_text { display: block; } .f1_pc { display: none; } .f1_m { display: block; } .pc_list_respon { display: none; } .m_list_respon { display: block; } .m_list_respon .responsibility_body_f_1 { height: auto; } .responsibility_1_top { padding: 0; } .responsibility_body_c { margin-top: 0; } } /* @media (min-width: 1200px) { .fwl-list li { min-height: 500px; } } */ @media(min-width:1024px){ .pc_list_respon .r_next .swiper-button-next:hover{ background-image: url(../images/responsibility/j_r_a.png); } .pc_list_respon .r_next .swiper-button-prev:hover{ background-image: url(../images/responsibility/j_l_a.png); } } @media(min-width:1401px)and (max-width:1650px){ .responsibility_zhe_t h5{ font-size: 30px; line-height: 35px; } } @media(min-width:1024px)and (max-width:1400px){ .responsibility_zhe_t h5{ font-size: 26px; line-height: 30px; } } @media (min-width: 1024px)and (max-width:1280px) { .responsibility_body_f_title { padding: 2% 10%; } .r_next { right: 10% !important; top: 6% !important; margin-right: 0px !important; } .responsibility_body_f_b_all { height: auto !important; /* width: 423px !important; */ } .responsibility_body_f_1_text { font-size: 27px; } .responsibility_zhe_t h5 { font-size: 27px; } .responsibility_zhe_t p { font-size: 13px; margin: 3% 0 2%; } .responsibility_zhe_t img { width: 50px; height: 50px; } }