@charset "utf-8";
/* CSS Document */
html,body { height: 100%; width: 100%; }
.view-container { height: 100%; width: 100%; }
.table { display: table; width: 100%; height: 100%; }
.table-cell { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }
.user-tool-area { position: relative; width: 100%; height: 100%; }
.user-tool-area .bg-area { height: 100%; width: calc(100% - 650px); float: left; position: relative; overflow: hidden; }
.user-tool-area .input-area { height: 100%; width: 650px; float: right; background: #fff; padding: 0 150px; }

.user-tool-area .bg-area .mask { position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; padding: 150px 10% 270px; color: #fff; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.501961) 0%, rgba(41, 50, 203, 0.4) 100%);
    background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.501961) 0%, rgba(41, 50, 203, 0.4) 100%);
    background-image: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.501961) 0%, rgba(41, 50, 203, 0.4) 100%);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.501961) 0%, rgba(41, 50, 203, 0.4) 100%); }
.user-tool-area .bg-area .mask .title { font-size: 4rem; font-weight: 300; line-height: 50px; cursor: default; text-shadow: 0 0 5px rgba(0,0,0,0.1); }
.user-tool-area .bg-area .mask .sub-title { font-size: 1.8rem; font-weight: 100; display: block; margin-top: 30px; cursor: default; text-shadow: 0 0 3px rgba(0,0,0,0.1); }
.user-tool-area .bg-area .mask .logo { width: 135px; display: block; margin-bottom: 20px; }
.user-tool-area .bg-area .mask .logo img { width: 100%; }


.user-tool-area .bg-area .banner-bg { position: absolute; width: 100%; height: 100%; z-index: 1; top: 0; left: 0; }
.user-tool-area .bg-area .banner-bg video { position: absolute; z-index: 1; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }

.user-tool-area .input-area .title-area { font-size: 2.5rem; font-weight: 500; text-align: center; margin-bottom: 30px; }
.user-tool-area .input-area .input-row { margin-bottom: 20px; }
.user-tool-area .input-area .input-row .head { color: #999; font-size: 1.3rem; display: block; margin-bottom: 5px; }
.user-tool-area .input-area input[type=text],
.user-tool-area .input-area input[type=password] { display: block; width: 100%; border: none; border-bottom: 1px solid #555; height: 45px; outline: 0; transition: background .5s; letter-spacing: 0; font-size: 1.5rem; padding: 0 5px; transition: border-color .5s ease,background .5s ease; }
.user-tool-area .input-area input[type=text]:hover,
.user-tool-area .input-area input[type=password]:hover { background: #fafafa; }
.user-tool-area .input-area input[type=text]:focus,
.user-tool-area .input-area input[type=password]:focus { border-bottom: 1px solid #0091ea; }
.user-tool-area .input-area input[type=text]:active,
.user-tool-area .input-area input[type=password]:active { border-bottom: 1px solid #0091ea; }

.user-tool-area .input-area .input-row .notice { display: block; font-size: 1.3rem; margin-top: 5px; font-weight: 300; }
.user-tool-area .input-area .input-row.error .notice { color: #d32f2f }
.user-tool-area .input-area .input-row.error input[type=text],
.user-tool-area .input-area .input-row.error input[type=password] { border-bottom: 1px solid #d32f2f; }
.user-tool-area .input-area .input-row.success .notice { color: #4caf50 }
.user-tool-area .input-area .input-row.success input[type=text],
.user-tool-area .input-area .input-row.success input[type=password] { border-bottom: 1px solid #4caf50; }


.user-tool-area .input-area .option .check { float: left; }
.user-tool-area .input-area .option .find { float: right; font-size: 1.3rem; line-height: 20px; cursor: default; margin-top: 3px; color: #555; text-align: center; color: #999; }
.user-tool-area .input-area .option .find a { line-height: 20px; display: inline-block; font-weight: 300; cursor: pointer; color: #555; }
.user-tool-area .input-area .option .find a:hover { color: #021CD9; text-decoration: underline; }

.user-tool-area .input-area .login .login-btn { background: #001ad9; font-weight: 500; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); transition: background .25s ease,box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 50px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; }
.user-tool-area .input-area .login .login-btn:hover { background: #0017C1; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

.user-tool-area .input-area .find-btn { background: #001ad9; font-weight: 500; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); transition: background .25s ease,box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 50px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; }
.user-tool-area .input-area .find-btn:hover { background: #0017C1; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

.user-tool-area .input-area .register-btn { background: #001ad9; font-weight: 500; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); transition: background .25s ease,box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 50px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; }
.user-tool-area .input-area .register-btn:hover { background: #0017C1; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

.user-tool-area .input-area .change-btn { background: #001ad9; font-weight: 500; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); transition: background .25s ease,box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 50px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; }
.user-tool-area .input-area .change-btn:hover { background: #0017C1; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

.user-tool-area .input-area .login + .sns { margin-top: 60px; }
.user-tool-area .input-area .sns button { height: 45px; display: block; width: 100%; line-height: 43px; border-radius: 50px; outline: 0; border: 1px solid #dcdcdc; background: #fff; font-size: 1.35rem; font-weight: 400; margin-bottom: 10px; color: #666; text-align: left; padding-left: 43%; position: relative; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.user-tool-area .input-area .sns button:hover { color: #fff; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.1); }
.user-tool-area .input-area .sns button:after { position: absolute; width: 33px; height: 33px; content: ''; display: block; left: 32.5%; top: 50%; margin-top: -16px; background-size: 33px 33px; transition: background .25s ease; }
.user-tool-area .input-area .sns button.google:after { background: url(../img/user-tool/logo_google.svg); }
.user-tool-area .input-area .sns button.google:hover { background: #e74133; border-color: #D82B1D; }
.user-tool-area .input-area .sns button.google:hover:after { background: url(../img/user-tool/logo_google_w.svg); }
.user-tool-area .input-area .sns button.naver:after { background: url(../img/user-tool/logo_naver.svg); }
.user-tool-area .input-area .sns button.naver:hover { background: #06be34; border-color: #03A62B; }
.user-tool-area .input-area .sns button.naver:hover:after { background: url(../img/user-tool/logo_naver_w.svg); }
.user-tool-area .input-area .sns button.facebook:after { background: url(../img/user-tool/logo_facebook.svg); }
.user-tool-area .input-area .sns button.facebook:hover { background: #3a5ca9; border-color: #2A4D9B; }
.user-tool-area .input-area .sns button.facebook:hover:after { background: url(../img/user-tool/logo_facebook_w.svg); }
.user-tool-area .input-area .sns button.twitter:after { background: url(../img/user-tool/logo_twitter.svg); }
.user-tool-area .input-area .sns button.twitter:hover { background: #3095d3; border-color: #2288C7; }
.user-tool-area .input-area .sns button.twitter:hover:after { background: url(../img/user-tool/logo_twitter_w.svg); }

.user-tool-area .input-area .link { margin-top: 30px; text-align: center; }
.user-tool-area .input-area .link a { color: #999; font-size: 1.3rem; font-weight: 300; display: inline-block; margin: 0 5px; }
.user-tool-area .input-area .link a b { margin-top: 0; display: block; }
.user-tool-area .input-area .link a:hover b { text-decoration: underline; }

.user-tool-area .input-area.register-area { padding-top: 80px; padding-bottom: 80px; overflow-y: auto; }
.user-tool-area .input-area .sns + .register { margin-top: 30px; padding-top: 30px; border-top: 1px solid #dcdcdc; }
.user-tool-area .input-area.register-area .check { float: none; margin-bottom: 5px; }

.login .tab-menu { position: relative; margin-bottom: 30px; }
.login .tab-menu ul li { float: left; width: 50%; }
.login .tab-menu ul li a { display: block; width: 100%; padding: 10px 0; border: 1px solid #dee3eb; text-align: center; font-size: 1.2rem; background: #fff; transition: background .2s ease; }
.login .tab-menu ul li a:hover { background: #fafafa; }
.login .tab-menu ul li.select a:hover,
.login .tab-menu ul li.select a { background: #001ad9; border-color: #001ad9; color: #fff; }

@media all and (max-width: 1079px)
{
	.user-tool-area .bg-area { width: 100%; height: 40px; }
	.user-tool-area .bg-area .mask { padding: 10px 30px; }
	.user-tool-area .bg-area .mask .title,
	.user-tool-area .bg-area .mask .sub-title { display: none; }
	.user-tool-area .bg-area .mask .logo { width: 75px; margin: 0 auto; }
	.user-tool-area .bg-area .banner-bg { background: #0D0F1B; background-image: none; background-image: -webkit-none; background-image: -o-none; background-image: -moz-none; }
	.user-tool-area .bg-area .banner-bg video  { display: none; }
	.user-tool-area .input-area { width: 100%; height: calc(100% - 40px); }
}
@media all and (max-width: 639px)
{
	.user-tool-area .input-area { padding: 80px 50px 150px; overflow-y: auto; }
	.user-tool-area .input-area .table { display: block; }
	.user-tool-area .input-area .table .table-cell { display: block; }
	
	.user-tool-area .input-area .login .login-btn { margin-top: 30px; }
	.user-tool-area .input-area .sns { margin-top: 40px; }
}
@media all and (max-height: 799px)
{
	.user-tool-area .input-area { padding-top: 80px; padding-bottom: 150px; overflow-y: auto; }
}