/*piii v3.1.5 2025.4.24*/
/*通用*/
*{margin: 0;padding: 0;box-sizing: border-box}
li{list-style-type:none}
a{text-decoration:none}
button{vertical-align:top;}
textarea{resize:none;}

/*去掉input的type为number时的箭头，兼容chrome和firefox*/
::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;!important}
input[type="number"]{-moz-appearance:textfield;!important}

/*宽度百分比*/
.width5p{width:5%}
.width8p{width:8%}
.width10p{width:10%}
.width12p{width:12%}
.width15p{width:15%}
.width20p{width:20%}
.width25p{width:25%}
.width30p{width:30%}
.width35p{width: 35%}
.width42p{width: 42%}
.width50p{width: 50%}


/*宽度数值(rem)*/
.width5r{width: 5rem;}
.width6r{width: 6rem;}
.width7r{width: 7rem;}
.width8r{width: 8rem;}
.width10r{width: 10rem;}
.width12r{width: 12rem;}
.width15r{width: 15rem;}
.width18r{width: 18rem;}
.width20r{width: 20rem;}


/*一行的高度(rem)*/
.lineheight1r{line-height: 1rem;}
.lineheight2r{line-height: 2rem;}
.lineheight3r{line-height: 3rem;}
.lineheight4r{line-height: 4rem;}

/*背景颜色*/
.bk-blue{background-color: deepskyblue}
.bk-pink{background-color: pink}
.bk-green{background-color: lightgreen}

/*背景颜色（浅色）*/
.bk-spink{background-color: #fad7d7;}
.bk-sblue{background-color: #b8daee;}
.bk-sgreen{background-color: #b5f5b5;}

/*文字颜色*/
.col-main-blue{color: #2ca4dc;}
.col-red{color: red;}
.col-lblack{color: #464646}
.col-orange{color: #ec9c0b;}

/*flex系列*/
.flex-space-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;align-items:center;justify-content:center}

/*遮罩层系列*/
.display-show{display:block}
.display-hidden{display:none}

/*border-radius系列*/
.border-radius-p50{border-radius:50%}
.border-radius-p10{border-radius:10%}
.border-radius-03r{border-radius:0.3rem}
.border-radius-05r{border-radius:0.5rem}

/*按钮系列*/
/*按钮尺寸*/
.button-small{height:1.8rem;padding:0 0.6rem;font-size:0.9rem;cursor:pointer}
.button-middle{height:2rem;padding:0 0.8rem;font-size:1rem;cursor:pointer}
.button-large{height:2.2rem;padding:0 1rem;font-size:1.1rem;cursor:pointer}

/*蓝底白字*/
.button-blue-white{background-color:#2ca5de;color:white;border:none}
.button-blue-white:hover{background-color:rgba(44,165,222,0.9)}

/*红底白字*/
.button-red-white{background-color:#e2393c;color:white;border:none}
.button-red-white:hover{background-color:rgba(226,57,60,0.9)}

/*青底白字*/
.button-cyan-white{background-color:#4dc0e7;color:white;border:none}
.button-cyan-white:hover{background-color:rgba(77,192,231,0.9)}

/*灰底黑字*/
.button-grey-black{background-color: #e9e9e9;color:black;border:none}
.button-grey-black:hover{background-color: rgba(233, 233, 233, 0.9)}

/*遮罩层*/
/*遮罩层-全页面*/
.shade-page-all{position:fixed;left:0;top:0;background:rgba(0,0,0,0.2);width:100%;height:100%;z-index: 900;display: none;}
.shade-page-main{position:relative;background: rgb(255, 255, 255);border-radius:0.5rem;display:inline-block;z-index: 999;padding: 1.5rem;}

/*父元素适应子元素高度*/
.parent-suit-son-height{display: flow-root;min-height: fit-content;height: auto;}

/*基础换行*/
.wrap-line-basic{word-wrap: break-word;word-break: normal;}
/*强制换行*/
.wrap-line-force{word-break: break-all;}
/*保持单词完整性的换行*/
.wrap-line-integrity{overflow-wrap: break-word;white-space: normal;}
/*长字符直接换行*/
.wrap-line-direct{word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;}
/*文字溢出省略号*/
.word-overflow-omit{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/*三、动画*/
/*渐隐(平滑)*/
/*  --fadeout-left-x:-10rem;!*左渐隐，起始偏移距离*!
    --fadeout-left-opacity-start:0;!*左渐隐，起始透明度*!
    --fadeout-left-opacity-end:1;!*左渐隐，终止透明度*!
    --fadeout-left-times:2s;!*左渐隐，动画时间*!
    --fadeout-left-opacity-finish:1;!*左渐隐，动画终止时透明度*!
    ------------------------------------------------------
    --fadeout-right-x:10rem;!*右渐隐，起始偏移距离*!
    --fadeout-right-opacity-start:0;!*右渐隐，起始透明度*!
    --fadeout-right-opacity-end:1;!*右渐隐，终止透明度*!
    --fadeout-right-times:2s;!*右渐隐，动画时间*!
    --fadeout-right-opacity-finish:1;!*右渐隐，动画终止时透明度*!
    ------------------------------------------------------
    --fadeout-opacity-start:1;!*渐隐，起始透明度*!
    --fadeout-opacity-end:0;!*渐隐，终止透明度*!
    --fadeout-times:2s;!*渐隐，动画时间*!
    --fadeout-opacity-finish:0;!*渐隐，动画终止时透明度*!
*/
.fadeout-left{animation:fadeout-left var(--fadeout-left-times,2s);opacity:var(--fadeout-left-opacity-finish,0)}
.fadeout-right{animation:fadeout-left var(--fadeout-right-times,2s);opacity:var(--fadeout-right-opacity-finish,0)}
@keyframes fadeout-left{100%{transform:translateX(var(--fadeout-left-x,-10rem))}from{opacity:var(--fadeout-left-opacity-start,1)}to{opacity:var(--fadeout-left-opacity-end,0)}}
@keyframes fadeout-right{100%{transform:translateX(var(--fadeout-right-x,10rem))}from{opacity:var(--fadeout-right-opacity-start,1)}to{opacity:var(--fadeout-right-opacity-end,0)}}


@keyframes fadeout {from{opacity:var(--fadeout-opacity-start,1)}to{opacity:var(--fadeout-opacity-end,0)}}
.fadeout{animation: fadeout var(--fadeout-times,2s);opacity:var(--fadeout-opacity-finish,0);}


/*渐显(平滑)*/
/*  --fadein-left-x:-10rem;!*左渐显，起始偏移距离*!
    --fadein-left-opacity-start:0;!*左渐显，起始透明度*!
    --fadein-left-opacity-end:1;!*左渐显，终止透明度*!
    --fadein-left-times:2s;!*左渐显，动画时间*!
    --fadein-left-opacity-finish:1;!*左渐显，动画终止时透明度*!
    -------------------------------------------------
    --fadein-right-x:10rem;!*右渐显，起始偏移距离*!
    --fadein-right-opacity-start:0;!*右渐显，起始透明度*!
    --fadein-right-opacity-end:1;!*右渐显，终止透明度*!
    --fadein-right-times:2s;!*右渐显，动画时间*!
    --fadein-right-opacity-finish:1;!*右渐显，动画终止时透明度*!
    ----------
    --fadein-opacity-start:0;!*渐显，起始透明度*!
    --fadein-opacity-end:1;!*渐显，终止透明度*!
    --fadein-times:2s;!*渐显，动画时间*!
    --fadein-opacity-finish:1;!*渐显，动画终止时透明度*!
 */

.fadein-left{animation:fadein-left var(--fadein-left-times,2s);opacity:var(--fadein-left-opacity-finish,1)}
.fadein-right{animation:fadein-right var(--fadein-right-times,2s);opacity:var(--fadein-right-opacity-finish,1)}
@keyframes fadein-left{0%{transform:translateX(var(--fadein-left-x,-10rem))}from{opacity:var(--fadein-left-opacity-end,0)}to{opacity:var(--fadein-left-opacity-end,1)}}
@keyframes fadein-right{0%{transform:translateX(var(--fadein-right-x,10rem))}from{opacity:var(--fadein-right-opacity-end,0)}to{opacity:var(--fadein-right-opacity-end,1)}}

@keyframes fadein {from{opacity:var(--fadein-opacity-start,0)}to{opacity:var(--fadein-opacity-end,1)}}
.fadein{animation: fadein var(--fadein-times,2s);opacity:var(--fadein-opacity-finish,1);}


/*四、提示框*/
/*显示*/
/*动态提示框(右侧显示版)*/
.pop-animation1-all{position:fixed;width:16rem;height:3.2rem;background:linear-gradient(to top,#f0f0f0,#f9f9f9);border-radius:0 1rem 1rem 0}
.pop-animation1-left{float:left;width:0.4rem;height:3.2rem;border-radius:0.2rem 0 0 0.2rem;background: linear-gradient(-45deg, rgba(238, 119, 82, 0.8), rgba(231, 60, 126, 0.8), rgba(35, 166, 213, 0.8), rgba(35, 213, 171, 0.8));background-size: 500% 500%;animation: pop-animation1-change 3s ease infinite;}
.pop-animation1-word{float:left;width:15.6rem;height:3.2rem;line-height:3.2rem;text-align:center;font-weight:bold;font-size:1.1rem;color:rgba(0,0,0,0.8)}
@keyframes pop-animation1-change{0%{background-position:0 50%}
    50%{background-position:100% 50%}
    100%{background-position:0 50%}}
.pop-animation1-show{opacity:1;transition:opacity 0.5s ease-out;z-index: 800}
.pop-animation1-hidden{opacity:0;transition:opacity 1.2s ease-in;z-index: 801}
.pop-animation1-start{opacity:0;}

/*动态提示框（居中款）*/
.pop-middle-all{position:fixed;width:8rem;height:3.2rem;background:linear-gradient(to top,#f0f0f0,#f9f9f9);border-radius:0 0 0.5rem 0.5rem}
.pop-middle-word{width:8rem;height:3rem;line-height:3rem;text-align:center;font-weight:bold;font-size:1.1rem;color:rgba(0,0,0,0.8)}
.pop-middle-top{width:8rem;height:0.2rem;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: popChange 5s ease infinite;}
@keyframes popChange{0%{background-position:0 50%}
    50%{background-position:100% 50%}
    100%{background-position:0 50%}}
.pop-middle-show{opacity:1;transition:opacity 0.7s ease-out;z-index: 800}
.pop-middle-hidden{opacity:0;transition:opacity 1.2s ease-in;z-index: 801}
.pop-middle-start{opacity:0;}

/*黑屏提示（自动关闭版）*/
.hint_black_middle_word{width:100%;text-align:center;font-size:1.3rem;color:#1CAFFD;font-weight:bolder}
.hint_black_middle_close{display:flex;align-items:center;justify-content:center;margin-top:1.5rem;cursor:pointer}

/*alert、confirm、prompt的简单替代样式*/
#acp_title{width:100%;height:3rem;line-height:3rem;text-align:center;font-size:1.4rem;font-weight:bolder;margin-bottom:0.8rem}
#acp_input_div{width:100%;height:3.2rem;padding:0.5rem 1rem}
#acp_input_div input{width:100%;height:2.2rem;outline:none;text-align:center;border:0.1rem solid rgba(76,190,229,0.8);border-radius:0.35rem;font-size:1rem}
#acp_input_div input:focus{border:0.1rem solid #4cbee5}
#acp_input_div input:hover{border:0.1rem solid #4cbee5}
#acp_input_div div{width:100%;height:2.2rem;text-align:center;font-size:1rem}
#acp_button_div{width:100%;height:4.4rem;padding:1.3rem 4rem 0.9rem 4rem}