@charset "UTF-8";

[v-cloak] { display: none; }

.header-mobile-item { display: none; }

.sidebar-box { margin-bottom: 15px; }
.appdownload-nav { position: relative; height: 60px; padding: 0 10px; background: #f9f9f9; display: none; }
.appdownload-nav .app-logo { display: inline-block; width: 152px; height: 34px; background: url("//7nsts.w3cschool.cn/images/w3c/header-logo.png") no-repeat; background-size: contain; text-indent: -9999px; margin: 13px 0; }
.appdownload-nav .button { float: right; background-color: #AE4141; color: #fff; width: 72px; height: 34px; line-height: 34px; text-align: center; font-size: 14px; border-radius: 4px; margin: 13px 0; }
#wrapper pre{ background-color: #201e2f; }

.editormd-preview-container pre.prettyprint, .editormd-html-preview pre.prettyprint { padding: 12px; background: #e6e6e6; border: none; white-space: pre-wrap; word-wrap: break-word; }

.bread-nav .current-position { display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; }
.bread-nav .current-position img { width: 20px; height: 18px; margin-right: 5px; }
.bread-nav .current-position, .bread-nav .current-position a, .bread-nav .current-position span { color: #808080; }

body { background: #F8FAFC; }

.article-boxshadow { box-shadow: 0px 0px 8px rgba(201, 219, 255, 0.5); }
.ellip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.article-main { display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; padding: 10px; }
.article-main .article-title { font-size: 1.8765rem; }
.article-main .news-content { border-radius: 8px; margin-right: 0; width: 100%; }
.aside-head { color: #304451; }
.relevant-head-more { font-size: 12px; color: #707070; cursor: pointer; transition: all 0.14s linear; white-space: nowrap; }
.article-main .article-main-fl { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; margin-right: 16px; width: 73.666667%; }
.article-main-fl .article-main-switch { font-size: 14px; color: #304451; margin-top: 15px; padding: 0 15px; }
.article-main-fl .article-main-switch .switch-prev, .article-main-fl .article-main-switch .switch-next { float: left; padding: 5px 0; word-break: break-all; width: 46%; }
.article-main-fl .article-main-switch .switch-next { float: right; }
.article-main-fl .article-main-switch .switch-prev a, .article-main-fl .article-main-switch .switch-next a { color: #597EF7; transition: all 0.14s ease-out; }
.article-main-fl .article-main-switch .switch-prev a:hover, .article-main-fl .article-main-switch .switch-next a:hover { color: #fe6a00; }
.article-main-fl .article-main-relevant { display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; margin-top: 64px; }
.article-main-fl .article-main-relevant .relevant-article { width: 33.3333333%; margin-left: 8px; }
.article-main-fl .article-main-relevant .relevant-course { width: 66.6666666%; }
.article-main-fl .article-main-relevant .relevant-head, .aside-head { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: baseline; display: flex; align-items: baseline; justify-content: space-between; color: #707070; font-size: 20px; margin-bottom: 10px; padding: 0 16px; }
.relevant-content, .aside-article-main, .aside-relevant-course .aside-relevant-main { background: #fff; padding: 13px 16px 0 16px; border-radius: 8px; border: 1px solid transparent; overflow: hidden; }
.article-main-fl .article-main-relevant .relevant-content-flwrap { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
.relevant-content .relevant-content-item, .aside-article-main .relevant-content-item { position: relative; display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; justify-content: space-between; align-items: center; color: rgba(112, 112, 112, 1); margin-bottom: 17px; cursor: pointer; width: 100%; }
.relevant-content .relevant-content-item:last-child {
    margin-bottom: 20px;
}
.relevant-content .relevant-content-item:hover {
    color:#333;
}
.aside-relevant-main .relevant-main-wrap:hover .relevant-main-content h3{
    color:#f16500;
}
.article-main-relevant .relevant-content .relevant-item-title, .fl-content .fl-content-describe, .relevant-item-title { width: 68%; }
.relevant-content .relevant-content-item:before, .aside-article-main .relevant-content-item:before { position: absolute; top: 50%; left: -9px; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #BBBBBB; content: ''; }
.article-main-fl .article-main-relevant .relevant-content .fl-cover, .relevant-main-wrap .relevant-main-cover { height: 69px; }
.article-main-fl .article-main-relevant .relevant-content .fl-cover img, .relevant-main-wrap .relevant-main-cover img { border-radius: 4px; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl { flex: 1; display: -webkit-flex; display: flex; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content { flex: 1; margin-left: 13px; width: 0; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content a { color: #666666; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content p { margin-top: 5px; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content .fl-content-describe { width: 95%; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content .fl-content-people { display: inline-block; }
.relevant-main-wrap .relevant-main-content { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; margin-left: 13px; width: 50.664744%; }
.relevant-main-wrap .relevant-main-cover { width: 49.335225%; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content h3, .relevant-main-wrap .relevant-main-content h3 { color: #666666; font-size: 14px; font-weight: 400; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content span, .relevant-main-wrap .relevant-main-content span { font-size: 12px; color: #707070; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content .fl-content-describe { color: #999999; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fl .fl-content .fl-content-people { color: #A6BEEF; background: #ECF2FC; border-radius: 12px; padding: 3px 7px; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fr { background: #FEE8D8; border-radius: 8px; font-size: 14px; color: #FE6A00; padding: 8px 17px; cursor: pointer; transition: all 0.14s linear; }
.article-main-fl .article-main-relevant .relevant-content .relevant-content-fr:hover { background: #fdd3b4; }

.article-main-fr { position: relative; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; width: 25.333333%; }
.article-main-fr .contribution-btn { background: #FE6A00; border-radius: 8px; font-size: 18px; color: rgba(255, 255, 255, 0.9); padding: 18px 125px; letter-spacing: 8px; text-align: center; }
.article-main-fr .aside-article, .article-main-fr .aside-relevant-course, .aside-hotCourse, .aside-new-tool { margin-top: 24px; }
.article-main-fr .aside-article .aside-head .aside-head-title { display: -webkit-flex; display: flex; }
.article-main-fr .aside-article .aside-head .aside-head-title h2 { font-size: 20px; font-weight: 400; padding-right: 16px; cursor: pointer; white-space: nowrap; }
.article-main-fr .aside-article .aside-head .aside-head-title .selected-title { color: #FE6A00; }
.aside-relevant-course .aside-relevant-main .relevant-main-wrap { display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; margin-bottom: 16px; }
.aside-hotCourse-main { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; }
.aside-hotCourse-main .hotCourse-option-wrap { width: 29.8%; padding: 5px 4.9px; cursor: pointer; }
.aside-hotCourse-main .hotCourse-option-wrap .hotCourse-option { background: transparent; border-radius: 8px; font-size: 12px; color: #707070; text-align: center; box-shadow: inset 0px 0px 8px rgba(201, 219, 255, 0.5); padding: 8px 5px;}
.aside-hotCourse-main .hotCourse-option-wrap:hover .hotCourse-option {
    box-shadow: inset 0px 0px 8px rgba(201, 219, 255, 1); 
}
.aside-article-main .relevant-content-item:before { background: #DBE8FC; }
.aside-article-main .relevant-content-item:nth-of-type(1):before { background: #FE0000; }
.aside-article-main .relevant-content-item:nth-of-type(2):before { background: #FE6A00; }
.aside-article-main .relevant-content-item:nth-of-type(3):before { background: #FEE8D8; }
.aside-article-main .relevant-content-item { width: 100%; }
.aside-article-main .relevant-content-item:hover {
    color: #000;
}
.aside-article-main .relevant-content-item span { width: 100%; }
.article-main-fr .aside-article {  margin-top: 0; }

.content-extra { padding-left: 30px; padding-right: 30px; }
.content-extra .content-extra-qrcode { background: #FFDC00; }
.content-extra .content-extra-label { text-align: center; margin: 40px 0; }
.content-extra .content-extra-label a { background: #FFB27A; border-radius: 8px; padding: 0 8px; color: #fff; font-size: 16px; margin: 0 4px; }
.content-extra .content-extra-thumbsUp { display: -webkit-flex; -webkit-flex-direction: column; -webkit-align-items: center; display: flex; flex-direction: column; align-items: center; margin-top: 24px; }
.content-extra .content-extra-thumbsUp .icongood-o { font-size: 50px; color: #FFB27A; background: #FEE8D8; border-radius: 50%; padding: 10px 10px; cursor: pointer; transition: all 0.14s linear; }
.content-extra .content-extra-thumbsUp .icongood-o:hover { background:  #fdd3b4; color: #ff984d; }
.content-extra .content-extra-thumbsUp .icon-already { background:  #fdd3b4; color: #ff984d; }
.content-extra .content-extra-thumbsUp p { font-size: 14px; color: #707070; font-weight: 600; margin: 10px 0 24px 0; }

.article-group { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; justify-content: space-between; align-items: center; color: #9199A1; font-size: 14px; }
.article-group .article-group-fl span { margin-right: 15px; }
.article-group .article-group-fr a { margin-left: 15px; color: #9199A1; }
.v-line::before { content: none; }

.ranking-fixed { position: fixed; top: 5px; width: 309px; }
.ranking-absolute { position: absolute; bottom: 0; }

@media (max-width: 1300px) {
    .ranking-fixed { width: 295px; }
}

@media (max-width: 1200px) {
    #wrapper { width: 95%; }
    #rightLink { display: none; }
    .article-main .article-main-fl { width: 100%; margin: auto; }
}

@media (max-width: 1024px) {
    .header-mobile-item { display: block; }
    #header_item, #navfirst_item, #footer_item, .relevant-head-more, .article-main-fl .article-main-relevant .relevant-content .relevant-content-fr, .bread-nav, .content-extra .content-extra-qrcode, .article-group-fr  { display: none; }
    .content-extra .content-extra-label { margin: 0; }
    .content-extra .content-extra-label a { display: inline-block; margin: 4px; }
    #wrapper { width: 100%; margin: 5px auto 0; }
    .article-main { padding: 0; }
    .bread-nav { margin: 0 40px 20px; }
    .article-main .news-content, .relevant-content, .aside-article-main, .aside-relevant-course .aside-relevant-main { border-radius: 0; }
    .article-boxshadow { box-shadow: none; }
    .article-main-fl .article-main-relevant { flex-direction: column; -webkit-flex-direction: column; background: #fff; padding: 40px 20px; }
    .article-main-fl .article-main-relevant .relevant-article, .article-main-fl .article-main-relevant .relevant-course { width: 100%; margin-left: 0; }
}

@media (max-width: 992px) {
    .bread-nav { margin: 0 15px 20px; }
    .news-page { padding: 15px; }
}

@media (max-width: 768px) {
    .relevant-content, .aside-article-main, .aside-relevant-course .aside-relevant-main { font-size: 12px; }
    .relevant-article { margin-top: 20px; }
    .article-main .article-title { font-size: 22px; }
    .article-group { flex-direction: column; -webkit-flex-direction: column; padding-bottom: 5px; }
    .article-group a, .article-group span { font-size: 14px; }
    .article-group .article-group-fl span { position: relative; margin-right: 5px; }
    .article-group .article-group-fl span:after { position: absolute; top: 50%; right: -6px; transform: translateY(-50%); width: 1px; height: 60%; background: rgba(145, 153, 161, 0.3); content: ''; }
    .article-group .article-group-fl span:last-child:after { content: none; }
    .markdown-body h1 { font-size: 18px!important; }
    .markdown-body h2 { font-size: 14px!important; }
    .content-extra .content-extra-thumbsUp .icongood-o { font-size: 35px; }
    .content-extra .content-extra-thumbsUp p { font-size: 12px; }
    .editormd-preview-container, .editormd-html-preview { padding: 20px 0 0 0!important; }
    .article-main-fl .article-main-relevant { padding: 40px 15px; margin-top: 15px; }
    .article-main-fl .article-main-relevant .relevant-head, .aside-head { font-size: 14px; }
    .article-main-fl .article-main-relevant .relevant-head, .aside-head { padding: 0; }
    .article-main-fl .article-main-switch .switch-prev, .article-main-fl .article-main-switch .switch-next { float: none; width: 100%; }
}