@charset "utf-8";

.user .off {display:none !important;}

/* 로그인 */
.user.login {padding:16px;}
.user.login > h2 {display:none; margin-bottom:38px; font-size:30px; font-weight:600; line-height:36px; word-break:keep-all; text-align:center;}
.user.login > h3 {font-size:18px; font-weight:600; line-height:24px; word-break:keep-all;}
.user.login > form {margin-top:16px;}
.user.login > form > * > strong {display:block; margin-bottom:16px; font-size:16px; font-weight:600; line-height:24px; word-break:keep-all;}
.user.login > form > * > ul > li {position:relative; margin-top:8px;}
.user.login > form > * > ul > li:first-child {margin-top:0;}
.user.login > form > * > ul > li > button.icon {display:none; position:absolute; right:0; top:0; width:40px; height:40px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center;}
.user.login > form > * > ul > li > button.icon.on {display:block;}
.user.login > form > * > ul > li > button.icon.icon-del {background-image:url(../images/icon-del.svg); background-size:14px auto;}
.user.login > form > * > ul > li > button.icon.icon-eye {background-image:url(../images/icon-eye.svg); background-size:20px auto;}
.user.login > form > * > ul > li > button.auth {width:100px; height:40px; margin-left:8px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}
.user.login > form > * > ul > li > button.auth.on {background-color:#ff5500;}
.user.login > form > * > ul > li > button.auth[disabled="disabled"] {background-color:#888; cursor:default;}
.user.login > form > * > ul > li.flex {display:flex; align-items:center;}
.user.login > form > * > ul > li.flex > input {width:calc(100% - 108px);}
.user.login > form > * > ul > li.flex > button.icon {right:108px;}
.user.login > form > * > ul > li.time {margin-top:4px; text-align:right;}
.user.login > form > * > ul > li.time > span {display:inline-block; width:100px; font-size:12px; line-height:12px; color:#888; text-align:center;}
.user.login > form > * > ul > li.time > span > em {color:#ff5500;}
.user.login > form > * > .button {margin-top:16px;}
.user.login > form > * > .button > button {width:100%; height:50px; font-size:16px; font-weight:500; color:#fff; background-color:#333; border-radius:3px;}
.user.login > form > * > .button > button[disabled="disabled"] {background-color:#888; cursor:default;}
.user.login > form > * > .save {display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.user.login > form > * > .sns {margin-top:32px; text-align:center;}
.user.login > form > * > .sns > button {width:50px; height:50px; margin-left:16px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.user.login > form > * > .sns > button:first-child {margin-left:0;}
.user.login > form > * > .sns > button.sns-01 {background-image:url(../images/sns-01.svg);}
.user.login > form > * > .sns > button.sns-02 {background-image:url(../images/sns-02.svg);}
.user.login > form > * > .sns > button.sns-03 {background-image:url(../images/sns-03.svg);}
.user.login > form > * > .sns > button.sns-04 {background-image:url(../images/sns-04.svg);}
.user.login > form > * > .join {margin-top:32px; text-align:center;}
.user.login > form > * > .join > button {width:100%; height:50px; font-size:16px; font-weight:600; border:1px solid #333; border-radius:3px;}
.user.login > form > * > .join > a {display:inline-block; margin-top:16px; text-decoration:underline;}
.user.login > form > * > .auth-box{display:flex; justify-content:center; align-items:center; height:250px; min-height:150px; margin-bottom:16px; text-align:center; font-weight:500; font-size:15px; border:2px solid #f0f2f4; box-sizing: border-box; border-radius:5px;}
.user.login > form > * > .auth-box > span {position:relative; padding:0 100px;}
.user.login > form > * > .auth-box > span:before{display:block; content: ''; width: 79px; height:79px; background:#f9f9f9 url(../images/icon-phone.png) no-repeat 50% 50%; background-size:42px auto; border-radius:100%; position:absolute; top:50%; left:0; transform:translateY(-50%);}

.user.login > .notice {padding:16px; margin-top:16px; border:1px solid #f0f2f4; background-color:#f6f8fa; border-radius:2px; word-break:keep-all;}

.user.login > .tab {display:flex; justify-content:space-between; border-bottom:1px #eee solid;}
.user.login > .tab > a {display:flex; justify-content:center; align-items:center; height:48px; font-weight:600; text-align:center; color: #a0a0a0; position:relative; width:50%;}
.user.login > .tab > a.on {color:#333;}
.user.login > .tab > a::after {position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; background-color:#333000; content:''; opacity:0; transition:all 0.3s;}
.user.login > .tab > a.on::after {width:100%; opacity:1;}

.user.login > .response {padding:16px;}
.user.login > .response > strong {display:block; font-size:16px; font-weight:600; line-height:24px; word-break:keep-all;}
.user.login > .response > .box {padding:16px; margin-top:16px; border:1px solid #f0f2f4; background-color:#f6f8fa; border-radius:3px;}
.user.login > .response > .box > dl {display:flex; justify-content:center; align-items:center; margin-top:16px;}
.user.login > .response > .box > dl:first-child {margin-top:0;}
.user.login > .response > .box > dl > dt {width:80px; line-height:16px; color:#616161;}
.user.login > .response > .box > dl > dd {
	width:calc(100% - 80px);
	width:-moz-calc(100% - 80px);
	width:-webkit-calc(100% - 80px);
	font-size:15px;
	line-height:16px;
}
.user.login > .button {padding:0 16px;}
.user.login > .button > button {width:100%; height:50px; font-size:16px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}

.user.login.find {padding:0;}
.user.login.find > form {padding:16px; margin-top:0;}

.user.login.wdrd > form > * > .alarm-list {padding:16px; border:1px solid #f0f2f4; background-color:#f6f8fa; border-radius:3px;}

/* 가입 */
.user.join > h2 {display:none; margin-bottom:38px; font-size:30px; font-weight:600; line-height:36px; word-break:keep-all; text-align:center;}
.user.join > form {padding:16px;}
.user.join > form > * > dl {margin-top:12px;}
.user.join > form > * > dl > dt {font-weight:600;}
.user.join > form > * > dl > dt > small {color:#ff5500;}
.user.join > form > * > dl > dd {position:relative; margin-top:4px;}
.user.join > form > * > dl > dd > button.icon {display:none; position:absolute; right:0; top:0; width:40px; height:40px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center;}
.user.join > form > * > dl > dd > button.icon.on {display:block;}
.user.join > form > * > dl > dd > button.icon.icon-del {background-image:url(../images/icon-del.svg); background-size:14px auto;}
.user.join > form > * > dl > dd > button.icon.icon-eye {background-image:url(../images/icon-eye.svg); background-size:20px auto;}
.user.join > form > * > dl > dd > strong {font-size:16px; font-weight:400;}
.user.join > form > * > dl > dd > .radio + .radio {margin-left:12px;}
.user.join > form > * > dl > dd.flex {display:flex; justify-content:space-between; align-items:center;}
.user.join > form > * > dl > dd.flex > select {margin-left:6px;}
.user.join > form > * > dl > dd.flex > select:first-child {margin-left:0;}
.user.join > form > * > dl > dd.flex > input {width:calc(100% - 106px);}
.user.join > form > * > dl > dd.flex > button.icon {right:108px;}
.user.join > form > * > dl > dd.time {margin-top:4px !important; text-align:right;}
.user.join > form > * > dl > dd.time > span {display:inline-block; width:100px; font-size:12px; line-height:12px; color:#888; text-align:center;}
.user.join > form > * > dl > dd.time > span > em {color:#ff5500;}
.user.join > form > * > dl > dd > button.auth {width:100px; height:40px; margin-left:6px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}
.user.join > form > * > dl > dd > button.auth.on {background-color:#ff5500;}
.user.join > form > * > dl > dd > button.auth[disabled="disabled"] {background-color:#888; cursor:default;}
.user.join > form > * > dl > dd.error > em {display:block; width:100%; padding-left:18px; margin-top:4px; font-size:12px; line-height:14px; color:#ff5500; background:url(../images/icon-alert.svg) no-repeat left center; background-size:12px auto; box-sizing:border-box;}
.user.join > form > * > dl > dd.error > input {border-color:#ff5500;}
.user.join > form > * > dl.e {margin-top:0;}
.user.join > form > * > dl.e > dt {display:none;}
.user.join > form > * > dl.e > dd {margin-top:6px;}
.user.join > form > * > .require {margin-bottom:8px; text-align:right; font-size:12px; line-height:15px; color:#888;}
.user.join > form > * > .require > small {font-weight:600; color:#ff5500;}
.user.join > form > * > .require + dl {margin-top:4px;}
.user.join > form > * > .box {padding:16px; margin-bottom:12px; border:1px solid #f0f2f4; background-color:#f6f8fa; border-radius:3px;}
.user.join > form > * > .box > dl {display:flex; justify-content:center; align-items:center; margin-top:16px;}
.user.join > form > * > .box > dl:first-child {margin-top:0;}
.user.join > form > * > .box > dl > dt {width:80px; line-height:16px; color:#616161;}
.user.join > form > * > .box > dl > dd {
	width:calc(100% - 80px);
	width:-moz-calc(100% - 80px);
	width:-webkit-calc(100% - 80px);
	font-size:15px;
	line-height:16px;
}
.user.join > form > * > .agree-area {margin-top:32px;}
.user.join > form > * > .agree-area > div {font-weight:600;}
.user.join > form > * > .agree-area > ul {padding-top:12px; margin-top:12px; border-top:1px solid #eee;}
.user.join > form > * > .agree-area > ul > li {display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
.user.join > form > * > .agree-area > ul > li:first-child {margin-top:0;}
.user.join > form > * > .agree-area > ul > li > a {width:20px; height:20px; font-size:0; line-height:0; background:url(../images/icon-go-2.png) no-repeat center center; background-size:8px auto;}
.user.join > form > * > .button {position:sticky; bottom:0; padding:16px 0; background-color:#fff; z-index:901;}
.user.join > form > * > .button > button {width:100%; height:60px; font-size:16px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}
.user.join > form > * > .button > button[disabled="disabled"] {background-color:#888; cursor:default;}

.user.join > .welcome {padding:16px; font-size:18px; font-weight:600; line-height:26px; word-break:keep-all;}
.user.join > .welcome > div {margin-top:12px; font-size:13px; font-weight:400; line-height:15px; color:#888;}

.user.join > .coupon {padding:16px; border-top:8px solid #f6f8fa;}
.user.join > .coupon > a {text-decoration:underline;}
.user.join > .coupon > .list {position:relative; display:flex; justify-content:space-between; margin-top:16px; border:1px #dcdee0 solid; background-color:#fff; border-radius:4px;}
.user.join > .coupon > .list > div {display:flex; flex-direction:column; padding:16px 0 16px 16px;}
.user.join > .coupon > .list > div > div {display:flex; align-items:center; margin-bottom:12px;}
.user.join > .coupon > .list > div > div > s {width:32px; height:32px; margin-right:6px; background:url(../images/coupon.png) no-repeat; background-size:100% auto;}
.user.join > .coupon > .list > div > div > strong {font-size:26px; font-weight:600; line-height:26px;}
.user.join > .coupon > .list > div > span {margin-bottom:8px; font-size:16px; font-weight:600; line-height:16px;}
.user.join > .coupon > .list > div > span > span {display:block; margin-top:4px; font-size:13px; font-weight:400; color:#a0a0a0;}
.user.join > .coupon > .list > div > small {display:flex; font-size:14px; font-weight:600; line-height: 16px; color:#a0a0a0;}
.user.join > .coupon > .list > div > small > span {display:inline-flex; align-items:center;}
.user.join > .coupon > .list > div > small > span:first-child {margin-right:4px; color:#616161;}
.user.join > .coupon > .list > strong {position:absolute; top:-1px; right:-1px; display:flex; flex-wrap:wrap; align-items:center; align-self:stretch; justify-content:center; flex-direction:column; width:52px; height:calc(100% + 2px); font-size:13px; font-weight:600; line-height:15px; text-align:center; color:#fff; background-color:#333; border-radius:0 4px 4px 0;}
.user.join > .coupon > .list > a {position:absolute; top:-1px; right:-1px; display:flex; flex-wrap:wrap; align-items:center; align-self:stretch; justify-content:center; flex-direction:column; width:52px; height:calc(100% + 2px); font-size:0; line-height:0; text-align:center; color:#fff; background:#333 url(../images/icon-download-white.png) no-repeat center center; background-size:32px; border-radius:0 4px 4px 0;}

.user.join > .button {position:sticky; bottom:0; padding:16px; background-color:#fff; z-index:901;}
.user.join > .button > button {width:100%; height:60px; font-size:16px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}

.user.join.mine > form {padding:16px; padding-bottom:0; border-top:8px solid #f6f8fa;}
.user.join.mine > form > * > dl > dd > button.cert {width:100px; height:40px; margin-left:6px; font-weight:600; color:#fff; background-color:#333; border-radius:3px;}
.user.join.mine > .profile {position:relative; padding:16px; text-align:center;}
.user.join.mine > .profile > img {display:block; width:70px; height:70px; margin:0 auto; border:3px solid #f0f2f4; border-radius:35px; box-sizing:border-box;}
.user.join.mine > .profile > a {
	position:absolute;
	left:calc((100% - 70px) / 2 + 53px);
	left:-moz-calc((100% - 70px) / 2 + 53px);
	left:-webkit-calc((100% - 70px) / 2 + 53px);
	bottom:16px;
	width:23px;
	height:23px;
	font-size:0;
	line-height:0;
	background:url(../images/config.png) no-repeat center center;
	background-size:contain;
	pointer-events:all !important;
}
.user.join.mine > .profile > a + a {left:-100px; top:-100px;}
.user.join.mine > .agree-list {padding:16px; border-top:8px solid #f6f8fa;}
.user.join.mine > .agree-list.l {padding:32px 16px; text-align:center;}
.user.join.mine > .agree-list > dl > dt {margin-bottom:8px; font-size:16px; font-weight:600;}
.user.join.mine > .agree-list > dl > dd {display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.user.join.mine > .agree-list > dl > dd > a {position:relative; display:block; width:46px; height:26px; font-size:0; line-height:0; background-color:#c8cacc; border-radius:14px;}
.user.join.mine > .agree-list > dl > dd > a > em {position:absolute; right:22px; top:2px; display:block; width:22px; height:22px; font-size:0; line-height:0; background-color:#fff; border-radius:11px;}
.user.join.mine > .agree-list > dl > dd > a.on {background-color:#333;}
.user.join.mine > .agree-list > dl > dd > a.on > em {right:2px;}
.user.join.mine > .agree-list > div > a {font-size:16px; font-weight:600; text-decoration:underline;}

body.pc .user.login > form > * > ul > li > button.icon-del,
body.pc .user.join > form > * > dl > dd > button.icon.icon-del {display:none !important;}

/** PC */
@media all and (min-width:760px) {
	.user.login {width:400px; padding:0; margin:0 auto; margin-top:64px;}
	.user.login > h2 {display:block;}
	.user.login > h3 {color:#888; font-weight:500; letter-spacing:-0.5px;}
	
	.user.login.find > form {padding:16px 0;}
	
	.user.join {width:400px; padding:0; margin:0 auto; margin-top:64px;}
	.user.join > h2 {display:block;}
	
	.user.join > .welcome {padding:0; padding-bottom:16px;}
	.user.join > .coupon {padding:16px; margin:16px 0; border:1px solid #f0f2f4; background-color:#f6f8fa; border-radius:3px;}
	.user.join > .button {padding:16px 0;}
	
	.user.login.cfrm {width:auto; margin:0;}
	.user.login.cfrm > h2 {text-align:left;}
	.user.login.cfrm > form {width:400px; margin:0 auto; margin-top:64px;}
	
	.user.join.mine {width:auto; margin:0;}
	.user.join.mine > h2 {text-align:left;}
	.user.join.mine > .profile {width:70%; padding:0; padding-bottom:16px; display:flex; align-items:center;}
	.user.join.mine > .profile > img {margin:0;}
	.user.join.mine > .profile > a {position:static; width:auto; height:32px; padding:0 10px; margin-left:16px; font-size:14px; font-weight:500; line-height:32px; border:1px solid #e4e2e0; background-image:none; border-radius:3px;}
	.user.join.mine > .profile > a + a {display:block; margin-left:8px;}
	.user.join.mine > form {padding:0; padding-top:16px; border-top:1px solid #f0f2f4;}
	.user.join.mine > form > * {width:70%;}
	.user.join.mine > form > * > dl {display:flex; align-items:flex-start;}
	.user.join.mine > form > * > dl > dt {width:120px; line-height:40px;}
	.user.join.mine > form > * > dl > dd {width:calc(100% - 120px); margin-top:0;}
	.user.join.mine > form > * > dl.e > dt {display:block;}
	.user.join.mine > form > * > dl.e > dd {margin-top:6px;}
	.user.join.mine > form > * > dl > dd > .radio {margin-top:10px;}
	.user.join.mine > form > * > .button {position:static; margin:16px 0; margin-left:120px;}
	.user.join.mine > form > * > .button > button {display:block; width:250px; margin:0 auto;}
	.user.join.mine > .agree-list {border-top:1px solid #f0f2f4;}
	.user.join.mine > .agree-list > dl {width:70%;}
	.user.join.mine > .agree-list > div {width:70%;}
	
	.user.login.wdrd {width:auto; margin:0;}
	.user.login.wdrd > h2 {text-align:left;}
	.user.login.wdrd > form {width:400px; margin:0 auto; margin-top:64px;}
}