*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  transition: color 0.5s,
  background-color 0.5s;
  line-height: 1.4;
  font-family: Inter,
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  Oxygen,
  Ubuntu,
  Cantarell,
  'Fira Sans',
  'Droid Sans',
  'Helvetica Neue',
  sans-serif;
  font-size: 14px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

.main {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

header .main {
  display: flex;
  align-items: center;
}

header ul, header li {
  margin: 0;
  padding: 0;
  list-style: none;
}

header ul.menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}

header ul li {
}

header .menu a {
  display: block;
  line-height: 64px;
  padding: 0 20px;
  cursor: pointer;
}

header .menu a:hover {
  color: #fff;
  /*background: darkcyan;*/
  background: #0239A9;
}


/* home page */

.swiper-slide img {
  display: block;
  z-index: 1;
  width: 100%;
}

.swiper-slide .content {
  font-family: 等线;
  position: absolute;
  color: #fff;
  left: 20%;
  top: 20%;
  z-index: 2;
  font-size: 24px;
}

.swiper-slide .content h3 {
  font-weight: normal;
  font-size: 40px;
  margin: 0;
  letter-spacing: 5px;
  text-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}

.swiper-slide .content h4 {
  margin-top: 10px;
}

.swiper-slide .content span {
  margin: 0 20px;
}


.swiper-slide .media {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
}

.swiper-slide .content .media h4 {
  margin: 0;
}

.swiper-slide .media img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.swiper-slide .media p {
  font-size: 16px;
  color: #eee;
  margin: 0;
}

.swiper-slide .content .icon {
  background: url(../images/home/home_banner_icon.png) no-repeat left center;
  background-size: 36px;
  padding-left: 48px;
  display: inline-block;
  height: 48px;
  line-height: 48px;
  padding-right: 40px;
}

.sub-header {
  text-align: center;
  color: #0239A9;
  font-family: '黑体';
  margin: 50px auto;
  font-size: 20px;
  position: relative;
}

.sub-header h2 {
  z-index: 10;
}

.sub-header .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  color: rgb(0 0 0 / 6%);
  font-size: 36px;

  z-index: 1;
}

.sub-header .bg p {
  margin: auto;
  user-select: none;
  transform: scaleY(0.75);
}

.sub-header hr {
  display: block;
  width: 40px;
}


.imgshow {
  width: 100%;
  overflow: hidden;
  display: flex;
}

.imgshow ul, .imgshow li {
  list-style: none;
  margin: 0;
}

.imgshow ul {
  display: flex;
}

.imgshow li {
  margin: 0 15px;
}

.imgshow img {
  display: block;
  height: 300px;
}

.about {
  background: url("../images/home/home_ditu_1.jpg") no-repeat center center;
  background-size: cover;
}

.about .main {
  display: flex;
  align-items: center;;
  justify-content: center;
}

.about .box1 {
  height: 480px;
}

.about .gbox {
  background: #fff;
  height: 180px;
  position: relative;
  top: -50px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.about .gbox .item {
  text-align: center;
  width: 25%;
  border-right: 2px solid #eee;
}

.about .gbox .item:last-child {
  border-right: none;
}

.about .gbox h4 {
  font-size: 32px;
  font-weight: bold;
  color: #666;
  margin: 5px 0;
}

.about .gbox p {
  text-indent: 0;
  color: #888;
  margin: 0;
}

.about h3 {
  font-size: 24px;
  color: #222;
  margin: 0 0 15px 0;
}

.about .sub {
  color: #888;
  margin: 15px 0;
  font-size: 18px;
}

.about p {
  color: #666;
  font-size: 16px;
}

.about img {
  height: 300px;
  margin-left: 40px;
}

.case {
  background: #eee;
  padding: 20px 0;
}

.case .cards {
  display: flex;
  justify-content: space-between;
}

.case .card {
  display: block;
  width: 32%;
  background: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.case .card .t {
  position: relative;
  cursor: pointer;
  overflow: hidden;;
}

.case .card .t img {
  transition: all 0.3s ease-in-out;
}

.case .card .t:hover img {
  transform: scale(1.1);
}

.case .card .b {
  padding: 15px;
  font-size: 16px;
  color: #888;
}

.case .icon {
  width: 48px;
  height: 48px;
  margin-right: 20px;
}

.case .hdr {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 15px;
}

.case .hdr h3 {
  font-size: 18px;
  margin: 0;
  margin-bottom: 8px;
}

.case .card .img {
  width: 100%;
}


.prod {
  background: #fafafa;
  padding: 20px 0;
}

.prod .cont {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.prod .item {
  width: 30%;
  text-align: center;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}

.prod .item img {
  width: 75%;
  transition: all 0.3s ease-in-out;
}

.prod .item:hover img {
  /*transform: scale(1.5);
  cursor: pointer;*/
}


.apply .cards {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.apply .item {
  width: 30%;
  position: relative;
  margin-bottom: 20px;
}

.apply .item img {
  width: 100%;
}

.apply .item h5 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  letter-spacing: 2px;
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.apply .item small {
  letter-spacing: 1px;
}

.svc {
  padding: 10px 0;
  background: url(../images/home/home_png_11.png) no-repeat bottom center;
  background-size: contain;
  padding-bottom: 160px;
}

.svc .icons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

}

.svc .item {
  width: 18%;
  text-align: center;
  background-position: top center;
  background-size: 50%;
  background-repeat: no-repeat;
  padding-top: 120px;
  color: #666;
  font-size: 16px;
}

.svc .icon1 {
  background-image: url(../images/home/home_icon_4.png);
}

.svc .icon2 {
  background-image: url(../images/home/home_icon_5.png);
}

.svc .icon3 {
  background-image: url(../images/home/home_icon_6.png);
}

.svc .icon4 {
  background-image: url(../images/home/home_icon_7.png);
}

.svc .icon5 {
  background-image: url(../images/home/home_icon_8.png);
}

.svc .main p {
  color: #666;
  margin: 25px 0;
}


.contact {
  position: relative;

  background: #0239A9;
}

.contact .main {
  display: flex;
  height: 100%;
}

.contact .main p {
  color: #fff;
}

.contact .inner {
  margin: auto;
  text-align: center;
}

.contact .l {
  background: #fff;
  padding: 0 100px;
  display: flex;
}

.contact .l h3 {
  font-size: 18px;
  margin: 10px 0;
}

.contact .l p {
  color: #666;
}

.contact .r {
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
}

.contact .r strong {
  font-weight: bold;
  font-size: 18px;
  margin-right: 5px;
}

.contact .r .p1, .contact .r .p2 {
  background: url(../images/home/home_icon_9.png) no-repeat left center;
  padding-left: 40px;
  margin: 10px 0;
  line-height: 40px;
}

.contact .r .p2 {
  background-image: url(../images/home/home_icon_10.png);
}

.cus {
  background-color: #eee;
  padding: 20px 0;
}

.flinks {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flinks a {
  width: 18%;
  background: #fff;
  margin-bottom: 20px;
}

.flinks img {
  width: 100%;
}


/* --- footer --- */

footer {
  background: url(../images/home/home_png_12.png) no-repeat top center;
  background-size: 100%;
  background-color: rgba(0, 0, 0, 0.70);
}

footer .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
  color: #ccc;
}

footer .logo-big {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

footer .logo-big img {
  filter: brightness(200) grayscale(1);
}

footer .addr {
  margin-left: 25px;
}

footer .media {
  display: flex;
  align-items: center;
  padding: 10px 50px;
}

footer .media .hdr {
  padding-left: 40px;
  background: url(../images/home/home_icon_11.png) no-repeat left center;
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid #fff;
}

footer .media p {
  margin: 0;
  padding: 0.2em 0;
}

.foot2 {
  background: #2C2C2C;
  padding: 15px 0;
  text-align: center;
  color: #ccc;
}

.foot2 a {
  color: #eee;
  margin-left: 15px;
}

.foot2 p {
  margin: 0;
}


/* ------------  oils  ----------------- */

.sub-banner {
  height: 400px;
  background: url(../images/oils/youye_banner_1.jpg) no-repeat center center;
  display: flex;
  color: #fff;
  text-align: center;
  font-size: 16px;
}

.sub-banner p {
  color: #eee;
}

.lube .sub-banner {
  background-image: url(../images/lube/banner_lube.jpg);
}

.iron .sub-banner {
  background-image: url(../images/iron/tiepu_banner_1.jpg);
}

.sub-banner .inner {
  margin: auto;
}

.sub-banner .title {
  font-size: 40px;
  letter-spacing: 5px;
}

.solu-nav, .solu-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.solu-nav {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  top: -50px;
  display: flex;
  justify-content: space-between;
}

.solu-nav li {
  color: #fff;
  height: 90px;
  font-size: 18px;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  width: 32%;
}

.solu-nav li i {
  text-align: center;
  height: 40px;
  background: url(../images/oils/youye_icon_1.png) no-repeat center center;
  display: none;
}

.solu-nav li.active {
  background: #0239A9;
}

.solu-nav li:hover {
  background: darkcyan;
}

.solu-nav li:hover i, .solu-nav li.active i {
  display: block;
}

.solu-nav li a {
  display: block;
}

.oils-info {
  font-size: 16px;
  color: #444;
  background: url(../images/oils/youye_ditu_1.jpg) no-repeat center center;
  padding-bottom: 20px;
}

.oils-info .banner1 {
  height: 487px;
  background: url(../images/oils/banner3.png) no-repeat center center;
  background-size: 100%;
  opacity: 0.8;
  margin: 50px 0;
}

.oils-info .p2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
  overflow: hidden;
}

.oils-info .p2 .item {
  background: #fff;
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  font-size: 16px;
  position: relative;
}

.oils-info .p2 .item:after {
  display: inline-block;
  content: "→";
  position: absolute;
  font-size: 24px;
  top: 50%;
  right: -70px;
  line-height: 40px;
  margin-top: -20px;
}

.oils-info .p2 i {
  display: inline-block;
  background: url(../images/oils/youye_png_1.png) no-repeat center center;
  width: 150px;
  height: 150px;
  margin: 10px 0;
  vertical-align: middle;
}

.oils-info .p2 .item2 i {
  margin: 0;
  width: 36px;
  height: 36px;
}

.oils-info .p2 i.icon-dev {
  background-image: url(../images/oils/youye_icon_2.png);
  height: 50px;
}

.oils-info .p2 i.icon1 {
  background-image: url(../images/oils/youye_icon_3.png);
}

.oils-info .p2 i.icon2 {
  background-image: url(../images/oils/youye_icon_4.png);
}

.oils-info .p2 i.icon3 {
  background-image: url(../images/oils/youye_icon_5.png);
}

.oils-info .p2 i.icon4 {
  background-size: 100%;
}

.oils-info .p2 i.icon5 {
  background-image: url(../images/oils/youye_png_2.png);
  background-size: 100%;
}

.oils-info .p2 p {
  line-height: 40px;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.oils-info .p2 .inner {
  margin: auto;
  text-align: center;
}

.oils-info .p5 {
  background: url(../images/oils/hh.png) no-repeat center center;
  background-size: 100%;
  height: 110px;
  text-align: center;
  display: flex;
  align-items: center;
  margin: -5px 0;
}

.oils-h3 {
  font-size: 20px;
  border-left: 4px solid #0239A9;
  margin: 20px 0;
  padding-left: 10px;
  font-weight: bold;
}

.oils-h4 {
  font-size: 16px;
  margin: 15px 0;
}

.oils-sys p {
  font-size: 16px;
  color: #444;
  font-family: '等线';
  line-height: 1.6;
  margin: 0;
}

.oils-h4::before {
  display: inline-block;
  content: "⚫";
  /*content: "●";*/
  margin-right: 2px;
  transform: scale(0.7);
  margin-right: 5px;
}


.oils-info .p3 {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.oils-info .p3 .item {
  background: #fff;
  border: 1px solid #ddd;
  width: 180px;
  text-align: center;
  line-height: 50px;
}

.oils-sys {
  padding: 20px 0;
}

.oils-sys h2 {
  text-align: center;
  font-weight: bold;
  margin: 50px 0;
}

.oils-sys .p1 {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.oils-sys .p1 img {
  height: 176px;
}

.oils-sys .img1 {
  height: 180px;
}

.oils-sys .p2 p {
  padding-left: 1.5em;
  margin: 8px 0;
}

.oils-sys .p2 .r p {
  margin: 0 0 25px 0;
}

.oils-sys .p6 p {
  padding-left: 1.5em;
  margin: 8px 0;
}

.oils-sys p b {
  font-weight: bold;
  margin-right: 2px;
}

.oils-sys table {
  width: 100%;
}

.tb1 th, .tb1 td {
  text-align: left;
  font-size: 16px;
}

.tb1 th {
  background: #93A1A8;
  color: #fff;
  padding: 1em 0.5em;
}

.tb1 td {
  padding: 0.5em;
  padding-right: 2em;
  text-wrap: nowrap;
}

.tb1 tbody tr {
  background-color: #eee;
}

.tb1 tbody tr:nth-child(even) {
  background: #D4D9DB;
}

.oils-sys .p3 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.oils-sys .p3 .item {
  width: 45%;
}

.oils-sys .p3 .item img {
  width: 100%;
}

.oils-sys li p {
  margin: 20px 0;
}

.oils-sys h5 {
  color: #666;
  font-size: 16px;
  margin: 0;
  text-align: center;
  line-height: 40px;
}

.oils-sys h5 i {
  background: url(../images/oils/youye_icon_7.png) no-repeat center 8px;
  /*padding-left: 30px;*/
  display: inline-block;
  width: 30px;
  height: 36px;
  vertical-align: middle;
}


/*--------- lube ----------*/

.lube h2 {
  text-align: center;
  margin-bottom: 40px;
}

.lube .p1 {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.lube .p1 .item {
  height: 180px;
  width: 45%;
  padding: 10px;
  padding-left: 200px;
  margin-bottom: 30px;
  background: url(../images/lube/runhua_chanpin_1.png) no-repeat 15px center;
  background-size: 150px;
  background-color: #fff;
}

.lube .p1 .item h3 {
  font-weight: bold;
}

.lube .p1 .item p {
  color: #666;
  line-height: 1.5;
  letter-spacing: 1px;
}

.lube .p1 .icon1 {
  background-image: url(../images/lube/runhua_chanpin_1.png);
}

.lube .p1 .icon2 {
  background-image: url(../images/lube/runhua_chanpin_2.png);
}

.lube .p1 .icon3 {
  background-image: url(../images/lube/runhua_chanpin_3.png);
}

.lube .p1 .icon4 {
  background-image: url(../images/lube/runhua_chanpin_4.png);
}

.lube .p1 .icon5 {
  background-image: url(../images/lube/runhua_chanpin_5.png);
}

.lube .p1 .icon6 {
  background-image: url(../images/lube/runhua_chanpin_6.png);
}

.lube .p2 {
  display: flex;
  padding: 20px 0;
  align-items: center;
}

.lube .img2 {
  border: 1px solid #eee;
}

.lube .img2 img {
  width: 90%;
  margin: 0 auto;
  display: block;
}

.lube .p2 .img1, .lube .p2 .img2 {
  display: flex;
  border: 1px solid #ddd;
  margin-right: 100px;
  flex: 0 0 auto;
  box-shadow: 0 0 10px 5px rgb(0 0 0 / 16%);
}

.lube .p2 .img1 {
  width: 300px;
  margin-right: 100px;
}

.lube .p2 .img2 {
  width: 700px;
  margin-left: 100px;
}

.lube .p2 img {
  display: block;
  width: 90%;
  margin: auto;
}

.lube .p2 p {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 20px;
}

.lube .icons {
  display: flex;
  justify-content: space-between;
}

.lube .icons i {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url(../images/lube/runhua_icon_1.png) no-repeat center center;
  background-size: 100%;
}

.lube i.icon-fd {
  background-image: url(../images/lube/runhua_icon_2.png);
}

.lube i.icon-yj {
  background-image: url(../images/lube/runhua_icon_3.png);
}

.lube i.icon-jx {
  background-image: url(../images/lube/runhua_icon_4.png);
}

.lube i.icon-sb {
  background-image: url(../images/lube/runhua_icon_5.png);
}

.lube i.icon-syc {
  background-image: url(../images/lube/runhua_icon_6.png);
}

.lube .p3 {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.lube .p3 img {
  width: 30%;
  margin-bottom: 30px;
}

.iron .dot:before {
  display: inline-block;
  content: "⚫";
  margin-right: 2px;
  transform: scale(0.7);
  margin-right: 5px;
}

.iron h3 {
  margin-top: 30px;
}

.iron .p1 {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.iron .p1 img {
  display: block;
  width: 16%;
}

.iron .p2 {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.iron .p2 i {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url(../images/iron/tiepu_icon_1.png) no-repeat center center;
  background-size: 100%;
}

.iron i.i1 {
  background-image: url(../images/iron/tiepu_icon_1.png);
}

.iron i.i2 {
  background-image: url(../images/iron/tiepu_icon_2.png);
}

.iron i.i3 {
  background-image: url(../images/iron/tiepu_icon_3.png);
}

.iron i.i4 {
  background-image: url(../images/iron/tiepu_icon_4.png);
}

.iron i.i5 {
  background-image: url(../images/iron/tiepu_icon_5.png);
}

.iron i.i6 {
  background-image: url(../images/iron/tiepu_icon_6.png);
}

.iron i.i7 {
  background-image: url(../images/iron/tiepu_icon_7.png);
}

.iron h2 {
  text-align: center;
  margin: 40px 0;
}

.iron .p3 {
  background: #fff;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 0 10px 5px rgb(0 0 0 / 16%);
  color: #666;
  line-height: 2;
}

.iron .p3 ul, .iron .p3 li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.iron .p3 li:before {
  display: inline-block;
  content: "⚫";
  margin-right: 2px;
  transform: scale(0.7);
  margin-right: 5px;
}

.iron .p4 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.iron .p4 img {
  height: 160px;
}

.iron .p5 {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.iron .p5 .img {
  box-shadow: 0 0 10px 5px rgb(0 0 0 / 16%);
  display: flex;
  flex: 0 0 auto;
}

.iron .p5 .img1 {
  margin-right: 100px;
}

.iron .p5 .img2 {
  margin-left: 100px;
}

.iron .p5 .img img {
  width: 95%;
  margin: auto;
}

.iron .p5 .info p {
  font-size: 16px;
  color: #666;
  line-height: 2;
  letter-spacing: 1px;
}

.iron .p6 {
  display: flex;
}

.iron .p6 h4 {
  font-size: 16px;
  margin: 10px 0;
}

.iron .p6 p {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 0;
  letter-spacing: 1px;
  padding-left: 25px;
}

.iron .p7 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.iron .p7 a {
  font-size: 16px;
  display: block;
  padding: 1.5em 3em;
  margin-bottom: 20px;
  box-shadow: 0 0 10px 5px rgb(0 0 0 / 16%);
}