body{ font-size: 14px; color: #121e2f; font-family: "寰蒋闆呴粦"; } *{ box-sizing: border-box; } a{ color: #121e2f; } a:hover{ color: #121e2f; } .inner{ width: 1200px; margin: 0 auto; } .page-banner{ position: relative; } .page-banner img{ width: 100%; } .page-banner .banner-text{ position: absolute; top: 50%; left: 0; width: 100%; color: #fff; text-align: center; transform: translate(0,-50%); } .page-banner .banner-text .title{ font-size: 36px; margin-bottom: 32px; } .page-banner .banner-text .subhead{ max-width: 870px; line-height: 24px; font-size: 16px; margin: 0 auto; } .page-banner .banner-text .subhead b{ display: block; font-weight: bold; margin-top: 24px; } .page-banner .banner-text .title2{ font-size: 48px; font-weight: bold; margin-bottom: 24px; } .page-banner .banner-text .subhead2{ max-width: 870px; font-size: 36px; margin: 0 auto 24px; } .page-banner .banner-text .title2:last-child, .page-banner .banner-text .subhead2:last-child{ margin-bottom: 0; } .page-banner .banner-text .case-text{ display: flex; align-items: center; justify-content: center; white-space: nowrap; } .page-banner .banner-text .case-text strong{ font-size: 36px; font-weight: bold; } .page-banner .banner-text .case-text u{ font-size: 48px; font-weight: bold; } .header{ /* height: 80px; */ } .header .real-header{ position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 3; background-color: rgba(255,255,255,0.08); transition: all .3s ease; } .header:hover .real-header, .header.high .real-header{ background-color: #fff; } .header.high .real-header{ box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1); } .header .inner{ display: flex; align-items: center; justify-content: space-between; height: 100%; } .header .logo{ position: relative; height: 29px; } .header .logo img{ height: 100%; opacity: 1; transition: all .3s ease; } .header .logo .img1{ position: absolute; top: 0; left: 0; height: 100%; opacity: 0; } .header.high .logo .img2, .header:hover .logo .img2{ opacity: 0; } .header.high .logo .img1, .header:hover .logo .img1{ opacity: 1; } .header .navigation{ height: 100%; } .header .navigation ul{ display: flex; height: 100%; } .header .navigation ul li{ position: relative; margin-right: 48px; } .header .navigation ul li:last-child{ margin-right: 0; } .header .navigation ul li .nav{ display: block; line-height: 76px; color: #fff; font-size: 16px; text-align: center; white-space: nowrap; border-top: 4px solid rgba(255,255,255,0); transition: all .3s ease; } .header .navigation ul li:hover .nav, .header .navigation ul li.active .nav{ border-top-color: #fff; } .header .navigation ul li .pro-pop{ position: absolute; top: 100%; left: 50%; width: 925px; padding: 0px 48px 24px; background-color: #fff; margin-left: -462.5px; box-shadow: 0 0 10px 0 #eee; display: none; } .header .navigation ul li:hover .pro-pop{ display: block; } .header .navigation ul li .pro-pop .block{ padding: 24px 0 12px; border-bottom: 1px solid #eeeeee; } .header .navigation ul li .pro-pop .block:last-child{ border-bottom-width: 0; } .header .navigation ul li .pro-pop .block .block-t{ display: flex; align-items: center; font-size: 18px; } .header .navigation ul li .pro-pop .block .block-t img{ width: 23px; height: 23px; margin-right: 15px; } .header .navigation ul li .pro-pop .block .list{ padding-left: 38px; } .header .navigation ul li .pro-pop .block .list .item{ display: flex; color: #465871; white-space: nowrap; border-bottom: 1px solid #eeeeee; padding: 15px 0; } .header .navigation ul li .pro-pop .block .list .item:last-child{ border-bottom-width: 0; } .header .navigation ul li .pro-pop .block .list .item .item-t{ min-width: 80px; font-size: 16px; margin-right: 48px; } .header .navigation ul li .pro-pop .block .list .item .lv4{ display: flex; flex-wrap: wrap; } .header .navigation ul li .pro-pop .block .list .item .lv4 .lv4-nav{ padding-top: 2px; margin-right: 48px; } .header .navigation ul li .pro-pop .block:hover .block-t, .header .navigation ul li .pro-pop .block.active .block-t, .header .navigation ul li .pro-pop .block .list .item:hover .item-t, .header .navigation ul li .pro-pop .block .list .item.active .item-t, .header .navigation ul li .pro-pop .block .list .item .lv4 .lv4-nav:hover, .header .navigation ul li .pro-pop .block .list .item .lv4 .lv4-nav.active{ color: #0055cc; } .header:hover .navigation ul li .nav, .header.high .navigation ul li .nav{ color: #465871; } .header:hover .navigation ul li.active .nav, .header.high .navigation ul li.active .nav, .header:hover .navigation ul li:hover .nav, .header.high .navigation ul li:hover .nav{ color: #0055cc; border-color: #0055cc; } .header .navigation ul li ol{ position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); background-color: #fff; box-shadow: 0 10px 10px 0 rgba(0,0,0,0.05); display: none; } .header .navigation ul li:hover ol{ display: block; } .header .navigation ul li ol li{ margin: 0; } .header .navigation ul li ol a{ display: block; line-height: 57px; color: #465871; font-size: 16px; white-space: nowrap; padding: 0 58px; } .header .navigation ul li ol li:hover a, .header .navigation ul li ol li.active a{ color: #1568dc; } .mobile-header{ height: 12vw; display: none; } .mobile-header .real-header{ position: fixed; top: 0; left: 0; width: 100%; height: 12vw; background-color: #0c5ed1; z-index: 4; } .mobile-header.high .real-header{ } .mobile-header .inner{ display: flex; align-items: center; justify-content: space-between; height: 100%; } .mobile-header .logo{ height: 40%; } .mobile-header .logo img{ display: none; height: 100%; } .mobile-header .logo .img2{ display: block; height: 100%; } .mobile-header .menu{ position: relative; width: 6.4vw; height: 6.4vw; overflow: hidden; } .mobile-header .menu span{ position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; } .mobile-header .menu span:nth-child(1){ top: 0; transform: rotate(0deg); transition: all .3s ease 0s; } .mobile-header .menu span:nth-child(2){ top: 48%; transform: rotate(0deg); transition: all .3s ease 0s; } .mobile-header .menu span:nth-child(3){ top: 89%; transition: all .3s ease 0s; } .mobile-header.active .menu span:nth-child(1){ top: 50%; transform: rotate(45deg); } .mobile-header.active .menu span:nth-child(2){ top: 50%; transform: rotate(-45deg); } .mobile-header.active .menu span:nth-child(3){ top: 105%; } .mobile-header .navigation{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; padding-top: 12vw; transform: translate(0,-120%); background-color: #fff; z-index: 3; transition: all .3s linear 0s; } .mobile-header.active .navigation{ transform: translate(0,0%); } .mobile-header .navigation ul li{ border-bottom: 1px solid #eee; } .mobile-header .navigation ul li .nav{ display: flex; align-items: center; justify-content: space-between; font-size: 4.6vw; padding: 3.2vw; } .mobile-header .navigation ul li .nav img{ width: 3.2vw; height: 2vw; } .mobile-header .navigation ul li.active .nav{ color: #1c7bff; } .mobile-header .navigation ul li.fold .nav img{ transform: rotate(180deg); } .mobile-header .navigation ul li .nav-box{ padding: 2vw 6vw; display: none; } .mobile-header .navigation ul li.fold .nav-box{ display: block; } .mobile-header .navigation ul li .nav-box .box{ padding-bottom: 2vw; } .mobile-header .navigation ul li .nav-box .box .box-t{ display: flex; align-items: center; font-size: 4vw; margin-bottom: 2vw; } .mobile-header .navigation ul li .nav-box .box .box-t img{ width: 4vw; height: 4vw; margin-right: 2vw; } .mobile-header .navigation ul li .nav-box .box .list{ padding-left: 6vw; } .mobile-header .navigation ul li .nav-box .box .list .item{ display: flex; white-space: nowrap; padding: 1.2vw 0; border-bottom: 1px solid #eee; } .mobile-header .navigation ul li .nav-box .box .list .item:last-child{ border-bottom-width: 0; } .mobile-header .navigation ul li .nav-box .box .list .item .item-t{ font-size: 3.6vw; margin-right: 4vw; } .mobile-header .navigation ul li .nav-box .box .list .item .lv4{ display: flex; flex-wrap: wrap; } .mobile-header .navigation ul li .nav-box .box .list .item .lv4 .lv4-nav{ padding-top: 0.4vw; margin-right: 4vw; margin-bottom: 2vw; } .mobile-header .navigation ul li .nav-box .box.active .box-t, .mobile-header .navigation ul li .nav-box .box .list .item.active{ color: #0055cc; } .mobile-header .navigation ul li ol{ padding: 0 6vw; display: none; } .mobile-header .navigation ul li.fold ol{ display: block; } .mobile-header .navigation ul li ol li:last-child{ border-bottom-width: 0; } .mobile-header .navigation ul li ol a{ display: block; line-height: 8vw; } .mobile-header .navigation ul li ol li.active a{ color: #1568dc; } .bread-crumbs .inner{ box-shadow: 0 -2px 0 0 #dee2e9 inset; } .bread-crumbs .text{ line-height: 64px; } .bread-crumbs .text img{ display: inline-block; width: 12px; height: 14px; margin-right: 9px; vertical-align: middle; } .bread-crumbs .text span, .bread-crumbs .text a{ color: #465871; vertical-align: middle; } .bread-crumbs .text span:last-child, .bread-crumbs .text a:last-child{ color: #8797af; } .bread-crumbs .page-tabs{ display: flex; align-items: center; justify-content: center; } .bread-crumbs .page-tabs::before, .bread-crumbs .page-tabs::after{ content: ''; } .bread-crumbs .page-tabs .tab{ color: #465871; font-size: 18px; padding: 24px 0; margin: 0 57px; border-bottom: 2px solid rgba(0,85,204,0); } .bread-crumbs .page-tabs .tab.active{ color: #0055cc; border-bottom-color: rgba(0,85,204,1); } .footer{ background: url(../img/footer_bg.jpg) no-repeat center center / cover; } .footer .footer-top{ padding: 32px 0 0; } .footer .footer-top .logo{ height: 29px; margin-bottom: 48px; } .footer .footer-top .center{ display: flex; justify-content: space-between; } .footer .footer-top .center .left{ display: flex; align-items: flex-start; justify-content: space-between; width: 50%; } .footer .footer-top .title{ position: relative; color: #fff; font-size: 18px; margin-bottom: 32px; } .footer .footer-top .title::after{ content: ''; display: block; width: 36px; height: 2px; background-color: #436390; margin-top: 18px; } .footer .footer-top .navigation ul li{ margin-bottom: 24px; } .footer .footer-top .navigation ul li a{ display: block; color: #a1b4d0; } .footer .footer-top .navigation ul li a:hover{ color: #fff; } .footer .footer-top .msg{ color: #a1b4d0; margin-bottom: 24px; } .footer .footer-top .hint{ color: #a1b4d0; } .footer .footer-top .contact{ color: #fff; font-size: 30px; margin-bottom: 26px; } .footer .footer-top .ewm{ width: 120px; height: 120px; margin-bottom: 55px; } .footer .footer-top .links{ display: flex; align-items: center; flex-wrap: wrap; padding-bottom: 26px; } .footer .footer-top .links span{ color: #fff; margin-right: 32px; } .footer .footer-top .links a{ color: #a1b4d0; margin-right: 43px; } .footer .footer-top .links a:hover{ color: #fff; } .footer .footer-bottom{ border-top: 1px solid #233a5e; } .footer .footer-bottom .inner{ display: flex; align-items: center; justify-content: space-between; height: 64px; } .footer .footer-bottom p{ color: #445877; } .footer .footer-bottom .beian{ display: flex; align-items: center; } .footer .footer-bottom .beian img{ width: 18px; height: 20px; margin-right: 10px; } .page-right-tools{ position: fixed; top: 50%; right: 0; z-index: 3; } .page-right-tools .item{ position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background-color: #1c7bff; } .page-right-tools .item .icon{ width: 24px; height: 24px; } .page-right-tools .item .item-in{ position: absolute; right: 100%; top: 50%; transform: translate(0,-50%); display: none; } .page-right-tools .item:hover .item-in{ display: block; } .page-right-tools .item .item-in .content{ position: relative; color: #0055cc; line-height: 56px; font-size: 18px; text-align: center; white-space: nowrap; padding: 0 25px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px 0 #eeeeee; } .page-right-tools .item .item-in .content::after{ content: ''; position: absolute; top: 50%; right: -5.5px; width: 11px; height: 11px; background-color: #fff; margin-top: -5.5px; transform: rotate(45deg); } .page-right-tools .item.contact .item-in .content{ font-size: 24px; } .pop-up-box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 2; } .pop-up-box .mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .pop-up-box .pop-cont{ position: absolute; top: 50%; left: 50%; width: 800px; background-color: #fff; transform: translate(-50%,-50%); border-radius: 10px; } .pop-up-box .close{ position: absolute; bottom: -60px; left: 50%; width: 40px; height: 40px; background: url(../img/close.png) no-repeat center center / 100% 100%; cursor: pointer; transform: translate(-50%, 0); } .pop-up-box .pop-in{ max-height: 75vh; overflow: auto; } .yuyue-pop .pop-cont{ width: 480px; max-width: 92%; padding: 40px 30px; background: url(../img/yuyue_pop_bg.jpg) no-repeat center top / contain #fff; border-radius: 10px; box-sizing: border-box; } .yuyue-pop .title{ color: #0055cc; font-size: 24px; text-align: center; margin-bottom: 40px; } .yuyue-pop form{ display: block; } .yuyue-pop form input{ display: block; width: 100%; height: 48px; padding-left: 18px; margin-bottom: 16px; border-radius: 4px; border: 1px solid #eeeeee; } .yuyue-pop form .vcode{ display: flex; margin-bottom: 16px; } .yuyue-pop form .vcode input{ margin-bottom: 0px; } .yuyue-pop form .vcode button{ flex-shrink: 0; width: 120px; line-height: 48px; color: #fff; font-size: 16px; text-align: center; border-width: 0; background-color: #0055cc; margin-left: 8px; border-radius: 4px; cursor: pointer; } .yuyue-pop form textarea{ width: 100%; height: 120px; padding: 15px 16px; border: 1px solid #eeeeee; margin-bottom: 40px; border-radius: 4px; } .yuyue-pop form .submit{ display: block; width: 100%; height: 48px; color: #fff; font-size: 18px; text-align: center; background-color: #0055cc; border-width: 0; border-radius: 4px; cursor: pointer; } @media screen and (max-width: 750px){ .yuyue-pop .pop-cont{ width: 92%; padding: 4vw; border-radius: 1.6vw; } .yuyue-pop .title{ font-size: 5.4vw; margin-bottom: 4vw; } .yuyue-pop form input{ height: 10vw; padding-left: 2.4vw; margin-bottom: 2vw; border-radius: 1.2vw; } .yuyue-pop form .vcode{ margin-bottom: 2vw; } .yuyue-pop form .vcode button{ width: 24vw; line-height: 10vw; font-size: 3.2vw; margin-left: 1.6vw; border-radius: 1.2vw; } .yuyue-pop form textarea{ width: 100%; height: 24vw; padding: 2vw; margin-bottom: 4vw; border-radius: 1.2vw; } .yuyue-pop form .submit{ width: 100%; height: 10vw; font-size: 4vw; border-radius: 1.2vw; } } @media screen and (max-width: 1280px){ .inner{ width: 92%; } .header .navigation ul li{ margin-right: 32px; } .header .navigation ul li .pro-pop{ position: fixed; top: 80px; left: 2%; margin-left: 0; } } @media screen and (max-width: 1030px){ .header .navigation ul li{ margin-right: 24px; } .header .navigation ul li .pro-pop{ left: 0; } } @media screen and (max-width: 950px){ body{ font-size: 3.2vw; } .page-banner img{ height: 59vw; object-fit: cover; } .page-banner .banner-text{ left: 50%; width: 92%; transform: translate(-50%, -50%); } .page-banner .banner-text .title{ font-size: 5vw; margin-bottom: 4vw; } .page-banner .banner-text .subhead{ line-height: 4.6vw; font-size: 3.2vw; } .page-banner .banner-text .subhead b{ margin-top: 3.2vw; } .page-banner .banner-text .title2{ font-size: 6.4vw; margin-bottom: 3.2vw; } .page-banner .banner-text .subhead2{ font-size: 4.8vw; margin-bottom: 3.2vw; } .page-banner .banner-text .case-text strong{ font-size: 4.8vw; } .page-banner .banner-text .case-text u{ font-size: 6.4vw; } .header{ display: none; } .mobile-header{ display: block; } .bread-crumbs .text{ line-height: 10vw; } .bread-crumbs .page-tabs{ justify-content: space-between; } .bread-crumbs .page-tabs .tab{ font-size: 3.2vw; padding: 3.2vw 0; margin: 0; } .footer{ background-size: auto 115%; } .footer .footer-top{ } .footer .footer-top .center{ display: block; } .footer .footer-top .center .left{ display: block; width: 100%; margin-bottom: 4vw; } .footer .footer-top .title{ font-size: 3.2vw; white-space: nowrap; } .footer .footer-top .title::after{ display: none; } .footer .footer-top .navigation{ display: flex; align-items: flex-start; } .footer .footer-top .navigation .title{ margin-right: 1.6vw; margin-bottom: 0; } .footer .footer-top .navigation ul{ display: flex; align-items: center; flex-wrap: wrap; } .footer .footer-top .navigation ul li{ margin-right: 3.2vw; margin-bottom: 3.2vw; } .footer .footer-top .contact{ font-size: 4.4vw; margin-bottom: 0; } .footer .footer-top .address{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 4vw; } .footer .footer-top .address .t{ margin-right: 4vw; } .footer .footer-top .address .title{ margin-bottom: 2vw; } .footer .footer-top .address .msg{ margin-bottom: 3.2vw; } .footer .footer-top .ewm{ width: 24vw; height: 24vw; margin-bottom: 0; } .footer .footer-top .links{ line-height: 6vw; padding-bottom: 8vw; } .footer .footer-bottom .inner{ display: block; height: auto; text-align: center; padding: 4vw 0; } .footer .footer-bottom .beian{ justify-content: center; } .page-right-tools{ position: static; height: 45px; display: none; } .page-right-tools .real-tools{ position: fixed; bottom: 0; left: 0; width: 100%; display: flex; } .page-right-tools .item{ flex: 1; width: auto; height: 45px; border-right: 1px solid #fff; } .page-right-tools .item:last-child{ border-right-width: 0; } .page-right-tools .item .icon{ width: 22.5px; height: 22.5px; } .page-right-tools .item-in{ display: none !important; } /* .page-right-tools .item .item-in .content{ line-height: 12vw; font-size: 3.6vw; padding: 0 3.2vw; border-radius: 1.2vw; } .page-right-tools .item.contact .item-in .content{ font-size: 4.8vw; } */ }