@charset "utf-8";


/* 회원가입 */
.register-wrap { max-width:768px; margin:0 auto; }
.register-head { font-size:2.2rem; margin-bottom:30px; }

.tab { margin-bottom:70px; }
.tab li { position:relative; flex:1; border:1px solid #ddd; padding:22px 10px 20px; text-align:center; font-size:1.125rem; margin-left:-1px; }
.tab li:before { content:""; position:absolute; left:0; top:-1px; right:0; height:4px; }
.tab li.on { font-weight:600; border-bottom-color:transparent; }


@media (max-width: 767px) {
	.register-head { font-size:1.5rem; margin-bottom:10px; }

	.tab { margin-bottom:40px; }
	.tab li { font-size:1rem; padding:17px 10px 15px; }
}

/******************** 가입안내 ********************/
.register-tit { width:100%; text-align: center; font-size:1.57rem; margin-bottom:25px; font-weight:700;}

.agree-box { padding: 35px; font-size:1.125rem; justify-content:space-between; }
.agree-box.all { border-radius: 99px; background:#f3f3f3; color:#000; font-weight:600; }
.agree-box:not(.all) { border-bottom:1px solid #ddd; }


.agree-box div { margin-right:15px; }
.agree-box input[type="radio"], .agree-box input[type="checkbox"] { display:none; }

.agree-box label { position:relative; }
.agree-box label span { margin-right:25px; }
.agree-box label span:before,
.agree-box label span:after { position:absolute; top:50%; transform:translateY(-50%); transition-duration:300ms; }
.agree-box label span:before { content:""; left:0; width:18px; height:18px; border:1px solid #bbb; border-radius:2px; }
.agree-box label span:after { content:"\f00c"; left:4px; width:auto; height:auto; border:none; font-size:.75rem; opacity:0; color:#666; }

.agree-box label:hover span:before,
.agree-box input:checked + span:before { border-color:#333; color:#333; }
.agree-box input:checked + span:after { opacity:1; }

.agree-box label b { color:#999; font-weight:normal; }


.btn-box { text-align:center; margin-top:50px; }
.btn-box button { padding:10px 30px; font-size:1.125rem; }


@media (max-width: 767px) {
	.register-tit { font-size:1.25rem; margin-bottom:10px; }

	.agree-box { padding:25px 20px; font-size:1rem; flex-wrap:wrap; }
	.agree-box label { width:100%; }
	.agree-box label span { margin-right:20px; }
	.agree-box label span:before { width:16px; height:16px; }
	.agree-box label span:after { left:3px; }

	.agree-box button { border-radius: 3px; font-size:.875rem; padding:5px 15px; background:#444; color:#fff; margin-left:auto; margin-top:5px; }
}




/******************** 가입폼 ********************/
.register-form {  }
.register-form dl { display:flex; flex-wrap: wrap; border:1px solid #ddd; border-bottom:0; background:#fff; margin-bottom:20px; }
.register-form dl dt { width:130px; display:flex; align-items:flex-start; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-weight:400; padding:15px; }
.register-form dl dt.required { }
.register-form dl dt.required:before { content:"*"; color:#f50; margin-right:2px; }
.register-form dl dt.none { width:0; padding:0; font-size:0; border:0; }

.register-form dl dd { width:calc(100% - 130px); border-bottom:1px solid #ddd; }
.register-form dl dd input { width:100%; height:100%; border:0; padding:0 20px; }
.register-form dl dd input[type="file"] { padding:0; height:auto; margin-bottom:10px; }
.register-form dl dd input:focus { outline:none; }


/*본인인증 버튼*/
.register-form dl dd .certi { margin:0 2.5px 5px; }

/*설명글*/
.register-form dl dd.text-wrap { padding:10px 20px; }
.register-form dl dd .txt { display:block; font-size:.875rem; }
.register-form dl dd.none.text-wrap { width:100%; text-align:center; background:#eee; }

/*주소*/
.register-form dl dd.address { padding:5px 10px; }
.register-form dl dd .addr-line { position:relative; margin:5px 0; height:35px; }
.register-form dl dd #daum_juso_pagemb_zip { position:absolute !Important; background:#fff; z-index:99; }
.register-form dl dd.address input { border:1px solid #ddd; }
.register-form dl dd.address input.etc { background:#eee; height:100%; }
.register-form dl dd.address label { height:100%; }

/*서명&자기소개*/
.register-form dl dd textarea { width:100%; border:0; }

/*sns*/
.register-form dl dd.sns { padding:0 20px; display:flex; align-items:center; }
.register-form ul.sns li { margin-bottom:20px; display:flex; background:#fff; border:1px solid #ddd; }
.register-form ul.sns li label { width:130px; padding:20px 20px; }
.register-form ul.sns li label + div { width:calc(100% - 130px); padding:10px 20px; border-left:1px solid #ddd; display:flex; align-items:center; }
.register-form ul.sns li label + div .sns-wrap { margin-top:0; text-align:left; }


/*동의*/
.register-form .agree { margin-bottom:30px; }
.register-form .agree dd { padding:10px 20px; display:flex; align-items:center; justify-content:flex-start; flex-wrap: wrap; }
.register-form .agree label { margin:0 20px 0 0; }
.register-form .agree label input,
.register-form .agree label input[type="checkbox"] + .far + .fas,
.register-form .agree label input[type="checkbox"]:checked + .far { display:none; }
.register-form .agree label input[type="checkbox"]:checked + .far + .fas { display:inline-block; }
.register-form .agree label i { margin-right:2px; color:#ccc; }

/*기타*/
.register-form dl dd.auto-no { padding:20px; }

.register-form .btn-wrap { margin-top:30px; text-align:center; }
.register-form .btn-wrap .btn { position:relative; border-radius:99px; padding:15px 50px; transition-duration: 300ms; background:#333; color:#fff; }
.register-form .btn-wrap .btn:hover { padding:15px 65px; }


@media (max-width: 767px) {
	.register-form dl { border:none; }
	.register-form dl dt { width:100%; padding:10px 15px; background:#f8f8f8; border-right:0; border-top:1px solid #666; }
	.register-form dl dd { width:100%; min-height:55px; }
	.register-form dl dd.auto-no { padding:10px 15px; }
}




/******************** 가입완료 ********************/
.result .content { text-align:center; background:#fff; padding:100px 50px 50px; }
.result .content .btn-color { background:#333; color:#fff; padding:10px 30px; border-radius:99px; }


/* 아이디/비밀번호 찾기 */
#find_info { width: 100%; }
#find_info h3 { display: none; font-size: 1.1em; margin-bottom: 30px; text-align: center; }
#find_info .new_win_con { background: #f7f7f7; }
#find_info.cert .new_win_con { width: 100%; }
#find_info.cert h3 { display: block; }
#find_info #mb_hp_label { display: inline-block; margin-left: 10px; }
#find_info p { line-height: 1.5em; }
#find_info #mb_email { margin: 10px 0; }
#find_info .find_btn .btn_submit { width: 30%; word-break: keep-all; }

/* 비밀번호 재설정 */
#pw_reset #info_fs { margin-bottom: 10px; }
#pw_reset .frm_input { margin: 10px 0 0; }

/* 기존 회원 본인인증 */
#member_cert_refresh p { background: #f2838f; border-radius: 5px; color: #fff; font-size: 1.1em; font-weight: bold; height: 50px; line-height: 50px; margin: 0 0 10px; position: relative; text-align: center; }
#member_cert_refresh p:before { background: #da4453; border-radius: 5px 0 0 5px; content: ""; height: 50px; left: 0; position: absolute; top: 0; width: 5px; }
#member_cert_refresh p i { font-size: 1.2em; vertical-align: middle; }
#member_cert_refresh section { border: 1px solid #dde7e9; border-radius: 3px; margin: 10px auto 15px; position: relative; }
#member_cert_refresh_chkall { background: #f5f7fa; border: 1px solid #e5e9f0; border-radius: 3px; line-height: 50px; margin-bottom: 15px; position: relative; text-align: center; }
#member_cert_refresh h2 { border-bottom: 1px solid #dde7e9; font-size: 1.2em; padding: 20px; text-align: left; }
#member_cert_refresh textarea { background: #fff; border: 0; display: block; height: 150px; line-height: 1.6em; padding: 20px; width: 100%; }
#member_cert_refresh_private { position: relative; }
#member_cert_refresh_private div { background: #fff; padding: 20px; }
#member_cert_refresh_private table { border-collapse: collapse; font-size: 1em; width: 100%; }
#member_cert_refresh_private table caption { font-size: 0; line-height: 0; overflow: hidden; position: absolute; }
#member_cert_refresh_private table th { background: #f7f7f9; border: 1px solid #d8dbdf; color: #000; font-weight: bold; padding: 10px; width: 33.33%; }
#member_cert_refresh_private table td { border: 1px solid #e7e9ec; border-top: 0; padding: 10px; }

.member_cert_refresh_agree { position: absolute; right: 0; top: 0; }
.member_cert_refresh_agree input[type="checkbox"] + label { color: #676e70; }
.member_cert_refresh_agree input[type="checkbox"] + label:hover { color: #2172f8; }
.member_cert_refresh_agree input[type="checkbox"] + label span { background: #fff; border: 1px solid #999; border-radius: 3px; display: block; height: 17px; position: absolute; right: 15px; top: 20px; width: 17px; }
.member_cert_refresh_agree input[type="checkbox"]:checked + label { color: #000; }
.member_cert_refresh_agree input[type="checkbox"]:checked + label span { background: url('./img/chk.png') no-repeat 50% 50% var(--main-color1); border-color: var(--main-color1); border-radius: 3px; }
.member_cert_refresh_agree.chk_all input[type="checkbox"] + label span { top: 18px; }

#member_cert_refresh #find_info { margin: 50px 0; }
#member_cert_refresh #find_info .find_btn { background: #fff; padding: 10px 20px; }
#member_cert_refresh #find_info .find_btn > div { margin: 10px 0; }


/* 로그인 공통 */
.login-form { max-width:500px; margin:0 auto; }

.login-form hr { margin:50px 0; border-color:#ddd; width:var(--main-width); position:relative; left:50%; transform:translateX(-50%); }

.login-form .form-header { text-align:center; }
.login-form .form-header .tit { font-size:1.7rem; font-weight:700; margin-bottom:10px; }
.login-form .form-header .desc { line-height:1.5; }

.login-form .form-body { margin:20px 0; }

.login-form .form-body .input-wrap label { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; margin:0; z-index:3; }
.login-form .form-body .input-wrap label img { width:18px; vertical-align:top; }

.login-form .form-body .input-wrap input { position:relative; width:100%; height:50px; padding:5px 15px; background:#fff; border:1px solid #aaa; border-radius:50px; margin:5px 0; padding-left:50px; }
.login-form .form-body .input-wrap input:focus { outline:none; border-color:var(--main-color1); }

.login-form .form-body .btn { display:block; width:100%; border-radius:50px; text-align:center; padding:15px; margin-top:10px; border:1px solid #485667; color:#fff; background: #485667; transition-duration:500ms; }
.login-form .form-body .btn:hover { background:#e4c29e; border-color:#e4c29e; color:#fff !important; font-weight:600; }


/* 로그인 */
.login-wrap .form-body .flex-box { display:flex; justify-content: space-between; align-items:center; margin:10px 0 30px; }

.login-wrap .form-body .remember-me { display:block; margin-bottom:0; }
.login-wrap .form-body .remember-me input[type="checkbox"] { display:none; }
.login-wrap .form-body .remember-me .check-box { position:relative; border-radius:3px; color:#ccc; border:2px solid #ccc; display:inline-block; width:20px; height:20px; vertical-align:middle; margin-top:-3px; margin-right:5px; }
.login-wrap .form-body .remember-me .check-box:before, .login-wrap .form-body .remember-me .check-box:after { content:""; position:absolute; background:#ccc; width:2px; }
.login-wrap .form-body .remember-me .check-box:before { height:7px; transform: rotate(-45deg); left:4px; bottom:3.5px; }
.login-wrap .form-body .remember-me .check-box:after { height:9px; transform: rotate(45deg); right:5px; bottom:3.5px; }
.login-wrap .form-body .remember-me input[type="checkbox"]:checked + .check-box { border-color:transparent; }
.login-wrap .form-body .remember-me input[type="checkbox"]:checked + .check-box:before,
.login-wrap .form-body .remember-me input[type="checkbox"]:checked + .check-box:after { background:#fff; }


.login-wrap .form-body .btn-join { color:#fff; }
.login-wrap .form-body .btn-login { border:1px solid #485667; color:#485667; background:none; }

.login-wrap .sns_txt { font-size:1rem; color:#777; margin:50px auto 30px; text-align:center; }



/* 비회원 구매 */
.no-member-order table { margin-top:5px; border-top:1px solid #666; font-size:.875rem; }



/* 쪽지 */
.memo_list { border-top: 1px solid #ececec; }
.memo_list li { background: #fff; border-bottom: 1px solid #ececec; list-style: none; padding: 10px 15px; position: relative; }
.memo_list li:after { clear: both; content: ""; display: block; visibility: hidden; }
.memo_list li.read { background: #f6f6f6; }
.memo_list li.empty_li { color: #666; padding: 20px 0; text-align: center; }

.memo_list .memo_li { float: left; }
.memo_list .profile_big_img { margin-right: 15px; position: relative; }
.memo_list .profile_big_img img { border-radius: 50%; height: 52px; width: 52px; }
.memo_list .memo_li.memo_name { float: none; padding-top: 5px; }
.memo_list .memo_preview a { display: block; font-size: 1.2em; font-weight: normal !important; margin-right: 30px; padding-top: 10px; }
.memo_list .memo_preview a:hover { text-decoration: underline; }
.memo_list .memo_name a,
.memo_list .memo_name .sv_wrap { font-weight: bold; }
.memo_list .no_read { background: var(--main-color1); border: 1px solid #e1edff; border-radius: 10px; bottom: 0; box-shadow: 0 0 10px 3px #9ec3f9; display: inline-block; height: 10px; position: absolute; right: 0; text-indent: -9999px; width: 10px; }
.memo_list .no_read { animation: blinker 1s linear infinite; }

@keyframes blinker {
	50% { opacity:0; }
}

#memo_list h1#win_title { padding: 10px 10px 10px 20px; }
#memo_list .memo_datetime { color: #888d92; font-size: 0.92em; }
#memo_list .memo_del { color: #c7c9cb; font-size: 1.4em; padding: 10px; position: absolute; right: 15px; top: 15px; }
#memo_list .memo_cnt { display: inline-block; font-size: 1.2em; font-weight: normal; margin-top: 5px; }
#memo_list .pg_wrap { float: inherit; margin-top: 10px; text-align: center; width: 100%; }

#memo_view_contents { border-bottom: 1px solid #ececec; border-top: 1px solid #ececec; margin-bottom: 20px; }
#memo_view_contents h2 { font-size: 0; line-height: 0; overflow: hidden; position: absolute; }
#memo_view_ul { background: #f6f6f6; list-style: none; margin: 0; }
#memo_view_ul:after { clear: both; content: ""; display: block; visibility: hidden; }

.memo_view_li { position: relative; }
.memo_view_li .profile_img img { display: none; }
.memo_from { background: #fff; border-bottom: 1px solid #ececec; padding: 15px 20px; position: relative; }
.memo_from li { float: left; }
.memo_from li.memo_profile img { border-radius: 50%; height: 40px; width: 40px; }
.memo_from li:first-child { margin-right: 10px; }
.memo_from li.memo_view_nick { width: 80%; }
.memo_from li.memo_view_nick a { font-weight: bold !important; }
.memo_from li.memo_view_date { color: #555; display: block; line-height: 24px; }
.memo_from li.memo_op_btn { position: absolute; }
.memo_from li.list_btn { right: 53px; }
.memo_from li.del_btn { right: 15px; }
.memo_from:after { clear: both; content: ""; display: block; visibility: hidden; }

.memo_btn { width: 100%; }
.memo_btn a { color: #888d92; display: inline-block; font-size: 1em; padding: 20px; width: 50%; }
.memo_btn a.btn_right { float: right; text-align: right; }
.memo_btn a i { color: #acabab; font-size: 1.2em; vertical-align: bottom; }

#memo_view p { background: #fff; height: 150px; height: auto !important; line-height: 1.8em; min-height: 150px; padding: 10px; }
#memo_view textarea { height: 100px; }
#memo_write .form_01 { border-top: 1px solid #ececec; padding: 20px; }

.reply_btn { background: var(--main-color1); border-radius: 3px; color: #fff; display: inline-block; font-weight: bold; height: 45px; line-height: 50px; margin-right: 5px; padding: 0 10px; vertical-align: bottom; width: 150px; }
#memo_write .reply_btn { font-size: 1em; }

/* 스크랩 */
#scrap li:after { clear: both; content: ""; display: block; visibility: hidden; }
#scrap li { border-bottom: 1px solid #ececec; padding: 20px; position: relative; }
#scrap .scrap_tit { display: block; font-size: 1.083em; font-weight: bold; line-height: 1.3em; margin-bottom: 10px; }
#scrap .scrap_cate { background: #eeeaf8; border-radius: 3px; color: #ac92ec; display: block; float: left; font-size: 0.92em; margin-right: 10px; padding: 3px; }
#scrap .scrap_datetime { color: #777; line-height: 18px; }
#scrap .scrap_del { color: #c7c9cb; font-size: 18px; position: absolute; right: 15px; top: 15px; }
#scrap .scrap_del:hover { color: var(--main-color1); }

#scrap_do .new_win_con { padding: 0 20px; }
#scrap_do textarea { height: 100px; width: 100%; }
#scrap_do .scrap_tit { background: #f3f3f3; font-size: 1.2em; font-weight: bold; margin-bottom: 10px; padding: 10px 15px; }
#scrap_do label { display: block; font-size: 1em; margin: 0 0 5px; }
#scrap_do .win_btn:after { clear: both; content: ""; display: block; visibility: hidden; }
#scrap .win_btn, #scrap_do .win_btn { margin: 20px 0; text-align: center; }
#scrap_do .win_btn .btn_submit { float: inherit; }
#scrap_do .win_desc { margin: 0 20px; }

/*포인트*/
#point { text-align: center; }
#point h1 { text-align: left; }
#point .point_all { background: #edf3fc; border: 1px solid #d6e2f4; border-radius: 5px; color: #485172; font-size: 1.083em; margin: 20px 20px 15px; }
#point .point_all:after { clear: both; content: ""; display: block; visibility: hidden; }
#point .point_all li { float: left; padding: 20px; text-align: left; width: 50%; }
#point .point_all li span { color: #485172; float: right; font-weight: bold; }
#point .point_all li:last-child { border-left: 1px solid #d6e2f4; }
#point .point_all .full_li { border-bottom: 1px solid #d6e2f4; text-align: left; width: 100%; }
#point .point_all .full_li span { color: #000; font-size: 1.2em; font-weight: bold; }
#point .point_status { background: #737373; border: 0; color: #fff; font-size: 1.083em; font-weight: bold; text-align: left; }
#point .point_status:after { clear: both; content: ""; display: block; visibility: hidden; }
#point .point_status span { float: right; margin-left: 10px; }

.point_list { }
.point_list li:first-child { border-top: 1px solid #ececec; }
.point_list li { background: #fff; border-bottom: 1px solid #ececec; list-style: none; padding: 15px; position: relative; }
.point_list li:after { clear: both; content: ""; display: block; visibility: hidden; }

.point_list .point_use { background: #f6f6f6; }
.point_list .point_use .point_num { color: #ff4f76; float: right; font-size: 1.25em; font-weight: bold; }
.point_list .point_num { color: var(--main-color1); font-size: 1.25em; font-weight: bold; position: absolute; right: 15px; top: 25px; }
.point_list .point_top { line-height: 15px; margin: 0 0 5px; }
.point_list .point_top:after { clear: both; content: ""; display: block; visibility: hidden; }
.point_list .point_tit { display: block; float: left; font-size: 1.083em; font-weight: bold; }
.point_list .point_date1 { color: #888d92; float: left; }
.point_list .point_date { color: #888d92; float: left; }
.point_list .txt_expired { color: red; margin-left: 5px; }

#point .pg_wrap { float: inherit; text-align: center; width: 100%; }
#point .btn_close { margin: 20px auto; }



/* 회원 비밀번호 확인 */
#mb_confirm { }
#mb_confirm .desc { border-top:1px solid #333; padding:20px 0; text-align:center; }
#mb_confirm .desc strong { display:block; }

#mb_confirm fieldset { padding:50px; background:#f8f8f8; text-align:center; }
#mb_confirm fieldset .frm_input { background-color:#fff !important; }
#mb_confirm fieldset ul { display:flex; justify-content:center; flex-wrap:wrap; max-width:500px; border:1px solid #ddd; margin:0 auto; }
#mb_confirm fieldset li { padding:15px; display:flex; align-items:center; }
#mb_confirm fieldset li:nth-child(odd) { width:120px; border-right:1px solid #ddd; }
#mb_confirm fieldset li:nth-child(even) { width:calc(100% - 120px); text-align:left; background:#fff; }
#mb_confirm fieldset li:nth-child(n+3) { border-top:1px solid #ddd; }
#mb_confirm fieldset .btn { background:#222; color:#fff; padding:10px 25px; margin:20px auto 0; }
#mb_confirm_id { font-weight:bold; }



/* 비밀글 비밀번호 확인 */
#pw_confirm { text-align: center; }
#pw_confirm h1 { font-size: 2em; margin: 60px 20px 30px; }
#pw_confirm p { border-bottom: 1px solid #e9e9e9; color: #656565; font-size: 1.083em; line-height: 1.4em; padding: 0 20px 40px; }
#pw_confirm p strong { display: block; font-size: 1.25rem; margin: 0 0 5px; }
#pw_confirm fieldset { display: flex; justify-content: center; padding: 50px; }
#pw_confirm fieldset .frm_input { background-color: #fff !important; max-width: 250px; width: 100%; }
#pw_confirm fieldset .btn { padding: 0 20px; }
#pw_confirm label { letter-spacing: -0.1em; }
#pw_confirm_id { display: inline-block; font-weight: bold; margin-right: 20px; }
#mb_confirm_id { }

/* 폼메일 */
#formmail textarea { height: 100px; }
#formmail .formmail_flie { position: relative; }
#formmail .formmail_flie .file_wr { background: #fff; border: 1px solid #ccc; border-radius: 3px; color: #000; height: 40px; margin: 0; padding: 5px; vertical-align: middle; }
#formmail .lb_icon { background: #fff; border-radius: 3px 0 0 3px; color: #b2b2b2; height: 38px; left: 1px; line-height: 38px; position: absolute; text-align: center; top: 1px; width: 40px; }
#formmail .frm_file { padding-left: 50px; }
#formmail .frm_info { color: #3497d9; font-size: 0.92em; }
.chk_box { position: relative; }
.chk_box input[type="radio"] { height: 0; left: 0; opacity: 0; outline: 0; overflow: hidden; position: absolute; top: 0; width: 0; z-index: -1; }
.chk_box input[type="radio"] + label { color: #676e70; display: inline-block; padding-left: 23px; position: relative; }
.chk_box input[type="radio"] + label span { background: #f7f8f9; border: 1px solid #cdd6df; border-radius: 50%; display: block; height: 15px; left: 0; position: absolute; top: 0; width: 15px; }
.chk_box input[type="radio"]:checked + label { color: var(--main-color1); }
.chk_box input[type="radio"]:checked + label span { border-color: var(--main-color1); }
.chk_box input[type="radio"]:checked + label span:before { background: var(--main-color1); border-radius: 50%; content: ''; height: 7px; left: 3px; position: absolute; top: 3px; width: 7px; }
.chk_box input[type="checkbox"] + label { color: #676e70; position: relative; }
.chk_box input[type="checkbox"] + label:hover { color: #2172f8; }
.chk_box input[type="checkbox"] + label span { background: #fff; border: 1px solid #d0d4df; border-radius: 3px; display: block; float: left; height: 15px; width: 15px; }
.chk_box input[type="checkbox"]:checked + label { color: #000; }
.chk_box input[type="checkbox"]:checked + label span { background: url(./img/chk.png) no-repeat 50% 50% var(--main-color1); border-color: var(--main-color1); border-radius: 3px; }
.selec_chk { height: 0; left: 0; opacity: 0; outline: 0; overflow: hidden; position: absolute; top: 0; width: 0; z-index: -1; }


/* 자기소개 */
#profile h1 a { }
#profile table { margin-bottom: 0; }
#profile table th { padding: 10px; text-align: left; width: 100px; }
#profile section { background: #fff; border: 1px solid #eee; color: #6794d3; margin: 10px 0; padding: 10px; }
#profile h2 { margin: 0 0 5px; }
#profile .profile_name { font-weight: bold; text-align: center; }
#profile .my_profile_img { display: block; margin: 20px 0 5px; }
#profile .my_profile_img img { border-radius: 50%; }
#profile .profile_img img { border-radius: 50%; }
#profile .profile_name .sv_wrap { font-weight: bold; text-align: left; }



#fregisterform .form_01 .reg-form { margin-bottom: 20px; }
#fregisterform .form_01 .reg-form .sns-wrap { margin: 10px 0 0; text-align: left; }
.reg-form .sns-icon { border-style: solid; border-width: 1px; display: inline-block; margin: 0 1px; overflow: hidden; text-decoration: none; vertical-align: middle; }
.reg-form .sns-icon:hover { text-decoration: none; }
.reg-form .sns-icon .ico { background: url('./img/sns_logo.png') no-repeat; display: block; height: 24px; vertical-align: middle; width: 24px; }
.reg-form .sns-icon-not .ico { background: url('./img/sns_logo_not.png') no-repeat; display: block; vertical-align: middle; }
.reg-form .sns-icon .txt { font-size: 0; line-height: 0; overflow: hidden; position: absolute; vertical-align: middle; }
.reg-form .sns-icon .txt i { font-style: normal; }

.sns-wrap-reg .sns-naver { background: #2db400; border-color: #18a400; }
.sns-wrap-reg .sns-naver .ico { background-position: -29px 0; }
.sns-wrap-reg .sns-google { background: #dd5443; border-color: #ca2c19; }
.sns-wrap-reg .sns-google .ico { background-position: -58px 0; }
.sns-wrap-reg .sns-facebook { background: #3a5897; border-color: #2e5393; }
.sns-wrap-reg .sns-facebook .ico { background-position: 0 0; }

.sns-wrap-reg .sns-icon { border-color: #dcdcdc; }
.sns-wrap-reg .sns-icon-not { border-color: #8b8b8b; }
.sns-wrap-reg .sns-naver { border-color: #18a400; }
.sns-wrap-reg .sns-naver .ico { background-position: -29px 0; }
.sns-wrap-reg .sns-google .ico { background-position: -58px 0; }
.sns-wrap-reg .sns-google { border-color: #ca2c19; }
.sns-wrap-reg .sns-facebook .ico { background-position: 0 0; }
.sns-wrap-reg .sns-facebook { border-color: #2e5393; }
.sns-wrap-reg .sns-kakao .ico { background-position: -87px 0; }
.sns-wrap-reg .sns-twitter { border-color: #488FC9; }
.sns-wrap-reg .sns-twitter .ico { background-position: -145px 0; }
.sns-wrap-reg .sns-payco { border-color: #C44646; }
.sns-wrap-reg .sns-payco .ico { background-position: -116px 0; }
.sns-wrap-reg .sns-kakao { border-color: #f2df00; }


.sns-wrap-over .sns-naver { background: url('../../../img/sns_naver_s.png') no-repeat; }
.sns-wrap-over:not(.login-sns) .sns-google { background: url('../../../img/sns_google_s.png') no-repeat; }
.sns-wrap-over .sns-facebook { background: url('../../../img/sns_facebook_s.png') no-repeat; }
.sns-wrap-over .sns-twitter { background: url('../../../img/sns_twitter_s.png') no-repeat; }
.sns-wrap-over .sns-payco { background: url('../../../img/sns_payco_s.png') no-repeat; }
.sns-wrap-over .sns-kakao { background: url('../../../img/sns_kakaotalk_s.png') no-repeat; }
.reg-form .sns-icon-not { border-color: #8b8b8b; }



.social-login-loading { height: auto; text-align: center; width: 100%; }
.social-login-loading p { display: inline-block; line-height: 30px; margin-top: 10px; padding: 40px 0 0; }


#sns_outlogin .sns-icon { margin: 0 1px; overflow: hidden; }
#sns_outlogin .sns-icon .txt { font-size: 0; line-height: 0; overflow: hidden; position: absolute; vertical-align: middle; }
#sns_outlogin .sns-icon .ico { height: 30px; width: 30px; }

/* 소셜로그인 */
#sns_login { border: 0; border-top: 0px solid #edeaea; margin-top: 10px; }
#sns_login .sns-icon { border-radius: 99px; color: #fff; display: block; height: 40px; line-height: 40px; margin: 0 0 5px; padding-left: 40px; text-align: left; width: 100%; background-position:7px 5px; }
#sns_login .sns-naver { background-color: #1fc800; border-bottom: 1px solid #1ea505; }
#sns_login .sns-kakao { background-color: #ffeb00; border-bottom: 1px solid #e2c10a; }
#sns_login .sns-kakao { color: #3c1e1e; }
#sns_login .sns-facebook { background-color: #3b579d; border-bottom: 1px solid #28458f; }
#sns_login .sns-google { background-color: #db4a3a; border-bottom: 1px solid #c03121; }
#sns_login .sns-twitter { background-color: #1ea1f2; border-bottom: 1px solid #1e82c0; }
#sns_login .sns-payco { background-color: #df0b00; border-bottom: 1px solid #9d0800; }
#sns_login .txt { border-left: 1px solid rgba(0,0,0,0.1); display: block; font-weight: normal; padding-left: 10px; text-align: left; font-size:.875rem; }
#sns_login .txt:hover { background: rgba(0,0,0,0.07); }


#sns_register { }
#sns_register .panel-body { text-align: center; }
#sns_register .sns-wrap { align-items: center; border: 1px solid #ddd; border-radius:99px; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; padding: 30px; width: 100%; }

#sns_register .sns-naver { background-color: #1fc800; background-position: 5px 5px; border-bottom: 1px solid #1ea505; }
#sns_register .sns-kakao { background-color: #ffeb00; background-position: 5px 5px; border-bottom: 1px solid #e2c10a; }
#sns_register .sns-kakao { color: #3c1e1e; }
#sns_register .sns-facebook { background-color: #3b579d; background-position: 5px 5px; border-bottom: 1px solid #28458f; }
#sns_register .sns-google { background-color: #db4a3a; background-position: 5px 5px; border-bottom: 1px solid #c03121; }
#sns_register .sns-twitter { background-color: #1ea1f2; background-position: 5px 5px; border-bottom: 1px solid #1e82c0; }
#sns_register .sns-payco { background-color: #df0b00; background-position: 5px 5px; border-bottom: 1px solid #9d0800; }
#sns_register .txt { border-left: 1px solid rgba(0,0,0,0.1); display: block; font-weight: bold; padding-left: 10px; }
#sns_register .txt:hover { background: rgba(0,0,0,0.07); }


@media (max-width: 767px) {
	#sns_register .sns-wrap { padding:20px 15px; }
}