.container-fluid {
    padding-left: 0!important;
    padding-right: 0!important
}

.alert-fixed {
    position: fixed;
    top: 70px;
    left: 2.5%;
    width: 95%
}

.alert-fixed .alert {
    margin-top: 10px
}

#nav {
    top: 0;
    left: 0;
    height: 60px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 2
}

#nav .logo {
    width: 100%;
    height: 70%;
    margin-top: 9px;
    padding-left: 10vw
}

#nav .logo img {
    width: auto;
    height: auto;
    max-height: 100%
}

.page {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    min-height: calc(100vh - 50px);
    padding: 0 0
}

#banner {
    width: 100%;
    height: 80px;
    background-color: #2b88d8;
    background-size: cover
}

#banner .banner-text {
    margin: 0 auto;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center
}

#banner .banner-text-zn {
    font-size: 24px;
    color: #fff
}

#banner .banner-text-en {
    font-size: 13px
}

#notify {
    height: 50px;
    width: 100%;
    text-align: end;
    line-height: 60px;
    font-size: 18px;
    font-weight: 100;
    padding-right: 10vw;
    background-color: #333;
    color: #f2b72a
}

#loading {
    width: 100%
}

#loading #loading-content {
    margin: auto auto;
    width: 400px;
    text-align: center;
    font-size: 24px;
    font-weight: bolder
}

#loading #loading-content img {
    width: 100%;
    background: url(../img/loading.png) left top;
    object-fit: cover
}

#content-bg {
    background: url(../img/home_bg.png) left top ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: calc(100vh - 50px - 80px - 50px);
    padding: 20px 0 0 0;
    flex-grow: 1
}

#content-bg .content-bg-row {
    max-width: 960px;
    margin: 0 auto;
    width: 100%
}

#content-bg .tip-box {
    margin-top: 0px
}

#content-bg .tip-box .tip-box-top {
    background-color: #fff;
    box-shadow: 5px 5px 10px #e1dfdd;
    behavior: url(./js/PIE.htc);
    margin-bottom: 15px
}

#content-bg .tip-box .tip-box-top .tip-box-top-title {
    background-color: #f5f5f5;
    font-weight: 700;
    color: #333;
    font-size: 14px;
    padding: 5px
}

#content-bg .tip-box .tip-box-top #tip-box-top-content {
    color: #2b88d8;
    padding: 10px;
    padding-left: 30px
}

#content-bg .tip-box .tip-box-top ul {
    padding: 10px;
    padding-left: 20px;
    color: #813f07;
    font-weight: 700
}

#content-bg .tip-box .tip-box-bottom {
    background-color: #fff;
    box-shadow: 5px 5px 10px #e1dfdd;
    behavior: url(./js/PIE.htc);
    margin-bottom: 15px
}

#content-bg .tip-box .tip-box-bottom .tip-box-bottom-title {
    background-color: #f5f5f5;
    font-weight: 700;
    color: #333;
    font-size: 14px;
    padding: 5px
}

#content-bg .tip-box .tip-box-bottom .tip-box-bottom-content {
    padding: 10px
}

#content-bg .tip-box .tip-box-bottom .tip-box-bottom-content ol {
    padding-left: 10px
}

#content-bg #content #tag {
    background: url(../img/tutelage_bg.png) left top;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    height: 80px
}

#content-bg #content #tag .tag-box {
    background: url("../img/tag.png") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 105px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    margin: 0 auto 10px;
    color: #fff
}

#content-bg #content #tag .tag-title {
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    height: 28px;
    line-height: 28px;
    width: 100%
}

#content-bg #content #tag .tag-title-active {
    color: #2b88d8
}

#content-bg #content #tag .tag-active {
    margin-left: 35px;
    margin-top: 30px;
    background-image: url("../img/recharge_bg.png");
}

#content-bg #content .content-box {
    width: 100%;
    background-color: #fefdfd;
    margin-bottom: 20px;
    padding-bottom: 1px;
    box-shadow: 5px 5px 10px #e1dfdd;
    behavior: url(./js/PIE.htc)
}

#content-bg #content .content-box .box-title {
    background-color: #b28a6d;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: start;
    padding: 0 20px
}

#content-bg #content .content-box .font-color {
    color: #964479;
    font-weight: 700
}

#content-bg #content .content-box .form-horizontal {
    margin: 15px auto;
    width: 85%;
    min-width: 350px
}

#content-bg #content .content-box .form-horizontal .control-label {
    text-align: left;
    min-width: 105px!important
}

#content-bg #content #payType #payTypeBox {
    width: 100%
}

#content-bg #content #payType #payTypeBox .pay-type-item {
    margin-bottom: 10px;
    margin-right: 10px
}

#content-bg #content #payType #payTypeBox label {
    margin-bottom: 0;
    white-space: nowrap
}

#content-bg #content #submit {
    width: 160px
}

#content-bg #content .form-group {
    margin-bottom: 20px
}

#content-bg #qr-code {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
    padding-bottom: 30px
}

#content-bg #qr-code #qr-code-img {
    width: 60%;
    min-width: 150px;
    max-width: 300px;
    margin: 15px auto
}

#content-bg #qr-code-box {
    font-weight: 600;
    font-size: 20px;
    color: #2d3436
}

#content-bg #qr-code-box #timer {
    color: #d63031;
    display: inline-block
}

#content-bg #rechargeStatu {
    color: #2d3436;
    font-weight: 600;
    font-size: 20px;
    margin: 50px auto
}

#content-bg #rechargeStatu #rechargeFail img,#content-bg #rechargeStatu #rechargeSuccess img {
    width: 30px
}

#myModal .modal-detils-box {
    display: inline-block
}

#myModal .modal-detils-box .col-xs-12 {
    margin-left: -1px
}

#myModal .modal-detils {
    padding: 0 0;
    margin-bottom: -1px;
    margin-right: -1px;
    border: 1px solid #ebeef5;
    height: auto;
    line-height: 40px;
    word-wrap: break-word;
    overflow-wrap: break-word
}

#myModal .modal-detils .modal-detils-title {
    background-color: #f5f7fa;
    font-weight: 700;
    color: #606266;
    height: inherit;
    border-right: 1px solid #ebeef5
}

#myModal .modal-detils .modal-detils-content {
    font-weight: 400
}

#customer {
    position: fixed;
    bottom: calc(33vh - 105px);
    right: 3vw;
    text-align: center;
    width: 60px;
    background-color: #fff;
    padding: 30px 15px;
    border-radius: 60px;
    box-shadow: 5px 5px 5px #8a8886;
    behavior: url(./js/PIE.htc)
}

#customer img {
    margin: 0 auto 30px;
    width: 100%;
    display: block;
    cursor: pointer
}

#customer .last-customer {
    margin-bottom: 0
}

#customer span {
    font-size: 14px;
    font-weight: 600;
    color: #2b88d8;
    display: block;
    cursor: pointer
}

.form-group.required .control-label:before {
    color: red;
    content: "*"!important;
    position: absolute;
    margin-left: -15px
}

.fakeLoader {
    background-color: rgba(0,0,0,.5)!important;
    -pie-background: rgba(0,0,0,.5)!important;
    behavior: url(./js/PIE.htc)
}

.layui-layer {
    border-radius: 4px!important
}

.layui-layer .layui-layer-btn0 {
    background-color: #f8ae0f!important;
    border-color: #df9c0d!important
}

.layer-custom {
    border-radius: 6px!important
}

.layer-custom .layui-layer-title {
    font-size: 18px!important;
    font-weight: 700!important
}

.layui-form-radio:hover>*,.layui-form-radioed,.layui-form-radioed>i {
    color: #f8ae0f!important
}

.layui-form-select dl dd.layui-this {
    color: #2e6da4!important
}

.layui-input:focus,.layui-textarea:focus {
    border-color: #66afe9!important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)!important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)!important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)!important
}

.layui-input:hover,.layui-textarea:hover {
    border-color: #66afe9
}

.layui-input,.layui-select,.layui-textarea {
    border: 1px solid #ccc!important;
    border-radius: 4px!important
}

.layui-form-select dl dd:hover {
    background-color: #767676!important;
    color: #fff!important;
    -webkit-transition: 0 all!important;
    transition: 0 all!important
}

.layui-form-radio {
    padding-right: 0!important
}