.member_wrap {position:relative;max-width:800px;margin: auto; } .member_info {max-width:800px;margin:auto; padding:20px 0 0 0;} .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:#f1f2f5;padding:20px; border-radius:10px;} .member_check_txt {padding:10px 0 20px 20px;font-weight:300;color:#777;font-size:0.9em;line-height:1.5;} .member_check_txt p {position:relative;padding:0 0 3px 15px; } .member_check_txt p:after {position:absolute; content:''; display:block; left:2px; top:11px; width:5px; height:2px; background:#999; } .member_check_all {position:relative;font-size:1.05em;line-height:1.3; font-weight:400; padding:15px 20px; color:#333; letter-spacing:-1px;border:1px solid #ddd; background:#fff;border-radius:5px; } .member_check {position:relative;border:1px solid #ddd; background:#fff;border-radius:5px; overflow:hidden;margin:0 0 10px 0;} .member_check .tit { position:relative;overflow:hidden;font-size:1.05em;line-height:1.3; font-weight:400; padding:17px 20px; 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 {padding:30px 0 0 0;text-align:center;} /*.member_check_cate_box li {position:relative;padding:30px 20px;min-height:200px;background:#fff;border:3px solid #e6e7ec; cursor:pointer; display:flex;align-items: center; justify-content: center; flex-direction: column; transition:all 0.2s; border-radius:15px;}*/ .member_check_cate_box li .tit {font-weight:700; color:#222;font-size:1.4em;letter-spacing:-1.5px;padding: 20px 0;} .member_check_cate_box li .btn {display:inline-block; letter-spacing:-1px;background:#3b414d;max-width:120px;width:80%; line-height:46px; color:#fff; border-radius:50px; transition:all 0.2s;} .member_check_cate_box li:hover {border-color:#194895;} .member_check_cate_box li:hover .btn {background:#194895;} .member_check_cate_box .icon {display:inline-block;width:110px;height:110px; border-radius:50%; } .member_check_cate30 {margin:auto;background:url('./img/member_icon1.png') no-repeat center 50% #f7f7f7 ;background-size:auto 50px; } .member_check_cate40 {margin:auto;background:url('./img/member_icon2.png') no-repeat center 50% #f7f7f7;background-size:auto 50px; } .member_check_cate50 {margin:auto;background:url('./img/member_icon3.png') no-repeat center 50% #f7f7f7;background-size:auto 50px; } /* 로그인 ==================================================================================== */ .loginWrap {max-width:500px; margin:0 auto; text-align:center; } .loginWrap .tab {display:flex; justify-contentspace-around; gap:0 5px; border-bottom:1px solid #00956e;} .loginWrap .tab li {width:50%; } .loginWrap .tab li a {position:relative; display:block; font-weight:500; font-size:1.05em; background:#e9e9e9; color:#959595; padding:15px 0; border:1px solid #d3d3d3; border-bottom:0; border-radius:7px 7px 0 0;} .loginWrap .tab .on a {color:#00956e; background:#fff; border-color:#00956e; } .loginWrap .tab .on a:after {content:''; width:100%; height:1px; background:#fff; display:block; position:absolute; left:0; bottom:-1px;} .loginWrap #login_box {max-width:100%; border:1px solid #00956e; border-top:0; padding:50px; min-height:420px;} .loginWrap .login_box2 {max-width:100%; border:0 !important; padding:50px; min-height:420px;} .loginWrap .txt {color:#888; margin:0 0 10px 0; line-height:1.6; font-size:1.05em;} .loginWrap .txt i {display:block; width:100px; line-height:100px; font-size:30px; border-radius:20px; background:#f7f7f7; color:#a4a9a8; margin:20px auto 40px auto; box-shadow:5px 5px 5px rgba(192,192,192,0.3);} .loginWrap .sub_btn01 {font-weight:700; width:100%; line-height:60px; border:0; font-size:1.1em; margin-top:20px;} #login_box {max-width:400px; margin:0 auto; text-align:center; position:relative;} #login_box .logo {padding:100px 0 20px 0;} #login_box .logo img {width:270px;} #login_box .toptxt {border:3px solid #e6e7ec; padding:15px 20px; border-radius:10px; font-size:0.9em;} #login_box .field {position:relative; padding:20px 0 10px 0; } #login_box .field .tits {padding:10px 0; font-size:1.2em; font-weight:500;} #login_box .field input {box-sizing:border-box; border:1px solid #f1f1f1; background:#f1f1f1; padding:15px; margin:3px 0;width:100%; letter-spacing:-0.75px; border-radius:3px;} #login_box .field input:focus {background:#fff; border-color:#333;} #login_box .field i {position:absolute; bottom: 33px; z-index:1;right:10px; color:#888;} #login_box .btns input {font-weight:700; display:inline-block; border-radius:3px; width:100%; height:60px; color:#fff; font-size:1.1em; border:1px solid #343a40; background:#343a40;} #login_box .btns input:hover {background:#000; border-color:#000;} #login_box .bottom {margin-top:15px; font-size:0.9em;} #login_box .bottom li {position:relative; display:inline-block; margin-right:20px;} #login_box .bottom li a {color:#979797; letter-spacing:-0.75px;} #login_box .bottom li strong {color:#222; font-weight:500;} #login_box .bottom li a:after {content:''; position:absolute; top:2px; right:-13px; bottom:0; width:1px; height:0.9em; margin:auto; background:#d1d1d2;} #login_box .bottom li:last-child {margin-right:0;} #login_box .bottom li:last-child a:after {display:none;} #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_box .type {margin:20px 0 0px 0; text-align:center; } #login_box .type li {display:inline-block; margin-right:15px; vertical-align:middle;} #login_box .type li:last-child {margin:0;} /* 소셜로그인 */ .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-family: 'GmarketSansMedium'; 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:768px) { .loginWrap {max-width:90%;} .loginWrap .tab li a {padding:12px 0;} .loginWrap #login_box {min-height:auto; padding:40px;} .loginWrap .sub_btn01 {line-height:52px; font-size:0.95em;} .loginWrap .txt i {width:80px; line-height:80px; } #login_box {max-width:90%;} #login_box .logo img {width:150px;} #login_box .field input {padding:12px 10px; font-size:0.95em;} #login_box .btns input {height:52px; line-height:52px; font-size:1em;} #login_box .bottom {margin-top:10px;} #login_box .toptxt {padding: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; max-width:600px;margin: auto; padding:60px 100px;background:#fff; border:1px solid #bbb;} .register_check_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_check_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_check_box ul li {padding:5px 0;} .register_check_box ul li input {width:100%; border: 1px solid #d0d0d0; background:#fff; padding:0 8px;line-height:46px; } .register_check_box .sub_btn02 {max-width:100%;width:100%;line-height:48px;} .register_check_box .input_info {padding-bottom: 40px; } .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:800px;margin:auto; padding:60px; padding-bottom:40px; background:#F4F6F8; border-radius:10px; } .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 {font-weight:700; position:relative; margin-bottom:10px; font-size:1.2em; color:#000; letter-spacing:-1px; text-indent:30px; } .register_box .tit2:after {position:absolute; content:''; display:block; top:0; left:-2px; width:24px; height:24px; border-radius:50%; background:url('./img/member_arrow01.png') no-repeat center 0 #26539c;} .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 .input_info {padding-bottom:20px; } .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 {overflow:hidden;} .register_box dl dt {float: left; font-weight:500; width: 155px; line-height:35px; color:#222;padding:8px 0 0 0;} .register_box dl dd {position:relative; margin-left: 155px; border-bottom: 0 solid #d0d0d0; padding:5px 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 #d0d0d0; background:#fff; padding:0 8px;line-height:38px; } .register_box dl dd select {border: 1px solid #d0d0d0;background:#fff; height:40px; } .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:820px) { .register_box {padding:5%;} .register_box .tit1 {font-size:1.8em; padding-bottom:30px;} .register_box .tit2 {font-size:1.1em;} .register_box dl dt {float:none; width:100%; line-height:42px;} .register_box dl dd {margin:0;} .member_btn01 { width:100%; } } @media screen and (max-width:560px) { .register_box #hp_code_btn {position:absolute;right:0px;} } /* 회원가입 완료 ==================================================================================== */ .register_finish_box01 {position:relative; text-align:center;margin:auto; padding:200px 40px 40px 40px;background:url('./img/member_img01.png') no-repeat center 40px #f9f9f9; border:1px solid #dfdfdf; display: flex;aling-item:center; justify-content:center; flex-direction: column;gap:25px;} .register_finish_box01 .txt01 {color:#557eda;font-size:1.8em;font-weight:500;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:#557eda ;} .register_finish_box01 .txt03 { line-height:1.7;padding:0 0 10px 0; } .register_finish_btn {position:relative;} @media screen and (max-width:600px) { .register_finish_box01 { padding:180px 20px 30px 20px; background-size:150px auto;} .register_finish_box01 .txt01 { font-size:1.5em; } } /* 회원가입 버튼-큰거 ==========*/ .member_btn01 {display:inline-block;font-size:1.2em;letter-spacing:-1px;background:#01315c; width:300px; padding:15px;color:#fff; border-radius:2px; border:0; } .member_btn01:hover {background:#111; 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:#111; color:#fff !important;} @media screen and (max-width:1200px) { .register_finish_btn .member_btn01, .register_finish_btn .member_btn02 {width:48%;} } @media screen and (max-width:600px) { .member_btn01, .member_btn02 { font-size:1.1em; width:96%;padding:12px; } .register_finish_btn .member_btn01, .register_finish_btn .member_btn02 {width:48%;} } /* 회원가입 STEP ==================================================================================== */ #register_stepbox02 { position:relative;overflow: hidden;display: block;margin-bottom:50px;text-align:center;display: flex; justify-content:center; gap:25px;} #register_stepbox02:after {position:absolute; content:''; display:block; left:22%; top:50%; width:55%;height:1px; border-top:1px dashed ;border-color:rgb(0,0,0,0.15); z-index:-1; } #register_stepbox02 li {position:relative;border:1px solid #194895; background:#fff; color:#194895;width:70px;height:70px; border-radius:40px;} #register_stepbox02 li.on {border:1px solid #194895;background:#194895;min-width:190px; text-align:left; } #register_stepbox02 li .no {font-family: 'Spoqa Han Sans Neo', 'sans-serif'; line-height:70px;font-size:0.9em;font-weight:700;} #register_stepbox02 li .cont {position:relative;padding:14px 0 0 80px;} #register_stepbox02 li .cont:after {position:absolute; content:''; display:block; left:65px; top:17px; width:1px; height:35px; background:rgb(255,255,255,0.2); } #register_stepbox02 li .step { font-size:0.7em;line-height:1.3;color:rgb(255,255,255,0.5);} #register_stepbox02 li .tit { color:#fff;font-size:0.95em; } #register_stepbox02 li .icon1:before {background:url('./img/step1.png') no-repeat 0 0; position:absolute;content:'';background-size:30px;left:26px; top:20px;width:35px;height:35px; opacity:0.6;} #register_stepbox02 li .icon2:before {background:url('./img/step2.png') no-repeat 0 0; position:absolute;content:'';background-size:30px;left:26px; top:20px;width:35px;height:35px; opacity:0.6;} #register_stepbox02 li .icon3:before {background:url('./img/step3.png') no-repeat 0 0; position:absolute;content:'';background-size:30px;left:26px; top:20px;width:35px;height:35px; opacity:0.6;} #register_stepbox02 li .icon4:before {background:url('./img/step4.png') no-repeat 0 0; position:absolute;content:'';background-size:30px;left:26px; top:20px;width:35px;height:35px; opacity:0.6;} @media screen and (max-width:560px) { #register_stepbox02 { margin-bottom:35px; gap:10px; } #register_stepbox02 li.on { min-width:160px; } } /* 마이페이지 스타일 ==================================================================================== */ .mypage_wrap {position:relative;margin:auto ; padding:40px 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; letter-spacing:-1px; padding:0 0 15px 0;} .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:#F4F6F8;border:1px solid #eaebeb; border-radius:20px; padding:35px 45px;transition:all 0.3s ease;} .mypage_btn_wrap .txt {color:#888;font-size:0.9em;} .mypage_btn_wrap .txt span {display:block;font-size:1.4em;font-weight:700;color:#222; padding:0 0 8px 0; letter-spacing:-1px;} .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, .mypage_btn_wrap .item03 {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 .item03 { background:url('./img/mypage_icon03.png') no-repeat center 50% #fff;} .mypage_btn_wrap .item01, .mypage_btn_wrap .item02, .mypage_btn_wrap .item03 { 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, .mypage_btn_wrap .item03 { right:25px; width:100px;height:100px;} .mypage_btn_wrap .item01, .mypage_btn_wrap .item02, .mypage_btn_wrap .item03 { background-size:100px auto;} } @media screen and (max-width:800px) { .mypage_topbox .infobox {padding:0 0 30px 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; } } /* 마이페이지 스타일 ==================================================================================== */