@charset "utf-8";
@import url('member.css');

/* 필수입력 */
.common-required::before{ content:'*'; color:#d5282c; }

/* 테이블 레이아웃 */
.common-table{
	th, td{ padding-block:20rem; border-bottom:1px solid #eaecf1; }
	th{ font-weight: 600; text-align:left; }
	td{ color: #777; }
	.tip{ display:block; margin-top:10rem; font-size:14rem; color: #999;}
	@media(max-width:767px){
		col{display:none;}
		tr{display:flex; flex-direction:column;}
		th, td{ display: block; width:100%; padding-block: 10rem 0; }
	}
}

/* 폼 공통, 커먼 테이블과 함께 쓰는 경우가 많은데, 뷰 페이지 같은 경우 폼 요소가 없어 의미 없음, 프린트는 확인 필요 */
.common-form{
	:where(
		[type="date"],
		[type="datetime-local"],
		[type="email"],
		[type="month"],
		[type="number"],
		[type="password"],
		[type="search"],
		[type="tel"],
		[type="text"],
		[type="time"],
		[type="url"],
		[type="week"],
		select,
		textarea,
		.common-button
	){ margin:0; min-width: 0; height: 52rem; padding: 15rem; outline:none;
		&::placeholder{ color: #ccc; }
		&:focus, &:hover{ border-color: #444; }
	}
	@media(prefers-reduced-motion:no-preference){
		:where(
			[type="date"],
			[type="datetime-local"],
			[type="email"],
			[type="month"],
			[type="number"],
			[type="password"],
			[type="search"],
			[type="tel"],
			[type="text"],
			[type="time"],
			[type="url"],
			[type="week"],
			select,
			textarea
		){ transition: .3s; }
	}
	@media(max-width:767px){
		:where(
			[type="date"],
			[type="datetime-local"],
			[type="email"],
			[type="month"],
			[type="number"],
			[type="password"],
			[type="search"],
			[type="tel"],
			[type="text"],
			[type="time"],
			[type="url"],
			[type="week"],
			select,
			textarea
		){ padding: 8rem; height: 44rem; }
	}
}

/* 온라인 문의 */
.online-item{
	& ~ .online-item{ margin-top: 40rem; }
	& > label{ margin-bottom: 15rem; font-weight:600; color:#333; }
	input[readonly], input[disabled]{ background: #f3f3f3; }
	textarea{ min-height:230rem; }
	.caption{ margin-top: 10rem; font-size: 14rem; color: #c51917; }
	@media(max-width:767px){
		& ~ .online-item{ margin-top: 24rem; }
		textarea{ min-height: 130rem; }
	}
}

/* 온라인 문의 하단 취소, 저장 */
.btn_area, .online-btn-group{ margin-top: 35rem; display:flex; justify-content: center; gap:5rem; }
@media(max-width:767px){
	/* .online-form .btn_area > *{flex:1;} */
}

/* 개인정보 수집 이용 동의 */
.common-privacy{ --bg: #fafafa; --border: #ddd; margin-bottom: 70rem;
	/* 회원 가입 */
	.join_area &{ margin: 30rem 0; }
	.top-title{ margin: 0; padding: 15rem; background: var(--bg); border: solid var(--border); border-width: 1px 1px 0; border-radius: 5rem 5rem 0 0; font-size: 17rem; color: #222; }
	.top-title + .terms{ border-radius: 0; }

	/* 공통 */
	.terms{ overflow: auto; width: 100%; height: 250rem; padding: 30rem; border:1px solid var(--border); border-radius:5rem 5rem 0 0; font-size: 15rem; outline: none; }
	.agree-group{ padding: 18rem 25rem; background: var(--bg); border: solid var(--border); border-width: 0 1px 1px; border-radius: 0 0 5rem 5rem; font-weight: 500; }
	.label-group{ display: inline-flex; align-items: center; gap: 1ch; }
	[type="checkbox"]{ position:relative; width: 22rem; aspect-ratio: 1; background:#fff; border: 1px solid var(--border); }
	[type="checkbox"]:not(:checked){ appearance: none; }
	[type="checkbox"]:checked, [type="checkbox"]:hover{ border-color: currentColor; }
	@media(prefers-reduced-motion:no-preference){
		[type="checkbox"]{ transition: .3s; }
	}
	@media(max-width:767px){
		.terms{ height: 140rem; padding: 15rem; }
	}
}

/* design radio - 개인정보 수집 동의, 회원 가입 성별, 관리자 페이지의 사용 여부 */
.designRadio{display:flex; flex-wrap:wrap; align-items:center; gap:3rem 50rem;}
.designRadio{display:inline-block; margin:2rem 0; vertical-align:middle;}
.designRadio input:is([type="radio"]){position:absolute; opacity:0;}
.designRadio input:is([type="radio"]) + label{position:relative; min-height:16rem; padding-left:20rem; padding-bottom:2rem; margin-right:10rem; cursor:pointer; line-height:1;}
.designRadio input:is([type="radio"]) + label:before{content:''; display:block; position:absolute; top:0; left:0; width:16rem; height:16rem; background:url(../../images/board/sp_radio.svg) no-repeat 0 -16rem; background-size:16rem 48rem;}
.designRadio.white input:is([type="radio"]) + label:before{background:url(../../images/board/sp_radio_w.svg) no-repeat 0 -16rem; background-size:16rem 48rem;}
.designRadio input:is([type="radio"]):checked + label:before{background-position:0 0;}
.designRadio input:is([type="radio"]):disabled + label:before{background-position:0 -32rem;}
.designRadio.agree{display:block;margin-top:20rem; text-align:center;}
.designRadio.agree input:is([type="radio"]) + label{margin:2rem 30rem;}
.designRadio + .designCheck{margin-left:10rem;}
@media(max-width:480px){
	.designRadio.agree{margin-top:11rem;}
}

/* design checkbox - 비밀글, 공지글, 첨부파일 삭제 등등 일부 폼에서 사용 */
.designCheck{display:flex; flex-wrap:wrap; align-items:center; gap:3rem 50rem;}
.designCheck{display:inline-block; margin:2rem 0; vertical-align:middle;}
.designCheck input:is([type="checkbox"]){position:absolute; opacity:0;}
.designCheck input:is([type="checkbox"]) + label{position:relative; min-height:16rem; padding-left:20rem; padding-bottom:2rem; margin-right:10rem; cursor:pointer; line-height:1;}
.designCheck input:is([type="checkbox"]) + label:before{content:''; display:block; position:absolute; top:0rem; left:0rem; width:16rem; height:16rem; background:url(../../images/board/sp_check.svg) no-repeat 0 -16rem; background-size:16rem 48rem;}
.designCheck.white input:is([type="checkbox"]) + label:before{background:url(../../images/board/sp_check_w.svg) no-repeat 0 -16rem; background-size:16rem 48rem;}
.designCheck input:is([type="checkbox"]):checked + label:before{background-position:0 0;}
.designCheck input:is([type="checkbox"]):disabled + label:before{background-position:0 -32rem;}
.designCheck.noText input:is([type="checkbox"]) + label{margin-right:0; font-size:0; vertical-align:middle;}
.designCheck.noText input:is([type="checkbox"]) + label:before{top:-1rem;}

/* design file */
.designFile{display:flex; align-items:center; border-radius:0;}
.designFile{--heightSize:52rem;}
.designFile + .designFile{margin-top:6rem;}
.designFile label{margin-bottom:0; margin-left:5rem; font-size:14rem;}
.designFile{--heightSize:60rem; position:relative; width:100%; margin:2rem 0; background:#eee; border-radius:5rem;}
.designFile em{color:#999; padding:0rem !important;}
.designFile input[type="file"]{overflow:hidden; position:absolute; width:1px; height:1px; padding:0; margin:-1rem; border:0; clip:rect(0,0,0,0);}
.designFile input[type="text"]{width:100%; height:100%;}
.designFile label.btn{display:block; position:relative; z-index:2; width:100%; height:var(--heightSize); line-height:var(--heightSize); box-sizing:border-box; padding:0 30rem; background-color:transparent; text-align:right; font-size:16rem; color:#999; cursor:pointer;}
.designFile:not(.mob) input[type="text"]{position:absolute !important; top:0; left:0; background-color:transparent; border-width:0 !important;}
.designFile:not(.mob) em{position:absolute; left:30rem; top:50%; font-size:16rem; transform:translateY(-50%);}
.designFile:not(.mob) em ~ input[type="text"]{padding-left:115rem;}
.designFile.mob{ display: block; background-color:transparent;}
.designFile.mob input[type="text"]{overflow:hidden; position:absolute !important; width:1px; height:1px; padding:0; margin:-1rem; border:0; clip:rect(0,0,0,0);}
.designFile.mob label{display:none;}
.designFile.mob .designCheck label{display:inline-block;}
.designFile.mob .button.white{position:static; font-size:14rem;}
.designFile.mob input[type="file"]{position:static; width:100%; height:auto; padding:inherit; margin:0; background:#eee; border:inherit; clip:inherit; font-size:13rem;}
.designFile.mob em{display:block; margin-bottom:5rem;}
.designFile + .tip{display:block; margin-top:7rem;}
.designFile ~ .button.white{vertical-align:middle;}
@media(max-width:767px){
	.designFile.mob em{ display: none; }
}

/* 연락처 */
.data_call{display:flex; align-items:center;}
.data_call select{ width: 100%; }
.data_call > i{display:flex; justify-content:center; align-items:center; position:relative; margin:0 8rem; font-size:23rem; color:#999;}
.data_call > i::after{content:""; display:block; width:8rem; height:1px; background:#000;}
.data_call > *:not(i){width:calc((100% / 3) - 13rem);}
.data_call .select{width:auto;}
@media(max-width:480px){
	.data_call > i::after{width:5rem;}
	.data_call > i{margin:0 4rem;}
	.data_call > *:not(i){width:-webkit-calc((100% / 3) - 7rem); width:calc((100% / 3) - 7rem);}
}

/* 주소 */
.designFile input:focus,
.data_address ul li:not(:last-child) input:focus,
.designFile input:hover,
.data_address ul li:not(:last-child) input:hover{border-color:#ddd !important;}
.data_address ul li:not(:last-child){margin-bottom:8rem;}
.data_address ul li > input{width:100%;}
.data_address ul li{display:flex; align-items:center;}
.data_address ul li > a{margin-left:8rem;}

.button_new{min-width:100rem; height:50rem; line-height:50rem; padding:0 0; background:#fff; border:1px solid #393939; font-size:14rem; text-align:center; transition:all 0.2s ease 0s; cursor:pointer;}
.button_new:hover{border-color:#222; background:#555; color:#fff;}
.button_new.black{background:#6e6e6e; border:1px solid #5e5e5e; color:#fff;}
.button_new.black:hover{background:#363636;}
.button_new:hover, .button_new:hover span{color:#fff;}
input.button_new{height:52rem; line-height:52rem;}
@media(max-width:480px){
	.data_address ul li:not(:last-child){margin-bottom:5rem;}
	.data_address ul li > a{margin-left:4rem;}	
	.button_new{height:42rem; line-height:42rem;}
	input.button_new{height:44rem; line-height:44rem;}
}

/* 이메일 */
.data_email{display:flex; align-items:center; flex-wrap:wrap; max-width: 60ch; width:100%; position:relative;}
.data_email > div{display:flex; align-items:center; width:100%;}
.data_email > div > i{margin:0 8rem;}
.data_email > div > input:not([type="radio"]):not([type="checkbox"]){width:100%;}
.data_email select{margin:0 4rem;}
#tmp_mail{ width: 150rem; }
@media(max-width:480px){
	.data_email> div{flex-wrap:wrap;}	
	.data_email select{margin-top:3rem;}
	.data_email select,
	.common-form .select{width:100%; margin-right:0; margin-left:0;}
	.common-form .select{height:auto; padding:0; border:0;}
	
	.data_email> div > input{width: -webkit-calc((100% / 2) - 11rem);width: calc((100% / 2) - 11rem);}
	.data_email> div > i{margin:0 5rem; font-size:13rem;}
	.data_email #mail_chk{position:absolute; right:0; bottom:0;}
	#tmp_mail{ width: 100%; }
}

/* 스팸 - 게시판, 온라인 문의 */
.common-spam{display:flex; flex-wrap: wrap; align-items:stretch; gap: 5rem; user-select: none; }
.common-spam .number{ display: flex; align-items: center; justify-content: center; padding: 0rem 23rem; background:#222; color:#fff; font-size:15rem; font-weight:700; }
.common-spam .caption{ width: 100%; }
@media(max-width:767px){
	.common-spam .number{ padding:0 11rem; }
}

/* 240112 회원가입 */
.common-form.common-form :is(#address1, #address2){ margin-top: 2rem; }
.common-table.common-form .button{ margin: 0; height: 52rem; }
@media(max-width:440px){
	.common-table .button{ height: 44rem; }
}