.contents {

  width: 1280px;

  margin: 0 auto;

}

.fl {

  float: left;

}

.fr {

  float: right;

}

.clearfix:after {

  content: "";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

  font-size: 0;

}

.yc {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.tsy {

  transform: perspective(1px) translateZ(0);

  transition-duration: 0.3s ease-out;

}

.tsy:hover {

  -webkit-transform: translateY(-4px);

  transform: translateY(-4px);

}

.gd {

  transition: 0.5s linear;

}

.gm {

  transition: 0.2s ease-out;

}

.img100 {

  transform: scale(1);

  transition: 0.5s linear;

}

.img100:hover {

  transform: scale(1.1);

}

.w100 {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.wo {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.flex {

  display: flex;

  justify-content: space-between;

}

.sjctop,

.sjcbottom,

.sjcleft,

.sjcright {

  -webkit-transition: all 0.9s ease-out;

  transition: all 0.9s ease-out;

}

.pro {

  margin: 75px 0 0;

  overflow: hidden;

}

.pro .box {

  display: flex;

  justify-content: space-between;

}

.pro .box .top .tu img {

  display: block;

}

.pro .box .top h3 {

  height: 30px;

  margin: 10px 0 0;

}

.pro .box .top h3 a {

  display: flex;

}

.pro .box .top h3 a i {

  font-size: 30px;

  color: #333;

  line-height: 30px;

}

.pro .box .top h3 a span {

  display: block;

  font-size: 16px;

  color: #666;

  line-height: 35px;

  margin: 0 0 0 15px;

}

.pro .box .more {

  display: block;

  width: 182px;

  height: 60px;

  background: #f6f6f6;

  border-radius: 29px;

  font-size: 16px;

  text-align: center;

  line-height: 60px;

  margin: 38px 0 0;

  transition: 0.2s ease-out;

}

.pro .box .more:hover {

  transform: translateY(-5px);

}

.pro .proslide {

  height: 694px;

  margin: 44px 0 0;

  display: flex;

  justify-content: space-between;

}

.pro .proslide .hd {

  width: 335px;

  border: solid 1px #ebebeb;

  box-sizing: border-box;

}

.pro .proslide .hd li {

  height: 70px;

  border-bottom: 1px solid #ebebeb;

  box-sizing: border-box;

  position: relative;

  transition: 0.5s linear;

}



.pro .proslide .hd li::after{

  content: "";

  display: block;

  width: 100%;

  height: 0;

  position: absolute;

  top: 0;

  left: 0;

  transition: .5s linear;

  background: #164373;

  z-index: -1;

}





.pro .proslide .hd li::before {

  content: "";

  display: block;

  width: 29px;

  height: 29px;

  position: absolute;

  background: #fff url(../images/more1.png) no-repeat center;

  top: 24px;

  left: 49px;

  pointer-events: none;

  border-radius: 50%;

  transition: 0.5s linear;

}

.pro .proslide .hd li a {

  display: block;

  padding: 0 0 0 111px;

  box-sizing: border-box;

  font-size: 16px;

  color: #333;

  line-height: 70px;

  transition: 0.5s linear;

}

.pro .proslide .hd .on {

  /* background: #164373; */

}

.pro .proslide .hd .on:after {

  height: 70px;

}

.pro .proslide .hd .on::before {

  background: #fff url(../images/more2.png) no-repeat center;

}

.pro .proslide .hd .on a {

  color: #fff;

}

.pro .proslide .hd li:last-child {

  border-bottom: none;

}

.pro .proslide .bd {

  width: 900px;

}

.pro .proslide .bd li {

  width: 900px;

}

.pro .proslide .bd li .aside {

  display: flex;

  justify-content: space-between;

}

.pro .proslide .bd li .aside .tu {

  width: 390px;

  height: 280px;

  border: 1px solid #e7e7e7;

  box-sizing: border-box;

  padding: 15px;

}

.pro .proslide .bd li .aside .tu .img {

  display: block;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

.pro .proslide .bd li .aside .tu .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition: 0.5s linear;

}

.pro .proslide .bd li .aside .tu .img img:hover {

  transform: scale(1.1);

}

.pro .proslide .bd li .aside .text {

  width: 455px;

  margin: 5px 0 0;

}

.pro .proslide .bd li .aside .text .cond {

  display: block;

  font-size: 24px;

  color: #333;

  line-height: 35px;

  font-weight: bold;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: 0.5s linear;

}

.pro .proslide .bd li .aside .text p {

  font-size: 15px;

  color: #666;

  line-height: 32px;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

  height: 96px;

  margin: 20px 0 0;

}

.pro .proslide .bd li .aside .text .more {

  display: block;

  width: 470px;

  height: 67px;

  background: #f4f4f4;

  font-family: Arial;

  font-size: 18px;

  color: #333;

  line-height: 67px;

  padding: 0 0 0 35px;

  box-sizing: border-box;

  margin: 55px 0 0;

  position: relative;

}

.pro .proslide .bd li .aside .text .more::before {

  content: "";

  display: block;

  width: 67px;

  height: 67px;

  position: absolute;

  background: #164373 url(../images/more3.png) no-repeat center;

  top: 0;

  right: 0;

}

.pro .proslide .bd li .aside:hover .text .cond {

  color: #164373;

  letter-spacing: 1px;

}

.pro .proslide .bd li .art {

  display: flex;

  justify-content: space-between;

  margin: 37px 0 0;

  padding: 0 79px 0 0;

  box-sizing: border-box;

  background: url(../images//Ruyitransformer.png) no-repeat top right;

}

.pro .proslide .bd li .art .list {

  width: 390px;

  height: 375px;

  border: 1px solid #e5e5e5;

  box-sizing: border-box;

  padding: 15px 15px 0;

}

.pro .proslide .bd li .art .list .img {

  display: block;

  width: 100%;

  height: 260px;

  overflow: hidden;

}

.pro .proslide .bd li .art .list .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition: 0.5s linear;

}

.pro .proslide .bd li .art .list .img img:hover {

  transform: scale(1.1);

}

.pro .proslide .bd li .art .list .text {

  padding: 0 55px 0 0;

  box-sizing: border-box;

  position: relative;

  margin: 10px 0 0;

}

.pro .proslide .bd li .art .list .text .cond {

  display: block;

  font-size: 16px;

  color: #333;

  line-height: 35px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: 0.5s linear;

}

.pro .proslide .bd li .art .list .text .more {

  display: block;

  width: 83px;

  height: 26px;

  background: #ececec;

  border-radius: 13px;

  font-size: 14px;

  text-align: center;

  line-height: 26px;

  margin: 5px 0 0;

  transition: 0.5s linear;

}

.pro .proslide .bd li .art .list .text p {

  font-family: SimSun;

  font-size: 14px;

  writing-mode: tb-rl;

  line-height: 25px;

  position: absolute;

  top: 9px;

  right: 0;

}

.pro .proslide .bd li .art .list:hover .text .cond {

  letter-spacing: 1px;

}

.pro .proslide .bd li .art .list:hover .text .more {

  background: #164373;

  color: #fff;

}

.case {

  margin: 93px 0 0;

}

.case .box {

  display: flex;

  justify-content: space-between;

}

.case .box .top h3 {

  height: 35px;

  display: flex;

}

.case .box .top h3 i {

  font-size: 36px;

  color: #333;

  line-height: 35px;

  font-weight: bold;

}

.case .box .top h3 span {

  display: block;

  font-family: Arial;

  font-size: 24px;

  color: #666;

  line-height: 50px;

  margin: 0 0 0 10px;

}

.case .box .top p {

  font-size: 16px;

  color: #666;

  line-height: 16px;

  margin: 24px 0 0;

  letter-spacing: 10px;

}

.case .box .more {

  display: block;

  width: 182px;

  height: 60px;

  background: #f6f6f6;

  border-radius: 29px;

  font-size: 16px;

  text-align: center;

  line-height: 60px;

  transition: 0.2s ease-out;

}

.case .box .more:hover {

  transform: translateY(-5px);

}

.case ul {

  display: flex;

  justify-content: space-between;

  margin: 37px 0 0;

}

.case ul li {

  width: 610px;

}

.case ul li .img {

  display: block;

  width: 100%;

  height: 390px;

  overflow: hidden;

}

.case ul li .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition: 0.5s linear;

}

.case ul li .img img:hover {

  transform: scale(1.1);

}

.case ul li .text {

  width: 100%;

  padding: 0 80px 0 38px;

  box-sizing: border-box;

  position: relative;

  background: #f6f6f6;

  border: solid 1px #ebebeb;

  z-index: 50;

}



.case ul li .text::before{

  content: "";

  width: 0;

  height: 80px;

  background: #164373;

  position: absolute;

  top: 0;

  left: auto;

  right: 0;

  transition: .5s linear;

  z-index: -1;

}



.case ul li:hover .text::before{

  width: 100%;

  left: 0;

  right: auto;

}



.case ul li .text .cond {

  display: block;

  font-size: 18px;

  color: #333;

  line-height: 80px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: 0.5s linear;

}

.case ul li .text .more {

  display: block;

  width: 38px;

  height: 80px;

  background: url(../images/more4.png) no-repeat center;

  position: absolute;

  top: 0;

  right: 27px;

}

.case ul li:hover .text {

  /* background: #164373; */

}

.case ul li:hover .text .cond {

  letter-spacing: 1px;

  color: #fff;

}

.abo {

  margin: 90px 0 0;

}

.abo .warp {

  display: flex;

  justify-content: space-between;

  position: relative;

}

.abo .warp .erm{

  width: 100px;

  position: absolute;

  top: 0;

  left: 400px;

  display: none;

}

.abo .warp .erm img{

  display: block;

  width: 100px;

  height: 100px;

  object-fit: contain;

  border-radius: 4px;

  padding: 5px;

  background: #fff;

  box-sizing: border-box;

  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);

}

.abo .warp .erm i{

  font-size: 16px;

  text-align: center;

  line-height: 40px;

  display: block;

}

.abo .warp .top h3 {

  font-size: 40px;

  color: #333;

  line-height: 60px;

  margin: 5px 0 0;

}

.abo .warp .about {

  width: 48%;

  height: 527px;

  overflow: hidden;

}

.abo .warp .about img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition: 0.5s linear;

}

.abo .warp .about img:hover {

  transform: scale(1.1);

}

.abo .warp .text {

  width: 48%;

  height: 310px;

  background: #fff;

  position: absolute;

  bottom: 0;

  left: 0;

  padding: 60px 0 0;

  box-sizing: border-box;

}

.abo .warp .text p {

  width: 100%;

  font-size: 15px;

  color: #666;

  line-height: 36px;

}

.abo .warp .text .more {

  display: block;

  width: 177px;

  height: 49px;

  background: #164373;

  font-size: 16px;

  color: #fff;

  line-height: 49px;

  text-align: center;

  margin: 40px 0 0;

}

.abo .list {

  display: flex;

  justify-content: space-between;

  margin: 68px 0 0;

}

.abo .list li {

  height: 54px;

  display: flex;

  transition: 0.2s ease-out;

}

.abo .list li em {

  display: block;

}

.abo .list li em img {

  display: block;

}

.abo .list li .art {

  margin: 0 0 0 14px;

}

.abo .list li .art i {

  display: block;

  font-size: 18px;

  color: #333;

  line-height: 10px;

}

.abo .list li .art span {

  display: block;

  font-size: 18px;

  color: #333;

  line-height: 18px;

  margin: 15px 0 0;

}

.capital {

  height: 825px;

  background: url(../images/cap.jpg) no-repeat center top;

  margin: 105px 0 0;

  padding: 73px 0 0;

  box-sizing: border-box;

}

.capital .top h3 {

  height: 35px;

}

.capital .top h3 a {

  display: flex;

}

.capital .top h3 a i {

  font-size: 36px;

  color: #333;

  line-height: 35px;

  font-weight: bold;

}

.capital .top h3 a span {

  display: block;

  font-family: Arial;

  font-size: 24px;

  color: #666;

  line-height: 50px;

  margin: 0 0 0 10px;

}

.capital .top p {

  font-size: 16px;

  color: #666;

  line-height: 16px;

  margin: 24px 0 0;

  letter-spacing: 10px;

}

.capital .capitalslide {

  margin: 40px 0 0;

  position: relative;

}

.capital .capitalslide .bd li {

  display: flex;

}

.capital .capitalslide .bd li .list {

  width: 433px;

  position: relative;

}

.capital .capitalslide .bd li .list .text {

  padding: 60px 45px 0 58px;

  height: 263px;

  box-sizing: border-box;

  background: #fff;

  border: solid 1px #e9e9e9;

  border-right: none;

  transition: 0.5s linear;

  position: relative;

  z-index: 50;

}



.capital .capitalslide .bd li .list .text::before{

  content: "";

  width: 0;

  height: 263px;

  background: #164373;

  position: absolute;

  top: 0;

  left: auto;

  right: 0;

  transition: .5s linear;

  z-index: -1;

}



.capital .capitalslide .bd li .list:hover .text::before{

  width: 100%;

  left: 0;

  right: auto;

}



.capital .capitalslide .bd li .list .text .cond {

  display: block;

  font-size: 18px;

  color: #333;

  line-height: 30px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: 0.5s linear;

}

.capital .capitalslide .bd li .list .text i {

  display: block;

  font-family: Arial;

  font-size: 14px;

  color: #999;

  line-height: 10px;

  margin: 10px 0 0;

  transition: 0.5s linear;

}

.capital .capitalslide .bd li .list .text p {

  font-size: 15px;

  color: #666;

  line-height: 36px;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  height: 72px;

  margin: 20px 0 0;

  transition: 0.5s linear;

}

.capital .capitalslide .bd li .list .img {

  display: block;

  width: 433px;

  height: 262px;

  overflow: hidden;

}

.capital .capitalslide .bd li .list .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition: 0.5s linear;

}

.capital .capitalslide .bd li .list .img img:hover {

  transform: scale(1.1);

}

.capital .capitalslide .bd li .list .data {

  width: 70px;

  height: 70px;

  background: #393846;

  padding: 15px 0 0;

  box-sizing: border-box;

  position: absolute;

  top: 263px;

  left: 0;

}

.capital .capitalslide .bd li .list .data i {

  display: block;

  font-size: 18px;

  color: #fff;

  line-height: 20px;

  text-align: center;

}

.capital .capitalslide .bd li .list .data span {

  display: block;

  font-family: Arial;

  font-size: 12px;

  color: #fff;

  line-height: 20px;

  text-align: center;

  margin: 5px 0 0;

}

.capital .capitalslide .bd li .list:hover .text {

  background: #164373;

}

.capital .capitalslide .bd li .list:hover .text .cond {

  color: #fff;

}

.capital .capitalslide .bd li .list:hover .text i {

  color: #fff;

}

.capital .capitalslide .bd li .list:hover .text p {

  color: #fff;

}

.capital .capitalslide .hd {

  width: 470px;

  position: absolute;

  top: -110px;

  right: 0;

  z-index: 100;

  display: flex;

  justify-content: space-between;

}

.capital .capitalslide .hd li {

  width: 163px;

  height: 60px;

  transition: 0.5s linear;

}

.capital .capitalslide .hd li a {

  display: block;

  font-size: 18px;

  color: #333;

  line-height: 60px;

  text-align: center;

}

.capital .capitalslide .hd .on {

  background: #ffffff;

  border-radius: 30px;

  border: solid 1px #ececec;

}

.mess {

  margin: 45px 0 20px;

}

.mess .top h3 {

  height: 35px;

  display: flex;

}

.mess .top h3 i {

  font-size: 36px;

  color: #333;

  line-height: 35px;

  font-weight: bold;

}

.mess .top h3 span {

  display: block;

  font-family: Arial;

  font-size: 24px;

  color: #666;

  line-height: 50px;

  margin: 0 0 0 10px;

}

.mess .top p {

  font-size: 16px;

  color: #666;

  line-height: 16px;

  margin: 24px 0 0;

  letter-spacing: 10px;

}

.mess .warp {

  display: flex;

  justify-content: space-between; position:relative;

}

.mess .warp .FOM {

  width: 700px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  margin: 36px 0 0;

}

.mess .warp .FOM .n {

  height: 50px;

  border-radius: 4px;

  position: relative;

  padding: 0 0 0 39px;

  box-sizing: border-box;

  margin-bottom: 17px;

  border: solid 1px #dedede;

}

.mess .warp .FOM .n img {

  width: 90px;

  height: 36px;

  position: absolute;

  top: 8px;

  right: 8px;

}

.mess .warp .FOM .n input {

  width: 100%;

  height: 100%;

  line-height: 50px;

  font-size: 14px;

  background: none;

  color: #999;

}

.mess .warp .FOM .n input::placeholder {

  color: #999;

}

.mess .warp .FOM .n textarea {

  width: 100%;

  height: 100%;

  line-height: 47px;

  font-size: 14px;

  background: none;

  color: #999;

}

.mess .warp .FOM .n textarea::placeholder {

  color: #999;

}

.mess .warp .FOM .n:nth-child(1) {

  background: url(../images/f1.png) no-repeat center left;

  background-position-x: 11px;

  width: 300px;

}

.mess .warp .FOM .n:nth-child(2) {

  background: url(../images/f2.png) no-repeat center left;

  background-position-x: 11px;

  width: 385px;

}

.mess .warp .FOM .n:nth-child(3) {

  background: url(../images/f3.png) no-repeat center left;

  background-position-x: 11px;

  width: 300px;

}

.mess .warp .FOM .n:nth-child(4) {

  width: 244px;

  padding: 0 0 0 19px;

}

.mess .warp .FOM #btn {

  width: 131px;

  height: 50px;

  background: #164373;

  cursor: pointer;

  font-size: 14px;

  color: #fff;

  line-height: 50px;

  text-align: center;

  border-radius: 4px;

}

.mess .warp .erm {

  width: 225px;

  display: flex;

  justify-content: space-between;

}

.mess .warp .erm img {

  display: block;

  width: 155px;

  height: 155px;

  border: 1px solid #e1e1e1;

  box-sizing: border-box;

  padding: 7px;

}

.mess .warp .erm i {

  display: block;

  width: 50px;

  height: 155px;

  background: #efefef;

  box-sizing: border-box;

  font-size: 16px;

  color: #333;

  writing-mode: tb-rl;

  text-align: center;

  line-height: 50px;

  letter-spacing: 5px;

}



.yyzz{ position:absolute; top:0px; left:775px; border:1px solid #eee;}