:root { --arr-color1: #bed6a4; --arr-color2: #8bbf79; --arr-color3: #5ca244; --arr-color4: #399744; --arr-border-width: 120px; /* 濡傛灉right涓?锛屽垯鏁翠釜arr閮藉湪涓嬩竴涓猻tep鑼冨洿鍐 */ --arr-right: 110px; /* 绠ご鐨勭矖缁 */ --arr-left: 40px; --step-height: 7.5vw; --step-item-padding-left: 20px; --step-item-title-font-size: 1.875vw; --primary-color: rgba(48, 133, 58, 1); --swiper-pagination-color: rgba(48, 133, 58, 1); } @media only screen and (max-width: 833px) { :root { --arr-border-width: 80px; --arr-right: 60px; --arr-left: 4px; --step-item-title-font-size: 14px; --step-height: 40px; --step-item-padding-left: 20px; } } * { box-sizing: border-box; } .innovate-page1 .wrapper { max-width: 1300px; } .steps { height: var(--step-height); align-items: center; overflow: hidden; display: flex; } .steps .steps-item { position: relative; flex: 1; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-left: var(--step-item-padding-left); } .steps .steps-item-title { color: #fff; font-size: var(--step-item-title-font-size); font-weight: bold; font-style: italic; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18); position: relative; z-index: 5; letter-spacing: 2px; } .steps .steps-item:nth-child(1) { background-color: var(--arr-color1); padding: 0 calc(var(--step-item-padding-left) / 2); } .steps .steps-item:nth-child(2) { background-color: var(--arr-color2); } .steps .steps-item:nth-child(3) { background-color: var(--arr-color3); } .steps .steps-item:nth-child(4) { background-color: var(--arr-color4); } /* arrow */ .arrow { position: absolute; top: 50%; z-index: 1; margin-top: calc(-1 * var(--arr-border-width)); } .arrow span, .arrow::before, .arrow::after { position: absolute; top: 0; left: 0; width: 0; height: 0; border: 0 dashed transparent; overflow: hidden; } .arrow::before, .arrow::after { content: ""; } /* arrow-right */ .arr-r { right: var(--arr-right); } .arrow span, .arr-r::before, .arr-r::after { border-left-style: solid; border-width: var(--arr-border-width) 0 var(--arr-border-width) var(--arr-border-width); } .arr-r span { border-left-color: var(--arr-color2); left: calc(var(--arr-left) * 2); z-index: 1; } .arr-r::before { left: var(--arr-left); border-left-color: #fff; z-index: 2; } .arr-r::after { border-left-color: var(--arr-color1); z-index: 3; } .steps .steps-item:nth-child(1) .arr-r::after { border-left-color: var(--arr-color1); } .steps .steps-item:nth-child(2) .arr-r::after { border-left-color: var(--arr-color2); } .steps .steps-item:nth-child(3) .arr-r::after { border-left-color: var(--arr-color3); } .steps .steps-item:nth-child(1) .arr-r span { border-left-color: var(--arr-color2); } .steps .steps-item:nth-child(2) .arr-r span { border-left-color: var(--arr-color3); } .steps .steps-item:nth-child(3) .arr-r span { border-left-color: var(--arr-color4); } .innovate-page1 .content { background-image: url("../images/innovate/bg1.jpg"); background-repeat: no-repeat; background-position: 50% 0; background-size: 100% auto; padding-top: 42px; } .innovate-page1 .mod { padding: 90px 0; } .innovate-page1 .mod1 { padding: 50px 0; } .innovate-page1 .mod2 { background-image: url("../images/innovate/bg2.jpg"); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } .innovate-page1 .mod-hd { margin-bottom: 40px; } .innovate-page1 .mod-hd-title { font-size: 30px; color: #333333; } .innovate-page1 .mod-hd .num { margin-bottom: 14px; } .alt-list-wrap { position: relative; } .alt-list-wrap1 { width: 835px; height: 300px; } .alt-list-wrap2 { width: 737px; height: 546px; } .alt-list-wrap3 { width: 770px; height: 608px; } .alt-list-wrap .bg { width: 100%; position: relative; z-index: 1; } .alt-list { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; } .alt-list li { position: absolute; z-index: 5; cursor: pointer; } .a1t-dot { position: relative; display: block; width: 34px; height: 34px; background-color: #fff; border-radius: 50%; } .a1t-dot .num { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(48, 133, 58, 1); font-size: 24px; font-family: Arial, Helvetica, sans-serif; } .alt-list .active .a1t-dot, .alt-list li:hover .a1t-dot { animation: bordershow 3s infinite; background: rgba(48, 133, 58, 1); border: 7px solid rgba(48, 133, 58, 1); } .alt-list li:hover .a1t-dot .num, .alt-list .active .a1t-dot .num { color: #fff; } .alt-list li:hover .a1t-dot::before, .alt-list li:hover .a1t-dot::after, .alt-list .active .a1t-dot::before, .alt-list .active .a1t-dot::after { content: ""; display: block; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(185, 213, 188, 0.4); } .alt-list li:hover .a1t-dot::before, .alt-list .active .a1t-dot::before { animation: boderM 3s 0.75s infinite; } .alt-list li:hover .a1t-dot::after, .alt-list .active .a1t-dot::after { animation: boderM 3s infinite; } .a1t-txt { position: absolute; left: 50px; top: 50%; z-index: 4; transform: translateY(-50%); white-space: nowrap; padding: 0 30px; line-height: 42px; pointer-events: none; } .a1t-txt::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 100%; background: rgba(48, 133, 58, 0.9); border-radius: 30px; } .a1t-txt span { opacity: 0; } .a1t-txt .a1t-title { color: #fff; font-size: 20px; vertical-align: middle; } .alt-list li.active .a1t-txt, .alt-list li:hover .a1t-txt { pointer-events: all; } .alt-list li.active .a1t-txt::before, .alt-list li:hover .a1t-txt::before { width: 100%; transition: all 0.4s cubic-bezier(0.34, 0.44, 0.41, 1.12); } .alt-list li.active .a1t-txt span, .alt-list li:hover .a1t-txt span { opacity: 1; transition: all 0.36s 0.4s; } .alt-list-wrap1 .alt-li1 { left: 17.7%; top: 31%; } .alt-list-wrap1 .alt-li2 { left: 17.7%; bottom: 17%; } .alt-list-wrap1 .alt-li3 { left: 62%; bottom: 37%; } .alt-list-wrap1 .alt-li4 { right: 11%; bottom: 37%; } .alt-list-wrap2 .alt-li1 { left: 31.5%; top: 9%; } .alt-list-wrap2 .alt-li1-other { left: 68.5%; top: 36.6%; } .alt-list-wrap2 .alt-li2 { left: 43%; top: 17.8%; } .alt-list-wrap2 .alt-li3 { left: 44%; top: 41%; } .alt-list-wrap2 .alt-li4 { left: 12.5%; top: 16.2%; } .alt-list-wrap2 .alt-li5 { left: 41.8%; top: 68.5%; } .alt-list-wrap3 .alt-li1 { left: 75.7%; top: 76.3%; } .alt-list-wrap3 .alt-li2 { left: 75.6%; top: 58.4%; } .alt-list-wrap3 .alt-li3 { left: 48.6%; top: 66%; } .alt-list-wrap3 .alt-li4 { left: 30.2%; top: 66%; } .alt-list-wrap3 .alt-li5 { left: 21.8%; top: 66%; } .alt-list-wrap3 .alt-li6 { left: 12.6%; top: 66%; } .alt-list-wrap3 .alt-li7 { left: 12.7%; top: 19.6%; } .alt-list-wrap3 .alt-li8 { left: 27.3%; top: 30.2%; } .alt-list-wrap3 .alt-li9 { left: 47.8%; top: 21.4%; } .alt-list-wrap3 .alt-li10 { left: 71%; top: 27.4%; } .alt-list-wrap3 .alt-li11 { left: 88.3%; top: 31.4%; } @keyframes boderM { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0; } 20% { opacity: 1; } 75% { transform: translate(-50%, -50%) scale(2); opacity: 0; } 100% { opacity: 0; } } @keyframes bordershow { 50% { box-shadow: 0px 0px 10px 0 var(--primary-color); } } .box { width: 265px; height: 115px; background-color: #fff; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); position: relative; padding: 20px; box-sizing: border-box; position: absolute; right: -300px; bottom: 20px; } .box::after { content: ""; width: 0; height: 0; position: absolute; border-top: 0 solid transparent; border-right: 50px solid #fff; border-bottom: 30px solid transparent; border-left: 0 solid transparent; top: 40%; left: -30px; transform: rotate(-8deg); } .innovate-page1 .mod1 .mod-bd { display: flex; position: relative; justify-content: space-between; margin-left: -196px; margin-right: -65px; padding: 40px 0; } .innovate-page1 .mod1 .mod-bd .alt-list-wrap { flex-shrink: 0; } .innovate-page1 .mod1 .pic-area { position: relative; width: 374px; height: 323px; flex-shrink: 0; } .innovate-page1 .mod1 .pic { position: relative; width: 100%; height: 100%; z-index: 1; } .innovate-page1 .mod1 .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page1 .mod1 .pic-area::after { content: ""; position: absolute; width: 334px; height: 334px; border-radius: 50%; top: -30px; left: -66px; background: linear-gradient( 0deg, rgba(192, 216, 195, 0.4) 0, rgba(255, 255, 255, 0) 100% ); } .innovate-page1 .mod1 .txt1 { font-size: 24px; color: var(--primary-color); height: 300px; width: 300px; display: flex; align-items: center; justify-content: center; background-image: url("../images/innovate/txt-bg.png"); background-repeat: no-repeat; background-position: 50% 50%; } .innovate-page1 .mod2 .mod-hd-title { color: rgba(255, 255, 255, 1); } .innovate-page1 .mod2 .mod-hd { display: flex; align-items: center; } .innovate-page1 .mod2 .mod-hd-wrap { width: 376px; flex-shrink: 0; } .innovate-page1 .mod2 .mod-hd .info { color: rgba(255, 255, 255, 0.8); padding-left: 30px; position: relative; } .innovate-page1 .mod2 .mod-hd .info::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.8); } .innovate-page1 .mod3 .wrapper { display: flex; } .innovate-page1 .mod3 .wrapper .mod-hd { padding-right: 40px; } .innovate-page1 .mod3 .wrapper .info { position: relative; } .innovate-page1 .mod3 .wrapper .info::before { content: ""; position: absolute; width: 100%; height: 100%; left: -20%; bottom: -30%; border-radius: 30px; background: linear-gradient(45deg, rgb(223, 236, 225, 0.8), #fff 100%); } .innovate-page1 .mod3 .wrapper .info .info-txt { position: relative; } .innovate-page1 .mod2 .mod-bd { display: flex; justify-content: space-between; } .innovate-page1 .mod2 .alt-list-wrap::after { content: ""; position: absolute; width: 530px; height: 530px; border-radius: 50%; bottom: -60px; right: -20px; background: linear-gradient( 230deg, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0) 100% ); } .innovate-page1 .mod2 .mod-bd .pic { background: #fff; width: 476px; height: 306px; padding: 10px; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .innovate-page1 .mod2 .mod-bd .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page1 .mod2 .box { color: var(--primary-color); font-size: 24px; font-weight: bold; padding-left: 40px; padding-right: 40px; } .innovate-page1 .mod2 .box .p2 { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px; } .innovate-page1 .mod2 .box .p2 .img { margin-right: 10px; } @media only screen and (max-width: 919px) { .innovate-page1 .mod2 .mod-hd { display: flex; flex-wrap: wrap; align-items: last baseline; } .innovate-page1 .mod2 .mod-hd-wrap { width: 100%; } .innovate-page1 .mod2 .mod-hd .info { padding-left: 0; } .innovate-page1 .mod2 .mod-hd .info::after { display: none; } .innovate-page1 .mod2 .mod-bd { flex-wrap: wrap; } .innovate-page1 .mod2 .mod-bd .pic-area { width: 100%; margin-top: 30px; } .innovate-page1 .mod3 .wrapper { flex-wrap: wrap; } .innovate-page1 .mod3 .wrapper .mod-hd, .innovate-page1 .mod3 .wrapper .mod-bd { width: 100%; } } @media only screen and (max-width: 1299px) { .innovate-page1 .content { padding-left: 20px; padding-right: 20px; } /* .alt-list-wrap1 { width: calc(835px * 0.9); height: calc(300px * 0.9); } */ .innovate-page1 .alt-list-wrap2 { width: calc(737px * 0.9); height: calc(546px * 0.9); } .innovate-page1 .alt-list-wrap3 { width: calc(770px * 0.9); height: calc(608px * 0.9); } .innovate-page1 .mod1 .mod-bd { margin-left: 0; margin-right: 0; flex-direction: column; justify-content: center; align-items: center; } .innovate-page1 .mod1 .txt1 { background-image: url(../images/innovate/txt-bg-v.png); box-sizing: border-box; padding-bottom: 10px; } .innovate-page1 .mod1 .pic-area::after { width: calc(334px * 0.9); height: calc(334px * 0.9); } .innovate-page1 .mod2 .alt-list-wrap::after { width: calc(530px * 0.9); height: calc(530px * 0.9); } .innovate-page1 .mod2 .mod-bd .pic { width: calc(476px * 0.9); height: calc(306px * 0.9); } } @media only screen and (max-width: 1199px) { .innovate-page1 .alt-list-wrap2 { width: 590px; height: 436px; } .innovate-page1 .alt-list-wrap3 { width: 616px; height: 486px; } .innovate-page1 .mod2 .alt-list-wrap::after { width: 424px; height: 424px; } .innovate-page1 .mod2 .mod-bd .pic { width: calc(476px * 0.8); height: calc(306px * 0.8); } } @media only screen and (max-width: 1099px) { /* .alt-list-wrap1 { width: calc(835px * 0.7); height: calc(300px * 0.7); } */ .innovate-page1 .alt-list-wrap2 { width: calc(737px * 0.7); height: calc(546px * 0.7); } .innovate-page1 .alt-list-wrap3 { width: calc(770px * 0.7); height: calc(608px * 0.7); } .innovate-page1 .mod1 .pic-area::after { width: calc(334px * 0.7); height: calc(334px * 0.7); } .innovate-page1 .mod2 .alt-list-wrap::after { width: calc(530px * 0.7); height: calc(530px * 0.7); } .innovate-page1 .mod2 .mod-bd .pic { width: calc(476px * 0.7); height: calc(306px * 0.7); } } /* 鍥 妯″紡鍒涙柊 */ .h { color: var(--primary-color); } .module { padding: 90px 0; } .module .mod-hd-title { font-size: 36px; color: var(--primary-color); background-image: url("../images/innovate/hd-bg.png"); background-repeat: no-repeat; background-position: 0 0; padding-top: 20px; margin-top: -20px; padding-left: 25px; margin-left: -25px; } .wrapper { max-width: 1200px; } .innovate-page4 .content { background-image: url("../images/innovate/4/bg1.jpg"); background-repeat: no-repeat; background-position: 0 0; padding: 0; } .innovate-page4 .mod1 .wrapper { display: flex; } .innovate-page4 .mod1 .mod-bd { padding-left: 50px; flex-shrink: 0; width: 56%; box-sizing: border-box; } .innovate-page4 .mod1 .mod-bd img { width: 100%; } .innovate-page4 .mod1 .pic-area { position: relative; padding: 30px 30px 0 0; } .innovate-page4 .mod1 .pic-area::after { content: ""; position: absolute; top: 0; right: 0; width: calc(100% - 30px); height: 80%; background-color: #edf2ee; } .innovate-page4 .mod1 .pic { position: relative; z-index: 1; } @media only screen and (max-width: 833px) { .innovate-page4 .mod1 .wrapper { flex-wrap: wrap; } .innovate-page4 .mod1 .mod-hd { width: 100%; } .innovate-page4 .mod1 .mod-bd { width: 100%; padding-left: 30px; } } .innovate-page4 .mod2 { background-image: url("../images/innovate/4/bg2.jpg"); background-repeat: no-repeat; background-position: 0 50%; padding-top: 24px; } .innovate-page4 .mod2 .mod-wrap { background-image: url("../images/innovate/4/bg3.jpg"); background-repeat: no-repeat; background-position: 100% 50%; } .innovate-page4 .mod3 { background-image: url("../images/innovate/4/bg4.jpg"); background-repeat: no-repeat; background-position: 50% 0; background-size: 100% auto; padding-top: 230px; margin-top: -180px; } .innovate-page4 .mod2 .mod-hd, .innovate-page4 .mod3 .mod-hd { display: flex; align-items: center; } .innovate-page4 .mod2 .mod-hd-wrap, .innovate-page4 .mod3 .mod-hd-wrap { width: 210px; flex-shrink: 0; } .innovate-page4 .mod-ft { padding-top: 60px; } .mod-hd .info { font-size: 18px; color: #333333; line-height: 2; margin: 35px 0; } .circle-list { display: flex; justify-content: space-between; padding: 80px 45px 0; } @media only screen and (max-width: 1399px) { .circle-list { max-width: 70vw; margin: 0 auto; } } @media only screen and (max-width: 833px) { .circle-list { max-width: 100%; } } .circle-list .item { padding: 1.5vw 1.5vw 0; background-image: url("../images/innovate/half-circle.png"); background-repeat: no-repeat; background-position: 50% 0; background-size: 100% auto; } .circle-list .item2 { padding: 0 1.5vw 1.5vw; background-image: url("../images/innovate/half-circle-bottom.png"); background-position: 50% 4.8vw; } .circle-list .item .meta { width: 9.6vw; height: 9.6vw; border-radius: 50%; background: linear-gradient( 87deg, rgb(74, 131, 85, 0.2), rgba(255, 255, 255, 0.2) 100% ); font-size: 1.5vw; font-weight: bold; color: var(--primary-color); display: flex; align-items: center; justify-content: center; } .circle-list .divider { width: 1px; height: 15vw; margin: -1.5vw 0 0; transform: rotate(55deg); background: linear-gradient(0deg, rgb(74, 131, 85, 0.4), rgba(255, 255, 255, 0) 100%); } .circle-list .divider2 { transform: rotate(-55deg); } .divider::after, .divider::before { content: ""; position: absolute; width: 20px; height: 20px; background-image: url("../images/innovate/dot.png"); background-size: 8px 8px; background-repeat: no-repeat; background-position: 50% 50%; left: 50%; transform: translateX(-50%); } .divider::before { top: 12px; } .divider::after { bottom: -14px; } @media only screen and (max-width: 833px) { .innovate-page4 .mod2 .mod-hd, .innovate-page4 .mod3 .mod-hd { flex-wrap: wrap; } .innovate-page4 .mod2 .mod-hd-wrap { width: 100%; } } .flex { display: flex; } .flex .left-col { width: 50%; box-sizing: border-box; padding-right: 10px; } .flex .right-col { width: 50%; box-sizing: border-box; padding-left: 10px; } .flex .right-col .pic { height: 23vw; } .flex .right-col .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } @media only screen and (max-width: 833px) { .circle-list { padding: 20px 20px 0; } .flex { flex-wrap: wrap; } .flex .left-col { width: 100%; padding-right: 0; margin-bottom: 30px; } .flex .right-col { width: 100%; padding-left: 0; } .flex .right-col .pic { height: 240px; } .module { padding: 40px 0; } .mod-hd .info { font-size: 14px; margin: 15px 0; } .module .mod-hd-title { font-size: 24px; } .innovate-page4 .mod1 { padding-top: 50px; } .innovate-page4 .mod3 { margin-top: 0; padding-top: 30px; } } .innovate-page3 .module { padding-top: 58px; } .focus { display: flex; align-items: center; } .focus-center { flex: 1; height: 400px; background-image: url("../images/innovate/3/line-l.png"); background-repeat: no-repeat; background-position: 0 50%; padding-right: 22px; } .focus-center-inner { height: 100%; background-image: url("../images/innovate/3/line-r.png"); background-repeat: no-repeat; background-position: 100% 50%; display: flex; align-items: center; justify-content: center; } .s-list li { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 20px 0; } .s-list li .s-title { font-size: 36px; color: var(--primary-color); font-weight: bold; } .s-list li .s-desc { margin-top: 8px; font-size: 18px; color: #666; } .focus .statistic-item { width: 30%; } .statistic { position: relative; box-sizing: border-box; width: 254px; height: 254px; padding: 18px; border-radius: 50%; background: linear-gradient(45deg, #4a8355, #57a065); box-shadow: 1px 1px 10px rgb(74, 131, 85, 0.8); } .statistic::after, .statistic::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background-color: var(--primary-color); opacity: 0.1; } .statistic::after { top: -22px; left: 42px; } .statistic::before { bottom: -36px; left: 160px; } .statistic .extra { content: ""; position: absolute; width: 124px; height: 124px; border-radius: 50%; background-color: rgb(48, 133, 58, 0.2); } .left-area { display: flex; justify-content: flex-end; padding-right: 32px; } .right-area { padding-left: 10px; } .left-area .statistic .extra { left: -45px; bottom: -25px; } .right-area .statistic .extra { right: -45px; top: -25px; } .statistic-content { width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 1); position: relative; z-index: 1; } .statistic-content-value { font-size: 60px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; } .statistic-content-prefix, .statistic-content-suffix { font-size: 18px; margin-left: 8px; } @media only screen and (max-width: 1023px) { .focus-center { flex: 1; height: 260px; background-size: auto 100%; } .focus-center-inner { background-size: auto 100%; } .s-list li { } .s-list li .s-title { font-size: 18px; } .s-list li .s-desc { margin-top: 8px; font-size: 12px; } .focus .statistic-item { width: 30%; } .statistic { position: relative; box-sizing: border-box; width: 180px; height: 180px; padding: 10px; } .statistic::after, .statistic::before { width: 8px; height: 8px; } .statistic .extra { width: 40px; height: 40px; } .left-area { display: flex; justify-content: flex-end; padding-right: 32px; } .right-area { padding-left: 10px; } .statistic-content-value { font-size: 42px; } .statistic-content-prefix, .statistic-content-suffix { font-size: 14px; } } @media only screen and (max-width: 833px) { .left-area { display: none; } .right-area { display: none; } .focus { margin-top: 30px; padding: 0 15px; } .focus-center { padding: 0; } .s-list li .s-title { font-size: 32px; } .s-list li .s-desc { font-size: 14px; } } .innovate-page3 .mod1 .mod-bd { background-image: url("../images/innovate/3/bg1.png"); background-repeat: no-repeat; background-position: 50% 100%; padding-bottom: 100px; margin-bottom: 60px; } .index_solution_box { height: 50vh; margin-bottom: 50px; } @media only screen and (max-width: 1599px) { .innovate-page3 .mod1 .mod-bd { background-size: 100% auto; } } .innovate-page2 .mod1, .innovate-page2 .mod2, .innovate-page2 .mod3, .innovate-page2 .mod4, .innovate-page2 .mod6 { background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } .innovate-page2 .mod1 { background-image: url("../images/innovate/2/bg1.jpg"); } .innovate-page2 .mod2 { background-image: url("../images/innovate/2/bg2.jpg"); } .innovate-page2 .mod3 { background-image: url("../images/innovate/2/bg3.jpg"); } .innovate-page2 .mod4 { background-image: url("../images/innovate/2/bg4.jpg"); } .innovate-page2 .mod5 { background-repeat: no-repeat; background-position: 50% 0; background-image: url("../images/innovate/2/bg5.jpg"); } .innovate-page2 .mod6 { background-image: url("../images/innovate/2/bg6.jpg"); } .innovate-page2 .mod7 { background-repeat: no-repeat; background-position: 100% 100%; background-image: url("../images/innovate/2/bg7.jpg"); } .innovate-page2 .mod1 .pic { box-sizing: border-box; width: 100%; height: 150px; border: 3px solid #000; } .innovate-page2 .mod1 .mod-bd { padding: 60px 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 18px; color: #333333; line-height: 2; } .innovate-page2 .mod1 .mod-bd .left-col { width: 60%; box-sizing: border-box; } .innovate-page2 .mod1 .mod-bd .right-col { flex-shrink: 0; width: 40%; padding-left: 15px; } .innovate-page2 .mod1 .mod-bd ul { display: flex; margin: 0 -15px; } .innovate-page2 .mod1 .mod-bd ul li { box-sizing: border-box; width: 50%; padding: 15px; } .innovate-page2 .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page2 .swiper-wrap { position: relative; padding-bottom: 60px; } /* 绗簩灞 */ .innovate-page2 .mod2 .pic { width: 100%; height: 100%; } .innovate-page2 .mod2 .pic img { max-width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page2 .mod2 .mod-bd { padding: 60px 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 18px; color: #333333; line-height: 2; } .innovate-page2 .mod2 .mod-bd .left-col { width: 42%; box-sizing: border-box; } .innovate-page2 .mod2 .mod-bd .right-col { width: 58%; } .innovate-page2 .mod2 .mod-bd ul { display: flex; justify-content: center; } .innovate-page2 .mod2 .mod-bd ul li { box-sizing: border-box; width: 204px; height: 264px; margin: 0 16px; } .innovate-page2 .mod2 .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .tabs { display: flex; width: 100%; height: 360px; } .tabs-nav { width: 42%; } .tabs-content { width: 58%; } .tabs-nav-list { } .tabs-nav-list li { cursor: pointer; width: 223px; height: 60px; line-height: 60px; text-align: center; font-size: 18px; z-index: 1; color: #333; background-image: url("../images/innovate/2/tab-bg.png"); background-repeat: no-repeat; margin-bottom: 20px; } .tabs-nav-list .active { color: #30853a; background-image: url("../images/innovate/2/tab-active-bg.png"); } .tabs-content .tabs-tabpane { display: none; } .mySwiperKnow { height: 264px; } @media only screen and (max-width: 1199px) { .tabs-nav { width: 360px; } .tabs-content { width: calc(100% -360px); } } @media only screen and (max-width: 1023px) { .innovate-page2 .mod2 .mod-bd .left-col { width: 100%; } .innovate-page2 .mod2 .mod-bd .right-col { width: 100%; } } /* 绗笁灞 */ .innovate-page2 .mod3 .wrapper { display: flex; flex-wrap: wrap; } .innovate-page2 .mod3 .big-gallery-area { width: 34%; height: 570px; } .innovate-page2 .mySwiper2, .innovate-page2 .mySwiper2 .pic { width: 100%; height: 100%; } .innovate-page2 .mod3 .big-gallery-area img { width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page2 .mod3 .main-col { width: 66%; box-sizing: border-box; padding-left: 40px; display: flex; flex-direction: column; justify-content: space-between; } .innovate-page2 .mod3 .mod-hd { text-align: right; } .innovate-page2 .mod3 .mod-hd .mod-hd-title { display: inline-block; } .innovate-page2 .info { font-size: 18px; color: #333333; line-height: 2; } .innovate-page2 .mod3 .mod-bd { flex: 1; padding: 40px 0; font-size: 18px; color: #333333; line-height: 2; } .innovate-page2 .swiperThumbs { height: 220px; } .innovate-page2 .swiperThumbs .swiper-slide { cursor: pointer; } .innovate-page2 .swiperThumbs .pic { width: 100%; height: 100%; border: 2px solid #fff; transition: all 0.3s; } .innovate-page2 .swiperThumbs .swiper-slide:hover .pic { border-color: var(--primary-color); } .innovate-page2 .swiperThumbs .swiper-slide-thumb-active .pic { border-color: var(--primary-color); } .innovate-page2 .swiperThumbs .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } :root { --swiper-navigation-size: 44px; --swiper-navigation-color: #30853a; --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; } .innovate-page2 .mod3 .mod-ft { position: relative; } .innovate-page2 .mod3 .swiper-button-next, .innovate-page2 .mod3 .swiper-button-prev { position: absolute; top: -95px; width: 42px; height: 42px; border-radius: 50%; margin-top: 0; color: #fff; background-color: #30853a; } .innovate-page2 .mod3 .swiper-button-next.swiper-button-disabled, .innovate-page2 .mod3 .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .innovate-page2 .mod3 .swiper-button-prev { left: 0; right: auto; } .innovate-page2 .mod3 .swiper-button-next { right: auto; left: 56px; } .innovate-page2 .mod3 .swiper-button-next:after, .innovate-page2 .mod3 .swiper-button-prev:after { font-size: 20px; } .innovate-page2 .mod7 .mod-hd { margin-bottom: 20px; } .innovate-page2 .mod7 .row { display: flex; padding: 30px 0; height: 20vw; box-sizing: border-box; } .innovate-page2 .mod7 .row2 { justify-content: flex-end; } .innovate-page2 .mod7 .row .txt { font-size: 18px; color: #333333; line-height: 2; width: 42%; } .innovate-page2 .mod5 .mod-bd { padding: 40px 0; } .team-list { display: flex; flex-wrap: wrap; margin: 0 -12px; } .team-list li { width: 25%; box-sizing: border-box; padding: 0 12px; margin-bottom: 45px; } .team-list li .team-item { border-radius: 8px; height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgb(240, 252, 242)); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.06); transition: all 0.3s; } .team-title { color: #333333; font-size: 18px; text-align: center; transition: all 0.3s; line-height: 1.6; } .team-list .team-li2 .team-title { height: 54px; } .team-content { margin-bottom: 20px; } .team-content-value { color: var(--primary-color); font-size: 48px; font-weight: bold; transition: all 0.3s; } .team-content-suffix { margin-inline-start: 4px; font-size: 18px; color: #666; transition: all 0.3s; } .team-list li .team-item:hover { background: linear-gradient(90deg, #89bc53, #30853a); } .team-list li .team-item:hover .team-title, .team-list li .team-item:hover .team-content-value, .team-list li .team-item:hover .team-content-suffix { color: #fff; } .innovate-page2 .mod4 .mod-hd { display: flex; justify-content: center; margin-bottom: 100px; } .innovate-page2 .mod4 .mod-bd { position: relative; } .innovate-page2 .mod4 .research-wrap { display: flex; justify-content: center; } @keyframes firstCircle { 0% { transform: translateX(0) translateY(0); } 35% { transform: translateX(2%) translateY(-14%); } 65% { transform: translateX(5%) translateY(14%); } 100% { transform: translateX(0) translateY(0); } } @keyframes secondCircle { 0% { transform: translateX(0) translateY(0); } 40% { transform: translateX(-9%) translateY(-1%); } 75% { transform: translateX(11%) translateY(-14%); } 100% { transform: translateX(0) translateY(0); } } @keyframes thirdCircle { 0% { transform: translateX(0) translateY(0); } 30% { transform: translateX(5%) translateY(11%); } 70% { transform: translateX(-13%) translateY(-5%); } 100% { transform: translateX(0) translateY(0); } } .research-center .pic { position: relative; height: 388px; width: 388px; display: -webkit-flex; align-items: center; justify-content: center; } .research-center .pic img { display: block; position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .research-center .liquid { position: absolute; background: #2f8338; border-radius: 50%; } .research-center .small { width: 100%; height: 100%; opacity: 0.1; animation: firstCircle 10s ease infinite; } .research-center .medium { width: 102%; height: 102%; opacity: 0.2; animation: secondCircle 10s ease infinite; } .research-center .large { width: 104%; height: 104%; opacity: 0.3; animation: thirdCircle 10s ease infinite; } .research-center { width: 100%; display: flex; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 833px) { .research-center .pic { height: 200px; width: 200px; } } .research-wrap { max-width: 80%; margin: 0 auto; box-sizing: border-box; } @media only screen and (max-width: 1023px) { .research-wrap { max-width: 100%; padding: 0 20px; } } .research-wrap .left-col, .research-wrap .right-col { width: 50%; box-sizing: border-box; position: relative; } .research-list { } .research-list li { position: relative; margin-bottom: 45px; } .research-title { color: #333333; font-size: 18px; line-height: 30px; padding-left: 30px; position: relative; } .research-content { display: flex; } .research-content-value { color: var(--primary-color); font-size: 60px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; } .research-title .dot { width: 16px; height: 16px; box-sizing: border-box; background-color: var(--primary-color); border: 4px solid #97c29c; background-color: rgba(48, 133, 58, 1); border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; } .research-content-suffix { margin-inline-start: 14px; font-size: 24px; color: var(--primary-color); margin-top: 8px; } @media only screen and (min-width: 1400px) { .research-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .research-center-placeholder { width: 800px; flex-shrink: 0; } .research-wrap { max-width: 100%; } .research-wrap .left-col::after, .research-wrap .right-col::after { content: ""; position: absolute; top: 12px; width: 60px; height: 405px; background-repeat: no-repeat; background-position: 0 0; } .research-wrap .left-col::after { background-image: url("../images/innovate/2/l-line.png"); right: 0; } .research-wrap .right-col::after { background-image: url("../images/innovate/2/r-line.png"); left: 0; } .research-wrap .left-col { display: flex; justify-content: flex-end; } .research-wrap .right-col { width: 50%; } .research-list { height: 475px; display: flex; flex-direction: column; justify-content: space-between; } .research-title { max-width: 330px; } .left-research-list .research-title { text-align: right; padding-right: 30px; padding-left: 0; } .left-research-list .research-title .dot { left: auto; right: 0; } .research-content { position: absolute; top: 50%; transform: translateY(-50%); } .left-research-list .research-content { right: -124px; } .right-research-list .research-content { left: -118px; } .left-research-list li:nth-child(2) { right: 50px; } .left-research-list li:nth-child(3) { right: -4px; } .left-research-list li:nth-child(2) .research-content { right: -216px; } .left-research-list li:nth-child(3) .research-content { right: -136px; } .right-research-list li:nth-child(1) { left: 3px; top: -10px; } .right-research-list li:nth-child(2) { left: 50px; } .right-research-list li:nth-child(3) { left: -2px; top: 10px; } } @media only screen and (max-width: 1520px) and (min-width: 1400px) { .research-title { font-size: 14px; } .research-content-suffix { font-size: 22px; } .research-content-value { font-size: 48px; } .research-title { max-width: 250px; } /* .left-research-list li:nth-child(1) { right: 2px; top: -12px; } */ } @media only screen and (max-width: 1199px) { .innovate-page2 .mod3 .big-gallery-area { height: 48vw; } .innovate-page2 .swiperThumbs { height: 18vw; } .innovate-page2 .mod1 .pic { height: 15.6vw; } .innovate-page2 .mod1 .mod-bd .left-col { width: 50%; } .innovate-page2 .mod1 .mod-bd .right-col { width: 50%; } } @media only screen and (max-width: 989px) { .innovate-page2 .info, .innovate-page2 .mod3 .mod-bd, .innovate-page2 .mod2 .mod-bd, .innovate-page2 .mod1 .mod-bd { font-size: 14px; } .innovate-page2 .mod3 .mod-hd { text-align: left; } .innovate-page2 .mod3 .wrapper { flex-direction: column-reverse; } .innovate-page2 .mod3 .big-gallery-area { width: 90%; height: 420px; margin-left: auto; margin-right: auto; } .innovate-page2 .mod3 .main-col { width: 100%; padding-left: 0; } .innovate-page2 .mod3 .swiper-button-next, .innovate-page2 .mod3 .swiper-button-prev { top: auto; bottom: -190px; } .innovate-page2 .mod3 .swiper-button-prev { left: 0; right: auto; } .innovate-page2 .mod3 .swiper-button-next { right: 0; left: auto; } .innovate-page2 .swiperThumbs { display: none; } .innovate-page2 .mod1 .pic { height: 21.5vw; } .innovate-page2 .mod3 .mod-bd, .innovate-page2 .mod1 .mod-bd { padding: 30px 0; } .innovate-page2 .mod1 .mod-bd .left-col { width: 100%; margin-bottom: 30px; } .innovate-page2 .mod1 .mod-bd .right-col { width: 66.66%; padding: 0; } .innovate-page2 .mod1 .mod-bd ul { margin: 0 -10px; } .innovate-page2 .mod1 .mod-bd ul li { padding: 10px; } .team-list li { margin-bottom: 24px; } .team-list li .team-item { height: 180px; } .team-title { font-size: 16px; } .team-list .team-li2 .team-title { height: 48px; } .team-content { margin-bottom: 18px; } .team-content-value { font-size: 36px; } .team-content-suffix { font-size: 16px; } .innovate-page2 .mod2 .mod-bd { padding: 30px 0; } .innovate-page2 .mod2 .mod-bd ul { margin: 10px 0; } .innovate-page2 .mod2 .mod-bd ul li { width: 50%; box-sizing: border-box; padding: 0 8px; height: 200px; margin: 0; } .tabs { flex-wrap: wrap; } .tabs-nav { width: 100%; margin-bottom: 30px; } .tabs-content { width: 100%; } .tabs-nav-list { display: flex; flex-wrap: wrap; justify-content: center; } .tabs-nav-list .tabs-tab { width: 50%; padding: 0; margin: 0; height: 60px; line-height: 60px; font-size: 16px; background-size: 96% auto; background-position: 50% 50%; } .mySwiperKnow { height: 200px; } .innovate-page2 .swiper-wrap { padding-bottom: 50px; } .tabs { height: auto; } } @media only screen and (max-width: 767px) { .innovate-page3 .mod1 { padding-top: 20px; } .innovate-page2 .mod1 .pic { height: 33vw; } .innovate-page2 .mod1 .mod-bd .right-col { width: 100%; padding: 0; } .team-list li { width: 50%; } .team-list li .team-item { height: 150px; } .innovate-page2 .mod4 .mod-hd { margin-bottom: 40px; padding: 30px 0; } .research-wrap .left-col, .research-wrap .right-col { width: 100%; } .research-list li { margin-bottom: 20px; } .research-title { font-size: 12px; } .research-content-suffix { font-size: 14px; margin-inline-start: 8px; } .research-content-value { font-size: 32px; } .index_solution_box { height: 120px; margin-bottom: 0; } .innovate-page3 .mod1 .mod-bd { padding-bottom: 20px; } } @media only screen and (max-width: 1399px) { .innovate-page2 .mod4 .research-wrap { flex-wrap: wrap; } } .innovate-page2 .mod6 { position: relative; padding: 60px 0; } .innovate-page2 .ch-row { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 60px; height: 28vw; } .innovate-page2 .ch-row .ch-col { width: 45%; } .innovate-page2 .ch-row .ch-col .mod-hd { margin-bottom: 30px; } .innovate-page2 .mod6 .mod-ft { height: 16vw; display: flex; flex-wrap: wrap; align-items: center; } .innovate-page2 .mod6 .mod-ft .info { width: 45%; } .innovate-page2 .mod6 .pic-area { height: 16vw; position: absolute; width: 50%; right: 0; bottom: 60px; display: flex; } .innovate-page2 .swiper-wrap6 { width: 50%; height: 28vw; position: absolute; left: 0; top: 0; } .innovate-page2 .swiper-wrap6 .swiper { height: 100%; } .innovate-page2 .swiper-wrap6 .gallery-item { width: 100%; height: 100%; } .innovate-page2 .swiper-wrap6 .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page2 .swiper-wrap6 .swiper-button-next, .innovate-page2 .swiper-wrap6 .swiper-button-prev { top: auto; bottom: 0; width: 3.5vw; height: 3.5vw; margin-top: 0; color: #fff; background: rgba(48, 133, 58, 1); } .innovate-page2 .swiper-wrap6 .swiper-button-prev { left: auto; right: -3.5vw; padding-right: 1.6vw; } .innovate-page2 .swiper-wrap6 .swiper-button-next { left: auto; right: -7vw; padding-left: 1.6vw; } .innovate-page2 .swiper-wrap6 .swiper-button-next:after, .innovate-page2 .swiper-wrap6 .swiper-button-prev:after { font-size: 16px; } .innovate-page2 .swiper-wrap6 .swiper-pagination-fraction { bottom: 0; left: auto; right: -5.1vw; width: 3.2vw; height: 3.5vw; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); z-index: 11; font-size: 16px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 4px; } .innovate-page2 .swiper-wrap6 .swiper-pagination-current { color: rgba(255, 255, 255, 1); font-size: 24px; font-weight: normal; } @media only screen and (max-width: 833px) { .innovate-page2 .mod6 { padding: 30px 0; } .innovate-page2 .mod6 .mod-ft { margin-bottom: 30px; height: auto; } .innovate-page2 .mod6 .mod-ft .info { width: 100%; } .innovate-page2 .mod6 .pic-area { position: relative; right: auto; bottom: auto; width: 100%; height: auto; } .innovate-page2 .ch-row { margin-bottom: 30px; height: auto; } .innovate-page2 .ch-row .ch-col { width: 100%; } .innovate-page2 .swiper-wrap6 { height: 200px; position: relative; width: 100%; left: auto; top: auto; margin-bottom: 20px; padding-bottom: 20px; } .innovate-page2 .swiper-wrap6 .swiper-button-next, .innovate-page2 .swiper-wrap6 .swiper-button-prev { display: none; } .innovate-page2 .swiper-wrap6 .swiper-pagination-fraction { width: 100%; color: #333; bottom: 0; left: 50%; right: auto; font-size: 14px; transform: translateX(-50%); } .innovate-page2 .swiper-wrap6 .swiper-pagination-current { color: rgba(48, 133, 58, 1); font-size: 14px; } .team-title { font-size: 12px; } } .innovate-page2 .mod7 { position: relative; padding: 110px 0; } .innovate-page2 .swiper-wrap7 { width: 50%; height: 19vw; position: absolute; } .innovate-page2 .swiper-wrap7::after { content: ""; position: absolute; width: 14vw; height: 14vw; background-color: rgb(48, 133, 58, 0.1); } .innovate-page2 .swiper-wrap7_1 { right: 0; top: 110px; } .innovate-page2 .swiper-wrap7_2 { left: 0; bottom: 110px; } .innovate-page2 .swiper-wrap7_1::after { left: -2vw; top: -2vw; } .innovate-page2 .swiper-wrap7_2::after { right: -2vw; bottom: -2vw; } .innovate-page2 .swiper-wrap7 .swiper { height: 100%; } .innovate-page2 .swiper-wrap7 .gallery-item { width: 100%; height: 100%; } .innovate-page2 .swiper-wrap7 .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .innovate-page2 .swiper-wrap7 .gallery-item-desc { position: absolute; width: 100%; left: 0; bottom: 0; padding: 10px 40px; text-align: center; color: #fff; font-size: 18px; line-height: 1.5; background-color: rgba(0, 0, 0, 0.5); } .innovate-page2 .swiper-wrap7 .swiper-pagination-bullets { bottom: -30px; z-index: 12; width: 70%; left: 50%; transform: translateX(-50%); } .innovate-page2 .swiper-wrap7 .swiper-button-next, .innovate-page2 .swiper-wrap7 .swiper-button-prev { top: auto; bottom: -44px; margin-top: 0; color: rgba(48, 133, 58, 1); } .innovate-page2 .swiper-wrap7 .swiper-button-prev { left: 10px; right: auto; } .innovate-page2 .swiper-wrap7 .swiper-button-next { left: auto; right: 20px; } .innovate-page2 .swiper-wrap7 .swiper-button-next:after, .innovate-page2 .swiper-wrap7 .swiper-button-prev:after { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .innovate-page2 .swiper-wrap7 .swiper-button-prev:after { content: "PREV"; } .innovate-page2 .swiper-wrap7 .swiper-button-next:after { content: "NEXT"; } .innovate-page2 .mod7 .row2 .txt { height: 100%; display: flex; align-items: center; } @media only screen and (max-width: 833px) { .innovate-page2 .swiper-wrap7 { height: 200px; position: relative; width: 100%; left: auto; top: auto; bottom: auto; right: auto; margin-bottom: 20px; padding-bottom: 20px; } .innovate-page2 .mod7 .row { flex-wrap: wrap; height: auto; padding: 0; } .innovate-page2 .mod7 .row .txt { font-size: 14px; width: 100%; margin-bottom: 20px; } .innovate-page2 .mod7 .gallery-item-desc { font-size: 12px; padding: 10px; } .innovate-page2 .swiper-wrap7 .swiper-button-next, .innovate-page2 .swiper-wrap7 .swiper-button-prev { display: none; } .innovate-page2 .swiper-wrap7 .swiper-pagination-bullets { bottom: -10px; } .innovate-page2 .mod7 .row2 { justify-content: flex-start; } .innovate-page2 .mod7 .row2 .txt { display: block; } .innovate-page2 .mod7 { padding: 60px 0; } } .index_solution_box { position: relative; z-index: 9; width: 100%; overflow: hidden; } .index_solution_item_big { width: 100%; position: relative; transform: rotate(90deg); display: flex; align-items: center; flex-direction: column; } .index_solution_box .num { width: 5.6vw; height: 5.6vw; border-radius: 50%; color: #fff; background-color: #30853a; position: relative; z-index: 9; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 2.8vw; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } .index_solution_box .txt { font-size: 1.2vw; color: #30853a; margin-top: 24px; } .index_solution_rotate_button { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; display: flex; flex-wrap: wrap; } .index_solution_rotate_btn { width: 50%; height: 100%; pointer-events: auto; cursor: pointer; } .index_solution_circle_wrap { width: 110vw; height: 110vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 9; pointer-events: none; } .index_solution_rotate_wrap { position: relative; width: 100%; height: 100%; z-index: 9; } .index_solution_rotate_box { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); } .index_solution_tab { width: 100%; height: 100%; position: absolute; margin: auto; top: 0; left: 0; border-radius: 100%; z-index: 20; transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .index_solution_item_box { display: block; width: 20vw; position: absolute; text-align: center; z-index: 3; pointer-events: none; transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-wrap: wrap; } @media only screen and (max-width: 833px) { .innovate-page1 .content { padding: 0; } .innovate-page1 .mod { padding: 40px 0; } .index_solution_box .num { width: 48px; height: 48px; font-size: 18px; } .index_solution_box .txt { font-size: 12px; margin-top: 4px; } .index_solution_item_box { width: 100px; } .steps .steps-item-title { font-size: 12px; font-weight: normal; letter-spacing: 0; } .innovate-page1 .mod-hd .num img { width: 100px; } .innovate-page1 .mod1 { padding-top: 0; } .innovate-page1 .mod1 .pic-area { width: 100%; height: auto; } .innovate-page1 .mod1 .pic { height: auto; display: flex; justify-content: center; } .innovate-page1 .mod1 .pic img { width: 80%; } }