@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; 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{box-shadow:0px 10rem 15rem rgba(0,0,0,0.15);}
	/* input-button & label-button */
input.button:hover,
input.button:focus{}
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){
	i, em{ font-style: normal; }
	input,
	select,
	textarea,
	label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; font-size:var(--font-base, 14rem);}
	input[type="text"],
	input[type="password"],
	input[type="tel"],
	input[type="date"],
	input[type="email"],
	input[type="number"],
	input[type="date"],
	textarea{height:40rem; padding:7rem 8rem; margin:2rem 0px; border:1rem solid #ddd; background: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:14rem;}
	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, #fff); 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(max-width:640px){
	/* 6) table */
	#content .scrollTable{overflow:auto;}
	#content .scrollTable .table{width:768px;}
	#content .mob_info{display:block;}
	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:0;}
	table.table tbody td[data-table-respon]{border-left-width:0; border-right-width:0;}
}

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