body{margin: 0; padding: 0;}
a, img {border: none;outline: none;}
img {display: inline-block !important; vertical-align: middle;}

.container{width:300px; height:600px; box-sizing: border-box; border: 1px solid #7a8599; position: relative;/* background: url('../images/bg.jpg') no-repeat; background-size: 100%;*/ overflow: hidden;}

.container * {box-sizing: border-box;}
.clickTag{position:absolute; width:100%; height:100%; left:0; top:0; z-index:9;}

.d-none {display: none !important;}

.whiteGlobe{position:absolute; background:rgba(255,255, 255, 0.8); width:273px; height:273px; top:-56px; left:13px; z-index:2; text-align:center; border-radius:50%; overflow: hidden;}
.frame{width:100%; display:block; position:absolute; top:0; left:0; z-index:2; padding-top:110px;}

.frameBg{position:absolute; left:0px; top:0px; width:100%; height:100%; position:relative;}
.frameBg img{width:100%; position:absolute; left:0px; top:0px;}
.frameBg1 {
    opacity:0;
    -webkit-animation:fadeIn 0s ease-in-out 0s 1 forwards, fadeOut 1s ease-in-out 3s 1 forwards;
    animation:fadeIn 0s ease-in-out 0s 1 forwards, fadeOut 1s ease-in-out 3s 1 forwards;
}
.frameBg2{
    opacity:0;
    -webkit-animation:fadeIn 1s ease-in-out 3s 1 forwards, fadeOut 1s ease-in-out 6.5s 1 forwards;
    animation:fadeIn 1s ease-in-out 3s 1 forwards, fadeOut 1s ease-in-out 6.5s 1 forwards;
}
.frameBg3{
    opacity:0;
    -webkit-animation:fadeIn 1s ease-in-out 6.5s 1 forwards;
    animation:fadeIn 1s ease-in-out 6.5s 1 forwards;
}

/* Frame 1 Animation */
.frame.frame1{}
.f1_txt1{
    -webkit-animation:slideOutLeft 1s ease-in-out 3s 1 forwards;
    animation:slideOutLeft 1s ease-in-out 3s 1 forwards;
}
.f1_txt1 > img {width:211px; height:82px;}

/* Frame 2 Animation */
.frame.frame2{}
.f2_txt1 {
    -webkit-animation: RightToLeft 1s ease-in-out 3s 1 forwards, slideOutLeft 1s ease-in-out 6.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 3s 1 forwards, slideOutLeft 1s ease-in-out 6.5s 1 forwards;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}
.f2_txt1 > img{width:145px; height:82px;}

/* Frame 3 Animation */
.frame.frame3{padding-top:95px;}
.f3_txt1{
    -webkit-animation: RightToLeft 1s ease-in-out 6.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 6.5s 1 forwards;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}
.f3_txt1 > img {width:153px; height:110px;}


/* Footer */
.footer{width:100%; height:92px; position:absolute; bottom:0px; left:0px;z-index:3; background:#ffffff;}

.code{
    position:absolute;
    left:5px;
    top:5px;
    opacity:0;
    z-index:99;
    -webkit-animation:fadeIn 1s ease-in-out 6.7s 1 forwards;
    animation:fadeIn 1s ease-in-out 6.7s 1 forwards;
}
.code img{width:22px; height:6px; display:block !important;}

.pattern{border-bottom:2px solid #cb0935; top:-22px; position:absolute; width:100%;}
.pattern img{width:108px; height:21px; float:right; margin-bottom:-1px;}

.brand{position:absolute; right:19px; bottom:19px;}
.brand img{width:118px; height:54px; display:block;}

/* Button Animation */
.cta{position:absolute; bottom:27px; left:19px; overflow:hidden;}
.cta .ctaImg{width:122px; height:36px;}
.sweepEffect{
    position: absolute;
    left: 120px;
    top: -10px;
    height: 100px;
    width:40px;
    opacity: 0.5;
    -webkit-animation: sweepToRight 3s ease-in-out 6.7s 1 forwards;
    animation: sweepToRight 3s ease-in-out 6.7s 1 forwards;
    -webkit-transform: rotate(20deg) translateX(-500%);
    transform: rotate(20deg) translateX(-500%);
}


/* ==== Animation ==== */
@keyframes RightToLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes RightToLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes RightToLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}

@keyframes RightToLeftLoop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes RightToLeftLoop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes RightToLeftLoop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);}
}

@keyframes slideOutLeft {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-moz-keyframes slideOutLeft {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-webkit-keyframes slideOutLeft {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}

@keyframes slideOutLeftLoop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-moz-keyframes slideOutLeftLoop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}
@-webkit-keyframes slideOutLeftLoop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-150%);}
}

@keyframes LeftToRight {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes LeftToRight {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes LeftToRight {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}

@keyframes LeftToRightLoop {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-moz-keyframes LeftToRightLoop {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes LeftToRightLoop {
    0% {transform: translateX(-150%);}
    100% {transform: translateX(0%);}
}

@keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(200%);}
}
@-moz-keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(200%);}
}
@-webkit-keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(200%);}
}

@keyframes sweepToRightLoop {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-moz-keyframes sweepToRightLoop {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-webkit-keyframes sweepToRightLoop {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}


@keyframes spinner {
    0% {transform:rotate(-10deg);}
    100% {transform:rotate(0deg);}
}
@-moz-keyframes spinner {
    0% {transform:rotate(-10deg);}
    100% {transform:rotate(0deg);}
}
@-webkit-keyframes spinner {
    0% {transform:rotate(-10deg);}
    100% {transform:rotate(0deg);}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeInLoop {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes fadeInLoop {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes fadeInLoop {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-moz-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOutLoop {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-moz-keyframes fadeOutLoop {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes fadeOutLoop {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes zoomIn {
    from {transform: scale(1);}
    to {transform: scale(1.05);}
}
@-moz-keyframes zoomIn {
    from {transform: scale(1);}
    to {transform: scale(1.05);}
}
@-webkit-keyframes zoomIn {
    from {transform: scale(1);}
    to {transform: scale(1.05);}
}