html, body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color: #f6f7f8;
    font-family: '微软雅黑', sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "阿里妈妈东方大楷 Regular";
    font-weight: 400;
    src: url("../font/b1tvVewWCXE8.woff2") format("woff2"),
    url("../font/b1tvVewWCXE8.woff") format("woff");
    font-display: swap;
}

.font-color-title {
    color: #222222;
}

.font-color-content {
    color: #333333;
}

.font-color-description {
    color: #666666;
}

.font-size-title {
    font-size: 16px;
}

.font-size-content {
    font-size: 14px;
}

.font-size-description {
    font-size: 12px;
}

.font-size-micro {
    font-size: 10px;
}

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

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

textarea {
    resize: none;
}

.big-div {
    width: 100%;
    text-align: center;
    background-color: #FFFFFF;
}

.small-div {
    width: 1400px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.header {
    padding: 16px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header .logo {
    width: auto;
    height: 80px;
}

.header .contact {
    height: 80px;
    padding: 0 16px;
    display: flex;
    font-family: "阿里妈妈东方大楷 Regular", "Arial", sans-serif;
    flex-direction: column;
    justify-content: center;
    color: #000000;
    font-weight: 600;
    font-size: 20px;
}

.footer {
    width: 1400px;
    padding: 48px 0;
}

.container {
    min-height: calc(100vh - 500px);
}

.menu {
    background-color: #000000;
    height: 56px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    justify-content: space-between;
}

.menu .menu-item {
    text-decoration: none;
    font-size: 16px;
    color: #fefefe;
    padding: 0 24px;
    line-height: 56px;
    height: 56px;
    transition: all 0.3s;
    font-weight: 500;
}

.menu .menu-item-sel {
    text-decoration: none;
    font-size: 16px;
    color: #fefefe;
    padding: 0 24px;
    line-height: 56px;
    height: 56px;
    transition: all 0.3s;
    background-color: #ff3f48;
    font-weight: 500;
}

.menu .menu-item:hover {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.18)
}

.menu .popup {
    background-color: #FFFFFF;
    width: 1352px;
    min-height: 380px;
    position: absolute;
    z-index: 1001;
    top: 56px;
    box-shadow: 0 5px 12px 2px rgba(0, 0, 0, 0.09);
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

.menu .popup .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.menu .popup .root-category {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    text-decoration: none;
}

.menu .popup .root-category:hover {
    color: #237fb2;
}

.menu .popup .second-category {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    margin: 0 0 6px 0;
}

.menu .popup .second-category:hover {
    color: #237fb2;
}

.red-color {
    color: #ff3f48;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #ff3f48 !important;
}

.rec-title {
    background-color: #FFFFFF;
    line-height: 48px;
    font-size: 16px;
    height: 46px;
    padding-left: 16px;
    padding-right: 16px;
    color: #000000;
    font-weight: 500;
    border-bottom: 1px solid #d9d9d9
}

.white-link {
    color: #FFFFFF;
    text-decoration: none;
}

.white-link:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.rec-link {
    color: #000000;
    font-size: 14px;
}

.rec-link:hover {
    color: #237fb2;
}

.link-red-button {
    background-color: #ff3f48;
    color: #fefefe;
    font-size: 14px;
    line-height: 34px;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    display: inline-block;
}

.link-red-button:hover {
    color: #FFFFFF;
}

.link-white-button {
    background-color: #FFFFFF;
    color: #000000;
    font-size: 14px;
    line-height: 34px;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    display: inline-block;
    cursor: pointer;
}

.link-white-button-sel {
    background-color: #ff3f48;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 34px;
    text-decoration: none;
    padding-left: 16px;
    padding-right: 16px;
    display: inline-block;
    cursor: pointer;
}

.link-white-button:hover {
    background-color: #ff3f48;
    color: #FFFFFF;
}

.contact-block {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    width: 120px;
    height: 44px;
    text-align: center;
    cursor: pointer;
    line-height: 44px;
    border-left: 1px solid #ff3f48;
}

.contact-block-sel {
    background-color: #FFFFFF;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    width: 120px;
    height: 44px;
    text-align: center;
    cursor: pointer;
    line-height: 44px;
    border-left: 1px solid #ff3f48;
}

.contact-block-input {
    height: 44px;
    border: 0;
    background-color: #FFFFFF;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    width: 345px;
    padding-left: 10px;
    padding-right: 10px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px
}

.product-card {
    width: 271px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.18);
    background-color: #FFFFFF;
    height: 306px;
    transition: all 0.3s;
    text-decoration: none;
    margin: 0 12px 12px 0;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 12px 2px rgba(0, 0, 0, 0.09);
}

.category-card {
    width: 267px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.18);
    background-color: #FFFFFF;
    height: 306px;
    transition: all 0.3s;
    text-decoration: none;
    margin: 0 12px 12px 0;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 12px 2px rgba(0, 0, 0, 0.09);
}

.layui-input-wrap .layui-input:focus + .layui-input-split {
    border-color: #237fb2;
}

.layui-input:focus, .layui-textarea:focus {
    border-color: #237fb2 !important;
    box-shadow: 0 0 0 3px rgba(35, 127, 178, .08) !important;
}

.layui-form-select dl dd.layui-this {
    color: #237fb2 !important;
}

.layui-form-label {
    width: 220px !important;
    text-align: left !important;
}

.layui-form-item {
    display: flex;
    flex-direction: row;
}