/* 회원가입, 로그인 버튼 ============================================================================== */ .member_btn01 {display:inline-block; font-family :'pretendard'; font-size:1.1em;font-weight:600; background:var(--color1); width:250px; line-height:65px; padding:0 10px;color:#fff; border-radius:5px; border:0; transition:all 0.3s ease;} .member_btn01:hover {background:#181e2e; color:#fff !important;} .member_btn01_02 {background:#000 !important;} .member_btn02 {display:inline-block;font-size:1.2em;background:var(--point1); width:300px; padding:15px;color:#fff; border-radius:5px; border:0; transition:all 0.3s ease;} .member_btn02:hover {background:var(--color1); color:#fff !important;} /* 회원가입 폼 작은 버튼 */ .mbtn01 {position:relative; display: inline-block; cursor: pointer; text-align:center; border-radius:5px; padding: 0 15px; min-width:90px; line-height:40px; border:1px solid #999; background:#fff;color:#222; font-size:0.9em; white-space:nowrap; vertical-align:middle; touch-action:manipulation; user-select:none; transition:all 0.3s ease;} .mbtn01:hover {border-color:var(--color1); background:var(--color1); color:#fff;} .mbtn02 {position:relative; display: inline-block; cursor: pointer; text-align:center; border-radius:5px; padding: 0 15px; min-width:90px; line-height:40px; border:1px solid var(--color1); background:var(--color1);color:#fff; font-size:0.9em; white-space:nowrap; vertical-align:middle; touch-action:manipulation; user-select:none; transition:all 0.3s ease;} @media screen and (max-width:768px) { .member_btn01 { width:100%; } } @media screen and (max-width:600px) { .member_btn01 { line-height:55px; font-size:1.05em; } .member_btn01, .member_btn02 { width:100%;padding:0 10px; } .mbtn01, .mbtn02 { padding: 0 10px; } } /* 회원가입 버튼-큰거 ============================================================================== */ /* 로그인 ==================================================================================== */ .login_gw_wrap {font-family :'pretendard'; height:100vh; padding:0 20px; background:#ebf1f9;display: flex; flex-direction: column; justify-content:center; align-items:center; } .login_gw_wrap .login_gw_box {position:relative; width:100%; max-width:1200px; margin:auto; } .login_gw_wrap .inner { display: grid; grid-template-columns:50% auto; width:100%; margin:auto; padding:70px 0; background:#fff; border-radius:1.5em; box-shadow: 3px 3px 25px 0 rgba(0,0,0,0.08); transition:all 0.3s ease;} .login_gw_wrap figure {position:relative; top:60px;padding-left:80px; z-index:1; height:1px; } .login_box_logo { position:relative;border-right:1px solid #eee; display: flex; flex-direction: column; justify-content:center; padding:0 80px; } .login_gw_wrap img {height:60px;} .login_box_logo span {position:relative;display:inline-block; font-size:5.6em; font-weight:800; color:#111; font-family:'Paperlogy'; letter-spacing:0; padding-top:130px; transition:all 0.3s ease;} .login_box_logo span::before {position:absolute; content:''; right:-25px;bottom:-20px; width:17px; height:17px; background:var(--color1); border-radius:50px; } .login_gw_wrap #login_box .field input { font-size:1.25em; line-height:38px;} .login_gw_wrap .member_btn01 { font-size:1.35em; } .login_box_gw {position:relative; text-align:center; padding:50px 80px ; background:#fff; font-family :'pretendard'; transition:all 0.3s ease;} .login_box_main {position:relative; max-width:550px; margin:auto; text-align:center; padding:50px ; border:1px solid #dfdfdf; border-radius:0.7em; background:#fff; font-family :'pretendard'; transition:all 0.3s ease;} @media screen and (max-width:1400px) { .login_gw_wrap figure { padding-left:5.5vw; top:50px; } .login_box_logo { padding:0 5.5vw; } .login_box_gw { padding:50px 6vw ; } } @media screen and (max-width:1024px) { .login_gw_wrap .inner { padding:60px 0; } .login_box_logo span { font-size:4.8em; } .login_box_gw { padding:40px 6vw ; } } @media screen and (max-width:768px) { .login_gw_wrap .inner { padding:60px 0 20px 0; grid-template-columns:repeat(1, 1fr); } .login_gw_wrap figure { left:50%;top:0;height:initial; transform: translateX(-50%); text-align:center; padding-left:0; padding-bottom:20px;} .login_box_logo {text-align:center;} .login_box_logo span { font-size:3.9em; padding-top:0; } .login_box_logo span::before { right:-22px;bottom:-11px; width:15px; height:15px; } } @media screen and (max-width:480px) { .login_gw_wrap figure { padding-bottom:20px; } .login_box_logo span { font-size:3.3em; } .login_box_logo span::before { right:-20px;bottom:-9px; width:13px; height:13px; } } #login_box {position:relative; max-width:550px; margin:auto; text-align:center; padding:50px ; border:1px solid #ddd; border-radius:0.7em;background:#fff; transition:all 0.3s ease;} #login_box .tit {font-size:2.2em; color:#111; font-family :'Paperlogy'; font-weight:700;padding:0 0 40px 0; transition:all 0.3s ease;} #login_box .top {padding:0 0 25px 0; color:#333; display: flex; flex-direction: column; gap:30px;} #login_box .top p { color:#222;font-size:1.8em;font-weight:700; } #login_box .field {position:relative; padding:0 0 10px 0; display: grid; gap:14px; } #login_box .field div {position:relative;} #login_box .field b { display:block;color:#222;font-size:1.1em; padding:0 0 5px 0; } #login_box .field .tits {text-align:left; padding:20px 0 10px 0; font-size:1em; font-weight:500;color:#222;} #login_box .field input { border:1px solid #e5e5e5; background:#f5f5f5; padding: 8px 15px; width:100%; } #login_box .field input:focus {border-color:var(--color1);background:#fff !important; } #login_box .field input::-webkit-input-placeholder {color: #bbb;} #login_box .field i {position:absolute; top:50%; width:35px;height:50px; line-height:50px; z-index:1;right:0; color:#aaa;font-size:0.7em; transform: translateY(-50%); } #login_box .btn_wrap {padding:20px 0 0 0; display:flex;gap:6px; } #login_box .bottom {position:relative;margin:10px 0 10px 0; font-size:0.9em; display: flex; flex-flow:wrap;justify-content: space-between; } #login_box .bottom li {position:relative; display:inline-block; } #login_box .bottom li a {position:relative; display:inline-block;color:#999; } #login_box .bottom li a:last-child {color:var(--color1);} #login_box .bottom .line {margin-right:24px;} #login_box .bottom .line:after {content:''; position:absolute; top:5px; right:-16px;width:1px; height:1.1em; background:#dfdfdf;} #login_box .secret {margin-bottom:15px;} #login_box .secret #secret_key {width:100%; border:0; border-bottom:1px solid #d4d4d4; background:transparent;padding: 8px 0px;} /* 소셜로그인 */ .login_snsbox {overflow:hidden; text-align:center; margin-top:20px;} .login_snsbox p {position:relative; margin-bottom:15px; font-weight:700;} .login_snsbox p:before {content:''; display:block; position:absolute; left:0; top:50%; width:140px; height:1px; background:#ddd;} .login_snsbox p:after {content:''; display:block; position:absolute; right:0; top:50%; width:140px; height:1px; background:#ddd;} .login_snsbox ul {overflow:hidden;} .login_snsbox ul li {display:inline-block; width:48px; height:48px; border-radius:50px; margin:0 1px;} .login_snsbox .sns_n {background:url('./img/sns_n.png') no-repeat center #1dc800;background-size:27px auto;} .login_snsbox .sns_k {background:url('./img/sns_k.png') no-repeat center #ffeb00;background-size:28px auto;} .login_snsbox .sns_f {background:url('./img/sns_f.png') no-repeat center #3b5999;background-size:30px auto;} .login_snsbox .sns_g {background:url('./img/sns_g.png') no-repeat center #cc3731;background-size:28px auto;} .login_wait {position:relative; width:100%; height:100%; text-align:center;} .login_wait dl {position:absolute; width:100%; left:50%; top:40%; transform:translate(-50%, -40%); padding:0 10px;} .login_wait dl dt {font-weight:500; font-size:1.8em; color:#333;} .login_wait dl dt i {display:block; font-size:80px; color:#cdcbcb; margin-bottom:30px; cursor:auto;} .login_wait dl dd {margin-top:20px; color:#777;} @media screen and (max-width:600px) { #login_box { padding:45px 40px; } #login_box .tit { padding:0 0 30px 0; } #login_box .top {font-size:0.95em; padding:0 0 20px 0; } #login_box .top p {padding:0 0 20px 0; font-size:1.8em; } #login_box .logo img {width:150px;} #login_box .field input {padding:6px 10px; } #login_box .bottom {margin-top:10px;} #login_box .btns {padding:10px 0 0 0; } .login_snsbox p {margin-bottom:10px;} .login_snsbox ul li {width:42px; height:42px;} .login_snsbox p:before, .login_snsbox p:after {width:30%;} .login_wait dl dt {font-size:1.4em;} .login_wait dl dd {margin-top:10px;} } @media screen and (max-width:480px) { #login_box { padding:40px 30px; } #login_box .tit {font-size:1.8em; } #login_box .field input {padding:5px 10px; } } /* 로그인 ==================================================================================== */ .member_wrap {position:relative; margin: auto; } /* 인증정보 ==================================================================================== */ .member_auth {position:relative; margin: auto;background:#fff; border:1px solid #dfdfdf;} .member_auth .tit { text-align:center; font-size:1.6em; color:#000;font-weight:700; padding:0 0 35px 0; transition:all 0.3s ease;} .member_auth .inner { max-width:900px; margin:auto;padding:55px 70px ;transition:all 0.3s ease;} .member_auth .input_info {padding:0 0 30px 0;transition:all 0.3s ease;} .member_auth .inner ul {} .member_auth .inner ul li {position:relative; padding:8px 0; display: grid; grid-template-columns: 140px auto 140px; transition:all 0.3s ease;} .member_auth .inner ul li .txt {line-height:52px; font-size:0.95em; color:#333; font-weight:500; text-indent:10px; transition:all 0.3s ease;} .member_auth .inner ul li input { border:1px solid #ccc; background:#f5f5f5; padding:0 10px ;line-height:50px; width:100%;font-size:0.95em; transition:all 0.3s ease;} .member_auth .inner ul li input::-webkit-input-placeholder {color: #bbb;} .member_auth .inner ul li input:focus {border:1px solid #888; } .member_auth .input_info .mbtn01, .member_auth .input_info .mbtn02 {line-height:50px; width:120px;transition:all 0.3s ease;} .member_auth .btn_box {text-align:center; margin:0 140px;transition:all 0.3s ease;} .member_auth .member_btn01 {width:100%;} .member_info { padding:40px;border-top:1px solid #ddd; background:#f5f5f5;transition:all 0.3s ease;} .member_info p {position:relative;padding:0 0 7px 13px;font-size:0.9em; } .member_info p:after {position:absolute; content:''; display:block; left:0; top:11px; width:3px; height:3px; background:#999; } @media screen and (max-width:768px) { .member_auth .inner { padding:45px 40px; } .member_auth .input_info {padding:0 0 20px 0;} .member_auth .inner ul li { padding:6px 0; grid-template-columns: 110px auto 120px; } .member_auth .inner ul li .txt {line-height:42px; text-indent:0; } .member_auth .inner ul li input { line-height:40px; } .member_auth .btn_box { margin:0 ;} .member_auth .input_info .mbtn01, .member_auth .input_info .mbtn02 {line-height:40px; width:110px;} .member_info { padding:30px;} } @media screen and (max-width:600px) { .member_auth .tit { font-size:1.45em; padding:0 0 25px 0; } .member_auth .inner { padding:40px 30px; } .member_auth .inner ul li .txt {grid-column: 1 / 4; grid-row: 1 / 2;} .member_auth .inner ul li:first-child .txt02 {grid-column: 1 / 4; grid-row: 2 / 3;} .member_auth .inner ul li .txt02 {grid-column: 1 / 3; grid-row: 2 / 3;} .member_info { padding:25px;} } /* 인증정보 ==================================================================================== */ /* 회원가입 STEP ==================================================================================== */ #register_stepbox01 { position:relative; display: block; text-align:center;border-radius:0.7em; border:1px solid transparent;padding:30px;margin-bottom:30px; transition:all 0.3s ease; } #register_stepbox01::after {position:absolute; content:''; top:0;left:0;width:100%;height:100%; border:1px solid var(--color1);border-radius:0.7em; opacity:0.18;} #register_stepbox01::before {position:absolute; content:''; top:0;left:0;width:100%;height:100%;background:var(--color1);border-radius:0.7em; opacity:0.035; } #register_stepbox01 ul {position:relative; display: flex; justify-content:center; transition:all 0.3s ease;} #register_stepbox01 li {position:relative; text-align:center; width:calc(100% / 4); color:#666; line-height:1.2em; padding-top:65px; transition:all 0.3s ease;} #register_stepbox01 li::after {position:absolute; content:''; top:0; left:calc(50% - 25px);width:50px; height:50px; border:2px solid rgb(0,0,0,0.11);border-radius:50px;background-color:#fff; background-image:url(./img/checkbox.png);background-repeat:no-repeat;background-position:center 50%;transition:all 0.3s ease;} /* 동그라미 */ #register_stepbox01 li.on::after { background-color:var(--color1);border-color:var(--color1);background-image:url(./img/checkbox_on.png); } #register_stepbox01 li:not(:last-of-type)::before {position:absolute;content:''; top:25px; left:50%; width:100%;height:1px;border-top:1px dashed rgb(0,0,0,0.2); opacity:0.8; } /* 점선 */ #register_stepbox01 li.on { } #register_stepbox01 li .cont {position:relative; color:var(--color1) ; } #register_stepbox01 li .step {display:block; font-size:0.8em; font-weight:600; padding:0 0 5px 0;transition:all 0.3s ease;} #register_stepbox01 li .tit { display:block; font-weight:600;font-size:0.95em; transition:all 0.3s ease;} @media screen and (max-width:768px) { #register_stepbox01 { padding:25px 10px; } #register_stepbox01 li { padding-top:60px; } #register_stepbox01 li::after { left:calc(50% - 20px);width:40px; height:40px; border-width:1px ; } /* 동그라미 */ #register_stepbox01 li:not(:last-of-type)::before { top:20px; } /* 점선 */ } @media screen and (max-width:600px) { #register_stepbox01 { padding:25px 0; } #register_stepbox01 ul { margin:0 ;} #register_stepbox01 li { padding-top:45px; } #register_stepbox01 li::after { left:calc(50% - 15px);width:30px; height:30px;background-size:cover; } /* 동그라미 */ #register_stepbox01 li:not(:last-of-type)::before { top:15px; } /* 점선 */ #register_stepbox01 li .step { font-size:0.7em;padding:0; } #register_stepbox01 li .tit { font-weight:600; font-size:0.85em; } } #register_stepbox02 { position:relative; display: block; text-align:center; border-bottom:1px dashed #d8d8d8;margin-bottom:60px; transition:all 0.3s ease;} #register_stepbox02 ul {position:relative; display: flex; justify-content:space-between; margin:0 10% ; transition:all 0.3s ease;} #register_stepbox02 li {position:relative; text-align:center; width:calc(100% / 4); color:#aaa; line-height:1.2em; padding-bottom:30px; transition:all 0.3s ease;} #register_stepbox02 li:before {position:absolute; content:''; bottom:-5px; left:calc(50% - 5px);width:9px; height:9px; background:#d5d5d5; border-radius:5px; } /* 동그라미 */ #register_stepbox02 li.on:before { background:var(--color2); } #register_stepbox02 li:after {position:absolute;content:''; top:21px; right:-25%; width:8px;height:8px;border:solid #bbb; border-width:2px 2px 0 0; opacity:0.8;transform: rotate(45deg); -webkit-transform: rotate(45deg);} /* 화살표 */ #register_stepbox02 li:last-child:after {display:none;} #register_stepbox02 li.on { } #register_stepbox02 li .cont {position:relative; color:var(--color1) ; } #register_stepbox02 li .step {display:block; font-size:0.8em; font-weight:500;padding:0 0 5px 0;transition:all 0.3s ease;} #register_stepbox02 li .tit { display:block; font-weight:600;font-size:0.95em; transition:all 0.3s ease;} @media screen and (max-width:768px) { #register_stepbox02 ul { margin:0 30px;} } @media screen and (max-width:600px) { #register_stepbox02 ul { margin:0 ;} #register_stepbox02 li:after {display:none;} #register_stepbox02 li .step { font-size:0.75em; } #register_stepbox02 li .tit { font-weight:500; font-size:0.9em; } } /* 회원가입 STEP ==================================================================================== */ /* 약관 ==================================================================================== */ .member_check_wrap { background:#f7f7f7;padding:30px; border-radius:0.7em; } .member_check_txt {padding:0 0 20px 0; line-height:1.4;} .member_check_txt p {position:relative;padding:0 0 10px 18px; } .member_check_txt p::after {position:absolute; content:''; display:block; left:6px; top:8px; width:3px; height:3px; background:#999; } .member_check_box {background:#fff; padding:10px ; border:1px solid #e7e7e7;} .member_check_all {position:relative;font-size:1em;line-height:1.3; font-weight:600; padding:15px 20px; margin-top:15px; background:#fff; color:#333; border:1px solid #e7e7e7; } .member_check {position:relative; overflow:hidden; } .member_check .tit { position:relative;overflow:hidden;font-size:1em;line-height:1.3; font-weight:600; padding: 10px ; color:#333; } .member_check label {float:left;} .member_check .tit span {font-size:0.85em;font-weight:normal; } .member_check_wrap input[type=checkbox] { border:1px solid #ddd ;width:25px;height:25px;border-radius:30px; background:#fff; margin-right:8px; } .member_agree_box {display:none;width:100%; min-height:50px; background:#fff; padding:20px;height:180px; border-top:1px dashed #d5d5d5; overflow-x:hidden; color:#777; font-size:0.95em;} .member_check_wrap .agree_view {position:relative;float:right;font-size:0.85em;font-weight:500; color:#aaa; padding:2px 0 0 0; cursor:pointer;} .member_check_wrap .agree_view::after {display:none; position:absolute; content:'';top:6px; right:0; border:solid #c5c5c5; border-width:2px 2px 0 0; padding:3px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .member_check_wrap .agree_view:hover {color:blue; text-decoration:underline; } .member_check_cate_box { position:relative; padding:30px 0 0 0; text-align:center; display: flex;justify-content:center; gap:0.5%; transition:all 0.3s ease;} .member_check_cate_box li {position:relative; width:33%; cursor:pointer; display:flex;align-items: center; justify-content: center; flex-direction: column; } .member_check_cate_box li .btn {display:inline-block;font-size:1.05em;background:#444; width:100%;line-height:65px; color:#fff; border-radius:5px; transition:all 0.3s ease;} .member_check_cate_box li .btn span {padding-right:35px; background:url('./img/arrow01.png') no-repeat right 50%; background-size:20px auto;} .member_check_cate_box li .btn:hover {background:var(--color1);} @media screen and (max-width:600px) { .member_check_wrap { padding:20px; } .member_check_wrap .agree_view { padding:3px 14px 0 0; } .member_check_wrap .agree_view::after { top:7px; } .member_check_cate_box {flex-flow:wrap; gap:5px; } .member_check_cate_box li { width:100%;} .member_check_cate_box li .btn { font-size:1em;line-height:54px; } .member_check_txt {padding:0 0 10px 0; font-size:0.95em;} .member_check_all { font-size:0.9em; padding:15px ; } .member_check .tit { font-size:0.9em;padding:5px; } } @media screen and (max-width:480px) { .member_check_wrap .agree_view { padding:4px 0 0 0; font-size:0.8; } .member_check_wrap .agree_view::after { display:none;} } /* 약관 ==================================================================================== */ /* 회원가입 ==================================================================================== */ .register_box {position:relative; } .register_box .tit1 {position:relative; padding:0 0 15px 5px; font-size:1.25em; color:#000; font-weight:700; transition:all 0.3s ease;} .register_box .tabs {display:table; table-layout: fixed; position:relative; text-align:center; width:100%; padding-bottom:40px;} .register_box .tabs li {display:table-cell; font-size:1.1em; padding-bottom: 20px; border-bottom: 2px solid #eaeaea; cursor:pointer;} .register_box .tabs .on {font-weight:500; color:var(--color1); border-bottom: 2px solid var(--color1);} .register_box .input_info {position:relative; margin-bottom:60px; } .register_box .input_info02 {position:relative;padding: 10px 0 20px 10px;} .register_box .input_info02 .stext {color:var(--color2);font-size:0.95em;} .register_box .input_info table {position:relative;border-collapse:collapse; width:100%; table-layout:fixed; line-height:1.3; border-top:2px solid #333;transition:all 0.3s ease;} .register_box .input_info table th {position:relative;width:25%; padding:1em 1em 1em 1.7em ; text-align:left;border-bottom:1px solid #e5e5e5;background:#f9f9f9; font-size:0.95em; color:#333; font-weight:500; transition:all 0.3s ease;} .register_box .input_info table td {position:relative;padding:1em 0.5em 1em 1em ; font-size:0.95em;word-break:break-all; border-bottom:1px solid #e5e5e5; transition:all 0.3s ease;} .register_box .input_info input[type="text"], .register_box .input_info input[type="password"], .register_box .input_info input[type="tel"], .register_box .input_info input[type="email"] {position:relative;width:100%; border: 1px solid #ccc; background:#fff; padding: 0 0.7em;line-height:40px; } .register_box .input_info .addsize {width:50% !important;} .register_box .input_info select {position:relative;border: 1px solid #ccc; height:42px; } .register_box .input_info input::-webkit-input-placeholder {color: #bbb;} .register_box .input_info input::-moz-placeholder {color: #bbb;} .register_box .input_info input:-ms-input-placeholder {color: #bbb;} .register_box .input_info input:-moz-placeholder {color: #bbb;} .register_box .input_info input:focus {border:1px solid #888; } .register_box .input_info .ifas {position:relative;} .register_box .input_info .ifas_input {padding-right:40px;} .register_box .input_info .ifas i {position:absolute; top:0; text-align:center; width:24px;height:40px;line-height:40px;font-size:0.75em; color:#aaa; z-index:1;} .register_box .input_info .fa-check {right:10px; color:var(--color2);} .register_box .input_info .fa-check.pwcheck_rule, .register_box .input_info .fa-check.pwcheck_re, .register_box .input_info .fa-check.pwcheck_0, .register_box .input_info .fa-check.pwcheck_1 {right:30px; } .register_box .input_info .fa-times {right:10px; color:var(--color2);} .register_box .input_info .fa-eye, .register_box .input_info .fa-eye-slash {right:10px !important; } .register_box .input_info .fa-key {right:40px; color:var(--color2);} .register_box .input_info .input_form {border: 1px solid #d4d4d4 !important; padding:3px !important;} .register_box .notitxt {display: block; overflow:hidden; font-size:0.9em; padding:10px 0 0 0;} /* 비밀번호 설명 */ .register_box .notitxt p { color: #999 ; } /* 비밀번호 설명 글씨 색 */ .register_box .input_info .pw_check_wrap {margin: 10px 0px 0px 0; display: flex;} .register_box .input_info .pw_check_wrap div {font-size:0.9em; text-align:center; color:#999;} .register_box .input_info .pw_check_wrap div::before {display: block; content: ''; width: 80px; height: 5px; margin-bottom: 5px; background: #cbcdce; border-left: 0.5px solid #fff;} .register_box .input_info .pw_check_wrap div.on::before {background:var(--color2);} /* 비밀번호 기준 체크 컬러 */ .register_box input[type="radio"], .register_box input[type="checkbox"] {width:20px;height:20px;line-height:20px;} @media screen and (max-width:768px) { .register_box .tit1 { padding:0 0 20px 5px; font-size:1.2em;} .register_box .input_info { margin-bottom:50px; } .register_box .input_info table th {width:30%; } .register_box .input_info input.w50 {width:100% !important;} .register_box .input_info .mbtn01 {margin-top:7px;} .register_box .input_info input[type="text"], .register_box .input_info input[type="password"], .register_box .input_info input[type="tel"], .register_box .input_info input[type="email"] { font-size:0.9em; } .register_box .input_info i {font-size:0.75em; width:25px; top:17px; } .register_box .input_info .fa-key {right:30px; } .register_box .notitxt { font-size:0.75em;line-height:1.4;} } @media screen and (max-width:600px) { .register_box .tit1 { padding:0 0 20px 5px; font-size:1.15em;} .register_box .input_info { margin-bottom:40px; } .register_box .input_info table th { padding:1em ; font-size:0.9em; } .register_box .input_info table td { padding:1em 0.6em ; } .register_box .input_info .pw_check_wrap div::before { width: 60px; } .register_box .input_info .fa-check.pwcheck_rule, .register_box .input_info .fa-check.pwcheck_re, .register_box .input_info .fa-check.pwcheck_0, .register_box .input_info .fa-check.pwcheck_1 {right:30px; } .register_box .input_info .addsize {width:100% !important;} } /* 회원가입 ==================================================================================== */ /* 아이디찾기 등 ==================================================================================== */ .register_check_box {position:relative; text-align:center; max-width:600px;margin: auto; padding:55px 60px ;background:#fff; border:1px solid #dfdfdf; border-radius:0.7em; } .register_check_box .tit1 { padding:10px 0 30px 0; color:#111;font-size:1.8em;font-weight:700; } .register_check_box .tit3 {padding:0 0 20px 0; color:#555; } .register_check_box ul {display: grid; gap:14px; } .register_check_box ul li input { border:1px solid #e5e5e5; background:#f5f5f5; padding:8px 15px; width:100%; } .register_check_box ul li input:focus {border-color:var(--color1);background:#fff !important; } .register_check_box ul li input::-webkit-input-placeholder {color: #bbb;} .register_check_box .sub_btn02 {max-width:100%;width:100%;line-height:48px;} .register_check_box .input_info {padding-bottom:20px; } @media screen and (max-width:600px) { .register_check_box { padding:45px 40px; } .register_check_box .tit1 {font-size:1.5em;padding:0 0 20px 0; } .register_check_box ul li input { padding:6px 10px; } } @media screen and (max-width:480px) { .register_check_box { padding:40px 30px; } .register_check_box ul li input { padding:5px 10px; } } /* 아이디찾기 등 ==================================================================================== */ /* 회원가입 완료 ==================================================================================== */ .register_finish_box01 {position:relative; text-align:center;margin:auto; padding: 55px 40px ; border:1px solid #dfdfdf; display: flex; align-items:center; justify-content:center; flex-direction: column;gap:30px; border-radius:0.7em; } .register_finish_box01 .img {position:relative;display:inline-block; width:80px;height:80px; margin:auto;border-radius:50%; background:url('./img/member_comm01.png') no-repeat center 50% #d2d3d5; background-size:100% auto; } .register_finish_box01 .txt01 {color:#111;font-size:1.8em;font-weight:700; } .register_finish_box01 .txt02 {color:#222;padding: 20px 0; text-align:center;background:#fff;border:1px solid #e0e0e0; line-height:1.5; } .register_finish_box01 .txt02 b {font-size:1.2em;color:#111 ;} .register_finish_box01 .txt03 { font-size:1.05em; line-height:1.5;padding:0 0 10px 0; } .register_finish_btn {position:relative;width:100%; max-width:600px ; display: flex; gap:0.4em; } .register_finish_btn .member_btn01 {flex:1; } @media screen and (max-width:600px) { .register_finish_box01 { padding:40px 30px ;gap:20px; } .register_finish_box01 .img { width:70px;height:70px; } .register_finish_box01 .txt01 { font-size:1.5em; } .register_finish_box01 .txt03 { font-size:1em; } } @media screen and (max-width:480px) { .register_finish_box01 { padding:30px 25px; } } /* 포트폴리오 ==================================================================================== */ .sub_mypage_tit {position:relative; display: flex; flex-flow:wrap;justify-content: space-between; } .sub_mypage_tit p {position:relative;font-size:1.3em;line-height:1.3; font-weight:600; padding:0 0 15px 0; color:var(--color1); } .sub_mypage_tit p span {display:inline-block;padding:0 0 0 6px;color:#777; font-size:1.05rem;} .sub_mypage_tit .more a {display:inline-block;border:1px solid #ccc; color:#888;padding:4px 10px; line-height:1.6;font-size:0.8rem; border-radius:2px; } /* 회원탈퇴 ==================================================================================== */ .leave_box { position:relative; max-width:650px; margin: auto; text-align:center; padding:55px 60px ; transition:all 0.3s ease; background:#fff;border-radius:0.5em; border:1px solid #dfdfdf; display: flex; flex-direction: column; justify-content:center; align-items:center; } .leave_box .tit {font-size:1.4em; width:100%; color:#000;font-weight:700;padding-bottom: 30px; margin-bottom:30px; border-bottom:1px solid #dfdfdf; transition:all 0.3s ease;} .leave_box .tit i {display:block; font-size:3.6em; color:#e5e5e5; margin-bottom:20px; cursor:default; } .leave_box .cont { padding-bottom:40px; text-align:left; } @media screen and (max-width:768px) { .leave_box { padding:50px ; } .leave_box .tit {font-size:1.35em; } .leave_box .tit i { font-size:3.5em; } } @media screen and (max-width:600px) { .leave_box { padding:35px 30px ; } .leave_box .tit {font-size:1.25em; padding-bottom:20px; margin-bottom:20px;} .leave_box .tit i { font-size:3.3em; } } /* 회원탈퇴 ==================================================================================== */ /* 마이페이지 스타일 ==================================================================================== */ .mypage_wrap {position:relative;margin:auto ; padding:40px ; border:1px solid #ddd; border-radius:0.7em; } .mypage_wrap .topbox {background:#fff;} .mypage_wrap .topbox .infobox {padding:0 0 30px 15px;} .mypage_wrap .topbox .infobox .namebox {position:relative; padding:7px 0;font-size:1.1em; color:#000; } .mypage_wrap .topbox .infobox .namebox .cate {position:relative;display:inline-block; margin-right:5px;background:#427ee2;font-weight:600;color:#fff; font-size:0.9rem; padding:0 15px; line-height:32px; border-radius:30px;} .mypage_wrap .topbox .infobox .namebox b {font-size:1.15em; } .mypage_wrap .topbox .infobox p {position:relative;font-size:0.95em; padding:5px 0 5px 15px;} .mypage_wrap .topbox .infobox p b {text-decoration:underline;} .mypage_wrap .topbox .infobox p:before {position:absolute; content:''; display:block; left:4px; top:15px; width:3px; height:3px; background:#aaa;} .mypage_wrap .topbox .txtbox {padding:35px 15px ; border-top:1px dashed #ccc; line-height:1.7; } .mypage_btn_wrap {position:relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .mypage_btn_wrap .inner {position:relative; display: flex;gap:30px; padding:25px 30px ; background:#f5f5f5;border:1px solid #e5e5e5; border-radius:0.5em; transition:all 0.3s ease;} .mypage_btn_wrap .txt {flex:1; color:#777;font-size:0.9em;font-weight:500; line-height:1.3; display: flex; flex-direction: column; justify-content:center; } .mypage_btn_wrap .txt p {position:relative; display:inline-block;font-size:1.2em;font-weight:600;color:#222; padding-bottom:15px; } .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { width:90px;height:90px; border-radius:50%; } .mypage_btn_wrap .item01 { background:url('./img/mypage_icon01.png') no-repeat center 50% #fff;} .mypage_btn_wrap .item02 { background:url('./img/mypage_icon02.png') no-repeat center 50% #fff;} .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { background-size:90% auto;} .mypage_btn_wrap .inner:hover { border:1px solid #888; } .mypage_btn_wrap .inner:hover .more::after { left:70px; } @media screen and (max-width:1200px) { .mypage_wrap { padding:30px ; } .mypage_btn_wrap { gap:14px; } .mypage_btn_wrap .inner { gap:20px;padding:25px; } .mypage_btn_wrap .txt p { padding-bottom:10px; } .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { width:80px;height:80px;} } @media screen and (max-width:768px) { .mypage_wrap { padding:25px ; } .mypage_wrap .topbox .infobox {padding:0 0 20px 0; } .mypage_wrap .topbox .infobox .tit { font-size:1.3em;} .mypage_wrap .topbox .infobox p { padding:3px 0 5px 0; font-size:1em; } .mypage_wrap .topbox .infobox p::before { display:none; } .mypage_wrap .topbox .txtbox {padding:25px 0; } .mypage_btn_wrap .inner { padding:20px; } .mypage_btn_wrap .txt p { font-size:1.15em; } } @media screen and (max-width:600px) { .mypage_wrap { padding:20px ; } .mypage_btn_wrap {display: grid; grid-template-columns: repeat(1, 1fr); gap:15px; } .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { width:70px;height:70px;} } /* 마이페이지 스타일 ==================================================================================== */