@charset "utf-8";
/* 회원 전환 */
html, body { min-width: auto; } 
#ebric_wrap { background: #f2f4f7; height: 100%; width: 100%; display: table; }
.switching-form-wrap { display: table-cell; vertical-align: middle; }
.switching-form-wrap .switching-form { width: 1200px; height: 500px; background: #fff; margin: 0 auto; text-align: center; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px -10px rgba(0,0,0,0.1); }
.switching-form-wrap .switching-form .title-area { background: #202CAF; padding-top: 50px; position: relative; float: left; width: 50%; height: 100%; }
.switching-form-wrap .switching-form .title-area:after { position: absolute; content: ''; right: -30px; top: 50%; margin-top: -30px; width: 30px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #202CAF;  }
.switching-form-wrap .switching-form .title-area .sub-title { font-size: 1.45rem; color: #FF0000; font-weight: 400; background: #08116F; height: 35px; display: inline-block; line-height: 35px; border-radius: 30px; padding: 0 30px; margin-bottom: 10px; }
.switching-form-wrap .switching-form .title-area h1 { font-size: 3.2rem; font-weight: 700; color: #fff; margin-bottom: 20px; text-shadow: 0 3px 5px #131F9E; letter-spacing: -1px; }
.switching-form-wrap .switching-form .title-area p { font-size: 1.4rem; color: rgba(255,255,255,0.8); font-weight: 300; padding: 0 40px; }
.switching-form-wrap .switching-form .input-area { float: right; width: 50%; height: 100%; padding: 80px 100px; text-align: left; }
.switching-form-wrap .switching-form .input-area .row { margin-bottom: 15px; }
.switching-form-wrap .switching-form .input-area .row .head { font-size: 1.4rem; display: block; font-weight: 500; margin-bottom: 5px; color: #666;  }
.switching-form-wrap .switching-form .input-area .row input[type=text],
.switching-form-wrap .switching-form .input-area .row input[type=password] { height: 40px; font-size: 1.4rem; width: 100%; padding: 0 10px; }
.switching-form-wrap .switching-form .input-area .row .input input[type=text] { width: calc(100% - 130px); }
.switching-form-wrap .switching-form .input-area .row .input .check-btn { height: 40px; border-radius: 3px; background: #1C2264; float: right; width: 120px; line-height: 40px; color: #fff; text-align: center; font-size: 1.3rem; }
.switching-form-wrap .switching-form .input-area .submit-btn { width: 100%; height: 55px; border-radius: 3px; border: none; margin-top: 30px; font-size: 1.7rem; color: #fff; background: #3040F3; }

.comment { display: block; margin: 5px 0; font-weight: 400; font-size: 1.2rem; clear: both; }
.comment.error { color: #FF2629; }
.comment.complete { color: #0AC548; }

@media all and (max-width: 1199px)
{
	.switching-form-wrap .switching-form { width: 100%; border-radius: 0; }
	.switching-form-wrap .switching-form .title-area { padding: 50px 5% 30px; }
	.switching-form-wrap .switching-form .title-area img { max-width: 100%;  }
	.switching-form-wrap .switching-form .title-area h1 { font-size: 2.8rem; }
	.switching-form-wrap .switching-form .title-area p { padding: 0; }
	.switching-form-wrap .switching-form .input-area { padding: 80px 5%; }
}
@media all and (max-width: 860px)
{
	.switching-form-wrap .switching-form .title-area { padding: 50px 3% 50px; }
	.switching-form-wrap .switching-form .input-area { padding: 80px 3%; }
	.switching-form-wrap .switching-form .title-area:after { display: none; }
}
@media all and (max-width: 768px)
{
	#ebric_wrap { display: block; overflow-y: auto;  }
	.switching-form-wrap { display: block;  }
	.switching-form-wrap .switching-form { height: auto; }
	.switching-form-wrap .switching-form .title-area { width: 100%; }
	.switching-form-wrap .switching-form .title-area:after { display: block; top: auto; bottom: -20px; right: auto; margin-top: auto; left: 50%; margin-left: -30px; border-top: 20px solid #202CAF; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: none; }
	.switching-form-wrap .switching-form .input-area { width: 100%; padding-top: 60px; }
}