/*引入字体*/
@font-face {
    font-family: "Kaicz Font";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/kaicz.number.ttf") format("truetype")
}

html, body {
    background-color: #f9f9fb;
}

/*banner模块*/
.banner {
    width: 100%;
    background: #fff url(../images/bg-banner.webp) center/100% no-repeat;
    box-shadow: 0 0 5px rgba(29, 73, 120, 0.02);
    border-bottom: solid 1px #f1f1f8;
    position: relative;
    padding-top: 135px;
}

.banner h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 19px;
    font-weight: 600;
    line-height: 32px;
}

.banner .banner-info {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.banner .banner-info .use{
    display: flex;
    align-items: center;
    gap: 0 5px;
}

.banner .banner-info .use span{
    transform: translateY(0.8px);
}

.banner .banner-info .divider-line {
    margin-left: 12px;
    margin-right: 10px;
    height: 14px;
    width: 1px;
    background-color: #dde;
    transform: translateY(1px);
}

.banner .banner-info .author {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 5px;
}

.banner .banner-info .author .author-info {
    font-size: 14px;
    color: #424254;
}

.banner .banner-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3px;
}

.banner .banner-navbar .menu-tab {
    display: flex;
    gap: 0 25px;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 14px;
}

.banner .banner-navbar .menu-tab > li {
    height: 45px;
    line-height: 45px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: bold;
    gap: 7px;
    display: flex;
    align-items: center;
    font-family: sans-serif;
    position: relative;
    font-size: 15px;
}

.banner .banner-navbar .menu-tab > li > svg {
    fill: #BCBCD0;
    width: 14px;
    height: 14px;
}

.banner .banner-navbar .menu-tab > li.active, .banner .banner-navbar .menu-tab > li:hover {
    border-bottom: 2px solid #da203e;
    color: #da203e;
}

.banner .banner-navbar .menu-tab li.active > svg, .banner .banner-navbar .menu-tab > li:hover svg {
    fill: #da203e;
}

.banner .banner-navbar .menu-tab > li ul {
    position: absolute;
    top: 45px;
    left: -3px;
    z-index: 80;
    width: fit-content;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    overscroll-behavior: contain;
    -webkit-box-shadow: 0 0 20px rgba(27, 32, 50, 0.1);
    box-shadow: 0 0 20px rgba(27, 32, 50, 0.1);

    /* 初始状态 */
    display: flex;
    flex-direction: column;
    transform: scaleY(0.8);
    transform-origin: 0 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(.16, .75, .5, 1),
    opacity 0.25s ease,
    visibility 0s 0.25s;
}

.banner .banner-navbar .menu-tab > li:hover ul {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s cubic-bezier(.16, .75, .5, 1),
    opacity 0.25s ease,
    visibility 0s;
}

.banner .banner-navbar .menu-tab > li ul li {
    height: 36px;
    line-height: 36px;
    width: 100%;
    white-space: nowrap;
}

.banner .banner-navbar .menu-tab > li ul li a {
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    font-size: 14px;
    padding: 0 10px;
    color: #252b3a;
    font-weight: normal;
}

.banner .banner-navbar .menu-tab > li ul li a:hover {
    background-color: #f6f7fb;
}

/*操作按钮*/
.banner .banner-navbar .btn-operate {
    display: flex;
    align-items: center;
    gap: 0 8px;
    padding-bottom: 16px;
}

.banner .banner-navbar svg{
    transform: translateY(-0.5px);
}

.banner .banner-navbar .btn-operate .btn-share, .banner .banner-navbar .btn-operate .btn-shortcut {
    border-radius: 28px;
    border: 1px solid #252b3a;
    height: 32px;
    color: #252b3a;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 0 6px;
}

.banner .banner-navbar .btn-operate .btn-share:hover, .banner .banner-navbar .btn-operate .btn-shortcut:hover {
    background-color: #f8f8fa;
}

.banner .banner-navbar .btn-operate .btn-feedback {
    border-radius: 28px;
    border: 1px solid #252b3a;
    background-color: #252b3a;
    height: 32px;
    color: #fff;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    cursor: pointer;
}

.banner .banner-navbar .btn-operate .btn-share span, .banner .banner-navbar .btn-operate .btn-shortcut span, .banner .banner-navbar .btn-operate .btn-feedback span {
    font-size: 13.5px;
}

/*面包屑导航*/
.breadcrumb{
    margin-top: 18px;
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(29, 73, 120, 0.02);
    border-radius: 5px;
    padding: 12px 10px;
}

.breadcrumb .container .bc {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: #525765;
}

.breadcrumb .container .bc span, .breadcrumb .container .bc a {
    font-size: 13.5px;
}

.breadcrumb .container .ad {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 8px;
    margin-right: 10px;
}

.breadcrumb .container .ad li:nth-child(1) a {
    position: relative;
}

.breadcrumb .container .ad li:nth-child(1) a::before {
    content: "广告";
    position: absolute;
    left: -34px;
    top: -1px;
    background-color: #dad9d9;
    color: #fff;
    font-size: 11px;
    padding: 0 4px;
}

/*功能模块*/
.content{
    margin-top: 18px;
}

.content .container {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(29, 73, 120, 0.02);
    border-radius: 5px;
}

.content .navbar {
    display: flex;
    width: 100%;
    min-width: 1200px;
    height: 44px;
    border-bottom: solid 1px #eee;
}

.content .navbar > a {
    display: inline-block;
    float: left;
    padding: 0 18px;
    height: 16px;
    line-height: 16px;
    border-width: 2px 1px 0 1px;
    border-style: solid;
    border-color: #fff #eee #fff #fff;
    font-size: 13.5px;
    color: #696c72;
    position: relative;
    top: 12.5px;
}

.content .navbar > a:hover {
    color: #1967d2;
}

.content .navbar > a.active {
    padding: 0 18px;
    line-height: 42px;
    height: 44px;
    border: 1px solid #eee;
    border-bottom: none;
    color: #1967d2;
    position: relative;
    top: 0;
    border-top: 2px solid #1967d2;
    background: url(../images/bg-tab.png) #fff repeat-x left top;
    margin-left: -1px;
}

.content .navbar > div {
    display: inline-block;
    float: left;
    padding: 0 18px;
    height: 44px;
    line-height: 43px;
    border-width: 2px 1px 0 1px;
    border-style: solid;
    border-color: #fff;
    font-size: 13.5px;
    color: #696c72;
    position: relative;
    top: 0;
    cursor: pointer;
}

.content .navbar > div:hover{
    color: #1967d2;
}

.content .navbar > div > svg {
    transform: translateY(-2px);
}

.content .navbar > div > ul {
    position: absolute;
    left: -2px;
    top: 41px;
    z-index: 99;
    -webkit-box-shadow: 0 0 20px rgba(27, 32, 50, 0.1);
    box-shadow: 0 0 20px rgba(27, 32, 50, 0.1);
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 400;
    display: none;
}

.content .navbar > div:hover ul{
    display: block;
}

.content .navbar > div > ul li a{
    display: block;
    font-size: 13.5px;
    min-width: 120px;
    line-height: 32px;
    color: #696c72;
}

.content .navbar > div > ul li a:hover{
    color: #1967d2;
}

/*功能模块-工具部分*/
.content .tools {
    padding: 30px;
}

.content .tools .input-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    position: relative;
    margin: 0 auto;
}

.content .tools .input-group .input-item {
    display: block;
    width: 100%;
    position: relative;
}

.content .tools .input-group .dropdown {
    position: absolute;
    top: 46px;
    left: 0;
    z-index: 50;
    width: 600px;
    padding: 10px 0;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 20px rgba(27, 32, 50, 0.1);
    box-shadow: 0 0 20px rgba(27, 32, 50, 0.1);

    /* 初始状态 */
    transform: scaleY(0.8);
    transform-origin: 0 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(.16, .75, .5, 1),
    opacity 0.25s ease,
    visibility 0s 0.25s;
}

.content .tools .input-group .dropdown-active {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s cubic-bezier(.16, .75, .5, 1),
    opacity 0.25s ease,
    visibility 0s;
}

.content .tools .input-group .dropdown li {
    height: 32px;
    line-height: 32px;
    color: #757575;
    font-family: 'Microsoft YaHei', serif;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
    user-select: none;
}

.content .tools .input-group .dropdown li:hover {
    background-color: #f0f7ff;
    color: #1967d2;
}

.content .tools .input-group .dropdown li span.url {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
    font-size: 15px;
}

.content .tools .input-group .dropdown li span.del {
    color: #fff;
    font-size: 12px;
    background-color: #4192E7;
    border: 1px solid #4192E7;
    border-radius: 3px;
    line-height: 19px;
    height: 21px;
    padding: 0 5px;
    margin-top: 5px;
}

.content .tools .input-inline {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    height: 44px;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #56688a;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.content .tools .textarea-block {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 132px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #56688a;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.content .tools input:hover, .content .tools textarea:hover {
    border-color: #57a3f3;
}

.content .tools input:focus, .content .tools textarea:focus {
    border-color: #57a3f3;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
}

.content .tools .input-close {
    position: absolute;
    right: 12px;
    top: 10px;
    cursor: pointer;
    display: none;
}

.content .btn-group {
    display: flex !important;
    gap: 10px;
}

/*蓝色按钮*/
.content .tools .btn-primary {
    display: inline-block;
    width: fit-content;
    background-color: #4192E7;
    color: #fff;
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    padding: 0 18px;
    transition: all .1s ease;
    font-size: 14px;
    border-width: 0;
    cursor: pointer;
}

/*绿色按钮*/
.content .tools .btn-success {
    display: inline-block;
    width: fit-content;
    background-color: #40bc62;
    color: #fff;
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    padding: 0 18px;
    transition: all .1s ease;
    font-size: 14px;
    border-width: 0;
    cursor: pointer;
}

/*红色按钮*/
.content .tools .btn-danger {
    display: inline-block;
    width: fit-content;
    background-color: #d9534f;
    color: #fff;
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    padding: 0 18px;
    transition: all .1s ease;
    font-size: 14px;
    border-width: 0;
    cursor: pointer;
}

/*灰色按钮*/
.content .tools .btn-grey {
    display: inline-block;
    width: fit-content;
    background-color: #555;
    color: #fff;
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    padding: 0 18px;
    transition: all .1s ease;
    font-size: 14px;
    border-width: 0;
    cursor: pointer;
}

.content .tools .btn-primary:hover, .content .tools .btn-success:hover, .content .tools .btn-danger:hover, .content .tools .btn-grey:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.content .tools .btn-primary:active, .content .tools .btn-success:active, .content .tools .btn-danger:active, .content .tools .btn-grey:active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/*带边框按钮*/
.content .tools .btn-border {
    display: inline-block;
    width: fit-content;
    background-color: #fff;
    color: #515a6e;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    height: 44px;
    line-height: 42px;
    padding: 0 18px;
    transition: all .1s ease;
    font-size: 14px;
    cursor: pointer;
}

.content .tools .btn-border:hover {
    border: 1px solid #1967d2;
    color: #1967d2;
}

/*下拉列表*/
.content .tools .input-select {
    display: inline-block;
    width: 140px;
    background-color: #fff;
    color: #515a6e;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    height: 44px;
    line-height: 42px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.content .tools .input-select:hover {
    border-color: #57a3f3;
}

.content .tools .input-select-active {
    border-color: #57a3f3;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(45, 140, 240, 0.2);
}

.content .tools .input-select > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 8px 0 10px;
    user-select: none;
}

.content .tools .btn-border:hover {
    border: 1px solid #1967d2;
    color: #1967d2;
}

.content .tools .input-select ul {
    position: absolute;
    top: 36px;
    left: 0;
    width: 139px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    margin: 5px 0;
    padding: 5px 0;
    box-sizing: border-box;
    transform: scaleY(0.7);
    transform-origin: 0 0;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(.16, .75, .5, 1), opacity 0.25s ease, visibility 0.25s ease;
    visibility: hidden;
    z-index: 10;
}

.content .tools .input-select ul.active {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s cubic-bezier(.16, .75, .5, 1),
    opacity 0.25s ease;
}

.content .tools .input-select ul li {
    padding: 7px 16px;
    color: #515a6e;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.content .tools .input-select ul li:hover, .content .tools .input-select ul li.active {
    color: #1967d2;
    background-color: #f5f6f7;
}

.content .tools .btn-small {
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    padding: 0 15px;
}

.content .tools .label-small {
    height: 36px;
    line-height: 36px;
    color: #515a6e;
}

.content .tools .select-small {
    height: 36px;
    line-height: 36px;
    color: #515a6e;
}

.content .tools .input-checkbox .label-small{
    display: flex;
    align-items: center;
    height: 36px;
    gap: 5px;
    margin: 0 5px;
    user-select: none;
    cursor: pointer;
}

.content .tools .input-checkbox input{
    outline: none;
    box-shadow: none;
}

/*功能模块-生成部分*/
.content .tools-result {
    padding: 0 17px 18px;
}

/* 通用 Table 样式 */
.table {
    border: 1px solid #e3e3ee;
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.table caption {
    padding-bottom: 8px;
    text-align: left;
}

.table thead tr {
    background-color: #f9f9fb;
}

.table tr td,
.table tr th {
    padding: 8px;
    line-height: 2;
    vertical-align: top;
    border: 1px solid #e3e3ee;
    text-align: left;
}

/* 第一种：隔行变色（斑马纹） */
.table-zebra tbody tr:nth-of-type(odd) {
    background-color: #fff;
}

.table-zebra tbody tr:nth-of-type(even) {
    background-color: #f9f9fb;
}

/* 第二种：所有行背景相同 */
.table-solid tbody tr {
    background-color: #fff;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

/*工具简介*/
.introduce{
    margin-top: 18px;
}

.introduce .container {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(29, 73, 120, 0.02);
    border-radius: 5px;
    padding: 15px 12px;
    font-size: 14px;
}

.introduce .container .intro-tit {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.introduce .container .intro-tit h4 {
    font-weight: 600;
    font-size: 15.5px;
    position: relative;
    padding-left: 12px;
    color: #252b3a;
}

.introduce .container .intro-tit h4::before {
    content: "";
    position: absolute;
    top: 3.5px;
    left: 0;
    width: 3px;
    height: 15px;
    background-color: #1967d2;
}

.introduce .container .intro-tit .ad {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 8px;
    margin-right: 5px;
}

.introduce .container .intro-tit .ad li:nth-child(1) a {
    position: relative;
}

.introduce .container .intro-tit .ad li:nth-child(1) a::before {
    content: "广告";
    position: absolute;
    left: -34px;
    top: -1px;
    background-color: #dad9d9;
    color: #fff;
    font-size: 11px;
    padding: 0 4px;
}

.introduce .container .intro-con {
    margin: 0 5px;
    position: relative;
    background: url(../images/html-beautifier.png) no-repeat right 10px bottom 10px;
    background-size: 400px;
}

.introduce .container .intro-con p {
    line-height: 33px;
    color: #454545;
    font-size: 14px;
}

.links {
    color: #1967d2;
}

.links:hover {
    text-decoration: underline;
}

.content hr {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #eee;
    background: none;
}

/*相关推荐*/
.relation{
    margin-top: 18px;
}

.relation .container{
    background-color: #fff;
    box-shadow: 0 0 5px rgba(29, 73, 120, 0.02);
    border-radius: 5px;
}

.relation .navbar {
    display: flex;
    width: 100%;
    min-width: 1200px;
    height: 44px;
    border-bottom: solid 1px #eee;
}

.relation .navbar > li {
    display: inline-block;
    float: left;
    padding: 0 18px;
    height: 16px;
    line-height: 16px;
    border-width: 2px 1px;
    border-style: solid;
    border-color: #fff #eee #fff #fff;
    font-size: 13.5px;
    color: #696c72;
    position: relative;
    top: 12.5px;
    cursor: pointer;
}

.relation .navbar > li.active {
    padding: 0 18px;
    line-height: 42px;
    height: 44px;
    border: 1px solid #eee;
    border-bottom: none;
    color: #1967d2;
    position: relative;
    top: 0;
    border-top: 2px solid #1967d2;
    background: url(../images/bg-tab.png) #fff no-repeat left top;
}

.relation .main {
    padding: 10px 17px;
    width: 100%;
    height: auto;
}

.relation .main ul {
    display: none;
}

.relation .main ul.active {
    display: flex;
    flex-wrap: wrap;
}

.relation .main ul li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 35px;
    width: 11.11%;
}

.relation .main ul li a {
    color: #696c72;
}

.btn-copy{
    position: relative;
    padding-left: 32px !important;
}

.btn-copy::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 17px;
    height: 17px;
    background: url("../images/icon-copy.svg") center no-repeat;
    background-size: 100%;
}

.btn-copy:hover::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 17px;
    height: 17px;
    background: url("../images/icon-copy-active.svg") center no-repeat;
    background-size: 100%;
}

.btn-del{
    position: relative;
    padding-left: 30px !important;
}

.btn-del::before{
    content: "";
    position: absolute;
    top: 11px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: url("../images/icon-del.svg") center no-repeat;
    background-size: 100%;
}

.btn-del:hover::before{
    content: "";
    position: absolute;
    top: 11px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: url("../images/icon-del-active.svg") center no-repeat;
    background-size: 100%;
}