header{ position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 999; transition: .3s;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }
header .wrap1740 .flex-wrap{ height: 100%;}
header h1.logo{ display: block; width: 196px; height:36px;}
header h1.logo a{ position: relative; display: block; width: 100%; height: 100%;}
header h1.logo img{ position: absolute; top: 0; left: 0; width: 100%; object-fit: cover;}
header h1.logo img.scroll{ opacity: 0;}
header #reser-btn { display: block; width: 120px; height: 36px; line-height: 36px; border-radius: 20px; text-align: center; font-size: 16px; border: 1px solid #fff; transition: .3s; color: #fff;}
header #reser-btn i{ font-size: 20px; padding-right: 5px; position: relative; top: 1px; display: inline-block;}
header #reser-btn p{ display: inline-block;}

header .gnb > ul{ font-size: 0; height: 80px; line-height: 80px;}
header .gnb > ul > li{ display: inline-block; width: auto; padding: 0 45px; font-size: 16px; vertical-align: top; text-align: center; position: relative; }
header .gnb > ul > li > a{display: block; width: 100%; height: 100%; position: relative; }
header .gnb > ul > li > a > p{ transition: .3s;}
header .gnb > ul > li:hover > a > p{ color: #F29600;}



header .subnav{ position: absolute; height: auto; width: 100%; top: 0; left: 0; transition: .3s; opacity: 0; padding-top: 15px; padding-bottom: 30px; pointer-events: none;}
header .subnavbg{ position: fixed; display: block; width: 100%; background-color: #fff; height: 360px; transition: .3s; opacity: 0; top: -80px; left: 0; z-index: -1; pointer-events: none;}
header .subnav.active{ top: 75px; opacity: 1; pointer-events: inherit;}
header .subnav.hover{ top: 75px; opacity: 1; }
header .subnavbg.active{ top: 80px; opacity: 1;}
header .subnav li{ height: 36px; line-height: 36px!important; font-size: 0;}
header .subnav li a{ display: inline-block; font-size: 14px; height: 36px; line-height: 18px!important; transition: .3s; color: #333; position: relative;}
header .subnav li a:hover{ color: #F29600;}

header .subnav.rooms-js a{ width: 33.33%;}
header .subnav.rooms-js p{ display: inline-block; font-size: 14px; width: 33.33%; transition: .5s;}
header .subnav.rooms-js p.active{ color: #F29600;}

/* nav-wrap.active */
header .wrap1740.active{ background: rgba(255,255,255,1); }
header .wrap1740.active a p{ color: #333;}
header .wrap1740.active h1.logo img{ display: none;}
header .wrap1740.active h1.logo img.scroll{ display: block;}
header .wrap1740.active .btn01{ color: #666;}
header .wrap1740.active .btn01:before{ border: 1px solid rgba(153, 153, 153, 1); }


/* header-hover */
header:hover{ background: #fff; box-shadow: 2px 0 6px rgba(0,0,0,.2); border-bottom: 1px solid #ddd;}
header:hover h1.logo img{opacity: 0;}
header:hover h1.logo img.scroll{ opacity: 1;}
header:hover .wrap1740 a p{ color: #333;}
header:hover .wrap1740 #reser-btn{ border: 1px solid #333; transition: .3s; color: #333;}

/* header-scroll */
header.scroll{ z-index: 1000; transition: .3s; background:#fff; box-shadow: 2px 0 6px rgba(0,0,0,.2); height: 80px; border-bottom: 1px solid #ddd;}
header.scrolldown{top: -80px; }
header.scrollup{ top: 0;}
header.scroll h1.logo img{opacity: 0;}
header.scroll h1.logo img.scroll{ opacity: 1;}
header.scroll .wrap1740 a p{ color: #333;}
header.scroll .wrap1740 #reser-btn{ border: 1px solid #333; transition: .3s; color: #333;}



/* =================== 1460px =================== */
@media (max-width: 1460px) {
    header{ height: 130px;}
    header .wrap1740 .flex-wrap{ padding-top: 10px;}
    header.scrolldown{ top: -130px;}
    header.scroll{ height: 130px;}
    header h1.logo{ order: 0;}
    header .gnb{ order: 2; width: 100%; text-align: center;}
    header #reser-btn{ order: 1; }
    header .subnavbg.active{ top: 130px; opacity: 1;}
}

/* =================== 1130px =================== */
@media (max-width: 1130px) {
    header .gnb > ul > li{ padding: 0 37px;}
}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ position: fixed!important; height: 50px; z-index: 1001;}
    header .wrap1740 .flex-wrap{ padding-top: 0;}
    header.scroll{height: 50px; transition: .3s;}
    header.scrolldown{top: -50px; }
    header.scrollup{ top: 0;}
    header.scroll #panelbtn span{background-color: #333;} 
    header.scroll #m-reser-btn{ color: #333;}
    header:hover{ box-shadow: unset; border-bottom: unset;
        background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }
    
    header:hover h1.logo img{opacity: 1;}
    header:hover h1.logo img.scroll{ opacity: 0;}
    header:hover .wrap1740 a p{ color: #fff;}
    header:hover .wrap1740 #reser-btn{ border: 1px solid #fff; transition: .3s; color: #fff;}

    header.scroll:hover{ box-shadow: unset; border-bottom: unset;
        background: #fff
    }
    header.scroll:hover h1.logo img{opacity: 0;}
    header.scroll:hover h1.logo img.scroll{ opacity: 1;}
    header .subnavbg{ display: none;}
    header h1.logo{ display: block; width: 130px; height: 24px; }
    header .mo-wrap{ text-align: right;}
    header .mo-wrap > a{ display: inline-block; font-size: 12px; vertical-align: top; padding-right: 20px; height: 26px; line-height: 26px;}
    header .mo-wrap > div{ display: inline-block; }

    #panelbtn{ width: 26px; height: 24px; position: relative; top: 1px; padding: 0; overflow: hidden; z-index: 1100;  }
    #panelbtn a{ display: block; width: 100%; height: 100%; position: relative; }
    #panelbtn span{ display: block; width: 23px; height: 1px; border-radius: 1px; background-color: #fff; position: absolute; left: 0; transition: 0.3s;} 
    #panelbtn .line01{top: 1px;}
    #panelbtn .line02{top: 9px; }
    #panelbtn .line03{top: 17px;}
    

    /*active클래스 활성화 - x처리*/
    #panelbtn.active .line02{ transform: scaleX(0); }
    #panelbtn.active .line01{  transform-origin: left top; left: 5px; transform: rotate(45deg); }
    #panelbtn.active .line03{  transform-origin: left bottom; left: 5px; transform: rotate(-45deg); top: 17px; }



    /* panel */
    #panel{ position: fixed; display: none; width: 100%; height: 100vh; overflow-y: auto; top: -150%; left: 0; background-color: #eee; transition: .3s; z-index: 2000; text-align: center;}
    #panel a.close-btn{ position: absolute; top: 12px; right: 20px; font-size: 24px;}
    #panel.active{ display: block; top: 0;}
    #panel .top-con{ height: 200px; background-color: #2A2A22; padding: 50px 0 20px; text-align: center;}
    #panel .top-con img{ padding-bottom: 30px;}
    #panel .top-con .flex-wrap{ justify-content: center;}
    #panel .top-con .flex-wrap a{ padding: 0 10px;}
    #panel .top-con .flex-wrap a p{ font-size: 12px; padding-top: 10px;}
    #panel .top-con .flex-wrap a i{ font-size: 20px;}

    #panel > ul{ width: 100%; padding-left: 0; padding-right: 0; text-align: left;}
    #panel .mnav{ width:100%; height: auto; transition: .3s; border-bottom: 1px solid #ccc; background-color: #fff;} 
    #panel .mnav p.med{ display: block; width: 100%; font-size: 16px; height: 50px; line-height: 50px; cursor: pointer;  transition: .3s; padding: 0 15px; }
    #panel .mnav i{ font-size: 18px; transition: .3s; position: relative; top: 14px;}
    #panel .mnav.active i{ transform: rotate(180deg); }
    #panel .mnav.active .snav{ display: block; }

    #panel .snav{display: none; width: 100%; height: auto; padding-bottom: 10px; font-size: 0; overflow: hidden;}
    #panel .snav img{ width: 100%; object-fit: cover;}
    #panel .snav a{ display: inline-block; line-height: 32px; font-size: 12px; color: #888;  transition: .3s; padding-left: 25px;}
    #panel .snav li:nth-child(2){ padding-top: 10px;}
    #panel .snav.float li{ width: 50%; float: left;}
    #panel .snav.float li:nth-child(3){ padding-top: 10px;}

}




/* footer */
footer{ padding-top: 70px; padding-bottom: 100px; background-color: #1A1A1A;}
footer .wrap1740 > .flex-wrap{ align-items: flex-start;}
footer .left img{ padding-bottom: 40px;}
footer .left h3{ font-size: 16px; padding-bottom: 18px;}
footer .left ul.info{ display: block; padding-bottom: 20px;}
footer .left ul.license{ padding-bottom: 10px;}
footer .left li{ color: #888; font-size: 14px; display: inline-block; line-height: 24px;}
footer .left ul li:after{ content: '•'; font-size: 14px; color: #888; position: relative; padding: 5px;}
footer .left li span{ display: inline-block; padding-right: 5px;}
footer .left li p{ display: inline-block;}
footer .left li a{ color: #888;}
footer .left ul li:last-child:after, footer .left ul.info li:nth-child(5):after{ content: '';}
footer .left > p{ font-size: 14px;}
footer .right #f-reser-btn{ display: inline-block; width: 107px; height: 32px; line-height: 30px; text-align: center; border-radius: 20px; border: 1px solid #fff; vertical-align: top; font-size: 10px;}
footer .right #f-reser-btn i{ font-size: 14px; position: relative; top: 1px; padding-right: 5px;}
footer .right #insta{ margin-left: 20px; display: inline-block; width: 32px; height: 32px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
footer{ padding-top: 40px; padding-bottom: 65px; }
footer .wrap1740 > .flex-wrap{ align-items: flex-start;}
footer .left{ order: 2; padding-top: 45px;}
footer .left img{ width: 200px; object-fit: cover; padding-bottom: 60px;}
footer .left h3{ font-size: 16px; padding-bottom: 40px;}
footer .left ul.info{ padding-bottom: 40px;}
footer .left ul.license{ padding-bottom: 30px;}
footer .left li{ font-size: 12px; line-height: 24px;}
footer .left ul.info li{ display: block;}
footer .left ul.info li:after{ content: ''; }
footer .left ul li:nth-child(3):after{ content: '';}
footer .left > p{ font-size: 12px;}
footer .right{ width: 100%; text-align: right;}
footer .right #f-reser-btn{ display: inline-block; width: 107px; height: 32px; line-height: 30px; text-align: center; border-radius: 20px; border: 1px solid #fff; vertical-align: top; font-size: 10px;}
footer .right #f-reser-btn i{ font-size: 12px; position: relative; top: 2px; padding-right: 5px; }
footer .right #insta{ margin-left: 20px; display: inline-block; width: 32px; height: 32px; }
}