/* common */ .fp-controlArrow.fp-prev { z-index:1000; border:none; width:40px; height:40px; background:url(../img/arrow_prev.png) center no-repeat; background-size:cover; cursor:pointer; } .fp-controlArrow.fp-next { z-index:1000; border:none; width:40px; height:40px; background:url(../img/arrow_next.png) center no-repeat; background-size:cover; cursor: pointer; } @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');} body { font-family : 'Noto Sans KR'; } .hidden { display:none; } .fp-bottom { text-align:center; } .fp-bottom ul li a span { background-color:white; } #fp-nav ul li a span { background-color:white !important; } .fp-slidesNav > ul > li > a > span { background-color:white !important; } .fp-slidesNav > ul > li > .active > span { background-color:#fdd35b !important; } .fp-slidesNav > ul > li > a > span:hover { background-color:#fdd35b !important; } .scroll_icon { position:absolute; z-index:9999; width:100%; bottom:60px; left:50px !important; } .scroll_down { position:relative; animation-name: scroll_down; animation-duration: 3s; animation-iteration-count: infinite; } .scroll_down_text { position:absolute; top:50px; left:-20px; color:#fff; } @keyframes scroll_down { 0% { top:0px; } 50% { top:20px; } 100% { top:0px; } } /* header */ #header-layout { z-index:100; position:fixed; width:100%; min-width:1200px; height:70px; } .header-layout { background-color:rgba(0,0,0,0.3); } #header-layout h1 { float:left; margin-top:15px; margin-left:40px; } #header-layout h1 a img { width:110px; } #header-layout .gnb { float:right; width:30%; margin-right:40px; } #header-layout .gnb > ul > li { width:25%; float:left; text-align:center;} #header-layout .gnb > ul > li > a { display:block; position:relative; width:100%; padding:27px 0; color:#fff; font-weight:bold; text-decoration:none; transition:all .5s; } #header-layout .gnb > ul > li:hover { background-color:rgba(0, 0, 0, 0.3); } #header-layout .gnb > ul > li:hover > a { color:#fdd35b; transition:all .5s; } #header-layout .gnb > ul > li > ul { display:none; } #header-layout .gnb > ul > li:hover > ul { display:block; } #header-layout .gnb > ul > li:hover > ul > li { padding:5px 0; } #header-layout .gnb > ul > li:hover > ul > li > a { color:white; text-decoration:none; transition:all .5s; } #header-layout .gnb > ul > li:hover > ul > li:hover > a { color:#fdd35b; transition:all .5s; } /* index.html video-section */ .video-section { overflow:hidden; } .video-section .vimeo-wrapper { position: fixed; top: 0; left: 0; width: 1920px; height:1080px; z-index: -1; overflow: hidden; } /*.video-section .vimeo-wrapper iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; } */ .video-section .vimeo-wrapper iframe { width: 100%; height:100%;} .video-section .video-section-text { position: absolute; width: 100%; height:40px; left:7%; top:90%; z-index:4; border-left:2px solid #fff; color:#fff; } .video-section .video-section-text h3 { width:40%; height: 35px; overflow: hidden; animation: typingAni 3s steps(500, end) 1; padding-left:30px; font-weight:bold; font-size:2em; } @keyframes typingAni { 0% {width: 0px } 33% {width: 100px}; 66% {width: 200px}; 100% {width: 500px}; } /* index.html slide-section */ .slide-section .slide { text-align:center; color:white; position:relative; } .slide-section .slide h3 { display:inline; font-size:1.8em !important; font-weight:bold; position:absolute; bottom:12%; left:50%; transform:translateX(-50%); overflow:hidden; animation: typingAnii 4s steps(500, end) infinite;} .slide-section .slide span { font-size:1em !important; position:absolute; bottom:8%; left:50%; transform:translateX(-50%); } #slide1 { background: url('../img/index1.jpg') center no-repeat; background-size:cover; } #slide2 { background: url('../img/index2.jpg') center no-repeat; background-size:cover; } #slide3 { background: url('../img/index3.jpg') center no-repeat; background-size:cover; } #slide4 { background: url('../img/index4.jpg') center no-repeat; background-size:cover; } #slide5 { background: url('../img/index5.jpg') center no-repeat; background-size:cover; } #slide6 { background: url('../img/index6.jpg') center no-repeat; background-size:cover; } #slide7 { background: url('../img/index7.jpg') center no-repeat; background-size:cover; } #slide8 { background: url('../img/index8.jpg') center no-repeat; background-size:cover; } #slide9 { background: url('../img/index9.jpg') center no-repeat; background-size:cover; } #slide10 { background: url('../img/index10.jpg') center no-repeat; background-size:cover; } #slide11 { background: url('../img/index11.jpg') center no-repeat; background-size:cover; } #slide12 { background: url('../img/index12.jpg') center no-repeat; background-size:cover; } @keyframes typingAnii { 0% {width: 0px } 33% {width: 400px}; 66% {width: 800px}; 100% {width: 1200px}; } /* index.html view-section */ .view-sec { width:100%; height:100%; background-color:#fff;} .view-section { position:relative; width:1200px; margin:0 auto; } .view-section h4 { font-size:16px; margin-bottom:5px; } .view-section h2 { font-size:46px; margin-bottom:25px; } .view-section hr { border-bottom:1px solid #000; margin-bottom:15px; } .view-section p { font-size:18px; line-height:30px; margin-bottom:80px; } .view-section .view-gallery > div { width:16%; height:150px; overflow:hidden; float:left; margin:0 7px 7px 0;} .view-section .view-gallery > div > a > img { width:100%; height:150px; margin-bottom:3px; transition:all .5s; } .view-section .view-gallery > div > a > img:hover { transform: scale(1.2); filter:grayscale(50%) contrast(150%) sepia(150%); transition:all .5s; } .view-section-bottom { position:absolute; top:720px; transform:translateX(-50%); left:50%; } /* index.html view-section .view-section .left { width:25%; height:100%; background-color:#19232f; float:left; } .view-section .left .text { padding-left:60px; padding-top:165px; } .view-section .left .text h3 { color:#825f3e; font-size:14px; } .view-section .left .text h2 { color:#825f3e; font-size:36px; padding-top:20px; margin-bottom:40px; } .view-section .left .text p { font-size:14px; color:#8f8f8f; font-weight:300; line-height:1.6em; margin-bottom:60px; } .view-section .left .view-image { padding:0 60px; } .view-section .left .view-image .view-photo { float:left; width:85px; height:55px; margin-right:15px; margin-bottom:15px; overflow:hidden; cursor:pointer; } .view-section .left .view-image .view-photo::after { clear:both; content:""; display:block; } .view-section .left .view-image .view-photo .box { width:100%; height:100%; } .view-section .left .view-image .view-photo .box:hover { transform: scale(1.2); filter:grayscale(50%) contrast(150%) sepia(150%); transition:all .5s; } .view-section .left .view-image label:nth-child(1) .view-photo .box { background:url(../img/left1.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(2) .view-photo .box { background:url(../img/left2.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(3) .view-photo .box { background:url(../img/left3.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(4) .view-photo .box { background:url(../img/left4.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(5) .view-photo .box { background:url(../img/left5.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(6) .view-photo .box { background:url(../img/left6.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(7) .view-photo .box { background:url(../img/left7.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(8) .view-photo .box { background:url(../img/left8.jpg); background-size:cover; } .view-section .left .view-image label:nth-child(9) .view-photo .box { background:url(../img/left9.jpg); background-size:cover; } [type=radio] { display: none; } .view-section .right { float:left; width:75%; height:100%; transition:all .5s; background:url(../img/right9.jpg); background-size:cover; overflow:hidden; } .view-section .right img { width:100%; height:120%; } .view-section .right::after { clear:both; content:""; display:block; } .view-section .right img { display:none; } #view1:checked ~ .view-section .right img:nth-child(1) { display: block; background-size:cover; } #view2:checked ~ .view-section .right img:nth-child(2) { display: block; background-size:cover; } #view3:checked ~ .view-section .right img:nth-child(3) { display: block; background-size:cover; } #view4:checked ~ .view-section .right img:nth-child(4) { display: block; background-size:cover; } #view5:checked ~ .view-section .right img:nth-child(5) { display: block; background-size:cover; } #view6:checked ~ .view-section .right img:nth-child(6) { display: block; background-size:cover; } #view7:checked ~ .view-section .right img:nth-child(7) { display: block; background-size:cover; } #view8:checked ~ .view-section .right img:nth-child(8) { display: block; background-size:cover; } #view9:checked ~ .view-section .right img:nth-child(9) { display: block; background-size:cover; } */ /* introduce section*/ .introduce-slide-section .slide { text-align:center; color:white; position:relative; } .introduce-slide-section .introduce-slide-sectionn-text { position: absolute; width: 100%; height:40px; left:7%; top:90%; z-index:4; border-left:2px solid #fff; color:#fff; } .introduce-slide-section .introduce-slide-sectionn-text h3 { width:20%; height: 35px; overflow: hidden; animation: typingAni 3s steps(500, end) 3; padding-left:30px; font-weight:bold; font-size:2em; } @keyframes typingAni { 0% {width: 0px } 33% {width: 100px}; 66% {width: 200px}; 100% {width: 500px}; } #introduce-slide-section-img1 { background: url('../img/introduce1.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img2 { background: url('../img/introduce2.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img3 { background: url('../img/introduce3.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img4 { background: url('../img/introduce4.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img5 { background: url('../img/introduce5.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img6 { background: url('../img/introduce6.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img7 { background: url('../img/introduce7.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img8 { background: url('../img/introduce8.jpg') center no-repeat; background-size:cover; } #introduce-slide-section-img9 { background: url('../img/introduce9.jpg') center no-repeat; background-size:cover; } .introduce-first { text-align:center; } .introduce-first h2 { font-size:60px; color:#666; margin-bottom:120px; } .introduce-second { background:url(../img/introduce-second-back.jpg) center; background-size:cover; text-align:center; } .introduce-second h3 { font-size:28px; line-height:1.5em; margin:50px 0; } .introduce-second h3:nth-child(1) { font-size:40px; } .introduce-second hr { width:48px; border:1px solid #666; } .introduce-second .card-deck { width:1150px; margin:0 auto; } .introduce-second .card-deck .card { cursor:pointer; } .introduce-second .card-deck .card a { text-decoration:none; color:#333; } .introduce-second .card-deck .card-img { height:120px; overflow:hidden; } .introduce-second .card-deck .card img { transition:all .5s; } .introduce-second .card-deck .card:hover img { transform: scale(1.2); filter:grayscale(50%) contrast(150%) sepia(150%); transition:all .5s; } .introduce-second .card-deck .card:hover .card-body .card-title { transform: scale(1.05); transition:all .5s; } .introduce-second .card-deck .card:hover .card-body .card-text { transform: scale(1.05); transition:all .5s; } .inroduce-room-section { width:100%; height:100%; } .inroduce-room-section .inroduce-room-section-inner { position:relative; width:50%; height:50%; float:left; color:#fff; } .inroduce-room-section .inroduce-room-section-inner h3 { z-index:10; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:all .5s; } .inroduce-room-section .inroduce-room-section-inner hr { display:none; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner p { display:none; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(1) { z-index:1; background:url('../img/inroduce-room-section-inner1.jpg') center; background-size:cover; } .inroduce-room-section .inroduce-room-section-inner:nth-child(1)::before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3); } .inroduce-room-section .inroduce-room-section-inner:nth-child(1):hover { background:none; background-color:#535352; } .inroduce-room-section .inroduce-room-section-inner:nth-child(1):hover h3 { font-weight:bold; top:45%; transition:all .5s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(1):hover hr { display:block; z-index:10; position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); width:10%; border:2px solid #fff; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(1):hover p { display:block; z-index:10; position:absolute; left:50%; top:60%; transform:translate(-50%, -50%); text-align:center; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(2) { background:url('../img/inroduce-room-section-inner2.jpg') center; background-size:cover; } .inroduce-room-section .inroduce-room-section-inner:nth-child(2)::before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3); } .inroduce-room-section .inroduce-room-section-inner:nth-child(2):hover { background:none; background-color:#535352; } .inroduce-room-section .inroduce-room-section-inner:nth-child(2):hover h3 { font-weight:bold; top:45%; transition:all .5s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(2):hover hr { display:block; z-index:10; position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); width:10%; border:2px solid #fff; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(2):hover p { display:block; z-index:10; position:absolute; left:50%; top:60%; transform:translate(-50%, -50%); text-align:center; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(3) { background:url('../img/inroduce-room-section-inner3.jpg') center; background-size:cover; } .inroduce-room-section .inroduce-room-section-inner:nth-child(3)::before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3); } .inroduce-room-section .inroduce-room-section-inner:nth-child(3):hover { background:none; background-color:#535352; } .inroduce-room-section .inroduce-room-section-inner:nth-child(3):hover h3 { font-weight:bold; top:45%; transition:all .5s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(3):hover hr { display:block; z-index:10; position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); width:10%; border:2px solid #fff; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(3):hover p { display:block; z-index:10; position:absolute; left:50%; top:60%; transform:translate(-50%, -50%); text-align:center; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(4) { background:url('../img/inroduce-room-section-inner4.jpg') center; background-size:cover; } .inroduce-room-section .inroduce-room-section-inner:nth-child(4)::before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3); } .inroduce-room-section .inroduce-room-section-inner:nth-child(4):hover { background:none; background-color:#535352; } .inroduce-room-section .inroduce-room-section-inner:nth-child(4):hover h3 { font-weight:bold; top:45%; transition:all .5s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(4):hover hr { display:block; z-index:10; position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); width:10%; border:2px solid #fff; transition:all 2s; } .inroduce-room-section .inroduce-room-section-inner:nth-child(4):hover p { display:block; z-index:10; position:absolute; left:50%; top:60%; transform:translate(-50%, -50%); text-align:center; transition:all 2s; } .introduce-third { background:url(../img/introduce-second-back2.jpg) center; background-size:cover; text-align:center; } .introduce-third h3 { margin-bottom:50px; font-size:36px; font-weight:bold; } .introduce-third .vertical-line { margin:0 auto; width: 1px; height: 50px; border: 1px solid #000; } .introduce-third h4 { margin-top:50px; margin-bottom:50px; font-size:24px; line-height:1.5em; } .introduce-third h4 span { font-weight:bold; } /* exterior section */ .exterior-section { text-align:center; } #exterior1 { background: url('../img/exterior1.jpg') center no-repeat; background-size:cover; } #exterior2 { background: url('../img/exterior2.jpg') center no-repeat; background-size:cover; } #exterior3 { background: url('../img/exterior3.jpg') center no-repeat; background-size:cover; } #exterior4 { background: url('../img/exterior4.jpg') center no-repeat; background-size:cover; } #exterior5 { background: url('../img/exterior5.jpg') center no-repeat; background-size:cover; } #exterior6 { background: url('../img/exterior6.jpg') center no-repeat; background-size:cover; } #exterior7 { background: url('../img/exterior7.jpg') center no-repeat; background-size:cover; } #exterior8 { background: url('../img/exterior8.jpg') center no-repeat; background-size:cover; } #exterior9 { background: url('../img/exterior9.jpg') center no-repeat; background-size:cover; } #exterior10 { background: url('../img/exterior10.jpg') center no-repeat; background-size:cover; } #exterior11 { background: url('../img/exterior11.jpg') center no-repeat; background-size:cover; } #exterior12 { background: url('../img/exterior12.jpg') center no-repeat; background-size:cover; } #exterior13 { background: url('../img/exterior13.jpg') center no-repeat; background-size:cover; } /* Facility section .facility .slick-prev, .facility .slick-next { z-index:100; position:absolute; top:50%; margin-left: -10%; } .facility .slick-prev { left:35%; } .facility .slick-next { right:25%; } .facility .facility-slide .slide1 { background:url('../img/facility1.jpg') center; background-size:cover; } .facility .facility-slide .slide2 { background:url('../img/facility2.jpg') center; background-size:cover; } .facility .facility-slide .slide3 { background:url('../img/facility3.jpg') center; background-size:cover; } .facility .facility-slide .slide4 { background:url('../img/facility4.jpg') center; background-size:cover; } .facility .facility-slide .slide5 { background:url('../img/facility5.jpg') center; background-size:cover; } .facility .facility-box { display:block; width:100%; height:100vh; background-color:rgba(0, 0, 0, 0.7); transition:all 1s; } .facility .facility-box:hover { background-color:rgba(0, 0, 0, 0.1); transition:all 1s; } .facility .facility-box:hover .facility-hover { width:100%; padding:40px 0; background-color:rgba(0, 0, 0, 0.7); transition:all 1s; } .facility .facility-box .facility-text { text-align:center; padding-top:320px; color:#fff; } .facility .facility-box h3 { font-size:2em; margin-bottom: 25px; } .facility .facility-box h4 { font-size:1em; margin-bottom: 25px; } .facility .facility-box p { font-size:0.5em; color:#fff; font-weight:lighter; line-height:1.5em; } .facility .facility-box a { display:inline-block; color:#fff; font-size:20px; background-color:#a1a890; padding:14px 30px; margin-top:50px; position:absolute; bottom:180px; left:50%; margin-left:-78px; transition: .5s; } .facility .facility-box a:hover{ background-color:#535352; transition: .5s; } */ .facility1 { background: url('../img/facility1.jpg') center no-repeat; background-size:cover; text-align:center; } .facility2 { background: url('../img/facility2.jpg') center no-repeat; background-size:cover; text-align:center; } .facility3 { background: url('../img/facility3.jpg') center no-repeat; background-size:cover; text-align:center; } .facility4 { background: url('../img/facility4.jpg') center no-repeat; background-size:cover; text-align:center; } .facility h3 { margin-top:700px !important; font-size:28px; font-weight:bold; color:#fff; margin-bottom:20px; } .facility p { color:#fff; margin-bottom:30px; } .facility img { width:30px; height:30px; cursor:pointer; } /* Tour */ .tour-visual { text-align:center; width:100%; height:400px; background:url('../img/tour-visual.jpg') center; background-size:cover; overflow:hidden; } .tour-visual .tour-visual-text { padding-top:150px; color:white; } .tour-visual .tour-visual-text h2 { font-size:2em; } .tour-visual .tour-visual-text hr { width:30%; border:1px solid #fff; margin-top:30px; margin-bottom:30px; } .tour-visual .tour-visual-text p { font-size:1.3em; letter-spacing:0.5em; } .tour { width:1024px; text-align:center; margin:0 auto; padding-top:50px; } .card-deck { margin-bottom:50px; text-decoration:none; } .tour .card-deck .card { overflow:hidden; } .tour .card-deck .card a { text-decoration:none; color:#333;} .tour .card-deck .card .card-body .card-title { margin-bottom:30px; } .tour .card-deck .card:hover .card-body .card-title, .tour .card-deck .card:hover .card-body .card-text, .tour .card-deck .card:hover img { transform: scale(1.02); transition:all .5s; } /* location */ .location-visual { text-align:center; width:100%; height:400px; background:url('../img/location-visual.jpg') center; background-size:cover; } .location-visual .location-visual-text { padding-top:150px; color:white; } .location-visual .location-visual-text h2 { font-size:2em; } .location-visual .location-visual-text hr { width:10%; border:1px solid #fff; margin-top:30px; margin-bottom:30px; } .location-visual .location-visual-text p { font-size:1.3em; letter-spacing:0.5em; } .location { width:1200px; margin:0 auto; padding-top:50px; } .location h3 { font-weight:bold; } .location p { margin-bottom:100px; } .location p span { font-weight:bold; } .location iframe { margin-bottom:70px; } /* room */ .room-section-visual-text { position: absolute; width: 100%; height:40px; left:7%; top:83%; z-index:4; border-left:2px solid #fff; color:#fff; } .room-section-visual-text h3 { padding-left:20px; font-weight:bold; } .room-section-visual-text p { font-size:1.4em; } .room-section-information { background-color:#31343b; } .room-section-information .info-title { font-size:2em; color:#b9a383; padding:100px 0px 0px 130px; } .room-section-information .info-text { font-size:1.3em; color:#b3bcd2; padding-left:130px; padding-right:130px; line-height:1.5em;} .room-section-information .info-text > h3 { border-left:2px solid #fff; padding-left:40px; margin:50px 0 50px 0; line-height:1.8em; } .room-section-information .info-text > h3 > span { font-weight:bold; color:#b3bcd2; } .room-section-information .info-text h4 { font-size:18px; color:#fff; display:inline; } .room-section-information .info-text .red { color:#f00; } .room-section-information .info-text span { color:#7d7f83; } .rooma-section { overflow:hidden; } .rooma-section video { position:absolute; bottom:0; top:0; right:0; width:100%; height:100%; background-size:100% 100%; background-position:center center; background-size: contain; object-fit:cover; z-index:3; } .rooma-section .rooma-section-text { position: absolute; width: 100%; height:40px; left:7%; top:90%; z-index:4; border-left:2px solid #fff; color:#fff; } .rooma-section .rooma-section-text h3 { width:20%; height: 35px; overflow: hidden; animation: typingAni 3s steps(500, end) 1; padding-left:30px; font-weight:bold; font-size:2em; } @keyframes typingAni { 0% {width: 0px } 33% {width: 100px}; 66% {width: 200px}; 100% {width: 500px}; } #rooma1 { background: url('../img/rooma1.jpg') center no-repeat; background-size:cover; } #rooma2 { background: url('../img/rooma2.jpg') center no-repeat; background-size:cover; } #rooma3 { background: url('../img/rooma3.jpg') center no-repeat; background-size:cover; } #rooma4 { background: url('../img/rooma4.jpg') center no-repeat; background-size:cover; } #rooma5 { background: url('../img/rooma5.jpg') center no-repeat; background-size:cover; } #rooma6 { background: url('../img/rooma6.jpg') center no-repeat; background-size:cover; } #rooma7 { background: url('../img/rooma7.jpg') center no-repeat; background-size:cover; } #rooma8 { background: url('../img/rooma8.jpg') center no-repeat; background-size:cover; } #rooma9 { background: url('../img/rooma9.jpg') center no-repeat; background-size:cover; } #rooma10 { background: url('../img/rooma10.jpg') center no-repeat; background-size:cover; } #rooma11 { background: url('../img/rooma11.jpg') center no-repeat; background-size:cover; } #rooma12 { background: url('../img/rooma12.jpg') center no-repeat; background-size:cover; } #rooma13 { background: url('../img/rooma13.jpg') center no-repeat; background-size:cover; } #rooma14 { background: url('../img/rooma14.jpg') center no-repeat; background-size:cover; } #rooma15 { background: url('../img/rooma15.jpg') center no-repeat; background-size:cover; } #rooma16 { background: url('../img/rooma16.jpg') center no-repeat; background-size:cover; } #roomb1 { background: url('../img/roomb1.jpg') center no-repeat; background-size:cover; } #roomb2 { background: url('../img/roomb2.jpg') center no-repeat; background-size:cover; } #roomb3 { background: url('../img/roomb3.jpg') center no-repeat; background-size:cover; } #roomb4 { background: url('../img/roomb4.jpg') center no-repeat; background-size:cover; } #roomb5 { background: url('../img/roomb5.jpg') center no-repeat; background-size:cover; } #roomb6 { background: url('../img/roomb6.jpg') center no-repeat; background-size:cover; } #roomb7 { background: url('../img/roomb7.jpg') center no-repeat; background-size:cover; } #roomb8 { background: url('../img/roomb8.jpg') center no-repeat; background-size:cover; } #roomb9 { background: url('../img/roomb9.jpg') center no-repeat; background-size:cover; } #roomb10 { background: url('../img/roomb10.jpg') center no-repeat; background-size:cover; } #roomb11 { background: url('../img/roomb11.jpg') center no-repeat; background-size:cover; } #roomb12 { background: url('../img/roomb12.jpg') center no-repeat; background-size:cover; } #roomb13 { background: url('../img/roomb13.jpg') center no-repeat; background-size:cover; } #roomb14 { background: url('../img/roomb14.jpg') center no-repeat; background-size:cover; } #roomb15 { background: url('../img/roomb15.jpg') center no-repeat; background-size:cover; } #roomb16 { background: url('../img/roomb16.jpg') center no-repeat; background-size:cover; } /* reserved */ .reserved { text-align:center; width:100%; height:400px; background:url('../img/introduce3.jpg') center; background-size:cover; } .reserved .reserved-visual-text { padding-top:150px; color:white; } .reserved .reserved-visual-text h2 { font-size:2em; } .reserved .reserved-visual-text hr { width:30%; border:1px solid #fff; margin-top:30px; margin-bottom:30px; } .reserved .reserved-visual-text p { font-size:1.3em; letter-spacing:0.5em; } .reserved-content { width:1000px; height:1800px; margin:0 auto;} .reserved-content iframe { margin-top:100px; width:1100px; height: 100%; } .special-visual { position:relative; left:0; top:0; } .special-visual .special-visual-text { position:absolute; bottom:0%; width:100%; height:6%; background-color:rgba(0, 0, 0, .7); color:#fff; } .special-visual .special-visual-text h3 { position:absolute; font-size:1.5em; left:7%; bottom:10%; color:#b9a383; float:left; } .special-visual .special-visual-text h3 span { color:#fff; font-size:0.6em; } #special1-slide1 { background: url('../img/special1-1.jpg') center no-repeat; background-size:cover; } #special1-slide2 { background: url('../img/special1-2.jpg') center no-repeat; background-size:cover; } #special1-slide3 { background: url('../img/special1-3.jpg') center no-repeat; background-size:cover; } #special1-slide4 { background: url('../img/special1-4.jpg') center no-repeat; background-size:cover; } #special1-slide5 { background: url('../img/special1-5.jpg') center no-repeat; background-size:cover; } #special2-slide1 { background: url('../img/special2-1.jpg') center no-repeat; background-size:cover; } #special2-slide2 { background: url('../img/special2-2.jpg') center no-repeat; background-size:cover; } #special2-slide3 { background: url('../img/special2-3.jpg') center no-repeat; background-size:cover; } #special2-slide4 { background: url('../img/special2-4.jpg') center no-repeat; background-size:cover; } #special3-slide1 { background: url('../img/special3-1.jpg') center no-repeat; background-size:cover; } #special3-slide2 { background: url('../img/special3-2.jpg') center no-repeat; background-size:cover; } #special3-slide3 { background: url('../img/special3-3.jpg') center no-repeat; background-size:cover; } #special4-slide1 { background: url('../img/special4-1.jpg') center no-repeat; background-size:cover; } #special4-slide2 { background: url('../img/special4-2.jpg') center no-repeat; background-size:cover; } #special4-slide3 { background: url('../img/special4-3.jpg') center no-repeat; background-size:cover; } /* section4 footer */ .footer-section { background-color:#222; } .footer-section .footer-inner { height:250px; } .footer-section .footer-inner .footer-left { width:50%; float:left; padding:40px 0 0 100px; line-height: 1.5em; font-size:0.7em; color:#fff; } .footer-section .footer-inner .footer-left::after { clear:both; content:""; display:block; } .footer-section .footer-inner .footer-left h2 { padding-bottom:30px; } .footer-section .footer-inner .footer-left h2 img { width:100px; } .footer-section .footer-inner .footer-right { padding:40px 0 0 300px; line-height: 1.5em; font-size:0.7em; color:#fff; } .footer-section .footer-inner .footer-right dl { float:left; width:90px; } .footer-section .footer-inner .footer-right dl dt { color:#825f3e; margin-bottom:10px; } .footer-section .footer-inner .footer-right dl dd { width:70px; } .footer-section .footer-inner .footer-right dl dd a { color:#fff; }