@charset "UTF-8"; /* 메인 슬라이드 section1 */
.sec1 { position: relative; width: 100%; height: 100vh; padding: 0; margin: 0; } 

.sec1 img { width: 100%; height: calc(var(--vh, 1vh) * 100); object-fit: cover; } 

.mixBg { position: absolute; top: 50%; left: 0; width: 50%; height: 590px; transform: translateY(-50%); background-color: #777; mix-blend-mode: multiply; } 

.main_slitxt { position: absolute; top: 50%; left: 0; width: 50%; height: 590px; transform: translateY(-50%); } 

.main_slitxt .sliTit { position: absolute; top: 50%; width: 100%; text-align: right; transform: translateY(-50%); padding-right: 10%; } 

.main_slitxt .sliTit span { color: var(--white-color); font-weight: 300; font-size: 43px; } 

.main_slitxt .sliTit strong { display: inline-block; width: 100%; color: var(--white-color); font-weight: 600; font-size: 58px; } 

.main_slitxt .sliTit em { color: var(--main-color); font-weight: 300; font-size: 17px; letter-spacing: 14px; text-transform: uppercase; } 

.main_slitxt .sliTit p { color: var(--white-color); font-weight: 500; font-size: 19px; margin-top: 11vh; } 

.main_slitxt .sliTit p .tel_num { color: var(--main-color); font-weight: 700; font-size: 34px; } 

.swiper-container-horizontal > .mainBanPag { right: 55%; bottom: 17%; width: auto; text-align: right; } 

.swiper-pagination-bullet { position: relative; width: 5px; height: 5px; background: var(--white-color); border-radius: 50%; opacity: 1; } 

.swiper-pagination-bullet-active { width: 15px; height: 5px; background: var(--main-color); border-radius: 2.5px; } 

.swiper-pagination-bullet:before { position: absolute; top: -20px; left: 0; color: var(--main-color); font-weight: 700; font-size: 12px; opacity: 0; } 

.swiper-pagination-bullet-active:before { opacity: 1; } 

.mainBanPag > .swiper-pagination-bullet:nth-child(1):before { content: '01'; } 

.mainBanPag > .swiper-pagination-bullet:nth-child(2):before { content: '02'; } 

.mainBanPag > .swiper-pagination-bullet:nth-child(3):before { content: '03'; } 

.mainBanPag > .swiper-pagination-bullet:nth-child(4):before { content: '04'; } 

/* text-animation */
.txtAni { font-weight: inherit; font-size: 100%; line-height: inherit; overflow: hidden; } 

.txtAni > * { display: inline-block; -moz-transform: translateY(110%) rotate(.001deg); -ms-transform: translateY(110%) rotate(.001deg); -webkit-transform: translateY(110%) rotate(.001deg); transform: translateY(110%) rotate(.001deg); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; /* transition: all 1s ease; */
 transition-delay: 0.1s; -webkit-transition-delay: 0.1s; overflow: hidden; } 

.sec1 .swiper-slide-active .txtAni > * { -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 
.subSec { padding: 100px 0; } 
.subSec .section_tit { position: relative; font-weight: 700; font-size: 40px; text-align: center; margin-bottom: 110px; } 
.subSec .section_tit:before { position: absolute; bottom: -20px; left: 50%; width: 30px; height: 2px; background: #333; content: ''; transform: translateX(-50%); } 
/* section2 */
.sec2 .offers { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 180px; } 
.sec2 .offers:nth-of-type(4) { margin-bottom: 0; } 
.sec2 .offers.odd > .txt { width: 55%; } 

.sec2 .offers.odd > .img { width: 45%; height: 440px; padding-left: 2%; max-width: 468px; } 

.sec2 .offers.even > .txt { width: 55%; padding-left: 2%; } 

.sec2 .offers.even > .img { width: 45%; height: 440px; max-width: 468px; } 
.sec2 .offers > .img { position: relative; } 
.sec2 .offers > .img:before { position: absolute; top: -100px; width: 200px; height: 100px; content: ''; background-repeat: no-repeat; background-position: center; background-size: contain; } 
.sec2 .offers:first-of-type > .img:before { right: 0; background-image: url("/portfolio/hb_resort/images/section2/01_logo.png"); } 
.sec2 .offers:nth-of-type(2) > .img:before { left: 0; background-image: url("/portfolio/hb_resort/images/section2/02_logo.png"); } 
.sec2 .offers:nth-of-type(3) > .img:before { top: -110px; right: 0; background-image: url("/portfolio/hb_resort/images/section2/03_logo.png"); background-position: right; } 
.sec2 .offers:nth-of-type(4) > .img:before { left: 0; background-image: url("/portfolio/hb_resort/images/section2/04_logo.png"); } 
.sec2 .offers > .img img { height: 100%; object-fit: cover; } 

.sec2 .offers .img > p { font-weight: 300; font-size: 19px; letter-spacing: 0.1em; margin-top: 5px; } 
.sec2 .offers.odd .img > p { text-align: right; } 
.sec2 .offers.even .img > p { text-align: left; } 
.sec2 .offers .txt .mainT { font-weight: 500; font-size: 45px; line-height: 45px; } 

.sec2 .offers .txt .mainT > b { position: relative; font-weight: 500; z-index: 1; } 

.sec2 .offers .txt .mainT > b:before { position: absolute; top: 60%; left: -10px; width: calc(100% + 20px); height: 30px; background: rgba(254, 120, 0, 0.3); content: ''; transform: translateY(-50%); z-index: -1; } 

.sec2 .offers .sentents { margin-top: 3vh; } 
.sec2 .offers .sentents p { font-weight: 400; font-size: 15px; font-stretch: narrower; } 

/* section3 */
.sec3 { background: #f7f7f7; } 
.rooms_wrap.last { margin-top: 110px; } 
.rooms_type { font-weight: 500; font-size: 30px; text-transform: uppercase; } 
.rooms_desc { margin-bottom: 30px; } 
.rooms_tab { font-size: 19px; margin-bottom: 20px; } 
.rooms_tab ul { display: flex; align-items: center; justify-content: space-between; } 
.studio_rooms .rooms_tab ul li { width: 50%; text-align: center; } 

.rooms_tab button { display: inline-block; width: 100%; padding: 5px 0; color: var(--gray-color); font-weight: 400; font-size: 25px; border-bottom: 2px solid var(--gray-color); } 
.rooms_tab ul li.on > button { border: 2px solid var(--main-color); color: var(--black-color); font-weight: 500; border-bottom: none; } 
.room_list .list_cont { display: none; } 
.room_list .list_cont.active { display: block; } 
.list_cont .img { position: relative; width: 100%; height: 550px; } 
.list_cont .img > div { width: 100%; height: 100%; } 
.list_cont .img img { height: 100%; object-fit: cover; } 

.list_cont .img .plan_view_btn { position: absolute; right: 20px; bottom: 20px; padding: 5px 10px; background: rgba(0,0,0,0.5); color: #fff; font-size: 17px; z-index: 10; } 
.list_cont .img .plan_img { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 20; } 

.list_cont .img .plan_img img:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; content: ''; } 
.list_cont .img .plan_img .close { position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; } 
.list_cont .img .img_wrap { position: absolute; top: 50%; left: 50%; width: 85%; height: 90%; background: #fff; max-width: 1024px; transform: translate(-50%, -50%); } 
.list_cont .img .img_wrap img { position: absolute; top: 50%; left: 50%; height: 97%; object-fit: contain; transform: translate(-50%,-50%); } 
.list_cont .img .two_img img { position: absolute; top: 50%; object-fit: contain; } 
.list_cont .img .two_img img:first-of-type { left: 10px; width: 50%; transform: translate(0, -50%); } 
.list_cont .img .two_img img:nth-of-type(2) { right: 10px; width: 50%; transform: translate(0, -50%); } 
.list_cont.g50 .img .two_img img:first-of-type { top: 0; left: 0; width: 100%; height: 50%; transform: translate(0, 0); } 
.list_cont.g50 .img .two_img img:nth-of-type(2) { right: 0; width: 100%; height: 50%; transform: translate(-50%,0); } 
.close > span { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #fff; } 
.close .line-01 { transform: rotate(135deg) translateX(0%); } 

.close .line-02 { transform: rotate(45deg) translateX(0%); } 
.sec3 .swiper-button-next,
.sec3 .swiper-button-prev { width: 90px; height: 120px; background-size: contain; } 
.roomsSlideNext { right: 0; background-image: url("/portfolio/hb_resort/images/section2/next_btn.png"); } 
.roomsSlidePrev { left: 0; background-image: url("/portfolio/hb_resort/images/section2/prev_btn.png"); } 

.room_list .info { padding: 18px 0; border: 1px solid #777; background: #fcfcfc; margin-top: 30px; } 
.room_list .info.two_box { display: flex; justify-content: space-between; } 
.room_list .info .info_box { padding: 0 20px; } 
.room_list .info.two_box .info_box { width: 50%; } 
.room_list .info.two_box .info_box:first-child { border-right: 1px solid #999; } 
.room_list .top_txt { color: var(--main-color); font-weight: 700; font-size: 25px; text-align: center; } 
.room_list .top_txt span { display: block; font-size: 14px; } 
.room_list .txt { font-weight: 600; text-align: center; margin-top: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; } 
.room_list .price { margin-top: 10px; } 
.room_list .price > li > p { font-weight: 500; } 
.room_list .price > li > p > span { font-size: 12px; } 
.room_list .price ul { text-indent: 5px; } 
.room_list .price ul > li > p { color: var(--text-gray-color); } 
.room_list .price ul>li>p .price01 { font-size: 14px; } 
.room_list .price ul>li>p .price02 { color:var(--main-color); font-weight: 700; } 
.room_list .price ul > li > p span { color: var(--text-gray-color); font-size: 12px; } 
.room_list .soldOut_box .top_txt { color: #777; } 
.room_list .soldOut_box li p { color: #BD2323; font-size: 25px; text-align: center; } 

/* btn_list_wrap */
.btn_list_wrap { width: 100%; height: 200px; background: no-repeat center/cover url("/portfolio/hb_resort/images/bg/btn_bg.jpg"); } 
.btn_wrap02 { background: no-repeat center/cover url("/portfolio/hb_resort/images/bg/btn_bg02.jpg"); } 
.btn_list_wrap .inner { display: flex; width: 100%; height: 200px; align-items: center; justify-content: space-between; } 
.btn_list_wrap a { display: inline-block; width: 30%; height: 60px; background: rgba(0,0,0,0.5); color: #fff; font-size: 23px; line-height: 60px; text-align: center; border-radius: 2px; transition: 0.3s ease-in-out; } 
.btn_list_wrap a:hover { background: var(--main-color); transform: translateY(-6px); box-shadow: 0 5px 10px -5px var(--main-color); } 

/* sec4 */
.sec4 { background: #fafafa; } 
.sec4 .inner { display: flex; align-items: center; justify-content: space-between; } 
.sec4 .list { position: relative; width: 32%; height: 500px; } 
.sec4 .list01 { background: no-repeat center/cover url("/portfolio/hb_resort/images/section4/01.jpg"); } 
.sec4 .list02 { background: no-repeat center/cover url("/portfolio/hb_resort/images/section4/02.jpg"); } 
.sec4 .list03 { background: no-repeat center/cover url("/portfolio/hb_resort/images/section4/03.jpg"); } 
.sec4 .list .txt { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; padding: 5% 3%; background: rgba(0,0,0,0.8); } 
.sec4 .list .txt p:first-child { color: #bbb; font-size: 14px; } 

.sec4 .list .txt .tit { color: #fff; font-weight: 600; font-size: 29px; text-transform: uppercase; padding-bottom: 20px; } 
.sec4 .list .txt .detail { color: #fff; } 
.sec4 .list .txt .detail b { color: var(--main-color); font-weight: 500; } 

/* section5 */

.subtit { font-weight: 500; font-size: 30px; } 
.subtit b { color: var(--main-color); font-weight: 500; } 
.table_wrap.last { margin-top: 50px; } 
.tb_cont .memberTb { width: 100%; vertical-align: middle; margin-top: 10px; } 
.memberTb tr th { padding: 20px 0; background: #f7f7f7; font-size: 19px; line-height: 1.5em; text-align: center; vertical-align: middle; border-bottom: 1px solid #777; border-top: 1px solid #777; } 
.memberTb tr td { padding: 20px 2px; background: #fff; color: #4c443d; line-height: 1.5em; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd; } 
.memberTb tr td.head { background: #f7f7f7; } 
.memberTb tr td span { display: block; font-size: 14px; } 
.memberTb tr .last { border-right: none; } 

/* section6 */
.sec6 { background: #fff6ee; } 
.sec6 .slide_wrap { position: relative; } 
.specialSlide img { width: 100%; height: 380px; object-fit: cover; } 
.specialSlide .txt { margin-top: 30px; } 
.specialSlide .txt strong { display: inline-block; font-weight: 300; font-size: 23px; text-transform: uppercase; } 
.specialSlide .txt strong b { font-weight: 600; font-size: 35px; letter-spacing: 0.15em; } 
.specialSlide .txt p { font-size: 23px; margin-top: 5px; margin-bottom: 10px; } 
.specialSlide .txt li { color: #777; font-size: 19px; } 
.specialSlideNext { right: -7vw; width: 38px; height: 70px; background-image: url("/portfolio/hb_resort/images/section6/arrow-L.png"); background-size: contain; transform: translateY(-50%); } 

/* video */
.video_cont { margin:20px 0; } 
.video_cont .inner { text-align: center; } 
.video_cont .inner video { width: 100%; border:1px solid #bbb;}
/* pc,mo */
.pc { display: inline-block; } 
.mo { display: none; } 

/* mediaquery */
/* width가 1640px이하 */
@media (max-width:1640px) { } 

/* width가 1440px이하 */
@media (max-width:1440px) { /* section6 */
 .sec6 .slide_wrap { padding-right: 66px; } 

 .specialSlideNext { right: 0; } 
 }

/* width가 1200px이하 */
@media (max-width:1200px) { /* section2 */
 .sec2 .offers .txt .mainT { font-size: 40px; line-height: 40px; } 
 .sec2 .offers > .img:before { top: -70px; width: 153px; height: 70px; } 
 .sec2 .offers:nth-of-type(3) > .img:before { top: -75px; } 
 .sec2 .offers .img > p { font-size: 15px; } 
 }

/* width가 1024px이하 */
@media (max-width:1024px) { /* section1 */
 .mixBg { width: 70%; } 

 .main_slitxt { width: 70%; } 

 .swiper-container-horizontal > .mainBanPag { right: 35%; } 

 /* sectio4 */
 .sec4 .list .txt p:first-child { font-size: 12px; } 
 .sec4 .list .txt .detail { font-size: 15px; } 
 /* section6 */
 .specialSlide .txt strong { font-size: 19px; } 
 .specialSlide .txt strong b { font-size: 31px; } 
 .specialSlide .txt p { font-size: 21px; } 
 .specialSlide .txt li { font-size: 17px; } 
 }

/* width가 1000px이하 */
@media (max-width:1000px) { } 

/* width가 768px 이하*/
@media (max-width:768px){
 .subSec { padding: 60px 0; } 
 .subtit { font-size: 27px; } 
 /* section1 */
 .main_slitxt,
 .mixBg { top: auto; bottom: 0; left: 0; width: 100%; height: 300px; transform: unset; } 

 .main_slitxt .sliTit { top: 30px; left: 0; text-align: left; transform: unset; padding-right: 0; padding-left: 15px; } 
 .main_slitxt .sliTit span { font-size: 27px; } 
 .main_slitxt .sliTit strong { font-size: 44px; } 
 .main_slitxt .sliTit p { font-size: 19px; margin-top: 25px; } 
 .main_slitxt .sliTit p .tel_num { font-size: 23px; } 

 .swiper-container-horizontal > .mainBanPag { right: 3%; bottom: 10px; } 

 /* section2 */
 .subSec .section_tit { font-size: 35px; margin-bottom: 70px; } 
 .sec2 .offers { flex-wrap: wrap; margin-bottom: 68px; } 
 .sec2 .offers .txt .mainT { font-size: 33px; } 
 .sec2 .offers .txt .mainT > b:before { top: 70%; height: 18px; } 
 .sec2 .offers.even { flex-direction: column-reverse; } 
 .sec2 .offers.even > .img,
 .sec2 .offers.even > .txt,
 .sec2 .offers.odd > .img,
 .sec2 .offers.odd > .txt { width: 100%; } 
 .sec2 .offers.even > .img,
 .sec2 .offers.odd > .img { height: 292px; padding-left: 0; max-width: 768px; margin-bottom: 40px; } 
 .sec2 .offers.even > .txt,
 .sec2 .offers.odd > .txt { margin-bottom: 74px; } 
 .sec2 .offers > .img:before { top: -45px; width: 123px; height: 40px; } 
 .sec2 .offers:nth-of-type(3) > .img:before { top: -49px; } 
 .list_cont .img .plan_img .close { width: 35px; height: 35px; } 
 /* section3 */
 .rooms_type { font-size: 27px; } 
 .rooms_desc { font-size: 15px; } 
 .close { width: 35px; height: 35px; } 
 .room_list .top_txt { font-size: 21px; } 
 .room_list .top_txt span { font-size: 11px; } 
 .room_list .info.two_box { flex-wrap: wrap; } 
 .room_list .info.two_box .info_box { width: 100%; } 
 .room_list .info.two_box .info_box:first-child { border-right: none; border-bottom: 1px solid #777; padding-bottom: 10px; margin-bottom: 10px; } 
 .room_list .info { padding: 10px 0; } 
 .room_list .info .info_box { padding: 0 10px; } 
 .room_list .price ul > li > p { font-size: 14px; } 
 .rooms_wrap.last { margin-top: 50px; } 

 /* section4 */
 .sec4 .inner { flex-wrap: wrap; } 
 .sec4 .list { width: 100%; height: 230px; margin-bottom: 10px; } 
 .sec4 .list .txt { top: 0; right: 0; left: auto; width: 50%; height: 100%; } 

 /* section5 */
 .memberTb tr th { font-size: 15px; } 
 .memberTb tr td.head { font-size: 15px; } 
 .memberTb tr td { font-size: 14px; } 

 /* section6 */
 .specialSlide .txt { margin-top: 20px; } 
 }

/* width가 500px 이하*/
@media (max-width:500px){
 .subSec .section_tit { margin-bottom: 48px; } 
 /* pc,mo */
 .pc { display: none; } 

 .mo { display: inline-block; } 

 /* section1 */
 .main_slitxt .sliTit span { font-size: 17px; } 

 .main_slitxt .sliTit strong { font-size: 35px; } 

 .main_slitxt .sliTit em { font-size: 10px; letter-spacing: 11px; } 

 .main_slitxt .sliTit p { font-size: 14px; margin-top: 15px; } 

 .main_slitxt,
 .mixBg { height: 258px; } 

 /* section2 */
 .sec2 .offers.even > .txt,
 .sec2 .offers.odd > .txt { margin-bottom: 50px; } 
 .sec2 .offers .txt .mainT { font-size: 25px; } 
 .sec2 .offers .sentents p { font-size: 13px; } 
 /* section3 */

 .rooms_tab button { font-size: 21px; } 
 .rooms_desc { font-size: 13px; } 
 .sec3 .swiper-button-next,
 .sec3 .swiper-button-prev { width: 48px; height: 61px; } 
 .list_cont .img .plan_view_btn { right: 10px; bottom: 10px; font-size: 15px; } 
 .list_cont .img { height: 310px; } 
 .list_cont .img .img_wrap { left: 46%; } 
 .list_cont .img .plan_img .close { top: 5px; right: 5px; width: 25px; height: 25px; } 
 .btn_list_wrap a { height: 50px; font-size: 19px; line-height: 50px; } 

 /* section4 */
 .sec4 .list .txt { width: 60%; } 
 .sec4 .list .txt p:first-child { font-size: 11px; } 
 .sec4 .list .txt .tit { font-size: 19px; } 
 .sec4 .list .txt .detail { font-size: 14px; } 

 /* btn_wrap */
 .btn_list_wrap { height: 145px; } 
 .btn_list_wrap .inner { height: 145px; flex-wrap: wrap; } 
 .btn_list_wrap a:nth-child(1),
 .btn_list_wrap a:nth-child(2) { width: 49%; } 
 .btn_list_wrap a:nth-child(3) { width: 100%; } 

 /* section6 */
 .sec6 .slide_wrap { padding-right: 45px; } 
 .specialSlideNext { height: 40px; } 
 .specialSlide img { height: 267px; } 
 .specialSlide .txt p { font-size: 19px; } 
 .specialSlide .txt li { font-size: 14px; } 
 /* video */
 .video_cont .inner video { width: 100%; } 
 }


/* width가 425px이하 */
@media (max-width:426px){
 .subtit { font-size: 21px; } 
 .subSec .section_tit { font-size: 25px; } 
 .rooms_type { font-size: 21px; } 
 /* section1 */
 .main_slitxt .sliTit em { font-size: 11px; letter-spacing: 7px; } 
 .main_slitxt .sliTit p { font-size: 12px; margin-top: 15px; } 
 .main_slitxt .sliTit strong { font-size: 29px; } 
 .main_slitxt .sliTit span { font-size: 15px; } 
 .main_slitxt .sliTit { padding-left: 15px; } 
 .swiper-container-horizontal > .mainBanPag { bottom: 1%; } 
 .room_list .soldOut_box li p { font-size: 21px; } 
 /* section2 */
 .sec2 .offers .txt .mainT { font-size: 23px; } 
 /* section3 */
 .specialSlide .txt strong b { font-size: 27px; letter-spacing: 0.05em; } 
 .room_list .price ul>li>p { margin-top: 7px; } 
 .room_list .mWrap { display:block; padding-left: 7px; } 
 /* section4 */
 .sec4 .list { height: 183px; } 
 .sec4 .list .txt .tit { padding-bottom: 10px; } 
 .sec4 .list .txt .detail { font-size: 13px; } 
 /* section5 */
 .memberTb tr td.head { font-size: 12px; } 
 .memberTb tr th { font-size: 12px; } 
 .memberTb tr td { font-size: 11px; } 
 .memberTb tr td span { font-size: 10px; } 
 /* section6 */
 .specialSlide .txt p { font-size: 15px; } 
 }

/* width가 320px 이하 */
@media (max-width:320px) { /* section1 */
 .main_slitxt .sliTit em { font-size: 10px; } 
 /* section2 */
 .sec2 .offers .sentents p { font-size: 13px; } 
 /* section3 */
 .rooms_tab button { font-size: 19px; } 
 /* section4 */
 .sec4 .list .txt { width: 70%; } 
 /* section6 */
 .sec6 .slide_wrap { padding-right: 30px; } 
 .specialSlide .txt li { font-size: 13px; } 
 .specialSlide .txt strong { font-size: 15px; } 
 .specialSlideNext { width: 17px; } 
 }