@charset "UTF-8";
/*仿真实验室 CSS*/
.head-banner{ padding-top: 60px; height: 280px; background: url("../images/bg-courses-banner2.jpg") no-repeat center top; background-size: auto 100%; }
.head-banner-box h1{ color: #333; text-align: center; }
.head-banner-box p{ color: #666; text-align: center; width: 100%; }
.head-banner-box p.text-center span{ display: inline-block; margin: 0 20px; font-style: normal; }
.sys-laboratory{ width: 90%; margin: 0 auto; }

/*列表页*/
.lab-select{ padding: 20px; margin: 20px 0; background: #f5f7fa; display: flex; border-radius: 4px; }
.lab-label{ width: 100px; }
.lab-label-name{ text-align: center; background: #666; color: #eee; border-radius: 16px 0 16px 16px; line-height: 32px; font-size: 14px; }
.lab-tips{ flex: 1; padding-left: 20px; }
.lab-tips li{ float: left; margin-left: 10px;}
.lab-tips li a{ display: block; line-height: 32px; border-radius: 16px; padding: 0 20px; }
.lab-tips li.active a{ background-color: var(--color); color: #fff; }
.lab-list-head{ margin: 20px 0; line-height: 35px; }
.lab-list{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.lab-list::after{ content: ""; flex: 1; }
.lab-card{ border-radius: 5px; width: 24%; box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1); margin-bottom: 25px; margin-right: 1.33%; overflow: hidden; }
.lab-card:nth-of-type(4n){ margin-right: 0; }
.lab-card-img{ position: relative; padding-top: 35%; }
.lab-card-img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.lab-card-des{ line-height: 28px; height: 56px; font-size: 18px; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: #fff; right: 20%; }
.lab-card-info{ border: 1px solid #eee; padding: 16px; }
.lab-card-title{ line-height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; font-size: 1rem; }
.lab-card-labels{ line-height: 24px; margin-top: 4px; font-size: 12px; color: #999; }
.lab-card-labels span{ margin: 0 5px; }
.lab-card-labels em{ font-style: normal; }

/*内容页*/
.lab-main{ display: flex; justify-content: space-between; margin-top: 20px; }
.lab-msg-title{ line-height: 48px; font-size: 18px; }
.lab-start-btn{ display: inline-block; color: #fff; background-color: #0052d9; padding: 0 30px; font-size: 15px; line-height: 40px; vertical-align: top; }
.lab-content{ flex: 1; margin-right: 20px; }
.lab-detail,.lab-comment{ box-shadow: 0 2px 4px 0 rgba(3,27,78,.06); background: #fff; padding: 25px; margin-bottom: 20px; border: 1px solid #eee; }
.lab-summary{ line-height: 28px; padding: 15px; font-size: 14px; color: #666; }
.lab-source-list{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; }
.lab-source-list>div{ width: 49.5%; line-height: 40px; background: #f5f7fa; text-indent: 15px; margin-bottom: 8px; font-size: 14px; color: #666; }
.lab-directory li{ line-height: 50px; border: 1px solid #eee; border-top: 0; padding-left: 20px; font-size: 15px; }
.lab-directory li:first-child{ border: 1px solid #eee; }

/*用户评价*/
.lab-comment-list>p{ line-height: 60px; font-size: 14px; color: #999; }
.lab-comment-list li{ display: flex; background: #f5f7fa; padding: 20px; margin-bottom: 10px; border-radius: 3px; }
.lab-comment-list li img{ width: 50px; height: 50px; border-radius: 100%; margin-right: 15px; }
.lab-comment-list li h2{ font-size: 14px; }
.lab-comment-list li h2 span{ font-size: 12px; margin-left: 10px; color: #999; font-weight: normal; }
.lab-comment-list li p{ font-size: 13px; margin-top: 15px; color: #666; }

/*相关实验*/
.lab-correlate>div{ width: 360px; box-shadow: 0 2px 4px 0 rgba(3,27,78,.06); background: #fff; border: 1px solid #eee; }
.lab-correlate-title{ line-height: 80px; border-bottom: 1px solid #eee; text-indent: 20px; font-size: 18px; }
.lab-correlate-list{ padding: 0 20px; }
.lab-correlate-list li{ line-height: 60px; border-bottom: 1px solid #eee; font-size: 14px; color: #666; position: relative; }
.lab-correlate-list li::after{ content: "\f105"; position: absolute; top: 0; right: 25px; line-height: 60px; font-family: "Font Awesome 5 Free"; }
.lab-correlate-list li a{ display: block; }
.lab-correlate-list li:last-child{ border-bottom: 0; }