/* 전체 레이아웃 */
body {}
#wrap {}
#header {position:absolute; top:830px; left:0; width:100%; height:80px; z-index:990; background:#fff; border-bottom:1px solid #c8c8c8}
#header.fixed {position:fixed; top:0; left:0; width:100%; height:80px; z-index:990; background:#fff; border-bottom:1px solid #c8c8c8}
/* 상단 영역 */
#header.scroll {position:fixed; top:0 !important}
#header .inner {position:relative; max-width:1400px; height:80px; margin:0 auto; width:100%}
#header .inner:after {clear:both; display:block; content:''}
#header .inner h1 {float:left; width:55; padding:10px 0}
#header .inner h1 img {display:block; width:100%}
#header .inner .login {float:left; width:auto}
#header .inner .login > ul {padding-left:50px}
#header .inner .login ul > li {display:inline-block; vertical-align:top}
#header .inner .login ul > li a {display:block; height:100%; line-height:80px; font-size:12px; font-weight:700; color:#bbbbbb; transition:all 0.3s ease}
#header .inner .login ul > li a:hover {color:#2b2b2b}
#header .inner .login ul > li span {line-height:80px; font-size:12px; font-weight:500; color:#bbbbbb}
#navigation a.gnb_top {display:none}
#gnbClose {display:none}
#gnb {float:right; height:100%}
#gnb > li {position:relative; display:inline-block; vertical-align:top}
#gnb > li > a {display:block; font-size:17px; padding:0 20px; line-height:80px; transition:all .3s ease; font-weight:700; font-family:'NanumSquare'}
#gnb > li:last-child > a {padding-right:0}
#gnb > li.on > a {color:#21bbb1}
/* IE 업데이트 권장 팝업 */
#browserUpdate {position:fixed; display:none; top:150px; left:0; width:100%; height:auto; text-align:center; color:#fff; padding:80px 0; background:#21bbb1; z-index:1000}
#browserUpdate h2 {display:inline-block; font-size:30px; font-weight:400; line-height:1.2; margin-bottom:20px}
#browserUpdate img {display:inline-block; margin-right:10px; vertical-align:-5px}
#browserUpdate p {font-size:14px; line-height:1.7; color:#fff; margin-bottom:50px}
#browserUpdate a {display:inline-block; margin:0 5px; padding:8px 0; width:200px; color:#fff; border:1px solid #fff}
#browserUpdate a.confirm {color:#21bbb1 !important; background:#fff}
/* 공통 전체 메뉴 */
#nav_wrap {position:absolute; top:20%; left:0; width:100%; height:auto; text-align:center}
#gnbOpen {display:none}
#gnb {}
#gnb > li > ul.submnu {display:none; position:absolute; left:50%; width:160px; margin-left:-80px; padding:10px 0; background:#fff; box-shadow:0 2px 2px 0 rgba(0,0,0,.12)}
#gnb > li > a:hover .submnu {display:block}
#gnb > li > ul.submnu > li > a {position:relative; display:block; color:#999; padding:10px 20px; text-align:center; line-height:1.2}
#gnb > li > ul.submnu > li > a:hover {color:#21bbb1}
#snb {display:inline-block; margin:30px auto 0 auto}
#snb ul {text-align:center; padding-top:20px; border-top:1px solid rgba(255,255,255,.4)}
#snb ul li a {position:relative; display:inline-block; font-family:'Monda'; font-size:16px; color:#999; line-height:1.2; padding:10px 0; transition:all .3s ease}
#snb ul li a:hover {color:#21bbb1}
#snb ul li a:before {position:absolute; top:50%; left:0; width:0; height:1px; content:''; background:#21bbb1; transition:all .3s ease}
#snb ul li.on a {color:#21bbb1}
#snb ul li a:hover:before {width:100%}
#nav_wrap .snsList {margin-top:30px}
#nav_wrap .snsList ul li {display:inline-block; margin:0 5px}
#nav_wrap .snsList ul li a img {display:block}
#btnNav {display:none; position:absolute; top:20px; right:50px; width:40px; height:40px; border:none; border-radius:2px; background:transparent; cursor:pointer; z-index:1000}
#btnNav span {position:absolute; display:block; right:0; width:20px; height:2px; background:#000; transition:all .4s ease}
#btnNav span.bar1 {top:12px}
#btnNav span.bar2 {top:18px}
#btnNav span.bar3 {top:24px}
#btnNav.open span {background:#fff}
#btnNav.active span.bar1 {top:18px; transform:rotate(45deg)}
#btnNav.active span.bar2 {display:none}
#btnNav.active span.bar3 {top:18px; transform:rotate(-45deg)}
/*푸터*/
#footer {background:#353535}
#footer.sub {margin-top:100px}
#footer .inner {}
#footer .inner ul {padding:30px 0}
#footer .inner ul:after {clear:both; content:''; display:block}
#footer .inner ul li {float:left; width:33.333334%; color:#b2b2b2; font-size:13px}
#footer .inner ul li p {font-size:13px; font-weight:500; color:#b2b2b2}
#footer .inner ul li address {font-size:13px; padding:5px 0}
#footer .inner ul li span {font-size:13px; font-weight:500}
#footer .inner ul li span a {color:#b2b2b2}
#footer .inner ul li span.footer_number {color:#b2b2b2}
#footer .inner ul li span.copyright {color:#ffffff}
#footer .inner ul li p.bank {padding-bottom:10px}
/* 반응형_미디어쿼리 */
@media screen and (max-width:1366px) {
#header .inner {padding:0 50px;}
#footer .inner {padding:0 50px;}
#sub_wrap > .inner {padding:0 50px;}
}
@media screen and (max-width:1024px) {
/* 상단 영역 */
#gnb {width:100%}
#gnb > li > ul.submnu {position:relative; display:block; opacity:1 !important; left:0; top:0; width:100%; margin-left:0; box-shadow:none; background:#f9f9f9; padding:0; display:none; opacity:1;}
#gnb > li > ul.submnu > li {border-bottom:1px solid #f8f8f8; padding:10px 0}
#gnb > li > ul.submnu > li:last-child {border-bottom:0}
/*header*/
#header {background:transparent; border-bottom:0}
#header.scroll {background:; border-bottom:0; box-shadow:0px 1px 10px rgba(0,0,0,0.25)}
#header .inner h1 {float:none; position:fixed; top:10px; left:20px; padding:0}
#header .inner .login {float:none; width:auto; display:block; padding-top:50px}
#header .inner .login > ul {padding:0}
#header .inner.open h1 {display:none;}
#header #gnb {float:none}
#header #gnb li {float:none; display:block}
#header .inner {position:fixed; top:0; right:-260px; width:260px; height:100%; background:#fff; padding:0 30px; z-index:1000; transition:all 0.3s ease}
#header .inner.open {right:0;}
#header #gnbOpen {display:none; position:absolute; top:25px; right:20px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none; transition:all 0.3s ease; z-index:1010}
#header #gnbOpen span {position:absolute; display:block; width:24px; height:2px; background:#21bbb1; left:50%; margin-left:-12px; transition:all 0.3s ease}
#header #gnbOpen span.bar1 {top:12px}
#header #gnbOpen span.bar2 {top:18px}
#header #gnbOpen span.bar3 {top:24px}
#header #gnbClose {display:block; position:fixed; top:25px; right:20px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none; transition:all 0.3s ease; z-index:1000}
#header #gnbClose span {position:absolute; display:block; width:24px; height:2px; background:#2b2b2b; left:50%; margin-left:-12px; transition:all 0.3s ease}
#header #gnbClose span.bar1 {top:12px; transform:rotate(0)}
#header #gnbClose span.bar2 {transform:rotate(0)}
#header #gnbClose.open span.bar1 {transform:rotate(45deg); top:20px}
#header #gnbClose.open span.bar2 {transform:rotate(-45deg)}
#header #nav_mask.open {position:fixed; top:0; left:0; z-index:990; width:100%; height:100%; background:rgba(0,0,0,0.55)}
/*section1*/
}
@media screen and (max-height:800px) {
#header .inner.open {overflow-y:scroll;z-index:9999;}
}
@media screen and (max-width:768px) {
#footer .inner ul li {float:none; width:100%; text-align:center;}
/* 상단 영역 */
/*#header {top:330px; height:50px}
body.main #header {top:330px}
#header .inner {height:50px; padding:10px 50px}
#gnbOpen {display:block; position:absolute; top:18px; right:50px; width:20px; height:20px; cursor:pointer; z-index:50}
#gnbOpen span {position:absolute; display:block; left:0; width:100%; height:2px; background:#fff; transition:all .3s ease}
#gnbOpen span.bar1 {top:0}
#gnbOpen span.bar2 {top:6px}
#gnbOpen span.bar3 {top:12px}
#gnbOpen.open span.bar1 {top:6px; transform:rotate(45deg)}
#gnbOpen.open span.bar2 {display:none}
#gnbOpen.open span.bar3 {top:6px; transform:rotate(-45deg)}
#gnbClose {display:block !important; position:absolute; top:0; right:0; width:65px; height:60px; border:none; background:transparent; cursor:pointer; z-index:100}
#gnbClose span {position:absolute; display:block; width:20px; height:2px; left:50%; margin-left:-10px; background:#fff}
#gnbClose span.bar1 {top:26px; transform:rotate(45deg)}
#gnbClose span.bar2 {top:26px; transform:rotate(-45deg)}
#nav_mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity='60'); z-index:990}
#navigation {position:fixed; top:0; right:-290px; width:280px; height:100%; background:#fff; box-shadow:-2px 0 6px 0 rgba(0,0,0,.3); z-index:1000}
#navigation a.gnb_top {position:relative; display:block !important; padding:0 0 0 25px; height:60px; font-size:16px; color:#fff; line-height:60px; background:#21bbb1}
#navigation a.gnb_top > span.nav-home {display:inline-block; width:17px; height:16px;
margin-right:10px; background:url(../../img/nav_home.png) 0 0 no-repeat; vertical-align:-2px}
#gnb {float:none}
#gnb > li {position:relative; display:block; width:100%; height:auto}
#gnb > li > a {position:relative; height:auto; padding:15px 25px; font-weight:700; color:#444; line-height:inherit; border-bottom:1px solid #dedede}
#gnb > li.dropdown > a:before {position:absolute; display:block; width:2px; height:14px; right:31px; top:50%; margin-top:-7px; content:''; background:#aaa; transition:all .3s ease}
#gnb > li.dropdown > a:after {position:absolute; display:block; width:14px; height:2px; right:25px; top:50%; margin-top:-1px; content:''; background:#aaa}
#gnb > li.open > a:before {transform:rotate(90deg)}
#gnb > li > ul.submnu {position:static; width:100%; margin:0; padding:0; background:#f6f6f6; box-shadow:none}
#gnb > li > ul.submnu li a {font-size:14px; text-align:left; padding:12px 25px; border-bottom:1px solid #dedede}
#gnb > li > ul.submnu li a:before {display:inline-block; width:7px; height:1px; content:''; margin-right:5px; background:#bbb; vertical-align:4px}*/
}
@media screen and (max-width:640px) {
/* 상단 영역
#header {top:250px}
#header .inner {padding:10px 30px}
#gnbOpen {right:30px} */
/*하단 영역*/
#footer .inner ul {padding:30px 23px;}
#footer .inner ul li {float:none; width:100%; text-align:center}
}
@media screen and (max-width:480px) {
/*상단 영역*/
/* #header {top:175px} */
}
<li><span>ㆍ</span></li>
{{if $use_member == 'Y'}} {{if $member_id}}
<li><a href="{{$template}}/member/login.php?com_member_basic=logout">LOG-OUT</a></li>
<li><span>ㆍ</span></li>
<li><a href="{{$template}}/member/edit.php">MYPAGE</a></li>
{{else}}
<li><a href="{{$template}}/member/login.php">LOGIN</a></li>
<li><span>ㆍ</span></li>
<li><a href="{{$template}}/member/join.php">JOIN</a></li>
{{/if}} {{/if}}
</ul>
</div>
<!-- // 로그인영역 -->
<!-- 모바일 메뉴 호출 버튼 -->
<div id="gnbOpen">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
<!-- // 모바일 메뉴 호출 버튼 -->
<!-- 공통 전체 메뉴 -->
<div id="navigation">
<a class="gnb_top" href="{{$template}}/"><span class="nav-home"></span>홈으로</a>
<!-- 메뉴 닫기 버튼 -->
<button type="button" id="gnbClose">
<span class="bar1"></span>
<span class="bar2"></span>
</button>
<!-- // 메뉴 닫기 버튼 -->
<!-- GNB
* 메뉴 구성을 추가/변경하시려면 li 를 아래 마크업을 참조하여 수정하시면 됩니다.
* 2차 하위메뉴가 존재하는 경우 li에 반드시 dropdown 클래스를 추가해주시기 바랍니다.
-->
<ul id="gnb">
<li class="dropdown">
<a href="{{$template}}/about/sub1.php?top=1&sub=1">SUANBOPARK</a>
<ul class="submnu">
<li><a href="{{$template}}/about/sub1.php?top=1&sub=1">호텔소개</a></li>
<li><a href="{{$template}}/about/sub2.php?top=1&sub=2">오시는길</a></li>
<li><a href="{{$template}}/about/sub3.php?top=1&sub=3">공지사항</a></li>
<li><a href="{{$template}}/about/sub4.php?top=1&sub=4">고객문의</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/villa/sub1.php?top=2&sub=1">GUEST ROOM</a>
<ul class="submnu">
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1">전체보기</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=10">디럭스 트윈</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=9">디럭스 온돌</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=8">디럭스 더블</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=7">스위트 양특실</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=6">스위트 한특실</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=5">대한실 I : 15인</a></li>
<li><a href="{{$template}}/villa/sub1.php?top=2&sub=1&comPreviewMode=previewDetail&roomId=4">대한실 II : 8인</a></li>
<li><a href="{{$template}}/app/app_online.php">실시간예약</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/special/sub1.php?top=3&sub=1">BANQUET</a>
<ul class="submnu">
<li><a href="{{$template}}/special/sub1.php?top=3&sub=1">월악홀</a></li>
<li><a href="{{$template}}/special/sub2.php?top=3&sub=2">조령홀</a></li>
<li><a href="{{$template}}/special/sub3.php?top=3&sub=3">알프스홀</a></li>
<li><a href="{{$template}}/special/sub4.php?top=3&sub=4">수옥홀</a></li>
<li><a href="{{$template}}/special/sub5.php?top=3&sub=5">힐홀</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/facilities/sub1.php?top=4&sub=1">FACILITIES</a>
<ul class="submnu">
<li><a href="{{$template}}/facilities/sub1.php?top=4&sub=1">The Hill</a></li>
<li><a href="{{$template}}/facilities/sub2.php?top=4&sub=2">Terrace9</a></li>
<li><a href="{{$template}}/facilities/sub3.php?top=4&sub=3">테니스장</a></li>
<li><a href="{{$template}}/facilities/sub4.php?top=4&sub=4">산책로</a></li>
<li><a href="{{$template}}/facilities/sub5.php?top=4&sub=5">한국도자기 매장</a></li>
<li><a href="{{$template}}/facilities/sub6.php?top=4&sub=6">성봉채플 예식장</a></li>
</ul>
</li>

<li class="dropdown">
<a href="{{$template}}/hotspring/sub1.php?top=5&sub=1">HOT SPRING</a>
<ul class="submnu">
<li><a href="{{$template}}/hotspring/sub1.php?top=5&sub=1">온천사우나</a></li>
<li><a href="{{$template}}/hotspring/sub2.php?top=5&sub=2">온천의 유래</a></li>
<li><a href="{{$template}}/hotspring/sub3.php?top=5&sub=3">온천의 효능</a></li>
<li><a href="{{$template}}/hotspring/sub4.php?top=5&sub=4">수질인증</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/tour/sub1.php?top=6&sub=1">TOUR</a>
<ul class="submnu">
<li><a href="{{$template}}/tour/sub1.php?top=6&sub=1">주변관광지</a></li>
<li><a href="{{$template}}/tour/sub2.php?top=6&sub=2">등산코스</a></li>
</ul>
</li>
</ul>
<!-- // GNB -->
</div>
<!-- // 공통 전체 메뉴 -->
</div>
</div>
<!--
<li><a href="{{$template}}/app/app_info.php">예약안내</a></li>
<li><a href="{{$template}}/app/app_online.php">실시간예약</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/special/sub1.php?top=3&sub=1">BANQUET</a>
<ul class="submnu">
<li><a href="{{$template}}/special/sub1.php?top=3&sub=1">월악홀</a></li>
<li><a href="{{$template}}/special/sub2.php?top=3&sub=2">조령홀</a></li>
<li><a href="{{$template}}/special/sub3.php?top=3&sub=3">알프스홀</a></li>
<li><a href="{{$template}}/special/sub4.php?top=3&sub=4">수옥홀</a></li>
<li><a href="{{$template}}/special/sub5.php?top=3&sub=5">힐홀</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/facilities/sub1.php?top=4&sub=1">FACILITIES</a>
<ul class="submnu">
<li><a href="{{$template}}/facilities/sub1.php?top=4&sub=1">The Hill</a></li>
<li><a href="{{$template}}/facilities/sub2.php?top=4&sub=2">Terrace9</a></li>
<li><a href="{{$template}}/facilities/sub3.php?top=4&sub=3">테니스장</a></li>
<li><a href="{{$template}}/facilities/sub4.php?top=4&sub=4">산책로</a></li>
<li><a href="{{$template}}/facilities/sub5.php?top=4&sub=5">한국도자기 매장</a></li>
<li><a href="{{$template}}/facilities/sub6.php?top=4&sub=6">성봉채플 예식장</a></li>
</ul>
</li>

<li class="dropdown">
<a href="{{$template}}/hotspring/sub1.php?top=5&sub=1">HOT SPRING</a>
<ul class="submnu">
<li><a href="{{$template}}/hotspring/sub1.php?top=5&sub=1">온천사우나</a></li>
<li><a href="{{$template}}/hotspring/sub2.php?top=5&sub=2">온천의 유래</a></li>
<li><a href="{{$template}}/hotspring/sub3.php?top=5&sub=3">온천의 효능</a></li>
<li><a href="{{$template}}/hotspring/sub4.php?top=5&sub=4">수질인증</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{$template}}/tour/sub1.php?top=6&sub=1">TOUR</a>
<ul class="submnu">
<li><a href="{{$template}}/tour/sub1.php?top=6&sub=1">주변관광지</a></li>
<li><a href="{{$template}}/tour/sub2.php?top=6&sub=2">등산코스</a></li>
</ul>
</li>
</ul>
-->
<!-- // GNB -->
</div>
<!-- // 공통 전체 메뉴 -->
</div>
</div>