.container {
  padding: 1.73rem 1.4rem;
  position: relative;
}

.container .bg_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container .bg_box .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  z-index: 0;
}

.container .bg_box .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  z-index: 1;
}

.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding-bottom: .4rem;
  border-bottom: .01rem solid rgba(96, 96, 96, .1);
}

.top .title {
  font-weight: 600;
  line-height: 1.6;
  font-family: 'Microsoft YaHei';
  margin-bottom: .3rem;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  width: 8.33rem;
  
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.top .time {
  font-weight: 400;
  line-height: 1.3;
  font-family: 'Microsoft YaHei';
  color: rgba(102, 102, 102, 1);

  display: flex;
  align-items: center;
  gap: .16rem;
}

.main {
  margin: .5rem 0 0 0;
  display: flex;
  gap: .63rem;
}

.main .left {
  width: 2.97rem;
  flex-shrink: 0;
}

.main .left .share {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  gap: .2rem;
  position: sticky;
  top: 1.73rem;
}

.main .left .share .icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  flex-direction: column;
}

.main .left .share .icons .icon {
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  /*overflow: hidden;*/
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

.main .left .share .icons .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main .left .share .icons .icon .normal,
.main .left .share .icons .icon:hover .active {
  display: block;
}

.main .left .share .icons .icon:hover .normal,
.main .left .share .icons .icon .active {
  display: none;
}

.container .share .icons {
    position: relative;
}

.container .share .icons a {
  border-style: none;
}
.container .share .icons .social-share-icon.icon-wechat,
.container .share .icons .social-share-icon.icon-weibo{
  /*display: none !important;*/
  background: transparent;
  position: absolute;
  /*left: 0;*/
  /*top: 0;*/
}

.container .share .icons a {
  border-style: none;
    border-style: none;
    height: .34rem;
    width: .34rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-shrink: 0;
}


.social-share .icon-wechat:before,
.social-share .icon-wechat:after
{
    content: none !important;
}

.social-share .icon-weibo:before,
.social-share .icon-weibo:after
{
    content: none !important;
}


.content_box .content_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin: .77rem 0 0 0;
  padding: .18rem 0 0 0;
  border-top: .01rem solid rgba(96, 96, 96, .1);

}

.content_box .content_bottom .btn {
  font-weight: 400;
  line-height: 1.3;
  /*font-family: 'H_Regular';*/
  font-family: 'Microsoft YaHei';
  color: rgba(79, 96, 109, 1);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
}

.content_box .content_bottom .btn:hover {
  color: rgba(36, 145, 202, 1);
}

.content_box .content_bottom .btn .normal,
.content_box .content_bottom .btn:hover .active {
  display: block;
}

.content_box .content_bottom .btn .active,
.content_box .content_bottom .btn:hover .normal {
  display: none;
}



.main .content {
  font-weight: 400;
  line-height: 2;
  font-family: 'Microsoft YaHei';
  color: rgba(71, 67, 66, 1);
}

.main .content img {
  width: 100%;
  height: auto;
  border-radius: .2rem;
}

.main .content video {
  width: 100%;
  height: auto;
  border-radius: .2rem;
}

.main .right {
  width: 4.33rem;
  flex-shrink: 0;
}

.main .right .right_box {
  width: 100%;
  padding: .32rem 0 0 0;
  position: sticky;
  top: 1.73rem;
  background: rgba(247, 249, 250, 1);
  border-radius: .1rem;
}

.main .right .right_box .label {
  font-weight: 500;
  line-height: 1.6;
  /*font-family: 'H_Medium';*/
  font-family: 'Microsoft YaHei';
  color: rgba(79, 96, 109, 1);

  padding-bottom: .26rem;
  border-bottom: .01rem solid rgba(232, 233, 238, 1);
  margin: 0 .32rem 0 .32rem;
}

.main .right .list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3rem;
  margin: .3rem .32rem .4rem .32rem;
}

.main .right .list .item {
  width: 100%;
  display: flex;
  gap: .187rem;
  align-items: center;
}

.main .right .list .item .img_box {
  width: 1.848rem;
  height: 1.28rem;
  border-radius: .1rem;
  overflow: hidden;
  flex-shrink: 0;
}

.main .right .list .item .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .5s ease-in-out;
}

.main .right .list .item:hover .img_box img {
  transform: scale(1.05);
}


.main .right .list .item .info .title {
  font-weight: 400;
  line-height: 1.6;
  font-family: 'Microsoft YaHei';
  color: rgba(51, 51, 51, 1);
  margin: 0 0 .18rem 0;
  
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.main .right .list .item .info .desc {
  font-weight: 400;
  line-height: 1.3;
  font-family: 'Microsoft YaHei';
  color: rgba(79, 96, 109, 1);
}

.main .right .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  border-radius: 0 0 .1rem .1rem;
  background: rgba(36, 145, 202, 1);
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  line-height: 1.3;
  /*font-family: 'H_Regular';*/
  font-family: 'Microsoft YaHei';
  gap: .1rem;
  text-align: center;
  padding: .28rem 0;
}

@media (max-width: 767px) {
    .container {
        padding: 30px 20px 60px 20px;
    }
    .top .title {
        width: 100%;
        -webkit-line-clamp: unset;
        font-size: 18px;
    }
    .top .time {
        font-size: 14px;
    }
    
    .main {
        flex-direction: column ;
    }
    .main .left {
        width: 100%;
    }
    .main .left .share {
        flex-direction: unset;
        font-size: 14px;
    }
    .main .left .share .icons {
        flex-direction: unset;
    }
    .main .content {
        font-size: 14px;
    }
    .content_box .content_bottom .btn {
        font-size: 14px;
    }
    .main .right {
        width: 100%;
    }
    .main .right .right_box .label {
        font-size: 18px;
    }
    .main .right .list .item .info .title {
        font-size: 14px;
    }
    .main .right .list .item .info .desc {
        font-size: 12px;
    }
    .main .right .btn {
        font-size: 14px;
    }
    
}