@charset "utf-8";
@layer common{
	/* 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;}
	}

	/* 6) table - 온라인에서 사용 */
	table.table{margin-top:15rem; border-top:1rem solid #111;}
	table.table thead th{background:#edf0fb; border-bottom:1rem dashed #e2e7f9;}
	table.table.line thead th{border:1rem dashed #c3cae6;}
	table.table thead tr:last-child th{border-bottom-width:0;}
	table.table thead th[rowspan]{border-right:1rem dashed #c3cae6;}
	table.table tbody th{background:#f5f5f5; border:1rem solid #e0e0e0; border-right-color:#f5f5f5;}
	table.table thead + tbody th{background:transparent; border-right-color:#e0e0e0;}
	table.table th,
	table.table td{padding:9rem 10rem; word-break:keep-all;}
	table.table th{text-align:center; font-weight:600; color:#222;}
	table.table thead + tbody tr td{text-align:center;}
	table.table tbody td{border:1rem solid #e0e0e0; text-align:left;}
	table.table thead tr th:last-child,
	table.table tbody tr td:last-child{border-right-width:0px;}
	table.table thead tr th:first-child,
	table.table tbody tr td:first-child,
	table.table tbody tr th:first-child{border-left-width:0px;}
		/* table text align */
	table.table.tal td,
	table.table .tal{text-align:left !important;}
	table.table.tar td,
	table.table .tar{text-align:right !important;}
	table.table .tac{text-align:center !important;}
	table.table .list{margin-top:0px;}
	table.table td input[type="text"],
	table.table td select,
	table.table td textarea{width:100%;}
		/* table button form */
	table.table .button{min-width:60rem;}
	table.table.form td{height:38rem; padding:5rem 10rem; text-align:left;}
		/* table link hover */
	table.table td a[class*="link_"]{color:#3653a9; transition:0.2s ease;}
	table.table td a[class*="link_"]:hover{box-shadow:0 1rem 0px #265096;}
	table.table.hover tbody tr:hover th,
	table.table.hover tbody tr:hover td{background:#f7f7ee !important;}
		/* table bgcolor */
	table.table.blue tbody th{background:#edf0fb !important;}
	table.table.gray{border-top-color:#d0d0d0;}
	table.table.gray thead th{background:#f5f5f5 !important;}
	table.table.gray.line thead th{border-color:#cecece}
	table.table.gray thead th[rowspan]{border-right-color:#cecece;}
	table.table.gray thead tr:last-child th{border-bottom-color:#e2e2e2;}
		/* table img */
	table.table img{max-width:100%;}
	table.table div.conts{min-height:300rem;}
	table.table div.conts img{max-width:100%;}
		/* table total */
	table.table .total td,
	table.table td.total{font-weight:600; color:#222;}
		/* table scroll mobile */
	#content .scrollTable{width:100%;}
	#content .mob_info{display:none; position:relative; width:100%; box-sizing:border-box; margin-top:10rem; padding:7rem 7rem 7rem 35rem; background:var(--color-white); border:1rem dashed #cfcfcf; font-size:14rem;}
	#content .mob_info:before{content:''; display:block; position:absolute; top:7rem; left:7rem; width:20rem; height:22rem; background:url(../../images/board/img_drag.png) no-repeat 50% 0; background-size:100%;}
	@media screen and (max-width:640px){
		/* 6) table */
		table.table col[data-table-respon]{display:none; width:auto !important;}
		table.table th[data-table-respon],
		table.table td[data-table-respon]{display:block; width:100%; box-sizing:border-box;}
		table.table tbody th[data-table-respon]{border-width:0px;}
		table.table tbody td[data-table-respon]{border-left-width:0px; border-right-width:0px;}
	}

	/* 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; }
	}
}