body {
    margin: 0px;
    padding: 0px;
    font-family: 'S-CoreDream-5Medium', sans-serif;
    overflow-x: hidden;
    height: 100%;
}

html {
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}

p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a:hover {
    outline: none;
    text-decoration: none;
    color: #fff;
    opacity: 0.6;
}

input:hover, input:focus, input:active {
    outline: none;
}

ul {
    margin: 0px;
    padding: 0px;
}

ul li {
    list-style-type: none;
}

ol {
    margin: 0px;
    padding: 0px;
}

img {
    border: 0px;
    vertical-align: middle;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

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

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

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

.mt-1 {
    margin-top: 1px !important;
}

.mt-2 {
    margin-top: 2px !important;
}

.mt-3 {
    margin-top: 3px !important;
}

.mt-4 {
    margin-top: 4px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-6 {
    margin-top: 6px !important;
}

.mt-7 {
    margin-top: 7px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-9 {
    margin-top: 9px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-11 {
    margin-top: 11px !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-13 {
    margin-top: 13px !important;
}

.mt-14 {
    margin-top: 14px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-17 {
    margin-top: 17px !important;
}

.mt-18 {
    margin-top: 18px !important;
}

.mt-19 {
    margin-top: 19px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-21 {
    margin-top: 21px !important;
}

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

.ml-1 {
    margin-left: 1px !important;
}

.ml-2 {
    margin-left: 2px !important;
}

.ml-3 {
    margin-left: 3px !important;
}

.ml-4 {
    margin-left: 4px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-6 {
    margin-left: 6px !important;
}

.ml-7 {
    margin-left: 7px !important;
}

.ml-8 {
    margin-left: 8px !important;
}

.ml-9 {
    margin-left: 9px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-11 {
    margin-left: 11px !important;
}

.ml-12 {
    margin-left: 12px !important;
}

.ml-13 {
    margin-left: 13px !important;
}

.ml-14 {
    margin-left: 14px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-16 {
    margin-left: 16px !important;
}

.ml-17 {
    margin-left: 17px !important;
}

.ml-18 {
    margin-left: 18px !important;
}

.ml-19 {
    margin-left: 19px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

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

.mr-1 {
    margin-right: 1px !important;
}

.mr-2 {
    margin-right: 2px !important;
}

.mr-3 {
    margin-right: 3px !important;
}

.mr-4 {
    margin-right: 4px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-6 {
    margin-right: 6px !important;
}

.mr-7 {
    margin-right: 7px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

.mr-9 {
    margin-right: 9px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-11 {
    margin-right: 11px !important;
}

.mr-12 {
    margin-right: 12px !important;
}

.mr-13 {
    margin-right: 13px !important;
}

.mr-14 {
    margin-right: 14px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-16 {
    margin-right: 16px !important;
}

.mr-17 {
    margin-right: 17px !important;
}

.mr-18 {
    margin-right: 18px !important;
}

.mr-19 {
    margin-right: 19px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

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

.mb-1 {
    margin-bottom: 1px !important;
}

.mb-2 {
    margin-bottom: 2px !important;
}

.mb-3 {
    margin-bottom: 3px !important;
}

.mb-4 {
    margin-bottom: 4px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-6 {
    margin-bottom: 6px !important;
}

.mb-7 {
    margin-bottom: 7px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-9 {
    margin-bottom: 9px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-11 {
    margin-bottom: 11px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-13 {
    margin-bottom: 13px !important;
}

.mb-14 {
    margin-bottom: 14px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-17 {
    margin-bottom: 17px !important;
}

.mb-18 {
    margin-bottom: 18px !important;
}

.mb-19 {
    margin-bottom: 19px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-21 {
    margin-bottom: 21px !important;
}

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

.pt-1 {
    padding-top: 1px !important;
}

.pt-2 {
    padding-top: 2px !important;
}

.pt-3 {
    padding-top: 3px !important;
}

.pt-4 {
    padding-top: 4px !important;
}

.pt-5 {
    padding-top: 5px !important;
}

.pt-6 {
    padding-top: 6px !important;
}

.pt-7 {
    padding-top: 7px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-9 {
    padding-top: 9px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-11 {
    padding-top: 11px !important;
}

.pt-12 {
    padding-top: 12px !important;
}

.pt-13 {
    padding-top: 13px !important;
}

.pt-14 {
    padding-top: 14px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pt-17 {
    padding-top: 17px !important;
}

.pt-18 {
    padding-top: 18px !important;
}

.pt-19 {
    padding-top: 19px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pb-1 {
    padding-bottom: 1px !important;
}

.pb-2 {
    padding-bottom: 2px !important;
}

.pb-3 {
    padding-bottom: 3px !important;
}

.pb-4 {
    padding-bottom: 4px !important;
}

.pb-5 {
    padding-bottom: 5px !important;
}

.pb-6 {
    padding-bottom: 6px !important;
}

.pb-7 {
    padding-bottom: 7px !important;
}

.pb-8 {
    padding-bottom: 8px !important;
}

.pb-9 {
    padding-bottom: 9px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-11 {
    padding-bottom: 11px !important;
}

.pb-12 {
    padding-bottom: 12px !important;
}

.pb-13 {
    padding-bottom: 13px !important;
}

.pb-14 {
    padding-bottom: 14px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

.pb-17 {
    padding-bottom: 17px !important;
}

.pb-18 {
    padding-bottom: 18px !important;
}

.pb-19 {
    padding-bottom: 19px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-21 {
    padding-bottom: 21px !important;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clearfix {
    clear: both;
    overflow: hidden;
}

.wrapper {
    margin: 0px auto;
}

.container {
    max-width: 100%;
    padding: 0;
}

.container.clear {
    padding: 0;
}

.pos-re {
    position: relative !important;
}

.pos-ab {
    position: absolute !important;
}

.pos-fix {
    position: fixed !important;
}

.pointer {
    cursor: pointer;
}

#spinner_overay {
    background: #ffffff;
    position: fixed;
    height: 100%;
    z-index: 5000;
    opacity: .8;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    height: 55px;
    width: 55px;
    animation: rotate 0.8s infinite linear;
    border: 5px solid #e02a2a;
    border-right-color: transparent;
    border-radius: 50%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.dialog-address {
    position: fixed;
    display: none;
    top: 20%;
    background: #fff;
    z-index: 3000;
    left: 0%;
    right: 0%;
    margin-left: 0.8%;
    bottom: 20%;
    width: 500px;
    margin: 0 auto;
}

.dialog-header {
    width: 100%;
    height: 30px;
    z-index: 10;
    padding-top: 15px;
}

.dialog-header .tag-close {
    width: 15px;
    height: 15px;
    float: right;
    margin-right: 15px;
}

.dialog-title {
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

.dialog-title .tag-title {
    font-size: 17px;
    color: #222222;
    font-weight: bold;
    line-height: 1.4;
}

.dialog-content {
    width: 100%;
    margin-top: 24px;
    text-align: center;
    padding: 0px 15px;
    font-size: 15px;
    word-wrap: break-word;
    line-height: 1.3;
}

.dialog-footer {
    width: 100%;
    padding: 25px 22px 30px 22px;
}

.dialog-footer .btn {
    background: #df322b;
    text-align: center;
    font-size: 16px;
    padding: 10px 0px;
    height: 42px;
    width: 100%;
    color: #fff;
    border-radius: 0;
}

.dialog-footer .btn-1 {
    width: 49%;
    height: 42px;
    padding: 12px 0px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.dialog-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2000;
}

textarea {
    height: 100px;
    width: 500px;
    border: 1px solid #999999;
    color: #222222;
    background: none;
    padding: 10px;
    font-size: 15px;
    font-weight: 400;
}

textarea:focus {
    outline: none;
    border: 1px solid #999999;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]+label {
    background: url('../images/icon/ico_checkbox_unselected.png') no-repeat;
    height: 17px;
    width: 17px;
    background-size: auto 100%;
    margin: 0;
}

input[type=checkbox]:checked+label {
    background: url('../images/icon/ico_checkbox_selected.png') no-repeat;
    height: 17px;
    width: 17px;
    background-size: auto 100%;
    margin: 0;
}

input[type=radio] {
    display: none;
}

input[type=radio]+label {
    background: url('../images/ico_radio_unselected.png') no-repeat;
    height: 20px;
    width: 25px;
    background-size: auto 100%;
    margin: 0;
}

input[type=radio]:checked+label {
    background: url('../images/ico_radio_selected.png') no-repeat;
    height: 20px;
    width: 25px;
    background-size: auto 100%;
    margin: 0;
}

input[type=text] {
    height: 40px;
    width: 100%;
    border: 1px solid #999999;
    color: #222222;
    background: none;
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 3px;
}

input[type=number] {
    height: 40px;
    width: 100%;
    border: 1px solid #999999;
    color: #222222;
    background: none;
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 400;
}

input[type=password] {
    height: 40px;
    width: 500px;
    border: 1px solid #999999;
    color: #222222;
    background: none;
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 400;
}

select {
    height: 40px;
    width: 300px;
    border: 1px solid #999999;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    outline: none;
    padding: 0 10px 0 20px;
}

.btn-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-content.right {
    justify-content: flex-end;
}

.btn-order {
    width: 60px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #ff514e;
    font-size: 13px;
    color: #ff514e;
    background-color: #fff;
}

.btn-order.active {
    color: #fff;
    background-color: #ff514e;
}

.common-btn {
    height: 44px;
    background-color: #ff7c7f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    padding: 10px 22px;
}

.common-btn-wide {
    width: 250px;
    height: 50px;
    background-color: #ff7c7f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding: 10px 20px;
    border-radius: 15px;
}

.common-btn.border-btn {
    width: 180px;
    height: 40px;
    font-size: 17px;
    border: 1px solid #222222;
    background-color: #fff;
    color: #222222;
    font-weight: normal;
}

.small-btn {
    width: 80px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    border-radius: 3px;
}

.small-btn.success {
    background-color: #36a3f7;
}

.small-btn.danger {
    background-color: #f4516c;
}

.small-btn.info {
    background-color: #34bfa3;
}

.label-title {
    font-size: 15px;
    color: #222222;
}

label {
    padding: 0;
    margin: 0;
}



#contain {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#login-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: -100px;
}

#login-container .title-1 {
    font-size: 50px;
    color: #ff7e7d;
    font-weight: bold;
    margin-bottom: 20px;
}

#login-container .title-2 {
    font-size: 30px;
    color: #222222;
    font-weight: bold;
    margin-bottom: 60px;
}

#login-container .input-content {
    width: 100%;
    margin-bottom: 30px;
}

#login-container .input-content .input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    margin-left: -12px;
}

#login-container .input-content .input-row:last-child {
    margin-bottom: 0;
}

#login-container .input-content label {
    font-size: 20px;
    color: #222222;
    font-weight: bold;
    margin-right: 15px;
    text-align: right;
    width: 5%;
}

#login-container .comment {
    font-size: 15px;
    color: #979797;
    margin-bottom: 100px;
}

.container-content {
    width: 100%;
    height: auto;
}

.main-content {
    padding: 100px;
}

.main-content .menu-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
}

.main-content .menu-row:last-child {
    margin-bottom: 0;
}

.main-content .menu-row .menu {
    width: calc(33.33% - 8px);
    height: 10.5vw;
    margin-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #222222;
    font-weight: bold;
    border-radius: 15px;
    border: 4px solid #db7878;
}

.main-content .menu-row .menu:last-child {
    margin-right: 0;
}

.franchise-content {
    padding: 50px 200px;
}

.franchise-content .photo {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.franchise-content .photo .photo-content {
    display: flex;
    align-items: center;
}

.franchise-content .photo .photo-content .image-item {
    position: relative;
    width: calc(20% - 3px);
    height: 182px;
    margin-right: 15px;
}

.img-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    color: #000;
    display: none;
}

.img-close.show {
    display: block;
}

.franchise-content .photo .photo-content .image-item img {
    width: 100%;
    height: 100%
}

.franchise-content .photo .photo-content .image-item:last-child {
    margin-right: 0;
}

.input-row {
    width: 100%;
    display: flex;
    align-items: center;
}

.franchise-content .photo-1 {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px
}

.franchise-content .photo-1 .item {
    width: 300px;
    height: 400px;
}

.franchise-content .other-txt {
    font-size: 12px;
    color: #949494;
}

.menu-content {
    padding: 50px 200px;
    height: 100%;
    overflow-y: auto;
}

.menu-list {
    width: 100%;
    height: auto;
}

.menu-row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.menu-row:last-child {
    margin-bottom: 0;
}

.menu-item {
    width: calc(50% - 7px);
    margin-right: 14px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item:last-child {
    margin-right: 0;
}

.menu-item .image-item {
    width: 33.33%;
    display: flex;
    align-items: center;
}

.menu-item .image-item .thumnail-image {
    width: 90%;
    height: 153px;
}

.menu-item .menu-info {
    width: 66.66%;
}

.menu-item .menu-info .menu-title {
    font-size: 15px;
    font-weight: bold;
    color: #222222;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    line-height: 1.5;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.menu-item .menu-info .detail-title {
    font-size: 13px;
    color: #222222;
    margin-top: 3px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.menu-item .menu-info .menu-price {
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    margin-top: 5px;
}

.btn-day {
    width: 175px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #222222;
    border-radius: 30px;
    cursor: pointer;
    font-size: 15px;
    color: #222222;
    background-color: #fff;
}

.btn-day.active {
    background-color: #fff5f5;
    border: 1px solid #ff3434;
    color: #ff3434;
}

.btn-groups {
    width: 100%;
    margin-bottom: 30px;
}

.btn-groups .btn-row {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.btn-groups .btn-row:last-child {
    margin-bottom: 0;
}

.btn-groups .btn-row .item {
    width: calc(25% - 20px);
    height: 35px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #bbbbbb;
    font-size: 13px;
    color: #565656;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #f9f9f9;
}

.btn-groups .btn-row .item.active {
    color: #fff;
    background-color: #ff7e7d;
    border: 1px solid #ff7e7d;
}

.btn-groups .btn-row .item.disable {
    color: #fff;
    background-color: #acacac;
    border: 1px solid #acacac;
}

.btn-groups .btn-row .item:last-child {
    margin-right: 0;
}

.bootstrap-timepicker-widget .bootstrap-timepicker-hour, .bootstrap-timepicker-widget .bootstrap-timepicker-meridian, .bootstrap-timepicker-widget .bootstrap-timepicker-minute, .bootstrap-timepicker-widget .bootstrap-timepicker-second {
    padding: 0;
}

.special-time {
    width: 100%;
    margin-bottom: 100px;
}

.special-time .item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.special-time .item .date-icon {
    width: 25px;
    height: 25px;
    margin-right: 15px;
}

.qrcode-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qrcode-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.qrcode-item {
    width: 290px;
    margin: 0px 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.qrcode-item:last-child {
    margin-right: 0;
}

.qrcode-item .background-qr {
    width: 290px;
    height: 360px;
}

.qrcode-item .qr-code {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.qrcode-item .qr-code img {
    width: 100px;
}

.qrcode-item .qrcode-txt {
    font-size: 10px;
    color: #222222;
    font-weight: bold;
    text-align: center;
    margin-top: 3px;
    width: 127px;
    padding: 0 5px;
}


.order-detail {
    display: flex;
    flex-direction: column;
    padding: 20px 75px;
    border: 1px solid #222222;
}

.order-detail-item-1 {
    margin-right: 25px;
}

.order-detail-item-2 {
    width: 24%;
}

.order-detail-item-3 {
    display: flex;
    margin-bottom: 10px;
}

.order-detail-item-3 .item-1 {
    width: 55%;
}

.order-detail-item-3 .item-2 {
    width: 15%;
    text-align: right;
}

.order-detail-item-3 .item-3 {
    width: 30%;
    text-align: right;
}

.detail-header {
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    margin-bottom: 15px;
    display: inline-block;
    padding: 4px 15px;
    border: 1px solid #222222;
    border-radius: 20px;
}

.order-time {
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-time .plus-minus {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c4c4c4;
    background-color: #f7f7f7;
    font-size: 20px;
    color: #222222;
    font-weight: bold;
    border-radius: 50%;
}

.order-time .count {
    width: 50px;
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    text-align: center;
}

.order-select-text {
    font-size: 15px;
    color: #222222;
}

.order-select-text.active {
    color: #de322a;
    font-weight: bold;
}

.order-content {
    width: 100%;
    height: auto;
}

.order-content-1 {
    width: 100%;
    height: calc(100% - 62px);
    display: flex;
    align-items: flex-start;
}

.order-content-1 .left-content,
.order-content-1 .left-content2 {
    width: 120px;
    height: 100%;
}

.order-content-1 .left-content .item,
.order-content-1 .left-content2 .item  {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c8c8c8;
    flex-direction: column;
    font-size: 15px;
    color: #505050;
    cursor: pointer;
    margin-bottom: 7px;
}

.order-content-1 .left-content .item:last-child,
.order-content-1 .left-content2 .item:last-child {
    margin-bottom: 0;
}

.order-content-1 .left-content .item.active:last-child,
.order-content-1 .left-content2 .item.active:last-child {
    margin-bottom: 0;
}

.order-content-1 .left-content .item.active,
.order-content-1 .left-content2 .item.active {
    border: 5px solid #222222;
    background-color: #fff;
    color: #222222;
}

.order-content-1 .right-content,
.order-content-1 .right-content2 {
    width: calc(100% - 150px);
    height: 100%;
    margin-left: 30px;
    overflow-y: auto;
}

.order-content-1 .right-content .item,
.order-content-1 .right-content2 .item {
    width: 100%;
    height: auto;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    border-radius: 10px;
    border: 1px solid #777777;
    margin-bottom: 10px;
}

.order-content-1 .right-content .item .left-item,
.order-content-1 .right-content2 .item .left-item {
    width: 10%;
    display: flex;
    align-items: center;
}

.order-content-1 .right-content .item .middle-item,
.order-content-1 .right-content2 .item .middle-item {
    width: 75%;
    padding: 0 30px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.order-content-1 .right-content .item .right-item,
.order-content-1 .right-content2 .item .right-item  {
    width: 15%;
    height: auto;
}

.order-content-1 .right-content .item:last-child,
.order-content-1 .right-content2 .item:last-child {
    margin-bottom: 0;
}

.order-date {
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    margin-bottom: 25px;
}

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

.order-row:last-child {
    margin-bottom: 0;
}

.order-item {
    width: calc(33.33% - 12px);
    margin-right: 12px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    margin-bottom: 10px;
}

.order-item.active {
    background-color: #e0e0e0;
}

.order-item.cancel {
    border: 4px solid #e8b6e9;
}


.order-item:last-child {
    margin-right: 0;
}

.order-item-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-between;
}

.order-item-1:last-child {
    margin-bottom: 0;
}

.order-txt {
    font-size: 13px;
}

.order-txt.gray {
    color: #949494;
}

.order-txt.black {
    color: #222222;
}

.order-txt.red {
    color: #de322a;
}

.order-icon {
    width: 50px;
    height: 50px;
}

.order-txt-content {
    width: 70%;
}

.order-status {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}

.order-cancel-btn {
    width: 76px;
    height: 24px;
    border-radius: 6px;
    background-color: #df514e;
    font-size: 13px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-status.pending {
    background-color: #67c0e6
}

.order-status.confirm {
    background-color: #57b536;
}

.order-status.finish {
    background-color: #0b0b0b;
}

.order-status.cancel-req {
    background-color: #ff6464;
}

.order-status.cancel-finish {
    background-color: #a0a0a0;
}

.order-status.confirm {
    background-color: #57b536;
}

.order-status.output {
    background-color: #fff;
    border: 4px solid #222222;
    color: #222222;
}

.order-text-width {
    font-size: 15px;
    color: #222222;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    line-height: 1.5;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    letter-spacing: 0.5px;
}

.reservation-calendar {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.reservation-calendar .date-icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.reservation-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.reservation-row:last-child {
    margin-bottom: 0;
}

.reservation-item {
    width: calc(50% - 15px);
    margin-right: 30px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    background-color: #fff;
}

.reservation-item.active {
    background-color: #e0e0e0;
}

.reservation-item.cancel {
    border: 4px solid #e8b6e9;
}

.reservation-item:last-child {
    margin-right: 0;
}

.reservation-item-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reservation-item-2 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.menu-group-empty {
    margin-top: 200px;
    font-size: 26px;
    color: #000;
    text-align: center;
}

.menu-group-item {
    width: 530px;
    border: 1px solid #000;
    padding: 21px 18px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.menu-group-item .left-item {
    width: 88%;
}

.menu-group-item .left-item-1 {
    width: 88%;
    display: flex;
    align-items: center;
}

.menu-group-item .left-item-1 .menu-txt-1 {
    font-size: 18px;
    color: #000;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    margin-bottom: 15px;
}

.menu-group-item .left-item-1 .menu-txt-2 {
    font-size: 16px;
    color: #515151;
}

.menu-group-item .right-item {
    width: 12%;
    text-align: right;
    cursor: pointer;
    position: relative;
}

.menu-group-item .title {
    font-size: 18px;
    color: #000;
    margin-bottom: 25px;
}

.menu-group-item .menu-txt {
    font-size: 16px;
    color: #515151;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

#menu-opiton {
    position: absolute;
    text-align: center;
    width: 160px;
    background-color: #fff;
    border: 1px solid #000;
    z-index: 100;
    display: none;
}

#menu-opiton .option-header {
    width: 100%;
    text-align: right;
    padding: 7px 15px 15px 15px;
}

#menu-opiton .option-txt {
    font-size: 13px;
    color: #515151;
    margin-bottom: 20px;
}

.menu-subguid {
    font-size: 20px;
    color: #515151;
    margin-bottom: 50px;
}

.main-menu-search {
    width: 530px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.main-menu-search .search-item {
    width: 70%;
    height: 40px;
    position: relative;
}

.main-menu-search .search-item .icon-search {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 5px;
    left: 10px;
}

.main-menu-search .search-item input {
    width: 100%;
    height: 100%;
    padding-left: 40px;
}

.main-menu-search .search-btn {
    width: 30%;
}

.guide-txt {
    font-size: 15px;
    color: #222222;
    width: 530px;
    margin-bottom: 30px;
}


.switch {
    width: 42px;
    height: 21px;
    position: relative;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 2px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #f64f4c;
}

input:focus+.slider {
    box-shadow: 0 0 1px #f64f4c;
}

input:checked+.slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.time-set-calculate {
    width: 176px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #c4c4c4;
}

.time-set-calculate .calc-item {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #a1a1a1;
    font-weight: bold;
    cursor: pointer;
    background-color: #f3f3f3;
}

.time-set-calculate .minute {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #222222;
}

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 230px;
    background-color: #dcdcdc;
    color: #222222;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    font-size: 15px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #dcdcdc transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.operating-time-item-delete {
    text-align: right;
    padding: 40px 0 20px 0;
    font-size: 13px;
    color: #9f9f9f;
    text-decoration: underline;
}

.operating-time-item-add {
    font-size: 14px;
    color: #ff7e7d;
}

.sequence-empty {
    font-size: 20px;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 300px;
}

.sequence-empty:last-child {
    margin-top: 8px;
}

.sequence-qr {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.sequence-qr-content {
    display: flex;
    align-items: center;
}

.sequence-qr-content .qr-content {
    border: 5px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
    width: 240px;
    height: 294px;
    padding: 20px 18px;
}

.sequence-qr-content .qr-content .title {
    font-size: 13px;
    color: #222222;
    text-align: center;
}

.sequence-qr-content .qr-content .qrcode-div {
    width: 100%;
    height: 110px;
    text-align: center;
}

.sequence-qr-content .qr-content .qrcode-div #qrcode {
    display: inline-block;
    width: 110px;
    height: 100%;
}

.sequence-qr-content .qr-content .text-content {
    width: 100%;
    height: 50px;
    font-size: 11px;
    color: #222222;
    word-break: break-all;
}

.save-btn {
    width: 112px;
    height: 28px;
}

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

.switch {
    width: 42px;
    height: 21px;
    position: relative;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 2px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #cf000e;
}

input:focus+.slider {
    box-shadow: 0 0 1px #cf000e;
}

input:checked+.slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.sequence-kind {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    cursor: pointer;
}

.sequence-kind:last-child {
    margin-right: 0;
}

.sequence-kind .txt {
    color: #393939;
    font-size: 13px;
}

.sequence-kind .txt-1 {
    color: #ff0000;
    font-size: 13px;
}

.sequence-kind .txt-2 {
    color: #0057ff;
    font-size: 13px;
}

.sequence-kind .txt-3 {
    color: #a3a3a3;
    font-size: 13px;
}

.sequence-kind.active {
    border-bottom: 2px solid #ff7c7f;
    color: #222222;
    font-weight: bold;
}

.sequence-item {
    border: 1px solid #6f6f6f;
    border-radius: 20px;
    width: 100%;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    margin-bottom: 10px;
}

.sequence-item:last-child {
    margin-bottom: 0;
}

.sequence-item .left-item {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50%;
}

.sequence-item .left-item.black {
    background-color: #222222;
}

.sequence-item .left-item.green {
    background-color: #6599ff;
}

.sequence-item .left-item.gray {
    background-color: #a3a3a3;
}

.sequence-item .middle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
}

.sequence-item .middle-item .txt-1 {
    color: #9f9f9f;
    font-size: 12px;
}

.sequence-item .middle-item .txt-2 {
    color: #222222;
    font-size: 12px;
}

.sequence-item .right-item {
    display: flex;
    align-items: flex-end;
}

.sequence-item .right-item .txt-1 {
    color: #222222;
    font-size: 12px;
}

.sequence-item .right-item .txt-2 {
    color: #f64f4c;
    font-size: 12px;
    text-decoration: underline;
}

.sequence-item .right-item .item {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.sequence-item .right-item .item:last-child {
    margin-right: 0;
}

.sequence-item .right-item .item.gray {
    border: 1px solid #6f6f6f;
    background-color: #eeeeee;
    color: #6a6a6a;
}

.sequence-item .right-item .item.green {
    background-color: #6599ff;
}

.sequence-item .right-item .item.black {
    background-color: #5b5b5b;
}

.sequence-item .right-item .item.red {
    background-color: #ff7c7f;
}



#myChart{  margin:0 auto;  display: block;   box-sizing: border-box; width: 850px;}

.btn_pack{width: 50px;}

#sale_chart_table{width: 100%;border:0.5px solid #000;width: 830px; display: flex;margin:0 auto;padding:35px 75px; border-radius: 10px;}

#sale_chart_table table{width: 100%; }
#sale_chart_table table tr td{padding:5px; font-size: 1.2em;}
#sale_chart_table .red{color:#ff2626;}
#sale_chart_table .green{color:#14a6a3;}
#sale_chart_table .gray{color:#858585;}

#sale_receipt{margin:50px auto 0; width: 100%; max-width: 830px;}
#sale_receipt #table{width: 100%; margin:0 auto; max-width: 830px; border:1px solid #c8c8c8;}
#sale_receipt #table thead tr th{border:1px solid #c8c8c8;text-align: center; font-size: 14px; padding:10px;}
#sale_receipt #table tbody tr td{border-right:1px solid #c8c8c8; padding: 10px; font-size: 14px;}


#sale_receipt .btn_submit2{
    float:right;
    border:1px solid #0f8258;
    font-size: 12px;
    color:#0f8258;
    font-weight: 500;
    background-color: #fff;
    padding:5px 10px;
    margin-bottom: 10px;
}

.btn_pack .date_range {
    border:1px solid #999999; color:#999999;
    font-size: 12px;  background: none;
}
.btn_pack .date_range:hover,.btn_pack .date_range:active,.btn_pack .date_range:link{
    border:1px solid #000;
    color:#000;
}

/*pagination*/
.bs-example {    margin: 20px 0 ;  }
  
  .bs-example a {    color: #333!important;  }
  
  .pagination>li:first-child>a, .pagination>li:first-child>span {
      border-top-left-radius: 1px;
      border-bottom-left-radius: 1px;
  }
  
  .pagination>li:last-child>a, .pagination>li:last-child>span {
      border-top-right-radius: 1px;
      border-bottom-right-radius: 1px;
  }
  
  li.active a {
    background: #000!important;
    border: 1px solid #000!important;
  }
  
  .pagination>.active>a {
    color: #fff!important;
  }
  
  .pagination>li a:hover {
    background: #000!important;
    border: 1px solid #000!important;
    color: #fff!important;  
  }
  .pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}
  .pagination>li{display:inline}
  .pagination>li>a.gray{color:#999 !important;}
  .pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#428bca;text-decoration:none;background-color:#fff;border:1px solid #ddd}
  .pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
  .pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
  .pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{color:#2a6496;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:2;color:#fff;cursor:default;background-color:#428bca;border-color:#428bca}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}

  /*n_navi.htm*/
  .header_log_btn a{ background: rgb(219, 120, 120); border-radius: 15px; padding:5px 17px; color:#fff;}

  /*n_order_cancel.htm*/
  .order-status2{
    width: 80px;
    height: 35px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
  }
  .order-content-1 .right-content .item{display: flex; }
  .order-status2.confirm{
    background: #57b536;
    margin-bottom: 5px;
  }
  .order-status2.cancel{
    background: #c8c8c8;
    color:#505050;
  }