/*----------- common -----------*/
body, div, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, table, th, td {
    margin: 0;
    padding: 0;
    font-size: 12px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal
}

caption,th {
    text-align: left
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal
}

q:before,q:after {
    content: ''
}

abbr,acronym {
    border: 0
}

body, button, input, select, textarea {
    font-size: 14px;
    font-family: Hiragino Sans GB,Helvetica,Arial,sans-serif;
}

ul, ol, li {
    list-style: none
}

body {
    font-family: "Hiragino Sans GB","微软雅黑",sans-serif;
    font-size: 14px;
    min-width: 1210px;
}

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical
}

*:focus {
    outline: none
}

a {
    text-decoration: none;
    color: #333;
}

input {
    border: medium none;
}

fieldset,img {
    border: 0px;
    vertical-align: middle;
}

button, input, select, textarea {
    font-size: 100%
}

.clear {
    clear: both;
}

.hidden {
    display: none;
}

/**:link,*:visited,*:hover,*:active,*:focus{-webkit-transition:color .25s linear,	background-color .25s linear;-moz-transition:color .25s linear,background-color .25s linear;}*/
/*阴影*/
.round {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    -ms-border-radius: 5px;
}

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom:1;/*IE/7/6*/
}

html .pa {
    position: absolute;
}

/* crumbs */
.crumbs {
    color: #333333;
    font-family: "Hiragino Sans GB","Microsoft YaHei","黑体",sans-serif;
    font-size: 14px;
    height: 54px;
    line-height: 54px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crumbs a {
    color: #000;
}

/* layer modal*/
.layer .modal {
    position: fixed;
    min-width: 300px;
    text-align: center;
    background: #fff;
    z-index: 9999;
    left: 40%;
    top: 30%;
    opacity: 1;
    filter: alpha(opacity = 100);
    border-top: 2px solid #ff7200;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.layer .modal-header {
    height: 30px;
    line-height: 30px;
    background-color: #efefef;
    border-bottom: 1px solid #e5e5e5;
    min-height: 16.43px;
    padding: 0 10px;
}

.layer .modal-header .title {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    width: 100%;
    height: 100%;
}

.layer .modal-header .title .close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
    border: 0;
    margin-top: 5px;
    cursor: pointer;
    background-color: transparent;
}

.layer .modal-body {
    padding: 10px;
    line-height: 20px;
    min-height: 30px;
    max-height: 400px;
}

.layer .modal-body .content {
    text-align: left;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
}

.layer .modal-footer {
    padding: 10px 10px;
}

.layer .modal-footer .btns button {
    float: right;
    padding: 6px 12px;
    background-color: #ff7200;
    border: 1px solid #ff7200;
    color: #fff;
    cursor: pointer;
}

.layer .modal-footer .btns .cancel {
    background-color: #999;
    border: 1px solid #999;
    color: #fff;
    margin-left: 10px;
}

.layer .bg {
    position: fixed;
    z-index: 9998;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    filter: alpha(opacity = 50);
    opacity: 0.5;
}

.layer.notice .modal,.layer.alert .modal,.layer.confirm .modal,.layer.addcart .modal {
    z-index: 99999;
}

.layer.notice .bg,.layer.alert .bg,.layer.confirm .bg,.layer.addcart .bg {
    z-index: 99998;
}

.layer.notice .modal {
    top: 30%;
    min-width: 100px;
}

.layer.notice .modal-body .content {
    text-align: center;
}

.layer.alert .modal {
    top: 30%;
}

.layer.confirm .modal {
    top: 30%;
}

.layer.open .modal {
    top: 10%;
}

.layer.addcart .modal .modal-header {
    background-color: #fff;
    border-bottom: 0px;
}

.layer.addcart .modal .modal-header button {
    background-color: #fff;
}

.layer.addcart .modal .modal-body {
    padding-top: 0px;
}

#js-layer-info .modal {
    background: rgba(0,0,0,.5);
    min-width: initial;
    border-top: none;
    top: 50%;
    left: 50%;
    text-align: center;
    border-radius: 3px;
    transform: translate(-50%,-50%);
    box-shadow: none;
}

#js-layer-info .modal .modal-content {
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    padding: 6px 20px;
}

/*----------- test -----------*/
.layout-module {
    margin: 5px;
    padding: 10px;
    border: 1px solid #C1C1C1;
}

/*回到精品馆*/
p#back-to-solutions {
    position: fixed;
    bottom: 110px;
    right: 50px;
}

p#back-to-solutions a {
    text-align: center;
    text-decoration: none;
    color: #d1d1d1;
    display: block;
    width: 50px;
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
    -moz-transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
}

p#back-to-solutions a:hover {
    color: #979797;
}

p#back-to-solutions a span {
    background: #d1d1d180 url(../images/gohome.png) no-repeat center center;
    border-radius: 6px;
    display: block;
    height: 50px;
    width: 50px;
    background-size: 45px 45px;
    margin-bottom: 5px;
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}

#back-to-solutions a:hover span {
    background: #97979780 url(../images/gohome.png) no-repeat center center;
    background-size: 45px 45px;
}

/*回到顶部*/
p#back-to-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
}

p#back-to-top a {
    text-align: center;
    text-decoration: none;
    color: #d1d1d1;
    display: block;
    width: 50px;
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
    -moz-transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
}

p#back-to-top a:hover {
    color: #979797;
}

p#back-to-top a span {
    background: #d1d1d180 url(../images/back_to_top.png) no-repeat center center;
    border-radius: 6px;
    display: block;
    height: 50px;
    width: 50px;
    background-size: 45px 45px;
    margin-bottom: 5px;
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}

#back-to-top a:hover span {
    background: #97979780 url(../images/back_to_top.png) no-repeat center center;
    background-size: 45px 45px;
}



 .layui-card {
     /* 设置背景色 */
     background-color: #f5f7fa;
     /* 设置边框 */
     border: 1px solid #e6e9ed;
     /* 设置圆角 */
     border-radius: 5px;
     /* 设置阴影 */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     /* 设置过渡效果 */
     transition: all 0.3s ease;
     /* 设置鼠标悬停效果 */
     overflow: hidden;
 }

.layui-card:hover {
    /* 鼠标悬停时变换背景色 */
    background-color: #e6e9ed;
    /* 放大阴影 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.layui-card-header {
    /* 设置标题背景色 */
    background-color: #a4b9d5;
    /* 设置标题颜色 */
    color: #333;
    /* 设置标题文字居中 */
    text-align: center;
    /* 设置标题字体大小 */
    font-size: 16px;
    /* 设置标题圆角 */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* 设置过渡效果 */
    transition: background-color 0.3s ease;
}


/* 自定义样式 */
.layui-card-header {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 水平间距 */
    padding: 10px 15px;
    height: 62px!important;
    border-bottom: 1px solid #e6e6e6;
    background-color: #f2f2f2;
    line-height: 22px!important;
    text-align: left!important;
}

.flex-container {
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 120px; /* 容器高度，根据需要调整 */
}

.flex-item {
   margin-left: 20px;
}

.number-circle {
    display: inline-block;
    width: 30px; /* 圆形背景的大小 */
    height: 30px;
    line-height: 30px; /* 使数字垂直居中 */
    border-radius: 50%; /* 设置圆形 */
    background-color: #ccc; /* 灰色背景 */
    color: #fff; /* 数字颜色 */
    text-align: center; /* 数字水平居中 */
    font-size: 16px; /* 数字大小 */
}

.header-number {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-right: 10px; /* 与标题之间的间距 */
}

.header-bt{
    display: block;
}

.card-div{
    display: flex;
}


.header-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.header-subtitle {
    font-size: 14px;
    color: #666;
    margin-top: 4px; /* 与标题之间的间距 */
}

.header-edit {
    display: flex;
    align-items: center;
}

.header-edit .layui-btn {
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    border-radius: 2px;
}

/* 如果你想要编辑按钮与其他元素有更大的间距，可以增加 margin-left */
.header-edit {
    margin-left: auto; /* 将编辑按钮推至最右侧 */
}

.icon_red{
    color: red;
    font-size: 24px!important;

    top: 48px; /* 向下移动 */
    cursor: pointer;
}


.layui-card:hover .layui-card-header {
    /* 鼠标悬停时变换标题背景色 */
    background-color: #d2d6de;
}

.layui-card-body {
    /* 设置内容区域的内边距 */
    padding: 20px;
}

.center-align {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中，但通常我们不这么用，因为这样会打乱表单的布局 */
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* 可能需要设置一个宽度 */
    width: fit-content; /* 或者具体的像素值，比如 width: 300px; */
}
.arrow-down {
    /* 箭头容器样式 */
    text-align: center; /* 水平居中箭头 */
    margin: 5px auto; /* 上下间距和水平居中 */
}

.arrow-stem {
    /* 箭头杆样式 */
    display: block;
    width: 2px;
    height: 60px; /* 箭头杆的高度 */
    background-color: #333;
    vertical-align: top; /* 与头部对齐 */
    position: relative; /* 为头部定位做准备 */
}

.arrow-head {
    /* 箭头头部样式 */
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #333; /* 箭头朝上，因此使用 border-top */

    top: 200px; /* 头部与杆底部连接 */
    text-align: center; /* 水平居中箭头 */

}
.tiptx{
    font-size: 10px!important;
    color: #ff0000!important;
    display: none;

}