/* 版心先设置好 */
.wrapper {
  margin: 0 auto;
  width: 512px;
}

.header {
  /* 固定定位新用法 sticky*/
  /* -webkit 兼容浏览器 */
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  height: 45px;
  background: #FFF;
  z-index: 111;
}

.header .wrapper {
  display: flex;
  height: 45px;
  align-items: center;
}

/* logo图片 */
.logo a {
  display: block;
  width: 90px;
  height: 25px;
  background-image: url(../images/logo.png);
  background-size: cover;
  font-size: 0;
}

/* 导航 */
.nav {
  margin-left: 78px;

}

.nav ul {
  display: flex;
  width: 260px;
  height: 45px;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-right: 16px;
}

.nav li a {
  font-size: 12px;
  color: #222;
}

/* active 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover {
  color: #FD6350;
  border-bottom: 2px solid #FD6350;
  padding-bottom: 11px;
}

.nav-btn a {
  display: block;
  width: 69px;
  height: 27px;
  background-color: #FD6350;
  text-align: center;
  line-height: 27px;
  font-size: 12px;
  color: #FFF;
  border-radius: 13px;
}

.nav-btn a:hover {
  background-color: #080346;
}

/* 底部版权 */
.footer {
  padding-top: 42px;
  height: 232px;
  background-image: url(../images/web_bottom_bj.png);
  background-size: cover;
}

.footer .wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer .left {
  width: 73px;
  display: none;
}

.footer .left img {
  width: 100%;
  object-fit: cover;
}

.footer .right {
  display: flex;
  flex-wrap: wrap;
}

.footer .right dl {
  margin-left: 33px;
  text-align: left;
}

.footer .right dt {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.footer .right a {
  font-size: 11px;
  /* line-height: 40px; */
  color: #CACACA;
}

.footer .right dd {
  font-size: 11px;
  /* line-height: 40px; */
  color: #CACACA;
}

.footer .right dd a:hover {
  color: #fff;
}

/* 备案号 */
.record {
  height: 58px;
  background: #181818;
}

.record p {
  font-size: 11px;
  line-height: 58px;
  color: #fff;
  text-align: center;
}


/* 媒体查询样式 */
/* 首页css样式 */
/* banner 区域 */
.banner {
  height: 248px;
  background-image: url(../uploads/experience/banner.jpg);
  background-size: cover;
}

.banner .wrapper h1 {
  padding-top: 52px;
  font-weight: 700;
  font-size: 28px;
  color: #070346;
}

.banner .wrapper p {
  padding-top: 13px;
  font-size: 12px;
  color: #444444;
}

.banner .wrapper a {
  display: block;
  margin-top: 42px;
  width: 92px;
  height: 26px;
  background: linear-gradient(#fd6251, #ff774a);
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  color: #FFF;
  text-align: center;
  line-height: 26px;
}

.banner .wrapper a:hover {
  background: linear-gradient(#080346, #080346);
}

/* FTF同屏技术体验 */
/* .hd {
  margin-top: 34px;
} */


.ftf-bj h2 {
  line-height: 24px;
  font-size: 24px;
  font-weight: 400;
  color: #070346;
  text-align: center;
}

/* 技术体验内容 */
.ftf-bj {
  /* margin-top: 32px; */
  padding-top: 20px;
  height: 878px;
  background-color: #E8F6F2;
}

/* .ftf-bj h3 {
  font-size: 24px;
  color: #070346;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
} */

.ftf-bj .ftf p {
  margin-top: 22px;
  font-size: 14px;
  color: #222222;
}

.ftf .bd {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: space-between;
}

.ftf .bd .left,
.ftf .bd .right {
  width: 252px;
  height: 496px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 30px 0px rgba(204, 225, 219, 0.6);

}

.ftf-bj .ftf .bd .left .control,
.ftf-bj .ftf .bd .right .control {
  padding-top: 10px;
  width: 100%;
  height: 44px;
  background-color: #fff;
  border-radius: 3px 3px 0px 0px;
  border-bottom: 1px solid #eee;
}

.ftf-bj .ftf .bd .left .control h4,
.ftf-bj .ftf .bd .right .control h4 {
  margin: 0 auto;
  width: 74px;
  height: 24px;
  background: #FFE4DF;
  border-radius: 3px;
  font-weight: 400;
  font-size: 14px;
  color: #FD6350;
  text-align: center;
  line-height: 24px;
}

.ftf .bd .left .sp,
.ftf .bd .right .sp {
  width: 100%;
  height: 90%;
  overflow: auto;
}

.ftf .bd .left img,
.ftf .bd .right img {
  width: 90%;
  display: block;
}

.ftf-bj .ftf .bd .erwei {
  margin: 28px auto;
  width: 152px;
  height: 152px;
  background-color: #fff;
}

.ftf .erwei p {
  margin-top: 8px;
  font-size: 14px;
  color: #070346;
  text-align: center;
}

/* 一秒辅达应用体验 */
.appli {
  padding-top: 60px;
  height: 416px;
  background-image: url(../uploads/experience/bg.png);
  background-size: cover;
}

.appli .exper {
  display: flex;
}

.appli .exper .left img {
  width: 260px;
  height: 234px;
  object-fit: cover;
  transition: all 0.5s;
}

.appli .exper .left img:hover {
  transform: translateY(-13px);
}

.appli .exper .right {
  margin-left: 20px;
  margin-top: 0px;
}

.appli .exper .right h2 {
  font-size: 24px;
  color: #070346;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
}

.appli .exper .right p {
  margin-top: 16px;
  font-size: 12px;
  color: #666666;
  line-height: 23px;
}

.appli .exper .right h4 {
  margin-top: 20px;
  font-size: 16px;
  color: #222222;
  font-weight: 700;
}

.appli .exper .right .ts {
  margin-top: 15px;
  font-size: 14px;
  color: #666666;
  line-height: 23px;
}

.appli .exper .btn-ex {
  display: flex;
  margin-top: 20px;
}

.appli .exper .btn-ex a {
  width: 92px;
  height: 26px;
  background: linear-gradient(to right, #fd6151, #ff774a);
  border-radius: 30px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  /* background: url(../uploads/experience/bt-icon.png) no-repeat right center; */
}

.appli .exper .btn-ex a:nth-child(2) {
  margin-left: 30px;
  width: 140px;
}

.appli .exper .btn-ex a:hover {
  background: #080346
}