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:260px; height:260px; top:20px; right:50%; margin-right:-130px; 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:54px;}

.globe{
    position:absolute;
    left:-93px;
    bottom:39px;
    animation: spinner 3.5s linear 0s 1 forwards;
    -webkit-animation: spinner 3.5s linear 0s 1 forwards;
}
.globe img{width:315px;}

/* Frame 1 Animation */
.frame.frame1{padding-right:0px; padding-top:73px}
.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:180px; height:109px;}

/* Frame 2 Animation */
.frame.frame2{padding-top:105px; padding-right:0px;}
.f2_txt1 {
    -webkit-animation: RightToLeft 1s ease-in-out 3s 1 forwards, slideOutLeft 1s ease-in-out 5.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 3s 1 forwards, slideOutLeft 1s ease-in-out 5.5s 1 forwards;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}
.f2_txt1 > img{width:178px; height:49px;}

/* Frame 3 Animation */
.frame.frame3{padding-top:105px; padding-right:0px;}
.f3_txt1 {
    -webkit-animation: RightToLeft 1s ease-in-out 5.5s 1 forwards, slideOutLeft 1s ease-in-out 7.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 5.5s 1 forwards, slideOutLeft 1s ease-in-out 7.5s 1 forwards;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}
.f3_txt1 > img{width:166px; height:49px;}

/* Frame 4 Animation */
.frame.frame4{padding-top:88px; padding-right:0;}
.f4_txt1 {
    -webkit-animation: RightToLeft 1s ease-in-out 7.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 7.5s 1 forwards;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}
.f4_txt1 > img{width:206px; height:80px;}


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

.code{
    position:absolute;
    left:3px;
    bottom:3px;
    opacity:0;
    -webkit-animation:fadeIn 1s ease-in-out 7.7s 1 forwards;
    animation:fadeIn 1s ease-in-out 7.7s 1 forwards;
}
.code img{width:25px; height:5px; 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 7.7s 1 forwards;
    animation: sweepToRight 3s ease-in-out 7.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(0%);}
}
@-moz-keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}
@-webkit-keyframes sweepToRight {
    0% {transform: rotate(20deg) translateX(-500%);}
    100% {transform: rotate(20deg) translateX(0%);}
}

@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;}
}