body{margin:0; padding:0;}
a, img {border:none; outline:none;}
img {display:inline-block;}

.container{width:300px; height:250px; 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;}

.frame{width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:2;}

.globe{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    text-align:center;
    margin-top:19px;
}
.globe img{width:223px;}

/* Frame 1 Animation */
.frame.frame1{
    z-index: auto;
}
.frame1 > div{width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:auto;}
.frame.frame1 > .f1_txt1{
    z-index:-1 !important; padding:6px 0px 0px 6px;
    -webkit-animation: LeftToRight 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    animation: LeftToRight 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(-55%);
    transform: translateX(-55%);
}
.f1_txt1 img{width:157px;}
.f1_txt2{
    padding:35px 0px 0px 6px;
    -webkit-animation: LeftToRight 1s ease-in-out 0.3s 1 forwards, slideOutRight 1.2s ease-in-out 3.5s 1 forwards;
    animation: LeftToRight 1s ease-in-out 0.3s 1 forwards, slideOutRight 1.2s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
}
.f1_txt2 img{width:81px;}
.f1_txt3{
    text-align:right; padding:43px 4px 0px 0px;
    -webkit-animation: RightToLeft 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(23%);
    transform: translateX(23%);
}
.f1_txt3 img{width:60px;}
.f1_txt4{
    text-align:right; padding:61px 4px 0px 0px;
    -webkit-animation: RightToLeft 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(42%);
    transform: translateX(42%);
}
.f1_txt4 img{width:113px;}
.f1_txt5{
    text-align:right; padding:139px 8px 0px 0px;
    -webkit-animation: RightToLeft 1s ease-in-out 0.3s 1 forwards, slideOutRight 1.5s ease-in-out 3.5s 1 forwards;
    animation: RightToLeft 1s ease-in-out 0.3s 1 forwards, slideOutRight 1.5s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(63%);
    transform: translateX(63%);
}
.f1_txt5 img{width:176px;}

.f1_txt6{
    padding:54px 0px 0px 6px;
    -webkit-animation: LeftToRight 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    animation: LeftToRight 1s ease-in-out 0.3s 1 forwards, slideOutRight 1s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(-39%);
    transform: translateX(-39%);
}
.f1_txt6 img{width:101px;}


/* == Globe Css **/
.globeFrame{
    width:100%;
    height:100%;
    position: absolute;
    left:0px; top:0px;
    -webkit-animation: LeftToRight 1s ease-in-out 3.5s 1 forwards;
    animation: LeftToRight 1s ease-in-out 3.5s 1 forwards;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.whiteGlobe{
    width:232px; height:232px; border-radius:50%; z-index:5; position:absolute; top:9px; left:50%; margin-left:-116px; overflow:hidden; background:rgba(255, 255, 255, 0.8); text-align:center;
}

/* Frame 2 Animation */
.frame.frame2{
    padding-top:41px;
    -webkit-animation: fadeOut 1s ease-in-out 7s 1 forwards;
    animation: fadeOut 1s ease-in-out 7s 1 forwards;
}
.f2_txt1{}
.f2_txt1 > img{width:133px;}
.f2_txt2{
    opacity:0;
    margin-top:12px;
    -webkit-animation: moreThanSurvive 1s ease-in-out 4.7s 1 forwards;
    animation: moreThanSurvive 1s ease-in-out 4.7s 1 forwards;
}
.f2_txt2 > img{width:151px;}


/* Frame 3 Animation */
.frame.frame3{
    padding-top:58px;
    -webkit-animation: fadeIn 1s ease-in-out 7s 1 forwards;
    animation: fadeIn 1s ease-in-out 7s 1 forwards;
    opacity:0;
}
.f3_txt1{}
.f3_txt1 > img{width:188px;}


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

.brand{position:absolute; right:19px; bottom:9px;}
.brand img{width:117px; display:block;}

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

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

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

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

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

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

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

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

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

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

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

@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 moreThanSurvive {
    from {opacity: 0; transform: translateY(-12px);}
    to {opacity: 1; transform: translateY(0%);}
}
@-moz-keyframes moreThanSurvive {
    from {opacity: 0; transform: translateY(-12px);}
    to {opacity: 1; transform: translateY(0%);}
}
@-webkit-keyframes moreThanSurvive {
    from {opacity: 0; transform: translateY(-12px);}
    to {opacity: 1; transform: translateY(0%);}
}