@charset "UTF-8";

/* Container */
.container {max-width: 1400px; margin: 0 auto;}

@media all and (max-width: 1420px) {
  .container {padding: 0 20px;}
}

/* 식당메뉴 */
.wrap-food .row-tab {background: #f7f7f7; text-align: left;}
.wrap-food .row-tab ul {padding: 24px 20px 24px 0;}
.wrap-food .row-tab li {display: inline-block;  padding: 5px 0 5px 40px; }
.wrap-food .row-tab a {position: relative; padding-left: 20px; font-family: 'Noto Medium'; font-size: 18px; color: #333;}
.wrap-food .row-tab a::before {content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: #ababab; border-radius: 100%;}
.wrap-food .row-tab .on a,
.wrap-food .row-tab a:hover {color: #a78258;}
.wrap-food .row-tab .on a::before,
.wrap-food .row-tab a:hover::before {background: #a78258;}

.wrap-food .row-food {overflow: hidden; margin-top: 50px;}
.wrap-food .left {float: left; width: 450px;}
.wrap-food .left .title {font-family: 'Noto Medium'; font-size: 30px; line-height: 1.1; color: #121212;}
.wrap-food .left .date {margin-top: 40px; padding: 20px; border: 1px solid #ccc;}
.wrap-food .left .now {position: relative; line-height: 48px; text-align: center;}
.wrap-food .left .now button {position: absolute; top: 0; width: 50px; height: 50px; border: 1px solid #d7d7d7; text-indent: -999999px;}
.wrap-food .left .now button.prev {left: 0; background: url('../images/btn-food-left.png') no-repeat center;}
.wrap-food .left .now button:hover.prev {background: url('../images/btn-food-left-on.png') no-repeat center;}
.wrap-food .left .now button.next {right: 0; background: url('../images/btn-food-right.png') no-repeat center;}
.wrap-food .left .now button:hover.next {background: url('../images/btn-food-right-on.png') no-repeat center;}
.wrap-food .left .now strong {font-family: 'Gmarket Bold'; font-size: 20px; color: #333;}
.wrap-food .left .now strong i {font-family: 'Gmarket Medium'; font-size: 20px; color: #a78258;}
.wrap-food .left .cal {margin-top: 15px;}
.wrap-food .left .cal thead tr {background: #002d56;}
.wrap-food .left .cal thead th {padding: 11px 0; font-family: 'Gmarket Medium'; font-size: 12px; font-weight: normal; color: #fff;}
.wrap-food .left .cal tbody td {height: 60px; padding-top: 11px; font-family: 'Gmarket Medium'; font-size: 15px; vertical-align: top; color: #2a2a2a;}
.wrap-food .left .cal .week {background: #f4f5f9;}
.wrap-food .left .cal .today {position: relative;}
.wrap-food .left .cal .today::after {content: ''; position: absolute; left: calc(50% - 5px); bottom: 12px; width: 10px; height: 10px; background: #008395; border-radius: 100%;}
.wrap-food .left .cal .sun {color: #cd1300;}
.wrap-food .left .cal .sat {color: #004fd2;}

.wrap-food .right {float: right; width: calc(100% - 450px); padding-left: 50px;}
.wrap-food .right .title {padding: 3px 0 3px 35px; background: url('../images/ic-food-cal.png') no-repeat left 3px; font-family: 'Noto Medium'; font-size: 22px; line-height: 1.1; color: #008395;}
.wrap-food .right .detail {position: relative; margin-top: 43px;}
.wrap-food .right table {position: relative; border-left: 1px solid #e2e2e2;}
.wrap-food .right table::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #363638;}
.wrap-food .right table thead th {padding: 19px 0; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; font-family: 'Noto Medium'; font-size: 18px; font-weight: normal; color: #121212;}
.wrap-food .right table tbody th {border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; font-family: 'Noto Medium'; font-size: 18px; font-weight: normal; line-height: 1.3; color: #121212;}
.wrap-food .right table tbody td {position: relative; height: 305px; padding: 24px 0; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; font-family: 'Noto Regular'; font-size: 16px; color: #666;}
.wrap-food .right table .vacation {background: #f5f5f5; font-family: 'Noto Regular'; font-size: 16px; color: #666;}
.wrap-food .right table .vacation strong {position: relative; display: block; margin-bottom: 20px; padding-bottom: 17px; font-family: 'Noto Medium'; font-size: 20px; text-align: center; color: #002d56;}
.wrap-food .right table .vacation strong::after {content: ''; position: absolute; left: calc(50% - 6px); bottom: 0; width: 12px; height: 12px; background: #002d56; border-radius: 100%;}
.wrap-food .right table .no-menu {background: #f5f5f5; font-family: 'Noto Regular'; font-size: 16px; color: #666;}
.wrap-food .right table .no-menu2 {background: #f5f5f5; font-family: 'Noto Regular'; font-size: 16px; color: #002d56;}
.wrap-food .right table .menu {font-family: 'Noto Regular'; font-size: 16px; color: #666; vertical-align: top;}
.wrap-food .right table .menu ul {min-height: 370px}
.wrap-food .right table .menu .point {color: #e63b53;}
.wrap-food .right table .stuff {position: absolute; left: 0; bottom: 90px; width: 100%;}
.wrap-food .right table .calorie {position: absolute; left: 0; bottom: 55px; width: 100%;}
.wrap-food .right table .pay {position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background: #f4f5f9; border-top: 1px solid #e2e2e2; font-family: 'Noto Regular'; font-size: 16px; line-height: 40px; color: #008395;}
.wrap-food .right .notice {margin-top: 26px; font-family: 'Noto Regular'; font-size: 18px; color: #666;}
.wrap-food .right .notice li {position: relative; padding-left: 20px;}
.wrap-food .right .notice li::before {content: '*'; position: absolute; left: 0; top: 4px; font-family: 'Noto Regular'; font-size: 18px; color: #666;}

@media all and (max-width: 1300px) {
  .wrap-food .left {width: 100%;}
  .wrap-food .right {width: 100%; padding-left: 0; padding-top: 50px;}
}

@media all and (max-width: 860px) {
  .detail table  {overflow-x: hidden; min-height: 200px;}
  .detail.on {min-height: auto;}
  .detail.no-scroll {min-height: auto;}
  .detail table {width: 1300px;}
  .detail.no-scroll table {width: 100%;}
  .detail:after {content: ''; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; background: rgba(31,59,101,0.2) url('../images/img_mobile_text.png') no-repeat center 40px;}
  .detail.on:after,
  .detail.no-scroll:after {display: none;}
  .detail thead th,
  .detail tbody th,
  .detail tbody td {padding: 10px 8px; font-size: 16px;}

  .wrap-food .row-tab {padding: 10px 20px;}
  .wrap-food .row-tab ul {padding: 0;}
  .wrap-food .row-tab li {height: auto; padding-left: 0; padding: 5px 20px 5px 0; line-height: normal}
  .wrap-food .row-tab a {font-size: 15px;}
  .wrap-food .row-tab a::before {top: 8px;}
}

@media all and (max-width: 700px) {
  .wrap-food .right .notice {font-size: 16px;}
}

@media all and (max-width: 500px) {
  .detail thead th,
  .detail tbody th,
  .detail tbody td {font-size: 14px !important;}
  .wrap-food .row-food {margin-top: 30px;}
  .wrap-food .left .date {margin-top: 20px;}
  .wrap-food .left .title {font-size: 22px;}
  .wrap-food .right {padding-top: 30px;}
  .wrap-food .right .detail {margin-top: 20px;}
  .wrap-food .right .title {padding: 8px 0 5px 35px; font-size: 16px;}
  .wrap-food .right table .vacation strong {font-size: 14px;}
  .wrap-food .right table .pay {font-size: 14px;}
}