food.css

/* FOOD 페이지에만 적용할 스타일 */

/* 배경색 변경 */
body {
  background-color: #f8ff65;}

section,
.food-reveal,
.left-panel,
.right-panel,
.food-slider,
.slider-track {
  background-color: transparent;}



.back-button {position: fixed;
              top: 30px; left: 40px;
              width: 50px; height: 50px;
              text-decoration: none;
              font-size: 1.7rem; color: white;
              background-color: black;
              border-radius: 50%;  
              font-weight: bold; text-align: center;
              line-height: 50px;
              transition: background-color 0.3s, color 0.3s;
              z-index: 100;}
.back-button:hover {background-color: #f8ff65;
                    color: black;}


.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  background-color: transparent;
padding-top: 20px;}



/* 로고 스타일 */
.logo {
  font-size: 1.5rem;
  font-weight: 800;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; 
  font-family: 'GmarketSansMedium', sans-serif;
  font-weight: bold; 
  color: black;}



/* 메인 타이틀 스타일 */
h1 {
  font-size: 2.5rem;
  color: #1c6b4c;
  text-align: center;
  margin-top: 60px;}

/*음식사*/
.food-slider {width: 100%;
              overflow: hidden;
              margin-top: 100px;
              border-top: 1.5px solid black;     
              border-bottom: 1.5px solid black; }

.slider-track {display: flex; width: 100%;
              animation: slide 20s linear infinite;}

.slider-track img {width: 200px;
                  height: 200px;
                  object-fit: cover;
                  margin-right: 20px;
                  border-radius: 8px;
                  transition: transform 0.3s ease;
                  cursor: pointer;}

.food-slider:hover .slider-track {
  animation-play-state: paused;}

@keyframes slide {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}}

.vertical-line {width: 1.5px;
                height: 100%; 
                background-color: black;
                margin-top: 0;}      
.food-reveal {display: flex;
              width: 100%;
              height: 500px;
              border-top: 1.5px solid black;
              margin-top: -1.5px;}
.left-panel, .right-panel {flex: 1;
                          padding: 50px;
                          box-sizing: border-box;}
.left-panel {display: flex;
            align-items: center;
            justify-content: center;}
.left-panel img {max-width: 100%;
                max-height: 100%;
                border-radius: 8px;}
.right-panel {font-size: 1.1rem;
              line-height: 1.6;}

.horizontal-line {
  width: 100%;
  height: 1.5px;
  background-color: black;
  margin-top: 0;
}