@charset "utf-8";
/*----------from crsHGome.css file----------*/
/* ANIMATION MR*/


#mrMAIN{position:relative;display:block;width:100%;margin-bottom: -280px;z-index:-1;}
#mrMAIN #banner, #mrMAIN .slider, #mrMAIN .mrSlider
{ padding: 0px 0 350px!important; background-size: 100%!important; background-attachment: fixed!important; background-position: center top;}

#mrMAIN .fade {padding: 0px 0 33%!important;background-size: 100%!important;background-attachment: fixed!important;background-position: center top;}


@media (max-width: 1200px){
#mrMAIN{display:none;}
}

.mrSlider{width: 70%; max-width: 100%; height: auto;overflow: hidden; position: absolute; margin-bottom: 0px; background-repeat: no-repeat; background-size: 100% auto; display: block;left:0;

background: rgba(0,63,115,0.7);
background: -moz-linear-gradient(left, rgba(0,63,115,0.7) 35%, rgba(47,184,249,0) 70%, rgba(47,184,249,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(35%, rgba(47,184,249,0)), color-stop(770%, rgba(47,184,249,0)), color-stop(100%, rgba(47,184,249,0)));
background: -webkit-linear-gradient(left, rgba(0,63,115,0.7) 35%, rgba(47,184,249,0) 70%, rgba(47,184,249,0) 100%);
background: -o-linear-gradient(left, rgba(0,63,115,0.7) 35%, rgba(47,184,249,0) 70%, rgba(47,184,249,0) 100%);
background: -ms-linear-gradient(left, rgba(0,63,115,0.7) 35%, rgba(47,184,249,0) 70%, rgba(47,184,249,0) 100%);
background: linear-gradient(to right, rgba(0,63,115,0.7) 35%, rgba(47,184,249,0) 70%, rgba(47,184,249,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#044e6e', endColorstr='#044e6e', GradientType=1 );

}

.fade h2.mfadeUp, .fade h2{ color: #fff!important; text-align:left!important; position: absolute!important; 
left: 0px; top: 0; padding: 20px; width: 100%; display: block; margin: 0 auto; box-sizing: border-box; font-size: 34px; z-index: 5; line-height: 1.2em; text-transform: none!important;font-family:'MyFont'; }

.fade h2 strong{color: #fff!important;} 

.fade h2.mfadeUp span, .fade h2 span{font-size:30px;line-height: 1.2em!important;display:block;clear:both;margin-top:5px;}

.fade{ position: absolute!important; z-index: 1;   width: 100%; background-repeat: no-repeat; background-size: 100% auto; overflow: hidden; display: block; background-position: right top; padding:0 3%;
top:0px;left:5%;max-width: 800px;/*margin-left:-400px;*/}

.fade img{height:150px;width:150px;float:left;padding-right:30px;margin-top:-30px;display:none!important;}

.fade{-webkit-animation-name:fade;animation-name:fade;}
.mfadeUp{-webkit-animation-name:mfadeUp;animation-name:mfadeUp;}
.scale{-webkit-animation-name:scale;animation-name:scale;transform-origin: bottom left;}
.moveLeft{-webkit-animation-name:moveLeft;animation-name:moveLeft;}

.fade, .fade h2.mfadeUp, .scale, .moveLeft{
-webkit-animation-fill-mode:both;animation-fill-mode:both;
animation-timing-function: ease-out;animation-iteration-count:99;
-webkit-animation-duration:50s;animation-duration:50s;animation-iteration-count:99;}

.fade.fade0, .fade.fade0 .mfadeUp, .fade.fade0 .scale, .fade.fade0 .moveLeft{animation-delay:0s;}
.fade.fade1, .fade.fade1 .mfadeUp, .fade.fade1 .scale, .fade.fade1 .moveLeft{animation-delay:1s;}
.fade.fade2, .fade.fade2 .mfadeUp, .fade.fade2 .scale, .fade.fade2 .moveLeft{animation-delay:10s;}
.fade.fade3, .fade.fade3 .mfadeUp, .fade.fade3 .scale, .fade.fade3 .moveLeft{animation-delay:20s;}
.fade.fade4, .fade.fade4 .mfadeUp, .fade.fade4 .scale, .fade.fade4 .moveLeft{animation-delay:30s;}
.fade.fade5, .fade.fade5 .mfadeUp, .fade.fade5 .scale, .fade.fade5 .moveLeft{animation-delay:40s;}
.fade.fade6, .fade.fade6 .mfadeUp, .fade.fade6 .scale, .fade.fade6 .moveLeft{animation-delay:50s;}

.ring{ -webkit-animation-name: ring; animation-name: ring; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease-out; animation-iteration-count: 99; -webkit-animation-duration: 1.3s; animation-duration: 1.3s;  display: block; width: 10px; height: 10px; border-radius: 50%; position: absolute; z-index: 999999999999; border: 2px solid #7C62FB; animation-iteration-count: 7;}
.ring.ring0{animation-delay:0.1s;top:22%;right:7%;border:2px solid #FFF;z-index:88;}
.ring.ring0.ring02{animation-delay:0.5s;}
.ring.ring1{animation-delay:2s;top:20%;left:28%;animation-iteration-count:6;}
.ring.ring1.ring02{animation-delay:2.5s;}
.ring.ring2 { animation-delay: 4s;top: 24%;left: 90%;border:2px solid #fff;animation-iteration-count:4;}

.ring.ring3{animation-delay:4s;top:80%;left:19%;animation-iteration-count:4;}
.ring.ring2.ring02, .ring.ring3.ring02{animation-delay:4.5s;}

@media(max-width:1280px){
.ring.ring0 {top: 25%;right: 9%;}
}

@media(max-width:760px){
.ring.ring0 {top: 34%;right: 9%;}
}

@-webkit-keyframes fade{
0%{opacity:0;z-index:1;}
0.1%{opacity:0;z-index:22;} 
6%{opacity:1;} 
10%{opacity:1;z-index:22;}
20%{opacity:1;z-index:22;}
23%{opacity:0;z-index:1;}
100%{opacity:0;z-index:1;}
}
@keyframes fade{
0%{opacity:0;z-index:1;}
0.1%{opacity:0;z-index:22;} 
6%{opacity:1;} 
10%{opacity:1;z-index:22;}
20%{opacity:1;z-index:22;}
23%{opacity:0;z-index:1;}
100%{opacity:0;z-index:1;}
}



@-webkit-keyframes mfadeUp{
0%{opacity:0;-webkit-transform:translate3d(0, 100%, 0) scale(.7);transform:translate3d(0, 100%, 0) scaleY(.7);}
5%{opacity:1;-webkit-transform:none;transform:none;}

}
@keyframes mfadeUp{
0%{opacity:0;-webkit-transform:translate3d(0, 100%, 0) scale(.7);transform:translate3d(0, 100%, 0) scaleY(.7);}
5%{opacity:1;-webkit-transform:none;transform:none;}
}


@-webkit-keyframes moveLeft{
0%{opacity:0;-webkit-transform:translate3d(0, 0, 100%);transform:translate3d(0, 0, 100%);}
7%{opacity:0;-webkit-transform:translate3d(0, 0, 100%);transform:translate3d(0, 0, 100%));}
12%{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes moveLeft{
0%{opacity:0;-webkit-transform:translate3d(0, 0, 100%);transform:translate3d(0, 0, 100%);}
7%{opacity:0;-webkit-transform:translate3d(0, 0, 100%);transform:translate3d(0, 0, 100%));}
12%{opacity:1;-webkit-transform:none;transform:none;}
}

@-webkit-keyframes scale{
0%{opacity:0;transform:scale(0.8);}
3%{opacity:0;transform:scale(0.8);}
8%{opacity:1;transform:scale(1);}
}
@keyframes scale{
0%{opacity:0;transform:scale(0.8);}
3%{opacity:0;transform:scale(0.8);}
8%{opacity:1;transform:scale(1);}
}

@-webkit-keyframes ring{
0%{opacity:0;}
5%{opacity:0.8;transform:scale(1);}
50%{opacity:0;transform:scale(6);}
90%{opacity:0.8;transform:scale(1);}
100%{opacity:0;}
}
@keyframes ring{
0%{opacity:0;}
5%{opacity:0.8;transform:scale(1);}
50%{opacity:0;transform:scale(6);}
90%{opacity:0.8;transform:scale(1);}
100%{opacity:0;}
}