@charset "utf-8"; /* ### 기본 스타일 커스터마이징 시작 ### */ /* 기본박스 */ .mbskin {text-align:center; width:100%; height:auto; margin:50px 0; text-align:center;} .mbskin:after {right:10px;left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg)} .mbskin .mbskin_box {background:#fff; width:100%; height:auto; max-width:360px; display:inline-block;text-align:left;} .mbskin .mbskin_box .move_home {width:auto; height:auto; text-align:center; display:inline-block;} .mbskin .mbskin_box .move_home a { width:auto; height:auto; display:inline-block; font-size:12px; color:#999; font-weight:600; padding:5px;} .mbskin .mbskin_box .move_home a img { width:100%; height:auto; max-width:35px; opacity:0.5; transition:0.6s;} .mbskin .mbskin_box .move_home a:hover img { opacity:1; transition:0.6s;} .mbskin .mbskin_box .login_form { } .mbskin .frm_input {width:100%} .mbskin .btn_submit {width:100%;margin:10px 0 0;height:45px;font-weight:bold;font-size:1.25em} .mbskin h1 {margin:60px 0 30px;font-size:2em} .mbskin .tbl_frm01 th {width:85px} /* ### 기본 스타일 커스터마이징 끝 ### */ /* 회원가입 약관 */ .register {margin:0 auto; width:100%; height:auto; text-align:center; margin:40px 0;} .register .registerWrap {width:95%; height:auto; display:inline-block; text-align:center; max-width:850px; background-color:#edf3fc; padding:clamp(25px, 5%, 40px);} .register:after {display:block;visibility:hidden;clear:both;content:""} .register .btn_confirm .btn_submit, .register .btn_confirm .btn_close {float:left;height:50px !important;width:49.5%;font-weight:bold;font-size:1.083em} .register .btn_confirm {text-align:left} .register .btn_confirm .btn_submit {margin-left:1%} #fregister p {position:relative;text-align:center;color:#fff;height:50px;line-height:50px;font-size:1.1em;background:#f2838f;margin:0 0 10px;border-radius:5px;font-weight:bold} #fregister p:before {content:"";position:absolute;top:0;left:0;width:5px;height:50px;border-radius:5px 0 0 5px;background:#da4453} #fregister p i {font-size:1.2em;vertical-align:middle} #fregister section {margin:10px auto 15px;border:1px solid #dde7e9;position:relative;border-radius:3px} #fregister_chkall {position:relative;text-align:center;background:#f5f7fa;line-height:50px;border:1px solid #e5e9f0;border-radius:3px;margin-bottom:15px} #fregister h2 {text-align:left;padding:20px;border-bottom:1px solid #dde7e9;font-size:1.2em} #fregister textarea {display:block;padding:20px;width:100%;height:150px;background:#fff;border:0;line-height:1.6em} #fregister_private {position:relative} #fregister_private div {padding:20px;background:#fff} #fregister_private table {width:100%;border-collapse:collapse;font-size:1em;} #fregister_private table caption {position:absolute;font-size:0;line-height:0;overflow:hidden} #fregister_private table th {background:#f7f7f9;width:33.33%;color:#000;padding:10px;border:1px solid #d8dbdf} #fregister_private table td {border:1px solid #e7e9ec;padding:10px;border-top:0} .fregister_agree {position:absolute;top:0;right:0} .fregister_agree input[type="checkbox"] + label {color:#676e70} .fregister_agree input[type="checkbox"] + label:hover {color:#2172f8} .fregister_agree input[type="checkbox"] + label span {position:absolute;top:20px;right:15px;width:17px;height:17px;display:block;background:#fff;border:1px solid #999;border-radius:3px} .fregister_agree input[type="checkbox"]:checked + label {color:#000} .fregister_agree input[type="checkbox"]:checked + label span {background:url('./img/chk.png') no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px} .fregister_agree.chk_all input[type="checkbox"] + label span {top:18px} .chk_li {padding-left:20px} #sns_register .login-sns, #sns_register h2 {border:0 !important} /* 회원가입 입력 */ #register_form {background:#fff;margin-bottom:20px} #register_form h2 {padding:20px;border-bottom:1px solid #dde7e9} .register_form_inner {background:#f7f7f7;border:1px solid #dde7e9;border-radius:3px} .register_form_inner ul {padding:20px} .register_form_inner label {display:block;margin-bottom:10px;line-height:24px} .register_form_inner label.inline {display:inline} #fregisterform .cert_desc {color:#3a8afd;} #fregisterform .cert_req {margin-left:5px;line-height:35px;} #fregisterform #msg_certify {margin:5px 0;padding:5px;border:1px solid #dbecff;background:#eaf4ff;text-align:center} #fregisterform .frm_address {margin:5px 0 0} #fregisterform #mb_addr3 {display:inline-block;margin:5px 0 0;vertical-align:middle} #fregisterform #mb_addr_jibeon {display:block;margin:5px 0 0} #fregisterform .btn_confirm {text-align:center} #fregisterform .form_01 div {margin:0 0 20px} #fregisterform .captcha {display:block;margin:5px 0 0} #fregisterform .reg_mb_img_file img {max-width:100%;height:auto} #reg_mb_icon, #reg_mb_img {float:right} /* 회원가입 완료 */ #reg_result {} #reg_result h2 {font-size:2em;margin:0 0 20px} #reg_result h2 strong {color:#ed6478} #reg_result #result_email {margin:20px 0;padding:10px 30px;border-top:1px solid #e9e9e9;border-bottom:1px solid #dde4e9;background:#fff;line-height:2em; display:inline-block; width:100%; max-width:400px; text-align:left;} #reg_result #result_email span {display:inline-block;width:150px; font-size:clamp(13px, 1.5vw, 16px);} #reg_result #result_email strong {color:#e8180c;font-size:1.2em} #reg_result p.email_notice {color:#980000; text-align:center; margin-bottom:15px;} #reg_result p {text-align:left; font-size:clamp(13px, 1.5vw, 16px); width:80%; display:inline-block; font-weight:400; color:#888 ;} #reg_result .result_txt {text-align:left; font-size:clamp(13px, 1.5vw, 16px); width:80%; display:inline-block; font-weight:400; color:#888 ;} #reg_result .btn_confirm {margin:50px 0} #reg_result i {font-size:3.5em} #reg_result .reg_result_p {font-size:clamp(13px, 2vw, 22px);margin:0 0 10px;color:#555; text-align:center;} #reg_result .reg_result_p strong {color : #3684fa; font-size:clamp(13px, 2vw, 22px);} .btn_confirm_reg {margin:20px 0;text-align:center} .reg_btn_submit {display:inline-block;background:#3a8afd;color:#fff;text-align:center;border-radius:3px;width:30%; max-width:200px;height:auto;line-height:43px;font-size:1.2em;margin:0 auto;font-weight:bold} .reg_btn_submit:hover {background: #2375eb;} .mb_log_cate h3 {width:100%;float:left;padding-top:20px;text-align:center; font-size:clamp(23px, 4vw, 35px); color:#ddd; letter-spacing:0.1em; font-weight:600; font-style:italic; line-height:1em; z-index:-1; } .mb_log_cate h2 {width:100%;float:left;padding-top:20px;text-align:center; font-size:50px; color:#f4f4f4; letter-spacing:0.2em; font-weight:600; font-style:italic; line-height:1em; z-index:-1; } .mb_log_cate .join {width:50%;float:left;padding:20px 0;text-align:center;background:#f7f7f7;color:#6e6e6e} .mb_log_cate:after {display:block;visibility:hidden;clear:both;content:""} .tooltip_icon {display:inline-block;vertical-align:baseline;color:#b3b5b8;border:0;font-size:1.4em;background:transparent;cursor:pointer} .tooltip_icon:hover {color:#448bf5} .tooltip {position:relative;width:auto;color:#fff;background:#000;padding:10px;font-size:small;line-height:18px;display:none;position:absolute;z-index:9;font-weight:normal;margin-left:15px;margin-top:10px} .tooltip:before {content:"";position:absolute;top:0;left:-10px;width:0;height:0;border-style:solid;border-top:0px solid transparent;border-bottom:10px solid transparent;border-left:0;border-right:10px solid #000} /* 아이디/비밀번호 찾기 */ #find_info h3 {display:none;margin-bottom:30px;text-align:center;font-size:1.1em;} #find_info .new_win_con {background:#f7f7f7;} #find_info.cert .new_win_con {width:460px;float:left;} #find_info.cert .new_win_con:nth-child(2) {margin-left:10px;} #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 {position:relative;text-align:center;color:#fff;height:50px;line-height:50px;font-size:1.1em;background:#f2838f;margin:0 0 10px;border-radius:5px;font-weight:bold} #member_cert_refresh p:before {content:"";position:absolute;top:0;left:0;width:5px;height:50px;border-radius:5px 0 0 5px;background:#da4453} #member_cert_refresh p i {font-size:1.2em;vertical-align:middle} #member_cert_refresh section {margin:10px auto 15px;border:1px solid #dde7e9;position:relative;border-radius:3px} #member_cert_refresh_chkall {position:relative;text-align:center;background:#f5f7fa;line-height:50px;border:1px solid #e5e9f0;border-radius:3px;margin-bottom:15px} #member_cert_refresh h2 {text-align:left;padding:20px;border-bottom:1px solid #dde7e9;font-size:1.2em} #member_cert_refresh textarea {display:block;padding:20px;width:100%;height:150px;background:#fff;border:0;line-height:1.6em} #member_cert_refresh_private {position:relative} #member_cert_refresh_private div {padding:20px;background:#fff} #member_cert_refresh_private table {width:100%;border-collapse:collapse;font-size:1em;} #member_cert_refresh_private table caption {position:absolute;font-size:0;line-height:0;overflow:hidden} #member_cert_refresh_private table th {background:#f7f7f9;width:33.33%;color:#000;padding:10px;border:1px solid #d8dbdf;font-weight:bold;} #member_cert_refresh_private table td {border:1px solid #e7e9ec;padding:10px;border-top:0} .member_cert_refresh_agree {position:absolute;top:0;right: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 {position:absolute;top:20px;right:15px;width:17px;height:17px;display:block;background:#fff;border:1px solid #999;border-radius:3px} .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% #3a8afd;border-color:#1471f6;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 {padding:10px 20px;background:#fff} #member_cert_refresh #find_info .find_btn > div {margin:10px 0} /* 로그인 */ #mb_login { width : 100%; height : auto; } #mb_login h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #login_fs {padding:20px 35px 35px 35px;} #mb_login #login_fs .frm_input {margin:0 0 10px} #mb_login #login_fs .btn_submit {margin:0 0 15px} #login_info {} #login_info:after {display:block;visibility:hidden;clear:both;content:""} #login_info .login_if_auto {float:left} #login_info .login_if_auto label {vertical-align:baseline;padding-left:5px} #login_info .login_if_lpl {float:right} #login_info .login_if_lpl a {font-size:14px; font-weight:300;} #login_password_lost {display:inline-block;border:1px solid #d5d9dd;color:#3a8afd;border-radius:2px;padding:2px 5px;line-height:20px} #mb_login_notmb {margin:30px auto;padding:20px 30px} #mb_login_notmb h2 {font-size:1.25em;margin:20px 0 10px} #guest_privacy {border:1px solid #ccc;text-align:left;line-height:1.6em;color:#666;background:#fafafa;padding:10px;height:150px;margin:10px 0;overflow-y:auto} #mb_login_notmb .btn_submit {display:block;text-align:center;line-height:45px} #mb_login_od_wr {margin:30px auto;padding:20px 30px} #mb_login_od_wr h2 {font-size:1.25em;margin:20px 0 10px} #mb_login_od_wr .frm_input {margin:10px 0 0} #mb_login_od_wr p {background:#f3f3f3;margin:20px 0 0;padding:15px 20px;line-height:1.5em} #mb_login #sns_login {margin-top:0;border-color:#edeaea;padding:10px 25px 35px 25px;} #mb_login #sns_login:after {display:block;visibility:hidden;clear:both;content:""} /*#mb_login #sns_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}*/ #mb_login #sns_login .sns-wrap {margin:0 !important} #mb_login #sns_login .sns-icon {width:80%;float:left; margin-left:10%; text-align:center; background-position:39px center; padding-right:15px;} #mb_login #sns_login .sns-icon:nth-child(odd) {margin-right:2%} #mb_login #sns_login .txt {font-size:16px;padding-left:5px !important;border-left:0 !important; padding-right:15px;line-height: 39px; font-weight: 400;} #mb_login #sns_login .txt i {font-size: 16px; font-weight:400;} /* 쪽지 */ .memo_list {border-top:1px solid #ececec} .memo_list li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative} .memo_list li:after {display:block;visibility:hidden;clear:both;content:""} .memo_list li.read {background:#f6f6f6} .memo_list li.empty_li {text-align:center;padding:20px 0;color:#666} .memo_list .memo_li {float:left} .memo_list .profile_big_img {position:relative;margin-right:15px} .memo_list .profile_big_img img {border-radius:50%;width:52px;height:52px} .memo_list .memo_li.memo_name {padding-top:5px;float:none} .memo_list .memo_preview a{display:block;margin-right:30px;padding-top:10px;font-weight:normal !important;font-size:1.2em} .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 {position:absolute;bottom:0;right:0;display:inline-block;background:#3a8afd;border:1px solid #e1edff;text-indent:-9999px;border-radius:10px;width:10px;height:10px;box-shadow:0 0 10px 3px #9ec3f9} .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 {font-size:0.92em;color:#888d92} #memo_list .memo_del {position:absolute;right:15px;top:15px;padding:10px;color:#c7c9cb;font-size:1.4em} #memo_list .memo_cnt {margin-top:5px;font-weight:normal;display:inline-block;font-size:1.2em} #memo_list .pg_wrap {margin-top:10px;width:100%;float:inherit;text-align:center} #memo_view_contents {margin-bottom:20px;border-top:1px solid #ececec;border-bottom:1px solid #ececec} #memo_view_contents h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #memo_view_ul {margin:0;list-style:none;background:#f6f6f6} #memo_view_ul:after {display:block;visibility:hidden;clear:both;content:""} .memo_view_li {position:relative;/*padding:10px;float:left;width:50%*/} .memo_view_li .profile_img img {display:none} .memo_from {position:relative;background:#fff;border-bottom:1px solid #ececec;padding:15px 20px} .memo_from li {float:left} .memo_from li.memo_profile img {width:40px;height:40px;border-radius:50%} .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 {display:block;color:#555;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 {display:block;visibility:hidden;clear:both;content:""} .memo_btn {width:100%} .memo_btn a {display:inline-block;width:50%;font-size:1em;color:#888d92;padding:20px} .memo_btn a.btn_right {float:right;text-align:right} .memo_btn a i {font-size:1.2em;color:#acabab;vertical-align:bottom} #memo_view p {padding:10px;min-height:150px;height:auto !important;height:150px;background:#fff;line-height:1.8em} #memo_view textarea {height:100px} #memo_write .form_01 {padding:20px;border-top:1px solid #ececec} .reply_btn {display:inline-block;width:150px;height:45px;line-height:50px;padding:0 10px;font-weight:bold;background:#3a8afd;color:#fff;border-radius:3px;vertical-align:bottom;margin-right:5px} #memo_write .reply_btn {font-size:1em} /* 스크랩 */ #scrap li:after {display:block;visibility:hidden;clear:both;content:""} #scrap li {position:relative;padding:20px;border-bottom:1px solid #ececec} #scrap .scrap_tit {font-weight:bold;display:block;font-size:1.083em;margin-bottom:10px;line-height:1.3em} #scrap .scrap_cate {float:left;display:block;color:#ac92ec;background:#eeeaf8;padding:3px;border-radius:3px;font-size:0.92em;margin-right:10px} #scrap .scrap_datetime {color:#777;line-height:18px} #scrap .scrap_del {position:absolute;top:15px;right:15px;font-size:18px;color:#c7c9cb} #scrap .scrap_del:hover {color:#3a8afd} #scrap_do .new_win_con {padding:0 20px} #scrap_do textarea {width:100%;height:100px} #scrap_do .scrap_tit {margin-bottom:10px;background:#f3f3f3;padding:10px 15px;font-size:1.2em;font-weight:bold} #scrap_do label {display:block;margin:0 0 5px;font-size:1em} #scrap_do .win_btn:after {display:block;visibility:hidden;clear:both;content:""} #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 {margin:20px 20px 15px;border-radius:5px;background:#edf3fc;border:1px solid #d6e2f4;color:#485172;font-size:1.083em} #point .point_all:after {display:block;visibility:hidden;clear:both;content:""} #point .point_all li {float:left;width:50%;padding:20px;text-align:left} #point .point_all li span {float:right;color:#485172;font-weight:bold} #point .point_all li:last-child {border-left:1px solid #d6e2f4} #point .point_all .full_li {width:100%;border-bottom:1px solid #d6e2f4;text-align:left} #point .point_all .full_li span {color:#000;font-weight:bold;font-size:1.2em} #point .point_status{background:#737373;border:0;color:#fff;font-weight:bold;font-size:1.083em;text-align:left} #point .point_status:after {display:block;visibility:hidden;clear:both;content:""} #point .point_status span{margin-left:10px;float:right} .point_list {} .point_list li:first-child {border-top:1px solid #ececec} .point_list li {border-bottom:1px solid #ececec;background:#fff;padding:15px;list-style:none;position:relative} .point_list li:after {display:block;visibility:hidden;clear:both;content:""} .point_list .point_use {background:#f6f6f6} .point_list .point_use .point_num {font-size:1.25em;color:#ff4f76;font-weight:bold;float:right} .point_list .point_num {font-size:1.25em;color:#3a8afd;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 {display:block;visibility:hidden;clear:both;content:""} .point_list .point_tit {font-weight:bold;float:left;font-size:1.083em;display:block} .point_list .point_date1 {float:left;color:#888d92} .point_list .point_date {float:left;color:#888d92} .point_list .txt_expired {color:red;margin-left:5px} #point .pg_wrap {width:100%;float:inherit;text-align:center} #point .btn_close {margin:20px auto} /* 회원 비밀번호 확인 */ #mb_confirm {} #mb_confirm h1 {margin:60px 0 30px;font-size:2em} #mb_confirm p {padding:30px 20px;border-bottom:1px solid #e9e9e9;font-size:clamp(13px,2vw,15px);line-height:1.4em;color:#999;} #mb_confirm p strong {display:block;color:#fff;font-size:clamp(14px,2vw,16px);margin:0 0 5px; text-align:center; background-color:#8b8b8b; padding:5px; font-weight:400; margin-bottom:10px;} #mb_confirm fieldset {;padding:30px;text-align:left} #mb_confirm fieldset .frm_input {background-color:#fff !important} #mb_confirm label {letter-spacing:-0.1em} #mb_confirm_id {display:block;margin:5px 0 10px;font-weight:bold; font-size:clamp(15px,2vw, 15px)} #mb_confirm .confirm_id {font-size:clamp(14px,2vw, 17px);color:#999; font-weight:400;} /* 비밀글 비밀번호 확인 */ #pw_confirm h1 {margin:60px 20px 30px;font-size:2em} #pw_confirm p {padding:0 20px 40px;border-bottom:1px solid #e9e9e9;font-size:1.083em;line-height:1.4em;color:#656565} #pw_confirm p strong {display:block;color:#3ca1ff;font-size:1.167em;margin:0 0 5px} #pw_confirm fieldset {padding:50px;text-align:center} #pw_confirm fieldset .frm_input {background-color:#fff !important} #pw_confirm label {letter-spacing:-0.1em} #pw_confirm_id {display:inline-block;margin-right:20px;font-weight:bold} #mb_confirm_id {} /* 폼메일 */ #formmail textarea {height:100px} #formmail .formmail_flie {position:relative} #formmail .formmail_flie .file_wr {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:40px;margin:0} #formmail .lb_icon {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;background:#fff;text-align:center;color:#b2b2b2} #formmail .frm_file {padding-left:50px} #formmail .frm_info {color:#3497d9;font-size:0.92em} .chk_box {position:relative} .chk_box input[type="radio"] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden} .chk_box input[type="radio"] + label {position:relative;padding-left:23px;display:inline-block;color:#676e70} .chk_box input[type="radio"] + label span {position:absolute;top:0;left:0;width:15px;height:15px;display:block;background:#f7f8f9;border:1px solid #cdd6df;border-radius:50%} .chk_box input[type="radio"]:checked + label {color:#3a8afd} .chk_box input[type="radio"]:checked + label span {border-color:#3a8afd} .chk_box input[type="radio"]:checked + label span:before {width:7px;height:7px;background:#3a8afd;content:'';position:absolute;top:3px;left:3px;border-radius:50%} .chk_box input[type="checkbox"] + label {position:relative;color:#676e70} .chk_box input[type="checkbox"] + label:hover {color:#2172f8} .chk_box input[type="checkbox"] + label span {float:left;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px; margin-top:4px;} .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% #3a8afd;border-color:#1471f6;border-radius:3px} .selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden} /* 자기소개 */ #profile h1 a {} #profile table {margin-bottom:0} #profile table th {text-align:left;padding:10px;width:100px} #profile section {color:#6794d3;background:#fff;padding:10px;border:1px solid #eee;margin:10px 0} #profile h2 {margin:0 0 5px} #profile .profile_name {text-align:center;font-weight:bold} #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} .login_joinmember {width : 100%; height : auto; text-align:center;} .login_joinmember .Wrap { width : 100%; max-width:360xp; display:inline-block; } .login_joinmember .Wrap p { font-size:13px; font-style:italic; color:#888; font-weight:400;} .login_joinmember .Wrap .login_joinmember_Herf { padding : 7px 25px; border : 1px solid #d9d9d9; display : inline-block; margin-top:10px; font-size:15px; font-weight:600; color:#777; border-radius:10px; background-color:#fff; transition:0.6s;} .login_joinmember .Wrap .login_joinmember_Herf:hover { background-color:#2375eb; transition:0.6s; color:#fff; border : 1px solid #2375eb;} @media (max-width:640px) { #login_info .login_if_auto {float:unset; width:100%; text-align:left; padding:5px 10px; } #login_info .login_if_lpl {float:unset; width:100%; text-align:left; padding:5px 10px; } } /* 로그인 화면 메뉴 */ #TitleMenu_LeftLogo_search { border-bottom : 1px solid #e5e5e5;} /* 로그인 화면 커스텀 */ /* A A A : A : A : A : */ #mb_login { width : 100%; max-width : 550px; display : flex; flex-direction : column; align-items : center; margin : 120px auto 0; font-family : "SCDream"; font-size : 18px; padding : 4em 0 6em;} #mb_login .back { width : 100%; height : auto; display : flex; color : #777; font-size : 16px; align-items : flex-end; line-height : 1em; transition : .2s;} #mb_login .back svg { font-size : 20px;} #mb_login .back:hover { color : #333; transition : .2s;} #mb_login .loginWrap { width : 100%; height : auto; font-size : inherit; padding : 0 1em; display : flex; align-items : center; flex-direction : column; padding-bottom : 2.5em; margin-bottom : 1.5em;} #mb_login .loginWrap .logoWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; font-size : inherit;} #mb_login .loginWrap .logoWrap img { width : 9.6em; height : auto; font-size : inherit; } #mb_login .loginWrap .logoWrap .line { font-size : inherit; height : 0.4em; width : 3.3em; margin : 1em 0; background: #777;} #mb_login .loginWrap .logoWrap p { font-size : 1.4em; color : #555555; line-height : 1em; font-weight : 600;} #mb_login .loginWrap .formWrap { font-size : inherit; width : 100%; max-width : 400px; } #mb_login .loginWrap .formWrap form { font-size : inherit; width : 100%; font-size : inherit;} #mb_login .loginWrap .loginInputWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; font-size : inherit; margin : 2em 0 0;} #mb_login .loginWrap .loginInputWrap .inputWrap { width : 100%; height : auto; display : flex; flex-direction : column; font-size : inherit; margin-bottom : 1.2em;} #mb_login .loginWrap .loginInputWrap .inputWrap p { font-size : inherit; text-align : left; color : #555; line-height : 1em; margin-bottom : 0.5em;} #mb_login .loginWrap .loginInputWrap .inputWrap input { border : 1px solid #dcdcdd; border-radius : 5px; font-size : inherit; padding : 0.65em 0.5em;} #mb_login .loginWrap .loginInputWrap .loginBot { width : 100%; height : auto; display : flex; align-items : center; font-size : inherit; justify-content : space-between; margin-bottom : 1.6em;} #mb_login .loginWrap .loginInputWrap .loginBot label { width : auto; display : flex; align-items : center; font-size : inherit; cursor : pointer;} #mb_login .loginWrap .loginInputWrap .loginBot label .imgWrap { width : auto; height : auto; font-size : inherit; display : flex; flex-direction : column; margin-right : 0.3em;} #mb_login .loginWrap .loginInputWrap .loginBot label img { font-size : inherit; width : auto; height : 1.2em;} #mb_login .loginWrap .loginInputWrap .loginBot label p { font-size : inherit; line-height : 1em; color : #777777; transition : .2s;} #mb_login .loginWrap .loginInputWrap .loginBot label:hover p { color : #000; transition : .2s;} #mb_login .loginWrap .loginInputWrap .loginBot a { font-size : inherit; color : #777777; line-height : 1em; transition : .2s;} #mb_login .loginWrap .loginInputWrap .loginBot a:hover { color : #000; transition : .2s;} #mb_login .loginWrap .loginInputWrap button { width : 100%; height : auto; font-size : inherit; color : #555555; background : #dcdcdd; transition : .2s; line-height : 1em; padding : 0.9em 0; border-radius : 5px; font-family : "SCDream"; transition : .2s;} #mb_login .loginWrap .loginInputWrap button:hover { background : #333; color : #fff; transition : .2s;} #mb_login .loginWrap .joinWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; font-size : inherit; max-width : 400px; } #mb_login .loginWrap .joinWrap p { font-size : inherit; color : #777777; line-height : 1em; margin-bottom : 1.2em;} #mb_login .loginWrap .joinWrap a { width : 100%; height : auto; font-size : inherit; color : #fff; background : #0460a7; transition : .2s; line-height : 1em; padding : 0.9em 0; border-radius : 5px; font-family : "SCDream"; transition : .2s;} #mb_login .loginWrap .joinWrap a:hover { background : #2c9dd9; transition : .2s;} #mb_login .socialWrap { width : 100%; height : auto; display : flex; flex-direction : column; max-width : 400px;} #mb_login .socialWrap .tit { font-size : 20px; color : #555555; font-weight : 500; line-height : 1em; } #mb_login .socialWrap .text { font-size : 18px; color : #777777; line-height : 1em; margin : 1.2em 0;} #mb_login .socialWrap .text br { display : none;} #mb_login .socialWrap .iconWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; } #mb_login .socialWrap .iconWrap img { width : 55px; height : auto; transition : .2s;} #mb_login .socialWrap .iconWrap a:hover img { filter : drop-shadow(0px 0px 3px #666); transition : .2s;} input[id="login_auto_login"]:checked + label .imgWrap { border-radius : 50%; background : #0460a7;} input[id="login_auto_login"]:checked + label p { color : #0460a7 !important;} #mb_login .mobNavBotWrap { width : 100%; height : auto; display : none; flex-direction : column; align-items : center; font-size : clamp(12px,3vw,14px); background : #eeefef; color : #555; margin-top : 3em;} #mb_login .mobNavBotWrap .pcVer { font-size : 1.2em; line-height : 1em; padding : 1.2em 0 1em; cursor : pointer; } #mb_login .mobNavBotWrap .termsWrap { width : 90%; height : auto; font-size : inheirt; padding : 1em 0; display : flex; align-items : center; justify-content : space-between; border-top : 1px solid #dcdcdd;} #mb_login .mobNavBotWrap .termsWrap p { cursor : pointer; line-height : 1.2em; font-size : inherit;} #mb_login .mobNavBotWrap p br { display : none;} #mb_login .mobNavBotWrap .copyWrap { width : 90%; height : auto; display : flex; flex-direction : column; align-items : flex-start; padding : 0.4em 0 2em;} #mb_login .mobNavBotWrap .copyWrap .bold { color : #000; font-weight : 500; word-break : keep-all;} #mb_login .mobNavBotWrap .copyWrap p { word-break : keep-all;} @media (max-width : 640px){ /* A A A : A : A : A : */ #mb_login { margin-top : 65px; font-size : calc(12px + 1vw); background : #f7f7f7; padding-bottom : 0;} .XmobileX { display : none;} #mb_login .back { height : 50px; align-items : center; padding-left : 1em; font-size : inherit; margin-bottom : 1em;} #mb_login .loginWrap { width : 90%; padding-right : 0; padding-left : 0; font-size : inherit;} #mb_login .loginWrap .logoWrap { display : none;} #mb_login .loginWrap .loginInputWrap { margin-top : 0;} #mb_login .loginWrap .loginInputWrap button { background : #2c9dd9; color : #fff;} #mb_login .socialWrap { width : 90%;} #mb_login .socialWrap .tit { font-size : 18px;} #mb_login .socialWrap .text { font-size : 13px; word-break : keep-all; line-height : 1.3em;} #mb_login .socialWrap .text br { display : block;} #mb_login .socialWrap .iconWrap img { width : 45px;} #mb_login .mobNavBotWrap { display : flex;} } @media (max-width : 374px){ #mb_login .mobNavBotWrap p br { display : block;} } /* 분양팩트 컨펌창 */ #pw_confirm { width : 100%; height : auto; max-width : 600px; display : flex; flex-direction : column; align-items : center; margin : 0 auto; margin-top : min(6vw,80px);} #pw_confirm .logoWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; } #pw_confirm .logoWrap img { width : 100%; height : auto; max-width : 200px;} #pw_confirm .logoWrap .line { width : 45px; height : 7px; margin : 20px 0; background: #253f8e; /* fallback for old browsers */ background: -webkit-linear-gradient(135deg, #253f8e, #0f869e); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(135deg, #253f8e, #0f869e);} #pw_confirm .logoWrap p { font-size : 16px; color : #555; font-family : "SCDream"; font-weight : 600; padding : 0; border-bottom : 0;} #pw_confirm .inputWrap { width : 100%; height : auto; display : flex; flex-direction : column;} #pw_confirm form, #pw_confirm fieldset { width : 100%; max-width : 400px;} #pw_confirm .inputWrap p { padding : 0; font-size : 14px; color : #555; font-family : "SCDream"; text-align : left;} #pw_confirm .submitWrap { width : 100%; height : auto; max-width : 400px; display : flex; align-items : stretch; justify-content : space-between; font-family : "SCDream"; margin-top : 20px;} #pw_confirm .submitWrap .btn { font-size : 14px; width : 48%; height : auto; margin : 0; font-weight : 400; padding : 0; display : flex; align-items : center; justify-content : center; padding : 0.2em 0; font-family : "SCDream"; border-radius : 7px;} #pw_confirm .submitWrap .btn.back { background : #717071; color : #fff;} #pw_confirm .submitWrap .btn.btn_submit { background : #0460a7; } @media(max-width:640px) { #pw_confirm { width : 90%; margin-top : 40px;} #pw_confirm .logoWrap img { max-width : 120px;} #pw_confirm .logoWrap .line { width : 34px; height:5px; margin : 10px 0;} #pw_confirm .logoWrap p { font-size : 14px;} #pw_confirm form { margin-top : 20px;} #pw_confirm fieldset { padding : 0;} #pw_confirm .submitWrap { max-width : 200px; margin : 15px auto;} #pw_confirm .submitWrap .btn { font-size : 12px;} } /* 분양팩트 컨펌창 */ #mb_confirm { width : 100%; height : auto; max-width : 600px; display : flex; flex-direction : column; align-items : center; margin : 0 auto; margin-top : min(6vw,80px);} #mb_confirm .logoWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; } #mb_confirm .logoWrap img { width : 100%; height : auto; max-width : 200px;} #mb_confirm .logoWrap .line { width : 45px; height : 7px; margin : 20px 0; background: #253f8e; /* fallback for old browsers */ background: -webkit-linear-gradient(135deg, #253f8e, #0f869e); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(135deg, #253f8e, #0f869e);} #mb_confirm .logoWrap p { font-size : 16px; color : #555; font-family : "SCDream"; font-weight : 600; padding : 0; border-bottom : 0;} #mb_confirm .inputWrap { width : 100%; height : auto; display : flex; flex-direction : column;} #mb_confirm form, #mb_confirm fieldset { width : 100%; max-width : 400px;} #mb_confirm .inputWrap p { padding : 0; font-size : 14px; color : #555; font-family : "SCDream"; text-align : left; border-bottom : none;} #mb_confirm #mb_confirm_id { font-family : "SCDream";} #mb_confirm .submitWrap { width : 100%; height : auto; max-width : 400px; display : flex; align-items : stretch; justify-content : space-between; font-family : "SCDream"; margin-top : 20px;} #mb_confirm .submitWrap .btn { font-size : 14px; width : 48%; height : auto; margin : 0; font-weight : 400; padding : 0; display : flex; align-items : center; justify-content : center; padding : 0.2em 0; font-family : "SCDream"; border-radius : 7px;} #mb_confirm .submitWrap .btn.back { background : #717071; color : #fff;} #mb_confirm .submitWrap .btn.btn_submit { background : #0460a7; } @media(max-width:640px) { #mb_confirm { width : 90%; margin-top : 40px;} #mb_confirm .logoWrap img { max-width : 120px;} #mb_confirm .logoWrap .line { width : 34px; height:5px; margin : 10px 0;} #mb_confirm .logoWrap p { font-size : 14px;} #mb_confirm form { margin-top : 20px;} #mb_confirm fieldset { padding : 0;} #mb_confirm .submitWrap { max-width : 200px; margin : 15px auto;} #mb_confirm .submitWrap .btn { font-size : 12px;} } /* 분양팩트 회원가입 완료 */ /* A A A : A : A : A : */ .join_topWrap { width : 100%; height : auto; padding-top : min(32%,400px); position : relative; margin-top : 75px; background-image : url("../../../../Image/joinTopWrapBack.jpg"); background-position : center; background-size : cover; background-repeat : no-repeat;} .join_topWrap .textWrap { width : 100%; height : 100%; position : absolute; top : 0; left : 0; display : flex; flex-direction : column; align-items : center; justify-content : center; font-size : 25px;} .join_topWrap .textWrap img { width : clamp(7em,10.5vw,9em); height : auto; font-size : inherit; filter : drop-shadow(0px 0px 3px #fff);} .join_topWrap .textWrap .line { width : 2.5em; height : 5px; background : #fff; opacity : .8; margin : 1em 0 0.5em;} .join_topWrap .textWrap p { color : #fff; font-size : inherit; font-weight : 600;} /* 상단 progress */ #reg_result .progress_Wrap { width : 100%; height : auto; display : flex; position : relative; padding : 10px 0px; border-top : 3px solid #e5e5e5; } #reg_result .progress_Wrap.progressbar_1:after { content : ''; position : absolute; width : 0%; height : 3px; background-color : #4374D9; transition : 1s; left : 0; top : -3px; animation : member_progress1; animation-delay: 0s; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: 1; } #reg_result .progress_Wrap.progressbar_2:after { content : ''; position : absolute; height : 3px; width : calc((100% / 3) * 1); background-color : #4374D9; transition : 1s; left : 0; top : -3px; animation : member_progress2; animation-delay: 0s; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: 1; } #reg_result .progress_Wrap.progressbar_3:after { content : ''; position : absolute; height : 3px; width : calc((100% / 3) * 2); background-color : #4374D9; transition : 1s; left : 0; top : -3px; animation : member_progress3; animation-delay: 0s; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes member_progress1 { form { width : 0%; } to { width : calc((100% / 3) * 1); } } @keyframes member_progress2 { form { width : calc((100% / 3) * 1); } to { width : calc((100% / 3) * 2); } } @keyframes member_progress3 { form { width : calc((100% / 3) * 2); } to { width : calc((100% / 3) * 3); } } #reg_result .progress_Wrap.progressbar_sns1:after { content : ''; position : absolute; width : 0%; height : 3px; background-color : #4374D9; transition : 1s; left : 0; top : -3px; animation : member_progress_sns1; animation-delay: 0s; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: 1; } #reg_result .progress_Wrap.progressbar_sns2:after { content : ''; position : absolute; width : 50%; height : 3px; background-color : #4374D9; transition : 1s; left : 0; top : -3px; animation : member_progress_sns2; animation-delay: 0s; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes member_progress_sns1 { form { width : 0%; } to { width : calc((100% / 2) * 1); } } @keyframes member_progress_sns2 { form { width : 50%; } to { width : calc((100% / 2) * 2); } } #reg_result .progress_Wrap .progress_bg { width : calc( 100% / 3); text-align : center; } #reg_result .progress_Wrap .progress_snsbg { width : calc( 100% / 2); text-align : center; } #reg_result .progress_Wrap .progress_bg p ,#reg_result .progress_Wrap .progress_snsbg p { font-size : 16px; color : #e5e5e5; font-weight : 300; text-align:center; } #reg_result .progress_Wrap .progress_bg.bar_on p ,#reg_result .progress_Wrap .progress_snsbg.bar_on p { font-size : 16px; color : #e5e5e5; font-weight : 500; animation : member_progress_font; animation-delay: 0s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: 1; } #reg_result .progress_Wrap .progress_bg.bg1.bar_on p ,#reg_result .progress_Wrap .progress_snsbg.bg1.bar_on p { animation-duration: 1s; } #reg_result .progress_Wrap .progress_bg.bg2.bar_on p ,#reg_result .progress_Wrap .progress_snsbg.bg2.bar_on p { animation-duration: 2s; } #reg_result .progress_Wrap .progress_bg.bg3.bar_on p { animation-duration: 3s; } @keyframes member_progress_font { form { color : #e5e5e5; } to { color : #4374D9; } } /* A A A : A : A : A : */ #reg_result { width : 95%; margin : 0 auto; max-width : 1000px; margin-top : 65px; display : flex; align-items : center; flex-direction : column;} #reg_result .titWrap { font-size : 18px; margin-top : 3.5em; width : 95%; max-width : 640px; display : flex; flex-direction : column; border-bottom : 1px solid #ccc; align-items : center; padding-bottom : 1em; margin-bottom : 1em;} #reg_result .titWrap img { font-size : inherit; width : 3.5em; margin-bottom : 0.7em;} #reg_result .titWrap p { font-size : inherit; font-weight : 600; color : #000; text-align : center;} #reg_result .resultWrap { width : 95%; display : flex; flex-direction : column; align-items : center; font-size : 16px; padding : 3em 2em; max-width : 600px; background : #f7f7f7;} #reg_result .resultWrap p { width : 100%; font-size : inherit; word-break : keep-all;} #reg_result .resultWrap p.tit { font-size : 1.5em; font-weight : 600; color : #000; text-align : center;} #reg_result .resultWrap p.tit span { color : #0000ff;} #reg_result .resultWrap p.info { margin : 1em 0; text-align : center;} #reg_result .resultWrap .resultInfoWrap { width : auto%; display : flex; flex-direction : column; background : #6177af; padding : 2em;} #reg_result .resultWrap .resultInfoWrap .infoList { width : 100%; height : auto; display : flex; align-items : center; color : #fff;} #reg_result .resultWrap .resultInfoWrap .infoList .deco { font-size : inherit; width : 0.5em; height : 0.5em; background : #fff; margin-right : 0.5em;} #reg_result .resultWrap .resultInfoWrap .infoList .infoTit { width : 7em; color : #fff;} #reg_result .resultWrap .resultInfoWrap .infoList .infoValue { width : calc(100% - 8em); color : #fff;} #reg_result .resultWrap p.ps { text-align : center; margin-top : 1em; color : #6177af;} #reg_result .mainBtn { font-size : 14px; padding : 0.5em 2em; color : #fff; background : #0460a7; border-radius : 7px; margin : 2em 0 4em;} @media(max-width: 1024px){ /* A A A : A : A : A : */ .join_topWrap{ margin-top : 80px; padding-top : min(37%,300px);} .join_topWrap .textWrap { font-size : 20px;} .join_topWrap .textWrap img { width : clamp(5em,15vw,7em);} .join_topWrap .textWrap p { font-size : clamp(0.8em,2.5vw,1em);} } @media(max-width: 640px){ /* A A A : A : A : A : */ .join_topWrap{ margin-top : 65px; padding-top : min(46vw,200px); } .join_topWrap .textWrap { font-size : 14px;} .join_topWrap .textWrap img { width : 5.5em;} .join_topWrap .textWrap .line { height : 3px;} .join_topWrap .textWrap p { font-size : 1em;} #reg_result { margin-top} #reg_result .progress_Wrap .progress_bg.bar_on p, #reg_result .progress_Wrap .progress_snsbg.bar_on p { font-size : 12px;} #reg_result .progress_Wrap .progress_bg p, #reg_result .progress_Wrap .progress_snsbg p { font-size : 12px;} #reg_result .titWrap { font-size : 14px; margin-top : 2em;} #reg_result .resultWrap { font-size : 12px; padding : 2em 1em;} #reg_result .resultWrap p.tit { font-size : 1.2em;} #reg_result .resultWrap .resultInfoWrap { width : 100%; padding : 1em 4em;} #reg_result .resultWrap .resultInfoWrap .infoList { flex-wrap : wrap;} #reg_result .resultWrap .resultInfoWrap .infoList .infoValue { width : 100%; padding-left : 1em;} #reg_result .mainBtn { font-size : 12px;} }