@charset "utf-8";





/************************************************************************
* common *
************************************************************************/
.membBox{max-width:960px;margin:0 auto;}
.membBox>div{border:solid 1px #ddd;padding:30px;border-radius:20px;}

.membBox input{width:100%;margin-bottom:8px;border:solid 1px #ddd;line-height:50px;height:50px;display:inline-block;border-radius:10px;font-size:16px;text-align:center;cursor:pointer;}
.membBox input.black{background:#000;color:#fff;text-align:center;border-color:#000;}
.membBox input.w70{width:60%;}
.membBox input.w30{width:40%;}

.membBox input[type=checkbox]{width:15px;height:15px;margin-bottom:0;border:solid 1px #ddd;}

.membBox textarea{width:100%;min-height:200px;padding:16px;margin:8px 0;border:solid 1px #ddd;line-height:140%;display:inline-block;border-radius:10px;}

.membBox select{width:25%;padding:0 16px;margin-bottom:8px;border:solid 1px #ddd;line-height:50px;height:50px;display:inline-block;border-radius:10px;font-size:16px;background:url(/ebom/app/design/skin/board/img/select_arrow.png) no-repeat right 20px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.membBox select::-ms-expand{display:none;}


.membBox .mt40{margin-top:40px;}
.membBox .txtco{font-size:16px;margin-bottom:10px;padding-bottom:15px;border-bottom:solid 2px #000;word-wrap:break-word;display:block;word-break:keep-all;}
.membBox .txtco b{font-size:20px;}
.membBox .txtcon{font-size:16px;word-wrap:break-word;display:block;word-break:keep-all;}

@media screen and (max-width:1100px){
.membBox input,
.membBox select{font-size:15px;line-height:48px;height:48px;}
.membBox select{padding:0 14px;background-position:right 14px center;}

.membBox .txtco{font-size:15px;margin-bottom:15px;padding-bottom:10px;}
.membBox .txtco b{font-size:18px;}
.membBox .txtcon{font-size:15px;}
}
@media screen and (max-width:767px){
.membBox input,
.membBox select{font-size:14px;line-height:46px;height:46px;border-radius:5px;}
.membBox select{padding:0 12px;background-position:right 12px center;}

.membBox .txtco{font-size:14px;margin-bottom:10px;padding-bottom:10px;}
.membBox .txtco b{font-size:16px;}
.membBox .txtcon{font-size:14px;}
}
@media screen and (max-width:500px){
.membBox>div{padding:20px;border-radius:10px;}

.membBox input,
.membBox select{line-height:44px;height:44px;}
.membBox select{padding:0 10px;background-position:right 10px center;}
}
@media screen and (max-width:420px){
.membBox>div{padding:15px;}
.membBox input,
.membBox select{line-height:42px;height:42px;}
.membBox select{padding:0 8px;background-position:right 8px center;}
}
@media screen and (max-width:360px){
.membBox>div{padding:10px;}
}





/************************************************************************
* login *
************************************************************************/
.Login-box{width:50%;max-width:640px;margin:100px auto;}
.Login-box .Lo-box{margin-top:40px;padding-top:40px;border-top:solid 1px #ddd;}
.Login-box .Lo-box div{width:100%;}
.Login-box .Lo-box input[type=text],
.Login-box .Lo-box input[type=password]{text-align:left;padding:0 16px;}
.Login-box .Lo-box input[type=submit]{width:100%;padding:20px 0;cursor:pointer;line-height:0 !important;}

.Login-box .but-box{margin-top:10px;display:flex;align-items:center;justify-content:space-between;}
.Login-box .but-box input{width:calc(33.3333% - 4px);}


.Login-box .Lo-box.nonMember span{display:flex;align-items:center;justify-content:space-between;}

.Login-box .Lo-box.nonMember span select,
.Login-box .Lo-box.nonMember span input[type=text]{width:30% !important;}


@media screen and (max-width:1280px){
.Login-box{width:100%;}
}
@media screen and (max-width:1100px){
.Login-box .Lo-box input[type=text],
.Login-box .Lo-box input[type=password]{padding:0 14px;}
}
@media screen and (max-width:960px){
.Login-box{margin:80px auto;}
.Login-box .Lo-box{margin-top:30px;padding-top:30px;}
}
@media screen and (max-width:767px){
.Login-box .Lo-box input[type=text],
.Login-box .Lo-box input[type=password]{padding:0 12px;}
.Login-box .Lo-box input[type=submit]{padding:15px 0;}
}
@media screen and (max-width:640px){
.Login-box{margin:60px auto;}
.Login-box .Lo-box{margin-top:20px;padding-top:20px;}
}
@media screen and (max-width:500px){
.Login-box .Lo-box input[type=text],
.Login-box .Lo-box input[type=password]{padding:0 10px;}
}
@media screen and (max-width:420px){
.Login-box{margin:40px auto;}
.Login-box .Lo-box input[type=text],
.Login-box .Lo-box input[type=password]{padding:0 8px;}
}
@media screen and (max-width:360px){
.Login-box{margin:20px auto;}
}




/************************************************************************
* join *
************************************************************************/
.membBox.reg-box>div{padding-top:20px;}
.membBox.reg-box ul li{display:flex;align-items:center;padding:10px 0;border-bottom:solid 1px #ddd;}
.membBox.reg-box ul li font{width:120px;display:block;}
.membBox.reg-box ul li b{width:calc(100% - 120px);display:block;}
.membBox.reg-box ul li b input{margin-bottom:0 !important;text-align:left;padding:0 16px;}
.membBox.reg-box ul li.email input{width:30% !important;}
.membBox.reg-box ul li.email select{width:20% !important;}
.membBox.reg-box ul li b select{margin-bottom:0 !important;}
.membBox.reg-box ul li.w70{width:100% !important;}
.membBox.reg-box ul li b input.w70{width:calc(100% - 160px) !important;margin-right:10px;}
.membBox.reg-box ul li b input[type=button]{width:150px !important;text-align:center;background:#000;color:#fff;text-align:center;border-color:#000;}


.membBox.reg-box ul li b .datePicker{background:url(/img/calendar.png) no-repeat right 20px center;background-size:24px auto;}

.membBox.reg-box ul li b.wi3>*{width:30% !important;}

.membBox.reg-box .joinSList .txtcon input[type=checkbox]{margin-right:6px;}

@media screen and (max-width:1100px){
.membBox.reg-box ul li b input{padding:0 14px;}
.membBox.reg-box ul li b input.w70{width:calc(100% - 130px) !important;}
.membBox.reg-box ul li b input[type=button]{width:120px !important;}
}
@media screen and (max-width:960px){
.membBox.reg-box>div{padding:20px;padding-top:10px;}
.membBox.reg-box ul li b input{padding:0 14px;}
.membBox.reg-box ul li b input.w70{width:calc(100% - 108px) !important;margin-right:8px;}
.membBox.reg-box ul li b input[type=button]{width:100px !important;}
}
@media screen and (max-width:767px){
.membBox.reg-box ul li{flex-wrap:wrap;}
.membBox.reg-box ul li font{width:100%;}
.membBox.reg-box ul li b{width:100%;margin-top:5px;}

.membBox.reg-box ul li.email input{width:32% !important;}
.membBox.reg-box ul li.email select{width:25% !important;}
.membBox.reg-box ul li b input{padding:0 12px;}
.membBox.reg-box ul li b input.w70{width:calc(100% - 96px) !important;margin-right:6px;}
.membBox.reg-box ul li b input[type=button]{width:90px !important;}
}
@media screen and (max-width:560px){
.membBox.reg-box>div{padding:15px;padding-top:8px;}
.membBox.reg-box ul li b input.w70{width:calc(100% - 84px) !important;margin-right:4px;}
.membBox.reg-box ul li b input[type=button]{width:80px !important;padding:0;}

.membBox.reg-box ul li b select{width:100% !important;}
.membBox.reg-box ul li b.wi3>*{width:90% !important;margin-bottom:8px !important;}
.membBox.reg-box ul li b.wi3>*:last-child{margin-bottom:0 !important;}
.membBox.reg-box ul li b.wi3.last>*{width:100% !important;}
}
@media screen and (max-width:500px){
.membBox.reg-box ul li b input{padding:0 10px;}
}
@media screen and (max-width:420px){
.membBox.reg-box ul li b input{padding:0 8px;}
}







/************************************************************************
* edit *
************************************************************************/
.membBox.mod-box>div{padding-top:20px;padding-left:10px !important;padding-right:10px !important;border-radius:10px;}
.membBox.mod-box .disF>div{width:calc(50% - 40px);margin:0 20px;}
.membBox.mod-box ul li{display:block;}
.membBox.mod-box ul li input{margin-bottom:0 !important;text-align:left;padding:0 16px;}
.membBox.mod-box ul li select{margin-bottom:0 !important;}

.membBox.mod-box input[type=submit]{line-height:65px;height:65px;}

@media screen and (max-width:1280px){
.membBox.mod-box>div{padding-top:10px;padding-left:5px !important;padding-right:5px !important;border-radius:5px;}
.membBox.mod-box .disF>div{width:calc(50% - 30px);margin:0 15px;}
}
@media screen and (max-width:1100px){
.membBox.mod-box>div{padding:35px !important;}
.membBox.mod-box .disF>div{width:100%;margin:0 0 30px 0;}
.membBox.mod-box ul li input{padding:0 14px;}
}
@media screen and (max-width:767px){
.membBox.mod-box>div{padding:30px !important;}
.membBox.mod-box ul li input{padding:0 12px;}
}
@media screen and (max-width:640px){
.membBox.mod-box>div{padding:25px !important;}
}}
@media screen and (max-width:560px){
.membBox.mod-box ul li font{width:100%;}
.membBox.mod-box ul li b{width:100%;margin-top:5px;}
}
@media screen and (max-width:500px){
.membBox.mod-box>div{padding:20px !important;}
.membBox.mod-box ul li input{padding:0 10px;}
}
@media screen and (max-width:420px){
.membBox.mod-box>div{padding:15px !important;}
.membBox.mod-box ul li input{padding:0 8px;}
}




.bloggerBox i{margin-right:15px;}

@media screen and (max-width:640px){
.bloggerBox i{width:calc(100%/3.5);margin-right:0;display:inline-block;}
}
@media screen and (max-width:370px){
.bloggerBox i{width:calc(100%/2.5);}
}






/************************************************************************
* id-pw-search *
************************************************************************/
.reg-box.membBox.idpwSearch{max-width:640px;}
.idpwSearch input{width:100%;text-align:left;padding:0 16px;}
@media screen and (max-width:960px){
.reg-box.membBox.idpwSearch{margin:80px auto;}
}
@media screen and (max-width:640px){
.reg-box.membBox.idpwSearch{margin:60px auto;}
}
@media screen and (max-width:420px){
.reg-box.membBox.idpwSearch{margin:40px auto;}
}
@media screen and (max-width:360px){
.reg-box.membBox.idpwSearch{margin:20px auto;}
}




.drawBt{width:120px !important;height:46px !important;line-height:46px !important;margin-bottom:0 !important;display:table;background:#000;color:#fff;border-radius:5px;}
@media screen and (max-width:767px){
.drawBt{width:90px !important;height:36px !important;line-height:36px !important;border-radius:5px;}
}










/************************************************************************
* sns login *
************************************************************************/
.login_social_list > li{height:54px;margin-bottom:10px;}
.login_social_list > li:last-child{margin-bottom:0 !important;}
.login_social_list > li > a{display:block;width:100%;height:100%;padding-left:111px;position:relative;font-size:16px;line-height:51px;font-weight:400;letter-spacing:-0.025em;color:#fff;background:#f1f1f1;border-radius:5px;-webkit-transition:background 300ms, border 300ms;transition:background 300ms, border 300ms;}
.login_social_list > li > a:before{display:block;width:76px;height:100%;position:absolute;left:0;top:0;font-size:24px;font-weight:normal;text-align:center;color:#fff;}
.login_social_list > li > a:after{content:'';display:block;width:1px;height:20px;position:absolute;left:75px;top:50%;margin-top:-10px;background:#fff;background:rgba(255, 255, 255, .5);}

.login_social_list > li.naver > a{background:url(/ebom/app/design/skin/member/basic/image/login_naver.png) no-repeat 15px center #1ec700;}

.login_social_list > li.kakao > a{background:url(/ebom/app/design/skin/member/basic/image/login_kakao.png) no-repeat 15px center #ffde00;color:#381e1e; }
.login_social_list > li.kakao > a:after{background:#381e1e;}

.login_social_list > li.google_lo > a{border-color:#ddd;background:url(/ebom/app/design/skin/member/basic/image/login_google.png) no-repeat 15px center #fff;}

@media screen and (max-width:767px){
.login_social_list > li{height:50px;margin-bottom:8px;}
.login_social_list > li > a{padding-left:80px;font-size:15px;line-height:48px;}
.login_social_list > li > a:after{left:60px;}

.login_social_list > li.naver > a,
.login_social_list > li.kakao > a{background-position:15px center;background-size:28px auto;}
}
@media screen and (max-width:560px){
.login_social_list > li{margin-bottom:5px;}
.login_social_list > li > a{padding-left:70px;font-size:14px;}
.login_social_list > li > a:after{left:55px;}

.login_social_list > li.naver > a,
.login_social_list > li.kakao > a{background-position:15px center;background-size:28px auto;}
}