h2{ line-height: 47px; } h1 + p{ margin: 24px 0 48px 0; } h2 + p{ margin: 20px 0 36px 0; } .btn{ margin-top: 24px; border-radius: 8px; } /* 杞挱鍥 */ .wheel{ max-width: 100%; position:relative; } .banner_con > img{ width: 100%; height: 100vh; /* height: 36.46vw; */ min-height: 466px; } .banner_container{ width: 100%; height: 100vh; /* height: 36.458vw; */ min-height: 466px; } .banner_show,.banner_con{ display: block; width: 100%; height: 100%; } .banner_con{ position: absolute; top: 0; /* background-size: cover; background-position: 100% center; */ /* display: flex; align-items: center; */ } /* .banner_container img{ */ .banner_con > img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .banner_container .swiper-slide{ width: 100%; min-width: 1280px; } .banner_container .swiper-pagination-bullet{ /* border-radius: 0; */ width: 16px; height: 16px; background-color: #FFFFFF; border-radius: 50%; display: block; transition: all .3s; opacity: 1; } .banner_container > .swiper-pagination-bullets{ bottom: 50%; width: 16px; transform: translateY(50%); display: flex; flex-direction: column; left: 50px; } .banner_container .swiper-pagination-bullet-active{ background-color: #2168FB; } .banner_container > .swiper-pagination-bullets .swiper-pagination-bullet{ margin: 8px 0; } .swiper-button-next:after, .swiper-button-prev:after{ font-size: 60px; font-weight: bold; color: #999999; /* color: #FFFFFF; */ } .banner_container .swiper-button-disabled, .banner_container .swiper-button-disabled{ pointer-events: auto; opacity: 1; cursor: pointer!important; } .banner_container .swiper-button-prev{ left: 80px; opacity: 1; transition: all .3s; } .banner_container .swiper-button-next{ right: 80px; opacity: 1; transition: all .3s; } .banner_intro{ position: absolute; top: 50%; transform: translateY(-50%); margin-left: 13.54vw; /* opacity: 0; */ /* transform: translateX(300px); */ /* transition: all 1s; */ /* animation: ; */ } .bannerActive{ opacity: 1; transform: translateX(0px); } /* @keyframes banner{ 0%{ opacity: 0; transform: translateX(300px); } 100%{ opacity: 1; transform: translateX(0px); } } */ /* .banner_container:hover .swiper-button-next, .banner_container:hover .swiper-button-prev{ opacity: 1; } */ /* 鍩虹杞欢 */ .index_item{ padding: 80px 0; /* padding: 100px 0 80px 0; */ } .software_item{ display: none; min-height: 420px; } .software_kind{ display: flex; align-items: center; /* width: 780px; */ width: 480px; height: 40px; margin: 0 auto 48px auto; } .index .page_item{ width: 33.3%; height: 100%; background: #F8F8F8; /* font-size: 20px; */ color: #333333; letter-spacing: 0.7px; text-align: center; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; } .page_item .font{ font-size: 16px; } .kind_icon{ /* width: 36px; height: 36px; */ width: 24px; height: 24px; overflow: hidden; position: relative; margin-right: 6px; } .kind_icon img{ position: absolute; left: 0; top: 0px; width: 72px; height: 48px; } .software_kind li:nth-child(2) img{ left: -24px; } .software_kind li:nth-child(3) img{ left: -48px; } .software_kind li:hover .kind_icon img{ top: -24px; } .index .page_item:hover{ background: #2168FB; color: #FFFFFF; border-color: #2168FB; } .kindActive img{ top: -24px; } .software_framework,.software_ecology{ display: flex; justify-content: center; } .software_framework img, .software_ecology img{ width: 990px; height: 420px; } .software_product{ display: flex; width: 1220px; /* width: 85.42%; */ min-width: 1200px; margin: 0 auto; } .product_item{ width: 14%; margin: 0 8px; -webkit-box-flex:1; flex-grow:1; list-style: none; transition: .65s; box-shadow: 0px 3px 20px rgba(0, 17, 54, 0.2); } .product_item a{ display: block; position: relative; text-decoration: none; height: 400px; /* height: 49.6vh; */ /* height: 520px; */ box-sizing: border-box; padding: 40px 20px; background-size: cover; background-position: 0; overflow: hidden; color: #FFFFFF; user-select: none; -webkit-user-drag: none; } .product_item .cover{ width: 100%; height: 240px; background-size: cover; background-position:24% center; /* width: 400px; height: 360px; */ position: absolute; bottom: 0; right: 0; /* left: -40px; */ transition: .65s; } .product_item .text{ position: absolute; top: 40px; left: 24px; height: 164px; transition: .65s; text-align: left; } .product_item .title p:first-child{ font-size: 20px; color: #333333; } .product_item .title p:last-child{ font-size: 14px; color: #2168FB; margin-top: 12px; } .hide{ opacity: 0; transition: .65s; text-align: justify; /* width: 100%; */ width: 280px; /* width: 352px; */ font-size: 14px; color: #666666; margin-top: 400px; letter-spacing: 0.168px; line-height: 24px; } .product_arrow{ position: absolute; top: 0; right: -60px; width: 60px; height: 48px; background: #2168FB; border-radius: 0px 0px 0px 100px; line-height: 48px; transition: .65s; } .product_arrow .icon{ width: 20px; height: 16px; fill: #FFFFFF; margin-left: 28px; } .product_item:hover .hide{ opacity: 1; margin-top: 20px; } .product_item:hover{ width: 28%; } .product_item:hover .cover{ /* width: 100%; height: auto; */ width: 320px; height: 288px; opacity:0.4; } .product_item:hover .product_arrow{ right: 0px; } /* 杞欢鏈嶅姟 */ .index_service{ height: 800px; background-size: cover; padding: 48px 0 0px 0; } .service_kind{ /* width: 520px; height: 54px; */ width: 320px; height: 40px; margin: 0 auto; display: flex; } .service_kind .font{ font-size: 16px; } .service_kind .page_item{ width: 50%; box-sizing: border-box; background: #FFFFFF; border: 1px solid #EEEEEE; } .service_kind li:first-child{ border-right: none; } .service_kind li:last-child{ border-left: none; } .service_item{ /* width: 1400px; */ /* width: 73%; */ margin: 56px auto 56px auto; display: flex; justify-content: space-between; } .service_field{ width: 1280px; /* min-width: 1100px; */ } .field{ width: 264px; padding: 40px 28px 0 28px; box-sizing: border-box; margin-right: 8px; background: #333333; } .field h3, .field p{ color: #FFFFFF; } .field p{ line-height: 24px; text-align: justify; } .field hr{ width: 104px; height: 6px; background-color: #2168FB; border: none; margin: 20px 0 30px 0; } .field_item{ display: inline-block; height: 12.5vw; /* width: 340px; height: 240px; */ } .field_item a{ display: inline-block; width: 100%; height: 100%; position: relative; overflow: hidden; } .field_item img{ width: 100%; height: auto; transition: all .3s; position: absolute; left: 0; top: 0; } .service_intro{ text-align: left; position: absolute; bottom: -36px; left: 24px; transition: all .6s; } .service_btn{ letter-spacing: normal; box-sizing: border-box; width: 100px; height: 32px; background: #2168FB; padding: 0 12px; line-height: 32px; font-size: 12px; color: #FFFFFF; opacity: 0; transition: all .6s; } .service_btn .icon{ width: 12px; height: 11px; fill: #FFFFFF; margin-left: 10px; } .service_intro_title{ /* font-size: 20px; */ font-weight: bold; color: #FFFFFF; letter-spacing: 0.48px; } .service_intro_param{ /* font-size: 14px; */ margin-top: 4px; /* margin: 4px 0 24px 0; */ color: #FFFFFF; letter-spacing: 0.336px; } .service_item ul{ font-size: 0; width: 1016px; /* width: 1092px; */ } .field_item{ width: 280px; /* width: 320px; */ height: 200px; margin-left: 16px; } .field_item:nth-child(3n + 1){ margin-left: 0; } .field_item:nth-child(-n+3){ margin-bottom: 24px; } .field_item:hover .service_intro{ bottom: 24px; } .field_item:hover .service_btn{ opacity: 1; margin-top: 24px; } .field_item img:hover{ transform: scale(1.1); } .service_intro:hover .field_item img:hover{ transform: scale(1.1); } .index .kindActive{ background: #2168FB; color: #FFFFFF; border-color: #2168FB; } .service_tech{ width: 66.45vw; min-width: 1275px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 44px; position: relative; } .service_tech_con{ position: absolute; z-index: 1; top: 20px; right: 0; width: 740px; padding: 36px 40px 40px 100px; background: #333333; margin-left: 60px; height: 364px; box-sizing: border-box; } .service_tech_con::before{ content: ""; width:0; border-top:64px solid transparent; border-bottom:64px solid transparent; border-left:64px solid #666666; border-right:64px solid transparent; position: absolute; left: 0; bottom: 0; } .service_tech img{ top: 0; left: 0; position:absolute; z-index: 2; } .service_tech_con h3{ color: #FFFFFF; } .service_tech_con hr{ margin: 15px 0 30px 0; height: 6px; width: 104px; background-color: #407BFF; outline: none; border: none; } .service_tech_con p{ line-height: 24px; color: #FFFFFF; text-align: justify; } .service_tech_con .blue-btn-border-white{ /* border: 1px solid #FFFFFF; color: #FFFFFF; background-color: #333333; */ margin-left: 420px; margin-top: 24px; } /* 鐗硅壊浼樺娍 */ .index_feats{ width: 100%; min-width: 1280px; } .index_feats > p{ margin-bottom: 52px; } .index_feats ul{ font-size: 0; width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between /* border: 1px solid; */ } .feats_item{ display: inline-block; padding: 24px 40px; box-sizing: border-box; width: 400px; margin-right: 40px; cursor: pointer; transition: all .6s; margin-bottom: 28px; /* border: 1px solid; */ } .feats_item:nth-child(3n){ margin-right: 0; } .feats_item .icon{ width: 96px; height: 96px; } .feats_title{ /* font-size: 20px; */ font-weight: bold; color: #333333; letter-spacing: 0.7px; margin: 30px 0 12px 0; transition: all .6s; } .feats_intro{ color: #666666; line-height: 24px; /* font-size: 14px; */ letter-spacing: 0.336px; text-align: justify; } .feats_item:hover{ box-shadow: 0px 3px 20px rgba(0, 17, 54, 0.2); } .feats_item:hover .feats_title{ color: #2168FB; } /* 涓氬姟鐢熸€ */ .index_ecology{ width: 100%; height: 940px; color: #FFFFFF; padding-top: 58px; padding-bottom: 0; } .index_ecology > p{ margin-bottom: 52px; } .index_ecology h2, .index_ecology p{ color: #FFFFFF; } .ecology_con{ display: flex; flex-direction: column; align-items: center; } .ecology_con .btn, .index_new .btn{ width: 173px; height: 42px; line-height: 42px; } .service_eco{ width: 880px; height: 534px; margin-right: 80px; /* margin-left: -4%; */ /* margin-left: -76px; */ /* width: 1080px; */ /* height: 622px; */ /* height: 32.4vw; */ /* min-height: 415px; */ /* width: 56.3%; */ position: relative; /* width: 56.3vw; */ } .ecology_con .blue-btn{ margin-top: 24px; } .service_bg{ width: 100%; /* height: 534px; */ position: absolute; top: 0; left: 0; } .arrow_gif{ position: absolute; top: 150px; width: 200px; transform: rotateZ(-90deg); } .eco_svg{ position: absolute; top: 80px; } .eco_svg01{ left: 25.6%; } .eco_svg02{ left: 51%; /* left: 544px; */ } .eco_svg03{ right:19.5%; /* right: 217px; */ } .svgAnim02{ opacity: 0; animation: svgAnim1 1.2s infinite; } .svgAnim03{ opacity: 0; animation: svgAnim2 1.2s infinite; } @keyframes svgAnim1{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes svgAnim2{ 0%,25%{ opacity: 0; } 100%{ opacity: 1; } } /* 鏂伴椈鍔ㄦ€ */ .index_new{ /* padding: 100px 0 100px 0; */ padding: 80px 0; } .new_swiper{ width: 76.875%; /* width: 1476px; */ margin: 0 auto; } .index_new > h2{ margin-bottom: 56px; } .new_swiper .swiper-container{ width: 86.5%; /* width: 1284px; */ margin: 0 auto; } .new_time{ font-size: 14px; line-height: 19px; color: #666666; letter-spacing: 0.168px; margin: 8px 0; } .new_title{ font-size: 20px; font-weight: bold; line-height: 28px; color: #333333; letter-spacing: 1.08px; width: 100%; /* width: 400px; */ transition: all .3s; } .new_swiper{ position: relative; } .new_swiper .swiper-slide{ text-align: center; /* margin: 0 14px; */ } .index_new .swiper-slide a{ display: inline-block; width: 100%; width: 95%; /* width: 400px; */ /* height: 265px; */ text-align: left; } .index_new .swiper-slide img{ transition: all .3s; width: 100%; height: auto; max-height: 170px; width: 400px; height: 170px; } .index_new .swiper-button-prev:after, .index_new .swiper-button-next:after { content: ""; } .index_new .swiper-button-next, .index_new .swiper-button-prev{ outline: none; width: 60px; height: 60px; margin-top: -60px; background-color: #cccccc; border-radius: 50%; transition: all .3s; } .index_new .swiper-button-prev:hover,.index_new .swiper-button-next:hover{ background-color: #2168FB; } .index_new .swiper-button-prev{ left: 0; } .index_new .swiper-button-next{ right: 0; } .new_swiper .icon{ fill: #FFFFFF; width: 40px; } .index_new .swiper-slide:hover img{ box-shadow: 0px 3px 16px rgba(0, 17, 54, 0.2); } .index_new .swiper-slide:hover .new_title{ color: #2168FB; } /* .index_new .blue-btn-border-blue{ margin: 40px auto 0 auto; } */ .index_new_btn{ text-align: center; margin-top: 40px; } /* 鍚堜綔浼欎即 */ .index_partner{ background-color: #FFFFFF; /* background: linear-gradient(180deg, #F8F8F8 0%, #F8F8F8 29%, #EEEEEE 49%, #F8F8F8 78%, #F8F8F8 100%); */ /* padding: 40px 0 40px 0; */ padding: 80px 0; } .index_parter_show { /* width: 1380px; */ width: 71.875%; height: 256px; position: relative; margin: 40px auto 0; overflow: hidden; } .index_parter_list { position: relative; left: -20%; /* left: -276px; */ } .index_parter_item { width: 20%; /* width: 276px; */ /* height: 100%; */ display: flex; flex-direction: column; /* height: 256px; */ box-sizing: border-box; position: absolute; text-align: center; } .index_parter_item img{ width: 95%; height: auto; } .index_parter_item img:first-child{ margin-bottom: 16px; } /* .index_parter_item:nth-child(odd) { background: #f8f8f8; } .index_parter_item:nth-child(even) { background: #eee; } */ /* 鍜ㄨ鍚堜綔 */ .index_consult{ box-sizing: border-box; background-size: cover; height: 450px; padding-top: 40px; } .index_consult h2{ margin-bottom: 8px; } .index_consult_form{ width: 760px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; } .index_form_item{ margin-top: 24px; display: flex; align-items: flex-start; } .index_form_item label{ font-size: 16px; line-height: 22px; color: #666666; margin-top: 10px; } .index_form_item input{ outline: none; width: 300px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #D9D9D9; height: 40px; line-height: 40px; border-radius: 2px; padding: 0 12px; } .index_form_item textarea{ box-sizing: border-box; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 2px; padding: 10px 12px; width: 710px; height: 80px; resize: none; outline: none; } .web_btn{ width: 138px; height: 42px; background-color: #999999; /* background: #2168FB; */ border-radius: 8px; margin-left: 48px; color: #FFFFFF; line-height: 42px; text-align: center; margin-top: 32px; cursor: not-allowed; } .consult_btn_active{ background: #2168FB; cursor: pointer; } .mask{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 12; display: none; } .tip{ min-width: 200px; padding: 0 20px; height: 60px; line-height: 60px; text-align: center; background-color: #999999b0; position: fixed; z-index: 13; left: 50%; top: 40%; transform: translateX(-50%); border-radius: 6px; color: #FFFFFF; } .index_ecology_service{ box-sizing: border-box; height: 940px; width: 100%; padding-top: 60px; } .index_ecology_service h2{ color: #FFFFFF; } .index_ecology_service p{ color: #FFFFFF; } .ecology_kind{ width: 320px; margin: 0 auto; height: 40px; display: flex; align-items: center; } .ecology_kind .page_item{ width: 50%; display: flex; align-items: center; } .ecology_kind li:nth-child(2) img{ left: -24px; } .ecology_service_item{ width: 1280px; margin: 0 auto; margin-top: 68px; } .home-ecology{ display: flex; align-items: center; justify-content: space-between; } .home-ecology-intro{ width: 373px; height: 540px; background: #394064; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.16); padding: 36px; box-sizing: border-box; } .home-ecology-intro h3{ font-size: 24px; width: 100px; color: #FFFFFF; border-bottom: 4px solid #407BFF; padding-bottom: 8px; } .home-ecology-intro p{ font-size: 16px; line-height: 24px; /* letter-spacing: 0.38px; */ } .home-ecology-intro .blue-btn{ margin-top: 54px; } .service_field ul{ display: flex; flex-wrap: wrap; width: 872px; } .basic_software{ height: 765px; box-sizing: border-box; padding-top: 58px; } @media only screen and (max-width: 1440px) { .index_item{ padding: 75px 0 54px 0; } .software_kind{ width: 600px; height: 48px; font-size: 18px; } .index_service{ background-position: center center; height: 680px; } .service_field{ width: 1090px; } .field_item{ width: 244px; /* width: 264px; */ height: 165px; } .service_item ul{ width: 840px; } .field{ width: 240px; } .index_feats ul{ width: 1098px; } .feats_item{ padding: 18px; width: 350px; margin-right: 24px; } .feats_item .icon{ width: 80px; height: 80px; } .feats_title{ margin: 24px 0 10px 0; } .feats_intro{ line-height: 18px; letter-spacing: 0.238px; } } @media only screen and (max-width: 1440px) { .service_tech{ transform: scale(0.8); } .new_title{ font-size: 18px; letter-spacing: 0.168px; } .banner_con{ background-position: 85% center; } .banner_intro{ margin-left: 10%; } .banner_container .swiper-button-prev{ left: 50px; } .banner_container .swiper-button-next{ right: 50px; } .ecology_service_item{ width: 1100px; } .home-ecology > img{ width: 750px; } .home-ecology-intro{ width: 308px; padding: 24px; height: 455px; } .home-ecology-intro p{ font-size: 14px; line-height: 21px; } .home-ecology-intro .blue-btn { margin-top: 48px; } .index_new .swiper-slide img{ width: 300px; height: 146px; } /* $findstr = 'one_sub'; $result = stripos($voo.icon,$findstr); var_dump($result); */ /* */ } /* 瑙e喅鏂规 */ .index_solution{ margin: 20px 0 90px 0; } .index_solution_main{ width: 1280px; margin: 0 auto; } .more_btn{ font-size: 12px; color: #2268FB; border: 1px solid #2268FB; width: 88px; height: 25px; border-radius: 23px; display: block; text-align: center; line-height: 25px; margin-top: 8px; } .index_solution_main p{ font-size: 20px; } .index_solution_smart1 p{ font-weight: bold; text-align: center; } .index_solution_smart1 span{ color: #2168FB; } .index_solution hr{ width: 36px; height: 3px; margin: 0 auto; background: #2268FB; border: none; margin-top: 10px; } .index_solution_smart{ display: flex; justify-content: space-between; height: 420px; background-size: cover; } .index_solution_smart1{ width: 670px; padding-top: 64px; box-sizing: border-box; } .index_solution_smart2{ display: flex; flex-wrap: wrap; width: 610px; margin-top: 10px; } .index_solution_smart2 li{ margin-right: 10px; height: 190px; width: 295px; padding: 12px; box-sizing: border-box; } .index_solution_smart2 li:first-child{ height: 200px; width: 600px; padding: 24px; } .index_solution_meter{ margin-top: 10px; } .index_solution_meter2{ display: flex; margin-top: 10px; } .index_solution_meter2 li{ width: 295px; height: 382px; padding-top: 38px; margin-left: 10px; box-sizing: border-box; } .index_solution_meter2 p{ text-align: center; } .index_solution_meter2 .more_btn{ margin: 10px auto; } .index_solution_meter .index_solution_smart1{ width: 560px; } /* 鍑哄彛涓氬姟 */ .index_export{ width: 100%; height: 966px; background-size: cover; padding-top: 84px; box-sizing: border-box; } .index_export h2+p{ margin: 16px 0 30px 0; } .index_export h3{ font-size: 24px; text-align: center; margin: 24px 0 16px 0; } .index_export h3 + p{ text-align: center; } .index_export hr{ width: 52px; height: 3px; border: none; margin: 0 auto; background-color:#2168FB; } .index_export ul{ display: flex; justify-content: space-between; } .index_export_con{ width: 1280px; margin: 0 auto; } .index_export_kind{ width: 1010px; margin: 54px auto; justify-content: space-between; } .index_export_kind li{ width: 324px; height: 74px; display: flex; align-items: center; justify-content: center; background-color: #fff; box-shadow: 0 2px 10px #407bff5e; } .index_export_kind img{ height: 31px; margin-right: 12px; } .index_export_kind h3{ font-weight: normal; margin: 0; } .index_export_show{ width: 1136px; margin: 0 auto; } .index_export_show li{ width: 268px; height: 278px; background-size: cover; display: flex; align-items: flex-end; } .index_export_show a{ /* padding-bottom: 14px;*/ /* padding-left: 24px; */ } .index_export_show img{ margin-left: 206px; margin-top: 18px; width: 30px; height: 10px; } .index_export_main p{ text-align: center; font-size: 22px; color: #FFFFFF; } .index_export_show li, .index_solution_meter2 li, .index_solution_smart2 li, .more_btn { transition: all .2s; } .index_solution_meter2 li:hover, .index_solution_smart2 li:hover { box-shadow: 0 2px 10px #407bff5e; } .index_export_show li:hover{ box-shadow: 0 2px 10px #407cffb2; } .index_export_main{ width: 100%; } .index_export_main:hover img{ margin-left: 316px; } .more_btn:hover{ background-color: #2168FB; color: #FFFFFF; }