@charset "utf-8";

button {cursor:pointer;}

/* 로그인 */
.loginWrap{ display:flex; padding:2rem 2.5rem; margin-top:2rem; border-radius:1rem; background:#fff8f0; word-break: keep-all;}
.loginWrap .tyBox{ display:flex; flex-direction:column; background:#fff; border:1px solid #ccc; border-radius:1rem; padding:1.2rem 1.5rem; width:49%;}
.loginWrap .tyBox:nth-child(2) { margin-left:2%;}
.loginWrap .tyBox + .tyBox{ margin-top:0;}
.loginWrap .tyBox .inner{ position:relative; display:flex; align-items:center; flex:1;}
.loginWrap .tyBox .inner .ico{ width:5.75rem; height:5.75rem; border-radius:50%; display:flex; align-items:center; justify-content: center;}
.loginWrap .tyBox .inner .ico.col1{ background:#ffedbd;}
.loginWrap .tyBox .inner .ico.col2{ background:#e7f6fd;}
.loginWrap .tyBox .cont{ padding-left:2.5rem; flex:1;}
.loginWrap .tyBox .cont ul{ display:flex; flex-direction:column;}
.loginWrap .tyBox .cont ul.w100 li{ width:100%;}
.loginWrap .tyBox .cont li{ width:100%; margin:.25rem 1%;}
.loginWrap .tyBox .cont li a{ position:relative; display:block; font-size:.8rem; letter-spacing:-1px; background:#e2e2e2; color:#000; border-radius:.25rem; padding:.35rem 1rem .3rem 2.75rem; text-align:center;}
.loginWrap .tyBox .cont li a i{ position:absolute; left:.9rem; top:50%; font-size:1.2rem; transform:translateY(-50%); }
.loginWrap .tyBox .cont li a.onepass{ background:#1c2674; coloR:#fff;}
.loginWrap .tyBox .cont li a.onepass:focus {outline:3px solid #fbd613;}
.loginWrap .tyBox .cont li a.onepass i{ left:.75rem; width:1.6rem; height:1.4rem; background:url('/00_common/images/member/ico_onepass.png') no-repeat center/cover;}
.loginWrap .tyBox .cont li a.btn_col1{ background:#2d6cd5; color:#fff;}
.loginWrap .tyBox .cont li a.btn_col2{ background:#e2e2e2; color:#000;}
.loginWrap .tyBox .cont li a.btn_col3{ background:#3b4352; color:#fff;}
.loginWrap .tyBox .cont li a.btn_col3:focus {outline:3px solid #fbd613;}
.loginWrap .tyBox .cont li a.btn_col1:hover{ background:#1c54b6; }
.loginWrap .tyBox .cont li a.btn_col2:hover{ background:#d6e0e7; }
.loginWrap .tyBox .cont li a.btn_col3:hover{ background:#272e3b; }
.loginWrap .tyBox .cont li a.onepass:hover{ background:#0d165a; }

/* 회원가입 210929수정 : Start *******************************************************************************************************************************************************************************************************/
/* 회원가입 step */
.sbscrbStep{width:100%; padding:10px 0; box-sizing:border-box;}
.sbscrbStep > ul.stepList {width:100%;float:left;background: #f5f6f7;padding: 1.5rem 0;border: 1px solid #b2b7c7;margin-bottom: 1.5rem;}
.sbscrbStep > ul.stepList li {width: 20%;float:left; background:url("/00_common/images/member/arr_joinG.png") no-repeat right 50%;}
.sbscrbStep > ul.stepList li:last-child {background:none;}
.sbscrbStep > ul.stepList li img {display:block;margin:0px auto;padding:20px;background:#fff;border: 1px solid #b2b7c7;border-radius:100px;}
.sbscrbStep > ul.stepList li img.stepOn {background:#fff;border: 1px solid #5074cf;}
.sbscrbStep > ul.stepList li p {text-align:center;font-size: 0.7rem;font-weight:500;color:#5d5e65;padding-top: 0.5rem;}
.sbscrbStep > ul.stepList li p.stepOn {font-weight:600;}
.sbscrbStep > ul.stepList li p span {display:inline-block;width:100%;font-size:0.85rem;color: #254458;padding-top: 0.25rem;}
.sbscrbStep > ul.stepList li p.stepOn span {color: #5074cf;}

.sbscrbStep p {color:#555; font-size:0.77rem;}
.sbscrbStep p.sbscrbNaming {float:left;width:100%;padding: 1rem 0;font-size: 1rem;letter-spacing: -0.5px;font-weight:600;box-sizing: border-box;border-top: 3px solid #254458;color: #254458;}
.sbscrbStep p.sbscrbNaming > span {font-size: 0.75rem;width:100%;display:block;margin-top: 0.5rem;font-weight:400;color: #555;}

.sbscrbStep .stplatBox h3.stplatTit {font-size:1rem;font-weight: 600;color: #254458;}
.sbscrbStep .stplatBox h3.stplatTit span {font-size:0.8rem;font-weight: 500;color: #e13535;margin-left: 0.2rem;}


/* 1.이용약관동의 */
.stplatBox .box_agree {padding:15px;background:#f5f6f7;margin-top:0.5rem;border: 1px solid #b2b7c7;}
.stplatBox .box_agree .agrScroll {height:15rem; margin-bottom:0.5rem; padding:0.75rem 1rem; border:1px solid #b2b7c7; background:#fff; overflow-y:auto;  font-size:12px; font-family:'NotoSans';}
.stplatBox .box_agree .agrScroll .ruleTit{color:#000;letter-spacing:-1px;line-height:1rem;font-size: 0.75rem;font-weight:bold;font-family:'NotoSans';}
.stplatBox .box_agree .agrScroll ul {width:100%; padding:0 0 1rem; color:#333; letter-spacing:-1px; line-height:1rem;}
.stplatBox .box_agree .agrScroll ul li {padding-top:10px;font-weight:600;font-size: 0.7rem;line-height: 1.6;}
.stplatBox .box_agree .agrScroll ul li span{display:block;font-weight:normal;padding-top:3px;margin-left:0.65rem;font-size: 0.65rem;}
.stplatBox .box_agree .agrScroll ul li ol li,
.stplatBox .box_agree .agrScroll ul li ul li {font-weight:normal;padding-top:0;padding-bottom:0;margin-left:0.65rem;font-size: 0.65rem;}
.stplatBox + .stplatBox .box_agree .agrScroll ul li span {margin-left:0;}
.stplatBox + .stplatBox .box_agree .agrScroll ul li ol li,
.stplatBox + .stplatBox .box_agree .agrScroll ul li ul li {margin-left:0;}
.stplatBox .box_agree .agrScroll ul.fw_normal li { padding-top:5px; font-weight:normal; }
.stplatBox .box_agree .agrInput{ position:relative; padding-left:1.1rem; }
.stplatBox .box_agree .agrInput label{color:#666; font-size:12px; font-family:'NotoSans';}
.stplatBox + .stplatBox {padding-top:1.5rem;}


/* 2.회원유형 */
.TypeBox {width:100%; box-sizing:border-box;float:left;}
.TypeBox ul.customersType {margin: -.45rem;text-align: center;}
.TypeBox ul.customersType > li {display:inline-block;width:calc(50% - 2px);text-align: center;padding: .45rem;}
.TypeBox ul.customersType > li a {display: block;width:100%;border: 1px solid #ddd;padding:30px 5px;transition: background 0.5s;transition: background 0.5s;box-sizing:border-box;}
.TypeBox ul.customersType > li span {width:100%;display:block;color: #254458;padding: 0.5rem 0;font-size: 1.1rem;font-weight: 600;}
.TypeBox ul.customersType > li a:hover {background: #f9f9f9;}
.TypeBox ul.customersType > li a p {font-size:0.75rem; line-height:1.4;}
.TypeBox ul.customersType > li a div {width: 60%;height: 50px;border-radius: 2rem;margin-top:25px;font-weight:600;background: #5074cf;color:#fff;margin: 1rem auto 0.5rem;line-height: 50px;font-size: 17px;font-weight: 400;}
.TypeBox ul.customersType > li a:hover div {background:#3858a9;}

/* 3.사용자 인증 */
.sbscrbStep .crtfcBtn {margin-top:1.5rem;}
.sbscrbStep .crtfcBtn a {width: 49%;padding: 1.2rem 1rem;text-align: center;}

/* 4.회원정보 작성 */
.sbscrbStep .tbl_st_row table {border-top:2px solid #254458;}
.sbscrbStep p.sbscrTit {float:left;width:100%; padding:1rem 0 0.5rem; font-size:1rem; letter-spacing:-0.5px; font-weight:600; box-sizing:border-box; color:#254458;}
.sbscrbStep .tbl_st_row table td {line-height:2;}
.sbscrbStep .tbl_st_row table td span.passwordTxt {font-size:0.7rem;display: block;line-height: 1.4;margin-top: 0.3rem;}
.sbscrbStep .tbl_st_row table td .inp_st {height:1.6rem;}
.sbscrbStep .tbl_st_row table td .btn_line_style2 {padding: 0 0.5rem;border: 1px solid #c6c6c6;margin-left: 0.2rem;color: #444;}
.sbscrbStep .tbl_st_row table td .btn_line_style2:hover {background:#444; border:1px solid #444; color:#fff;}

/* 5.회원가입 완료 */
.succesBox {float:left;width:100%;padding: 1rem 0;font-size: 1rem;letter-spacing: -0.5px;font-weight:600;box-sizing: border-box;border-top: 3px solid #254458;color: #254458;background: #f5f6f7;}
.succesBox p {text-align:center;font-size:1.2rem;margin-top: 1rem;color: #254458;}
.succesBox img {margin-top: 1.5rem;position:relative;left:50%;transform: translateX(-50%);}
.succesBox .succesTxt > p {font-size: 0.8rem;color: #555;margin-bottom: 1rem;}
/* 회원가입 : //210929 End *******************************************************************************************************************************************************************************************************/


/* 210929수정 */
@media screen and (max-width:1200px){ 

	/* 로그인 : Start *******************************************************************************************************************************************************************************************************/
	/* 로그인 */
	.mber_login_box .mber_login_OR {position:relative; left:auto; top:auto; width:100%; height:4.5rem; margin:0;}
	.mber_login_box .mber_login_OR:before {left:0; top:50%; width:100%; height:1px; border-top:1px dashed #bec3cc; border-left:none;}

	.mber_login_box h3.login_tit, .mber_login_box p.login_info {text-align:center;}


	/* 일반 로그인 */
	.mber_login_box .mber_login.fl, .mber_login_box .mber_snsL.fr {float:none !important;}
	.mber_login_box .mber_login,  .mber_login_box .mber_snsL {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
	.mber_login_box .mber_login {width:90%; height:auto; margin:3.25rem auto 0; padding:3.25rem 1.5rem 1.75rem; }

	/* SNS 로그인 */
	.mber_login_box .mber_snsL {width:90%; height:auto; margin:3.25rem auto 0; padding:3.25rem 1.5rem 1.75rem; }

	/* 비회원 로그인 */
	/* 휴대전화 본인확인 */
	.mber_login_box .nmbr_phone.fl, .mber_login_box .nmbr_ipin.fr {float:none !important;}
	.mber_login_box .nmbr_phone, .mber_login_box .nmbr_ipin {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
	.mber_login_box .nmbr_phone {width:90%; height:auto; margin:3.25rem auto 0; padding:3.25rem 1.5rem 1.75rem; }

	/* 나이스 아이핀(I-PIN)인증 */
	.mber_login_box .nmbr_ipin {width:90%; height:auto; margin:3.25rem auto 0; padding:3.25rem 1.5rem 1.75rem; }

	/* 로그인 : End *******************************************************************************************************************************************************************************************************/




}

@media screen and (max-width:950px){
	/* 로그인 */
	.loginWrap{ flex-direction:column;}
	.loginWrap .tyBox{ width:100%;}
	.loginWrap .tyBox:nth-child(2) { margin-left:0; margin-top:1rem;}
}


@media screen and (max-width:768px){ 

	/* 로그인 */
	.loginWrap{ padding:1.5rem; margin-top:1.5rem;}
	.loginWrap .tyBox .cont{ padding-left:1rem; }
	.loginWrap .tyBox .cont ul.w100{ justify-content: center;}

	
	/* 회원가입 210929수정 : Start *******************************************************************************************************************************************************************************************************/
	
	.sbscrbStep > ul.stepList li { width:33.33%;  margin:1rem 0;}

	/* 회원가입 : End *******************************************************************************************************************************************************************************************************/
	
}


@media screen and (max-width:600px){ 



}

@media screen and (max-width:560px){
	
	/* 회원가입 210929추가 */
	/* 3. 사용자인증 */
	.sbscrbStep .crtfcBtn a {width:100%;}
	
	}


@media screen and (max-width:500px){ 

    
    /* 회원가입 210929추가 */
	.sbscrbStep > ul.stepList li { width:50%;}
	
	/* 2.회원유형 선택 */
	.TypeBox ul.customersType > li {width:100%; margin-left:0;}

}

@media screen and (max-width:460px){

	/* 로그인 */
	.loginWrap .tyBox .inner {flex-direction:column;}
	.loginWrap .tyBox .inner .ico {width:4.5rem; height:4.5rem; margin-bottom:.5rem;}
	.loginWrap .tyBox .inner .ico img {max-width:65%;}
	.loginWrap .tyBox .cont {padding-left:0; width:100%;}
	.loginWrap .tyBox .cont ul{ justify-content: center;}
	.loginWrap .tyBox .cont li{ max-width:100%; width:100%;}
	
	/* 회원가입 210929추가 */
	.tbl_st_row table tbody .password th {line-height:1.4;}
	.tbl_st_row table tbody .password td {line-height:2.5;}
	
	}


@media screen and (max-width:358px){ 

	/* 회원가입 210929추가 */
	.sbscrbStep .tbl_st_row table td .btn_line_style2 {margin-left:0; margin-top:0.2rem;}

	/* 로그인 */
	.loginWrap{ padding:.75rem;}
	.loginWrap .tyBox{ padding:1rem;}
	
}

@media screen and (max-width:320px){ 

	/* 회원가입 210929추가 */
	.tbl_st_row table tbody .password td {line-height:4;}
	.sbscrbStep .tbl_st_row table td select {margin-bottom:0.4rem;}
}