    body{
        background: #F2F4F7;
    }
    #intro { min-height: 100vh; max-width: 1240px; margin: 0 auto; font-weight: 500; color: #323233; line-height: 1.5;}
    
    #m_header, #m_footer { display: none; background-color: #f7f7f8; }

    #m_header { position: sticky; top: 0; left: 0; z-index: 9; height: 48px; padding: 0 16px; border-bottom: 1px solid #ddd; }
    #m_header .icon { display: block; width: 20px; height: 100%; }
    #m_header .icon.goback { background: url("/statics/images/icon/goback-333.png") no-repeat center center/contain; }
    #m_header .icon.home { background: url("/statics/images/icon/home-333.png") no-repeat center center/contain; }
    #m_header h1 { color: #333; font-size: 18px; font-weight: normal; text-align: center; line-height: 48px; }
    #m_header h2 { color: #333; font-size: 18px; font-weight: normal; text-align: center; line-height: 48px; }

    #m_footer { border-top: 1px solid #ddd; color: #666; text-align: center; }
    #m_footer p { margin: 15px 0; font-size: 15px;  }
    #m_footer .follow-link a { color: inherit; }
    #m_footer .follow-link a::after { content: "|"; padding: 0 0.5rem; }
    #m_footer .follow-link a:last-child::after { display: none; }

    .nav-list li {font-size: 15px !important;}
    .nav-list li:last-child {border-bottom: none !important;}
    .nav-list li.active a {font-weight: 600;color: #fe6a00 !important;}

    /* response */
    @media (max-width: 1199px) {
        #intro { width: 1240px; }
    }
    @media (max-width: 1169px) {
        #header_item, #navfirst_item, #footer_item, .bottom-tools { display: none; }
        #m_header, #m_footer { display: block; }
        #intro { width: 100%; }
        #intro .header-title{width: 100%;}
        .header-left,.header-right{ display: none !important; }
        #intro .header-center { width: 100%; height: auto !important; margin-top: 20px; }
        .intro-more{ grid-template-columns: repeat(1, 100%) !important; }
        .exam-more-item-container{ grid-template-columns: repeat(1, 100%) !important; }
        .data-num{ font-size: 14px !important; margin-right: 0 !important; }
        .data-question:before, .data-question:after{ margin-top: 12px !important; }
        .intro-more-item:nth-child(1){ margin-bottom: 20px; }
        #toolbar{ display: none; }
    }

    .intro-container { box-sizing: content-box; margin: 20px auto;  background: #FFF; border-radius: 8px;}
    .intro-container-header{ background-image: url(http://7n.w3cschool.cn/statics/images/exam/exam-intro-header-bg.png);background-repeat: no-repeat; min-height: 144px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center;}
    
    #intro .nav-container{margin-top:20px;color:#999999}
    #intro .header-left{width:10%;height:44px;background:#FFF0E5;border-radius:0 28px 28px 0;display:-webkit-flex;display:flex;align-items:center}
    #intro .header-right{width:10%;height:44px}
    #intro .header-center{width:80%;height:44px;}
    #intro .header-left span{margin:0 auto;font-size:16px;font-weight:400;color:#FE6A00;line-height:0}
    #intro .header-title,.header-tag-container,.header-center{margin:0 auto;display:-webkit-flex;display:flex;align-items:center}
    #intro .header-center{flex-direction:column}
    #intro .header-title-icon-container{width:32px;height:32px;background:#FFF0E5;border-radius:50%;margin-right:10px;text-align:center;line-height:28px}
    #intro .header-title-icon{width:32px;height:32px;padding:7px;}
    #intro .header-title-text{font-size:28px;}
    #intro .header-tag-container{margin-top:19px}
    #intro .header-tag-item{padding:0 .15rem;margin-right:12px;height:23px;line-height:23px;background:#F5F5F5;border-radius:4px;color:#8D8D8D;font-size:12px;font-weight:400;text-align:center}
    
    .intro-container-main{width:60%;margin:0 auto;margin-top:27px;padding-bottom:64px}
    .intro-container-main-data{margin:0 auto;display:-webkit-flex;display:flex;align-items:center}
    .data-item{width:30%;margin:0 auto;text-align:center}
    .data-question{display:grid;grid-template-columns:1px 99% 1px}
    .data-question:before,.data-question:after{content:"";display:inline-block;width:1px;height:20px;margin-top:25px;background:#D9D9D9}
    .data-num{font-size:24px;font-weight:700;color:#333333;margin-right:4px}
    .data-label{margin-top:2px;font-size:12px;color:#999999}
    .data-done,.data-not-done{position:absolute;margin-left:27px;padding:3px 12px;border-radius:12px 12px 12px 0px;font-size:12px;font-weight:400;color:#FFFFFF}
    .data-not-done{background:#969799}
    .data-done{background:#12C171}
    .data-done:hover{color:#FFFFFF;background:#11B56A}
    .intro-container-main-desc{margin-top:24px;text-align:center}
    .desc-container{margin:0 auto;color:#999999;font-size:14px}
    .intro-container-main-btn{margin-top:32px}
    .intro-container-main-btn .play-btn{width:200px;height:48px;display:block;margin:0 auto;text-align:center;background:#FE6A00;box-shadow:0px 4px 30px 1px rgba(238,242,245,0.8);border-radius:25px;font-size:16px;font-weight:400;color:#FFFFFF;line-height:48px}
    .intro-container-main-btn .play-btn:hover{background:#F16500}
    .intro-container-main .play-tag{margin-top:16px;font-size:12px;font-weight:400;color:#FE6A00;text-align:center}
    .intro-more{margin-bottom:20px;display:grid;grid-template-columns:repeat(2,49.5%);grid-column-gap:1%}
    .intro-more-item{background:#FFFFFF;box-shadow:0px 4px 30px 1px rgba(238,242,245,0.8);border-radius:8px 8px 8px 8px;padding:20px}
    
    .more-item-header{margin:0 auto;display:-webkit-flex;display:flex;align-items:center;justify-content:space-between}
    .more-title{font-size:20px;font-weight:800;color:#333333}
    .more-btn{font-size:14px;font-weight:400;color:#666666}
    
    .exam-more-item-container{margin-top:20px;display:grid;grid-template-columns:repeat(2,48%);grid-column-gap:4%;grid-row-gap:20px}
    .exam-item{background:#F8F8F8;border-radius:8px}
    .exam-item .header{text-align:right;height:24px;overflow:auto}
    .exam-item:hover{box-shadow:0 3px 5px rgba(0,0,0,.3)}
    .not-done{padding:4px;background:#EBEBEB;border-radius:0px 8px 0px 8px;font-size:12px;font-weight:400;color:#999999}
    .container{width:90%;margin:0 auto;display:grid;grid-template-columns:19% 75%;grid-column-gap:6%;padding-bottom:20px}
    .exam-item-img{width:53px;height:53px;background:#FFF;border-radius:50%;display:grid;align-items:center;justify-items:center}
    .exam-item-img img{width:28px;height:28px}
    .exam-item-date{text-align:left}
    .exam-item-title{font-size:18px;font-weight:600;color:#333333;margin-bottom:8px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
    .exam-item-count{font-size:14px;font-weight:400;color:#999999}
    .exam-item-viptype{font-size:14px;font-weight:400;color:#C79750}
    .exam-item-viptype:before{content:"";display:inline-block;width:2px;height:2px;border-radius:50%;background:#999999;margin:0 5px 4px}
    
    .course-more-item-container{}
    .course-item{margin:0 auto;display:grid;grid-template-columns:29% 69%;grid-column-gap:2%;padding:20px 0}
    .course-item:hover .course-item-title{color:#FE6A00}
    .course-item-img img{width:100%;border-radius:8px}
    .course-item-title{font-size:18px;font-weight:600;color:#333333}
    .course-item-desc{min-height:40px;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
    .course-item-desc,.course-item-data span{font-size:14px;font-weight:400;color:#999999;margin-top:4px}
    .course-item-data span:nth-child(2):before{content:"";display:inline-block;width:1px;height:10px;margin:0 8px 0 5px;background:#999999}