/* ******************************************************************************************************************************************************************** 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 : 180px; } .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; } } /* A A A : A : A : A : */ /* 본문 - 동의 */ .member_polish { width : 100%; height : auto; margin-top : clamp(20px, 1.5vw, 40px); } .member_polish form { width : 100%; height : auto; } .member_polish .member_polish_wrap { width : 100%; padding : 8px 0px; } .member_polish .member_polish_wrap .member_polish_chkall { width : 100%; } .member_polish .member_polish_wrap .member_polish_chkall input[type="checkbox"].chk_all { display : none; } .member_polish .member_polish_wrap .member_polish_chkall input[type="checkbox"].chk_all + label { display : inline-block; width : calc(100% - 40px); height : auto; position : relative; cursor : pointer; padding-left : 40px; font-size : clamp(16px,1.5vw,18px); font-weight : 400; color : #D5D5D5; transition : 0.6s; } .member_polish .member_polish_wrap .member_polish_chkall input[type="checkbox"].chk_all + label:before { content : '\1F5F8'; color : #D5D5D5; width : 30px; height : 30px; font-size : 20px; position : absolute; left : 0; top : 50%; border-radius : 100%; text-align : center; border : 1px solid #D5D5D5; transform : translate(0, -50%); transition : 0.6s; display : flex; justify-content : space-around; align-items : center; } .member_polish .member_polish_wrap .member_polish_chkall input[type="checkbox"].chk_all:checked + label:before { content : '\1F5F8'; color : #fff; background-color : #4374D9; border : 1px solid #4374D9; transition : 0.6s; } .member_polish .member_polish_wrap .member_polish_chkall input[type="checkbox"].chk_all:checked + label { font-weight : 400; color : #4374D9; transition : 0.6s; } .member_polish .member_polish_wrap .member_checkbox { width : 100%; } .member_polish .member_polish_wrap .member_checkbox input[type="checkbox"] { display : none; } .member_polish .member_polish_wrap .member_checkbox input[type="checkbox"] + label { display : inline-block; width : calc(100% - 30px); height : auto; position : relative; cursor : pointer; padding-left : 30px; font-size : clamp(16px,1.5vw,18px); font-weight : 400; color : #D5D5D5; transition : 0.6s; } .member_polish .member_polish_wrap .member_checkbox input[type="checkbox"] + label b.sound_only { font-size : clamp(12px,1.4vw,16px); font-weight : 400; line-height : 30px; } .member_polish .member_polish_wrap .member_checkbox input[type="checkbox"] + label:before { content : '\1F5F8'; color : #D5D5D5; width : 20px; height : 20px; font-size : 15px; position : absolute; left : 0; top : 50%; border-radius : 100%; text-align : center; border : 1px solid #D5D5D5; transform : translate(0, -50%); transition : 0.6s; display : flex; justify-content : space-around; align-items : center; } .member_polish .member_polish_wrap .member_checkbox input[type="checkbox"]:checked + label:before { content : '\1F5F8'; color : #fff; background-color : #4374D9; border : 1px solid #4374D9; transition : 0.6s; } .member_polish .member_polish_wrap .member_checkbox input[type="checkbox"]:checked + label { font-weight : 400; color : #4374D9; transition : 0.6s; } /* text area coding */ .member_polish .member_polish_wrap textarea { width : calc(100% - 20px); height : clamp(80px, 10vw, 150px); padding : 20px; font-weight : 300; position : relative; display : block; margin-left : 20px; line-height : 1.3em; background-color : #f7f7f7; border : 1px solid #dde7e9; /* scrollbar animate PS - 모든 컨트롤은 inset / shadow 처럼 자연스럽게 발생하는 색상을 토대로 보여준다. 색을 지정하면 안된다.*/ color : rgba(0,0,0,0); transition : color 0.6s ease-in-out; -webkit-text-fill-color: #000; } .member_polish .member_polish_wrap textarea:hover /* scrollbar의 inset의 그림자를 30% 투명하게 */ { color : rgba(0, 0, 0, 0.1); } .member_polish .member_polish_wrap textarea::-webkit-scrollbar /* srcollbar : 백그라운드 색상을 지정하면 animate가 되지 않으므로, box-shadow inset으로 내부 배경색상을 준다. */ { box-shadow : inset 0 0 0 10px; } .member_polish .member_polish_wrap textarea::-webkit-scrollbar-thumb /* srcollbar-thumb : 백그라운드 색상을 지정하면 animate가 되지 않으므로, box-shadow inset으로 내부 배경색상을 준다. */ { box-shadow : inset 0 0 0 10px; } .member_polish .member_polish_wrap textarea::-webkit-scrollbar ,.member_polish .member_polish_wrap textarea::-webkit-scrollbar-thumb { width : 17px; /*scroll의 width */ border-radius : 13px; border : 2px solid transparent; } /* border를 많이 주면 inset의 영역이 줄어들고, 적게줄수록 inset의 영역이 많아진다. 즉, 눈으로 보여지는 scroll width을 조정해주는 값. */ /* A A A : A : A : A : */ /* 개인정보 수집 */ .member_polish .member_polish_wrap .personal_police { width : calc(100% - 20px); height : auto; margin-left : 20px; background-color : #ececec; border : 1px solid #e5e5e5;} .member_polish .member_polish_wrap .personal_police .personal_police_top { width : 100%; height : auto; display : flex; justify-content : space-evenly; align-items : stretch; } .member_polish .member_polish_wrap .personal_police .personal_police_top .title { width : calc(100% / 3); text-align : center; background-color : rgba(255,255,255,0.4); padding : 5px 0px; } .member_polish .member_polish_wrap .personal_police .personal_police_top .title:nth-child(2) { border-left : 1px solid #e5e5e5; border-right : 1px solid #e5e5e5; } .member_polish .member_polish_wrap .personal_police .personal_police_top .title p { font-size : clamp(13px, 1.5vw, 15px); font-weight : 500; color : #333; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom { width : 100%; height : auto; display : flex; justify-content : space-evenly; align-items : center; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom .contents { width : calc(100% / 3); text-align : center; padding : 10px 2%; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom .contents:nth-child(2) { border-left : 1px solid #e5e5e5; border-right : 1px solid #e5e5e5; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom .contents p { font-size : clamp(11px, 1.0vw, 14px); font-weight : 400; color : #333; } /* submit button */ .member_polish .member_submit_wrap { width : 100%; height : auto; text-align : center; } .member_polish .member_submit_wrap .member_submit { width : 30%; max-width : 180px; padding : 13px; background-color : #d9d9d9; color : #fff; border-radius : 20px; border : 0; cursor : pointer; font-size : clamp(13px, 1.3vw, 15px); font-weight : 500; transition : 0.6s; margin : clamp(10px, 4%, 30px) 0 clamp(40px, 6vw, 100px); } .member_polish .member_submit_wrap .member_submit:hover { transition : 0.6s; background-color : #4374D9; } /* SNS 회원정보 입력 */ .member_infoWrap { width : 100%; height : auto; margin-top : clamp(20px, 5%, 50px); text-align : center; } .member_infoWrap .infoWrap { width : 100%; height : auto; max-width : 640px; text-align : left; } .member_infoWrap .infoWrap h2 { font-size : clamp(16px,2vw,22px); font-weight : 500; color : #333; } .member_infoWrap .infoWrap .member_info_inputWrap { width : 100%; height : auto; margin : clamp(15px, 3%, 30px) 0 clamp(15px, 4%, 40px) 0; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_title { width : 100%; height : auto; text-align : left; padding-left : 10px; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_title p { font-size : clamp(14px,1.5vw,18px); font-weight : 500; position : relative; color : #777; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_title p .member_required { font-size : clamp(12px, 1.2vw, 14px); font-weight : 400; color : #FF0000; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_content { width : 100%; height : auto; margin-top : 3px; padding-left : 10px; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_content.member_info_contentFlex { display : flex; align-items : center; justify-content : space-between; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_content .certification_button { background-color : #fff; border : 1px solid #d9d9d9; font-size : clamp(12px, 1vw, 16px); width : 30%; padding : 8px 0px; font-weight : 500; color : #777; border-radius : 15px; cursor : pointer; transition : 0.6s; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_content .certification_button:hover { background-color : #4374D9; transition : 0.6s; color : #fff; } .member_infoWrap .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, 1vw, 16px); font-weight : 500; color : #777; } .member_infoWrap .infoWrap .member_info_inputWrap .member_info_content .check { color : #ffffff; font-size : 14px; font-weight : 300; line-height : 1.5em; margin : 5px 0 0 10px; padding : 3px 10px; background-color : #980000; width : auto; display : inline-block; } .member_infoWrap .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; } /* SNS 기존회원 연결 */ .member_connect { width : 100%; height : auto; text-align : center; display : flex; justify-content : space-around; } .member_connect .connectWrap { width : 100%; height : auto; max-width : 640px; text-align : center; display : flex; justify-content : center; align-items : center; border-radius : 23px; border : 1px solid #277392; } .member_connect .connectWrap .account_connectWrap { width : calc( 100% / 2 ); text-align : center; } .member_connect .connectWrap .account_connectWrap.connectWrap_left { background-color : #277392; padding : 10px; border-radius : 20px 0 0 20px; } .member_connect .connectWrap .account_connectWrap.connectWrap_right { background-color : #fff; border-radius : 0 20px 20px 0; } .member_connect .connectWrap .connectWrap_left p.strong { width : calc( 100% - 20px); display : inline-block; border : 0; padding : 6px 10px; background-color : #277392; color : #fff; font-weight : 400; border-radius : 15px; font-size : clamp(14px,1.6vw,17px); } .member_connect .connectWrap .connectWrap_right button { background-color : #fff; border : 0; font-size : clamp(14px,1.6vw,17px); cursor : pointer; font-weight : 600; color : #999; transition : 0.6s; } .member_connect .connectWrap .connectWrap_right button:hover { color : #277392; transition : 0.6s; } /* SNS 기존회원 팝업 */ .remodal_pop { width : 95%; max-width : 640px; text-align : left; position : relative; } .remodal_pop .remodal_pop_close { position : absolute; right : 10px; top : 10px; border : 0; background : unset; } .remodal_pop .remodal_pop_close i { font-size : clamp(15px, 2vw, 23px); font-weight : 400; color : #c6c6c6; transition : 0.6s; } .remodal_pop .remodal_pop_close:hover i { color : #277392; transform : rotate(360deg); transition : 0.6s; } .remodal_pop .remodal_ct { width : 100%; height : auto; text-align : left; } .remodal_pop .remodal_ct form { width : 100%; height : auto; text-align : left; } .remodal_pop .remodal_ct .remodal_tt { width : 100%; height : auto; padding : 5px 0px; font-size : clamp(15px,1.4vw,18px); color : #333; font-weight : 400; } .remodal_pop .remodal_ct .remodal_desc { width : 100%; height : auto; padding : 5px 0px; font-size : clamp(13px,1.2vw,15px); color : #333; font-weight : 300; } .remodal_pop .remodal_ct .login_Wrap { width : 100%; height : auto; padding : 5px 0px; display : flex; justify-content : space-between; } .remodal_pop .remodal_ct .login_Wrap .flexWrap { width : 50%; height : auto; padding : 3%; display : flex; align-items : center; justify-content : space-between; } .remodal_pop .remodal_ct .login_Wrap .flexWrap label { width : 65px; font-size : 14px; color : #333; } .remodal_pop .remodal_ct .login_Wrap .flexWrap .member_input { width : calc(100% - 65px); height : auto; border : 1px solid #d9d9d9; color : #777; padding : 8px; font-size : clamp(12px, 1vw, 16px); font-weight : 500; } .remodal_pop .remodal_ct .member_submit { width : 30%; max-width : 140px; min-width : 120px; padding : 10px; background-color : #d9d9d9; color : #fff; border-radius : 20px; border : 0; cursor : pointer; font-size : clamp(11px, 1.1vw, 13px); font-weight : 500; transition : 0.6s; margin : clamp(7px, 2%, 10px) 0 0 0; } .remodal_pop .remodal_ct .member_submit:hover { transition : 0.6s; background-color : #4374D9; } /* ******************************************************************************************************************************************************************** member_polish Mobile CSS ******************************************************************************************************************************************************************** */ @media (max-width:1024px) { /* A A A : A : A : A : */ .JRmember { padding : 0 2.5%; margin-top : 130px;} } /* ******************************************************************************************************************************************************************** member_polish Mobile CSS ******************************************************************************************************************************************************************** */ @media (max-width:640px) { /* A A A : A : A : A : */ .JRmember { width : 95%; margin-left : 2.5%; margin-top : 100px; } .member_polish .member_submit_wrap .member_submit { width : 40%; border-radius : 10px; padding : 10px; margin-top : 0; background-color : #4374D9; } /* 개인정보 수집 */ .member_polish .member_polish_wrap .personal_police { width : calc(100% - 20px); height : auto; margin-left : 20px; background-color : #ececec; border : 1px solid #e5e5e5;} .member_polish .member_polish_wrap .personal_police .personal_police_top { width : 100%; height : auto; display : flex; justify-content : space-evenly; align-items : stretch; } .member_polish .member_polish_wrap .personal_police .personal_police_top .title { width : 100%; text-align : center; background-color : rgba(255,255,255,0.4); padding : 5px 0px; } .member_polish .member_polish_wrap .personal_police .personal_police_top .title:nth-child(2) { border-left : 1px solid #e5e5e5; border-right : 1px solid #e5e5e5; } .member_polish .member_polish_wrap .personal_police .personal_police_top .title p { font-size : clamp(13px, 1.5vw, 15px); font-weight : 500; color : #333; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom { width : 100%; height : auto; display : flex; justify-content : space-evenly; align-items : center; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom .contents { width : calc(100% / 3); text-align : center; padding : 10px 2%; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom .contents:nth-child(2) { border-left : 1px solid #e5e5e5; border-right : 1px solid #e5e5e5; } .member_polish .member_polish_wrap .personal_police .personal_police_bottom .contents p { font-size : clamp(11px, 1.0vw, 14px); font-weight : 400; color : #333; } /* SNS 기존회원 연결 */ .member_connect { width : 95%; margin-left : 2.5%; border : 0; } .member_connect .connectWrap { flex-direction : column; border-radius : 0; border : 0; } .member_connect .connectWrap .account_connectWrap { width : 100%; max-width : 350px; } .member_connect .connectWrap .account_connectWrap.connectWrap_left { background : unset; padding : 0px 0; border-radius : 0; } .member_connect .connectWrap .account_connectWrap.connectWrap_right { background-color : #999; padding : 13px 0; border-radius : 0; } .member_connect .connectWrap .connectWrap_left p.strong { background : unset; color : #333; border-radius : 0; } .member_connect .connectWrap .connectWrap_right button { background : unset; border : 0; color : #fff; } .member_connect .connectWrap .connectWrap_right button:hover { color : #fff000; transition : 0.6s; } .remodal_pop .remodal_ct .login_Wrap { flex-direction : column; } .remodal_pop .remodal_ct .login_Wrap .flexWrap { width : 100%; } }