@charset "utf-8";
/* 3) 정렬 */
.tac{text-align:center !important;}
.tal{text-align:left !important;}
.tar{text-align:right !important;}

/* 4) button */
.btn_area{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; width:100%; margin-top:40rem; padding-bottom:30rem;}
.btn_area.flex{display:flex; justify-content:space-between; align-items:center;}
.btn_area.right{justify-content:flex-end;}
.btn_area.left{justify-content:flex-start;}
.button{overflow:hidden; display:inline-flex; justify-content:center; align-items:center; position:relative; box-sizing:border-box; margin:2rem; padding:5rem 20rem; background:#222; color:var(--color-white, #fff); font-weight:normal; transition:0.3s ease 0s;}
.button span{position:relative; z-index:2; color:var(--color-white, #fff);}
.button.red{background:#e23343; border:1rem solid #e23343;}
.button.blue{background:#1637a2; border:1rem solid #1637a2;}
.button.black{background:var(--color-black, #000); border:1rem solid var(--color-black, #000);}
.button.gray{background:#92999e; border:1rem solid #92999e;}
.button.white{background:var(--color-white, #fff); border:1rem solid #cdcdcd; color:var(--color-base, #333);}
.button.white span{color:var(--color-base, #333);}
	/* button-size */
.button{min-width:100rem; min-height:40rem;}
.button.lg{min-width:140rem; min-height:50rem; font-size:18rem; letter-spacing:-1rem;}
.button.sm{min-width:60rem; min-height:23rem; padding:0 10rem; font-size:12rem; font-weight:500;}
table .button{height:33rem;}
	/* button hover */
.button:hover,
.button:focus{opacity:0.6;}
	/* input-button & label-button */
input.button:hover,
input.button:focus{opacity:0.6;}
label.button{margin-right:0px !important; cursor:pointer;}
.in label.button:before{transform:translateX(-10%) skew(-15deg) perspective(500px);}
.in label.button{color:#222 !important; box-shadow:0px 10px 15px rgba(0,0,0,0.15);}
	/* white-button */
.button.white:before{background:var(--color-black, #000);}
.button.white:hover,
.button.white:focus{border-color:var(--color-black, #000); color:var(--color-white, #fff) !important;}
input.button:before{display:none;}
input.button.white:hover,
input.button.white:focus{color:#222 !important;}
@media(max-width:420px){
	/* 4) button */
	.button{min-width:70rem; font-size:14rem;}
	.button.lg{min-width:100rem; font-size:16rem;}
}
@media(max-width:320px){
	/* 4) button */
	.button{padding:8rem 10rem;}
	.button.lg{min-width:80rem;}
}

/* 5) Form Control */
@scope(.sys-common){
	input,
	select,
	textarea,
	label{display:inline-block; box-sizing:border-box; width:auto; font-size:var(--font-base, inherit);}
	input[type="text"],
	input[type="password"],
	input[type="tel"],
	input[type="date"],
	input[type="email"],
	input[type="number"],
	textarea{height:40rem; padding:7rem 8rem; margin:2rem 0px; border:1rem solid #ddd; background:var(--color-white, var(--color-white, #fff)); vertical-align:middle;}
	textarea{resize:none;}
	select{height:40rem; padding:0 8rem; margin:2rem 0px; border:1rem solid #ddd; background:var(--color-white, #fff); vertical-align:middle;}
	select::-ms-expand {background-color:transparent; border:0;}
	input[type="text"],
	input[type="password"],
	input[type="submit"],
	input[type="button"],
	input[type="number"],
	input[type="file"],
	select,
	textarea{-webkit-border-radius:1rem; -webkit-appearance:none;}
	select{padding-right:20rem; background:var(--color-white, #fff) url(../../images/board/select_arrow.svg) no-repeat calc(100% - 7rem) 50%; background-size:7rem 7rem;}
	body.ie select{padding-right:10rem;}
	input[type="file"]{background:#eee; font-size:1.08em;}
	input[readonly],
	input[disabled]{background:#f5f5f5;}
	input[disabled]{color:#c5c5c5;}
	input[type="checkbox"],
	input[type="radio"]{width:13rem; height:13rem; margin:2rem 3rem 1rem 0;}
	input[type="checkbox"] + label,
	input[type="radio"] + label{margin-right:20rem;}
	table{width:100%;}
		/* form width */
	.input50{width:50rem !important;}
	.input70{width:70rem !important;}
	.input100{width:100rem !important;}
	.input200{width:200rem !important;}
	.input300{width:300rem !important;}
	.input400{width:400rem !important;}
	.input800{width:800rem !important;}
	.inputFull{width:100% !important;}
}

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