@charset "utf-8";
@import url('/fonts/GmarketSans/font.css');

/****************************************************
	login.css
-----------------------------------------------------
	- 로그인 화면에서 사용되는 스타일 정의
-----------------------------------------------------
	- 최초 작성일 : 2021.09.30
	- 최초 작성자 : 박현정

	- 최종 수정일 : 2022.11.09
	- 최종 수정일 : 김선영
******************************************************/

/*******************************
	Animation Style
*******************************/

body, * {font-family:'Gmarket Sans';}

/** Default Animation : updown */
@keyframes updown{0%{transform:translate(0px,0px)}50%{transform:translate(0px,-10px)}100%{transform:translate(0px,-20px)}}
@-moz-keyframes updown{0%{-moz-transform:translate(0px,0px)}50%{-moz-transform:translate(0px,-10px)}100%{-moz-transform:translate(0px,-20px)}}
@-webkit-keyframes updown{0%{-webkit-transform:translate(0px,0px)}50%{-webkit-transform:translate(0px,-10px)}100%{-webkit-transform:translate(0px,-20px)}}
@-o-keyframes updown{0%{-o-transform:translate(0px,0px)}50%{-o-transform:translate(0px,-10px)}100%{-o-transform:translate(0px,-20px)}}
@-ms-keyframes updown{0%{-ms-transform:translate(0px,0px)}50%{-ms-transform:translate(0px,-10px)}100%{-ms-transform:translate(0px,-20px)}}

/** Clock Animation : rounding */
@keyframes rounding{0%{transform:rotate(0deg) }100%{transform:rotate(360deg) }}
@-moz-keyframes rounding{0%{-moz-transform:rotate(0deg) }100%{-moz-transform:rotate(360deg) }}
@-webkit-keyframes rounding{0%{-webkit-transform:rotate(0deg) }100%{-webkit-transform:rotate(360deg) }}
@-o-keyframes rounding{0%{-o-transform:rotate(0deg) }100%{-o-transform:rotate(360deg) }}
@-ms-keyframes rounding{0%{-ms-transform:rotate(0deg) }100%{-ms-transform:rotate(360deg) }}

/** Human Animation 1 :arm  */
@keyframes arm{0%{transform:rotate(0deg) }15%{transform:rotate(-5deg) }29%{transform:rotate(-10deg) }44%{transform:rotate(0deg) }62%{transform:rotate(-12deg) }80%{transform:rotate(0deg) }100%{transform:rotate(0deg) }}
@-moz-keyframes arm{0%{-moz-transform:rotate(0deg) }15%{-moz-transform:rotate(-5deg) }29%{-moz-transform:rotate(-10deg) }44%{-moz-transform:rotate(0deg) }62%{-moz-transform:rotate(-12deg) }80%{-moz-transform:rotate(0deg) }100%{-moz-transform:rotate(0deg) }}
@-webkit-keyframes arm{0%{-webkit-transform:rotate(0deg) }15%{-webkit-transform:rotate(-5deg) }29%{-webkit-transform:rotate(-10deg) }44%{-webkit-transform:rotate(0deg) }62%{-webkit-transform:rotate(-12deg) }80%{-webkit-transform:rotate(0deg) }100%{-webkit-transform:rotate(0deg) }}
@-o-keyframes arm{0%{-o-transform:rotate(0deg) }15%{-o-transform:rotate(-5deg) }29%{-o-transform:rotate(-10deg) }44%{-o-transform:rotate(0deg) }62%{-o-transform:rotate(-12deg) }80%{-o-transform:rotate(0deg) }100%{-o-transform:rotate(0deg) }}
@-ms-keyframes arm{0%{-ms-transform:rotate(0deg) }15%{-ms-transform:rotate(-5deg) }29%{-ms-transform:rotate(-10deg) }44%{-ms-transform:rotate(0deg) }62%{-ms-transform:rotate(-12deg) }80%{-ms-transform:rotate(0deg) }100%{-ms-transform:rotate(0deg) }}

/** Human Animation 2 :leg  */
@keyframes leg{0%{transform:rotate(0deg) }9%{transform:rotate(15deg) }20%{transform:rotate(0deg) }30%{transform:rotate(10deg) }42%{transform:rotate(-5deg) }57%{transform:rotate(5deg) }68%{transform:rotate(0deg) }82%{transform:rotate(7deg) }100%{transform:rotate(0deg) }}
@-moz-keyframes leg{0%{-moz-transform:rotate(0deg) }9%{-moz-transform:rotate(15deg) }20%{-moz-transform:rotate(0deg) }30%{-moz-transform:rotate(10deg) }42%{-moz-transform:rotate(-5deg) }57%{-moz-transform:rotate(5deg) }68%{-moz-transform:rotate(0deg) }82%{-moz-transform:rotate(7deg) }100%{-moz-transform:rotate(0deg) }}
@-webkit-keyframes leg{0%{-webkit-transform:rotate(0deg) }9%{-webkit-transform:rotate(15deg) }20%{-webkit-transform:rotate(0deg) }30%{-webkit-transform:rotate(10deg) }42%{-webkit-transform:rotate(-5deg) }57%{-webkit-transform:rotate(5deg) }68%{-webkit-transform:rotate(0deg) }82%{-webkit-transform:rotate(7deg) }100%{-webkit-transform:rotate(0deg) }}
@-o-keyframes leg{0%{-o-transform:rotate(0deg) }9%{-o-transform:rotate(15deg) }20%{-o-transform:rotate(0deg) }30%{-o-transform:rotate(10deg) }42%{-o-transform:rotate(-5deg) }57%{-o-transform:rotate(5deg) }68%{-o-transform:rotate(0deg) }82%{-o-transform:rotate(7deg) }100%{-o-transform:rotate(0deg) }}
@-ms-keyframes leg{0%{-ms-transform:rotate(0deg) }9%{-ms-transform:rotate(15deg) }20%{-ms-transform:rotate(0deg) }30%{-ms-transform:rotate(10deg) }42%{-ms-transform:rotate(-5deg) }57%{-ms-transform:rotate(5deg) }68%{-ms-transform:rotate(0deg) }82%{-ms-transform:rotate(7deg) }100%{-ms-transform:rotate(0deg) }}


/*******************************
	Layout Frame
*******************************/

html, body {padding:0; margin:0;}
html {height:100%; background:#312e98;}
body {display:table; width:100%; height:100%; color:#fff;}

.loginWrap {display:table-cell; vertical-align:center; text-align:center; vertical-align:middle; padding:20px 15px 78px;} 
/*.loginArea h1 {display:inline-block; position:relative; padding-left:214px; padding-top:30px; height:84px; background:url(/img/login/tit_login.png) no-repeat 0 0; text-align:left; margin-bottom:45px; background-size:auto 100%;}
.loginArea h1 span {display:block; position:absolute; top:0; left:0; overflow:hidden; z-index:-999; opacity:0;}
.loginArea h1 strong {display:block; font-size:40px; font-weight:800; word-break:keep-all;}*/


.loginWrap .loginTit { position: relative; width: 100%; max-width: 908px; margin: 0 auto 2em; display: -webkit-box; display: flex; -webkit-box-align:center; align-items:center; -webkit-box-pack: center; justify-content: center;  -webkit-column-gap:3%; gap: 3%; text-align: left; }
.loginWrap .loginTit::before { content:'y-BE'; display: block;font-size:0; width: 191px; height: 100px; background:url(/img/login/tit_login_logo.png) no-repeat 100% center; background-size: auto 100%;  }
.loginWrap .loginTit div { }
.loginWrap .loginTit div p { font-size: 21px; line-height: 1.5em; }
.loginWrap .loginTit div p span { font-weight: 800; }
.loginWrap .loginTit div p span.txt-blue { color:#11cdf4; }
.loginWrap .loginTit div p span.txt-green { color:#00e6ad; }
.loginWrap .loginTit div h1 { font-size: 40px; font-weight: 800; line-height: 1.2em; margin-top: 2px; }

@media all and (max-width:1024px) {
	.loginWrap {padding:1rem .75rem 4rem;}
	/*.loginArea h1 {padding-left:10.7rem; padding-top:1.5rem; height:4.2rem; margin-bottom:2.25rem;}
	.loginArea h1 strong {font-size:2rem;}*/
}

@media all and (max-width:640px) {
	.loginWrap {padding:1rem 5% 4rem;}
	.loginWrap .loginTit { margin-bottom: 1em; }
	.loginWrap .loginTit div p { font-size: 1rem; }
	.loginWrap .loginTit div h1 { font-size: 1.8rem;}
	}

@media all and (max-width:540px) {
	.loginWrap .loginTit::before { width: 34%; height: 80px; background-size: 100% auto; }
	/*.loginWrap .loginTit div { width: 57%; }*/
	.loginWrap .loginTit div p { font-size: 3.5vw; }
	.loginWrap .loginTit div h1 { font-size: 6vw;}
}

@media all and (max-width:380px) {
	.loginWrap .loginTit::before { height: 60px; }
}

/** Form Box */
.frmLogin {display:block; position:relative; max-width:908px; margin:0 auto; padding:82px 50px 65px; background:#3936ae; border-radius:70px;}
.frmLogin .inner {display:block; position:relative; max-width:580px; margin:0 auto; text-align:left; z-index:1;}
.frmLogin input {display:block; width:100%; height:80px; margin-top:-1px; border-radius:9em; border:none; background-color:#312e98; padding:0 40px; font-size:20px; color:#fff; outline:0; margin-bottom:20px;}
.frmLogin input::-webkit-input-placeholder {color:rgba(255,255,255,.5); font-size:20px;}
.frmLogin input::-moz-placeholder {color:rgba(255,255,255,.5); font-size:20px;}
.frmLogin input:-ms-input-placeholder {color:rgba(255,255,255,.5); font-size:20px;}
.frmLogin input::placeholder {color:rgba(255,255,255,.5); font-size:20px;}
.frmLogin input:-ms-input-placeholder {color:rgba(255,255,255,.5); font-size:20px;}
.frmLogin input::-ms-input-placeholder {color:rgba(255,255,255,.5); font-size:20px;}
.frmLogin input:-webkit-autofill,
.frmLogin input:-webkit-autofill:hover, 
.frmLogin input:-webkit-autofill:focus, 
.frmLogin input:-webkit-autofill:active  {box-shadow: 0 0 0 80px #312e98 inset !important; -webkit-text-fill-color: rgba(255,255,255,.5) !important; font-size:20px !important; border:none !important; transition: background-color 5000000s ease-in-out 0s;	 -webkit-transition: background-color 9999999s ease-out;}
.frmLogin input[type='checkbox'] {display:none;}
.frmLogin input[type='checkbox'] + label {display:inline-block; vertical-align:middle; padding:8px 0; font-weight:100;}
.frmLogin input[type='checkbox'] + label:before {content:""; display:inline-block; vertical-align:middle; padding:0; width:26px; height:26px; border-radius:7px; margin:0 0 0 5px; background:no-repeat 50% 50% #312e98; margin-right:8px; box-sizing:border-box;}
.frmLogin input[type='checkbox']:checked + label:before {background-image:url(/img/ico/ico_check.png);}
.frmLogin *[type='submit'], .frmLogin *[type='button'] {display:block; width:100%; margin-top:15px; text-align:center; height:80px; border-radius:9em; color:#fff; background:#12114e; font-size:24px; letter-spacing:.5em; font-weight:600;}
.frmLogin a.link {margin-top: 13px; color: #8d8bbf; padding-right: 5px; position: relative;}
.frmLogin a.link::before {content: ''; width: 14px; height: 18px; display: inline-block; vertical-align: middle; background: url('/img/login/ico_pwd.png') 50% 50% no-repeat; margin: -2px 5px 0 0;}
.frmLogin a.link:hover {color: #fff;}
.frmLogin a.link:hover::before {background-image: url(/img/login/ico_pwd_on.png);}

.frmLogin.reset {padding-top: 62px;}
.frmLogin.reset .inner > dl { padding-bottom: 2em; }
.frmLogin.reset .inner > dl dt { font-size: 20px; font-weight: 600; margin-bottom: 0.4em }
.frmLogin.reset .inner > dl dd { line-height: 1.5; font-size: 17px; margin-bottom: 0.4em; }
.frmLogin.reset .inner >p {text-align: center; line-height: 1.5; font-size: 19px; padding-bottom: 2em;}
.frmLogin.reset input.error {border: 2px solid #ff86d9;}
.frmLogin.reset div.error {color: #ff86d9; position: relative; padding-left: 34px; font-weight: 600; text-shadow: 2px 3px 10px #131256;}
.frmLogin.reset div.error:before {content: ''; width: 17px; height: 17px; display: inline-block; vertical-align: middle; margin: -1px 9px 0 0; position: absolute;
left: 8px; top: 1px; background: url(/img/common/manager/ico_caution_1.png);}
.frmLogin.reset .matching-condition { text-align: center; padding: 0.5em 0; }
.frmLogin.reset .matching-condition input[type='checkbox'] + label { color: #eff1f7; }
.frmLogin.reset .matching-condition input[type='checkbox']:checked + label {color: #23e5aa;}
.frmLogin.reset input[type='checkbox'] + label:before { background:url('/img/login/ico_pw_chk.png') no-repeat 50% 0; width: 15px; height: 12px; }
.frmLogin.reset .matching-condition input[type='checkbox']:checked + label::before { background-position: 50% 100%; }
.frmLogin.reset *[type='submit'] { letter-spacing: 0; }

@media all and (max-width:1024px) {
	.frmLogin {max-width:45.4rem; padding:4rem 2.5rem 3.25rem; border-radius:3.5rem;}
	.frmLogin .inner {max-width:29rem;}
	.frmLogin input {height:4rem; padding:0 2rem; font-size:1rem; margin-bottom:1rem;}
	
	.frmLogin input::-webkit-input-placeholder {font-size:1rem;}
	.frmLogin input::-moz-placeholder {font-size:1rem;}
	.frmLogin input:-ms-input-placeholder {font-size:1rem;}
	.frmLogin input::placeholder {font-size:1rem;}
	.frmLogin input:-ms-input-placeholder {font-size:1rem;}
	.frmLogin input::-ms-input-placeholder {font-size:1rem;}
	
	.frmLogin input:-webkit-autofill,
	.frmLogin input:-webkit-autofill:hover, 
	.frmLogin input:-webkit-autofill:focus, 
	.frmLogin input:-webkit-autofill:active {font-size:1rem !important;}
	.frmLogin input[type='checkbox'] {width:1.3rem; height:1.3rem;}
	.frmLogin input[type='checkbox'] + label {padding:.4rem;}
	.frmLogin *[type='submit'] {margin-top:.75rem; height:4.5rem; font-size:1.2rem;}
}

/*@media all and (max-width:480px) {
	.frmLogin input[type='checkbox'] {width:1rem; height:1rem;}
	.frmLogin input[type='checkbox'] + label { font-size: 0.9rem; }
	.frmLogin a.link { margin-top:10px; font-size: 0.9rem;  }
}*/

@media all and (max-width:640px) {
	.frmLogin {max-width:100%; padding:4rem 1.5rem 3.25rem; border-radius:3.5rem;}
	.frmLogin a.link {margin-top: 8px; }
}

@media all and (max-width:540px) {
	.frmLogin { padding:3.5rem 1rem 3rem; border-radius:2.5rem; }
	
	.frmLogin.reset .inner > dl { padding: 0 1em 1.5em; }
	.frmLogin.reset .inner > dl dt { font-size: 1rem }
	.frmLogin.reset .inner > dl dd { font-size: 0.9rem;}
}

@media all and (max-width:380px) {
	.frmLogin a.link {margin-top: 7.5px; }
	.frmLogin input[type='checkbox'] + label:before { width: 22px; height: 22px; margin-left:0; margin-right: 5px; }
}



/*******************************
	Acc Object Frame
*******************************/

.accAera {display:block; position:absolute; width:340px; height:665px; bottom:-54px; right:-185px; z-index:0;}
.accAera * {display:block; position:absolute; background:no-repeat 0 0;}

@media all and (max-width:1285px) {
	.accAera {right:-100px;}
}
@media all and (max-width:1125px) {
	.accAera {right:-50px; transform:scale(.9); -webkit-transform:scale(.9); transform-origin:100% 100%; -webkit-transform-origin:100% 100%;}
}
@media all and (max-width:1024px) {
	.accAera {display:none;}
}

/* Object */
.accAera .obj1 {width:56px; height:43px; background-image:url(/img/login/img_obj1.png);}
.accAera .obj2 {width:76px; height:67px; background-image:url(/img/login/img_obj2.png);}
.accAera .obj3 {width:64px; height:64px; background-image:url(/img/login/img_obj3_0.png);}
.accAera .obj3 .parts1 {width:2px; height:25px; background-image:url(/img/login/img_obj3_1.png);}
.accAera .obj4 {width:59px; height:51px; background-image:url(/img/login/img_obj4.png);}
.accAera .obj5 {width:237px; height:390px; background-image:url(/img/login/img_obj5_0.png);}
.accAera .obj5 .parts1 {width:64px; height:133px; background-image:url(/img/login/img_obj5_1.png);}
.accAera .obj5 .parts2 {width:76px; height:27px; background-image:url(/img/login/img_obj5_2.png);}

/* Position */
.accAera .obj1 {top:88px; left:49px;}
.accAera .obj2 {top:0; right:0;;}
.accAera .obj3 {top:196px; left:188px;}
.accAera .obj3 .parts1 {top:5px; left:30px;}
.accAera .obj4 {bottom:0; left:0;}
.accAera .obj5 {bottom:0; left:55px;}
.accAera .obj5 .parts1 {bottom:0; left:97px;}
.accAera .obj5 .parts2 {top:141px; left:56px;}

/* Effect */
.accAera .obj1,
.accAera .obj2,
.accAera .obj4 {
	animation: updown linear 2s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	animation-direction: alternate;
	-webkit-animation: updown linear 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-direction: alternate;
	-moz-animation: updown linear 2s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 50% 50%;
	-moz-animation-direction: alternate;
	-o-animation: updown linear 4s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 50% 50%;
	-o-animation-direction: alternate;
	-ms-animation: updown linear 2s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 50% 50%;
	-ms-animation-direction: alternate;
}
.accAera .obj1 {animation-duration: 2s; -webkit-animation-duration: 2s; -o-animation-duration: 2s; -ms-animation-duration: 2s;}
.accAera .obj2 {animation-duration: 4s; -webkit-animation-duration: 4s; -o-animation-duration: 4s; -ms-animation-duration: 4s;}
.accAera .obj4 {animation-duration: 3s; -webkit-animation-duration: 3s; -o-animation-duration: 3s; -ms-animation-duration: 3s;}

.accAera .obj3 .parts1 {
	animation: rounding linear 5s;
	animation-iteration-count: infinite;
	transform-origin: 50% 100%;
	-webkit-animation: rounding linear 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 100%;
	-moz-animation: rounding linear 5s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 50% 100%;
	-o-animation: rounding linear 5s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 50% 100%;
	-ms-animation: rounding linear 5s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 50% 100%;
}

.accAera .obj5 .parts1 {
	animation: leg linear 6s;
	animation-iteration-count: infinite;
	transform-origin: 100% 0%;
	-webkit-animation: leg linear 6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 100% 0%;
	-moz-animation: leg linear 6s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 100% 0%;
	-o-animation: leg linear 6s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 100% 0%;
	-ms-animation: leg linear 6s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 100% 0%;
}

.accAera .obj5 .parts2 {
	animation: arm linear 2s;
	animation-iteration-count: infinite;
	transform-origin: 0% 100%;
	-webkit-animation: arm linear 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 0% 100%;
	-moz-animation: arm linear 2s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 0% 100%;
	-o-animation: arm linear 2s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 0% 100%;
	-ms-animation: arm linear 2s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 0% 100%;
}


/* 접근권한 */
.no-permission {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width: 300px;height: 160px; text-align: center;}
.no-permission >span {display: block; margin: 0 auto 30px; font-size: 25px; color: #fff; font-weight: 600;}
.no-permission .ico {width: 104px; height: 104px; background: #eff1f7 url(/img/ico/ico_no_permission.png) 50% 50% no-repeat; padding: 17px 0 17px 64px; border-radius: 50%; }

@media all and (max-width:640px) {
	.no-permission  {width: 100%;}
	.no-permission >span {font-size: 1em;}
}


/*토스트메시지*/
.toast-message { position: fixed; bottom: 5%; left: 50%; width: 480px; max-width: 90%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); 
				 border-radius: 1.2rem; background: rgba(9, 7, 104, 0.90); padding: 1rem; display: flex; align-items: center; gap: 0.7rem;  }
.toast-message::before { content:''; width: 40px; height: 40px; background:url(/img/login/toast_logo.svg) no-repeat center; background-size: 100% auto; }
.toast-message p { width: calc(100% - 40px - 0.7rem); }


@media all and (max-width:480px) {
.frmLogin { max-width: 95%; padding: 4rem 1rem 3.25rem; }
	
}