/*메인페이지 소스 ver4*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;900&display=swap');


/*공통 시작*/
body { width:100%; overflow-x: hidden !important; }
main {  font-family: 'Noto Sans KR', sans-serif; }

/*메인 슬라이더 시작*/
.main_carousel {  overflow: hidden; position: relative;}
.main_carousel .owl-stage-outer .item img { width:100%; }
.main_carousel .slide_txt { 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    left: 50%; 
    z-index: 5;
}
.main_carousel .slide_txt h3 {
    display: block;
    color: #ffffff;
    font-size: 60px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0px 0px 30px rgba(0,0,0,.5);
}
.main_carousel .slide_txt h4 {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0px 0px 30px rgba(0,0,0,.5);
}
.main_carousel .owl-theme .owl-dots  { 
    position: absolute; 
    bottom:40px;
    left:50%; 
    transform:translateX(-50%);
    display: flex;
    align-items: center;
    }
.main_carousel .owl-theme .owl-dots .owl-dot {position: relative; padding:0; margin-right:20px; display: block; float:left;}
.main_carousel .owl-theme .owl-dots .owl-dot:last-child { margin-right:0; }
.main_carousel .owl-theme .owl-dots .owl-dot span { 
    background-color:#ffffff !important; 
    display: block; 
    width:10px; 
    height:10px; 
    padding:0; 
    margin:0;

    border: 1px solid #ffffff;
}
.main_carousel .owl-theme .owl-dots .owl-dot.active span { background-color:transparent !important; width: 16px; height: 16px;}
.main_carousel .side-btns > div { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;}
.main_carousel .side-btns > div.prev {left: 20px; cursor: pointer; }
.main_carousel .side-btns > div.next {right: 20px; cursor: pointer; }

.main_carousel .item-counter {
    position:absolute; font-size:18px; line-height:18px; color:#fff; width:40px; height:15px;
    bottom:43px; right:417px; z-index: 9999; font-family: 'Montserrat', sans-serif; display: none;
}

.main_carousel .item-counter .current-item-no { font-weight:bold; }


@media screen and (max-width:1800px) {
    .main_carousel .side-btns { right:150px; }
    .main_carousel .item-counter { right:195px; }
}
@media screen and (max-width:1400px) {
    .main_carousel .owl-stage-outer .item img.mv_txt { left:7vw; top:35%; }
    .main_carousel .owl-stage-outer .item img { height:800px; }
}
@media screen and (max-width: 1250px) {
    .main_carousel .owl-stage-outer .item img {height:700px; }
    .main_carousel .slide_txt h3 {font-size: 50px;}
    .main_carousel .slide_txt h4 {font-size: 14px;}
}
@media screen and (max-width:1000px) {
    .main_carousel .side-btns { right:100px; zoom:.9;}
    .main_carousel .item-counter { right:145px; zoom:.9;}
    .main_carousel .slide_txt h3 {font-size: 40px;}
    .main_carousel .slide_txt h4 {font-size: 13px;}
}
@media screen and (max-width:860px) {
    .main_carousel .owl-stage-outer .item img {height:450px; }
    .main_carousel .owl-stage-outer .owl-item.active .item {  }
    .main_carousel .side-btns { right:50px; zoom:.8; }
    .main_carousel .item-counter { right:90px; zoom:.8; }
    .main_carousel .owl-dots { zoom:.8; }
    .main_carousel .owl-stage-outer .item { overflow: hidden; }
    .main_carousel .owl-stage-outer .item img { width: auto; height:450px; }
    .main_carousel .slide_txt h3 {font-size: 30px;}
    .main_carousel .slide_txt h4 {font-size: 12px;}
}
@media screen and (max-width: 640px) {
    .main_carousel .slide_txt h3 {font-size: 23px;}
    .main_carousel .slide_txt h4 {font-size: 11px;}
    .main_carousel .side-btns { display: none; }
}
@media screen and (max-width: 500px) {
    .main_carousel .slide_txt h3 {font-size: 17px;}
    .main_carousel .slide_txt h4 {font-size: 10px;}
}
@media screen and (max-width: 350px) {
    .main_carousel .slide_txt {max-width: 180px; width: 100%;}
}
/*메인 슬라이더 끝*/

/*섹션 1 객실안내 시작*/
section.sec01 {}
section.sec01 .content_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.sec01 .content_wrap > div {width: 50%;}

/*섹션 1의 bx-slider*/
section.sec01 .content_wrap .img_cell {}
section.sec01 .content_wrap .img_cell .bx-wrapper {box-shadow: none; border: none; position: relative; padding: 0; margin: 0;}
section.sec01 .content_wrap .img_cell .bx-wrapper .bx-pager {
    position: absolute;
    bottom: 30px;
    padding-top: 0;
    font-weight: normal;
}
.bx-wrapper .bx-pager.bx-default-pager {display: flex; align-items: center; justify-content: center;}
.bx-wrapper .bx-pager.bx-default-pager a {
    background-color: #ffffff !important;
    border-radius: 50% !important;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background-color: transparent !important;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    margin-right: 10px;
}

section.sec01 .content_wrap .txt_cell {text-align: center;}
section.sec01 .content_wrap .txt_cell .txt_box {
    letter-spacing: -.6px;
    margin: 60px 0;
    color: #222222;
}
section.sec01 .content_wrap .txt_cell h3 {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: -.2px;
}
section.sec01 .content_wrap .txt_cell h3::after {
    display: block;
    clear: both;
    content: '';
    width: 70px;
    height: 3px;
    background-color: #222222;
    margin: 15px auto 0;
}
section.sec01 .content_wrap .txt_cell p {
    display: block;
    font-weight: 400;
    font-size: 17px;
    line-height: 170%;
}
section.sec01 .content_wrap .txt_cell a.more_btn {
    display: block;
    width: 110px;
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #222222;
    line-height: 40px;
    color: #222222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    transition: background-color .3s;
}
section.sec01 .content_wrap .txt_cell a.more_btn:hover {
    background-color: #222222;
    color: #ffffff;
}
@media screen and (max-width: 1700px) {
    section.sec01 .content_wrap .txt_cell .txt_box {margin: 40px 0;}
    section.sec01 .content_wrap .txt_cell h3 {font-size: 30px;}
    section.sec01 .content_wrap .txt_cell p {font-size: 15px;}
}
@media screen and (max-width: 1350px) {
    section.sec01 .content_wrap .txt_cell .txt_box {margin: 25px 0;}
    section.sec01 .content_wrap .txt_cell h3 {font-size: 22px;}
    section.sec01 .content_wrap .txt_cell p {font-size: 14px;}
    section.sec01 .content_wrap .txt_cell a.more_btn {width: 90px; height: 30px; line-height: 30px; font-size: 14px;}
}
@media screen and (max-width: 1060px) {
    section.sec01 .content_wrap {flex-direction:column; margin-bottom: 70px;}
    section.sec01 .content_wrap.reverse {flex-direction: column-reverse;}
    section.sec01 .content_wrap > div {width: 100%; max-width: 960px;}
    section.sec01 .content_wrap .img_cell {margin-bottom: 20px;}
}
@media screen and (max-width: 500px) {
    section.sec01 .content_wrap { margin-bottom: 40px;}
    section.sec01 .content_wrap .img_cell {margin-bottom: 15px;}
    section.sec01 .content_wrap .img_cell .bx-wrapper .bx-pager {zoom:.8;}
}
@media screen and (max-width: 400px) {
    section.sec01 .content_wrap .txt_cell h3 {font-size: 18px;}
    section.sec01 .content_wrap .txt_cell h3::after {width: 40px; height: 2px; margin: 10px auto 0;}
    section.sec01 .content_wrap .txt_cell p {font-size: 13px;}
}
/*섹션 1 객실안내 끝*/

/*섹션2 글램핑장 안내 시작*/
section.sec02 {
    width: 100%;
    height: 580px;
}
section.sec02 > .content_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: inherit;
}
section.sec02 .content_wrap > div {
    background-size: cover;
    background-repeat: no-repeat;
    height: inherit;
    width: calc(100% / 4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Noto Sans KR', sans-serif;
    position: relative;
    cursor: pointer;
    background-color: #444444;
}
section.sec02 .content_wrap > div:hover {background-color: #4f4096;}
section.sec02 .content_wrap > div:nth-of-type(1) {background-image: url('../img/main/sec02_bg1.png');}
section.sec02 .content_wrap > div:nth-of-type(2) {background-image: url('../img/main/sec02_bg2.png');}
section.sec02 .content_wrap > div:nth-of-type(3) {background-image: url('../img/main/sec02_bg3.png');}
section.sec02 .content_wrap > div:nth-of-type(4) {background-image: url('../img/main/sec02_bg4.png');}

section.sec02 .content_wrap > div h4 {
    display: block; 
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 50px;
    transition: margin .3s;
}
section.sec02 .content_wrap > div:hover h4 {display: block; margin: 0;}
section.sec02 .content_wrap > div span {
    display: none;
    font-weight: 300;
    font-size: 17px;
    transition: margin .3s;
}
section.sec02 .content_wrap > div:hover span {display: block; margin: 40px auto;}
section.sec02 .content_wrap > div a.more_btn2 {
    display: block;
    width: 150px;
    height: 45px;
    line-height: 43px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid #ffffff;
    text-align: center;
    margin: 0 auto;
    transition: background-color .3s;
}
section.sec02 .content_wrap > div:hover a.more_btn2 {
    background-color: #ffffff;
    color: #37453d;
}

@media screen and (max-width: 1200px) {
    section.sec02 {height: 1000px;}
    section.sec02 .content_wrap {flex-wrap: wrap;}
    section.sec02 .content_wrap > div {width: calc(100% / 2); height: 500px;}
}
@media screen and (max-width: 760px) {
    section.sec02 .content_wrap > div h4 {font-size: 22px; margin-bottom: 30px;}
    section.sec02 .content_wrap > div span {font-size: 15px;}
    section.sec02 .content_wrap > div a.more_btn2 {font-size: 15px; width: 130px; height: 35px; line-height: 35px;}
}
@media screen and (max-width: 640px) {
    section.sec02 {height: 1200px;}
    section.sec02 .content_wrap > div {width: 100%; height: 300px;}
    section.sec02 .content_wrap > div:hover span {margin: 20px 0 25px;}
}
@media screen and (max-width: 500px) {
    section.sec02 .content_wrap > div h4 {margin: 0; font-size: 19px;}
    section.sec02 .content_wrap > div span {display: block; margin: 20px 0 25px; font-size: 14px;}
}
/*섹션2 글램핑장 안내 끝*/

/*팝업창 반응형*/
@media screen and (max-width: 860px) {
    #hd_pop .hd_pops { max-width: calc(100% - 20px); left:10px !important; top: 50px !important; height: auto; }
    .hd_pops_con { max-width: 100%; height:auto !important; }
    .hd_pops_con br { display: none; }
    .hd_pops img { display: block; }
    .hd_pops_footer button { font-size: 10px; }
}