@charset "utf-8";

/* 3) 정렬 */
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

/* 4) button */
.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:50rem; 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:1280px){
		&{min-width:70rem; font-size:14rem;}
		&.lg{min-width:100rem; font-size:16rem;}
	}
	@media(max-width:767px){
		&{padding:8rem 10rem;}
		&.lg{min-width:80rem;}
	}
}

/* 5) Form Control */
.sys-common{
	i, em{ font-style: normal; }
	input, select, textarea, label{display:inline-block; width:auto; vertical-align:middle; font-size:var(--font-base, 14rem);}
	:where(
		[type="date"],
		[type="datetime-local"],
		[type="email"],
		[type="month"],
		[type="number"],
		[type="password"],
		[type="search"],
		[type="tel"],
		[type="text"],
		[type="time"],
		[type="url"],
		[type="week"],
		select,
		textarea
	){height:40rem; padding:7rem 8rem; /* margin:2rem 0px; */ border:1rem solid #ddd; background:var(--color-white, #fff); border-radius: 1px; }
	select{ appearance: none; padding-right:20rem; background: var(--color-white, #fff) url(../../images/board/select_arrow.svg) no-repeat calc(100% - 7rem) 50% / 7rem; }
	
	input[type="file"]{ background:#eee; font-size: 14rem; }
	:where(input[readonly], input[disabled]){ background: #f5f5f5; }
	/* :where(input[type="checkbox"], input[type="radio"]){width:13rem; height:13rem; margin:2rem 3rem 1rem 0;} */
	table{width:100%;}

	/* form width */
	[class*="width-"]{ width: 100%; }
	.width-50{ max-width: 50rem; }
	.width-70{ max-width: 70rem; }
	.width-100{ max-width: 100rem; }
	.width-200{ max-width: 200rem; }
	.width-327{ max-width: 327rem; }
	.width-300{ max-width: 300rem; }
	.width-400{ max-width: 400rem; }
	.width-800{ max-width: 800rem; }
	.width-500{ max-width: 500rem; }
	.width-840{ max-width: 840rem; }
	.width-full{ max-width: 100%; }
}

/* 221028 이용약관 */
#content:not(:has(.join_area)){
	.privacy .sub_title{ display: none; }
	.privacy h2{font-weight:700; font-size:40rem; color:#222; text-align:center; }
	.privacy h3{ margin-bottom:20rem; font-weight:700; font-size:17rem; color:#222; }
	.privacy ul li,
	.privacy p{line-height:1.6; font-weight:300; color:#666;}
	.privacy p{font-size:14rem;}
	.privacy ul li{font-size:15rem;}
	.privacy ul li + li{margin-top: 8rem;}
	.privacy ul li ul {margin-top:5rem; margin-bottom:20rem; padding-left:15rem;}
	.privacy .privacy_box{padding:40rem 0; border-bottom:1px solid #ddd;}
	.privacy .privacy_box:first-child{padding-top: 0;}
	.privacy .privacy_box:last-child{border:none; padding-bottom: 0;}
	@media(max-width:1279px){
		.privacy h2{ font-size: 24rem; }
	}
	@media(max-width:767px){
		.privacy h3{ font-size: 15rem; }
	}
}