/*
公共样式-Phone
*/
*{margin:0;padding:0;box-sizing: border-box;}
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
/* 设计稿px换算直接/100即可得到rem值。移动平台*/ 
    @media all and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
        html { font-size: 703%; }
    }
    @media all and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
        html { font-size: 732.4%; }
    }
    @media all and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
        html { font-size: 750%; }
    }
    @media all and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
        html { font-size: 781.25%; }
    }
    @media all and (min-width:414px) and (max-width:431px) and (orientation:portrait){
        html { font-size: 808.6%; }
    }
    @media all and (min-width:432px) and (max-width:479px) and (orientation:portrait){
        html { font-size: 843.75%; }
    }
/*
公共样式
*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{font-size:0.1rem;color:#000;background:#fff;}
a{color:#172c45;text-decoration:none;}
a:hover{color:#cd0200;text-decoration:underline;}
ul,ol,li{list-style:none;}
img{border:0;vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
.height{height:calc(100vh)}.width{width: calc(100vw);}
.min-height{min-height:calc(100vh)}.min-width{min-width: calc(100vw);}


/* 主色调 */
.fcolor{color: #9E2036;}
.bgccolor{background-color: #9E2036;}
.loginimg{background: url(./static/img/loginimg.png) no-repeat 100% 100%;background-size: 100% 100%;}
.bgcimg{background: url(./static/img/bgcimg.png) no-repeat 100% 100%;background-size: 100% 100%;}
.bgclinear{background-image: linear-gradient(#9E2036, #EE405E);}
.txtcolor{text-shadow: 0 0 10 #FD5757;}
.boxcolor{box-shadow: 0 0 10 #FD5757;}
.page{
	width: 100%;
	min-width: 370px;min-height: calc(100vh);
	padding-bottom: 2rpx;
	box-sizing: border-box;
	background-color: #F0EDF1;
}
/* .page{background-color: #F0EDF1;
min-height: calc(100vh);
padding-bottom: 2rpx;} */
/*
文字渐变颜色
*/
.linear-text{
    /* 设置背景色渐变 */
    background-image: linear-gradient(to right,#e66465, #9198e5);
    /* 设置背景颜色限制在文字中 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
    color: transparent;
}

/*
线性渐变色
*/
.linear{/*向右线性渐变：*/
    background-image: linear-gradient(to right,#e66465, #9198e5);
}
.radial{/*颜色节点均匀分布的径向渐变：*/
    background-image: radial-gradient(red, yellow, green);
}
.radial-circle{/*形状为圆形的径向渐变：*/
    background-image: radial-gradient(circle, red, yellow, green);
}
.radial-ellipse{/*形状为椭圆形的径向渐变：*/
    background-image: radial-gradient(ellipse, red, yellow, green);
}

/*
百分比
*/
.w10{width:10%;}.w20{width:20%;}.w30{width:30%;}.w40{width:40%;}.w50{width:50%;}
.w60{width:60%;}.w70{width:70%;}.w80{width:80%;}.w90{width:90%;}.w100{width:100%;}
.w2{width:50%;}.w3{width:33.333%;}.w4{width:25%;}.w5{width:20%;}
.w6{width:16.666%;}.w7{width:14.285%;}.w8{width:12.5%;}.w9{width:11.111%;}

/*
水平对齐 
*/
.t-left{text-align:left;}
.t-center{text-align:center;}
.t-right{text-align:right;}

/* 
垂直对齐
*/
.v-top{vertical-align:top;}
.v-middle{vertical-align:middle;}
.v-bottom{vertical-align:bottom;}

/* 
字体样式 
*/
.f1rem{font-size:1rem!important;}
.f102rem{font-size:1.2rem!important;}
.f104rem{font-size:1.4rem!important;}
.f106rem{font-size:1.6rem!important;}
.f108rem{font-size:1.8rem!important;}
.f2rem{font-size:2rem!important;}
.f202rem{font-size:2.2rem!important;}
.f204rem{font-size:2.4rem!important;}
.f206rem{font-size:2.6rem!important;}
.f208rem{font-size:2.8rem!important;}
.f3rem{font-size:3rem!important;}
.f302rem{font-size:3.2rem!important;}
.f304rem{font-size:3.4rem!important;}
.f306rem{font-size:3.6rem!important;}
.f308rem{font-size:3.8rem!important;}
.f4rem{font-size:4rem!important;}
.f5rem{font-size:5rem!important;}
.f6rem{font-size:6rem!important;}
/* 字体加粗 */
.f-bold{font-weight:bold;}
/* 字体不换行 */
.f-nowrap{white-space:nowrap;}
/* 首行缩进 */
.f-indent{text-indent:2em;}
/* 字符间距 */
.f-spacing{letter-spacing:1em;}
/* 单词及字母换行 */
.f-all{word-wrap:break-word;word-break:break-all;}
/* 将长串字母或长单词自动换行 */
.f-wrap{word-wrap:break-word;}
/* 将完整的单词拆分自动换行 */
.f-break{word-break:break-all;}
/* 文本溢出隐藏 */
.f-hidden3{
    overflow:hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*超出部分显示省略号*/
    display:-webkit-box;/*弹性盒*/
    -webkit-box-orient:vertical;/*设置对象内元素的排列方式为垂直*/
    -webkit-line-clamp:3;/*限制块元素文本行数*/
}
.f-hidden{
    overflow:hidden;/*溢出隐藏*/
    white-space:nowrap; /*不换行*/
    text-overflow:ellipsis;/*超出部分显示省略号*/
    -o-text-overflow:ellipsis;
}
/*
溢出隐藏显示
*/
/* 超出容器则显示滚动条 */
.flow-auto{overflow:auto;}
.flowx-auto{overflow-x:auto;}
.flowy-auto{overflow-y:auto;}
/* 无论是否超出都显示滚动条 */
.flow-scroll{overflow:scroll;}
.flowx-scroll{overflow-x:scroll;}
.flowy-scroll{overflow-y:scroll;}
/* 超出容器部分隐藏 */
.flow-hidden{overflow:hidden;}
.flowx-hidden{overflow-x:hidden;}
.flowy-hidden{overflow-y:hidden;}
/* 自定义滚动条 */
::-webkit-scrollbar{/* — 整个滚动条. */
    width: 2px;
    height: 2px;
    background-color: #ccc;
}
::-webkit-scrollbar-button {/* — 滚动条上的按钮 (上下箭头). */
    /* background-color: red; */
}
::-webkit-scrollbar-thumb{ /* — 滚动条上的滚动滑块. */
    background-color: orange;
}
::-webkit-scrollbar-track{/* — 滚动条轨道. */
    /* background-color: red  ; */
}
::-webkit-scrollbar-track-piece{/* — 滚动条没有滑块的轨道部分. */
    /* background-color: yellow; */
}


/* 
隐藏、定位、浮动
*/
/* 背景模糊 */
.blur{backdrop-filter: blur(3px);}
/* 保持容器原有尺寸比例，图片不被缩放。 */
.fit{object-fit:cover}
/* 隐藏 */
.none{display:none;}
.hidden{visibility:hidden;}
.opacity{opacity:0;}
.noborder{border:none;}
/* 定位 */
.pon{position:static!important;}
.por{position:relative!important;}
.poa{position:absolute!important;}
.pof{position:fixed!important;}
.pos{position:sticky!important;}
/* 浮动 */
.float-l{float:left!important;}
.float-r{float:right!important;}
/* 清除浮动*/
.clear:after{content:"";display:block;clear:both}
/* 层级 */
.z9{z-index: 9;}
.z99{z-index: 99;}
.z999{z-index: 999;}
.z9999{z-index: 9999;}


/*
css3变形：旋转、缩放、扭曲、移动及矩阵变形
*/
/* .transform{transform: rotate | scale | skew | translate |matrix;} */
.transform{transform:rotate(30deg)scale(2,2)skew(30deg,10deg)translate(100px,20px);}
/* .matrix{transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);} */
/* 改变元素基点 */
.origin{transform-origin: x-axis y-axis z-axis;}
/* 过渡用时 */
.ttion{
    -moz-transition: all .2s;-webkit-transition: all .2s;
    -o-transition: all .2s;transition: all .2s!important;
}
/*调用动画*/
.animation{
    animation-name: anime;/*动画名称*/
    animation-duration: 5s;/*持续时间*/
    animation-delay: 3s; /* 延迟3秒开始动画 */
    animation-iteration-count: infinite; /* 无限次重复动画 */
}
/*定义动画*/
@keyframes anime{
    0%{
        width: 100px;
    }
    100%{
        width: 300px;
    }
}

/* 
盒子类型 
*/
.block{display:block!important;}/*块级元素*/
.blocks{display:inline-block!important;}/*内联元素*/
.boxing{box-sizing:border-box!important;}
.flex{display: box;display: -webkit-box;
    display: -moz-box;display: -ms-flexbox;
    display: -webkit-flex;display:flex!important;
}/*块级弹性盒*/
.flexs{display: box;display: -webkit-box;
    display: -moz-box;display: -ms-flexbox;
    display: -webkit-flex;display:inline-flex!important;
}/*内联弹性盒*/


/* 
纵横居中
*/
.F-xy{display:flex!important;justify-content:center!important;align-items:center!important;}

/* 
自上至下换行排序
*/
.F-wrap{display:flex!important;flex-wrap:wrap!important;}
/* 
自底向上换行排序
*/
.F-wrapr{display:flex!important;flex-wrap:wrap-reverse!important;}

/* 
X轴排序
*/
.FX{display:flex!important;flex-direction:row!important;}
/* 
X轴反向排序
*/
.FX-r{display:flex!important;flex-direction:row-reverse!important;}

/* 
Y轴排序
*/
.FY{display:flex!important;flex-direction:column!important;}
/* 
Y轴反向排序
*/
.FY-r{display:flex!important;flex-direction:column-reverse!important;}

/* 
X轴排列
*/
.FX-b{display:flex!important;justify-content: baseline!important;}
.FX-c{display:flex!important;justify-content:center!important;}
.FX-sa{display:flex!important;justify-content:space-around!important;}
.FX-sb{display:flex!important;justify-content:space-between!important;}
.FX-fs{display:flex!important;justify-content:flex-start!important;}
.FX-fe{display:flex!important;justify-content:flex-end!important;}

/* 
Y轴排列
*/
.FY-b{display:flex!important;align-items:baseline!important;}/*以首行基线对齐*/
.FY-c{display:flex!important;align-items:center!important;}
.FY-fs{display:flex!important;align-items:flex-start!important;}
.FY-fe{display:flex!important;align-items:flex-end!important;}
.FY-h{display:flex!important;align-items:stretch!important;}/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/

/* 
Y轴排列下的单个项目
*/
.FY-bs{display:flex!important;align-self:baseline!important;}/*以首行基线对齐*/
.FY-cs{display:flex!important;align-self:center!important;}
.FY-fss{display:flex!important;align-self:flex-start!important;}
.FY-fes{display:flex!important;align-self:flex-end!important;}
.FY-hs{display:flex!important;align-self:stretch!important;}/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/


/* 
元素占比
*/
/* flex{flex-grow flex-shrink flex-basis}元素：放大比例 缩小比例 分配多余空间 */
.f1{flex:1;}.f2{flex:2;}.f3{flex:3;}.f4{flex:4;}.f5{flex:5;}
.f6{flex:6;}.f7{flex:7;}.f8{flex:8;}.f9{flex:9;}
.f10{flex:0 0 10%}.f16{flex:0 0 16.666%;}.f20{flex:0 0 20%;}.f25{flex:0 0 25%;}
.f33{flex:0 0 33.333%;}.f50{flex:0 0 50%;}.f100{flex:0 0 100%;}

/* 
元素排列顺序
*/
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}