@charset "utf-8";

.page-box {
  width: 750pt;
  height: 630px;
  background: url(../images/popup/page-box.png) no-repeat center 81pt;
  margin: 0 auto;
  overflow: hidden;
}

.pag-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.pag-list .left {
  width: 358px;
  height: 590px;
  background: url(../images/popup/phone.png) no-repeat;
  background-size: contain;
  margin: 39px 0 0 155px;
  float: left;
}

.pag-list .left-box {
  width: 238px;
  height: 420px;
  margin: 68px 0 0 18px;
  display: inline-block;
  overflow: hidden;
}

.pag-list .left-box .title {
  width: 100%;
  height: 60px;
  text-align: center;
  color: #008cd6;
  font-size: 22px;
  font-family: 微软雅黑;
  font-weight: 300;
  margin: 45px 0 55px;
}

.pag-list .left-box .title em {
  color: #e94619;
  font-family: 微软雅黑;
  font-weight: 300;
}

.pag-list .left-box .title b {
  font-size: 26px;
  vertical-align: -2px;
  font-family: Arial;
  font-weight: 600;
}

.pag-list .left-box .title i {
  width: 5px;
  height: 5px;
  background: #1ea6e9;
  border-radius: 50px;
  display: inline-block;
  margin: 0 9pt;
  vertical-align: 4px;
}

.pag-list .left-box .robot {
  width: 68px;
  height: 59px;
  background: url(../images/popup/robot.png) no-repeat;
  display: block;
  position: relative;
  left: 50%;
  margin-left: -30px;
  top: -20px;
}

.pag-list .left-box .code {
  width: 100%;
  height: 185px;
  display: block;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: 0;
  font-size: 9pt;
  color: #999;
}

.pag-list .left-box .code-box {
  background: url(../images/hsc.png) no-repeat center center;
  background-size: cover;
  width: 155px;
  height: 155px;
  display: inline-block;
  margin-bottom: 5px;
}
.pag-list .left-box .code-box.hsd {
  background: url(../images/yhyj-gzh.jpg) no-repeat center center;
  background-size: cover;
}
.pag-list .left-box .code-box.bfd {
  background: url(../images/yhjr-app.png) no-repeat center center;
  background-size: cover;
}

.pag-list.pc .left {
  width: 610px;
  height: 545px;
  background: url(../images/popup/pc.png) no-repeat;
  margin: 2px 0 0;
}

.pag-list.pc .left-box {
  width: 502px;
  height: 350px;
  margin: 83px 0 0;
  display: inline-block;
  overflow: hidden;
}

.pag-list.pc .left-box .title {
  height: 60px;
  margin: 90px 0 28px;
  font-size: 24px;
}

.pag-list.pc .left-box .robot {
  top: 0;
}

.pag-list.pc .left .btn-box {
  text-align: center;
  margin-top: 20px;
}

.pag-list.pc .left a.btn {
  width: 158px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  border: 1px solid #1ea6e9;
  text-align: center;
  border-radius: 50px;
  color: #1ea6e9;
  transition: all 0.3s ease;
  opacity: 1;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}

.pag-list.pc .left a:hover.btn {
  background: #1ea6e9;
  transition-delay: 0.2s;
}

.pag-list.pc .left a.btn span {
  font-size: 18px;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.pag-list.pc .left a.btn b {
  background: #1ea6e9;
  width: 0;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  opacity: 1;
}

.pag-list.pc .left a:hover.btn b {
  width: 100%;
}

.pag-list.pc .left a:hover.btn span {
  color: #fff;
}

.pag-list.pc .right {
  width: 375px;
}

.pag-list.pc .right .title p.bg .shadow {
  width: 392px;
}

.pag-list .right {
  width: 450px;
  height: 25pc;
  margin: 130px 0 0;
  float: right;
}

.pag-list .right .title,
.pag-list .right .title h3 {
  font-family: 微软雅黑;
  font-weight: 300;
}

.pag-list .right .title h3 {
  font-size: 2pc;
  color: #008cd6;
}

.pag-list .right .title p {
  line-height: 28px;
}

.pag-list .right .title p.bg {
  background: #22a8e9;
  width: 100%;
  height: 39px;
  line-height: 39px;
  color: #fff;
  font-size: 1pc;
  font-style: italic;
  margin: 10px 0;
  position: relative;
  font-family: 微软雅黑;
  font-weight: 400;
}
.pag-list .right.green .title h3 {
  color: #b4d086;
}
.pag-list .right.green .title p.bg {
  background: #b4d086;
}
.pag-list .right.green .text i {
  border: 2px solid #b4d086;
}
.pag-list .right .title p.bg .shadow {
  width: 468px;
  height: 6px;
  position: absolute;
  display: block;
  background: url(../images/popup/shadow.png) no-repeat left top;
  bottom: -6px;
  right: 0;
}
.pag-list .right.blue .title p.bg {
  background: #52c1d9;
}
.pag-list .right .title p.bg .arrow {
  width: 36px;
  height: 39px;
  display: block;
  position: absolute;
  top: 0;
  left: -36px;
  background: url(../images/popup/arrow.png) no-repeat;
}

.pag-list .right .text {
  margin-top: 26px;
}

.pag-list .right .text p {
  line-height: 22px;
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}

.pag-list .right .text span {
  font-size: 1pc;
}

.pag-list .right .text em {
  color: #999;
}

.pag-list .right .text em,
.pag-list .right .text span {
  display: block;
}

.pag-list .right .text i {
  width: 9px;
  height: 9px;
  display: inline-block;
  border: 2px solid #21aced;
  border-radius: 50px;
  vertical-align: 1px;
  text-align: left;
  position: absolute;
  left: 3px;
  top: 7px;
}

.pag-list .right.red .title h3 {
  color: #e36d5a;
}

.pag-list .right.red .title p.bg {
  background: #e36d5a;
}

.pag-list .right.red .text i {
  border: 2px solid #e36d5a;
}

.pag-list .right.red .title p.bg .arrow {
  background-position: 0 -5px;
}

.pag-list .right.yellow .title h3 {
  color: #f0be69;
}

.pag-list .right.yellow .title p.bg {
  background: #f0be69;
}

.pag-list .right.yellow .text i {
  border: 2px solid #f0be69;
}

.pag-list .right.yellow .title p.bg .arrow {
  background-position: 0 -125px;
}

.pag-list .right.blue .title p.bg .arrow {
  background-position: 0 -65px;
}
.pag-list .right.blue .title h3 {
  color: #52c1d9;
}
.pag-list .right.blue .text i {
  border: 2px solid #52c1d9;
}

.pag-list .right.green .title p.bg .arrow {
  background-position: 0 -225px;
}

.pag-list .right.violet .title h3 {
  color: #9580ad;
}

.pag-list .right.violet .title p.bg {
  background: #9580ad;
}

.pag-list .right.violet .text i {
  border: 2px solid #9580ad;
}

.pag-list .right.violet .title p.bg .arrow {
  background-position: 0 -117px;
}

.page-slide .next,
.page-slide .prev {
  position: absolute;
  left: 2.5%;
  top: 50%;
  margin-top: -25px;
  display: block;
  width: 52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.page-slide .next {
  left: auto;
  right: 2.5%;
}

.page-slide .next i,
.page-slide .prev i {
  width: 52px;
  height: 52px;
  display: inline-block;
  position: relative;
}

.page-slide .prev i {
  background: url(../images/popup/prev.png) center center no-repeat;
}

.page-slide .next i {
  background: url(../images/popup/next.png) center center no-repeat;
}

.page-slide .next:hover i,
.page-slide .prev:hover i {
  -webkit-animation: 1.5s updown infinite;
  animation: 1.5s updown infinite;
}

.page-slide .next:hover,
.page-slide .prev:hover {
  background: #22a8e9;
}

.page-slide .nextStop:hover i,
.page-slide .prevStop:hover i {
  -webkit-animation: none;
  animation: none;
}

.page-slide .next.nextStop,
.page-slide .prev.prevStop {
  background: rgba(0, 0, 0, 0.03);
  cursor: default;
  display: none;
}