@charset "UTF-8";/* iOS only */
@supports (-webkit-touch-callout: none) { body,
 html { height: -webkit-fill-available; } 
 }

/* 스크롤 막기*/
.scrollOff { position: fixed; height: 100vh; overflow: hidden !important; touch-action: none; -webkit-overflow-scrolling: initial; } 

/* container */
.container { position: relative; width: 100%; height: 100%; padding: 0 15px; margin: 0 auto; max-width: 1200px; z-index: 16; } 

/* ellipsis */
.ellipsis { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 

/* select_style */
.select_style { display: inline-block; position: relative; width: 100%; margin: 0 auto; background: transparent; text-align: left; vertical-align: middle; user-select: none; -webkit-touch-callout: none; } 
.select_style .placeholder { display: block; position: relative; padding: 0 5px 10px; color: #fff; font-size: 17px; border-bottom: 1px solid #e0bc99; background-color: transparent; z-index: 1; cursor: pointer; } 
.select_style .placeholder.selected { border: 1px solid rgba(42, 42, 42, 0.3); color: #fff; font-weight: 700; font-size: 17px; } 
.select_style .placeholder:after { position: absolute; top: 50%; right: 0; width: 20px; height: 12px; background: no-repeat center/contain url("/img/footer/footer_arrow.png"); content: ''; transform: translateY(-50%); z-index: 10; } 
.select_style.is-open .placeholder { border: none; outline: none; } 
.select_style.is-open .placeholder:after { background: no-repeat center/contain url("/img/footer/footer_arrow_up.png"); } 
.select_style.is-open ul { display: block; background: rgba(255, 255, 255, 1); border-top: none; } 
.select_style ul { display: none; list-style: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 0; background: #fff; overflow: hidden; z-index: 100; } 
.select_style ul li { display: block; padding: 10px; color: #454951; font-size: 17px; text-align: left; cursor: pointer; text-transform: uppercase; } 
.select_style ul li:hover { background: rgba(224, 188, 153, 0.3); } 

/* header */
.header { position: fixed; top: -1px; width: 100vw; padding: 10px 0; background: rgba(255,255,255, 0.3); z-index: 100; transition: 0.3s ease-in-out; } 
.sticky { background: rgba(0, 0, 0, 0.7); } 
.header .logo { float: left; } 
.header .logo a { color: #fff; } 
.header nav { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } 
.gnbNav li { float: left; line-height: 65px; } 
.gnbNav li > a { padding: 0 1vw; color: #fff; font-weight: 500; transition: color 0.3s ease-in-out; } 
.gnbNav li > a:hover { color: var(--main-color); } 

/* 퀵메뉴 */
.fixNav { position: fixed; right: 10px; bottom: 300px; z-index: 90; } 
.fixNav .wrapper { position: relative;}
.fixNav .fixNav_wrap.hide { display: none; } 
.fixNav .fixNav_wrap li { width: 100px; margin: 10px 0; text-align: center; } 
.fixNav .fixNav_wrap li a { display: inline-block; width: 100%; padding: 5px 0 7px; font-weight: 500; font-size: 13px; } 
.fixNav .fixNav_wrap li a:hover { font-weight: 600; } 
.fixNav .fixNav_wrap li.list { border: 2px solid var(--main-color); background: #fff; } 
.fixNav .fixNav_wrap li.top_btn { background: var(--main-color); } 
.fixNav .fixNav_wrap li.list a { color: #333; } 
.fixNav .fixNav_wrap li.list a img { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; } 
.fixNav .fixNav_wrap li.top_btn { display: none; } 
.fixNav .fixNav_wrap li b { font-weight: 500; } 
.fixNav .remote_btn { position: absolute; right:0;}
.fixNav .remote_btn button { display: flex; position: relative; right: 0; width: 40px; height: 40px; background: var(--main-color); border-radius: 50%; align-items: center; justify-content: flex-end; flex-direction: column; box-shadow: 4px 4px 4px rgba(42, 42, 42, 0.3); transition: right 0.3s ease-in-out; } 
.fixNav .remote_btn button:before { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; content: ''; transform: translate(-50%,-50%); } 
.fixNav .remote_btn button.hide { right: -100px; height: 0; }
.fixNav .remote_btn button.hide:before { height: 0; } 
.fixNav .remote_btn button.close:before {
    background: no-repeat center/contain url("/portfolio/hb_resort/images/icon/close.png");
}
.fixNav .remote_btn button.open:before {
    background: no-repeat center/contain url("/portfolio/hb_resort/images/icon/arrow.png");
}

/* 햄버거 메뉴 */
.ham_nav { position: relative; z-index: 101; } 
.ham_menu { display: none; position: fixed; top: 24px; right: 15px; cursor: pointer; /* background: rgba(255,255,255,0.3); */
 -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 55; } 
.ham_menu .line { display: block; width: 30px; height: 3px; margin: 5px auto; background-color: #fff; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } 
.ham_menu:hover { cursor: pointer; } 
.ham_menu.is-active { animation: smallbig 0.6s forwards; } 
.ham_menu.is-active .line:nth-child(1),
.ham_menu.is-active .line:nth-child(2),
.ham_menu.is-active .line:nth-child(3) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } 
.ham_menu.is-active .line:nth-child(2) { opacity: 0; } 
.ham_menu.is-active .line:nth-child(1) { -webkit-transform: translateY(5px) rotate(45deg); -ms-transform: translateY(5px) rotate(45deg); -o-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg); } 
.ham_menu.is-active .line:nth-child(3) { -webkit-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg); -o-transform: translateY(-11px) rotate(-45deg); transform: translateY(-11px) rotate(-45deg); } 
.nav_wrap { display: none; position: absolute; top: 0; right: 15px; height: auto; background: var(--main-color); z-index: 10000; box-shadow: 4px 4px 4px rgba(42, 42, 42, 0.3); } 
.nav_wrap .main_nav li { padding: 10px; } 
.nav_wrap .main_nav li a { display: block; position: relative; color: #fff; font-weight: 500; font-size: 17px; text-transform: uppercase; } 
.nav_wrap .main_nav li:active a,
.nav_wrap .main_nav li:focus a { color: #bbb; transform: scale(0.95); } 
.nav_sub { margin-top: 10vh; } 
.nav_sub li:first-child { float: left; width: 49%; height: 60px; border: 1px solid #2d2d2d; line-height: 60px; } 
.nav_sub li a { position: relative; width: 100%; height: 100%; height: 60px; font-size: 25px; line-height: 60px; text-align: center; text-transform: uppercase; } 
.nav_sub li:first-child a { color: #2d2d2d; } 
.nav_sub li:last-child { float: right; width: 47%; background: #2d2d2d; } 
.nav_sub li:last-child a { color: #fff; } 

/* 우측 네비 */
.lnav { position: fixed; top: 50%; left: 15px; transform: translateY(-50%); z-index: 40; } 
.lnav li { display: flex; flex-direction: column; } 
.lnav li > a { display: flex; align-items: center; } 
.lnav li .txt { color: #074f51; font-size: 12px; opacity: 0; } 
.lnav li .line { width: 3px; height: 35px; background: #eeeeee; margin-right: 5px; } 
.lnav li a.active .line { background: #074f51; } 
.lnav li a.active .txt { opacity: 1; } 

/* footer */
.footer { padding: 50px 0; background: #1E252D; } 
.footer .inner { display: flex; align-items: flex-start; justify-content: space-between; } 
.footer .inner .logo { width: 100px; } 
.footer .inner .txt { width: calc(100% - 120px); } 
.footer .inner .txt p { color: #ddd; font-weight: 300; font-size: 13px; letter-spacing: 0.02em; } 
.iosNum { color: #ddd; font-weight: 300; font-size: 13px; letter-spacing: 0.02em; } 
/* top btn */
.top_btn button { position: fixed; right: 2%; bottom: -1px; width: 60px; height: 60px; background: #434343; z-index: 500; } 
.top_btn button img { display: flex; width: 30px; margin: 0 auto; align-items: center; justify-content: center; flex-direction: column; } 

/* 팝업 */
.popup_wrapper { position: relative; width: 100%; height: 100%; z-index: 1000000; } 
.popup_wrapper::after { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51, 51, 51, .4); content: ''; z-index: 110; } 
.online_cs { display: block; position: fixed; top: 50%; left: 50%; width: 485px; /* height: 410px; */
 height: auto; background: #fff; overflow: hidden; transform: translate(-50%, -50%); z-index: 111; } 
.online_cs .top { position: relative; padding: 10px 5px; background: #ddd; } 
.online_cs .top p { font-weight: 500; font-size: 21px; text-align: center; } 
.online_cs .top .close { position: absolute; top: 50%; right: 5px; width: 35px; height: 35px; transform: translateY(-50%); } 
.online_cs .top .close > span { background: #333; } 
.online_cs .box { padding: 20px; } 
.online_cs .txt { font-size: 19px; text-align: center; margin-bottom: 30px; } 
.online_cs .cs_form .input { width: 100%; height: 50px; padding: 0 10px; border: 1px solid #bbb; font-size: 16px; margin-bottom: 10px; } 
.online_cs .cs_form .input:focus { border: 1px solid #333; border-radius: none; } 
.online_cs .cs_form .input::placeholder { color: #bbb; font-size: 15px; } 
.online_cs .cs_form label { color: #333; font-size: 14px; } 
.online_cs .cs_form label input { margin: 0 2px; vertical-align: -2px; } 
.online_cs .agree_wrap { border: 1px solid #bbb; } 
.online_cs .agree_wrap > .tit { padding: 5px; background: #eee; font-size: 15px; } 
.online_cs .agree_wrap .txt_wrap { padding: 5px; } 
.online_cs .agree_wrap .txt_wrap li { line-height: 1; margin-bottom: 5px; } 
.online_cs .agree_wrap .txt_wrap li p,
.online_cs .agree_wrap .txt_wrap li span { font-weight: 400; font-size: 11px; } 
.online_cs .agree_wrap .txt_wrap li p { font-weight: 600; } 
.online_cs .agree_info { font-weight: 400; font-size: 11px; } 
.online_cs .agree_btn { margin-top: 5px; } 
.online_cs .submit_btn { width: 100%; height: 50px; background: var(--main-color); color: #fff; font-weight: 500; font-size: 19px; line-height: 50px; margin-top: 20px; } 

/* top_btn */
.top_btn { display: none; position: fixed; right: 15px; bottom: 0; width: 50px; height: 50px; background: #333; z-index: 300; } 
.top_btn a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
/* mediaquery */
/* width가 1024px이하 */
@media (max-width:1024px) { /* header */
 .header { padding: 15px 0; } 
 .header .logo a { width: 130px; } 
 }

/* width가 768px 이하*/
@media (max-width:768px) { /* header */
 .gnbNav { display: none; } 
 .ham_menu { display: block; top: 19px; } 
 /*퀵 메뉴 */
 .fixNav .fixNav_wrap li { width: 87px; } 
 /* .online_cs .agree_wrap .txt_wrap { height: 67px; overflow-y: scroll; }  */
 }

/* width가 500px 이하*/
@media (max-width:500px) { /* header */
 .header { height: 60px; } 
 .header .logo { padding-top: 0; } 
 .header .logo a { width: 100px; } 
 .ham_menu { top: 14px; } 
 /* ham nav */
 .nav_wrap .main_nav li { padding: 7px 10px; } 
 /* top_btn */
 .top_btn button { right: 15px; width: 40px; height: 40px; } 
 .nav_wrap .main_nav li a { font-size: 15px; } 
 /* 퀵메뉴 */
 .fixNav { right: 10px; bottom: 90px; } 
 .fixNav .fixNav_wrap li { margin: 5px 0; } 
 .fixNav .remote_btn button { width: 35px; height: 35px; } 
 .fixNav .remote_btn button:before { width: 18px; height: 18px; } 
 /* .fixNav li.list a b { display:none; } */

 /* 팝업 */
 .online_cs { top: 0; left: 0; width: 100vw; height: 100%; min-height: 100vh; transform: translate(0, 0); } 

 .online_cs .box { height: calc(100vh - 45.5px); padding: 10px; overflow-y: scroll; } 

 .online_cs .top p { font-size: 17px; } 

 .online_cs .cs_form .input { height: 50px; margin-bottom: 6px; } 

 .online_cs button { margin-top: 10px; } 

 .online_cs .top .close { width: 30px; height: 30px; margin-top: 0; } 
 /* top_btn */
 .top_btn { width: 40px; height: 30px; } 
 }

/* width가 425px이하 */
@media (max-width:426px) { /* footer */
 .footer { padding: 30px 0; } 
 .footer .inner { flex-wrap: wrap; } 
 .footer .inner .txt { width: 100%; margin-top: 20px; } 
 .footer .inner .txt p { font-size: 11px; } 
 .iosNum { font-size: 11px; } 

 /* top btn */
 .top_btn button img { width: 21px; } 
 }
/* width가 320px이하 */
@media (max-width:320px){
 .online_cs .cs_form .input { height: 40px; margin-bottom: 6px; } 
 .online_cs .submit_btn { margin-top: 5px; } 
 .online_cs .agree_wrap > .tit { font-size: 13px; } 
 .online_cs .submit_btn { height: 45px; font-size: 17px; line-height: 45px; } 
 }

/* 모바일 가로모드일 때 적용할 CSS */
@media (max-width: 930px) and (max-height:428px) and (orientation: landscape){
 .fixNav { bottom: 1vh; } 
 }