@charset "utf-8";
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-family: Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", STXihei, STHeiti, Heiti, SimSun, sans-serif; font-size: 100%; }
html, body { color: #333 }
body { background: #404040; overflow-x: hidden; }
ul, ol, li { list-style: none; }
a:link, a:visited { color: #333; text-decoration: none; }
a:hover { color: #12b7f5; }
img { border: none; }
em { font-style: normal; }
h1, h2, h3, h4, h5 { font-weight: normal; }
.clearfloat:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }
.clearfloat { zoom: 1; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
/* top */
.max1600 { max-width: 1600px; min-width: 1007px; margin: 0 auto; }
.topbar { position: absolute; left: 0; top: 0; width: 100%; height: 98px; background: rgba(64, 64, 64, 0.76); z-index: 900; }
.toppic { max-width: 1220px; min-width: 980px; width: 80%; height: 98px; margin: 0 auto;}
.toppic a:link, .toppic a:visited { color: #bfbfbf; }
.topicfixed { position: fixed; left: 0; top: 0; background: #fff; border-bottom: 0px solid #f1f1f1; }
.topicfixed a:link, .topicfixed a:visited { color: #bfbfbf; }
.topside { float: left; width: 73%; }
.logoLink { float: left; display: block; width: 95px; height: 100px; overflow: hidden; margin-top: -5px; padding-top: 0px; font-size: 0; background: transparent url(../../img/logo-f.png) no-repeat left 5px; }
.topNav { float: right; width: 480px; /* padding-left: 18px; */ }
.topNav li { float: left; margin-left: 20px; }
.topNav li a { float: left; padding: 0 20px; line-height: 98px; font-size: 1.125em; }
.topNav li a:hover { background: #12b7f5; }
.topNav li.current a { background: #cc0000; }
.topicfixed { height: 98px; }
.topicfixed .logoLink { background-image: url(../../img/logo-f.png); }
.topicfixed li.current a { background: none; color: #12b7f5; }
.topicfixed .topNav li a:hover { background: none; color: #12b7f5; }
.topTool { float: right; width: auto; font-size: 0.875em; position: relative; top:-73px;}
.topTool .tel { font-size: 14px; color: #8d8d8d; margin-top: 20px; }
.topTool .tel p { font-size: 20px; }
.topTool ul { float: right; height: 40px; padding-top: 6px; }
.topTool li { float: right; margin-left: 30px; position: relative; line-height: 40px; }
.topTool .login { height: 43px; line-height: 43px; }
.topTool .login span { padding: 0 18px; color: #cecece; }
.topTool a:hover { color: #12b7f5; }
.flashData { float: right; line-height: 17px; text-align: right; letter-spacing: 0.04em; }
.flashData a:hover { text-decoration: underline; }
.topicfixed a.barzc { display: inline; }
#loginInfo img { float: left; width: 25px; height: 25px; margin-top: 5px; vertical-align: middle; border-radius: 12px; cursor: pointer; }
.loginPenel { display: none; position: absolute; right: 0; top: 30px; width: 120px; height: 85px; z-index: 100; }
.logindrop { width: 120px; height: 75px; margin-top: 10px; background: #fff; }
.nick { width: 100px; height: 39px; overflow: hidden; margin: 0 auto; white-space: nowrap; line-height: 39px; text-align: center; text-overflow: ellipsis; }
.lgout { width: 100%; border-top: 1px solid #d7d7d7; line-height: 35px; text-align: center; }
.lgout a:link, .lgout a:visited { color: #333; }
/* banner */
#web_bg{
 position:fixed;
 top: 0;
 left: 0;
 width:100%;
 height:100%;
 min-width: 1000px;
 z-index:-10;
 zoom: 1;
 background-color: #fff;
 background-repeat: no-repeat;
 background-size: cover;
 -webkit-background-size: cover;
 -o-background-size: cover;
 background-position: center 0;
}
.pcpage { background: transparent url(../../img/login/homepc.jpg) no-repeat center top;}
.crossbanenr { width: 100%; height: 650px; }
.crossbanenr ul {width: 100%; height: 100%; overflow: hidden;  min-width: 1007px; margin: 0px auto 0px; }
.crossbanenr li { position: absolute; left: 50%; top: 0; width: 1920px; height: 100%; margin: 0 0 0 -960px; display: none; z-index: 1; }
.crossbanenr li:first-child { display: block; }
.crossbanenr li.current { z-index: 2; }
.crossbanenr li.pcqqbg { background: transparent url(../../img/login/homepc.png) no-repeat center top;}
.crossbanenr li.mbqqbg { background: transparent url(../../img/login/pic-2.jpg) no-repeat center top; }
.crossbanenr li.watchbg { background: transparent url(../../img/login/pic-3.jpg) no-repeat center top; }
.bncont { position: relative; width: 948px; height: 100%; margin: 0 auto; }
.bntxt { /* position: absolute; */ /* left: 0%; */ /* top: 0px; */ /* width: 750px; */ /* height: 500px; */ /* margin-top: -195px; */ z-index: 10; }
.bntxt h2 { width: 100%; height: 0; overflow: hidden; /* padding-top: 315px; */ text-indent: -9999px; }
.bntxt a:link, .bntxt a:visited { color: #fff; }
.bntxt a.bnzc { background-position: 0 0; }
.bntxt a.bnzc:hover { background-position: 0 -77px; }
.bntxt a.bnxz { background-position: 0 0; }
.bntxt a.bnxz:hover { background-position: 0 -77px; }
.pcqqbg .bntxt { position: absolute; left: -17%; bottom: -12px; }
.pcqqbg .bntxt h2 { background: transparent url(../../img/login/pic_txt1.png) no-repeat 15px 30px; width: 750px; height: 540px; background-size: 100%; }
.pcqqbg .bntxt h3 { background: transparent url(../../img/login/pic_txt1-1.png) no-repeat 15px 30px; width: 750px; height: 540px; background-size: 100%; position: absolute; z-index: -1; opacity: 0 }
.mbqqbg .bntxt { position: absolute; left: -7%; top: 75px; }
.mbqqbg .bntxt h2 { background: transparent url(../../img/login/pic_txt2.png) no-repeat center 90px; width: 656px; height: 380px; position: absolute; top: 0px; }
.mbqqbg .bntxt h3 { background: transparent url(../../img/login/pic_txt2-1.png) no-repeat center 90px; width: 656px; height: 380px; }
.watchbg .bntxt { position: absolute; left: -5%; top: 182px; }
.watchbg .bntxt h2 { background: transparent url(../../img/login/pic_txt3.png) no-repeat center; width: 422px; height: 160px; }
.circle span { margin: 0 5px; padding: 2px 5px; background: transparent url(../../img/login/index-dot.png) no-repeat top left; width: 18px; height: 18px; display: inline-block; cursor: pointer; }
.circle span.on { background-position: left bottom }
.content { width: 100%; }
.content h1 { width: 100%; height: 0; overflow: hidden; padding-top: 357px; background: #fff url(../../img/login/notice1.png) no-repeat center top; }
.activebg { position: relative; width: 100%; height: 150px; background: #fff; background-attachment: fixed; background-position: center 0; background-repeat: no-repeat; }
.fisrtbg { background-image: url(../../img/login/bg-1.jpg); }
.secondbg { background-image: url(../../img/login/bg-2.jpg); }
.thirdbg { background-image: url(../../img/login/bg-3.jpg); }
.fourbg { background-image: url(../../img/login/bg-4.jpg); }
.fivebg { background-image: url(../../img/login/bg-5.jpg); }
.txtwrap p { font-size: 18px; letter-spacing: 0.12em; }
.qfigure { width: 100%; height: 584px; background: #fff; }
.qw960 { position: relative; width: 1090px; height: 400px; margin: 0 auto; }
.qcall .txtwrap { position: absolute; right: 7px; top: 115px; width: 487px; }
.qcall p { width: 100%; margin-bottom: 12px; line-height: 25px; text-align: right; opacity: 0.6; }
.figs { width: 100%; padding-top: 44px; min-height: 77px; }
.figs li { padding: 58px 0 0; color: #a0a0a0; font-size: 14px; text-align: center; }
.qcall .figs li { float: right; border-left: 1px solid #e9e9e9; }
.qcall .figs li.f01 { width: 80px; text-align: right; }
.qcall .figs li.f02 { width: 109px; }
.qcall .figs li.f03 { width: 156px; border: none; }
.qcallWrap { position: relative; width: 251px; height: 446px; overflow: hidden; left: 57px; top: 72px; }
/*qfile*/
.qfile .figs li { float: left; border-right: 1px solid #e9e9e9; }
.qfile .figs li.f01 { width: 94px; text-align: left; text-indent: 12px; }
.qfile .figs li.f02 { width: 112px; }
.qfile .figs li.f03 { width: 108px; border: none; }
.qfileWrap { position: relative; left: 27px; top: 259px; width: 328px; height: 280px; }
.qfbar { position: absolute; left: 78px; top: 71px; width: 194px; height: 3px; overflow: hidden; background: #e6e6e6; opacity: 0; }
.qfbar .bar { width: 30%; height: 3px; background: #5be10b; }
/*qblog*/
.qblog .txtwrap { position: absolute; right: 7px; top: 120px; width: 495px; }
.qblog p { width: 100%; margin-bottom: 12px; line-height: 25px; text-align: right; opacity: 0.6; }
.qblog .figs li { float: right; border-left: 1px solid #e9e9e9; }
.qblog .figs li.f01 { width: 80px; text-align: right; }
.qblog .figs li.f02 { width: 105px; }
.qblog .figs li.f03 { width: 106px; border: none; }
.qblogWrap { position: relative; left: 0; top: 217px; width: 291px; height: 150px; }
.qblogWrap div { position: absolute; top: 0; width: 150px; height: 150px; }
.morefigs { width: 100%; height: 87px; padding-top: 43px; border-top: 1px solid #e5e5e5 }
a.knmore:link, a.knmore:visited { color: #12b7f5; }
/* flash */
.flashBar { float: right; width: 67px; }
.flashBar a.close { background-position: 14px 14px; }
.flashBar a.sharetozone { background-position: 14px -52px; }
.flashBar a.sharetoweibo { background-position: 14px -120px; }
.flashBar a.close:hover { background-position: -52px 14px; }
.flashBar a.sharetozone:hover { background-position: -52px -52px; }
.flashBar a.sharetoweibo:hover { background-position: -52px -120px; }
.overlay { display: none; position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; background-color: #000; opacity: 0.6; filter: Alpha(opacity=60); }
#flashDiv { position: absolute; left: 50%; top: 47px; width: 978px; height: 721px; margin: 0 0 0 -489px; display: none; z-index: 10000; position: fixed; }
.togame { clear: both; padding-right: 80px; height: 31px; text-align: right; }
/* footer */
.newfoot { width: 100%; height: 100px; padding-top: 10px; background: #333; font-size: 0.75em; }
.newfoot a:link, .newfoot a:visited { color: #979797; }
.newfoot a:hover { color: #cfcfcf; }
.qmaps { width: 990px; height: 205px; margin: 0 auto; }
.plats { /* float: left; */ width: 100%; overflow: hidden; border-bottom: 1px solid #333; }
.plats h3 { height: 50px; color: #666; font-size: 14px; display: none; }
.plats a { float: left; padding-top: 142px; background: transparent url(../../img/login/icon-1.png) no-repeat 0 0; text-align: center; font-size: 14px; box-sizing: content-box; }
.plats a:hover { color: #12b7f5; }
.plats a.plmb { width: 158px; height: 35px; margin: 35px; color: #ccc; background-position: 10px 0; border: 1px solid #666; border-radius: 6px !important; }
.plats a.plmb:hover { background-position: 10px -170px; }
.plats a.plpc { width: 158px; height: 35px; margin: 35px; color: #ccc; background-position: -268px 0; border: 1px solid #666; border-radius: 6px !important; }
.plats a.plpc:hover { background-position: -268px -170px; }
.plats a.plmac { width: 158px; height: 35px; margin: 35px; color: #ccc; background-position: -528px 0; border: 1px solid #666; border-radius: 6px !important; }
.plats a.plmac:hover { background-position: -528px -170px; }
.plats a.plpad { width: 158px; height: 35px; margin: 35px; color: #ccc; background-position: -782px 0; border: 1px solid #666; border-radius: 6px !important; }
.plats a.plpad:hover { background-position: -782px -170px; }
.map { float: left; }
.map h3 { height: 25px; color: #666; font-size: 18px; margin-bottom: 10px; }
.map li { line-height: 22px; }
.qac { width: 185px; }
.qfaq { width: 175px; margin: 30px; }
.qlink { width: 80px; margin: 30px; }
.copyright { clear: both; width: 1190px; margin: 0 auto; padding-top: 10px; /* border-top: 1px solid #666; */ line-height: 17px; text-align: center; color: #666; }
.copyright .pull-left span { margin-right: 10px; }
.copyright .pull-right span { margin-left: 10px; }
.login_div { display: none; position: fixed; left: 50%; top: 50%; width: 622px; height: 368px; margin: -184px 0 0 -311px; z-index: 99999; }
#pg3 .qfileWrap .pic1 { opacity: 1; -webkit-transform-origin: left; -moz-transform-origin: left; -o-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-animation: zoomIn 0.2s ease 0.1s; -moz-animation: zoomIn 0.2s ease 0.1s; -o-animation: zoomIn 0.2s ease 0.1s; animation: zoomIn 0.2s ease 0.1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg3 .qfileWrap .qfbar { -webkit-animation: fadeIn 0.4s ease 0.3s; -moz-animation: fadeIn 0.4s ease 0.3s; -o-animation: fadeIn 0.4s ease 0.3s; animation: fadeIn 0.4s ease 0.3s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; }
#pg3 .qfileWrap .bar { -webkit-animation: widthall 1s ease 0.4s; -moz-animation: widthall 1s ease 0.4s; -o-animation: widthall 1s ease 0.4s; animation: widthall 1s ease 0.4s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; }
#pg3 .qfileWrap .pic2 { opacity: 1; -webkit-transform-origin: right; -moz-transform-origin: right; -o-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-animation: zoomIn 0.2s ease 1.5s; -moz-animation: zoomIn 0.2s ease 1.5s; -o-animation: zoomIn 0.2s ease 1.5s; animation: zoomIn 0.2s ease 1.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg2 .qblogWrap .pic1 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg2 .qblogWrap .pic2 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg2 .qblogWrap .pic3 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg4 .qblogWrap .pic1 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg4 .qblogWrap .pic2 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg4 .qblogWrap .pic3 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
@keyframes fadeUp {
 0% {
  opacity: 0;
  transform:translateY(-20px);
 }
 100% {
  opacity: 1;
  transform:translateY(0px);
 }
}
@-moz-keyframes fadeUp {
 0% {
  opacity: 0;
  transform:translateY(-20px);
 }
 100% {
  opacity: 1;
  transform:translateY(0px);
 }
}
@-webkit-keyframes fadeUp {
 0% {
  opacity: 0;
  -webkit-transform:translateY(-20px);
 }
 100% {
  opacity: 1;
  -webkit-transform:translateY(0px);
 }
}
@-o-keyframes fadeUp {
 0% {
  opacity: 0;
  -o-transform:translateY(-20px);
 }
 100% {
  opacity: 1;
  -o-transform:translateY(0px);
 }
}
@-ms-keyframes fadeUp {
 0% {
  opacity: 0;
  -ms-transform:translateY(-20px);
 }
 100% {
  opacity: 1;
  -ms-transform:translateY(0px);
 }
}
@keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@-moz-keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@-webkit-keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@-o-keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@-ms-keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@keyframes widthall {
 0% {
  width: 30%;
 }
 100% {
  width: 100%;
 }
}
@-moz-keyframes widthall {
 0% {
  width: 30%;
 }
 100% {
  width: 100%;
 }
}
@-webkit-keyframes widthall {
 0% {
  width: 30%;
 }
 100% {
  width: 100%;
 }
}
@-o-keyframes widthall {
 0% {
  width: 30%;
 }
 100% {
  width: 100%;
 }
}
@-ms-keyframes widthall {
 0% {
  width: 30%;
 }
 100% {
  width: 100%;
 }
}
@keyframes zoomIn {
 0% {
  transform: scale(0);
 }
 60% {
  transform: scale(1.1);
 }
 100% {
  transform: scale(1);
 }
}
@-moz-keyframes zoomIn {
 0% {
  transform: scale(0);
 }
 60% {
  transform: scale(1.1);
 }
 100% {
  transform: scale(1);
 }
}
@-webkit-keyframes zoomIn {
 0% {
  -webkit-transform: scale(0);
 }
 60% {
  -webkit-transform: scale(1.1);
 }
 100% {
  -webkit-transform: scale(1);
 }
}
@-o-keyframes zoomIn {
 0% {
  -o-transform: scale(0);
 }
 90% {
  -o-transform: scale(1.1);
 }
 100% {
  -o-transform: scale(1);
 }
}
@-ms-keyframes zoomIn {
 0% {
  -ms-transform: scale(0);
 }
 60% {
  -ms-transform: scale(1.1);
 }
 100% {
  -ms-transform: scale(1);
 }
}
@keyframes moveleft {
 0% {
  transform:translateX(100%);
  opacity: 0;
 }
 100% {
  transform:translateX(0);
  opacity: 1;
 }
}
@-moz-keyframes moveleft {
 0% {
  transform:translateX(100%);
  opacity: 0;
 }
 100% {
  transform:translateX(0);
  opacity: 1;
 }
}
@-webkit-keyframes moveleft {
 0% {
  -webkit-transform:translateX(100%);
  opacity: 0;
 }
 100% {
  -webkit-transform:translateX(0);
  opacity: 1;
 }
}
@-o-keyframes moveleft {
 0% {
  -o-transform:translateX(100%);
  opacity: 0;
 }
 100% {
  -o-transform:translateX(0);
  opacity: 1;
 }
}
@-ms-keyframes moveleft {
 0% {
  -ms-transform:translateX(100%);
  opacity: 0;
 }
 100% {
  -ms-transform:translateX(0);
  opacity: 1;
 }
}
@keyframes moveright {
 0% {
  transform:translateX(-100%);
  opacity: 0;
 }
 100% {
  transform:translateX(0);
  opacity: 1;
 }
}
@-moz-keyframes moveright {
 0% {
  transform:translateX(-100%);
  opacity: 0;
 }
 100% {
  transform:translateX(0);
  opacity: 1;
 }
}
@-webkit-keyframes moveright {
 0% {
  -webkit-transform:translateX(-100%);
  opacity: 0;
 }
 100% {
  -webkit-transform:translateX(0);
  opacity: 1;
 }
}
@-o-keyframes moveright {
 0% {
  -o-transform:translateX(-100%);
  opacity: 0;
 }
 100% {
  -o-transform:translateX(0);
  opacity: 1;
 }
}
@-ms-keyframes moveright {
 0% {
  -ms-transform:translateX(-100%);
  opacity: 0;
 }
 100% {
  -ms-transform:translateX(0);
  opacity: 1;
 }
}
@keyframes movedown {
 0% {
  transform:translateY(-100%);
  opacity: 0;
 }
 100% {
  transform:translateY(0);
  opacity: 1;
 }
}
@-moz-keyframes movedown {
 0% {
  transform:translateY(-100%);
  opacity: 0;
 }
 100% {
  transform:translateY(0);
  opacity: 1;
 }
}
@-webkit-keyframes movedown {
 0% {
  -webkit-transform:translateY(-100%);
  opacity: 0;
 }
 100% {
  -webkit-transform:translateY(0);
  opacity: 1;
 }
}
@-o-keyframes movedown {
 0% {
  -o-transform:translateY(-100%);
  opacity: 0;
 }
 100% {
  -o-transform:translateY(0);
  opacity: 1;
 }
}
@-ms-keyframes movedown {
 0% {
  -ms-transform:translateY(-100%);
  opacity: 0;
 }
 100% {
  -ms-transform:translateY(0);
  opacity: 1;
 }
}
@keyframes moveup {
 0% {
  transform:translateY(70%);
  opacity: 0;
 }
 100% {
  transform:translateY(0);
  opacity: 1;
 }
}
@-moz-keyframes moveup {
 0% {
  transform:translateY(70%);
  opacity: 0;
 }
 100% {
  transform:translateY(0);
  opacity: 1;
 }
}
@-webkit-keyframes moveup {
 0% {
  -webkit-transform:translateY(70%);
  opacity: 0;
 }
 100% {
  -webkit-transform:translateY(0);
  opacity: 1;
 }
}
@-o-keyframes moveup {
 0% {
  -o-transform:translateY(70%);
  opacity: 0;
 }
 100% {
  -o-transform:translateY(0);
  opacity: 1;
 }
}
@-ms-keyframes moveup {
 0% {
  -ms-transform:translateY(70%);
  opacity: 0;
 }
 100% {
  -ms-transform:translateY(0);
  opacity: 1;
 }
}
@keyframes click {
 0% {
  transform:translateY(0px) translateX(0px);
 }
 80% {
  transform:translateY(80px) translateX(-10px) scale(1);
  opacity: 1;
 }
 90% {
  transform:translateY(80px) translateX(-10px) scale(1);
  opacity: 1;
 }
 100% {
  transform:translateY(80px) translateX(-10px) scale(1.5);
  opacity: 0;
 }
}
@-moz-keyframes click {
 0% {
  transform:translateY(0px) translateX(0px);
 }
 80% {
  transform:translateY(80px) translateX(-10px) scale(1);
  opacity: 1;
 }
 90% {
  transform:translateY(80px) translateX(-10px) scale(1);
  opacity: 1;
 }
 100% {
  transform:translateY(80px) translateX(-10px) scale(1.5);
  opacity: 0;
 }
}
@-webkit-keyframes click {
 0% {
  -webkit-transform:translateY(0px) translateX(0px);
 }
 80% {
  -webkit-transform:translateY(80px) translateX(-10px) scale(1);
  opacity: 1;
 }
 90% {
  -webkit-transform:translateY(80px) translateX(-10px) scale(1);
  opacity: 1;
 }
 100% {
  -webkit-transform:translateY(80px) translateX(-10px) scale(1.5);
  opacity: 0;
 }
}
@-o-keyframes click {
 0% {
  -o-transform:translateY(0px) translateX(0px);
 }
 80% {
  -o-transform:translateY(-240px) translateX(-107px) scale(1);
  opacity: 1;
 }
 90% {
  -o-transform:translateY(-240px) translateX(-107px) scale(1);
  opacity: 1;
 }
 100% {
  -o-transform:translateY(-240px) translateX(-107px) scale(1.5);
  opacity: 0;
 }
}
@-ms-keyframes click {
 0% {
  -ms-transform:translateY(0px) translateX(0px);
 }
 80% {
  -ms-transform:translateY(-240px) translateX(-107px) scale(1);
  opacity: 1;
 }
 90% {
  -ms-transform:translateY(-240px) translateX(-107px) scale(1);
  opacity: 1;
 }
 100% {
  -ms-transform:translateY(-240px) translateX(-107px) scale(1.5);
  opacity: 0;
 }
}

@media screen and (min-width:1921px) {
 .crossbanenr li { width: 100%; left: 50%; margin-left: -50%; }
 .crossbanenr li.pcqqbg, .crossbanenr li.mbqqbg, .crossbanenr li.padqqbg, .fisrtbg, .secondbg, .thirdbg, .fourbg, .fivebg { background-size: 100%; }
}

@media screen and (max-width:1440px) {
 .crossbanenr li.pcqqbg { background: transparent url(../../img/login/pic-1.jpg) no-repeat center top; }
 .crossbanenr li.mbqqbg { background: transparent url(../../img/login/pic-2.jpg) no-repeat center top; }
 .crossbanenr li.watchbg { background: transparent url(../../img/login/pic-3.jpg) no-repeat center top; }
 .fisrtbg { background-image: url(../../img/login/bg-1.jpg); }
 .secondbg { background-image: url(../../img/login/bg-2.jpg); }
 .thirdbg { background-image: url(../../img/login/bg-3.jpg); }
 .fourbg { background-image: url(../../img/login/bg-4.jpg); }
 .fivebg { background-image: url(../../img/login/bg-5.jpg); }
 .crossbanenr li.pcqqbg, .crossbanenr li.mbqqbg, .crossbanenr li.padqqbg, .crossbanenr li.watchbg, .fisrtbg, .secondbg, .thirdbg, .fourbg, .fivebg { background-size: cover; }
}

@media screen and (max-width:1200px) and (min-height:1400px) {
 .crossbanenr li.pcqqbg, .crossbanenr li.mbqqbg, .crossbanenr li.padqqbg, .crossbanenr li.watchbg, .fisrtbg, .secondbg, .thirdbg, .fourbg, .fivebg { background-size: cover; }
}

@media screen and (min-width:1200px) and (min-height:900px) {
 .crossbanenr li.pcqqbg, .crossbanenr li.mbqqbg, .crossbanenr li.padqqbg, .crossbanenr li.watchbg, .fisrtbg, .secondbg, .thirdbg, .fourbg, .fivebg { background-size: cover; }
}
/*登录*/
.web-login { background: url(../../img/login/logon-ys-1.png) no-repeat; width: 500px; height: 478px; position: absolute; top: 150px; left: 0;right: 0;margin:0 auto;z-index: 1; }
.web-login dl { margin: 75px 46px 0px 40px; }
.web-login dl dd { margin: 28px 0px; }
.web-login dl dd input:focus { border: none; outline: none; }
.web-login dl dd input[type=text] { border: none; background-color: transparent; margin-left: 135px; width: 165px; height: 30px;margin-top: 124px;  }
.web-login dl dd input[type=password] { border: none; background-color: transparent; margin-left: 135px; width: 165px; height: 30px; transform: translateY(-50%);}
.web-login dl dd .login-input { position: relative }
.web-login dl dd .login-input b { background: url(../../img/login/has-error.png) no-repeat; width: 28px; height: 28px; display: block; position: absolute; right: 80px; top: 130px; display: none; }
.web-login dl dd .login-input.has-error input { color: #da0f0a;/* font-weight: bold; */ }
.web-login dl dd .login-input.has-error b { display: block; }
.web-login dl dd a.link { font-size: 14px; /* margin-top: 10px; */ display: block; text-align: right; color: #664132; }
.web-login dl dd a.link:hover { color: #fd8730 }
.web-login dl dd a.login_btn {width: 145px; line-height: 46px; height: 42px; display: block; background-color: #4A5261; text-align: center; color: #fff; border-radius: 100px !important; font-size: 18px; top: -23px;margin-left: 136px; }
.web-login dl dd a.login_btn:hover { background-color: #cc0000 }
.web-login dl dd a.logon_btn { line-height: 62px; height: 58px; display: block; background-color: #bc491c; /* box-shadow: 0 3px #a5780a; */ text-align: center; color: #fff; border-radius: 6px !important; font-size: 18px; position: relative; top: -6px; }
.web-login dl dd a.logon_btn b { background: url("../../img/login/tryme.png"); width: 91px; height: 61px; display: block; position: absolute; right: -8px; top: -8px; }
.web-login dl dd a.logon_btn:hover { color: #fff; background-color: #e23f42; }
.web-login .txt { position: absolute; bottom: 40px; left: 155px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px; color: #fff; }
.qblog5 { height: 300px; overflow: hidden; }
.qblog5 .input { background: url(../../img/login/notice6.png) no-repeat; width: 650px; height: 220px; background-size: 100%; margin: 0 auto; display: block; position: relative; top: 34px; opacity: 1 }
.qblog4 { height: 400px; }
.qblog4 .yun { background: url(../../img/login/notice5_1.png) no-repeat; width: 630px; height: 300px; background-size: 100%; position: absolute; left: 50%; top: 10%; opacity: 0 }
.qblog4 h2 { text-indent: -99999px; background: url(../../img/login/notice5_2.png) no-repeat; position: absolute; top: 30%; left: 0; width: 448px; height: 57px; }
.qblog4 p { text-indent: -99999px; background: url(../../img/login/notice5_3.png) no-repeat; |;
 width: 368px; height: 58px; position: absolute; top: 45%; left: 0; opacity: 0 }
.qblog3 { height: 400px; }
.qblog3 .biao { background: url(../../img/login/notice4_1.png) no-repeat; width: 435px; height: 360px; position: absolute; left: 0%; top: 0%; background-size: 100%; opacity: 0 }
.qblog3 h2 { text-indent: -99999px; background: url(../../img/login/notice4_2.png) no-repeat; position: absolute; top: 30%; right: -5%; width: 504px; height: 58px; }
.qblog3 p { text-indent: -99999px; background: url(../../img/login/notice4_3.png) no-repeat; |;
 width: 619px; height: 74px; position: absolute; top: 45%; right: -5%; opacity: 0 }
.qblog2 { height: 400px; }
.qblog2 .pic { background: url(../../img/login/notice3_1.png) no-repeat; width: 695px; height: 595px; position: absolute; right: -20%; top: -25%; opacity: 0 }
.qblog2 h2 { text-indent: -99999px; background: url(../../img/login/notice3_2.png) no-repeat; position: absolute; top: 30%; left: 0; width: 556px; height: 68px; }
.qblog2 p { text-indent: -99999px; background: url(../../img/login/notice3_3.png) no-repeat; |;
 width: 522px; height: 59px; position: absolute; top: 45%; left: 0; opacity: 0 }
.qblog1 { height: 400px; }
.qblog1 .pic { background: url(../../img/login/notice2_1.png) no-repeat; width: 810px; height: 534px; position: absolute; left: -10%; top: -20%; opacity: 0 }
.qblog1 h2 { text-indent: -99999px; background: url(../../img/login/notice2_2.png) no-repeat; position: absolute; top: 30%; right: -5%; width: 658px; height: 74px; }
.qblog1 p { text-indent: -99999px; background: url(../../img/login/notice2_3.png) no-repeat; |;
 width: 561px; height: 29px; position: absolute; top: 45%; right: -5%; opacity: 0 }
#pg1 .qblog1 .pic { opacity: 1; -webkit-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg1 .qblog1 p { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg2 .qblog2 .pic { opacity: 1; -webkit-animation: movedown 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: movedown 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: movedown 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: movedown 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg2 .qblog2 p { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg3 .qblog3 .biao { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg3 .qblog3 p { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg4 .qblog4 .yun { opacity: 1; -webkit-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -moz-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -o-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg4 .qblog4 p { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
#pg5 .input { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
.pcqqbg .bntxt h2 { opacity: 1; -webkit-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
.pcqqbg .bntxt h2 { opacity: 1; -webkit-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: moveup 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
.pcqqbg .bntxt h3 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
.mbqqbg .bntxt h2 { opacity: 1; -webkit-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
.mbqqbg .bntxt h3 { opacity: 1; -webkit-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 1s; -moz-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 1s; -o-animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 1s; animation: moveleft 0.2s cubic-bezier(0, .25, .08, 1) 1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
.watchbg .bntxt h2 { opacity: 1; -webkit-animation: moveright 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: moveright 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: moveright 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: moveright 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }
/*添加到桌面*/
.topicon { float: left; height: 78px; width: 19%; text-indent: 30px; line-height: 95px; position: relative;  left: -50px; }
.topicon b { width: 40px; height: 36px; display: block; background: url(../../img/login/computer.png) no-repeat -10px 0px; position: absolute; top: 38px; }
.topicon a:link { color: #bfbfbf; font-size: 12px; margin-left: 10px; }
.topicon a:hover { color: #ff521a; }
/*资管家浏览器*/
.zd-down { background: url(../../img/login/down-background.jpg) no-repeat center center; background-size: cover }
.zd-main { height: 550px; position: relative;width: 100%;top: 100px;}
.zd-main .zd-content { width: 1020px; margin: 0 auto; position: relative; }
.zd-line { background: url(../../img/login/down-line.png) no-repeat center center; width: 100%; height: 204px; position: absolute; top: 285px; }
.zd-computer { background: url(../../img/login/down-computer.png) no-repeat; width: 894px; height: 500px; position: absolute; top: 115px;left: 50%;margin-left: -70%;}
.zd-computer .zd-dot { background: url(../../img/login/down-huojian.png) no-repeat; width: 146px; height: 146px; position: absolute; top: -40px; left: 410px; }
.zd-notice { width: 530px; height: 490px; position: absolute; top: 0px; right: 0px; }
.zd-notice .zd-tile { width: 530px; height: 125px; background: url(../../img/login/down-title.png) no-repeat;margin-top: 20px;}
.zd-notice .zd-input {overflow: hidden;float: right;margin-top: 35px;}
.zd-notice .zd-input ul { }
.zd-notice .zd-input ul li { float: left;margin-left: 15px;}
.zd-notice .zd-input ul li a { display: block; }
.zd-notice .zd-input ul li a:hover { opacity: 0.8 }
.zd-input1 { background: url(../../img/login/down-input1.png) no-repeat; width: 247px; height: 64px; }
.zd-input2 { background: url(../../img/login/down-input2.png) no-repeat; width: 247px; height: 64px; }
.zd-notice .zd-txt {position: absolute;right: 0px;bottom: 0px;width: 510px;height: 200px;padding-top: 14px;letter-spacing: 0.8px;}
.zd-notice .zd-txt>p {font-size: 12px;color: #d6c38a;}
.zd-notice .zd-txt>p:first-child {color: #fff;}
.zd-notice .zd-txt ul {margin: 15px 0px 5px;}
.zd-notice .zd-txt ul li {overflow: hidden;padding-bottom: 14px;padding-left: 30px;background: url(../../img/login/down-dot.png) no-repeat 0 5px;}
.zd-notice .zd-txt ul li>div {font-size: 12px;color: #fff;}
.zd-notice .zd-txt ul li>div:first-child {width: 105px;font-size: 16px;float: left;margin-right: 15px;}
.zd-footer { height: 80px; background-color: #322f2f; text-align: center; line-height: 70px; position: absolute; bottom: 0px; width: 100% }
.zd-footer p { font-size: 14px; color: #fff; }
.error-txt{position:absolute;bottom: 368px;left: 115px;background: #fef2f2;border: 1px solid #ffb4a8;width: 278px;line-height: 22px;padding: 5px 10px;font-size: 12px;border-radius: 6px !important;color: #f89382;}

input[type="checkbox"]:checked+label:after{
 content: '\2714';
 color: #FFF;
}
input[type="checkbox"]{
 display: none;
}
label:after{
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 15px;
 height: 15px;
 border: 1px solid #CCC;
 box-sizing: border-box;
 line-height: 15px;
 text-align: center;
 border-radius: 3px;
 font-size: 14px;

}
label{
 position: relative;
 padding-left: 25px;
 box-sizing: border-box;
 line-height: 20px;
 font-size: 14px;
 height: 20px;
}
input[type="checkbox"]:checked ~ img{
 transform: translateX(500px);
}

.thefont{color:#FFFFFF;font-size: 13px;}

.logotxt { position: absolute; bottom: 40px; left: 178px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px; color: #fff; }

/*去除浏览器自动填充颜色并将input背景设置为透明*/
/*去除背景色并将字体设置为白色*/
input:-webkit-autofill {transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color: #FFFFFF;}
/*背景设置为透明*/
input{background-color:rgba(255,255,255,0.6);}

@media screen and (max-width: 1024px){
 .zd-main{top:10px;}
}
@media screen and (max-width: 1280px){
 .zd-main{top:15px;}
}
@media screen and (max-width: 1366px){
 .zd-main{top:25px;}
}