/* 源美网络 www.szymweb.com *//* 全屏图 */ .development_top_img{ overflow:hidden;position:relative; background-size:100% 100% !important;} .development_top_img img{ float:left; width:100%;} /* 可持续发展 */ .development1_con{ overflow:hidden; width:100%; background:url(../images/development1_c_t_img6.jpg) center top no-repeat; margin-bottom:30px; background-size:100% 100%; position:relative; padding-bottom:100px} .development1_top{ position:absolute; right:10%; top:13%; width:300px; height:150px; background:url(../images/development1_c_t_img.png) center no-repeat; background-size:100% 100%; z-index:1} .development1_left{ position:absolute; width:900px; height:900px; left:0; top:0;} .development1_left .eve_v100{ position:relative; float:left; width:100%; height:100%; margin:-100px 0 0 -400px; background:url(../images/development1_c_t_img5.png) center no-repeat; background-size:cover;opacity:0.5; animation:rotate 32s linear infinite;} .development1_left .eve_vt{ position:absolute; width:100%; height:100%; left:0; top:0; background:url(../images/development1_c_t_img5_t.png) left top no-repeat; background-size:auto; z-index:1; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .development1_list{ float:left; position:relative;} .development1_list1{ width:55%; z-index:1; padding-bottom:200px; background:url(../images/development1_c_t_img3.png) 75% 180px no-repeat; background-size:800px 450px; padding:10% 20% 10% 25%;} .development1_list1 .development1_list_c{ float:left; width:40%; padding-right:60%;} .development1_list1 .development1_list_c p{ float:left; width:100%; text-align:center;} .development1_list1 .development1_list_c p img{ display:inline-table; vertical-align:middle; height:100px;} .development1_list1 .development1_list_c span{ float:left; width:100%; font-size:18px; line-height:32px; margin-top:20px; text-align:left; color:#E6E0D4;} .development1_list2{ width:55%; z-index:1; padding-bottom:200px; background:url(../images/development1_c_t_img4.png) 25% 0 no-repeat; background-size:700px 500px; padding:0 20% 10% 25%; margin-top:-60px;} .development1_list2 .development1_list_c{ float:left; width:50%; padding-left:50%; padding-top:30px;} .development1_list2 .development1_list_c h3{ float:left; width:100%; font-size:70px; color:#C6E58C; line-height:80px; font-weight:bold} .development1_list2 .development1_list_c span{ float:left; width:100%; font-size:18px; line-height:32px; margin-top:20px; text-align:left; color:#E6E0D4;} .development1_list2 .development1_list_c span i{ font-size:18px; line-height:32px; color:#E6E0D4;} /* 社区共建 */ .development2{ overflow:hidden} .development2 .development2_img_c{ width:100%; height:100vh; position:absolute; left:0; top:0} .development2 .development2_img_c li{ position:absolute; /*animation-iteration-count: 100;animation-duration:5s;*/} .development2 .development2_img_c li img{ float:left; width:100%; } .development2 .development2_img_c li.img_pos_1{ width:10%; top:35%; left:50%; z-index:0;} .development2 .development2_img_c li.img_pos_2{ width:22%; top:5%; left:42%; z-index:8; animation:grow_top1 5s infinite;} .development2 .development2_img_c li.img_pos_3{ width:15%; top:37%; left:30%; z-index:7; animation:grow_top2 7s infinite;} .development2 .development2_img_c li.img_pos_4{ width:20%; bottom:15%; left:27%; z-index:6; animation:grow_top3 6s infinite;} .development2 .development2_img_c li.img_pos_5{ width:15%; bottom:24%; left:48%; z-index:5; animation:grow_top4 6.5s infinite;} .development2 .development2_img_c li.img_pos_6{ width:16%; top:36%; right:20%; z-index:4; animation:grow_top5 7.2s infinite;} .development2 .development2_img_c li.img_pos_7{ width:19%; bottom:12%; left:67%; z-index:3; animation:grow_top6 7.5s infinite;} .development2 .development2_img_c li.img_pos_8{ width:21%; top:15%; left:17%; z-index:2; animation:grow_top7 8.5s infinite;} .development2 .development2_img_c li.img_pos_9{ width:21%; top:10%; right:11%; z-index:1; animation:grow_top8 9s infinite;} .development2 .left_width2_list{ float:left; width:100%; margin-top:-150px;} .development2 .left_width2_list p{ float:left; width:100%; padding-bottom:30px;} .development2 .left_width2_list p img{ float:left;} .development2 .left_width2_list li{ float:left; width:100%; background:url(../images/development2_left_width2_list_ico.png) 8px repeat-y; padding-bottom:100px; display: grid; grid-template-columns: 1fr 1fr;} .development2 .left_width2_list li:nth-child(2) .left_width2_list_li_l{ background:url(../images/development2_left_width2_list_iconone.png) 8px top no-repeat;} .development2 .left_width2_list li .left_width2_list_li_l{ float:left; width:90%;} .development2 .left_width2_list li .left_width2_list_li_l h3{ float:left; width:95%; padding-left:5%; font-size:30px; font-weight:bold; color:#536B3F; height:60px; line-height:60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; margin-top:30px; background:url(../images/development2_left_width2_list_li_ico.png) left center no-repeat; background-size:18px;} .development2 .left_width2_list li .left_width2_list_li_l span{ float:left; width:95%; font-size:18px; color:#232323; line-height:32px; padding:20px 0 50px 5%; text-align:left;} .development2 .left_width2_list li .left_width2_list_li_l dd{ float:left; width:95%; padding-left:5%; font-size:12px; color:#536B3F; line-height:20px} .development2 .left_width2_list li .left_width2_list_li_r{ float:right; width:100%; height:100%; overflow:hidden; display:flex; text-justify:center; align-items:center;} .development2 .left_width2_list li .left_width2_list_li_r img{ float:left; width:100%; transition:all 3s;} .development2 .left_width2_list li:hover .left_width2_list_li_r img{ transform:scale(1.1, 1.1);} /*transform: translate(-50%, 0%) translate3d(-32.44%, 27.8057%, 0px) scale(0.4634, 0.4634); opacity: 0.4634;*/ @keyframes grow_top1 { 0% { transform: scale(1);opacity:0; top:44%; width:0%; left:55%; } 50% { /*transform: scale(1.2) translateY(-20%); opacity:0.8;*/ transform: scale(1) translateY(-20%); opacity:0.8; } 100% { /*transform: scale(1.2) translateY(-20%); opacity:0;*/ transform: scale(1) translateY(-20%); opacity:0; } } @keyframes grow_top2 { 0% { transform: scale(1);opacity:0; top:44%; width:0%; left:55%; } 50% { /*transform: scale(1.5) translateX(-50%);opacity:0.8;*/ transform: scale(1) translateX(-50%);opacity:0.8; } 100% { /*transform: scale(1.5) translateX(-50%);opacity:0;*/ transform: scale(1) translateX(-50%);opacity:0; } } @keyframes grow_top3 { 0% { transform: scale(1);opacity:0; bottom:60%; width:0%; left:55%; } 50% { /*transform: scale(1.2) translateY(-20%); opacity:0.8;*/ transform: scale(1) translateY(-20%); opacity:0.8; } 100% { /*transform: scale(1.2) translateY(-20%); opacity:0;*/ transform: scale(1) translateY(-20%); opacity:0; } } @keyframes grow_top4 { 0% { transform: scale(1);opacity:0; bottom:60%; width:0%; left:55%; } 50% { /*transform: scale(1.2) translateY(50%); opacity:0.8;*/ transform: scale(1) translateY(50%); opacity:0.8; } 100% { /*transform: scale(1.2) translateY(50%); opacity:0;*/ transform: scale(1) translateY(50%); opacity:0; } } @keyframes grow_top5 { 0% { transform: scale(1);opacity:0; top:41%; width:0%; right:46%; } 50% { /*transform: scale(1.5) translateX(50%); opacity:0.8;*/ transform: scale(1) translateX(50%); opacity:0.8; } 100% { /*transform: scale(1.5) translateX(50%); opacity:0;*/ transform: scale(1) translateX(50%); opacity:0; } } @keyframes grow_top6 { 0% { transform: scale(1);opacity:0; bottom:60%; width:0%; left:53%; } 50% { /*transform: scale(1.2) translateY(20%); opacity:0.8;*/ transform: scale(1) translateY(20%); opacity:0.8; } 100% { /*transform: scale(1.2) translateY(20%); opacity:0;*/ transform: scale(1) translateY(20%); opacity:0; } } @keyframes grow_top7 { 0% { transform: scale(1);opacity:0; top:40%; width:0%; left:58%; } 50% { /*transform: scale(1.3) translateX(20%); opacity:0.8;*/ transform: scale(1) translateX(20%); opacity:0.8; } 100% { /*transform: scale(1.3) translateX(20%); opacity:0;*/ transform: scale(1) translateX(20%); opacity:0; } } @keyframes grow_top8 { 0% { transform: scale(1);opacity:0; top:42%; width:0%; right:46%; } 50% { /*transform: scale(1.3) translateX(20%); opacity:0.8;*/ transform: scale(1) translateX(20%); opacity:0.8; } 100% { /*transform: scale(1.3) translateX(20%); opacity:0;*/ transform: scale(1) translateX(20%); opacity:0; } } @media screen and (max-width:1600px){ .development1_list1{background-size:700px 400px;} .development1_list2{background-size: 600px 450px;} .development1_left{ width:800px; height:800px;} .development1_left .eve_vt{ background-size:120% auto;} .development2 .left_width2_list li .left_width2_list_li_l span{ line-height:24px;} .development2 .left_width2_list{margin-top:-80px;} } @media screen and (max-width:1440px){ .development1 .development1_c img.deve_mo_img{ height:170px} .development2 .left_width2_list p img{ height:120px} .development1_list1{background-size:600px 350px;} .development1_list2{background-size: 550px 400px;} .development2 .left_width2_list li .left_width2_list_li_l span{ line-height:22px;} .development1_con{ padding-bottom:150px;} } @media screen and (max-width:1366px){ .development1_list1{background-size:550px 300px;} .development1_list2{background-size: 500px 350px;} .development1_con{ padding-bottom:150px;} .development1_list1 .development1_list_c p img{ height:70px;} .development1_list1 .development1_list_c span{ line-height:27px; font-size:15px;} .development1_top{ width:200px; height:100px;} .development1_list2 .development1_list_c h3{ font-size:40px; line-height:50px;} .development1_list2 .development1_list_c span{ font-size:15px; line-height:27px;} .development1_list2 .development1_list_c span i{ font-size:15px; line-height:27px;} .development1_list2 .development1_list_c{ padding-top:20px} .development1_left{ width:600px; height:600px;} .development1_left .eve_v100{margin: -70px 0 0 -280px;} .development1_con{ padding-bottom:30px;} .development1_left .eve_vt{background-size:auto 32px;} .development2 .left_width2_list li .left_width2_list_li_l h3{ height:40px; line-height:40px; font-size:20px; margin-top:10px;} .development2 .left_width2_list li .left_width2_list_li_l span{ font-size:15px; line-height:22px;padding: 10px 0 50px 5%;} .development2 .left_width2_list li{ padding-bottom:60px;} .development2 .left_width2_list p img{ height:90px} .development2 .left_width2_list{margin-top:0;} } /*@keyframes grow_top { 0% { transform: scale(0); opacity: 0; transform-origin: bottom; position: absolute; top: bottom; } 100% { transform: scale(1); opacity: 1; position: absolute; top: 0; } } @keyframes grow_left { 0% { transform: scale(0); opacity: 0; transform-origin: right; position: absolute; right: 0; } 100% { transform: scale(1); opacity: 1; position: absolute; right: 0; } } @keyframes grow_right { 0% { transform: scale(0); opacity: 0; transform-origin: left; position: absolute; right: 0; } 100% { transform: scale(1); opacity: 1; position: absolute; left: 0; } } @keyframes grow_bottom { 0% { transform: scale(0); opacity: 0; transform-origin: top; position: absolute; bottom: 0; } 100% { transform: scale(1); opacity: 1; position: absolute; bottom: 0; } } */ @media all and (max-width:768px), only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px), only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px), only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px), only screen and (min-device-pixel-ratio:2) and (max-width:1024px), only screen and (min-resolution:192dpi) and (max-width:1024px), only screen and (min-resolution:2dppx) and (max-width:1024px){ .development_top_img{ height:auto;background-attachment:inherit !important;} .development_top_img img{ height:auto} .development1_con{ background-size:350% 100%;} .development1_top{ width:150px; height:80px; right:5%; top:5%} .development1_list1 .development1_list_c{ width:96%; padding:0 2%;} .development1_list1{ width:96%; padding:350px 2% 10% 2%} .development1_left{ width:300px; height:300px;} .development1_left .eve_v100{margin:40px 0 0 -160px;} .development1_left .eve_vt{ display:none;} .development1_list1{background-size:300px 200px; background-position:70% 150px !important;} .development1_list2{ background-size:380px 280px; margin-top:0; width:96%; padding:0 2% 100px 2%} .development1_list2 .development1_list_c{ width:96%; padding:280px 2% 0 2%;} .development1_list2 .development1_list_c h3{ font-size:30px; line-height:40px} .development1{padding: 80px 0 100px 0;} .development1 .development1_c .development1_c_l{ width:100%;} .development1 .development1_c .development1_c_l img.deve_mo_img{ margin-top:-80px; height:150px;} .development1 .development1_c span{ font-size:16px; padding:30px 0;} .development1 .development1_c .development1_c_r{ width:100%; margin-top:40px;} .development1 .development1_c .development1_c_r img.deve_mo_img{ height:100px;} .development2 .development2_img_c{ height:100%;} .development2 .left_width2_list p img{ height:100px} .development2 .left_width2_list li{ display:block; grid-template-columns:none;} .development2 .left_width2_list li .left_width2_list_li_l{ width:100%;} .development2 .left_width2_list li .left_width2_list_li_l dd{ padding-left:0} .development2 .left_width2_list li{ background:none; padding-bottom:60px;} .development2 .left_width2_list li .left_width2_list_li_l h3{ margin-top:0; font-size:22px; height:40px; line-height:40px;} .development2 .left_width2_list li .left_width2_list_li_l span{ font-size:16px; width:100%; padding:10px 0 10px 0;} .development2 .left_width2_list li .left_width2_list_li_r{ width:100%;} }