body {
    background: #EEEEEE;
}

/* #app {
    animation: slide-in 2s ease-out;
    -webkit-animation: slide-in 2s ease-out;
    -moz-animation: slide-in 2s ease-out;
    -o-animation: slide-in 2s ease-out;
} */

@keyframes fadeio {

    /*设置内容由显示变为隐藏*/
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeio {

    /*设置内容由显示变为隐藏*/
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeio {

    /*设置内容由显示变为隐藏*/
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeio {

    /*设置内容由显示变为隐藏*/
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: .28rem;
    color: #FFFFFF;
    background-color: rgba(29, 125, 255, 1);
    z-index: 2;
}

.tabs {
    display: flex;
    font-size: .24rem;
    color: #FFFFFF;
    background: rgba(29, 125, 255, 1);
}

.tabs .tabs-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .43rem;
    /* width: 1rem; */
    height: .48rem;
}

.tabs .tabs-item:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -.03rem;
    left: 0;
    height: .03rem;
    transition: all .5s ease;
}

.tabs .tabs-item:hover {
    color: #FFFFFF;
}

.tabs .tabs-item:hover:after {
    width: 100%;
}

.tabs .tabs-item-temp {
    color: #FFFFFF;
}

.tabs .tabs-item-temp:after {
    width: 100%;
    background-color: #FFFFFF;
}

.make {
    margin-top: .2rem;
    padding: .4rem;
    background: #FFFFFF;
    border-radius: .1rem;
    box-shadow: 1px 3px 20px 0px rgba(0, 0, 0, 0.1);
}

.make-info {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

.make-info .title {
    font-size: .28rem;
    font-weight: 600;
    color: rgba(52, 52, 52, 1);
}

.make-info .inform {
    font-size: .16rem;
    color: rgba(30, 126, 255, 1);
}

.date {
    margin-top: .36rem;
    padding-top: .23rem;
    border-top: 1px solid #EEEEEE;
}

.date .visit {
    display: flex;
    align-items: baseline;
    color: rgba(52, 52, 52, 1);
}

.visit .visit-text1 {
    margin-right: .15rem;
    font-size: .28rem;
    font-weight: 600;
}

.visit .visit-text2 {
    font-size: 14px;
}

.tips-text {
    margin: .36rem 0;
    padding: .1rem .28rem;
    font-size: .18rem;
    color: rgba(156, 63, 12, 1);
    /* background: linear-gradient(180deg, rgba(255, 201, 144, 1) 0%, rgba(255, 228, 199, 1) 19%, rgba(255, 254, 252, 1) 100%); */
    background: rgba(255, 149, 34, .3);
    border-radius: .15rem;
}

.time-title-text {
    font-size: .24rem;
    font-weight: 600;
    color: rgba(52, 52, 52, 1);
}

.data-main {
    display: flex;
    margin: .3rem 0;
    padding-right: .1rem;
}

.data-main .datemore {
    display: flex;
    align-items: center;
    margin-left: .1rem;
    padding: 0 .13rem;
    width: .4rem;
    font-size: .18rem;
    color: #333333;
    border: .03rem solid #E5E5E5;
    border-radius: .1rem;
    outline: none;
}

.data-main .datemore-log {
    border-top: 3px solid #E5E5E5;
    border-right: 3px solid #E5E5E5;
    height: .11rem;
    width: .18rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Safari and Chrome */
}

.mentdate {
    flex: 1;
    overflow: hidden;
}

.mentdate-item {
    text-align: center;
    font-size: .2rem;
    color: #333333;
    border: .03rem solid #65ADFF;
    border-radius: .1rem;
    cursor: pointer;
}

.mentdate-item span {
    display: inline-block;
    margin: .1rem .05rem;
}

.mentdate-item-log {
    display: flex;
    justify-content: flex-end;
    height: .28rem;
}

.mentdate-item-log div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: .42rem;
    height: .28rem;
    background: #65ADFF;
    border-top-left-radius: .1rem;
    -webkit-border-top-left-radius: .1rem;
}

.mentdate-item div img {
    width: .24rem;
    height: .19rem;
}

main {
    margin-top: 1rem;
    background: #F2F2F2;
}

.main-top {
    padding: .2rem .15rem .4rem .15rem;
    background: linear-gradient(180deg, rgba(29, 125, 255, 1) 0%, rgba(70, 147, 253, 1) 19%, rgba(221, 231, 243, 1) 100%);
}

.main-top-info {
    display: flex;
    align-items: center;
    width: 100%;
    height: 1rem;
    background: #EEEEEE;
}

.main-top-info h3 {
    flex-shrink: 0;
    margin: 0 .23rem 0 .41rem;
    padding-bottom: .08rem;
    font-size: .26rem;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    border-bottom: 2px solid transparent;
}

.select_info {
    font-size: .28rem !important;
    color: #65ADFF !important;
    border-bottom: 2px solid #65ADFF !important;
}

.main-top-info p {
    padding: .07rem .2rem;
    font-size: .2rem;
    color: rgba(102, 102, 102, 1);
    background-color: rgba(229, 229, 229, 1);
    border-radius: .15rem;
}

.main-info {
    padding: 0 .3rem .3rem .3rem;
    background-color: #FFFFFF;
    border-radius: .1rem;
}

.make-info-title p {
    font-size: .14rem;
    color: #666666;
}

.make-info-box {
    display: flex;
    align-items: center;
    font-size: .24rem;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid #DCDCDC;
}

.make-info-box .log {
    color: #f33b45;
}

.make-info-box span {
    margin-left: .1rem;
    /* margin-right: .88rem; */
    margin-right: .38rem;
    width: 1.26rem;
}

.make-info-box div {
    flex: 1;
    padding: .42rem 0;
    width: 3rem;
}

.make-info-box div textarea {
    height: .75rem;
    width: 100%;
    font-size: .24rem;
    color: rgba(51, 51, 51, 1);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    border: 1px solid #DCDCDC;
}

.make-info-box div textarea::placeholder {
    line-height: .24rem;
    font-size: .24rem;
    color: #AAAAAA;
}

input:disabled {
    color: rgba(51, 51, 51, 1);
    -webkit-text-fill-color:rgba(51, 51, 51, 1);
    background-color: #FFFFFF !important;
    -webkit-opacity: 1 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder {
    color: #999;
    -webkit-text-fill-color:#999;
    -webkit-opacity: 1 !important;
    opacity: 1 !important;
}

/* input[disabled],input:disabled,input.disabled{  
    color: rgba(51, 51, 51, 1);;  
    -webkit-text-fill-color:rgba(51, 51, 51, 1);
    -webkit-opacity:1;  
    opacity: 1;  
}   */

.make-info-box div input {
    width: 100%;
    height: .34rem;
    font-size: .24rem;
    color: rgba(51, 51, 51, 1) !important;
    border: none;
    outline: none;
    background-color: #FFFFFF !important;
    cursor: pointer;
}

.make-info-box div input::placeholder {
    line-height: .34rem;
    font-size: .24rem;
    color: #AAAAAA;
}

.make-info-box div input::-webkit-input-placeholder {
    /* WebKit browsers */
    font-size: .24rem;
    color: #AAAAAA;
}

.make-info-box div input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: .24rem;
    color: #AAAAAA;
}

.make-info-box div input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: .24rem;
    color: #AAAAAA;
}

.make-info-box div input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: .24rem;
    color: #AAAAAA;
}

.make-add-btn {
    padding: .32rem 0;
    border-bottom: 1px dashed #BFBFBF;
}

.make-add-btn div {
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 1.65rem; */
    width: 2.2rem;
    height: .49rem;
    font-size: .2rem;
    color: rgba(255, 255, 255, 1);
    border: 1px solid #65ADFF;
    border-radius: .25rem;
    background-color: rgba(101, 173, 255, 1);
    /* animation: slide-in 2s ease-out; */
    cursor: pointer;
}

/* .make-add-btn div:active{
    animation: slide-out 2s ease-out;
} */

.make-info-del {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .05rem .1rem;
    font-size: .26rem;
    color: #FFFFFF;
    border: 1px solid #F56C6C;
    border-radius: .15rem;
    background-color: #F56C6C;
    outline: none;
    cursor: pointer;
}

.make-info-del img {
    margin-right: .05rem;
    width: .32rem;
    height: .32rem;
}

.main-bottom {
    display: flex;
    justify-content: center;
}

.main-bottom button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .48rem 0;
    width: 3rem;
    height: .67rem;
    font-size: .28rem;
    color: #FFFFFF;
    background: #1D7DFF;
    box-shadow: 0 2px 12px 0 rgba(30, 126, 255, .9);
    border-radius: .33rem;
    border: none;
    outline: none;
    cursor: pointer;
}

.slide-enter-active {
    animation: slide-in 2s ease-out;
}

.slide-leave-active {
    animation: slide-out 2s ease-out;
    /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
    position: absolute;
    opacity: .1;
}

/* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
.slide-move {
    transition: all 2s;
}

@keyframes slide-in {
    from {
        transform: translateY(1rem)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes slide-out {
    from {
        transform: translateY(0);
        opacity: 0;
    }

    to {
        transform: translateY(1rem);
        opacity: 1;
    }
}

.main-top-info-box {
    border-radius: .1rem;
    padding: 0px 0.15rem;
    box-shadow: 1px 3px 20px 0px rgba(0, 0, 0, 0.1);
    margin-top: .2rem;
}

.captcha-img {
    display: flex;
}

.captcha-img img {
    width: 1.6rem;
    height: .5rem;
}

.shortBtn {
    padding: .2rem;
    font-size: .18rem;
    color: #FFFFFF;
    background-color: rgba(29, 125, 255, 1);
    border-radius: .33rem;
    outline: none;
    border: none;
    cursor: pointer;
}

.titlelist-box {
    display: flex;
    align-items: center;
    height: 1rem;
    font-size: .21rem;
    color: rgba(52, 52, 52, 1);
    border-bottom: 1px solid rgba(238, 238, 238, 1);
}

.titlelist-box .item {
    text-align: center;
}

.titlelist-info {
    display: flex;
    flex-direction: column;
    font-size: .21rem;
    color: rgba(52, 52, 52, 1);
}

.titlelist-info .item {
    display: flex;
    justify-content: space-evenly;
    padding: .4rem 0;
    text-align: center;
}

.titlelist-info .item .width5 img {
    width: .31rem;
    height: .31rem;
}

.aline {
    display: flex;
    justify-content: center;
    align-items: center;
}

.width1 {
    width: 20%;
}

.width2 {
    width: 20%;
}

.width3 {
    width: 35%;
}

.width4 {
    width: 10%;
}

.width5 {
    width: 15%;
}

.code_cantainer {
    /* margin-top: 135px; */
    margin-top: 1.95rem;
}

.code_cantainer .code_title {
    padding-top: .3rem;
    text-align: center;
    font-size: .32rem;
    font-weight: 600;
    color: #333333;
}

.code_cantainer .code_time {
    padding-bottom: .15rem;
    text-align: center;
    font-size: .26rem;
    font-weight: 500;
    color: #5A96E3;
}

.qrcodepic-box {
    display: flex;
    justify-content: center;
    margin: .1rem;
}

.qrcodepic-box img {
    width: 3rem;
    height: 3rem;
}

.confirm-btn {
    padding-bottom: .5rem;
}

.inform {
    margin: .3rem;
    margin-top: 1.3rem;
    padding-bottom: .5rem;
    border-radius: .1rem;
    background-color: #FFFFFF;
    box-shadow: 1px 3px 20px 0px rgba(0, 0, 0, 0.1);
}

.inform-box {
    margin: .3rem 0;
    padding: .5rem;
    color: #333333;
    background-color: #FFFFFF;
}

.inform-box-top {
    margin-bottom: .2rem;
}

.inform-box-top .left {
    display: flex;
    align-items: center;
}

.inform_fujian {
    margin-top: .1rem;
    margin-bottom: .2rem;
    font-size: .26rem;
    color: #ff2929;
}

.inform-box-top .inform-box-title {
    font-size: .26rem;
    font-weight: 600;
}

.inform-box-top img {
    margin-right: .1rem;
    width: .4rem;
    height: .4rem;
}

.inform-box .inform-title {
    margin: .05rem;
    font-size: .26rem;
    font-weight: 600;
}

.inform-box .inform-text {
    text-indent: 2em;
    line-height: .52rem;
    font-size: .28rem;
}

.inform-bottom {
    display: flex;
    justify-content: center;
}

.inform-bottom .inform-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: .48rem 0; */
    width: 3rem;
    height: .67rem;
    font-size: .26rem;
    color: #FFFFFF;
    background: #1D7DFF;
    box-shadow: 0 2px 12px 0 rgba(30, 126, 255, .9);
    border-radius: .33rem;
    border: none;
    outline: none;
    cursor: pointer;
}

.step1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 0;
}

.step1 img {
    margin-bottom: .36rem;
    width: 3.68rem;
    height: 2.14rem;
}

.step1 p {
    text-align: center;
    line-height: .3rem;
    font-size: .18rem;
    color: #65ADFF;
}

.my_dialog .van-dialog {
    /* width: 380px; */
    /* height: 480px; */
    height: 395px;
    /* height: 8.6rem; */
    background-image: url(/ticke-mobile/images/codebg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 105% 105%;
    overflow: hidden;
}


.van-cell__title div {
    width: 100%;
}