.create-container {
	max-width: 768px;
	margin: 0 auto;
	padding-top: 20px;
}
.create-container .step {
	position: relative;
	width: 80%;
	margin: 0 auto 40px;
	--number-width: 80px;
	--number-border-width: 2px;
}
.create-container .step .number .item {
	width: var(--number-width);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	padding: 4px 0;
	text-align: center;
	border-radius: 50px;
	border: var(--number-border-width) solid rgba(70, 45, 225, 0.2);
}
.create-container .step .number .item.active {
	color: white;
	border-color: transparent;
	background: linear-gradient(90deg, #9963FF 0%, #2664FF 100%);
}
.create-container .step .number .line {
	flex: 1;
	height: 2px;
	opacity: 0.2;
	background-color: #462DE1;
}
.create-container .step .number .line.active {
	opacity: 1;
}
.create-container .step .label {
	position: relative;
	width: 100%;
	height: 20px;
	margin-top: 14px;
}
.create-container .step .label .item {
	position: absolute;
	color: rgba(0, 0, 0, 0.5);
	font-weight: 600;
	transform: translateX(calc(0px - (100% - var(--number-width)) / 2 + var(--number-border-width)));
}
.create-container .step .label-mobile {
	color: #462DE1;
	font-weight: 600;
	margin-top: 14px;
}
.create-container .step .label .item.active {
	color: #462DE1;
}
.create-container .step .label .item.pass {
	opacity: 0.5;
}
.create-container .step .label .item:nth-child(1) {
	left: calc(((100% - 4 * var(--number-width)) / 3 + var(--number-width)) * 0);
}
.create-container .step .label .item:nth-child(2) {
	left: calc(((100% - 4 * var(--number-width)) / 3 + var(--number-width)) * 1);
}
.create-container .step .label .item:nth-child(3) {
	left: calc(((100% - 4 * var(--number-width)) / 3 + var(--number-width)) * 2);
}
.create-container .step .label .item:nth-child(4) {
	left: calc(((100% - 4 * var(--number-width)) / 3 + var(--number-width)) * 3);
}
.create-container .title {
	font-size: 28px;
	font-weight: bold;
}
/*生成大纲*/
.create-container .outline .box {
	height: 420px;
	padding: 15px;
	overflow-y: scroll;
	border-radius: 10px;
	border: 1px solid #DEDFE5;
}
.create-container .outline .subject .text {
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	padding: 7px 10px;
	border: 1px solid transparent;
}
.create-container .outline .subject .text:hover {
	border: 1px solid #DEDFE5;
}
.create-container .outline .tree {
	margin-top: 10px;
}
.create-container .outline .line {
	--level-left: 25px;
	padding: 0 10px;
}
.create-container .outline .line:hover {
	background-color: #F6F5FA;
}
.create-container .outline .line:hover .text {
	border: 1px solid #DEDFE5;
}
.create-container .outline .line:before {
	content: '';
	width: 4px;
	height: 4px;
	background-color: rgba(0, 0, 0, 0.75);
}
.create-container .outline .line .text {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	padding: 7px 10px;
	margin: 0 20px 0 15px;
	border-radius: 5px;
	border: 1px solid transparent;
}
.create-container .outline .line[data-level=one] .text {
	font-weight: bold;
}
.create-container .outline .line[data-level=two]:before {
	margin-left: var(--level-left);
}
.create-container .outline .line[data-level=three]:before {
	margin-left: calc(var(--level-left) * 2);
}
.create-container .outline .line[data-level=four]:before {
	margin-left: calc(var(--level-left) * 3);
}
.create-container .outline .action {
	gap: 10px;
	opacity: 0;
}
.create-container .outline .line:hover .action {
	opacity: 1;
}
.create-container .outline .action .item {
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-size: 100% 100%;
}
.create-container .outline .action .item.addpeer {
	background-image: url(../../images/addpeer-line-icon.png);
}
.create-container .outline .action .item.addsub {
	background-image: url(../../images/addsub-line-icon.png);
}
.create-container .outline .action .item.delete {
	background-image: url(../../images/delete-line-icon.png);
}
.create-container .outline .loading {
	display: block;
	width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 10px;
    animation: outlineSpin 1.5s linear infinite;
}
@keyframes outlineSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*选择模板*/
.create-container .template .tab {
	border-radius: 5px;
	background-color: #F6F5FA;
}
.create-container .template .tab .item {
	color: rgba(0, 0, 0, 0.5);;
	font-size: 14px;
	cursor: pointer;
	padding: 8px 14px;
}
.create-container .template .tab .item.active {
	color: white;
	border-radius: 5px;
	background: linear-gradient(90deg, #9963FF 0%, #2664FF 100%);
	box-shadow: 0px 6px 20px 0px rgba(8, 0, 162, 0.3);
}
.create-container .template .tab .icon {
	width: 20px;
	height: 20px;
	margin-right: 6px;
	background-size: 100% 100%;
}
.create-container .template .all .icon {
	background-image: url(../../images/template-all-icon.png);
}
.create-container .template .collect .icon {
	background-image: url(../../images/template-collect-icon.png);
}
.create-container .template .custome .icon {
	background-image: url(../../images/cus-template-icon.png);
}
.create-container .template .all.active .icon {
	background-image: url(../../images/template-all-active-icon.png);
}
.create-container .template .collect.active .icon {
	background-image: url(../../images/template-collect-active-icon.png);
}
.create-container .template .custome.active .icon {
	background-image: url(../../images/cus-template-white-icon.png);
}
.create-container .template .option {
	display: flex;
}
.create-container .template .option .dropdown {
	max-width: unset;
}
.create-container .template .list {
	height: 420px;
	margin-top: 20px;
	overflow-y: auto;
	border-radius: 10px;
	border: 1px solid #DEDFE5;
}
.create-container .template .list .box {
	display: grid;
	gap: 20px;
	align-content: start;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 15px;
}
.create-container .template .list .empty-img {
	display: none;
	width: 200px;
	height: 154px;
}
.create-container .template .loading {
	display: flex;
}
.create-container .template .loading .img {
	width: 30px;
    height: 30px;
    animation: outlineSpin 1.5s linear infinite;
}
.create-container .template .list.list-empty, .create-container .template .list.list-loading {
	display: flex;
	justify-content: center;
	align-items: center;	
}
.create-container .template .list.list-empty .empty-img {
	display: block;
}
.create-container .template .list.list-empty .box, .create-container .template .list.list-loading .box {
	display: none;
}
.create-container .template .list .item {
	align-self: start;
	aspect-ratio: 1 / 0.56;
	cursor: pointer;
	padding: 5px;
	border-radius: 20px;
    border: 2px solid transparent;
    box-shadow: 0px 3px 6px 1px rgba(92, 47, 209, 0.2);
}
.create-container .template .list .item.active {
    border: 2px solid #6033DB;
}
.create-container .template .list .cover {
	width: 100%;
	height: 100%;
	border-radius: 10px;
}
/*构建内容*/
.create-container .build .list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-height: 560px;
	padding: 15px;
	overflow-y: auto;
	border-radius: 10px;
	border: 1px solid #DEDFE5;
}
.create-container .build .list .item {
	width: 100%;
	border: 1px solid #DEDFE5;
}
.create-container .build .loading {
    position: relative;
    aspect-ratio: 1 / 0.56;
}
.create-container .build .loading .img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    animation: buildSpin 1.5s linear infinite;
}
@keyframes buildSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/*后退、前进按钮*/
.create-container .button-box {
	margin-top: 20px;
}
.create-container .button-box .btn-box {
	--btn-height: 54px;
	gap: 50px;
}
.create-container .button-box .icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.create-container .btn-cus {
	flex: 2;
	color: white;
	height: var(--btn-height);
	line-height: var(--btn-height);
	text-align: center;
	cursor: pointer;
	border-radius: 50px;
	background: linear-gradient(90deg, #9963FF 0%, #2664FF 100%);
}
.create-container .btn-cus.back {
	flex: 1;
	color: #462DE1;
	cursor: pointer;
	border: 2px solid rgba(70, 45, 225, 0.2);
	background: unset;
}
.create-container .build .button.download {
	display: none;
}
@media(max-width: 768px) {
	.create-container .build .button.preview {
		display: none;
	}
	.create-container .build .button.download {
		display: block;
	}
}
@media(max-width: 576px) {
	.create-container .step {
		width: 100%;
		margin-bottom: 20px;
	}
	.create-container .step .number .item {
		--number-width: 70px;
		font-size: 20px;
		font-weight: 500;
	}
	.create-container .step .label .item {
		font-size: 12px;
	}
	.create-container .outline .subject .text {
		font-size: 16px;
	}
	.create-container .outline .box {
		padding: 10px;
	}
	.create-container .outline .line {
	    --level-left: 15px;
	}
	.create-container .outline .line .text {
		font-size: 12px;
		padding: 5px 8px;
		margin: 0 10px 0 10px;
	}
	.create-container .outline .action {
		opacity: 1;
	}
	.create-container .template .list .box {
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 10px;
	}
	.create-container .build .list {
		gap: 10px;
	    grid-template-columns: repeat(1, minmax(0, 1fr));
	    padding: 10px;
	}
	.create-container .build .loading .img {
		width: 40px;
    	height: 40px;
	}
	.create-container .button-box .btn-box {
		position: fixed;
	    width: 100%;
	    left: 0;
	    bottom: 0;
	    padding: 10px;
	    background-color: white;
	}
	.create-container .button-box .btn-box {
		--btn-height: 42px;
		gap: 20px;
	}
	.create-container .button-box .icon {
		width: 18px;
	    height: 18px;
	    margin-right: 5px;
	}
	.create-container .btn-cus.back {
		flex: 2;
		font-size: 14px;
	}
	.create-container .btn-cus.next {
		font-size: 14px;
	}
}