html{
    font-family: -apple-system,"PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
    width: 100vw;
    height: 100vh;
    font-size: 13.33333vw;
}
html *{ margin: 0; padding: 0; box-sizing: border-box;}
body{
    padding-bottom: .8rem;
}
ul,li{
    list-style: none;
}

a {
    color: #000;
}
a:link {
    color: #000;
}
a:visited {
    color: #000;
}
.show{
    display: block;
}
.fa {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 24px;
}
.on a {
    color: #d43f3a;
}

.center{
    text-align: center;
}

.head{
    width:100%;
}
.head img{
    width: 100%;
}
.container{
    width: 90vw;
    border:1px solid red;
}
.container .form-group{
    display: flex;
    flex-direction: row;
    font-size:.18rem;
}
.content{
    padding: 0 0.2rem;
    margin-top: 0.23rem;
}

.hinfo {
    color: #fff;
    border-top-left-radius: 0.15rem;
    border-top-right-radius: 0.15rem;
    overflow: hidden;
}
.hinfo ul{
    /*background-color: #33007F;*/
    height:1.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hinfo li{
    width: 33.33%;
    height:0.9rem;
    border-right: 1px solid #979797;
    text-align: center;
}
.hinfo li span{
    font-size:.36rem;
    font-weight:500;
}
.hinfo li p {
    font-size:0.28rem;
    font-weight:400;
    line-height:0.4rem;
}
.hinfo li:last-child {
    border: none;
}

#reversetimer{
    height: 0.8rem;
    border: 0.01rem solid #DDDDDD;
    border-top: none;
    border-bottom-left-radius: 0.15rem;
    border-bottom-right-radius: 0.15rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#reversetimer i{
    width:0.32rem;
    height:0.32rem;
    font-size:0.36rem;
}
#reversetimer span{
    margin-left:0.14rem;
    font-size:0.3rem;
    font-weight:500;
}
#reversetimer span em{
    font-style: normal;
}


.nav{
    width: 100%;
    height:1.1rem;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    z-index:99;
    border-top: 1px solid #ccc;
    display: flex;
}
.nav .option{
    flex:1;
    text-align: center;
    padding-top: 0.12rem;
}
.nav .option i{
    width: 0.46rem;
    height:0.52rem;
    padding-top: 0.1rem;
    display: block;
    margin:0 auto;
}
.nav .option a{
    width: 100%;
    height:100%;
    display: block;
}
.nav .option span{
    display: block;
    padding-top: 0.1rem;
    height:0.28rem;
    font-size:0.2rem;
    font-weight:500;
    color:rgba(25,25,25,1);
    line-height:0.28rem;
}

.nav .index i{
    background: url(../images/index.svg) no-repeat center center;
    background-size:100% 100%;
}

.nav .ph i{
    background: url(../images/ph.svg) no-repeat center center;
    background-size:100% 100%;
}
.nav .hdsm i{
    background: url(../images/hdsm.svg) no-repeat center center;
    background-size:100% 100%;
}
.nav .my i{
    background: url(../images/my.svg) no-repeat center center;
    background-size:100% 100%;
}

.nav .bm a{
    width: 0.9rem;
    height:0.9rem;
    line-height:0.9rem;
    margin:0 auto;
    display: block;
    border-radius: 50%;
}
.nav .bm a img{
    width: 100%;
    height:100%;
}

/*alert*/
.showconfirm,.alert {
    animation: ani-alert1 0.1s 0.05s linear both;
    display: block;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
}
.showconfirm>article,.alert>article {
    width: 5.9rem;
    height:auto;
    animation: ani-alert2 0.2s 0.1s both;
    position: absolute;
    top: 50%;
    left: 10%;
    background: #fff;
    border-radius: 0.2rem;
    overflow: hidden;
    color: #000;
}
.showconfirm>article header,.alert>article header {
    padding: 0.4rem 0  0.2rem 0;
    text-align: center;
    -webkit-user-select:all;
    user-select: all;
    font-size:0.44rem;
    font-weight:500;
    line-height:0.45rem;
}
.alert>article section {
    margin:0.3rem 0;
    -webkit-user-select:all;
    user-select: all;
    min-height:0.45rem;
    font-size:0.3rem;
    font-weight:400;
    color:rgba(105,105,105,1);
    line-height:0.45rem;
    text-align: center;
}
.showconfirm>article section{
    /*margin:0.3rem 0;*/
    -webkit-user-select:all;
    user-select: all;
    min-height:0.6rem;
    font-size:0.3rem;
    font-weight:400;
    color:rgba(105,105,105,1);
    padding: 0.3rem 0.3rem 0.1rem 0.3rem;
    line-height:0.45rem;
    text-align: center;
}
.showconfirm>article section em{
    color: red;
    font-style: normal;
}
.alert>article footer {
    text-align: center;
    line-height: 0.45rem;
    border-top: solid #ddd 1px;
    font-size: 0.36rem;
    padding: 0.2rem;
}
.showconfirm>article footer {
    border-top: solid #ddd 1px;
    font-size: 0.36rem;
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.alert>article footer:active { background: #f3f3f3;}
.alert>article footer a { display: block; color: #2DB42E; }
.showconfirm_out,.alert_out { animation: ani-alert1b 0.1s 0.1s linear both;  }
.alert_out>article { animation: ani-alert2b 0.15s both;}
.showconfirm_out>article { animation: ani-alert2b 0.15s both;}
.showconfirm>article footer a { font-size:0.28rem; text-align: center; padding: 0.1rem 0.2rem; border-radius: 0.1rem; display: block;  border:1px solid  #ccc; color: #2DB42E;}
@keyframes ani-alert1{
    0%{ opacity: 0; transform: translateZ(0);}
    100%{ opacity: 1; transform: translateZ(0);}
}
@keyframes ani-alert1b{
    100%{ opacity: 0;}
}
@keyframes ani-alert2{
    0%{ transform:translateY(0%); opacity: 0;}
    100%{ transform:translateY(-50%); opacity: 1;}
}
@keyframes ani-alert2b{
    0%{ transform:translateY(-50%); opacity: 1;}
    100%{ transform:translateY(-30%); opacity: 0;}
}