@charset "utf-8";
:root {
	--skin_bg : #333;
	--f_small : 16px;
	--f_middle : 17px;
	--f_xmiddle : 19px;
	--f_big : 25px;
}

.skin-member{width:44rem; margin:0 auto; padding:45px 2rem 70px; background-color: #fff; text-align: center; border-radius:10px; overflow: hidden; box-shadow:0 20px 40px rgba(0,0,0,0.1);}
.skin-member.login{padding:45px 5rem 20px;}
.skin-member.find{margin-top:100px;}

.skin-member .h1{}
.skin-member .h1>dt{font-weight: 600; font-size:var(--f_big); line-height:1; color: #111;}
.skin-member .h1>dd{padding-top:1.5rem; font-weight: 500; font-size:var(--f_small); line-height:1.4; color: #999;}
.skin-member .h1>dd>span{color: #111; text-decoration: underline; text-underline-position:under;}

.skin-member .h2{margin:20px 0 10px; font-weight: 600; font-size:var(--f_middle); line-height:1.4; color: var(--skin_bg); text-align: left;}
.skin-member .h1+.h2{margin-top:35px;}

.skin-member input[type=button],
.skin-member input[type=text],
.skin-member input[type=password],
.skin-member input[type=file],
.skin-member select,
.skin-member textarea,
.skin-member .btns{width:100%; height:50px; padding:0 20px; background-color:#fff; border:1px solid #ddd; font-weight: 500; font-size:var(--f_small); line-height:48px; color:#111; vertical-align:middle; display: inline-flex; align-items: center; justify-content: center;}

.skin-member input[type=text],
.skin-member input[type=password],
.skin-member select{background-color:#f6f6f6;}

.skin-member input[type=text]:focus,
.skin-member input[type=password]:focus,
.skin-member select:focus{background-color: #fff;}

.skin-member .member-step{width:100%; margin-top:30px; padding:0 30px; display: flex; align-items: center; justify-content: space-between; position: relative;}
.skin-member .member-step:before{content: ""; height: 5px; background-color: #ccc; display:block; position: absolute; left:50px; right:50px; top:7px;}
.skin-member .member-step:after{content: ""; width:0; height: 5px; background-color: var(--point); display:block; position: absolute; left:50px; top:7px;}
.skin-member .member-step>li{font-weight: 500; font-size:var(--f_small); line-height:1; color:#999; position: relative; z-index:3;}
.skin-member .member-step>li:before{content: ""; width: 18px; height: 18px; margin:0 auto 12px; background-color: #ccc; display:block; border-radius:99px;}

.skin-member .member-step.two:after{width:calc(50% - 50px);}
.skin-member .member-step.three:after{width:calc(100% - 100px);}

.skin-member .member-step:not(.two, .three)>li:nth-child(1),
.skin-member .member-step.two>li:nth-child(2),
.skin-member .member-step.three>li:nth-child(3){color: #111;}
.skin-member .member-step>li:nth-child(1):before,
.skin-member .member-step:is(.two, .three)>li:nth-child(2):before,
.skin-member .member-step.three>li:nth-child(3):before{background-color: var(--point);}

.skin-member .skin-button{width:calc(100% + 4rem); margin:40px 0 -70px -2rem; display: flex; align-items: center; justify-content: space-between; overflow: hidden;}
.skin-member .skin-button>*{flex:1; height:70px; background-color:#666; border:none; font-weight: 600; font-size:var(--f_middle); line-height:1.2; color:#fff; text-align: center; display: flex; align-items: center; justify-content: center; overflow:hidden;  cursor: pointer; border-radius:0;}
.skin-member .skin-button>*[type="submit"]{background-color: var(--point);}

/* 로그인 - 입력 */
	.skin-member .login-fild{margin-top:3.5rem;}
	.skin-member .login-fild>label{display:block; position: relative;}
	.skin-member .login-fild input[type=text],
	.skin-member .login-fild input[type=password]{height:56px; padding: 0 20px 0  43px; background:url('img/icon_id.png') no-repeat 19px center/17px; line-height:1; display: flex; align-items: center;}
	.skin-member .login-fild input[type=password]{background-image: url('img/icon_pw.png'); background-position: 20px center; background-size:14px;}

	.skin-member .login-fild label + label{margin-top:10px;}

	.skin-member .skin-check{width:100%; text-align: left; margin-top:15px; }
	.skin-member .skin-check input[type=checkbox]+label{color: #666;}

	.skin-member .login-fild input[type=submit]{width:100%; height:60px; margin-top:20px; background-color:var(--skin_bg); font-weight: 600; font-size:var(--f_middle); line-height:1.2; color:#fff; text-align: center; overflow:hidden; cursor: pointer; border-radius:5px;}

/* 로그인 - SNS */
	.skin-member .login-sns{}
	.skin-member .login-sns button{width:100%; height:60px; padding-left:64px; background:#3bac37 url('img/icon_login_naver.png') no-repeat 23px center/21px; border:none; font-weight: 600; font-size:var(--f_middle); line-height:1.2; color:#fff; text-align: left; cursor: pointer; border-radius:5px;}
	.skin-member .login-sns button+button{margin-top:10px;}
	.skin-member .login-sns button.sns-kakao{background:#fae100 url('img/icon_login_kakao.png') no-repeat 18px center/30px; color: #381e1f;}

	.skin-member .login-sns button:hover{box-shadow:inset 5px 5px 5px rgba(0,0,0,0.1);}

	.skin-member .login-sns a{display:inline-block; width:100%; height:60px; padding-left:64px; background:#3bac37 url('img/icon_login_naver.png') no-repeat 23px center/21px; border:none; font-weight: 600; font-size:var(--f_middle); line-height:3.6; color:#fff; text-align: left; cursor: pointer; border-radius:5px;}
	.skin-member .login-sns a+a{margin-top:10px;}
	.skin-member .login-sns a.sns-kakao{background:#fae100 url('img/icon_login_kakao.png') no-repeat 18px center/30px; color: #381e1f;}

	.skin-member .login-sns a:hover{box-shadow:inset 5px 5px 5px rgba(0,0,0,0.1);}

/* 로그인 - 링크 */
	.skin-member .login-link{margin-top:5px;}
	.skin-member .login-link>a{width:100%; height:60px; font-weight: 500; font-size:var(--f_small); line-height:1.2; color:#666; background:url('img/arr_login.png') no-repeat right center/8px; display: flex; align-items: center; }
	.skin-member .login-link>a+a{border-top:1px solid #e6e6e6;}

/* 회원가입 - 약관동의 */
	.skin-member .terms-re{width:100%; margin-top:35px; text-align: left;}
	.skin-member .terms-re+.terms-re{margin-top:30px;}
	.skin-member .terms-re>dl{}
	.skin-member .terms-re>dl>dt{margin:0;}
	.skin-member .terms-re>dl>dd{margin-top:10px; height:120px; padding:15px 20px; background-color: #f6f6f6; font-size:var(--f_small); line-height:1.5; color:#666; border-radius:10px; overflow: hidden; overflow-y: auto;}

/* 회원가입 - 정보입력 */
	.skin-member.form .h2{margin-top:35px;}
	.skin-member .skin-form{width:100%; text-align: left; display: flex; flex-flow: row wrap; gap:10px;}
	.skin-member .skin-form>li{width:100%;}
	.skin-member .skin-form>li input:read-only {background-color:#cecece !important;}
	.skin-member .skin-form>li.juso{display: flex; flex-flow: row wrap; justify-content: space-between; gap:10px;}
	.skin-member .skin-form>li.juso #reg_mb_zip{width:calc(100% - 104px);}
	.skin-member .skin-form>li.juso .btns{width:94px; padding:0; background-color: #666; border:none; color: #fff; text-align: center;}

/* 회원가입 - 완료 */
	.skin-member .skin-result{margin-top:35px;}
	.skin-member .skin-result .result-top{width:100%; position: relative;}
	.skin-member .skin-result .result-top:before{content: ""; width: 50px; height: 50px; margin:0 auto; background:var(--point) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z"/></svg>') no-repeat center center/30px; display:block; border-radius:99px;}
	.skin-member .skin-result .result-top>dt{margin-top:15px; font-weight: 700; font-size:var(--f_xmiddle); line-height:1; color: #111;}
	.skin-member .skin-result .result-top>dt>strong{color: var(--point);}
	.skin-member .skin-result .result-top>dd{margin-top:5px; font-weight: 500; font-size:var(--f_middle); line-height:1.5; color: #666;}

	.skin-member .skin-result .result-info{margin-top:15px; padding:15px 2rem; background-color: #f6f6f6; text-align: left; border-radius:10px; overflow: hidden;}
	.skin-member .skin-result .result-info>dl{width:100%; padding:5px 0; font-size:var(--f_small); line-height:21px; color:#666; display: flex;}
	.skin-member .skin-result .result-info>dl>dt{width:70px; font-weight: 500; color: var(--skin_bg);}
	.skin-member .skin-result .result-info>dl>dd{width:calc(100% - 70px);}


/* check box */
	.skin-member .skin-check{display: flex; align-items: center; position: relative;}
	.skin-member .skin-check input[type=checkbox],
	.skin-member .skin-check input[type=radio]{display: none; position: absolute; left:0; top:0;}

	.skin-member .skin-check input[type=checkbox]+label,
	.skin-member .skin-check input[type=radio]+label{font-size:var(--f_small); line-height:1; color: #999; display: inline-flex; align-items: center; cursor: pointer; position: relative; gap:7px;}

	.skin-member .skin-check input[type=checkbox]+label>.graphic,
	.skin-member .skin-check input[type=checkbox]+label>.graphic:before,

	.skin-member .skin-check input[type=radio]+label>.graphic,
	.skin-member .skin-check input[type=radio]+label>.graphic:before{content: ""; width: 18px; height: 18px; background-color: #fff; border:1px solid #ddd; font-size:0; line-height:0; display: inline-flex; vertical-align: top; position: relative; top:-1px; transition: .3s; overflow: hidden;}

	.skin-member .skin-check input[type=checkbox]+label>.graphic:before{background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z"/></svg>') no-repeat center top/cover; border:none; left:0; top:-1px; z-index:2; opacity: 0.2;}

	.skin-member .skin-check input[type=radio]+label>.graphic{border-radius:99px;}
	.skin-member .skin-check input[type=radio]+label>.graphic:before{width: 50%; height: 50%; background-color:var(--skin_bg); border:none; left: 50%; top:50%; border-radius:99px; transform-origin: 50% 50%; transform: translate(-50%, -50%); opacity:0.2;}

	.skin-member .skin-check input[type=checkbox]:checked+label>.graphic{border-color:var(--skin_bg);}

	.skin-member .skin-check input[type=radio]:checked+label>.graphic{border-color:var(--skin_bg);}
	.skin-member .skin-check input[type=radio]:checked+label>.graphic:before{background-color:var(--skin_bg);}

	.skin-member .skin-check input[type=checkbox]:checked+label>.graphic,
	.skin-member .skin-check input[type=checkbox]:checked+label>.graphic:before,
	.skin-member .skin-check input[type=radio]:checked+label>.graphic,
	.skin-member .skin-check input[type=radio]:checked+label>.graphic:before{opacity: 1;}
	.skin-member .skin-check input[type=checkbox]:checked+label>.graphic:before{background-color: var(--skin_bg);}

	.skin-member .skin-check input[type=checkbox]:checked+label,
	.skin-member .skin-check input[type=radio]:checked+label{color: var(--skin_bg);}

@media only screen and (max-width : 840px){
	.skin-member{width:100%;}

	.skin-member.find{width:calc(100% - 6rem);}
}