html,body{height:100%;margin:0}#createImg-container{width:100%;height:100%;visibility:hidden}#createImg-container .loading-mask{width:100%;height:100%;z-index:999;position:absolute;left:0;top:0;background-color:rgba(0,0,0,.5);display:none}#createImg-container .loading-mask .loading-bar{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;background-position:center center;background-repeat:no-repeat;background-size:contain;background-image:url("http://res-cdn.24haowan.com/imageCreator/assets/images/bar.png");animation:spin 8000ms infinite linear;-webkit-animation:spin 8000ms infinite linear}#createImg-container *{-webkit-box-sizing:border-box;box-sizing:border-box}#createImg-container #portrait-mask{width:100%;height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;left:0;top:0;background-image:url("//res-cdn.24haowan.com/imageCreator/assets/images/guide_new.png");z-index:999;overflow:hidden}#createImg-container .mask-btn{width:1.26rem;height:.47rem;margin:4.9rem auto 0;background-image:url("http://res-cdn.24haowan.com/imageCreator/assets/images/guideBTN.png");background-position:center center;background-repeat:no-repeat;background-size:cover}#createImg-container #portrait-container{width:100%;height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover;overflow:hidden}#createImg-container #portrait-container .portrait-top{height:1rem;width:2.5rem;background-position:center center;background-repeat:no-repeat;background-size:contain;margin:0 auto}#createImg-container #portrait-container .portrait-wrap{width:2.7rem;height:2.86rem;background-color:#fff;margin:0 auto;position:relative;padding:0 .15rem}#createImg-container #portrait-container .portrait-wrap .pinch-text{margin:0;font-size:.14rem;height:.2rem;line-height:.2rem;text-align:center;color:#959595}#createImg-container #portrait-container .portrait-wrap .img-showing{width:2.4rem;height:2.4rem;overflow:hidden;position:absolute}#createImg-container #portrait-container .portrait-wrap .img-showing .role-img{position:absolute;width:2.4rem;height:2.4rem;background-position:center center;background-repeat:no-repeat;background-size:contain}#createImg-container #portrait-container .portrait-wrap .img-showing .img-wrapper{position:absolute;width:100%;height:100%}#createImg-container #portrait-container .portrait-wrap .img-showing .img-wrapper ul{margin:0;padding:0;position:absolute;left:0;top:0;width:100%;height:100%}#createImg-container #portrait-container .portrait-wrap .img-showing .img-wrapper ul li{list-style:none;position:absolute;left:0;top:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain}#createImg-container #portrait-container .portrait-wrap ol{padding:0}#createImg-container #portrait-container .portrait-wrap .portrait-tips{height:.26rem;font-size:0;text-align:center;margin-top:2.4rem}#createImg-container #portrait-container .portrait-wrap .portrait-tips .portrait-tip{display:inline-block;width:10px;height:10px;border-radius:5px;background-color:#9e9e9e;margin:.08rem .03rem}#createImg-container #portrait-container .portrait-wrap .portrait-tips .cur{background-color:#4c4c4c}#createImg-container #portrait-container .portrait-wrap .bow{display:none;position:absolute;top:50%;width:.45rem;height:.45rem;background-position:center center;background-repeat:no-repeat;background-size:contain;transform:translateY(-50%);-webkit-transform:translateY(-50%)}#createImg-container #portrait-container .portrait-wrap .left{left:-0.46rem}#createImg-container #portrait-container .portrait-wrap .right{right:-0.46rem}#createImg-container #portrait-container .portrait-btn-wrap .btn-create{width:1.26rem;height:.47rem;background-position:center center;background-repeat:no-repeat;background-size:contain;font-size:20px;color:#fff;text-align:center;line-height:.52rem;margin:.34rem auto 0;cursor:pointer}#createImg-container #portrait-container .portrait-btn-wrap .btn-upload{display:block;width:1.26rem;height:.47rem;background-image:url("http:");background-position:center center;background-repeat:no-repeat;background-size:contain;font-size:20px;color:#fff;text-align:center;line-height:.52rem;margin:.23rem auto 0;cursor:pointer}#createImg-container #portrait-container .upload-btn-wrap{display:none}#createImg-container #portrait-container .upload-btn-wrap .btn-create{width:1.26rem;height:.47rem;background-position:center center;background-repeat:no-repeat;background-size:contain;font-size:20px;color:#fff;text-align:center;line-height:.52rem;margin:.1rem auto 0;cursor:pointer}#createImg-container #portrait-container .upload-btn-wrap .btn-upload,#createImg-container #portrait-container .upload-btn-wrap .btn-reset{display:block;width:1.26rem;height:.47rem;background-position:center center;background-repeat:no-repeat;background-size:contain;font-size:20px;color:#fff;text-align:center;line-height:.52rem;margin:.1rem auto 0;cursor:pointer}#createImg-container .create-showing{background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;left:0;top:0;width:100%;height:100%;z-index:111;display:none}#createImg-container .create-showing .create-wrap{width:3.22rem;height:3.4rem;background-color:#fff;margin:.63rem auto 0;padding:.2rem .2rem 0}#createImg-container .create-showing .create-wrap .create-text{margin:0;text-align:center;font-size:.14rem;line-height:.37rem;height:.37rem;color:#959595}#createImg-container .create-showing .create-wrap img{vertical-align:top;width:2.8rem;height:2.8rem;-moz-user-select:initial !important;-ms-user-select:initial !important;user-select:initial !important;-webkit-user-select:initial !important}#createImg-container .create-showing .btn-again,#createImg-container .create-showing .btn-lottery{width:1.26rem;height:.47rem;background-position:center center;background-repeat:no-repeat;background-size:contain;font-size:20px;color:#fff;text-align:center;line-height:.47rem;margin:.8rem auto 0;cursor:pointer}#createImg-container .create-showing .btn-lottery{margin-top:.2rem}#createImg-container .portrait-mask{height:100%;width:100%;position:absolute;top:0;left:0;z-index:10}#createImg-container .fadeOutUp{-webkit-animation-name:a;animation-name:a}#createImg-container .fadeInDown{-webkit-animation-name:b;animation-name:b}#createImg-container .overlayFadeOut{-webkit-animation-name:c;animation-name:c}#createImg-container .overlayFadeIn{-webkit-animation-name:d;animation-name:d}#createImg-container .bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}#createImg-container .bounceTop{-webkit-animation-name:bounceTop;animation-name:bounceTop}#createImg-container .animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes spin{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes a{0%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}to{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}}@keyframes a{0%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}to{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}}@-webkit-keyframes b{0%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes b{0%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes c{0%{opacity:1}to{opacity:0}}@keyframes c{0%{opacity:1}to{opacity:0}}@-webkit-keyframes d{0%{opacity:0}to{opacity:1}}@keyframes d{0%{opacity:0}to{opacity:1}}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}to{opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}to{opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}@-webkit-keyframes bounceTop{20%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}to{-webkit-transform:translate3d(0, -0.75rem, 0);transform:translate3d(0, -0.75rem, 0)}}@keyframes bounceTop{20%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}to{-webkit-transform:translate3d(0, -0.75rem, 0);transform:translate3d(0, -0.75rem, 0)}}