/* BASIC css start */
#login .login #keyboard {margin-top:20px; padding:0 15px;}
#login .tab {padding:0 15px; margin-top:30px;}
#login .tab a {width:50%; height:34px; border:1px solid #bdbdbd; border-top:3px solid #bdbdbd; border-bottom:1px solid #ab3e41; display: inline-block; text-align: center; line-height: 30px; box-sizing: border-box; background-color:#fbfbfb; }
#login .tab a.act {color:#ab3e41; background-color:#fff; border:1px solid #ab3e41;  border-top:3px solid #ab3e41; border-bottom:0px none; font-weight:bold;}
#login .login .loginInput {margin-top: 10px;}
#login .nonmember { display:none; }
#login .nonmember fieldset { padding: 0 15px;} 

#inquiryOrder { display:none; }
#inquiryOrder .txt { margin:15px 15px 0; padding:0; }
#inquiryOrder .frm { overflow:hidden; width:200px; margin:35px auto 0; }
#inquiryOrder .frm dt, 
#inquiryOrder .frm dd { float:left; }
#inquiryOrder .frm dt { width:60px; margin-top:5px; line-height:32px; font-weight:bold; letter-spacing:-1px; }
#inquiryOrder .frm dd { width:140px; }
#inquiryOrder .frm input[type=text] { width:100%; height:32px; line-height:32px; margin-top:5px; padding:0 5px; border:1px solid #c6c6c6; background:#fbfbfb; border-radius:0; }
#inquiryOrder .btns { margin:40px 10px 20px; }
#inquiryOrder .btns a { margin-top:10px; }


/*checkbox*/
input[type=checkbox] { appearance: none; display: inline-block; width: 15px; height: 15px; margin-right: 10px; background: url(/design/happyprinc/wib/img/check-off.svg) no-repeat center !important; vertical-align: middle; background-size: 100% !important; } 
input[type=checkbox]:checked { width: 15px; height: 15px; background: url(/design/happyprinc/wib/img/check-on.svg) no-repeat center !important; transition: all 0.3s; } 


/*디자인위브모바일 - 회원/비회원탭*/
.h_title { border-top: none; border-bottom: none; padding: 40px 0; text-align: center; } 
.h_title h3 { font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: 0.03em; color: #424242; } 
.login #keyboard { display: none; } 
.login .loginInput { margin-top: 0 !important; } 
.login .loginInput input { width: 100%; display: block; margin-bottom: 8px; height: 50px; line-height: 50px; box-sizing: border-box; padding: 0 0 0 0; text-indent: 15px; font-weight: 400; font-size: 14px; color: #424242; border: 1px solid #c9c9c9; } 
.login .loginInput input:last-child { margin-bottom: 12px; } 
.login .loginInput input::placeholder { font-weight: 400; font-size: 14px; line-height: 50px; letter-spacing: -0.03em; color: #C9C9C9; } 
.login .loginCheck { margin: 0 0 0 0; } 
.login .loginMiddle .btn_Red { font-size: 13px; margin: 40px 0 9px; } 
.login .loginMiddle .btn_White { font-size: 13px; } 
.login .loginMiddle .btn_line { padding: 20px 0 0; display: block; text-align: center; font-weight: 500; font-size: 13px; line-height: 13px; letter-spacing: -0.03em; text-decoration-line: underline; color: #424242; } 
.login .loginCheck label { font-weight: 400; font-size: 13px; line-height: 13px; letter-spacing: -0.03em; color: #424242; } 
.login .loginCheck label:last-child { float: right; margin-right: 0; } 
.login .loginCheck label:last-child::after { content: ''; clear: both; display: block; } 
.login .loginBottom {display: none; }
.btn_Red { width: 100%; height: 50px; line-height: 50px; background-color: #7B7672; color: #fff; text-align: center; display: block; border: 1px solid #7B7672; box-sizing: border-box; vertical-align: middle; font-weight: 400; font-size: 13px; letter-spacing: -0.03em; } 
.btn_White { width: 100%; height: 50px; line-height: 50px; background-color: #fff; text-align: center; display: block; border: 1px solid #424242; box-sizing: border-box; vertical-align: middle; color: #7B7672; font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: -0.03em; } 

#login .tab { padding: 0 15px 0; margin: 0 0 30px; border-bottom: 1px solid #C9C9C9; } 
#login .tab a { position: relative; width: 50%; height: 50px; border: none; border-top: none; border-bottom: none; display: inline-block; text-align: center; line-height: 50px; box-sizing: border-box; background-color: transparent; font-weight: 400; font-size: 13px; letter-spacing: -0.03em; color: #C9C9C9; } 
#login .tab a.act { color: #424242; background: none; border: none; border-top: none; border-bottom: 0px none; font-weight: 500; } 
#login .tab a::before { content: ""; display: block; width: 0%; height: 2px; background-color: #E8A58F; position: absolute; bottom: -1px; right: 0; transition: all 0.3s; } 
#login .tab a.act::before { width: 100%; left: 0; right: auto; } 

.sns-login { position: relative; margin: 0 0 0 0; padding: 40px 0 0; } 
.sns-login .sns-title { display: none; } 
.sns-login ul { display: grid; grid-row-gap: 8px; } 
.sns-login ul li { position: relative; margin-top: 0; padding-left: 0; height: 50px; line-height: 50px; border: none; border-radius: 0; list-style: none; text-align: center; } 
.sns-login ul li span { position: absolute; top: 0; left: 0; width: 50px; height: 50px; } 
.sns-login ul li a { font-weight: 400; font-size: 14px; letter-spacing: -0.03em; padding: 0 0 0 0; border:0; }
.sns-login ul li.kakaotalk { background: #FFE812; } 
.sns-login ul li.kakaotalk a { color: #3B1D1D; } 
.sns-login ul li.kakaotalk span { background: url(/design/happyprinc/wib/img/m-kakao.svg) no-repeat center;}
.sns-login ul li.naver { border: 1px solid #2BB500; } 
.sns-login ul li.naver a { color: #2BB500; } 
.sns-login ul li.naver span { background: url(/design/happyprinc/wib/img/m-naver.svg) no-repeat center; }
.sns-login ul li.apple { border: 1px solid #000; }
.sns-login ul li.apple a { color: #000; } 
.sns-login ul li.apple span { background: url(/design/happyprinc/wib/img/icon-apple.svg) no-repeat center; background-size:20px auto; }


/* BASIC css end */