@charset "UTF-8";

.user-wrap { max-width: 480px; margin: auto; padding: 3rem 0; }
.user-wrap-long { padding: 2rem 0; }

h1.userTitle-wrap { display: block; text-align: center; padding: 2rem 0;  font-size: 3.5rem; }
.userTitle-wrap strong { font-weight: 900; color: var(--basic-color); display: block; }
.userTitle-wrap span { display: block; font-size: 0.5em; color: #888; margin-top: 1rem;  }

.userBox-wrap { padding: 2.5rem; }
.userBox-wrap .customCheckbox label span { font-size: 1.5rem; }  

@media (min-width: 640px){
	.user-wrap { padding: 6rem 0 8rem; }
	.user-wrap-long { padding: 4rem 0; }
	.userTitle-wrap { padding-bottom: 3rem; }
	.userBox-wrap  { border-radius: 1rem; border: 1px solid #ededed; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); }
}


/* ------ userInsert ------ */

.userInsert > li + li { margin-top: 1rem; }
.userInsert > li > h3 { display: block; padding: 0 0.1rem 0.5rem; font-size: 1.5rem; color: #555; }
.userInsert > li + li > h3 { padding-top: 1.1rem; }
.userInsert > li > .inner { border: 1px solid #dadada; position: relative; padding: 1.6rem 1.2rem; }
.userInsert > li > .inner.customSelect label { padding: 1.2rem 3rem 1.2rem 1.2rem; }
.userInsert > li > .inner:focus-within { border-color: var(--basic-color); transition: all 0.2s ease; z-index: 10; }
.userInsert > li > .inner * { line-height: 2rem; }
.userInsert > li > .inner input { border: 0; width: 100%; }
.userInsert > li.userInsert-btn > .inner { width: calc(100% - 10rem); }
.userInsert > li.userInsert-btn > .inner .initialBtn { display:block; position: absolute; left: 100%; top: -1px; bottom: -1px; width: 10rem; font-size: 1.3rem; }
.userInsert > li.userInsert-lineBtn { padding-top: 1.1rem; }
.userInsert > li.userInsert-lineBtn > .inner { display: block; position: relative; padding: 1.2rem 0.9rem; }
.userInsert > li.userInsert-lineBtn > .inner i { color: var(--basic-color) !important; }
.userInsert > li.userInsert-lineBtn > .inner span { display: inline-block; vertical-align: middle; color: #333; }
.userInsert > li.userInsert-lineBtn > .inner:after { 
	content: attr(data-text);  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);  
	background-color: rgba(65,120,200,0.3); color: var(--basic-color-deep);; font-size: 0.8em; padding: 0.5rem 1rem; border-radius: 2rem;
}
.userInsert > li.userInsert-lineBtn > .inner:hover::after { color: #fff; background-color: rgba(65,120,200,1); }
.userInsert > li.userInsert-lineBtn .warningText { margin-top: 0.7rem; font-size: 0.9em; }

.userInsert.userInsert-icon > li > .inner { padding-left: 40px; }
.userInsert.userInsert-icon > li > .inner i { color: #aeaeae; line-height: 1; position: absolute; left: 1.2rem; top: 49%; transform: translateY(-50%); }
.userInsert.userInsert-icon > li > .inner:focus-within i { color: #333; }
.userInsert.userInsert-icon > li > .inner input,
.userInsert.userInsert-icon > li > .inner.customSelect { font-size: 1.5rem; }
.userInsert.userInsert-icon > li > .inner.customSelect { padding: 1.6rem 3rem 1.6rem 40px; width: 100%; }
.userInsert.userInsert-icon > li > .inner.customSelect label { padding: 0; }

.userInsert.userInsert-icon > li > .inner inputinput:disabled,
.userInsert.userInsert-icon > li > .inner.disabled { background: #f5f5f5; }


.userButton-wrap { margin-top: 2.5rem; }
.userButton-wrap .initialBtn { border-radius: 0.5rem; padding: 1.5rem 0; font-size: 1.6rem; font-weight: 500; color: #888; }
.userButton-wrap .basicBtn { color: #fff; }

.insertInfo { display: block; font-size: 1.4rem; color: #1247b3; margin-top: 0.5rem; }
.insertInfo li { padding-top: 0.5rem; }
.insertWarning, .userInsert p.error { font-size: 1.4rem; display: block; padding: 1.2rem 0 0; color: #eb6100; margin: 0; }
.asterics { color: red; font-size: 2rem; }

/* ------ orLine ------ */

.orLine { position: relative; margin: 1.5rem 0 1.5rem; text-align: center; }
.orLine span { display: inline-block; color: #aaa; text-align: center; background-color: #fff; font-size: 1.2rem; position: relative; z-index: 1; padding: 0 10px; }
.orLine:before { content: ''; position: absolute; left: 0; top: calc(50% + 0.5px); height: 1px; width: 100%; border-top: 1px dashed #ccc; z-index: 0; }



/* ------ login ------ */

.userLogin-wrap .userInsert { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); border-radius: 0.5rem; }
.userLogin-wrap .userInsert > li + li { margin-top: -1px; }
.userLogin-wrap .userInsert > li:first-child > .inner { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } 
.userLogin-wrap .userInsert > li:last-child > .inner { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.userLogin-wrap .userLogin-btn .grid-wrap .initialBtn { font-size: 1.5rem; padding: 1.4rem 0.8rem; color: #777; }



/* ------ userSelect ------ */

.userSelect-wrap { text-align: center; background-color: #f7f9fa; border-color: #e7ecef; }
.userSelect-icon { position: relative; display: inline-block; position: relative; }
.userSelect-icon .xi-user-o { font-size: 8rem; color: #555; }
.userSelect-icon .xi-plus-min { 
	position: absolute; right: 0; bottom: 0; background-color: var(--basic-color); color: #fff;
	width: 3rem; height: 3rem; line-height: 3rem; border-radius: 3rem; font-size: 2.5rem;
 }

.userSelect_icon .xi-check-circle { font-size: 8rem; color: var(--basic-color); margin: 1rem; }

.userSelect-wrap dl { margin: 1.5rem 0 2rem; }
.userSelect-wrap dl dt { font-size: 3rem; }
.userSelect-wrap dl dd { margin-top: 0.5rem; }
.userSelect-wrap dl dd * { display: block; }
.userSelect-wrap dl dd span { font-size: 1.4rem; color: #888; margin-top: 0.5rem; }

.userSelect-wrap ul li + li { margin-top: 1rem; }




/* ------ agree ------ */

.userAgree > li:first-child { padding-bottom: 2rem; border-bottom: 1px dashed #ccc; }
.userAgree > li + li { padding-top: 2.5rem; }
.userAgree .switchCheckbox label span font { font-size: 0.8em; }
.userAgree-content { border-radius: 0.5rem; border: 1px solid #cecece; overflow: hidden; margin-top: 0.5rem; }
.userAgree-content > .inner { height: 100px; padding: 1rem 1.5rem; overflow-y: scroll; font-size: 1.3rem; color: #777; }



/* ------ singup ------ */

.userSingup-wrap { padding: 1rem 2.5rem 2.5rem; }
.userSingup-wrap .userInsert > li > .inner { border-radius: 0.5rem; }
.userSingup-wrap .userInsert > li.userInsert-btn > .inner { border-radius: 0.5rem 0 0 0.5rem; }
.userSingup-wrap .userInsert > li.userInsert-btn .initialBtn { border-radius: 0 0.5rem 0.5rem 0; }
.userRadio .customRadio > li { display: inline-block; }
.userRadio .customRadio > li + li { padding-left: 1.5rem; }
.userSingup-btn { margin-top: 4rem; }
.userSingup-btn .initialBtn { padding: 1.6rem 0; }


.userInsert-double > ul, .userInsert-call > ul { margin-left: -0.5rem; }
.userInsert-double > ul:after, .userInsert-call > ul:after { content: ''; display: block; clear: both; }
.userInsert-double > ul > li, .userInsert-call > ul > li { padding-left: 0.5rem; float: left; }
.userInsert-double > ul > li { width: 50%; }
.userInsert-call > ul > li:first-child { width: 8rem; }
.userInsert-call > ul > li { width: calc(50% - 4rem); }
.userInsert-double > ul > li > .inner,
.userInsert-call > ul > li > .inner { border-radius: 0.5rem; width: 100%; border: 1px solid #dadada; position: relative; padding: 1.2rem; height: 4.6rem; font-size: 1.5rem; }
.userInsert-double > ul > li > .inner:focus-within,
.userInsert-call > ul > li > .inner:focus-within { border-color: #2373db; transition: all 0.2s ease; z-index: 10; }
.userInsert-double > ul > li > .inner.customSelect,
.userInsert-call > ul > li > .inner.customSelect { padding-right: 3rem; }
.userInsert-double > ul > li > .inner.customSelect label,
.userInsert-call > ul > li > .inner.customSelect label { padding: 0; line-height: 2rem; }
.userInsert-double > ul > li > .inner input,
.userInsert-call > ul > li > .inner input { border: 0; outline: 0; }

/* ------ mypage ------ */

.profileInsert-wrap { padding: 2.5rem 0; }
.profileImg-wrap { width: 150px; height: 150px; position: relative; margin: 0 auto 3.5rem; }
.profileImg-wrap > div { border: 1px solid #ededed; border-radius: 100px; overflow: hidden; }
.profileImg-wrap .resetBtn { position: absolute; top: -5px; right: -10px; z-index: 10; font-size: 0; color: #fff; background-color: rgba(0,0,0,0.5); padding: 8px; border-radius: 20px; }
.profileImg-wrap .resetBtn i:before { font-size: 14px; }




/* ------ userCompletion ------ */

.userCompletion-wrap { text-align: center; background-color: #f7f9fa; border-color: #e7ecef; }
.userCompletion-wrap .user-icon .xi-check-circle { font-size: 7.5rem; color: var(--special-color); margin: 1rem; }

.userCompletion-wrap dl { margin: 1.5rem 0 2rem; }
.userCompletion-wrap dl dt { font-size: 3rem; }
.userCompletion-wrap dl dd { margin-top: 0.5rem; }
.userCompletion-wrap dl dd * { display: block; }
.userCompletion-wrap dl dd span { font-size: 1.4rem; color: #888; margin-top: 0.5rem; }

.userCompletion-wrap ul li + li { margin-top: 1rem; }