@charset "UTF-8";

.userPage-wrap { padding-top: var(--header-height-padding); display: flex; flex-wrap: wrap; }
.userPage-wrap .userPage { width: 100%; }
.userPage, .fullContent-wrap .loginForm-wrap { padding-top: 4rem; padding-bottom: 5rem; }
@media (min-width: 1024px) {
	.userPage, .fullContent-wrap .loginForm-wrap { padding-top: 5rem; padding-bottom: 6rem; }
}

.insertForm-min .insertForm { max-width: 480px; margin-left: auto; margin-right: auto; }

.insertForm-top { margin-bottom: 3.5rem; }
.insertForm-top > * { display: block; }
.insertForm-top h2 { font-family: var(--special-font); font-weight: 700; font-size: 2.5rem; }
.insertForm-top h2 ~ * { margin-top: 2rem; }
.insertForm-top ul li { position: relative; padding-left: 1rem; }
.insertForm-top ul li:before { 
	content: ''; display: block; width: 0.2rem; height: 0.2rem; background-color: var(--basic-color); 
	position: absolute; top: 0.6em; left: 0;
}
.insertForm-top ul li + li { margin-top: 0.5rem; }
.insertForm-top ul li font { color: var(--red-color); font-weight: 400; }
.insertForm-top .cautionText { font-family: var(--special-font); text-align: center; line-height: 1.5; font-size: 1.75rem; padding-top: 2rem; color: #777; }

.insertForm .form-group + .form-group { margin-top: 1.8rem; }
.insertForm .form-group .form-item > label { display: block; margin-bottom: 0.8rem; font-weight: 600; font-size: 1.6rem; }
.insertForm .form-group .form-item input:not([type=submit]) { padding: 1.3rem; width: 100%; border-radius: var(--small-radius); }
.insertForm .form-group.active .form-item input:not([type=submit]),
.insertForm .form-group.current .form-item input:not([type=submit]) { background-color: #fff;  }
.insertForm .form-group.current .form-item input:focus { box-shadow: 0 0 0 4px rgba(81,106,235,0.1); }
.insertForm .form-group.current .form-item input:read-only { box-shadow: none !important; }

.insertForm .form-group.hasError .form-item input:not([type=submit]) { border-color: var(--red-color); }
.insertForm .form-group.current .form-item input:not([type=submit]) { border-color: var(--basic-color); }
.insertForm .form-group.current .form-item input:read-only { border-color: #dedede; }
.insertForm .form-group span.error { display: block; visibility: hidden; color: var(--red-color); font-size: 1.4rem; max-height: 0; opacity: 0; transition: max-height 0.4s; }
.insertForm .form-group.hasError span.error { visibility: visible; max-height: 4rem; opacity: 1; padding-top: 0.5rem; } 

.asterisk-info { float: right; font-size: 1.4rem; padding-top: 0.3rem; }
.insertForm .asterisk { color: var(--red-color); font-size: 2rem; font-style: normal; padding-left: 0.2rem; }
.insertForm .form-info { display: block; font-size: 1.4rem; color: #1247b3;  }
.insertForm .form-info li + li { padding-top: 0.5rem; }
.insertForm .insertWarning, .userInsert p.error, .userBox-wrap label.error { font-size: 1.4rem; display: block; padding: 1.2rem 0 0; color: #eb6100; margin: 0; }

.insertForm .form-group .form-item .withBtn { position: relative; }
.insertForm .form-group .form-item .withBtn > input { padding-right: 10rem; }
.insertForm .form-group .form-item .withBtn .initialBtn { font-size: 1.4rem; padding: 0.8rem 0; border-radius: 10rem; position: absolute; top: 50%; right: 1rem; width: 8rem; transform: translateY(-50%); overflow: hidden; }

.insertForm .form-group .form-item .form-multi { display: flex; gap: 0.8rem; }
.insertForm .form-group .form-item .form-multi > * { flex: 1; }
.insertForm .form-group .form-item .form-multi > .tel,
.insertForm .form-group .form-item .form-multi > .mobile { flex: 0.7; }

.insertForm .form-group .form-item .form-radio .customRadio { display: flex; border: 1px solid #dedede; border-radius: var(--small-radius); }
.insertForm .form-group .form-item .form-radio .customRadio > li { flex: 1; padding-left: 1rem; padding-right: 1rem; }
.insertForm .form-group .form-item .form-radio .customRadio > li + li { border-left: 1px solid #dedede; }
.insertForm .form-group .form-item .form-radio .customRadio > li > label { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.insertForm .form-group .form-item .form-address .withBtn input { padding-right: 12rem; }
.insertForm .form-group .form-item .form-address .withBtn .initialBtn { width: 10rem; }
.form-address > input { margin-top: 0.6rem; }
#addr_start { display:none; border:1px solid; width:100%; height:300px; margin:5px 0; position:relative; }
#btnFoldWrap { cursor:pointer; position:absolute; right:0px; top:-1px; z-index:1; width: 20px; height: 20px; line-height: 20px; background-color: #000; color: #fff; font-size: 20px; }

.insertForm * + .warningBox-wrap { margin-top: 1.5rem; }

.insertForm .form-group .form-item .form-item-btn .initialBtn { text-align: left; padding: 1.525rem 1.3rem; display: flex; }
.insertForm .form-group .form-item .form-item-btn .initialBtn i { display: block; margin-left: auto; }


/* ------ loginForm ( login, find_id, find_pw ) ------ */


.loginForm-wrap { background-color: #fff; }

.loginForm { max-width: 480px; margin-left: auto; margin-right: auto; }
.loginForm .form-group {  position: relative; }
.loginForm .form-group + .form-group { margin-top: 1.5rem; }
.loginForm .form-group.hasError .form-item { border-color: var(--red-color) !important; }
.loginForm .form-group.hasError label { color: var(--red-color) !important; }

.loginForm .form-group .form-item { position: relative; border: 1px solid #dfe0e6; background-color: #f9fbfc; border-radius: var(--small-radius); }
.loginForm .form-group .form-item label { 
	margin: 0; font-weight: 400; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); transition: all 0.4s; background: rgba(255,255,255,0);
	display: block; padding: 0.2rem 0.5rem; text-transform: uppercase; color: #a4a5ae; cursor: text;
}
.loginForm .form-group .form-item input:not([type=submit]) { outline: none;  border: none; border-radius: var(--small-radius); display: block; padding: 1.5rem 1.2rem 1.45rem; width: 100%; color: #444; font-size: 1.6rem; z-index: 1; background-color: #f9fbfc; }
.loginForm .form-group.active .form-item,
.loginForm .form-group.current .form-item { background-color: #fff; }
.loginForm .form-group.active .form-item label,
.loginForm .form-group.current .form-item label { top: 0; font-size: 1.3rem; background: rgba(255,255,255,1); border-radius: 0.4rem; }

.loginForm .form-group.current .form-item:focus-within { box-shadow: 0 0 0 4px rgba(81,106,235,0.1); }
.loginForm .form-group.current .form-item { border-color: var(--basic-color); }
.loginForm .form-group.current .form-item input:focus { box-shadow: none; }
.loginForm .form-group.current .form-item label { color: var(--basic-color); }

.loginForm .form-group span.error { text-align: right; }

.loginForm-checkbox { margin-top: 1.5rem; }
.loginForm-btns {  margin-top: 2rem; }
.loginForm-btns > * + * { margin-top: 1rem; }
.loginForm-btns .initialBtn { padding-top: 1.6rem; padding-bottom: 1.6rem; border-radius: var(--small-radius); }
.loginForm-btns .lineBtn { color: var(--gray-color-deep); text-shadow: none; }
.loginForm-btns .initialBtn span { font-size: 1.5rem; }
.loginForm-btns > ul { display: flex; gap: 1rem; }
.loginForm-btns > ul > li { flex: 1; }


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

.orLine { position: relative; padding: 0.5rem 0 0.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; }


/* ------ sideImg ------ */

.userPage-side-img { padding: 0; display: flex; }
.userPage-side-img .userPage-img { 
	display: none; align-items: center; width: 40rem; 
	background-repeat: no-repeat; background-position: center; background-size: cover;
	background-color: var(--basic-color); background-image: url("/style_www/img/bg/login_bg.jpg"); 	animation: image-move 35s linear infinite;
}
@keyframes image-move {
	0% { background-size: auto 100%; background-position: 30% center; }
	50% { background-size: auto 150%; background-position: 60% center; }
	100% { background-size: auto 100%; background-position: 30% center; }
}

.userPage-side-img .userPage-img video { width: 100%; height: 100%; object-fit: cover; }
.userPage-side-img .insertForm-wrap { width: 100%; display: flex; align-items: center; padding-left: 3rem; padding-right: 3rem; }
.userPage-side-img .insertForm { width: 100%; }

@media (min-width: 980px) {
	.userPage-side-img .userPage-img { display: flex;  }
	.userPage-side-img .insertForm-wrap { width: calc(100% - 40rem); }
}
@media (min-width: 1024px) {
	.userPage-side-img .userPage-img { width: 45rem; }
}
@media (min-width: 1360px) {
	.userPage-side-img .insertForm-wrap { width: calc(100% - 45rem); }
	.userPage-side-img .insertForm { margin-left: 177.5px; }
}



/* ------ findUser-info ------ */

.findUser-info { display: block; padding: 3rem 2.5rem; text-align: center; border: 1px solid #dedede; border-radius: var(--small-radius); }
.findUser-info p { font-size: 1.7rem; line-height: 1.7; }
.findUser-info div { font-size: 1.8rem; margin-top: 2rem; border-radius: 0.6rem; border: 1px solid var(--basic-color-brihgt); background-color: var(--basic-color-white); padding: 2rem 1rem;; }



/* ------ userJoin ------ */

.userPage-min > section { width: 50rem; max-width: 100%; margin-left: auto; margin-right: auto; }
.userButton-wrap { max-width: 50rem; margin: 2.5rem auto 0; }
.userButton-wrap ul { display: flex; gap: 1rem; }
.userButton-wrap ul li { flex: 1; }



/* ------ userFull ------ */

.userPage-full > section { width: 100%; margin-left: auto; margin-right: auto; }

@media (min-width: 620px) {
	.userPage-full > section { max-width: var(--max-width); width: 100%; }
	.userPage-full .insertForm .form-group { position: relative;  padding-left: 20rem; padding-top: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #dedede; }
	.userPage-full .insertForm .form-group:first-child,
	.userPage-full .insertForm .contentTitle + .form-group { border-top: 2px solid var(--basic-color); }
	.userPage-full .insertForm .form-group + .form-group { margin-top: 0; }
	.userPage-full .insertForm .form-group .form-item > label { position: absolute; left: 0; top: 1.45em; width: 20rem;  }
	.userPage-full .insertForm .form-group .form-item { width: 38rem; max-width: 100%; }
	.userPage-full .insertForm .form-group .form-item.form-item-short { width: 28rem; max-width: 100%; }
	.userPage-full .insertForm .form-group .form-item.form-item-long { width: 50rem; max-width: 100%; }

}

@media (min-width: 980px) {
	.userPage-full .insertForm .form-info-group { display: flex; gap: 1rem; position: relative; transition: padding 0.2s; align-items: center; }
	.userPage-full .insertForm .form-info-group.hasError { padding-bottom: calc(1.2rem + 2.32rem); }
	.userPage-full .insertForm .form-info-group span.error { position: absolute; left: 20rem; top: 5.9rem; opacity: 0; }
	.userPage-full .insertForm .form-info-group.hasError span.error { opacity: 1; transition: opacity 0.2s 0.1s; }
}


/* ------ userJoin-step ------ */

.userJoin-step { margin: 0rem 0 3rem; }
.userJoin-step ul { display: flex; }
.userJoin-step ul li { flex: 1; border: 1px solid #ccc; font-size: 1.5rem; padding: 1.3rem; }
.userJoin-step ul li + li { border-left: 0; }
.userJoin-step ul li:first-child { border-radius: var(--small-radius) 0 0 var(--small-radius); }
.userJoin-step ul li:last-child { border-radius: 0 var(--small-radius) var(--small-radius) 0; }
.userJoin-step ul li > * { display: block; }
.userJoin-step ul li i { font-size: 0.9em; }
.userJoin-step ul li span { font-weight: 500; margin-top: 0.5rem; }
.userJoin-step ul li.active { border-color: var(--basic-color); background-color: var(--basic-color);  }
/* .userJoin-step ul li:not(.active):nth-child(1) { border-right: 0; }
.userJoin-step ul li:not(.active):nth-child(2) { border-left: 0; }
.userJoin-step ul li:not(.active):nth-child(3) { border-left: 0; }  */
.userJoin-step ul li.active > * { color: #fff; }

@media (min-width: 980px){
	.userJoin-step { margin: 0rem 0 4rem; }
	.userJoin-step ul li { padding: 1.8rem 2rem 1.6rem; font-size: 1.6rem; }
}


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

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




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


.userCompletion-wrap .user-icon { text-align: center; }
.userCompletion-wrap .user-icon .xi-check-circle { font-size: 7.5rem; color: var(--blue-color); margin: 1rem; }

.userCompletion-wrap dl { padding: 1.5rem 0 0rem; text-align: center; }
.userCompletion-wrap dl dt { font-size: 3rem; font-family: var(--special-font); }
.userCompletion-wrap dl dd { margin-top: 1.5rem; }
.userCompletion-wrap dl dd * { display: block; }
.userCompletion-wrap dl dd em { font-size: 1.8rem; }
.userCompletion-wrap dl dd span { font-size: 1.5rem; line-height: 1.5; color: #888; margin-top: 0.8rem; }

.userCompletion-wrap .userButton-wrap ul { flex-wrap: wrap; }
.userCompletion-wrap .userButton-wrap ul li { width: 100%; flex: auto; }
.userCompletion-wrap .userButton-wrap ul li .basicBtn { padding: 1.8rem; }

.userPage-full .userCompletion-content { border: 1px solid #dedede; border-radius: var(--small-radius); padding: 2rem 3rem 4rem; }

.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; }


.formError { padding: 1rem; margin-top: 2rem; border-radius: var(--small-radius); font-size: 1.5rem; color: var(--red-color); background-color: #fff0f3; } 
.formError i { display: inline-block; margin-right: 0.3rem; }

header.singleShow #headerNav > ul > li > a > span { color: #555; }
.burgerBtn span { background-color: #555; }