@charset "UTF-8";
#friendshipLink .banner {
  position: relative;
}
#friendshipLink .banner .defaultWidth {
  text-align: left;
}
#friendshipLink .banner .defaultWidth p {
  padding-right: 600px;
  text-align: left;
}
#friendshipLink .exchangeLinkInstructions {
  background: url("/web/shiwais3/assets/friendshipLink/back.jpeg") no-repeat center;
  background-size: cover;
}
#friendshipLink .exchangeLinkInstructions .item-title-describe {
  text-align: left;
}
#friendshipLink .exchangeLinkInstructions .linkDescription {
  display: flex;
  flex-direction: column;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .firstLine {
  display: flex;
  align-items: center;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .firstLine .step1 {
  border: 2px solid #2190f9;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .firstLine .step1 span {
  font-size: 14px;
  color: #393939;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .firstLine .step1 p {
  font-size: 30px;
  margin-top: 5px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .firstLine .stepDescription {
  padding-left: 30px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .firstLine .stepDescription .text {
  font-size: 22px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo {
  padding: 30px 0;
  display: flex;
  align-items: center;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .leftquyu {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .leftquyu .dashedLine {
  height: 400px;
  width: 50px;
  border-right: none;
  width: 1.5px;
  background-image: linear-gradient(#707070 50%, transparent 50%);
  background-size: 1.5px 10px;
  background-repeat: repeat-y;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription {
  padding-left: 30px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .textOne {
  width: 264px;
  padding-right: 30px;
  font-size: 15px;
  line-height: 25px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy {
  display: flex;
  gap: 130px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier {
  margin-top: 60px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier span {
  font-size: 15px;
  display: block;
  margin-bottom: 30px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .textContent {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  width: 300px;
  line-height: 25px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .textContent code {
  color: #000;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier a {
  color: #2190f9;
  border: 1px solid #2190f9;
  width: 110px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  font-size: 14px;
  margin: 20px 0 0 auto;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier a:hover {
  background: #2190f9;
  color: #fff;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .success {
  width: 28px;
  height: 28px;
  border-radius: 100px;
  text-align: center;
  font-size: 0;
  background-color: #28a745;
  position: relative;
  border: none;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .success::before {
  content: "✔";
  font-size: 18px;
  color: white;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .success:hover {
  background-color: #28a745;
  color: #fff;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .success::after {
  content: "复制成功！";
  position: absolute;
  font-size: 14px;
  white-space: pre;
  bottom: -25px;
  left: -16px;
  color: #28a745;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .fail {
  width: 28px;
  height: 28px;
  border-radius: 100px;
  text-align: center;
  font-size: 0;
  background-color: #a32803;
  position: relative;
  border: none;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .fail::before {
  content: "X";
  font-size: 18px;
  color: white;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .fail:hover {
  background-color: #a32803;
  color: #fff;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .fail::after {
  content: "复制失败！";
  position: absolute;
  font-size: 14px;
  white-space: pre;
  bottom: -25px;
  left: -16px;
  color: #a32803;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .thirdDashedLine .leftquyu .dashedLine {
  height: 50px;
  width: 50px;
  border-right: none;
  width: 1.5px;
  background-image: linear-gradient(#707070 50%, transparent 50%);
  background-size: 1.5px 10px;
  background-repeat: repeat-y;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .thirdDashedLine .stepDescription .textOne {
  width: 100%;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .thirdDashedLine .stepDescription .textOne i {
  margin: 0 20px;
}
#friendshipLink .exchangeLinkInstructions .linkDescription .last .stepDescription .textOne {
  width: 315px;
}

@media (max-width: 768px) {
  #friendshipLink .globalSpacing {
    padding: 10vw 0;
  }
  #friendshipLink .banner {
    background-size: 300% 100% !important;
    background-position: -149vw 0vw !important;
  }
  #friendshipLink .banner .defaultWidth p {
    padding-left: 0;
    padding-right: 14vw;
  }
  #friendshipLink .banner .navigation {
    display: none;
  }
  .banner p {
    margin: 6vw 0 7vw 0 !important;
  }
  #friendshipLink .exchangeLinkInstructions .item-title-describe {
    text-align: inherit;
    display: flex;
    flex-direction: column;
  }
  .item-title-describe span:nth-child(1) {
    display: block;
    text-align: center;
  }
  .item-title-describe span:nth-child(2) {
    padding-top: 15vw;
    padding-bottom: 5vw;
    font-weight: inherit;
    font-size: 4.5vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .firstLine {
    display: none;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .leftquyu {
    display: none;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription {
    background: #fff;
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.16);
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .h5 {
    display: block;
    text-align: center;
    font-size: 5vw;
  }
  #friendshipLink .exchangeLinkInstructions .sphericalStep {
    display: flex;
    gap: 13vw;
    position: relative;
    margin-top: 10vw;
    margin-bottom: 5vw;
  }
  #friendshipLink .exchangeLinkInstructions .sphericalStep .dashedLine {
    background-image: linear-gradient(#707070 0%, transparent 50%);
    background-size: 1.5px 10px;
    background-repeat: repeat-x;
    position: absolute;
    width: 14vw;
    height: 2px;
    left: 23.5vw;
    top: 5vw;
    background: repeating-linear-gradient(to right, #707070 0%, #707070 5px, transparent 5px, transparent 10px);
  }
  #friendshipLink .exchangeLinkInstructions .sphericalStep .dashedLine:nth-child(4) {
    left: 58.5vw;
  }
  #friendshipLink .exchangeLinkInstructions .sphericalStep .item-ball {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #friendshipLink .exchangeLinkInstructions .sphericalStep .item-ball span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #2190f9;
    width: 10vw;
    height: 10vw;
    border-radius: 100vw;
    -webkit-border-radius: 100vw;
    -moz-border-radius: 100vw;
    -ms-border-radius: 100vw;
    -o-border-radius: 100vw;
    font-size: 4.5vw;
  }
  #friendshipLink .exchangeLinkInstructions .sphericalStep .item-ball p {
    text-align: center;
    font-size: 3.5vw;
    margin-top: 3vw;
    line-height: 5vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription {
    padding-left: 10vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .textOne {
    width: 84vw;
    padding-right: 10vw;
    font-size: 3.7vw;
    line-height: 6vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier {
    margin-top: 8vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier span {
    font-size: 4.5vw;
    margin-bottom: 7vw;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier .textContent {
    padding: 3vw;
    width: 75vw;
    line-height: 7vw;
    font-size: 3.7vw;
    box-shadow: none;
    border: 1px solid;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy {
    gap: 0;
    flex-direction: column;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo .stepDescription .copy .copyLink .copyLinkIdentifier a {
    display: none;
  }
  .advertisingImagePlacement {
    margin-top: 0 !important;
  }
  #friendshipLink .exchangeLinkInstructions .linkDescription .theDashedLinePointsTo {
    padding: 4vw 0;
  }
}

/*# sourceMappingURL=friendshipLink.css.map */