@charset "utf-8";

input[type="text"].text-input { margin-bottom: 0; }
.user-wrap { width: 550px; }
.user-wrap .user-input { margin-top: 35px; }
.user-wrap .user-input input { width: 325px; }
.user-wrap .user-input.pw p.tit { margin-top: 25px; }
.user-wrap .user-input.pw input[type="password"].text-input { display: block; margin-bottom: 10px; }
.user-wrap .user-input.birth input[type="text"].text-input.n01 { width: 150px; }
.user-wrap .user-input.birth input[type="text"].text-input.n02 { width: 30px; }
.user-wrap .user-input.birth .br-hide { letter-spacing: 5px; font-size: 1.7rem; color: #777; position: relative; top: 5px; margin-left: 5px;}
.user-wrap .user-input.area .ar { float: left; font-size: 15px; margin-right: 5px; line-height: 35px; }
.user-wrap .user-input.area .select-box select { border-radius: 5px; }
.user-wrap .user-input.phone .btn-wrap button { min-width: 65px; }
.user-wrap .user-input .text-btn-input .text-input-wrap input[type="text"].text-input.float { float: left; margin-bottom: 5px;}
.check-input-wrap .check-input p.dsc { color: #999; }

.terms-layer-pop .layer-box .body { white-space: pre-wrap; font-size: 1.3rem; line-height: 1.5; color: #444;}
.terms-wrap { padding: 15px; border-radius: 10px; background: #f8f8f8; margin-top: 20px; }
.terms-wrap .check-input-wrap { position: relative; }
.terms-wrap .check-input-wrap .check-input .more { position: absolute; top: 11px; right: 0; text-decoration: underline; color: #999; }

.fine-id-wrap .fine-id { padding: 50px 15px; background: #f4f4f4; text-align: center; }

@media all and (max-width: 768px) {
	.user-wrap { width: 100%; }
	.user-wrap .user-input input { width: 100%; }
	.user-wrap .user-input.id input { width: 80%; }
	.user-wrap .user-input.id .btn-wrap { width: 20%; }
	.text-btn-input .phone-wrap input[type="text"].text-input.phone { width: -webkit-calc(33% - 28px); width: calc(33% - 28px); }
}

/* 알빈시민/마을공동체 회원가입 탭 */
.left-join, .right-join {height: 260px;width: calc(50% - 30px);float: left;border: 1px solid #dee3eb;border-radius: 16px;overflow: hidden;position: relative;transition: box-shadow .25s ease; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0); margin-right:30px; cursor:pointer;}
.left-join:hover, .right-join:hover { box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.15); }

.right-join {margin-right:0}

.left-join .text-wrap, .right-join .text-wrap {position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%; padding: 40px; }
.left-join .text-wrap p, .right-join .text-wrap p {font-size: 1.6rem;font-weight: 300;display: block;}
.left-join .text-wrap h1, .right-join .text-wrap h1 {font-size: 2.3rem;font-weight: bold; margin-bottom: 25px;line-height: 23px;}
.left-join .text-wrap .detail-view-btn, .right-join .text-wrap .detail-view-btn {display: block; margin-top:50px;width: 180px;height: 45px;border-radius: 23px; border: 1px solid #e5e8ee;line-height: 45px;font-size: 1.4rem;color: #999; transition: border-color .25s ease, background .25s ease, color .25s ease;text-align: center;padding-right: 20px;position: relative;}
.left-join .text-wrap .detail-view-btn:after, .right-join .text-wrap .detail-view-btn:after {position: absolute;content: '';width: 18px;height: 18px;background: url(../../../img/common/arrow_next.svg); background-size: 18px;opacity: .3; right: 35px;top: 13px; transition: background .25s ease,opacity .25s ease;
}
.left-join:hover .text-wrap .detail-view-btn:after, .right-join:hover .text-wrap .detail-view-btn:after {position: absolute; content: ''; width: 18px; height: 18px; background: url(../../../img/common/arrow_next_w.svg); background-size: 18px; opacity: 1; right: 35px; top: 13px; }
.left-join:hover .text-wrap .detail-view-btn, .right-join:hover .text-wrap .detail-view-btn { border-color: #005fea; background: #005fea; color: #fff; }
.left-join .ico-bg-wrap.ico-bg-wrap, 
.right-join .ico-bg-wrap { width: 230px;height: 230px;position: absolute;z-index: 1;right: -75px; top: -75px;}
.left-join .ico-bg-wrap .ico-bg, 
.right-join .ico-bg-wrap .ico-bg { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.left-join .ico-bg-wrap .ico-bg:before,
.right-join .ico-bg-wrap .ico-bg:before { position: absolute; content: ''; border-radius: 50%; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; transition: width .3s ease, height .3s ease, left .3s ease, top .3s ease; }
.left-join:hover .ico-bg-wrap .ico-bg:before,
.right-join:hover .ico-bg-wrap .ico-bg:before  { width: calc(100% + 50px); height: calc(100% + 50px); left: -25px; top: -25px; }
.left-join .ico-bg-wrap .ico-bg { background: #ffe68f; }
.left-join .ico-bg-wrap .ico-bg:before { background: #fff9e6; }
.right-join .ico-bg-wrap .ico-bg { background: #95f3e1; }
.right-join .ico-bg-wrap .ico-bg:before { background: #d6fff7; }

.right-join .ico-bg-wrap .ico-bg:after,
.left-join .ico-bg-wrap .ico-bg:after { position: absolute; content: ''; z-index: 1; }
.left-join .ico-bg-wrap .ico-bg:after { width: 60px; height: 60px; background: url(../../../img/main/quick_icon_01.svg); background-size: 60px; right: 48%; top: 48%; }
.right-join .ico-bg-wrap .ico-bg:after { width: 52px; height: 64px; background: url(../../../img/main/quick_icon_03.svg); background-size: 52px 64px; right: 47%; top: 48%; }


@media(max-width:1300px) {
	.left-join .text-wrap .detail-view-btn, .right-join .text-wrap .detail-view-btn {margin-top:30px;}
}

@media(max-width:768px) {
	.left-join, .right-join {height:240px;}
	.left-join .text-wrap, .right-join .text-wrap {padding:30px}
	.left-join .text-wrap h1, .right-join .text-wrap h1 {font-size:2rem;}
	/* .left-join .text-wrap p, .right-join .text-wrap p {font-size:1.4rem;} */
}

@media(max-width:630px) {
	.left-join, .right-join {float:none; width:100%; margin-right:0; margin-bottom:30px; height:220px; }
	.left-join .text-wrap, .right-join .text-wrap {padding:20px}
}