form { margin:0; } p { margin-top: 0px; margin-bottom: 0px } td,table {line-height: 160%;} select {font-size:inherit; color:var(--basic); border:1px solid var(--border); background-color:#ffffff; padding:0 22px; box-sizing:border-box; letter-spacing: -0.5pt;} .input {font-size:inherit; color:var(--basic); border:1px solid var(--border); background-color:#ffffff; padding:0 22px; box-sizing:border-box; letter-spacing: -0.5pt;} .search_input { font-size:inherit; color:var(--basic); border: var(--border) 1px solid; background-color: #ffffff; box-sizing:border-box; letter-spacing: -0.5pt;} .textarea {font-size:inherit; color:var(--basic); border:1px solid var(--border); box-sizing:border-box; letter-spacing: -0.5pt;} input::-webkit-input-placeholder {color:rgba(119,119,119,0.5); font-size:inherit; letter-spacing: -0.5pt;} input:-ms-input-placeholder {color:rgba(119,119,119,0.5); font-size:inherit; letter-spacing: -0.5pt;} input::placeholder {color:rgba(119,119,119,0.5); font-size:inherit; letter-spacing: -0.5pt;} /* 버튼 스타일 */ .btn_w {display:inline-block; background:#fff; text-align:center; color:#666; font-weight:500; border:1px solid var(--border); cursor:pointer; transition:all .3s linear; font-size:1rem;} .btn_w:hover{background-color:var(--grayBg);} .btn_wb {display:inline-block; background:#fff; text-align:center; color:var(--black); font-weight:500; border:1px solid var(--black); cursor:pointer; transition:all .3s linear; font-size:1rem;} .btn_wb:hover{background-color:var(--grayBg);} .btn_ag {display:inline-block; background:#bdbcbc; text-align:center; color:var(--white); border:1px solid #bdbcbc; cursor:pointer; transition:all .3s linear; font-size:1rem;} .btn_ag:hover{background-color:var(--basic); border-color:var(--basic);} .btn_b {display:inline-block; background:var(--black); text-align:center; color:#fff; font-weight:500; border:1px solid var(--black); cursor:pointer; transition:all .3s linear; font-size:1rem;} .btn_b:hover{background-color:#000; border-color:#000;} .btn_g {display:inline-block; background:#6b6b6b; text-align:center; color:#fff; font-weight:500; border:1px solid #6b6b6b; cursor:pointer; transition:all .3s linear; font-size:1rem;} .btn_g:hover{background-color:#555; border-color:#555;} .btn_i {display:inline-block; border:1px solid var(--main); background:var(--main); color:var(--white); cursor:pointer; transition:all .3s linear; font-size:1rem;} .btn_i:hover {background:var(--white); color:var(--main);} .btn_blue {display:inline-block; background:#34a2ef; text-align:center; color:#fff; font-weight:500; border:none; cursor:pointer;} .btn_blue:hover{background-color:#118cdf} .btn_red {display:inline-block; background:#6b6b6b; text-align:center; color:#fff; font-weight:500; border:none; cursor:pointer;} .btn_tab {position:relative;} .btn_small {width:100px; height:45px; border:1px solid var(--border); box-sizing:border-box; color:var(--basic); letter-spacing:-0.5pt; line-height:43px; display:block; text-align:center; font-size:1rem; position:absolute; top:50%; right:0; transform:translateY(-50%);} /* 인풋 */ input.input_login {border:1px solid var(--border); color:var(--basic); font-size:var(--fs18); padding:0 15px; height:75px; line-height:75px; box-sizing:border-box; border-radius:var(--R10);} input.input_idpw {border:1px solid var(--border); color:var(--basic); font-size:var(--fs18); padding:0 15px; height:75px; line-height:75px; box-sizing:border-box; border-radius:var(--R10);} input[type=checkbox] {width:20px; height:20px; margin:0; font-size:var(--fs18); color:#666; vertical-align:middle; margin-right:10px; margin-top:-4px;} input[type=radio] {width:20px; height:20px; margin:0; font-size:var(--fs18); color:#666; vertical-align:middle; margin:-4px 7px 0 10px;} input.input_s {width:150px;} input.input_m {width:69%;} input.input_l {width:100%;} input.input_file {border:1px solid var(--border); padding:0 15px; box-sizing:border-box; height: 50px; line-height: 48px; width:50%; background:none;} /* 여백 */ /* pad */ .bpad_5 {padding-bottom:5px;} .bpad_10 {padding-bottom:10px;} .bpad_15 {padding-bottom:15px;} .bpad_20 {padding-bottom:20px;} .bpad_30 {padding-bottom:30px;} .bpad_40 {padding-bottom:40px;} .bpad_50 {padding-bottom:50px;} .rpad_3 {padding-right:3px;} .rpad_5 {padding-right:5px;} .rpad_10 {padding-right:10px;} .rpad_15 {padding-right:15px;} .rpad_20 {padding-right:20px;} .rpad_30 {padding-right:30px;} .bmar_30 {margin-bottom:30px;} .bmar_50 {margin-bottom:50px;} /***** 로그인 ****/ #login_box {position:relative; } #login_box.login_box{margin:0 auto; width:430px;} #login_box dl {position:relative; display:block;} #login_box dt {width:100%; margin:10px 0 0;} #login_box .btn_b {display:block; width:100%; height:75px; line-height:73px; cursor:pointer; border:1px solid var(--main); background:var(--main); box-sizing:border-box; color:#fff; font-size:1.25rem; letter-spacing: -0.5pt; font-weight:400; text-align:center; padding:0; transition:all 0.4s; border-radius:var(--R10);} #login_box .btn_b:hover {background:var(--white); color:var(--main); transition:all 0.4s;} #login_box dd {width:100%; margin-bottom:5px; padding:0; display:block;} #login_box dd .input_login {width:100%;} #login_box .member_btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:30px 0 0;} #login_box .member_btn a {line-height:1; color:var(--basic); font-weight:400; letter-spacing:-.35pt; margin-right:40px; position:relative; } #login_box .member_btn a::after {content:''; width:1px; height:16px; background:#BBB; position:absolute; top:50%; margin-top:-8px; right:-20px;} #login_box .member_btn a:last-child {margin-right:0;} #login_box .member_btn a:last-child::after {display:none;} #login_box .sns_login{padding: 60px 0 0; margin: 60px 0 0; border-top: 1px solid var(--border); display: flex;} #login_box .sns_login .tit{width: 200px; font-size:1.111rem; color:var(--black); letter-spacing: -0.8px; line-height: 170%;} #login_box .sns_login .tit b{font-weight: 600;} #login_box .sns_login .cont{width: calc(100% - 200px); text-align:right; display: flex; align-items:center; justify-content: flex-end;} #login_box .sns_login .cont img{margin: 0 0 0 15px; width: 60px; height: 60px;} #login_box .sns_login .cont img:first-child{margin: 0;} #login_box .login_order {margin-top:50px; padding-top:40px; border-top:1px dashed #ccc;} #login_box .login_order h2{font-size:1.25rem; text-align:center; font-weight: 400; color:var(--basic); line-height:140%; padding: 0 0 10px; letter-spacing: -0.5pt;} #login_box .login_order .btn_wb {display:block; width:100%; height:57px; line-height:57px; font-size:16px;} #login_box .login_order p {background:url('/uljutalk/images/sub/member/icon_info.gif') left 4px no-repeat; padding-left:20px; color:#999; font-size:12px; letter-spacing:-0.5pt; margin-top:20px;} #login_box .login_orderlist {margin-top:50px; padding-top:40px; border-top:1px dashed #ccc;} #login_box .login_orderlist h2{font-size:1rem; text-align:center; font-weight: 400; color:var(--black); font-family:var(--kor); line-height:140%; padding: 0 0 15px; letter-spacing: -0.5pt;} #login_box .login_orderlist .btn_wb{display:block; padding: 0; width:100%; height:57px; line-height:57px; box-sizing:border-box; font-size:1rem;} /***** 아이디 / 비번찾기 *****/ #id_box p.mem_txt {padding-bottom:20px; color:#888;} #id_box h2 {color:var(--black); font-size:20px; padding-bottom:10px; font-weight:500;} #id_box > div {margin:0 auto; width:470px;} #id_box dl {position:relative;} #id_box dt {position:absolute; top:0; right:0; width:158px;} #id_box .btn_i {display:inline-block; width:158px; height:87px; line-height:87px;} #id_box .btn_p {display:inline-block; width:158px; height:136px; line-height:87px;} #id_box dd {width:295px; margin-bottom:11px;} #id_box dd .input_idpw {width:270px;} #id_box .idpw_check {padding-top:10px; letter-spacing:-0.3pt;} #id_box strong{ font-weight:600; color:var(--black); display:inline-block; padding-right:25px; } #id_box .id_search .btn_b {width:158px; height:87px; line-height:87px; font-size:16px; cursor:pointer;} #id_box .pw_search .btn_b {width:158px; height:136px; line-height:136px; font-size:16px; cursor:pointer;} /* 190405 추가 */ .id_search_new{position:relative; max-width:600px; margin:0 auto; border:1px solid var(--border); box-sizing:border-box; border-radius:var(--R20);} .id_search_new .id_tab{position:relative; overflow:hidden;} .id_search_new .id_tab li {float:left; width:50%; text-align:center;} .id_search_new .id_tab li a {display:block; font-size:var(--fs18); line-height:70px; letter-spacing: -0.5pt; border-bottom:1px solid var(--border); border-left:1px solid var(--border); background:#fafafa; color:rgba(34,34,34,0.4); font-weight:400;} .id_search_new .id_tab li a.tab_up {border-bottom:1px solid #fff; color:#222; background:#fff} .id_search_new .id_tab li:first-child a {border-left:0; border-radius:20px 0 0 0;} .id_search_new .id_tab li:last-child a {border-radius:0 20px 0 0;} .id_search_new_in{position:relative; padding:60px 48px; } .id_search_new .idpw_select{position:relative; display: flex; margin: 0 0 20px;} .id_search_new .idpw_select label{padding: 0 20px 0 0; font-size:var(--fs18);} .id_search_new .idpw_select input[type=radio]{margin: -2px 5px 0 0;} .id_search_new .login_input{position:relative; } .id_search_new .login_input dt {} .id_search_new .login_input dt .btn_i {display:block; width: 100%; height:70px; line-height:68px; cursor:pointer; border:1px solid var(--main); background:var(--main); border-radius:var(--R10); box-sizing:border-box; color:#fff; font-size:var(--fs18); letter-spacing: -0.5pt; font-weight:500; text-align:center; padding:0; transition:all 0.4s; margin:40px auto 0;} .id_search_new .login_input .btn_b {display:inline-block; width:158px; height:87px; line-height:87px; cursor:pointer;} .id_search_new .login_input dd {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 20px;} .id_search_new .login_input dd:last-of-type {margin:0;} .id_search_new .login_input dd.last{margin: 0;} .id_search_new .login_input dd.cert_number{width: 100%; margin: 0;} .id_search_new .login_input dd.cert_number .input_login{width: 100% !important;} .id_search_new .login_input dd h4 {width:100%; letter-spacing: -0.5pt; line-height:1; font-size:var(--fs18); color:var(--black); font-weight:500; margin:0 0 10px;} .id_search_new .login_input dd h4 span {color:var(--main);} .id_search_new .login_input dd .input_login {width:100%; height:60px; padding:0 18px;} .id_search_new .login_input dd .input_hp{width:81px;} .id_search_new .login_input dd .input_hp2{width:69px;} .id_search_new .login_input dd span{display:inline-block; text-align:center; width:20px;} .id_search_new .login_input input.btn_b {font-size:16px;} .id_search_new .login_input input[name="hphone[]"], .id_search_new .login_input select[name="hphone[]"] {width:calc((100% - 40px) / 3); height:60px; padding:0 18px; border-radius:var(--R10); font-size:var(--fs18);} .id_search_new .login_input span {display:block; width:20px; text-align:center; } .id_search_new .login_input .check_img{width:60%; max-width:300px; margin:20px auto 0;} .id_search_new .login_input .check_img img{width:100%;} .id_search_new .login_input2{position:relative; width:100%; margin:0 auto} .id_search_new .login_input2 dt {} .id_search_new .login_input2 .btn_b {display:inline-block; width:158px; height:87px; line-height:87px; cursor:pointer;} .id_search_new .login_input2 dd {position:relative; width:100%; margin-bottom:11px; } .id_search_new .login_input2 dd .input_login {width:100%; box-sizing:border-box} .id_search_new .login_input2 dd .input_login2 {width:355px; box-sizing:border-box} .id_search_new .login_input2 dd .input_hp{width:102px;} .id_search_new .login_input2 dd .input_hp2{width:112px;} .id_search_new .login_input2 dd span{display:inline-block; text-align:center; width:13px} .id_search_new .login_input2 dd .btn_w{position:absolute; right:0; top:0; line-height:34px; padding:0 15px;} .id_search_new .login_input2 input.btn_b {width:100%; font-size:16px; line-height:55px; height:55px; box-sizing:border-box} .id_search_new_result{position:relative; padding:60px 50px; box-sizing:border-box; text-align:center;} .id_search_new_result h4{font-size:20px; color:#222; letter-spacing:-0.5pt; font-weight:normal; line-height:100%} .id_search_new_result p.id_txt{font-size:20px; color:#222; font-weight:bold; color:#dc1616; line-height:100%; padding:15px 0 20px;} .id_search_new_result p.id_txt span.date{font-size:13px; font-weight:normal; color:#888; line-height:100%} .id_search_new_result dl.send_txt{text-align:left; width:400px; margin:0 auto 30px auto;} .id_search_new_result dl.send_txt dd{position:relative; line-height:38px; font-size:1rem; color:#222} .id_search_new_result dl.send_txt dd span.tit{display:inline-block; line-height:38px; width:80px; color:#888} .id_search_new_result dl.send_txt dd .btn_w{position:absolute; right:0; top:2px; line-height:34px; padding:0 15px;} .id_search_new_result .btn .btn_wb {width:201px; height:55px; line-height:52px; cursor:pointer;} .id_search_new_result .btn .btn_b {width:201px; height:55px; line-height:52px; cursor:pointer;} .id_search_new_result .btn_i{display:block; width: 100%; height:70px; line-height:68px; cursor:pointer; border:1px solid #222; background:#222; box-sizing:border-box; color:#fff; font-size:var(--fs18); letter-spacing: -0.5pt; font-weight:400; text-align:center; padding:0; transition:all 0.4s; margin:40px auto 0;} input.emailBtn, #join_input .join_table input.emailBtn {width:140px; height:60px; text-align:center; letter-spacing: -0.5pt; color:#fff !important; font-weight:600; font-size:1rem; background:var(--main); border:0; margin-left:4px; cursor:pointer; border-radius:var(--R10);} input.hphoneBtn{margin: 5px 0 0 !important; width: 100% !important;} input.emailBtn.black, #join_input .join_table input.emailBtn.black {background:var(--black); margin:5px 0 0 4px;} input[name="emailv"] {width:calc(100% - 144px) !important; } input[name="cert_number"] {width:calc(100% - 144px) !important; margin:5px 0 0;} /***** 회원구분 *****/ #joinType {position:relative; display:grid; grid-template-columns:repeat(2, 1fr); gap:0 30px;} #joinType figure {border:1px solid var(--border); border-radius:var(--R10); box-sizing:border-box; transition:all 0.5s ease-out;} #joinType figure a {display:block; text-align:center; padding:60px 20px; box-sizing:border-box;} #joinType figure:hover {border-color:var(--main); background:rgba(175,0,85,0.01);} #joinType figure p {text-align:center; margin-bottom:20px;} #joinType figure h4 {font-size:1.375rem; color:var(--black); letter-spacing:-0.5pt; font-weight:600;} /** 이전 회원구분 **/ .mem_division{border:1px solid var(--border); border-right:none; overflow:hidden; display: flex; flex-wrap:wrap;} .mem_division .mem_division_in{width:50%; box-sizing:border-box; border-right:1px solid var(--border); text-align:center; padding:100px 50px;} .mem_division_in h5{font-size:1.222rem; font-weight:600; color:var(--black); letter-spacing:-1pt;} .mem_division_in p{font-size:1rem; letter-spacing:-0.75pt; color:#858585;padding:5px 0 20px } .mem_division_in a{display:block; max-width:280px; width: 100%; height:60px; line-height:58px; color:#fff; font-weight: 600; font-size:1rem; letter-spacing:-0.7pt; margin:0 auto; background:#494949; text-align:center;} .mem_division_in a:before{content:''; display:inline-block; vertical-align: middle; width:22px; height: 22px; margin: -2px 5px 0 0;} .mem_division_in a.btnNormal:before{display: none;} .mem_division_in a.btnFace:before{background:#395f9f url('/uljutalk/images/sub/member/mem_btnFace.gif') no-repeat center/contain;} .mem_division_in a.btnKakao:before{background:#fddc00 url('/uljutalk/images/sub/member/mem_btnKakao.gif') no-repeat center/contain;} .mem_division_in a.btnNaver:before{background:#00c300 url('/uljutalk/images/sub/member/mem_btnNaver.gif') no-repeat center/80% auto;} .mem_division_in a.btnGoogle:before{background:#4285F4 url('/uljutalk/images/sub/member/mem_btnGoogle.gif') no-repeat center/80% auto;} .mem_division_in a.btnFace{background:#395f9f;} .mem_division_in a.btnKakao{color:#61522b; background:#fddc00;} .mem_division_in a.btnNaver{background:#00c300;} .mem_division_in a.btnGoogle{background:#4285F4;} .mem_division_in li{margin:0 0 2px; } .mem_division_in li:last-child{margin:0;} /***** 회원가입 동의 *****/ #joinAgree {box-sizing:border-box;} #joinAgree label span {color:var(--black);} #joinAgree form{box-sizing:border-box; padding:50px; border:1px solid var(--border); border-radius:var(--R10);} #joinAgree form > div {margin-bottom:25px;} #joinAgree form > div:last-of-type {margin-bottom:0;} #joinAgree .agreeCk input[type='checkbox'] {display:none;} #joinAgree .agreeCk input[type='checkbox'] + label {position:relative; padding-left:35px;} #joinAgree .agreeCk input[type='checkbox'] + label:before {position:absolute; content:""; left:0; top:3px; width:22px; height:22px; border-radius:3px; border:1px solid #aaa; z-index:5; transition:all 0.3s ease-out; box-sizing:border-box;} #joinAgree .agreeCk input[type='checkbox'] + label:after {position:absolute; left:0; top:3px; display:flex; justify-content:center; align-items:center; width:22px; height:22px; font-size:22px; font-family:var(--icon); color:var(--white); content:"\e5ca"; z-index:10; opacity:0; transition:all 0.3s ease-out;} #joinAgree .agreeCk input[type='checkbox']:checked + label:before {background:var(--main); border-color:var(--main);} #joinAgree .agreeCk input[type='checkbox']:checked + label:after {opacity:1;} #joinAgree .agreeAll {border-bottom:1px dashed var(--border); padding:0 0 16px; margin:0 0 30px;} #joinAgree .agreeAll label {margin:0;} #joinAgree .agreeAll span {font-weight:500; font-size:var(--fs18); letter-spacing: -0.5pt; color:var(--black);} #joinAgree textarea {padding:15px; letter-spacing:-0.3pt; height:220px; line-height:170%; width:100%; font-size:1rem; border-radius:var(--R10);} #joinAgree .agreePrivacy {} #joinAgree form > div label {font-size:var(--fs18); font-weight:400; letter-spacing: -0.5pt; color:var(--black); margin:0 0 18px; display:inline-block;} #joinAgree form > div label span {font-size:inherit; letter-spacing:inherit; color:var(--main);} #joinAgree .nameCheck {border:1px solid var(--border); padding:20px 0; margin-bottom:30px;} #joinAgree .nameCheck h2 {font-size:16px; font-weight:600; padding:0 0 13px 13px; border-bottom:1px dashed #ccc; margin-bottom:30px; color:var(--black); } #joinAgree .nameCheck dl {margin:20px auto; width:50%;} #joinAgree .nameCheck dt, #joinAgree .nameCheck dd {margin-bottom:5px;} #joinAgree .nameCheck span {display:inline-block; width:85px; font-weight:600; color:var(--black);} #joinAgree .nameCheck input[type=text] {padding:0 8px;} #joinAgree .check_img{width:60%; max-width:300px; margin:0 auto;} #joinAgree .check_img img{width:100%;} /***** 회원가입 input *****/ .mem_level {background:var(--grayBg); margin: 0 0 20px; border-radius:var(--R10);} .mem_level ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; } .mem_level li {background:url(/uljutalk/images/sub/member/mem_arrow.png) no-repeat right 18px center/6px auto; line-height:80px; font-size:var(--fs18); font-weight:400; letter-spacing: -0.5pt; color:rgba(34,34,34,0.6); padding-right:45px;} .mem_level li:last-child {background:none !important; padding-right:0;} .mem_level li span {font-size:inherit; font-family:var(--eng); font-weight:inherit; line-height:inherit; margin-right:3px;} .mem_level li.hover {color:var(--black); font-weight: 500;} .mem_level li.hover span {font-weight:700;} /* 하단 버튼 */ .join_btn_area {display: flex; margin: 20px 0 0; justify-content: center;} .join_btn_area input {margin:0 5px 0 0; width:250px; height: 70px; line-height:68px; border-radius:var(--R10); font-size:var(--fs18);} .join_btn_area input:last-child {margin: 0;} #join_input {border:1px solid var(--border); border-radius:var(--R10); padding:20px 40px 40px 40px; box-sizing:border-box;} #join_input .join_input_tit {padding-bottom:20px; overflow:hidden;} #join_input .join_input_tit h3 {font-size:1.25rem; color:var(--black); font-weight:700; letter-spacing:-0.75pt; line-height:120%;} #join_input .join_input_tit h3 .mem_txt3{font-size:1rem; float:right; color:var(--basic); letter-spacing:-0.35pt; font-weight:400;} #join_input .join_input_tit h3 .mem_txt3 .point{color:var(--main); font-weight: 700;} #join_input .join_table {width:100%; max-width:920px; margin:0 auto;} #join_input .join_table dl {border-bottom:1px solid var(--border); display:flex;} #join_input .join_table dt {position:relative; letter-spacing: -0.5pt; color:var(--black); font-weight:500; font-size:var(--fs18); padding:15px 0; display:flex; align-items:center; box-sizing:border-box; line-height:1.4; width:160px;} #join_input .join_table dt span {color:var(--main); font-weight: 700; margin: 0 0 0 5px;} #join_input .join_table dd {width: calc(100% - 160px); min-height:75px; box-sizing:border-box; padding:15px 0; display:flex; flex-wrap:wrap; align-items:center; font-size:var(--fs18);} #join_input .join_table dd p.sTxt{font-size:0.889rem; margin-top:10px;} #join_input .join_table dl.noLine {border-bottom:0;} #join_input .join_table .form_sub, #join_input .join_table .sub_txt {display:block; padding-top:6px; color:#999; width:100%; letter-spacing:-0.5pt; line-height:150%;} #join_input .join_table .form_sub strong {display:inline-block; font-weight:400; margin-right: 20px; color:var(--black); letter-spacing:inherit;} #join_input .join_table select {height:45px; border:1px solid var(--border); box-sizing:border-box; padding:0 15px; color:#777; cursor:pointer; outline:none; border-radius:5px;} #join_input .join_table input[type=text], #join_input .join_table input[type=date], #join_input .join_table input[type=tel], #join_input .join_table input[type=password] {height:45px; border:1px solid var(--border); box-sizing:border-box; padding:0 15px; color:#777; font-size:1rem; border-radius:5px;} #join_input .join_table input[type=button]{padding:0 20px; border:1px solid var(--main); color:#666; background:#fff; margin-left:5px; cursor:pointer; height: 45px; line-height: 45px; box-sizing:border-box; vertical-align: top; transition:all .3s linear; width: 120px; font-size:0.875rem; border-radius:5px;} #join_input .join_table input[type=button]:hover{color:var(--black); border-color:var(--black);} #join_input .join_table input[name='fname[1][]'] {width:69%;} #join_input .join_table .spamBox {width:100%; bordeR:1px solid var(--border); border-radius:var(--R10); height:45px; padding:0 10px; box-sizing:border-box; display:flex; align-items:center;} #join_input .join_table textarea {height:150px; width:100%; padding:22px; box-sizing:border-box;color:#777; font-size:var(--fs18) ;border-radius:var(--R5);} #join_input .join_table .norobot_img {display:inline-block; box-sizing:border-box; border-radius:5px; overflow:hidden;} #join_input .join_table .hipen {display:block; width:20px; text-align:center; font-size:1rem;} #join_input .join_table .form_q {display: flex;} #join_input .join_table .radio_birthday{padding: 6px 0 0;} #join_input .join_table .radio_cont{} #join_input .join_table .radio_cont label {font-size:1rem; letter-spacing:-0.35pt; margin:0 10px 0 0; cursor:pointer;} #join_input .join_table .radio_cont input[type="radio"]{display: inline-block; vertical-align: middle; margin:-2px 5px 0 0; cursor:pointer;} #join_input .join_table .form_chk {display:flex; align-items:center; margin-left:15px;} #join_input .join_table .form_chk input[type='checkbox'] {display:none;} #join_input .join_table .form_chk input[type='checkbox'] + label {position:relative; padding-left:30px; letter-spacing:-.5pt;} #join_input .join_table .form_chk input[type='checkbox'] + label:before {position:absolute; content:""; left:0; top:3px; width:22px; height:22px; border-radius:3px; border:1px solid #aaa; z-index:5; transition:all 0.3s ease-out; box-sizing:border-box;} #join_input .join_table .form_chk input[type='checkbox'] + label:after {position:absolute; left:0; top:3px; display:flex; justify-content:center; align-items:center; width:22px; height:22px; font-size:22px; font-family:var(--icon); color:var(--white); content:"\e5ca"; z-index:10; opacity:0; transition:all 0.3s ease-out;} #join_input .join_table .form_chk input[type='checkbox']:checked + label:before {background:var(--main); border-color:var(--main);} #join_input .join_table .form_chk input[type='checkbox']:checked + label:after {opacity:1;} #join_input .select {width:50%;} #join_input .join_table .vcode{width:calc(50% - 80px); padding:0 10px; border:none !important; height:auto !important;} #join_input .join_table .input_nick {width:calc(50% - 125px);} #join_input .join_table .select_birt {margin: 0 0 0 5px; width: calc((100% - 10px)/3);} #join_input .join_table .select_birt:first-child{margin: 0;} #join_input .join_table .select_num, #join_input .join_table .input_num{width:150px;} #join_input .join_table .select_email{margin-left: 5px;} #join_input .join_table .select_email, #join_input .join_table .input_email{width:150px;} #join_input .join_table .input_address{width: 100%; margin: 5px 0 0;} #join_input .join_btn_area {margin:40px 0;} #pop_search {font-size:1rem; color:var(--basic);} #pop_search h2 {position:relative; width:100%; background:var(--black); font-size:1.25rem; font-weight:500; letter-spacing: -0.5pt; line-height:120%; padding:20px 25px; box-sizing:border-box; color:#fff; } #pop_search h2 a.pop_close{font-size:0; position: absolute; right: 25px; top:50%; transform:translateY(-50%);} #pop_search h2 a.pop_close:after{content:'\e5cd'; display: inline-block; color:#fff; font-size:24px; line-height: 120%; font-family: "Material Symbols Outlined";} #pop_search p {text-align:center; padding:30px 20px 15px; box-sizing:border-box; font-size:13px;} #pop_search p u {color:var(--black); font-weight:600;} #pop_search .id_search {width:90%; margin:0 auto; background:#f6f6f6; padding:20px 0;} #pop_search .id_search fieldset {width:90%; margin:0 auto; padding:0; border:0; display: flex;} #pop_search .id_search input[type=text] {border:1px solid var(--border); color:#666; font-size:1rem; height:40px; line-height:38px; vertical-align:middle; width:calc(100% - 90px); padding:0 10px; box-sizing:border-box;} #pop_search .id_search .btn_blue {width:90px; height:40px; cursor:pointer; font-size:13px;} #pop_search .id_search .btn_red {width:90px; height:40px; cursor:pointer; font-size:13px;} #pop_search .id_result {text-align:center; padding:20px; box-sizing:border-box;} #pop_search .id_result span {display:block; padding-bottom:10px;} #pop_search .id_result a:link, #pop_search .id_result a:visited {width:150px; color:var(--black); height:33px; line-height:33px;} #pop_search .t_style .btn_blue {width:91px; height:36px; cursor:pointer; font-size:13px;} #pop_search .t_style .btn_red {width:50px; height:36px; cursor:pointer; font-size:13px;} /***** 회원가입 완료 *****/ #joinOk {text-align:center; border:1px solid var(--border); padding:90px 50px; box-sizing:border-box; border-radius:var(--R10);} #joinOk .joinOk_in {text-align:Center;} #joinOk h2 {font-size:2.5rem; margin-bottom:5px; color:var(--black); word-break:keep-all; line-height:140%; letter-spacing: -1.2pt;} #joinOk h2 span {color:var(--main); letter-spacing:inherit;} #joinOk p {color:rgba(34,34,34,0.6); font-size:var(--fs18); letter-spacing:-0.5pt; word-break:keep-all; line-height:180%;} #joinOk p span {color:var(--main); font-weight:600; letter-spacing:inherit;} #joinOk .join_btn_area {margin:35px 0 0 0;} /****** 회원탈퇴 ******/ #joinOut {padding: 50px; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--R20);} #joinOut .join_table {width:100%; max-width:920px; margin:0 auto;} #joinOut .join_table dl {border-bottom:1px solid var(--border); display:flex;} #joinOut .join_table dt {position:relative; letter-spacing: -0.5pt; color:var(--black); font-weight:500; font-size:var(--fs18); padding:15px 0; display:flex; align-items:center; box-sizing:border-box; line-height:1.4; width:160px;} #joinOut .join_table dt span {color:var(--main); font-weight: 700; margin: 0 0 0 5px;} #joinOut .join_table dd {width: calc(100% - 160px); min-height:75px; box-sizing:border-box; padding:15px 0; display:flex; flex-wrap:wrap; align-items:center; font-size:var(--fs18);} #joinOut .join_table dl.noLine {border-bottom:0;} #joinOut .join_table input[type=text] {height:55px; width:100%; border:1px solid var(--border); box-sizing:border-box; padding:0 22px; color:#777; font-size:1rem; border-radius:var(--R5);} #joinOut .join_table textarea {height:150px; width:100%; padding:22px; box-sizing:border-box;color:#777; font-size:var(--fs18) ;border-radius:var(--R5);} /****** 휴면계정 관련 ******/ #dormant_pop {padding:50px 40px; box-sizing:border-box;} #dormant_pop h1 {color:var(--black); font-size:25px; letter-spacing:-0.5pt; margin-bottom:20px; font-weight:400;} #dormant_pop h1 strong {font-weight:700; letter-spacing:-0.5pt;} #dormant_pop .dormant_info {padding:20px; box-sizing:border-box; background:#f6f6f6;} #dormant_pop .dormant_info ul {overflow:hidden;} #dormant_pop .dormant_info li {position:relative; float:left; width:50%; padding:2px 0;} #dormant_pop .dormant_info li span {display:inline-block; width:85px; color:#999;} #dormant_pop .dormant_info li p {display:inline-block; width:100%; max-width:calc(100% - 85px); font-weight:600; color:#444;} #dormant_pop .dormant_info li p.change {color:#ce085c; font-weight:600;} #dormant_pop .message {margin:30px 0; padding-bottom:30px; border-bottom:1px solid var(--border); background:url('/uljutalk/images/sub/member/icon_bg.png') right top no-repeat;} #dormant_pop .message strong {color:var(--black); font-weight:600;} #dormant_pop .vetificate {margin:30px 0; padding-bottom:30px; border-bottom:1px solid var(--border);} #dormant_pop .vetificate p {font-size:16px; line-height:18px; letter-spacing:-0.5pt; margin-bottom:15px; color:var(--black); font-weight:600;} #dormant_pop .vetificate ul {overflow:hidden;} #dormant_pop .vetificate li {float:left; width:49.5%; border:1px solid var(--border); margin-right:1%; padding:130px 0 30px 0; box-sizing:border-box; text-align:center;} #dormant_pop .vetificate li:last-child {margin-right:0;} #dormant_pop .vetificate li:first-child {background:url('/uljutalk/images/sub/member/icon_mail.png') center 30px no-repeat;} #dormant_pop .vetificate li input[type=radio] {width:17px; height:17px; vertical-align:middle;} #dormant_pop .vetificate li label {color:#444; font-weight:600;} #dormant_pop .vetificate li label span {font-weight:normal;} #dormant_pop .btn {margin-top:30px; text-align:center;} #dormant_pop .btn a {width:201px; height:55px; line-height:52px; cursor:pointer; text-decoration:none;} #dormant_pop .btn a.btn_b {color:#fff; } #dormant_pop .vetificate2 {margin:30px 0; padding-bottom:30px; border-bottom:1px solid var(--border);} #dormant_pop .vetificate2 p {font-size:16px; line-height:18px; letter-spacing:-0.5pt; margin-bottom:15px; color:var(--black); font-weight:600;} #dormant_pop .vetificate2 ul {overflow:hidden;} #dormant_pop .vetificate2 li {float:left; width:49.5%; border:1px solid var(--border); margin-right:1%; padding:130px 0 30px 0; box-sizing:border-box; text-align:center;} #dormant_pop .vetificate2 li:last-child {margin-right:0;} #dormant_pop .vetificate2 li:first-child {background:url('/uljutalk/images/sub/member/icon_mail.png') center 30px no-repeat;} #dormant_pop .vetificate2 li:last-child {background:url('/uljutalk/images/sub/member/icon_phone.png') center 30px no-repeat;} #dormant_pop .vetificate2 li input[type=radio] {width:17px; height:17px; vertical-align:middle;} #dormant_pop .vetificate2 li label {color:#444; font-weight:600;} #dormant_pop .vetificate2 li label span {font-weight:normal;} /******************************************************************************* @media 1350px *******************************************************************************/ @media all and (max-width:1350px){ } /******************************************************************************* @media ~1280px *******************************************************************************/ @media all and (max-width:1280px){ } /******************************************************************************* @media ~980px *******************************************************************************/ @media all and (max-width:980px){ /* 인풋 */ input.input_login {height:62px; line-height:62px;} input.input_idpw {height:62px; line-height:62px;} input.input_s {width:120px;} input.input_m {width:100%;} input.input_l {width:100%;} input.input_file {width:100%;} /***** 로그인 ****/ #login_box .btn_b {height:62px; line-height:60px;} /***** 아이디 찾기 / 아이디 찾기 ****/ .id_search_new .id_tab li a {line-height:60px;} .id_search_new .login_input dt .btn_i {height:50px; line-height:48px; margin: 30px auto 0;} .id_search_new_result .btn_i {height: 50px; line-height: 48px; margin: 30px auto 0;} .id_search_new .login_input dd .input_login {height:50px;} .id_search_new .login_input input[name="hphone[]"], .id_search_new .login_input select[name="hphone[]"] {height:50px;} input.emailBtn, #join_input .join_table input.emailBtn {height:50px;} /***** 회원구분 *****/ #joinType {gap:0 20px;} #joinType figure a {padding:50px 20px;} #joinType figure h4 {font-size:1.25rem;} /***** 회원가입 ****/ .mem_level li {line-height:60px;} /* 하단 버튼 */ .join_btn_area{margin: 40px 0 0;} .join_btn_area input{width:200px; height: 60px; line-height:58px;} #join_input .select{width:100%;} #join_input .join_table .vcode{width:calc(100% - 80px);} #join_input .join_table .input_nick {width:calc(100% - 125px);} #join_input .join_table .select_birt{width: calc((100% - 10px)/3);} #join_input .join_table .select_num, #join_input .join_table .input_num {width:calc((100% - 40px)/3);} #join_input .join_table .select_email, #join_input .join_table .input_email {width:calc((100% - 25px)/3);} #join_input .join_table input[name='fname[1][]'] {width:100%;} #join_input .join_table input[type=button].input_id{margin-left:0 !important; margin-top:5px !important; width:100% !important;} #join_input .join_table .form_chk {margin-left:0; margin-top:5px;} #join_input .join_btn_area {margin:20px 0 0;} #joinOut .join_btn_area {margin:15px 0 0;} } /******************************************************************************* @media 481~680px *******************************************************************************/ @media all and (max-width:680px){ /* 인풋 */ input[type=checkbox]{width:16px; height:16px; margin-right:6px; margin-top:-2px;} input[type=radio] {width:16px; height:16px; margin:-2px 5px 0 10px;} input::placeholder{font-size:13px !important;} input.input_login {padding:0 10px; height:40px; line-height:38px;} input.input_idpw {padding:0 10px; height:40px; line-height:38px;} input.input_file {padding:0 10px; height: 40px; line-height: 38px;} /* 여백 */ .bmar_30 {margin-bottom:20px;} .bmar_50 {margin-bottom:40px;} /***** 로그인 ****/ #login_box.login_box {width:100%;} #login_box input.input_login {height:50px; padding: 0 15px;} #login_box dt {margin:10px 0 0;} #login_box .btn_b{height:50px; line-height:48px;} #login_box .member_btn {margin:20px 0 0;} #login_box .member_btn a {margin-right:30px;} #login_box .member_btn a::after {height:10px; margin-top:-5px; right:-17px;} #login_box .sns_login{padding: 20px 0 0; margin: 20px 0 0; flex-wrap:wrap;} #login_box .sns_login .tit{width: 100%; text-align:center; padding: 0 0 5px;} #login_box .sns_login .tit br{display:none;} #login_box .sns_login .cont{width: 100%; justify-content: center;} #login_box .sns_login .cont img{margin: 0 0 0 5px; width: 40px; height: 40px;} /***** 아이디 찾기 / 아이디 찾기 ****/ .id_search_new .idpw_select{margin: 0 0 10px;} .id_search_new .id_tab li a {line-height:50px;} .id_search_new_in{padding:30px 25px;} .id_search_new .login_input dt .btn_i {height:40px; line-height:38px; margin: 20px auto 0;} .id_search_new .login_input dd .input_login {height:40px; padding:0 10px;} .id_search_new .login_input dd {margin:0 0 15px;} .id_search_new .login_input dd h4 {margin: 0 0 10px;} .id_search_new .login_input input[name="hphone[]"], .id_search_new .login_input select[name="hphone[]"]{height:40px; padding:0 10px;} input.emailBtn, #join_input .join_table input.emailBtn{width:110px; height:40px; font-size:12px; font-weight:500;} input[name="emailv"]{width:calc(100% - 114px) !important;} input[name="cert_number"]{width:calc(100% - 114px) !important;} .id_search_new_result{padding:30px 20px;} .id_search_new_result h4{font-size:16px;} .id_search_new_result p.id_txt{font-size:16px; padding:12px 0 15px;} .id_search_new_result .btn_i{height: 50px; line-height: 48px; margin: 20px auto 0;} .id_search_new_result dl.send_txt{width: 100%;} .id_search_new_result dl.send_txt dd{display: flex; align-items: center; flex-wrap:wrap;} .id_search_new_result dl.send_txt dd #setemail{width: calc(100% - 80px); display:block;} .id_search_new_result dl.send_txt dd .btn_w{position: relative; right: auto; top:auto; margin:10px 0 0; width: 100%;} .id_search_new_result .btn .btn_b{width: 49%;} .id_search_new_result .btn .btn_wb{width: 49%;} /***** 회원가입 ****/ .mem_level {margin: 0 0 10px;} .mem_level ul {} .mem_level li {background-position:right 10px center; background-size:4px auto; line-height:50px; padding-right:25px;} /***** 회원구분 *****/ #joinType {gap:0 10px;} #joinType figure a {padding:40px 20px;} #joinType figure p {margin-bottom:15px;} #joinType figure p img {max-width:80px;} #joinType figure h4 {font-size:1.125rem; letter-spacing:-.5pt;} /* 하단 버튼 */ .join_btn_area{margin: 30px 0 0;} .join_btn_area input{width:calc((100% - 5px)/2); height: 50px; line-height:48px;} #joinAgree .agreeCk input[type='checkbox'] + label {padding-left:25px;} #joinAgree .agreeCk input[type='checkbox'] + label:before {top:2px; width:18px; height:18px; } #joinAgree .agreeCk input[type='checkbox'] + label:after {width:18px; height:18px; font-size:18px;} #joinAgree > form{padding:30px 25px;} #joinAgree textarea{padding:10px; height:120px;} #join_input {padding:20px 25px 30px 25px; box-sizing:border-box;} #join_input .join_input_tit {padding-bottom:15px;} #join_input .join_input_tit h3 {font-size:1.12rem;} #join_input .join_input_tit h3 .mem_txt3{display:block; float:none; margin:5px 0 0;} #join_input .join_table input[type=text], #join_input .join_table input[type=date], #join_input .join_table input[type=tel] #join_input .join_table input[type=password]{height:40px; padding:0 10px;} #join_input .join_table input[type=button]{height:40px; line-height:38px; padding:0 10px; width: 100px;} #join_input .join_table select{height:40px; padding:0 10px;} #join_input .join_table dl{display: block; padding: 12px 0;} #join_input .join_table dt{margin:0 0 8px; padding: 0; width:100%;} #join_input .join_table dd{width: 100%; padding: 0; min-height:auto;} #join_input .join_table .input_nick {width:calc(100% - 105px);} #join_input .join_table .form_chk input[type='checkbox'] + label {padding-left:25px;} #join_input .join_table .form_chk input[type='checkbox'] + label:before {width:18px; height:18px;} #join_input .join_table .form_chk input[type='checkbox'] + label:after {width:18px; height:18px; font-size:18px;} #join_input .join_btn_area {margin:10px 0 0;} /** 회원구분 **/ .mem_division .mem_division_in{width:100%; padding:50px 30px;} .mem_division_in{border-bottom: 1px solid var(--border);} .mem_division_in:last-child{border-bottom: 0;} .mem_division_in p{padding:3px 0 15px } .mem_division_in a{max-width:100%; height:50px; line-height:48px;} .mem_division_in a:before{width:18px; height: 18px;} /***** 회원가입 완료 *****/ #joinOk .joinOk_in{padding:50px 25px;} #joinOk h2 {font-size:20px; padding:0 0 8px;} /****** 회원탈퇴 ******/ #joinOut {padding:20px 20px 30px 20px;} #joinOut .join_table dl{display: block; padding: 12px 0;} #joinOut .join_table dt{margin:0 0 8px; padding: 0; width:100%;} #joinOut .join_table dd{width: 100%; padding: 0; min-height:auto;} #joinOut .join_table input[type=text] {height:40px; padding:0 10px;} #joinOut .join_table textarea {height:100px; padding:10px;} } /******************************************************************************* @media ~480px *******************************************************************************/ @media all and (max-width:480px){ /***** 회원구분 *****/ #joinType figure a {padding:30px 20px;} #joinType figure p {margin-bottom:10px;} #joinType figure p img {max-width:60px;} #joinType figure h4 {font-size:var(--fs18); letter-spacing:-.35pt;} /***** 회원가입 ****/ .mem_level ul {padding: 12px 0;} .mem_level li {line-height: 120%; text-align:center;} .mem_level li span{display: block; line-height: 120%; margin:0 0 3px;} #join_input .join_table .select_email {width:100%; margin-top:5px; margin-left:0;} #join_input .join_table .input_email {width: calc((100% - 22px) / 2);} /***** 아이디 찾기 / 아이디 찾기 ****/ .id_search_new_in{padding:30px 20px;} } /******************************************************************************* @media ~360px *******************************************************************************/ @media all and (max-width:360px){ } #address-search { width:100%; height:420px; }