@charset "utf-8"; /*html5*/ article, aside, dialog, footer, header, section, footer, nav, figure, menu { display: block } /* CSS Document */ /*内外边距*/ html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td, dd, dt { margin: 0; padding: 0; } html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, button, textarea, iframe, table, th, td, dd, dt { margin: 0; padding: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; outline: none } .clear { clear: both; overflow: hidden; } a { text-decoration: none; color: #333; } input { border: none; outline: medium; } * { box-sizing: border-box; } body { width: 100%; background: #F9F9F9; color: #333; font-size: 14px; overflow: hidden !important; } html { overflow-x: hidden; } table { border-collapse: collapse } img { border: none; max-width: 100%; } ul { list-style: none; } @-webkit-keyframes pointRadar { 0% { transform: scale(1); opacity: 0.5; } 80% { transform: scale(1); opacity: 0.5; } 100% { opacity: 0; transform: scale(5); } } @keyframes pointRadar { 0% { transform: scale(1); opacity: 0.5; } 80% { transform: scale(1); opacity: 0.5; } 100% { opacity: 0; transform: scale(5); } } @-webkit-keyframes heartbeat { 0% { transform: scale(0.5); } 100% { transform: scale(0.8); } } @keyframes heartbeat { 0% { transform: scale(0.5); } 100% { transform: scale(0.8); } } .inheader { background-color: #ffffff; /* border-bottom: 1px solid #CACACA; */ position: relative; } .inheader2{ transition: all .5s; } .inheader:hover { box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05); } .inheader1 { width: 90%; max-width: 1520px; margin: 0 auto; zoom: 1; } .inheader1:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .logo { font-size: 0; float: left; padding: 17px 0; } .logo img { height: 36px; } .nav { float: right; margin-left: 30px; } .nav ul li { float: left; /* line-height: 40px; */ line-height: 70px; font-size: 16px; color: #303233; margin-left: 36px; /* padding: 15px 0; */ } .nav ul li>a { display: block; color: #303233; position: relative; } .sHerder ul li>a { color: #fff; } .nav ul li>a::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; transition: all .5s; background: #0053A3; border-radius: 2px; } /* .nav ul li.on>a::before{ opacity: 1; width: 100%; } */ .nav ul li.on>a { /* color: #0053A3; */ color: #007BFF; } /* .nav ul li:hover .nav_sub { display: block; } */ .nav_sub { display: none; position: fixed; left: 0; top: 70px; /* bottom: 0; */ z-index: 999; width: 100%; background-color: rgba(0, 0, 0, 0.5); background-color: #ffffff; box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.05); } .nav_sub1 { width: 90%; max-width: 1300px; margin: 0 auto; } .nav_sub2 { margin: 0 auto; padding: 15px 0 0; } .nav_sub3 {} .nav_sub3 ul { overflow: hidden; } .nav_sub3 ul li { float: left; line-height: 25px; font-size: 16px; font-weight: 500; color: #303233; margin-left: 0; } .nav_sub3 a { color: #303233; } .nav_sub3 ul li a span { display: block; } .nav_sub3 ul li a span img { animation-duration: 1s; width: 6px; } .nav_width { width: 16.6666%; } .nav_sub3 ul li:hover a span { color: #0053A3; } .nav_sub3 ul li:hover a span img { position: relative; left: 10px; } .nav_sub4 { padding: 0 0 40px; } .nav_sub4 ul { overflow: hidden; } .nav_sub4 ul li { list-style-type: none; margin-left: 0; padding: 0; } .nav_sub4 ul li a { display: block; font-size: 14px; color: #333333; line-height: 22px; margin-top: 20px; } .nav_sub4 ul li a:first-child { margin-top: 0; } .nav_sub4 ul li a:hover { color: #0053A3 !important; } .nav_sub5 { text-align: center; } .nav_sub5 a { margin: 0 40px; font-size: 18px; color: #333333; line-height: 80px; } .nav_sub5 a:hover { color: #0053A3; } .pro_mess { position: fixed; left: 0; /* top: 72px; */ top: 64px; line-height: 64px; z-index: 963; width: 100%; /* line-height: 70px; */ background: #F9F9F9; transition: all .3s; } .pro_mess1 { width: 96%; max-width: 1300px; margin: 0 auto; font-size: 20px; color: #333333; } .pro_mess1 strong { display: inline-block; vertical-align: middle; line-height: 1; font-weight: normal; } .pro_mess1 span { display: inline-block; vertical-align: middle; font-size: 14px; color: #000000; margin-left: 36px; line-height: 1; } .pro_mess1 code { float: right; font-size: 14px; font-family: inherit; } .pro_mess1 code a { display: inline-block; color: #333333; margin-left: 36px; } .pro_mess1 code a.on { color: #0053A3; } /*.dev_menu ul li.on a{*/ /* color: #007BFF;*/ /* font-weight: bold;*/ /*}*/ .newTransate{ float: right; height: 70px; width: 40px; margin-left: 40px; position: relative; } .heade3_2 { width: 25px; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); z-index: 0; } .heade3_1 { border: none; outline: none; height: 100%; font-size: 14px; padding: 10px; box-sizing: border-box; /* color: #333333; */ color: rgba(51,51,51, 0); /* max-width: 12%; */ /* width: 10%; */ background: none; width: 100%; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-image: url(../img/img25.png); background-repeat: no-repeat; background-position: center right; padding-right: 10px; background-size: 8px; position: relative; z-index: 1; } .heade3_1 option { color: #333333; } .hHide{ display: none; } .sHerder .hHide{ display: block !important; } .sHerder .hShow{ display: none !important; } .sHerder .heade3_1 { background-image: url(../img/img25a.png) !important; } .inheader:hover .hHide{ display: none !important; } .inheader:hover .hShow{ display: block !important; } .inheader:hover .heade3_1 { background-image: url(../img/img25.png) !important; } .language { line-height: 40px; float: right; padding: 14px 0 14px; margin-left: 40px; } .language a { display: inline-block; line-height: 40px; font-size: 14px; color: rgba(48, 50, 51, 0.7); } .sHerder .language { color: white; } .sHerder .language a { color: #fff; } .language a.on { color: #303233; font-weight: 500; } .sHerder .language a.on { color: #fff; } .contain { width: 96%; max-width: 1300px; margin: 0 auto; } .pro_deta { background: linear-gradient(135deg, #222222 0%, #020202 100%); overflow: hidden; height: 684px; margin-top: 70px; /* margin-top: 70px; */ /*margin-top: 64px;*/ position: relative; } .pro_detaNew { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .pro_detaNew1 { height: 100%; display: flex; align-items: center; justify-content: space-between; } .pro_deta1 { font-size: 0; } .pro_deta2 {} .newDeta { position: absolute; right: 0; top: 0; } .pro_deta3 { font-size: 40px; color: #FFFFFF; line-height: 56px; } .pro_deta4 { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 28px; margin-top: 11px; } .pro_deta5 { font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 29px; margin-top: 30px; max-width: 550px; } .pro_deta6 { font-size: 0; margin-top: 60px; } .pro_spec { background: url(../img/pro_bg.png) no-repeat; background-size: 100% 100%; /* padding: 13px 0 49px; */ padding: 90px 0; } .pro_specnew { background: url(../img/pro_bg.png) no-repeat; background-size: 100% 100%; padding: 35px 0 73px; } .pro_spec1 { width: 96%; max-width: 1300px; margin: 0 auto; font-size: 0; } .pro_spec1 ul li { display: inline-block; vertical-align: top; margin-top: 60px; width: 33.3333%; } .pro_spec2 { font-size: 0; text-align: center; } .pro_spec3 { font-size: 22px; color: #FFFFFF; line-height: 30px; margin-top: 27px; text-align: center; } .pro_spec4 { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 20px; max-width: 249px; text-align: center; /* margin: 5px auto 0; */ margin: auto; margin-top: 10px; } .pro_tech { padding: 70px 0; background-color: #18181B; } .pro_tech1 { width: 96%; margin: 0 auto; /* max-width: 1300px; */ max-width: 1200px; } .pro_tech2 { font-size: 36px; color: rgba(255, 255, 255, 0.9); line-height: 50px; text-align: center; } .pro_tech3 { margin-top: 45px; overflow: hidden; } .pro_tech4 { float: left; max-width: 900px; } .pro_tech5 { float: left; margin-top: 15px; margin-right: 15px; width: 435px; height: 256px; background: #2F2F31; border-radius: 3px; border: 1px solid #46474A; padding: 33px 10px 28px 35px; } .pro_tech6 { font-size: 24px; font-weight: 500; color: #000000; line-height: 33px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pro_tech7 { font-size: 16px; font-weight: 400; color: #FFFFFF; line-height: 28px; margin-top: 20px; } .pro_tech8 { float: left; margin-top: 15px; margin-right: 15px; width: 435px; height: 110px; background: #2F2F31; border-radius: 3px; border: 1px solid #46474A; } .pro_tech9 { text-align: center; line-height: 110px; font-size: 24px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pro_tech10 { float: left; width: 482px; } .pro_tech11 { height: 208px; background: #2F2F31; border-radius: 3px; border: 1px solid #46474A; padding: 33px 10px 28px 35px; margin-top: 15px; } .pro_tech12 { height: 141px; background: #2F2F31; border-radius: 3px; border: 1px solid #46474A; padding: 33px 10px 28px 35px; margin-top: 15px; } .pro_tech13 { height: 256px; background: #2F2F31; border-radius: 3px; border: 1px solid #46474A; padding: 33px 10px 28px 35px; margin-top: 15px; } .pro_img { background: #18181BFF; /* background: #1D1D21; */ /* padding: 67px 0 88px; */ padding: 70px 0; } .pro_img1 { font-size: 0; margin-top: 70px; text-align: center; display: flex; justify-content: space-between; } .pro_img1 img {} .download { background: url(../img/download_bg.png) center no-repeat; background-size: 100% auto; padding: 100px 0 81px; } .download1 {} .download2 { font-size: 30px; font-weight: 400; color: #333333; line-height: 42px; text-align: center; } .download3 { text-align: center; margin-top: 29px; } .download3 a { display: inline-block; width: 183px; height: 48px; border: 1px solid #3487F9; border-radius: 9px; line-height: 46px; font-size: 16px; color: #3487F9; } .download3 a:hover { border: 1px solid #007BFF; background-color: #007BFF; color: #ffffff; box-shadow: 0px 0px 4px 0px rgba(0, 123, 255, 0.6); } .footer { padding: 120px 0 120px; background: url(../img/footer_bg.png) #1A1A1A center no-repeat; background-size: cover; } .footer1 { width: 90%; max-width: 1300px; margin: 0 auto; overflow: hidden; } .footer2 { float: left; } .footer3 { font-size: 14px; font-weight: 500; color: #FFFFFF; line-height: 20px; } .footer4 { font-size: 12px; font-weight: lighter; color: rgba(255, 255, 255, 0.6); line-height: 17px; font-weight: 300; margin-top: 15px; margin-bottom: 30px; } .footer5 { float: right; overflow: hidden; } .footer6 { float: left; margin-left: 70px; } .footer7 { font-size: 16px; font-weight: 500; color: #FFFFFF; line-height: 22px; } .footer7 a { color: #FFFFFF; } .footer8 { font-size: 12px; font-weight: lighter; color: rgba(255, 255, 255, 0.6); line-height: 17px; } .footer8 a { display: block; /* color: rgba(255, 255, 255, 0.6); */ color: #9FA3A6; margin-top: 30px; } .footer8 a:hover { /* color: rgba(255, 255, 255, 0.9); */ color: #FAFAFA; } .beian { background: #232323; padding: 20px 0; } .beian1 { width: 90%; max-width: 1300px; margin: 0 auto; font-size: 12px; color: #6C7073; line-height: 22px; zoom: 1; line-height: 44px; } .header1:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .beian1 a { color: #6C7073; } .beian1 span { float: right; font-size: 0; line-height: 1; } .beian1 span a { display: inline-block; margin-left: 50px; position: relative; } .beian1 span a code { display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); width: 190px; padding: 5px 7px 23px; background: url(../img/code_bg.png) center no-repeat; } .beian1_1 { display: block; } .beian1_2 { display: none; } .beian1 span a:hover .beian1_1 { display: none; } .beian1 span a:hover .beian1_2 { display: block; } .beian1 span a:hover code { display: block; } .download_tc { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .download_tc1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; padding: 33px 31px 69px 50px; background: rgba(48, 56, 68, 0.8); border-radius: 9px; border: 1px solid; overflow: hidden; } .download_tc2 { text-align: right; font-size: 0; } .download_tc3 { margin-top: 14px; } .download_tc3 a { display: inline-block; width: 131px; height: 40px; background: #3C4751; border-radius: 9px; font-size: 16px; color: #FFFFFF; line-height: 38px; text-align: center; margin-right: 30px; } .download_tc3 a.on { background-color: #007BFF; border: 1px solid #007BFF; } .download_tc4 { padding-right: 75px; margin-top: 40px; height: 410px; overflow-y: scroll; } .download_tc4::-webkit-scrollbar { width: 8px; } .download_tc4::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 8px rgba(216, 216, 216, 0.11); background: rgba(216, 216, 216, 0.11); } .download_tc4::-webkit-scrollbar-track { box-shadow: inset 0 0 8px rgba(216, 216, 216, 0.11); border-radius: 10px; background: rgba(216, 216, 216, 0.02); } .download_tc5 { height: 50px; background: #007BFF; border-radius: 9px 9px 0px 0px; padding: 0 50px 0 30px; } .download_tc5 ul { overflow: hidden; } .download_tc5 ul li { list-style-type: none; float: left; font-size: 20px; font-weight: lighter; color: #FFFFFF; line-height: 50px; } .dWidth { width: 23%; } .dWidth1 { width: 13%; } .dWidth2 { width: 15%; } .dWidth3 { width: 46%; } .dWidth4 { width: 3%; } .download_tc6 { display: none; } .show { display: block !important; } .download_tc6 ul { overflow: hidden; padding: 0 50px 0 30px; } .download_tc6 ul:nth-child(2n) { background: rgba(63, 77, 90, 0.48); backdrop-filter: blur(11px); } .download_tc6 ul li { list-style-type: none; float: left; font-size: 16px; font-weight: lighter; color: #FFFFFF; height: 60px; line-height: 60px; } .download_tc6 ul li a { display: block; font-size: 0; position: relative; width: 100%; height: 100%; } .download_tc6 ul li a img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .d_img1 { display: none; } .download_tc6 ul:hover .d_img { display: none; } .download_tc6 ul:hover .d_img1 { display: inline-block; } .download_tc6 ul:hover li { color: #007BFF; } .header_m { display: none; } .header_m1 { overflow: hidden; } .logo_m { width: 40%; float: left; margin: 9px 0 9px 9px; } .logo_m img { margin-top: 8px; } .icon_m { width: 10%; float: right; margin: 9px 0; } .icon_m img { height: 36px; } .menu_m { display: none; position: fixed; z-index: 1002; top: 0; left: 0; width: 60%; height: 100%; background-color: rgba(0, 0, 0, 0.9); padding: 23px 7% 0; } .menu_m1 { width: 77%; } .menu_m2 { margin-top: 20px; } .menu_m2 ul {} .menu_m2 ul li { list-style-type: none; line-height: 40px; border-bottom: 1px solid #FFFFFF; font-size: 16px; padding-left: 6%; } .menu_m2 ul li a { color: #fff; } .menu_m2 ul li a img { margin-right: 9px; vertical-align: middle; } .menu_msub { display: none; width: 100%; padding-left: 20px; } .menu_msub a { display: block; font-size: 14px; color: #fff; } .proMcu_spec1 { width: 96%; max-width: 1300px; margin: 0 auto; font-size: 0; } .proMcu_spec1 ul li { display: inline-block; vertical-align: top; margin-top: 60px; width: 20%; } .proMcu_ac { width: 96%; max-width: 1300px; margin: 0 auto; font-size: 0; } .proMcu_ac ul li { display: inline-block; vertical-align: top; margin-top: 49px; width: 33.333%; } .proMcu_spec2 { font-size: 0; text-align: center; } .proMcu_spec2 img { height: 70px; } .proMcu_spec3 { font-size: 22px; color: #FFFFFF; line-height: 30px; margin-top: 22px; text-align: center; } .proMcu_spec4 { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 20px; text-align: center; margin: 10px auto 0; max-width: 230px; } .pro_specnew .proMcu_spec4 { margin-top: 22px; } .proMcu_tech { margin-top: 55px; } .proMcu_tech ul { overflow: hidden; } .proMcu_tech ul li { list-style-type: none; float: left; width: calc((100% - 48px)/4); margin-right: 16px; margin-top: 16px; height: 215px; border-radius: 2px; border: 1px solid #46474A; background-color: #2F2F31; padding: 32px 19px 0 36px; } .proMcu_tech ul li:nth-child(4n) { margin-right: 0; } .proMcu_tech1 { font-size: 24px; font-weight: 500; color: #000000; line-height: 33px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .proMcu_tech2 { font-size: 16px; font-weight: 400; color: #FFFFFF; line-height: 28px; margin-top: 20px; } .proMcu_tech3 { /* margin-top: 140px; */ margin-top: 70px; font-size: 36px; color: rgba(255, 255, 255, 0.9); line-height: 47px; text-align: center; } #repurtion .swiper-slide span{ -webkit-line-clamp: 2; overflow: hidden; height:60px; } .proMcu_tech4 { /* margin-top: 80px; */ margin-top: 70px; } .proMcu_tech4>ul>li { list-style-type: none; overflow: hidden; margin-top: 36px; padding: 50px 104px 45px 31px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0) 100%); border-radius: 6px; border: 2px solid; box-sizing: border-box; transition: all .5s; } .proMcu_tech5 { float: left; font-size: 0; width: 380px; text-align: center; } .proMcu_tech6 { float: left; margin-left: 90px; width: calc(100% - 470px); } .proMcu_tech6a { font-size: 19px; font-weight: 500; color: rgba(255, 255, 255, 0.9); line-height: 28px; } .proMcu_tech6b { margin-top: 11px; font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 27px; } .apply { margin-top: 20px; } .apply ul { overflow: hidden; } .apply ul li { list-style-type: none; float: left; width: calc((100% - 120px)/4); margin-right: 40px; margin-top: 40px; border-radius: 6px; background-color: #262629; border: 1px solid #6D6D6E; font-size: 0; } .apply ul li:nth-child(4n) { margin-right: 0; } .proMcu_tech4>ul>li:hover { border: 2px solid #007BFF; transform: scale(1.02); } .proMcu_tech4>ul>li:hover .proMcu_tech6a { color: #000000; background: linear-gradient(90deg, #5AB1FF 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .proMcu_tech4>ul>li:hover .proMcu_title { color: #000000; background: linear-gradient(90deg, #5AB1FF 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .apply40 { margin-top: 20px; } .apply40 ul { overflow: hidden; padding: 5px; } .apply40 ul li { list-style-type: none; float: left; width: calc((100% - 108px)/5); margin-right: 27px; margin-top: 27px; border-radius: 6px; background-color: #262629; border: 2px solid #6D6D6E; font-size: 0; position: relative; transition: all .5s; } .apply40 ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 10, 38, 0) 0%, #000A26 100%); border-radius: 6px; } .apply40 ul li:nth-child(5n) { margin-right: 0; } .apply1 { font-size: 0; } .apply1 img { width: 100%; } .apply2 { position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; font-size: 20px; color: rgba(255, 255, 255, 0.9); line-height: 28px; } .apply40 ul li:hover { transform: scale(1.05); border: 2px solid #007BFF; } .apply40 ul li:hover .apply2 { font-weight: 500; color: #000000; line-height: 29px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .apply ul li:hover { border: 1px solid #0B61A7; } .apply3 { /* margin-top: 72px; */ margin-top: 70px; } .apply3 ul { overflow: hidden; } .apply3 ul li { list-style-type: none; float: left; width: calc((100% - 60px)/5); margin-right: 15px; border: 2px solid #28282C; position: relative; transition: all .5s; border-radius: 6px; overflow: hidden; } .apply3>ul>li::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 10, 38, 0) 0%, #000A26 100%); border-radius: 6px; } .newApply { position: absolute; bottom: 23px; left: 0; width: 100%; padding: 0 20px; } .apply3 ul li:nth-child(5n) { margin-right: 0; } .apply4 { font-size: 0; } .apply4 img { width: 100%; height: 251px; display: block; object-fit: cover; object-position: center; } .apply5 { font-size: 21px; color: rgba(255, 255, 255, 0.9); line-height: 29px; text-align: center; } .apply6 { height: 0; transition: all .5s; overflow: hidden; } .apply6 ul { overflow: hidden; } .apply6 ul li { float: none; width: 100%; list-style-type: none; font-size: 12px; color: rgba(255, 255, 255, 0.9); /*line-height: 29px;*/ line-height: 18px; margin-right: 0; border: 0; display: flex; } .apply6 ul li div{ width: 50%; } .apply3 ul li:nth-child(2) .apply6 ul li { width: 100%; } .apply3 ul li:nth-child(3) .apply6 ul li { width: 100%; } .apply3>ul>li:hover { border: 2px solid #007BFF; } .apply3 ul li:hover .apply6 { height: 145px; } .apply3 ul li:hover::before { background: linear-gradient(180deg, rgba(0, 10, 38, 0.71) 0%, #000A26 100%); border-radius: 6px; backdrop-filter: blur(1px); } .apply3 ul li:hover .apply5 { font-weight: 500; color: #000000; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .xt_img { font-size: 0; text-align: center; margin-top: 70px; } .pro_esp { background: url(../img/pro_bg1.png) no-repeat; background-size: auto 100%; padding: 40px 0 80px; } .pro_esp1 { width: 96%; margin: 0 auto; max-width: 1300px; font-size: 0; } .pro_esp1 ul li { display: inline-block; vertical-align: top; margin-top: 40px; width: 50%; } .pro_esp2 { font-size: 0; } .pro_esp2 img { display: inline-block; vertical-align: middle; } .pro_esp2 span { display: inline-block; vertical-align: middle; font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 21px; margin-left: 19px; } .tool { /* margin-top: 40px; */ margin-top: 70px; } .tool ul { zoom: 1; } .tool ul:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .tool ul li { list-style-type: none; border: 1px solid #868686; float: left; width: calc((100% - 100px)/2); border-radius: 8px; overflow: hidden; margin-right: 100px; transition: all .5s; position: relative; } .tool ul li:nth-child(2n) { margin-right: 0; } .tool ul li:hover { border: 2px solid #007BFf; transform: scale(1.05); } .tool ul li:hover::before { background: linear-gradient(180deg, rgba(0, 10, 38, 0.5) 0%, #000A26 100%); } .tool ul li:hover .tool_d{ bottom: 50%; transform: translateY(-50%); } .tool ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 10, 38, 0.1) 0%, #000A26 100%); border-radius: 6px; border: 3px solid rgba(255, 255, 255, 0.1); } .tool_d { position: absolute; bottom: 55px; width: 100%; left: 0; transition: all .5s; } .tool ul li:hover .tool_d { bottom: 42px; } .tool1 { font-size: 0; } .tool1 img { width: 100%; } .tool2 { text-align: center; font-size: 25px; color: #fff; line-height: 36px; } .tool ul li:hover .tool2 { color: #000000; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tool3 { margin-top: 12px; padding: 0 30px; overflow: hidden; height: 0; transition: all .5s; } .tool ul li:hover .tool3 { height: 80px; } .tool4 { position: relative; text-align: center; } .tool5 { font-size: 16px; color: #FFFFFF; line-height: 27px; display: inline-block; text-align: center; } .tool6 { font-size: 16px; color: #FFFFFF; line-height: 27px; display: inline-block; text-align: center; } .tool7 { position: relative; text-align: center; } .pSeries { margin-top: 70px; } .pSeries ul { zoom: 1; } .pSeries ul:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .pSeries ul li { list-style-type: none; float: left; width: calc((100% - 64px)/10*3); border: 1px solid #868686; border-radius: 8px; overflow: hidden; margin-right: 32px; transition: all .5s; position: relative; height: 412px; } .pSeries ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 10, 38, 0.8); border-radius: 6px; opacity: 0.8; backdrop-filter: blur(0px); } .pSeries ul li:nth-child(3n) { margin-right: 0; } .pSeries ul li.on { border: 2px solid #007BFf; /* transform: scale(1.03); */ width: calc((100% - 64px)/10*4); } .pSeries ul li.on::before { background: rgba(0, 10, 38, 1); } .pSeries1 { font-size: 0; } .pSeries1 img { /* width: 100%; */ } .pSeries2 { padding: 0 30px 30px; position: absolute; left: 0; bottom: 0; width: 100%; transition: all .5s; } .pSeries3 { font-size: 24px; color: rgba(255, 255, 255, 0.9); line-height: 36px; transition: all .5s; } .pSeries ul li.on .pSeries3 { color: #000000; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pSeries4 { position: relative; height: 0; overflow: hidden; transition: all .5s; } .pSeries ul li.on .pSeries4 { /* height: 70px; */ height: auto; } .pSeries5 { width: 100%; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 22px; } .pSeries5 span { display: block; } .inner_main { background-color: #F9F9F9; padding: 56px 0 120px; padding-top: 70px; } .inner_main1 { margin: 0 auto; width: 96%; max-width: 1300px; } .address { font-size: 20px; color: rgba(51, 51, 51, 0.6); line-height: 28px; margin-top: 28px; } .address a { color: rgba(51, 51, 51, 0.6); } .address a:last-child { color: #333333; } .newsDeta { overflow: hidden; margin-top: 28px; } .newsDeta_left { float: left; max-width: 67.5%; background-color: #ffffff; padding-bottom: 66px; } .newsDeta_left1 { font-size: 0; } .newsDeta_left2 { font-size: 40px; font-weight: 500; color: #333333; line-height: 56px; margin-top: 40px; padding: 0 60px; } .newsDeta_left3 { font-size: 14px; color: #666666; line-height: 20px; margin-top: 6px; padding: 0 60px; } .newsDeta_left4 { font-size: 16px; color: #666666; line-height: 32px; margin-top: 24px; padding: 0 60px; } .newsDeta_left5 { margin-top: 24px; padding: 0 60px; text-align: center; font-size: 14px; font-weight: 500; color: #666666; line-height: 20px; } .newsDeta_left5 img { display: block; margin: 0 auto 20px; } .newsDeta_right { float: left; margin-left: 40px; width: 250px; max-width: calc(32.5% - 40px); } .newsDeta_right1 { background-color: #ffffff; padding: 30px 15px 40px; } .newsDeta_right2 { padding: 0 8px 20px; font-size: 16px; color: #333333; line-height: 22px; border-bottom: 1px solid #EBEBEB; } .newsDeta_right3 ul li { list-style-type: none; overflow: hidden; border-bottom: 1px solid #EBEBEB; padding: 14px 0; cursor:pointer; } .newsDeta_right3 ul li:hover .newsDeta_right5a{ color: #0053A3; } .newsDeta_right4 { float: left; font-size: 0; } .newsDeta_right4 img { width: 70px; /* height: 70px; */ padding-top: 5px; } .newsDeta_right5 { float: right; width: calc(100% - 84px); } .newsDeta_right5a { height: 40px; font-size: 14px; color: #333333; line-height: 20px; display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-line-clamp: 2; /* 2行,只有 webkit内核支持 */ word-break: break-all; /* 纯英文换行 */ overflow: hidden; } .newsDeta_right5b { font-size: 12px; color: rgba(51, 51, 51, 0.6); line-height: 17px; margin-top: 13px; } .newsDeta_right6 { margin-top: 40px; padding: 20px 36px; background-color: #fff; } .newsDeta_right6a { font-size: 0; text-align: center; } .newsDeta_right6b { font-size: 14px; color: #333333; line-height: 20px; text-align: center; margin-top: 14px; } .newsDeta_right6b span { display: block; } .inner_banner { font-size: 0; transition: all 1s ease; position: relative; } .inner_banner>img { width: 100%; } .inner_banner::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.17) 100%); z-index: 1000; } .inner_banner1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; z-index: 1001; } .inner_banner2 { font-size: 40px; font-weight: 500; color: #ffffff; line-height: 56px; } .inner_banner3 { margin-top: 14px; font-size: 20px; color: #ffffff; line-height: 28px; } .news { width: 96%; max-width: 1300px; margin: -115px auto 0; position: relative; background-color: #ffffff; padding: 50px 50px 45px 70px; overflow: hidden; border-radius: 8px; box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05); transition: all .5s; z-index: 1001; } .news:hover{ box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5); } .news:hover .news1 { transform: scale(1.02); } .news:hover .news5 a{ color: #007BFF; } .news1 { float: right; font-size: 0; max-width: 50%; border-radius: 8px; transition: all .5s; overflow: hidden; } .news2 { float: left; max-width: 47%; } .news3 { margin-top: 25px; padding-right: 100px; position: relative; } .news3::before { content: ''; position: absolute; left: -70px; top: 15px; bottom: 15px; width: 5px; background: #007BFF; border-radius: 5px; } .news3_1{ width: 100%; font-size: 40px; font-weight: 500; color: #333333; line-height: 70px; position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news4 { margin-top: 30px; font-size: 20px; color: #333333; line-height: 35px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .news5 { margin-top: 36px; font-size: 20px; color: #333333; line-height: 28px; } .news5 a { color: rgba(51, 51, 51, 0.6); } .news_list { width: 96%; max-width: 1300px; margin: 0 auto; } .news_list ul { overflow: hidden; padding: 10px; } .news_list ul li { list-style-type: none; margin-top: 50px; float: left; margin-right: 29px; width: calc((100% - 58px)/3); font-size: 0; background-color: #ffffff; padding-bottom: 25px; transition: all .5s; border-radius: 10px; overflow: hidden; box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.05); } .news_list ul li:nth-child(3n) { margin-right: 0; } .news_list1 { font-size: 0; } .news_list1 img { width: 100%; height: 240px; display: block; /*object-fit: cover;*/ /*object-position: center;*/ transition: all .5s; } .news_list2 { height: 64px; font-size: 16px; font-weight: 500; color: #333333; line-height: 35px; margin-top: 26px; padding: 0 26px; display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-line-clamp: 2; /* 2行,只有 webkit内核支持 */ word-break: break-all; /* 纯英文换行 */ overflow: hidden; } .news_list3 { font-size: 16px; color: rgba(51, 51, 51, 0.6); line-height: 28px; text-align: right; margin-top: 60px; padding: 0 26px; } .news_list ul li:hover { background-color: #007BFF; box-shadow: 0px 4px 4px -3px rgba(0,0,0,0.1), 0px 7px 9px 1px rgba(0,0,0,0.06), 0px 3px 12px 2px rgba(0,0,0,0.05); } .news_list ul li:hover .news_list1 img{ transform: scale(1.02); } .news_list ul li:hover .news_list2 { color: #fff; } .news_list ul li:hover .news_list3 { color: #fff; } .page { text-align: center; margin: 80px auto; } .page a { display: inline-block; width: 40px; height: 40px; background: #FFFFFF; border-radius: 3px; border: 1px solid #D7D7D7; text-align: center; line-height: 38px; margin: 0 6px; } .page a.on { background-color: #3487F9; color: #fff; } .page a:hover { background: rgba(215, 215, 215, 0.2); } .page span { display: inline-block; width: 40px; height: 40px; background: rgba(215, 215, 215, 0.2); border: 1px solid #D7D7D7; border-radius: 8px; text-align: center; line-height: 38px; } .inner_nav { background-color: #ffffff; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05); position: relative; } .inner_nav1 { width: 90%; margin: 0 auto; text-align: center; } .inner_nav a { display: inline-block; position: relative; margin: 0 40px; font-size: 18px; font-weight: 500; color: #333333; line-height: 70px; font-weight: bold; } .inner_nav a.on { color: #007BFF; } .inner_nav a.on::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: #007BFF; border-radius: 2px; } .application { margin-top: 80px; } .application1 { width: 96%; margin: 0 auto; max-width: 1300px; } .application2 { font-size: 28px; color: #333333; line-height: 40px; } .application3 { margin: 40px 0 100px; background-color: #ffffff; padding: 1px 100px 80px; border-radius: 8px; box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05); } .application4 { font-size: 20px; font-weight: 500; color: #333333; line-height: 28px; margin-top: 60px; } .application5 { margin-top: 20px; overflow: hidden; } .application6 { float: left; width: 50%; margin-top: 40px; padding-right: 60px; overflow: hidden; } .application6 span { float: left; display: inline-block; width: 82px; font-size: 16px; color: #666666; line-height: 48px; text-align-last: justify; text-align: justify; } .application6 span code { color: #E51343; } .application6 input { float: left; margin-left: 18px; width: calc(100% - 100px); height: 48px; border-radius: 4px; border: 1px solid rgba(151, 151, 151, 0.6); font-size: 14px; padding-left: 14px; } .application6 input::input-placeholder { /* color: #303233; */ color: rgba(48, 50, 51, 0.5); } .application6 input::-webkit-input-placeholder { /* color: #303233; */ color: rgba(48, 50, 51, 0.5); } .application6 input::-moz-placeholder { /* color: #303233; */ color: rgba(48, 50, 51, 0.5); } .application6 input::-moz-placeholder { /* color: #303233; */ color: rgba(48, 50, 51, 0.5); } .application6 input::-ms-input-placeholder { /* color: #303233; */ color: rgba(48, 50, 51, 0.5); } .application6 select { float: left; outline: none; margin-left: 18px; width: calc(100% - 100px); height: 48px; border-radius: 4px; border: 1px solid rgba(151, 151, 151, 0.6); font-size: 14px; padding-left: 14px; appearance:none; -moz-appearance:none; -webkit-appearance:none; background-image: url(../img/select.png); background-position: right 15px center; background-repeat: no-repeat; background-size: 15px; } .application7 { text-align: center; margin-top: 100px; } .application7 input { width: 300px; height: 70px; border-radius: 8px; border: 2px solid #007BFF; font-size: 23px; font-weight: 500; color: #007BFF; background-color: #ffffff; } .application7 input:hover { background: #007BFF; color: white; } .application8 { margin-top: 40px; font-size: 14px; color: #303233; line-height: 26px; font-weight: 400; } .application8 a{ color: #007BFF; } .success { font-size: 0; text-align: center; margin-top: 255px; } .success1 { font-size: 30px; color: #333333; line-height: 42px; text-align: center; margin-top: 26px; } .success2 { font-size: 30px; color: rgba(51, 51, 51, 0.6); line-height: 42px; text-align: center; margin-top: 10px; } .success3 { text-align: center; margin-top: 60px; margin-bottom: 160px; } .success3 a { display: inline-block; width: 300px; height: 70px; background: #3487F9; border-radius: 9px; text-align: center; line-height: 70px; font-size: 23px; font-weight: 500; color: #FFFFFF; } .develop { background: #F9F9F9; padding: 70px 0 80px; } .develop1 { width: 96%; margin: 0 auto; max-width: 1300px; /* overflow: hidden; */ display: flex; } .dev_menu { float: left; width: 25%; background-color: #fff; padding: 20px; box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05); /* margin: 10px; */ border-radius: 10px; box-sizing: border-box; margin-right: 10%; } .dev_menu ul li { line-height: 49px; font-size: 16px; color: #333333; /* border-bottom: 1px solid #EBEBEB; */ } .dev_menu ul li a { color: #333333; display: block; border-bottom: 1px solid #EBEBEB; } .dev_menu ul li a.on { color: #007BFF; font-weight: bold; } .dev_menu ul li img { float: right; margin-top: 20px; } .dev_arrow1 { display: none; } .dev_menusub { display: none; } .dev_menusub a { display: block; border-bottom: 1px solid #EBEBEB; padding-left: 15px; } .dev_menu ul li.on .dev_menusub { display: block; } .dev_menu ul li.on .dev_arrow { display: none; } .dev_menu ul li.on .dev_arrow1 { display: block; } .all_down a { display: inline-block; width: 130px; height: 45px; background-color: rgba(0, 123, 255, 0.1); text-align: center; line-height: 45px; font-size: 16px; color: #007BFF; border-radius: 3px; } .all_down a img{ width: 16px; } .develop2 { float: right; width: 70%; } .develop2 ul { font-size: 0; padding: 10px; } .develop2 ul li { display: inline-block; vertical-align: top; margin-top: 40px; background-color: #ffffff; padding: 30px; margin-right: 25px; width: calc((100% - 25px)/2); border-radius: 8px; transition: all .5s; box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05); } .develop2 ul li:nth-child(2n) { margin-right: 0; } .develop3 { height: 56px; font-size: 20px; font-weight: 500; color: #333333; line-height: 28px; word-break:break-all; word-wrap:break-word; display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-line-clamp: 2; /* 2行,只有 webkit内核支持 */ overflow: hidden; } .develop4 { margin-top: 16px; } .develop4 span { display: inline-block; height: 22px; border-radius: 3px; line-height: 22px; padding: 0 8px; font-size: 14px; line-height: 20px; margin-right: 16px; } .red { border: 1px solid #E33C3C; color: #E33C3C; } .blue { border: 1px solid #3487F9; color: #3487F9; } .develop5 { margin-top: 20px; font-size: 16px; color: #333333; line-height: 26px; height: 156px; } .develop6 { opacity: 0; margin-top: 30px; font-size: 16px; } .develop6 a { display: inline-block; width: 183px; height: 47px; text-align: center; line-height: 47px; border: 1px solid #ffffff; color: #ffffff; border-radius: 8px; } .develop6 a:hover { background: #007BFF; color: #ffffff; } .develop2 ul li:hover { background-color: #007BFF; background-image: url(../img/bg_2.png); background-position: right bottom; background-repeat: no-repeat; background-size: cover; transform: scale(1.02); box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 11px 1px rgba(0,0,0,0.06), 0px 3px 15px 2px rgba(0,0,0,0.05); } .develop2 ul li:hover .develop3 { color: #fff; } .develop2 ul li:hover .red { background-color: #ffffff; border: 1px solid #ffffff; color: #007BFF; } .develop2 ul li:hover .blue { border: 1px solid #ffffff; color: #ffffff; } .develop2 ul li:hover .develop5 { color: #fff; } .develop2 ul li:hover .develop6 { opacity: 1; } .more { text-align: center; margin-top: 96px; } .more a { display: inline-block; width: 300px; height: 70px; border-radius: 8px; border: 2px solid #404040; font-size: 23px; font-weight: 500; color: #404040; line-height: 70px; } .contact { background-color: #F9F9F9; padding: 20px 0 120px; } .contact1 { width: 96%; margin: 0 auto; max-width: 1300px; } .contact2 { margin-top: 60px; font-size: 40px; color: #333333; line-height: 56px; text-align: center; } .contact3 { margin-top: 66px; } .contact3 ul { width: 100%; /* overflow: hidden; */ display: inline-block; } .contact3 ul li { float: left; background-color: #ffffff; border-radius: 9px; padding: 58px 30px 52px; margin-right: 18px; width: calc((100% - 54px)/4); transition: all .5s; box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05); } .contact3 ul li:nth-child(4n) { margin-right: 0; } .contact3a { font-size: 30px; font-weight: 500; color: #333333; line-height: 42px; } .contact3b { margin-top: 19px; font-size: 20px; color: #333333; line-height: 28px; } .contact3 ul li:hover { background-color: #007BFF; transform: scale(1.02); box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05); } .contact3 ul li:hover .contact3a { color: #ffffff; } .contact3 ul li:hover .contact3b { color: #ffffff; } .contact4 { margin-top: 20px; } .contact4 ul { overflow: hidden; padding: 10px; } .contact4 ul li { list-style-type: none; margin-top: 40px; float: left; margin-right: 30px; width: calc((100% - 30px)/2); padding: 60px 27px 70px; background-color: #ffffff; background-position: right; background-repeat: no-repeat; border-radius: 9px; transition: all .5s; box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05); } .contact4 ul li:last-child { background-position-x: calc(100% - 55px); } .contact4 ul li:nth-child(2n) { margin-right: 0; } .contact4a { font-size: 30px; font-weight: 500; color: #080808; line-height: 42px; } .contact4a img { margin-right: 9px; vertical-align: middle; } .contact_icon1 { display: none; } .contact4b { margin-top: 30px; font-size: 16px; color: #000000; line-height: 22px; } .contact4c { margin-top: 10px; font-size: 16px; color: #000000; line-height: 22px; } .contact4d { font-size: 16px; color: rgba(8, 8, 8, 0.6); /*line-height: 126px;*/ line-height: 116px; } .contact4 ul li:hover { background-color: #007BFF; transform: scale(1.02); box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05); } .contact4 ul li:hover:last-child { background-color: #ffffff; } .contact4 ul li:hover .contact_icon1 { display: inline-block; } .contact4 ul li:hover .contact_icon { display: none; } .contact4 ul li:hover .contact4a { color: #ffffff; } .contact4 ul li:hover .contact4b { color: #ffffff; } .contact4 ul li:hover .contact4c { color: #ffffff; } .lasrSwiper { height: 100%; background-color: #232323; } .sContact { background-color: #232323; } .sContact1 { padding: 140px 0 120px; transition: all .5s; position: relative; } .sContact1:hover { background-color: #0077FA; transform: scale(1.05); } .sContact1:hover .sContact4 { display: block; } .sContact2 { font-size: 30px; font-weight: 400; color: #FFFFFF; line-height: 42px; text-align: center; } .sContact3 { text-align: center; margin-top: 29px; } .sContact3 a { display: inline-block; width: 139px; height: 39px; border-radius: 6px; border: 1px solid #FFFFFF; line-height: 37px; font-size: 16px; color: #FFFFFF; } .sContact4 { width: 580px; display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .sTool .swiper-container { height: 100%; } .sTool1 { background: linear-gradient(179deg, #02294F 0%, #022040 43%, #011227 100%); position: relative; height: 100%; overflow: hidden; } .sTool1.join::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(261deg, rgba(2, 41, 79, 0.12) 0%, rgba(2, 32, 64, 0.95) 84%, #011227 100%); } .sTool2 { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); text-align: left; } .sTool2a { font-size: 40px; font-weight: 500; color: #FFFFFF; line-height: 56px; } .sTool2b { font-size: 20px; color: #FFFFFF; line-height: 28px; margin-top: 12px; font-family: Arial, Helvetica, sans-serif; } .sTool2c { font-size: 16px; color: #FFFFFF; line-height: 22px; margin-top: 20px; text-align: left; } .sTool2d { margin-top: 120px; } .sTool2d a { border: 1px solid white; box-sizing: border-box; display: inline-block; width: 132px; height: 47px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; /* background: rgba(255,255,255,0.1); */ /* background: url(../img/aBg.png) no-repeat; */ font-size: 16px; color: #FFFFFF; line-height: 47px; text-align: center; } .sTool2d a:hover { /* background-color: #0077FA; */ /* background: url(../img/aBg1.png) no-repeat; */ background: rgba(255, 255, 255, 0.5); } .sTool2d a img { width: 8px; margin-right: 6px; } .car_bg { opacity: 0; } .gif { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .sTool3 { position: absolute; right: 6%; top: 30%; width: 60%; } .sTool4 { font-size: 0; position: relative; width: 100%; } .sTool4a { position: absolute; right: 16px; bottom: 12px; width: 107%; } .sTool_icon { position: absolute; left: 19.34%; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; /* background: #FFFFFF; */ border-radius: 50%; } .sTool_icon1 { position: absolute; left: 35.5594%; top: 32.1364%; width: 14px; height: 14px; /* background: #FFFFFF; */ border-radius: 50%; } .sTool_icon2 { position: absolute; left: 54.9%; top: -10%; width: 14px; height: 14px; /* background: #FFFFFF; */ border-radius: 50%; } .sTool_icon3 { position: absolute; left: 71.2%; top: 4.129%; width: 14px; height: 14px; /* background: #FFFFFF; */ border-radius: 50%; } .sTool_icon4 { position: absolute; left: 84.3885%; top: 0%; transform: translateY(-50%); width: 14px; height: 14px; /* background: #FFFFFF; */ border-radius: 50%; } .sTool_icon5 { position: absolute; left: 81.7866%; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; /* background: #FFFFFF; */ border-radius: 50%; } .sTool_icon::after, .sTool_icon1::after, .sTool_icon2::after, .sTool_icon3::after, .sTool_icon4::after, .sTool_icon5::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: white; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .sIcon { display: block; width: 100%; height: 100%; position: relative; } /* .sIcon:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); -webkit-animation: pointRadar 2s linear infinite; animation: pointRadar 2s linear infinite; } */ .sIcon1, .sIcon2, .sIcon3, .sIcon4 { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); transform: scale(0); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .sIcon1 { -webkit-animation: radar 4s linear infinite; animation: radar 4s linear infinite; } .sIcon2 { -webkit-animation: radar 4s linear 1s infinite; animation: radar 4s linear 1s infinite; } .sIcon3 { -webkit-animation: radar 4s linear 1s infinite; animation: radar 4s linear 2s infinite; } .sIcon4 { -webkit-animation: radar 4s linear 1s infinite; animation: radar 4s linear 3s infinite; } @-webkit-keyframes radar { 0% { transform: scale(0) } 90% { opacity: 1 } to { opacity: 0; transform: scale(2) } } @keyframes radar { 0% { transform: scale(0) } 90% { opacity: 1 } to { opacity: 0; transform: scale(2) } } .sTool6 { position: absolute; right: 9.7916%; top: 29%; text-align: right; } .map_icon { position: absolute; left: 16.5617%; top: 32.75%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon1 { position: absolute; left: 28.3333%; top: 69.81%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon2 { position: absolute; left: 52.8337%; top: 15.4213%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon3 { position: absolute; left: 60.7%; top: 22.7344%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon4 { position: absolute; left: 80.4785%; top: 36.5659%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon5 { position: absolute; left: 85.3274%; top: 29.8887%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon6 { position: absolute; left: 87.1536%; top: 58.5%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon7 { position: absolute; left: 89.42%; top: 80.6%; width: 14px; height: 14px; /* background: #3588FA; */ border-radius: 50%; } .map_icon::after, .map_icon1::after, .map_icon2::after, .map_icon3::after, .map_icon4::after, .map_icon5::after, .map_icon6::after, .map_icon7::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #3588FA; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .mapIcon { display: block; width: 100%; height: 100%; position: relative; } /* .mapIcon:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(53,136,250, 0.6); -webkit-animation: pointRadar 2s linear infinite; animation: pointRadar 2s linear infinite; } */ .mapIcon1, .mapIcon2, .mapIcon3, .mapIcon4 { border-radius: 50%; border: 1px solid rgba(53, 136, 250, 0.6); transform: scale(0); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .mapIcon1 { -webkit-animation: radar 4s linear infinite; animation: radar 4s linear infinite; } .mapIcon2 { -webkit-animation: radar 4s linear 1s infinite; animation: radar 4s linear 1s infinite; } .mapIcon3 { -webkit-animation: radar 4s linear 1s infinite; animation: radar 4s linear 2s infinite; } .mapIcon4 { -webkit-animation: radar 4s linear 1s infinite; animation: radar 4s linear 3s infinite; } .fixed { position: fixed; left: 0; top: 0; width: 100%; /* z-index: 1000; */ z-index: 1002; } .sHerder { background-color: rgba(0, 0, 0, 0); border-bottom: 0; } .logoImg1 { display: none; } .sHerder .logoImg1 { display: inline-block; } .sHerder .logoImg { display: none; } .inheader:hover { background-color: #fff; } .inheader:hover .logoImg { display: block; } .inheader:hover .logoImg1 { display: none; } .inheader:hover .nav ul li>a { color: #333; } .inheader:hover .nav ul li.on>a { color: #3588FA; } .inheader .nav>ul>li:hover>a::before { background-color: #3588FA; opacity: 1; width: 100%; } .inheader:hover .language { color: rgba(48, 50, 51, 0.7); } .inheader:hover .language a { color: rgba(48, 50, 51, 0.7); } .inheader:hover .language a.on { color: #303233; } .sTool7 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; } .sTool7a { font-size: 40px; color: #303233; line-height: 56px; text-align: center; } .sTool7b { font-size: 19px; color: #303233; line-height: 26px; text-align: center; /* margin-top: 4px; */ margin-top: 18px; font-family: Arial, Helvetica, sans-serif; } .sTool7c { margin-top: 50px; } .sTool7c ul { overflow: hidden; padding: 10px; display: flex; } .sTool7c ul li { list-style-type: none; float: left; width: calc((100% - 72px)/3); background-color: #ffffff; border-radius: 8px; padding-bottom: 36px; margin-right: 36px; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05); /* height: 530px; */ } .sTool7c ul li:nth-child(3) { margin-right: 0; padding: 28px 0; overflow: hidden; } .sTool7c ul li:hover { border-radius: 8px; /* box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 13px 2px rgba(0,0,0,0.05); */ /* box-shadow:0px 8px 10px 1px rgba(0,0,0,0.06); */ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 13px 2px rgba(0, 0, 0, 0.05); } .sTool7d { border-radius: 8px 8px 0 0; font-size: 0; overflow: hidden; } .sTool7d img { width: 100%; height: 240px; display: block; transition: all .5s; } .sTool7c ul li:hover .sTool7d img { transform: scale(1.05); } .sTool7e { padding: 0 20px; font-size: 20px; font-weight: 500; color: #333333; line-height: 28px; margin-top: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .sTool7e a { color: #333333; } .sTool7f { padding: 0 20px; margin-top: 14px; font-size: 16px; color: rgba(48, 50, 51, 0.7); line-height: 22px; } .sTool7f img { width: 17px; display: inline-block; vertical-align: middle; margin-right: 6px; } .sTool7g { padding: 0 20px; margin-top: 30px; font-size: 14px; color: #303233; line-height: 26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .sTool8 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; } .sTool8a { font-size: 40px; color: #FFFFFF; line-height: 56px; text-align: center; } .sTool8b { margin-top: 18px; font-size: 19px; color: #FFFFFF; line-height: 26px; text-align: center; } .sTool8c { text-align: center; margin-top: 54px; } .sTool8c span { display: inline-block; border-top: 1px solid rgba(255, 255, 255, 0.8); } .sTool8c span a { display: inline-block; font-size: 20px; color: #FFFFFF; line-height: 28px; padding: 24px 50px 0; margin-top: -1px; } .sTool8c span a.on { color: #007BFF; border-top: 1px solid #007BFF; } .sTool8c span a:last-child { margin-right: 0; } .sTool8d { margin-top: 40px; } .sTool8e { background-color: rgba(176, 210, 247, 0.4); position: relative; height: 140px; border-radius: 6px; } .sTool8e img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* max-width: 80%; max-height: 80%; */ max-width: 160px; max-height: 80px; } #menu { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 999; max-width: 20px; } #menu li { opacity: 1; display: block; width: 1px; height: 20px; background: rgba(0, 0, 0, 0.3); margin: 5px auto !important; } #menu li.active { position: relative; width: 3px; height: 20px; background: #007BFF; } #menu li a { display: block; width: 100%; height: 100%; } .sTool8d .swiper-container { padding-bottom: 60px; } .sTool8d .swiper-pagination { bottom: 0; } .sTool8d .swiper-pagination-bullet { width: 8px; height: 8px; background: #FFFFFF; opacity: 0.13; } .sTool8d .swiper-pagination-bullet-active { width: 72px; height: 8px; background: #007BFF; border-radius: 4px; opacity: 1; } .sTool9 { display: none; } .show { display: block; } .intro { background-color: #F9F9F9; padding: 30px 0 60px; } .intro1 { width: 96%; margin: 0 auto; max-width: 1300px; position: relative; padding-left: 280px; } .intro2 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 40px; font-weight: 500; color: #000000; line-height: 56px; } .intro3 { margin-top: 40px; font-size: 22px; font-weight: 500; color: #333333; line-height: 30px; } .intro4 { margin-top: 10px; font-size: 20px; color: #666666; line-height: 38px; } .history { min-height: 850px; background: url(../img/develop_bg.png) no-repeat; padding: 95px 0 100px; background-size: 100% auto; position: relative; } .history::after{ content: ''; width: 100%; height: 100%; background: url(../img/develop_bg2.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; } .history1 { font-size: 40px; font-weight: 500; color: #FFFFFF; line-height: 56px; text-align: center; position: relative; z-index: 1; } .history2 { margin-top: 60px; position: relative; z-index: 1; } .history2a { margin: 0 auto; text-align: center; opacity: 0; transition: all 0.3s; } .swiper-slide-active .history2a { opacity: 1; } .history2b { text-align: center; font-size: 40px; font-weight: 600; color: #FFFFFF; line-height: 56px; } .history2c { display: inline-block; margin: 14px auto 0; font-size: 16px; color: #FFFFFF; line-height: 32px; text-align: left; margin: 0 30px; } .history3 { width: 96%; max-width: 1300px; margin: 80px auto 0; /* padding: 0 30px; */ position: relative; z-index: 1; } .history3::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; border-bottom: 1px solid #ffffff; } .history3 .swiper-container {} .history3a{ cursor:pointer; } .history3b { height: 1px; background: #FFFFFF; margin: 0 auto; } .history3c { margin-top: 20px; color: #FFFFFF; text-align: center; font-size: 20px; color: #FFFFFF; line-height: 28px; } .history3 .swiper-slide-thumb-active .history3b { background-color: #3487F9; height: 2px; } .history3 .swiper-slide-thumb-active .history3c { color: #3487F9; } .distribut { margin-top: 80px; } .distribut1 { width: 80%; margin: 0 auto; } .distribut2 { font-size: 40px; font-weight: 500; color: #333333; line-height: 56px; text-align: center; } .distribut3 { font-size: 20px; color: #333333; line-height: 28px; text-align: center; margin-top: 20px; } .distribut4 { font-size: 0; text-align: center; margin-top: 30px; } .distribut5 { overflow: hidden; margin-top: 40px; } .distribut6 { float: left; width: 33.333%; text-align: center; } .distribut6a { font-size: 45px; font-weight: 500; color: #0053A3; line-height: 58px; } .distribut6b { margin-top: 20px; font-size: 16px; color: #323232; line-height: 22px; } .partner { background: url(../img/news_bg.png) no-repeat; padding: 80px 0 60px; } .partner1 { width: 80%; margin: 0 auto; } .quality { padding: 80px 0 100px; background: url(../img/quality_bg.png) no-repeat; } .quality1 { width: 96%; max-width: 1300px; margin: 0 auto; } .quality2 { text-align: center; font-size: 40px; font-weight: 500; color: #333333; line-height: 56px; } .quality3 { text-align: center; margin-top: 18px; font-size: 20px; color: #000000; line-height: 28px; } .quality4 { margin-top: 36px; } .quality4 ul { font-size: 0; text-align: center; padding: 10px; } .quality4 ul li { vertical-align: top; position: relative; margin-right: 11px; margin-top: 25px; padding: 52px 12px 0; display: inline-block; width: calc((100% - 44px)/5); height: 340px; border-radius: 8px; /* border: 2px solid #E8E8E8; */ transition: all .5s; background: white; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05); } .quality4 ul li:nth-child(5n) { margin-right: 0; } .quality5 { font-size: 30px; color: #007BFF; line-height: 34px; text-align: center; font-weight: 600; font-family: Arial-BoldMT, Arial; } .quality6 { margin-top: 25px; font-size: 16px; color: #303233; line-height: 30px; text-align: left; } .quality7 { width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .quality7_1{ display: block; height: 130px; margin: auto; } .quality7_2{ display: none; height: 130px; margin: auto; } .quality4 ul li:hover { background-color: #007BFF; transform: scale(1.02); box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05); } .quality4 ul li:hover .quality5 { color: #fff; } .quality4 ul li:hover .quality6 { color: #fff; } .quality4 ul li:hover .quality7_1{ display: none; } .quality4 ul li:hover .quality7_2{ display: block; } .honors { padding: 80px 0; background-color: #F9F9F9; } .honors1 { width: 80%; margin: 0 auto; } .honors2 { text-align: center; margin-top: 54px; } .honors2 span { display: inline-block; border-top: 1px solid #D8D8D8; } .honors2 span a { display: inline-block; padding-top: 24px; margin-right: 90px; font-size: 20px; color: #000000; line-height: 28px; } .honors2 span a.on { color: #007BFF; border-top: 3px solid #007BFF; } .honors2 span a:last-child { margin-right: 0; } .honors3 { margin-top: 40px; } .honors4 { display: none; } .honors4 .swiper-container { padding-bottom: 50px; } .honors4 .swiper-pagination { bottom: 0; } .honors4 .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 8px; background: rgba(53, 136, 250, 0.13); opacity: 1; } .honors4 .swiper-pagination-bullet-active { width: 86px; background-color: #007BFF; } .honors6 { font-size: 0; border-radius: 6px 6px 0px 0px; } .honors6 img { width: 100%; } .honors5{ border-radius: 6px; box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05); } .honors7 { padding: 16px 30px 20px; background-color: #fff; border-radius: 0px 0px 6px 6px; /* border: 1px solid #E8E8E8; */ } .honors7 span { display: block; font-size: 20px; font-weight: 500; color: #272727; line-height: 30px; text-align: center; } .honors7 code { display: block; font-size: 16px; color: #272727; line-height: 27px; height: 54px; text-align: center; font-family: inherit; } .honors5:hover{ box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05); } .honors5:hover .honors7 { background-color: #007BFF; } .honors5:hover .honors7 span { color: #fff; } .honors5:hover .honors7 code { color: #fff; } .certificate { background: url(../img/certificate.png) no-repeat; padding: 80px 0 130px; } .certificate1 { width: 80%; margin: 0 auto; } .certificate2 { margin-top: 50px; text-align: center; } .certificate3 { display: inline-block; margin: 0 60px; } .certificate4 { font-size: 111px; font-weight: bold; /* color: #0053A3; */ color: #007BFF; line-height: 143px; } .certificate4 span { font-size: 65px; font-weight: bold; /* color: #0053A3; */ color: #007BFF; line-height: 84px; } .certificate5 { margin-top: 6px; font-size: 40px; color: #000000; line-height: 56px; } .banner { font-size: 0; text-align: center; } .banner .swiper-container { width: 100%; height: 100%; } .banner .swiper-slide { width: 100% !important; height: 100%; } .banner .swiper-pagination { bottom: 70px; } .banner .swiper-pagination-bullet { width: 86px; height: 4px; background: rgba(255, 255, 255, 0.3); opacity: 1; border-radius: 0; } .banner .swiper-pagination-bullet-active { background-color: #007BFF; } .banner1 { position: relative; width: 100%; height: 100%; font-size: 0; } .banner1>img { position: absolute; height: 100%; width: 100%; left: 0; right: 0; top: 0; } .zz { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.4) 100%); } .banner2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; overflow: hidden; padding: 0 5%; } .b_font { font-size: 40px; color: #FFFFFF; line-height: 69px; } .banner3 { float: left; text-align: left; max-width: 665px; } .banner4 { font-size: 40px; font-weight: 500; color: #FFFFFF; line-height: 56px; } .banner5 { font-size: 20px; font-weight: 500; color: #FFFFFF; line-height: 28px; margin-top: 2px; } .banner6 { font-size: 16px; color: #FFFFFF; line-height: 29px; margin-top: 36px; } .banner7 { float: right; font-size: 0; } .banner7 img { width: 480px; height: 480px; } .inPartner { background-color: #F9F9F9; padding: 2px 0 100px; } .inPartner1 { width: 96%; max-width: 1300px; margin: 0 auto; } .inPartner2 { font-size: 40px; color: #333333; line-height: 56px; padding-bottom: 27px; border-bottom: 1px solid #DFDFDF; margin-top: 95px; } .inPartner3 { margin-top: 12px; } .inPartner3 ul { overflow: hidden; } .inPartner3 ul li { list-style-type: none; float: left; background-color: #fff; width: calc((100% - 108px)/5); margin-right: 27px; height: 150px; margin-top: 27px; position: relative; text-align: center; box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.05); border-radius: 6px; transition: all .5s; } .inPartner5 ul li { list-style-type: none; float: left; background-color: #fff; width: calc((100% - 108px)/5); margin-right: 27px; height: 150px; margin-top: 27px; position: relative; text-align: center; box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.05); border-radius: 6px; transition: all .5s; } .inpImg1 { display: none; } .inPartner3 ul li a { display: block; } .inPartner3 ul li a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; max-height: 80%; } .inPartner3 ul li:nth-child(5n) { margin-right: 0; } .inPartner3 ul li:hover { background-color: #007BFF; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 13px 2px rgba(0, 0, 0, 0.05); transform: scale(1.02); } .inPartner5 ul li:hover { background-color: #007BFF; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 13px 2px rgba(0, 0, 0, 0.05); transform: scale(1.02); } .inPartner3 ul li:hover .inpImg { display: none; } .inPartner3 ul li:hover .inpImg1 { display: block; } .inPartner4 { /* margin-top: 50px; border-top: 1px solid #DFDFDF; */ } .inPartner4 a { border: 1px solid #333333; box-sizing: border-box; display: inline-block; padding: 13px 20px; font-size: 20px; color: #000000; border-radius: 6px; margin-top: 35px; margin-right: 40px; } .inPartner4 a.on { border: 1px solid #007BFF; color: #ffffff; background: #007BFF; } .inPartner5 { margin-top: 12px; overflow: hidden; position: relative; } .inPartner5 ul { overflow: hidden; display: none; position: relative; top: -100%; } .inPartner5 ul.show { top: 0; } .inPartner5 ul li { list-style-type: none; float: left; background-color: #fff; width: calc((100% - 108px)/5); margin-right: 27px; height: 150px; margin-top: 27px; position: relative; text-align: center; border-radius: 6px; box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.05); } .inPartner5 ul li a { display: block; } .inPartner5 ul li a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; max-height: 80%; } .inPartner5 ul li:nth-child(5n) { margin-right: 0; } .inPartner5 ul li:hover { background-color: #007BFF; } .inPartner5 ul li:hover .inpImg { display: none; } .inPartner5 ul li:hover .inpImg1 { display: block; } .proMcu_tech6c ul { overflow: hidden; display: flex; flex-wrap: wrap; } .proMcu_tech6c ul li { list-style-type: none; float: left; width: 21%; margin-top: 20px; padding: 0; border-bottom: 0; } .proMcu_tech6d ul { overflow: hidden; font-size: 0; } .proMcu_tech6d ul li { list-style-type: none; display: inline-block; vertical-align: top; word-break: break-all; width: 20%; margin-top: 20px; padding: 0 9px 0 0; border-bottom: 0; } .proMcu_title { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 21px; } .proMcu_title1 { margin-top: 6px; font-size: 16px; color: rgba(255, 255, 255, 0.6); line-height: 21px; } .sTool2c p { font-size: 20px; color: rgba(255, 255, 255, 0.9); line-height: 36px; position: relative; padding-left: 15px; } .sTool2c p::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #ffffff; } .displays { margin-top: 70px; font-size: 36px; color: #FFFFFF; line-height: 50px; text-align: center; } .displays1 { margin-top: 70px; } .displays1 ul { overflow: hidden; padding: 10px; } .displays1 ul li { border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; list-style-type: none; float: left; width: calc((100% - 64px)/3); margin-right: 32px; position: relative; transition: all .5s; border-radius: 9px; } .displays1 ul li:nth-child(3n) { margin-right: 0; } .displays1 ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(360deg, rgba(0, 10, 38, 0.7) 0%, rgba(0, 10, 38, 0.2) 100%); border-radius: 6px; } .displays1 ul li:hover { border: 2px solid #007BFF; transform: scale(1.03); } .displays1 ul li:hover .displays2{ color: #007BFF; } .displays2 { position: absolute; left: 0; bottom: 26px; width: 100%; text-align: center; font-size: 25px; color: #FFFFFF; line-height: 36px; } .displays3 { margin-top: 70px; } .displays3 ul { overflow: hidden; padding: 10px; } .displays3 ul li { list-style-type: none; float: left; width: calc((100% - 66px)/4); margin-right: 22px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 6px; overflow: hidden; border: 2px solid; height: 200px; padding: 30px 30px 0 30px; transition: all .5s; position: relative; } .displays3 ul li:nth-child(4n) { margin-right: 0; } .displays4 { font-size: 0; margin-top: 70px; } .displays5 { font-size: 25px; color: rgba(255, 255, 255, 0.8); line-height: 36px; } .displays6 { font-size: 16px; color: rgba(255, 255, 255, 0.6); line-height: 22px; margin-top: 20px; } .displays7 { display: none; position: absolute; right: 20px; bottom: 10px; font-size: 0; } .displays3 ul li:hover { transform: scale(1.01); background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 6px; border: 2px solid #007BFF; } .displays3 ul li:hover .displays7 { display: block; } .displays3 ul li:hover .displays5{ color: #007BFF; } .apply57 { padding: 70px 0; background-color: #18181B; } .apply57_font { text-align: center; font-size: 36px; color: rgba(255, 255, 255, 0.9); line-height: 50px; } .apply57_list { width: 96%; max-width: 1300px; margin: 50px auto 0; } .apply57_list ul { padding: 10px; overflow: hidden; } .apply57_list ul li { list-style-type: none; float: left; width: calc((100% - 69px)/4); margin-right: 23px; position: relative; margin-top: 20px; background: linear-gradient(360deg, #000A26 0%, rgba(0, 10, 38, 0.2) 100%); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all .5s; } .apply57_list ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(360deg, #000A26 0%, rgba(0, 10, 38, 0.2) 100%); border-radius: 6px; } .apply57_list ul li:nth-child(4n) { margin-right: 0; } .apply57_list1 { position: absolute; left: 0; bottom: 29px; width: 100%; text-align: center; font-size: 20px; color: rgba(255, 255, 255, 0.8); line-height: 28px; } .apply57_list ul li:hover { transform: scale(1.01); border: 2px solid #007BFF; } .apply57_list ul li:hover .apply57_list1{ color: #007BFF; } .facility { padding: 70px 0; background-color: #1B1B20; } .facility1 { width: 96%; max-width: 1300px; margin: 40px auto 0; } .facility1 ul { padding: 10px; overflow: hidden; } .facility1 ul li { margin-top: 30px; float: left; width: calc((100% - 62px)/3); margin-right: 31px; height: 218px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 6px; border: 1px solid; padding: 30px 30px 0; transition: all .5s; position: relative; } .facility1 ul li:nth-child(3n) { margin-right: 0; } .facility2 { font-size: 25px; font-weight: 600; color: rgba(255, 255, 255, 0.8); line-height: 36px; } .facility3 { font-size: 16px; color: rgba(255, 255, 255, 0.6); line-height: 22px; margin-top: 20px; } .facility4 { display: none; /*font-size: 0;*/ width: 150px; height: 135px; text-align: right; position: absolute; right: 33px; bottom: 13px; } .facility4 img{ height: 100%; /*display: block;*/ } .facility1 ul li:hover { background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 6px; border: 1px solid #007BFF; transform: scale(1.02); } .facility1 ul li:hover .facility4 { display: block; } .scheme { padding: 70px 0; background-color: #18181B; } .scheme1 { width: 96%; max-width: 1300px; margin: 0 auto; } .scheme2 { margin-top: 40px; } .scheme2 ul { overflow: hidden; padding: 10px; } .scheme2 ul li { list-style-type: none; float: left; width: calc((100% - 60px)/3); margin-right: 30px; margin-top: 30px; height: 230px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 6px; border: 1px solid; padding: 30px 16px 0 30px; transition: all .5s; } .scheme2 ul li:nth-child(3n) { margin-right: 0; } .scheme3 { /* font-size: 25px; */ font-size:20px; color: rgba(255, 255, 255, 1); line-height: 36px; } .scheme4 { /* font-size: 16px; */ font-size: 12px; color: rgba(255, 255, 255, 0.8); line-height: 22px; /* margin-top: 16px; */ margin-top: 20px; } .scheme5 { margin: 30px 10px 0; height: 250px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 6px; border: 1px solid; padding: 30px 30px 0; transition: all .5s; } .scheme2 ul li:hover { background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 6px; border: 1px solid #007BFF; transform: scale(1.03); } .scheme2 ul li:hover .scheme3 { /* font-size: 26px; */ font-weight: 500; color: #000000; line-height: 36px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .scheme6 { margin-top: 12px; } .scheme6 ul { overflow: hidden; } .scheme6 ul li { list-style-type: none; float: left; width: 33.3333%; font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 22px; } .scheme5:hover { background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 6px; border: 1px solid #007BFF; transform: scale(1.01); } .scheme5:hover .scheme3 { /* font-size: 26px; */ font-weight: 500; color: #000000; line-height: 36px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .soft { padding: 70px 0; background-color: #1B1B20; } .soft1 { font-size: 20px; color: #FFFFFF; line-height: 28px; text-align: center; margin-top: 21px; } .soft2 { width: 96%; margin: 70px auto 0; max-width: 1200px; } .soft3 { font-size: 0; text-align: center; padding: 0 10px; } .soft4 { margin-top: 50px; } .soft4 ul { overflow: hidden; padding: 10px; } .soft4 ul li { list-style-type: none; float: left; width: calc((100% - 60px)/4); height: 199px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 3px; border: 1px solid; padding: 25px 20px 0 25px; margin-right: 20px; margin-top: 20px; transition: all .5s; } .soft4 ul li:nth-child(4n) { margin-right: 0; } .soft4 ul li:last-child { width: calc((100% - 60px)/2 + 20px); margin-right: 0; } .soft5 { font-size: 25px; color: #FFFFFF; line-height: 36px; } .soft6 { font-size: 16px; color: #FFFFFF; line-height: 22px; margin-top: 24px; } .soft4 ul li:hover { background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 3px; border: 1px solid #007BFF; transform: scale(1.03); } .soft4 ul li:hover .soft5 { font-size: 26px; font-weight: 500; color: #000000; line-height: 36px; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .assist_tool { padding: 70px 0 100px; background-color: #18181B; } .assist_tool1 { width: 96%; max-width: 1300px; margin: 0 auto; margin-top: 70px; } .assist_tool1 ul { overflow: hidden; padding: 10px; } .assist_tool1 ul li { list-style-type: none; float: left; width: calc((100% - 30px)/2); margin-right: 30px; transition: all .5s; padding: 9px 9px 40px; border-radius: 6px; background-color: rgba(88, 88, 88, 0.22); border: 2px solid rgba(255, 255, 255, 0); box-sizing: border-box; } .innerH1 { background-color: #ffffff; } .assist_tool1 ul li:nth-child(2n) { margin-right: 0; } .assist_tool2 { font-size: 0; text-align: center; } .assist_tool3 { padding: 29px 20px 0; } .assist_tool4 { font-size: 20px; font-weight: 500; color: #000000; line-height: 28px; background: linear-gradient(90deg, #5AB1FF 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .assist_tool5 { margin-top: 10px; font-size: 16px; color: #FFFFFF; line-height: 28px; } .assist_tool1 ul li:hover { transform: scale(1.02); border: 2px solid #007BFF; } .dms { width: 96%; max-width: 1300px; margin: 0 auto; } .dms ul { padding: 10px 20px; } .dms ul li { overflow: hidden; padding: 30px; background-color: rgba(88, 88, 88, 0.22); margin-top: 50px; transition: all .5s; border-radius: 6px; } .dms ul li:hover { transform: scale(1.02); border: 1px solid #007BFF; } .dms1 { width: 55%; float: left; font-size: 0; position: relative; } .dms ul li:nth-child(2n) .dms1 { float: right; } .dms_play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0; } .dms2 { float: left; width: 45%; padding: 45px 0 0 100px; } .dms3 { font-size: 24px; font-weight: 500; color: rgba(255, 255, 255, 0.9); line-height: 34px; } .dms4 { margin-top: 20px; overflow: hidden; } .dms5 { float: left; } .dms5:nth-child(2n) { margin-left: 50px; } .dms6 { font-size: 19px; color: rgba(255, 255, 255, 0.9); line-height: 28px; } .dms7 { font-size: 16px; color: rgba(255, 255, 255, 0.6); line-height: 27px; margin-top: 14px; } .avm_list { width: 96%; max-width: 1300px; margin: 0 auto; font-size: 0; } .avm_list ul li { display: inline-block; vertical-align: top; /* margin-top: 90px; */ width: 25%; } .avm_solut { background-color: #18181B; padding: 70px 0; } .avm_solut1 { width: 96%; max-width: 1300px; margin: 70px auto 0; font-size: 0; text-align: center; } .avm_solut2 { width: 96%; max-width: 1300px; margin: 70px auto 0; } .avm_solut3 { overflow: hidden; } .avm_solut4 { font-size: 0; float: left; width: 53%; } .avm_solut5 { float: right; margin-top: 20px; width: 19%; height: 423px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 6px; border: 1px solid; margin-right: 20px; transition: all .5s; padding: 30px 30px 0; } .avm_solut5a { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.9); line-height: 28px; } .avm_solut5b { font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 29px; margin-top: 16px; } .avm_solut5:hover { transform: scale(1.02); background: linear-gradient(135deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 6px; border: 2px solid #007BFF; } .avm_solut5:hover .avm_solut5a{ color: #007BFF; } .avm_solut6 { margin-top: 100px; } .avm_solut6 ul { overflow: hidden; padding: 10px; } .avm_solut6 ul li { list-style-type: none; float: left; width: calc((100% - 24px)/2); margin-right: 24px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.22) 0%, rgba(92, 92, 92, 0.05) 100%); border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.2); transition: all .5s; } .avm_solut6 ul li:nth-child(2n) { margin-right: 0; } .avm_solut6a { font-size: 0; position: relative; } .avm_solut6b { font-size: 30px; font-weight: 500; color: rgba(255, 255, 255, 0.9); line-height: 90px; text-align: center; } .avm_solut6 ul li:hover { transform: scale(1.02); border: 2px solid #007BFF; } .avm_solut6 ul li:hover .avm_solut6b { color: #000000; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .avm_solut7 { font-size: 36px; color: rgba(255, 255, 255, 0.9); line-height: 56px; text-align: center; margin-top: 120px; } .avm_solut8 { font-size: 20px; color: rgba(255, 255, 255, 0.7); line-height: 28px; margin-top: 20px; text-align: center; } .avm_solut9 { margin-top: 70px; } .avm_solut9 ul { overflow: hidden; padding: 10px; } .avm_solut9 ul li { list-style-type: none; float: left; width: calc((100% - 60px)/4); margin-right: 20px; position: relative; transition: all .5s; height: 200px; background: linear-gradient(180deg, rgba(88, 88, 88, 0.2) 0%, rgba(92, 92, 92, 0.13) 100%); border-radius: 6px; border: 1px solid; } .avm_solut9 ul li:nth-child(4n) { margin-right: 0; } .avm_solut9a { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center; font-size: 25px; color: rgba(255, 255, 255, 0.9); line-height: 36px; } .avm_solut9b { display: none; font-size: 0; position: absolute; right: 7px; bottom: 11px; } .avm_solut9 ul li:hover { background: linear-gradient(135deg, rgba(0, 92, 255, 0.2) 0%, rgba(0, 123, 255, 0.13) 100%); border-radius: 6px; border: 1px solid #007BFF; transform: scale(1.03); } .avm_solut9 ul li:hover .avm_solut9a { color: #000000; background: linear-gradient(90deg, #00AFFD 0%, #0077FA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .avm_solut9 ul li:hover .avm_solut9b { display: block; } .certification { background-color: #F0F2F5; position: relative; height: 100%; } .certification1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; } .newIndex { font-size: 36px; font-weight: 500; color: #303233; line-height: 56px; text-align: center; } .newIndex1 { font-size: 20px; color: #303233; line-height: 28px; margin-top: 20px; text-align: center; } .newIndex2 { margin-top: 40px; } .newIndex2 ul { overflow: hidden; } .newIndex2 ul li { border: 2px solid white; box-sizing: border-box; list-style-type: none; float: left; width: 19%; margin-right: 1%; position: relative; /* height: 500px; */ height: 515px; padding: 30px 16px 0; transition: all .3s; border-radius: 6px; background-size: auto 100%; background-repeat: no-repeat; overflow: hidden; } .newIndex2 ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 83, 163, 0.8) 0%, rgba(0, 83, 163, 0) 100%); } .newIndex2 ul li.on { width: 40%; background-position: right bottom !important; /* background-size: 100% 100% !important; */ } .newIndex2 ul li.on::before { background: linear-gradient(225deg, #ECF1FF 0%, rgba(250, 252, 255, 0) 100%); } .newIndex2 ul li:nth-child(4n) { margin-right: 0; } .newIndex3 { /* font-size: 20px; */ font-size: 19px; font-weight: 500; color: #FFFFFF; line-height: 28px; position: relative; } .newIndex4 { font-size: 16px; color: #FFFFFF; line-height: 28px; margin-top: 20px; position: relative; } .newIndex5 { margin-top: 8px; display: none; opacity: 0; transition: all .3s; } .newIndex5 a { display: inline-block; padding-right: 9px; margin-right: 9px; position: relative; } .newIndex5 a::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #999; } .newIndex5 a:last-child::before { width: 0; } .newIndex5 a.on { /* color: #007BFF; */ color: #007BFF; } .newIndex6 { margin-top: 20px; display: none; opacity: 0; transition: all .3s; } .newIndex7 { overflow: hidden; display: none; } .newIndex7a { float: left; font-size: 0; width: 30%; position: relative; /* display: inline-block; vertical-align: middle; */ } .newIndex7a img { display: block; } .newIndex7b { float: right; width: 66%; font-size: 12px; color: #333333; line-height: 27px; /* display: inline-block; vertical-align: middle; */ position: relative; z-index: 1; } .newIndex7b p { position: relative; /* padding-left: 10px; */ } /* .newIndex7b p::before{ content: ''; position: absolute; left: 0; top: 12px; display: inline-block; width: 3px; height: 3px; background: #007BFF; border-radius: 50%; } */ .newIndex7b p span { display: none; vertical-align: middle; width: 3px; height: 3px; background: #007BFF; border-radius: 50%; margin-right: 6px; } .newIndex7b h2 { font-size: 16px; font-weight: 500; /* color: #007BFF; */ color: #007BFF; line-height: 35px; } .newIndex7c { /* width: 100%; float: left; margin-top: 20px; */ position: absolute; left: 24px; bottom: 50px; } .newIndex7c a { display: block; width: 132px; height: 47px; /* width: 183px; height: 48px; */ border: 1px solid #3487F9; text-align: center; line-height: 46px; font-size: 16px; color: #3487F9; border-radius: 3px; } .newIndex7c a img { width: 8px; } .nm_arrow1 { display: none; } .newIndex7c a:hover { color: #fff; background-color: #007BFF; } .newIndex7c a:hover .nm_arrow { display: none; } .newIndex7c a:hover .nm_arrow1 { display: inline-block; } .newIndex2 ul li.on { padding: 30px 20px 0; } .newIndex2 ul li.on .newIndex3 { color: #333333; } .newIndex2 ul li.on .newIndex4 { color: #333333; margin-top: 7px; } .newIndex2 ul li.on .newIndex5 { display: block; opacity: 1; } .newIndex2 ul li.on .newIndex6 { display: block; opacity: 1; } .community { position: relative; height: 100%; overflow: hidden; } .community1 { height: 100%; font-size: 0; position: relative; } .community1 img { height: 100%; display: block; object-fit: cover; object-position: center; } .community1::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%); } .community2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; } .community3 { font-size: 40px; font-weight: 500; color: #FFFFFF; line-height: 56px; text-align: center; } .community4 { font-size: 20px; color: #FFFFFF; line-height: 28px; text-align: center; margin-top: 20px; } .community5 { margin-top: 100px; } .community5 ul { padding: 10px; font-size: 0; } .community5 ul li { list-style-type: none; display: inline-block; vertical-align: middle; width: calc((100% - 100px)/3); height: 355px; margin-right: 50px; position: relative; } .community5 ul li:nth-child(3n) { margin-right: 0; } .community10 { width: 100%; background: url(../img/community_bg2.png) no-repeat; background-size: 100% 100%; padding: 52px 0; transition: all .5s; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .community6 { font-size: 0; text-align: center; } .community6 img { height: 80px; } .community7 { font-size: 28px; color: rgba(255, 255, 255, 0.9); line-height: 38px; text-align: center; margin-top: 32px; transition: all .5s; } .community8 { opacity: 0; display: none; overflow: hidden; transition: all .5s; font-size: 15px; color: rgba(255, 255, 255, 0.7); line-height: 21px; margin-top: 12px; text-align: center; padding: 0 66px; } .community9 { opacity: 0; display: none; overflow: hidden; transition: all .5s; font-size: 18px; color: #007BFF; line-height: 25px; margin-top: 22px; text-align: center; } .community9 a { color: #007BFF; } .community5 ul li:hover .community10 { transform: translateY(-50%) scale(1.03); background: url(../img/community_bg3.png) no-repeat; background-size: 100% 100%; } .community5 ul li:hover .community7 {} .community5 ul li:hover .community8 { opacity: 1; display: block; } .community5 ul li:hover .community9 { opacity: 1; display: block; } .worldwide { position: relative; height: 100%; } .worldwide1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; } .worldwide2 { font-size: 40px; font-weight: 500; color: #303233; line-height: 56px; text-align: center; } .worldwide3 { margin-top: 20px; font-size: 20px; color: #303233; line-height: 28px; text-align: center; } .worldwide3 span { margin: 0 45px; } .worldwide4 { margin-top: 40px; position: relative; } .worldwide5 { margin-top: -43px; } .worldwide5 ul { overflow: hidden; } .worldwide5 ul li { list-style-type: none; float: left; width: 25%; text-align: center; } .worldwide6 { font-size: 40px; font-weight: 500; color: #007BFF; line-height: 58px; } .worldwide7 { margin-top: 17px; font-size: 14px; color: #333333; line-height: 20px; } .newNews { padding: 0 59px 0 25px; height: 100%; overflow-y: scroll; } .newNews::-webkit-scrollbar { width: 2px; } .newNews::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 11px rgba(216, 216, 216, 0.11); background: rgba(216, 216, 216, 0.11); } .newNews::-webkit-scrollbar-track { box-shadow: inset 0 0 11px rgba(216, 216, 216, 0.11); border-radius: 10px; background: rgba(216, 216, 216, 0.02); } .newNews1 { padding-bottom: 11px; border-bottom: 1px dashed #EBEBEB; margin-top: 12px; } .newNews2 { font-size: 16px; color: #303233; line-height: 22px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .newNews3 { font-size: 12px; color: rgba(48, 50, 51, 0.7); line-height: 14px; margin-top: 10px; } .newNews1:hover .newNews2 { color: #0053A3; } .newNews1:hover .newNews3 { color: #0053A3; } .newsMore { margin-top: 40px; text-align: center; } .newsMore a { display: inline-block; border: 1px solid #000000; border-radius: 3px; width: 130px; height: 45px; text-align: center; line-height: 43px; font-size: 16px; color: #000000; } .newsMore a img { width: 8px; margin-right: 6px; } .newsMore a:hover { background-color: #0077FA; border: 1px solid #0077FA; color: #fff; } .newsImg1 { display: none; } .newsMore a:hover .newsImg { display: none; } .newsMore a:hover .newsImg1 { display: inline-block; } .sImg img { width: 100%; } .community1 img { width: 100%; } .culture { width: 96%; margin: 100px auto 0; max-width: 1300px; overflow: hidden; } .culture1 { float: left; width: calc(50% - 9px); font-size: 0; position: relative; } .culture1::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 3px; transition: all 0.3s; } .culture_font { width: calc(100% - 132px); overflow: hidden; position: absolute; left: 66px; top: 50%; transform: translateY(-50%); } .culture_font3 { width: 95px; margin-right: 5px; margin-left: -95px; transition: all .3s; display: inline-block; vertical-align: middle; } .culture_font4 { width: calc(100% - 105px); display: inline-block; vertical-align: middle; } .culture_font1 { font-size: 20px; font-weight: 500; color: #FFFFFF; line-height: 28px; } .culture_font2 { font-size: 16px; color: #FFFFFF; line-height: 22px; margin-top: 20px; } .culture2 { float: right; width: calc(50% - 9px); font-size: 0; position: relative; } .culture2::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 3px; transition: all 0.3s; } .culture3 { float: left; width: 100%; font-size: 0; margin-top: 18px; position: relative; } .culture3::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 3px; transition: all 0.3s; } .culture1:hover::before { background: rgba(0, 123, 255, 0.6); } .culture2:hover::before { background: rgba(0, 123, 255, 0.6); } .culture3:hover::before { background: rgba(0, 123, 255, 0.6); } .culture1:hover .culture_font3 { margin-left: 0; } .culture2:hover .culture_font3 { margin-left: 0; } .culture3:hover .culture_font3 { margin-left: 0; } .newHistory { margin-top: 20px; text-align: center; font-size: 20px; color: #FFFFFF; line-height: 28px; position: relative; z-index: 1; } .newDistribut { display: inline-block; font-size: 0; position: relative; margin-bottom: 120px; margin-top: 160px; } .newDistribut img { /* transition: all .3s; */ } .newAddre-img{ margin-top: 12%; } .newAddre-img2{ width: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } /* .newDistribut img:hover { transform: scale(1.02); } */ .newDistribut1 { position: relative; width: 230px; height: 128px; background: #FFFFFF; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05); border-radius: 3px; transition: all .3s; } .newDistribut2 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; padding: 0 20px; } .newDistribut3 { font-size: 18px; color: #007BFF; line-height: 25px; text-align: left; } .newDistribut4 { font-size: 14px; color: rgba(48, 50, 51, 0.7); line-height: 16px; margin-top: 9px; text-align: left; } .newAddre { position: absolute; left: -230px; top: -63px; } .newAddre1 { position: absolute; left: -230px; top: 110px; } .newAddre2 { position: absolute; left: -230px; /* bottom: 57px; */ bottom: 100px; } .newAddre3 { position: absolute; right: -230px; top: -63px; } .newAddre4 { position: absolute; right: -230px; top: 110px; } .newAddre5 { position: absolute; right: -230px; /* bottom: 57px; */ bottom: 100px; } .newDistribut1:hover { background-color: #007BFF; transform: scale(1.02); } .newDistribut1:hover .newDistribut3 { color: #fff; } .newDistribut1:hover .newDistribut4 { color: #fff; } .newAddre_icon{ position: absolute; width: 8px; height: 8px; border-radius: 50%; } .newAddre_icon::after{ content: ''; width: 8px; height: 8px; background: #007BFF; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .newAddre_ico{ display: block; width: 100%; height: 100%; position: relative; } .newAddre_ico1,.newAddre_ico2{ border-radius: 50%; transform: scale(0); background: rgba(0,123,255, 0.5); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .newAddre_ico1 { -webkit-animation: radars 4s linear infinite; animation: radars 4s linear infinite; } .newAddre_ico2 { -webkit-animation: radars 4s linear .5s infinite; animation: radars 4s linear .5s infinite; } .newAddre-fd{ left: 14.5%; top: 77%; } .newAddre-fd2{ left: 17.6%; top: 64%; } .newAddre-fd3{ left: 32.3%; top: 52%; } .newAddre-fd4{ left: 37.3%; top: 42%; } .newAddre-fd5{ left: 58.5%; top: 66%; } .newAddre-fd6{ left: 58.6%; top: 28%; } .newAddre-fd7{ left: 65%; top: 67%; } .newAddre-fd8{ left: 65%; top: 32%; } .newAddre-fd9{ left: 80.5%; top: 41%; } .newAddre-fd10{ left: 91.6%; top: 26%; } @-webkit-keyframes radars { 0% { transform: scale(0) } 90% { opacity: 1 } to { opacity: 0; transform: scale(3) } } @keyframes radars { 0% { transform: scale(0) } 90% { opacity: 1 } to { opacity: 0; transform: scale(3) } } .luntan { padding: 84px 0; background-color: #F9F9F9; } .luntan1 { width: 96%; max-width: 1300px; margin: 0 auto; padding: 316px 0; background-color: #ffffff; } .luntan2 { font-size: 30px; color: #333333; line-height: 42px; text-align: center; } .luntan3 { font-size: 30px; color: rgba(51, 51, 51, 0.6); line-height: 42px; text-align: center; margin-top: 10px; } .luntan4 { text-align: center; margin-top: 60px; } .luntan4 a { display: inline-block; width: 300px; height: 70px; background-color: #3487F9; text-align: center; line-height: 70px; border-radius: 9px; font-size: 23px; font-weight: 500; color: #FFFFFF; } .jh_menu { width: 96%; max-width: 1300px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1001; } .jh_menu1 { position: relative; } .jh_left { width: 42px; cursor:pointer; position: absolute; left: -70px; top: 50%; transform: translateY(-50%); } .jh_left_1{ display: block; } .jh_left_2{ display: none; } .jh_left:hover .jh_left_1{ display: none; } .jh_left:hover .jh_left_2{ display: block; } .jh_right { width: 42px; cursor:pointer; position: absolute; right: -70px; top: 50%; transform: translateY(-50%); } .jh_right_1{ display: block; } .jh_right_2{ display: none; } .jh_right:hover .jh_right_1{ display: none; } .jh_right:hover .jh_right_2{ display: block; } .jh_menu2 { border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; background-color: rgba(64, 64, 64, 0.12); padding: 0 10px; width: 100%; min-height: 130px; display: flex; align-items: center; border-radius: 6px 6px 0 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all 0.3s; position: absolute; bottom: 0; cursor:pointer; } .jh_menu2 img { margin-right: 10px; vertical-align: middle; width: 100px; } .jh_menu3 { display: inline-block; vertical-align: middle; max-width: calc(100% - 110px); display: flex; align-items: center; } .jh_menu4 { /* font-size: 14px; */ font-size: 16px; font-weight: 500; color: #FFFFFF; line-height: 22px; } .jh_menu5 { display: none; /* font-size: 12px; */ font-size: 14px; color: #FFFFFF; line-height: 20px; margin-top: 10px; } .swiper-slide-active .jh_menu2 { border: 0; /* background-color: #007BFF; */ background-color: rgba(0, 123, 255, 0.50); min-height: 160px; } .swiper-slide-active .jh_menu3 { display: block; } .swiper-slide-active .jh_menu3-s{ padding-left: 40px; } .swiper-slide-active .jh_menu5 { display: block; } .jh_menu1 .swiper-slide { /* margin-top: 30px; */ min-height: 160px; } .jh_menu1 .swiper-slide-active { /* margin-top: 0; */ /* margin-top: 2px; */ } .jh_menu1 .swiper-slide-active .jh_menu4 { font-size: 20px; } .jh_main1 { width: 96%; max-width: 1300px; margin: 0 auto; } .jh_main2 { padding: 100px 0; } .jh_main3 { font-size: 40px; font-weight: 500; color: #303233; line-height: 56px; text-align: center; } .jh_main3_new { margin-top: 70px; font-size: 40px; font-weight: 500; color: #303233; line-height: 56px; text-align: center; } .jh_main4 { margin-top: 30px; } .jh_main4-ul .jh_main4-li { list-style-type: none; margin-top: 70px; padding-bottom: 70px; border-bottom: 1px solid #DFDFDF; overflow: hidden; } .jh_main5 { float: left; width: 50%; height: 480px; position: relative; margin-right: 70px; } .jh_main5::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #F5F8FB 0%, #EAEDF1 100%); border-radius: 3px; opacity: 0.63; } .jh_main5 img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* max-width: 80%; max-height: 80%; */ } .jh_main6 { float: left; width: calc(50% - 70px); } .jh_main4-ul .jh_main4-li:nth-child(2n) .jh_main5 { margin-right: 0; float: right; } .jh_main6a { font-size: 30px; font-weight: 600; color: #303233; line-height: 42px; } .jh_main6b { font-size: 20px; color: #303233; line-height: 28px; margin-top: 14px; } .jh_main6c { font-size: 16px; color: #303233; line-height: 24px; margin-top: 20px; } .jh_main6d { font-size: 14px; color: #303233; line-height: 24px; margin-top: 20px; padding-left: 20px; box-sizing: border-box; } .jh_main6d span{ font-weight: bold; } .jh_main6e { margin-top: 40px; } .jh_main6e a { display: inline-block; width: 150px; height: 47px; border: 1px solid #000000; border-radius: 5px; text-align: center; line-height: 45px; font-size: 16px; color: #000000; } .jh_main6e a img { width: 8px; } .jh_img1 { display: none; } .jh_main6e a:hover { background-color: #0077FA; border: 1px solid #0077FA; color: #ffffff; } .jh_main6e a:hover .jh_img { display: none; } .jh_main6e a:hover .jh_img1 { display: inline-block; } .d_tc { display: none; position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 1001; } .d_tc1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1300px; background-color: #fff; padding: 20px 20px 75px 70px; } .d_tc2 { font-size: 0; text-align: right; } .d_tc3 { margin-top: 35px; font-size: 30px; font-weight: 500; color: #007BFF; line-height: 42px; } .d_tc4 { overflow: hidden; /*margin-top: 35px;*/ margin: 20px 0; } .d_tc4a { float: left; width: calc(50% - 30px); margin: 15px 0; margin-right: 30px; display: flex; align-items: center; } .d_tc4a span { display: inline-block; font-size: 16px; color: #666666; } .d_tc4a span code { color: #E51343; } .d_tc4a input { flex: 1; height: 48px; border-radius: 4px; border: 1px solid #979797; padding: 0 14px; margin-left: 14px; } .d_tc5 { /*margin-top: 40px;*/ margin-top: 5px; font-size: 16px; color: #333333; line-height: 26px; } .d_tc6 { text-align: right; margin-top: 40px; padding-right: 30px; } .d_tc6 a { display: inline-block; width: 130px; height: 45px; background-color: rgba(0, 123, 255, 0.1); text-align: center; line-height: 45px; font-size: 16px; color: #007BFF; } .d_tcsuccess { display: none; position: fixed; left: 0; top: 0; z-index: 1001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); } .clunm5 { border-top: 1px solid #DFDFDF; overflow: hidden; } .clunm5 a { display: block; width: 20%; float: left; padding-top: 30px; font-size: 20px; color: #303233; line-height: 28px; text-align: center; margin-bottom: 40px; border-top: 3px solid #fff; } .clunm5 a.on { color: #007BFF; border-top: 3px solid #007BFF; } .souce ul { display: none; } .clunm6 { border-top: 1px solid #DFDFDF; overflow: hidden; } .clunm6 a { display: block; width: 16.666666%; float: left; padding-top: 30px; font-size: 20px; color: #303233; line-height: 28px; text-align: center; margin-bottom: 40px; border-top: 3px solid #fff; cursor:pointer; } .clunm6 a.on { color: #007BFF; border-top: 3px solid #007BFF; } .souce6 ul:last-child li { width: 100%; margin: 20px 0 0; padding: 66px 55px; } .souce6a { font-size: 20px; font-weight: 500; color: #303233; line-height: 28px; } .souce6b { margin-top: 20px; font-size: 16px; color: #303233; line-height: 26px; } .develop2 ul li:hover .souce6a { color: #fff; } .develop2 ul li:hover .souce6b { color: #fff; } .newpro { float: left; font-size: 0; margin-right: 20px; } .newpro1 { flex: 1; } .newpro2 { font-size: 0; padding-bottom: 5px; border-bottom: 1px dashed rgba(255, 255, 255, 0.49); } .newpro2 span { display: inline-block; font-size: 20px; font-weight: 500; color: #FFFFFF; line-height: 28px; text-align: left; } .newpro2a { width: 100px; } .newpro2b { width: 50px; } .newpro2c { width: calc(100% - 150px); } .newpro3 { font-size: 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.49); } .newpro3 span { display: inline-block; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.6); line-height: 27px; text-align: left; } .sImg { height: 100%; } .sImg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .fhdb { width: 44px; height: 44px; background: #F9F9F9; box-shadow: 0 0 10px rgb(51 51 51 / 50%); border-radius: 50%; position: fixed; right: 10px; bottom: 20px; z-index: 1001; } .fhdb img { width: 40%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .fhdb:hover img{ opacity: 0.5; } .nav ul li:hover .cpej-box { display: block; } .cpej-box { display: none; position: fixed; left: 0; top: 70px; z-index: 999; width: 100%; background-color: rgba(0, 0, 0, 0.5); background-color: #ffffff; box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.05); } .cpej-bo { width: 90%; max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; } .cpej-b { max-width: 30%; padding-bottom: 20px; box-sizing: border-box; } .cpej-b1 { display: block; color: #303233; margin-top: 30px; margin-bottom: 25px; line-height: 25px; font-size: 16px; font-weight: 500; color: #303233; } .cpej-b1 span { display: block; } .cpej-b1 span img { animation-duration: 1s; width: 6px; } .cpej-b1:hover span { color: #0053A3; } .cpej-b1:hover span img { position: relative; left: 10px; } .cpej-b2{ display: block; margin-bottom: 20px; font-size: 14px; color: #333333; line-height: 22px; } .cpej-b2:hover { color: #0053A3; } .cpfw-swiper{ width: 100%; } .cpfw-sw{ width: 100%; display: block; } .videcover{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; position: fixed; left: 0; top: 0; z-index: 1001; } .videos{ border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; width: 500px; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .videos video{ width: 100%; display: block; border-radius: 10px; } .videos img{ width: 25px; position: absolute; right: 10px; top: 10px; z-index: 2; } .ypdg-box{ width: 100%; margin-bottom: 80px; } .ypdg-top{ border-bottom: 1px solid #DFDFDF; width: 100%; padding: 15px 10px; font-weight: 400; font-size: 28px; color: #303233; } .ypdg-down{ border-top: 1px solid #DFDFDF; width: 100%; padding: 30px 0; font-weight: 400; font-size: 20px; color: #303233; } .ypdg-cen{ width: 100%; display: inline-block; } .ypdg-cen1{ width: 23.5%; float: left; margin: 1% 0; margin-right: 2%; display: block; } .ypdg-cen1:nth-child(4n){ margin-right: 0; } .ypdg-cen2{ width: 100%; height: 165px; background: white; box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.05); overflow: hidden; position: relative; } .ypdg-cen2 img{ max-width: 80%; max-height: 80%; transition: all .1s; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .ypdg-cen3{ width: 100%; margin-top: 15px; font-weight: 400; font-size: 20px; color: #303233; } .ypdg-cen3 div{ width: 7px; margin-right: 10px; display: inline-block; vertical-align: middle; } .ypdg-cen3_1{ width: 100%; display: block; } .ypdg-cen3_2{ width: 100%; display: none; } .ypdg-cen3 span{ display: inline-block; vertical-align: middle; } .ypdg-cen1:hover .ypdg-cen3_1{ display: none; } .ypdg-cen1:hover .ypdg-cen3_2{ display: block; } .ypdg-cen1:hover .ypdg-cen3{ color: #007BFF; } .ypdg-cen1:hover .ypdg-cen2 img{ transform: translate(-50%,-50%) scale(1.1); }