.bs_head{ position: absolute; } h2{ margin-bottom: 45px; } h4,p{ text-align: center; } .tech_banner{ height: 28.125vw; width: 100%; min-width: 1280px; min-height: 360px; background-size: cover; position: relative; } .tech_banner_content{ position: absolute; top: 50%; left: 14.5%; transform: translateY(-50%); } /* .bs_kind{ width: 1230px; box-sizing: border-box; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background-color: #FFFFFF; padding: 30px 6px; box-shadow: 0px 3px 20px rgba(0, 17, 54, 0.21); } */ /* .bs_kind li{ display: inline-block; padding: 0 44px; border-right: 1px solid #EAEAEA; cursor: pointer; } .bs_kind a{ color: #333333; font-size: 16px; } .bs_kind li:last-child{ border: none; } */ /* 绠€浠嬭鏄 */ .tech_intro{ padding-top: 100px; } .tech_top{ display: flex; align-items: center; width: 1084px; margin: 0 auto; } .tech_top img{ width: 560px; height: 300px; } .tech_top p{ width: 496px; font-size: 16px; line-height: 24px; color: #666666; letter-spacing: 0.168px; margin-left: 48px; text-align: justify; text-justify: distribute; } .tech_intro_list{ display: flex; justify-content: space-between; width: 68.4%; min-width: 1100px; margin: 100px auto 0 auto; } .tech_intro_item{ box-sizing: border-box; width: 17.1%; padding: 24px 0; font-size: 0; text-align: center; } .tech_intro_item .icon{ width: 96px; height: 96px; margin-bottom: 30px; } .tech_intro_title{ /* font-size: 20px; */ font-weight: bold; line-height: 26px; color: #333333; letter-spacing: 0.7px; margin-bottom: 12px; } .tech_intro_item p:last-child{ /* font-size: 14px; */ line-height: 24px; color: #666666; letter-spacing: 0.336px; text-align: center; /* text-align: justify; text-justify: distribute; */ } #tech_software{ padding-top: 100px; } .software_kind{ display: flex; align-items: center; width: 520px; height: 54px; margin: 0 auto 48px auto; } .page_item{ width: 50%; height: 100%; background: #F8F8F8; /* font-size: 20px; */ color: #333333; letter-spacing: 0.7px; text-align: center; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; } .kind_icon{ width: 36px; height: 36px; overflow: hidden; position: relative; margin-right: 6px; } .kind_icon img{ position: absolute; left: 0; top: 0px; } .kind_icon img{ position: absolute; left: 0; top: 0px; } .software_kind li:nth-child(2) img{ left: -72px; } .software_kind li:hover .kind_icon img{ top: -36px; } .page_item:hover{ background: #2168FB; color: #FFFFFF; border-color: #2168FB; } .kindActive{ background: #2168FB; color: #FFFFFF; border-color: #2168FB; } .kindActive img{ top: -36px; } .software_item{ width: 73%; margin: 0 auto; } .software_item img{ width: 100%; } /* 鎶€鏈紭鍔 */ .software_framework{ height: 596px; } h4{ font-size: 20px; font-weight: bold; line-height: 24px; color: #333333; } h4 + p{ margin: 12px 0 40px 0; color: #666666; } #tech_good{ padding-top: 100px; } .tech_good01{ display: flex; width: 1230px; margin: 40px auto 120px auto; } .tech_others{ box-sizing: border-box; padding: 15px; width: 447px; height: 530px; border: 2px dashed #CCCCCC; border-radius: 10px; margin-left: 63px; } .tech_others p:first-child{ font-size: 18px; font-weight: bold; line-height: 18px; color: #17A6C1; } .tech_others p:last-child{ font-size: 16px; line-height: 26px; color: #666666; margin-top: 182px; } .tech_good2{ width: 1403px; height: 761px; margin: 0 auto; position: relative; } .tech_good2 p{ position: absolute; font-size: 14px; text-align: left; color: #666666; } .tech_good2 .tech_good2_intro1{ width: 352px; left: 0; top: 39.16%; } .tech_good2 .tech_good2_intro2{ width: 420px; bottom: 60px; right: 60px; } .tech_good2 img{ position: absolute; right: 0; top: 0; width: 1028px; height: 650px; } .tech_good3{ width: 1203px; height: 863px; margin: 0 auto; } .tech_good3 img{ width: 100%; } .tech_good3 p{ font-weight: bold; text-align: left; } .tech_config{ margin-top: 30px; } .tech_good3 .tech_cpu{ font-weight: normal; margin: 5px 0 15px 0; } #tech_try{ padding-top: 100px; } .tech_try{ width: 1244px; height: 424px; margin: 0 auto; } .tech_try_con{ margin-left: 40px; padding-top: 124px; } .tech_try p{ text-align: left; color: #FFFFFF; margin-bottom: 36px; } /* 搴旂敤鍦烘櫙 */ #tech_scene{ padding: 100px 0; /* margin: 100px 0; */ } .tech_scene_con{ width: 1226px; margin: 0 auto; margin-top: 20px; position: relative; } .swiper-slide img{ width: 100%; } .swiper-pagination { width: 100%; top: 0; display: flex; height: 60px; border-top: 4px solid #407BFF; /* margin: 0 6px; */ /* padding: 0 6px; background: #F8F8F8; */ } .swiper-pagination li{ flex: 1; height: 60px; line-height: 60px; border-radius: 0; background: #F8F8F8; opacity: 1; } .swiper-pagination .swiper-pagination-bullet-active{ background: #FFFFFF; box-shadow: 0px 3px 6px #CCCCCC; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ top: 0; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0; } /* 瑙嗛浠嬬粛 */ #tech_video{ width: 1314px; padding-top: 100px; margin: 0 auto; } #tech_video .video-js{ overflow: hidden; background-color: #fff; } .video-js{ /* border-radius: 20px; */ } .vjs-control-bar{ /* border-radius: 0 0 20px 20px; */ } .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; position: absolute; top: 50%; left: 50%; outline: none; } .video-js .vjs-big-play-button{ font-size: 2.5em; line-height: 2.3em; height: 2.5em; width: 2.5em; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; background-color: rgba(255, 255, 255, 0); /* background-color: #73859f; background-color: rgba(115,133,159,.5); */ border-width: 0.15em; margin-top: -1.25em; margin-left: -1.75em; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus{ background-color: rgba(255, 255, 255, 0); } /* 涓棿鐨勬挱鏀剧澶 */ .vjs-big-play-button .vjs-icon-placeholder { font-size: 1.63em; } /* 鍔犺浇鍦嗗湀 */ .vjs-loading-spinner { font-size: 2.5em; width: 2em; height: 2em; border-radius: 1em; margin-top: -1em; margin-left: -1.5em; } #tech_coo{ padding-top: 48px; } @media only screen and (max-width: 1300px) { .tech_good01{ width: 1100px; height: 800px; } .tech_others{ margin-left: 32px; } } @media only screen and (max-width: 1440px) { .tech_good2{ width: 1200px; height: 635px; } .tech_good2 img{ width: 840px; height: 531px; } .tech_good3{ width: 1100px; } #tech_video{ width: 1100px; margin: 100px auto 48px auto; } .myVideo1-dimensions{ width: 1100px; height: 618.75px; } }