.aricle-box {
  width: 100%;
  padding-top: 49rem;
  background: #f5f8fa;
  padding-bottom: 152rem;
}

.aricle-box .aricle-list .left-box {
  width: 863.26rem;
  margin-right: 28rem;
  padding: 0rem 29rem;
  background-color: #fff;
}

.aricle-box .aricle-list .left-box .left-top {
  height: 82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.84rem solid #cccccc;
}

.aricle-box .aricle-list .left-box .left-top .card-i {
  text-align: center;
  font-size: 26.85rem;
  font-weight: 400;
  color: #383838;
}

.aricle-box .aricle-list .left-box .left-top .card-i.active {
  color: #2a82e4;
  position: relative;
  font-size: 26.85rem;
  font-weight: 700;
}

.aricle-box .aricle-list .left-box .left-top .card-i.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 51.17rem;
  height: 3.36rem;
  border-radius: 39.43rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25rem;
  background: #469dfa;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-footer {
  border-top: 0.84rem solid rgba(166, 166, 166, 0.39);
  height: 54rem;
  line-height: 54rem;
  text-align: center;
  font-size: 13.42rem;
  color: rgba(56, 56, 56, 0.75);
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header {
  border-bottom: 0.84rem dotted rgba(166, 166, 166, 0.39);
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .top-1 {
  align-items: center;
  padding-top: 30rem;
  padding-bottom: 19rem;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .title {
  font-size: 26.85rem;
  font-weight: 400;
  letter-spacing: 0rem;
  line-height: 25.17rem;
  color: #383838;
  padding-bottom: 29rem;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .airlce-info-write {
  justify-content: space-between;
  font-size: 18.46rem;
  font-weight: 400;
  color: gray;
  padding-bottom: 4rem;
  cursor: pointer;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .airlce-info-write .left-info .v {
  height: 15rem;
  width: 2rem;
  margin: 0rem 15rem 0rem 10rem;
  background-color: gray;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .airlce-info-write .readeyWrite {
  font-size: 13.42rem;
  font-weight: 400;
  color: gray;
  cursor: pointer;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .airlce-info-write .readeyWrite .eye-icon {
  width: 26.01rem;
  height: 26.01rem;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .link-ino {
  font-size: 18.46rem;
  font-weight: 500;
  color: rgba(56, 56, 56, 0.92);
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-header .icon-positon {
  width: 21.81rem;
  height: 15.94rem;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-content {
  font-size: 18.46rem;
  font-weight: 400;
  letter-spacing: 0rem;
  line-height: 41.95rem;
  color: rgba(56, 56, 56, 0.8);
  padding: 24rem 0rem 100rem;
}

.aricle-box .aricle-list .left-box .aricle-box-container .aricle-content p {
  margin-bottom: 20rem;
}

.aricle-box .aricle-list .right-box {
  flex: 1;
}

.aricle-box .aricle-list .right-box .aricle-content {
  padding-top: 26rem;
  width: 100%;
  font-size: 18.46rem;
  border-top: 0.84rem solid rgba(166, 166, 166, 0.64);
  font-weight: 400;
  color: rgba(56, 56, 56, 0.8);
}

.aricle-box .aricle-list .right-box .aricle-right-block {
  opacity: 1;
  border-radius: 9.23rem;
  background: white;
  padding: 36rem 32rem;
  border: 0.84rem solid rgba(166, 166, 166, 0.39);
  margin-top: 40rem;
}

.aricle-box .aricle-list .right-box .aricle-right-block:first-child {
  margin-top: 0rem;
}

.aricle-box .aricle-list .right-box .aricle-right-block .links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 15rem;
  border-bottom: 0.84rem solid rgba(166, 166, 166, 0.64);
}

.aricle-box .aricle-list .right-box .aricle-right-block .links:last-child {
  border: none;
}

.aricle-box .aricle-list .right-box .aricle-right-block .links:nth-child(2n) {
  margin-top: 15rem;
}

.aricle-box .aricle-list .right-box .aricle-right-block .links:hover .l {
  border: 0.84rem solid #469dfa;
  border: none;
  color: #469dfa;
}

.aricle-box .aricle-list .right-box .aricle-right-block .links:hover .c {
  color: #469dfa;
}

.aricle-box .aricle-list .right-box .aricle-right-block .links .c {
  font-size: 18.46rem;
  font-weight: 400;
}

.aricle-box .aricle-list .right-box .aricle-right-block .links .l {
  font-size: 20.13rem;
  font-weight: 700;
  letter-spacing: 0rem;
  color: #383838;
  padding-bottom: 10rem;
}

.aricle-box .aricle-list .right-box .aricle-right-block .right-info {
  flex: 1;
  justify-content: space-between;
}

.aricle-box .aricle-list .right-box .aricle-right-block .right-info .l {
  display: inline-block;
  font-size: 20.13rem;
  font-weight: 400;
  color: #383838;
}

.aricle-box .aricle-list .right-box .aricle-right-block .right-info .zx {
  width: 65.44rem;
  text-align: center;
  line-height: 29.36rem;
  display: block;
  height: 29.36rem;
  display: inline-block;
  opacity: 1;
  font-size: 21.81rem;
  font-weight: 400;
  border-radius: 5.03rem;
  background: rgba(42, 130, 228, 0);
  border: 0.84rem solid gray;
}

.aricle-box .aricle-list .right-box .aricle-right-block .l-bo {
  width: 87.25rem;
  height: 87.25rem;
  margin-right: 10rem;
  background: #2a82e4;
  border-radius: 10.07rem;
  margin-bottom: 30rem;
}

.aricle-box .aricle-list .right-box .aricle-right-block .l-bo .top {
  padding-bottom: 40rem;
  border-bottom: 0.84rem solid rgba(166, 166, 166, 0.64);
}

.aricle-box .aricle-list .right-box .aricle-right-block .l-bo .top .logo-left {
  width: 87.25rem;
  height: 87.25rem;
  margin-right: 15rem;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper {
  border-radius: 9.23rem;
  background: white;
  margin-top: 39rem;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top {
  height: 55.37rem;
  opacity: 1;
  line-height: 55.37rem;
  border-radius: 9.23rem;
  background: rgba(229, 229, 229, 0.5);
  font-size: 20.13rem;
  font-weight: 400;
  color: #383838;
  padding: 0rem 30rem;
  justify-content: space-between;
  cursor: pointer;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more span {
  font-size: 16.78rem;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more .more-icon,
.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more .hide {
  width: 15.94rem;
  height: 15.94rem;
  margin-left: 10rem;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more .hide {
  display: none;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more:hover span {
  color: #469dfa;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more:hover .more-icon {
  display: none;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .top .load-more:hover .hide {
  display: block;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper {
  padding: 7rem 15rem;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper .info-item {
  display: flex;
  height: 81rem;
  align-items: center;
  font-size: 18.46rem;
  font-weight: 400;
  overflow: hidden;
  border-bottom: 0.84rem solid rgba(166, 166, 166, 0.39);
  cursor: pointer;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper .info-item:last-child {
  border-bottom: none;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper .info-item:hover .c1 {
  color: #469dfa;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper .info-item .c1 {
  letter-spacing: 0rem;
  color: rgba(56, 56, 56, 0.8);
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper .info-item .left-prefix {
  color: rgba(128, 128, 128, 0.92);
  margin-right: 5rem;
}

.aricle-box .aricle-list .right-box .pushlikeWrapper .botttom-wrapper .info-item .left-prefix.hot {
  background-image: url(/public_common/aricleResource/hot.png);
  background-position: center center;
  background-size: 100% 100%;
  width: 70.47rem;
  height: 19.3rem;
}

.aricle-box .aricle-list .right-box .aricle-push-id {
  margin-top: 40rem;
  width: 433.72rem;
  height: 175.34rem;
  background-image: url(/public_common/aricleResource/code_bg_box.png);
  background-position: center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem 25rem;
}

.aricle-box .aricle-list .right-box .aricle-push-id .left_code {
  width: 129.84rem;
  height: 151.48rem;
  background-image: url(/public_common/aricleResource/code_bg.png);
  background-position: center center;
  background-size: 100% 100%;
}

.aricle-box .aricle-list .right-box .aricle-push-id .left_code img {
  width: 120.35rem;
  height: 120.47rem;
}

.aricle-box .aricle-list .right-box .aricle-push-id .left_code .bottom-c {
  font-size: 16.78rem;
  padding-right: 6rem;
  font-weight: 400;
  text-align: center;
  color: black;
}

.aricle-box .aricle-list .right-box .aricle-push-id .left_code .bottom-c .wxTitle {
  color: #227de6;
  font-weight: 500;
}

.aricle-box .aricle-list .right-box .aricle-push-id .right-aricle {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
}

.aricle-box .aricle-list .right-box .aricle-push-id .right-aricle .i-i {
  width: 116.77rem;
  height: 35.78rem;
  text-align: center;
  line-height: 35.78rem;
  font-size: 18.46rem;
  color: white;
  margin-right: 10rem;
  margin-bottom: 28rem;
  border-radius: 49.5rem;
  background: rgba(15, 97, 191, 0.35);
  border: 0.84rem solid rgba(30, 148, 227, 0);
}

.aricle-box .aricle-list .right-box .aricle-push-id .right-aricle .i-i:nth-child(3) {
  margin-bottom: 0rem;
}

.aricle-box .aricle-list .right-box .aricle-push-id .right-aricle .i-i:nth-child(4) {
  margin-bottom: 0rem;
}