@charset "utf-8";

.body-container { min-height: -webkit-calc(100% - 265px); min-height: calc(100% - 265px); overflow: hidden; background: url(../../../img/sub/user/bg.png); background-repeat: no-repeat; -webkit-background-size: auto auto; background-size: 100%; background-position: top;}
.user-content-wrap { border-top: 1px solid #dee3eb; }

.user-wrap { position: relative; width: 400px; margin: 0 auto; }
.user-wrap .title { text-align: center; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #dee3eb;}
.user-wrap .title h1 { position: relative; margin-bottom: 20px; display: inline-block; font-size: 3rem; }
.user-wrap .title h1:after { content: ''; position: absolute; bottom: 3px; left: -10px; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); height: 10px; border-radius: 10px; background: rgba(0,107,214,0.2); -webkit-transition: width .3s; -o-transition: width .3s; transition: width .3s; }
.user-wrap .title p { font-size: 1.5rem; line-height: 1.5; word-break: keep-all;}
.user-wrap .user-input p.tit { font-size: 1.6rem; margin-bottom: 7px;}
.user-wrap .user-input input { margin-bottom: 25px; }

.user-wrap .btn-wrap button{ min-width: 100%; height: 35px; }
.user-wrap .sns-btn { margin-top: 30px;  }
.user-wrap .sns-btn button { margin-bottom: 10px; margin-top: 0; position: relative;}
.user-wrap .sns-btn button:after { content: ''; position: absolute; top: 0; left: 43px; width: 1px; height: 100%; background: rgba(255,255,255,.3); }
.user-wrap .sns-btn button img { width: 23px; height: 23px; position: absolute; top: 8px; left: 10px;  }
.user-wrap .sns-btn button.naver { background: #31B24A }
.user-wrap .sns-btn button.naver:hover { background: #26953C }
.user-wrap .sns-btn button.kakao { background: #f9c300; }
.user-wrap .sns-btn button.kakao:hover { background: #E0AF00; }
.user-wrap .sns-btn button.google { background: #E84437 }
.user-wrap .sns-btn button.google:hover { background: #C53B30 }

.user-wrap ul.bt { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #dee3eb; }
.user-wrap ul.bt li { display: inline-block; margin: 0 5px; }
.user-wrap ul.bt li a {color: #9a9a9a;}
.user-wrap ul.bt li:hover { text-decoration: underline; }


@media all and (max-width: 500px) { 
	.user-wrap { width: 85%; }
	.user-wrap .title p { font-size: 1.4rem; }
}

.user-wrap.join-tab-tit .title {border-bottom:0; margin-bottom:0}