/* Basic Form */
.table {
	display: flex;
	flex-wrap: wrap;
	margin:-1.041vw -2.604vw;
}

.table .row {
	flex:1 1 50%;
	max-width:50%;
	padding: 1.041vw 2.604vw;
}

.table .row-w100 {
	flex:1 1 100%;
	max-width:100%;
}

.table .th {
	font-size:1.25vw;
	margin-bottom:1.041vw;
}

.table input,
.table select {
	width:100%;
	height:4.16667vw;
	padding:0px 30px;
	background-color: #f5f5f5;
	border:1px solid #626262;
	border-radius:10px;
	font-size:1vw;
}

.table textarea {
  resize: none;
  display: block;
	width:100%;
	height:20.8vw;
	padding:30px;
	background-color: #f5f5f5;
	border:1px solid #626262;
	border-radius:10px;
	font-size:1vw;
	line-height:1.4;
}

.table .chk-list {
	display: flex;
	flex-wrap: wrap;
	margin:-1.041vw;
}

.table .chk-list li {
	flex:1 1 16.6667%;
	max-width:16.6667%;
	padding:1.041vw;
}

.table .chk-list label {
	display: flex;
	align-items: center;
	gap:1.041vw;
	position:relative;
	cursor: pointer;
}

.table .chk-list input {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	opacity:0;
	overflow: hidden;
	z-index: 0;
}

.table .chk-list i {
	display:block;
	position: relative;
	z-index: 2;
	width:1.5625vw;
	height:1.5625vw;
	background: url('../img/sub/contact/check_off.png') no-repeat center / auto 1.5625vw;
	cursor: pointer;
}

.table .chk-list span {
	position: relative;
	font-size:1.25vw;
	z-index: 2;
	cursor: pointer;
}

.table .chk-list input:checked + i {
  background-image: url('../img/sub/contact/check_on.png');
}

.table .file {
	display: block;
	position:relative;
	max-width:840px;
}

.table .file label {
	display: flex;
	align-items: center;
	position:relative;
	max-width:840px;
	width:100%;
	height:4.16667vw;
	background-color: #f5f5f5;
	border:1px solid #626262;
	border-radius:10px;
	cursor:pointer;
	overflow:hidden;
}

.table .file input {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	opacity:0;
	visibility: hidden;
}

.table .file .file-label {
	/* display: block;	 */
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical;
	overflow: hidden;
	width:calc(100% - 20%);
	padding:0px 30px;
	font-size: 1vw;
	color:#808080;
}

.table .file .file-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap:0.5208vw;
	width:20%;
	height:100%;
	background-color: #e8e0f1;
	border-left: 1px solid #626262;
	font-size: 1vw;
}

.table .file .file-btn::after {
	content: "";
	display: block;
	width:1.09vw;
	height:1.09vw;
	background: url('../img/sub/contact/ico_file.png') no-repeat center / auto 1.09vw;
}

.agree {
	display: flex;
	align-items: center;
	gap:10px;
	margin-top:1.5625vw;
}

.agree label {
	position:relative;
	display: inline-flex;
	align-items: center;
	gap:10px;
	cursor:pointer;
}

.agree input {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	opacity:0;
	visibility: hidden;
}

.agree i {
	display:inline-block;
	width:1.5625vw;
	height:1.5625vw;
	background: url('../img/sub/contact/check_off.png') no-repeat center / auto 1.5625vw;
}

.agree span {
	font-size: 1vw;
}

.agree button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size:1vw;
	font-weight:700;
	color:#7828ca;
	text-decoration: underline;
	text-underline-offset:4px;
}

.agree input:checked + i {
  background-image: url('../img/sub/contact/check_on.png');
}

.btns {
	display: flex;
	justify-content: center;
	margin-top:4.1667vw;
}

.btns button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width:auto;
	height: 4.1666vw;
	padding:0px 8%;
	background-color: #7828ca;
	border-radius: 100px;
	border:2px solid #ffffff;
	box-shadow:inset 0px 2px 0px rgba(255, 255, 255, 0), inset 0px 0px 46px rgba(255, 255, 255, .40);
	font-size: 1.25vw;
	font-weight: 700;
	color:#fff;
}

.form-modal {
	display: none;
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  place-items: center;
  z-index: 9999999;
}

.form-modal .modal-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width:680px;
	max-height: none;
	width: 95%;
	height:auto;
	margin:10px auto;
}

.form-modal .modal-inner {
	width: 100%;
	height: 100%;
	position: relative;
}

.form-modal .modal-heading {
	display: flex;
	justify-content: flex-end;
	margin-bottom:20px;
}

.form-modal .modal-close {
	font-size:1.75vw;
	color:#fff;
}

.form-modal .modal-content {
	background-color: #fff;
	padding:20px;
	border-radius:1vw;
}

.form-modal .modal-textarea {
	height:400px;
	padding:20px;
	overflow-y: auto;
	border:1px solid #ddd;
}

.form-modal .modal-textarea p {
	font-size:14px;
}

.form-modal .modal-background {
	width:100%;
  height:100%;
	background-color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.form-modal .modal-heading {
	display: flex;
	justify-content: flex-end;
}

.form-modal .footer-modal-close{
	display: block;
	width:23px;
	height:23px;
	/* background: url('/child/img/bbs/btn_modal_close.png') no-repeat center;	 */
}

.form-modal .modal-area {
	width: 100%;
	height:100%;
	background-color: #fff;
	border-radius:10px;
	padding: 60px 50px;
	overflow: hidden;
}

.form-modal.open {
	display: block;
}

@media screen and (max-width:1536px) {

}
@media screen and (max-width:1366px) {

}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {
	.table {
		margin: -1.5vw;
	}

	.table .row {
		flex:1 1 100%;
		max-width:100%;
		padding:1.5vw;
	}

	.table .th {
		font-size:3.5vw;
		margin-bottom:1.5vw;
	}

	.table input, .table select {
		height:10vw;
		padding:0px 15px;
		font-size: 3vw;
	}

	.table textarea {
		height:25vw;
		padding: 15px;
		font-size:3vw;
	}

	.table .chk-list {
		margin: -1.5vw;
	}

	.table .chk-list li {
		flex:1 1 33.33%;
		max-width:33.33%;
		padding:1.5vw;
	}

	.table .chk-list i {
		width: 3vw;
		height: 3vw;
		background-size: auto 3vw;
	}

	.table .chk-list span {
		font-size:3vw;
	}

	.table .file label {
		height: 10vw;
	}

	.table .file .file-label {
		padding:0px 15px;
		font-size:3vw;
	}

	.table .file .file-btn {
		font-size: 3vw;
	}

	.table .file .file-btn::after {
		display: none;
	}

	.agree {
		gap:6px;
		margin-top:3vw;
	}

	.agree label {
		gap: 4px;
	}

	.agree i {
		width: 3vw;
		height: 3vw;
		background-size: auto 3vw;
	}

	.agree span {
		font-size: 3vw;
	}

	.agree button {
		font-size: 3vw;
	}

	.btns {
		margin-top: 7.5vw;
	}

	.btns button {
		height: 9.5vw;
		padding:0px 12.5vw;
		font-size:3.75vw;
	}

	.form-modal .modal-heading {
		margin-bottom:10px;
	}

	.form-modal .modal-close {
		font-size: 20px;
	}

	.form-modal .modal-content {
		padding: 16px;
	}

	.form-modal .modal-textarea {
		height:300px;
		padding: 16px;
	}
}
@media screen and (max-width:576px) {

}