body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(172, 255, 255);
}

.responsive-image{
  width: 100%;
  margin: auto;
  top: 10%;
  max-width: 900px; /* 이미지 최대 너비 지정 */
  display: flex;
  position: relative; /* z-index를 적용하기 위해 position 설정 */
  z-index: 3000; /* 높은 z-index 값으로 다른 요소들 위에 위치 */
}

#mainlogo {
  width: 100%;
  margin: auto;
  top: 10%;
  max-width: 900px; /* 이미지 최대 너비 지정 */
  display: flex;
  position: relative; /* z-index를 적용하기 위해 position 설정 */
  z-index: 3000; /* 높은 z-index 값으로 다른 요소들 위에 위치 */
}

.contentlogo-image{
  width: 100%;
  margin: auto;
  top: 10%;
  max-width: 300px; /* 이미지 최대 너비 지정 */
  display: flex;
  position: relative; /* z-index를 적용하기 위해 position 설정 */
  z-index: 3000; /* 높은 z-index 값으로 다른 요소들 위에 위치 */
}

#contentlogo {
  width: 100%;
  margin: auto;
  top: 10%;
  max-width: 300px; /* 이미지 최대 너비 지정 */
  display: flex;
  position: relative; /* z-index를 적용하기 위해 position 설정 */
  z-index: 3000; /* 높은 z-index 값으로 다른 요소들 위에 위치 */
}

.buttons {
  position: absolute;
  width: 100%;
  top: 45%;            /* 화면의 중간 높이 */
  transform: translateY(-50%); /* Y축 중심으로 이동 */
  text-align: center; /* 텍스트 중앙 정렬 */
  z-index: 1000;
}

.studio-btn.main {
  position: relative;
  right: 10%;         
  cursor: pointer;     /* 커서 스타일 */

    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 160px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    text-align: center;
    padding: 16px 14px 18px;

    background-color: #D35359; /* 배경색 */
    color: white;        /* 글자색 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    height: 48px;
}
.studio-btn.main:hover{
  color: #fff;
  background-color: #6a2a2d; /* 배경색 */
}

.lab-btn.main {
  position: relative;
  left: 10%;          
  cursor: pointer;     /* 커서 스타일 */

    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 160px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    text-align: center;
    padding: 16px 14px 18px;

    background-color: #008CBA; /* 배경색 */
    color: white;        /* 글자색 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    height: 48px;
}
.lab-btn.main:hover{
  color: #fff;
  background-color: #001c25;;
}

/*content page buttons*/

.home-btn {
  margin-right: 10%;
  margin-bottom: 1%;
  position: relative;
  cursor: pointer;     /* 커서 스타일 */

    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 160px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    text-align: center;
    padding: 16px 14px 18px;

    background-color: #FFF;
    color: #000;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    height: 48px;
}

.home-btn:hover{
  background-color: #606060;
  color: #000;
}

.studio-btn.right{
  position: relative;
  cursor: pointer;     /* 커서 스타일 */

    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 160px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    text-align: center;
    padding: 16px 14px 18px;

    background-color: #D35359; /* 배경색 */
    color: white;        /* 글자색 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    height: 48px;
}

.studio-btn.right:hover{
  color: #fff;
  background-color: #6a2a2d; /* 배경색 */
}

.lab-btn.right{
  position: relative;
  cursor: pointer;     /* 커서 스타일 */

    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 160px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    text-align: center;
    padding: 16px 14px 18px;

    background-color: #008CBA; /* 배경색 */
    color: white;        /* 글자색 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    height: 48px;
}

.lab-btn.right:hover{
  color: #fff;
  background-color: #001c25;;
}


/*studio page*/
#studio-content {
  left: 50%;
  position: relative;
  margin: auto;
  align-items: center;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2000;
}

#studio-content h2 {
  color: #fff;
  text-shadow: 1px 1px 3px #000000;
}

/*lab page*/
#lab-content {
  left: 50%;
  position: relative;
  margin: auto;
  align-items: center;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2000;
}

#lab-content h2 {
  color: #fff;
  text-shadow: 1px 1px 3px #000000;
}

/*content bottons*/
.content-btn {
  margin: 5px;
  padding: 8px 16px;
  background-color: #4CAF50; /* 진한 녹색 배경 */
  color: white; /* 텍스트 색상은 흰색 */
  border: none; /* 테두리 없음 */
  cursor: pointer; /* 커서는 포인터 */
}


/*Car*/
.car {
  position: absolute;
  width: 340px;
  height: 280px;
  top: 1%;
  left: 57%;
  z-index: 9;
}

.car > div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.car-body {
  background: url(car.png) no-repeat;
  background-size: cover;
}
.tires {
  background: url(tire.png) no-repeat;
  background-size: cover;
}


/*Ground*/
.ground {
  position: absolute;
  width: 100%;
  height: 40%;   /* 화면의 하단 절반을 차지 */
  bottom: 0;     /* 화면의 하단에 맞춤 */
  background: #71b90d;  /* 갈색 ground */
}

.road {
  position: relative;
  width: 300px;
  height: 100%;
  bottom: 26%; /* This ensures that the top of the road aligns with the top of the ground */
  margin: auto;
  background: #354852;
  border-left: 8px solid #ddd;
  border-right: 8px solid #ddd;
  overflow: hidden;
  display: block;
}


.lines {
  position: relative;
  width: 0;
  height: 100%;
  top: -20%;
  margin: auto;
  border-left: 8px dashed #bf9000;
}


/*
.mountain {
  position: absolute;
  width: 1024px;
  height: 720px;
  top: 40%;
  left: 30%;  
  background: url(/Users/ddoazoo/Sites/core-2-interaction/studio/projects/catalog/new-york-5216120.png) no-repeat;
  background-size: 1024px 720px;
      -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
*/

.mountain {
  position: absolute;
  width: 1600px;
  height: 524px;     /* 높이는 고정값을 유지하거나 적절한 비율로 조정 */
  top: 50%;        /* 중앙 정렬을 위해 상단을 50%로 설정 */
  left: 50%;       /* 중앙 정렬을 위해 왼쪽을 50%로 설정 */
  transform: translate(-50%, -50%); /* 중앙 정렬을 완벽하게 맞추기 위해 변환 사용 */
  background: url(background.png) no-repeat;
  background-size: cover; /* 배경 크기를 div에 맞춤 */
}