*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.upload_choose {
  height: 150px;
}
.upload_drag_area {
  padding: 5.4em 0 !important;
}
#gif_container{
width:100%;
display: flex;
flex-wrap: wrap;
}
#gif_container img{
width:300px;
height:auto;
margin-right:10px;
margin-bottom:10px;
}
.gifToImg_container{
  width:1200px;
  margin:20px auto 0;
}
.dragImgBox {
  width: 100%;
  height: 120px;
  border-radius: 3px;
  border: 1px solid #ddd;
  font-size: 14px;
  color: #ccc;
  text-align: center;
  line-height: 120px;
  cursor: pointer;
  margin-bottom: 10px;
}
.gifToImg_btns{
  width:100%;
  margin-top:10px;
  display: flex;
}
.gifToImg_btns span{
  width:80px;
  height:32px;
  line-height: 32px;
  color:#fff;
  text-align: center;
  font-size: 12px;
  border-radius: 3px;
  margin-right:10px;
  cursor: pointer;
}
.disabled{
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.selectGif_btn{
  background: #3280fc;
}
.selectGif_btn:hover{
  background: #2269db;
}
.zipdown_btn{
  background: #38b03f;
}
.zipdown_btn:hover{
  background: #219c2a;
}
.zipbatch_link{
  width:80px;
  height:32px;
  line-height: 32px;
  color:#fff;
  text-align: center;
  font-size: 12px;
  border-radius: 3px;
  margin-right:10px;
  cursor: pointer;
  background: #dd2421;
}
.zipbatch_link:hover{
  background: #bd1b18;
}
.gifToImg_res{
  width:100%;
  margin-top:10px;
  border:1px solid #ddd;
  padding:10px;
  box-sizing: border-box;
}
.gifToImg_res img{
  border: 1px solid #ccc;
  width: 225px;
  height: auto;
  margin-bottom: 15px;
  margin-right: 10px;
  padding: 10px;
}
.gifToImg_res img:nth-child(5n){
  margin-right:0;
}

/* 批量转换样式 */
.upload_preview{
  width:100%;
  display: flex;
  flex-wrap: wrap;
}
.gifFramepro_res{
  width:1200px;
  margin:0 auto;
}
.gifFramepro_res p{
  font-size: 14px;
  font-weight: bold;
}
.gifFramepro_res p .gifFramepro_res_allDown{
  display: inline-block;
  width:100px;
  height:30px;
  line-height: 30px;
  text-align: center;
  color:#fff;
  background: #1196EE;
  font-size: 12px;
  border-radius: 5px;
  margin-left:10px;
  cursor: pointer;
}
.gifFramepro_res p .gifFramepro_res_des{
  font-weight: normal;
  margin-left:20px;
}
.gifFramepro_res p .gifFramepro_res_des a{
  padding:0 5px;
  color:#dd2421;
}
.gifFramepro_res p span:hover{
  background: rgb(19, 127, 199);
}
.gifFramepro_res_container{
  width:100%;
  padding:10px;
  box-sizing:border-box;
  border:1px solid #ccc;
  margin-top:20px;
  display: flex;
  flex-wrap: wrap;
}
.gifFramepro_res_li{
  width:120px;
  height:120px;
  text-align: center;
  border: 1px solid #ccc;
  padding-top:25px;
  box-sizing: border-box;
  margin-right:10px;
  margin-bottom:10px;
  position: relative;
}
.gifFramepro_res_li img{
  width:60px;
  height:60px;
}
.gifFramepro_res_li a{
  display: block;
  line-height: 28px;
  color:blue;
  font-size: 12px;
  cursor: pointer;
}
.gifFramepro_res_name{
  font-size: 10px;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  padding:0 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#999;
  font-weight: normal;
}