@CHARSET "UTF-8"; /* 스크롤 효과 */ body{-webkit-overflow-scrolling: touch; overflow-scrolling: touch; scroll-behavior: smooth; } .scroll_wrap {overflow: hidden;} .scroll_on {opacity: 0;transition: all 1s;} .scroll_on.type_top {transform: translate(0, -50px);} .scroll_on.type_bottom {transform: translate(0, 50px);} .scroll_on.type_left {transform: translate(-50px, 0);} .scroll_on.type_right {transform: translate(50px, 0);} .scroll_on.active {opacity: 1 !important;/* transform: translate(0, 0) !important;*/} .scroll_on.trans.active{transform: translate(0, 0) !important;} .scroll_on.duration2{transition-duration: 2s;} .scroll_on.duration3{transition-duration: 3s;} .scroll_on.delay0_2{transition-delay: 0.2s;} .scroll_on.delay0_5{transition-delay: 0.5s;} .scroll_on.delay1{transition-delay: 1s;} .scroll_on.delay2{transition-delay: 2s;} .scroll_on.delay3{transition-delay: 3s;} /* 로딩 css */ .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0); z-index: 9999; transition: 0.5s ease; opacity:1; } .loadingImg { position: relative; display: block; top: 50%; left:50%; transform: translate(-50%, -50%); } .loadingImg.loading_pc{display:block;} .loadingImg.loading_m{display:none;} /*------------------------- -----------------------------------------------------------------------*/ /* Common */ /*#container,.section{position:relative;width:100%;height:100%;min-width:1200px; overflow-x: hidden;} #container .scroll{position:absolute;bottom:50px;left:50%;margin-left:-28px;z-index:150;} #container .scroll a{display:block;} */ /* MyFrame */ .MyFrame{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;overflow:hidden;} .MyFrame #MyVideo{min-width:100%;min-height:100%;width:auto;height:auto;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);object-fit:cover;} /* vid */ .vid .banner{position:relative;width:100%;overflow:hidden;} .banner h2{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%); text-align: center; z-index:150; font-size: 45px; color: #fff;} .banner h2 span{display: block; font-size: 20px; margin-bottom: 15px;} /* siwpers */ /* Slide */ .slide{position:relative;width:100%;height:100%;overflow:hidden;min-height:675px;} .slide_show{position:relative;width:100%;height:100%;overflow:hidden;min-height:675px;} .slide_show > li{position:absolute;top:0;left:0;width:100%;height:100%;min-height:675px;overflow:hidden; background-color:#000;} .slide_show > li.active{} .slide_show > li:after{content:'';display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.3);} .slide .nav > a{position:absolute;width:auto;height:61px;z-index:350;} .slide .nav > ul{position:absolute;z-index:350;} .slide .nav > ul li{float:left;width:20px;} .slide .nav > ul li a{width:8px;height:33px;display:block;margin:0 auto;background:url(../images/blt.png) no-repeat 0 0;} .slide .nav > ul li a{-webkit-transition: transform 0.3s ease;-moz-transition: transform 0.3s ease;transition: transform 0.3s ease;} .slide .nav > ul li a.active{-webkit-transition: rotate(-20deg);-moz-transition: rotate(-20deg);transform: rotate(-20deg);} #index .slide .nav{display:none;} #index .slide .nav > ul{right:calc(11% - 170px);bottom:45px;} #index .slide .nav > a{bottom:30px;} #index .slide .nav > a.prev{right:calc(19% + 48px);} #index .slide .nav > a.next{right:19%;} #rooms .slide .nav > ul{right:145px;bottom:25px;} #rooms .slide .nav > a{width:64px;height:81px;bottom:0;} #rooms .slide .nav > a.prev{right:65px;} #rooms .slide .nav > a.next{right:0;} .center .slide{width:85%;margin:0 auto;min-width:1100px;min-height:618px;z-index:10;} .center .slide .slide_show{min-height:618px;} .center .slide .slide_show > li{min-height:618px;} .slide_cm .nav > ul{right:125px;bottom:17px;} .slide_cm .nav > a{bottom:0;} .slide_cm .nav > a.prev{right:48px;} .slide_cm .nav > a.next{right:0;} /* Header */ #header{position:fixed;top:0;left:0;width:100%;z-index:10; transition:0.2s;} .header.active{background-color:rgba(246,242,237,0.9); box-shadow:0 0 9px rgb(200, 152, 123, 0.2);} #header > div.dep01_wrpa{display:flex; align-items:center; justify-content:space-between; padding:8px 35px; width:100%;} #header h1.hd-logo{} .hd-logo img{width: 140px;padding-top: 5px;} #header_sub h1.hd-logo img{width: 120px;padding-top: 5px;} #header .sns{display:flex} #header .sns a{transition:0.2s; /*padding:10px 5px;*/ margin:0 3px;display:block;/*background-color:#a69786;*/ width:32px; height:32px; border-radius:50px; display:flex; justify-content:center; align-items:center;} #header .sns a.sns_05{background-color:#00c14f} #header .sns a img{width:100%} #header .sns a:hover{background-color:#8f8170;} #header .sns a.sns_05:hover{background-color:#00ae47} #hgroup{position:relative; overflow:hidden;} #hgroup ul{overflow:hidden; display:flex;} #hgroup ul li{display:flex; align-items:center;} #hgroup ul li:after{content:''; width:1px ;height:90%; background-color:rgba(255,255,255,0.7);margin:0 40px; display:inline-block; } #hgroup ul li:last-child:after{display:none;} #hgroup ul li a {position:relative; color:#fff;font-size:18px;text-align:center; text-transform:uppercase;} #hgroup ul li a span{transition:0.1s} #hgroup ul li a span:last-child{width:100%; font-size:18px; opacity:0; position:absolute; left:50%; transform:translateX(-50%); color:#cfa68e} #hgroup ul li:hover span:first-child{opacity:0} #hgroup ul li:hover span:last-child{opacity:1} #hgroup ul li.active a{color:#cfa68e;} .header.active #hgroup ul li a{color:#000} #hgroup ul li.notice_menu > a{width:70px} #hgroup div{position:absolute;top:0;right:0;width:10%;min-width:150px;background:#122632;z-index:100;} #hgroup div a{text-align:center;font-size:14px;padding:28.5px 25px;color:#fff;} #hgroup div a span{display:block;font-size:17px;margin-bottom:3px;} #hgroup div a b{display:block;font-size:15px;margin-top:5px;text-align:center;} #gnb{position:relative;width:100%;height:0;overflow:hidden; position:absolute;} #gnb > ul{opacity:0;} #gnb > ul > li{float:left;width:20%;} #gnb > ul > li > ul{width:100%;margin-top:20px; } #gnb > ul > li > ul > li{width:100%;} #gnb > ul > li > ul > li a{text-align:center;padding:3px 0;line-height:1.3;margin-bottom:5px;color:#fff; font-size: 15px;} #gnb > ul > li > ul > li:hover a{color:#d8c3aa;} #gnb{-webkit-transition: height 0.5s ease;-moz-transition: height 0.5s ease;transition: height 0.5s ease;} #gnb ul,#lnb{-webkit-transition: opacity 0.5s ease;-moz-transition: opacity 0.5s ease;transition: opacity 0.5s ease;} /* drop */ nav.gnb{margin:0 auto; width:100%; display:none; justify-content:center; align-items:center; position:fixed; z-index:20; top:0; left:0; padding:10px} nav.gnb > article.logo{width:80px; position:relative} nav.gnb > article.logo img{width:100%;} .gnb_menu {position:absolute; right:20px;} .gnb_menu > ul > li.all_menu_btn {width:36px; display:flex; flex-wrap:wrap; margin-left:30px; position:relative;} .gnb_menu > ul > li.all_menu_btn > span{width:100%; height:3px; display:block;background-color:#fff; transition:0.2s} .gnb_menu > ul > li.all_menu_btn > span:nth-child(2){margin:7px 0; width:75%; transition:0.2s} .gnb_menu > ul > li.all_menu_btn:hover span:nth-child(2){width:100%;} .gnb_menu > ul > li.all_menu_btn.active span:nth-child(2){display:none} .gnb_menu > ul > li.all_menu_btn.active span:first-child{position:absolute; top:9px; transform: rotate(45deg);background-color:#2205d1;} .gnb_menu > ul > li.all_menu_btn.active span:last-child{position:absolute; top:9px; transform: rotate(-45deg);background-color:#2205d1;} /* sub_drop */ #header_sub + .gnb .gnb_menu > ul > li.all_menu_btn > span{background-color:#fff} .sub_bg{width:100%; background-color:rgba(255,255,255,0.5); height:0; position:absolute;; left:0; top:70px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius:25px; box-shadow:0px 7px 25px rgba(0,0,0,0.2);opacity:0; z-index:-1; transition:0.3s} .sub_bg.active{opacity:1; z-index:10; height:280px;} .sub_menu_wrap{position:absolute; z-index:12; width:100%; left:0; display:none; padding:50px 0; align-items:center;} .gnb_menu > ul > li.menu_item.active > div.sub_menu_wrap{display:flex; height:280px; transition:0.5s} .gnb_menu > ul > li.menu_item > div.sub_menu_wrap > h2{width:430px; text-align:center; font-size:36px; font-weight:600;} .gnb_menu > ul > li.menu_item > div.sub_menu_wrap > ul{height:100%; display:flex; flex-wrap:wrap; flex-direction:column} .gnb_menu > ul > li.menu_item > div.sub_menu_wrap > ul > li{margin-bottom:35px; margin-right:50px} .gnb_menu > ul > li.menu_item > div.sub_menu_wrap > ul > li:nth-child(4n){margin-bottom:0;} .gnb_menu > ul > li.menu_item > div.sub_menu_wrap > ul > li > a{color:#333; font-size:16px;} .gnb_menu > ul > li.menu_item > div.sub_menu_wrap > ul > li > a:hover{color:#2205d1; font-weight:600} .m_sns{display:flex; justify-content:center; margin-top:50px} .m_sns > a{margin:0 10px} .m_sns a{transition:0.2s; /*padding:10px 5px;*/ margin:0 3px;display:block;background-color:#a69786; width:37px; height:37px; border-radius:50px; display:flex; justify-content:center; align-items:center;} .m_sns a img{width:100%} .m_sns a:hover{background-color:#8f8170;} .all_menu_m{position:fixed; background-color:rgba(0,0,0,0.5); z-index:-999; opacity:0; width:100%; min-height:100%; top:0; left:0; transition:0.2s;overflow-y:scroll;} .all_menu_m.on{z-index:999; opacity:1} .all_menu_m .gnb_close{position:absolute; right:13px; width:25px; top:30px; z-index:1;} .all_menu_m .gnb_close > img{width:100%;} .all_menu_m > div.m_gnb_menu{background-color:#fff8e8; width:100%; min-height:100%; padding:15px; position:absolute; top:0; left:0;} .all_menu_m > div.m_gnb_menu .mgnb_logo{width:80px;} .all_menu_m > div.m_gnb_menu .mgnb_logo img{width:150%} .all_menu_m > div.m_gnb_menu > h1{text-align:center; margin-top:80px;margin-bottom: 50px; font-size:17px} .all_menu_m > div.m_gnb_menu .investment__tab{ margin-top:10px; } ul.investment__tab li > div.contents {position: relative; flex-direction:column; text-align:center; display: flex; justify-content:center; padding: 20px 0 10px;cursor: pointer; font-size:25px; font-weight:600;} ul.investment__tab li > div.contents > span{display:block; font-size:16px; color:#b0a7a2; margin-bottom:6px} ul.investment__tab li > div.contents > a{font-weight:600; flex-direction:column; text-align:center; display: flex; justify-content:center; } ul.investment__tab li > div.contents > a > span{display:block; font-size:17px; color:#b0a7a2; margin-top:8px} ul.investment__tab li.active > div.contents{color:#231815} ul.investment__tab li.active > div.contents > span{color:#231815;} ul.investment__tab li:last-child > div.contents {border-bottom: 0;} ul.investment__tab li > div.contents i {position: absolute;right: 27px;top: calc(50% - 5px);transition: transform 0.5s ease;} ul.investment__tab li.active>div.contents {border-bottom: 0;} ul.investment__tab li.active>div.contents i {transform: rotate(180deg);} .drop__div {visibility: hidden; height: 0;padding-bottom: 0;overflow: hidden;} .active .drop__div {visibility: visible;height: auto;padding: 5px 0;margin-top: 20px; margin-bottom: 40px; box-sizing: border-box;} .active .drop__div > ul {display:flex; justify-content:center;flex-wrap:wrap;} .active .drop__div > ul > li{margin:0 auto} .active .drop__div > ul > li.preview_box{width:100%; text-align:center; font-size:13px;margin-bottom:20px} .active .drop__div > ul > li.preview_box a{display:inline-block} .active .drop__div > ul > li.preview_box a span{color:#b3b3b3; } .active .drop__div > ul > li > a{ margin-bottom:20px } .active .drop__div > ul > li > a{color:#eee; display:block} .active .drop__div > ul > li > a:last-child{margin-bottom:0} .active .drop__div > ul > li > a > p{color:#000; font-size:16px;} .active .drop__div > ul > li > a > span{color:#b3b3b3; font-size:13px;} .active .drop__div > ul.reservation_menus{justify-content:center; text-align:center;} .active .drop__div > ul.reservation_menus > li > a {margin-right:0;} .drop__div .title1 {font-weight: 600;font-size: 22px;line-height: 34px;color: #000000;} #lnb{position:absolute;top:100px;left:5%;opacity:0;z-index:1;} #lnb > ul > li{line-height:1.7;} #lnb > ul > li a{color:#cca980;font-size:18px;} #lnb > ul > li:first-child a{font-size:35px;} #lnb > ul > li a:hover{color:#e8e8e8;} .sub_drop{position:absolute; top:85px; border-top:1px solid rgb(187 154 121 / 50%); background-color:rgba(255,255,255,0.9); padding:10px 35px; width:100%; z-index:-10; opacity:0; transition:0.2s; display:none;} .sub_drop.subpage_drop{top:85px} .sub_drop.active{z-index:5; opacity:1; display:block} .sub_drop > div{display:flex; width:1400px; margin:0 auto; padding:10vh 0} .sub_drop > div > div.sub_dep01_txt{width:25%;} .sub_drop > div > div.sub_dep01_txt > p{font-size:21px} .sub_drop > div > div.sub_dep01_txt > h3{font-size:45px} .sub_drop > div > ul{width:75%; display:flex; justify-content:flex-start; padding-left:10vw} .sub_drop > div > ul li a {margin-bottom:40px; display:block} .sub_drop > div > ul li a:last-child{margin-bottom:0} .sub_drop > div > ul li a span{display:block; font-size:21px; font-size:19px} .sub_drop > div > ul li a span.kr{ color:#b3b3b3; font-size:15px} .sub_drop.special_sub > div > ul{justify-content:flex-start;} .sub_drop.special_sub > div > ul > li{margin-right:10vw} .sub_drop > div > ul.sub_dep01_type2{justify-content:start;} .sub_drop > div > ul.sub_dep01_type2 > li{width:30%} .sub_drop > div > ul.sub_dep01_type3 > li{margin-right:70px} /* Header - sub */ #header_sub{background-color:rgba(255,255,255,0.9);position:fixed;top:0;left:0;width:100%;z-index:20; } #header_sub > div.dep01_wrpa{display:flex; align-items:center; justify-content:space-between; padding:10px 35px /*50px*/; width:100%; flex-wrap:wrap} #header_sub h1.hd-logo{position:relative; width:65px; height:65px; display:flex; align-items:center;} #header_sub h1.hd-logo img{} #header_sub .sns{display:flex} #header_sub .sns a{transition:0.2s; padding:10px 5px;margin:0 3px;display:block;background-color:#a69786; width:37px; height:37px; border-radius:50px; display:flex; justify-content:center; align-items:center;} #header_sub .sns a.sns_05{background-color:#00c14f} #header_sub .sns a img{width:100%} #header_sub .sns a:hover{background-color:#8f8170;} #header_sub .sns a.sns_05:hover{background-color:#00ae47} #hgroup_sub{position:relative; overflow:hidden;} #hgroup_sub ul{overflow:hidden; display:flex;} #hgroup_sub ul li{display:flex; align-items:center;} #hgroup_sub ul li:after{content:''; width:1px ;height:90%; background-color:rgba(255,255,255,0.7);margin:0 30px; display:inline-block; } #hgroup_sub ul li:last-child:after{display:none;} #hgroup_sub ul li a {position:relative; color:#000;font-size:18px;text-align:center; text-transform:uppercase;} #hgroup_sub ul li a span{transition:0.1s} #hgroup_sub ul li a span:last-child{width:100%; font-size:15px; opacity:0; position:absolute; left:50%; transform:translateX(-50%); color:#cfa68e} #hgroup_sub ul li:hover span:first-child{opacity:0} #hgroup_sub ul li:hover span:last-child{opacity:1} #hgroup_sub ul li.active a{color:#cfa68e;} #hgroup_sub ul li.notice_menu > a{width:70px} #hgroup_sub div{position:absolute;top:0;right:0;width:10%;min-width:150px;background:#122632;z-index:100;} #hgroup_sub div a {text-align:center;font-size:14px;padding:28.5px 25px;color:#fff;} #hgroup_sub div a span {display:block;font-size:17px;margin-bottom:3px;} #hgroup_sub div a b {display:block;font-size:15px;margin-top:5px;text-align:center;} #gnb_sub {position:relative;width:100%;height:0;overflow:hidden;} #gnb_sub {background:url(../images/gnb_bg.png) repeat left top;} #gnb_sub > ul {float:right;width:50%;min-width:720px;overflow:hidden;opacity:0; margin-right: 10%;} #gnb_sub > ul > li {float:left;width:20%;} #gnb_sub > ul > li > ul {width:100%;margin-top:20px; } #gnb_sub > ul > li > ul > li {width:100%;} #gnb_sub > ul > li > ul > li a {text-align:center;padding:3px 0;line-height:1.3;margin-bottom:5px;color:#fff; font-size: 15px;} #gnb_sub > ul > li > ul > li:hover a {color:#d8c3aa;} #gnb_sub {-webkit-transition: height 0.5s ease;-moz-transition: height 0.5s ease;transition: height 0.5s ease;} #gnb_sub ul,#lnb_sub {-webkit-transition: opacity 0.5s ease;-moz-transition: opacity 0.5s ease;transition: opacity 0.5s ease;} #lnb_sub {position:absolute;top:100px;left:5%;opacity:0;z-index:1;} #lnb_sub > ul > li {line-height:1.7;} #lnb_sub > ul > li a {color:#cca980;font-size:18px;} #lnb_sub > ul > li:first-child a {font-size:35px;} #lnb_sub > ul > li a:hover {color:#e8e8e8;} /* Feader */ #footer{position:relative;width:100%;background:#ded8d1;padding: 0 0 30px;overflow:hidden; } .ft_in{margin:0 auto;overflow:hidden; width:80vw;} .ft_in > div{} .ft_in > div.ft_lt{ display:flex; justify-content:center; flex-direction:column;} .ft_in > div.ft_rt{width:280px;margin-left:20px;} .ft_in > div h5{text-align:center;} .ft_in > div strong{display:block;color:#fff;font-size:18px;} .ft_in .ft_lt .add{border-top:1px solid #64514c; margin-top:80px; padding-top:100px; margin-bottom:80px;} .ft_in .ft_lt .add ul{text-align:center;} .ft_in .ft_lt .add ul li{line-height:1.6;font-size:16px;color:#231815;} .ft_in .ft_lt .add ul li.copy{margin-top:30px} .ft_in .ft_lt .add ul li.copy a{color:#231815; font-size:16px} .ft_in .ft_rt > div{position:relative;width:100%;height:90px;} .ft_in .ft_rt > div.rvs{margin-bottom:20px;} .ft_in .ft_rt > div.rvs a{position:absolute;bottom:0;left:0;color:#fff;text-align:center;width:190px;font-size:13px;border:1px solid #fff;padding:19px 0;} .ft_in .ft_rt > div.sns ul{position:absolute;bottom:0;left:0;width:90%;overflow:hidden;} .ft_in .ft_rt > div.sns li{float:left;width:calc(33.33% - 20px);margin-right:15px;} .ft_in .ft_rt > div.sns li a{border:1px solid #fff;width:100%;padding:17px 0;} .ft_in .ft_rt > div.sns li a img{width:19px;margin:0 auto;display:block;} .ft_in .ft_rt a:hover{opacity:0.7;} #footer .tbn{position:absolute;top:0;right:0;z-index:10;} div.wave_wrap{} div.wave_wrap > div{background-color:#ded8d1;} .waves {position:relative; width: 100%; height:15vh; margin-bottom:-7px; /*Fix for safari gap*/ } .tel_btn{display:none;} aside.bottom_reserve{position:fixed; bottom:1vw; right:2vw; z-index:99; } aside.bottom_reserve a{width:100px; display:block; background-color:#ded8d1; padding:15px; border-radius:60px;} aside.bottom_reserve img{max-width:100%;} aside.bottom_reserve .sub_n_reserve{margin-bottom:10px;} aside.bottom_reserve .sub_n_reserve a{background-color:#00c14f; text-align:center;} /* 예약하기 페이지는 제외*/ #reserve aside.bottom_reserve{display:none;} #reserve aside.view_video{position:fixed; bottom:1vw; right:2vw; z-index:99; } #reserve aside.view_video img{max-width:100px;} aside.main_fix_reserve{position:fixed; bottom:2vw; right:2vw; z-index:99; } aside.main_fix_reserve a{width:100px; display:block; background-color:#00c14f; text-align:center;padding:15px; border-radius:60px;} aside.main_fix_reserve img{max-width:100%;} /*------------------------------------------------------------------------------------------------*/ /* index 공통 */ a.more_btn{transition:0.2s; background-color:#fff; color:#64514c; padding:15px 40px; display:inline-block; border-radius:50px; margin-top:95px} a.more_btn:hover{box-shadow:0 10px 10px rgba(0,0,0,0.1); transform:translateY(-5px)} /* Index */ #index h2.visual_logo {position:absolute;top:55%;left:50% ; transform: translate(-50%,-40%); color: #fff; text-transform: uppercase;} #index h2.visual_logo.active{transform: translate(-50%,-50%);} #index h2 span{display: block; font-size: 25px; margin-top: 20px;} #index #container > div.slide > div.scroll_image{position:absolute; bottom:0;} #index .idx_video {width:100%;z-index:200;} #index .idx_video .background {position:relative;width:100%;z-index:50;} #index .idx_video .background > div {position:absolute;height:900px;} #index .idx_video .background > div.lt {background:#20333f;top:-30px;left:0;width:85%;height:900px;} #index .idx_video .background > div.rt {background:#a37154;top:0;right:0;width:15%;} #index .idx_video h3 {position:relative;padding:8% 0 10% 10%; color: #fff; z-index:60; font-size: 35px; font-weight: bold;} #index .idx_video h3 span{display: block; font-size: 20px; margin-bottom: 20px;} #index .idx_video .video {position:relative;width:1200px;margin:0 auto;z-index:100;} #index .idx_video .video h4 {margin-bottom:15px;} #index .idx_video .video h4 strong {font-size:36px;color:#648194;} #index .idx_video .video h4 span {position:relative;top:-6px;font-size:20px;color:#fff;padding-left:15px;} #index .idx_video .video iframe {width:100%;height:675px;padding-bottom:150px;margin:0 auto;display:block;} /* mainvisual */ .main_visual_wrap{position:relative;width:100%; height:100vh; overflow:hidden;} .main_visual_wrap > .mainVisual {width:100%; height:100%; z-index:0} .main_visual_wrap > .mainVisual .swiper-slide > div{width:100%; height:100%;; overflow:hidden;} .main_visual_wrap > .mainVisual .swiper-slide img{width:100%; transform:scale(1.5); transition-timing-function: ease; transition-duration:9s;} .main_visual_wrap > .mainVisual .swiper-slide.swiper-slide-active img{transform:scale(1)} /* .main_visual_wrap > .mainVisual .swiper-slide{transform:scale(1.5); transition:1s} .main_visual_wrap > .mainVisual .swiper-slide.swiper-slide-active{transform:scale(1)} */ .main_visual_wrap > h2{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2} .main_visual_wrap:after{content:''; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.2);position:absolute; left:0; top:0} /* reserve-bar */ section.booking_wrapper{position:fixed; bottom:0; width:100%; z-index:99; } section.booking_wrap{padding:0 20px; background-color:#bb9a79; width:100%; max-width:1400px; margin:0 auto; border-radius:100px; } #reserveBar {box-sizing: border-box; max-width:1250px; margin:0 auto; padding:2vw 0;} #reserveBar form { width: 100%; height: 100%; margin: 0 auto; box-sizing: border-box; max-width:1000px;} #reserveBar form .wrap { width: 100%; height: 100%; display: flex; box-sizing: border-box; align-items:center; justify-content:center;} #reserveBar form .wrap .box { position: relative; text-align: center; box-sizing: border-box; } #reserveBar form .wrap .box p{color:rgba(255,255,255,0.8); margin-bottom:10px; font-size:15px} /* reserve-bar sub */ section.booking_wrapper.booking_wrapper_sub{transform:translate(-50%, 0);left:50%; width:50%; position:fixed; top:75px; z-index:11; height:75px;} section.booking_wrapper.booking_wrapper_sub #reserveBar{height:auto; padding:1vw 0; max-width:1400px;} section.booking_wrapper.booking_wrapper_sub #reserveBar form .wrap{align-items:center;} section.booking_wrapper.booking_wrapper_sub #reserveBar form .wrap .box:not(:last-of-type) { padding: 0; } section.booking_wrapper.booking_wrapper_sub #reserveBar form .wrap .box input.datepicker{padding:0 0 10px; border-radius:0;} section.booking_wrapper.booking_wrapper_sub #reserveBar form .wrap .box select{padding:0 0 5px; font-size:17px} /* #reserveBar form .wrap .box::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50%; background: #bbb; } */ /* 돌아가는 텍스트 */ /* .section02{background-color:#f6f2ed; padding-top:340px; width:100%; overflow:hidden; position:relative; z-index:1; } div.font_deco{background-color:#af9987; width:100%;height:340px} div.font_deco svg {position:absolute; right:-25%; top:-10vh; height:100vh; animation: rotate_image 500s linear infinite; } div.font_deco svg text{font-size: 43px;font-weight: 300;text-transform: uppercase;letter-spacing: 21px;fill: #74604b;} */ /* section01 */ .section01{margin-bottom:33vh} #index .mainSlide01.pc_only {width: 100%; display:block} #index .mainSlide01.m_only {display:none;} #index .swiper.mainSlide01 .swiper-slide {text-align: center;display: flex;justify-content: center;align-items: center; background-color:#d1cec1} #index .swiper.mainSlide01 .swiper-slide img {display: block;width: 100%; opacity:0.2; transition:0.2s;} #index .swiper.mainSlide01 div.swiper-slide.swiper-slide-active img{opacity:1;} .mainSlide01 div.swiper-slide > div > p{display:none} /* section01-slick */ .mainSlide01 .slick-slide {margin: 0 5px;background-color:#d1cec1;border-radius: 65px;} .mainSlide01 .slick-slide img{width:100%; opacity:0.2; transition:0.2s;border-radius: 65px;} .mainSlide01 .slick-slide.slick-active img{opacity:1;border-radius: 65px;} .mainSlide01 button.slick-next.slick-arrow, .mainSlide01 button.slick-prev.slick-arrow{position:absolute;width:113px; height:14px; font-size:0; top:50%;transform:translate(-50%);z-index:5; cursor:pointer;} .mainSlide01 button.slick-next.slick-arrow{right:41px; background-image:url('../images/slide_btn_next.png'); border:0; background-color:transparent; background-size:100% auto; background-repeat:no-repeat; background-position:center;} .mainSlide01 button.slick-prev.slick-arrow{left:155px;background-image:url('../images/slide_btn_prev.png'); border:0; background-color:transparent; background-size:100% auto; background-repeat:no-repeat; background-position:center;} .mainSlide01 ul.slick-dots{display:flex; position:absolute; width:100%; bottom:50px; justify-content:center;} .mainSlide01 ul.slick-dots li button{cursor:pointer; font-size:0; border:0; background-color:transparent; width:12px; height:12px; background-color:#fff; border-radius:50px;padding:0; margin:0 5px} .mainSlide01 ul.slick-dots li.slick-active button{background-color:#000} /* accommodation */ .section02_m{display:none;} .section02{display:block; position:relative; padding-top:12vh; background-color:#254949; width:100%;-webkit-overflow-scrolling: touch; overflow-scrolling: touch; scroll-behavior: smooth;} .section02 .text_bg_wrap{width:60vh; height:60vh; overflow:hidden; position:absolute; top:-40vh; right:0;} .section02 div.text_bg{background-image: url("../images/download.png"); background-repeat:no-repeat;; background-position:top center; width:60vh; height:60vh; animation: rotate_image 50s linear infinite; position:absolute; right:-10vw } @keyframes rotate_image{ 100% { transform: rotate(360deg); } } section#fix_contents {background-size: contain !important; width: 100%;background-color:#254949} section#fix_contents hr { display: none; } section#fix_contents div.wrap { position: relative; margin: 0 auto;padding-bottom: 10vh; padding-top:20vh} section#fix_contents div.fix_text{float: right; width: 35vw; position: sticky; top: 50%; transform: translateY(-50%); } section#fix_contents div.fix_text h5{color:#fff; font-size:50px; margin-top: 110px; margin-bottom:65px;} section#fix_contents div.fix_text p{color:#fff; font-size:16px; line-height:30px} section#fix_contents div.room_box { width:55vw; margin:0 auto 20vh 3vw; box-sizing: border-box; position: relative; z-index: 0; } section#fix_contents div.room_box.room_box01 { margin-top: -20vh;} section#fix_contents div.room_box.room_box_last { margin: 0 auto 8vh 3vw; } section#fix_contents div.room_box img{width:100%;border-radius: 60px;} section.section03{padding:15vh 0;} section.section03 > section{position:relative; padding-top:5vw;} section.section03 > section > .dining_txt{padding-left:15vw; width:90vw; background-color:#254949; height:90vh; display:flex; flex-wrap:wrap; align-content:center;} section.section03 > section > .dining_txt > h5{color:#fff; font-size:60px; margin-bottom:40px; width:100%;} section.section03 > section > .dining_txt > p{color:#fff; font-size:18px; line-height:32px; width:100%; margin-bottom:20px; } section.section03 > section > .dining_img_wrap{position:absolute; right:0; top:0; width:50%;} section.section03 > section > .dining_img_wrap > div.dining_img {position:relative; width:100%; max-height:85vh; overflow:hidden; /* background:url(https://gonylab11.speedgabia.com/thegray/dining/1.jpg); background-size:cover; background-position:center; background-repeat:no-repeat; */} section.section03 > section > .dining_img_wrap > div.dining_img > img{width:100%;} section.section03 > section > .dining_img_wrap div.img_caption{position:absolute; right:4vw; bottom:4vw; color:#fff; display:flex; flex-direction:column; justify-content:end;} section.section03 > section > .dining_img_wrap div.img_caption h6{font-size:44px; text-align:right; margin-bottom:10px; text-shadow:0 2px 4px rgba(0,0,0,0.3);} section.section03 > section > .dining_img_wrap div.img_caption p{font-size:22px; text-align:right; text-shadow:0 2px 4px rgba(0,0,0,0.3);} /* section.section03_m{display:none} */ section.section03_m{display:block; padding:50px 0 0; margin-bottom:50px;} section.section03_m .dining_txt{width:100%; padding:0 20px 0; text-align:center;} section.section03_m .dining_txt > h5{font-size:60px; margin-top: 200px; margin-bottom:20px; color:#231815} section.section03_m .dining_txt > p{font-size:16px; line-height:22px;word-break:keep-all; color:#64514c} section.section03_m .dining_txt > p > br{display:none;} section.section03_m .dining_txt > p > br.pc_n_m{display:block} /* .section03_m .diningSlide .swiper-pagination-bullet-active{background-color:#fff} */ .main_dining{display:block; width:100%; margin-top:50px} .main_dining img.pc_only{max-width:100%; object-fit:cover; border-radius: 60px;} .main_dining img.m_only{display:none} .main_dining div.slick-slide{margin:0 100px; opacity:0.2;} .main_dining div.slick-slide.slick-active{opacity:1;} .main_dining button.slick-arrow{cursor:pointer;font-size:0; border:0; width:30px; height:15px; position: absolute; bottom:0; opacity:0.7;} .main_dining button.slick-prev.slick-arrow{left:35%; background:url(../images/ico/ico_arrow02.png) no-repeat; transform:rotate(-180deg); background-size:cover;} .main_dining button.slick-next.slick-arrow{right:35%; background:url(../images/ico/ico_arrow02.png) no-repeat; background-size:cover;} .main_dining button.slick-arrow:focus{border:0;} .main_dining ul.slick-dots{display:flex; justify-content:center;} .main_dining ul.slick-dots li{margin:0 2px 3px; padding-bottom:3px; display:flex;; align-items:center;} .main_dining ul.slick-dots li button{font-size:0; width:35px; height:3px; background-color:#ded3c8; border:0;} .main_dining ul.slick-dots li.slick-active button{background-color:#a7835f;} .dining_text{text-align:center; padding:50px 0 0;margin-bottom:50px} .dining_text h5{ font-size:18px;} .dining_text p{font-size:32px; margin:10px 0;} .dining_text span{font-size:17px; margin:10px 0; display:inline-block; } .dining_text div.hr_box{width:25px; height:2px; background-color:#ded3c8; margin:25px auto} .dining_text a{font-size:13px; display:block; margin:10px 0} .dining_txt a.more_btn{margin-top:40px;} .section04{margin-bottom:-13vh;} .section04 > .txt{margin-top: 250px; padding-left:15vw;} .section04 > .txt > p{font-size:17px; } .section04 > .txt > p> span{color:#231815;} .section04 > .txt > h3{margin:20px 0 60px; color:#231815; font-size:51px; } .section04 .section04_img{width:100%; height:100vh; background-image:url('https://gonylab11.speedgabia.com/thegray/exterior/2.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center;} section.section05{max-width:1400px; margin:0 auto; margin-bottom:10vh;} section.section05 > div.MyFrame_02{cursor:pointer; width:100%;position: relative;padding-bottom: 56.25%; /* 16/9 ratio */height: 100%;overflow: hidden;margin: 0;} section.section05 > div.MyFrame_02 iframe, section.section05 > div.MyFrame_02 object, section.section05 > div.MyFrame_02 embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* sub page */ #visual {position:relative;width:100%;height:95vh;min-height:600px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border-bottom-right-radius: 150px;} #visual .InBox {position:relative;width:100%;height:100%;overflow:hidden;} #visual .InBox .ttls {position:absolute;top:50%;left:5%;height:110px;transform:translateY(-50%);color:#fff;z-index:1;} #visual .InBox .ttls div {display:inline-block;width:100px;border-top:1px solid #fff;padding-top:7px;margin-right:15px;} #visual .InBox .ttls span {font-size:22px;} #visual .InBox .ttls strong {display:block;font-size:65px;margin:15px 0 0 15px;} #visual .InBox .ttls b {margin-left:7px;} #reserveBar form .wrap .box .datepicker-wrap { position: relative; display: inline-block; width: 70%; min-width: 180px; } #reserveBar form .wrap .box input.datepicker {padding:0 0 10px; color:#fff; background-color:transparent; cursor: pointer; text-align: left; width: 100%; border: none; outline: none; font-size: 17px; border-bottom:2px solid rgba(255,255,255,0.7);} #reserveBar form .wrap .box .datepicker::placeholder { font-size: 18px; color:#fff; } #reserveBar form .wrap .box .datepicker-wrap::after { content:''; position: absolute; right: 0; top: 35%; transform: translateY(-50%); background-image:url(../images/ico/ico_arrow_b_blod.png); width:10px; height:10px; background-size:cover; background-repeat:no-repeat;} #reserveBar form .wrap .box select {border-bottom:2px solid rgba(255,255,255,0.7); border-width:0 0 2px; color:#fff; background: rgba(174, 181, 189, 0); cursor: pointer; text-align: left; width: 70%; font-size: 15px; padding:15px 0; } #reserveBar form .wrap .box select:focus { outline: none; } #reserveBar form .wrap .box select option { font-size: 15px; color:#000; } #reserveBar form .wrap .box select {border-bottom:2px solid rgba(255,255,255,0.7); border-width:0 0 2px; color:#fff; background: rgba(174, 181, 189, 0); cursor: pointer; text-align: left; width: 70%; font-size: 18px; padding:15px 0; } #reserveBar form .wrap .box select:focus { outline: none; } #reserveBar form .wrap .box select option { font-size: 18px; color:#000; } #reserveBar form .wrap .box.box-btn{display:flex; align-items:center;} #reserveBar form .wrap .box input[type=submit] {font-size:0; border:0; display:block; background-color :#f3eee7; text-transform:uppercase; padding:15px 30px; color:#74604b; letter-spacing:0.7px; outline: none; font-size: 14px; cursor: pointer; border: none; font-weight:600} #reserveBar form .wrap .box.box-btn:last-child{margin-left:30px} #reserveBar form .wrap .box.box-btn > button{border-radius:50px; background-color :#f3eee7; text-transform:uppercase; padding:15px 30px; color:#74604b; letter-spacing:0.7px; outline: none; font-size: 14px; cursor: pointer; border: none; font-weight:600} #reserveBar form .wrap .box.box-btn > button > br{display:none} /* 외부링크로 button을 a로 변경 */ #reserveBar form .wrap .box.box-btn > a{border-radius:50px; background-color :#f3eee7; text-transform:uppercase; padding:15px 30px; color:#74604b; letter-spacing:0.7px; outline: none; font-size: 14px; cursor: pointer; border: none; font-weight:600} #reserveBar form .wrap .box.box-btn > a > br{display:none} /* #reserveBar form .wrap .box p { color: #555; margin-bottom: 20px; } */ #reserveBar form .wrap .box:nth-of-type(4)::after { display: none; } #reserveBar form .wrap .box:nth-of-type(5)::after { display: none; } #reserveBar form .wrap .box.box-type{text-align:center; position:relative;} #search-pc > div > div.box.box-checkin{position:relative; margin-right:40px;} #search-pc > div > div.box.box-checkin:after{content:'~'; font-size:32px; display:inline-block; position:absolute; right:-40px; top:50%; transform:translateY(-50%); color:#fff; } #search-pc > div > div.box.box-checkout{margin-left:20px;} .box-type > .select_op_btn{display:inline-block;position:relative; border-bottom:2px solid rgba(255,255,255,0.7); border-width:0 0 2px; color:#fff; background: rgba(174, 181, 189, 0); cursor: pointer; text-align: left; width: 90%; font-size: 19px; padding:0 0 10px; } .box-type > .select_op_btn::after { content:''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image:url(../images/ico/ico_arrow_b_blod.png); width:10px; height:10px; background-size:cover; background-repeat:no-repeat;} /* .box-type > .roomtype_list{background-color:#fff; width:100%; right:0; position:absolute; padding:10px; border-radius:5px; box-shadow:0 0 7px rgba(0,0,0,0.1);} */ .box-type > .roomtype_list li{text-align:left; padding:5px 0; cursor:pointer;} .box-type > .roomtype_list li:first-child{display:none} .box-type > .roomtype_list li button{border:0; background-color:#fff; color:#000; font-size:15px; text-align:left} .box-type > .roomtype_list li:hover button{font-weight:600;} #index .idx_offer {width:100%;padding:50px 0 85px;} /* #index .idx_offer > div {width:1200px;margin:0 auto;} */ #index .idx_offer > div {width:90%;margin:0 auto;overflow:hidden;} #index .idx_offer > div h4 {width:250px;margin:0 auto;} #index .idx_offer > div ul {width:90%;margin:35px auto 50px;overflow:hidden;} #index .idx_offer > div ul li {float:left;width:calc(25% - 20px);margin:0 10px;} #index .idx_offer > div ul li a {display:block;} #index .idx_offer > div ul li a .img {position:relative;width:100%;height:100%;overflow:hidden;} #index .idx_offer > div ul li a .img img {display:block;} #index .idx_offer > div ul li a .img:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";display:block;background:#000;} #index .idx_offer > div ul li a .img:before {transition:0.3s;opacity:0.3;z-index:1;} .of_b,.of_s{display: none;} #index .idx_offer > div ul li a .txt {width:95%;margin:0 auto;} #index .idx_offer > div ul li a .txt strong {display:block;font-size:17px;font-weight:bold;line-height:1.5;margin:15px 0;} #index .idx_offer > div ul li a .txt span {display:block;font-size:15px;color:#787878;line-height:1.3em;margin-bottom:15px;} #index .idx_offer > div ul li a .txt em {display:block;font-size:13px;font-weight:bold;letter-spacing:1px;} #index .idx_offer > div ul li a:hover .img:before {top:-100%;opacity:0;} #index .idx_offer .Swipers .text {margin-left:4px;} #index .idx_offer .Swipers .text span {display: block; margin:10px 0 15px; font-size:15px;} #index .idx_offer .Swipers .text h1 {display: block; font-size:21.5px;} #index .idx_special {width:100%;padding:85px 0;} #index .idx_special > div {width:1200px;margin:0 auto;overflow:hidden;} #index .idx_special > div h4 {font-size:52px;color:#fff;} #index .idx_special > div h4 span {font-size:20px;margin-left:10px;} #index .idx_special > div ul {margin:55px 0;overflow:hidden;float:right;width:1200px;clear:both;} #index .idx_special > div ul li a {position:relative;width:100%;height:100%;display:block;overflow:hidden;} #index .idx_special > div ul li a > div {position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;} #index .idx_special > div ul li a > div {transform: scale(1);} #index .idx_special > div ul li a:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";opacity:0.3;background:#000;z-index:11;} #index .idx_special > div ul li a span {position:absolute;bottom:15%;left:10%;display:block;color:#fff;font-size:25px;letter-spacing:1.5px;z-index:12;} #index .idx_facily {background:#20333f;} #index .idx_facily > div ul li {float:left;width:calc(50% - 15px);margin-left:15px;height:570px;} #index .idx_dining {background:url(../images/idx_fbg.jpg) repeat left top;} #index .idx_dining > div ul li {float:left;width:calc(50% - 15px);margin-left:15px;height:277px;} #index .idx_dining > div ul li.d01 {height:570px;} #index .idx_dining > div ul li.d02 {margin-bottom:15px;} #index .idx_special > div ul li a > div, #index .idx_special > div ul li a:before, #index .idx_special > div ul li a span {transition: all 0.5s ease;} #index .idx_special > div ul li:hover a > div {transform: scale(1.05);} #index .idx_special > div ul li:hover a:before {opacity:0;} #index .idx_special > div ul li:hover a span {bottom:16%;} #index #lists{padding: 300PX 0 100px; box-sizing: border-box;} #index #lists p{text-align:center;font-size:20px;color:#64514c} #index #lists h3{margin: 20px 0 60px; text-align:center; color: #231815 ; font-size: 51px; vertical-align: middle;} #index #lists h3 span{letter-spacing: 0; font-size: 20px; display: inline-block; margin:0 0 8px 15px; vertical-align: middle; text-indent: 0;} #index #lists.lists2{background-color: #fff; } #index #lists.lists2 h3{color: #000;} #index #lists.lists2 h3 span{color: #000;} /*------------------------------------------------------------------------------------------------*/ /* about */ #about #visual{background:url('https://gonylab11.speedgabia.com/thegray/banner/3.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;border-bottom-right-radius: 150px;} .summary_wrap{display:flex; margin-top:12vh;} .summary_wrap > div.summary_img{background:url(https://gonylab11.speedgabia.com/thegray/main/2.jpg) no-repeat; background-size:cover; background-position:center; width:50%;height:80vh} .summary_wrap > div.summary_txt{text-align:left; padding:10vh 5vw 0; } .summary_wrap > div.summary_txt h4{font-size:40px; margin-bottom:80px;} .summary_wrap > div.summary_txt p{font-size:18px} .summary_wrap > div.summary_txt p:last-child{margin-top:40px} .about_menu_box{max-width:1400px; margin:0 auto;} .about_menu_box .swiper {width: 100%;height: 100%;} .swiper-slide img {display: block;width: 100%;height:100%;object-fit: cover;border-radius: 65px;} .about_menu_box .slide_btns{display:flex; width:100%; padding-right:3vw; justify-content:end; align-items:center;} .about_menu_box .swiper-btn {} .about_menu_box .swiper-btn { background-size:cover; background-position:center; background-repeat:no-repeat; } .about_menu_box .swiper-pagination { width:auto !important; padding:0 20px;} .about_menu_box .swiper-button-prev, .about_menu_box .swiper-button-next{ width:65px; height:85px} .about_menu_box .swiper-button-prev { margin-right:1px} .about_menu_box .swiper-button-next {} .about_menu_box .swiper-pagination-bullet { width:10px; height:10px; display:inline-block; no-repeat center top; transition: transform 0.3s ease; background-color:#fff; opacity:1} .about_menu_box .swiper-pagination-bullet-active { background-color:#000} .about_menu_box .swiper-btn:hover { opacity:1; } .about_menu_box .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#fff; font-size:4rem;text-shadow:0 4px 5px rgba(0,0,0,0.2);} .about_menu_box .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color:#fff; font-size:4rem; text-shadow:0 4px 5px rgba(0,0,0,0.2);} .about_menu_box .swiper-horizontal>.swiper-pagination-bullets, .about_menu_box .swiper-pagination-bullets.swiper-pagination-horizontal, .about_menu_box .swiper-pagination-custom, .swiper-pagination-fraction{left:50%; transform:translate(-50%); bottom:3vh;} #about .vid .banner{} #about #container {} #about .vid .content {width:100%;z-index:200;} #about .vid .content .back {position:relative;width:100%;z-index:5;} #about .vid .content .back > div {position:absolute;height:650px;} #about .vid .content .back > div.lt {background:#20333f;top:-30px;left:0;width:85%;height:680px;} #about .vid .content .back > div.rt {background:#a37154;top:0;right:0;width:15%;} #about .content .cont_ttl {position:relative;width:80%;margin:0 auto;min-width:1100px;padding:70px 0;overflow:hidden;z-index:10;} #about .content .cont_ttl h3 {float:left;width:calc(30% - 30px);margin-right:30px;} #about .content .cont_ttl h3 img {width:165px;display:block;margin:0 auto;} #about .content .cont_ttl p {float:left;width:58%;font-size:17px;color:#deac76;line-height:1.7em;} #about .content .cont_ttl p span {font-weight:bold;letter-spacing:1px;font-size:17px;} #about .abt_cont {width:100%;margin:30vh 0 -13vh; display:flex; background-color:#b09987; padding:0 0 15vh; } #about .abt_cont .cont_ttl {margin:0 auto;;overflow:hidden; width:50%; display:flex; padding-left:15vw; flex-direction:column; justify-content:Center;} #about .abt_cont .cont_ttl h4 {color:#fff; width:50%;font-size:80px;} #about .abt_cont .cont_ttl h4 span {color:#fff; display:block;font-size:20px;margin-bottom:5px;font-weight:normal;} #about .location ul {padding-top:60px;overflow:hidden;} #about .location ul li {line-height:1.7;overflow:hidden;} #about .location ul li:first-child{margin-bottom:40px} #about .location ul li strong {display:block;font-size:18px;} #about .location ul li strong {color:#fff;margin-right:15px;} #about .location ul li span {display:block;font-size:19px; color:#fff; } #about .abt_cont .map_wrap{width:50%; transform:translateY(-15vh); height:700px;} #about .abt_cont .map_wrap #map{height:100%} #about .abt_cont .map_wrap #map .root_daum_roughmap{ width:100%} #about .layout .cont_ttl {padding-bottom:20px;} #about .layout p {max-width:85%;min-width:1200px;margin:0 auto;padding-bottom:5%;} /* Detail - Rooms */ #about .notices {max-width:1400px;margin:0 auto;padding-top:7.5%;line-height:1.6;text-align:center;} #about .contents {padding-bottom:5%;} #about .contents .infos {max-width:1300px;margin:0 50px;margin:0 auto;} #about .contents .infos .InBox {width:100%;padding:7.5% 0;margin-left:20px;overflow:hidden;} #about .notices h3 {display:block;font-size:25px;margin-bottom:30px;color:#000;letter-spacing:1px;} #about .notices .about_vid{margin-top: 100px;width: 1400px;height: 788px;} #rooms .notices h3 {display:block;font-size:25px;margin-bottom:30px;color:#888;letter-spacing:1px;} #rooms .notices p {font-size:16px;width:80%;margin:20px auto 35px;color:#787878;} #rooms .contents .infos { max-width:1300px;} #rooms .contents .infos .InBox {width:48%;margin:0 1%;float:left;} #rooms .contents .infos .InBox > h3 {float:left;font-size:25px;color:#06293f;margin-bottom: 20px} #rooms .contents .infos .InBox > ul {clear:both;width:100%;margin-top:7%;line-height:1.7; } #rooms .contents .infos .InBox > ul > li {margin-bottom:10px;overflow:hidden; display: flex; font-size: 14px; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li {display: none; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:nth-child(2) {display: block; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:nth-child(4) {display: block; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:nth-child(5) {display: block; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:nth-child(6) {display: block; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:nth-child(7) {display: block; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:last-child {display: block; } #rooms .contents .infos .InBox > #ENTR_COMM_LIST > li:first-child {display: block; } #rooms .contents .infos .InBox > ul > li span {display:block;width:100px;font-size:14px;} #rooms .contents .infos .InBox > ul > li span.tl {font-weight:bold; width: 100px; } #rooms .contents .infos .InBox > ul > li span.tx {width:calc(80% - 100px);color:#8b8b8b;} #rooms .contents .infos .InBox > ul > li ul.eq {color:#8b8b8b; width: 80%; } #rooms .contents .infos .InBox > ul > li ul.eq li {float:left;margin-right:5px;} #rooms .contents .infos .InBox:nth-of-type(2) li {width:calc(100% - 20px);} #rooms .contents .infos .InBox:nth-of-type(2) li {background:url(../images/blt.png) no-repeat left 5px;padding-left:20px;} /* #rooms .about_menu {width:100%; margin:0 auto 5%;overflow:hidden; } #rooms .about_menu .InBox {max-width:1400px;height:100%;position:relative;margin:0 auto;} #rooms .about_menu .InBox .swiper-container {height:100%;margin:0 auto;position:relative;z-index:1;} #rooms .about_menu .InBox .swiper-container .swiper-wrapper {position:relative;width:100%;height:100%;z-index:1;padding-left:30px;} #rooms .about_menu .InBox .swiper-slide {position:relative;height:100%;overflow:hidden; background: 50% 50% no-repeat; background-size: cover;} #rooms .about_menu .InBox .swiper-slide a {width:100%;height:15vw;z-index:10; display: block;} #rooms .about_menu .InBox .swiper-slide a:before {display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;} #rooms .about_menu .InBox .swiper-slide a:before {background:#222;opacity:0.45;transition:1s;z-index:1;} #rooms .about_menu .InBox .swiper-slide a img {transform:scale(1);transition:1s;} #rooms .about_menu .InBox .swiper-slide:hover a img {transform:scale(1.05);} #rooms .about_menu .InBox .swiper-slide:hover a:before {opacity:0;} #rooms .about_menu .InBox .swiper-slide a .txt {position:absolute;bottom:7%;left:5%;text-shadow:1px 1px 1px #999;z-index:2;} #rooms .about_menu .InBox .swiper-slide a .txt b {color:#fff;font-size:20px;margin-bottom:10px;display:block;} #rooms .about_menu .InBox .swiper-slide a .txt span {display:block;color:#fff;font-size:50px;} #rooms .about_menu .swiper-button-next {background:url(../images/list_next.png) no-repeat 50% 50%;} #rooms .about_menu .swiper-button-prev {background:url(../images/list_prev.png) no-repeat 50% 50%;} #rooms .about_menu .swiper-button-next {top:50px;right:0;pointer-events:auto;} #rooms .about_menu .swiper-button-prev {top:120px;right:0;pointer-events:auto;} #rooms .about_menu .swiper-line {background:url(../images/list_line.png) no-repeat 50% 50%;} #rooms .about_menu .swiper-line {position:absolute;top:105px;right:7px;width:30px;height:6px;z-index:80;} #rooms .about_menu .swiper-btn {width:45px;height:47px;z-index:50;} */ .sub_title {width:100%;height:100%; margin:20vh auto 40px; max-width:1400px; } .sub_title .sub_title_wrap {color:#000;} .sub_title .sub_title_wrap div {display:inline-block;width:100px;border-top:1px solid #000;padding-top:7px;margin-right:15px;} .sub_title .sub_title_wrap span {font-size:18px;} .sub_title .sub_title_wrap span > br.m_view{display:none} .sub_title .sub_title_wrap strong {display:block;font-size:75px;margin:15px 0 0 15px;} .sub_title .sub_title_wrap b {margin-left:7px;} #promotion{background-color:#fff;} /* .facility_01 #container #Facility_Cont03 div:first-child:after{content:''; width:100%; display:block; background-image:url('../images/cafe_img_1.jpg')} */ /* media queries */ @media (max-width: 1400px) and (min-width: 1200px){ #rooms .about_menu .InBox .swiper-slide a .txt span {font-size:45px;} #rooms .about_menu .InBox .swiper-slide a .txt b {font-size:18px;} }@media (max-width: 1200px){ #rooms .about_menu .InBox .swiper-slide a .txt span {font-size:40px;} #rooms .about_menu .InBox .swiper-slide a .txt b {font-size:16px;} } /*------------------------------------------------------------------------------------------------*/ /* notice */ #notice .content {max-width:1100px;min-width:1000px;margin:0 auto;padding:10% 0;} /*------------------------------------------------------------------------------------------------*/ /* travel */ #travel #container #scroll {position:absolute;transition:none;} #travel .content {position:relative;padding:120px 0;overflow:hidden;} #travel .content .list {width:1200px;margin:0 auto;overflow:hidden;} #travel .content .list li {width:calc(33.33% - 10px);margin:0 5px;height:100%;float:left;min-height:600px;} #travel .content .list li > img {display:block;} #travel .content .list li .txt {width:95%;margin:50px auto;text-align:center;} #travel .content .list li .txt h3 {color:#292929;font-size:20px;margin-bottom:20px;} #travel .content .list li .txt h3 strong {display:block;} #travel .content .list li .txt h3 span {font-size:15px;display:block;margin-top:7.5px;line-height:1.5;} #travel .content .list li .txt p {font-size:12.5px;line-height:1.6;color:#292929;} .tr-image{width: 100% ; height: 270px;} /*-------------------------------------------------------------------------------*/ /* room_pv */ .previews .banner {position:relative;width:100%;height:600px;overflow:hidden;} .previews .banner:before {background:#111118;position:absolute;left:0;top:0;width:100%;height:100%;content:"";opacity:0.5;z-index:5;} /* .previews .banner h2 {position:absolute;top:50%;left:50%;margin:-2px 0 0 -450px;z-index:100;} */ .room_pv_title{height:70vh; display:flex; justify-content:center; align-items:center; margin-top:100px} .room_pv_title h2 {display:block;font-size:34px;color:#000;letter-spacing:1px;} .previews .section {display:flex; height:100vh; align-items:center; margin-bottom:10vh; } .previews .section .back {position:relative;width:100%;margin:0 auto;z-index:5;} .previews .section .back > div {position:absolute;top:0;width:48%;min-width:600px;height:50vh;min-height:400px;} .previews .section .list {width:47%; height:70%; background-color:#b09987; display:flex; align-items:center;} .previews .section .list > div {position:relative;width:70%;margin:0 auto;color:#fff;overflow:hidden;z-index:10;} .previews .section .list > div h3 {font-size:45px; margin-bottom:50px;} .previews .section .list > div p {font-size:16px;line-height:1.7;} .previews .section .list > div p br.m_view{display:none} .previews .section .img {position:relative;width:53%;margin:0 auto;height:100vh;overflow:hidden; transform:translateY(-3vh);} /* .previews .section .img a {position:relative;width:100%;height:100%;display:block;} */ .previews .section .img img {position:absolute;bottom:10%;right:3%;width:230px;height:50px;margin-top:-25px;display:block;z-index:2;} .previews .section .img div {position:relative;width:100%;height:100%;transform: scale(1);transition:0.3s;} .previews .section .img a div:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";display:block;background:#000;} .previews .section .img a div:before {transition:0.5s;opacity:0.3;z-index:1;} .previews .section .img a:hover div {transform: scale(1.05);} .previews .section .img a:hover div:before {opacity:0.1;} .room_info_wrap {margin-bottom:12vh;} .room_info_wrap > section{} .room_info_wrap > div{ text-align:center;} .room_info_wrap > div > h3{ font-size:30px; margin-bottom:35px;} .room_info_wrap > div > p{font-size:17px; line-height:24px;} .room_info_wrap > section{display:flex; max-width:1400px; margin:50px auto 100px;} .room_info_wrap > section > article{width:calc(33% - 20px); margin:0 10px} .room_info_wrap > section > article div.room_info_img{width:100%; height:30vh; transition:0.2s;} .room_info_wrap > section > article div.room_info_title{padding:20px; } .room_info_wrap > section > article div.room_info_title h4{font-size:25px; font-weight:600; margin-bottom:20px} .room_info_wrap > section > article > a{overflow:hidden; display:block} .room_info_wrap > section > article:hover div.room_info_img{transform:scale(1.2)} #service_pv .section .img a div:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";display:none;background:none;} #service_pv .section .img a div:before {transition:0.5s;opacity:0.3;z-index:1;} #service_pv .section .img a:hover div {transform: scale(1);} #service_pv .section .img a:hover div:before {opacity:0.1;} /*------------------------------------------------------------------------------------------------*/ /* Rooms */ #rooms #Room_Cont02 {width:70%; margin:0 auto} #rooms #Room_Cont02 .ttl {} #rooms #Room_Cont02 .ttl h2 {color:#000;text-align:center;padding:200px 0 40px;} #rooms #Room_Cont02 .ttl h2 strong {font-size:40px;letter-spacing:0.5px;display:block;} #rooms #Room_Cont02 .ttl h2 strong {} #rooms #Room_Cont02 .txt {width:100%; text-align:center;} #rooms #Room_Cont02 .txt .InnerBox {background:#;} #rooms #Room_Cont02 .txt .InnerBox > p {font-size:18px;line-height:1.6; width:90%;margin:0 auto 5%; padding-bottom:5%; border-bottom:1px solid #d9d9d9;} #rooms #Room_Cont02 .txt .InnerBox div {} #rooms #Room_Cont02 .txt .InnerBox div > strong {font-size:20px;color:#494949;font-weight:bold;display:block;margin-bottom:20px;letter-spacing:1px;} #rooms #Room_Cont02 .txt .InnerBox div > ul {overflow:hidden;} #rooms #Room_Cont02 .txt .InnerBox div > ul li {width:100%;margin-bottom:35px;line-height:1.5;} #rooms #Room_Cont02 .txt .InnerBox div > ul li strong {display:block;margin-bottom:5px;color:#868686;} #rooms #Room_Cont02 .txt .InnerBox div > ul li span {display:block;font-size:15px;line-height:1.6;} #rooms #Room_Cont02 .txt .InnerBox div > ul li span.st {font-size:16px;line-height:1.5;} #rooms #Room_Cont02 .txt .InnerBox div > ul li span.st.structure{max-width:600px; margin: 20px auto 100px; word-break:keep-all;} #rooms #Room_Cont02 .txt .InnerBox .icon_img{margin-top:20px;margin-bottom:-30px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info{display:flex;justify-content:center;; margin:0 auto 15px;width:100%; flex-wrap:wrap;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:first-child{width:100%; display:flex; flex-direction:column;;;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq{display:flex; flex-wrap:wrap; width:calc(100% - 110px)} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li{width:auto; margin:0;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span{color:#8b8b8b;font-size:15px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span:after{content:','; margin-right:5px} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div{margin-bottom: 20px; display:flex; align-items:center;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div:after{content:''; display:block; width:1px; height:10px; margin:0 10px; background-color:#dcdcdc} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div:last-child:after{display:none} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div:first-child{display:flex;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div:last-child{display:flex; justify-content:center;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child {margin-bottom:5vh; display:flex;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child > div{width:110px} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div b{font-weight:600; margin-right:15px; font-size:17px; } #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div span{color:#8b8b8b; font-size:17px; text-align:left} #rooms #Room_Cont03{margin:0 auto 10vh;} /*#rooms #Room_Cont03 > div{margin-bottom:10vh;} #rooms #Room_Cont03 > div:nth-child(odd){text-align:right} #rooms #Room_Cont03 > div > img{max-width:80%; }*/ .roomSlide {width:70%; max-width:1400px;} .roomSlide .room_slide_btn{display:flex; position:absolute; width:100%; top:50%; transform:translateY(-50%); align-items:center; z-index:1;} .roomSlide .room_btn {} .roomSlide .room_btn { background-size:cover; background-position:center; background-repeat:no-repeat; } .roomSlide .swiper-pagination { position:absolute; width:auto !important;} .roomSlide .swiper-horizontal>.swiper-pagination-bullets, .roomSlide .swiper-pagination-bullets.swiper-pagination-horizontal, .roomSlide .swiper-pagination-custom, .roomSlide .swiper-pagination-fraction{left:50%; transform:translateX(-50%); bottom:3vh;} .roomSlide .swiper-button-prev, .roomSlide .swiper-button-next{ width:65px; height:85px} .roomSlide .swiper-button-prev { } .roomSlide .swiper-button-next { } .roomSlide .swiper-pagination-bullet { width:10px; height:10px; display:inline-block; no-repeat center top; transition: transform 0.3s ease; background-color:#fff; opacity:1} .roomSlide .swiper-pagination-bullet-active { background-color:#000} .roomSlide .room_btn:hover { opacity:1; } .roomSlide .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#fff; font-size:4rem; text-shadow:0 4px 5px rgba(0,0,0,0.2);} .roomSlide .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color:#fff; font-size:4rem;text-shadow:0 4px 5px rgba(0,0,0,0.2);} .room_top_img > div{height:95vh; display:flex; align-items:center; position:relative;border-bottom-right-radius: 150px;} .room_top_img > div:after{content:'';position:absolute;display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.3); left:0;border-bottom-right-radius: 150px;} .room_top_img .InBox {position:relative;width:100%;height:100%;overflow:hidden;} .room_top_img .InBox .ttls {position:absolute;top:50%;left:5%;height:110px;transform:translateY(-50%);color:#fff;z-index:1;} .room_top_img .InBox .ttls div {display:inline-block;width:100px;border-top:1px solid #fff;padding-top:7px;margin-right:15px;} .room_top_img .InBox .ttls span {font-size:25px;} .room_top_img .InBox .ttls strong {display:block;font-size:85px;margin:15px 0 0 65px;} .room_top_img .InBox .ttls b {margin-left:7px;} /* facilty pv */ .facility_title{height:95vh; display:flex; align-items:center; position:relative} .facility_title:after{content:''; display:block; width:100%; height:100%; position:absolute; background-color:rgba(0,0,0,0.2)} .facility_title h2 {display:block;font-size:75px;color:#fff;letter-spacing:1px; position:absolute; left:5%; z-index:1} .topTitle{margin:10vh auto; text-align:center;} .topTitle h3{font-size:25px; margin-bottom:3vh} .topTitle p{font-size:18px; line-height:27px; color:#a7978e;} .facility_info_wrap {margin-bottom:12vh;} .facility_info_wrap > section{} .facility_info_wrap > div{ text-align:center;} .facility_info_wrap > div > h3{ font-size:30px; margin-bottom:35px;} .facility_info_wrap > div > p{font-size:17px; line-height:24px;} .facility_info_wrap > section{display:flex; max-width:1400px; margin:50px auto 0;} .facility_info_wrap > section > article{width:calc(33% - 20px); margin:0 10px} .facility_info_wrap > section > article div.room_info_img{width:100%; height:30vh;} .facility_info_wrap > section > article div.room_info_title{padding:20px; } .facility_info_wrap > section > article div.room_info_title h4{font-size:25px; font-weight:600; margin-bottom:20px} /* facility (다이닝 공통으로 적용 중) */ .facility_top_img > div{height:95vh; display:flex; align-items:center; position:relative;border-bottom-right-radius: 120px;} .facility_top_img > div:after{content:'';position:absolute;display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.3); left:0;border-bottom-right-radius: 120px;} .facility_top_img .InBox {position:absolute;height:100%;/*overflow:hidden;*/top:50%;left:5%;height:110px;margin-top:-42.5px;} .facility_top_img .InBox .ttls {color:#fff;z-index:1;} .facility_top_img .InBox .ttls div {display:inline-block;width:100px;border-top:1px solid #fff;padding-top:7px;margin-right:15px;} .facility_top_img .InBox .ttls span {font-size:25px;} .facility_top_img .InBox .ttls strong {display:block;font-size:75px;margin:15px 0 0 15px;} .facility_top_img .InBox .ttls b {margin-left:7px;} #facility #Facility_Cont02 {width:80%; margin:0 auto} #facility #Facility_Cont02 .ttl {} #facility #Facility_Cont02 .ttl h2 {color:#000;text-align:center;padding:60px 0;} #facility #Facility_Cont02 .ttl h2 strong {font-size:40px;letter-spacing:0.5px;display:block;} #facility #Facility_Cont02 .ttl h2 strong {} #facility #Facility_Cont02 .txt {width:100%; text-align:center;} #facility #Facility_Cont02 .txt .InnerBox {background:#;} #facility #Facility_Cont02 .txt .InnerBox > p {font-size:18px;line-height:1.6; width:80%;margin:0 auto 5%; padding-bottom:5%; border-bottom:1px solid #d9d9d9;} #facility #Facility_Cont02 .txt .InnerBox div {} #facility #Facility_Cont02 .txt .InnerBox div > strong {font-size:20px;color:#494949;font-weight:bold;display:block;margin-bottom:20px;letter-spacing:1px;} #facility #Facility_Cont02 .txt .InnerBox div > ul {overflow:hidden;} #facility #Facility_Cont02 .txt .InnerBox div > ul li {width:100%;margin-bottom:15px;line-height:1.5;} #facility #Facility_Cont02 .txt .InnerBox div > ul li strong {display:block;margin-bottom:5px;color:#868686;} #facility #Facility_Cont02 .txt .InnerBox div > ul li span {display:block;font-size:15px;line-height:1.6;} #facility #Facility_Cont02 .txt .InnerBox div > ul li span.st {font-size:16px;line-height:1.5;} #facility #Facility_Cont02 .txt .InnerBox div > ul li span.st.structure{max-width:600px; margin:0 auto; word-break:keep-all;} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info{display:flex;justify-content:space-between; margin:0 auto 15px; max-width:1000px;} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div{width:calc(100% / 3)} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child{margin-left:50px;} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq{display:flex; flex-wrap:wrap;} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li{width:auto; margin:0;} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span{color:#8b8b8b;font-size:15px;} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span:after{content:','; margin-right:5px} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div{display:flex; margin-bottom:20px} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child > div{margin-bottom:0} #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > b{font-weight:600; margin-right:15px; font-size:17px; } #facility #Facility_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > span{color:#8b8b8b; font-size:17px;} /* #facility #Facility_Cont03{max-width:95%; margin:0 auto;} #facility #Facility_Cont03 > div{margin-bottom:10vh;} #facility #Facility_Cont03 > div:nth-child(odd){text-align:right} #facility #Facility_Cont03 > div > img{max-width:80%; } */ .facilitySlide {width:70%; max-width:1400px;} .facilitySlide .room_slide_btn{display:flex; position:absolute; bottom:0; right:0; width:100%; padding-right:3vw; justify-content:end; align-items:center;} .facilitySlide .room_btn {} .facilitySlide .room_btn { background-size:cover; background-position:center; background-repeat:no-repeat; } .facilitySlide .swiper-pagination { position:absolute; width:auto !important;} .facilitySlide .swiper-horizontal>.swiper-pagination-bullets, .facilitySlide .swiper-pagination-bullets.swiper-pagination-horizontal, .facilitySlide .swiper-pagination-custom, .facilitySlide .swiper-pagination-fraction{left:50%; transform:translateX(-50%); bottom:3vh;} .facilitySlide .swiper-button-prev, .facilitySlide .swiper-button-next{ position:static; margin-top:0; width:65px; height:85px} .facilitySlide .swiper-button-prev {} .facilitySlide .swiper-pagination-bullet { width:10px; height:10px; display:inline-block; no-repeat center top; transition: transform 0.3s ease; background-color:#fff; opacity:1} .facilitySlide .swiper-pagination-bullet-active { background-color:#000} .facilitySlide .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#fff; font-size:4rem; text-shadow:0 4px 5px rgba(0,0,0,0.2);} .facilitySlide .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color:#fff; font-size:4rem; text-shadow:0 4px 5px rgba(0,0,0,0.2);} .facilitySlide .room_btn:hover { opacity:1; } .facilitySlide > .room_btn.m_btns{position:absolute; top:45%;} /* 조식만 추가 */ .breakfast_txt{display:none;} .facility_05 .breakfast_txt{display:block; width:70%; max-width:1400px; margin:10px auto 0; font-size:17px;} .facility_modal{display:none;} /* DINING pv */ .dining_title{height:95vh; display:flex; justify-content:center; align-items:center;} .dining_title:after{content:''; display:block; width:100%; height:95vh; position:absolute; background-color:rgba(0,0,0,0.2)} .dining_title h2 {display:block;font-size:75px;color:#fff;letter-spacing:1px; position:absolute; left:5%; z-index:1} .dining_info_wrap {margin-bottom:12vh;} .dining_info_wrap > section{} .dining_info_wrap > div{ text-align:center;} .dining_info_wrap > div > h3{ font-size:30px; margin-bottom:35px;} .dining_info_wrap > div > p{font-size:17px; line-height:24px;} .dining_info_wrap > section{display:flex; max-width:1400px; margin:50px auto 0;} .dining_info_wrap > section > article{width:calc(33% - 20px); margin:0 10px} .dining_info_wrap > section > article div.room_info_img{width:100%; height:30vh;} .dining_info_wrap > section > article div.room_info_title{padding:20px; } .dining_info_wrap > section > article div.room_info_title h4{font-size:25px; font-weight:600; margin-bottom:20px} /* DINING */ .dining_top_img > div{height:100vh; display:flex; align-items:center; position:relative} .dining_top_img > div:after{content:'';position:absolute;display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.3); left:0;} .dining_top_img .InBox {position:relative;width:100%;height:100%;overflow:hidden;} .dining_top_img .InBox .ttls {position:absolute;top:50%;left:5%;height:110px;margin-top:-42.5px;color:#fff;z-index:1;} .dining_top_img .InBox .ttls div {display:inline-block;width:100px;border-top:1px solid #fff;padding-top:7px;margin-right:15px;} .dining_top_img .InBox .ttls span {font-size:25px;} .dining_top_img .InBox .ttls strong {display:block;font-size:75px;margin:15px 0 0 15px;} .dining_top_img .InBox .ttls b {margin-left:7px;} #dining #dining_Cont02 {width:80%; margin:0 auto} #dining #dining_Cont02 .ttl {} #dining #dining_Cont02 .ttl h2 {color:#000;text-align:center;padding:60px 0;} #dining #dining_Cont02 .ttl h2 strong {font-size:40px;letter-spacing:0.5px;display:block;} #dining #dining_Cont02 .ttl h2 strong {} #dining #dining_Cont02 .txt {width:100%; text-align:center;} #dining #dining_Cont02 .txt .InnerBox {background:#;} #dining #dining_Cont02 .txt .InnerBox > p {font-size:18px;line-height:1.6; width:80%;margin:0 auto 5%; padding-bottom:5%; border-bottom:1px solid #d9d9d9;} #dining #dining_Cont02 .txt .InnerBox div {} #dining #dining_Cont02 .txt .InnerBox div > strong {font-size:20px;color:#494949;font-weight:bold;display:block;margin-bottom:20px;letter-spacing:1px;} #dining #dining_Cont02 .txt .InnerBox div > ul {overflow:hidden;} #dining #dining_Cont02 .txt .InnerBox div > ul li {width:100%;margin-bottom:15px;line-height:1.5;} #dining #dining_Cont02 .txt .InnerBox div > ul li strong {display:block;margin-bottom:5px;color:#868686;} #dining #dining_Cont02 .txt .InnerBox div > ul li span {display:block;font-size:15px;line-height:1.6;} #dining #dining_Cont02 .txt .InnerBox div > ul li span.st {font-size:16px;line-height:1.5;} #dining #dining_Cont02 .txt .InnerBox div > ul li span.st.structure{max-width:600px; margin:0 auto; word-break:keep-all;} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info{display:flex;justify-content:space-between; margin:0 auto 15px; max-width:1000px;} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div{width:calc(100% / 3)} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child{margin-left:50px;} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq{display:flex; flex-wrap:wrap;} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li{width:auto; margin:0;} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span{color:#8b8b8b;font-size:15px;} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span:after{content:','; margin-right:5px} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div{display:flex; margin-bottom:20px} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child > div{margin-bottom:0} #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > b{font-weight:600; margin-right:15px; font-size:17px; } #dining #dining_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > span{color:#8b8b8b; font-size:17px;} /* #dining #dining_Cont03{max-width:95%; margin:0 auto;} #dining #dining_Cont03 > div{margin-bottom:10vh;} #dining #dining_Cont03 > div:nth-child(odd){text-align:right} #dining #dining_Cont03 > div > img{max-width:80%; } */ .diningSlide {width:100%; max-width:1400px;} .diningSlide .room_slide_btn{display:flex; position:absolute; bottom:0; right:0; width:100%; padding-right:3vw; justify-content:end; align-items:center;} .diningSlide .room_btn {} .diningSlide .room_btn { background-size:cover; background-position:center; background-repeat:no-repeat; } .diningSlide .swiper-pagination { position:absolute; width:auto !important;} .diningSlide .swiper-horizontal>.swiper-pagination-bullets, .diningSlide .swiper-pagination-bullets.swiper-pagination-horizontal, .diningSlide .swiper-pagination-custom, .diningSlide .swiper-pagination-fraction{left:50%; transform:translateX(-50%); bottom:3vh;} .diningSlide .swiper-button-prev, .diningSlide .swiper-button-next{ position:static; margin-top:0; width:65px; height:85px} .diningSlide .swiper-button-prev { background-image:url(../images/about_prev.jpg); margin-right:1px} .diningSlide .swiper-button-next { background-image:url(../images/about_next.jpg);} .diningSlide .swiper-pagination-bullet { width:10px; height:10px; display:inline-block; no-repeat center top; transition: transform 0.3s ease; background-color:#fff; opacity:1} .diningSlide .swiper-pagination-bullet-active { background-color:#000} .diningSlide .room_btn:hover { opacity:1; } .diningSlide .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display:none} .diningSlide .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display:none} /* promotion */ #promotion #visual{background:url('https://gonylab11.speedgabia.com/thegray/banner/2.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;} section.board_wrap{margin:10vh auto; max-width:1400px;} #promotion .tab{width:90%; margin:0 auto} #promotion .tabnav{ width:100%;display:flex; } #promotion .tabnav li{text-align:center; border:1px solid #ddd; width:200px} #promotion .tabnav li:first-child{margin-right:10px} #promotion .tabnav li a.active:before{background:#3e71da;} #promotion .tabnav li a.active{background-color:#bb9a79; color:#fff; border-color:#bb9a79} #promotion .tabnav li a{ position:relative; display:block; padding:1rem;text-decoration:none; font-size:16px; transition:0.2s; color:#666} #promotion .tabnav li a:hover{background:#bb9a79; color:#fff; } #promotion .promotion_tab_wrap{width:100%; display:flex; flex-wrap:wrap; margin:10vh 0} #promotion .promotion_tab_wrap > article {width:calc(33% - 10px); margin:0 5px} #promotion .promotion_tab_wrap > article a > div > img{width:100%;} #promotion .promotion_tab_wrap > article a > div.promotion_title{padding:20px} #promotion .promotion_tab_wrap > article a > div.promotion_title h4{font-size:19px; font-weight:600; margin-bottom:10px} #promotion .promotion_tab_wrap > article a > div.promotion_title h5{color:#aeaeae; margin:15px 0; font-size:15px;} #promotion .promotion_tab_wrap > article a > div.promotion_title p{font-size:15px;} /*------------------------------------------------------------------------------------------------*/ /* convention */ #convention .banner {position:relative;width:100%;height:600px;overflow:hidden;} #convention .banner:before {background:#111118;position:absolute;left:0;top:0;width:100%;height:100%;content:"";opacity:0.5;z-index:5;} #convention .banner h2 {position:absolute;top:50%;left:50%;margin:-2px 0 0 -450px;z-index:100;} #convention .section {padding-bottom:10%;} #convention .section .back {position:relative;width:100%;margin:0 auto;z-index:5;} #convention .section .back > div {position:absolute;top:0;width:92.5%;min-width:1150px;min-height:309px;} #convention .section .info {position:relative;padding:65px 0;width:80%;margin:0 auto;min-width:1100px;color:#fff;overflow:hidden;z-index:15;} #convention .section .info .ttl {width:calc(35% - 50px);float:left;padding:10px 0 0 50px;} #convention .section .info .ttl h3 {font-size:38px;} #convention .section .info .ttl h3 span {font-size:18px;display:block;margin-top:5px;} #convention .section .info .txt {width:60%;float:left;} #convention .section .info .txt p {line-height:1.5em;font-size:14px;} #convention .section .info .txt ul {width:100%;padding:50px 0 35px;overflow:hidden;} #convention .section .info .txt ul li {float:left;width:calc(50% - 30px);margin:0 5px 15px 0;padding-left:10px;font-size:14px;line-height:1.3;} #convention .section .info .txt ul li {background:url(../images/blt_s.png) no-repeat left 9px;} #convention .section .info .txt .eq {padding-bottom:35px;} /*------------------------------------------------------------------------------------------------*/ /* wedding */ #wedding .banner {position:relative;width:100%;height:600px;overflow:hidden;} #wedding .banner:before {background:#111118;position:absolute;left:0;top:0;width:100%;height:100%;content:"";opacity:0.5;z-index:5;} #wedding .banner h2 {position:absolute;top:50%;left:50%;margin:-2px 0 0 -450px;z-index:100;} #wedding .section {padding-bottom:10%;} #wedding .section .back {position:relative;width:100%;margin:0 auto;z-index:5;} #wedding .section .back > div {position:absolute;top:0;width:92.5%;min-width:1150px;min-height:309px;} #wedding .section .info {position:relative;padding:65px 0;width:80%;margin:0 auto;min-width:1100px;color:#fff;overflow:hidden;z-index:15;} #wedding .section .info .ttl {width:calc(35% - 50px);float:left;padding:10px 0 0 50px;} #wedding .section .info .ttl h3 {font-size:38px;} #wedding .section .info .ttl h3 span {font-size:18px;display:block;margin-top:5px;} #wedding .section .info .txt {width:60%;float:left;} #wedding .section .info .txt p {line-height:1.5em;font-size:14px;} #wedding .section .info .txt ul {width:100%;padding:50px 0 35px;overflow:hidden;} #wedding .section .info .txt ul li {float:left;width:calc(50% - 30px);margin:0 5px 15px 0;padding-left:10px;font-size:14px;line-height:1.3;} #wedding .section .info .txt ul li {background:url(../images/blt_s.png) no-repeat left 9px;} #wedding .section .info .txt .eq {padding-bottom:35px;} /*------------------------------------------------------------------------------------------------*/ /* facility */ #facility .banner {position:relative;width:100%;height:600px;overflow:hidden;} #facility .banner:before {background:#111118;position:absolute;left:0;top:0;width:100%;height:100%;content:"";opacity:0.5;z-index:5;} /* #facility .banner h2 {position:absolute;top:50%;left:50%;margin:-2px 0 0 -450px;z-index:100;} */ #facility .section {padding-bottom:3%;} #facility .section .back {position:relative;width:100%;margin:0 auto;z-index:5;} #facility .section .back > div {position:absolute;top:0;width:92.5%;min-width:1150px;min-height:309px;} #facility .section .info {position:relative;padding:65px 0;width:80%;margin:0 auto;min-width:1100px;color:#fff;overflow:hidden;z-index:15;} #facility .section .info .ttl {width:calc(35% - 50px);float:left;padding:10px 0 0 50px;} #facility .section .info .ttl h3 {font-size:38px;} #facility .section .info .ttl h3 span {font-size:18px;display:block;margin-top:5px;} #facility .section .info .txt {width:60%;float:left;} #facility .section .info .txt p {line-height:1.5em;font-size:14px;} #facility .section .info .txt ul {width:100%;padding:50px 0 35px;overflow:hidden;} #facility .section .info .txt ul li {float:left;width:calc(50% - 30px);margin:0 5px 15px 0;padding-left:10px;font-size:14px;line-height:1.3;} #facility .section .info .txt ul li {background:url(../images/blt_s.png) no-repeat left 9px;} #facility .section .info .txt .eq {padding-bottom:35px;} #fa-slide-txt{position: absolute; display: none; left: 3%; top: 4%; background: rgba(32, 51, 63, 1); width: 150px; height: 80px; text-align: center; line-height: 80px; font-size: 25px; color: #fff; font-weight: bold;} #fa-slide-txt.on{display: block;} /*------------------------------------------------------------------------------------------------*/ /* service */ #service .banner {position:relative;width:100%;height:600px;overflow:hidden;} #service .banner:before {background:#111118;position:absolute;left:0;top:0;width:100%;height:100%;content:"";opacity:0.5;z-index:5;} /* #service .banner h2 {position:absolute;top:50%;left:50%;margin:-2px 0 0 -450px;z-index:100;} */ #service .section {padding-bottom:10%;} #service .section .back {position:relative;width:100%;margin:0 auto;z-index:5;} #service .section .back > div {position:absolute;top:0;width:92.5%;min-width:1150px;min-height:309px;} #service .section .info {position:relative;padding:65px 0;width:80%;margin:0 auto;min-width:1100px;color:#fff;overflow:hidden;z-index:15;} #service .section .info .ttl {width:calc(35% - 50px);float:left;padding:10px 0 0 50px;} #service .section .info .ttl h3 {font-size:38px;} #service .section .info .ttl h3 span {font-size:18px;display:block;margin-top:5px;} #service .section .info .txt {width:60%;float:left;} #service .section .info .txt p {line-height:1.5em;font-size:14px;} #service .section .info .txt ul {width:100%;padding:50px 0 35px;overflow:hidden;} #service .section .info .txt ul li {float:left;width:calc(50% - 30px);margin:0 5px 15px 0;padding-left:10px;font-size:14px;line-height:1.3;} #service .section .info .txt ul li {background:url(../images/blt_s.png) no-repeat left 9px;} #service .section .info .txt .eq {padding-bottom:35px;} /*------------------------------------------------------------------------------------------------*/ /* table */ .table .banner {position:relative;width:100%;height:600px;overflow:hidden;} .table .banner:before {background:#111118;position:absolute;left:0;top:0;width:100%;height:100%;content:"";opacity:0.5;z-index:5;} /* .table .banner h2 {position:absolute;top:50%;left:50%;margin:-2px 0 0 -450px;z-index:100;} */ .table .section .tabs {width:100%;height:100%;background:#fff;} .table .section .tabs .snb {margin:0 auto;padding:35px 0;overflow:hidden; display:flex; justify-content:center;} .table .section .tabs .snb > li {background:url(../images/pv_b.gif) no-repeat right center; padding:0 60px;} .table .section .tabs .snb > li:last-child {background:none;} .table .section .tabs .snb > li a {display:block;padding:15px 0;text-align:center;font-size:17px;} .table .section .tabs .snb > li.active a {font-weight:bold;} .table .section .tabs .snb > div {background:url(../images/pv_b.gif) no-repeat right center; padding:0 60px;} .table .section .tabs .snb > div:last-child {background:none;} .table .section .tabs .snb > div a {display:block;padding:15px 0;text-align:center;font-size:17px;} .table .section .tabs .snb > div.active a {font-weight:bold;} .table .section .tabs .thumbs {position:relative;max-width:1200px;padding:60px 0;margin:0 auto;} .table .section .tabs .snb{display:flex;} .table .section .tabs .snb_m{display:none;} /*------------------------------------------------------------------------------------------------*/ /* reserve */ #reserve #visual{background:url(http://gonylab11.speedgabia.com/thegray/banner/1.jpg) no-repeat 50% 50%;background-size:cover;} #reserve .tab_02 {display:none;} #reserve .tab_03 {display:none;} #reserve .tab_02 h2 {width:250px;margin:0 auto;padding:0px 0 35px;} #reserve .tab_02 table {width:1200px;border:1px solid #e7e7e7;font-family:'돋움',Dotum!important;} #reserve .tab_02 table tr th {border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;} #reserve .tab_02 table tr th, #reserve .tab_02 table tr td { border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7; text-align:center;font-size:13px;color:#676767; } #reserve .tab_02 > div > h3 {margin-bottom:10px;} #reserve .tab_02 ul li { padding-left:10px;font-size:12px;line-height:1.6em;color:#676767;font-family:'돋움',Dotum!important; background:url(http://gonylab2.speedgabia.com/common/li_b.gif) no-repeat left 3px; } #reserve .tab_02 ul li span {color:#ee3939;} #reserve .tab_02 .r_info_01 {position:relative;margin-bottom:30px;} #reserve .tab_02 .r_info_01 h4 {text-align:left;margin-bottom:10px;} #reserve .tab_02 .r_info_01 table {margin-bottom:20px;} #reserve .tab_02 .r_info_01 table .room_ {background:#efefef;height:50px;} #reserve .tab_02 .r_info_01 table > thead {line-height:1.1em;} #reserve .tab_02 .r_info_01 table > thead {background:#f8f8f8;} #reserve .tab_02 .r_info_01 table > thead tr th {font-weight:bold;} #reserve .tab_02 .r_info_01 table > tbody tr td {line-height:3em;} #reserve .tab_02 .r_info_02 {margin:50px 0;padding-top:50px;text-align:left;} #reserve .tab_02 .r_info_03 {padding-bottom:150px;text-align:left;} #reserve .tab_02 .r_info_03 .CNCL_COMM {margin-bottom:50px;} #reserve .tab_02 .r_info_03 table {line-height:1.5em;margin-top:20px;} #reserve .tab_02 .r_info_03 table > thead {background:#f2f2f2;} @media(min-width:1024px){ .box-type > .roomtype_list{top:35px; background-color:#fff; width:100%; right:0; position:absolute; padding:10px; border-radius:5px; box-shadow:0 0 7px rgba(0,0,0,0.1);} #header_sub .box-type > .roomtype_list{top:58px; background-color:#fff; width:100%; right:0; position:absolute; padding:10px; border-radius:5px; box-shadow:0 0 7px rgba(0,0,0,0.1);} } @media (max-width:1780px) { #rooms #Room_Cont02 .ttl h2 strong {font-size: 35px;} #rooms #Room_Cont02 .ttl{top: -155px;} #rooms #Room_Cont02 .txt .InnerBox > p {font-size: 15px;} #about .content .cont_ttl p{font-size: 15px;} .previews .section .list > div h3{} .previews .section .list > div p{} #facility .section .info .ttl h3{font-size: 33px;} #facility .section .info .txt p{font-size: 12px;} section.booking_wrapper{width:80%;left:50%; transform:translateX(-50%);} } @media (max-width:1560px) { #rooms #Room_Cont02 .ttl h2 strong {font-size: 30px;} #rooms #Room_Cont02 .ttl{top: -150px;} #about .content .cont_ttl p{font-size: 14px;} .previews .section .list > div h3{font-size: 40px;} .previews .section .list > div p{font-size: 12px;} #rooms #Room_Cont02 .txt .InnerBox > p {font-size: 14px;} } @media (max-width:1470px) { #facility .section .info .ttl h3{font-size: 25px;} #facility .section .info .txt p{font-size: 10px;} #rooms #Room_Cont02 .txt .InnerBox > p {font-size: 16px;} section.booking_wrapper.booking_wrapper_sub{width:70%} } @media (max-width:1400px) { section.booking_wrapper{width:80%;left:50%; transform:translateX(-50%);} /* section01 */ .mainSlide01 button.slick-prev.slick-arrow{left:105px;} .mainSlide01 button.slick-next.slick-arrow{right:-8px} .mainSlide01 ul.slick-dots{bottom:40px} .section02 .text_bg_wrap{width:50vw;} section#fix_contents div.room_box{width:50vw;} section#fix_contents div.fix_text{width:40vw; padding-right:3vw;} #rooms #Room_Cont02{width:90%;} .roomSlide{width:90%;} } @media (max-width:1360px) { #rooms #Room_Cont02 .ttl h2 strong {font-size: 25px;} #rooms #Room_Cont02 .ttl{top: -145px;} #rooms #Room_Cont02 .txt .InnerBox > p {font-size: 12px;} #about .content .cont_ttl p{font-size: 12px;} } @media (max-width:1230px) { #rooms #Room_Cont02 .txt .InnerBox > p {font-size: 12px;} } @media(max-width:1200px){ #header{width:100%;} section.booking_wrap{padding:0 30px;} section.booking_wrapper{width:70%;} section.booking_wrapper.booking_wrapper_sub{width:80%;} section.booking_wrapper.booking_wrapper_sub #reserveBar{padding:1.5vw 1.5vw} #reserveBar form .wrap .box input[type=submit]{padding:15px 10px; width:85%; font-size:12px} #reserveBar form .wrap .box .datepicker-wrap{width:80%; min-width:auto} #search-pc > div > div.box.box-checkin:after{font-size:20px;} #reserveBar form .wrap .box input.datepicker{font-size:15px} .box-type > .select_op_btn{font-size:15px} /* section 01 */ .mainSlide01 button.slick-next.slick-arrow, .mainSlide01 button.slick-prev.slick-arrow{width:80px; height:15px} .mainSlide01 button.slick-prev.slick-arrow{left:54px;} .mainSlide01 button.slick-next.slick-arrow{right:-24px} .mainSlide01 ul.slick-dots{bottom:20px} .section02 div.text_bg{width:35vw; height:35vw;} section#fix_contents div.fix_text h5{font-size:31px;} section#fix_contents div.fix_text p{font-size:16px; line-height:24px;} section#fix_contents div.fix_text p > br{display:none} section#fix_contents div.fix_text p > br.m_view{display:block} section.section03 > section > .dining_txt{padding-left:5vw;} .ft_in > div h5 img{width:140px} .ft_in .ft_lt .add{margin-top:50px} .main_dining div.slick-slide{margin:0 50px} section.section03_m .dining_txt > h5{font-size:51px;} section.section03_m .dining_txt > p{} .facilitySlide > .room_btn.m_btns{top:40%} .facilitySlide .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:2rem} .facilitySlide .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:2rem} .facilitySlide .swiper-button-prev, .facilitySlide .swiper-button-next{width:55px;} .facilitySlide .swiper-button-next{text-align:right;} .about_menu_box > .room_btn.m_btns{top:40%} .about_menu_box .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:2rem} .about_menu_box .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:2rem} .about_menu_box .swiper-button-prev, .about_menu_box .swiper-button-next{width:55px;} .about_menu_box .swiper-button-next{text-align:right;} .roomSlide > .room_btn.m_btns{top:40%} .roomSlide .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:2rem} .roomSlide .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:2rem} .roomSlide .swiper-button-prev, .roomSlide .swiper-button-next{width:55px;} .roomSlide .swiper-button-next{text-align:right;} } @media(max-width:1023px){ #header{display:none;} nav.gnb{display:flex;} aside.main_fix_reserve{bottom:120px;} /* nav.gnb.active{background-color:rgb(175 153 135 / 80%);} */ section.booking_wrapper{width:100%;} section.booking_wrapper.booking_wrapper_sub{display:none;} section.booking_wrapper.booking_wrapper_sub.active{display:block;} section.booking_wrapper.booking_wrapper_sub #reserveBar form .wrap .box input.datepicker{padding:0 0 4px} /* sub_visual */ #header_sub{background:transparent; position:relative; height:0} #header_sub > .dep01_wrpa > h1{display:none} #header_sub > .dep01_wrpa > #hgroup_sub{display:none} #header_sub > .dep01_wrpa > div.sns {display:none} /* 페이지별 예약박스 top값이 다름... */ #room_pv #header_sub section.booking_wrapper.booking_wrapper_sub.active{top:52vh;} /* main_visual */ .main_visual_wrap{max-height:60vh;} /* 예약바 */ /* 수정 전 section.booking_wrap{width:90%; border-radius:5px; padding: 0 20px} .box-type > .select_op_btn{width:100%;} .box-type > .roomtype_list{width:100%; z-index:1; top:60px} #reserveBar{height:auto; padding:20px 0;} #reserveBar form .wrap{flex-wrap:wrap; justify-content:space-between;} #reserveBar form .wrap .box{flex:none} #reserveBar form .wrap .box.box-btn{justify-content:center;} #reserveBar form .wrap .box:nth-child(1){width:calc(45% - 10px);} #reserveBar form .wrap .box:nth-child(2){width:calc(45% - 10px);} #reserveBar form .wrap .box:nth-child(3){width:calc(100% / 1)} #reserveBar form .wrap .box:nth-child(4){width:100%; margin-top:10px} #search-pc > div > div.box.box-checkin:after{right:-40px} #reserveBar form .wrap .box:not(:last-of-type){padding:0px 0 10px} #reserveBar form .wrap .box .datepicker-wrap{min-width:100%} #reserveBar form .wrap .box input.datepicker{padding:7px 0} #reserveBar form .wrap .box select{width:100%; padding:7px 0} */ section.booking_wrapper.booking_wrapper_sub.active{position:absolute; top:91vh; width:100%;} section.booking_wrap{width:95%; padding:10px 15px 10px 25px} #reserveBar{height:auto} #reserveBar form .wrap{align-items:center; justify-content:space-between;} #reserveBar form .wrap .box{flex:none} #reserveBar form .wrap .box input.datepicker::placeholder{font-size:11px} #reserveBar form .wrap .box input.datepicker{padding:0 0 5px 0; font-size:13px} #reserveBar form .wrap .box p{font-size:13px} #reserveBar form .wrap .box .datepicker-wrap{min-width:auto; width:85%} #search-pc > div > div.box.box-checkin{width:calc(33.3%); margin:0 40px} #search-pc > div > div.box.box-checkout{width:calc(33.3%)} #search-pc > div > div.box.box-type{width:calc(33.3%)} #search-pc > div > div.box.box-type > p.select_op_btn{width:100%} #search-pc > div > div.box.box-btn{width:calc(25%)} #reserveBar form .wrap .box input[type=submit]{width:100%; border-radius:50px; font-size:11px} #search-pc > div > div.box.box-checkin:after{font-size:11px; right:-40px} .box-type > .select_op_btn{font-size:12px; padding:0 0 4px 0} #reserveBar form .wrap .box.box-btn > button{letter-spacing:-0.3px; line-height:9px; width:100%; border-radius:50px; font-size:8px; padding:0; width:60px; height:60px;} #reserveBar form .wrap .box.box-btn > a{display:flex; justify-content:center; align-items:center; letter-spacing:-0.3px; line-height:9px; width:100%; border-radius:50px; font-size:8px; padding:0; width:60px; height:60px;} #search-pc > div > div.box.box-btn{width:60px;} #reserveBar form .wrap .box .datepicker-wrap::after{width:6px; height:6px; top:46%} .box-type > .select_op_btn::after{width:6px; height:6px; top:46%} .box-type > .roomtype_list{width:100%;} .box-type > .roomtype_list li{padding:0 0 5px;} .box-type > .roomtype_list li button{font-size:11px; width:100%; padding:0; text-align:left} #reserveBar form .wrap .box input[type=submit]{letter-spacing:-0.3px; line-height:9px; width:100%; border-radius:50px; font-size:8px; padding:0; width:60px; height:60px;} section.booking_wrapper.booking_wrapper_sub #reserveBar{padding:0} section.booking_wrapper.booking_wrapper_sub.active{position:absolute; top:55vh; width:100%; transition:0.2s} section.booking_wrapper.booking_wrapper_sub.active.bottomFix{height:80px; position:fixed; bottom:0;z-index:99; bottom:10px; top:auto} .booking_popup{display:none;} section.booking_wrapper.booking_wrapper_sub #reserveBar form .wrap .box input.datepicker{padding:0 0 5px} /* section01 */ .mainSlide01 button.slick-prev.slick-arrow, .mainSlide01 button.slick-next.slick-arrow{display:none} /* room_pv */ .room_pv_title{height:60vh; margin-top:0;} .room_pv_title h2{font-size:22px} .previews .section{flex-wrap:wrap; height:auto; flex-direction:column-reverse;} .previews .section .list{width:100%; padding:15vh 0 50px ; align-items:baseline; height:auto;} .previews .section .img{width:90%; transform:translateY(0); height:40vh; margin:0 auto -10vh;} .previews .section .list > div{width:70%; margin:0 auto 0 30px;} .previews .section .list > div h3{font-size:21px; margin-bottom:20px} .previews .section .list > div p{word-break:keep-all} .room_info_wrap > div{width:90%; margin: 0 auto; text-align:left;} .room_info_wrap > div > h3{font-size:21px; margin-bottom:25px} .room_info_wrap > div > p{font-size:15px; line-height:21px;} /* rooms */ .room_top_img .InBox .ttls strong{font-size:35px;} .room_top_img .InBox .ttls span{font-size:19px;} .room_top_img .InBox .ttls div{padding-top:5px;} #rooms #Room_Cont02{width:100%;} #rooms #Room_Cont02 .ttl h2{padding:60px 0 20px} #rooms #Room_Cont02 .txt .InnerBox > p{width:100%; font-size:12px; padding: 0 20px 40px; margin-bottom:40px;} #rooms #Room_Cont02 .txt .InnerBox > div{width:94%; margin:0 auto;} #rooms #Room_Cont02 .txt .InnerBox div > strong{font-size:15px} #rooms #Room_Cont02 .txt .InnerBox div > ul li span.st{font-size:13px} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info{flex-wrap:wrap;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div{} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:nth-child(1){flex-wrap:wrap;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:nth-child(2){width:auto;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:nth-child(3){width:100%; margin-left:0;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > b{font-size:13px; margin-right:15px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > span{font-size:13px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq{margin-top:5px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq > li > span{font-size:13px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div b{font-size: 13px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div span{font-size:13px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div{margin-bottom:0; align-items:baseline; } #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:nth-child(2){align-items:baseline;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child > div{width:auto;} #rooms #Room_Cont03{ margin-top:5vh} #rooms #Room_Cont03 > div{margin-bottom:3vh} .roomSlide{width:90%;} /* facility_pv */ .facility_title{margin-top:0; height:60vh; background:url('http://gonylab11.speedgabia.com/thegray/special/1/1.jpg') no-repeat 50% 50%; background-size:cover;} .facility_title h2{margin-top:6vh; color:#fff; font-size:21px} aside.bottom_reserve a{width:80px} #reserve aside.view_video img{max-width:80px;} .facility_top_img .InBox .ttls strong{font-size:21px} #facility_pv .section{margin-bottom:0} #facility_pv .section .img{width:90%; transform:translateY(0); height:40vh; margin:0 auto -10vh; display:none} #facility_pv .section .list{background-color:transparent; margin-top:40px; padding:7.5% 0 0} #facility_pv .section .list > div h3{color:#000; font-size:24px; } #facility_pv .section .list > div p{color:#000; font-size:14px; word-break:keep-all} /* dining_pv */ .dining_info_wrap > div{width:90%; margin: 0 auto;} .dining_info_wrap > div > h3{font-size:21px; margin-bottom:25px} .dining_info_wrap > div > p{font-size:15px; line-height:21px;} .dining_title{margin-top:0; height:60vh; background:url('http://gonylab11.speedgabia.com/thegray/special/4/1.jpg') no-repeat 50% 50%; background-size:cover;} .dining_title h2{margin-top:6vh; color:#fff; font-size:21px} .dining_title:after{height:60vh} #dining_pv .section{margin-bottom:0} #dining_pv .section .img{width:90%; transform:translateY(0); height:40vh; margin:0 auto -10vh; display:none} #dining_pv .section .list{background-color:transparent; margin-top:40px; padding:7.5% 0 0} #dining_pv .section .list > div h3{color:#000; font-size:24px; } #dining_pv .section .list > div p{color:#000; font-size:14px; word-break:keep-all} #visual .InBox .ttls strong{font-size:21px;} } @media(max-width:767px){ /* 로딩 */ .loadingImg.loading_pc{display:none;} .loadingImg.loading_m{display:block; width:150%;} aside.main_fix_reserve{bottom:70px} aside.main_fix_reserve a{width:80px} /* main */ nav.gnb > article.logo img{width:180%;margin-left: -20px;} nav.gnb .booking_wrapper_fix{display:none} nav.gnb .booking_wrapper_fix.active{display:block; width:95%; top:88px} nav.gnb .booking_wrapper_fix.active > .booking_wrap{width:100%; border-radius:50px; padding:10px 15px 10px 25px;} #header_sub > div.dep01_wrpa{padding:0} #reserveBar form .wrap .box.box-btn > button{width:45px; height:45px;} #reserveBar form .wrap .box.box-btn > button > br{display:block} #reserveBar form .wrap .box.box-btn > a{width:45px; height:45px;} #reserveBar form .wrap .box.box-btn > a > br{display:block} #search-pc > div > div.box.box-checkin{width:calc(35%)} #search-pc > div > div.box.box-checkout{width:calc(35%)} .box-type > .select_op_btn{margin-bottom:1px} #header_sub .box-type > .roomtype_list{bottom:25px; position:absolute; background-color:#fff; padding:10px; min-width:100px; box-shadow:0 0 10px rgba(0,0,0,0.2)} .box-type > .roomtype_list{bottom:25px; position:absolute; background-color:#fff; padding:10px; min-width:100px; box-shadow:0 0 10px rgba(0,0,0,0.2)} /* 모바일에서 메인화면 아래에 fix하기 */ .booking_wrapper.active{position:fixed; bottom:-110px; transform:translateY(0); z-index:100; width:100%;} /* 페이지별 예약박스 top값이 다름... */ #room_pv #header_sub section.booking_wrapper.booking_wrapper_sub.active{top:auto; bottom:10px;} #room_pv #header_sub section.booking_wrapper.booking_wrapper_sub.active.bottomFix{top:auto;} #reserveBar{padding:0} #reserve .booking_wrapper.booking_wrapper_sub.scroll_on.active{display:none} #reserveBar form .wrap .box p{font-size:11px; text-align:center; width:85%; margin-bottom:5px;} #reserveBar form .wrap .box.box-btn:last-child{margin-left:0} #search-pc > div > div.box.box-checkin{margin-right:0; margin:0;} #reserveBar form .wrap .box.box-btn{justify-content:end;} #search-pc > div > div.box.box-checkin:after{right:-18%} /* main_visual */ #index h2.visual_logo{display:none} .mainSlide01 button.slick-prev.slick-arrow{width:35px; height:35px; background-size:cover; background-position:left center; left:0;background-image:url(../images/ico_w_a.png); transform:rotate(180deg);} .mainSlide01 button.slick-next.slick-arrow{width:35px; background-size:cover; background-position:right center; right:-11px; background-image:url(../images/ico_w_a.png); height:35px;} /* section01 */ .section01{margin-bottom:9vh} #index .swiper.mainSlide01{height:20vh;} #index #lists{padding-top:0; margin-top:4vh} #index #lists p{font-size:14px;margin-top: 150px;} #index #lists h3{font-size:28px; margin:5px 0 30px} .mainSlide01 .slick-slide {margin:0; height:50vh} .mainSlide01 .slick-slide img{height:50vh; object-fit:cover} .mainSlide01 .slick-slide.slick-active img{height:50vh; object-fit:cover} .mainSlide01 ul.slick-dots li button{width:6px; height:6px; margin:0 2px} #index .mainSlide01.pc_only { display:none;} #index .mainSlide01.m_only {display:block;} /* section02 */ .section02{display:none; padding:50px 20px; height:100vh;overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none} .section02:-webkit-scrollbar {display: none;} section#fix_contents div.wrap{display:flex; flex-wrap:wrap; padding-top:0; padding-bottom:0} .section02 .text_bg_wrap{display:none} section#fix_contents{height:100vh; position:absolute; max-width:90%} section#fix_contents div.wrap{height:150vh;} section#fix_contents div.fix_text{width:100%; position:static; transform:translateY(0); float:none; text-align:center;} section#fix_contents div.room_box{width:100%; margin:0 auto 3vh 0vw} section#fix_contents div.room_box.room_box01{margin-top:30px;} section#fix_contents div.room_box.room_box_last{margin: 0 auto 0 0 } section#fix_contents div.fix_text h5{font-size:25px; margin-top: 50px; margin-bottom:30px; text-align:center;} section#fix_contents div.fix_text p{font-size:12px; word-break:keep-all;text-align:center; line-height:20px} a.more_btn{font-size:11px; margin-top:20px; margin-bottom: 50px; padding:10px 20px} /* section02_m */ .section02_m{display:block; background-color:#254949; padding:50px 20px;} .section02_m article{text-align:center;} .section02_m h5{font-size:25px; margin-bottom:30px;margin-top: 100px; text-align:center; color:#fff;} .section02_m p{font-size:12px; word-break:keep-all; text-align:center; line-height:20px; color:#fff;} .section02_m p > br{display:none;} .section02_m p > br.m_view{display:block;} /* 화살표*/ .section02_m .accomSlide .swiper-button-prev, .section02_m .accomSlide .swiper-rtl .swiper-button-next{background-color:rgba(0,0,0,0.5); left:0} .section02_m .accomSlide .swiper-button-next, .section02_m .accomSlide .swiper-rtl .swiper-button-prev{background-color:rgba(0,0,0,0.5); right:0} .section02_m .accomSlide .swiper-button-prev:after, .section02_m .accomSlide .swiper-rtl .swiper-button-next:after{ color:#fff; font-size:15px;} .section02_m .accomSlide .swiper-button-next:after, .section02_m .accomSlide .swiper-rtl .swiper-button-prev:after{color:#fff; font-size:15px;} /* paging*/ .section02_m .accomSlide .swiper-pagination-bullet-active{background-color:#fff} /* section03 */ section.section03{padding:50px 0 0; display:none;} section.section03 > section{display:flex; flex-direction:column-reverse;} section.section03 > section > .dining_img_wrap{position:relative; width:100%;} section.section03 > section > .dining_img_wrap > div.dining_img{width:65%; height:50%; margin:0 0 0 auto; z-index:1} section.section03 > section > .dining_img_wrap:after{content:''; width:100%; height:50%; display:block; background-color:#254949; position:absolute; bottom:0;} section.section03 > section > .dining_txt{width:100%; height:auto; transform:translateY(-50px); padding:80px 20px 30px} section.section03 > section > .dining_img_wrap div.img_caption{} section.section03 > section > .dining_img_wrap div.img_caption h6{font-size:24px; line-height:18px} section.section03 > section > .dining_img_wrap div.img_caption p{font-size:14px;} section.section03 > section > .dining_txt > h5{font-size:28px; margin-top: 30px; margin-bottom:20px} section.section03 > section > .dining_txt > p{font-size:12px; line-height:21px;} section.section03_m{display:block; padding:50px 0 0; margin-bottom:50px;} section.section03_m .dining_txt{width:100%; padding:0 20px 0; text-align:center;} section.section03_m .dining_txt > h5{font-size:28px; margin-top: 100px; margin-bottom:20px;} section.section03_m .dining_txt > p{font-size:12px; line-height:21px;word-break:keep-all;} section.section03_m .dining_txt > p > br{display:none;} /* .section03_m .diningSlide .swiper-pagination-bullet-active{background-color:#fff} */ .main_dining{display:block; width:100%; margin:20px 0} .main_dining img.pc_only{display:none} .main_dining img.m_only{max-width:100%; object-fit:cover; height:30vh; display:block;border-radius: 45px;} .main_dining div.slick-slide{margin:0 10px; opacity:0.2;} .main_dining div.slick-slide.slick-active{opacity:1;} .main_dining button.slick-arrow{font-size:0; border:0; width:30px; height:15px; position: absolute; bottom:0; opacity:0.7;} .main_dining button.slick-prev.slick-arrow{left:20%; background:url(../images/ico/ico_arrow02.png) no-repeat; transform:rotate(-180deg); background-size:cover;} .main_dining button.slick-next.slick-arrow{right:20%; background:url(../images/ico/ico_arrow02.png) no-repeat; background-size:cover;} .main_dining button.slick-arrow:focus{border:0;} .main_dining ul.slick-dots{display:flex; justify-content:center;} .main_dining ul.slick-dots li{margin:0 2px 3px; padding-bottom:3px; display:flex;; align-items:center;} .main_dining ul.slick-dots li button{font-size:0; width:20px; height:2px; background-color:#ded3c8; border:0;} .main_dining ul.slick-dots li.slick-active button{background-color:#a7835f;} .dining_text{text-align:center; padding:20px 0 0; margin-bottom:20px} .dining_text h5{ font-size:15px;} .dining_text p{font-size:19px; margin:5px 0;} .dining_text span{margin:0 0 10px; font-size:14px;} .dining_text div.hr_box{width:25px; height:2px; background-color:#ded3c8; margin:25px auto} .dining_text a{font-size:13px; display:block; margin:10px 0} .dining_txt a.more_btn{margin:20px 0; } .facility_05 .breakfast_txt{width:90%; font-size:13px;} /* section04 */ .section04 > .txt{padding:0 20px } .section04 > .txt > p{font-size:14px} .section04 > .txt > h3{font-size:24px; margin:5px 0 30px;} .section04 .section04_img{height:50vh; background-image:url('https://gonylab11.speedgabia.com/thegray/m/exterior/2.jpg');} /* footer */ /* .min_footer{margin-top:-30px} */ #footer{padding:0 0 90px} .ft_in > div h5 img{width:170px; margin-top: 30px;} .waves{height:4vh} .ft_in{width:90%;} .ft_in .ft_lt .add{margin-top:60px; padding-top:20px; margin-bottom:0;} .ft_in .ft_lt .add ul li{font-size:12px} .ft_in .ft_lt .add ul li.copy a{font-size:11px} #footer .tbn{ height:40px;} .tel_btn{ position:fixed; left:15px; top:26px; z-index:99; displaY:flex} .tel_btn div { margin-right: 10px; } .tel_btn.active{display:block;} .tel_btn a{display:inline-block; background-color:#bb9a79; border-radius:50%; padding:10px; width:40px; height:40px; display:flex; align-items:center; } .tel_btn a img{width:100%;} .tel_btn .t_n_reserve{margin-left:5px} .tel_btn .t_n_reserve a{background-color:#00c14f} /* ABOUT */ .sub_title{margin:15vh auto 40px;} #about #visual{height:60vh; min-height:60vh} #visual .InBox .ttls{width:100%; text-align:center; left:0; height:auto; } #visual .InBox .ttls div{display:none} #visual .InBox .ttls span{font-size:14px} #visual .InBox .ttls strong{font-size:32px; margin: 15px} #about .notices h3{font-size:24px; margin-top:40px;} #about .notices .about_vid{margin-top: 100px;width: 100%;height:244px;} .summary_wrap{flex-wrap:wrap; margin-top:0; flex-direction:column-reverse; margin:5vh 0 0} .summary_wrap > div.summary_img{width:90%; height:60vh; margin-left:5%; background:url(https://gonylab11.speedgabia.com/thegray/m/about.jpg) no-repeat ;background-size: 100% auto;} .summary_wrap > div.summary_txt{padding:0; width:90%; margin:0 auto 50px;} .summary_wrap > div.summary_txt h4{font-size:19px; margin-bottom:10px; text-align:center;} .summary_wrap > div.summary_txt p{font-size:13px; text-align:center; width:94%; margin: 0 auto; word-break:keep-all} .summary_wrap > div.summary_txt p:last-child{margin-top:10px} .sub_title .sub_title_wrap div{display:none} .sub_title .sub_title_wrap span{font-size:12px; text-align:center; display:block; width:90%; margin:0 auto} .sub_title .sub_title_wrap strong{font-size:32px;text-align:center; margin: 10px 0} #about .abt_cont{flex-wrap:wrap; flex-direction:column-reverse; margin:30vh 0 -5vh; } #about .abt_cont .cont_ttl{width:100%; margin-top:10vh; padding-left:20px} #about .abt_cont .map_wrap{width:85%; margin:0 0 0 auto;transform:translateY(0) ;height:360px; margin-top:-15vh; overflow:hidden;} #about .abt_cont .map_wrap #map{height:50vh} #about .abt_cont .map_wrap #map .root_daum_roughmap{ margin: 0 auto; } #about .abt_cont .cont_ttl h4{font-size:24px;} #about .location ul{padding-top:20px;} #about .location ul li span{font-size:14px;} #about .location ul li:first-child{margin-bottom:20px} .about_menu .swiper-button-prev, .about_menu .swiper-button-next{width:40px; height:45px} .about_menu .swiper-pagination-bullet{width:5px; height:5px} .sub_title .sub_title_wrap span > br.m_view{display:block} .about_menu_box .swiper-button-prev, .about_menu_box .swiper-button-next{width:45px; height:55px;} /*room_pv */ .room_pv_title{margin-top:0} .room_pv_title{height:60vh;} /* rooms */ .room_top_img > div{height:60vh;} .room_top_img .InBox .ttls{width:100%; text-align:center; left:0; height:auto;} .room_top_img .InBox .ttls div{display:none} .room_top_img .InBox .ttls span{font-size:16px;} .room_top_img .InBox .ttls strong{margin:15px; font-size:35px} .room_info_wrap > section{flex-wrap:wrap; padding:0 5px} .room_info_wrap > section > article{width:calc(50% - 10px); margin:0 5px 20px} .room_info_wrap > section > article div.room_info_title{padding:15px 10px } .room_info_wrap > section > article div.room_info_title h4{font-size:15px; margin-bottom:5px} .room_info_wrap > section > article div.room_info_title a{font-size:13px; } .room_info_wrap > section > article div.room_info_img{height:15vh;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info{flex-direction:column;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:nth-child(2){width:100%;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child > div{margin:0 auto} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div ul.eq{width:100%; margin-top:0} .previews .section .list > div{width:90%; margin: 0 15px;} .previews .section .list > div p > br{display:none;} .previews .section .list > div p > br.m_view{display:block;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:nth-child(3){margin-bottom:0;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div{width:100%; flex-direction:column;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div{width:100%; margin-bottom:5px} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div:last-child > div{margin-top:0} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > span > span{font-size:13px;} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div b{width:70px; text-align:left} #rooms #Room_Cont02 .txt .InnerBox > p{width:90%; margin:0 auto 40px; word-break:keep-all;} #rooms #Room_Cont02 .txt .InnerBox div > ul li span.st.structure{width:100%; font-size: 10px; font-weight: bold; margin:0 auto; word-break:keep-all;} #rooms #Room_Cont02 .txt .InnerBox .icon_img{margin-top:20px;margin-bottom:-10px;} #rooms #Room_Cont02 .txt .InnerBox .icon_img img{width: 92%;} #rooms #Room_Cont03 > div > img{width:90%;} .roomSlide .swiper-pagination-bullet { width:7px; height:7px;} .roomSlide .swiper-button-prev, .roomSlide .swiper-button-next{ width:15px; height:55px} .roomSlide .swiper-horizontal>.swiper-pagination-bullets, .roomSlide .swiper-pagination-bullets.swiper-pagination-horizontal, .roomSlide .swiper-pagination-custom, .roomSlide .swiper-pagination-fraction{left:15vw; transform:translateX(0); bottom:1vh} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div.bathroom_info > b{width:70px; text-align:left} #rooms #Room_Cont02 .txt .InnerBox div > ul li.room_type_info > div > div > div:after{display:none} /* facility */ #facility .section{padding-bottom:0; margin:0 auto 3rem} .facility_title h2{left:50%; transform:translateX(-50%);} .topTitle p{width:90%; font-size:13px; line-height:21px; margin:0 auto;} .facility_top_img > div{height:60vh;} .facility_top_img .InBox .ttls{ width:100%; text-align:left;left:0;margin-top: -50px;} .facility_top_img .InBox .ttls div{display:none} .facility_top_img .InBox .ttls span{font-size:17px;} .facility_top_img .InBox .ttls strong{margin:10px 0 0; font-size:36px; text-align:left;} .dining_info_wrap > section{flex-wrap:wrap; padding:0 5px} .dining_info_wrap > section > article{width:calc(50% - 10px); margin:0 5px 20px} .dining_info_wrap > section > article div.room_info_title{padding:15px 10px } .dining_info_wrap > section > article div.room_info_title h4{font-size:15px; margin-bottom:5px} .dining_info_wrap > section > article div.room_info_title a{font-size:13px; } .dining_info_wrap > section > article div.room_info_img{height:15vh;} #facility #Facility_Cont02{width:100%;} #facility #Facility_Cont02 .ttl h2{padding:60px 0 20px} #facility #Facility_Cont02 .ttl h2 strong{font-size:25px} #facility #Facility_Cont02 .txt .InnerBox > p{text-align:left; font-size:13px; word-break:keep-all; width:90%; margin:0 auto 2rem;} /*#facility #Facility_Cont03 > div{margin-bottom:3vh} #facility #Facility_Cont03 > div > img{width:90%; max-width:100%;} */ #facility #Facility_Cont03 .facilitySlide{width:90%} .facilitySlide .room_slide_btn{display:none; top:50%; transform:translateY(-50%); z-index:9; justify-content:space-between; padding-right:0; padding:0 6px;} .facilitySlide .swiper-button-prev, .facilitySlide .swiper-button-next{ margin-top:0; width:35px; height:35px;} .facilitySlide .swiper-horizontal>.swiper-pagination-bullets, .facilitySlide .swiper-pagination-bullets.swiper-pagination-horizontal, .facilitySlide .swiper-pagination-custom, .facilitySlide .swiper-pagination-fraction{ bottom:1vh} .facilitySlide > .room_btn.m_btns{display:block; position:absolute; top:45%;} .facility_modal{height:100%; width:100%; position:fixed; z-index:999; top:0; left:0; background-color:rgba(0,0,0,0.5)} .facility_modal.on{display:block} .facility_modal > div {max-width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; padding:30px 0;} .facility_modal > div > img{max-width:100%;} .facility_modal > div > button.modal_close{width:20px; height:20px; background-image:url('../images/ico/ico_close.png'); border:0; background-color:transparent; background-size:cover; background-repeat:no-repeat;position:absolute; top:0; right:10px;} /* dining */ #dining .section{padding-bottom:0; margin:1rem auto 2rem} .dining_top_img > div{height:60vh;} .dining_top_img .InBox .ttls{ width:100%; text-align:center;left:0;} .dining_top_img .InBox .ttls div{display:none} .dining_top_img .InBox .ttls span{font-size:19px;} .dining_top_img .InBox .ttls strong{margin:15px 0 0; font-size:21px;} .dining_info_wrap > section{flex-wrap:wrap; padding:0 5px} .dining_info_wrap > section > article{width:calc(50% - 10px); margin:0 5px 20px} .dining_info_wrap > section > article div.room_info_title{padding:15px 10px } .dining_info_wrap > section > article div.room_info_title h4{font-size:15px; margin-bottom:5px} .dining_info_wrap > section > article div.room_info_title a{font-size:13px; } .dining_info_wrap > section > article div.room_info_img{height:15vh;} #dining #dining_Cont02{width:100%;} #dining #dining_Cont02 .ttl h2{padding:60px 0 20px} #dining #dining_Cont02 .ttl h2 strong{font-size:25px} #dining #dining_Cont02 .txt .InnerBox > p{width:100%; font-size:13px; word-break:keep-all; width:90%; margin:0 auto} /*#dining #dining_Cont03 > div{margin-bottom:3vh} #dining #dining_Cont03 > div > img{width:90%; max-width:100%;} */ #dining #dining_Cont03 .diningSlide{width:90%} .diningSlide .room_slide_btn{top:50%; transform:translateY(-50%); z-index:9; justify-content:space-between; padding-right:0; padding:0 6px;} .diningSlide .swiper-button-prev{ background-image:url(../images/ico_w_a.png); transform:rotate(180deg);} .diningSlide .swiper-button-next{ background-image:url(../images/ico_w_a.png)} .diningSlide .swiper-button-prev, .diningSlide .swiper-button-next{ margin-top:0; width:35px; height:35px;} .diningSlide .swiper-horizontal>.swiper-pagination-bullets, .diningSlide .swiper-pagination-bullets.swiper-pagination-horizontal, .diningSlide .swiper-pagination-custom, .diningSlide .swiper-pagination-fraction{left:1vw; transform:translateX(0); bottom:1vh} /* 프로모션 */ #promotion #visual{height:60vh; min-height:60vh; background:url('https://gonylab11.speedgabia.com/thegray/m/banner/2.jpg')} #promotion .promotion_tab_wrap{margin:5vh 0} #promotion .promotion_tab_wrap > article{width:100%; margin-bottom:40px} #promotion .promotion_tab_wrap > article a > div.promotion_title h4{font-size:17px} #promotion .promotion_tab_wrap > article a > div.promotion_title h5{margin:10px 0} /* reserve */ #reserve #visual{height:60vh; min-height:auto; background:url(http://gonylab11.speedgabia.com/thegray/m/banner/1.jpg) no-repeat 50% 50%;} .table .section .tabs{padding-top:10vh} .table .section .tabs .thumbs{width:100%} .table .section .tabs .thumbs.tab_03{padding:60px 20px} #reserve .tab_02 .r_info_01{width:100%; padding:0 15px;overflow:hidden} #reserve .tab_02 .r_info_01 .reservation_table_wrap{overflow-x:scroll} #reserve .tab_02 .r_info_02{ padding:0 15px;} #reserve .tab_02 .r_info_03{ padding:0 15px;} #reserve .tab_02 .r_info_03 .cancel_cont{width:100%; overflow:hidden;} #reserve .tab_02 .r_info_03 .cancel_cont > div{width:400px; overflow-x:scroll;} #reserve .tab_02 table{max-width:700px;} #reserve .tab_02 .r_info_04{ padding:0 15px;} .table .section .tabs .snb{width:100%} #reserve .tab_02 h2{width:100%; text-align:center;} #reserve .tab_02 h2 img{max-width:65%; height:auto} a.glink.gt-current-lang{width:100%:} .table .section .tabs .thumbs iframe{width:100%;} .table .section .tabs .snb{padding:0;} .table .section .tabs .snb > li{padding:0; width:calc(100% / 3)} .table .section .tabs .snb > div{padding:0; width:calc(100% / 3)} .table .section .tabs .snb{display:none;} .table .section .tabs .snb_m{display:flex; width:100%;} .table .section .tabs .snb_m li{padding:0; width:calc(100% / 3); background:url(../images/pv_b.gif) no-repeat right center;} .table .section .tabs .snb_m li a{display:block; padding:15px 0; text-align:center; font-size:15px;} } @media(max-width:350px){ nav.gnb > article.logo{width:50px; } .all_menu_m > div.m_gnb_menu > h1{font-size:15px;} .gnb_menu > ul > li.all_menu_btn{width:18px;} .gnb_menu > ul > li.all_menu_btn > span{height:2px;} .gnb_menu > ul > li.all_menu_btn > span:nth-child(2){margin:3px 0;} .tel_btn{lefT:15px; top:15px;} .tel_btn a{width:35px; height:35px;} .tel_btn div { margin-right: 10px; } ul.investment__tab li > div.contents{font-size:19px} .active .drop__div > ul > li > div > p{font-size:10px} .active .drop__div > ul > li > div > a{font-size:10px} /* .main_visual_wrap{max-height:45vh;} */ #index #lists{margin-top:5vh} #index #lists p{font-size:13px;} #index #lists h3{font-size:21px} aside.bottom_reserve a{width:60px; padding:10px} }