html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, textarea { outline: none; margin: 0; padding: 0; border: 0; font-size: 100%; letter-spacing: 0.2px; font-style: inherit; vertical-align: baseline; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft yahei", arial, "PingFangSC-Regular", sans-serif; }
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust: none; }
html { overflow-y: auto; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft yahei", arial, "PingFangSC-Regular", sans-serif; font-size: 14px; color: #000000; min-width: 1200px; -webkit-font-smoothing: antialiased; }
a { color: #000; text-decoration: none; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
.clear { clear: both; }
.fl { float: left; }
.fr { float: right; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { height: 1%; }
.hr-line-dashed { border-top: 1px dashed #e5e5e5; color: #ffffff; background-color: #ffffff; height: 1px; margin: 15px 0; }
.w1100 { min-width: 1100px; width: 1100px; margin: 0 auto; position: relative; }
#menu { position: fixed; left: 20px; top: 50%; width: 60px; margin: -80px 0 0; padding: 0; list-style-type: none; z-index: 70; }
#menu li { margin-top: 10px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .02), 0 4px 8px 0 rgba(0, 0, 0, .02); }
#menu a { display: block; padding: 10px 0; background-color: #fff; color: #0074EA; text-align: center; text-decoration: none; }
#menu .active a { color: #fff; background-color: rgb(0, 116, 234); }
.section { display: table; table-layout: fixed; width: 100%; position: relative; }
.copyright { position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; font-size: 13px; color: #fff; z-index: 10; color: #fff !important; }

/*page1*/
.con1 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #666; }
.con1 { background-image: url(../../img/login/con1bg.jpg); background-size: 100% 100%; }
.con1 .loginscreen { padding: 20px 50px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03); border-radius: 3px; width: 400px; text-align: center; float: right; margin-right: 100px; margin-top: 100px; opacity: 0; transition: all 0.8s; }
.con1.active .loginscreen { margin-top: 0; opacity: 1; transition-delay: 0.8s; }
.con1 .login-logo { padding: 10px 0; }
.con1 .login-logo img { width: 180px; margin: 0 auto; display: block; }
.con1 .mb { margin-bottom: 15px; position: relative; }
.con1 .input { border: 1px solid #e5e6e7; border-radius: 2px; display: block; padding: 0 12px; -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; font-size: 14px; line-height: 32px; height: 34px; }
.con1 .input:focus { border-color: #39aef5 !important; }
.con1 .button { background-color: #1c84c6; border: none; width: 100%; color: #FFFFFF; border-radius: 3px; line-height: 34px; cursor: pointer; }
.con1 .button:hover { background-color: #1a7bb9; }
.con1 .text-muted { margin-bottom: 10px; font-size: 13px; }
.con1 .text-muted a { color: #337ab7; }
.con1 .text-muted a:hover { color: #23527c; }
.con1 .send-c, .logincon .send-c-dis { position: absolute; background-color: #f8ac59; border-color: #f8ac59; color: #FFFFFF; padding: 6px 12px; font-size: 14px; border-radius: 3px; right: 1px; top: 1px; cursor: pointer; }
.con1 .send-c-dis { background-color: #c2c2c2; border-color: #c2c2c2; }
.con1 .cha { font-size: 13px; vertical-align: top; line-height: 21px; color: #0074EA; }
.con1 .cha:hover { text-decoration: underline; }

/*page2*/
.con2 { background-image: url(../../img/login/con2bg.jpg); background-size: 100% 100%; }
.con2 .tabs { margin: 0 50px; padding-top: 113px; }
.con2 .tab-tit { text-align: center; position: absolute; width: 100%; left: -100%; top: 0; opacity: 0; transition: all 1s; }
.con2.active .tab-tit { left: 0; opacity: 1; transition-delay: 0.2s; }
.con2 .tab-tit li { padding-top: 75px; display: inline-block; margin: 0 25px; color: #999; cursor: pointer; min-width: 70px; height: 35px; border-bottom: 3px solid transparent; background-repeat: no-repeat; background-position: center 20px; transition: all 0.5s; }
.con2 .tab-tit li.active { border-bottom-color: #333; color: #333; }
.con2 .tab-tit .i1 { background-image: url(../../img/login/i1.png); }
.con2 .tab-tit .i2 { background-image: url(../../img/login/i2.png); }
.con2 .tab-tit .i3 { background-image: url(../../img/login/i3.png); }
.con2 .tab-tit .i4 { background-image: url(../../img/login/i4.png); }
.con2 .tab-tit .i5 { background-image: url(../../img/login/i5.png); }
.con2 .tab-tit .i6 { background-image: url(../../img/login/i6.png); }
.con2 .tab-tit .i1.active { background-image: url(../../img/login/i1-a.png); }
.con2 .tab-tit .i2.active { background-image: url(../../img/login/i2-a.png); }
.con2 .tab-tit .i3.active { background-image: url(../../img/login/i3-a.png); }
.con2 .tab-tit .i4.active { background-image: url(../../img/login/i4-a.png); }
.con2 .tab-tit .i5.active { background-image: url(../../img/login/i5-a.png); }
.con2 .tab-tit .i6.active { background-image: url(../../img/login/i6-a.png); }
.con2 .tab-bd { border: 1px solid #bbb; margin-top: 20px; opacity: 0; transition: all 2s; }
.con2.active .tab-bd { opacity: 1; transition-delay: 1s; }
.con2 .tab-bd .tab { display: none; }
.con2 .tab-bd .tab.selected { display: block; }
.con2 .conb { height: 425px; background-color: #fafafa; }
.con2 .conb .left { width: 533px; height: 345px; float: left; padding: 40px; }
.con2 .conb .left img { width: 100%; height: 100%; }
.con2 .conb .right { float: left; width: 305px; height: 345px; padding: 40px 40px 0; }
.con2 .conb .right .t1 { font-size: 22px; font-weight: bold; margin: 10px 0 20px; }
.con2 .conb .right .t2 { font-size: 15px; color: #666; overflow: hidden; height: 245px; visibility: visible; }

/*page3*/
.con3 { background-image: url(../../img/login/con3bg.jpg); background-size: 100% 100%; }
.con3 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.con3 .li { width: 20%; float: left; margin: 0 2.5%; text-align: center; background-color: #ffee95; border-radius: 8px; padding: 0 15px; height: 200px; position: relative; box-shadow: 0 3px 3px rgba(12, 12, 12, 0.1); }
.con3 .li .hh { position: absolute; background-color: #ffa32b; height: 80px; width: 100%; border-radius: 48%; top: -40px; left: 0; z-index: 10; overflow: hidden; padding-top: 20px; }
.con3 .li .hh .bw { background-color: #fff; height: 60px; margin: 0 10px; color: #f7784e; font-size: 18px; line-height: 60px; font-weight: bolder; position: relative; }
.con3 .li .hh .bw:before, .con3 .li .hh .bw:after { content: ''; height: 2px; background-color: #f7784e; position: absolute; z-index: 11; top: 28px; width: 25px; }
.con3 .li .hh .bw:before { left: 20px; }
.con3 .li .hh .bw:after { right: 20px; }
.con3 .li .bb { opacity: 0; transition: all 1s; padding-top: 80px; border-radius: 3px; height: 190px; overflow: hidden; }
.con3.active .li .bb { opacity: 1; transition-delay: 1.2s; padding-top: 45px; }
.con3 .li .bb .mg { float: left; width: 50%; margin: 2px 0; }
.con3 .li .bb .mg a { color: #ff9409; font-size: 14px; text-decoration: underline; }
.con3 .row1 { position: absolute; top: 40px; width: 100%; left: -100%; height: 200px; opacity: 0; transition: all 0.8s; }
.con3 .row2 { position: absolute; bottom: 0; width: 100%; right: -100%; height: 200px; opacity: 0; transition: all 0.8s; }
.con3.active .row1 { opacity: 1; transition-delay: 0.5s; left: 0; }
.con3.active .row2 { opacity: 1; transition-delay: 0.5s; right: 0; }