.er-banner .page-wrap { min-height:4.8rem; } .er-banner .page-text h3 { line-height: 1.4; } .er-banner .page-text h3 span { color: #c02d28; } .er-banner .page-text h5 { line-height: 1.2; } .er-banner .page-text h5 span { color: #c02d28; } .er-banner .page-text h4 { margin-top:0.18rem; } .er-banner .page-btn { padding-top:0.44rem; } .er-banner .page-btn a img { position: relative; top:-1px; } .er-banner .page-btn a.first01 { min-width: 1.6rem; } @media only screen and (max-width:750px) { .er-banner .page-text { width:100%; } .er-banner .bg_container { background-position:left center; } } /* 行业背景 */ .page-industrial-sec01 { padding-top:1.09rem; } .page-industrial-sec01 .page-title span { color:#c02d28; } .page-industrial-sec01 .page-sec01 .page-img { width: 44.2857%; margin: 0px -9px; padding-top: 0.04rem; } .page-industrial-sec01 .page-content { padding: 0.45rem 0px; } .page-industrial-sec01 .page-sec01 .page-img img { max-width: 100%; } .page-industrial-sec01 .page-sec01 .page-text { width: 52.5714%; line-height: 1.875; } .page-industrial-sec01 .page-sec02 { padding: 0.64rem 0px 0.5rem; } .page-industrial-sec01 .page-sec02 .page-text { width: 100%; line-height: 1.875; } .page-industrial-sec01 .page-sec02 .page-text b{ color:#c02d28; } .page-industrial-sec01 .page-sec02 .page-list { width: 100%; padding-top: 0.4rem; } .page-industrial-sec01 .page-sec02 .page-list ul { padding-top: 0.12rem; } .page-industrial-sec01 .page-sec02 .page-list ul li { position: relative; width: 32.7%; background-color: #fff; border-radius: 0.1rem; padding-top: 3px; margin-top: 0.12rem; } .page-industrial-sec01 .page-sec02 .page-list ul li::before{ content: ""; position: absolute; left: 0px; top:0px; width: 100%; right: 0px; height: 3px; background: url(../images/page-industrial-sec01-line01.png) no-repeat center center/100% 100%; transition:0.5s all; -webkit-transition:0.5s all; -ms-transition:0.5s all; -o-transition:0.5s all; } .page-industrial-sec01 .page-sec02 .page-list ul li:hover::before{ background: url(../images/page-industrial-sec01-line02.png) no-repeat center center/100% 100%; } .page-industrial-sec01 .page-sec02 .page-list ul li .page-con{ position: relative; z-index: 3; background-color: #fff; height: 100%; border-radius: 0.08rem; padding: 0.12rem 0.3rem 0.08rem 0.3rem; } .page-industrial-sec01 .page-sec02 .page-list ul li .page-ico { padding-right: 0.14rem; } .page-industrial-sec01 .page-sec02 .page-list ul li .page-ico img { width: 0.3rem; } .page-industrial-sec01 .page-sec02 .page-list ul li .page-ico +div{ padding-top: 0.05rem; } @media only screen and (max-width:750px) { .page-industrial-sec01 { padding-top: 0.8rem; } .page-industrial-sec01 .page-sec01 .page-img { width: 100%; margin: 0px; } .page-industrial-sec01 .page-sec01 .page-text { width: 100%; padding-top: 0.5rem; } .page-industrial-sec01 .page-sec02 { padding-top: 0.35rem; } .page-industrial-sec01 .page-sec02 .page-text { width: 100%; } .page-industrial-sec01 .page-sec02 .page-list { width: 100%; padding-top: 0.5rem; } .page-industrial-sec01 .page-sec02 .page-list ul li .page-ico +div { padding-top: 0px; } } .page-industrial-sec02 { padding: 1.08rem 0px 0.9rem; } .page-industrial-sec02 .page-title span{ color:#c02d28; } .page-industrial-sec02 .page-sub { padding-top: 0.32rem; } .page-industrial-sec02 .page-content{ padding: 1.62rem 0px 0px; } .page-industrial-sec02 .page-sec { padding:0px 0.42rem 0.52rem; line-height: 2.1428; box-shadow: 0px 0px 0.2rem rgba(0,0,0,0.1); border-radius: 0.08rem; position: relative; background: url(../images/) repeat-x center top/cover #fff; } .page-industrial-sec02 .page-sec dl { padding-top: 0.25rem; } .page-industrial-sec02 .page-subtit span { display: inline-block; -webkit-background-image: linear-gradient(135deg, #d0121b 60%, #eb6100); background-image: linear-gradient(135deg, #d0121b 60%, #eb6100); color:#fff; min-width: 2.4rem; line-height: 0.7rem; position: relative; top:-0.26rem; border-radius: 0.35rem; border: 1px solid transparent; letter-spacing: 0.03rem; } .page-industrial-sec02 .page-subtit span::before { content: ""; position:absolute; left: 0px; height: 0.03rem; top:0px; right: 0px; background: url(../images/page-industrial-sec02-line01.png) no-repeat center center/100% 100%; opacity: 0; } .page-industrial-sec02 .page-one { width: 28.5714%; } .page-industrial-sec02 .page-three { width: 69.6428%; padding: 0px 0.135rem 0.52rem; } .page-industrial-sec02 .page-three dl{ width: 33.33%; padding: 0.25rem 0.285rem 0px; } .page-industrial-sec02 .page-three .page-subtit span { min-width: 3.2rem; } .page-industrial-sec02 .page-three .page-subtit span:before { background: url(../images/page-industrial-sec02-line02.png) no-repeat center center/100% 100%; } .page-industrial-sec02 .page-sec:hover { /* background-color: #d0121b; -webkit-background-image: linear-gradient(to bottom, #d0121b 60%, #eb6100); background-image: linear-gradient(to bottom, #d0121b 60%, #eb6100); */ background: #d0121b url(../images/page-industrial-sec02-libg01.jpg) repeat-x center top/cover; } .page-industrial-sec02 .page-sec:hover .page-subtit span { border:1px solid #eda69b; -webkit-background-image: linear-gradient(to bottom, #fbf1f1 60%, #fefdfd); background-image: linear-gradient(to bottom, #fbf1f1 60%, #fefdfd); color: #c02d28; box-shadow: 0px 0px 0.2rem rgba(0,0,0,0.1); } .page-industrial-sec02 .page-sec:hover dl { color: #fff; } .page-industrial-sec02 .page-sec:hover .page-subtit span::before{ opacity: 1; } @media only screen and (max-width:750px) { .page-industrial-sec02 { padding: 0.8rem 0px; } .page-industrial-sec02 .page-content { padding-top: 0.8rem; } .page-industrial-sec02 .page-one { width: 100%; } .page-industrial-sec02 .page-three { width: 100%; margin-top: 0.8rem; } .page-industrial-sec02 .page-three dl { width: 100%; } } .page-industrial-sec03 { background-position: center top; background-size:100% auto; } .page-industrial-sec03 .page-title span{ color:#c02d28; } .page-industrial-sec03 .page-circle{ margin-top: 0.33rem; padding: 1.43rem 0px 2.07rem; } .page-industrial-sec03 .page-circle .page-img { width:49.2857%; margin: 0px auto; position: relative; } .page-industrial-sec03 .page-circle .page-img img { width: 100%; } .page-industrial-sec03 .page-circle .page-img .i1 { position: absolute; left: 14.495%; top:23%; width:71.01%; padding-bottom:35.55%; overflow: hidden; } .page-industrial-sec03 .page-circle .page-img .i1:before{ content: ""; position: absolute; left: 0px; top:0px; width: 100%; height: 200%; background: url(../images/page-industrial-sec03-quan01.png) no-repeat center center/100% 100%; animation: cir 12s linear infinite; } .page-industrial-sec03 .page-circle .page-img .i2 { position: absolute; width: 17.68%; top:79.2%; right: 0px; padding-bottom: 8.84%; overflow: hidden; } .page-industrial-sec03 .page-circle .page-img .i2:before{ content: ""; position: absolute; left: 0px; bottom:0px; width: 100%; height: 200%; background: url(../images/page-industrial-sec03-quan02.png) no-repeat center center/100% 100%; animation: cir2 12s linear infinite; animation-delay: 6s; opacity: 0; } .page-industrial-sec03 .page-circle .page-img .i3 { position: absolute; left: 0px; top:0px; right: 0px; padding-bottom: 50%; overflow: hidden; } .page-industrial-sec03 .page-circle .page-img .i3:before{ content: ""; position: absolute; left: 0px; top:0px; width: 100%; height: 200%; background: url(../images/page-industrial-sec03-quan03.png) no-repeat center center/100% 100%; animation: cir3 12s linear infinite; animation-delay: 1s; } @keyframes cir{ 0%{transform:rotate(0deg);} 100%{ transform:rotate(360deg)} } @keyframes cir2{ 0%{ transform:rotate(0deg); display: block; opacity: 1; } 16.667%{ transform:rotate(-360deg); display: none; opacity: 0; } 100%{ transform:rotate(-360deg); display: none; opacity: 0; } } @keyframes cir3{ 0%{transform:rotate(180deg);} 100%{ transform:rotate(-180deg);} } .page-industrial-sec03 .page-circle .page-con { position: relative; } .page-industrial-sec03 .page-circle dl dt { display: none; } .page-industrial-sec03 .page-circle dl dd { position: absolute; } .page-industrial-sec03 .page-circle dl dd a { display: inline-block; color: #fff; background: #577199; line-height: 0.48rem; border-radius: 0.24rem; padding: 0px 0.24rem; } .page-industrial-sec03 .page-circle dl dd a:hover { -webkit-background-image: linear-gradient(135deg, #d0121b 60%, #eb6100); background-image: linear-gradient(135deg, #d0121b 60%, #eb6100); } .page-industrial-sec03 .page-circle dl dd a.noa { cursor: default; } .page-industrial-sec03 .page-circle dl dd a.noa:hover { background: #577199; } .page-industrial-sec03 .page-circle dl dd.dd01 { right:70.5%; top:0.92rem; } .page-industrial-sec03 .page-circle dl dd.dd02 { right: 73.71%; top:1.7rem; } .page-industrial-sec03 .page-circle dl dd.dd03 { right: 75.71%; top:2.48rem } .page-industrial-sec03 .page-circle dl dd.dd04 { left: 0px; right: 0px; text-align: center; top:-0.73rem; } .page-industrial-sec03 .page-circle dl dd.dd05 { left: 67.28%; top:0.22rem; } .page-industrial-sec03 .page-circle dl dd.dd06 { left: 71.85%; top:1rem } .page-industrial-sec03 .page-circle dl dd.dd07 { left: 75.28%; top:2.1rem } .page-industrial-sec03 .page-circle dl dd.dd08 { left: 76.42%; top:2.78rem } .page-industrial-sec03 .page-circle dl dd.dd09 { left: 76.42%; top:3.45rem } .page-industrial-sec03 .page-sec02 { padding: 0.93rem 0px 1.16rem; } .page-industrial-sec03 .page-sec02 .page-sub { padding-top: 0.3rem; } .page-industrial-sec03 .page-sec02 .page-con{ padding-top: 0.66rem; } .page-industrial-sec03 .page-sec02 .page-con img { max-width: 100%; } .page-industrial-sec03 .page-leader { margin: -1.08rem 1.3rem 0px; background: #fff; box-shadow: 0px 0px 0.2rem rgba(0,0,0,0.1); border-radius: 8px; padding: 0px 0px 0.52rem; } .page-industrial-sec03 .page-leader .page-title span{ color: #fff; background: #c00000; display: inline-block; line-height: 0.68rem; padding: 0px 0.64rem; border-radius: 0.32rem; position: relative; top:-0.34rem; } .page-industrial-sec03 .page-leader ul { padding-top: 0.1rem; } .page-industrial-sec03 .page-leader ul li { width: 25%; padding: 0.13rem 0.13rem 0px; border-left: 1px solid #e7e7e7; } .page-industrial-sec03 .page-leader ul li:first-child{ border-left: none; } .page-industrial-sec03 .page-leader ul li .page-ico { margin-right: 0.24rem; } .page-industrial-sec03 .page-leader ul li .page-ico img { max-height: 0.48rem; } .page-industrial-sec03 .page-leader dl dt { color: #c02d28; padding-bottom: 0.07rem; } @media screen and (max-width: 1300px) { .page-industrial-sec03 .page-circle dl dd a { padding: 0px 0.14rem; } } @media screen and (max-width: 1000px) { .page-industrial-sec03 .page-circle dl dd a { padding: 0px 0.1rem; } .page-industrial-sec03 .page-circle dl dd.dd08 { left:74.42%; } } @media screen and (max-width: 900px) { .page-industrial-sec03 .page-circle dl dd a { padding:0.1rem 0.3rem; } .page-industrial-sec03 .page-leader { margin: -1.08rem 0.2rem 0px; } .page-industrial-sec03 .page-leader ul li{ width: 50%; } .page-industrial-sec03 .page-leader ul li:nth-child(3){ border-left: none; } .page-industrial-sec03 .page-circle .page-img { width: 90%; } .page-industrial-sec03 .page-circle dl dd { position: relative; left: auto!important; top:auto!important; right: auto!important; bottom: auto!important; margin-top: 0.2rem; text-align: left!important; } .page-industrial-sec03 .page-circle dl { padding: 0.5rem 10% 0px; } .page-industrial-sec03 .page-circle dl dt { display: block; color: #fff; } .page-industrial-sec03 .page-circle { padding-top: 0.5rem; } } @media screen and (max-width: 767px) { .page-industrial-sec01 .page-sec02 .page-list ul li { width: 48.9%; } }