/* ==========================================================================
  #HEADER
  ========================================================================== */
header{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 90px; transition: .3s;}
header .reser-btn{ position: absolute; top: 0; right: 0; display: block; width: 200px; height: 90px; line-height: 90px; background-color: #CFB699; text-align: center;}
header > .wrap1520{ display: flex; justify-content: space-between;}
header h1.logo{ position: relative; width: 240px; height: 150px; text-align: center; }
header h1.logo a{ display: inline-block; width: 100%; height: 100%; position: relative; }
header h1.logo a img{ position: absolute; left: 0; top: 0; transition: .3s; }

header .gnb{ width: 100%; height: 90px;}
header .gnb > ul{ width: 100%; text-align: center; font-size: 0;}
header .gnb > ul > li{ position: relative; padding: 0 35px; transition: .3s; display: inline-block; font-size: 0; vertical-align: top; }
header .gnb > ul > li > a{ display: block; width: 100%; height: 100%; color: #fff; font-size: 16px; line-height: 90px; position: relative;  }
header .gnb > ul > li > a:after{ content: ''; width: 20px; height: 12px; position: absolute; bottom: -12px; left: 0; transition: .3s; background-image: url(../img/common/arrow.png); background-position: center; background-repeat: no-repeat; background-size: cover;  opacity: 0; }
header .gnb > ul > li > a.active:after{ bottom: 0; opacity: 1;}
header .gnb > ul > li.tel{ padding: 0 35px 0 65px;}
header .gnb > ul > li.tel:after{ content: ''; background-image: unset;}
header .gnb > ul > li.sns a{ display: inline-block; width: fit-content; padding: 0 10px; font-size: 24px;}

header .nav_bg{ position: fixed; top: 90px; left: 0; width: 100%; height: 60px; background-color: #CFB699; opacity: 0; transition: .3s; pointer-events: none; z-index: -1;}
header .nav_bg.active{background-color: #CFB699; opacity: 1; }

header .gnb .subnav{ width: 1200px; height: 60px; position: absolute; left: 35px; display: block; opacity: 0; transition: .3s; z-index: 1000; text-align: left; pointer-events: none;  }
header .gnb .subnav.active{ opacity: 1; pointer-events: inherit;}
header .gnb .subnav li{ padding-right: 15px; display: inline-block; margin-right: 15px; position: relative; }
header .gnb .subnav li:after{ content: '|'; font-size: 14px; position: absolute; right: 0; top: 23px; color: #fff;}
header .gnb .subnav li:last-child:after{ content: '';}
header .gnb .subnav li a{ display: block; color: #fff; transition: .3s; height: 100%; line-height: 60px; }

header .gnb > ul > li:nth-child(2) .subnav{ left: -90px;}
header .gnb > ul > li:nth-child(3) .subnav{ left: -210px;}
header .gnb > ul > li:nth-child(4) .subnav{ left: -340px;}
header .gnb > ul > li:nth-child(5) .subnav{ left: -470px;}
header .gnb > ul > li:nth-child(6) .subnav{ left: -640px;}

/* header-scroll */
header.scroll { background-color: #fff;}
header.scroll .gnb > ul > li > a{ color: #CFB699; }
/* =================== 1600px =================== */
@media (max-width: 1600px) {
    header .reser-btn{ width: 150px; }
    header .gnb > ul > li{ padding: 0 15px; }
    header .gnb > ul > li.tel{ padding: 0 15px 0 30px;}

}



/* ==========================================================================
  #FOOTER
  ========================================================================== */
/* banner */
footer .reser-banner{ width: 100%; height: 300px;}
footer .reser-banner .wrap1520{ display: flex; justify-content: space-between; width: 100%; height: 100%; align-items: center;}
/* map */
footer #map{ width: 100%; height: 544px; background-color: #464646; position: relative;}
footer #map .wrap1520{ position: absolute; top: 0; left: 0; right: 0; }
footer #map .wrap1520 .text-area{ display: table; width: 496px; height: 100%; background-color: rgba(255,255,255,.7); padding-left: 60px; }
footer #map .wrap1520 .text-area li{ padding-bottom: 50px;}
footer #map .wrap1520 .text-area li:last-child{ padding-bottom: 0;}
footer #map .wrap1520 .text-area h3{ padding-bottom: 20px;}
footer #map .wrap1520 .text-area i{ padding-right: 5px;}
footer #map .wrap1520 .text-area p{ padding-left: 30px; line-height: 26px;}
/* info */
footer .info{ background-color: #222222; padding: 60px 0;}
footer .info .wrap1520{ position: relative;}
footer .info .info_1{ display: inline-block; font-size: 0; padding-bottom: 20px;}
footer .info .info_1 li{ display: inline-block; padding: 0 8px; font-size: 12px;}
footer .info .info_1 li:first-child{ padding-left: 0;}
footer .info .info_2{ line-height: 20px; padding-bottom: 60px;}
footer .info img{ position: absolute; width: 144px; height: 90px; right: 0; top: calc(50% - 45px); }