body { margin: 0; font: 12px/1.8 Tahoma, Geneva, '\5B8B\4F53'; color: #333; background: white; } input, textarea, select { margin: 0; padding: 0; font-size: 12px; outline: none; resize: none; } html:root body, html:root input, html:root button, html:root textarea, html:root select { font-family: Tahoma, Geneva, '\5fae\8f6f\96c5\9ed1', '\5B8B\4F53'; } form, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, p { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #224892; outline: none; } a:hover { text-decoration: underline; } a img { border: none; } i, em { font-style: normal; } b { color: #F63; } button { cursor: pointer; } button i { display: none; } .text, textarea { font-size: 14px; font-weight: bold; color: #333; border: 1px solid; border-color: #CECECF; border-radius: 0; background: white; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); -webkit-appearance: none; } .text:focus, textarea:focus { outline: none; border-color: #92AFED; box-shadow: 0 0 5px #92AFEC, inset 1px 1px 2px rgba(0, 0, 0, 0.1); } .text { width: 170px; height: 24px; padding: 7px 9px; line-height: 24px; } input.err, input.err:focus { color: #900; border-color: #E06341; background: #FFEFEC; box-shadow: 0 0 5px #E06341; } textarea { width: 270px; height: 100px; padding: 5px 9px; line-height: 1.7; font-size: 14px; overflow: auto; resize: none; } .button { display: inline-block; height: 40px; padding: 0 15px; line-height: 40px; text-align: center; font-size: 18px; font-family: 'Heiti SC', '\5fae\8f6f\96c5\9ed1', '\9ed1\4f53'; color: white; border: 0 none; background-color: #167efb; background-repeat: repeat-x; background-position: 0 0; cursor: pointer; } .button:hover { text-decoration: none; background-color: #1672e3; } .button:active { background-color: #3482e1; } .button .icon { position: relative; top: 11px; vertical-align: top; font-weight: normal; } .button span { position: relative; top: 11px; display: inline-block; height: 16px; line-height: 16px; vertical-align: top; padding-left: 8px; } .button em { display: none; } .btn-gray { color: #666; background-color: #eee; } .btn-gray:hover { background-color: #ddd; } .btn-gray:active { background-color: #e7e7e7; } .btn-green { height: 50px; line-height: 50px; background-color: #9ed04d; } .btn-green:hover { background-color: #76bf48; } .btn-green:active { background-color: #51b73d; } .btn-disabled, .btn-disabled:hover, .btn-disabled:active { background-color: #e7e7e7; color: #A1A1A1; cursor: not-allowed; } button.button { height: 40px; padding: 0 10px; line-height: normal; } .top-login .bottom .qcode-switch s, .quick-login dt { background-image: url(../images/icon_login_top.gif?v=201406241538); background-repeat: no-repeat; } .icon-form { position: absolute; z-index: 3; width: 18px; height: 18px; line-height: 10; overflow: hidden; background-image: url(../images/icon_form.gif?v=201406241538); background-repeat: no-repeat; cursor: pointer; } .ifm-war { z-index: 4; background-position: 0 0; } .ifm-view { background-position: 0 -18px; } .ifm-secure { background-position: 0 -36px; } .login-popup-hint, .login-popup-hint i { background-image: url(../images/popup_hint.png?v=201406241538); background-repeat: no-repeat; _background-image: url(../images/popup_hint.gif?v=201406241538); } .login-popup-hint { position: absolute; top: -35px; right: 0; z-index: 4; height: 35px; padding-right: 10px; line-height: 30px; white-space: nowrap; font-size: 12px; color: #FFF; background-position: right 0; } .login-popup-hint i { position: absolute; top: 0; left: -10px; width: 10px; height: 30px; overflow: hidden; background-position: 0 0; } .header { position: relative; z-index: 3; min-width: 980px; height: 80px; } .header .con { position: relative; width: 980px; height: 80px; margin: auto; } h1.logo { position: absolute; left: 0; width: 183px; height: 42px; line-height: 20; overflow: hidden; font-size: 12px; background: url(../images/logo.png?v=201406241538) no-repeat 0 0; } .top-login { position: absolute; top: 13px; right: 0; zoom: 1; } .top-login .cell { position: relative; z-index: 1; float: left; width: 162px; height: 32px; } .top-login .cell label { position: absolute; top: 0; left: 0; z-index: 1; padding: 0 10px; line-height: 32px; font-size: 12px; color: #999; cursor: text; } .top-login .cell .text { float: left; width: 132px; height: 16px; padding: 7px 9px; line-height: 16px; font-size: 14px; font-weight: bold; } .top-login button.button { float: left; width: 76px; height: 32px; padding: 0; font-size: 16px; *line-height: 28px; _line-height: 30px; background-position: 0 -8px; } .top-login button.button:hover { background-position: 0 -48px; } .top-login button.button:active { background-position: 0 -88px; } .top-login button.btn-gray { background-position: 0 -128px; } .top-login button.btn-gray:hover { background-position: 0 -168px; } .top-login button.btn-gray:active { background-position: 0 -208px; } .top-login .bottom { position: absolute; top: 40px; left: 0; width: 400px; height: 16px; line-height: 16px; font-size: 12px; color: #6b7284; } .top-login .bottom a { color: #6b7284; } .top-login .bottom .qcode-switch { float: left; height: 16px; margin-right: 81px; } .top-login .bottom .qcode-switch s { float: left; width: 16px; height: 16px; margin-right: 5px; overflow: hidden; background-position: 0 0; } .top-login .bottom .qcode-switch:hover { text-decoration: none; } .top-login .bottom input { position: relative; top: 1px; float: left; width: 14px; height: 14px; margin-right: 4px; } .top-login .bottom label { position: relative; top: 1px; float: left; height: 14px; line-height: 14px; margin-right: 10px; padding-right: 10px; border-right: 1px solid #6b7284; } .top-login .icon-form { top: 7px; right: 15px; } .top-login .login-popup-hint, .top-login .login-popup-hint i { background-image: url(../images/popup_hint_bottom.png?v=201406241538); _background-image: url(../images/popup_hint_bottom.gif?v=201406241538); } .top-login .login-popup-hint { top: 26px; right: 4px; height: 30px; padding-top: 5px; } .top-login .login-popup-hint i { top: 5px; background-position: 0 -5px; } .quick-login { position: absolute; right: 0; top: 40px; } .quick-login dt { position: absolute; top: 0; right: 1px; width: 74px; height: 16px; line-height: 10; overflow: hidden; background-position: -18px 0; cursor: pointer; } .quick-login dd { position: absolute; top: -8px; right: -4px; width: 260px; border: 1px solid #4B628B; border-radius: 3px; background: #F9FAFF; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 4; } .quick-login dd s { position: absolute; top: 6px; right: 5px; width: 0; height: 0; overflow: hidden; border: 6px solid; border-color: transparent transparent #1C3E7B; _border-color: pink pink #1C3E7B; _filter: chroma(color = pink); } .quick-login h3 { height: 30px; padding: 0 10px; line-height: 30px; font-size: 12px; font-weight: normal; color: #666; cursor: pointer; } .quick-login ul { padding: 2px 0 0 10px; overflow: hidden; zoom: 1; } .quick-login li { float: left; width: 115px; padding: 0 10px 10px 0; } .quick-login li a { position: relative; display: block; height: 28px; padding-left: 30px; line-height: 28px; color: #666; border: 1px solid #AFB7C8; border-radius: 3px; background: white; cursor: pointer; } .quick-login li a:hover { text-decoration: none; border-color: #909DB7; background: #F7F9FF; background: -webkit-linear-gradient(top, #F7F9FF, #E5E9F8); background: -moz-linear-gradient(top, #F7F9FF, #E5E9F8); background: -ms-linear-gradient(top, #F7F9FF, #E5E9F8); background: linear-gradient(top, #F7F9FF, #E5E9F8); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF7F9FF', endColorstr='#FFE5E9F8'); } .quick-login li .ico-acc { position: absolute; top: 6px; left: 8px; width: 16px; height: 16px; overflow: hidden; background-image: url(../images/icon_access.gif?v=201406241538); background-repeat: no-repeat; } .acc-qq { background-position: 0 0; } .acc-sina { background-position: -16px 0; } .acc-tencent { background-position: -32px 0; } .acc-renren { background-position: -48px 0; } .acc-neteasy { background-position: -64px 0; } .acc-douban { background-position: -80px 0; } .acc-baidu { background-position: -96px 0; } .acc-surfing { background-position: -112px 0; } .acc-alipay { background-position: -128px 0; } .wrap { position: relative; z-index: 0; height: 600px; } .banner-show { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; min-width: 980px; height: 600px; overflow: hidden; } .banner-show .cell { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; background-repeat: repeat-x; background-position: center top; } .banner-show .cell .con { position: relative; height: 600px; background-repeat: no-repeat; background-position: center top; } .bns-01 { background-image: url(../images/mid_banner/banner_01_repeat.png?v=201406241538); } .bns-01 .con { background-image: url(../images/mid_banner/banner_01.png?v=201406241538); } .bns-02 { background-image: url(../images/mid_banner/banner_02_repeat.gif?v=201406241538); } .bns-02 .con { background-image: url(../images/mid_banner/banner_02.gif?v=201406241538); } .bns-03 { background-image: url(../images/mid_banner/banner_03_repeat.png?v=201406241538); } .bns-03 .con { background-image: url(../images/mid_banner/banner_03.png?v=201406241538); } .banner-link { position: absolute; top: 100px; left: 50%; width: 400px; height: 400px; margin-left: -430px; } .banner-link i { display: none; } .banner-control { position: absolute; top: 0; left: 50%; width: 980px; margin-left: -490px; } .banner-control a { position: absolute; top: 258px; width: 30px; height: 30px; line-height: 10; overflow: hidden; background-image: url(../images/icon_control.png?v=201406241538); background-repeat: no-repeat; background-repeat: no-repeat; } .banner-control a.left { left: -55px; background-position: 0 0; } .banner-control a.left:hover { background-position: 0 -30px; } .banner-control a.right { right: -55px; background-position: -30px 0; } .banner-control a.right:hover { background-position: -30px -30px; } .container { position: relative; top: 600px; z-index: 2; width: 980px; height: 0; margin: auto; } .storage-info { display: none; position: absolute; top: 0; width: 980px; height: 30px; padding: 20px 0; text-align: right; overflow: hidden; } .storage-info span { position: relative; display: inline-block; height: 30px; margin: 0 0 0 40px; padding-left: 48px; line-height: 30px; zoom: 1; font-size: 18px; color: white; } .storage-info i { position: absolute; top: 0; left: 0; width: 36px; height: 30px; overflow: hidden; background-image: url(../images/icon_storage.gif?v=201406241538); background-repeat: no-repeat; } .ist-user { background-position: 0 0; } .ist-storage { background-position: -36px 0; } .ist-file { background-position: -72px 0; } .register-box { position: absolute; top: -550px; right: 0; width: 400px; height: 350px; background: white; border-radius: 3px; background: rgba(255, 255, 255, 0.95); } .reg-tab { position: relative; width: 396px; height: 57px; zoom: 1; overflow: hidden; border-radius: 3px 3px 0 0; } .reg-tab span { float: left; width: 198px; height: 57px; margin-left: -1px; line-height: 57px; text-align: center; font-size: 24px; color: #444; border-left: 1px solid #d2d3d4; background: url(../images/bg_tab_x.png?v=201406241538) repeat-x 0 0; cursor: pointer; } .reg-tab span:first-child { border-top-left-radius: 3px; } .reg-tab span:last-child { border-top-right-radius: 3px; } .reg-tab span.current { background: none; cursor: default; } .reg-slogan { height: 50px; line-height: 50px; text-align: center; font-size: 16px; } .reg-form { width: 328px; height: 280px; margin: auto; } .reg-form .cell { position: relative; height: 40px; margin-bottom: 22px; zoom: 1; } .reg-form .cell label { position: absolute; top: 0; left: 0; z-index: 1; padding: 0 12px; line-height: 40px; font-size: 16px; color: #999; font-weight: bold; cursor: text; } .reg-form .cell input { position: absolute; top: 0; left: 0; width: 304px; padding: 7px 11px; font-size: 16px; background: none; } .reg-form .cell .icon-form { top: 11px; right: 10px; } .reg-form .vcode input { width: 110px; } .reg-form .vcode .button { position: absolute; top: 0; left: 144px; width: 182px; padding: 0; font-size: 14px; } .reg-form .vcode img { position: absolute; top: 0; left: 144px; width: 110px; height: 40px; } .reg-form .vcode span { position: absolute; top: 0; left: 264px; line-height: 40px; font-size: 14px; } .reg-form .vcode .icon-form { right: 204px; } .reg-form .vcode .login-popup-hint { right: 194px; } .reg-form .user-agreement { height: 16px; margin-top: -22px; padding: 18px 0; line-height: 16px; } .reg-form .user-agreement input { float: left; width: 14px; height: 14px; margin: 1px 5px 0 0; } .reg-form .bottom { height: 40px; } .reg-form .bottom .button { display: block; border-radius: 3px; } .client-download { position: absolute; bottom: 0; left: 0; width: 100%; height: 86px; text-align: center; border-radius: 0 0 3px 3px; background: #f6f3f0; } .client-download a { position: relative; top: 13px; display: inline-block; width: 64px; margin: 0 10px; color: #999; } .client-download a i { display: block; width: 32px; height: 32px; margin: 0 auto 4px; overflow: hidden; background-image: url(../images/icon_client.gif?v=201406241538); background-repeat: no-repeat; opacity: 0.5; filter: alpha(opacity = 50); } .client-download a span { display: block; line-height: 24px; text-align: center; font-size: 14px; } .client-download a:hover { text-decoration: none; color: #666; } .client-download a:hover i { opacity: 1; filter: alpha(opacity = 100); } .icd-cloud { background-position: -0px 0; } .icd-iphone { background-position: -32px 0; } .icd-ipad { background-position: -64px 0; } .icd-android { background-position: -96px 0; } .footer { padding: 25px 0; } .copy-right { width: 980px; margin: auto; text-align: center; color: #999; } .copy-right .cell { position: relative; height: 26px; line-height: 26px; } .copy-right a { color: #999; } .copy-right a:hover { color: #333; } .localization-box { display: inline-block; padding: 4px 0; vertical-align: top; *display: inline; *zoom: 1; *vertical-align: middle; } .localization-box li { position: relative; float: left; height: 18px; margin-left: 15px; padding-left: 20px; line-height: 19px; vertical-align: top; overflow: hidden; _display: inline; } .localization-box .ico-local { position: absolute; top: 4px; left: 0; width: 16px; height: 11px; overflow: hidden; background-image: url(../images/icon_localization.gif?v=201406241538); background-repeat: no-repeat; } .iclo-cn { background-position: 0 0; } .iclo-tw { background-position: 0 -12px; } .iclo-us { background-position: 0 -24px; } .qcode-login { position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 600px; background: #333945; } .qcode-login .con { position: relative; width: 980px; margin: auto; } .qcode-login .close { position: absolute; top: 20px; right: 0px; width: 48px; height: 48px; line-height: 20; overflow: hidden; background: url(../images/close_qcode.gif?v=201406241538) no-repeat 0 0; } .qcode-login .close:hover { background-position: 0 -48px; } .qcode-flag { display: none; position: absolute; top: 15px; left: 67px; width: 836px; height: 77px; overflow: hidden; background: url(../images/flag_qcode.gif?v=201406241538) no-repeat 0 0; } .qcode-pic { position: absolute; top: 92px; left: 640px; z-index: 1; width: 295px; height: 415px; background: url(../images/pic_qcode.png?v=201406241538) no-repeat right top; opacity: 0; filter: alpha(opacity = 0); -webkit-transform: translate(-315px, 0) scale(0.3); -moz-transform: translate(-315px, 0) scale(0.3); -ms-transform: translate(-315px, 0) scale(0.3); -webkit-transform-origin: 50% 40%; -moz-transform-origin: 50% 40%; -ms-transform-origin: 50% 40%; -webkit-transition: all 0.5s ease 0.25s; -moz-transition: all 0.5s ease 0.25s; -ms-transition: all 0.5s ease 0.25s; } .qcode-show:hover .qcode-pic { opacity: 1; filter: alpha(opacity = 100); -webkit-transform: translate(0, 0) scale(1); -moz-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); } .qcode-box { position: absolute; top: 118px; left: 50%; width: 300px; height: 300px; margin-left: -150px; background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .qcode-box img { width: 300px; height: 300px; } .qcode-download { position: absolute; top: 418px; left: 50%; width: 300px; margin-left: -150px; padding-top: 20px; } .qcode-download a { display: block; height: 24px; padding: 13px; line-height: 24px; text-align: center; font-size: 18px; overflow: hidden; color: #91969e; background: #434954; } .qcode-download a:before { content: ""; display: inline-block; width: 16px; height: 24px; margin: -6px 10px 0 0; vertical-align: middle; background: url(../images/icon_client_download.png) no-repeat 0 0; } .qcode-download a:hover { text-decoration: none; color: white; background: #5c616a; } .qcode-download a:hover:before { background-position: -16px 0; } .qcode-desc-text { position: absolute; top: 565px; left: 0; width: 100%; line-height: 24px; text-align: center; color: #686f7c; } .qcode-hint { position: absolute; top: 436px; left: 50%; width: 278px; margin-left: -150px; padding: 10px; line-height: 30px; text-align: center; font-size: 16px; color: white; border: 1px solid #006700; background: #64b832; } .qcode-hint .arrow { position: absolute; top: -17px; left: 50%; width: 0; height: 0; margin-left: -8px; overflow: hidden; border: 8px solid; border-color: transparent transparent #006700; _border-color: pink pink #006700; _filter: chroma(color = pink); } .qcode-hint s.arrow { top: -16px; border-bottom-color: #64b832; }