@charset "utf-8";

#tool-info .name{padding:50px 0 30px 0;text-align:center;font-size:36px;font-weight:700;}
#tool-info .text{text-align:center;font-size:18px;}

#tool{padding:50px 0 20px 0;}
#tool .zone{position:relative;height:210px;border:6px dashed #16a085;color:#000;text-align:center;background:#eee;cursor:pointer;}
#tool .zone .zone-on{background:#16a085;opacity:0.2;}
#tool .zone .btn{margin:60px auto 0 auto;width:300px;height:60px;line-height:60px;font-size:20px;background:#16a085;color:#fff;border-radius:6px;}
#tool .zone .btn-on{animation:btn-on 1s;background:#1abc9c;}
#tool .zone .text{padding:15px 20px 0 20px;line-height:160%;}

#file-zone{position:absolute;top:0;left:0;width:100%;height:210px;}

#files{padding:20px 0;}
#files .tabs{position:relative;}
#files .tabs .head-bg{position:absolute;top:0;left:0;width:100%;height:60px;background:#333;z-index:-1;}
#files .tabs .head{float:left;height:60px;line-height:60px;padding:0 10px;border-right:1px solid #999;cursor:pointer;color:#fff;}
#files .tabs .head-on{animation:head-on 1s;background:#16a085;}
#files .tabs .head .word{padding:0 10px 0 30px;}
#files .tabs .head .icon{width:22px;height:22px;margin:19px 20px 0 0;background-color:#fff;-webkit-mask-image:url(../img/chevron-down.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:22px;-webkit-mask-position:center center;}
#files .tabs .main{display:none;float:left;width:100%;background:#e5e5e5;}
#files .tabs .main-on{display:block;animation:main-on 1s;}
#files .tabs .main .inner{padding:25px 20px 13px 20px;}
#files .tabs .main span{display:block;float:left;padding:6px 12px;margin:0 12px 12px 0;border:1px solid #16a085;background:#eee;border-radius:4px;color:#000;cursor:pointer;}
#files .tabs .main .on{background:#16a085;color:#fff;}

#files .convert-all{width:180px;text-align:center;background:#16a085;font-size:18px;color:#FFF;}

#files .list{padding:0 20px 20px 20px;background:#eee;}
#files .unit{display:flex;justify-content:space-between;height:60px;border-bottom:1px dotted #16a085;}
#files .unit>div{flex:1;flex-grow:1;}
#files .unit .name{overflow:hidden;}
#files .unit .bar{width:120px;height:16px;border:1px solid #16a085;margin:21px 0 0 0}
#files .unit .bar .inner{width:0;height:16px;background:#16a085;}
#files .unit .state{padding:0 0 0 16px;}
#files .unit .name,#files .unit .progress,#files .unit .info{line-height:60px;}
#files .unit .progress{display:flex;justify-content:flex-start;padding:0 0 0 20px;}
#files .unit .btns{display:flex;justify-content:flex-end;}
#files .unit .btns a{display:block;height:32px;line-height:32px;padding:0 15px;margin:13px 0 0 12px;background:#ddd;border:1px solid #CCC;}
#files .unit .btns .ready{background:#f39c12;color:#fff;border:1px solid #f39c12;}
#files .unit .btns .ready:hover{background:#e67e22;border:1px solid #e67e22;}

#related{padding:10px 0 30px 0;}
#related .main{display:flex;justify-content:space-between;}
#related .main .not-last{margin:0 16px 0 0;}
#related .unit{flex-grow:1;padding:10px;border:1px dashed #16a085;}
#related .unit .software{padding:5px 10px;line-height:200%;}
#related .unit .software .title{font-size:18px;font-weight:bold;padding:0 0 5px 0;}
#related .unit .software .point{font-weight:bold;}
#related .unit .software .point span{color:#16a085;padding:0 16px 0 0;}
#related .unit .software a{color:#3498db;}
#related .unit .links{padding:5px 10px;line-height:200%;}
#related .unit .links a{color:#16a085;margin:0 10px 0 0;}
#related .unit .join-group{padding:5px 10px;line-height:200%;}
#related .unit .join-group .title{font-size:18px;font-weight:bold;padding:0 0 5px 0;}
#related .unit .join-group .point{font-size:18px;font-weight:bold;padding:0 0 5px 0;}

#intro{margin:0 0 30px 0;}
#intro .head{background:#e5e5e5;padding:20px 0 20px 20px;font-size:22px;font-weight:700;}
#intro .main{background:#eee;line-height:180%;font-size:16px;padding:10px 20px 30px 20px;}
#intro .main p{text-indent:2em;}

@keyframes btn-on{
	from{background:#16a085;}to{background:#1abc9c;}
}
@keyframes head-on{
    from{background:#333;}to{background:#16a085;}
}
@keyframes main-on{
    from{opacity:0;}to{opacity:1;}
}