/*
 * Nanum Barun Gothic (Korean) http://hangeul.naver.com
 */
@font-face {
  font-family: 'NanumBarunGothic';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NanumBarunGothic.eot);
  src: local('NanumBarunGothic'),
       url(../fonts/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothic.woff2) format('woff2'),
       url(../fonts/NanumBarunGothic.woff) format('woff'),
       url(../fonts/NanumBarunGothic.ttf) format('truetype');
}

@font-face {
  font-family: 'NanumBarunGothic';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NanumBarunGothicBold.eot);
  src: local('NanumBarunGothicBold'),
       url(../fonts/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothicBold.woff2) format('woff2'),
       url(../fonts/NanumBarunGothicBold.woff) format('woff'),
       url(../fonts/NanumBarunGothicBold.ttf) format('truetype');
}

@font-face {
  font-family: 'NanumBarunGothicBold';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NanumBarunGothicBold.eot);
  src: local('NanumBarunGothicBold'),
       url(../fonts/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothicBold.woff2) format('woff2'),
       url(../fonts/NanumBarunGothicBold.woff) format('woff'),
       url(../fonts/NanumBarunGothicBold.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/NanumBarunGothicUltraLight.eot);
  src: local('Nanum Barun Gothic UltraLight'),
       local('NanumBarunGothicUltraLight'),
       url(../fonts/NanumBarunGothicUltraLight.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothicUltraLight.woff2) format('woff2'),
       url(../fonts/NanumBarunGothicUltraLight.woff) format('woff'),
       url(../fonts/NanumBarunGothicUltraLight.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NanumBarunGothicLight.eot);
  src: local('Nanum Barun Gothic Light'),
       local('NanumBarunGothicLight'),
       url(../fonts/NanumBarunGothicLight.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothicLight.woff2) format('woff2'),
       url(../fonts/NanumBarunGothicLight.woff) format('woff'),
       url(../fonts/NanumBarunGothicLight.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NanumBarunGothic.eot);
  src: local('Nanum Barun Gothic'),
       local('NanumBarunGothic'),
       url(../fonts/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothic.woff2) format('woff2'),
       url(../fonts/NanumBarunGothic.woff) format('woff'),
       url(../fonts/NanumBarunGothic.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NanumBarunGothicBold.eot);
  src: local('Nanum Barun Gothic Bold'),
       local('NanumBarunGothicBold'),
       url(../fonts/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'),
       url(../fonts/NanumBarunGothicBold.woff2) format('woff2'),
       url(../fonts/NanumBarunGothicBold.woff) format('woff'),
       url(../fonts/NanumBarunGothicBold.ttf) format('truetype');
}

html  {
	font-family: 'NanumBarunGothic', sans-serif;
	font-size: 12px;
	font-weight: 400;
}

b,
strong,
h1,
h2,
h3,
h4,
h5,
h6,
.fb{
	font-family: 'NanumBarunGothicBold', 'NanumBarunGothic', sans-serif;
}


.no-drag {-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}

.vw100 { width:100vw; }
.vw90 { width:90vw; }
.vw80 { width:80vw; }
.vw70 { width:70vw; }
.vw60 { width:60vw; }
.vw50 { width:50vw; }

.dw100-m-10 { width:calc(100% - 20px); margin-left: 10px; margin-right: 10px; }
.dw100 { width:100%; }
.dw90 { width:90%; }
.dw80 { width:80%; }
.dw70 { width:70%; }
.dw65 { width:65%; }
.dw60 { width:60%; }
.dw55 { width:55%; }
.dw50 { width:50%; }
.dw45 { width:45%; }
.dw40 { width:40%; }
.dw30 { width:30%; }
.dw33 { width:33%; }
.dw25 {	width:25%; }
.dw20 {	width:20%; }
.dw15 {	width:15%; }
.dw10 {	width:10%; }

.w1500 {width:1500px;}
.w1200 {width:1200px;}
.w1000 {width:1000px;}
.w900 {width:900px;}
.w800 {width:800px;}
.w700 {width:700px;}
.w600 {width:600px;}
.w500 {width:500px;}
.w400 {width:400px;}
.w300 {width:300px;}
.w250 {width:250px;}
.w200 {width:200px;}
.w180 {width:180px;}
.w150 {width:150px;}
.w140 {width:140px;}
.w130 {width:130px;}
.w120 {width:120px;}
.w110 {width:110px;}
.w100 {width:100px;}
.w90 {width:90px;}
.w80 {width:80px;}
.w60 {width:60px;}
.w58 {width:58px;}
.w50 {width:50px;}
.w40 {width:40px;}

.h1500 {height:1500px;}
.h1200 {height:1200px;}
.h1000 {height:1000px;}
.h900 {height:900px;}
.h800 {height:800px;}
.h700 {height:700px;}
.h600 {height:600px;}
.h500 {height:500px;}
.h400 {height:400px;}
.h300 {height:300px;}
.h250 {height:250px;}
.h200 {height:200px;}
.h180 {height:180px;}
.h150 {height:150px;}
.h140 {height:140px;}
.h130 {height:130px;}
.h120 {height:120px;}
.h110 {height:110px;}
.h100 {height:100px;}
.h90 {height:90px;}
.h80 {height:80px;}
.h60 {height:60px;}
.h50 {height:50px;}
.h40 {height:40px;}
.h30 {height:30px;}

.mh1500 {max-height:1500px;}
.mh1200 {max-height:1200px;}
.mh1000 {max-height:1000px;}
.mh900 {max-height:900px;}
.mh800 {max-height:800px;}
.mh700 {max-height:700px;}
.mh600 {max-height:600px;}
.mh500 {max-height:500px;}
.mh400 {max-height:400px;}
.mh300 {max-height:300px;}
.mh250 {max-height:250px;}
.mh200 {max-height:200px;}
.mh180 {max-height:180px;}
.mh150 {max-height:150px;}
.mh140 {max-height:140px;}
.mh130 {max-height:130px;}
.mh120 {max-height:120px;}
.mh110 {max-height:110px;}
.mh100 {max-height:100px;}
.mh90 {max-height:90px;}
.mh80 {max-height:80px;}
.mh60 {max-height:60px;}
.mh50 {max-height:50px;}
.mh40 {max-height:40px;}

.bd {
	border:1px solid red;
}

.bd-1 {
	border:1px solid black;
}

.br-3 {
	border-radius: 3px;
}
.br-5 {
	border-radius: 5px;
}
.br-10 {
	border-radius: 10px;
}
.br-20 {
	border-radius: 20px;
}
.br-l-5 {
	border-radius: 5px 0 0 5px;
}
.br-t-10 {
	border-radius: 10px 10px 0 0;
}
.br-b-10 {
	border-radius: 0 0 10px 10px;
}
.br-t-20 {
	border-radius: 20px 20px 0 0;
}
.br-b-20 {
	border-radius: 0 0 20px 20px;
}
.br-30 {
	border-radius: 30px;
}
.br100 {
	border-radius: 100%;
}

.bb-1{
	border-bottom:1px solid #808080;
}
.bb-2{
	border-bottom:2px solid #808080;
}
.bb-4{
	border-bottom:4px solid #ddd;
}
.bb-1-d{
	border-bottom:1px dotted #e1e1e1;
}

.bb-none{
	border:none;
}

.square-50{
		width: 50px;
		height: 50px;
}
/*  공통적용  */

span.f200 {font-weight:200;}
span.f300 {font-weight:300;}
span.f400 {font-weight:400;}
span.f700 {font-weight:700;}

.f-0-5{font-size: 0.5em;}
.f-0-6{font-size: 0.6em;}
.f-0-7{font-size: 0.7em;}
.f-0-8{font-size: 0.8em;}
.f-0-9{font-size: 0.9em;}
.f-1-0{font-size: 1em;}
.f-1-1{font-size: 1.1em;}
.f-1-2{font-size: 1.2em;}
.f-1-3{font-size: 1.3em;}
.f-1-4{font-size: 1.4em;}
.f-1-5{font-size: 1.5em;}
.f-2-0{font-size: 2em;}
.f9 {font-size: 9px;}
.f10 {font-size: 10px;}
.f11 {font-size: 11px;}
.f12 {font-size: 12px;}
.f13 {font-size: 13px;}
.f14 {font-size: 14px;}
.f15 {font-size: 15px;}
.f16 {font-size: 16px;}
.f17 {font-size: 17px;}
.f18 {font-size: 18px;}
.f20 {font-size: 20px;}
.f22 {font-size: 22px;}
.f23 {font-size: 23px;}
.f24 {font-size: 24px;}
.f26 {font-size: 26px;}
.f27 {font-size: 27px;}
.f28 {font-size: 28px;}
.f29 {font-size: 29px;}
.f30 {font-size: 30px;}

.fixed {position:fixed;}

.fb {font-weight:600;}

.ovar-hidden{overflow: hidden;}
.navbar {
	position:fixed;
	z-index:999;
	padding:12px;
}
.z-1{z-index:1;}
.z-10{z-index:10;}
.z-15{z-index:15;}
.z-20{z-index:20;}
.z-30{z-index:30;}
.z-40{z-index:40;}
.z-50{z-index:50;}
.z-60{z-index:60;}

.text-ellipsis{
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.content {
	height:100%;
	padding-top:90px;
	padding-bottom:50px;
}

.container-fluid {
	min-height:400px;
}

.footer {
	margin-top:-50px; padding:12px 12px 12px 20px;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
    content: ' ';
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid #8e8e8f;
    border-radius: 3px;
}

.table thead {
	background: #779cd1;
	color: #fff;
}

.table2 thead {
	background: #8dba8d;
	color: #fff;
}

.table3 thead {
	background: #db819e;
	color: #fff;
}

.no-drag {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}


.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #70afff;
    color: #fff;
}

.select2-container--bootstrap4 .select2-dropdown {
    border-color: #a3c6ea;
    border-width: 1px;
    overflow-x: hidden;
    margin-top: -1px;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection, .select2-container--bootstrap4.select2-container--open .select2-selection {
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-color: #a3c6ea;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #6F81B8;
    border-color: #6F81B8;
}

.table td a:link {
   color: #517fd6;
   text-decoration: none;
   background-color: transparent;
}

.table td a:hover {
	text-decoration: underline;
	border-bottom-color: #517fd6;
}

.col-form-label {
	padding-right:10px;
}

.sm_desc {font-size:12px; color:#a2a1a2; margin-left:10px;}

.irq::before {
	content: "\f069";
    font-family: "Font Awesome 5 Free";
    font-size: 9px;
    font-weight: 600;
    margin-right:5px;
    color:#f76c76;
}

.modal-dialog {width:90%; min-width:200px; margin:0 auto; top:10%; padding:0px;}
.modal-header {padding:0.7rem; background: #fff; color:#302E31;box-shadow: 0px 1px 2px #d9d9d9;}
.modal-header .close{color:#302E31;}
.modal-footer {padding:20px 10px; border:0px;}
.card {margin-bottom:0px;}
.card-body {padding:1.2rem;}

.table>tbody>tr>td { text-align: center; }
.page-link {font-size: 14px; padding:9px 12px 9px 12px;}

.dataTables_info {float:left; margin-top:10px;}
.dataTables_paginate {float:right; padding-top:20px;}

.btn-group {float:right;}
.btn-secondary {width:80px; height:30px; font-size:14px; background: #d9d9d9; border:0px; color: #302E31;}
.dataTables_filter {float:left; }
.dataTables_filter input {width:250px; height:30px; border:1px solid #ccc; font-size:14px;}

.btn_popup_40 {width:40px; height:20px; font-size:10px;}
.btn_popup_100 {width:100px; height:35px; font-size:14px;}
.btn_popup_120 {width:120px; height:35px; font-size:14px;}
.btn_popup_125 {width:150px; height:35px; font-size:14px;}


.ma0 {margin: 0;}

.mb0 {margin-bottom:0px;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb50 {margin-bottom:50px;}
.mb70 {margin-bottom:70px;}

.mt5 {margin-top:5px;}
.mt0 {margin-top:0px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt100 {margin-top:100px;}

.mr0 {margin-right:0px;}
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}

.ml0 {margin-left:0px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml50 {margin-left:50px;}
.ml100 {margin-left:100px;}

.ma5{margin: 5px;}
.ma10{margin: 10px;}
.ma20{margin: 20px;}
.ma30{margin: 30px;}
.ma40{margin: 40px;}

.my5{margin: 5px 0;}
.my10{margin: 10px 0;}
.my20{margin: 20px 0;}
.my30{margin: 30px 0;}
.my40{margin: 40px 0;}

.mx5{margin: 0 5px;}
.mx10{margin: 0 10px;}
.mx20{margin: 0 20px;}
.mx30{margin: 0 30px;}
.mx40{margin: 0 40px;}


.pt2 {padding-top:2px !important;}
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt15 {padding-top:15px !important;}
.pt20 {padding-top:20px !important;}
.pt25 {padding-top:25px !important;}
.pt30 {padding-top:30px !important;}

.pr5 {padding-right:5px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}
.pr25 {padding-right:25px !important;}
.pr30 {padding-right:30px !important;}

.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pb15 {padding-bottom:15px !important;}
.pb20 {padding-bottom:20px !important;}
.pb25 {padding-bottom:25px !important;}
.pb30 {padding-bottom:30px !important;}
.pb50 {padding-bottom:50px !important;}

.pl5 {padding-left:5px !important;}
.pl10 {padding-left:10px !important;}
.pl15 {padding-left:15px !important;}
.pl20 {padding-left:20px !important;}
.pl25 {padding-left:25px !important;}
.pl30 {padding-left:30px !important;}

.pa0 {padding: 0px;}
.pa5 {padding: 5px;}
.pa10 {padding: 10px;}
.pa20 {padding: 20px;}
.pa30 {padding: 30px;}

.pa5-10{padding: 5px 10px;}
.pa10-20{padding: 10px 20px;}

.py10{padding: 10px 0;}
.py20{padding: 20px 0;}
.py30{padding: 30px 0;}
.py40{padding: 40px 0;}

.px5{padding: 0 5px;}
.px10{padding: 0 10px;}
.px20{padding: 0 20px;}
.px30{padding: 0 30px;}
.px40{padding: 0 40px;}

.hide {display:none;}


.table td, .table th {
	padding:8px;
}

.text-center{text-align: center;}
.sub_title {font-size:20px; margin:0 0 10px 3px;}
.copyrights {font-size:12px; margin:5px;}



.ac {text-align: center !important;}
.al {text-align: left !important;}
.ar {text-align: right !important;}

.fl {float:left;}
.fr {float:right;}
.cboth {clear:both;}

/* 컬러 css 시작 */
.ddak-black-1{
	color:#302E31;
}
.ddak-red-1{
	color:#E50012;
}
.ddak-indigo-1{
	color:#93B1F1;
}
.ddak-indigo-2{
	color:#330099;
}
.ddak-gray-1{
	color:#D9D9D9;
}
.ddak-gray-2{
	color:#595959;
}
.ddak-green-1{
	color:#1fa807;
}

.btnKaKao {
	background:#FEE500;
	color:#181600;
}

.color-red-1 {
	color:#c33f48;
}
.color-red-2 {
	color:#E50012;
}
.color-green-1 {
	color:#30a54f;
}
.color-blue-1 {
	color:#1f5fbb;
}
.color-indigo-1 {
	color:#704de4;
}
.color-indigo-2 {
	color:#2f1491;
}
.color-gray-1 {
	color:#e3e3e3;
}
.color-gray-2 {
	color:#848484;
}
.color-gray-3 {
	color:#646464;
}
.color-white-1 {
	color:#fff;
}
.color-black-1 {
	color:#000;
}
.color-iambox{
	color: #612F92;
}
.color-completed{
	color: #28a745;
}
.color-waiting{
	color: #ffc107;
}
.color-overdue{
	color: #dc3545;
}


.bg-red-1 {
	background-color: #E50012;
}

.bg-gray-0 {
	background-color: #f3f3f3;
}

.bg-gray-1 {
	background-color: #e3e3e6;
}
.bg-gray-2 {
	background-color: #d9d9d9;
}
.bg-gray-3 {
	background-color: #646464;
}
.bg-gray-4 {
	background-color: #888888;
}
.bg-gray-5 {
	background-color: #D9D9D9;
}
.bg-black-1 {
	background-color: #302E31;
}
.bg-blue-1 {
	background-color: blue;
}
.bg-yellow-1 {
	background-color: yellow;
}
.bg-orange-1 {
	background-color: #f7ba11;
}
.bg-green-1 {
	background-color: green;
}
.bg-white-1{
	background-color:#fff;
}
.bg-indigo-1{
	background-color:#93B1F1;
}

.bg-A{
	background-color: green;
	color: #fff;
}
.bg-B{
	background-color: yellow;
	color: #000;
}
.bg-C{
	background-color: blue;
	color: #fff;
}
.bg-D{
	background-color: #E50012;
	color: #fff;
}
.bg-E{
	background-color:black;
	color: #fff;
}
.bg-iambox{
	background-color:#612F92;
}
button.btn-gray-1 {
	color: #000;
	background-color: #e3e3e3;
}
button.btn-gray-1:hover {
	color: #000;
/*
	color: #fff;
	background-color: #646464;
*/
}
button.btn-gray-2 {
	background-color: #737373;
	border: 1px solid #616161;
	color: #fff;
}
button.btn-gray-2:hover {
	color: #fff;
/*
	background-color: #616161;
	border: 1px solid #484848;
*/
}
button.btn-white-1 {
	color: #000;
	background-color: #fff;
}

button.btn-white-1:hover {
	color: #000;
/*	background-color: #8a1721;*/
}

button.btn-red-1 {
	color: #fff;
	background-color: #E50012;
	outline: none;
}

button.btn-red-1:hover {
	color: #fff;
/*	background-color: #8a1721;*/
}

button.btn-yellow-1 {
	color: #000;
	background-color: #fff43e;
}
button.btn-yellow-1:hover {
	color: #000;
/*
	background-color: #ada739;
*/
}
button.btn-indigo-1 {
	color: #fff;
	background-color: #93B1F1;
}
button.btn-indigo-1:hover{
	color: #fff;
}

button.btn-indigo-2 {
	color: #fff;
	background-color: #93B1F1;
}

button.btn-indigo-2:hover{
	color: #fff;
}
button.btn-black-1 {
	color: #fff;
	background-color: #302E31;
}
button.btn-black-1:hover{
	color: #fff;
}

button.btn-kakao-1 {
    color: #181600;
    background-color: #FEE500;
}
button.btn-kakao-1:hover{
    color: #181600;
}

button.btn-naver-1 {
    color: #FFFFFF;
    background-color: #00C300;
}
button.btn-naver-1:hover{
    color: #FFFFFF;
}


.shadow-sm{ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}
.shadow{ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.shadow-md{	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
.shadow-lg{	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.shadow-xl{	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.shadow-2xl{ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);}
.shadow-inner{ box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);}
.shadow-none{ box-shadow: 0 0 #0000;}

.op100{
	opacity: 1;
}
.op90{
	opacity: 0.90;
}
.op75{
	opacity: 0.75;
}
.op50{
	opacity: 0.5;
}
.op25{
	opacity: 0.25;
}

.stick-5{
	content: '.';
    color: #000;
    background-color: #000;
    margin: 0 0.25em;
    height: 5em;

}


/* 컬러 css 끝 */
.pointer{cursor:pointer;}

.mg-auto-x{
	margin:0 auto;
}

.bold {
	font-weight:600;
}

.form-group {
	margin-bottom:25px;
}

.sub-small-title {
	font-size:16px;
	color:#ca3f6b;
}


.space_color_A {
	background: #b5cffe!important;
}
.space_color_B {
	background: #c1ea77!important;
}
.space_color_C {
	background: #fbd755!important;
}
.space_color_D {
	background: #ffc2c3!important;
}
.space_color_E {
	background: #a2ffff!important;
}
.space_color_F {
	background: #e6a988!important;
}
.space_color_G {
	background: #6ab787!important;
}
.space_color_H {
	background: #ebceab!important;
}
.space_color_I {
	background: #bfb4e9!important;
}
.space_color_J {
	background: #dba4ce!important;
}


.space_color_Z {
	background: #a6abc0!important;
}

.space_color_X {
	background: #FDE7E4!important;
}

.space_color_SS {
	background: #CCDBFF!important;
}
.space_color_PP {
	background: #DDEFC9!important;
}
.space_color_RR {
	background: #62ad3c!important;
}
.space_color_OO {
	background: #FAED7D!important;
}

.space_font_color_X {
	color:#FDE7E4!important;
}
.space_font_color_SS {
	color: #CCDBFF!important;
}
.space_font_color_PP {
	color: #DDEFC9!important;
}
.space_font_color_RR {
	color: #62ad3c!important;
}
.space_font_color_OO {
	color: #FAED7D!important;
}


.title_gd_1 {
	height:40px;
	background: linear-gradient( to top, #5061ac, #6379d8 );
}

.title_gd_2 {
	height:40px;
	background: linear-gradient( to top, #659571, #80bd90 );
}

.title_gd_3 {
	height:40px;
	background: linear-gradient( to top, #ca3f6b, #ee8cb3 );
}

.main_sub_h4 {
	padding:10px 0 0 20px;
	color:#708fbf;
	font-weight:500;
	margin-bottom:0px;
}

.admin_level_txt {
	color: #7bb195;
	padding:7px 10px 0 0;
	font-weight:500;
}

.btn-group, .btn-group-vertical, .fc-unthemed .fc-button-group {
	margin-bottom:10px !important;
}

.left_menu {
	list-style:none;
	padding-left:5px;
	padding-right:5px;
	font-size:2vh;
}

.left_menu li {
	height:3em;
	border-bottom:1px dotted #d9d9d9;
	padding:14px 12px 12px 20px;
}
.left_menu .sub_list {
	float:left;
	width:90%;
	color:#565656;
}
.left_menu .nxt {
	float:right;
	color:#8b8a8b;
	width:10%;
}

.call_phone {
	background-color:#4aa0b5;
	border:1px solid #4aa0b5;
	display:flex;
	cursor:pointer;
	color:#ffffff;
	font-size:14px;
	padding:5px 5px;
	text-decoration:none;
	width:80%;
	height:80px;
	margin:5px 0;
	border-radius: 10px;
	justify-content: center;
	align-items: center;

}

.btn_main {
	background-color:#759ed0;
	border:1px solid #759ed0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:14px;
	padding:5px 5px;
	text-decoration:none;
}


.sub_top_area {
	width:100%;
	height:60px;
	background: #455287;
	color: #FFF;
	border-bottom:1px solid #ccc;
	position: fixed;
	z-index:999;
}

.sub_menu_area {
	width:100%;
	height:70px;
	background: #fff;
	position: fixed;
	z-index:9999;
}

.btn_sub_menu {
	width:23%;
	height:60px;
	padding:10px;
	text-align:center;
	display:inline-block;
}


.select_time_day_area {
	width: 90%;
	margin: 0 auto;
	height: 40px;
	background: #608fc8;
	overflow-x: scroll;
	white-space: nowrap;
	font-size:15px;
}

.select_time_day {
	width: 50px;
	height: 40px;
	border: 0px;
	background: #608fc8;
	padding: 5px;
	margin: 0 10px;
	color: #fff;
}


.td_active {
	color:#ffeb00;
	font-weight:600;
}



.service-agree {
	width:100%;
	height:40px;
	margin-top:20px;
}

.service-agree .agree_title {
	width:60%;
	height:35px;
	background:#fff;
	border:1px solid #8397a5;
	padding:5px 0 5px 10px;
	font-size:14px;
	color:#4c4a4b;
}
.service-agree button {
	height:35px;
	color:#fff;
	background: #95b5c6;
	border:1px solid #8397a5;
	font-size:14px;
}
.service-agree .chk_agree {
	font-size:14px;
	padding-top: 20px;
}

.underline1 {
	text-decoration: underline;
	text-underline-position: under;
}

.flex-row {
	display: flex;
	flex-flow: row;
}

.flex-col {
	display: flex;
	flex-flow: column;
}

.flex-start {
	justify-content: start;
	align-items: center;
}
.flex-end {
	justify-content: end;
	align-items: center;
}
.flex-center {
	justify-content: center;
	align-items: center;
}

.flex-around {
	justify-content: space-around;
	align-items: center;
}

.flex-between {
	justify-content: space-between;
	align-items: center;
}

.flex-left {
	justify-content: start;
	align-items: start;
}

.flex-right {
	justify-content: start;
	align-items: end;
}
.grid {
	display: grid;
    grid-auto-flow: dense;
}
.grid-gap-10{gap:10px;}
.grid-gap-20{gap:20px;}
.grid-gap-30{gap:30px;}
.grid-gap-40{gap:40px;}
.grid-row-1{grid-template-columns: 1fr;}
.grid-row-2{grid-template-columns: 1fr 1fr;}
.grid-row-3{grid-template-columns: 1fr 1fr 1fr;}
.grid-row-4{grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-row-5{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.fixed{
	position: fixed;
}
.t-0{
	top: 0;
}
.r-0{
	right: 0;
}
.r-10{
	right: 10px;
}
.l-0{
	left: 0;
}
.b-0{
	bottom: 0;
}
.b-20{bottom: 20px;}
/* 제이엘스포츠 css 추가 시작*/
ul, li{ list-style: none; }
p {margin: 0px;}
pre{
	white-space: pre-wrap;
	word-break: break-all;
	overflow: auto;
	text-align: left;
	padding: 0 10px;
}
.over-scroll{ overflow: auto; }
.over-hidden{ overflow: hidden; }

.mw600{max-width: 600px;}
.mw800{max-width: 800px;}
.mw1000{max-width: 1000px;}
.mw1200{max-width: 1200px;}

.mh600{max-height: 600px;}
.modal-md{ max-width: 500px; }

.input-text-100{
	width: 100%;
	margin: 0;
	padding: 0 0 0 10px;
	border: 0px solid #d9d9d9;
	border-radius: 3px;
	height: 40px;
	background-color: #eeeeee;
}
.input-text-100:focus{
	outline: none;
	/*box-shadow: 0px 0px 3px 1px #818181;*/
}
.textarea-100{
	width: 100%;
	resize: none;
	padding: 10px;
	overflow: auto;
	border: 0px solid #d9d9d9;
	border-radius: 3px;
	background-color: #eeeeee;
}
.textarea-100:focus{
	outline:none;
	/*box-shadow: 0px 0px 3px 1px #818181;*/
}

.text-button-combo{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}
.text-button-combo input{
	width: 70%;
	margin: 0;
	padding: 0;
	border: 2px solid #D9D9D9;
	height: 40px;
	border-radius: 3px 0 0 3px;
}
.text-button-combo input:focus{
	outline:none;
	/*box-shadow: 0px 0px 3px 1px #818181;*/
}
.text-button-combo button{
	height: 40px;
	width: 30%;
	border: 1px solid #D9D9D9;
	background-color: #D9D9D9;
	border-radius: 0 3px 3px 0;
	color: #302E31;
	font-weight: bold;
}
/*
.text-button-combo button:hover{
	border-radius: 0 5px 5px 0;
	border: 1px solid #828282;
	background-color: #828282;
}
*/
.main-contents-body{
	width: 100%;
	position: relative;
	overflow: auto;
	height: 100vh;
}

.member-content-form{
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
}
.member-content-form h1{
	font-size: 25px;
	margin: 30px 0;
}

.member-content-form .member-main-logo{
    width: 60%;
    max-width: 400px;
    margin: 20px 0;
}

.member-bottom-area {
	width:100%;
	height:130px;
	position: fixed;
	z-index:999;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.member-btn-agree{
	max-width: 900px;
	padding: 0 10%;
	width: 100%;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
}

.member-btn-agree button{
	width:40%;
	height:60px;
	font-size: 20px;
	font-weight: bold;
}

.content-form{
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
}
.content-form .content-form-item{
	max-width: 1200px;
	width: 100%;
}
.content-form h1{
	margin: 30px 0;
	margin: 30px 0;
}

.main-contents-header-sm .main-img{
	width: 15%;
	max-width: 50px
}
.main-contents-header-sm .slid-menu-img{
	width: 8%;
	max-width: 50px;
	position: absolute;
	left: 5%

}
.main-contents-header-sm .go-qr-img{
	width: 9%;
	max-width: 50px;
	position: absolute;
	right: 5%

}

.footer-lg-from{
	width: 1200px;
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	align-items: center;
	color: #fff;

}
.footer-lg-from p{
	font-size: 13px;
	margin: 0px;
}

.footer-info{
	width: 1200px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.footer-info h2{
	color: #fff;
	font-size: 16px;
	border-bottom: 2px solid #E50012;
}
.footer-info p{
	color: #D3D3D3;
}
.responsive-list-form{
	width: 100%;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
}

.responsive-list-item{
	width: 100%;
	border: 3px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-flow: column;
}
.search-form{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px;
	font-size: 16px;
}
.search-form input{
	width: calc(80% - 70px);
	margin: 0;
	padding: 0 0 0 10px;
	border: 2px solid #302E31;
	border-radius : 3px 0 0 3px;
	border-right: 0px;
	height: 40px;
}
.search-form input:focus{
	outline:none;
	/*box-shadow: 0px 0px 3px 1px #E50012;*/
}
.search-form button{
	height: 40px;
	width: 20%;
	border: 2px solid #302E31;
	border-left: 0px;
	background-color: #fff;
	color: #302E31;
	font-weight: bold;
	border-radius : 0 3px 3px 0;
}
/*
.search-form button:hover{
	border: 2px solid #302E31;
	border-left: 0;
	background-color: #d9d9d9;
}
*/
.bottom-btn-form{
	position: fixed;
	bottom: 60px;
    width: 100%;
    max-width: 1200px;
    z-index: 2;
}
.bottom-btn-form button{
	position:absolute;
	height: 60px;
	font-weight: bold;
	font-size: 1.5em;
    /*
    top:0;
	margin: 10px;
	width: 100px;
	height: 40px;
	border-radius: 10px;
    box-shadow: 1px 3px 5px black;
    */
}
.bottom-btn-form .bottom-btn-left{
	left: 0;
	background-color: #737373;
	border: 1px solid #616161;
	color: #fff;
	width: 50%;
}

.bottom-btn-form .bottom-btn-left-b{
	left: 0;
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	width: 50%;
}
.bottom-btn-form .bottom-btn-right{
	right: 0;
	background-color: #E50012;
	border: 1px solid #a8000d;
	color: #fff;
	width: 50%;
}
.bottom-btn-form .bottom-btn-right-3{
	right: 0;
	background-color: #22386A;;
	border: 1px solid #0D1629;
	color: #fff;
	width: 50%;
}
.bottom-btn-form .bottom-btn-full{
	right: 0;
	background-color: #E50012;
	border: 1px solid #a8000d;
	color: #fff;
	width: 100%;
}

.bottom-btn-form .bottom-btn-full-indigo{
	right: 0;
	background-color: #93B1F1;
	border: 1px solid #7288b8;
	color: #fff;
	width: 100%;
}

.bottom-btn-form .bottom-btn-full-b{
	right: 0;
	background-color: #737373;
	border: 1px solid #616161;
	color: #fff;
	width: 100%;
}

.go-to-top-form{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: fixed;
	font-size: 11px;
	padding: 20px;
	line-height: 0px;
	font-weight: bold;
}
.go-to-top-form i{
	line-height: 11px;
	cursor: pointer;
	font-size: 24px;
}
.go-to-top-form div{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #828282;
	border-radius: 100%;
	/*box-shadow: 1px 3px 5px #000;*/
	width: 45px;
	height: 45px;
	background-color: rgba(200,200,200,0.8);

}
.footer-menu{
	position: fixed;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.footer-menu img.menu-img{
	margin-top: 20px;
	width: 40px;
	cursor:pointer;
}
.footer-menu p{
	padding-top: 5px;
	font-size: 15px;
}
/* 회원 가입 css 시작*/
.service-agree {
	width:100%;
	height:50px;
	margin-top:20px;
	padding: 0 20px;
	color: #404040;
	font-size: 15px;
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	max-width: 600px;
}

.service-agree i{
	color: #302E31;
	font-size: 20px;
	padding-right: 20px;
}

.password-form{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}
.password-form input{
	width: 100%;
	padding: 0;
	border: 2px solid #D9D9D9;
	height: 40px;
	border-radius: 3px;
}
.password-form input:focus{
	outline:none;
	/*box-shadow: 0px 0px 3px 1px #818181;*/
}
/*회원 가입 css 끝*/

/*공간 목록 페이지 (main) css 시작 */
.main-space-forom{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}
/*공간 목록 페이지 (main) css 끝 */
/*공간 상세정보 (spaceInfo) css 시작 */
.space-info-nave{
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	align-items: center;
	max-width: 1200px;
	width: 100%;
	background-color: #fff;
	position: fixed;
	z-index: 20;
	top:60px;
}
.space-info-nave div {
	width: 16%;
	max-width: 180px;
	text-align: center;
	padding: 10px 0 5px 0;
	margin: 10px 0 15px 0;
	transition: 0.3s;
	/*
	background-color: #999999;
	border: 1px solid #737373;
	border-radius: 5px;
	color: #fff;
	font-weight: bold;
	box-shadow: 1px 3px 5px black;
	*/
}

.space-info-nave div.focus {
	border-bottom: 2px solid #E50012;
}

.space-info-nave div.focus:hover {
	/*
	color:#E50012;
	font-weight: bold;
	background-color: #a8000d;
	border: 1px solid #a8000d;
	*/
}
.space-info-nave div:hover {
	/*
	color: #00f;
	font-weight: bold;
	background-color: #737373;
	border: 1px solid #616161;
	*/
}

.space-info-nave p{
	margin: 0;
	font-size: 13px;
}

.space-info-content{
	max-width: 1200px;
	padding-top: 20px;
	padding-bottom: 50px;
}
.about-space{
	text-align: center;
}
.about-space p{
	margin: 10px 0;
/* 	font-size: 15px; */
}

.about-space pre{
	max-width: 100vw;
/* 	font-size: 15px; */
}

.about-space-item {
    overflow: hidden;
    padding: 16px 0;
    background: #fff;
}
.about-space-item ul{
    list-style: none;
    padding: 0px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.about-space-item li{
	list-style: none;
    float: left;
/*     width: 25%; */
    padding: 10px 0;
    display: block;
    overflow: hidden;
    height: 100px;
    font-size: 12px;
    color: rgba(0,0,0,0.6);
    text-align: center;
}
.about-space-item li img{
	width: 20px;
}
.about-space-item li i{
	font-size: 20px;
}
.about-space-item li p{
	height: 20px;
    padding-top: 7px;
    margin: 0;
}
.space-area-layout{
	text-align: center;
}
.space-area-layout p{
	margin: 10px 0;
}
.space-price-info{
	text-align: center;
}
.way-to-come-space{
	text-align: center;
}
.way-to-come-space p{
	margin: 10px 0;
}
.space-to-ask{
	text-align: center;
}

.space-info-notice-form{
	padding: 20px 0;
}
.space-info-notice-form .space-info-notice{
	background-color: #f9f9f9;
	margin: 10px;
	padding: 10px 0;
}
.space-info-notice .notice-top{
	display: flex;
	justify-content: space-between;
	padding: 10px;
	align-items: center;
}
.space-info-notice .notice-top p{
	font-size: 15px;
	font-weight: bold;
}

.space-info-notice .notice-top p span{
	color: #E50012;
	font-size: 18px;
}

.space-info-notice .notice-top button{
	font-weight: bold;
	font-size: 13px;

}

.space-info-notice .notice-list{
	width: 100%;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
}

.space-info-notice .notice-list .notice-item{
	width: 95%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: 1px solid #909090;
	padding: 10px 0;
}
.space-info-notice .notice-list .notice-item .user-photo{
	width: 80px;
	padding: 20px 0px;
}
.notice-list .notice-item .user-photo img{
	widows: 50px;
	height: 50px;
	border-radius: 50%;
}
.notice-list .notice-item .notice-content{
	width: calc(100% - 80px);
	padding: 0 10px;
	text-align: left;
}
.notice-list .notice-item .notice-content div:nth-child(1){
	border-bottom: 1px solid #dddddd;
}
.insert-notice-modal-form textarea{
	width: 100%;
	max-height: 200px;
}
.space-info-top-form{
    width: 100%;
    background-color: #fff;
    color: #302e31;
    position: fixed;
    top: 0;
    height: 60px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1px 2px #d9d9d9;
}
.space-info-top-form h1{
    font-size: 25px;
    font-weight: bold;
}
.space-info-top-form i.left{
	position: absolute;
	left: 10px;
	font-size: 30px;
	color: #302e31;
}

.space-info-top-form i.favor{
	font-size: 30px;
	color: #E50012;
}
.space-info-top-form i.unfavor{
	font-size: 30px;
	color: #302E31;
}

.space-info-top-form .right{
	width: 8%;
	max-width: 50px;
	position: absolute;
	right: 5%;
	display: block;
}

.fluttering{
	display: flex;
}

.space-info-top-form .right2{
	display: none;
}



.swipe-list-from{
    border-top: 1px solid #eee;
    overflow-x: auto;
    overflow-y: hidden;
    width:100vw;
    max-width:1200px;
    -webkit-overflow-scrolling: touch;
}

.swipe-list{
    white-space: nowrap;
    position: relative;
    display: table-row;
}
.swipe-item{
    position: relative;
    border-right: 1px solid #eee;
    display: table-cell;
    vertical-align: top;

}
.swipe-arrow {
	position: absolute;
	background-color: rgba(200,200,200,0.8);
	font-size: 50px;
    top: 0;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 0 10px;
    line-height: 10px;
    opacity:0;
    transition: 0.2s;
}
.swipe-arrow.arrow-left{
	left: 0;
    z-index: 1;
    display: none;
}
.swipe-arrow.arrow-right{
	right: 0;
	z-index: 1;
}

/*공간 상세정보 (spaceInfo) css 끝 */

/*이용현황(myUsageHistoryList) css 시작*/
	.img-form { width: 30%;}
	.img-form img{ width: 110px;}
	.detail-form{ width: 100%; padding: 10px; }
/*이용현황(myUsageHistoryList) css 끝*/

div div.hide-impot {
	display: none;
}

.input-in-btn input{
	outline: none;
	background-color: #fff;
	border: 1px solid #d9d9d9;
	color: #302E31;
	border-right: none;
	padding-left: 10px;
	height: 40px;
	width: 80%;
	border-radius: 3px 0 0 3px;
}

.input-in-btn button{
	outline: none;
	background-color: #d9d9d9;
	border: 1px solid #d9d9d9;
	color: #302E31;
	border-left: none;
	height: 40px;
	border-radius: 0;
	width: 20%;
	border-radius: 0 3px 3px 0;
}

/* 반응형 css */
@media (max-width: 1200px) {
	/* 모바일 */
	.member-content-form{height: calc(100vh - 100px)}
	div.display-sm{display: block;}
	div.display-lg{display: none;}
	.f16-18{font-size: 16px;}
	br.pc, div.pc{display: none;}
	.m-f18{font-size: 18px;}
	.flex-col-row{
		display: flex;
		flex-flow: column;
	}
	.main-contents-header-lg{ display: none;}
	.main-contents-header-sm{
		box-shadow: 0px 1px 2px #d9d9d9;
		width: 100%;
		height: 70px;
		background-color: #fff;
		position: fixed;
		top:0;
		z-index: 100;
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: center;
	}
	.main-contents-body{padding-top: 80px;padding-bottom: 100px;}
	.main-contents-footer-sm{
		display: none;
	/* 하단 메뉴바 추후에 필요하면 활선화
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100px;
		position: fixed;
		bottom:0;
		background-color: #fff;
		border-top: 2px solid #000;
		flex-flow: row;
		justify-content: space-around;
		align-items: center;
		z-index: 100;
	*/
	}
	.go-to-top-form{
		bottom: 0;
	}
	.main-contents-footer-lg{ display: none;}
	#slid-tag{width:65%;}
	.swipe-arrow{display: none;}
	.space-info-top-form h1 { font-size: 18px; }
	.space-info-top-form i.favor{ font-size: 20px; }
	.space-info-top-form i.unfavor{ font-size: 20px; }
	.change-position-b{bottom: 20px;}
	.top-naver-position{top:60px;}
	h1.rwd-h1{ font-size: 18px;}
	p.rwd-p1{ font-size: 14px; font-weight:600}
	p.rwd-p2{ font-size: 12px;}
}

@media (min-width: 1200px) {
	.member-content-form{height: calc(100vh - 250px)}
	.f16-18{font-size: 17px;}
	.lg-pb120{padding-bottom: 120px}
	h1.rwd-h1{ font-size: 30px;}
	p.rwd-p1{ font-size: 18px; font-weight:600}
	p.rwd-p2{ font-size: 16px;}
    /*pc*/
    div.display-lg{display: block;}
    div.display-sm{display: none;}
    br.mobile, div.mobile{display: none;}
    .lg-mt50{margin-top: 50px;}
    .lg-b-170{bottom: 170px;}
    .go-to-top-form{
		bottom: 150px;
	}
	.flex-col-row{
		display: flex;
		flex-flow: row;
	}
	.top-naver-position{top:100px;}
	.change-position-b{bottom: 170px;}
    .main-contents-header-lg{
		width: 100%;
		height: 150px;
		position: fixed;
		background-color: #fff;
		top:0;
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}
	.header-lg-from{
		width: 1200px;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
	}
	.header-lg-from img{
		width: 310px;
	}
	.content-form{
	    min-height: calc(100vh - 310px);
	    margin-bottom: 10px;
	}
	.space-info-top-form .right{display: none;}

	.fluttering{display: none !important;}

	.space-info-top-form .right2{
		display: block;
		position: absolute;
		right: 5%;
	}



	.main-contents-header-sm{display: none;}
	.main-contents-body{padding-top: 150px;/*padding-bottom: 150px;\*/}
	.main-contents-footer-lg{
		width: 100%;
		height: 150px;
		/*position: fixed;*/
		bottom:0;
		background-color: #252525;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}
	.main-contents-footer-sm{ display: none;}
	#slid-tag{width:400px;}
	.responsive-list-form{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: dense;
		gap: 20px;
		justify-content:center;
		justify-items: center;
	}
	.bottom-btn-form{
		/*bottom: 220px;*/
	}
	.bottom-btn-form button{
		font-size: 15px;
		height: 70px;
		/*
		width: 150px;
		margin: 20px;
		border-radius: 5px;
		*/
	}
	/*
	.bottom-btn-form .bottom-btn-left:hover{
		background-color: #616161;
		border: 1px solid #484848;
	}
	.bottom-btn-form .bottom-btn-left-b:hover{
		background-color: #484848;
		border: 1px solid #000;
	}

	.bottom-btn-form .bottom-btn-right:hover{
		background-color: #a8000d;
		border: 1px solid #a8000d;
	}
	.bottom-btn-form .bottom-btn-full:hover{
		background-color: #a8000d;
		border: 1px solid #a8000d;
	}

	.bottom-btn-form .bottom-btn-full-indigo:hover{
		background-color: #330099;
		border: 1px solid #330099;
	}
	*/
	/*공간 상세정보 (spaceInfo) css 시작 */
	.about-space-item {
	   	padding: 32px 0 29px 41px;
	}
	.about-space-item ul{
	    overflow: hidden;
	    width: 1024px;

        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	.about-space-item li{
		float: left;
        display: block;
	    height: 120px;
	    font-size: 18px;
	    text-align: center;
	}

	.about-space-item li img{
		width: 30px;
	}
	.about-space-item li i{
		font-size: 30px;
	}
	.about-space-item li p{
	    height: auto;
	   	padding-top: 14px;
	}
	.space-info-top-form{
		height: 100px;
	}
	.space-info-nave{
		top: 100px;
	}
	.space-info-content{
		padding-top: 65px;
		padding-bottom: 110px;
	}
	.space-info-nave p{
	font-size: 15px;
	}

	.space-office-item{ margin-bottom: 100px; }
	/*공간 상세정보 (spaceInfo) css 끝 */

	.sapce-sub-item-form .booking-time-form div.time-sub{
		flex-flow: row;
		margin: 0;
	}

	.sapce-sub-item-form .booking-time-form div.time-sub div{
		width: 50%;
	}
	.booking-mid {
		margin-bottom: 220px;
	}
	.booking-bottom{
	    height: 240px;
	    bottom: 110px;
	}
}


.sapce-sub-item-form{
	border:2px solid #e0e0e0;
	border-radius: 5px;
	width:100%;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	margin: 10px 0;
}
.sapce-sub-item-form p{
	margin: 0;
}

.sapce-sub-item-form .title-form{
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	margin: 10px;
	cursor:pointer;
}

.sapce-sub-item-form .title-form p{
	font-size: 18px;
	font-weight: bold;
}
.sapce-sub-item-form .title-form i{
	font-size: 20px;
}
.sapce-sub-item-form .title-form div{
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
}

.sapce-sub-item-form .booking-time-form{
	width: 100%;
	display: flex;
	flex-flow: column;
}

.sapce-sub-item-form .booking-time-form div:nth-child(3){
	border-top: 2px solid #e0e0e0;
}

.sapce-sub-item-form .booking-time-form div button{
	margin: 5px;
}
.sapce-sub-item-form .booking-time-form .time-sub{
		display: flex;
		flex-flow: column;
}

.sapce-sub-item-form .booking-time-form div.time-sub div{
		width: 100%;
}

.booking-type-form p{
	font-size: 15px;
}
.booking-type-form i{
	font-size: 18px;
}
.booking-type-form .use-time{
	margin: 10px;
}
.booking-type-form .use-package{
	margin: 10px;
}
.booking-type-form .use-package .use-package-item{
	display: none;
}
.booking-type-form .use-package .use-package-item div{
	display: flex;
	flex-flow: row;
	border: 2px solid #e0e0e0;
	border-radius: 5px;
	padding: 5px;
	margin: 5px;
}
.booking-type-form .use-package .use-package-item div.disabled{
	background-color: #e0e0e0;
}
.booking-mid {
	max-width: 1200px;
	width: 100%;
	padding: 0px 10px;
	margin-bottom: 190px;
}

.booking-bottom{
    position: fixed;
    height: 190px;
    width: 100%;
    max-width: 1180px;
    background-color: #fff;
    bottom: 100px;
    padding: 0 10px;
}
.booking-bottom .booking-history-from{
		font-size: 15px;
		border-top: 2px solid #e0e0e0;
		margin-top: 10px;
		padding: 10px 10px;
}
.booking-bottom .booking-history-from p span{
		font-size: 18px;
		font-weight: bold;
}

.booking-time-form .btn-time-disabled {
	background-color: #ccc;
	border-color: #ccc;
}
.booking-time-form .btn-time-start {
	background-color: #E50012;
	border-color: #E50012;
	color: #fff;
}
.booking-time-form button.btn-time-end {
	background-color: #93B1F1;
	border-color: #93B1F1;
	color: #fff;
}
.booking-time-form .btn-time-end.btn-time-start {
	background-color: #9600fa;
	border-color: #9600fa;
}
.booking-time-form .btn-time-is-none {
	background-color: #ccc;
	border-color: #ccc;
}
.booking-time-form .btn-time-is-booking {
	background-color: #ccc;
	border-color: #ccc;
}
.booking-time-form button.btn-choose {
	background-color: #f1ee93;
	border-color: #f1ee93;
	color:#000;
}

/* 하단 데이터 로딩 css 시작*/
.loading span {
    display: inline-block; /* span 내부요소들을 한줄로 세우기 */
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;    /* span을 동그랗게 */
    animation: loading 2s 0s linear infinite;
    /* 이벤트명  반복시간  딜레이시간  이벤트처리부드럽게  이벤트무한반복*/
  }

  .loading span:nth-child(1) {  /*loading의 자식 중 첫번째 span*/
    /*nth-child : 형제 사이에서의 순서*/
    animation-delay: 0s;
    background-color: #E50012;
    margin: 0px 2px;
  }

  .loading span:nth-child(2) {
    animation-delay: 0.2s;
    background-color: #E50012;
    margin: 0px 2px;
  }

  .loading span:nth-child(3) {
    animation-delay: 0.4s;
    background-color: #E50012;
    margin: 0px 2px;
  }
  .loading span:nth-child(4) {
    animation-delay: 0.6s;
    background-color: #E50012;
    margin: 0px 2px;
  }
@keyframes loading {        /*loading이라는 keyframe 애니메이션*/
    0%,                      /* 0, 50, 100은 구간*/
    100% {
      opacity: 0;            /* 안보였다가 */
      transform: scale(0.5); /*transform의 scale로 요소를 확대 또는 축소할 수 있음*/
    }
    50% {
      opacity: 1;             /* 보였다가 */
      transform: scale(1.2); /* 1.2배 */
    }
}
/* 하단 데이터 로딩 css 끝*/

/*selectBox2(직접 구축) css 시작*/
.selectBox2 * { box-sizing: border-box; }
.selectBox2 {
  position: relative;
  height: 35px;
  border-radius: 4px;
  border: 1px solid #000;
  background: url('/images/arrow_down.png') calc(100% - 11px) center no-repeat;
  background-size: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.selectBox2:after {
  content: '';
  display: block;
  width: 2px;
  height: 35px;
  position: absolute;
  top: -1px;
  right: 40px;
  background: #7a7a7a;
}

.selectBox2 .label {
  display: flex;
  align-items: center;
  width: 100%;
  height: inherit;
  border: 0 none;
  outline: 0 none;
  padding-left: 15px;
  background: transparent;
  cursor: pointer;
}

.selectBox2 .optionList {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  background: #7a7a7a;
  color: #fff;
  list-style-type: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 0;

  z-index: 10;
}

.selectBox2.active .optionList {
  max-height: 300px;
  overflow: auto;
  transition: .3s ease-in;
}

.selectBox2 .optionItem {
  border-bottom: 1px dashed #e3e3e3;
  padding: 5px 15px 5px;
  transition: .1s;
}

.selectBox2 .optionItem:hover {
  background: #4d349e;
}

.selectBox2 .optionItem:last-child {
  border-bottom: 0 none;
}

.selectBox2 .optionItem-disabled {
  border-bottom: 1px dashed #e3e3e3;
  padding: 5px 15px 5px;
  transition: .1s;
  color: #E50012;
}

.selectBox2 .optionItem-disabled:hover {
  background: #4d349e;
}

.selectBox2 .optionItem-disabled:last-child {
  border-bottom: 0 none;
}

/* 스크롤 커스텀*/
.selectBox2 .optionList::-webkit-scrollbar {width: 6px;}
.selectBox2 .optionList::-webkit-scrollbar-track {background: transparent; }
.selectBox2 .optionList::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;}
.selectBox2 .optionList::-webkit-scrollbar-thumb:hover {background: #303030;}
/*selectBox2(직접 구축) css 끝*/


p::-webkit-scrollbar {width: 6px;}
p::-webkit-scrollbar-track {background: transparent; }
p::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;}
p::-webkit-scrollbar-thumb:hover {background: #303030;}

.open{display: block}

.flutteringVal{
	transition:all 0.4s ease-out;
}
.flutteringTop1{
	bottom: calc(50px + 120px) !important;
}
.flutteringTop2{
	bottom: calc(50px + 60px) !important;
}
.flutteringTop1_2{
	bottom: calc(80px + 120px) !important;
}
.flutteringTop2_2{
	bottom: calc(80px + 60px) !important;
}

/* Merged from jjang_app.css */
@font-face{
  font-family:NanumBarunGothic;
  font-style:normal;
  font-weight:400;
  src:url("../fonts/NanumBarunGothic.woff2") format("woff2"),
      url("../fonts/NanumBarunGothic.woff") format("woff"),
      url("../fonts/NanumBarunGothic.ttf") format("truetype");
}

@font-face{
  font-family:NanumBarunGothic;
  font-style:normal;
  font-weight:700;
  src:url("../fonts/NanumBarunGothicBold.woff2") format("woff2"),
      url("../fonts/NanumBarunGothicBold.woff") format("woff"),
      url("../fonts/NanumBarunGothicBold.ttf") format("truetype");
}

@font-face{
  font-family:NanumBarunGothic;
  font-style:normal;
  font-weight:900;
  src:url("../fonts/NanumBarunGothicBold.woff2") format("woff2"),
      url("../fonts/NanumBarunGothicBold.woff") format("woff"),
      url("../fonts/NanumBarunGothicBold.ttf") format("truetype");
}

@font-face{
  font-family:NanumBarunGothicBold;
  font-style:normal;
  font-weight:700;
  src:url("../fonts/NanumBarunGothicBold.woff2") format("woff2"),
      url("../fonts/NanumBarunGothicBold.woff") format("woff"),
      url("../fonts/NanumBarunGothicBold.ttf") format("truetype");
}

@font-face{
  font-family:NanumBarunGothicBold;
  font-style:normal;
  font-weight:900;
  src:url("../fonts/NanumBarunGothicBold.woff2") format("woff2"),
      url("../fonts/NanumBarunGothicBold.woff") format("woff"),
      url("../fonts/NanumBarunGothicBold.ttf") format("truetype");
}

:root{
  --primary:#573eec;
  --dark:#4130cd;
  --soft:#eeeaff;
  --bg:#f7f8fc;
  --line:#e6e6e6;
  --muted:#858585;
  --green:#16a66a;
  --shadow:0 1px 5px rgba(21,23,34,.06);
}

*,*:before,*:after{box-sizing:border-box}

html,
body{
  font-family:NanumBarunGothic,sans-serif;
}

body{
  margin:0;
  background:var(--bg);
  color:#161922;
  font-size:1.2rem;
  overflow-x:hidden;
}

button,
input,
optgroup,
select,
textarea{
  font-family:inherit;
}

b,
strong,
h1,
h2,
h3,
h4,
h5,
h6,
.fw-bold,
.fw-bolder,
.font-weight-bold,
.font-weight-bolder{
  font-family:NanumBarunGothicBold,NanumBarunGothic,sans-serif;
}

a{text-decoration:none;color:inherit}

.app-wrap{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  padding:24px 24px 92px;
  background:var(--bg);
  overflow-x:hidden;
}

.app-header{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.app-header strong{
  min-width:0;
  font-size:19px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
  color:#161922;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:900;
  color:var(--primary);
}

.brand span,
.logo-square{
  display:grid;
  place-items:center;
  background:var(--primary);
  color:#fff;
}

.brand span{
  width:34px;
  height:34px;
  border-radius:12px;
}

.icon-btn{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:var(--shadow);
  color:#573eec;
  font-size:20px;
  font-weight:900;
}

.hero{
  display:flex;
  gap:16px;
  justify-content:space-between;
  margin:14px 0 18px;
  padding:26px;
  border-radius:30px;
  background:linear-gradient(135deg,#191b3b,var(--primary));
  color:#fff;
}

.hero h1{
  font-size:30px;
  line-height:1.16;
  margin:6px 0 10px;
  font-weight:900;
}

.hero p,.eyebrow{opacity:.86}
.hero-ball{align-self:center;font-size:64px}

.card-soft{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:22px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}

.section-title{
  color:#5439f5;
  font-size:22px;
  font-weight:900;
  margin:0 0 14px;
}

.section-title + a {
  font-size: 13px;
  color: var(--muted);
}

.list-card,.store-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--line);
  padding:14px 0;
}

.list-card:last-child,.store-card:last-child{border-bottom:0}

.list-card p,.store-card p{
  margin:4px 0;
  color:var(--muted);
  font-size:13px;
}

.badge-primary{
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:12px;
}

.chip-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  margin-bottom:14px;
}

.chip-row::-webkit-scrollbar{display:none}

.chip{
  flex-shrink:0;
  border:0;
  border-radius:999px;
  padding:9px 14px;
  background:#f1f2f7;
  font-weight:800;
  color:#555b6d;
}

.chip.active{
  background:var(--soft);
  color:var(--primary);
}

.store-card{
  display:grid;
  grid-template-columns:66px 1fr auto;
}

.store-img{
  width:66px;
  height:66px;
  border-radius:18px;
  background:linear-gradient(135deg,#342f6d,#8d7bff);
}

.store-img.alt{
  background:linear-gradient(135deg,#1f6f5b,#6ee7b7);
}

.store-card i{
  font-style:normal;
  color:var(--primary);
  font-size:26px;
}

.status{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:#e8f8f0;
  color:var(--green);
  font-size:12px;
  font-weight:900;
}

.map-box{
  height:260px;
  margin:14px 0 16px;
  border-radius:30px;
  background:repeating-linear-gradient(45deg,#eef0f8,#eef0f8 12px,#f7f8fc 12px,#f7f8fc 24px);
  display:grid;
  place-items:center;
  border:1px solid var(--line);
}

.map-box div{
  width:68px;
  height:68px;
  border-radius:24px;
  background:var(--primary);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:32px;
}

.store-title{
  font-size:26px;
  font-weight:900;
  margin:0 0 10px;
}

.info-row,.summary-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid var(--line);
  padding:13px 0;
}

.info-row span,.summary-row span{color:var(--muted)}

.small-list{
  color:var(--muted);
  line-height:1.8;
}

.bottom-cta{
  position:sticky;
  bottom:0;
  padding:14px 0 4px;
  background:linear-gradient(180deg,rgba(247,248,252,0),var(--bg) 28%);
}

.btn-primary{
  --bs-btn-bg:var(--primary);
  --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--dark);
  --bs-btn-hover-border-color:var(--dark);
  font-weight:900;
}

.login-logo{
  text-align:center;
  padding:24px 0;
}

.logo-square{
  width:82px;
  height:82px;
  margin:0 auto 10px;
  border-radius:28px;
  font-size:42px;
}

.login-logo h1{
  font-size:34px;
  font-weight:900;
  color:var(--primary);
}

.social{
  height:50px;
  border-radius:14px;
  font-weight:900;
}

.kakao{background:#fee500}
.naver{background:#03c75a;color:#fff}
.apple{background:#111;color:#fff}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  margin:20px 0;
}

.divider:before,.divider:after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}

.otp-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}

.otp-grid input{
  height:52px;
  border:1px solid var(--line);
  border-radius:14px;
  text-align:center;
  font-size:20px;
  font-weight:900;
}

.profile-upload{
  width:90px;
  height:90px;
  margin:0 auto 20px;
  border-radius:30px;
  background:var(--soft);
  display:grid;
  place-items:center;
  font-size:34px;
}

.photo-card{
  margin:8px 0 12px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.main-photo{
  height:210px;
  background-size:cover;
  background-position:center;
}
.photo1{background-image: url('../images/main_01.jpg');}
.photo2{background-image: url('../images/main_02.jpg');}
.photo3{background-image: url('../images/main_03.jpg');}

.photo-count{
  position:absolute;
  right:14px;
  bottom:12px;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
}

.store-time,.point-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}

.store-time a {
  font-size: 13px;
  color: var(--muted);
}

.store-time span,.point-mini span{
  display:block;
  color:var(--muted);
  font-size:13px;
}

.store-time b,.point-mini b{font-size:18px}

.point-icon{
  width:42px;
  height:42px;
  border-radius:16px;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  margin:14px 0;
}

.menu-item{
  min-height:92px;
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.menu-item em{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--soft);
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:21px;
}

.menu-item b{font-size:13px}

.notice-line{
  display:flex;
  align-items:center;
  gap:9px;
}

.notice-line span,.ticket-card span{
  background:var(--soft);
  color:var(--primary);
  font-weight:900;
  font-size:12px;
  border-radius:999px;
  padding:5px 8px;
}

.notice-line b{
  flex:1;
  font-size:14px;
}

.notice-line em{
  font-style:normal;
  color:#ee4b4b;
  font-size:11px;
  font-weight:900;
}

.ticket-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff3f3;
  border-radius:18px;
  padding:16px;
  margin-top:10px;
}

.ticket-card.blue{background:#eef3ff}

.ticket-card p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}

.ticket-card strong{
  color:var(--primary);
  font-size:18px;
}

.info-banner{
  display:flex;
  justify-content:space-between;
  gap:15px;
  background:#eef3ff;
  border-radius:24px;
  padding:22px;
  margin:14px 0 16px;
}

.info-banner h2{
  font-size:21px;
  font-weight:900;
}

.info-banner p{
  margin:0;
  color:var(--muted);
}

.info-banner span{font-size:50px}

.product-row,.select-row,.time-card,.history-card,.match-card,.coach-card,.lesson-row{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
  margin-bottom:10px;
  background:#fff;
}

.product-row.active,.select-row.active,.time-card.active{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--soft);
}

.product-row i{
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--primary);
  font-style:normal;
}

.product-row p{
  margin:3px 0 0;
  color:var(--muted);
}

.product-row span{
  text-align:right;
  color:var(--primary);
  font-weight:900;
}

.product-row small{
  display:block;
  color:#2d63d8;
}

.pay-option{
  display:block;
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  margin-bottom:10px;
}

.pay-option.active{
  border-color:var(--primary);
  background:var(--soft);
}

.complete-card{
  text-align:center;
  background:#fff;
  border-radius:28px;
  padding:36px 22px;
  box-shadow:var(--shadow);
  margin-top:30px;
}

.check{
  width:76px;
  height:76px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:42px;
  font-weight:900;
}

.complete-summary{
  background:#f7f8fc;
  border-radius:18px;
  padding:16px;
  margin-top:18px;
}

.complete-summary span{
  display:block;
  color:var(--muted);
}

.step-card{
  display:flex;
  gap:12px;
  background:#fff;
  border-radius:18px;
  padding:16px;
  margin:14px 0;
  box-shadow:var(--shadow);
}

.step-card span{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
}

.tip-box{
  background:#fff8e8;
  border-radius:22px;
  padding:14px;
  color:#765011;
}

.table-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.table-seat{
  text-align:center;
  padding:22px;
  border-radius:18px;
  background:var(--primary);
  color:#fff;
  font-weight:900;
}

.table-seat.disabled{
  background:#f1f2f7;
  color:#999;
}

.time-card.sale span{
  color:#ee4b4b;
  text-align:right;
}

.total b{
  font-size:22px;
  color:var(--primary);
}

.status-step{
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-bottom:18px;
}

.status-step span{
  flex:1;
  text-align:center;
  background:#f1f2f7;
  border-radius:12px;
  padding:9px 4px;
  font-size:12px;
  font-weight:900;
}

.status-step .active,.status-step .done{
  background:var(--soft);
  color:var(--primary);
}

.tab-pills{
  display:flex;
  gap:8px;
}

.tab-pills button{
  border:0;
  border-radius:999px;
  padding:8px 14px;
  background:#f1f2f7;
}

.tab-pills .active{
  background:var(--primary);
  color:#fff;
}

.avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--soft);
  display:grid;
  place-items:center;
}

.avatar.big{
  width:70px;
  height:70px;
  font-size:34px;
}

.match-card p,.coach-card p,.lesson-row p,.history-card p{
  margin:3px 0;
  color:var(--muted);
  font-size:13px;
}

.match-card em,.coach-card em{
  font-style:normal;
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
}

.match-card em.disabled{
  background:#ddd;
  color:#777;
}

.floating-btn{
  position:fixed;
  left:calc(50% + 145px);
  bottom:90px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:30px;
  box-shadow:var(--shadow);
}

.profile-row{
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:18px;
}

.coach-card span,.match-card span{
  color:var(--primary);
  font-size:12px;
}

.timer-big{
  font-size:48px;
  font-weight:900;
  color:var(--primary);
  margin:30px 0;
}

.usage-tabs .nav-link{font-size:13px}

.point-balance{
  font-size:34px;
  font-weight:900;
  color:var(--primary);
  margin-bottom:12px;
}

.orange,.blue-label{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.orange{
  background:#fff3e4;
  color:#f08a00;
}

.blue-label{
  background:#eaf0ff;
  color:#2d63d8;
}

.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border-top:1px solid var(--line);
  padding:10px 8px 13px;
  box-shadow:0 -1px 8px rgba(21,23,34,.08);
}

.bottom-nav a{
  text-align:center;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.bottom-nav span{
  display:block;
  margin-bottom:3px;
  font-size:19px;
}

.bottom-nav .active{color:var(--primary)}

@media(min-width:768px){
  .app-wrap{
    max-width:720px;
    padding:28px 28px 100px;
  }

  .bottom-nav{max-width:720px}
  .main-photo{height:280px}
  .store-card{grid-template-columns:88px 1fr auto}
  .store-img{width:88px;height:88px}
  .floating-btn{left:calc(50% + 280px)}
}

/* Ranking Page Styles */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.ranking-item .rank {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--primary);
  width: 30px; /* 순위 숫자의 너비를 고정하여 정렬 */
  text-align: center;
}

.ranking-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--soft);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

.ranking-item .info { flex-grow: 1; }
.ranking-item .info small { color: var(--muted); font-size: 0.8rem; }
.ranking-item .score { font-weight: 900; color: #333; }

.ranking-item.my-rank {
  border-color: var(--primary);
  background-color: var(--soft);
  box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.2);
  margin-bottom: 20px; /* 내 랭킹과 다른 랭킹 사이에 간격 추가 */
}

.ranking-item.my-rank .rank,
.ranking-item.my-rank .score {
  color: var(--dark);
}

.input-group-text {
  background-color: #f8f9fa;
  border-right: 0;
  border-color: var(--line);
  border-radius: 10px 0 0 10px;
}

.input-group .form-control {
  border-left: 0;
  border-color: var(--line);
  border-radius: 0 10px 10px 0;
}

@media(max-width:360px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .hero-ball{display:none}
  .floating-btn{left:auto;right:18px}
}

/* 대관 시간 선택 그리드 */
.time-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px; /* 위아래 12px, 좌우 8px 간격 */
  margin-top: 12px;
}

.time-grid-4 .btn {
  padding: 10px 2px; /* 버튼 높이 조절 */
  font-size: 14px;
}

.time-grid-4 p {
  grid-column: 1 / -1; /* 그리드 첫 번째부터 마지막까지 병합 */
  margin: 0;
  text-align: center; /* 안내 문구를 중앙으로 배치 */
}

.js-cancel-request {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
}
/* Bootstrap 5 utility compatibility for the local Bootstrap 4 bundle */
.fw-bold{font-weight:700!important}
.fw-bolder{font-weight:bolder!important}
.text-start{text-align:left!important}
.text-end{text-align:right!important}
.border-end{border-right:1px solid var(--line)!important}
.rounded-4{border-radius:1rem!important}
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}
.fs-1{font-size:2.5rem!important}
.fs-2{font-size:2rem!important}
.fs-3{font-size:1.75rem!important}
.fs-4{font-size:1.5rem!important}
.fs-5{font-size:1.25rem!important}
.fs-6{font-size:1rem!important}
.g-0{margin-left:0!important;margin-right:0!important}
.g-0>[class*="col"]{padding-left:0!important;padding-right:0!important}
.g-2{margin-left:-.25rem!important;margin-right:-.25rem!important}
.g-2>[class*="col"]{padding-left:.25rem!important;padding-right:.25rem!important}
.gap-2{gap:.5rem!important}
.gap-3{gap:1rem!important}
.me-1{margin-right:.25rem!important}
.me-2{margin-right:.5rem!important}
.ms-1{margin-left:.25rem!important}
.ms-2{margin-left:.5rem!important}

.btn-primary{
  background-color:var(--primary)!important;
  border-color:var(--primary)!important;
  border-radius:999px;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn-primary:hover,.btn-primary:focus{
  background-color:var(--dark)!important;
  border-color:var(--dark)!important;
}
.btn-outline-primary{
  color:var(--primary)!important;
  border-color:var(--primary)!important;
  border-radius:999px;
  font-weight:900;
}
.btn-outline-primary:hover,.btn-outline-primary.active,.btn-outline-primary:focus{
  color:#fff!important;
  background-color:var(--primary)!important;
  border-color:var(--primary)!important;
}
.badge.bg-primary,.bg-primary{
  background-color:var(--primary)!important;
}
.bg-light{background-color:#f8f9fa!important}
.border-primary{border-color:var(--primary)!important}
.form-select{
  display:block;
  width:100%;
  height:calc(1.5em + .75rem + 2px);
  padding:.375rem 2.25rem .375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:#495057;
  background-color:#fff;
  border:1px solid #ced4da;
  border-radius:999px;
}
.form-select-lg{
  height:calc(1.5em + 1rem + 2px);
  padding:.5rem 1rem;
  font-size:1.25rem;
  border-radius:999px;
}

.menu-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.menu-list-item:last-child{border-bottom:0}
.menu-list-item i{color:var(--muted)}
.status.finished{background:#eee;color:#999}
.ticket-card.finished{background:#f1f1f1;filter:grayscale(1);opacity:.8;cursor:default}

.mypage-point-badge{
  font-size:90%;
}

.btn-lg{
  border-radius:32px;
}

.btn-sm{
  border-radius:999px;
  font-weight:900;
}

.btn-light{
  background:#f7f8fc;
  border-color:#e6e6e6;
  color:#573eec;
  font-weight:900;
}

.form-control{
  border-color:#e6e6e6;
  border-radius:999px;
  color:#6f51c8;
  font-weight:800;
}

.form-control:focus{
  border-color:#ad75c9;
  box-shadow:0 0 0 .2rem rgba(87,62,236,.12);
}

.form-control::placeholder{
  color:#ad75c9;
  opacity:1;
}

/* Whole-office main */
.index-main{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  padding:31px 24px 32px;
  background:#f7f8fc;
  overflow-x:hidden;
}

.index-header{
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.index-logo img{
  display:block;
  width:190px;
  height:auto;
}

.index-profile{
  position:relative;
  display:block;
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#48cef0,#f061c5);
}

.index-profile:before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:#f7f8fc;
}

.index-profile:after{
  content:"";
  position:absolute;
  left:14px;
  top:12px;
  width:20px;
  height:20px;
  border:4px solid #a587e5;
  border-radius:50%;
}

.index-profile span{
  position:absolute;
  left:10px;
  bottom:9px;
  width:28px;
  height:17px;
  border:4px solid #a587e5;
  border-bottom:0;
  border-radius:20px 20px 0 0;
  z-index:1;
}

.index-hero{
  position:relative;
  margin:42px 0 34px;
  border-radius:30px;
  overflow:hidden;
}

.index-hero-image{
  display:block;
  width:100%;
  height:auto;
}

.index-hero-copy{
  position:relative;
  z-index:2;
  width:58%;
  min-height:213px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.index-hero h1{
  margin:0;
  font-size:44px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:0;
}

.index-hero h1 span,
.index-hero h1 strong{
  display:block;
}

.index-hero h1 strong{
  color:#ed0202;
  -webkit-text-stroke:1px #071d3a;
  text-shadow:0 3px 0 #071d3a;
}

.index-hero p{
  margin:0;
  font-size:16px;
  line-height:1.28;
  font-weight:800;
}

.index-hero p b{
  font-weight:900;
}

.index-hero-player{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  height:100%;
  width:auto;
  max-width:none;
  pointer-events:none;
}

.index-hero-dots{
  position:absolute;
  z-index:0;
  width:46px;
  height:42px;
  background-image:radial-gradient(#fff 1.2px,transparent 1.2px);
  background-size:7px 7px;
  opacity:.95;
}

.index-hero-dots.dots-left{
  left:22px;
  bottom:72px;
  height:52px;
}

.index-hero-dots.dots-right{
  right:24px;
  top:21px;
}

.index-hero-x{
  position:absolute;
  z-index:2;
  color:#fff;
  font-size:25px;
  line-height:1;
  font-weight:900;
}

.index-hero-x.x-right{
  right:28px;
  top:47px;
}

.index-hero-x.x-center{
  left:47%;
  bottom:91px;
  font-size:19px;
  color:#cfe6ff;
}

.index-region-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:0 0 20px;
  white-space:nowrap;
}

.index-region-tabs button{
  border:0;
  padding:0;
  background:transparent;
  color:#8d8d91;
  font-size:19px;
  line-height:1;
  font-weight:800;
}

.index-region-tabs button.active{
  color:#4130cd;
}

.index-region-tabs span{
  width:2px;
  height:16px;
  background:#8e8e92;
}

.index-search{
  display:grid;
  grid-template-columns:58px 2px 1fr;
  align-items:center;
  height:46px;
  margin-bottom:20px;
  padding:3px 23px;
  border-radius:999px;
  background:
    linear-gradient(#f7f8fc,#f7f8fc) padding-box,
    linear-gradient(90deg,#41d1f2,#f15bc7) border-box;
  border:3px solid transparent;
}

.index-search-icon{
  position:relative;
  width:33px;
  height:33px;
  display:block;
}

.index-search-icon:before{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:24px;
  height:24px;
  border:4px solid #91a0e8;
  border-radius:50%;
}

.index-search-icon:after{
  content:"";
  position:absolute;
  left:7px;
  bottom:2px;
  width:9px;
  height:20px;
  border:4px solid #91a0e8;
  border-top:0;
  border-radius:0 0 8px 8px;
  transform:rotate(42deg);
  transform-origin:top center;
}

.index-search-divider{
  width:2px;
  height:32px;
  background:#42c9ec;
}

.index-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  padding:0 0 0 22px;
  background:transparent;
  color:#6f51c8;
  font-size:17px;
  font-weight:800;
}

.index-search input::placeholder{
  color:#ad75c9;
  opacity:1;
}

.index-favorite-card{
  margin:0 0 39px;
  padding:27px 27px 10px;
  border:1px solid #e6e6e6;
  border-radius:30px;
  background:#fff;
  box-shadow:0 1px 5px rgba(21,23,34,.06);
}

.index-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:21px;
}

.index-card-head h2{
  margin:0;
  color:#5439f5;
  font-size:26px;
  line-height:1;
  font-weight:900;
}

.index-card-head a{
  color:#888;
  font-size:18px;
  font-weight:800;
}

.index-office-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px;
  gap:15px;
  align-items:center;
  min-height:78px;
  padding:16px 0;
  border-bottom:1px solid #cfcfcf;
}

.index-office-row:last-child{
  border-bottom:0;
}

.index-office-row b{
  display:block;
  margin-bottom:7px;
  color:#000;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}

.index-office-row em{
  display:block;
  color:#858585;
  font-size:14px;
  line-height:1.35;
  font-style:normal;
  font-weight:800;
}

.index-office-row strong{
  display:grid;
  place-items:center;
  min-width:64px;
  height:55px;
  border-radius:999px;
  background:#573eec;
  color:#fff;
  font-size:14px;
  line-height:1;
  font-weight:900;
}

.index-join{
  text-align:center;
}

.index-join p{
  margin:0 0 18px;
  color:#4f41f0;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}

.index-join a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:70px;
  border-radius:32px;
  background:#573eec;
  color:#fff;
  font-size:23px;
  line-height:1.2;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.index-join-icon{
  position:relative;
  width:30px;
  height:32px;
  flex:0 0 30px;
}

.index-join-icon:before{
  content:"";
  position:absolute;
  left:8px;
  top:0;
  width:15px;
  height:15px;
  border:3px solid #d7d3ff;
  border-radius:50%;
}

.index-join-icon:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:30px;
  height:18px;
  border:3px solid #d7d3ff;
  border-bottom:0;
  border-radius:20px 20px 0 0;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(max-width:390px){
  .index-main{padding-left:18px;padding-right:18px}
  .index-logo img{width:174px}
  .index-hero{border-radius:24px}
  .index-hero-copy{min-height:199px}
  .index-hero h1{font-size:39px}
  .index-hero p{font-size:15px}
  .index-region-tabs{gap:11px}
  .index-region-tabs button{font-size:17px}
  .index-search{grid-template-columns:47px 2px 1fr;padding-left:18px;padding-right:17px}
  .index-search input{font-size:15px;padding-left:16px}
  .index-favorite-card{padding-left:22px;padding-right:22px}
  .index-card-head h2{font-size:24px}
  .index-office-row{grid-template-columns:minmax(0,1fr) 58px}
  .index-office-row b{font-size:16px}
  .index-office-row em{font-size:13px}
  .index-office-row strong{min-width:58px;height:50px;font-size:13px}
  .index-join a{font-size:20px}
}