@import url("./common.css");
@import url("./reward_point.css");

.member_page {
	text-align: center;
}

.member_page .wrap_content {
    display: block;
    margin: 30px 0;
    border: 1px solid #ccc;
}

.member_page form {
	display: inline-block;
    width: 433px;
    padding: 65px 0 136px;
	font-size: 12px;
    text-align: center;
}

.dubu_account .btn_join {
    width: 100%;	
	margin: 0;
    line-height: 46px;
}

.member_page .box_social_join .dubu_account .btn_join {
	color: #fff;
}

.dubu_account .dubu_login {
	text-align: right;
	padding: 15px 0;
	color: #8c8c8c;
}

.dubu_account .dubu_login a {
	padding-left: 10px;
	color: #5983bd;
}

.social_account {
	position: relative;
	margin-top: 5px;
	text-align: left;
}

.social_account:before {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 7px;
	background: #e6e6e6;
}

.social_account .social_login_title {
	background: url(../images/social_login_tit.png) no-repeat 0 28px;
	text-indent: -99999px;
	padding: 28px 0 15px;
}

.social_login ul li {
	display: inline-block;
	float: left;
	position: relative;
	width: 54px;
	height: 36px;
}

.social_login ul li a .other_icon {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 36px;
	text-align: center;
	-webkit-transition: width .3s cubic-bezier(0,0,.2,1);
	transition: width .3s cubic-bezier(0,0,.2,1);
}

.social_login ul li.other_facebook a .other_icon {background-color:#4c76be;}
.social_login ul li.other_kakao a .other_icon {background-color:#ffe600;}
.social_login ul li.other_naver a .other_icon {background-color:#2db400;}
.social_login ul li.other_google a .other_icon {background-color:#fc5345;}
.social_login ul li.other_twitter a .other_icon {background-color:#00c7ff;}
.social_login ul li.other_instagram a .other_icon {background-color:#7c5641;}
.social_login ul li.other_line a .other_icon {background-color:#2db400;}
.social_login ul li.other_nurimedia a .other_icon {background-color:#efefef;}

.social_login ul li a .other_icon:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 36px;
	background: url(../images/social_login_icon@2x.png) no-repeat;
	background-size: cover;
}

.social_login ul li.other_facebook a .other_icon:after {background-position: 0 0;}
.social_login ul li.other_kakao a .other_icon:after {background-position: 0 -36px;}
.social_login ul li.other_naver a .other_icon:after {background-position: 0 -72px;}
.social_login ul li.other_google a .other_icon:after {background-position: 0 -108px;}
.social_login ul li.other_twitter a .other_icon:after {background-position: 0 -144px;}
.social_login ul li.other_instagram a .other_icon:after {background-position: 0 -180px;}
.social_login ul li.other_line a .other_icon:after {background-position: 0 -216px;}
.social_login ul li.other_nurimedia a .other_icon:after {background-position: 0 -254px;}

.social_login ul li a {
	position: relative;
}

.social_login ul li .other_txt {
	display: none;
}

.social_login ul li .other_icon:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 36px;
	-webkit-transform: scaleY(0);
			transform: scaleY(0);
	-webkit-transform-origin: 50% 100%;
			transform-origin: 50% 100%;
	-webkit-transition-property: transform;
			transition-property: transform;
	-webkit-transition: 350ms ease-out;
			transition: 350ms ease-out;
}

.social_login ul .design_social:hover,
.social_login ul .design_social:hover .other_icon{
	background-color: transparent;
	transition: all 0.6s ease-out;
}

.social_login ul .design_social:hover .other_icon:before {
	-webkit-transform: scaleY(1);
		  transform: scaleY(1);
}

.social_login ul li .other_icon.facebook:before {background: #2d4984;}
.social_login ul li .other_icon.kakao:before {background: #ffc20e;}
.social_login ul li .other_icon.naver:before {background: #289704;}
.social_login ul li .other_icon.google:before {background: #e63122;}
.social_login ul li .other_icon.twitter:before {background: #00a2ff;}
.social_login ul li .other_icon.instagram:before {background: #4d3222;}
.social_login ul li .other_icon.line:before {background: #289c01;}
.social_login ul li .other_icon.nurimedia:before {background: #e6e6e6;}

@media screen and (max-width:767px) {
	.member_page form {
		width: 100%;
		padding: 50px 2%;
	}
}