@charset "utf-8";
/* CSS Document */

/** base **/
html,
body{
    height:100%;
    overflow-y:hidden;
}
body{
    position:relative;
    min-width:1200px;
    font-family:  "Dotum", "Arial", sans-serif;
    font-size:12px;
    color:#333;
}



.posNum{
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:50px;
    margin:-25px 0 0 -150px;
    background:#111;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    line-height:50px;
    z-index:9999;
}







/** scrollBox **/
.scrollBox{
    min-width:1200px;
    height:100%;
    position:relative;
}

.scrollBox .wrap{
    min-width:1200px;
    position:relative;
    overflow:hidden;
}

.scrollBox .wrap > div{
    height:1000px;
    position:relative;

}

.scrollBox .wrap .objs > li{
    position:absolute;
    left:50%;	/* 브라우저 창의 크기에 따라 반응을 해야 해서 가운데 기준을 잡는다 */
}


#scene00 {
    height:114px;
    background:white;
}


/** gnb **/
.gnb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 114px;
    background: #ffffff;
    border-top: 2px solid #0b43b3;
    z-index: 100;
}


.gnb h1 {
    position: absolute;
    left: 50%;
    margin-left: -553px;
    bottom: 31px;
}

.gnb .left {
    position: absolute;
    bottom: 82px;
    left: 50%;
    margin-left: -553px;
}

.gnb .left div {
    background: url("../img/common/gnb/line.jpg") no-repeat left top;
    float: left;
    padding-left: 12px;
    margin-left: 12px;
}

.gnb .left .list1 {
    left: 0;
    background: none;
    margin-left: 0;
    padding-left: 0;
}

.gnb .innerGnb .list1 {
    width: 68px;
    height: 52px;
    position: absolute;
    left: 50%;
    margin-left: -375px;
    top: 62px;
}

.gnb .innerGnb .list2 {
    width: 54px;
    height: 52px;
    position: absolute;
    left: 50%;
    margin-left: -212px;
    top: 62px;
}

.gnb .innerGnb .list3 {
    width: 67px;
    height: 52px;
    position: absolute;
    left: 50%;
    margin-left: -63px;
    top: 62px;
}

.gnb .innerGnb .list4 {
    width: 54px;
    height: 52px;
    position: absolute;
    left: 50%;
    margin-left: 100px;
    top: 62px;
}

.gnb .innerGnb .list5 {
    width: 70px;
    height: 52px;
    position: absolute;
    left: 50%;
    margin-left: 248px;
    top: 62px;
}

.gnb .innerGnb .center1 {
    position: absolute;
    left: 50%;
    margin-left: -266px;
    bottom: 35px;
}

.gnb .innerGnb .center2 {
    position: absolute;
    left: 50%;
    margin-left: -110px;
    bottom: 35px;
}

.gnb .innerGnb .center3 {
    position: absolute;
    left: 50%;
    margin-left: 46px;
    bottom: 35px;
}

.gnb .innerGnb .center4 {
    position: absolute;
    left: 50%;
    margin-left: 202px;
    bottom: 35px;
}

.gnb .reservation {
    position: absolute;
    left: 50%;
    margin-left: 402px;
    bottom: 16px;
}

.gnb .right .list1 {
    position: absolute;
    left: 50%;
    margin-left: 403px;
    bottom: 83px;
}

.gnb .right .list2 {
    position: absolute;
    left: 50%;
    margin-left: 484px;
    bottom: 83px;
}

#mega {
    width: 100%;
    /*height: 300px;*/
    height: 0;
    background: #f8f8f8;
    position: absolute;
    left: 0;
    top: 114px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 2px solid #0b40ae;
    z-index: 999;
    overflow: hidden;
}

#mega .line .line01 {
    position: absolute;
    left: 50%;
    top: 32px;
    margin-left: -263px;
}

#mega .line .line02 {
    position: absolute;
    left: 50%;
    top: 32px;
    margin-left: -108px;
}

#mega .line .line03 {
    position: absolute;
    left: 50%;
    top: 32px;
    margin-left: 48px;
}

#mega .line .line04 {
    position: absolute;
    left: 50%;
    top: 32px;
    margin-left: 204px;
}

#mega .bar {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -385px;
    z-index: 9999;
}

#mega .menu1 {
    width: 80px;
    height: 297px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -380px;
}

#mega .menu1 > li {
    text-align: center;
    margin-top: 26px;
}

#mega ul .num {
    width: 47px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -23px;
    margin-top: 10px;
    overflow: hidden;
}

#mega ul .num img {
    position: absolute;
    left: 0;
    top: 0;
}

#mega ul .num .fir {
    left: 50%;
    margin-left: -10px;
}

#mega ul .num .two {
    top: -40px;
}

#mega ul .first {
    margin-top: 80px;
}

#mega .menu2 {
    width: 110px;
    height: 297px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -239px;
}

#mega .menu2 > li {
    text-align: center;
    margin-top: 26px;
}

#mega ul .num {
    width: 47px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -23px;
    margin-top: 10px;
    overflow: hidden;
}

#mega ul .num img {
    position: absolute;
    left: 0;
    top: 0;
}

#mega ul .num .fir {
    left: 50%;
    margin-left: -10px;
}

#mega ul .num .two {
    top: -40px;
}

#mega ul .first {
    margin-top: 80px;
}

#mega .menu3 {
    width: 84px;
    height: 297px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -71px;
}

#mega .menu3 > li {
    text-align: center;
    margin-top: 26px;
}

#mega ul .num {
    width: 47px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -23px;
    margin-top: 10px;
    overflow: hidden;
}

#mega ul .num img {
    position: absolute;
    left: 0;
    top: 0;
}

#mega ul .num .fir {
    left: 50%;
    margin-left: -10px;
}

#mega ul .num .two {
    top: -40px;
}

#mega ul .first {
    margin-top: 80px;
}

#mega .menu4 {
    width: 82px;
    height: 297px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: 86px;
}

#mega .menu4 > li {
    text-align: center;
    margin-top: 26px;
}

#mega ul .num {
    width: 47px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -23px;
    margin-top: 10px;
    overflow: hidden;
}

#mega ul .num img {
    position: absolute;
    left: 0;
    top: 0;
}

#mega ul .num .fir {
    left: 50%;
    margin-left: -10px;
}

#mega ul .num .two {
    top: -40px;
}

#mega ul .first {
    margin-top: 80px;
}

#mega .menu5 {
    width: 49px;
    height: 297px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: 259px;
}

#mega .menu5 > li {
    text-align: center;
    margin-top: 26px;
}

#mega ul .num {
    width: 47px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -23px;
    margin-top: 10px;
    overflow: hidden;
}

#mega ul .num img {
    position: absolute;
    left: 0;
    top: 0;
}

#mega ul .num .fir {
    left: 50%;
    margin-left: -10px;
}

#mega ul .num .two {
    top: -40px;
}

#mega ul .first {
    margin-top: 80px;
}


/*login*/
#login {
    display: none;

}
#login .bg {
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;

}

#login .main {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -183px 0 0 -171px;
    z-index: 9999;


}

#login .main .close {
    position: absolute;
    right: 30px;
    top: 22px;
    z-index: 9999;
    cursor: pointer;

}

#login .main .idtextBox {
    width: 183px;
    height: 28px;
    position: absolute;
    top: 88px;
    left: 32px;

}

#login .main .idtextBox input {
    width: 183px;
    height: 26px;
    background: #e6e6e6;
    font-size: 14px;
    color: #a7a7a7;
    border: 1px solid #bfbfbf;
}

#login .main .pwtextBox {
    width: 183px;
    height: 28px;
    position: absolute;
    top: 124px;
    left: 32px;

}

#login .main .pwtextBox input {
    width: 183px;
    height: 26px;
    background: #e6e6e6;
    font-size: 14px;
    color: #a7a7a7;
    border: 1px solid #bfbfbf;
}


#login .main .loginbtn {
    position: absolute;
    right: 30px;
    top: 88px;
    z-index: 9999;
    cursor: pointer;

}

#login .main .joinbtn {
    position: absolute;
    right: 30px;
    top: 180px;
    z-index: 9999;
    cursor: pointer;
}

#login .main .facebook {
    position: absolute;
    left: 32px;
    bottom: 74px;
    z-index: 9999;
    cursor: pointer;
}


#login .main .naver {
    position: absolute;
    left: 108px;
    bottom: 74px;
    z-index: 9999;
    cursor: pointer;
}


#login .main .kakao {
    position: absolute;
    left: 185px;
    bottom: 74px;
    z-index: 9999;
    cursor: pointer;
}



#login .main .twiter {
    position: absolute;
    left: 262px;
    bottom: 74px;
    z-index: 9999;
    cursor: pointer;
}

#login .main .findid {
    position: absolute;
    left: 44px;
    bottom: 20px;
    z-index: 9999;
    cursor: pointer;
}


#login .main .findpw {
    position: absolute;
    left: 223px;
    bottom: 20px;
    z-index: 9999;
    cursor: pointer;
}


/** Scene01 **/

#scene01{
    background:white;
    height: 206px;
}


#scene01 .mainvisual {
    position: absolute;
    left: 50%;
    margin-left: -1000px;
    top: 0;
}

#ob01 {
    position: absolute;
    left: 141px;
    bottom: -26px;
    z-index: 99;
}


#ob02 {
    position: absolute;
    right: 48px;
    bottom: -40px;
    z-index: 99;
}






/** Scene02 **/

#scene02{
    height:52px;
    background:white;
}

#scene02 .lnb .bg {
    position: absolute;
    left: 50%;
    margin-left: -464px;
    top: -15px;
}



#scene02 .lnb .lnb01 {
    position: absolute;
    left: 50%;
    margin-left: -475px;
    top: -15px;
}



#scene02 .lnb .lnb02 {
    position: absolute;
    left: 50%;
    margin-left: -284px;
    top: -15px;
}

#scene02 .lnb .lnb02:hover {
    margin-left: -285px;
}


#scene02 .lnb .lnb03 {
    position: absolute;
    left: 50%;
    margin-left: -94px;
    top: -15px;
}

#scene02 .lnb .lnb03:hover {
    margin-left: -95px;
}



#scene02 .lnb .lnb04 {
    position: absolute;
    left: 50%;
    margin-left: 95px;
    top: -15px;
}


#scene02 .lnb .lnb04:hover {
    margin-left: 94px;
}



#scene02 .lnb .lnb05 {
    position: absolute;
    left: 50%;
    margin-left: 285px;
    top: -15px;
}


#scene02 .lnb .lnb05:hover {
    margin-left: 284px;
}




/** Scene03 **/
#scene03{
    height:865px;
    background:white;
}

#scene03 .quickmenu {
    position: fixed;
    right: 168px;
    top: 286px;
    z-index: 99;
}

#scene03 .quickmenu .btn01 {
    position: absolute;
    left: 32px;
    top: 54px;
}

#scene03 .quickmenu .btn02 {
    position: absolute;
    left: 32px;
    top: 132px;
}

#scene03 .quickmenu .btn03 {
    position: absolute;
    left: 32px;
    top: 211px;
}

#scene03 .quickmenu .btn03 {
    position: absolute;
    left: 32px;
    top: 211px;
}

#scene03 .quickmenu .btn04 {
    position: absolute;
    left: 68px;
    bottom: 10px;
}

#scene03 .contents .main {
    position: absolute;
    left: 50%;
    margin-left: -474px;
    top: 0;
}

#scene03 .contents .main .joinus {
    position: absolute;
    left: 378px;
    bottom: 88px;
}



/** footer **/
.footer{
    height:239px;
    background:url("../img/common/footer/footer.jpg")no-repeat center top;
}