@charset "utf-8";

#join-Logo { clear: both; width: 600px; height: 50px; margin: 0 auto; margin-top: 30px; text-align: center; }

#join-Subject { clear: both; width: 600px; height: 54px; margin: 0 auto; margin-top: 30px; display: flex; }
#join-Subject .Left, #join-Subject .Right { width: 300px; height: 54px; display: table; }
#join-Subject .Left a, #join-Subject .Right a {
	width: 100%; height: 54px; text-align: center; font-size: 18px; font-weight: 500; color: #555; background: #E2E2E2;
	display: table-cell; vertical-align: middle; font-family: Pretendard600;
	-webkit-border-radius: .3em 0 0 0; -moz-border-radius: .3em 0 0 0; border-radius: .3em 0 0 0;
}
#join-Subject .Right { float: right; -webkit-border-radius: 0 .3em 0 0; -moz-border-radius: 0 .3em 0 0; border-radius: 0 .3em 0 0; }
#join-Subject .Right a { -webkit-border-radius: 0 .3em 0 0; -moz-border-radius: 0 .3em 0 0; border-radius: 0 .3em 0 0; }
#join-Subject .Left a.select {
	background: #04CF5C; color: #FFF;
	-webkit-border-radius: .3em 0 0 0; -moz-border-radius: .3em 0 0 0; border-radius: .3em 0 0 0;
}
#join-Subject .Right a.select {
	background: #0080FF; color: #FFF;
	-webkit-border-radius: .3em 0 0 0; -moz-border-radius: .3em 0 0 0; border-radius: .3em 0 0 0;
}
#join-Subject .Right a.select { -webkit-border-radius: 0 .3em 0 0; -moz-border-radius: 0 .3em 0 0; border-radius: 0 .3em 0 0; }
#join-Subject .wrap-user, #join-Subject .wrap-biz { width: 100%; height: 54px; display: table; }
#join-Subject .wrap-user a, #join-Subject .wrap-biz a {
	width: 100%; height: 54px; text-align: center; font-size: 18px; font-weight: 500; color: #FFF;
	display: table-cell; vertical-align: middle; font-family: Pretendard600;
	-webkit-border-radius: .3em .3em 0 0; -moz-border-radius: .3em .3em 0 0; border-radius: .3em .3em 0 0;
}
#join-Subject .wrap-user a { background: #04CF5C; }
#join-Subject .wrap-biz a { background: #0080FF; }

#join-Wrap, #join-Yak {
	clear: both; width: 598px; margin: 0 auto; padding-bottom: 50px; border: 1px solid #E2E2E2; border-top: 0;
	-webkit-border-radius: 0 0 .3em .3em; -moz-border-radius: 0 0 .3em .3em; border-radius: 0 0 .3em .3em;
}
#join-Wrap .Container, #join-Yak .Container { clear: both; width: 500px; margin: 50px 0 0 50px; display: inline-block; }
#join-Wrap .Container .title, #join-Yak .Container .title  { clear: both; width: 100%; font-size: 24px; color: #111; line-height: 1; }
#join-Wrap .Container .title div { clear: both; font-size: 14.5px; color: #777; font-family: Pretendard400; margin-top: 12px; }
#join-Wrap .Container .title-sub {
	clear: both; width: 100%; height: 20px; margin-top: 30px; font-size: 15px; color: #333; font-family: Pretendard;
}
#join-Wrap .Container .input-wrap { clear: both; width: 100%; height: 40px; }
#join-Wrap .Container .input-wrap .input-style {
	width: 100%; height: 40px; color: #000; font-size: 18px; border: none; border-bottom: 1px solid #EAEAEA;
	text-indent: 12px; font-family: Pretendard;
}
#join-Wrap .Container .input-wrap input:focus { border-bottom: 1px solid #AAA; }
#join-Wrap .Container .Auth-Mobile-Button {
	position: absolute; font-size: 14px; padding: 10px 25px; text-align: center; border: 1px solid #CCC; margin: -40px 0 0 402px;
	-webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; font-family: Pretendard400;
}
#join-Wrap .Container .Auth-Mobile-Button:hover {
	border: 1px solid #AAA; color: #000; cursor: pointer;
	background-color: #AAA;
}
#join-Wrap .Container .input-box { color: #000; font-size: 18px; font-family: Pretendard; }
#join-Wrap .ID { clear: both; width: 100%; height: 60px; }
#join-Wrap .PASSWD, #join-Wrap .MOBILE { clear: both; width: 100%; height: 60px; margin-top: 10px; }
#join-Wrap .PASSWD .Left, #join-Wrap .MOBILE .Left { float: left; width: 70%; height: 60px; }
#join-Wrap .PASSWD .Right, #join-Wrap .MOBILE .Right {
	float: right; width: calc(30% - 12px); height: 58px; display: table; border: 1px solid #CCC; background: #FAFAFA;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
#join-Wrap .PASSWD .Right a, #join-Wrap .MOBILE .Right a {
	display: table-cell; height: 58px; vertical-align: middle; font-size: 16px; text-align: center; cursor: pointer;
}
#join-Wrap .PASSWD #MobileTime {
	float: right; width: calc(30% - 12px); height: 58px; display: table;
	border: 1px solid #FFF; background: #FFF; text-align: right; display: none;
}
#join-Wrap .PASSWD #MobileTime a {
	display: table-cell; width: 100%; height: 58px; vertical-align: middle; font-size: 20px; text-align: right; color: #E20000; cursor: default;
}

#join-Wrap .ID input, #join-Wrap .PASSWD input, #join-Wrap .MOBILE input {
	width: calc(100% - 2px); height: 58px; border: 1px solid #EEE; text-indent: 12px; font-size: 18px;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
#join-Wrap .ID input:focus, #join-Wrap .PASSWD input:focus { border: 1px solid #AAA; background: #F7F7F7; }
#join-Wrap .Container .user { clear: both; width: 100%; margin-top: 40px; }
.btn-join-user, .btn-join-biz {
	clear: both; width: 100%; height: 56px; display: table; margin: 10px 0 0;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}

#join-Wrap .cap-img {
	float: left; width: 118px; height: 58px; border: 1px solid #EEE; background: #FAFAFA;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
#join-Wrap .cap-auth {
	float: right; width: calc(100% - 130px); height: 58px; /*border: 1px solid #EEE;*/ margin-left: 10px;
	/*-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;*/
}
/*
#join-Wrap .cap-img {
	float: left; width: 118px; height: 58px; border: 1px solid #EEE; background: #FAFAFA;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
#join-Wrap .cap-f5 {
	float: left; width: 98px; height: 58px; border: 1px solid #EEE; display: table; margin-left: 10px;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
#join-Wrap .cap-f5 a { width: 100%; height: 58px; display: table-cell; text-align: center; vertical-align: middle; font-size: 18px; }
#join-Wrap .cap-auth {
	float: right; width: calc(100% - 240px); height: 58px; /*border: 1px solid #EEE;*/ margin-left: 10px;
	/*-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;*/
}
*/

#join-Wrap .Container .find-id-result {
	clear: both; width: 100%; margin-bottom: 5px; text-align: center; display: inline-block; font-size: 30px; color: #000;
}
#join-Wrap .Container .find-id-result span { font-size: 16px; color: #777; }

.btn-join-user a {
	width: 100%; height: 56px; display: table-cell; background: #FE7171; color: #FFF; font-size: 16px;
	text-align: center; vertical-align: middle;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
	background-color: #04CF5C;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04CF5C), to(#04C256));
	background-image: -webkit-linear-gradient(top, #04CF5C, #04C256);
	background-image: -moz-linear-gradient(top, #04CF5C, #04C256);
	background-image: -ms-linear-gradient(top, #04CF5C, #04C256);
	background-image: -o-linear-gradient(top, #04CF5C, #04C256);
	background-image: linear-gradient(to bottom, #04CF5C, #04C256);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#04CF5C, endColorstr=#04C256);
}
.btn-join-user a:hover {
	background: #04C256;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04C256), to(#04B550));
	background-image: -webkit-linear-gradient(top, #04C256, #04B550);
	background-image: -moz-linear-gradient(top, #04C256, #04B550);
	background-image: -ms-linear-gradient(top, #04C256, #04B550);
	background-image: -o-linear-gradient(top, #04C256, #04B550);
	background-image: linear-gradient(to bottom, #04C256, #04B550);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#04C256, endColorstr=#04B550);
}

.btn-join-biz a {
	width: 100%; height: 56px; display: table-cell; background: #FE7171; color: #FFF; font-size: 16px;
	text-align: center; vertical-align: middle;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
	background-color: #1087FD;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1087FD), to(#0080FF));
	background-image: -webkit-linear-gradient(top, #1087FD, #0080FF);
	background-image: -moz-linear-gradient(top, #1087FD, #0080FF);
	background-image: -ms-linear-gradient(top, #1087FD, #0080FF);
	background-image: -o-linear-gradient(top, #1087FD, #0080FF);
	background-image: linear-gradient(to bottom, #1087FD, #0080FF);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1087FD, endColorstr=#0080FF);
}
.btn-join-biz a:hover {
	background: #0080FF;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0080FF), to(#037AF1));
	background-image: -webkit-linear-gradient(top, #0080FF, #037AF1);
	background-image: -moz-linear-gradient(top, #0080FF, #037AF1);
	background-image: -ms-linear-gradient(top, #0080FF, #037AF1);
	background-image: -o-linear-gradient(top, #0080FF, #037AF1);
	background-image: linear-gradient(to bottom, #0080FF, #037AF1);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0080FF, endColorstr=#037AF1);
}

.btn-join-naver {
	clear: both; float: left; width: 246px; height: 54px; display: table; margin: 10px 0 0;
	background: url('/img/n.png') no-repeat 36px 20px; background-size: 14px; border: 1px solid #FFF;
}
.btn-join-kakao {
	float: right; width: 246px; height: 54px; display: table; margin: 10px 0 0;
	background: url('/img/k2.png') no-repeat 34px 20px; background-size: 16px; border: 1px solid #FFF;
}
.btn-join-naver a, .btn-join-kakao a {
	width: 246px; height: 54px; display: table-cell; vertical-align: middle; border: 1px solid #FFF;
	text-align: center; font-size: 16px; color: #555; font-family: Pretendard600;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
.btn-join-naver a:hover { border: 1px solid #03C75A; color: #000; }
.btn-join-kakao a:hover { border: 1px solid #371D1E; color: #000; }


#login-btn { clear: both; width: 100%; height: 60px; margin: 0 auto; margin-top: 10px; display: table; }
#login-btn a {
	width: 100%; height: 60px; text-align: center; font-size: 17px; font-weight: 500; background: #393939; color: #FAFAFA;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; display: table-cell; vertical-align: middle;
}
#join-Wrap .remember { clear: both; width: 100%; height: 28px; margin-top: 20px; }
#join-Wrap .remember .checkbox { float: left; }
#join-Wrap .remember .text { float: left; margin: 6px 0 0 8px; font-size: 15px; color: #999; cursor: pointer; font-family: Pretendard400; }


#join-Yak { margin-top: 10px; border: 1px solid #E2E2E2; -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; }
#join-Yak .agree-all { clear: both; width: 100%; display: inline-block; margin-top: 30px; border-bottom: 0.6px solid #EFEFEF; padding-bottom: 30px; }
#join-Yak .agree-all .left { float: left; width: 30px; height: 20px; }
#join-Yak .agree-all .right {
	float: left; width: 382px; height: 18px; margin: 3px 0 0 8px; font-size: 17px; font-weight: bold; color: #000; font-family: Pretendard;
}
#join-Yak .agree-all-1 { clear: both; width: 100%; display: inline-block; margin-top: 30px; }
#join-Yak .agree-all-1 .left { float: left; width: 30px; height: 20px; }
#join-Yak .agree-all-1 .right {
	float: left; width: 382px; height: 18px; margin: 3px 0 0 8px; font-size: 17px; color: #333; font-family: Pretendard;
}
#join-Yak .agree-all-1 .more1, #join-Yak .agree-all-2 .more2, #join-Yak .agree-all-2 .more3 {
	float: right; width: 30px; text-align: right; color: #777; font-size: 14px; text-decoration: underline; padding: 4px 0 0 0; cursor: pointer;
	font-family: Pretendard;
}
#join-Yak .agree-all-2 { clear: both; width: 100%; display: inline-block; margin-top: 20px; }
#join-Yak .agree-all-2 .left { float: left; width: 30px; height: 20px; }
#join-Yak .agree-all-2 .right {
	float: left; width: 382px; height: 18px; margin: 3px 0 0 8px; font-size: 17px; color: #333; font-family: Pretendard;
}
#join-Yak .check, #join-Wrap .check {
	float: left; width: 28px; height: 28px; /*margin-top: 2px;*/ cursor: pointer;
	background: url('/img/icon-check-white.png') no-repeat 50% 55% #DDD; background-size: 16px;
	-webkit-border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%;
}
#join-Yak .check-on, #join-Wrap .check-on {
	background: url('/img/icon-check-white.png') no-repeat 50% 55% #1E3547; background-size: 16px;
}


.join-btn-wrap { clear: both; width: 600px; height: 60px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; display: flex; }
.join-btn-wrap #join-btn { width: 450px; height: 60px; display: table; }
.join-btn-wrap #join-btn a {
	width: 100%; height: 50px; text-align: center; font-size: 18px; font-weight: 500; background: #292929; color: #FAFAFA;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; display: table-cell; vertical-align: middle;
}
.join-btn-wrap #join-cancel { margin-left: auto; width: 148px; height: 60px; display: table; }
.join-btn-wrap #join-cancel a {
	width: 100%; height: 50px; text-align: center; font-size: 18px; font-weight: 500; background: #BBB; color: #444;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; display: table-cell; vertical-align: middle;
}
.join-btn-wrap #join-cancel a:hover { background: #AAA; }
.join-btn-wrap #join-btn a:hover, #login-btn a:hover { /*background: #2792FE;*/ background: #000; color: #FFF; }


::placeholder { color: #888; font-size: 14px; font-weight: 400; opacity: 1; font-family: Pretendard400; }
:-ms-input-placeholder { color: #888; font-size: 14px; font-weight: 400; opacity: 1; font-family: Pretendard400; }
::-ms-input-placeholder { color: #888; font-size: 14px; font-weight: 400; opacity: 1; font-family: Pretendard400; }

.btn-login-naver { clear: both; float: left; width: 248px; height: 56px; display: table; margin: 10px 0 0; }
.btn-login-naver a { background: #03C75A; }
.btn-login-kakao { float: right; width: 248px; height: 56px; display: table; margin: 10px 0 0; }
.btn-login-kakao a { background: #FAE100; }
.btn-login-naver a, .btn-login-kakao a {
	width: 100%; height: 56px; display: table-cell; vertical-align: middle;
	text-align: center; font-size: 16px; color: #000; font-family: Pretendard600;
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}

.btn-find-id { clear: both; float: left; width: 248px; height: 56px; display: table; margin: 40px 0 4px; }
.btn-find-passwd { float: right; width: 248px; height: 56px; display: table; margin: 40px 0 4px; }
.btn-find-id a, .btn-find-passwd a {
	width: 100%; height: 56px; display: table-cell; vertical-align: middle;
	text-align: center; font-size: 16px; color: #555; background: #DDD;
	background-image: linear-gradient(to bottom, #CCC, #DEDEDE 50%, #CCC);
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
.btn-join { clear: both; width: 500px; height: 56px; display: table; }
.btn-join a {
	width: 100%; height: 56px; display: table-cell; vertical-align: middle;
	text-align: center; font-size: 16px; color: #555; background: #DDD;
	background-image: linear-gradient(to bottom, #CCC, #DEDEDE 50%, #CCC);
	-webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em;
}
.btn-find-id a:hover, .btn-find-passwd a:hover, .btn-join a:hover {
	background: #1E3547; color: #FFF;
	background-image: linear-gradient(to bottom, #1E3547, #2D475B 50%, #1E3547);
}

.male, .female {
	float: left; margin-left: 1px; font-size: 14px; padding: 11px 15px; text-align: center; border: 1px solid #CCC;
	-webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; font-family: Pretendard400; cursor: pointer;
}
/*.female { margin-left: 457px; }*/
.male:hover, .female:hover, .sex-checked { background: #1E3547; border: 1px solid #AAA; color: #FFF; }
.join-text { font-family: Pretendard400; font-size: 14px; color: #A00000; }
#Auth-Mobile-Time { position: absolute; width: 250px; height: 20px; margin: -28px 250px; 0 0; background: #FFF; text-align: right; display: none; }


.user.joinBiz { margin-bottom: 68px; }
.input-pwd { position: relative; }
.pwd-icon { position: absolute; right: 0; top: 0; height: 32px; }
#wrap-gugun { margin-left: 1px; }
.join-section { border-radius: .3em; margin-top: 10px; border: 1px solid #E2E2E2; }
#CheckLicense { margin-left: 391px; }