#hd{
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    right: 0;
}

#logo{
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1000;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

#hd a{
    color: #fff;
    word-break: keep-all;
    white-space: nowrap;
}

.btn-reserve{
	display: inline-block;
	padding: 10px;
	border: 1px solid #fff;
	margin-top: -10px;
}




/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: 1670px) {
    #btn-reserve{
        position: absolute;
        right: 40px;
        top: 40px;
        font-size: 12px;
        font-family: 'Nanum Gothic', sans-serif;
        transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
    }

    #gnb{
        padding-left: 15%;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 250px;
        transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        background: rgba(0, 0, 0, 0);
    }

    #gnb:hover{
        background: rgba(0, 0, 0, 0.8);
    }

    #hd.down #gnb{
        background: rgba(0, 0, 0, 0.8);
    }

    #gnb #gnb_1dul{
        display: inline-block;
        width: 100%;
        font-family: 'Cinzel', serif;
    }

    #gnb #gnb_1dul>li{
        float: left;
        font-size: 15px;
        margin-right: 60px;
    }

    #gnb #gnb_1dul>li>#gnb_2dul{
        font-size: 12px;
        font-family: 'Nanum Gothic', sans-serif;
        line-height: 1.7;
        max-height: 0;
        transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        overflow:hidden;
        opacity: 0;
        visibility: collapse;
        width: 65px;
        overflow: inherit;
    }

    #gnb #gnb_1dul:hover #gnb_2dul{
        max-height: 500px;
        margin-top: 8px;
        opacity: 0.7;
        visibility:visible;
    }

    #hd.down #gnb{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #hd.down #logo{
        top: 0;
    }

    #hd.down #btn-reserve{
        top: 23px;
    }

}


@media (max-width: 1669px) {
    #hd{
        height: 105px;
    }

    #hd.down{
        background: rgba(0, 0, 0, 0.8);
    }

    #btn-menu{
        width: 50px;
        height: 40px;
        border: 1px solid #fff;
        padding: 10px;
        position: absolute;
        right: 20px;
        top: 30px;
        cursor: pointer;
        z-index: 10;
    }

    #btn-menu .wrapper{
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: relative;
    }

    #btn-menu .wrapper>div{
        height: 1px;
        width: 100%;
        background: #fff;
        opacity: 1;
        position: absolute;
        transition: transform 0.5s ease 0s, top 0.5s ease 0.5s;
        -webkit-transition: transform 0.5s ease 0s, top 0.5s ease 0.5s;
    }

    #btn-menu .wrapper>div.no1{
        top: 0px;
    }

    #btn-menu .wrapper>div.no2{
        top: 8px;
    }

    #btn-menu .wrapper>div.no3{
        top: 17px;
    }

    #btn-menu.on .wrapper>div{
        top: 50%;
    }

    #btn-menu.on .wrapper>div.no1{
        transform: rotate(40deg);
        transition: top 0.5s ease 0s, transform 0.5s ease 0.5s;
        -webkit-transition: top 0.5s ease 0s, transform 0.5s ease 0.5s;

    }

    #btn-menu.on .wrapper>div.no2{
        transform: translateX(-100%);
        opacity: 0;
    }

    #btn-menu.on .wrapper>div.no3{
        transform: rotate(-40deg);
        transition: top 0.5s ease 0s, transform 0.5s ease 0.5s;
        -webkit-transition: top 0.5s ease 0s, transform 0.5s ease 0.5s;
    }

    #gnb{
        display: none;
        background: rgba(0, 0, 0, 0.8);
    }

    #hd.on #gnb{
        display: block;
    }

    #btn-reserve{
        display: none;
    }

    #hd{
        transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        background: rgba(0, 0, 0, 0)
    }


    #gnb{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        padding-top: 100px;
        padding-bottom: 100px;
        text-align: right;
    }

    #gnb #gnb_1dul{
        overflow: auto;
    }

    #gnb .gnb_1dli{
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #gnb .gnb_1dli:last-child{
        border-bottom: none;
    }

    #gnb .gnb_1dli>a{
        font-size: 16px;
        font-family: 'Cinzel', serif;
        display: inline-block;
        margin-bottom: 5px;
    }

    #gnb .gnb_2dli{
        display: inline-block;
        text-align: center;
        margin: 0 5px;
        font-size: 12px;
    }

}

@media (max-width: 768px) {
    #hd{
        height: 60px;
    }

    #logo{
        top: 10px;
        left: 20px;
    }

    #logo img{
        width: 40px;
    }

    #btn-menu{
        top: 12px;
        width: 40px;
        height: 35px;
    }

    #btn-menu .wrapper>div.no2{
        top: 6px;
    }

    #btn-menu .wrapper>div.no3{
        top: 12px;
    }

    #btn-menu.on .wrapper>div{
        top: 50%;
    }
	
	#btn-reserve{
        display: block;
		position: absolute;
		top: 12px;
		right: 63px;
		z-index:99;
    }
	.btn-reserve {
		margin-top:0;
		padding:6.5px;
	}

}

@media (max-width: 520px) {

}