@CHARSET "UTF-8"; /*------------------------------------------------------------------------------------------------*/ /* Images */ #index #section02 .s01 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/1/1.jpg) no-repeat 50% 50%;background-size:cover;} #index #section02 .s02 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/4/1.jpg) no-repeat 50% 50%;background-size:cover;} #index #section02 .s03 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/3/1.jpg) no-repeat 50% 50%;background-size:cover;} #index #section03 .s01 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/2/1.jpg) no-repeat 50% 50%;background-size:cover;} #index #section03 .s02 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/5/1.jpg) no-repeat 50% 50%;background-size:cover;} #index #section03 .s03 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/6/1.jpg) no-repeat 50% 50%;background-size:cover;} #index #section03 .s04 a div {background:url(https://gonylab8.speedgabia.com/grandocean/special/8/1.jpg) no-repeat 50% 50%;background-size:cover;} #location .banner {background:url(https://gonylab8.speedgabia.com/grandocean/banner/1.jpg) no-repeat 50% 50%;background-size:cover;} #travel .banner {background:url(https://gonylab8.speedgabia.com/grandocean/banner/2.jpg) no-repeat 50% 50%;background-size:cover;} #videos .banner {background:url(https://gonylab8.speedgabia.com/grandocean/banner/3.jpg) no-repeat 50% 50%;background-size:cover;} #community .banner {background:url(https://gonylab8.speedgabia.com/grandocean/banner/4.jpg) no-repeat 50% 50%;background-size:cover;} #reserve .banner {background:url(https://gonylab8.speedgabia.com/grandocean/banner/5.jpg) no-repeat 50% 50%;background-size:cover;} /*------------------------------------------------------------------------------------------------*/ /* Common */ section {position:relative;width:100%;height:100%;overflow:hidden;} section #scroll {position:fixed;bottom:0;left:50%;margin-left:-75px;z-index:100;} /* MyFrame */ .MyFrame {position:relative;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;} .bg {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} /* Slide */ .slide {position:relative;width:100%;height:100vh;overflow:hidden;min-width:1000px;min-height:562px;} .slide_show {position:relative;width:100%;height:100%;} .slide_show > li {position:absolute;top:0;left:0;width:100%;height:100%;min-height:562px;overflow:hidden;} .slide_show > li > div {width:100%;height:100%;transform: scale(1);transition:2s;} .slide_show > li.active {z-index:100!important;} .slide_show > li.active > div {transform: scale(1.03);transition:2s;} .slide .nav div {position:absolute;top:50%;margin-top:-99px;width:197px;height:198px;z-index:350;} .slide .nav div.prev {background:url(../images/prev_bg.png) no-repeat left top;left:2%;} .slide .nav div.next {background:url(../images/next_bg.png) no-repeat left top;right:2%;} .slide .nav div a {position:absolute;left:50%;top:50%;width:80px;height:40px;margin:-20px 0 0 -40px;} .slide .nav > ul {position:absolute;right:5%;bottom:50px;z-index:350;} .slide .nav > ul li {float:left;width:20px;} .slide .nav > ul li a {width:20px;height:20px;display:block;margin:0 auto;} .slide .nav > ul li a {background:url(../images/off.png) no-repeat 0 0;} .slide .nav > ul li a.active {background:url(../images/on.png) no-repeat 0 0;} /* Header */ header {position:fixed;top:0;left:0;width:100%;min-width:1000px;z-index:1000;} header hgroup {float:left;width:calc(40% - 1px);min-width:399px;height:80px;overflow:hidden;} header hgroup {background:url(../images/hd_bg.png) repeat-x left top;} header hgroup h1 {float:left;padding-left:1%;} header hgroup ul {float:left;overflow:hidden;padding:19.5px 0 0 1%;} header hgroup ul li {float:left;} header hgroup ul li:first-child {margin-right:10px;} header nav {position:absolute;top:0;right:0;width:60%;min-width:600px;} header nav div {position:fixed;top:81px;left:0;width:100%;height:0;overflow:hidden;display:block;content:"";} header nav div {background:url(../images/gnb_bg.png) repeat-x left top;transition: 0.5s;opacity:0;} header nav > ul {width:100%;} header nav > ul > li {position:relative;float:left;width:calc(20% - 1px);margin-right:1px;} header nav > ul > li:last-child {width:20%;margin:0;} header nav > ul > li > a {background:url(../images/hd_bg.png) repeat-x left top;} header nav > ul > li > a {padding:31.5px 0;text-align:center;font-size:17px;} header nav > ul > li > a span {display:none;} header nav > ul > li > a span.en {display:block;} header nav > ul > li > ul {position:absolute;top:80px;left:50%;height:0;overflow:hidden;opacity:0;transition:0.5s;z-index:1;} header nav > ul > li:nth-of-type(1) > ul {width:450px;margin-left:-225px;} header nav > ul > li:nth-of-type(2) > ul {width:600px;margin-left:-300px;} header nav > ul > li:nth-of-type(3) > ul {width:600px;margin-left:-300px;} header nav > ul > li:nth-of-type(4) > ul {width:200px;margin-left:-100px;} header nav > ul > li:nth-of-type(5) > ul {width:200px;margin-left:-100px;} header nav > ul > li > ul > li {float:left;} header nav > ul > li > ul > li a {padding:24.5px 15px;font-size:16px;} header nav > ul > li:nth-of-type(3) > ul > li a {padding:24.5px 10px;} header nav > ul > li:hover > a {background:url(../images/hd_bg_on.png) repeat-x left top;} header nav > ul > li:hover > a span {color:#565f70;display:none;} header nav > ul > li:hover > a span.ko {display:block;} header nav > ul > li ul > li a:hover {color:#565f70;} /* Feader */ footer {position:relative;background:#f8f8f8;width:100%;min-width:1000px;height:100%;overflow:hidden;} footer .inner > div {float:left;color:#7b7b7b;} footer .inner > div.ft01 {width:33%;margin-right:2%;} footer .inner > div.ft01 span {display:block;font-size:17px;font-weight:bold;} footer .inner > div.ft01 ul {width:105px;margin-top:20px;overflow:hidden;} footer .inner > div.ft01 ul li {float:left;width:33.33%;} footer .inner > div.ft01 ul li a {width:27px;margin:0 auto;} footer .inner > div.ft02 {width:65%;} footer .inner > div.ft02 address {display:block;text-align:right;} footer .inner > div.ft02 span {display:block;font-size:16px;line-height:1.7;} footer .inner {max-width:1400px;min-width:1000px;padding:60px 0;margin:0 auto;overflow:hidden;} header a,footer a {display:block;} @media screen and (max-width: 1200px) { header nav > ul > li > a {font-size:15px;padding:32.5px 0;} header nav > ul > li > ul > li a {font-size:14px;padding:25.5px 10px;} header nav > ul > li:nth-of-type(1) > ul {width:260px;margin-left:-130px;} header nav > ul > li:nth-of-type(2) > ul {width:400px;margin-left:-200px;} footer .inner > div.ft01 span {font-size:15px;} footer .inner > div.ft02 span {font-size:13px;} } /*------------------------------------------------------------------------------------------------*/ /* Index */ #index #video h2 {position:absolute;top:50%;left:50%;margin:-75px 0 0 -400px;z-index:10;} #index .special ul {width:100%;height:100vh;overflow:hidden;} #index .special ul li {width:60%;height:calc(50vh - 1px);border-bottom:1px solid #fff;} #index .special ul li a {position:relative;width:100%;height:100%;display:block;overflow:hidden;} #index .special ul li a div {position:absolute;width:100%;height:100%;top:0;left:0;transition: 0.5s;transform: scale(1.01);} #index .special ul li a div:before {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;transition: 0.5s;background:#000;content:"";} #index .special ul li a span {position:absolute;top:calc(50% - 15px);left:0;text-align:center;font-size:30px;width:100%;z-index:1;} #index .special ul li a span {letter-spacing:1px;color:#fff;display:block;transition: 0.5s;transform: scale(1);z-index:1;} #index #section02 ul li {float:left;} #index #section03 ul li {float:right;} #index #section02 ul li:nth-of-type(2) {float:none;float:right;width:calc(40% - 1px);height:calc(100% - 1px);border-left:1px solid #fff;} #index #section03 ul li:nth-of-type(2) {float:none;float:left;width:calc(40% - 1px);height:calc(100% - 1px);border-right:1px solid #fff;} /*#index #section03 ul li {float:none;float:left;width:calc(50% - 1px);height:50%;} #index #section03 ul li:nth-of-type(2n) {border-left:1px solid #fff;} */ #index .special ul li a:hover div {transform: scale(1);} #index .special ul li a:hover div:before {opacity:0.2;} #index .special ul li a:hover span {letter-spacing:2.5px;transform: scale(1.02);} /*------------------------------------------------------------------------------------------------*/ /* exterior */ #exterior #video h2 {position:absolute;top:50%;left:50%;margin:-75px 0 0 -400px;z-index:10;} /*------------------------------------------------------------------------------------------------*/ /* location */ #location #map {position:relative;width:1000px;height:532px;margin:50px auto;text-align:center;overflow:hidden;z-index:100;} #location .txt {width:1000px;margin:0 auto;padding:50px 0 150px;} #location .txt p {margin-bottom:30px;font-size:20px;line-height:1.5em;text-align:center;} #location .txt p span {font-size:16px;font-weight:bold;display:block;} /*------------------------------------------------------------------------------------------------*/ /* travel */ #travel .contents .thumbs {width:100%;margin-top:5%;} #travel .contents .thumbs ul {overflow:hidden;} #travel .contents .thumbs li {float:left;width:calc(50% - 10px);margin:0 5px 3%;} #travel .contents .thumbs li div {width:100%;overflow:hidden;} #travel .contents .thumbs li div.img img {display:block;transform: scale(1);transition: 0.5s;} #travel .contents .thumbs li div.txt {padding:5%;width:90%;text-align:left;} #travel .contents .thumbs li div.txt h4 span {font-size:17px;color:#787878;display:inline-block;} #travel .contents .thumbs li div.txt h4 strong {font-size:35px;display:block;margin:10px 0;display:inline-block;} #travel .contents .thumbs li div.txt > span {line-height:1.5;font-size:15px;color:#787878;padding:15px 0 5%;min-height:130px;display:block;} @media screen and (max-width: 1200px) { #travel .contents .thumbs li div.txt h4 span {font-size:15px;} #travel .contents .thumbs li div.txt h4 strong {font-size:30px;} #travel .contents .thumbs li div.txt > span {font-size:12px;line-height:1.4;} } /*------------------------------------------------------------------------------------------------*/ /* travel */ #videos .inBox {max-width:1200px;min-width:1000px;margin:0 auto;padding:5% 0 7.5%;} /*------------------------------------------------------------------------------------------------*/ /* preview */ .preview .section .btns {position:absolute;top:50%;left:7%;margin-top:-91px;z-index:10;} .preview .section .img {position:absolute;top:0;left:0;width:100%;height:100%;transition: 0.5s;transform: scale(1.0);} .preview .section .img div {position:absolute;top:0;left:0;width:100%;height:100%;transition: 0.5s;opacity:0.2;background:#000;} .preview .section .btns > img {display:block;} .preview .section .btns div {letter-spacing:1.5px;text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.2);} .preview .section .btns div strong {display:block;font-size:25px;padding:35px 0;color:#fff;overflow:hidden;text-align:left;} .preview .section .btns div img {display:block;} #special_pv .ttl {position:relative;width:27%;height:100%;z-index:11;} #special_pv .section:nth-of-type(1) .ttl {background:#52747d;} #special_pv .section:nth-of-type(2) .ttl {background:#a77131;} #special_pv .section:nth-of-type(3) .ttl {background:#515151;} #special_pv .section:nth-of-type(4) .ttl {background:#749d94;} #special_pv .section:nth-of-type(5) .ttl {background:#6ab0e3;} #special_pv .section:nth-of-type(6) .ttl {background:#565f70;} #special_pv .section:nth-of-type(7) .ttl {background:#52747d;} #special_pv .section:nth-of-type(8) .ttl {background:#a77131;} #special_pv .ttl .btns {left:50%;width:350px;margin-left:-175px;} #special_pv .ttl .btns img {width:150px;margin:0 auto;} #special_pv .ttl .btns div strong {display:block;text-align:center;} #special_pv .ttl .btns div > img {width:149px;} #special_pv .section .img {width:73%;position:relative;} /*------------------------------------------------------------------------------------------------*/ /* detail */ .detail .scroll {position:absolute;bottom:0;left:50%;width:150px;height:50px;margin-left:-75px;z-index:100;} .detail .scroll {background:url(../images/dt_scroll.png) no-repeat left top;} .detail .scroll a {display:block;width:100%;height:100%;} .detail #container {min-width:1000px;} .detail .contents {background:#fff;padding:7.5% 0;} .detail .info {max-width:1200px;min-width:1000px;margin:0 auto;} .detail .info .inbox {width:100%;padding-bottom:70px;} .detail .info .inbox h3 {width:100%;font-size:45px;font-weight:bold;margin-bottom:50px;line-height:1.3;} .detail .info .inbox h3 span {display:block;font-size:22px;margin-bottom:10px;} .detail .info .inbox .in {width:100%;overflow:hidden;margin-bottom:50px;} .detail .info .inbox .in > div {float:left;} .detail .info .inbox .in .img {width:50%;} .detail .info .inbox .in .txt {width:calc(50% - 50px);margin-left:50px;} .detail .info .inbox .in .txt strong {display:block;font-size:18px;padding-top:30px;margin-bottom:30px;font-weight:bold;letter-spacing:1px;} .detail .info .inbox .in .txt ul {width:calc(100% - 50px);} .detail .info .inbox .in > .txt > ul > li {background:url(../images/blt.gif) no-repeat left 10px;} .detail .info .inbox .in .txt ul li {padding-left:15px;line-height:1.8em;font-size:16px;} .detail .info .inbox .in .txt ul li ul {overflow:hidden;} .detail .info .inbox .in .txt ul li ul li {float:left;padding-left:10px;margin-right:15px;background:url(../images/blt_s.gif) no-repeat left 10px;} .detail .info .inbox .in .txt p {line-height:1.8em;font-size:16px;} .detail .info .video {max-width:1200px;min-width:1000px;margin:0 auto;overflow:hidden;} #room h2 {background:url(../images/room_ttl.png) no-repeat left top;} #room h2 {position:absolute;bottom:110px;left:5%;width:800px;z-index:150;} #room h2 span {display:block;font-size:45px;color:#fff;margin-top:65px;text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.2);} #special h2 {background:url(../images/special_ttl.png) no-repeat left top;} #special h2 {position:absolute;bottom:100px;left:5%;width:800px;height:105px;z-index:150;} #special h2 span {display:block;font-size:45px;color:#fff;margin-top:65px;text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.2);} /*------------------------------------------------------------------------------------------------*/ /* tables */ .tables .banner {position:fixed;width:100%;height:500px;z-index:50;overflow:hidden;} .tables .banner:before {position:absolute;top:0;left:0;width:100%;height:100%;background:#000;content:"";opacity:0.5;z-index:5;} .tables .banner h2 {position:absolute;top:50%;left:50%;width:800px;height:150px;margin:-25px 0 0 -400px;z-index:10;} .tables #container {position:relative;min-width:1000px;} .tables .contents {position:relative;top:500px;width:100%;background:#fff;z-index:60;} .tables .contents .tb_list {width:100%;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;} .tables .contents .tb_list > div {max-width:1200px;min-width:1000px;margin:0 auto;height:61px;overflow:hidden;} .tables .contents .tb_list > div ul {height:61px;overflow:hidden;float:left;} .tables .contents .tb_list > div ul li {float:left;} .tables .contents .tb_list > div ul li a {display:block;} .tables .contents .tb_list > div ul.dm_list li.t_btn a {font-size:15px;font-weight:bold;width:180px;padding:23px 0 23px 20px;border-right:1px solid #e8e8e8;} .tables .contents .tb_list > div ul.dm_list li.t_btn a {background:url(../images/arrow.jpg) no-repeat right center;} .tables .contents .tb_list > div ul.dt_list {margin-left:20px;} .tables .contents .tb_list > div ul.dt_list li {background:url(../images/blt.jpg) no-repeat right center;} .tables .contents .tb_list > div ul.dt_list li a {font-size:16px;padding:23px 20px;color:#787878;} .tables .contents .tb_list > div ul.dt_list li a.active {font-weight:bold;color:#000;} .tables .contents .tb_list > div ul.dt_list li:last-child {background:none;} .tables .contents .tb_tab {max-width:1200px;min-width:1000px;height:100%;margin:75px auto;} .tables .contents .tb_tab .thumbs {position:relative;width:100%;} .tables .contents .tb_tab .tab_02 {display:none;} .tables .contents .tb_tab .tab_02 h2 {width:250px;margin:0 auto;padding:20px 0 35px;} .tables .contents .tb_tab .tab_02 table {width:100%;border:1px solid #e7e7e7;font-family:'돋움',Dotum!important;} .tables .contents .tb_tab .tab_02 table tr th {border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;} .tables .contents .tb_tab .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; } .tables .contents .tb_tab .tab_02 > div > h3 {margin-bottom:10px;} .tables .contents .tb_tab .tab_02 ul li { padding-left:10px;font-size:12px;line-height:1.6em;color:#676767;font-family:'돋움',Dotum!important; background:url(https://gonylab2.speedgabia.com/common/li_b.gif) no-repeat left 3px; } .tables .contents .tb_tab .tab_02 ul li span {color:#ee3939;} .tables .contents .tb_tab .tab_02 .r_info_01 {position:relative;margin-bottom:30px;} .tables .contents .tb_tab .tab_02 .r_info_01 h4 {text-align:left;margin-bottom:10px;} .tables .contents .tb_tab .tab_02 .r_info_01 table {margin-bottom:20px;} .tables .contents .tb_tab .tab_02 .r_info_01 table .room_ {background:#efefef;height:50px;} .tables .contents .tb_tab .tab_02 .r_info_01 table > thead {line-height:1.1em;} .tables .contents .tb_tab .tab_02 .r_info_01 table > thead {background:#f8f8f8;} .tables .contents .tb_tab .tab_02 .r_info_01 table > thead tr th {font-weight:bold;padding:5px 0;} .tables .contents .tb_tab .tab_02 .r_info_01 table > tbody tr td {line-height:3em;padding:5px 0;} .tables .contents .tb_tab .tab_02 .r_info_02 {margin:50px 0;padding-top:50px;text-align:left;} .tables .contents .tb_tab .tab_02 .r_info_03 {padding-bottom:150px;text-align:left;} .tables .contents .tb_tab .tab_02 .r_info_03 .CNCL_COMM {margin-bottom:50px;} .tables .contents .tb_tab .tab_02 .r_info_03 table {line-height:1.2em;margin-top:20px;} .tables .contents .tb_tab .tab_02 .r_info_03 table > thead {background:#f2f2f2;} .tables .contents .tb_tab .tab_02 .r_info_03 table > thead tr th {padding:5px 0;} .tables .contents .tb_tab .tab_02 .r_info_03 table > tbody tr td {padding:5px 0;} .tables footer {position:relative;top:500px;} .instagram {max-width:1200px;min-width:800px;padding:0 0 7.5%;margin:0 auto;overflow: hidden;} .instagram .feed {float:left;width:calc(25% - 10px);padding:5px;} .instagram .feed > a {display:block;width:100%;padding-top:100%;position:relative;} .instagram .feed > a {background:no-repeat center center;background-size:cover;} .instagram .feed > a:before {position:absolute;left:0;right:0;top:0;bottom:0;background:#000;z-index:1;opacity:0;content: '';} .instagram .feed > a:before {background:rgba(0, 0, 0, .8);transition:opacity .55s cubic-bezier(.215, .61, .355, 1);} .instagram .feed > a:before {background:radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .8) 100%);} .instagram .feed > a:hover:before {opacity: 0.7;} .instagram .feed > a:hover p {opacity: 1;} .instagram .feed p {width:80%;padding:0 10%;position:absolute;left:0;top:50%;font-size:15px;opacity:0;z-index:2;} .instagram .feed p {color: #fff;transform: translateY(-50%);line-height:1.3;text-align:center;} .instagram .feed p {transition:opacity .55s cubic-bezier(.215,.61,.355,1);} .instagram .feed p {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .instagram .feed span {text-align:center;font-size:20px;line-height:1.5;}