*{margin: 0;padding: 0;}
html, body{width: 100%;height: 100%;overflow: hidden;}
.hide{display: none;}
.text-center{text-align: center;}
.opacity-0{opacity: 0;z-index: -1;}
.opacity-1{opacity: 1}
.mask{position: fixed;width: 100%;height: 100%;left: 0;top:0;z-index: 99;}
.music{position: absolute;width: 30px;right: 15px;top: 10px;z-index: 9;}
.rotate{-webkit-animation: rotate 2s linear infinite;}
#video{object-fit: fill; position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none;}
@-webkit-keyframes rotate{0%{-webkit-transform: rotate(0deg)} 100%{-webkit-transform: rotate(359deg)}}
@keyframes rotate{0%{-webkit-transform: rotate(0deg)} 100%{-webkit-transform: rotate(359deg)}}

.page-loading,.page-begin,.page-video,.page-shot,.page-share{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.page-loading{background: url("../img/page-loading-bg.jpg") no-repeat; background-size: cover;}
.loading-animation{margin:40% auto 54px; position: relative; width: 75px; height: 75px; font-size: 13px; color: #ffffff; line-height: 75px; text-align: center; border:1px solid #ffffff; background:rgba(255,255,255,.4); border-radius:50%;}
.loading-animation span{font-size: 20px;}
.loading-rotate{position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .25s linear; transition: all .25s linear;}
.loading-rotate .triangle_bottom{display: block; position: absolute; right: 29px; top:-5px; width: 0px; height: 0px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #ffffff; -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.loading-text{margin: 25px 0 100px 0; text-align: center;}
.loading-text img{width: 50%; margin: 0 auto;}
.loading-logo{display: block; width: 146px; height: 39px; margin: 0 auto; background: url("../img/logo.png"); background-size: 100%}

.page-begin{background: url('../img/page-begin-bg.jpg') center center no-repeat; background-size: cover;}
.page-begin-action{display: inline-block; width: 49%; height: 100%;}

.file{opacity: 0; width: 5.33rem; height: 6.4rem;}
#post-take-example-img{width: 100%; height: 100%;}
#btnCrop{top:auto; bottom: 25px; position: absolute; width: 100%; z-index: 9;}
#btnCrop img{width: 45%; height: auto; margin:0 auto; margin-top: 20px;}
.imageBox .thumbBox{border:none;}
.imageBox{width: calc(100% - 50px); height: 100%; border: 15px solid #fff; border-radius: 5px;}
.custom-glass-img{position: absolute; left: 50%; top: 120px; margin-left: -110px; width: 80px;}
.custom-glass-img img{width: 100%;}
#capture{margin-top: 20px; height: calc(100% - 150px);}
#action-ls{position: absolute; float: none; right: auto; top: 70px; width: 100%; text-align: center; z-index: 9;}
#action-ls img{margin: 0 30px; width: 30px; display: inline-block;}
.page-shot,.page-share{background-position: center center; background-repeat: no-repeat; background-size: cover;}
.page-share .share-loading{width: 50px; margin: 0 auto; margin-top:40%; display: none;}
.shot-fileUpload{position: absolute; width: 80px; height: 80px; line-height: 100px; color: #fff; border-radius: 50%; text-align: center;}
.sceneindex1 .shot-fileUpload{top: 27%; left: 60%;}
.sceneindex2 .shot-fileUpload{top: 23%; left: 23%;}
.sceneindex3 .shot-fileUpload{top: 35%; left: 13%;}
.sceneindex4 .shot-fileUpload{top: 27%; left: 61%;}
.sceneindex5 .shot-fileUpload{top: 29%; left: 19%;}
.file{position: absolute; left:0; top:0; width: 100%; height: 100%;}
.btn-upload{width: 70%; height: 70%; position: relative; left: 15%; top:15%;}
.action-upload #action-ls{display: none;}
.action-upload #capture{display: none;}
.rendering-text{position: absolute; width: 100%; height: 35px; bottom: 25px; text-align: center; font-size: 16px;}
.share-button{position: absolute; width: 100%; height: 35px; bottom: 25px; text-align: center;}
.share-button span,.share-button a{color: #fff; font-size: 16px; display: inline-block; width: 49%;}
.share-button img{width: 90%; margin:0 auto;}
.share-button a:nth-child(1) img{margin-right: 2%;}
.share-button a:nth-child(2) img{margin-left: 2%;}
.page-share-content{height: 100%;}
.page-share-result{width: calc(100% - 20px); height: calc(100% - 90px); margin: 10px;}
.action-rendering .share-button{display: none;}
.rendering-text{display: none;}
.action-rendering .rendering-text{display: block;}
.action-rendering .share-loading{display: block;}
.page-shot-upload{height: 100%;}
.mix-bg{margin-top: 20px; margin-left: 10px; height: calc(100% - 170px); width: calc(100% - 50px); border: 15px solid #fff; border-radius: 5px;}
.btn-shot-left{position: fixed; left:5px; top:40%; width: 30px; cursor: pointer;}
.btn-shot-right{position: fixed; right: 5px; top:40%; width: 30px; cursor: pointer;}


/* swiper */
.swiper-slide img{width: 100%;}
.swiper-container{margin-left: auto; margin-right: auto;}
.swiper-slide{background-size: cover; background-position: center;}
.swiper-glass{margin: 0 10px; padding: 0 40px; padding-top: 20px; padding-bottom: 20px; height: 50px; background-color: #fff; position: absolute; width: calc(100% - 100px); bottom: 110px;}
.swiper-glass-button{padding: 0 35px;}
.swiper-glass .swiper-slide span{display: block;}