* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Microsoft YaHei";
  font-size: 12px;
  color: #000000;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: hidden;
}


/* @font-face{
	font-family: "myfont_Magpie";
	src: url('../font/MagpieSign.TTF');
} */


/* 自定义标签样式 */

a {
  text-decoration: none;
  color: #000;
  -webkit-tap-highlight-color: transparent;
  display: block;
  outline: none;
}

label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul li,
ol li {
  list-style: none;
}

input,
img,
textarea,
button {
  outline: none;
  border: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

button {
  background: none;
  outline: none;
}

b {
  font-weight: normal;
}

u {
  text-decoration: none;
}


/* 自定义公共类名样式 */

.fl-lt {
  float: left;
}

.fl-rt {
  float: right;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}



.w1300 {
  width: 13rem;
  margin: 0 auto;
}

.w1200 {
  width: 12rem;
  margin: 0 auto;
}

.head .w1300 {
  width: 14.5rem;
}

.head .inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head .logo {
  width: 4rem;
  flex: 0 0 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.head .logo img {
  width: 2.41rem;
}

.head .logo .txt {
  position: relative;
  padding-left: .15rem;
  font-size: .14rem;
  color: #606060;
}

.head .logo .txt::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 0;
  width: 1px;
  height: 85%;
  background: #606060;

}

.head .right {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.head .right .nav ul {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 1rem;
}

.head .right .nav li {
  position: relative;
  width: 1.35rem;
  flex: 0 0 1.35rem;
  font-size: .2rem;
  text-align: center;
  height: 100%;
  padding-top: 0.1rem;
  box-sizing: border-box;
}

.head .right li>a {
  position: relative;
  padding-bottom: .05rem;
  white-space: nowrap;
  color: #666666;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-weight: lighter;
  border-bottom: .02rem solid transparent;
  z-index: 13;
  width: 100%;
}

.head .right li>a div {
  position: absolute;
  height: 100%;
  top: .3rem;
  transition: all .3s ease-in-out;
}

.head .right li>a .en {
  transform: translateY(-100%);
}

.head .right li:hover>a .en {
  transform: translateY(0);
}

.head .right li:hover>a .cn {
  transform: translateY(-100%);
}

.head .right li>a::after {
  content: "";
  position: absolute;
  top: 65%;
  left: 50%;
  margin-left: -.2rem;
  width: .4rem;
  height: .02rem;
  background: #d0111c;
  display: none;
}

.head .right .nav li .sub-nav {
  padding: 1.1rem .1rem .1rem;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-200%);
  z-index: 14;
  line-height: 2em;
  background: rgba(7, 7, 7, .35);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  transition: all .7s ease-in-out;
}

.head .right .nav li .sub-nav a {

  color: #c1c1c1;
  white-space: nowrap;
}

.head .right .nav li .sub-nav a.now,
.head .right .nav li .sub-nav a:hover {
  color: #fff;
}

.head .right .nav li:hover .sub-nav {
  transform: translateX(-50%) translateY(0);
}

.head .right li:hover>a::after,
.head .right li.active>a::after,
.head .right li:hover>a::before,
.head .right li.active>a::before {
  display: block;
}

.head .right .top-tel {
  padding-left: .4rem;
  margin-left: .2rem;
  display: inline-flex;
  color: #666666;


}

.head .right .top-tel .img-box {
  position: relative;
  width: 0.42rem;
  height: 0.38rem;
  overflow: hidden;
  top: 0.03rem;
}

.head .right .top-tel .img-box img {
  position: absolute;
  top: 0;
  left: 0;
  animation: fade 2s infinite;
  opacity: 1;
}

.head .right .top-tel .img-box img.img1 {

  animation-delay: 1s;
}

.head .right .top-tel .img-box img.img2 {
  animation-delay: 2s;
  opacity: 0;
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  5% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


.head .right .top-tel .big {
  display: flex;
  align-items: flex-start;
  font-size: .19rem;
  white-space: nowrap;
}

.head .right .top-tel .big span {
  display: inline-block;
  margin-left: .1rem;
  font-size: .12rem;
  border: 1px solid #666666;
  line-height: .2rem;
  border-radius: .2rem;
  padding: 0 .08rem;
}

.head .right .top-tel .small {
  font-size: .12rem;
  white-space: nowrap;
}

.banner {
  width: 100%;
  height: 8.66rem;
}

.banner .video-box {
  position: relative;
}

.banner .video-box .play-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  z-index: 2;
}

.banner .video-box .play-bg img {
  width: 1.42rem;
  height: 1.42rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -.71rem;
  margin-left: -.71rem;
}

.banner .video-box,
.banner video {
  width: 100%;
  height: 100%;
}

.banner video {
  object-fit: cover;
}

.foot {
  background: #3e3a39;
  padding: .5rem 0;
  color: #f2f2f2;
}

.foot .sub-nav a {
  color: #f2f2f2;
}

.foot .foot-list {
  margin: 0 auto;
  width: 13rem;
  display: flex;
  justify-content: space-between;
  background: url("../img/foot-mark.png")/*tpa=http://www.ruolinchina.com/Public/Home/img/foot-mark.png*/ left bottom no-repeat;
  background-size: 1.17rem;
}

.foot .foot-list li {
  margin-right: .5rem;

}

.foot .foot-list li .f-wx {
  width: 1.3rem;
}

.foot .foot-list .nav-tit {
  padding-bottom: .1rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid #747373;
  font-size: .22rem;
  font-weight: bold;
  white-space: nowrap;
}

.foot .foot-list .nav-tit span {
  margin-left: .05rem;
  font-size: .12rem;
  font-weight: normal;
}

.foot .foot-list .sub-nav a {
  padding-left: .1rem;
  position: relative;
  font-size: .14rem;
  letter-spacing: .02rem;

}

.foot .foot-list .sub-nav a::before {
  content: ".";
  position: absolute;
  left: 0;
  top: -.04rem;
}

.foot .foot-list .adr-box .adr-item {
  margin-bottom: .1rem;
}

.foot .foot-list .adr-box .adr-item a {
  color: #fff;
}

.foot .foot-list .adr-box .adr-item .adr {
  margin-bottom: .05rem;
  font-size: .14rem;
  padding-left: .15rem;
  background: url("../img/addr-icon.png")/*tpa=http://www.ruolinchina.com/Public/Home/img/addr-icon.png*/ left center no-repeat;
  background-size: .12rem;
}

.foot .foot-list .adr-box .adr-item .adr-desc {
  font-size: .12rem;
  transform: scale(.9);
  transform-origin: 0 50%;
  width: 110%;
}

.license {
  height: .75rem;
  line-height: .75rem;
  background: #000000;
  text-align: center;
  font-size: .14rem;
  color: #3c3d40;
}

.inner-banner {
  position: relative;
}

.inner-banner .current-adr {
  width: 11rem;
  position: absolute;
  left: 50%;
  margin-left: -5.5rem;
  top: .55rem;
  font-size: .18rem;
  color: #fff;
}

.inner-banner .banner-txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  margin-left: -5.5rem;
  top: 50%;
  transform: translateY(-50%);
  min-height: 1.77rem;
  background: url("../img/top-txt-bg.png")/*tpa=http://www.ruolinchina.com/Public/Home/img/top-txt-bg.png*/ left center no-repeat;
  background-size: 3.12rem;
  color: #fff;
}

.inner-banner img {
  display: block;
}

.inner-banner .banner-txt .en {
  font-size: .83rem;
  font-weight: lighter;
}

.inner-banner .banner-txt .cn {
  font-size: .61rem;

  color: #d1111c;
}




.tit-en {
  font-size: .2rem;
  font-weight: lighter;
}

.backTop {
  position: fixed;
  right: 0.1rem;
  bottom: 2rem;
  width:1rem;
  height:1rem;
  background: url("../img/up.png")/*tpa=http://www.ruolinchina.com/Public/Home/img/up.png*/ center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  z-index: 15;
  display: none;
  cursor: pointer;
}



/*案例详情下一页*/
.next-btn {
  width: 11rem;
  margin: 0 auto 1rem auto;
  height: .85rem;
  background: url("../img/case/next-line.jpg")/*tpa=http://www.ruolinchina.com/Public/Home/img/case/next-line.jpg*/ center no-repeat;
  background-size: 100%;
}

.next-btn .inner {
  position: relative;
  margin: 0 auto;
  width: 3.71rem;
  height: .84rem;
  background: url("../img/case/next-bg.png")/*tpa=http://www.ruolinchina.com/Public/Home/img/case/next-bg.png*/ center no-repeat;
  background-size: 100%;
  font-size: .24rem;
  line-height: 1em;
  color: #231815;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.next-btn .inner .prev-icon,
.next-btn .inner .next-icon{
  position: absolute;
  width: .6rem;
  height: .6rem;
}
.next-btn .inner .prev-icon{
  left: .15rem;
}
.next-btn .inner .next-icon{
  right: .15rem;
}
.next-btn .inner span {
  font-size: 10px;
  color: #898989;
  
}

.next-btn .inner .txt-prev{
  display: none;
}
.next-btn .inner .prev-icon:hover ~ .txt-prev{
  display: block ;
}
.next-btn .inner .prev-icon:hover ~ .txt-next{
  display: none;
}


.case-cont img{
  width: auto!important;
  margin: 0 auto;
}

/*0403*/
.head{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12;
  background: #fff;
}
.inner-banner{
  margin-top: 1.1rem;
}

.abeian{
  display: inline;
  color: #3c3d40;
}
}