@layer form{
	@import url('member.css');

	/* 기능형 */
	.wdt30{max-width:327rem;width:100%;}
	.wdt50{max-width:500rem;width:100%;}
	.wdt70{max-width:840rem;width:100%;}

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

	/* 폼 공통 */
	.bbsForm input[type="text"],
	.bbsForm input[type="email"],
	.bbsForm input[type="tel"],
	.bbsForm input[type="number"],
	.bbsForm input[type="password"],
	.bbsForm select{height:52rem; margin:0; padding:0 15rem; transition:all 0.3s ease 0s; outline:none;}
	.bbsForm input[type="text"]:focus,
	.bbsForm textarea:focus,
	.bbsForm input[type="text"]:hover,
	.bbsForm input[type="email"]:hover,
	.bbsForm input[type="tel"]:hover,
	.bbsForm input[type="number"]:hover,
	.bbsForm input[type="password"]:hover,
	.bbsForm select:hover,
	.bbsForm textarea:hover{border-color:#444;}
	.bbsForm .designSelect .select{width:150rem; height:52rem;}
	.bbsForm_data > label{margin-bottom:15rem; font-weight:600; font-size:16rem; color:#333; text-indent:1px;}
	.bbsForm_data:not(:first-child){margin-top:40rem;}
	.bbsForm_data .designSelect .selectbox{border:1px solid #ddd; border-bottom:1px solid #ddd;}
	.bbsForm_data .designSelect .selectbox.active{border:1px solid #000; border-bottom:0;}
	.bbsForm input[type="text"]::placeholder{color:#ccc;}
	.bbsForm textarea{padding:15rem; transition:all 0.3s ease 0s; min-height:230rem; outline:none;}
	.bbsForm_data.mg{margin-top:20rem;}
	.bbsForm .designFile{display:flex; align-items:center; border-radius:0;}
	.bbsForm .designFile{--heightSize:52rem;}
	.bbsForm .designFile + .designFile{margin-top:6rem;}
	.bbsForm .designFile label{margin-bottom:0; margin-left:5rem; font-size:14rem;}
	.bbsForm .caption{margin-top:10rem; font-size:14rem; color:#c51917;}
	.bbsForm  input[readonly],
	.bbsForm input[disabled]{background:#f3f3f3;}
	.bbsForm .designRadio,
	.bbsForm .designCheck{display:flex; flex-wrap:wrap; align-items:center; gap:3rem 50rem;}
	@media(max-width:480px){
		.bbsForm input[type="text"],
		.bbsForm input[type=email],
		.bbsForm input[type=tel],
		.bbsForm input[type=number],
		.bbsForm .designSelect .select,
		.designSelect .selectbox{height:44rem; box-sizing:border-box; padding:0 8rem;}
		.bbsForm textarea{padding:8rem; min-height:130rem;}
		.bbsForm .wdt30{width:100%;}
	}

	/* 관리자 및 board common 수정 */
	.designFile + .tip{display:block; margin-top:7rem;}
	.designFile ~ .button.white{vertical-align:middle;}
	.designRadio + .designCheck{margin-left:10rem;}

	/* design radio */
	.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;}
	@media(max-width:480px){
		.designRadio.agree{margin-top:11rem;}
	}

	/* design checkbox */
	.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 number */
	.designNumber{counter-reset:title;}
	.designNumber li{display:inline-block; margin:3rem 30rem 3rem 0;}
	.designNumber li:last-child{margin-right:0rem;}
	.designNumber li :is([type="radio"], [type="checkbox"]){position:absolute; opacity:0;}
	.designNumber li :is([type="radio"], [type="checkbox"]) + label{position:relative; cursor:pointer; padding-left:23rem; margin-right:0rem; font-size:16rem;}
	.designNumber li :is([type="radio"], [type="checkbox"]) + label:before{counter-increment:title; content:counter(title); display:inline-block; position:absolute; top:50%; left:0; display:flex; flex-direction:column; justify-content:center; width:16rem; height:16rem; margin-top:-11rem; background:#e8e8e8; border:2rem solid #b9b9b9; font-size:12rem; color:#444; text-align:center; font-weight:400;}
	.designNumber li :is([type="radio"]):before{border-radius:100%;}
	.designNumber li :is([type="radio"], [type="checkbox"]) + label + input[type="text"]{display:inline-block; margin-left:3rem !important;}
	table.table .designNumber li input[type="text"]{width:auto;}
	.designNumber li :is([type="radio"], [type="checkbox"]):checked + label{color:#111;}
	.designNumber li :is([type="radio"], [type="checkbox"]):checked + label:before{background:#111; border-color:#111; color:#fff; font-weight:600;}
	.designNumber li :is([type="radio"], [type="checkbox"]):disabled + label:before{background:#ececec; border-color:#e0e0e0; color:#999;}
	.designNumber li :is([type="radio"], [type="checkbox"]):disabled + label{color:#999; cursor:auto;}
		/* no number */
	.designNumber.none li :is([type="radio"], [type="checkbox"]) + label:before{content:'';}
	.designNumber.none li :is([type="radio"], [type="checkbox"]):checked + label:before{content:'v';}

	/* design file */
	.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;}
	@media(max-width:767px){
		.designFile.mob em{ display: none; }
	}

	/* designSelect */
	.designSelect:after{content:''; display:block; clear:both;}
	.designSelect .select{display:block; position:relative; width:130rem; height:50rem; margin:0; border:1px solid rgba(255,255,255,0.1); font-size:15rem; color:#141414; text-align:center; transition:all 0.2s ease-out 0.3s; cursor:pointer;}
	.designSelect .select.active{}
	.designSelect .select select{display:none;}
	.selectbox.trans{transition:all 0.4s ease 0.3s;}
	.designSelect .selectbox{position:absolute; top:0; right:0; bottom:0; left:0; z-index:3; height:50rem; line-height:50rem; padding:0 18rem; background:#fff; border:1px solid transparent; border-bottom:0; font-weight:400; font-size:var(--font-base, 14rem); color:#333; text-align:left;/* transition:all 0.4s ease 0.3s; */}
	.designSelect .selectbox:after{content:''; position:absolute; top:21rem; right:15rem; width:16rem; height:10rem; background:url(../../images/board/arr_view.svg) no-repeat 50% 50%; transform:rotate(270deg); -webkit-transform:rotate(270deg);}
	.designSelect .selectbox:active:after,
	.designSelect .selectbox.active:after{transform:rotate(90deg);}
	.designSelect .selectoption{display:none; overflow:hidden; position:absolute; top:98%; z-index:2; width:100%; margin:0; padding:0 0 10rem; background-color:#fff; border:1px solid #000; border-top:0; font-size:15rem; color:#666; text-align:left; list-style:none; box-sizing:border-box;}
	.designSelect .selectoption li{padding:5rem 17rem; border-bottom:0; font-size:14rem; color:#777; transition:all 0.3s ease-out 0s;}
	.designSelect .selectoption li:hover{color:#ddd;}
	.designSelect .selectoption li[rel="hide"]{display:none;}
	.designSelect .selectoption li:last-child{border:none;}
	.designSelect .selectbox.active{border:1px solid #000; border-bottom:0; transition:all 0.4s ease 0s;}

	/* 게시판 스팸 */
	.board-spam{display:flex; align-items:stretch; gap: 5rem; height: 52rem; }
	.board-spam .number{ display: flex; align-items: center; justify-content: center; padding: 0rem 23rem; background:#222; color:#fff; font-size:15rem; font-weight:700; }
	@media(max-width:480px){
		.board-spam{ height: 44rem; }
		.board-spam .number{ padding:0 11rem; }
	}

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

	/* 개인정보 수집 이용 동의 */
	.box_privacy{margin-bottom:70rem;}
	.box_privacy textarea{line-height:1.5; padding:30rem !important; margin:0; border-radius:5rem 5rem 0 0; font-size:15rem; color:#444; outline:none;}
	.scroll-textarea{min-height:250rem;}
	.scroll-textarea{border:1px solid #ddd;}
	.designRadio.agree{display:flex; align-items:center; min-height:55rem; margin-top:0rem; padding:0 25rem; background:#fafafa; border:1px solid #ececec; border-top-width:0; border-radius:0 0 5rem 5rem; font-weight:500;}
	.check_con{display:flex; justify-content:flex-start; align-items:center; position:relative; line-height:1.3; font-size:15rem; cursor:pointer; user-select:none;}
	.check_con > em{margin-left:11rem; white-space:nowrap;}
	.check_con input[type="checkbox"]{position:absolute; margin: 0; width:22rem; height:22rem; visibility: visible; }
	.check_con .checkmark{position:relative; width:22rem; height:22rem; background-color:#fff; border:1px solid #d1d1d1; transition:all 0.2s ease 0s;}
	.designRadio :is(.checkmark:hover, .checkmark.isFocus){ border-color: #444; }
	.check_con input[type="checkbox"]:checked ~ .checkmark{border:1px solid #282828;}
	.check_con .checkmark:after{content:""; display:none; position:absolute;}
	.check_con input[type="checkbox"]:checked ~ .checkmark:after{display:block; transform:rotate(45deg) scale(1); }
	.check_con .checkmark:after{top:4rem; left:8rem; width:4rem; height:8rem; border:solid #444; transition:all 1s ease 0s; transform:rotate(45deg) scale(0); border-width:0 2rem 2rem 0;}
	@media(max-width:480px){
		.box_privacy{margin-bottom:30rem;}
		.scroll-textarea{min-height:140rem;}
		.box_privacy textarea{padding:15rem !important; font-size:13rem;}
		.check_con > em{margin-left:7rem; font-size:14rem;}
		.check_con input[type="checkbox"]{ width: 19rem; height: 19rem; }
		.check_con .checkmark{width:19rem; height:19rem;}
		.check_con .checkmark:after{top:3rem; left:7rem;}
	}

	/* 연락처 */
	.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 .designSelect .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 .designSelect{margin:0 4rem;}
	#tmp_mail{ width: 150rem; }
	@media(max-width:480px){
		.data_email> div{flex-wrap:wrap;}	
		.data_email .designSelect{margin-top:3rem;}
		.data_email .designSelect,
		.bbsForm .designSelect .select{width:100%; margin-right:0; margin-left:0;}
		.bbsForm .designSelect .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 .designSelect{width:100%;}
		.data_email #mail_chk{position:absolute; right:0; bottom:0;}
		#tmp_mail{ width: 100%; }
	}

	/* 하단의 취소, 저장 */
	@media(max-width:480px){
		.bbsNew_container .btn_area{display:flex; gap:5rem; padding-top:35rem;}
		.bbsNew_container .btn_area > *{flex:1;}
	}
}