/* Webkit-based browsers */
/* Older Firefox browsers (prior to firefox 16) */
/* The standard way */
body { min-width: 1400px; padding-top: 84px; background: #f3f6f5; overflow-x: hidden; }

ul { margin: 0; padding: 0; list-style: none; }

#app { width: 1350px; margin: 0 auto; }

@media (min-width: 1400px) { #app { width: 100vw; max-width: 1664px; } }

.part-1 { padding-top: 10px; padding-left: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.part-1 .link { width: 100px; height: 60px; font-size: 24px; text-align: center; color: #aeb2b4; line-height: 60px; }

.part-1 .link + .link { margin-left: 20px; }

.part-1 .link.active { font-weight: bold; color: #5ab793; position: relative; }

.part-1 .link.active::after { content: ""; width: 100%; height: 2px; background: #0fc174; position: absolute; left: 0; bottom: 0; }

.part-1 .form-box { width: 330px; height: 40px; margin-left: auto; padding: 0 20px; background: #ffffff; border: 1px solid #e7f0ed; border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; }

.part-1 .form-box input, .part-1 .form-box button { border: none; -webkit-box-shadow: none; box-shadow: none; outline: none; }

.part-1 .form-box .input-box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 38px; }

.part-1 .form-box .search-button { width: 38px; height: 38px; }

.part-2 { padding: 0 30px; background: white; border-radius: 4px; }

.part-2 .type-line { padding: 20px 0 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 16px; line-height: 26px; }

.part-2 .type-line + .type-line { border-top: 1px solid #eef2f4; }

.part-2 .type-line .type-name { -ms-flex-preferred-size: 70px; flex-basis: 70px; color: #888; }

.part-2 .type-line .type-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; color: #333; }

.part-2 .type-line .type-content .type-item { cursor: pointer; padding: 0 10px; margin-right: 20px; margin-bottom: 10px; }

.part-2 .type-line .type-content .type-item.active { background: #0bbc81; color: white; border-radius: 4px; }

.part-2 .el-input__inner { border: none; height: 26px; line-height: 26px; }

.part-2 .el-input__icon { line-height: 26px; }

.part-3 { min-height: 300px; margin: 30px -16px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.part-3 .template-item { width: 257.2px; margin-right: 16px; margin-bottom: 20px; padding: 4px; border-radius: 4px; }

@media (min-width: 1400px) { .part-3 .template-item { width: 320px; } }

.part-3 .template-item:hover { background: #fff; -webkit-box-shadow: 0 2px 6px 4px rgba(54, 65, 55, 0.2); box-shadow: 0 2px 6px 4px rgba(54, 65, 55, 0.2); }

.part-3 .template-item .template-cover { width: 100%; border-radius: 4px; overflow: hidden; }

.part-3 .template-item .template-cover img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; }

.part-3 .template-item .template-info { height: 40px; padding: 0 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.part-3 .template-item .template-info .template-name { width: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.part-3 .template-item .template-info .el-icon-star-on, .part-3 .template-item .template-info .el-icon-star-off { -ms-flex-negative: 0; flex-shrink: 0; font-size: 18px; cursor: pointer; }

.part-3 .template-item .template-info .el-icon-star-off { color: #333; }

.part-3 .template-item .template-info .el-icon-star-on { color: #ff9900; }

.part-3 .template-item.horizontal .template-cover { height: 140.175px; }

@media (min-width: 1400px) { .part-3 .template-item.horizontal .template-cover { height: 175.5px; } }

.part-3 .template-item.vertical .template-cover { height: 443.02222px; }

@media (min-width: 1400px) { .part-3 .template-item.vertical .template-cover { height: 554.66667px; } }

.el-pagination.is-background { margin: 30px 0; }

.el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #0bbc81; }

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li { height: 30px; border: 1px solid #d3e4de; }
/*# sourceMappingURL=template.css.map */