@font-face {
    font-family: 'EsaManru';
    font-weight: 700;
    font-style: normal;
    src: url('./font/esamanru_Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'EsaManru';
    font-weight: 500;
    font-style: normal;
    src: url('./font/esamanru_Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'EsaManru';
    font-weight: 300;
    font-style: normal;
    src: url('./font/esamanru_Light.ttf') format('truetype');
}
/*--ysk--------------------------------------------------------------------------------*

	ysk 2022년01월

-----------------------------------------------------------------------------------ysk-*/

* {box-sizing: border-box;	-ms-box-sizing: border-box;	-webkit-box-sizing: border-box;}
.cf:after{content:''; display:block; clear:both;}

/*-------------------------------------------------------------------------------------*
 *  기본스타일 시트                                                                    *
 *-------------------------------------------------------------------------------------*/
a         {color:#d0d0d0; text-decoration:none;}
body      {font-size: 13px; color: #d0d0d0; margin: 0 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-weight:300; letter-spacing:0px; background:#121a24; overflow-y:scroll; -webkit-overflow-scrolling:touch;}
td        {font-size: 13px; color: #d0d0d0; margin: 0 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-weight:300; letter-spacing:0px;}
div       {font-size: 13px; color: #d0d0d0; margin: 0 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-weight:300; letter-spacing:0px;}
select    {font-size: 13px; color: #d0d0d0; margin: 0 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-weight:300; letter-spacing:0px;}
textarea  {font-size: 13px; color: #d0d0d0; margin: 0 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-weight:300; letter-spacing:0px;}

a, body, td, div, select, textarea , button{font-family:'EsaManru'; font-weight:300;}

/*-------------------------------------------------------------------------------------*
 *  인풋                                                                               *
 *-------------------------------------------------------------------------------------*/
input::-webkit-input-placeholder    {color:#d0d0d0; font-size:13px; letter-spacing:-1pt;}
input:-ms-input-placeholder         {color:#d0d0d0; font-size:13px; letter-spacing:-1pt;}
textarea::-webkit-input-placeholder {color:#d0d0d0; font-size:13px; letter-spacing:-1pt;}
textarea:-ms-input-placeholder      {color:#d0d0d0; font-size:13px; letter-spacing:-1pt;}
input::placeholder                  {color:#d0d0d0; font-size:13px; letter-spacing:-1pt;}
textarea::placeholder               {color:#d0d0d0; font-size:13px; letter-spacing:-1pt;}


/*-------------------------------------------------------------------------------------*
 *  고정스타일 시트                                                                    *
 *-------------------------------------------------------------------------------------*/
A,area   {blr:expression(this.onFocus=this.blur())}
:focus   {-moz-outline-style: none;}
form     {margin:0;}
img      {border:none;}
ul,ol,li,dl,dd,dt  {margin:0; list-style:none;}

html,body,div,span,object,iframe,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,swf,javascript,
article,aside,canvas,details,figcaption,figure,footer,header,td,
menu,nav,section{margin:0;padding:0}

img,fieldset,iframe{border:0 none}
img {/* max-width:100%; */vertical-align:middle}
textarea{resize:none}
input,select,textarea,button{font-size:100%;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box; outline:none;}
h1,h2,h3,h4,h5,h6{font-size:100%}
address,strong,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}

/* base - IE8~7 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

/* base - input */
input[type="text"],input[type="password"],input[type="submit"],input[type="search"],input[type="image"],textarea{-webkit-appearance:none;}
input:checked[type="checkbox"]{background-color:#666;-webkit-appearance:checkbox}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}


button{border:none; outline:none; padding:0; margin:0; cursor:pointer; background:none;}

/* 아이폰 폰트사이즈 자동조절 방지 */
html, body{
  -webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라 신버전 */
  -ms-text-size-adjust : none;  /* IE */
  -moz-text-size-adjust : none;  /* 파이어폭스 */
  -o-text-size-adjust : none;  /* 오페라 구버전 */
  webkit-user-select: none;
  user-select: none;
}

/*-------------------------------------------------------------------------------------*
 *  out_login                                                                          *
 *-------------------------------------------------------------------------------------*/
/* 로그인 */
.out_login_wrap_wrap {float:left; width:100%; min-height:100vh; background:url(../images/login_bg.jpg) center top no-repeat; background-size:cover;}
.out_login_wrap_box  {margin:0px auto; width:760px; transition:all 0.5s;}

.out_login_logo {float:left; width:100%; text-align:center; margin:50px 0 10px 0; position: relative; z-index: 10;}
.out_login_logo img{width:100%; max-width:760px;}

.out_login_box_wrap {float:left; width:100%; border-radius:10px; padding:0px 170px;}
.out_login {float:left; width:100%;}
.out_login li {float:left; width:100%; padding:1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */

.out_login_text{float:left; width:100%; text-align:center; padding:0 0 20px 0; font-weight:400; font-size:16px; color:#ffffff;}

.out_login_input  {background-color:#232121; border:1px solid #000000; color:#f9f9f9; width:100%; height:50px; font-size:14px; font-weight:300; border-radius:5px; padding:0 0 0 20px;  font-family:'EsaManru';}
.out_login_input::placeholder {color:#a8b8ca; font-weight:300; font-size:14px; letter-spacing:0pt;}
.out_login_input:focus{border:1px solid #000000;}

.out_login_btn1        {background:linear-gradient(#002669); border:1px solid #344d73; width:100%; height:60px; line-height:60px; text-align:center; display:inline-block; color:#e9e7e7; font-size:25px; font-weight:700; border-radius:5px; letter-spacing:-1pt;}
.out_login_btn1:hover  {filter:brightness(120%);}

.out_login_btn2        {background:linear-gradient(#002669); border:1px solid #344d73; width:100%; height:60px; line-height:60px; text-align:center; display:inline-block; color:#e9e7e7; font-size:25px; font-weight:700; border-radius:5px; letter-spacing:-1pt;}
.out_login_btn2:hover  {filter:brightness(120%);}

/* 추천인 */
.out_close {float:left; width:100%; text-align:center; padding:0 0 20px 0;}

.out_code_wrap {float:left; width:100%; height:100vh; display:flex; align-items:center;}
.out_code_box {margin:0px auto; width:500px; transition:all 0.5s;}

.out_code_box_wrap {float:left; width:100%; background:#0b0b0b; border: 1px solid #1f1f1f; border-radius:10px; padding:7%;}
.out_code {float:left; width:100%;}
.out_code li {float:left; width:100%; padding:1%;} /* ysk 가로 100%로 변경시 세로형 */

.out_code_text {float:left; width:100%; text-align:center; padding:0 0 20px 0; font-weight:400; font-size:16px; color:#ffffff;}

/* 회원가입 */
.out_join_wrap {float:left; width:100%; margin:30px 0 0 0;}
.out_join_box {margin:0px auto; width:1300px; transition:all 0.5s;}

.out_join_logo {float:left; width:100%; margin:10px 0 10px 0;}
.out_join_logo img {width:300px;}

.out_join_box_wrap {float:left; width:100%; background:#1e1e1e; border: 1px solid #b1b0b0; border-radius:10px; padding:3%;}
.out_join {float:left; width:100%; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); padding:10px 0 10px 0;}
.out_join ul {float:left; width:50%;} /* ysk 가로 100%로 변경시 세로형 */
.out_join ul li {float:left; width:100%; padding:1%; line-height:30px;}
.phone {display:flex; align-items:center;}

.out_join_text {float:left; width:100%; padding:0 0 10px 10px; text-align:center; font-family: 'EsaManru'; font-weight: 500; font-size:30px; color:#eeeeee;}

.out_join_btn {margin:0px auto; width:500px;}
.out_join_btn li {float:left; width:48%; margin:1% 1% 0 1%;}

.out_join_input1  {background-color:#121212; border:1px solid #6d6d6d; color:#ffffff; width:100%; height:50px; font-size:14px; font-weight:300; border-radius:5px; padding:0 0 0 10px; font-family:'EsaManru';}
.out_join_input1::placeholder {color:#a8b8ca; font-weight:300; font-size:14px; letter-spacing:0pt;}
.out_join_input1:focus{border:1px solid #a8b8ca;}

.popup_none{display:none;}

@media screen and (max-width:1300px) {
	.out_join_box {width:90%;}
	.out_join_box_wrap {padding:6%;}
	.out_join ul {width:100%;}
	.out_join_btn {width:320px;}

}

@media screen and (max-width:768px) {
	.out_login_wrap_box  {width:80%;}
	.out_login_logo {margin:80px 0 10px 0;}
	.out_login_logo img {width:93%;}
	.out_login li {width:100%;}

	.out_code_box {width:80%;}

	.out_login_box_wrap {padding:0px 10px;}
	.out_login_btn1{font-size:16px;}
	.out_login_btn2{font-size:16px;}

	.out_join_text{font-size:18px;}
}
@media screen and (min-width:1940px) {
    .out_login_wrap_wrap{display:flex; align-items:center;}
	.out_login_wrap_box{margin:-300px auto 0;}
}



/*-------------------------------------------------------------------------------------*
 *  out_login animations                                                               *
 *-------------------------------------------------------------------------------------*/
/* Animation removed for static logo */




/*-------------------------------------------------------------------------------------*
 *  out_login animations popup                                                         *
 *-------------------------------------------------------------------------------------*/
/* 한개의 스타일 */
.out_popup111	{animation-name: out_popup111; animation-duration: 0.5s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_popup111 {
					0%   {transform: translateY(-300%);}
					100% {transform: translateY(0%);}
				}

/* 한개의 스타일 */
.out_popup222	{animation-name: out_popup222; animation-duration: 0.5s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_popup222 {
					0%   {transform: translateY(-300%) scaleX(4.0);}
					100% {transform: translateY(0%) scaleX(1);}
				}

/* 한개의 스타일 */
.out_popup333	{animation-name: out_popup333; animation-duration: 1.1s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_poout_popup333pup03 {
					0%   {transform: translateY(-300%) scaleX(4.0);}
					50%  {transform: translateY(2%) scaleX(1.3);}
					100% {transform: translateY(0%) scaleX(1);}
				}