@charset "UTF-8";

.wrap-login-tab ul {display: flex; gap: 0 4px; margin-bottom: 60px;}
.wrap-login-tab li {width: 50%;}
.wrap-login-tab button {display: block; width: 100%; padding: 16px 0; border: 1px solid #c5c5c5; font-family: 'Noto Medium'; font-size: 18px; text-align: center; color: #333;}
.wrap-login-tab button:hover,
.wrap-login-tab button.on {background: #002d56; border-color: #002d56; color: #fff;}

.wrap-login .box {display: none;}
.wrap-login .box.on {display: block;}
.wrap-login .grey {overflow: hidden; padding: 50px; background: #f9f9f9;}
.wrap-login .info {float: left; width: calc(100% - 490px); padding-right: 50px;}

.wrap-login .login {position: relative; float: right; width: 490px;}
.wrap-login .login::before {content: ''; position: absolute; right: 82%; bottom: 0; width: 495px; height: 495px; background: url('../images/logo-login.png') no-repeat center;}
.wrap-login .login-box {position: relative; z-index: 1; padding: 40px 50px; background: #fff;}
.wrap-login .form {margin-bottom: 60px;}
.wrap-login .form input {font-size: 18px; font-family:'Noto Medium'; border:0; width: 100%; height: 50px; text-indent: 70px; border-bottom: 1px solid #cdcdcd; transition: all 0.5s ease;}
.wrap-login .form input:focus {border-bottom: 2px solid #008395;}
/*.wrap-login .form input::placeholder {color: #bdbdbd;}*/
.wrap-login .form input::placeholder {color: #666666;}
.wrap-login .form input:focus::placeholder {color: #666666;}
.wrap-login .form .input-id {margin-bottom: 11px;}
.wrap-login .form .input-id input {background: url('../images/icon-id.png') no-repeat bottom left; transition: all 0.5s ease;}
.wrap-login .form .input-id input:focus {background-position: top left 0;}
.wrap-login .form .input-pw input {background: url('../images/icon-pw.png') no-repeat bottom left; transition: all 0.5s ease;}
.wrap-login .form .input-pw input:focus {background-position: top left 0;}
.wrap-login .button {margin-bottom: 40px;}
.wrap-login .button input {font-family: 'Noto Regular'; width: 100%; height: 70px; line-height: 70px; background: #008395; border: 0; color: #ffffff; font-size: 18px; -webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.3);	-moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.3); box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.3); cursor: pointer;}
.wrap-login .button input:hover {background: #009cb1;}
.wrap-login .button a {margin-top: 25px; font-family: 'Noto Regular'; text-align: center; display: block; letter-spacing: 1px; width: 100%; height: 70px; line-height: 70px; background: #2c2c2c; border: 0; border-radius: 100px; color: #ffffff; font-size: 18px; -webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.3);	-moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.3); box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.3);}

.wrap-login .ssl {position: relative; margin-bottom: 50px;}
.wrap-login .ssl span {position: relative; top: -3px; display: inline-block; margin: 0 0 0 10px; font-family: 'Noto Light'; font-size: 18px; color: #000;}
.wrap-login .ssl input[type="checkbox"]{position: absolute; left: 0px; top: 3px; z-index: 1; border: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; cursor: pointer;}
.wrap-login .ssl input[type="checkbox"] + label{position: relative; top: 2px; display: inline-block; width: 21px; height: 21px; background: url('../images/bg-floating-input.png') no-repeat left center;}
.wrap-login .ssl input[type="checkbox"]:checked + label::after{content:''; position: absolute; left: 0; top:0; width: 26px; height: 21px; background: url('../images/bg-floating-input-on.png') no-repeat left center;}

.wrap-login .links li {margin-bottom: 20px;}
.wrap-login .links a {display: block; font-family: 'Noto Regular'; font-size: 18px; color: #e63b53;}
.wrap-login .links span {position: relative;}
.wrap-login .links span::after {content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: #e63b53;}

.wrap-login .agree {margin-top: 40px; font-family: 'Noto Regular'; font-size: 20px; text-align: center; color: #121212;}

.wrap-login .agree-check {position: relative; margin-top: 35px; text-align: center;}
.wrap-login .agree-check .check-box {position: relative; display: inline-block;}
.wrap-login .agree-check span {position: relative; top: -2px; margin-left: 10px; font-family: 'Noto Light'; font-size: 18px; color: #000;}
.wrap-login .agree-check input[type="checkbox"] {
    position: absolute;
    left: -4px; top:-1px;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    width: 20px;
    height: 20px;border: 0px 
}
/*.wrap-login .agree-check input[type="checkbox"]{position: absolute; left: -1px; top: 2px; z-index: 1; border: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; cursor: pointer;}*/

.wrap-login .agree-check input[type="checkbox"]:focus {
    outline: none; /* 기본 아웃라인 제거 */
    border: 2px solid #0056b3; /* 테두리 색상 변경 */
    box-shadow: 0 0 10px red; /* 그림자 효과 추가 */
}

.wrap-login .agree-check input[type="checkbox"] + i {position: relative; top: 2px; display: inline-block; width: 21px; height: 21px; background: url('../images/bg-floating-input.png') no-repeat left center;}
.wrap-login .agree-check input[type="checkbox"]:checked + i::after{content:''; position: absolute; left: 0; top:0; width: 26px; height: 21px; background: url('../images/bg-floating-input-on.png') no-repeat left center;}
.wrap-login .agree-check label {position: relative; top: -3px; margin-left: 6px;}

.wrap-login .sns-choose {margin-top: 55px;}
.wrap-login .sns-choose ul {display: flex; gap: 0 30px; max-width: 520px; margin: 0 auto;}
.wrap-login .sns-choose li {width: 50%;}
.wrap-login .sns-choose .btn-choose {position: relative; width: 100%; padding: 22px 0; text-align: center;}
.wrap-login .sns-choose .btn-choose::before {content: ''; display: inline-block; width: 68px; height: 61px;}
.wrap-login .sns-choose .btn-choose span {display: block; font-family: 'Noto Medium'; font-size: 22px;}
.wrap-login .sns-choose .choose1 {background: #01c73c;}
.wrap-login .sns-choose .choose1:hover {background: #039c31;}
.wrap-login .sns-choose .choose2 {background: #fedc00;}
.wrap-login .sns-choose .choose2:hover {background: #fec300;}
.wrap-login .sns-choose .choose3 {background: #ececec;}
.wrap-login .sns-choose .choose3:hover {background: #c7c7c7;}
.wrap-login .sns-choose .choose1::before {background: url('../images/ico-sns1.png') no-repeat center;}
.wrap-login .sns-choose .choose2::before {background: url('../images/ico-sns2.png') no-repeat center;}
.wrap-login .sns-choose .choose3::before {background: url('../images/ico-sns3.png') no-repeat center;}
.wrap-login .sns-choose .choose1 span {color: #fff;}
.wrap-login .sns-choose .choose2 span {color: #3f3137;}
.wrap-login .sns-choose .choose3 span {color: #333;}

.wrap-login-after {padding: 55px 0; background: #f9f9f9 url('../images/bg-login-after.png') no-repeat center; text-align: center;}
.wrap-login-after .title strong {font-family: 'Noto Bold'; font-size: 30px; color: #000;}
.wrap-login-after .title p {padding-top: 5px; padding-bottom: 48px; font-family: 'Noto Medium'; font-size: 24px; color: #666;}
.wrap-login-after .title p em {color: #008395;}
.wrap-login-after .button button {width: 100%; max-width: 390px; height: 70px; background: #008395; font-family: 'Noto Medium'; font-size: 18px; line-height: 70px; box-shadow: 0px 10px 10px 0 rgba(0,0,0,0.2); color: #fff;}
.wrap-login-after .button button:hover {background: #0296aa;}

@media all and (max-width: 1200px) {
	.wrap-login .login {width: 100%;}
	.wrap-login .info {width: 100%; margin-top: 30px;}
}

@media all and (max-width: 660px) {
	.wrap-login-tab button {font-size: 16px;}

	.wrap-login .login::before {left: 40%; right: auto; bottom: 352px;}
	.wrap-login .login-box {padding: 30px 35px;}
	.wrap-login .grey {padding: 20px;}

	.wrap-login .ssl span {font-size: 16px;}
	.wrap-login .links a {font-size: 16px;}
	.wrap-login .agree {font-size: 17px;}

	.wrap-login .sns-choose {margin-top: 60px;}
	.wrap-login .sns-choose ul {gap: 0 10px;}
	.wrap-login .sns-choose .btn-choose span {font-size: 17px;}
}

/* Old CSS */
#_UlgnS_basic{
	margin-top: 50px;
	border: 1px #ccc solid;
}
/*로그인 전*/
	/*제목*/
	#_UlgnS_basic._loginBefore h2{
		display: none;
	}
	/*아이디비번입력,로그인,회원가입*/
	#_UlgnS_basic._loginBefore ._loginInputWrap{
		border: 1px #ccc solid;
		margin: 10px;
		position: relative;
	}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput {
		border-right: 1px #ccc solid;
		margin-right: 70px;
	}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea{
		position: relative;
	}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input{
		width: 100%;
		border: 0;
		padding: 0;
		text-indent: 1em;
		height: 35px;
		line-height: 35px;
	}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input#userId{
		border-bottom: 1px #ddd solid;
	}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginSubmit{
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		height: 71px;
		line-height: 71px;
		border: 0;
		color: #333;
		font-size: 1.2em;
		background-color: #f7f7f7;
	}
	#_UlgnS_basic._loginBefore ._loginInput ._formCheck{
		position: absolute;
		top: 4px;
		left: 110px;
		margin: 0;
	}
	/*아이디찾기,비번찾기*/
	#_UlgnS_basic._loginBefore ._findInfo{
		margin: 0 10px 10px;
	}
	#_UlgnS_basic._loginBefore ._findInfo li{
		line-height: 30px;
	}
	#_UlgnS_basic._loginBefore ._findInfo li ._gotoLoginMember,
	#_UlgnS_basic._loginBefore ._findInfo li ._findLoginId,
	#_UlgnS_basic._loginBefore ._findInfo li ._findLoginPw{
		float: right;
		height: 30px;
		line-height: 30px;
		background-color: transparent;
		border: 0;
		color: #009df5;
		text-decoration: underline;
	}
/*로그인 후*/
	/*제목*/
	#_UlgnS_basic._loginAfter h2{
		display: none;
	}
	/*로그인정보*/
	#_UlgnS_basic._loginAfter ._loginInfo{
		margin: 10px;
		text-align: center;
		font-size: 1em;
	}
	#_UlgnS_basic._loginAfter ._loginInfo ._loginMsg {
		height: 73px;
		line-height: 73px;
	}
	#_UlgnS_basic._loginAfter ._loginInfo ._loginMsg strong{
		color: #009df5;
	}
	#_UlgnS_basic._loginAfter ._uInfo {
		overflow: hidden;
		position: relative;
		border: 1px #ccc solid;
		margin: 0 10px 10px;
	}
	#_UlgnS_basic._loginAfter ._uInfo li{
		width: 50%;
		float: left;
	}
	/*버튼*/
	#_UlgnS_basic._loginAfter ._uInfo li ._btnLogout,
	#_UlgnS_basic._loginAfter ._uInfo li ._btnEditInfo{
		display: block;
		width: 100%;
		text-align: center;
		height: 30px;
		line-height: 30px;
		border-style: solid;
		background-color: #f7f7f7;
	}
	#_UlgnS_basic._loginAfter ._uInfo li ._btnLogout{
		border-width: 1px 1px 0 0;
		border-color: #fff #ccc #ccc #ccc;
	}
	#_UlgnS_basic._loginAfter ._uInfo li ._btnEditInfo{
		border-width: 1px 0 0 0;
		border-color: #fff #ccc #ccc #ccc;
	}
/*비밀번호변경/개인정보재동의*/
	#_UlgnS_basic._pInfoChangeWrap{
		padding: 20px;
	}
	#_UlgnS_basic._pInfoChangeWrap ._pInfoChangeHead{
		background-color: #f7f7f7;
	    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
	    padding: 1em;
	    margin-bottom: 1em;
	}
	#_UlgnS_basic._pInfoChangeWrap ._pInfoChangeHead h3{
		text-align: center;
	    font-size: 1.2em;
	    margin-bottom: 1em;
	    color: #000;
	    background-color: #C6DEEB;
	    padding: 0.5em;
	    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
	}
	#_UlgnS_basic._pInfoChangeWrap ._pInfoChangeHead ._pInfoChangMsg {
		padding-left: 110px;
		min-height: 80px;
		height: auto !important;
		_height: 80px;
		text-align: left;
		line-height: 2.4;
	}
	#_UlgnS_basic._pInfoChangeWrap ._pInfoChangeHead ._pInfoChangMsg._pwdChange {
		background: url("../images/iconPwdChange.png") no-repeat 10px 0;
	}
	#_UlgnS_basic._pInfoChangeWrap ._pInfoChangeHead ._pInfoChangMsg._indAgree {
		background: url("../images/iconIndAgree.png") no-repeat 10px 0;
	}
	#_UlgnS_basic._pInfoChangeWrap ._pInfoChangeHead ._pInfoChangMsg p:after{
		/*
		content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
		*/
	}
	#_UlgnS_basic._pInfoChangeWrap ._form ._insert{
		text-align: left;
	}