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

.container{width:970px; height:250px; box-sizing: border-box; border: 1px solid #7a8599; border-bottom:0px; 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.9); width: 350px; height: 350px;top: -50px; left: 216px; z-index: 2; text-align: center; border-radius: 50%; overflow: hidden;}
.frame{width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:2; padding-top:122px;}

.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{
    -webkit-animation:slideOutTop 1s ease-in-out 3s 1 forwards;
    animation:slideOutTop 1s ease-in-out 3s 1 forwards;
}
.f1_txt1{}
.f1_txt1 > img {width:274px; height:106px;}

/* Frame 2 Animation */
.frame.frame2{
    -webkit-animation: BottomToTop 1s ease-in-out 3s 1 forwards, slideOutTop 1s ease-in-out 6.5s 1 forwards;
    animation: BottomToTop 1s ease-in-out 3s 1 forwards, slideOutTop 1s ease-in-out 6.5s 1 forwards;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.f2_txt1{}
.f2_txt1 > img{width:189px; height:106px;}

/* Frame 3 Animation */
.frame.frame3{
    padding-top:102px;
    -webkit-animation: BottomToTop 1s ease-in-out 6.5s 1 forwards;
    animation: BottomToTop 1s ease-in-out 6.5s 1 forwards;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.f3_txt1{}
.f3_txt1 > img {width:200px; height:145px;}

/* Footer */
.footer{width:210px; height:250px; position:absolute;bottom:0px;right:0px;z-index:3; background:#ffffff;}

.code{
    position:absolute;
    left:11px;
    top:11px;
    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:36px; height:10px; display:block !important;}

.pattern{border-bottom:3px solid #cb0935; bottom:0px; right:0px; position:absolute; width:100%; z-index:34}
.pattern img{width:162px; height:31px; float:right; margin-bottom:-10px;}

.brand{position:absolute; right:25px; bottom:89px;}
.brand img{width:158px; height:72px; display:block;}

/* Button Animation */
.cta{position:absolute; bottom:100px; right:226px; overflow:hidden;}
.cta .ctaImg{width:163px; height:48px; display:block;}
.sweepEffect{
    position: absolute;
    left: 120px;
    top: -50px;
    height: 220px;
    width:60px;
    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 BottomToTop {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}
}
@-moz-keyframes BottomToTop {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}
}
@-webkit-keyframes BottomToTop {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}
}

@keyframes slideOutTop {
    0% {transform: translateY(0%);}
    100% {transform: translateY(-100%);}
}
@-moz-keyframes slideOutTop {
    0% {transform: translateY(0%);}
    100% {transform: translateY(-100%);}
}
@-webkit-keyframes slideOutTop {
    0% {transform: translateY(0%);}
    100% {transform: translateY(-100%);}
}

@keyframes TopToBottom {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}
@-moz-keyframes TopToBottom {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}
@-webkit-keyframes TopToBottom {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}

@keyframes slideOutBottom {
    0% {transform: translateY(0%);}
    100% {transform: translateY(100%);}
}
@-moz-keyframes slideOutBottom {
    0% {transform: translateY(0%);}
    100% {transform: translateY(100%);}
}
@-webkit-keyframes slideOutBottom {
    0% {transform: translateY(0%);}
    100% {transform: translateY(100%);}
}

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