body {
  background: #F6F6F6;
}

.case {
    margin-top: 1rem;
  padding: .8rem 0 1.2rem;
}

.caseItem {
  width: 100%;
  height: 4.5rem;
  display: flex;
  cursor: pointer;
  background: #FFFFFF;
}

.caseItem:nth-child(2n) {
  flex-direction: row-reverse;
}

.caseImg {
  width: 50%;
  overflow: hidden;
}
.caseImg img{
    height: 4.5rem;
    transition: all 0.3s;
    object-fit: cover;
}

.caseText {
  width: 50%;
  padding: .9rem .7rem;
  box-sizing: border-box;
}

.caseIcon {
  width: .4rem;
  height: .4rem;
  margin-bottom: .12rem;
}

.caseTit {
  font-weight: bold;
  font-size: 0.32rem;
  color: #333333;
  margin-bottom: .15rem;
  transition: all .3s;
}

.caseItem:hover .caseTit {
  color: #00ADE8;
}

.caseItem:hover .caseImg img{
    transform: scale(1.1);
}

.caseTxt {
  font-weight: 400;
  font-size: 0.16rem;
  color: #6B6B6B;
  line-height: 0.28rem;
  margin-bottom: .42rem;
  min-height: .77rem;
}

.caseMore {
    position: relative;
  width: 1.38rem;
  height: 0.4rem;
  border-radius: 0.27rem 0.27rem 0.27rem 0.27rem;
  border: 0.01rem solid #6B6B6B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 0.16rem;
  color: #6B6B6B;
  transition: all .3s;
}

.caseMore img {
  width: .12rem;
  height: .12rem;
  margin-left: .22rem;
  transition: all .3s;
}
.caseMore::after{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    content:"";
    width: 0;
    height: 100%;
    border-radius: 0.27rem 0.27rem 0.27rem 0.27rem;
    background: linear-gradient(140deg, #0085CC 0%, #1DA3EB 100%);
    transition: all 0.3s;
}
.caseMore:hover::after{
    width: 100%;
}
.caseMore:hover {
     position: relative;
     z-index: 1;
  /*background: linear-gradient(140deg, #0085CC 0%, #1DA3EB 100%);*/
  border: 0.01rem solid transparent;
  color: #FFFFFF;
}

.caseMore:hover img {
    position: relative;
     z-index: 1;
  filter: brightness(0) invert(1);
}

.caseDetails {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: .8rem 0 1.2rem;
  /*padding: .8rem 0 .2rem;*/
}

.detailsL {
  width: 10.45rem;
  background: #FFFFFF;
  /*padding: .5rem .4rem .6rem;*/
  padding: .5rem .4rem .275rem;
  box-sizing: border-box;
}

.detailsL img {
  width: revert-layer;
}

.detailsLTit {
  font-weight: bold;
  font-size: 0.32rem;
  color: #333333;
  margin-bottom: .2rem;
}

.detailsLTime {
  font-weight: 400;
  font-size: 0.16rem;
  color: #999999;
  margin-bottom: .25rem;
}

.detailsLTxt {
  padding-top: .2rem;
  border-top: 0.01rem solid #DCDCDC;
  padding-bottom: .38rem;
  border-bottom: 0.01rem solid #DCDCDC;
  font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #333333;
line-height: 30px;
}

.detailsPage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .2rem;
}

.PageLeft a {
  display: flex;
  align-items: center;
  margin-bottom: .1rem;
}

.PageLeft a:last-child {
  margin-bottom: 0;
}

.PageLeft a img {
  width: .1rem;
  height: .1rem;
  margin-right: .1rem;
  filter: grayscale(1);
  transition: all .3s;
}

.PageLeft a:last-child img {
  transform: rotate(180deg);
}

.PageLeft a:hover img {
  filter: grayscale(0);
}

.PageLeft a p {
  max-width: 8.25rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #949494;
  transition: all .3s;
}

.PageLeft a:hover p {
  color: #00ADE8;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 0.36rem;
  background: linear-gradient(140deg, #0085CC 0%, #1DA3EB 100%);
  border-radius: 0.27rem 0.27rem 0.27rem 0.27rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #FFFFFF;
  margin-left: auto;
}

.back img {
  width: .14rem;
  margin-left: .06rem;
}

.detailsR {
  width: 3.35rem;
}

.other {
  width: 100%;
  background: #FFFFFF;
  padding: .3rem;
  box-sizing: border-box;
  margin-bottom: .2rem;
}

.other:last-child {
  margin-bottom: 0;
}

.otherTit {
  font-weight: 400;
  font-size: 0.2rem;
  color: #333333;
  padding-bottom: .22rem;
  border-bottom: 0.01rem solid #E6E6E6;
  position: relative;
  margin-bottom: .2rem;
}

.otherTit::after {
  content: '';
  width: 0.4rem;
  height: 0.02rem;
  background: #00ADE8;
  position: absolute;
  left: 0;
  bottom: 0;
}

.other a {
  display: flex;
  align-items: center;
  margin-bottom: .2rem;
}

.other a:last-child {
  margin-bottom: 0;
}

.other a img {
  width: .06rem;
  height: .1rem;
  margin-right: .1rem;
  transition: all .3s;
  filter: grayscale(1);
}

.other a:hover img{
  filter: grayscale(0);
}

.other a p {
  font-weight: 400;
  font-size: 0.16rem;
  color: #333333;
  transition: all .3s;
  max-width: 2.54rem;
}


.other a:hover p {
  color: #00ADE8;
}




@media only screen and (max-width: 768px) {
.detailsPage .PageLeft{
    max-width: 70%;
}
.otherTit{
    font-size: 0.26rem;
}
.caseDetails{ padding-top:0; display: block;}
.detailsL{ width:100%;}
.detailsR{ width:100%;}
.PageLeft a p{font-size: 0.24rem;}
 .back{ font-size:0.24rem;padding: 0 0.2rem;width:auto;}   
    
.other a {
  display: flex;
align-items: center;
  margin-bottom: .2rem;
}

.other a:last-child {
  margin-bottom: 0;
}

.other a img {
  width: .06rem;
  height: .1rem;
  margin-right: .1rem;
  transition: all .3s;
  filter: grayscale(1);
}

.other a:hover img{
  filter: grayscale(0);
}

.other a p {
  font-size: 0.24rem;
  max-width: 100%;
  /*! max-width: 2.54rem; */
}
.detailsLTime{ font-size:0.24rem;}
.rel_title{ font-size:0.24rem !important;}
.rel_list{
    justify-content: flex-start !important;
    column-gap: 0.65rem;
}
.rel_list .rel_item{
    margin-right: 0 !important;
}
.caseTxt{font-size:0.24rem;}
.rel_list .rel_item .item_title{font-size:0.24rem !important;}
}