.tools{width:100%;overflow:hidden;}
.tools .item-cate{width:100%;overflow:hidden;padding-top:10px;}
.tools .item-cate a{font-size:14px;margin-right:20px;display:inline-block;}
.tools .item-cate a.active{color:green;border-bottom:6px;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px;}
.tools .item-cate a.active::after{
    content: '';
    display: block;
    border-radius: 2px;
    height: 4px;
    margin: 2px 0;
    background-color:#009a61;
}
.tools .item-list{width:100%;overflow:hidden;}
.tools .item-list .item{width:18%;height:145px;float:left;overflow:hidden;border:1px solid #ddd;border-radius:5px;margin:16px 16px 0 0;background:#fff;}
.tools .item-list .item:nth-child(5n+5){margin-right:0;}
.tools .item-list .item:hover{box-shadow:0px 6px 12px #ddd;}
.tools .item-list .item-inner{padding:15px 15px 0px 15px;}
.tools .item-list .item-inner .item-hd{width:100%; height:48px;}
.tools .item-list .item-inner .item-hd img{float:left;margin-right:15px;}

.imageprint{background:url('../images/tools_1.png') -50px -50px no-repeat;}
.genui{background:url('../images/tools_2.png') 0 -150px no-repeat;}
.cutout{background:url('../images/tools_3.png') -150px -50px no-repeat;}
.upscaler{background:url('../images/tools_3.png') -200px -50px no-repeat;}
.latexocr{background:url('../images/tools_1.png') -100px 0 no-repeat;}
.deobfuscation{background:url('../images/tools_2.png') -150px -100px no-repeat;}
.writer{background:url('../images/tools_4.png') 0 -150px no-repeat;}
.js{background:url('../images/tools_5.png') 0px 0px no-repeat;}
.css{background:url('../images/tools_5.png') -50px 0px no-repeat;}
.ip{background:url('../images/tools_6.png') -100px 0 no-repeat;}
.pyc{background:url('../images/tools_5.png') -150px -100px no-repeat;}
.coordinate{background:url('../images/tools_7.png') -150px 0 no-repeat;}
.checkforbidden{background:url('../images/tools_4.png') -50px -150px no-repeat;}
.imageinspector{background:url('../images/tools_1.png') -200px 0 no-repeat;}
.signature{background:url('../images/tools_1.png') 0 -50px no-repeat;}
.pdfmerger{background:url('../images/tools_8.png') 0px 0 no-repeat;}
.pdfadjuster{background:url('../images/tools_8.png') -50px 0px no-repeat;}
.audiocutter{background:url('../images/tools_9.png') 0px 0px no-repeat;}
.stitch{background:url('../images/tools_3.png') 0 -150px no-repeat;}
.gifcropper{background:url('../images/tools_3.png') -50px -150px no-repeat;}
.gifscaler{background:url('../images/tools_3.png') -100px -150px no-repeat;}
.gridpaper{background:url('../images/tools_11.png') -50px 0px no-repeat;}
.gifsplitter{background:url('../images/tools_3.png') -150px -150px no-repeat;}
.pdfpagenum{background:url('../images/tools_8.png') -100px 0 no-repeat;}
.avatar{background:url('../images/tools_1.png') -50px 0px no-repeat;}
.pdfsplitter{background:url('../images/tools_8.png') -150px 0 no-repeat;}
.datecalc{background:url('../images/tools_6.png') -50px -150px no-repeat;}
.danmu{background:url('../images/tools_7.png') 0 -50px no-repeat;}
.watermark{background:url('../images/tools_1.png') -150px 0 no-repeat;}
.php{background:url('../images/tools_5.png') -150px 0 no-repeat;}
.html{background:url('../images/tools_5.png') -100px 0 no-repeat;}
.wstester{background:url('../images/tools_2.png') -50px -150px no-repeat;}
.regex{background:url('../images/tools_5.png') -200px 0 no-repeat;}
.sql{background:url('../images/tools_5.png') 0 -50px no-repeat;}
.json{background:url('../images/tools_5.png') -100px -100px no-repeat;}
.xml{background:url('../images/tools_2.png') 0 -50px no-repeat;}
.asciidoc{background:url('../images/tools_4.png') -50px -100px no-repeat;}
.favicon{background:url('../images/tools_3.png') 0px 0px no-repeat;}
.color{background:url('../images/tools_11.png') 0px 0px no-repeat;}
.subtitleconverter{background:url('../images/tools_12.png') -100px 0 no-repeat;}
.crontab{background:url('../images/tools_5.png') -200px -100px no-repeat;}
.base64image{background:url('../images/tools_3.png') 0 -50px no-repeat;}
.markdown{background:url('../images/tools_4.png') 0 -50px no-repeat;}
.imageholder{background:url('../images/tools_3.png') -50px 0 no-repeat;}
.hexconvert{background:url('../images/tools_5.png') 0 -150px no-repeat;}

.coderunner{background:url('../images/tools_5.png') -100px -150px no-repeat;}
.emailimage{background:url('../images/tools_3.png') -200px 0 no-repeat;}
.encdec{background:url('../images/tools_4.png') -150px 0 no-repeat;}
.useragent{background:url('../images/tools_2.png') -50px 0 no-repeat;}
.hexstr{background:url('../images/tools_4.png') -200px 0 no-repeat;}
.timestamp{background:url('../images/tools_5.png') -50px -150px no-repeat;}
.naming{background:url('../images/tools_6.png') -150px -150px no-repeat;}
.developer{background:url('../images/tools_5.png') -50px -150px no-repeat;}
.java{background:url('../images/tools_5.png') -150px -50px no-repeat;}
.fontfamily{background:url('../images/tools_5.png') -100px -50px no-repeat;}
.py5bconvert{background:url('../images/tools_4.png') -50px 0 no-repeat;}
.zhconvert{background:url('../images/tools_4.png') 0px 0px no-repeat;}
.todayonhistory{background:url('../images/tools_6.png') -50px 0 no-repeat;}
.urlconvert{background:url('../images/tools_7.png') 0px 0px no-repeat;}
.highlight{background:url('../images/tools_5.png') -50px -100px no-repeat;}
.mobile{background:url('../images/tools_6.png') 0px 0px no-repeat;}
.tinyimage{background:url('../images/tools_3.png') -50px -50px no-repeat;}
.htpasswd{background:url('../images/tools_5.png') -200px -50px no-repeat;}
.htmlentity{background:url('../images/tools_5.png') 0 -100px no-repeat;}
.torrent{background:url('../images/tools_7.png') -50px 0 no-repeat;}
.dns{background:url('../images/tools_13.png') -50px 0 no-repeat;}
.htaccess2nginx{background:url('../images/tools_3.png') 0px 0px no-repeat;}
.zipcode{background:url('../images/tools_6.png') -200px 0 no-repeat;}
.qrcode{background:url('../images/tools_3.png') -100px 0 no-repeat;}
.appicon{background:url('../images/tools_3.png') -150px 0 no-repeat;}
.uuid{background:url('../images/tools_2.png') -200px -100px no-repeat;}
.ocr{background:url('../images/tools_3.png') -50px -100px no-repeat;}
.tables{background:url('../images/tools_4.png') -50px -50px no-repeat;}
.forex{background:url('../images/tools_6.png') -50px -50px no-repeat;}
.barcode{background:url('../images/tools_3.png') -100px -100px no-repeat;}
.imageconverter{background:url('../images/tools_1.png') 0px 0px no-repeat;}
.filehash{background:url('../images/tools_7.png') -200px 0 no-repeat;}


.eat{background:url('../images/tools_6.png') -200px -150px no-repeat;}
.pkg{background:url('../images/tools_2.png') -200px 0 no-repeat;}
.httpcode{background:url('../images/tools_5.png') -200px -150px no-repeat;}
.viewsource{background:url('../images/tools_5.png') -150px -150px no-repeat;}
.curl{background:url('../images/tools_2.png') -150px -50px no-repeat;}
.copybook{background:url('../images/tools_14.png') -100px -50px no-repeat;}
.blood{background:url('../images/tools_6.png') 0 -100px no-repeat;}
.coin{background:url('../images/tools_7.png') -50px -50px no-repeat;}


.periodic{background:url('../images/tools_14.png') -200px -50px no-repeat;}
.yaml{background:url('../images/tools_2.png') -200px -50px no-repeat;}
.licenseplate{background:url('../images/tools_6.png') -50px -100px no-repeat;}
.relationship{background:url('../images/tools_6.png') -100px -100px no-repeat;}
.csr{background:url('../images/tools_2.png') 0 -100px no-repeat;}
.imagecropper{background:url('../images/tools_3.png') -150px -100px no-repeat;}
.imagespec{background:url('../images/tools_3.png') -200px -100px no-repeat;}

.homophony{background:url('../images/tools_4.png') -200px -100px no-repeat;}
.crx{background:url('../images/tools_2.png') -50px -100px no-repeat;}
.strrandom{background:url('../images/tools_2.png') -100px -100px no-repeat;}
.boxsize{background:url('../images/tools_6.png') -150px -100px no-repeat;}
.papersize{background:url('../images/tools_6.png') -200px -100px no-repeat;}
.zodiac{background:url('../images/tools_6.png') 0 -150px no-repeat;}
.cidr{background:url('../images/tools_6.png') -100px -150px no-repeat;}
.head{background:url('../images/tools_2.png') 0px 0px no-repeat;}
.calc{background:url('../images/tools_14.png') 0px 0px no-repeat;}
.daxie{background:url('../images/tools_4.png') -100px 0 no-repeat;}
.imageslicer{background:url('../images/tools_3.png') -100px -50px no-repeat;}
.xiehouyu{background:url('../images/tools_14.png') -200px 0 no-repeat;}
.idiom{background:url('../images/tools_14.png') 0 -50px no-repeat;}
.shell{background:url('../images/tools_2.png') -50px -50px no-repeat;}
.symbol{background:url('../images/tools_6.png') -150px -50px no-repeat;}
.command{background:url('../images/tools_2.png') -100px -50px no-repeat;}
.asciipainting{background:url('../images/tools_4.png') -150px -100px no-repeat;}
.capital{background:url('../images/tools_14.png') -50px -50px no-repeat;}
.size{background:url('../images/tools_6.png') -200px -50px no-repeat;}
.wordcount{background:url('../images/tools_4.png') -100px -50px no-repeat;}
.dynasty{background:url('../images/tools_14.png') -50px 0 no-repeat;}
.diff{background:url('../images/tools_4.png') -150px -50px no-repeat;}
.morse{background:url('../images/tools_4.png') -200px -50px no-repeat;}
.pronounce{background:url('../images/tools_6.png') 0 -50px no-repeat;}
.magicbytes{background:url('../images/tools_2.png') -100px 0 no-repeat;}
.shield{background:url('../images/tools_2.png') -150px 0 no-repeat;}
.unitconverter{background:url('../images/tools_14.png') -100px 0 no-repeat;}
.whois{background:url('../images/tools_13.png') -200px 0 no-repeat;}
.school{background:url('../images/tools_14.png') -150px 0 no-repeat;}
.zhcomponent{background:url('../images/tools_4.png') 0 -100px no-repeat;}
.tld{background:url('../images/tools_13.png') 0 -50px no-repeat;}
.partition{background:url('../images/tools_13.png') -50px -50px no-repeat;}
.holiday{background:url('../images/tools_6.png') -100px -50px no-repeat;}


.tools .item-list .item-inner .item-hd h3{height:22px;line-height:22px; font-size:16px;font-weight:700;margin-bottom:8px;}
.tools .item-list .item-inner .item-hd h3 a{color:#333;}
.tools .item-list .item-inner .item-hd .item-category{height:22px;line-height:22px; float:right;font-size:12px;}
.tools .item-list .item-inner .item-hd .collect{float:left;color:#333;font-size:12px;}

.tools .item-list .item-inner .item-bd{width:100%;height:40px;line-height:20px;font-size:12px;color:#444;margin-top:10px;}

.tools .item-list .item-inner .item-ft{width:100%; height:26px;line-height:26px;}
.tools .item-list .item-inner .item-ft .item-link{color:#999;font-size:12px;float:left;width:80%;}
.tools .item-list .item-inner .item-ft .item-btn{color:#444;font-size:12px;float:right; color:#444;}

.tools .app{width:100%;display:flex;justify-content:space-between;}
.tools .app .app-left{width:75%; overflow:hidden;}
.tools .app .app-right{width:25%; overflow:hidden;}

.tools .app .app-left h1{font-size:16px;margin:16px 0;}
.tools .app .app-left h2{font-size:16px;margin:16px 0;}
.tools .app .app-left .app-p{padding:10px 0;font-size:12px;}
.tools .app .app-left .app-p .select{height:30px;line-height:30px;border:1px solid #ddd;padding:0 5px; border-radius:3px;}
.tools .app .app-left .canvas{background-color:#fff;border-radius:5px;}
.tools .app .app-left .app-p .btn{height:30px;line-height:30px;color:#fff;background:#009a61;border-radius:5px;outline:none;margin:0 10px 0 0;padding:0 10px;border:none;cursor:pointer;}


.input_textarea{width:80%;height:90px;padding:10px;border:1px solid #009a61;border-radius:5px;background-color:#fff;outline:none;}

.upload-box{width:80%;padding:40px 5%; line-height:40px; border:2px dashed #aaa;text-align:center;}
.upload-box span{color:#009a61;}
.upload-box span:hover{text-decoration:underline;cursor:pointer;}
.app-p .choose{display:inline-block;border:1px solid #ddd;padding:5px 10px;cursor:pointer;}
.app-p .choose.acitve{border-color:#009a61;color:#009a61;}

.app-p .bg-choose{display:inline-block;border:1px solid #ddd;height:40px;width:40px;cursor:pointer;}
.app-p .bg-choose.acitve{border-color:#009a61;color:#009a61;}

.app-codes tr th{font-size:14px;}
.app-codes tr td .code_left{width:300px;height:400px;overflow-y:auto;outline:none;border:1px solid #ddd;padding:10px;}
.app-codes tr td .code_right{width:300px;height:400px;overflow-y:auto;outline:none;border:1px solid #ddd;padding:10px;}


.app-box{width:90%;padding:20px;border-radius:5px;border:0.5px solid #ddd;background-color:#fff;}
.app-box .btns{border-radius:5px;border:1px solid #ddd;padding:8px 15px;color:#333;cursor:pointer;margin-left:10px;}
.app-box .btns.btns-red{background-color:red;color:#fff;}
.app-box .btns.btns-green{background-color:green;color:#fff;}
.app-box .btns.btns-black{background-color:#222;color:#fff;}

.app-box .input{width:180px;height:30px;line-height:30px;border:1px solid #ddd;border-radius:3px;outline:none;text-indent:10px;}
.app-box .select{height:30px;line-height:30px;border:1px solid #ddd;border-radius:3px;outline:none;}

.tool-doc{font-size:13px;color:#444;line-height:26px;}
.tool-doc h3{line-height:60px;}
.tool-doc p{color:#666;}
.tool-doc p a{color:#009a61;}

.tool-doc .tbl{width:98%;border-collapse:collapse;}
.tool-doc .tbl tr th{padding:8px;border:1px solid #e6e6e6;font-size:13px;color:#444;background-color:#f3f3f3;text-align:left;}
.tool-doc .tbl tr td{padding:8px;border:1px solid #e6e6e6;font-size:13px;color:#444;}
.tool-doc .tbl tr td pre{padding:20px;background-color:#f5f2f0;border:1px solid #CCC;margin:5px;border-radius:3PX;}
.tool-doc .tbl tr:hover{background-color:#e5f4ef;}