@charset "utf-8";
.video,
.video-upload-main {
	position: relative
}

.video-preview,
.video-preview video {
	max-width: 100%
}
.video-preview{width: 400px;display: inline-block}
.video {
	height: 100%;
	min-height: 424px !important;
	margin-bottom: 30px;
	padding-top: 30px;
}

.video-upload-wrap {
	text-align: center;
	position: relative;
	top: 50%;
	margin-top: 90px
}

.video-upload-container {
	display: inline-block;
	padding: 35px;
	border: 5px dashed #262626
}

.video-upload-btn {
	width: 385px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	background: #1E9FFF;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s
}

.video-upload-main:hover .video-upload-btn {
	background: #5e12fb
}

.video-upload-file {
	position: absolute
}

.video-upload-tip {
	padding-top: 20px;
	font-size: 14px;
	color: #666
}

.video-preview-wrap {
	text-align: center
}

.video-preview {
	display: inline-block
}

.video-model2,
.video.preview .video-model1 {
	display: none
}

.video.preview {
	height: auto
}

.video.preview .video-model2 {
	display: block
}

.video-setting {
	width: 620px;
	margin: 40px auto 0;
	/* overflow: hidden; */
}

.video-time {
	float: left;
	width: 360px
}

.video-frame {
	float: right;
	width: 230px
}

.com-input-avatar {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0)
}

.com-wrap {
	min-width: 1200px
}

.com-main {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	background: #f9f9f9;
}

.com-nav {
	float: right
}

.com-nav li {
	display: inline
}

.com-nav li a {
	display: inline-block;
	height: 90px;
	line-height: 90px;
	padding: 0 35px;
	color: #ddd;
	position: relative;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s
}

.com-nav li .nav-line,
.factory-btns .btn {
	-webkit-transition: .2s;
	-o-transition: .2s
}

.com-nav li .nav-line {
	position: absolute;
	left: 35px;
	right: 35px;
	bottom: 0;
	height: 5px;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxkZWZzPg0KICAgICAgICA8bGluZWFyR3JhZGllbnQgeTI9IjAiIHgyPSIxIiB5MT0iMCIgeDE9IjAiIGlkPSJzdmdfMiI+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2EwMGZmIiBvZmZzZXQ9IjAiPjwvc3RvcD4NCiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM1YjAwZmYiIG9mZnNldD0iMSI+PC9zdG9wPg0KICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDwvZGVmcz4NCiAgICA8Zz4NCiAgICAgICAgPHJlY3QgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIgZmlsbD0idXJsKCNzdmdfMikiPjwvcmVjdD4NCiAgICA8L2c+DQo8L3N2Zz4=);
	opacity: 0;
	filter: alpha(opacity=0);
	transition: .2s
}

.com-nav li a:hover,
.com-nav li.focus a {
	color: #fff
}

.com-nav li a:hover .nav-line,
.com-nav li.focus .nav-line {
	opacity: 1
}

.com-logo {
	float: left;
	width: 230px;
	height: 70px;
	text-indent: -5000px;
	overflow: hidden;
	background: url(logowhite.png) no-repeat;
	margin-top: 20px;
}

.com-logo a {
	display: block;
	height: 100%
}

.com-tools-list {
	padding: 10px 0
}

.com-tools-list li {
	float: left;
	margin-right: 8px
}

.com-tools-list li a {
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 25px;
	background: #1b1b1b;
	font-size: 16px;
	color: #999;
	border-radius: 1px
}

.com-tools-list li a:hover,
.com-tools-list li.focus a {
	color: #fff;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8ZGVmcz4NCiAgICAgICAgPGxpbmVhckdyYWRpZW50IHkyPSIxIiB4Mj0iMSIgeTE9IjAiIHgxPSIwIiBpZD0ic3ZnXzIiPg0KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2NjMDBmZiIgb2Zmc2V0PSIwIj48L3N0b3A+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNWEwMGZmIiBvZmZzZXQ9IjEiPjwvc3RvcD4NCiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8L2RlZnM+DQogICAgPGc+DQogICAgICAgIDxyZWN0IGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9InVybCgjc3ZnXzIpIj48L3JlY3Q+DQogICAgPC9nPg0KPC9zdmc+)
}

.com-body {
	padding-bottom: 50px;
	background: #000;
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
	bottom: 88px;
	z-index: 1
}

.com-body .com-main {
	min-height: 1200px;
	background: #1b1b1b
}

.factory-setting .line {
	height: 20px;
	position: relative;
	background: #f0f3f4
}

.factory-setting .progress {
	height: 100%;
	position: absolute;
	background: #1E9FFF;
	z-index: 1
}

.factory-setting .text {
	padding-top: 15px;
	font-size: 14px;
	color: #999
}

.factory-btns {
	margin-top: 40px;
	overflow: hidden;
}

.factory-btns .btn {
	float: right;
	height: 40px;
	line-height: 40px;
	padding: 0 25px;
	margin-left: 8px;
	cursor: pointer;
	transition: .2s
}

.factory-btns .btn.style1 {
	border: 1px solid #333;
	color: #1E9FFF
}

.factory-btns .btn.style1:hover {
	border-color: #1E9FFF
}

.factory-btns .btn.style2 {
	background: #1E9FFF;
	color: #fff
}

.factory-btns .btn.style2:hover {
	background: #5e12fb
}

.factory-btns .btn.disabled,
.factory-btns .btn.disabled:hover {
	border: none;
	background: #666
}

.factory-btns .btn.disabled {
	color: #b9b9b9
}

.com-options {
	width: 265px;
	padding: 40px;
	background: #262626;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0
}

.com-worker {
	width: 815px;
	float: left;
	/* margin-left: 345px; */
	/* padding: 0 20px */
}

.opts-item {
	color: #999
}

.opts-item dt {
	font-size: 14px
}

.opts-item dd {
	padding: 16px 0
}

.opts-item dd span {
	float: left;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	margin: 0 15px 15px 0;
	font-size: 12px;
	border: 1px solid #999;
	cursor: pointer
}

.opts-item dd span.active,
.opts-item dd span:hover {
	border-color: #c0f;
	color: #c0f
}

.opts-item dd input {
	width: 100%;
	margin-bottom: 15px
}

.view-list {
	max-width: 1200px;
	margin-top: 40px;
	overflow: hidden
}

.view-list ul {
	width: 912px;
	margin: 0 auto;
}

.view-list li {
	width: 213px;
	margin: 0 15px 15px 0;
	float: left;
	position: relative;
	text-align: center;
	background: #000;
	overflow: hidden
}

.view-list li .view-item-image {
	height: 130px;
	line-height: 130px;
	overflow: hidden
}

.view-list li img {
	max-width: 100%;
	vertical-align: middle
}

.view-list li a {
	display: block;
	line-height: 30px;
	color: #fff;
	font-size: 15px;
	background: #1E9FFF;
	position: relative;
	z-index: 2
}

.com-footer,
.view-list li .delete-btn {
	text-align: center;
	position: absolute;
	right: 0
}

.view-list li .delete-btn {
	display: none;
	width: 28px;
	height: 28px;
	line-height: 28px;
	background: #838383;
	top: 0;
	cursor: pointer;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
	z-index: 3
}

.view-list li:hover .delete-btn {
	display: block
}

.view-list li .delete-btn .layui-icon-close {
	font-size: 18px;
	color: #fff
}

.view-list li .delete-btn:hover {
	background: #1E9FFF;
}

.com-footer {
	display: none;
	padding: 35px 0;
	background: #1b1b1b;
	font-size: 12px;
	color: #555;
	left: 0;
	bottom: 0
}

.compose,
.compose-upload-main {
	position: relative
}

.compose {
	height: 100%;
	min-height: 424px !important;
	padding: 20px;
	margin-bottom: 30px
}

.compose-model2 {
	display: none
}

.compose-speed .fast,
.compose-speed .slow,
.compose-speed-line {
	display: inline-block
}

.compose-upload-wrap {
	text-align: center;
	position: relative;
	top: 50%;
	margin-top: 90px
}

.compose-upload-container {
	display: inline-block;
	padding: 35px;
	border: 5px dashed #262626
}

.compose-upload-btn {
	width: 385px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	background: #6418ff;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s
}

.compose-upload-main:hover .compose-upload-btn {
	background: #5e12fb
}

.compose-upload-file {
	position: absolute
}

.compose-upload-tip {
	padding-top: 20px;
	font-size: 14px;
	color: #666
}

.compose-preview {
	line-height: 0;
	text-align: center
}

.compose-preview canvas {
	max-width: 100%
}

.compose-speed {
	width: 450px;
	height: 30px;
	margin: 40px auto 0;
	text-align: center;
	line-height: 38px
}

.compose-speed-line {
	width: 350px;
	margin: 0 10px
}

.factory-btns {
	margin: 60px 0
}

.view-list .info {
	line-height: 27px;
	background: #6418ff;
	text-align: left
}

.view-list .info:after {
	display: block;
	content: '';
	clear: both
}

.view-list .index {
	width: 35px;
	float: left;
	border: none;
	border-radius: 0
}

.view-list .name {
	width: 173px;
	height: 27px;
	padding-left: 8px;
	float: left;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
	font-size: 14px
}

.compose.preview {
	height: auto
}

.compose.preview .compose-model2 {
	display: block
}

.compose.preview .compose-model1 {
	display: none
}

img {
	max-width: 100%;
	border: none;
}

.cut,
.cut-upload-main,
.cut-upload-wrap {
	position: relative
}

.cut {
	height: 100%;
	min-height: 424px !important;
	padding: 20px;
	margin-bottom: 30px
}

.cut-model2 {
	display: none
}

.cut-upload-wrap {
	text-align: center;
	top: 50%;
	margin-top: 90px
}

.cut-upload-container {
	display: inline-block;
	padding: 35px;
	border: 5px dashed #262626
}

.cut-upload-tip {
	padding-top: 20px;
	font-size: 14px
}

.cut-upload-btn {
	width: 385px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	background: #6418ff;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s
}

.cut-upload-main:hover .cut-upload-btn {
	background: #5e12fb
}

.cut-upload-file {
	position: absolute
}

.cut-upload-tip {
	color: #666
}

.cut-preview,
.cut-source {
	/* float: left; */
	width: 440px;
	min-height: 300px;
	position: relative;
	overflow: hidden;
	line-height: 295px;
	text-align: center;
	margin-top:40px;
}
.cut-source{margin-right: 40px;}
.cut-preview-hole,
.cut-source-block {
	line-height: 0;
	vertical-align: middle
}

.cut-preview:after,
.cut-source:after {
	display: block;
	content: '';
	position: absolute;
	width: 300%;
	top: -100%;
	left: -100%;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAANCAIAAADntZOlAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMTgxNGE4ZC1iNzMzLTRlOTEtYmUwMC01YTExYmFhYmQzMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTEzNDUxQjA5QUUzMTFFNzhFRTJGQzlDNjlEMDhGMUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTEzNDUxQUY5QUUzMTFFNzhFRTJGQzlDNjlEMDhGMUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNDI1MjY3OS0wZmY1LTRiZmYtYWJlYi1kMDQzMTYyZDcxMmQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZTE4MTRhOGQtYjczMy00ZTkxLWJlMDAtNWExMWJhYWJkMzMyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Bxux/QAAACFJREFUeNpifvfuHRMIMDAwYMX//v1j+vTpE5wPBAABBgDtHAjCPdaf3wAAAABJRU5ErkJggg==) #fff;
	height: 300%;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 2
}

.cut-source-block {
	display: inline-block;
	position: relative;
	z-index: 3
}

.cut-source-mask {
	position: absolute;
	background: rgba(0, 0, 0, .5);
	z-index: 4
}

.cut-source-hole {
	position: absolute;
	cursor: move
}

.cut-source-hole .border {
	position: absolute;
	z-index: 5
}

.cut-source-hole .border1,
.cut-source-hole .border3 {
	width: 100%;
	height: 3px;
	left: 0;
	cursor: n-resize;
	background: url(data:image/gif;base64,R0lGODlhBgABAKEAAP///wAAADY2Nv///yH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACwAAAAABgABAAACA4SFBQA7) center 1px repeat-x
}

.cut-source-hole .border1 {
	top: -1px
}

.cut-source-hole .border3 {
	bottom: -1px
}

.cut-source-hole .border2,
.cut-source-hole .border4 {
	height: 100%;
	width: 3px;
	top: 0;
	cursor: w-resize;
	background: url(data:image/gif;base64,R0lGODlhAQAGAKEAAP///wAAADY2Nv///yH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACwAAAAAAQAGAAACA4SFBQA7) 1px center repeat-y
}

.cut-source-hole .border2 {
	right: -1px
}

.cut-source-hole .border4 {
	left: -1px
}

.cut-source-hole-bar {
	position: absolute;
	width: 8px;
	height: 8px;
	border: 1px solid #000;
	background: #fff;
	opacity: .5;
	z-index: 6
}

.cut-source-hole-bar.bar1 {
	top: 0;
	left: 0;
	cursor: nw-resize
}

.cut-source-hole-bar.bar2 {
	top: 0;
	left: 50%;
	margin-left: -4px;
	cursor: n-resize
}

.cut-source-hole-bar.bar3 {
	top: 0;
	right: 0;
	cursor: sw-resize
}

.cut-source-hole-bar.bar4 {
	top: 50%;
	right: 0;
	margin-top: -4px;
	cursor: w-resize
}

.cut-source-hole-bar.bar5 {
	right: 0;
	bottom: 0;
	cursor: nw-resize
}

.cut-source-hole-bar.bar6 {
	bottom: 0;
	left: 50%;
	margin-left: -4px;
	cursor: n-resize
}

.cut-source-hole-bar.bar7 {
	bottom: 0;
	left: 0;
	cursor: sw-resize
}

.cut-source-hole-bar.bar8 {
	top: 50%;
	left: 0;
	margin-top: -4px;
	cursor: w-resize
}

.fixed-size .bar2,
.fixed-size .bar4,
.fixed-size .bar6,
.fixed-size .bar8,
.fixed-size .border {
	cursor: default
}

.fixed-size .bar2,
.fixed-size .bar4,
.fixed-size .bar6,
.fixed-size .bar8 {
	display: none
}

.cut-preview {
	margin-left: 15px
}

.cut-preview-hole {
	display: inline-block;
	position: relative;
	overflow: hidden
}

.cut-preview-img {
	position: absolute;
	z-index: 4;
	max-width: 440px;
	width: auto !important
}

.factory-btns {
	margin: 60px 0
}

.view-item-image {
	position: relative
}

.view-item-image:after {
	display: block;
	content: '';
	position: absolute;
	width: 300%;
	top: -100%;
	left: -100%;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAANCAIAAADntZOlAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMTgxNGE4ZC1iNzMzLTRlOTEtYmUwMC01YTExYmFhYmQzMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTEzNDUxQjA5QUUzMTFFNzhFRTJGQzlDNjlEMDhGMUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTEzNDUxQUY5QUUzMTFFNzhFRTJGQzlDNjlEMDhGMUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNDI1MjY3OS0wZmY1LTRiZmYtYWJlYi1kMDQzMTYyZDcxMmQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZTE4MTRhOGQtYjczMy00ZTkxLWJlMDAtNWExMWJhYWJkMzMyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Bxux/QAAACFJREFUeNpifvfuHRMIMDAwYMX//v1j+vTpE5wPBAABBgDtHAjCPdaf3wAAAABJRU5ErkJggg==) #fff;
	height: 300%;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.view-item-image img {
	position: relative;
	z-index: 1
}

.cut-info {
	color: #2f3c4d;
	text-align: center;
	font-size: 16px;
	line-height: 35px;
	margin-right: 20px;
}

.cut.preview {
	height: auto
}

.cut.preview .cut-model2 {
	display: block
}

.cut.preview .cut-model1 {
	display: none
}