@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	outline: none;
	font-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(1, 1, 1);
	transform: translate3d(1, 1, 1);
	text-rendering: auto;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*:focus {
	outline: none;
}

*, *:after, *:before {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

* {
	font-family: 'Nanum Gothic', sans-serif;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 13px;
	line-height: 23px;
	font-weight: 400;
	background-color: #FFFFFF;
}

::selection {
	background-color: #CCC;
	color: #000;
}

div, a, p, img, blockquote, form, fieldset, textarea, input, label,
	iframe, code, pre {
	display: block;
	position: relative;
}

textarea, input {
	outline: none;
}

input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
}

input {
	border-radius: 0 !important;
	-webkit-border-radius: 0px !important;
	display: inline-block;
}

textarea {
	-webkit-appearance: none !important;
	border-radius: 0 !important;
	-webkit-border-radius: 0px !important;
}

label a {
	display: inline-block;
}

.no-click {
	pointer-events: none !important;
}

.no-transition {
	transition: all 0ms ease !important;
}

/*---Typography---*/
/*----------------*/
a {
	color: #2980b9;
}

p>a {
	display: inline;
	text-decoration: none;
}

p>a:hover {
	text-decoration: underline;
}

p>span {
	display: inline;
}

p strong {
	font-size: 13px;
	font-weight: 500;
}

span>a {
	display: inline;
}

a>span {
	display: inline;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

strong a, em a {
	display: inline;
}

h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
	display: inline;
}

table {
	bborder-collapse: separate;
	border-spacing: 0;
	width: 100%;
	clear: both;
	margin-bottom: 27px;
}

th {
	vertical-align: middle;
	font-weight: bold;
}

tr {
	line-height: 18px;
}

td {
	text-align: center;
	padding: 9px 0px 9px 0px;
	line-height: 18px;
	vertical-align: middle;
}

.table tr.even td {
	background: #efefef;
}

th {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #1f1f1f;
	line-height: 45px;
	background-color: #f6f6f6;
}

td {
	color: #666;
	background-color: #fdfdfd;
}

table {
	background-color: #f6f6f6;
	font-size: 12px;
}

ul, ol {
	color: #666666;
	font-size: 13px;
}

ul {
	margin-bottom: 20px;
}

ul ul {
	margin-bottom: 5px;
}

ol ol {
	margin-bottom: 5px;
}

ol {
	margin-bottom: 30px;
}

li {
	line-height: 24px;
	margin-bottom: 5px;
}

ol>li:last-child, ul>li:last-child {
	margin-bottom: 0px;
}

sub, sup {
	font-size: 50%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -15px;
}

sub {
	bottom: 0px;
}

i {
	min-width: 12px;
}

.disabled {
	display: none !important;
}

.stop-scroll {
	overflow: hidden !important;
}

.no-click {
	pointer-events: none;
}

.no-border {
	border: none !important;
}

.responsive-image {
	display: block;
	height: auto;
	max-width: 100%;
	overflow: hidden;
}

.round-image {
	border-radius: 100%;
}

/* 임의의 영역 생성 */
.scrollBar { 
  overflow-y: scroll;
}

/* 아래의 모든 코드는 영역::코드로 사용 */
.scrollBar::-webkit-scrollbar {
    width: 10px;  /* 스크롤바의 너비 */
}

.scrollBar::-webkit-scrollbar-thumb {
    background: #217af4; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.scrollBar::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}

/*Typography*/
p {
	line-height: 26px;
	margin-bottom: 30px;
	font-size: 13px;
	color: #6c6c6c;
}

p strong {
	color: #1f1f1f;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 5px;
	letter-spacing: -0.9px;
	font-weight: 700;
	font-family: 'IBM Plex Sans', sans-serif;
}

h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
	font-family: 'IBM Plex Sans', sans-serif;
}

h1 {
	font-size: 24px;
	line-height: 30px
}

h2 {
	font-size: 21px;
	line-height: 25px
}

h3 {
	font-size: 20px;
	line-height: 24px
}

h4 {
	font-size: 18px;
	line-height: 23px
}

h5 {
	font-size: 17px;
	line-height: 22px
}

/*Columns*/
.clear {
	clear: both;
}

.one-half {
	width: 48%;
	margin-right: 2%;
	float: left;
}

.one-half.small-half {
	width: 25% !important;
	margin-right: 5%;
}

.one-half.large-half {
	width: 70% !important;
	margin-left: 0% !important;
}

.one-half.last-column {
	width: 48%;
	margin: 0% 0% auto 2%;
	float: left;
}

.one-third {
	width: 31.7%;
	margin-right: 2%;
	float: left;
}

.one-third.last-column {
	width: 31.7%;
	margin: 0% 0% auto 0%;
	float: left;
}

.one-half .content-boxed .content {
	margin-left: 8px;
	margin-right: 8px;
}

.one-third .content-boxed .content {
	margin-left: 8px;
	margin-right: 8px;
}

.one-half .content-boxed {
	margin-right: 0px;
}

.one-half.last-column .content-boxed {
	margin-right: 15px;
	margin-left: 0px;
}

/*Preloader*/
.loader-main {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 999;
	background-color: #FFF;
	will-change: opacity;
	transition: all 250ms ease;
}

.loader-active {
	will-change: opacity;
	transition: all 350ms ease;
	opacity: 1 !important;
}

.loader-inactive {
	will-change: opacity;
	transition: all 350ms ease;
	opacity: 0 !important;
	pointer-events: none !important;
}

.preload-spinner, .preload-spinner {
	animation: preload-spin1 1.2s ease infinite;
	clip: rect(0, 40px, 40px, 20px);
	height: 40px;
	width: 40px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	top: 50%;
	margin-top: -20px;
}

.preload-spinner:after {
	animation: preload-spin2 1.2s ease-in-out infinite;
	clip: rect(0, 40px, 40px, 20px);
	content: '';
	border-radius: 50%;
	height: 40px;
	width: 40px;
	position: absolute;
	border-style: solid;
	border-width: 3px;
	border-color: inherit;
}

@keyframes preload-spin1 {25% {transform: rotate(0deg)}  100% {transform: rotate(185deg)}}
@keyframes preload-spin2 {0% {transform: rotate(-175deg);}	100% {transform: rotate(175deg);}}

.preload-small:after {
	border-width: 1px;
}

.preload-large:after {
	border-width: 10px;
}

.preload-medium:after {
	border-width: 5px;
}

.preload-full:after {
	border-width: 20px;
}

/*Dividers*/
.divider {
	height: 1px;
	display: block;
	background-color: rgba(0, 0, 0, 0.05);
	margin-bottom: 30px;
}

.divider-wide {
	height: 8px;
	display: block;
	background-color: rgba(0, 0, 0, 0.05);
	margin-bottom: 30px;
}

.divider-margins {
	margin: 0px 15px 30px 15px;
}

.divider-icon {
	height: 1px;
	display: block;
	background-color: rgba(0, 0, 0, 0.08);
	margin-bottom: 50px;
}

.content-boxed .divider-icon i {
	background-color: #FFF;
}

.divider-icon i {
	position: absolute;
	width: 50px;
	background-color: #FFF;
	text-align: center;
	margin-top: -8px;
	left: 50%;
	transform: translateX(-50%);
}

.divider-small {
	height: 2px;
	width: 80px;
	margin: auto auto 20px auto;
}

.divider-small-left {
	height: 2px;
	width: 80px;
	margin-bottom: 15px !important;
}

/*Buttons*/
.button {
	color: #FFF;
	display: inline-block;
	margin-bottom: 15px;
	overflow: hidden;
	transition: all 250ms ease;
	font-weight: 800;
	text-transform: uppercase;
}

.button-icon i {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: inherit;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.button:hover {
	text-decoration: none;
}

.button-border {
	border: solid 1px;
}

.button-margins {
	margin-left: 15px;
	margin-right: 15px;
}

.button:active {
	box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.3) !important;
	transition: all 250ms ease;
}

.button-circle {
	border-radius: 65px;
}

.button-round {
	border-radius: 6px;
}

.button-round-small {
	border-radius: 6px;
}

.button-round-medium {
	border-radius: 7px;
}

.button-round-large {
	border-radius: 13px;
}

.button-round-huge {
	border-radius: 25px;
}

.button-xxs {
	padding: 5px 12px;
	font-size: 11px;
}

.button-xs {
	padding: 7px 17px;
	font-size: 11px;
}

.button-s {
	padding: 8px 18px;
	font-size: 12px;
}

.button-m {
	padding: 10px 20px;
	font-size: 12px;
}

.button-l {
	padding: 13px 26px;
	font-size: 15px;
}

.button-xl {
	padding: 15px 30px;
	font-size: 15px;
}

.button-xxl {
	padding: 17px 34px;
	font-size: 17px;
}

.button-full {
	display: block;
	text-align: center;
}

.button-icon-transparent i {
	background-color: transparent !important;
}

.button-icon-transparent {
	padding-left: 40px !important;
}

.button-center-tiny {
	width: 120px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-small {
	width: 150px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-medium {
	width: 180px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-large {
	width: 200px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-huge {
	width: 250px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-icon-left i {
	padding-right: 15px;
}

.button-icon-right i {
	padding-left: 15px
}

.button-icon.button-full {
	text-align: left;
}

.button-xxs.button-icon i {
	width: 36px;
	line-height: 36px
}

.button-xxs.button-circle.button-icon i {
	border-radius: 36px
}

.button-xxs.button-icon {
	padding-left: 50px
}

.button-xxs.button-icon i {
	width: 40px;
	line-height: 33px;
}

.button-xxs.button-3d {
	border-bottom: solid 3px;
}

.button-xs.button-icon i {
	width: 40px;
	line-height: 40px;
}

.button-xs.button-circle.button-icon i {
	border-radius: 40px
}

.button-xs.button-icon {
	padding-left: 52px
}

.button-xs.button-3d {
	border-bottom: solid 4px;
	padding-top: 9px;
}

.button-s.button-icon i {
	width: 40px;
	line-height: 40px;
	font-size: 15px;
}

.button-s.button-circle.button-icon i {
	border-radius: 43px
}

.button-s.button-icon {
	padding-left: 55px
}

.button-s.button-3d {
	border-bottom: solid 4px;
	padding-top: 10px;
}

.button-m.button-icon i {
	width: 45px;
	line-height: 44px;
	font-size: 16px;
}

.button-m.button-circle.button-icon i {
	border-radius: 46px
}

.button-m.button-icon {
	padding-left: 60px
}

.button-m.button-3d {
	border-bottom: solid 4px;
	padding-top: 12px;
}

.button-l.button-icon i {
	width: 52px;
	line-height: 50px;
	font-size: 18px;
}

.button-l.button-circle.button-icon i {
	border-radius: 52px
}

.button-l.button-icon {
	padding-left: 63px
}

.button-l.button-3d {
	border-bottom: solid 4px;
	padding-top: 15px;
}

.button-xl.button-icon i {
	width: 55px;
	line-height: 55px;
	font-size: 18px;
}

.button-xl.button-circle.button-icon i {
	border-radius: 55px
}

.button-xl.button-icon {
	padding-left: 68px
}

.button-xl.button-3d {
	border-bottom: solid 6px;
	padding-top: 17px;
}

.button-xxl.button-icon i {
	width: 60px;
	line-height: 60px;
	font-size: 20px;
}

.button-xxl.button-circle.button-icon i {
	border-radius: 60px
}

.button-xxl.button-icon {
	padding-left: 70px
}

.button-xxl.button-3d {
	border-bottom: solid 8px;
	padding-top: 19px;
}

/*---Checkboxes & Radios---*/
.fac {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
}

.fac label {
	margin: 0em 1em 0em 0em;
	padding-left: 1.5em;
	cursor: pointer;
	font-weight: inherit;
}

.fac>input+label:before, .fac>span::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	margin-top: 0.5px;
}

.fac>input+label:before {
	transition: opacity 150ms ease-in-out;
}

.fac input {
	display: none;
}

.checkboxes-demo .fac {
	display: block;
}

.fac-checkbox>input+label:before, .fac-checkbox-round>input+label:before
	{
	opacity: 1;
}

.fac-checkbox>input:checked+label:before, .fac>input:checked+label:before
	{
	opacity: 0;
}

.fac-radio>input+label:before, .fac-checkbox-o>input+label:before,
	.fac-checkbox-round-o>input+label:before {
	opacity: 0;
}

.fac-radio>input:checked+label:before, .fac-checkbox-o>input:checked+label:before,
	.fac-checkbox-round-o>input:checked+label:before {
	opacity: 1;
}

.fac-default>input+label:before, .fac-default>span::after {
	color: #9d9d9d;
}

.fac-blue>input+label:before, .fac-blue>span::after {
	color: #428bca;
}

.fac-green>input+label:before, .fac-green>span::after {
	color: #5cb85c;
}

.fac-orange>input+label:before, .fac-orange>span::after {
	color: #f0ad4e;
}

.fac-red>input+label:before, .fac-red>span::after {
	color: #d9534f;
}

.fac-checkbox>span::after {
	content: "\f45c";
	opacity: 1;
}

.fac-checkbox>input[type=checkbox]+label:before {
	content: "\f00c";
	color: #FFFFFF !important;
	font-size: 10px !important;
	padding-left: 2px;
}

.fac-checkbox-round>span::after {
	content: "\f111";
}

.fac-checkbox-round>input[type=checkbox]+label:before {
	content: "\f00c";
	color: #FFFFFF !important;
	font-size: 8px !important;
	padding-left: 3px;
}

.fac-radio>span::after {
	content: "\f45c";
}

.fac-radio>input[type=radio]+label:before {
	content: "\f00c";
	color: #FFFFFF !important;
	font-size: 10px !important;
	padding-left: 2px;
}

.fac-radio-full>span::after {
	content: "\f00c";
	font-size: 12px !important;
}

.fac-radio-full>input[type=radio]+label:before {
	content: "\f111";
}

/*Inputs*/
.input-light i {
	color: #FFF;
}

.input-light span {
	color: #FFF !important;
}

.input-light em {
	color: #7c7c7c !important;
}

.input-light input {
	color: #FFF !important;
	border-bottom: solid 1px rgba(255, 255, 255, 0.1) !important;
}

.input-light input::placeholder {
	color: #FFF;
}

.content-boxed .input-style span {
	background-color: #FFF;
}

.menu .input-style span {
	background-color: #FFF;
}

.input-style span {
	background-color: #FFF;
}

.input-style-1 input {
	font-size: 15px;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	background-color: transparent;
	border-bottom: solid 1px rgba(0, 0, 0, 0.05);
	transition: all 250ms ease;
	text-align: center;
}

.input-style-1 textarea {
	font-size: 15px;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 28px;
	padding-right: 15px;
	padding-top: 14px;
	margin-top: -5px;
	margin-bottom: 15px;
	background-color: transparent;
	margin-left: 0px !important;
	padding-left: 0px !important;
	text-indent: 0px !important;
	border-bottom: solid 1px rgba(0, 0, 0, 0.05);
	transition: all 250ms ease;
}

.input-style-1 textarea:focus {
	line-height: 24px;
	height: 150px;
	transition: all 250ms ease;
}

.input-style-1 span {
	color: #2980b9;
	font-weight: 500;
	position: absolute;
	font-size: 10px;
	margin-top: -3px;
	opacity: 0;
	transition: all 250ms ease;
}

.input-style-1 em {
	position: absolute;
	top: 14px;
	font-size: 10px;
	font-style: normal;
	right: 0px;
	color: rgba(0, 0, 0, 0.3);
}

.input-style-1 em i {
	font-size: 12px;
	width: 15px;
	text-align: center;
	margin-top: 7px;
	display: block;
}

.input-style-1 input[type="date"] {
	font-size: 13px;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 15px;
	background-color: transparent;
	border-bottom: solid 1px rgba(0, 0, 0, 0.08);
	transition: all 250ms ease;
	color: #818181;
}

.input-style-1 input[type="date"]::-webkit-inner-spin-button {
	opacity: 0;
}

.input-style-1 input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}

.input-style-1 input[type="date"]::-webkit-clear-button {
	opacity: 0;
}

.input-style-1-active {
	opacity: 1 !important;
}

.input-style-1-inactive {
	color: #cacaca !important;
}

.input-style-1 input:focus, .input-style-1 select:focus {
	border-bottom: solid 1px rgba(0, 0, 0, 1);
}

.input-style-1 select {
	color: #818181;
	border-bottom: solid 1px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	margin-bottom: 15px;
	height: 50px;
	line-height: 50px;
	border-radius: 0px;
	width: 100%;
	box-shadow: none;
	-webkit-appearance: none;
	background-color: transparent;
	font-size: 14px;
}

.input-style-1.has-icon .input-icon {
	position: absolute;
	z-index: 10;
	margin-top: 20px;
	margin-left: 0px;
}

.input-style-1.has-icon input {
	padding-left: 30px;
}

.input-style-1.has-icon span {
	margin-left: 25px;
}

.input-style-1.has-icon .input-style-1-active {
	color: #4A89DC !important;
	transform: translateX(-25px);
	transition: all 150ms ease;
}

input[type="range"] {
	-webkit-appearance: none;
	height: 20px;
	width: 100%;
	outline: none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background: #F26B5E;
	position: relative;
	z-index: 3;
}

input[type="range"]::-webkit-slider-thumb:after {
	content: " ";
	height: 10px;
	position: absolute;
	z-index: 1;
	right: 20px;
	top: 5px;
	background: #ff5b32;
	background: linear-gradient(to right, #f088fc 1%, #AC6CFF 70%);
}
/*Input Style 2*/
.input-style-2 {
	margin-bottom: 15px;
}

.input-style-2 span {
	pointer-events: none;
	color: #1f1f1f !important;
	position: absolute;
	font-size: 13px;
	z-index: 1;
	height: 22px;
	line-height: 20px;
	padding: 2px 5px 2px 5px;
	top: 14px;
	left: 10px;
	right: 10px;
	transition: all 150ms ease;
}

span.input-style-1-active {
	padding-right: 10px !important;
	right: auto !important;
}

.input-style-2 .input-style-1-active {
	color: #4A89DC !important;
	transform: translateY(-25px);
	transition: all 150ms ease;
}

.input-style-2 em {
	position: absolute;
	right: 10px;
	z-index: 2;
	font-size: 10px;
	font-style: normal;
	color: #cacaca;
	line-height: 53px;
}

.input-style-2 em i {
	font-size: 12px !important;
	margin-top: 5px !important;
}

.input-style-2 input, .input-style-2 textarea, .input-style-2 select {
	background-color: transparent;
	border: solid 1px rgba(0, 0, 0, 0.1);
	border-radius: 10px !important;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0px 14px;
	font-size: 13px;
	-webkit-appearance: none;
}

.input-style-2 input[type="date"]::-webkit-inner-spin-button {
	opacity: 0;
}

.input-style-2 input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}

.input-style-2 input[type="date"]::-webkit-clear-button {
	opacity: 0;
}

.input-style-2.has-icon .input-icon {
	position: absolute;
	z-index: 10;
	margin-top: 20px;
	margin-left: 15px;
}

.input-style-2.has-icon input {
	padding-left: 40px;
}

.input-style-2.has-icon span {
	margin-left: 25px;
}

.input-style-2.has-icon .input-style-1-active {
	color: #4A89DC !important;
	transform: translate(-25px, -25px);
	transition: all 150ms ease;
}

.m-0 {
	margin: 0 !important;
}

.mt-0, .my-0 {
	margin-top: 0 !important;
}

.mr-0, .mx-0 {
	margin-right: 0 !important;
}

.mb-0, .my-0 {
	margin-bottom: 0 !important;
}

.ml-0, .mx-0 {
	margin-left: 0 !important;
}

.m-1 {
	margin: 0.25rem !important;
}

.mt-1, .my-1 {
	margin-top: 0.25rem !important;
}

.mr-1, .mx-1 {
	margin-right: 0.25rem !important;
}

.mb-1, .my-1 {
	margin-bottom: 0.25rem !important;
}

.ml-1, .mx-1 {
	margin-left: 0.25rem !important;
}

.m-2 {
	margin: 0.5rem !important;
}

.mt-2, .my-2 {
	margin-top: 0.5rem !important;
}

.mr-2, .mx-2 {
	margin-right: 0.5rem !important;
}

.mb-2, .my-2 {
	margin-bottom: 0.5rem !important;
}

.ml-2, .mx-2 {
	margin-left: 0.5rem !important;
}

.m-3 {
	margin: 1rem !important;
}

.mt-3, .my-3 {
	margin-top: 1rem !important;
}

.mr-3, .mx-3 {
	margin-right: 1rem !important;
}

.mb-3, .my-3 {
	margin-bottom: 1rem !important;
}

.ml-3, .mx-3 {
	margin-left: 1rem !important;
}

.m-4 {
	margin: 1.5rem !important;
}

.mt-4, .my-4 {
	margin-top: 1.5rem !important;
}

.mr-4, .mx-4 {
	margin-right: 1.5rem !important;
}

.mb-4, .my-4 {
	margin-bottom: 1.5rem !important;
}

.ml-4, .mx-4 {
	margin-left: 1.5rem !important;
}

.m-5 {
	margin: 3rem !important;
}

.mt-5, .my-5 {
	margin-top: 3rem !important;
}

.mr-5, .mx-5 {
	margin-right: 3rem !important;
}

.mb-5, .my-5 {
	margin-bottom: 3rem !important;
}

.ml-5, .mx-5 {
	margin-left: 3rem !important;
}

.p-0 {
	padding: 0 !important;
}

.pt-0, .py-0 {
	padding-top: 0 !important;
}

.pr-0, .px-0 {
	padding-right: 0 !important;
}

.pb-0, .py-0 {
	padding-bottom: 0 !important;
}

.pl-0, .px-0 {
	padding-left: 0 !important;
}

.p-1 {
	padding: 0.25rem !important;
}

.pt-1, .py-1 {
	padding-top: 0.25rem !important;
}

.pr-1, .px-1 {
	padding-right: 0.25rem !important;
}

.pb-1, .py-1 {
	padding-bottom: 0.25rem !important;
}

.pl-1, .px-1 {
	padding-left: 0.25rem !important;
}

.p-2 {
	padding: 0.5rem !important;
}

.pt-2, .py-2 {
	padding-top: 0.5rem !important;
}

.pr-2, .px-2 {
	padding-right: 0.5rem !important;
}

.pb-2, .py-2 {
	padding-bottom: 0.5rem !important;
}

.pl-2, .px-2 {
	padding-left: 0.5rem !important;
}

.p-3 {
	padding: 1rem !important;
}

.pt-3, .py-3 {
	padding-top: 1rem !important;
}

.pr-3, .px-3 {
	padding-right: 1rem !important;
}

.pb-3, .py-3 {
	padding-bottom: 1rem !important;
}

.pl-3, .px-3 {
	padding-left: 1rem !important;
}

.p-4 {
	padding: 1.5rem !important;
}

.pt-4, .py-4 {
	padding-top: 1.5rem !important;
}

.pr-4, .px-4 {
	padding-right: 1.5rem !important;
}

.pb-4, .py-4 {
	padding-bottom: 1.5rem !important;
}

.pl-4, .px-4 {
	padding-left: 1.5rem !important;
}

.p-5 {
	padding: 3rem !important;
}

.pt-5, .py-5 {
	padding-top: 3rem !important;
}

.pr-5, .px-5 {
	padding-right: 3rem !important;
}

.pb-5, .py-5 {
	padding-bottom: 3rem !important;
}

.pl-5, .px-5 {
	padding-left: 3rem !important;
}

.m-n1 {
	margin: -0.25rem !important;
}

.mt-n1, .my-n1 {
	margin-top: -0.25rem !important;
}

.mr-n1, .mx-n1 {
	margin-right: -0.25rem !important;
}

.mb-n1, .my-n1 {
	margin-bottom: -0.25rem !important;
}

.ml-n1, .mx-n1 {
	margin-left: -0.25rem !important;
}

.m-n2 {
	margin: -0.5rem !important;
}

.mt-n2, .my-n2 {
	margin-top: -0.5rem !important;
}

.mr-n2, .mx-n2 {
	margin-right: -0.5rem !important;
}

.mb-n2, .my-n2 {
	margin-bottom: -0.5rem !important;
}

.ml-n2, .mx-n2 {
	margin-left: -0.5rem !important;
}

.m-n3 {
	margin: -1rem !important;
}

.mt-n3, .my-n3 {
	margin-top: -1rem !important;
}

.mr-n3, .mx-n3 {
	margin-right: -1rem !important;
}

.mb-n3, .my-n3 {
	margin-bottom: -1rem !important;
}

.ml-n3, .mx-n3 {
	margin-left: -1rem !important;
}

.m-n4 {
	margin: -1.5rem !important;
}

.mt-n4, .my-n4 {
	margin-top: -1.5rem !important;
}

.mr-n4, .mx-n4 {
	margin-right: -1.5rem !important;
}

.mb-n4, .my-n4 {
	margin-bottom: -1.5rem !important;
}

.ml-n4, .mx-n4 {
	margin-left: -1.5rem !important;
}

.m-n5 {
	margin: -3rem !important;
}

.mt-n5, .my-n5 {
	margin-top: -3rem !important;
}

.mr-n5, .mx-n5 {
	margin-right: -3rem !important;
}

.mb-n5, .my-n5 {
	margin-bottom: -3rem !important;
}

.ml-n5, .mx-n5 {
	margin-left: -3rem !important;
}

.m-auto {
	margin: auto !important;
}

.mt-auto, .my-auto {
	margin-top: auto !important;
}

.mr-auto, .mx-auto {
	margin-right: auto !important;
}

.mb-auto, .my-auto {
	margin-bottom: auto !important;
}

.ml-auto, .mx-auto {
	margin-left: auto !important;
}

/*Buttons*/
.button {
	color: #FFF;
	display: inline-block;
	overflow: hidden;
	transition: all 250ms ease;
	font-weight: 800;
	text-transform: uppercase;
}

.button-icon i {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: inherit;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.button:hover {
	text-decoration: none;
}

.button-border {
	border: solid 1px;
}

.button-margins {
	margin-left: 15px;
	margin-right: 15px;
}

.button:active {
	box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.3) !important;
	transition: all 250ms ease;
}

.button-circle {
	border-radius: 65px;
}

.button-round {
	border-radius: 6px;
}

.button-round-small {
	border-radius: 6px;
}

.button-round-medium {
	border-radius: 7px;
}

.button-round-large {
	border-radius: 13px;
}

.button-round-huge {
	border-radius: 25px;
}

.button-xxs {
	padding: 5px 12px;
	font-size: 11px;
}

.button-xs {
	padding: 7px 17px;
	font-size: 11px;
}

.button-s {
	padding: 8px 18px;
	font-size: 12px;
}

.button-m {
	padding: 10px 20px;
	font-size: 12px;
}

.button-l {
	padding: 13px 26px;
	font-size: 15px;
}

.button-xl {
	padding: 15px 30px;
	font-size: 15px;
}

.button-xxl {
	padding: 20px 34px;
	font-size: 17px;
}

.button-full {
	display: block;
	text-align: center;
}

.button-icon-transparent i {
	background-color: transparent !important;
}

.button-icon-transparent {
	padding-left: 40px !important;
}

.button-center-tiny {
	width: 120px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-small {
	width: 150px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-medium {
	width: 180px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-large {
	width: 200px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-center-huge {
	width: 250px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.button-icon-left i {
	padding-right: 15px;
}

.button-icon-right i {
	padding-left: 15px
}

.button-icon.button-full {
	text-align: left;
}


/*Inputs*/
.input-light i{color:#FFF;}
.input-light span{color:#FFF!important;}
.input-light em{color:#7c7c7c!important;}
.input-light input{color:#FFF!important; border-bottom:solid 1px rgba(255,255,255,0.1)!important;}
.input-light input::placeholder{color:#FFF;}


.content-boxed .input-style span{background-color:#FFF;}
.menu .input-style span{background-color:#FFF;}
.input-style span{background-color:#FFF;}
.input-style-1 input{
    font-size:30px;
    font-weight: bold;
    display:block;
    width:100%;
    height:65px;
    line-height:50px;
    margin-bottom:10px;
    background-color:transparent;
    border-bottom:solid 1px #fff;
    transition:all 250ms ease;
}
.input-style-1 input::placeholder{
	color: #bbb;
	font-size: 18px;
}
.input-style-1 textarea{
    font-size:13px;
    display:block;
    width:100%;
    height:50px;
    line-height:28px;
    padding-right:15px;
    padding-top:14px;
    margin-top:-5px;
    margin-bottom:15px;
    background-color:transparent;
    margin-left:0px!important;
    padding-left:0px!important;
    text-indent:0px!important;
    border-bottom:solid 1px rgba(0,0,0,0.05);
    transition:all 250ms ease;
}
.input-style-1 textarea:focus{
    line-height:24px;
    height:150px;
    transition:all 250ms ease;
}
.input-style-1 span{
    color:#2980b9;
    font-weight:500;
    position:absolute;
    font-size:10px;
    margin-top:-3px;  
    opacity:0;
    transition:all 250ms ease;
}
.input-style-1 em{
    position:absolute;
    top:14px;
    font-size:10px;
    font-style:normal;
    right:0px;
    color:rgba(0,0,0,0.3);
}
.input-style-1 em i{
    font-size:12px;
    width:15px;
    text-align:center;
    margin-top:7px;
    display:block;
}
.input-style-1 input[type="date"]{
    font-size:13px;
    display:block;
    width:100%;
    height:50px;
    line-height:50px;
    margin-bottom:15px;
    background-color:transparent;
    border-bottom:solid 1px rgba(0,0,0,0.08);
    transition:all 250ms ease;
    color:#818181;
}
.input-style-1 input[type="date"]::-webkit-inner-spin-button{opacity:0;}
.input-style-1 input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;}
.input-style-1 input[type="date"]::-webkit-clear-button{opacity:0;}

.input-style-1-active{opacity:1!important;}
.input-style-1-inactive{color:#cacaca!important;}
.input-style-1 input:focus, .input-style-1 select:focus{border-bottom:solid 1px rgba(0,0,0,1);}
.input-style-1 select {
    color:#818181;
	border-bottom:solid 1px rgba(0,0,0,0.08); 
    box-sizing: border-box;
    margin-bottom:15px;
    height:50px;
    line-height:50px;
    border-radius:0px;
	width:100%;
    box-shadow: none;
    -webkit-appearance: none;
	background-color:transparent;
    font-size:14px;
}
.input-style-1.has-icon .input-icon{
    position:absolute;
    z-index:10;
    margin-top:20px;
    margin-left:0px;
}
.input-style-1.has-icon input{padding-left:30px;}
.input-style-1.has-icon span{margin-left:25px;}
.input-style-1.has-icon .input-style-1-active{
    color:#4A89DC!important;
    transform:translateX(-25px);
    transition:all 150ms ease;
}
input[type="range"]{
	-webkit-appearance:none;
	height:20px;
    width:100%;
	outline: none;
}
input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:20px;
	height:20px;
	background:#F26B5E;
	position:relative;
	z-index:3;
}
input[type="range"]::-webkit-slider-thumb:after{
	content:" ";
	height:10px;
	position:absolute;
	z-index:1;
	right:20px;
	top:5px;
	background: #ff5b32;
	background: linear-gradient(to right, #f088fc 1%, #AC6CFF 70%);
}


/* custom */

/* 색상 지정 */
.lighter-blue {
	background-color: #BAE7FF;
}

.light-blue {
	background-color: #70C7FC;
}

.primary-blue {
	background-color: #3CBDFE;
}

.dark-blue {
	color: #1A83C4;
}

.darker-blue {
	color: #0262AA;
}

.yellow {
	color: #FEDE3C;
}

.red {
	color: #FE3C7D;
}

.orange {
	color: #FE7D3C;
}

.purple {
	color: #BD3CFE;
}


/* login page */
.login-page-wrap {
	background-image: url(./static/img/fridge-supermarket.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.page-content {
	position: relative;
}

.login {
	font-size: 55px;
	margin-bottom: 50px;
}

.login-content {
	position: absolute;
	top: 48%;
	left: 48%;
	transform: translate(-50%, 200%);
	width: 50%;
}

.bg-highlight {
	background-color: #3CBDFE !important;
}

.wel-logo {
	position: absolute;
	top: 0%;
	left: 0%;
}

.font-25 {
	font-size: 25px;
	border-radius: 15px;
}

.color-black {
	color: #000 !important;
}

.color-white {
	color: #FFF !important;
}

.left-text, .center-text, .right-text, .text-center, .text-right,
	.text-left {
	display: block;
}

.text-left, .left-text {
	text-align: left !important;
	display: block !important;
}

.text-right, .right-text {
	text-align: right !important;
	display: block !important;
}

.text-center, .center-text {
	text-align: center !important;
	display: block;
}

.text-center img, .center-text img {
	margin: 0 auto;
}


/* main page */
.content-wrap {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.content {
	position: absolute;
	bottom: 0px;
	left: 0;
	height: 100%;
	width: 100%;
	transform: translate(0%, 0%);
}

.logo-title {
	background: #3CBDFE;
}

.logo-title img {
	width: 38%;
	margin: 0px auto;
	padding-top: 70px;
	padding-bottom: 50px;
}

.content-inside {
	text-align: center;
	background: #3CBDFE;
}

.content-inside h1 {
	color: #fff;
	font-size: 100px;
	font-weight: 900;
	line-height: 120px;
}

.input-ui h4 {
	margin-top: 100px;
	margin-bottom: 50px;
	font-size: 33px;
	line-height: 45px;
	color: #006fbe;
}

.input-ui {
	background: #fff;
	text-align: center;
}

.phone-check-wrap {
	margin: 0 auto;
}

.phone-num {
	display: inline-block;
}

.check-num {
	display: inline-block;
	margin: 20px auto;
}

.input-ui .phone-num-input {
	padding: 15px;
	width: 400px;
	border-radius: 40px !important;
	font-size: 35px;
	color: #555;
	text-align: center;
	float: left;
	margin-right: 20px;
	background-color: #fff;
  	border: 2px solid #eee;
}

.input-ui .phone-num-input::placeholder {
	font-size: 23px;
	color: #ccc;
	line-height: 80px;
}

.input-ui .check-num-input {
	padding: 15px;
	width: 250px;
	border-radius: 40px !important;
	font-size: 35px;
	color: #555;
	background-color: #fff;
  	border: 2px solid #eee;
	text-align: center;
	float: left;
	margin-right: 20px;
}

.input-ui .check-num-input::placeholder {
	font-size: 23px;
	color: #ccc;
	line-height: 80px;
}

input[type=button], input[type=submit], input[type=reset] {
  	background-color: #3CBDFE;
  	border: 3px solid #3CBDFE;
  	color: #fff;
  	font-size: 23px;
  	padding: 20px 32px;
  	text-decoration: none;
  	cursor: pointer;	
  	float: left;
  	border-radius: 40px !important;
}

.contact-line {
	position: absolute;
	bottom: 0px;
	left: 0px;
	transform: translate(0%, 70%);
	background: #3CBDFE;
	height: 350px;
	width: 100%;
}

.contact-line h3 {
	text-align: center; 
	font-size: 50px;
	line-height: 100px;
	color: #fff;
}

.number-section {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	margin: 50px auto;
	width: 400px;
}

.number {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	background: #eee;
	color: #555;
	font-size: 30px;
	font-weight: 900;
	margin: 10px auto;
}

.barcode-button {
	display: block;
	float: left;
}

.scan-barcode {
  	background: #fff;
	border: 3px solid #FE7D3C;
  	border-radius: 40px;
  	color: #FE7D3C;
  	display: block;
  	font-size: 23px;
  	font-weight: bold;
  	padding: 20px 32px;
  	position: relative;
  	margin-left: 20px;
}


/* menu list */

.card-button {
	display: block;
	position: absolute;
	top: 2%;
	right: 3%;
	background-color: transparent;
	border-radius: 18px;
	border: 2px solid #3CBDFE;
}

.card-button a {
	font-size: 23px !important;
	color: #3CBDFE;
	vertical-align: middle;
	line-height: 30px;
	padding: 18px 30px 5px 30px;
}

.store-name {
	font-size: 30px;
	font-weight: 400;
	text-align: right;
}

.top-logo {
	width: 100%;
	border-bottom: 2px solid #eee;
	height: 110px;
}

.top-logo img {
	width: 25%;
	margin: 35px auto;
}

.top-message {
    padding: 8px;
    border-radius: 7px;
    border: 1px solid #ff8b82;
    background: #fff;
    margin: 20px;
}

.top-message p {
	font-size: 23px;
	text-align: center;
	font-weight: 600;
	color: #F74732;
	margin-bottom: 0px;
	padding: 10px;
}

.menu-list-top {
	height: 850px;
	overflow: auto;
	position: absolute;
	width: 96%;
	margin: 20px;
	top: 230px;
	padding: 20px;
	border: 2px solid #eee;
	border-radius: 15px;
}

.menu-list-bottom {
	height: 380px;
	overflow: auto;
	position: absolute;
	width: 96%;
	margin: 20px;
	top: 1110px;
	padding: 20px;
	border: 2px solid #eee;
	border-radius: 15px;
}

.menu-line {
	display: flex;
	text-align: center;
	padding: 10px;
	margin: 10px auto;
	border-bottom: 1px solid #eee;
}

.menu-grid {
	display: grid;
	text-align: center;
	gap: 70px 30px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	color: #555;
	padding: 60px 0px;
}

.grid-items {
	width: 100%;
	height: 100%;
}

.menu-name h3 {
	font-size: 23px;
	padding-bottom: 20px;
}

.menu-price3 h2 {
	font-size: 33px;
	color: #2e92c4;
}

.menu-price h2 {
	font-size: 33px;
	color: #2e92c4;
}

.menu-name {
	flex: 2.3;
}

.menu-name p {
	margin-bottom: 0 !important;
	font-size: 25px;
	text-align: center;
	color: #555;
	padding-top: 3px;
}

.menu-amount {
	flex: 1;
	display: flex;
}

.menu-amount button, .menu-erase button {
	background-color: #fff;
}

#qua {
	text-align: center;
	width: 100px;
	font-size: 30px;
	color: #555;
	font-weight: 600;
	padding-left: 52px;
	padding-top: 3px;
}

.btm_image img {
	width: 35px;
}

.menu-price {
	flex: 1;
}

.menu-price h3 {
	font-size: 30px;
	color: #555;
	padding-top: 3px;
	padding-left: 23px;
}

.menu-erase {
	flex: 0.5;
}

.total {
	border: 2px solid #eee;
	border-radius: 15px;
	position: absolute;
	width: 96%;
	margin: 20px;
	bottom: 220px;
	padding: 20px;
}

.total .total-num {
	text-align: justify;
	padding-bottom: 20px;
}

.total .total-price {
	text-align: justify;
	padding-top: 20px;
}

.total p {
	font-size: 20px;
	margin-bottom: 0px !important;
}

.total span {
	font-size: 30px;
	font-weight: bold;
}

.total-num {
	border-bottom: 1px solid #eee;
}

.total-num span {
	float: right;
}

.total-price span {
	float: right;
}

.cancel {
	display: inline-block;
	width: 280px;
	height: 170px;
	position: absolute;
	top: 1460px;
	background: #a2a2a2;
	color: #fff;
	border-radius: 15px;
	left: 20px;
	font-size: 30px;
	font-weight: 600;
}

.point-pay {
	display: inline-block;
	width: 360px;
	height: 170px;
	position: absolute;
	top: 1460px;
	background: #70C7FC;
	color: #fff;
	border-radius: 15px;
	right: 400px;
	font-size: 30px;
	line-height: 45px;
	font-weight: 600;
}

.card-pay {
	display: inline-block;
	width: 360px;
	height: 170px;
	position: absolute;
	top: 1460px;
	background: #1A83C4;
	color: #fff;
	border-radius: 15px;
	right: 20px;
	font-size: 30px;
	font-weight: 600;
}



/* modal window */



.modal {

  display: none;

  position: fixed;

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0,0,0,0.7);

}



.modal-content {

  background-color: #fff;

  margin: 28% auto;

  padding: 20px;

  border: 1px solid #888;

  width: 65%;

  height: 53%;

  text-align: center;

  border-radius: 10px;

}



.modal-content .credit-sign {

    margin-top: 50px;

    margin-bottom: 40px;

    font-size: 50px;

    font-weight: 300;

    text-align: center;

    line-height: 65px;

}



.modal-content .credit-sign span {

    font-weight: 900;

    color: #4f9cc9;

}



.modal-content p {

    font-size: 23px;

    margin-bottom: 0px;

}



.total-amount-sign {

    display: flex;

    justify-content: space-between;

    margin: 200px 40px 40px 40px;

}



.modal-content .total-amount-sign h3 {

    color: #555;

    font-weight: 500;

    font-size: 40px;

}



.modal-content .total-amount-sign h2 {

    color: #FE7D3C;

    font-weight: 700;

    font-size: 50px;

}



.modal-cancel {

    width: 100%;

    height: 90px;

    margin-top: 60px;

    background: #a2a2a2;

    border-radius: 13px;

}



.modal-cancel button {

    text-align: center;

    font-size: 33px;

    color: #fff;

    background: #a2a2a2;

    line-height: 87px;

}



.open-sign-pbox {

    border: 1px solid #ddd;

    border-radius: 10px;

    margin: 60px 30px;

    padding: 15px 0px;

}



.modal-button-set {

    display: flex;

    justify-content: space-between;

    margin: 30px;

}



.modal-open {

    background-color: #FE7D3C;

    color: #fff;

    height: 160px;

    width: 98%;

    border-radius: 10px;

}



.modal-close {

    background-color: #4f9cc9;

    color: #fff;

    height: 160px;

    width: 49%;

    border-radius: 10px;

}



.modal-open button {

    text-align: center;

    font-size: 32px;

    color: #fff;
    
    font-weight: 600;

    background: #FE7D3C;

    line-height: 160px;

}



.modal-close button {

    text-align: center;

    font-size: 28px;

    color: #fff;

    background: #4f9cc9;

    line-height: 150px;

}



.payment-method img {

    width: 70%;

    margin: 50px auto;

}



.close {

  color: #aaa;

  float: right;

  font-size: 50px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: black;

  text-decoration: none;

  cursor: pointer;

}



.close2 {

  color: #aaa;

  float: right;

  font-size: 60px;

  font-weight: bold;

}



.close2:hover,

.close2:focus {

  color: black;

  text-decoration: none;

  cursor: pointer;

}



.modal-content .open-sign-info {

    font-size: 26px;

    margin: 20px;

}



.open-sign {

    font-size: 35px;

    line-height: 50px;

    font-weight: 300;

    margin-bottom: 40px;

}



.open-sign span {

    font-weight: 700;

    color: #FE7D3C;

}



.modal-content .open-sign-info span {

    font-weight: 700;

    color: #FE7D3C;

}



.payment-method {

    margin: 20px auto;

    display: inline-block;

}



.credit-card {

    float: left;

    width: 200px;

    height: 200px;

    background: #b1b1b1;

    margin-right: 10px;

    border-radius: 15px;

}



.credit-card:active {

    background: #3CBDFE;

}



.credit-card img {

    width: 70px;

    margin: 50px auto;

}



.credit-card h4 {

    text-align: center;

    font-size: 25px;

    color: #fff;

    margin-top: -20px;

}



.coupon h4 {

    text-align: center;

    font-size: 25px;

    color: #fff;

    margin-top: -20px;

}



.coupon {

    float: left;

    width: 200px;

    height: 200px;

    background: #b1b1b1;

    border-radius: 15px;

}



.coupon:active {

    background: #3CBDFE;

}



.coupon img {

    width: 70px;

    margin: 50px auto;

}



.pay-button2 {

    margin: 30px auto;

    display: inline-block;

}



.pay-button2 .cancel2 {

    float: left;

    width: 120px;

    height: 70px;

    color: #fff;

    font-size: 20px;

    background: #a2a2a2;

    margin-right: 10px;

    border-radius: 10px;

}



.pay-button2 .coupon-pay {

    float: left;

    width: 170px;

    height: 70px;

    color: #fff;

    font-size: 20px;

    background: #3CBDFE;

    border-radius: 10px;

    margin-right: 10px;

}



.pay-button2 .point-pay2 {

    float: left;

    width: 170px;

    height: 70px;

    color: #fff;

    font-size: 20px;

    background: #1A83C4;

    border-radius: 10px;

}



.coupon-input span {

    float: left;

    font-size: 25px;

    color: #555;

    margin-right: 20px;

    line-height: 65px;

}



.coupon-input .coupon-number {

    padding: 15px;

    width: 270px;

    border-radius: 40px !important;

    font-size: 25px;

    color: #555;

    text-align: center;

    float: left;

    background-color: #fff;

      border: 2px solid #eee;

}





/* admin page */



#wrapper {

    height: 100%;

    overflow: hidden;

    width: 100%;

}



.navbar-custom {

    background-color: #3CBDFE;

    box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);

    height: 100px;

    padding: 0 10px 0 0;

    position: fixed;

    left: 0;

    right: 0;

    z-index: 1001;

}



.navbar-custom .container-fluid {

    padding: 0;

}



.logo-box {

    float: left;

    transition: all 0.1s ease-out;

    margin-top: 25px;

    margin-left: 20px;

}



.logo-box .logo {

    line-height: 200px;

}



.logo-box .logo img {

    width: 200px;

    padding-bottom: 15px;

}



.logo-light {

    display: block;

}



.logo-header a {

    display: block;

    font-size: 18px;

    font-weight: 700;

    color: #fff;

    padding-top: 25px;

    padding-right: 20%;

}



.content-page {

    overflow: hidden;

    padding: 70px 15px 65px 15px;

    min-height: 80vh;

    margin-top: 70px;

}



[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {

    cursor: pointer;

}



.btn {

    display: inline-block;

    font-weight: 400;

    line-height: 1.5;

    color: #fff;

    vertical-align: middle;

    cursor: pointer;

    -webkit-user-select: none;

    user-select: none;

    border: 1px solid transparent;

    padding: 0.45rem 0.9rem;

    font-size: .875rem;

    border-radius: 0.15rem;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}



.btn-secondary {

    color: #fff;

    background-color: #6c757d;

    border-color: #6c757d;

}



.d-flex {

    display: flex!important;

}



.flex-wrap {

    flex-wrap: wrap!important;

}



.flex-parent {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

}



.flex-child {

    margin: 0 10px;

}



.form-control {

    display: block;

    width: 100%;

    padding: 0.45rem 0.9rem;

    font-size: .875rem;

    font-weight: 400;

    line-height: 1.5;

    color: #6c757d;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    -webkit-appearance: none;

    appearance: none;

    border-radius: 0.2rem;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}



.form-control, .form-select {

    box-shadow: none;

}



table {

    caption-side: bottom;

    border-collapse: collapse;

}



.table {

    --bs-table-bg: transparent;

    --bs-table-accent-bg: transparent;

    --bs-table-striped-color: #6c757d;

    --bs-table-striped-bg: #f3f7f9;

    --bs-table-active-color: #6c757d;

    --bs-table-active-bg: rgba(0, 0, 0, 0.075);

    --bs-table-hover-color: #6c757d;

    --bs-table-hover-bg: #f3f7f9;

    width: 100%;

    color: #6c757d;

    vertical-align: top;

}



.table .table-light {

    text-align: center;

}



.table>thead {

    vertical-align: bottom;

}



tbody, td, tfoot, th, thead, tr {

    border-color: inherit;

    border-style: solid;

    border-width: 0;

}



tbody {

    border-color: #eee !important;

}



.table-light {

    --bs-table-bg: #f3f7f9;

    --bs-table-striped-bg: #343a40;

    --bs-table-striped-color: #fff;

    --bs-table-active-bg: #e0e4e7;

    --bs-table-active-color: #343a40;

    --bs-table-hover-bg: #e5e9eb;

    --bs-table-hover-color: #343a40;

    color: #343a40;

    border-color: #e0e4e7;

}



.table-bordered>:not(caption)>* {

    border-width: 1px 0;

}



tr {

    line-height: 18px;

}



th {

    font-weight: 700;

    text-align: inherit;

    text-align: -webkit-match-parent;

    vertical-align: middle;

}



th {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    color: #1f1f1f;

    line-height: 45px;

    background-color: #f6f6f6;

}



.table>:not(:last-child)>:last-child>* {

    border-bottom-color: #dee2e6;

}



.mt-1, .my-1 {

    margin-top: 0.25rem !important;

}



.mb-1, .my-1 {

    margin-bottom: 0.25rem !important;

}



.mb-2, .my-2 {

    margin-bottom: 0.5rem !important;

}



.mt-3, .my-3 {

    margin-top: 1rem !important;

}



.mb-3, .my-3 {

    margin-bottom: 1rem !important;

}



label {

    font-weight: 600;

    display: inline-block;

}



.content2 {

    margin: 0px 15px 30px 15px;

}



.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {

    width: 100%;

    padding-right: var(--bs-gutter-x,12px);

    padding-left: var(--bs-gutter-x,12px);

    margin-right: auto;

    margin-left: auto;

}



.row {

    --bs-gutter-x: 24px;

    --bs-gutter-y: 0;

    display: flex;

    flex-wrap: wrap;

    margin-top: calc(var(--bs-gutter-y) * -1);

    margin-right: calc(var(--bs-gutter-x)/ -2);

    margin-left: calc(var(--bs-gutter-x)/ -2);

}



.row>* {

    flex-shrink: 0;

    width: 100%;

    max-width: 100%;

    padding-right: calc(var(--bs-gutter-x)/ 2);

    padding-left: calc(var(--bs-gutter-x)/ 2);

    margin-top: var(--bs-gutter-y);

}



.card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    word-wrap: break-word;

    background-color: #fff;

    background-clip: border-box;

    border: 0 solid #f7f7f7;

    border-radius: 0.25rem;

}



.card {

    box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);

    margin-bottom: 24px;

}



.card-body {

    flex: 1 1 auto;

    padding: 1.5rem 1.5rem;

}



.align-items-center {

    align-items: center!important;

}



.flex-child {

    margin: 0 10px;

}



.waves-effect {

    position: relative;

    cursor: pointer;

    display: inline-block;

    overflow: hidden;

    -webkit-user-select: none;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}



.table-borderless.table-bordered {

    border: none !important;

}



tbody {

    border-color: #eee !important;

}

/* 1280 x 800 */
@media only screen and (max-width: 800px) {

.card-button {
	display: block;
	position: absolute;
	top: 2%;
	right: 3%;
	background-color: transparent;
	border-radius: 18px;
	border: 2px solid #3CBDFE;
}

.card-button a {
	font-size: 23px !important;
	color: #3CBDFE;
	vertical-align: middle;
	line-height: 30px;
	padding: 18px 30px 5px 30px;
}

.top-logo {
	width: 100%;
	border-bottom: 2px solid #eee;
	height: 85px;
}

.top-logo img {
	width: 25%;
	margin: 35px auto;
}

.top-message {
    margin: 25px;
}

.menu-list-top {
	height: 450px;
	overflow: auto;
	position: absolute;
	width: 94%;
	margin: 25px;
	top: 207px;
	padding: 20px;
	border: 2px solid #eee;
	border-radius: 15px;
}

.menu-list-bottom {
	height: 230px;
	overflow: auto;
	position: absolute;
	width: 94%;
	margin: 25px;
	top: 685px;
	padding: 20px;
	border: 2px solid #eee;
	border-radius: 15px;
}

.menu-grid {
	display: grid;
	text-align: center;
	gap: 30px 20px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	color: #555;
	padding: 20px 0px;
}

.menu-list-top .menu-name h3 {
	font-size: 20px;
	padding-bottom: 12px;
}

.menu-list-top .menu-price3 h2 {
	font-size: 30px;
	color: #2e92c4;
}

.menu-list-bottom {
	padding: 10px 20px;
}

.menu-name {
	flex: 2;
}

.menu-name p {
	margin-bottom: 0 !important;
	font-size: 22px;
	text-align: center;
	color: #555;
}

#qua {
	font-size: 23px;
	font-weight: 600;
	padding-left: 45px;
}

.menu-price {
	flex: 1;
	left: 13px;
}

.menu-price h3 {
	font-size: 23px;
	color: #555;
}

.menu-erase {
	top: 4px;
}

.menu-line {
		display: flex;
    	text-align: center;
    	padding: 10px;
    	margin: 0 auto;
    	border-bottom: 1px solid #eee;
	}
	.btm_image img {
		width: 25px;
	}
	.menu-amount input {
		width: 80px;
		font-size: 20px;
	}

.total {
	border: 2px solid #eee;
	border-radius: 15px;
	position: absolute;
	width: 94%;
	margin: 25px;
	bottom: 150px;
	padding: 20px;
}

.total .total-num {
	text-align: justify;
	padding-bottom: 20px;
}

.total .total-price {
	text-align: justify;
	padding-top: 20px;
}

.total p {
	font-size: 18px;
	margin-bottom: 0px !important;
}

.total span {
	font-size: 28px;
	font-weight: bold;
}

.pay-button {
	width: 96%;
	position: absolute;
	bottom: 5px;
	margin: 20px;
	display: flex;
	justify-content: space-between;
}

.cancel {
	height: 130px;
    background: #a2a2a2;
    color: #fff;
    left: 5px;
    border-radius: 15px;
    font-size: 25px;
    font-weight: 600;
    top: -125px;
    flex: 1 1 0;
    width: 30%;
}

.point-pay {
	height: 130px;
    background: #70C7FC;
    color: #fff;
    border-radius: 15px;
    right: 36.8%;
    font-size: 25px;
    line-height: 35px;
    font-weight: 600;
    top: -125px;
    flex: 1 1 0;
    width: 30%;
}

.card-pay {
	height: 130px;
    background: #1A83C4;
    color: #fff;
    border-radius: 15px;
    right: 10px;
    font-size: 25px;
    font-weight: 600;
    top: -125px;
    flex: 1 1 0;
    width: 33%;
}
.modal-content {
	background-color: #fff;
	margin: 20% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	height: 70%;
	text-align: center;
	border-radius: 10px;
}

.modal-content .credit-sign {
	margin-top: 50px;
	margin-bottom: 40px;
	font-size: 48px;
	font-weight: 300;
	text-align: center;
	line-height: 65px;
}

.modal-content .credit-sign span {
	font-weight: 900;
	color: #4f9cc9;
}

.modal-content p {
	font-size: 20px;
	margin-bottom: 0px;
}

.total-amount-sign {
	display: flex;
	justify-content: space-between;
	margin: 130px 40px 30px 40px;
}

.modal-content .total-amount-sign h3 {
	color: #555;
	font-weight: 500;
	font-size: 34px;
}

.modal-content .total-amount-sign h2 {
	color: #FE7D3C;
	font-weight: 700;
	font-size: 45px;
}

.modal-cancel {
	width: 100%;
	height: 80px;
	margin-top: 30px;
	background: #a2a2a2;
	border-radius: 13px;
}

.modal-cancel button {
	text-align: center;
	font-size: 27px;
	color: #fff;
	background: #a2a2a2;
	line-height: 80px;
}

.open-sign-pbox {
	border: 1px solid #ddd;
	border-radius: 10px;
	margin: 40px 20px;
	padding: 13px 0px;
}

.modal-button-set {
	display: flex;
	justify-content: space-between;
	margin: 20px;
}

.modal-open {
	background-color: #FE7D3C;
	color: #fff;
	height: 100px;
	width: 100%;
	border-radius: 10px;
}

.modal-close {
	background-color: #4f9cc9;
	color: #fff;
	height: 200px;
	width: 49%;
	border-radius: 10px;
}

.modal-open button {
	text-align: center;
	font-size: 28px;
	color: #fff;
	background: #FE7D3C;
	line-height: 100px;
}

.modal-close button {
	text-align: center;
	font-size: 28px;
	color: #fff;
	background: #4f9cc9;
	line-height: 200px;
}

.payment-method {
	margin: 20px auto;
	display: inline-block;
}

.payment-method img {
	width: 70%;
	margin: 50px auto;
}

.modal-content .open-sign-info {
	font-size: 24px;
	margin: 20px;
}

.open-sign {
	font-size: 34px;
	line-height: 50px;
	font-weight: 300;
	margin-bottom: 30px;
}

.open-sign span {
	font-weight: 700;
	color: #FE7D3C;
}

.modal-content .open-sign-info span {
	font-weight: 700;
	color: #FE7D3C;
}
}

/* 1024 탭 화면 
@media only screen and (max-width: 770px) {
	.card-button {
		display: block;
		position: absolute;
		top: 1.3%;
		right: 3%;
		background-color: transparent;
		border-radius: 18px;
		border: 2px solid #3CBDFE;
	}
	.card-button a {
		font-size: 20px !important;
		color: #3CBDFE;
		vertical-align: middle;
		line-height: 30px;
		padding: 15px 20px 0px 20px;
	}
	.top-logo {
		width: 100%;
		border-bottom: 2px solid #eee;
		height: 65px;
	}
	.top-logo img {
		width: 20%;
		margin: 25px auto;
	}
	.menu-list-top {
		height: 400px;
		overflow: auto;
		position: absolute;
		width: 96%;
		margin: 20px;
		top: 90px;
		padding: 20px;
		border: 2px solid #eee;
		border-radius: 15px;
	}
	.menu-list-bottom {
		height: 190px;
		overflow: auto;
		position: absolute;
		width: 96%;
		margin: 20px;
		top: 510px;
		padding: 15px;
		border: 2px solid #eee;
		border-radius: 15px;
	}
	.menu-grid {
		display: grid;
		text-align: center;
		gap: 40px 25px;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		color: #555;
		padding: 30px 0px;
	}
	.menu-list-top .menu-name h3 {
		font-size: 20px;
		padding-bottom: 12px;
	}
	.menu-list-top .menu-price h2 {
		font-size: 30px;
		color: #2e92c4;
	}
	.menu-name {
		flex: 2.3;
	}
	.menu-name p {
		margin-bottom: 0 !important;
		font-size: 20px;
		text-align: center;
		color: #555;
		top: 4px;
	}
	.menu-price3 {
		flex: 1;
		left: 13px;
	}
	.menu-price3 h3 {
		font-size: 23px;
		color: #555;
		top: 4px;
	}
	.menu-line {
		display: flex;
    	text-align: center;
    	padding: 10px;
    	margin: 0 auto;
    	border-bottom: 1px solid #eee;
	}
	.btm_image img {
		width: 25px;
	}
	.menu-amount input {
		width: 80px;
		font-size: 20px;
	}
	.total {
		border: 2px solid #eee;
		border-radius: 15px;
		position: absolute;
		width: 96%;
		margin: 20px;
		bottom: 137px;
		padding: 20px;
	}
	.total .total-num {
		text-align: justify;
		padding-bottom: 15px;
	}
	.total .total-price {
		text-align: justify;
		padding-top: 15px;
	}
	.total p {
		font-size: 20px;
		margin-bottom: 0px !important;
	}
	.total span {
		font-size: 25px;
		font-weight: bold;
	}
	.pay-button {
		width: 96%;
		position: absolute;
		bottom: 5px;
		margin: 20px;
	}
	.cancel {
		display: inline-block;
		width: 230px;
		height: 115px;
		position: absolute;
		background: #a2a2a2;
		color: #fff;
		left: 0px;
		border-radius: 15px;
		font-size: 25px;
		font-weight: 600;
		bottom: -5px;
	}
	.point-pay {
		display: inline-block;
		width: 225px;
		height: 115px;
		position: absolute;
		background: #70C7FC;
		color: #fff;
		border-radius: 15px;
		right: 260px;
		font-size: 25px;
		line-height: 35px;
		font-weight: 600;
		bottom: -5px;
	}
	.card-pay {
		display: inline-block;
		width: 240px;
		height: 115px;
		position: absolute;
		background: #1A83C4;
		color: #fff;
		border-radius: 15px;
		right: 0px;
		font-size: 25px;
		font-weight: 600;
		bottom: -5px;
	}
	.modal-content {
		background-color: #fff;
		margin: 20% auto;
		padding: 20px;
		border: 1px solid #888;
		width: 80%;
		height: 70%;
		text-align: center;
		border-radius: 10px;
	}
	.modal-content .credit-sign {
		margin-top: 50px;
		margin-bottom: 40px;
		font-size: 48px;
		font-weight: 300;
		text-align: center;
		line-height: 65px;
	}
	.modal-content .credit-sign span {
		font-weight: 900;
		color: #4f9cc9;
	}
	.modal-content p {
		font-size: 20px;
		margin-bottom: 0px;
	}
	.total-amount-sign {
		display: flex;
		justify-content: space-between;
		margin: 130px 40px 30px 40px;
	}
	.modal-content .total-amount-sign h3 {
		color: #555;
		font-weight: 500;
		font-size: 36px;
	}
	.modal-content .total-amount-sign h2 {
		color: #FE7D3C;
		font-weight: 700;
		font-size: 40px;
	}
	.modal-cancel {
		width: 100%;
		height: 80px;
		margin-top: 30px;
		background: #a2a2a2;
		border-radius: 13px;
	}
	.modal-cancel button {
		text-align: center;
		font-size: 27px;
		color: #fff;
		background: #a2a2a2;
		line-height: 80px;
	}
	.open-sign-pbox {
		border: 1px solid #ddd;
		border-radius: 10px;
		margin: 40px 20px;
		padding: 13px 0px;
	}
	.modal-button-set {
		display: flex;
		justify-content: space-between;
		margin: 20px;
	}
	.modal-open {
		background-color: #FE7D3C;
		color: #fff;
		height: 200px;
		width: 49%;
		border-radius: 10px;
	}
	.modal-close {
		background-color: #4f9cc9;
		color: #fff;
		height: 200px;
		width: 49%;
		border-radius: 10px;
	}
	.modal-open button {
		text-align: center;
		font-size: 28px;
		color: #fff;
		background: #FE7D3C;
		line-height: 200px;
	}
	.modal-close button {
		text-align: center;
		font-size: 28px;
		color: #fff;
		background: #4f9cc9;
		line-height: 200px;
	}
	.payment-method {
		margin: 20px auto;
		display: inline-block;
	}
	.payment-method img {
		width: 70%;
		margin: 50px auto;
	}
	.modal-content .open-sign-info {
		font-size: 24px;
		margin: 20px;
	}
	.open-sign {
		font-size: 34px;
		line-height: 50px;
		font-weight: 300;
		margin-bottom: 30px;
	}
	.open-sign span {
		font-weight: 700;
		color: #FE7D3C;
	}
	.modal-content .open-sign-info span {
		font-weight: 700;
		color: #FE7D3C;
	}
}
*/

/* myModal3 */

.easypay-logos {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
    padding: 70px;
    place-items: center;
}

.easypay-logos img {
	width: 200px;
}

.easypay-alert {
	background: #2dabe9;
	border-radius: 15px;
	width: 90%;
	margin: 0 auto;
	padding: 25px;
}

.easypay-alert h2 {
	font-size: 45px;
	font-weight: 300;
	color: #fff;
	line-height: 70px;
}

.easypay-alert h2 span {
	font-weight: 700;
	color: #ffff80;
}

.modal-content10 {
    background-color: #fff;
    margin: 28% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
    height: 55%;
    text-align: center;
    border-radius: 10px;
}

.modal-content10 .alipay {
	width: 250px;
	margin-left: 30px;
}

.modal-content10 .wechat {
	width: 350px;
	margin: -20px 70px 50px;
}

.title-easypay {
	text-align: center;
	margin-top: 50px;
}

.title-easypay h3 {
	font-size: 50px;
}

.easypay-h3 {
	margin: 80px 30px;
    color: crimson;
}

.easypay-h3 h3 {
	font-size: 50px;
    margin: 30px 0px;
}

@media only screen and (max-width: 820px) {
	.easypay-logos {
		display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        padding: 40px 10px;
        place-items: center;
	}

.easypay-logos img {
	width: 130px;
}

.easypay-alert {
	background: #2dabe9;
	border-radius: 15px;
	width: 90%;
	margin: 15px auto;
	padding: 25px;
}

.easypay-alert h2 {
	font-size: 35px;
    font-weight: 300;
    color: #fff;
    line-height: 55px;
}

.easypay-alert h2 span {
	font-weight: 700;
	color: #ffff80;
}

.modal-content10 {
    background-color: #fff;
    margin: 28% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
    height: 57%;
    text-align: center;
    border-radius: 10px;
}
.modal-content10 .alipay {
	width: 200px;
	margin-left: 40px;
}

.modal-content10 .wechat {
	width: 250px;
	margin: -20px 40px 50px;
}

.title-easypay {
	text-align: center;
    margin-top: 35px;
}

.title-easypay h3 {
	font-size: 40px;
	margin-top: 20px;
}

.easypay-h3 {
	margin: 50px 30px;
    color: crimson;
}

.easypay-h3 h3 {
	font-size: 35px;
    margin: 30px 0px;
}

}