@media screen and (min-width:1200px) {
.framework {
	width: 75%;
	margin: 40px auto 0px;
}
.introduce h3 {
	line-height: 2;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: center;
	color: #696666;
}
.immediately {
	display: flex;
	justify-content: space-between;
}
.block {
	width: 13%;
	color: #fff;
	padding: 3rem 0rem;
}
}

@media screen and (min-width:960px) and (max-width:1200px) {
.framework {
	width: 75%;
	margin: 40px auto 0px;
}
.introduce h3 {
	line-height: 2;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: center;
	color: #696666;
}
.immediately {
	display: flex;
	justify-content: space-between;
}
.block {
	width: 13%;
	color: #fff;
	padding: 3rem 0rem;
}
}

@media screen and (max-width:960px) {
.framework {
    width: 90%;
    margin: 40px auto 0px;
}
.introduce h3 {
    line-height: 2;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: #696666;
}
.title {
    color: #CBAA11;
    font-size: 1.4rem;
}
.immediately {
    /* display: flex; */
    justify-content: space-between;
}
.block {
    width: 100%;
    color: #fff;
    padding: 3rem 0rem;
}
}
body {
	padding: 0px;
	margin: 0px;
}

.entirety {
	width: 100%;
	margin: 0px;
}

.main-image {
	width: 100%;
	/* height: 28rem; */
}

.main-image img {
	width: 100%;
	height: 100%;
}



.midst-block {
	width: 40%;
	border: 1px #e0e0e0 solid;
	position: relative;
	height: 105px;
}

.midst {
	position: absolute;
	background: #fff;
	padding: 0px 20px;
	margin-top: 10px;
}

.number {
	color: #FDF6DC;
	font-size: 4rem;
	letter-spacing: 8px;
	font-weight: 600;
}


.display {
	display: flex;
	justify-content: center;
}

.number-position {
	position: relative;
	margin-top: 1rem;
}

.title-position {
	position: relative;
	margin-left: 3.8rem;
	margin-top: -1.5rem;
}

.introduce {}



.title-margin {
	position: relative;
	margin-left: 3.8rem;
	margin-top: -2.3rem;
}

.framework-img {
	padding-top: 9rem;
}

.framework-img img {
	width: 100%;
	height: 100%;
}

.rightTitle {
	float: right;
	right: 12.5%;
}

.trends {
	background-color: #1584C9;
	position: relative;
	top: 8rem;
}

.circle {
	width: 4rem;
	border-radius: 50%;
	border: 1px #fff solid;
	position: relative;
	height: 4rem;
}

.num {
	width: 1.3rem;
	height: 1.3rem;
	border: 1px #fff solid;
	border-radius: 50%;
	font-size: 0.8rem;
	color: #1584c9;
	background-color: #fff;
	position: absolute;
	margin-top: -5px;
}

.num span {
	position: relative;
	margin-left: 3px;
	display: block;
	margin-top: 2px;

}

.tagImages {
	position: absolute;
	margin: 14px 14px;
}



.circle-title {
	margin-top: 15px;
	font-size: 0.9rem;
	margin-bottom: 10px;
	text-align: center;
}

.circle-text {
	font-size: 0.7rem;
	line-height: 2;
	text-align: center;
}

.site {
	display: flex;
	justify-content: center;
}


.circle:hover {
	width: 4rem;
	border-radius: 50%;
	border: 1px #1584c9 solid;
	position: relative;
	height: 4rem;
	background-color: #fff;
	.num{
		width: 1.3rem;
		height: 1.3rem;
		border: 1px #168DD6 solid;
		border-radius: 50%;
		font-size: 0.8rem;
		color: #fff;
		background-color: #168DD6;
		position: absolute;
		margin-top: -5px;
	}
}

.simagsImg{
		padding-top: 4rem;
		    display: flex;
		    justify-content: space-between;
			padding-bottom: 2rem;
}
.simags{
	width: 31%;
}
.simags img{
	width: 100%;
	height: 100%;
}