* { margin: 0; padding: 0; border: 0; } body{ --green-light:#7cc465; --green:#32b16c; --green-deep:#009944; } .over-line-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .over-line-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .over-line-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; } .over-line-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4; overflow: hidden; } .over-line-5 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:5; overflow: hidden; } body { overflow-x:hidden;position:relative;z-index:-2;font-family:'Microsoft YaHei',SimHei,SimYou,SimSun,Arial;z-index:2;} .bg-color{background: #f8f8f8} .bg-hs{ background: #f5f6f8;} .bg-white{ background: #fff;} @media(min-width:768px) { body{font-size:1.4rem;} } @media(min-width:992px) { body{font-size:1.6rem;} .container.w_1280,.container.w_1400{ width: 1600px!important; } .container.w100{ max-width: 100%; } .container {max-width:100%;} } @media(min-width:1500) { .container {max-width:96.8%;position:relative; padding:0;} } a {transition:.3s all; color: #333} a:hover {transition:.3s all;text-decoration: none; } em,i {font-style:normal;} .f_left { float: left; } .f_right { float: right; } .clear { clear: both; } .relative { position: relative; } .absolute { position: absolute; } ul { list-style: none; } li { list-style-type: none; } .hd { height: 10px; } .c_b td { border: #000 1px solid; } .en { font-family: Arial, Helvetica, sans-serif; } .meta { height: 40px; line-height: 40px; border-bottom: 1px #CCCCCC dotted; } .xs { display: none; } .active { display: block; } ol, ul, li { list-style-type: none; text-align: justify; text-justify: inter-ideograph; } .ratio-3x2{ position:relative} .ratio-3x2::before { padding-top: var(--bs-aspect-ratio); } @media(min-width:992px){ .ratio-3x2 { --bs-aspect-ratio:calc(150 / 450 * 100%); } } @media(max-width:992px) { .ratio-3x2 { --bs-aspect-ratio: calc(260/ 404 * 100%); } } #ad { height: 34px; line-height: 34px; } input { border: 1px #dadada solid; color: #4b4b4b; font-family: 'Microsoft Yahei'; outline: none; } .end_message #form1 input { color: #FFF } input:hover, textarea:hover { background: #CCC; outline: none } textarea { border: 1px #dadada solid; background: #efefef; padding-left: 10px; } img { max-width: 100%; } .hover-k{ position:relative} .hover-k:after{ position: absolute; content: ""; width: 100%;height: 4px; background: #cc0000; left: 0; bottom: 0px; transition: transform 0.5s; right: 0; transition: transform 0.5s; margin: auto; transform-origin: right center; transform: scaleX(0)} .hover-k:hover:after{ transform-origin: left center; transform: scaleX(1);} .hover-k img{ transition: all 0.5s} .hover-k:hover img{ transform:scale(1.02)} .fitcover-img{width: 100%;height: 100%;object-fit: cover;} .img-cover-4by3{height: 0;width: 100%;padding-bottom: 65%;overflow: hidden;position: relative; } .img-cover-3by2{height: 0;width: 100%;padding-bottom: 66.667%;overflow: hidden;position: relative; } .img-cover img{ max-width:100%; max-height:100%; position: absolute;margin: auto;top: 0;bottom: 0; left: 0; right: 0;} .abs-center{ margin:auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute;} .hd{ height:10px;} .hs_bg{ background: #f7f7f7; height: auto; overflow: hidden; } .bg_white{ background: #fff } .p{ margin-bottom: 0} /*top*/ .header { margin: 0 auto; width: 100%; top: 0; z-index: 99999; transition: all 0.5s; background: rgba(255,255,255,0); border-bottom: 1px solid rgba(255,255,255,0.3); } .header.hover{ background: rgba(255,255,255,0.1)} .fix_top,.fix_bottom{ position: fixed; right: 0; left: 0; z-index: 1030; } #logo_title{ width: 20%;} .header .container{ width: 98%;} .header.top_fixed{transition: all 0.5s; width: 100%; background:#fff; -webkit-box-shadow: 0 2px 16px 15px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 2px 16px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 16px 15px rgba(0, 0, 0, 0.05);}} .header.top_fixed #logo img { transform: scale(0.95)} .header-top{ background: #f4f4f4; font-size: 12px; color: #666 } .header-top a{ color: #666 } .header #logo img{ } #logo_title .logo-f-title p{ margin-bottom: 0; color: #fff} #logo_title .logo-f-title p:nth-of-type(1){ font-size: 26px; ; font-weight: bold; } #logo_title .logo-f-title p:nth-of-type(2){ font-size: 14px; text-transform:uppercase; font-family: Arial; } .top-tel{ font-size: 14px; color: #414141; background: url(../img/top-scan.jpg) no-repeat right top; padding-right: 90px;} .top-tel p{ font-family: numfont; color: #c8000b; font-size: 26px; } .logo-tel{ justify-content: space-between; } .hot_tel a{ font-size: 18px; color: #fff; } .hot_tel>div:nth-of-type(1){ font-size: 18px; color: #073ca1; } .hot_tel>div:nth-of-type(1) span{ font-size: 18px; font-weight: bold; font-family: Arial} .header.header-min .hot_tel a,.header.hover .hot_tel a{ color: #999} .search-btn-top{ position: relative} .search-btn-top:after{ position: inherit; content: ""; left: 0; bottom: 0; margin: auto; top: 0; height: 40%; width: 1px; background: #d3d3d3;} .nav_box{ display: block} .menu-icon{ display: none} @media(max-width: 1199.98px){ .nav_box{ display: none} .menu-icon{ display: block} } @media (min-width: 991.98px) { .nav_box { width: 50% } .nav_box ul li { flex: 1; position: relative; text-align: center; height: 100%; display: flex; align-items: center } .nav_box ul li a { font-size: 16px; color: #fff; display: block; width: 100%; } .nav_box ul li a:hover span{ color:#007aff;} .nav_box ul li span:nth-of-type(1) { display: block; line-height: 18px; top: 0; display: block; width: 100%; transition: all 0.5s; } .nav_box ul li:after { position: absolute; content: ""; width: 100%; height:2px; background:#ff0; left: 0; bottom: -1px; right: 0; transition: transform 0.5s; margin: auto; transform-origin: right center; transform: scaleX(0) } .nav_box ul li a{ position: relative; z-index: 2} .nav_box ul li:hover:after { transform-origin: left center; transform: scaleX(1) } .nav_box ul li:hover a{ color: #007aff} } .search-top{border-left: 1px solid rgba(255,255,255,0.25); display: none; position:relative;} .search-top i svg{ fill: #fff; width: 24px; height: 24px;} .search-top:after{ position:absolute; content:''; width:3px; height:14px; background: #fff; left:0;top:0;bottom:0; margin:auto;} .up-tel{ width: 215px; } .top-two{ display:flex; align-items: center; width:195px;} .up-tel i { width: 36px; height: 36px; border-radius: 50%} .up-tel svg{ width: 36px; height: 36px; fill: #fff} .up-tel span{ font-size: 24px; color: #fff; font-family: 'Avian'; font-weight:bold } .top-scan{ display: flex;align-items: center; border-left: 1px solid rgba(255,255,255,0.25); position:relative } .top-scan svg{ width:35px; height:35px; fill:#fff} .top-two>div{ border-left: 1px solid rgba(255,255,255,0.25);} .top-scan:after{ position:absolute; content:''; width:3px; height:14px; background: #fff; left:0;top:0;bottom:0; margin:auto;} @media(min-width: 1520px){ .up-tel{ display: flex} .hot_tel{ display: flex} } @media(max-width: 1519.99px){ .up-tel{ display: none} .hot_tel{ display: none} .nav_box { width: 75% } #logo_title{ width: 25%;} } @media(max-width:1199.98px){ #logo_title{ width:33%;} } @media(max-width:768.98px){ #logo_title{ width:60%;} .header .container{ width: 100%;} } @media (min-width: 576px){ .header .container{ width: 100%!important;} } /*.header:not(.header-min):not(.hover) #logo_title img{*/ /* filter: grayscale(100%) brightness(100);*/ /*}*/ .header.header-min,.header.hover,.header2{ box-shadow: 0 0 10px rgba(0,0,0,0.25); } .header-min .nav_box ul li a,.header.hover .nav_box ul li a{ color: #fff} .header-min .hot_tel a,.header.hover .hot_tel a{ color: #fff} .top-nav-all { width:68px; height: 90px; padding:36px 19px; box-sizing: border-box; position: fixed !important; z-index: 999; top: 0; right: 0; background: #e80113; position: relative; } @media(min-width:1859.98px){ #logo_title{ width: 20%; display: block} #logo_title .logo-f-title{ position: relative; transition: all 0.5s} .nav_box {width: 50% } .search-top{ display: flex} } @media( max-width: 1859.98px) { .up-tel{ width: 22%;} .up-tel span{ font-size: 20px;} #logo_title{ width: 28%; display: block} .nav_box {width:50% } .top-two{ display: none!important; } } @media( max-width: 1699.98px) { .up-tel span{ font-size: 18px;} #logo_title{ width: 27%; display: block} .up-tel{ width: 23%;} } @media( max-width: 1499.98px) { #logo_title{ width: 40%; display: block} .nav_box {width: 60% } } @media(max-width:991.98px){ .header .container{ width: 100%;} .header{ height: auto; } #logo_title{width: calc(100% - 100px)} #logo_title .logo-f-title{ display: block; } #logo_title .logo-f-title p:nth-of-type(1){ font-size: 16px; color: #fff; font-weight: bold; } #logo_title .logo-f-title p:nth-of-type(2){ display: none; font-size:12px; color: #fff;} } .top-nav-all span{position:absolute; transition: all 0.5s; margin-bottom: 3px; height: 3px; width: 50%; display: block; background: #fff; } .top-nav-all span:nth-of-type(1){left:0; right: 0; margin: auto; top: 30px; transition: all 0.5s} .top-nav-all span:nth-of-type(2){top:-3px;bottom: 0;left:0;right:0; margin: auto; transition: all 0.5s} .top-nav-all span:nth-of-type(3){left:0; bottom: 32px; right: 0; margin: auto; transition: all 0.5s} .top-nav-all.on{ z-index: 99999999; } .top-nav-all.on span{background: #fff;} .top-nav-all.on span:nth-of-type(1){ transform:rotate(45deg);transform-origin: left center; } .top-nav-all.on span:nth-of-type(2){ right: -100px; opacity: 0} .top-nav-all.on span:nth-of-type(3){ transform: rotate(-45deg);transform-origin: left center; } @media(max-width: 580px) { .top-nav-all { width: 52px; height: 52px !important; box-sizing: border-box; position: fixed !important; padding: 11px; z-index: 999; top: 0; right: 0; background: #e80113; position: relative; } .top-nav-all span { position: absolute; transition: all 0.5s; height: 2px; width: 30px; display: block; background: #fff; } .top-nav-all span:nth-of-type(1) { left: 0; right: 0; margin: auto; top: 11px; transition: all 0.5s; transform: rotate(0) translateY(0); } .top-nav-all span:nth-of-type(2) { top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: all 0.5s } .top-nav-all span:nth-of-type(3) { left: 0; bottom: 11px; right: 0; margin: auto; transition: all 0.5s; transform: rotate(0) translateY(0); } .top-nav-all.on { z-index: 99999999; } .top-nav-all.on span { background: #fff; } .top-nav-all.on span:nth-of-type(1) { transform: rotate(45deg) translateX(5px) translateY(5px); } .top-nav-all.on span:nth-of-type(2) { right: -100px; opacity: 0 } .top-nav-all.on span:nth-of-type(3) { width: 30px; } } .header .menu-icon { width: 100px; height: 100px; background-color: #cc0000; color: #fff; position: relative; cursor: pointer; } .header .menu-icon span { position: absolute; width: 40%; height: 2px; color: #FFFFFF; background-color: #fff; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin: auto; left: 0; right: 0; top: 0; bottom: 0;} .header .menu-icon span::before, .header .menu-icon span::after { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: absolute; content: ''; display: block; width: 100%; height: 2px; background-color: #fff; } .header .menu-icon span::before { top: 600%; } .header .menu-icon span::after { bottom: 600%; } .header .menu-icon.open span { background-color: unset; } .header .menu-icon.open span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0; } .header .menu-icon.open span::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 0; } @media (max-width: 1250px) { .header .menu-icon { width: 80px; height: 80px; } } @media (max-width: 575.98px) { .header { height: 60px; } #logo_title{ padding-left: 2%} .header .menu-icon { width: 60px; height: 60px; } .header #logo img { max-height: 40px; } } .mobile-nav { z-index: 9; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: fixed; background-color: #333; width: 100%; height: 100%; top: 0; left: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .mobile-nav .nav-wrap{ padding: 2.2rem 2rem; } .mobile-nav dl{ margin-bottom: 0;} .mobile-nav dt{ border-bottom:1px dashed #4e4e4e; position: relative; padding:.3rem .5rem; } .mobile-nav dt a{ line-height:2;display: block; width: 80%;margin-right: 2rem;font-weight: normal;} .mobile-nav dt.has-child::before,.mobile-nav dt.has-child::after{ content: ''; position: absolute; width:1rem; height: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; border-bottom:1px solid #d3d3d3; right: .5rem; margin:auto; top: 0; bottom: 0;} .mobile-nav dt.has-child::after{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);} .mobile-nav dd{ display: none;} .mobile-nav dd ul{ margin-bottom:0; line-height:2;margin-top: 5px;list-style: circle;color: #fff;} .mobile-nav a{ color: #f8f8f8;} .mobile-nav dl.active dt::before{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} .mobile-nav dl.active dt::after{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} .open-menu .mobile-nav{ -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} .open-menu.header{ position: fixed} #flash_pc {overflow:hidden; background: #fff; } #flash_pc .swiper-pagination5{ text-align: center; bottom: 18px; position: absolute; z-index: 99;} #flash_pc .swiper-pagination5 .swiper-pagination-bullet {transition: all 0.5s; display: inline-block; margin-right: 10px; width:12px; height: 12px; border-radius: 100%; background: #fff; cursor: pointer; } #flash_pc .swiper-pagination5 .swiper-pagination-bullet-active{ width:12px; background-color: #007bff } #flash_pc .swiper-pagination-bullet { opacity: .8; } #flash_pc .swiper-slide .bg { width: 100%; height: 100%; transition: 1s linear 2s; } #flash_pc .swiper-slide .bg { transition: 20s linear; transform: scale(1.8, 1.8); } #flash_pc .swiper-slide-active .bg, #flash_pc .swiper-slide-duplicate-active .bg { transform: scale(1, 1); } #flash_pc.swiper .swiper-slide{ width: 100%; height: 100%; overflow: hidden} #flash_pc.swiper .swiper-slide a>img{ display: block; width: 100%; transform: perspective(1000px) translate3d(0, 0, 150px); } #flash_pc.swiper .swiper-slide.swiper-slide-active a>img { transition: 5s 0s; transform: perspective(1000px) translate3d(0, 0, 0px); } #flash_pc.swiper .swiper-slide .flash-wrap p:nth-of-type(3){ font-size:26px; font-weight:100; } #flash_pc.swiper .swiper-slide .flash-wrap{ position:absolute;top:22vh;left:0;right:0; margin:auto;} #flash_pc.swiper .swiper-slide.swiper-slide-active .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } #flash_pc.swiper .swiper-slide.swiper-slide-active .flash-wrap p:nth-of-type(1){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } #flash_pc.swiper .swiper-slide.swiper-slide-active .flash-wrap p:nth-of-type(2){ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } #flash_pc.swiper .swiper-slide.swiper-slide-active .flash-wrap p:nth-of-type(3){ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; } #flash_pc img.banner-img{ width: 100%} .swp-btn i svg{ width: 20px; height: 20px; fill: #fff} .swp-btn{ position: absolute; z-index: 99; top: 0; bottom:0; margin: auto; border-radius: 50%; width: 55px; height: 55px; background: rgba(255,255,255,0.5)} .swp-btn.swiper-button-next1{ left:5%;} .swp-btn.swiper-button-prev1{ right:5%;} .bannerimg { -webkit-animation-name: bannerimg; animation-name:bannerimg; } #flash_pc .swiper-slide.swiper-slide-active .img{ animation: bannerimg 12s linear 0s; } @keyframes bannerimg { 0% { transform: scale(1); animation-timing-function: ease-in; } 100% { transform: scale(1.15); animation-timing-function: ease-out; } } @media(min-width: 1199.98px){ .open-menu .mobile-nav{ display: none!important;} } @media (max-width: 575.98px) { } @media(max-width: 991.98px){ #flash_pc .swiper-pagination5 .swiper-pagination-bullet { width:6px; height: 6px; margin-right: 5px;} #flash_pc .swiper-pagination5{ bottom: 5px;} .swp-btn i svg{ width: 10px; height: 10px; fill: #fff} .swp-btn{ position: absolute; z-index: 99; top: 0; bottom:0; margin: auto; border-radius: 50%; width: 25px; height: 25px; background: rgba(255,255,255,0.5)} } .header.sub-top{ position: fixed; background:#fff; border-bottom: 1px solid rgba(0,0,0,0.05);} .header.sub-top #logo_title img.webname{ filter: grayscale(0%) brightness(0)!important;} .header.sub-top .nav a{ color: #000} .header.sub-top .up-tel .tel-text span:nth-of-type(1) { color: rgba(0,0,0,0.5)} .header.sub-top .up-tel .tel-text span:nth-of-type(2) { color: rgba(0,0,0,0.95)} .header.sub-top .search-top,.header.sub-top .top-scan{border-left: 1px solid rgba(0,0,0,0.05);} .header.sub-top .search-top i svg,.header.sub-top .top-scan i svg{ fill: #ccc} .header.sub-top .up-tel i svg { fill: #cc0000} .header.sub-top .top-scan:after,.header.sub-top .search-top:after{ position:absolute; content:''; width:3px; height:14px; background: #ccc; left:0;top:0;bottom:0; margin:auto;} .header:not(.sub-top) #logo_title{ border-right:1px solid rgba(255,255,255,0.5)} .header:not(.sub-top).header-min #logo_title{border-right:1px solid #efefef} .header.sub-top .up-tel span { color: #cc0000;} .sub-top #logo_title{ border-right:1px solid #efefef} .ty-current{ margin-top: 90px;} @media(max-width: 1299.98px){ .ty-current{ margin-top: 60px;} .header:not(.sub-top).header-min #logo_title,.sub-top #logo_title{border-right:0px solid #efefef} } /*首页 four 优势*/ .index-ys-box{ position: relative; background: url("../img/ys_bj.jpg") no-repeat center top fixed; background-size: cover} .demo-ys-item{ transition: all 0.5s;} .demo-ico i{ position: relative; width:75px; height: 75px; border-radius: 50%; border:1px solid #ee7612;transition: all 0.5s} .demo-ico i svg{ width: 30px; height: 30px; fill: #ee7612;} .demo-ys-item{ border-right:1px solid #ededed} .demo-ys-item p:nth-of-type(1) span{ font-size: 32px; font-weight: bold; color: #333; position: relative;transition: all 0.5s} .demo-ys-item p:nth-of-type(1) span:after{ position: absolute; content: ""; background: #cc0000; height: 2px; width: 40%; bottom:0; left: 0;right: 0; margin:auto; transition: all 0.5s} .demo-ys-item .demo-desc{ font-size: 16px; color: #666; text-align: center; line-height: 2;transition: all 0.5s} .demo-ico i:after { position: absolute; content: ""; border: 1px solid rgba(237,108,0,0); width: 100%; height: 100%; border-radius: 50%; } .demo-ico i:before { position: absolute; content: ""; background: rgba(237,108,0,0); left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: scale(1); border-radius: 50%; transition: all 0.5s; } @-webkit-keyframes rollscr{ 0%{-webkit-transform: scale(0.5);opacity: 0} 50%{-webkit-transform: scale(1);opacity: 0.5} 100%{-webkit-transform: scale(1.5);opacity: 0} } @keyframes rollscr{ 0%{-webkit-transform: scale(0.5);opacity: 0} 50%{-webkit-transform: scale(1);opacity: 0.5} 100%{-webkit-transform: scale(1.5);opacity: 0} } @-webkit-keyframes rollscr2{ 0%{-webkit-transform: scale(1);} 100%{-webkit-transform: scale(1.5); opacity: 0} } @keyframes rollscr2{ 0%{-webkit-transform: scale(1);} 100%{-webkit-transform: scale(1.5); opacity: 0} } .demo-ys-item:hover{ cursor: pointer;} .demo-ys-item:before{ position: absolute; content: ""; transform: scaleY(0); transition: all 0.5s; transform-origin: bottom center; width: 100%; height: 100%; left: 0;bottom:0; background: #cc0000} .demo-ys-item:hover:before{ transform: scaleY(1);} .demo-ys-item:hover i{ transform: translateY(10%); border:1px solid #fff} .demo-ys-item:hover p:nth-of-type(1) span{ color: #fff; transform: translateY(15%)} .demo-ys-item:hover p:nth-of-type(1) span:after{ background: #fff; width: 50%; bottom:10%} .demo-ys-item:hover .demo-desc{ color: #fff} .demo-ys-item:hover .demo-ico i:after { background: #fff;} .demo-ys-item:hover .demo-ico i svg{ fill: #fff;} .demo-ys-item:hover .demo-desc{transform: translateY(5%);} .demo-ys-item:hover .demo-ico i svg.icon.bigcc{ width: 40px; height: 40px;} .demo-ys-item:hover .demo-ico i:after { -webkit-animation: rollscr 2s linear infinite; animation: rollscr 2s linear infinite; border: 1px solid rgba(237,108,0,0.25); } .demo-ys-item:hover .demo-ico i:before { -webkit-animation: rollscr2 2s linear infinite; animation: rollscr2 2s linear infinite; background: rgba(237,108,0,0.25); } @media(max-width: 991.98px){ .demo-ys-item p:nth-of-type(1) span{ font-size:20px;} .demo-ys-item .demo-desc{ font-size: 14px;} .demo-ico i{ width:50px; height: 50px;} .demo-ico i svg{ width:25px; height: 25px;} } /*首页产品模块*/ .list-pro-btn{ width:55px;height:55px; border:1px solid rgba(62,109,208,0.2); border-radius: 50% } .list-pro-btn:hover{ background: #fff000;} .list-pro-btn:hover i svg{ fill:#2a2a2a;} .pro-list-width{ width:calc(100% - 120px);} .list-pro-btn i svg{ width:20px; height: 20px; fill:#4472d1;} .list-prev i svg{ transform: rotate(-180deg);} .list-pro-btn{ display: flex; align-items: center; justify-content: center;} .listname-box{ position: relative; overflow: hidden; border-radius: 2rem; text-align: center; transition: all 0.5s; border:1px solid #dfe8f1; cursor:pointer;} .listname-box { color: #3466ce; font-size: 16px;transition: all 0.5s; position: relative; z-index: 2} .listname-box:hover { color: #fff;} .listname-box:after{ position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background:#3466ce; transition: all 0.5s; transform: scaleX(0); transition: all 0.5s; opacity: 0; } .listname-box span{ position:relative;z-index: 55;} .listname-box:hover:after{ transform: scaleX(1); opacity: 1;} .swiper-slide-thumb-active .listname-box:after{ transform: scaleX(1);opacity: 1;} .swiper-slide-thumb-active .listname-box span{ color: #fff;} .proin-more { position: relative; width: 160px; height: 50px; color: #fff; background: #cc0000; border-radius: 2rem; font-size: 18px; overflow: hidden; transition: all 0.5s; } .proin-more a{ color: #fff; position: relative; z-index: 2} .proin-more a i svg { transform: rotate(180deg); fill: #fff; transition: all 0.5s; position: relative; z-index: 2} .proin-more:after { position: absolute; content: ""; background: #ef8e3c; width: 100%; height: 100%; transform: scaleX(0); transition: all 0.5s; } .-p-10{ padding:0 10px;} .-p-10{ padding:0 5px;} .proinfo-k{ background: #fff; transition: all 0.5s} .proinfo-k,.proinfo-k *{ transition: all 0.5s} .proinfo-k img{ transform: scale(1.05) } .proinfo-k:hover img{ transform: scale(1)} .proin-more:hover:after{transform: scaleX(1)} .proinfo-left-img{ width: 55%;} .proinfo-wrap{ width:45%;} .proinfo-wrap p{ transition: all 0.5s} .proinfo-wrap p span{ position: relative; font-size: 26px; line-height: 3 } .proinfo-wrap p span:after{ position: absolute; content: ""; width: 10%; height: 2px; background: #cc0000; left: 0; bottom:0%; transition: all 0.5s} .demo-pro-desc{ color: #999; font-size: 16px; line-height: 2; transition: all 0.5s} .proinfo-k2:hover>p { transform: translateY(10%)} .proinfo-k2:hover .demo-pro-desc { transform: translateY(10%)} .proinfo-k2:hover .proin-more{transform: translateY(10%)} .proinfo-k2:hover .proinfo-wrap p span:after{ width: 50%} .proinfo-k2 img{ transition: all 0.5s} .proinfo-k2:hover img{ transform: scale(0.95)} .proinfo-k3{ background: #f7f7f7; transition: all 0.5s} .proinfo-bottom-wrap{ width: 100%} .proinfo-bottom-wrap p:nth-of-type(1) { font-size:20px; color:#3a3a3a} .proinfo-bottom-wrap p:nth-of-type(2) { font-size:16px; color:#3a3a3a } .proinfo-bottom-wrap i{ width: 30px; height: 30px; background: #cc0000; border-radius: 50%; transition: all 0.5s} .proinfo-bottom-wrap i svg{ transform: rotate(180deg); width: 20px; height:20px; fill: #fff; } .proinfo-k3:hover,.proinfo-k2:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.05);} .proinfo-k3:hover .proinfo-bottom-wrap i{ transform:translateX(-20%);} .proinfo-k3 img{ transition: all 0.5s} .proinfo-k3:hover img{ transform: scale(0.95)} .proinfo-k3:hover .proinfo-bottom-wrap span{ transform: translateX(2%);} #procontent .swiper-pagination-bullet{ transition: all 0.5s; position:relative; width:24px; height:24px; background: #f5f6f8 } #procontent .swiper-pagination-bullet:after{ position:absolute; content:''; width:12px;height:12px; background: #a4a8ae; top:0;bottom:0;left:0;right:0; margin:auto; border-radius: 50%; z-index: 99 } #procontent .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #dce2ee } #procontent .swiper-pagination-bullet.swiper-pagination-bullet-active:after{ background: #3466ce; z-index: 99 } @media(max-width: 1199.98px){ .proinfo-wrap p span{ position: relative; font-size: 20px; } } @media(max-width: 991.98px){ .proinfo-bottom-wrap{ width: 100%} .proin-more { position: relative; width: 120px; height: 30px;} .proinfo-left-img{ width: 45%;} .proinfo-wrap{ width:50%;} .demo-pro-desc{ line-height: 1.5; } .proinfo-bottom-wrap span{ font-size: 16px;} .proinfo-bottom-wrap i{ width: 20px; height: 20px; } .proinfo-bottom-wrap i svg{ width: 15px; height:15px; } .proinfo-k2:hover .demo-pro-desc { transform: translateY(0%)} .proinfo-k2:hover .proin-more{transform: translateY(10%)} .proin-more a{ font-size: 14px;} } /*模板产品列表页面*/ .current-font>p:nth-of-type(1){ font-size:48px; color:#000; font-weight: bold;} .current-desc{ font-size:18px; color:#4d4d4d; line-height: 2;} .pro-list-bigbox{ background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.05)} .pro-list-bigbox:hover{ background: #fff; border-radius: 1rem; } .pro-list-wrap{} .pro-list-wrap p{ font-size:20px; color:#3a3a3a} .pro-list-wrap .proinfo-three-box span{ font-size:14px; color:#666666; background: #f8f8f8; border-radius: 1rem; } .proinfo-list-more{ position: relative; overflow: hidden; height: 50px; width:60%; border-radius: 2rem; border:1px solid #dcdcdc} .proinfo-list-more span{font-size:16px; color:#999999;} .proinfo-list-more i svg{ width:15px; height:15px; fill:#999999; position:relative; z-index: 55 ; transform: translateX(50%)} .proinfo-img img{ transform: scale(1.05)} .pro-list-bigbox .proinfo-list-more:after{ position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background:#3466ce; transition: all 0.5s; transform: scaleX(0); transition: all 0.5s; opacity: 0; } .pro-list-bigbox,.pro-list-bigbox *{ transition: all 0.5s} .pro-list-bigbox:hover .proinfo-list-more:after{ transform: scaleX(1); opacity: 1;} .proinfo-list-more span{ position:relative; z-index: 55; } .pro-list-bigbox:hover .proinfo-list-more span{ color:#fff} .pro-list-bigbox:hover .proinfo-list-more i svg{ fill:#fff; transform: translateX(100%)} .pro-list-bigbox:hover .proinfo-img img{ transform: scale(1)} .pro-list-bigbox:hover .pro-list-wrap>p{ transform: translateY(-10%)} .pro-list-bigbox:hover .proinfo-three-box{ transform: translateY(-10%)} .pro-list-bigbox:hover .proinfo-list-more{ transform: translateY(-10%)} @media(max-width: 991.98px){ .current-font>p:nth-of-type(1){ font-size:24px; } } /*模板产品详情页*/ .proinfo-bj{ background: url("../img/pro-info-bj.jpg") no-repeat top center; background-size: cover;} .proinfo-left-warp{ width:48%} .proinfo-right-box{ width:52%; padding-left:10%} .proin-left-font p:nth-of-type(1){ font-size:16px; color:#6d6d6d;} .proin-left-font p:nth-of-type(2){ font-size:30px; color:#333;} .updown a i svg{ fill:#333435; width:15px; height:15px;} .updown a span{ font-size:16px; color:#5b5b5b} .proinfo-right-box .proinfo-three-box span{ font-size:16px; color:#666666; border:1px solid #fff; background: #f1f1f1; border-radius: 1rem; } .proinfo-right-box .proinfo-three-box{ position: relative; padding-bottom:10px; border-bottom:1px solid #dddddd;} .proinfo-right-box .proinfo-three-box:after{ position:absolute; content:'';left:0;bottom:0; height:2px; width:120px; background: #3466ce; } .proinfo_k{ border-radius: 1rem; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.25)} .left-fontbox{ width: calc(100% - 120px);} .back_btn a{ position:relative; width:150px; height:48px; overflow: hidden; border-radius: 2rem; border:1px solid #666666 ;position: relative;} .back_btn i svg{ width:15px; height:15px; fill:#5b5b5b;} .back_btn span{ color:#999999; font-size:16px; transition: all 0.5s} .back_btn a:after{ position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background:#3466ce; transition: all 0.5s; transform: scaleX(0); transition: all 0.5s; opacity: 0; } .back_btn:hover a:after{ transform: scaleX(1); opacity: 1;} .back_btn:hover a{ border:#3466ce 1px solid; } .back_btn span,.back_btn i{ position:relative; z-index: 999;} .back_btn:hover span{ color:#fff; } .back_btn:hover a i svg{ fill:#ffffff} .back_btn:hover i { transform: translateX(10%);} .proinfo-four-box{ border-bottom:1px solid #dddddd;} .proinfo-four-box .proinfo-c-item{ width:calc(100% / 6); } .proinfo-wrap-title{ position: relative} .proinfo-c-desc{ font-size:16px; color:#999999; line-height: 2} .proinfo-c-item .info-icon{ position:relative; width:60px; height: 60px; border:1px solid #333333;background: #333333; border-radius: 50%; position: relative; } .proinfo-c-item .info-icon:after{position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; border:1px solid #333333; top:0;bottom:0;left:0;right:0;margin:auto; z-index: 0; transform-origin: center center; transform: scale(1.2) } .proinfo-c-item i svg{ width:35px; height:35px; fill:#fff;} .proinfo-c-item i svg.cqsvg{ width:25px; height:25px; fill:#fff;} .proinfo-c-item i svg.zzsvg{ width:40px; height:40px; fill:#fff;} .proinfo-c-item p{font-size:16px; color:#666666;} .proinfo-btn-item{ width:160px; height:50px; border-radius: 2rem; position:relative; overflow: hidden; } .proinfo-btn-item:nth-of-type(1){ font-size:16px; background:#3466ce; color:#fff } .proinfo-btn-item:nth-of-type(2){ font-size:16px; background:#cc0000; color:#fff } .proinfo-btn-item a{ color:#fff; position: relative; z-index: 99;} .proinfo-tel-num i svg{ width:30px; height: 30px; fill:#e00000;} .proinfo-tel-num span{ font-size: 30px; font-family: 'Avian'; color:#e00000; } .proinfo-btn-item:nth-of-type(1):after{ position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background:#cc0000; transition: all 0.5s; transform: scaleX(0); transition: all 0.5s; opacity: 0; } .proinfo-btn-item:after{ position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background:#3466ce; transition: all 0.5s; transform: scaleX(0); transition: all 0.5s; opacity: 0; } .proinfo-btn-item:hover:after{ transform: scaleX(1); opacity: 1;} .proinfo-btn-item{ transition: all 0.5s} .proinfo-btn-item:hover{ transform: translateY(5%);} .sm-img{ margin:0 40px;} .proinfo-bu {width:30px;height:100%;position:absolute; display: block} .proinfo-bu i svg{ width:40px; height: 40px; fill:#959595} .proinfo-bu.proinfo-swiper-next i svg{ transform: rotate(180deg)} .proinfo-bu.proinfo-swiper-next{ right:0; top:0;bottom:0} #small-img img{ transform: scale(1.15); transition: all 0.5s;} #small-img .swiper-slide-thumb-active img{ transform: scale(1)} .proinfo-wrap-title>p:nth-of-type(1){ position: relative; z-index: 4; font-size: 36px; color:#333333} .proinfo-wrap-title>p:nth-of-type(2){ position: relative; z-index: 4;font-size:16px; color:#717171} .proinfo-wrap-title>i{ display: block; width: 100%; height: 1px; background: #cccccc; position:relative;} .proinfo-wrap-title>i:after{ position: absolute; content: '';left:0;bottom:-1px; height:3px; background:#c51429; width:10%} .proinfo-current-desc{ font-size:16px; color:#666; line-height:2;} .proinfo-btn-box-two{} .proinfo-chat-btn{ background: #c51429; width:45%; height:60px; border:1px solid #c51429;} .proinfo-chat-btn a i svg{ fill:#fff; width:32px; height: 32px;} .proinfo-chat-btn a span{ color:#fff; font-size:24px; font-family: Avian;} .proinfo-chat-btn.light:hover{ transform: translateY(0)} .proinfo-tel{} .proinfo-tel i svg{ width:28px; height: 28px; fill:#f60;} .proinfo-tel span{ font-family: Impact; font-size: 30px; color:#f60 } .light{ position: relative; overflow: hidden; transition: all 0.5s} .light:after { position: absolute; content: ""; background-image: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.65),rgba(255,255,255,0)); transform:skewX(-45deg); width:60%; height: 100%; left: -100%; opacity: 1; top: 0; bottom: 0; margin: auto; transition: all 0.75s; } .light:hover:after{ left:120%; opacity: 1;} .light:hover{ transform: translateY(5%);box-shadow: 0 0 10px rgba(26,71,155,0.25)} .proinfo-left-warp,.proinfo-left-warp *{ transition: all 0.5s} .back_btn:hover p {color: #c51429;transform: translateY(5%)} .back_btn:hover .back_btn-ico{ transform: translateY(5%)} .back_btn:hover i svg{fill:#5b5b5b} .pro-bigimg-k{ width:78%;} .pro-small-img-k{ width:20%;position: relative; display: flex} #small-img{ height: 100%!important; } .imgsmall{ height: 100%!important; } .swp-btn8 { position: absolute; z-index: 99; left:0;right:0; margin: auto; border-radius: 50%; width: 55px; height: 55px; background: rgba(210, 210, 210, 0.95); transition: all 0.5s; } .swp-btn8 i svg{ width: 20px; height: 20px; fill: #fff} .swp-btn8.swiper-button-next8 i svg{transform: rotate(180deg)} .swp-btn8.swiper-button-next8{ top:0%; } .swp-btn8.swiper-button-prev8{ bottom:0%;} .swp-btn8:hover{ background: #f60} .small-proimg{ width:130px; height: 130px; background: #fff; border:3px solid #fff; overflow: hidden} .small-proimg img{ width:100%; height: 100%;} .proinfo-detail-title span{ position: relative; font-size:24px; color:#333333 } .proinfo-detail-title span:after{ position: absolute; content: '';left:0;top:0;bottom:0; margin:auto; width: 2px; height: 80%; background: #1a479b} .swiper-slide-thumb-active .small-proimg{ border:3px solid #c51429;} .swiper-slide-thumb-active .small-proimg img{opacity: 0.8;} @media(max-width: 1399.98px){ .proinfo-four-box .proinfo-c-item{ width:calc(100% / 4);} } @media(max-width: 991.98px){ .proinfo-four-box .proinfo-c-item{ width:calc(100% / 2);} .proinfo-left-warp{ width:100%} .proinfo-right-box{ width:100%; padding-left:0%} .proinfo-btn-item{ height:40px;} .proinfo-btn-item:nth-of-type(1){ width:50%;} .proinfo-btn-item:nth-of-type(2){ width:50%;} .proinfo-tel-num{ width:100%} } /*首页 公司简介*/ .about-left-content{ position:relative;z-index: 99; } .about-left-title{ } .about-left-title p:nth-of-type(1){ font-size:30px; color:#333;} .about-left-title p:nth-of-type(2){ font-size:24px; color:#fff000; font-family: 'Avian'; font-weight: bold; text-transform: uppercase; } .about-left-title p:nth-of-type(3) i{ position: relative; display: block; width: 8px; height: 8px;background: #db898b; border-radius: 50%; } .about-left-title p:nth-of-type(3) i:before{ position:absolute; content: ""; width: 8px; height: 8px; background: #fff000; border-radius: 100%; right:25%; top: 0; opacity:1; bottom: 0; margin: auto; display: block; transition: all 0.5s; -webkit-animation: line1 1.5s linear infinite; animation: line1 1.5s linear infinite;} .about-left-title p:nth-of-type(3) i:after{ position:absolute; content: ""; width: 8px; height: 8px; background: #f1d0d1; border-radius: 100%; left:25%; top: 0; bottom: 0;opacity: 1; margin: auto; display: block; transition: all 0.5s; -webkit-animation: line2 1.5s linear infinite; animation: line2 1.5s linear infinite;} @-webkit-keyframes line1{ 0%{left:-24px;} 50%{left:0px;} 100%{left:-24px; opacity: 0.5} } @-webkit-keyframes line2{ 0%{right:-24px;} 50%{right:0px; } 100%{right:-24px;opacity: 0.75} } .about-more-btn,.about-more-btn *{ transition: all 0.5s} .about-more-btn .about-ico{ width:46px; height:46px; border-radius: 50%; background: #fff000 } .about-more-btn .about-ico i{ border:1px dotted #fff; border-radius: 50%;width:36px; height:36px;} .about-more-btn .about-ico i svg{ width:20px; height:20px; fill:#fff} .about-more-btn a span{ font-size:16px; color:#666666;} .about-more-btn:hover a span{ transform: translateX(10%); color:#fff000} .about-more-btn:hover .about-ico{ background: #fff000 } .about-left-content{ width:60%; padding-right:8% } .about-right-content{ width:40%;} .about-img-k img{ position: relative;z-index: 99; width:600px; height:600px; border-radius: 50%;} .img-cil{ position:absolute; left:-15%; top:10%; width:350px; height:350px; border-radius: 50%; background-image: linear-gradient(to bottom,#fff000,#fff000); -webkit-animation: tb1 2.5s linear infinite; animation: tb1 2.5s linear infinite; } .about-tags{ position:absolute; z-index: 555; top:5%; right:10%; width:135px; height:135px; border-radius: 50%; background: #fff000; -webkit-animation: tb0 2.5s linear infinite; animation: tb0 2.5s linear infinite; } .about-tags span{ color:#303030; font-size:24px; } .about-tags-font{border:1px dashed #fff; width:120px; height:120px; border-radius: 50%; display: block;} .about-nr-content{ font-size:16px; color:#666; line-height: 2; } .index-about-bigbox{ overflow: hidden;} .left-top-cir{ position:absolute;left:-30%; top:-55%; border-radius: 50%; width:700px; height:700px; background: #eff3fb; -webkit-animation: tb1 2.5s linear infinite; animation: tb1 2.5s linear infinite;} .right-top-cir{ position:absolute;right:-30%; bottom:0%; border-radius: 50%; width:700px; height:700px; background: rgba(52,102,206,0.1); -webkit-animation: tb2 2.5s linear infinite; animation: tb2 2.5s linear infinite;} .right-bottom-cir{ position:absolute;right:-15%; bottom:-40%; border-radius: 50%; width:700px; height:700px; background: rgba(52,102,206,0.05); -webkit-animation: tb3 2.5s linear infinite; animation: tb3 2.5s linear infinite;} @-webkit-keyframes tb0{ 0%{ transform: translateY(0%)} 50%{transform: translateY(5%)} 100%{transform: translateY(0%)} } @-webkit-keyframes tb1{ 0%{ transform: translateY(5%)} 50%{transform: translateY(0%)} 100%{transform: translateY(5%)} } @-webkit-keyframes tb2{ 0%{ transform: translateY(0)} 50%{transform: translateY(10%)} 100%{transform: translateY(0%)} } @-webkit-keyframes tb3{ 0%{ transform: translateY(5%)} 50%{transform: translateY(0%)} 100%{transform: translateY(5%)} } .about-con-item{ cursor:pointer; position: relative; z-index: 999;} .about-con-item,.about-con-item *{ transition: all 0.5s} .about-con-item span:nth-of-type(1){ position:relative; color:#333333; font-family: 'Arial'; font-weight:bold; font-size:60px;} .about-con-item span:nth-of-type(2){ color:#636363; font-size:16px;} .about-con-item span:nth-of-type(1):after{ position:absolute; content: attr(data-title); font-size:18px; color:#333333; left:100%; bottom:10%; font-weight:100; } .about-con-item:hover span:nth-of-type(1){ color:#cc0000} .about-con-item:hover span:nth-of-type(1):after{ color:#cc0000;} @media(max-width: 1599.98px){ .about-left-content{ width:50%; padding-right:8% } .about-right-content{ width:50%;} } @media(max-width: 1299.98px){ .about-left-content{ width:50%; padding-right:8% } .about-right-content{ width:50%;} .about-img-k img{ position: relative;z-index: 99; width:500px; height:500px; border-radius: 50%;} } @media(max-width: 991.98px){ .about-left-content{ width:100%; padding-right:0% } .about-right-content{ width:100%;} .about-img-k img{ position: relative;z-index: 99; width:400px; height:400px; border-radius: 50%;} .left-top-cir,.right-top-cir,.right-bottom-cir,.img-cil{ display: none!important;} .about-con-item{ width:calc(100% / 2); flex-flow: column; display:flex;} .about-con-item span:nth-of-type(1){ position:relative; color:#333333; font-family: 'Arial'; font-weight:bold; font-size:20px;} .about-con-item span:nth-of-type(1):after{ position:absolute; content: attr(data-title); font-size:18px; color:#333333; left:initial} .about-img-k{ width:100%} .about-img-k img{ object-fit: cover; width: 100%; position: relative;z-index: 99; border-radius: 0%;} } /*模板优势*/ .youshi-wrap{ overflow: hidden; position:absolute; width:100%; height: 100%; top:0;bottom:0;left:0;right:0; } .youshi-img img{ width: 100%; object-fit: cover} .youshi-con-item a{ width:100%} .youshi-con-item{ overflow: hidden; } .youshi-wrap .youshi-icon i svg{ width:60px; height:60px; fill:#fff} .youshi-wrap .youshi-title p:nth-of-type(1){ font-size:28px; color:#fff} .youshi-wrap .youshi-title p:nth-of-type(2){ font-size:14px; color:rgba(255,255,255,0.5); text-transform: uppercase;} .youshi-wrap .youshi-title i{ width:30px; height:2px; background: #fff; display: block; margin:0 auto } .youshi-wrap .youshi-mask .youshi-icon i svg{ width:50px; height:50px; } .youshi-con-item{ flex: 1;transition: all 0.5s; height:890px; position: relative} .youshi-con-item.active{ flex:1.2} .youshi-con-item.ys-1{ background: url("../img/ys1.jpg") no-repeat center center; background-size: cover;} .youshi-con-item.ys-2{ background: url("../img/ys2.jpg") no-repeat center center; background-size: cover;} .youshi-con-item.ys-3{ background: url("../img/ys3.jpg") no-repeat center center; background-size: cover;} .youshi-con-item.ys-4{ background: url("../img/ys4.jpg") no-repeat center center; background-size: cover;} .youshi-con-item:after{ position:absolute; content:''; width:100%; height: 100%; top:0;bottom:0;left:0;right:0; background: url("../img/youshi-bj.jpg") no-repeat left top; background-size: cover; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; clip-path: circle(10% at 50% 50%); opacity: 0; z-index: 5} .youshi-con-item.active:after{ opacity: 1; clip-path: circle(100% at 50% 50%); } .youshi-con-item .youshi-mask{position:absolute;width:100%; opacity: 0; height: 100%; top:0;bottom:0;left:0;right:0;z-index: 555} .youshi-con-item.active .youshi-mask{ opacity: 1} .youshi-con-item,.youshi-con-item *{ transition: all 0.5s} .youshi-con-item.active .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .youshi-con-item.active .youshi-mask .youshi-icon{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .youshi-con-item.active .youshi-mask .youshi-title p:nth-of-type(1) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .youshi-con-item.active .youshi-mask .youshi-title p:nth-of-type(2) { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .youshi-con-item.active .youshi-mask .youshi-desc{ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .youshi-con-item.active .youshi-mask .youshi-more{ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; transform: scale(1) } .youshi-con-item .youshi-mask .youshi-icon i svg{ width:60px; height:60px; fill:#232323} .youshi-mask .youshi-title p:nth-of-type(1){ font-size:30px; font-weight:bold; color:#232323} .youshi-mask .youshi-title p:nth-of-type(2){ font-size:14px; color:rgba(0,0,0,0.5); text-transform: uppercase;} .youshi-mask .youshi-desc{ font-size:16px; color:rgba(0,0,0,0.75); line-height: 2; } .youshi-more i svg{ width:15px; height:15px; fill:#39392e} .youshi-more{ border:1px solid rgba(0,0,0,0.75); width:230px; height:60px; } .youshi-more span{ font-size:16px; color:rgba(0,0,0,0.75);} .youshi-con-item .youshi-more:hover i svg{ transform: translateX(-35%)} .youshi-con-item .light:hover:after{ left:120%; opacity: 1;} .youshi-all-title{ position:absolute;left:10%;top:5%; z-index: 666 } .youshi-all-title p:nth-of-type(1){ font-family: 'Avian'; font-size:36px; color:#232323; text-transform: uppercase; font-weight:bold; } .youshi-all-title>div:nth-of-type(1){ font-size: 36px; color: #232323; } @media(max-width: 1199.98px){ .youshi-con-item{ width:50%; flex:0 0 50%;transition: all 0.5s; height:690px; position: relative} .youshi-con-item.active{ flex: inherit; flex:0 0 50%;} .youshi-all-title{ position:absolute;left:10%;top:2%; z-index: 666 } .youshi-all-title p:nth-of-type(1){ font-size:20px; } .youshi-all-title>div:nth-of-type(1){ font-size: 20px; } .youshi-wrap .youshi-icon i svg{ width:30px; height:30px; fill:#fff} .youshi-con-item .youshi-mask .youshi-icon i svg{ width:25px; height:25px; fill:#fff} .youshi-mask .youshi-title p:nth-of-type(1){ font-size:20px; font-weight:bold; color:#fff} .youshi-wrap .youshi-title p:nth-of-type(1){ font-size:20px; } .youshi-wrap .youshi-title p:nth-of-type(2){ font-size:14px; } .youshi-more{ border:1px solid rgba(0,0,0,0.75); width:180px; height:40px; } .youshi-more span{ font-size:14px; color:rgba(0,0,0,0.75);} } @media(max-width: 768.98px){ .youshi-con-item{ width:50%; flex:0 0 50%;transition: all 0.5s; height:320px; position: relative} .youshi-con-item.active{ flex:auto;} .youshi-mask .youshi-title p:nth-of-type(1){ font-size:20px; font-weight:bold; color:#fff} .youshi-con-item.active .youshi-mask{ opacity: 0; display: none!important;} .youshi-con-item.active:after{ opacity: 0; display: none!important;} } /*首页demo案例*/ .index-case-bigbox{ background: url("../img/index_case_bj.jpg") no-repeat center top; background-size: cover;} .case-img-k{border-radius: 1rem; overflow: hidden; } .case-img-k:after{ position:absolute; content:'';left:0; bottom:0;right:0; background-image: linear-gradient(to top,rgba(0,0,0,0.75),rgba(0,0,0,0)); height:50%; width:100%;} .case-img-k:hover .case-wrap{ color:#fff} .case-img-k .case-wrap{ position: absolute; bottom:0;left:0; right:0; margin:auto; font-size:16px; color:#fff; z-index: 99;} .case-img-k,.case-img-k *{ transition: all 0.5s;} .case-img-k{ box-shadow: 0 0 10px rgba(0,0,0,0.15);} .case-img-k img{ transform: scale(1.05)} .case-img-k:hover img{ transform: scale(1)} #case-container{} #case-container .swp-btn2{ position: absolute; z-index: 99; bottom: 0; margin: auto; border-radius: 50%; width: 55px; height: 55px; background: rgba(255,255,255,0.5); border:1px solid #dfe8f1; transition: all 0.5s; } #case-container .swp-btn2 i svg{ fill:#000000; width:20px; height:20px;} #case-container .swp-btn2.swiper-button-next2{ left:0;} #case-container .swp-btn2.swiper-button-prev2{ left:80px;} #case-container .swp-btn2.swiper-button-prev2,#case-container .swp-btn2:hover{ background: #ff0;} #case-container .swp-btn2.swiper-button-prev2 i svg,#case-container .swp-btn2:hover i svg{ fill:#000;} .swp-btn2.swiper-button-disabled{ opacity: 0.5} @media(max-width: 991.98px){ #case-container .swp-btn2{ width: 35px; height: 35px;} #case-container .swp-btn2.swiper-button-prev2{ left:40px;} #case-container .swp-btn2 i svg{ width:13px; height:13px;} } /*模板 新闻模块*/ .index-news-bigbox{ background: url("../img/index_news_bj.jpg") no-repeat center top; background-size: cover;} .news-left-con{ width:50%; padding:2% 3%; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.15)} .news-title{ font-size:28px; color:#000000} .news-wrap-box p:nth-of-type(1){ font-size:22px; color:#333} .news-desc{ color:#8e8e8e;} .data-time{ font-size:14px; color:#999;} .news-left-con{} .news-left-con .swiper-pagination .swiper-pagination-bullet{ width:30px; height:2px; background: #dcdcdc; transition: all 0.5s; border-radius: 0.25rem; opacity: 1} .news-left-con .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #cc0000} .news-right-con{ width:47%; } .news-right-item .news-right-wrap p{ font-size:20px; color:#3f3f3f;} .news-right-item .news-two-desc{ font-size:16px; color:#848484} .news-right-item .time-date{ font-size:14px; color:#666666} .newsimg{ width:35%;} .news-right-wrap{ width:65%; padding-left:4%} .news-right-item.font2:not(:nth-last-of-type(1)){ width:100%; padding-left:0%; padding-bottom: 2%; border-bottom:1px solid #f1f2f6} .bg-white-shadow{background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.15);padding:2% 0%;} .news-right-wrap i svg{ width:30px; height:30px; fill:#4a4a4a; transform: rotate(-180deg);} .news-right-item:hover .news-right-wrap p:nth-of-type(1) i{ transform: translateX(-50%)} .news-right-item,.news-right-item *{ transition: all 0.5s} .news-right-item.font2:not(:nth-last-of-type(1)):hover{ border-bottom: 1px solid #c40000} .news-right-item:hover .news-right-wrap p:nth-of-type(1){ color:#c40000} .news-right-item:hover .news-right-wrap i svg{ fill:#c40000} @media(max-width: 991.98px){ .newsimg{ width:100%;} .news-right-wrap{ width:100%; padding-left:0%} .news-left-con{ width:100%;} .news-right-con{ width:100%; } } /*模板广告*/ .footer-ad{ background: url("../img/end_top_bj.jpg") no-repeat center top; background-size: cover;} .end-tel i svg{ width:30px; height:30px; fill:#2f2f2f; } .end-tel i{ width:56px; height:56px; background: rgba(255,255,255,0.75); border-radius: 50%; } .end-num{ background: rgba(255,255,255,0.75); border-radius: 2rem; font-family: 'Avian'; font-size:30px; color:#2f2f2f} .end-contact-box{ width:40%;} .end-contact-box .end-item{ width:calc(100% / 2); color:rgba(0,0,0,0.75); font-size:16px; line-height: 2; } @media(max-width: 1499.98px){ .end-contact-box{ width:100%;} .end-contact-box .end-item{ width:calc(100% / 4);} } @media(max-width: 991.98px){ .end-contact-box{ width:100%;} .end-logo,.end-name{ width:100%;} .end-contact-box .end-item{ width:calc(100% / 2);} } @media(max-width: 768.98px){ .end-contact-box .end-item{ width:calc(100% / 1);} .end-tel i{ width:40px; height:40px;} .end-tel i svg{ width:25px; height:25px; fill:#fff;} .end-num{ font-size:16px;} } /*首页产品中心*/ .index_pro_big_box{ background: url("../img/index_cp_bj.jpg") no-repeat center top fixed; background-size: cover;} .button-more{background: #004ca1; width: 152px; height: 44px; font-size: 16px; position: relative;} .button-more:after{ position: absolute; content: ""; background: #4486d0; width: 100%; height: 100%; left: 0; bottom: 0; top: 0; right: 0; margin: auto; transform-origin: right center; transition: transform 0.4s; transform: scaleX(0);} .button-more:hover:after{transform: scaleX(1);transform-origin: left center;} .button-more a{ position: relative; z-index: 2;} .button-more i{ width: 22px; height: 22px; position: relative; } .button-more i:after{ display: block; position: absolute; content: "";left:30%; border:1px solid #fff; border-radius: 50%; top: 0; bottom:0; top: 0; bottom: 0; margin:auto; width: 20px; height: 20px; border-left:1px solid transparent; transition: all 0.5s; } .button-more i svg{ fill: #fff; width: 20px; height: 20px; transform-origin: center center; transform: rotate(-90deg);transition: all 0.5s;} .button-more a{ color: #fff;} .button-more:hover i:after{ border-left:1px solid #fff;border-right:1px solid transparent;transform: translateX(-5%) } .button-more:hover i svg{ transform: translateX(80%) rotate(-90deg);} .left_pro_font{ width: 40%} .right_pro_img{ width: 60%} .left_pro_font .pro_title_font{ position: relative; } .left_pro_font .pro_title_font p{ position:relative;font-size: 36px; letter-spacing:0.5rem;} .left_pro_font .pro_title_font:before{ position: absolute; content: attr(data-title); left: 0px; right: 0px; top: -80%; text-transform: uppercase; font-size: 50px; color: #ccc; font-family: Source Han Serif SC,思源宋体 CN; z-index: 0; font-weight: bold; margin: auto; opacity: 0.4; } .left_pro_font .pro_title_font p span{ position: relative; font-size: 36px; color: #004ca1; font-weight: bold} .left_pro_font .pro_title_font p span:after{ position: absolute; content: "";left: 0; bottom:0; width: 30%; height: 2px; background: #0d3983; } .pro-big-font{} .pro-big-font p:nth-of-type(1){ font-size: 30px; color: #333;} .pro-bg-desc{ font-size: 16px; line-height: 2; color: #999999} .right_pro_img img{ background: url("../img/cp_bj.png") no-repeat center center ; } .pro-by{ position: absolute; z-index: 99; font-size: 16px; color: #333333; top: 35%;left:1%; height: 30px; width: 100%; text-align: left;} .swiper-pagination-current{ font-size: 32px; color: #333;} @media(max-width: 1199.98px){ .left_pro_font .pro_title_font:before{ font-size: 35px; top: -40%;} } @media(max-width: 991.98px){ .left_pro_font{ width: 100%} .right_pro_img{ width: 100%} .right_pro_img img{ background: url("../img/cp_bj.png") no-repeat center center ; background-size: cover; } .pro-by{ display: none} .left_pro_font .pro_title_font:before{ font-size: 30px; bottom:40%; top: auto;} } /*弹窗导航*/ .nav-box-pay{ z-index: 998; background:url(../img/daohang_bj.jpg) no-repeat top center; background-size: cover; width: 100%; height: 100%; position: absolute;left: 0; top: 0; border-radius:0 0 50% 50%; transition: all 800ms cubic-bezier(.8, 0, .33, 1); opacity: 0; position: fixed; overflow: hidden; transform: translateY(-100%); } .mb_nav{ z-index: 998; background:url(../img/daohang_bj.jpg) no-repeat top center; background-size: cover; width: 100%; height: 100%; position: absolute;left: 0; top: 0; border-radius:0 0 50% 50%; transition: all 800ms cubic-bezier(.8, 0, .33, 1); opacity: 0; position: fixed; overflow: hidden; transform: translateY(-100%); } .mb_nav ul{ width: 90%; margin: 20% auto; } .mb_nav ul li p{ border-bottom:1px solid rgba(255,255,255,0.2); width: 100%; box-sizing: border-box; padding-left: 5%; line-height: 40px; height: 40px; transition: all 0.5s} .mb_nav ul li p a{ width: 80%; display: block; color: #fff; display: block; float: left; font-size: 17px;} .mb_nav ul li>p i{ color: #fff; font-size: 14px; width: 15%; text-align: right; float: right; padding-right: 5% ; -webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s;} .mb_nav ul li .mb_sub_menu{ display: none; padding:0 0 5%; } .mb_nav ul li .mb_sub_menu>a{ display: block; padding-left: 10%; line-height: 30px; position: relative; font-size: 14px; } .mb_nav ul li .mb_sub_menu>a:after{position: absolute; content: ""; background:#fff;left: 5%;top: 0;bottom: 0;margin: auto; height: 2px; width: 3%; } .mb_nav ul li.active .iconfangxiang{ -webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg); } .mb_nav ul li.active p{border-bottom:1px solid rgba(255,255,255,0); background:rgba(255,255,255,0.5) } .mb_nav ul li.active .mb_sub_menu{border-bottom:1px solid rgba(255,255,255,0.2);} .mb_nav ul li a{ color: #fff; font-size: 14px; } .nav-box-pay.nav-open,.mb_nav.nav-open { transform: translateY(0%); border-radius: 0%; opacity: 1; } .mobile-nav{ z-index: 999999; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; position: fixed; background-color: #333; width:100%; height:100%; top: 60px; left: 0; -webkit-transform: translate(0,100%); -moz-transform: translate(0,100%); -ms-transform: translate(0,100%); -o-transform: translate(0,100%); transform: translate(0,100%);} .mobile-nav .nav-wrap{ padding: 2.2rem 2rem; } .mobile-nav dl{ margin-bottom: 0;} .mobile-nav dt{ border-bottom:1px dashed #4e4e4e; position: relative; padding:.3rem .5rem; } .mobile-nav dt a{ line-height:2;display: block; width: 80%;margin-right: 2rem;font-weight: normal;} .mobile-nav dt.has-child::before,.mobile-nav dt.has-child::after{ content: ''; position: absolute; width:1rem; height: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; border-bottom:1px solid #d3d3d3; right: .5rem; margin:auto; top: 0; bottom: 0;} .mobile-nav dt.has-child::after{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);} .mobile-nav dd{ display: none;} .mobile-nav dd ul{ margin-bottom:0; line-height:2;margin-top: 5px;list-style: circle;color: #fff;} .mobile-nav a{ color: #f8f8f8;} .mobile-nav dl.active dt::before{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} .mobile-nav dl.active dt::after{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} .open-menu .mobile-nav{ -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} .nav_content{ display: flex; width: 100%; height: 100vh;} .nav_content .nav_slide{ position: relative; width: calc(100%/6); display:flex;height: 100vh; box-sizing: border-box; transition: all 0.5s;} .nav_content .nav_slide:before{ position:absolute; content: "";left:0px;height: 100%; width: 1px; background:#464647; transition: all 0.5s } .nav_content .nav_slide:after{ position:absolute; content: "";left:0px;height: 0%; width: 1px; background:#464647; transition: all 0.5s } .nav_content .nav_slide:hover:after{ height: 100%;background:rgba(255,255,255,0.3); } .nav_content .nav_slide:hover{ background:rgba(0,0,0,0.5);} .nav_content .nav_slide > a { display: block;left: 0;right: 0; top:40%; margin: auto; color: #fff; position: absolute; text-align: left; width: 40%; } .nav_content .nav_slide > a>p:nth-of-type(1){ font-size: 26px; text-transform: uppercase; } .nav_content .nav_slide > a>p:nth-of-type(2){ font-size: 26px; } .nav_content .nav_slide .nav_son{ opacity: 0; text-align: center; color: #fff; position:absolute; top: 80%; width: 40%;left: 0; right: 0; margin: auto; transition: all 0.5s } .nav_content .nav_slide .nav_son{ text-align: center; color: #fff; } .nav_content .nav_slide .nav_son ul{ text-align: center; } .nav_content .nav_slide .nav_son ul p,.nav_content .nav_slide .nav_son ul li{ text-align: center; } .nav_content .nav_slide .nav_son ul p i{color: #fff; font-size:30px; font-weight: 100;} .nav_content .nav_slide .nav_son ul li:nth-of-type(1){ padding-bottom: 30px; } .nav_content .nav_slide .nav_son ul li:nth-of-type(1) a{font-size: 30px; line-height: 80px; color: #fff} .nav_content .nav_slide .nav_son ul li:nth-of-type(n+2) a{ font-size: 16px; line-height: 55px; color: rgba(255,255,255,0.5); } .nav_content .nav_slide.on .nav_son{ top: 25%; opacity: 1} .nav_content .nav_slide.on > a{ top: 0%; opacity: 0} .nav_content .nav_slide .nav_son ul li a:hover{ color:#fff; } .mobile-nav dd ul{ display: flex; flex-flow: wrap} .mobile-nav dd ul li{ width: calc(100% / 2)} #flash_pc {overflow:hidden; background: #fff; } /*服务流程*/ .index-fwlc{ overflow: hidden; position: relative; background-image: linear-gradient(to bottom,#fff,#f5f5f5); width: 100%; height: 100%;} .index-fwlc:before{ position: absolute; content: ""; width: 100%; height: 100%; background: url("../img/map.png") no-repeat center top; } .liucheng-item{ width: calc(100% / 8); height: 100%;transition: all 0.5s} .lc-content{ width: 100%; height: 100%;transition: all 0.5s} .lc-content i{ transition: all 0.5s} .lc-content i svg{ width: 60px; height: 60px; fill: #8b8b8b; transition: all 0.5s} .lc-content>span{ font-size: 16px; color: #333333;transition: all 0.5s} .lc-content>div>span{ position: relative ;display: block; border:1px solid #ccc; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; transition: all 0.5s } .lc-content>div:nth-last-of-type(1)>span:before{ position: absolute; content: ""; display: block; background: #e8e8e8; width:270%; height: 1px; left: 114%;right: auto; top: 0;bottom: 0; margin: auto;} .lc-content>div:nth-last-of-type(1)>span:after{ position: absolute; content: ""; display: block; background: #e8e8e8; width:270%;height: 1px; right: 114%;left: auto; top: 0;bottom: 0; margin: auto;} .liucheng-item:hover .lc-content>div>span{ color: #fff; cursor: pointer; background: #004ca1;border:1px solid #004ca1;} .liucheng-item:hover .lc-content>div:nth-last-of-type(1)>span:after,.liucheng-item:hover .lc-content>div:nth-last-of-type(1)>span:before{background: #004ca1; width: 300%;-webkit-animation: xian_move_x 2s ease infinite; animation: xian_move_x 2s ease infinite;} .liucheng-item:hover .lc-content i svg{ transform: translateY(20%); fill: #004ca1} .liucheng-item:hover .lc-content>span{ transform: translateY(10%)} .liucheng-item:nth-of-type(1) .lc-content>div:nth-last-of-type(1)>span:after{ display: none;} .liucheng-item:nth-last-of-type(1) .lc-content>div:nth-last-of-type(1)>span:before{ display: none;} @keyframes xian_move_x { 0% { transform: translateX(0) scale(1); opacity: 0.75 } 30% { opacity: 1 } 60% { opacity: 1 } to { transform: translateX(0px) scale(.75); opacity: 0.75 } } .fwlc-btn{ width: 600px; height: 46px;} .fwlc-btn>span{ font-size: 22px; width:75%; border: 1px solid #004ca1; color: #004ca1; border-radius: 2rem 0 0 2rem; height: 46px; transition: all 0.5s} .fwlc-btn>div:nth-last-of-type(1){ width: 25%; background:#004ca1; border-radius: 0rem 2rem 2rem 0rem; height: 46px;} .fwlc-btn>div:nth-last-of-type(1) i svg{ height: 24px; width: 24px; fill: #fff; transition: all 0.5s} .fwlc-btn>div:nth-last-of-type(1) span{ font-size: 18px; color: #fff;transition: all 0.5s} .fwlc-btn:hover>div:nth-last-of-type(1) a i svg{ transform: translateX(20%);} .fwlc-btn:hover>div:nth-last-of-type(1){ background: #c50b0c} .fwlc-btn:hover>span{ border: 1px solid #c50b0c; color: #c50b0c} @media(max-width: 1299.98px){ .liucheng-item{ width: calc(100% / 4);} .liucheng-item:nth-of-type(4) .lc-content>div:nth-last-of-type(1)>span:before{ display: none;} .liucheng-item:nth-of-type(5) .lc-content>div:nth-last-of-type(1)>span:after{ display: none;} } @media(max-width: 991.98px){ .liucheng-item{ width: calc(100% / 3);} .liucheng-item:nth-of-type(4) .lc-content>div:nth-last-of-type(1)>span:before{ display: block;} .liucheng-item:nth-of-type(3) .lc-content>div:nth-last-of-type(1)>span:before{ display: none;} .liucheng-item:nth-of-type(6) .lc-content>div:nth-last-of-type(1)>span:before{ display: none;} .liucheng-item:nth-of-type(4) .lc-content>div:nth-last-of-type(1)>span:after{ display: none;} .liucheng-item:nth-of-type(8) .lc-content>div:nth-last-of-type(1)>span:before{ display: block;} .fwlc-btn{ width: 98%; height: 46px;} .fwlc-btn>span{ font-size: 14px;} .fwlc-btn>div:nth-last-of-type(1){ width: 100%; border-radius: 2rem;} .fwlc-btn>div:nth-last-of-type(1) span{ font-size: 14px; color: #fff;transition: all 0.5s} } /*优势模块*/ .ys-item,.ys-warp-img{ position:relative; overflow: hidden;} .ys-warp-img{ height: 475px; text-align: right; transition: all 0.5s} .ys-item{ flex: 1; transition: all 0.5s} .ys-item.active{ flex:3} .ys-warp-img:after{ position: absolute; content: ""; background: rgba(0,76,161,0.5); width: 100%; height: 100%; left:0; bottom:0; transition: all 0.5s} .ys-item.active .ys-warp-img:after{; background: rgba(0,76,161,0.95);} .ys-item.active .ys-warp-img{ text-align: left} .ys-item-font1{ position: absolute;left:0; top: 0; width: 100%; height: 100%; } .ys-item-font1 .ys-font1 i svg{ width: 40px; height: 40px; fill: #fff; } .ys-item-font1 .ys-font1 span:nth-of-type(1){ color: #fff;writing-mode: tb-rl; letter-spacing: 1rem; font-size: 32px; } .ys-item-font1 .ys-font1 span:nth-of-type(2){ width:44px; height: 44px; border: 1px dashed #fff;} .ys-item-font1 .ys-font1 span:nth-of-type(2) svg{ width: 25px; height: 25px; fill: #fff;} .ys-item-mask{ position: absolute;left:0; top: 0; width: 100%; height: 100%; transform: translateY(100%); transition: all 0.5s} .ys-mask-title{} .ys-mask-title span:nth-of-type(1){ font-size: 28px; color: #fff; font-family: "Source Han Serif SC", "思源宋体 CN"; text-transform: uppercase; } .ys-mask-title span:nth-of-type(2){ font-size: 60px; color: #fff; font-family: "Source Han Serif SC", "思源宋体 CN";} .ys-mask-font p:nth-of-type(1){} .ys-mask-font p:nth-of-type(1) span{ font-size: 32px; color: #fff;} .ys-mask-font p:nth-of-type(1) i{ width:35px; height: 35px; border: 1px dashed #fff;} .ys-mask-font p:nth-of-type(1) i svg{ width: 25px; height: 25px; fill: #fff;} .ys-mask-keywords{ line-height: 2; border-bottom: 1px solid rgba(255,255,255,0.25); font-size: 16px; color: #fff;} .ys-mask-keywords span{ position: relative;} .ys-mask-keywords span:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width: 1px; height:80%; background: #fff;right: 0; top: 0;bottom:0; margin:auto;} .ys-mask-desc{color: #fff; position: relative;} .ys-item.active .ys-item-mask{ transform: translateY(0)} .ys-item.active .ys-item-font1{ transform: translateY(100%);} .ys-item .ys-warp-img img { transition: all 0.5s} .ys-item.active .ys-warp-img img { transform: scale(1.15)} .ys-item.active .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .ys-item.active .ys-item-mask .ys-mask-title{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .ys-item.active .ys-item-mask .ys-mask-font p:nth-of-type(1) { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .ys-item.active .ys-item-mask .ys-mask-font .ys-mask-keywords{ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .ys-item.active .ys-item-mask .ys-mask-font .ys-mask-desc:after{ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; transform: scale(1) } .ys-item.active .ys-item-mask .ys-mask-font .ys-mask-desc{ -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; } @media(max-width: 1299.98px){ .ys-item{ flex:0 0 50%; transition: all 0.5s} .ys-item.active{ flex:0 0 50%;} .ys-item-font1{ display: none } .ys-item .ys-item-mask{ transform: translateY(0)} } @media(max-width: 991.98px){ .ys-item{ flex:0 0 100%; transition: all 0.5s} .ys-item.active{ flex:0 0 100%;} .ys-item-font1{ display: none } .ys-item .ys-item-mask{ transform: translateY(0)} .ys-mask-title span:nth-of-type(1){ font-size: 18px; color: #fff; font-family: "Source Han Serif SC", "思源宋体 CN"; text-transform: uppercase; } .ys-mask-title span:nth-of-type(2){ font-size: 20px; color: #fff; font-family: "Source Han Serif SC", "思源宋体 CN";} .ys-mask-font p:nth-of-type(1){} .ys-mask-font p:nth-of-type(1) span{ font-size: 16px; color: #fff;} .ys-mask-font p:nth-of-type(1) i{ width:20px; height: 20px; border: 1px dashed #fff;} .ys-mask-font p:nth-of-type(1) i svg{ width: 15px; height:15px; fill: #fff;} .ys-warp-img{ height: 375px; text-align: right; transition: all 0.5s} } /*4大优势通用*/ .youshi-nr{ border:1px solid rgba(255,255,255,0.25); transition: all 0.5s} .youshi-bigbox{ background:url("../img/ys_k_bj.jpg") no-repeat top center; background-size: cover;} .youshi-bigbox.two{ background:url("../img/ys_k_bj2.jpg") no-repeat top center; background-size: cover;} .youshi-bigbox.three{ background:url("../img/ys_k_bj3.jpg") no-repeat top center; background-size: cover;} .youshi-bigbox.four{ background:url("../img/ys_k_bj4.jpg") no-repeat top center; background-size: cover;} .ys-ico i { width: 58px; height: 58px; position: relative; display: block } .ys-ico i svg{ position: relative; z-index: 4; width: 58px; height: 58px; fill: #fff; transition: all 0.5s } .ys-ico i:after{ position: absolute; content: ""; width: 15px; height: 15px; border-radius: 50%; background: #cc0000; bottom: -5%; left: 0%; z-index: 0; } .ys-ico i.two:after{ top: -3%; left:70%; } .youshi-bigbox:hover .ys-ico i:after {top:-0%;left:0%;transform-origin: 25px 25px; animation: whirl 1.5s linear infinite;} @keyframes whirl{ 100%{ transform: rotate(1turn);} } .ys-top span:nth-of-type(1){ font-size: 74px; color: #cc0000; font-family: pangmen; font-weight: bold; transition: all 0.5s} .ys-title p{ margin: 0} .ys-title p:nth-of-type(1){ font-size: 30px; color: #fff; transition: all 0.5s} .ys-title p:nth-of-type(2){ font-size: 14px; color: rgba(255,255,255,0.25); text-transform: uppercase;transition: all 0.5s} .ys-demo-desc{ color: rgba(255,255,255,0.5); font-size: 18px; line-height:1.8;transition: all 0.5s} .ys-more a{ transition: all 0.5s; display: flex} .ys-more span{ color: rgba(255,255,255,0.25); font-size: 16px; transition: all 0.5s} .ys-more i{ display: block; color: rgba(255,255,255,0.25); font-size: 16px; transition: all 0.5s} .youshi-bigbox:hover .ys-title p:nth-of-type(1){ transform: translateY(10%);} .youshi-bigbox:hover .ys-title p:nth-of-type(2){ transform: translateY(15%);} .youshi-bigbox:hover .ys-demo-desc{ transform: translateY(10%);} .youshi-bigbox:hover .ys-more{transform: translateY(5%);} .youshi-bigbox:hover .ys-more span{ color: rgba(255,255,255,1); } .youshi-bigbox:hover .ys-more i{ color: #fff; transform: translateX(-50%)} .youshi-nr:hover{ border:1px solid rgba(255,255,255,0.95)} .youshi-bigbox:hover i svg{ transform: scale(0.95)} .youshi-bigbox:hover .ys-top span:nth-of-type(1){transform: scale(0.95) translateX(-20%)} @media(max-width: 991.98px){ .ys-top span:nth-of-type(1){ font-size: 40px;} .ys-title p:nth-of-type(1){ font-size: 20px; } .ys-demo-desc{ font-size: 16px;} .ys-ico i { width: 35px; height: 35px; } .ys-ico i svg{ width: 35px; height: 35px; } .youshi-bigbox:hover .ys-ico i:after { transform-origin: 15px 15px;} .ys-ico i:after{ width: 10px; height: 10px;} } /*首页公司简介*/ .index-about-box{ position: relative; background: url("../img/index_about_bj.jpg") no-repeat center top fixed; background-size: cover } .index-about-box:before{ position: absolute; content: ""; background: url("../img/about-lt.png") no-repeat left top; left: 0; top: 0; width: 263px; height: 227px;} .about-num-item{ width: calc(100% / 3)} .about-num-item>div:nth-of-type(1){ line-height: 1} .about-num-item>div:nth-of-type(1) span{ font-size: 45px; line-height:1.3; position: relative; color: #cc0000; font-weight: bold; transition: all 0.5s; font-family: pangmen} .about-num-item>div:nth-of-type(1) span:after{ position: absolute; content: attr(data-title); color: #cc0000; font-size: 16px; bottom: 10%; font-weight: 400; } .about-num-item>div:nth-of-type(2){ line-height: 1; font-size: 18px; color: #595959} .demo-about-more{} .demo-about-more>a>span:nth-of-type(1){ position: relative; font-size: 18px; color: #cc0000;} .demo-about-more i svg{ transform: rotate(180deg); fill:#cc0000;} .about-leftbig-box{ width:80%} .right-honor-box{ width: 20%} .demo-about-img{ width: 50%;} .demo-about-wrap{ width: 48%} .demo-about-wrap .demo-about-title{ font-size: 48px; color: #282828} .demo-about-wrap .demo-about-desc{ font-size: 16px; color: #666;} .demo-about-more>a>span:nth-of-type(1):after{ position: absolute; content: "";bottom:0;left:0; background: rgba(237,108,0,0.4); width: 100%; height:5px;} .demo-about-more:hover{ letter-spacing: 1.5px;} .demo-about-desc{ line-height: 2} .demo-about-wrap .demo-about-title span{ position: relative;} .demo-about-wrap .demo-about-title span:before{ position: absolute; content: "";left:0; bottom:0; background: #000; width: 25px; height: 1px;} .demo-about-wrap .demo-about-title span:after{ position: absolute; content: "";left:30px; bottom:0; background: #000; width: 25px; height: 1px;} .about-honor{ position: relative;} .about-honor:after{ position: absolute; content: ""; background: url("../img/honor_inco.png") no-repeat left top; width: 52px; height: 47px; top:-25px;left:-25px;} .about-bigbox{ position: relative} .about-bigbox:after{ position: absolute; content:attr(data-title); font-size: 144px; color: rgba(0,0,0,0.02); text-transform: uppercase; font-weight: bold; left: 5%; width: 130%; bottom:-8%;} .about-bigbox:before{position: absolute; content:""; display: block; left:95%; bottom:2%; background: url("../img/about-rb.png") no-repeat left center; width: 135px; height: 120px;} @media(max-width: 1799.98px){ .about-bigbox:after{ display: none} .about-bigbox:before{ display: none} } @media(max-width: 1599.98px){ .demo-about-wrap .demo-about-title { font-size: 30px; color: #282828; } } @media(max-width: 1299.98px){ .about-leftbig-box{ width:100%; padding: 0!important;} .right-honor-box{ width: 100%; margin-top: 15px;} .demo-about-img{ width: 50%;} .demo-about-wrap{ width: 48%} } @media(max-width: 991.98px){ .demo-about-img{ width: 100%;} .demo-about-wrap{ width: 100%} .about-num-item>div:nth-of-type(1) span:after{ font-size: 14px; } .about-num-item>div:nth-of-type(2){ font-size: 16px; } .about-num-item>div:nth-of-type(1) span { font-size: 20px;} } /*首页新闻模块*/ .news-wrap{ transition: all 0.5s; background: #fff} .news-wrap>p:nth-of-type(1){ color: #a7a7a7; font-size: 16px;} .news-wrap>div:nth-of-type(1){ font-size: 20px; color: #000} .news-wrap>div.newsbtn{} .news-wrap>div.newsbtn span{ font-size: 16px; color: #a7a7a7; transition: all 0.5s} .news-wrap>div.newsbtn i{ width:38px; height:38px; display: block; border-radius:50%;font-size: 16px; border:1px solid #a7a7a7; transition: all 0.5s} .news-wrap>div.newsbtn i svg{ width: 30px; height: 30px; transform: rotate(135deg); fill: #b2b2b2; transition: all 0.5s} .news-big-demo{ background: #fff; transition: all 0.5s} .news-big-demo:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.05);} .news-big-demo:hover .newsbtn i {background: #cc0000; border:1px solid #cc0000;} .news-big-demo:hover .newsbtn i svg{ fill: #fff; transform: rotate(180deg)} .news-big-demo:hover .news-wrap>div.newsbtn span{ color: #cc0000; transform: translateX(5%)} .news-big-demo:hover .news-wrap>div:nth-of-type(1){ color: #cc0000} .news-big-demo:hover .news-wrap{ transform: translateY(-5%)} .news-big-demo img{ transition: all 0.5s} .news-big-demo:hover img{ transform: scale(1.05); } .embed-responsive-5by2:before{ padding-top: 70%} .news-demo .swp-btn{ position: absolute; top: 0;bottom:0; width: 50px; height: 50px; border-radius: 0.25rem; background: #eef1f4; transition: all 0.5s } .news-demo .swp-btn i svg{ fill: #a7a7a7; font-weight: bold; width: 30px; height: 30px;} .news-demo .swiper-button-next2{ left:-50px; background: #cc0000} .news-demo .swiper-button-prev2{ right:-50px; } .news-demo .swp-btn:hover{ background: #cc0000} .news-demo .swp-btn:hover i svg{ fill: #fff} .news-demo .swiper-button-next2 i svg{ fill: #fff} .swiper-button-disabled.swp-btn{ opacity: 0.5;} @media(max-width: 1799.98px){ .news-demo .swiper-button-next2{ left:0px; background: #cc0000} .news-demo .swiper-button-prev2{ right:0px; } } @media(max-width: 991.98px){ .news-demo .swp-btn{ display: none!important;} } .index-news-item{ position: relative} .news-font{} .news-font p:nth-of-type(1){ font-size: 22px; color: #333333; line-height:1} .news-font p:nth-of-type(2){ font-size: 15px; color: #666666} .news-desc{ font-size: 15px; line-height: 2; color: #666666} .index-news-item:before{ position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: #f7f8fa; transform-origin: top center;transform: scaleY(0); transition: transform 0.5s;} .index-news-item:hover:before{ transform: scaleY(1)} .index-news-item a{ position: relative; z-index: 9} .index-news-item .embed-responsive-21by19{ position: relative} .index-news-item .embed-responsive-21by19:before{ padding-top: 35%} @media(max-width: 991.98px) { .news-font p:nth-of-type(1){ font-size: 18px; color: #333333; line-height:1} } /*底部导航*/ .end-daohang{} .ft{ width: 50%; height: 220px;} .ft-left{ background: url("../img/end_left.jpg") no-repeat left top ; background-size: cover;transition: all 0.5s } .ft-right{ background: url("../img/end_right.jpg") no-repeat left top ; background-size: cover;transition: all 0.5s } .ft-btn{ width: 170px; height: 60px; border:1px solid #fff;border-radius: 0.25rem; overflow: hidden; position: relative;} .ft-btn a span{ position: relative; z-index: 2; font-size: 18px; color: #fff;transition: all 0.5s;} .ft-btn a i svg{ width: 32px; height: 32px; fill: #fff;position: relative; z-index: 2; transition: all 0.5s } .ft-btn:after { position: absolute; content: ""; background: #cc0000; width: 100%; height: 100%; transform: scaleX(0); left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition: all 0.5s; } .ft-btn:hover:after{ transform: scaleX(1); } .ft-btn:hover{ border:1px solid #cc0000} .ft-btn:hover a i svg{ transform:translateX(-5%);} .ft-btn:hover a span{ transform:translateX(5%);} .ft:hover{ } /*标题*/ .index-product-bigbox{ background: url("../img/index_cp.jpg") no-repeat center top fixed; background-size: cover;} .index-ty-title{} .index-ty-title p{ font-family: 'Avian'; font-size:36px; color:#dadbdb; text-transform: uppercase; font-weight:bold; } .index-ty-title>div:nth-of-type(1){ font-size: 36px; color: #333333; position: relative} .index-ty-title>div:nth-of-type(1) span b{ position: relative; z-index: 4; color: #004ca1; } .index-ty-title>div:nth-of-type(1) span.no:after{ position: inherit; } .index-ty-title>div:nth-of-type(1):after{ position: absolute; content:attr(data-title); left: 0; right: 0; top: -60%;margin: auto; text-transform: uppercase; font-family: pangmen; font-size: 100px; color: rgba(0,0,0,0.05); z-index:0; font-weight: bold} .index-ty-title.block2>div:nth-of-type(1):after{ position: absolute; content:attr(data-title); left: 0; right: 0; top: -50%; font-family: pangmen; margin: auto; text-transform: uppercase; font-size: 72px; color:rgba(255,255,255,0.05); z-index:0; font-weight: bold} .index-ty-title.block2>div:nth-of-type(1){ font-size: 36px; color: #282828; position: relative} .index-ty-title.block2>div:nth-of-type(2){ font-size: 16px; color: rgba(0,0,0,0.85); line-height: 1} .index-ty-title.block2>div:nth-of-type(1) span{ position: relative;z-index: 3; color: #282828} .index-ty-title>div:nth-of-type(2){ font-size: 16px; color: rgba(0,0,0,0.55); line-height: 1} .pro-main-box{ background: #fff; border-radius: 1rem; overflow: hidden;} .pro-title-one{ border-bottom: 1px solid #f5f5f5} .pro-title-one>span:nth-of-type(2) svg{ width: 20px; height: 20px; fill: #ff6c39} .pro-title-one>span:nth-of-type(2) { position: relative; border:1px solid #ffe1d6; border-radius: 50%; height: 25px; width: 25px;} .pro-title-one>span:nth-of-type(2):after { position: absolute; content: ""; border:1px solid #fff0eb; border-radius: 50%; width: 100%; height: 100%; transform: scale(1.5)} .pro-datil-font p:nth-of-type(1) span{ color: #282828; font-weight: bold} .param-item{ width: calc(100%/2); line-height: 3} .param-item span{ font-size: 12px; color: #666;} .param-item i{ display: block;width: 5px; height: 5px;background: #223769;border-radius: 50%;} .pro-info-img{ position: relative; background: #000} .pro-info-img:before{ position: absolute; content: ""; background:rgba(0,0,0,0.5); left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display:block; transform: scale(0); transition: all 0.5s;} .pro-info-img:after{ position: absolute; content: ""; left: 0; top: 0; width: 85%; height: 85%; z-index: 2; display:block; border: 1px solid rgba(255,255,255,0.25);right: 0;bottom: 0; margin: auto;transform: scale(1.5); opacity: 0; transition: all 1s} .pro-info-inco{ position:absolute; z-index: 3; content: "";left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 36px; height: 36px; background-image: linear-gradient(to bottom,#ff8254,#ff652f); border-radius: 50%; transform: translateY(100%); opacity: 0; transition: all 1.25s} .pro-info-inco i svg{ fill: #fff; width: 16px; height: 16px;} .pro-info-img img{ transition: all 0.5s;} .pro-main-box:hover .pro-info-img img{ opacity: 0.75; transform: scale(1.05); filter: brightness(1) grayscale(100%)} .pro-main-box:hover .pro-info-img:before{transform: scale(1); } .pro-main-box:hover .pro-info-img:after{transform: scale(1); opacity: 1 } .pro-main-box:hover .pro-info-inco{transform: translateY(0); opacity: 1} .pro-list-box-nav{ } .pro-list-box-nav:before{ position: absolute;content: ""; width: 100%; height: 1px;border-bottom: 1px solid rgba(0,0,0,0.25); left: 0; top: 23.5%;} .pro-listname-nav{} .pro-listname-nav div>p:nth-of-type(1){ color: #333333; font-size: 16px; margin-bottom: 0} .pro-listname-nav div i{ position: relative; z-index: 5; display: block; background:rgba(0,0,0,0.25); width: 20px; height:20px; border-radius: 50%; transform: translateY(-35%); transition: all 0.5s } .pro-listname-nav div i:after{ z-index: 5;position:absolute; background: #999999; border-radius: 50%; content: ""; width:50%; height: 50%; left: 0; top: 0; right: 0;bottom: 0; margin: auto; transition: all 0.5s } .pro-listname-nav div span{ position: absolute; z-index: 2; top:4%; left: 0;right: 0; margin:auto; width: 100%; border-top: 1px solid #004ca1; transform-origin: center center; transform: scale(0); transition: all 0.5s; } .swiper-slide-thumb-active .pro-listname-nav div i,.pro-listname-nav:hover div i{ background:rgba(0,76,161,0.25); } .swiper-slide-thumb-active .pro-listname-nav div i:after,.pro-listname-nav:hover div i:after{ background: #004ca1; } .swiper-slide-thumb-active .pro-listname-nav div span,.pro-listname-nav:hover div span{ transform: scale(1) } .swiper-slide-thumb-active .pro-listname-nav div>p:nth-of-type(1){ color: #004ca1; } @media(max-width: 1199.98px){ .index-ty-title>div:nth-of-type(1):after{ top: -20%;margin: auto; font-size: 50px; color: rgba(0,0,0,0.05); z-index:0; font-weight: bold} } @media(max-width: 991.98px){ .index-ty-title.block2>div:nth-of-type(1):after{ display: none; position: inherit} .index-ty-title>div:nth-of-type(1):after{ left: 0; right: 0; top: auto;bottom:10%;margin: auto; font-size: 40px; } .index-ty-title>div:nth-of-type(1){ font-size: 20px; } .index-ty-title.block2>div:nth-of-type(1){ font-size: 20px; } .index-ty-title.block2>div:nth-of-type(2),.index-ty-title>div:nth-of-type(2){ font-size: 14px; line-height: 1.5} .index-ty-title>div:nth-of-type(1):after{ top: -50%;margin: auto;font-size:40px;} } @media(max-width: 768.98px){ .index-ty-title p{ font-size:20px; } } /*首页公司简介*/ .company-font-title{} .company-font-title div:nth-of-type(1){ position: relative; font-weight: bold; font-size: 36px; color: #282828;} .company-font-title div:nth-of-type(1):after{ position: absolute; content:attr(data-title);left: 0; bottom: 0; color: #f8f8f8; font-size: 72px; font-family: numfont; text-transform: uppercase; line-height: 0.75} .company-font-title div:nth-of-type(1) span{ position: relative; z-index: 2} .company-font-title div:nth-of-type(2) span{ font-size: 20px; color: #666;} .company-font-title div:nth-of-type(2) i{ display: block; width: 8px; height: 8px; border-radius: 50%; background-image: linear-gradient(to bottom,#ff8052,#ff6f3c)} .company-font-desc{ font-size: 16px; color: #666; line-height: 2} .button-ty{ position: relative; background-image: linear-gradient(to bottom,#ff642e,#ff642e); width: 150px; height: 40px; border-radius:2rem; transform-origin: center center; overflow: hidden;} .button-ty span{ position: relative; font-size: 14px; color: #fff; transition: all 0.5s} .button-ty i svg{ width: 30px; height: 30px; fill: #fff; transform-origin: center center; transform: rotate(-90deg);transition: all 0.5s} .button-ty:before{ position: absolute; content: ""; background: #fc4101; width: 100%; height: 100%; left: 0; bottom: 0;top: 0;right: 0; margin: auto; border-radius: 2rem; transform-origin: right center; transition: transform 0.4s; transform: scaleX(0)} .button-ty:hover:before{transform: scaleX(1);transform-origin: left center;} .button-ty:hover i svg{ transform: translateX(20%) rotate(-90deg)} .company-sub-lanmu{} .company-sb-item{ width: calc(100% / 5)} .company-sb-item .sub-img,.company-sb-item .sub-img img{ border-radius: 0.5rem} .company-sb-item span i svg{width: 30px; height: 30px; fill: #bfbfbf; transform-origin: center center; transform: rotate(-180deg); position: relative; z-index: 2; transition: all 0.5s } .company-sb-item span:nth-of-type(1){ position: relative} .company-sb-item span:nth-of-type(1):after{ position: absolute; content: ""; background: #ececec; width: 14px; height: 14px; width: 14px; border-radius: 50%; bottom: 0;left: 0;right: 0; margin: auto;} .company-sb-item span{ font-size: 14px; color: #282828} .company-sb-item:hover span:nth-of-type(1):after{ background: #fdc7b1;} .company-sb-item:hover span i svg{fill: #ff855b; transform: rotate(-180deg) translateY(50%)} .company-sb-item .sub-img { position: relative; overflow:hidden; transition: all 0.5s} .company-sb-item .sub-img:after{ position: absolute; content: ""; left:0;right: 0; top: 0;bottom:0; margin: auto; width: 100%; height: 100%; background: rgba(0,0,0,0.5); transition: all 0.5s} .company-sb-item .sub-img img{ transition: all 0.5s} .company-sb-item:hover .sub-img img{ transform: scale(1.05);} .company-sb-item:hover .sub-img:after{ background: rgba(0,0,0,0);} .about-right{ height: 100%; width: 100%;} .about-right:before{ position: absolute; content: ""; background: #223769; width: 150%; height: 100%; border-radius: 2rem 0 0 2rem; z-index: -1} .about-right-img{ position: absolute;width: 140%;;left: -10%; bottom:-10%} .about-big-engname{ position: relative} .about-big-engname:before{ position: absolute; content: attr(data-ltitle); font-size: 206px; color: transparent; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05); font-style: italic; text-transform: uppercase; font-family: 庞门正道标题体; left: 0;right: auto; top:10%; margin: auto; width: 50%; } .about-big-engname:after{ position: absolute; content: attr(data-rtitle); font-size: 206px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255, 0.15); font-style: italic; text-transform: uppercase; font-family: 庞门正道标题体; left:auto;right: -2%; top:10%; margin: auto; width: 50%; } @media(max-width: 1799.98px){ .about-big-engname:after,.about-big-engname:before{ font-size: 165px} .about-big-engname:after{right: 0%;} } @media(max-width: 1699.98px){ .about-right:before{ width: 100%; border-radius: 2rem 0 0 0rem;} .about-right-img{ width: 100%;left: 0%; bottom:0%; font-size: 100px} } @media(max-width: 1499.98px){ .about-big-engname:before{display: none} .about-big-engname:after { right:0;display: block;font-size: 100px; text-align: center } .company-font-title div:nth-of-type(1){ font-size: 24px;} .company-font-title div:nth-of-type(2) span { font-size: 16px; color: #666; } } @media(max-width: 991.98px){ .about-big-engname:before{display: none} .about-big-engname:after{display: none} .company-sb-item{ width: calc(100% / 2)} .about-right-img{ position: inherit; } .company-font-title div:nth-of-type(1) span{ position: relative; z-index: 2} .company-font-title div:nth-of-type(2) span{ font-size: 16px; color: #666;} .company-font-title div:nth-of-type(1):after{ font-size: 24px; } .company-font-title div:nth-of-type(1){ font-size: 18px;} } /*企业优势*/ .about-right-img{} .qyys-container{ background: url("../img/index_ys.jpg") no-repeat center top fixed; background-size: cover;} .youshi-nav-item span>i{ position:relative; background-image: linear-gradient(to bottom,#ff8254,#ff6630);background: rgba(255,255,255,0.15); border-radius: 50%; transform: all 0.5s;} .youshi-nav-item span>i svg{ position: relative; z-index: 2; width: 45px; height: 45px; fill: #fff;transform: all 0.5s;} .youshi-nav-item span:nth-of-type(2){ font-size: 18px; color: #fff; line-height: 1.5} .youshi-nav-item span:nth-of-type(3){ font-size: 14px; text-transform: uppercase; opacity: 0.5; color: #fff} .youshi-nav-item>i{ transition: all 0.5s; position: relative; width: 10px; height: 10px; border-radius: 50%; background-image: linear-gradient(to bottom,#ff8052,#f36330);-webkit-animation: xian_move1 2s ease infinite; animation: xian_move1 2s ease infinite;} .youshi-nav-item span>i:after{ position: absolute; content: "";width: 100%; height: 100%; border-radius: 100%; transform: scale(0); transition: all 0.5s; background-image: linear-gradient(to bottom,#ff8254,#ff6630);left: 0; top: 0;right: 0;bottom:0; margin: auto;} .youshi-nav-item:hover span>i:after,.swiper-slide-thumb-active .youshi-nav-item span>i:after{ transform: scale(1);} .youshi-nav-item span>i{ transition: all 0.5s} .youshi-nav-item span:nth-of-type(2){ transition: all 0.5s} .youshi-nav-item span:nth-of-type(3){ transition: all 0.5s} .swiper-slide-thumb-active .youshi-nav-item span>i{ transform: translateY(15%)} .swiper-slide-thumb-active .youshi-nav-item span:nth-of-type(2){ transform: translateY(10%)} .swiper-slide-thumb-active .youshi-nav-item span:nth-of-type(3){ transform: translateY(15%)} .swiper-slide-thumb-active .youshi-nav-item span>i svg{ fill: #fff;} .youshi-nav-item{ position: relative; } .youshi-nav-item:after{ position: absolute; content: ""; width: 1px; height: 40%; background: rgba(255,255,255,0.25);right: 0; top: 0;bottom:0; margin: auto;} .youshi-nav-item.no:after{ height: 0} @keyframes xian_move1 { 0% { transform: translateY(0) scale(1); opacity: 0 } 30% { opacity: 1 } 60% { opacity: 1 } to { transform: translateY(15px) scale(.5); opacity: 0 } } .gsys-container{ position: relative} .gsys-container:before{ position: absolute; content: ""; left: 0;top: 0;bottom:0; background: #fff; width: 120%; height: 100%; border-radius: 2rem 0 0 0rem; box-shadow: 0 0 25px rgba(0,0,0,0.25)} .gsys-container:after{ position: absolute; content:attr(data-title); left: 0;top: -5%; right: 0; color: transparent;-webkit-text-stroke: 1px rgba(0,0,0,0.05); font-size: 210px; font-weight: bold; width: 120%; text-transform: uppercase; font-style: italic; text-align: center; } .gsys-title-font{} .gsys-title-font p:nth-of-type(1) span:nth-of-type(1){ color: #223769; font-size: 36px; font-family: Century Gothic;} .gsys-title-font p:nth-of-type(1) span:nth-of-type(2){ color: #223769; font-size: 24px; font-weight: bold; font-style: italic;} .gsys-title-font div:nth-of-type(1){ border-radius: 0 2rem 2rem 1rem; background-image: linear-gradient(to right,#ff8355,#ff642e); width: 35% } .ys-img,.ys-img img{ border-radius: 1rem;} .gsys-item{ position: relative; font-size: 16px; color: #666666; line-height: 2} .gsys-item>span:nth-of-type(1){ position: relative; display:block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ffd1c2} .gsys-item>span:nth-of-type(1):after{ position: absolute; display: block; content: ""; width: 70%; height: 70%; background: #ff6c37; left: 0;right: 0;top: 0;bottom: 0; margin: auto; border-radius: 50%;} .gsys-item>span:nth-of-type(2){ width: calc(100% - 20px)} .jjfa-two-btn{ position:absolute;left: 5%; bottom:8%; z-index: 999} .jjfa-two-btn>div{ width: 36px; height: 36px; border-radius: 50%; background-image:linear-gradient(to bottom,#ff7e4f,#ff652f);transition: all 0.5s} .jjfa-two-btn>div i svg{fill: #fff; width:25px; height: 25px;transition: all 0.5s; transform-origin: center center;} .jjfa-two-btn>div:nth-of-type(1) i svg{ transform: rotate(90deg)} .jjfa-two-btn>div:nth-of-type(2) i svg{transform: rotate(-90deg)} .jjfa-two-btn>div:hover{ background: #ff6a35} .jjfa-two-btn>div:hover i svg{ fill: #fff} .jjfa-two-btn>div.swiper-button-disabled{ background: #e9e9e9; } .jjfa-two-btn>div.swiper-button-disabled svg{ fill: #b1b1b1} @media(max-width: 1799.98px){ .gsys-container:after{ font-size:150px; top: 0%; width: 100%; } } @media(max-width: 1199.98px){ .gsys-container:before{ width: 100%; height: 100%; border-radius: 2rem 0 0 0rem} .gsys-container:after{ font-size:100px; top: 0%; width: 100%; } } @media(max-width: 991.98px){ .gsys-title-font div:nth-of-type(1){ width: 100% } .gsys-container:after{ font-size:50px; top: 0%; width: 100%; } } /*案例模块*/ .case-top-img{ overflow: hidden; border-radius: 0.5rem;} .case-wrap-font{ position: absolute; right: 2%; bottom: 4%; width:60%; height: 50%; border-radius: 1rem; background: #fff; transform: translateY(200%); transition: all 0.5s} .case-nr{ position: relative;} .case-nr:after{ position: absolute; content: attr(data-title); right: 0px; bottom:0%; text-transform: uppercase; font-family: 庞门正道标题体; font-size: 70px; line-height: 0.35; color: rgba(0, 0, 0, 0.05); z-index: 0; font-weight: bold; margin: auto;} .case-wrap-font .case-nr{} .case-wrap-font .case-nr>p:nth-of-type(1){ font-size: 20px; color: #333333; font-weight: bold;} .case-wrap-font .case-nr>p:nth-of-type(1) span{ position:relative} .case-wrap-font .case-nr>p:nth-of-type(1) span:before{ position:absolute; content: "";width: 100%; height:4px; background: rgba(0,76,161,0.5); bottom: 0; } .case-wrap-font .case-nr>div:nth-of-type(1){ font-size: 16px; color: #999; } .case-wrap-font .case-nr>div:nth-of-type(2) { font-size: 16px; color: #004ca1;} .case-wrap-font .case-nr>div:nth-of-type(2) i{ display: block; transition: all 0.5s} .case-wrap-font:hover .case-nr>div:nth-of-type(2) i{ transform: translateX(100%)} .case-top .swiper-slide-active .case-wrap-font{transform: translateY(0%);} .case-top .swiper-slide-active .animated,.case-bottom .case-big-all:hover .animated{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .case-top .swiper-slide-active .case-wrap-font .case-nr p:nth-of-type(1),.case-bottom:hover .case-wrap-font .case-nr p:nth-of-type(1){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .case-top .swiper-slide-active .case-wrap-font .case-nr>div:nth-of-type(1),.case-bottom:hover .case-wrap-font .case-nr>div:nth-of-type(1){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .case-top .swiper-slide-active .case-wrap-font .case-nr>div:nth-of-type(2) ,.case-bottom:hover .case-wrap-font .case-nr>div:nth-of-type(2) { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .case-top .case-top-img img,.case-bottom .case-big-all .case-top-img img{ transition: all 0.5s;transform: scale(1.05);} .case-big-all:hover .case-top-img img{ transform: scale(1); filter: contrast(1.05) brightness(1.12) ; opacity: 0.9; -webkit-transition: all 1s; } .case-bottom .case-big-all:hover .case-wrap-font {transform: translateY(0%);} @media(max-width: 1699.98px){ .case-wrap-font { width:80%; height:70%; } .case-wrap-font .case-nr>p:nth-of-type(1) { font-size: 16px; } .case-nr:after{ font-size: 50px; bottom: -3%;line-height: 0.7;} } @media(max-width: 1299.98px){ .case-nr:after{ display: none;} } /*公司简介*/ .index-about-big-box{ height: 100%; background: url("../img/index_about_left.jpg") no-repeat; right: 50%;top: 0} .left-about-box2{ display: none; position: relative;width: 100%;} .right-font-box{ position:relative; height: 100%; overflow: hidden;} .right-font-box:before{ position: absolute;content: ""; width:300%; height: 100%; background: url("../img/index_about_right_dot.jpg") repeat top left;} .right-font-box:after{ position: absolute;content: ""; width: 300%;height: 100%; background: url("../img/about-house.png") no-repeat left bottom;left: 40%;bottom: 0%; opacity: 0.45} .about-title-font p{ margin: 0} .about-title-font p:nth-of-type(1){ line-height: 0.8; letter-spacing: -0.25rem} .about-title-font p:nth-of-type(1){ font-size: 60px; font-family: 'Bahnschrift'; text-transform: uppercase;} .about-title-font p:nth-of-type(1) span:nth-of-type(1){ color: #004ca1;} .about-title-font p:nth-of-type(2){ font-size: 30px; color: #004ca1} .right-about-desc{ font-size: 16px; color: #666666; line-height: 2} .right-sub-nav{ font-size: 18px; color: #333; position: relative; z-index: 999} @media(max-width: 1299.98px){ .index-about-big-box { background: none } .left-about-box2{ display: block} .sub-about-img2{ height: 40%; width: 100%} .left-about-box2{ position: inherit;width: 100%;} .left-about-box2 .sub-about-img2{ position: inherit; text-align: center; width: 100% } .right-font-box{ position:relative} .right-font-box:before{ position: absolute; content: ""; width:100%; height: 100%; } .right-font-box:after{ position: absolute;content: ""; width: 100%; height: 100%; right: 0%;background-size: 50%; } .about-title-font p:nth-of-type(1){ font-size: 30px;} .about-title-font p:nth-of-type(2){ font-size:20px; } } @media(max-width: 991.98px) { .index-about-big-box { background: none } .right-font-box:before{ width:100%; height: 100%; } .right-font-box:after{ width: 100%;height: 100%; left: auto; right:0; bottom: 0%;background: url("../img/about-house.png") no-repeat right bottom; background-size: 50% } .right-sub-nav a{ font-size: 18px; color: #333; position: relative; z-index: 999} } /*港陆新闻模块*/ .index-new-big-all{border:1px solid #fff; padding: 3%; transition: all 0.5s} .time-date{} .time-date span{ font-size: 60px; color: #999;} .time-date span:nth-last-of-type(1){ font-size: 16px;} .index-new-big-all p:nth-of-type(1){ font-weight: bold; font-size: 20px; color: #333;} .news-font-desc{ font-size: 16px; color: #999} .news-more{ position: relative; width: 150px; height:45px; border-radius: 2rem; font-size: 16px; color: #999; border: 1px solid #d7d7d7; overflow: hidden;} .news-more a{ color: #999; position:relative;z-index: 2} .news-more span{ position:relative;z-index: 2} .news-more:after{ position: absolute; content: "";position: absolute; content: ""; background: #004ca1; width: 100%; height: 100%; left: 0; bottom: 0; top: 0; right: 0; margin: auto; border-radius: 2rem; transform-origin: right center; transition: transform 0.4s; transform: scaleX(0); } .index-new-big-all:hover .news-more:after{transform: scaleX(1);transform-origin: left center;} .index-new-big-all:hover .news-more span{ color: #fff} .index-new-big-all:hover{ border:1px solid rgba(0,0,0,0.0); box-shadow: 0 0 10px rgba(0,0,0,0.05)} .index-new-big-all .news-img-center img{ transition: all 0.5s} .index-new-big-all:hover .news-img-center img{ transform:scale(1.05);} /*案例*/ .case-big-box-all{ position: relative; overflow: hidden} .case-font-warp{ position: absolute; right: 0; bottom: 0; width: 75%; border-radius: 2rem 0 0 0; bottom:0; background: #223769; transform: translateY(100%); transition: all 0.5s} .case-font-box{} .case-font-box .left-case-title{ width:40%; position: relative;} .case-font-box .left-case-title:after{ position: absolute; content: attr(data-title); left: 0px; bottom: -10%; line-height: 1; text-transform: uppercase; font-family: 庞门正道标题体; font-size: 74px; color: transparent; font-style: italic; z-index: 0; -webkit-text-stroke: 1px rgba(255,255,255, 0.05); } .case-big-box-all img{ transition: all 0.5s} .case-big-box-all:hover img{ transform: scale(1.05)} .case-font-box .left-case-title span{ font-weight: bold; font-size: 30px; color: #fff} .right-case-box{ width: 60%} .right-case-box p:nth-of-type(1) i{ display: block; width: 5px; height: 5px; background: #ff7746; border-radius: 50%;} .right-case-box p:nth-of-type(1) span{ font-size: 24px; color: #fff; font-weight: bold; transition: all 0.5s} .case-small-desc{ color: #fff; font-size: 14px; line-height: 2;} .case-btn-inco>span:nth-of-type(1){ position: relative; border: 1px solid #3b4c74; border-radius: 50%; height: 20px; width: 20px; display: block;} .case-btn-inco>span:nth-of-type(1) svg{ width: 18px; height: 18px; fill: #9d9e9f} .case-btn-inco>span:nth-of-type(1):after { position: absolute; content: ""; border:1px solid #3b4c74; border-radius: 50%; width: 100%; height: 100%; transform: scale(1.5);left: 0;right: 0;top:0;bottom:0; margin: auto;} .swiper-slide-active .case-font-warp{ transform: translateY(0)} .swiper-slide-active .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .swiper-slide-active .left-case-title span:nth-of-type(1){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .swiper-slide-active .left-case-title span:nth-of-type(2){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .swiper-slide-active .left-case-title {-webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; } .swiper-slide-active .right-case-box p:nth-of-type(1){ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .swiper-slide-active .case-small-desc{ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; } .swiper-slide-active .case-btn-inco{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } @media(max-width: 991.98px){ .case-font-warp{ position: inherit; width:100%;border-radius: 0rem 0 0 0;} .case-font-box .left-case-title{ width:100%; display: none;} .right-case-box{ width: 100%} } /*新闻模块*/ .left-news-font-wrap{ background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.25); width: 100%; } .left-news-font-wrap>p:nth-of-type(1){ font-size: 18px; color: #282828} .left-news-font-wrap>div:nth-of-type(1){ font-size: 14px; color: #666} .news-left-data{ width: 15%;} .news-left-data>div{ position: relative; background-image: linear-gradient(to bottom,#f3f3f3,#f3f3f3); border-radius: 1rem; transition: all 0.5s; overflow: hidden;} .news-k-item .news-left-data>div:after{position: absolute; content: ""; background-image: linear-gradient(to bottom,#ff8354,#ff652f);transform: scaleY(0);transition: transform 0.5s; width: 100%; height: 100%; border-radius: 1rem; transform-origin: top center;} .news-k-item:hover .news-left-data>div:after{ transform: scaleY(1); transform-origin: bottom center;} .news-k-item:hover .news-left-data>div{ transform: translateX(10%)} .news-left-data p{ margin-bottom: 0; position: relative; z-index: 2} .news-left-data p:nth-of-type(1){ font-family: Century Gothic; font-size: 48px; color: #282828;} .news-left-data p:nth-of-type(2){ font-size: 14px; color: #666666;} .news-small-wrap{ width: 78%;} .news-small-wrap>p:nth-of-type(1){ font-size: 18px; color: #282828; margin-bottom: 0; line-height: 2} .news-small-wrap>div:nth-of-type(1){ font-size: 14px; color: #666666; line-height: 2} .news-small-wrap p:nth-last-of-type(1) i svg{ width: 20px; height: 15px; fill: #8c8c8c} .news-k-item{ border-bottom:1px solid #e3e3e3; transition: all 0.5s} .news-left-data>div:after{ position: absolute; content: ""; width: 100%; height: 100%; top: 0;left:0;background-image: linear-gradient(to bottom,#ff8354,#ff652f);} .news-k-item:hover .news-left-data p:nth-of-type(1){ color: #fff} .news-k-item:hover .news-left-data p:nth-of-type(2){ color: #fff} .news-k-item:hover svg{ fill: #257841} .news-k-item:hover .news-small-wrap>p:nth-of-type(1){ color: #ff6530} .news-k-item:hover .news-small-wrap p:nth-last-of-type(1) i svg{ fill: #257841} .news-k-item:hover{ border-bottom: 1px solid #fff; box-shadow: 0 0 15px rgba(0,0,0,0.15)} .year-box{ border-top: 1px solid #f1f1f1} .year-box span:nth-of-type(1){ color: #666; font-size: 14px;} .year-box span:nth-of-type(2) svg{ fill: #666; width: 20px; height: 20px;} .news-k-item img{ transition: all 0.5s} .news-k-item:hover img{ transform: scale(1.05);filter: contrast(1.05) brightness(1.12) blur(1px); opacity: 0.9; -webkit-transition: all 1s; } .news-swiper{} .news-swiper .swiper-pagination{ bottom: 2px;} .news-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #25a963} .k-dot-box{ display: flex; width:30%; height: 45px; position:absolute; bottom: 27.5%; right:1%; background-image: linear-gradient(to bottom,#ff8052,#ff6630); border-radius: 2rem 0 0 0; z-index: 999;} .k-dot-box .swiper-pagination-clickable .swiper-pagination-bullet{ width: 10px; height:10px; background: transparent; border: 1px solid #fff; opacity: 1} .k-dot-box .swiper-pagination-clickable .swiper-pagination-bullet-active.swiper-pagination-bullet{ background: #fff!important; opacity: 1; transition: all 0.5s} @media(max-width: 1799.98px){ .k-dot-box{ display: none;} } @media(max-width: 991.98px){ .news-left-data{ width:30%;} .news-small-wrap{ width: 65%} .news-left-data p:nth-of-type(1){ font-size: 20px; } } /*搜索条*/ .index-search{ height:79px; border-bottom:1px solid #eeeeee; } .search-font{ font-size: 14px; align-items: center; line-height:79px; } .search-form{ display: flex; align-items: center; font-size: 14px; width: 50% } .search-form-keywords{ display: flex; align-items: center; font-size: 14px; width: 50% } .search-btn{ background:#20232a; border-radius: 0 0.25rem 0.25rem 0; display: block; height:50px; width: 15%; transition: all 0.5s} .search-btn:hover{ background:#cc0000; } .search-btn svg{ fill: #fff; width: 30px; height: 30px;} #search_text{ border:1px solid #ccc; border-right:none; color: #666; width: 85%; border-radius: 0.25rem 0 0 0.25rem; } #search_text:hover{border:1px solid #cc0000; background: #fff; } .search-font span{ position: relative; display: inline-block} .search-font span a{ color: #666666; font-size: 14px;} .search-font span:nth-last-of-type(1):after{ width: 0; color: #666666;} .search-font span a{ color: #666666; font-size: 14px;font-weight:bold;} .search-font span a:hover{ color: #e80113; font-size: 14px;} .search-form-keywords a:hover{ color: #cc0000 } /*首页产品模块*/ .index-pro-bgcolor{ background-image: linear-gradient(to right,#eff1f9 90%,#fff 0%)} .pro-title-top{line-height: 2} .pro-title-top>div:nth-of-type(1)>span>span{ position: relative; } .pro-title-top>div:nth-of-type(1)>span>span:after{ position: absolute; content: attr(data-title); color: rgba(0,0,0,0.05); font-size: 150px; text-transform: uppercase; line-height: 0.18;letter-spacing: -0.5rem;left: 0; font-weight: 400} .pro-title-top>div:nth-of-type(1)>span{ position: relative; line-height: 2; font-size: 48px; color: #333; font-weight: bold} .pro-title-top>div:nth-of-type(1)>span:after{ position: absolute; content: "";left: 0; background: #b1c7e0; height: 2px; width: 100%;bottom: 4px;} .pro-title-top>div:nth-of-type(1)>span:before{ position: absolute; content: "";left: 0; background: #2165a6; height: 3px; width: 30%;bottom: 3px; z-index: 22} .pro-font-name-box p:nth-of-type(1){ font-size: 36px; color: #2165a6; font-weight: bold} .pro-font-name-box div:nth-of-type(1){line-height: 2; color: #666; font-size: 14px;} .pro-btn-more{ position: relative; background: #fff; border: 1px solid #e8e8e8; border-radius: 2rem; width: 230px; height: 54px; transition: all 0.5s} .pro-btn-more i{ background: #0075c2; width: 44px; height: 44px; display: block; border-radius: 100%; transition: all 0.5s} .pro-btn-more span{ font-size: 18px; color: #545454;} .pro-btn-more:hover i{ transform: rotate(360deg);} .pro-btn-more:hover{ background:rgba(0,117,194,0.75);} .pro-btn-more:hover a span{ color: #fff} @media(max-width:1800px){ .index-pro-bgcolor{ background-image: linear-gradient(to right,#eff1f9 90%,#eff1f9 0%)} } @media(max-width: 1499.98px){ .pro-title-top>div:nth-of-type(1)>span:after{ position: absolute; content: "";left: 0; background: #b1c7e0; height: 2px; width: 100%;bottom: 4px;} .pro-title-top>div:nth-of-type(1)>span>span:after{ font-size: 100px; } .pro-title-top>div:nth-of-type(1)>span{ position: relative; line-height: 2; font-size: 28px; color: #333; font-weight: bold} .pro-font-name-box p:nth-of-type(1){ font-size:26px; color: #2165a6; font-weight: bold} } @media(max-width: 991.98px){ .pro-title-top>div:nth-of-type(1)>span>span:after{ display: none} .pro-title-top>div:nth-of-type(1)>span:before{ display: none} .pro-title-top>div:nth-of-type(1)>span:after{ display: none} } .pro-btn-more2{ position: relative; border: 1px solid #fff; border-radius: 2rem; width: 230px; height: 54px; transition: all 0.5s} .pro-btn-more2 i{ background: #fff; width: 44px; height: 44px; display: block; border-radius: 100%; transition: all 0.5s} .pro-btn-more2 span{ font-size: 18px; color: #fff;} .pro-btn-more2:hover{ border: 1px solid rgba(0,117,196,1);} .pro-btn-more2:hover i{ transform: rotate(360deg);} .pro-btn-more2:hover{ background:#0075c2;} .pro-btn-more2:hover a span{ color: #fff} .pro-btn-more3{ position: relative; border: 1px solid #e8e8e8; border-radius: 2rem; width: 160px; height: 40px; transition: all 0.5s} .pro-btn-more3 i{ background: #0075c2; width: 31px; height: 31px; display: block; border-radius: 100%; transition: all 0.5s} .pro-btn-more3 span{ font-size: 13px; color: #545454;} .pro-btn-more3:hover i{ transform: rotate(360deg);} .pro-btn-more3:hover{ background:rgba(0,117,194,0.75);} .pro-btn-more3:hover a span{ color: #fff} .left-pro-center{ width: 75%} .pro-nav-box{ position: relative; background: #f5f5f5; } .pro-nav-box ul{ border-bottom:3px solid #eef0f2} .swiper-slide-thumb-active .pro-nav-box .pro-mask{ background: rgba(0,117,196,0.95); } .pro-nav-box .pro-mask{ position: absolute; background: rgba(0,0,0,0.5); left: 0; right: 0; top: 0;bottom: 0; margin: auto; width: 100%; height: 100%; font-size: 16px; color: #fff; transition: all 0.5s} .index-title-tongyong{} .index-title-tongyong .title-font>span{ position: relative; line-height: 2; font-size: 48px; color: #333; font-weight: bold} .index-title-tongyong .title-font>span:after{ position: absolute; content: "";left: 0; background: #b1c7e0; height: 2px; width: 100%;bottom: 4px;} .index-title-tongyong .title-font>span:before{ position: absolute; content: "";left: 0; background: #2165a6; height: 3px; width: 30%;bottom: 3px; z-index: 22} .index-bpbj-nav{ width: 70%} .index-title-tongyong2{} .index-title-tongyong2 .title-font>span{ position: relative; line-height: 2; font-size: 48px; color: #333; } .index-title-tongyong2 .title-font>span:after{ position: absolute; content: "";left: 0; background: #b1c7e0; height: 2px; width: 100%;bottom: 4px;} .index-title-tongyong2 .title-font>span:before{ position: absolute; content: "";left: 0; background: #fff; height: 3px; width: 30%;bottom: 3px; z-index: 22} .index-bpbj-nav{ width: 70%} @media(max-width: 1499.98px) { .index-bpbj-nav{ width: 60%} } @media(max-width: 1299.98px) { .index-title-tongyong .title-font>span{ position: relative; line-height: 2; font-size: 28px; color: #333; font-weight: bold} .pro-btn-more{ width: 160px; height: 54px; transition: all 0.5s} .left-pro-center{ width:100%} } @media(max-width: 991.98px) { .index-title-tongyong2 .title-font>span{ font-size: 24px;} .pro-btn-more,.pro-btn-more2{ width: 140px; height:34px; transition: all 0.5s; font-size: 14px;} .pro-btn-more span,.pro-btn-more2 span{ font-size: 14px;} .pro-btn-more2 i{ background: #fff; width: 24px; height: 24px;} .pro-btn-more i{ width: 24px; height: 24px;} .index-title-tongyong2 .title-font>span:before,.index-title-tongyong2 .title-font>span:after{ display: none} } .bpbj-bj-box{ overflow: hidden;} .bpbj-font{ position: absolute; background: rgba(0,0,0,0.5);left: 0; bottom: 0; width: 100%; transition: all 0.5s} .bpbj-font span{ color: #fff; font-size: 16px;} .bpbj-mask{ position: absolute; width: 100%; height: 100%; display:block; left: 0; right: 0; top: 0; bottom:0; opacity: 0; transform:translateY(-5%); transition: all 0.85s; background: url("../img/bpbj_logo.png") no-repeat center center; background-size: 80%; z-index: 99} .bpbj-mask-font-box .bpbj-mask-font{ font-size: 16px; color: #fff} .bpbj-mask-font-box i{ background: #fff; width: 50px; height: 50px; border-radius: 100%; } .bpbj-bj-box:hover{} .bpbj-bj-box:hover .bpbj-mask{ opacity: 1; transform:translateY(0%); background-size: 45%; } .bpbj-bj-box:after{ position: absolute; content: ""; width: 100%; height: 100%; display:block; left: 0; right: 0; top: 0; bottom:0; transform:scale(0); transition: all 0.5s; background: rgba(0,117,194,0.8);} .bpbj-bj-box img{ transition: all 0.5s} .bpbj-bj-box:hover img{ transform: scale(1.05)} .bpbj-bj-box:hover:after{ transform: scale(1.0)} .bpbj-bj-box:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .bpbj-bj-box:hover .bpbj-mask-font-box .bpbj-mask-font{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .bpbj-bj-box:hover .bpbj-mask-font-box i{ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .bpbj-mask-font-box i svg{ fill: #2a8ccc; width: 18px; height: 18px;} .bpbj-bj-box:hover .bpbj-font{ transform: scale(1.25); opacity: 0} .bpbj-item{ border: 1px solid #d3d3d3; border-radius: 2rem; font-size: 18px; color: #515151; padding: 0.8rem 0.8rem;} .bpbj-item:hover{ background: #0075c2; color: #fff} .bpbj-item:hover a{ color: #fff} @media(max-width: 1499.98px){ .bpbj-item{ padding: 0.3rem 0.5rem;} } @media(max-width: 1299.98px){ .index-title-tongyong .title-font>span{ position: relative; line-height: 2; font-size:20px; color: #333; font-weight: bold} .bpbj-item{ border: 1px solid #d3d3d3; border-radius: 2rem; font-size: 14px; color: #515151; padding: 0.25rem 0.25rem;} } @media(max-width: 1199.98px){ .index-bpbj-nav{ width:60%} .index-title-tongyong .title-font>span{ position: relative; line-height: 2; font-size:30px; color: #333; font-weight: bold} .bpbj-item{ border: 1px solid #d3d3d3; border-radius: 2rem; font-size: 14px; color: #515151; padding: 0.5rem 0.5rem;} } @media(max-width: 991.98px){ .index-bpbj-nav{ width:100%} .bpbj-item{ border: 1px solid #d3d3d3; border-radius: 2rem; font-size: 14px; color: #515151; padding: 0.5rem 0.5rem;} .index-title-tongyong .title-font>span{ position: relative; line-height: 2; font-size: 24px; color: #333; font-weight: bold} .index-title-tongyong .title-font>span:after{ display: none} .index-title-tongyong .title-font>span:before{ display: none} .index-title-tongyong .pro-btn-more{ display: none} .bpbj-mask-font-box i{ background: #fff; width:30px; height: 30px; border-radius: 100%; } } /*核心优势*/ .hxys-item{ width:25%; overflow: hidden; } .hxys-item.on{ width: 50%; overflow: hidden ; } .hxys-font-box{ position: absolute; background: #fff; width: 90%; left: 0; right: 0; margin: auto; transform: translateY(50%); transition: all 0.5s} .hxys-title svg{ fill: #0075c2;} .hxys-title{ font-weight: bold; font-size: 28px; color: #373737; position: relative} .hxys-title:after{ position: absolute; content:attr(data-title);font-family: Arial; font-size: 48px; color: #0075c2;left: 0; top: -80%;} .hxys-content{ font-size: 16px; color: #666;} .hxys-img.one{ width: 100%; height: 100%; background: url("../img/ys1-1.png") no-repeat center center; } .hxys-img.two{ display: block; width: 100%; height: 100%; background: url("../img/ys2-2.png") no-repeat center center; background-size: cover; } .hxys-img.one{ width: 100%;background: url("../img/ys3-3.png") no-repeat center center ;} .hxys-box{ overflow: hidden; } .hxys-font-one{ position: absolute; margin: auto;top: 0; left: 0; right: 0; bottom: 0; transition: all 0.5s} .hxys-font-one p:nth-of-type(1){ font-size: 28px; font-weight: bold;color: #fff; line-height: 3rem;} .hxys-font-one div:nth-of-type(1){ font-size:16px; color: #fff; margin-bottom: 2%; line-height: 2rem} .hxys-font-one div:nth-of-type(2) i{ background: #0075c2; width: 50px; height: 50px; border-radius: 50%;} .hxys-font-one div:nth-of-type(2) i svg{ fill: #fff; width: 20px; height: 20px;} .hxys-box:after{ position: absolute; content: ""; background: rgba(0,0,0,0.5); width: 100%; height: 100%; top: 0;left: 0; transition: all 0.5s} .hxys-font-one,.hxys-font-box{ z-index: 99} .hxys-font-one i svg{ fill: #fff;} .hxys-item.on .hxys-box:after{ background: rgba(0,0,0,0);} .hxys-item.on .hxys-font-one{ transform: translateY(-30%); opacity: 0;} .hxys-item.on .hxys-font-box{transform: translateY(-150%)} .hxys-box:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .hxys-box:hover .hxys-font-one .hxys-title{ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .hxys-box:hover .hxys-font-one .hxys-content { -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; } @media(max-width:1199.98px){ .hxys-font-one p:nth-of-type(1){ font-size: 22px; } } @media(max-width: 991.98px){ .hxys-item{ width:100%; overflow: hidden; } .hxys-item.on{ width: 100%; overflow: hidden ; } .hxys-font-one div:nth-of-type(1){ font-size:14px; } .hxys-title{ font-weight: bold; font-size: 18px; color: #373737; position: relative} .hxys-title:after{ position: absolute; content:attr(data-title);font-family: Arial; font-size: 28px; color: #0075c2;left: 0; top: -40%;} .hxys-content{ font-size: 14px;} .hxys-font-one div:nth-of-type(2) i{ background: #0075c2; width: 25px; height: 25px; border-radius: 50%;} .hxys-font-one div:nth-of-type(2) i svg{ fill: #fff; width: 15px; height: 15px;} .hxys-font-one p:nth-of-type(1){ font-size: 18px; } } /*首页案例模块*/ .index-case-desc{ color: #666666; font-size: 16px; line-height: 2; width:70%} .case-big-box-one{overflow: hidden;transition: all 0.5s} .case-big-box-one:after{ position: absolute; content: ""; width: 100%; height: 100%;left: 0; top: 0;bottom: 0;right: 0; margin: auto; background:rgba(0,0,0,0.4); transition: all 0.5s} .case-font-title{background: rgba(255,255,255,0.8); width:50%; z-index: 999; position: absolute;left: 0; bottom: 0; transition: all 0.5s; transition: all 0.5s} .case-font-title span{ font-size: 16px; color: #333; position: relative; z-index: 2; transition: all 0.5s} .case-big-box-one:hover{} .case-big-box-one:hover:after{ transform: scaleY(100%) scale(0); opacity: 0} .case-big-box-one:hover .case-font-title span{ color: #fff;} .case-big-box-one img{ transform: scale(1); transition: all 0.5s} .case-big-box-one:hover img{ transform: scale(1.05);} .case-big-box-one:hover span a{ color: #fff} .case-big-box-one:hover .case-font-title{ width: 100%; } .case-btn{ border: 1px solid #0075c2} .case-btn svg{ fill:#0075c2 } .case-big-box-one:hover .case-font-title{background: #0075c2;} .case-next.swiper-button-disabled .case-btn,.case-prev.swiper-button-disabled .case-btn{ border: 1px solid #aaaaaa; opacity: 0.5} .case-font-title:before{ position: absolute; content: "";left: 0; bottom: 0; width: 100%; height: 100%; background: #0075c2; transform: scaleX(0); transition: transform 0.5s; transform-origin: right center} .case-big-box-one:hover .case-font-title:before{transform: scaleX(1);transform-origin: left center} .case-big-box-one:hover .case-font-title span{background: rgba(255,255,255,0);} @media(max-width: 991.98px) { .index-case-desc{ color: #666666; font-size: 14px; line-height: 2; width: 100%} } /*首页新闻中心模块*/ .index-news-big-box{ background: url("../img/news-img.jpg") no-repeat center top; background-size: cover;} .news-big-box-one{ overflow: hidden} .news-font-all-box{ position: absolute;left: 10%; right:0; top: 130%; background: #fff; border-radius: 1rem; width: 45%; box-shadow: 0 0 20px rgba(0,0,0,0.25); transition: all 0.5s} .news-font-all-box p:nth-of-type(1){ font-size: 24px; color: #333333} .news-font-all-box p:nth-of-type(1)>span{ position: relative; } .news-font-all-box p:nth-of-type(1)>span>span{ position: relative; z-index: 222} .news-font-all-box p:nth-of-type(1)>span:after{ position: absolute; content: ""; height: 4px; width: 100%; background-color: rgba(0,117,194,1); height: 8px; left: 0; bottom: 0; z-index: 0; transition: all 0.5s} .news-font-all-box p:nth-of-type(2){ font-size: 24px; color: #333333; line-height: 2} .news-font-tt .news-desc{ font-size: 14px; color: #666666; line-height: 2} .news-font-all-box p:nth-of-type(3){ font-size:14px; color: #999999} .news-big-box-one img{ opacity: 0.75; transition: all 0.5s} .swiper-slide-active .news-font-all-box{ top:40%;} .swiper-slide-active .news-big-box-one img{ opacity:1} .news-font-all-box{ position: absolute;left: 10%; right:0; top: 130%; background: #fff; border-radius: 1rem; width: 45%; box-shadow: 0 0 20px rgba(0,0,0,0.25);transition: all 0.5s} .swiper-slide-active .news-big-box-one .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .swiper-slide-active .news-big-box-one .news-font-all-box p:nth-of-type(1){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .swiper-slide-active .news-big-box-one .news-font-all-box p:nth-of-type(2){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .swiper-slide-active .news-big-box-one .news-desc{ -webkit-animation-delay: .4s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .swiper-slide-active .news-big-box-one .news-font-all-box p:nth-of-type(3){ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; } .swiper-slide-active .news-big-box-one .pro-btn-more3{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } @media(max-width: 1799.98px){ .swiper-slide-active .news-font-all-box{ width: 95%;left: 0; right: 0; margin: auto;; top: 0; bottom: 0; height: 80%} } @media(max-width: 1499.98px){ .news-font-tt .news-desc{ display: none} .swiper-slide-active .news-big-box-one .news-font-all-box p:nth-of-type(3){ display: none} } @media(max-width: 991.98px){ .swiper-slide-active .news-font-all-box{ top: 0%; bottom:0;margin: auto;left: 0;right: 0; width: 90%; height: 80%} .news-font-all-box p:nth-of-type(1) { font-size: 16px;} .news-font-all-box p:nth-of-type(2){ font-size: 14px;} .news-font-tt .news-desc{ display: none} .pro-btn-more3{width: 100px; height: 30px;} .pro-btn-more3 i { background: #0075c2; width: 21px; height: 21px; display: block; border-radius: 100%; transition: all 0.5s; } } /*footer*/ #footer-container{ background: #333333; } .end_nav{ width:75%;padding-right:5%; position:relative; z-index: 9999 } .footer-copy span{color: rgba(255,255,255,0.5); } .footer-copy span a{ color: rgba(255,255,255,0.5); font-size: 14px;transition: all 0.5s} .footer-copy span a:hover{color:#fff} .footer-bottom{ border-top: 1px solid rgba(255,255,255,0.05); font-size: 16px; color: #999;} .footer-bottom a{ color: #999;} .footer-bottom a:hover{ color:#fff} .foot-right{ width: 20%; padding-left:2%;} .foot-scan>div:nth-of-type(1){ background: url("../img/end_scan_bj.png") no-repeat center center; width:140px; height:140px; } .foot-scan>p:nth-of-type(1){ font-size:16px; color:rgba(255,255,255,0.5) } .end_nav .end-nav-item{ } .end_nav ul li{ line-height: 18px; position:relative; z-index: 9 } .end_nav ul li a{ font-size: 16px; color: rgba(255,255,255,0.45)} .end_nav ul li{ line-height: 30px; position: relative;} .end_nav ul li a{ position: relative;} .end_nav ul li:nth-of-type(n+2) a:after{position: absolute; content: ""; background: #3466ce; width: 100%; bottom: 0px;left: 0; height: 5px; transition: transform .5s; opacity: 0.7; transform: scaleX(0); transform-origin: right bottom;} .end_nav ul li:nth-of-type(n+2):hover a:after{transform: scaleX(1); transform-origin: left bottom;opacity: 0.5; } .end_logo_contact p:nth-of-type(1){ position: relative; font-size: 18px; color: #333;} .end_nav ul li:nth-of-type(1),.end_logo_contact p:nth-of-type(1) span{ position: relative; } .end_nav ul li:nth-of-type(2){ margin-top:35px; } .end_nav ul li:nth-of-type(1) a{font-size: 18px; color: #fff; position: relative } .end_nav ul li:nth-of-type(1) a:after{ position: absolute; content: ""; background: rgba(255,255,255,0.25); width:100%; bottom:-20px;left: 0; height: 1px; transition: transform 0.5s; opacity: 1; transform-origin: right bottom; transition: all 0.5s} .end_nav ul li:nth-of-type(1) a:before{ position: absolute; content: "";left:0;bottom:-20px; background: #fff; width:20%; height:2px; z-index: 555;transition: transform 0.5s;transform-origin: right bottom;} .end_nav ul li:nth-of-type(1) a:hover:before{transform: scaleX(0.2); transform-origin: left bottom;opacity: 1; width: 100% ; background: #3466ce} .end_nav ul li:nth-of-type(1) a:hover{ color:#fff;} .end_nav ul li:hover a{ color:#fff } .end_nav .lx_tel{ font-size: 14px; color: #666666} .end_nav .lx_tel i svg{ width: 20px; height: 20px; fill: #828385} .end_nav .lx_tel span{ font-size: 14px; color: #828385; font-weight: 100} .foot-scan img{ width:120px; height:120px;} @media(max-width: 1199.98px){ .end_nav{ width:100%;padding-right:0%; position:relative; z-index: 9999 } .foot-right{ width: 100%; padding-left:0%;} } /*通用*/ .page{ width: 100%;text-align: center; font-size: 14px;} .clear{ clear:both;} #prev_next li { line-height: 2; font-size: 14px; } rcread { padding: 40px 0;} .rcread h4 { font-size: 20px; color: #333; font-weight: normal; margin-bottom: 5px; } .rcread li { height: 40px; line-height: 40px; font-size: 14px; border-bottom: 1px dotted #cbcbcb; overflow: hidden; padding-left: 28px; background: url(../img/ic1.png) no-repeat 0 center; vertical-align: top; } .rcread li em { float: left; width: 640px; overflow: hidden; font-style: inherit; font-weight: inherit; } .rcread li em a { color: #686868; font-style: inherit; font-weight: inherit; } .rcread li em a:hover { color: #991313; font-style: inherit; font-weight: inherit; } .rcread li span { float: right; color: #999; } .footer-center-nav{ display: flex; width: 70%} @media(max-width: 1299.98px) { .footer-scan { display: flex; } } @media(max-width: 1199.98px) { .footer-center-left{ border-right: none!important;} .footer-scan { display: flex; } .footer-center-nav{display: none !important;} .ft-item{ padding: 0 0.25rem; position: relative;} } @media(max-width: 991.98px) { .footer-scan { display: none; } .footer-left-title{ font-size: 18px; text-align: center} } /*人才招聘*/ #jobs_title{ background: #999; text-align: left; justify-content: space-between; font-weight: bold;; font-size: 18px; line-height: 30px; color: #fff} .job_name{ border-bottom: 1px solid #eee; text-align: left;justify-content: color: #999; justify-content: space-between; flex:1; font-size: 16px; line-height: 30px; } .job_name h3{ color: #999; font-weight: bold; font-size: 16px; } .job_nr{ font-size: 16px; line-height: 30px; background: #eee; display: none; } .job_name p:nth-last-of-type(1){ width: 10%; background: #ff9d2a; color: #fff; border-radius: 5px; padding: 0 5px; text-align: center; } #jobs_title div:nth-last-of-type(1){ width: 10%; text-align: center; } #jobs_title div { width: 20%;text-align: center} .job_name p{ width: 20%; text-align: center} .job_nr a{ text-align: center; display: inline-block; margin:0 auto;border-radius: 5px;background: #004197; color: #fff; width: 30% } .job_nr a:hover{ box-shadow: 10px 10px 20px #004197 } @media(max-width: 991.98px){ #jobs_title div:nth-last-of-type(1){ width: 20%; text-align: center; } .job_name p:nth-last-of-type(1){ width: 20%;} } @media(max-width: 768px){ #jobs_title{ font-size: 12px; } .job_name{ font-size: 14px; } .job_name p:nth-of-type(1){ font-size: 14px;} .job_name p:nth-last-of-type(1){ width:30%; background: #ff9d2a; color: #fff; border-radius: 5px; padding: 0 5px; text-align: center; } #jobs_title div:nth-last-of-type(1){ width: 50%; text-align: center; } #jobs_title div { width: 50%} .job_name p{ width:50%; } .job_nr{ font-size: 14px; line-height:2; background: #eee; display: none; } .job_nr a{ text-align: center; display: inline-block; margin:0 auto;border-radius: 5px;background: #004197; color: #fff; width: 50% } } .apply-job{ font-size: 16px; } /*产品头部模块*/ .proinfo-font-box{} .proinfo-font-box .proinfo-title{ border-bottom: 1px solid #e8e8e8} .proinfo-font-box .proinfo-title p:nth-of-type(1){ font-size: 30px; color: #323232} .proinfo-font-box .proinfo-title p:nth-of-type(2){ font-size: 18px; color: #646464} .proinfo-desc{ font-size: 18px; color: #333333; font-weight: bold;border-bottom: 1px solid #e8e8e8} .proinfo-desc p{ margin: 0; line-height:2} .proinfo-desc p:nth-of-type(1) i{ font-size: 18px; color: #0075c4; font-weight: bold} .proinfo-desc p:nth-of-type(n+2) i svg{ width: 10px; height: 10px; fill: #cecece} .proinfo-desc p:nth-of-type(n+2) span{ font-size: 16px; color: #707070; font-weight: 400} .proinfo-btn-box>div.proinfo-btn{ background: #333333; width: 175px; position: relative; overflow: hidden} .proinfo-btn-box>div.proinfo-btn a{ color: #fff; font-size: 16px; position: relative;} .proinfo-btn-box>div.proinfo-btn:nth-of-type(2){background: #0075c4;} .proinfo-btn-box>div.proinfo-btn:before{ position: absolute; content: "";left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: #0685db; transform: scaleX(0); transform-origin: right center; transition: transform 0.5s} .proinfo-btn-box>div.proinfo-btn:hover:before{ transform: scaleX(1);transform-origin: left center} .proinfo-tel{ display: flex} .proinfo-tel p{ margin: 0} .proinfo-tel p:nth-of-type(1){ font-size: 16px; color: #787878;line-height: 1.5} .proinfo-tel p:nth-of-type(2){ font-size: 30px; color: #0075c4; line-height: 1} .pro-more-btn { border-radius: 2rem; background: #fff000; width:140px; height:42px; border-radius: 2rem; border:1px solid #fff000; font-size:16px; color:#000000} .pro-more-btn a span{ font-size:16px; color:#fff;} .pro-con-btn.pro-next span{ width:5px; height:5px; display: block; border:1px solid #fff; border-radius: 50%; transform: translate(-5px,2px)} .pro-con-btn.pro-prev span{ width:5px; height:5px; display: block; border:1px solid #fff; border-radius: 50%; transform: translate(5px,2px)} .pro-con-btn{ position:absolute; top:0;bottom:0; margin:auto; border-radius: 2rem; width:65px; height:65px; border-radius: 2rem; background: #9a9b9d; font-size:16px; color:#fff; transition: all 0.5s; cursor:pointer; display:flex; } .pro-con-btn i svg{ width:20px; height:20px; fill:#fff; } .pro-con-btn.pro-prev i svg{ transform: rotate(-180deg);} .pro-next{ left:-80px;} .pro-prev{ right:-80px; background: #fff000;} .pro-con-btn:hover{ background: #fff000;} .swiper-button-disabled.pro-con-btn{ opacity: 0.5;} .light{ position: relative; overflow: hidden} .light:after { position: absolute; content: ""; background-image: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.65),rgba(255,255,255,0)); transform:skewX(-45deg); width:60%; height: 100%; left: -100%; opacity: 1; top: 0; bottom: 0; margin: auto; transition: all 0.75s; } .proinfo-k:hover .light:after{ left:120%; opacity: 1;} @media(max-width: 1799.98px){ .pro-con-btn{ display: none!important;} } @media(max-width: 1299.98px){ .proinfo-btn-box>div.proinfo-btn{ background: #333333; width: 48%;} .proinfo-tel{ display: none} .proinfo-font-box .proinfo-title p:nth-of-type(1){ font-size: 24px; line-height: 1.5; color: #323232} } .proinfo-k{ box-shadow: 0 0 10px rgba(0,0,0,0.05)} .pro-nr-title{ font-size: 24px; color: #333; border-bottom: 1px solid #eeeeee} .pro-nr-title span{position: relative;} .pro-nr-title span:after{ position: absolute; content: ""; background: #0075c4; height: 2px; width:40%;left: 0; bottom:-10%; } .cj-right-box{} .cj-right-box .cj-item{ width: calc(100% / 3);} .pro-ad{ background: url("../img/ad_bj.jpg") no-repeat center center;background-size: cover} .ad-font{ font-size: 24px; color: #fff;} .ad-font p{ margin: 0} .ad-font {} .ad-font2{ position: relative; font-size: 18px; } .ad-font2:after{ position: absolute; content: ""; left: 0; bottom: 0; top: 0; margin: auto; background: #fff; height: 80%; width: 1px;} .ad-font2 p{ line-height: 2;} .ad-tel{ font-size: 36px; color: #fff;} @media(max-width: 991.98px){ .ad-font{ font-size: 18px; color: #fff;} .ad-tel{ font-size: 26px;} } .liyou-box{ box-shadow: 0 0 10px rgba(0,0,0,0.15); background: url("../img/youshi_bj.jpg") no-repeat center top; background-size: cover;} .ly-item{ border-radius: 0.5rem 0 0 0.5rem; background: #f6f6f6; border-right: 6px #c5c5c5 solid; transition: all 0.5s} .ly-item span{ color: #333333; font-size: 18px;} .swiper-slide-thumb-active .ly-item{ background: #0075c4;border-right: 6px #005e9e solid;} .swiper-slide-thumb-active .ly-item span{ color: #fff} .liyou-title>div:nth-of-type(1){ width: 28%} .liyou-title>div:nth-of-type(2){ position: relative; width: 72%; font-size: 14px; color: #898989; line-height: 2; } .liyou-title>div:nth-of-type(2):after{ position: absolute; content: "";left: 0; top: 0; bottom: 0;width: 1px; height: 80%; background: #ccc; margin: auto;} .liyou-title>div:nth-of-type(1) i svg{ width: 12px; height: 12px; fill: #0075c4;} .liyou-title>div:nth-of-type(1) span{ font-size: 28px; color: #373737; font-weight: bold} @media(max-width: 1399.98px) { .liyou-title>div:nth-of-type(1) span{ font-size: 20px; color: #373737; font-weight: bold} } @media(max-width: 991.98px){ .liyou-title>div:nth-of-type(1){ width: 100%} .liyou-title>div:nth-of-type(2){ width: 100%; border-left: 0px solid #ccc} } .company-honor-btn.honor{ width: 50%} .company-honor-btn.honor .honor-item{ border: 1px solid #dedede; color: #666; width: 40%} .company-honor-btn.honor .honor-item a{ color: #666} .company-honor-btn.honor .honor-item.active{ background: #0075c4; color: #fff} .company-honor-btn.honor .honor-item.active a,.company-honor-btn.honor .honor-item:hover a{ color: #fff} /*首页产品中心*/ .index-pro-title-one,.index-pro-title-one span{position: relative} .index-pro-title-one:before{ position: absolute; content: ""; background: #ccc; width: 150%; height: 1px; left: 0; bottom:0;} .index-pro-title-one:after{ position: absolute; content: ""; background: #ff5e15; width: 2%; height: 2px; left: 0; bottom:0;} .index-pro-list-name span{ } .index-pro-title-one p{ margin: 0} .index-pro-title-one p:nth-of-type(1){ font-size: 56px; color: #111; font-family: 'Myriad Pro'; text-transform: uppercase; line-height: 0.8} .index-pro-title-one p:nth-of-type(2){ font-size: 20px; color: #333;} .index-pro-list-name{ font-size: 18px; color: #333;} .index-pro-list-name a:hover{ color: #ff5e15} .index-pro-font{ background: #f2f2f2; transition: all 0.5s} .index-pro-box-content{ background: #f2f2f2; width: 100%; height: 100%; overflow: hidden!important; position: relative} .pro-font-wrap p{ margin: 0} .pro-font-wrap p:nth-of-type(1){ font-size: 20px; color: #333} .pro-font-wrap p:nth-of-type(2){ font-size: 12px; color:rgba(0,0,0,0.5); text-transform: uppercase;} .pro-font-wrap .pro-inco i svg{ fill: #797979} .index-pro-font2{ background: rgba(0,0,0,0.75); opacity: 0; position: absolute; bottom:-50%; transition: all 0.5s} .index-title-font2 .pro-font-wrap p:nth-of-type(1){ font-size: 26px; color: #fff} .index-title-font2 .pro-inco i svg{ fill: #949494} .index-pro-desc{ font-size: 20px; color:#9e9e9e; line-height: 2 } .pro-btn-two span{ display: block; width: 48%; font-size: 18px; position: relative;} .pro-btn-two span a{ color: #fff} .pro-btn-two span:nth-of-type(1){ background: #004ca1} .pro-btn-two span:nth-of-type(2){ background: #ffffff} .pro-btn-two span:nth-of-type(2) a{ color: #282828} .pro-btn-two span:nth-of-type(2):after{ position: absolute; content: ""; left: 0; top:0; width: 100%; height: 100%; transition: transform 0.5s; transform: scaleX(0); transform-origin: right center; background: rgba(19,119,230,0.5); } .pro-btn-two span:nth-of-type(1):after{ position: absolute; content: ""; left: 0; top:0; width: 100%; height: 100%; transition: transform 0.5s; transform: scaleX(0); transform-origin: right center; background: rgba(255,255,255,0.15); } .pro-btn-two span:hover:after{ transform: scaleX(1); transform-origin: left center;} .pro-btn-two span a{ position: relative; z-index: 99} .pro-btn-two span:hover a{ color: #fff} .index-pro-box-content{ position: relative;} .index-pro-box-content:hover{} .index-pro-box-content img{ transition: all 0.5s;} .index-pro-box-content:hover img{ transform: scale(1.05)} .index-pro-box-content:hover .index-pro-font{ transform: translateY(100%)} .index-pro-box-content:hover .index-pro-font2{opacity: 1; bottom: 0} .index-pro-box-content:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .index-pro-box-content:hover .index-title-font2 .pro-font-wrap{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .index-pro-box-content:hover .index-title-font2 .pro-inco{ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .index-pro-box-content:hover .index-title-font2 .index-pro-desc{ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .index-pro-box-content:hover .pro-btn-two span:nth-of-type(1){ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .index-pro-box-content:hover .pro-btn-two span:nth-of-type(2){ -webkit-animation-delay: .7s; -moz-animation-delay: .7s; -o-animation-delay: .7s; animation-delay: .7s; } @media(max-width: 991.98px){ .index-title-font2 .pro-font-wrap p:nth-of-type(1){ font-size:16px; color: #fff} .index-pro-title-one p:nth-of-type(1){ font-size: 24px; color: #111; font-family: 'Myriad Pro'; text-transform: uppercase; line-height: 0.8} .index-pro-title-one p:nth-of-type(2){ font-size: 16px; color: #333;} .index-pro-title-one:before{ width: 100%} .index-pro-title-one p>span:after{bottom:-125%} .index-pro-title-one:after{ width: 5%} .index-title-font2 .pro-font-wrap p:nth-of-type(1){ font-size: 16px; } .pro-btn-two span { display: block; width: 48%; font-size: 14px; position: relative; } .pro-font-wrap p:nth-of-type(1){ font-size: 16px;} .index-pro-font2{ opacity: 0; } .index-pro-box-content:hover .index-pro-font{ transform: translateY(0%)} .index-pro-box-content:hover .index-pro-font2{ opacity: 0; } } /*产品详情页样式*/ .product-big-font{ width: 100%;background: #f7f7f7 } .proimg{ width: 80%} .product-big-font{ position: relative} .product-container{ position: relative; z-index: 22} .product-container>p:nth-of-type(1){ font-size: 36px; color: #282828; font-weight: bold; position: relative} .product-container>p:nth-of-type(2){ font-size: 20px; color: #666666; position: relative} .product-container>p:nth-of-type(2):after{ position: absolute;content:""; width: 100%; height: 1px;left: 0; bottom:0; background: #cecece } .product-container>p:nth-of-type(2):before{ position: absolute;content:""; width:20%; height:3px;left: 0; bottom:0; background: #cc0000; bottom: -1px; z-index: 2 } .product-container>p:nth-of-type(3){ font-size: 18px; color: #666666} .product-container .pro-top-desc{ font-size: 16px; color: #666; line-height: 2; } .product-container .pro-btn-top{ border-radius: 0.25rem; font-size: 16px; color: #333; position: relative;background: #282828; width: 48%; height: 58px; display: block} .product-container .pro-btn-top:after{ position: absolute; content: ""; left: 0; top:0; width: 100%; height: 100%; transition: transform 0.5s; transform: scaleX(0); transform-origin: right center; background: rgba(255,255,255,0.2); } .product-container .pro-btn-top:nth-of-type(2){ background: #cc0000; } .product-container .pro-btn-top:after{ position: absolute; content: ""; left: 0; top:0; width: 100%; height: 100%; transition: transform 0.5s; transform: scaleX(0); transform-origin: right center; background: rgba(255,255,255,0.2); } .proinfo-container{ width: 70%} .proinfo-container .proinfo-item{ transition: all 0.5s} .proinfo-container .proinfo-item:hover{ background: #cc0000; border:1px solid #cc0000; } .proinfo-container .proinfo-item:hover i svg{ fill: #fff;} .proinfo-container .proinfo-item:hover p{ color: #fff;} .proimg-box{} .pro-bigimg .swp-btn{ background: #cc0000; border-radius: 0.5rem} .pro-bigimg .swiper-button-next2{ left:5%;top:0;bottom:0; margin:auto;} .pro-bigimg .swiper-button-prev2{ top:0;bottom:0; margin:auto; right:5%;} #proimg-box .swiper-pagination{ bottom:30px!important;} #proimg-box .swiper-pagination .swiper-pagination-bullet{ width: 10px; height: 10px; transition: all 0.5s} #proimg-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 35px; height: 10px; border-radius: 0.5rem; background: #cc0000} .product-container .pro-btn-top:hover:after{ transform: scaleX(1); transform-origin: left center;} .pro-btn-top i svg{ width: 25px; height: 25px; fill: #fff;} .product-container .pro-btn-top a{ position: relative; z-index: 99} .pro-right-2ys{} .pro-right-2ys p{ width: 50%; font-size: 16px; color: #999;} .pro-right-2ys p i,.pro-right-2ys div i{width: 5px; height: 5px; display: block; border-radius: 50%; background: #ba2a24} .pro-right-2ys p span,.pro-right-2ys div span{ width: calc(100% - 10px)} .pro-right-2ys div span{ font-size: 16px; line-height: 2.5; color: #666} .w-65{ width: 75%} .w-35{ width: 25%} .pro-btn-top .w-65{ position: relative; } .pro-btn-top .w-65:after{ position: absolute; content: ""; top: 0;bottom:0; right:0; margin:auto; height: 70%; border-right:1px solid rgba(255,255,255,0.25)} .up-tel2{ display: flex; margin-left:5%} .up-tel2 svg{ width: 32px; height: 32px; fill: #ff652f} .up-tel2 .tel-text span:nth-of-type(1){ font-size: 12px; color: rgba(0,0,0,0.8);line-height: 1.25;} .up-tel2 .tel-text span:nth-of-type(2){ font-size: 26px; color: #000; font-family: 'Bahnschrift'; } .content table{ border-top: 1px solid #ccc;border-left: 1px solid #ccc;} .content table td{ text-align: center; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;} .content strong{ font-size: 1.6rem; color: #212529} .proinfo-item{ border:1px solid #a2a2a2; border-radius: 0.5rem} .proinfo-item i svg{ width: 35px; height: 35px; fill: #999999;} .proinfo-item p{ color: #999; font-size: 16px;} .proinfo-btn-two{ width:66%} @media(max-width: 1299.98px){ .proinfo-btn-two{ width:100%} .proinfo-container{ width: 100%} } @media(max-width: 1199.98px){ .up-tel2 .tel-text span:nth-of-type(2){ font-size: 18px; color: #000; } .pro-right-2ys p{ font-size: 14px; } .product-container .pro-btn-top{ width: 48%; height: 58px; display: block;} .pro-right-2ys div i{ display: none} } .pro-navitem i svg{ width: 20px; height: 20px; fill: #bebebe; transition: all 0.5s} .pro-navitem{ font-size: 14px; position: relative} .pro-navitem:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width: 1px; height: 60%; top: 0; bottom: 0; margin: auto; right: 0; background: #dddddd;} .pro-navitem a{ color: #282828} .pro-navitem a:hover{ color: #cc0000} .pro-navitem a:hover i svg{fill: #ff5e15} .pro-nav-box{ font-size: 20px;} .pro-nav-box li{ text-align: center; position: relative; overflow: hidden; } .pro-nav-box li a{ position: relative; z-index: 33} .pro-nav-box li:hover a{ color: #fff} .pro-nav-box li:before{ position: absolute; content: ""; right: 0; bottom:0px; width: 1px; height:40%; margin:auto; top:0; background: #dce0e7; transform: scaleX(1); transition: transform 0.5s; transform-origin: left center;} .pro-nav-box li:after{ position: absolute; content: ""; left: 0; bottom:0px; width: 100%; height:100%; background: #3466ce; transform: scaleX(0); transition: transform 0.5s; transform-origin: left center; } .pro-nav-box li.active:after,.pro-nav-box li.active:before{ display: none} .pro-nav-box li.active a{ color: #fff;} .pro-nav-box li.active{ background: url("../img/pro-nav-bj.jpg") no-repeat left top #3466ce;} .pro-nav-box li:hover:after{ transform: scaleX(1); transform-origin: left center; } .pro-nav-box li:hover{ color: #fff} .pro-detail-title{ } .pro-detail-title div p:nth-of-type(1) span:nth-of-type(1){ font-size: 24px; color: #cc0000; line-height: 0.75; font-weight: bold;} .pro-detail-title div p:nth-of-type(1) span:nth-of-type(2){ font-size: 16px; text-transform: uppercase; color: #999;} #big-img .swiper-btn2{ position: absolute; border-radius:0 0.2rem 0.2rem 0; z-index: 99; width: 38px; height: 48px; top: 0; bottom: 0; margin: auto; background: #282828; z-index: 99; transition: all 0.5s} #big-img .swiper-btn2:hover{ background: #ff5e15} #big-img .swiper-btn2.swiper-button-disabled{ opacity: 0.5} #big-img .swiper-btn2 i svg{ fill: #fff;} #big-img .swiper-btn2.swiper-button-prev1{ left: 0px;} #big-img .swiper-btn2.swiper-button-next1{right:0px;} #big-img .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #ff5e15} .pro-small-img .swiper-slide img{ transition: all 0.5s; border:2px solid rgba(255,255,255,0)} .pro-small-img .swiper-slide-thumb-active img{ opacity: 0.8; border:2px solid #fff} .proinfo-datil-title{} .proinfo-datil-title i svg{width:30px;height:30px; fill:#333333} .proinfo-datil-title span{ color:#333333; font-size:30px;} .proinfo-param{} .proinfo-param .proinfo-param-item .proinfo-xm{ font-size:16px; color:#323232; font-weight:bold;} .proinfo-param .proinfo-param-item .proinfo-value{ font-size:16px; color:#717171; } .proinfo-param-item .proinfo-xm{ width:20%} .proinfo-param-item .proinfo-value{ width:80%} .proinfo-param-item:nth-of-type(2n+1){ background: #f0f2f5} @media(max-width: 991.98px){ .big-product{ background: #f7f7f7;} .product-big-font:before{ position: absolute; content: ""; z-index: -1; background: #f7f7f7; top: 0; right:0%; width: 100%; height: 100%} .product-big-font{ width: 100%; } .product-big-img{ width: 100%;} .pro-nav-box{ font-size: 16px;} .pro-detail-title>p:nth-of-type(1){ font-size: 20px; color: #282828; line-height: 0.75; font-weight: bold;} .product-container>p:nth-of-type(2){ font-size:20px; color: #666666; font-weight: bold} .product-container>p:nth-of-type(3){ font-size: 14px;} .product-container .pro-btn-top{ width: 100%;} .pro-right-2ys p{ width: 100%;} .pro-nav-box{ font-size: 14px;} .pro-detail-title div p:nth-of-type(1){ font-size: 16px; margin-bottom: 0} .content strong{ font-size: 14px;} .product-container>p:nth-of-type(1){ font-size: 22px; } .product-container>p:nth-of-type(2){ font-size: 16px; } .pro-nav-box li{ flex:1} .pro-nav-box li.active{ background: #3466ce!important;} } /*模板核心实力*/ .hxsl-item{ background: #333333; border-radius: 1rem; overflow: hidden; } .hxsl-item .hxsl-title{ width:calc(100% - 50px)} .hxsl-item .hxsl-title p:nth-of-type(1){ color:#fff; font-size:24px;} .hxsl-item .hxsl-title p:nth-of-type(2){ color:rgba(255,255,255,0.5); font-size:14px; text-transform: uppercase; } .hxsl-item .hxsl-title .hxsl-font>i{ width:28px; height:2px; background: #fff; display: block } .hxsl-inco{ width:48px; height:48px;} .hxsl-inco i svg{fill:#fff; width:48px; height:48px;} .hxsl-desc{ font-size: 16px; line-height: 2; color:rgba(255,255,255,0.5); height:200px;} .hxsl-item,.hxsl-item *{ transition: all 0.5s} .hxsl-box{ position:relative;z-index: 999;} .hxsl-item:after{ position:absolute; content:''; width:100%; height: 100%; top:0;bottom:0;left:0;right:0; background: url("../img/youshi-bj.jpg") no-repeat left top; background-size: cover; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; clip-path: circle(10% at 50% 50%); opacity: 0; z-index: 5; border-radius: 1rem} .hxsl-item:hover:after{ opacity: 0.2; clip-path: circle(100% at 50% 50%); } .hxsl-item:hover .hxsl-title{ transform: translateY(10%) } .hxsl-item:hover .hxsl-desc{transform: translateY(5%) } @media(max-width: 991.98px){ .hxsl-desc{ height:auto;} } /*模板应用范围*/ .yyfw-item{ width:150px; height:150px; margin:0 auto; border-radius: 50%; background: #e4e9ec; position:relative; cursor:pointer; overflow: hidden; } .yyfw-item:after{ position:absolute; content:''; width:100%; height: 100%; top:0;bottom:0;left:0;right:0; background:#3160c4; background-size: cover; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; clip-path: circle(10% at 50% 50%); opacity: 0; z-index: 5} .yyfw-item:hover:after{ opacity: 1; clip-path: circle(100% at 50% 50%); } .yyfw-item:hover span{ position:relative; z-index: 999; color:#fff; transform: scale(0.95);} .yyfw-item:hover{ transform: translateY(10%);} .yyfw-item,.yyfw-item *{ transition: all 0.5s;} @media(max-width: 991.98px){ .yyfw-item{ width:100px; height:100px;} } /*产品详情优势*/ .adva-item{ width: 49%; background: #f8f8f8; transition: all 0.5s} .adva-inco{ width: 35%;} .adva-wrap{ width: 65%;} .adva-inco i { position: relative; width: 75px; height: 75px; border-radius: 50%; border: 1px solid #ee7612; background: #ee7612; transition: all 0.5s; } .adva-inco i svg { width: 40px; height: 40px; fill: #fff; transition: all 0.5s; } .adva-title p:nth-of-type(1){ text-transform: uppercase; font-size: 14px; color: #ee7612; margin: 0; } .adva-title p:nth-of-type(2){ font-size: 22px; color: #cc0000; margin: 0; } .adva-wrap{ font-size: 18px; color: #666;} .adva-item:hover{} .adva-item:hover i { background: rgba(237,108,0,0.5); border:1px solid rgba(237,108,0,0.5); } .adva-item:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.1);} .adva-item:hover i svg{width: 30px; height: 30px;} @media(max-width: 1299.98px){ .adva-inco i { width: 50px; height: 50px;} .adva-inco i svg {width: 20px; height: 20px;} .adva-title p:nth-of-type(2){ font-size: 18px; color: #cc0000; margin: 0; } .adva-inco{ width: 40%;} .adva-wrap{ width: 60%;} } @media(max-width: 1199.98px){ .adva-wrap{ font-size:14px; color: #666;} } @media(max-width: 991.98px){ .adva-item{ width: 100%;} .adva-inco i {position: relative;width: 40px;height: 40px;} .adva-inco i svg { width: 20px; height: 20px;} .adva-inco{ width: 50%;} .adva-wrap{ width: 50%; font-size: 14px;} .adva-title p:nth-of-type(2){ font-size: 16px;} } .prolist-k{ background: #f8f8f8; transition: all 0.5s} .prolist-wrap>p:nth-of-type(1){ font-size: 20px; color: #333; transition: all 0.5s} .prolist-wrap>div:nth-of-type(1){} .prolist-wrap>div:nth-of-type(1) span{ font-size: 16px; color: #999; transition: all 0.5s} .prolist-wrap>div:nth-of-type(1) i svg{ width: 25px; height: 25px; fill: #f999999; transition: all 0.5s} .prolist-k:hover{ background: #cc0000} .prolist-k:hover .prolist-wrap>p:nth-of-type(1){ color: #fff;} .prolist-k:hover .prolist-wrap>div:nth-of-type(1){ color: #fff;} .prolist-k:hover .prolist-wrap>div:nth-of-type(1) span{ color: #fff;} .prolist-k:hover .prolist-wrap>div:nth-of-type(1) i svg{ fill: #fff; transform: translateX(-100%)} .prolist-k img{ transition: all 0.5s} .prolist-k:hover img{ transform: scale(1.05)} .demo-honor-k.mask1{ transition: all 0.5s;background:#000;} .demo-honor-k.mask1 .honor-img img{ opacity: 0.25; } .swiper-slide-prev .demo-honor-k,.swiper-slide-next .demo-honor-k{ transform: scale(1); } #crcm-box .swiper-slide-active .demo-honor-k { transform: scale(1.25); position:relative; z-index: 5 } #crcm-box .swiper-slide-active .demo-honor-k.mask1 .honor-img img{ opacity: 1; } #crcm-box .swp-btn3{ position: absolute; top: 0;bottom: 0; z-index: 999; cursor: pointer;} #crcm-box .swp-btn3:hover i svg{ fill: #cc0000} #crcm-box .swp-btn3:hover span{ color: #cc0000; } #crcm-box .swiper-button-disabled.swp-btn3{ opacity: 0.4} #crcm-box .swp-btn3 i svg{ fill: #fff; width: 50px; height: 50px;} #crcm-box .swiper-button-next3.swp-btn3{ right:10%;} #crcm-box .swiper-button-prev3.swp-btn3 i svg{ transform: rotateX(-180deg) rotateZ(180deg)} #crcm-box .swiper-button-prev3.swp-btn3{ left:10%;} #crcm-box .swp-btn3 span{ font-size: 20px; color: #fff; text-transform: uppercase } #crcm-box .swiper-slide-prev .demo-honor-k.mask1 .honor-mask,#crcm-box .swiper-slide-next .demo-honor-k.mask1 .honor-mask{ opacity: 0} #crcm-box .swiper-slide-prev .demo-honor-k.mask1 .honor-img:after,#crcm-box .swiper-slide-next .demo-honor-k.mask1 .honor-img:after{ display: none} @media(max-width: 991.98){ #crcm-box .swp-btn3{ display: none;} #crcm-box .swiper-slide-active .demo-honor-k { transform: scale(1); position:relative; z-index: 5 } } /*产品楼层*/ .index-sub-address-content{ border-top: 1px solid rgba(255,255,255,0.25)} .index-sub-address-content>div>div:nth-of-type(1){} .index-sub-address-content div.main-title{ font-weight: bold; font-size: 18px; color: #fff} .index-sub-address-content div.main-title svg{ fill: #018d81} .index-sub-address-content .sub-nav li{ flex: 1; position: relative; text-align: center; height: 100%; display: flex; align-items: center;} .index-sub-address-content .sub-nav li a{ display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 16px; color: #fff;} .index-sub-address-content .sub-nav a:hover{ background:rgba(4,63,131,0.86); color: #fff;} .index-sub-address-content .sub-nav a.active{ background:rgba(4,63,131,0.86); color: #fff;} .index-sub-address-content .sub-nav li:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width: 1px; height:30%; background: #eaeaea; opacity: 0.5; right: 0; top: 0; bottom: 0; margin: auto;} .current-all{} .current-all i svg{ width: 18px; height: 18px; fill: #808080} .current-all span{ font-size: 14px; color: #808080} .current-all span a:hover{ color: #808080} .current-all a{ color: #808080} .current-all2{} .current-all2 i svg{ width: 18px; height: 18px; fill: rgba(0,0,0,0.5)} .current-all2 span{ font-size: 14px;color: rgba(0,0,0,0.5)} .current-all2 span a:hover{ color:#ee8128} .current-all2 a{ color: rgba(0,0,0,0.5)} .floor-title-all{ } .floor-title-all .floor_title_text a{ font-size: 36px; color: #414141; font-weight: bold} .floor-title-all>.floor-title-left{ width:80%} .floor_list{ width: 75%} .floor_list .floor-name-text{} .floor_list .floor-name-text a>span{ font-size: 16px; color: #414141; position: relative} .floor_list .floor-name-text a>span:after{ position: absolute; content: ""; bottom:0%; left: 0; height: 1px; background: #d8dce4; width: 100%;} .floor_list .floor-name-text a>span:before{ position: absolute; content: ""; right: 0; top:-20%; background: #0075c4; width: 5px; height: 5px; border-radius: 50%; transition: all 0.5s} .floor_list .floor-name-text:hover a>span:before{ transform: translateY(200%); opacity: 0} .floor-desc{ font-size: 14px; color: #999;} .pro-big-all-box{ position: relative; width: calc(100% / 1); background: #fff; overflow: hidden;} .prolist-more{} .prolist-more span{ color: #a8a8a8} .prolist-more i{ background: #0075c4; border-radius: 100%; display: block; padding: 0.3rem} .prolist-more i svg{ fill: #fff; width:13px; height: 13px;} .prolist-more span{ font-size: 14px;} .prolist-more i{ background: #0075c4;} .prolist-more:hover i{ background: #383f4b} .prolist-more:hover span{ color: #0075c4} .pro-font-text{ transition: all 0.5s} .pro-font-text p:nth-of-type(1){ font-size: 20px; color: #333333; font-weight: bold; text-align: center} .pro-font-text>div.pro-two-btn span{ width: calc(100%/2); font-size: 20px; color: #333333; border: 1px solid #cccccc; font-size: 14px; color: #999} .pro-font-text>div.pro-two-btn span:nth-of-type(2){border: 1px solid #0075c4;} .pro-font-text .btn-top i{ border: 2px solid #ccc; border-radius: 100%;} .pro-font-text .btn-top i svg{ fill: #ccc} .pro-font-text .btn-top span{ font-size: 14px; color:#fff} .pro-big-mask{ background: #0075c4; position: absolute;left: 0; top: 180%; transition: all 0.5s} .pro-big-mask p:nth-of-type(1){ color: #fff; font-size: 20px;} .pro-big-mask .pro-desc{ color: rgba(255,255,255,0.5); font-size: 14px;} .pro-big-mask .btn-top i{ border: 2px solid #fff; border-radius: 100%;} .pro-big-mask .btn-top i svg{ fill: #fff} .pro-big-mask .btn-top span{ font-size: 14px; color:#fff} .pro-big-mask>div.pro-two-btn span{ width: calc(100%/2); color: #fff; border: 1px solid #fff; font-size: 14px; color: #999; background:rgba(255,255,255,0.25)} .pro-big-mask>div.pro-two-btn span:nth-of-type(2){border: 1px solid #fff;} .pro-big-mask>div.pro-two-btn span a{ color: #fff} .pro-big-all-box:hover .pro-font-text{ transform: scale(1.05) translateY(50%)} .pro-big-all-box img{ transition: all 0.5s} .pro-big-all-box:hover img{transform: scale(1.05) } .pro-big-all-box:hover .pro-big-mask{ top: 0; left: 0;} .pro-big-all-box:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .pro-big-all-box:hover p:nth-of-type(1){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .pro-big-all-box:hover .pro-desc{ -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } .pro-big-all-box:hover .btn-top{ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .pro-big-all-box:hover .pro-two-btn { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; } .pro-big-all-box:hover .pro-two-btn span:nth-of-type(1){ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .pro-big-all-box:hover .pro-two-btn span:nth-of-type(2){ -webkit-animation-delay: .8s; -moz-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; } @media(max-width: 1399.98px) { .floor-title-all .floor_title_text a { font-size: 24px; color: #414141; font-weight: bold } } @media(max-width: 1299.98px) { .pro-big-mask>div.pro-two-btn span{ font-size: 12px;} } @media(max-width: 991.98px){ .floor-title-all .floor_title_text a{ font-size: 20px; color: #414141; font-weight: bold} .floor_list{ display: none} .prolist-more{ width: 50%} .pro-big-all-box:hover .pro-font-text{ transform: scale(1) translateY(0%)} .pro-big-mask{ display:block; opacity: 1; transform: translateY(100%); background: #0075c4; position: absolute; transition: all 0.5s} } /*公司简介*/ .company-title-all{ position: relative;} .company-title-all:after{position: absolute; content: "";left: 0; top:0; width: 100%; background: url("../img/company_dot.png") no-repeat left top; height: 45px; } .company-title-all:before{ position: absolute; content: attr(data-title); left: 40%; top: 00%; margin: auto; text-transform: uppercase; font-family: '庞门正道标题体'; font-size:120px; color: rgba(0,0,0,0.05); z-index: 0; font-weight: bold;} .company-title-all p{ margin-bottom: 0;} .company-big-box{ background: url("../img/about_bj.jpg") no-repeat bottom center; background-size: cover; } .company-big-bottom-box{ background: url("../img/about_bj2.jpg") no-repeat top center; background-size: cover; } .company-right-img-box{ position: relative;} .right-img2{ position: absolute; display: block; left: -2%; top: 0%; height: 112%; width: 140%;} .company-title-all{ position: relative} .company-title-all:after{ position: absolute; content: "";left: 0;} .company-title-all p:nth-of-type(1){ font-size: 38px; color: #333333; font-weight: bold;} .company-title-all p:nth-of-type(2){ font-size: 18px; color: #666666; } .company-num-item{ width: calc(100% / 4);} .company-num-bigbox .company-num-item >div>span{ border-radius: 50%; width: 70px; height: 70px; border:1px solid #004ca1; transition: all 0.5s;} .company-num-bigbox .company-num-item >div>span i svg{ width: 35px; height: 35px; fill: #004ca1;transition: all 0.5s;} .num-wrap p{ margin-bottom: 0;} .num-wrap p:nth-of-type(1){ line-height: 0.9} .num-wrap p:nth-of-type(1) span:nth-of-type(1){ font-size: 52px; font-weight: 200; letter-spacing: -0.25rem; color: #333; font-family: 'Bahnschrift';} .num-wrap p:nth-of-type(1) span:nth-of-type(2) { font-size: 16px; color: #666;} .num-wrap p:nth-of-type(2){ font-size: 16px; color: #333;} .company-num-bigbox .company-num-item:hover>div>span{ background: #004ca1;border-radius:0.5rem;} .company-num-item:hover>div span i svg{ fill: #fff;} .company-num-item:hover .num-wrap p:nth-of-type(1) span:nth-of-type(1){ color: #004ca1} .company-num-item>div{ transform: translateY(0%); transition: all 0.5s} .company-num-item:hover>div{ transform: translateY(10%)} @media(max-width: 991.98px){ .company-right-img-box{ position: relative;} .company-num-item{ width: calc(100% / 2);} .company-title-all p:nth-of-type(1){ font-size: 20px; color: #333333; font-weight: bold;} .company-title-all p:nth-of-type(2){ font-size: 14px; color: #666666; } .company-title-all:after{ display: none } .company-title-all:before{ left: 0%; top: -30%; font-size:40px; } .num-wrap p:nth-of-type(1) span:nth-of-type(1){ font-size: 30px; } } /*企业文化*/ .company-culture-big-box{ background: url("../img/culture_bj.jpg") no-repeat center top; background-size: cover;} .culture-item-warp{ background: rgba(0,76,161,0.85); border-right: 1px solid rgba(255,255,255,0.25); transition: all 0.5s} .culture-item-warp i svg{ width: 55px; height: 55px; fill: #fff;} .culture-item-warp p span{ position: relative; color: #fff; font-size: 24px;} .culture-item-warp p span:after{ position: absolute; content: ""; width: 25%; height: 2px; background: #fff;left: 0;right: 0; margin:auto; bottom: 0;} .culture-desc-font{ color:#fff; font-size: 16px;} .swiper-slide-active .culture-item-warp { background: rgba(0,0,0,0.2);} .swiper-slide-active .culture-item-warp .animated{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .swiper-slide-active .culture-item-warp i svg { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .swiper-slide-active .culture-item-warp p { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .swiper-slide-active .culture-desc-font { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } /*实力*/ .slide-bg { background-position: center; background-size: cover; background-repeat: no-repeat; height:700px; } .item-wrap{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: #ffffff; } .shili-three{ z-index: 9; position: absolute; bottom: 0; left: 0; bottom: 0; width: 100%; } .container.shili-three-nav{background:rgba(255,255,255,0.85); overflow: hidden; } .item-info{} .item-info .item-title{ font-size: 20px; color: #333; font-weight: bold;transition: all 0.5s} .item-info .item-desc{ font-size: 16px; line-height: 1.5; color: #666;transition: all 0.5s} .icon-wrap{ fill: #0075c4;width:55px;height: 55px;transition: all 0.5s} .item-wrap-nav{ position: relative; transition: all 0.5s } .item-wrap-nav:after{ position: absolute; content: ""; width: 1px; height: 50%; background: #c9c9c9; right: 0; top: 0; bottom: 0; margin: auto;} .gallery-thumbs .swiper-slide:nth-last-of-type(1) .item-wrap-nav:after{ width: 0} .three-left{ width: 85%} .three-right{ width: 15%; font-weight: bold; font-size: 18px; } .index-sljz-font{} .index-sljz-font p:nth-of-type(1){ font-size: 46px;} .index-sljz-font p:nth-of-type(2){ font-size: 16px; text-transform: uppercase;} .index-sljz-font div:nth-of-type(1){ font-size: 16px; } .index-sljz-num{ width: 520px;border:1px solid rgba(255,255,255,0.25)} .index-sljz-num>div{ width: calc(100% / 2)} .index-sljz-num>div>span:nth-of-type(1){ font-size: 30px; font-weight: bold;} .index-sljz-num>div:nth-of-type(1){ position: relative} .index-sljz-num>div:nth-of-type(1):after{ position: absolute; content: ""; width: 1px; height: 60%; background: rgba(255,255,255,0.5); top: 0; bottom: 0; margin: auto; right: 0} .index-sljz-num>div>span:nth-of-type(2){ font-size: 16px; } .item-wrap-nav:before{ position:absolute; content: ""; background: rgba(196,0,0,0.8); width: 100; height: 100%;transform-origin: bottom;transition: transform .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; } .swiper-slide.swiper-slide-thumb-active .item-wrap-nav:before{ background: rgba(196,0,0,1); content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; opacity: .9; transform: scaleY(0); transform-origin: bottom ; } .swiper-slide.swiper-slide-thumb-active .item-wrap-nav:before,.item-wrap-nav:hover:before{transform: scaleY(1); transform-origin:top center;} .item-wrap-nav:hover:before{ transform: scaleY(1);} .item-icon,.item-info{ position: relative; z-index: 9; transition: all 0.5s} .item-wrap-nav:hover{ background: #0075c4; } .item-wrap-nav:hover svg{ fill: #fff} .item-wrap-nav:hover .item-title{ color: #fff} .item-wrap-nav:hover .item-desc{ color: #fff} .swiper-slide.swiper-slide-thumb-active .item-wrap-nav:after{ background: #0075c4; } .swiper-slide.swiper-slide-thumb-active .item-wrap-nav svg{ fill: #fff} .swiper-slide.swiper-slide-thumb-active .item-title,.swiper-slide.swiper-slide-thumb-active .item-desc{ color: #fff} .item-wrap-nav:hover:after{ width: 0;} @media(max-width: 1199.98px){ .three-left{ width: 100%} } @media(max-width: 991.98px){ .index-sljz-font p:nth-of-type(1){ font-size: 20px;} .index-sljz-font p:nth-of-type(2){ font-size: 12px; text-transform: uppercase;} .index-sljz-font div:nth-of-type(1){ font-size: 12px; line-height:1.5 } .slide-bg { background-position: center; background-size: cover; background-repeat: no-repeat; height: 350px; } .index-sljz-num{ width: 80%;border:1px solid rgba(255,255,255,0.25)} .index-sljz-num>div>span:nth-of-type(1){ font-size: 16px; font-weight: bold;} .index-sljz-num>div>span:nth-of-type(2){ font-size: 14px; } .item-info .item-title{ font-size: 14px; color: #333; font-weight: bold;transition: all 0.5s} .item-info .item-desc{ font-size: 12px; line-height: 1.5; color: #666;transition: all 0.5s} } /*售后服务*/ .shfw-item{ border: 1px solid #e6e6e6; transition: all 0.5s; position: relative; transition: all 0.5s;} .shfw-item:before{ position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0;right: 0; bottom: 0; margin: auto; transform: scale(0); transition: all 0.5s; display: block; background:rgba(0,117,196,0) } .shft-content{ position: relative;} .shft-content>div:nth-of-type(1){} .shft-content>div:nth-of-type(1) i svg{ fill: #0075c4; transition: all 0.5s;} .shft-content>div:nth-of-type(1) .shft-title p{ margin: 0} .shft-content>div:nth-of-type(1) .shft-title p:nth-of-type(1){ font-size: 30px; color: #0075c4;line-height: 1.5; transition: all 0.5s;} .shft-content>div:nth-of-type(1) .shft-title p:nth-of-type(2){ font-size: 16px; color: #999999; text-transform: uppercase; } .shft-desc{ color: #666; font-size: 16px; line-height: 2; transition: all 0.5s;} .shfw-item:hover:before{ transform: scale(1);background:rgba(0,117,196,0.9) } .shfw-item:hover .shft-content>div:nth-of-type(1) i svg{ fill: #fff; } .shfw-item:hover .shft-content>div:nth-of-type(1) .shft-title p{ color: #fff; } .shfw-item:hover .shft-desc{ color: #fff; } @media(max-width: 991.98px){ .shft-content>div:nth-of-type(1) .shft-title p:nth-of-type(1){ font-size: 24px;} } .tixi-item{ width: 100%; transition: all 0.5s; overflow: hidden} .tixi-item>div:nth-of-type(1){ overflow: hidden} .tixi-font{ background: #f2f2f2; transition: all 0.5s} .tixi-font>div:nth-of-type(1){ color: #0e1620; font-size: 20px; font-weight: bold} .tixi-font>div:nth-of-type(1) span{ position: relative;} .tixi-font>div:nth-of-type(1) span:after{ position: absolute; content: ""; background: #1573d1; left: 0; bottom: 0; height: 1px; width: 10%; transition: all 0.5s; transform-origin: right center} .tixi-font>div:nth-of-type(2){ font-size: 14px; color: #646464} .tixi-item img{ transform: scale(1); transition: all 0.5s} .tixi-item:hover{} .tixi-item:hover img{ transform: scale(1.05)} .tixi-item:hover .tixi-font{ background: #1573d1;} .tixi-item:hover .tixi-font>div:nth-of-type(1){ color: #fff; } .tixi-item:hover .tixi-font>div:nth-of-type(1) span:after{ background: #fff; width:80%;transform-origin: left center} .tixi-item:hover .tixi-font>div:nth-of-type(2){ color: #fff} .jszc-item:before{position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0;right: 0; bottom: 0; margin: auto; transition: all 0.5s; display: block; background:rgba(0,0,0,0.5); z-index: 2; } .jszc-item:hover:before{ transform: scale(1); background:rgba(0,117,196,0);} .jszc-item{} .jszc-item:after{position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0;right: 0; bottom: 0; margin: auto; transform: scale(0); transition: all 0.5s; display: block; background:rgba(0,117,196,0) } .jszc-item .jszc-font-box{ position: absolute; left: 0; top: 0; right: 0; bottom:0; margin: auto; color: #fff; transition: all 0.5s} .jszc-item .jszc-font-box .jszc-icon{ position: relative; z-index: 9;} .jszc-item .jszc-font-box .jszc-icon i svg{ position: relative; z-index: 4; width: 70px; height: 70px; fill: #fff} .jszc-item .jszc-font-box .jszc-title{ font-size: 20px;position: relative; z-index: 2;} .jszc-item .jszc-font-box .jszc-desc{ font-size: 14px; line-height: 2rem;position: relative; z-index: 2;} .jszc-item:hover:after{ transform: scale(1); background:rgba(0,117,196,0.75);} .jszc-item:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .jszc-item:hover .jszc-font-box .jszc-icon i svg{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .jszc-item:hover .jszc-font-box .jszc-title{ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .jszc-item:hover .jszc-font-box .jszc-desc{ -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } @media(max-width: 991.98px){ .jszc-item .jszc-font-box .jszc-icon i svg{ position: relative; z-index: 4; width: 40px; height: 40px; fill: #fff} .shft-content>div:nth-of-type(1){ display: flex; align-items: center} .shft-content>div:nth-of-type(1) i svg{ width: 40px; height: 40px; } } /*生产设备*/ .scsb-item{ background: #fff; transition: all 0.5s} .case-item-box .scsb-item{ background: #f6f6f6; transition: all 0.5s} .scsb-font{ font-size: 16px; color: #666666; transition: all 0.5s} .scsb-item:hover{ background: #f6f6f6; box-shadow: 0 0 10px rgba(0,0,0,0.2)} .scsb-item:hover .scsb-font{ background: #fff} .bottom-font{} .bottom-font p:nth-of-type(1){ font-size: 16px; color: #666} .bottom-font p:nth-of-type(2){ font-size: 36px; color: #1573d1} .bottom-font>div:nth-of-type(1){ font-size: 36px; color: #1573d1} .bottom-btn{ width: 600px;} .bottom-btn div{ font-size: 16px; color: #666666; width: 48%; height: 60px; border-radius: 2rem; border: 1px solid #1573d1; position: relative;} .bottom-btn div:before{ position: absolute; content: "";width: 100%; height: 100%;background: #328ae3;left: 0; top: 0; transition: transform 0.5s; border-radius: 2rem; transform: scaleX(0);transform-origin: center center;} .bottom-btn div:nth-of-type(2){ background: #1573d1} .bottom-btn div span{ position: relative; z-index: 2} .bottom-btn div:nth-of-type(2) a,.bottom-btn div:hover span{ color: #fff} .bottom-btn div:hover:before{ transform: scaleX(1);transform-origin: center center;} @media(max-width: 991.98px){ .bottom-btn{ width: 100%;} .bottom-btn div{ width: 90%} .bottom-font p:nth-of-type(2){ font-size: 20px; color: #1573d1} .bottom-font>div:nth-of-type(1){ font-size: 20px; color: #1573d1} } /*人才理念*/ .tixi-font2{ background: #f2f2f2; transition: all 0.5s} .tixi-font2>div:nth-of-type(1){ color: #3e3e3e; font-size: 24px; } .tixi-font2>div:nth-of-type(1) span{ position: relative;} .tixi-font2>div:nth-of-type(1) span:after{ position: absolute; content: ""; background: #b8b8b8; left: 0; bottom: 0; height: 1px; width: 20%; transition: all 0.5s; transform-origin: right center} .tixi-font2>div:nth-of-type(2){ font-size: 16px; color: #666; line-height: 2;} .tixi-item:hover img{ transform: scale(1.05)} .tixi-item:hover .tixi-font2{ background: #1573d1;} .tixi-item:hover .tixi-font2>div:nth-of-type(1){ color: #fff; } .tixi-item:hover .tixi-font2>div:nth-of-type(1) span:after{ background: #fff; width:80%;transform-origin: left center} .tixi-item:hover .tixi-font2>div:nth-of-type(2){ color: #fff} /*福利待遇*/ .fldy-item{} .fldy-item .fldy-icon{ background: #f8f8f8} .fldy-item .fldy-icon i svg{ width: 85px; height: 85px; fill: #333333} .fldy-icon i{ position: relative} .fldy-icon i:before{ content:'';width:60px;height:60px;background:#1573d1;border-radius:50%;top:-5%;left:40%;position:absolute;z-index:0;} .fldy-icon i svg{ position:relative; z-index: 2} .fldy-font{} .fldy-font p{ font-size: 18px; color: #040201;} .fldy-desc{ font-size: 14px; color: #666666; line-height: 2} .fldy-item:hover .fldy-icon i:before { top:-0%;left:0%;transform-origin:25px 25px; animation: whirl 1.5s linear infinite;} .rczp-bigbox{ background: url("../img/rczp_bj.png") no-repeat center bottom #f7f7f7; } .btn-job{ background: #1573d1; border-radius: 2rem; height: 55px; width: 210px;position: relative;} .btn-job a span{ position: relative; font-size: 16px; color: #fff;} .btn-job:before{ position: absolute; content: "";width: 100%; height: 100%;background: #328ae3;left: 0; top: 0; transition: transform 0.5s; border-radius: 2rem; transform: scaleX(0);transform-origin: center center;} .btn-job:hover:before{ transform: scaleX(1);transform-origin: center center;} @keyframes whirl{ 100%{ transform: rotate(1turn);} } @media(max-width: 991.98px){ .fldy-item .fldy-icon i svg{ width: 45px; height: 45px; fill: #333333} .fldy-icon i:before{ width:20px;height:20px; ;top:-5%;left:40%;} } /*公司简介综合页面*/ .zy-flash{ height: 580px;} .zy-flash-about{ background: url("../img/zy_banner.jpg") no-repeat center top; background-size: cover;} .zy-flash-cp{ background: url("../flash/zy_cp.jpg") no-repeat center top; background-size: cover;} .zy-flash-bpbj{ background: url("../flash/zy_bpbj.jpg") no-repeat center top; background-size: cover;} .zy-flash-case{ background: url("../flash/zy_case.jpg") no-repeat center top; background-size: cover;} .zy-flash-contact{ background: url("../flash/zy_contact.jpg") no-repeat center top; background-size: cover;} .zy-flash-news{ background: url("../flash/zy_news.jpg") no-repeat center top; background-size: cover;} .zy-flash-rlzy{ background: url("../flash/zy_rlzy.jpg") no-repeat center top; background-size: cover;} .zy-flash-yxservice{ background: url("../flash/zy_yxservice.jpg") no-repeat center top; background-size: cover;} .zy-flash-proinfo{ background-size: cover;} .zy-flash-font{ color: #fff; position:relative} .zy-flash-font p:nth-of-type(1){ font-size: 36px; position:relative ; z-index: 999;} .zy-flash-font p:nth-of-type(1):before{ position: absolute; content: attr(data-title); color: transparent; -webkit-text-stroke: 1px #fff; bottom:20%;left:0; text-transform: uppercase; font-size:60px; opacity: 0.25; font-family: 'Avian'; font-weight:bold; z-index:99; } .zy-flash-font p:nth-of-type(2){ font-size: 24px; font-weight: 100; z-index: 999;} .zy-flash-font i{ display: block; width:30px; height:2px; background: #fff; width:36px; height:2px; background: #fff; position:relative; z-index: 999;} .zy-flash-font:after{ position:absolute; content:''; width:190px; height:190px; border-radius: 50%; background: rgba(255,255,0,0.3); left:-80px;top:-10%; bottom:0; margin:auto; } .zy-flash-box{ height: 450px; margin-top: 77px;} .zy-flash-font p:nth-of-type(1).proinfo-all-font{ font-size: 36px; color: #ffffff!important;-webkit-text-stroke:0px #fff;} @media(max-width: 991.98px){ .zy-flash{ height: 300px;} .zy-flash-font p:nth-of-type(1){ font-size: 20px;} .zy-flash-font p:nth-of-type(2){ font-size: 14px;} .zy-flash-font:after{ display: none} .zy-flash-font p:nth-of-type(1):before{ font-size:30px;} } /*公司简介模块*/ .sub-about-title>div:nth-of-type(1){ width: 25% font-size: 36px; color: #333333; font-weight: bold} .sub-about-title>div:nth-of-type(1) span{ position: relative} .sub-about-title>div:nth-of-type(1) span:after{ position: absolute; content:"";left: 0; bottom: 0; width: 50%; height: 2px; background: #0075c4;} .sub-about-title>div:nth-of-type(2){ width: 75%; font-size: 16px; color: #646464; line-height: 2} .company-year{ position: relative} .company-year:before{ position: absolute; content:attr(data-title); font-size: 380px; color: #f6f6f6; font-style: italic; font-weight: bold; left: 0; right: 0; top: 0; bottom: 0; margin: auto; line-height: 380px; font-family:numfont2;} .about-num-item2{ width: calc(100% / 3); position: relative; z-index: 2} .about-num-item2>div>div:nth-of-type(1){ line-height: 1} .about-num-item2>div>div:nth-of-type(1) span{ font-size: 60px; line-height:1.3; font-family: Bahnschrift; font-weight: bold; position: relative; color: #333333; transition: all 0.5s} .about-num-item2>div>div:nth-of-type(1) span:after{ position: absolute; content: attr(data-title); color: #333333; font-size: 36px; top: 0%} .about-num-item2>div>div:nth-of-type(2){ line-height: 1; font-size: 16px; color: #575757} .company-font p:nth-child(1){ font-size: 36px; color: #ccc; font-family: numfont; font-weight: bold; margin-bottom: 0; line-height: 1} .company-desc{ font-size: 16px; color: #777; line-height: 2} .company-font3{ border-bottom: 1px solid rgba(255,255,255,0.5);} .sub-about-title3>div:nth-of-type(1){ font-size: 36px; color: #333333; font-weight: bold} .sub-about-title3>div:nth-of-type(1) span{ position: relative} .sub-about-title3>div:nth-of-type(1) span:after{ position: absolute; content:"";left: 0; bottom: 0; width: 50%; height: 2px; background: #fff;} .sub-about-title3>div:nth-of-type(2){font-size: 16px; color: #333333; } @media(max-width: 1599.98px){ .company-year:before{ font-size: 300px;} } @media(max-width: 1299.98px){ .company-year:before{ font-size: 250px;} } @media(max-width: 1199.98px){ .company-year:before{ display: none;} } @media(max-width: 991.98px){ .company-year:before{ display: none; font-size: 18px;} .about-num-item2>div>div:nth-of-type(1) span{ font-size: 30px; } .about-num-item2>div>div:nth-of-type(2){ line-height: 1; font-size: 12px; } .sub-about-title>div:nth-of-type(1){ width: 100%; font-size: 20px; color: #333333; font-weight: bold} .sub-about-title>div:nth-of-type(1) span:after{ position: absolute; content:"";left: 0; bottom:-20%; width: 50%; height: 2px; background: #0075c4;} .sub-about-title>div:nth-of-type(2){ width: 100%; font-size: 14px;} .sub-about-title3>div:nth-of-type(1){ font-size: 20px;} .sub-about-title>div:nth-of-type(1) span:after{ display: none;} } /*企业文化*/ .company-culture{ background: url("../img/about-culture.jpg") no-repeat center top fixed; background-size:cover;} .sub-about-title2>div:nth-of-type(1){ font-size: 36px; color: #333333; font-weight: bold} .sub-about-title2>div:nth-of-type(1) span{ position: relative} .sub-about-title2>div:nth-of-type(1) span:after{ position: absolute; content:"";left: 0; right: 0; bottom:-5%; margin: auto; width: 50%; height: 2px; background: #0075c4;} .sub-about-title2>p:nth-of-type(1){ font-size: 16px; color: #646464; line-height: 2} .company-culture-item{ position: relative;; border: 1px #fff solid; width:100%; background: rgba(0,117,196,0.5); border-radius: 0 2rem; overflow: hidden; padding: 5%; transition: all 0.5s} .culture-font{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition: all 0.5s; } .culture-font>div:nth-of-type(1){ position: relative; } .culture-font>div:nth-of-type(1):after{ position: absolute; content:"";width: 1px; height: 60%; left:4%; background: #fff;} .culture-font p:nth-of-type(1){ font-size: 24px; font-weight: bold; color: #fff } .culture-font div:nth-of-type(1){ font-size: 16px; color: #fff; line-height: 2 } .culture-mask{ transform: translateY(150%) scale(1.25); opacity: 1; transition: all 0.5s; } .culture-mask i svg{fill: #fff} .culture-mask p:nth-of-type(1){ font-size: 24px; font-weight: bold; color: #fff;} .culture-mask div:nth-of-type(1){ font-size: 16px; line-height:2;color: #fff;} .company-culture-item:hover .culture-font{ transform: scale(1.05); opacity: 0} .company-culture-item:hover .culture-mask{ transform: translateY(0); opacity:1} .company-culture-item:hover{ border: 1px solid rgba(0,117,196,0.5);} .company-culture-item:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .company-culture-item:hover .culture-mask i{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .company-culture-item:hover .culture-mask p:nth-of-type(1){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .company-culture-item:hover .culture-mask div:nth-of-type(1){ -webkit-animation-delay: .4s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .company-org-title{ border: 1px solid #e7e7e7; height: 205px; width: 205px; border-radius: 100%; position: relative; } .company-org-title:after { position: absolute; content: ""; width: 100%; height: 100%; background: #4fa4dd; border-radius: 100%; animation:round 2s infinite; -webkit-animation:round 2s infinite; /* Safari 和 Chrome */ } .company-org-title:before { position: absolute; content: ""; width: 50%; height: 50%; background: #84bde4; border-radius: 100%; animation:round2 2s infinite; -webkit-animation:round2 2s infinite; /* Safari 和 Chrome */ } @keyframes round { 0% { width: 0%; height: 0%; opacity: 1; } 100% { width: 120%; height: 120%; opacity: 0; } } @keyframes round2 { 0% { width: 50%; height: 50%; opacity: 1; } 100% { width: 120%; height: 120%; opacity: 0; } } .company-org-title>div:nth-of-type(1){ position: relative; z-index: 2; background: #0075c4; border-radius: 100%; width: 160px; height: 160px;} .company-org-title>div:nth-of-type(1) p{ position: relative; z-index: 2; text-transform: uppercase; font-size: 16px;} .company-org-title>div:nth-of-type(1) span{ position: relative; z-index: 2; font-weight: bold; font-size: 24px;} @media(max-width: 991.98px) { .sub-about-title2>div:nth-of-type(1){ font-size: 20px; color: #333333; font-weight: bold} .sub-about-title2>div:nth-of-type(1) span:after{ position: absolute; content:"";left: 0; right: 0; bottom:0%; margin: auto; width:30%; height: 2px; background: #0075c4;} .sub-about-title2>p:nth-of-type(1){ padding-top: 4%; text-align: center; font-size: 14px;} .culture-font>div:nth-of-type(1):after{ width: 0;height: 0; display: none; opacity: 0} .culture-font p:nth-of-type(1){ font-size: 18px; } .culture-font div:nth-of-type(1){ font-size: 14px;} .culture-mask p:nth-of-type(1){ font-size: 18px; font-weight: bold; color: #fff;} .culture-mask div:nth-of-type(1){ font-size: 12px; line-height:2;color: #fff;} } .culture-big-title{} .culture-big-title>span:nth-of-type(1){ font-size: 36px; color: #333333; font-weight: bold} .culture-big-title>span:nth-of-type(2){ font-size: 36px; color: #0075c4} .culture-big-title>div:nth-of-type(1){} .culture-big-title>div:nth-of-type(1) span{ font-size: 16px; color: #666} .culture-big-title>div:nth-of-type(1) span b{ font-size: 16px; color: #333333; font-weight: bold} @media(max-width: 1199.98px){ .culture-big-title>span:nth-of-type(1){ font-size: 20px;} .culture-big-title>span:nth-of-type(2) { display: none; } .culture-big-title>div:nth-of-type(1){ display: none } } /*企业文化模块*/ .culture-big-item{ border-radius: 1rem; overflow: hidden; position: relative} .culture-big-item:before{ position: absolute; content: ""; top: 0;right: 0;bottom:0;left: 0; margin: auto; background:#0075c4; z-index: -1;transform: scale(0); transition: all 0.5s;border-radius: 1rem;} .culture-big-item:hover:before{ transform: scale(1)} .culture-big-item .culture-icon{} .culture-big-item .culture-icon svg{ width: 70px; height: 70px; fill: #000000} .culture-big-item .culture-font2{} .culture-big-item .culture-font2 p:nth-of-type(1){ font-size: 24px; color: #131313;} .culture-font2 .culture-desc{ border-top:1px dashed #ccc; font-size: 16px; color: #676767} .culture-big-item:hover .culture-icon svg{ fill: #fff} .culture-big-item:hover .culture-font2 p:nth-of-type(1){ color: #fff} .culture-big-item:hover .culture-font2 .culture-desc{ color: #fff} .culture-big-item:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .culture-big-item:hover .culture-font2 .culture-icon svg{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .culture-big-item:hover .culture-font2 p:nth-of-type(1){ -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } .culture-big-item:hover .culture-font2 .culture-desc{ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .culture-jingshen{ background: url("../img/js.jpg") no-repeat center top fixed;} .js-item{ position: relative;overflow: hidden;} .js-item:before{ position: absolute; content: "";left:0;top: 0;bottom:0;right: 0; margin: auto; background: rgba(32,119,191,0.9); width: 100%; height: 100%; transform: scaleY(0) ; transition: transform 0.5s; transform-origin: bottom center} .js-item:hover:before{ transform: scaleY(1);transform-origin: left center} .js-item .js-font{ position: absolute; top: 0; bottom: 0;left: 0; right: 0; margin: auto; transition: all 0.5s;} .js-item .js-font span{ color: #fff} .js-item .js-font2{ transform: translateY(-100%); position: absolute; top: 0; bottom: 0;left: 0; right: 0; margin: auto} .js-item:hover .js-font{ opacity: 0; transform: translateY(-10%) scale(1.05);} .js-item:hover .js-font2{ opacity: 1; transform: translateY(0%) scale(1);} .js-font2{} .js-font2 p:nth-of-type(1){ font-size: 24px; color: #fff} .js-font2 .js-desc{ font-size: 16px; color: #fff; line-height: 2; text-align: center} .js-item:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .js-item:hover .js-font2 p:nth-of-type(1){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .js-item:hover .js-font2 .js-desc{ -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } @media(max-width: 1199.98px){ .culture-big-item .culture-icon svg{ width: 40px; height: 40px; fill: #000000} .culture-big-item .culture-font2 p:nth-of-type(1){ font-size: 18px; color: #131313;} .culture-font2 .culture-desc{ font-size: 14px; } } /*产品详情模块*/ .proinfo-shuiyin{ position: absolute;left: 0; top: 0; width: 100%} /*资质荣誉模块*/ .company-honor-big-all{ background: url("../img/about-honor.jpg") no-repeat center top fixed;background-size: cover} .about-num-box3{ width: 90%} .about-num-item3{ width: calc(100% / 2)} .about-num-item3>div:nth-of-type(1){ line-height: 1} .about-num-item3>div:nth-of-type(1) span{ font-size: 60px; line-height:1.3; font-family: Bahnschrift; position: relative; color: #fff; transition: all 0.5s} .about-num-item3>div:nth-of-type(1) span:after{ position: absolute; content: attr(data-title); color: #fff; font-size: 48px; bottom: 0%; top: 0; margin: auto;} .about-num-item3>div>div:nth-of-type(2){ line-height: 1; font-size: 14px; color: #fff} .company-honor-btn{} .company-honor-btn .honor-item{ width: 40%; border-radius:0 2rem 0;background: #fff; font-size: 16px; transition: all 0.5s} .company-honor-btn .honor-item:hover{ background: #0075c4; color: #fff;} .honor-item:hover a{ color: #fff;} .honor-all-content{ position: absolute;left: 0; width:250%; background: url("../img/about-zzry-bj.png") no-repeat left center;border-radius: 2rem; } .honor-content-font{ position: relative;} .honor-content-font:before{ position: absolute;content: "";left: 0; bottom: 0; height: 100%; width:40%; background: rgba(0,117,196,0.75); border-radius: 0 0 0 2rem;} .honor-content-font p{ position: relative; z-index: 2; line-height: 1.5rem;} .honor-content-font p:nth-of-type(1){ font-weight: bold; color: #fff} .honor-content-font p:nth-of-type(n+2){ font-size: 16px; color: #fff; line-height: 1.2} .honor-content-font p a{ color: #fff} .honor-content-font p a:hover{ color: rgba(255,255,255,0.5)} @media(max-width: 991.98px){ .about-num-item3>div:nth-of-type(1) span{ font-size: 30px;} .honor-content-font:before{ width:100%;} .about-num-item3>div:nth-of-type(1) span:after{ position: absolute; content: attr(data-title); color: #fff; font-size: 28px;} .honor-all-content{ position: inherit;left: 0; width:100%; background: url("../img/about-zzry-bj.png") no-repeat left center;border-radius: 2rem; } } .cqsj-box{ overflow: hidden} .cqsj-box .cqsj-font{ position:absolute;left: 0; bottom: 0; width: 100%; background-color: #0075c4; transform: translateY(100%); transition: all 0.5s} .cqsj-box .cqsj-font>span:nth-of-type(1){ font-size: 18px; color: #fff;} .cqsj-box .cqsj-font>div:nth-of-type(1)>span{ font-size: 14px; color: #fff;} .cqsj-box:hover{} .cqsj-box:hover .cqsj-font{transform: scale(1.0) translateY(0);} .cqsj-box img{ transform: scale(1); transition: all 0.5s} .cqsj-box:hover img{ transform: scale(1.05)} .sub-nav-box-all{ position: absolute; bottom: 0; width: 100%; border-top: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25);} .sub-home i svg{ width: 32px; height: 32px; fill: #fff} .sub-home span{ font-size: 14px;} .sub-nav-box-all .sub-name-item,.sub-home{border-right: 1px solid rgba(255,255,255,0.25);} .sub-home{border-left: 1px solid rgba(255,255,255,0.25); transition: all 0.5s} .sub-nav-box-all .sub-name-item a{ font-size: 16px; color: #fff} .sub-nav-all .sub-name-item{ text-align: center} .sub-nav-box-all .sub-name-item,.sub-home{ position: relative;} .sub-nav-box-all .sub-name-item:before { position: absolute; content: ""; background:rgba(196,0,0,0.4); width: 100%; height: 100%; transform: scaleY(0); transform-origin: top center; transition: transform 0.5s; } .sub-nav-box-all .sub-name-item a { position: relative;} .sub-nav-box-all .sub-name-item:hover:before { transform: scaleY(1); transform-origin: bottom center;} .sub-home:hover{ background: #0075c4;} .sub-nav-box-all .sub-name-item.active{background:rgba(196,0,0,0.4);} .company-one-box{ position: relative; overflow: hidden;} .company-one-box:before{ position: absolute; content: ""; display: block; left:-50px; top: -60px; border-radius: 50%; height: 480px; width: 480px; margin: 0; background-image: radial-gradient(#fff, #fdf8f8, #fdf6f6); } .company-one-box:after{ position: absolute; content: ""; display: block; border-radius: 50%; height: 160px; width: 160px; left:550px; top: 100px; margin: 0; background-image: radial-gradient(#fff, #fdf8f8, #fdf6f6); } .company-one-box .container{ position: relative; z-index: 2;} .company-title{} .company-title p:nth-of-type(1){ line-height: 1; font-size: 50px; color: #0075c4; font-family: 'Bahnschrift'; text-transform: uppercase; font-weight: 200;} .company-title p:nth-of-type(2){ font-size: 32px; color: #333333} .company-img{ position: relative; width: 100%; height: 100%} .company-img:after{ position: absolute; content: ""; background: url("../img/about_big.jpg") no-repeat top left; width: 128%; height: 100%;left:2%;} .company-three-item{ background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1)} .item-logo{position: absolute; top: -9px; right: 35px; background: url("../img/company_culture_bj.png") no-repeat left top; width: 80px;height: 76px; background-size: 100%; } .company-three-item .item-title{ font-size: 24px; color: #333;} .company-three-item .item-desc{ color: rgba(102,102,102,0.6); font-size: 16px;} .company-three-item .item-title svg{ width: 40px; height: 40px; fill: #0075c4;} .company-three-item .item-title i{ position: relative; margin-right: 3%} .company-three-item .item-title i:after{ position: absolute; content: ""; background: #0075c4; width: 100%; height: 2px; left: 0;right: 0; bottom: -40%;} @media(max-width: 1499.98px){ .company-three-item .item-title{ font-size: 20px; color: #333;} .company-img:after{ position: absolute; content: ""; background: url("../img/about_big.jpg") no-repeat top left; width: 110%; height: 100%;left:0%; background-size: 120%} } @media(max-width: 1399.98px){ .company-three-item .item-title{ font-size: 20px; color: #333;} .item-logo{position: absolute; top: -9px; right: 10%; background: url("../img/company_culture_bj.png") no-repeat left top; width: 0px;height: 0px; background-size: 90%; display: none; } } @media(max-width: 1199.98px){ .company-three-item{ width: calc(100%/1); margin-bottom: 15px;} .item-logo span img{ width: 20px;} .company-three-item .item-title{ font-size: 16px; color: #333;} .company-three-item .item-desc{ color: #666; font-size: 14px;} .company-title p:nth-of-type(1){ line-height: 1; font-size: 30px; font-family: Arial} .company-title p:nth-of-type(2){ font-size: 24px} .company-img{ position: relative; width: 100%; height: 350px} .company-img:after{ position: absolute; content: ""; background: url("../img/about_big.jpg") no-repeat bottom center; width: 100%; height: 100%;left:0%; background-size: 100%} } @media(max-width: 991.98px){ .company-img{ position: relative; width: 100%; height: 200px} .company-img:after{ position: absolute; content: ""; background: url("../img/about_big.jpg") no-repeat bottom center; background-size: 100%} } @media (max-width: 575.98px) { .zy-flash-box{ height: 300px; margin-top: 60px;} } /*发展历程*/ .about-history{ background: url("../img/history_bj.jpg") no-repeat center top fixed #124294; background-size: cover} .history-img img{ border-radius:0 3rem; box-shadow: 0 0 20px rgba(0,0,0,0.25);} .history-font p:nth-of-type(1) span{ position: relative; font-family: numfont; font-size: 60px; font-weight: bold} .history-font p:nth-of-type(1) span:after{ position:absolute; content: ""; border-bottom: 2px solid #fff; width: 50%; height: 2px; left: 0; bottom: -40%;} .history-font .hist-desc{ font-size: 16px; color: #fff; line-height: 2} .hist-year-item{ position: relative} .hist-year-item>span:nth-of-type(1){ line-height: 0.3; width: 100%; text-align: center; position: absolute; top: 0;left: 0; right: 0; margin: auto; font-family: numfont; font-size: 24px; color: rgba(255,255,255,0.5);} .hist-year-item>div:nth-of-type(1){ display: flex; align-items: center; justify-content: center; position:absolute; content: ""; left: 0; top: 0; bottom: 0; right: 0; margin: auto;} .hist-year-item>div:nth-of-type(1) i{ display: block; width:20px; height: 20px; border-radius: 100%; background-color: transparent; border:6px solid #fff; transition: all 0.5s} .hist-year-item>div:nth-of-type(1)>span{ position: relative; display: block; border-radius: 100%; width: 34px; height: 34px; border: 1px dotted rgba(255,255,255,0); background-color: transparent; } .swiper-slide-thumb-active .hist-year-item{ transition: all 0.5s} .hist-year-btn{ position: relative; width: 100%;} .hist-year-btn:before{ position: absolute; content: ""; background: rgba(255,255,255,0.25); width: 100%; height: 1px; left: 0;right: 0; top: 0; bottom:0; margin: auto;} .swiper-slide-thumb-active .hist-year-item>span:nth-of-type(1){ font-family: Avian; font-size: 30px; color: #fff; font-weight: bold;} .swiper-slide-thumb-active .hist-year-item>div:nth-of-type(1) i{ transform: scale(1.35)} .swiper-slide-thumb-active .hist-year-item>div:nth-of-type(1)>span{ border: 1px dotted rgba(255,255,255,1); transform: scale(1.05); opacity: 1} @media(max-width: 991.98px){ .history-font p:nth-of-type(1) span{ position: relative; font-family: numfont; font-size: 30px; font-weight: bold} } /*产品综合页面*/ .floor_title{ border-right: 1px dashed #ccc } .floor_title p{font-size: 24px; color: #0075c4; font-weight: bold} .floor_title div{font-size: 16px; color: #666; line-height: 2} .pro-mess svg{ width: 30px; height: 30px; fill: #0075c4;} .pro-mess p:nth-of-type(1){ font-size: 20px; font-weight: bold; color: #666} .pro-mess div:nth-of-type(1){ font-size: 16px; color: #666} .floor_title span:nth-of-type(1){ position: relative} .floor_title span:nth-of-type(1):after{ position: absolute; content: ""; bottom:-60%; height: 2px; left: 0; width: 30%; background: #0075c4;} .pro_floor .line{ border-top: 1px dashed #ccc } .pro_floor .pro-item-nav{ width: 75%;} @media(max-width: 991.98px){ .floor_title{ border-right: 0px dashed #fff } .pro_floor .pro-item-nav{ width:50%;} } /*公司简介-资质荣誉*/ .company-honor{ background: url("../img/company_honor.jpg") no-repeat center top; background-size: cover;} .honor-nav{} .honor-lists .item{ padding: 0.5rem 0;} .honor-lists .item>div>i:nth-of-type(1){font-size: 18px; font-style: italic; color: #aaaaaa; font-family: 'arial'; transition: all 0.5s } .honor-lists .item>div span:nth-of-type(1){ font-size: 18px; color: #aaa;} .honor-lists .item>b{ border:4px solid #a7a7a8; border-radius: 100%; width: 18px; height: 18px; background: none;position: relative; transition: all 0.5s} .honor-lists .item.active{} .honor-lists .item.active>div>i:nth-of-type(1),.honor-lists .item:hover>div>i:nth-of-type(1){ color: #fff} .honor-lists .item.active>div>span:nth-of-type(1){ color: #fff; font-weight: bold} .honor-lists .item>b:after{ position: absolute; content: ""; width: 1px; height: 400%; left: 0; right: 0; margin: auto; border-left: 1px dashed #aaaaaa;top:100%;} .honor-lists .item.active>b,.honor-lists .item:hover>b{ border:4px solid #0075c4; } .honor-lists .item:nth-last-of-type(1)>b:after{ display: none} /*公司简介模块*/ .company-item{ font-size: 16px; color: #333; width: calc(100% / 4)} .company-item span i svg{ width: 40px; height: 40px; fill: #0075c4} .company-box{ background-image: linear-gradient(to bottom,#f9fafc 5%,#fcfdff); position: relative;} .company-box:after{ position: absolute; content: ""; background: url("../img/index_about_right_bj.png") no-repeat center bottom; width: 100%; height:150px; left: 0; right: 0; bottom: 0; margin: auto;} .company-wrap{ position: relative; z-index: 9} .company-wrap:before{ position: absolute; content: ""; width: 20%; height: 100%; border: 10px solid #edeef1;left: 0; right: 0; top:0; bottom: 0; margin: auto;} .company-wrap p:nth-of-type(1){ font-size: 16px; color: #0075c4; } .company-wrap p:nth-of-type(2){ font-size: 52px; color: #0075c4; text-transform: uppercase; font-weight: bold;background: #fafbfd; position: relative;} .company-wrap p:nth-of-type(3){ font-size: 18px; color: #333333;background:#fafbfd;position: relative;} .company-wrap div:nth-of-type(1){ position: relative; width: 70px; height: 70px; border-radius: 100%; background: #0075c4; font-size: 14px; border: 5px solid #f1cacc;} .company-wrap div:nth-of-type(1):after{ position: absolute; content: ""; background:#0d3983; width: 100%; height: 100%; border-radius: 50%; transform: scale(0); transition: all 0.5s;} .company-wrap div:nth-of-type(1):hover:after{transform: scale(1);} .company-wrap div:nth-of-type(1) a{ position: relative; z-index: 99} .index-company-font>p:nth-of-type(1){ font-size: 32px; color: #0075c4;} .index-company-font .company-desc{ font-size: 16px;color: #666; width: 75%} .company-nav{ width: 65%} .company-item:hover svg{ fill: #02276a} @media(max-width: 1199.98px){ .index-company-font .company-desc{ font-size: 16px;color: #666; width: 100%} .company-nav{ width: 100%} .company-box:after{ position: absolute; width: 100%; height:0px; left: 0; right: 0; bottom: 0; margin: auto;} .company-wrap p:nth-of-type(2){ font-size: 30px; color: #0075c4; text-transform: uppercase; font-weight: bold;background: #fafbfd; position: relative;} .company-wrap:before{ position: inherit; display: none } .index-company-font>p:nth-of-type(1) { font-size: 20px; color: #0075c4; } } /*产品中心*/ .index-title-all{} .index-title-all>div:nth-of-type(1) span:nth-of-type(1){ position: relative; font-size: 30px; font-weight: bold; color: #333;} .index-title-all>div:nth-of-type(1) span:nth-of-type(1):after{position: absolute; content: ""; background: #aeaeae; width: 1px; height: 70%; right: 0; top: 0; bottom: 0; margin: auto;} .index-title-all>div:nth-of-type(1) span:nth-of-type(2){ font-size: 18px; color: #0d3983; text-transform: uppercase;font-weight:bold;} .index-title-all>div:nth-of-type(2){ font-size: 16px; color: #7b7b7b;} .index-title-all>div:nth-of-type(2) i{ background: #0d3983;width: 20px; height: 20px; border-radius: 100%;} .index-title-all>div:nth-of-type(2) i svg{ width: 12px; height:12px; fill: #fff;transition: all 0.5s } .index-title-all>div:nth-of-type(2) a{ color: #7b7b7b; font-size: 16px; transition: all 0.5s} .index-title-all>div:nth-of-type(2):hover a i{ background: #c40d2e} .index-title-all>div:nth-of-type(2):hover a{color: #c40d2e} .index-title-all>div:nth-of-type(2):hover a i svg{ transform: rotate(90deg); } .index-title-all2{} .index-title-all2>div:nth-of-type(1) span:nth-of-type(1){ color: #0e4b99; font-weight: bold} .index-title-all2>div:nth-of-type(1) span:nth-of-type(2){ color: #333; font-size: 16px; text-transform: uppercase;} @media(max-width: 991.98px){ .index-title-all>div:nth-of-type(1) span:nth-of-type(1){ font-size: 20px; } .index-title-all>div:nth-of-type(1) span:nth-of-type(2){ display: none;} .index-title-all>div:nth-of-type(1) span:nth-of-type(1):after{position: absolute; content: ""; background: #aeaeae; width: 0px; display: none; } } .company-name{ font-size: 36px; color: #333; position: relative;} .company-name b{ color: #c02140;} .company-name span{ position:relative; z-index: 99;} .company-name:after{ position: absolute; content:attr(data-title);left: 0; top: -30%; bottom:-30%; right: 0; margin: auto; text-transform: uppercase; font-size: 64px; color: #c0c0c0; display: block; font-family: numfont; opacity: 0.1; } .company-content{ font-size: 16px; color: #666; line-height: 2} @media(max-width: 1199.98px){ .company-name{ font-size: 22px; color: #333; position: relative;} .company-name:after{ position: absolute; content:attr(data-title);left: 0; top: -30%; bottom:-30%; right: 0; margin: auto; text-transform: uppercase; font-size: 38px; color: #c0c0c0; display: block; font-family: Impact; opacity: 0.1; } } .index-product-nav{ border-top:1px solid #dededf; border-left:1px solid #dededf; } .pro-listname-item.active{background: #0d3983; color: #fff;} .pro-listname-item.active a span,.pro-listname-item:hover a span{ color: #fff} .pro-listname-item.active i:before, .pro-listname-item.active i:after{ background: #fff; transform: rotate(360deg)} .pro-listname-item:hover{ background: #0d3983} .pro-listname-item..active,.pro-listname-item:hover {border-right:1px solid #fff; } .pro-listname-item:hover i:after,.pro-listname-item:hover i:before{ background: #fff; transition: all 0.5} .pro-listname-item{ background: #f6f6f6; color: #191b20; border-bottom:1px solid #dededf;border-right:1px solid #dededf; transition: all 0.5s} .pro-listname-item a span{ color: #191b20;transition: all 0.5;font-weight:bold} .pro-listname-item i{ width: 16px; height: 16px; display: block; position: relative;transition: all 0.5} .pro-listname-item i:before{ position: absolute; content: "";display: block; width: 1px; height: 16px;top: 0;bottom: 0;left: 0; right: 0; margin: auto; background: #191b20;transition: all 0.9; } .pro-listname-item i:after{ position: absolute; content: "";display: block; width: 16px; height: 1px;top: 0;bottom: 0;left: 0; right: 0; margin: auto; background: #191b20; transition: all 0.9; } .pro-listname-item a{ font-size: 18px; color: #191b20; color: #fff} .pro-sy{position: relative} .pro-sy:after{ position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/sy1.png") no-repeat left top;background-size: 100%; } .pro-big-box-item{ overflow: hidden;} .pro-big-box-item .pro-img{ background: #f6f6f6} .pro-big-box-item img{ transition: all 0.5s} .pro-font-one{ transition: all 0.5s;transform: translateY(0%); } .pro-font-one div:nth-of-type(1),.pro-font-2 div:nth-of-type(1){ font-size: 22px; color: #333} .pro-font-one div:nth-of-type(2),.pro-font-2 div:nth-of-type(2){ font-size: 16px; color: #999} .pro-font-one div:nth-of-type(3),.pro-font-2 div:nth-of-type(3){ font-size: 16px; color: rgba(255,255,255,0.5)} .pro-big-box-item:hover img{ transform: scale(1.05)} .pro-font-2{ position: absolute; bottom: 0; transform: scale(1.15) translateY(0%); transition: all 0.5s; opacity: 0;padding: 10% 4% 10%; width: 100%;} .pro-big-box-item:hover .pro-font-2{ transform: translateY(0%); opacity:1;transform: scale(1); background: #0d3983; } .pro-big-box-item:hover .pro-font-2 div:nth-of-type(1){color: #fff} .pro-big-box-item:hover .pro-font-2 div:nth-of-type(2){color: #fff} .pro-big-box-item:hover .pro-font-2 div:nth-of-type(3){color: rgba(255,255,255,0.5); transition: all 0.5s} .pro-font-2 div:nth-of-type(3):hover{ transform: translateX(2%);color: rgba(255,255,255,0.7);} .pro-big-box-item:hover .pro-font-one{ transform: scale(0.95); opacity: 0;} @media(max-width: 991.98px){ .pro-font-one div:nth-of-type(1),.pro-font-2 div:nth-of-type(1){ font-size: 16px; color: #333} .pro-font-one div:nth-of-type(2),.pro-font-2 div:nth-of-type(2){ font-size: 14px; color: #999} .pro-font-one div:nth-of-type(3),.pro-font-2 div:nth-of-type(3){ font-size: 14px; color: rgba(255,255,255,0.5)} .pro-listname-item i{ width: 10px; height: 10px; display: block; position: relative;transition: all 0.5} .pro-listname-item a{ font-size: 16px} .pro-listname-item i:before{ position: absolute; content: "";display: block; width: 1px; height: 10px;top: 0;bottom: 0;left: 0; right: 0; margin: auto; background: #191b20;transition: all 0.9; } .pro-listname-item i:after{ position: absolute; content: "";display: block; width: 10px; height: 1px;top: 0;bottom: 0;left: 0; right: 0; margin: auto; background: #191b20; transition: all 0.9; } } /*优势*/ .youshi-item{} .youshi-item span{ background: #0d3983; width: 110px; height: 110px; border-radius: 100%; transition: all 0.5s; position: relative; overflow: hidden;} .youshi-item span:after{ position: absolute; content: ""; width: 100%; height: 100%;background: #c40d2e; transform: scale(0); transition: all 0.5s; border-radius: 50%; opacity: 0} .youshi-item:hover span:after{ transform: scale(1);opacity: 1} .youshi-item span i{ position: relative; z-index: 2} .youshi-item span i svg{ width: 50px; height: 50px; fill: #fff } .ys-title-font div:nth-of-type(1){ font-size: 22px; color: #333333} .ys-title-font i svg{ height: 10px; fill: #878787} .ys-title-font .ys-desc{ font-size: 16px; color: #666;} .youshi-box .youshi-item:nth-of-type(2){ position: relative} .youshi-box .youshi-item:nth-of-type(2):before{ position: absolute; content: ""; background: url("../img/ys_dot.png") no-repeat center top; width: 85px; height: 12px; left: -15%; top: 25%;} .youshi-box .youshi-item:nth-of-type(2):after{ position: absolute; content: ""; background: url("../img/ys_dot.png") no-repeat center top; width: 85px; height: 12px; right: -15%; top: 25%;} .youshi-item:hover .ys-title-font div:nth-of-type(1){ color: #c40d2e} .youshi-item:hover .ys-title-font i svg{ fill: #c40d2e} #youshi-box .swiper-pagination{ display: none; bottom:5px!important;} #youshi-box .swiper-pagination .swiper-pagination-bullet{ width: 10px; height: 10px; transition: all 0.5s} #youshi-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 35px; height: 10px; border-radius: 0.5rem; background: #cc0000} @media(min-width: 991.98px){ .youshi-box .youshi-item{ width: 30%} } @media(max-width: 991.98px){ .youshi-box .youshi-item{ width: calc(100% / 1)} .youshi-box .youshi-item:nth-of-type(2):before{ position: absolute; content: ""; display:none; } .youshi-box .youshi-item:nth-of-type(2):after{ position: absolute; content: ""; display:none; } .ys-title-font div:nth-of-type(1){ font-size: 18px; color: #333333} .youshi-item span i svg{ width: 40px; height: 40px; fill: #fff } .youshi-item span{ background: #0d3983; width: 80px; height: 80px; border-radius: 100%; transition: all 0.5s; position: relative; overflow: hidden;} #youshi-box .swiper-pagination{ display: block;} } /*公司简介模块*/ .about-font-k>div:nth-of-type(1){ position: relative;background: rgba(192,34,64,1); width: 100%; height: 100%;} .about-img-box-all .about-font-k{ top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 30%; height: 30%; border: 10px rgba(192,34,64,0.8) solid;} .about-img-box-all .about-font-k>div span svg{ width: 60px; height:60px; fill: #fff; line-height: 2} .about-img-box-all .about-font-k>div>div{ position: relative; width: 100%; height: 100%; font-weight: bold} .about-img-box-all .about-font-k>div>div:after{ position:absolute; content: attr(data-title); left: 0; top: 0; bottom: 0; right: 0; margin: auto; color: rgba(255,255,255,0.15); z-index: 8; font-size: 56px; text-transform: uppercase; text-align: center;} .about-img-box-all .about-font-k>div>div>div:nth-last-of-type(1){ font-size: 62px; color: #fff; font-weight: bold; line-height: 1} .about-img-box-all .about-font-k>div>div>p:nth-last-of-type(1){ font-size: 18px; color: #fff; font-weight: 400} @media(max-width: 1299.98px){ .about-img-box-all .about-font-k{ top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 45%; height:45%; border: 10px rgba(192,34,64,0.8) solid;} .about-img-box-all .about-font-k>div>div:after{ position:absolute; content: attr(data-title); left: 0;right: 0; top: 30%; margin: auto; color: rgba(255,255,255,0.15); z-index: 8; font-size: 56px; text-transform: uppercase; text-align: center;} } @media(max-width: 991.98px){ .about-img-box-all .about-font-k{ top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 40%; height:40%; border: 10px rgba(192,34,64,0.8) solid;} .about-img-box-all .about-font-k>div span svg{ width: 45px; height:45px; fill: #fff; line-height: 2} .about-img-box-all .about-font-k>div>div:after{ position:absolute; content: attr(data-title); left: 0; top: 20%; right: 0;font-size: 36px; line-height: 2; } .about-img-box-all .about-font-k>div>div>div:nth-last-of-type(1){ font-size: 32px; color: #fff; font-weight: bold; line-height: 1} .about-img-box-all .about-font-k>div>div>p:nth-last-of-type(1){ font-size: 16px; color: #fff; font-weight: 400} } /*产品类别*/ .index_pro_list{ width: 100%; justify-content: space-between; display: flex; margin-left: 0; margin-right: 0; } .index_pro_list .pro_slider{ flex: 1; overflow: hidden; } .index_pro_list .pro_slider span:nth-of-type(1){ width: 384px; height: 420px;} .index_pro_list .pro_slider span:nth-of-type(1) img{ transition: all 0.5s; width: 100%; height: 100%; opacity: 0.2; transition: all 0.5s } .index_pro_list .pro_slider .pro_font1{ position: absolute; top: 0; left: 0; width: 100%; padding:40px; box-sizing: border-box; transition: all 0.5s} .pro-box-double a>div{ display: block; border-radius:0.5rem; } .pro-box-double a>p{ font-size: 16px; transition: all 0.5s; color: #333333;} .pro-box-double a>p i{ transition: all 0.5s} .pro-box-double a:hover>p { font-size: 16px;} .img-all img,.pro-shuiyin img{ transition: all 0.5s} .pro-shuiyin{ position: absolute; bottom: 0; left:0; width: 100%; overflow: hidden;} /*服务流程*/ .index-liucheng{ background: url("../img/index_liucheng.jpg") no-repeat center center fixed; background-size: cover} .index-lc-title{} .index-lc-title p:nth-of-type(1){ font-size: 46px; color: #333} .index-lc-title p:nth-of-type(2){ font-size: 16px; text-transform: uppercase; color: #666} .about-leader-content{ color: #666} .liucheng-box{} .liucheng-box .process-item{ position: relative; width: calc(100% / 8); font-size: 16px; color: #fff;} .liucheng-box .process-item .item-icon{width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; margin-bottom: 10px; } .liucheng-box .process-item .item-icon span{ align-items: center;} .liucheng-box .process-item:hover .item-icon{ background: #0075c4} .liucheng-box .process-item:not(:last-child)::after { content: ''; display: block; width: 18px; height:16px; background: url("../img/icon-jt.png") center no-repeat; position: absolute; margin: auto; top: 0px; bottom: 0; right: -4.5px; } .liucheng-two-btn{ width: 50%;} .liucheng-two-btn>div{ width: 48%; transition: all 0.5s } .liucheng-two-btn>div:nth-of-type(1){ position: relative; font-size: 18px; color: #fff;border:1px #0075c4 solid; background:#0075c4; transition: transform 0.5s } .liucheng-two-btn>div:nth-of-type(1):hover{border:1px #8f0101 solid; } .liucheng-two-btn>div:nth-of-type(2){ position: relative; background:none; font-size: 18px; color: #fff;border:1px #fff solid;transition: transform 0.5s; } .liucheng-two-btn>div:nth-of-type(2):hover{border:1px #8f0101 solid; } .liucheng-two-btn>div:nth-of-type(1):after{ position:absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; transform: scaleX(0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; background: #8f0101; transition: transform 0.5s; } .liucheng-two-btn>div:nth-of-type(1) span{ position: relative; z-index: 1} .liucheng-two-btn>div:nth-of-type(1):hover:after{ transform-origin: left center; transform: scaleX(1); } .liucheng-two-btn>div:nth-of-type(2):after{ position:absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; transform: scaleX(0); transform-origin: right center; background: #8f0101; transition: transform 0.5s; } .liucheng-two-btn>div:nth-of-type(2) span{ position: relative; z-index: 1} .liucheng-two-btn>div:nth-of-type(2):hover:after{ transform-origin: left center; transform: scaleX(1); } @media (max-width: 1199.98px) { .liucheng-two-btn{ width: 100%;} } @media (min-width: 1680px) { .liucheng-box .process-item:not(:last-child)::after { right: -20.5px; } } .liucheng-box .process-item:hover .item-icon { background: #0075c4 } .liucheng-box .process-item:hover .item-icon img { filter: grayscale(100%) brightness(100); -webkit-animation: swing 1 1s linear; -o-animation: swing 1 1s linear; animation: swing 1 1s linear; } @media (max-width: 991.98px) { .index-lc-title p:nth-of-type(1){ font-size: 24px; } .index-lc-title p:nth-of-type(2){ font-size: 14px; text-transform: uppercase; } .liucheng-box .process-item{ position: relative; width: calc(100% / 4); font-size: 13px; margin-bottom: 10px;} .liucheng-box .process-item .item-icon{width: 30px; height: 30px; margin-bottom: 5px} .liucheng-box .process-item .item-icon img{ width: 20px;} .liucheng-box .process-item p{ margin-bottom: 0} .liucheng-box .process-item:not(:last-child)::after { top: 30px; } .liucheng-box .process-item:nth-child(4n)::after { display: none; } .liucheng-two-btn{ width: 100%;} .liucheng-two-btn>div{ width: 100% } } /*首页新闻模块*/ .news-two-box{ height: 100%;} .news-two-box .news-img{ height: 100%} .news-two-box .news-img img{ transition: all 0.5s} .news-font-box-bottom{ border: 1px solid #e5e5e5; position: relative} .news-font-box-bottom:after{ position: absolute; content: ""; background: url("../img/news_logo.png") no-repeat center center; width: 83px; height: 83px;right: 10px; bottom: 5px; transition: all 0.5s} .news-font-box-bottom>div:nth-of-type(1){ border-bottom: 1px dashed #ebebeb;} .news-font-box-bottom>div:nth-of-type(1)>span:nth-of-type(1){ font-size: 18px; color: #333} .news-font-box-bottom>div:nth-of-type(1)>span:nth-of-type(2){ font-size: 14px; color: #999} .news-font-box-bottom>div:nth-of-type(2){ font-size: 14px; color: #999; line-height: 2;} .news-font-box-bottom>div:nth-of-type(3){ width: 140px; height: 40px; background: #0075c4; font-size: 14px; color: #fff; transition: all 0.5s; position: relative; } .news-two-box:hover .news-img img{ transform: scale(1.05);} .news-two-box:hover .news-font-box-bottom:after{right: 20px; } .news-two-box:hover .news-font-box-bottom>div:nth-of-type(3){ width: 160px; } .news-font-box-bottom>div:nth-of-type(3):after{ position:absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; transform: scaleX(0); transform-origin: right center; background: #8f0101; transition: transform 0.5s; } .news-font-box-bottom>div:nth-of-type(3) span{ position: relative; z-index: 1} .news-font-box-bottom:hover>div:nth-of-type(3):after{ transform-origin: left center; transform: scaleX(1); } .news_li{ border-bottom: 1px #e2e2e2 dashed; transition: all 0.5s} .news_mess{ width: 75%; padding-right: 3%; position: relative} .news_mess:after{ position: absolute;content: ""; width: 1px; height: 80%; background: #e1e1e1; top: 0; bottom: 0; right: 0; margin: auto;} .news_mess p:nth-of-type(1){ font-size: 18px; color: #333;} .news_mess>div:nth-of-type(1){ font-size: 14px; color: #999999;} .news-time{ width: 25%} .news-time span:nth-of-type(1){ font-size: 50px; color: #666; line-height: 1} .news-time span:nth-of-type(2){ font-size:16px; color: #666;} .news_li:hover{ background: #f3f3f3;} .news_li:hover .news-time span:nth-of-type(1){ color: #0075c4;} @media(max-width: 1300px)and (min-width: 1200px){ .news-font-box-bottom>div:nth-of-type(1)>span:nth-of-type(1){ font-size: 16px; color: #333} .news-font-box-bottom>div:nth-of-type(1)>span:nth-of-type(2){ font-size: 12px; color: #999} } @media(max-width: 991.98px){ .news-time span:nth-of-type(1){ font-size: 24px; color: #666; line-height: 1} .news-time span:nth-of-type(2){ font-size:16px; color: #666;} } /*关于我们*/ .about-ys-item{ flex: 0 0 auto; width: 25%; position: relative} .about-ys-item:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width: 1px; height: 30%; background: #cacaca; right: 0; top: 0; bottom: 0; margin: auto} .about-ys-item i{ background: url("../img/about_dot.png") no-repeat center center;} .about-ys-item i svg{ width:40px; height: 40px; fill: #fff} .a-ys-font p:nth-of-type(1){ font-size: 18px; color: #282828} .a-ys-font p:nth-of-type(2){ font-size: 14px; color: #666666} .ab-font{ font-size: 14px; color: #666; line-height: 3;} @media(max-width: 991.98px){ .about-ys-item{ flex: 0 0 auto; width: 50%} .a-ys-font p:nth-of-type(1){ font-size: 16px; color: #282828} .a-ys-font p:nth-of-type(2){ font-size: 14px; color: #666666} .about-ys-item i svg{ width:30px; height: 30px; fill: #fff} .about-ys-item:after{ position: absolute; content: ""; width: 0px; height: 0%; background: #cacaca; right: 0; top: 0; bottom: 0; margin: auto} .about-ys-item:nth-of-type(2n):after{ position: absolute; content: ""; width: 0px; height: 0%; background: #cacaca; right: 0; top: 0; bottom: 0; margin: auto} } .culture-item{ border-radius: 0.5rem; overflow: hidden; height: auto; transition: all 0.5s ; } .culture-item .culture-font{ transition: all 0.5s ;background: #f5f5f5;height: 140%;transform: translateY(0%);} .culture-item .culture-font p i svg{ fill: #e80113; width: 45px; height: 45px;} .culture-item .culture-font p{ font-weight: bold;} .culture-item .culture-font div:nth-of-type(1){ font-size: 14px; opacity: 0 } .culture-item:hover .culture-font{ transform: translateY(-20%); background: #e80113; } .culture-item:hover{background: #e80113;transition: all 0.5s ;} .culture-item:hover .culture-font p i svg{ fill: #fff} .culture-item:hover .culture-font div:nth-of-type(1){ opacity: 1; color: #fff} .culture-item:hover .culture-font p{ color: #fff} @media(max-width: 991.98px){ } .index-pro-list{ background: #404040} .index_pro_list .pro_slider .pro_font1 p:nth-child(1){ font-size: 22px; color: #282828; } .index_pro_list .pro_slider .pro_font1 p:nth-child(2){ color: #666666; font-size: 15px; } .index_pro_list .pro_slider .pro_font1 span{ position: relative; text-align: center; display: block; width:38px; height: 38px; border-radius: 100%; background: #f3f3ef; color: #0e0e0e; vertical-align: middle; } .index_pro_list .pro_slider .pro_font1 span i{ display: block; position: absolute; top: 5px;bottom:0;left:0;right: 0; margin: auto; } .index_pro_list .pro_slider .pro_font1 p:nth-last-of-type(1){ padding-top:10%; } .index_pro_list .pro_slider:nth-of-type(2) .pro_font1 p:nth-last-of-type(1){ padding-top:10%; } .index_pro_list .pro_slider:nth-of-type(3) .pro_font1 p:nth-last-of-type(1){ padding-top:15%;padding-left: 25px; } .index_pro_list .pro_slider:nth-of-type(4) .pro_font1 p:nth-last-of-type(1){ padding-top:10%;padding-left: 30px; } .index_pro_list .pro_slider .pro_font2{ position: absolute; top: 420px; left: 0; width: 100%; padding:40px;height: 422px; box-sizing: border-box; transition: all 0.5s} .index_pro_list .pro_slider:hover .pro_font1{ top: -422px; } .index_pro_list .pro_slider:hover span img{ transform: scale(1.2); } .index_pro_list .pro_slider:hover .pro_font2{ top: 0; background:rgba(0,0,0,0.9); opacity:0.9} .index_pro_list .pro_slider:hover .pro_font2 p:nth-child(1){ font-size: 22px; color: #fff; } .index_pro_list .pro_slider:hover .pro_font2 p:nth-child(2){ color: #fff; font-size: 15px; } .index_pro_list .pro_slider:hover .pro_font2>span:nth-of-type(1){ position: relative; text-align: center; display: block; width:38px; height: 38px; border-radius: 100%; background: #e80113; color: #fff; vertical-align: middle; opacity: 1} .index_pro_list .pro_slider:hover .pro_font2>span:nth-of-type(1) i{ display: block; position: absolute; top: 5px;bottom:0;left:0;right: 0; margin: auto; } .pro_font2>a:nth-last-of-type(1){ display: block; background: #e80113; color: #fff!important; width: 125px; height: 40px; line-height: 40px;text-align: center; font-size: 15px; margin-top: 20px; transition: all 0.5s} .pro_font2>a:nth-last-of-type(1):hover{ color: #fff; width: 135px; } .index_pro_list .pro_slider:hover div a{ color: #fff; font-size: 15px; transition: all 0.5s } .index_pro_list .pro_slider:hover div:nth-of-type(1){ margin-top: 10px; } .index_pro_list .pro_slider:hover div{line-height: 25px; } .index_pro_list .pro_slider:hover div a:hover{ color: #e80113 } .news_detail{ background: #f3f3f3; padding: 30px 0; text-align: center; } @media(max-width:768px) { .index_pro_list {flex-flow:row wrap;} .index_pro_list .pro_slider{ flex-basis:50%; } .index_pro_list .pro_slider:nth-last-of-type(1){ flex-basis:100%;} .index_pro_list .pro_slider .pro_font1 p:nth-child(1){ font-size:16px; color: #282828; } .index_pro_list .pro_slider .pro_font1 p:nth-child(2) { color: #666666; font-size: 12px;} .index_pro_list .pro_slider .pro_font1 { position: absolute; top: 0; left: 0; width: 100%; padding:30px 20px 0; box-sizing: border-box; transition: all 0.5s; } .index_pro_list .pro_slider:hover .pro_font1{ top: 0px; } .index_pro_list .pro_slider:not(:nth-last-of-type(1)) .pro_font1 p:nth-last-of-type(1) { display: none; } } /*面包屑*/ .ty-current .current-all2 span { font-size: 16px; color: #99999c} .ty-current .current-all2 i svg{ width: 20px; height: 20px; fill: #99999c} .index-location-address{ box-shadow: 0 0 20px rgba(0,0,0,0.15); } .index-location-address.no{ box-shadow: 0 0 20px rgba(0,0,0,0);} .current-content{ width: 100%;} .current-content.proinfo{ font-size: 20px; color: #666;} .current-content.proinfo a{ padding: 0 5px;} .current-content.proinfo a:nth-last-of-type(1),.current-content.proinfo a:hover{ color: #00ab71} .current-content>i svg{ width: 20px; height: 20px; fill: #717171} .current-content>div>i svg{ width:15px; height:15px; fill: #afafaf} .current-content{ font-size:16px;} .current-content,.current-content a{ color:rgba(0,0,0,0.5)} .current-content a:hover{ color: #00ab71} .sub-item{ position: relative; border-radius: 2rem; } .sub-item.no{ position: relative;border-right: 0px solid #e6e6e6} .sub-item:after{ position:absolute; content: "";left:0; bottom:0; right:0; margin:auto; background-image: linear-gradient(to right,#ff0,#ff0); width: 100%; height:100%;transform: scaleX(0); transform-origin: center center; transition: transform 0.5s; border-radius: 2rem;} .sub-item:hover:after{ transform: scaleX(1); transform-origin: center center;} .sub-item.on:after{ position:absolute; content: "";left:0; bottom:0; background-image: linear-gradient(to right,#ff0,#ff0); width: 100%; height: 100%;transform: scaleX(0); transition: transform 0.5s; transform: scaleX(1); } .sub-item a{ font-size: 16px; color: #515151; transition: all 0.5s; position:relative; z-index: 999;} .sub-item:hover a,.sub-item.on a{ color: #515151} .about-bottom{ background: url("../img/company_bottom_bj.jpg") no-repeat center bottom #fff; height: 100%; } .jiangong-about-box{padding-bottom:20%} .company-about-title-top{ position: relative} .company-about-title-top:after{ position: absolute; content: ""; width: 100%; height: 100%; background: url("../img/company_bj.jpg") no-repeat right center; right: -20%} @media(max-width: 991.98px){ .zy-flash-font p:nth-of-type(1){ font-size: 20px;} .zy-flash-font p:nth-of-type(2){ font-size: 14px;} .company-about-title-top:after{ display: none} .zy-flash-font div:nth-of-type(1) span{ font-size:18px;} } .sub-line{ position:relative;} .sub-line:after{ position: absolute; content: ""; top:12%; left: -100%;right: -100%; width: 230%; height: 1px; } .current-all{} .current-all i svg{ width: 25px; height: 25px; fill: #666} .current-all span,.current-all span a{ font-size: 14px; color: #666} .current-all span a:hover{ color: rgba(255,255,255,0.25)} /* 模板公司简介*/ .w-90{ width:92%; margin:0 auto;} .about-company-bj{ background: url("../img/about_bj.png") no-repeat center bottom #f4f5f7; } .content-about{ font-size:16px; color:#666; line-height: 2; } .aboutimg{ border-radius: 2rem; overflow: hidden } .about-demo-title{} .about-demo-title p:nth-of-type(1){ position:relative; font-size:35px; color:#333333 } .about-demo-title p:nth-of-type(1):after{ position:absolute; content:attr(data-title); font-weight:bold; font-size:60px; font-family: 'Avian'; color:#ebedf1; text-transform: uppercase;left:0;bottom:0; } .about-demo-title p:nth-of-type(1) span{ position:relative; z-index: 999; } .about-demo-title2{} .about-demo-title2 p:nth-of-type(1){ position:relative; font-size:35px; color:#333333 } .about-demo-title2 p:nth-of-type(1):after{ position:absolute; content:attr(data-title); font-weight:bold; font-size:60px; font-family: 'Avian'; color:#f3f4f7; text-transform: uppercase;left:0;bottom:0;right:0; margin:auto } .about-demo-title2.fw p:nth-of-type(1):after{ position:absolute; content:attr(data-title); font-weight:bold; font-size:72px; font-family: 'Avian'; color:#fff; text-transform: uppercase;left:0;bottom:0;right:0; margin:auto } .about-demo-title2 p:nth-of-type(1) span{ position:relative; z-index: 999; } .title-desc{ font-size:16px; color:#666;} .about-k-item{ width:calc(100% / 4);} .about-k-item p:nth-of-type(1) span{ line-height: 0.8; position:relative; font-family: Avian; color:#333333; font-size:86px;} .about-k-item p:nth-of-type(2) { width:100%; color:#636363; font-size:16px;} .about-k-item p:nth-of-type(1) span:after{position:absolute; content:attr(data-title); color:#333; font-size:18px;left:100%;bottom:20%; } .about-k-item{ transition: all 0.5s; cursor: pointer;} .about-k-item,.about-k-item *{ transition: all 0.5s} .about-k-item:hover{} .about-k-item:hover p:nth-of-type(1) span{ color:#cc0000} @media(max-width: 1199.98px){ .about-k-item p:nth-of-type(1) span{ font-size:36px;} .about-demo-title p:nth-of-type(1):after{ font-size: 50px;} } @media(max-width: 991.98px){ .about-k-item p:nth-of-type(1) span{ font-size:26px;} .about-k-item{ width:calc(100% / 2);} .about-demo-title p:nth-of-type(1):after{font-size:24px; bottom:20% } .about-demo-title p:nth-of-type(1){ font-size: 24px;} } /*模板 服务支持*/ .fwzc-c-item{ border:1px solid #fff; border-radius: 0.5rem;position: relative; overflow: hidden; height: 350px } .fwzc-c-item,.fwzc-c-item *{ transition: all 0.5s} .fwzc-c-item.fwzc-1:before{ position:absolute; content:''; background: url("../img/fwzc1.jpg") no-repeat center top; background-size: cover; left:0;top:0;bottom:0;right:0;opacity: 0.1; transition: all 0.5s; } .fwzc-c-item.fwzc-2:before{ position:absolute; content:'';background: url("../img/fwzc2.jpg") no-repeat center top; background-size: cover; left:0;top:0;bottom:0;right:0;opacity: 0.1; transition: all 0.5s; } .fwzc-c-item.fwzc-3:before{position:absolute; content:''; background: url("../img/fwzc3.jpg") no-repeat center top; background-size: cover; left:0;top:0;bottom:0;right:0;opacity: 0.1; transition: all 0.5s; } .fwzc-c-item:hover:before{ opacity: 0.9} .fwzc-title .fwzc-left-font p:nth-of-type(1){ font-family: 'Avian'; font-size:48px; font-weight: bold; background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(204, 0, 0, 0.25)), to(rgba(204, 0, 0, 0))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(25%); font-weight: bold; } .fwzc-title .fwzc-left-font p:nth-of-type(2){ font-size:24px; color:#000000; transform: translateY(-40%);} .fwzc-icon i svg{ width:48px; height:48px; fill:#2f2f2f;position:relative; z-index: 999;} .fwzc-c-desc{ font-size:16px; line-height: 2; color:#666666;position:relative; z-index: 999;} .fwzc-title .fwzc-left-font{ position:relative; z-index: 999;} .fwzc-c-item:after{ position:absolute; content:''; background: #c40000; opacity: 0.75; width:100%; height:100%; left:0;top:0;bottom:0;right:0; -webkit-transition: all .5s; -moz-transition: all .75s; -ms-transition: all .75s; -o-transition: all .75s; transition: all .75s; clip-path: circle(10% at 50% 50%); opacity: 0; z-index: 5; } .fwzc-c-item:hover:after{ opacity:0.8; clip-path: circle(100% at 50% 50%); } .fwzc-c-item:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.05); transform: translateY(5%)} .fwzc-c-item:hover .fwzc-left-font p:nth-of-type(1){ background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 0, 0, 0)));} .fwzc-c-item:hover .fwzc-title .fwzc-left-font p:nth-of-type(2){ color:#fff} .fwzc-c-item:hover .fwzc-icon i svg{ fill:#fff} .fwzc-c-item:hover .fwzc-c-desc{ color:#fff} .shfw-right-img{ overflow: hidden;} .shfw-c-item{ background: #fff; border-radius: 2rem 0 0 2rem; box-shadow: 0 0 15px rgba(0,0,0,0.25);} .shfw-c-item:nth-of-type(2n){ background: #fff; border-radius: 0rem 2rem 2rem 0rem; box-shadow: 0 0 15px rgba(0,0,0,0.25);} .shfw-c-item,.shfw-c-item *{ transition: all 0.5s} .shfw-c-item img{ transform: scale(1.05)} .shfw-c-item:hover img{ transform: scale(1)} .shfw-left-bj{ background: url("../img/shfw_bj.jpg") no-repeat center center;} .shfw-title{ border-bottom:1px solid #e4e8ef; position:relative } .shfw-title span{ font-size:30px; color:#272727;} .shfw-title:after{ position:absolute; content:''; left:0;bottom:0; height:3px; width:165px; background: #cc0000 } .shfe-desc{ line-height: 2rem; font-size:16px; color:#666;} .dingzhi-more{ background: #cc0000; border:1px solid #cc0000; box-shadow: 0 0 15px rgba(0,0,0,0.05); color:#fff; width:220px; height: 60px; border-radius: 2rem} .dingzhi-more a{ color:#fff; font-size: 16px; color:#fff} .dingzhi-more:hover{ background: none; } .dingzhi-more:hover a{ color:#c40000 } @media(max-width: 991.98px){ .shfw-left-bj{ order:10!important;} .shfw-title span{ font-size:20px; color:#272727;} .dingzhi-more{ height: 45px; border-radius: 2rem} .shfw-c-item{ background: #fff; border-radius: 0rem 0 2rem 2rem; box-shadow: 0 0 15px rgba(0,0,0,0.25);} } /*模板 厂容厂貌*/ .crcm-k{ height:700px;} .crcm-container{ position:absolute; width: 105%; left:0;top:0 } .crcm-img img{ transform: scale(1.05)} .crcm-item{ background: #f8f8f9; font-size:18px; color:#333333} .crcm-item,.crcm-item *{ transition: all 0.5s} .crcm-item:hover .crcm-img img{ transform: scale(1)} .crcm-item:hover{ background: #3466ce;} .crcm-item:hover .crcm-wrap{ color:#fff } @media(max-width: 1799.98px){ .crcm-k{ height:auto;} .crcm-container{ position:initial; width: 100%; left:initial;top:initial } } /*模板企业文化*/ .culture-demo-item{ width: 49%; background: #f4f5f7;transition: all 0.5s } .culture-demo-item .culture-wrap>p:nth-of-type(1){ font-size:30px; color:#2b2b2b;transition: all 0.5s;transition: all 0.5s } .culture-demo-desc{ font-size:16px; color:#666666;transition: all 0.5s } .culture-demo-item img{ transform: scale(1.05);transition: all 0.5s } .culture-demo-desc{} .culture-demo-item:hover img{ transform: scale(1)} .culture-demo-item:hover{ background: #2d5fc7; box-shadow: 0 0 10px rgba(0,0,0,0.05)} .culture-demo-item:hover .culture-demo-desc{ color: #fff} .culture-demo-item:hover .culture-wrap>p:nth-of-type(1){color:#fff} .demo-honor-k .item-img img { position: absolute; max-width: 90%; max-height: 100%; bottom: 0; left: 0; right: 0; margin: auto; } .demo-honor-k2{ border:1px solid #f7f8fb; border-bottom:#196ccf 3px solid; transition: all 0.5s} .demo-honor-k2 .demo-wrap{ border-top:1px solid #f7f8fb; font-size:16px; color:#333; transition: all 0.5s;} .demo-honor-k2 img{ transform: scale(1.05); transition: all 0.5s} .demo-honor-k2 .item-img{ position: relative;} .demo-honor-k2:hover .demo-wrap{ background: #196ccf; color:#fff;} .demo-honor-k2:hover img{ transform: scale(1)} #honor .swp-btn2{ position: absolute; z-index: 99; bottom: 0; margin: auto; border-radius: 50%; width: 55px; height: 55px; background: rgba(255,255,255,0.5); border:1px solid #dfe8f1; transition: all 0.5s; } #honor .swp-btn2 i svg{ fill:#3667ce; width:20px; height:20px;} #honor .swp-btn2.swiper-button-next2{ right:51%;} #honor .swp-btn2.swiper-button-prev2{ left:51%;} #honor .swp-btn2.swiper-button-prev2 i svg{ transform: rotate(180deg);} #honor .swp-btn2.swiper-button-prev2, #honor .swp-btn2:hover{ background: #3667ce;} #honor .swp-btn2.swiper-button-prev2 i svg,#honor .swp-btn2:hover i svg{ fill:#fff;} .swp-btn2.swiper-button-disabled{ opacity: 0.5} @media(max-width: 991.98px){ #honor .swp-btn2{ width: 35px; height: 35px;} #honor .swp-btn2 i svg{ width:13px; height:13px;} .culture-demo-item{ width: 100%; background: #f4f5f7;} .about-demo-title2 p:nth-of-type(1){ position:relative; font-size:25px; color:#333333 } .about-demo-title2 p:nth-of-type(1):after{ bottom:10%;font-size:30px; } .about-demo-title2.fw p:nth-of-type(1){ position:relative; font-size:25px; color:#333333 } .about-demo-title2.fw p:nth-of-type(1):after{ font-size:30px; } } /*模板 产品综合页面*/ .pro-left-box{ width:52%; padding-right:5%} .pro-right-box{ width:48%} .pro-left-title{ border-bottom:1px solid #dde2e7; position:relative } .pro-left-title:after{ position:absolute;content:'';left:0;bottom:0; width:140px; height:3px; background: #3466ce;} .pro-left-title p{ font-size:48px; color:#333;} .pro-list-desc{ font-size:16px; color:#666; line-height: 2 } .pro-name-item,.pro-name-item *{ transition: all 0.5s; } .pro-name-item{ width:calc(100% / 3); padding:10px 0;} .pro-n-inco i{width:25px; height:25px; display: block; border-radius: 50%; border:1px solid #999;} .pro-n-inco i svg{ width:12px; height:12px; fill:#999;} .pro-n-name{ font-size:18px; color:#343434;} .pro-name-item .pro-n-name span{ position:relative; width:calc(100% - 50px);} .pro-n-name span:after{ position: absolute; content: ""; background: #3466ce; width: 100%; bottom: 0px; left: 0; height: 5px; transition: transform .5s; opacity: 0.7; transform: scaleX(0); transform-origin: right bottom;} .pro-name-item:hover .pro-n-name span:after{ transform: scaleX(1); transform-origin: left bottom;opacity: 0.5; } .pro-name-item:hover .pro-n-inco i{ background: #34549c} .pro-name-item:hover .pro-n-inco i svg{ fill:#fff;} .pro-name-item:hover .pro-n-inco i{ border:1px solid #34549c;} @media(max-width: 991.98px){ .pro-left-box{ width:100%; padding-right:0%} .pro-right-box{ width:100%} .pro-name-item{ width:calc(100% / 2); padding:10px 0;} .pro-left-title p{ font-size:24px; color:#333;} } .pro-list-item{ position: relative; overflow: hidden; border-radius: 1rem; background: #fff url("../img/proinfo-bj.png") no-repeat bottom right; box-shadow: 0 0 10px rgba(0,0,0,0.05) } .proinifo-img{ width:50%;position:relative; z-index: 999;} .proinfo-dan-wrap{ width:50%; padding:4%; position:relative; z-index: 999;} .proinfo-dan-wrap>p:nth-of-type(1){ font-size:26px; color:#282828; } .proinfo-dan-wrap .proinfo-three-box{ border-bottom:1px solid #f3f3f3} .proinfo-dan-wrap .proinfo-three-box span{ font-size:14px; color:#666666; background: #f8f8f8; border-radius: 1rem; } .proinfo-info-desc{ font-size: 14px; color:#666; } .proinfo-more{} .proinfo-more span{ font-size:16px; color:#666666; text-decoration: underline } .proinfo-more i svg{ width:12px; height:12px; fill:#fff} .proinfo-more i{ width:50px; height:50px; border-radius: 50%; background: #064cc8;} .pro-list-item,.pro-list-item *{ transition: all 0.5s} .pro-list-item:after{ position:absolute; content:''; right:0%;top:0;height:100%; width:50%; background: #064cc8 url("../img/proinfo-bj.png") no-repeat bottom right; -webkit-transition: all .7s; -moz-transition: all .75s; -ms-transition: all .75s; -o-transition: all .75s; transition: all .75s; clip-path: circle(10% at 50% 50%); opacity: 0; z-index: 5} .pro-list-item:hover:after{ opacity: 1; clip-path: circle(100% at 50% 50%); } .pro-list-item .proinifo-img img{ transform: scale(1.05); transition: all 0.5s;} .pro-list-item:hover .proinifo-img img{ transform: scale(1)} .pro-list-item:hover .proinfo-dan-wrap .proinfo-three-box{ border-bottom:1px solid rgba(255,255,255,0.2)} .pro-list-item:hover .proinfo-dan-wrap>p:nth-of-type(1){ color:#fff; } .pro-list-item:hover .proinfo-info-desc{ color:#fff; } .pro-list-item:hover .proinfo-more span{ color:#fff} .pro-list-item:hover .proinfo-more i{ background: #fff; transform: translateX(10%)} .pro-list-item:hover .proinfo-more i svg{ fill:#064cc8} @media(max-width: 1499.98px){ .proinifo-img{ width:100%} .proinfo-dan-wrap{ width:100%; padding:4%; position:relative; z-index: 999;} .pro-list-item:after{ position:absolute; content:'';right:0%;top:initial; bottom:0; height:50%; width:100%;} } @media(max-width: 991.98px){ .proinfo-dan-wrap>p:nth-of-type(1){ font-size:20px; } .pro-list-item:after{ position:absolute; content:'';right:0%;top:initial; bottom:0; height:50%; width:100%;} .proinfo-more i{ width:30px; height:30px; border-radius: 50%; background: #064cc8;} } /*新闻模块*/ .news-font-box span:nth-of-type(1){ font-size: 36px; color: #333333; font-weight: bold; line-height: 1; transition: all 0.5s} .news-font-box span:nth-of-type(2){ font-size: 18px; color: #a3a4ac;transition: all 0.5s} .news-font-box>div:nth-of-type(2) p:nth-of-type(1){ color: #333333; font-size: 20px;} .news-font-box>div:nth-of-type(2) div:nth-of-type(1){ color: #a3a4ac; font-size: 14px;} .news-font-box>div:nth-of-type(1){ border-right:1px solid #dedfe1; width: 25%} #news_img_box .swiper-pagination{ bottom: 0px; } #news_img_box .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet{ height: 8px; width: 8px; background: #666; border-radius: 100%; transition: all .5s} #news_img_box .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 20px; height: 8px; margin: 0 4px; border-radius: 2rem; transition: all 0.5s; background: #0e4b99; } #news_img_box .news-left-box:hover span:nth-of-type(1){ color: #0d3983} #news_img_box .news-left-box:hover span:nth-of-type(2) { color: #0d3983;} #news_img_box .news-left-box:hover div:nth-of-type(2) p:nth-of-type(1){ color: #0d3983} .news-font-box2{ border-bottom: 1px solid #dedfe1; transition: all 0.5s} .news-font-box2:hover{ border-bottom: 1px solid #c40d2e } .news-font-box2.right a{ display: flex; width: 100%} .news-font-box2.right a>div:nth-of-type(1){ width: 20%;} .news-font-box2.right a>div:nth-of-type(2){ width: 80%;} .news-font-box2.right a>div:nth-of-type(1)>p:nth-of-type(1){ position:relative; font-size: 36px; color: #333333; font-weight: bold; line-height: 1.2} .news-font-box2.right a:hover>div:nth-of-type(1)>p:nth-of-type(1),.news-font-box2.right a:hover>div:nth-of-type(1)>p:nth-of-type(2){ color: #c40d2e} .news-font-box2.right a:hover>div:nth-of-type(1)>p:nth-of-type(1):after{ background: #c40d2e; width: 15% } .news-font-box2.right a>div:nth-of-type(1)>p:nth-of-type(1):after{ position: absolute; content: ""; height: 2px; width: 20%; background: #a3a4ac; left: 0; bottom:-30%; transition: all 0.5s } .news-font-box2.right a>div:nth-of-type(1)>p:nth-of-type(2){ font-size: 18px; color: #a3a4ac; line-height: 2; transition: all 0.5s} .news-font-box2.right a>div:nth-of-type(2) p:nth-of-type(1){ color: #333333; font-size: 20px;transition: all 0.5s} .news-font-box2.right:hover a>div:nth-of-type(2) p:nth-of-type(1){ color: #c40d2e} .news-font-box2.right a>div:nth-of-type(2) div:nth-of-type(1){ color: #a3a4ac; font-size: 14px; line-height: 1.5rem} @media(max-width: 1399.98px){ .news-font-box span:nth-of-type(1){ font-size: 26px; color: #333333; font-weight: bold; line-height: 1} } @media(max-width: 1199.98px){ .news-font-box span:nth-of-type(1){ font-size: 20px; color: #333333; font-weight: bold; line-height: 1} .news-font-box span:nth-of-type(2){ font-size: 14px; color: #a3a4ac} .news-font-box>div:nth-of-type(2) p:nth-of-type(1){ color: #333333; font-size:16px;} .news-font-box>div:nth-of-type(2) div:nth-of-type(1){ color: #a3a4ac; font-size: 12px;} .news-font-box>div:nth-of-type(1){ border-right:1px solid #dedfe1; width:25%} .news-font-box2.right a>div:nth-of-type(1)>p:nth-of-type(1){ position:relative; font-size: 20px; color: #333333; font-weight: bold; line-height: 1} .news-font-box2.right a>div:nth-of-type(1)>p:nth-of-type(1):after{ position: absolute; content: ""; height: 2px; width: 20%; background: #a3a4ac; left: 0; bottom:-50%} .news-font-box2.right a p:nth-of-type(2){ font-size: 14px; color: #a3a4ac} .news-font-box2.right a>div:nth-of-type(2) p:nth-of-type(1){ color: #333333; font-size: 16px;} .news-font-box2.right a>div:nth-of-type(2) div:nth-of-type(1){ color: #a3a4ac; font-size: 12px; line-height: 1.5rem} } @media(max-width: 991.98px){ .news-font-box>div:nth-of-type(1){ border-right:1px solid #dedfe1; width:35%} .news-font-box2.right a>div:nth-of-type(1){ width: 25%;} .news-font-box2.right a>div:nth-of-type(2){ width: 75%;} } .pro-news-message{} .pro-news-message .news-font-box3{ width: 49%;} .news-font-box3{ background: #fff; transition: all 0.5s} .news-font-box3:hover{ background: #0e4b99;} .news-font-box3 a>div:nth-of-type(1){ transition: all 0.5s} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1){ position: relative; width: 20%; } .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(2){ position: relative; width: 80%; } .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1):after{ position: absolute; content: ""; background: #cccccc; display: block; width: 0px; height: 100%; top: 0; bottom: 0; right: 0;margin: auto;} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1) p:nth-of-type(1){ color: #333333; font-size: 50px; line-height: 1.3; transition: all 0.5s} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1) p:nth-of-type(2){ color: #999; font-size: 16px; line-height: 1;transition: all 0.5s} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(2) p:nth-of-type(1){ font-size: 18px; color: #626364;} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(2) div:nth-of-type(1){ font-size: 14px; color: #999999;} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(2) div:nth-last-of-type(1){ font-size: 16px;color: #999999;} .news-detail{} .news-detail span{ font-size: 16px; text-transform: uppercase; color: #999999;} .news-detail i{ transition: all 0.5s; display: block; height: 7px; width: 20px;} .news-detail i svg{ width: 30px; height: 30px; fill: #c3c3c3} .news-font-box3:hover a>div:nth-of-type(1)>div:nth-of-type(1) p:nth-of-type(1),.news-font-box3:hover a>div:nth-of-type(1)>div:nth-of-type(1) p:nth-of-type(2),.news-font-box3:hover a>div:nth-of-type(1)>div:nth-of-type(2) p:nth-of-type(1),.news-font-box3:hover a>div:nth-of-type(1)>div:nth-of-type(2) div:nth-of-type(1){ color: #fff;} .news-font-box3:hover .news-detail span { color: #fff; fill: #fff} .news-font-box3:hover .news-detail i { transform: translateX(50%;)} .news-font-box3:hover .news-detail i svg{ fill: #fff; } @media(max-width: 991.98px) { .pro-news-message .news-font-box3{ width: 100%;} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1){ position: relative; width: 30%; } .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1) p:nth-of-type(1){ color: #333333; font-size: 20px; line-height: 1.3} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(1) p:nth-of-type(2){ color: #999; font-size: 14px; line-height: 1} .news-font-box3 a>div:nth-of-type(1)>div:nth-of-type(2){ width: 70%;} } /*友情链接*/ .index-link-box{} .index-link-box i svg{ width: 26px; height: 26px;} .index-link-box>span:nth-of-type(1){ text-transform: uppercase; font-size: 26px; color: #0d3983} .index-link-box>span:nth-of-type(n+2) a{ font-size: 16px; color: #666;} /*新闻详情*/ .news-big-title{ font-size:24px; text-align: center; } .news-time-click{ font-size:16px;text-align: center; color: #666; border-bottom:1px #e7e7e7 solid; } .news-detail-content{ font-size:16px; color:#666; line-height:35px; padding:20px 0;} .newsPage{ font-size:16px; border-top:1px #e7e7e7 solid; line-height:30px;} .newsPage a{color:#999} @media(max-width: 991.98px){ .news-big-title{ font-size:18px; text-align: center; } .news-time-click{ font-size:14px;} } .pro-title-all{} .pro-title-all p:nth-of-type(1) span:nth-of-type(1){ font-size: 30px; color: #333;} .pro-title-all p:nth-of-type(1) span:nth-of-type(2){ font-size: 16px; color: #999; text-transform: uppercase} .pro-title-all p:nth-of-type(2) { font-size:16px; color:#666666} .pro-title-all p:nth-of-type(1) i{ display: inline-block; width: 3px; height: 30px; background: #d7132e} .pro-title-all a:nth-last-of-type(1){ color: #999; font-size: 16px;} .pro-title-all a:nth-last-of-type(1):hover{ color: #c40e25} .list-name-title{ position: relative} .list-name-title:after{ position: absolute; content: ""; background: #cc0000; width: 3px; height: 30px;top: 0; bottom: 0; left: 0; margin: auto} .pro-p-title{ font-size: 18px; color: #333;} .pro-title-all2{} .pro-title-all2 p:nth-of-type(1) span:nth-of-type(1){ font-size:24px; color: #333333;} .pro-title-all2 p:nth-of-type(1) span:nth-of-type(2){ font-size: 16px; color: #999999; text-transform: uppercase} .pro-title-all2 p:nth-of-type(2) { font-size:16px; color:#666666} .pro-title-all2 p:nth-of-type(1) i{ display: inline-block; width: 3px; height: 30px; background: #d7132e} .left-li-item{} .left-li-item a p:nth-of-type(1){ font-size: 16px; color: #666; line-height: 2rem;} .left-li-item a p:nth-of-type(1) i{ position: relative; background: #cc0000; color: #fff; font-size: 14px; font-weight: inherit } .left-li-item a p:nth-of-type(1) i:after{ position: absolute; content: "";left:-10px; top:0; bottom:0; margin:auto;background: #cb0631; width: 5px; height:5px; border-radius: 100%; display: block } .left-li-item a p:nth-of-type(2){ font-size: 14px; color: #999;} .left-li-item:nth-of-type(1) a p:nth-of-type(1) i{ background: #cc0000} .left-li-item:nth-of-type(2) a p:nth-of-type(1) i{ background: #cc0000} .left-li-item:nth-of-type(3) a p:nth-of-type(1) i{ background: #cc0000} .left-li-item:nth-of-type(n+4) a p:nth-of-type(1) i{ background: #bdbdbd} @media(max-width: 1299.98px) { .pro-title-all2 p:nth-of-type(1) span:nth-of-type(1){ font-size:18px; color: #333333;} .pro-title-all2 p:nth-of-type(1) span:nth-of-type(2){ font-size: 14px; color: #999999; text-transform: uppercase} } /*案例模块样式*/ .case-big-box{} .case-big-box .case-box-font{ background: #fff; width: 90%; transform: translate(5%,-20%); transition: all 0.5s} .case-big-box .case-box-font .case-font-one p:nth-of-type(1){ color: #999; font-size: 16px; text-transform: uppercase; font-family: Arial} .case-big-box .case-box-font .case-font-one p:nth-of-type(2){ color: #333333; font-size: 22px;} .case-big-box:hover .case-box-font{ background: #ca1323} .case-big-box .case-box-font>div:nth-last-of-type(1) span{background: #f1f1f1; padding: 0.2rem 0.75rem; transition: all 0.5s} .case-big-box:hover .case-font-one p:nth-of-type(1){ color: #e58991} .case-big-box:hover .case-font-one p:nth-of-type(2){ color: #fff;} .case-big-box .case-box-font>div:nth-last-of-type(1) span svg{ fill: #bbbbbb} .case-big-box:hover .case-box-font>div:nth-last-of-type(1) span svg{ fill: #fff} .case-big-box:hover .case-box-font>div:nth-last-of-type(1) span{background: rgba(255,255,255,0.2); } .case-big-box:hover .case-box-font>div:nth-last-of-type(1) span{ transform: translateY(10%)} .case-big-box .case-img{ overflow: hidden; transition: all 0.5s} .case-big-box .case-img img{ transition: all 0.5s} .case-big-box:hover .case-img img{ transform: scale(1.05)} .case-big-box:hover .case-box-font{ transform: translate(5%,-30%); } .link-box{ overflow: hidden;} .link-box img{ transition: all 0.5s;transform: scale(1.02);} .link-box:hover img{ transform: scale(1); } .link-box { transition: all 0.5s} .link-box>div:nth-last-of-type(2) { border: 1px solid #f1f1f1; transition: all 0.5s } .link-box div:nth-last-of-type(1){ text-align: center; font-size: 16px; color: #666;} .link-box:hover>div:nth-last-of-type(2) { box-shadow: 0 0 21px rgba(0,0,0,0.12)} .ys-font{} .case-img .ys-font>p:nth-of-type(1){ font-size: 24px;} .case-img .ys-font>div:nth-of-type(1){ font-size: 16px; line-height: 2} .bg-red{ background: #0075c4;} input{ font-size: 16px;} img#verifyImg { height: 57px; } /*关于我们*/ .about-box-img{} .about-box-img>div:nth-of-type(1){ background: #ca1323; width:70%; height: 520px;} .about-box-img>div:nth-of-type(1) i{ position: relative; padding: 2rem} .about-box-img>div:nth-of-type(1) i:after{ position: absolute; content: ""; display: block; padding: 1.5rem; background: rgba(255,255,255,0.08); left: 80%; top: 100%} .about-box-img>div:nth-of-type(1) i:before{ position: absolute; content: ""; display: block; padding: 1.5rem; background: rgba(255,255,255,0.08);left:40%; top:70%} .about-box-img>div:nth-of-type(2){ transform: translate(28%,-90%)} .about-box-img>div:nth-of-type(1) span{ display: block; font-family: Bahnschrift; color: rgba(255,255,255,0.15);writing-mode: tb-rl; font-size: 55px; text-transform: uppercase; transform: translate(20%,28%) scale(1.28,1); } .right-box-about{ background: url("../img/dian.png") no-repeat 100% 10%;} .xm_title{ position: relative;} .xm_title:before{ position: absolute; content: ""; width: 4px; height: 80%; margin: auto; background: #ca1323; left: 0; top: 0%; bottom: 0; margin: auto; } .xm_title>div:nth-of-type(1){ font-size: 30px; color: #282828;} .xm_title>div:nth-of-type(2){ font-size: 30px; color: #999; text-transform: uppercase; font-size: 14px;} .aboutys-item{ width:calc(100% / 2); font-size: 16px; color: #596067} .aboutys-item i svg{ font-weight: bold; font-size: 30px; width: 15px; height: 15px; fill: #cd202f} .aboutys-item i { padding: 0.8rem; background: #f5f5f5; transition: all 0.5s} .aboutys-item:hover i svg,.aboutys-item.active i svg{ font-size: 20px; width: 15px; height: 15px; fill: #fff} .aboutys-item:hover i,.aboutys-item.active i { background: #ca1323} .about-conent{ font-size: 16px; color: #666; line-height: 2rem;} .about-btn{ position: relative; width: 225px; font-size: 16px; padding: 1rem} .about-btn:before{ position:absolute; content: ""; background: #ca1323; height: 100%; width: 225px; font-size: 16px; transform: skewX(-10deg); z-index: 0; display: block; border-radius: 0.25rem} .about-btn span a{ position: relative; color: #fff; z-index: 20} .about-btn:after { position:absolute; content: ""; background: #ca1323; height: 100%; width:100%; font-size: 16px; transform: skewX(-10deg); z-index: 0; display: block; border-radius: 0.25rem; transform: scaleX(0); z-index: 11; transition: all 0.5s; transform-origin: center center;} .about-btn:hover:after{background: #cf3e48; transform: scaleX(1) skewX(-10deg); transform-origin: center center;} .about-btn2{ position: relative; font-size: 16px; padding: 1rem} .about-btn2:before{ position:absolute; content: ""; background: #e9e7e8; height: 100%; font-size: 16px; transform: skewX(-10deg); z-index: 0; display: block; border-radius: 0.25rem; padding: 0.5rem 0.8rem; width: 100%} .about-btn2 span a{ position: relative; color: #fff; z-index: 20} .about-btn2:after { position:absolute; content: ""; background: #ca1323; height: 100%; width:100%; font-size: 16px; transform: skewX(-10deg); z-index: 0; display: block; border-radius: 0.25rem; transform: scaleX(0); z-index: 11; transition: all 0.5s; transform-origin: center center;} .about-btn2:hover:after{background: #cf3e48; transform: scaleX(1) skewX(-10deg); transform-origin: center center;} .about-btn2 span{ position: relative; z-index: 99; color: #282828} .swiper-slide-thumb-active .about-btn2:before{background: #ca1323; color: #fff } .swiper-slide-thumb-active .about-btn2 span{ color: #fff} /*相册集合*/ .ygfc-box{ height: 345px;} .xc-font-mask { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0;left: 0;right: 0; margin: auto; transition: all 1.0s; } .ygfc-box .xc-font-mask i{ opacity: 0;transform: translateY(-30%); transition: all 1.0s; } .ygfc-box:hover .xc-font-mask i{ opacity: 1;transform: translateY(10%); transition: all 1.0s; } .ygfc-box .xc-font-mask div{ opacity: 0;transform: translateY(60%); transition: all 1.0s; } .ygfc-box:hover .xc-font-mask div{ opacity: 1;transform: translateY(10%); transition: all 1.0s; } .ygfc-box .embed-responsive:after{ position: absolute; content: ""; background: rgba(202,19,35,0.9); width: 100%; height: 100%; top: 0;transition: all 0.5s; transform: translateY(100%)} .ygfc-box:hover .embed-responsive:after{ background: rgba(202,19,35,0.9);transform: translateY(0) } .xc-font-mask svg{ fill: #fff; font-weight: 100;} .xc-font-mask div{ font-size: 16px; color: #fff} /*新闻模块*/ .news-mq-box{ box-shadow: 0 0 20px rgba(0,0,0,0.1)} .news-font-1{} .news-time-sj span{ width: 40%; background: rgba(202,19,35,1); position: absolute; bottom: 0; left: 0; color: #fff; font-size: 16px;} .news-font-1 .news-title-1{ font-size: 20px; color: #333333} .news-font-1 .news-des{ font-size: 16px; color: #999; border-bottom: 1px #e8e8e8 dashed} .news-more1{ position: relative; color: #ca1323; text-transform: uppercase; font-size: 16px; font-weight: bold} .news-more1:after{ position: absolute; content: ""; width: 5%; height: 2px; background: #ca1323; left: 0; top: 0; bottom: 0; margin: auto; transition: all 0.5s} .news-mq-box:hover .news-more1:after{ width: 10%} .news-mq-box .news-more1 span{ display:block;transform: translateX(0%); transition: all 0.5s} .news-mq-box:hover .news-more1 span{ transform: translateX(20%)} /*产品列表*/ .left-pro-title{} .left-pro-title p:nth-of-type(1){ font-size: 30px; color: #003271; text-transform: uppercase; letter-spacing: -0.1rem; font-weight: bold} .pro-left-item{ border-bottom: 1px solid #f2f2f2; transition: all 0.5s; position: relative} .pro-left-item:after{ position: absolute; content: ""; width: 100%; height: 100%; background: #e80113; transform: scaleX(0); transform-origin: left center;transition: transform 0.5s; border-radius: 0 5rem 5rem 0 } .pro-left-item:hover:after,.pro-left-item.current:after{ transform: scaleX(1); border-radius: 0 } .pro-left-item>span:nth-last-of-type(1){ width: 28px; height: 28px; background: #fff; border-radius: 100%; position: relative; z-index: 999;transition: all 0.5s; display: block; } .pro-left-item>span:nth-last-of-type(1) i svg{ width: 20px; height:20px; fill: #fff;position: relative;z-index: 999; transition: all 0.5s; } .pro-left-item:hover>span:nth-last-of-type(1),.pro-left-item.current>span:nth-last-of-type(1){ transform: translateX(-50%) } .pro-left-item>i{ font-weight: bold; font-size: 50px; font-style: italic; color: #f2f2f2;position: relative;z-index: 999 } .pro-left-item>div:nth-of-type(1) span:nth-of-type(1){ font-size: 18px; color: #666666;position: relative;z-index: 999 } .pro-left-item>div:nth-of-type(1) span:nth-of-type(2){ font-size: 10px; color: #b9b9b9; text-transform: uppercase;position: relative;z-index: 999 } .pro-left-item:hover>div:nth-of-type(1) span:nth-of-type(1) a,.pro-left-item:hover>div:nth-of-type(1) span:nth-of-type(2) a,.pro-left-item.current>div:nth-of-type(1) span:nth-of-type(1) a,.pro-left-item.current>div:nth-of-type(1) span:nth-of-type(2) a{ color: #fff} .pro-left-item:hover>span:nth-last-of-type(1) i svg,.pro-left-item.current>span:nth-last-of-type(1) i svg{ fill: #e80113; } .pro-left-item:hover>div:nth-of-type(1) a span:nth-of-type(1),.pro-left-item:hover>div:nth-of-type(1) a span:nth-of-type(2),.pro-left-item.current>div:nth-of-type(1) a span:nth-of-type(1),.pro-left-item.current>div:nth-of-type(1) a span:nth-of-type(2){ color: #fff} .left-pro-tel{} .left-pro-tel i{ width: 35px; height: 35px; fill: #22497f} .left-pro-tel div p:nth-of-type(1){ font-size: 14px; color: #003271} .left-pro-tel div p:nth-of-type(2){ font-size: 24px; color: #22497f} .left-pro-btn{ background: #0075c4; border: 1px solid #0075c4; padding:0.7rem 2rem; position: relative} .left-pro-btn svg{ width: 30px; height: 30px; fill: #fff} .left-pro-btn a{ font-size: 14px; color: #fff; position: relative; z-index: 5} .left-pro-btn:after{ position: absolute;content: "";left: 0; top:0; background: #b20310;transform-origin: right center; width: 100%; height:100%; transform:scaleX(0); margin: auto; transition: transform 0.5s; z-index:0; } .left-pro-btn:hover:after{ transform-origin: left center; transform: scaleX(1); } .left-pro-btn2{ border: 1px solid #e7e7e7; padding:0.7rem 2rem; position: relative} .left-pro-btn2 svg{ width: 26px; height: 26px; fill: #666666} .left-pro-btn2 a{ font-size: 14px; color: #666666; position: relative; z-index: 5} .left-pro-btn2:after{ position: absolute;content: "";left: 0; top:0; background: #b20310;transform-origin: right center; width: 100%; height:100%; transform:scaleX(0); margin: auto; transition: transform 0.5s; z-index:0; } .left-pro-btn2:hover:after{ transform-origin: left center; transform: scaleX(1); } .left-pro-btn2:hover a{ color: #fff;} .left-pro-btn2:hover a svg{ fill: #fff} @media(max-width: 991.98px){ .left-pro-btn{ width: 48%; padding:0.3rem 1rem; position: relative} .left-pro-btn2{ padding:0.3rem 1rem;width: 48%; position: relative} } .hot-left{ width: 65%} .hot-right{ background: #fff; width: 35%} .hot-right p:nth-of-type(1){ font-size: 24px; color: #003271; font-weight: bold;} .hot-right div{ font-size: 14px; color: #666666; line-height: 2} .ty-ys{} .ty-ys .ty-item i svg{ width: 20px; height: 20px; fill: #e80113} .ty-ys .ty-item span{ color: #e80113} .right-btn{} .right-btn span{ display: block; padding: 0.3rem 1rem; font-size: 14px; color: #939393; position: relative; overflow: hidden;} .right-btn span a{ position: relative; z-index: 999} .right-btn span:nth-of-type(1){ border: 1px #939393 solid; border-right: 0;} .right-btn span:nth-of-type(2){ border: 1px #e80113 solid; background: #e80113; border-right: 0;} .right-btn span:nth-of-type(2) a,.right-btn span:nth-of-type(2):hover a{ color: #fff} .right-btn span:nth-of-type(1):hover{border: 1px #b20310 solid; border-right: 0;} .right-btn span:nth-of-type(2):hover{border: 1px #b20310 solid; } .right-btn span:hover a{ color: #fff;} .right-btn span:after{ position: absolute;content: "";left: 0; top:0; background: #b20310;transform-origin: right center; width: 100%; height:100%; transform:scaleX(0); margin: auto; transition: transform 0.5s; z-index:0; } .right-btn span:hover:after{ transform-origin: left center; transform: scaleX(1); } .right-btn2{} .right-btn2 span{ display: block; padding: 0.3rem 1rem; font-size: 14px; color: #939393; position: relative; overflow: hidden;} .right-btn2 span a{ position: relative; z-index: 999} .right-btn2 span:nth-of-type(1){ border: 1px #003271 solid; border-right: 0; background: #003271; } .right-btn2 span:nth-of-type(2){ border: 1px #e80113 solid; background: #e80113; border-right: 0;} .right-btn2 span:nth-of-type(2) a,.right-btn span:nth-of-type(2):hover a{ color: #fff} .right-btn2 span:nth-of-type(1):hover{border: 1px #b20310 solid; border-right: 0;} .right-btn2 span:nth-of-type(2):hover{border: 1px #b20310 solid; } .right-btn2 span:hover a{ color: #fff;} .right-btn2 span:nth-of-type(1) a{ color: #fff} .right-btn2 span:after{ position: absolute;content: "";left: 0; top:0; background: #b20310;transform-origin: right center; width: 100%; height:100%; transform:scaleX(0); margin: auto; transition: transform 0.5s; z-index:0; } .right-btn2 span:hover:after{ transform-origin: left center; transform: scaleX(1); } #hot-pro.swiper-container-horizontal>.swiper-pagination-bullets { bottom: 30px!important; } #hot-pro .hot-prv-btn, #hot-pro .hot-next-btn { position: absolute; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; z-index: 29; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;} #hot-pro .hot-prv-btn { right: 60px; bottom: 30px; } #hot-pro .hot-next-btn { right: 20px; bottom: 30px; } #hot-pro .hot-btn svg{ width: 40px; height: 40px; fill: #e80113; z-index: 9999} #hot-pro .swiper-pagination .swiper-pagination-bullet { background: #d81e06} @media(max-width: 991.98px){ .hot-left{ width: 100%} .hot-right{ width: 100%} } /*发展历程*/ /*案例*/ .case-btn-all{ width: 100px; height: 40px; display: flex; background: #fff; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto; z-index: 9; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;} .case-btn-all svg{ width: 50px; height: 50px; fill: #e80113} #case-box .case-prev{ left: 10.4vw; } #case-box .case-next{ right: 10.4vw; } @media(max-width: 991.98px){ #case-box .case-prev{ left: 1.4vw; } #case-box .case-next{ right: 1.4vw; } .case-btn-all{ width: 30px; height: 30px; display: flex; background: #fff; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto; z-index: 9; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;} .case-btn-all svg{ width: 20px; height: 20px; fill: #e80113} } .case-detail{ overflow: hidden; background: #000} .case-font{} .case-font-all{ z-index: 9999; width: 80%; background: #fff; margin: auto; left: 10%; right: 10%; bottom: -110%; transition: all 0.5s} .case-font p:nth-of-type(1){ font-size: 20px; color: #003271; position: relative} .case-font p:nth-of-type(1):after{ position: absolute; content: "“"; font-weight: bold; font-size: 20px; color: #e80113; left: -1%; top: 5% top: 0; bottom: 0; margin: auto; } .case-font p:nth-of-type(1):before{ position: absolute; content: "CASE"; color: #ededed; font-size: 40px; font-style: italic;top: -50%;bottom: -50%; margin: auto; font-weight: bold} .case-font p:nth-of-type(1) span{ position: relative; z-index: 999} .case-font div:nth-of-type(1){ font-size: 14px; color: #666666;} .case-more{ background: #e80113; font-size: 16px; color: #fff; text-decoration: underline; text-transform: uppercase; font-style: italic} .case-more a{ color: #fff} .swiper-slide-active .case-font-all{ bottom: 10%; opacity: 1} #case-box .swiper-slide-prev img,#case-box.swiper-slide-next img { opacity: 0.5; background: #000} @media(max-width: 991.98px){ .case-font p:nth-of-type(1){ font-size: 18px; color: #003271; position: relative} .case-font p:nth-of-type(1):after{ position: absolute; content: "“"; font-weight: bold; font-size: 18px; color: #e80113; left: -1%; top: 5% top: 0; bottom: 0; margin: auto; } .case-font p:nth-of-type(1):before{ position: absolute; content: "CASE"; color: #ededed; font-size: 40px; font-style: italic;top: -50%;bottom: -50%; margin: auto; font-weight: bold; display: none} } /*新闻*/ .news_img_right{ } /*关于我们*/ .about-box-bj{ background: url("../img/index_about_bj.jpg") no-repeat center top; } .about-datil{ font-size: 16px; line-height: 2; color: #fff; width: 75%} .about-sub-nav{ background: rgba(0,0,0,0.5); width: 100%;} .about-nav-item{flex: 0 0 auto; width: 25%; border-right: 1px #707070 solid; transition: all 0.5s} .about-nav-item:hover{ background: #e80113} .about-nav-item i svg{ width: 50px; height: 50px; fill: #fff;} .about-nav-item a p{ font-size: 16px; color: #fff} @media(max-width: 991.98px) { .about-datil{ font-size: 12px; line-height: 2; color: #fff; width: 100%} .about-nav-item{flex: 0 0 auto; width: 50%; border-right: 1px #707070 solid; border-bottom: 1px #707070 solid; transition: all 0.5s; } .about-nav-item:nth-of-type(2n){border-right: 0px #707070 solid;} .about-nav-item:nth-of-type(n+3){border-bottom: 0px #707070 solid;} .about-nav-item i svg{ width: 20px; height: 20px; fill: #fff;} .about-nav-item a p{ font-size: 14px; color: #fff} } .pro-item{ overflow: hidden} .pro-item img{ transition: all 0.5s} .pro-item>div{ overflow: hidden} .pro-item .pro-font{ position: absolute; content: "";left: 0; bottom: 0; background: rgba(0,0,0,0.5); font-size: 14px;transition: all 0.5s; } .pro-item .pro-font a{ color: #fff;} .pro-item:hover img{ transform: scale(1.05)} .pro-font-big{ position: absolute; left: 0;right: 0;top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: block; z-index: 999; transform: scale(1.25); transition: all 0.5s; opacity: 0 } .pro-font-big p:nth-of-type(1){ font-size: 20px; font-weight: bold; color: #fff} .pro-font-big div:nth-of-type(1){ font-size: 14px; color:#cdcdcd} .pro-item:hover .pro-font-big{ transform: scale(1); opacity:1; } .pro-item:hover .pro-font{ transform: scale(1.05); transition: all 0.5s; opacity: 0 } /*优势模块*/ .Ys-big-box{} .Ys-item{flex: 0 0 auto; width: 33.33%} .ys-tong-item{} .ys-tong-item .ys-num{ position: relative; background: #ca1323; width: 46px; height: 46px; font-family: Bahnschrift;} .ys-tong-item .ys-num:after{ position: absolute; content:""; left: 1px; top: 1px;bottom: 1px; right: 1px; margin: auto; display: block; width: 42px; height:42px;background: #ca1323;border: 2px solid #fff;} .ys-tong-item .ys-num span{ position: relative; z-index: 2;} .ys-font-box{} .ys-font-box>div:nth-of-type(1){ font-size: 13px; color: #999; text-transform: uppercase} .ys-font-box>div:nth-of-type(2) { font-size: 22px; color: #333333; font-weight: bold} .ys-font-box>div:nth-of-type(2) span{ font-size: 22px; color: #ca1323;} .ys-font-box>div:nth-of-type(3){ font-size: 15px; color: #999;} .ys-tong-item>div:nth-of-type(1){ position: relative} .ys-tong-item:not(:nth-last-of-type(1))>div:nth-of-type(1):after{ position: absolute; content: "";left: 0;right: 0; margin: auto; height: 100%; width: 1px; border-left:1px dotted #999999} .Ys-item.Ys-itemR{} .Ys-item.Ys-itemR .ys-tong-item>div:nth-of-type(1){ order: 3;} .Ys-item.Ys-itemR .ys-tong-item div.ys-font-box{ order: 2;} .Ys-item.Ys-itemR .ys-font-box{ text-align: right} @media(max-width: 991.98px){ .Ys-item.Ys-itemR .ys-tong-item>div:nth-of-type(1){ order: 2;} .Ys-item.Ys-itemR .ys-tong-item div.ys-font-box{ order: 3;} .Ys-item.Ys-itemR .ys-font-box{ text-align: left} .ys-tong-item>div:nth-of-type(1):after{ position: absolute; content: "";left: 0;right: 0; margin: auto; height: 100%; width: 1px; border-left:1px dotted #999999} .Ys-item.Ys-itemR .ys-tong-item:nth-last-of-type(1)>div:nth-of-type(1):after{ position: absolute; content: "";left: 0;right: 0; margin: auto; height: 100%; width: 0px; border-left:0px dotted #999999} } .ys-center-img{ display: flex; justify-content: center; align-items: center; flex-direction: column;} .ys-dot svg{ width:38px; height: 38px; fill: #fff} .ys-dot{ background: url("../img/ys_k.png") no-repeat center center;} .Right-ys-box .R-ys-item{ width: 100%;} .R-ys-item .R-font>div:nth-of-type(1)>span:nth-of-type(2){ font-size: 18px; font-weight: bold; background: url("../img/ys_dot.png") no-repeat center center; display: block; order:2!important; } .R-ys-item .R-font>div:nth-of-type(1)>span:nth-of-type(1){font-weight: bold; color: #003271; font-size: 18px;order:1!important;} .R-ys-item .R-font>div:nth-of-type(2){ font-size: 14px; color: #666666; width: 90%; line-height: 1.5; text-align: right; float: right;} .Right-ys-box{ position: relative; z-index: 999} .Right-ys-box .R-ys-item{ width: 100%;} .Right-ys-box .R-ys-item:nth-of-type(2){ width: 85%} .R-font >div:nth-of-type(1){ position: relative} .R-font >div:nth-of-type(1):after{ content: ""; top: 0; bottom: 0; margin: auto; left: 0%; height: 1px; background: #e3e3e3; width: auto; flex: 1; align-items: revert; float: left; order:0!important; } .Right-ys-box .R-ys-item:nth-of-type(2){ width: 85%} .R-ys-item .R-font{ width: 100%;} .Right-ys-box.Left .R-ys-item .R-font>div:nth-of-type(1)>span:nth-of-type(2){ font-size: 18px; font-weight: bold; background: url("../img/ys_dot.png") no-repeat center center; display: block; order:0!important; } .Right-ys-box.Left .R-ys-item .R-font>div:nth-of-type(1)>span:nth-of-type(1){font-weight: bold; color: #003271; font-size: 18px;order:2!important;} .Right-ys-box.Left .R-font >div:nth-of-type(1):after{ content: ""; top: 0; bottom: 0; margin: auto; left: 0%; height: 1px; background: #e3e3e3; width: auto; flex: 1; align-items: revert; float: left; order:3!important; } @media(max-width: 1199.98px){ .Ys-item{flex: 0 0 auto; width: 50%} .Ys-item:nth-of-type(2){ display: none;} .Right-ys-box .R-ys-item:nth-of-type(2){ width: 100%} .Right-ys-box.Left .R-ys-item:nth-of-type(2){ width: 100%} } @media(max-width: 991.98px){ .Ys-item{flex: 0 0 auto; width: 100%} } .prolist-item{ display: block; position: relative; background: #fff; height: 100%; width: 100%; overflow: hidden;} .prolist-item:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width:1px; height: 100%;right: 0;top: 0; background: #eff1f7; z-index: 999;} .prolist-item:not(:nth-last-of-type(1)):before{position: absolute; content: ""; width:4px; height: 10%;left:0px;top: 0; background: #fff; transition: all 0.75s; z-index: 9999} .prolist-item:hover:before{ background: #e80113; height: 10%; top:90%; } .prolist-item img{ transition: all 0.5s;filter: contrast(1) brightness(1); -webkit-transition: all 1s; -webkit-transform: scale(1);transform: scale(1)} .prolist-item:hover img{ transform: scale(1.02); filter: contrast(1.25) brightness(1.25); -webkit-transition: all 1s; -webkit-transform: scale(1.05); } .list-img img{ transform: scale(0.9)} .prolist-item:nth-last-of-type(1) img{ transform: scale(1.25)} .prolist-item p:nth-of-type(1){ font-size: 18px; color: #333333} .prolist-item p:nth-of-type(2){ font-size: 12px; color: #999999} .pro-ad-font{ position: absolute; top: 0; left: 0;right: 0; bottom: 0; margin: auto} .pro-ad-font p:nth-of-type(1){ font-size: 20px; color: #ffffff; font-weight: bold} .pro-ad-font p:nth-of-type(2){ font-size: 12px; color: #ffffff; } .pro-ad-font p:nth-of-type(3) span{ background: #80c26a; color: #fff; font-size: 12px; padding: 0.75rem; border-radius: 2rem; transition: all 0.5s } .pro-ad-font p:nth-of-type(4) span{ background: #e80113; color: #fff; font-size: 12px; padding: 0.75rem; border-radius: 2rem;transition: all 0.5s } .pro-ad-font p:nth-of-type(3) span:hover{ background: #0761aa;} .pro-ad-font p:nth-of-type(4):hover span{ background: #0761aa;} .right_box .index_title p:nth-of-type(1){ font-size: 28px; color: #333333} .right_box .index_title p:nth-of-type(1) span{ font-weight: bold; font-size: 28px; color: #e80113} .pro-left-list{ } .pro-title{ background: #e80113; position: relative; font-size: 30px; overflow: hidden} .pro-title:after{position: absolute; content: ""; background: url("../img/dian.png") no-repeat right top; top:0; right:0%; width: 20%; height:40px; } .pro-title:before{position: absolute; content: ""; background: url("../img/dian.png") no-repeat right top; bottom:0; left:0%; width: 20%; height:40px; } .pro-title span{ font-size: 14px; text-transform: uppercase; position: relative} .pro-title span:before{ position:absolute; content: ''; height:1px; background: #fff; width: 20%;left:10%; top:0; bottom:0; margin: auto;} .pro-title p{ position:relative} .pro-title p:after{ position:absolute; content: attr(data-title); text-transform: uppercase; color:rgba(255,255,255,0.05); bottom: -160%; left:0; right: 0; margin:auto; font-size: 60px; font-family: 'impact'; z-index: 99} .proname-box{ width:100%;} .proname-item{ overflow: hidden; height:65px; padding-left:20%; font-size: 18px; color: #333333; display: flex; align-items: center;position: relative; transition: all 0.5s} .proname-item:after{ position:absolute;content: ""; left:0; bottom:0; width: 100%; background:#f6f6f6; height:100%; z-index:9; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center; } .proname-item:hover:after{ -webkit-transform-origin: left center;transform-origin: left center; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);} .proname-item a{ display:flex;align-items: center; position: relative; width: 100%; margin: 0 auto; height:100%; z-index: 999} .proname-item a:after{position: absolute; content: ""; height:1px; border-bottom:1px dashed #e5e5e5; width: 90%; bottom:0; left:-30%; right:0; margin:auto;} .proname-item:hover a{ color: #0e0e0e} .proname-item:before{ position: absolute; content:""; width: 5px; height:0%; background: #c40e25; left:0; transition: all 0.5s;transform-origin: top center; z-index: 99} .proname-item:hover:before{ height:100%;transform-origin: bottom center} .proname-item:hover a:after{ height:0;border-bottom:0px dashed #e5e5e5; } .proname-item i{ display: inline-block; float:right; background: url("../img/left_dot.png") no-repeat left center; width: 42px; height:28px; z-index: 999; position: absolute; right: 10%; transition: all 0.5s; transform: translateX(200%); opacity: 0.5} .proname-item:hover i{ transform: translateX(0%); opacity: 1} .pro-box-two{ background: #fff; border-radius: 5px; border: 1px solid #e9ebef; transition: all 0.5s; height:100%;} .pro-box-two a div:nth-of-type(1){ font-size: 16px; color: #282828;} .pro-box-two img{ transition: transform 0.5s} .pro-box-two a p:nth-of-type(2){ position: absolute; bottom: 10%; font-size: 14px; color: #ffffff; border-radius:35px; border: 1px solid #fff; width: 150px; height:35px; line-height: 35px; margin: auto;left: 0; right: 0; text-align: center; transform: opacity 0.5s; opacity: 0; display: block; transition: all 0.5s; bottom: -10%} .pro-box-two:hover,.pro-box-two.on{ background:url("") no-repeat top center #e80113} .pro-box-two.on a div{ color: #fff; } .pro-box-two:hover a p:nth-of-type(2){ opacity: 1;bottom: 10%} .pro-box-two:hover a div:nth-of-type(1){ color: #fff;} .pro-box-two:hover img{ transform:translateY(-20px) scale(0.95);} .proname-item-sub,.proname-item-sub.on{ overflow: hidden; height:55px; padding-left:20%; font-size: 18px; color: #333333; display: flex; align-items: center;position: relative; transition: all 0.5s} .proname-item-sub:after,.proname-item-sub.on:after{ position:absolute;content: ""; left:0; bottom:0; width: 100%; background:#e80113; height:100%; z-index:9; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center; } .proname-item-sub:hover:after{ -webkit-transform-origin: left center;transform-origin: left center; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);} .proname-item-sub a{ display:flex;align-items: center; position: relative; width: 100%; margin: 0 auto; height:100%; z-index: 999} .proname-item-sub a:after{position: absolute; content: ""; height:1px; border-bottom:1px dashed #e5e5e5; width: 90%; bottom:0; left:-30%; right:0; margin:auto;} .proname-item-sub.on a:after{border-bottom:0px dashed #e5e5e5;} .proname-item-sub:hover a{ color: #fff} .proname-item-sub:before,.proname-item-sub.on:before{ position: absolute; content:""; width: 5px; height:0%; background: #80c26a; left:0; transition: all 0.5s;transform-origin: top center; z-index: 99} .proname-item-sub:hover:before{ height:100%;transform-origin: bottom center} .proname-item-sub:hover a:after{ height:0;border-bottom:0px dashed #e5e5e5; } .proname-item-sub i{ display: inline-block; float:right; background: url("../img/left_dot.png") no-repeat left center; width: 42px; height:28px; z-index: 999; position: absolute; right: 10%; transition: all 0.5s; transform: translateX(200%); opacity: 0.5} .proname-item-sub:hover i{ transform: translateX(0%); opacity: 1} .proname-item-sub.on{ background: #e80113} .proname-item-sub.on a{ color: #fff} .proname-item-sub.on:before{ position: absolute; content:""; width: 5px; height:100%; background: #80c26a; left:0; transition: all 0.5s;transform-origin: top center; z-index: 99} .proname-item-sub.on i{ display: inline-block; float:right; background: url("../img/left_dot.png") no-repeat left center; width: 60px; height:30px; z-index: 999; position: absolute; right: 10%; transition: all 0.5s; transform: translateX(0%); opacity: 1} .pro_all_content{ display: block; width: 70% } .pro_all_content p:nth-of-type(1){ font-size: 22px; font-weight: bold; } .pro_all_content p:nth-of-type(2){ color: #999999; font-size: 14px;} .pro_all_content table{ border:1px solid #f2f2f2; width: 100%;} .pro_all_content td{ color: #666666; font-size: 16px; line-height:36px;} .pro_all_content tr td:nth-of-type(2){ padding-left: 5%;} .pro_all_content tr:nth-child(even){ background: #fff} .pro_all_content tr:nth-child(odd){ background: #f6f6f6} .pro_all_content tr:nth-child(odd) td:nth-of-type(1){ background: #f2f2f2} .pro_all_content tr:nth-child(even) td:nth-of-type(1){ background: #e9e9e9;} .pro-all-center { padding-bottom: 100px; } .pro-all-center .swiper-pagination4{ text-align: center; bottom: 18px; position: absolute; z-index: 99;} .pro-all-center .swiper-pagination4 .swiper-pagination-bullet{ transition: all 0.5s; display: inline-block; margin-right: 10px; width: 40px; height: 3px; border-radius: 0; background: #333; cursor: pointer;} .pro-all-center .swiper-pagination4 .swiper-pagination-bullet-active{ background-color: #e80113 } .pro-btn-all {transition:all 0.5s; font-size: 14px;} .pro-btn-all a{ font-size: 16px; flex:0 0 auto; width: 48%; text-align: center; text-align: center; padding: 0.5rem 0rem;display: flex; justify-content: center; align-items: center} .pro-btn-all a:nth-of-type(1){ display: flex; color: #fff; } .pro-btn-all a:nth-of-type(1){ background: #e80113; color:#fff; border-radius: 5px;} .pro-btn-all a:nth-of-type(2){ background: #80c26a; color:#fff; border-radius: 5px;} .pro-btn-all a:nth-of-type(1) i{ background: url("../img/btn1.png") no-repeat center center; padding: 1rem} .pro-btn-all a:nth-of-type(2) i{ background: url("../img/btn2.png") no-repeat center center; padding:1rem} @media(max-width:1199px) { .pro-btn-all{flex-flow: column!important;} .pro-btn-all a{ font-size: 14px; flex:0 0 auto; width: 100%; text-align: center; padding: 0.1rem 0rem;display: flex; align-items: center; display: flex; flex-wrap: wrap; flex-flow: column; margin-bottom: 1%} } .left_tel{ background: url("../img/left-tel.png") no-repeat left center; padding-left: 25%} .left_tel p:nth-of-type(1){ font-size: 13px; color: rgba(0,0,0,0.8); margin-bottom: 0} .left_tel p:nth-of-type(2){ font-size: 27px; color:#e80113; font-family: 'Bahnschrift'} .pro-box-two p{ font-size: 16px;} .pro-box-two img{ width: 285px;} .pro-box{ width: 100%; height:480px; background: #fff; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden;} .pro-box span{ position: relative; display: block; overflow: hidden; max-width: 100%; background: #f5f5f5 } .pro-box span:after{ position: absolute; content: ""; width: 100%; background: rgba(0,0,0,0.4); top: -200px; transition: all 0.5s; z-index: 9;left: 0} .pro-box span img{ transition: all 0.5s; max-width: 100%; max-height: 100%; } .pro-box>div:nth-of-type(2){ position: absolute;bottom: -314px; } .pro-box .pro-title1{ width: 100%; height: 170px; text-align: center;transition: all 0.5s; font-size: 18px; box-sizing: border-box; padding:0 15px 15px;} .pro-box .pro-title1 p:nth-of-type(1){ color: #333; font-size: 18px; line-height: 40px; } .pro-box .pro-title1 div:nth-of-type(1){ color: #999999; font-size: 14px; line-height: 20px; margin-bottom: 8%; } .pro-box .pro-title1 div.more_click{ width: 50%; height: 30px; border-radius: 15px; line-height: 30px; text-align: center; color: #fff; background: #555555; font-size: 12px; text-transform: uppercase; margin: 0 auto; transition: all 0.5s } .pro-box:hover .pro-title1 div.more_click{ background: #c60012; width: 60%;letter-spacing: 0.25rem; } .pro-box .pro-title2{ position: absolute; bottom:390px; left: 0; transition: all 0.5s; background:rgba(255,255,255,0.5); width: 100%; height: 170px; z-index: 10; padding: 15px 0; box-sizing: border-box; } .pro-box .pro-title2 p{ font-size: 14px; text-align: center; padding-top: 15px; } .pro-box .pro-title2 p:nth-of-type(2){ display: flex; justify-content: space-between; padding: 15px 15px; } .pro-box .pro-title2 p:nth-of-type(2) a{ display: block; border-radius: 5px; width: 48%; height: 35px; border-radius: 20px; border:1px solid #666; line-height: 35px; color: #666; font-size: 14px; transition: all 0.5s} .pro-box .pro-title2 p:nth-of-type(2) a:nth-last-of-type(1){ display: block; border-radius: 5px; width: 48%; height: 35px; border:1px solid #c60012; background: #c60012; color: #fff;transition: all 0.5s; font-size: 14px; border-radius: 20px;} .pro-box:hover span:after{ top: 0px; } .pro-box:hover span img{ transform: scale(1.1); } .mb_pro_list_name{ text-align: center; font-size: 12px; line-height: 50px; height: 50px;} .pr_nav_mb .swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 40px; background: #f00 } .pr_nav_mb .swiper-pagination7 { text-align: center; top: 50px; position: absolute; z-index: 99; } .pr_nav_mb .swiper-pagination7.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #e80113 !important; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .pro-box-mb{margin: 2%; background: #fff; padding: 2% 2% 4%; font-size: 14px; text-align: center; height: 98%; } .pro-box-mb span{ margin-bottom: 1%; } .pro-box-mb div a:nth-child(1){ border:1px #e80113 solid; padding:2%; color:#666; width:48%; display:block; float:left; font-size: 12px;} .pro-box-mb div a:nth-child(2){ background: #e80113; padding:2%; color:#FFF;width:48%;display:block; float:right;font-size: 14px;} .pr_nav_mb .swiper-pagination7{ text-align: center; top: 50px; position: absolute; z-index: 99;} .mb_pro_list_name{ text-align: center; font-size: 12px; line-height: 50px;} .pr_nav_mb .swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 40px; background: #f00 } .pr_nav_mb .swiper-pagination7.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #c40e25 !important; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .pro-box .pro-title2 p:nth-of-type(2) a:nth-of-type(1):hover{background: #c60012; color: #fff;border:1px solid #c60012;} .pro-box .pro-title2 p:nth-of-type(2) a:nth-of-type(2):hover{background: #fff; color: #c60012;border:1px solid #c60012;} .pro-all a:hover img{ transform: scale(1.5); } .pro-all a:hover span:after{ height: 100%; } .pro-all a p:after{ position: absolute; transition: all 0.5s; content:""; left: 0; bottom: 0; height: 1px; background: #a6c14c; width: 0} .pro-all a:hover p:after{ width: 100% } .pro-all a:hover p{ letter-spacing: 5px; padding-left: 10px; } a.more-all-zj{line-height: 50px; border:1px #e2e2e2 solid; border-bottom: 3px #1ab27a solid; color: #4b4b4b; font-size: 14px; transition: all 0.5s} a.more-all-zj:hover{letter-spacing: 10px;} .pro-all-li .pro-box{ width: 100%; height:360px; box-sizing: border-box; padding: 8px; position: relative; overflow: hidden;} .pro-all-li .pro-title1{ width: 100%; height: 140px; text-align: center;transition: all 0.5s; font-size: 18px; box-sizing: border-box; padding:0 15px 15px;} .pro-all-li .pro-box .pro-title1 div:nth-of-type(1){ color: #999999; font-size: 14px; line-height: 20px; margin-bottom: 3%; } .pro-all-li .pro-box .pro-title1 p:nth-of-type(1){ color: #333; font-size: 14px; line-height: 20px; height: 35px; padding-top: 10px; } /*订购流程*/ .index-dglc{ background: url("../img/index_dinggou_bj.jpg") no-repeat center top; position: relative; overflow: hidden; background-size: cover} .index-dglc:after{ position: absolute; content: attr(data-title); bottom: -25%;left: 0;right: 0; margin: auto; color: #2da17c; display: block; font-size: 150px; text-transform: uppercase; text-align: center; font-family: Impact} .lc-item span{ display: block; background: #fff; border-radius: 100%; width: 85px; height:85px; position: relative } .lc-item span i{ width: 50%; height: 50%; position: absolute; left: 0;top: 0; bottom: 0;right: 0; margin: auto; display: block} .lc-item p:nth-of-type(1){ font-size: 24px; color: #fff} .lc-item p:nth-of-type(2){ font-size: 20px; color: #fff} .lc-item:hover { background: #fff; border-radius: 0.5rem} .lc-item,.lc-item span,.lc-item span i img{ transition: all 0.5s} @media(max-width: 992px){ .lc-item p:nth-of-type(1){ font-size: 18px; color: #fff} .lc-item p:nth-of-type(2){ font-size: 16px; color: #fff} } .lc-item:hover span{ background: #e80113} .lc-item:hover span i img{filter: brightness(100);} .lc-item:hover p{ color: #e80113;} .lc-item{ position: relative} .lc-item:after{ position: absolute; content: ""; width: 0; height: 0; border:10px solid transparent; border-top-color:#fff; z-index: 9999; bottom: 0px; left: 0; right: 0; margin: auto; transition: all 0.5s; opacity: 0} .lc-item:hover:after{bottom: -20px; opacity: 1} .lc-line{ position: relative; display: block; width: 35px;} .lc-line:after{ position: absolute; content: ""; width: 100%; height:1px; background: rgba(255,255,255,0.5); left: 0; bottom: 30%;right: 0; margin: auto; } @media(max-width:1400px){ .lc-line{ display: none} .lc-item{ flex: 0 0 auto;width: 33.33%} .index-dglc:after{ position: absolute; content: ""; bottom: -25%;left: 0;right: 0; margin: auto; color: #2da17c; display: block; font-size: 150px; text-transform: uppercase; text-align: center; font-family: Impact} } .lc-item:nth-of-type(1){ position: relative; height: 100%; display: block; zoom: 1} .lc-item:nth-of-type(1):before{ position: absolute; content: "";right: 100%;width: 500px; height:1px; background: rgba(255,255,255,0.5); margin: auto; top: 0; bottom:-37%;} .lc-item:nth-last-of-type(1){ position: relative; height: 100%; display: block; zoom: 1} .lc-item:nth-last-of-type(1):before{ position: absolute; content: "";left: 100%;width: 500px; height:1px; background: rgba(255,255,255,0.5); margin: auto; top: 0; bottom:-37%;} /*公司简介*/ .index-about-img{ position: relative} .index-about-img:after{ position: absolute; content: ""; left:8%; top:10%; width: 85%; height: 95%; border-radius: 0.5rem; background: #e80113; z-index: -1} @media(max-width: 992px){ .index-about-img:after{ position: absolute; content: ""; left:8%; top:10%; width: 85%; height: 95%; border-radius: 0.5rem; background:none ; z-index: -1} } .about-font-title-two{ position: relative} .about-font-title-two p:nth-of-type(1){ font-size: 24px; color: #282828; font-weight: bold;} .about-font-title-two p:nth-of-type(2){ font-size:16px; color: #666666; } .about-font-title-two:after{ position: absolute; content:attr(data-title);text-transform: uppercase; color: rgba(102,102,102,0.1); left: 0; top: -50%; font-size: 80px; font-family: Impact; opacity: 0.5;letter-spacing: 1rem} .about-nr{ font-size: 16px; color: #666; line-height: 30px;} .about-item span i{ display: block; width: 50%; height: 50%; position: relative} .about-item span i img{ max-width: 100%;} .about-item span{ display: block; border-radius: 0.5rem; position: relative;} .about-bj{ position: relative; width: 90px; height: 100px; display: block} .about-bj div{ position: absolute; top: 0; bottom: 0; margin: auto; left: 0; right: 0; display: block; padding-bottom: 60%} .about-bj div:nth-of-type(1){ opacity: 1; transform: all 0.5s; } .about-bj div:nth-of-type(2){ opacity:0;transform: all 0.5s;} .about-bj span{ display:block; position: absolute; top: 0;bottom: 0; right: 0;left: 0;margin: auto;} .about-bj:hover div:nth-of-type(2){ opacity: 1; } .about-bj:hover div:nth-of-type(1){ opacity: 0;} .about-item{ font-size: 18px; color: #333; position: relative} .about-item:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width: 50%; height: 1px; left: 120%; top: 35%; margin: auto; background: #e80113} .about-all-num .about-slide { color: #757575; width: 25%; text-align: center; position: relative; } .about-all-num .about-slide:after{ position: absolute; content: ""; width: 1px; background: #e7e7e7; height:40%; top: 0; bottom: 0; right: 0; margin: auto; } .about-all-num .about-slide:nth-last-of-type(1):after{ height: 0 } .about-all-num .about-slide p{ font-size: 14px; color: #666666; padding: 0; margin: 0 } .about-all-num .about-slide p:nth-of-type(1) span{ font-size:40px; color: #e80113; font-family: Impact } .about-all-num .about-slide p:nth-of-type(1){ font-size: 14px; color: #666666 } @media(max-width: 768px){ .sl_right p:nth-of-type(1){ font-size: 20px; text-transform: uppercase; color: #ff6a51; margin-bottom: 0;letter-spacing: 1px} .sl_right p:nth-of-type(1):first-letter{font-size: 22px; margin-bottom: 0;} .sl_right p:nth-of-type(2){ font-size: 16px; color: #ff6a51;} .about-all-num .about-slide p:nth-of-type(1) span{ font-size:26px; color: #282828; } } .about-title-all{} .about-title-all span:nth-of-type(2){ font-size: 28px; color: #282828; position: relative; padding-left: 10%; margin-left: 2%;} .about-title-all span:nth-of-type(2):after{ position: absolute; content: ""; height: 1px; width: 13%; background: #939393; display: block;left: 0; top: 0; bottom: 0; margin: auto;} .about-box{ font-size: 16px; color: #666; line-height: 30px;} /*文化*/ .gutters-20 { margin-left: -10px !important; margin-right: -10px !important; } .wh-box{ width: 100%; background: #ffffff; border-radius: 2rem 2rem 0 0; height:100%; position: relative; transition: all 0.5s; margin: 0 20px;} .wh-box:after{ position: absolute; content: ""; width: 100%;height: 4px; background: #e80113; left: 0; bottom: 0px; transition: all 0.5s; right: 0; transition: transform 0.5s; margin: auto; transform-origin: right center; transform: scaleX(0)} .wh-box:hover:after{ transform-origin: left center; transform: scaleX(1);} .wh-box:hover{ -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); -webkit-box-shadow: 0 0 20px rgba(51, 51, 51, 0.1); -moz-box-shadow: 0 0 20px rgba(51, 51, 51, 0.1); box-shadow: 0 0 20px rgba(51, 51, 51, 0.1); background: #80c26a } .wh-box span{ background: #80c26a; height: 100px; width: 100px; border-radius: 100%; display: block; position: relative; margin: 0 auto} .wh-box span i{ position: absolute; top: 0;right: 0; bottom: 0; left:0; margin: auto; height: 45px; width: 45px;} .wh-box span i img{ filter: brightness(100)} .wh-box:hover i img{ filter:brightness(1)} .wh-box:hover span{ background: #fff!important;} .wh-box p:nth-of-type(1){ color: #282828; font-size: 28px; font-weight: bold} .wh-box p:nth-of-type(2){ color: #999999; font-size: 20px; position: relative; } .wh-box p:nth-of-type(2):after{ position: absolute; content: "";left: 0; bottom: -60%; right: 0; margin:auto; background: #fff; width:8%; height: 2px; transition:transform 0.5s; display: block;} .wh-box:hover p:nth-of-type(2):after{width:8%; transform:rotate(0deg);} .wh-box:hover span{ background: #e80113; transition: all 0.5s} .wh-box:hover p { color: #fff;} .fc_img{ width: 100%; overflow: hidden;} .fc_img img{ transition: all 0.5s;width: 100%; height: 100%; object-fit: cover;} .fc_img:hover img{ transform: scale(1.1); filter: brightness(130%); } @media(max-width: 768px){ .wh-box{ background: #f4f4f4; height:100%; position: relative; transition: all 0.5s; margin: 0 0px;} .wh-box span{ background: #e80113; height: 50px; width: 50px; border-radius: 100%; display: block; position: relative; margin: 0 auto} .wh-box span i{ position: absolute; top: 0;right: 0; bottom: 0; left:0; margin: auto; height: 30px; width: 30px;} .wh-box span i img{ max-width: 90%} .wh-box:hover p:nth-of-type(1),.wh-box:hover p:nth-of-type(2) { color: #fff;} .wh-box p:nth-of-type(1){ color: #282828; font-size: 20px;} .wh-box p:nth-of-type(2){ color: #999999; font-size: 16px; position: relative; font-size: 14px; text-transform: uppercase} .wh-box p:nth-of-type(2):after{ position: absolute; content: "";left: 0; bottom: -60%; right: 0; margin:auto; background: #e80113; width:8%; height: 2px; transition:transform 0.5s; display: block ;} .wh-box p:nth-of-type(n+3){ color: #fff; font-size: 14px; line-height: 20px;} .wh-box:hover p:nth-of-type(2):after{width:5%; transform:rotate(90deg);} .shili-font-box{ position: absolute; top: 35.3%; left: 0; right: 0; margin: auto; background: url(../img/shili_bj.jpg) no-repeat center top; width: 46.4%; height: 23.33%; z-index: 99999; display: none;} } .shili-box{ position: relative;} @media(min-width: 1200px){ .shili-font-box p:nth-of-type(1){ font-weight:bold; font-size: 36px; position: relative} .shili-font-box p:nth-of-type(1) span{ position: relative} .shili-font-box p:nth-of-type(1) span:after{ position: absolute; content:'';left: -25%; top: 0;bottom: 0; margin: auto; height: 1px; width: 20%; background: #8bc9b6; display: block;z-index: 9999} .shili-font-box p:nth-of-type(1) span:before{position: absolute; content:'';right: -25%; top: 0;bottom: 0; margin: auto; height: 1px; width: 20%; background: #8bc9b6; display: block;z-index: 9999} .shili-font-box p:nth-of-type(2){ font-size: 26px; border: 2px #fff solid;letter-spacing: 6px;} .shili-font-box{ position: absolute; top: 35.3%; left: 0; right: 0; margin: auto; background: url(../img/shili_bj.jpg) no-repeat center top; width: 46.4%; height: 33.33%; z-index: 99999;} } @media(max-width: 991px){ .shili-font-box p:nth-of-type(1){ font-weight:bold; font-size: 18px; position: relative} .shili-font-box p:nth-of-type(1) span{ position: relative} .shili-font-box p:nth-of-type(1) span:after{ position: absolute; content:'';left: -25%; top: 0;bottom: 0; margin: auto; height: 1px; width: 20%; background: #8bc9b6; display: block;z-index: 9999} .shili-font-box p:nth-of-type(1) span:before{position: absolute; content:'';right: -25%; top: 0;bottom: 0; margin: auto; height: 1px; width: 20%; background: #8bc9b6; display: block;z-index: 9999} .shili-font-box p:nth-of-type(2){ font-size: 12px; border: 1px #fff solid;letter-spacing: 0px;} } /*优势*/ .ys_item{ text-align: center; width: 75px; height: 75px; line-height: 35px; border-radius: 100%; position: relative } .ys_bg1{ background-image: linear-gradient(to bottom,#a599d0 50%, #eff1f7 0);} .ys_bg2{ background-image: linear-gradient(to bottom,#e77745 50%, #eff1f7 0);} .ys_bg3{ background-image: linear-gradient(to bottom,#3bb3c3 50%, #eff1f7 0);} .ys_item:after{ position: absolute; content: ""; background: #eff1f7;} .ys_item p:nth-of-type(1){ font-size: 22px; font-weight: bold; margin-bottom: 0; color: #fff;} .ys_item p:nth-of-type(2){ font-size:15px; font-weight: bold; margin-bottom: 0} .ys-item-box{ height:470px; width: 100%; overflow: hidden; } .wave{ bottom:0;} .wave img{ border-radius: 0 0 5px 5px;} .ys-box1{ width: 100%; height:100%;} .ys_font{ top:0;left: 0; bottom:0; right:0; margin: auto; transition: all 0.5s} .ys_font p:nth-of-type(3){ position: relative; color: rgba(255,255,255,0.1);text-shadow:2px 2px rgba(255,255,255,0.05); } .ys_font p:nth-of-type(3):after{position: absolute; content:"";height: 2px; width: 10%; background: rgba(255,255,255,0.5); margin: auto;left: 0; right:0; bottom:-20px;} .dian{ position: absolute; left: 0; right: 0; top:38%; margin: auto; width: 100%; text-align: center; transition: all 0.5s } .ys-box2{ position: absolute;bottom: -0px; left:0;; transition: all 0.7s; border-radius: 5px;} .ys-box2 img{ background: #e80113; border-radius: 5px;} .ys_font2{ position: absolute; text-align: center; top:0; } .ys_font2 p:nth-of-type(1){ font-size: 24px;} .ys_font2 p:nth-of-type(2){ position: relative; color: rgba(255,255,255,0.1);text-shadow:2px 2px rgba(255,255,255,0.05); } .ys_font2 p:nth-of-type(2):after{position: absolute; content:"";height: 2px; width: 10%; background: rgba(255,255,255,0.5); margin: auto;left: 0; right:0; bottom:-20px;} .ys_font2 .pro_desc{ font-size: 16px; width: 70%; text-align: center; margin: 0 auto; line-height: 30px;} .ys_font2 a{ display: flex; background: #fff; height: 40px; line-height:40px; font-size: 16px;} .ys-item-box:hover .ys-box2{ bottom:472px; } .ys-item-box:hover .ys-box1 div>img{ transform: scale(1.05)} .ys-item-box:hover .ys_font {top:100%;} .ys-item-box:hover .ys_font p{ opacity: 0} .ys-item-box:hover .dian{ transform: translateY(10px); -ms-transform:translateY(60px); -moz-transform:translateY(60px); -webkit-transform:translateY(60px); -o-transform:translateY(60px); opacity: 0; } .ys-four-all{ position: relative;} .ys-four-all>p:nth-of-type(1){ position:relative; position:absolute; -webkit-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); -o-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); left: -12%; top:30%; font-size: 12px; text-transform: uppercase; color: #666; } .ys-four-all>p:nth-of-type(1):after{position: absolute; content: ""; right:-30%; top:0;bottom:0%;margin:auto; height:2px; width: 70px; background: #be1126;} .pro-all-center .pro-box{ background: #f5f5f5; padding: 20px; } .pro-all-center .pro-box span{ display: block; overflow: hidden; } .pro-all-center .pro-box span img{ transition: all 0.5s } .pro-all-center .pro-box .pro-font{ padding-top: 20px; } .pro-all-center .pro-box:hover span img{ transform: scale(1.1); } .pro-all-center .pro-box .pro-font p:nth-of-type(1){ color: #e80113; font-size: 20px; position: relative; } .pro-all-center .pro-box .pro-font p:nth-of-type(1):after{ position: absolute; content: ""; height: 1px; background: #e80113; width: 5%;left: 0; bottom: -20%; transition: all 0.5s } .pro-all-center .pro-box .pro-font ul li{ flex: 1; text-align: left; display: block; float: left; color: #666; font-size: 16px; width: 50%} .pro-all-center .pro-box .pro-a > a{ display: block; float: left; font-size: 14px; width: 35%; } .pro-all-center .pro-box .pro-a > a span{ float: right; } .pro-all-center .pro-box .pro-a{ padding: 5% 0; display: flex; } .pro-all-center .pro-box .pro-a > a{ background: #282828; color: #fff; padding: 1% 4% } .pro-all-center .pro-box .pro-a > a:nth-of-type(1){background: #e80113; margin-right: 4%; } .pro-all-center .pro-box:hover .pro-font p:nth-of-type(1):after{ width: 10% } @media(max-width:768px) { .pro-all-center { padding-bottom: 20px; } .pro-all-center .pro-box .pro-font ul li{ flex: 1; text-align: left; display: block; color: #666; font-size: 16px; width: 100%} .btn-n span i{ display: none; } .index_title p:nth-of-type(1){ font-size: 18px; color: #303032} .index_title p:nth-of-type(2){ font-size: 16px; color: #999999; text-transform: uppercase; position:relative;} .ys-item-box{ height:320px; width: 100%; overflow: hidden; } .ys_font2 .pro_desc{ display: none} .ys-item-box:hover .ys-box2{ bottom:320px; } } .pro-box-big .pro-box{ background: #f5f5f5; padding: 0 } .pro-box-big .pro-box span{ display: block; overflow: hidden;} .pro-box-big .pro-box span img{ transition: all 0.5s } .pro-box-big .pro-box .pro-font{ padding: 20px; } .pro-box-big .pro-box:hover span img{ transform: scale(1.1); } .pro-box-big .pro-box .pro-font p:nth-of-type(1){ color: #e80113; font-size: 20px; position: relative; } .pro-box-big .pro-box .pro-font p:nth-of-type(1):after{ position: absolute; content: ""; height: 1px; background: #e80113; width: 5%;left: 0; bottom: -20%; transition: all 0.5s } .pro-box-big .pro-box .pro-font ul li{ flex: 1; text-align: left; display: block; float: left; color: #666; font-size: 16px; width: 50%} .pro-box-big .pro-box .pro-a > a{ display: block; float: left; font-size: 14px; width: 35%; } .pro-box-big .pro-box .pro-a > a span{ float: right; } .pro-box-big .pro-box .pro-a{ padding: 5%; display: flex; } .pro-box-big .pro-box .pro-a > a{ background: #282828; color: #fff; padding: 1% 4% } .pro-box-big .pro-box .pro-a > a:nth-of-type(1){background: #e80113; margin-right: 4%; } .pro-box-big .pro-box:hover .pro-font p:nth-of-type(1):after{ width: 10% } @media(max-width:992px) { .pro-box-big { padding-bottom: 20px; } .pro-box-big .pro-box .pro-font ul li{ flex: 1; text-align: left; display: block; color: #666; font-size: 16px; width: 100%} .btn-n span i{ display: none; } .index_title p:nth-of-type(1){ font-size: 18px; color: #303032} .index_title p:nth-of-type(2){ font-size: 12px; color: #303032; text-transform: uppercase; position:relative;} } /*page*/ .de-page-mian{overflow: hidden; text-align: center; font-size: 0; margin: 10px 0 35px; width: 100%; clear: both; } .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 12px; 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.active, .de-page-mian .page-inner a:hover{color: #fff; border-color: #004ca1; background: #004ca1;} .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;display: none; } .de-page-mian .page-inner span{display: none; font-size: 12px; color: #333; float: left; line-height: 38px;} .de-page-mian .page-inner input{display: none; float: left; height: 36px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin: 0 5px;} /*no-goods*/ @media(min-width: 992px) { .pro_hot_name_all div span { margin-left: 0.6rem; padding: 0.3rem 1.2rem; border-radius: 0.2rem; font-size: 14px; color: #fff } } .pro_hot_name_all div span:nth-of-type(1){ background: #a599d0; } .pro_hot_name_all div span:nth-of-type(2){ background: #e77746; } .pro_hot_name_all div span:nth-of-type(3){ background: #3cb3c3; } .pro_hot_name_all div span:nth-of-type(4){ background: #89c997; } .pro_hot_name_all p:nth-of-type(1){font-size: 18px; color: #333;} .pro_hot_name_all p:nth-of-type(1) i{ background: url("../img/hg.png") no-repeat left center; width: 1.5rem} @media(max-width: 991px){ .pro_hot_name_all div span { margin-left: 0.6rem; padding: 0.3rem 0.4rem; border-radius: 0.2rem; font-size: 14px; color: #fff} } .current_list>span:nth-of-type(1){ position: relative; color: #e80113; font-size: 22px;} .current_list>span:nth-of-type(1):after{ position: absolute; content: ""; left: 0;top: 0; bottom: 0; margin: auto; width: 3px; height: 80%; background: #e80113;} /*案例*/ .case-box{ background: #fff; color: #333333; position: relative; transition: transform 0.5s} .case-box p{ font-size: 18px; color: #282828; line-height:60px; text-align: center; position: relative; transition: all 0.1s} .case-box:before{ position:absolute; content:""; left:0; top: 0; width: 100%; height:100%; background: #e80113; transition: transform 0.5s; transform-origin: right center; transform: scaleX(0) } .case-box:hover:before{ transform: scaleX(1); transform-origin: left center; } .case-box span,.case_center .case-box p{ position: relative} .case-box:hover p{ color: #fff;} /*公司简介*/ .blue_bg{ background: #e80113;} .about-img{ border: 5px solid #fff;} .about_box_all{ position: relative;} .about_box_all:after{position: absolute; content: ""; background: url("../img/dian2.png") no-repeat right top; top:0; right:0%; width: 20%; height:90px; } .about_box_all:before{position: absolute; content: ""; background: url("../img/dian2.png") no-repeat right top; bottom:0; left:0%; width: 20%; height:90px; } .about_box_all>p:nth-of-type(1){ position:relative; position:absolute; -webkit-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); -o-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); right: -12%; top:30%; font-size: 12px; text-transform: uppercase; color: #666; } .about_box_all>p:nth-of-type(1):after{position: absolute; content: ""; right:-30%; top:0;bottom:0%;margin:auto; height:2px; width: 70px; background: #be1126;} .about-right-box{ position: relative;} .about-right-box:after{ position:absolute; content: 'yingda'; text-transform: uppercase; color:rgba(255,255,255,0.02); bottom:-22%; left:0; right: 0; margin:auto; font-size: 140px; font-family: 'arial'; z-index: 99; letter-spacing: 5px;} .about-right-box p:nth-of-type(1){ font-size: 40px; text-transform: uppercase; color: rgba(255,255,255,0.5); position: relative} .about-right-box p:nth-of-type(1):after{ position: absolute; content: "";left: 38%;top: 0; bottom:0; margin:auto; background: rgba(255,255,255,0.5); width: 15%; height: 1px;} .about-right-box p:nth-of-type(2){ font-size: 24px; color: #fff;} .desc-all{ color:rgba(255,255,255,0.5); font-size: 16px; line-height:35px; } .about-right-box div.more-xiangqing{ line-height: 35px; font-size: 16px; color: #fff; width: 100%;position: relative; z-index: 9999} .about-right-box div.more-xiangqing a{ color: #fff; display: block; width:60%; height: 35px;line-height: 35px;position: relative; } .about-right-box div.more-xiangqing a i{ transition: transform 0.5s; display: block;position: relative; } .about-right-box div.more-xiangqing a:hover i{ transform: rotate(270deg)} div.more-xiangqing:before{ position:absolute; content:""; left:0; bottom: 0; width:55%; height:2px; background: #fff; transition: transform 0.5s; transform-origin: right center; transform: scaleX(0) } div.more-xiangqing:hover:before{ transform: scaleX(1); transform-origin: left center; } /*新闻*/ .double_all2 .news_time{ width: 100%; display: block; text-align: left; } .double_all2 .news_time p:nth-of-type(1){ font-size: 24px; color: #333333; margin: 0 } .double_all2 .news_time p:nth-of-type(1) img{filter: brightness(0); opacity: 0.5; transform: translateX(0px); transition: all 0.5s} .double_all2 .news_box_slide:hover .news_time p:nth-of-type(1) img{ filter: brightness(1); opacity: 1; transform: translateX(20px)} .news_time p:nth-of-type(2){ font-size: 12px; color: #bfbfbf; transition: all 0.5s; transform: translateX(0px)} .double_all2 .news_box_slide:hover .news_time p:nth-of-type(2){ font-size: 12px; color: #bfbfbf; padding-right: 10px;} .news-left-img-box:hover .news_time p:nth-of-type(2){ padding-right: 10px;} .news-left-img-box:hover .news_time p:nth-of-type(1){ padding-left: 10px;} .news-left-img-box .news_time p:nth-of-type(1){ transition: all 0.5s} .double_all2 .news_box_slide .news_nr{ text-align: left; } .double_all2 .news_box_slide .news_nr p:nth-of-type(1){ font-size: 16px; color: #333 } .double_all2 .news_box_slide .news_nr .news_small_desc{ font-size: 14px; color: #999 } .double_all2 .news_box_slide .news_nr p:nth-of-type(1) img{filter: brightness(0); opacity: 0.5;} .double_all2 .news_box_slide:after{ position: absolute; content: ""; width: 100%;height: 4px; background: #e80113; left: 0; bottom: 0px; transition: transform 0.5s; right: 0; transition: transform 0.5s; margin: auto; transform-origin: right center; transform: scaleX(0)} .double_all2 .news_box_slide:hover:after{ transform-origin: left center; transform: scaleX(1);} /*实力案例*/ .f_item{ flex: 1; } .f_item span{ display:inline-block; width: 15%; padding:2%; margin-left: 5%;margin-top: 10%; position: relative; z-index: 3; transition: all 0.5s } .f_item span i{ position: relative; background: #fff; width: 48px; height: 48px; border: 1px solid #ececec; border-radius: 100%; display: inline-block; align-items: center; display: flex; } .f_item span i img{ max-width: 100%; transition: all 0.5s; position: absolute; left: 0;right: 0; top:0; bottom: 0; margin: auto;} .f_item div:nth-of-type(1){ color: #666; mrgin-left:10%; box-sizing: border-box; position: relative; z-index: 3} .f_item div:nth-of-type(1) p:nth-of-type(1){ font-size: 24px; color: #333333; margin-bottom: 5px; transition: all 0.5s } .f_item div:nth-of-type(1) p:nth-of-type(2){ font-size: 14px; color: #666666; height: 50px;line-height: 20px; margin-bottom: 0; transition: all 0.5s } .f_item:hover span i img{transform: rotate(360deg)} .f_item:hover span i{ background:#e80113; border: 1px solid #e80113; background-image: -webkit-linear-gradient(-180deg, #1e3d73 0%, #2b5198 100%); background-image: -ms-linear-gradient(-180deg, #1e3d73 0%, #2b5198 100%); box-shadow: 0px 10px 20px 0px rgba(31, 61, 115, 0.26);} .hs_bg_80{ background-image: linear-gradient(to bottom, #f4f4f4 75%, #fff 0%);} @media(max-width: 768px) { .index-four-ys{ width: 100%; display: flex; flex-wrap: wrap;} .f_item{ flex: 0 0 50%; max-width: 50% } .f_item span{ display:inline-block; width: 25%; padding:2%; margin-right: 5%;margin-top: 10%; position: relative; z-index: 3 } } /*首页新闻*/ .news_all_bg{ width: 100%; background: #f4f4f4;} .news_ad{ color: #fff; } .news_ad p{ font-size: 18px; color: #fff; height: 60px; line-height:60px;background-image: linear-gradient(to right,#e80113 85%, #c40e25 0); transition: all 0.5s; position: relative} .news_ad p span{ position: relative; z-index: 999} .news_ad p span:nth-of-type(2){ color: #fff; width: 15%;} .news_ad p span i{ margin:15px 15px; display: inline-block; width: 27px; height:27px; border-radius: 100%; position: relative; float: right; padding: 5px; transition: all 0.5s; } .news_ad p span i:after{ position: absolute; content: ""; height: 1px; width: 13px; left: 0; right: 0; top: 2%; margin:auto; background: #fff; transform: rotate(45deg) translateX(4px) translateY(7px);} .news_ad p span i:before{ position: absolute; content: ""; height: 1px; width: 13px; left: 0; right: 0; bottom: 2%; margin:auto;background: #fff; transform: rotate(-45deg) translateX(4px) translateY(-7px);} .news_ad p:after{ position:absolute; content:""; left:0; top: 0; width: 100%; height:100%; background: #c40e25; transition: transform 0.5s; transform-origin: right center; transform: scaleX(0) } .news_ad:hover p:after{ transform: scaleX(1); transform-origin: left center } .news_ad:hover p span i{ background: #fff;} .news_ad:hover p span i:before,.news_ad:hover p span i:after{ background: #c40e25; } .pro-big-box{ width: 100%; overflow: hidden} .double_all{height: 700px; } .double_all.swiper-container{ padding-bottom: 50px; } .double_all .swiper-slide { text-align: center; font-size: 18px; background: #fff; height:350px; } .four_news{ background: #fff;} .news-img-box{transition: all 0.5s} .news-img-box p:nth-of-type(1){ font-size: 18px; color: #282828;} .news-img-box .news-desc{ font-size: 14px; color: #666666;} .news-right-box .news-item{ position: relative; transition: all 0.5s;} .news-right-box a:not(:nth-last-of-type(1)) .news-item:before{ position: absolute; content: ""; width: 100%; height: 1px;border-bottom: 1px solid #f6f7fc; transition: all 0.5s; background: #f00;left: 0; bottom:0; } .news-mess-box p:nth-of-type(1){ color: #282828; position: relative; ;} .news-mess-box p:nth-of-type(1):after{ position: absolute; content: ""; left: -5%; top:0; bottom: 0;margin: auto; background: #d50000; width: 5px; height:5px;} .news-right-box{ border-bottom: 1px solid #f6f7fc;transition: all 0.5s} .news-xs{ font-size: 14px; color: #666666;} .news-time-box p:nth-of-type(1){ font-size: 18px; color: #9a9a9a;} .news-item:hover{ background: #043894;color: #fff;transition: all 0.5s} .news-item:hover .news-xs,.news-item:hover p{ color:#fff;} .news-item:hover p:nth-of-type(1):after{ background: #fff; transform: rotate(360deg)} .news-item .news-time-box p:nth-last-of-type(1){ transition: all 0.5s} .news-item:hover .news-time-box p:nth-last-of-type(1){ padding-right: 15%;} .news_box_left{ margin: 20px; padding: 10px; border-bottom: 1px solid #e7e7e7; position: relative; } .news_box_left:after{ position: absolute;content: ""; background : #043894; height: 2px; width:100%; left: 0;bottom: -1px; transition: all 0.5s; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } .news_box_left:hover:after{-webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);} /*品牌与友情链接*/ .index_pinpai{ background: url(../img/index_pinpai_bj.jpg) no-repeat left top; background-size: cover; height: auto; overflow: hidden;} .white-font{ color: #fff } .index_title2{ text-align: center;} .index_title2 p:nth-of-type(1){ font-size: 36px; color: #fff} .index_title2 p:nth-of-type(2){ font-size: 14px; color: rgba(255,255,255,0.5); text-transform: uppercase; position:relative;} .index_title2 p:nth-of-type(2):after{ position: absolute; content: "";left: 0; bottom: -150%; right: 0; margin:auto; background: #fff; width: 6%; height: 3px; } .pinpai_content{ font-size: 16px; color: #fff; padding:8% 10% 5%; line-height: 30px; } .index_pinpai>a:nth-of-type(1){ display: block; margin: 0 auto; font-size: 16px; color: #fff; text-transform: uppercase; } .index_pinpai>a:hover{ color: #e80113; letter-spacing: 4px; } .index_pinpai ul{ padding: 5% 0; display: flex; justify-content: space-between; width: 70%; margin: 0 auto; color: #fff} .index_pinpai ul li{ flex: 1; color: #fff; text-align: center; font-size: 14px; transition: all 0.5s;} .index_pinpai ul li i{ font-size: 50px; transition: all 0.5s; color: rgba(255,255,255,0.5);transition: all 0.5s} .index_pinpai ul li p{color: rgba(255,255,255,0.5); transition: all 0.5s} .index_pinpai ul li a:hover p,.index_pinpai ul li a:hover i{color: rgba(255,255,255,1);} .index_pinpai ul li a{ display: block; width: 100%; height: 100%; transition: all 0.5s; background: rgba(255,255,255,0); } .index_pinpai ul li a:hover{ background: rgba(255,255,255,0.5); transform: scale(1.1);} .index_links{ background: #ecf5fa; text-align: center; height: auto; overflow: hidden;} .index_links ul{display: flex; flex-flow:row wrap; width: 80%; margin: 0 auto; justify-content: space-between; background: #fff;} .index_links li{ background: #fff; padding: 3% 0; box-sizing: border-box; overflow: hidden; border-right:1px solid #eee; border-bottom:1px solid #eee; float: left} .index_links li:nth-of-type(4n){ border-right: none } .index_links li img{ transition: all 0.5s; } .index_links li:hover img{ transform: scale(1.1); } @media(max-width:768px) { .index_links ul {flex-flow:row wrap;} .index_links li{ flex-basis:50%; } .index_links li:nth-of-type(2n){ border-right: none } .index_title2 p:nth-of-type(1) { font-size: 18px; color: #fff; } .pinpai_content { font-size: 14px; color: #fff; padding: 8% 10% 5%; line-height: 30px; } .index_pinpai ul{ padding: 5% 0; display: flex; justify-content: space-between; width:100%; margin: 0 auto; color: #fff} .pinpai_content{ font-size: 12px; color: #fff; padding:8% 2% 5%; line-height: 30px; } } .btn1{ position:relative; color: #666; overflow: hidden; -webkit-transition: all .6s;transition: all .6s;} .btn1:hover{ color:#fff; border-color:#282828;} .btn1 .bgsqr1{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg); transform: rotate(360deg);border-style: solid;border-width: 0; border-top-color:transparent; border-right-color:transparent;border-bottom-color:transparent; border-left-color:#73061e; position: absolute;bottom: 0;left: 0; -webkit-transition: all 0.6s; transition: all 0.6s;} .btn1 .bgsqr2{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg); transform: rotate(360deg);border-style: solid;border-width: 0; border-top-color:transparent;border-left-color:transparent; border-bottom-color:transparent;border-right-color:#282828; position: absolute;top: 0; right: 0;-webkit-transition: all 0.6s; transition: all 0.6s;} .btn-n:hover .bgsqr1{ border-width:200px 0 0 200px;} .btn-n:hover .bgsqr2{ border-width:0 200px 200px 0;} .btn-n span{ position:relative; z-index:1; text-align: left; width: 100%;} .btn-n span i{ padding: 0 0 0 10%; display: block; float: right; transition: all 0.5s} .btn-n:hover i{ padding-left:5%; } @media( max-width: 768px){.btn-n span i{ padding: 0 0 0 0%; display: block; float: right; transition: all 0.5s} .btn-n:hover i{ padding-left:0%; } } .btn2{ position:relative; color: #666; overflow: hidden; -webkit-transition: all .6s;transition: all .6s;} .btn2:hover{ color:#fff; } .btn2 .bgsqr1{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg); transform: rotate(360deg);border-style: solid;border-width: 0; border-top-color:transparent; border-right-color:transparent;border-bottom-color:transparent; border-left-color:#73061e; position: absolute;bottom: 0;left: 0; -webkit-transition: all 0.6s; transition: all 0.6s;} .btn2 .bgsqr2{content: '';width: 0;height: 0;-webkit-transform: rotate(360deg); transform: rotate(360deg);border-style: solid;border-width: 0; border-top-color:transparent;border-left-color:transparent; border-bottom-color:transparent;border-right-color:#e80113; position: absolute;top: 0; right: 0;-webkit-transition: all 0.6s; transition: all 0.6s;} /*新闻模块*/ .news-all-center{ padding-top: 1%; padding-bottom: 120px; } .news-all-center .news-box{ background: #fff; padding: 15px; border-bottom: 1px solid #ededee; transition: all 0.5s} .news-all-center .news-box:hover{-webkit-box-shadow: -5px 5px 10px 2px rgba(0, 0, 0, .1); -moz-box-shadow: -5px 5px 10px 2px rgba(0, 0, 0, .1); box-shadow: -5px 5px 10px 2px rgba(0, 0, 0, .1); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px);} .news-all-center .news-box span{ display: block; overflow: hidden; } .news-all-center .news-box span img{ transition: all 0.5s } .news-all-center .news-box .news-font{ padding-top: 20px; } .news-all-center .news-box:hover span img{ transform: scale(1.1); } .news-all-center .news-box .news-font p:nth-of-type(1){ color: #e80113; font-size: 22px; position: relative; } .news-all-center .news-box .news-font p:nth-of-type(1):after{ position: absolute; content: ""; height: 1px; background: #e80113; width: 5%;left: 0; bottom: -20%; transition: all 0.5s } .news-all-center .news-box .news-font div{ color: #666; font-size: 16px; } .news-all-center .news-box p:nth-last-of-type(1){ font-size:14px; color: #999 } .news-all-center .news-box:hover .news-font p:nth-of-type(1):after{ width: 10% } @media(max-width:768px) { .news-all-center .news-box .news-font ul li{ flex: 1; text-align: left; display: block; color: #666; font-size: 16px; width: 100%} } /*快捷导航*/ .b_nav_box{ width:98%; position: relative; overflow: hidden; } .b_nav_box:after{ position: absolute; content: ""; width:1px; height: 0px; left: 0; top: 0; right: 0; margin: auto; z-index: 9; background: #fff; transition: all 0.5s} .b_nav_box:hover:after{ height: 75px; } .b_nav_box span{ width: 100%; overflow: hidden; display: flex; height: 100%; } .b_nav_box span img{ transition: all 0.5s; width: 100%; height: 100%; object-fit: cover; } .b_nav_box:hover span img{ transform: scale(1.1);} .b_nav_box .b-g1{ background: rgba(43,55,69,0.9); } .b_nav_box .b-g2{ background: rgba(153,30,50,0.9); } .b-font{position: absolute;left: 0; top: 0;width: 100%; height: 100%; padding-top: 8%; text-align: center; transition: all 0.5s; box-sizing: border-box;} .b-font p{ color: #fff; margin: 0 } .b-font p:nth-of-type(2){ font-size: 16px; color: #fff; transition: all 0.5s } .b-font p:nth-of-type(2) a{ color: #fff; line-height: 30px; display: block; } .b_nav_box:hover .b-font{ padding-top: 105px;} .b_nav_box:hover p:nth-of-type(2) a{ padding-top: 10px; } @media(max-width: 768px){ .b_nav_box .b-font{ padding-top: 5%;} .b_nav_box:hover:after{ height: 10%; } .b_nav_box:hover .b-font{ padding-top: 8% } .b-font p{ margin: 0 } .b-font p:nth-of-type(2){ font-size: 16px; color: #fff; transition: all 0.5s } .b_nav_box:hover p:nth-of-type(2) a{ } } /*end*/ /*当前定位*/ .current_lm{ position: relative; height: 70px; line-height: 70px; width: 100%; font-size: 14px; padding-left: 10px; } .current_lm:after{ position: absolute;content: ""; width: 3px; height: 20px; background:#e80113; left: 0; top: 0;bottom: 0; margin: auto;} .current_lm a{ padding:0 5px; display: inline-block;} .current_lm a:hover{ color: #e80113; } .left_list .left_slide{ background:#f7f7f7; border-bottom:5px solid #ececeb;} .left_title{ background: #c60012; color: #fff; height: 65px; line-height: 65px; position: relative; text-align: center;} .left_title p:nth-of-type(1){ line-height: 65px; font-size: 27px; color: #fff; font-weight: bold; } .left_title p:nth-of-type(2){ font-family: 'impact'; color: rgba(255,255,255,0.3); position: absolute; left: 0;top: 0;bottom: 0;right: 0; margin: auto; font-size: 30px; text-transform: uppercase; } .list_name{ padding:15px 30px; } .list_name li{ height: 45px; line-height: 45px; border-bottom: 1px dashed #dfdfdf; font-size: 16px; padding-left: 40px; box-sizing: border-box; transition: all 0.5s; } .list_name li:hover{ background: #c60012; border-bottom: 1px dashed #c60012;} .list_name li a{ color: #666; display: block; } .list_name li a:hover{ color: #fff} .left_contact{ font-size: 14px; color: #666; padding:20px; } /*服务支持*/ .fwzc-font-wrap{} .fwzc-font-wrap p>span:nth-of-type(1){ position: relative;font-size: 24px; color: #333;} .fwzc-font-wrap p>span:nth-of-type(1)>span{ font-size: 60px; color: #1857a4; font-family: 'Bahnschrift';} .fwzc-font-wrap p>span:nth-of-type(1):after { position: absolute; content: ""; width: 50%; height: 2px; background: #1857a4; left: 0; right: 0; margin: auto; bottom: 0;transition: all 0.5s} .fwzc-desc{ font-size: 16px; color: #333;} .xuqiu-left{ border-right:1px dashed #dbdbdb;} .fwzc-item .fwzc-wrap{ background: #fff; transition: all 0.5s} .fwzc-item:hover .fwzc-wrap{ background: #0a6ba6;} .fwzc-item:hover p>span:nth-of-type(1) span,.fwzc-item:hover p>span:nth-of-type(1){ color: #fff} .fwzc-item:hover .fwzc-desc{ color: #fff} .fwzc-item img{ transition: all 0.5s} .fwzc-item:hover img{ transform: scale(1.05);} .fwzc-item:hover p>span:nth-of-type(1):after { background: #fff; width: 100%} /*产品中心*/ .right_img{ background-size: cover} .right_img img{ max-width: 100% } .pro_right_font>p:nth-of-type(1){ color: #333; font-size: 30px; position: relative; font-weight: 400; } .pro_right_font>p:nth-of-type(1):before{ position: absolute; content: "";left: 0; width:8px; height: 20px; transform: skew(-10deg,0); background: #0075c4; left: 0; top: 0; bottom: 0; margin: auto;} .pro_right_font>p:nth-of-type(1):after{ position: absolute; content: "";left: 0; width: 5px; height: 10px; transform: skew(-10deg,0); background: #0075c4; left: -1%; top: 0; bottom: 0; margin: auto;} @media(max-width: 991.98px){ .pro_right_font>p:nth-of-type(1):before{ position: absolute; content: "";left: 0; width:8px; height: 15px; transform: skew(-10deg,0); background: #0075c4; left: 0; top: 0; bottom: 0; margin: auto;} .pro_right_font>p:nth-of-type(1):after{ position: absolute; content: "";left: 0; width: 5px; height: 10px; transform: skew(-10deg,0); background: #0075c4; left: -2%; top: 0; bottom: 0; margin: auto;} } @media (max-width: 1299.98px) { .pro_right_font>p:nth-of-type(1){ color: #333; font-size: 20px; position: relative; font-weight: 400; } } .pro_right_font>p:nth-of-type(2){ color: #999; font-size: 16px;} .pro_right_font .pro_des_key{ background: #f7f7f7; font-size: 16px; line-height: 28px; color: #999;} .pro_right_font .pro_des_key strong{ color: #282828; } .pro_des_key div:nth-of-type(1){ border-bottom: 1px dashed #999999 } .pro_tel a{ font-size: 16px; display: block; height: 40px; line-height: 40px; color: #fff; background: #c60012; float: left; } .pro_tel div{ font-size: 16px; float: left; line-height: 40px; height: 40px; } .pro_tel div span{ color: #c60012; font-family: 'arial'; font-size: 24px; font-weight: bold; } .pro_tel div i{ background: url(../img/pro_tel.png) no-repeat left center; display:inline-block; float: left; width: 30px; height: 40px; } .pro-ty-item{ line-height: 2} .pro-ty-item i svg{ width: 25px; height: 25px; fill: #949494} .pro-ty-item span{ font-size: 16px; color: #666;} .content{ font-size: 16px; color: #666; line-height: 2} .case-pro-box{ position: relative; background: #ededed; border: 1px solid #ededed} .case-pro-box .case-img{ position: relative; display: block; overflow: hidden} .case-img>div:nth-last-of-type(1){ color: #fff; position: absolute; background: rgba(0,0,0,0.4); width: 100%;bottom: 0;left: 0; transition: all 0.5s;} .case-img>div:nth-last-of-type(1)>span{ color: #fff; font-size: 16px; position: relative; z-index: 9} .case-pro-box .case-img:after{ position: absolute; content: ""; background: rgba(0,0,0,0.5); left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: scale(0); transition: transform 0.5s; z-index: 99;} .case-pro-box .case-img:before{ position: absolute; content: ""; border:1px dashed rgba(255,255,255,0.5); left: 0; top: 0; right: 0; bottom: 0; width: 90%; height: 90%; margin: auto; transform: scale(0); opacity: 0; transition: transform 0.5s; z-index: 100;} .case-pro-box .case-img>span{position: absolute; display: block; height: 100%; font-family: Arial; font-size: 70px; color: #fff;left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 999; text-align: center; transform: translateY(0%) scale(1.2); transition: all 0.5s; opacity: 0} .case-pro-box .case-img>span i svg{ width: 60px; height: 60px; fill: #fff} .case-pro-box .case-img>span p{ font-size: 16px; color: #fff} .case-pro-box .case-img:hover:after{ transform: scale(1)} .case-pro-box .case-img:hover:before{ transform: scale(1); opacity: 1} .case-pro-box .case-img:hover>span{transform: translateY(0%) scale(1); opacity: 1} .case-pro-box .case-img img{ transition: all 0.5s;transform: scale(1.05)} .case-pro-box .case-img:hover img{ transform: scale(1)} .case-pro-box .case-img:hover>div:nth-last-of-type(1){ transform: translateY(0%) scale(1.25); opacity: 0} @media(max-width: 768px){ .pro_right_font>p:nth-of-type(1){ font-size: 22px; } .pro_tel div{ font-size: 18px; } .chat_btn{ width: 70%; background: #e80113; border-radius: 0.2rem; font-size: 16px; color: #fff; padding: 1rem 3rem; } } .swiper-btn a {display: inline-block;width: 35px;height: 35px; line-height: 35px;text-align: center;color:#373737; background: #f5f5f5; position: relative;left: auto;right:auto;top:auto;margin-top: 0; transition: all .4s; background: #333333} .swiper-btn a:nth-of-type(1){ background:#0d3983 } .swiper-btn a:nth-last-of-type(1){ background: #c51429 } .swiper-btn a.more {background: #c5c5c5; width: 35px;height: 35px;} .swiper-btn a i{ color: #fff } .swiper-btn a.more i { color: #fff; } .swiper-btn a.more:hover {background: #373737;} .swiper-btn i { font-size: 30px; color: #373737 } .swiper-button-prev1.swiper-button-disabled,.swiper-button-next1.swiper-button-disabled { opacity: 0.4; cursor: auto; pointer-events: none; } #pinpai .swiper-slide.swiper-slide-active .case-pro-box{} #pinpai .swiper-slide.swiper-slide-active .case-pro-box>div:nth-last-of-type(1){ display: none;} #pinpai .swiper-slide.swiper-slide-active .case-pro-box case-img{ position: relative} #pinpai .swiper-slide.swiper-slide-active .case-pro-box case-img:after{ position: absolute; content: ""; background: rgba(0,0,0,0.5); left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: scale(1); transition: transform 0.5s; z-index: 99;} #pinpai .swiper-slide.swiper-slide-active .case-pro-box case-img:before{ position: absolute; content: ""; border:1px dashed rgba(255,255,255,0.5); left: 0; top: 0; right: 0; bottom: 0; width: 90%; height: 90%; margin: auto; transform: scale(1); opacity: 1; transition: transform 0.5s; z-index: 100;} /*产品详情*/ .pro-ad-all{ background: url("../img/pro_ad_bj.jpg") no-repeat center top; background-size: cover;} .pro-ad-font-top{ text-align: center} .pro-ad-font-top p:nth-of-type(1){ font-size: 46px; color: #fff; } .pro-ad-font-top p:nth-of-type(2){ font-size: 16px; color: #fff; } .pro-num-item>span:nth-of-type(1){ font-family: 'impact'; color: #0075c4; font-size: 46px; -webkit-text-stroke: 1.0px #fff; } .pro-num-box{ width: 60%; margin: 0 auto} .pro-num-box .pro-num-item{ flex:0 0 25%; position:relative;} .pro-num-box .pro-num-item:before{ position:absolute; content: ""; right: 0; top: 20%; margin: auto; width: 1px; height:30%; background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1)) } .pro-num-box .pro-num-item:after{ position:absolute; content: ""; right: 0; top:50%; margin: auto; width: 1px; height: 30%; background-image: linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0)) } .pro-num-box .pro-num-item:nth-last-of-type(1){ position: inherit} .pro-num-item>div:nth-of-type(1){ display: flex; justify-content: center; flex-flow: column; padding-left: 1%;} .pro-num-item>div:nth-of-type(1)>p:nth-of-type(1){ color: #fff; font-size: 14px;margin-bottom: 0; line-height: 1} .pro-num-item>div:nth-of-type(1)>p:nth-of-type(2){ color: #c9c9c9; font-size: 14px;margin-bottom: 0; } .pro-datil-box-nav{} .pro-datil-box-nav .pro-nav-item{flex:1; font-size: 16px; color: #333; position: relative; } .pro-datil-box-nav .pro-nav-item:after{ position: absolute; content: ""; height:80%; width: 1px; background: #d8d8d8; top: 0; bottom: 0; right: 0; margin: auto;} .pro-datil-box-nav .pro-nav-item:nth-last-of-type(1):after{ display: none} .pro-datil-title{ font-size: 30px; color: #333;} .pro-datil-title i{ position: relative; width:40px;} .pro-datil-title i:nth-of-type(1):before{ position:absolute; content: ""; right: 100%; width:8px; height: 18px; transform: skew(-10deg,0); background: #0075c4; left: 0; top: 0; bottom: 0; margin: auto;} .pro-datil-title i:nth-of-type(1):after{ position: absolute; content: "";left: 0; width: 5px; height: 10px; transform: skew(-10deg,0); background: #0075c4; left: -10px; top: 0; bottom: 0; margin: auto;} .pro-datil-title i:nth-of-type(2):before{ position:absolute; content: ""; right: 100%; width:8px; height: 18px; transform: skew(-10deg,0); background: #0075c4; right: 0; top: 0; bottom: 0; margin: auto;} .pro-datil-title i:nth-of-type(2):after{ position: absolute; content: "";left: 0; width: 5px; height: 10px; transform: skew(-10deg,0); background: #0075c4; right: -55px; top: 0; bottom: 0; margin: auto;} @media(max-width: 1199.98px) { .pro-num-box { width: 100%; margin: 0 auto } } @media(max-width: 991.98px){ .pro-datil-title{ font-size: 20px; color: #333;} .pro-num-box{ width: 100%; margin: 0 auto; } .pro-num-box .pro-num-item{ flex:0 0 50%;} .pro-num-box .pro-num-item:nth-child(2n){ position: inherit} .pro-ad-font-top p:nth-of-type(1){ font-size: 24px; color: #fff; line-height: 1 } .pro-num-item>span:nth-of-type(1){font-size: 24px;} } .pro-order-box{ background: url("../img/pro_form_bj.jpg") no-repeat center top fixed; background-size: cover;} .order-ad{ font-size: 16px; color: #fff;} .hot-tags{ z-index: 999; width: 45px; height: 155px; position: absolute; top: 0; right: 20px; background:url("../img/pro-hot-bj.png") no-repeat top left;} .hot-tags span{writing-mode:vertical-rl; color: #fff; font-size: 18px; font-weight: bold} .hot-tags i svg{fill: #fff; width: 25px; height: 25px;} .kj_btn_box>div:nth-of-type(2){ font-size: 18px; color:#333} .kj_btn_box>div:nth-of-type(2) span{ font-size: 18px; color:#0075c4} .kj_btn_box>div:nth-of-type(3) i{ padding: 0 0.25rem} .kj_btn_box>div:nth-of-type(3) i svg{ width: 20px; height: 20px; fill: #0075c4;} .pro-ad-three{ background: #f5f6f8} .pro-three-box{ width: 65%} .pro-ad-box{ width: 35%} .pro-three-box .pro-three-item{ background: #fff; width: 31%; font-size: 16px; color: #333;} .pro-three-box .pro-three-item i{ width: 60px; height: 60px; background: #02276a; border-radius: 100%; transition: all 0.5s} .pro-three-box .pro-three-item i svg{ width: 40px; height: 40px; fill: #fff} .pro-three-box .pro-three-item:hover i svg{-webkit-animation: swing 1 1s linear; -o-animation: swing 1 1s linear; animation: swing 1 1s linear;} .pro-three-box .pro-three-item:hover i{ background: #0075c4;} .pro-three-box .pro-three-item p span{ position:relative} .pro-three-box .pro-three-item p span:after{ position: absolute; content: ""; background: #ccc; width: 50%; height: 2px; left: 0; right: 0; margin: auto; bottom: -100%; transition: all 0.5s; } .pro-three-box .pro-three-item:hover p span:after{ width: 80%; background: #0075c4;} .pro-ad-box{ border-left:1px solid #e3e3e3} .pro-ad-box>div:nth-of-type(1){} .pro-ad-box>div:nth-of-type(1) p:nth-of-type(1){ font-size: 30px; color: #333; margin-bottom: 0} .pro-ad-box>div:nth-of-type(1) p:nth-of-type(1) span{ font-size: 30px; color: #0075c4;} .pro-ad-box>div:nth-of-type(1) p:nth-of-type(2){ font-size: 18px; color: #666} .pro-tel-box i{ background: #02276a; border-radius: 0.25rem; padding: 1%} .pro-tel-box i svg{ width: 30px; height: 30px; fill: #fff} .pro-tel-box p{ margin-bottom: 0} .pro-tel-box p:nth-of-type(1){ font-size: 14px; color: #666} .pro-tel-box p:nth-of-type(2){ line-height: 1; font-size: 32px; color: #02276a; font-family: 'impact'} @media(max-width: 1400px){ .pro-ad-box>div:nth-of-type(1) p:nth-of-type(1){ font-size:20px; color: #333; margin-bottom: 0} .pro-ad-box>div:nth-of-type(1) p:nth-of-type(1) span{ font-size: 20px; color: #0075c4;} .pro-tel-box p:nth-of-type(2){ line-height: 1; font-size: 24px; color: #02276a; font-family: 'impact'} } @media(max-width: 1199.98px){ .pro-three-box{ width: 100%} .pro-ad-box{ width: 100%} .pro-ad-box{ border-left:0px solid #e3e3e3} .kj_btn_box>div:nth-of-type(2){ font-size: 16px; color:#333} .kj_btn_box>div:nth-of-type(2) span{ font-size: 16px; color:#0075c4} } /*服务模块*/ .service_box{ background: url("../img/title_bj.png") repeat;} .pro-three-box .pro-three-item.bg-smallhs{ background: #f7f7f7} .service-title{} .service-title p:nth-of-type(1){ font-size: 30px; color: #333; font-weight: bold} .service-title p:nth-of-type(1) span{ position: relative; color: #cb2020; font-weight: bold} .service-title div:nth-of-type(1){ color: #666; font-size: 16px; line-height: 2} .service-title p:nth-of-type(1) span:nth-of-type(1):after{ position:absolute; content: "";left: 0; bottom: -50%; width: 100%; height: 2px; background: #0075c4;} .service-three-title{color: #0075c4; font-size: 24px; font-weight: bold; border-bottom: 1px dashed #e0e0e0} .service-three-content{ line-height: 2; font-size: 16px; color: #666 } .service-three-content b{ color: #0075c4; text-decoration: underline} @media(max-width: 991.98px){ .service-title p:nth-of-type(1){ font-size: 18px;} .pro-three-box .pro-three-item i{ width: 40px; height: 40px;} .pro-three-box .pro-three-item i svg{ width: 20px; height: 20px;} .pro-three-box .pro-three-item{ font-size: 14px;} } /*解决方案*/ .jiejue-font-box{} .jiejue-title{ font-size: 30px; font-weight: bold; color: #0075c4; border-bottom: 1px dashed #e0e0e0} .jiejue-title a{ color: #0075c4} .jiejue-title span{ transition: all 0.5s} .jiejue-title:hover span,.jiejue-title:hover i{ transform: translateX(20%)} .jiejue-title i{ border:1px dashed #0075c4; border-radius: 50%; width: 52px; height: 52px;transition: all 0.5s} .jiejue-title i svg{ width: 50px; height: 50px; fill: #0075c4;transition: all 0.5s} .jiejue-font-box ul li{ position: relative; font-size: 16px; color: #666; margin: 0.5rem 0;} .jiejue-font-box ul li:before{ content: ''; display: inline-block; vertical-align: middle; width: 16px; height: 16px; background: url(../img/icon-dot.png) center/cover no-repeat; margin-right: 5px; } .case-all-box{} .case-all-box .case-tuijian-title i svg{ width: 30px; height: 30px; fill: #0075c4} .case-all-box .case-tuijian-title span{ font-size: 22px; font-weight: bold; color: #0075c4} .case_right_font{} .case_right_font p:nth-of-type(1){ color: #0075c4; font-size: 28px;} .case_right_font .jiejue-desc{ color: #666666; font-size: 16px; line-height: 2} .jiejue-pinpai{ background: url("../img/case_box_bj.jpg") no-repeat left top; background-size:cover} .jiejue-pinpai .jiejue-pinpai-title{ font-size: 20px; color: #fff; border-bottom: 1px dashed rgba(255,255,255,0.4)} .jiejue-pinpai-title i svg{ width: 30px; height: 30px; fill: #0075c4;} .jiejue-pinpai>div:nth-of-type(2){ font-size: 16px; color: #fff; line-height: 1.5} .jiejue-pinpai>div:nth-of-type(3){ font-size: 16px; color: #fff; line-height: 1.5} .jiejue-pinpai>div:nth-of-type(3)>span{ border-radius: 0.25rem; border: 1px solid rgba(255,255,255,0.4);} .jiejue-pinpai>div:nth-of-type(3)>span span{ font-family: Arial; font-size: 24px; font-weight: bolder} .case-nav-box{ width: 75%} .case-nav-box .case-item{ width: calc(100% / 3); text-align: center; position: relative; font-size: 16px;} .case-nav-box .case-item a{ font-size: 18px; color: #333} .case-nav-box .case-item:after{ position: absolute; content: ""; width: 1px; height: 60%; background: #ccc; right: 0; top: 0; bottom: 0;} .case-nav-box .case-item:nth-last-of-type(1):after{ display: none} .case-datil-name{ font-size: 24px; font-weight: bold; color: #0075c4;} @media(max-width: 991.98px){ .case-nav-box{ width: 100%} .case-datil-name{ font-size: 18px; font-weight: bold; color: #0075c4;} .case_right_font p:nth-of-type(1){ color: #0075c4; font-size: 20px;} .jiejue-pinpai>div:nth-of-type(3)>span{ border-radius: 0.25rem; border: 1px solid rgba(255,255,255,0);} .jiejue-pinpai>div:nth-of-type(3)>span span{ display: block; font-family: Arial; font-size: 24px; font-weight: bolder} } /*品牌优势*/ .pinpai-box .pinpai-item{width: calc(100% /2);} .pinpai-box .pinpai-item span{ position: relative; padding:2rem; background: #0e4b99; transition: all 0.5s} .pinpai-box .pinpai-item span svg{ width:50px; height: 50px; fill: #fff} .pinpai-box .pinpai-item>div:nth-of-type(1) p{ font-size: 26px; color: #333;} .pinpai-box .pinpai-item>div:nth-of-type(1) div{ font-size: 16px; color: #666;} .pinpai-box .pinpai-item span:after{ position: absolute; content: ""; background: #ca1323; left: 0; top: 0; bottom: 0; bottom: 0; margin: auto; transform: scale(0); transition: transform 0.5s; width: 100%; height: 100%; border-radius: 0.2rem} .pinpai-box .pinpai-item:hover span:after,.pinpai-box .pinpai-item.active span:after{ transform: scale(1); } .pinpai-box .pinpai-item span i{ position: relative; z-index: 999;} .pinpai-box .pinpai-item:hover >div:nth-of-type(1) p,.pinpai-box .pinpai-item.active >div:nth-of-type(1) p{ color: #ca1323;} @media(max-width: 991.98px){ .pinpai-box .pinpai-item{width: 100%;} .pinpai-box .pinpai-item span{ position: relative; padding:1rem; background: #0e4b99; transition: all 0.5s} .pinpai-box .pinpai-item span svg{ width:30px; height:30px; fill: #fff} .pinpai-box .pinpai-item>div:nth-of-type(1) p{ font-size: 18px; color: #333;} .pinpai-box .pinpai-item>div:nth-of-type(1) div{ font-size: 14px; color: #666;} } .pro_datil_fw{ font-size: 16px;color: #999; } .chat_btn{ background: #e80113; border-radius: 0.2rem; font-size: 16px; color: #fff; padding: 1rem 3rem; text-align: center; } .chat_btn a{ color: #fff;display: flex; align-items: center; text-align: center; } .chat_btn a i{ display:inline-block; background: url("../img/chat.png") no-repeat center center; padding: 1rem} .three_box{ font-size: 14px; color: #666; } .three_box .three_item{ position: relative;flex: 1; text-align: center;} .three_box .three_item:not(:nth-last-of-type(1)):after{ position: absolute; content: ""; width: 1px; background: #dddddd; right:0%; top: 0; bottom:0; margin: auto; height: 50%} @media(max-width: 768px){ .chat_btn{ background: #e80113; border-radius: 0.2rem; font-size: 16px; color: #fff; padding: 1rem 3rem; text-align: center; width: 60%;} .chat_btn a{ width: 100%; } } .index-title p:nth-of-type(1){ font-size: 40px; font-weight: 100 } .index-title p:nth-of-type(2){font-size: 20px; font-weight: 100 } .index-pro-title{} .index-pro-title p:nth-of-type(1){ font-size: 30px; color: #22497f} .index-pro-title p:nth-of-type(2){ font-size: 16px; color: #666666;} @media (max-width: 991.98px){ .index-title p:nth-of-type(1){ font-size: 20px; font-weight: 100 } .index-pro-title p:nth-of-type(1){ font-size: 20px; color: #22497f} .index-pro-title p:nth-of-type(2){ font-size: 12px; color: #666666;} } .index-pro-title p:nth-of-type(2) span{ position: relative;} .index-pro-title p:nth-of-type(2) span:after{ position: absolute; content: ""; width: 100%; height: 1px; background: #eaeaea;left: 0; right: 0; bottom: -80%; margin: auto} .index-pro-title p:nth-of-type(2) span:before{ position: absolute; content: ""; width: 20%; height: 3px; background: #d50000;left: 0; right: 0; bottom: -80%; margin: auto; z-index: 999} .pro-all p{ line-height: 40px; font-size: 16px; padding-top: 10px; position: relative; transition: all 0.5s} /*.pro-all span{ display: block; overflow: hidden; position: relative;} .pro-all span:after{ transition: all 0.5s; position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 0%; background: rgba(0,0,0,0.5); }*/ .pro-all a img{ transition: all 0.5s } .pro-all a{ position: relative; width: 100%; display: block; overflow: hidden; height: auto;} .pro-all a i:nth-of-type(1){ z-index: 1; transition: all 0.5s; position: absolute; background: #a6c14c; width: 100px; height: 100px; display: block; border-radius: 100px;left:-150px; top: -150px; } .pro-all a:hover i:nth-of-type(1){ left:-50px; top:-50px; } .pro-all a i:nth-of-type(2){ z-index: 1; transition: all 0.5s; position: absolute; background: rgba(26,178,122,0.3); width: 150px; height: 150px; display: block; border-radius: 150px;left:-150px; top: -150px; } .pro-all a:hover i:nth-of-type(2){ left:-20px; top:20px; } .pro-all a:hover img{ transform: scale(1.5); } .pro-all a:hover span:after{ height: 100%; } .pro-all a p:after{ position: absolute; transition: all 0.5s; content:""; left: 0; bottom: 0; height: 1px; background: #a6c14c; width: 0} .pro-all a:hover p:after{ width: 100% } .pro-all a:hover p{ letter-spacing: 5px; padding-left: 10px; } a.more-all-zj{line-height: 50px; border:1px #e2e2e2 solid; border-bottom: 3px #1ab27a solid; color: #4b4b4b; font-size: 14px; transition: all 0.5s} a.more-all-zj:hover{letter-spacing: 10px;} /*产品表单*/ .pro-form-box{ background: url("../img/pro-form.jpg") no-repeat top center; background-attachment: fixed;} .pro-form-font{ color: #fff} .pro-form-font p:nth-of-type(1){ font-size: 30px; font-weight: bold} .pro-form-font div:nth-of-type(1){ font-size: 16px; line-height: 2; width: 70%; margin: 0 auto} .news_img_right .news_box_slide{ width: 100%; height: auto; overflow: hidden; transition: all 0.5s} .news_box_slide a{ padding:1.5% 0; display: flex; width: 100%; height: 100%; position: relative;border-bottom: 1px solid #ebebeb; } .news_box_slide a:after{ position: absolute; content: ""; height: 1px; width: 100%; background: #c60012; transform-origin: left bottom; transform: scale(0); transition: all 0.5s;left:0; bottom: 0; } .news_box_slide a:hover:after{ transform: scale(1); width: 100%; transform-origin: right bottom;} .news_box_slide a:hover .index_time p,.news_box_slide a:hover .index_news_nr p:nth-of-type(1){ color: #c60012; } .index_time{ width: 15%; background: #f3f3f3; text-align: center; } .index_time p:nth-of-type(1){ font-size: 42px; color: #494949 } .index_time p:nth-of-type(2){ font-size: 14px; color: #9a9a98 } .index_news_nr{ width:80%; padding: 0 5% 0 0; box-sizing: border-box; transition: all 0.5s; } .index_news_nr div:nth-of-type(1){ color: #666666; font-size: 14px; } .index_news_nr p:nth-last-of-type(1){ font-size: 18px; color: #282828; line-height: 30px; } .index_news_nr p:nth-last-of-type(1) i{ font-size: 26px; margin-right: 5px; transition: all 0.5s } .news_box_slide a:hover i{ color: #d20005 } @media(max-width: 768px){ .index_time p:nth-of-type(1){ font-size:20px; color: #494949 } .index_time p:nth-of-type(2){ font-size: 12px; color: #9a9a98 } .index_news_nr p:nth-of-type(1) { color: #333333; font-size: 15px; transition: all 0.5s;} .index_news_nr div:nth-of-type(1){ font-size: 12px; } } /*广告*/ /*产品中心*/ .index-title p:nth-of-type(1){ font-size: 40px; font-weight: 100 } .index-title p:nth-of-type(2){font-size: 20px; font-weight: 100 } @media(max-width: 768px){ .index-title p:nth-of-type(1){ font-size: 26px; font-weight: 100 } .index-title p:nth-of-type(2){font-size: 16px; font-weight: 100 } } .pro-all p{ line-height: 40px; font-size: 16px; padding-top: 10px; position: relative; transition: all 0.5s} /*.pro-all span{ display: block; overflow: hidden; position: relative;} .pro-all span:after{ transition: all 0.5s; position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 0%; background: rgba(0,0,0,0.5); }*/ .pro-all a img{ transition: all 0.5s } .pro-all a{ position: relative; width: 100%; display: block; overflow: hidden; height: auto;} .pro-all a i:nth-of-type(1){ z-index: 1; transition: all 0.5s; position: absolute; background: #a6c14c; width: 100px; height: 100px; display: block; border-radius: 100px;left:-150px; top: -150px; } .pro-all a:hover i:nth-of-type(1){ left:-50px; top:-50px; } .pro-all a i:nth-of-type(2){ z-index: 1; transition: all 0.5s; position: absolute; background: rgba(26,178,122,0.3); width: 150px; height: 150px; display: block; border-radius: 150px;left:-150px; top: -150px; } .pro-all a:hover i:nth-of-type(2){ left:-20px; top:20px; } .pro-all a:hover img{ transform: scale(1.5); } .pro-all a:hover span:after{ height: 100%; } .pro-all a p:after{ position: absolute; transition: all 0.5s; content:""; left: 0; bottom: 0; height: 1px; background: #a6c14c; width: 0} .pro-all a:hover p:after{ width: 100% } .pro-all a:hover p{ letter-spacing: 5px; padding-left: 10px; } a.more-all-zj{line-height: 50px; border:1px #e2e2e2 solid; border-bottom: 3px #1ab27a solid; color: #4b4b4b; font-size: 14px; transition: all 0.5s} a.more-all-zj:hover{letter-spacing: 10px;} /*公司简介*/ .index-about-all{ background: url(../img/about-bj.jpg) no-repeat center top; min-height: 665px; } .about-content-right{ background: #1ab27a; color: #fff } .about-content-right .about-font-title{ font-size: 24px; } .about-content{ font-size: 14px; line-height: 30px; } .about-more{ border:1px solid #91dabf; font-size: 14px; color: #fff; transition: all 0.5s} .about-more:hover{ padding:0 20px; } .about-img img{ height: auto; } @media(min-width: 992px){ .about-img img{ min-height: 433px } } .about_left>p:nth-of-type(1){ font-size: 30px; font-weight: bold; color: #e80113; text-transform: uppercase;} .about_left>p:nth-of-type(2){ color: #303032; font-size: 24px; letter-spacing: 7px; font-weight: 100; position: relative; padding-bottom: 20px; } .about_left>p:nth-of-type(2):after{ position:absolute; content: ""; bottom: 0px; height: 2px; background: #e80113; width: 10%;left: 0} .about_nr{ color: #666666; font-size: 14px; line-height: 25px; height: 220px; overflow: auto; padding-right: 10px; } .test { width: 100%; line-height: 30px; height : 340px; overflow: auto; float : left; border : none; } .scrollbar { width : 96%; height: 20px; color:#666666; font-size: 16px; } .test-1::-webkit-scrollbar { width : 5px; height: 1px; } .test-1::-webkit-scrollbar-thumb { box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #196ccf; border-radius: 0.25rem; } .test-1::-webkit-scrollbar-track { box-shadow : inset 0 0 5px #FFFFFF; background : #FFFFFF!important; } @media(max-width: 768px){ .about_left>p:nth-of-type(1){ font-size: 22px; font-weight: bold; color: #e80113; text-transform: uppercase;} .about_left>p:nth-of-type(2){ color: #303032; font-size: 18px; letter-spacing: 7px; font-weight: 100; position: relative; padding-bottom: 20px; } } .about_right .img img{ max-width: 100% } .about_right .img{ position: relative; text-align: center; padding: 0 10px;} .about_right .img:before{position: absolute; content: ""; background: #e6e6e6;left:-10px;bottom: -10px; width: 60%; height: 60%; z-index: -1 } .about_right .img:after{position: absolute; content: ""; background: #e80113;right:-10px;bottom: -20px; width: 60%; height:70%; z-index: -1 } .num_box{ width: 100%; } .num_silde{ width: 49%; float: left; text-align: center; transition: all 0.5s } .num_silde:nth-of-type(3){ clear: both; float: left; } .num_silde div{ display: block; width: 100%; position: relative;} .num_silde div span:nth-of-type(1){ text-align: center; color: #e80113; font-size: 65px; font-family: 'Bahnschrift'; text-shadow: 0px 0px 10px rgba(203,6,50,0.2); transition: all 0.5s} .num_silde div span:nth-of-type(2){ position: absolute; top: 35%;left:58%; z-index: -1; transition: all 0.5s} .num_silde:nth-of-type(4) div span:nth-of-type(2){ position: absolute; top: 35%;left:66%; z-index: -1;transition: all 0.5s} @media(min-width: 992px){ .num_box{ width: 100%; display: flex; justify-content: space-between; } .num_silde{ flex: 1; font-size: 18px; color: #666; text-align: center; position: relative;} .num_silde:after{position: absolute; content: ""; width: 1px; height: 50%; background: #e7e7e7; right: 0; top: 0;bottom: 0; margin: auto; transition: all 0.5s} .num_silde:nth-last-of-type(1):after{ width: 0 } .num_silde:hover:after{ height: 30%; } .num_silde:hover div span:nth-of-type(2){ transform: rotate(360deg); opacity: 0.7} .num_silde div span:nth-of-type(1){ text-align: left; } .num_silde:before{ position: absolute; content: "";left: 0; right: 0; margin: auto; bottom: 5%; width: 0%; height: 1px; background: #e7e7e7; transition: all 0.5s } .num_silde:hover:before{ width: 50% } } .hs_color{ background: #f8f8f8; } .culture_img img{ max-width: 100%; } .culture_font p{ padding-left: 10% } .culture_font p:nth-of-type(2n+1){ font-size:18px; } .culture_font p:nth-of-type(2n){ font-size: 18px; margin-bottom:35px; } .fc_box .fc_slide{ width: 48%; float: left; overflow: hidden; } .fc_box .fc_slide:nth-of-type(2n){ float: right; } .big_img{ overflow: hidden; display: block; height: 100%; width: 100%;} .big_img img{width: 100%; height: 100%; object-fit: cover;} .fencai_box img{ transition: all 0.5s } .fencai_box img:hover{ filter: brightness(130%); transform: scale(1.05); } .sub-about-content { background: url(../img/about-bj-zj.jpg) no-repeat center top; background-size: cover;} .about-title{ width: 100%; text-transform: uppercase; font-size: 90px; letter-spacing: 1.5rem; font-weight:100; text-align: center; color: #cacaca } .about-name p.title-all{ font-size: 30px; color: #1ab27a; position: relative; } .about-name p.title-all:before{ content: ""; position: absolute; width: 63px; height: 2px; background: #878787; top: 0;left:0; } .zm-fu{ font-size: 180px; color: #acacac; font-style: arial; text-transform: uppercase;} .about-content-top{ color: #3b3b3b; font-size: 18px; } .about-name-right p.title-all{ font-size: 30px; color: #1ab27a; position: relative; } .about-name-right p.title-all:before{content: ""; position: absolute; width: 63px; height: 2px;top:0; right: 0; background: #878787; } .font-content-message{ line-height: 30px; color: #7d7d7d; font-size: 18px; } .name-zj{ text-align: right;} @media(max-width: 768px){ .sub-about-content { background: url(../img/m-about-bj-zj.jpg) no-repeat right top; } .about-title{ width: 100%; text-transform: uppercase; font-size: 30px; letter-spacing: 0.1rem; font-weight:100; text-align: center; color: #cacaca } .font-content{ font-size: 16px; } .name-zj{ font-size: 16px; text-align: left;} } /*厂容厂貌*/ .honor-box{} .honor-box .honor-font{ position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); color: #fff;} .honor-box a{ color: #fff; font-size: 16px;} /*发展历程*/ .history_font{ position: relative; } .history_font:after{ position: absolute; content: attr(data-title); font-size: 315px; line-height:255px; display: block; color: #f7f9fc; top: 0;left: 0;right: 0; bottom: 0; margin: auto;} .history_font div{ position: relative; z-index: 99} .history_font>p:nth-of-type(1){ font-size: 16px; color: #d7132e} .history_font>p:nth-of-type(1) span{ font-size: 30px; font-weight: bold} .history_datil{ font-size: 16px; color: #666; line-height: 40px;} .history-time{ font-size: 16px; color: #666666} .history-time i{ display: block; margin: auto; width: 6px; height:6px; border-radius: 100%; background: #666666} .active-nav .history-time{ font-size: 16px; color: #d7132e} .active-nav .history-time i{background: #d7132e} .hist_year{} .hist_year p:nth-of-type(1){ font-size: 30px; color: #006ab7; font-weight: bold} .hist_year p:nth-of-type(2){ font-size: 18px; color: #999999;} .history-time2{} .history-time2 p{ font-size: 18px; color: #666;} .history-time2 i svg{ transform:rotate(270deg); fill: #fff} .history-time2 i{ background: #e2e2e2; border-radius: 100%; width: 25px; height: 25px; border: 5px solid #f9f9f9; transition: all 0.5s} .hist_year{ position: relative} .hist_year:after{ position: absolute; content: "";right: 0%; top: 0; height: 90%; width: 1px; border-left:1px dashed #e2e2e2;} .swiper-slide-thumb-active .history-time2 i{ background: #006ab7; border: 5px solid #cce1f1;transition: all 0.5s} .swiper-slide-thumb-active .history-time2 p{ color: #006ab7; font-weight: bold;transition: all 0.5s} .zy_flash_add a{ color: #fff} .history-box-all .pro-swiper-prev{ left: 0; } .history-box-all .pro-swiper-next{ right: 0; } .history-box-all .pro-swiper-prev svg, .history-box-all .pro-swiper-next svg{fill:#d6dae0} .history-box-all .pro-swiper-prev, .history-box-all .pro-swiper-next { position: absolute; height: 80px; width: 80px; margin: auto; top: 0; bottom: 0; border-radius: 100%; border:1px solid #d6dae0; display: flex; align-items: center; justify-content: center; z-index: 2; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .pro-swiper-prev svg{ transform:rotate(180deg);} .history-box-all .pro-swiper-prev:hover, .history-box-all .pro-swiper-next:hover{ background: #006ab7; color: #fff; }.history-box-all .pro-swiper-prev:hover svg, .history-box-all .pro-swiper-next:hover svg{ fill: #fff} .history-box-all .pro-swiper-prev.swiper-button-disabled, .history-box-all .pro-swiper-next.swiper-button-disabled{ background: #f7f7f9; } .history-box-all .pro-swiper-prev.swiper-button-disabled svg, .history-box-all .pro-swiper-next.swiper-button-disabled svg{ fill: #fff!important;} .hist_time{ position: relative; width: 100%} .hist_time:after{ position: absolute; content: ""; border-bottom: 1px dashed #e2e2e2; width: 96%; height: 1px; top: 80%; margin: auto;left: 0; right: 0; } .hist_time .history-button-next1,.hist_time .history-button-prev1{ position:absolute;z-index: 9999; margin: auto;} .hist_time .history-button-next1{ left:0; top:52%; transform:rotate(180deg);} .hist_time .history-button-prev1{ right:0; top:40%; transform:rotate(0deg);} .hist_time .history-button-next1.swiper-button-disabled img,.hist_time .history-button-prev1.swiper-button-disabled img{ filter: grayscale(100%);} .history_all2{ height: auto; width: 100%;} .history_box{ width:100%; position: relative; height: 500px; } .history_box:after{ position: absolute; content: ""; width: 1px; height: 16px; background: #cb0631;left: 0; right: 0; margin: auto; } .history_box:before{ position: absolute; content: ""; width:1px; height: 16px; background: #cb0631;left: 0; right: 0; margin: auto; } .time_1{ position: absolute; top: 0%;bottom: 0; margin: auto; font-family: 'Bahnschrift'; font-size: 30px; text-align: center; height: 85px; line-height: 85px; z-index: 99; padding-left:45%; text-align: center; } .time_1 span{ display: block; color: #b60d33;} .history_nr p:nth-of-type(1){ font-size: 18px; color:#333; font-weight: bold; } .history_nr div:nth-of-type(1){ color: #7d7d7d; font-size: 14px; text-align: center; } /*.history_box:hover{ }*/ .history_all2 .swiper-slide:nth-of-type(2n+1) .history_nr{ position: absolute; left: 0; right: 0; margin: auto; text-align: center; } .history_all2 .swiper-slide:nth-of-type(2n) .history_nr{ position: absolute; left: 0; right: 0; margin: auto ;text-align: center; } .swiper-slide:nth-of-type(2n) .history_box:after{ top: 30%; } .swiper-slide:nth-of-type(2n) .history_box:before{ top: 34%; } .swiper-slide:nth-of-type(2n+1) .history_box:after{ top: 62%; } .swiper-slide:nth-of-type(2n+1) .history_box:before{ top: 66%; } .history_box>p:nth-last-of-type(1){ width: 336px; position: absolute;top: 38%;left: 0;right: 0; margin: auto; z-index: -1; transition: all 0.5s} .history_box:hover>p:nth-last-of-type(1) img{ opacity: 0; max-width: 100% } .history_box>p:nth-last-of-type(2){ width: 336px; position: absolute; top: 38%;left:-10px; margin: auto; opacity: 0; transition: all 0.5s; z-index: 2} .history_box:hover>p:nth-last-of-type(2){ opacity: 1} .history_box:hover .time_1 span{ color: #fff } @media(max-width: 768px){ .history_box{ width:100%; position: relative; height: 220px; margin-bottom: 10px} .history_all2 .swiper-slide:nth-of-type(2n+1) .history_nr{ position: absolute; top: 15%;left: 0; right: 0; margin: auto; text-align: center; } .history_all2 .swiper-slide:nth-of-type(2n) .history_nr{ position: absolute; top: 15%;left: 0; right: 0; margin: auto ;text-align: center; } .swiper-slide:nth-of-type(2n) .history_box:after{ top: 0%; } .swiper-slide:nth-of-type(2n) .history_box:before{ top: 0%; } .swiper-slide:nth-of-type(2n+1) .history_box:after{ top: 0%; } .swiper-slide:nth-of-type(2n+1) .history_box:before{ top: 0%; } .history_all2 .swiper-slide{ border:rgba(0,0,0,0.1) 1px solid; } .history_box>p:nth-last-of-type(1),.history_box>p:nth-last-of-type(2){ display: none } .history_box .time_1 span{ color:#b60d33; } .history_box:hover .time_1 span{color:#b60d33;} .time_1{ position: absolute; margin: auto; font-family: 'Bahnschrift'; font-size: 30px; text-align: center;z-index: 99; padding-left:35%; text-align: center; top:80%; } } @media(max-width: 991.98px){ .hist_year p:nth-of-type(1){ font-size: 20px; color: #006ab7; font-weight: bold} .hist_year p:nth-of-type(2){ font-size: 14px; color: #999999;} .history_font{ position:inherit; } .history_font:after{ position: absolute; display: none} .history-box-all .pro-swiper-prev, .history-box-all .pro-swiper-next { position: absolute; height: 30px; width: 30px;} } /*企业文化*/ .culture-big-box{ background: url("../img/qywh_bj.jpg") no-repeat top center; background-attachment: fixed} .culture-title p:nth-of-type(1) span{ position: relative; font-weight: bold; color: #fff;font-size: 36px;} .culture-title p:nth-of-type(1) span:after{ position: absolute; content: "“"; right:-20%; top: 0; bottom: 0; margin: auto; color: #fff; } .culture-title p:nth-of-type(1) span:before{ position: absolute; content: ""; left:0%; height: 2px; width: 15%; top: 0; bottom: 0; margin: auto; background: #fff;} .culture-title p:nth-of-type(2){ font-size: 16px; color: #fff;} @media(max-width: 991.98px){ .culture-title p:nth-of-type(1) span{ position: relative; font-weight: bold; color: #fff;font-size:20px;} .culture-title p:nth-of-type(2){ font-size: 14px; color: #fff;} } /*新闻信息*/ .new-all-tg-demo{ background: #f2f2f6 } .new-all-tg-demo p:nth-of-type(1){ font-size: 16px; color: #878787;margin-bottom: 0; line-height: 35px;} .new-all-tg-demo p:nth-of-type(2){ font-size: 14px; color: #3c3c3c ; margin-bottom: 0; line-height: 35px;} .img-font-content{ font-size: 14px; color: #878787 } a.more-all-news{ background: #1ab27a; color: #fff; font-size: 16px; border-radius: 5px;} a.more-all-news:hover{ background: #94cd0f; width: 100%; } .news-li{ border-bottom: 1px #e5e5e5 solid; transition: all 0.5s;} .news-li:nth-last-of-type(1){border-bottom:0px solid #e5e5e5; } .news-title-font{ padding-left: 20px; font-size: 14px; color:#3c3c3c; position: relative;} .news-title-font:after{content:" "; position: absolute; left:0;top:5px; width: 10px; height: 10px; background: #666; border-radius: 10px;} .news-title-font span{ display: block; float: right; font-size: 14px; } .news-content-demo{ position: relative; color: #878787; font-size: 14px; width: 90%; } .news-li:hover{ -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); -webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); } .news-li-all{ transition: all 0.5s;} .news-content-demo:after{ font-size: 20px; font-weight: 100; content:"+"; position: absolute; right: -10%; padding-left: 20px; text-align: center; bottom:15%; color: #878787; height: 25px; line-height: 15px width:15px; border-left:1px solid #e5e5e5; } .pro-news_m dd h4 a{font-size:18px;color: #333;font-weight: normal; padding-top: 20px;display: block; height:22px; overflow:hidden; line-height:22px;} .pro-news_m dd p{font-size:14px;color: #777;padding-top: 18px;line-height: 24px;padding-bottom: 26px; border-bottom: 1px solid #c9c9c8;margin-bottom:20px; height:48px; overflow:hidden;} .pro-news_m dd p a{ color:#da0410} .pro-news_m li{ display:block; font-size:15px; position:relative; transition:all 0.4s; border-bottom:1px solid #eaeaea;} .pro-news_m li:before{ content:" "; position:absolute; left:-15px; top: 12px; } .pro-news_m li:after{ content:""; position:absolute; border-bottom:1px solid #F00;transition:all 0.4s; width:0; left:50%; bottom:0} .pro-news_m li:hover:after{ border-bottom:1px solid #ce0a0a; bottom:0; width:100%; left:0;} .pro-news_m li span:nth-child(2){ float:right;} .pro-news_m li a{ color:#4f4f4f} .pro-news_m li a:hover{ color:#ce0a0a} /* 合作案例*/ .index-links{} .link-content{ justify-content: space-between; width: 100% } .link-content img{ transition: 0.5s all; cursor: pointer; } .links-slide:hover img{ transform: scale(1.5); } /*联系我们页面*/ .contact-container{} .contact-map{ width: 75%} .contact-container{ width: 25%} .contact-title{} .contact-title1 i svg{ fill: #cc0000; width: 40px; height: 40px;} .contact-title1 span{ font-size: 18px; color:#cc0000; text-transform: uppercase; } .contact-nr{ font-size: 16px; color: #666;} .contact-nr p{ line-height: 2; margin-bottom: 0} .contact-xx-item{ position: relative;} .contact-xx-item:after{ position: absolute; content: ""; bottom:0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #e0e0e0;} .contact-xx-item:before{ position: absolute; content: ""; bottom:-1px; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #fff;} .contact-scan img{ width: 120px; } .contact-xx-item.no{ } .contact-xx-item.no:after,.contact-xx-item.no:before{ display: none!important;} #map{height: 695px; width: 100%; box-sizing: border-box; border:0px solid #fff; } @media(max-width: 1199.98px){ .contact-map{ width: 65%} .contact-container{ width: 35%} } @media(max-width: 991.98px){ .contact-map{ width: 100%} .contact-container{ width: 100%} #map{height: 450px;} } /*公司简介 子页面*/ .demo-company-bigbox{ background: url("../img/company_bj.jpg") no-repeat center top fixed; background-size: cover; position: relative; } .demo-company-left{ width: 75%;} .demo-company-right{ width: 25%} .demo-title{} .demo-title .demo-font p:nth-of-type(1){ margin-bottom: 0; font-size: 36px; font-weight: bold; color: #fff;} .demo-title .demo-font p:nth-of-type(2){ font-size: 22px; color: rgba(255,255,255,0.5);} .demo-title .demo-font.two p:nth-of-type(1){ color: #000;} .demo-title .demo-font.two p:nth-of-type(2){ color: rgba(0,0,0,0.5); text-transform: uppercase;} .demo-title .demo-font i{ position: relative; display: block; width: 30px; height: 2px; background: #cc0000;} .demo-title .demo-font i:after{ position: absolute; content: ""; width: 30px; height: 2px; background: #cc0000; left:40px;} .demo-more{} .demo-more>a i:nth-of-type(1){ position: relative; display: block; width: 6px; height: 22px; background: #cc0000; transform: skew(-20deg); transition: all 0.5s } .demo-more>a i:nth-of-type(1):before{ display: block;position: absolute; content: ""; width: 6px; height: 22px; right: -15px; top:0;bottom:0; background: #cc0000; transition: all 0.5s } .demo-more>a i:nth-of-type(1):after{ display: block;position: absolute; content: ""; width: 6px; height: 22px; left: -15px; top:0; bottom:0; background: #cc0000; transition: all 0.5s } .demo-more>a i:nth-of-type(2){ position: relative; display: block; width: 6px; height: 22px; background: #d4d4d6; transform: skew(-20deg); transition: all 0.5s } .demo-more>a span{ display: block;width: 65px; font-size: 12px; line-height: 0.75rem; text-transform: uppercase;color: rgba(255,255,255,0.5);} .demo-more>a i:nth-last-of-type(1){ border:8px transparent solid; border-left-color:rgba(255,255,255,0.5); transition: all 0.5s } .demo-more.two>a i:nth-of-type(2){ background: #333; } .demo-more.two>a i:nth-last-of-type(1){ border:8px transparent solid; border-left-color:rgba(0,0,0,0.5) ; transition: all 0.5s } .demo-more.two>a span{ color: rgba(0,0,0,0.5);} .demo-more.two>a i:nth-last-of-type(1){ border:8px transparent solid; border-left-color:#333333; transition: all 0.5s } .demo-more:hover>a i:nth-last-of-type(1){ transform: translateX(-30%); border-left-color: #cc0000;} .demo-more:hover>a i:nth-of-type(1):before{ right: -10px;} .demo-more:hover>a i:nth-of-type(1):after{ left: -10px;} .demo-more:hover>a i:nth-of-type(2){ transform: translateX(-50%) skew(-20deg);} .demo-more:hover>a span{ color: #cc0000} .demo-company-nr{ font-size: 16px; color: #fff; line-height: 2;} .white80{ color: rgba(255,255,255,0.8)!important;} .demo-company-right .about-num-box .about-num-item{ width: calc(100% / 1)} .demo-company-bigbox:after { position: absolute; content: attr(data-title); left: 0; right: 0; bottom:-6%; overflow: hidden;; margin: auto; text-decoration: none; font-size: 175px; text-transform: uppercase; font-weight: bold; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0)); text-align: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.5s; } @media(max-width: 1799.98px){ .demo-company-bigbox:after { font-size: 150px;} } @media(max-width: 1499.98px){ .demo-company-bigbox:after { font-size: 120px;} } @media(max-width: 1299.98px){ .demo-company-bigbox:after { font-size: 100px;bottom:0%;} } @media(max-width: 1199.98px){ .demo-company-bigbox:after { font-size: 80px; bottom:0%;} } @media(max-width: 991.98px){ .demo-company-bigbox:after { display: none} .demo-company-left{ width: 100%} .demo-company-right{ width: 100%} .demo-title .demo-font p:nth-of-type(1){ font-size: 20px; } .demo-title .demo-font p:nth-of-type(2){ font-size: 16px;} .demo-more>a span{ display: block;width: 50px; font-size: 12px;} .demo-more:hover>a i:nth-last-of-type(1){ transform: translateX(-10%);} .demo-more>a i:nth-of-type(1):before{ right: -10px; } .demo-more>a i:nth-of-type(1):after{ left: -10px; } .demo-title .demo-font p:nth-of-type(2){ font-size: 14px; } } /*企业文化*/ .demo-culture-wrap{ background: #f7f7f7; position: relative; transition: all 0.5s} .demo-culture-item.two .demo-culture-wrap:after{position: absolute; content: ""; border:20px transparent solid;border-bottom-color: #f7f7f7; top:-40px; left: 50px; transition: all 0.5s;border-top-color:transparent!important;} .demo-culture-wrap:after{position: absolute; content: ""; border:20px transparent solid;border-top-color: #f7f7f7; bottom:-40px; left: 50px; width: 20px; height: 20px;transition: all 0.5s} .demo-culture-ico{} .demo-culture-ico i svg{ width: 60px; height: 60px; fill: #cc0000;transition: all 0.5s} .demo-cul-wrap p{ font-size: 32px; color: #000;transition: all 0.5s} .demo-cul-wrap div{ font-size: 20px; color: #444b53;transition: all 0.5s} .culture-num{} .culture-num span{ margin-left:40px; width: 56px; height: 56px; display: block; border-radius: 50%; font-size: 22px; background: #f7f7f7; color: #222222;transition: all 0.5s} .demo-culture-item:hover .demo-culture-wrap{ background: #cc0000} .demo-culture-item:hover .demo-culture-wrap .demo-culture-ico i svg{ fill: #fff} .demo-culture-item:hover .demo-cul-wrap p{ color: #fff} .demo-culture-item:hover .demo-cul-wrap div{ color: #fff} .demo-culture-item:hover .demo-culture-wrap:after{ border-top-color: #cc0000} .demo-culture-item.two:hover .demo-culture-wrap:after{ border-bottom-color: #cc0000} .demo-culture-item.two:hover .culture-num span{ transform: translateY(-10%); background:#cc0000; color: #fff } .demo-culture-item:hover .culture-num span{ transform: translateY(10%); background:#cc0000; color: #fff } .demo-culture-item:hover .demo-culture-ico i svg{transform: translateY(10%); } .demo-culture-item:hover .demo-cul-wrap p{transform: translateY(10%); } .demo-culture-item:hover .demo-cul-wrap div{transform: translateY(10%); } @media(max-width: 1199.98px){ .demo-cul-wrap p{ font-size: 20px; } .demo-cul-wrap div{ font-size: 16px; } .demo-culture-ico i svg{ width: 40px; height: 40px;} } /*厂区*/ .embed-responsive-16by8:before{ padding-top: 76.8%} .embed-responsive-3by5:before{ padding-top: 81%} .embed-responsive-2by5:before{ padding-top: 140%} .demo-honor-k{ position: relative; overflow: hidden;} .demo-honor-k .honor-img{ position: relative} .demo-honor-k .honor-img:after{ position: absolute; content: ""; background: rgba(204,0,0,0.9); left: 0; top: 0; right: 0; bottom: 0; width: 90%; height: 90%; margin:auto; transform: scale(0); transition: transform 0.5s; z-index: 99; } .demo-honor-k:before{ position: absolute; content: ""; left: 0; bottom:0; top:0; bottom:0; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 2; transform: scale(1.05); opacity: 0; transition: all 0.5s;} .demo-honor-k:hover:before{ transform: scale(1); opacity: 1 } .demo-honor-k .honor-mask{position: absolute; display: block; height: 100%; font-family: Arial; font-size: 70px; color: #fff;left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 999; text-align: center; transform: translateY(-10%); transition: all 0.5s; opacity: 0} .demo-honor-k .honor-mask i svg{ width: 50px; height: 50px; fill: #fff} .demo-honor-k:hover .honor-img:after{ transform: scale(1)} .demo-honor-k .honor-mask p{ font-size:18px; color: #fff;} .demo-honor-k:hover .honor-mask{transform: translateY(0%); opacity: 1} .demo-honor-k .honor-img img{ transition: all 0.5s;transform: scale(1.05)} .demo-honor-k:hover .honor-img img{ transform: scale(1)} .demo-honor-k a>div:nth-last-of-type(1) span{ font-size: 18px; color: #333;} @media(max-width: 1199.98px){ .demo-honor-k .honor-mask i{ height: 80px;} .demo-honor-k .honor-mask i svg{ width: 30px; height: 30px;} } @media(max-width: 991.98px){ .prolist-k .prolist-wrap p{ font-size:16px;} .demo-honor-k .honor-mask p{ font-size:16px;} .embed-responsive-2by5:before{ padding-top: 75%} } /*荣誉*/ .honor-demo-box{ border:1px solid #f4f4f4;position: relative;} .honor-demo-box p{ font-size: 18px; color: #666666} .honor-demo-box:after{ position: absolute; content: ""; height:4px; left: 0; bottom:0; background: #cc0000; width: 100%; transform: scale(0); transition: all 0.5s} .honor-demo-box:hover:after{ transform: scale(1);} .honor-demo-box img{ transform: scale(1); transition: all 0.5s} .honor-demo-box:hover img{ transform: scale(1.02); } /*产品综合页面 子页面*/ .demo-pro-bigbox{ position: relative; height: 500px; } .product-title{ background:rgba(236,107,0,1) url("../img/lm_current.png") no-repeat center top;} .product-title p:nth-of-type(1){ font-size: 36px; font-weight: bold; color: #fff;} .product-title p:nth-of-type(2){ font-size: 22px; color: rgba(255,255,255,0.5); text-transform: uppercase;} .pro_floor_title>span:nth-of-type(1){ font-size: 30px; color: #000;} @media(max-width: 991.98px){ .product-title{ display: none } .demo-pro-bigbox{ height: 250px; } .pro_floor_title>span:nth-of-type(1){ font-size: 20px; } } /*产品模块*/ .cp-box{ transition: all 0.5s} .cp-box:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.2)} .cp-font{} .cp-font>div:nth-of-type(1){ font-size: 20px; color: #333;} .cp-font>div:nth-of-type(2){ font-size:16px; color: #666;} .cp-font>div:nth-of-type(3) i{ position: relative; display: block; width: 5px; height: 5px; border-radius: 100%; background: #f4d0d3} .cp-font>div:nth-of-type(3) i:before{ position:absolute; content: "";width: 5px; height: 5px; background: #ca1323; border-radius: 100%; left:-200%; top: 0; bottom: 0; margin: auto; display: block} .cp-font>div:nth-of-type(3) i:after{ position:absolute; content: "";width: 5px; height: 5px; background: #f4d0d3; border-radius: 100%; right:-200%; top: 0; bottom: 0; margin: auto;display: block} .pro-ty-box{} .pro-ty-box .pro-box-wrap{} .pro-ty-box .pro-box-wrap .pro-title-small>div:nth-of-type(1) i{ position: relative} .pro-ty-box .pro-box-wrap .pro-title-small>div:nth-of-type(1) i:after{position:absolute; content: ""; width: 15px; height: 30px; background: #004ca1; left: 0; transform: skewX(-20deg); top: 0;bottom: 0; margin:auto; transition: all 0.5s} .pro-ty-box .pro-box-wrap .pro-title-small>div:nth-of-type(1) span{ position: relative; color: #333; font-size: 26px; font-weight: bold} .pro-box-wrap{ border:1px solid #e0e0e0; box-shadow: 0 0 15px rgba(0,0,0,0.15)} .pro-title-small>span:nth-of-type(1) a{ background: #004ca1; color: #fff;; font-size: 16px;} .left-ad-item{ border-bottom: 1px dashed #ccc;} .left-ad-item>div i svg{ transform: translateY(-55%); width: 15px; height: 15px; fill: #d11922;} .left-ad-item>div>div span:nth-of-type(1){ color: #333333; font-size: 18px;} .left-ad-item>div>div span:nth-of-type(2){ text-transform: uppercase; color: #999999; font-size: 14px;} .pro-nr-content .left-pro-ad{ width: 30%; transition: all 0.5s} .pro-nr-content .right-img-box{ width: 70%;transition: all 0.5s} .pro-ty-box{ transition: all 0.5s; overflow: hidden;} .pro-ty-box img{transition: all 0.5s} .pro-ty-box:hover .pro-box-wrap .pro-title-small>div:nth-of-type(1) i:after{transform: skewX(0deg) scaleX(0.2); background: #b91f0e; } .pro-ty-box:hover img{ transform: scale(1.05)} /*版权 end*/ #mheader{opacity:0;position: fixed; width: 100%; top:0;bottom:0;height:100vh;padding: 20px 0px; z-index: -1; transition: all 0.3s;} .mlogo{ float: left; width:40%; margin-left: 15px;} .mlogo img{ width: 100%; } .navigation-is-visible div.nav-trigger{display:block;color:#fff;z-index:99;font-size:36px; width: 32px;position: absolute;top:25px;left:15px;} .navigation-is-visible #mheader {opacity: 1;z-index: 999;} .nav_transform1{position:absolute;top:0;bottom:0; left:20%; display: none; z-index:20;overflow-y:scroll; padding:20px 10px;width:80%;border:0;background:#FFFFFF; text-transform:none; overflow-scrolling:touch;} .nav_transform1{transition:-webkit-transform .3s cubic-bezier(.86,0,.07,1);transition:transform .3s cubic-bezier(.86,0,.07,1);} .navigation-is-visible .nav_transform1{display:block; -webkit-transform:none;transform:none; } .nav-overlay{position:fixed;top:0;left:50%; margin-left:-375px; z-index:10;width:750px;height:100vh;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s linear;pointer-events:none;} .navigation-is-visible .nav-overlay{opacity:1;pointer-events:auto;} .navp1{ padding: 15px 0px;text-align: center; /*background: #0069a0; */} .navp1 img{ max-width: 60%; } .navp2{ padding-left: 30px;padding-top:20px; font-size: 1.4rem;} .navp2 b{ font-size: 1.6rem; color: #D80100; } .navul{ width: 90%; margin: 15px auto 25px;} .nav-item{position: relative; margin-bottom: 5px; } .nav-item p{overflow: hidden;line-height: 40px;max-height:40px; font-size: 16px; padding: 0px 10px;} .nav-item p i{ float: right; margin-top:11px; font-size:16px; color: #666;} .nav-item.nav-show{border-bottom: none;} .nav-item .msub{display:none; background:#f1f1f1; padding: 0px 16px; overflow:hidden; } .nav-item .msub a{ line-height: 2; margin-bottom:5px; font-size:14px; display: block;} .nav-item .msub a.on{ color:#D80100;} .nav-item.nav-show .msub{display: block;} .nav-item p a{ float: left; } .nav-show p i{transform:rotate(90deg);} .nav-show.nav-item>p{ background:#f1f1f1;} .nav-show>a:before,.nav-item>a:hover:before{opacity:1;} .navseach{ overflow: hidden; margin-top: 25px; } .navseach_text{ width: 180px; padding: 0px 15px; margin-left: 15px; height: 32px; line-height: 32px; border: solid 1px #dedede; float: left;} .navseach_btn{ width: 75px; height: 32px; line-height: 32px; float: left; margin-left: 8px; background: #D80100; color: #fff; border-radius: 15px; } #mheader.down{ position: fixed; top: 0px; padding: 10px 0px; background: rgba(0,0,0,0.8); } .m_nav { position: fixed; top: 0; left: 0; z-index: 98; overflow: hidden; transform: translateY(-100%); width: 100%; height: 100vh; transition: all 800ms cubic-bezier(.8, 0, .33, 1); border-radius: 0 0 50% 50%; } nav.m_nav.nav-open { transform: translateY(0); border-radius: 0% 0% 0% 0%; } .menu-btn { position: fixed; top:60px; right: 10px; padding: 5px; cursor: pointer; z-index: 99; color: #000; } .menu-btn .line { padding: 0; width: 30px; background: #000; height: 2px; margin: 5px 0; transition: all 700ms cubic-bezier(.9, 0, .33, 1); } .menu-btn .line.line--1 { width: 30px; transform: rotate(0) translateY(0); } .menu-btn .line.line--1.line-cross { width: 30px; transform: rotate(45deg) translateX(5px) translateY(5px); background: rgba(0, 0, 0, 1); } .menu-btn .line.line--2 { width: 28px; transform: translateX(0); } .menu-btn .line.line--2.line-fade-out { width: 28px; transform: translate(30px); opacity: 0; } .menu-btn .line.line--3 { width: 20px; transform: rotate(0) translateY(0); } .menu-btn .line.line--3.line-cross { width: 30px; transform: rotate(-45deg) translateX(5px) translateY(-5px); background: rgba(0, 0, 0, 1); } nav.m_nav .nav-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(0); opacity: 0; transition: all 900ms cubic-bezier(.9, 0, .33, 1); } nav.m_nav .nav-links ul { width: 100%; } nav.m_nav .nav-links.fade-in { opacity: 1; transform: translateY(0); } nav.m_nav .nav-links .link { border-bottom: 1px solid rgba(255, 255, 255, 0.3); width: 96%; max-width: 400px; margin: 0 auto; display: block; padding: 10px 0; color: #fff; font-weight: bold; font-size: 16px; transition: all 300ms cubic-bezier(.9, 0, .33, 1); } .m_nav_tel { width: 100%; } .m_nav_tel, .m_nav_tel a { font-size:16px; color: #fff; } nav.m_nav .nav-links .link:hover,nav.m_nav .nav-links .link.active { background: rgba(0, 0, 0, 0.5); } .grad { background-image: linear-gradient(to bottom right, #28af4b, #0f9362); } /*公司简介模块*/ /*新闻列表模块*/ .ImgScale img{ transition: all 0.5s; } .ImgScale:hover img, .ImgScale:hover i { transform: scale(1.05); } .news_li_title{ font-size: 18px;color:#333 } @media(max-width: 768px){ .news_li_title{ font-size: 14px;color:#333; overflow: hidden; } } .news_message{ font-size:14px; color:#999; height: 85px; } .news_more{ border-top: 1px solid #e5e5e5; line-height: 45px; height: 45px; transition: all 0.5s} .news_more span:nth-of-type(1){ font-size: 14px; font-family: arial; text-align: left;display: inline-block; float: left; transition: all 0.5s} .news_more span:nth-of-type(2){ background: #333; text-align: right; color: #666; display: inline-block; float: right; transition: all 0.5s;width: 30px; height: 30px; border-radius: 10px; margin-top: 10px; line-height:25px; background: #fff; transition: all 0.5s; } .time_news2{ font-size:14px; padding:10px 0;transition: all 0.5s; } .btn2{ float: right; background: #d20005; color: #fff; font-size: 14px; } .news-all-li li{ margin-bottom: 30px ; } .news-all-li a:hover .news_more span{ color: #333; } .news-all-li a:hover .news_more span:nth-of-type(2){ color: #fff; border-radius: 100%; animation:mymove 1s infinite;width: 30px; height: 30px; }@keyframes mymove { 0% {background-color:#333; opacity: 0; transform: translate(-30%,0); } 100% {background-color:#333;opacity: 1;transform: translate(5%,0); } } .contact_left h4{ font-size: 26px; color:#e80113; font-weight: bold; text-transform: uppercase;} .contact_lg_fb{ font-size: 16px; } .contact_left>p:nth-of-type(1){ font-size: 16px; font-weight: bold; } .contact_left>p:nth-of-type(2){ font-size: 16px; font-weight: bold; } .contact_left .contact_li{ font-size: 16px; } .link_box a{ display: inline-block; height: 50px; width: 50px;border:1px solid #999; border-radius: 50%; text-align: center; margin-right: 20px;box-sizing: border-box; background: #fff; position: relative; transition: all 0.5s; } .link_box a:before{ position: absolute; content: ""; width: 10px; height: 10px;left: 0;right: 0;top: 0;bottom: 0; margin: auto; transition: all 0.5s; border-radius: 100% } .link_box a:hover:before{ animation: sbig 1s ease infinite; transition: all 0.5s; } @keyframes sbig { 0% { width: 0;height: 0; background: #1c1c1c; transition: all 0.5s; opacity: 0 } 100% {width: 100%;height: 100%; transition: all 0.5s;opacity: 1 } } .link_box a i{ display:block; font-size: 25px; margin-top: 5px;} .link_box a:hover{ border:1px solid #333; background: #333 } .link_box a:hover i{ color: #fff } .red_bg{ background: #e80113; } .ssh_bg{ background: #333 } .red_bg{ background: #e80113; } .contact_box{ color: #fff } .contact_right p.contact_r_name:nth-of-type(1){font-size: 24px;line-height: 36px; position: relative; color: #fff } .contact_right p.contact_r_name:nth-of-type(1):after{ position: absolute; content: ""; height: 3px; width: 6%; background: #fff;left: 0; bottom: 0; } .contact_right .contact_box{ justify-content: space-between; display: flex; width: 100%; text-align: center;} .contact_right .con_slide{flex: 1; position: relative;} .contact_right .con_slide:after{position: absolute; content: ""; width: 1px; height: 50%;right: 0;top: 0; bottom: 0;margin: auto; background: rgba(255,255,255,0.1); } .contact_right .con_slide:nth-last-of-type(1):after{ width: 0 } .contact_right p span.font{ font-size: 14px; font-weight: bold; color: rgba(255,255,255,0.7); } .cn-tt{ font-weight: bold; font-size: 15px; color:rgba(255,255,255,0.8); } .num{ color: #fff; font-size: 50px; font-family: impact; font-weight: 100} .en-tt{ font-size: 14px; color:rgba(255,255,255,0.8); font-family: arial; text-transform:capitalize; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; } .p14-info-2 { background: #fff; } .p14-info-2-tit { height: 80px; font-size: 24px; line-height: 80px; background: #b60c3c; color: #fff; text-align: center; } .p14-info-2-list dl { padding: 26px 10px 20px 7px; border-bottom: 1px dashed rgba(153, 153, 153, 0.3); font-size: 12px; line-height: 18px; overflow: hidden; } .p14-info-2-list dt { margin-right: 6px; } .p14-info-2-list dt img { display: block; width: 100%; margin: 0 auto; } .p14-info-2-list dd h3 { height: 22px; font-size: 14px; font-weight: normal; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; } .p14-info-2-list-desc { height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p14-info-2-list dl:nth-last-child(1) { border-bottom: 0; padding:0; } .contact-z1 { height: 140px; background: url("../img/contact-z1.jpg") no-repeat; background-size: cover; color: #333; margin-bottom: 30px; } .contact-z1 p { font-size: 20px; height: 30px; line-height: 30px; padding: 37px 0 0 95px; background: url(../img/contact-z1_tel.png) no-repeat 74px 44px; } .contact-z1 span { display: block; height: 30px; font-weight: bold; font-size: 18px; line-height: 30px; padding-left: 73px; } .rcread h4 { font-size: 20px; color: #333; font-weight: normal; margin-bottom: 5px; } .rcread li { height: 40px; line-height: 40px; font-size: 14px; border-bottom: 1px dotted #cbcbcb; overflow: hidden; padding-left: 28px; background: url(../img/ic1.png) no-repeat 0 center; vertical-align: top; } .rcread li em { float: left; width: 640px; overflow: hidden; font-style: inherit; font-weight: inherit; } .rcread li em a { color: #686868; font-style: inherit; font-weight: inherit; } .rcread li em a:hover { color: #991313; font-style: inherit; font-weight: inherit; } .rcread li span { float: right; color: #999; } /*产品模块*/ .sub-pro-list a{ display:inline-block; padding: 10px; border: 1px #e5e5e5 solid; color: #666666; font-size: 16px; border-radius: 3px; margin:0 10px 0 0; width: 25%; text-align: center; transition: 0.5s all } .sub-pro-list a:hover,.sub-pro-list a.active{ background: #e80113; color: #fff } @media(max-width: 768px){ .sub-pro-list a{ display:inline-block; width: 50%} } .border-fk{ border: 1px solid #efefef} .box-all{border:1px #e5e5e5 solid; box-sizing:border-box;} .onlink-click{ background:#1ab27a; border:1px #1ab27a solid; color:#fff; font-size:14px; border-radius:3px; } .pro-more{border:1px #e5e5e5 solid; color:#fff; color:#666666;font-size:14px; border-radius:3px; } .onlink-click:hover,.pro-more:hover{ background:#1ab27a; color:#fff;border:1px #1ab27a solid; } .pro-nav{ margin:0 auto; overflow: hidden; } .onlink-click{ background:#1ab27a; border:1px #1ab27a solid; color:#fff; font-size:14px; border-radius:3px; } .pro-more{border:1px #e5e5e5 solid; color:#fff; color:#666666;font-size:14px; border-radius:3px; } .onlink-click:hover,.pro-more:hover{ background:#e80113; color:#fff;border:1px #1ab27a solid; } .pro-sub-nav{ display: flex; justify-content:space-between; } .pro-sub-nav li{ flex: 1; border-bottom: 1px solid #e8e9eb; transition: all 0.5s; display:block; float:left; position:relative; text-align: center; font-size: 16px; } .pro-sub-nav li:after{ position:absolute; content:""; width:0%; height:2px;left: 0; bottom:0px; right:0; background:#d50000; transition: all 0.5s; margin: auto;} .pro-sub-nav li:hover:after,.pro-sub-nav li.current:after{ width: 60%;} .pro-sub-nav li.current a:before{ width:100%;left:0;} .pro-sub-nav li.current a{ color: #35363b} .pro-sub-nav li a:hover{ color:#35363b} .fix li a:hover{ color:#35363b} .fix { transition:all 0.5s; background:#fff; position: fixed; left: 0; top: 0px; z-index: 999; box-shadow: 10px 10px 20px #C7C7C7; width: 100%} .fix li a{ color:#333} .pro-nav.fix .pro-sub-nav{ width: 50%; margin: 0 auto} @media(max-width: 768px){ .pro-nav.fix .pro-sub-nav{ width: 100%; margin: 0 auto} .pro-sub-nav li{ transition: all 0.5s; width: 25%; display:block; float:left;flex:1;position:relative; } .pro-sub-nav li a{ display:block; padding:0; font-size:14px; text-align:center; color:#333333; transition:all 0.5s; position:relative; } .pro-sub-nav li a:after{ position:absolute; content:""; bottom:0px; width:0; height:100%; background:#e80113; left:0%; transition:all 0.5s} } @media(max-width: 768px){ .pro-sub-nav li{ transition: all 0.5s; width: 25%; display:block; float:left;flex:1;position:relative; } .pro-sub-nav li a{ display:block; font-size: 16px; padding:0; font-size:18px; text-align:center; color:#333333; transition:all 0.5s; position:relative; } .pro-sub-nav li a:after{ position:absolute; content:""; bottom:1px; width:0; height:2px; background:#00468c; left:45%; transition:all 0.5s} .pro-sub-nav li{ flex: 1; border-bottom: 1px solid #e8e9eb; transition: all 0.5s; display:block; float:left; position:relative; text-align: center; font-size: 14px; } } .pro-news-all-four{ background:#fff; } .pro-news-all-four p:nth-child(1) { margin-bottom: 40px; font-size: 26px; color: #00468c; } @media(max-width:768px){.pro-news-all-four{ margin:10px 0;background:#fff; padding:20px 10px;} .pro-news-all-four p:nth-child(1) { margin-bottom: 40px; font-size: 26px; color: #00468c; }} .right_box{ border: 1px solid #e8e8e8; height:100%; width: 100%} .nr_datil_box{ font-size: 16px; color: #666666; line-height: 36px; width: 95%; margin: 0 auto} .pro-order{ background:#fff;} .pro-order p{ font-size:36px; color:#333; text-align:center} .page-up-next { padding:20px 0} .page-up-next div{ font-size:14px; height:30px; line-height:30px;} .proname-item2{ background: #f9f9f9; font-size: 16px; position: relative} .proname-item2 p:nth-of-type(1){ font-size: 16px; color: #666; margin: 0; line-height: 50px; height: 50px; text-align: center} .proname-item2:after{ position: absolute; content: ""; width: 100%;height: 4px; background: #e80113; left: 0; bottom: 0px; transition: all 0.5s; right: 0; transition: transform 0.5s; margin: auto; transform-origin: right center; transform: scaleX(0)} .proname-item2:hover:after{ transform-origin: left center; transform: scaleX(1);} .youshi_all{ font-size: 16px; color: #fff;} .youshi_all .list_item{ height: 36px; line-height: 36px; width: 90px; text-align: center; border-radius: 5px; } .youshi_all .list_item:nth-of-type(1){ background:#a599d0 } .youshi_all .list_item:nth-of-type(2){ background:#e77745 } .youshi_all .list_item:nth-of-type(3){ background:#3bb3c3 } .youshi_all .list_item:nth-of-type(4){ background:#89c997 } .pro-desc{ font-size: 16px; color: #666; line-height: 30px;} .pro_left_tel{ background: url("../img/pro_tel.png") no-repeat left center; padding-left:10%; height:46px; } .pro_left_tel p:nth-of-type(1){ font-size: 14px; color: #999999; margin-bottom: 0; line-height: 20px;} .pro_left_tel p:nth-of-type(2){ font-size: 30px; color:#80c26a; font-family: 'Bahnschrift';line-height: 35px; } @media(max-width: 991px){ .pro_left_tel{ background: url("../img/pro_tel.png") no-repeat left center; padding-left:15%; height:46px; } } .pro-data { padding-bottom:30px; margin-bottom:30px;} .pro-data td { padding:0px 0; height:30px; line-height:30px;color:#999} .pro-data tr td:nth-of-type(1){ width:20%; font-size:14px; } .pro-data tr td:nth-of-type(2) a{ width:80%; font-size:14px; color:#999} .pro-data tr:nth-last-of-type(1) td:nth-of-type(1){ vertical-align:top} .pro-color li{ display: block; float:left; width:18%; font-size:16px; color:#a6a6a6} .pro-color li i{ width:24px; height:24px; border-radius:100%;} .pro-color li:nth-of-type(1) i{ background:#e30000} .pro-color li:nth-of-type(2) i{ background:#0043ca} .pro-color li:nth-of-type(3) i{ background:#0cc3e3} .pro-color li:nth-of-type(4) i{ background:#ff9900} .pro-color li:nth-of-type(5) i{ background:#e5007c} .pro-lists-all li{ display: block; width: 30%; float: left; margin-right: 3%; margin-bottom: 3%; background: #fff; padding-bottom: 3%; transition: all 0.5s;} .pro-lists-all li span{display: block; height: 260px; overflow: hidden; position: relative; text-align: center; transition: all 0.5s;} .pro-lists-all li:hover { transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); -webkit-box-shadow: 0px 5px 15px #828282; -moz-box-shadow: 0px 5px 15px #828282; box-shadow: 0px 5px 15px #828282; } .pro-lists-all a span{ display:block; position:relative;} .pro-lists-all a span:after{ position:absolute; content:""; left:0%; width:100$; height:0; bottom:-260px; background:rgba(0,0,0,0.3); transition:all 0.4s; } .pro-lists-all a:hover span:after{ height:260px; width:100%;left:0; bottom: } .pro-lists-all a:hover p:nth-of-type(2){ color:#FFF; border:1px #e30000 solid; background:#e30000} .pro-lists-all p:nth-of-type(1){ font-size:16px; color:#666; text-align:center; height:30px; line-height:30px; margin-bottom:20px;} .pro-lists-all p:nth-of-type(2){ width:155px; height:30px; line-height:30px; text-align:center; font-family:SimSun; font-size:19px; border:1px #ddd solid; border-radius:20px; margin:0 auto; transition:all 0.5s} .pro-lists-all img { width:100%; display: block; margin:0 auto; transition:all 0.4s } .pro-lists-all a:hover img{ transform:scale(1.1)} .pro-pinpai{ background:#fff; height:auto; overflow:hidden;} .pro-pinpai>p:nth-of-type(1){margin-bottom:40px; font-size:26px; color:#00468c; } .pro-pinpai ul li{ text-align:center; font-size:16px; text-align:center; width:230px; height:180px; padding:45px 25px ; border:#eeeeee 2px solid; color:#666666; display:block; float:left; margin-right:20px; transition:all 0.5s} .pro-pinpai ul li p:nth-of-type(1){color:#333; font-size:18px;text-align:center; margin:15px 0 30px; transition:all 0.5s} .pro-pinpai ul li:nth-last-of-type(1){ margin:0;} .pro-pinpai ul li:hover{ background:#be000e; color:#fff; border:#be000e 2px solid;} .pro-pinpai ul li:hover p:nth-of-type(1){ color:#FFF; font-size:24px;} .pro-pinpai ul li:nth-child(1) i{ background:url(../img/pro-a.png) no-repeat -75px top; width:58px; height:62px; transition:all 0.5s; display:block; margin:0 auto} .pro-pinpai ul li:nth-child(1):hover i{ background:url(../img/pro-a.png) no-repeat 0px top;} .pro-pinpai ul li:nth-child(2) i{ background:url(../img/pro-b.png) no-repeat 0px top; width:60px; height:70px; transition:all 0.5s; display:block; margin:0 auto} .pro-pinpai ul li:nth-child(2):hover i{ background:url(../img/pro-b.png) no-repeat -66px top;} .pro-pinpai ul li:nth-child(3) i{ background:url(../img/pro-b.png) no-repeat 0px top; width:60px; height:70px; transition:all 0.5s; display:block; margin:0 auto} .pro-pinpai ul li:nth-child(3):hover i{ background:url(../img/pro-b.png) no-repeat -66px top;} .pro-pinpai ul li:nth-child(4) i{ background:url(../img/pro-b.png) no-repeat 0px top; width:60px; height:70px; transition:all 0.5s; display:block; margin:0 auto} .pro-pinpai ul li:nth-child(4):hover i{ background:url(../img/pro-b.png) no-repeat -66px top;} /*相关产品*/ .pro-message-all{ font-size:16px; line-height:30px; background:#fff; width:100%} .pro-all-links { width: 100%; margin: 0 auto; box-sizing:border-box } .pro-all-links .hd { overflow: hidden; margin: 0 auto; width: 285px; } .pro-all-links .hd .prev, .pro-all-links .hd .next, .pro-all-links .hd .morexxx { display: block; width: 40px; height: 40px; border-radius:100%; float: right; margin: 0 2px; margin-top:10px; color: #FFF; font-size: 24px; overflow: hidden; cursor: pointer; transition: 0.3s all 0s linear; background: #f0f0f0; text-align: center; line-height: 40px; font-family: SimSun; } .pro-all-links .hd .prev:hover, .pro-all-links .hd .next:hover, .pro-all-links .hd .morexxx:hover { background: #bb0327; } .pro-all-links .hd .prev, .pro-all-links .hd .morexxx { float: left; } .pro-all-links .index-pro-all-xx{ height:auto; overflow:hidden; margin-bottom: 30px; } .pro-all-links .index-pro-all-xx li { margin-right:20px; width:285px; display:block; height:285px; float:left; } .pro-all-links .index-pro-all-xx li a{width:285px; overflow:hidden; position:relative;display:block; transition:all 0.5s } .pro-all-links .index-pro-all-xx li a span{width:285px; height:214px; display:block; overflow:hidden; margin-bottom:20px;} .pro-all-links .index-pro-all-xx li a:hover img{ transform:scale(1.1)} .pro-all-links .index-pro-all-xx li a img{ width:100%; transition:all 0.5s; margin:0 auto;} .pro-all-links .index-pro-all-xx p{ color:#666; font-size:18px; font-weight:bold; transition:all 0.5s} .pro-all-links .index-pro-all-xx p:nth-of-type(2){ font-size:14px; color:#999;font-weight:bold;transition:all 0.5s} .pro-all-links .index-pro-all-xx li a:hover{transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); -webkit-box-shadow: 0px 2px 15px #828282; -moz-box-shadow: 0px 2px 15px #828282; box-shadow: 0px 2px 15px #828282;} .pro-all-links .index-pro-all-xx li a:hover p{ padding-left:10px;} .order-btn{ box-sizing: border-box; } .order-btn .submit { background: #c8000b; color: #fff; font-size: 14px; border-radius:5px; box-sizing: border-box; text-align: center; } .order-btn .submit:hover { background: #0058b1; } .order-btn .submit i{ display: inline-block;; background:url(../img/chat.png) no-repeat left top; width:16px; height:16px; margin:4px 5px 0 0;} .order-btn .click-chat { box-sizing: border-box; background: #00468c; color: #fff; font-size: 14px; border-radius:5px; text-align: center; } .order-btn .click-chat i{display: inline-block;; background:url(../img/order.png) no-repeat left top;width:16px; height:16px; margin:3px 5px 0 0px;} .order-btn .click-chat:hover { background: #0058b1; } .pro-mobile i{ width:31px; height:31px; float:left; display:block;} .pro-mobile span{ color:#c8000b; font-family:'impact'} .pro-content{ height:auto; overflow:hidden; background:#fff} .pro-content p:nth-child(1){margin-bottom: 40px; font-size: 26px; color: #00468c; } @media(max-width:768px){ .pro-content{ padding:10px 0px; height:auto; overflow:hidden; background:#fff; box-sizing:border-box} .pro-content p:nth-child(1){margin-bottom: 40px; font-size: 26px; color: #00468c; padding-left:20px; } } .inner-pro-message{ height:auto; overflow:hidden; padding:50px 0;} .inner-pro-message li{ display:block; float:left; width:285px; height:320px; border:1px #f5f5f3 solid; margin:10px 10px 0 0;} .inner-pro-message li .img{ width:285px; height:200px; overflow:hidden; display:block;} .inner-pro-message li .img img{ transition:all 0.5s; width:285px;} .inner-pro-message li:hover .img img{ transform:scale(1.1,1.1)} .inner-pro-message li .title{ text-align:left; padding:10px 25px;} .inner-pro-message li .title h3{ font-size:14px;} .inner-pro-message li .title em{ height:30px; line-height:30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;} .inner-pro-message li .title span{ display:block; width:40%; height:30px; line-height:30px; color:#FFF; border-radius:5px; text-align:center} .inner-pro-message li .title span a{ color:#FFF} .inner-pro-message li .title span:nth-child(1){ float:left; background:#222;} .inner-pro-message li .title span:nth-child(2){ float:right; background:#e6000f;} .pro-sider-ul li{ height:50px; line-height:50px; background:#fff; margin-bottom:1px;} .pro-sider-ul li a{ display:block; width:90%; padding-left:10%; font-size:15px; transition:all 0.4s} .pro-sider-ul li a:hover{ color:#e60012; padding-left:20%;width:80%} .pro-all-message .bx-wrapper { position: relative; margin: 60px auto ; padding: 0; *zoom:1 } .pro-all-message b a{ font-size:24px; display:block; color:#666; font-weight:500; height:47px; line-height:55px; transition:all 0.5s;} .pro-all-message .slide > a:hover{ transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); -webkit-box-shadow: 0px 5px 15px #828282; -moz-box-shadow: 0px 5px 15px #828282; box-shadow: 0px 5px 15px #828282; } .pro-all-message b a i{ display:block; width:47px; height:47px; background:url(../img/pro-dot.png) no-repeat left center; margin-right:12px; float:left;} .pro-all-message .slide > a{ display: block;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:#FFF; padding:20px; transition:all 0.5s;} .pro-all-message .bx-wrapper span { display:block; height:260px; overflow:hidden; position:relative; text-align:center; background:#fff!important; transition:al 0.5s} .pro-all-message a span{ display:block; position:relative;} .pro-all-message a span:after{ position:absolute; content:""; left:0%; width:100$; height:0; bottom:-260px; background:rgba(0,0,0,0.3); transition:all 0.4s; } .pro-all-message a:hover span:after{ height:260px; width:100%;left:0; bottom: } .pro-all-message a:hover p:nth-of-type(2){ color:#FFF; border:1px #e30000 solid; background:#e30000} .pro-all-message .slide p:nth-of-type(1){ font-size:16px; color:#666; text-align:center; height:30px; line-height:30px; margin-bottom:20px;} .pro-all-message .slide p:nth-of-type(2){ width:155px; height:30px; line-height:30px; text-align:center; font-family:SimSun; font-size:19px; border:1px #ddd solid; border-radius:20px; margin:0 auto; transition:all 0.5s} .pro-all-message .bx-wrapper img { height: 260px; display: block; margin:0 auto; transition:all 0.4s } .pro-all-message .bx-wrapper a:hover img{ transform:scale(1.1)} .pro-all-message .bx-wrapper .bx-viewport { -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0) } .pro-all-message .bx-wrapper .bx-pager, .pro-all-message .bx-wrapper .bx-controls-auto { position: absolute; bottom: -60px; width: 100% } .pro-all-message .bx-wrapper .bx-loading { min-height: 50px; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000 } .pro-all-message .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: 700; color: #666; padding-top: 20px } .pro-all-message .bx-wrapper .bx-pager .bx-pager-item, .pro-all-message .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom:1; *display:inline } .pro-all-message .bx-wrapper .bx-pager.bx-default-pager a { background: #d3d3d3; text-indent: -9999px; display: block; width: 20px; height: 20px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 100% } .pro-all-message .bx-wrapper .bx-pager.bx-default-pager a:hover, .pro-all-message .bx-wrapper .bx-pager.bx-default-pager a.active { background: #f91627 } .pro-all-message .bx-wrapper .bx-prev { left:-80px; background: url(../img/picScroll-left.png) no-repeat #dddddd; transition:all 0.5s } .pro-all-message .bx-wrapper .bx-next { right:-80px; background: url(../img/picScroll-right.png) no-repeat -45px 0 #dddddd; transition:all 0.5s } .pro-all-message .bx-wrapper .bx-prev:hover { background: url(../img/picScroll-left.png) no-repeat -45px 0 #e30000 } .pro-all-message .bx-wrapper .bx-next:hover { background: url(../img/picScroll-right.png) no-repeat 0px 0 #e30000 } .pro-all-message .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; outline: 0; height:45px; width:45px; text-indent: -9999px; z-index: 9999 } .pro-all-message .bx-wrapper .bx-controls-direction a.disabled { display: none } .pro-all-message .bx-wrapper .bx-controls-auto { text-align: center } .pro-all-message .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(http://www.jq22.com/demo/slider-141113224352/images/controls.png) -86px -11px no-repeat; margin: 0 3px } .pro-all-message .bx-wrapper .bx-controls-auto .bx-start:hover, .pro-all-message .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0 } .pro-all-message .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(http://www.jq22.com/demo/slider-141113224352/images/controls.png) -86px -44px no-repeat; margin: 0 3px } .pro-all-message .bx-wrapper .bx-controls-auto .bx-stop:hover, .pro-all-message .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px } .pro-all-message .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80% } .pro-all-message .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px } .pro-all-message .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80,80,80,.75); width: 100% } .pro-all-message .slide2{ background:#CCC; text-align:center;} .about-honor .pro-all-message .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px } .slider1 p { width: 100%; height: 46px; font-size: 20px; color: #333; font-size:14px; line-height: 46px; text-align: center; } .slider1 .slide{ background:#CCC} .pro-deail{ box-sizing:border-box} .pro-deail>p:nth-of-type(1){margin-bottom: 40px; font-size: 26px; color: #e80113; text-align: left; position: relative; } .pro-deail>p:nth-of-type(1):after{ position: absolute; content: "";background: #e80113; width: 5%; height: 2px;bottom: -20px;left: 0 } .message-title{ font-size: 14px; } #formData .write { background: #fff; padding-right: 30px !important; border:1px #eee solid; font-size: 16px; } .code{ font-size: 14px; } /*新闻*/ .news_box_left{ margin: 20px; padding: 10px; border-bottom: 1px solid #e7e7e7; position: relative; } .news_box_left:after{ position: absolute;content: ""; background : #e80113; height: 2px; width:100%; left: 0;bottom: -1px; transition: all 0.5s; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; } .news_box_left:hover:after{-webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);} .news_img{ background: #000000 } .new_datil > p:nth-of-type(1){ color: #333; font-size: 18px; } .new_datil .new_nr{ font-size: 12px; color: #666; line-height: 25px; overflow: hidden; padding-bottom: 15px;} .new_three_more{ height: 25px; line-height: 25px; } .new_three_more span{ padding: 0 10px 0 0; display: inline-block; font-size: 12px; color: #b0b0b0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .new_three_more span:not(:nth-last-of-type(1)) i{ padding: 0 10px 0 0; } .new_three_more span:nth-last-of-type(1){ float: right; width: 90px; border: 1px solid #dcdcdc; text-align:center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;} .new_three_more span .icon-fangxiang{display:inline-block; -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); } .news_box_left:hover .icon-fangxiang{transform: rotate(180deg);} .news_box_left:hover span:nth-last-of-type(1){ border: 1px #e80113 solid; background: #e80113; color: #fff } .news_box_left:hover span a{ color: #fff } .news_right > p:nth-of-type(1){ padding-left: 5%; font-size: 16px; color: #000; border-bottom: #ededed 1px solid; line-height: 70px; position: relative;} .news_right > p:nth-of-type(1):after{ position: absolute; content: ""; background : #e80113; width: 4px; height: 30%; left: 0; top: 0; bottom: 0; margin: auto; } .hot_news{ width: 90%; margin: 0 auto; padding: 5% 0; border-bottom: 1px solid #ededed} .hot_news a{ color: #333; font-size: 14px; line-height: 25px;-webkit-transition: color .3s;-moz-transition: color .3s;-ms-transition: color .3s;-o-transition: color .3s;transition: color .3s; } .hot_news a:hover{color: var(--theme-blue);} /*分页*/ .w-page { margin-bottom: 20px; } .w-page li.active span { z-index: 3; color: #fff; background-color: #e80113; } .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; font-size: .875rem; 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: #c40e25; color: #fff; } .shs_bg{ background:#e7ebec; } .contact_big_bj{ background:url(../img/contact_bj.png) no-repeat center 35% #f4f4f4; } .contact_left h4,.contact_right h4{ font-size: 26px; color:#e80113; font-weight: bold; text-transform: uppercase;} .contact_lg_fb{ font-size: 16px; } .contact_left>p:nth-of-type(1){ font-size: 16px; font-weight: bold; } .contact_left>p:nth-of-type(2){ font-size: 16px; font-weight: bold; } .contact_left .contact_li{ font-size: 16px; } .btn-suss{ background: #cc0000; color: #fff; font-size: 14px; text-align: center; position: relative; border-radius: 0.25rem; } .btn-suss:hover{ color: #fff;background: #none;} .btn-suss:before{ position: absolute;content: "";left: 0; top:0; background:#c40000;transform-origin: right center; width: 100%; height:100%; transform:scaleX(0); margin: auto; z-index:0; border-radius: 0.2rem;transition:transform 0.5s; } .btn-suss:hover:before{ transform-origin: left center; transform: scaleX(1); } .btn-suss span{ position: relative} .liuyan_box input{ font-size: 14px; padding-left: 50px; height: 55px; border:1px #FFF solid; } .liuyan_box .form-tr:nth-of-type(1) input{ background: url("../img/form1.png") no-repeat 10px center #fff;} .liuyan_box .form-tr:nth-of-type(2) input{ background: url("../img/form2.png") no-repeat 10px center #fff;} .liuyan_box .form-tr:nth-of-type(3) input{ background: url("../img/form3.png") no-repeat 10px center #fff;} .online-btn{ background: #e80113; font-size: 14px;width: 150px; height:40px; line-height: 40px; position: relative; transition: all 0.5s; transform-origin: left center;} .online-btn a i{ display: inline-block; background: url("../img/jt.png") no-repeat center center; width: 35px; height:7px; transition: all 0.5s;} .online-btn:before{ position: absolute;content: "";left: 0; top:0; background: #657ab9;transform-origin: right center; width: 100%; height:100%; transform:scaleX(0); margin: auto; transition: transform 0.5s; z-index:0} .online-btn:hover:before{ transform-origin: left center; transform: scaleX(1); } .online-btn:hover{ background: none} .online-btn:hover a{ position: absolute; display: block; width: 100%; color: #f00; z-index: 9; color: #fff;transition: all 0.5s;} .jw-controlbar{ width: 100%; } .contact-item{ width: 100%} .contact-item p:nth-of-type(1) span{ color: #005fad; font-size: 18px;} .contact-item p:nth-of-type(n+2) { font-size: 20px; color: #515151} .contact-title span:nth-of-type(1){ font-size: 36px; color: #333333} .contact-title span:nth-of-type(2){ font-size: 30px; color: #333333} .layui-layer-btn0{ font-size: 14px; color: #fff!important;} @media(min-width: 1200px){ .contact-left{ width: 35%!important;} .contact-right{ width: 65%!important;} } @media(max-width: 1199.98px){ .contact-right{ width: 100%} .contact-left{ width: 100%} .footer_top{ border-bottom: 0px solid #3379ad} } @media( max-width: 575.98px) { .contact-title span:nth-of-type(1){ font-size: 20px; color: #333333} .contact-title span:nth-of-type(2){ font-size: 18px; color: #333333} } @media(max-width: 991.98px){ .footer-contact p:nth-of-type(2){ font-size: 20px; } .footer_top{ border-bottom: 0px solid #3379ad} .contact-item{ width:100%} } @media(max-width: 991.98px){ #pinpai .case-pro-box .case-img:before{ display: none} #pinpai .case-pro-box .case-img>span i{height: 30px; width: 100%; display: none} #pinpai .case-pro-box .case-img>span i svg{ width: 30px; height: 30px;} .case-img .ys-font>p:nth-of-type(1){ font-size: 16px; line-height: 0.8; margin-bottom: 0} .case-img .ys-font>div:nth-of-type(1){ font-size: 14px; line-height: 1.5; padding: 1%} } .dropdown-nav { position: absolute; width: 100%; height:400px; display: none; left: 0; overflow: hidden; z-index: 99999; background-color: #fff; background-size: cover;border-top: 1px solid #e6e6e6!important;} .header.header-min .dropdown-nav { background: #fff} .header.header-min .dropdown-nav .nav-container .child-item .item-info-wrap ul li a{ color: #fff} @media (min-width: 1680px) { .dropdown-nav .container { max-width: 1700px; } } .dropdown-nav .nav-rightbar { flex: 0 0 auto; width: 22%; position: relative; } .dropdown-nav .nav-rightbar::before { content: ''; display: block; position: absolute; width: 200%; height: 100%; top: 0; left: 0; background: #cad5dd; } .dropdown-nav .nav-rightbar .right-wrap { position: relative; z-index: 2; height: 100%; } .dropdown-nav .nav-rightbar .right-wrap .ico { width: 180%; height: 180%; padding: 5%; transform: translateY(-20%); } .dropdown-nav .nav-rightbar .right-wrap .ico img { width: 100%; opacity: .11; } .dropdown-nav .nav-rightbar .right-wrap .txt { font-weight: bold; font-size: 135px; color: rgba(255, 255, 255, 0.5); line-height: 1; position: absolute; bottom: 0; text-align: center; left: 10px; } .dropdown-nav .nav-container { flex: 0 0 auto; width: 100%; } .dropdown-nav .nav-container .child-item { display: none; height: 100%; } .dropdown-nav .nav-container .child-item .item-info-wrap { padding-right: 0%; height: 100%; width: 100% } .dropdown-nav .nav-container .child-item .item-info-wrap h3 { font-weight: bold; color: #333; padding-top: 1rem; } .dropdown-nav .nav-container .child-item .item-info-wrap p.info-desc { font-size: 16px; line-height: 2; color:#999; } .dropdown-nav .nav-container .child-item .item-info-wrap ul { margin-top: 1rem; width: 100% } .dropdown-nav .nav-container .child-item .item-info-wrap ul li{ flex: 1; display: flex; align-items: center} .dropdown-nav .nav-container .child-item .item-info-wrap ul li a{ width:70%; border-radius: 0 2rem; border: 1px solid rgba(255,255,255,0); display: flex; align-items: center; color: #858585; height: 50px; line-height: 50px; text-align: center} .dropdown-nav .nav-container .child-item .item-info-wrap ul li:hover a{ border: 1px solid #0075c4; background: #0075c4; color: #fff; text-align: center} /*.dropdown-nav .nav-container .child-item .item-info-wrap ul li::before { content: ''; display: inline-block; vertical-align: middle; margin-right: 8px; width: 8px; height: 8px; background-color: #0075c4; transition: all .3s; }*/ /*.dropdown-nav .nav-container .child-item .item-info-wrap ul li:hover::before { background: #0075c4 } .dropdown-nav .nav-container .child-item .item-info-wrap ul li:hover a{ color: #fff}*/ .dropdown-nav .nav-container .child-item .item-info-wrap ul li a { padding-left: 1%; display: inline-block; vertical-align: middle; } .dropdown-nav .nav-container .child-item .child-nav .nav-item { padding: 0 1.5%; } .dropdown-nav .nav-container .child-item .child-nav .nav-item .item-img { overflow: hidden; } .dropdown-nav .nav-container .child-item .child-nav .nav-item .item-img .img-wrap img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .dropdown-nav .nav-container .child-item .child-nav .nav-item .item-name { color: #333333; -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 .child-nav .nav-item:hover .item-name { color: #f60; } .dropdown-nav .nav-container .child-item.active { display: block; } .dropdown-nav .nav-container .child-item.item-3 .child-nav .nav-item .item-img { width: 60px; margin: 0 auto; } .dropdown-nav .nav-container .child-item.item-3 .child-nav .nav-item:hover .item-img img { -webkit-animation: swing 1 1s linear; -o-animation: swing 1 1s linear; animation: swing 1 1s linear; } .sub-container .animate-nav{ font-size: 16px; width: 20%; color: #666666 } .mask { top: 100px; display: none; position: fixed; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.4); z-index: 88; } @media(min-width: 1399.98px) { .d-xxl-flex { display: flex !important; } } .d-xxl-flex{display:none; } .parent-name{ font-size: 16px; color:#c3002f; } .pro-name-item2{ width: calc(100% / 3); font-size: 16px; color: #666;} .pro-name-item2 i svg{ width: 20px; height: 20px; fill: #c3002f; transition: all 0.5s;} .sub-nav-left{ display: flex; position: relative; width: 35%; } .sub-nav-left:after { position: absolute; content: ""; right: 0; bottom: 0; background: url(../img/nav_left.png) no-repeat right bottom #fafafa; background-size: cover; height: 100%; width:150%; } .sub-nav-left .pro-item-li{ position:relative; z-index: 99; } .sub-nav-left .pro-item-li a span{ color:#9fafd4; font-size:18px; position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-align: left;} .sub-nav-left .pro-item-li .pro-li-ico{ background: url(../img/xm_dot2.png) no-repeat right top; width: 12px; height: 12px; z-index: 55; } .sub-nav-left .pro-item-li a>i{ transition: all 0.5s; opacity: 0; transform: translateX(100%)} .sub-nav-left .pro-item-li a>i svg{ fill:rgba(255,255,255,0.65);} .sub-nav-left .pro-item-li{ position:relative} .sub-nav-left .pro-item-li:after{ position:absolute; content:'';left:0;bottom:0; height: 1px; width:100%; border-bottom:1px solid rgba(255,255,255,0.25); transform: scaleX(0); transition: all 0.5s } .sub-nav-left .pro-item-li:hover:after{ transform: scaleX(1)} .sub-nav-left .pro-item-li:hover a span{ color:#fff} .sub-nav-left .pro-item-li:hover a>i{ opacity: 1; transform: translateX(0%)} .sub-nav-left p:nth-of-type(1){ font-size: 22px; color: #fff; position: relative;z-index: 99} .sub-nav-left div:nth-of-type(1){ font-size: 18px; color: #666;position: relative;z-index: 99} .sub-nav-left .t-button-ty2{position: relative;z-index: 99; width: 86px; height: 45px;} .sub-nav-left .t-button-ty2 a{position: relative;} .sub-nav-left .t-button-ty2 a:after{position: absolute; content: "";border-bottom: 1px solid rgba(255,255,255,0.5); left:0;bottom:0; width: 100%; height: 1px;} .sub-nav-left .t-button-ty2 a span{ font-size: 14px; color: rgba(255,255,255,0.5); } .sub-nav-left .t-button-ty2 a i svg{ width: 20px; height: 20px; fill: rgba(255,255,255,0.5);transition: all 0.5s} .sub-nav-left .t-button-ty2:hover a i svg{ transform: translateX(-20%)} .sub-nav-right{ width: 65%; padding:2%; background: #fff; position:relative; display: flex;flex-flow: column; justify-content: center} .sub-nav-right .sub-nav-item{ width:calc(100% / 2);position:relative;z-index: 99} .sub-nav-right .sub-nav-item p{ margin-bottom: 0} .sub-nav-right .sub-nav-item p a{ font-size: 16px; color: #cc0000} .sub-nav-right .sub-nav-item>div div{ width:calc(100% / 3);} .sub-nav-right .sub-nav-item>div div a span{ font-size: 16px; color: #666;} .sub-nav-right .sub-nav-item>div div a i{ font-size: 16px; color: #666} .sub-nav-right .sub-nav-item>div div a i svg{width: 20px; height: 20px; fill: #cc0000; transition: all 0.5s} .sub-nav-right .sub-nav-item>div div:hover a i svg{ transform: translateX(-20%)} .sub-nav-right .sub-nav-item>div div:hover a span{ color: #cc0000} .item-info-wrap2{} .item-info-wrap2 p:nth-of-type(1){ font-size: 24px; color:#3466ce;position:relative;z-index: 99} .item-info-wrap2 p:nth-of-type(2){ font-size: 16px; color: #666666;position:relative;z-index: 99} .wrap-pro-title p{ font-size:18px; color:#000;} .pc-sub-tel i svg{ width: 22px; height: 22px; fill: #fff} .pc-sub-tel>div:nth-of-type(1) span{ color: #fff; font-size: 14px} .pc-sub-tel>div:nth-of-type(2) span{ font-size: 24px; color: #fff;} @media(max-width: 1199.98px) { .sub-nav-left{ display: none;} .sub-nav-right{ width: 100%; padding: 3%;} } header.header-min,.header.hover{ position: fixed; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.25); } .header-min .nav_box ul li a,.header.hover .nav_box ul li a{ color: #333} .header-min .hot_tel a,.header.hover .hot_tel a{ color: #333} .header.header-min .hot_tel a,.header.hover .hot_tel a{ color: #999} .header.sub-top{ background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.05)} .header.sub-top .nav a{ color: #000} .header.sub-top .up-tel .tel-text span:nth-of-type(1) { color: rgba(0,0,0,0.5)} .header.sub-top .up-tel .tel-text span:nth-of-type(2) { color: rgba(0,0,0,0.95)} .header.hover #logo_title img.webname,.header.header-min #logo_title img.webname { filter: grayscale(0%) brightness(0)!important; } .header.hover .search-top,.header.header-min .search-top,.header.hover .top-scan,.header.header-min .top-scan{ border-left:1px solid rgba(0,0,0,0.05)} .header.hover .search-top:after,.header.header-min .top-scan:after,.header.header-min .search-top:after,.header.hover .top-scan:after{ background:rgba(0,0,0,0.25);} .search-top i svg{ transition: all 0.5s} .header.hover .top-two i svg,.header.header-min .top-two i svg { fill: #ccc; } .header.hover .top-two .search-top:hover i svg,.header.header-min .top-two .search-top:hover i svg{ fill:#cc0000 } .header.hover .up-tel i svg,.header.header-min .up-tel i svg{ fill: #cc0000} .header.hover .up-tel span,.header.header-min .up-tel span{ color: #cc0000!important;} .product-current{} .product-current .current-all2 i svg { fill: #fff} .product-current .current-all2 span { color:rgba(255,255,255,0.65)} .product-current .current-all2 a { color:rgba(255,255,255,0.65)} .product-current .current-all2 a:hover{ color:#cc0000} .sub-navcontainer{} .sub-navcontainer .sub-nav-prolist{ width: calc(100% / 7);} .sub-nav-prolist p{ font-size: 16px; color: rgba(0,0,0,0.5)} .subimg-top{ transition: all 0.5s} .subimg-top .subimg{ width: 100%; border-radius: 0.25rem;overflow: hidden; transition: all 0.5s} .subimg-top:hover p{ color: #cc0000} .subimg-top{ overflow: hidden;} .sub-navcontainer .sub-nav-prolist:hover .subimg{ transform: translateY(5%)} .case-pro-box{position: relative; width: 100%; height: 100%;} .case-pro-box .case-img222{ position: relative; display: block} .case-pro-box .case-img222:after{ position: absolute; content: ""; background: rgba(10,107,166,0.9); left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: scale(0); transition: transform 0.5s; z-index: 99} .case-pro-box .case-img222 span{position: absolute; display: block; height: 100%; font-family: Arial; font-size: 70px; color: #fff;left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 999; text-align: center; transform: translateY(-10%); transition: all 0.5s; opacity: 0} .case-pro-box .case-img222 span i svg{ width: 50px; height: 50px; fill: #fff} .case-pro-box .case-img222:hover:after{ transform: scale(1)} .case-pro-box .case-img222:hover span{transform: translateY(0%); opacity: 1} .case-pro-box .case-img222 img{ transition: all 0.5s;transform: scale(1.05)} .case-pro-box .case-img222:hover img{ transform: scale(1)} .case-pro-box a>div:nth-last-of-type(1) span{ font-size: 18px; color: #333;} .search-bigbox{ position: fixed; top: 0; transition: transform 0.5s; z-index: 9999; width: 100%; height: 500px; transform-origin: bottom center; transform: translateY(-100%)} .search-bigbox>div:nth-of-type(1){ position: absolute; top: 0; bottom: 0; left: 0;right: 0; margin: auto; width: 1400px;} .search-bigbox.open-ban{ display: flex;transform-origin: top center; align-items: center; transform: translateY(0%)} .search-bigbox .search-bigbox-content{ width: 1400px; margin: 0 auto;left: 5%; right: 5%;} .search-bigbox-content .search-txt{ width: 80%; height: 45px; line-height: 45px;} .search-bigbox-content .sub-btn{ width: 20%;height: 45px; line-height: 45px; background: #0b73c1; color: #fff} .search-bigbox .colse-btn{ position: absolute; top: 5px;right: 10px; font-size: 30px; color: #fff; width: 30px; height: 30px; border-radius: 50%; background: #0b73c1} #search_width{ justify-content: space-between} .search-bigbox .colse-btn { position: absolute; top: 5px; right: 10px; font-size: 30px; color: #fff; width: 30px; height: 30px; border-radius: 50%; background: #0b73c1; } @media(max-width: 1499.98px) { .search-bigbox.open-ban,.search-bigbox{ display: none;} } .subimg-top{ transition: all 0.5s} .subimg-top .subimg{ width: 100%; border-radius: 0.25rem;overflow: hidden; transition: all 0.5s} .subimg-top:hover p{ color: #c51429} .subimg-top{ overflow: hidden;} .sub-navcontainer .sub-nav-prolist:hover .subimg{ transform: translateY(5%)} .sub-nav-prolist p{ font-size: 16px; color:#333333} .subimg-top{ transition: all 0.5s} .subimg-top .subimg{ width: 100%; border-radius: 0.25rem;overflow: hidden; transition: all 0.5s} .subimg-top:hover p{ color: #c51429} .subimg-top{ overflow: hidden;} .sub-navcontainer .sub-nav-prolist:hover .subimg{ transform: translateY(5%)} .sub-nav-right .sub-nav-prolist:hover p i svg { transform: translateX(-20%); } .sub-nav-right .sub-nav-prolist p i svg { width: 20px; height: 20px; fill: #c51429; transition: all 0.5s; } .sub-nav-right .sub-navcontainer .sub-nav-prolist { width: calc(100% /5); } .sub-nav-right .sub-navcontainer .sub-nav-prolist.three { width: calc(100% /3); } .sub-nav-right .sub-nav-prolist:hover p i svg { transform: translateX(-20%); } /*模板新闻横屏*/ .jiejue .news-k{ border-bottom:1px solid #f5f5f5} .jiejue .news-left-item img{ transition: all 0.5s } .jiejue .news-left-item:hover img{ transform: scale(1.05);} .jiejue .news-left-item:hover .news-mask{ transform: translateY(0); opacity: 1;} .jiejue .news-left-item:hover .news-mask-wrap:after{ transform: scaleY(1)} .jiejue .news-left-item:hover .animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .jiejue .news-left-item:hover .news-mask-title{ -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } .jiejue .news-left-item:hover .news-title-desc{ -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } .jiejue .news-left-item:hover .left-more2{ -webkit-animation-delay: .4s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } .jiejue .news-time-title{} .jiejue .news-time-title p:nth-of-type(1){ transition: all 0.5s} .jiejue .news-time-title p:nth-of-type(1) span:nth-of-type(1){ font-size: 24px; color: #282828; } .jiejue .news-time-title p:nth-of-type(1) span:nth-of-type(2){ font-size:14px; color: #666666; } .jiejue .news-time-title div:nth-of-type(1){ font-size: 24px; color: #282828; } .jiejue .news-inco i{ transition: all 0.5s; background: #c7c7c7; color: #fff; width: 25px; height: 25px; border-radius: 50%} .jiejue .news-inco i svg{ height: 15px; width: 15px; fill: #fff;} .jiejue .news-k .newsimg{ transition: all 0.5s; width:30%;} .jiejue .news-right-item:hover{ } .jiejue .news-right-item:hover .news-inco i{ background: #044f9f; transform: translateX(-15%)} .jiejue .news-right-item:hover .news-time-title p:nth-of-type(1){ transform: translateY(5%)} .jiejue .news-right-item:hover .news-time-title div:nth-of-type(1){color: #044f9f; } @media(max-width: 1199.98px){ .jiejue .news-k .news-right-item{ width: 55%;} .jiejue .news-k .newsimg{ transition: all 0.5s; width:40%} } @media(max-width: 991.98px){ .jiejue .news-bigbox-left{ width: 100%} .jiejue .news-right-listall{ width: 100%} .jiejue .two-time{ display: none;} .jiejue .two-left{ width: 100%} .jiejue .news-k .news-right-item{ width: 100%;} .jiejue .news-k .newsimg{ transition: all 0.5s; width:100%} } .jiejue .news-w-box{ border-right:1px solid #f1f1f1} .jiejue .news-w-box .times{} .jiejue .news-w-box .times p:nth-of-type(1){ font-size: 36px; color:#044f9f; margin-bottom: 0} .jiejue .news-w-box .times p:nth-of-type(2){ font-size:16px; color:#044f9f;} .jiejue .news-w-box .news-wrap>p:nth-of-type(1){ font-size: 18px; color: #282828} .jiejue .news-w-box .news-wrap>div:nth-of-type(1){ font-size: 14px; color: #666666; line-height: 2} .jiejue .news-wrap{ border-bottom:1px solid #f1f1f1} .jiejue .news-w-box:hover{} .jiejue .news-w-box .newsimg img{ transition: all 0.5s} .jiejue .news-w-box:hover .newsimg img{ transform: scale(1.05)} .jiejue .news-w-box:hover .ty-more i:nth-of-type(2){ transform: translateX(-20%)} .jiejue .news-w150{ position: absolute; left:0; width: 120%; border-top:1px solid #f1f1f1} .jiejue .news-zb-height{ height: 680px;} .jiejue .news-zb .case-pagscroll{ position: absolute; left: 0; width: 100%; height:1px; background: #eeeeee; bottom: 2px} .jiejue .news-zb .case-pagscroll .swiper-scrollbar-drag{ position: relative; z-index: 2; background: #00438d; height:3px; top: -1px;} .jiejue .newsimg{ width: 30%;padding-right:2% } .jiejue .news-w-box .newsimg{ width: 100%!important;padding-right:2% } .jiejue .news-right-item{ width:70%;border-bottom: 0} .jiejue,.jiejue *{ transition: all 0.5s} .jiejue .news-k .newsimg img{ transform: scale(1.05)} .jiejue .news-k:hover .newsimg img{ transform: scale(1)} @media(max-width: 1199.98px){ .jiejue .newsimg{ width: 100%; } .jiejue .news-right-item{ width:100%;border-bottom: 0} } @media(max-width: 1699.98px){ .jiejue .news-w150{ position: inherit; left:inherit; width: 100%;} .jiejue .news-zb-height{ height: inherit;} } @media(max-width: 991.98px){ .header:not(.sub-top) #logo_title { border-right: 1px solid rgba(255,255,255,0); } }