@charset "utf-8";

/* reset.css */
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}article,aside,figure,footer,header,nav,section,details,summary{display:block}img{max-width:100%;vertical-align:bottom}html{overflow-y:scroll}ul,ol{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{-webkit-tap-highlight-color:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;vertical-align:bottom}td{font-weight:normal;vertical-align:top}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input,input:focus{outline:none;-webkit-tap-highlight-color:transparent}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}select,input,textarea{font:99% sans-serif}table{font-size:inherit;font:100%}small{font-size:85%}strong{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre,code,kbd,samp{font-family:monospace, sans-serif}.clickable,label,input[type=button],input[type=submit],input[type=file],button{cursor:pointer;-webkit-appearance:none}button,input,select,textarea{margin:0}button,input[type=button]{width:auto;overflow:visible}input:not([type]), input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"],input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button{padding:0;margin:0;outline: none; -webkit-appearance:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;appearance:none; -moz-appearance: none; background: transparent; border: none;}input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #666;}input:-moz-placeholder, textarea:-moz-placeholder {color:#666;}input::-moz-placeholder, textarea::-moz-placeholder {color:#666;}input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#666;}textarea{ outline: none; border: none;resize:none}
.cl:after { content: ""; display: block; height: 0; overflow: hidden; }
.cl:after { clear: both; }
a,a:hover{ text-decoration: none;}
img{ display: block; width: 100%;}
.cl { zoom: 1; }
.fl{ float:left; }
.fr{ float:right; }
.pop{ position: fixed; left:0; top:0; width: 100%; height: 100%; background:rgba(0,0,0,.3); z-index: 999999}
.pop .popbox{ position: relative; left:50%; top:50%;}
.scroll::-webkit-scrollbar{width: 6px;height: 6px;background-color: #F5F5F5;}   
.scroll::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5; } 
.scroll::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;} 

.loading{ position: fixed; z-index: 9; left: 0; top:0; width: 100%; height: 100%; background: url(../images/loadPage.jpg) no-repeat center top;}
.loadimg1{ }
.a1{ width: 138px; height: 138px; position: relative; left: 50%; margin-left: -69px; top:385px; overflow: hidden;}
.a1 img{ position: absolute; left: 0; top:0; width: 138px; height: 138px; overflow: hidden; }
.a2{ width: 488px; height: 60px; position: relative; left: 50%; top:480px; margin-left: -244px; text-align: center;}
.a2 .percent{ color: #6292a5; font-size: 20px; text-align: center; display: block; position: absolute; left: 0; top:28px; width: 100%;}
.a2 .bar-box{ width: 483px;height: 5px; position: absolute; left: 0; top:0; background: url(../images/bar-box.png) no-repeat center top; }
.a2 .bar{ position: absolute; left: 0; top:0; width: 20%; height: 5px; background: url(../images/bar.png) no-repeat center top;}
.a2 .bar::after{ content: ''; width: 38px; height: 50px; background: url(../images/icon-pen.png) no-repeat center top; position: absolute; right: -20px; top:-44px;}

.container{ background: url(../images/home.jpg) no-repeat center top; min-height: 800px; position: relative; height: 100%; z-index: 2;}
.home .container{ position: relative; left: 0; top:0; width: 100%; height: 1334px; overflow: hidden; background: url(../images/home.jpg) no-repeat center top;}
.transit{ position: absolute; left: 0; top:0; width: 100%; height: 100%;  z-index: 1}
.transit img{ position: absolute; left: 0; top:0; width: 100%; height: 100%;}
.cloud11{ position: absolute; left: 0; top:0; width: 100%; z-index: 2;}
.homeLayer{ position: absolute; left: 0; top:0; width: 100%;}
.trans-layer1{ position: absolute; left: 0; top:0; width: 100%; height: 100%; background: url(../images/transit.png) no-repeat center top; z-index: 3;}

.top_bar{ position:fixed; width:750px; height:97px; left:0; top:0; background-color:#457778; z-index:8;}
.game_icon{ float:left; width:75px; margin:10px 0 0 26px;}
.game_info{ float:left; width:270px; padding:16px 0 0 12px; font:normal 18px/30px "Microsoft YaHei"; color:#fff;}
.game_info span{ font-size:30px; color:#fff;}
.btn_main {float: right;width: 176px;height: 60px;margin: 18px 16px 0 0;background: url(../images/btnback.png) no-repeat;background-size: auto 100%;text-indent: -999px;overflow: hidden;}

.trans1{ z-index: 2; }
.trans2{  z-index: 1;}
.cloud1{ z-index: 15;}
.cloud2{ z-index: 14;}
.cloud3{z-index: 13;}
.cloud4{z-index: 12;}
.cloud5{z-index: 12;}
.cloud6{z-index: 11;}
.cloud7{z-index: 10;}
.cloud8{z-index: 9;}
.alogo{ display:inline-block; width: 209px; position: absolute; left: 50%; top:20%; margin-left: -105px; z-index: 9;}
.alogo img{ width: 100%;}
.slogo{ display:inline-block; width: 564px; position: absolute; left: 50%; top:26%; margin-left: -282px;opacity: 0;filter:alpha(opacity=0); z-index: 9}
.main{ opacity: 0; filter:alpha(opacity=0); position: relative; height: 100%; z-index: 9}
.main ul{ width: 100%; position: absolute; left: 0; text-align: center; top:65%; height: 24%; z-index: 9;}
.main li{ width: 16%; display:inline-block; margin: 0 2%; opacity: 0;filter:alpha(opacity=0); position: relative;transform-style:preserve-3d;transition:1s;backface-visibility:hidden;}
.main li a{ display:block;}
.main li img{ width: 100%;}
.main .front,.main .back{ position: absolute; left: 0; top:0; width: 100%;backface-visibility: hidden; transform-style: preserve-3d; transition: transform 1.2s; }
.main .front {transform: rotateY(0deg);}
.main .back{transform: rotateY(-180deg);}
.main li:hover .back{transform: rotateY(0deg);} 
.main li:hover .front{transform: rotateY(180deg);} 
.main .wrap{ z-index: 2; position: absolute; left: 0; top:0; width: 100%; height: 100%;}
.main .homelayer{ position: absolute; z-index: 1; width: 100%; height: 100%;}

.main .unlock .front{animation:showRotate 3s linear  0s infinite; -webkit-animation: showRotate 3s linear  0s infinite;}
.main .unlock .back{animation:showRotateb 3s linear  0s infinite;; -webkit-animation:showRotateb 3s linear  0s infinite;}

@-webkit-keyframes showRotate{
    0%{transform: rotateY(0deg);}
    50%{transform: rotateY(180deg);}
    100%{transform: rotateY(360deg);}
}

@keyframes showRotate{
    0%{transform: rotateY(0deg);}
    50%{transform: rotateY(180deg);}
    100%{transform: rotateY(360deg);}
}

@-webkit-keyframes showRotateb{
    0%{transform: rotateY(-180deg);}
    50%{transform: rotateY(0deg);}
    100%{transform: rotateY(180deg);}
}

@keyframes showRotateb{
    0%{transform: rotateY(-180deg);}
    50%{transform: rotateY(0deg);}
    100%{transform: rotateY(180deg);}
}

.animate .cloud1{animation:fadeOutRight 0.8s ease-in-out 0.4s both; -webkit-animation: fadeOutRight 0.8s ease-in-out 0.4s both;}
.animate .cloud2{animation:fadeOutRight 0.8s ease-in-out 0.4s both; -webkit-animation:fadeOutRight 0.8s ease-in-out 0.4s both}
.animate .cloud3{animation:fadeOutLeft 0.8s ease-in-out 0.6s both; -webkit-animation:fadeOutLeft 0.8s ease-in-out 0.6s both}
.animate .cloud4{animation:fadeOutLeft 0.8s ease-in-out 0.6s both; -webkit-animation:fadeOutLeft 0.8s ease-in-out 0.6s both;}
.animate .cloud5{animation:fadeOutLeft 1s ease-in-out 0.8s both; -webkit-animation:fadeOutLeft 1s ease-in-out 0.8s both}
.animate .cloud6{animation:fadeOutRight 1s ease-in-out 0.8s both; -webkit-animation:fadeOutRight 1s ease-in-out 0.8s both;}
.animate .cloud7{animation:fadeOutRight 1.2s ease-in-out 1s both; -webkit-animation:fadeOutRight 1.2s ease-in-out 1s both}
.animate .cloud8{animation:fadeOutLeft 1.4s ease-in-out 1s both; -webkit-animation:fadeOutLeft 1.4s ease-in-out 1s both;}
.animate .trans1{animation:fadeOut 0.6s ease-in-out 1s both; -webkit-animation:fadeOut 0.6s ease-in-out 1s both;}
.animate .trans2{animation:fadeOut 0.6s ease-in-out 1s both; -webkit-animation:fadeOut 0.6s ease-in-out 1s both;}
.alogo{animation:bounceInDown 0.6s ease-in-out 2.4s both; -webkit-animation:bounceInDown 0.6s ease-in-out 2.4s both;}
.slogo{animation:bounceIn 0.6s ease-in-out 2.8s both; -webkit-animation:bounceIn 0.6s ease-in-out 2.8s both;}
.main li{animation:fadeInUp 0.8s ease-in-out 3.4s both; -webkit-animation:fadeInUp 0.8s ease-in-out 3.4s both;}

.other { background: url(../images/other.jpg) no-repeat center 98px; min-height: 1722px;}
.left-alogo{ display: inline-block; position: absolute; left: 32px; top:36px; width: 6.2%;}
.left-alogo img{ width: 100%;}
.right-nav{ display: inline-block; position: fixed; right: 0; top:50%; height: 517px; width: 300px; margin-top: -259px; background: url(../images/right-nav.png) no-repeat right top;}
.right-nav a{ display: inline-block; position: absolute; left: 0; top:0;}
.right-nav .ahome{ width: 117px; height: 52px; left: 183px; top:16px;}
.right-nav .apage1{ width: 104px; height: 104px; left: 173px; top:72px;}
.right-nav .apage2{ width: 104px; height: 104px; left: 103px; top:141px;}
.right-nav .apage3{ width: 104px; height: 104px; left: 156px; top:242px;}
.right-nav .apage4{ width: 104px; height: 104px; left: 126px; top:351px;}

.right-nav a.on{ background: url(../images/right-nav-on.png) no-repeat;}
.right-nav .apage1.on{ background-position: -146px -72px;}
.right-nav .apage2.on{ background-position: -76px -141px;}
.right-nav .apage3.on{ background-position: -128px -242px;}
.right-nav .apage4.on{ background-position: -99px -351px;}
.wrap1000{ width: 1100px; margin: 0 auto; position: relative; background: url(../images/cont.png) no-repeat right top; min-height: 740px; top:14%;}

.subTit{ display: inline-block; width: 116px; height: 216px; position: absolute; left: -63px; top:-63px; }
.subMess{ display: inline-block; width: 49px; position: absolute; left: 42px; top:-14px;}
.videobox{ width: 646px; height: 366px; background-color: #000; position: absolute; left: 122px; top:50px;}
.videobox video{ width: 100%; height: 364px;}
.switch{ position: absolute; left: 50%; top:50%; width: 104px; height: 75px; background: url(../images/play.png) no-repeat center top; margin: -37px 0 0 -52px; z-index: 7; cursor: pointer;}
.thumb-img{ position: absolute; width: 202px; left: 794px; top:42px;}
.thumb-img li{ width: 202px; margin-bottom: 10px;}
.thumb-img li a{ display: block;}
.thumb-img li img{ width: 100%;}

.prompt{ position: fixed; left: 0; top:0; width: 100%; height: 100%; background: rgba(20,39,39,.95); z-index: 9999; display: none;}
.close{ display: inline-block; width: 50px; height: 51px; background: url(../images/close.png) no-repeat center top; position: absolute; top:-25px; right: 36px;}
.popbox{ position: relative; width: 1050px; height: 446px; background: url(../images/popbox.png) no-repeat center top; position: absolute; left: 50%; top:50%; margin: -223px 0 0 -525px; }
.popbox img{ width: 947px;height: 434px; margin: 2px 0 0 40px; border-left: 1px solid #1fc8c6}
.wrap750{ width: 750px; margin: 0 auto; position: relative; overflow: hidden;}
.other .wrap750{ padding-bottom: 216px;}
.alogo-right{ display: inline-block; width: 120px; height: 220px; position: absolute; right: 35px; top:132px; z-index: 6}
.subTit{ display: inline-block; width: 150px; height: 366px; position: absolute; left: 55px; top:134px; z-index: 2}
/*.subTit::after{ content: ''; width: 59px; height: 150px; position: absolute; left: 10px; top:216px; background: url(../images/sub-icon.png) no-repeat center bottom; left: 50%; margin-left: -38px;}*/
.submess{ display: inline-block; width: 49px; position: absolute; left: 156px; top:100px;}

.video { position: relative; width: 648px; height: 364px; margin: 0 auto; margin-top: 548px; margin-bottom: 60px;}
.video .vimg{ position: absolute; left: 0; top:0; width: 100%; z-index: 6; height: 364px;}
.switch { width: 104px; height: 75px; display: inline-block; position: absolute; left: 50%; top:50%; margin: -38px 0 0 -52px;}
.video video{ width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: 2; background-color: #000; display: none;}
.article{ margin: 0 40px; color: #2c656d; text-align: center; margin-bottom: 50px; position: relative;}
.article h4{ padding-bottom: 10px; background: url(../images/tit-icon.png) no-repeat 58% bottom; font-size: 22px; font-weight: normal; margin-bottom: 20px;}
.article p{ text-align:left; font-size: 22px;  height: 420px; overflow: hidden; line-height: 38px; margin-top: 20px;}

.art-tit .art-img{ position: absolute; left: 36px; top:4px; width: 134px; height: 70px;}
.art-tit p{ width: 426px; height: 80px; border: 1px solid #2c656d; text-align: center; border-radius: 40px; -webkit-border-radius: 40px; text-align: left; margin-left: 200px; padding: 4px 0; padding-left: 28px;}

.comnav{ height: 50px; position: relative; text-align: center;}
.comnav::after{ content: ''; width: 678px; height: 1px; background: #2c656d; position: absolute; left: 42px; top:24px;}
.comnav a{ display: inline-block; width: 155px; height: 50px;  margin: 0 10px; position: relative; z-index: 2;}
.comnav .page1{ background: url(../images/btn-page1.png) no-repeat center top;}
.comnav .page1.on{ background: url(../images/btn-page1-on.png) no-repeat center top;}
.comnav .page4{ background: url(../images/btn-page2.png) no-repeat center top;}
.comnav .page4.on{background: url(../images/btn-page2-on.png) no-repeat center top;}
.comnav .page2{ background: url(../images/btn-page3.png) no-repeat center top;}
.comnav .page2.on{background: url(../images/btn-page3-on.png) no-repeat center top;}
.comnav .page3{ background: url(../images/btn-page4.png) no-repeat center top;}
.comnav .page3.on{background: url(../images/btn-page4-on.png) no-repeat center top;}

.prompt{ position: fixed; left: 0; top:0; width: 100%; height: 100%; background: rgba(46,71,70,.95);z-index: 999}
.popbox{ width: 736px; height: 952px; display:block; margin: 0 auto; position: relative; left: 50%; top:50%; margin: -476px 0 0 -368px;}
.close{ display:block; width: 80px; height: 81px; background: url(../images/close.png) no-repeat center top; position: absolute; left: 50%; top:972px; margin-left: -40px;}

.thumb{ position: absolute; width: 632px; height: 925px; margin: 0 auto; overflow: hidden; left: 50%; margin-left: -312px; margin-top: 11px;}

.page1 .video{ margin-bottom: 20px; margin-top: 97px; position: relative; z-index: 2; width: 750px; height: 422px;} 
.article .desc1{ position: absolute;left: 50%;top: 330px;height: 40px;border-radius: 20px;-webkit-border-radius: 20px;border: 1px solid #2c6570;font-size: 22px;padding: 0 20px;width: 434px;margin-left: -217px;}
.page1 .video .vimg{ height: 100%;}

.page1 .subTit{ z-index: 3; top:556px; width: 120px; left: 14px;}

.sub-tit2{ width: 120px; }
.page1{ background: url(../images/page1.jpg) no-repeat center 100px;}
.pic1{ width: 609px; position: absolute; left: 50%; margin-left: -355px; top:0px; z-index: 4}

.article .pintro1{ padding-top: 414px; font-size: 24px;}
.article .pintro1 strong{ font-size: 46px; font-weight: normal;}
.page1 .article{ margin-bottom: 16px;}

.page1 .wrap750{ height: 1495px;}
.thumb img{ margin: 0; height: 925px;}
.mount{ position: absolute; right: 0; width: 730px; height: 717px; bottom: 0; z-index: 5;}
.layer{ position: absolute; left: 0; width: 750px; height: 260px; bottom: 0; z-index: 9;}
.float1{ position: absolute; right: 0; top:13px; width: 195px; z-index: 2;/* animation:floatRight 8s ease-in-out 0.2s infinite alternate; -webkit-animation: floatRight 8s ease-in-out 0.2s infinite alternate;*/}
.float2{ position: absolute; left: 0; top:0; width: 750px; z-index: 1; height: 444px;/*animation:floatLeft 10s ease-in-out 0.4s infinite alternate; -webkit-animation: floatLeft 10s ease-in-out 0.4s infinite alternate;*/}
.jiu{ position: absolute; left: 0; top:0; width: 945px; height: 1331px; max-width: 945px; z-index: 2}
.shadow{ position: absolute; left: 0; top:0; width: 750px; height: 1045px; z-index: 2}
.float3{ position: absolute; left: 0; top:395px; width: 364px; height: 280px; z-index: 1;/*animation:floatLeft 6s ease-in-out 0.1s infinite alternate; -webkit-animation: floatLeft 6s ease-in-out 0.1s infinite alternate;*/}
.float4{ position: absolute; right: 0; top:236px; width: 750px; height: 520px; z-index: 2;/*animation:floatRight 5s ease-in-out 0.2s infinite alternate; -webkit-animation: floatRight 5s ease-in-out 0.2s infinite alternate;*/}
.float5{ position: absolute; left: 0; top:703px; width: 546px; height: 277px; z-index: 3;/*animation:floatLeft 6s ease-in-out 0.1s infinite alternate; -webkit-animation: floatLeft 6s ease-in-out 0.1s infinite alternate;*/}
.float6{ position: absolute; left: 0; top:700px; width: 750px; height: 407px; z-index: 3;/*animation:floatLeft 6s ease-in-out 0.1s infinite alternate; -webkit-animation: floatLeft 6s ease-in-out 0.1s infinite alternate;*/}
.float7{ position: absolute; left: 0; bottom: 20px; width: 750px; height: 320px; z-index: 5;animation:floatRight 5s ease-in-out 0.2s infinite alternate; -webkit-animation: floatRight 5s ease-in-out 0.2s infinite alternate;}
.float8{ position: absolute; left: 0; bottom: 72px; width: 750px; height: 252px; z-index: 6;animation:floatRight 8s ease-in-out 0.1s infinite alternate; -webkit-animation: floatRight 8s ease-in-out 0.1s infinite alternate;}

.show {animation:showOut 0.2s ease-in-out 1.4s both; -webkit-animation: showOut 0.2s ease-in-out 1.4s both;}
.top_bar.fadeIn{animation:showOut 0.6s ease-in-out 1.4s both; -webkit-animation: showOut 0.6s ease-in-out 1.4s both;}

.home .xxa_footer_mb{height: 0; animation:showFooter 0.2s ease-in-out 2s both; -webkit-animation: showFooter 0.2s ease-in-out 2s both; overflow: hidden;}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev{ background:url(../images/btnNext.png) no-repeat center top;width: 36px; height: 42px; right: -2px;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background: url(../images/btnPrev.png) no-repeat center top; width: 36px; height: 42px; left: -2px;}

.ghome{ background: url(http://xxa.wanmei.com/m/images/cover1912/btn_enter.png) no-repeat center top}

.article .desc3 {
    position: absolute;
    left: 50%;
    top: 330px;
    height: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    border: 1px solid #2c6570;
    font-size: 22px;
    padding: 0 20px;
    width: 628px;
    margin-left: -314px;
}

.article .line2{ height: auto;}

@-webkit-keyframes showFooter{
    0%{height: 0}
    100%{height: 272px;}
}

@keyframes showFooter{
    0%{height: 0}
    100%{height: 272px;}
}

@-webkit-keyframes showOut{
    0%{opacity: 0}
    100%{opacity: 1; }
}

@keyframes showOut{
    0%{opacity: 0}
    100%{opacity: 1; }
}

@-webkit-keyframes floatRight{
    0%{-webkit-transform:translateX(0);transform:translateX(0)}
    50%{-webkit-transform:translateX(50px);transform:translateX(50px)}
    100%{-webkit-transform:translateX(0);transform:translateX(0)}
}

@keyframes floatRight{
    0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
    50%{-webkit-transform:translateX(50px);-ms-transform:translateX(50px);transform:translateX(50px)}
    100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}


@-webkit-keyframes floatLeft{
    0%{-webkit-transform:translateX(0);transform:translateX(0)}
    50%{-webkit-transform:translateX(-50px);transform:translateX(-50px)}
    100%{-webkit-transform:translateX(0);transform:translateX(0)}
}

@keyframes floatLeft{
    0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
    50%{-webkit-transform:translateX(-50px);-ms-transform:translateX(-50px);transform:translateX(-50px)}
    100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}

@-webkit-keyframes fadeOut{
    0%{opacity: 1;}
    100%{opacity: 0; display: none;}
}

@keyframes fadeOut{
    0%{opacity: 1;}
    100%{opacity: 0;display: none;}
}

@-webkit-keyframes fadeOutLeft{
    0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
}
@keyframes fadeOutLeft{
    0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
}


@-webkit-keyframes fadeOutRight{
    0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
}
@keyframes fadeOutRight{
    0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
}

@-webkit-keyframes bounceIn{
    0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}
    
    100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bounceIn{
    0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}
    100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}


@-webkit-keyframes bounceInDown{
    0%{opacity:0;-webkit-transform:translateY(-200px);transform:translateY(-200px)}
    60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes bounceInDown{
    0%{opacity:0;-webkit-transform:translateY(-200px);-ms-transform:translateY(-200px);transform:translateY(-200px)}
    60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeInDownBig{
    0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInDownBig{
    0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}