.wrapper { max-width: 1280px; } .tech_area { margin-top: 60px; } .tech_title { font-size: 42px; color: rgb(48, 133, 58); text-shadow: 1.5px 2.598px 1.96px rgba(0, 46, 13, 0.16); position: relative; } .tech_title::after { content: ""; position: absolute; bottom: -10px; left: 30px; background-color: rgb(203, 220, 198); opacity: 0.302; width: 485px; height: 34px; z-index: -1; } .tech_system { width: 485px; margin-top: 48px; margin-left: 30px; position: relative; } .tech_name { font-size: 20px; color: rgb(51, 51, 51); line-height: 1.8; text-align: right; font-weight: 400; } .tech_system::before { content: ""; position: absolute; height: 1px; width: 30px; background-color: rgb(48, 133, 58); width: 80px; left: 0; top: 50%; transform: translateY(-50%); } .tech { position: relative; width: 100%; margin-bottom: 30px; } .tech02 { background: url(../images/tech/tech02.png) no-repeat; width: 100%; } .pic { overflow: hidden; position: relative; height: auto; cursor: pointer; } .bgimg { width: 100%; } .upimg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.5s; } .pic:hover .upimg { transform: scale(1.05); } .core_list { display: flex; height: 944px; } .core_list li { width: 33.33%; } .core_list li:nth-child(2) { align-self: flex-end; } .core_box { padding: 0 40px; padding-top: 100px; height: 844px; border-left: 1px solid #ffffff; display: flex; flex-direction: column; } .core_list li:nth-child(2) .core_box { flex-direction: column-reverse; padding-top: 0px; padding-bottom: 100px; } .core_title { font-size: 31.353px; font-weight: 600; color: rgb(255, 255, 255); line-height: 1.148; text-shadow: 0px 4px 3.96px rgba(9, 27, 3, 0.2); margin-top: 40px; display: flex; align-items: center; height: 145px; } .core_list li:nth-child(1) .core_title { background: url(../images/tech/01.png) no-repeat; } .core_list li:nth-child(2) .core_title { background: url(../images/tech/02.png) no-repeat; margin-top: 0; margin-bottom: 40px; } .core_list li:nth-child(3) .core_title { background: url(../images/tech/03.png) no-repeat; } .tech03 { background: url(../images/tech/dian.png) no-repeat 95% top; margin-top: 100px; } .tech_play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .concept { display: flex; } .concept_title { color: rgb(51, 51, 51); font-size: 36px; font-weight: 600; position: relative; margin-bottom: 90px; } .concept_right { margin-left: auto; align-self: flex-end; } .concept_title::after { content: ""; right: 0; bottom: -30px; position: absolute; background-color: rgb(48, 133, 58); width: 240px; height: 1px; } .concept_desc { font-size: 18px; color: rgb(51, 51, 51); line-height: 2; text-indent: 2em; margin-top: 50px; } .tech04 { background: url(../images/tech/tech04.png) no-repeat; } .advantage_title { color: rgb(51, 51, 51); font-size: 36px; font-weight: 600; position: relative; margin-bottom: 60px; } .advantage_title::after { content: ""; left: 0; bottom: -30px; position: absolute; background-color: rgb(48, 133, 58); width: 240px; height: 1px; } .advantage { margin-top: 80px; padding-top: 20px; display: flex; } .advantage_desc { font-size: 18px; color: rgb(51, 51, 51); line-height: 2; margin-bottom: 60px; } .advantage_info { color: rgb(102, 102, 102); font-size: 16px; line-height: 1.5; } .advantage_list { padding: 0 30px; display: flex; flex-wrap: wrap; margin-top: 80px; } .advantage_box { width: 33.33%; margin-bottom: 70px; } .advantage_box .timer { font-size: 48px; color: rgb(48, 133, 58); line-height: 1.2; } .advantage_box .unit { color: rgb(102, 102, 102); font-size: 12px; line-height: 2; } .advantage_info { color: rgb(102, 102, 102); font-size: 16px; line-height: 1.5; } .circle_img { display: flex; justify-content: flex-end; margin-top: 52px; } .circle1 { position: relative; } .circle_item { position: absolute; width: 140px; border-radius: 23px; background-color: rgb(152, 188, 157); box-shadow: 0px 4px 3.96px 0.04px rgba(9, 27, 3, 0.2); height: 48px; font-size: 20px; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; cursor: pointer; } .circle_item:hover { background-color: rgb(48, 133, 58); } .circle_item:nth-child(2) { left: 128px; top: 117px; } .circle_item:nth-child(3) { left: 55px; top: 369px; } .circle_item:nth-child(4) { left: 408px; top: 280px; } .tech05 { margin-top: 100px; } .tech05 .wrapper { max-width: 1440px; } .xinghao { display: flex; align-items: center; justify-content: center; border-width: 4px; border-color: rgb(48, 133, 58); border-style: solid; width: 337px; height: 71px; border-radius: 37px; font-weight: 400; font-size: 30px; color: #30853a; margin: 0 auto; margin-top: 70px; } .technology { display: flex; } .technology_right, .technology_left { width: 50%; } .xinghao:hover { background-color: rgb(48, 133, 58); color: #ffffff; } .left_box { display: flex; } .line { width: 1px; height: 80px; background: #1a6823; position: relative; } .line::before { position: absolute; left: 50%; transform: translateX(-50%); top: -40px; color: rgb(48, 133, 58); font-size: 24px; font-weight: 500; } .technology_list li:nth-child(1) .line::before { content: "①"; } .technology_list li:nth-child(2) .line::before { content: "②"; } .technology_list li:nth-child(3) .line::before { content: "③"; } .technology_list li:nth-child(4) .line::before { content: "④"; } .technology_list li:nth-child(5) .line::before { content: "⑤"; } .technology_desc { font-size: 18px; font-weight: 400; color: #333333; line-height: 28px; margin-left: 30px; padding-top: 10px; } .technology_box { display: flex; } .technology_list li { margin-top: 50px; } .tech06 { margin-top: 100px; background: url(../images/tech/tech06.png) no-repeat center; padding-top: 100px; } .case_desc { padding: 0 40px; font-size: 18px; font-weight: 400; color: #333333; } .fanwei { font-size: 20px; font-weight: 400; font-style: italic; color: #30853a; margin-right: 30px; } .case_area { padding: 40px; background-color: #ffffff; box-shadow: 0px 4px 3.96px 0.04px rgba(9, 27, 3, 0.2); } .case_company { font-size: 24px; font-weight: 400; color: #000000; } .case_box { display: flex; align-items: center; max-width: 980px; margin: 0 auto; } .case_info { font-size: 18px; font-weight: 400; color: #333333; line-height: 40px; } .shui { text-decoration: underline; color: #30853a; } .case_box .pic { flex-shrink: 0; } .case_list.owl-theme .owl-nav .owl-prev, .case_list.owl-theme .owl-nav .owl-next { width: 64px; height: 64px; top: 50%; transform: translateY(-50%); text-indent: 100px; overflow: hidden; padding: 0; margin: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; filter: Alpha(Opacity=100); opacity: 1; transition: all 0.5s; } .case_list.owl-theme .owl-nav .owl-prev { position: absolute; left: 0px; background: url(../images/tech/arrow01.png) center no-repeat; } .case_list.owl-theme .owl-nav .owl-next { position: absolute; right: 0px; background: url(../images/tech/arrow02.png) center no-repeat; } .case_list.owl-theme .owl-nav .owl-prev:hover { background: url(../images/tech/arrow01_c.png) center no-repeat; } .case_list.owl-theme .owl-nav .owl-next:hover { background: url(../images/tech/arrow02_c.png) center no-repeat; } .case_module { margin: 80px 0 120px; } .tech07 { background: url(../images/tech/tech07.png) no-repeat bottom; padding-bottom: 100px; } .honor_module { display: flex; justify-content: space-between; margin-top: 100px; } .honor_left { width: 500px; padding: 35px; background: #ffffff; box-shadow: 0px 4px 3.96px 0.04px rgba(9, 27, 3, 0.2); text-align: center; } .honor_right { width: calc(100% - 550px); display: flex; flex-direction: column; } .honor_img { display: flex; justify-content: center; } .honor_img img { max-height: 160px; width: auto !important; } .honor_main { margin-top: 50px; width: calc(100% - 80px); } .honor_desc { border-radius: 30px; background: linear-gradient(214deg, #64aa70, #89bc53); width: 612px; padding: 50px; align-self: flex-end; position: relative; } .honor_area { height: 192px; overflow-y: auto; } .honor_desc::after { content: ""; position: absolute; right: 37px; top: 10px; background: url(../images/tech/san.svg) no-repeat; width: 28px; height: 28px; background-size: 100%; } .honor_info { font-size: 20px; font-weight: 400; color: #ffffff; line-height: 48px; text-shadow: 0px 4px 4px rgba(11, 37, 2, 0.2); } .honor_info .fa { margin-right: 20px; } .honor_list.owl-theme .owl-nav .owl-prev, .honor_list.owl-theme .owl-nav .owl-next { width: 64px; height: 64px; top: 50%; right: -80px; text-indent: 100px; overflow: hidden; padding: 0; margin: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; filter: Alpha(Opacity=100); opacity: 1; transition: all 0.5s; } .honor_list.owl-theme .owl-nav .owl-prev { position: absolute; margin-top: -80px; background: url(../images/tech/arrow01.png) center no-repeat; } .honor_list.owl-theme .owl-nav .owl-next { position: absolute; background: url(../images/tech/arrow02.png) center no-repeat; } .honor_list.owl-theme .owl-nav .owl-prev:hover { background: url(../images/tech/arrow01_c.png) center no-repeat; } .honor_list.owl-theme .owl-nav .owl-next:hover { background: url(../images/tech/arrow02_c.png) center no-repeat; } .honor_area::-webkit-scrollbar-track { display: none; } .honor_area::-webkit-scrollbar-track-piece { display: none; } .honor_area::-webkit-scrollbar { background-color: transparent; width: 2px; } .honor_area::-webkit-scrollbar-thumb { border-radius: 1px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); background-color: #ffffff !important; } @media only screen and (max-width: 1440px) { .tech05 .wrapper { max-width: 1280px; } } @media only screen and (max-width: 1280px) { .tech_title { font-size: 32px; } .tech_area { margin-top: 0px; } .tech_title::after { width: 370px; } .tech_name { font-size: 18px; } .tech_system { margin-left: 0; width: 400px; } .tech_system::before { width: 40px; } .core_list { height: calc(944px / 1.5); } .core_box { height: calc(844px / 1.5); padding: 0 calc(40px / 1.5); padding-top: calc(100px / 1.5); } .core_title { margin-top: calc(40px / 1.5); font-size: 22px; margin-left: 10px; } .core_list li:nth-child(2) .core_title { margin-bottom: calc(40px / 1.5); } .core_list li:nth-child(2) .core_box { padding-bottom: calc(100px / 1.5); } .tech02 { padding: 0 100px; } .tech03 { margin-top: calc(100px / 1.5); } .concept_desc { font-size: 16px; margin-top: 30px; } .advantage { margin-top: 40px; } .advantage_desc { font-size: 16px; } .technology_desc { font-size: 16px; } .xinghao { width: calc(337px / 1.5); height: calc(71px / 1.5); font-size: calc(30px / 1.5); } .line { height: 70px; } .tech06 { margin-top: calc(100px / 1.5); padding-top: calc(100px / 1.5); } .case_module { margin: 60px 0 80px; } .tech07 { padding-bottom: calc(100px / 1.5); } } @media only screen and (max-width: 1152px) { .honor_left { width: 35%; } .honor_right { width: calc(65% - 30px); } } @media only screen and (max-width: 1024px) { .zhan { margin-right: 40px; } .tech05 { margin-top: calc(100px / 1.875); } .technology_desc { font-size: 14px; line-height: 24px; } .line::before { font-size: 20px; top: -30px; } .technology_list li { margin-top: 35px; } .concept_left { width: 60%; } .case_box { max-width: 800px; } .case_box .pic { flex-basis: 50%; } .case_area { padding: 20px; } .case_company { font-size: 20px; margin-bottom: 20px; } .case_info { font-size: 16px; line-height: 2; } .circle_item { font-size: 16px; width: 120px; height: 35px; } .circle_item:nth-child(2) { left: 123px; top: 100px; } .circle_item:nth-child(3) { left: 55px; top: 325px; } .circle_item:nth-child(4) { left: 327px; top: 266px; } .advantage_box .timer { font-size: 40px; } .advantage_info { font-size: 14px; } } @media only screen and (max-width: 920px) { .honor_desc { width: auto; padding: 20px; border-radius: 15px; } .honor_info { font-size: 16px; margin-right: 5px; line-height: 2; } .honor_area { height: calc(16px * 8); } .honor_desc::after { top: 0; right: 12px; width: 19px; height: 19px; } .case_box { max-width: 720px; } .honor_list.owl-theme .owl-nav .owl-prev, .honor_list.owl-theme .owl-nav .owl-next, .case_list.owl-theme .owl-nav .owl-prev, .case_list.owl-theme .owl-nav .owl-next { background-size: 80%; } .honor_list.owl-theme .owl-nav .owl-prev:hover, .honor_list.owl-theme .owl-nav .owl-next:hover, .case_list.owl-theme .owl-nav .owl-prev:hover, .case_list.owl-theme .owl-nav .owl-next:hover { background-size: 80%; } .tech_title { font-size: 28px; } .tech_title::after { width: 320px; } .tech_system { margin-top: 35px; width: 350px; } .tech_name { font-size: 16px; } .tech02 { padding: 0px 50px; } .honor_module { margin-top: 50px; } .tech07 { padding-bottom: 10px; } .circle_item:nth-child(3) { left: 55px; top: 300px; } .circle_item:nth-child(2) { left: 100px; top: 100px; } .circle_item:nth-child(4) { left: 283px; top: 245px; } .advantage_title, .concept_title { font-size: 28px; } .advantage_title::after, .concept_title::after { width: 160px; } .case_box { max-width: 640px; } .case_company { font-size: 16px; margin-bottom: 10px; } .case_info { font-size: 14px; } .case_module { margin: 40px 0; } } @media only screen and (max-width: 768px) { .core_title { margin-top: calc(40px / 2); font-size: 18px; } .tech02 { padding: 0px; } .core_list li:nth-child(2) .core_title { margin-bottom: calc(40px / 2); } .concept_desc { font-size: 14px; } .advantage_list { padding: 0; margin-top: 50px; } .advantage_box .timer { font-size: 30px; } .advantage_info { font-size: 12px; } .circle_item:nth-child(2) { left: 70px; top: 80px; } .circle_item:nth-child(3) { left: 30px; top: 245px; } .circle_item:nth-child(4) { left: auto; right: 0; top: 205px; } } @media only screen and (max-width: 500px) { .tech_title { font-size: 22px; } .tech_title::after { width: 250px; height: 25px; } .tech_system { margin-top: 25px; width: 300px; } .tech_name { font-size: 14px; } .core_list { flex-wrap: wrap; height: auto; } .core_list li { width: 100%; margin-bottom: 20px; } .core_list li:nth-child(2) { align-self: flex-start; } .core_list li:nth-child(2) .core_title { margin-bottom: 0; margin-top: calc(40px / 2); } .core_list li:nth-child(2) .core_box { flex-direction: row; } .core_box { height: auto; padding-top: 20px; flex-direction: row; } .core_box .pic { width: 150px; } .tech02 { background-size: cover; } .core_list li:nth-child(2) .core_box { padding-bottom: 0; padding-top: 20px; } .tech03 { margin-top: calc(100px / 2); } .concept { flex-wrap: wrap; } .concept_left { width: 100%; } .concept_right { margin-top: 20px; margin-left: 0; align-self: flex-start; } .concept_title::after { right: auto; left: 0; } .concept_title { margin-bottom: 30px; } .advantage { flex-wrap: wrap; } .circle_img { margin-top: 0; } .advantage_box { margin-bottom: 30px; } .technology { flex-wrap: wrap; flex-direction: column-reverse; } .technology_right, .technology_left { width: 100%; } .zhan { margin-right: 0px; } .technology_left { margin-top: 20px; } .tech06 { margin-top: 30px; padding-top: 30px; } .case_desc { padding: 0; font-size: 16px; line-height: 1.5; } .case_box { flex-wrap: wrap; } .case_box .pic { flex-basis: 100%; } .case_list.owl-theme .owl-nav .owl-prev, .case_list.owl-theme .owl-nav .owl-next { display: none !important; } .honor_module { display: flex; flex-wrap: wrap; } .honor_right, .honor_left { width: 100%; } .honor_left { display: none; } .honor_module { margin-top: 30px; } } .advantage_left { width: 774px; } .advantage_right { width: calc(100% -774px); padding-left: 30px; } .s2-list { position: relative; width: 100%; height: 224px; } .s2-list li { position: absolute; box-sizing: border-box; width: 184px; height: 84px; border: 6px solid #30853a; display: flex; align-items: center; border-radius: 8px; padding-left: 15px; } .s2-num { font-size: 68px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; position: relative; margin-right: 15px; } .s2-num .num { position: relative; z-index: 1; color: #fff; color: rgb(255, 255, 255); text-shadow: 4.5px 7.794px 2px rgba(0, 51, 28, 0.16); -moz-transform: matrix(0.84075436203433, 0, 0, 0.83604778057975, 0, 0); -webkit-transform: matrix(0.84075436203433, 0, 0, 0.83604778057975, 0, 0); -ms-transform: matrix(0.84075436203433, 0, 0, 0.83604778057975, 0, 0); } .s2-title { color: #333; font-size: 14px; margin-bottom: 8px; } .s2-content { display: flex; } .s2-content-value { color: #30853a; font-size: 28px; } .s2-content-suffix { color: #333; font-size: 14px; line-height: 24px; margin-inline-start: 4px; } .s2-list li.item1, .s2-list li.item5 { background-color: #fff; } .s2-list li.item2, .s2-list li.item4 { background-color: #30853a; } .s2-list li.item3, .s2-list li.item6 { background-color: #cbdcc6; border-color: #cbdcc6; } .s2-list li.item2 .s2-title, .s2-list li.item4 .s2-title, .s2-list li.item2 .s2-content-value, .s2-list li.item4 .s2-content-value, .s2-list li.item2 .s2-content-suffix, .s2-list li.item4 .s2-content-suffix { color: #fff; } .s2-list li.item1 { top: 28px; left: 0; } .s2-list li.item2 { top: 140px; left: 44px; } .s2-list li.item3 { top: 64px; left: 192px; } .s2-list li.item4 { top: 0; left: 350px; } .s2-list li.item5 { top: 114px; left: 366px; width: 228px; } .s2-list li.item6 { top: 28px; right: 0; width: 248px; } .s2-list li.item6 .num { letter-spacing: -10px; } @media only screen and (max-width: 1394px) { .advantage_left { width: 55.5%; } .advantage_right { width: 44.5%; } .s2-list { width: 100%; height: 16vw; } .s2-list li { min-width: 13.2vw; height: 6vw; border-width: 0.4vw; padding: 0 1vw; width: auto !important; } .s2-num { margin-right: 1vw; font-size: 4.8vw; } .s2-title { font-size: 1vw; } .s2-content-value { font-size: 2vw; } .s2-content-suffix { font-size: 1vw; } .s2-list li.item1 { top: 10%; } .s2-list li.item2 { top: 62.5%; left: 5.6%; } .s2-list li.item3 { top: 28.5%; left: 24.8%; } .s2-list li.item4 { left: 45.2%; } .s2-list li.item5 { left: 47.6%; top: 50.9%; width: auto; } .s2-list li.item6 { top: 12.5%; right: auto; left: 67.8%; width: auto; } } .tech_system { margin-bottom: -12vw; } @media only screen and (max-width: 768px) { .tech_system { margin-bottom: -20px; } .advantage_left, .advantage_right { width: 100%; } .s2-list { width: 100%; box-sizing: border-box; height: auto; margin-bottom: 40px; } .s2-list img { width: 100%; height: auto; } }