/* ******************************************************************************************************************************************************************** member_polish PC CSS ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .JRmember input::placeholder ,.JRmember textarea::placeholder { color : #999999; font-weight : 300; font-size : 12px; } .JRmember input:focus ,.JRmember textarea:focus { outline : 1px solid #d9d9d9; } .JRmember { width : 100%; height : auto; text-align : center; margin-top : clamp(10px, 5%, 70px); } .JRmember h1 { display : none; } .JRmember .memberWrap { width : 100%; max-width : 640px; display : inline-block; text-align : left; position : relative; } /* 상단 progress */ .JRmember .memberWrap .progress_Wrap { width : 100%; height : auto; display : flex; position : relative; padding : 10px 0px; border-top : 3px solid #e5e5e5; } .JRmember .memberWrap .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; } .JRmember .memberWrap .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; } .JRmember .memberWrap .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); } } .JRmember .memberWrap .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; } .JRmember .memberWrap .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); } } .JRmember .memberWrap .progress_Wrap .progress_bg { width : calc( 100% / 3); text-align : center; } .JRmember .memberWrap .progress_Wrap .progress_snsbg { width : calc( 100% / 2); text-align : center; } .JRmember .memberWrap .progress_Wrap .progress_bg p ,.JRmember .memberWrap .progress_Wrap .progress_snsbg p { font-size : 14px; color : #e5e5e5; font-weight : 300; } .JRmember .memberWrap .progress_Wrap .progress_bg.bar_on p ,.JRmember .memberWrap .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; } .JRmember .memberWrap .progress_Wrap .progress_bg.bg1.bar_on p ,.JRmember .memberWrap .progress_Wrap .progress_snsbg.bg1.bar_on p { animation-duration: 1s; } .JRmember .memberWrap .progress_Wrap .progress_bg.bg2.bar_on p ,.JRmember .memberWrap .progress_Wrap .progress_snsbg.bg2.bar_on p { animation-duration: 2s; } .JRmember .memberWrap .progress_Wrap .progress_bg.bg3.bar_on p { animation-duration: 3s; } @keyframes member_progress_font { form { color : #e5e5e5; } to { color : #4374D9; } } /* 정보 입력 */ .member_form { width : 100%; height : auto; margin-top : clamp(20px, 5%, 50px); text-align : center; } .member_form .infoWrap { width : 100%; height : auto; max-width : 640px; text-align : left; } .member_form .infoWrap h2 { font-size : clamp(16px,2vw,22px); font-weight : 500; color : #333; } .member_form .infoWrap h2.infoText { font-size : clamp(14px,1.7vw,18px); font-weight : 400; color : #333; } .member_form .infoWrap .subinfoText { font-size : clamp(13px,1.6vw,16px); font-weight : 300; color : #333; } .member_form .infoWrap .member_info_inputWrap { width : 100%; height : auto; margin : clamp(15px, 3%, 30px) 0 clamp(15px, 4%, 40px) 0; } .member_form .infoWrap .member_info_inputWrap .member_info_title { width : 100%; height : auto; text-align : left; padding-left : 10px; } .member_form .infoWrap .member_info_inputWrap .member_info_title p { font-size : clamp(14px,1.5vw,18px); font-weight : 500; position : relative; color : #777; } .member_form .infoWrap .member_info_inputWrap .member_info_title.member_select_title { text-align : center; } .member_form .infoWrap .member_info_inputWrap .member_info_title p { font-size : clamp(14px,1.5vw,18px); font-weight : 500; position : relative; color : #777; } .member_form .infoWrap .member_info_inputWrap .member_info_title p .member_required { font-size : clamp(12px, 1.2vw, 14px); font-weight : 400; color : #FF0000; } .member_form .infoWrap .member_info_inputWrap .member_info_content { width : 100%; height : auto; margin-top : 3px; padding-left : 10px; } .member_form .infoWrap .member_info_inputWrap .member_info_content.member_select_agree { background-color : #ececec; text-align : center; padding : 20px 10px; } .member_form .infoWrap .member_info_inputWrap .member_info_content.member_info_contentFlex { display : flex; align-items : center; justify-content : space-between; } .member_form .infoWrap .member_info_inputWrap .member_info_content .certification_button { background-color : #fff; border : 1px solid #d9d9d9; font-size : clamp(12px, 1.3vw, 16px); width : 30%; padding : 8px 0px; font-weight : 500; color : #777; border-radius : 15px; cursor : pointer; transition : 0.6s; } .member_form .infoWrap .member_info_inputWrap .member_info_content .certification_button:hover { background-color : #4374D9; transition : 0.6s; color : #fff; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_input { width : calc(100% - 16px); height : auto; border : 1px solid #d9d9d9; padding : 8px; font-size : clamp(12px, 1.3vw, 16px); font-weight : 500; color : #777; } .member_form .infoWrap .member_info_inputWrap .member_info_content .tooltip { color : #980000; font-size : 12px; font-weight : 300; line-height : 1.5em; margin-top : 5px; padding-left : 10px; } /* 주소 */ .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr { width : 100%; display : flex; margin : 4px 0px; flex-direction : row; justify-content : flex-start; align-items : center; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr label { color : #999; font-size : clamp(12px,1.2vw,14px); margin-right : 5px; width : 45px; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr .member_input_zip { border : 1px solid #d9d9d9; padding : 5px 8px; font-size : clamp(12px,1.2vw,14px); font-weight : 500; color : #777; width : 50%; max-width : 100px; margin-right : 5px; cursor : pointer; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr .member_info_addr_button { border : 1px solid #cecece; font-size : clamp(12px,1.2vw,14px); color : #333; padding : 4px 8px; cursor : pointer; transition : 0.6s; background-color : #e5e5e5; font-weight : 400; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr .member_info_addr_button:hover { background-color : #4374D9; color : #fff; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr .member_input_addr { width : calc(100% - 16px); height : auto; border : 1px solid #d9d9d9; padding : 5px 8px; font-size : clamp(12px,1.2vw,14px); font-weight : 500; color : #777; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_info_addr .member_input_addr.frm_address { cursor : pointer; } .member_form .infoWrap .member_info_inputWrap .member_info_title.flexWrap { display : flex; align-items : center; flex-direction : row; justify-content : flex-start; } .member_form .infoWrap .member_info_inputWrap .member_info_title .member_signature_title { width : 80px; } .member_form .infoWrap .member_info_inputWrap .member_info_title .member_signature { width : 200px; height : 85px; border : 1px solid #d9d9d9; padding : 8px; font-size : clamp(12px, 1.3vw, 16px); font-weight : 400; color : #777; text-align : center; } .member_form .infoWrap .member_info_inputWrap .member_info_title .typing_Wrap { width : 60px; height : auto; padding : 2px 8px; font-size : clamp(11px, 1.1vw, 12px); font-weight : 400; color : #777; text-align : left; } .member_form .infoWrap .member_info_inputWrap .member_info_title .member_profile { width : calc(100% - 140px); height : 85px; border : 1px solid #d9d9d9; padding : 8px; font-size : clamp(12px, 1.3vw, 16px); font-weight : 400; color : #777; text-align : center; } /* 회원 아이콘 */ .member_form .infoWrap .member_info_inputWrap .member_info_content .del_mb_icon { width : 16px; height : 16px; margin : 10px 0 0 10px; } .member_form .infoWrap .member_info_inputWrap .member_info_content .del_member_file { width : 16px; height : 16px; margin : 10px 0 0 10px; } .member_form .infoWrap .member_info_inputWrap .member_info_content .del_label { display : inline-block; margin : 7px 0 0 0; font-size : 15px; } .member_form .infoWrap .member_info_inputWrap .member_info_content img.member_icon_img { width : 22px; height : 22px; margin : 6px 5px 0 5px; } .member_form .infoWrap .member_info_inputWrap .member_info_content img.member_image { width : 66px; height : 66px; margin : 6px 5px 0 5px; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_select_degree { width : 100%; height : auto; text-align : center; display : flex; flex-direction : row; align-items : center; justify-content : center; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_select_degree .member_info_agree { width : 16px; height : 16px; margin-right : 6px; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_select_degree label { text-align : left; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_select_degree label span { font-size : clamp(12px, 1.3vw, 16px); color : #666; font-weight : 400; line-height : 1.2em; display : inline-block; } .member_form .infoWrap .msg_certify { width : 100%; height : auto; text-align : center; margin-bottom : clamp(15px, 4%, 40px) } .member_form .infoWrap .msg_certify .msg_certifyWrap { width : 70%; max-width : 280px; height : auto; padding : 8px; display : inline-block; background-color : #e5e5e5; color : #980000; font-size : clamp(13px, 1.2vw, 16px); font-weight : 500; text-align : center; } .member_form .infoWrap .msg_certify .msg_certifyWrap strong { font-size : clamp(13px, 1.4vw, 16px); font-weight : 500; color : #980000; } /* SNS 로그인 연결 관리 */ .snsWrap { width : 100%; height : auto; text-align : center; } .snsWrap .sns_login { width : 100%; height : auto; max-width : 640px; text-align : center; border : 1px solid #dde7e9; background-color : #ececec; display : inline-block; position : relative; padding : 20px 10px; } .snsWrap .sns_login h2 { font-size : clamp(14px,1.5vw,18px); font-weight : 500; position : relative; color : #777; } .snsWrap .sns_login .sns_outWrap { width : 100%; height : auto; padding-top : 10px; text-align : center; } .snsWrap .sns_login .sns_outWrap .sns-wrap { width : 100%; max-width : 400px; height : auto; text-align : left; display : inline-block;} .snsWrap .sns_login .sns_outWrap .sns-wrap a { width : calc((100% / 4) - 4px); padding : 5px 0; display : inline-block; text-align : center; transition : 0.6s; } .snsWrap .sns_login .sns_outWrap .sns-wrap a:hover { background-color : #ffffffe0; transition : 0.6s; } .snsWrap .sns_login .sns_outWrap .sns-wrap a p.ico { width : 100%; height : auto; min-height : 40px; position : relative; } .snsWrap .sns_login .sns_outWrap .sns-wrap a p.ico:before { content : ''; width : 30px; height : 30px; position : absolute; left : 50%; top : 50%; transform : translate(-50%, -50%); background-size : 100% auto; } .snsWrap .sns_login .sns_outWrap .sns-wrap a.sns-naver p.ico:before { background-image : url('../../../Image/icon/sns_login/sns_naver_s.png'); } .snsWrap .sns_login .sns_outWrap .sns-wrap a.sns-kakao p.ico:before { background-image : url('../../../Image/icon/sns_login/sns_kakao_s.png'); } .snsWrap .sns_login .sns_outWrap .sns-wrap a.sns-facebook p.ico:before { background-image : url('../../../Image/icon/sns_login/sns_facebook_s.png'); } .snsWrap .sns_login .sns_outWrap .sns-wrap a.sns-google p.ico:before { background-image : url('../../../Image/icon/sns_login/sns_google_s.png'); } .snsWrap .sns_login .sns_outWrap .sns-wrap a.sns-twitter p.ico:before { background-image : url('../../../Image/icon/sns_login/sns_twitter_s.png'); } .snsWrap .sns_login .sns_outWrap .sns-wrap a.sns-payco p.ico:before { background-image : url('../../../Image/icon/sns_login/sns_payco_s.png'); } .snsWrap .sns_login .sns_outWrap .sns-wrap a p.txt { font-size : clamp(12px, 1.3vw, 14px); font-weight : 400; color : 400; } /* captcha */ .captcha { width : 100%; height : auto; display : flex; margin-top : 10px; flex-direction : row; align-items : center; } .captcha #captcha_img { width : 145px; height : auto; margin-right : 1%; } .captcha .captcha_box { width : 25%; height : auto; margin-right : 1%; border : 1px solid #d9d9d9; padding : 8px; font-size : clamp(12px, 1.3vw, 16px); font-weight : 500; color : #777; } .captcha #captcha_mp3 ,.captcha #captcha_reload { width : calc((71% - 151px) / 2); max-width : 100px; padding : 4px; margin-right : 1%; border-radius : 10px; background-color : #e5e5e5; border : 1px solid #ddd; font-size : clamp(11px, 1.2vw, 13px); font-weight : 500; color : #333; transition : 0.6s; } .captcha #captcha_mp3:hover ,.captcha #captcha_reload:hover { background-color : #666; color : #fff; transition : 0.6s; color : #fff; } .captcha #captcha_info { display : none; } /* confirm */ .member_form .infoWrap .btn_confirm { width : 100%; height : auto; display : flex; margin : 20px 0 40px 0; justify-content : center; } .member_form .infoWrap .btn_confirm button.btn_submit ,.member_form .infoWrap .btn_confirm a.btn_close { padding : 7px 25px; border : 1px solid #d9d9d9; cursor : pointer; display : inline-block; margin-top : 10px; font-weight : 500; font-size : clamp(13px, 1.5vw, 16px); color : #777; border-radius : 10px; background-color : #fff; transition : 0.6s; margin : 0 5px; } .member_form .infoWrap .btn_confirm button.btn_submit:hover { background-color : #2375eb; transition : 0.6s; color : #fff; border : 1px solid #2375eb;} .member_form .infoWrap .btn_confirm a.btn_close:hover { background-color : #980000; transition : 0.6s; color : #fff; border : 1px solid #980000;} /* ******************************************************************************************************************************************************************** member_polish Mobile CSS ******************************************************************************************************************************************************************** */ @media (max-width:640px) { /* A A A : A : A : A : */ .JRmember { width : 95%; margin-left : 2.5%; } .member_polish .member_submit_wrap .member_submit { width : 40%; border-radius : 10px; padding : 10px; margin-top : 0; background-color : #4374D9; } } @media (max-width:500px) { /* captcha */ .captcha { display : block; text-align : center; } .captcha #captcha_img { width : 49%; max-width : 145px; } .captcha .captcha_box { width : 49%; height : auto; } .captcha #captcha_mp3 ,.captcha #captcha_reload { width : 40%; } .captcha #captcha_mp3:hover ,.captcha #captcha_reload:hover { background-color : #666; color : #fff; transition : 0.6s; color : #fff; } .captcha #captcha_info { display : none; } } @media (max-width:400px) { .member_form .infoWrap .member_info_inputWrap .member_info_title.flexWrap { flex-direction : column; align-items : flex-start; } .member_form .infoWrap .member_info_inputWrap .member_info_title .member_signature_title { width : 100%; text-align : left; } .member_form .infoWrap .member_info_inputWrap .member_info_title .member_signature { width : calc(100% - 16px); text-align : left; margin-top : 5px; } .member_form .infoWrap .member_info_inputWrap .member_info_title .typing_Wrap { width : 100%; text-align : right; } .member_form .infoWrap .member_info_inputWrap .member_info_title .member_profile { width : calc(100% - 16px); text-align : left; margin-top : 5px; } .member_form .infoWrap .member_info_inputWrap .member_info_content .member_select_degree label { width : calc(100% - 22px); text-align : left; } }