/* page */
 html {
     width: 100%;
 }

 body {
     margin: 0 auto;
     box-sizing: border-box;
 }

 /* 手机 */
 @media (max-width: 600px) {
     body {
         width: 100%;
     }
 }

 /* 平板 */
 @media (min-width: 601px) and (max-width: 900px) {
     body {
         width: 40%;
     }
 }

 /* 显示器 */
 @media (min-width: 901px) {
     body {
         width: 30%;
     }
 }

 .bg {
     background-color: #EEEEEE;
 }

 .bg-button {
     background-color: #fd8c27;
 }

 /* 加企微按钮样式 */
 .addWeChat {
     border-radius: 50px;
     background: linear-gradient(45deg, #e4d063, #3d9176);
     font-size: 18px;
     color: #f7f7f7;
     padding: 10px 20px;
     cursor: pointer;
 }

 /* vue 动画 结合 transition-group(v-for组件)/transition */
 .fade-enter,
 .fade-leave-to {
     opacity: 0;
 }

 .fade-enter-to,
 .fade-leave {
     opacity: 1;
 }

 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 2s;
 }

 /* 通用的 */
 .d-n {
     display: none;
 }

 /* text */
 /* 缩进 */
 .ti-s {
     text-indent: 1em;
 }

 .ti-m {
     text-indent: 2em;
 }

 .ti-l {
     text-indent: 3em;
 }

 .ti-xl {
     text-indent: 4em;
 }

 .ti-xxl {
     text-indent: 5em;
 }

 .ta-center {
     text-align: center;
 }

 .ta-left {
     text-align: left;
 }

 .ta-right {
     text-align: right;
 }

 .ls-s {
     letter-spacing: 1px;
 }

 .ls-m {
     letter-spacing: 2px;
 }

 .ls-l {
     letter-spacing: 3px;
 }

 .ls-xl {
     letter-spacing: 4px;
 }

 .ls-xxl {
     letter-spacing: 5px;
 }

 .ft-s {
     font-size: 12px;
 }

 .ft-m {
     font-size: 16px;
 }

 .ft-l {
     font-size: 20px;
 }

 .ft-xl {
     font-size: 24px;
 }

 .ft-xxl {
     font-size: 28px;
 }

 .fw-b {
     font-weight: bold;
 }

 /* color */
 .bg-orange {
     background-color: #fd8c27;
 }

 .c-red {
     color: red;
 }

 .c-white {
     color: #fff;
 }

 .c-green {
     color: green;
 }


 .c-gray1 {
     color: rgb(221, 220, 220);
 }

 .c-gray2 {
     color: rgb(175, 175, 175);
 }

 .c-gray {
     color: gray;
 }

 .c-gray4 {
     color: rgb(102, 102, 102);
 }

 .c-gray5 {
     color: rgb(61, 61, 61);
 }

 /* margin */
 .m-h-auto {
     margin: 0px auto;
 }

 .m-v-auto {
     margin: auto 0;
 }

 .m-s {
     margin: 5px;
 }

 .m-m {
     margin: 10px;
 }

 .m-l {
     margin: 20px;
 }

 .m-xl {
     margin: 30px;
 }

 .m-xxl {
     margin: 50px;
 }

 .m-t-s {
     margin-top: 5px;
 }

 .m-t-m {
     margin-top: 10px;
 }

 .m-t-l {
     margin-top: 20px;
 }

 .m-t-xl {
     margin-top: 30px;
 }

 .m-t-xxl {
     margin-top: 50px;
 }

 .m-b-s {
     margin-bottom: 5px;
 }

 .m-b-m {
     margin-bottom: 10px;
 }

 .m-b-l {
     margin-bottom: 20px;
 }

 .m-b-xl {
     margin-bottom: 30px;
 }

 .m-b-xxl {
     margin-bottom: 50px;
 }

 .m-l-s {
     margin-left: 5px;
 }

 .m-l-m {
     margin-left: 10px;
 }

 /* padding */
 .p-h-auto {
     padding: 0px auto;
 }

 .p-v-auto {
     padding: auto 0;
 }

 .p-s {
     padding: 5px;
 }

 .p-m {
     padding: 10px;
 }

 .p-l {
     padding: 20px;
 }

 .p-xl {
     padding: 30px;
 }

 .p-xxl {
     padding: 50px;
 }

 .p-t-s {
     padding-top: 5px;
 }

 .p-t-m {
     padding-top: 10px;
 }

 .p-t-l {
     padding-top: 20px;
 }

 .p-t-xl {
     padding-top: 30px;
 }

 .p-t-xxl {
     padding-top: 50px;
 }

 .p-t-150 {
     padding-top: 150px;
 }

 .p-b-s {
     padding-bottom: 5px;
 }

 .p-b-m {
     padding-bottom: 10px;
 }

 .p-b-l {
     padding-bottom: 20px;
 }

 .p-b-xl {
     padding-bottom: 30px;
 }

 .p-b-xxl {
     padding-bottom: 50px;
 }

 /* border */
 .b-d-gray-s {
     border: 0.5px dashed gray;
 }

 .b-d-gray-m {
     border: 1px dashed gray;
 }

 .b-d-gray-l {
     border: 2px dashed gray;
 }

 .b-d-green-s {
     border: 0.5px dashed green;
 }

 .b-d-green-m {
     border: 1px dashed green;
 }

 .b-d-green-l {
     border: 2px dashed green;
 }

 .br-s {
     border-radius: 10px;
 }

 .br-m {
     border-radius: 20px;
 }

 .br-l {
     border-radius: 30px;
 }

 .br-xl {
     border-radius: 40px;
 }

 .br-xxl {
     border-radius: 50px;
 }

 /* avatar */
 .avatar-s {
     width: 30px;
     height: 30px;
 }

 .avatar-m {
     width: 40px;
     height: 40px;
 }

 .avatar-l {
     width: 50px;
     height: 50px;
 }

 .avatar-xl {
     width: 60px;
     height: 60px;
 }

 .avatar-xxl {
     width: 70px;
     height: 70px;
 }

 /* size */
 .w-100 {
     width: 100%;
 }

 .w-full {
     width: 100%;
 }

 .w-s {
     width: 60px;
 }

 .w-m {
     width: 120px;
 }

 .w-l {
     width: 180px;
 }

 .w-xl {
     width: 240px;
 }

 .h-full {
     height: 100%;
 }

 .h-s {
     height: 50px;
 }

 .h-m {
     height: 100px;
 }

 .h-l {
     height: 150px;
 }

 .h-xl {
     height: 200px;
 }

 .h-xxl {
     height: 300px;
 }
.hr{
    height: 30px;
    background-color: #831616;
    padding: 0;
    margin: 0;
}
 /* 底部固定悬浮元素 */
 .fixed-buttom {
     position: fixed;
     bottom: 0;
     left: 50%;
     /* 向左移动自身宽度的50%，实现水平居中 */
     transform: translateX(-50%);
     text-align: center;
     cursor: pointer;
 }

 /* 右边固定悬浮元素 */
 .fixed-right {
     position: fixed;
     bottom: 60px;
     right: 20px;
     text-align: center;
     cursor: pointer;
 }

 /* 子元素居中 列水平布局*/
 .child-center-v {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 .child-center-v-left {
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column;
}
 /* 子元素居中，列垂直布局 （n行1列布局） */
 .child-center-h {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* 子元素两列居中 需要设置子元素宽度 */
 .gird-2 {
     display: flex;
     flex-wrap: wrap;
     /* 允许按钮换行 */
     justify-content: center;
     gap: 10px;
 }