/*{
    margin: 0;
    padding: 0;
} */
/* 
    UI规范色值及字体的相关变量值
	    移动端页面适用
	    使用方法：
	        使用var()关键字，括号内填写变量的名称
	        例：color: var(--font-color-button);       
*/
html{
    
    /* 页面主体视觉色 */
    --color-indigo:#494df4;
    /* 辅助色 */
    --color-igloo:#b5d0ee;
    --color-cotton-candy:#fad6de;
    --color-azalea:#f1afc6;
    --color-aqua-green:#9fd984;
    --color-greyjoy:#9fbeaf;
    --color-pacific:#00adc6;
    --color-teal:#027180;
    --color-acid:#f0ff93;
    --color-dune:#fcd385;
    --color-apache:#ddbe65;
    --color-logan:#9190ac;
    --color-flamingo:#ec4d33;
    --color-burunt-sienna:#f07662;
    --color-tosca:#914146;
    /* 文字、分割线、背景色 */
    --color-mine-shaft:#333333;
    --color-scorpion:#5f5f5f;
    --color-gray:#7f7f7f;
    --color-dusty-gray:#999999;
    --color-silver:#cccccc;
    --color-mercury:#e5e5e5;
    --color-wild-sand:#f5f5f5;
    --color-alabaster:#fafafa;
    --color-white:#ffffff;

    /* 字体大小 */
    --h1:18px;
    --h2:16px;
    --h3:14px;
    --h4:12px;
    --h5:10px;
    /* 字体颜色 */
    --font-color-ordinary:var(--color-mine-shaft);
    --font-color-link:var(--color-indigo);
    --font-color-page-hint:var(--color-dusty-gray);
    --font-color-form-hint:var(--color-silver);
    --font-color-button:var(--color-white);
    --font-color-error:#c91432;
    --font-color-sensitive:var(--color-flamingo);

}

/* 
	字体和颜色
	封装了上面的变量，方便直接使用	
*/
body{
	font-family: "思源黑体",Sans-Serif !important;
   
	overflow-x: hidden;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    transition: font-size 0.3s ease;
}
.h1{
	font-size: var(--h1)!important;
}
.h2{
	font-size: var(--h2)!important;
}
.h3{
	font-size: var(--h3)!important;
}
.h4{
	font-size: var(--h4)!important;
}
.h5{
	font-size: var(--h5)!important;
}
.font-color-ordinary{
    color: var(--font-color-ordinary)!important;
}
.font-color-link{
    color: var(--font-color-link)!important;
}
.font-color-page-hint{
    color: var(--font-color-page-hint)!important;
}
.font-color-form-hint{
    color: var(--font-color-form-hint)!important;
}
.font-color-button{
    color: var(--font-color-button)!important;
}
.font-color-error{
    color: var(--font-color-error)!important;
}
.font-color-sensitive{
    color: var(--font-color-sensitive)!important;
}

/* 主按钮，页面主要按钮样式 */
.button-primary{
    height: 46px !important;
    line-height: 44px;
    background-color: var(--color-indigo) !important;
    border-radius: 22px;
    margin: 15px 12px;
    font-size: var(--h1) !important;
    color: var(--font-color-button);
    text-align:center;
    border: 0px;
}
/* 主按钮按下后样式 */
.button-primary:active{
    background-color: #00008f !important;
}

/* 次按钮，页面次要按钮样式 */
.button-secondary{
    height: 46px !important;
    line-height: 43px;
    background-color: #ffffff;
    border: var(--color-indigo) 1px solid !important;
    border-radius: 22px;
    margin: 15px 12px;
    font-size: var(--h1);
    color: var(--color-indigo);
    text-align:center;
}
/* 次按钮按下后样式 */
.button-secondary:active{
    background-color: var(--color-indigo) !important;
    color: var(--font-color-button) !important;
}
/* 禁用按钮样式 */
.button-secondary[disabled],.button-primary[disabled]{
	background-color: #cccccc !important;
	color: var(--font-color-button) !important;
	border-color: #cccccc !important;
}
/*  
    按钮宽度
    w2就是页面2/6的宽度再去掉边距 
*/
.button-w2{
    width: calc(33.333% - 16px) !important;
}
.button-w3{
    width: calc(50% - 18px);
    margin: 15px 0px 15px 12px;
}
.button-w4{
    width: calc(66.666% - 20px);
}
.button-w5{
    width: calc(83.333% - 22px);
}
.button-w6{
    width: calc(100% - 24px) !important;
}
a{
	color: var(--font-color-link);
}
/*有头部的可切换选项*/
.switch-options-head{
  margin-top: 64px;
  text-align: center;
}
/*选中的切换项*/
.options-sel{
  background: var(--color-indigo);
  color: var(--color-white) !important;  
}
/*没有选中的切换项*/
.options-default{
  border-color: var(--color-indigo);;
  color: var(--color-indigo);
  width: 2.2rem !important;
  height: 32px;
}
/*避免悬浮字体颜色发生改变*/
.options-default:HOVER {
  color: var(--color-indigo);
}
.button-primary:HOVER{
   color: var(--font-color-button);  
}
.button-secondary:HOVER{
   color: var(--color-indigo);
}

/*避免按钮按下去的时候出现边框*/
button{
  outline: none;
}

label.error {
  color: #C91432;
  font-size: 14px;
}
/*body样式*/
#default{
  background-color: #fff;
}
/*返回按钮样式*/
.header-left img{
    height: 20px;
    float: left;
    margin: 12px 0px 12px 15px;
}



/* 置顶提示框样式 */

/* 需要置顶提示框的地方加上如下html，建议在phoneheader.html下方添加
<div class="d">
		<!-- 多排文字需要加上m属性 -->
		<span class="g m"></span>
</div>
 */
div.d{
	height: 40px;
	overflow: hidden;
    background-color: rgba(181, 208, 238, 0.2);
    padding: 0 15px;
}
span.g{
  color: #494df4;
	position:relative;
	font-size: 14px;
  line-height: 40px;
}
/* 如果是多排文字则需要加上这个class，使文字滚动 */
span.m{
	animation:m 10s infinite;
}

@keyframes m{
	0%  {bottom:0px;}
	40% {bottom:0px;}
	50% {bottom:40px;}
	90% {bottom:40px;}
	100% {bottom:0px;}
}