.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:800px) { .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;} } /* 인증정보 ==================================================================================== */ /* 로그인 ==================================================================================== */ .login_box_logo {padding:120px 0 0 0; text-align:center;} .login_box_logo img {width:300px;} #login_box {position:relative; max-width:650px; margin: auto; text-align:center; padding:55px 60px ; transition:all 0.3s ease;} #login_box .tit {font-size:1.6em; color:#000;font-weight:700;padding:0 0 30px 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; } #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 #ccc; background:#f5f5f5; padding:12px 10px;font-size:0.95em; margin:4px 0;width:100%; } #login_box .field input:focus {border-color:#888;} #login_box .field input::-webkit-input-placeholder {color: #bbb;} #login_box .field i {position:absolute; bottom:15px; width:35px;height:50px; line-height:50px; z-index:1;right:0; color:#888;font-size:0.85em;} #login_box .btns {padding:20px 0 0 0; display:flex;gap:5px; } #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:#222;} #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 {font-size:1.45em;padding:0 0 25px 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:12px 10px; font-size:0.95em;} #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;} } /* 회원가입 STEP ==================================================================================== */ #register_stepbox01 { position:relative; display: block; text-align:center;border-radius:10px; border:1px solid transparent;padding:30px;margin-bottom:60px; transition:all 0.3s ease;} #register_stepbox01::after {position:absolute; content:''; top:-1px;left:-1px;width:100%;height:100%; border:1px solid var(--color1);border-radius:10px; opacity:0.18;} #register_stepbox01::before {position:absolute; content:''; top:0;left:0;width:100%;height:100%;background:var(--color1);border-radius:10px; 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::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:last-child::before {display:none;} #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:800px) { #register_stepbox01 { padding:25px 10px;margin-bottom:50px; } #register_stepbox01 li { padding-top:60px; } #register_stepbox01 li::after { left:calc(50% - 20px);width:40px; height:40px; border-width:1px ; } /* 동그라미 */ #register_stepbox01 li::before { top:20px; } /* 점선 */ } @media screen and (max-width:600px) { #register_stepbox01 { padding:25px 0;margin-bottom:40px; } #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::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:800px) { #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:40px; } .member_check_txt {padding:0 0 20px 0;font-weight:300; font-size:0.95em;line-height:1.5;} .member_check_txt p {position:relative;padding:0 0 10px 18px; } .member_check_txt p:after {position:absolute; content:''; display:block; left:5px; top:11px; 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:500; 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:500; 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:0 10px 0 0;} .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;color:#999; padding:2px 18px 0 0; cursor:pointer;} .member_check_wrap .agree_view:after {content:''; position:absolute; top:7px; right:0; border:solid #c5c5c5; border-width:2px 2px 0 0; padding:4px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .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:#181e2e; width:100%;line-height:75px; color:#fff; border-radius:3px; 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:800px) { .member_check_cate_box {flex-flow:wrap; gap:5px; } .member_check_cate_box li { width:100%;} .member_check_cate_box li .btn { line-height:65px; } } @media screen and (max-width:600px) { .member_check_wrap { padding: 20px; } .member_check_cate_box li .btn { font-size:1em;line-height:60px; } .member_check_all { font-size:0.9em; padding:15px ; } .member_check .tit { font-size:0.9em;padding:5px; } } /* 약관 ==================================================================================== */ /* 회원가입 ==================================================================================== */ .register_box {position:relative; } .register_box .tit1 {position:relative; padding:0 0 20px 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;border-top:2px solid #333;transition:all 0.3s ease;} .register_box .input_info table th {position:relative;width:25%; padding:1.2em 0;text-indent:2.5em; text-align:left;border-bottom:1px solid #e5e5e5;background:#f9f9f9; font-size:0.9em; color:#333; font-weight:500; transition:all 0.3s ease;} .register_box .input_info table td {position:relative;padding:1.2em 0.5em 1.2em 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 .ifas_input {padding:0 40px 0 0.7em;} .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 i {position:absolute; top:21px; text-align:center; width:35px;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:800px) { .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%; text-indent:15px; } .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 0 ; text-indent:10px;font-size:0.85em; } .register_box .input_info table td { padding:1em 0.5em ; } .register_box .input_info .pw_check_wrap div::before { width: 60px; } .register_box .input_info .ifas i { top:16px; } .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;} } /* 회원가입 ==================================================================================== */ /* 회원가입 버튼- ============================================================================== */ .member_btn01 {display:inline-block;font-size:1.05em;background:#181e2e; width:250px; line-height:70px; padding:0 10px;color:#fff; border-radius:3px; border:0; transition:all 0.3s ease;} .member_btn01:hover {background:var(--color1); 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:3px; 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:3px; 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:3px; 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:800px) { .member_btn01 { width:100%; } } @media screen and (max-width:600px) { .member_btn01 { line-height:60px; font-size:1em;} .member_btn01, .member_btn02 { width:100%;padding:0 10px; } .mbtn01, .mbtn02 { padding: 0 10px; } } /* 회원가입 버튼-큰거 ============================================================================== */ /* 아이디찾기 등 ==================================================================================== */ .register_check_box {position:relative; text-align:center; max-width:600px;margin: auto; padding:55px 60px ;background:#fff; border:1px solid #dfdfdf;} .register_check_box .tit1 { padding:10px 0 30px 0; color:#222;font-size:1.8em;font-weight:700; } .register_check_box .tit3 {padding:0 0 20px 0; color:#555; } .register_check_box ul li {padding:5px 0;} .register_check_box ul li input { border:1px solid #ccc; padding:12px 10px; margin:4px 0;width:100%; } .register_check_box .sub_btn02 {max-width:100%;width:100%;line-height:48px;} .register_check_box .input_info {padding-bottom:20px; } .register_check_box .input_info input::-webkit-input-placeholder {color: #bbb;} .register_check_box .input_info input::-moz-placeholder {color: #bbb;} .register_check_box .input_info input:-ms-input-placeholder {color: #bbb;} .register_check_box .input_info input:-moz-placeholder {color: #bbb;} /* 아이디찾기 등 ==================================================================================== */ /* 회원가입 완료 ==================================================================================== */ .register_finish_box01 {position:relative;max-width:650px; text-align:center;margin:auto; padding: 55px 60px ; border:1px solid #dfdfdf; display: flex;align-items:center; justify-content:center; flex-direction: column;gap:30px;} .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% #c7c8cb; background-size:80px auto; } .register_finish_box01 .txt01 {color:#333;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%; display: flex; gap:2%; } .register_finish_btn .member_btn01 {width:49%;} @media screen and (max-width:600px) { .register_finish_box01 { padding:40px 25px ;gap:20px; } .register_finish_box01 .img { width:70px;height:70px; background-size:70px auto; } .register_finish_box01 .txt01 { font-size:1.5em; } .register_finish_box01 .txt03 { font-size:1em; } } /* 포트폴리오 ==================================================================================== */ .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; } /* 마이페이지 스타일 ==================================================================================== */ .mypage_wrap {position:relative;margin:auto ; padding:0; } .mypage_topbox {background:#fff;} .mypage_topbox .infobox {padding:0 0 30px 15px;} .mypage_topbox .infobox .tit { font-size:1.4em;font-weight:700; color:#222; padding:0 0 15px 0;} .mypage_topbox .infobox .tit span {font-weight:700;color:var(--color1);} .mypage_topbox .infobox p {position:relative;padding:3px 0 5px 15px; color:#222; font-size:1.05em; } .mypage_topbox .infobox p:before {position:absolute; content:''; display:block; left:4px; top:14px; width:3px; height:3px; background:#aaa;} .mypage_topbox .txtbox {padding:35px 40px; border:1px dashed #ccc; line-height:1.9; font-size:1.05em; border-radius:15px; } .mypage_btn_wrap {position:relative;margin:40px 0 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .mypage_btn_wrap .inner {position:relative; background:#f5f5f5;border:1px solid #e5e5e5;padding:35px 45px; border-radius:15px; transition:all 0.3s ease;} .mypage_btn_wrap .txt {color:#777;font-size:0.9em;font-weight:500; } .mypage_btn_wrap .txt span {display:block;font-size:1.2em;font-weight:500;color:#222; padding:0 0 5px 0; } .mypage_btn_wrap .more {position:relative;display:inline-block; color:#222;font-size:0.95em;font-weight:500; margin:20px 0 0 0;padding-right:25px; } .mypage_btn_wrap .more:after {content:''; position:absolute; top:9px; left:65px; width:6px;height:6px;border:solid #000; border-width:1px 1px 0 0; opacity:0.8;transform: rotate(45deg); -webkit-transform: rotate(45deg);} .mypage_btn_wrap .inner .more:before {position:absolute; content:''; left:-2px; bottom:0; width:0; height:1px; background:#555;transition:all 0.3s ease;} .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 {position:absolute; right:35px; top:50%; width:120px;height:120px; border-radius:50%; transform:translate(0, -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:before { width:100%; } @media screen and (max-width:1200px) { .mypage_btn_wrap { gap:20px; } .mypage_btn_wrap .inner { padding:25px; } .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { right:25px; width:100px;height:100px;} } @media screen and (max-width:800px) { .mypage_topbox .infobox {padding:0 0 30px 0;text-align:center;} .mypage_topbox .infobox .tit { font-size:1.3em;} .mypage_topbox .infobox p { padding:3px 0 5px 0; font-size:1em; } .mypage_topbox .infobox p:before { display:none; } .mypage_topbox .txtbox {padding:30px; font-size:1em;} .mypage_btn_wrap {display: grid; grid-template-columns: repeat(1, 1fr); gap:15px; } } @media screen and (max-width:600px) { .mypage_btn_wrap .inner { padding:20px; } .mypage_btn_wrap .txt span { font-size:1.1em; } .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { right:15px; width:80px;height:80px;} } /* 마이페이지 스타일 ==================================================================================== */