@charset "UTF-8";

.diet .info {position: relative; margin-top: 50px; margin-bottom: 60px;}
.diet .info .thumb {position: absolute; left: 0; top: -50px; width: 90%; max-width: 27.4%;}
.diet .info .thumb img {width: 100%;}
.diet .info .box-info {padding-left: 50px;}
.diet .info dl {padding: 30px 0 40px 28%; border: 10px solid #edeff5;}
.diet .info dt {position: relative; margin-top: 6px; margin-bottom: 17px; padding-bottom: 18px; font-family: 'Noto DemiLight'; font-size: 28px; color: #000; line-height: 1.2;}
.diet .info dt:after {content: ''; position: absolute; left: 0; bottom: 0; width: 35px; height: 1px; background: #0067d4;}
.diet .info dd {font-family: 'Noto Light'; font-size: 16px; color: #5b5b5b; line-height: 1.8;}

.diet .date {position: relative; text-align: center; border: 2px solid #d6d6d6; border-bottom: 0;}
.diet .date strong {display: block; padding: 21px 0; font-family: 'Noto Medium'; font-size: 24px; color: #004d5d;}
.diet .date label {display: none;}
.diet .date .control {position: absolute; top: 50%; margin-top: -18px; }
.diet .date .control input {width: 30px; height: 30px; text-indent: -9999px;}
.diet .date .control.prev {left: 30px;}
.diet .date .control.prev input {background: url('../images/btn-date-prev.png') no-repeat center center; cursor: pointer;}
.diet .date .control.next {right: 30px;}
.diet .date .control.next input {background: url('../images/btn-date-next.png') no-repeat center center; cursor: pointer;}
.diet .date .control:after {position: absolute; top: 3px; left: 0; font-family: 'Noto Regular'; font-size: 15px; color: #333; text-indent: 0;}
.diet .date .control.prev:after {content: '이전'; left: 50px;}
.diet .date .control.next:after {content: '다음'; left: -50px;}

.diet .box-table {position:relative; line-height: 1.6;}
.diet .box-table table {position:relative; border-left:1px solid #bfbfbf; border-right:1px solid #bfbfbf;}
.diet .box-table thead th {padding:10px 10px; background:#004d5d; border-right:1px solid #03343f; border-bottom:1px solid #03343f; font-family: 'Noto Regular'; font-weight: normal; font-size:16px; line-height: 1.3; color:#fff; }
.diet .box-table thead th.title {font-size: 18px;}
.diet .box-table thead th:nth-child(7),
.diet .box-table thead th:nth-child(8) {display: none;}
.diet .box-table tbody th {padding:12px 20px; background:#fbfbfb; border-right:1px solid #bfbfbf; border-bottom:1px solid #bfbfbf; font-family: 'Noto DemiLight'; font-weight: normal; font-size:16px; color:#666; }
.diet .box-table tbody td {padding:22px 19px; background:#fff; border-right:1px solid #bfbfbf; border-bottom:1px solid #bfbfbf; font-family: 'Noto Light'; font-size:14px; color:#666; }
.diet .box-table tbody td:first-child {background: #f1f1f1; font-family: 'Noto Regular'; font-size: 16px; color: #222;}
.diet .box-table tbody td:nth-child(7),
.diet .box-table tbody td:nth-child(8) {display: none;}
.diet .box-table .list li {position: relative; padding-left: 13px;}
.diet .box-table .list li:after {content: ''; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; background: #666666;}
.diet .box-table .align-l {text-align:left;}
.diet .box-table .align-c {text-align:center;}
.diet .box-table .align-r {text-align:right;}

@media all and (max-width:960px) {
  .diet .box-table {overflow-x: hidden;}
  .diet .box-table table {width:870px;}
  .diet .box-table:after {content:''; position:absolute; right:0px; top:0px; width:100%; height:100%; background:rgba(60,81,82,0.4) url('../images/img_mobile_text.png') no-repeat center center;}
  .diet .box-table.on:after {display:none;}
  .diet .box-table thead th,
  .diet .box-table tbody th,
  .diet .box-table tbody td {padding:10px 8px;font-size:16px;}
}

@media all and (max-width:720px) {
    .diet .info .box-info {padding-left: 0;}
    .diet .info .thumb {left: 30px;top: 30px;width: 90%;max-width: 27.5%;}
    .diet .info dl {padding: 26% 30px 30px 30px;}
    .diet .date strong {font-size: 18px;}
    .diet .date .control {margin-top: -17px;}
    .diet .date .control.prev {left: 20px;}
    .diet .date .control.next {right: 20px;}
    .diet .date .control:after {top: 2px;}
}