@charset "utf-8";
@import url('font-awesome.min.css');
@import url('daterangepicker.css');
@import url('sweetalert.css');
@import url('perfect-scrollbar.min.css');
@import url('bootstrap-clockpicker.css');
@import url('dropify.css');
@import url('bootstrap-tagsinput.css');
@import url('multi-select.css');
@import url('fm.tagator.jquery.css');
@import url('Chart.min.css');

body {
	background-color: #f1f2f7;
}

.wrapper {
	position: relative;
	width: 100%;
}
.container {
	position: relative;
	width: 100%;
	max-width: none !important;
}
@media (max-width: 1280px) {
	.container {
		width: 1260px !important;
		padding-left: 5px;
		padding-right: 5px;
	}
	.row {
		margin-left: -5px;
		margin-right: -5px;
	}
	.col-xs-1,
	.col-sm-1,
	.col-md-1,
	.col-lg-1,
	.col-xs-2,
	.col-sm-2,
	.col-md-2,
	.col-lg-2,
	.col-xs-3,
	.col-sm-3,
	.col-md-3,
	.col-lg-3,
	.col-xs-4,
	.col-sm-4,
	.col-md-4,
	.col-lg-4,
	.col-xs-5,
	.col-sm-5,
	.col-md-5,
	.col-lg-5,
	.col-xs-6,
	.col-sm-6,
	.col-md-6,
	.col-lg-6,
	.col-xs-7,
	.col-sm-7,
	.col-md-7,
	.col-lg-7,
	.col-xs-8,
	.col-sm-8,
	.col-md-8,
	.col-lg-8,
	.col-xs-9,
	.col-sm-9,
	.col-md-9,
	.col-lg-9,
	.col-xs-10,
	.col-sm-10,
	.col-md-10,
	.col-lg-10,
	.col-xs-11,
	.col-sm-11,
	.col-md-11,
	.col-lg-11,
	.col-xs-12,
	.col-sm-12,
	.col-md-12,
	.col-lg-12 {
		padding-left: 5px;
		padding-right: 5px;
	}
}
/* nav ====================================================================================*/
.navbar {
	border-radius: 0;
	background-color: #4c5366;
	border: 0;
	min-height: 85px;
	margin-bottom: 0;
	min-width: 1260px;
}
.navbar-nav > li {
	float: left !important;
}
.navbar-collapse {
	border-top: 0 !important;
	padding: 0;
	box-shadow: none;
}
.navbar-nav {
	margin: 0;
}
.navbar-header {
	background-color: #3f4659;
	float: none;
	height: 35px;
	padding: 0 10px;
}
.navbar-brand {
	position: relative;
	padding: 6px 15px 0 15px;
	height: 35px;
	line-height: 35px;
    width: 180px;
}
.navbar-title {
	color: #ff8400;
	font-size: 14px;
	font-weight: bold;
	position: relative;
	float: left;
	line-height: 33px;
	padding-left: 15px;
}
.navbar-title:before {
	content: '';
	width: 1px;
	height: 12px;
	background-color: #ff8400;
	position: absolute;
	left: 0;
	top: 11px;
}
.navbar-util {
	margin: 0;
	padding: 0 5px 0 0;
	list-style: none;
	display: block;
	text-align: right;
	float: right;
}
.navbar-util > li {
	color: #fff;
	font-weight: bold;
	display: inline-block;
	padding: 0 0 0 15px;
	line-height: 35px;
	font-size: 13px;
}
.navbar-util > li.btn-vendor .btn {
	background-color: #2c3645;
	border-color: #242e3d;
	color: #fff;
	margin-left: 5px;
}
.navbar-util > li.btn-vendor .btn.active,
.navbar-util > li.btn-vendor .btn:hover {
	background-color: #ff8400;
	border-color: #e67700;
}
.navbar-util > li > a {
	display: inline-block;
	position: relative;
}
.navbar-util > li .btn {
	padding: 4px 12px 2px 12px !important;
	margin-left: 5px;
}

.navbar-main > li > a,
.navbar-main > li.open > a {
	color: #fff !important;
	position: relative;
	padding: 0 20px;
	height: 52px;
	line-height: 52px;
}
.navbar-main > li.open > a,
.navbar-main > li.open > a:hover,
.navbar-main > li.open > a:focus,
.navbar-main > li > a:hover {
	background-color: #2c3645 !important;
	font-weight: 700;
	font-size: 16px;
}
.navbar-main > li > a.on {
	background-color: #2c3645 !important;
	font-weight: 700;
	font-size: 16px;
}
.navbar-main > li > a .badge {
	position: absolute;
	top: 7px;
	right: 7px;
	font-size: 10px !important;
	background-color: #f65579;
	width: 17px;
	height: 16px;
	padding: 3px;
	border-radius: 50%;
}
.navbar-main > li > ul.dropdown-menu {
	border-top: 0;
	padding: 15px 0;
	background-color: #fff;
}
.navbar-main > li > ul.dropdown-menu > li > a {
	padding: 10px 15px;
	position: relative;
}
@media (max-width: 767px) {
	.navbar-main .open .dropdown-menu {
		position: absolute !important;
		background-color: #fff !important;
		border: 1px solid rgba(0,0,0,0.15) !important;
		box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
		top: 100%;
		left: 0;
		min-width: 160px;
		z-index: 1000;
	}
}

.navbar-main > li > a.code {
	padding: 6px 25px 1px 25px;
	margin: 0 10px;
}
.navbar-main > li > a.code i {
	padding: 0;
	font-size: 42px;
	color: #ffffff;
}
.navbar-main > li > a i {
	padding-right: 7px;
}
.navbar-main > li > a i.t-danger {
	position: absolute;
	right: 0;
	top: 12px;
}

.navbar-main > li.divider-vertical {
	width: 1px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.2);
	margin: 11px 5px;
	padding: 0;
	float: left;
}

.navbar-search {
	background-color: #2c3645;
}

.sel-sedate {
	margin: 10px 0 0;
	color: #fff;
	font-family: 'Montserrat';
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 1px;
	cursor: pointer;
}
.sel-sedate small {
	color: #fff;
	font-family: 'Montserrat';
	font-weight: 700;
}

.navbar-time {
	position: absolute;
	left: 0;
	top: 85px;
	padding: 10px 0;
	width: 100%;
	background-color: #2c3645;
	z-index: 998;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
		0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.tabs-time {
	border-bottom: 1px solid #424a58;
}
.tabs-time > li {
	margin-bottom: 0;
}
.tabs-time > li > a {
	margin: 0 5px 0 0;
	padding: 5px 20px;
	color: #b1b5bf;
	font-size: 13px;
	border: 0;
	border-radius: 8px 8px 0 0;
}
.tabs-time > li > a:hover,
.tabs-time > li > a:focus,
.tabs-time > li.active > a,
.tabs-time > li.active > a:hover,
.tabs-time > li.active > a:focus {
	color: #f3f4f9;
	font-weight: bold;
	background-color: #4c5366;
	border: 0;
	border-radius: 6px 6px 0 0;
}
.navbar-time .btn {
	font-size: 13px;
	color: #9ca9bc;
	background-color: #1a212a;
	border: 1px solid #2c3645;
	padding: 5px 20px;
	font-weight: bold;
}
.navbar-time .btn.active,
.navbar-time .btn:hover {
	background-color: #4fd1fc;
	color: #0d3846;
	box-shadow: none;
}

.fixed-top {
	height: 120px;
}

.navbar-list {
	background-color: #2c3645;
	padding: 0;
	min-height: 50px;
	min-width: auto !important;
}
.navbar-list h3 {
	color: #fff;
}
.navbar-list select[name='real_time'] {
	background-color: #d6d9e3;
	color: #000;
	border: 1px solid #d6d9e3;
	border-radius: 0;
	height: 50px;
	font-size: 14px;
}
.navbar-list .btn {
	border-radius: 0;
	font-size: 14px;
	padding: 15px 22px;
	height: 50px;
	min-width: 102px;
	margin-left: 10px;
}
.navbar-list .btn:first-child {
	margin-left: 0;
}
.dropdown-time-picker .dropdown-menu {
	padding: 15px 0 50px;
	max-height: 70vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.dropdown-time-picker .dropdown-menu li {
	border-top: 1px solid #ddd;
}
.dropdown-time-picker .dropdown-menu li:first-child {
	border-top: 0;
}
.dropdown-time-picker .dropdown-menu li a {
	padding: 10px 15px;
}
.dropdown-time-picker .dropdown-menu li a h4 {
	margin: 0;
}
.dropdown-time-picker .dropdown-menu li a div {
	text-align: right;
	position: relative;
}
.dropdown-time-picker .dropdown-menu li a div span {
	position: absolute;
	left: 0;
	top: 3px;
}

.navbar-position-top {
	position: absolute;
	top: 85px;
	bottom: auto;
	width: 100%;
}

.footer {
	height: 90px;
	padding-top: 20px;
	text-align: center;
	font-size: 12px;
}

/* common ====================================================================================*/
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
	border-width: 1px;
}
.w-full {
	width: 100%;
}
.h-full {
	height: 100%;
}
.shadow {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
		0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.b-info {
	background-color: #cbcfdc;
}
.b-info2 {
	background-color: #e4e6ec !important;
}
.b-success {
	background-color: #abdfab;
}
.b-success2 {
	background-color: #d9f7d9 !important;
}
.b-warning {
	background-color: #ffda78;
}
.b-warning2 {
	background-color: #fff2d0 !important;
}
.b-danger {
	background-color: #f8b0c0;
}
.b-danger2 {
	background-color: #ffedf1 !important;
}
.b-primary {
	background-color: #dfeeff !important;
}
.b-primary2 {
	background-color: #cce4ff !important;
}
.b-gray {
	background-color: #F6F6F6 !important;
}
.b-opacity {
	opacity: 0.5;
}
.bi-blue {
	background-image: radial-gradient(
		circle 248px at center,
		#16d9e3 0%,
		#30c7ec 47%,
		#46aef7 100%
	) !important;
}
.bi-green {
	background-image: linear-gradient(to bottom, #00b09b, #96c93d) !important;
}

.t-primary {
	color: #4989d3 !important;
}
.t-info {
	color: #98a0ba !important;
}
.t-success {
	color: #009900 !important;
}
.t-warning {
	color: #ff8400 !important;
}
.t-danger {
	color: #f65579 !important;
}
.t-open {
	color: #06abba !important;
}
.t-week {
	color: #f65579 !important;
}
.t-season {
	color: #63c !important;
}
.t-gray {
	color: #999 !important;
}
.t-white {
	color: #fff !important;
}
.t-error {
	color: #ff1744 !important;
}

.font8 {
	font-size: 8px !important;
	letter-spacing: -3px;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font18 {
	font-size: 18px !important;
}
.font20 {
	font-size: 20px !important;
}
.font22 {
	font-size: 22px !important;
}
.font24 {
	font-size: 24px !important;
}
.font26 {
	font-size: 26px !important;
}
.font32 {
	font-size: 32px !important;
}
.font36 {
	font-size: 36px !important;
}
.font-mont {
	font-family: 'Montserrat';
	font-weight: 700 !important;
}
.fb {
	font-weight: 700 !important;
}
.fn {
	font-weight: normal !important;
}

.bt-0 {
	border-top: 0;
}
.b-0 {
	border: 0;
}

.label {
	font-size: 12px;
	font-weight: 400;
	border-radius: 0;
	padding: 2px;
}
.label.sub {
	position: absolute;
	top: 3px;
	left: 3px;
	font-size: 10px;
}
.label.subL {
	position: absolute;
	top: 3px;
	left: 3px;
	font-size: 10px;
}
.label.subR {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 10px;
}
.label.subLB {
	position: absolute;
	bottom: 3px;
	left: 3px;
	font-size: 10px;
}

.table-in {
	margin: 0;
}
.table-center th,
.table-center td {
	text-align: center;
}
.table-center td.lt {
	text-align: left;
}
.table-center td.rt {
	text-align: right;
}
.table-middle th,
.table-middle td {
	vertical-align: middle !important;
}
.table tfoot td {
	font-weight: 700;
}
.table td .input-group-addon {
	font-size: 12px;
}
.table-addon .input-group-addon {
	padding: 6px 3px !important;
	max-width: 65px;
	width: 65px;
}

.dropdown-menu > li > a {
	padding: 10px 15px;
}
.collapse {
	display: none;
}
.collapsed i {
	transform: rotate(180deg);
	vertical-align: -15%;
}
.fa-angle-up {
	vertical-align: 0;
}
.popover-content {
	font-size: 12px;
}

.btn,
.form-control,
.input-group-addon {
	border-radius: 0 !important;
}
.btn-white,
.btn-white:hover {
	background-color: #fff;
	border-color: #ccc;
	color: #333;
}

.btn-check {
	background-color: #fff;
	border-color: #ccc;
	color: #333;
	position: relative;
}
.btn-check.active {
	background-color: #f65579;
	border-color: #f53d66;
	color: #fff !important;
}
.btn-check.active:before {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: 3px;
	right: 5px;
	color: #fff;
	font-size: 1.2em;
}
.btn-check2 {
	background-color: #fff;
	border-color: #ccc;
	color: #333;
	position: relative;
}
.btn-check2.active {
	background-color: #98a0ba;
	border-color: #8992b0;
	color: #fff !important;
}
.btn-check2.active:before {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: 3px;
	right: 5px;
	color: #fff;
	font-size: 1.2em;
}
.btn-check3 {
	background-color: #fff;
	border-color: #ccc;
	color: #333;
	position: relative;
}
.btn-check3.active {
	background-color: #4989d3;
	border-color: #347cce;
	color: #fff !important;
}
.btn-check3.active:before {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: 3px;
	right: 5px;
	color: #fff;
	font-size: 1.2em;
}

.btn-check.active:before {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: 3px;
	right: 5px;
	color: #fff;
	font-size: 1.2em;
}
.btn-check.primary.active {
	background-color: #4989d3 !important;
	border-color: #347cce;
	color: #fff !important;
}
.btn-check.warning.active {
	background-color: #ff8400 !important;
	border-color: #e67700;
	color: #fff !important;
}
.btn-check.danger.active {
	background-color: #f65579 !important;
	border-color: #f53d66;
	color: #fff !important;
}
.btn-check.info.active {
	background-color: #98a0ba !important;
	border-color: #8992b0;
	color: #fff !important;
}
.btn-check.success.active {
	background-color: #009900 !important;
	border-color: #009900;
	color: #fff !important;
}

.navbar-search .btn-info.active {
	background-color: #5668a3;
	border-color: #4f62a1;
}

.navbar-search .btn-group-sm .btn-info {
	background-color: #2c3645;
	border-color: transparent;
	border-radius: 6px 6px 0 0 !important;
	border-bottom: 0;
	margin: 0;
	font-size: 14px;
}
.navbar-search .btn-group-sm .btn-info.active {
	background-color: #f65579;
	border-color: transparent;
	border-bottom: 0;
	margin: 0;
}

.btn-xs.active:before {
	top: 0;
}

.sweet-alert h2 {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
}
.sweet-alert p {
	font-size: 14px;
}
.ps {
	position: relative;
	overflow: auto;
}
.help-block {
	margin-bottom: 0;
	color: #f65579;
	font-size: 12px;
}
.help-inline {
	margin-bottom: 0;
	color: #f65579;
	font-size: 12px;
}
.help-block.inline {
	display: inline-block !important;
	vertical-align: middle;
	margin: 7px 0 0 8px;
}
.display-inline {
	display: inline-block;
}
.none {
	display: none;
}

.note {
	padding: 15px;
	background-color: #f4f8fb;
	font-size: 14px;
}
.note strong {
	color: #f65579;
	font-size: 16px;
}

.modal-backdrop {
	position: fixed;
}
.modal-backdrop.in {
	opacity: 0.3;
}
.modal-content {
	border: 0;
	border-radius: 0;
}
.modal-header {
	background-color: #f8f9fd;
	border-radius: 6px 6px 0 0;
	cursor: move;
}
.modal-footer {
	margin-top: 30px;
}
.modal-dialog {
	width: 450px;
}
@media (max-width: 767px) {
	.modal-dialog {
		width: auto !important;
		left: auto !important;
	}
}

.jqplot-target {
	color: #000;
}
.btn-active {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #bbb !important;
}

.modal-form .modal-dialog {
	width: 767px;
}
.modal-form .modal-header {
	background-color: #347cce;
	padding: 15px 15px 13px 15px;
	border-radius: 0;
}
.modal-form .modal-header .modal-title {
	color: #fff;
}
.modal-form .modal-body {
	padding: 0;
}
.modal-form .modal-body .info {
	margin-top: 10px;
}
.modal-form .modal-body .info:first-child {
	margin-top: 0;
}

.file-sort {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	overflow: hidden;
}
.file-sort li {
	margin: 0;
	padding: 0;
	width: 240px;
	display: block;
	float: left;
}

.file-sort2 {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	overflow: hidden;
}
.file-sort2 li {
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid #ddd;
}
.file-sort2 li:first-child {
	padding-top: 0;
	border-top: 0;
}
.file-sort2 li .btn-box {
	text-align: right;
	margin-bottom: 5px;
}
.file-sort2 li .file-box {
	display: flex;
}
.file-sort2 li .file-box .image {
	width: 240px;
}
.file-sort2 li .file-box .image a {
	display: block;
	padding: 3px;
	font-size: 12px;
	text-align: center;
}
.file-sort2 li .file-box .info {
	flex: 1;
	margin-left: 10px;
	margin-top: 0 !important;
}

.list-sort {
	margin: 0;
	padding: 0;
	list-style: none;
}
.list-sort li {
	margin: 3px 0;
	padding: 10px 40px 10px 15px;
	border: 1px solid #ddd;
	position: relative;
}
.list-sort li::before {
	position: absolute;
	right: 15px;
	top: center;
	content: '\f0dc';
	font-family: 'FontAwesome';
	color: #333;
}

.modal-sub-title {
	padding: 15px 15px 0;
	line-height: 45px;
	border-bottom: 1px solid #ddd;
	font-size: 15px;
	font-weight: 700;
	position: relative;
}
.modal-sub-title a {
	float: right;
}

.modal-table-form {
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse;
}
.modal-table-form > tbody > tr:nth-of-type(even) {
	background-color: #f4f8fb;
}
.modal-table-form > tbody > tr > th {
	padding: 10px 15px;
	width: 150px;
	font-weight: 400;
}
.modal-table-form > tbody > tr > td {
	padding: 10px 15px;
}
.modal-table-form > tbody > tr > td .input-group-addon {
	font-size: 12px;
}

.modal-form .modal-dialog-lg {
	width: 1250px;
}
.modal-form .modal-dialog-sm {
	width: 540px;
}
.modal-form .modal-dialog-sm .modal-table-form > tbody > tr > th {
	width: 90px;
}

.facility {
	margin: 0;
	padding: 0;
	list-style: none;
}
.facility li {
	display: inline-block;
	width: 120px;
	padding: 5px 0;
	text-align: center;
}
.facility li img {
	width: 65px;
}

.vd-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.vd-list li {
	width: 50%;
	display: block;
	float: left;
	padding: 2px 0;
	cursor: pointer;
}

.sms-modal .sms-form {
	margin: 10px 0;
}
.sms-modal .sms-form textarea[name='sms_cont'] {
	background-color: #06abba;
	border: 0;
	color: #fff;
	font-size: 12px;
}
.sms-modal .sms-form h5 {
	margin: 10px 0 5px 0;
	position: relative;
}
.sms-modal .sms-form h5 small {
	position: absolute;
	right: 0;
	bottom: 5px;
}
.sms-modal .sms-form .sms-del {
	cursor: pointer;
}
.sms-modal .sms-form .is-toggle {
	cursor: pointer;
}

.sms-modal .sms-list {
	margin-top: 0;
	padding-bottom: 10px;
	height: 430px;
}
.sms-modal .sms-list textarea {
	background-color: #fbec99;
	border: 0;
	cursor: pointer;
	font-size: 12px;
}
.sms-modal .sms-list h5 {
	margin: 10px 0 5px 0;
	position: relative;
}
.sms-modal .sms-list h5 small {
	position: absolute;
	right: 0;
	bottom: 5px;
}

.sms-guide {
	margin: 20px 0 0 0;
	padding: 20px 0;
	border-top: 1px dotted #ccc;
}
.sms-guide h5 {
	margin-top: 0;
	color: #f65579;
}

/* 승선명부 */
.user-form {
	padding: 5px 0;
}
.user-form .input-group {
	display: flex;
	margin-top: 2px;
	align-items: center;
	justify-content: center;
}
.user-form .input-group-addon {
	padding: 10px 12px;
	width: 70px;
	font-size: 12px;
	text-align: right;
	vertical-align: middle;
}
.user-form .form-control {
	flex: 1;
}

/* list ====================================================================================*/
.search-list {
	margin-bottom: 10px;
}

.table-list {
	background-color: #fff;
}
.table-list tbody tr:hover {
	border: 2px solid #000;
}
.table-list th {
	text-align: center;
	vertical-align: middle !important;
	background-color: #fff;
	color: #888;
	font-weight: 400;
	height: 41px;
	border-bottom-width: 1px !important;
}
.table-list th a {
	color: #888;
}
.table-list th a:after {
	font-family: 'FontAwesome';
	content: '\f0dc';
	color: #ff8400;
	font-size: 12px;
}
.table-list th a.active {
	color: #ff8400;
}
.table-list th a.active.asc:after {
	font-family: 'FontAwesome';
	content: '\f0d8';
}
.table-list th a.active.desc:after {
	font-family: 'FontAwesome';
	content: '\f0d7';
}
.table-list td {
	text-align: center;
	vertical-align: middle !important;
	position: relative;
}
.table-list td.name a {
	font-weight: bold;
	color: #4989d3;
	text-decoration: underline;
}
.table-list td.name i {
	position: absolute;
	top: 3px;
	right: 3px;
}
.table-list td.hp {
	padding: 0 4px;
    white-space: nowrap;
}
.table-list td.hp i {
	position: absolute;
	top: 3px;
	left: 3px;
}
.table-list td.hp span {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 11px;
	font-weight: 700;
	color: #4989d3;
	font-family: 'tahoma';
}
.table-list td.date {
	padding: 0 4px;
    white-space: nowrap;
}
.table-list td.lt {
	text-align: left;
}
.table-list td.rt {
	text-align: right;
}
.table-list td .social-icon {
	width: 18px;
	margin-right: 5px;
	vertical-align: middle;
}

.table-list td.font-mont {
	color: #555;
	font-size: 16px;
	font-family: inherit;
	font-weight: normal;
}
.table-list td.font-mont span {
	color: #999;
	display: block;
	font-size: 13px;
}
.table-list td.font-mont small {
	float: left;
}
.table-list th label,
.table-list td label {
	margin: 0;
	padding: 0;
	display: block;
	cursor: pointer;
}
.table-list th label i,
.table-list td label i {
	margin: 0;
	padding: 0;
	width: auto;
	font-size: 24px !important;
}
.table-list > tfoot > tr > td {
	font-weight: bold;
	height: 41px;
}

.table-y-b-0 {
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
}
/* form ====================================================================================*/
.form-box h3 {
	margin: 0;
	line-height: 30px;
	padding: 0 0 5px;
	font-size: 16px;
	font-weight: 700;
	position: relative;
}
.form-box h3 a {
	float: right;
}
.form-box h3 span {
	display: inline-block;
	padding-left: 10px;
	font-weight: 400;
	font-size: 14px;
}
.table-form {
	margin: 0;
	width: 100%;
	border-collapse: collapse;
}
.table-form td button.is-ok {
	position: absolute;
	right: 12px;
}
.table-form td .dropdown {
	position: absolute;
	right: 12px;
	display: inline-block;
}

.table-form > thead > tr {
	background-color: #fff;
}
.table-form > thead > tr > th {
	padding: 4px 12px;
	position: relative;
	height: 42px;
	font-weight: 400;
	color: #888;
}

.table-form > tbody > tr {
	background-color: #fff;
}
.table-form > tbody > tr > th,
.table-form > tbody > tr > td {
	padding: 4px 12px;
	position: relative;
}
.table-form > tbody > tr > th {
	text-align: right;
	font-weight: 400;
	color: #888;
}
.table-form > tbody > tr > td {
	height: 42px;
}
.table-form > tbody > tr > td .input-group-addon {
	background-color: #f6f6f6;
	font-size: 12px;
	font-weight: bold;
}
.table-form > tbody > tr > td .date {
	font-size: 12px;
	color: #888;
}
.table-form > tbody > tr > td .edit-font {
	font-size: 16px;
	color: #ff1744;
}
.table-form > tbody > tr > td input.week {
	background-color: #f65579;
	color: #fff;
}
.table-form > tbody > tr > td input.season {
	background-color: #63c;
	color: #fff;
}

.qty-wrap {
	padding: 15px 0;
}
.qty-wrap ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	width: 100%;
}
.qty-wrap ul li {
	margin: 0;
	border-top: 1px solid #ddd;
	padding: 15px 10px 10px;
}
.qty-wrap ul li:first-child {
	border: 0;
}
.qty-wrap ul li .table-cell {
	display: table-cell;
	width: 1%;
	vertical-align: middle;
}
.qty-wrap ul li .price {
	text-align: left;
	padding: 2px 0 0;
	font-size: 16px;
}
.qty-wrap ul li .price small {
	font-size: 12px;
	font-weight: 400;
}
.qty-wrap ul li .count {
	text-align: right;
}
.qty-wrap ul li .count .counter {
	font-weight: 700;
	width: 38px;
	display: inline-block;
	font-size: 16px;
	text-align: center;
}
.qty-wrap ul li .count .btn {
	width: 34px;
	height: 34px;
	border-radius: 50% !important;
	padding: 0;
	font-size: 20px;
	font-family: monospace;
}
.qty-wrap ul li .count .btn.disabled {
	opacity: 0.4;
}

.qty-wrap2 {
	padding: 15px 0;
}
.qty-wrap2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	width: 100%;
	font-size: 16px;
}
.qty-wrap2 ul li {
	margin: 0;
	border-top: 1px solid #ddd;
	padding: 15px 10px 10px;
}
.qty-wrap2 ul li:first-child {
	border: 0;
}
.qty-wrap2 ul li .table-cell {
	display: table-cell;
	width: 1%;
	vertical-align: middle;
}
.qty-wrap2 ul li .price {
	text-align: left;
	padding: 2px 0 0;
	font-size: 18px;
}
.qty-wrap2 ul li .price small {
	font-size: 12px;
	font-weight: 400;
}
.qty-wrap2 ul li .count {
	text-align: right;
}
.qty-wrap2 ul li .count .counter {
	font-weight: 700;
	width: 38px;
	display: inline-block;
	font-size: 18px;
	text-align: center;
}
.qty-wrap2 ul li .count .btn {
	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	padding: 0;
	font-size: 24px;
	font-family: monospace;
}
.qty-wrap2 ul li .count .btn.disabled {
	opacity: 0.4;
}

.time.list ul {
	left: 0 !important;
	right: auto !important;
}
.time ul {
	margin: 0;
	padding: 0;
	list-style: none;
	left: auto;
	right: 0;
	width: 350px;
}
.time ul li {
	margin: 0;
	padding: 10px 15px;
	border-top: 1px dashed #ccc;
	position: relative;
	line-height: 1.4;
	cursor: pointer;
}
.time ul li:first-child {
	border-top: 0;
}
.time ul li:after {
	content: '\f1db';
	font-family: 'FontAwesome';
	position: absolute;
	right: 15px;
	top: 23px;
	font-size: 26px;
	color: #888;
}
.time ul li.click:after {
	content: '\f058';
	font-family: 'FontAwesome';
	color: #222;
}
.time ul li.close2 {
	opacity: 0.6;
	cursor: default;
}
.time ul li.close2:after {
	content: '\f057';
}
.time ul li .time {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	line-height: 1.3;
	font-weight: bold;
	width: 52px;
	height: 59px;
	border-radius: 5px;
}
.time ul li .name {
	display: table-cell;
	vertical-align: middle;
	padding-left: 10px;
	padding-right: 30px;
}
.time ul li .name .nick {
	font-weight: bold;
	font-size: 15px;
}
.time ul li .name .ship {
	padding: 0 3px;
	color: #fff;
	font-weight: bold;
	border-radius: 3px;
}
.time ul li .name .rest strong {
	color: #055ab2;
}

.qna-box {
	margin: 0;
	padding: 10px 0;
	height: 379px;
	background-color: #fff;
	border: 1px solid #ddd;
}
.qna {
	position: relative;
	margin: 5px 0;
}
.qna .icon {
	border-radius: 50% !important;
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	text-align: center;
	font-weight: bold;
	color: #fff;
	position: absolute;
	left: 15px;
	top: 5px;
}
.qna .icon.a {
	left: auto;
	right: 15px;
}
.qna .text {
	border-radius: 5px;
	background-color: #f4f8fb;
	width: 70%;
	padding: 15px;
	margin-left: 65px;
}
.qna .text.a {
	background-color: #71a9ea;
	margin-right: 65px;
	margin-left: auto;
}
.qna span {
	display: block;
	color: #666;
	font-size: 12px;
}
.qna span.a {
	color: #fff;
}
.qna textarea {
	background-color: transparent;
	color: #fff;
	border: 0;
	padding: 5px 0;
}
.qna textarea:focus {
	background-color: #fff;
	color: #555;
	border: inherit;
}

.log-box {
	margin: 0;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
}
.tabs-log {
	border-color: #ccc;
}
.tabs-log li.active a,
.tabs-log li:hover a {
	background-color: #f8f9fd !important;
	border-color: #ccc;
	border-bottom: 1px solid #fff;
}

.smsform textarea {
	background-color: #fbec99;
	border: 0;
}
.smsform .box-body h5 {
	position: relative;
}
.smsform .box-body h5 small {
	position: absolute;
	right: 0;
}

.recom h4 {
	font-size: 14px;
}
.recom p {
	font-size: 12px;
	height: 80px;
}
.recom .info {
	position: relative;
	height: 24px;
	bottom: 0;
}
.recom .info p {
    font-size: 16px;
	font-weight: 700;
    color: #ff8400;
}
.recom .info a {
	position: absolute;
	right: 0;
	top: 0;
}
.recom .link {
	position: relative;
	text-align: right;
	height: 24px;
	bottom: 26px;
}
.recom .ad {
	position: absolute;
	text-align: right;
	right: 15px;
	bottom: 0;
}
.recom .img-fit {
    position: absolute;
    width: 120px;
    height: 80px;
    overflow: hidden;
}
.recom .img-fit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.recom .item {
    margin-left: 130px;
    height: 104px;
}
.sns {
	position: relative;
}
.sns .info {
	position: absolute;
	right: 5px;
	bottom: 5px;
}

/* 추천여행 */
.event-item {
	padding-bottom: 20px;
}
.event-item .list {
	margin-top: 10px;
	border: 1px solid #ccc;
	height: auto;
	height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
}
.event-item .list p {
	padding: 30px 10px;
	text-align: center;
}
.event-item .list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
.event-item .list ul li {
	border-bottom: 1px solid #ddd;
	display: block;
	padding: 10px 15px;
	position: relative;
}
.event-item .list ul li img {
	position: absolute;
	left: 15px;
	top: 10px;
}
.event-item .list ul li .item {
	margin-left: 130px;
	padding-top: 5px;
	height: 92px;
	vertical-align: middle;
}
.event-item .list ul li .item-btn {
	position: absolute;
	right: 15px;
	bottom: 10px;
}
.event-item .list ul li .item-ad {
	right: 15px;
	top: 10px;
}
.event-item .list ul li .item-ad label {
	font-weight: 400;
}

/* calendar ====================================================================================*/
.calendar-title {
	margin: 10px 0 0;
	color: #fff;
	font-family: 'Montserrat';
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 1px;
}
.calendar-title small {
	color: #fff;
	font-family: 'Montserrat';
	font-weight: 700;
}
.calendar {
	background-color: #fff;
}
.calendar > table {
	margin-bottom: 0;
}
.calendar > table > thead > tr > th:nth-of-type(1),
.calendar > table > tbody > tr > td:nth-of-type(1) h4 {
	color: #f65579;
}
.calendar > table > thead > tr > th:nth-of-type(7),
.calendar > table > tbody > tr > td:nth-of-type(7) h4 {
	color: #46aef7;
}
.calendar > table > thead > tr > th {
	background: #fff;
	color: #888;
	font-weight: 400;
	text-align: center;
}
.calendar > table > tbody > tr > td {
	position: relative;
	padding: 15px 0;
	width: 14.285%;
	text-align: left;
}
.calendar > table > tbody > tr > td .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	z-index: 2;
}
.calendar > table > tbody > tr > td .date-hide {
	display: none;
}
.calendar > table > tbody > tr > td h4 {
	margin: 0;
	font-weight: 700;
	position: relative;
	display: block;
	padding: 0 5px 10px;
	font-family: 'Montserrat';
	color: #888;
}
.calendar > table > tbody > tr > td h4 small {
	position: absolute;
	right: 0;
	top: 0;
	line-height: 1.2;
}
.calendar > table > tbody > tr > td h4 small div {
	text-align: right;
	font-size: 12px;
	font-weight: 700;
}
.calendar > table > tbody > tr > td.today {
	background-color: #fff2d0;
}
.calendar > table > tbody > tr > td ul {
	margin: 5px 0 0 0;
	padding: 0;
	list-style: none;
}
.calendar > table > tbody > tr > td ul li span {
	display: inline-block;
}
.calendar > table > tbody > tr > td ul li .con {
	float: right;
}
.calendar > table > tbody > tr > td:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
}
.calendar > table > tbody > tr > td.day:before {
	background-color: #eee;
}
.calendar > table > tbody > tr > td.open:before {
	background-color: #06abba;
}
.calendar > table > tbody > tr > td.week:before {
	background-color: #f65579;
}
.calendar > table > tbody > tr > td.week2:before {
	background-color: #f65579;
}
.calendar > table > tbody > tr > td.season:before {
	background-color: #63c;
}
.calendar > table > tbody > tr > td.close2:before {
	background-color: #777;
}

.table-state {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 27px;
}
.table-state td {
	padding: 8px 5px;
	border-top: 1px solid #ddd;
	font-size: 14px;
	height: 40px;
}
.table-state tr:first-child td {
	border-top: 0;
}
.table-state td.rt {
	text-align: right;
	font-size: 14px;
	font-weight: 400;
}

.table-stay {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40px;
}
.table-stay > tbody > tr.time-hidden {
	opacity: 0.4;
}
.table-stay > tbody > tr > td {
	padding: 10px 5px;
	border-bottom: 1px dotted #ddd;
	font-size: 13px;
	line-height: 1.2;
}
.table-stay > tbody > tr:last-child > td {
	border-bottom: 0;
}
.table-stay > tbody > tr > td.rt {
	text-align: right;
}
.table-stay > tbody > tr > td .time {
	font-weight: 700;
	font-size: 17px;
}
.table-stay > tbody > tr > td.time-close {
	background-color: #f1f1f1;
}
.table-stay > tbody > tr > td.time-full {
	text-decoration: line-through;
	text-decoration-color: #333;
	opacity: 0.5;
}
.table-stay > tbody > tr > td.time-hidden {
	opacity: 0.4;
}
.table-stay > tbody > tr > td .div-table {
	display: table;
}
.table-stay > tbody > tr > td .div-table .price {
	display: table-cell;
	width: 1%;
	font-weight: 700;
	color: #666;
}
.table-stay > tbody > tr > td .div-table .price .sale {
	color: #ff1744;
	position: relative;
}
.table-stay > tbody > tr > td .div-table .price .sale:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #ff6986;
}
.table-stay > tbody > tr > td .div-table .price .sale small {
	color: #ff6986;
}
.table-stay > tbody > tr > td .div-table .price small {
	color: #aaa;
}
.table-stay > tbody > tr > td .div-table .qty {
	display: table-cell;
	width: 1%;
	text-align: right;
	font-weight: 700;
	font-family: 'Montserrat';
	color: #888;
}
.table-stay > tbody > tr > td .div-table .qty small {
	font-weight: 400;
	color: #aaa;
}

.ui-table {
	display: table;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-top: 1px solid #ccc;
	z-index: 1;
}
.ui-table div {
	display: table-cell;
	width: 1%;
	padding: 10px 5px;
}
.ui-table div.lt {
	text-align: left;
}
.ui-table div.rt {
	text-align: right;
}

/* daterangepicker ====================================================================================*/
.daterangepicker table {
	border-collapse: inherit !important;
	border-spacing: 2px;
}
.daterangepicker th {
	font-size: 12px;
	font-weight: 400;
}
.daterangepicker td {
	position: relative;
	padding: 6px 5px 3px !important;
}
.daterangepicker td {
	border: 1px solid #ddd !important;
}
.daterangepicker td::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
}
.daterangepicker td.open2::after {
	background-color: #06abba;
}
.daterangepicker td.week2::after {
	background-color: #f65579;
}
.daterangepicker td.season2::after {
	background-color: #63c;
}
.daterangepicker td.close2::after {
	background-color: #777;
}

/* login ====================================================================================*/
.login {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.login .logo {
	padding-bottom: 10px;
}
.login .logo img {
	width: 150px;
}
.login .title {
	text-align: center;
}
.login .title img {
	width: 240px;
}
.login .title h2 {
	margin: 0 0 30px;
}
.login .title h2 small {
	display: block;
	margin: 10px 0 10px;
}
.login .box {
	margin: 0 0 150px;
	padding: 70px 40px;
	width: 460px;
	text-align: center;
}

/* paging ====================================================================================*/
.pg_wrap {
	clear: both;
	margin: 0;
	padding: 0;
	text-align: right;
}
.pg {
	margin: 0;
	padding: 0;
	display: block;
}
.pg a,
.pg_current {
	margin: 0;
	padding: 9px 15px;
	display: inline-block;
	color: #000;
	line-height: 1;
	border: 1px solid #d7d7d7;
}
.pg a:hover,
.pg_current {
	background: #7b7b7b;
	color: #fff;
}
.pg_start,
.pg_prev {
	margin: 0;
	padding: 0;
}
.pg_end,
.pg_next {
	margin: 0;
	padding: 0;
}
.sound_only {
	display: none;
}

/* main ====================================================================================*/
.main {
	margin: 0 auto;
	max-width: 1280px;
}
.main > .row {
	margin: 0 -8px;
}
.main > .row > div {
	padding: 0 8px;
}
.main > .row > div > .row {
	margin: 0 -8px;
}
.main > .row > div > .row > div {
	padding: 0 8px;
}

.ul-notice {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ul-notice li {
	padding: 11px 0 9px;
	border-top: 1px solid #ddd;
}
.ul-notice li:first-child {
	border-top: 0;
}
.ul-notice li a {
	font-size: 13px;
	letter-spacing: -1px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table-visit {
	width: 100%;
	border-collapse: collapse;
}
.table-visit td {
	width: 25%;
	padding: 0;
	font-family: 'Montserrat';
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	color: #4989d3;
	position: relative;
	line-height: 1.7;
}
.table-visit td::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 1px;
	height: 40px;
	background-color: #ddd;
}
.table-visit td:first-child:before {
	background-color: #fff;
}
.table-visit td small {
	font-size: 12px;
	display: block;
	color: #888;
}

/* box ====================================================================================*/
.box > header small {
	color: #777;
}
.box {
	margin: 0 auto;
	margin-bottom: 16px;
	border: 1px solid #ddd;
	background-color: #fff;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.box > header {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: #888;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 15px 15px 0;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
.box > header div,
.box > header h1,
.box > header h2,
.box > header h3,
.box > header h4,
.box > header h5,
.box > header h6 {
	margin: 0;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	color: inherit;
}
.box-body {
	position: relative;
	margin: 20px 0;
	padding: 0 15px;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	-webkit-flex: 1 1 auto !important;
	-ms-flex: 1 1 auto !important;
	flex: 1 1 auto !important;
	-webkit-flex-basis: auto !important;
	-ms-flex-preferred-size: auto !important;
	flex-basis: auto !important;
}
.box-body .hide-site {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
	display: flex;
	align-items: center;
	text-align: center;
}
.box-body .hide-site::before {
	content: '홈페이지 미운영중';
	width: 100%;
	text-align: center;
	color: #888;
	font-style: italic;
}
.box-body2 {
	padding: 20px 15px;
	display: flex;
}
.box-body2 div {
	flex: 1;
}
.box-body2 div h4 {
	font-size: 16px;
	font-weight: 700;
	color: #888;
	text-align: center;
}

/* preloader ========================================================================================*/
#preloader {
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9999;
}
.loader-heart {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -32px;
	margin-left: -32px;
	width: 192px;
	height: 192px;
	animation: heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes heart {
	0% {
		transform: scale(0.95);
	}
	5% {
		transform: scale(1.1);
	}
	39% {
		transform: scale(0.85);
	}
	45% {
		transform: scale(1);
	}
	60% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(0.9);
	}
}

/* 모바일 modal */
.modal-mobile {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
}
.modal-mobile .modal-header .close {
	font-size: 60px !important;
}
.modal-mobile .form-control {
	height: auto !important;
	line-height: normal !important;
	font-size: 48px !important;
	padding: 16px 32px !important;
}
.modal-mobile .btn {
	height: auto !important;
	line-height: normal !important;
	font-size: 48px !important;
	padding: 16px 32px !important;
}
.modal-mobile .time-picker h4 {
	font-size: 48px !important;
}
.modal-mobile .time-picker h4 small {
	font-size: 48px !important;
}
.modal-mobile .time-picker div {
	font-size: 48px !important;
}
.qty-wrap2 .title {
	font-size: 18px;
}
.qty-wrap2 .title p {
	font-size: 40px;
	color: #f00;
	font-weight: 500
}
.modal-mobile .qty-wrap2 .title {
	font-size: 48px !important;
}
.modal-mobile .qty-wrap2 .title span {
	font-size: 48px !important;
}
.modal-mobile .qty-wrap2 .title p {
	font-size: 80px !important;
	font-weight: 600
}
.modal-mobile .qty-wrap2 ul li {
	font-size: 40px !important;
}
.modal-mobile .qty-wrap2 ul li .price {
	font-size: 36px !important;
}
.modal-mobile .qty-wrap2 ul li .price small {
	font-size: 36px !important;
}
.modal-mobile .qty-wrap2 ul li .count .counter {
	font-size: 48px !important;
}
.modal-mobile .qty-wrap2 ul li .count .btn {
	width: 90px;
	height: 90px !important;
}

.modal-mobile .daterangepicker .calendar {
	font-size: 48px !important;
	max-width: none;
}
.modal-mobile .daterangepicker .calendar .calendar-table {
	padding-right: 0;
}
.modal-mobile .daterangepicker .calendar td {
	min-width: 120px;
	height: 120px;
}
.modal-mobile .daterangepicker .calendar th {
	min-width: 120px;
	height: 120px;
	font-size: 48px;
}
.required-field {
    background-image: linear-gradient(225deg, #f65579 0%, #f65579 50%, transparent 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: top right;
}
/* 가맹점 선택 모달 (#vendor-list-modal) 모달 전체 위치 및 애니메이션 설정 */
#vendor-list-modal {
    padding-right: 0 !important; /* 부트스트랩 자동 패딩 제거 */
    overflow: hidden !important; /* 모달 배경 스크롤 방지 */
}

#vendor-list-modal .modal-dialog {
    position: fixed;
    margin: 0;
    width: 340px;      
    max-width: 100%; 
    height: 100%;  
    right: 0; 
    top: 0;
    bottom: 0;
    
    /* 슬라이드 애니메이션 효과 */
    transform: translate3d(100%, 0, 0); /* 처음엔 오른쪽 화면 밖에 숨김 */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 모달이 활성화(.in) 되면 제자리로 이동 */
#vendor-list-modal.in .modal-dialog {
    transform: translate3d(0, 0, 0);
}

/* 2. 모달 컨텐츠 레이아웃 (헤더/푸터 고정, 바디 스크롤) */
#vendor-list-modal .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* 왼쪽 그림자 */
    display: flex;           /* Flexbox 사용 */
    flex-direction: column;  /* 위에서 아래로 배치 */
    background-color: #fff;
}

/* 헤더 고정 */
#vendor-list-modal .modal-header {
    flex: 0 0 auto; /* 크기 고정 */
    border-bottom: 1px solid #eee;
    background-color: #347cce; /* 테마색 */
    color: #fff;
    border-radius: 0;
    padding: 15px;
}
#vendor-list-modal .modal-header .close {
    color: #fff;
    opacity: 0.8;
    font-size: 28px;
    margin-top: -5px;
    font-weight: normal;
}
#vendor-list-modal .modal-header .modal-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

/* 바디 스크롤 (핵심) */
#vendor-list-modal .modal-body {
    flex: 1 1 auto;  /* 남은 공간 모두 차지 */
    overflow-y: auto; /* 내용 넘치면 스크롤 */
    padding: 0;       /* 내부 패딩 제거 (테이블 꽉 차게) */
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
}

/* 푸터 고정 */
#vendor-list-modal .modal-footer {
    flex: 0 0 auto; /* 크기 고정 */
    background-color: #f8f9fd;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 10px 15px;
}

/* 3. 내부 테이블 및 텍스트 스타일 */
#vendor-list-modal .modal-table-form {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

/* [중요] 테이블 행의 배경색(얼룩말 패턴)을 제거하고 모두 흰색으로 통일 */
#vendor-list-modal .modal-table-form > tbody > tr,
#vendor-list-modal .modal-table-form > tbody > tr:nth-of-type(even),
#vendor-list-modal .modal-table-form > tbody > tr:nth-of-type(odd),
#vendor-list-modal .modal-table-form > tbody > tr:hover {
    background-color: #fff !important;
}

/* 왼쪽 자음 (ㄱ,ㄴ,ㄷ...) 스타일 */
#vendor-list-modal .modal-table-form > tbody > tr > th {
    width: 60px; /* 자음 영역 너비 */
    background-color: #f4f8fb !important; /* 자음 영역은 연한 회색 유지 */
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
    font-size: 18px !important; /* 요청: 폰트 18px */
    font-weight: 800;
    color: #347cce;
    padding: 10px 0;
}

/* 오른쪽 가맹점 리스트 영역 스타일 */
#vendor-list-modal .modal-table-form > tbody > tr > td {
    background-color: #fff !important; /* 배경색 흰색 강제 적용 */
    padding: 0;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

#vendor-list-modal .vd-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#vendor-list-modal .vd-list li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #eee; /* 가맹점 사이 구분선 */
}
#vendor-list-modal .vd-list li:last-child {
    border-bottom: 0;
}

/* 가맹점 명 링크 스타일 */
#vendor-list-modal .vd-list li a {
    display: block;
    padding: 15px 15px;      /* 터치 영역 확보 */
    font-size: 16px !important; /* 요청: 폰트 16px */
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

/* 마우스 올렸을 때 효과 */
#vendor-list-modal .vd-list li a:hover,
#vendor-list-modal .vd-list li a:focus {
    background-color: #f9f9f9 !important; /* 호버 시 아주 연한 회색 */
    color: #000;
}