/********************
*** Farm1 ***
********************/
#farm1 {
    position: relative; ➊ /* farm1 공간을 2차원, 3차원 특징으로 변경합니다. */
    width: 100%;
    height: 800px;
    background-image: url(../img/farm/farm1/farm1_bg.png);
}

/* 좌우 배치 작업을 할 때 absolute 속성값이 적용된 영역에서는 left: 0을 생략할 수 있습니다. */
#farm1 .leftRice1 {
    position: absolute; ➋ /* 왼쪽 벼를 3차원 특징으로 변경합니다. */
    width: 390px;
    height: 670px;
    background-image: url(../img/farm/farm1/leftrice.png);
}

#farm1 .farmer {
    position: absolute; /* 농부를 3차원 특징으로 변경합니다. */
    width: 747px;
    height: 1078px;
    background-image: url(../img/farm/farm1/farmer.png);
    left: 50%; /* 왼쪽에서 50% 지점에 배치합니다. */
    margin-left: -310px; /* 왼쪽에서 -310px 떨어진 지점에 배치합니다. */
}

#farm1 .rightRice1 {
    position: absolute; ➌ /* 오른쪽 벼를 3차원 특징으로 변경합니다. */
    width: 335px;
    height: 570px;
    background-image: url(../img/farm/farm1/rightrice.png);
    right: 0; /* farm1 공간을 기준으로 오른쪽 끝에 배치합니다. */
    margin-top: 100px;
}

/* 마진 병합 현상을 막기 위해 margin-top 속성 대신 top 속성을 사용합니다. */
#farm1 .farmSpeechWrap { 
    position: relative; /* farmSpeechWrap 서랍장을 2차원, 3차원 특징으로 변경합니다. */
    top: 250px; ➍ /* 상단에서 250px 떨어진 지점에 배치합니다. */
    left: 150px;
}

/* “식재료만 넣은 ~” 텍스트 스타일을 변경합니다. */
#farm1 .farmSpeechWrap .farmSpeech {
    color: #895C2F;
    font-size: 18px;
    line-height: 27px; /* 글자의 위아래 간격을 27px로 조정합니다. */
}