/********************
*** Intro ***
********************/
#intro {
    width: 100%;
    height: 1600px;
    background-image: url(../img/intro/intro_bg.png);
}

/* 중앙 정렬 공식 : left: 50%, margin-left: -width 절반값 */
#intro .introWrap {
    position: relative;
    width: 760px;
    height: 516px;
    left: 50%;
    margin-left: -380px;
    top: 100px;
}

#intro .introWrap .logo {
    position: absolute;
    width: 760px;
    height: 516px;
    background-image: url(../img/intro/logo.png);
    z-index: 100;
}

#intro .introWrap .lion {
    position: absolute;
    width: 161px;
    height: 161px;
    background-image: url(../img/intro/lion.png);
    margin: 80px 0 0 30px;
}

#intro .introWrap .rabbit {
    position: absolute;
    width: 105px;
    height: 129px;
    background-image: url(../img/intro/rabbit.png);
    margin: 90px 0 0 580px;
}

#intro .introWrap .bear {
    position: absolute;
    width: 112px;
    height: 105px;
    background-image: url(../img/intro/bear.png);
    margin: 310px 0 0 560px;
    z-index: 200;
}

#intro .introWrap .monkey {
    position: absolute;
    width: 85px;
    height: 93px;
    background-image: url(../img/intro/monkey.png);
    margin: 310px 0 0 50px;
    z-index: 200;
}

#intro .cloudWrap {
    position: relative;
    width: 100%;
    height: 1050px;
}

/* 왼쪽 끝 정렬 방법 : absolute, left: 0 */
#intro .cloudWrap .leftCloud {
    position: absolute;
    width: 934px;
    height: 816px;
    background-image: url(../img/intro/cloud1.png);
    left: 0;
    z-index: 2;
}

/* 오른쪽 끝 정렬 방법 : absolute, right: 0 */
#intro .cloudWrap .rightCloud {
    position: absolute;
    width: 843px;
    height: 858px;
    background-image: url(../img/intro/cloud2.png);
    right: 0;
    z-index: 1;
}

#intro .cloudWrap .dragonfly {
    position: absolute;
    width: 366px;
    height: 228px;
    background-image: url(../img/intro/dragonfly.png);
    top: 820px;
}