#main {
}
.boxArea {
}
.boxArea li {
	width:100%;
	display:none;
}
.boxArea li.is-active {
	display:block;
}
.boxArea li.is-screenshot {
	display:block;
	position:absolute;
	top:100000px;
	left:0;
}

.boxArea li section{
	border-radius:14px;
	background: #FFF;
	box-shadow: 0px 0px 20px 4px #ddd;
	overflow:hidden;
}

.inpArea {
	font-size:0;
}
.inp {
	display:inline-block;
	margin-bottom:28px;
	width:100%;
}
.inp.half {
	width:50%;
}
.inp.half.left {
	padding-right:20px;
}
.inp.half.right {
	padding-left:20px;
}
.inp input{
	border-radius:20px;
}

.stepBox {
	width:100%;
	padding:32px 28px;
	display:flex;
	justify-content: space-between;
}
.stepBox > div{
	min-width:20%;
	padding:18px;
	border:1px solid #008ccf;
	border-radius: 14px;
	color:#008ccf;
}
.stepBox .number{
	font-size:23px;
}
.stepBox h4{
	font-size:16px;
	font-weight: normal;;
}

.stepBox > div.is-active{
	background:#008ccf;
	color:#fff;
}
.btnBox {
	padding:48px 0 60px;
	text-align:center;
}
@media (max-width: 767px) {
	button.btn {
		min-width:180px;
		margin:0 8px;
	}
}
@media (max-width: 640px) {
	.stepBox > div {
		padding:12px;
	}
	.stepBox h4{
		font-size:12px;
	}
	.stepBox .number{
		font-size:20px;
	}
	.inp.half.left {
		padding-right:10px;
	}
	.inp.half.right {
		padding-left:10px;
	}
}

@media (max-width: 480px) {
	button.btn {
		min-width:130px;
		margin:0 4px;
		height:48px;
		line-height:48px;
		font-size:16px;
	}
	.stepBox{
		padding:32px 16px;
	}
	.stepBox h4{
		display:none;
	}
	.stepBox .number{
		text-align:center;
	}
	.inp {
		margin-bottom:12px;
	}
	.inp.half {
		width:100%;
	}
	.inp.half.left {
		padding-right:0px;
	}
	.inp.half.right {
		padding-left:0px;
	}
}

.step1 .sec1 .inpArea{
	padding:25px 28px;
}
.step1 .sec1 .inpArea h5{
	font-size:16px;
	font-weight: normal;
	margin-bottom:12px;
	padding-left:8px;
}
.step1 .sec1 .inp.zip {
	width:280px;
	margin-bottom:12px;
}
.step1 .sec1 .inp.zip input{
	width:136px;
	margin-left:20px;
}
.step1 .sec1 .inp.addr{
	width:calc(100% - 280px);
	padding-left:20px;
	margin-bottom:12px;
}
.step1 .sec1 .inp.bank{
	width:180px;
}
.step1 .sec1 .inp.accNumber{
	width:calc(100% - 360px);
	padding:0 20px;
}
.step1 .sec1 .inp.accHolder{
	width:180px;
}

.step1 .sec2 {
	margin-top:70px;
}
.step1 .sec2 h4{
	padding:18px 23px;
	border-bottom:1px solid #dedede;
	font-size:14px;
	color:#565656;
}
.step1 .sec2 h4 input[type=checkbox]{
	border:1px solid #008ccf;
	width:18px;
	height:18px;
	appearance: none;
	margin-left:8px;
}
.step1 .sec2 h4 input[type=checkbox]:checked{
	background:#008ccf;
}
.step1 .sec2 .agreeInfo{
	padding:20px 36px;
	height:170px;
	overflow-y: auto;
	font-size:14px;
	color:#565656;
}
.step1 .sec2 .agreeInfo h5{
	font-size:16px;
	font-weight:normal;
}

@media (max-width: 767px) {
	.step1 .sec1 .inp.addr {
		width:100%;
		padding:0;
	}
	.step1 .sec1 .inp.bank {
		width:100%;
		margin-bottom:12px;
	}
	.step1 .sec1 .inp.accNumber {
		width:100%;
		padding:0;
		margin-bottom:12px;
	}
	.step1 .sec1 .inp.accHolder {
		width:100%;
	}
}
@media (max-width: 640px) {

}
@media (max-width: 480px) {
	.step1 .sec1 .inpArea {
		padding:25px 16px;
	}
	.step1 .sec1 .inpArea h5 {
		margin-top:20px;
	}
	.step1 .sec1 .inp.zip {
		width:100%;
	}
	.step1 .sec1 .inp.zip button{
		width:calc((100% - 20px) / 2);
		padding:0;
	}
	.step1 .sec1 .inp.zip input{
		width:calc((100% - 20px) / 2);
	}
}



.step2 .contractForm{
	height:750px;
	overflow-y: auto;
	margin-bottom:40px;
}




.step3 .signaturePad{
	width:100%;
	padding:0 28px;
	margin-top:28px;
}
.step3 .signaturePad .canvasArea{
	background:#ebf3fa;
	border:1px solid #008ccf;
	border-radius:20px;
}
.step3 .signaturePad canvas{
	width:100%;
	height:350px;
}
.step3 .text {
	margin-top:30px;
	font-size:18px;
	text-align:center;
}
.step3 .btnArea {
	margin:40px 0 60px;
	text-align:center;
}

@media (max-width: 767px) {
	.step3 .signaturePad .canvasArea {
		height:0;
		padding-bottom:70%;
		position:relative;
	}
	.step3 .signaturePad canvas {
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}
}
@media (max-width: 480px) {
	.step3 .signaturePad {
		padding:0 16px;
	}
	.step3 .text {
		font-size:14px;
	}
}

.step4 .resultBox h4{
	color:#008ccf;
	text-align: center;
	font-size:24px;
	margin-top:12px;
	font-weight: normal;
}
.step4 .resultBox .text{
	padding:58px 28px;
	font-size:18px;
	color:#373737;
	line-height: 170%;
}

@media (max-width: 480px) {
	.step4 .resultBox h4 {
		font-size:20px;
	}
	.step4 .resultBox .text {
		padding: 36px 16px;
		font-size:14px;
	}
}

.popLoading {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.5);
	display:none;
}
.popLoading .inner{
	width:300px;
	padding:40px 0;
	text-align: center;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background:rgba(0, 0, 0, 0.5);
	border-radius: 20px;
	color:#fff;
	font-size:14px;
}
.popLoading.is-active {
	display:block;
}