@charset "UTF-8";

/*로그인 전*/
	/*제목*/
	#_UlgnS_basic._loginBefore h2{
		display: none;
	}
	/*아이디비번입력,로그인,회원가입*/
	#_UlgnS_basic._loginBefore ._loginInputWrap{position: relative; display: flex; padding-top: 30px;}
	#_UlgnS_basic._loginBefore ._loginInputWrap::after{content: ''; display: block; clear: both;}

	/* #_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput {
		border-right: 1px #ccc solid;
		margin-right: 70px;
	} */
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput{ width: 70%;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginSubmit{ padding: 48px 52px; background: #0D78CA; cursor: pointer; font-size: 16px;font-family: "Dream Medium"; color: #fff; margin-left: 10px;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea{position: relative; padding-bottom: 10px;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input{	width: 100%; padding: 0;height: 55px;		line-height: 40px; font-size: 16px; font-family: "Dream Regular"; padding-left: 50px;} 
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input#userId{border-bottom: 1px #ddd solid; background: #fff; position: relative;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea.login-id::after {content:''; width:25px; height:25px; background:url(../images/login-user-ic.png) no-repeat center center; position: absolute; left:11px; top:15px;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input#userId::placeholder{color:#a0a0a0; font-size: 16px; letter-spacing: -.05em;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input#userPwd{background: #fff; position: relative;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea.login-pwd::after {content:''; width:25px; height:25px; background:url(../images/login-pw-ic.png) no-repeat center center; position: absolute; left:11px; top:15px;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input#userPwd::placeholder{color:#a0a0a0; font-size: 16px; letter-spacing: -.05em;}
	#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea:last-child{padding-bottom: 0;}
	#_UlgnS_basic._loginBefore ._loginInput ._formCheck{
		position: absolute;
		top: 4px;
		left: 110px;
		margin: 0;
	}
	/*아이디찾기,비번찾기*/
	#_UlgnS_basic._loginBefore ._findInfo{display: flex; max-width: 655px; padding-top: 30px;}
	#_UlgnS_basic._loginBefore ._findInfo li{	width: 50%; margin-right: 10px; }
	#_UlgnS_basic._loginBefore ._findInfo li:last-child{ margin-right:0; }
	/* #_UlgnS_basic._loginBefore ._findInfo li ._gotoLoginMember,
	#_UlgnS_basic._loginBefore ._findInfo li ._findLoginId,
	#_UlgnS_basic._loginBefore ._findInfo li ._findLoginPw{
		height: 40px;
		width: 100%;
		line-height: 30px;
		background-color: transparent;
		border: 0;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 0 10px 10px 10px;
		cursor: pointer;
	} */

	#_UlgnS_basic._loginBefore ._findInfo li a{
		display: block;
		min-height: 40px;
		width: 100%;
		line-height: 20px;
		font-size: 14px;
		background-color: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 0 10px 10px 10px;
		cursor: pointer;
		text-align: center;
		position: relative;
		background:linear-gradient(135deg, #fff 50%, transparent 50%); background-size:400%; background-position:100%; transition: .7s; transition-property: background, color;
	}
	#_UlgnS_basic._loginBefore ._findInfo li a:hover {
		background-position: 0%;
		color:#009DE7;
	}

/*로그인 후*/
	/*제목*/
	#_UlgnS_basic._loginAfter h2{
		display: none;
	}
	#_UlgnS_basic._loginAfter {min-height:500px;}
	/*로그인정보*/
	#_UlgnS_basic._loginAfter ._loginInfo{
		/* margin: 10px; */
		text-align: left;
		font-size: 1em;
	}
	#_UlgnS_basic._loginAfter ._loginInfo ._loginMsg {
		height: 73px;
		line-height: 35px;
		color: #fff;
	}
	#_UlgnS_basic._loginAfter ._loginInfo ._loginMsg strong{
		color: #4B575E;
	}
	#_UlgnS_basic._loginAfter ._uInfo {
		overflow: hidden;
		position: relative;
		/* border: 1px #ccc solid; */
		/* margin: 0 10px 10px; */
		display: flex;
	}
	#_UlgnS_basic._loginAfter ._uInfo li{
		display: block;
		height: 40px;
		width: 50%;
		line-height: 40px;
		font-size: 14px;
		background-color: transparent;
		border: 0;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 0 10px 10px 10px;
		cursor: pointer;
		text-align: center;
		background: none;
		margin-right: 10px;
		background:linear-gradient(135deg, #fff 50%, transparent 50%); background-size:400%; background-position:100%; transition: .7s; transition-property: background, color;
	}
	#_UlgnS_basic._loginAfter ._uInfo li:hover {
		background-position:0%;

	}
	/*버튼*/
	#_UlgnS_basic._loginAfter ._uInfo li ._btnLogout,
	#_UlgnS_basic._loginAfter ._uInfo li ._btnEditInfo{
		display: block;
		width: 100%;
		text-align: center;
		height: 40px;
		line-height: 30px;
		border-style: solid;
		background-color: transparent;
		color:#fff;
		font-family: 'Dream Regular';
		font-size: 14px;
		cursor: pointer;
		transition:color .7s;
	}
	#_UlgnS_basic._loginAfter ._uInfo li ._btnLogout:hover,
	#_UlgnS_basic._loginAfter ._uInfo li ._btnEditInfo:hover {
		color:#009DE7;
	}
	/* #_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;
	}
	#_contentBuilder ._fnctWrap {padding-bottom: 70px;}
	.login-box{  position: relative;}
	.login-bg{background: url(../images/login-bg.jpg) no-repeat center center / cover; width: 100%;padding: 60px;}
	.login-bg::after{content: ''; display: block; clear: both;}
	.login-box .pic-area{float: right; width: 670px; position: absolute; right: 0; bottom: -20px;}
	.login-box .pic-area::before{content: ''; background: url(../images/login-shape.png) no-repeat right center / cover; width: 128px; height: 128px; position: absolute; top: -57px; right:28px; animation: rotateCircle 10s linear infinite;}
	.login-box .pic-area img{box-shadow: 10px 10px 22px rgb(0,0,0,0.5);}
	.login-box .login-left{float: left;width: calc(100% - 670px);}
	.login-left .login-tit > p{font-size: 20px; font-family: "Gmarket Bold"; line-height: 30px; color: #fff; opacity: 0.5;}
	.login-left .login-tit > span{font-size: 40px; font-family: "Gmarket Bold"; line-height: 30px; color: #fff; opacity: 0.5; padding-top: 12px; display: inline-block;}	
	.login-left .login-txt{margin-top: 22px;}
	.login-left .login-txt > p{font-size: 25px; font-family: "Dream Regular"; line-height: 30px; color: #fff; letter-spacing: -.05em; margin-bottom: 5px;}
	.login-left .login-txt > span{font-size: 16px; font-family: "Dream Regular"; line-height: 30px; color: #fff; letter-spacing: -.05em;}

	@keyframes rotateCircle {
		100% {transform: rotate(360deg);}
	}

	@media all and (max-width:1330px){
		.login-box .login-left{width: calc(100% - 540px); }
		.login-box .pic-area{width: 540px;right: 28px;}
		.login-box .pic-area::before{right: -22px; width: 108px; height: 108px;}
	}

	@media all and (max-width:1200px){
		.login-box .login-left{width: 45%; }
		.login-box .pic-area{width: 50%; top: 80px;}
		#_UlgnS_basic._loginBefore ._findInfo{width: 100%;}
	}

	@media all and (max-width:1040px){
		.login-bg{padding: 29px;}
		.login-box .login-left{width: 100%; float: none; }
		.login-box .pic-area{position: static; width: 100%; float: none; text-align: center; }
		#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput{width: 80%;}
		.login-box .pic-area::before{background: none;}
	}

	@media all and (max-width:768px){
	
		.login-left .login-txt > p{font-size: 22px;}
		.login-left .login-txt > span{font-size: 15px;}
		#_UlgnS_basic._loginBefore ._findInfo li {width:50%;}
		#_UlgnS_basic._loginBefore ._loginInputWrap{display: block; width: 100%;}
		#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput{width: 100%;}
		#_UlgnS_basic._loginBefore ._loginInputWrap ._loginSubmit{width: 100%; padding: 15px 0; margin-left: 0; margin-top: 10px; border-radius: 5px 5px 5px 5px;}
		.login-box .pic-area img{box-shadow: 10px 13px 12px rgb(0,0,0,0.2);}
	}
	@media all and (max-width:700px){
		.login-box .pic-area{display: none;}
		#_UlgnS_basic._loginBefore ._findInfo{display: block;}
		#_UlgnS_basic._loginBefore ._findInfo li {width: 100%; margin-bottom: 10px;}
		#_UlgnS_basic._loginBefore ._findInfo li:last-child{margin-bottom: 0;}
		.login-box .pic-area{padding-right: 17px;}

	}
