@charset "UTF-8";
/* CSS Document */
.restaurantAlbumBox .restaurantAlbumList li {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }

/*****列表*****/
@media (min-width: 961px) and (max-width: 1180px) {
  .restaurantList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px; } }

@media (min-width: 1181px) {
  .restaurantList li {
    padding: 0 0 50px; } }

@media (min-width: 961px) and (max-width: 1180px) {
  .restaurantList li {
    width: 50%;
    padding: 30px 15px 40px; } }

@media (max-width: 960px) {
  .restaurantList li {
    padding: 20px 0;
    margin-top: 20px; } }

@media (max-width: 500px) {
  .restaurantList li:first-of-type {
    margin-top: 0; } }

@media (min-width: 1181px) {
  .restaurantList li + li {
    margin-top: 50px; } }

@media (min-width: 1181px) {
  .restaurantList .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; } }

@media (min-width: 1181px) {
  .restaurantList .Img {
    width: calc(100% - 460px); } }

.restaurantList .Img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

@media (min-width: 1181px) {
  .restaurantList .Txt {
    width: 460px;
    padding-top: 15px;
    padding-left: 50px; } }

@media (max-width: 1180px) {
  .restaurantList .Txt {
    position: relative; } }

@media (min-width: 501px) and (max-width: 1180px) {
  .restaurantList .Txt {
    padding: 25px 10px 0; } }

@media (max-width: 500px) {
  .restaurantList .Txt {
    padding: 15px 0 0; } }

.restaurantList .diningLogo {
  display: block; }
  @media (min-width: 1181px) {
    .restaurantList .diningLogo {
      margin-bottom: 20px;
      min-height: 80px; } }
  @media (max-width: 1180px) {
    .restaurantList .diningLogo {
      position: absolute;
      bottom: 100%;
      left: 0;
      background-color: rgba(248, 248, 248, 0.9); } }
  .restaurantList .diningLogo img {
    display: block; }
    @media (max-width: 1180px) {
      .restaurantList .diningLogo img {
        padding: 10px 15px; } }

.restaurantList .top {
  position: relative;
  padding-bottom: 15px; }
  @media (min-width: 501px) {
    .restaurantList .top {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; } }
  @media (max-width: 500px) {
    .restaurantList .top {
      text-align: center; } }
  .restaurantList .top::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% + 50px + 35px);
    height: 1px;
    border-bottom: 1px solid #fcc800; }
    @media (max-width: 1180px) {
      .restaurantList .top::before {
        width: 100%; } }

.restaurantList h3 {
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis; }
  @media (min-width: 501px) {
    .restaurantList h3 {
      margin-right: 20px; } }

.restaurantList .floorBox {
  padding-top: 5px;
  color: #fcc800; }

.restaurantList .txtExp {
  margin-top: 15px;
  margin-bottom: 10px;
  color: #454545; }
  @media (min-width: 1181px) {
    .restaurantList .txtExp {
      max-height: 75px; } }
  @media (max-width: 1180px) {
    .restaurantList .txtExp {
      max-height: 50px; } }

.restaurantList .timeBox {
  color: #959595; }
  .restaurantList .timeBox b {
    font-weight: 400; }

.restaurantList .telBox {
  margin-top: 5px;
  color: #959595; }

@media (min-width: 1181px) {
  .restaurantList .btn {
    margin-top: 10%;
    padding-top: 10px; } }

@media (max-width: 1180px) {
  .restaurantList .btn {
    margin-top: 20px; } }

@media (max-width: 500px) {
  .restaurantList .btn {
    text-align: center; } }

.restaurantList .btn a {
  margin: 0; }

@media (min-width: 1181px) {
  .restaurantList li:nth-of-type(odd) .Img {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2; }
  .restaurantList li:nth-of-type(odd) .Txt {
    padding-left: 0;
    padding-right: 50px; }
  .restaurantList li:nth-of-type(odd) .top::before {
    right: auto;
    left: 0; } }

/*****內頁*****/
.titleArea {
  margin-bottom: 40px; }
  @media (min-width: 641px) {
    .titleArea {
      padding-bottom: 40px;
      border-bottom: 1px solid #e5e5e5; } }
  .titleArea .articleTitle {
    padding-top: 20px; }
    @media (max-width: 1180px) {
      .titleArea .articleTitle {
        text-align: center; } }
  .titleArea .Img {
    position: relative; }
    @media (min-width: 1181px) {
      .titleArea .Img {
        margin-top: 40px; } }
    @media (max-width: 1180px) {
      .titleArea .Img {
        margin-top: 30px; } }
    .titleArea .Img img {
      display: block;
      width: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
  @media (max-width: 1180px) {
    .titleArea img {
      display: block;
      margin-left: auto;
      margin-right: auto; } }
  .titleArea .albumBtnBox {
    position: absolute;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .titleArea .side_album {
    display: none; }

.restaurantAlbumBox {
  margin-top: 50px;
  margin-bottom: 50px; }
  .restaurantAlbumBox span {
    display: block;
    font-size: 15px;
    color: #191919; }
  .restaurantAlbumBox .restaurantAlbumList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 25px 0; }
    .restaurantAlbumBox .restaurantAlbumList li {
      width: 25%;
      padding: 0;
      border: 1px solid #fff;
      cursor: pointer; }
      @media (max-width: 500px) {
        .restaurantAlbumBox .restaurantAlbumList li {
          width: calc(100% / 3); } }
      .restaurantAlbumBox .restaurantAlbumList li:hover {
        opacity: .5; }
      .restaurantAlbumBox .restaurantAlbumList li img {
        display: block;
        width: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }