@charset "utf-8";
html{overflow-x:hidden;}
body{background:#0d1525; font-size:12px; color:#505972;vertical-align:top;margin:0;padding:0;font-family:"Microsoft YaHei","SimSun","SimHei",Arial,Tahoma,Helvetica;-webkit-text-size-adjust:none;}h1,h2,h3,h4,h5,h6,u,i,div,font,span,table,tr,td,dl,dd,dt,ul,ol,li,pre,form,fieldset,input,textarea,blockquote{margin:0px;padding:0px;}ol,ul,li{list-style:none;margin:0px;padding:0px;vertical-align:top;}dl,dt,dd{list-style:none;margin:0px;padding:0px;vertical-align:top;}font{margin:0px;padding:0px;font:normal;font-weight:normal;}p{margin:0px;padding:0px;}img{vertical-align:top;border:0;}h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;font-size:12px;font-weight:normal;line-height:normal;}form{margin:0px;padding:0px;}abbr,acronym{border:0;}address,caption,cite,code,dfn,th,var{font-weight:normal;font-style:normal;}a{-webkit-text-size-adjust:none; -webkit-user-select: none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-font-smoothing: antialiased;}a:link{color:#000;text-decoration:none;}a:visited{color:#000;text-decoration:none;}a:hover{color:#000;text-decoration:none;}a:active{color:#000;}a:focus,input{outline:none;}.clear:before,.clear:after{content:"";clear:both;display:block;height:0;visibility:hidden;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none;}input,textarea{background:none;border:0px none;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block; margin:0; padding:0;}.foAr{font-family:Arial,"Microsoft YaHei","SimSun";}html{overflow-x:hidden;}.fl{float:left;}.fr{float:right;}.show{display:block;}.hide{display:none;}.fontBankGothic{font-family:BankGothic,Arial;}
em{ font-style: normal;}
/*startdom*/
.mainBox{ width: 640px; height: 1027px; margin: 0px auto; overflow-x:hidden;  background:#0d1525 url(../images/back2.jpg)  no-repeat; background-size:640px auto; position: relative; }
.header{ height: 83px; width: 640px;  display: table;  background:#010d27; position: absolute; left: 0px;  top: 0px; z-index: 10; }
.btn,.header .logo,.titleBox h1,.midbox .show,.pop,.pop .del,.pop .btnbox .btn,.pop .btnbox .btn input,.pop .select .s1:before{
    background: url(../images/img2.png) no-repeat; background-size:640px 1100px;
}
.header .btn,.footer .btn{ display: block; width: 195px; height: 55px; position: absolute;  font-size: 26px; color: #d8d8d8; line-height: 55px; text-align: center; }
.header .btn1{ background-position: -200px -20px; left: 16px; top: 13px;  }
.header .btn2{ background-position: -200px -20px; right: 16px; top: 13px; }
.header .logo{display: block; position: absolute; width: 196px; height: 105px; background-position: 0px 0px; left: 215px; top: 13px; }
.top .anm1,.top .anm2,.top .anm3,.top .anm4{ position: absolute; background: url(../images/top.png) no-repeat; background-size:640px 1100px; display: none; }
.top .anm3{ display: block;}
.top .anm1{ width: 300px; height: 420px; left:0px; top: 80px; background-position: 0px 0px;}
.top .anm2{ width: 340px; height: 420px; left:350px; top: 80px; background-position: -300px 0px;}
.top .anm3{ width: 340px; height: 100px; 
    left: 147px;
    top: 342px;
    background-position: -260px -480px;}

.top .anm4{ width: 240px; height: 560px; 
    left: 204px;
    top: 20px;
    background-position: 0px -460px;
}
.titleBox h2,.midbox .show2,.pop5{
    background:url(../images/img3.png) no-repeat;
    background-size: 640px 1200px;
}
.titleBox{ width: 540px; position: absolute; top: 390px; left: 50px; z-index: 9; display: none;;}
.titleBox h1{ width: 540px; height: 115px;  background-position: 0px -420px;}
.titleBox h2{ width: 540px; height: 215px;   background-position: 0px -180px;}
.titleBox p{ height: 40px; line-height: 40px; font-size: 26px; text-align: center; color: #fff;   
    /*text-shadow: 1px 2px 2px #000000;*/
    background-image: -webkit-gradient(linear, 0% 60%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(179, 179, 179, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.titleBox p em{ font-style: normal;  
    background-image: -webkit-gradient(linear, 0% 60%, 0% 100%, from(rgba(255, 202, 75, 1)), to(rgba(192, 135, 0, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.midbox{ position: absolute; width: 575px; top: 590px; left: 35px;}
.midbox .show{ 
    width: 280px; height: 170px;  position: absolute;
}
.midbox .show p{ font-size: 32px; color: #8dcbff; height: 65px; line-height: 65px; text-align: center; padding-top: 8px; }
.midbox .show span{ display: block; font-size: 42px; color: #8dcbff; height: 70px; line-height: 70px; text-align: center; font-weight: bold; }
.midbox .s1{ background-position: 0px -240px; left: 0px; top: 0px;  }
.midbox .s2{ background-position: 0px -240px; right: 0px; top: 0px; }
.midbox .btn{ display: table; position: absolute; height: 99px; width: 263px; font-size: 30px; text-align: center; line-height: 99px; font-weight: bold;}
.midbox .btn1{ background-position: 0px -120px; right: 5px; top: 185px; }
.midbox .btn1 em{
    background-image: -webkit-gradient(linear, 0% 60%, 0% 100%, from(rgba(205, 229,255, 1)), to(rgba(115,181,255, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 }
.midbox .btn2{ background-position: -280px -120px; left: 5px; top: 185px; }
.midbox .btn2 em{
    background-image: -webkit-gradient(linear, 0% 60%, 0% 100%, from(rgba(255, 232,229, 1)), to(rgba(255,179,185, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 }

.midbox .art{ font-size: 24px; color: #fff; line-height: 50px; height: 50px; position: absolute; left: 0px; top: 290px;}

.midbox .show2{ 
    width: 580px; height: 180px;  position: absolute;
    
}
.midbox .show2 p{ font-size: 32px; color: #8dcbff; height: 65px; line-height: 65px; text-align: center; padding-top: 8px; }
.midbox .show2 span{ display: block; font-size: 42px; color: #8dcbff; height: 70px; line-height: 70px; text-align: center; font-weight: bold; }
.midbox .s3{ background-position: 0px 0px; right: 0px; top: 0px; }

.ft{height: 84px; }
.footer{
    height: 84px; 
    width: 640px; position: fixed; left: 50%; margin-left: -320px; bottom: 0px;
    background: url(../images/foot.png) repeat-x;
}
.footer .btn1{ background-position: -200px -20px; left: 16px; top: 13px; }
.footer .btn2{ background-position: -200px -20px; right: 16px; top: 13px; }

.pop{ width: 530px; height: 445px; position: absolute; top:32%; left: 50%; margin-left: -265px; z-index: 101; background-position: 0px -560px; display: none;}
.pop .del{ position: absolute; top: -25px; right: -25px; width: 68px; height: 68px; background-position: -540px -560px; display: table;  z-index: 102; cursor: pointer; }
.pop h2{ height: 68px; line-height: 68px; margin-top:22px;  text-align: center; font-size: 28px; color: #8dcbff;}
.pop .select{ width: 410px; margin: 0px auto;}
.pop .select1{ margin: 80px auto 90px auto;}
.pop .select .s1{ display: table; position: relative; height: 54px; line-height: 54px; width: 402px; background:url(../images/btn.gif) repeat-x; background-size:auto 54px; margin-top: 15px; box-shadow: 3px 3px 5px #000; font-size: 24px; color: #5e7f9b;  text-indent: 0.5em;  }
.pop .select .s1:before{
    content: "";
    display: table; height: 20px; width: 20px;  position: absolute; top: 21px; right: 14px;
    background-position: -540px -640px;
}
.pop .select .s1 .select{
    position: absolute;
    width: 402px; height: 54px; left: 0px; top: 0px; opacity: 0;
}

.pop .btnbox{ margin-top: 25px; width: 410px; height: 80px; margin: 25px auto 0px auto;}
.pop .btnbox .btn{ width: 188px; display: table; height: 77px; text-align: center; color: #fff; font-size: 26px; line-height: 77px;}
.pop .btnbox .btnl{ float: left; background-position: 0px -1020px;}
.pop .btnbox .btnr{float: right; background-position: -200px -1020px;}
.pop .btnbox .btnc{ float: none; margin-left: auto; margin-right: auto; }

.pop3 .progress{ width: 346px; height: 31px; background: url(../images/pbk.gif) repeat-x; background-size: 1px 31px; margin: 100px auto 30px auto; border-radius: 30px; overflow: hidden; position: relative;}
.pop3 .progress span{ display: block; width:40px; height: 25px; position: absolute; left: 3px; top: 3px; background: url(../images/pdk2.gif) repeat-y; background-size: 340px 1px; border-radius: 30px;}
.pop3 .part { font-size: 22px; color: #8dcbff; text-align: center;} 
.popback{ width: 100%; height: 100%; position: fixed; z-index: 100; background: #000; opacity: 0.8; left: 0px; top: 0px;  display: none; }

.pop4 .notice{ padding: 70px 60px; line-height: 45px; font-size: 22px; color: #8dcbff; text-align: center;}

.pop5{ width: 540px; top: 12%; height: 800px; background-position: 0px -400px; }
.pop5 .notice {
        font-size: 24px;
    color: #7fb2dc;
    padding: 26px 42px;
    line-height: 39px;
}

.popLogin{
     width: 640px; height: 1027px;  position: fixed;  z-index: 110; display: none;  left: 50%; margin-left: -320px; top: 0px;  background: #fff; 
}
.popLogin .del{ 
    position: absolute;
    cursor: pointer;
    right: 10px;
    bottom: 5px;
    width: 60px;
    height: 60px;
    border: 1px solid #008CD6;
    text-align: center;
    font-size: 32px;
    color: #008CD6;
    line-height: 60px;
    border-radius: 30px;
}
.popLogin iframe{   width: 640px; height: 1027px;}


.load7 .loader:before,
.load7 .loader:after,
.load7 .loader {
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.load7 .loader {
    margin: 0.5em auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.load7 .loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.load7 .loader:after {
    left: 3.5em;
}
.load7 .loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}
@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 1.5em 0 -1.3em #ffffff;
    }
    40% {
        box-shadow: 0 1.5em 0 0 #FFF;
    }
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 1.5em 0 -1.3em #ffffff;
    }

    40% {
        box-shadow: 0 1.5em 0 0 #FFF;
    }
}


/*enddom*/

.animate1{
animation:fadeIn 2s 1;
-webkit-animation:fadeIn 2s 1;
-moz-animation:fadeIn 2s 1;
-o-animation:fadeIn 2s 1;
}
@-webkit-keyframes fadeIn{
    0%{opacity:1}
    50%{opacity:0.6}
    100%{opacity:1;}
}
@-moz-keyframes fadeIn{
    0%{opacity:1}
    50%{opacity:0.6}
    100%{opacity:1;}
}

.animate2{
    -webkit-animation:rotateIn 1s  ease;
    -moz-animation:rotateIn 1s ease;
}
@-webkit-keyframes rotateIn{ 
    0%{
        -webkit-transform:rotate(-200deg);
    } 
    100%{
        -webkit-transform:rotate(0deg);
    } 
}
@-moz-keyframes rotateIn{ 
    0%{
        -ms-transform: rotate(-200deg); 
    } 
    100%{
        -ms-transform: rotate(0deg); 
    } 
}
@keyframes rotateIn{ 
    0%{
        transform: rotate(-200deg); 
    } 
    100%{
        transform: rotate(0deg); 
    } 
}
.animate2_f{
    -webkit-animation:rotateIn2 1s  ease ;
    -moz-animation:rotateIn2 1s ease ;
}
@-webkit-keyframes rotateIn2{ 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-200deg);} }
@-moz-keyframes rotateIn2{ 0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(-200deg);} }
@keyframes rotateIn2{ 0%{transform:rotate(0deg);} 100%{transform:rotate(-200deg);} }

/*效果七*/