.page-theme .top-view{
  width: 100%;
  height: 416px;
  background: #eaeef6;
  box-sizing: content-box
}

.top-content-view{
  width: 1440px;
  position: relative;
  height: 100%;
  box-sizing: content-box
}
.section-banner_img-arrow{
  height: 311px;
  width: 460px;
  position: absolute;
  left: 101px;
  top: 60px;
}
.top-left-view .top-left-title{
  margin: 0;
  font-weight: 500;
  font-size: 40px;
  line-height: 56px;
  color: #323233;
  text-align: left;
}
.top-left-view .top-left-desc{
  margin-top: 24px;
  font-weight: 400;
  font-size: 24px;
  line-height: 34px;
  color: #323233;
}
.top-right-view img{
  height: 272px;
  width: 710px;
  padding: 0 60px 0 24px;
}

.templates-list-view{
  width: 100%
}
.templates-content-view{
  width: 1440px;
  padding: 0 120px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}
.templates-content-view .change-template-view{
  height: 84px;
}
.templates-content-view .change-template-view button{
  margin-right: 24px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #323233;
  opacity: .5;
}
.templates-content-view .change-template-view button.is-check{
  color: #2654ff;
  opacity: 1;
}
.templates-list{
  display: grid;
  -ms-grid-columns: 384px 24px 384px 24px 384px;
  grid-template-columns: repeat(3,384px);
  -ms-grid-rows: 360px;
  grid-template-rows: 360px;
  grid-row-gap: 40px;
  grid-column-gap: 24px;
}
.template-item {
  display: flex;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 8px;
  position: relative;
  border: 0.5px solid #dcdee0;
}
.template-item .img-container{
  width: 100%;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}
.theme-title{
  height: 60px;
  padding: 16px 0 0 24px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #000;
}
.template-item .mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}
.template-item .mask .mask_pre-look{
  width: 92px;
  height: 36px;
  text-align: center;
  background: #2654ff;
  border-radius: 4px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 36px;
  color: #fff;
}
.template-item:hover .mask{
  opacity: 1;
}

.template-item:hover .img-container img{
  transform: scale(1.2);
  transition: transform .5s,-webkit-transform .5s
}

.pagination-content{
  margin: 53px 0;
}

.pagination-content .pagination-list li{
  padding: 0 8px;
  min-width: 32px;
  margin-left: 4px;
  font-size: 14px;
  color: #323233;
  height: 32px;
  line-height: 30px;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}
.pagination-content .pagination-list li:first-child{
  margin-left: 0
}
.pagination-content .pagination-list li.is-check{
  border-color: #2654ff;
  background-color: #2654ff;
  color: #fff
}
.pagination-content .pre-btn img{
  width: 9px
}
.pagination-content .next-btn img{
  width: 9px
}
.pagination-content .pre-btn img.needTransform{
  transform: rotate(180deg)
}
.pagination-content .next-btn img.needTransform{
  transform: rotate(180deg)
}

.moblie-templates-list .template-item .img-container{
  height: 500px;
}
.moblie-templates-list .template-item .img-container img{
  height: 100%;
}
.moblie-templates-list{
  -ms-grid-columns: 282px 24px 282px 24px 282px 24px 282px;
  grid-template-columns: repeat(4,282px);
  -ms-grid-rows: 560px;
  grid-template-rows: 560px;
  grid-row-gap: 40px;
  grid-column-gap: 24px;
}


@media screen and (max-width: 1440px){
  .page-theme .top-view{
    height: 320px;
  }
  .top-content-view{
    width: 768px;
  }
  .section-banner_img-arrow{
    height: 174px;
    width: 258px;
    position: absolute;
    left: 16px;
    top: 72px;
  }
  .top-left-view{
    padding-left: 32px;
  }
  .top-left-view .top-left-title{
    font-size: 28px;
    line-height: 39px;
    padding: 0!important;
    text-align: left!important;
  }
  .top-left-view .top-left-desc{
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
  }
  .top-right-view img{
    height: 169px;
    width: 440px;
    padding: 0 40px 0 24px;
  }

  .templates-content-view{
    width: 768px;
    padding: 0 24px;
  }
  .templates-list{
    -ms-grid-columns: 348px 24px 348px;
    grid-template-columns: repeat(2,348px);
    -ms-grid-rows: 342px;
    grid-template-rows: 342px;
    grid-row-gap: 32px;
    grid-column-gap: 24px;
  }
  .template-item .img-container{
    height: 282px;
  }
  .theme-title{
    height: 60px;
    padding: 16px 0 0 24px;
    font-size: 14px;
    line-height: 20px;
  }
  .moblie-templates-list .template-item .img-container{
    height: 398px;
  }
  .moblie-templates-list{
    -ms-grid-columns: 224px 24px 224px 24px 224px;
    grid-template-columns: repeat(3,224px);
    -ms-grid-rows: 458px;
    grid-template-rows: 458px;
    grid-row-gap: 32px;
    grid-column-gap: 24px;
  }
}


/* ipa */
@media screen and (min-width: 769px) and (max-width: 960px) {
 
}


/* 移动端 */
@media screen and (max-width: 767px) {
  .top-content-view{
    height: 77.33333vw;
    width: 100%
  }
  .top-left-view{
    padding: 0 24px
  }
  .top-left-view .top-left-title{
    font-size: 24px;
    line-height: 34px;
    text-align: center !important
  }
  .top-left-view .top-left-desc{
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .section-banner_img-arrow{
    height: 67.46667vw!important;
    width: 100vw!important;
    position: absolute!important;
    left: 0!important;
    top: 4.8vw!important;
    z-index: 2;
  }
  .top-right-view img{
    height: -webkit-calc(38.2263vw - 18.34862px);
    height: calc(38.2263vw - 18.34862px);
    width: -webkit-calc(100vw - 48px);
    width: calc(100vw - 48px);
    position: relative;
    top: 0;
    right: 0;
    margin-top: 23px;
    box-sizing: content-box
  }
  .templates-content-view .change-template-view{
    height: 60px
  }
  .templates-content-view .change-template-view button{
    font-size: 14px;
  }
  .templates-list{
    -ms-grid-columns: -webkit-calc(50vw - 24px) 16px -webkit-calc(50vw - 24px);
    -ms-grid-columns: calc(50vw - 24px) 16px calc(50vw - 24px);
    grid-template-columns: repeat(2,-webkit-calc(50vw - 24px));
    grid-template-columns: repeat(2,calc(50vw - 24px));
    -ms-grid-rows: -webkit-calc(40.2439vw + 25.68293px);
    -ms-grid-rows: calc(40.2439vw + 25.68293px);
    grid-template-rows: -webkit-calc(40.2439vw + 25.68293px);
    grid-template-rows: calc(40.2439vw + 25.68293px);
    grid-row-gap: 16px;
    grid-column-gap: 16px;
  }
  .template-item .img-container{
    height: -webkit-calc(40.2439vw - 19.31707px);
    height: calc(40.2439vw - 19.31707px);
  }
  .templates-content-view{
    width: 100%;
    padding: 0 16px
  }
  .moblie-templates-list .template-item .img-container{
    height: calc(91.46341vw - 43.90244px);
  }
  .moblie-templates-list{
    -ms-grid-columns: -webkit-calc(50vw - 24px) 16px -webkit-calc(50vw - 24px);
    -ms-grid-columns: calc(50vw - 24px) 16px calc(50vw - 24px);
    grid-template-columns: repeat(2,-webkit-calc(50vw - 24px));
    grid-template-columns: repeat(2,calc(50vw - 24px));
    -ms-grid-rows: -webkit-calc(91.46341vw + 1.09756px);
    -ms-grid-rows: calc(91.46341vw + 1.09756px);
    grid-template-rows: -webkit-calc(91.46341vw + 1.09756px);
    grid-template-rows: calc(91.46341vw + 1.09756px);
    grid-row-gap: 16px;
    grid-column-gap: 16px;
  }
}