@charset "UTF-8"; .iconfont { font-size: inherit; } .img-fluid { max-width: 100%; } @keyframes top { 0% { transform: translateY(0px); } 100% { transform: translateY(10px); } } @-ms-keyframes top { from { -ms-transform: translateY(0px); } to { -ms-transform: translateY(10px); } } @-moz-keyframes top { from { -moz-transform: translateY(0px); } to { -moz-transform: translateY(10px); } } @-webkit-keyframes top { from { -webkit-transform: translateY(0px); } to { -webkit-transform: translateY(10px); } } @-o-keyframes top { from { -o-transform: translateY(0px); } to { -o-transform: translateY(10px); } } .aniamte-top-1 { animation: top 1.2s linear infinite alternate; -ms-animation: top 1.2s linear infinite alternate; -moz-animation: top 1.2s linear infinite alternate; -webkit-animation: top 1.2s linear infinite alternate; -o-animation: top 1.2s linear infinite alternate; } .aniamte-top-2 { animation: top 1.2s linear 0.8s infinite alternate; -ms-animation: top 1.2s linear 0.8s infinite alternate; -moz-animation: top 1.2s linear 0.8s infinite alternate; -webkit-animation: top 1.2s linear 0.8s infinite alternate; -o-animation: top 1.2s linear 0.8s infinite alternate; } .aniamte-top-3 { animation: top 1.2s linear 0.4s infinite alternate; -ms-animation: top 1.2s linear 0.4s infinite alternate; -moz-animation: top 1.2s linear 0.4s infinite alternate; -webkit-animation: top 1.2s linear 0.4s infinite alternate; -o-animation: top 1.2s linear 0.4s infinite alternate; } .header { height: 100px; z-index: 9; width: 100%; position: fixed; background-color: #ffffff; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .header .header-wrap { height: 100%; width: 91.146%; margin: 0 auto; min-width: 1200px; } .header .logo img { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .header .nav { flex: 1; max-width: 990px; } .header .nav li { font-size: 16px; flex: 1; height: 100%; } .header .nav li a { display: block; text-align: center; line-height: 100px; color: #333333; } .header .header-tel { font-size: 24px; } .header .header-tel .icon-24hour { height: 24px; display: inline-block; vertical-align: text-top; } .header .header-tel span { display: inline-block; vertical-align: middle; } .header .header-tel .search-wrap::before { content: ''; display: inline-block; height: 20px; vertical-align: middle; border-left: 1px solid rgba(83, 83, 83, 0.9); margin-left: 10px; } .header .header-tel .search-wrap .iconfont { display: inline-block; vertical-align: middle; cursor: pointer; } .header:hover, .header.hover { background-color: #fff !important; } .header:hover .logo .logo-txt img, .header.hover .logo .logo-txt img { filter: grayscale(0) brightness(0) !important; } .header:hover .nav li a, .header.hover .nav li a { color: #333333 !important; } .header:hover .header-tel, .header.hover .header-tel { color: #333333 !important; } .header:hover .header-tel .search-wrap::before, .header.hover .header-tel .search-wrap::before { border-color: #666666 !important; } .header.header-min { position: fixed !important; height: 70px; background: #fff !important; z-index: 99999; -webkit-box-shadow: 0 14px 56px -15px rgba(10, 25, 48, 0.2); -moz-box-shadow: 0 14px 56px -15px rgba(10, 25, 48, 0.2); box-shadow: 0 14px 56px -15px rgba(10, 25, 48, 0.2); } .header.header-min img { filter: none !important; } .header.header-min .logo .logo-txt img { /*-webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.759); transform: scale(.9);*/ height: 38px; } .header.header-min .nav li a { line-height: 70px !important; color: #333333 !important; } .header.header-min .header-tel { color: #333333 !important; } .header.header-min .header-tel .search-wrap::before { border-left: 1px solid rgba(0, 0, 0, 0.9) !important; } .dropdown-nav { width: 100vw; left: 0; display: none; height: 440px; background: url("../Image/nav-bg.png") center/cover no-repeat; position: absolute; margin-top: 0; width: 100%; color: #ffffff; padding-top: 75px; } .dropdown-nav .nav-leftbar { width: 250px; padding-right: 40px; } .dropdown-nav .nav-leftbar h3 { font-size: 16px; font-weight: bold; line-height: 46px; margin-bottom: 2px; } .dropdown-nav .nav-leftbar h3::after { content: ''; display: block; width: 30px; height: 1px; background-color: rgba(255, 255, 255, 0.5); } .dropdown-nav .nav-leftbar p { margin-top: 12px; opacity: .5; line-height: 30px; } .dropdown-nav .nav-leftbar .link { display: block; line-height: 26px; color: #ffffff; position: relative; width: 62px; text-align: center; z-index: 33; margin-top: 45px; } .dropdown-nav .nav-leftbar .link span { position: relative; z-index: 2; } .dropdown-nav .nav-leftbar .link::after { content: ''; display: block; height: 3px; width: 60px; position: absolute; bottom: 6px; left: 0; z-index: 1; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); opacity: 0.8; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .dropdown-nav .nav-leftbar .link a { position: relative; z-index: 2; display: block; color: #333333; } .dropdown-nav .nav-leftbar .link:hover::after { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .dropdown-nav .nav-leftbar .link:hover a { color: #DD3833; } .dropdown-nav .nav-container { flex: 1; max-width: 800px; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } .dropdown-nav .nav-container .child-item { padding-left: 33px; display: none; height: 100%; } .dropdown-nav .nav-container .child-item dl { width: 187px; padding-left: 60px; padding-right: 34px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dropdown-nav .nav-container .child-item dl dt { font-size: 16px; font-weight: bold; line-height: 26px; padding-bottom: 12px; margin-bottom: 3px; position: relative; } .dropdown-nav .nav-container .child-item dl dt::before { content: ''; width: 26px; height: 26px; position: absolute; left: -30px; } .dropdown-nav .nav-container .child-item dl dt a { color: #ffffff; } .dropdown-nav .nav-container .child-item dl dd a { display: block; line-height: 36px; color: #fff; opacity: .5; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .dropdown-nav .nav-container .child-item dl dd a:hover { opacity: .8; -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); -o-transform: translateX(5px); transform: translateX(5px); } .dropdown-nav .nav-container .child-item dl dd p { opacity: .5; line-height: 36px; } .dropdown-nav .nav-container .child-item dl.about dt::before { background: url("../Image/nav/icon-1.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.news dt::before { background: url("../Image/nav/icon-2.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.contact dt::before { background: url("../Image/nav/icon-3.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.zpzc dt::before { background: url("../Image/nav/icon-4.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.zplist dt::before { background: url("../Image/nav/icon-5.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.cases-6 dt::before { background: url("../Image/nav/icon-6.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.cases-7 dt::before { background: url("../Image/nav/icon-7.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.cases-8 dt::before { background: url("../Image/nav/icon-8.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.cases-9 dt::before { background: url("../Image/nav/icon-9.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-10 dt::before { background: url("../Image/nav/icon-10.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-11 dt::before { background: url("../Image/nav/icon-11.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-12 dt::before { background: url("../Image/nav/icon-12.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-13 dt::before { background: url("../Image/nav/icon-13.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-14 dt::before { background: url("../Image/nav/icon-14.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-15 dt::before { background: url("../Image/nav/icon-15.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-16 dt::before { background: url("../Image/nav/icon-16.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-17 dt::before { background: url("../Image/nav/icon-17.png") left center no-repeat; } .dropdown-nav .nav-container .child-item dl.icon-18 dt::before { background: url("../Image/nav/icon-18.png") left center no-repeat; } .dropdown-nav .nav-container .child-item.item-6 dl { width: 320px; } .dropdown-nav .nav-container .child-item.item-5 dl { width: 100%; } .dropdown-nav .nav-container .child-item.item-5 dl dt { width: 150px; padding-bottom: 0; margin-bottom: 0; } .dropdown-nav .nav-container .child-item.item-5 dl dt::after { content: ''; display: block; position: absolute; width: 0; height: 16px; border-right: 1px solid rgba(255, 255, 255, 0.1); margin: auto; top: 0; bottom: 0; right: 0; } .dropdown-nav .nav-container .child-item.item-5 dl dd { flex: 0 0 520px; overflow: hidden; } .dropdown-nav .nav-container .child-item.item-5 dl dd a { margin-left: 25px; } .dropdown-nav .nav-container .child-item.item-4 dl:nth-child(1) { width: 220px; } .dropdown-nav .nav-container .child-item.item-4 dl:nth-child(2) { width: 320px; } .dropdown-nav .nav-container .child-item.item-4 dl:nth-child(3) { width: 210px; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item { width: 190px; text-align: center; margin: 25px 0; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-name { color: #fff; opacity: .5; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon { height: 60px; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-name { line-height: 26px; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-1 { background: url("../Image/nav/icon2-1.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-2 { background: url("../Image/nav/icon2-2.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-3 { background: url("../Image/nav/icon2-3.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-4 { background: url("../Image/nav/icon2-4.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-5 { background: url("../Image/nav/icon2-5.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-6 { background: url("../Image/nav/icon2-6.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item .item-icon.icon2-7 { background: url("../Image/nav/icon2-7.png") center no-repeat; } .dropdown-nav .nav-container .child-item.item-3 .bd-list .bd-item:hover .item-name { opacity: .8; } .dropdown-nav .nav-container .child-item.item-2 dl { width: 220px; } .dropdown-nav .nav-container .child-item.item-1 dl dt::after, .dropdown-nav .nav-container .child-item.item-2 dl dt::after, .dropdown-nav .nav-container .child-item.item-6 dl dt::after, .dropdown-nav .nav-container .child-item.item-7 dl dt::after { content: ''; display: block; position: absolute; bottom: 0; width: 90px; left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dropdown-nav .nav-container .child-item.active { display: block; } .dropdown-nav .nav-rightbar { width: 250px; padding-left: 60px; } .dropdown-nav .nav-rightbar .contact-item { margin-bottom: 40px; } .dropdown-nav .nav-rightbar .contact-item .item-name { margin-bottom: 10px; line-height: 1; } .dropdown-nav .nav-rightbar .contact-item .item-con { opacity: .5; line-height: 20px; } @-webkit-keyframes wave-play { to { background-position: 0 -1694px; } } @keyframes wave-play { to { background-position: 0 -1694px; } } .banner-container { margin-top: 100px; position: relative; } .banner-container .banner-thumbs { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 2; } .banner-container .banner-thumbs .container { position: relative; } .banner-container .banner-thumbs .container .thumbs-item { height: 105px; width: 400px; position: relative; } .banner-container .banner-thumbs .container .thumbs-item::before { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background-image: linear-gradient(-179deg, rgba(255, 255, 255, 0), #fff); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; } .banner-container .banner-thumbs .container .thumbs-item::after { display: block; content: ""; display: none; position: absolute; bottom: 0; width: 425px; height: 14px; background-color: transparent; z-index: 5; background-repeat: no-repeat; background-position: 50% 0; -webkit-animation: wave-play 3s steps(121) infinite both; animation: wave-play 3s steps(121) infinite both; background-image: url("../Image/bolang.png"); background-size: cover; transition: background-image 300ms cubic-bezier(0, 0, 0.2, 1) 0s; } .banner-container .banner-thumbs .container .thumbs-item .item-wrap { position: relative; z-index: 2; color: #ffffff; } .banner-container .banner-thumbs .container .thumbs-item .item-wrap .item-icon { width: 45px; height: 45px; margin-right: 10px; } .banner-container .banner-thumbs .container .thumbs-item .item-wrap .banner-title { font-size: 18px; } .banner-container .banner-thumbs .container .thumbs-item .item-wrap .banner-desc { opacity: .5; } .banner-container .banner-thumbs .container .thumbs-item.active::before { opacity: .1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .banner-container .banner-thumbs .container .thumbs-item.active::after { display: block; } .banner-container .banner-thumbs .container .thumbs-item .item-icon.icon-1 { background: url("../Image/icon-b1.png") center/contain no-repeat; } .banner-container .banner-thumbs .container .thumbs-item .item-icon.icon-2 { background: url("../Image/icon-b2.png") center/contain no-repeat; } .banner-container .banner-thumbs .container .thumbs-item .item-icon.icon-3 { background: url("../Image/icon-b3.png") center/contain no-repeat; } .banner-container .banner-thumbs .container .thumbs-item .item-icon.icon-4 { background: url("../Image/icon-b4.png") center/contain no-repeat; } .index-page .header, .company-page .header, .cultrue-page .header, .social-page .header, .history-page .header, .social-page .header { background-color: transparent; top: 0; position: absolute; /*img{ filter: grayscale(100%) brightness(100); }*/ } .index-page .header .logo, .company-page .header .logo, .cultrue-page .header .logo, .social-page .header .logo, .history-page .header .logo, .social-page .header .logo { width: 343px; height: 46px; } .index-page .header .logo .logo-txt img, .company-page .header .logo .logo-txt img, .cultrue-page .header .logo .logo-txt img, .social-page .header .logo .logo-txt img, .history-page .header .logo .logo-txt img, .social-page .header .logo .logo-txt img { filter: grayscale(100%) brightness(100); } .index-page .header .nav li a, .company-page .header .nav li a, .cultrue-page .header .nav li a, .social-page .header .nav li a, .history-page .header .nav li a, .social-page .header .nav li a { color: #ffffff; } .index-page .header .header-tel, .company-page .header .header-tel, .cultrue-page .header .header-tel, .social-page .header .header-tel, .history-page .header .header-tel, .social-page .header .header-tel { color: #ffffff; } .index-page .header .header-tel .search-wrap::before, .company-page .header .header-tel .search-wrap::before, .cultrue-page .header .header-tel .search-wrap::before, .social-page .header .header-tel .search-wrap::before, .history-page .header .header-tel .search-wrap::before, .social-page .header .header-tel .search-wrap::before { border-left: 1px solid rgba(255, 255, 255, 0.9); } .index-page .banner-container, .company-page .banner-container, .cultrue-page .banner-container, .social-page .banner-container, .history-page .banner-container, .social-page .banner-container { margin-top: 0; } .banner { height: 800px; position: relative; z-index: 1; } .banner img { vertical-align: bottom; display: block; } .sbanner { height: 402px; background-color: #162343; background-repeat: no-repeat; background-position: center; background-size: cover; } .sbanner .sbanner-wrap { height: 330px; color: #ffffff; } .sbanner .sbanner-wrap .sbanner-desc { font-size: 18px; -ms-flex-order: 2; order: 2; } .sbanner .sbanner-wrap .sbanner-name { font-size: 48px; display: inline-block; position: relative; margin-top: 15px; letter-spacing: 8px; -ms-flex-order: 1; order: 1; } .sbanner .sbanner-wrap .sbanner-name .tag { letter-spacing: initial; display: inline-block; vertical-align: text-top; font-size: 14px; background-color: #e03833; color: #ffffff; height: 20px; width: 40px; border-radius: 3px; text-align: center; } .channel-nav { background-color: #ffffff; line-height: 70px; text-align: center; } .channel-nav li { flex: 1; text-align: center; font-size: 16px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; -webkit-box-shadow: 0px -2px 10px 0px rgba(255, 255, 255, 0.5); -moz-box-shadow: 0px -2px 10px 0px rgba(255, 255, 255, 0.5); box-shadow: 0px -2px 10px 0px rgba(255, 255, 255, 0.5); } .channel-nav li:nth-child(1) { border-left: none; } .channel-nav li.active { border-bottom: none; border-top: 2px solid #dd3834; } .video-sbanner { height: 681px; background: #FFFFFF; position: relative; } .video-sbanner .sbanner-wrap { height: 610px; position: relative; z-index: 2; } .video-sbanner .sbanner-wrap .channel-name { font-size: 72px; text-align: center; line-height: 2; margin-bottom: 42px; } .video-sbanner .channel-nav { position: relative; z-index: 2; } .video-sbanner .video-wrap { position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; } .video-sbanner .video-wrap::before { content: ''; background: url("../Image/company/video-overlay.png") center/cover no-repeat rgba(0, 0, 0, 0.3); position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; opacity: .3; } .video-sbanner .video-wrap video { width: 100%; height: 100%; object-fit: cover; } .video-sbanner .team-box { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .video-sbanner .team-box .team-param { text-align: center; flex: 0 0 25%; max-width: 25%; padding: 25px 0; } .video-sbanner .team-box .team-param:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.2); } .video-sbanner .team-box .team-param .param-num { font-size: 72px; color: #ffffff; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .video-sbanner .team-box .team-param .param-num span { font-size: 18px; vertical-align: text-top; } .video-sbanner .team-box .team-param .param-desc { color: #ffffff; font-size: 16px; } .video-sbanner .team-box .team-param:hover .param-num { color: #dd3834; } .section-box .section { padding-top: 50px; padding-bottom: 44px; } .section-box .section .sec-head { text-align: center; margin-bottom: 25px; } .section-box .section .sec-head .sec-title { font-size: 32px; color: #333333; } .section-box .section .sec-head .sec-desc { color: #9ca0a4; line-height: 36px; font-size: 20px; } .section-box .section:nth-child(odd) { background-color: #f6f8fb; } .sec-foot a:first-child { margin-left: 0; } footer.footer { background: url("../Image/footer-bg.jpg") center/cover no-repeat #1a1c31; padding-top: 60px; padding-bottom: 20px; } footer.footer .footer-top { padding-bottom: 50px; } footer.footer .footer-top .footer-nav { width: 700px; } footer.footer .footer-top .nav-grid .grid-column { flex: 0 0 20%; border-right: 1px solid #252b42; padding-left: 28px; } footer.footer .footer-top .nav-grid .grid-column dl:nth-child(2) { margin-top: 20px; } footer.footer .footer-top .nav-grid .grid-column dl dt { font-size: 14px; line-height: 16px; font-weight: bold; color: rgba(221, 228, 252, 0.7); margin-bottom: 11px; } footer.footer .footer-top .nav-grid .grid-column dl a { font-size: 12px; line-height: 26px; color: rgba(139, 146, 170, 0.6); } footer.footer .footer-top .nav-grid .grid-column dl a:hover { color: #8b92aa; } footer.footer .footer-top .footer-contact { font-size: 12px; width: 600px; padding-left: 48px; color: rgba(139, 146, 170, 0.6); } footer.footer .footer-top .footer-contact .contact-top { background: url("../Image/icon-24hour-2.png") left center no-repeat; padding-left: 60px; margin-bottom: 25px; } footer.footer .footer-top .footer-contact .contact-top .contact-title { font-size: 14px; color: #b2b8ce; } footer.footer .footer-top .footer-contact .contact-top .contact-num { font-weight: bold; font-size: 22px; color: #ffffff; } footer.footer .footer-top .footer-contact .info-content { line-height: 2; } footer.footer .footer-top .footer-contact .info-content span { margin-right: 10px; } footer.footer .footer-top .footer-contact .contact-btn { display: block; width: 130px; height: 40px; line-height: 40px; text-align: center; color: #ffffff; background-color: #284f94; border-radius: 3px; margin-top: 25px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } footer.footer .footer-top .footer-contact .contact-btn:hover { background-color: var(--theme-red); } footer.footer .footer-top .footer-contact .contact-btn .icon { width: 1.25em; height: 1.25em; vertical-align: middle; } footer.footer .footer-top .footer-contact .contact-btn span { margin-left: 10px; } footer.footer .footer-top .footer-contact .contact-wx { margin-right: 20px; } footer.footer .footer-top .footer-contact .contact-wx > p { color: #dde4fc; opacity: .7; line-height: 16px; margin-bottom: 18px; } footer.footer .footer-top .footer-contact .contact-wx .wx-qrcode { width: 130px; height: 130px; } footer.footer .footer-top .footer-contact .contact-wx .wx-qrcode img { background-color: #ffffff; padding: 5px; border: 1px solid #dddee1; width: 100%; height: 100%; object-fit: contain; } footer.footer .footer-top .footer-contact .contact-wx .wx-qrcode p { line-height: 2; margin-top: 5px; } footer.footer .favlink { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 18px; padding-left: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: 22px; margin-bottom: 10px; } footer.footer .favlink span { margin-right: 5px; } footer.footer .favlink a { color: rgba(255, 255, 255, 0.6); margin: 0 3px; } footer.footer .favlink a:hover { color: rgba(255, 255, 255, 0.8); } footer.footer .copyright { font-size: 12px; color: rgba(255, 255, 255, 0.2); line-height: 22px; } footer.footer .copyright a { margin: 0 5px; } .gxxq-box { margin-bottom: 40px; background: url("../Image/xcx/gxxq-bg.jpg") top center no-repeat; } .gxxq-box .box-item { flex: 1; } .gxxq-box .box-item .row-item { border-right: 1px solid #eeeeee; line-height: 60px; height: 60px; text-align: center; font-size: 14px; border-bottom: 1px solid #eeeeee; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; color: #666666; overflow: hidden; } .gxxq-box .box-item .row-item p { line-height: 30px; color: #666666; } .gxxq-box .box-item .row-item .price { font-size: 24px; color: #df3833; margin-right: 5px; } .gxxq-box .box-item .row-item .btn { margin: 10px auto; display: block; width: 150px; height: 40px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; line-height: 40px; text-align: center; background: transparent; } .gxxq-box .box-item .row-item.box-head { height: 58px; color: #ffffff; background: transparent !important; line-height: 58px; font-size: 18px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); } .gxxq-box .box-item .row-item.box-bd { height: 360px; } .gxxq-box .box-item:first-child { width: 220px; font-size: 16px; border-left: 1px solid #eeeeee; color: #666666; } .gxxq-box .box-item:hover .row-item .btn { color: #ffffff; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); box-shadow: 0px 10px 20px 0px rgba(221, 56, 51, 0.26); } .grid-box .full-col { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: relative; } .grid-box .full-col img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; } .grid-box .full-col.full-col-1 { flex: 0 0 100%; max-width: 100%; } .grid-box .full-col.full-col-2 { flex: 0 0 50%; max-width: 50%; } .grid-box .full-col.full-col-3 { flex: 0 0 33.333%; max-width: 33.333%; } .grid-box .full-col.full-col-4 { flex: 0 0 25%; max-width: 25%; } .grid-box .full-col.full-col-5 { flex: 0 0 20%; max-width: 20%; } .grid-box .full-col.full-col-6 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .grid-box.hover-shadow .full-col:hover { -webkit-box-shadow: 0px 12px 32px rgba(147, 147, 147, 0.5); -moz-box-shadow: 0px 12px 32px rgba(147, 147, 147, 0.5); box-shadow: 0px 12px 32px rgba(147, 147, 147, 0.5); z-index: 2; } .grid-box.border { border: 1px solid #eee; border-right: none; border-bottom: none; } .grid-box.border .full-col { border-right: 1px solid #EEEEEE; border-bottom: 1px solid #eee; } .grid-box.gutters-2 { margin-left: -1px; margin-right: -1px; } .grid-box.gutters-2 .full-col { padding-left: 1px; padding-right: 1px; } .grid-box.gutters-10 { margin-left: -5px; margin-right: -5px; } .grid-box.gutters-10 .full-col { padding-left: 5px; padding-right: 5px; } .grid-box.gutters-15 { margin-left: -7.5px; margin-right: -7.5px; } .grid-box.gutters-15 .full-col { padding-left: 7.5px; padding-right: 7.5px; } .grid-box.gutters-20 { margin-left: -10px; margin-right: -10px; } .grid-box.gutters-20 .full-col { padding-left: 10px; padding-right: 10px; } .de-page-mian { overflow: hidden; text-align: center; font-size: 0; margin: 10px 0 35px; } .de-page-mian .page-inner { display: inline-block; overflow: hidden; } .de-page-mian .page-inner a { display: block; float: left; min-width: 26px; padding: 0 5px; height: 36px; border: 1px solid #dddddd; background: #fff; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin-right: -1px; overflow: hidden; } .de-page-mian .page-inner a.prev { margin-right: 10px; background: #fff url(../images/prev.jpg) no-repeat center; } .de-page-mian .page-inner a.prev.on { background: #fff url(../images/prev-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.prev:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.next { margin-left: 10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center; } .de-page-mian .page-inner a.next.on { background: #fff url(../images/next-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.next:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.page-btn { font-size: 12px; margin-right: 0; width: 63px; margin-left: 10px; } .de-page-mian .page-inner span { display: block; font-size: 12px; color: #333; float: left; line-height: 38px; } .de-page-mian .page-inner input { display: block; float: left; height: 36px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin: 0 5px; } .de-page-mian .page-inner a.active, .de-page-mian .page-inner a:hover { color: #fff; border-color: #237ed2; background: #237ed2; } /*自定义分页样式*/ .w-page { margin-bottom: 20px; } .w-page li.active span { z-index: 3; color: #fff; background-color: var(--theme-red); } .w-page li.disabled { cursor: no-drop; } .w-page li.disabled span { color: #6c757d; pointer-events: none; background-color: #eeeeee; } .pagination { display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; } .w-page li a, .w-page li span { position: relative; display: block; padding: .5rem .75rem; line-height: 1.25; color: #666; background-color: #e2e2e2; margin: 2px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .w-page li a:hover, .w-page li span:hover { background-color: #cdcdcd; color: #fff; } /*底部漂浮*/ .bottom-float { position: relative; z-index: 999; background-color: rgba(230, 233, 237, 0.85); backdrop-filter: blur(8px); } .bottom-float .container { position: relative; } .bottom-float .float-wrap { bottom: 0; position: relative; height: 145px; z-index: 999; width: 100%; } .bottom-float .float-wrap .float-left { position: relative; height: 100%; width: 250px; } .bottom-float .float-wrap .float-left img { position: absolute; bottom: 0; left: 0; max-width: 90%; } .bottom-float .float-wrap .float-form { width: 820px; } .bottom-float .float-wrap .float-contact { width: 160px; padding-top: 25px; } .bottom-float .float-wrap .float-contact .contact-tip { height: 24px; line-height: 24px; color: #fff; font-size: 12px; background-color: #dd3833; padding: 0 5px; border-radius: 12px; width: 125px; text-align: center; } .bottom-float .float-wrap .float-contact .contact-tip .icon { width: 22px; height: 22px; vertical-align: middle; } .bottom-float .float-wrap .float-contact .contact-tip span { display: inline-block; vertical-align: middle; } .bottom-float .float-wrap .float-contact .contact-num { margin-top: 5px; font-size: 24px; color: #dd3833; } .bottom-float .colse-btn { position: absolute; top: 20px; right: -30px; z-index: 33333; cursor: pointer; } .bottom-float .colse-btn .icon { width: 2em; height: 2em; } .bottom-float .colse-btn:hover .icon { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .bottom-float .colse-btn:hover .icon path { fill: #dd3833; } .float-form { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .float-form .form-top { vertical-align: middle; line-height: 24px; color: #999999; margin-bottom: 8px; } .float-form .form-top img { margin-right: 5px; } .float-form .form-item-inline { height: 46px; background-color: #fff; display: inline-block; vertical-align: middle; padding: 0 10px; } .float-form .form-item-inline.tel { width: 320px; } .float-form .form-item-inline.code { padding-right: 0; } .float-form .input-label { font-size: 20px; margin-right: 8px; position: relative; color: #cccccc; width: 38px; text-align: center; } .float-form .input-label::after { content: ''; position: absolute; display: block; height: 15px; border-right: 1px solid #cccccc; margin: auto; top: 0; bottom: 0; right: 0; } .float-form .input-inline { width: 100%; } .float-form .input-inline.code { width: 180px; } .float-form .input-inline.code .input-txt { width: 90px; } .float-form .input-txt { height: 46px; color: #777777; line-height: 46px; border: none; display: block; width: 100%; } .float-form .input-submit { background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); display: block; width: 135px; height: 46px; color: #fff; text-align: center; line-height: 46px; font-size: 16px; vertical-align: middle; cursor: pointer; } .float-form .form-item-inline.wx-qrcode { position: relative; } .float-form .form-item-inline.wx-qrcode .qrcode-wrap { display: none; position: absolute; width: 120px; height: 120px; bottom: 60px; margin: auto; left: -50%; right: -50%; padding: 5px; background: currentColor; color: #ffffff; -webkit-box-shadow: 0 2px 2px #dddddd; -moz-box-shadow: 0 2px 2px #dddddd; box-shadow: 0 2px 2px #dddddd; } .float-form .form-item-inline.wx-qrcode .qrcode-wrap::after { content: ''; display: block; width: 0; height: 0; position: absolute; margin: auto; bottom: -16px; left: 0; right: 0; border: 8px solid transparent; border-top: 8px solid currentColor; filter: drop-shadow(2px 1px 0px #d1d1d1); } .float-form .form-item-inline.wx-qrcode .qrcode-wrap img { max-width: 100%; } .float-form .form-item-inline.wx-qrcode .icon { width: 2em; height: 2em; } .float-form .form-item-inline.wx-qrcode:hover .qrcode-wrap { display: block; } /*弹出表单*/ .layui-layer.w-layer-form { border-radius: 6px; } .layui-layer.w-layer-form .layui-layer-content { overflow: unset; } .pupmodal { display: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; } .pupmodal .modal-container { width: 660px; height: 320px; position: relative; padding: 50px 55px; background: url("../Image/modal/bg.png") center/cover no-repeat; color: #fff; border-radius: 6px; } .pupmodal .modal-container .modal-title { font-size: 20px; line-height: 36px; margin-bottom: 20px; } .pupmodal .modal-container .modal-title strong.red { font-size: 24px; color: #ea4541; } .pupmodal .modal-container .param-list { margin-bottom: 30px; } .pupmodal .modal-container .param-list p { width: 32.3333%; font-size: 16px; display: inline-block; line-height: 30px; } .pupmodal .modal-container .param-list p::before { display: inline-block; content: ''; width: 4px; height: 4px; border-radius: 50%; margin-right: 5px; background-color: var(--theme-red); } .pupmodal .modal-container .modal-form .form-item { border-radius: 3px; padding-left: 15px; width: 260px; background-color: rgba(245, 246, 250, 0.902); height: 42px; overflow: hidden; } .pupmodal .modal-container .modal-form .form-item .item-lable { color: #999999; position: relative; padding-right: 8px; } .pupmodal .modal-container .modal-form .form-item .item-lable::after { content: ''; display: block; width: 0; height: 14px; margin: auto; top: 0; bottom: 0; right: 0; position: absolute; border-right: 1px solid #ccc; } .pupmodal .modal-container .modal-form .form-item .input-txt { border: none; display: inline-block; height: 42px; line-height: 42px; margin-left: 5px; vertical-align: middle; flex: 1; background: transparent; } .pupmodal .modal-container .modal-form .form-item .input-txt.captcha { width: 80px; } .pupmodal .modal-container .modal-form .form-item.code { padding-right: 0; } .pupmodal .modal-container .close-btn { position: absolute; top: 30px; right: 30px; } .pupmodal .modal-container .close-btn svg { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .pupmodal .modal-container .close-btn:hover svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .pupmodal .modal-container .close-btn:hover svg path { fill: var(--theme-red); } .pupmodal .modal-container .modal-btn { background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); box-shadow: 0px 10px 20px 0px rgba(221, 56, 51, 0.26); position: absolute; bottom: -21px; width: 174px; height: 42px; text-align: center; cursor: pointer; line-height: 42px; border-radius: 3px; margin: auto; left: 0; right: 0; font-size: 16px; } .float-notice { position: fixed; z-index: 99999; right: 20px; bottom: 30px; width: 240px; } .float-notice .wrap { padding: 20px; background-color: #ffffff; position: relative; } .float-notice .wrap .close { position: absolute; top: 0; right: 0; width: 20px; height: 20px; text-align: center; line-height: 20px; background: #9b1120; cursor: pointer; } .float-notice .wrap .close svg { width: 40%; height: 40%; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } .float-notice .wrap .close svg path { fill: #ffffff; } .float-notice .wrap img { max-width: 100%; height: auto; }