* { padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; } .surveyCon { display: flex; flex-direction: column; justify-content: center; } .title_search, .menu, .split { flex-grow: 0; flex-shrink: 0; } .menuTab { width: 100%; padding-left: 25px; display: flex; justify-content: space-around; align-items: center; } .menuTab div.active { color: #0064D6; } .survey { flex-grow: 1; padding: 20px 2.6%; overflow: auto; } .surveyBox { display: none; /* padding: 10px; */ } .surveyBox:first-child { display: block; } .surveyT { padding: 0 25px; line-height: 0; text-align: center; } .surveyT img { width: 100%; } .surveyT1 img { width: 70%; } .surveyLine { line-height: 0; text-align: center; margin: 10px 0 15px; } .surveyLine img { width: 61%; } .surveyList div { position: relative; color: #5E5E5E; font-size: 13px; line-height: 24px; margin: 10px 10px; text-indent: 15px; } .surveyList div::after { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background-color: #DC9722; border-radius: 50%; } .surveyTxt { color: #5E5E5E; font-size: 13px; line-height: 24px; margin: 10px 0; text-indent: 15px; } .history { position: relative; } .history:after { content: ''; width: 2px; background-color: #D7D7D7; /* height: 100%; */ position: absolute; left: 0; right: 0; top: 0; bottom: -35px; margin: auto; } .yearx { position: relative; z-index: 3; width: 60px; height: 60px; margin: 30px auto 20px; border-radius: 50%; background-color: #0064D6; text-align: center; line-height: 60px; font-size: 18px; color: #fff; } .yearx:after { position: absolute; left: -6px; top: -6px; content: ''; width: 70px; height: 70px; border: 1px solid #0064D6; border-radius: 50%; } .monthx { position: relative; z-index: 3; margin-top: 20px; } .monthTxt { color: #5E5E5E; font-size: 13px; line-height: 24px; margin-top: 8px; } .monthTime { font-size: 15px; line-height: 26px; color: #0064D6; font-weight: bold; } .monthx.right { padding-left: 54%; } .monthx.left { padding-right: 54%; } .monthx.left>.monthTime { text-align: right; } .line { width: 10px; height: 10px; position: absolute; left: 0; right: 0; top: 8px; border-radius: 50%; border: 1px solid #0064D6; margin: auto; } .line:before { content: ''; width: 6px; height: 6px; position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; border-radius: 50%; background-color: #0064D6; } .monthText { color: #5E5E5E; font-size: 13px; line-height: 24px; margin: 10px 10px; text-indent: 27px; } .day-left p em { color: #0064D6; } .tables tbody tr td.green i:after { background: #0064D6; } .day-left h1 { color: #0064D6; } .xuanzhong i { background: #0064D6 !important; } .today i { background: rgba(0, 100, 214, 0.6); } .courseBox { border-radius: 4px; padding: 10px 15px; margin: 10px 0; background-color: #fff; /* -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); box-shadow: 0 0 5px rgba(0, 0, 0, .1); */ background: #f7f7f7; } .title { position: relative; padding-right: 70px; font-size: 16px; line-height: 24px; } .title a { position: absolute; right: 0; top: 0; background-color: #5EB263; font-size: 12px; color: #fff; line-height: 24px; padding: 0 5px; border-radius: 3px; } .courseTxt { display: flex !important; justify-content: space-between; margin: 10px 0; font-size: 14px; } .courseCon { font-size: 14px; line-height: 24px; } .course-card{ display: none; }