@charset "utf-8";

/*--- btn-common ---*/
/* btn */
.btn {
    padding-top: 3rem;
    text-align: center;
}

.btn a {
    border-radius: 50px;
    text-align: center;
    display: inline-block;
}

.btn.type01 a {
    width: 100%;
    max-width: 190px;
    background: var(--sub-color);
    color: var(--white);
    font-size: var(--f20);
    font-weight: 700;
    line-height: 3rem;
}

.btn.type01 a.team {
    margin-left: 20px;
    background: var(--sub-color);
}

/*--- btn-common end ---*/


/*--- popup ---*/
/* check popup */
ul.popup-box-wrap {
    background: #f5f5f5;
    padding: 10px 40px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 15px;
}

ul.popup-box-wrap:last-child {
    margin-bottom: 0;
}

li.popup-box {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #5e5e5e;
    width: 100%;
}

li.popup-box:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

li.popup-box ul {
    width: calc(100% - 80px);
    display: flex;
    align-items: center;
    font-size: var(--f20);
    padding: 15px 0;
    gap: 0 10px;
}

li.popup-box ul li {
    font-weight: 500;
    font-size: var(--f20);
}

li.popup-box ul li.name {
    margin-right: 20px;
}

li.popup-box ul li.course {
    margin-right: 20px;
}

li.popup-box .pop-btn button {
    width: 80px;
    line-height: 1.875rem;
    border-radius: 30px;
    color: #fff;
    font-weight: 700;
    background: var(--sub-color);
}

/* popup - select-pesron */
.popup.type01 .popup-box-wrap2 {
    padding: 20px 68px;
}

.popup-box-wrap2 ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, auto));
    grid-template-rows: repeat(auto-fill, minmax(105px, auto));
    align-items: center;
    gap: 0 10px;
}

.popup-box-wrap2 ul li {
    border-radius: 15px;
    max-height: 105px;
}

.popup-box-wrap2 ul li.on a {
    color: #000;
}

.popup-box-wrap2 ul li a {
    padding: 17px 20px;
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto;
    align-items: center;
    gap: 0 10px;
    color: rgba(164, 164, 164, 0.8);
}

.popup-box-wrap2 ul li a figure {
    width: 60px;
    height: 70px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    opacity: 0.7;
}

.popup-box-wrap2 ul li.on a figure {
    opacity: 1;
}

.popup-box-wrap2 ul li a figure img {
    width: 58px;
    height: 58px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
}

.popup-box-wrap2 ul li a figure.back {
    background: url("/images/ic_selected.svg") center / cover no-repeat;
}

.popup-box-wrap2 ul li a span {
    font-size: var(--f20);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.popup-box-wrap2 ul li a p {
    font-size: var(--f22);
    font-weight: 600;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.popup-box-wrap2 ul li a p b {
    font-weight: 400;
}

/* popup - menu-info */
.popup.type03 .popup-box-wrap2 {
    width: 100%;
}

.popup.type03 .popup-box-wrap2 .menu-img {
    width: 100%;
    height: 256px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}

.popup.type03 .popup-box-wrap2 .menu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-info-text .menu-state {
    display: flex;
    justify-content: flex-start;
    gap: 0 5px;
    align-items: center;
    margin-bottom: 10px;
}

.menu-info-text .menu-state span {
    text-transform: uppercase;
    font-size: var(--f13);
    color: #fff;
    text-align: center;
    line-height: 1.88rem;
    font-weight: 400;
    border-radius: 6px;
    padding: 0 25px;
    background: transparent;
}

.menu-info-text h2.name {
    font-weight: 600;
    font-size: var(--f25);
    margin-bottom: 10px;
}

.menu-info-text b {
    color: #b7b7b7;
    font-size: var(--f18);
    font-family: var(--font-en);
    line-height: 1.28em;
}

.menu-info-text p.price {
    font-weight: 700;
    font-size: var(--f25);
    margin-top: 10px;
}

.menu-info-text p.info {
    font-weight: 400;
    font-size: var(--f16);
    line-height: 1.19em;
    margin-top: 30px;
    color: #5e5e5e;
    white-space: pre-line;
}

.menu-info-btn {
    padding-top: 35px;
}

.menu-info-btn ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-info-btn ul li {
    width: 50%;
}

.menu-info-btn ul li.amount em {
    display: flex;
    align-items: center;
    gap: 0 25px;
}

.menu-info-btn ul li.amount em span {
    width: 40px;
    height: 40px;
}

.menu-info-btn ul li.amount em span.minus {
    background: url("/images/ic_minus.svg") center / cover no-repeat;
    background-size: 20px;
}

.menu-info-btn ul li.amount em span.plus {
    background: url("/images/ic_plus.svg") center / cover no-repeat;
    background-size: 17px;
}

.menu-info-btn ul li.btn-cart button {
    color: #fff;
    display: block;
    font-size: var(--f25);
    font-weight: 700;
    text-align: center;
    width: 220px;
    line-height: 70px;
    border-radius: 32px;
    background: var(--sub-color);
}

/* popup - order-list */
.popup.type04 .popup-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.popup.type04 .popup-top .popup-top-in {
    display: flex;
    align-items: center;
    gap: 0 40px;
    font-size: var(--f20);
}

.popup.type04 .popup-top .popup-top-in ul {
    display: flex;
    align-items: center;
    gap: 0 10px;
    position: relative;
}

.popup.type04 .popup-top .popup-top-in ul::before {
    content: "";
    width: 1px;
    height: 27px;
    background: #000;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.popup.type04 .popup-top .popup-top-in ul li {
    font-size: var(--f20);
}

.popup.type04 .popup-top .popup-top-in ul li:nth-of-type(2) {
    font-weight: 700;
}

.popup.type04 .popup-top .popup-top-in .time {
    font-size: var(--f23);
    position: relative;
    margin: 0 50px 0 35px;
}

.popup.type04 .popup-top .popup-top-in .time::after {
    content: "";
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    background: url("/images/ic_time.svg") center / cover no-repeat;
}

.popup.type04 .popup-top .popup-top-in .time b {
    color: #e95539;
    font-weight: 700;
}

.popup.type04 .order-list-wrap {
    padding: 0 10px 150px 0;
}

.popup.type04 .order-list-wrap table {
    width: 100%;
    table-layout: fixed;
}

.popup.type04 .order-list-wrap table tbody tr {
    border-bottom: 1px solid #b7b7b7;
}

.popup.type04 .order-list-wrap table tbody tr td {
    padding: 30px 0;
    font-size: var(--f22);
}

.popup.type04 .order-list-wrap table tbody tr td ul li {

}

.popup.type04 .order-list-wrap table tbody tr td.type ul li {
    color: #5e5e5e;
    display: flex;
    align-items: center;
    gap: 0 15px;
}

.popup.type04 .order-list-wrap table tbody tr td.type ul li span {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    display: block;
    font-size: var(--f19);
    line-height: 27px;
}

.popup.type04 .order-list-wrap table tbody tr td.type ul li span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    height: 27px;
    background: #b7b7b7;
    border-radius: 100%;
    z-index: -1;
}

.popup.type04 .order-list-wrap table tbody tr td.type ul li b {
    font-weight: 400;
    font-size: var(--f15);
}

.popup.type04 .order-list-wrap table tbody tr td.type ul li p {
    font-weight: 500;
}

.popup.type04 .order-list-wrap table tbody tr.on td.type ul li span::after {
    background: var(--main-color);
}

.popup.type04 .order-list-wrap table tbody tr.on td.type ul li p {
    color: var(--main-color);
    font-weight: 600;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul:last-child {
    margin-bottom: 0;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul li {
    font-weight: 600;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul li dl {
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul li dl dd {
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul li dl dd:not(.option) b {
    color: #e95539;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul li dl dd.option {
    color: #5e5e5e;
    font-size: var(--f14);
    font-weight: 400;
}

.popup.type04 .order-list-wrap table tbody tr td.name ul li.price {
    text-align: right;
}

.popup.type04 .order-list-btm {
    width: 100%;
    height: 110px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 0 32px 32px;
    overflow: hidden;
    z-index: 10;
}

.popup.type04 .order-list-btm ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f6f6f6;
    padding: 0 30px;
}

.popup.type04 .order-list-btm ul li {
    width: calc((100%) / 3);
    font-size: var(--f28);
}

.popup.type04 .order-list-btm ul li.total {
    text-align: right;
}

.popup.type04 .order-list-btm ul li.num span {
    font-weight: 700;
}

.popup.type04 .order-list-btm ul li.total span {
    font-weight: 700;
    color: #e95539;
}

/* 소속 단체 선택 팝업 (select-team) */
li.popup-box.team {
    flex-direction: column;
}

li.popup-box.team ul {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px dashed #5e5e5e;
}

li.popup-box.team ul:last-child {
    border-bottom: 0;
}

li.popup-box.team ul li.name span {
    margin-left: 5px;
}


/* popup - 관리자 로그인 */
.pwLogo {
    padding-bottom: 100px;
}

.pwLogo h3 {
    width: 75px;
    height: 75px;
    margin: 0 auto;
}

.pwLogo h3 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popup-contents.login-contents.popPw ul li {
    max-width: 80%;
}

/* celine Add (250626) */

/* tab - 주방모니터 */
.tab-content {
    display: none;
    height: 100%;
}

.tab-content.active {
    display: block;
}

/* Popup - 조리완료내역 */
.pop-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2;
}

.pop-wrap .pop-inner {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    border-radius: 15px;
    background-color: #fff;
}

.pop-wrap .pop-inner img {
    display: block;
    margin: 0 auto 15px;
}

.pop-wrap .pop-inner p {
    font-size: 1.5rem;
    line-height: 1.8rem;
    text-align: center;
    color: #382413;
    font-weight: 700;
}

.pop-wrap .pop-inner .button-box {
    width: 100%;
    height: auto;
    margin: 52px auto 0;
    text-align: center;
}

.pop-wrap .pop-inner button {
    display: inline-block;
    width: 126px;
    padding: 13px 0;
    background-color: #b1b1b1;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.pop-wrap .pop-inner button.completion {
    background-color: #18314d;
    margin-left: 16px;
}

/* Table-order */
.order-header {
    width: 100%;
    height: auto;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 1;
}

.order-header .logo {
    max-width: 155px;
    height: 81px;
    padding: 15px 0;
    margin: 0 auto;
}

.order-header .logo img {
    display: block;
    width: 100%;
}

.order-header .header-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-direction: column;
}

.order-header .header-content .order-tab {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    background-color: #f6f6f6;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}

.order-header .header-content .order-tab li {
    min-width: 20%; /* 중메뉴 넓이 */
    height: auto;
    border-right: 1px solid #dbdbdb;
    text-align: center;
    cursor: pointer;
}

.order-header .header-content .order-tab li:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0);
}

.order-header .header-content .order-tab li span {
    display: block;
    font-weight: 400;
    color: #000;
    letter-spacing: -0.24px;
    font-size: 1.3rem;
    padding: 18px 0;
}

.order-header .header-content .order-tab li.on span {
    background: #18314d;
    border: 1px solid #18314d;
    color: #fff;
}

.order-header .header-content .order-tab li.on div.depth-box {
    display: block;
}

.order-header .header-content .order-tab li div.depth-box {
    display: none;
}

.order-header .header-content .order-tab li div.depth {
    width: 100%;
    height: 60px;
    background-color: #18314d;
    border-top: 1px solid #dbdbdb;
    position: absolute;
    overflow-x: scroll;
    display: flex;
    left: 0;
}

.order-header .header-content .order-tab li div.depth a {
    min-width: 20%; /* 소메뉴 넓이 */
    color: #fff;
    display: inline-block;
    padding: 22px 0;
    border-right: 1px solid #989898;
}

.order-header .header-content .order-tab li div.depth a:first-child {
    border-left: 1px solid #989898;
}


.order-list-wrap {
    padding: 40px 30px;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.order-list-wrap .tab-content {
    width: 100%;
    height: 100%;
    margin-top: 200px;
}

.order-list-wrap .tab-content .menu-list {
    width: 100%;
    min-height: auto;
    margin-bottom: 2%;
}

.order-list-wrap .tab-content .menu-list li {
    width: 31.5%;
    height: auto;
    border: 1px solid #c5c5c5;
    border-radius: 20px;
    display: inline-block;
    overflow: hidden;
}

.order-list-wrap .tab-content .menu-list li {
    margin-right: 1.8%;
    position: relative;
}

.order-list-wrap .tab-content .menu-list li:last-child {
    margin-right: 0;
}

.order-list-wrap .tab-content .menu-list li button {
    width: 100%;
    height: 100%;
}

.order-list-wrap .tab-content .menu-list li div {
    width: 100%;
    height: 100%;
}

.order-list-wrap .tab-content .menu-list li div img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    padding-bottom: 20px;
}

.order-list-wrap .tab-content .menu-list li div p {
    text-align: center;
    font-size: 1.38em;
    color: #000;
    letter-spacing: -0.17px;
    font-weight: 600;
}

.order-list-wrap .tab-content .menu-list li div.tag-box,
.pop-order-wrap .pop-inner div.tag-box {
    width: 96%;
    height: auto;
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: left;
}

.order-list-wrap .tab-content .menu-list li div p.tag,
.pop-order-wrap .pop-inner p.tag {
    width: 54px;
    font-size: 0.88em;
    padding: 8px 10px;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.order-list-wrap .tab-content .menu-list li div p.best,
.pop-order-wrap .pop-inner p.best {
    background-color: #4d9a9a;
}

.order-list-wrap .tab-content .menu-list li div p.new,
.pop-order-wrap .pop-inner p.new {
    background-color: #ef7800;
}

.order-list-wrap .tab-content .menu-list li div p.tit {
    padding-bottom: 12px;
}

.order-list-wrap .tab-content .menu-list li div p.price {
    font-weight: 200;
    padding-bottom: 30px;
    font-size: 1.25em;
}

/* Popup - 테이블오더 */
.pop-order-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.pop-order-wrap .pop-inner {
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 24px 32px;
    border-radius: 32px;
    background-color: #fff;
}

.pop-order-wrap .pop-inner .food-con {
    position: relative;
}

.pop-order-wrap .pop-inner img.food {
    display: block;
    width: 100%;
    margin: 0 auto 20px;
}

.pop-order-wrap .pop-inner p {
    color: #000;
    text-align: center;
}

.pop-order-wrap .pop-inner p.tit {
    font-size: 1.38rem;
    line-height: 1.8rem;
    letter-spacing: -0.13px;
    font-weight: 500;
}

.pop-order-wrap .pop-inner p.name {
    font-size: 1.5rem;
    line-height: 1.8rem;
    letter-spacing: -0.17px;
    font-weight: 600;
    padding-bottom: 6px;
}

.pop-order-wrap .pop-inner p.con {
    font-size: 1.8em;
    line-height: 2.3rem;
    letter-spacing: -0.13px;
    font-weight: 500;
    color: #000000;
    margin: 0 auto 30px;
}

.pop-order-wrap .pop-inner p.origin {
    font-size: 1.4em;
    line-height: 1.6rem;
    letter-spacing: -0.13px;
    /*font-weight: 500;*/
    /*padding-bottom: 8px;*/
    color: #000000;
}

.pop-order-wrap .pop-inner p.price {
    font-size: 1.25rem;
    line-height: 1.8rem;
    letter-spacing: -0.18px;
    font-weight: 200;
}

.pop-order-wrap .pop-inner .button-box {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 0 auto 17px;
}

.pop-order-wrap .pop-inner button {
    display: inline-block;
}

.pop-order-wrap .pop-inner button img {
    width: 21px;
    height: 21px;
}


/*  END : Celine Add (250626) */

/*--- main ---*/
.login-contents {
    max-width: 85%;
    width: 100%;
    margin: 0 auto;
}

.login-contents .logo {
    padding-bottom: 6.25rem;
}

.login-contents .logo img {
    display: block;
    margin: 0 auto;
    object-fit: cover;

    width: 100%;
    max-width: 330px;
}

/*.login-contents .logo.basic img {
    filter: invert(1);
}*/

.login-contents ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px 0;
}

.login-contents ul li {
    position: relative;
    width: 100%;
    max-width: 35%;
}

.login-contents ul li.sub-text {
    text-align: center;
}

.login-contents ul li input {
    border-bottom: 1px solid #000;
    padding-bottom: 1.2rem;
}

.login-contents ul.line-color li input {
    border-bottom: 1px solid #000;
    color: #000;
}

.login-contents ul li span.close {
    position: absolute;
    right: 5px;
    bottom: calc(50% + 15px);
    transform: translateY(calc(-50% + 20px));
    width: 15px;
    height: 15px;
    background: url("/images/ic_close.svg") center center no-repeat;
    background-size: 15px;
}

.login-contents ul li.basic span.close {
    filter: invert(1);
}

.login-contents ul li.basic select {
    border-bottom: 1px solid #000;
    color: #d8d8d8;
}

h2.title01 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 80px;
    gap: 20px 0;
}

h2.title01 b {
    font-size: var(--f37);
    text-transform: uppercase;
    letter-spacing: -0.37px;
    color: var(--sub-color);
}

h2.title01 span {
    font-size: var(--f176);
    letter-spacing: -1.78px;
}

.main-header {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
}

.main-header a {
    display: block;
    font-size: var(--f20);
    text-transform: uppercase;
}

.main-header a.logo {
    font-size: 0;
    width: 160px;
    height: 53px;
    background: url("/images/ic_logo_big.svg") center / cover no-repeat;
}

.main-header a.num {
    padding: 8px 24px;
    color: transparent;
    line-height: 78px;
    background: transparent;
}

/*--- main end ---*/

/*--- select-table ---*/
.select-table-contents {
    width: 85%;
    margin: 0 auto;
}

.select-table-contents .title02 {
    font-size: var(--f28);
    font-weight: 700;
    text-align: center;
    color: #000;
}

.table-wrap {
    width: 100%;
    margin-top: 75px;
}

.table-wrap ul {
    display: flex;
    align-items: flex-start;
    /*align-items: center;*/
    gap: 0 15px;
    padding: 1.875rem 0;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #707070;
}

.table-wrap ul li {
    min-width: calc(10% - 15px);
}

.table-wrap ul:last-child {
    border-bottom: 0;
}

.table-wrap ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
    color: #9f9f9f;
}

.table-wrap ul li a b {
    font-size: var(--f12);
    text-transform: uppercase;
}

.table-wrap ul li a span {
    /*font-size: var(--f40);*/
    /*font-size: var(--f25);*/
    font-size: 1.688rem;
    font-weight: 700;
}

.table-wrap ul li a.on {
    color: var(--sub-color);
}

/*--- select-table end ---*/


/*--- table-order03 ---*/
.order-container {
    width: 100%;
    height: 100%;
}

.menu-wrapper {
    width: 100%;
    /*padding: 228px 0 62px 0;*/
    padding: 209px 0 40px 0;
}

.menu-list-wrap {
    width: 100%;
    height: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 480px;
    padding: 10px 35px;
}

.menu-list-in {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 0 50px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

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

.menu-list {
    min-height: 380px;
    width: calc((100% - 100px) / 3);
    position: relative;
}

.menu-list a {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.menu-list a.soldOut::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
}

.menu-list a.soldOut::before {
    content: "SOLD OUT";
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: #e5d9c6;
    font-weight: 600;
    font-size: var(--f32);
    z-index: 10;
    letter-spacing: -0.16px;
    text-align: center;
    width: 100%;
}

.menu-list .menu-img {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.menu-list .menu-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.menu-list .menu-txt {
    background: #fff;
    padding: 30px 0;
    text-align: center;
    font-size: var(--f22);
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.menu-list .menu-txt p {
    font-weight: 700;
    margin-top: 15px;
}

.menu-list .menu-state {
    display: flex;
    justify-content: flex-start;
    gap: 0 5px;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

.menu-list .menu-state span {
    text-transform: uppercase;
    font-size: var(--f13);
    color: #fff;
    text-align: center;
    line-height: 1.88rem;
    font-weight: 400;
    border-radius: 6px;
    padding: 0 25px;
    background: transparent;
}

.cart-list {
    position: fixed;
    top: 0;
    right: -100%;
    width: 340px;
    height: 100%;
    min-height: 100%;
    background: #fff;
    z-index: 100;
}

.cart-contents {
    padding: 30px 20px 0 25px;
}

.cart-cont-head {
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 20px;
}

.cart-cont-head img {
    filter: invert(1);
}

.cart-cont-head h2 {
    font-size: var(--f20);
    font-weight: 700;
    letter-spacing: -0.1px;
}

.cart-cont-wrap {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
}

.cart-cont-in {
    width: 100%;
    height: auto;
    overflow-y: scroll;
    max-height: 550px;
}

.cart-box-wrap {
    padding-right: 15px;
}

.cart-box-wrap li.box-wrapper {
    border-bottom: 1px solid #a1a1a1;
    padding: 30px 0;
}

ul.cart-box {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    margin-bottom: 30px;
}

ul.cart-box:last-child {
    margin-bottom: 0;
}

ul.cart-box li.name p {
    font-size: var(--f18);
    font-weight: 700;
}

ul.cart-box li.title em {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ul.cart-box li.title em span {
    letter-spacing: -0.09px;
}

ul.cart-box li.title em b {
    width: 12px;
    height: 12px;
    background: url("/images/ic_close.svg") center / cover no-repeat;
    filter: invert(1);
}

ul.cart-box li.num {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

ul.cart-box li.num em {
    display: inline-block;
    line-height: 2.5rem;
}

ul.cart-box li.num em.amount {
    display: flex;
    align-items: center;
    gap: 0 25px;
}

ul.cart-box li.num em.amount span {
    width: 40px;
    height: 40px;
}

ul.cart-box li.num em.amount span.minus {
    background: url("/images/ic_minus.svg") center / cover no-repeat;
    background-size: 20px;
}

ul.cart-box li.num em.amount span.plus {
    background: url("/images/ic_plus.svg") center / cover no-repeat;
    background-size: 17px;
}

ul.cart-box li.num em.amount b {
    font-size: var(--f18);
    font-weight: 700;
}

ul.cart-box li.num em.price b {
    font-size: var(--f22);
    font-weight: 700;
}

.cart-cont-btm {
    width: 100%;
    height: 124px;
    position: absolute;
    bottom: 0;
}

.cart-cont-btm ul {
    height: 50%;
    max-height: 64px;
}

.cart-cont-btm ul:first-child {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    border-top: 1px solid #A1A1A1;
}

.cart-cont-btm ul:first-child li {
    font-size: var(--f25);
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.cart-cont-btm ul:first-child li:first-child {
    font-size: var(--f18);
}

.cart-cont-btm ul:first-child li:last-child b {
    font-size: var(--f22);
}

.cart-cont-btm ul:first-child li:last-child span {
    font-weight: 700;
}

.cart-cont-btm ul:last-child {
    display: flex;
    align-items: center;
    width: 100%;
}

.cart-cont-btm ul:last-child li {
    color: #fff;
    font-size: var(--f25);
    font-weight: 700;
}

.cart-cont-btm ul:last-child li:first-child {
    width: 120px;
    height: 100%;
    background: #8e8e8e;
}

.cart-cont-btm ul:last-child li:last-child {
    width: calc(100% - 120px);
    height: 100%;
    background: var(--sub-color);
}

.cart-cont-btm ul:last-child li a {
    display: block;
    text-align: center;
    height: 100%;
    line-height: 4.2rem;
}

/* add-cart popup */
.pop-cart {
    padding: 65px 0;
}

.pop-cart h2 {
    color: #fff;
    font-weight: 500;
    font-size: var(--f36);
    text-align: center;
}


/*--- table-order03 end ---*/

/*--- 팀 주문선택 ---*/
.team-order-wrap {
    width: 100%;
    height: 100%;

    .team-order {
        width: 90%;
        height: auto;
        margin: 100px auto 0 auto;
        background: #fff;
        border-radius: 32px;
        padding: 30px;

        .title {
            display: flex;
            align-items: center;
            gap: 0 40px;
            font-size: var(--f20);
            padding-bottom: 30px;
            position: relative;

            h2 {
                position: relative;
            }

            h2::after {
                content: "";
                width: 1px;
                height: 20px;
                background: #000;
                position: absolute;
                right: -20px;
                top: 50%;
                transform: translateY(-50%);
            }

            p {
                font-size: 1.25rem;
                margin-top: 0;

                span {
                    margin-left: 5px;
                    font-weight: 700;
                }
            }

            .btn-back {
                position: absolute;
                right: 3px;
                top: -10px;
                z-index: 2;

                img {
                    width: 44px;
                    height: 44px;
                }
            }
        }
    }

    .contents {
        display: flex;
        flex-direction: column;
        gap: 30px 0;
        height: auto;
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 500px;

        .team-list {
            display: flex;
            width: 100%;
            gap: 0 35px;
            padding-bottom: 30px;
            border-bottom: 1px solid #b7b7b7;

            .title {
                display: flex;
                align-items: center;
                gap: 0 15px;
                width: 20%;

                li:first-child {
                    text-align: center;
                    color: #fff;
                    position: relative;
                    z-index: 1;
                    width: 27px;
                    height: 27px;
                    display: block;
                    font-size: var(--f19);
                    line-height: 27px;
                }

                li:first-child::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 27px;
                    height: 27px;
                    background: var(--main-color);
                    border-radius: 100%;
                    z-index: -1;
                }

                li:nth-of-type(2) {
                    color: var(--main-color);
                    font-weight: 600;
                    font-size: var(--f25);
                }

                li:nth-of-type(3) {
                    color: #5e5e5e;
                    font-size: var(--f15);
                }
            }

            .list {
                display: flex;
                gap: 0 30px;
                width: calc(100% - (20% + 35px));

                li {
                    border-radius: 15px;
                    border: 1px solid #ababab;
                    background: #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 5px 0;
                    min-height: 86px;
                    width: calc((100% - 90px) / 4);

                    p {
                        font-size: var(--f25);
                    }

                    span {
                        font-size: var(--f16);
                    }
                }

                li.on {
                    border: 1px solid var(--sub-color);
                    background: var(--sub-color);
                    color: #fff;
                }
            }
        }
    }
}

/*--- 팀 주문선택 end ---*/

/*--- 주문 프린트 ---*/
.order-print-wrap {
    width: 100%;
    height: 100%;

    h2.logo {
        margin: 0 auto;
        width: 230px;
        padding-top: 60px;

        img {
            width: 100%;
        }
    }

    .print-order {
        width: 90%;
        height: auto;
        margin: 50px auto 0 auto;
        background: #fff;
        border-radius: 32px;
        padding: 30px;
        border: 1px solid #e5e5e5;

        .contents {
            display: flex;
            flex-direction: column;
            gap: 60px 0;
            height: auto;
            overflow-y: scroll;
            overflow-x: hidden;
            max-height: 500px;

            .print-list {
                display: flex;
                width: 100%;
                gap: 0 35px;

                ul.title {
                    display: flex;
                    align-items: center;
                    gap: 0 15px;
                    width: 20%;

                    li:first-child {
                        text-align: center;
                        color: #fff;
                        position: relative;
                        z-index: 1;
                        width: 50px;
                        height: 50px;
                        display: block;
                        font-size: 0;
                        line-height: 27px;
                    }

                    li:first-child::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 50px;
                        height: 50px;
                        background: url('/images/ic_printer.svg') no-repeat;
                        background-size: 100%;
                        z-index: -1;
                    }

                    li:nth-of-type(2) {
                        color: var(--main-color);
                        font-weight: 600;
                        font-size: var(--f25);
                    }
                }

                ul.list {
                    width: calc(100% - (25% + 35px));
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    gap: 0 30px;

                    li {
                        width: calc((100% - 90px) / 4);
                        position: relative;

                        input[type=text] {
                            width: 100%;
                            border-bottom: 1px solid #000;
                            font-size: var(--f20);
                        }

                        input[type=text]::placeholder {
                            color: #d8d8d8;
                            font-size: var(--f20);
                        }

                        span {
                            position: absolute;
                            right: 5px;
                            top: 50%;
                            transform: translateY(-50%);

                            img {
                                filter: invert(1);
                            }
                        }
                    }

                    li.radio {
                        width: 5%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

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

                        input[type=radio] + label {
                            background-repeat: no-repeat;
                            background-image: url('/images/ic_radio.svg');
                            background-size: 100%;
                            background-position: center center;
                            transition: 0.3s all;
                            width: 35px;
                            height: 35px;
                            display: inline-block;
                        }

                        input[type=radio]:checked + label {
                            background-image: url('/images/ic_radio_on.svg');
                            background-size: 35px 35px;
                        }
                    }
                }
            }
        }
    }

    .button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 20px;
        margin-top: 50px;

        button {
            width: 190px;
            height: 48px;
            border-radius: 24px;
            font-size: var(--f20);
        }

        .logout {
            border: 1px solid #707070;
            background: #fff;
            color: #000;
        }

        .search {
            background: #d6a53e;
            color: #fff;
            border: 1px solid #d6a53e;
        }

        .submit {
            background: #2f190d;
            color: #fff;
            border: 1px solid #2f190d;
        }
    }
}

/*--- 주문 프린트 end ---*/

/*--- 주방화면 ---*/
/* header */
.kitchen-header {
    width: 100%;
    height: 89px;
    display: flex;
    align-items: center;
    background: #18314d;
    position: relative;
}

.kitchen-header .logo {
    padding-left: 15px;
}

.kitchen-header .logo img {
    max-width: 200px;
}

.kitchen-header .header-content {
    width: calc(100% - 155px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 25px;
}

.kitchen-header .header-content .left {
    /*width: calc(70% - 50px);*/
    height: 100%;
    display: flex;
    align-items: flex-end;
    margin-left: 50px;
}

.kitchen-header .header-content .order-tab {
    display: flex;
    gap: 0 8px;
}

.kitchen-header .header-content .order-tab li {
    min-width: 220px;
    background: #ffb10a;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0 0;
    height: 50px;
    cursor: pointer;
}

.kitchen-header .header-content .order-tab li span {
    display: block;
    position: relative;
    font-weight: 600;
    color: #382413;
    font-size: 1.375rem;
}

.kitchen-header .header-content .order-tab li.on {
    background: #f9f9f9;
}

.kitchen-header .header-content .order-tab li.on span::after {
    content: "";
    background: url('/images/kitchen/icon_kitchen-order-list.svg') no-repeat;
    position: absolute;
    left: -23px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
}

.kitchen-header .header-content ul.right {
    width: 25%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
}

.kitchen-header .header-content ul.right li {
    height: 100%;
}

.kitchen-header .header-content ul.right li.time {
    width: 60%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 5px;
}

.kitchen-header .header-content ul.right li.time b {
    font-size: 0.8125rem;
    text-transform: uppercase;
    margin-top: 15px;
}

.kitchen-header .header-content ul.right li.time p {
    font-size: 2rem;
    font-weight: 800;
}

.kitchen-header .header-content ul.right li.close {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: unset;
}

.kitchen-header .header-content ul.right li.close button {
    width: 25px;
    height: 27px;
    font-size: 0;
    background: url("/images/kitchen/icon_kitchen-close.svg") no-repeat center center;
    background-size: 100%;
}

.kitchen-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #18314d;
}

.kitchen-wrap .kitchen-contents {

}

.kitchen-wrap .kitchen-contents ul.select-wrap {
    display: flex;
    gap: 0 8px;
    margin-bottom: 85px;
    width: 100%;
}

.kitchen-wrap .kitchen-contents ul.select-wrap li {

}

.kitchen-wrap .kitchen-contents ul.select-wrap li select {
    min-width: 200px;
    width: 100%;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #eee;
    color: #777;
}

.kitchen-wrap .kitchen-contents ul.login {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px 0;
}

.kitchen-wrap .kitchen-contents ul.login li {
    position: relative;
    width: 100%;
}

.kitchen-wrap .kitchen-contents ul.login li input {
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: var(--f20);
}

.kitchen-wrap .kitchen-contents ul.login li input::placeholder {
    color: #fff;
    font-size: var(--f20);
}

.kitchen-wrap .kitchen-contents ul.login li span.close {
    position: absolute;
    right: 5px;
    bottom: calc(50% + 15px);
    transform: translateY(calc(-50% + 20px));
    width: 15px;
    height: 15px;
    background: url("/images/ic_close.svg") center center no-repeat;
    background-size: 15px;
}

.kitchen-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
}

.kitchen-btn button {
    border-radius: 6px;
    color: #18314d;
    background: #ffb10a;
    font-size: 1.25rem;
    text-align: center;
    padding: 15px 0;
    max-width: 190px;
    width: 100%;
}

.kitchen-logo {
    margin-bottom: 85px;
}

.kitchen-logo img {
    display: block;
    margin: 0 auto;
}

.kitchen-list-wrap {
    background: #18314d;
    padding: 0 15px 35px 15px;
    width: 100%;
    height: calc(100vh - 89px);
}

.list-wrap {
    background: #f9f9f9;
    padding: 30px 35px 35px 35px;
    border-radius: 15px;
    height: 99%;
}

.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.list-header li:first-child {
    color: #382413;
    font-size: 1.50em;
    font-weight: 600;
}

.list-header li:last-child {
    display: flex;
    align-items: center;
    gap: 0 5px;
}

.list-header ul.color {
    display: flex;
    align-items: center;
    gap: 0 25px;
    margin-right: 15px;
}

/* 250120 수정 */
.list-header ul.color li {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0 5px;
}

.list-header ul.color li b {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-block;
}

.list-header ul.color li.order b {
    background: #fff;
    border: 1px solid #707070;
}

.list-header ul.color li.cooking b {
    background: #589f22;
    border: 1px solid #589f22;
}

.list-header ul.color li.ready b {
    background: #8d8d8d;
    border: 1px solid #8d8d8d;
}

.list-header ul.color li.complete b {
    background: #cc5454;
    border: 1px solid #cc5454;
}

.list-contents {
    border-bottom: 2px solid #d8d8d8;
}

.list-contents .order-list {
    overflow-y: auto;
    overflow-x: hidden;
    /*height: 1700px;*/
}

.list-contents .order-list .order-list-header {
    width: 100%;
    height: 76px;
    color: #382413;
    font-size: 1.25rem;
    font-weight: 500;
    border-bottom: 2px solid #d8d8d8;
    border-top: 2px solid #d8d8d8;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-contents .order-list .order-list-header .title {
    height: 100%;
    width: 30%;
    display: flex;
}

.list-contents .order-list .order-list-header .title .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100%) / 3);
}

.list-contents .order-list .order-list-header .list {
    height: 100%;
    display: flex;
    width: 70%;
}

.list-contents .order-list .order-list-header .list .order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.list-contents .order-list .order-list-header .list .order.header {
    width: 70%;
    border-right: 0;
}

.list-contents .order-list ul.order-list-body.block {
    height: 80vh;
}

.list-contents .order-list ul.order-list-body {
    width: 100%;
    height: 65vh;
    overflow-y: scroll;
}

.list-contents .order-list ul.order-list-body li.body-wrap {
    color: #4d4d4d;
    font-size: 1rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    text-align: center;
    border-bottom: 1px dashed #d8d8d8;
}

.list-contents .order-list ul.order-list-body li.body-wrap:last-child {
    border-bottom: 0;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.title {
    height: auto;
    width: 20%;
    display: flex;
    align-items: center;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.title li.num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper {
    height: 100%;
    width: 80%;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list {
    display: flex;
    border-bottom: 1px dashed #d8d8d8;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list:last-child {
    display: flex;
    border-bottom: 0;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list span.time {
    width: 13%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li {
    width: 25%;
    padding: 15px;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li button {
    width: 100%;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li button img {
    vertical-align: bottom;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li div {
    border-radius: 10px;
    padding: 10px 0;
    position: relative;
    border: 1px solid #d4d4d4;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li div.complete {
    background: #cc5454;
    color: #fff;
    border: 1px solid #cc5454;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li div.ready {
    background: #8d8d8d;
    color: #fff;
    border: 1px solid #8d8d8d;
}

.list-contents .order-list ul.order-list-body li.body-wrap ul.list-wrapper li.list ul.order-wrap li div.cooking {
    background: #589f22;
    color: #fff;
    border: 1px solid #589f22;
}


/* popup */
.popup.kitchen .popup-top p {
    color: #18314d;
    font-size: 18px;
    line-height: 1.21em;
    font-weight: 600;
}

.btn.kitchen {
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;

    a {
        border-radius: 6px;
        color: #fff;
        max-width: 30%;
    }

    a:first-child {
        background: #b1b1b1;
    }

    a:last-child {
        background: #18314d;
    }
}

.num.tee-off {
    display: block !important;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    flex-direction: column;
}

.num b {
    font-weight: bold;
}

.display-c {
    display: contents;
}

.total-area {
    width: 100%;
    max-height: 15vh;
    overflow-y: auto;
    background-color: #18314d;
    border-radius: 10px;
    padding: 13px;
    margin-top: 2vh;
    display: flex;
}

.total-area .tit{
    width: 15%;
    font-size: 1.50rem;
    font-weight: 500;
    letter-spacing: -0.24px;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-right: 13px;
}

.total-area .list {
    width: 85%;
    overflow-y: scroll;
}

.total-area .list ul{
    width: 100%;
    display: flex;
    gap: 15px;
    border-bottom: 1px dotted #efefef;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.total-area .list ul:last-child {
    margin-bottom: 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0);
    padding-bottom: 0;
}

.total-area .list ul li{
    width: 18%;
    height: auto;
    background-color: #548ecc;
    border-radius: 10px;
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
    flex-grow: 0;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3em;
    white-space: normal;
    word-break: keep-all;
}

/*--- 주방화면 end ---*/