/* 公共样式文件 - 所有页面共用 */

/* 基础布局 */
html {
  min-width: 1200px;
}
#app-header {
  height: 60px;
}
.c-header-banner {
  background-size: cover;
}
.header .typeArea .function {
  right: 0;
}
#app-header .header {
  position: fixed !important;
}
.header .typeArea .function {
  padding-left: 5%;
  display: flex;
  align-items: center;
  position: unset;
  height: 56px;
}
.header .typeArea .function .c-header-login {
  display: inline-block;
  height: 26px;
  vertical-align: middle;
  padding-right: 20px;
  line-height: 26px;
}

/* 导航按钮 */
.nav-free-button {
  display: inline-block;
  cursor: pointer;
  width: 107.94px;
  height: 29px;
  text-align: center;
  line-height: 26px;
  border-radius: 16.34px;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  color: #0661FF;
  border: 1px solid #0661FF;
}

.nav-free-button:hover {
  color: #fff;
  background: #0661FF;
}

/* 侧边栏样式 */
.p-index__side-bar-box {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.side-bar-container .icon-box {
  cursor: pointer;
  margin-top: 8.6px;
  width: 68.8px;
  height: 68.8px;
  background: white;
  box-shadow: 0px 1.72px 3.44px 0px rgba(185, 185, 185, 0.34);
  border-radius: 5.16px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.side-bar-container .icon-box .weixin,
.side-bar-container .icon-box .phone,
.side-bar-container .icon-box .order,
.side-bar-container .icon-box .gotop,
.side-bar-container .icon-box .faq {
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.side-bar-container .icon-box .weixin {
  width: 32.68px;
  height: 27.52px;
  background-image: url(../images/sidebar/1@2x.png);
}

.side-bar-container .icon-box .hover-weixin {
  width: 258px;
  height: 240.8px;
  position: absolute;
  right: 55.9px;
  top: -86px;
}

.side-bar-container .icon-box .hover-phone {
  width: 243.38px;
  height: 114.38px;
  position: absolute;
  right: 44.72px;
  top: -17.2px;
  font-size: 18.92px;
  color: #37383a;
  line-height: 103.2px;
  text-align: center;
  background-image: url(../images/sidebar/react@2x.png);
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.side-bar-container .icon-box .phone {
  width: 23.22px;
  height: 28.38px;
  background-image: url(../images/sidebar/2@2x.png);
}

.side-bar-container .icon-box .order {
  width: 29.24px;
  height: 29.24px;
  background-image: url(../images/sidebar/3@2x.png);
}

.side-bar-container .icon-box .gotop {
  width: 26.66px;
  height: 30.96px;
  background-image: url(../images/sidebar/4@2x.png);
}

.side-bar-container .icon-box .faq {
  width: 24px;
  height: 24px;
  background-image: url(../images/sidebar/5@2x.png);
}

.side-bar-container .icon-box .icon-title {
  font-size: 12.04px;
  color: #051a37;
  line-height: 12.04px;
  margin-top: 6.02px;
}

.side-bar-container .icon-box:hover {
  background: #257EFE;
}

.side-bar-container .icon-box:hover .weixin {
  background-image: url(../images/sidebar/1@2x1.png);
}

.side-bar-container .icon-box:hover .phone {
  background-image: url(../images/sidebar/2@2x1.png);
}

.side-bar-container .icon-box:hover .order {
  background-image: url(../images/sidebar/3@2x1.png);
}

.side-bar-container .icon-box:hover .gotop {
  background-image: url(../images/sidebar/4@2x1.png);
}

.side-bar-container .icon-box:hover .faq {
  background-image: url(../images/sidebar/5@2x1.png);
}

.side-bar-container .icon-box:hover .icon-title {
  color: #fff;
}

/* 弹窗样式 */
.demo-order-box {
  position: fixed;
  top: 0;
  left: 50%;
  top: 50%;
  z-index: 999;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.sys-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 534.92px;
  z-index: 999;
  padding: 51.6px 38.7px 34.4px;
  border-radius: 8.6px;
  background-color: #fff;
}

.demo-account-close {
  position: absolute;
  height: 19px;
  width: 19px;
  right: 21px;
  top: 22px;
  cursor: pointer;
  background-image: url(../images/demo/close.png);
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.sys-choice {
  display: flex;
}

.sys-choice__item {
  width: 206.4px;
  border: 1px solid #257EFE;
  border-radius: 8.6px;
  margin-right: 21.5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 21.5px 0;
}

.sys-choice__item__text {
  color: #fff;
  cursor: pointer;
  height: 38.7px;
  line-height: 38.7px;
  padding: 0 8.6px;
  background: #257EFE;
  border-radius: 8.6px;
  text-align: center;
  border: 1px solid #257EFE;
}

.sys-choice__item__text:hover {
  background: rgba(37, 126, 254, 0.7);
}

.sys-choice__item__icon {
  width: 129px;
  height: 65.36px;
  padding-bottom: 94.6px;
}

.sys-choice__item__icon img {
  width: 129px;
  height: 65.36px;
}

.c-header-headerBox {
  position: absolute;
  left: 0px;
  top: 41px;
  z-index: 11;
}

.c-header-login {
  display: inline-block;
  height: 29px;
  vertical-align: middle;
  padding-right: 20px;
}