@charset "UTF-8";

/****** Index ******/
/*
#index .myVedio {position:relative;width:calc(100% - 4rem);height:calc((100vh - 77px) - 4rem);margin:calc(77px + 2rem) auto 2rem;overflow:hidden}
#index .myVedio::before {position:absolute;width:100%;height:100%;content:"";display:block;z-index:1}
#index .myVedio .innerBox {position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);object-fit:cover}
#index .myVedio .innerBox {min-width:100%;min-height:100%;display:block;overflow:hidden;z-index:1}
#index .myVedio .innerBox #mainVideo {width:100%;height:100%;display:block;}
*/
#container .mySlide .innerBox .swiperArrows {top:50%;transform:translate3d(0, -50%, 0);}
#container .mySlide .innerBox .swiper-button-prev {left:1.5%;}
#container .mySlide .innerBox .swiper-button-next {right:1.5%;}
#container .myPrvs .innerBox .swiperArrows {top:50%;transform:translate3d(0, calc(-100% - 92px), 0);}
#container .myPrvs .swiper-button-prev {left:.5rem;}
#container .myPrvs .swiper-button-next {right:.5rem;}


#index .myVedio {position:relative;margin:calc(77px + 2rem) auto 2rem;overflow:hidden}
#index .myVedio {width:77%;padding-bottom:calc(56.25% / 10 * 7.7 - 2rem);}
#index .myVedio::before {position:absolute;width:100%;height:100%;content:"";display:block;z-index:1}
#index .myVedio .innerBox {position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);object-fit:cover}
#index .myVedio .innerBox {min-width:100%;min-height:100%;display:block;overflow:hidden;z-index:1}
#index .myVedio .innerBox #mainVideo {width:100%;height:100%;display:block;}
#index .myVedio .control {display:flex;position:absolute;bottom:3.5%;width:100%;justify-content:center;z-index:3;}
#index .myVedio .control a {position:relative;display:block;color:#fff;width:31px;height:31px;margin:0 0.5rem;}
#index .myVedio .control a {border-radius:50%;border:1px solid #ffffff99;text-align:center;}
#index .myVedio .control a img {display:inline-block;width:15px;height:15px;padding:7.5px;}

#index .mySlide {width:100%;position:relative;margin:4rem auto 0;}
#index .mySlide .innerBox {position:relative;width:100%;height:100vh;overflow:hidden;}
#index .mySlide .innerBox .swiper {position:absolute;width:100%;height:100%;}
#index .myText {width:calc(100% - 4rem);padding:10rem 0;margin:0 auto;}
#index .myText .innerBox {width:100%}
#index .myText .innerBox p {text-align:center;font-size:1.6rem;line-height:3rem;color:#707070}
#index .myGallery {width:calc(100% - 4rem);max-width:1400px;padding-bottom:10rem;margin:0 auto;}
#index .myGallery .innerBox {padding:0 2rem;overflow:hidden;}
#index .myGallery .innerBox h1 {width:100%;max-width:316px;text-align:center;margin:0 auto 5rem;}
#index .myGallery .innerBox h1 img {display:block;width:100%;}
#index .myGallery .innerBox > div {position:relative;}
#index .myGallery .innerBox > div:nth-of-type(1),
#index .myGallery .innerBox > div:nth-of-type(3) {width:60%;padding-bottom:calc(66.66% / 10 * 6);float:left;}
#index .myGallery .innerBox > div:nth-of-type(2) {width:40%;padding-bottom:calc(66.66%);float:right;}
#index .myGallery .innerBox > div:nth-of-type(3) {padding-bottom:calc(66.66% / 10 * 6);}
#index .myGallery .innerBox > div > div {position:absolute;}
#index .myGallery .innerBox > div:nth-of-type(1) > div {width:90%;height:90%;right:3.5%;}
#index .myGallery .innerBox > div:nth-of-type(2) > div {width:90%;height:90%;left:3.5%;top:12.5%;}
#index .myGallery .innerBox > div:nth-of-type(3) > div {width:75%;height:90%;right:5%;}
#index .myRoomPv {width:calc(100% - 4rem);max-width:1400px;padding-bottom:10rem;margin:0 auto 13rem;}
#index .myRoomPv {border-bottom:1px solid #e8e8e8;}
#index .myRoomPv h1 {text-align:center;}
#index .myRoomPv h1 strong {font-size:3rem;line-height:3.5rem;display:block;color:#969697;}
#index .myRoomPv h1 a {display:inline-block;font-size:15px;line-height:15px;margin-top:1rem;}
#index .myRoomPv h1 a {background-color:#F5E6DD;border-radius:7px;padding:12.5px 20px;}
#index .myRoomPv .innerBox {position:relative;padding:0 2rem;}
#index .myRoomPv .innerBox .hiddenBox {width:calc(100% - 2rem);padding-bottom:7rem;margin:3.5rem auto 0;overflow:hidden;}
#index .myRoomPv .innerBox .mySwiper a {width:calc(100% - 2rem);position:relative;display:block;text-align:center;}
#index .myRoomPv .innerBox .mySwiper a .bgImg {position:relative;width:100%;padding-bottom:66.66%;}
#index .myRoomPv .innerBox .mySwiper a .bgImg::before {position:absolute;width:100%;height:100%;background-color:#969697;opacity:0.7;display:block;content:"";}
#index .myRoomPv .innerBox .mySwiper a .txt {text-align:center;padding:3rem 0;background-color:#E6E6E6;}
#index .myRoomPv .innerBox .mySwiper a .txt strong {display:block;font-size:15px;line-height:20px;}
#index .myRoomPv .innerBox .mySwiper a .txt span {display:block;font-size:13px;line-height:18px;margin:1rem 0 2rem;}
#index .myRoomPv .innerBox .mySwiper a .txt i {display:inline-block;font-size:13px;line-height:18px;background-color:hwb(0 100% 0% / 0.5);}
#index .myRoomPv .innerBox .mySwiper a .txt i {font-style:normal;border-radius:7px;padding:7px 20px;}
#index .myRoomPv .swiper-pagination {display:none;}
#index .myRoomPv .innerBox .mySwiper a .bgImg::before {transition:opacity .3s;}
#index .myRoomPv .innerBox .mySwiper a:hover .txt {transition:background-color .3s;}
/* hover */
@media (hover: hover) {
    #index .myRoomPv .innerBox .mySwiper a:hover .bgImg::before {opacity:0;}
    #index .myRoomPv .innerBox .mySwiper a:hover .txt {background-color:#f5e5dc;}
}

#index .mySpecialPv {width:calc(100% - 4rem);max-width:1400px;padding-bottom:13rem;margin:0 auto;}
#index .mySpecialPv .innerBox {display:flex;flex-wrap:wrap;position:relative;}
#index .mySpecialPv .innerBox .imgBox {width:100%;margin-top:3rem;order:2;}
#index .mySpecialPv .innerBox .imgBox ul {position:relative;width:80%;padding-bottom:calc(66.66% / 10 * 8);margin:0 auto;}
#index .mySpecialPv .innerBox .imgBox ul li {position:absolute;width:100%;height:100%;opacity:0;z-index:0;}
#index .mySpecialPv .innerBox .imgBox ul li.on {opacity:1;z-index:1;}
#index .mySpecialPv .innerBox .imgBox ul li a {width:100%;height:100%;display:block;overflow:hidden;}
#index .mySpecialPv .innerBox .imgBox ul li a div {position:relative;width:100%;height:100%;transform:scale(1);}
#index .mySpecialPv .innerBox .imgBox ul li a span {display:none;}
#index .mySpecialPv .innerBox .txtBox {display:flex;align-items:center;width:100%;margin:0;order:1;}
#index .mySpecialPv .innerBox .txtBox .lists {width:90%;margin:0 auto;text-align:center;}
#index .mySpecialPv .innerBox .txtBox .lists h1 {text-align:center;}
#index .mySpecialPv .innerBox .txtBox .lists h1 strong {font-size:3rem;line-height:3.5rem;display:block;color:#969697;}
#index .mySpecialPv .innerBox .txtBox .lists h1 a {display:inline-block;font-size:15px;line-height:15px;margin-top:1rem;}
#index .mySpecialPv .innerBox .txtBox .lists h1 a {background-color:#F5E6DD;border-radius:7px;padding:12.5px 20px;}
#index .mySpecialPv .innerBox .txtBox .lists ul {display:flex;justify-content:center;flex-wrap:wrap;margin-top:3rem;}
#index .mySpecialPv .innerBox .txtBox .lists ul li {position:relative;margin:0 1.5rem .5rem;display:block;font-size:1.5rem;line-height:2rem;}
#index .mySpecialPv .innerBox .txtBox .lists ul li::before {position:absolute;top:50%;right:-1.5rem;display:inline-block;content:"|";}
#index .mySpecialPv .innerBox .txtBox .lists ul li::before {font-size:1.6rem;line-height:2rem;transform:translateY(-50%);}
#index .mySpecialPv .innerBox .txtBox .lists ul li:last-child::before {display:none;}
#index .mySpecialPv .innerBox .txtBox .lists ul li a {display:inline-block;color:#787878;padding:0.5rem 0;}
#index .mySpecialPv .innerBox .txtBox .lists ul li.on a {color:#202020;font-weight:500;}
#index .mySpecialPv .imgBox ul li {transition:opacity .5s;}
#index .mySpecialPv .imgBox ul li a div {transition:transform .5s;}
/* #index .mySpecialPv .imgBox ul li.on {transition:none;} */
#index .mySpecialPv .txtBox ul li a {transition:color .5s;}

#index .myServicePv {width:calc(100% - 4rem);max-width:1400px;padding-bottom:10rem;margin:0 auto;}
#index .myServicePv h1 {width:100%;max-width:588px;text-align:center;margin:0 auto 5rem;}
#index .myServicePv h1 img {display:block;width:100%;}
#index .myServicePv h2 {font-size:3rem;line-height:3.5rem;margin:7.5rem 0 3rem;display:block;color:#969697;text-align:center;}
#index .myServicePv .innerBox {position:relative;padding:0 2rem;}
#index .myServicePv .innerBox .hiddenBox {width:calc(100% - 2rem);padding-bottom:7rem;margin:3.5rem auto 0;overflow:hidden;}
#index .myServicePv .innerBox .mySwiper a {width:calc(100% - 2rem);position:relative;display:block;text-align:center;}
#index .myServicePv .innerBox .mySwiper a .bgImg {position:relative;width:100%;padding-bottom:100%;overflow:hidden;}
#index .myServicePv .innerBox .mySwiper a .bgImg::before {position:absolute;width:100%;height:100%;background-color:#969697;opacity:0.7;display:block;content:"";}
#index .myServicePv .innerBox .mySwiper a .txt {text-align:center;padding:3rem 0;}
#index .myServicePv .innerBox .mySwiper a .txt strong {display:block;font-size:16px;line-height:21px;color:#969697;}
#index .myServicePv .innerBox .mySwiper a .txt span {display:block;font-size:14px;line-height:19px;margin:2rem 0;color:#969697;}
#index .myServicePv .swiperArrows {color:#202020;opacity:.7;transform:translate3d(0, calc(-50% - 5rem), 0);}
#index .myServicePv .swiper-button-prev {left:.5rem;}
#index .myServicePv .swiper-button-next {right:.5rem;}
#index .myServicePv .swiper-pagination {display:none;}
#index .myServicePv .innerBox .mySwiper a .bgImg::before {transition:opacity .3s;}
/* hover */
@media (hover: hover) {
    #index .myServicePv .innerBox .mySwiper a:hover .bgImg::before {opacity:0;}
    #index .mySpecialPv .innerBox .imgBox ul li a div:hover {transform:scale(1.05);}
}

#index .myLastVideo {width:77%;margin:0 auto 4rem;overflow:hidden;}    
#index .myLastVideo .innerBox {position:relative;width:100%;padding-bottom:56.25%;}
#index .myLastVideo .innerBox iframe {position:absolute;width:100%;height:100%;}
#index .myLastVideo .innerBox iframe {top:0;left:50%;transform:translate3d(-50%, 0, 0);}


/****** About ******/
/*
#about .mySlide {width:calc(100% - 8rem);height:calc((100vw * 9 / 16) - 8rem);margin:calc(78px + 4rem) auto 4rem;overflow:hidden}
#about .mySlide .innerBox {position:relative;width:100%;height:100%;}
*/
#about .mySlide {width:100%;position:relative;margin:calc(78px + 2rem) auto 4rem;overflow:hidden}
#about .mySlide .innerBox {position:relative;position:relative;width:100%;height:100vh;overflow:hidden;}
#about .mySlide .innerBox .swiper {position:absolute;width:100%;height:100%;}
#about .myText {width:calc(100% - 4rem);padding:10rem 0 5rem;margin:0 auto;}
#about .myText .innerBox {width:100%;text-align:center;}
#about .myText .innerBox h1 {width:80%;max-width:583px;text-align:center;margin:7.5rem auto 3rem;}
#about .myText .innerBox h1 img {display:block;width:100%;}
#about .myText .innerBox p {font-size:1.6rem;line-height:3rem;color:#202020}
#about .myGallery {width:calc(100% - 4rem);max-width:1400px;padding-bottom:15rem;margin:0 auto;border-bottom:1px solid #e8e8e8;}
#about .myGallery .innerBox {padding:5rem 2rem;overflow:hidden;}
#about .myGallery .innerBox > div {float:left;position:relative;padding-bottom:calc(66.66% / 10 * 5.5);}
#about .myGallery .innerBox > div:nth-of-type(1) {width:55%;}
#about .myGallery .innerBox > div:nth-of-type(2) {width:22.5%;}
#about .myGallery .innerBox > div:nth-of-type(3) {width:22.5%;}
#about .myGallery .innerBox > div > div {position:absolute;width:100%;height:100%;}
#about .myGallery .innerBox > div:nth-of-type(1) > div {top:50%;left:50%;transform:translate3d(-50%, -50%, 0);width:90%;height:90%;}
#about .myGallery .innerBox > div:nth-of-type(2) > div {top:-5rem;right:5%;width:90%;height:90%;}
#about .myGallery .innerBox > div:nth-of-type(3) > div {bottom:-5rem;right:0;width:90%;height:90%;}
#about .myLocation {position:relative;width:calc(100% - 4rem);max-width:1400px;padding:15rem 0 10rem;margin:0 auto;overflow:hidden}
#about .myLocation .innerBox {width:77%;margin:0 auto 4rem;}
#about .myLocation .innerBox > h1 {text-align:center;margin-bottom:3.5rem;}
#about .myLocation .innerBox > h1 strong {font-size:3rem;line-height:3.5rem;margin-bottom:1.5rem;display:block;color:#969697;}
#about .myLocation .innerBox > h1 span {display:block;font-size:1.6rem;line-height:2.1rem;color:#707070;font-weight:400;}
#about .myLocation .innerBox .myMap {position:relative;padding-bottom:56.25%;}
#about .myLocation .root_daum_roughmap {position:absolute;width:100%;height:100%;}
#about .myLocation .root_daum_roughmap .wrap_map {height:calc(100% - 32px);}
#about .myLocation .innerBox .myTxt {width:100%;margin-top:5rem;}
#about .myLocation .innerBox .myTxt > div {position:relative;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(1) {border-bottom:1px solid #e8e8e8;padding:1rem 0 3rem;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(1) h1 {font-size:2rem;line-height:2.5rem;color:#707070;font-weight:400;letter-spacing:.1rem;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(1) ul {position:absolute;top:0;right:0;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(1) ul li {display:inline-block;margin-left:7px;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(1) ul li a {display:block;padding:8px 18px;background-color:#F5E6DD;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(1) ul li a {font-size:14px;line-height:19px;border-radius:7px;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) {margin-top:3rem;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) p {font-size:2rem;line-height:2.5rem;margin-bottom:1.5rem;color:#707070;font-weight:400;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li {display:inline-block;margin:0 20px 10px 0;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li strong {font-size:15px;line-height:20px;font-weight:700;font-family:'Noto Sans KR';}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li strong {color:#707070;margin-right:10px;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li span {color:#707070;font-size:15px;line-height:20px;font-weight:400;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li span {position:relative;top:-1px;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li a {color:#707070;font-size:15px;line-height:20px;font-weight:400;}
#about .myLocation .innerBox .myTxt > div:nth-of-type(2) ul li a {position:relative;top:-1px;}


/****** previews ******/
.previews .myInfo {width:100%;margin:calc(78px + 2rem) auto 15rem;}            
.previews .myInfo > div {width:62.5%;max-width:1400px;margin:0 auto;}
.previews .myInfo .title {padding:5rem 0;text-align:center;}
.previews .myInfo .title h1 {display:block;font-size:24px;line-height:29px;font-weight:600;margin-bottom:1.5rem;color:#202020;}
.previews .myInfo .title p {font-size:16px;line-height:21px;color:#707070;}
.previews .content .floor {display:flex;flex-wrap:wrap;width:100%;border-bottom:1px solid #e8e8e8;margin-bottom:2rem;padding-bottom:.5rem;}
.previews .content .floor li {margin-right:1rem;}
.previews .content .floor li a {display:block;font-size:2.4rem;line-height:2.9rem;padding:1rem;color:#707070;}
.previews .content .floor li.on a {color:#202020;font-weight:600;}
.previews .content .list {display:flex;flex-wrap:wrap;width:100%;margin-bottom:5rem;}
.previews .content .list li {width:calc(33.33% - 0.5rem);margin:0.25rem;}
.previews .content .list li a {position:relative;display:block;overflow:hidden;}
.previews .content .list li .img {position:relative;width:100%;padding-bottom:66.66%;}
.previews .content .list li .img > div {position:absolute;width:100%;height:100%;}
.previews .content .list li .txt {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
.previews .content .list li .txt {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.previews .content .list li .txt > div {text-align:center;border:1px solid #202020;width:80%;padding:15% 0;transform:translateY(10%);}
.previews .content .list li .txt > div strong {display:block;font-size:1.6rem;line-height:2.6rem;margin-bottom:.5rem;color:#202020;}
.previews .content .list li .txt > div span {display:block;font-size:1.5rem;line-height:2.5rem;color:#202020;}
.previews .content .list li a::before {background-color:hsla(22, 55%, 91%, 0.8);display:block;content:"";z-index:1;}
.previews .content .list li a::before {position:absolute;top:0;left:0;width:100%;height:100%;}
.previews .content .list li .txt {opacity:0;transition:opacity .3s;}
.previews .content .list li .txt > div {transition:transform .3s;}
.previews .content .list li a::before {opacity:0;transition:opacity .3s;}
.previews .location {padding:5rem 0;text-align:center;}
.previews .location h1 {display:block;font-size:24px;line-height:29px;font-weight:600;margin-bottom:1.5rem;color:#202020;}
.previews .location .map {position:relative;width:100%;}
.previews .location .map_mb {display:none;}
.previews .location .map img {width:100%;}
/* hover */
@media (hover: hover) {
    .previews .content .list li:hover a .txt {opacity:1;}
    .previews .content .list li:hover .txt > div {transform:translateY(0);}
    .previews .content .list li:hover a::before {opacity:1;}
}


/****** Rooms ******/
#rooms .mySlide {width:100%;position:relative;margin:calc(78px + 2rem) auto 4rem;overflow:hidden}
#rooms .mySlide .innerBox {position:relative;width:100%;height:100vh;}
#rooms .mySlide .innerBox .swiper {position:absolute;width:100%;height:100%;}
#rooms .myInfo {width:62.5%;max-width:1400px;padding:5rem 0 0;margin:0 auto;}
#rooms .myInfo .title {position:relative;width:100%;border-bottom:1px solid #e8e8e8;padding-bottom:3rem;}
#rooms .myInfo .title {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
#rooms .myInfo .title h1 {display:inline-block;font-size:24px;line-height:29px;font-weight:500;}
#rooms .myInfo .title a {display:inline-block;font-size:15px;line-height:15px;}
#rooms .myInfo .title a {background-color:#F5E6DD;border-radius:7px;padding:1.2rem 3rem;}
#rooms .myInfo .info {width:100%;display:flex;flex-wrap:wrap;margin-top:3rem;padding-bottom:5rem;border-bottom:1px solid #e8e8e8;}
#rooms .myInfo .info > div {width:46%;margin:0 2%;}
#rooms .myInfo .info > div ul {width:100%;}
#rooms .myInfo .info > div ul li {margin-bottom:5rem;font-size:15px;line-height:25px;}
#rooms .myInfo .info > div ul li strong {display:block;font-weight:400;font-family:'Noto Sans KR';color:#202020;}
#rooms .myInfo .info > div ul li span {display:block;color:#707070;margin:1rem 0;}
#rooms .myInfo .info > div ul li i {display:block;font-size:14px;line-height:19px;font-weight:400;color:#a1a1a1;font-style:normal;}
#rooms .myInfo .eq {width:100%;margin-top:7.5rem;}
#rooms .myInfo .eq h1 {display:inline-block;font-size:24px;line-height:29px;font-weight:500;margin-bottom:2rem;}
#rooms .myInfo .eq > ul {width:100%;display:flex;flex-wrap:wrap;align-items:end;}
#rooms .myInfo .eq > ul li {width:33.33%;}
#rooms .myInfo .eq > ul li a {display:block;border:1px solid #e8e8e8;border-left:0;}
#rooms .myInfo .eq > ul li a {padding:7px 0;font-size:15px;line-height:25px;text-align:center;color:#202020;}
#rooms .myInfo .eq > ul li:first-child a {border:1px solid #e8e8e8;}
#rooms .myInfo .eq > ul li.on a {border:1px solid #787878;border-bottom:1px solid #e8e8e8;}
#rooms .myInfo .eq > ul li.on a {font-weight:400;font-family:'Noto Sans KR';}
#rooms .myInfo .eq > div {width:100%;padding:3.5rem 0 5rem;background-color:#e8e8e8;display:none;}
#rooms .myInfo .eq > div ul {width:98%;margin:0 auto;display:flex;flex-wrap:wrap;}
#rooms .myInfo .eq > div ul li {position:relative;margin:0 1rem 1.5rem;font-size:15px;line-height:20px;color:#202020;}
#rooms .myInfo .eq > div ul li::before {display:inline-block;content:"ㆍ";padding:0 0.5rem;}
#rooms .myInfo .eq > div.on {display:block;}
#rooms .myInfo .notice {width:100%;display:flex;flex-wrap:wrap;padding:7.5rem 0 5rem;}
#rooms .myInfo .notice h1 {width:100%;display:block;font-size:24px;line-height:29px;font-weight:500;}
#rooms .myInfo .notice h1 {padding-bottom:2rem;border-bottom:1px solid #e8e8e8;}
#rooms .myInfo .notice > div {width:48%;margin:3rem 1% 0;}
#rooms .myInfo .notice > div strong {display:block;font-weight:400;font-family:'Noto Sans KR';color:#707070;}
#rooms .myInfo .notice > div ul {width:100%;margin-top:1.5rem;}
#rooms .myInfo .notice > div ul li {margin-bottom:.3rem;font-size:13px;line-height:23px;color:#707070;display:flex;flex-wrap:wrap;}
#rooms .myInfo .notice > div ul li::before {display:inline-block;content:"-";padding:0 0.5rem;}
#rooms .myInfo .notice > div ul li span {display:inline-block;width:calc(100% - 2rem);}
#rooms .myRoomPv {width:calc(100% - 4rem);max-width:1400px;margin:10rem auto 5rem;}
#rooms .myRoomPv h1 {text-align:center;margin-bottom:5rem;}
#rooms .myRoomPv h1 strong {font-size:3rem;line-height:3.5rem;display:block;color:#969697;}
#rooms .myRoomPv h1 a {display:inline-block;font-size:15px;line-height:15px;margin-top:1rem;}
#rooms .myRoomPv h1 a {background-color:#F5E6DD;border-radius:7px;padding:12.5px 20px;}
#rooms .myRoomPv .innerBox {position:relative;padding:0 2rem;}
#rooms .myRoomPv .innerBox .hiddenBox {width:calc(100% - 2rem);padding-bottom:7rem;margin:3.5rem auto 0;overflow:hidden;}
#rooms .myRoomPv .innerBox .mySwiper a {width:calc(100% - 2rem);position:relative;display:block;text-align:center;}
#rooms .myRoomPv .innerBox .mySwiper a .bgImg {position:relative;width:100%;padding-bottom:66.66%;}
#rooms .myRoomPv .innerBox .mySwiper a .bgImg::before {position:absolute;width:100%;height:100%;background-color:#969697;opacity:0.7;display:block;content:"";}
#rooms .myRoomPv .innerBox .mySwiper a .txt {text-align:center;padding:3rem 0;background-color:#E6E6E6;}
#rooms .myRoomPv .innerBox .mySwiper a .txt strong {display:block;font-size:15px;line-height:20px;}
#rooms .myRoomPv .innerBox .mySwiper a .txt span {display:block;font-size:13px;line-height:23px;margin:1rem 0 2rem;}
#rooms .myRoomPv .innerBox .mySwiper a .txt i {display:inline-block;font-size:13px;line-height:18px;background-color:hwb(0 100% 0% / 0.5);}
#rooms .myRoomPv .innerBox .mySwiper a .txt i {font-style:normal;border-radius:7px;padding:7px 20px;}
#rooms .myRoomPv .swiper-pagination {display:none;}
#rooms .myRoomPv .innerBox .mySwiper a .bgImg::before {transition:opacity .3s;}
#rooms .myRoomPv .innerBox .mySwiper a:hover .txt {transition:background-color .3s;}
/* hover */
@media (hover: hover) {
    #rooms .myRoomPv .innerBox .mySwiper a:hover .bgImg::before {opacity:0;}
    #rooms .myRoomPv .innerBox .mySwiper a:hover .txt {background-color:#f5e5dc;}
}


/****** Facilitys ******/
#facilitys .mySlide {width:100%;position:relative;margin:calc(78px + 2rem) auto 4rem;overflow:hidden}
#facilitys .mySlide .innerBox {position:relative;width:100%;height:100vh;}
#facilitys .mySlide .innerBox .swiper {position:absolute;width:100%;height:100%;}
#facilitys .myInfo {width:62.5%;max-width:1400px;padding:5rem 0 0;margin:0 auto;}
#facilitys .myInfo .title {position:relative;width:100%;height:7rem;margin:0 auto;border-bottom:1px solid #e8e8e8;}
#facilitys .myInfo .title {display:flex;flex-wrap:wrap;align-items:center;}
#facilitys .myInfo .title h1 {display:inline-block;font-size:24px;line-height:29px;font-weight:500;}
#facilitys .myInfo .info {width:100%;display:flex;flex-wrap:wrap;margin-top:3rem;padding-bottom:5rem;}
#facilitys .myInfo .info div {width:98%;margin:0 auto;}
#facilitys .myInfo .info div p {font-size:15px;line-height:25px;}
#facilitys .myFacPv {width:calc(100% - 4rem);max-width:1400px;margin:10rem auto 5rem;}
#facilitys .myFacPv h1 {text-align:center;margin-bottom:5rem;}
#facilitys .myFacPv h1 strong {font-size:3rem;line-height:3.5rem;display:block;color:#969697;}
#facilitys .myFacPv .innerBox {position:relative;padding:0 2rem;}
#facilitys .myFacPv .innerBox .hiddenBox {width:calc(100% - 2rem);padding-bottom:7rem;margin:3.5rem auto 0;overflow:hidden;}
#facilitys .myFacPv .innerBox .mySwiper a {width:calc(100% - 2rem);position:relative;display:block;text-align:center;}
#facilitys .myFacPv .innerBox .mySwiper a .bgImg {position:relative;width:100%;padding-bottom:76%;}
#facilitys .myFacPv .innerBox .mySwiper a .bgImg::before {position:absolute;width:100%;height:100%;background-color:#969697;opacity:0.7;display:block;content:"";}
#facilitys .myFacPv .innerBox .mySwiper a .txt {text-align:center;padding:3rem 0;}
#facilitys .myFacPv .innerBox .mySwiper a .txt strong {display:block;font-size:15px;line-height:20px;}
#facilitys .myFacPv .innerBox .mySwiper a .txt span {display:block;font-size:13px;line-height:23px;margin:1rem 0 2rem;}
#facilitys .myFacPv .swiper-pagination {display:none;}
#facilitys .myFacPv .innerBox .mySwiper a .bgImg::before {transition:opacity .3s;}
#facilitys .myFacPv .innerBox .mySwiper a:hover .txt {transition:background-color .3s;}
/* hover */
@media (hover: hover) {
    #facilitys .myFacPv .innerBox .mySwiper a:hover .bgImg::before {opacity:0;}
}


/****** Service ******/
#service .myInfo {width:100%;margin:calc(78px + 2rem) auto 15rem;}            
#service .myInfo > div {width:62.5%;max-width:1400px;margin:0 auto;}
#service .myInfo .title {padding:5rem 0;text-align:center;}
#service .myInfo .title h1 {display:block;font-size:24px;line-height:29px;font-weight:600;margin-bottom:1.5rem;color:#202020;}
#service .myInfo .title p {font-size:16px;line-height:21px;color:#707070;}
#service .myInfo .list ul {display:flex;flex-wrap:wrap;}
#service .myInfo .list ul li {width:16.66%;text-align:center;}
#service .myInfo .list ul li a {display:block;border:1px solid #e8e8e8;border-left:0;}
#service .myInfo .list ul li a {padding:7px 0;font-size:15px;line-height:25px;text-align:center;color:#202020;}
#service .myInfo .list ul li:first-child a {border:1px solid #e8e8e8;}
#service .myInfo .list ul li.on a {border:1px solid #787878;border-bottom:1px solid #e8e8e8;}
#service .myInfo .list ul li.on a {font-weight:400;font-family:'Noto Sans KR';}
#service .myInfo .img {position:relative;padding-bottom:calc(66.66% / 10 * 6.25);}
#service .myInfo .img > div {position:absolute;width:100%;height:100%;opacity:0;z-index:1;}
#service .myInfo .img > div.on {opacity:1;z-index:0;}
#service .myInfo .img > div {transition:opacity .5s;}
#service .myInfo .img > div.on {transition:none;}
#service .myInfo .info {margin-top:5rem;}
#service .myInfo .info h1 {width:100%;display:block;font-size:24px;line-height:29px;font-weight:500;}
#service .myInfo .info h1 {padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid #e8e8e8;}
#service .myInfo .info p {width:98%;margin:0 auto;font-size:15px;line-height:25px;}


/****** Reservation ******/
#reservation .myContants {width:calc(100% - 4rem);max-width:1400px;margin:calc(78px + 2rem) auto 0;padding:5rem 2rem 10rem;}
#reservation .myContants .innerBox {width:100%;}
#reservation .myContants .innerBox > ul {display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:10rem;}
#reservation .myContants .innerBox > ul li {position:relative;}
#reservation .myContants .innerBox > ul li:nth-of-type(1):before {position:absolute;right:0;width:1px;height:100%;content:"";display:block;}
#reservation .myContants .innerBox > ul li:nth-of-type(1):before {background-color:#e8e8e8;}
#reservation .myContants .innerBox > ul li a {display:block;font-size:2rem;line-height:2.5rem;padding:1.25rem 3.5rem;color:#787878}   
#reservation .myContants .innerBox > ul li.active a {color:#202020;font-weight:bold;}
#reservation .myContants .innerBox > div {width:100%;}
#reservation .conts {max-width:1200px;margin:0 auto;}
#reservation .conts h1 {border-bottom:1px dotted #e8e8e8;padding-bottom:1.5rem;}
#reservation .conts h1 strong {display:inline-block;font-size:3rem;line-height:3.5rem;font-weight:300;margin-bottom:.5rem;}
#reservation .conts h1 span {display:inline-block;font-size:1.6rem;line-height:2.1rem;font-weight:400;color:#787878;margin-left:.5rem;}
#reservation .conts01 h1 {text-align:center;margin-bottom:5rem;}
#reservation .conts02 h1 {margin-bottom:3rem;}
#reservation .conts02 .notice {margin-bottom:7.5rem;}                    
#reservation .conts02 .notice ul li {font-size:12px;line-height:22px;margin-bottom:.2rem;color:#787878;}
#reservation .conts02 .notice ul li {font-family:Malgun Gothic,"맑은 고딕";}
#reservation .conts02 .notice ul li b {color:#202020;}
#reservation .conts02 .notice ul li.red {color:red;}
#reservation .conts02 .notice ul li.blue {color:blue;}
#reservation .conts02 .notice ul li.pupple {color:#ef007c;}
#reservation .conts02 .notice ul li span {display:block;color:#202020;}
#reservation .conts02 .notice > ul > li ul {margin-bottom:2rem;}
#reservation .conts02 .notice table {width:100%;text-align:center;margin-top:1rem;}
#reservation .conts02 .notice table th {background-color:#f7f6f6;}
#reservation .conts02 .notice table th,
#reservation .conts02 .notice table td {border:1px solid #e8e8e8;padding:7.5px 0;font-size:12px;line-height:22px;}
#reservation .conts02 .notice i {display:none;}


/*-------------- Responsive ---------------*/
/* Desktop */
@media screen and (max-width:1439px) {
    #container .myVedio {width:75%;padding-bottom:calc(66.66% / 10 * 7.5);}
    #container .mySlide .innerBox {width:100%;padding-bottom:66.66%;height:0;}
    #container .myInfo {width:75%;}
    .previews .myInfo > div, 
    #service .myInfo > div {width:100%;}
    #service .myInfo > div.img {padding-bottom:66.66%;}

}

@media screen and (max-width:1279px) {
    #container .myVedio {width:87.5%;padding-bottom:calc(66.66% / 10 * 8.75);}
    #container .myInfo {width:87.5%;}
    #index .myLastVideo {width:calc(100% - 4rem);padding:0 2rem;}
}

/* Tablet or Ipad */
@media screen and (max-width:1023px) {


    /****** Index ******/
    #index .myVedio {position:relative;width:calc(100% - 4rem);height:calc((100vh - 77px) - 4rem);margin:calc(77px + 2rem) auto 2rem;padding:0;overflow:hidden}
    #index .myVedio::before {position:absolute;width:100%;height:100%;content:"";display:block;z-index:1}
    #index .myVedio .innerBox {position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);object-fit:cover}
    #index .myVedio .innerBox {min-width:100%;min-height:100%;display:block;overflow:hidden;z-index:1}
    #index .myVedio .innerBox #mainVideo {width:100%;height:100%;display:block;}
    #index .mySlide .innerBox {width:100%;padding-bottom:66.66%;height:0;}
    #index .myRoomPv .innerBox .mySwiper {width:150%;}
    #index .myRoomPv .innerBox .mySwiper a .bgImg::before {opacity:0;}
    #index .myRoomPv .innerBox .mySwiper a .txt {background-color:#f5e5dc;}
    #index .myServicePv .innerBox .mySwiper {width:150%;}
    #index .myServicePv .innerBox .mySwiper a .bgImg::before {opacity:0;}
    #index .mySpecialPv .innerBox .imgBox ul li div::before {position:absolute;width:100%;height:100%;display:block;content:"";}
    #index .mySpecialPv .innerBox .imgBox ul li div::before {background-color:#202020;opacity:.3;}
    #index .mySpecialPv .innerBox .imgBox ul li a {position:absolute;width:100%;height:100%;display:block;z-index:1;}
    #index .mySpecialPv .innerBox .imgBox ul li a span {position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0);display:block;}
    #index .mySpecialPv .innerBox .imgBox ul li a span {font-size:1.6rem;padding:1rem 3rem;border:1px solid #fff;color:#fff;}
    #index .mySpecialPv .innerBox .imgBox ul li {z-index:0;}
    #index .mySpecialPv .innerBox .imgBox ul li.on {z-index:1;}
    #index .mySpecialPv .innerBox .imgBox ul li {transition:opacity .5s;}
    #index .mySpecialPv .innerBox .imgBox ul li.on {transition:opacity .5s;}


    /****** About ******/
    /* #about .mySlide {width:calc(100% - 4rem);height:calc(100vw * 9 / 16);margin:calc(78px + 2rem) auto 2rem;min-height:300px} */
    #about .mySlide .innerBox {width:100%;padding-bottom:66.66%;height:0;}
    #about .myLocation .innerBox {width:90%;margin:0 auto 4rem;}


    /****** Preview ******/
    .previews .myInfo {width:calc(100% - 4rem)!important;}
    .previews .content .floor {margin-bottom:2rem;}
    .previews .content .list li {width:calc(50% - 0.5rem);margin:0.25rem;}
    .previews .content .list li a .txt {opacity:1;}
    .previews .content .list li a .txt div {transform:translateY(0);}
    .previews .content .list li a::before {background-color:hsla(22, 55%, 91%, 0.7);opacity:1;}


    /****** Rooms ******/
    #rooms .mySlide .innerBox {width:100%;padding-bottom:66.66%;height:0;}
    #rooms .myInfo {width:calc(100% - 4rem);}
    #rooms .myInfo .info {display:block;}
    #rooms .myInfo .info > div {width:98%;margin:0 1%;}
    #rooms .myInfo .notice > div {width:98%;margin:3rem 1% 0;}
    #rooms .myRoomPv .innerBox .mySwiper {width:150%;}
    #rooms .myRoomPv .innerBox .mySwiper a .bgImg::before {opacity:0;}
    #rooms .myRoomPv .innerBox .mySwiper a .txt {background-color:#f5e5dc;}


    /****** facilitys ******/
    #facilitys .mySlide .innerBox {width:100%;padding-bottom:66.66%;height:0;}
    #facilitys .myInfo {width:calc(100% - 4rem);}
    #facilitys .myInfo .info {display:block;}
    #facilitys .myInfo .info > div {width:98%;margin:0 1%;}
    #facilitys .myFacPv .innerBox .mySwiper {width:150%;}
    #facilitys .myFacPv .innerBox .mySwiper a .bgImg::before {opacity:0;}


    /****** service ******/
    #service .myInfo {width:calc(100% - 4rem);}
    #service .myInfo > div.img {padding-bottom:calc(66.66% - 2rem);}

}

/* Tablet or Ipad */
@media screen and (max-width:991px) {
    
}

/* Tablet or Mobile */
@media screen and (max-width:767px) {
    #container .myPrvs .innerBox {padding:0;}
    #container .myPrvs .innerBox .mySwiper {width:300%;}
    #container .myPrvs .innerBox .mySwiper a {width:calc(100% - 1rem);}
    #container .myPrvs .swiper-button-prev {left:-1rem;}
    #container .myPrvs .swiper-button-next {right:-1rem;}

    
    /****** Index ******/
    #index .myGallery .innerBox h1 {margin-bottom:3rem;}
    #index .myGallery .innerBox > div {float:none;width:100%!important;padding-bottom:0!important;margin-top:3%;}
    #index .myGallery .innerBox > div {height:calc(100vw * 2 / 3);}
    #index .myGallery .innerBox > div > div {width:100%!important;height:100%!important;}
    #index .myGallery .innerBox > div:nth-of-type(1) > div {right:0;}
    #index .myGallery .innerBox > div:nth-of-type(2) > div {left:0;top:0;}
    #index .myGallery .innerBox > div:nth-of-type(3) > div {right:0;}
    #index .myRoomPv .innerBox {padding:0;}
    #index .myRoomPv .innerBox .mySwiper {width:300%;}
    #index .myRoomPv .innerBox .mySwiper a {width:calc(100% - 1rem);}
    #index .mySpecialPv .innerBox {width:100%;margin:0 auto;}
    #index .mySpecialPv .innerBox .imgBox {width:100%;margin-top:3rem;order:2;}
    #index .mySpecialPv .innerBox .imgBox ul {width:100%;padding-bottom:66.66%;}
    #index .mySpecialPv .innerBox .txtBox {display:flex;align-items:center;width:100%;margin:0;order:1;}
    #index .mySpecialPv .innerBox .txtBox .lists {width:100%;text-align:center;}
    #index .mySpecialPv .innerBox .txtBox .lists ul {display:flex;justify-content:center;margin-top:3rem;}
    #index .mySpecialPv .innerBox .txtBox .lists ul li {position:relative;margin:0 2rem 0;}
    #index .mySpecialPv .innerBox .txtBox .lists ul li::before {right:-2rem;}
    #index .mySpecialPv .innerBox .txtBox .lists ul li.on a {color:#202020;}
    #index .myServicePv .innerBox {padding:0;}
    #index .myServicePv .innerBox h1 {margin-bottom:3rem;}
    #index .myServicePv .innerBox .hiddenBox {width:80%;padding-bottom:3rem;}
    #index .myServicePv .innerBox .mySwiper {width:300%;}
    #index .myServicePv .innerBox .mySwiper a {width:calc(100% - 1rem);}
    #index .myLastVideo {width:calc(100% - 4rem);height:calc(100vw * 9 / 16);}


    /****** About ******/
    #about .myGallery .innerBox {padding:0 2rem;}
    #about .myGallery .innerBox > div {float:none;width:100%!important;padding-bottom:0!important;margin-top:3%;}
    #about .myGallery .innerBox > div {height:calc(100vw * 2 / 3);}
    #about .myGallery .innerBox > div > div {width:100%!important;height:100%!important;}
    #about .myGallery .innerBox > div > div {left:0!important;top:0!important;transform:translate3d(0,0,0)!important;}
    #about .myLocation .innerBox {width:calc(100% - 2rem);margin:0 auto;}
    #about .myLocation .innerBox .myMap {padding-bottom:0;height:400px;}


    /****** Preview ******/
    .previews .content .list li {width:calc(100% - 0.5rem);margin:0.25rem;}
    .previews .location .map_pc {display:none;}
    .previews .location .map_mb {display:block;}


    /****** Rooms ******/
    #rooms .myInfo .title a {margin-top:2rem;width:100%;text-align:center;}
    #rooms .myInfo .eq > ul li {width:100%;margin-bottom:1rem;}
    #rooms .myInfo .eq > ul li a {border:1px solid #e8e8e8;}
    #rooms .myInfo .eq > ul li.on a {border:1px solid #787878;}
    #rooms .myRoomPv h1 {margin-bottom:3rem;}


    /****** facilitys ******/
    #facilitys .myFacPv h1 {margin-bottom:3rem;}
    

    /****** Service ******/
    #service .myInfo .list {margin-bottom:.5%;}
    #service .myInfo .list ul li {width:32.33%;text-align:center;margin:.5%;}
    #service .myInfo .list ul li a {border:1px solid #e8e8e8;}
    #service .myInfo .list ul li.on a {border:1px solid #787878;}


    /****** Reservation ******/
    #reservation .conts02 .notice .table {width:100%;overflow:hidden;overflow-x:scroll;}
    #reservation .conts02 .notice .table table {width:calc(700px - 4rem);display:block;}
    #reservation .conts02 .notice i {display:block;width:100%;display:block;text-align:center;margin:1rem 0 2rem;font-style:normal;color:#000}
}

/* Mobile */
@media screen and (max-width: 479px) {
    #container .myPrvs .innerBox {padding:0;}
    #container .myPrvs .innerBox .hiddenBox {width:100%;}
    #container .myPrvs .swiper-button-prev {left:-1.5rem;}
    #container .myPrvs .swiper-button-next {right:-1.5rem;}

    /****** About ******/
    #about .myLocation .innerBox .myTxt > div:nth-of-type(1) h1 {text-align:center;margin-bottom:15px;}
    #about .myLocation .innerBox .myTxt > div:nth-of-type(1) ul {position:relative;display:flex;flex-wrap:wrap;justify-content:center;}
    #about .myLocation .innerBox .myTxt > div:nth-of-type(1) ul li {margin:0 0 10px 7px;}
    #about .myLocation .innerBox .myTxt > div:nth-of-type(2) {text-align:center;}


    /****** Service ******/
    #service .myInfo .list ul li {width:49%;}
    
}