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

#kitchen .leftPan {    ➊
    float: left; /* 조리기구를 왼쪽 끝에 배치합니다. */
    width: 253px;
    height: 384px;
    background-image: url(../img/kitchen/pan.png);
}

#kitchen .rightPot {
    float: right; /* 냄비를 오른쪽 끝에 배치합니다. */
    width: 243px;
    height: 132px;
    background-image: url(../img/kitchen/pot.png);
}

#kitchen .steamWrap {
    position: relative; /* steamWrap 서랍장을 2차원, 3차원 특징으로 변경합니다. */ ➋
    width: 483px;
    height: 457px;
    left: 50%;
    margin-left: -275px;
    top: -100px;
 
/* leftPan과 rightPot 영역에 float 속성을 사용했으므로 clear 속성으로 float 속성의 기능을 해제합니다. */
    clear: both;
}

#kitchen .steamWrap .steam {
    position: absolute; /* 스팀 기계를 3차원 특징으로 변경합니다. */    ➌
    width: 479px;
    height: 457px;
    background-image: url(../img/kitchen/steam.png);
    z-index: 100; /* z축을 100으로 조정합니다. */
}

#kitchen .steamWrap .bubble1 {
     /* 스팀 연기를 3차원 특징으로 변경합니다. */   ➍
    width: 55px;
    height: 56px;
    background-image: url(../img/kitchen/bubble.png);
    margin-top: 230px;
    z-index: 50; /* z축을 50으로 조정합니다. */
}

#kitchen .kitchenBubble {   ➎
    position: absolute; /* 말풍선을 3차원 특징으로 변경합니다. */
    right: 0; /* kitchen 공간을 기준으로 오른쪽 끝에 배치합니다. */
    top: 400px; /* kitchen 공간을 기준으로 상단에서 400px 떨어진 지점에 배치합니다. */
}