::-webkit-scrollbar {
    height: 15px;
    width: 15px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-style: solid;
    border-color: transparent;
    border-width: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    background-clip: padding-box
}

::-webkit-scrollbar-thumb:hover {
    border-color: rgba(0, 0, 0, 0.4)
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent
}

.gab {
    display: inline-block;
    margin-left: 10px
}

.gab::before {
    content: "";
    display: inline-block;
    padding-left: 16px;
    height: 16px;
    margin-top: -2px;
    line-height: 16px;
    vertical-align: middle;
    background-position: center;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDNzc4MTU4QjRDMjI2ODExODA4M0E1MjgyODY2QjJGNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MEQ4Mzk3RUNFRkIxMUU1ODUwRUQzRjg1OUM4MDkxNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MEQ4Mzk3RENFRkIxMUU1ODUwRUQzRjg1OUM4MDkxNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkI3RjExNzQwNzIwNjgxMTgyMkFGNzI0QjhFQkQ0RDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Qzc3ODE1OEI0QzIyNjgxMTgwODNBNTI4Mjg2NkIyRjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4RiM0TAAADP0lEQVR42hSS22tbdQDHP+eXc05uPSdps2Zpmm69rOlaWkvXCh1YLJsOLAy1DOZQNnyZCkN8EgSffFAHvnhjtriBD1OZ1gdRJogXip1r7WqLW9Ji6ZXem+bkfjknifUP+PD98OUjVbKzlCs+sOpBX0WQVtKLe8/dvzf54s620dzR3vh990D7t8LbN0tSgJkF4UT6HyyVdWzuJrJrd1+/ef3Wm0p+rd6ZM6gIHf+TLTyctdPX1fDHmVevDRcS7JWt9cMB2YFw1QKR3pvXv/hwIrJff9pMcmY5znnlgMdnlujo9vD5nb+eMGbGPrZ7KmScm8jFfA5V/vvSu2+Mfjm1JjEymCI7ukvcppI+NEvce8DZ13JkLz/LC1cnLo5+kq3WairnhVxIYzwau/j2j8c56lPxza2S3S2iHjpYs3G0Bj+RGxEGK//ye6qR90aXz1UplaDYmB5/Kb26+XRjs496VxKzaEdYFtYpnaq32nE2ezApo0lpOtsEptBQAvqYHFuJDjeHTJcqK8yn/TguHWNn2cTb5EYKVyNZCqFeL3tBP9GJDFfeCcDC5CmhqlqfLnIMdBf46usqJqdMmp4KwXSC1O0VMo9iBEIKn36QIVvxM9iyQ3x+OyVsSkbP7ecZ7jVArWPpo0WOz0bRgxaeQJHwCRX5xhQ//LxC61A1nUfiHGTtyG7NH40drPY/M2hy9oKdK7cH+W18Hp8MtW4Fs8bF3NYAEekk3w2tI7ntOAPVyGW53J02nKQm5/jsZYn3fT2MT7bRWWtS37DGrV8DRDxerl128Hz4Aav3U9iq3ZqU2vhmJDZz52p6KYmWj3Fs6ATlsp1yPotsJUgQRNTUUH64wP5yDFs4iN7aHBNVwQuveFrPjehhiYziYvHPfXKWwDgosVvwY/fYYHeDRLKE+lgHQju65fIPnJat1BSVfL7L4Q2h9kuUjAzp/QTC40GRBXv/bGLlyrjaQghVPmzcqivm99qEhCE7QvYFm9eFLPLodXZsWJAyKGxuIx+epLVoyGoORXOid4ZnbHogLlUqSxxsR1m5O3aytL47LDkS/Z7AkUZFKnkUp81exL3l8NUa+YJz2sglf/L39PxSW9fFfwIMAGXrVaZ2QfN+AAAAAElFTkSuQmCC) no-repeat
}

body {
    display: block;
    min-height: 500px;
    font-family: "Microsoft YaHei"
}

body main {
    min-height: 100vh
}

h3 {
    font-size: 22px;
    color: #333
}

.bg-fff {
    color: #fff
}

textarea {
    font-family: Consolas, "Liberation Mono", Courier, monospace
}

.grid-container {
    max-width: 100%
}

.layer-download-type {
    max-width: 420px
}

.layer-download-type .layui-layer-btn {
    text-align: center !important
}

.layer-img-box {
    padding: 10px;
    background: #fff
}

.layer-img-box img {
    width: 100%
}

.layer-img-box .text-tip {
    margin-top: 6px;
    text-align: center;
    color: #555;
    font-size: 14px
}

.tool-group .tool-item {
    font-family: "Segoe UI", sans-serif;
    display: block;
    position: relative;
    padding: 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)
}

.tool-group .tool-item__title {
    position: relative;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 6px
}

.tool-group .tool-item__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 2px
}

.tool-group .tool-item__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    user-select: none;
    color: #fff
}

.tool-group .tool-item__desc {
    color: #4b5563;
    line-height: 1.5;
    margin: 8px 0 12px 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.tool-group .tool-item:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1.05)
}

.tool-group .tool-item.style1 {
    background: linear-gradient(to top right, #fdf2f8, #fff, #fff1f2)
}

.tool-group .tool-item.style1 .tool-item__title {
    color: #be123c
}

.tool-group .tool-item.style1 .tool-item__title::after {
    background: linear-gradient(to right, #b91c1c, #ec4899)
}

.tool-group .tool-item.style1 .tool-item__badge {
    background-color: #fb7185
}

.tool-group .tool-item.style2 {
    background: linear-gradient(to top right, #e0f2fe, #fff, #f0f9ff)
}

.tool-group .tool-item.style2 .tool-item__title {
    color: #0369a1
}

.tool-group .tool-item.style2 .tool-item__title::after {
    background: linear-gradient(to right, #0369a1, #38bdf8)
}

.tool-group .tool-item.style2 .tool-item__badge {
    background-color: #38bdf8
}

.tool-group .tool-item.style3 {
    background: linear-gradient(to top right, #dcfce7, #fff, #f0fdf4)
}

.tool-group .tool-item.style3 .tool-item__title {
    color: #15803d
}

.tool-group .tool-item.style3 .tool-item__title::after {
    background: linear-gradient(to right, #15803d, #4ade80)
}

.tool-group .tool-item.style3 .tool-item__badge {
    background-color: #4ade80
}

.tool-group .tool-item.style4 {
    background: linear-gradient(to top right, #fef3c7, #fff, #fff7ed)
}

.tool-group .tool-item.style4 .tool-item__title {
    color: #b45309
}

.tool-group .tool-item.style4 .tool-item__title::after {
    background: linear-gradient(to right, #b45309, #fbbf24)
}

.tool-group .tool-item.style4 .tool-item__badge {
    background-color: #fbbf24
}

.tool-group .tool-item.style5 {
    background: linear-gradient(to top right, #f3e8ff, #fff, #faf5ff)
}

.tool-group .tool-item.style5 .tool-item__title {
    color: #7e22ce
}

.tool-group .tool-item.style5 .tool-item__title::after {
    background: linear-gradient(to right, #7e22ce, #c084fc)
}

.tool-group .tool-item.style5 .tool-item__badge {
    background-color: #c084fc
}

.tool-group .tool-item.style6 {
    background: linear-gradient(to top right, #f3f4f6, #fff, #e5e7eb)
}

.tool-group .tool-item.style6 .tool-item__title {
    color: #374151
}

.tool-group .tool-item.style6 .tool-item__title::after {
    background: linear-gradient(to right, #4b5563, #9ca3af)
}

.tool-group .tool-item.style6 .tool-item__badge {
    background-color: #6b7280
}

.tool-group .tool-item.style7 {
    background: linear-gradient(to top right, #d1fae5, #fff, #ecfdf5)
}

.tool-group .tool-item.style7 .tool-item__title {
    color: #065f46
}

.tool-group .tool-item.style7 .tool-item__title::after {
    background: linear-gradient(to right, #065f46, #34d399)
}

.tool-group .tool-item.style7 .tool-item__badge {
    background-color: #34d399
}

.tool-group .tool-item.style8 {
    background: linear-gradient(to top right, #fef9c3, #fff, #fefce8)
}

.tool-group .tool-item.style8 .tool-item__title {
    color: #a16207
}

.tool-group .tool-item.style8 .tool-item__title::after {
    background: linear-gradient(to right, #a16207, #fde047)
}

.tool-group .tool-item.style8 .tool-item__badge {
    background-color: #fde047
}

.tool-group .tool-item.style9 {
    background: linear-gradient(to top right, #ffedd5, #fff, #fff7ed)
}

.tool-group .tool-item.style9 .tool-item__title {
    color: #c2410c
}

.tool-group .tool-item.style9 .tool-item__title::after {
    background: linear-gradient(to right, #ea580c, #fb923c)
}

.tool-group .tool-item.style9 .tool-item__badge {
    background-color: #fb923c
}

.tool-group .tool-item.style10 {
    background: linear-gradient(to top right, #e0f2fe, #fff, #e5f6ff)
}

.tool-group .tool-item.style10 .tool-item__title {
    color: #0c4a6e
}

.tool-group .tool-item.style10 .tool-item__title::after {
    background: linear-gradient(to right, #0c4a6e, #38bdf8)
}

.tool-group .tool-item.style10 .tool-item__badge {
    background-color: #0284c7
}

.tool-group .tool-item.style11 {
    background: linear-gradient(to top right, #ecfccb, #fff, #f7fee7)
}

.tool-group .tool-item.style11 .tool-item__title {
    color: #4d7c0f
}

.tool-group .tool-item.style11 .tool-item__title::after {
    background: linear-gradient(to right, #65a30d, #bef264)
}

.tool-group .tool-item.style11 .tool-item__badge {
    background-color: #a3e635
}

.tool-group .tool-item.style12 {
    background: linear-gradient(to top right, #ffe4e6, #fff, #fff1f2)
}

.tool-group .tool-item.style12 .tool-item__title {
    color: #e11d48
}

.tool-group .tool-item.style12 .tool-item__title::after {
    background: linear-gradient(to right, #e11d48, #fb7185)
}

.tool-group .tool-item.style12 .tool-item__badge {
    background-color: #fb7185
}

.tool-group .tool-item.style13 {
    background: linear-gradient(to top right, #dbeafe, #fff, #eff6ff)
}

.tool-group .tool-item.style13 .tool-item__title {
    color: #1d4ed8
}

.tool-group .tool-item.style13 .tool-item__title::after {
    background: linear-gradient(to right, #1d4ed8, #60a5fa)
}

.tool-group .tool-item.style13 .tool-item__badge {
    background-color: #60a5fa
}

.tool-group .tool-item.style14 {
    background: linear-gradient(to top right, #f3e8e8, #fff, #f9f5f5)
}

.tool-group .tool-item.style14 .tool-item__title {
    color: #7f1d1d
}

.tool-group .tool-item.style14 .tool-item__title::after {
    background: linear-gradient(to right, #7f1d1d, #e11d48)
}

.tool-group .tool-item.style14 .tool-item__badge {
    background-color: #e11d48
}

.tool-group .tool-item.style15 {
    background: linear-gradient(to top right, #ede9fe, #fff, #f5f3ff)
}

.tool-group .tool-item.style15 .tool-item__title {
    color: #5b21b6
}

.tool-group .tool-item.style15 .tool-item__title::after {
    background: linear-gradient(to right, #5b21b6, #a78bfa)
}

.tool-group .tool-item.style15 .tool-item__badge {
    background-color: #8b5cf6
}

.page-content,footer {
    margin-left: 220px;
    padding: 0 15px
}

@media (max-width: 768px) {
    .page-content,footer {
        margin-left:0;
        padding: 0
    }
}

.page-content {
    min-height: 600px
}

ins.adsbygoogle {
    display: block
}

.ad-init ins.adsbygoogle,.no-ad ins.adsbygoogle,html.ad-blocked ins.adsbygoogle {
    display: none
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important
}

.promo-box ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important
}

.promo-box a {
    transform: translateY(0);
    box-shadow: none;
    transition: 0.3s
}

.promo-box a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15)
}

video.preview-video {
    height: 500px;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    background-color: #333;
    margin: 0 auto;
    border: 1px solid #9e9e9e
}

@media (max-width: 640px) {
    main img {
        max-width:100%
    }
}

.width100 {
    width: 100px
}

.layui-laydate-content tbody tr:nth-child(even) {
    background: none
}

.result-box {
    padding-top: 10px;
    border-top: 1px solid #eaeaea
}

.info-title {
    margin-bottom: 0;
    font-size: 14px
}

ul {
    margin: 0;
    padding: 0
}

ul li {
    list-style-type: none
}

.mt0 {
    margin-top: 0
}

.ml0 {
    margin-left: 0
}

mr0 {
    margin-right: 0
}

mb0 {
    margin-bottom: 0
}

.margin0 {
    margin: 0
}

padding0 {
    padding: 0
}

.table-scroll table {
    width: 100%
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.clearfix {
    overflow: hidden;
    _zoom: 1
}

.clearfix ::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.bg-transparent {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAABlBMVEX5+fns7OzSP6FoAAAAG0lEQVQY02P4//9/AwMDw5CngaD+//8DQ50GAO2gqCu/k7NTAAAAAElFTkSuQmCC")
}

.breadcrumbs-wrapper {
    background: #fff
}

.breadcrumbs-wrapper .breadcrumbs li {
    height: 20px;
    line-height: 20px
}

.breadcrumbs-wrapper .breadcrumbs h1 {
    font-size: 12px;
    margin-bottom: 0;
    line-height: 20px
}

.red {
    color: red
}

h1 {
    font-size: 28px;
    color: #333
}

@media (max-width: 760px) {
    h1 {
        font-size:22px
    }
}

h2 {
    font-size: 20px;
    color: #555;
    margin-bottom: 15px
}

@media (max-width: 760px) {
    h2 {
        font-size:18px
    }
}

p {
    font-size: 14px;
    line-height: 1.8;
    color: #666
}

[v-cloak] {
    display: none
}

.w-100 {
    width: 100%
}

.no-ad-tip {
    padding: 15px
}

.captcha-box {
    height: 50px;
    margin-bottom: 10px
}

.form-error {
    display: block;
    margin-bottom: 6px;
    color: #CC3333
}

.form-required {
    color: #CC3333;
    font-weight: 700
}

.page-title {
    margin-top: 25px;
    margin-bottom: 20px
}

input[readonly] {
    background: #fff
}

.result-tip {
    color: #888;
    line-height: 36px
}

.drag-box {
    border: 2px dashed #bbb;
    margin-bottom: 30px;
    border-radius: 5px;
    text-align: center;
    height: 200px;
    font: 20pt bold, "Vollkorn";
    color: #bbb;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none
}

.drag-box .tip-word {
    line-height: 1.8;
    text-align: center
}

@media (max-width: 640px) {
    .drag-box .tip-word {
        font-size:18px
    }
}

.drag-box .file-picker {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

button {
    border-radius: 4px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    margin-right: 10px;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px
}

.btn-convert {
    color: #409EFF;
    background: #ecf5ff;
    border-color: #b3d8ff
}

.btn-convert:hover {
    background: #409EFF;
    border-color: #409EFF;
    color: #FFF
}

.btn-demo {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6
}

.btn-demo:hover {
    background: #909399;
    border-color: #909399;
    color: #fff
}

.btn-copy {
    color: #67C23A;
    background: #f0f9eb;
    border-color: #c2e7b0
}

.btn-copy:hover {
    background: #67C23A;
    border-color: #67C23A;
    color: #FFF
}

.btn-export {
    color: #E6A23C;
    background: #fdf6ec;
    border-color: #f5dab1
}

.btn-export:hover {
    background: #E6A23C;
    border-color: #E6A23C;
    color: #FFF
}

.btn-reset {
    color: #F56C6C;
    background: #fef0f0;
    border-color: #fbc4c4
}

.btn-reset:hover {
    background: #F56C6C;
    border-color: #F56C6C;
    color: #FFF
}

.btn-box button[class^="btn-"] {
    margin-bottom: 15px
}

.checkbox-group {
    display: inline-block;
    user-select: none
}

.checkbox-group input[type="checkbox"],.checkbox-group input[type="radio"] {
    display: none
}

.checkbox-group label {
    font-size: 17px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-left: 0
}

.checkbox-group label::before {
    font-size: 14px;
    border: 1px solid #ccc;
    padding: 1px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 16px;
    display: inline-block;
    font-family: iconfont;
    vertical-align: text-bottom;
    content: "00";
    text-indent: 100px;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 6px
}

.checkbox-group label:hover::before {
    content: "";
    color: #ccc;
    text-indent: 0
}

.checkbox-group input[type="checkbox"]:checked~label,.checkbox-group input[type="radio"]:checked~label {
    color: #1779ba
}

.checkbox-group input[type="checkbox"]:checked~label::before,.checkbox-group input[type="radio"]:checked~label::before {
    content: "";
    border-color: #1779ba;
    color: #fff;
    background: #1779ba;
    text-indent: 0
}

.checkbox-group input[type="radio"]~label::before {
    line-height: 17px
}

@media (max-width: 640px) {
    fieldset.fieldset {
        padding:20px 4px
    }

    fieldset.fieldset span.checkbox-group {
        margin-top: 8px;
        margin-bottom: 8px;
        display: inline-block
    }
}

footer,.footer {
    background: #fcfcfc;
    margin-top: 40px;
    padding: 35px 0;
    border-top: 1px solid #eaeaea;
    color: #333
}

footer .disclaimer-tip,.footer .disclaimer-tip {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 10px;
    padding: 0 15px
}

footer a,.footer a {
    color: #555
}

footer a:hover,.footer a:hover {
    color: #111
}

footer .footer-nav a,.footer .footer-nav a {
    margin-right: 35px;
    font-size: 14px
}

@media (max-width: 760px) {
    footer .footer-nav a,.footer .footer-nav a {
        margin-right:10px;
        font-size: 13px
    }
}

footer .friend-link,.footer .friend-link {
    margin-bottom: 20px;
    margin-top: 30px
}

footer .friend-link a,.footer .friend-link a {
    font-size: 14px;
    margin-left: 0;
    margin-right: 15px
}

footer p.copyright,.footer p.copyright {
    font-size: 12px;
    text-align: left;
    color: #73777a
}

.sidebar {
    z-index: 999;
    position: fixed;
    right: 10px;
    bottom: 150px
}

@media (max-width: 640px) {
    .sidebar {
        bottom:60px
    }

    .sidebar ul li {
        background: #f5f5f5
    }

    .sidebar ul li:not(:last-child) {
        display: none
    }
}

.sidebar ul {
    list-style-type: none
}

.sidebar ul li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    position: relative;
    margin-bottom: 5px
}

.sidebar ul li i {
    font-size: 22px;
    color: #555
}

.sidebar ul li .hidden-box {
    transform: translate(0, -50%);
    z-index: 999;
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    right: 55px;
    top: 50%;
    background: #fff
}

.sidebar ul li .hidden-box-wrapper {
    position: relative;
    padding: 10px
}

.sidebar ul li .hidden-box-wrapper::before,.sidebar ul li .hidden-box-wrapper::after {
    content: "";
    width: 10px;
    height: 10px;
    border: 10px solid;
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -10px;
    border-color: transparent transparent transparent #ccc
}

.sidebar ul li .hidden-box-wrapper::before {
    right: -20px
}

.sidebar ul li .hidden-box-wrapper::after {
    right: -19px;
    border-color: transparent transparent transparent #fff
}

.sidebar ul li .hidden-box img {
    max-width: none
}

.sidebar ul li .hidden-box span {
    margin-top: 6px;
    display: block;
    color: #3c3c3c;
    font-size: 12px;
    line-height: 1.6
}

.sidebar ul li:hover {
    background: #f5f5f5
}

.sidebar ul li:hover i {
    color: #000
}

.sidebar ul li:hover .hidden-box {
    display: block
}

.text-collapse {
    position: relative;
    padding-bottom: 10px
}

.text-collapse p {
    margin-bottom: 0
}

.text-collapse .toggle-btn {
    width: 100%;
    user-select: none;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    display: none
}

.text-collapse .toggle-btn::after {
    background: #fff;
    display: block;
    text-align: center;
    line-height: 1.6;
    font-size: 18px;
    cursor: pointer;
    font-family: "iconfont";
    content: ""
}

.text-collapse.collapse {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical
}

.text-collapse.collapse .toggle-btn {
    display: block
}

.text-collapse.collapse .toggle-btn::after {
    content: ""
}

.tool-meta {
    background: #fff;
    padding: 10px 18px;
    border: 1px solid #eaeaea;
    margin-top: 6px;
    margin-bottom: 20px;
    display: flex;
    border-radius: 6px
}

@media (max-width: 768px) {
    .tool-meta {
        display:block
    }
}

.tool-meta h1 {
    font-size: 18px;
    color: #555;
    margin-bottom: 0;
    line-height: 30px
}

@media (max-width: 768px) {
    .tool-meta h1 {
        text-align:center
    }
}

.tool-meta ul {
    text-align: right;
    flex-grow: 1
}

@media (max-width: 768px) {
    .tool-meta ul {
        text-align:center;
        margin-top: 10px
    }
}

.tool-meta ul li {
    display: inline-block;
    margin-left: 15px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    color: #555
}

@media (max-width: 768px) {
    .tool-meta ul li {
        font-size:10px
    }
}

.tool-meta ul li:hover {
    color: #1779ba
}

.tool-meta ul li i {
    margin-right: 5px;
    vertical-align: middle;
    font-size: 16px;
    font-style: normal
}

.tool-meta ul li span {
    vertical-align: middle
}

@media (max-width: 768px) {
    .tool-meta ul li span {
        display:none
    }
}

.tool-meta ul li a {
    color: #555
}

.tool-meta ul li a:hover {
    color: #1779ba
}

.tool-meta ul li .add-favorite-btn::after {
    font-style: normal;
    font-family: "iconfont";
    content: ""
}

.tool-meta ul li .add-favorite-btn:hover::after,.tool-meta ul li .add-favorite-btn.favorite::after {
    color: orange;
    content: ""
}

.tool-tag {
    margin-top: 25px
}

.tool-tag li {
    margin-right: 15px;
    display: inline-block;
    margin-bottom: 15px
}

@media (max-width: 640px) {
    .tool-tag li {
        margin-right:10px
    }
}

.tool-tag li a {
    display: inline-block;
    padding: 0 15px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    line-height: 32px
}

@media (max-width: 640px) {
    .tool-tag li a {
        padding:0 10px
    }
}

.tool-tag li a:hover {
    background: #1779ba;
    color: #fff
}

.tool-tag.aside-tag {
    margin-top: 0
}

.tool-tag.aside-tag li {
    margin-bottom: 10px;
    margin-right: 10px
}

.tool-tag.aside-tag li a {
    padding: 0 12px;
    font-size: 14px
}

.panel-box {
    border: 1px solid #eaeaea;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px
}

.panel-box h2 {
    font-size: 18px;
    color: #555;
    margin-bottom: 15px
}

@media screen and (max-width: 640px) {
    aside {
        border-top:1px solid #eaeaea;
        margin-top: 0
    }
}

.search-box {
    margin: 35px auto 15px auto;
    width: 100%;
    max-width: 1200px
}

@media (max-width: 640px) {
    .search-box {
        padding:0 15px
    }
}

.search-box form .input-group {
    margin-bottom: 0;
    border-radius: 4px;
    position: relative
}

.search-box form .input-group i {
    position: absolute;
    top:11px; 
    left: 16px;
    color: #888
}

.search-box form .input-group input {
    box-shadow: none;
    border: none;
    background: #f6f7fa;
    padding-left: 50px;
    height: 46px;
    line-height: 30px;
    border-radius: 10px
}

body.page-index .intro-box h2 {
    font-size: 20px;
    border-left: 4px solid #009100;
    padding-left: 8px;
    color: #555;
    margin-top: 10px
}

@media (max-width: 640px) {
    body.page-tool .search-box {
        padding:0
    }
}

body.page-tool .tool-wrapper {
    border: 1px solid #eaeaea;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    position: relative
}

body.page-tool .tool-wrapper .loading-tip {
    font-size: 16px;
    color: #999;
    text-align: center;
    margin: 80px 15px
}

body.page-tool .tool-wrapper .btn-box {
    text-align: center
}

body.page-tool .tool-intro {
    border: 1px solid #eaeaea;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    margin-top: 25px
}

body.page-tool .tool-intro h2 {
    font-size: 20px;
    border-left: 4px solid #009100;
    padding-left: 8px;
    color: #555;
    margin-top: 10px
}

body.page-tool .tool-intro h3 {
    font-size: 18px;
    color: #555;
    margin-top: 10px
}

body.page-tool .tool-intro p {
    font-size: 15px;
    color: #666666;
    font-weight: 400;
    line-height: 1.8
}

body.page-tool .tool-collection {
    background: #fff;
    margin-bottom: 15px
}

@media (max-width: 640px) {
    body.page-tool .tool-collection {
        display:none
    }
}

body.page-tool .tool-collection ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #eaeaea
}

body.page-tool .tool-collection ul.expanded {
    white-space: inherit;
    overflow: hidden
}

body.page-tool .tool-collection ul li {
    margin: 0;
    display: inline-block;
    margin-right: 15px;
    cursor: pointer
}

body.page-tool .tool-collection ul li a {
    line-height: 2.2;
    color: #555;
    display: inline-block;
    font-size: 14px
}

body.page-tool .tool-collection ul li a:hover {
    color: orange
}

body.page-tool .tool-collection ul li.active {
    border-bottom: 2px solid #1779ba;
    margin-top: 1px
}

body.page-tool .tool-collection ul li.active a {
    color: orange
}

body.page-single .page-content {
    margin-top: 30px
}

body.page-single h1 {
    color: #555
}

body.page-single h2 {
    font-weight: 600;
    margin-top: 25px
}

body.page-single p {
    font-size: 15px
}

body.page-single article {
    margin-top: 25px
}

body.page-single ul li {
    color: #666;
    font-size: 15px
}

body.page-time-detail .time-wrapper {
    text-align: center;
    user-select: none;
    min-height: 320px
}

body.page-time-detail .time-wrapper .time-tip {
    color: #888
}

body.page-time-detail .time-wrapper .time-box span.time-grid {
    background: #00A5FF;
    box-shadow: 0px 13px 24px 0px rgba(3, 136, 209, 0.2);
    border-radius: 8px;
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    line-height: 68px;
    padding: 0 18px;
    display: inline-block
}

body.page-time-detail .time-wrapper .time-box span.colon {
    font-size: 34px;
    line-height: 68px;
    font-weight: bold;
    color: #3589FF;
    display: inline-block;
    padding: 0 4px
}

body.page-time-detail .time-wrapper .date-box {
    margin-top: 25px;
    color: #222
}

body.page-time-detail .area-info {
    min-height: 320px
}

body.page-time-detail .area-info ul li {
    color: #555;
    line-height: 2
}

body.page-time-detail .area-info ul li span {
    color: #309DDB
}

body.page-blog-index h1 {
    font-size: 32px;
    margin-bottom: 25px;
    font-weight: 600;
    margin-top: 35px
}

body.page-blog-index .post-item {
    position: relative;
    width: 100%;
    margin: 0 0 15px;
    padding: 15px 2px 20px 0;
    border-bottom: 1px solid #f0f0f0;
    word-wrap: break-word
}

body.page-blog-index .post-item a {
    color: #333
}

body.page-blog-index .post-item a:hover {
    color: #2f2f2f;
    text-decoration: underline
}

body.page-blog-index .post-item__title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #404040;
    text-overflow: ellipsis;
    white-space: nowrap
}

body.page-blog-index .post-item__intro {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 24px;
    color: #999
}

body.page-blog-index .post-item__btn {
    position: absolute;
    right: 0;
    top: 0
}

@media (max-width: 460px) {
    body.page-blog-index .post-item__btn {
        display:none
    }
}

body.page-blog-detail .title-box {
    border-bottom: 2px dashed #eaeaea;
    padding-bottom: 15px;
    margin-top: 35px
}

@media (max-width: 460px) {
    body.page-blog-detail .title-box {
        margin-top:10px
    }
}

body.page-blog-detail .title-box h1 {
    text-align: center;
    font-size: 28px;
    font-weight: 600
}

@media (max-width: 460px) {
    body.page-blog-detail .title-box h1 {
        font-size:22px
    }
}

body.page-blog-detail .title-box .post-meta {
    text-align: center
}

body.page-blog-detail .title-box .post-meta span {
    font-size: 13px;
    color: #969696
}

body.page-blog-detail .title-box .post-meta span:not(:last-child) {
    margin-right: 10px
}

body.page-blog-detail article h2 {
    font-size: 22px;
    font-weight: 600
}

body.page-blog-detail article h3 {
    font-size: 18px
}

body.page-blog-detail article pre code {
    display: block;
    margin-bottom: 15px
}

body.page-blog-detail article .content {
    margin-top: 20px
}

body.page-blog-detail article .content p {
    margin-bottom: 20px;
    word-break: break-word;
    line-height: 1.8;
    font-weight: 400;
    color: #404040;
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-feature-settings: "tnum";
    font-variant: tabular-nums
}

body.page-blog-detail article .content p img {
    max-width: 100%
}

body .page-title {
    margin-top: 25px;
    margin-bottom: 20px
}

body .page-content {
    margin-left: 220px;
    padding: 0 15px
}

@media (max-width: 768px) {
    body .page-content {
        margin-left:0;
        padding: 0
    }
}

body .left-nav {
    width: 220px;
    height: 100vh;
    position: fixed;
    overflow-y: hidden;
    left: 0;
    top: 0;
    background: #f6f7fa;
    z-index: 999
}

@media (max-width: 768px) {
    body .left-nav {
        position:relative;
        height: auto;
        width: 100%;
        text-align: center
    }
}

body .left-nav .left-nav-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh
}

@media (max-width: 768px) {
    body .left-nav .left-nav-wrapper {
        height:auto
    }
}

body .left-nav .left-nav-wrapper .logo-box {
    flex-shrink: 0;
    flex-grow: 0;
    color: #555;
    padding: 20px 15px;
	background: #f6f7fa;
}

body .left-nav .left-nav-wrapper .logo-box img {
    width: 40px;
    height: 40px;
    border-radius: 6px
}

body .left-nav .left-nav-wrapper .logo-box span {
    display: inline-block;
    line-height: 40px;
    margin-left: 10px;
    vertical-align: middle;
    color: #333;
    font-weight: 600;
    letter-spacing: 1px
}

body .left-nav .left-nav-wrapper .logo-box .left-nav-collapse {
    position: absolute;
    right: 6px;
    top: 30px;
    cursor: pointer;
    z-index: 999
}

@media (max-width: 640px) {
    body .left-nav .left-nav-wrapper .logo-box .left-nav-collapse {
        display:none
    }
}

body .left-nav .left-nav-wrapper .logo-box .left-nav-collapse::after {
    content: "";
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAR5JREFUSEu1lTFuwzAMRSWeJD2CQXluCxTolim74ylb145tTtLsvUGXZjdoXyBAsuUWZCLABgRDrUU58WhD//l/kqI1d37snfWNGtA0zRMAVACwLYriNPwgEW2stS/M/OacOw/vVYBe/Lc/XCPibhBq2/ZbRFYi8uqc+1EDRuI7RKzDeGcBpsQ9KBswEt8i4mesMbIA/2U+hqgBRLQ2xnzFCjrbgVZcVYNQnJmfy7LcpwxjUkRd1y2Y+egFNeLJDnqAH6QFADyEkzrlIsmBFyEi34YfqcXNmuQcSLKD4PJSOVEDtHFlASKQ214Vo7gq313GmCgk20EqZDYgiGtwctuFEzjxl+BjZOG8X9fCUkQqRDyoN9rUJP/1XbWTcyAX4T1FKAEE3cAAAAAASUVORK5CYII=");
    width: 20px;
    height: 20px;
    background-size: contain;
    display: inline-block
}

body .left-nav .left-nav-wrapper .nav-box {
    flex-shrink: 1;
    overflow-y: hidden;
    padding: 0 6px 6px 6px
}

@media (max-width: 768px) {
    body .left-nav .left-nav-wrapper .nav-box {
        display:none
    }
}

body .left-nav .left-nav-wrapper .nav-box:hover {
    overflow-y: auto
}

body .left-nav .left-nav-wrapper .nav-box ul li {
    vertical-align: middle;
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 8px
}

body .left-nav .left-nav-wrapper .nav-box ul li.active,body .left-nav .left-nav-wrapper .nav-box ul li:hover {
    background: #dce6fa
}

body .left-nav .left-nav-wrapper .nav-box ul li a {
    color: #333;
    display: block
}

body .left-nav .left-nav-wrapper .nav-box ul li img {
    width: 26px;
    height: 26px;
    margin-right: 12px;
    margin-top: -5px
}

body .left-nav .left-nav-open {
    display: none;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px
}

body .left-nav .left-nav-open::after {
    content: "";
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAQZJREFUSEu11k0OgjAQBeBn995BT2DIhLV6EvUk6knUjdfwZ4sDLtnpJdgOpkYTRCIzIN2R0Pd10k6hh45Hr+N8fABpmvazLNsDuBDRuogz8wbAiYi2lkV9AHEcj/I8vwI4E9H4HRRF0cQ5d3g9LyyICvDBzLwCsLQiaqACWRORR38OE1BAZgAGAGoRM2BFGgEWpDGgRVoBHnkdYd8jlXvSGigjzrlhEAT399H6J/BsxL8DpS7fEtGi2BitKqgL91BjQBPeGCiF/+xmcwXWm9UEMPMcgD/zfqiubTVQDBeRaRiGx7qbVL0HSZIMROTmJ1jCv4C6T6aI7LQrr+xkTcnWdzr/q3gAr8sQKNKgOuAAAAAASUVORK5CYII=");
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain
}

body.left-nav-collapse .left-nav {
    background: none
}

body.left-nav-collapse .left-nav .left-nav-wrapper {
    display: none
}

body.left-nav-collapse .left-nav .left-nav-open {
    display: block
}

body.left-nav-collapse .page-content {
    margin-left: 0;
    padding: 0 25px
}

body.left-nav-collapse footer {
    margin-left: 0;
    padding: 35px 25px
}
h2{font-size:22px;margin-top:25px}
.mobile-nav-toggle{position:fixed;top:15px;left:15px;z-index:1003;display:none}
.mobile-menu-btn{background:rgba(255,255,255,0.9);border:1px solid #ddd;border-radius:6px;padding:8px;width:44px;height:44px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:all 0.3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center}
.mobile-menu-btn:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.hamburger-line{width:20px;height:2px;background-color:#333;margin:2px 0;transition:0.3s;border-radius:1px}
@media (max-width:768px){.mobile-nav-toggle{display:block}
.left-nav{position:static;width:100%;height:auto;background:transparent}
.left-nav-wrapper{display:block}
.logo-box{display:flex;align-items:center;justify-content:center;padding:15px 70px 15px 70px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:1002}
.logo-box a{display:flex;align-items:center;text-decoration:none;color:#333}
.logo-box img{width:32px;height:32px;margin-right:10px}
.logo-box span{font-size:18px;font-weight:500}
.nav-box{display:none}
.left-nav-collapse,.left-nav-open{display:none}
.mobile-nav-menu{position:fixed;top:0;left:0;width:280px;height:100vh;background:#fff;z-index:1000;transform:translateX(-100%);transition:transform 0.3s ease;padding:20px;box-shadow:2px 0 8px rgba(0,0,0,0.15);overflow-y:auto;display:none}
.mobile-nav-menu.mobile-open{transform:translateX(0) !important;display:block !important}
.mobile-nav-menu ul{list-style:none;padding:0;margin:0}
.mobile-nav-menu li{margin-bottom:10px}
.mobile-nav-menu a{display:flex;align-items:center;padding:12px 15px;text-decoration:none;color:#333;border-radius:6px;transition:background-color 0.3s ease}
.mobile-nav-menu a:hover{background-color:#f5f5f5}
.mobile-nav-menu img{width:20px;height:20px;margin-right:10px}
.mobile-nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;display:none}
.mobile-nav-overlay.show{display:block}
}
@media (min-width:769px){.mobile-nav-menu{display:none !important}}
@media (max-width:768px){.mobile-nav-menu{display:none}}