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

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

/* 기능형 */
.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 input[type="date"],
.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 input[type="date"]: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_data:not(:first-child){margin-top:24rem;}
	.bbsForm textarea{padding:8rem; min-height:130rem;}
}

/* 관리자 및 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;}

/* 개인정보 수집 이용 동의 */
.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%; }
}

/* 게시판 스팸 */
.data-spam{display:flex; align-items:stretch; gap: 5rem; height: 52rem; }
.data-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){
	.data-spam{ height: 44rem; }
	.data-spam .number{ padding:0 11rem; }
}

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

/* 240112 회원가입 */
.bbsForm input[type="password"]{ margin: 0; height: 52rem; padding: 0 15rem; }
.bbsForm.bbsForm :is(#address1, #address2){ margin-top: 2rem; }
.bbsView.bbsForm .button{ margin: 0; height: 52rem; }
@media(max-width:440px){
	.bbsView .button{ height: 44rem; }
}

/* 온라인 문의 - 개인정보수집 이용 동의 체크박스 */
.bbsNew_container .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;}
.bbsNew_container .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;}
.bbsNew_container .scroll-textarea{min-height:250rem;}
.bbsNew_container .scroll-textarea{border:1px solid #ddd;}
@media(max-width:480px){
    .bbsNew_container .scroll-textarea{min-height:140rem;}
    .bbsNew_container .box_privacy textarea{padding:15rem !important; font-size:13rem;}
    .bbsNew_container .btn_area{display:flex; gap:5rem; padding-top:35rem;}
    .bbsNew_container .btn_area > *{flex:1;}
}

/* 온라인 문의 - 개인정보수집 이용 동의 체크박스 체크 해제 시 말풍선을 위한 스타일 수정 */
.bbsNew_container .designRadio input{ width: 22rem; height: 22rem; visibility: visible; z-index: -1; }
.bbsNew_container .designRadio :is(.checkmark:hover, .checkmark.isFocus){ border-color: #444; }
@media(max-width: 480px){
	.check_con input{ width: 19rem; height: 19rem; }
}