.banner_width { width: 1200px; margin: auto; } .banner_title { font-size: 34px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #333333; text-align: center; } .index-banner-swiper{ height: 700px !important; } .swiper-slide { position: relative; height: 100% ; } .banner_swide { position: absolute; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .banner_swide_content { width: 1340px; } .banner-pagination{ bottom: 40px !important; } .swiper-slide-img{ height: 100%; } .swiper-slide-img img { width: 100%; height: 100%; } .banner-flex-jc-space-between { display: flex; align-items: center; justify-content: space-between; } .banner-flex-jc-center { display: flex; align-items: center; justify-content: center; } .banner_first_img { width: 399.3px; height: 326.63px; } .banner_first_logo { width: 195.96px; height: 71.68px; } .banner_first_content { display: flex; align-items: center; flex-direction: column; } .banner_first_content_t { font-weight: 700; color: #ffffff; font-size: 40px; letter-spacing: 1px; margin-top: 53px; } .banner_first_content_exp { color: #f2f2f2; font-size: 24px; letter-spacing: 2px; margin-top: 16px; } .banner_second_img { width: 677px; height: 405px; } .banner_three_img { width: 663.6px; height: 470.01px; } .banner_three_content p { width: 510px; height: 106px; line-height: normal; font-weight: 700; color: #ffffff; font-size: 38px; } .banner_ecmai_content{ width:594px; line-height: normal; font-weight: 700; color: #ffffff; font-size: 38px; } .banner_ecmai_content_exp{ color:#ffffff; font-size:24px; text-align: justify; margin-top: 24px; font-weight: normal; } .banner_ecm_img{ width: 100%; } .banner_btn { border-radius: 4px; width: 118px; height: 37px; background: #e7290f; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 14px; transition: color .3s ease, background-color .3s ease; } .banner_btn:hover { border: 1px solid #e7290f; background: transparent; width: 116px; height: 35px; color: #e7290f; transition: color .3s ease, background-color .3s ease; } .banner_swide_content { transform: translatey(200px); opacity: 0; transition: all 0.3s; } .index-banner-swiper .swiper-slide-active .banner_swide_content { transform: translatey(0px); opacity: 1; } .productivity { padding: 98px 0; background: #f8f8f8; } .productivity_m { width: 1323px; margin: 0 auto; position: relative; } .productivity_m img { width: 100%; } .productivity_child { color: #ffffff; font-size: 20px; width: 100%; text-align: center; position: absolute; left: -55px; } .productivity_child_one { top: 184px; } .productivity_child_two { top: 316px; } .productivity_child_three { bottom: 55px; } .productivity_item { display: flex; align-items: center; position: absolute; right: -4px; } .productivity_item p { color: #666666; font-size: 24px; margin-left: 20px; } .productivity_item i { display: block; width: 253px; border: 1px dashed #e7290f; position: relative; } .productivity_item i::before{ content: ''; width: 14px; height: 14px; border: 3px solid; border-color: #e7290f; background-color: #fff; position: absolute; left: -2px; border-radius: 100%; top: -10px; } .productivity_item_one { top: 184px; } .productivity_item_two { top: 316px; } .productivity_item_three { bottom: 55px; } .coreplatform { padding: 124px 0 100px 0; display: flex; flex-direction: column; align-items: center; } .coreplatform_exp { text-align: center; color: #707070; font-size: 16px; margin-top: 19px; } .coreplatform_m { width: 1448px; display: flex; align-items: center; justify-content: space-between; margin-top: 63px; } .coreplatform_card { width: 460px; height: 379px; background-color: #ffffff; box-shadow: 4px 4px 24px 0px rgba(109, 30, 20, 0.06); display: flex; align-items: center; flex-direction: column; padding-top: 42px; border-top: 9px solid transparent; transition: border-color .3s ease; } .coreplatform_card img { width: 116px; height: 38px; } .coreplatform_card_name { color: #0b0b0b; font-size: 24px; margin-top: 35px; } .coreplatform_card i { width: 36px; height: 2px; background-color: #e7290f; display: block; margin-top: 30px; } .coreplatform_card_exp { width: 256px; font-size: 16px; line-height: 28px; color: #676767; margin-top: 16px; text-align: center; } .coreplatform_card a { width: 352px; height: 44px; border-radius: 5px; border: solid 1px #e7290f; display: flex; align-items: center; justify-content: center; color: #e7290f; margin-top: 48px; background-color: transparent; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .coreplatform_card:hover { border-top: 9px solid #e7290f; transition: border-color .3s ease; } .coreplatform_card:hover a { background-color: #e7290f; color: #ffffff; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .storagecenter { background-image: url(/uploads/image/tdi2/storagecenter-bg-2x.png); background-repeat: no-repeat; height: 650px; background-size: cover; } .storagecenter_m { padding-top: 60px; display: flex; align-items: center; flex-direction: column; } .storagecenter_exp { color: #1f0a14; font-size: 26px; margin-top: 32px; } .storagecenter_exp span { color: #e7290f; padding: 0 10px; } .storagecenter_t { color: #919191; font-size: 20px; margin-top: 40px; } .storagecenter_products { display: flex; align-items: center; justify-content: space-between; width: 1005px; margin-top: 40px; } .storagecenter_product { width: 220px; height: 130px; background-color: #ffffff; box-shadow: 2px 2px 8px 0px rgba(27, 33, 117, 0.16); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .storagecenter_product p { color: #e7290f; font-size: 30px; } .storagecenter_product span { font-size: 24px; color: #1f0a14; margin-top: 7px; } .storagecenter a { width: 118px; height: 37px; color: #e7290f; border: solid 1px #e7290f; display: flex; align-items: center; justify-content: center; transition: background-color .3s ease, color .3s ease, border-color .3s ease; margin-top: 60px; border-radius: 4px; } .storagecenter a:hover { background-color: #e7290f; color: #ffffff; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .banner_industry { background-repeat: no-repeat !important; background-size: cover !important; height: 612px; margin-bottom: 0; animation: fadein 1s ease-in-out; } @keyframes fadein { from { opacity: 0.7; } to { opacity: 1; } } .banner_industry .banner_width { width: 1270px; } .banner_industry_title { font-size: 40px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; text-align: center; padding-top: 80px; } .banner_industry_m { margin-top: 40px; display: flex; justify-content: space-between; align-items: start; } .banner_industry_menu { width: 250px; margin-top: -40px; } .banner_industry_menu li { height: 55px; background-color: rgb(250, 250, 250, 0.2); cursor: pointer; color: #ffffff; line-height: 55px; font-size: 16px; letter-spacing: 0px; display: flex; justify-content: center; transition: background-color .3s ease; } .banner_industry_menu li::before { content: ''; display: block; width: 26px; height: 2px; background-color: #ededed; opacity: 0.2; position: relative; top: 27px; left: -29px; transition: width.3s ease; } .banner_industry_menu_p { text-align: left; width: 112px; } .industry_menu_active { background-color: #e7290f !important; transition: background-color .3s ease; } .industry_menu_active::before { width: 51px !important; opacity: 1 !important; left: -17px !important; transition: width.3s ease-out !important; } .banner_industry_c_t { font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #ffffff; } .banner_industry_c_line { width: 40px; height: 3px; background-color: #e7290f; margin-top: 11px; } .banner_industry_c_exp { width: 920px; height: 50px; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 28px; letter-spacing: 0px; color: #dddddd; margin-top: 25px; } .banner_industry_c_btn a { margin-top: 25px; display: block; width: 112px; height: 34px; border: solid 1px #ffffff; font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 34px; letter-spacing: 0px; color: #ffffff; text-align: center; transition: background-color .3s ease, color .3s ease, border-color .3s ease; border-radius: 4px; } .banner_industry_c_btn a:hover { border-color: #e7290f; color: #e7290f; background-color: #e7290f; color: #fff; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .banner_industry_c_line2 { width: 100%; height: 1px; background-color: #ffffff; opacity: 0.2; margin-top: 30px; } .banner_industry_c_rec { font-size: 20px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #ffffff; margin-top: 30px; } .banner_industry_c_dl { width: 718px; margin-top: 15px; display: flex; justify-content: space-between; align-items: center; } .banner_industry_c_dl dt { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #dddddd; } .dt_line { width: 1px; height: 20px; background-color: #ffffff; opacity: 0.2; } .banner_industry_c_case { font-size: 20px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #ffffff; margin-top: 32px; } .banner_industry_c_img { margin-top: 30px; height: 85px; background-color: #ffffff; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; padding: 10px; } .banner_industry_c_img img { width: 135px; height: 45px; display: block; } .banner_industry_c_panel { transition: all 0.3s; animation: fadein .5s ease-in-out; } .strategicecology { padding: 134px 0 85px 0; display: flex; align-items: center; flex-direction: column; } .strategicecology_exp { font-size: 16px; color: #707070; margin-top: 9px; } .strategicecology_m { width: 1340px; margin-top: 20px; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; } .strategicecology_m_b{ width: 1088px; margin-top: 20px; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; } .strategicecology_card { width: 244px; height: 230px; background-color: #f5f5f5; border-radius: 6px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 30px; } .strategicecology_card_ico { width: 64px; height: 64px; } .strategicecology_card>p { font-size: 24px; color: #1f0a14; margin-top: 25px; } .strategicecology_card_imgcontent { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; opacity: 0; background-color: #ffffff; transition: opacity .3s ease, box-shadow .3s ease; } .strategicecology_card_imgcontent_active .strategicecology_card_imgcontent { opacity: 1; transition: opacity .3s ease, box-shadow .3s ease; box-shadow: 2px 2px 8px 0px rgba(27, 33, 117, 0.16); } .strategicecology_card_imgcontent_img img { width: 130px; margin-bottom: 11px; } .strategicecology_card_single img { width: 81px; } .strategicecology_card_multiple { display: flex; flex-wrap: wrap; align-items: center; flex-direction: row; justify-content: center; } .strategicecology_card_multiple img { width: 80px; margin: 13px 8px; } .strategicecology_card_basicsoftware>div { display: flex; align-items: center; flex-direction: column; margin-top: 5px; } .strategicecology_card_basicsoftware_imgs1 { display: flex; align-items: center; margin-top: 11px; } .strategicecology_card_basicsoftware_imgs1 img { width: 88px; } .strategicecology_card_basicsoftware_imgs2 { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 11px; } .strategicecology_card_basicsoftware_imgs2 img { width: 80px; margin: 5px 11px; } .strategicecology_card_basicsoftware_title { font-size: 16px; } .strategicecology_card_facilities { display: flex; flex-direction: column; align-items: center; } .strategicecology_card_facilitietop { display: flex; align-items: center; } .strategicecology_card_facilitietop img { width: 89px; } .strategicecology_card_facilitiebt { display: flex; flex-direction: column; align-items: center; } .strategicecology_card_facilitiebt img { width: 107px; margin: 10px 0; } .industryrole { padding-bottom: 92px; display: flex; align-items: center; flex-direction: column; } .industryrole_m { width: 1340px; margin-top: 50px; display: flex; align-items: center; justify-content: space-between; } .industryrole_card { min-width: 318px; max-width: 624px; height: 400px; background-color: #ffffff; box-shadow: 0px 5px 10px 0px rgba(27, 33, 117, 0.14); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .industryrole_card_img1 { width: 150px; } .industryrole_card_img2 { width: 203px; } .industryrole_card_img3 { width: 147px; } .industryrole_card_left { display: flex; align-items: center; justify-content: center; width: 318px; } .industryrole_card_right { display: none; width: 306px; height: 400px; background-image: url(/uploads/image/tdi2/bg-industryrole.png); background-repeat: no-repeat; background-size: cover; border-radius: 0px 8px 8px 0px; } .industryrole_card_active .industryrole_card_right { /* display: flex !important; */ align-items: center; flex-direction: column; justify-content: center; } .industryrole_card_right_c i { width: 20px; height: 4px; background-color: #e7290f; display: block; } .industryrole_card_right_c p { color: #1f0a14; line-height: 26px; font-size: 15px; width: 242px; margin-top: 20px; } .successcase { background-image: url(/uploads/image/tdi2/case-success.png); background-repeat: no-repeat; padding-bottom:100px; background-size: cover; display: flex; align-items: center; flex-direction: column; } .successcase_m { padding-top: 62px; width: 1450px; display: flex; align-items: center; flex-direction: column; } .successcase_title { font-size: 24px; color: #1f0a14; margin-top: 24px; } .successcase_exp { font-size: 16px; color: #1f0a14; margin-top: 16px; } .successcase_tabs { margin-top: 50px; height: 43px; display: flex; align-items: center; justify-content: space-around; width: 100%; border-bottom: 1px solid #e1d6d6; position: relative; } .successcase_tabs li { font-size: 18px; color: #1f0a14; transition: color .3s ease; cursor: pointer; position: relative; } .successcase_tabs_active { color: #e7290f; transition: color .3s ease; display: flex; align-items: center; flex-direction: column; justify-content: center; } .successcase_tabs_active::after { content: ''; position: absolute; width: 100%; height: 4px; background-color: #e7290f; bottom: -11px; -webkit-transition: all .3s; animation: show 0.5s ease forwards; } @keyframes show { 0% { opacity: 0; transform: scale(0.1); } 100% { opacity: 1; transform: scale(1); } } .successcase_swiper { width: 1450px; padding-top: 70px !important; position: relative; } .successcase_swiper_slide { display: flex; align-items: center; width: 1349px !important; margin: 0 auto; position: relative; } .successcase_item { width: 433px; height: 460px; background-color: #ffffff; border-radius: 3px; position: relative; justify-content: space-between; margin-right: 22px; } .successcase_swiper_slide_img { width: 433px; object-fit: fill; border-radius: 3px 3px 0 0; } .successcase_swiper_slide_ext_logimg { position: absolute; width: 150px; height: 50px; box-shadow: 0px 0px 10px 0px rgba(164, 2, 2, 0.13); top: 209px; left: 29px; } .successcase_item_company { margin-top: 46px; font-size: 16px; color: #240909; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .successcase_item_child { width: 376px; margin-left: 30px; } .successcase_item i { height: 1px; background-color: #eeeeee; margin: 0 auto; margin-top: 13px; display: block; } .successcase_item_labels { display: flex; align-items: center; margin-top: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .successcase_item_labels p { max-width: 132px; height: 24px; background-color: #e7290f; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 14px; padding: 0 10px; } .successcase_item_labels span { color: #1f0a14; font-size: 18px; margin-left: 5px; } .successcase_item_exp { font-size: 14px; color: #767676; line-height: 26px; margin-top: 14px; } .successcase_jump { color: #e7290f; font-size: 14px; display: flex; align-items: center; margin-top: 65px; text-decoration: underline !important; } .successcase_jump svg { width: 16px; height: 16px; } .techpark { background-image: url(/uploads/image/tdi2/bg-techpark.png); background-repeat: no-repeat; height: 869px; background-size: cover; display: flex; align-items: center; flex-direction: column; } .techpark_m { padding-top: 90px; width: 1340px; margin: 0 auto; display: flex; align-items: center; flex-direction: column; } .techpark_intro { display: flex; align-items: center; justify-content: space-between; margin-top: 76px; width: 100%; } .techpark_intro_text { width: 570px; display: flex; align-items: center; flex-direction: column; } .techpark_intro_text img { width: 246px; height: 202px; } .techpark_intro_text p { font-size: 16px; line-height: 28px; color: #ffffff; text-shadow: 0px 0px 77px 0px rgba(255, 255, 255, 0.7); margin-top: 50px; } .techpark_intro video{ width: 626px; height: 375px; } .techpark_core{ display: flex; align-items: center; justify-content: start; width: 100%; margin-top: 97px; } .techpark_core p{ font-size: 20px; color: #ffffff; margin-right: 16px; } .techpark_core span{ font-size: 65px; color: #ffffff; margin-right: 16px; } .techpark_core i{ width: 3px; height: 25px; background-color: #e7290f; display: block; margin:0 56px; } .newsevent{ display: flex; align-items: center; flex-direction: column; padding: 90px 0; } .newsevent_exp{ color: #707070; font-size: 16px; margin-top: 9px; } .newsevent_m{ width: 1340px; display: flex; align-items: center; justify-content: space-between; margin-top: 60px; } .newsevent_m>div{ position: relative; background: #fafafa; width: 420px; height: 420px; } .newsevent_trends_banner{ width: 100%; } .newsevent_trends{ position: relative; } .newsevent_trends :hover .newsevent_trends_title{ color: #e7290f; transition: color .3s ease; } .newsevent_trends_m{ display: block; width: 100%; height: 100%; position: relative; } .newsevent_labels{ position: absolute; top: 0; left: 0; width: 90px; height: 32px; font-size: 14px; color: #fff; background: rgba(231, 41, 15, .6); display: flex; align-items: center; justify-content: center; } .newsevent_trends_texts{ padding: 20px 30px 40px; } .newsevent_trends_title{ font-size: 18px; color: #0b0b0b; height: 48px; transition: color .3s ease; } .newsevent_trends_source{ display: flex; align-items: center; font-size: 14px; color: #3d3d3d; margin-top: 20px; } .newsevent_trends_source img{ width: 16px; height: 16px; margin-right: 6px; } .newsevent_trends_source p{ margin-right: 22px; display: flex; align-items: center; } .newsevent_trends_content{ margin-top: 20px; color: #767676; line-height: 22px; font-size: 14px; } .newsevent_information{ display: flex; align-items: center; flex-direction: column; position: relative; justify-content: center; } .newsevent_information_item{ width: 90%; margin-top: 20px; transition: color .3s ease; } .newsevent_information_item:hover .newsevent_information_item_t{ color:#e7290f; transition: color .3s ease; } .newsevent_information_item_t{ color: #0b0b0b; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .newsevent_information_item_exp{ font-size: 14px; color: #767676; margin-top: 10px; } .banner_op_img{ width:380px; } .banner_op_content_exp{ font-size:36px; color:#ffffff; font-size:36px; margin-top: 32px; } .banner_op_main{ width:1064px; margin: 0 auto; }