body{
	background-image: linear-gradient(180deg,#d1d9dc 0%,#e2e7e0 100%);
	/*background-color: #d0d8dc;*/
}
@media(max-width:768px){
	body{
		background-image:linear-gradient(180deg,#7e9ea5 0%,#ced6d9 340px,#d1d9dc 360px,#e2e7e0 100%)
	}
}
.main{
	background: url(./img/footer-image.png) repeat-x 50% 100%;
}
/* main部分样式设计开始 ---------------------------------------------------------*/
/* 创建页面样式设计开始 -------------------------*/
.content{
	/*background-image: url(./img/main-container-background.png);*/
	background-repeat: no-repeat;				
	padding: 28px 0 240px 0;
	position: relative;
}
@media(max-width:768px){
	.content{
		background-image: none;
		padding: 20px 0 275px 0;
	}
}
.content .container-main{
	padding-left: 15px;
	padding-right: 15px;
	min-height: 120px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
@media(max-width:768px){
	.content .container-main{
		padding: 0;
		margin: 0 auto;
	}
	.always-visible{
		text-align: left!important;
	}
}
select{
	background-image: url(../img/show-more.png);
	background-color: #fff;
	background-size: 12px 12px;
	background-position: right 10px center;
	background-repeat: no-repeat;
	appearance: none;
}
.content .container-main #page-home{
	padding: 28px 0 0;
	width: 100%;
}
/* 文章内容页面样式设置开始 */
.midsection{
	width: 100%;
}
.mainbox_header_wrapper h1{
	padding: 28px 16px 40px;
	text-align: left;
	color: #1b4046;
}
@media(max-width:768px){
	.mainbox_header_wrapper h1{
		padding: 2px 16px 24px;
		font-size: 24px;
		line-height: 34px;
		text-align: center;
	}
}
.mainbox{
	padding: 48px 30px 30px;
	background-color: #fff;
	border-radius: 16px;
}
@media(max-width:768px){
	.mainbox{
		padding: 30px 16px 40px;
		border-radius: 0 0 15px 15px;
	}
}
.creat-memorial-steps{
	display: flex;
	margin: 0 0 30px;
	padding: 0 30px;
	width: 100%;
	justify-content: space-between;
}
.creat-memorial-setps-mb{
	border-radius: 15px 15px 0 0;
	/*background-image: linear-gradient(to top,#e3c993 0%,#f5e9bc 100%);*/
	background-image: linear-gradient(to top,#85A2A9 0%,#C5D1D3 100%);
	font-size: 21px;
	padding: 10px 15px;
	text-align: center;
	text-transform: uppercase;
	display: none;
}
@media(max-width:768px){
	.creat-memorial-steps{
		display: none;
	}
	.creat-memorial-setps-mb{
		display: block;
	}
}
.step{
	border: 1px solid #fff;
	background: #fff;
	color: #1b4046;
	width: 32%;
	border-radius: 8px;
	height: 55px;
	line-height: 20px;
	padding-left: 5px;
}
.step span{
	display: block;
	float: left;
	margin: auto;
	line-height: 55px;
}
.step span:first-child{
	font-size: 35px;
	width: 25px;
	margin-left: 5px;
	color: #cad0d1;
}
.step span:nth-child(2){
	font-size: 16px;
}
.selected{
	border: 1px solid #bc985d;
	background-image: linear-gradient(to top,#d7b377 0%,rgba(215,179,119,0) 100%);
	background-color: #bc985d;
	color: #f4fcff;
	text-shadow: 1px 1px 1px rgba(0,1,1,0.1);
}
.selected span:first-child{
	color: #f4fcff;
}
.cm-inner h3{
	font-size: 26px;
	line-height: 33px;
	margin: 0 0 40px;
	font-weight: 200;
}
@media(max-width:768px){
	.cm-inner h3{
		font-size: 22px;
		line-height: 27px;
		margin: 0 0 32px;
	}
}
.form-group{
	margin: 0 0 28px;
	display: flex;
	justify-content: flex-start;
}
.form-group > label{
	margin-bottom: 0;
	text-align: right;
	padding: 9px 15px;
	font-size: 16px;
	line-height: 18px;
	width: 25%;
}
.radio-inline{
	transition: 0.3s;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #1b4046;
}
.radio-inline:hover{
	background-color: #EDF0F0;
}
@media(max-width:768px){
	.form-group > label:not(.always-visible){
		display: none;
	}
}
.input-colume{
	padding: 0 15px;
	width: 41%;
}
.input-colume>span,.input-colume-3 span,.radio-check,.fakeTip{
	font-size: 13px;
	margin: 3px 0 0 3px;
	color: #b94a48;
	font-weight: 800;
	display: none;
}
.fakedisable{
	background-color: #F8FAFB!important;
}
.radio-check{
	padding: 0 15px;
}
.place-holder-hidden::-webkit-input-placeholder{
	color: transparent;
}
.genderSelect{
	align-items: center;
	display: flex;
	gap:15px;
	width: 100%;
}
.genderSelect .always-visible{
	margin-bottom: 0;
    text-align: right;
    padding: 9px 15px;
    font-size: 16px;
    line-height: 18px;
    width: 25%;
}
.genderSelect .input-colume{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 30px 0 0;
	gap:10px;
}
.genderSelect .input-colume .radio-inline{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:15px;
	border-radius: 6px;
}
.radio-inline i{
	color: #D9E6E8;
}
@media(max-width:768px){
	.input-colume{
		width: 100%;
	}
	.place-holder-hidden::-webkit-input-placeholder{
		color: #738F8F;
	}
	.genderSelectWrapper{
		flex-direction: column;
	}
	.genderSelect{
		align-items: center;
		padding: 0 15px;
		display: flex;
		gap:15px;
	}
	.genderSelect .input-colume{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		gap:10px;
	}
	.genderSelect .always-visible{
		padding: 0;
		white-space: nowrap;
		width: auto;
	}
	.radio-inline{
		width: 100%;
		gap:10px;
	}
}
.checked{
	background-color: #EDF0F0;
	border-radius: 5px;
}
.checked i{
	color: #1b4046;
}
.checked span{
	font-weight: 600;
}
.input-colume > input,.input-colume >select{
	padding: 0 12px;
	line-height: 36px;
	height: 36px;
	border: 1px solid #738f8f;
	color: #738f8f;
	font-size: 14px;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	border-radius: 4px;
	width: 100%;
}
@media(max-width:768px){
	.input-colume > input,.input-colume >select{
		padding: 6px 20px;
		height: 50px;
		border: 1px solid #CCCCCC;
		border-radius: 6px;
		font-size: 16px;
	}
}
.input-colume >select{
	cursor: pointer;
}
.input-colume > label{
	padding: 6px 12px 5px 12px;
	font-size: 16px;
	line-height: 36px;
}
.more-info{
	border-bottom: 1px solid #c39c65;
	display: block;
	padding: 6px 12px;
	width: 100%;
	color: #a88958;
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	align-items: center;
	line-height: 23px;
	cursor: pointer;
}
.more-info span{
	letter-spacing: 0.5px;
}
.more-info i{
	transform: rotate(180deg);
}
.option-section-box{
	border-radius: 4px;
	background: #e9f0f2;
	margin: 12px 0 28px;
	padding: 22px 0 12px;
	color: #738f8f;
}
@media(max-width:768px){
	.option-section-box{
		margin-left: -16px;
		margin-right: -16px;
		padding: 5px 0;
	}
}
.option-section-box h3{
	font-size: 20px;
	margin: 0 0 36px 15px;
}
@media(max-width:768px){
	.option-section-box h3{
		font-size: 18px;
		line-height: 23px;
		margin: 28px 15px 6px;
		font-weight: 200;
	}
}
.input-colume-3{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 50px 0 15px;
}
@media(max-width:768px){
	.option-section-box > .form-group{
		display: block;
		margin-bottom: 0;
	}
	.option-section-box > .form-group >label{
		padding: 9px 15px;
		font-size: 16px;
		line-height: 18px;
		display: block;
		white-space: nowrap;
		color: #1b4046;
	}
	.input-colume-3{
		display: flex;
		flex-direction: column;
		padding: 0 15px;
	}
}
.input-colume-3 >div{
	width: 100%;
	display: flex;
	gap:20px;
	justify-content: center;
}
.input-colume-3 .input-colume-3-Wrapper{
	justify-content: space-between;
}
.fakeWrapper{
	width: 30%;
	/*margin-right: auto;*/
}
input[type="date"]{
	-webkit-appearance: none;
	text-align: left;
	background-color: #fff;
	color: #738f8f;
	/*background-color: red;*/
}
.fakeNes{
	width: 41%;
}
.input-colume-3 >div>select,.input-colume-3 >div>input,.fakeWrapper select{
	width: 30%;
	padding: 0 20px;
	line-height: 36px;
	height: 36px;
	border: 1px solid #738f8f;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	border-radius: 4px;
	margin-right: auto;
	color: #738f8f;
}
.fakeWrapper select{
	width: 100%;
}
.province,.city{
	cursor: no-drop;
}
.input-colume-3 > input::-webkit-input-placeholder{
	color: #738f8f;
}
@media(max-width:768px){
	.fakeWrapper{
		width: 100%;
	}
	.input-colume-3 >div>select,.input-colume-3>div>input,.input-colume-3 select{
		width: 100%;
		/*margin-bottom: 22px;*/
		height: 50px;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 6px;
		color: #738f8f;
	}
	.input-colume-3 >div{
		flex-direction: column;
		gap:20px;
	}
	.input-colume-3{
		margin-bottom: 20px;
	}
	.option-section-box{
		padding: 5px 15px;
	}
}
.webaddress{
	font-size: 18px;
	margin-bottom: 28px;
	min-height: 30px;
	vertical-align: top;
	display: flex;
	flex-direction: column;
}
.websetWrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.webHead{
	text-align: right;
	padding: 0 15px;
	line-height: 36px;
	font-size: 20px;
}
.wb-site{
	padding: 0 15px;
	line-height: 36px;
	font-size: 20px;
}
.websetWrapper input{
	padding: 0 15px;
	border: 1px solid #738f8f;
	border-radius: 4px;
	height: 36px;
	color: #738f8f;
	font-size: 20px;
}
.notUnique{
	text-align: center;
	margin-top: 15px;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	color: #b94a48;
	display: none;
}
@media(max-width:768px){
	.websetWrapper{
		display: block;
	}
	.websetWrapper input{
		width: 100%;
		height: 50px;
		border: 1px solid #ccc;
		border-radius: 6px;				
	}
	.webHead{
		display: block;
		width: 100%;
		float: right;
		font-size: 18px;
		margin-bottom: 20px;
	}
	.webaddress span:first-child{
		display: none;
	}
}
.button{
	display: block;
	text-align: right;
}
@media(max-width:768px){
	.button{
		text-align: center;
	}
}
.button button{
	display: inline-block;
	font-size: 18px;
	line-height: 18px;
	text-align: center;
	padding: 10px 30px;
	border: 1px solid #bc985d;
	background-color: #bc985d;
	background-image: linear-gradient(to top,#d7b377 0%,rgba(215,179,119,0) 100%);
	color: #f4fcff;
	box-shadow: 0 1px 0 rgb(244 252 255 / 25%) inset, 0 1px 1px 0 rgb(0 0 0 / 25%);
	border-radius: 5px;
	text-shadow: 1px 1px 1px rgb(0 1 1 / 40%);
	cursor: pointer;
}
.button button:hover{
	background: #dbb06b;
	color: #fff;
}
/* 文章内容页面样式设置结束 */
/* main部分样式设计结束 ---------------------------------------------------------*/
.born-date textarea{
	width: 100%;
	resize: vertical;
	min-height: 50px;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 5px;
	color: #738f8f;
	border: 1px solid #ccc;
}
/*底部下拉菜单*/
.selectSlider{
	position: fixed;
	bottom: 0px;
	margin-bottom: 50px;
	background-color: #e9f0f2;
	border: 1px solid #889D9D;
	border-radius: 6px 6px 0 0;
	max-height: 300px;
	width: 100%;
	overflow: scroll;
	z-index: 99;
	transform: translateY(100%);
	transition: 0.3s;
	display: none;
}
@media(max-width:768px){
	.selectSlider{
		display: block;
	}
}
.selectSlider .opType{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	color: #a88958;
	padding: 12px;
	border-bottom: 1px solid #a88958;
	margin: 0 20px 5px;
}
.opWrapper{
	display: grid;
	grid-gap:8px;
	padding: 10px 30px;
}
.threeGrid{
	grid-template-columns: 1fr 1fr 1fr;
	
}
.twoGrid{
	grid-template-columns: 1fr 1fr;
}
.opWrapper span{
	line-height: 26px;
	font-size: 14px;
	display: block;
	text-align: center;
	background-color: #F2F8FA;
	border-radius: 6px;
	padding: 5px;
	width: 100%;
	transition: 0.2s;
}
.fakeSelect{
	height: 50px;
	padding: 6px 20px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 16px;
	line-height: 36px;
	color: #738f8f;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	background-image: url(../img/show-more.png);
	background-color: #fff;
	background-size: 12px 12px;
	background-position: right 10px center;
	background-repeat: no-repeat;
	appearance: none;
}
.selectValue{
	background-color: #D5E6EB!important;
	color: #1b4046;
	font-weight: 600;
}
.mbOnly{
	display: none;
}
@media(max-width:768px){
	.mbOnly{
		display: block;
	}
	.pcOnly{
		display: none;
	}
}
