@charset "utf-8";

/************************************** import **************************************/

/* 리셋 */
@import url("common.css");



/************************************** form **************************************/

.sso-form-container { position: relative; padding: 50px 20px;}

.sso-form-container .sso-form-wrap .form { width: 400px; height: auto; display: block; margin: 0 auto; }
.sso-form-container .sso-form-wrap .form .logo-area { position: relative; width: 100%; text-align: center; padding:30px 0 50px;}
.sso-form-container .sso-form-wrap .form .logo-area .logo { width: 170px;}

.sso-form-container .sso-form-wrap .form .input-area .row { position:relative; margin-bottom: 20px; }
.sso-form-container .sso-form-wrap .form .input-area .row .login-icon { width: 17px; position: absolute; top: 13px; left:15px;}
.sso-form-container .sso-form-wrap .form .input-area .row:last-child { margin-bottom: 0; }
.sso-form-container .sso-form-wrap .form .input-area .row .title { display: block; font-size: 1.3rem; font-weight: 500; color: #61646C; cursor: default; margin-bottom: 5px;}
.sso-form-container .sso-form-wrap .form .input-area .row .title .imp { background: #ff7e80; margin-left: 5px; width: 4px; height: 4px; display: inline-block; border-radius: 10px; position: relative; top: -7px; }
.sso-form-container .sso-form-wrap .form .input-area .row input[type=text],
.sso-form-container .sso-form-wrap .form .input-area .row input[type=password] { width: 100%; height: 48px; border: none; outline: 0; padding: 0 10px; font-size: 1.3rem; font-weight: 400; background:#f0f0f0; transition: background .25s ease; border-radius: 4px; margin-bottom:10px; }
.sso-form-container .sso-form-wrap .form .input-area.login .row { margin-bottom:10px;}
.sso-form-container .sso-form-wrap .form .input-area.login .row input[type=text],
.sso-form-container .sso-form-wrap .form .input-area.login .row input[type=password] { padding-left: 50px; }
.sso-form-container .sso-form-wrap .form .input-area .row input[type=text]:focus,
.sso-form-container .sso-form-wrap .form .input-area .row input[type=password]:focus,
.sso-form-container .sso-form-wrap .form .input-area .row input[type=text]:active,
.sso-form-container .sso-form-wrap .form .input-area .row input[type=password]:active,
.sso-form-container .sso-form-wrap .form .input-area .row input[type=text]:hover,
.sso-form-container .sso-form-wrap .form .input-area .row input[type=password]:hover { background: #e9e9e9; }
.sso-form-container .sso-form-wrap .form .input-area .row input[type=text]:last-child,
.sso-form-container .sso-form-wrap .form .input-area .row input[type=password]:last-child { margin-bottom:0; }

.sso-form-container .sso-form-wrap .form .input-area button.btn-bg { background: #000; border: none; width: 100%; border-radius: 4px; display: block; font-size: 1.4rem; color: #fff; font-weight: 500; margin-top: 20px; height: 50px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); transition: box-shadow .25s ease,background .25s ease; outline: 0; }
.sso-form-container .sso-form-wrap .form .input-area button.btn-bg .material-icons { font-size: 1.8rem; padding-left: 5px;}

.sso-form-container .sso-form-wrap .form .input-area button.btn-border { background: none; color: #000; margin-top: 10px; box-shadow: none; border:1px solid #000;}
.sso-form-container .sso-form-wrap .form .input-area button.btn-border .material-icons { font-size: 1.8rem; padding-left: 5px;}

.sso-form-container .sso-form-wrap .form .social-area { margin-top: 30px; padding-top:30px; text-align: center; border-top: 1px dashed #bbb;}
.sso-form-container .sso-form-wrap .form .social-area .soc-tit { margin-bottom: 20px; font-weight: 500; color:#999; font-size: 1.3rem; }
.sso-form-container .sso-form-wrap .form .social-area button { display:block; border: none; color: #fff; transition: background .25s ease; outline: 0; text-align: left;padding: 10px 15px;margin-bottom: 6px;border-radius: 5px; width:100%; text-align:center;}
.sso-form-container .sso-form-wrap .form .social-area button > img { width: 18px; margin-right:8px; vertical-align: middle;}
.sso-form-container .sso-form-wrap .form .social-area button.facebook { background: #4C69BA; }
.sso-form-container .sso-form-wrap .form .social-area button.facebook:hover { background: #3C5393; }
.sso-form-container .sso-form-wrap .form .social-area button.google { background: #e24530; }
.sso-form-container .sso-form-wrap .form .social-area button.google:hover { background: #d5341e; }
.sso-form-container .sso-form-wrap .form .social-area button.linkedin { background: #1388C8; }
.sso-form-container .sso-form-wrap .form .social-area button.linkedin:hover { background: #0776B3; }
.sso-form-container .sso-form-wrap .form .social-area button.naver { background: #19ce60; }
.sso-form-container .sso-form-wrap .form .social-area button.naver:hover { background: #0DB750; }

.sso-form-container .sso-form-wrap .form .etc-area { text-align: center; margin-top: 20px; }
.sso-form-container .sso-form-wrap .form .etc-area a { font-size: 1.3rem; color: #999; cursor: pointer; line-height: 15px; font-weight: 500; text-decoration: underline;}

@media all and (max-width:500px)
{
	.sso-form-container .sso-form-wrap .form { width: 100%; }
	.sso-form-container .sso-form-wrap .form .logo-area .logo { width:140px}
	.sso-form-container .sso-form-wrap .form .input-area .row input[type=text],
	.sso-form-container .sso-form-wrap .form .input-area .row input[type=password] { height: 45px; }
}



/************************************** 팝업 CSS **************************************/


.popup-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3)}
.popup-wrap .popup {position: absolute; top: 50%; left: 50%; width: 500px; height: 85vh; background-color: #fff; transform: translate(-50%,-50%); border-radius: 10px; box-shadow: 0px 10px 20px #929292; overflow:hidden; }
.popup-wrap .popup .modal-title-area {padding: 20px; font-size: 1.8rem; font-weight: 600; position: relative;}
.popup-wrap .popup .modal-title-area .close-btn { position: absolute; right:20px; top: 17px; cursor: pointer}
.popup-wrap .popup .modal-title-area .close-btn:hover {opacity: 0.8}
.popup-wrap .popup .modal-title-area .close-btn img {width: 22px; height: 22px; opacity: 0.5}
.popup-wrap .popup .modal-text-area {padding: 20px ; overflow-y:auto; height: calc(100% - 40px);}
.popup-wrap .popup .modal-text-area .sso-form-container { padding:0; }
.popup-wrap .popup .sso-form-container .sso-form-wrap .form .logo-area {padding:15px 0 30px}

@media(max-width: 800px) {
	.popup-wrap .popup {width: calc(100% - 40px)}
}

@media(max-width: 768px) {
	.popup-wrap .popup .modal-title-area {font-size: 1.6rem;padding: 15px;}
	.popup-wrap .popup .modal-title-area .close-btn {top: 14px; right: 15px;}
}

@media(max-width: 500px) {
	.popup-wrap .popup .modal-title-area {font-size: 1.5rem;}
	.popup-wrap .popup .modal-title-area .close-btn {top: 13px}
}