/*

*/

:root {
    --primary: #333333;
    --secondary: #666666;

    --success: #66B032;
    --successBorderColor:#5ba02a;
    --successHoverColor:rgb(91, 156, 44);
    --successActiveColor:rgb(73, 129, 33);

    --info: #497bff;
    --infoBorderColor:#3160e2;
    --infoHoverColor:#3b65d6;
    --infoActiveColor:#2e55c0;
  
    --warning: #FB9902;
  
    --danger: #cd1300;
    --dangerBorderColor:#aa1100;
    --dangerHoverColor:#b41200;
    --dangerActiveColor:#9c1000;

    --black: #000000;
    --white: #ffffff;

    --dark1: #999;
    --dark2: #666;
    --dark3: #333;


    --gray1: #f5f5f5;
    --gray2: #f0f0f0;
    --gray3: #eee;
    --gray4: #ddd;
    --gray5: #ccc;
    --gray6: #bbb;

    --background1:#fdfdfd;
    --background2:#fcfcfc;
    --background3:#fafafa;
    --background4:#f6f6f6;
    --background5:#f0f0f0;

    --red:#FE2712;
    --redOrange:#FC600A;
    --orange:#FB9902;
    --yellowOrange:#FCCC1A;
    --yellow:#FEFE33;
    --yellowGreen:#B2D732;
    --green:#66B032;
    --cyan:#347C98;
    --blue:#0247FE;
    --bluePurple:#4424D6;
    --purple:#8601AF;
    --purpleRed:#C21460;

    --borderColor: #eee;

    --placeholderColor:#a9a9a9;

    --background:#ffffff;
    --backgroundInput:#f3f3f3;
    

    --sizeDefault:+ 0rem;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 100px;
}

body {
    padding: 0;
    margin: 0;
    color: var(--dark3);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    word-break: break-all;
    background-color:var(--background);
    font-size: calc(0.15rem var(--sizeDefault));
}

a {
    text-decoration: none;
    color: var(--primary);
}

a:hover{
    color: var(--secondary);
    transition: color 0.3s ease;
}

input,textarea,.input{
    border-radius: 5px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    box-sizing: border-box;
    width: 100%;
    border:none;
    font-size: calc(0.15rem var(--sizeDefault));
    background-color:var(--backgroundInput);
    padding: 10px;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.1);
    border:1px solid rgb(236, 236, 236);
}
select{
    border-radius: 5px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    box-sizing: border-box;
    width: 100%;
    border:none;
    font-size: calc(0.15rem var(--sizeDefault));
    background-color:var(--backgroundInput);
    padding: 10px;
    border:1px solid rgb(236, 236, 236);
}

  input:focus,textarea:focus{
    outline: none;
  }
  input::placeholder,textarea::placeholder {
    color: var(--placeholderColor);
  }
  input:disabled{
      background-color: #e9e9e9;
      box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.1);
      color: var(--gray7);
      cursor: no-drop;
      border:1px solid rgb(226, 226, 226);
  }
  /* 隐藏Chrome和Safari中的箭头 */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  
  /* 隐藏Firefox中的箭头 */
  input[type="number"] {
      -moz-appearance: textfield;
  }
  

/* 自动换行输入框 */
.input{
    display: block;
    cursor:text;
}
.input[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color:var(--placeholderColor);
    white-space: pre-wrap; /* 允许换行符 */

}
.input[contenteditable="true"] {
    white-space: pre-wrap; /* 允许内容换行 */
}

div[contenteditable="true"]:focus{
    outline: none;
}


  button{ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; 
    font-size: calc(0.15rem var(--sizeDefault));
    white-space: nowrap;
  }

  .buttonDefault {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray4);
    background-color: var(--gray3);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
  }
  .buttonDefault:hover{
    background-color: var(--gray4);transition: background-color 0.3s ease;
  }
  .buttonDefault:active{
    background-color: var(--gray5);transition: background-color 0.3s ease;
  }
  .buttonDefault:disabled{ background-color:var(--gray3);}

  .buttonDanger {
    display: flex;
    align-items: center;
    border: 1px solid var(--dangerBorderColor);
    background-color: var(--danger);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    color:#ffffff;
  }
  .buttonDanger:hover{
    background-color: var(--dangerHoverColor);transition: background-color 0.3s ease;
  }
  .buttonDanger:active{
    background-color: var(--dangerActiveColor);transition: background-color 0.3s ease;
  }
  .buttonDanger>span{
    color:#ffffff;
  }

  .buttonInfo {
    display: flex;
    align-items: center;
    border: 1px solid var(--infoBorderColor);
    background-color: var(--info);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    color:#ffffff;
  }
  .buttonInfo:hover{
    background-color: var(--infoHoverColor);transition: background-color 0.3s ease;
  }
  .buttonInfo:active{
    background-color: var(--infoActiveColor);transition: background-color 0.3s ease;
  }
  .buttonInfo>span{
    color:#ffffff;
  }

  .buttonSuccess {
    display: flex;
    align-items: center;
    border: 1px solid var(--successBorderColor);
    background-color: var(--success);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    color:#ffffff;
  }
  .buttonSuccess:hover{
    background-color: var(--successHoverColor);transition: background-color 0.3s ease;
  }
  .buttonSuccess:active{
    background-color: var(--successActiveColor);transition: background-color 0.3s ease;
  }
  .buttonSuccess>span{
    color:#ffffff;
  }


  .buttonWxPay {
    display: flex;
    align-items: center;
    border: 1px solid #1d9c32;
    background-color: #22ac38;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    color:#ffffff;
  }
  .buttonWxPay:hover{
    background-color: #19942e;transition: background-color 0.3s ease;
  }
  .buttonWxPay:active{
    background-color: #148126;transition: background-color 0.3s ease;
  }
  .buttonWxPay>span{
    color:#ffffff;
  }

  .buttonAliPay {
    display: flex;
    align-items: center;
    border: 1px solid #0f6fec;
    background-color: #167aff;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    color:#ffffff;
  }
  .buttonAliPay:hover{
    background-color: #0b68e0;transition: background-color 0.3s ease;
  }
  .buttonAliPay:active{
    background-color: #0657c0;transition: background-color 0.3s ease;
  }
  .buttonAliPay>span{
    color:#ffffff;
  }

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li{
    margin: 0;
    padding: 0;
}
li{list-style: none;}
img{
    vertical-align: bottom;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}
#afterLoading{ display: none;}

/* 多选框样式 */
label{ cursor: pointer;}
input[type='checkbox'] {
    display: none;
  }
  
  input[type='checkbox'] + span {
    position: relative;
    padding-left: calc(0.3rem var(--sizeDefault));
    cursor: pointer;
  }
  
  input[type='checkbox'] + span:before {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    width: calc(0.2rem var(--sizeDefault));
    height: calc(0.2rem var(--sizeDefault));
    border-radius: 0.03rem;
    background-color:var(--backgroundInput);
    vertical-align: middle;
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1);
  }
  
  input[type='checkbox']:checked + span:before {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    width: calc(0.2rem var(--sizeDefault));
    height: calc(0.2rem var(--sizeDefault));
    background-image: url('/static/zuoTuBao/images/right.png');
    background-size: 130%;
    background-position: -3px center;
    background-repeat: no-repeat;
}
  

/*分页样式*/
.page{
    background-color: var(--backgroundInput);transition: background-color 0.3s ease;
    padding: 0.1rem 0;
    border-radius: 0.03rem;
    text-align: center;
}
.page>a{ padding: 0px 5px 0px 5px; margin: 0 0.05rem;}
.page>a:hover{
    background-color: var(--primary);transition: background-color 0.3s ease;
    color:#ffffff;
    border-radius: 0.03rem;
}
.page>a.active{
    background-color: var(--primary);transition: background-color 0.3s ease;
    color:#ffffff;
    border-radius: 0.03rem;
}


/*栅格*/
.row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: calc(-1 * (0.2rem var(--sizeDefault)));
    margin-left: calc(-1 * (0.2rem var(--sizeDefault)));
    
}
.rowXs{
    margin-right: calc(-1 * (0.1rem var(--sizeDefault)));
    margin-left: calc(-1 * (0.1rem var(--sizeDefault)));
}

.col,.colMobile{
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	min-width: 0;
	max-width: 100%
}

.row .col{
    position: relative;
    width: 100%;
    padding-right: calc(0.2rem var(--sizeDefault));
    padding-left: calc(0.2rem var(--sizeDefault));
}
.rowXs .col{
    padding-right: calc(0.1rem var(--sizeDefault));
    padding-left: calc(0.1rem var(--sizeDefault));
}

.col1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col4{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col5{
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col7{
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col8{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col10{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col11{
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.cols1>*{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.cols2>*{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.cols3>*{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.cols4>*{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.cols5>*{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.cols6>*{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

/*容器*/
.container,
.containerMobile,
.containerFull{
    width: 100%;
    max-width: 100%;
    padding-left: calc(0.2rem var(--sizeDefault));
    padding-right: calc(0.2rem var(--sizeDefault));
}

@media screen and (min-width:700px) {
    .container,
    .containerMobile{
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width:992px) {

    .colMobile1{
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .colMobile2{
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .colMobile3{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .colMobile4{
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .colMobile5{
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .colMobile6{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .colMobile7{
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .colMobile8{
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .colMobile9{
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .colMobile10{
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .colMobile11{
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .colMobile12{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }


    .colsMobile1>*{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .colsMobile2>*{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .colsMobile3>*{
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .colsMobile4>*{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .colsMobile5>*{
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    .colsMobile6>*{
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

}

@media screen and (min-width:992px) {
    .container{
        max-width: 960px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (min-width:1200px) {
    .container{
        max-width: 1200px;
        margin-right: auto;
        margin-left: auto;
    }
}


/*Tooltips 工具提示*/
.tipTool{
    position: relative;
}

.tipTool>span:nth-child(1){
    position: absolute;
    bottom: 40px;
    background-color: var(--white);
    min-width: 220px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    border:1px solid #ddd;

}
.tipTool > span:nth-child(1)::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 13px solid #ddd; /* 边框颜色 */
    left: 50%;
    transform: translateX(-50%);
    bottom: -13px; /* 往下铺底 */
    z-index: 0;
}

.tipTool > span:nth-child(1)::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 11px solid var(--white); /* 内容区域颜色 */
    left: 50%;
    transform: translateX(-50%);
    bottom: -11px;
    z-index: 1;
}

.labelDefault{display: flex; align-items: center; background-color: #eee; padding: 5px; border-radius: 3px; cursor: pointer;

    /* 禁用用户选择文本 */
    -webkit-user-select: none; /* 针对 Chrome, Safari */
    -moz-user-select: none;    /* 针对 Firefox */
    -ms-user-select: none;     /* 针对 Internet Explorer/Edge */
    user-select: none;         /* 非前缀属性，现代浏览器支持 */
}
.labelDefault:hover{ background-color: #ddd;transition: background-color 0.3s ease;}
.labelDefault:active{
    background-color: rgb(207, 207, 207); transition: background-color 0.3s ease;
}

.skeletonScreen {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 150% 100%;
    animation: skeleton-loading 1.2s linear infinite;
    will-change: background-position;
    border-radius: 3px !important;
}
.skeletonScreen * {
    opacity: 0;
}
  
@keyframes skeleton-loading {
    0% {
        background-position: 150% 0;
    }
    100% {
        background-position: -150% 0;
    }
}

.opacityOnHover:hover{opacity: 0.7;transition: opacity 0.3s ease;}
.rotateOnHover {
  transition: transform 0.5s ease;
  cursor: pointer;
}
.rotateOnHover:hover {
  transform: rotate(90deg);
}