/* 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-bottom: 100px; 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: 340px; height: 180px; } 

#loginWrap .mlog-sign .frm-list { position: absolute; left: 0px; top: 0px; width: 340px; 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 .pwd { 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',돋움; } 
#loginWrap .mlog-sign .se-log label{cursor:pointer}
.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; } */


.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; } 


/* 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; font-family: 'nanumgothic',돋움; } 
#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 } 

/*디자인위브*/
#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: 15px 0 0 0; } 
.buttonlogin { position: relative; left: auto; top: auto; width: 100%; margin: 0 0 0 0; padding: 30px 0 15px 0; } 
.buttonlogin span a { 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: 500; 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; margin:0 0 10px; box-sizing: border-box; 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; } 
#loginWrap .mlog-sign .sign .msg { display: none; } 
.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;}
/* BASIC css end */