imooc网站基础初始化代码参考
@charset "UTF-8";.word-break { word-break: break-all; word-wrap: break-word } .keep-word { white-space: nowrap; word-break: keep-all } blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul { margin: 0; padding: 0 } fieldset,img { border: 0 } :focus { outline: 0 } address,caption,cite,code,dfn,optgroup,th,var { font-style: normal; font-weight: 400 } strong { font-weight: 400 } em { font-style: normal } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 400; font-family: "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif } abbr,acronym { border: 0; font-variant: normal } code,kbd,samp,tt { font-size: 100% } button,input,select,textarea { border: none } body { background: #fff; color: #5e5e5e; font: 14px/2em "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif } ol,ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } caption,th { text-align: left } sub,sup { font-size: 100%; vertical-align: baseline } :link,:visited,ins { text-decoration: none } blockquote,q { quotes: none } blockquote:after,blockquote:before,q:after,q:before { content: ''; content: none } a:link,a:visited { color: #5e5e5e } a:hover { color: #c9394a } a:active { color: #666 } .clearfix:after { content: '\0020'; display: block; height: 0; clear: both; visibility: hidden } .l { float: left } .r { float: right } .clear { height: 0; overflow: hidden; clear: both } .hide { display: none } .btn.hide { display: none } a.hidefocus { outline: 0 } button.hidefocus::-moz-focus-inner { border: none } a:focus { outline: 0; -moz-outline: none } input,textarea { outline: 0 } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } [hidden],template { display: none } a { background-color: transparent } a:active,a:focus,a:hover { outline: 0; -moz-outline: none } button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0 } button { overflow: visible } button,select { text-transform: none } button,html input[type=button],input[type=reset],input[type=submit] { -webkit-appearance: button; cursor: pointer } button[disabled],html input[disabled] { cursor: default } button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0 } input { line-height: normal } input[type=checkbox],input[type=radio] { box-sizing: border-box; padding: 0 } textarea { overflow: auto } table { border-collapse: collapse; border-spacing: 0 } @font-face { font-family: imv2; src: url(/static/module/common/font/fonts/imv2.eot?5yqf6o6); src: url(/static/module/common/font/fonts/imv2.eot?5yqf6o6#iefix) format('embedded-opentype'),url(/static/module/common/font/fonts/imv2.ttf?5yqf6o6) format('truetype'),url(/static/module/common/font/fonts/imv2.woff?5yqf6o6) format('woff'),url(/static/module/common/font/fonts/imv2.svg?5yqf6o6#imv2) format('svg'); font-weight: 400; font-style: normal } [class*=" imv2-"],[class^=imv2-] { font-family: imv2!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .imv2-head1:before { content: "\e928" } .imv2-head2:before { content: "\e929" } .imv2-cloud_webide:before { content: "\e926" } .imv2-open_code:before { content: "\e927" } .imv2-dot_normal:before { content: "\e924" } .imv2-dot_samll:before { content: "\e925" } .imv2-code_circle:before { content: "\e920" } .imv2-exercise_circle:before { content: "\e921" } .imv2-homework_circle:before { content: "\e922" } .imv2-video_circle:before { content: "\e923" } .imv2-line:before { content: "\e91e" } .imv2-school:before { content: "\e91d" } .imv2-pin:before { content: "\e91c" } .imv2-path:before { content: "\e91a" } .imv2-war:before { content: "\e91b" } .imv2-score_shop:before { content: "\e563" } .imv2-receipt:before { content: "\e8b0" } .imv2-loading:before { content: "\e918" } .imv2-play_circle:before { content: "\e038" } .imv2-cloud_upload:before { content: "\e2c3" } .imv2-cloud_download:before { content: "\e2c0" } .imv2-cloud_done:before { content: "\e2bf" } .imv2-cloud:before { content: "\e42d" } .imv2-alarm:before { content: "\e855" } .imv2-nav_chapter:before { content: "\e916" } .imv2-nav_qa:before { content: "\e917" } .imv2-nav_note:before { content: "\e22b" } .imv2-set-key:before { content: "\e903" } .imv2-set-sns:before { content: "\e904" } .imv2-set-email:before { content: "\e905" } .imv2-feedback:before { content: "\e906" } .imv2-appdownload:before { content: "\e907" } .imv2-weixigzh:before { content: "\e908" } .imv2-lock:before { content: "\e897" } .imv2-chapter:before { content: "\e900" } .imv2-half:before { content: "\e901" } .imv2-empty:before { content: "\e902" } .imv2-video:before { content: "\e037" } .imv2-code:before { content: "\e86f" } .imv2-exercise:before { content: "\e164" } .imv2-homework:before { content: "\e909" } .imv2-arrow1_l:before { content: "\e5c6" } .imv2-arrow1_r:before { content: "\e5cb" } .imv2-arrow1_u:before { content: "\e5c7" } .imv2-arrow1_d:before { content: "\e5c5" } .imv2-arrow2_l:before { content: "\e408" } .imv2-arrow2_r:before { content: "\e409" } .imv2-arrow2_u:before { content: "\e5ce" } .imv2-arrow2_d:before { content: "\e5cf" } .imv2-arrow3_l:before { content: "\e5c4" } .imv2-arrow3_r:before { content: "\e5c8" } .imv2-arrow3_u:before { content: "\e5d8" } .imv2-arrow3_d:before { content: "\e5db" } .imv2-checkbox:before { content: "\e834" } .imv2-checkbox_onk:before { content: "\e835" } .imv2-radiobox:before { content: "\e837" } .imv2-radiobxo_o:before { content: "\e836" } .imv2-check:before { content: "\e5ca" } .imv2-check_c:before { content: "\e86c" } .imv2-close:before { content: "\e5cd" } .imv2-close_c:before { content: "\e5c9" } .imv2-error_c:before { content: "\e000" } .imv2-info:before { content: "\e88e" } .imv2-add_circle_o:before { content: "\e3ba" } .imv2-add_circle:before { content: "\e147" } .imv2-help_outline:before { content: "\e8fd" } .imv2-help:before { content: "\e887" } .imv2-thumb_up:before { content: "\e8dc" } .imv2-thumb_down:before { content: "\e8db" } .imv2-history:before { content: "\e8b5" } .imv2-cart:before { content: "\e8cc" } .imv2-add_cart:before { content: "\e854" } .imv2-star:before { content: "\e838" } .imv2-star_h:before { content: "\e919" } .imv2-delete:before { content: "\e872" } .imv2-edit:before { content: "\e254" } .imv2-replay:before { content: "\e042" } .imv2-refresh:before { content: "\e90a" } .imv2-set_1:before { content: "\e8b8" } .imv2-set_2:before { content: "\e429" } .imv2-folder:before { content: "\e2c7" } .imv2-share:before { content: "\e80d" } .imv2-visibility:before { content: "\e8f4" } .imv2-visibility_off:before { content: "\e8f5" } .imv2-search:before { content: "\e8b6" } .imv2-message:before { content: "\e159" } .imv2-notifications:before { content: "\e7f4" } .imv2-home:before { content: "\e88a" } .imv2-kecheng:before { content: "\e86e" } .imv2-shizhan:before { content: "\e1e2" } .imv2-lujing:before { content: "\e14f" } .imv2-yuanwen:before { content: "\e90b" } .imv2-shouji:before { content: "\e90c" } .imv2-wiki:before { content: "\e90d" } .imv2-follow_user:before { content: "\e7f0" } .imv2-photo:before { content: "\e412" } .imv2-tag_faces:before { content: "\e420" } .imv2-pause:before { content: "\e034" } .imv2-fullscreen:before { content: "\e5d0" } .imv2-fullscreen_exit:before { content: "\e5d1" } .imv2-vol_up:before { content: "\e050" } .imv2-vol_down:before { content: "\e04d" } .imv2-vol_mute:before { content: "\e04e" } .imv2-vol_off:before { content: "\e04f" } .imv2-ios:before { content: "\e90e" } .imv2-android:before { content: "\e859" } .imv2-weixin:before { content: "\e90f" } .imv2-qq:before { content: "\e910" } .imv2-weibo:before { content: "\e911" } .imv2-weixin_c:before { content: "\e912" } .imv2-qq_c:before { content: "\e913" } .imv2-weibo_c:before { content: "\e914" } .imv2-imooc:before { content: "\e915" } .imv2-load_o:before { content: "\e88b" } .imv2-textsms:before { content: "\e0d8" } .imv2-follow_o:before { content: "\e87e" } .imv2-follow:before { content: "\e87d" } .imv2-add:before { content: "\e145" } .imv2-assignment_ind:before { content: "\e85e" } .imv2-flag:before { content: "\e153" } .imv2-finish:before { content: "\e3a6" } .imv2-build:before { content: "\e869" } .imv2-chat_bubble:before { content: "\e0ca" } .imv2-cloud_off:before { content: "\e2c1" } .imv2-description:before { content: "\e873" } .imv2-insert_invitation:before { content: "\e24f" } .imv2-event_busy:before { content: "\e615" } .imv2-filter_drama:before { content: "\e3dd" } .imv2-format_size:before { content: "\e245" } .imv2-bold:before { content: "\e238" } .imv2-italic:before { content: "\e23f" } .imv2-list_bulleted:before { content: "\e241" } .imv2-list_numbered:before { content: "\e242" } .imv2-link:before { content: "\e157" } .imv2-quote:before { content: "\e244" } .imv2-undo:before { content: "\e166" } .imv2-redo:before { content: "\e15a" } .imv2-import_image:before { content: "\e3c4" } .imv2-photo_image:before { content: "\e410" } .imv2-lightbulb_outline:before { content: "\e91f" } .imv2-memory:before { content: "\e322" } .imv2-more_horiz:before { content: "\e5d3" } .imv2-forward:before { content: "\e040" } .imv2-sim_card:before { content: "\e32b" } .imv2-stars:before { content: "\e8d0" } .imv2-straighten:before { content: "\e41c" } .imv2-invoice:before { content: "\e048" } .imv2-voicemail:before { content: "\e0d9" } .imv2-bright:before { content: "\e42e" } .page { margin: 25px 0; overflow: hidden; clear: both; text-align: center } .page-inner { padding: 0 20px } .page a { display: inline-block; margin: 0 12px; width: 36px; height: 36px; line-height: 36px; font-size: 14px; color: #4d555d; text-align: center; border-radius: 50%; -webkit-transition: border-color .2s; -moz-transition: border-color .2s; transition: border-color .2s } .page a:hover { text-decoration: none; background-color: #f3f5f7 } .page a.active { background: #4d555d; color: #fff } .page a:first-child,.page a:last-child,.page a:nth-child(2),.page a:nth-last-child(2) { width: auto } .page a:first-child:hover,.page a:last-child:hover,.page a:nth-child(2):hover,.page a:nth-last-child(2):hover { background-color: transparent } .page span,.page-disabled { display: inline-block; padding: 0 12px; min-width: 20px; height: 39px; line-height: 39px; font-size: 14px; color: #93999f; text-align: center } .page-first,.page-last { width: 50px } .page-next,.page-prev { width: 70px } .page .notmargin { margin-right: 0 } .bordered { border-bottom: solid 1px #d0d6d9 } .panel { -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2); padding: 0 20px; color: #1c1f21; background-color: #fff; margin-bottom: 20px } .panel-heading { border-bottom: solid 1px #d0d6d9 } .panel-title { height: 50px; line-height: 50px; font-size: 16px } .mr60 { margin-right: 60px } .pa { position: absolute } .color-red { color: #ef1300!important } .overhidden { overflow: hidden } .rl-modal { position: fixed; background: #fff; z-index: 100000; width: 384px; padding-top: 10px; padding-bottom: 30px; left: 50%; top: 50%; margin: -192px 0 0 -192px; box-shadow: 0 12px 24px 0 rgba(28,31,33,.1); border-radius: 12px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s } .rl-modal.in { opacity: 1 } .rl-modal-header { position: relative; padding: 0 20px 25px } .rl-modal-header h1 { font-size: 16px; line-height: 49px; font-weight: 700; height: 49px; color: #787d82 } .rl-modal-header h1 span { float: left; width: 80px; font-weight: 700; text-align: center; height: 49px; line-height: 49px; cursor: pointer } .rl-modal-header .active-title,.rl-modal-header span:hover { color: #f20d0d } .rl-modal-header .active-title:after,.rl-modal-header span:hover:after { content: " "; width: 16px; height: 4px; line-height: 4px; background: #f20d0d; border-radius: 2px; display: block; margin: 0 auto } .rl-close { position: absolute; top: 17px; right: 20px; width: 17px; height: 17px; cursor: pointer; background: url(/static/module/common/img/nlogin.png) no-repeat 0 0; transition: transform .2s; -webkit-transition: transform .2s; -moz-transition: transform .2s; -o-transition: transform .2s } .rl-close:hover { background-position: 0 -21px; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1) } .rl-modal-body { padding: 0 32px } .error-erea { font-size: 14px; color: #f01400; padding-bottom: 5px; height: 20px } .modal-backdrop { background-color: #fff } .modal-backdrop.fade { opacity: 0 } .modal-backdrop,.modal-backdrop.fade.in { opacity: .75 } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000 } .fade { opacity: 0; -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear } .rl-model-footer { padding: 20px 30px 4px } .rl-model-signup .ipt-phone { padding-left: 77px!important } .rl-model-signup .rl-model-footer { padding: 20px 9px 4px 30px } .rl-model-signup .rl-model-footer span { color: #9199a1 } .rlf-appendix { line-height: 1em } .rlf-appendix .rlf-autoin,.rlf-appendix .rlf-forget { color: #9199a1 } .rlf-appendix .rlf-forget:hover { color: #545c63 } .rlf-appendix .rlf-line { margin: 0 16px; background: rgba(28,31,33,.1); width: 1px; height: 14px } .rlf-appendix .auto-cbx { margin-right: 10px; vertical-align: -1px } .rlf-appendix .ipt-agreement { color: #37f } .rlf-appendix .ipt-agreement:hover { color: #04c } .rl-modal .ipt { width: 100%; height: 48px; line-height: 20px; box-sizing: border-box; padding: 14px; box-shadow: 2px 0 5px 0 #fff; background: rgba(28,31,33,.06); border-radius: 8px; border: 0 } .ipt::-webkit-input-placeholder { color: #9199a1; font-size: 16px } .ipt::-moz-placeholder { color: #9199a1; font-size: 16px } .ipt:-ms-input-placeholder { color: #9199a1; font-size: 16px } .ipt-email { background-position: 0 0 } .ipt-pwd { background-position: 0 -48px } .ipt-nick { background-position: 0 -96px } .ipt-phone { padding-left: 57px!important } .rlf-areacode { position: absolute; cursor: pointer; left: 16px; top: 12px; font-size: 16px; color: #1c1f21; text-align: left; line-height: 24px } .rlf-verify-group .rlf-input { background: #fff; padding-left: 7px; width: 120px; vertical-align: top } .rlf-verify-group img { height: 38px; width: 70px; margin: 0 10px; vertical-align: top; display: inline-block } .rlf-verify-group span { display: inline-block; color: #39b94e; cursor: pointer; height: 40px; vertical-align: top; line-height: 150%; margin-top: -4px } .rlf-tip-wrap { font-size: 12px; height: 20px } .rlf-g-tip { height: 20px } .rlf-tip-globle { font-size: 14px; height: 20px; line-height: 20px } .rlf-tip-error { color: #f01400 } .btn-full { width: 100%; box-sizing: border-box!important } .btn-block { display: block; width: auto } .forgetpwd-resultwrap { text-align: center; display: none; width: 260px } .pop-login-sns { text-align: center; font-size: 14px } .pop-login-sns .rlf-other { margin-left: 30px; margin-right: 24px; padding-right: 24px; display: inline-block; font-size: 14px; color: #f20d0d; text-align: left; line-height: 24px; border-right: 1px solid #1a1C1F21; cursor: pointer } .pop-login-sns .rlf-other:hover { color: #c20a0a } .pop-login-sns a { font-size: 14px; margin-right: 21px; height: 20px; line-height: 20px; color: #c8cdd2; transition: color .2s } .pop-login-sns i { font-size: 24px; vertical-align: -3px; transition: color .2s; color: #b5b9bc } .pop-login-sns .pop-sns-weixin:hover i { color: #00b33b } .pop-login-sns .pop-sns-qq:hover i { color: #08c } .pop-login-sns .pop-sns-weibo:hover i { color: #f01400 } .rl-modal .ipt-verify { background-image: none } .rl-modal .icon-refresh { position: absolute; right: 90px; top: 12px; color: #b5b9bc; font-size: 24px; display: inline-block; -webkit-transition: .4s linear; transition: .4s ease-in } .rl-modal .icon-refresh:hover { color: #787d82; transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg) } .rl-modal .form-control { position: relative } .rl-modal .proclaim-loc { position: relative } .rl-modal .proclaim-btn { font-size: 23px; color: #b5b9bc; position: absolute; top: 12px; right: 14px } .rl-modal .proclaim-btn:hover { color: #717a84 } .rl-modal .verify-img { width: 80px; height: 32px } .rl-modal .verify-extra { line-height: 20px } .rl-modal .verify-extra a { color: #17823b } .rl-modal .btn-red { background-color: #f01400; border-color: #f01400 } .rl-modal .btn-red:hover { background-color: #ff6464; border-color: #ff6464 } .rl-modal .ipt-error,.rl-modal .rlf-tip-error { color: #f01400 } .rl-modal .rlf-tip-error { height: 30px; line-height: 30px } .rl-modal .js-proclaim-on .js-txt-pwd { display: none } .rl-modal .js-proclaim-off .js-pass-pwd { display: none!important } .rl-modal input[type=text]::-ms-clear { width: 0; height: 0 } .rl-modal input[type=password]::-ms-reveal { width: 0; height: 0 } .verify-img-wrap { position: absolute; right: 2px; top: 8px; width: 84px; height: 32px } .rlf-tip-wrap { clear: both } .areacode-box { display: none; width: 320px; height: 280px; position: absolute; top: 132px; left: 32px; background: #fff; box-shadow: 0 8px 16px 0 rgba(28,31,33,.2); border-radius: 8px } .areacode-box .code-tab { padding: 16px } .areacode-box .code-tab li { display: inline-block; margin-right: 9px; cursor: pointer } .areacode-box .code-tab li.curr { font-weight: 700; color: #f20d0d } .areacode-box .code-title { border-top: 1px solid #e1e2e2; margin: 0 16px 14px } .areacode-box .code-title span { margin-top: -10px; position: relative; font-size: 12px; color: #9199a1; background: #fff; float: left; width: 36px } .areacode-box .code-list { overflow: hidden; height: 190px } .areacode-box .code-list li { padding-left: 16px; font-size: 16px; color: #545c63; text-align: left; line-height: 48px; cursor: pointer } .areacode-box .code-list li:hover { background: rgba(56,61,66,.06) } .areacode-box .code-list .nano-pane { right: 4px } .areacode-box .code-list .nano-slider { background: rgba(28,31,33,.1)!important; border-radius: 4px!important } .autoul { width: 298px; padding: 0; border-top: 0 none; position: absolute; height: 156px; overflow: hidden; background: #fff; box-shadow: 0 8px 16px 0 rgba(28,31,33,.2); border-radius: 8px; z-index: 10000 } .autoul .autoli { color: #787d82; height: 39px; line-height: 39px; text-align: left; cursor: pointer; font-size: 14px; padding: 0 10px; overflow: hidden; display: none; text-overflow: ellipsis } .autoul .lihover { background-color: #edf1f2 } .autoul .showli { display: block } .form-control .autoul { width: 318px } .erweima,.pcLogin { background: url(/static/module/common/img/erweima.png) no-repeat 0 0; width: 60px; height: 60px; position: absolute; bottom: 0; right: 0; cursor: pointer; border-radius: 0 0 12px 0 } .pcLogin { background: url(/static/module/common/img/pcLogin.png) no-repeat 0 0 } .qrcode { margin: 10px 80px 30px; position: relative } .qrcode_title { font-size: 16px; color: #717a84; font-weight: 700; text-align: center } .qrcode_mark { color: #717a84; font-size: 12px; text-align: center } .qrcode-inner { position: absolute; background-color: #fff; height: 160px; width: 160px; opacity: .95 } .qrcode_state_scaned { width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; font-weight: 700; color: #1c1f21 } .qrcode_state_scaned i { margin-top: 44px; display: block; font-size: 48px; color: #37f } .qrcode_state_validate { width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center } .qrcode_state_validate span { padding-top: 44px; color: #1c1f21; padding-bottom: 12px; display: block; font-weight: 700 } .qrcode_state_validate a { background: #383d42; color: #fff!important } .phoneVerityBox { font-family: "微软雅黑" } .backNotify,.phoneVerityBox .subtitle,.phoneVerityBox .title { text-align: center } .phoneVerityBox .title { margin-bottom: 4px; font-size: 16px; color: #1c1f21; text-align: center; line-height: 24px; font-family: "微软雅黑" } .phoneVerityBox .subtitle { font-size: 14px; color: #545c63; line-height: 22px; margin-bottom: 20px; font-family: "微软雅黑" } .phoneVerityBox .subtitle span { color: #1c1f21 } .phoneVerityBox .reSend { top: 12px; right: 14px; font-size: 14px; color: #9199a1; line-height: 24px } .phoneVerityBox .reSend.active { right: 14px; color: #1481b8!important; cursor: pointer } .phoneVerityBox .reSend.active:hover { color: #19a1e6!important } .phoneVerityBox .voicecode-send { margin-left: 8px; padding-left: 8px; font-size: 14px; color: #1481b8; line-height: 24px; cursor: pointer; border-left: 1px solid #d3d6d9 } .phoneVerityBox .voicecode-send:hover { color: #19a1e6 } .phoneVerityBox .voicesend i { display: inline-block; margin-right: 4px } .rl-modal-body .backNotify { color: #777c81; margin-top: 15px; cursor: pointer } .rl-modal-body .user_header { width: 76px; background: url(/static/module/common/img/default_user.png) no-repeat 0 0; height: 76px; margin: auto; margin-top: 40px } .rl-modal-body .btn-finished { width: 160px; height: 50px } .rl-modal-body .finished_wrap { text-align: center } .rl-modal-body .active { color: #13181e!important; cursor: pointer } .rl-modal-body .active:hover { color: #ff6464!important } .reg-success { padding-top: 38px; text-align: center } .reg-success .icon-send-success { width: 96px; height: 96px; line-height: 96px; border-radius: 50%; background: rgba(28,31,33,.1); display: inline-block; font-size: 64px; color: #1c1f21 } .reg-success p { font-size: 16px; color: #1c1f21; text-align: center; line-height: 24px; font-weight: 700; padding: 16px 0 5px } .reg-success .get-info { font-size: 12px; color: #545c63; text-align: center; line-height: 18px } .reg-success .moco-btn-lg { margin-top: 36px; margin-bottom: 20px } .nano { position: relative; width: 100%; height: 100%; overflow: hidden } .nano>.nano-content { position: absolute; overflow: scroll; overflow-x: hidden; top: 0; right: 0; bottom: 0; left: 0 } .nano>.nano-content:focus { outline: thin dotted } .nano>.nano-content::-webkit-scrollbar { display: none } .has-scrollbar>.nano-content::-webkit-scrollbar { display: block } .nano>.nano-pane { position: absolute; width: 10px; right: 10px; top: 0; bottom: 0; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px } .nano>.nano-pane>.nano-slider { background: #4e5a5e; position: relative; margin: 0 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } .nano-pane.active,.nano-pane.flashed,.nano:hover>.nano-pane { opacity: .99 } .ueword { word-break: break-all } .ueword caption,.ueword code,.ueword optgroup,.ueword strong,.ueword th { font-style: inherit; font-weight: 700 } .ueword address,.ueword cite,.ueword dfn,.ueword em,.ueword i,.ueword var { font-style: italic; font-weight: inherit } .ueword blockquote { padding: 1px 20px; margin: 1em 0; border-left: 4px solid #ccc; color: #787d82; background-color: #f5f5f5 } .ueword blockquote p { line-height: 1.5em; font-size: 13px; color: #444 } .ueword ul { list-style-type: disc } .ueword ol { list-style-type: decimal } .ueword .list-paddingleft-2 { padding-left: 30px } .ueword a { color: #08c; text-decoration: none } .ueword a:hover { color: #08c; text-decoration: underline } .ueword pre { margin: .5em 0; padding: .4em .6em; line-height: 1.5; border-radius: 3px; background: #eee; overflow-x: auto } .pad9 { padding: 0 9px } .w298 { width: 278px; padding: 0 9px } .w200 { width: 180px; padding: 0 9px } .statement { margin-bottom: 12px } #improve-mode { width: 430px; box-sizing: border-box } .moco-modal-layer #improve-mode { display: block!important } .improve .wfbd { position: absolute; right: 80px; bottom: 48px; font-size: 12px; color: #727679 } .improve .wfbd:hover { text-decoration: underline } .improve label { display: inline-block; width: 104px; font-weight: 700; color: #07111b; text-align: right } .improve .help-inline { left: 120px; width: 298px; position: absolute; line-height: 24px; bottom: -24px; font-size: 12px; color: #f01414 } .improve .help-inline label.error { color: inherit; text-align: left; font-weight: 400; width: auto } .improve .help-inline i { display: inline-block; color: #fff; width: 20px; background: #00a0dc; border-radius: 2px; cursor: pointer; font-style: normal; text-align: center } .improve .box { line-height: 36px; position: relative; margin-bottom: 8px } .improve .box input[type=password],.improve .box input[type=text] { box-sizing: border-box; padding: 0 12px; height: 36px; border: 1px solid rgba(84,92,99,.6); border-radius: 6px; margin-left: 16px } .improve .box .getCode { position: absolute; padding: 0 9px; top: 8px; right: 12px; font-size: 12px; color: #9199a1; line-height: 20px } .improve .box .getCode.active { right: 85px; color: #1481b8; cursor: pointer } .improve .box .getCode.active:hover { color: #19a1e6 } .improve .box .voicecode-send { position: absolute; right: 12px; top: 8px; padding-left: 8px; font-size: 12px; color: #1481b8; line-height: 20px; cursor: pointer; border-left: 1px solid #d3d6d9 } .improve .box .voicecode-send i { display: inline-block; margin-right: 4px } .improve .box .voicecode-send:hover { color: #19a1e6 } .improve .box .l { position: relative } .improve .box .l .icon-pw { position: absolute; top: 0; right: 0; color: #b7bbbf; line-height: 38px; font-size: 24px; margin-right: 7px } .improve .box .l .icon-pw:hover { color: #71777d } .improve .box .cancelBtn,.improve .box .submitBtn { display: inline-block; text-align: center } .improve .box .submitBtn { margin-left: 120px; vertical-align: top } .improve .box .cancelBtn { margin-left: 12px } .improve .edit { margin-bottom: 24px } .improve .edit p.w298 { margin: 10px 0 30px 111px; font-size: 12px; color: #93999f; line-height: 22px } .improve .info-val { margin-left: 16px; color: #07111b } .certificate-mode { display: none } .first-certificate { display: block } #certificate-mode { position: fixed; left: 50%; top: 50%; width: 408px; height: 570px; margin-left: -204px; margin-top: -285px; z-index: 10 } #certificate-mode .certificate-wrap { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0 } #certificate-mode .certificate-wrap img { width: 100%; height: auto } #certificate-mode .generate-report-mode { position: absolute; left: 0; right: 0; bottom: -50px; text-align: center } #certificate-mode .generate-report-mode .generate-report { display: inline-block; border: 1px solid #fff; padding: 4px 8px; height: 24px; line-height: 24px; font-size: 14px; text-align: center; color: #fff } .certificate-mode-opt { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9; background: rgba(7,17,27,.5) } #main { min-height: 750px } .body-main { min-height: 750px } .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pr { position: relative } #header { background: #07111b } #header .new-header { width: 1152px; height: 40px; margin: 0 auto; font-size: 12px } #header .new-header .nav-item li { float: left; margin-right: 12px } #header .new-header .nav-item li>a { display: block; padding: 0 12px; height: 40px; line-height: 40px; color: rgba(255,255,255,.6); -webkit-transition: background-color .3s; -moz-transition: background-color .3s; transition: background-color .3s; position: relative } #header .new-header .nav-item li>a .icn-new { position: absolute; display: inline-block; top: 2px; width: 16px; height: 16px; background: url(/static/module/common/img/new.png) no-repeat 0 0 } #header .new-header .nav-item li>a.imooc:hover { color: #f20d0d } #header .new-header .nav-item li>a.active { color: #fff } #header .new-header .nav-item li>a:hover { color: #fff; background: rgba(255,255,255,.1) } #header .new-header .nav-item li.search { padding: 10px 8px; margin: 0 0 0 12px } #header .new-header .nav-item li.search a { padding: 0; padding-left: 6px; width: 96px; height: 20px; line-height: 20px; background: rgba(255,255,255,.2); border-radius: 10px; color: rgba(255,255,255,.6); box-sizing: border-box; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; transition: background-color .3s } #header .new-header .nav-item li.search a:hover { color: #fff; background: rgba(255,255,255,.2) } #header .new-header .nav-item li.search input { display: none } #header .new-header .nav-item li.input-search { padding: 0; width: 240px; background: rgba(255,255,255,.1); position: relative; margin-right: 0 } #header .new-header .nav-item li.input-search .input-box { width: 240px; box-sizing: border-box; float: right } #header .new-header .nav-item li.input-search .input-box:hover { color: fff; background: 0 0 } #header .new-header .nav-item li.input-search .input-box input { display: inline-block; width: 200px; height: 38px; line-height: 38px; box-sizing: border-box; padding-left: 12px; background: 0 0; font-size: 14px; color: #fff } #header .new-header .nav-item li.input-search .input-box .nav-searchBtn { display: inline-block; height: 40px; line-height: 40px; width: 36px; text-align: center; font-size: 16px; color: rgba(255,255,255,.6); -webkit-transition: background-color .2s; -moz-transition: background-color .2s; transition: background-color .2s; cursor: pointer } #header .new-header .nav-item li.input-search .input-box .nav-searchBtn:hover { color: #fff; background: rgba(255,255,255,.1) } #header .new-header .nav-item li.input-search .nav-search-box { width: 240px; position: absolute; top: 40px; left: 0; background: #fff; z-index: 10; box-shadow: 0 8px 16px 0 rgba(7,17,27,.2); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } #header .new-header .nav-item li.input-search .nav-search-box h2 { font-size: 12px; color: #1c1f21; line-height: 12px; margin-bottom: 8px; font-weight: 700 } #header .new-header .nav-item li.input-search .nav-search-box .hot { padding: 12px 0 8px 12px; box-sizing: border-box } #header .new-header .nav-item li.input-search .nav-search-box .hot .hot-item { background: rgba(84,92,99,.1); border-radius: 12px; padding: 4px 12px; line-height: 16px; margin-right: 4px; margin-bottom: 4px; display: inline-block; cursor: pointer; font-size: 12px; color: #545c63 } #header .new-header .nav-item li.input-search .nav-search-box .hot .hot-item:hover { background: rgba(84,92,99,.2); color: #1c1f21 } #header .new-header .nav-item li.input-search .nav-search-box .history { border-top: 1px solid rgba(28,31,33,.1); padding: 12px 0 0; box-sizing: border-box } #header .new-header .nav-item li.input-search .nav-search-box .history h2 { margin-left: 12px } #header .new-header .nav-item li.input-search .nav-search-box .history h2 .history-clear { font-size: 12px; color: #9199a1; line-height: 12px; float: right; margin-right: 12px; font-weight: 400 } #header .new-header .nav-item li.input-search .nav-search-box .history h2 .history-clear:hover { color: #545c63 } #header .new-header .nav-item li.input-search .nav-search-box .history .history-item { display: inline-block; padding: 0 12px; box-sizing: border-box; height: 36px; line-height: 36px; width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 12px; color: #545c63 } #header .new-header .nav-item li.input-search .nav-search-box .history .history-item:hover { background: rgba(56,61,66,.06); color: #1c1f21 } #header .new-header .nav-item li.input-search .nav-correlate-box { width: 240px; position: absolute; top: 40px; left: 0; background: #fff; box-shadow: 0 8px 16px 0 rgba(7,17,27,.2); z-index: 10; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } #header .new-header .nav-item li.input-search .nav-correlate-box .correlate .correlate-item { display: inline-block; padding: 0 12px; box-sizing: border-box; height: 36px; line-height: 36px; width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 12px; color: #545c63 } #header .new-header .nav-item li.input-search .nav-correlate-box .correlate .correlate-item:hover { background: rgba(56,61,66,.06); color: #1c1f21 } #header .new-header .header-right { float: right } #header .new-header .header-right .dist-money { float: left; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; transition: background-color .3s; position: relative } #header .new-header .header-right .dist-money:hover { background: rgba(255,255,255,.1) } #header .new-header .header-right .dist-money a { display: inline-block; padding: 0 12px; height: 40px; line-height: 40px; color: rgba(255,255,255,.6) } #header .new-header .header-right .dist-money a:hover { color: #fff } #header .new-header .header-right .dist-money .redPacket { display: inline-block; width: 14px; height: 16px; vertical-align: text-bottom; position: relative; top: 1px; margin-right: 8px; background: url(//www.imooc.com/static/img/index/redPacket.png) no-repeat; background-size: 100% 100%; background-position: top center } #header .new-header .header-right .dist-money a { width: 110px!important; padding: 0 12px; box-sizing: border-box } #header .new-header .header-right .app-download { float: left; position: relative; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; transition: background-color .3s } #header .new-header .header-right .app-download:hover { background: rgba(255,255,255,.1) } #header .new-header .header-right .app-download>a { display: inline-block; padding: 0 12px; height: 40px; line-height: 40px; color: rgba(255,255,255,.6) } #header .new-header .header-right .app-download>a:hover { color: #fff } #header .new-header .header-right .app-download .app-load-box { display: none; position: absolute; right: 0; top: 100%; width: 304px; padding: 10px 24px 22px; box-sizing: border-box; background-color: #fff; color: #4d555d; line-height: 16px; box-shadow: 0 8px 16px 0 rgba(7,17,27,.2); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; z-index: 99999; font-size: 12px } #header .new-header .header-right .app-download .app-load-box h4 { margin: 12px 0; font-size: 14px; color: #1c1f21; text-align: center; line-height: 22px } #header .new-header .header-right .app-download .app-load-box img { width: 108px; height: 108px } #header .new-header .header-right .app-download .app-load-box p { margin-top: 12px; text-align: center } #header .new-header .header-right .app-download .app-load-box a.app-load-btn { display: block; color: #fff; width: 132px; height: 36px; margin-bottom: 8px; line-height: 36px; background: #4d555d; border-radius: 18px; text-align: center } #header .new-header .header-right .app-download .app-load-box a.app-load-btn:hover { background-color: #07111b } #header .new-header .header-right .app-download .app-load-box a.app-load-btn i { display: none } #header .new-header .header-right .app-download .app-load-box .browser-load-box { padding-bottom: 12px; border-bottom: 1px solid #d3d6d9 } #header .new-header .header-right .app-download .app-load-box .browser-load-box a.app-load-btn { margin: 0 auto } #header .new-header .header-right .app-download .app-load-box .browser-load-box a.app-load-btn i { margin-left: 20px!important } #header .new-header .header-right .app-download .app-load-box .browser-load-box a.app-load-faq { float: left; padding-top: 12px; font-size: 12px; color: #37f; text-align: center; line-height: 18px } #header .new-header .header-right .app-download .app-load-box .browser-load-box .browser-load-mac { display: block; padding-top: 12px; height: 18px; font-size: 12px; text-align: center; color: #9199a1; line-height: 18px } #header .new-header .header-right .shop-cart { float: left; margin-left: 12px; height: 40px; line-height: 40px; position: relative } #header .new-header .header-right .shop-cart .shop-cart-icon { display: inline-block; height: 40px; line-height: 40px; padding: 0 12px; border-radius: 18px } #header .new-header .header-right .shop-cart .shop-cart-icon span { color: rgba(255,255,255,.6) } #header .new-header .header-right .shop-cart .shop-cart-icon .imv2-cart { position: relative; top: 2px; font-size: 16px; margin-right: 8px } #header .new-header .header-right .shop-cart .shop-cart-icon .shopping_icon { padding: 0 5px; height: 16px; line-height: 16px; background: #f01414; border-radius: 50%; color: #fff; margin-left: 8px } #header .new-header .header-right .shop-cart .my-cart { display: none; width: 346px; padding: 0 16px; position: absolute; top: 40px; right: 0; background: #fff; box-sizing: border-box; z-index: 99999; box-shadow: 0 8px 16px 0 rgba(28,31,33,.2); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px } #header .new-header .header-right .shop-cart .my-cart .cart-title-box { padding: 13px 12px; border-bottom: 1px solid #d3d6d9 } #header .new-header .header-right .shop-cart .my-cart .cart-title-box h2,#header .new-header .header-right .shop-cart .my-cart .cart-title-box h5 { height: 24px; line-height: 24px } #header .new-header .header-right .shop-cart .my-cart .cart-title-box h2 { font-weight: 700; font-size: 14px; color: #1c1f21 } #header .new-header .header-right .shop-cart .my-cart .cart-title-box h5 { font-size: 12px; color: #9199a1 } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box { height: 284px; overflow-y: scroll } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul { width: 100% } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li { padding: 12px; box-sizing: border-box } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li:hover { background: #f8fafc } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li:hover .del { display: block } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li a { width: auto; height: auto } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li img { width: 100px; height: 56px; margin-right: 10px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box { width: 160px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box h3 { font-size: 12px; color: #07111b; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box p { margin-top: 8px; height: 16px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box p span { color: rgba(240,20,20,.6); font-size: 12px; line-height: 16px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .content-box p span:hover { color: #f01414 } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .cart-wrap-box ul li .del { display: none; cursor: pointer } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .clear-cart { height: 284px; text-align: center } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .clear-cart .cartIcon { margin: 36px 0 8px; display: inline-block; font-size: 72px; color: #d3d6d9 } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .clear-cart h3 { font-size: 14px; color: #545c63; text-align: center; line-height: 24px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .clear-cart .text { margin-bottom: 8px; font-size: 12px; color: #9199a1; text-align: center; line-height: 24px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .clear-cart .go-link { display: block; color: rgba(240,20,20,.6); font-size: 12px; line-height: 24px; margin-bottom: 4px } #header .new-header .header-right .shop-cart .my-cart .cart-wrap .clear-cart .go-link:hover { color: #f01414 } #header .new-header .header-right .shop-cart .my-cart .more-box { padding: 16px 12px; border-top: 1px solid #d3d6d9 } #header .new-header .header-right .shop-cart .my-cart .more-box .show-box { height: 32px; line-height: 32px; font-size: 12px } #header .new-header .header-right .shop-cart .my-cart .more-box .show-box .num-icon { color: #fff; line-height: 16px; padding: 0 5px; border-radius: 50%; background: #f01414; box-sizing: border-box } #header .new-header .header-right .shop-cart .my-cart .more-box .show-box .text { color: #93999f } #header .new-header .header-right .shop-cart .my-cart .more-box .show-box .text a { color: #93999f } #header .new-header .header-right .shop-cart .my-cart .more-box .show-box .text a:hover { color: #4d555d } #header .new-header .header-right .shop-cart .my-cart .more-box .show-box .go-pay a { color: rgba(240,20,20,.6) } #header .new-header .header-right .shop-cart .my-cart .more-box .go-cart { width: 96px; color: #fff; font-size: 12px; line-height: 16px; padding: 8px 16px; background: rgba(240,20,20,.8); border-radius: 16px; border: none } #header .new-header .header-right .shop-cart .my-cart .more-box .go-cart:hover { background-color: #f01414 } #header .new-header .header-right .shop-cart.hover .shop-cart-icon { background-color: rgba(255,255,255,.1) } #header .new-header .header-right .shop-cart.hover .shop-cart-icon span { color: #fff } #header .new-header .header-right .shop-cart.hover .my-cart { display: block } #header .new-header .header-right #login-area { float: left; position: relative } #header .new-header .header-right #login-area .header-unlogin { margin-left: 24px } #header .new-header .header-right #login-area .header-unlogin li { float: left } #header .new-header .header-right #login-area .header-unlogin .header-signin { color: #fff } #header .new-header .header-right #login-area .header-unlogin .header-signin a { display: inline-block; height: 40px; line-height: 40px; color: rgba(255,255,255,.6); font-weight: 700; color: #fff; -webkit-transition: background-color .2s; -moz-transition: background-color .2s; transition: background-color .2s } #header .new-header .header-right #login-area .header-unlogin .header-signin a:hover { color: #f01414 } #header .new-header .header-right #login-area .logined>li { float: left; height: 40px } #header .new-header .header-right #login-area .logined>li>a { -webkit-transition: background-color .2s; -moz-transition: background-color .2s; transition: background-color .2s } #header .new-header .header-right #login-area .logined .remind_warp { width: 64px; position: relative } #header .new-header .header-right #login-area .logined .remind_warp .msg_remind { display: none; width: 4px; height: 4px; background-color: #f01414; border-radius: 50%; position: absolute; top: 12px; right: 22px } #header .new-header .header-right #login-area .logined .remind_warp>a { display: block; color: rgba(255,255,255,.6); text-align: center } #header .new-header .header-right #login-area .logined .remind_warp>a:hover { color: #fff } #header .new-header .header-right #login-area .logined .remind_warp .imv2-notifications { line-height: 40px; font-size: 16px } .app-download>a,.remind_warp>a,.user-card-box>a { width: auto; padding: 0 12px; height: 40px; line-height: 40px } .user-card-box .user-card-item img { display: inline-block; width: 24px; height: 24px; border: 2px solid #4d5559; border-radius: 50%; vertical-align: middle } .user-card-box .user-card-item .myspace_remind { width: 10px; height: 10px; background: url(/static/module/common/img/space-remind.png) no-repeat 0 0; position: absolute; top: 10px; right: 10px } .user-card-box .g-user-card { visibility: hidden; position: absolute; right: 0; top: 100%; z-index: 1000; width: 306px; padding: 24px; background-color: #fff; box-shadow: 0 8px 16px 0 rgba(7,17,27,.2); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; box-sizing: border-box } .user-card-box .g-user-card .card-top { color: #93999f; position: relative } .user-card-box .g-user-card .card-top a { display: inline-block; color: #93999f } .user-card-box .g-user-card .card-top a img { float: left; width: 72px; height: 72px; border-radius: 50%; border: 2px solid #fff; margin-right: 12px } .user-card-box .g-user-card .card-top .card-top-right-box { margin-top: 14px } .user-card-box .g-user-card .card-top .name { display: inline-block; font-size: 16px; color: #07111b; width: 170px; line-height: 20px } .user-card-box .g-user-card .card-top .meta { font-size: 12px; line-height: 12px } .user-card-box .g-user-card .card-top .meta a { margin-right: 12px } .user-card-box .g-user-card .card-top .meta b { margin-left: 2px } .user-card-box .g-user-card .user-center-box { margin-top: 16px; margin-bottom: 14px } .user-card-box .g-user-card .user-center-box ul li { position: relative; width: 128px; background: #f8fafc; border-radius: 2px; color: #4d555d; margin: 0 2px 2px 0 } .user-card-box .g-user-card .user-center-box ul li .user-center-icon { position: relative; top: 3px; font-size: 16px; margin-right: 8px } .user-card-box .g-user-card .user-center-box ul li a { width: 100%; height: 36px; line-height: 36px; padding-left: 12px; text-align: left; box-sizing: border-box } .user-card-box .g-user-card .user-center-box ul li:hover { background: #d9dde1 } .user-card-box .g-user-card .user-center-box ul li:hover a { color: #4d555d } .user-card-box .g-user-card .user-center-box ul li i { width: 18px; height: 18px; position: absolute; top: 0; right: 8px; background: url(/static/module/common/img/coupon-icon.png) no-repeat } .user-card-box .g-user-card .user-center-box ul li:nth-child(2n) { margin-right: 0 } .user-card-box .g-user-card .card-history { padding-bottom: 16px; margin-bottom: -1px; border-bottom: 1px solid #edf1f2 } .user-card-box .g-user-card .card-history .history-item { display: block; position: relative; padding-left: 24px; color: #787d82; transition: background-color .2s; line-height: 20px } .user-card-box .g-user-card .card-history .history-item .tit { display: block; margin-bottom: 8px; font-weight: 700 } .user-card-box .g-user-card .card-history .history-item .media-name { display: block; width: 200px } .user-card-box .g-user-card .card-history .history-item .imv2-history { position: absolute; left: 0; top: 2px; font-size: 16px; font-weight: 700 } .user-card-box .g-user-card .card-history .history-item .continue { position: absolute; right: 0; top: 25px; color: #00b43c } .user-card-box .g-user-card .card-history .history-item .continue:hover { color: #00c850 } .user-card-box .g-user-card .card-sets { margin-top: 16px; font-size: 12px; line-height: 12px } .user-card-box .g-user-card .card-sets a { color: #93999f } .user-card-box .g-user-card .card-sets a:hover { color: #4d555d; background: 0 0 } .user-card-box:hover .user-card-item img { border-color: rgba(255,255,255,.6) } .user-card-box.hover .g-user-card { visibility: visible } .addZ-index { z-index: 9999 } #footer { background: #1c1f21; border-top: 1px solid #e2e4e6; font-size: 12px; color: #787d82; padding: 27px 0; min-width: 620px; margin-top: 60px } #footer .waper { width: auto; max-width: 1200px; margin: 0 auto } #footer .footer_intro { padding-left: 40px } #footer p { line-height: 1.7 } .footer_logo { display: none; float: left; background: url(https://static.mukewang.com/static/img/common/footer-sprite.png?t=3) 0 -230px no-repeat; height: 40px; width: 120px; margin: 0 20px } #footer .des { width: 445px } #footer .followus { margin-right: 34px; padding-left: 30px; z-index: 3 } .followus a { float: left; position: relative; width: 32px; height: 32px; background-image: url(https://static.mukewang.com/static/img/common/footer-sprite.png?t=3); background-repeat: no-repeat; margin: 3px 6px 0; opacity: .5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; transition: opacity .2s } #footer .followus a:hover { opacity: 1 } .flw-weixin-box { position: absolute; display: none; width: 170px; height: 220px; left: -69px; bottom: 35px; background: url(https://static.mukewang.com/static/img/common/footer-sprite.png?t=3) no-repeat 0 0; z-index: 3 } .followus .followus-weixin { background-position: 0 -279px } .followus-weixin:hover .flw-weixin-box { display: block } .followus .followus-weibo { background-position: 0 -321px } .followus .followus-qzone { background-position: 0 -363px } .friend-links { line-height: 60px } .friend-links a { display: inline-block; margin-right: 20px } .friend-links a:hover { text-decoration: underline; color: #000 } .friend-links dl { padding: 0 10px } .friend-links dd { float: left; width: 160px } .footer_link ul { overflow: hidden; margin-top: -1px } .footer_link a:active,.footer_link a:link,.footer_link a:visited { color: #c8cdd2 } .footer_link a:hover { color: #fff } #footer .footer_link { margin-bottom: 4px; line-height: 1.8 } #footer .footer_link li { margin-right: 30px; text-align: center; float: left } .verify-box { height: 36px; box-sizing: border-box; position: relative } .verify-box * { box-sizing: border-box } .verify-box input[type=text] { border: 1px solid #b7bbbf; width: 118px; height: 36px; margin-right: 8px; line-height: 36px; padding: 0 10px; float: left } .verify-box .codeimg { cursor: pointer; width: 70px; height: 36px; background-color: #ffefdb; margin-right: 12px; float: left; border: none } .verify-box i.imv2-refresh { cursor: pointer; font-size: 24px; color: #93999f; float: left; line-height: 36px; transition: .3s all linear } .verify-box i.imv2-refresh:hover { transform: rotate(180deg) } .verify-box .errtip { position: absolute; height: 24px; line-height: 24px; box-sizing: border-box; padding: 0 5px; color: #f01414; font-size: 12px; top: 36px; visibility: visible } .elevator { position: fixed; padding: 0 15px; top: 55%; right: 0; margin-top: -140px; z-index: 10; background-color: #fff; box-shadow: -2px 2px 5px 3px rgba(7,17,27,.1) } .elevator a { display: block; width: 26px; padding: 16px 0; font-size: 22px; line-height: 20px; color: #b5b9bc; box-sizing: border-box; text-align: center; border-bottom: 1px solid #edf1f2 } .elevator a:hover { color: #14191e } .elevator a i { font-size: 24px; color: #b5b9bc } .elevator a i:hover { color: #14191e } .elevator a span { display: none; font-size: 12px; color: #f01414; line-height: 14px } .elevator a .elevator-num { background-color: #f01414; color: #fff; border-radius: 50%; text-align: center; font-size: 12px; position: absolute; top: 3px; width: 18px; height: 18px; line-height: 16px; right: -9px } .elevator .elevator-dist i { display: inline-block; width: 18px; height: 20px; background: url(//www.imooc.com/static/img/index/redPacket.png) no-repeat; background-size: 100% 100%; background-position: top center; margin: 2px 0 } .elevator .elevator-app:hover i,.elevator .elevator-dist:hover i,.elevator .elevator-faq:hover i,.elevator .elevator-msg:hover i,.elevator .elevator-top:hover i,.elevator .elevator-weixin:hover i { display: none } .elevator .elevator-app:hover span,.elevator .elevator-dist:hover span,.elevator .elevator-faq:hover span,.elevator .elevator-msg:hover span,.elevator .elevator-top:hover span,.elevator .elevator-weixin:hover span { display: inline-block } .elevator .elevator-app-box { position: absolute; width: 172px; height: 212px; bottom: -10px; right: 52px; -webkit-transition: opacity .25s,transform .3s; -moz-transition: opacity .25s,transform .3s; transition: opacity .25s,transform .3s; opacity: 0; max-width: 0; -webkit-transform: scale(.01); -ms-transform: scale(.01); transform: scale(.01); -webkit-transform-origin: 100% 95%; -ms-transform-origin: 100% 95%; transform-origin: 100% 95%; background: url(https://static.mukewang.com/static/img/common/elevator.png?t=3) no-repeat 0 -220px } .elevator .elevator-app:hover .elevator-app-box { display: block; visibility: visible; opacity: 1; max-width: none; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .elevator .elevator-weixin-box { position: absolute; width: 172px; height: 212px; bottom: -10px; right: 52px; -webkit-transition: opacity .25s,transform .3s; -moz-transition: opacity .25s,transform .3s; transition: opacity .25s,transform .3s; opacity: 0; max-width: 0; -webkit-transform: scale(.01); -ms-transform: scale(.01); transform: scale(.01); -webkit-transform-origin: 100% 95%; -ms-transform-origin: 100% 95%; transform-origin: 100% 95%; background: url(https://static.mukewang.com/static/img/common/elevator.png?t=3) no-repeat 0 0 } .elevator .elevator-weixin:hover .elevator-weixin-box { display: block; visibility: visible; opacity: 1; max-width: none; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .program-nav { padding-right: 10px!important } .star i { position: relative; color: #b5b9bc; font-size: 16px } .star i.on { color: #f90 } @media screen and (max-width: 1200px) { #footer .followus { padding-left:0 } #footer .footer_link li { margin-right: 10px } } body { width: 100%; height: 100%; min-width: 1200px } .lotterycomer { width: 100%; height: 50px; background-image: url(/static/module/common/img/lottery-top-02.png); background-size: cover; background-position: center,center; background-repeat: no-repeat; display: block; cursor: pointer; position: relative; z-index: 9999 } #MEIQIA-BTN-HOLDER { border-radius: 30px; overflow: hidden; bottom: auto!important; top: 32% } #MEIQIA-BTN { width: 128px!important; height: 56px!important; background-image: url(/static/module/common/img/meiqia-icon.gif)!important; background-size: auto 100%!important; background-position: 0!important; background-repeat: no-repeat!important; border: 0!important; border-radius: 28px!important } #MEIQIA-BTN #MEIQIA-BTN-ICON { display: none!important } #MEIQIA-BTN #MEIQIA-BUBBLE { right: 142px!important } @media screen and (max-width: 1366px) { #MEIQIA-BTN-HOLDER { top:213px } } @font-face { font-family: sz; src: url(/static/module/common/szfont/fonts/sz.eot?nqs4vc1); src: url(/static/module/common/szfont/fonts/sz.eot?nqs4vc1#iefix) format('embedded-opentype'),url(/static/module/common/szfont/fonts/sz.ttf?nqs4vc1) format('truetype'),url(/static/module/common/szfont/fonts/sz.woff?nqs4vc1) format('woff'),url(/static/module/common/szfont/fonts/sz.svg?nqs4vc1#sz) format('svg'); font-weight: 400; font-style: normal } [class*=" sz-"],[class^=sz-] { font-family: sz!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .sz-tips:before { content: "\e91e" } .sz-help_outline:before { content: "\e91c" } .sz-class:before { content: "\e91b" } .sz-score_shop:before { content: "\e918" } .sz-feedback:before { content: "\e917" } .sz-weixigzh:before { content: "\e919" } .sz-arrow-up:before { content: "\e91a" } .sz-receipt:before { content: "\e914" } .sz-shopping-cart:before { content: "\e915" } .sz-add-shopping-cart:before { content: "\e916" } .sz-hourglass_empty:before { content: "\e913" } .sz-play:before { content: "\e912" } .sz-add_question:before { content: "\e90a" } .sz-webide:before { content: "\e90b" } .sz-continue:before { content: "\e90c" } .sz-error:before { content: "\e600" } .sz-done:before { content: "\e601" } .sz-close:before { content: "\e602" } .sz-help:before { content: "\e603" } .sz-event:before { content: "\e604" } .sz-answer:before { content: "\e605" } .sz-thumb:before { content: "\e606" } .sz-thumb-o:before { content: "\e607" } .sz-imooc:before { content: "\e608" } .sz-weibo:before { content: "\e609" } .sz-weixin:before { content: "\e60a" } .sz-qq:before { content: "\e60b" } .sz-delete:before { content: "\e60c" } .sz-edit:before { content: "\e60d" } .sz-folder:before { content: "\e60e" } .sz-code:before { content: "\e60f" } .sz-image:before { content: "\e62d" } .sz-unknown:before { content: "\e62e" } .sz-antenna:before { content: "\e610" } .sz-cloud-on:before { content: "\e611" } .sz-cloud-off:before { content: "\e612" } .sz-vpn-lock:before { content: "\e613" } .sz-check:before { content: "\e614" } .sz-check-o:before { content: "\e615" } .sz-radio-on:before { content: "\e616" } .sz-radio-off:before { content: "\e617" } .sz-star:before { content: "\e618" } .sz-star-h:before { content: "\e619" } .sz-star-o:before { content: "\e61a" } .sz-video-c:before { content: "\e61b" } .sz-practice-c:before { content: "\e61c" } .sz-code-c:before { content: "\e61d" } .sz-chapter:before { content: "\e61e" } .sz-add:before { content: "\e61f" } .sz-remove:before { content: "\e620" } .sz-empty:before { content: "\e621" } .sz-half:before { content: "\e622" } .sz-full:before { content: "\e623" } .sz-refresh:before { content: "\e624" } .sz-list-o:before { content: "\e628" } .sz-list-c:before { content: "\e629" } .sz-arrow-r:before { content: "\e625" } .sz-arrow-d:before { content: "\e626" } .sz-close-s:before { content: "\e62a" } .sz-close-h:before { content: "\e627" } .sz-unsave:before { content: "\e62b" } .sz-loading:before { content: "\e62c" } .sz-course:before { content: "\e62f" } .sz-project:before { content: "\e630" } .sz-student:before { content: "\e631" } .sz-evaluation:before { content: "\e632" } .sz-top:before { content: "\e633" } .sz-back:before { content: "\e634" } .sz-forward:before { content: "\e91d" } .sz-list:before { content: "\e635" } .sz-question:before { content: "\e636" } .sz-pen:before { content: "\e637" } .sz-message:before { content: "\e638" } .sz-clock:before { content: "\e639" } .sz-replay:before { content: "\e63a" } .sz-weixin-y:before { content: "\e63b" } .sz-qq-y:before { content: "\e63c" } .sz-weibo-y:before { content: "\e63d" } .sz-show-pw:before { content: "\e63e" } .sz-up:before { content: "\e800" } .sz-arrow-drop-right:before { content: "\e900" } .sz-done2:before { content: "\e901" } .sz-terminal:before { content: "\e902" } .sz-qr:before { content: "\e903" } .sz-settings:before { content: "\e904" } .sz-arrow_drop_down:before { content: "\e905" } .sz-content-copy:before { content: "\e906" } .sz-schedule:before { content: "\e907" } .sz-run:before { content: "\e908" } .sz-keyboard-control:before { content: "\e909" } .sz-group:before { content: "\e90d" } .sz-mail:before { content: "\e90e" } .sz-notifi:before { content: "\e90f" } .sz-search:before { content: "\e910" } .sz-appdownload:before { content: "\e911" } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .clearfix:after { content: '\0020'; display: block; height: 0; clear: both; visibility: hidden } .backgroundFixed { overflow: hidden } * { margin: 0; padding: 0; text-decoration: none; font-weight: 400; font-family: "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif } @font-face { font-family: DeliciousRoman; src: url(/static/module/sale2/less/DINCond-Bold.otf); font-weight: 400; font-style: normal } .section1 { height: 680px; background: #fff } .section1 .wrap { padding-top: 72px } .section1 .wrap .title-img { height: 32px; margin-bottom: 16px; text-align: center } .section1 .wrap .title-img img { height: 100%; width: auto } .section1 .wrap h5 { font-size: 16px; font-weight: 400; color: #383d42; text-align: center; line-height: 24px; margin-bottom: 48px } .section1 .wrap .con { width: 1154px; margin: 0 auto; position: relative } .section1 .wrap .con .nano-slider { background: rgba(28,31,33,.2); border-radius: 4px } .section1 .wrap .con .nano-content { padding-bottom: 30px } .section1 .wrap .con .list { width: 520px; height: 400px; background: #f3f5f6; border-radius: 12px; padding: 32px 0; box-sizing: border-box; position: relative } .section1 .wrap .con .list ul { width: 456px; margin: 0 auto } .section1 .wrap .con .list ul li { width: 456px; margin-bottom: 16px } .section1 .wrap .con .list ul li:last-child { margin-bottom: 0 } .section1 .wrap .con .list ul li:last-child .text { border: none } .section1 .wrap .con .list ul li .top { margin-bottom: 12px } .section1 .wrap .con .list ul li .top .head { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; margin-right: 8px } .section1 .wrap .con .list ul li .top .name h3 { display: inline-block; vertical-align: middle; font-size: 14px; color: #1c1f21; line-height: 32px; margin-bottom: 2px; font-weight: 700 } .section1 .wrap .con .list ul li .top .stars { display: inline-block; vertical-align: middle; line-height: 32px; margin-left: 24px } .section1 .wrap .con .list ul li .top .stars div { margin-right: 2px } .section1 .wrap .con .list ul li .top .stars i { font-size: 12px; color: rgba(147,153,159,.4); text-align: center; line-height: 12px } .section1 .wrap .con .list ul li .top .stars i.on { color: #f90 } .section1 .wrap .con .list ul li .top .stars img { -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px) } .section1 .wrap .con .list ul li .top .stars span { font-size: 12px; color: #545c63; line-height: 32px; margin-left: 6px } .section1 .wrap .con .list ul li .text { font-size: 12px; color: #1c1f21; line-height: 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(28,31,33,.1) } .section1 .wrap .con .list .leftIcon { position: absolute; width: 102px; height: 102px; padding-top: 25px; box-sizing: border-box; left: 0; bottom: -36px; left: -30px; background-position: center; background-size: cover; background-repeat: no-repeat; font-weight: 700; font-size: 12px; color: #fff; text-align: center; line-height: 14px } .section1 .wrap .con .list .leftIcon span { font-size: 24px; color: #fff; text-align: center; line-height: 24px; font-weight: 700; padding-top: 2px; display: block; font-family: DeliciousRoman } .section1 .wrap .con .item-box { width: 578px; padding-top: 28px } .section1 .wrap .con .item-box .item { width: 267px; margin-bottom: 82px; margin-right: 40px } .section1 .wrap .con .item-box .item:nth-child(2n) { margin-right: 0 } .section1 .wrap .con .item-box .item .title { padding-left: 40px; position: relative; margin-bottom: 16px; font-size: 20px; color: #069eeb; text-align: left; line-height: 32px; font-weight: 700 } .section1 .wrap .con .item-box .item .title .img { position: absolute; left: 0; top: 0; width: 32px; height: 32px; background-repeat: no-repeat; background-size: cover; background-position: center } .section1 .wrap .con .item-box .item p { font-size: 14px; color: #1c1f21; text-align: left; line-height: 28px } .section2 { background: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative } .section2 .wrap { padding-top: 72px } .section2 .wrap .title-img { height: 32px; margin-bottom: 16px; text-align: center } .section2 .wrap .title-img img { height: 100%; width: auto } .section2 .wrap h5 { font-size: 16px; font-weight: 400; color: #fff; text-align: center; line-height: 16px; margin-bottom: 48px } .section2 .wrap .con { width: 1154px; margin: 0 auto } .section2 .wrap .con .item-box { width: 100% } .section2 .wrap .con .item-box .item { margin-right: 64px } .section2 .wrap .con .item-box .item:last-child { margin-right: 0 } .section2 .wrap .con .item-box .item .img { margin: 0 auto; margin-bottom: 16px; width: 112px; height: 128px; background-repeat: no-repeat; background-size: cover; background-position: center } .section2 .wrap .con .item-box .item .title { margin-bottom: 12px; font-size: 20px; color: #fff; text-align: center; line-height: 24px } .section2 .wrap .con .item-box .item .text { font-size: 14px; color: #fff; text-align: center; line-height: 24px } .section2 .wrap .con .leftIcon { position: absolute } .section2 .wrap .time-con { position: absolute; bottom: 172px; width: 1154px; left: 50% } .section2 .wrap .time-con .item { margin-right: 64px } .section2 .wrap .time-con .item:last-child { margin-right: 0 } .section2 .wrap .time-con .item .line { width: 40px; height: 4px; border-radius: 2px; margin: 0 auto; margin-bottom: 18px } .section2 .wrap .time-con .item .text { font-size: 14px; color: #fff; text-align: center; line-height: 14px; font-weight: 700 } .section2 .wrap .num-con { position: absolute; bottom: 172px; width: 1024px; height: 176px; left: 50%; margin-left: -512px; bottom: -88px; padding-left: 320px; padding-top: 48px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(28,31,33,.06),0 4px 8px 0 rgba(28,31,33,.06),0 8px 16px 0 rgba(28,31,33,.06),0 12px 24px 0 rgba(28,31,33,.06),0 16px 32px 0 rgba(28,31,33,.06) } .section2 .wrap .num-con .line { margin-right: 36px; margin-left: 36px; font-size: 32px; text-align: center; line-height: 76px; height: 76px } .section2 .wrap .num-con .item .title { font-size: 48px; letter-spacing: -2px; text-align: center; line-height: 48px; margin-bottom: 8px; font-family: DeliciousRoman } .section2 .wrap .num-con .item .text { font-size: 20px; text-align: center; line-height: 20px; font-weight: 700 } .section3 { background: #fff; padding: 140px 0 72px 0 } .section3 .wrap .title-img { height: 24px; margin-bottom: 12px; text-align: center } .section3 .wrap .title-img img { height: 100%; width: auto } .section3 .wrap h5 { font-size: 14px; font-weight: 400; color: #383d42; text-align: center; line-height: 24px; margin-bottom: 32px } .section3 .wrap .con { width: 876px; margin: 0 auto } .section3 .wrap .con .item-box { width: 100% } .section3 .wrap .con .item-box .item { width: 276px; margin-bottom: 24px; margin-right: 24px; background: #f3f5f6; border-radius: 16px; padding: 24px 40px; box-sizing: border-box } .section3 .wrap .con .item-box .item:nth-child(3n) { margin-right: 0 } .section3 .wrap .con .item-box .item .title { margin-bottom: 12px; font-size: 16px; text-align: center; line-height: 16px; font-weight: 700 } .section3 .wrap .con .item-box .item p { font-size: 14px; color: #1c1f21; text-align: center; line-height: 22px } .section3 .wrap .con .item2-box { width: 776px; margin: 0 auto; margin-top: 10px; margin-bottom: 50px } .section3 .wrap .con .item2-box .item { margin-right: 71px } .section3 .wrap .con .item2-box .item:last-child { margin-right: 0 } .section3 .wrap .con .item2-box .item .img { width: 44px; height: 44px; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(/static/module/sale2/img/s3_note.png); margin-right: 12px } .section3 .wrap .con .item2-box .item p { font-size: 14px; color: #1c1f21; text-align: left; line-height: 20px; font-weight: 700 } .section3 .wrap .con .learn { border-radius: 24px; width: 160px; height: 48px; line-height: 48px; text-align: center; font-size: 16px; color: #fff; font-weight: 700; margin: 0 auto; cursor: pointer; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .section3 .wrap .con .learn.java:hover { background-color: #ff0059!important } .section3 .wrap .con .learn.android:hover { background-color: #00b75a!important } .section3 .wrap .con .learn.fe:hover { background-color: #ff5d00!important } .section4 { background-size: cover; background-repeat: no-repeat; background-position: center; padding: 72px 0 } .section4 .wrap .title-img { height: 32px; margin-bottom: 64px; text-align: center } .section4 .wrap .title-img img { height: 100%; width: auto } .section4 .wrap .con { text-align: center } .section4 .wrap .con img { width: auto; margin-bottom: 48px } .section4 .wrap .con .learn { border-radius: 24px; width: 160px; height: 48px; line-height: 48px; text-align: center; font-size: 16px; color: #fff; font-weight: 700; margin: 0 auto; cursor: pointer; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .section4 .wrap .con .learn.java:hover { background-color: #ff0059!important } .section4 .wrap .con .learn.android:hover { background-color: #00b75a!important } .section4 .wrap .con .learn.php:hover { background-color: #069eeb!important } .section4 .wrap .con .learn.fe:hover { background-color: #ff5d00!important } .section4 .wrap .con .learn.python:hover { background-color: #08bcd0!important } .section5 { background-color: #f3f5f6; background-repeat: no-repeat; padding-top: 72px; box-sizing: border-box } .section5.sec_java { height: 1618px; background-size: 100% 890px; background-image: linear-gradient(0deg,#687ea2 0,#0b1f48 98%) } .section5.sec_android { height: 1610px; background-size: 100% 890px; background-image: linear-gradient(0deg,#6c6d86 0,#2d2840 100%) } .section5.sec_php { height: 1668px; background-size: 100% 890px; background-image: linear-gradient(0deg,#687ea2 0,#0b1f48 98%) } .section5.sec_fe { height: 1558px; background-size: 100% 890px; background-image: linear-gradient(0deg,#6c7986 0,#283440 100%) } .section5.sec_python { height: 1668px; background-size: 100% 890px; background-image: linear-gradient(0deg,#6c7986 0,#283440 100%) } .section5 .wrap { padding-bottom: 200px } .section5 .wrap .title-img { height: 32px; margin-bottom: 48px; text-align: center } .section5 .wrap .title-img img { height: 100%; width: auto } .section5 .wrap .con { text-align: center; line-height: 0 } .section5 .wrap .con img { height: 552px; width: auto; margin-bottom: 72px } .section5 .swiper-con { width: 1152px; margin: 0 auto; z-index: 3; position: relative; background: #fff; box-shadow: 0 2px 4px 0 rgba(28,31,33,.06),0 4px 8px 0 rgba(28,31,33,.06),0 8px 16px 0 rgba(28,31,33,.06),0 12px 24px 0 rgba(28,31,33,.06),0 16px 32px 0 rgba(28,31,33,.06); border-radius: 24px; padding-top: 66px; padding-left: 72px; padding-right: 52px; box-sizing: border-box } .section5 .swiper-con .title-img { height: 32px; margin-bottom: 28px; text-align: center } .section5 .swiper-con .title-img img { height: 100%; width: auto } .section5 .swiper-con .item .title-img { width: 100%; height: 32px; margin-bottom: 28px; text-align: center } .section5 .swiper-con .item .title-img img { height: 100%; width: auto; margin-bottom: 0 } .section5 .swiper-con .item .text-con { padding-top: 16px; max-width: 410px } .section5 .swiper-con .item .text-con .title { font-size: 24px; text-align: left; line-height: 24px; margin-bottom: 16px; font-weight: 700 } .section5 .swiper-con .item .text-con ul { width: 400px; margin-bottom: 22px } .section5 .swiper-con .item .text-con ul li { font-weight: 700; padding: 20px 10px; box-sizing: border-box; font-size: 14px; text-align: center; line-height: 18px; border-radius: 8px; margin-right: 8px; margin-bottom: 9px } .section5 .swiper-con .item .text-con ul li:nth-child(3n) { margin-right: 0 } .section5 .swiper-con .item .text-con .desc { font-size: 16px; color: #1c1f21; text-align: left; line-height: 24px; font-weight: 700 } .section5 .swiper-con .item .text-con .info { font-size: 14px; color: #545c63; text-align: left; line-height: 24px; margin-top: 8px; margin-bottom: 32px } .section5 .swiper-con .item .text-con .info:last-child { margin-bottom: 0 } .section5 .swiper-con .item .text-con .info span { font-weight: 700 } .section5 .swiper-con .item .img-con { width: 600px; margin-left: 16px } .section5 .swiper-con .item .img-con .img { width: 100%; margin-bottom: 32px } .section5 .swiper-con .item .img-con .img img { width: auto; height: 100%; margin-bottom: 0 } .section5 .swiper-con .item .img-con .ma-con { padding-left: 20px } .section5 .swiper-con .item .img-con .ma-con .ma { margin-right: 24px; line-height: 1 } .section5 .swiper-con .item .img-con .ma-con .ma img { width: 64px; height: 64px; margin-bottom: 0 } .section5 .swiper-con .item .img-con .ma-con .ma p { margin-top: 4px; font-size: 12px; color: #9199a1; line-height: 12px; text-align: center } .section5 .swiper-con .item .img-con .ma-con .text { padding-top: 12px; font-weight: 700; font-size: 14px; color: #1c1f21; line-height: 20px; text-align: left } .section6 { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; padding-top: 72px; box-sizing: border-box } .section6 .wrap .title-img { height: 32px; margin-bottom: 16px; text-align: center } .section6 .wrap .title-img img { height: 100%; width: auto } .section6 .wrap h5 { font-size: 16px; font-weight: 400; color: #383d42; text-align: center; line-height: 16px; margin-bottom: 48px } .section6 .wrap .con { width: 1104px; margin: 0 auto; text-align: center } .section6 .wrap .con .item1-box { width: 100% } .section6 .wrap .con .item1-box .item { margin-bottom: 48px; margin-right: 56px } .section6 .wrap .con .item1-box .item:nth-child(2n) { margin-right: 0 } .section6 .wrap .con .item1-box .item .img { margin-right: 24px; width: 180px; height: 206px; background-repeat: no-repeat; background-size: cover; background-position: center } .section6 .wrap .con .item1-box .item .text-con { height: 206px; box-sizing: border-box; position: relative; padding-top: 8px } .section6 .wrap .con .item1-box .item .text-con .title { font-size: 16px; text-align: left; line-height: 16px; margin-bottom: 12px } .section6 .wrap .con .item1-box .item .text-con ul { width: 320px } .section6 .wrap .con .item1-box .item .text-con ul li { margin-bottom: 8px } .section6 .wrap .con .item1-box .item .text-con ul li:last-child { margin-bottom: 0 } .section6 .wrap .con .item1-box .item .text-con ul li .icon { margin-right: 6px; width: 14px; height: 22px; background-repeat: no-repeat; background-size: cover; background-position: center } .section6 .wrap .con .item1-box .item .text-con ul li .text { font-weight: 700; font-size: 14px; color: #1c1f21; text-align: left; line-height: 22px; width: 300px } .section6 .wrap .con .item1-box .item .text-con .gosee { border-radius: 20px; display: inline-block; width: 112px; height: 32px; position: absolute; bottom: 8px; left: 0; font-size: 12px; text-align: center; line-height: 32px; font-weight: 700 } .section6 .wrap .con .item2-box { width: 100%; margin-bottom: 98px } .section6 .wrap .con .item2-box .item { margin-right: 80px } .section6 .wrap .con .item2-box .item:last-child { margin-right: 0 } .section6 .wrap .con .item2-box .item .img { margin: 0 auto; margin-bottom: 24px; width: 180px; height: 206px; background-repeat: no-repeat; background-size: cover; background-position: center } .section6 .wrap .con .item2-box .item .text-con { box-sizing: border-box; position: relative } .section6 .wrap .con .item2-box .item .text-con .title { margin-bottom: 12px; font-size: 16px; text-align: center; line-height: 16px } .section6 .wrap .con .item2-box .item .text-con ul { line-height: 0; width: 320px } .section6 .wrap .con .item2-box .item .text-con ul li { display: inline-block; margin-bottom: 8px } .section6 .wrap .con .item2-box .item .text-con ul li:last-child { margin-bottom: 0 } .section6 .wrap .con .item2-box .item .text-con ul li .icon { margin-right: 6px; width: 14px; height: 22px; background-repeat: no-repeat; background-size: cover; background-position: center } .section6 .wrap .con .item2-box .item .text-con ul li .text { font-weight: 700; font-size: 14px; color: #1c1f21; text-align: center; line-height: 22px } .section6 .wrap .con .item2-box .item .text-con .gosee { border-radius: 20px; display: inline-block; width: 112px; height: 32px; position: absolute; margin-left: -56px; left: 50%; font-size: 12px; text-align: center; line-height: 32px; font-weight: 700 } .section6 .wrap .con .gostudy { margin: 0 auto; border-radius: 24px; display: inline-block; width: 160px; height: 48px; font-size: 16px; color: #fff; text-align: center; line-height: 48px; font-weight: 700; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .section6 .wrap .con .gostudy.btn-java { background: rgba(255,0,89,.8) } .section6 .wrap .con .gostudy.btn-java:hover { background-color: #069eeb } .section6 .wrap .con .gostudy.btn-android { background: rgba(0,183,90,.8) } .section6 .wrap .con .gostudy.btn-android:hover { background-color: #00b75a } .section6 .wrap .con .gostudy.btn-php { background: rgba(6,158,235,.8) } .section6 .wrap .con .gostudy.btn-php:hover { background-color: #069eeb } .section6 .wrap .con .gostudy.btn-fe { background: rgba(255,93,0,.8) } .section6 .wrap .con .gostudy.btn-fe:hover { background-color: #ff5d00 } .section6 .wrap .con .gostudy.btn-python { background: rgba(8,188,208,.8) } .section6 .wrap .con .gostudy.btn-python:hover { background-color: #08bcd0 } .section7 { background: #fff; box-sizing: border-box; padding-top: 72px; text-align: center } .section7 .wrap1 .title-img { height: 32px; margin-bottom: 16px; text-align: center } .section7 .wrap1 .title-img img { height: 100%; width: auto } .section7 .wrap1 .smallT { font-size: 16px; color: #383d42; line-height: 24px; margin-bottom: 48px } .section7 .wrap1 .item-box { margin: 0 auto; width: 1152px } .section7 .wrap1 .item-box .item { width: 368px; background: rgba(28,31,33,.03); border-radius: 16px; padding-top: 28px; padding-bottom: 32px; margin-right: 24px } .section7 .wrap1 .item-box .item:last-child { margin-right: 0 } .section7 .wrap1 .item-box .item .title { width: 304px; margin: 0 auto; padding-bottom: 24px; border-bottom: 1px solid #545c63; font-size: 24px; color: #545c63; line-height: 32px; font-weight: 700 } .section7 .wrap1 .item-box .item span { color: #545c63 } .section7 .wrap1 .item-box .item:last-child { background: rgba(148,71,235,.06) } .section7 .wrap1 .item-box .item:last-child .title { color: #9447eb; border-bottom: 1px solid #9447eb } .section7 .wrap1 .item-box .item:last-child span { color: #1c1f21; font-weight: 700 } .section7 .wrap1 .item-box .item ul { width: 304px; margin: 0 auto } .section7 .wrap1 .item-box .item ul li { padding-bottom: 16px; padding-top: 16px; border-bottom: 1px solid rgba(28,31,33,.1) } .section7 .wrap1 .item-box .item ul li .img_d,.section7 .wrap1 .item-box .item ul li .img_up { width: 24px; height: 24px; margin-right: 12px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center } .section7 .wrap1 .item-box .item ul li .img_d { background-image: url(/static/module/index/img/web_part3-d@2x.png) } .section7 .wrap1 .item-box .item ul li span { font-size: 16px; color: #545c63; line-height: 24px } .section7 .wrap2 { padding-bottom: 80px } .section7 .wrap2 .title-img { height: 32px; margin-bottom: 56px; text-align: center } .section7 .wrap2 .title-img img { height: 100%; width: auto } .section7 .wrap2 .item-box { margin: 0 auto; margin-bottom: 36px; width: 1088px } .section7 .wrap2 .item-box:last-child { margin-bottom: 0 } .section7 .wrap2 .item-box .item { width: 227px; margin-right: 60px } .section7 .wrap2 .item-box .item:last-child { margin-right: 0 } .section7 .wrap2 .item-box .item .img { width: 72px; height: 72px; margin: 0 auto; background-size: 100% 100%; background-repeat: no-repeat; background-position: center } .section7 .wrap2 .item-box .item .title { margin: 16px auto 8px auto; font-weight: 700; font-size: 16px; line-height: 24px } .section7 .wrap2 .item-box .item p { font-size: 14px; color: #1c1f21; line-height: 22px } .section7 .wrap3 { padding-top: 72px; padding-bottom: 50px; background: #f3f5f6 } .section7 .wrap3 .title-img { height: 32px; margin-bottom: 48px; text-align: center } .section7 .wrap3 .title-img img { height: 100%; width: auto } .section7 .wrap3 .item-box { width: 1152px; margin: 0 auto } .section7 .wrap3 .item-box .item { background: #fff; border-radius: 16px; width: 368px; height: 178px; padding-top: 32px; padding-left: 32px; box-sizing: border-box; margin-right: 24px } .section7 .wrap3 .item-box .item:last-child { margin-right: 0 } .section7 .wrap3 .item-box .item .title { font-weight: 700; font-size: 24px; line-height: 32px; margin-bottom: 24px; text-align: left } .section7 .wrap3 .item-box .item p { font-size: 16px; color: #1c1f21; line-height: 24px; text-align: left } .section7 .line { width: 1152px; height: 1px; background: rgba(28,31,33,.1); margin: 0 auto; margin-bottom: 72px; margin-top: 72px } .section7 .golearn { width: 160px; height: 48px; display: inline-block; text-align: center; line-height: 48px; cursor: pointer; border-radius: 24px; font-size: 16px; color: #fff; font-weight: 700; margin-top: 48px; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .section7 .golearn.go_java { background: rgba(255,0,89,.8) } .section7 .golearn.go_java:hover { background-color: #ff5d00 } .section7 .golearn.go_android { background: rgba(0,183,90,.8) } .section7 .golearn.go_android:hover { background-color: #00b75a } .section7 .golearn.go_php { background: rgba(6,158,235,.8) } .section7 .golearn.go_php:hover { background-color: #ff5d00 } .section7 .golearn.go_fe { background: rgba(255,93,0,.8) } .section7 .golearn.go_fe:hover { background-color: #ff5d00 } .section7 .golearn.go_python { background: rgba(8,188,208,.8) } .section7 .golearn.go_python:hover { background-color: #08bcd0 } .preview-con { position: fixed; top: 0; left: 0; z-index: 12; width: 100%; height: 100%; background: rgba(28,31,33,.6) } .preview-con .close { position: fixed; top: 32px; right: 32px; font-size: 32px; color: #fff; text-align: center; line-height: 32px; cursor: pointer; z-index: 999 } .preview-con .btn { width: 72px; height: 72px; position: fixed; border-radius: 50%; background: rgba(28,31,33,.2); font-size: 32px; color: #fff; text-align: center; line-height: 72px; z-index: 9999; cursor: pointer; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .preview-con .btn i { line-height: 72px } .preview-con .btn:hover { background-color: rgba(28,31,33,.4) } .preview-con .btn.noMore { cursor: default; color: rgba(255,255,255,.2); background: rgba(28,31,33,.1) } .preview-con .btn.noMore:hover { background: rgba(28,31,33,.1) } .preview-con .btn.js-btn-prev { left: 12px; top: 50%; margin-top: -36px } .preview-con .btn.js-btn-next { right: 12px; top: 50%; margin-top: -36px } .preview-con .wrap { overflow: auto; height: 996px; position: relative; text-align: center } .preview-con .wrap img { width: 100%; height: auto; position: relative; top: 50%; transform: translateY(-50%) } .preview-con .wrap.big { box-shadow: 0 2px 4px 0 rgba(28,31,33,.1),0 4px 8px 0 rgba(28,31,33,.1),0 8px 16px 0 rgba(28,31,33,.1),0 12px 24px 0 rgba(28,31,33,.1),0 16px 32px 0 rgba(28,31,33,.1) } .preview-con .wrap.big img { width: 800px } .preview-con .wrap.sm { box-shadow: 0 2px 4px 0 rgba(28,31,33,.1),0 4px 8px 0 rgba(28,31,33,.1),0 8px 16px 0 rgba(28,31,33,.1),0 12px 24px 0 rgba(28,31,33,.1),0 16px 32px 0 rgba(28,31,33,.1) } .preview-con .wrap.sm img { width: 375px } .python1 { height: 648px; background: #fff; position: relative } .python1 strong { font-weight: 800 } .python1 .wrap { padding-top: 72px } .python1 .wrap .title-img { height: 32px; margin-bottom: 16px; text-align: center } .python1 .wrap .title-img img { height: 100%; width: auto } .python1 .wrap h5 { font-size: 16px; font-weight: 400; color: #383d42; text-align: center; line-height: 24px; margin-bottom: 48px } .python1 .wrap .con { width: 1040px; margin: 0 auto } .python1 .wrap .con .item-box .item { width: 320px; margin-right: 40px } .python1 .wrap .con .item-box .item:last-child { margin-right: 0 } .python1 .wrap .con .item-box .item .img { width: 108px; height: 108px; margin: 0 auto; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 8px } .python1 .wrap .con .item-box .item .title { margin-bottom: 16px; font-size: 20px; color: #1c1f21; text-align: center; line-height: 32px; font-weight: 700 } .python1 .wrap .con .item-box .item p { font-size: 14px; color: #1c1f21; text-align: center; line-height: 28px } .python1 .info-box { position: absolute; top: 548px; left: 50%; margin-left: -512px; width: 1024px; height: 610px; background: #fff; box-shadow: 0 2px 4px 0 rgba(28,31,33,.06),0 4px 8px 0 rgba(28,31,33,.06),0 8px 16px 0 rgba(28,31,33,.06),0 12px 24px 0 rgba(28,31,33,.06),0 16px 32px 0 rgba(28,31,33,.06); border-radius: 24px; padding-top: 72px; box-sizing: border-box } .python1 .info-box .title-img { height: 32px; margin-bottom: 16px; text-align: center } .python1 .info-box .title-img img { height: 100%; width: auto } .python1 .info-box h5 { font-size: 16px; font-weight: 400; color: #383d42; text-align: center; line-height: 24px; margin-bottom: 40px } .python1 .info-box ul { width: 864px; margin: 0 auto; margin-top: 8px } .python1 .info-box ul li { width: 280px; height: 102px; background: rgba(8,188,208,.1); border-radius: 8px; margin-right: 12px; padding-top: 32px; box-sizing: border-box; margin-bottom: 12px } .python1 .info-box ul li:nth-child(3n) { margin-right: 0 } .python1 .info-box ul li div { font-size: 16px; color: #099fb0; text-align: center; line-height: 16px; font-weight: 700; margin-bottom: 8px } .python1 .info-box ul li p { font-weight: 700; font-size: 14px; color: #1c1f21; text-align: center; line-height: 14px } .python1 .info-box div { font-size: 12px; color: #9199a1; line-height: 12px; text-align: center } .python2 { height: 976px; background: #f3f5f6 } .python2 .wrap { padding-top: 582px } .python2 .wrap .title-img { height: 32px; margin-bottom: 16px; text-align: center } .python2 .wrap .title-img img { height: 100%; width: auto } .python2 .wrap h5 { font-size: 16px; font-weight: 400; color: #383d42; text-align: center; line-height: 24px; margin-bottom: 48px } .python2 .wrap .con { width: 988px; margin: 0 auto } .python2 .wrap .con .item-box .item { width: 300px; margin-right: 44px } .python2 .wrap .con .item-box .item:last-child { margin-right: 0 } .python2 .wrap .con .item-box .item .title { padding-left: 40px; position: relative; margin-bottom: 16px; font-size: 20px; color: #099fb0; text-align: left; line-height: 32px; font-weight: 700 } .python2 .wrap .con .item-box .item .title .img { position: absolute; left: 0; top: 0; width: 32px; height: 32px; background-repeat: no-repeat; background-size: cover; background-position: center } .python2 .wrap .con .item-box .item p { font-size: 14px; color: #1c1f21; text-align: left; line-height: 28px } #footer { margin-top: 0 } .swiper-button-prev { background: #fff; box-shadow: 0 4px 8px 0 rgba(28,31,33,.1); width: 48px!important; height: 48px!important; border-radius: 50%; text-align: center; background-image: none!important; left: -25px!important } .swiper-button-prev i { font-size: 32px; color: #1c1f21; line-height: 48px } .swiper-button-next { background: #fff; box-shadow: 0 4px 8px 0 rgba(28,31,33,.1); width: 48px!important; height: 48px!important; border-radius: 50%; text-align: center; background-image: none!important; right: -25px!important } .swiper-button-next i { font-size: 32px; color: #1c1f21; line-height: 48px } .swiper-pagination { z-index: 2!important; width: 1028px!important; margin-top: 10px!important; bottom: 48px; left: 46px } .swiper-pagination .swiper-pagination-bullet { width: 12px!important; height: 12px!important; margin: 0 8px!important; border-radius: 6px!important } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #ff5d00!important; border: none!important; width: 36px!important; height: 12px!important } .sec_python .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #08bcd0!important } @font-face { font-family: sz; src: url(/static/module/common/szfont/fonts/sz.eot?nqs4vc1); src: url(/static/module/common/szfont/fonts/sz.eot?nqs4vc1#iefix) format('embedded-opentype'),url(/static/module/common/szfont/fonts/sz.ttf?nqs4vc1) format('truetype'),url(/static/module/common/szfont/fonts/sz.woff?nqs4vc1) format('woff'),url(/static/module/common/szfont/fonts/sz.svg?nqs4vc1#sz) format('svg'); font-weight: 400; font-style: normal } [class*=" sz-"],[class^=sz-] { font-family: sz!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .sz-tips:before { content: "\e91e" } .sz-help_outline:before { content: "\e91c" } .sz-class:before { content: "\e91b" } .sz-score_shop:before { content: "\e918" } .sz-feedback:before { content: "\e917" } .sz-weixigzh:before { content: "\e919" } .sz-arrow-up:before { content: "\e91a" } .sz-receipt:before { content: "\e914" } .sz-shopping-cart:before { content: "\e915" } .sz-add-shopping-cart:before { content: "\e916" } .sz-hourglass_empty:before { content: "\e913" } .sz-play:before { content: "\e912" } .sz-add_question:before { content: "\e90a" } .sz-webide:before { content: "\e90b" } .sz-continue:before { content: "\e90c" } .sz-error:before { content: "\e600" } .sz-done:before { content: "\e601" } .sz-close:before { content: "\e602" } .sz-help:before { content: "\e603" } .sz-event:before { content: "\e604" } .sz-answer:before { content: "\e605" } .sz-thumb:before { content: "\e606" } .sz-thumb-o:before { content: "\e607" } .sz-imooc:before { content: "\e608" } .sz-weibo:before { content: "\e609" } .sz-weixin:before { content: "\e60a" } .sz-qq:before { content: "\e60b" } .sz-delete:before { content: "\e60c" } .sz-edit:before { content: "\e60d" } .sz-folder:before { content: "\e60e" } .sz-code:before { content: "\e60f" } .sz-image:before { content: "\e62d" } .sz-unknown:before { content: "\e62e" } .sz-antenna:before { content: "\e610" } .sz-cloud-on:before { content: "\e611" } .sz-cloud-off:before { content: "\e612" } .sz-vpn-lock:before { content: "\e613" } .sz-check:before { content: "\e614" } .sz-check-o:before { content: "\e615" } .sz-radio-on:before { content: "\e616" } .sz-radio-off:before { content: "\e617" } .sz-star:before { content: "\e618" } .sz-star-h:before { content: "\e619" } .sz-star-o:before { content: "\e61a" } .sz-video-c:before { content: "\e61b" } .sz-practice-c:before { content: "\e61c" } .sz-code-c:before { content: "\e61d" } .sz-chapter:before { content: "\e61e" } .sz-add:before { content: "\e61f" } .sz-remove:before { content: "\e620" } .sz-empty:before { content: "\e621" } .sz-half:before { content: "\e622" } .sz-full:before { content: "\e623" } .sz-refresh:before { content: "\e624" } .sz-list-o:before { content: "\e628" } .sz-list-c:before { content: "\e629" } .sz-arrow-r:before { content: "\e625" } .sz-arrow-d:before { content: "\e626" } .sz-close-s:before { content: "\e62a" } .sz-close-h:before { content: "\e627" } .sz-unsave:before { content: "\e62b" } .sz-loading:before { content: "\e62c" } .sz-course:before { content: "\e62f" } .sz-project:before { content: "\e630" } .sz-student:before { content: "\e631" } .sz-evaluation:before { content: "\e632" } .sz-top:before { content: "\e633" } .sz-back:before { content: "\e634" } .sz-forward:before { content: "\e91d" } .sz-list:before { content: "\e635" } .sz-question:before { content: "\e636" } .sz-pen:before { content: "\e637" } .sz-message:before { content: "\e638" } .sz-clock:before { content: "\e639" } .sz-replay:before { content: "\e63a" } .sz-weixin-y:before { content: "\e63b" } .sz-qq-y:before { content: "\e63c" } .sz-weibo-y:before { content: "\e63d" } .sz-show-pw:before { content: "\e63e" } .sz-up:before { content: "\e800" } .sz-arrow-drop-right:before { content: "\e900" } .sz-done2:before { content: "\e901" } .sz-terminal:before { content: "\e902" } .sz-qr:before { content: "\e903" } .sz-settings:before { content: "\e904" } .sz-arrow_drop_down:before { content: "\e905" } .sz-content-copy:before { content: "\e906" } .sz-schedule:before { content: "\e907" } .sz-run:before { content: "\e908" } .sz-keyboard-control:before { content: "\e909" } .sz-group:before { content: "\e90d" } .sz-mail:before { content: "\e90e" } .sz-notifi:before { content: "\e90f" } .sz-search:before { content: "\e910" } .sz-appdownload:before { content: "\e911" } body { min-width: 1200px } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } @font-face { font-family: DeliciousRoman; src: url(/static/module/sale/less/DINCond-Bold.otf); font-weight: 400; font-style: normal } .clearfix:after { content: '\0020'; display: block; height: 0; clear: both; visibility: hidden } * { margin: 0; padding: 0; text-decoration: none; font-weight: 400; font-family: "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif } .faq-con { background: #f3f5f6; padding-top: 64px; padding-bottom: 64px; box-sizing: border-box } .faq-con .title { font-size: 32px; color: #07111b; text-align: center; line-height: 48px; margin-bottom: 48px; font-weight: 700 } .faq-con ul { width: 1152px; padding: 32px; box-sizing: border-box; margin: 0 auto; background: #fff; box-shadow: 0 4px 8px 0 rgba(28,31,33,.1); border-radius: 12px } .faq-con ul li { width: 528px; height: 122px; margin-right: 32px; margin-bottom: 38px } .faq-con ul li:nth-child(2n) { margin-right: 0 } .faq-con ul li .left-con { width: 36px } .faq-con ul li .left-con .thumbs-up { height: 36px; border-radius: 50%; background: #f3f5f6; text-align: center; line-height: 36px; margin-bottom: 8px } .faq-con ul li .left-con .thumbs-up i { font-size: 16px; color: #9199a1 } .faq-con ul li .left-con p { font-size: 12px; color: #9199a1; text-align: center; line-height: 12px } .faq-con ul li .right-con { width: 476px; padding-top: 6px } .faq-con ul li .right-con .title { font-size: 16px; color: #1c1f21; line-height: 24px; margin-bottom: 8px; font-weight: 700; text-align: left } .faq-con ul li .right-con .text { width: 476px; height: 84px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; color: #545c63; line-height: 28px; transition: all .1s; -moz-transition: all .1s; -webkit-transition: all .1s; -o-transition: all .1s } .faq-con ul li .right-con .text:hover { background: #fff; height: auto; position: relative; z-index: 5; padding: 10px; margin-top: -10px; margin-left: -10px; border-radius: 8px; box-shadow: 0 8px 16px 0 rgba(7,17,27,.2); -webkit-line-clamp: inherit } .comment-con { height: 614px; background: #f3f5f6; padding-top: 64px; box-sizing: border-box; position: relative; width: 1152px; border-bottom: 1px rgba(28,31,33,.1) solid; margin: 0 auto } .comment-con .title { font-size: 32px; color: #07111b; text-align: center; line-height: 48px; margin-bottom: 48px; font-weight: 700 } .comment-con .swiper-container { width: 1152px; margin: 0 auto; position: relative } .comment-con .swiper-container .item { width: 368px; height: 352px; padding: 36px 32px 0 32px; box-sizing: border-box; background: #fff; box-shadow: 0 4px 8px 0 rgba(28,31,33,.1); border-radius: 12px; margin-right: 24px } .comment-con .swiper-container .item:nth-child(3n) { margin-right: 0 } .comment-con .swiper-container .item .head-img { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; margin-bottom: 8px } .comment-con .swiper-container .item .name { font-size: 16px; color: #1c1f21; text-align: center; line-height: 24px; margin-bottom: 4px; font-weight: 700 } .comment-con .swiper-container .item .stars { width: 76px; margin: 0 auto; margin-bottom: 12px } .comment-con .swiper-container .item .stars .on { color: #f90 } .comment-con .swiper-container .item .text { font-size: 14px; color: #545c63; text-align: center; line-height: 28px; max-height: 142px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical } .top-menu { width: 1154px; position: absolute; top: 0; left: 50%; margin-left: -577px; height: 68px; padding-top: 16px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.1) } .top-menu .icon { width: 108px; height: 36px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-image: url(/static/module/sale/img/top-menu-logo.png); margin-right: 24px } .top-menu .select-menu { position: relative; top: -16px; height: 68px; cursor: pointer } .top-menu .select-menu span { font-size: 14px; color: rgba(255,255,255,.8); line-height: 68px; padding-right: 7px; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .top-menu .select-menu span:hover { color: #fff } .top-menu .select-menu i { font-size: 14px; color: #fff; line-height: 68px } .top-menu .select-menu .menu { display: none; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; position: absolute; width: 320px; height: 380px; background: #fff; box-shadow: 0 12px 24px 0 rgba(28,31,33,.2); left: -24px; top: 68px; padding-top: 22px; box-sizing: border-box; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px } .top-menu .select-menu .menu .item { width: 272px; margin: 0 auto; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px rgba(28,31,33,.1) solid } .top-menu .select-menu .menu .item:last-child { margin-bottom: 0; border-bottom: none } .top-menu .select-menu .menu .item h2 { font-weight: 700; font-size: 14px; color: #1c1f21; line-height: 22px; text-align: left; margin-bottom: 4px; cursor: pointer; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .top-menu .select-menu .menu .item p { font-size: 12px; color: #9199a1; line-height: 18px; text-align: left; cursor: pointer } .top-menu .select-menu .menu .item:hover h2 { color: #9447eb } .top-menu .select-menu:hover .menu { display: block } .top-menu .share-box { width: 120px; padding-top: 8px } .top-menu .share-box .share { font-size: 20px; color: rgba(255,255,255,.4); text-align: center; line-height: 24px; background: 0 0; padding: 0; padding-right: 24px; margin: 0; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .top-menu .share-box .share:last-child { padding-right: 0 } .top-menu .share-box .share:hover { color: #fff } .top-menu .hasbuy { margin-left: 16px; height: 36px; line-height: 36px; text-align: center; padding: 0 16px; background: rgba(255,255,255,.1); border-radius: 18px; font-size: 14px; color: rgba(255,255,255,.6); transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .top-menu .hasbuy:hover { background-color: rgba(255,255,255,.2) } .bd_weixin_popup .bd_weixin_popup_head span { font-size: 14px } .bd_weixin_popup .bd_weixin_popup_foot { font-size: 14px!important; text-align: center!important; margin-top: 20px!important } .top-fixed-menu { width: 100%; min-width: 1200px; height: 68px; position: fixed; top: 0; left: 0; background: #fff; box-shadow: 0 8px 16px 0 rgba(28,31,33,.1); z-index: 11; display: none } .top-fixed-menu .menu-wrap { width: 1152px; height: 68px; margin: 0 auto; padding-top: 16px; background: #fff; box-sizing: border-box; z-index: 2 } .top-fixed-menu .icon { width: 108px; height: 68px; position: relative; top: -16px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-image: url(/static/module/sale/img/top-fixed-menu-logo.png); margin-right: 24px } .top-fixed-menu .select-menu { position: relative; top: -16px; height: 68px; cursor: pointer } .top-fixed-menu .select-menu span { font-size: 14px; color: #1c1f21; line-height: 68px; padding-right: 7px } .top-fixed-menu .select-menu i { font-size: 14px; color: #9199a1; line-height: 68px } .top-fixed-menu .select-menu .menu { display: none; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; position: absolute; width: 320px; height: 380px; background: #fff; box-shadow: 0 12px 24px 0 rgba(28,31,33,.2); left: -24px; top: 68px; padding-top: 22px; box-sizing: border-box; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px } .top-fixed-menu .select-menu .menu .item { width: 272px; margin: 0 auto; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px rgba(28,31,33,.1) solid } .top-fixed-menu .select-menu .menu .item:last-child { margin-bottom: 0; border-bottom: none } .top-fixed-menu .select-menu .menu .item h2 { font-weight: 700; font-size: 14px; color: #1c1f21; line-height: 22px; text-align: left; margin-bottom: 4px; cursor: pointer; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .top-fixed-menu .select-menu .menu .item p { font-size: 12px; color: #9199a1; line-height: 18px; text-align: left; cursor: pointer } .top-fixed-menu .select-menu .menu .item:hover h2 { color: #9447eb } .top-fixed-menu .select-menu:hover .menu { display: block } .top-fixed-menu .share-box { width: 120px; padding-top: 8px; margin-right: 25px } .top-fixed-menu .share-box .share { font-size: 20px; color: rgba(28,31,33,.4); text-align: center; line-height: 24px; background: 0 0; padding: 0; padding-right: 24px; margin: 0; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .top-fixed-menu .share-box .share:last-child { padding-right: 0 } .top-fixed-menu .share-box .share:hover { color: rgba(28,31,33,.6) } .top-fixed-menu .hasbuy,.top-fixed-menu .startlearn { background: #9447eb; border-radius: 18px; width: 104px; height: 36px; line-height: 36px; text-align: center; display: inline-block; font-size: 14px; color: #fff } .bottom-buy { width: 100%; height: 88px; position: fixed; bottom: 0; z-index: 11; background: rgba(28,31,33,.9) } .bottom-buy .wrap { width: 1154px; margin: 0 auto } .bottom-buy .wrap .img { width: 128px; height: 88px; margin-right: 12px } .bottom-buy .wrap .text { font-weight: 700; font-size: 20px; color: #fff; letter-spacing: 6px; line-height: 88px; margin-right: 30px } .bottom-buy .wrap .state-con { padding-top: 24px } .bottom-buy .wrap .state-con .state { width: 71px; height: 40px; position: relative; font-weight: 700; font-size: 16px; color: rgba(255,255,255,.6); text-align: center; line-height: 40px; background: rgba(255,255,255,.2); border-radius: 8px; cursor: pointer; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .bottom-buy .wrap .state-con .state:hover { background-color: rgba(255,255,255,.4) } .bottom-buy .wrap .state-con .state:hover .hover-con { display: block } .bottom-buy .wrap .state-con .state .iflearn { background: #9447eb; border-radius: 4px 4px 0 4px; width: 32px; height: 20px; line-height: 20px; text-align: center; position: absolute; top: -10px; left: -10px; font-size: 12px; color: #fff; font-weight: 700 } .bottom-buy .wrap .state-con .state .buyicon { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; display: none; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; background-image: url(/static/module/sale/img/nobuy.png) } .bottom-buy .wrap .state-con .state .hover-con { position: absolute; display: none; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; width: 180px; height: 90px; bottom: 58px; left: 50%; margin-left: -90px; background: #fff; box-shadow: 0 4px 8px 0 rgba(28,31,33,.2); border-radius: 8px; padding: 16px 20px 0 20px; box-sizing: border-box; text-align: left } .bottom-buy .wrap .state-con .state .hover-con:after { border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #fff; content: ""; bottom: -15px; left: 72px; position: absolute; width: 0 } .bottom-buy .wrap .state-con .state .hover-con .title { font-weight: 700; font-size: 14px; color: #1c1f21; line-height: 18px; margin-bottom: 4px } .bottom-buy .wrap .state-con .state .hover-con .info { height: 16px } .bottom-buy .wrap .state-con .state .hover-con .info span { font-size: 12px; color: #9199a1; line-height: 16px } .bottom-buy .wrap .state-con .state .hover-con .info span:first-child { font-weight: 700 } .bottom-buy .wrap .state-con .state .hover-con .info i { font-size: 12px; color: #9199a1; line-height: 16px; padding-right: 2px; padding-left: 2px } .bottom-buy .wrap .state-con .state.checked { color: #fff } .bottom-buy .wrap .state-con .state.checked .buyicon { display: block } .bottom-buy .wrap .state-con .plus { width: 16px; height: 16px; margin: 8px 4px; text-align: center } .bottom-buy .wrap .state-con .plus i { font-size: 16px; color: #fff; line-height: 16px } .bottom-buy .wrap .gobuy { width: 160px; height: 48px; line-height: 48px; text-align: center; font-size: 16px; font-weight: 700; color: #fff; background: #9447eb; border-radius: 24px; margin-top: 20px; margin-left: 24px } .bottom-buy .wrap .gobuy.cant { color: #545c63; background-color: #999da0 } .bottom-buy .wrap .price-con { width: 236px; margin-top: 19px } .bottom-buy .wrap .price-con .origin { width: 77px; display: table-cell; vertical-align: middle; font-size: 16px; font-weight: 700; color: #fff; text-align: right } .bottom-buy .wrap .price-con .origin span { text-decoration: line-through; display: none } .bottom-buy .wrap .price-con .now { font-size: 48px; color: #fff; font-family: DeliciousRoman; line-height: 45px; display: none; position: relative } .bottom-buy .wrap .price-con .now.canCheap { color: #fb3 } .bottom-buy .wrap .price-con .now.canCheap .hover-con { display: block } .bottom-buy .wrap .price-con .now .hover-con { position: absolute; display: none; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; width: 180px; height: 90px; bottom: 58px; left: 50%; margin-left: -90px; background: #fff; box-shadow: 0 4px 8px 0 rgba(28,31,33,.2); border-radius: 8px; padding: 16px 20px 0 20px; box-sizing: border-box; text-align: left } .bottom-buy .wrap .price-con .now .hover-con:after { border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #fff; content: ""; bottom: -15px; left: 72px; position: absolute; width: 0 } .bottom-buy .wrap .price-con .now .hover-con .title { font-weight: 700; font-size: 14px; color: #1c1f21; line-height: 18px; margin-bottom: 4px } .bottom-buy .wrap .price-con .now .hover-con .info { height: 16px } .bottom-buy .wrap .price-con .now .hover-con .info span { font-size: 12px; color: #9199a1; line-height: 16px } .bottom-buy .wrap .price-con .now .hover-con .info span:first-child { font-weight: 700 } .banner { width: 100%; height: 560px; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; padding-top: 352px; box-sizing: border-box; text-align: center } .banner .start-now { background: rgba(28,31,33,.8); border-radius: 24px; display: inline-block; width: 160px; height: 48px; margin: 0 auto; font-size: 16px; color: #fff; text-align: center; line-height: 48px; font-weight: 700; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .banner .start-now:hover { background: #1c1f21 } .banner img { width: 413px; height: auto; margin-top: 20px } .banner .more { position: absolute; bottom: 30px; display: block; width: 155px; left: 50%; margin-left: -75.5px; font-size: 14px; color: rgba(255,255,255,.6); text-align: center; line-height: 22px; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .banner .more i { font-size: 24px; color: rgba(255,255,255,.6); line-height: 24px; text-align: center; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s } .banner .more:hover { color: #fff } .banner .more:hover i { color: #fff } @media screen and (max-width: 1024px) { .top-fixed-menu .menu-wrap { width:952px; margin-left: 20px } .bottom-buy .wrap { width: 952px; margin-left: 10px } .bottom-buy .wrap .text { display: none } } @media screen and (max-width: 1152px) { .top-fixed-menu .menu-wrap { width:952px; margin-left: 20px } .bottom-buy .wrap { width: 952px; margin-left: 10px } .bottom-buy .wrap .text { display: none } }
地址:https://class.imooc.com/static/module/??common/css/common-less.css,sale2/css/sale-less.css,sale2/css/common-less.css?v=1557392024