/*====================图文排序====================*/

@media screen and (max-width: 768px) { 
    .text-img-box { 
        display: flex; 
        flex-direction: column-reverse; 
    } 
    .text-img-box .text {
        order: 1;
    }
    .text-img-box .img {
        order: 2;
    } 

}

/*====================元素间距====================*/
.m0{
    margin:0!important
}
.mb0{
    margin-bottom:0!important
}

/*====================填充====================*/

.p0{
    padding:0!important
}

.pl10{
  padding-left: 10px;
}

.pr10{
  padding-right: 10px;
}

.p10 *{
  padding-left: 10px;
  padding-right: 10px;
}

.b0{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.pb0 *{
    padding-bottom: 0;
    margin-bottom: 0;
}

/*线条清空*/
.border0 *{
    border: none !important;
}

/*====================5列布局====================*/

.col-5 {
    width: 20% !important;
    float: left !important;
    display: flex !important;
    flex-basis: 20%;
    max-width: 20%;
}

@media only screen and (max-width: 48em) {
  .col-5 {
        width: 50% !important;
        float: left !important;
        display: flex !important;
        flex-basis: 50%;
        max-width: 50%;
    }  
}

@media (max-width: 1024px) {
  .col-5 {
        width: 50% !important;
        float: left !important;
        display: flex !important;
        flex-basis: 50%;
        max-width: 50%;
    }  
}

/*====================阴影====================*/
/* 保留原有过渡动画 */
.box-shadow-1,
.box-shadow-1-hover,
.box-shadow-2,
.box-shadow-2-hover,
.box-shadow-3,
.box-shadow-3-hover,
.box-shadow-4,
.box-shadow-4-hover,
.box-shadow-5,
.box-shadow-5-hover,
.row-box-shadow-1 .col-inner,
.row-box-shadow-1-hover .col-inner,
.row-box-shadow-2 .col-inner,
.row-box-shadow-2-hover .col-inner,
.row-box-shadow-3 .col-inner,
.row-box-shadow-3-hover .col-inner,
.row-box-shadow-4 .col-inner,
.row-box-shadow-4-hover .col-inner,
.row-box-shadow-5 .col-inner,
.row-box-shadow-5-hover .col-inner {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 阴影美化：更柔和、立体、现代感 */

/* Level 1 - 最轻微、几乎平面 */
.box-shadow-1,
.box-shadow-1-hover:hover,
.row-box-shadow-1 .col-inner,
.row-box-shadow-1-hover .col-inner:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Level 2 - 稍有浮起感 */
.box-shadow-2,
.box-shadow-2-hover:hover,
.row-box-shadow-2 .col-inner,
.row-box-shadow-2-hover .col-inner:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Level 3 - 现代卡片阴影（如 Material 设计） */
.box-shadow-3,
.box-shadow-3-hover:hover,
.row-box-shadow-3 .col-inner,
.row-box-shadow-3-hover .col-inner:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.08);
}

/* Level 4 - 悬浮卡片感（对比明显） */
.box-shadow-4,
.box-shadow-4-hover:hover,
.row-box-shadow-4 .col-inner,
.row-box-shadow-4-hover .col-inner:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.08);
}

/* Level 5 - 强调卡片、弹窗、模态框等 */
.box-shadow-5,
.box-shadow-5-hover:hover,
.row-box-shadow-5 .col-inner,
.row-box-shadow-5-hover .col-inner:hover {
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2);
}

/* Hover 状态上浮 */
.box-shadow-4-hover:hover,
.box-shadow-5-hover:hover,
.row-box-shadow-4-hover .col-inner:hover,
.row-box-shadow-5-hover .col-inner:hover {
  transform: translateY(-4px);
}