.upload-content,.tools-toggle-outer,nav,.tail,.preview-content,.config-content,.tools-toggle-outer,.handle-wrap,.gifmake-tool,.followright,.video-area{
	pointer-events: auto;
}

.top-right span{
    color:#000;
}


.body-content{
    margin:0 auto;
    width:1030px;
}

.tools-toggle-outer{
    /*background:#333333;*/
    color:white;
    overflow: auto;
}
.tools-toggle-inner{
    padding-top:10px;
    background: #333333;
    height: 55px;
    margin-top: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.toggle-content{
    cursor: pointer;
    text-align: center;
    float: left;
    width: 20%;
    /*width:33.333%;*/
    height: 100%;
    line-height: 40px;
}
.toggle-content div{
    height: 55px;
    line-height: 55px;
    width: calc(100% - 20px);
    margin: 0 auto;
}
.toggle-active{
    color: black;
    background-color: #f6e710;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.cut-line{
    background-color:#f6e710;
    width:100%;
    height:2px;
}
.upload_btn{
	background: #F75E5E;
}
.upload_btn img{
	height: 15px;
	margin-right: 5px;
	margin-top: -4px;
}
.uploadpic{
	width: 1100px;
	height: 324px;
	background: #f9f9f9;
	position: relative;
	margin: 20px auto;
}
.uploadpic:before {
    content: "";
    position: absolute;
    left: 922px;
    top: -32px;
}
/*鍥剧墖閫夋嫨妗�*/
.upload-content{
    /*background: #333;*/
    /*margin-top: 20px;*/
    /*margin-bottom: 24px;*/
    /*padding: 30px 130px 20px 130px;*/
    /*transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);*/ 
    border: 2px dashed transparent; 
    box-shadow: inset 0 0 20px rgba(246, 231, 16, 0);
    /*outline: 2px dashed;*/
    /*outline-color: rgba(246, 231, 16, 1);*/
    /*outline-offset: 0px;*/
	width: 738px;
	height: 244px;
	border-radius: 20px ;
	border: 4px dashed #CAD0D4;
	position: absolute;
	top: 40px;
	left: 142px;
}

.upload-content.active{
	/*width: 534px;*/
	/*height: 314px;*/
	/*margin: 60px auto 64.61px;*/
	margin-left: auto;
	margin-right: auto;
}

.upload-content-active{
	/*border: 4px dashed #f6e710;
	box-shadow: inset 0 0 50px rgba(246, 231, 16, .5), 0 0 50px rgba(246, 231, 16, .2);
    outline: 0px solid;
    outline-color: rgba(246, 231, 16, 0);
    outline-offset: 15px;*/
	animation: ucactive 2.5s cubic-bezier(0.19, 1, 0.22, 1) both infinite;
	box-shadow: inset 0 0 60px rgba(62, 194, 253, .6), 0 0 60px rgba(62, 194, 253, .3);
}

@keyframes ucactive {
  0% {
	border: 2px solid #3EC2FD;
	/*box-shadow: inset 0 0 50px rgba(246, 231, 16, .5), 0 0 50px rgba(246, 231, 16, .2);*/
    outline: 2px solid;
    outline-color: #3EC2FD;
    outline-offset: 15px;
  }
  50% {
    border: 2px solid transparent; 
    /*box-shadow: inset 0 0 20px rgba(246, 231, 16, 0);*/
    outline: 2px solid;
    outline-color: rgba(62, 194, 253, 1);
    outline-offset: 0px; 
  }
  100% {
	border: 2px solid #3EC2FD;
	/*box-shadow: inset 0 0 50px rgba(246, 231, 16, .5), 0 0 50px rgba(246, 231, 16, .2);*/
    outline: 2px solid;
    outline-color: #3EC2FD;
    outline-offset: 15px;
  }  
}

.upload-content .upload-button{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 134px;
	height: 47px;
	line-height: 47px;
	background: #F75E5E;
	font-size: 18px;
	font-family: MicrosoftYaHei;
	color: rgba(255,255,255,1) ;
	cursor: pointer;
	text-indent: 48px;
	border-radius: 4px;
}
.upload-content .upload-button img{
	width: 22px;
	height: 20px;
	/*background: deeppink;*/
	position: absolute;
	top: 14px;
	left: 16px;
}
.upload-tuozhuai{
	position: absolute;
	top: 64px;
	left: 306px;
	width: 120px;
	height: 23px;
	font-size: 20px;
	color: rgba(153,153,153,1) ;
	font-family: FZLTHK--GBK1-0;
}
.upload-tuozhuai.actives{
	position: absolute;
	top: 34%;
	left: 41.3%;
	width: 120px;
	height: 23px;
	font-size: 16px;
	color: rgba(153,153,153,1) ;
	font-family: FZLTHK--GBK1-0;
}
/*.upload-content input{
    font-size: 14px;
    background: #000;
    border: 1px solid #f6e710;
    border-radius: 5px;
    height: 50px;
    width: 580px;
    padding-left: 20px;
    
}*/
/*.upload-button{
    cursor:pointer;
    float: right;
    height: 54px;
    width: 200px;
    line-height: 54px;
    text-align: center;
    background: #f6e710;
    border-radius: 5px;
    color: #000;
}*/
.upload-msg{
    position: absolute;
    left: 50%;
    bottom: 20px;
    color: #707070;
    padding-left:30px;
    height: 25px;
    line-height: 35px;
    font-size: 15px;
    margin-left: -186px;
}
.upload-first{
	position: absolute;
    left: 50%;
    bottom: 20px;
    color: #707070;
    padding-left:30px;
    height: 25px;
    line-height: 35px;
    font-size: 15px;
    margin-left: -66px;
    display: none;
}
.upload-msg img{
    position: absolute;
    top: 7.5px;
    left:0;
}

.upload-url{
	width: 1030px;
	height: 54px;
	/*margin: 10px auto;*/
	/*margin-top: 24px;*/
}
.w-hide{
	visibility: hidden;
	opacity: 0;
}
/*.upload-url.actives{*/
	/*width: 534px;*/
	/*height: 32.4px;*/
	/*margin: 10px auto;*/
	/*margin-left: auto;*/
	/*margin-right: auto;*/
/*}*/
.upload-url input{
	width: 867px;
	height: 50px;
	line-height: 50px;
	float: left;
	border: 2px dashed rgba(230,227,227,1) ;
	background: rgba(255,255,255,1);
	text-indent: 18px;
}
.upload-url input::-webkit-input-placeholder{
	color: #999999;
	font-size: 20px;
}
.upload-url input.actives{
	/*width: 450.3px;*/
	/*height: 32.4px;*/
	/*line-height: 32.4px;*/
	border: 2px dashed rgba(230,227,227,1) ;
	background: rgba(255,255,255,1);
	text-indent: 10px;
}
.upload-url input::-webkit-input-placeholder{
    color: #D9D9D9;
    font-size: 18px;
    font-family: MicrosoftYaHei;
}
.upload-url input:-moz-placeholder,::-moz-placeholder{
    color: #D9D9D9;
    font-size: 18px;
    font-family: MicrosoftYaHei;
}
.upload-url input.actives::-webkit-input-placeholder{
	color: #D9D9D9;
    font-size: 14px;
    font-family: MicrosoftYaHei;
}
.upload-url input.actives:-moz-placeholder{
	color: #D9D9D9;
    font-size: 14px;
    font-family: MicrosoftYaHei;
}
.upload-url input.actives::-moz-placeholder{
	color: #D9D9D9;
    font-size: 14px;
    font-family: MicrosoftYaHei;
}
.dianji{
	width:120px;
	height:38px;
	line-height: 38px;
	text-align: center; 
	background:rgba(202,208,212,1);
	font-size: 22px;
	font-family: MicrosoftYaHei;
	color: rgba(255,255,255,1);
	cursor: pointer;
}
.dianji.actives{
	/*width:79.6px;*/
	/*height:32.4px;*/ 
	/*line-height: 32.4px;*/
	text-align: center;
	float: right;
	background: rgba(62,194,253,1);
	/*font-size: 12px;*/
}
/*鍚戝*/
.compress-guide{
    background: #333333;
    margin-top:20px;
    padding: 20px 0 30px 0;
}
.compress-guide img{
    padding-top:50px;
}
.guide-title{
    font-size: 18px;
    line-height: 25px;
}
.guide-subtitle{
    font-size: 15px;
    color:#B3B3B3;
}
.guide-subtitle > img {
    padding:0;
}
.guide-remind{
    padding-top:90px;
}

/*璀﹀憡*/
.warning-div{
	background: #666;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	color: white;
	font-size: 18px;
	line-height: 20em;
	display: none;
}
.warning-div.actives{
	line-height: 16.8em;
}
.warning-div img{
	position: absolute;
	top: 50%;
	left: 30%;
	margin-top: -10px;
	margin-left: -10px;
	z-index: 100;
}
.warning-div.actives img{
	top:50%;
	left: 12%;
}
	/*使用次数*/
	.number{
		width: 1100px;
		margin:20px auto 0px auto;
		background: #333333;
		padding: 20px 0px 25px 0;
	}

	.number > p{
		margin-bottom: 20px;
		font-size: 17px;
		color: white;
		text-align: center;
	}

	.show-num{
		overflow: hidden;
	}

	.show-num > div{
		width: 136px;
		height: 40px;
		float: left;
		padding: 7px;
		border: solid 1px black;
		border-radius: 50px;
	}

	/*.show-num span{
		width: calc(100% / 3 - 5.35px);
	    height: 100%;
	    background: #f6e710;
	    float: left;
	    border-radius: 50%;
	    font-size: 18px;
	    color: black;
	    text-align: center;
	    line-height: 40px;
	}*/

	.show-num div span:nth-of-type(2){
		margin-left: 8px;
		margin-right: 8px;
	}

	.show-num > div:first-of-type{
		margin-left: 304px;
	}

	.show-num > img{
		float: left;
	    margin: 47px 7px 0 7px;
	}
	
/* 添加水印 */


/*未上传图片时的状态*/	
.xiangjie{
	width: 1030px;
	height: 1440px;
	/*border: 1px solid deepskyblue;*/
	/*background: deepskyblue;*/
	/*margin: 10px auto;*/
	/*margin-top: 10px;*/
	/*display: none;*/
	position: absolute;
	left: 0;
	top: -10px;
	z-index: 100;
	display: block;
	background: #000;
	/*position: relative;*/
}
.a1{
	width: 100%;
	height: 60px;
	text-align: center;
	line-height: 60px;
	margin-top: 50px;
}
.a2{
	width: 100%;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin-top: 45px;
}
.a3{
	width: 100%;
	height: 162px;
	line-height: 162px;
	text-align: left;
	margin-top: 45px;
	position: relative;
}
.a3 .img4{
	position: absolute;
	top: 74px;
	left: 140px;
}
.a4{
	width: 100%;
	height: 333px;
	/*text-align: left;*/
	position: relative;
}
.a4 .img5{
	position: absolute;
	top: -4px;
	left: -19px;
}
.a4 .img6{
	position: absolute;
	top: 34px;
	right: 106px;
}
.a5{
	width: 100%;
	height: 51px;
	text-align: right;
	margin-top: 10px;
}
.a6{
	width: 100%;
	height: 333px;
	/*text-align: right;*/
	margin-top: 10px;
	position: relative;
}
.a6 .img7{
	position: absolute;
	top: 23px;
	left: 100px;
}
.a6 .img8{
	position: absolute;
	top: 20px;
	right: -19px;
}
.a6 .img9{
	position: absolute;
	top: -36px;
	right: -117px;
}
.a7{
	width: 100%;
	height: 30px;
	line-height: 30px;
	position: relative;
}
.a7 img{
	position: absolute;
	top: -14px;
	left: -19px;
}
.a8{
	width: 100%;
	height: 51px;
	line-height: 51px;
	position: relative;
}
.a8 img{
	position: absolute;
	top: 0;
	left: 312px;
}
.a9{
	width: 100%;
	height: 333px;
	line-height: 333px;
	position: relative;
}
.a9 .img10{
	position: absolute;
	top: 0;
	left: -19px;
}
.a9 .img11{
	position: absolute;
	top: 66px;
	right: 128px;
}
.a10{
	width: 100%;
	height: 63px;
	line-height: 63px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
}
.img-one{
	position: absolute;
	top: 31px;
	left: -1px;
	width: 458px;
	/*height: 298px;*/
}
.img-one img{
	width: 100%;
	/*height: 100%;*/
}
.img-two{
	position: absolute;
	top: 55px;
	right: -1px;
	width: 458px;
	/*height: 298px;*/
}
.img-two img{
	width: 100%;
	/*height: 100%;*/
}
.img-three{
	position: absolute;
	top: 38px;
	left: -1px;
	width: 458px;
	height: 298px;
	z-index: 1;
}
.img-three img{
	width: 100%;
	/*height: 100%;*/
}
/*.xiangjie img:nth-of-type(1){
	position: absolute;
	width: 274px;
	height: 164px;
	top: 461px;
	right: 162px;
}
.xiangjie img:nth-of-type(2){
	position: absolute;
	width: 274px;
	height: 164px;
	top: 841px;
	left: 125px;
}
.xiangjie img:nth-of-type(3){
	position: absolute;
	width: 274px;
	top: 1244px;
	right: 166px;
}*/

.wancheng{
	display: none;
	position: absolute;
	left: 50%;
	top: 5%;
	margin-left: -30px;
	margin-top: -30px;
}

/*.body-content:before {
    content: "";
    position: absolute;
    left: 1354px;
    top: -12px;
    border-top: 16px solid transparent;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #2b2d37;
}*/

@media screen and (max-width: 470px) {
	.dianji{
		width: 100%;
		margin-top: 10px;
		margin-left: 0;
	}
	.uploadpic{
		width: 100%;
	}
	.upload-content{
		left: 2%;
		width: 96%;
	}
	.upload-msg{
		width: 88%;
		margin-left: 0;
		left: 6%;
		top: 160px;
	}
	.content .ys-gn-nr{
		margin-bottom: 10px;
	}
	.preview-content{
		width: 90%;
		margin: 0 auto;
	}
	.upload-tuozhuai{
		left: 50%;
		top: 40px;
		margin-left: -60px;
	}
}