*{
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: "microsoft yahei";
}

body{
	background-color: #191a20;
	overflow-x: hidden;
}

body>div{
	width: 1200px;
	margin: 0 auto;
}

li{
	cursor: pointer;
}

#BANNER{
	width: 100vw;
}

#SERVICE_BOX{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	z-index: 9999;
}
.close_btn{
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: absolute;
	right: 30px;
	top: 30px;
	/* background-color: #000; */
}
.close_btn:before{
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 3px;
	transform: rotate(40deg) translateY(-50%);
	background-color: #FFF;
}
.close_btn:after{
	content: '';
	position: absolute;
	top: 50%;
	width: 100%;
	height: 3px;
	transform: rotate(-40deg) translateY(-50%);
	background-color: #FFF;
}
#SERVICE_BOX_inset{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	max-width: 1000px;
	height: 50%;
	background-color: #24262e;
	border-radius: 5px;
	color: #666976;
	padding: 100px 60px;
	font-size: 16px;
	
}
#SERVICE_BOX_inset>h1{
	font-size: 32px;
	color: #FFF;
	margin-bottom: 40px;
}
#SERVICE_BOX_inset>p{
	margin-bottom: 80px;
}
#SERVICE_BOX_inset input{
	width: 300px;
	padding: 0;
	background-color: #2F313C;
	border-radius: 4px;
	border: none;
	padding: 10px 0;
	text-indent: 20px;
	color: #C8CDE5;
	font-size: 14px;
}
#SERVICE_BOX_input p{
	margin-bottom: 15px;
}
#SERVICE_BOX_input p>span{
	color:#FF1E1C;
	margin-left: 10px;
}
#SERVICE_BOX_inset textarea{
	width: 100%;
	height:130px;
	background-color: #2F313C;
	border-radius: 4px;
	border: none;
	resize: unset;
	padding: 10px 0;
	text-indent: 20px;
	color: #C8CDE5;
}
.left_input{
	margin-right: 40px;
}
.left_input>div{
	margin-bottom: 35px;
}
.service_infos{
	height: 100%;
}
.right_input{
	width: 100%;
	height: 100%;
}
#SERVICE_BOX_input{
	width: 100%;
	display: flex;
}
#post_service_input>p{
	cursor: pointer;
	display: inline-block;
	background-color: #DDB97E;
	padding: 14px 30px;
	border-radius: 4px;
	color: #FFF;
}




#LOGO>img{
	width: 100px;
	height: 50px;
}

.global_nav{
	display: flex;
	color: #FFFFFF;
	font-size: 30px;
	align-items: center;
	margin: 50px 0 30px 0;
}

.global_nav>ul{
	display: flex;
	flex: 1;
	font-size: 16px;
	color: #666976;
}

.global_nav>ul>li{
	margin-left: 40px;
	cursor: pointer;
}

.global_nav>ul>li:hover{
	color: #DCB785;
}
#BANNER_BOX{
	width: 1200px;
	margin: 0 auto;
}

#banner{
	height: 480px;
}

#banner_left{
	width: 100%;
	color: #FFFFFF;
	z-index:9;
	position: relative;
	margin-top: 128px;
}

.banner_title{
	color: #FFFFFF;
	opacity: 1;
	font-size: 40px;
	margin-bottom: 33px;
}
/* .banner_content {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	color: #FFF;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	width: 446px;
	min-height: 100px;
	font-size: 14px;
	line-height: 26px;
	opacity: .8;
	transition: ease all .5s;
}
.banner_content:hover{
	color: #FFF;
	width: 90%;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	opacity: 1;
} */
.banner_content{
	position: relative;
	width: 446px;
	font-size: 14px;
	overflow: hidden;
	opacity: .8;
	/* transition: ease all .5s; */
}
/* .banner_content:hover{
	opacity: 1;
	width: 100%;
	height: 115px;
} */
#banner_view{
	margin-top: 80px;
	display: flex;
}

#banner_view img{
	width: 25px;
	height: 25px;
	margin-right: 10px;
}
#banner_view>.banner_check,#banner_view>.banner_date {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	margin-right: 14px;
	padding: 14px 40px;
	border-radius: 50px;
}
.banner_check{
	color: #4A2B0E;
	background: linear-gradient(180deg, #F3E2BF, #D7B587);
}
.banner_date{
	color: #EDD8B3;
	border: 2px solid #DCB785;
	/* background: linear-gradient(180deg, #F3E2BF, #D7B587); */
}


#banner_back{
	width: 100%;
}

#img_back{
	position: absolute;
	height: 700px;
	top: 0;
	right: 0;
	transition: ease all .5s;
}

#img_back img{
	position: absolute;
	height: 700px;
	right: 0;
	top: 0;
	z-index: -1;
	width: 100vw;
	opacity: 0;
	transition: ease all .5s; 
	object-fit: cover;
}

#img_back>.active_img_show{
	opacity: 1;
}


.black_inset{
	opacity: .7;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 700px;
	z-index: 0;
}


/* #img_shadow{
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 0;
	right: 0;
	height: 700px;
	box-shadow: 0 0 200px 150px inset #000; 
	-moz-box-shadow: 0 0 200px 150px inset #000;
	-webkit-box-shadow: 0 0 200px 150px inset #000;

}
 */
#banner_back_select_box{
	width: 1200px;
	position: relative;

}

#banner_check_list{
	position: absolute;
	display: flex;
	left: 0;
	margin-top: 52px;
}

#banner_check_list>.active_check_point{
	opacity: 1;
}

#banner_check_list>p{
	cursor: pointer;
	width: 10px;
	height: 10px;
	background-color: #FFF;
	opacity: .3;
	border-radius: 50%;
	margin-right: 10px;
}

#banner_img_list{
	position: absolute;
	top: 175px;
	right: 0;
}

#banner_img_list_ul{
	display: flex;
	align-items: center;
}

#banner_img_list_ul>li{
	cursor: pointer;
	margin-left: 10px;
	width: 130px;
	height: 70px;
}

#banner_img_list_ul img{
	width: 100%;
	height: 100%;
	border-radius: 3px;
	object-fit: cover;
}



.active_img{
	border-radius: 3px;
	border: #FFFFFF solid 2px;
}

#CONTENT{
	padding-top: 5rem;
	display: flex;
	width: 1200px;
}

#CONTENT_LEFT{
	color: #9FA3B5;
	font-size: 16px;
}

#CONTENT_LEFT li>a{
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 130px;
	height: 60px;
}


#CONTENT_LEFT li>a:hover{
	color: #ebd5b0;
	border-bottom:#ebd5b0 solid 1px;
}
.active_filter>a{
	border-bottom:#ebd5b0 solid 1px;
}
.active_filter>a{
	color: #ebd5b0;
}
#CONTENT_RIGHT{
	width: 1200px;
}
#CONTENT_RIGHT ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: 60px;
}

#CONTENT_RIGHT li{
	position: relative;
	cursor: pointer;
	margin-left: 32px;
	margin-bottom: 38px;
	border-radius: 3px;
	width: 300px;
	overflow: hidden;
	transition: ease all .5s;
}
.ex_tag{
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px 10px;
	border-radius: 0 5px 0 15px;
	color: #4A2B0E;
	font-size: 14px;
	font-weight: bold;
	background: linear-gradient(180deg, #F3E2BF, #D7B587);
}

#gjjz>li:hover{
	transform: translateY(-20px);
	background-color: #1F2128;
}

#gjjz>li:hover .name{
	color: #e4c9a0;
}
#gjjz>li:hover .content{
	color: #e4c9a0;
}
#gjjz>li:hover .date{
	color: #e4c9a0;
}

#CONTENT_RIGHT div{
	padding: 20px;
}
#CONTENT_RIGHT>ul>li>a>div>p{
	text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
}
.name{
	color: #FFFFFF;
	font-size: 16px;
	
}
.content{
	color: #666976;
	font-size: 14px;
	margin: 20px 0 10px 0;
}
.date{
	color: #666976;
	font-size: 14px;
}

#CONTENT_RIGHT img{
	width: 300px;
	height: 200px;
	/* object-fit: cover; */
}

#load_more{
	font-size: 16px;
	color: #4A2B0E;
	display: flex;
	justify-content: center;
	font-weight: 700;
}

#load_more>p{
	cursor: pointer;
	padding: 16px 72px;
	background: linear-gradient(180deg, #F3E2BF, #D7B587);
	border-radius: 50px;
}

#cebian{
	background-color: #272832;
	position: fixed;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 10px;
	font-size: 12px;
	color: #666976;
	z-index: 10;
}

.off_set{
	display: none;
}

#cebian img{
	width: 25px;
	height: 25px;
}

#cebian ul{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 17px;
}

#cebian li{
	width: 80px;
	position: relative;
	cursor: pointer;
	margin-top: 28px;
}

#cebian li:hover{
	color: #dcbd90;
}
#cebian li:hover .cebian_connect{
	display: block;
}
#cebian li:first-child{
	margin-top: 0;
}

#cebian p{
	padding-top: 8px;
}

#cebian .cebian_connect{
	display: none;
	padding:1rem;
	position: absolute;
	right: 7rem;
	top: 1rem;
	white-space: nowrap;
	background-color: #272832;
	border-radius: 10px;
}
#alert_info{
	position: fixed;
	z-index: 999;
	top: 45%;
	left: 45%;
}

#alert_info>h1{
	position: absolute;
	background-color: #272832;
	padding: 2rem;
	font-size: 1em;
	border-radius: 10px;
	color: #FFFFFF;
}

.off_alert{
	display: none;
}

@media screen and (max-width:512px) {
	.close_btn{
		width: 20px;
		height: 20px;
	}
	.close_btn:after{
		right: -2px;
	}
	.left_input{
		margin-right: 0;
	}
	#SERVICE_BOX_inset input{
		width: 100%;
	}
	#SERVICE_BOX_inset{
		padding: 50px 20px;
		overflow-y: scroll;
	}
	#SERVICE_BOX_input{
		
		flex-direction: column;
	}
	#post_service_input{
		margin-top: 30px;
	}
	.ex_tag{
		font-size: 12px;
	}
	body>div {
		width: 100%;
	}
	
		body .black_inset{
			height: 15rem;
		}
		body #banner{
			position: absolute;
			height: 15rem;
		}
		body #img_back>img{
			height: 15rem;
		}
	#BANNER {
		margin-top: 7rem;
	}

	#banner_left {
		position: relative;
		text-align: center;
	}
	
	.banner_title {
		width: 100%;
		text-align: center;
		position: absolute;
		top: -5rem;
		font-size: 1.25rem;
	}
	.banner_date{
		border: unset;
	}
	
	.banner_content {
		 text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 4;
		  line-clamp: 4;
		  -webkit-box-orient: vertical;
		position: absolute;
		height: auto;
		left: 50%;
		transform: translateX(-50%);
		bottom: -1.5rem;
		width: 95%;
		margin: 0 auto;
		line-height: unset;
		font-size: 0.875rem;
	}
	#banner_back_select_box{
		display: none;
	}
	#banner_view>.banner_check,
	 #banner_view>.banner_date {
	    display: flex;
		justify-content: center;
	    align-items: center;
	    cursor: pointer;
	    font-size: 16px;
	    font-weight: bold;
	    margin-right: 0;
	    padding: .5rem 1.5rem;
		text-align: center;
	    border-radius: 50px;
	}
	#CONTENT_RIGHT #load_more{
		padding: 10px 0;
	}
	#load_more{
		margin-bottom: 20px;
	}
	#banner_view {
		margin: 0;
		flex-direction: column;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -6rem;
		right: 0;
		justify-content: center;
	}

	#banner_view img {
		width: 20px;
		height: 20px;
	}

	#banner_view>p {
		font-size: 3em;
	}

	#img_back {
		height: 100%;
	}

	#img_back>img {
		height: 100%;
	}

	#cebian {
		width: 95%;
		/* overflow-x: scroll; */
		display: block;
		bottom: 10px;
		right: unset;
		transform: unset;
		top: unset;
		box-shadow: 0 0 20px rgba(0,0,0,.5);
		transform: translateY(100%);
		transition: ease all .5s;
	}
	#cebian.show_cebian{
		transform: translateY(0%);
	}
	#cebian .cebian_connect{
		right: 0;
		 top: -4.5rem;
	}
	#cebian>ul{
		justify-content: space-between;
		/* width: 450px; */
		/* overflow-x: scroll; */
		flex-direction: row;
	}
	#cebian li{
		width: 100%;
		margin-top: 0;
	}

	#CONTENT {
		width: 95%;
		margin: 11rem auto 0 auto;
		/* margin-top: 16rem; */
	}

	#CONTENT_LEFT {
		display: none;
	}

	#CONTENT_RIGHT {
		width: 100%;
	}

	#CONTENT_RIGHT ul {
		margin: 0;
	}

	#gjjz {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	#gjjz>li {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 48%;
		margin:0 0 1rem 0;
	}

	#gjjz>li>a>img {
		width: 100%;
		height: 15vh;
		border-radius: 10px;
		object-fit: cover;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp:2;
		/*white-space: nowrap;*/
		font-size: 14px;
		display:-webkit-box;
		-webkit-box-orient:vertical;
	}

	.content {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
		margin: .2rem 0;
	}
	#CONTENT_RIGHT div{
		padding: .5rem 0;
	}
	#CONTENT_RIGHT>ul>li>a>div>p {
		display: block;
	}
	.date {
		font-size: .8em;
	}

	#load_more {
		font-size: 1em;
	}
	#load_more>p{
		padding: .5rem 2rem;
		text-align: center;
	}
	.ex_tag{
		border-radius: 0 10px 0 15px;
	}
}