@media(min-width: 1200px) {
 .container {
 max-width: 1200px;
}
}
body, html {
	font-size: 14px;
	background-color: #fff;
	padding: 0;
	margin: 0;
	font-weight: normal;
}
input::-webkit-input-placeholder {
 color: #999;
}
input::-moz-placeholder {
 color: #999;
}
input:-ms-input-placeholder {
 color: #999;
}
input::-webkit-input-placeholder {
 color: #999;
}
input::placeholder {
 color: #999;
}
a {
	text-decoration:none;
	color: #333
}
a:link {
	text-decoration:none;
}
a:active {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
	color: #222
}
p, li, ul, dt, dd {
	margin : 0;
	padding: 0
}
input, button, select, textarea {
	outline:none
}
ul, li {
	list-style: none;
}
.fwb {
	font-weight: bold;
}
.fz-12 {
	font-size: 12px;
}
.fz-13 {
	font-size: 13px;
}
.fz-14 {
	font-size: 14px;
}
.fz-15 {
	font-size: 15px;
}
.fz-16 {
	font-size: 16px;
}
.fz-17 {
	font-size: 17px;
}
.fz-18 {
	font-size: 18px;
}
.fz-19 {
	font-size: 19px;
}
.fz-20 {
	font-size: 20px;
}
.fz-21 {
	font-size: 21px;
}
.fz-22 {
	font-size: 22px;
}
.fz-23 {
	font-size: 23px;
}
.fz-24 {
	font-size: 24px;
}
.fz-25 {
	font-size: 25px;
}
.fz-26 {
	font-size: 26px;
}
.fz-27 {
	font-size: 27px;
}
.fz-28 {
	font-size: 28px;
}
.t_hide {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bg_f2 {
	background-color: #f2f2f2;
}
.color_697 {
	color: #6970FF;
}
.color_697:hover {
	color:#6970FF
}
.shadow-md {
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .05);
}
.color-orange {
	color: #ff6633
}
.border-bottom-50 {
	border-bottom: 1px solid rgba(225, 225, 225, 0.5)
}
.border-50 {
	border: 1px solid rgba(225, 225, 225, 0.5)
}
.border-right-50 {
	border-right: 1px solid rgba(225, 225, 225, 0.5)
}
.border-left-50 {
	border-left: 1px solid rgba(225, 225, 225, 0.5)
}
.border-top-50 {
	border-top: 1px solid rgba(225, 225, 225, 0.5)
}
.shadow-md {
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .05);
}
.rounded-lg {
	border-radius: 5px;
}
.overflow-hidden {
	overflow: hidden;
	;
}
.btn-save {
	background:#6970FF;
	color: #fff;
}
.btn-save:hover {
	background:#6970FF;
	color: #fff;
}
.btn-save-outline {
	border:1px #6970FF solid;
	background: none;
	color: #6970FF;
}
.btn-save-outline:hover {
	border:1px #6970FF solid;
	background: none;
	color: #6970FF;
}
 @media screen and (max-width: 880px) {
 body {
 font-size: 14px;
}
}
.flex-1 {
	flex: 1;
}
.text-333 {
	color: #333;
}
.text-999 {
	color: #999;
}
.text-666 {
	color: #666;
}
.text-ccc {
	color: #ccc;
}
.text-ddd {
	color: #ddd;
}
.text-red {
	color:#FF4A50;
}
.text-orange {
	color:#FF771A;
}
.bg-orange {
	background-color: #FF771A;
}
.bg-purple {
	background: linear-gradient(to right, #6c79f9, #495aff);
}
.bg-darkblue {
	background-color: #4b4f74 !important;
}
.w2020 {
	width: 20px;
	height: 20px;
}
.w2525 {
	width: 25px;
	height: 25px;
}
.w3030 {
	width: 30px;
	height: 30px;
}
.w3232 {
	width: 32px;
	height: 32px;
}
.w3535 {
	width: 35px;
	height: 35px;
}
.w4040 {
	width: 40px;
	height: 40px;
}
.w5050 {
	width: 50px;
	height: 50px;
}
.w6060 {
	width: 60px;
	height: 60px;
}
.w7070 {
	width: 70px;
	height: 70px;
}
.w100100 {
	width: 100px;
	height: 100px;
}
.w150150 {
	width: 150px;
	height: 150px;
}
.boc-f0 {
	border-color: #f0f0f0 !important;
}
.boc-000 {
	border-color: #000 !important;
}
.boc-333 {
	border-color: #333 !important;
}
.boc-red {
	border-color: #dc3545 !important;
}
.picwork {
 box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .1);
	transition: 0.3s;
}
.picwork:hover {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	transform: translateY(-4px);
}
.a-j-c {
	align-items: center;
	justify-content: center;
}
.table-active, .table-active > th, .table-active > td {
	background-color: rgba(0, 0, 0, 0.03) !important;
}
.scont_nav a {
	display: inline-block;
	padding: 0 10px 15px;
	border-bottom: 3px rgba(0, 0, 0, 0) solid;
	margin-right: 10px;
	color: #333;
	font-size: 14px;
}
.scont_nav a.on {
	border-color: #333;
	font-weight: bold;
}
.ui-sortable-helper {
	box-shadow: 1px 1px 4px #333 !important;
	background: #fff;
}
.layui-layer-btn0 {
	background: #333 !important;
	color: #fff !important;
	font-size: 12px !important;
	border-color: #333 !important;
}
.layui-layer-btn1 {
	font-size: 12px !important;
}
.btn-dark:hover {
	background-color: #777 !important;
	border-color: #777 !important;
}
.btn-dark:not(:disabled):not(.disabled):active {
background-color: #000 !important;
border-color: #000 !important;
}
.table thead th {
	font-weight: normal;
	font-size: 14px;
}
.table .thead-light th {
	padding: 0.7rem;
	background-color: #eee;
}
.table th, .table td {
	vertical-align: middle;
	font-size: 14px;
}
.shadow-move {
	box-shadow:0 1px 2px 0 rgba(0, 0, 0, .01), 0 6px 12px 0 rgba(0, 0, 0, .06);
transition:transform .3s ease-in-out;
}
.shadow-move:hover {
	box-shadow:0 4px 8px 0 rgba(0, 0, 0, .06), 0 20px 40px 0 rgba(0, 0, 0, .06);
	transform:translate3d(0, -8px, 0);
}
.lesson_card_v2 {
	display: block;
}
.sline {
	text-decoration: line-through;
}
.lesson_card_v2 {
	display: block;
}
.lesson_card_v2 .head {
	position: relative;
}
.lesson_card_v2 .head .tip_1 {
	position: absolute;
	top: 7px;
	right: 58px;
	display: block;
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
	background: #000;
	padding: 2px 8px;
}
.lesson_card_v2 .head .tip_2 {
	position: absolute;
	top: 7px;
	right: 7px;
	display: block;
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
	background: #cc3333;
	padding: 2px 8px;
}
.lesson_card_v2 .head .timetip {
	font-size: 12px;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	line-height: 30px;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	position: absolute;
}
.lesson_card_v2 .head .tip_3 {
	font-size: 12px;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	line-height: 30px;
	color: #fff;
	background: #cc3333;
	text-align: center;
	position: absolute;
}
.showtitle {
	opacity: 0.9;
	text-align:center
}
 @media screen and (max-width: 600px) {
 .showtitle {
opacity: 0.9;
height: auto
}
}
/*.lesson_card_v2 .showtitle > span{  border-radius: 5px; padding: 1px 5px; color: #fff; font-size: 12px; margin-right: 10px; font-weight: 200; }
.lesson_card_v2 .showtitle > p { flex:1; overflow: hidden; word-break: break-all;white-space: nowrap;text-overflow: ellipsis; font-size: 16px; color: #222; font-weight: bold;}
.lesson_card_v2 .showtitle .banhui{ background-color: #e99854; }
.lesson_card_v2 .showtitle .shouhui{ background-color: #9bc143;  }
.lesson_card_v2 .showtitle .ipad{ background-color: #6d7ced;  }*/

.lesson_card_v2 .timetip2 {
	margin : 5px;
	margin-bottom: 0px;
	border-radius: 5px;
	background: #ECFCE3;
	height: 28px;
	color: #5A6E46;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.lesson_card_v2 .showprice .shichang {
	font-size: 12px;
	color: #666;
}
.lesson_card_v2 .showprice .price {
	font-size: 16px;
	color: #f94c47;
}
.loginbtn {
	border: 1px #6B64E7 solid;
	color: #6B64E7;
	border-radius: 50rem;
	padding: 6px 20px;
}
.downloadx {
	border: 1px #6B64E7 solid;
	color: #6B64E7;
	border-radius: 50rem;
	padding: 6px 20px;
}
.itxts {
	background: #fff;
	padding: 12px;
	border-radius: 10px;
	color: #666666;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}
.itxts .ric {
	margin-left: auto;
	background-image: url("https://v3.procg.cn/html/right.svg");
	background-repeat: no-repeat;
	background-position: center;
	width: 15px;
	height: 25px;
	background-size:190%;
	opacity: 0.3;
}
.cursor-hand {
	cursor: pointer;
}
.snewpic2 {
	width: 20%;
	padding-top: 20%;
	position: relative;
}
@media only screen and (max-width: 1024px) {
 .snewpic2 {
 width: 33.33%;
 padding-top: 33.33%;
}
}
.snewpic2 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 100%;
	object-fit: cover;
}
.snewpic2 span {
	z-index: 1;
	padding:10px;
	overflow: hidden;
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 150ms ease-in-out;
}
.snewpic2 img {
	transition: all 150ms ease-in-out;
}
.snewpic2 a:hover img {
	opacity: .8;
}
.snewpic2 a:hover span {
	opacity: 1;
}
.zhez {
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8000;
	background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
	height: 80px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.btback {
	margin: 10px;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.TopMenuON {
	font-size: 16px;
	display: block;
	font-weight: bold;
	color: #111 !important;
	border-bottom: 3px solid #111 !important;
	;
}
.TopMenu {
	color: #777;
	display: block;
	margin-right: 28px;
	padding-top: 10px;
	padding-bottom: 15px;
	border-bottom: 3px solid #fff;
	font-size: 16px;
}
.sw1 {
	cursor: pointer;
	z-index: 22;
	left: 6px;
	top: 45%;
	position: absolute;
	width: 35px;
	height: 35px;
	border-radius: 90%;
	transform: rotate(180deg);
	background-color: rgba(255, 255, 255, 1);
	background-image: url("https://v3.procg.cn/html/right.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size:160%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.sw2 {
	cursor: pointer;
	z-index: 22;
	right: 6px;
	top: 45%;
	position: absolute;
	width: 35px;
	height: 35px;
	border-radius: 90%;
	background-color: rgba(255, 255, 255, 1);
	background-image: url("https://v3.procg.cn/html/right.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size:160%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.maxbox {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
 @media (min-width: 576px) {
 .maxbox {
 max-width: 540px;
}
}
 @media (min-width: 768px) {
 .maxbox {
 max-width: 720px;
}
}
 @media (min-width: 992px) {
 .maxbox {
 max-width: 960px;
}
}
 @media (min-width: 1200px) {
 .maxbox {
 max-width: 1140px;
}
}
 @media (min-width: 1260px) {
 .maxbox {
 max-width: 1200px;
}
}
 @media (min-width: 1460px) {
 .maxbox {
 max-width: 1300px;
}
}
 @media (min-width: 1660px) {
 .maxbox {
 max-width: 1400px;
}
}
/*padding的自适配*/
.px10x40 {
	/*Viewport 320-2000*/
    padding-right: clamp(0.625rem, 0.268rem + 1.79vw, 2.5rem);
	padding-left: clamp(0.625rem, 0.268rem + 1.79vw, 2.5rem);
}
.py10x40 {
	/*Viewport 320-2000*/
    padding-top: clamp(0.625rem, 0.268rem + 1.79vw, 2.5rem);
	padding-bottom: clamp(0.625rem, 0.268rem + 1.79vw, 2.5rem);
}
.py20x40 {
	/*Viewport 320-2000*/
    padding-top: clamp(1.25rem, 1.012rem + 1.19vw, 2.5rem);
	padding-bottom: clamp(1.25rem, 1.012rem + 1.19vw, 2.5rem);
}
.pt10x40 {
	/*Viewport 320-2000*/
    padding-top: clamp(0.625rem, 0.268rem + 1.79vw, 2.5rem);
}
.pb10x40 {
	/*Viewport 320-2000*/
    padding-bottom: clamp(0.625rem, 0.268rem + 1.79vw, 2.5rem);
}
.pt10x30 {
	/*Viewport 320-2000*/
    padding-top:clamp(0.625rem, 0.387rem + 1.19vw, 1.875rem)
}
.pb10x30 {
	/*Viewport 320-2000*/
    padding-bottom:clamp(0.625rem, 0.387rem + 1.19vw, 1.875rem)
}
.py10x30 {
	/*Viewport 320-2000*/
    padding-top:clamp(0.625rem, 0.387rem + 1.19vw, 1.875rem);
	padding-bottom:clamp(0.625rem, 0.387rem + 1.19vw, 1.875rem)
}
/**/


.op40 {
	opacity: 40%;
}
.op50 {
	opacity: 50%;
}
.op60 {
	opacity: 60%;
}
.op70 {
	opacity: 70%;
}
.op80 {
	opacity: 80%;
}
.op90 {
	opacity: 90%;
}
.text111 {
	color: #111111;
}
.text222 {
	color: #222;
}
.lineheight120 {
	line-height: 120%;
}
.lineheight110 {
	line-height: 110%;
}
.lineheight100 {
	line-height: 100%;
}
.lineheight130 {
	line-height: 130%;
}
.lineheight140 {
	line-height: 140%;
}
.lineheight150 {
	line-height: 150%;
}
.lineheight160 {
	line-height: 160%;
}
.face100x150 {
	width: clamp(6.25rem, 5.515rem + 3.68vw, 9.375rem) !important;
}
.face80x120 {
	width: clamp(5rem, 4.412rem + 2.94vw, 7.5rem) !important;
}
/*PICbOX的适配*/

.picbox {
	width:  20%;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 500px) {
 .picbox {
width: 50%;
}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width:500px) {
 .picbox {
width: 50%;
}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
 .picbox {
width: 33.33%;
}
}

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
 .picbox {
width: 25%;
}
}

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
 .picbox {
width: 25%;
}
}

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1400px) {
 .picbox {
width: 20%;
}
}
/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1780px) {
 .picbox {
width: 20%;
}
}
/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1980px) {
 .picbox {
width: 16.66%;
}
}
 @media only screen and (min-width: 1680px) {
 .picbox-home {
width: 25%;
}
}
/*
.mfont{
    font-size: clamp(1rem, 0.952rem + 0.24vw, 1.25rem);
}

@media only screen and (min-width: 2100px) {
    .mfont {   font-size:18px}
}
!* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） *!
@media only screen and (min-width: 2400px) {
    .mfont {   font-size:19px}
}
*/





.Btn18 {
	border-radius: 10px;
	padding: 10px 20px;
	display: inline-block
}
.Btn18-Black {
	background: #000;
	color: #fff;
	display: inline-block
}
.Btn18-Black:hover {
	color: #fff;
}
.nextbtn {
	width: 100%;
	height: 100%;
	background-image: url("https://v3.procg.cn/Views/v5/css/svg/next1.svg");
	background-size: 46%;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
.prevtbtn {
	width: 100%;
	height: 100%;
	background-image: url("https://v3.procg.cn/Views/v5/css/svg/next1.svg");
	background-size: 46%;
	transform: rotate(180deg);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
/*  viewport 320 - 2000*/
/*https://min-max-calculator.9elements.com*/

.font12x14 {
	font-size: clamp(0.75rem, 0.726rem + 0.12vw, 0.875rem) !important;
}
.font14x16 {
	font-size: clamp(0.875rem, 0.851rem + 0.12vw, 1rem) !important;
}
.font16x18 {
	font-size:clamp(1rem, 0.976rem + 0.12vw, 1.125rem) !important;
}
/* */
.font12xMax {
	/* 12 14 */
    font-size: clamp(0.75rem, 0.726rem + 0.12vw, 0.875rem) !important;
}
.font14xMax {
	/* 14 18 */
    font-size:clamp(0.875rem, 0.827rem + 0.24vw, 1.125rem) !important;
}
.font16xMax {
	/* 16 20 */
    font-size: clamp(1rem, 0.952rem + 0.24vw, 1.25rem)!important;
}
.font18xMax {
	/* 18 22 */
    font-size: clamp(1.125rem, 1.077rem + 0.24vw, 1.375rem)!important;
}
.font20xMax {
	/* 20-26*/
    font-size:clamp(1.25rem, 1.179rem + 0.36vw, 1.625rem)!important;
}
.font22xMax {
	/* 22-28 */
    font-size: clamp(1.375rem, 1.304rem + 0.36vw, 1.75rem)!important;
}
.font24xMax {
	/* 24-30*/
    font-size: clamp(1.5rem, 1.429rem + 0.36vw, 1.875rem)!important;
}
.font26xMax {
	/* 26-32 */
    font-size: clamp(1.625rem, 1.554rem + 0.36vw, 2rem)!important;
}
.font28xMax {
	/* 28-34 */
    font-size: clamp(1.75rem, 1.679rem + 0.36vw, 2.125rem)!important;
}
.font30xMax {
	/* 30-36 */
    font-size: clamp(1.875rem, 1.804rem + 0.36vw, 2.25rem)!important;
}
.font32xMax {
	/* 32-40 */
    font-size: clamp(2rem, 1.905rem + 0.48vw, 2.5rem)!important;
}
.font34xMax {
	/* 34-42 */
    font-size: clamp(2.125rem, 2.03rem + 0.48vw, 2.625rem)!important;
}
.font36xMax {
	/* 36-44 */
    font-size:clamp(2.25rem, 2.155rem + 0.48vw, 2.75rem)!important;
}
.rounded_10 {
	border-radius: 10px;
}
.rounded_15 {
	border-radius: 15px;
}
.rounded_20 {
	border-radius: 20px;
}
.rounded_5 {
	border-radius: 5px;
}

        /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

 
@font-face {
 font-family: 'iconfont';  /* Project id 3383955 */
 src: url('/static/css/static/font/font_3383955_wuu51e26k5h.woff2') format('woff2'),  url('/static/css/static/font/font_3383955_wuu51e26k5h.woff') format('woff'),  url('/static/css/static/font/font_3383955_wuu51e26k5h.ttf') format('truetype');
}
.ketip_sm {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	font-size: 12px;
	color: #2CF740;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4)
}
.showtypex {
	position: absolute;
	top: 7px;
	left: 7px;
	display: block;
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 8px;
}
.showtypex2 {
	position: absolute;
	top: 7px;
	left: 7px;
}
.showtypex2 .s1 {
	background: rgba(0, 0, 0, 0.5);
	padding: 4px 12px;
	border-radius: 50rem;
	color: #fff;
	display: inline-block;
	font-size: 12px;
}
.showtypex2 .s2 {
	background: #F44D00;
	padding: 4px 12px;
	border-radius: 50rem;
	color: #fff;
	display: inline-block;
	font-size: 12px;
}
.backbtnx1 {
	background: #5767FF;
	color: #fff;
	border-radius: 50rem;
	padding: 6px 16px;
	font-size: 12px;
	display: inline-block;
}
/*.showtypex .banhui{ background-color: #e99854; }
.showtypex .shouhui{ background-color: #9bc143;  }
.showtypex .ipad{ background-color: #6d7ced;  }*/

.iconfont {
	font-family: iconfont
}
.w2020 {
	width: 20px;
	height: 20px;
}
.w2525 {
	width:25px;
	height: 25px;
}
.w3030 {
	width: 30px;
	height: 30px;
}
.w3535 {
	width: 35px;
	height: 35px;
}
.w4040 {
	width: 40px;
	height: 40px;
}
.w4545 {
	width: 45px;
	height: 45px;
}
.w5050 {
	width: 50px;
	height: 50px;
}
.w5555 {
	width: 55px;
	height: 55px;
}
.w6060 {
	width: 60px;
	height: 60px;
}
.w7070 {
	width: 70px;
	height: 70px;
}
.w8080 {
	width: 80px;
	height: 80px;
}
.w9090 {
	width: 90px;
	height: 90px;
}
.w100100 {
	width: 100px;
	height: 100px;
}
.font-12 {
	font-size: 12px;
}
.font-14 {
	font-size: 14px;
}
.font-18 {
	font-size: 18px;
}
.font-16 {
	font-size: 16px;
}
.font-20 {
	font-size: 20px;
}
.font-22 {
	font-size:22px;
}
.font-24 {
	font-size:24px;
}
.font-26 {
	font-size:26px;
}
.font-28 {
	font-size:28px;
}
</style>
<style>
    .xline{
        width: 1px; height: 15px; background: #BEBEBE; opacity: 0.5; margin: 0 20px;
    }
    .lightgreen{
        background: #00D0BB;
    }
    .stit{ font-size: 22px; line-height: 26px; padding-left: 20px; position: relative;}
    .stit:after{ position: absolute; content: ""; background: linear-gradient(180deg, #05D9A4 0%, #0AA8DC 100%); border-radius: 50rem; width: 8px; height: 26px; left: 0; top: 0; }

    /*学生页面*/
    .iview{
        position: absolute;
        left: 10px;
        top: 10px;
        height: 20px;
        min-width: 50px;
        border-radius: 30px;
        background: rgba(0,0,0,0.3);
        color: #fff;
        font-size: 12px;
        display: flex;
        padding: 4px;
        flex-direction: row;
        align-items: center;
        padding-right: 6px;
    }
    .ieye{
        background-image: url("/static/css/static/image/view.svg");
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        width: 20px;
        height: 15px;
    }
    .iworktit{
        background:  linear-gradient(to top, rgba(0,0,0,0.5), transparent);;
        position: absolute;
        z-index: 3;
        bottom: 0px;
        width: 100%;
        padding:  8px 2px;
        text-align: center;
        color: #fff;
    }
    /*学生页面*/

    /*
    container全新扩张
     */
    @media (min-width: 1400px) {
        .container {
            max-width: 1200px;
        }
    }
    @media (min-width: 1500px) {
        .container {
            max-width: 1240px;
        }
    }
    @media (min-width: 1600px) {
        .container {
            max-width: 1300px;
        }
    }
    @media (min-width: 1800px) {
        .container {
            max-width: 1400px;
        }
    }