@CHARSET "UTF-8"; @import url("reset.css"); @import url("swiper.css"); @import url("https://use.typekit.net/zbj6ssz.css"); @import url("http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"); /*------------------------------------------------------------------------------------------------*/ /* Image */ header .gnb .gb01 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/1.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb02 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/2.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb03 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/3.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb04 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/4.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb05 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/5.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb06 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/6.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb07 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/7.jpg) no-repeat 50% 50%;background-size:cover;} header .gnb .gb08 div.bg {background:url(http://gonylab11.speedgabia.com/calacatta/menu/8.jpg) no-repeat 50% 50%;background-size:cover;} #index #Videos #MyVideo {background-image:url(http://gonylab11.speedgabia.com/calacatta/main/0.jpg);} .room_pv_01 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/preview.jpg) no-repeat 50% 50%;background-size:cover;} .room_pv_02 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/2/0.jpg) no-repeat 50% 50%;background-size:cover;} .room_pv_03 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/3/0.jpg) no-repeat 50% 50%;background-size:cover;} .room_pv_04 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/4/0.jpg) no-repeat 50% 50%;background-size:cover;} .room_pv_05 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/5/0.jpg) no-repeat 50% 50%;background-size:cover;} .room_pv_06 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/6/0.jpg) no-repeat 50% 50%;background-size:cover;} .room_pv_07 #Videos .MyFrame {background:url(http://gonylab11.speedgabia.com/calacatta/room/7/0.jpg) no-repeat 50% 50%;background-size:cover;} #btns_tab {position:fixed; bottom:10px; left:10px; z-index:50; width:100px;} #btns_tab .rsv_btn {width:90px; height:90px; border-radius:50%; background-color:#638a2d;} #btns_tab .rsv_btn > span {color:#fff; text-align:center; padding-top:27px; cursor:pointer;} #btns_tab .rsv_btn > span.kr {display:block; font-size:17px;} #btns_tab .rsv_btn > span.xi-close {display:none; font-size:27px;} #btns_tab .rsv_btn:hover span.kr {display:none; transition:0.5s;} #btns_tab .rsv_btn:hover span.xi-close {display:block; transition:0.5s;} #btns_tab .rsv_btn:hover .rsvs a {display:block; transition:0.5s;} #btns_tab .rsvs {position:absolute; top:-320px; left:50%; transform:translateX(-54%);} #btns_tab .rsvs a {display:none; background-color:#fff; width:70px; height:70px; border-radius:50%; margin:9px 0;} #btns_tab .rsvs a span {display:block; color:#222; font-size: 13px;} #btns_tab .rsvs a:first-of-type span {padding:21px 0px; text-align:center;} #btns_tab .rsvs a:nth-of-type(2) span {padding:21px 0px; text-align:center;} #btns_tab .rsvs a:nth-of-type(3) span {padding:21px 0px; text-align:center;} #btns_tab .rsvs a:nth-of-type(4) span{padding:21px 0px; text-align:center;} #btns_tab .rsvs a:last-of-type span {padding:21px 0px;text-align:center;} /*------------------------------------------------------------------------------------------------*/ /* Common */ body {min-width:1000px;} section {width:100%;height:100%;} section,.section {position:relative;width:100%;} #scroll {position:absolute;bottom:0;left:50%;margin-left:0;z-index:10;} /* video */ #Videos .MyFrame {position:relative;width:100%;height:100vh;min-height:562px;overflow:hidden;} #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:70vh;min-height:500px;overflow:hidden;} #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 {position:relative;width:100%;height:100%;} .Swipers .InBox {position:relative;max-width:1600px;min-width:900px;height:85vh;margin:0 auto;overflow:hidden;} .Swipers .swiper-container {height:100%;} .Swipers .swiper-slide > div {width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover; position:relative;} .Swipers .swiper-slide > div > .sw06_video{position:absolute; top:0; left:0; width:100%; height:100%; } .Swipers .swiper-slide > a.links {width:100%;height:100%;display:block;} .Swipers .swiper-slide > a.links > div {width:100%;height:100%;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;} .Swipers .swiper-pagination {width:100%;bottom:3%;} .Swipers .swiper-button-prev {background-image:url(../images/prev.png);left:3%;} .Swipers .swiper-button-next {background-image:url(../images/next.png);right:3%;} .Swipers .swiper-pagination-bullet {width:17px;height:17px;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;} #Accommodations .swiper-btn {opacity:0;transition:0.5s;margin-top:-100px;} #Accommodations .swiper-button-prev {left:0.5%;} #Accommodations .swiper-button-next {right:0.5%;} #Accommodations .swiper-container:hover .swiper-btn {opacity:1;} #Types .Swipers .swiper-button-prev {background-image:url(../images/arrow_t.png);left:1%;} #Types .Swipers .swiper-button-next {background-image:url(../images/arrow_t.png);right:1%;} #Types .Swipers .swiper-pagination-bullet {background:url(../images/pv-off.png) no-repeat left top;} #Types .Swipers .swiper-pagination-bullet-active {background:url(../images/pv-on.png) no-repeat left top;} /* Header */ /*header {position:fixed;top:0;left:0;width:100%;min-width:1000px;z-index:1000;} header hgroup {position:relative;width:100%;} header hgroup h1 {position:absolute;top:0;left:30px;} header hgroup h1 a {line-height:0} header hgroup ul {position:absolute;top:40px;right:30px;} header hgroup ul li {float:left;} header hgroup ul li:nth-child(1) {padding:5px 0;} header hgroup ul li:nth-child(2) {padding:5px 00px 0 0; } header hgroup ul li:nth-child(3) {padding:5px 0;} header hgroup ul li:nth-child(4) {padding:5px 00px 0 0; } header hgroup ul li:nth-child(5) {padding:5px 00px 0 0; margin-right: 5px;} */ .new_feel_header{ position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 1px; background: #D9D9D9;} .new_feel_header *{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Newsreader", "Noto Sans KR", sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.5px; color: #000;} .new_feel_header .logo{ position: fixed; z-index: 10; top: 0; left: 0; width: 200px;} .new_feel_header .logo a{ display: block; cursor: pointer;} .new_feel_header .logo a img{ display: block; width: 130%; margin-top: 8px; margin-left: 10px;} .new_feel_header .ft{ display: flex; justify-content: center; align-items: center; height: 60px; background: #FEBF00;} .new_feel_header .ft .menu{} .new_feel_header .ft .menu ul{ display: flex; justify-content: center; align-items: center; grid-gap: 30px;} .new_feel_header .ft .menu ul li{ position: relative;} .new_feel_header .ft .menu ul li:before{ content: ""; display: block; position: absolute; top: calc(50% - 7px); left: -16px; width: 1px; height: 10px; background: rgba(0 0 0/40%);} .new_feel_header .ft .menu ul li:first-child:before{ display: none;} .new_feel_header .ft .menu ul li a{ display: flex; align-items: center; height: 50px; cursor: pointer; transition: all .2s;} .new_feel_header .ft .menu ul li a p{ font-size: 14px; color: #000;} .new_feel_header .ft .menu ul li a:hover{ opacity: 0.5;} .new_feel_header .fb{ display: flex; justify-content: center; align-items: center; position: relative; height: 50px;} .new_feel_header .fb .menu{} .new_feel_header .fb .menu ul{ display: flex; justify-content: center; align-items: center; grid-gap: 50px;} .new_feel_header .fb .menu ul li{ position: relative;} .new_feel_header .fb .menu ul li a{ display: flex; align-items: center; height: 50px; cursor: pointer; transition: all .2s;} .new_feel_header .fb .menu ul li a p{ font-size: 15px; color: #000;} .new_feel_header .fb .menu ul li a:hover{ opacity: 0.5;} .new_feel_header .ft .btn{ display: flex; grid-gap: 10px; position: absolute; top: 10px; right: 20px;} .new_feel_header .ft .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; height: 40px; border-radius: 20px; cursor: pointer;} .new_feel_header .ft .btn a img{ display: block; height: 24px;} .new_feel_header .ft .btn a p{ font-size: 14px; color: #000; height:10px;} .new_feel_header .ft .btn a.btn_reservation{ width: 130px; background: #FEBF00;} .new_feel_header .ft .btn a.btn_full_menu{ width: 140px; background: #1E2643;} .new_feel_header .ft .btn a.btn_full_menu p{ color: #FFF; height:10px;} nav {position:fixed;top:-100%;left:0;width:100%;height:100%;min-width:1000px;overflow:hidden;z-index:7000;} nav {transition:0.7s;} nav > div {position:relative;height:100%;float:left;overflow:hidden;} nav > div.gnv {width:55%;} nav > div.gnv > div {position:relative;width:50%;height:100%;float:left;} nav > div.gnv > div.event {width: 50%; background:#e8e1d5;} nav > div.gnv > div.event h2 {position:relative;width:35%;max-width:174px;margin-left:10%;z-index:5;} nav > div.gnv > div.event div {position:relative;top:10%;width:100%;} nav > div.gnv > div.event div h3 {text-align:center;margin-bottom:3%;} nav > div.gnv > div.event div h3 strong {display:block;color:#9a825a;font-family:linotype-didot, serif;} nav > div.gnv > div.event div h3 span {display:block;color:#555555;} nav > div.gnv > div.event div ul {max-width:280px;padding:0 15px;margin:0 auto;} nav > div.gnv > div.event div ul li {width:100%;padding:6% 0;border-bottom:1px solid #e8e8e8;} nav > div.gnv > div.event div ul li:nth-of-type(2) {border:none;} nav > div.gnv > div.event div ul li a {display:block;} nav > div.gnv > div.menu {width: 50%; background:#decfba;} nav > div.gnv > div.menu > div {position:relative;top:15%;width:80%;margin:0 auto;} nav > div.gnv > div.menu > div .side {width:90%;margin:0 auto 10%;} nav > div.gnv > div.menu > div .side a {color:#fff;display:block;line-height:1.5;margin-bottom:3%;transition:0.3s;} nav > div.gnv > div.menu > div .side a:hover {color:#debd88;} nav > div.gnv > div.menu > div ul {width:90%;margin:0 auto;} nav > div.gnv > div.menu > div ul li {line-height:1.4;margin-bottom:3%;} nav > div.gnv > div.menu > div ul li a {color:#5d4837;display:block;transition:0.3s;letter-spacing:1px;} nav > div.gnv > div.menu > div ul li.on a {color:#000;} nav > div.gnv > div.menu > div ul li a:hover {color:#000;} nav > div.gnv > div.menu > div ul li a b {width: auto; font-size: 14px;} /* font-size */ nav > div.gnv > div.event div h3 strong {font-size:26px;} nav > div.gnv > div.event div h3 span {font-size:15px;} nav > div.gnv > div.menu > div .side a {font-size:18px;} nav > div.gnv > div.menu > div ul li a {font-size:26px;} nav > div.gnb {width:45%;} nav > div.gnb > div {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:0;} nav > div.gnb > div > div.nv {position:relative;width:100%;height:100%;z-index:1;} nav > div.gnb > div > div.nv > div {position:absolute;top:50%;left:10%;width:80%;transform:translateY(10%);opacity:0;} nav > div.gnb > .GnbRoom {opacity:1;z-index:10;} nav > div.gnb > .GnbRoom div.nv > div {transform:translateY(0);opacity:1;} nav > div.gnb > .GnbRoom div.nv > div h3 {color:#c19a5a;margin-bottom:6.5%;font-family:linotype-didot, serif;letter-spacing:1px;} nav > div.gnb > .GnbRoom div.nv > div > ul {width:100%;overflow:hidden;} nav > div.gnb > .GnbRoom div.nv > div > ul > li {float:left;width:100%;margin-bottom: -3%;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > a {line-height:5;margin-bottom:1%;color:#c19a5a;font-weight:bold;} nav > div.gnb > .GnbRoom div.nv > div > ul > li ul {width:98%;margin:0 auto 3%;} nav > div.gnb > .GnbRoom div.nv > div > ul > li ul li {line-height:1.5;} nav > div.gnb > .GnbRoom div.nv > div > ul > li ul li a {color:#fff;} nav > div.gnb > .GnbRoom div.nv > div > ul > li ul li a:hover {color:#afc8c3;} nav > div.gnb > .GnbRoom2 {opacity:1;z-index:10;} nav > div.gnb > .GnbRoom2 div.nv > div {transform:translateY(0);opacity:1;} nav > div.gnb > .GnbRoom2 div.nv > div h3 {color:#c19a5a;margin-bottom:6.5%;font-family:linotype-didot, serif;letter-spacing:1px;} nav > div.gnb > .GnbRoom2 div.nv > div > ul {width:100%;overflow:hidden;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li {float:left;width:50%;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li > a {line-height:1.5;margin-bottom:1%;color:#c19a5a;font-weight:bold;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li ul {width:98%;margin:0 auto 7.5%;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li ul li {line-height:1.5;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li ul li a {color:#fff;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li ul li a:hover {color:#afc8c3;} nav > div.gnb > .GnbRoom2 div.nv > div h3 {font-size:24px;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li > a {font-size:17px;} nav > div.gnb > .GnbRoom2 div.nv > div > ul > li > ul li a {font-size:15px;} nav > div.gnb > div.GnbNav > div.nv > div h3 {color:#c19a5a;margin-bottom:6.5%;font-family:linotype-didot, serif;letter-spacing:1px;} nav > div.gnb > div.GnbNav > div.nv > div > ul {width:100%;} nav > div.gnb > div.GnbNav > div.nv > div > ul > li {line-height:1.5;margin-bottom:3.5%;} nav > div.gnb > div.GnbNav > div.nv > div > ul > li a {color:#fff;display:inline-block;transition:0.2s;} nav > div.gnb > div.GnbNav > div.nv > div > ul > li a:hover {color:#afc8c3;} nav > div.gnb > div.GnbNav > div.nv > div > ul > li a b {font-size: 13px;} header .gnb > div div.bg {position:absolute;top:0;left:0;width:100%;height:100%;} header .gnb > div div.bg:before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:#20332f;opacity:0.8;display:block;} header .gnb > .close {position:absolute;top:3%;right:3%;z-index:10;} /* font-size */ nav > div.gnb > div.GnbNav div.nv > div h3 {font-size:24px;} nav > div.gnb > div.GnbNav div.nv > div ul li a {font-size:18px;} nav > div.gnb > .GnbRoom div.nv > div h3 {font-size:24px;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > a {font-size:17px;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > ul li a {font-size:18px;} nav > div.gnv > div.event div {opacity:0;transition:1s;} nav > div.gnv > div.menu > div {opacity:0;transition:1s;} nav > div.gnb > div > div.nv {opacity:0;transition:1s;} #roomsetting_txt {font-size: 20px; color: #fff; font-family: nanumbarungothicregular;} #roomsetting_txt .icon-img {width: 14px;height: 21px;margin-right: 6px;vertical-align: middle;} /* Feader */ .new_feel_footer{ position: relative; padding: 40px 0 50px 0; background: #E9E1D4;} .new_feel_footer .menu{ position: relative; z-index: 10;} .new_feel_footer .menu ul{ display: flex; justify-content: center; align-items: center; grid-gap: 30px;} .new_feel_footer .menu ul li{ position: relative;} .new_feel_footer .menu ul li a{ display: flex; align-items: center; cursor: pointer; transition: all .2s;} .new_feel_footer .menu ul li a p{ font-size: 15px; color: #000;} .new_feel_footer .menu ul li a:hover{ opacity: 0.5;} .new_feel_footer .tel{ position: relative; z-index: 10; margin-top: 130px; margin-left: 10%; font-size: 36px; color: #000;} .new_feel_footer .tel p { margin-top: 10px; font-size: 18px;} .new_feel_footer .info{ position: relative; z-index: 10; display: flow; flex-wrap: wrap; grid-gap: 10px 0; margin-top: 40px; margin-left: 10%; max-width: 540px;} .new_feel_footer .info p{ display: flex; align-items: center; grid-gap: 5px; font-size: 13px; font-family: "noto sans kr"; color: #000; letter-spacing: 0; line-height: 1.4; } .new_feel_footer .info span{ display: block; margin: 0 10px; width: 1px; height: 12px; background: rgba(0 0 0/20%)} .new_feel_footer .info p.copy{ width: 100%;} .new_feel_footer .logo{ position: absolute; right: 100px; bottom: 50px;} @media(max-width: 768px){ .new_feel_header .ft .menu{margin-top: -70px;} .new_feel_header .ft{ height: 110px;} .new_feel_header .logo a img{ margin-top: 45px;} .new_feel_header .ft .btn a.btn_full_menu{ margin-top:40px;} .new_feel_footer .menu ul{ grid-gap: 12px;} .new_feel_footer .menu ul li a p{ font-size: 18px;} .new_feel_footer .tel{ margin-top: 100px; font-size: 36px;} .new_feel_footer .info{ max-width: 640px;} .new_feel_footer .info p{ font-size: 14px;} .new_feel_footer .logo{ right: 30px; bottom: 50px; height: 40px;} } /* footer {position:relative;background:#151515;width:100%;min-width:1000px;overflow:hidden;z-index:10;} footer .address {max-width:1500px;min-width:900px;padding:65px 50px;margin:0 auto;overflow:hidden;} footer .address > div {float:left;overflow:hidden;} footer .address > div.left {width:52.5%;margin-right:2.5%;} footer .address > div.right {width:45%;} footer .address > div.left h5 {float:left;width:25%;margin-right:5%;} footer .address > div.left h5 a {width:100px;margin:50% auto 0;} footer .address > div.left ul {float:left;} footer .address > div.left ul li {line-height:1.5;margin-bottom:8px;} footer .address > div.left ul li a {color:#73644a;transition:0.3s;} footer .address > div.left ul li a:hover {color:#afa28c;} footer .address > div.left div {float:left;margin-left:10%;} footer .address > div.left div a {color:#73644a;line-height:1.5;margin-bottom:8px;transition:0.3s;} footer .address > div.left div a:hover {color:#afa28c;} footer .address > div.right p {margin-top:10px;} footer .address > div.right p span {color:#aaaaaa;line-height:1.5;display:block;} footer .address > div.right ul {line-height:1.5;margin:100px 0 10px;} footer .address > div.right ul li {color:#7d7771;} footer .copy > a {color:#585858;display:block;text-align:center;font-size:14px;padding:15px 0;border-top:1px solid #585858;} footer .address > div.left ul li a {font-size:20px;} footer .address > div.left div a {font-size:16px;} footer .address > div.right p span {font-size:23px;} footer .address > div.right ul {font-size:16px;} */ /* Index - SideCont */ #footer {position:relative;background:#151515;width:100%;min-width:1000px;overflow:hidden;z-index:10;} #footer .address {max-width:1500px;min-width:900px;padding:65px 50px;margin:0 auto;overflow:hidden;} #footer .address > div {float:left;overflow:hidden;} #footer .address > div.left {width:52.5%;margin-right:2.5%;} #footer .address > div.right {width:45%;} #footer .address > div.left h5 {float:left;width:50%;margin:2.5% 5% 0 0;} #footer .address > div.right p {margin-top:10px;} #footer .address > div.right p span {color:#aaaaaa;line-height:1.5;display:block;} #footer .address > div.right ul {line-height:1.5;margin:100px 0 10px;} #footer .address > div.right ul li {color:#7d7771;} #footer .address > div.right ul li a {color:#7d7771;} #footer .address > div.left ul li a {font-size:20px;} #footer .address > div.left div a {font-size:16px;} #footer .address > div.right p span {font-size:23px;} #footer .address > div.right ul {font-size:16px;} @media (max-width: 1400px) and (min-width: 1200px){ nav > div.gnv > div.event div h3 strong {font-size:24px;} nav > div.gnv > div.event div h3 span {font-size:13px;} nav > div.gnv > div.menu > div .side a {font-size:16px;} nav > div.gnv > div.menu > div ul li a {font-size:24px;} nav > div.gnv > div.menu > div ul li a b {font-size:16px;} nav > div.gnb > div.GnbNav div.nv > div h3 {font-size:22px;} nav > div.gnb > div.GnbNav div.nv > div ul li a {font-size:16px;} nav > div.gnb > .GnbRoom div.nv > div h3 {font-size:22px;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > a {font-size:15px;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > ul li a {font-size:18px;} footer .address > div.left ul li a {font-size:18px;} footer .address > div.left div a {font-size:14px;} footer .address > div.right p span {font-size:21px;} footer .address > div.right ul {font-size:14px;} #footer .address > div.left ul li a {font-size:18px;} #footer .address > div.left div a {font-size:14px;} #footer .address > div.right p span {font-size:21px;} #footer .address > div.right ul {font-size:14px;} } @media (max-width: 1200px){ nav > div.gnv > div.event div h3 strong {font-size:22px;} nav > div.gnv > div.event div h3 span {font-size:12px;} nav > div.gnv > div.menu > div .side a {font-size:14px;} nav > div.gnv > div.menu > div ul li a {font-size:20px;} nav > div.gnv > div.menu > div ul li a b {font-size:14px;} nav > div.gnb > div.GnbNav div.nv > div h3 {font-size:20px;} nav > div.gnb > div.GnbNav div.nv > div ul li a {font-size:15px;} nav > div.gnb > .GnbRoom div.nv > div h3 {font-size:20px;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > a {font-size:15px;} nav > div.gnb > .GnbRoom div.nv > div > ul > li > ul li a {font-size:16px;} footer .address > div.left ul li a {font-size:17px;} footer .address > div.left div a {font-size:13px;} footer .address > div.right p span {font-size:20px;} footer .address > div.right ul {font-size:13px;} #footer .address > div.left ul li a {font-size:17px;} #footer .address > div.left div a {font-size:13px;} #footer .address > div.right p span {font-size:20px;} #footer .address > div.right ul {font-size:13px;} } header a,footer a {display:block;} /* Popup */ #Popup {position:absolute;top:25%;right:0;z-index:90;} #Popup ul {background:#fff;overflow:hidden;transition:1s;transform:translateX(0);} #Popup ul li {float:left;padding:0 0.5px;border-right:1px solid #e8e8e8;} #Popup ul li:last-child {border-right:none;} #Popup ul li a {position:relative;display:block;line-height:1.3;text-align:center;} #Popup ul li a > div {overflow:hidden;} #Popup ul li a > div img {display:block;transform:scale(1);transition:0.5s;} #Popup ul li a:hover img {transform:scale(1.05);} #Popup ul li a strong {font-size:20px;display:block;font-weight:bold;padding-top:20px;} #Popup ul li a span {font-size:16px;display:block;margin:10px 0 20px;} #Popup ul li a b {display:inline-block;background:#20332f;margin-bottom:30px;padding:10px 20px;color:#fff;font-size:15px;} #Popup .btns {position:absolute;top:-21.5px;right:0;z-index:10;} #Popup .btns a {display:block;width:70px;background:#20332f;} #Popup .btns a img {display:block;width:50px;padding:5px 0;margin:0 auto;} /*------------------------------------------------------------------------------------------------*/ /* Index */ #index .section .notice {max-width:1400px;margin:0 auto;padding:5% 0;overflow:hidden;} #index .section .notice div.txt {width:48%;float:left;margin:0 1%;} #index .section .notice div.txt:nth-of-type(1) strong {font-size:50px;line-height:1.3;} #index .section .notice div.txt:nth-of-type(2) {line-height:1.8;} #index .section .notice div.txt:nth-of-type(2) div {margin-top:5%;} #index .section .notice div.txt:nth-of-type(2) div a {display:inline-block;font-size:16px;font-weight:bold;} #index .section .notice div.txt:nth-of-type(2) div a {padding-bottom:5px;border-bottom:2px solid #000;} /* Swipers */ #index .Swipers .swiper-view {width:100%;} #index .Swipers .swiper-view .InBox {max-width:100%;height:100vh;min-height:500px;} #index .Swiper-Common {overflow:hidden} #index .Swiper01 h3 {position:absolute;top:50%;left:50%;margin:-100px 0 0 -400px;z-index:10;} #index .Swiper01 .swiper-view .swiper-slide div {width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;} #index .Swiper01 .swiper-view .swiper-slide a {display:block;} #index .Swiper01 .swiper-view .swiper-slide .link01 {position:absolute;top:50%;left:10%;margin-top:-88.5px;} #index .Swiper01 .swiper-view .swiper-slide .link02 {width:100%;height:100%;} #index .Previews {background:#f3eee8} #index .Lists {background:#f3eee8;padding-bottom:5%;} #index .Lists .title {padding:7.5% 0 0;} #index .Lists .title .txt {width:100%;text-align:center;line-height:1.3;padding-bottom:3.5%;} #index .Lists .title .txt strong {font-size:30px;color:#010000;padding-bottom:1.5%;display:block; /* font-family:linotype-didot, serif; */ } #index .Lists .title .txt span {font-size:16px;color:#7a7675;display:block;} #index .Lists .swiper-view .InBox {max-width:100%;height:100%;} #index .Lists .swiper-view .InBox .swiper-slide a {display:block;} #index .Lists .swiper-view .InBox .swiper-slide a img {display:block;} #index .Lists .swiper-view .InBox .swiper-slide a .img {position:relative;overflow:hidden;} #index .Lists .swiper-view .InBox .swiper-slide a .img .bg {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:0.5s;z-index:999} #index .Lists .swiper-view .InBox .swiper-slide a .img .bg:before {position:absolute;top:0;left:0;width:100%;height:100%;} #index .Lists .swiper-view .InBox .swiper-slide a .img .bg:before {content:"";display:block;background:#20332f;opacity:0.5;} #index .Lists .swiper-view .InBox .swiper-slide a .img .bg img {position:absolute;top:50%;left:50%;margin:-50px 0 0 -75px;z-index:1;} #index .Lists .swiper-view .InBox .swiper-slide a .img .pic {transform:scale(1);transition:0.5s;} #index .Lists .swiper-view .InBox .swiper-slide a .txt {width:100%;text-align:center;line-height:1.3;padding:2.5% 0;} #index .Lists .swiper-view .InBox .swiper-slide a .txt > b {display:block;font-size:14px;color:#3a3839;} #index .Lists .swiper-view .InBox .swiper-slide a .txt > strong {display:block;font-size:25px;color:#010000;padding:2.5% 0;} #index .Lists .swiper-view .InBox .swiper-slide a .txt > span {display:block;font-size:16px;color:#010000;} #index .Lists .swiper-view .InBox .swiper-slide a .txt > span b {position:relative;display:inline-block;padding:0 3px;} #index .Lists .swiper-view .InBox .swiper-slide a .txt > span b div {position:absolute;top:50%;left:0;width:100%;margin-top:-1px;border-top:1px solid #000;} #index .Lists .swiper-view .InBox .swiper-slide a:hover .img .bg {opacity:1;} #index #Videos {background:#f3f3f3;} #index #Videos h3 {width:600px;margin:0 auto;padding:3.5% 0;} #index #Vimeos {background:#f3f3f3;padding-bottom:5%;} #index #Vimeos #MyVimeo {position:relative;max-width:1600px;margin:0 auto;display:block;} #index #Magazines {background:#fdf9f6;padding-top:5%;} #index #Magazines .InBox {position:relative;max-width:1400px;margin:0 auto;padding-bottom:5.5%;} #index #Magazines .InBox ul {width:100%;overflow:hidden;} #index #Magazines .InBox ul li {float:left;} #index #Magazines .InBox ul li div {position:relative;width:100%;} #index #Magazines .InBox ul li div.img {overflow:hidden;} #index #Magazines .InBox ul li div.img img {display:block;} #index #Magazines .InBox ul li div.txt {margin:5% 0 10%;line-height:1.5;} #index #Magazines .InBox ul li div.txt b {display:block;font-size:13px;color:#3a3839;} #index #Magazines .InBox ul li div.txt strong {display:block;font-size:21px;color:#010000;padding:2.5% 0;} #index #Magazines .InBox ul li div.txt span {display:block;font-size:13.5px;color:#787878;} #index #Magazines .InBox p strong {display:block;font-size:21px;color:#010000;padding:2.5% 0 1.5%;} #index #Magazines .InBox p span {display:block;font-size:13.5px;color:#787878;} #index #Magazines .InBox:nth-of-type(3) ul li div.txt {text-align:center;} #index #Magazines .InBox:nth-of-type(1) ul li {width:32.33%;margin:0 0.5%;} #index #Magazines .InBox:nth-of-type(2) ul li:nth-of-type(1) {width:66%;margin-left:0.6666666666666%;} #index #Magazines .InBox:nth-of-type(2) ul li:nth-of-type(2) {width:32.07%;margin:0 0.5%;} #index #Magazines .InBox:nth-of-type(3) ul li {width:49%;margin:0 0.5%;} #index .SideCont .swiper-view .InBox {max-width:1600px;height:100vh;} /* Animate */ #index #Videos h3 {transform:translateY(-15%);opacity:0;transition:1.25s;} #index #Vimeos .txt:nth-of-type(1) {transform:translateX(-25%);opacity:0;transition:1.25s;} #index #Vimeos .txt:nth-of-type(2) {transform:translateX(25%);opacity:0;transition:1.25s;} #index #Vimeos #MyVimeo {transform:translateY(15%);opacity:0;transition:1.25s;} #index #Magazines .InBox:nth-of-type(1) li:nth-of-type(1) {transform:translateY(15%);opacity:0;transition:1.25s;} #index #Magazines .InBox:nth-of-type(1) li:nth-of-type(2) {transform:translateY(20%);opacity:0;transition:1.25s 0.25s;} #index #Magazines .InBox:nth-of-type(1) li:nth-of-type(3) {transform:translateY(25%);opacity:0;transition:1.25s 0.5s;} #index #Magazines .InBox:nth-of-type(2) li:nth-of-type(1) {transform:translateX(-15%);opacity:0;transition:1.25s;} #index #Magazines .InBox:nth-of-type(2) li:nth-of-type(2) {transform:translateX(15%);opacity:0;transition:1.25s;} #index #Magazines .InBox:nth-of-type(3) li:nth-of-type(1) {transform:translateY(15%);opacity:0;transition:1.25s;} #index #Magazines .InBox:nth-of-type(3) li:nth-of-type(2) {transform:translateY(20%);opacity:0;transition:1.25s 0.25s;} #index .Previews .txt:nth-of-type(1) {transform:translateX(-25%);opacity:0;transition:1.25s;} #index .Previews .txt:nth-of-type(2) {transform:translateX(25%);opacity:0;transition:1.25s;} #index .Previews .swiper-view {transform:translateY(15%);opacity:0;transition:1.25s;} #index .Lists .title {transform:translateY(-10%);opacity:0;transition:1.25s;} #index .Lists .swiper-view {transform:translateY(10%);opacity:0;transition:1.25s;} #index #Maps {padding:5% 0;background:#f3eee8;} #index #Maps .InBox {position:relative;max-width:95%;margin:0 auto;overflow:hidden;} #index #Maps .InBox h4 {position:absolute;top:7%;left:7%;} #index #Maps .InBox h4 span {color:#fff;display:block;margin-bottom:5%;} #index #Maps .InBox h4 strong {color:#fff;font-family:linotype-didot, serif;} #index #Maps .InBox img[usemap] {border:none;height:auto;max-width:100%;width:auto;} /* #index #Maps .InBox img {width:95%;margin:0 auto;display:block;} */ #index .Swiper06 .swiper-slide a div {position:relative;} #index .Swiper06 .swiper-slide a div iframe {min-width:110%; min-height:100%; display:block;} #index .Swiper06 .swiper-slide a div iframe {background:url(http://gonylab11.speedgabia.com/calacatta/main/oncar_thumbnail.jpg) no-repeat 50% 50%; background-size:cover;} #index .Swiper06 .swiper-slide a div .sp_background {position:absolute; width:100%; height:100%; top:0; left:0;} #index .Swiper04 .swiper-slide a div {position:relative;} #index .Swiper04 .swiper-slide a div iframe {min-width:110%; min-height:100%; display:block;} /* #index .Swiper04 .swiper-slide a div iframe {background:url(http://gonylab11.speedgabia.com/calacatta/main/oncar_thumbnail.jpg) no-repeat 50% 50%; background-size:cover;} */ #index .Swiper04 .swiper-slide a div .sp_background {position:absolute; width:100%; height:100%; top:0; left:0;} /* font - size */ #index .section .notice div.txt:nth-of-type(1) strong {font-size:50px;} #index .section .notice div.txt:nth-of-type(2) {font-size:17px;} #index #Maps .InBox h4 span {font-size:18px;} #index #Maps .InBox h4 strong {font-size:70px;} #index #Banners ul li div.txt strong {font-size:40px;} #index #Banners ul li div.txt span {font-size:20px;} div.video_wrap{position:absolute; padding-bottom:100px; top:-10%; left:50%; transform:translateX(-50%);width:100%; height:100%; } .video_box{position:absolute; top:0; left:0; width:100%; height:100%; } #index .Lists .swiper-view .InBox .swiper-slide a .img{height:500px;} .img_beer{background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/4.jpg'); background-position:center;background-repeat:no-repeat} .lenzo_bar{background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/5.jpg'); background-position:center; background-repeat:no-repeat} .mankai > div.video_wrap {background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/3.jpg');background-position:center; background-repeat:no-repeat} .mankai > div.video_wrap {background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/4.jpg');background-position:center; background-repeat:no-repeat} .mankai > div.video_wrap {background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/5.jpg');background-position:center; background-repeat:no-repeat} .mankai > div.video_wrap {background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/2.jpg');background-position:center; background-repeat:no-repeat} .mankai > div.video_wrap {background-image:url('http://gonylab11.speedgabia.com/calacatta/main/banner/1/1.jpg');background-position:center; background-repeat:no-repeat} @media (max-width: 1400px) and (min-width: 1200px){ #index .section .notice div.txt:nth-of-type(1) strong {font-size:45px;} #index .section .notice div.txt:nth-of-type(2) {font-size:16px;} #index #Maps .InBox h4 span {font-size:17px;} #index #Maps .InBox h4 strong {font-size:55px;} #index #Banners ul li div.txt strong {font-size:35px;} #index #Banners ul li div.txt span {font-size:18px;} } @media (max-width: 1200px){ #index .section .notice div.txt:nth-of-type(1) strong {font-size:37px;} #index .section .notice div.txt:nth-of-type(2) {font-size:13px;} #index #Maps .InBox h4 span {font-size:15px;} #index #Maps .InBox h4 strong {font-size:47px;} #index #Banners ul li div.txt strong {font-size:30px;} #index #Banners ul li div.txt span {font-size:16px;} } /*------------------------------------------------------------------------------------------------*/ /* LA TERRACE */ #about .article h2 {margin-bottom:2%;} #about #Vimeos {padding-bottom:5%;} #about #Vimeos #MyVimeo {position:relative;max-width:1500px;margin:0 auto;display:block;} #about #location {padding:10% 0;} #about #location h2 {text-align:center;margin-bottom:2%;line-height:1.5;} #about #location h2 strong {display:block;color:#364844;font-family:linotype-didot, serif;} #about #location h2 span {display:block;color:#364844;} #about #location .InBox {width:1000px;margin:0 auto;} #about #location .InBox #Map {width:100%;margin-bottom:7.5%;} #about #location .InBox .txt {width:95%;height:100%;margin:0 auto;overflow:hidden;} #about #location .InBox .txt > div {margin-bottom:10%;} #about #location .InBox .txt > div div {width:100%;} #about #location .InBox .txt > div div strong {font-family:linotype-didot, serif;display:inline-block;margin-bottom:2.5%;color:#20332f;} #about #location .InBox .txt > div div b {border-top:1px solid #787878;display:inline-block;position:relative;top:-7px;} #about #location .InBox .txt > div:nth-of-type(1) div strong {width:150px;} #about #location .InBox .txt > div:nth-of-type(2) div strong {width:330px;} #about #location .InBox .txt > div:nth-of-type(1) div b {width:calc(100% - 150px);} #about #location .InBox .txt > div:nth-of-type(2) div b {width:calc(100% - 330px);} #about #location .InBox .txt > div p {line-height:1.7;} #about #location .InBox .txt > div p span {font-weight:bold;} #about #location h2 strong {font-size:60px;} #about #location h2 span {font-size:18px;} #about #location .InBox .txt > div strong {font-size:30px;} #about #location .InBox .txt > div p {font-size:17px;} /*------------------------------------------------------------------------------------------------*/ /* partner */ #partner .article .title {width:100%;padding:30px 0 0;line-height:1.5;} #partner .article .title > span {display:block;color:#787878;font-family:linotype-didot, serif;text-align:center;} #partner .article .text {max-width:1500px;padding:10% 50px 3%;margin:0 auto;overflow:hidden;} #partner .article .text h3 {width:100%;text-align:center;} #partner .article .text h3 span {display:block;margin-bottom:1%;} #partner .article .text h3 strong {display:block;font-family:linotype-didot, serif;} #partner .conts {max-width:1000px;margin:7.5% auto;} /*------------------------------------------------------------------------------------------------*/ /* waterpark */ #waterpark {background:#f6f3ed;} #waterpark .article .title {width:100%;padding:30px 0 0;line-height:1.5;} #waterpark .article .title > span {display:block;color:#787878;font-family:linotype-didot, serif;text-align:center;} #waterpark .article .text {max-width:1500px;padding:10% 50px 3%;margin:0 auto;overflow:hidden;} #waterpark .article .text h3 {width:100%;text-align:center;} #waterpark .article .text h3 span {display:block;margin-bottom:1%;} #waterpark .article .text h3 strong {display:block;font-family:linotype-didot, serif;} #waterpark .article .text .step {max-width:1150px;margin:5% auto 7.5%;} #waterpark .article .text ul {max-width:1200px;margin:0 auto 10%;overflow:hidden;} #waterpark .article .text ul li {float:left;width:50%;line-height:1.7;margin-bottom:5px;} #waterpark .conts {width:100%;} #waterpark .cont01 {max-width:1100px;margin:0 auto 85px;} #waterpark .cont04 {padding:0% 0;overflow:hidden;} #waterpark .cont04 .Swipers .swiper-view {position:relative;width:100%;} #waterpark .cont04 .Swipers .InBox {position:absolute;top:25%;left:7.5%;width:85%;height:auto;overflow:visible;} #waterpark .cont04 .Swipers .InBox .swiper-slide {max-width:35%;margin:0 1.5%;float:left;} #waterpark .cont04 .Swipers .InBox .swiper-slide a {display:block;} #waterpark .cont04 .Swipers .InBox .swiper-slide a img {display:block;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .img {position:relative;overflow:hidden;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .img::before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:#fff;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .img::before {transition:0.5s;opacity:0;z-index:1;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .img img {transform:scale(1);transition:0.5s;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .txt {position:relative;width:90%;margin:0 auto;line-height:1.3;transform:translateY(-30%);transition:0.5s;z-index:2;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .txt strong {display:block;font-family:linotype-didot, serif;} #waterpark .cont04 .Swipers .InBox .swiper-slide a .txt span {display:block;} #waterpark .cont04 .Swipers .InBox .swiper-slide a:hover .img::before {opacity:0.35;} #waterpark .cont04 .Swipers .InBox .swiper-slide a:hover .img img {transform:scale(1.05);} #waterpark .cont04 .Swipers .InBox .swiper-slide a:hover .txt {transform:translateY(-60%);} #waterpark .cont03 {overflow-x:scroll; } #waterpark .cont03 img {display:block; width:3000px;} #waterpark .cont02 {position:relative;background:#f6f3ed;width:100%;z-index:10;} #waterpark .cont02 .InBox {width:calc(100% - 100px);max-width:1100px;padding:10% 50px;margin:0 auto;} #waterpark .cont02 .InBox h4 {width:100%;margin-bottom:5%;text-align:center;} #waterpark .cont02 .InBox h4 span {display:block;margin-bottom:1%;} #waterpark .cont02 .InBox h4 strong {display:block;font-family:linotype-didot, serif;} #waterpark .cont02 .InBox > ul {width:100%;} #waterpark .cont02 .InBox > ul li {line-height:1.5;margin-bottom:10px;} #waterpark .cont02 .InBox > ul li strong {display:block;font-weight:bold;} #waterpark .cont02 .InBox > ul > li {margin-bottom:5%;} #waterpark .cont02 .InBox > ul > li ul {margin-top:15px;} #waterpark .cont02 .InBox > ul > li ul li {width:calc(100% - 15px);background:url(../images/blt_t.png) no-repeat left 10px;} #waterpark .cont02 .InBox > ul > li ul li {padding-left:15px;color:#6f6f6f;} /* font-size */ #waterpark .article .text h3 span {font-size:18px;} #waterpark .article .text h3 strong {font-size:38px;} #waterpark .article .text ul li {font-size:16px;} #waterpark .cont04 .Swipers .txt strong {font-size:35px;} #waterpark .cont04 .Swipers .txt span {font-size:18px;} #waterpark .cont02 h4 span {font-size:18px;} #waterpark .cont02 h4 strong {font-size:38px;} #waterpark .cont02 > ul li {font-size:17px;} #waterpark .cont02 > ul li strong {font-size:18px;} /*------------------------------------------------------------------------------------------------*/ /* Detail */ .details .article .title {width:100%;padding:70px 0 3%;background:#f5f2ec;line-height:1.5;text-align:center;} .details .article .title > span {display:block;color:#787878;font-family:linotype-didot, serif;font-size:16px;} .details .article .title h2 {padding-top:8%; padding-bottom:5%;} /*.details .article .title .imgs {width: 100%; float: left;}*/ .details .article .title h2 strong {display:block;color:#364844;font-size:60px;} .details .article .title h2 span {display:block;color:#364844;font-size:18px;} .details .article .text {width:100%;padding:5% 0;text-align:center;line-height:1.7;} .details .article .text p {font-family:linotype-didot, serif;font-size:28px;color:#465854;} .details .article .text span {display:block;font-size:20px;line-height:1.5;color:#465854;} .details #Videos .MyFrame {height:80vh;min-height:500px;} .details .Lists .text {width:100%;padding:5% 0;text-align:center;line-height:1.7;} .details .Lists .text p {font-family:linotype-didot, serif;font-size:28px;color:#465854;} .details .Lists > ul {max-width:1500px;padding:0 50px;margin:0 auto 5%;overflow:hidden;} .details .Lists > ul li {width:48%;margin:0 1% 7.5%;float:left;} .details .Lists > ul li a {display:block;overflow:hidden;} .details .Lists > ul li a > div {position:relative;overflow:hidden;} .details .Lists > ul li a .img div {width:100%;height:100%;overflow:hidden;} .details .Lists > ul li a .img div:nth-of-type(1) {position:absolute;top:50%;left:50%;width:150px;height:100px;opacity:0;transition:0.5s;z-index:2;} .details .Lists > ul li a .img div:nth-of-type(1) {background:url(../images/detail_btn.png) no-repeat left;margin:-50px 0 0 -75px;} .details .Lists > ul li a .img div:nth-of-type(2):before {position:absolute;top:0;left:0;width:100%;height:100%;} .details .Lists > ul li a .img div:nth-of-type(2):before {background:#20332f;content:"";opacity:0;transition:0.5s;z-index:1;} .details .Lists > ul li a .img div:nth-of-type(2) img {position:relative;transform:scale(1);transition:0.5s;} .details .Lists > ul li a .img:hover div:nth-of-type(1) {opacity:1;} .details .Lists > ul li a .img:hover div:nth-of-type(2):before {opacity:0.7;} .details .Lists > ul li a .img:hover div:nth-of-type(2) img {transform:scale(1.05);} .details .Lists > ul li .txt {width:94%;min-height:300px;overflow:hidden;margin:0 auto;} .details .Lists > ul li .txt div.ttl {width:58%;float:left;} .details .Lists > ul li .txt div.ttl span {display:block;font-size:17px;color:#364844;padding:25px 0 10px;} .details .Lists > ul li .txt div.ttl strong {display:block;font-size:35px;} .details .Lists > ul li .txt div.btn {width:30%;float:right;margin:20px 0 0 2%;padding:20px 4%;background:#20332f;overflow:hidden;} .details .Lists > ul li .txt div.btn span {color:#fff;display:block;font-size:16px;line-height:1.5;letter-spacing:0.5px;} .details .Lists > ul li .txt div.btn span:nth-child(1) {float:left;width:calc(60% - 1px);border-right:1px solid #e8e8e8;} .details .Lists > ul li .txt div.btn span:nth-child(2) {float:right;width:40%;text-align:right;} .details .Lists > ul li .txt p {width:100%;clear:both;padding-top:25px;font-size:14px;line-height:1.5;color:#787878;} .details .Swipers {margin-bottom:5%;} .details .Swipers .swiper-view {overflow:hidden;} .details .Swipers .swiper-view .InBox {max-width:1500px;height:80vh;min-height:600px;padding:0 50px;overflow:visible;} .details .Swipers .swiper-view .InBox .swiper-slide::before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";} .details .Swipers .swiper-view .InBox .swiper-slide::before {display:block;opacity:0.7;background:#fff;transition:1s;} .details .Swipers .swiper-view .InBox .swiper-slide-active::before {opacity:0;} .details .information {width:100%;} .details .information .title {position:relative;max-width:1460px;padding:0 70px;margin:0 auto;overflow:hidden;} .details .information .title h3 {padding:35px 0;} .details .information .title h3 span {display:block;font-size:18px;color:#364844;margin-bottom:15px;} .details .information .title h3 strong {display:block;font-size:38px;color:#1b1e23;font-family:nanumbarungothicregular;} .details .information .title a {position:absolute;top:40px;right:70px;transition:0.5s;} .details .information .title a:hover {opacity:0.8;} .details .information .notice {width:100%;height:0;transition:1s;overflow:hidden;} /*------------------------------------------------------------------------------------------------*/ /* ROOMS */ #rooms .information .notice .top, #rooms .information .notice .bottom {width:100%;height:39px;} #rooms .information .notice .top {background:url(../images/notice_bg_top.jpg) repeat-x 0 0;} #rooms .information .notice .bottom {background:url(../images/notice_bg_bottom.jpg) repeat-x 0 0;} #rooms .information .notice .middle {background:#e9e9e9;padding:50px 0;} #rooms .information .notice .middle .content {opacity:0;transition:1s;} #rooms .information .content {max-width:1500px;padding:0 50px;margin:0 auto;line-height:1.5;overflow:hidden;} #rooms .information .content > div {float:left;width:33%;margin:0 1%;} #rooms .information .content > div:nth-of-type(2) {width:28%;} #rooms .information .content > div > div {width:85%;padding:7% 7.5%;margin:0 auto;} #rooms .information .content > div .Inner {border-top:2px solid #000;border-bottom:2px solid #000;background:#f0f3f3;} #rooms .information .content > div .Inner > strong {font-weight:bold;color:#b3bdc5;font-family:nanumbarungothicregular;letter-spacing:1px;} #rooms .information .content > div .Inner > strong {margin-bottom:25px;display:block;} #rooms .information .content > div.info .Inner > ul {overflow:hidden;} #rooms .information .content > div.info .Inner > ul li {float:left;width:58%;padding:0 1%;margin-bottom:5%;overflow:hidden;} #rooms .information .content > div.info .Inner > ul li:nth-child(odd) {width:38%;} #rooms .information .content > div.info .Inner > ul li span {display:block;float:left;} #rooms .information .content > div.info .Inner > ul li span.tl {width:75px;font-weight:bold;} #rooms .information .content > div.info .Inner > ul li span.tt {width:calc(100% - 75px);} #rooms .information .content > div.eq .Inner > ul {width:100%;overflow:hidden;} #rooms .information .content > div.eq .Inner > ul li {width:calc(48% - 15px);margin:0 1% 10px;padding-left:15px;float:left;} #rooms .information .content > div.eq .Inner > ul li {background:url(../images/blt.png) no-repeat left 50%;} #rooms .information .content > div.eq a {display:block;width:85%;padding:30px 7.5%;background:#424242;color:#fff;transition:0.5s;} #rooms .information .content > div.eq a {font-size:14px;font-family:nanumbarungothicregular;letter-spacing:1px;margin-top:10%;} #rooms .information .content > div.eq a:hover {opacity:0.8;} #rooms .information .content > div table {width:100%;height:100%;} #rooms .information .content > div table tbody {width:100%;height:100%;} #rooms .information .content > div table tbody tr th, #rooms .information .content > div table tbody tr td { font-family:nanumbarungothicregular;padding:10px;color:#292929; border:1px solid #d6d7d7;font-weight:normal;text-align:center; } #rooms .information .content > div table tbody tr th {width:calc(45% - 10px);background:#f2f5f5;} #rooms .information .content > div table tbody tr th span {display:block;margin-top:5px;} #rooms .information .content > div table tbody tr td {width:calc(55% - 10px);background:#fff;} #rooms .information .content > div table tbody tr td span {text-align:center;line-height:1.3em;padding:0 5px;font-family:nanumbarungothicregular;} #rooms .information .content > .price p {padding-top:15px;line-height:1.5;overflow:hidden;} #rooms .information .content > .price p strong {width:120px;height:10px;color:#b99b78;font-weight:bold;float:left;display:block;letter-spacing:2px;} #rooms .information .content > .price p span {width:calc(100% - 120px);color:#636363;float:left;display:block;} /* ROOMS-TPYE */ #Types {height:90vh;min-height:550px;overflow:hidden;} #Types .Swipers {width:50%;float:left;margin:0;} #Types .Swipers .swiper-view {background:#e9e8e4;width:100%;height:100%;} #Types .Swipers .swiper-view p {width:100%;text-align:center;position:absolute;top:35px;font-family:linotype-didot, serif;color:#384a46;} #Types .Swipers .swiper-view .In {position:absolute;top:50%;text-align:center;} #Types .Swipers .swiper-view .In span {display:block;color:#405450;} #Types .Swipers .swiper-view .In strong {display:block;font-family:linotype-didot, serif;color:#405450;margin:20px 0 50px;} #Types .Swipers .swiper-view .In a {display:block;width:95px;margin:0 auto;} #Types .img {width:50%;height:100%;float:left;position:relative;} #Types .img li {position:absolute;top:0;left:0;width:100%;height:100%;} #Types .img li {background-position:50% 50%;background-repeat:no-repeat;background-size:cover;opacity:0;transition:1s;z-index:0;} #Types .img li.on {opacity:1;z-index:1;} /* Font - Size */ #rooms .information .content > div .Inner > strong {font-size:15px;} #rooms .information .content > div .Inner ul li {font-size:16px;} #rooms .information .content > div table tbody tr th, #rooms .information .content > div table tbody tr td {font-size:14.5px;} #rooms .information .content > .price p strong {font-size:18px;} #rooms .information .content > .price p span {font-size:14px;} #Types .Swipers .swiper-view p {font-size:20px;} #Types .Swipers .swiper-view .In {height:240px;margin-top:-120px;} #Types .Swipers .swiper-view .In span {font-size:18px;} #Types .Swipers .swiper-view .In strong {font-size:50px;} /*------------------------------------------------------------------------------------------------*/ /* FACILITY */ .facilitys {background:#f6f3ed;} .facilitys .article .title {width:100%;padding:70px 0 0;margin-bottom:8.5%;background:#f3efe9;line-height:1.5;} .facilitys .article .title > span {display:block;color:#787878;font-family:linotype-didot, serif;text-align:center;} .facilitys .article .text {max-width:1500px;padding:10% 50px 5%;margin:0 auto;overflow:hidden;} .facilitys .article .text h3 {float:left;width:45%;} .facilitys .article .text h4 {width:100%;text-align:center;} .facilitys .article .text h4 span {display:block;margin-bottom:1%;} .facilitys .article .text h4 strong {display:block;font-family:linotype-didot, serif;} .facilitys .article .text .step {max-width:1150px;margin:5% auto 7.5%;} .facilitys .article .text p {line-height:1.8;float:left;width:52.5%;margin-left:2.5%;} .facilitys .article .text p a {display:inline-block;margin-top:5%;font-weight:bold;border-bottom:2px solid #000;padding-bottom:2px;} .facilitys .article .text p a {transition:0.5s;} .facilitys .article .text p a:hover {color:#787878;border-bottom:2px solid #787878;} .facilitys .article .text h3 {font-size:50px;line-height: 1.2;} .facilitys .article .text h3 b {font-family: "Newsreader", serif;font-size:45px;line-height: 1.2;color: #FDBF00;} .facilitys .article .text p {font-size:17px;} .facilitys .article .text p a {font-size:15px;} .facilitys .article .text ul {max-width:1200px;margin:0 auto 10%;overflow:hidden;} .facilitys .article .text ul li {float:left;width:50%;line-height:1.7;margin-bottom:5px;} .facilitys .conts {width:100%;} .facilitys .cont01 {max-width:1100px;margin:0 auto 85px;} .facilitys #Vimeos {padding-bottom:5%;} .facilitys #Vimeos #MyVimeo {position:relative;max-width:1500px;margin:0 auto;display:block;} .facilitys .Swipers {padding-top:3%;margin-bottom:8.5%;} .facilitys .Swipers .text {max-width:1500px;padding:0 50px;margin:0 auto 2.5%;overflow:hidden;} .facilitys .Swipers .text h3 {float:left;width:45%;line-height:1.5;} .facilitys .Swipers .text h3 span {display:block;} .facilitys .Swipers .text h3 strong {display:block;font-family:linotype-didot, serif;} .facilitys .Swipers .text p {float:left;width:52.5%;margin-left:2.5%;line-height:1.5;} .facilitys .Swipers .text p a {color:#145299;display:inline-block;border-bottom:2px solid #145299;transition:0.5s;} .facilitys .Swipers .text p a:hover {color:#79a1cd;border-bottom:2px solid #79a1cd;} .facilitys .Swipers .swiper-view {overflow:hidden;} .facilitys .Swipers .swiper-view .InBox {max-width:1500px;height:80vh;min-height:600px;padding:0 50px;overflow:visible;} .facilitys .Swipers .swiper-view .InBox .swiper-slide::before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";} .facilitys .Swipers .swiper-view .InBox .swiper-slide::before {display:block;opacity:0.7;background:#fff;transition:1s;} .facilitys .Swipers .swiper-view .InBox .swiper-slide-active::before {opacity:0;} .facilitys .Swipers .swiper-btn {top:unset;bottom:0%;width:60px;height:60px;z-index:11;} .facilitys .Swipers .swiper-button-prev {background-image:url(../images/prev_s.jpg);left:unset;right:80px;} .facilitys .Swipers .swiper-button-next {background-image:url(../images/next_s.jpg);right:20px;} .facilitys .cont02 {position:relative;background:#f6f3ed;width:100%;z-index:10;} .facilitys .cont02 .InBox {width:calc(100% - 100px);max-width:1100px;padding:10% 50px;margin:0 auto;} /* font-size */ .facilitys .Swipers .text h3 span {font-size:20px;} .facilitys .Swipers .text h3 strong {font-size:52px;} .facilitys .Swipers .text p {font-size:17px;} .facilitys .article .text h4 span {font-size:18px;} .facilitys .article .text h4 strong {font-size:38px;} .facilitys .article .text ul li {font-size:16px;} /*------------------------------------------------------------------------------------------------*/ /* DINING - BANQUET */ .subSide .information {width:calc(100% - 100px);max-width:1300px;padding:0 50px;margin:0 auto 10%;} .subSide .information ul.explanation {width:100%;border-top:2px solid #888888;} .subSide .information ul.explanation li {border-bottom:1px solid #c3c3c3;padding:20px 0;line-height:1.7;overflow:hidden;} .subSide .information ul.explanation li strong {width:23%;padding-left:3%;float:left;display:block;font-weight:bold;} .subSide .information ul.explanation li span {width:67%;margin-left:3%;float:left;display:block;} .subSide .information ul.structrue {width:90%;margin:10% auto 0;overflow:hidden;} .subSide .information ul.structrue li {float:left;width:31.33%;margin:0 1%;} .subSide .information ul.structrue li strong {display:block;text-align:center;font-weight:bold;margin-bottom:3%;} /* font-size */ .subSide .information ul li strong {font-size:18px;} .subSide .information ul li span {font-size:17px;} /*------------------------------------------------------------------------------------------------*/ *------------------------------------------------------------------------------------------------*/ /* FACILITY */ .etcs .article .title {width:100%;padding:70px 0 0;margin-bottom:8.5%;background:#f3efe9;line-height:1.5;} .etcs .article .title > span {display:block;color:#787878;font-family:linotype-didot, serif;text-align:center;} .etcs .article .text {max-width:1500px;padding:10% 50px 10%;margin:0 auto;overflow:hidden;} .etcs .article .text h3 {float:left;width:45%;} .etcs .article .text p {line-height:1.8;float:left;width:52.5%;margin-left:2.5%;} .etcs .article .text p a {display:inline-block;margin-top:5%;font-weight:bold;border-bottom:2px solid #000;padding-bottom:2px;} .etcs .article .text p a {transition:0.5s;} .etcs .article .text p a:hover {color:#787878;border-bottom:2px solid #787878;} .etcs .article .text h3 {font-size:50px;line-height: 1.2;} .etcs .article .text p {font-size:17px;} .etcs .article .text p a {font-size:15px;} .etcs #Vimeos {padding-bottom:5%;} .etcs #Vimeos #MyVimeo {position:relative;max-width:1500px;margin:0 auto;display:block;} .etcs .Swipers {padding-top:3%;margin-bottom:8.5%;} .etcs .Swipers .text {max-width:1500px;padding:0 50px;margin:0 auto 2.5%;overflow:hidden;} .etcs .Swipers .text h3 {float:left;width:45%;line-height:1.5;} .etcs .Swipers .text h3 span {display:block;} .etcs .Swipers .text h3 strong {display:block;font-family:linotype-didot, serif;} .etcs .Swipers .text p {float:left;width:52.5%;margin-left:2.5%;line-height:1.5;} .etcs .Swipers .text p a {color:#145299;display:inline-block;border-bottom:2px solid #145299;transition:0.5s;} .etcs .Swipers .text p a:hover {color:#79a1cd;border-bottom:2px solid #79a1cd;} .etcs .Swipers .swiper-view {overflow:hidden;} .etcs .Swipers .swiper-view .InBox {max-width:1500px;height:80vh;min-height:600px;padding:0 50px;overflow:visible;} .etcs .Swipers .swiper-view .InBox .swiper-slide::before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";} .etcs .Swipers .swiper-view .InBox .swiper-slide::before {display:block;opacity:0.7;background:#fff;transition:1s;} .etcs .Swipers .swiper-view .InBox .swiper-slide-active::before {opacity:0;} .etcs .Swipers .swiper-btn {top:unset;bottom:0%;width:60px;height:60px;z-index:11;} .etcs .Swipers .swiper-button-prev {background-image:url(../images/prev_s.jpg);left:unset;right:80px;} .etcs .Swipers .swiper-button-next {background-image:url(../images/next_s.jpg);right:20px;} /* font-size */ .etcs .Swipers .text h3 span {font-size:20px;} .etcs .Swipers .text h3 strong {font-size:52px;} .etcs .Swipers .text p {font-size:17px;} /* TABLE */ .table #contents {padding:5% 0 10%;} .table #contents .InBox {width:calc(100% - 50px);max-width:1200px;padding:0 25px;margin:0 auto;} .table #contents .InBox .snb {width:100%;overflow:hidden;} .table #contents .InBox .snb ul {float:right;overflow:hidden;margin-bottom:2%;} .table #contents .InBox .snb ul li {float:left;font-size:18px;padding:0 7px;} .table #contents .InBox .snb ul li {background:url(../images/blt_l.gif) no-repeat -1px 16px;} .table #contents .InBox .snb ul li:nth-of-type(1) {background:none;} .table #contents .InBox .snb ul li a {padding:15px 10px;display:block;color:#787878;} .table #contents .InBox .snb ul li.on a {font-weight:bold;color:#000;} .table #contents p {line-height:1.5;} .reserve #contents table {width:100%;border:1px solid #e7e7e7;font-family:'돋움',Dotum!important;} .reserve #contents table tr th {border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;} .reserve #contents table tr th,.reserve table tr td { border-right:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7; text-align:center;font-size:13px;color:#676767;padding:10px 0; } .reserve #contents h3 {margin-bottom:10px;} .reserve #contents ul.blt 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 #contents ul li span {color:#ee3939;} .reserve #contents .r_info_01 {position:relative;margin-bottom:30px;} .reserve #contents .r_info_01 h4 {text-align:left;margin-bottom:10px;} .reserve #contents .r_info_01 table {margin-bottom:20px;} .reserve #contents .r_info_01 table .room_ {background:#efefef;height:50px;} .reserve #contents .r_info_01 table > thead {line-height:1.3;} .reserve #contents .r_info_01 table > thead {background:#f8f8f8;} .reserve #contents .r_info_01 table > thead tr th {font-weight:bold;} .reserve #contents .r_info_01 table > tbody tr td {line-height:1.5;} .reserve #contents .r_info_02 {margin:20px 0 50px;text-align:left;} .reserve #contents .r_info_03 {padding-bottom:80px;text-align:left;} .reserve #contents .r_info_03 .CNCL_COMM {margin-bottom:50px;} .reserve #contents .r_info_03 table {line-height:1.5;margin-top:20px;} .reserve #contents .r_info_03 table > thead {background:#f2f2f2;} .reserve #contents .r_info_04 {width:1000px;margin:0 auto;} .reserve #contents .r_info_04 p {line-height:1.5;font-size:15px;margin-bottom:35px;text-align:center;} .reserve #contents .r_info_04 ul {width:800px;overflow:hidden;border:1px solid #e7e7e7;padding:35px 0;margin:0 auto;} .reserve #contents .r_info_04 ul li {padding:0;float:left;width:50%;text-align:center;} .reserve #contents .r_info_04 ul li {font-size:22px;font-family:nanumbarungothicregular!important;background:none;} .reserve #contents .r_info_04 ul li:first-child {width:calc(50% - 1px);border-right:1px solid #e7e7e7;} /*------------------------------------------------------------------------------------------------*/ /* MEDIA QUERY */ @media (max-width: 1400px) and (min-width: 1200px){ #waterpark .article .text h3 span {font-size:16px;} #waterpark .article .text h3 strong {font-size:35px;} #waterpark .article .text ul li {font-size:15px;} #waterpark .cont02 .Swipers .txt strong {font-size:30px;} #waterpark .cont02 .Swipers .txt span {font-size:16px;} #waterpark .cont04 h4 span {font-size:16px;} #waterpark .cont04 h4 strong {font-size:35px;} #waterpark .cont04 > ul li {font-size:15px;} #waterpark .cont04 > ul li strong {font-size:16px;} .details .article .text span {font-size:17px;} .details .Lists > ul li .txt div.ttl span {font-size:15px;} .details .Lists > ul li .txt div.ttl strong {font-size:23px;} .details .Lists > ul li .txt div.btn span {font-size:13px;} .details .Lists > ul li .txt p {font-size:13px;} #rooms .information .content > div .Inner > strong {font-size:14px;} #rooms .information .content > div .Inner ul li {font-size:15px;} #rooms .information .content > div table tbody tr th, #rooms .information .content > div table tbody tr td {font-size:13.5px;} #rooms .information .content > .price p strong {font-size:17px;} #rooms .information .content > .price p span {font-size:13px;} .facilitys .article .text h3 {font-size:40px;} .facilitys .article .text p {font-size:15px;} .facilitys .article .text p a {font-size:13px;} .facilitys .Swipers .text h3 span {font-size:18px;} .facilitys .Swipers .text h3 strong {font-size:45px;} .facilitys .Swipers .text p {font-size:15px;} .facilitys .article .text h4 span {font-size:16px;} .facilitys .article .text h4 strong {font-size:35px;} .facilitys .article .text ul li {font-size:15px;} .facilitys .cont02 .Swipers .txt strong {font-size:30px;} .facilitys .cont02 .Swipers .txt span {font-size:16px;} .subSide .information ul li {padding:17.5px 0;} .subSide .information ul li strong {font-size:17px;} .subSide .information ul li span {font-size:16px;} #Types .Swipers .swiper-view p {font-size:18px;} #Types .Swipers .swiper-view .In {height:200px;margin-top:-100px;} #Types .Swipers .swiper-view .In span {font-size:16px;} #Types .Swipers .swiper-view .In strong {font-size:40px;margin:20px 0 30px;} } @media (max-width: 1200px){ #about #location h2 strong {font-size:55px;} #about #location h2 span {font-size:16px;} #about #location .InBox .txt > div strong {font-size:27px;} #about #location .InBox .txt > div p {font-size:15px;} #waterpark .article .text h3 span {font-size:14px;} #waterpark .article .text h3 strong {font-size:32px;} #waterpark .article .text ul li {font-size:13px;} #waterpark .cont02 .Swipers .txt strong {font-size:25px;} #waterpark .cont02 .Swipers .txt span {font-size:14px;} #waterpark .cont04 h4 span {font-size:14px;} #waterpark .cont04 h4 strong {font-size:32px;} #waterpark .cont04 > ul li {font-size:13px;} #waterpark .cont04 > ul li strong {font-size:14px;} .details .article .text span {font-size:15px;} .details .Lists > ul li .txt div.ttl span {font-size:14px;} .details .Lists > ul li .txt div.ttl strong {font-size:21px;} .details .Lists > ul li .txt div.btn span {font-size:12px;} .details .Lists > ul li .txt p {font-size:12px;} #rooms .information .content > div .Inner > strong {font-size:13px;} #rooms .information .content > div .Inner ul li {font-size:13px;} #rooms .information .content > div table tbody tr th, #rooms .information .content > div table tbody tr td {font-size:11.5px;} #rooms .information .content > .price p strong {font-size:15px;} #rooms .information .content > .price p span {font-size:11px;} .facilitys .article .text h3 {font-size:33px;} .facilitys .article .text p {font-size:13px;} .facilitys .article .text p a {font-size:12px;} .facilitys .Swipers .text h3 span {font-size:16px;} .facilitys .Swipers .text h3 strong {font-size:40px;} .facilitys .Swipers .text p {font-size:14px;} .facilitys .article .text h4 span {font-size:14px;} .facilitys .article .text h4 strong {font-size:32px;} .facilitys .article .text ul li {font-size:13px;} .facilitys .cont02 .Swipers .txt strong {font-size:25px;} .facilitys .cont02 .Swipers .txt span {font-size:14px;} .subSide .information ul li {padding:15px 0;} .subSide .information ul li strong {font-size:16px;} .subSide .information ul li span {font-size:15px;} #Types .Swipers .swiper-view p {font-size:16px;} #Types .Swipers .swiper-view .In {height:180px;margin-top:-90px;} #Types .Swipers .swiper-view .In span {font-size:15px;} #Types .Swipers .swiper-view .In strong {font-size:35px;margin:10px 0 20px;} }