@charset "utf-8";

/* ==========================================================================
   TABLE OF CONTENTS & 검색 가이드
   ========================================================================== 
   사용법: Ctrl+F (또는 Cmd+F)로 아래 태그 검색

   #FORM - 폼 공통 요소 (온라인 문의, 게시판 글쓰기)
   #BOARD - 게시판 목록, 상세
   #LEGAL - 법적 고지 양식  
   #JOIN - 회원가입, 수정
   #POPUP - 레이어 팝업
   #PRIVACY-POPOVER - 메인 프라이버시 팝오버
   #PRIVACY-MODAL - 메인 프라이버시 다이얼로그 - 스크립트 때문에 위 팝오버로 대처
   #HISTORY - 연혁 컴포넌트
   #STORE - 매장 찾기 컴포넌트
   ========================================================================== */

/* #FORM 폼 공통 요소 (온라인 문의, 게시판 글쓰기) */
@layer form{
	.common-button{
		overflow:hidden; position:relative; /* margin: 2rem; */ display:inline-flex; justify-content:center; align-items:center; padding: 5rem 20rem; background:#222; font-weight: normal; color: var(--color-white, #fff); transition:0.3s ease 0s;
		&.red{background:#e23343; border:1rem solid #e23343;}
		&.blue{background:#1637a2; border:1rem solid #1637a2;}
		&.black{background:var(--color-black, #000); border:1rem solid var(--color-black, #000);}
		&.gray{background:#92999e; border:1rem solid #92999e;}
		&.white{background:var(--color-white, #fff); border:1rem solid #cdcdcd; color:var(--color-base, #333);}
		&.white span{color:var(--color-base, #333);}
		span{ position: relative; z-index: 2; color: inherit; }
		/* button-size */
		&{min-width:100rem; min-height:40rem;}
		&.lg{min-width:140rem; min-height:52rem; font-size:18rem; letter-spacing:-1rem;}
		&.sm{min-width:60rem; min-height:23rem; padding:0 10rem; font-size:12rem; font-weight:500;}
		/* button hover */
		&:hover, &:focus{ opacity:0.6; }
		&.white:hover, &.white:focus{ border-color: var(--color-black, #000); }
		@media(max-width:1279px){
			&{min-width:70rem; font-size:14rem;}
			&.lg{min-width:100rem; font-size:16rem;}
		}
		@media(max-width:767px){
			&{padding:8rem 10rem;}
			&.lg{min-width:80rem;}
		}
	}
	
	/* 필수입력 */
	.common-required::before{ content:'*'; color:#d5282c; }
	
	/* 테이블 레이아웃 */
	.common-table{ width: 100%;
		th, td{ padding-block:20rem; border-bottom:1px solid #eaecf1; }
		th{ font-weight: 600; text-align:left; }
		td{ color: #777; }
		@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{
		.max-w-full{ max-width: 100%; width: 100%; }
		.max-w-840{ max-width: 840rem; width: 100%; }
		.max-w-800{ max-width: 800rem; width: 100%; }
		.max-w-500{ max-width: 500rem; width: 100%; }
		.max-w-400{ max-width: 400rem; width: 100%; }
		.max-w-327{ max-width: 327rem; width: 100%; }
		.max-w-300{ max-width: 300rem; width: 100%; }
		.max-w-200{ max-width: 200rem; width: 100%; }
		.max-w-100{ max-width: 100rem; width: 100%; }
		.max-w-70{ max-width: 70rem; width: 100%; }
		.max-w-50{ max-width: 50rem; width: 100%; }

		col[data-write="th"]{ width: 15%; }
		col[data-write="td"]{ width: 85%; }

		fieldset{ margin: 0; padding: 0; border: 0; }
		.form-field{ margin:0; min-width: 0; height: 3.25em; padding: 0.8125em 0.9375em; background: var(--color-white, #fff); border: 1px solid var(--border-color); border-radius: 0;
			&::placeholder{ color: #ccc; }
			&:focus, &:hover{ border-color: var(--hover-border-color); }
		}
		select.form-field{ appearance: none; padding-right:20rem; background: var(--color-white, #fff) url('/assets/images/components/board/select_arrow.svg') no-repeat calc(100% - 7rem) 50% / 7rem; }
		textarea.form-field{ width: 100%; min-height: calc(0.8125em * 2.2 + 4lh); }
		.choice-group{ display: flex; flex-wrap: wrap; gap: 1lh 2ch; }
		input[readonly], input[disabled]{ background: #f3f3f3; }
		[onclick="execDaumPostcode()"]{ height: 3.25em; vertical-align: top; }

		label:has([type="checkbox"], [type="radio"]){ display: inline-flex; align-items: center; gap: .4ch;
			input{ width: 1em; height: auto; aspect-ratio: 1; }
			input:not(:checked){ appearance: none; border: 1px solid var(--border-color); }
			[type="checkbox"]{ border-radius: 2px; }
			[type="radio"]{ border-radius: 50%; }
			input:hover{ border-color: var(--hover-border-color); }
			@media(prefers-reduced-motion:no-preference){
				input{ transition: .3s; }
			}
		}

		/* 첨부파일 목록과 스타일 */
		.form-attachment-list{ display: grid; gap: 4rem; }
		.file-upload-block{
			.file-label{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 60rem; padding-inline: 30rem; background: #eee; border-radius: 5rem; cursor: pointer; }
			.file-name{ padding-inline: 30rem; color: var(--black, #222); }
			.file-title, .file-description{ color: #999; }
			.file-info{ margin-block: 4rem 10rem; display: flex; align-items: center; gap: 1ch; }
			.file-link{ display: inline-block; padding: 5rem 20rem; border: 1px solid #cdcdcd; }
			@media(max-width:767px){
				.file-description{ display: none; }
			}
		}

		/* 첨부파일 설명 */
		.tip{ margin-top:10rem; font-size:14rem; color: #999;}
	
		@media(prefers-reduced-motion:no-preference){
			:where(.form-field, label input){ transition: .3s; }
		}
	}
	
	/* 온라인 문의 */
	.online-form{
		col[data-write="th"]{ width: 15%; }
		col[data-write="td"]{ width: 85%; }
	}
	.online-item{
		& ~ .online-item{ margin-top: 40rem; }
		& > label{ margin-bottom: 15rem; font-weight:600; color:#333; }
		.caption{ margin-top: 10rem; font-size: 14rem; color: #c51917; }
		@media(max-width:767px){
			& ~ .online-item{ margin-top: 24rem; }
		}
	}
	
	/* 온라인 문의 하단 취소, 저장 */
	.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"]:focus{ outline: 1px auto var(--primary); }
		[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(/assets/images/components/board/sp_radio.svg) no-repeat 0 -16rem; background-size:16rem 48rem;}
	.designRadio.white input:is([type="radio"]) + label:before{background:url(/assets/images/components/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(/assets/images/components/board/sp_check.svg) no-repeat 0 -16rem; background-size:16rem 48rem;}
	.designCheck.white input:is([type="checkbox"]) + label:before{background:url(/assets/images/components/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:var(--border-color) !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: grid; grid-template-columns: auto 1fr; gap: 5rem; user-select: none;
		.spam-display{ display: grid; place-items: center; padding-inline: 23rem; background: #222; color:#fff; font-size: 15rem; font-weight:700; user-select: none; pointer-events: none; }
		.spam-answer{  }
		.spam-note{ grid-column: 1/-1; }
		.spam-note{ display: none; }
		@media(max-width:767px){
			.spam-display{ 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; }
	}
}

/* #region #BOARD 게시판 목록, 상세 */
/* #region 게시판 테마 공통 요소 */
/* 카테고리 사용 시 목록 상단의 카테고리 탭 */
.board-category-tab{ overflow: auto; margin-bottom: 40rem; display: flex; gap: 5rem; white-space: nowrap;
	.is-active{ background: var(--primary); color: #fff; }
	.button.is-active span{ color: inherit; }
}

/* system search */
.board-search{ --border: #b5b5b5; margin-bottom: 20rem; display:flex; justify-content: end; height: 48rem; font-size: 14rem;
	& > *{ all: revert; padding: 0; border: 0; box-sizing: border-box; font: inherit; }
	.select{ appearance: none; flex-shrink: 0; padding: 0 18rem 0 5rem; background: url('/assets/images/components/board/arr_search_select.svg') no-repeat calc(100% - 4rem) 50% / 10rem; }
	#keyword{ margin: 0; max-width: 252rem; width: 100%; min-width: 0; height: 100%; padding: 0 5rem; border: 0; outline: 0; }
	/* #keyword::placeholder{color:#cfcfcf;} */
	.submit-button{ width: auto; height: 100%; aspect-ratio: 1; background: url('/assets/images/components/board/icon_search.svg') no-repeat 50% / 19rem; cursor: pointer; }
	@media(min-width:768px){
		&{ --border: #ccc; }
		& > *{ border-bottom: 1px solid var(--border); }
		.select{ margin-right: 15rem; min-width: 106rem; }
		#keyword{ padding-left: 5rem; border-bottom: 1px solid var(--border); }
	}
	@media(max-width:767px){
		&{ border-bottom: 1px solid var(--border); }
		.select ~ :is(.select, #keyword){ margin-left: .5ch; }
	}
}

/* 게시물이 없을 때 */
.board-list-empty{padding:80rem 0; border:2rem solid #f1f1f1; text-align:center;}
/* nodata, 달력, ajax, faq 등 스킨에서 사용 */
.no_data{padding:20rem 10rem; border-bottom:1px solid #eaecf1; text-align:center; font-weight:300;}
.no_data.type02{margin-top:30rem; padding:40rem 10rem; border-top:1px dashed #eaecf1; border-bottom:1px dashed #eaecf1; font-size:14rem; text-align:center;}

/* 총 게시물 수 */
.board-total-post{margin-bottom:15rem; font-size:15rem;}
.board-post-count{margin-bottom:15rem; font-size:15rem;}

/* 게시물 제목에 new */
.bbsList a.new::after{ white-space: nowrap; }

/* 비밀글 아이콘 */
#wrap .bbsIcon_secret{ display: inline-block; position: relative; aspect-ratio: 1/1; max-width: 18rem; height: .9em; margin-right: clamp(1rem, 2.96296296vw, 5rem); background: url(/assets/images/components/board/i_secret.png) no-repeat 50% / contain; vertical-align: middle; }
a:not(.subject) .bbsIcon_secret{ transform: translateY(-8%); }

/* 게시판 목록 하단에 버튼 그룹 */
.board-button-group{ display: flex; justify-content: end; gap: 1ch;
	.button-base{ display:inline-flex; justify-content:center; align-items:center; min-width: 100rem; padding:11rem 2ch; background:#fff; border:2rem solid #333; border-radius:50rem; font-weight:500; line-height: 1; color:#333; }
}

.common-pagination{ margin-top: 60rem; display: flex; justify-content: center; gap: 4rem 6rem;
	a{ display: grid; width: 38rem; aspect-ratio: 1; }
	.number{ place-items: center; background: #fff; border: 1px solid #ddd; border-radius: 50%; text-align: center; font-weight: 600; font-size: 14rem; color: #777; }
	.number[aria-current="page"]{ border-color: #222; color: #222; }
	.arrow{ background: url('/assets/images/components/board/btn_pagination.png') no-repeat 0 0 / 152rem 76rem; }
	.first{ background-position-x: 0; }
	.prev{ background-position-x: -38rem; }
	.next{ background-position-x: -76rem; }
	.last{ background-position-x: -114rem; }
	@media(hover){
		.arrow:hover, .arrow:focus{background-position-y:-38rem;}
	}
}

/* 뷰 페이지 */
.board-view{
	/* 제목, 글쓴이, 날짜 */
	.heading{ margin-bottom: .60526316em; font-size: 38rem; }
	.info-list{ display: flex; align-items: center; padding: 19rem 0; border-top: 1px solid #000; }
	.info-list{ position: relative; display: flex; gap: .4ch; padding: 0 15rem; font-size: 14rem; color: #888; }
	.info-list:not(:last-child)::after{ content: ''; position: absolute; top: 4rem; right: 0; width: 1px; height: 13rem; background: #ccc; }
	.info-list dt{ color: #333; }

	/* 본문 */
	.content-block{ min-height: 370rem; padding: 40rem 0; border-block: 1px solid #d4d4d4;
		&:has(~ .attachment){ border-bottom: 0; }
		/* :is(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure){ margin: revert; padding: revert; }
		:is(ul,ol,li){ list-style: revert; } */
		*:not(.content-figure):not(.content-figure *):not(.iframe-video):not(.iframe-video *){ all: revert-layer; }
		img, table{ max-width: 100%; height: auto!important; }
		table, table *{ all: revert-layer; }
		a{ text-decoration: revert; color: revert; }
		.content-figure{display:flex; flex-direction:column; align-items:center; gap:10rem 0; padding-bottom:30rem; text-align:center;}
		.content-figure:empty{ display: none; }
	}

	/* 상세 첨부 파일 목록 */
	.view-attachment-list{ display: grid; gap: 7rem; padding: 22rem 35rem; background: #f9f9f9; border-bottom: 1px solid #d4d4d4;
		a{ position: relative; display: flex; align-items: center; gap: .4ch; text-decoration: underline; }
		a::before{ content: ''; display: inline-block; position: relative; width: 15rem; height: 18rem; background: url('/assets/images/components/board/icon_file.svg') no-repeat 50%; }
	}

	/* 버튼 */
	.board-button-block{ position: relative; margin: 55rem 0; text-align: center; }
	.button-base{ display: inline-block; padding: 11rem 25rem; border: 2rem solid #333; border-radius: 5em; font-weight: 500; line-height: 1; }
	.button-list{ display: flex; justify-content: end; gap: 0 6rem; }
	.list-button{ min-width: 182rem; padding: 22rem 25rem; }

	/* 이전/다음 글 */
	.board-nav{ margin-top: 40rem; border-top: 1rem solid #222; border-bottom: 1rem solid #ddd; }
	.nav-item{ display: flex; align-items: center; padding: 23rem 0; }
	.nav-item[href="#"]{ pointer-events: none; }
	.nav-prev{ border-bottom: 1rem solid #ddd; }
	.nav-txt{ position: relative; margin-right: 20rem; padding: 0 40rem; white-space: nowrap; }
	.nav-txt::after{ content: ''; position: absolute; top: 50%; right: 0; translate: 0 -50%; width: 1px; height: 14rem; background: #ccc; }
	.nav-title{ overflow: hidden; font-weight: 400; color: #888; white-space: nowrap; text-overflow: ellipsis; }
	@media(prefers-reduced-motion:no-preference){
		.button-base, .nav-title{ transition: .3s; }
	}
    @media(hover){
		.nav-item:hover .nav-title{ color: #333; }
	}
	@media(min-width:768px){
		.button-list{ position: absolute; right: 0; top: 0; }
	}
	@media(max-width:767px){
		.heading{ font-size: 24rem; }
		.info-group{ padding: 12rem 0; }
		.info-group li{ padding: 0 11rem; }
		.content{ min-height: 270rem; padding: 25rem 0; }
		.attachment-list{ padding: 12rem 13rem; }
		.button-block{ margin-block: 25rem; }
		.button-list{ margin-bottom: 14rem; }
		.button-base{ padding: 7rem 13rem; border: 1px solid #d5d5d5; font-size: 14rem; color: #999; }
		.list-button{ width: 100%; padding-block: 14rem; font-weight: 700; font-size: 14rem; }
		.board-nav{ margin-top: 26rem; }
		.nav-item{ padding: 15rem 0; font-size: 13rem; }
		.nav-txt{ padding: 0 13rem 0 0; margin-right: 14rem; }
	}
}

/* 게시물 수정 시 비밀번호 확인 */
.secret_area{display:flex; flex-wrap:wrap; justify-content:center; gap:5rem; position:relative; max-width:410rem; margin:40rem auto; text-align:center;}
.secret_area i{display:flex; justify-content:center; align-items:center; width:62rem; height:62rem; margin:0 auto 20rem; background:url(/assets/images/components/board/img_secret.gif) no-repeat 50% 50%; background-size:20rem 24rem; border:3rem solid #59626a; border-radius:100%; color:#59626a;}
.secret_area p{flex:0 1 100%; margin-bottom:10rem;}
.secret_area .secret_area__form{display:flex; align-items:center; gap:4rem; margin-top:10rem;}
.secret_area input[type="password"]{flex: 1 100%; width:240rem; height:45rem;}
.secret_area .button{flex:none; min-width:80rem; min-height:45rem; margin:0; background-color:#fff; border:2rem solid #333; border-radius:50rem; color:#333;}
.secret_area .button span{color:#333;}
@media(max-width:640px){
	.secret_area .secret_area__form{flex-wrap:wrap; justify-content:center;}
	.secret_area .secret_area__form input[type="password"]{flex:0 1 100%;}
}
/* #endregion */

/* #region 게시판 목록 */
/* box */
.box_double{margin-top:20rem;}
.box_double > div{float:right; width:49%; position:relative;}
.box_double > div:first-child{float:left; min-height:400rem; border-right:1rem dashed #ccc;}
.box_double:after{content:''; display:block; clear:both;}

/* tree */
.box_double.tree{position:relative;}
.box_double.tree > div{width:60%;}
.box_double.tree > div:first-child{position:relative; width:37%; border-right:2rem solid #ebebeb;}
.box_double.tree > div:first-child:before{content:''; display:block; position:absolute; right:-17rem; top:50%; z-index:10; width:34rem; height:34rem; margin-top:-17rem; background:#4286f3 url(/assets/images/components/module/img_tree_arrow.png) no-repeat 50% 50%; border-radius:100%; box-shadow:3px 3px 0px rgba(0,0,0,0.18);}

/* #region 지점찾기 */
.box_double.shop{display:flex; align-items:stretch; margin-bottom:30rem;}
.box_double.shop > div{float:none; box-sizing:border-box;}
.box_double.shop div.search{flex:auto; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; padding:0 30rem; border:1rem solid #e0e6e9; text-align:center;}
.box_double.shop div.search em{display:block; font-size:25rem; color:#222; word-break:keep-all;}
.box_double.shop div.search em i{font-weight:600; color:var(--color-point, #365ec3);}
.box_double.shop div.search p{padding-top:10rem; font-size:16rem; font-weight:300; color:#666; word-break:keep-all;}
.box_double.shop div.search .form{--sizeHig:60rem; width:80%; padding-top:50rem;}
.box_double.shop div.search .form form{position:relative;}
.box_double.shop div.search .form input[type="text"]{width:100%; height:var(--sizeHig); margin:0; padding:0 var(--sizeHig) 0 20rem}
.box_double.shop div.search .form .search-btn{position:absolute; top:0; right:0; width:var(--sizeHig); height:var(--sizeHig); background:transparent url(/assets/images/components/board/icon_search.svg) no-repeat center; background-size:19rem; border:0; font-size:0;}
.box_double.shop div.map{flex:none; overflow:hidden; position:relative; width:60%; padding:30rem 0; background:#f5f6f7; border-right-width:0rem;}
.box_double.shop div.map .nation{position:relative; width:336rem; height:424rem; margin:0 auto; background:url(/assets/images/components/module/img_map01.png) no-repeat 50% 0; background-size:100%;}
.box_double.shop div.map .jeju{position:absolute; right:0; bottom:0; padding:30rem 24rem; border-left:1rem solid #c2d1db;}
.box_double.shop div.map .jeju:before{content:''; display:block; position:absolute; top:0; left:0; width:105%; height:1rem; background:#c2d1db; transform:rotate(-15deg); transform-origin:0 100%;}
.box_double.shop div.map .jeju:after{content:''; display:block; width:97rem; height:50rem; margin:0 auto; background:url(/assets/images/components/module/img_map02.png) no-repeat 50% 0; background-size:100%;}
.box_double.shop div.map a[data-map]{display:inline-block; position:absolute; width:28rem; height:28rem; line-height:28rem; background:#475665; border-radius:100%; color:#fff; text-align:center; font-size:13rem; font-weight:300; transition:all 0.3s ease 0s;}
.box_double.shop div.map a[data-map]:hover,
.box_double.shop div.map a[data-map]:focus,
.box_double.shop div.map a[data-map].on{background:var(--color-point, #365ec3); box-shadow:0 3rem 20rem rgba(54,94,195,0.4);}
.box_double.shop div.map a[data-map="01"]{top:65rem; left:97rem;}
.box_double.shop div.map a[data-map="02"]{top:84rem; left:61rem;}
.box_double.shop div.map a[data-map="03"]{top:103rem; left:125rem;}
.box_double.shop div.map a[data-map="04"]{top:184rem; left:122rem;}
.box_double.shop div.map a[data-map="05"]{top:178rem; left:75rem;}
.box_double.shop div.map a[data-map="06"]{top:147rem; left:150rem;}
.box_double.shop div.map a[data-map="07"]{top:64rem; left:198rem;}
.box_double.shop div.map a[data-map="08"]{bottom:100rem; left:56rem;}
.box_double.shop div.map a[data-map="09"]{bottom:57rem; left:61rem;}
.box_double.shop div.map a[data-map="10"]{bottom:138rem; left:97rem;}
.box_double.shop div.map a[data-map="11"]{right:97rem; bottom:154rem;}
.box_double.shop div.map a[data-map="12"]{right:76rem; bottom:200rem;}
.box_double.shop div.map a[data-map="13"]{right:130rem; bottom:98rem;}
.box_double.shop div.map a[data-map="14"]{right:42rem; bottom:114rem;}
.box_double.shop div.map a[data-map="15"]{right:68rem; bottom:70rem;}
.box_double.shop div.map a[data-map="16"]{top:50%; left:50%; margin:-18rem 0 0 -14rem;}
	/* 지점찾기 - 상세 */
.search-shop .bbsContent .conts{min-height:inherit;}
.search-shop__info .shopPhoto{position:relative; margin-top:10rem;}
.search-shop__info .shopPhoto .list{display:flex; flex-direction:column; align-items:center; gap:10rem;}
.search-shop__info .shopPhoto .list .img{display:block;}
.search-shop__info .shopPhoto .list .img img{max-width:100%;}
.shopMap{padding-top:10rem;}
.shopMap .txt_map{padding:20rem; background:#fff; border:1rem solid #222; font-size:16rem; text-align:center; line-height:1em;}
.shopConts{margin-top:20rem;}
.search-shop__title{display:block; margin-top:30rem; font-size:20rem !important; font-weight:600;}
	/* 지점찾기 - 반응형  */
@media(max-width:1024px){
	.box_double.shop div.search em{font-size:22rem;}	
	.box_double.shop div.search .form{width:90%;}

	.box_double.shop div.map{width:512rem;}
	.box_double.shop div.search{width:calc(100% - 512rem); padding-right:30rem; padding-left:30rem;}
	.box_double.shop div.search em{font-size:20rem;}	
	.box_double.shop div.search .form input[type="text"]{width:calc(100% - 105rem);}
	.box_double.shop div.search .form .button{min-width:100rem;}
}
@media(max-width:900px){
	.box_double.shop div.search:before{right:-130rem; bottom:-60rem;}
}
@media(max-width:850px){
	.box_double.shop div.map{width:412rem;}
	.box_double.shop div.map .jeju{padding:20rem 4rem;}
	.box_double.shop div.search{width:calc(100% - 412rem);}
}
@media(max-width:768px){
	.box_double.shop{flex-wrap:wrap;}
	.box_double.shop div.map{width:100%;}
	.box_double.shop div.search{padding:30rem 20rem;}
	.box_double.shop div.search .form{--sizeHig:50rem; padding-top:30rem;}
}
@media(max-width:730px){
	.box_double.shop > div{float:none; width:auto !important;}
	.box_double.shop div.search{min-height:inherit; padding:30rem;}
	.box_double.shop div.search:before{right:-50rem; bottom:-70rem; width:344rem; height:248rem; background-size:100%;}
}
@media(max-width:640px){ 
	col[data-shop]{display:none !important;}
	td[data-shop="area"]{position:absolute; top:0rem; left:0rem; width:70rem !important; text-align:left !important;}	
	td[data-shop="name"]{padding-left:100rem !important; border-bottom:1rem dashed #e4e4e4 !important; text-align:left !important;}
	td[data-shop="address"]{border-bottom:1rem dashed #e4e4e4 !important; text-align:left !important;}	
	td[data-shop="tel"]{position:absolute; bottom:3rem; left:0rem; width:130rem !important; text-align:left !important;}
	td[data-shop="view"]{padding-left:120rem !important; text-align:right !important;}
	td[data-shop="view"] a{margin:0rem;}

	.shopMap .root_daum_roughmap .wrap_map{height:300rem !important;}
	.shopPhoto{background:none;}
	.shopPhoto .list > li{height:300rem;}
}
@media(max-width:360px){
	.box_double.shop div.map .jeju:before{transform:rotate(-10deg);}
}

.board-area-list{ width: 100%;
	caption{ overflow: hidden; position: absolute; width: 0; height: 0; }
	th{ padding: 20rem 10rem; border-bottom: 1px solid #d2d7dc; font-weight:400; }
	td{ color:#666; }
	td:not(.subject){ text-align: center; }
	.notice{ display: inline-block; padding: 5rem 14rem; border-radius: 5em; background:#343434; font-size: 13rem; color:#fff; text-transform: uppercase; }
	.title_reply{ flex-shrink: 0; margin-right: 1ch; display: inline-block; padding: 2rem 7rem; background:#fff; border:1px solid #b3b3b3; border-radius:3rem; font-size:13rem; color:#8d8d8d; }
	.title{ overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; word-break: break-all; }
	.new{ align-self: start; margin-left: .5ch; font-weight:700; font-size:11rem; color:#e53333; text-transform: uppercase; }
	.comment{ margin-left: 1ch; font-size: 13rem; color:#aaa; }
	.none{ padding: 21rem 10rem; }
	@media(min-width:768px){
		&{ border-top:2rem solid #4c4c4c; }
		colgroup{
			.checkbox{ width: 7%; }
			.number{ width: 7%; }
			.category{ width: 10%; }
			.write{ width: 15%; }
			.date{ width: 15%; }
		}
		td{ padding: 18rem 10rem; border-bottom: 1px solid #eaecf1; }
	}
	@media(max-width:767px){
		colgroup, thead{ display: none; }
		tr{ display: flex; flex-wrap:wrap; align-items: stretch; gap: 5rem 20rem; padding: 20rem; border:1px solid #eaecf1; border-radius:3rem; }
		tr + tr{ margin-top:10rem; }
		td{ display:block; }
		.number:not(:has(.notice)){ display: none; }
		.notice{ padding: 3rem 10rem; }
		.subject{ width:100%; padding:0;}
		a{ margin-bottom: 5rem; font-weight:600; color:#111;}
		.category{ border-bottom:1px dashed #e4e4e4; text-align:left; color:#148f77; }
		.title_reply + a{padding-top:5rem !important;}
		.write, .date{ color: #a7a7a7; font-size: 14rem; }
	}
}
/* #endregion */

/* 목록, 댓글 수는 개발돼 있으나 스타일은 없음 */
.board-blog-list{ border-top:1px solid;
	a{ display:grid; padding: 20rem 5rem; border-bottom:1px solid #eaecf1; }
	a:hover, a:focus{background:#f0f6f8;}
	.img-group{ overflow: hidden; display: block; width: 100%; background: #fff url('/assets/images/components/board/no_image.gif') no-repeat 50% / cover; }
	.img{ display: block; width:100%; height:100%; object-fit: cover; }
	.no-image{ display: block; width:100%; height:100%; object-fit: cover; }
	.title{ overflow:hidden; display: -webkit-box; height: 1lh; font-weight: 600; font-size: 20rem; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
	.comment{ overflow: hidden; display: -webkit-box; margin-top: 10rem; font-size:17rem; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp: 3; }
	.date{ margin-top: 20rem; display: block; font-size: 14rem; color: #666;}
	@media(prefers-reduced-motion:no-preference){
		a{ transition: .3s; }
	}
	@media(min-width:768px){
		a{ grid-template-columns: 220rem 1fr; align-items: center; gap: 0 30rem; }
		.img-group{ aspect-ratio: 4/3; }
	}
	@media(max-width:767px){
		.img-group{ aspect-ratio: 16/9; }
		.title{margin-top:10rem;}
		.comment{font-size:14rem;}
	}
}

/* 목록, 댓글 수는 개발돼 있으나 스타일은 없음 */
.board-blog-list{ border-top:1px solid;
	a{ display:grid; padding: 20rem 5rem; border-bottom:1px solid #eaecf1; }
	a:hover, a:focus{background:#f0f6f8;}
	.img-group{ overflow: hidden; display: block; width: 100%; background: #fff url('/assets/images/components/board/no_image.gif') no-repeat 50% / cover; }
	.img{ display: block; width:100%; height:100%; object-fit: cover; }
	.title{ overflow:hidden; display: -webkit-box; height: 1lh; font-weight: 600; font-size: 20rem; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
	.comment{ overflow: hidden; display: -webkit-box; margin-top: 10rem; font-size:17rem; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp: 3; }
	.date{ margin-top: 20rem; display: block; font-size: 14rem; color: #666;}
	@media(prefers-reduced-motion:no-preference){
		a{ transition: .3s; }
	}
	@media(min-width:768px){
		a{ grid-template-columns: 220rem 1fr; align-items: center; gap: 0 30rem; }
		.img-group{ aspect-ratio: 4/3; }
	}
	@media(max-width:767px){
		.img-group{ aspect-ratio: 16/9; }
		.title{margin-top:10rem;}
		.comment{font-size:14rem;}
	}
}

/* 목록, 댓글 수는 개발돼 있으나 스타일은 없음 */
.board-blog-list{ border-top:1px solid;
	a{ display:grid; padding: 20rem 5rem; border-bottom:1px solid #eaecf1; }
	a:hover, a:focus{background:#f0f6f8;}
	.img-group{ overflow: hidden; display: block; width: 100%; background: #fff url('/assets/images/components/board/no_image.gif') no-repeat 50% / cover; }
	.img{ display: block; width:100%; height:100%; object-fit: cover; }
	.title{ overflow:hidden; display: -webkit-box; height: 1lh; font-weight: 600; font-size: 20rem; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
	.comment{ overflow: hidden; display: -webkit-box; margin-top: 10rem; font-size:17rem; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp: 3; }
	.date{ margin-top: 20rem; display: block; font-size: 14rem; color: #666;}
	@media(prefers-reduced-motion:no-preference){
		a{ transition: .3s; }
	}
	@media(min-width:768px){
		a{ grid-template-columns: 220rem 1fr; align-items: center; gap: 0 30rem; }
		.img-group{ aspect-ratio: 4/3; }
	}
	@media(max-width:767px){
		.img-group{ aspect-ratio: 16/9; }
		.title{margin-top:10rem;}
		.comment{font-size:14rem;}
	}
}

/* #region calendar */
.area_calendar{display:flex; flex-wrap:wrap; align-items:stretch;}
.area_calendar .control{flex:0 1 100%; display:flex; align-items:center; gap:10rem; position:relative; margin-bottom:20rem;}
.area_calendar .control > div{flex:none; display:inline-flex; flex-wrap:wrap; align-items:stretch; border:1rem solid #f4f4f4;}
.area_calendar .control > div > *{display:inline-block; vertical-align:middle;}
.area_calendar .control > div > p{height:48rem; line-height:48rem; padding:0 20rem 0 48rem; background:url(/assets/images/components/module/img_calendar.svg) no-repeat 15rem 50%; border-right:1rem solid #f4f4f4; border-left:1rem solid #f4f4f4; font-size:20rem;}
.area_calendar .control > div a[class^="btn_"]{opacity:0.5; position:relative; height:48rem; line-height:48rem; box-sizing:border-box; padding:0 20rem; font-size:0; transition:all 0.3s ease 0s;}
.area_calendar .control > div a[class^="btn_"]:before{content:''; display:block; position:absolute; top:50%; left:50%; width:11rem; height:17rem; background:url(/assets/images/components/module/img_calendar01.png) no-repeat 50% 0; background-size:100%; transform:translate(-50%, -50%);}
.area_calendar .control > div a[class^="btn_"]:hover{opacity:1;}
.area_calendar .control > div .btn_next{transform:rotate(180deg);}
.area_calendar .control .btn_today{display:inline-flex; justify-content:center; align-items:center; min-width:100rem; height:50rem; box-sizing:border-box; background:#365ec3; border:1rem solid #2c52b1; color:#fff; font-size:15rem; text-align:center;}
.area_calendar .control .side{margin-left:auto;}
.area_calendar .control .side .button{height:50rem;}
.area_calendar .calendar{flex:none; width:40%; box-sizing:border-box;}
.area_calendar .calendar table{table-layout:fixed; width: 100%;}
.area_calendar .calendar table caption{ overflow: hidden; position: absolute; width: 0; height: 0; }
.area_calendar .calendar table th,
.area_calendar .calendar table td{text-align:center;}
.area_calendar .calendar table th{height:35rem; padding:10rem; background:#191919; border:1rem solid #191919; color:#fff; font-size:15rem; font-weight:500;}
.area_calendar .calendar table td{height:70rem; border:1rem solid #e0e6e9; line-height:0em;}
.area_calendar .calendar table td > a,
.area_calendar.type02 .calendar table td > div{display:block; position:relative; height:100%; box-sizing:border-box; padding:28rem 10rem 5rem; border:2px solid transparent; transition:0.4s ease-out 0s;}
.area_calendar .calendar table td > a:hover,
.area_calendar.type02 .calendar table td > div:hover{z-index:10; border-color:#222;}
.area_calendar .calendar table td.none > a:hover,
.area_calendar.type02 .calendar table td.none > div:hover{box-shadow:none;}
.area_calendar .calendar table th[data-calendar="sun"]{color:#fff;}
.area_calendar .calendar table th[data-calendar="sat"]{color:#fff;}
.area_calendar .calendar table td em{display:block; position:absolute; top:20rem; left:0rem; width:100%; text-align:center;}
.area_calendar .calendar *[data-calenda="in"]{display:inline-block; position:relative; width:8rem; height:8rem; box-sizing:border-box; margin-top:3rem; border:1rem solid #e3e3fd; border-radius:100%; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_calendar .calendar *[data-calenda="in"]:before{content:''; display:block; position:absolute; top:50%; left:50%; width:4rem; height:4rem; margin:-2rem 0 0 -2rem; background:#3e3ef4; border-radius:50%;}
.area_calendar .calendar .today{background:#f2f5ff;}
.area_calendar .calendar .today > *:after{content:'T'; display:inline-block; position:absolute; top:10rem; right:5rem; width:15rem; height:15rem; line-height:15rem; border-radius:50%; background:#365ec3; color:#fff; font-size:10rem;}
.area_calendar .calendar .on{background:#fff2f2 !important;}
.area_calendar .calendar .on.today{background:#f2f5ff !important;}
.area_calendar .calendar .none{background:#f3f3f3;}
.area_calendar .calendar .none > *{overflow:hidden; cursor:default; color:#b7b7b7;}
.area_calendar .calendar .none > *:before{content:''; display:block; position:absolute; top:0; right:0; width:200%; height:1rem; background:#e0e0e0; transform:rotate(-37deg); transform-origin:100% 0;}
	/* calendar-list */
.area_calendar .list{flex:auto; display:flex; flex-direction:column; position:relative; box-sizing:border-box; background:#f7f7f7;}
.area_calendar .list [data-date-area="list"]{display:flex; align-items:center; min-height:55rem; box-sizing:border-box; padding:5rem 15rem; font-size:18rem; font-weight:600;}
.area_calendar .list li{border-top:1rem solid #e1e9ec}
.area_calendar .list li > a,
.area_calendar .list li > span{display:flex; align-items:center; min-height:40rem; padding:10rem 15rem; font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all 0.4s ease-out 0s;}
.area_calendar .list li > a:hover{background:#fff; color:#222;}
.area_calendar .list li > span.no_data{justify-content:center; padding-top:50rem; padding-bottom:50rem; border-width:0; text-align:center;}
.area_calendar .list li:first-child{border-top-style:solid;}
.area_calendar .list .btn-box{display:none; text-align:right;}
.area_calendar .slide{flex:auto; overflow-y:auto;}
.area_calendar .view{clear:both; padding-top:40rem;}
   /* calendar - 반응형 */
@media(min-width:769px){
	.area_calendar.type02 .calendar table td{height:100rem;}
	.area_calendar.type02 .calendar{float:none; width:100%;}
	.area_calendar.type02 .calendar *[data-calenda="in"]{display:block; border:0rem; width:auto; height:auto; padding-left:10rem; margin:7rem 0rem; font-size:13rem; overflow:visible; text-indent:0; white-space:normal; text-align:left;}
	.area_calendar.type02 .calendar *[data-calenda="in"]:before{top:3rem; left:0rem; margin:0rem;}	
	.area_calendar.type02 .list{display:none;}
}
@media(max-width:1024px){
	.area_calendar .calendar,
	.area_calendar .list{width:50%;}
}
@media(max-width:768px){
	.area_calendar.type02 .calendar,
	.area_calendar.type02 .list{float:none; width:100%;}	
	.area_calendar.type02 .list{height:auto !important;}
}
@media(max-width:640px){
	.area_calendar .calendar,
	.area_calendar .list{width:100%;}
	.area_calendar .list{height:auto !important; max-height:400rem;}
	.area_calendar .control .side{display:none;}
	.area_calendar .control .btn_today{min-width:70rem; margin-left:auto;}
	.area_calendar .list .btn-box{display:flex; flex-wrap:wrap; justify-content:center; padding:5rem;}
	.area_calendar .list .btn-box .button{flex:auto;}
}
@media(max-width:360px){
	.area_calendar .control .btn_today{min-width:70rem;}
	.area_calendar .calendar .today > *:after{right:2rem; width:13rem; height:13rem; line-height:13rem;}
}

/* loading */
.area_loding{position:fixed; top:0px; left:0px; z-index:90; width:100%; height:100%; background:rgba(255,255,255,0.7);}
.area_loding .img{position:absolute; top:50%; left:50%; z-index:91; width:150rem; height:150rem; transform:translate(-50%, -50%);}
/* #endregion */

/* 목록, 갤러리랑 동일, 이미지 비율만 다름 */
.board-certification-list{ display:grid;
	a{ display: block; position: relative; box-sizing: border-box; }
	.img-group{ overflow: hidden; display: block; aspect-ratio:3/4; background: #fff url('/assets/images/components/board/no_image.gif') no-repeat 50% / cover; }
	.img{ display: block; width:100%; height:100%; object-fit: contain; }
	.title{ overflow:hidden; margin-top:19rem; display:-webkit-box; line-height:1.4; font-size: clamp(18rem, 1.5278vw, 22rem); letter-spacing:-0.5rem; color:#111; -webkit-box-orient:vertical; -webkit-line-clamp: 1; }
	.info{ margin-top: 8rem; display:inline-flex; align-items:center; position: relative; font-size: 15rem; line-height: 1; color: #a7a7a7; }
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(3, 1fr); gap: 40rem; }
	}
	@media(max-width:1279px) and (min-width:768px){
		&{ gap: 25rem; grid-template-columns: repeat(2, 1fr); }
	}
	@media(max-width:767px){
		&{ gap: 35rem; }
		& .title{height:auto; max-height:60rem;}
	}
}

/* 목록 - 비밀글 아이콘X, 첨부파일 아이콘X, 답변 + 카테고리 = 카테고리 미출력 */
.board-default-list{
	&:not(:has(.board-list-empty)){ border-top:1px solid; }
	a{ display: grid; align-items: center; position: relative; border-bottom: 1px solid #eee; }
	.number{ font-size: 14rem; text-align: center; }
	.notice{ justify-self: start; display: inline-block; padding: 2rem 10rem; background:#222; border-radius:3rem; text-align: center; font-size: 14rem; color:#fff; white-space: nowrap; }
	.title-group{ display: flex; align-items: center; gap: .5ch; }
	.reply{ display:inline-block; padding:4rem 9rem; background:#fff; border:1px solid #b3b3b3; border-radius:3rem; font-size:14rem; color:#8d8d8d; line-height:1; }
	.title{ overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-weight:600; color:#222; white-space: normal; word-break: break-all; }
	a:hover .title{color:var(--primary, #838383);}
	.comment{ font-size:13rem; line-height:1; color:#aaa; white-space:nowrap; }
	.new::after{ content:"NEW"; position:relative; top:-3rem; margin-left: 1ch; font-weight:700; font-size:10rem; color:#e53333; }
	.date{font-size:14rem;}
	@media(min-width:768px){
		a{ grid-template-columns: minmax(50rem, auto) 1fr auto; gap: 25rem; padding: 28rem 20rem; }
	}
	@media(max-width:767px){
		&:has(.notice) a{ grid-template-columns: auto 1fr; }
		&:has(.notice) .date{ grid-column: 1/-1; }
		a{ gap: 5rem 1ch; padding-block: 16rem; }
		.number{ display: none; }
		.date{ color:#aaa; }
	}
}

.board-gallery-list{ display:grid;
	a{ display: block; position: relative; box-sizing: border-box; }
	.img-group{ overflow: hidden; display: block; aspect-ratio:16/10; background: #fff url('/assets/images/components/board/no_image.gif') no-repeat 50% / cover; }
	.img{ display: block; width:100%; height:100%; object-fit: contain; }
	.title{ overflow:hidden; margin-top:19rem; display:-webkit-box; line-height:1.4; font-size: clamp(18rem, 1.5278vw, 22rem); letter-spacing:-0.5rem; color:#111; -webkit-box-orient:vertical; -webkit-line-clamp: 1; }
	.info{ margin-top: 8rem; display:inline-flex; align-items:center; position: relative; font-size: 15rem; line-height: 1; color: #a7a7a7; }
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(3, 1fr); gap: 40rem; }
	}
	@media(max-width:1279px) and (min-width:768px){
		&{ gap: 25rem; grid-template-columns: repeat(2, 1fr); }
	}
	@media(max-width:767px){
		&{ gap: 35rem; }
		& .title{height:auto; max-height:60rem;}
	}
}

/* 목록 - 비밀글X, 첨부파일O, 카테고리X, 답변X */
.board-notice_a-list{ display: grid; gap: clamp(18rem, calc( 40 / var(--inr) * 100vw ), 40rem);
	a{ display: block; position: relative; padding: clamp(25rem, 4.1667vw, 50rem) clamp(20rem, 2.7778vw, 50rem) clamp(25rem, 4.1667vw, 65rem); border: 1px solid #e5e5e5; box-shadow: 0 0 50rem rgba(0, 0, 0, 0%);}
	a:hover{box-shadow:0 0 50rem rgba(0, 0, 0, 10%); border-color:#111;}
	.title{ overflow:hidden; display:-webkit-box; height: 2lh; font-size:clamp(18rem, 1.5278vw, 22rem); line-height:1.4; color:#111; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
	.file{ margin-right: .5ch; display:inline-block; translate: 0.04545455em; width:16rem; height:21rem; background:url(/assets/images/components/board/icon_file.svg) no-repeat 50% / contain; vertical-align: middle; }
	.content{ overflow: hidden; margin-top: 23rem; display: -webkit-box; height: 2lh; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
	.info{ position:relative; margin-top:110rem; display:inline-flex; align-items:center; font-size:13rem; line-height:1; color:#a7a7a7;}
	.writer{display:flex; align-items:center; }
	.writer::after{content:''; display: inline-block; margin: 0 9rem; width:1px; height:12rem; background:#cdcdcd;}
	.notice{margin-left:10rem; padding:5rem 10rem; background:#111; border-radius:20rem; color:#fff;}
	.new{margin-left:10rem; font-weight:700; font-size:13rem; color:#d52d2d;}
	.arrow{ position:absolute; right:50rem; bottom:50rem; display:grid; place-items: center; width:60rem; height:60rem; border-radius:50%; background:#f7f7f7;}
	.arrow::before{content:''; display: block; width:17rem; height:17rem; background:url(/assets/images/components/board/arr_board_list.svg) no-repeat 50% / contain; opacity:0.9;}
	a:hover .arrow{background:#111;}
	a:hover .arrow::before{background-image:url(/assets/images/components/board/arr_board_list_w.svg);}
	@media(prefers-reduced-motion:no-preference){
		a, .arrow, .arrow::before{ transition: .3s; }
	}
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(3, 1fr); }
		.content{ height: 3lh; -webkit-line-clamp: 3; }
	}
	@media(max-width:1279px) and (min-width:768px){
		&{ grid-template-columns:1fr 1fr; }
	}
	@media(max-width:1279px){
		.arrow{display:none;}
	}
}

.board-notice_b-list{ display: grid; gap:35rem;
	a{ position:relative; display:block; padding: 50rem 30rem; border:1px solid #e5e5e5; box-shadow: 0 0 50rem #0000; box-sizing:border-box; }
	.date{ display:inline-block; line-height:1; font-weight: 900; font-size: 12rem; color:#111; text-align:center; }
	.day{ margin-top: 2rem; display:block; line-height:1; font-weight:700; font-size: 40rem; color:#111;}
	.notice, .new{ position: absolute; right: 30rem; font-size: 13rem; }
	.notice{ padding: 2rem 10rem; background: #000; color: #fff; border-radius: 30rem; }
	.new{ font-weight:700; color:#dd1d1d; }
	.file{ margin-right: .5ch; display:inline-block; translate: 0.04545455em; width:16rem; height:21rem; background:url(/assets/images/components/board/icon_file.svg) no-repeat 50% / contain; vertical-align: middle; }
	.title{ overflow:hidden; margin-top:30rem; display:-webkit-box; height:2lh; line-height:1.5; font-size:19rem; color:#111; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
	.img{ overflow:hidden; position: relative; margin-top: 15rem; display: block; height: 203rem; background: no-repeat 50% / cover; }
	.content{ overflow:hidden; margin-top:15rem; display:-webkit-box; height: 3lh; line-height: 1.6; font-size: 16rem; -webkit-line-clamp: 3; -webkit-box-orient:vertical; }
	@media(prefers-reduced-motion:no-preference){
		a, a *{ transition: .3s; }
	}
	@media(hover){
		a:hover{ background: #202020; }
		a:hover *{ color: #fff; }
		a:hover .file{ background-image: url('/assets/images/components/board/icon_file_w.svg'); }
	}
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(3, 1fr); }
	}
	@media(max-width:1279px) and (min-width:768px){
		&{ grid-template-columns: repeat(2, 1fr); }
		a{ height: 411rem; }
		.img{ position: absolute; inset: auto 0 0; }
		.content{ height: 4lh; -webkit-line-clamp: 4; }
	}
}

/* 썸네일 필요, 해상도 작아야 함 */
.board-pdf-list{ display: grid; gap: 40rem 2%;
	li{ position: relative; margin-top: 20rem; height: 204rem; padding: 20rem; background: #fff; border: 1px solid #eaecf1; box-sizing: border-box; }
	li:has(.img-group){ display: grid; grid-template-columns: auto 1fr; gap: 42rem }
	.img-group{ overflow:hidden; position:relative; translate: 5rem -40rem; aspect-ratio: 1/1.414; width:138rem; border:1px solid #e0e0e0; box-shadow:1px 1rem 2rem rgba(0,0,0,0.1); }
	.img{ display: block; width: 100%; height: 100%; object-fit: cover; }
    .date{ margin: 5rem 0 20rem; display: block; font-size: 12rem; color: #777; }
    .down{ position: relative; display: inline-flex; align-items: center; gap: 19rem; min-width: 100rem; height: 33rem; padding: 0 10rem 0 15rem; background: #fff; border: 1px solid #d6d6d6; box-sizing: border-box; font-size: 13rem; line-height: 31rem; }
	.down::after{ content:''; display: block; width:10rem; height:10rem; background:url('/assets/images/components/board/icon_down.png') no-repeat 0 0 / 10rem; }
    @media(prefers-reduced-motion:no-preference){
		li{ transition: .2s; }
		.down, .down::after{ transition: .3s; }
	}
	@media(hover){
		li:hover{ border-color: #505c78; box-shadow: 0 3rem 10rem rgba(0,0,0,0.10), 0 20rem 20rem rgba(0,0,0,0.05); }
		.down:hover{ background: #505c78; border-color: #505c78; box-shadow: 3rem 3rem rgba(0,0,0,0.15); color: #fff; }
		.down:hover::after{ background-position: 0 -10rem; }
	}
	@media(min-width:767px){
		&{ grid-template-columns: repeat(2, 1fr); }
	}
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(3, 1fr); }
	}
}

.board-qna-list{ width: 100%;
	caption{ overflow: hidden; position: absolute; width: 0; height: 0; }
	th{ padding: 20rem 10rem; border-bottom: 1px solid #d2d7dc; font-weight:400; }
	td{ color:#666; }
	td:not(.subject){ text-align: center; }
	.notice{ display: inline-block; padding: 5rem 14rem; border-radius: 5em; background:#343434; font-size: 13rem; color:#fff; text-transform: uppercase; }
	a{ display:flex; align-items:center; font-size:16rem; color:#222; }
	.reply{ flex-shrink: 0; margin-right: 1ch; display: inline-block; padding: 2rem 7rem; background:#fff; border:1px solid #b3b3b3; border-radius:3rem; font-size:13rem; color:#8d8d8d; }
	.title{ overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; word-break: break-all; }
	.new-el{ align-self: start; margin-left: .5ch; font-weight:700; font-size:11rem; color:#e53333; text-transform: uppercase; }
	.new-el::before{ content: 'NEW'; }
	.new-el:not(.new){ display: none; }
	.comment{ margin-left: 1ch; font-size: 13rem; color:#aaa; }
	.empty{ padding: 21rem 10rem; }
	@media(min-width:768px){
		&{ border-top:2rem solid #4c4c4c; }
		colgroup{
			.checkbox{ width: 7%; }
			.number{ width: 7%; }
			.category{ width: 10%; }
			.write{ width: 15%; }
			.date{ width: 15%; }
		}
		td{ padding: 18rem 10rem; border-bottom: 1px solid #eaecf1; }
	}
	@media(max-width:767px){
		colgroup, thead{ display: none; }
		tr{ display: flex; flex-wrap:wrap; align-items: stretch; gap: 5rem 20rem; padding: 20rem; border:1px solid #eaecf1; border-radius:3rem; }
		tr + tr{ margin-top:10rem; }
		td{ display:block; }
		.number:not(:has(.notice)){ display: none; }
		.notice{ padding: 3rem 10rem; }
		.subject{ width:100%; padding:0;}
		a{ margin-bottom: 5rem; font-weight:600; color:#111;}
		.category{ border-bottom:1px dashed #e4e4e4; text-align:left; color:#148f77; }
		.title_reply + a{padding-top:5rem !important;}
		.write, .date{ color: #a7a7a7; font-size: 14rem; }
	}
}

/* 목록, 갤러리랑 동일, 이미지 비율만 다름 */
.board-youtube-list{ display:grid;
	a{ display: block; position: relative; box-sizing: border-box; }
	.img-group{ overflow: hidden; display: block; aspect-ratio:16/9; background: #fff url('/assets/images/components/board/no_image.gif') no-repeat 50% / cover; }
	.img{ display: block; width:100%; height:100%; object-fit: cover; }
	.title{ overflow:hidden; margin-top:19rem; display:-webkit-box; line-height:1.4; font-size: clamp(18rem, 1.5278vw, 22rem); letter-spacing:-0.5rem; color:#111; -webkit-box-orient:vertical; -webkit-line-clamp: 1; }
	.info{ margin-top: 8rem; display:inline-flex; align-items:center; position: relative; font-size: 15rem; line-height: 1; color: #a7a7a7; }
	@media(min-width:1280px){
		&{ grid-template-columns: repeat(3, 1fr); gap: 40rem; }
	}
	@media(max-width:1279px) and (min-width:768px){
		&{ gap: 25rem; grid-template-columns: repeat(2, 1fr); }
	}
	@media(max-width:767px){
		&{ gap: 35rem; }
		& .title{height:auto; max-height:60rem;}
	}
}

/* youtube video iframe */
.iframe-video{ position: relative; margin-bottom: 1lh; width: 100%; aspect-ratio: 16/9; border: 0; object-fit: scale-down; }

.faq-list{ border-top:1px solid #7e7e7e;
	:where(.question, .answer){ position:relative; border-bottom: 1px solid #eaecf1; }
	.question{display:block; width: 100%; padding: 30rem 65rem 30rem 66rem; font-size: 18rem; color:#333; text-align: left; text-transform:uppercase; }
	.question:before{ content:'Q'; display: grid; place-items: center; position: absolute; top: 50%; left: 20rem; translate: 0 -50%; width: 30rem; aspect-ratio: 1; background:#c5c5c5; border-radius: 50%; font-weight:600; font-size: 14rem; color:#fff; text-align: center; }
	.question::after{content:''; opacity:0.5; display:block; position:absolute; top:50%; right:32rem; translate: 0 -50%; width:12rem; aspect-ratio: 12/7; background:url('/assets/images/components/board/img_faq.png') no-repeat 50% / contain; }
	[open] .question::after{ rotate: 180deg; }
	.answer{ padding: 30rem 64rem; background: #f8f8f8; color: #666; }
	.btn-block{ margin-top: 30rem; display: flex; }
	@media(max-width:767px){
		.question{ font-size:14rem; padding: 21rem 40rem 21rem 49rem; }
		.question::before{ left:15rem; width: 24rem; font-size: 11rem; }
		.question::after{ right:15rem; }
		.answer{ padding:20rem 46rem; font-size: 14rem; }
	}
}
/* #endregion */

/* 게시판 댓글 */
.board-comment{ margin-top: 30rem;
	.comment-count{ margin: 0 0 15rem 5rem; }
	.comment-write{ border:1px solid #dedede; }
	.writer-group{ display: flex; justify-content: space-between; gap: 4rem; padding: 7rem 24rem; border-bottom: 1px solid #e1e1e1; }
	.writer-group label{ margin-right: 10rem; font-size: 13rem; }
	.writer-group input{ margin: 0; height: 40rem; padding: 7rem 8rem; }
	textarea{ margin: 0; display: block; width: 100%; height: 130rem; padding: 20rem; border: 0; }
	.submit-group{ position: relative; display: flex; justify-content: end; border-top:1px solid #e1e1e1; text-align:right;}
	.btn-submit{ margin: -1px -1px -1px 0; width: 75rem; height: 50rem; background: #222; border: 0; color: #fff; }

	.list{ margin-top: 30rem; }
	.list > li{ position:relative; min-height:90rem; padding: 15rem 0; border-top: 1px solid #e1e1e1; }
	.list > li:last-child{ border-bottom:1px solid #e1e1e1; }
	.btn-group{ position:absolute; right:0; top: 10rem; display: flex; align-items: center; gap: 8rem; }
	.date{ font-size: 13rem; }
	.btn-reply, .btn-del{ width: 24rem; height: 24rem; background: no-repeat 50%; border: 1px solid #c3c3c3; }
	.btn-reply{ background-image: url('/assets/images/components/board/btn_comment.png'); }
	.btn-del{ background-image: url('/assets/images/components/board/btn_comment_del.png'); }
	.list-name{ font-weight: 600; }
	.list-comment{ margin-top: 15rem; line-height: 1.4; }
	[aria-hidden="true"]{ display: none; }

	.list-comment-write{ margin-top: 20rem; background: #f7f7f7; border:1px solid #dedede; }
	.list-comment-write textarea{ height:80rem;}
	.list-pass:not([aria-hidden="true"]){ position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; background:rgba(255,255,255,0.9); text-align:center; }
	.delete-message{ margin-bottom: 10rem; }
	.list-pass input[type="password"]{height:40rem;}
	.list-pass .button{ height: 33rem; line-height: 31rem; }
	@media(min-width:768px){
		.list .name{ padding-right: 200rem; }
		.writer-name{ max-width:180rem; }
		.writer-pass{ max-width:220rem; }
	}
	@media(max-width:767px){
		.writer-group{ flex-direction: column; padding: 11rem 15rem; }
		.writer-group > li{ display: grid; grid-template-columns: auto 1fr; align-items: center; }
		.btn-group{ position: relative; top: 0; margin-top: 10rem; }
		.comment_write .input >  span{float:none !important; display:block; margin:2rem 0;}
		.comment_write label{min-width:80rem; margin-right:0;}
		.list .btn{position:static; margin-top:10rem;}
		.list-pass input[type="password"]{display:block; width:200rem; margin:0 auto 5rem;}
	}
}

.page-placeholder{ padding-block: 120px; text-align: center; word-break: keep-all;
	.icon{ margin-bottom: 10px; width: 45px; fill: rgba(0, 0, 0, 0.8); }
	.heading{ font-size: 35px; }
	.description{ margin-top: 1.11111111em; font-size: 18px; }
	@media(max-width:767px){
		&{ padding-block: 70px; }
		.heading{ font-size: 30px; }
		.description{ font-size: 16px; }
		.description br{ display: none; }
	}
}
/* #endregion */

/* #LEGAL 법적 고지 양식 */
.legal-document{ font: 300 var(--fs16)/1.5 var(--font-pre);
	:where(h2, h3, h4, h5, h6){ margin-bottom: 20rem; font-weight: 700; font-size: var(--fs18); }
	p, ul, ol{ color: #666; }
	li + li{ margin-top: 8rem; }
	hr{ margin-block: 40rem; border: 0; border-top: 1px solid #ddd; }
}

/* #region #JOIN 회원가입, 수정 */
/* 회원 */
.join_area h2{font-size:30rem !important; color:#222; font-weight:600; text-align:center;}
.join_area h2 i{display:inline-block; font-style: normal; }
.join_area > p{margin-top:20rem; text-align:center; font-size:17rem; color:#494949; font-weight:300; word-break:keep-all;}
.join_area h3{margin:30rem 0 10rem; font-size:17rem; color:#222;}
.join_area textarea{width:100%; height:250rem; box-sizing:border-box; padding:15rem; border:1rem solid #dbdbdb; resize:none;}
.join_area .title{display:block; margin-bottom:30rem; font-size:30rem; color:#222; text-align:center; font-weight:700;}
.join_area .check{display:flex; align-items:center; min-height:55rem; box-sizing:border-box; padding:5rem 15rem; border:1rem solid #ececec; border-top-width:0; border-radius:0 0 5rem 5rem; font-weight:700;}
.join_area .box{margin-top:30rem; padding-bottom:30rem;}
.join_area .box > h3{display:flex; align-items:center; min-height:55rem; box-sizing:border-box; margin:0; padding:5rem 15rem; background:#fafafa; border:1rem solid #ececec; border-bottom-width:0; border-radius:5rem 5rem 0 0;}
.join_area .box:last-child{border-bottom-width:0;}
.join_area .box.join{max-width:470rem; box-sizing:border-box; margin:20rem auto 0; border-bottom-width:0;}
.join_area .box.join ul{border:0;}
.join_area .box.join ul li{position:relative; box-sizing:border-box; padding-top:10rem;}
.join_area .box.join ul li:before{content:''; opacity:0.6; display:none; display:block; position:absolute; top:50%; right:0px; width:16rem; height:18rem; margin-top:-9rem; transition:all 0.5s ease 0s;}
.join_area .box.join ul li label{display:none; position:absolute; top:50%; left:0px; color:#666; font-weight:300; transform:translateY(-50%); transition:all 0.3s ease-in-out;}
.join_area .box.join ul li input{width:100%; height:58rem; margin:0; padding:0 16rem;  background-color:transparent; border:1rem solid #eee; font-size:14rem;}
.join_area .box.join ul li input:hover,
.join_area .box.join ul li input:focus{outline:none;}
/* 아이콘노출숨김
.join_area .box.join ul li[data-member-login="pw"]:before{background:url(/assets/images/components/module/icon_data.svg) no-repeat 50% 50%;}
.join_area .box.join ul li[data-member-login="id"]:before{background:url(/assets/images/components/module/icon_user.svg) no-repeat 50% 50%;}
*/
/* li.active 값이 입력됐을 때, li.in input이 포커스 됐을 때 자바스크립트로 작성돼 있는데, css만으로 가능한 작업인데다 아이콘을 숨기고 있어서 스크립트 제거, 사용하려면 스타일 수정 필요 */
.join_area .box.join ul li[data-member-login="id"] input{padding-right:25rem;}
.join_area .box.join ul li.active label,
.join_area .box.join ul li.in label{top:20rem; color:#414141; transform:translateY(0);}
.join_area .box.join ul li.in input{border-color:#414141;}
.join_area .box.join ul li :is(input:focus-within, input:valid){border-color:#414141;}
.join_area .box.join ul li input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000rem #f3f3f3 inset;}
.join_area .box.join ul li.active:before,
.join_area .box.join ul li.in:before{opacity:1;}
.join_area .box.join .btn_login{display:block; width:100%; height:65rem; margin-top:7rem; background:#333; border:0; font-size:16rem; font-weight:600; transition:all 0.5s cubic-bezier(0, 0, 0.21, 0.87) 0s; color:#fff; text-transform:uppercase;}
.join_area .box.join .btn_login.join{display:flex; align-items:center; justify-content:center; box-sizing:border-box; background:#fff; border:1rem solid #333; color:#333; font-weight:600; text-align:center;}
.join_area .box.join .btn_login:hover{background:#333; color:#fff; box-shadow:5rem 15rem 20rem rgba(0,0,0,0.15);}
.join_area .box.join .btn_login.join:hover{background:#fff; box-shadow:5rem 15rem 20rem rgb(0 0 0 / 5%); color:#333;}
.join_area .scroll-box{overflow-y:auto; max-height:200rem; padding:20rem 15rem; border:1rem solid #eee;}

.join_area .box.find{max-width:500rem; box-sizing:border-box; margin:0 auto;}
.join_area .box.find h3 + table{margin-top:10rem;}
.join_area .box.find p{margin-top:10rem; font-size:13rem; text-align:center;}
.join_area .box.find .tac{margin-top:10rem;}
.join_area .box.find .common-table th{background:transparent;}
.join_area .btn_area{display:flex; justify-content:center; align-items:center; gap:5px; padding-top:14rem !important; text-align:center;}
.join_area .btn_area.social{justify-content:flex-end;}
.join_area .common-table{margin-top:30rem;}	
.join_area .common-table td em{font-size:13rem; word-break:keep-all;}
.join_area .join_box_scroll{overflow-y:auto; height:350rem; box-sizing:border-box; padding:20rem; border:1rem solid #dbdbdb;}

.login_social{position:relative; margin-top:30rem; text-align:center;}
.login_social:before{content:'or'; display:block; position:relative; z-index:5; width:100rem; margin:0 auto 25rem; background:#fff; font-size:20rem; font-weight:600; color:rgba(65,70,78,0.4); text-align:center;}
.login_social:after{content:''; opacity:0.1; display:block; position:absolute; top:12rem; left:50%; z-index:4; width:80%; height:1rem; background:#41464e; transform:translateX(-50%);}
.login_social a{display:inline-block; position:relative; padding:5rem 0 5rem 35rem; margin:0 7rem; text-align:left; font-size:14rem;}
.login_social a:before{content:''; display:block; position:absolute; left:0; top:0; width:30rem; height:30rem; background-repeat:no-repeat; background-position:50% 0; background-size:100%;}
.login_social .btn_login_naver:before{background-image:url(/assets/images/components/module/icon_naver.png);}
.login_social .btn_login_kakao:before{background-image:url(/assets/images/components/module/icon_kakao.png);}
.login_social .btn_login_facebook:before{background-image:url(/assets/images/components/module/icon_face.png);}

.btn_area.social a{display:flex; align-items:center; position:relative; padding:0; font-size:14rem;}
.btn_area.social a:before{content:''; display:block; position:relative; width:4rem ;height:4rem; background:#ddd; border-radius:100%; margin:0 9rem;}
.btn_area.social a:first-child:before{display:none;}

.area_namecheck h2{font-size:30rem; color:#222; font-weight:500; text-align:center;}
.area_namecheck > p{margin-top:20rem; text-align:center; font-size:16rem; color:#494949; font-weight:300;}
.area_namecheck h3{margin:30rem 0 10rem; padding:0; font-size:16rem; color:#222;}
.area_namecheck h3:before{display:none;}

/* 본인인증 */
.area_namecheck .inr{max-width:700rem; box-sizing:border-box; margin:0 auto;}
.area_namecheck .box{padding:15rem; border:1rem solid #d8d8d8;}
.area_namecheck .box p{margin-bottom:5rem; word-break:keep-all;}
.area_namecheck .box p.red{color:#e92054;}

/* 아이디찾기 / 비밀번호찾기 */
.join_area [data-member-form="phone"]{display:flex; align-items:center; gap:5rem; width:100%;}
.join_area [data-member-form="phone"] input[type="text"]{flex:auto; width:100%;}

/* 회원가입 정보입력 - 20231129 add */
.list-join input[type="text"],
.list-join input[type="password"],
.list-join input[type="number"],
.list-join input[type="email"],
.list-join select{width:100%; height:50rem; margin:0; border-color:#e9e9e9;}
.list-join{--gapSize:80rem; display:grid; grid-template-columns:repeat(2, 1fr); align-items:stretch; gap:10rem var(--gapSize); margin-top:15rem; padding-top:10rem; border-top:1rem solid #eaecf1;}
.list-join li{box-sizing:border-box; padding:20rem 0;}
.list-join li.full{grid-column:1/3;}
.list-join li > div:not(.join__title){margin-top:5rem;}
.list-join li > div:not(.join__title) em{display:block; margin-top:3rem; font-size:14rem; color:#999;}
.join-title{display:flex; align-items:center; font-weight:600;}
.join-title__number{display:flex; align-items:center;}
.join-title__number i{--sizeWid:28rem; display:inline-flex; justify-content:center; align-items:center; width:var(--sizeWid); height:var(--sizeWid); box-sizing:border-box; margin-right:10rem; border:2px solid #3f3f3f; border-radius:100%; font-size:14rem; font-weight:700;}
.list-join .button{margin:0;}
.list-join input[type="text"].datepicker{font-size:var(--font-base, 14rem); text-align:left;}
.list-join ~ h3{margin-top:80rem;}
	/* 줄변경방지 */
.list-join li > div .nowrap{display:flex; align-items:center; gap:0 5rem;}
	/* checkbox radiobox, 성별 */
.list-join .designRadio,
.list-join .designCheck{display:flex; flex-wrap:wrap; align-items:center; gap:3rem 50rem; min-height:50rem;}
.list-join .designRadio em,
.list-join .designCheck em{margin-top:0 !important;}
	/* id입력 */
.list-join .id-only{display:flex; flex-wrap:wrap; align-items:center; width:100%; min-height:50rem; box-sizing:border-box; padding:7rem 8rem; background:#f5f5f5; border:1px solid #f5f5f5;}
.list-join [data-member-form="id"]{display:flex; flex-wrap:wrap; align-items:stretch;}
.list-join [data-member-form="id"] > *:not(em){flex:none;}
.list-join [data-member-form="id"] input[type="text"]{width:calc(100% - 100rem);}
.list-join [data-member-form="id"] .button{flex:none;}
.list-join [data-member-form="id"] em{flex:0 1 100%;}
	/* email입력 */
.list-join [data-member-form="email"] input[type="text"]{flex:auto;}
.list-join [data-member-form="email"] select{flex:none; max-width:27%;}
.list-join [data-member-form="email"] input[type="text"][disabled]{color:var(--color-base, #333);}
	/* 생년월일 */
.list-join [data-member-form="date"] > div{position:relative;}
.list-join [data-member-form="date"] .datepicker{padding-right:40rem;}
.list-join [data-member-form="date"] .ui-datepicker-trigger{position:absolute; right:10rem; top:50%; transform:translateY(-50%);}
	/* 주소 */
.list-join [data-member-form="addr"] > div.nowrap{align-items:stretch; gap:0; margin-bottom:5rem;}
.list-join [data-member-form="addr"] input[id="zip"]{width:40%;}
.list-join [data-member-form="addr"] input[id="zip"][readonly]{background-color:#fff;}
.list-join [data-member-form="addr"] .button{flex:none; margin-right:5rem;}

@media(max-width:1024px){
	.login_social .btn_login_naver:before{background-image:url(/assets/images/components/module/icon_naver@x3.png);}
	.login_social .btn_login_kakao:before{background-image:url(/assets/images/components/module/icon_kakao@x3.png);}
	.login_social .btn_login_facebook:before{background-image:url(/assets/images/components/module/icon_face@x3.png);}

	/* 회원가입 정보입력 - 20231129 add */
	.list-join{--gapSize:clamp(50rem, 7.813vw, 80rem);}
}

@media(max-width:768px){
	.join_area .common-table{table-layout:fixed;}
	.join_area .common-table td[data-member-form] em{display:block; margin-top:3rem;}
	.join_area .common-table td[data-member-form="email"] input{width:100%;}
	.join_area .common-table td[data-member-form="id"]{position:relative;}
	.join_area .common-table td[data-member-form="addr"] > span{display:block; position:relative;}	
	.join_area .common-table td[data-member-form="id"] input{width:100%; padding-right:100rem;}
	.join_area .common-table td[data-member-form="addr"] > span input#zip{width:100%; padding-right:120rem;}
	.join_area .common-table td[data-member-form="id"] .button{position:absolute; top:15rem; right:10rem;}	
	.join_area .common-table td[data-member-form="addr"] > span .button{position:absolute; top:0; right:0;}	
	.join_area .common-table col[data-member-form="th"]{width:120rem !important;}	
	.join_area .common-table col[data-member-form="td"]{width:auto !important;}

	.login_social a{margin:3rem 7rem; font-size:13rem;}
	.join_area .box{padding-bottom:20rem;}	
	.join_area .btn_area{padding-top:23rem !important;}
	.join_area .btn_area.custom{justify-content:center;}
}

@media(max-width:640px){
	/* 회원가입 정보입력 - 20231129 add */
	.list-join input[type="text"].datepicker{width:100% !important;}
}

@media(max-width:480px){
	.join_area > p{word-break:keep-all; padding:0 10rem; margin-top:14rem; font-size: 14rem;}
	.join_area .common-table col[data-member-form="th"]{width:100rem !important;}
	.join_area .common-table td[data-member-form="id"] .button{top:10rem;}
	.join_area .join_box_scroll{padding:15rem 10rem;}
	.login_social:before{margin-bottom:15rem;}
	.join_area .box.join{max-width:none;}
	.join_area textarea{height:120rem; padding:10rem; font-weight:300;}
	.join_area .check{padding-top:8rem; font-size:14rem;}	
	.join_area .btn_area.custom{flex-direction:row;}

	/* 회원가입 정보입력 - 20231129 add */
	.list-join{display:block;}
		/* id입력 */
	.list-join [data-member-form="id"] input[type="text"]{width:calc(100% - 85rem);}
	.list-join [data-member-form="id"] .button{min-width:70rem; width:85rem; padding-left:5rem; padding-right:5rem;}
		/* email입력 */
	.list-join [data-member-form="email"] .nowrap{flex-wrap:wrap; gap:5rem;}
	.list-join [data-member-form="email"] input[type="text"][id="email1"]{width:100%;}
	.list-join [data-member-form="email"] input[type="text"][id="email2"]{width:calc(100% - 160rem);}
	.list-join [data-member-form="email"] select{width:130rem; max-width:inherit;}
		/* 주소입력 */
	.list-join [data-member-form="addr"] > div.nowrap{flex-wrap:wrap;}
	.list-join [data-member-form="addr"] input[id="zip"][readonly]{width:calc(100% - 130rem); padding-left:5rem; padding-right:5rem;}
	.list-join [data-member-form="addr"] input[type="text"][id="address1"]{margin-top:5rem;}
	.list-join [data-member-form="addr"] .button{width:130rem; margin-right:0;}
}

@media(max-width:380px){
	.join_area .common-table td[data-member-form="id"] .button{top:10rem;}
	.btn_area.social{padding-top:5rem;}
}

@media(max-width:370px){
	.join_area .box.join{padding-right:0;}
	.join_area .box.join .button.login{display:block; position:static; width:120rem; height:35rem; line-height:33rem; margin:10rem auto 0;}
	.btn_area.social a{padding:0 5rem 0 15rem;}
}
/* #endregion */

/* #region #POPUP 레이어 팝업 */
/* layer popup - 이미지만 노출하는 항목 ex)인증서  */
.area_popLayer.img .popBox{display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:617rem !important; height:839rem; padding:0px; background-color:transparent; box-shadow:none;}
.area_popLayer.img .popBox .scrollbar-inner{overflow:inherit; height:auto; padding:0px;}
.area_popLayer.img .popBox .btn_close{top:0; right:-70rem;}
.area_popLayer.img.patent img{width:auto; max-width:100%; max-height:100%;}
.box_view_img .img{display:block;}
.box_view_img .img img{width:100%;}
	/* layer popup - btn control */
[data-pop-layer="layer"]{position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.2);}
[data-pop-layer="layer"] .popBox{position:absolute; top:50%; left:50%; width:var(--popWid, 400rem); min-height:var(--popHig, 600rem); box-sizing:border-box; background:var(--color-white, #fff); box-shadow:3px 15px 30px rgba(0,0,0,0.15); line-height:1.4; transform:translate(-50%, -50%);}
[data-pop-layer="layer"] .popBox .popTitle{display:flex; align-items:center; min-height:var(--titleHig); box-sizing:border-box; padding:5rem 20rem; font-size:25rem; font-weight:600;}
[data-pop-layer="layer"] .popBox .btn_close{position:absolute; top:0px; right:-70rem; width:70rem; height:68rem; line-height:68rem; background:var(--point-color, #111); box-shadow:3px 10px 15px rgba(0,0,0,0.15);}
[data-pop-layer="layer"] .popBox .btn_close span{display:inline-block; position:relative; width:18rem; height:18rem; margin:-4rem auto 0; vertical-align:middle; background:url(/assets/images/components/module/btn_close.png) no-repeat 50% 0; background-size:18rem 18rem; text-indent:100%; overflow:hidden; white-space:nowrap;}
[data-pop-layer="layer"] .popBox .btn_close:focus{outline:none;}
[data-pop-layer="layer"] .popBox .popConts{overflow-y:auto; max-height:calc(var(--popHig) - var(--titleHig)); box-sizing:border-box; padding:20rem 20rem 40rem;}
	/* layer popup - size  */
[data-pop-layer="layer"] .popBox{--popWid:400rem; --popHig:600rem; --titleHig:67rem;}
	/* layer popup img only */
.area_popLayer--img .popBox{display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:617rem !important; height:839rem; padding:0px; background-color:transparent; box-shadow:none;}
.area_popLayer--img .popBox .scrollbar-inner{overflow:inherit; height:auto; padding:0;}
.area_popLayer--img .popBox .btn_close{top:0; right:-70rem;}
.area_popLayer--img.patent img{width:auto; max-width:100%; max-height:100%;}
.box_view_img .img{display:block;}
.box_view_img .img img{width:100%;}	
	/* layer popup - basic */
.layerPop{position:absolute; z-index:90; overflow:hidden; border:1rem solid #353535; border-radius:14rem; z-index:10;}
.layerPop a{display:block;}
.layerPop img{ display: block; max-width:100%;}
.layerPop .btn{display:flex; justify-content:space-between; padding:13rem 10rem; background:#353535; text-align:left;}
.layerPop .btn button{display:inline-block; margin-left:15rem; background:none; color:#fff; font-size:13rem;}
.layerPop .btn button:last-child{float:right; margin:0 12rem 0 0;}
@media(max-width:1024px){
	/* 7) layer pop */
	[data-pop-layer="layer"] .popBox{--popHig:100% !important; top:0px !important; left:0px !important; width:100% !important; height:100%  !important; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	[data-pop-layer="layer"] .popBox .popTitle{padding-right:80rem !important;}
	[data-pop-layer="layer"] .popBox .btn_close{right:0px; box-shadow:none;}
	.layerPop{top:100rem !important; left:50% !important; transform:translateX(-50%); max-width: 92%; }
		/* layer popup img only */
	.area_popLayer--img .popBox{background:#fff;}
	.area_popLayer--img .popBox .scrollbar-inner{overflow-y:auto; height:100%;}
	.area_popLayer--img .popBox .btn_close{right:0px;}
}
@media(max-width:768px){
	/* 7) layer pop */
	/* layer popup img only */
	.box_view_img{display:flex; justify-content:center; align-items:center; height:100%;}
	.box_view_img .img{text-align:center;}
	.box_view_img .img img{width:80%;}
	.area_popLayer.img .popBox{width:100% !important;}
}
@media(max-width:600px){
	/* 7) layer pop */
	[data-pop-layer="layer"] .popBox .popConts img,
	.layerPop img{max-width:100%; width:100%;}
}
/* #endregion */

/* #PRIVACY-POPOVER 메인 프라이버시 팝오버 */
.privacy-popover{ padding: 0; border: 0;
	&::backdrop{ background: #000; opacity: .8; }
	.head{ display: flex; align-items: center; justify-content: space-between; gap: 2ch; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; }
	.privacy-close{ position: relative; width: 1.1875em; aspect-ratio: 1; }
	.privacy-close::before{ --line-thickness: 1px; content: ''; position: absolute; inset: -.1875em; rotate: 45deg; background: linear-gradient(0deg, #0000 calc(50% - var(--line-thickness)), currentColor calc(50% - var(--line-thickness)), currentColor calc(50% + var(--line-thickness)), #0000 calc(50% + var(--line-thickness))), linear-gradient(90deg, #0000 calc(50% - var(--line-thickness)), currentColor calc(50% - var(--line-thickness)), currentColor calc(50% + var(--line-thickness)), #0000 calc(50% + var(--line-thickness))); }
	.privacy-close::after{ content: ''; position: absolute; inset: -5px; }
	.body, .dialogIframe{ overflow: auto; display: block; width: 100%; max-height: calc(85vh - 3.4375em); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; }
	@media(prefers-reduced-motion:no-preference){
		&{ transition: .4s allow-discrete; opacity: 0;}
		&::backdrop{ opacity: 0; transition: .4s allow-discrete; }
		&:popover-open{ opacity: 1;
			&::backdrop{ opacity: .6; }
			@starting-style{ opacity: 0;
				&::backdrop{ opacity: 0; }
			}
		}
	}
	@media(min-width:768px){
		&{ width: min(600px, 92vw); }
	}
}

/* #region #PRIVACY-MODAL 메인 프라이버시 다이얼로그 - 스크립트 때문에 위 팝오버로 대처 */
body:has(#dialog[open]){ overflow: hidden; }
.dialogBtn.show{ display: contents; background: 0; font-size: inherit; }
#dialog{ position: fixed; inset: 0; margin: auto; display: block; width: min(600px, 92vw); padding: 0; background: #fff; border: 0; z-index: 151; }
#dialog:not([open]){ visibility: hidden; opacity: 0; }
#dialog::backdrop{ display: none; }
.dialogHead{ display: flex; align-items: center; justify-content: space-between; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; }
.dialogBtn.close{ position: relative; width: 1.1875em; height: 1.1875em; background: url('/images/components/module/btn_close.png') no-repeat 50% / contain; font-size: inherit; }
.dialogBtn.close::before{ content: ''; position: absolute; inset: -5px; }
.dialogBody,
.dialogIframe{ overflow: auto; display: block; width: 100%; height: min(590px, calc(85vh - 3.4375em)); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; }
.dialogBackdrop{ position: fixed; inset: 0; background: #000; opacity: .8; z-index: -1; }
@media(prefers-reduced-motion:no-preference){
	#dialog{ transition: opacity .4s, visibility .4s; }
	.dialogBackdrop{ transition: .4s; }
}
/* #endregion */

/* #HISTORY 연혁 컴포넌트 */
.history-component{ position: relative; display: grid; gap: 10rem; padding: 20rem 0;
	.year{ font: 900 40rem var(--font-pre); }
	.month-ul{ margin-top: 20rem; display: grid; gap: 20rem; }
	.month-li{ display: flex; gap: 20rem; }
	.month{ min-width: 3ch; font: 700 20rem var(--font-pre); }
	.day-ul{ display: grid; gap: 5rem; }
	.day-li{ display: flex; gap: 10rem; }
	.day{ min-width: 3ch; font: 500 20rem var(--font-pre); }
	.day:empty{ display: none; }
	@media(min-width:768px){
		&::before{content:''; display:block; position:absolute; inset: 0 50%; translate: -1px; border-right: 2px solid #ddd; }
		.year-li{ width: 50%; }
		.year-li:nth-child(odd){ margin-left: auto; padding-left: 50rem; }
		.year-li:nth-child(even){ padding-right: 50rem; text-align: right; }
		.year-li:nth-child(even) .month-li{ flex-direction: row-reverse; }
		.year-li:nth-child(even) .day-li{ flex-direction: row-reverse; }
	}
}

/* #STORE 매장 찾기 컴포넌트 */
.store-management{ --border: #e0e6e9; display: grid; gap: 30rem;
	.search-panel{ position: relative; border: 1px solid var(--border); }
	.heading{ height: 60rem; padding: 15rem; background: var(--primary); font-size: 18rem; color:#fff; text-align: center; }
	.form{ padding: 15rem 20rem; }
	#keyword{ width: 100%; height: 60rem; padding: 20rem; }
	.search-results{ overflow-y: auto; padding: 15rem 20rem; border-top: 1px solid var(--border); }
	.store-btn{ width: 100%; padding: 10rem 0; border-bottom: 1px solid #eee; text-align: left; }
	.results-name{ font: 700 18rem var(--font-pre); }
	.results-address{ margin-top: 10rem; font-weight: 300; color: #666; }
	.results-tel{ display: none; margin-top: 10rem; font-weight: 300; color: #666; }

	.map-view{ width: 100%; height: 600rem; }
	.store-info{ position: relative; width: 300px; background: #fff; border: 1px solid #ddd; }
	.store-info::before{ content: ''; position:absolute; left:50%; ; bottom:-16rem; width:14rem; height:14rem; margin-left:-7.5rem; background:#fff; transform:translateY(-51%) rotate(-45deg); border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
	.info-header{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8rem; background: var(--primary); padding: 15rem 10rem; color:#fff; }
	.location-icon{ width: 20rem; height: 25rem; background: url('/assets/images/pages/icon_map.svg') no-repeat 50% / contain; }
	.info-name{ position: relative; }
	.info-close{ width: 30rem; height: 30rem; background: var(--black); }
	.info-body{ padding: 10rem; }
	.info_swiper .swiper-slide{ aspect-ratio: 16/9; }
	.swiper-slide{ background: no-repeat 50% / cover; }
	.info-address{ margin-top: 5rem; white-space: normal; }
	.info-tel{ margin-top: 10rem; display: inline-block; }
	/* .info_search_image{position:absolute; right:35%; top:44%} */
	@media(min-width:768px){
		&{ grid-template-columns: 400rem 1fr; }
		.search-results{ height: 448rem; }
		.store-info:not(:has(.swiper)){ translate: -5% 76px; }
		.store-info:has(.swiper){ translate: -5% 244px; }
	}
	@media(max-width:767px){
		.search-results{ height: 250rem; }
		.store-info:not(:has(.swiper)){ translate: -5% 69px; }
		.store-info:has(.swiper){ translate: -5% 234px; }
	}
}