@charset "utf-8";

body { background-color:#f5f6f7; }

.member { position: relative; max-width:460px; margin:100px auto; background-color:#fff; border:5px solid #e5e5e5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.member .area { margin:0 14.444444%; }

/* 로그인 */
.member .area { margin:0 14.444444%; }
.member .area .info { margin:35px auto 23px; color:#545454; line-height:20px; }
.member .area .login_form { }
.member .area .login_form ul { margin:0; padding:0; }
.member .area .login_form li { position:relative; list-style:none; margin-bottom:8px; border:1px solid #d9d9d9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.member .area .login_form li.login_btn { margin-top:-1px; border:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.member .area .login_form .form_subject { position:absolute; width:100px; left:0; top:0; }
.member .area .login_form .form_subject .subject_thum { position:absolute; left:20px; top:14px; }
.member .area .login_form .form_subject .subject_text { margin:13px 0 0 40px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; color:#999999; font-size:13px; }
.member .area .login_form .form_input { height:42px; margin:0 0 0 100px; }
.member .area .login_form .form_input .input { border:none; width:99%; height:40px; outline-style:none; color:#555555; -webkit-appearance:none; -moz-appearance:none; }

.member .area .id_check { position:relative; margin:17px auto; }
.member .area .id_check .check { position:absolute; left:0; top:0; }
.member .area .id_check .check_text { margin:0 0 0 21px; color:#545454; line-height:21px; cursor:pointer; }
.member .area .btn_etc { margin:0 0 40px 0; }
.member .area .btn_etc ul { margin:0; padding:0; }
.member .area .btn_etc li { list-style:none; float:left; width:48.5%; margin:0 0 0 3%; }
.member .area .btn_etc li.first { margin:0 0 0 0; }

/* 회원가입 */
.member .join_space { height:25px; }
.member .join_space01 { height:40px; }
.member .join_agree { padding:5px 0 0; margin-bottom:5px; border:none; }
.member .join_agree .agree_text { position:relative; margin:0 0 10px 0; width:100%; height:100px; padding:13px; border:1px solid #d7d7d7; background-color:#fafafa; overflow: scroll; overflow-x:hidden; resize:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; }
.member .join_agree .agree_check { overflow:hidden; position:relative; min-height:25px; margin:0 21px 10px 0; color:#555555; vertical-align:middle; }
.member .join_agree .agree_check .check { position:absolute; left:0; top:0; }
.member .join_agree .agree_check .check_text { margin:1px 0 0 23px; line-height:18px; }
.member .join_btn { margin:20px 0 50px; }

/* 버튼 */
.btn_wide { vertical-align:middle; display:inline-block; width:100%; height:40px; border:1px solid #d8d8d8; text-align:center;
background: #fdfcfc; /* Old browsers */
background: -moz-linear-gradient(top,  #fdfcfc 0%, #dfdfdf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfcfc), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fdfcfc 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fdfcfc 0%,#dfdfdf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fdfcfc 0%,#dfdfdf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fdfcfc 0%,#dfdfdf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfcfc', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */ }
.btn_wide a,
.btn_wide a:hover { display:inline-block; width:100%; margin:0; border:0; line-height:40px; font-size:12px; color:#363535; display:block; }
.btn_wide input { display:inline-block; width:100%; margin:0; border:0; line-height:40px; font-size:12px; color:#363535; background: none; cursor:pointer; }

.btn_wide.black { vertical-align:middle; display:inline-block; height:40px; border:1px solid #767676; 
background: #535353; /* Old browsers */
background: -moz-linear-gradient(top,  #535353 0%, #3e3e3e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#535353), color-stop(100%,#3e3e3e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #535353 0%,#3e3e3e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #535353 0%,#3e3e3e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #535353 0%,#3e3e3e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #535353 0%,#3e3e3e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#535353', endColorstr='#3e3e3e',GradientType=0 ); /* IE6-9 */ }
.btn_wide.black a,
.btn_wide.black a:hover { display:inline-block; margin:0; border:0; line-height:40px; font-size:12px; color:#fff; display:block; }
.btn_wide.black input { display:inline-block; margin:0; border:0; line-height:40px; font-size:12px; color:#fff; background: none; cursor:pointer; }

.member > .icon_home { position: absolute; width: 31px; height: 31px; right: 5px; top: 5px; background-color: #4f4f4f; text-align: center; display: block; }
.member > .icon_home img { padding-top: 9px; }
.member > .icon_home a,
.member > .icon_home a:hover { display: block; }

/* 간편로그인 */
.sns_login { padding:50px 0 40px; border-bottom:1px solid #d9d9d9; }
.sns_login ul { margin:0; padding:0; }
.sns_login li { position:relative; list-style:none; float:left; width:48.5%; height:42px; margin:0 0 10px 3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; }
.sns_login li { width:100%; margin:0 0 10px 0; }
/*
.sns_login li.type01 { margin:0 0 10px 0; }
.sns_login li.type02 { width:100%; margin:0 0 10px 0; }
*/
.sns_login li.login_naver { background-color:#1fbc02; border:1px solid #1baf00; }
.sns_login li.login_kakao { background-color:#ffeb00; border:1px solid #e2d000; }
.sns_login li.login_facebook { background-color:#3c5b9a; border:1px solid #2e5198; }
.sns_login li.login_google { border:1px solid #e3e3e3;
background: #ececec; /* Old browsers */
background: -moz-linear-gradient(top,  #ececec 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ececec 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ececec 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ececec 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ececec 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ }
.sns_login li .sns_login_thum { position:absolute; width:42px; left:0; top:0; }
.sns_login li .sns_login_text { margin:0 0 0 42px; color:#fff; line-height:41px; text-align:center; }
.sns_login li .sns_login_text.v1 { color:#412828; }
.sns_login li .sns_login_text.v2 { color:#363535; }

.sns_no { height:20px; }

@media screen and (max-width:400px) {
    .member .area .login_form .form_input .input {width:90%; height:36px; }
}

@media screen and (max-width:640px) {
    .member { width:auto; margin:0 auto; }
    .member .area { margin:0 7%; }
}