.mail_hdr {
  padding-bottom: 50.1333333%;
  background-image: url("../img/mail/bg_intergration@2x.png");
  background-size: cover;
  position: relative; }
.mail_hdr .mail-hdr_info {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%); }
.mail_hdr .mail-hdr_link {
  position: absolute;
  top: .4rem;
  right: .586667rem; }
.mail_hdr .mail-hdr_nav {
  position: absolute;
  left: .533333rem;
  right: .533333rem;
  bottom: -0.6666rem; }

.mail_ctn {
  margin-top: 1.466667rem;
  padding: 0 1rem;
  padding-bottom: 1.06667rem;
  max-height: 50vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; }

.point-info {
  color: #fff; }
.point-info_ctn {
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  line-height: 8px;
  text-shadow: 0 0.13333rem 0.33333rem rgba(14, 52, 94, 0.6); }

.point-rule-link {
  display: inline-block;
  height: .586667rem;
  padding-left: .68rem;
  padding-right: .233333rem;
  border-radius: .293333rem;
  line-height: 0.666666rem;
  color: #fff;
  font-size: .32rem;
  text-align: left;
  background-color: #030000;
  background-image: url("../img/mail/icon_intergratiorules@2x.png");
  background-size: .346667rem .32rem;
  background-repeat: no-repeat;
  background-position: 0.2333rem center;
  background-color:rgba(0, 0, 0, 0.2);
}

.point-nav {
  height: 1.333333rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: relative;
  border-radius: .106667rem;
  overflow: hidden;
  font-size: .426667rem;
  color: #333;
  background-color: #fff;
  -webkit-box-shadow: 0 0.133333rem 0.133333rem 0  rgba(19, 132, 255, 0.07); */
box-shadow:  0 0.133333rem 0.133333rem 0  rgba(19, 132, 255, 0.07); */
}
.point-nav .point-nav_link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative; }
.point-nav .point-nav_link::after {
  content: '';
  width: .426667rem;
  height: .586667rem;
  position: absolute;
  top: 50%;
  left: -.613333rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-size: cover; }
.point-nav .point-nav_link--earn::after {
  background-image: url("../img/mail/icon_getintegration@2x.png"); }
.point-nav .point-nav_link--recod::after {
  background-image: url("../img/mail/icon_integrationhistory@2x.png"); }
.point-nav_line {
  display: block;
  width: 1px;
  height: .533333rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #ccc; }

.goods-list {
  color: #fff; }
.goods-list_item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 2.133333rem;
  width: 8rem;
  margin-bottom: .4rem;
  background-image: url("../img/mail/bg_exchange_b@2x.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: .213333rem; }
.goods-list_item-desc {
  margin-left: 2.626667rem; }
.goods-list_item-tle {
  font-size: .48rem;
  margin-bottom: .223333rem;
  margin-right: .233333rem; }
.goods-list_item-inte-val {
  opacity: 0.6; }
.goods-list_exchange-btn {
  width: 0;
  line-height: 1.2em;
  padding-right: .633333rem;
  font-size: .32rem; }

.pop-up {

  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8.666667rem;
  min-height: 5.053333rem;
  background-color: #fff;
  border-radius: .213333rem;
  z-index: 9999;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.pop-up .close-btn {
  position: absolute;

  right: 0;
  top: -.966667rem;

  background-color: rgba(0, 0, 0, 0.02);

  content: '';
  display: block;

  width:  .8rem;
  height: .8rem;
}

.pop-up_icon {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-53%, -53%);
  transform: translate(-53%, -53%);
  width: 2.453333rem;
  height: 2.266667rem;
  background-image: url("../img/mail/bg_getintergration@2x.png");
  background-size: cover; }
.pop-up_ctn {
  margin-top: 1.56rem;
  padding-left: .546667rem;
  padding-bottom: .52rem;
  min-height: 2.026667rem; }
.pop-up_ctn .pop-up_desc {
  color: #999;
  font-size: .32rem;
  margin-bottom: .133333rem; }
.pop-up_ctn .pop-up_rule-list {
  color: #1384ff;
  font-size: .426667rem; }
.pop-up_ftr {
  height: 1.333333rem;
  background-color: #fafafa;
  border-radius: 0 0 .213333rem .213333rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  
  position: relative;
}

.pop-up_ftr::before {

  content: '';
  
  position: absolute;

  top:0;
  left: 0;
  width: 100%;
  height: 1px;

  background-color: #e5e5e5;
}

@media screen and (-webkit-min-device-pixel-ratio:2) {
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
}

.pop-up_ftr .pop-up_btn {
  width: 50%;
  text-align: center;
  display: block;
  color:#1384ff;
  line-height: 1.3333333rem; }
.pop-up_ftr .pop-up_btn--cfm {
  color: #999;
  border-right: solid .013333rem #e5e5e5; }

.layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: black;
  opacity: 0.6;
  z-index: 999;
  display: none; }

.number-pop {
  position: fixed;
  top:40%;
  left: .666667rem;
  right: .666667rem;

  max-height: 40%;

  background-color: #fff;

  border-radius: .213333rem;

  z-index: 9999;

  display: none;
}

.number-pop .close-btn {
  position: absolute;

  right: 0;
  top: -.966667rem;

  background-color: rgba(0, 0, 0, 0.01);

  content: '';
  display: block;

  width:  .8rem;
  height: .8rem;

}

.number-pop header {
  padding:0 .586667rem;
  padding-top: .8rem;

  display: flex;
  display: -webkit-flex;
  align-items: center;

  margin-bottom: .8rem;
}

.number-pop header p {
  color:#333;
  font-size:  .373333rem;
  line-height:  .613333rem;
  margin-right:  .253333rem;
}

.number-pop .slider {
  min-width: 4rem;
  height: 1.066667rem;

  line-height:  1.066667rem;

  display: flex;
  display: -webkit-flex;
}

.number-pop span {
  background-color: #e5e5e5;
  width: 1.066667rem;
  text-align: center;
  font-size:  .64rem;
}

.number-pop span:first-child {
  border-radius: .533333rem 0 0 .533333rem;
}

.number-pop span:last-child {
  border-radius: 0 .533333rem .533333rem 0;
}

.number-pop input {
  max-width: 1.866667rem;

  text-align: center;

  color:#1384FF;
  font-size:  .48rem;

  border-top:solid 1px #e5e5e5;
  border-bottom: solid 1px #e5e5e5;
}

.number-pop > div {
  height: 1.333333rem;

  line-height:  1.33333rem;
  font-size:  .48rem;

  border-radius: 0 0 .213333rem .213333rem;

  padding:0 1.186667rem;

  display: flex;
  display: -webkit-flex;


  justify-content: space-between;

  border:solid 1px #e5e5e5;

  position: relative;

}

.number-pop > div a:first-child {
  color:#333;
}

.number-pop > div a:last-child {
  color:#1384FF;
  font-weight: bold;
}

.number-pop > div::after {
  content: '';
  display: block;

  position: absolute;
  width: 1px;
  top:0;
  height: 100%;

  background-color: #e5e5e5;

  right: 50%;
}

.share-pop {
  position: fixed;
  right: 0;
  top: .266667rem;
  text-align: center;
  z-index: 9999;

  display: none;
}

.share-pop .share-arrow{
  width: 1.706667rem;
  height:  3.24rem;
  float: right;
  animation: float 1s ease-in infinite;
}

.share-pop .share-text {
  width: 8.333333rem;
}

@keyframes float {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(10px);
  }
}

.pop-up-with-title {
  position: fixed;
  left: .266667rem/* 20/75 */;
  right: .266667rem/* 20/75 */;
  top: 50%;
  min-height: 3.8rem/* 960/75 */;
  background-color: #fff;
  z-index: 100;
  border-radius: .213333rem/* 16/75 */;
  display: none;
  

  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);

  z-index: 9999;
}

.pop-up-with-title header {
  position: absolute;
  width: 100%;
  top: 0;
  height: 1.066667rem/* 80/75 */
;
  text-align: center;
  line-height: 1.066667rem;
  color: #fff;
  background: linear-gradient(#06DFFE, #13B5FF, #13B5FF);
  border-radius: .213333rem .213333rem 0 0;
  font-size: .426667rem/* 32/75 */
;
  font-weight: bold;
}

.pop-up-with-title main {
  margin-top: 1.066667rem/* 80/75 */
;
  margin-bottom: 1.066667rem/* 80/75 */
;
  max-height: 6.666667rem/* 800/75 */
;
  overflow: scroll;
  /* webkit开启弹性滚动 */
  -webkit-overflow-scrolling: touch;
}

.pop-up-with-title section {
  padding: .386667rem 0;
  margin: 0 .413333rem;

  position: relative;
}

.pop-up-with-title section::last-child::after {
  border-bottom:none;
}

.pop-up-with-title section:last-child {
  border-bottom: none;
}

.pop-up-with-title section h4 {
  color: #1384FF;
  font-size: .373333rem/* 28/75 */
;
  font-weight: bold;
  margin-bottom: .306667rem/* 23/75 */
;
}

.pop-up-with-title section p {
  color: #666666;
  font-size: 14px;
;
}

[data-dpr=2] .pop-up-with-title section p {
               font-size: 28px;
             }

.pop-up-with-title footer {
  position: absolute;
  width: 100%;
  bottom: 0/* 187/75 */
;
  height: 1.066667rem/* 80/75 */
;
  text-align: center;
  line-height: 1.066667rem;
  background-color: #fff;
  border-radius: 0 0 .213333rem .213333rem;
}

.pop-up-with-title footer::before {

  content:'';

  position: absolute;

  left:0;
  top:0;

  height:1px;
  width:100%;

  background-color: #ccc;

  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);

}

.pop-up-with-title .close-btn {

  position: absolute;

  right: 0;
  top: -.966667rem;

  background-color: rgba(0, 0, 0, 0.01);

  display: block;

  width:  .8rem;
  height: .8rem;
}

.code-pop {
  position: fixed;
  top:50%;
  left:50%;

  transform: translate(-50%, -50%);
  padding: .4rem;

  width: 6.666667rem;
  min-height: 7.066667rem;
  background:radial-gradient(circle,rgba(247,97,161,1),rgba(151,8,204,1));
  border-radius: 16px;

  display: none;

  z-index: 9999;
}

.code-pop img {
  width: 100%;
  height: 100%;
}

.code-pop p {
  color:#fff;
  font-size:  .266667rem;
  line-height:  .613333rem;

  padding-top: .266667rem;

  text-align: center;
}

.layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  opacity: 0.6;
  z-index: 999;
  display: none;
}