body { font-family: "Noto Sans SC", "Microsoft Yahei", "微软雅黑", "Arial"; font-weight: 300; } h1, h2, h3, h4, h5, h6{ line-height:1.5; } * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .w1440 { width: 1440px; margin: 0 auto; } .header { position: absolute; width: 100%; left: 0; top: 0; z-index: 1000; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .header .con { display: flex; justify-content: space-between; padding-top: 1.5vw; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .header .con .logo { width: 7.5vw; } .header .con .logo a { display: block; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .header .con .logo a img { width: 100%; } .header .con .logo:hover a img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); } .header .con .nav .closes { display: none; } .header .con .nav > ul { display: flex; justify-content: center; } .header .con .nav > ul > li:not(:last-child) { margin-right: 2vw; } .header .con .nav > ul > li h2 a { display: block; color: #fff; line-height: 2vw; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .header .con .nav > ul > li.active h2 a{ color: #ed810e !important; } .header .con .nav > ul > li:hover h2 a { color: #ed810e !important; } .header .con .search { width: 1.46vw; cursor: pointer; } .header .con .search .s-icon { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .header .con .search .s-icon img { width: 100%; } .header .con .search .s-icon .white { position: relative; opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .header .con .search .s-icon .black { position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .header .nav-button { display: none; } .header .search-list { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; z-index: 1000; display: none; } .header .search-list .search-box { background: #fff; padding: 40px 0; } .header .search-list .search-box .search-center { width: 400px; margin: 0 auto; position: relative; } .header .search-list .search-box .search-center input { width: 100%; height: 40px; border: none; border-bottom: 1px solid #ccc; font-size: 16px; padding-right: 40px; } .header .search-list .search-box .search-center .search-btns { position: absolute; width: 20px; right: 0; bottom: 6px; cursor: pointer; } .header .search-list .search-box .search-center .search-btns img { width: 100%; } .header.active { position: fixed; background: #fff; box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.05); } .header.active .con { padding: 0; } .header.active .con .nav > ul > li h2 a { color: #000; line-height: 68px; font-weight: bolder; } .header.active .con .search .s-icon .white { opacity: 0; } .header.active .con .search .s-icon .black { opacity: 1; } .footer .footer-top { background: url(https://omo-oss-image.thefastimg.com/portal-saas/new2023022819120953944/cms/image/e986492a-380d-4eba-b3d0-c79267c334e8.jpg?1680059578285) no-repeat center center; background-size: cover; padding: 6.5vw 0 2.2vw; } .footer .footer-top .con { display: flex; justify-content: space-between; } .footer .footer-top .con .left .logo { width: 9vw; margin-bottom: 4vw; } .footer .footer-top .con .left .logo a { display: block; } .footer .footer-top .con .left .logo a img { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .footer .footer-top .con .left .logo a img:hover { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); } .footer .footer-top .con .left h3 { color: #333; opacity: 0.9; } .footer .footer-top .con .left h2 { font-weight: 500; margin: 1.2vw 0 3vw; } .footer .footer-top .con .left .nav ul { display: flex; } .footer .footer-top .con .left .nav ul li { padding: 0 2.6vw; position: relative; } .footer .footer-top .con .left .nav ul li:before { content: ''; width: 1px; height: 1vw; background: #555; opacity: 0.2; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .footer .footer-top .con .left .nav ul li:first-child { padding-left: 0; } .footer .footer-top .con .left .nav ul li:last-child { padding-right: 0; } .footer .footer-top .con .left .nav ul li:last-child:before { display: none; } .footer .footer-top .con .left .nav ul li a { color: #333; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .footer .footer-top .con .left .nav ul li a:hover { color: #ed810e; } .footer .footer-top .con .right .erweima { width: 154px; border: 1px solid #e2e2e2; padding: 0.8vw; } .footer .footer-top .con .right .erweima .tu { border: 10px solid #fff; } .footer .footer-top .con .right .erweima .tu img { width: 100%; } .footer .footer-top .con .right .erweima h2 { text-align: center; color: #333; margin-top: 0.8vw; } .footer .footer-bottom { padding: 1.5vw 0 3vw; background:#fff; } .footer .footer-bottom .con { display: flex; justify-content: space-between; } .footer .footer-bottom .con .left p { color: #777; } .footer .footer-bottom .con .left p a { color: #777; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .footer .footer-bottom .con .left p a:hover { color: #333; } .footer .footer-bottom .con .right ul { display: flex; } .footer .footer-bottom .con .right ul li { position: relative; margin-left: 1vw; } .footer .footer-bottom .con .right ul li .tu { width: 20px; } .footer .footer-bottom .con .right ul li .tu img { width: 100%; } .footer .footer-bottom .con .right ul li .erweima { position: absolute; width: 5vw; height: 5vw; top: -7vw; left: 50%; margin-left: -2.5vw; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .footer .footer-bottom .con .right ul li .erweima img { width: 100%; } .footer .footer-bottom .con .right ul li:hover .erweima { opacity: 1; top: -6vw; } #videoPopup { position: fixed; width: 100%; height: 100%; top: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.4); display: none; } #videoPopup .video-box { width: 66%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } #videoPopup .video-box video { width: 100%; } #videoPopup .video-box .closes { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); cursor: pointer; text-align: center; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } #videoPopup .video-box .closes span { font-size: 16px; line-height: 40px; color: #fff; } #videoPopup .video-box .closes:hover { background: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 1600px) { .w1440 { width: 80%; } .footer .footer-top .con .left .nav ul li { padding: 0 2.2vw; } } @media screen and (max-width: 1440px) { .header.active .con .nav > ul > li h2 a { line-height: 60px; } .footer .footer-top .con .right .erweima { width: 140px; } } @media screen and (max-width: 1200px) { .w1440 { width: 90%; } } @media screen and (max-width: 1024px) { .header .con { padding: 0 40px 0 0!important; } .header .con .logo { width: 120px; } .header .con .nav { position: fixed; width: 100%; height: 100%; right: -100%; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 2; display: flex; justify-content: flex-end; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .header .con .nav .closes { display: block; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; text-align: center; line-height: 40px; } .header .con .nav .closes span { font-size: 20px; } .header .con .nav > ul { display: block; background: #fff; width: 50%; padding: 60px 20px 0; } .header .con .nav > ul > li { border-bottom: 1px solid #f2f2f2; margin-right: 0!important; } .header .con .nav > ul > li h2 { position: relative; } .header .con .nav > ul > li h2:before { content: '\e683'; font-family: iconfont; font-size: 16px; color: #333; position: absolute; line-height: 44px; right: 0; top: 0; } .header .con .nav > ul > li h2 a { line-height: 44px!important; } .header .con .nav.active { right: 0; } .header .con .search { width: 20px; height: 60px; } .header .con .search .s-icon { top: 53%; } .header .search-list .search-box .search-center { width: 80%; } .header .search-list .search-box .search-center input { font-size: 14px; } .header .nav-button { position: absolute; right: 20px; top: 0; display: block; width: 40px; height: 60px; text-align: center; line-height: 60px; } .header .nav-button span { font-size: 24px; } .footer .footer-top { padding: 30px 0; } .footer .footer-top .con { display: block; } .footer .footer-top .con .left .logo { width: 120px; margin: 0 auto 30px; } .footer .footer-top .con .left h3 { text-align: center; } .footer .footer-top .con .left h2 { text-align: center; margin: 14px 0 20px; } .footer .footer-top .con .left .nav { display: none; } .footer .footer-top .con .right .erweima { margin: 0 auto; padding: 10px; } .footer .footer-top .con .right .erweima h2 { margin-top: 10px; } .footer .footer-bottom { padding: 20px 0; } .footer .footer-bottom .con { display: block; } .footer .footer-bottom .con .left p { text-align: center; } .footer .footer-bottom .con .right { display: flex; justify-content: center; margin-top: 20px; } .footer .footer-bottom .con .right ul li { margin-left: 0; width: 40px; } .footer .footer-bottom .con .right ul li .tu { margin: 0 auto; } .footer .footer-bottom .con .right ul li .erweima { width: 120px; height: 120px; margin-left: -60px; top: -180px; } .footer .footer-bottom .con .right ul li:hover .erweima { top: -140px; } #videoPopup .video-box { width: 90%; } } @media screen and (max-width: 768px) { .header .con .nav > ul { width: 70%; } .header .nav-button { right: 10px; } } .sub-nav { background: #f4f4f5; position:relative; width:100%; top:0; left:0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .con .left { float: left; } .sub-nav .con .left ul li { float: left; margin-right: 60px; } .sub-nav .con .left ul li a { line-height: 80px; display: block; font-size: 16px; font-weight:400; color: #333; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .con .left ul li a:before { content: ''; width: 0; height: 3px; background: #ed810e; position: absolute; left: 50%; bottom: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .con .left ul li:hover a { color: #ed810e; } .sub-nav .con .left ul li:hover a:before { width: 100%; left: 0; } .sub-nav .con .left ul li.active a { color: #ed810e; } .sub-nav .con .left ul li.active a:before { width: 100%; left: 0; } .sub-nav .con .right { float: right; } .sub-nav .con .right a { display: inline-block; line-height: 80px; font-weight:400; color: #333; font-size: 16px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav.active{ position:fixed; left:0; top:68px; z-index:99; } .sub-nav .con .right a img { vertical-align: middle; position: relative; top: -1px; } .sub-nav .con .right a:hover { color: #ed810e; } .sub-nav .con .right span { display: inline-block; line-height: 80px; color: #333; margin: 0 4px; font-weight:400; } .sub-nav .con .right em { display: inline-block; line-height: 80px; font-weight:400; color: #333; font-size: 16px; } @media screen and (max-width: 1440px) { .sub-nav .con .left ul li a { line-height: 60px; font-size: 14px; } .sub-nav .con .right a { line-height: 60px; font-size: 14px; } .sub-nav .con .right span { line-height: 60px; font-size: 14px; } .sub-nav .con .right em { line-height: 60px; font-size: 14px; } } @media screen and (max-width: 1024px) { .sub-nav .con .left ul li a { line-height: 40px; } .sub-nav .con .right a { line-height: 40px; } .sub-nav .con .right span { line-height: 40px; } .sub-nav .con .right em { line-height: 40px; } .sub-nav.active{ top:60px; } } @media screen and (max-width: 768px) { .sub-nav .con .left { width: 100%; display:none; } .sub-nav .con .left ul li { margin-right: 20px; } .sub-nav .con .right { width: 100%; } .sub-nav .con .right span { margin: 0; } .sub-nav.active{ position:relative; } } .p_zyx { text-align: center; margin-top: 4vw; } .p_zyx .page_a { width: 50px; height: 50px; border-radius: 50%; background: #fff; color: #c9c8c8; line-height: 50px; } .page_a.current{ color: #fff; border: none; background-image: linear-gradient(-58deg, #ee8f35 0%, #f6cb45 100%), linear-gradient( #f08200, #f08200); } .p_zyx .page_a:hover { color: #fff; border: none; background-image: linear-gradient(-58deg, #ee8f35 0%, #f6cb45 100%), linear-gradient( #f08200, #f08200); } @media screen and (max-width:1200px) { .p_zyx .page_a { width: 44px; height: 44px; line-height: 44px; } } @media screen and (max-width:768px) { .p_zyx { margin-top: 30px; } .p_zyx .page_a { width: 34px; height: 34px; line-height: 34px; margin: 0 2px; } }