@charset "utf-8";

/*
 * --------------------------------------------------------------------------
 * descript : 레이아웃
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

 /*
 * ==========================================================================
 * Table of Contents
 * ==========================================================================
 * 1.0 - 전체 프로젝트에 필요한 클래스(#wrap, .inner, .full, #main-container, #sub-container 등)
 * 2.0 - 해더
 * 3.0 - 서브 비주얼
 * 4.0 - 페이지 네비게이션
 * 5.0 - 풋터
 * 6.0 - 공통(진료시간, 고객센터, 오시는길)
 * --------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
   1.0 전체 프로젝트에 필요한 클래스(#wrap, .inner, .full, #main-container, #sub-container 등)
   -------------------------------------------------------------------------- */
body{font-family:'Noto Sans KR ', sans-serif; font-size:13px; line-height:1; letter-spacing:-0.2px;}

#wrap{position:relative; width:100%; min-width:1200px; overflow-x:hidden;}

#main-container{}
#sub-container{min-height:1000px;}

.full{position:relative; width:100%; height:inherit; box-sizing:border-box;}
.inner{position:relative; width:100%; max-width:1200px; height:inherit; margin:0 auto;  box-sizing:border-box;}
.automation{position:relative; width:100%; height:inherit; box-sizing:border-box; text-align:center;}

a:hover{text-decoration:none;}
*::before{position:absolute; display:none; content:'';}
*::after{position:absolute; display:none; content:'';}

/* --------------------------------------------------------------------------
   2.0 해더
   -------------------------------------------------------------------------- */
#header{position:relative; width:100%; z-index:99; background:#fff;}
#header.fixed{box-shadow:0 0 20px rgba(0,0,0,0.25);}

/* 로고 */
#header #logo{text-align:center; padding:15px 0;}
#header .minbak {position:absolute;left:0;top:50%;transform: translateY(-50%);width: 180px;}

/* GNB */
#gnb{position:relative; width:100%; height:60px; text-align:center; border-top:1px solid #eee;}
#gnb::before{visibility:hidden; opacity:0; display:inline-block; width:100%; height:200px; left:0; top:100px; background:#fff; z-index:6; box-sizing:border-box; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#gnb::after{visibility:hidden; opacity:0; display:inline-block; width:100%; height:1px; background:#f3f3f3; left:0; top:60px; z-index:10; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#gnb:hover::before{visibility:visible; opacity:1; top:60px;}
#gnb:hover::after{visibility:visible; opacity:1;}

/* 1차 */
#gnb ul{display:inline-block; width:100%; }

#gnb ul li.gnb{position:relative; float:left; width:200px;}
#gnb ul li.gnb > a{position:relative; display:block; width:100%; font-size:16px; color:#58585a; font-weight:600; height:inherit; line-height:60px; text-align:center; }
#gnb ul li.gnb:hover > a{color:#b89564;}
#gnb ul li.gnb.active{}
#gnb ul li.gnb.active > a{background:#b89564; color:#fff;}
#gnb ul li.gnb.active > a::before{display:inline-block; width:calc(100% - 2px); border:1px solid #b89564; left:0; top:-1px;}

/* 2차 */
#gnb ul.lnb-wrap{position:absolute; visibility:hidden; opacity:0; display:inline-block; left:50%; transform:translate(-50%, 0); top:160px; z-index:9; box-sizing:border-box; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#gnb:hover ul.lnb-wrap{visibility:visible; opacity:1; top:70px;}

#gnb ul li.gnb a + ul.lnb-wrap li.lnb{text-align:center;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb:last-child{margin-right:0;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb a{position:relative; display:block; width:100%; height:100%; font-size:15px; line-height:40px; color:#111; font-weight:500;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb a::before{position:absolute; visibility:hidden; opacity:0; display:inline-block; width:5px; height:5px; background:#00aeff; left:-10px; top:7px;  -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb:hover a{background:#b89564; color:#fff;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb.active a{color:#b89564; font-weight:700;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb.active:hover a{color:#fff;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb a[data-text="실시간예약"] {color:#de241f;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb:hover a[data-text="실시간예약"]{color:#fff;}
#gnb ul li.gnb a + ul.lnb-wrap li.lnb.active:hover a[data-text="실시간예약"]{color:#fff;}
/* --------------------------------------------------------------------------
   3.0 서브 비주얼
   -------------------------------------------------------------------------- */
#sub-visual{position:relative; height:300px; background-position:center center; background-size:cover; background-repeat:no-repeat; margin-bottom:50px;}
#sub-visual::before{display:inline-block; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.35);}
#sub-visual .inner{height:inherit;}

/* 1차 메뉴 */
#sub-visual[data-menu-1st="카우펜션&글램핑"]{background-image:url(/assets/img/common/theme/sub_visual_bg01.jpg);}
#sub-visual[data-menu-1st="펜션안내"]{background-image:url(/assets/img/common/theme/sub_visual_bg08.jpg);}
#sub-visual[data-menu-1st="글램핑안내"]{background-image:url(/assets/img/common/theme/sub_visual_bg02.jpg);}
#sub-visual[data-menu-1st="부대시설"]{background-image:url(/assets/img/common/theme/sub_visual_bg03.jpg);}
#sub-visual[data-menu-1st="예약안내"]{background-image:url(/assets/img/common/theme/sub_visual_bg04.jpg);}
#sub-visual[data-menu-1st="커뮤니티"]{background-image:url(/assets/img/common/theme/sub_visual_bg05.jpg);}
#sub-visual[data-menu-1st="독채풀빌라"]{background-image:url(/assets/img/common/theme/sub_visual_bg09.jpg);}

#sub-visual .txt-group{position:absolute; width:100%; display:inline-block; left:0; top:50%; transform:translate(0, -50%); z-index:1;}
#sub-visual .txt-group h2{text-align:center; font-size:40px; color:#fff; font-weight:100; letter-spacing:-2.2px;}

/* --------------------------------------------------------------------------
   4.0 페이지 네비게이션
   -------------------------------------------------------------------------- */
#breadcrumb{position:relative; width:100%; text-align:right; color:#464646; padding:20px 0; font-size:14px; line-height:22px;}
#breadcrumb svg{font-size:12px;}
#breadcrumb strong{font-weight:700;}

/* --------------------------------------------------------------------------
   5.0 풋터
   -------------------------------------------------------------------------- */
#footer{width:100%; background:#efefef; margin-top:50px;}

#footer .footer-info{display:block; padding:25px 0;}
#footer .footer-info p{height:25px; line-height:25px; color:#555; font-size:14px;}
#footer .footer-info p em{display:inline-block; font-weight:700; margin-right:10px;}
#footer .footer-info p span{display:inline-block; margin-right:10px;}
#footer .footer-info p.copyright{font-size:0.85em; color:#999;}
#footer .footer-info p.copyright a{color:#1fbbee;}

#footer .footer-info a.goto {position:absolute; left:50%; bottom:15px; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); text-align:center; color:#fff; background:#b89564; padding:7px 20px;}
#footer p.base {padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ddd;}

.sns-button{position:absolute; right:40px; top:35px;}
.sns-button a{display:inline-block; float:left; margin:0 5px; width:30px; height:30px; background-repeat:no-repeat; background-position:center center;}
.sns-button a.btn-facebook{background-image:url(/assets/img/common/theme/btn_facebook.png);}
.sns-button a.btn-twitter{background-image:url(/assets/img/common/theme/btn_twitter.png);}
.sns-button a.btn-youtube{background-image:url(/assets/img/common/theme/btn_youtube.png);}