@charset "UTF-8";
/*渐变文字*/
.gradient-text {
  display: inline-block;
  width: auto;
  color: #ff316c;
  background-image: linear-gradient(-90deg, #ff316c 0%, #44D7F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*盒子布局*/
/*单行省略*/
/*多行省略*/
.center-box {
  width: 62.5%;
}

.tutorial-list-page .section {
  position: relative;
}

.tutorial-list-page .section .title-bg {
  width: 100%;
  display: block;
}

.tutorial-list-page .section .title-box {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 0.24rem;
  text-align: center;
  line-height: 1.8;
  position: absolute;
  left: 0;
  top: 0;
}

.tutorial-list-page .section .title-box > div {
  width: 100%;
  height: 100%;
}

.tutorial-list-page .section .section-title {
  font-size: 0.6rem;
  color: #fff;
  font-weight: 600;
  display: inline-block;
}

.tutorial-list-page .section .section-bg {
  width: 100%;
  display: block;
}

.tutorial-list-page .news-nav {
  color: #2f2f2f;
  padding: 1.1rem 0 0.8rem 0;
  display: flex;
  -ms-display: flex;
  /* IE 9 */
  -moz-display: flex;
  /* Firefox */
  -webkit-display: flex;
  /* Safari  Chrome */
  -o-display: flex;
  /* Opera */
  align-items: center;
  -ms-align-items: center;
  /* IE 9 */
  -moz-align-items: center;
  /* Firefox */
  -webkit-align-items: center;
  /* Safari  Chrome */
  -o-align-items: center;
  /* Opera */
  justify-content: felx-end;
  -ms-justify-content: felx-end;
  /* IE 9 */
  -moz-justify-content: felx-end;
  /* Firefox */
  -webkit-justify-content: felx-end;
  /* Safari  Chrome */
  -o-justify-content: felx-end;
  /* Opera */
  flex-direction: row;
  -ms-flex-direction: row;
  /* IE 9 */
  -moz-flex-direction: row;
  /* Firefox */
  -webkit-flex-direction: row;
  /* Safari  Chrome */
  -o-flex-direction: row;
  /* Opera */
}

.tutorial-list-page .news-nav .tab-list {
  width: 100%;
  font-size: 0.18rem;
  display: flex;
  -ms-display: flex;
  /* IE 9 */
  -moz-display: flex;
  /* Firefox */
  -webkit-display: flex;
  /* Safari  Chrome */
  -o-display: flex;
  /* Opera */
  align-items: center;
  -ms-align-items: center;
  /* IE 9 */
  -moz-align-items: center;
  /* Firefox */
  -webkit-align-items: center;
  /* Safari  Chrome */
  -o-align-items: center;
  /* Opera */
  justify-content: felx-end;
  -ms-justify-content: felx-end;
  /* IE 9 */
  -moz-justify-content: felx-end;
  /* Firefox */
  -webkit-justify-content: felx-end;
  /* Safari  Chrome */
  -o-justify-content: felx-end;
  /* Opera */
  flex-direction: row;
  -ms-flex-direction: row;
  /* IE 9 */
  -moz-flex-direction: row;
  /* Firefox */
  -webkit-flex-direction: row;
  /* Safari  Chrome */
  -o-flex-direction: row;
  /* Opera */
  justify-content: flex-end;
}

.tutorial-list-page .news-nav .tab-list li:not(:first-child) {
  margin-left: 50px;
}

.tutorial-list-page .news-nav .tab-list a {
  color: #2f2f2f;
}

.tutorial-list-page .news-nav .tab-list a:hover {
  opacity: 0.6;
}

.tutorial-list-page .news-nav .tab-list .active a {
  color: #e3c49d;
}

.tutorial-list-wrap {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  -ms-display: flex;
  /* IE 9 */
  -moz-display: flex;
  /* Firefox */
  -webkit-display: flex;
  /* Safari  Chrome */
  -o-display: flex;
  /* Opera */
  align-items: center;
  -ms-align-items: center;
  /* IE 9 */
  -moz-align-items: center;
  /* Firefox */
  -webkit-align-items: center;
  /* Safari  Chrome */
  -o-align-items: center;
  /* Opera */
  justify-content: flex-start;
  -ms-justify-content: flex-start;
  /* IE 9 */
  -moz-justify-content: flex-start;
  /* Firefox */
  -webkit-justify-content: flex-start;
  /* Safari  Chrome */
  -o-justify-content: flex-start;
  /* Opera */
  flex-direction: row;
  -ms-flex-direction: row;
  /* IE 9 */
  -moz-flex-direction: row;
  /* Firefox */
  -webkit-flex-direction: row;
  /* Safari  Chrome */
  -o-flex-direction: row;
  /* Opera */
}

.tutorial-item-wrap {
  width: 31%;
  margin-bottom: 0.4rem;
}

.tutorial-item-wrap:not(:nth-child(3n+1)) {
  margin-left: 3.5%;
}

.tutorial-item-wrap .img-box {
  width: 100%;
  height: 2.3rem;
  background-color: #EEEEEE;
  overflow: hidden;
}

.tutorial-item-wrap .img-box img {
  display: block;
  width: 100%;
  height: 100%;
}

.tutorial-item-wrap:hover .img-box img {
  transition: all 0.3s;
  -ms-transition: all 0.3s;
  /* IE 9 */
  -moz-transition: all 0.3s;
  /* Firefox */
  -webkit-transition: all 0.3s;
  /* Safari  Chrome */
  -o-transition: all 0.3s;
  /* Opera */
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* IE 9 */
  -moz-transform: scale(1.1);
  /* Firefox */
  -webkit-transform: scale(1.1);
  /* Safari  Chrome */
  -o-transform: scale(1.1);
  /* Opera */
}

.tutorial-item-wrap .tutorial-tit {
  font-size: 0.2rem;
  color: #2f2f2f;
  text-align: center;
  padding: 0.1rem 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 1px) and (max-width: 750px) {
  .center-box {
    width: 100%;
    padding: 0 0.22rem;
    box-sizing: border-box;
  }
  .tutorial-item-wrap {
    width: 49%;
    margin-bottom: 0.2rem;
  }
  .tutorial-item-wrap:not(:nth-child(3n+1)) {
    margin-left: 0;
  }
  .tutorial-item-wrap:nth-child(2n) {
    margin-left: 2%;
  }
  .tutorial-item-wrap .img-box {
    height: 2.18rem;
  }
  .tutorial-item-wrap .news-tit {
    font-size: 0.22rem;
  }
  .tutorial-list-page .section .section-title {
    font-size: 0.53rem;
    font-weight: 400;
  }
  .tutorial-list-page .news-nav {
    justify-content: flex-start;
    padding: 0.62rem 0 0.53rem 0;
  }
  .tutorial-list-page .news-nav .tab-list {
    font-size: 0.29rem;
    justify-content: center;
  }
  .tutorial-list-page .news-nav .tab-list li:not(:first-child) {
    margin-left: 0.44rem;
  }
  .tutorial-list-page .news-nav .tab-list a {
    color: #959494;
  }
  .tutorial-list-page .news-nav .tab-list .active a {
    color: #565656;
  }
}