/* BASIC css start */ #loginWrap .loc-navi { margin-top: 40px; padding-bottom: 5px; border-bottom: 1px solid #e5e5e5; } #loginWrap .page-body { width: 700px; margin-top: 55px; margin-left: auto; margin-right: auto; border: 0px solid #e5e5e5; } #loginWrap .mlog-sign { width: 700px; min-height: 186px; _height; 206px; position: relative; } #loginWrap .mlog-sign .mlog, #loginWrap .mlog-sign .sign { float: left; } /* member login */ #loginWrap .mlog-sign .mlog { border-right: 1px solid #e5e5e5; position: relative; width: 350px; height: 180px; } #loginWrap .mlog-sign .frm-list { position: absolute; left: 0px; top: 0px; width: 350px; color: #3F3F3F; text-decoration:none; font-size:8pt;font-family: 'nanumgothic',돋움; } #loginWrap .mlog-sign .frm-list li, #loginWrap .mlog-sign .frm-list .id { height:32px; overflow:hidden;display:block;width:300px;margin:0 0 2px;border:1px solid #d9d9d9;border-radius:2px; line-height:32px;padding:0 0 0 8px;} #loginWrap .mlog-sign .frm-list input { width:240px;height:23px;padding:2px 0 2px 0;line-height:23px; border:1px solid #d9d9d9; float: right; border:none;} #loginWrap .mlog-sign .frm-list li label, #loginWrap .mlog-sign .frm-list li .txt-frm { float: left; } #loginWrap .mlog-sign .frm-list li { width: 100%; margin-bottom: 5px; } #loginWrap .mlog-sign .frm-list li label { width: 300px; padding-top: 2px;} #loginWrap .mlog-sign .frm-list li .txt-frm { width: 200px; height: 19px; padding: 2px 0 0 2px; border: 0; background-color: #eaeaea; } #loginWrap .mlog-sign .btn-mlog { position: absolute; left: 316px; top: 110px; }ㄹㅍ #loginWrap .mlog-sign .se-log { position: absolute; left: 0px; top: 80px; color: #3F3F3F; text-decoration:none; font-size:8pt;font-family: 'nanumgothic',돋움; } .buttonlogin { position:absolute; left: 0px; top: 110px; width:310px; margin:10px 0 0;} .buttonlogin span a {width:100%;line-height:14px;padding:20px 0;font-size:10px;text-align:center;margin:0;letter-spacing:2px;} .btnlogin { display:inline-block;border:1px solid #333;border-radius:2px;margin:0 2px;letter-spacing:-1px;font-size:11px;font-weight:bold;background:#5c5859 ;color:#fff; font-family: 'Roboto', 'arial'; font-weight:400; font-size:14px; } /*.btnlogin:hover{background:#5c5859 ;border:1px solid #5c5859 ;}*/ .buttonlogin1 { width:300px; margin:10px 0 0;} .buttonlogin1 span a {width:100%;line-height:14px;padding:10px 0;font-size:10px;text-align:center;margin:0;letter-spacing:2px;} .btnlogin1 { display:inline-block;border:1px solid #333;border-radius:2px;margin:0 2px;letter-spacing:-1px;font-size:11px;font-weight:bold;background:#6D6D6D;color:#fff; font-family: 'Roboto', 'arial'; font-weight:400; font-size:14px; } /*.btnlogin1:hover{background:#5c5859 ;border:1px solid #5c5859 ;}*/ /* sign */ #loginWrap .mlog-sign .sign { position:absolute; left: 370px; top: 0px; width: 300px; text-align: center; border: 0px solid #000; } #loginWrap .mlog-sign .sign .msg { text-align:left;padding:5px 0; line-height:14px; color: #3F3F3F; text-decoration:none; font-size:8pt; } #loginWrap .mlog-sign .sign .btns { width: 103px; margin-left: auto; margin-right: auto; } #loginWrap .mlog-sign .sign .btns a { display: block; margin-top: 8px; } /* simpleLogin */ #simpleLogin { text-align:left; margin-top:0px; } #simpleLogin .sns-login { font-size:0 } #simpleLogin .sns-login a { display:inline-block; *display:inline; vertical-align:top;position:relative;width:272px;margin-left:4px; *margin-left:9px } #simpleLogin .sns-login a:first-child { margin-left:0 } #simpleLogin .sns-login a img { width:272px } /* order shopping */ #loginWrap .order-sp { margin-top: 70px; zoom: 1; overflow: hidden; margin-bottom: 70px; } #loginWrap .order-sp h3, #loginWrap .order-sp .frm-wrap { float: left; } #loginWrap .order-sp h3 { width: 226px; padding-top: 10px; text-align: center; font-size: 0; line-height: 0; } #loginWrap .order-sp .frm-wrap p { text-align:left; padding:5px 0; line-height:14px; color: #3F3F3F; text-decoration:none; font-size:8pt; } #loginWrap .order-sp .frm { position: relative; width: 400px; height: 200px; margin-top: 10px; } #loginWrap .order-sp .frm .frm-list { position: absolute; left: 0px; top: 0px; width: 400px; } #loginWrap .order-sp .frm li, #loginWrap .order-sp .frm li label, #loginWrap .order-sp .frm li .txt-frm { float: left; } #loginWrap .order-sp .frm li { width: 100%; margin-bottom: 5px; } #loginWrap .order-sp .frm li label { width: 300px; padding-top: 2px;} #loginWrap .order-sp .frm .id { overflow:hidden;display:block; width:300px;margin:0 0 2px;border:1px solid #d9d9d9;border-radius:2px; line-height:32px;padding:0 0 0 8px; height:32px; } #loginWrap .order-sp .frm .frm-list .id span {border:none;} #loginWrap .order-sp .frm .frm-list input { width:240px;height:23px;padding:2px 0 2px 0;line-height:23px; border:1px solid #d9d9d9; float: right; border:none;} .buttonlogin2 { position: absolute; left: 0px; top: 70px; width:310px; margin:10px 0 0;} .buttonlogin2 span a {width:100%;line-height:14px;padding:20px 0;font-size:10px;text-align:center;margin:0;letter-spacing:2px;} .btnlogin2 { display:inline-block;border:1px solid #333;border-radius:2px;margin:0 2px;letter-spacing:-1px;font-size:11px;font-weight:bold;background:#333;color:#fff; font-family: 'Roboto', 'arial'; font-weight:400; font-size:14px; } /*.btnlogin2:hover{background:#000;border:1px solid #000;}*/ /*디자인위브*/ #contentWrap { min-width: 932px; } #content { width: 932px; margin: 0 auto; float: none; } #overlay_layer { display: none; } .titbox { width: 100%; height: auto; line-height: 1; background-color: #fff; border: 0px solid #EFEFEF; margin-top: 60px; margin-bottom: 0px; } .titbox .title { width: auto; text-align: center; height: auto; border-bottom: none; } .titbox .title .name { font-weight: 600; font-size: 32px; line-height: 32px; text-align: center; letter-spacing: 0.03em; color: #424242; } /*left*/ #loginWrap .page-body { width: 100%; margin: 0 auto; border: none; padding: 60px 0 0 0; } #loginWrap .mlog-sign { width: 100%; min-height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 160px; } #loginWrap .mlog-sign .mlog { border-right: none; position: relative; width: 100%; height: auto; } #loginWrap .mlog-sign .mlog::after { display: inline-block; content: ''; width: 1px; height: calc(100% - 15px); position: absolute; right: -80px; background: #C9C9C9; top: 0; } #loginWrap .mlog-sign .mlog .title { text-align: left; padding: 0 0 20px 0; } #loginWrap .mlog-sign .mlog .title h2 { font-weight: 600; font-size: 20px; line-height: 20px; letter-spacing: -0.03em; color: #424242; } #loginWrap .mlog-sign .mlog .title p { font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.03em; color: #7B7672; padding: 12px 0 0 0; } #loginWrap .mlog-sign .frm-list { position: relative; left: auto; top: auto; width: 100%; } #loginWrap .mlog-sign .frm-list li { width: 100%; height: 55px; } #loginWrap .mlog-sign .frm-list li, #loginWrap .mlog-sign .frm-list .id { height: 55px; overflow: hidden; display: block; width: 100%; margin: 0 0 8px 0; border: 1px solid #C9C9C9; border-radius: 0; line-height: 55px; padding: 0 0 0 0; text-indent: 15px; box-sizing: border-box;} #loginWrap .mlog-sign .frm-list .pwd { height: 55px; overflow: hidden; display: block; width: 100%; margin: 0 0 0 0; border: 1px solid #C9C9C9; border-radius: 0; line-height: 55px; text-indent: 15px; padding: 0 0 0 0; box-sizing: border-box;} #loginWrap .mlog-sign .frm-list li label { width: 100%; height: 100%; padding-top: 0; } #loginWrap .mlog-sign .frm-list li label span { font-weight: 400; font-size: 14px; line-height: 55px; letter-spacing: -0.03em; color: #C9C9C9; } #loginWrap .mlog-sign .frm-list input { text-indent: 15px; width: 100%; height: 55px; padding: 0 0 0 0; line-height: 55px; border: none; float: none; } #loginWrap .mlog-sign .se-log { position: relative; left: auto; top: auto; text-decoration: none; color: #424242; font-size: 14px; line-height: 14px; letter-spacing: -0.03em; padding: 5px 0 0 0; } .buttonlogin { position: relative; left: auto; top: auto; width: 100%; margin: 0 0 0 0; padding: 30px 0 0; } .buttonlogin span a {box-sizing: border-box; width: 100%; line-height: 55px; padding: 0 0 0 0; text-align: center; margin: 0; height: 55px; background: #7B7672; border: none; border-radius: 0; font-weight: 400; font-size: 16px; letter-spacing: 0.03em; color: #FFFFFF; } #simpleLogin { text-align: left; margin-top: 0px; width: 386px; } #simpleLogin .sns-login { font-size: 0; } #simpleLogin .sns-login a { display:block; width: 100% !important; height: 55px; box-sizing: border-box; margin:0 0 10px; font-weight: 400; font-size: 14px; line-height: 55px; letter-spacing: -0.03em; transition: all ease 0.3s; } #simpleLogin .sns-login a.btnlogin {transition: all ease 0.3s;} #simpleLogin .sns-login a.btnlogin:hover { border: none; } #simpleLogin .sns-login a img { width: 100% !important; height: 100% !important; opacity: 0; position: absolute; } #simpleLogin .sns-login a.sns_kakao { background: #FFE812; color: #3B1D1D; } #simpleLogin .sns-login a.sns_kakao b { background: url(/design/happyprinc/wib/img/icon-kakao.svg) no-repeat right; width: 20px; height: 19px; display: inline-block; vertical-align: middle; margin-right: 21px; padding-left: 17px; } #simpleLogin .sns-login a.sns_naver { border: 1px solid #2BB500; color: #2BB500; } #simpleLogin .sns-login a.sns_naver b { background: url(/design/happyprinc/wib/img/icon-naver.svg) no-repeat right center; width: 20px; height: 18px; vertical-align: middle; display: inline-block; padding: 0 0 0 17px; margin-right: 21px; } #simpleLogin .sns-login a.sns_apple { border: 1px solid #000; color: #000; } #simpleLogin .sns-login a.sns_apple b { background: url(/design/happyprinc/wib/img/icon-apple.svg) no-repeat right center; background-size:20px auto; width: 20px; height: 18px; vertical-align: middle; display: inline-block; padding: 0 0 0 17px; margin-right: 21px; } /*right*/ #loginWrap .mlog-sign .sign { position: relative; left: auto; top: auto; width: 100%; text-align: left; border: none; } #loginWrap .mlog-sign .sign .title { text-align: left; padding: 0 0 20px 0; } #loginWrap .mlog-sign .sign .title h2 { font-weight: 600; font-size: 20px; line-height: 20px; letter-spacing: -0.03em; color: #424242; } #loginWrap .mlog-sign .sign .title p { font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.03em; color: #7B7672; padding: 12px 0 0 0; } .buttonlogin1 { width: 100%; margin: 0 0 0 0; height: 55px; } .buttonlogin1.first {padding-bottom: 53px;} .buttonlogin1 span a { width: 100%; line-height: 55px; padding: 0 0 0 0; text-align: center; border: 1px solid #424242; background: #FFFFFF; color: #424242; letter-spacing: 0.03em; font-weight: 500; font-size: 16px; transition: all 0.3s; border-radius: 0; margin: 0 0 0 0; } /*.buttonlogin1:hover a { color: #FFF; background: #7B7672; }*/ /*checkbox*/ input.MS_security_checkbox { appearance: none; display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: url(/design/happyprinc/wib/img/check-off.svg) no-repeat center; vertical-align: middle; background-size: 100% !important;} input.MS_security_checkbox:checked { appearance: none; display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: url(/design/happyprinc/wib/img/check-on.svg) no-repeat center; transition: all 0.3s;} /*비밀번호 재확인*/ #reconfirmPasswd { padding: 60px 0 0 0; border: none; font-size: 12px; width: 386px; margin: 0 auto; } #reconfirmPasswd h2 { text-align: left; font-weight: 600; font-size: 20px; line-height: 20px; letter-spacing: -0.03em; color: #424242; } #reconfirmPasswd h2::before {content: '비밀번호 재확인'; display: inline-block;} #reconfirmPasswd h2 img {display: none;} /* 비회원주문조회 */ .no_member h2 { font-weight: 600; font-size: 20px; line-height: 20px; letter-spacing: -0.03em; color: #424242; padding: 0 0 12px 0; } #loginWrap .mlog-sign .sign:first-child {padding-bottom: 60px;} #loginWrap .mlog-sign .sign .msg { text-align: left; padding: 0 0 20px 0; text-decoration: none; font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.03em; color: #7B7672; } #loginWrap .order-sp .frm-wrap > p { text-align: left; padding: 0 0 20px 0; text-decoration: none; font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.03em; color: #7B7672; } h4.title { text-align: left; padding: 0 0 20px 0; font-weight: 600; font-size: 20px; line-height: 20px; letter-spacing: -0.03em; color: #424242; } #loginWrap .order-sp { margin-top: 90px; zoom: 1; overflow: hidden; margin-bottom: 0; } #loginWrap .order-sp .frm { width: 100%; margin-top: 0; } #loginWrap .order-sp .frm .id { z-index: 2;position: relative; display: block; width: 100%; margin: 0 0 8px; border: 1px solid #d9d9d9; border-radius: 0; line-height: 55px; padding: 0 0 0 0; height: 55px; box-sizing: border-box; } #loginWrap .order-sp .frm li label { width: 100%; padding-top: 0; top: 0; } #loginWrap .order-sp .frm-wrap { width: 100%; } #loginWrap .order-sp .frm-wrap > p { text-align: left; padding: 0 0 20px 0; text-decoration: none; font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.03em; color: #7B7672; } #loginWrap .order-sp .frm .frm-list { position: relative; left: auto; top: auto; width: 100%; } #loginWrap .order-sp .frm .frm-list .id span { border: none; position: absolute; display: block; height: 55px; width: 100%; } #loginWrap .order-sp .frm .frm-list input { width: 100%; height: 55px; padding: 0 0 0 0; line-height: 55px; border: none; float: right; margin: 0; box-sizing: border-box; position: absolute; left: 0; top: 0; text-indent: 15px; display: block; } #loginWrap .order-sp .frm .frm-list input::placeholder { font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #C9C9C9; } #loginWrap .order-sp .frm-wrap p.buttonlogin2 { position: relative; left: auto; top: auto; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } #loginWrap .order-sp .frm-wrap p.buttonlogin2 span a { width: 100%; line-height: 55px; padding: 0 0 0 0; text-align: center; margin: 20px 0 0; font-weight: 400; font-size: 16px; letter-spacing: 0.03em; color: #FFFFFF; box-sizing: border-box; border: 1px solid #7B7672; background: #7B7672; transition: all 0.3s; } /* BASIC css end */