@CHARSET "UTF-8"; @import url("reset.css"); @import url("fullpage.css"); @import url("swiper.css"); /*------------------------------------------------------------------------------------------------*/ /* images */ #index #Videos #MyVideo {background-image:url(http://gonylab7.speedgabia.com/gaeverland/thumbnail/main.jpg);} #travel #Banner {background-image:url(http://gonylab7.speedgabia.com/gaeverland/banner/1.jpg);} #reserve #Banner {background-image:url(http://gonylab7.speedgabia.com/gaeverland/banner/2.jpg);} /*------------------------------------------------------------------------------------------------*/ /* Common */ /*------------------------------------------------------------------------------------------------*/ /* Common */ section {width:100%;height:100%;} section,.section {position:relative;width:100%;} section #scroll {position:fixed;bottom:0;left:50%;margin-left:-64px;z-index:100;} /* video */ #Videos {height:100%;overflow:hidden;} #Videos .MyFrame {position:relative;width:100%;height:100%;overflow:hidden;} #Videos .MyFrame:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";display:block;z-index:1;} #Videos .MyFrame #MyVideo {position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);background-repeat:no-repeat;background-position:50% 50%;} #Videos .MyFrame #MyVideo {min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;background-size:cover;} /* Banner */ #Banner {position:relative;width:100%;height:55vh;min-height:450px;overflow:hidden;} #Banner {background-repeat:no-repeat;background-position:50% 50%;background-size:cover;} #Banner:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";display:block;z-index:1;background:#000;opacity:0.5;} #Banner h2 {position:absolute;top:50%;left:50%;margin:-75px 0 0 -320px;z-index:10;} /* Swipers */ .Swipers {width:100%;height:100%;overflow:hidden;} .Swipers .swiper-view {width:100%;height:100%;} .Swipers .InBox {width:100%;height:100%;} .Swipers .swiper-container {height:100%;} .Swipers .swiper-slide > div {width:100%;height:100%;} .Swipers .swiper-slide > div {background-position:50% 50%;background-repeat:no-repeat;background-size:cover;} .Swipers .swiper-btn {position:absolute;top:50%;width:54px;height:100px;margin-top:-50px;z-index:10;cursor:pointer;} .Swipers .swiper-btn {background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0.85;transition:0.5s;} .Swipers .swiper-pagination {bottom:3%;left:0%;width:100%;} .Swipers .swiper-button-prev {background-image:url(../images/prev.png);left:5%;} .Swipers .swiper-button-next {background-image:url(../images/next.png);right:5%;} .Swipers .swiper-pagination-bullet {width:22px;height:22px;display:inline-block;} .Swipers .swiper-pagination-bullet {background:url(../images/off.png) no-repeat left top;} .Swipers .swiper-pagination-bullet {transition: transform 0.3s ease;} .Swipers .swiper-pagination-bullet-active {background:url(../images/on.png) no-repeat left top;} .Swipers .swiper-btn:hover {opacity:1;} /* fullpage */ #fullpage .img {position:relative;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;} #fp-arrow a {position:fixed;display:block;width:85px;height:50px;z-index:100;} #fp-arrow a.fp-prev {top:calc(5% + 77px);right:2%;background:url(../images/top.png) no-repeat left top;display:none;} #fp-arrow a.fp-next {bottom:calc(5% + 77px);right:2%;background:url(../images/bottom.png) no-repeat left top;} #fp-nav.fp-right {right:calc(2% + 31.5px);} #fp-nav ul li {margin:15px 7px;} #fp-nav ul li a {width:22px;height:22px;} #fp-nav ul li a {background:url(../images/off.png) no-repeat left top;} #fp-nav ul li a.active {background:url(../images/on.png) no-repeat left top;} #fp-nav ul li a span {background:none;} /* Header */ header {position:fixed;top:0;left:0;width:100%;min-width:1000px;height:80px;z-index:1000;background:#fff;border-bottom:1px solid #ccc;} header hgroup {position:absolute;top:0;left:0;width:40%;height:100%;overflow:hidden;z-index:1;} #logo {width:100%;position:absolute;top:0;left:0;} #logo a {display:block;height:80px;text-align:center;} #logo a {position:absolute;left:0;} nav {position:absolute;top:0;right:0;width:50%;height:100%;z-index:1;} nav > ul {position:absolute;width:calc(100% - 80px);top:0;right:0; display:flex;} nav > ul > li {position:relative;;float:left;width:20%;background:url(../images/line.png) no-repeat right 50%;} nav > ul > li:last-of-type {background:none;} nav > ul > li.snsWrpa{display:flex; align-items:center;} nav > ul > li.snsWrpa > a{padding:0 25px;} nav > ul > li > a {display:block;text-align:center;padding:30px 25px;} nav > ul > li > a span {letter-spacing:1px;font-size:15px;height:15px;text-align:center;} nav > ul > li > a span.en {display:block;} nav > ul > li > a span.kr {display:none;} nav > ul > li > a:hover span.en {display:none;} nav > ul > li > a:hover span.kr {display:block;transition:0.5s;} nav > ul > li ul {position:absolute;width:200px;height:0;top:100px;left:50%;margin-left:-100px;overflow:hidden;} nav > ul > li ul li {width:100%;height:50px;background:url(../images/gnb_02.png) no-repeat;margin:2px 0;border-bottom:1px solid #e8e8e8;} nav > ul > li ul li:first-of-type {background:url(../images/gnb_01.png) no-repeat;height:60px;} nav > ul > li ul li:first-of-type a {padding:28px 0;} nav > ul > li ul li a {display:block;text-align:center;padding:17px 0;} nav > ul > li ul li a span {color:#000;font-size:15px;} nav > ul > li ul li a:hover span {color:#5596f0;font-weight:600;} nav .resv {position:absolute;top:0;right:0;width:80px;height:80px;} nav .resv:hover a {opacity:0.75;transition:0.5s;} /* Feader */ footer {background:#282728;position:relative;width:100%;height:100%;border-top:5px solid #778caa;overflow:hidden;z-index:200;} footer .inner {max-width:1400px;min-width:1000px;padding:60px 0;margin:0 auto;overflow:hidden;} footer .inner > div {float:left;} footer .inner > div h5 {width:297px;margin:0 auto;} footer .inner > div strong {display:block;font-size:18px;margin-bottom:20px;color:#9da8bb;} footer .inner > div ul {overflow:hidden;} footer .inner > div.ft01 {width:40%;} footer .inner > div.ft02 {width:35%;} footer .inner > div.ft03 {width:25%;} footer .inner > div.ft02 ul li {line-height:1.7;color:#e8e8e8;font-size:15px;} footer .inner > div.ft03 ul {width:210px;} footer .inner > div.ft03 ul li {float:left;width:calc(33.33% - 10px);margin-right:10px;} footer .inner > div.ft03 ul a {border:1px solid #fff;padding:17.5px 0;transition:0.3s;} footer .inner > div.ft03 ul a img {display:block;width:19px;margin:0 auto;} footer .inner > div.ft03 ul a:hover {opacity:0.5;} footer .inner > div.ft03 > a {margin-top:35px;color:#e8e8e8;} footer .top {position:absolute;top:0;right:0;z-index:100;} header a,footer a {display:block;} /*------------------------------------------------------------------------------------------------*/ /* Index */ #index header {top:-80px;transition:0.6s;} #index .Gallery {height:100%;} #index .Gallery ul {position:relative;width:100%;height:100%;overflow:hidden;} #index .Gallery ul li {float:left;width:33.33%;height:100%;min-height:550px;} #index .Gallery ul li a {display:block;position:relative;width:100%;height:100%;overflow:hidden;} #index .Gallery ul li a .img::before {content:"";z-index:1;overflow:hidden;opacity:0.5;background:#000;transition:0.45s;} #index .Gallery ul li a .img::before {position:absolute;display:block;top:0;left:0;width:100%;height:100%;} #index .Gallery ul li a .title {width:100%;position:absolute;top:50%;z-index:10;color:#fff;} #index .Gallery ul li a .title strong {display:block;font-size:35px;text-align:center;font-weight:bold;letter-spacing:0.35rem;} #index .Gallery ul li a .title span {display:block;text-align:center;font-size:21px;line-height:4.5rem;} #index .Gallery ul li a .img {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden} #index .Gallery ul li a .img > div {position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1);transition:0.5s;} #index .Gallery ul li:first-of-type a .img > div {background:url(http://gonylab7.speedgabia.com/gaeverland/main/0/1.jpg) no-repeat 50% 50%;background-size:cover;} #index .Gallery ul li:nth-of-type(2) a .img > div {background:url(http://gonylab7.speedgabia.com/gaeverland/main/0/2.jpg) no-repeat 50% 50%;background-size:cover;} #index .Gallery ul li:last-of-type a .img > div {background:url(http://gonylab7.speedgabia.com/gaeverland/main/0/3.jpg) no-repeat 50% 50%;background-size:cover;} #index .Gallery ul li a:hover .img::before {opacity:0;} #index .Gallery ul li a:hover .img > div {transform:scale(1.05);transition:0.5s;} #index .Vimeos {position:relative;width:100%;height:100%;} #index .Vimeos iframe {position:absolute;top:15%;left:15%;width:70%;height:80%;display:block;} #index .Vimeos {background:url(../images/vid_bg.jpg) no-repeat 50% 50%;background-size:cover;} #index .bg_idx {position:absolute;width:320px;height:270px;bottom:0;left:0;z-index:1000;} #index .bg_ttl {position:absolute;width:880px;height:150px;bottom:10%;left:6%;z-index:1000;} /*------------------------------------------------------------------------------------------------*/ /* Video */ #video .frame iframe {width:100%;height:80vh;min-height:562px;} /*------------------------------------------------------------------------------------------------*/ /* about */ #about .container {width:100%;height:100%;position:relative;overflow:hidden;} #about .visual {background:url(http://gonylab7.speedgabia.com/gaeverland/exterior/1.jpg) no-repeat 50% 50%;} #about .visual {position:relative;width:100%;height:80vh;background-size:cover;} #about .title {position:absolute;width:550px;top:50%;left:50%;margin:-45px 0 0 -270px;} #about .title img {display:block;transition:1.2s;opacity:0;transform:translateY(75px);} #about .contents {max-width:1400px;min-width:1000px;margin:150px auto;} #about .contents .Swipers {position:relative;width:100%;height:auto;min-height:auto;} #about .contents .Swipers .InBox {height:80vh;min-height:562px;margin-bottom:3.5%;} #about .contents .location {width:1000px;margin:0 auto 5%;padding-top:10%;} #about .contents .location h4 {width:300px;margin:0 auto 50px;padding:20px 0;border-top:1px solid #b3b3b3;border-bottom:1px solid #b3b3b3;} #about .contents .location h4 {text-align:center;font-size:18px;} #about .contents .location p {width:800px;line-height:1.5;margin:0 auto 45px;text-align:center;overflow:hidden;} #about .contents .location p span {display:block;width:48%;margin:0 1%;float:left;} /*------------------------------------------------------------------------------------------------*/ /* travel */ #travel .contents .frame {width:100%;margin-top:5%;} #travel .contents .frame ul {overflow:hidden;} #travel .contents .frame li {float:left;width:calc(50% - 2px);margin:0 1px 3%;} #travel .contents .frame li div {width:100%;overflow:hidden;} #travel .contents .frame li div.img img {display:block;transform: scale(1);transition: 0.5s;} #travel .contents .frame li div.txt {padding:5%;width:90%;text-align:left;} #travel .contents .frame li div.txt h4 span {font-size:17px;color:#787878;display:inline-block;} #travel .contents .frame li div.txt h4 strong {font-size:35px;display:block;margin:10px 0;display:inline-block;} #travel .contents .frame li div.txt > span {line-height:1.5;font-size:15px;color:#787878;padding:15px 0 5%;min-height:130px;display:block;} /*------------------------------------------------------------------------------------------------*/ /* rooms_pv */ #rooms_pv {width:100%;} #rooms_pv .InBox {max-width:1400px;min-width:1000px;margin:0 auto;} #rooms_pv .InBox > h3 {width:500px;margin:0 auto;padding-top:150px;} #rooms_pv .InBox > h3 span {display:block;font-size:21px;text-align:center;padding-bottom:50px;} #rooms_pv .InBox > h3 strong {display:block;font-size:31px;font-weight:600;text-align:center;letter-spacing:0.75rem;} #rooms_pv .lists {padding-top:15%;overflow:hidden;} #rooms_pv .lists > div {position:relative;width:100%;height:50vh;min-height:450px;margin:1%;padding:15% 0;overflow:hidden;} #rooms_pv .lists > div > .img {position:relative;width:48%;height:100%;overflow:hidden;float:left;margin:0 1%;z-index:5;} #rooms_pv .lists > div > .img img {position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1);transition:1.5s;} #rooms_pv .lists > div > .btn {position:absolute;top:0;left:17%;width:600px;height:600px;border-radius:50%;z-index:1;} #rooms_pv .lists > div > .btn {background:url(../images/shape_02.png) no-repeat 50% 50%;background-size:cover;} #rooms_pv .lists > div:nth-of-type(1) > .btn {background:url(../images/shape_01.png) no-repeat 50% 50%;background-size:cover;} #rooms_pv .lists > div:nth-of-type(5) > .btn {background:url(../images/shape_03.png) no-repeat 50% 50%;background-size:cover;} #rooms_pv .lists > div > .btn > a {position:absolute;top:50%;left:50%;margin:-90px 0 0 -175px;transform:translateY(10%);transition:1.5s;opacity:1;} #rooms_pv .lists > div > .btn > a {display:block;width:350px;height:180px;text-align:center;color:#fff;} #rooms_pv .lists > div > .btn > a > h3 {position:absolute;bottom:123%;left:5%} #rooms_pv .lists > div > .btn > a > h3 img {display: inline-block;} #rooms_pv .lists > div > .btn > a > h3 span {display:block;font-size:27px;text-align:center;margin-bottom:20px;} #rooms_pv .lists > div > .btn > a > h3 strong {display:block;font-size:50px;text-align:center;} #rooms_pv .lists > div > .img::before {content:"";position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.45;z-index:1;background:#000;transition:1.5s;} #rooms_pv .lists > div> .img:hover img {transform: scale(1.05);;} #rooms_pv .lists > div> .img:hover::before {opacity:0;transition:1.5s} /*------------------------------------------------------------------------------------------------*/ /* rooms */ #rooms #scroll {display:none;} #rooms .btn_info {position:absolute;bottom:0;width:320px;height:270px;z-index:10;transition:0.7s;} #rooms .btn_info {background:url(../images/bg_idx.png) no-repeat;background-size:cover;} #rooms .btn_info h2 {width:100%;margin:90px 0 30px 50px;text-shadow:1px 1px 1px #585858;} #rooms .btn_info h2 strong {display:block;font-size:25px;color:#fff;margin-bottom:10px;} #rooms .btn_info h2 span {display:block;font-size:60px;padding-left:50px;color:#fff;} #rooms .btn_info a {display:block;width:100px;height:80px;margin:0 auto;} #rooms .room_info {position:fixed;top:0;left:0;width:30%;min-width:500px;height:100%;background-color:#c87767;z-index:10;} #rooms .room_info {transition:0.6s;height:100%;overflow-y:auto;transform:translateX(calc(-100% - 70px));} #rooms .room_info .InBox {width:85%;margin:0 auto;position:relative;top:25%;padding-bottom:25%;color:#fff;} #rooms .room_info .InBox h3 span {display:block;font-size:25px;margin-bottom:10px;} #rooms .room_info .InBox h3 b {display:block;font-size:60px;margin-left:5%;} #rooms .room_info .InBox h4 {font-size:20px;padding-top: 50px;} #rooms .room_info .InBox h4 b {display:inline-block;font-size:15px;padding-left:15px;} #rooms .room_info .InBox ul {width:100%;color:#fff;line-height:1.5;font-size:15px;padding-top:30px;} #rooms .room_info .InBox ul:nth-of-type(1) li {width:100%;margin-bottom:5px;overflow:hidden;} #rooms .room_info .InBox ul:nth-of-type(1) li span {display:block;float:left;} #rooms .room_info .InBox ul:nth-of-type(1) li span.tl {width:70px;height:16px;} #rooms .room_info .InBox ul:nth-of-type(1) li span.tx {width:100px;} #rooms .room_info .InBox ul:nth-of-type(2) {overflow:hidden;} #rooms .room_info .InBox ul:nth-of-type(2) li {float:left;margin-left:5px;font-size:14px;} #rooms .room_info .close {position:absolute;width:52px;height:80px;top:90px;right:20px;z-index:6;} .room_01 .btn_info {background:url(../images/bg_info.png) no-repeat!important;background-size:cover;} .room_01 .room_info {background:#778caa!important;} .room_05 .btn_info {background:url(../images/bg_room.png) no-repeat!important;background-size:cover;} .room_05 .room_info {background:#c79d3b!important;} /*------------------------------------------------------------------------------------------------*/ /* special */ #special section {background-color:#ececec;padding:10% 0 0;overflow:hidden;} #special .contents {max-width:1400px;margin:0 auto;padding:5% 0 10% 0;} #special .contents h3 {text-align:center;} #special .contents h3 div {display:inline-block;width:70px;position:relative;top:-8px;height:1px;border-top:1px solid #222;} #special .contents h3 strong {display:block;font-size:40px;margin-top:50px;font-weight:600;letter-spacing:0.75rem;} #special .contents h3 span {display:inline-block;width:150px;margin:0 auto;padding:0 40px;font-size:25px;font-weight:500;} #special .contents p {display:block;text-align:center;margin:50px 0 100px; line-height:1.75;} #special .Swipers {max-width:100%!important;overflow:hidden;z-index:2;} #special .Swipers .swiper-view {max-width:1400px;margin:0 auto;} #special .Swipers .swiper-view .InBox {height:85vh;min-height:560px;} #special .shape {width:800px;height:800px;position:absolute;z-index:1;} #special .shape:nth-of-type(2) {top:-7%;right:-42%;} #special .shape:last-of-type {bottom:-24%;left:-42%;} /*------------------------------------------------------------------------------------------------*/ /* Tables */ .tables .contents .InnerBox {max-width:1400px;min-width:1000px;padding:3% 0 7%;margin:0 auto;} .tables .contents .snb {width:500px;margin:0 auto;padding:15px 0;margin-bottom:5%;overflow:hidden;} .tables .contents .snb {border:1px solid #e8e8e8;border-right:none;border-left:none;} .tables .contents .snb li {float:left;width:50%;background:url(../images/pv_b.gif) no-repeat right center;} .tables .contents .snb li:last-child {background:none;} .tables .contents .snb li a {display:block;padding:15px 0;text-align:center;font-size:17px;} .tables .contents .snb li.active a {font-weight:bold;} .tables .contents .frame {position:relative;max-width:1300px;min-width:800px;margin:0 auto;} .tables .contents .frame h3 {width:98%;margin:0 auto;font-size:35px;} .tables .contents .frame h3 strong {display:block;} .tables .contents .frame h3 span {display:block;font-size:15px;padding:15px 0;} .tables .contents .frame p {width:800px;margin:0 auto 5%;overflow:hidden;} .tables .contents .frame p span {display:block;line-height:1.5;font-size:16px;float:left;width:50%;text-align:center;} .tables .contents .frame iframe {display:block;margin-top:10px;padding-top:10px;border-top:1px solid #000;} /*------------------------------------------------------------------------------------------------*/ /* Reserve */ #reserve .frame_02 {display:none;} #reserve .frame_02 h2 {width:250px;margin:0 auto;padding:0px 0 35px;} #reserve .frame_02 table {width:100%;border:1px solid #e7e7e7;font-family:'돋움',Dotum!important;} #reserve .frame_02 table tr th, #reserve .frame_02 table tr td {border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;text-align:center;font-size:13px;color:#676767;} #reserve .frame_02 > div > h3 {margin-bottom:10px;} #reserve .frame_02 ul li {padding-left:10px;font-size:12px;line-height:1.6em;color:#676767;font-family:'돋움',Dotum!important;} #reserve .frame_02 ul li {background:url(http://gonylab2.speedgabia.com/common/li_b.gif) no-repeat left 3px;} #reserve .frame_02 ul li span {color:#ee3939;} #reserve .frame_02 .r_info_01 {position:relative;margin-bottom:30px;} #reserve .frame_02 .r_info_01 h4 {text-align:left;margin-bottom:10px;} #reserve .frame_02 .r_info_01 table {margin-bottom:20px;} #reserve .frame_02 .r_info_01 table .room_ {background:#efefef;height:50px;} #reserve .frame_02 .r_info_01 table > thead {line-height:1.1em;background:#f8f8f8;} #reserve .frame_02 .r_info_01 table > thead tr th {font-weight:bold;} #reserve .frame_02 .r_info_01 table > tbody tr td {line-height:3em;} #reserve .frame_02 .r_info_02 {margin:50px 0;padding-top:50px;text-align:left;} #reserve .frame_02 .r_info_03 {text-align:left;} #reserve .frame_02 .r_info_03 .CNCL_COMM {margin-bottom:50px;} #reserve .frame_02 .r_info_03 table {line-height:1.5em;margin-top:20px;} #reserve .frame_02 .r_info_03 table > thead {background:#f2f2f2;} @media screen and (max-width: 1400px) { header hgroup {width:350px;} header hgroup img {padding-top:15px;width:100%;height:auto;} header nav > ul {right:1%;} header nav > ul > li:nth-of-type(2) {width:15%;} header nav > ul > li:nth-of-type(3) {width:17%;} header nav > ul > li:last-of-type {width:23%;} header nav > ul > li > a {padding:30px 0;} header nav > ul > li a span {font-size:13px;} #rooms_pv .lists .btn {width:450px!important;height: 450px!important;} #rooms_pv .lists .btn a h3 {left:15%!important;bottom:108%!important;} #rooms_pv .lists .btn a h3 span {font-size:17px!important;} #rooms_pv .lists .btn a h3 strong {font-size:25px!important;} }