.member_wrap {position:relative;max-width:900px;margin: auto; } .member_info { max-width:900px;margin: auto; padding: 20px;border:1px solid #ddd; border-top:0;background:#f5f5f5;} .member_info p {position:relative;padding:0 0 3px 12px;font-size:0.9em; } .member_info p:after {position:absolute; content:''; display:block; left:2px; top:11px; width:2px; height:2px; background:#999; } .member_check_wrap { background:#f7f7f7;padding: 30px; } .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 5px 15px; letter-spacing:-1px;} .member_check_txt p:after {position:absolute; content:''; display:block; left:2px; top:11px; width:5px; height:2px; background:#999; } .member_check_box {background:#fff; padding:10px;} .member_check_all {position:relative;font-size:1em;line-height:1.3; font-weight:500; padding:10px ; background:#fff; color:#333; letter-spacing:-1px; border-top:1px dashed #ddd; } .member_check {position:relative;border-bottom:0 solid #ddd; overflow:hidden; } .member_check .tit { position:relative;overflow:hidden;font-size:1em;line-height:1.3; font-weight:500; padding:10px ; color:#333; letter-spacing:-1px; } .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;letter-spacing:-1px; 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 ; text-align:center; display: grid; grid-template-columns: repeat(3, 1fr); gap:20px; transition:all 0.3s ease;} .member_check_cate_box li {position:relative; 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.1em;letter-spacing:-1px;background:#22293d; width:100%;line-height:70px; padding:0 10px;color:#fff; border-radius:2px; transition:all 0.3s ease;} .member_check_cate_box li .btn span {color:#99c6fd;} .member_check_cate_box li .btn:hover {background:#000;} .member_check_cate_box .icon {position:relative;display:inline-block;width:110px;height:110px; } .member_check_cate10 {margin:auto;background:url('./img/member_icon1.png') no-repeat center 50% ; } .member_check_cate30 {margin:auto;background:url('./img/member_icon1.png') no-repeat center 50% ; } .member_check_cate40 {margin:auto;background:url('./img/member_icon2.png') no-repeat center 50% ; } .member_check_cate50 {margin:auto;background:url('./img/member_icon3.png') no-repeat center 50% ; } .member_check_cate10:before {position:absolute; content:''; left:0;bottom:0;width:40px;height:40px; border-radius:50%; background:#557eda; opacity:0.2;} .member_check_cate30:before {position:absolute; content:''; left:0;bottom:0;width:40px;height:40px; border-radius:50%; background:#557eda; opacity:0.2;} .member_check_cate40:before {position:absolute; content:''; right:0;top:5px;width:40px;height:40px; border-radius:50%; background:#557eda; opacity:0.2;} .member_check_cate50:before {position:absolute; content:''; right:0;top:40%;width:40px;height:40px; border-radius:50%; background:#557eda; opacity:0.2;} @media screen and (max-width:800px) { .member_check_cate_box { gap:10px;} } @media screen and (max-width:600px) { .member_check_wrap { background:#f5f5f5;padding:30px 20px; } .member_check_all { font-size:0.95em; padding:12px 15px; } .member_check .tit { font-size:0.95em; padding:12px 15px; } .member_check_cate_box { padding:20px 0 ; } .member_check_cate_box li .btn { font-size:1.05em; line-height:60px; } } /* 로그인 ==================================================================================== */ .login_box_logo {padding:100px 0 30px 0; text-align:center;} .login_box_logo img {width:270px;} #login_box {position:relative; max-width:650px; margin: auto; text-align:center; border:1px solid #e5e5e5; padding:60px 70px ; } #login_box .top {padding:0 0 20px 0; color:#555; letter-spacing:-1px; } #login_box .top p {padding:10px 0 30px 0; color:#222;font-size:1.8em; font-weight:600; } #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 #dfdfdf; background:#f3f3f3; padding:12px 10px; margin:4px 0;width:100%; letter-spacing:-1px; border-radius:3px;} #login_box .field input:focus {border-color:#999;} #login_box .field i {position:absolute; bottom: 33px; z-index:1;right:10px; color:#888;} #login_box .btns {padding:20px 0 0 0;width:100%; } #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; letter-spacing:-1px; } #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; letter-spacing:-2px; 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:800px) { #login_box { padding:45px 30px ; } } @media screen and (max-width:600px) { #login_box { padding:40px 25px ; } #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 .btns input { line-height:52px; font-size:1em;} #login_box .bottom {margin-top:10px;} .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;} } /* 회원가입,수정 ==================================================================================== */ .register_check_box {position:relative; text-align:center; max-width:600px;margin: auto; padding:60px ;background:#fff; border:1px solid #dfdfdf;} .register_check_box .tit1 { padding:10px 0 30px 0; color:#222;font-size:1.8em;font-weight:600;letter-spacing:-1px; } .register_check_box .tit3 {padding:0 0 20px 0; color:#555; letter-spacing:-1px; } .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%; letter-spacing:-1px; border-radius:3px;} .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_box {position:relative; max-width:900px;margin: auto; padding:50px ;background:#fafafa; border:1px solid #ddd;} .register_box .tit1 {position:relative; letter-spacing: -3px; font-size: 2em; color:#111; padding:0 0 40px 0;margin-bottom: 40px; text-align:center; border-bottom:1px solid #aaa;} .register_box .tit2 {position:relative; margin-bottom:20px; font-size:1.2em; color:#000; font-weight:600; letter-spacing:-1px; } .register_box .tit3 {position:relative; margin-bottom:30px; font-size:1.1em; color:#333; font-weight:400; text-align:center; letter-spacing:-1px; line-height:1.4; } .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:#00b19f; border-bottom: 2px solid #00b19f;} .register_box .linegap {margin-top:30px; padding-top:35px; border-top:1px dashed #ddd; } .register_box .input_info { } .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_info02 {padding: 10px 0 20px 10px;} .register_box .input_info02 .stext {color:#557eda;font-size:0.95em;} .register_box dl {position:relative; display: grid; grid-template-columns:170px auto ; } .register_box dl dt { line-height:46px; color:#666; padding:7px 0px;letter-spacing:-1px;} .register_box dl dd {position:relative; padding:7px 0px;} .register_box dl dd.bnone {border:none;line-height:25px;} .register_box dl dd input[type="text"], .register_box dl dd input[type="password"], .register_box dl dd input[type="tel"], .register_box dl dd input[type="email"] {width:100%; border: 1px solid #ccc; background:#fff; padding:0 8px;line-height:44px; border-radius:4px; } .register_box dl dd select {border: 1px solid #ccc;background:#fff; height:46px; border-radius:4px; } .register_box dl dd .fas {position:absolute; top:18px; z-index:1;} .register_box dl dd .fa-check {right:10px; color:#8fafdf;} .register_box dl dd .fa-times {right:10px; color:#8fafdf;} .register_box dl dd .fa-eye, .register_box dl dd .fa-eye-slash {right:10px; } .register_box dl dd .fa-key {right:10px; color:#00851e;} .register_box dl dd .input_form {border: 1px solid #d4d4d4 !important; padding:3px !important;} .register_box dl #pw_check_msg {margin: 10px 0px 0px 155px;} .register_box dl .pw_check_wrap {margin: 10px 0px 0px 155px; display: flex;} .register_box dl .pw_check_wrap div {font-size:0.9em; text-align:center; color:#999;} .register_box dl .pw_check_wrap div::before {display: block; content: ''; width: 80px; height: 5px; margin-bottom: 5px; background: #cbcecc; border-left: 0.5px solid #fff;} .register_box dl .pw_check_wrap div.on::before {background:#00851e;} .register_box dl dd .btn_r {position:absolute;right:0;top:10px;} .register_box dl dd .stext {padding:10px 0; font-size:0.9em;color:#888;} .register_box input[type="radio"], .register_box input[type="checkbox"] {width:20px;height:20px;line-height:20px;} .register_box .check_info_box {background:#f7f7f7; padding:20px;} .register_box .check_info {position:relative; padding-bottom:10px;} .register_box .check_info .fr {font-size:0.8em; cursor:pointer; text-decoration:underline; color:#777;} .register_box .check_info .acons {clear: both; display:none; margin-top:32px;} .register_box .check_info .acons .con {font-size: 0.8em; width: 100%; height: 150px; padding: 5px; background: #fff; border: 1px solid #ddd; overflow: auto;} .register_box .btn_info {padding-top:40px; text-align:center;} @media screen and (max-width:800px) { .register_box {padding:40px;} .register_box .tit1 {font-size:1.8em; padding-bottom:30px;} .register_box dl { grid-template-columns:130px auto ; } .register_box dl dt { line-height:40px; padding:5px 0px; } .register_box dl dd { padding:5px 0px;} .register_box dl dd input[type="text"], .register_box dl dd input[type="password"], .register_box dl dd input[type="tel"], .register_box dl dd input[type="email"] { line-height:38px; } .register_box dl dd select { height:40px; } } @media screen and (max-width:600px) { .register_box {padding:30px;} .register_box .linegap {margin-top:20px; padding-top:25px; } .register_box dl { grid-template-columns:1fr ; } .register_box dl dt { line-height:40px; padding:0 ; font-size:0.95em;} .register_box dl dd { padding:0 0 10px 0px;} .register_box #hp_code_btn {position:absolute;right:0px;} } /* 회원가입 완료 ==================================================================================== */ .register_finish_box01 {position:relative;max-width:700px; text-align:center;margin:auto; padding: 50px 40px; 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:600;letter-spacing:-1px; } .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; letter-spacing:-1px; } .register_finish_btn {position:relative; width:100%;} @media screen and (max-width:600px) { .register_finish_box01 { padding:40px 20px;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; } } /* 회원가입 버튼-큰거 ==========*/ .member_btn01 {display:inline-block;font-size:1.1em;letter-spacing:-1px;background:#22293d; width:250px; line-height:60px; padding:0 10px;color:#fff; border-radius:2px; border:0; } .member_btn01:hover {background:#08449a; color:#fff !important;} .member_btn02 {display:inline-block;font-size:1.2em;letter-spacing:-1px;background:#f67600; width:300px; padding:15px;color:#fff; border-radius:2px; border:0; } .member_btn02:hover {background:#000; color:#fff !important;} @media screen and (max-width:1200px) { } @media screen and (max-width:800px) { .member_btn01 { width:100%; } .member_btn01 { font-size:1em; line-height:55px; } .register_finish_btn .member_btn01, .register_finish_btn .member_btn02, #login_box .btns .member_btn01 {width:46% ;} } @media screen and (max-width:600px) { .member_btn01 { line-height:55px; font-size:1em;} .member_btn01, .member_btn02 { width:100%;padding:0 10px; } } /* 회원가입 STEP ==================================================================================== */ #register_stepbox02 { position:relative;overflow: hidden;display: block;margin-bottom:50px;text-align:center;display: flex; justify-content:center; gap:25px;} #register_stepbox02:before {position:absolute;content:''; left:calc(50% - 130px);top:50%; width:260px;height:1px;border-bottom:1px dashed #adb2c6;} #register_stepbox02 li {position:relative;border:1px dashed #adb2c6;background:#fff; color:#0d3496; font-size:1.05em;font-weight:500; width:90px;height:90px; border-radius:60px; transition:all 0.3s ease;} #register_stepbox02 li.on {border:1px solid #0d3496;background:#0d3496;min-width:200px; text-align:left; } #register_stepbox02 li .no {line-height:90px;font-size:1em;font-weight:500;} #register_stepbox02 li .cont {position:relative;line-height:90px; text-align:center; } #register_stepbox02 li .step {display:inline-block;font-weight:500;color:rgb(255,255,255,0.65);padding:0 5px 0 0; } #register_stepbox02 li .tit { display:inline-block; color:#fff; font-weight:500; } @media screen and (max-width:800px) { #register_stepbox02 { margin-bottom:35px; gap:20px; } #register_stepbox02 li { font-size:1em; width:80px;height:80px; } #register_stepbox02 li.on { min-width:160px; } #register_stepbox02 li .no {line-height:80px; } #register_stepbox02 li .cont {line-height:80px; } } @media screen and (max-width:500px) { #register_stepbox02 { gap:10px; } #register_stepbox02 li.on { min-width:140px; } #register_stepbox02 li { font-size:0.9em;width:65px;height:65px; } #register_stepbox02 li .no {line-height:62px; } #register_stepbox02 li .cont {line-height:62px; } } /* 포트폴리오 ==================================================================================== */ .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:#004e97; letter-spacing:-1.5px; } .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:40px ; border:1px solid #ddd; transition:all 0.3s ease;} .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; letter-spacing:-1px; padding:0 0 15px 0;transition:all 0.3s ease;} .mypage_topbox .infobox .tit span {font-weight:700;color:#24569f;} .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;letter-spacing:-1px;} .mypage_btn_wrap {position:relative;margin:40px 0 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .mypage_btn_wrap .inner {position:relative; background:#f5f5f5;border:1px solid #e5e5e5;padding:35px 45px;transition:all 0.3s ease;} .mypage_btn_wrap .txt {color:#777;font-size:0.9em;font-weight:500; letter-spacing:-1px; } .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; letter-spacing:-1px; } .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:110px 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;} .mypage_btn_wrap .item01, .mypage_btn_wrap .item02 { background-size:100px auto;} } @media screen and (max-width:800px) { .mypage_wrap { padding:30px ; } .mypage_topbox .infobox .tit { font-size:1.3em; padding:0 0 10px 0;} .mypage_topbox .infobox {padding:10px 0 20px 0;text-align:center;} .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:20px; } } @media screen and (max-width:600px) { .mypage_wrap { padding:0 ; border:0; } } /* 마이페이지 스타일 ==================================================================================== */