@charset "utf-8";
/* CSS Document */
html,body,div,p,ul,li{margin:0;padding:0;}
body{width:7.5rem;margin:0 auto;background:#fff;font-family:'Microsoft Yahei';}
img{display:block;width:100%;}

.ban{position:relative;}

.ban .sixl{position:absolute;top:.83rem;right:.5rem;width:1.73rem;height:2.09rem;margin:0;background:url(images/sixl.png) no-repeat;background-size:contain;text-indent:-9999px;}

.ani1{-webkit-animation:zoomInLeft 1s;animation:zoomInLeft 1s;}
.ani2{-webkit-animation:rotateIn 1s;animation:rotateIn 1s;}
.ani3{-webkit-animation:zoomInUp 1s;animation:zoomInUp 1s;}
.ani4{-webkit-animation:fadeInUp 1s;animation:fadeInUp 1s;}
.ani5{-webkit-animation:fadeInUp 1s;animation:fadeInUp 1s;}
.ani6{-webkit-animation:fadeInUp 1s;animation:fadeInUp 1s;}


.form-credit{width:6.3rem;margin:0 auto;}
.form-credit .check{margin-top:.2rem;position:relative;}
.form-credit input,.form-credit select{display:block;box-sizing:border-box;width:100%;height: .8rem;border-radius:.1rem;border:1px solid #999;padding:0 .2rem;font-size:.24rem;line-height: .8rem;color:#333;-webkit-appearance:none;outline:none;}

input::-webkit-input-placeholder {
    color: #ccc;
}
input:-moz-placeholder {
    color: #ccc;
}
input:-ms-input-placeholder {
    color: #ccc;
}
.form-credit .ipt-photo{border-color:#e7243f;}
.form-credit .ipt-file{position:absolute;z-index:2;left:0;top:0;opacity:0;}
.form-credit .i-camera{position:absolute;z-index:1;top:.23rem;left:2.25rem;height:.34rem;padding-left:.6rem;font-style:normal;font-size:.24rem;line-height:.34rem;color:#e7243f;background:url(images/i_camera.png) no-repeat left center;background-size:.37rem .32rem;}
.form-credit .submit{margin-top:.2rem;font-weight:bold;font-size:.32rem;border-color:#e7243f;background:#e7243f;color:#fff;-webkit-appearance:none;outline:none;}

#myCanvas{position:fixed;width:100%;height:100%;right:100%;top:0;}
.sharebox{
/*	position:fixed;width:100%;height:100%;left:100%;top:0;
	background:rgba(0,0,0,.8);overflow: auto;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s;*/
}
.sharebox p{padding: .3rem;font-size:.24rem;line-height: .4rem;text-align:center;color: #fff;}
.sharebox .shareWt{display:block;width: auto;height: 80vh; margin:1.2rem auto 0;box-sizing: border-box;    background: url(images/loading.gif) no-repeat center;}
.sharebox .reUpload{position:absolute;top: .4rem;right: 10%;width: .55rem;height:.55rem;background:url(images/close.png) no-repeat;background-size:contain;}

.clipbox{position:fixed;width:100%;height:100%;left:0;top:0;z-index:9;display:none;}
.clipbox img{display:block;width:100%;}
.clipbox .clipbtns{
    position: absolute;bottom:20px;left:0;width:100%;
    display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;}
.clipbox .clipbtns span{width:.8rem;height:.8rem;margin:.1rem;border-radius:.1rem;background:#fff;font-size:.24rem;line-height:.8rem;text-align:center;}


@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
        animation-timing-function: cubic-bezier(0.175,.885,.32,1)
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        -ms-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        -ms-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
        animation-timing-function: cubic-bezier(0.175,.885,.32,1)
    }
}


@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,-200deg);
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,-200deg);
        -ms-transform: rotate3d(0,0,1,-200deg);
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0
    }

    100% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}


@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
        animation-timing-function: cubic-bezier(0.175,.885,.32,1)
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -ms-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        -ms-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
        animation-timing-function: cubic-bezier(0.175,.885,.32,1)
    }
}


@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}


/*背景模糊*/
.UI-blur {
    transform: translate3d(0,0,0);
    -webkit-filter: blur(3px);
}

.flexBox{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
	width: 100%;
	height: 100%;
	top:0;
	position: fixed; left: 100%;
	background:rgba(0,0,0,.8);overflow: auto;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s;
}
.ui-button {
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    color: #4c5161;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    padding: 9px 15px;
    min-width: 50px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    -webkit-transition: border-color .15s,background-color .15s,opacity .15s;
    transition: border-color .15s,background-color .15s,opacity .15s;
    cursor: pointer;
    overflow: visible;
}
.ui-button-primary, .ui-button-primary.disabled:hover, .ui-button-primary.loading, .ui-button-primary.loading:hover {
    border: 1px solid #2486ff;
    background-color: #2486ff;
    color: #fff;
}