ul, ol, li { list-style: none; } body{ padding-top: 80px; } .loading{ position: fixed; z-index: 9999999999; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; background-color: #fff; transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); -moz-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); -ms-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); } .loading > div { height: 100%; width: 100vw; position: relative; } .loading > div > div{ position: absolute; top: 50%; left: 50%; margin-top: -18px; margin-left: -20px; } .line{ position: absolute; top: 25px; background-color: #004098; transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -ms-transition: all .5s linear; -o-transition: all .5s linear; position: absolute; width: 100px; background-color: #004098; height: 1px; left: 0; top: 85px; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } .navigation_down .container:before{ position: absolute; content: ''; width: 500px; left: -500px; background-color: #004098; height: 1px; top: 85px; z-index: 9999; } .navigation_down { position: fixed; top: 80px; width: 100%; z-index: 8888888; } .navigation_down > div { z-index: 99; left: 0; height: 378px; background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1); position: relative; width: 100%; top: 0; display: none; } .navigation_down > div::before { position: absolute; content: ''; width: 100%; background-color: #e5e5e5; height: 1px; left: 0; top: 85px; } .navigation_down > div .container{ text-align: center; } .navigation_down > div .container dl { /* float: left; */ margin-right: 60px; display: inline-block; padding-top: 50px; text-align: left; vertical-align: top; } .navigation_down > div .container dl:first-child { position: relative; } .navigation_down > div .container dl:last-child { margin-right: 0; } .navigation_down > div .container dl dt { font-size: 18px; color: #004098; line-height: 18px; margin-bottom: 30px; } .navigation_down > div .container dl dd a { font-size: 14px; line-height: 30px; color: #666; } .navigation_down > div .container dl dd a:hover{ color: #004098; } .navigation_down > div .menu_imgs { position: absolute; right: 0; top: 0; height: 378px; width: 40%; } .navigation_down > div .menu_imgs img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .pages ,#page{ /* text-align: center; */ padding: 25px 0; } .pages a ,#page a{ display: inline-block; width: 28px; height: 28px; background: #ffffff; border: 1px solid #e5e5e5; font-size: 12px; font-family: simsun; text-align: center; line-height: 28px; color: #999; } .pages .selected ,#page .selected{ background-color: #004098; color: #fff; } .header_out { height: 0; overflow: hidden; position: fixed; } .header_out_animate.header_out { -webkit-animation: none; animation: none; background-color: none; } .header_out_animate { -webkit-animation: header_out 0.5s ease; animation: header_out 0.5s ease; background-color: #fff; } @-webkit-keyframes header_out { 0% { height: 80px; } 100% { height: 0; } } @keyframes header_out { 0% { height: 80px; } 100% { height: 0; } } .header_fixed { position: fixed; background-color: #fff; height: 80px; line-height: 80px; z-index: 9999; top: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .header_fixed h1 a img:first-child { display: none; } .header_fixed h1 a img:last-child { display: block; } .header_fixed nav li a { color: #333; } .header_fixed .search a { color: #333; } .header_fixed .search a::after { background-color: #333; } .header_fixed .search .search_btn i { color: #333; } a { text-decoration: none; color: #333; } * { padding: 0; margin: 0; } #myCanvas { display: none; } .container { width: 1200px; margin: 0 auto; position: relative; } .center { text-align: center; } @font-face { font-family: din; src: url(../fonts/DIN-Bold.otf); font-weight: 100; color: #333; } .din { font-family: din, 寰蒋闆呴粦; } html { font-family: din, 'Source Han Sans CN','寰蒋闆呴粦'; overflow-x: hidden; color: #333; font-weight: 500; } /* @font-face { */ /* font-family: 'iconfont'; */ /* src: url('../fonts/icon_font/iconfont.eot'); */ /* src: url('../fonts/icon_font/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/icon_font/iconfont.woff') format('woff'), url('../fonts/icon_font/iconfont.ttf') format('truetype'), url('../fonts/icon_font/iconfont.svg#iconfont') format('svg'); */ /* } */ @font-face { font-family: 'iconfont'; /* Project id 1754146 */ src: url('//at.alicdn.com/t/font_1754146_jfd2mw9sug.woff2?t=1628491325306') format('woff2'), url('//at.alicdn.com/t/font_1754146_jfd2mw9sug.woff?t=1628491325306') format('woff'), url('//at.alicdn.com/t/font_1754146_jfd2mw9sug.ttf?t=1628491325306') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .search_content { position: fixed; left: 0; top: 0; width: 100%; z-index: 99999; background-color: #fff; height: 0px; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease; } .search_content > div { height: 200px; } .search_content .close_search { position: absolute; bottom: -30px; -webkit-transform: rotate(180deg); transform: rotate(180deg); width: 30px; height: 30px; left: 50%; margin-left: -15px; line-height: 30px; cursor: pointer; text-align: center; opacity: 0; -webkit-transition: all .4s ease; transition: all .4s ease; -webkit-transition-delay: 1s; transition-delay: 1s; } .search_content .close_search i { font-size: 18px; color: #2f3344; } .search_content form { width: 100%; position: relative; top: 50%; margin-top: -22.5px; } .search_content form::after { position: absolute; content: ''; background-color: #2f3344; left: 50%; height: 2px; -webkit-transition: all .8s ease; transition: all .8s ease; bottom: 0; width: 0; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .search_content form input { width: 100%; border: none; background: none; height: 45px; font-size: 24px; letter-spacing: 1px; } .search_content form input:focus { outline: none; } .search_content form input:focus + span { opacity: 0; left: 30px; -webkit-transition-delay: 0 !important; transition-delay: 0 !important; } .search_content form button { position: absolute; right: 20px; top: 0; background: none; cursor: pointer; outline: none; border: none; height: 45px; width: 45px; text-align: right; line-height: 45px; -webkit-transition: all .5s ease; transition: all .5s ease; opacity: 0; -webkit-transition-delay: 1s; transition-delay: 1s; } .search_content form span { position: absolute; left: 30px; top: 0; height: 45px; line-height: 45px; font-weight: 600; font-size: 24px; color: #aaa; -webkit-transition: all .5s ease; transition: all .5s ease; opacity: 0; letter-spacing: 1px; } .search_content form .block { opacity: 1; left: 0; } .mobile_nav { position: fixed; left: 0; top: 46px; width: 100%; z-index: 99999; background-color: #fff; height: 0px; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; } .mobile_nav nav { text-align: center; height: 400px; } .mobile_nav nav ul { padding-top: 22.5px; } .mobile_nav nav ul li { height: 45px; line-height: 45px; position: relative; -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .mobile_nav nav ul li:nth-of-type(1) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .mobile_nav nav ul li:nth-of-type(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .mobile_nav nav ul li:nth-of-type(3) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .mobile_nav nav ul li:nth-of-type(3) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .mobile_nav nav ul li:nth-of-type(4) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .mobile_nav nav ul li:nth-of-type(5) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .mobile_nav nav ul li:nth-of-type(6) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .mobile_nav nav ul li:nth-of-type(7) { -webkit-transition-delay: 1s; transition-delay: 1s; } .mobile_nav nav ul li:nth-of-type(8) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .mobile_nav nav ul li a { color: #004098; font-size: 20px; font-weight: 600; } .mobile_nav_active { height: 400px; } .mobile_nav_active nav ul li { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .search_content_active { height: 200px; } .search_content_active div form::after { width: 100%; left: 0; } .search_content_active div form button { right: 0; opacity: 1; } .search_content_active div .close_search { bottom: -10px; opacity: 1; } header { width: 100%; height: 100px; line-height: 100px; border-bottom: 1px solid rgba(255,255,255,0.3); overflow: hidden; } header > div { height: 100%; width: 100%; } header nav { float: right; margin-right: 180px; } header nav ul li { float: left; margin: 0 15px; position: relative; } header nav ul .active a{ color: #004098; } header nav ul .active:after{ width: 100%; left: 0; } header nav ul li:hover a { color: #004098; } header nav ul li:hover:after { width:100%; left: 0; } header nav ul li::after { position: absolute; content: ''; width: 0; height: 2px; bottom: 0px; left: 50%; background-color: #004098; -webkit-transition: all .4s ease; transition: all .4s ease; } header nav ul li a { color: #fff; } header h1 { float: left; height: 100%; position: relative; margin-left: 50px; } header h1 > a { position: absolute; top: 50%; left: 0; margin-top: -13px; height: 26px; line-height: 26px; } header h1 > a img{ max-height: 30px; } header h1 > a img:last-child { display: none; } header .search { position: absolute; right: 50px; color: #fff; font-size: 18px; } header .search i { cursor: pointer; font-size: 18px; } header .search a { color: #fff; font-size: 18px; margin-right: 60px; position: relative; } header .search a::after { position: absolute; content: ''; width: 1px; height: 30px; background: #ffffff; opacity: 0.5; right: -30px; top: 50%; margin-top: -15px; } .white { color: #fff !important; } .content { font-size: 14px; line-height: 24px; } .text-indent { text-indent: 2em; } footer { height: 400px; background-color: #333; } footer .container { position: relative; height: 100%; } footer .container .footer_menu { position: absolute; top: 50px; width: 100%; } footer .container .footer_menu > ul { overflow: auto; } footer .container .footer_menu > ul > li { width: 120px; float: left; margin-right: 75px; } footer .container .footer_menu > ul > li > a { display: block; border-bottom: 1px solid #4d4d4d; padding-bottom: 20px; font-size: 16px; color: #fff; } footer .container .footer_menu > ul > li > ul { margin-top: 15px; } footer .container .footer_menu > ul > li > ul li { line-height: 30px; } footer .container .footer_menu > ul > li > ul li:hover a { color: #fff; } footer .container .footer_menu > ul > li > ul li a { color: #999; font-size: 14px; } footer .container .footer_menu .mobile_footer_menu { display: none; } footer .container .footer_menu .contact_qrcode { position: absolute; right: 0; top: 0; z-index: 699912; width: 32px; } footer .container .footer_menu .contact_qrcode a { margin: 7.5px 0; width: 32px; height: 32px; border-radius: 50%; display: inline-block; position: relative; } footer .container .footer_menu .contact_qrcode a:hover img { display: block; } footer .container .footer_menu .contact_qrcode a:hover i{ color : #fff } footer .container .footer_menu .contact_qrcode a i { font-size: 32px; color: #999999; } footer .container .footer_menu .contact_qrcode a img { position: absolute; top: 50%; margin-top: -65px; left: -110px; display: none; width: 100px; } footer .container .footer_menu .contact_qrcode a img:nth-of-type(2){ left: -220px; } footer .container .footer_menu .contact_phoneNum { position: absolute; right: 120px; top: -20px; } footer .container .footer_menu .contact_phoneNum ul li { margin-bottom: 5px; } footer .container .footer_menu .contact_phoneNum ul li a { color: #999; font-size: 20px; } footer .container .links { position: absolute; left: 0; top: 275px; width: 100%; } footer .container .links h5 { border-bottom: 1px solid #4D4D4D; position: relative; } footer .container .links h5 span { position: absolute; left: 0; top: -12px; background-color: #333; color: #fff; font-size: 16px; padding-right: 5px; } footer .container .links ul { margin-top: 24px; position: relative; display: inline-block; white-space: nowrap; } footer .container .links ul li:hover a{ color: #fff; } footer .container .links ul:last-child::after { opacity: 0; } footer .container .links ul::after { position: relative; content: '|'; right: 0; top: -1px; color: #4d4d4d; font-size: 12px; margin-right: 20px; } footer .container .links ul li { float: left; } footer .container .links ul li a { color: #999; margin-right: 20px; font-size: 14px; } footer .container .copyright { position: absolute; bottom: 0; left: 0; height: 48px; width: 100%; line-height: 48px; border-top: 1px solid #4D4D4D; } footer .container .copyright p { font-size: 14px; color: #666; float: left; } footer .container .copyright p a { color: #666; } footer .container .copyright p:nth-of-type(2) { margin-left: 14px; } footer .container .copyright p:last-child { float: right; } @media screen and (max-width: 1440px){ .navigation_down > div .menu_imgs{ width: 35%; } .navigation_down > div::before{ width: 65%; } } @media screen and (max-width: 1280px) { header { height: 75px; line-height: 75px; } header ul li a { font-size: 14px; } header .search i, header .search a { font-size: 16px; } header .search a::after { height: 24px; margin-top: -12px; } header > div { width: 100%; margin: 0 auto; position: relative; } header > div h1 { margin-left: 0; } header > div .search { right: 0; } } @media screen and (max-width: 1230px) { .container { width: auto !important; margin: 0 25px !important; } .productsAndSolutions { padding-bottom: 60px; } } @media screen and (max-width: 1024px) { .banner_container{ height: 80vh } .banner { height:100% ; top: 0 } .fixed{ top: 45px !important; } .header_fixed .search a, .header_fixed .search .search_btn i { color: #fff !important; } header { background-color: #fff; height: 45px !important; position: fixed !important; z-index: 99999999; line-height: 45px !important; border: none; top: 0; left: 0; } header > div { width: 100%; height: 100% !important; } header > div > h1 { left: 15px; } header > div > h1 a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header > div > h1 a img { height: 14px; } header > div > h1 a img:last-child { display: block; } header > div > h1 a img:first-child { display: none; } header > div > nav { display: none; } header > div > div.search { right: 0px; } header > div > div a, header > div > div span { background-color: #004098; display: inline-block; width: 45px; height: 45px; text-align: center; } header > div > div span { position: relative; position: absolute; top: 0; right: 46px; } header > div > div a { margin-right: 0 !important; position: absolute; /* top: -1px; */ right: 92px; } header > div > div a::after { display: none; } header > div > div > div { position: absolute; background-color: #004098; display: inline-block; width: 45px; height: 45px; text-align: center; right: 0; top: 0; cursor: pointer; } header > div > div > div figure { position: absolute; height: 2px; left: 50%; margin-left: -12px; width: 24px; background-color: #ffffff; -webkit-transition: .3s; transition: .3s; } header > div > div > div figure:nth-of-type(1) { top: 50%; margin-top: -6px; } header > div > div > div figure:nth-of-type(2) { bottom: 50%; margin-bottom: -6px; } header > div > div .mobile_menu_active figure:first-child { -webkit-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg); } header > div > div .mobile_menu_active figure:last-child { -webkit-transform: translateY(-5px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg); } .productsAndSolutions { padding-bottom: 50px; } .about .about_us { width: auto; } .about ul { width: auto; } .title { padding-top: 50px; } .innovate > div:last-child .product_description p { width: auto !important; } .productsAndSolutions .top_menu > div { float: none; } .page4 .container #certify .swiper-container .swiper-slide { width: 260px; height: 400px; } .innovate > div:first-child > div { margin-left: 15px; } .title h3 { font-size: 40px; } .innovate { min-height: 600px; } .innovate > div { float: none; width: 100% !important; } .innovate > div:first-child { padding-bottom: 20px; } .innovate > div:first-child > div > a { position: absolute; right: 15px; top: 50px; } .innovate > div:first-child > div .innovate_left { display: none; } .innovate > div:last-child { border-left: 1px solid #e5e5e5; position: relative; border-top: 1px solid #e5e5e5; } .innovate > div:last-child .product { height: 440px; } .innovate > div:last-child .product ul li h3 { height: 80px; } .innovate > div:last-child .product ul li h3 a { font-size: 14px; } .innovate > div:last-child .product ul li > a { height: 360px; } .innovate > div:last-child .product ul li > a img { max-height: 70%; } .innovate > div:last-child .product_description { height: 150px; } .innovate > div:last-child .product_description .title_index { display: block; position: relative; margin: 0 15px; padding-top: 6px; } .innovate > div:last-child .product_description .title_index h3 { display: inline-block; } .innovate > div:last-child .product_description .title_index h3 span { font-size: 42px; color: #004098; font-weight: 600; } .innovate > div:last-child .product_description p { left: 15px; bottom: 15px; margin-right: 15px; } } @media screen and (max-width: 960px) { .future .future_content { margin-top: 25px; } .future .future_content > div { float: none !important; } .future .future_content > div:last-child { height: 200px; width: 400px; margin-top: 25px; } .future .future_content > div:last-child ul li img { height: 200px; } } @media screen and (max-width: 767px) { .banner { height: 60vh; } .title a { bottom: 8px; } .btn_2 { width: 120px; height: 35px; line-height: 35px; font-size: 12px; } .btn_2 span { left: -4px; } .btn_2 i { font-size: 18px; left: 20px; top: 0; position: relative; } .btn_2::after { right: 30px; } .banner_container .news > div > .news_container div .swiper-slide a { margin-right: 0; } .banner_container .news > div .banner_control { height: 35px; } .banner_container .news > div .banner_control .btn_1 { width: 140px; height: 35px; line-height: 35px; font-size: 12px; } .banner_container .news > div .banner_control .btn_1 i { font-size: 18px; } .productsAndSolutions .top_menu > div { width: auto; } .container { margin: 0 15px !important; } .content { line-height: 18px; font-size: 12px; } .banner_container .news > div > .news_container { height: 60px; } .innovate > div:last-child .product { height: auto; } .innovate > div:last-child .product ul li { border-bottom: 1px solid #d5d5d5; } .innovate > div:last-child .product ul li > a { height: 200px; } .innovate > div:last-child .product_description { height: 200px; } .innovate > div:last-child .product_description .title_index span { font-size: 15px; } .productsAndSolutions .top_menu { margin-top: 40px; } .productsAndSolutions .top_menu ul li p { font-size: 16px; } .productsAndSolutions .productsAndSolutionsContent > ul { margin-top: 20px; } .productsAndSolutions .productsAndSolutionsContent > ul li { width: calc(100%/2 - 15px); padding-bottom: 15px; } .productsAndSolutions .productsAndSolutionsContent > ul li figcaption { font-size: 14px; } .productsAndSolutions .productsAndSolutionsContent > ul li:nth-of-type(2) { margin-right: 0; } .innovate > div:last-child .product ul { overflow: auto; } .productsAndSolutions .productsAndSolutionsContent .content_bg { overflow: hidden; } .productsAndSolutions .productsAndSolutionsContent .content_bg li { height: calc(50% - 15px); } .innovate > div:last-child .product ul li { width: calc(100%/2 - 1px); } .innovate > div:last-child .product ul li:nth-of-type(3) { border: none; } .innovate > div:last-child .product ul li:last-child { border-right: 1px solid #d5d5d5; } .innovate > div:last-child .product ul li h3 { height: 60px; } .innovate > div:last-child .product ul li h3 a { margin: 0 14px; } .banner_container .news { height: 95px; } .banner_container .news > div .banner_control .num { height: 35px; } .banner_container .news > div .banner_control .num .num_active { font-size: 18px; } .banner_container .news > div .banner_control .num span { font-size: 12px; line-height: 20px; width: 40px; } .about ul li:nth-of-type(2n) p, .about ul li:nth-of-type(2n) span { margin-left: 40px; } .innovate > div:first-child > div > a { top: 25px; } .about { padding-bottom: 50px; } .about .about_us { margin-top: 14px; } .about .about_us p { margin-top: 14px; } .about ul { margin-top: 50px; } .about ul li { margin-bottom: 45px; } .about .btn_container { margin-top: 0px; } .about ul li span { font-size: 50px; } .about ul li span::after { font-size: 14px; } .banner_container .news > div > .news_container div .swiper-slide a h4 { top: 6px; font-size: 12px; } .sub-title { font-size: 16px; } .title { padding-top: 25px; } .title h3 { font-size: 24px; line-height: 30px; } .title h3::after { width: 8px; height: 8px; bottom: 5px; right: 5px; } .title p, .title .sub_title { font-size: 12px; } .future .future_content > div { width: 100% !important; } .future .title > span { font-size: 12px; } .productsAndSolutions .top_menu ul li { margin-right: 20px; } .productsAndSolutions .top_menu ul li:last-child{ margin-right: 0; } .productsAndSolutions .top_menu ul li:first-child { margin-right: 45px; } .innovate > div:last-child .product_description p { width: auto !important; } .page4 .container #certify .swiper-container .swiper-slide { width: 200px; height: 300px; } .page4 .container #certify .swiper-container { padding-bottom: 80px; } .page4 .container #certify { margin-top: 50px; } .page4 .container #certify .swiper-container .swiper-slide figcaption { font-size: 14px; } .future .future_content { margin-top: 0px; } .future { height: auto; padding-bottom: 50px; } .future .future_content > div:first-child ul li { padding: 10px 0; } .page4 .container .logos > div:first-child > ul > li > div { float: none; width: 100%; } .page4 .container .logos > div:first-child > ul > li > ul { position: relative; float: none; padding: 25px 0; width: 100%; } .page4 .container .logos > div:first-child > ul > li > ul > li { top: 0; -webkit-transform: translateY(0); transform: translateY(0); } .productsAndSolutions .top_menu ul li p { font-size: 12px; padding-top: 3px; } .productsAndSolutions .top_menu ul li i { font-size: 30px; } } .current_position{ display: none }