@media(min-width:768px){
	.form-section{
		float:left;
		width:100%;
		position:relative;
	}
	.form-section > .item{
		display:flex;
		align-items: center;
		flex-wrap: wrap;
		gap:10px;
		padding:4px 0;
		position:relative;
	}
	.form-section > .item > label{
		flex-basis:160px;
		text-align: left;
		position:relative;
	}
	.form-section > .item > span{
		flex:1;
		position:relative;
	}

	.form-section > .item input,
	.form-section > .item select
	{
		padding:8px;
	}

	.form-section > .item > span input[type='submit'], 
	.form-section > .item > span input[type='reset'], 
	.form-section > .item > span input[type='button'] 
	{
		padding:10px 14px;
		margin-top:5px;
		font-size:16px;
	}

	.form-section > .hide-item{
		display:none;
	}
	.form-section > .open-item{
		display:flex;
	}

	.form-section > .item > .label-top{
		align-self:flex-start;
	}

	.form-section > .full-field{
		flex-direction: column;
		align-items:flex-start;
		row-gap:5px;
		width:100%;
	}
	.form-section > .full-field > label,
	.form-section > .full-field > span{
		flex: 1;
		text-align: left;
		width:100%;
	}

	.form-section > .full-field input,
	.form-section > .full-field select,
	.form-section > .full-field textarea
	{
		width:100%;
	}
}

.input-tel{
    display: inline-flex;
    gap:5px;
	position:relative;
}
.input-tel > .tel-ind{
    width:60px;
}
.input-tel > .tel-num{
	width:150px;
}

.box-tel-ind{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:150px;
	background:#fff;
	border-radius:4px;
	overflow:hidden;
	z-index:10;
	display:none;
	box-shadow: 1px 1px 6px #888;
}

@media(max-width:768px){
	.form-section{
		display:block;
		font-size:16px;
	}
	.form-section > .item{
		position:relative;
		display:block;
		padding:0 0 8px 0;
	}
	.form-section > .item > label,
	.form-section > .item > span
	{
		display:block;
		text-align: left;
		padding:4px 0;
	}

	.form-section > .item input:not([type='radio']):not([type='checkbox']),
	.form-section > .item select 
	{
		width:100%;
		padding:10px 8px;
		font-size:16px;
	}

	.form-section > .item > span input[type='submit'], 
	.form-section > .item > span input[type='reset'], 
	.form-section > .item > span input[type='button'],
	.form-section > .item > span button 
	{
		padding:14px 10px;
		font-size:16px;
		width:100%;
	}

	.form-section > .hide-item{
		display:none;
	}
	.form-section > .open-item{
		display:block;
	}

	.form-section > .item > .sectionImg{
		display:block;
		padding:4px 0;
	}
	.sectionImg img{
		display:block;
		max-width:150px;
	}

	.input-tel{
		display:flex;
	}
	.input-tel .tel-ind {
		flex-basis:60px;
	}
	.input-tel .tel-num {
		flex:1;
	}
}

@media(max-width:480px){
	.input-group{
		flex-direction: column;
	}
	.input-group > .item{
		width:100%;
	}
}

.label-w160 > .item > label{
	flex-basis:160px;
}
.label-w180 > .item > label{
	flex-basis:180px;
}
.label-w200 > .item > label{
	flex-basis:200px;
}
.label-w220 > .item > label{
	flex-basis:220px;
}
.label-w240 > .item > label{
	flex-basis:240px;
}

.label-bold > .item > label{
	font-weight:bold;
}

.input-group{
    display:flex;
    align-items: center;
    gap:5px;
}
.input-group > .item{
   flex:1;
}
.input-group > .item input[type='text'],
.input-group > .item input[type='number'],
.input-group > .item input[type='search'],
.input-group > .item select
{
    width:100%;
}
.input-group > .item label{
	display:block;
    padding:0 0 5px;
}