@charset "utf-8";

#app{ position: relative; }

.user-form{padding-top: 80%;margin: 0 .15rem;}
.user-form input{ font-size:.15rem;height: .45rem;width:100%;}
.user-form .item{height: .45rem; margin-bottom: .13rem; position: relative; background: #fff; padding-left: .03rem; }
.user-form .item:after {content: ""; position: absolute; width: .03rem; background-color: #abecea; top: 0; bottom: 0; left: 0; }
.user-form2{ padding:0 0 .3rem;}
.user-form2 .item{ border:1px solid #91d0ce; }
.user-form .item:after{left: 0;}

.icon_down{ width: .16rem; height: .14rem; vertical-align: top; transition: opacity .5s ease-in-out; animation: breathe 2s ease-in-out infinite; }

.wx-hd{ font-size:.15rem; }
.wx-hd .d-flex{border-top: 1px solid #fdead6; color: #bc914e; line-height: .37rem; font-weight: 700; }
.wx-hd .d-flex:first-child{ border-top: 0;}
.wx-hd .flex{border-left: 1px solid #fdead6;}
.wx-hd .flex:first-child{ border-left: 0;}
.wx-bd{ border: 1px solid #ececec; font-size:.15rem; }
.wx-bd .d-flex{ border-top: 1px solid #ececec; line-height: .37rem;}
.wx-bd .d-flex:first-child{ border-top: 0;}
.wx-bd .flex{ border-left: 1px solid #ececec;}
.wx-bd .flex:first-child{ border-left: 0;}
.w19{ width:.19rem; line-height: .26rem }

.tiao{width: .1rem; height: .5rem; position: relative; border-radius: .1rem; background: #efefef;margin-left:auto;margin-right:auto;}
.tiao i{ position: absolute; left: 0; right: 0; bottom: 0; border-radius: .1rem;}
.tiao.i1 i{ background: #679abb;}
.tiao.i2 i{ background: #c49e62;}
.tiao.i3 i{ background: #71ac7c;}
.tiao.i4 i{ background: #cb7777;}
.tiao.i5 i{ background: #679abb;}

.tit-style{ text-align: center; font-size: .18rem; font-weight: 700; position: relative; margin:.3rem .5rem 0; }
.tit-style::after{ content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #ccc;}
.tit-style span{ display: inline-block; background: #f4f1f4; position: relative; padding: 0 .1rem; z-index: 1;}

.name-item{background: #fff; padding: .2rem .15rem; margin: .15rem .1rem 0; border-radius: .13rem; position: relative;}
.name-item:after{ content: ''; position: absolute; left: 0; right: 0; top: 0; background: url(../images/bj.png) no-repeat; background-size: contain; text-align: center; color: #fff; font-weight: 700; padding-top: 5%;}
.name-item .name{ font-size: .3rem; font-weight: 700; padding-right: .1rem;}

.best{display: inline-block; background: #ffdfdf; color: #cb7777; font-size: .12rem; height: .2rem; line-height: .2rem; padding: 0 .04rem; border-radius: .03rem;}
.best.blue{ background: #d5e6f3; color: #679abb;}
.abcd{background:#eee; color:#333; font-size:.12rem; display:flex; align-items: center; margin:.05rem .05rem 0 0; border-radius:.02rem; padding:.01rem .05rem;}
.abcd.abcd2{ font-size:.14rem; padding:.02rem .06rem;}
.abcd.on{ background:#679abb; color:#fff;}
.abcd.on2{ color:#da1d1d;}

.qmjy-tit{position: fixed; right: 0;top:48%;z-index:90;background:#679abb;color:#fff;width:.2rem;padding:.1rem .06rem;border-top-left-radius:.04rem;border-bottom-left-radius:.04rem;text-align: center; transition: .3s all; transform: translateX(100%); -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial;}
.qmjy-tit.on{ transform: translateX(0);}

.fixed-box{position: fixed; left: 15%; right: 0; top: 44px; bottom: 0; z-index: 998; background: #fff; border-top-left-radius: .2rem; border-bottom-left-radius: .2rem; -webkit-transition: .3s all; transition: .3s all; -webkit-transform: translateX(100%); transform: translateX(100%); }
.fixed-box.on{-webkit-transform: translateX(0); transform: translateX(0); }
.mask2{background: #000; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 998; -webkit-transition: .3s all; transition: .3s all; visibility: hidden; opacity: 0; }
.mask2.on{visibility: visible; opacity: .8; }

.maxk-box{position: fixed; top:0; bottom:0; left:0; right:0; width:515px; height:490px; background: #fff; text-align: center; margin:auto;z-index:998; -webkit-transition: .3s all; transition: .3s all; visibility: hidden; opacity: 0; }
.maxk-box.on{visibility: visible; opacity: 1; }
.maxk-box .colse {position: absolute; right: 0; top: 0; color: #000; padding: 15px; line-height: 1; }
.maxk-box .pay_wx{ background:#53b03b; font-size:12px; color:#fff; }
.maxk-box .pay_ali{ background:#00aff0; font-size:12px; color:#fff; }

.zygx{ color: #999; text-align: center;}
.zygx ul{}
.zygx li{ font-size: .12rem; }
.text_box{ padding: .19rem 0 0;}
.text_box span{ height: .31rem; line-height: .31rem; margin-top: .1rem; display: block;}
.text_box span:last-child{ margin-top: .09rem; }
.kuang{ padding: .18rem .03rem 0;}
.kuang span{ height: .31rem; width: .05rem; border: .01rem solid #e1e1e1; display: block; margin-top: .11rem;}
.kuang span:last-child{ margin-top: .11rem; }
.kuang_l span{ border-right:0;}
.kuang_r span{ border-left:0;}
.gx_tit{ margin-bottom: .05rem;}
.gx_block{}
.gx_block .gx_0,.gx_block .gx_1{ overflow: hidden; margin:0 0 .04rem;}
.gx_block span{ height: .07rem; background: #666; margin-top: .03rem;}
.gx_block .gx_0 span:first-child{ margin-right: .02rem;}
.gx_block .gx_on span{ background: #f00;}
        
@keyframes breathe{
    0%{ opacity:0;}
    50%{ opacity:1;}
    100%{ opacity:0;}
}

.trans{animation: moveSlideshow 30s linear infinite;}
@keyframes moveSlideshow {
    100% {
        transform: translateY(-100%);
    }
}

.btnAnimate{animation: btnAnimate 1s linear infinite;}
@keyframes btnAnimate{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
}