@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
    background-position: center top;
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

#container {
    width: 836px;
    height: 710px;
    margin: 20px 50px 60px 70px;
}

article {
    background-color: white;
    margin: -5px auto;
}

    article .img {
        padding: 60px 0 0 100px;
        background-repeat: no-repeat;
        width: 700px;
        
        max-height: 380px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

header #topbar {
    width: 836px;
    height: 53px;
    background-image: url('../images/top.png');
    background-repeat: no-repeat;
}


header #logo {
    position: absolute;
    margin-top: 0px;
    margin-left: 120px;
}

    header #logo #logoback {
        background-color: #fff;
        width: 650px;
        height: 60px;
        position:absolute;
        top:-5px;
        margin:0 0 0 0;
        padding:0 0 0 0;
    }

    header #logo #logoimg {
        width: 500px;
        height: 39px;
        background-repeat: no-repeat;
        background-color: #fff;
        z-index: 9;
        position: relative;
        top: 10px;
    }

    header #logo #logobar {
        width: 660px;
        height: 3px;
        background-color: #c6ff00;
        position:relative;
        margin: 15px auto;
    }

    header #logo #logobird {
        width: 122px;
        height: 49px;
        background-image: url('../images/bird.png');
        z-index: 12;
        position: absolute;
        top: 5px;
        right: 0px;
    }

article nav #scroll {
    width: 51px;
    height: 118px;
    background-image: url('../images/scr.png');
    position: absolute;
    margin-top: 130px;
    margin-left: 30px;
}

    article nav #scroll #up, article nav #scroll #down {
        width: 26px;
        height: 29px;
        margin-left: 12px;
        border: 0 none;
        background-color: transparent;
        cursor:pointer;
    }

    article nav #scroll #up {
        background-image: url('../images/scr_up.png');
        margin-top: 13px;
    }

    article nav #scroll #top {
        width: 30px;
        height: 30px;
        margin-left: 11px;
        background-image: url('../images/scr_top.png');
        border: 0 none;
        background-color: transparent;
        cursor:pointer;
    }

    article nav #scroll #down {
        background-image: url('../images/scr_bu.png');
    }

footer #bottombar {
    width: 836px;
    height: 53px;
    background-image: url('../images/bot.png');
    background-repeat: no-repeat;
}
footer #com_bar{
    width:836px;
    height:100px;
    background-image:url('../images/salja_line.png');
    background-repeat:no-repeat;
}

footer #copyright {
    text-align: center;
    position: relative;
    bottom: 3px;
    font-size: 9pt;
    font-family: 'Nanum Gothic','맑은 고딕','Gulim';
    color: white;
}

#menubar {
    width: 150px;
    position: absolute;
    margin-top: -20px;
    margin-left: 800px;
    display: block;
    z-index: 50;
}

    #menubar #menu1, #menubar #menu2, #menubar #menu3, #menubar #menu4, #menubar #menu5, #menubar #menu6 {
        width: 141px;
        height: 70px;
        border: 0 none;
        background-color: transparent;
        background-repeat: no-repeat;
        margin: 3px auto 3px auto;
        cursor:pointer;
    }

    #menubar #menu1 {
        background-image: url('../images/but_1.png');
    }

    #menubar #menu2 {
        background-image: url('../images/but_2.png');
    }

    #menubar #menu3 {
        background-image: url('../images/but_3.png');
    }

    #menubar #menu4 {
        background-image: url('../images/but_4.png');
    }

	#menubar #menu5 {
        background-image: url('../images/but_5.png');
    }
	#menubar #menu6 {
        background-image: url('../images/but_6.png');
    }
    @media all and (min-height:480px) and (max-height:560px){
        article .img {
            max-height:180px;
        }
    }

    @media all and (min-height:561px) and (max-height:620px){
        article .img {
            max-height:320px;
        }
    }

    @media all and (min-height:621px) and (max-height:643px){
        article .img {
            max-height:350px;
        }
    }

    @media all and (min-height:680px){
        article .img{
            max-height:460px;
        }
    }