websize_cms/public/assets/websize/css/iot-school.css

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}
/* 在根元素上定义变量 */
:root {
    --primary-color: #2a79ff;
}
body {
    max-width: 100vw;
}

.carousel {
    position: relative;
    max-width: 70rem;
    margin: auto;
    overflow: hidden;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-images img {
    max-width: 100%;
    display: block;
	height: 31rem;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

button {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
}
.carousel-caption {
	position: absolute;
	color: #fff;
	text-align: center;
	z-index: 2;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	bottom: 0;
	text-shadow: none;
	padding: 0.3125rem 0;
}
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}


/*内容*/
.introduce_box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
	background: #fbfbfb;
}
.introduce_box_title {
    color: #2B2D33;
    /* width: 48rem; */
	padding: 0.625rem;
	box-sizing: border-box;
}
.school_box_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0.625rem;
	width: 20rem;
	text-align: left;
	padding: 0.625rem;
	box-sizing: border-box;
}

.title {
    display: flex;
	margin-bottom: 0.625rem;
	align-items: center;
	justify-content: space-between;
}
.title-l {
	font-size: 1.5rem;
	font-weight: bold;
	color: #333;
	position: relative;
	padding-left: 1.875rem;

	&::before, &::after {
	  content: '';
	  position: absolute;
	  width: 0.5rem;
	  height: 0.5rem;
	  background: #a0c6ff;
	  top: 0.375rem;
	  left: 0.75rem;
	}

	&::after {
	  width: 0.75rem;
	  height: 0.75rem;
	  background: #2a79ff;
	  left: 0;
	  top: 0.875rem;
	}
}
.contents {
	padding-top: 0.3125rem;
	margin-left: -0.9375rem;
}
.content-items{
	position: relative;
	cursor: pointer;
	padding: 0.9375rem;
	margin-bottom: 0.625rem;
	display: flex;
	cursor: pointer;
	transition: all 0.2s linear;
	border-radius: 0.125rem;
}
.content-item-l{
	flex-shrink: 0;
	width: 13rem;
	height: 8.8rem;
	border-radius: 0.125rem;
	overflow: hidden;
	position: relative;

}
.content-item-l img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 1s;
	&:hover{
	  transform: scale(1.12);
	}
  }
.views-num{
	padding-right: 0.3125rem;
}

.content-item-l .sort{
	position: absolute;
	top: 0.625rem;
	left: 0.625rem;
	color: #fff;
	font-size: 0.75rem;
	padding: 0 0.5rem;
	line-height: 1.5rem;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 0.125rem;
}
.shuang {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.content-item-r{
	flex: 1;
	padding-left: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	text-align: left;
	overflow: hidden;
}
.content-item-r-t{
	color: #333;
	font-size: 1.25rem;
	font-weight: bold;
	width: 100%;
	line-height: 1.5rem;
}
.content-item-r-t a {
	color: #333;
	font-size: 1.25rem;
	font-weight: bold;
	display: block;
	&:hover{
	  color: #2a79ff;
	}
}
.content-item-r-m{
	padding-top: 0.5rem;
	color: #666;
	font-size: 0.875rem;
	line-height: 1.5rem;
	height: 3.025rem;
	text-align: justify;
	width: 100%;
	font-weight: 400;
}
.content-item-r-b{
	color: #999;
	font-size: 0.75rem;
	padding-top: 0;
	width: 100%;
	line-height: 1.5rem;
	font-weight: 400;
}
.content-item-r-labels{
	padding-top: 0.125rem;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	gap: 1rem;
	color: #666;
	font-size: 0.8125rem;
	justify-content: space-between;
}
.content-item-r-labels span strong {
	color: #2a79ff;
}
.flx-gap {
	display: flex;
	gap: 1rem;
}

.content-item-r-label{
	background: #F6F6F6;
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
	color: #666;
	font-size: 0.875rem;
	margin-right: 1.25rem;
	max-width: 6.75rem;
	font-weight: 400;
	line-height: 1.5rem;
}

.slider-title {
	padding-top: 0.625rem;
	color: #333;
	font-size: 1rem;
	font-weight: bold;
	border-top: 0.125rem solid #E5E5E5;
	position: relative;
	width: 100%;
	&::before{
	  content: '';
	  position: absolute;
	  top: -0.125rem;
	  left: 0;
	  width: 5rem;
	  height: 0.125rem;
	  background-color: #2a79ff;
	}
}
.slider-content {
	padding-bottom: 2.5rem;
}
.slider-content{
	padding-bottom: 2.5rem;

}
.slider-content-banner{
	margin-top: 1.25rem;
	position: relative;
	height: 11.1875rem;
	border-radius: 0.125rem;
	overflow: hidden;
	cursor: pointer;
}
.slider-content-banner img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.125rem;
}
.slider-content-banner .sort{
	line-height: 1rem;
	padding: 0 0.25rem;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 0.75rem;
	min-width: 1rem;
	text-align: center;
	border-radius: 0.125rem 0 0.125rem 0;
	background: rgba(0, 0, 0, 0.6);
	&.top{
	  background: #2a79ff;
	}
}
.slider-content-banner-txt{
	width: 100%;
	height: 4.5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
	padding: 3rem 0.625rem 0.625rem;
	color: #fff;
	font-size: 0.75rem;
	box-sizing: border-box;

}
.slider-content-banner-txt-t{
	font-weight: bold;
	font-size: 0.875rem;
}
.slider-content-banner-txt-b{
	padding-top: 0.3125rem;
	color: rgba(255, 255, 255, 0.8);
}
.slider-content-item{
	margin-top: 1.25rem;
	display: flex;
	height: 4.375rem;
	border-radius: 0.125rem;
	overflow: hidden;
	box-sizing: content-box;
	cursor: pointer;
}
.slider-content-item-l{
	position: relative;
	width: 6.5625rem;
	border-radius: 0.125rem;
	overflow: hidden;
	padding-right: 0.625rem;
}
.slider-content-item-l .sort{
	line-height: 1rem;
	padding: 0 0.25rem;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 0.75rem;
	min-width: 1rem;
	text-align: center;
	border-radius: 0.125rem 0 0.125rem 0;
	background: rgba(0, 0, 0, 0.6);
	&.top{
	background: #2a79ff;
	}
}
.slider-content-items{
	margin-top: 1.25rem;
	display: flex;
	/* height: 4.375rem; */
	border-radius: 0.125rem;
	overflow: hidden;
	box-sizing: content-box;
	cursor: pointer;
}
.slider-content-item-r{
	flex: 1;
	width: 100%;
}
.slider-content-item-r-t{
	height: 2.5rem;
	line-height: 1.25rem;
	color: #333;
	font-size: 0.875rem;
	display: block;
	width: 99%;
}
.slider-content-item-ts{
	padding: 0.625rem 0 0.3rem;
	border-top: 0.0625rem solid #f6f6f6;
	line-height: 1.25rem;
	color: #333;
	font-size: 0.875rem;
	display: block;
	width: 99%;
}
.slider-content-item-bs{
	color: #999;
	font-size: 0.75rem;
	padding-top: 0;
}
.slider-content-item-r-b{
	color: #999;
	font-size: 0.75rem;
	padding-top: 0.8125rem;
}
.hot-search{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 3.5rem;
}
.label{
	padding: 0.25rem 0.5rem;
	background: #F6F6F6;
	border-radius: 0.25rem;
	max-width: 8rem;
	font-size: 0.875rem;
	color: #666666;
	margin-top: 0.9375rem;
	margin-right: 0.9375rem;
}
.img{
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

#page {
	min-height: 1.423rem;
	display: table;
	margin: 1.875rem auto 0;
	align-items: center;
	justify-content: center;
}

.page {
	text-align: center;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.pagingUl {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
	height: 1.875rem;
}

.pagingUl li {
	float: left;
	width: 1.875rem;
	height: 1.875rem;
	background: #dfdfdf;
	text-align: center;
	margin-right: 0.9375rem;
	border-radius: 0.3125rem;
}

.pagingUl li a {
	display: inline-block;
	width: 1.875rem;
	height: 1.875rem;
	text-align: center;
	line-height: 1.8rem;
	color: #666;
	font-size: 0.75rem;
	border-radius: 0.3125rem;
}

.prv {
	margin-right: 0.625rem;
}

.first,
.last {
	width: 1.875rem;
	height: 1.875rem;
	font-size: 0.75rem;
	text-align: center;
	line-height: 1.875rem;
	cursor: pointer;
	background: #dfdfdf;
	padding: 0 0.3125rem;
	border-radius: 0.3125rem;
	margin-right: 0.625rem;
}
.prv, .next {
	width: 1.875rem;
	height: 1.875rem;
	text-align: center;
	line-height: 1.75rem;
	cursor: pointer;
	background: #dfdfdf;
	padding: 0 0.3125rem;;
	border-radius: 0.3125rem;
}

.prv:hover,
.next:hover,
.first:hover,
.last:hover,
.pagingUl li a:hover,
.activP {
	background-color: #2a79ff!important;
	color: #fff!important;
}


.layui-laypage span {
	display: inline-block;
	vertical-align: middle;
	padding: 0 0.9375rem;
	background-color: #fff;
	color: #333;
	font-size: 0.75rem;
}

/*文本超长省略*/
.dan {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-thumbs-up:before {
    content: "\f164";
}
.fa-comments:before {
    content: "\f086";
}
.fa-eye:before {
    content: "\f06e";
}

/* 详情 */
.detail-nav {
    padding: 1.25rem 0;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.45);
}
.detail-nav a {
    text-decoration: none;
    color: #303133;
}
.content-title .content-title-t {
	font-size: 1.5rem;
	font-weight: bold;
	color: #333;
	line-height: 2.0625rem;
}
.content-title .content-title-b {
    padding-top: 1.25rem;
    color: #999;
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
}
.detail-content {
    padding: 2rem 0 2rem;
    color: #333;
    font-size: 1rem;
    line-height: 2rem;
    text-align: justify;
}
.detail-content p {
	line-height: 1.875rem;
	padding-bottom: 0.5rem;
}
.ewmText {
	font-size: 0.875rem;
	color: #666;
	padding-bottom: 0.5rem;
}
.alincenter{
	text-align: center;
}
.detal-img{
	padding: 0.625rem 0;
	width: 31.25rem;
}
.detal-rwm{
	padding: 0.625rem 0;
	width: 12.5rem;
}

.social-share {
    font-family: "socialshare" !important;
    font-size: 1rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale
}
.social-share .social-share-icon {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    border-radius: 50%;
    line-height: 2rem;
    border: 0.125rem solid #666;
    color: #666;
    text-align: center;
    vertical-align: middle;
    transition: background 0.6s ease-out 0s;
	text-decoration: none;
	margin: 0.25rem;
	outline: none;
}
.social-share .social-share-icon img{
	width: 1rem;
	height: 1rem;
}
.social-share .icon-weibo {
    color: #ff763b;
    border-color: #ff763b;
}
.social-share .icon-qq {
    color: #56b6e7;
    border-color: #56b6e7;
}
.social-share .icon-qzone {
    color: #FDBE3D;
    border-color: #FDBE3D;
}
.social-share .icon-wechat {
    position: relative;
    color: #7bc549;
    border-color: #7bc549;
}
.social-share .icon-wechat .wechat-qrcode {
    opacity: 0;
    filter: alpha(opacity = 0);
    visibility: hidden;
    position: absolute;
    z-index: 9;
    top: -12.8125rem;
    left: -5.25rem;
    width: 12.5rem;
    height: 12rem;
    color: #666;
    font-size: 0.75rem;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.625rem #aaa;
    transition: all 200ms;
    -webkit-tansition: all 350ms;
    -moz-transition: all 350ms;
}

.social-share .icon-wechat .wechat-qrcode h4 {
    font-weight: normal;
    height: 1.625rem;
    line-height: 1.625rem;
    font-size: 0.75rem;
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
    color: #777
}

.social-share .icon-wechat .wechat-qrcode .qrcode {
    width: 5.5625rem;
    margin: 0.625rem auto;
}
.social-share .icon-wechat .wechat-qrcode .qrcode img {
	width: 100%;
	height: 100%;
}
.social-share .icon-wechat .wechat-qrcode .help p {
    font-weight: normal;
    line-height: 1rem;
    padding: 0;
    margin: 0;
}

.social-share .icon-wechat .wechat-qrcode:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -0.375rem;
    bottom: -0.8125rem;
    width: 0;
    height: 0;
    border-width: 0.5rem 0.375rem 0.375rem 0.375rem;
    border-style: solid;
    border-color: #fff transparent transparent transparent
}

.social-share .icon-wechat:hover .wechat-qrcode {
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible
}

.botText{
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #666;
}
.botText a{
	color: #444;
}
.botText .bot-label {
	background-color: #e7e7e7;
	padding: 0.125rem 0.5rem;
	border-radius: 0.3125rem;
	margin-right: 0.5rem;
}

/* 列表页 */
.panel-heading {
	position: relative;
	padding: 0.9375rem 0;
	border-bottom: 0.125rem solid #f5f5f5;
    border-color: #ddd;
	color: #333333;
}
.panel-heading .panel-title {
    font-size: 1rem;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.panel-title strong {
	color: #2a79ff;
}
.panel-heading div.more {
    position: absolute;
	top: 1.0625rem;
	right: 0;
	display: block;
	color: #919191;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-weight: 400;
	font-size: 0.8125rem;
}
.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -0.3125rem;
}
.list-inline > li {
    display: inline-block;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
}
.category-order li > a {
    color: #333;
}
.category-order li > a.active {
    color: #007bff;
}


 .navbar-form {
    border-color: #e7e7e7;
}
.form-search input[type=search] {
    background: url(../static/icon/search.svg) no-repeat 10px center;
    background-size: 15px 15px;
    border-color: transparent;
	padding: 6px 10px;
	border: 1px solid #ccc;
	width: 12.5rem;
	border-radius: 10em;
	text-indent: 1.4375rem;

}
@media (max-width: 767px) {
    .form-search input[type=search] {
    	width: 21.5rem;
		background-size: 10px 10px;
		/* background: none; */
    }
}

@media (max-width: 1120px) {
	.school_box_right {
		width: 100%;
	}
	.introduce_box_title {
		width: 100%;
	}
	.slider-content-banner{
		margin-top: 1.25rem;
		display: flex;
		height: 4.375rem;
		border-radius: 0.125rem;
		overflow: hidden;
		box-sizing: content-box;
		cursor: pointer;
		position: inherit;
	}
	.sDetal .slider-content-banner {
		height: 8rem;
	}
	.sDetal .slider-content-item-ln {
		width: 15rem;
	}
	.slider-content-banner-txt-t {
		height: 2.5rem;
		line-height: 1.25rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}
	.slider-content-item-ln {
	    position: relative;
	    width: 6.5625rem;
	    border-radius: 0.125rem;
	    overflow: hidden;
	    padding-right: 0.625rem;
	}
	.slider-content-banner-txt {
		position: inherit;
		background: none;
		color: #333;
		padding: 0;
		height: auto;
	}
	.slider-content-banner-txt-b {
		color: #999;
		font-size: 0.75rem;
		padding-top: 0.8125rem;
	}
}