.wrapper article {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.wrapper article .template1 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.wrapper article .template1 .imgbox {
    position: relative;
    width: 100%;
    height: 100%
}

.wrapper article .template1 img {
    width: 100%;
    box-shadow: 0 0 .5rem #999
}

.wrapper article .template1 .circle-tip {
    width: 60%
}

.wrapper article .template1 .circle-tip .circle {
    display: block;
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 1.2rem;
    transform: translate(-50%, -50%);
    background-color: rgba(239, 188, 107, 0.7);
    animation: shine 1s ease-in-out infinite;
    -webkit-animation: shine 1s ease-in-out infinite
}

@keyframes shine {
    0% {
        background-color: rgba(239, 188, 107, 0.7)
    }
    50% {
        background-color: rgba(239, 188, 107, 0)
    }
    100% {
        background-color: rgba(239, 188, 107, 0.7)
    }
}

@-webkit-keyframes shine {
    0% {
        background-color: rgba(239, 188, 107, 0.7)
    }
    50% {
        background-color: rgba(239, 188, 107, 0)
    }
    100% {
        background-color: rgba(239, 188, 107, 0.7)
    }
}

.wrapper article .template1 .circle-tip .circle:before {
    display: block;
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .6rem;
    transform: translate(-50%, -50%);
    background-color: rgba(239, 188, 107, 0.9);
    animation: sshine 1s ease-in-out infinite;
    -webkit-animation: sshine 1s ease-in-out infinite
}

@keyframes sshine {
    0% {
        background-color: rgba(239, 188, 107, 0.9)
    }
    20% {
        background-color: rgba(239, 188, 107, 0)
    }
    100% {
        background-color: rgba(239, 188, 107, 0.9)
    }
}

@-webkit-keyframes sshine {
    0% {
        background-color: rgba(239, 188, 107, 0.9)
    }
    20% {
        background-color: rgba(239, 188, 107, 0)
    }
    100% {
        background-color: rgba(239, 188, 107, 0.9)
    }
}

.wrapper article .template1 .circle-tip .tip {
    display: block;
    width: 100%;
    padding: .4rem 1.25rem;
    border: .05rem solid #2C77BC;
    border-radius: 1rem;
    box-sizing: border-box;
    border: .025rem solid #2C77BC;
    text-align: center;
    font-size: .8rem;
    line-height: 1.1rem;
    color: #fff;
    background-color: rgba(38, 136, 253, 0.9);
    animation: fade-in 0.6s ease-in-out;
    -webkit-animation: fade-in 0.6s ease-in-out
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5)
    }
    100% {
        opacity: 1;
        transform: scale(1, 1)
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5)
    }
    100% {
        opacity: 1;
        transform: scale(1, 1)
    }
}

.wrapper article .template1 .circle-tip .tip i {
    display: block;
    position: absolute;
    top: .05rem;
    width: .5rem;
    height: .5rem;
    border-radius: 0 .2rem 0 .5rem;
    background-color: rgba(38, 136, 253, 0.9)
}

.wrapper article .template2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 3.3rem;
    box-sizing: border-box;
    text-align: center
}

.wrapper article .template2 h1 {
    margin-bottom: .55rem;
    font-size: 1.35rem
}

.wrapper article .template2 h2 {
    font-size: .75rem
}

.wrapper article .template2 .message {
    margin-top: 2.65rem
}

.wrapper article .template2 .message li {
    padding: .25rem .7rem 0;
    clear: both
}

.wrapper article .template2 .message li img {
    width: 2rem
}

.wrapper article .template2 .message li span {
    display: inline-block;
    position: relative;
    border-radius: .8rem;
    font-size: .7rem;
    color: #666;
    background-color: #fff
}

.wrapper article .template2 .message li span .angle {
    display: block;
    position: absolute;
    top: .05rem;
    width: .5rem;
    height: .5rem
}

.wrapper article .template2 .message li.left {
    overflow: hidden
}

.wrapper article .template2 .message li.left .angle {
    left: 0;
    border-radius: 0 .2rem 0 .5rem;
    background-color: #fff
}

.wrapper article .template2 .message li.left img {
    float: left
}

.wrapper article .template2 .message li.left span {
    float: left;
    padding: .65rem 1rem;
    margin-left: .25rem;
    border: .05rem solid #eee
}

.wrapper article .template2 .message li.right {
    position: relative
}

.wrapper article .template2 .message li.right img {
    float: right
}

.wrapper article .template2 .message li.right span {
    float: right;
    padding-left: 1rem;
    margin-right: .25rem;
    border: .05rem solid #22c4c7
}

.wrapper article .template2 .message li.right span .go {
    display: inline-block;
    position: relative;
    padding: .65rem .5rem .65rem;
    margin-left: 1rem;
    border-radius: 0 .7rem .7rem 0;
    font-size: .7rem;
    color: #fff;
    text-align: center;
    background-color: #22c4c7
}

.wrapper article .template2 .message li.right span .go .fingers {
    position: absolute;
    bottom: 0;
    right: 0
}

.wrapper article .template2 .message li.right span .go .fingers img {
    position: absolute;
    top: 1.25rem;
    left: .8rem
}

.wrapper article .template2 .message li.right span .go .fingers i {
    display: block;
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .8rem;
    transform: translate(33%, 40%);
    background-color: rgba(255, 255, 255, 0.2);
    animation: shine1 1s ease-in-out infinite;
    -webkit-animation: shine1 1s ease-in-out infinite
}

@keyframes shine1 {
    0% {
        background-color: rgba(255, 255, 255, 0.2)
    }
    50% {
        background-color: rgba(255, 255, 255, 0)
    }
    100% {
        background-color: rgba(255, 255, 255, 0.2)
    }
}

@-webkit-keyframes shine1 {
    0% {
        background-color: rgba(255, 255, 255, 0.2)
    }
    50% {
        background-color: rgba(255, 255, 255, 0)
    }
    100% {
        background-color: rgba(255, 255, 255, 0.2)
    }
}

.wrapper article .template2 .message li.right span .go .fingers i:before {
    display: block;
    position: absolute;
    top: .8rem;
    left: .8rem;
    content: '';
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.6);
    animation: sshine1 1s ease-in-out infinite;
    -webkit-animation: sshine1 1s ease-in-out infinite
}

@keyframes sshine1 {
    0% {
        background-color: rgba(255, 255, 255, 0.6)
    }
    20% {
        background-color: rgba(255, 255, 255, 0)
    }
    100% {
        background-color: rgba(255, 255, 255, 0.6)
    }
}

@-webkit-keyframes sshine1 {
    0% {
        background-color: rgba(255, 255, 255, 0.6)
    }
    20% {
        background-color: rgba(255, 255, 255, 0)
    }
    100% {
        background-color: rgba(255, 255, 255, 0.6)
    }
}

.wrapper article .template2 .message li.right span .angle {
    right: 0;
    border-radius: .2rem 0 .5rem 0;
    background-color: #22c4c7
}

.wrapper article .template3 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 3.3rem;
    box-sizing: border-box;
    text-align: center
}

.wrapper article .template3 h1 {
    margin-bottom: .55rem;
    font-size: 1.35rem
}

.wrapper article .template3 h2 {
    font-size: .75rem
}

.wrapper article .template3 .imgbox {
    margin: 2.5rem 3.25rem 0;
    padding: 3rem .9rem 0;
    background: url("../../images/newbie-guide/scrollPage/phone.png") no-repeat center top;
    background-size: 100%
}

.wrapper article .template3 .imgbox img {
    width: 100%
}

.wrapper article .tailpage {
    position: relative;
    width: 100%;
    height: 100%
}

.wrapper article .tailpage .share, .wrapper article .tailpage .download {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 9%
}

.wrapper article .tailpage .theapp {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%
}

.wrapper article .arrow {
    position: absolute;
    display: block;
    bottom: .75rem;
    left: 50%;
    width: 1.2rem;
    height: 1rem;
    transform: translateX(-50%);
    background: url("../../images/newbie-guide/scrollPage/arrow.png") no-repeat 0 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    animation: umdown 1s ease-in-out infinite;
    -webkit-animation: umdown 1s ease-in-out infinite
}

@keyframes umdown {
    0% {
        bottom: .75rem
    }
    50% {
        bottom: .5rem
    }
    100% {
        bottom: .75rem
    }
}

@-webkit-keyframes umdown {
    0% {
        bottom: .75rem
    }
    50% {
        bottom: .5rem
    }
    100% {
        bottom: .75rem
    }
}