body { min-width: 375px; } /* more */ .index-more { width: 70px; margin-top: 9px; color: #1771ef; border: 1px solid #1771ef; padding: 4px 15px; display: block; margin: 10px auto; text-align: center; line-height: 24px; letter-spacing: 1px; } .index-more:hover { color: white; background: #1771ef; border: 1px solid #1771ef; } /* header */ .header { height: 102px; background: #1448a1; } .header > div { background: #1448a1; } .header .navbar-brand { height: 102px; } .header .navbar-nav .nav-link { font-size: 18px; color: #fff; height: 102px; display: flex; align-items: center; white-space: nowrap; } .navbar-nav .nav-link:hover span, .navbar-nav .active > .nav-link span { padding-bottom: 5px; padding-top: 7px; border-bottom: 2px solid #fff; } .navbar-dark .navbar-nav .nav-link:hover { color: #fff; } @media (min-width: 1200px) { .navbar-expand-md .navbar-nav .nav-link { padding-right: 1.25rem; padding-left: 1.25rem; } } @media (max-width: 768px) { .header .navbar-collapse { background: #fff; } .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav > .nav-link { color: #666; } .navbar-dark .navbar-nav .nav-link:hover { color: #1448a1; } .dropdown-menu a { color: #777; } .header { height: 60px; } .header .navbar-brand { height: 60px; } .header .navbar-brand img { height: 35px; } .header .navbar-nav .nav-link { color: #333; height: 40px; justify-content: center; } } .dropdown-menu a { text-align: center; } .dropdown-menu a:hover { color: #0065ff; background: #fff; } .dropdown:hover > .dropdown-menu, .dropright:hover > .dropdown-menu { display: block; } .dropdown-menu { margin-top: 0; border-radius: 0; border: none; background: rgba(255, 255, 255, 0.95); /* min-width: auto; */ left: -1rem; padding: 0.6rem 0; } .dropdown-toggle::after { display: none; } .dropdown-item { padding: 0.5rem 2.5rem; } /* 涓夌骇鑿滃崟 */ .dropright .dropdown-toggle::after { display: none; } /* index-profile-case */ .index-profile-case { width: 100%; height: 510px; background: url(../images/bg-profile.png) repeat; overflow: hidden; } .index-profile { color: #666; width: 100%; height: 170px; background: url(../images/bg-profile-top.png) center 60px no-repeat; padding: 143px 0 0 0; font-size: 14px; line-height: 24px; } .index-case { width: 100%; height: 176px; overflow: hidden; } .index-case ul { width: 100%; height: 100%; } .index-case ul li { float: left; display: inline; width: 25%; } .index-case a { display: block; width: 99%; height: 100%; margin: 0 auto; position: relative; } .index-case a img { width: 100%; height: 100%; display: block; } .index-case a span { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: white; font-size: 18px; background: rgba(0, 0, 0, 0.5); position: absolute; bottom: 0; } .index-case a:hover span { background: rgba(23, 113, 239, 0.8); } /* index mid banner */ .index-mid-banner { width: 100%; height: 400px; } /* index-qualification */ .index-qualification { width: 100%; height: 570px; position: relative; margin-top: 20px; } .index-qualification-l { position: absolute; width: 50%; height: 100%; display: block; background: #323232; left: 0; z-index: -1; } .index-qualification-r { position: absolute; width: 50%; height: 100%; display: block; background: #1875f0; right: 0; z-index: -1; } .index-qualification .center { height: 100%; position: relative; } .index-qualification-desc { float: left; width: 350px; height: 100%; color: white; } .index-qualification-en { font-size: 22px; font-weight: bold; letter-spacing: 1px; margin-top: 130px; } .index-qualification-ch { font-size: 28px; font-weight: bold; letter-spacing: 3px; margin: 5px 0 15px 0; } .index-qualification-con { font-size: 16px; letter-spacing: 1px; line-height: 30px; } .index-qualification .index-more { float: left; margin-top: 25px; } .index-qualification-swipe { position: absolute; width: 1000px; height: 100%; left: 350px; } .index-qualification ul { width: 100%; height: 100%; overflow: hidden; } .slider2 { width: 100%; height: 100%; overflow: hidden; position: relative; } .slide2 { width: 100%; height: 100%; top: 0; left: 0; float: left; position: absolute; } .index-qualification-swipe #slideposition { bottom: 27px; } .index-qualification-a { float: left; width: 320px; height: 420px; background: white; margin: 76px 50px 0 90px; } .index-qualification-a img { display: block; width: 273px; height: 313px; margin: 25px auto; } .index-qualification-a p { padding: 0 25px; text-align: center; color: #666; font-size: 18px; } .index-qualification-a:hover p { color: #333; } .index-qualification-b { float: left; background: white; width: 460px; height: 420px; margin: 76px 0; position: relative; } .index-qualification-b p { display: block; width: 386px; margin: 0 auto; padding: 150px 0 96px 0; font-size: 14px; color: #555; line-height: 28px; border-bottom: 1px dashed #e1e1e1; background: url(../images/icon-quotation.png) 10px 80px no-repeat; } .index-prev-next span { display: block; width: 32px; height: 32px; position: absolute; cursor: pointer; z-index: 100; } .index-prev { background: url(../images/icon-left-active.png); top: 50%; left: 20px; } .index-next { background: url(../images/icon-right.png); top: 50%; right: 20px; } .icon-triangle { position: absolute; width: 16px; height: 32px; left: -16px; top: 49%; z-index: 100; background: url(../images/icon-triangle.png) center no-repeat; } /* video */ .index-video { width: 100%; height: 657px; background: #f4f5fa; position: relative; } .index-video-rbg { width: 50%; height: 415px; background: #ebecf0; position: absolute; right: 0; z-index: 10; } .index-video .center { position: relative; height: 100%; } .index-video-l { position: absolute; width: 690px; height: 489px; top: 85px; left: 0; z-index: 10; } .index-video-r { position: absolute; width: 50%; height: 100%; left: 690px; z-index: 12; } .index-video-en { position: absolute; left: -120px; width: 100%; height: 300px; } .index-video-en p { font-size: 80px; font-weight: bold; color: white; letter-spacing: 8px; } .index-video-en1 { padding: 90px 0 0 0; } .index-video-en2 { padding-left: 170px; } .index-video-r .title { width: 100%; height: 100px; margin-top: 300px; } .index-video-r .title span { color: #333; font-size: 16px; border-bottom: 1px solid #333; padding: 20px 0 4px 0; float: left; margin-left: 50px; } .index-video-r .title h2 { float: left; font-size: 28px; font-weight: bold; color: #333; margin-left: 45px; padding-top: 6px; } .index-video-list { width: 100%; height: 105px; margin-top: 85px; } .index-video-list li { float: left; display: inline; width: 145px; height: 105px; margin-left: 30px; } .index-video-list img { display: block; width: 100%; height: 100%; } /* index-other */ .index-other { width: 100%; height: 220px; } .index-other .center { height: 100%; } .index-other ul { width: 100%; height: 100%; } .index-other ul li { float: left; display: inline; width: 33.33%; height: 140px; margin-top: 35px; } .index-other ul li a { display: block; width: 380px; height: 100%; margin: 0 auto; } .index-recruit { background: url(../images/index-recruit.png) center no-repeat; } .index-recruit:hover { background: url(../images/index-recruit-active.png) center no-repeat; } .index-email { background: url(../images/index-email.png) center no-repeat; } .index-email:hover { background: url(../images/index-email-active.png) center no-repeat; } /* index-footer */ .index-footer { background: #002772; } .index-footer *, .index-footer a { color: #fff; } /* inner-crumb */ .inner-crumb { width: 100%; height: 40px; line-height: 40px; margin-top: 20px; } .inner-crumb a { color: #111; font-size: 16px; } .inner-crumb a:hover { color: #1771ef; } /* inner-banner */ .inner-banner { width: 100%; height: 350px; } /* inner-nav */ .inner-nav { width: 100%; } .inner-nav ul { width: 100%; border-radius: 5px; margin-top: 15px; border-radius: 5px; } .inner-nav ul li { float: left; display: inline; margin-bottom: 10px; } .inner-nav ul li a { float: left; padding: 15px 20px; background: #e5e5e5; color: #222; font-size: 16px; position: relative; } .inner-nav ul li a.active, .inner-nav ul li a:hover { background: #21458a; color: white; } .inner-nav ul li a.active span, .inner-nav ul li a:hover span { background: url(../images/icon-triangle-blue.png) center bottom no-repeat; left: 0; position: absolute; bottom: -17px; width: 100%; height: 20px; } .inner-nav ul li:nth-child(1) a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .inner-nav ul li:nth-last-child(1) a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* inner-list */ .inner-list { width: 100%; display: inline-block; margin-top: 40px; } .inner-list ul { display: inline-block; width: 100%; height: 100%; } .inner-list .inner-image-list li { float: left; display: inline; width: 33.3%; height: 250px; margin-bottom: 30px; } .inner-list .inner-image-list a { display: block; width: 85%; height: 100%; margin: 0 auto; position: relative; overflow: hidden; background: #f7f7f7; border: 1px solid #f3f3f3; } .inner-list .inner-image-list a div { /* display: table-cell; */ width: 100%; height: 200px; overflow: hidden; vertical-align: middle; } .inner-list .inner-image-list a img { max-height: 100%; display: block; margin: 0 auto; } .inner-list .inner-image-list a span { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #555; font-size: 16px; } .inner-list .inner-image-list a:hover { border: 1px solid #d3d3d3; } .inner-list .inner-image-list a:hover span { color: #0080ff; } .inner-list .inner-news-list li { float: left; display: inline; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px dashed #d1d1d1; } .inner-list .inner-news-list li a { display: block; width: 100%; color: #333; font-size: 15px; } .inner-list .inner-news-list li a:hover { color: #214488; background: #f3f3f3; } .inner-list .inner-news-list li a span { padding-left: 15px; } .inner-list .inner-news-list li a small { float: right; color: #999; padding-right: 15px; } /* inner-content */ .inner-content { width: 100%; display: inline-block; } .inner-content .inner-content { padding: 25px 0 80px 0; color: #555; font-size: 14px; line-height: 30px; } .inner-content .inner-content:hover { color: #333; } .inner-content .inner-title { font-size: 24px; text-align: center; padding: 20px 0 0 0; } .inner-content .inner-title small { color: #999; } /* gotoTop */ #gotoTop { display: none; position: fixed; width: 48px; height: 48px; background-image: url(../images/icon-gototop.png?a=3); background-size: 32px; background-position: center; background-repeat: no-repeat; bottom: 85px; right: 10%; cursor: pointer; border: 1px solid #bfbfbf; z-index: 1000; } #gotoTop:hover { background-image: url(../images/icon-gototop-on.png); background-size: 32px; background-position: center; background-repeat: no-repeat; border: 1px solid #1296db; } /* pagination */ .pagination { text-align: center; padding: 25px 0 35px 0; } .pagination li { display: inline-block; font-size: 16px; color: #666; margin: 0 5px; } .pagination li a, .pagination li span { display: block; font-size: 16px; padding: 6px 10px; border: 1px solid #dfdfdf; } .pagination li span { color: #999; } .pagination li a { color: #666; display: block; } .pagination li a:hover { color: #1296db; border: 1px solid #1296db; } /* 涓嬫媺鍥哄畾 */ .fixednav { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background: white; } .index-header-hide { display: block; width: 100%; height: 106px; } .inner-content img { max-width: 100%; } /* 瑙嗛BANNER */ .video-banner { height: calc(100vw * 0.43); position: relative; overflow: hidden; } .video-banner video { width: 129%; height: 114%; z-index: -100; background: url(../images/video-banner-bg.png) no-repeat; background-size: cover; object-fit: fill; background-size: 100% 100%; } .video-banner-info { top: 0; left: 0; background: rgba(0, 0, 0, 0.25); } .video-banner-text { margin-top: 10%; color: #fff; width: calc(100vw * 0.41); letter-spacing: 0.125rem; } .video-banner-text div:nth-child(1) { font-size: calc(100vw * 0.045); } .video-banner-text p:nth-child(2) { font-size: calc(100vw * 0.02); letter-spacing: 0.25rem; } .video-banner-text p:nth-child(3) { font-size: calc(100vw * 0.012); background: #003596; } .video-banner-text p:nth-child(4) { font-size: calc(100vw * 0.01); } /* 鍏徃姒傚喌 */ .index-title { font-size: 2.5rem; } .index-title::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 2.25rem); width: 4.5rem; height: 3px; background: #ee7218; margin: 0 auto; } .index-company-list a { line-height: 3rem; color: #f27a20; font-size: 1.5rem; } .index-company-list a div { overflow: hidden; } .index-company-list a img { transform: scale(1); transition: 0.6s; } .index-company-list a:hover img { transform: scale(1.1); transition: 0.5s; } .index-news-info { color: #fff; } .index-news-info h2 { font-size: 1.25rem; text-align: center; } .index-news-info p { font-size: 0.875rem; margin-top: 1rem; line-height: 1.5rem; color: #666; } .index-news a .index-news-info { /* background-image: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 70%); */ background: #f4f4f4; color: #333333; } .index-news a > img { transform: scale(1); transition: 0.6s; } .index-news a:hover { text-decoration: none; } .index-news a:hover .index-news-info { background: rgba(43, 103, 246, 0.8); color: #fff; } .index-news a:hover .index-news-info p { color: #fff; } .index-news a:hover > img { /* transform: scale(1.1); */ /* transition: 0.5s; */ } .index-news a small { height: 0; overflow: hidden; transition: 0.6s; } .index-news a:hover small { height: 2rem; transition: 0.5s; } .index-news small img { width: 0.75rem; } .more { display: inline-block; padding: 0.5rem 2rem; color: #666; border: 1px solid #eee; } .more:hover { background: #003596; border: 1px solid #003596; color: #fff; text-decoration: none; } /* 璧勮川鎶€鏈 */ .index-tech-text { background: #f7f7f7; font-size: 1.125rem; text-indent: 2.25rem; line-height: 2rem; color: #343434; } .index-tech-text:hover { color: #000; } .index-tech-img { border: 1px solid #f3f3f3; } .index-tech-img img { transform: scale(1); transition: 0.6s; cursor: pointer; } .index-tech-img:hover img { transform: scale(1.1); transition: 0.5s; } /* 瑙嗛涓績 */ .index-videos iframe { height: 300px; } /* 鑱旂郴鎴戜滑 */ .index-contact-text a { border: 1px solid #f3f3f3; color: #aaa; text-decoration: none; } .index-contact-text a:hover { color: #4383f8; box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%); } .index-contact-text { font-size: 1.5rem; font-weight: bold; } /* 閫傞厤灏忓睆骞 */ @media (max-width: 768px) { .index-title { font-size: 1.5rem; } .index-company-list a { font-size: 1rem; line-height: 2.5rem; } .index-tech-text { font-size: 0.875rem; line-height: 1.5rem; } .index-videos iframe { height: 200px; } .index-news-info h2 { font-size: 1rem; font-weight: normal; } }