@charset "utf-8";

html, body {

    position: relative;

    width: 100%;

    height: 100%;

    font-family: "微软雅黑";

    /*background: #000000;*/

}

.prev,.next{

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    -webkit-user-select: none;

    -moz-user-focus: none;

    -moz-user-select: none;

}

h2, h3 {

    font-weight: 400;

}



ul, li {

    list-style: none;

}

.animated {

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}

.main{

    width: 100%;

    height: 100%;

    box-sizing: border-box;

    background: #dbecf9;

    border-top: solid 2px #ce1811;

}

.qr-scan{

    background: url("../images/back.jpg") bottom no-repeat;

    background-size: cover;

}

.box{

    width: 64%;

    margin: 40px auto 0 auto;

    overflow: hidden;

}

.inner{

    width: 9999px;

    height: auto;

    left: 0;

    /*border: solid 2px #97c085;*/

    position: relative;

    -webkit-transition: all .8s;

    -moz-transition: all .8s;

    -ms-transition: all .8s;

    -o-transition: all .8s;

    transition: all .8s;



}

.inner img{

    width: 100%;

    display: block;

}

.inner>li{

    /*width: 65%;*/

    /*left: 100%;*/

    float: left;

    /*position: absolute;*/

    -webkit-transition: all .8s;

    -moz-transition: all .8s;

    -ms-transition: all .8s;

    -o-transition: all .8s;

    transition: all .8s;

}

.inner .gone{

    left: -100%;

    position: absolute;

    z-index: 2;

}

.inner .li_h{

    left: 0;

    position: relative;

    z-index: 2;

}

.prev{

    width: 16%;

    position: absolute;

    top: 0;

    bottom: 10%;

    left: 0;

    background: url("../images/arrow.png") center no-repeat;

    background-size: contain;

}

.next{

    width: 16%;

    position: absolute;

    top: 0;

    bottom: 10%;

    right: 0;

    background: url("../images/arrow2.png") center no-repeat;

    background-size: contain;



}

h2{

    margin-top: 30px;

    text-align: center;

    font-size: 24px;

}

.qr-scan img{

    width: 100%;

}

.title.animated{

    -webkit-animation-delay: .2s;

    -moz-animation-delay: .2s;

    -o-animation-delay: .2s;

    animation-delay: .2s;

}

.qr-part{

    position: relative;

    /*background: url("../images/qr.png");*/

    /*background-size: cover;*/

}

.qr-part.animated{

    -webkit-animation-delay: .4s;

    -moz-animation-delay: .4s;

    -o-animation-delay: .4s;

    animation-delay: .4s;

}

.btn1.animated{

    -webkit-animation-delay: .6s;

    -moz-animation-delay: .6s;

    -o-animation-delay: .6s;

    animation-delay: .6s;

}

.btn2.animated{

    -webkit-animation-delay: .8s;

    -moz-animation-delay: .8s;

    -o-animation-delay: .8s;

    animation-delay: .8s;

}

.qr-inner{

    position: absolute;

    background: #2773c1;

    top: -10%;

    left: 0;

    right: 0;

    margin: auto;

    width: 60%;

    border: solid 2px #2773c1;

}

.qr-inner>h2{

    margin-top: 0;

    font-size: 18px;

    line-height: 32px;

    text-align: center;

    color:#fff;

}

.qr-inner img{

    width: 100%;

    display: block;

}

@-webkit-keyframes fadeInDown {

    from {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0);

    }



    to {

        opacity: 1;

        -webkit-transform: none;

        transform: none;

    }

}



@keyframes fadeInDown {

    from {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0);

    }



    to {

        opacity: 1;

        -webkit-transform: none;

        transform: none;

    }

}



.fadeInDown {

    -webkit-animation-name: fadeInDown;

    animation-name: fadeInDown;

}



.remind{

    margin-top: 5px;

    font-size: 15px;

    color: #ee4e55;

    padding: 10px;

    line-height: 20px;

}