* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   html {
     font-size: 10px;
     scrollbar-gutter: stable;
   }

   img {
     max-width: 100%;
   }

   main {
     padding: 5rem 2rem;
     max-width: 144rem;
     margin: 0 auto;
     font-size: 1.4rem;
   }

   .template-grid {
     padding: 2rem 0;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 2rem;
   }

   .template-grid .template-item {}

   .template-item .layui-card {}

   .template-item .layui-card .item-thumb {
     position: relative;
     width: 100%;
     padding-bottom: 100%;
     overflow: hidden;
   }

   .template-item .layui-card .item-thumb img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .template-item .item-info {
     padding: 1.2rem 1rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     border-left: .1rem solid #eee;
     border-right: .1rem solid #eee;
     font-size: 1.4rem;
   }

   .template-item .item-title {}

   .template-item .item-bianhao {
     color: #f00;
   }

   .template-item .item-btn-group {
     padding: 0 1rem 1.2rem 1rem;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.2rem;
     border-left: .1rem solid #eee;
     border-right: .1rem solid #eee
   }

   .template-item .item-preview {
     background-color: #f97934;
     display: block;
     line-height: 3.5rem;
     color: #fff;
     font-size: 1.4rem;
     text-align: center;
     text-decoration: none;
   }

   .template-item .item-copy {
     cursor: pointer;
     background-color: #f97934;
     display: block;
     line-height: 3.5rem;
     color: #fff;
     font-size: 1.4rem;
     text-align: center;
   }

   #pages {}

   #pages .layui-box {
     display: flex;
     justify-content: start;
     gap: 0.1rem;
   }

   #pages a,
   #pages span {
     display: inline-block;
     padding: 0 1rem;
     background-color: #eee;
     color: #333;
     font-size: 1.4rem;
     height: 2.8rem;
     line-height: 2.8rem;
     margin: 0;
   }

   #pages a {
     cursor: pointer;
   }

   #pages span {
     background-color: #f97934;
     color: #fff;
   }

   #pages .layui-laypage-em {
     display: none;
   }

   #pages em {
     font-style: normal;
   }

   .layui-disabled,
   .layui-disabled:hover {
     color: #d2d2d2 !important;
     cursor: not-allowed !important;
   }

   .category {
     display: flex;
     gap: 1.5rem;
     align-items: center;
     padding-top: 1rem
   }

   .category .category-header {
     white-space: nowrap;
     font-weight: 600;
     width: 6rem;
     flex-shrink: 0;
   }

   .category-list {
     display: flex;
     justify-content: start;
     gap: 2rem;
     align-items: center;
     padding-left: 1.5rem;
     border-left: .1rem solid #eee;
     flex: 1;

   }

   .category-list span {
     cursor: pointer;
     padding: .3rem 0.8rem;
     border: 0.1rem solid #fff;
     color: #666;
   }

   .category-list span.on,
   .category-list span:hover {
     color: #f98d53;
     text-decoration: none;
     background: #fff none repeat scroll 0 0;
     border: 0.1rem solid #f98d53;
   }

   .category-list .category-list-all {
     flex-shrink: 0;
   }

   .category-list .category-list-content {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, 17rem);
     gap: 0.5rem;
   }

   .layui-layer-msg {
     position: fixed;
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
     background-color: rgba(0, 0, 0, .6);
     min-width: 10rem;
     color: #fff;
     text-align: center;
     font-size: 1.4rem;
     line-height: 3;
     border-radius: 0.3rem;
   }

   .search {
     /* max-width: 40rem;
      margin: 0 auto; */
     /* padding-bottom: 2rem; */
     border-bottom: .1rem solid #eee;
   }

   .search .category-header {
     padding-bottom: 1rem;
   }

   .search .search-input {
     display: flex;
     gap: 1.2rem;
     position: relative;
     padding-left: 1.5rem;
     border-left: .1rem solid #eee;
     padding-bottom: 1rem;
   }

   .search-input .clear-btn {
     position: absolute;
     right: 8rem;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     font-size: 2rem;
     cursor: pointer;
     color: #999;
     width: 3rem;
     height: 3rem;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .search .search-input input {
     flex: 1;
     padding: 1rem;
     border: 0.1rem solid #eee;
     border-radius: 0.3rem;
     color: #666;
   }

   .search .search-input .search-btn {
     padding: 1rem 2rem;
     background-color: #f97934;
     color: #fff;
     font-size: 1.4rem;
     border: 0.1rem solid #f97934;
     border-radius: 0.3rem;
   }

   .layui-form-select dl dd.layui-this {
     color: #f97934;
   }

   .layui-input:focus {
     border: 0.1rem solid #f97934 !important;
   }

   @media screen and (max-width: 1200px) {
     .template-grid {
       grid-template-columns: repeat(3, 1fr);
     }
   }

   @media screen and (max-width: 991px) {
     .template-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .category-list {
       display: none !important;
     }

     .search .category-header {
       display: none;
     }

     .search .search-input {
       border-left: 0;
       padding-left: 0;
     }

     .category {
       justify-content: center;
     }
   }

   @media screen and (min-width: 992px) {
     .layui-form {
       display: none;
     }
   }