*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
btns
*/
.control-btn{
    width: 2rem;
    height: 0.831rem;
    -webkit-tap-highlight-color: transparent;
}
#skip{
    position: absolute;
    right: 10px;
    bottom: 1rem;
    background: url("../medias/btn_skip.png") center center no-repeat;
    background-size: 100% 100%;
    display: none;
}
#js_go_share{
    position: absolute;
    margin-left: -1rem;
    bottom: 1rem;
    left: 50%;
    background: url("../medias/btn_next.png") center center no-repeat;
    background-size: 100% 100%;
    display: none;
}

#js_return{
    background: url("../medias/btn_return.png") center center no-repeat;
    background-size: 100% 100%;
    margin-right: 50px;
}
#js_writers{
    background: url("../medias/btn_writers.png") center center no-repeat;
    background-size: 100% 100%;
}
#js_share{
    background: url("../medias/btn_share.png") center center no-repeat;
    background-size: 100% 100%;
}

.stage{
    background: rgb(12, 37, 27) center 35% no-repeat;
    max-width: 700px;
    margin: 0px auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.stage .page{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.page .page-content{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*
loading
*/
.page.loading .page-content{
    color: white;
    font-size: 14px;
    flex-direction: column;
    text-align: center;
}
/*----------
video-wrap:z-index 100
-----------*/
.page.video-wrap{
    z-index: 100;
    display: none;
    /*transform-origin: top center;*/
    /*transition: all 300ms linear;*/
    /*transform: translateY(-100%);*/
    background-color: black;
}
.page.video-wrap.in{
    transform: translateY(0);
    transition: all 600ms linear;
}
#video{
    width: 100%;
    height: 100%;
    object-fit:fill;
    -o-object-fit: fill;
    -webkit-object-fit: fill;
}

/*
page1
page-content:z-index 10
page1:before:z-index 5
*/

/*.page.page1:before{*/
    /*!*background: url('../medias/2.gif') center center no-repeat; url("../medias/avatar.jpg")*!*/
    /*background: rgb(29,31,37)  center 35% no-repeat;*/
    /*!*background-size: 50vw 50vw;*!*/
    /*content: '';*/
    /*display: block;*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*right: 0;*/
    /*z-index: 5;*/
/*}*/
.page.page1{
    background: rgba(29,31,37,.8)  center 35% no-repeat;
    transform: translateY(-100%);
    transition: all linear 300ms;
}
.page.page1.in{
    transform: translateY(0px);
}

.page.page1 .page-content .call-avatar-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    margin-bottom: 2rem;
    position: relative;
}

@keyframes refuseTipsAnimate {
    0%{
        opacity: 1;
        transform: translateY(0);
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translateY(-100px);
    }
}

.page.page1 .page-content .call-avatar-wrap .refuse-tips{
    position: absolute;
    top: -14px;
    width: 100%;
    text-align: center;
    animation: refuseTipsAnimate 1s linear forwards;
    font-size: 14px;
}

.page.page1 .page-content .call-avatar{
    width: 3rem;
    height: 3rem;
    background: url("../medias/avatar.png") center center no-repeat;
    background-size: 100% ;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.3);
}
.call-avatar-wrap .call-name{
    font-size: 24px;
    margin-bottom: 10px;
}
.call-avatar-wrap .call-tips{
    font-size: 14px;
}


@keyframes acceptCallMove {
    25%{
        transform: translateY(5px) ;
    }
    50%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0px);
    }
}
.call-icon-wrap{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    width: 1.5rem;
}
.call-icon-wrap.accept{
    margin-left: 2.5rem;
}
.call-icon-wrap.refuse{
    margin-left: -4rem;
}
.call-icon{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transform-origin: bottom center;
}
.call-icon-wrap.accept .call-icon{
    background: rgb(22,187,16) url("../medias/videoicon.png") center center no-repeat ;
    background-size: 40% 40%;
    animation: acceptCallMove 1000ms linear infinite;
}
.call-icon-wrap.refuse .call-icon{
    background: rgb(218,74,74) url("../medias/phoneicon.png") center center no-repeat ;
    background-size: 60% 60%;
}
.call-icon-wrap .call-icon-tip{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    top: calc(100% + 10px);
    font-size: 12px;
}


/*
page2
*/
.page2{
    display: none;
}
.page2 .page-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
#main-avatar{
    position: absolute;
    width: 3rem;
    top: 50%;
    left: 50%;
    margin: -1.5rem 0 0 -1.5rem;
    border-radius: 50%;
    transition:all 800ms cubic-bezier(.22,1.21,.71,1.06);
    transform: scale(0);
    transform-origin: center center;
    border: 4px solid white;
    font-size: 24px;
    color: white;
}
#main-avatar.in{
    transform: scale(1);
}

#main-avatar:before{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
    background: url("../medias/avatar.png") center center no-repeat;
    background-size: cover;
    border-radius: 50%;
}


.row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex: 0 0 50%;
}
.col{
    flex: 0 0 50%;
    height: 100%;
    transition: all 600ms cubic-bezier(.22,1,.71,1);
    position: relative;
}
#click-tip{
    position: absolute;
    bottom: 6%;
    right:12px;
    padding-left: calc(1rem + 5px);
    padding-top: calc(1rem - 10px);
    background: url('../medias/arrow.png') 5px 5px no-repeat;
    background-size: 1rem 1rem;
    font-size: 18px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: clickArrowAnimation 1s infinite;
    max-width: 4rem;
}
@keyframes clickArrowAnimation {
    50%{
        background: url('../medias/arrow.png') 0 0 no-repeat;
        background-size: 1rem 1rem;
    }
}


/*左上*/
.row:nth-of-type(1) .col:nth-of-type(1){
    background-size: 100% 100%;
    transform: translate(-100%,-100%);
    background: url("../medias/ms.gif") center top;
    background-size: 100% 100%;
}
.row:nth-of-type(1) .col.in:nth-of-type(1){
    transform: translate(0,0);
    border-right: 4px solid white;
    border-bottom: 4px solid white;
}

/*右上*/
.row:nth-of-type(1) .col:nth-of-type(2){
    transform: translate(100%,-100%);
    background: url("../medias/ym.gif") center top;
    background-size: 100% 100%;
}
.row:nth-of-type(1) .col.in:nth-of-type(2){
    transform: translate(0,0);
}

/*左下*/
.row:nth-of-type(2) .col:nth-of-type(1){
    transform: translate(-100%,100%);
    background: url("../medias/mm.gif") center top;
    background-size: 100% 100%;
}
.row:nth-of-type(2) .col.in:nth-of-type(1){
    transform: translate(0,0);
}

/*右下*/
.row:nth-of-type(2) .col:nth-of-type(2){
    transform: translate(100%,100%);
    background: url("../medias/jbb.gif") center top;
    background-size: 100% 100%;
}
.row:nth-of-type(2) .col.in:nth-of-type(2){
    transform: translate(0,0);
    border-top: 4px solid white;
    border-left: 4px solid white;
}

/*
page3
*/
.page.page3{
    display: none;
}
.page.page3 .page-content{
    background: url("../medias/share_bg.jpg") center top no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-start;*/
    align-items: center;
}
.share-page-gif{
    width: 5rem;
    height: 3rem;
    background: url("https://wximg.chuanbaoguancha.cn/marketing/CULqZZ31bUevI5XBESmxCgJzu44kbfYadV8HQwes.gif") center top no-repeat;
    background-size: 100% auto;
    margin-bottom: 30px;
}
.share-page-tips{
    width: 7rem;
    height: 2.122rem;
    background: url("../medias/share_tip.png") center top no-repeat;
    background-size: 100% 100%;
    margin-bottom: 30px;
}
.share-page-controls{
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mask{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
}
#main-writers-mask.mask{
    background: url("../medias/share_bg.jpg") center center no-repeat;
    background-size: 100% 100%;
}
.main-writers-inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /*padding-bottom: 1rem;*/
}
.main-writers-inner .content{
    flex: 1 1;
    width: 100%;
    padding: 1rem;
    color: white;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: scroll;
}

.main-writers-inner .content div{
    width: 100%;
    /*height: 100%;*/
    font-size: 14px;
    background-color: rgba(84,155,42,.8);
    border-radius: 20px;
    padding: 0.5rem;
}
.main-writers-inner .content div p.p-t{
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.main-writers-inner .close{
    flex: 0 0 2rem;
    width: 2rem;
    background: url("../medias/close.png") center center no-repeat ;
    background-size: cover;
    margin-bottom: 1rem;
}

#share-tip-mask.mask{
    background-color: rgba(0,0,0,.7);
}
#share-tip-mask.mask img{
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 20px;
    top: 20px;
    transform: rotate(75deg);
}