/* #header */ #header { position: sticky; top: 0; width: 100%; max-width: 640px; height: 86px; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: background-color 0.2s; background-color: #fff;} #header.open.down { background-color: transparent;} #header .h_inner { width: 90%; max-width: 1730px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 100;} #header .h_logo { width: 50%; max-width: 239px;} #header .h_logo a {display: inline-block; position: relative;} #header .h_logo a > img { transition: all 0.3s ease-in-out;} #header .h_logo a > img:nth-child(1) { opacity: 0;} #header .h_logo a > img:nth-child(2) { position: absolute; left: 0; top: 0; opacity: 1;} #header .h_nav {max-width: 80%;} #header .h_nav > ul { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;} #header .h_nav > ul > li { position: relative;} #header .h_nav > ul > li .h_nav_link { font-family: "reforma-1969", 'NanumSquare', sans-serif; font-size: 1.25rem; color: #000000; letter-spacing: 0.05em; display: inline-block; padding: 0.5rem; transition: all 0.3s ease-in-out;} #header .h_nav > ul > li .menu_link { display: flex; align-items: center; gap: 1rem;} #header .h_nav > ul > li .menu_link .menu_txt { position: relative;} #header .h_nav > ul > li .menu_link .menu_txt span { font-family: "reforma-1969", 'NanumSquare', sans-serif; transition: opacity 0.3s ease-in-out;} #header .h_nav > ul > li .menu_link .menu_txt span:nth-child(1) { position: absolute; right: 0; top: 0; opacity: 1;} #header .h_nav > ul > li .menu_link .menu_txt span:nth-child(2) { opacity: 0;} #header .h_nav > ul > li .menu_link .menu_iconbox { position: relative; width: 30px; height: 22px; overflow: hidden;} #header .h_nav > ul > li .menu_link .menu_icon { position: relative; width: 100%; height: 100%; transition: all 0.3s ease-in-out;} #header .h_nav > ul > li .menu_link .menu_icon.open .open_line { transition: all 0.3s ease 0s; cursor: pointer; top: 10px; position: relative; display: block;} #header .h_nav > ul > li .menu_link .menu_icon.open .open_line.hover { left: -34px; margin-top: -2px;} #header .h_nav > ul > li .menu_link .menu_icon.open .open_line::after { content: ""; display: block; width: 100%; height: 3px; position: absolute; left: 0px; top: 0px; background-color: #000000; transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1) 40ms, background-color 0.2s ease 0s} #header .h_nav > ul > li .menu_link .menu_icon.open .line_bar { display: block; width: 100%; height: 2px; background-color: transparent; transition: background-color .2s ease,opacity .2s ease; position: relative;} #header .h_nav > ul > li .menu_link .menu_icon.open .line_bar::before, #header .h_nav > ul > li .menu_link .menu_icon.open .line_bar::after { content: ""; display: block; position: absolute; left: 0px; height: 3px; background-color: #000000;} #header .h_nav > ul > li .menu_link .menu_icon.open .line_bar::before { transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1) 0s, background-color 0.2s ease 0s; width: 65%; top: 8px;} #header .h_nav > ul > li .menu_link .menu_icon.open .line_bar::after { transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1) 80ms, background-color 0.2s ease 0s; width: 100%; top: -8px;} #header .h_nav > ul > li .menu_link:hover .menu_icon.open .line_bar::before, #header .h_nav > ul > li .menu_link:hover .menu_icon.open .line_bar::after { transform: translateX(34px);} #header .h_nav > ul > li .menu_link:hover .menu_icon.open .open_line::after { transform: translateX(34px);} #header .h_nav > ul > li .menu_link .menu_icon.close { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 20px; height: 20px; display: block; overflow: hidden; opacity: 0; pointer-events: none;} #header .h_nav > ul > li .menu_link .menu_icon.close .close_line{height: 100%; width: 2px; background: #ffffff; position: absolute; border-radius: 5px; left: 9px; transition: opacity 0.2s ease 0s, background-color 0.2s ease 0s; animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1); animation-fill-mode: forwards;} #header:not(.open) .h_nav > ul > li .menu_link .menu_icon.close .close_line.line1 { transform: translateY(0) translateX(0) rotate(-45deg);animation-name: crossLeftClose; animation-delay: 0s; animation-duration: .15s; } #header:not(.open) .h_nav > ul > li .menu_link .menu_icon.close .close_line.line2 { transform: translateY(0) translateX(0) rotate(45deg); animation-name: crossRightClose; animation-delay: .06s; animation-duration: .15s } #header.white {background-color: transparent;} #header.white .h_logo a > img:nth-child(1) {opacity: 1;} #header.white .h_logo a > img:nth-child(2) {opacity: 0;} #header.white .h_nav > ul > li .h_nav_link {color: #fff;} #header.white .h_nav > ul > li .menu_link .menu_icon.open .open_line::after, #header.white .h_nav > ul > li .menu_link .menu_icon.open .line_bar::before, #header.white .h_nav > ul > li .menu_link .menu_icon.open .line_bar::after { background-color: #ffffff;} #header.sticky {background-color: #fff;} #header.sticky .h_logo a > img:nth-child(1) {opacity: 0;} #header.sticky .h_logo a > img:nth-child(2) {opacity: 1;} #header.sticky .h_nav > ul > li .h_nav_link {color: #000000;} #header.sticky .h_nav > ul > li .menu_link .menu_icon.open .open_line::after, #header.sticky .h_nav > ul > li .menu_link .menu_icon.open .line_bar::before, #header.sticky .h_nav > ul > li .menu_link .menu_icon.open .line_bar::after { background-color: #000000;} #header.open .h_nav > ul > li .menu_link .menu_txt span:nth-child(1){opacity: 0;} #header.open .h_nav > ul > li .menu_link .menu_txt span:nth-child(2){opacity: 1;} #header.open .h_nav > ul > li .menu_link .menu_icon.open {opacity: 0;} #header.open .h_nav > ul > li .menu_link .menu_icon.open .line_bar::before, #header.open .h_nav > ul > li .menu_link:hover .menu_icon.open .line_bar::after { transform: translateX(75px);} #header.open .h_nav > ul > li .menu_link .menu_icon.open .open_line::after { transform: translateX(75px);} #header.open .h_nav > ul > li .menu_link .menu_icon.close {opacity: 1; pointer-events: auto;} #header.open .h_nav > ul > li .menu_link .menu_icon.close .close_line.line1 { transform: translateY(-30px) translateX(30px) rotate(45deg); animation-name: crossRight; animation-delay: 0.29s;} #header.open .h_nav > ul > li .menu_link .menu_icon.close .close_line.line2 { transform: translateY(-30px) translateX(-30px) rotate(-45deg); animation-name: crossLeft; animation-delay: 0.15s;} #header.open { background-color: transparent;} #header.open .h_logo a > img:nth-child(1) {opacity: 1;} #header.open .h_logo a > img:nth-child(2) {opacity: 0;} #header.open .h_nav > ul > li .h_nav_link {color: #fff;} #header.open .h_nav > ul > li .menu_link .menu_icon.open .open_line::after, #header.open .h_nav > ul > li .menu_link .menu_icon.open .line_bar::before, #header.open .h_nav > ul > li .menu_link .menu_icon.open .line_bar::after { background-color: #ffffff;} /* navbox */ .navbox { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 99; pointer-events: none; overflow: hidden;} .navbox .nav_bg { position: absolute; left: 0; top: 0; z-index: 9996; width: 100%; height: 100%; transition: opacity 0.35s ease; opacity: 0; background-color: transparent;} .navbox .nav_bg .bg_box { transform: translateY(-100%); width: 100%; height: 100%; transition: transform 1s cubic-bezier(0.76,0,0.3,1); background: no-repeat center/cover;} .navbox .nav_bg .bg_item { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.06); width: 100%; height: 100%; background: no-repeat center/cover; transition: transform 1.7s cubic-bezier(0.4, 0, 0.3, 1) 0s, opacity 0.5s cubic-bezier(0.25, 0, 0.4, 1) 0s; opacity: 0;} .navbox .nav_bg .bg_item.on {opacity: 1; transform: translate(-50%,-50%) scale(1);} .navbox .nav { position: absolute; width: 90%; height: 100%; left: 50%; top: 0; transform: translateX(-50%); z-index: 9997; text-align: center; display: block; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1rem; padding: 100px 0 0; box-sizing: border-box; opacity: 0; transition: opacity 0.35s ease;} .navbox .nav > li { position: relative; width: 100%;} .navbox .nav > li .tit { overflow: hidden; text-transform: uppercase; font-size: 2.913rem; color: #ffffff; transition: opacity 0.3s ease-in-out; cursor: pointer; letter-spacing: 0.02em;} .navbox .nav > li .tit .tit_wrap { display: inline-block; position: relative; font-family: 'playfair-display', "NanumSquare", serif; transition: transform 0.6s ease-in-out 0.5s,opacity 0.25s ease; line-height: 1.1;opacity: 0; transform: translateY(103%); padding: 0.55rem 0; transition-delay: 0.4s;} .navbox .nav > li .tit .tit_wrap::after{content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background: #fff; transition: all 0.35s ease-in-out;} .navbox .nav > li .tit:hover .tit_wrap::after {width: 100%;} .navbox .nav > li.show .tit .tit_wrap::after {width: 100%;} .navbox .nav > li .tit .tit_wrap .big { font-size: 1.3em; font-family: 'playfair-display', "NotoSerifKR", serif;} .navbox .nav > li .tit.off{ opacity: 0.45;} .navbox .nav > li .nav_ul { display: none; margin-top: 2.5rem; margin-bottom: 0.5rem; text-align: center; font-size: 0;} .navbox .nav > li .nav_ul li {display: inline-block; width: 33.333%; margin-bottom: 1.75rem;} .navbox .nav > li .nav_ul.wid25 li {width: 25%;} .navbox .nav > li .nav_ul > li .nav_link { display: inline-block; font-size: 1.125rem; color: #fff; font-weight: 700; transform: rotate(-0.03deg);} .navbox.open {pointer-events: auto;} .navbox.open .nav_bg {opacity: 1;} .navbox.hidden .nav_bg .bg_box {transition-delay: 0.25s;} .navbox.open .nav_bg .bg_box { transform: translateY(0%);} .navbox.open .nav{opacity: 1;} .navbox.open .nav > li .tit .tit_wrap { opacity: 1; transform: translateY(0%);} .navbox.open .nav > li .tit:nth-child(1) .tit_wrap {transition-delay: 0.8s;} .navbox.open .nav > li .tit:nth-child(2) .tit_wrap {transition-delay: 0.84s;} .navbox.open .nav > li .tit:nth-child(3) .tit_wrap {transition-delay: 0.88s;} .navbox.open .nav > li .tit:nth-child(4) .tit_wrap {transition-delay: 0.92s;} .navbox.open .nav > li .tit:nth-child(5) .tit_wrap {transition-delay: 0.96s;} /* #footer */ #footer { position: relative; width: 100%; background-color: #0b0b0b; padding: 4rem 0;} #footer .f_inner { width: 90%; max-width: 1730px; margin: auto; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; gap: 3rem;} #footer .f_left { width: 50%; max-width: 249px;} #footer .f_left .f_logo { display: flex;} #footer .f_center { display: flex; flex-direction: column; gap: 4rem; margin-top: 1rem;} #footer .f_center .f_infobox { display: flex; flex-direction: column; gap: 0.35rem;} #footer .f_center .f_infobox .f_info_txt { font-size: 1.3rem; color: #a6a6a6;line-height: 1.8em; transform: rotate(0.03deg);} #footer .f_center .f_infobox .f_info_txt .color { color: #8cb5b5; display: inline-block;} #footer .f_center .f_copyright { display: flex; flex-wrap: wrap; gap: 2rem} #footer .f_center .f_copyright span {font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.25rem; color: #a6a6a6; letter-spacing: 0.025em;} #footer .f_right {margin-top: 0.5rem;} #footer .f_right .f_snsbox { display: flex; align-items: center; gap: 2.75rem;} #footer .f_right .f_snsbox > li > a { display: flex; transition: all 0.3s ease-in-out;} #footer .f_right .f_snsbox > li > a:hover {opacity: 0.6;} /* main */ .container {margin-top: -86px;} .main { position: relative; width: 100%; overflow: hidden;} .swiper .prev_btn::after, .swiper .next_btn::after {display: none;} .basic_slider { width: 100%;} .basic_slider .swiper-slide {position: relative; width: 100%; height: 0; padding-bottom: 60%; overflow: hidden;} .basic_slider .swiper-slide .imgbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover;} .basic_slider .pagination { bottom: 5%;} .basic_slider .pagination .swiper-pagination-bullet { position: relative; background-color: transparent; opacity: 1; border: 6px solid transparent; margin: 0 0.25rem; width: 12px; height: 12px; box-sizing: border-box;} .basic_slider .pagination .swiper-pagination-bullet::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; background-color: #fff; border-radius: 100px; opacity: 0.3; transition: all 0.35s ease-in-out;} .basic_slider .pagination .swiper-pagination-bullet::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; border: 2px solid #fff; border-radius: 100px; transition: all 0.35s ease-in-out; opacity: 0;} .basic_slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {opacity: 0;} .basic_slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {opacity: 1;} .basic_slider .swiper-line { position: absolute; top: 50%; width: 14.5%; padding: 1rem 0; z-index: 10; transform: translateY(-50%);} .basic_slider .swiper-line::before { content: ""; position: absolute; width: 100%; height: 1px; transform: translateY(-50%); background-color: rgba(255,255,255,0.5);} .basic_slider .swiper-line::after { content: ""; position: absolute; top: 50%; width: 50%; height: 1px; transform: translateY(-50%); background-color: #fff;} .basic_slider .swiper-line.left {left: 0;} .basic_slider .swiper-line.left::after {right: 0;} .basic_slider .swiper-line.right {right: 0;} .basic_slider .swiper-line.right::after { left: 0;} /* main video */ .main_vid { display: flex; height: 0; padding-bottom: 56.25%;} .main_vid iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%;} /* main1 */ .main1 { height:100vh; padding-bottom: 0;} .main1 .ms1_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover;} .main1 .ms1_txtbox { position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); width: 90%; z-index: 10; width: 90%; max-width: 1680px; text-align: center; } .main1 .ms1_txtbox .txt1 { font-family: 'playfair-display', "NotoSerifKR", serif; font-size: 2.688rem; color: #ffffff; text-transform: uppercase; margin-bottom: 1rem;} .main1 .ms1_txtbox .txt1 .big{font-size: 1.2em; font-family: 'playfair-display', "NotoSerifKR", serif; margin-bottom: 1.65rem;} .main1 .ms1_txtbox .txt2 { font-size: 1.2rem; line-height: 1.6em; color: #ffffff; transform: rotate(-0.03deg);} .main1 .scroll-indicator { width: 2px; height: 110px; background-color: rgba(255,255,255,.3); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); z-index: 1; } .main1 .scroll-indicator::before { content: ""; display: block; width: 100%; height: 30px; background-color: #FFFFFF; position: absolute; top: 0; left: 0; animation: scrollAnim 1.8s infinite ease-in; -webkit-animation: scrollAnim 1.8s infinite ease-in; } /* main2 */ .main2 { display: flex; align-items: center; padding: 10rem 0; box-sizing: border-box;} .main2 .ms2_contbox {width: 90%; margin-left: 10%;} .main2 .ms2_tit { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 2.500rem; color: #000000; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-right: 14%; box-sizing: border-box;} .main2 .ms2_tit i { font-size: 0.7em; font-weight: bold;} .main2 .ms2_slider { width: 100%; margin-top: 1.5rem;} .main2 .ms2_slider .swiper-slide { width: 87%; margin-right: 6%;} .main2 .ms2_slider .swiper-slide .item {display: block;} .main2 .ms2_slider .swiper-slide .item .imgbox {position: relative; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; margin-bottom: 1.5rem} .main2 .ms2_slider .swiper-slide .item .ms2_img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover;; transition: all 0.35s ease-in-out;} .main2 .ms2_slider .swiper-slide .item .txtbox .tit { position: relative; font-family: 'playfair-display', "NotoSerifKR", serif; color: #000000; font-size: 2.063rem;} .main2 .ms2_slider .swiper-slide .item .txtbox .tit::after { content: ""; display: block; width: 2.5rem; height: 1px; background-color: #000000; margin: 1.4rem 0;} .main2 .ms2_slider .swiper-slide .item .txtbox .desc { font-size: 1.5rem; letter-spacing: -0.025em; color: #333333; transform: rotate(-0.03deg); margin-bottom:0.35rem} .main2 .ms2_slider .swiper-slide .item .txtbox .date { font-family: "futura-pt", 'NanumSquare', sans-serif; color: #666666; font-size: 1.25rem;} /* main3 */ /* main4 */ .main4 { margin: 8rem 0 10rem;} .main4 .ms4_contbox { position: relative; width: 90%; max-width: 1650px; margin: auto; height: 100%; display: flex; flex-direction: column; gap: 3.75rem;} .main4 .ms4_titbox { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;} .main4 .ms4_titbox .tit { font-family: "reforma-1969", 'NanumSquare', sans-serif; font-size: 1.8rem; letter-spacing: -0.025em; color: #000000;} .main4 .ms4_titbox .tit span { font-family: "reforma-1969", 'NanumSquare', sans-serif;} .main4 .ms4_titbox .desc { font-size: 1.2rem; line-height: 1.6em; letter-spacing: -0.025em; color: #000000; transform: rotate(-0.03deg);} .main4 .ms4_vidbox { position: relative; width: 100%; height: 0; padding-bottom: 45%; overflow: hidden;} .main4 .ms4_vidbox .ms4_thum { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;transform: translate(-50%,-50%); transition: all 0.35s ease-in-out; background: no-repeat center/cover;} .main4 .ms4_vidbox .ms4_cursor { will-change: transform; position: absolute; width: 100%; height: 100%;} .main4 .ms4_vidbox .ms4_cursor .play_icon { width: 4.25rem; height: 4.25rem; display: flex; align-items: center;justify-content: center; font-size: 1.25rem; color: #364848; border-radius: 100%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 1s;} .ms4_vid_pop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; transform: translateZ(0); z-index: 1005; background-color: #000; opacity: 0; pointer-events: none; padding: 5%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: all 0.35s ease-in-out;} .ms4_vid_pop.show { opacity: 1; pointer-events: auto;} .ms4_vid_pop .ms4_vid_close { position: absolute; top: 3%; right: 5%; font-size: 2rem; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;} .ms4_vid_pop .vid_box { position: relative; width: 100%; max-width: 1680px; height: 0; padding-bottom: 45%; overflow: hidden;} .ms4_vid_pop .vid_box .ms4_video { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%);} .ms4_vid_pop .vid_box .pop_ms4_cursor { will-change: transform; position: absolute; width: 100%; height: 100%; opacity: 0; transition: all 0.35s ease-in; pointer-events: none;} .ms4_vid_pop .vid_box .pop_ms4_cursor.show {opacity: 1;} .ms4_vid_pop .vid_box .pop_ms4_cursor .play_icon { width: 4.25rem; height: 4.25rem; display: flex; align-items: center;justify-content: center; font-size: 1.25rem; color: #364848; border-radius: 100%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 1s;} /* main5 */ .main5 .ms5_bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover; } .main5 .ms5_contbox { position: relative; width: 80%; max-width: 1650px; margin: auto; display: flex; flex-direction: column-reverse; padding: 15rem 0 6rem; gap: 4rem;} .main5 .ms5_contbox .txtbox .tit { font-family: "reforma-1969", 'NanumSquare', sans-serif; font-size: 4.3rem; letter-spacing: -0.025em; color: #fff; margin-bottom: 1.5rem;} .main5 .ms5_contbox .txtbox .desc { font-size: 1.35rem; line-height: 1.8em; color: #ffffff; transform: rotateX(-0.03deg);} .main5 .ms5_contbox .morebox { margin-left: auto; position: relative; background-color: rgba(104,104,104,0.3); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; width:9.5rem; height: 9.5rem; transition: all 0.35s ease-in-out;} .main5 .ms5_contbox .morebox:hover { background-color: rgba(0,0,0,0.3);} .main5 .ms5_contbox .morebox::before { content: ""; position: absolute; left: -5rem; top: 50%; width: 6.25rem; height: 1px; background: #fff;} .main5 .ms5_contbox .morebox .ms5_more { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;} .main5 .ms5_contbox .morebox .ms5_more .txt { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.438rem; color: #ffffff;} /* main6 */ .main6 { margin: 10rem 0px 10rem;} .main6 > .inner { width: 90%; margin: auto;} .main6 .ms6_titbox { display: flex; flex-direction: column; align-items: center; margin-bottom: 6rem;} .main6 .ms6_titbox .bar { display: block; width: 1px; height: 5rem; background-color: #797979;} .main6 .ms6_titbox .tit { font-family: "NotoSerifKR", serif; color: #1c2a51; font-size: 3rem; margin: 3rem 0 1rem;} .main6 .ms6_titbox .desc { font-size: 1.4rem; line-height: 1.6em; letter-spacing: -0.025em; color: #454545; font-weight: 700; transform: rotate(-0.03deg);} .main6 .ms6_contbox { display: flex; flex-wrap: wrap; gap: 4rem 1rem;} .main6 .ms6_contbox .ms6_item { width: calc((100% - 1rem)/2);} .main6 .ms6_contbox .ms6_item > a { display: block;} .main6 .ms6_contbox .ms6_item .ms6_img { width: 100%; height: 0; padding-bottom: 115%; background: no-repeat center/cover;} .main6 .ms6_contbox .ms6_item .txtbox { display: flex; flex-direction: column; margin-top: 1.5rem;} .main6 .ms6_contbox .ms6_item .txtbox .tit { font-family: "reforma-1969", 'NanumSquare', sans-serif; font-size: 1.375rem; color: #010101; text-transform: uppercase; margin-bottom: 1.15rem;} .main6 .ms6_contbox .ms6_item .txtbox .tit span { font-family: "NotoSerifKR", serif; font-size: 1.15em;} .main6 .ms6_contbox .ms6_item .txtbox .desc { display: block; font-size: 1rem; letter-spacing: -0.025em; color: #010101; transform: skewX(-0.03deg); margin-bottom: 1.75rem;} .main6 .ms6_contbox .ms6_item .txtbox .more { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1rem; color: #000000; display: flex; align-items: center; gap: 1.25rem;} .main6 .ms6_contbox .ms6_item .txtbox .more i { font-weight: bold;} /* main7 */ .main7 { padding: 17rem 0 10rem;} .main7 .ms7_bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover; transition: transform 8s cubic-bezier(.1,.2,.7,1);} .main7 .ms7_titbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;} .main7 .ms7_titbox .tit { font-family: 'playfair-display', "NotoSerifKR", serif; font-size: 3.125rem; letter-spacing: -0.025em; color: #fff; text-transform: uppercase; margin-bottom: 1.5rem;} .main7 .ms7_titbox .tit .big { font-family: 'playfair-display', "NotoSerifKR", serif; font-size: 1.2em;} .main7 .ms7_titbox .desc { font-size: 1.125rem; letter-spacing: -0.025em; line-height: 1.8em; color: #fff; transform: rotateX(-0.03deg);} .main7 .ms7_titbox .btnbox { width: 85%; display: flex; align-items: center; gap: 1.5rem; margin: 10rem auto 0;} .main7 .ms7_titbox .btnbox .ms7_link { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.313rem; letter-spacing: 0.025em; color: #fff; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; transition: all 0.35s ease-in-out; flex: 1; height: 60px;} .main7 .ms7_titbox .btnbox .ms7_link:hover{background-color: #364848;border-color: #364848; } /* sub */ .sub_section {position: relative; width: 100%; } .sub_top { position: relative; width: 100%; height: 0; padding-bottom: 100%; opacity: 1; overflow: hidden;} .sub_top.mb { margin-bottom: 8rem;} .sub_top.slide { padding-bottom: 60%; padding-top: 86px;} .sub_top .img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: no-repeat center/cover;} .sub_top .txtbox { position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 2.85rem; width: 90%;} .sub_top .txtbox .tit { font-family: 'playfair-display', "NotoSerifKR", serif; font-size: 3.125rem; color: #ffffff; line-height: 1.1;} .sub_top .txtbox .tit .big { font-size: 1.2em; font-family: 'playfair-display', "NotoSerifKR", serif;} .sub_top .txtbox .bar { display: block; width: 1px; height: 3.125rem; background-color: #ffffff;} .sub_top .txtbox .desc { font-size: 1.2rem; color: #ffffff; transform: rotate(-0.03deg);} .sub_inner {width: 90%; margin: auto; position: relative;} .sub_titbox { text-align: center; margin-bottom: 4rem;} .sub_titbox.left { text-align: left;} .sub_titbox.right { text-align: right;} .sub_titbox .tit { font-family: 'playfair-display', "NotoSerifKR", serif; font-size: 2.375rem; color: #000000; } .sub_titbox .tit + .sub {margin-top: 1rem;} .sub_titbox .sub { font-size: 1.25rem; font-weight: 700; color: #292929; transform: rotate(-0.03deg);} .sub_titbox .desc { font-size: 1.25rem; line-height: 1.6em; letter-spacing: -0.025em; color: #292929; transform: rotate(-0.03deg);} .sub_titbox .txt1 { font-family: "NotoSerifKR", serif; font-size: 1.65rem; color: #000000; letter-spacing: -0.025em;} .sub_titbox .txt2 { font-family: 'playfair-display', "FuturaStd", serif; font-size: 3.125rem; color: #000000; text-transform: uppercase; letter-spacing: 0.025em;} .sub_titbox .txt2 span { font-family: "NotoSerifKR", serif; font-size: 0.95em; font-weight: 400;} /* About Us 외부전경 */ .exterior_page .ext1_slogan { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin-bottom: 4.5rem;} .exterior_page .ext1_slogan .txt { font-family: "reforma-1969", 'NanumSquare', sans-serif; font-size: 1.75rem; letter-spacing: -0.025em; color: #1c2a51;} .exterior_page .ext1_vidbox { position: relative; width: 100%; height: 0; padding-bottom: 56%; overflow: hidden;} .exterior_page .ext1_vidbox .ext1_video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .exterior_page .ext1_vidbox .ext1_cursor { will-change: transform; position: absolute; width: 100%; height: 100%; padding: 0; pointer-events: none; transition: all 0.25s ease-in;} .exterior_page .ext1_vidbox .ext1_cursor.remove { opacity: 0;} .exterior_page .ext1_vidbox .ext1_cursor .play_icon { width: 4.25rem; height: 4.25rem; display: flex; align-items: center;justify-content: center; font-size: 1.25rem; color: #364848; border-radius: 100%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 1s;} .exterior_page .ext1_desc {margin: 4.5rem 0; text-align: center;} .exterior_page .ext1_desc .txt{ font-size: 1.25rem; letter-spacing: -0.025em; color: #000000; transform: skewX(-0.03deg); line-height: 1.8em; word-break: keep-all; } /* About Us 오시는길 */ .location_page .sub_titbox { margin-bottom: 4rem;} .location_page .sub_titbox .descbox { width: 90%; margin: 4rem auto 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;} .location_page .mapbox { position: relative; width: 100%; height: 0; padding-bottom: 59.5%;} .location_page .mapbox iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .location_page .map_infobox { margin: 5rem auto 7rem; display: flex; flex-direction: column; gap: 2rem; max-width: 70%;} .location_page .map_infoitem { position: relative; width: 100%;} .location_page .map_infoitem .tit { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; color: #222222; margin-bottom: 0.5rem; transform: rotate(-0.03deg);} .location_page .map_infoitem .desc { font-size: 1.15rem; letter-spacing: -0.025em; color: #222222; transform: rotate(-0.03deg);} /* Accommodation 객실미리보기 */ .PoolVilla_page .poo_vidbox { position: relative; width: 100%; height: 0; padding-bottom: 56.25%;} .PoolVilla_page .poo_vidbox .poo_video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .PoolVilla_page .poo_vidbox .poo_play_btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; transition: all 0.35s ease-in-out; pointer-events: none;} .PoolVilla_page .poo_vidbox .poo_play_btn.remove {opacity: 0;} .PoolVilla_page .poo_vidbox .poo_play_btn:hover { opacity: 0.5;} .PoolVilla_page .poo_vidbox .poo_play_btn > i { color: #ffffff; font-size: 4rem; margin-right: -0.5rem; margin-left: -0.5rem;} .PoolVilla_page .poo_vidbox .poo_play_btn > .txt { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.1rem; letter-spacing: 0.025em; color: #ffffff;} .PoolVilla_page .poo_txtbox { margin: 4.5rem 0 9rem; padding: 0 1rem;} .PoolVilla_page .poo_txtbox .tit { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.7rem; color: #000000; margin-bottom: 2rem;} .PoolVilla_page .poo_txtbox .descbox { display: flex; flex-direction: column; gap: 2rem;} .PoolVilla_page .poo_txtbox .descbox .desc { font-size: 1.35rem; line-height: 1.55em; color: #919191; transform: rotate(-0.03deg);} .PoolVilla_page .poo_gallery { display: flex; flex-wrap: wrap;} .PoolVilla_page .poo_gallery .item { width: 50%;} .PoolVilla_page .poo_gallery .item > a { position: relative; display: block; width: 100%;} .PoolVilla_page .poo_gallery .item .imgbox { position: relative; width: 100%; height: 0; padding-bottom: 72%; overflow: hidden;} .PoolVilla_page .poo_gallery .item .imgbox .poo_gallery_thum { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover; transition: all 0.35s ease-in-out;} .PoolVilla_page .poo_gallery .item .imgbox:hover .poo_gallery_thum{transform: scale(1.05);} .PoolVilla_page .poo_gallery .item .txtbox { position: absolute; left: 0; bottom: 0; padding: 0 1.5rem 2.25rem; width: 100%; box-sizing: border-box;} .PoolVilla_page .poo_gallery .item .txtbox .txt { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.35rem; color: #fff; letter-spacing: 0.025em; display: flex; align-items: center; gap: 0.5rem;} .PoolVilla_page .poo_gallery .item .txtbox .txt i { font-size: 0.8em;} .PoolVilla_page .poo_gallery_wrap { background-color: #e4e4e4;} .PoolVilla_page .poo_gallery_wrap .poo_gallery { margin-bottom: 0;} /* Accommodation 객실상세 */ .sub_top .pool_slider { position: absolute; left: 0; top: 86px; width: 100%; height: calc(100% - 86px);} .sub_top .pool_slider .swiper-slide .pool_slide_img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover;} .sub_top .pool_slider .pagination { bottom: 7%;} .sub_top .pool_slider .pagination .swiper-pagination-bullet { position: relative; background-color: transparent; opacity: 1; border: 6px solid transparent; margin: 0 0.3rem; width: 12px; height: 12px; box-sizing: border-box;} .sub_top .pool_slider .pagination .swiper-pagination-bullet::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; background-color: #fff; border-radius: 100px; opacity: 0.3; transition: all 0.35s ease-in-out;} .sub_top .pool_slider .pagination .swiper-pagination-bullet::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 100px; transition: all 0.35s ease-in-out; opacity: 0;} .sub_top .pool_slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {opacity: 0;} .sub_top .pool_slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {opacity: 1;} .sub_top .pool_slider .swiper-line { position: absolute; top: 50%; width: 14.5%; padding: 1rem 0; z-index: 10; transform: translateY(-50%);} .sub_top .pool_slider .swiper-line::before { content: ""; position: absolute; width: 100%; height: 1px; transform: translateY(-50%); background-color: rgba(255,255,255,0.5);} .sub_top .pool_slider .swiper-line::after { content: ""; position: absolute; top: 50%; width: 50%; height: 1px; transform: translateY(-50%); background-color: #fff;} .sub_top .pool_slider .swiper-line.left {left: 0;} .sub_top .pool_slider .swiper-line.left::after {right: 0;} .sub_top .pool_slider .swiper-line.right {right: 0;} .sub_top .pool_slider .swiper-line.right::after { left: 0;} .PoolVilla_page .room_tit { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.42rem; font-weight:700; color: #c7ae87; margin-bottom: 0.9rem;} .PoolVilla_page .room_desc {font-size: 1.25rem; line-height: 1.6em; letter-spacing: -0.025em; color: #222222; transform: rotate(-0.03deg);} .PoolVilla_page .room_desc.bold {} .PoolVilla_page .room_desc.ver2 {font-size: 1.2rem;} .PoolVilla_page .room_desc.ver3 {font-size: 1.2rem; color:red;} .PoolVilla_page .room_add { font-size: 1.1rem; line-height: 1.6em; letter-spacing: -0.025em; color: #ababab; transform: rotate(-0.03deg);} .PoolVilla_page .room_desc + .room_add { margin-top: 1.25rem;} .PoolVilla_page .room_detail_info1 { display: flex; flex-direction: column-reverse; gap: 8rem;} .PoolVilla_page .room_detail_info1 .room_imgbox {position: relative; width: 94%; height: 0; padding-bottom: 50%;} .PoolVilla_page .room_detail_info1 .room_img { position: absolute; width: 100%; height: 100%; opacity: 1; background: no-repeat center/cover;} .PoolVilla_page .room_detail_info1 .room_img::before { content: ''; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 2; display: block; transition: all 1s ease; -webkit-transition: all 1s ease;} .PoolVilla_page .room_detail_info1 .room_img.aos-animate::before {width: 100%; background: rgba(0,0,0,0);} .PoolVilla_page .room_detail_info1 .room_img::after { content: ''; width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: #ddd; z-index: 1; display: block; transition: all 1s 0.3s ease; -webkit-transition: all 1s 0.3s ease;} .PoolVilla_page .room_detail_info1 .room_img.aos-animate::after { width: 0;} .PoolVilla_page .room_detail_info1 .room_txtbox { position: relative; flex: 1; padding: 0 5%;} .PoolVilla_page .room_detail_info1 .room_txtbox::before { content: ""; display: block; width: 3rem; height: 1px; background: #666666; margin-bottom: 5.5rem;} .PoolVilla_page .room_detail_info1 .room_txtbox .info_box { display: flex; flex-wrap: wrap; gap: 3rem 1rem;} .PoolVilla_page .room_detail_info1 .room_txtbox .info_box .info_item { width: calc(50% - 0.5rem);} .PoolVilla_page .room_detail_info2 { margin: 8rem 0; display: flex; flex-direction: column; gap: 4rem;} .PoolVilla_page .room_detail_info2 .room_infobox { position: relative;} .PoolVilla_page .room_detail_info2 .room_infobox .left { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d0d0d0; padding: 0.75rem 1.15rem 0.75rem 0.5rem; gap: 1rem;} .PoolVilla_page .room_detail_info2 .room_infobox .left .tit { font-size: 1.5rem; font-weight: 700; color: #222222;} .PoolVilla_page .room_detail_info2 .room_infobox .left .arrow { font-size: 1.5rem; color: #000000; display: flex; transition: all 0.35s ease-in-out; transform: rotate(-180deg);} .PoolVilla_page .room_detail_info2 .room_infobox.show .left .arrow { transform: rotate(0deg);} .PoolVilla_page .room_detail_info2 .room_infobox .right { background-color: #f7f7f7; padding: 3.3rem 1.15rem 4rem;} .PoolVilla_page .room_detail_info2 .room_infobox .right .info_item + .info_item { margin-top: 2.25rem;} .PoolVilla_page .room_detail_info2 .room_infobox .right .listbox { display: flex; flex-direction: column; gap: 1.2rem;} .PoolVilla_page .room_detail_info2 .room_infobox .right .listbox .txt { position: relative; font-size: 1.2rem; line-height:1.5; letter-spacing: -0.025em; color: #222222; padding-left: 1rem; transform: rotate(-0.03deg);} .PoolVilla_page .room_detail_info2 .room_infobox .right .listbox .txt::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.25rem; height: 0.25rem; background: #adadad; border-radius: 50%;} .PoolVilla_page .room_btnbox { margin-bottom: 12rem; display: flex;justify-content: center;} .PoolVilla_page .room_btnbox .room_reverse_btn { display: flex; align-items: center; justify-content: center; width: 300px; height: 65px; background-color: #fff; border: 1px solid #c7ae87; font-size: 1.15rem; font-weight: 700; color: #c7ae87; letter-spacing: -0.025em; transform: rotate(-0.03deg);transition: all 0.35s ease-in-out;} .PoolVilla_page .room_btnbox .room_reverse_btn:hover { color: #fff; background-color: #c7ae87;} .PoolVilla_page .poo_gallery.deatil .item { width: 33.333%;} .PoolVilla_page .poo_gallery.deatil .item .imgbox { padding-bottom: 80%;} .PoolVilla_page .poo_gallery.deatil .item .txtbox { padding: 1.1rem 1.25rem 1.25rem;} .PoolVilla_page .poo_gallery.deatil .item .txtbox::before { content: ""; width: 8.25rem; height: 1px; position: absolute; left: 0; top: 0; background-color: #fff; opacity: 0.3;} .PoolVilla_page .poo_gallery.deatil .item .txtbox::after { content: ""; width: 2rem; height: 1px; position: absolute; left: 6.25rem; top: 0; background-color: #fff;} .PoolVilla_page .poo_gallery.deatil .item .txtbox .txt { font-size: 1.1rem;} /* Special 부대시설 미리보기 */ .SpecialList_page .sub_top.mb { margin-bottom: 6rem;} .SpecialList_page .spe1_section .sub_titbox { margin-bottom: 6.3rem; margin-top:8rem;} .SpecialList_page .spe1_section .sub_titbox .tit { font-weight: 600; margin-bottom: 1rem;} .SpecialList_page .spe_gallery { position: relative; width: 100%; display: flex; flex-wrap: wrap;} .SpecialList_page .spe_gallery .item { position: relative; width: 50%; height: 0; padding-bottom: 86%;} .SpecialList_page .spe_gallery .item > a { position: absolute; left:0; top:0; display: block; width: 100%; height: 100%; overflow: hidden;} .SpecialList_page .spe_gallery .item .spe_thum { width: 100%; height: 100%; background: no-repeat center/ cover; transition: all 0.35s ease-in-out;} .SpecialList_page .spe_gallery .item .txtbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.35s ease-in-out; width: 90%;} .SpecialList_page .spe_gallery .item .txtbox .num { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 2.6rem; color: #ffffff; margin-bottom: 1rem;} .SpecialList_page .spe_gallery .item .txtbox .tit { font-size: 1.35rem; color: #ffffff; transform: rotate(-0.03deg); margin-bottom: 3.25rem;} .SpecialList_page .spe_gallery .item .txtbox .more { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.15rem; color: #fff; padding-bottom: 0.25rem; border-bottom: 1px solid #fff;} .SpecialList_page .spe_gallery .item .hover_txtbox { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; text-align: center; background: #1b567e; padding: 1rem 0; box-sizing: border-box; transition: all 0.35s ease-in-out; transform: translateY(55px);} .SpecialList_page .spe_gallery .item .hover_txtbox.show { transform: translateY(0);} .SpecialList_page .spe_gallery .item .hover_txtbox .txt { font-size: 1.125rem; color: #fff; transform: rotate(-0.03deg);} .SpecialList_page .spe_gallery .item:hover .spe_thum { transform: scale(1.05);} .SpecialList_page .spe_gallery .item:hover .txtbox { opacity: 0;} .SpecialList_page .spe_gallery .item:hover .hover_txtbox { transform: translateY(0);} .SpecialList_page .spe_gallery .item2 { position: relative; width: 100%; height: 0; padding-bottom: 86%;} .SpecialList_page .spe_gallery .item2 > a { position: absolute; left:0; top:0; display: block; width: 100%; height: 100%; overflow: hidden;} .SpecialList_page .spe_gallery .item2 .spe_thum { width: 100%; height: 100%; background: no-repeat center/ cover; transition: all 0.35s ease-in-out;} .SpecialList_page .spe_gallery .item2 .txtbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.35s ease-in-out; width: 90%;} .SpecialList_page .spe_gallery .item2 .txtbox .num { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 2.6rem; color: #ffffff; margin-bottom: 1rem;} .SpecialList_page .spe_gallery .item2 .txtbox .tit { font-size: 1.35rem; color: #ffffff; transform: rotate(-0.03deg); margin-bottom: 3.25rem;} .SpecialList_page .spe_gallery .item2 .txtbox .more { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.15rem; color: #fff; padding-bottom: 0.25rem; border-bottom: 1px solid #fff;} .SpecialList_page .spe_gallery .item2 .hover_txtbox { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; text-align: center; background: #1b567e; padding: 1rem 0; box-sizing: border-box; transition: all 0.35s ease-in-out; transform: translateY(55px);} .SpecialList_page .spe_gallery .item2 .hover_txtbox.show { transform: translateY(0);} .SpecialList_page .spe_gallery .item2 .hover_txtbox .txt { font-size: 1.125rem; color: #fff; transform: rotate(-0.03deg);} .SpecialList_page .spe_gallery .item2:hover .spe_thum { transform: scale(1.05);} .SpecialList_page .spe_gallery .item2:hover .txtbox { opacity: 0;} .SpecialList_page .spe_gallery .item2:hover .hover_txtbox { transform: translateY(0);} /* Special 부대시설 상세 */ .sub_top .special_slider { width: 100%; height: 100%;} .sub_top .special_slider .swiper-slide .special_slide_img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover;} .sub_top .special_slider .pagination { bottom: 7%;} .sub_top .special_slider .pagination .swiper-pagination-bullet { position: relative; background-color: transparent; opacity: 1; border: 6px solid transparent; margin: 0 0.5rem; width: 12px; height: 12px; box-sizing: border-box;} .sub_top .special_slider .pagination .swiper-pagination-bullet::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; background-color: #fff; border-radius: 100px; opacity: 0.3; transition: all 0.35s ease-in-out;} .sub_top .special_slider .pagination .swiper-pagination-bullet::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 100px; transition: all 0.35s ease-in-out; opacity: 0;} .sub_top .special_slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {opacity: 0;} .sub_top .special_slider .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {opacity: 1;} .sub_top .special_slider .swiper-line { position: absolute; top: 50%; width: 14.5%; height: 1px; background-color: rgba(255,255,255,0.5); z-index: 10; transform: translateY(-50%);} .sub_top .special_slider .swiper-line::after { content: ""; position: absolute; top: 0; width: 50%; height: 1px; background-color: #fff;} .sub_top .special_slider .swiper-line.left {left: 0;} .sub_top .special_slider .swiper-line.left::after {right: 0;} .sub_top .special_slider .swiper-line.right {right: 0;} .sub_top .special_slider .swiper-line.right::after { left: 0;} .SpecialItem_page .sub_titbox { margin-top: 12rem;} .SpecialItem_page .sub_titbox .sub { margin-bottom: 1.75rem;} .SpecialItem_page .sub_titbox .txt2 { margin-bottom: 3rem;} .SpecialItem_page .sub_titbox .desc { line-height: 1.8em; font-size: 1.35rem;} .SpecialItem_page .sub_titbox.ver2 { margin-top: 0; margin-bottom: 6rem;} .SpecialItem_page .facility_infobox { margin: 8rem 0; display: flex; flex-direction: column; align-items: center; gap: 5rem; text-align: center;} .SpecialItem_page .facility_infobox .info_item .sub { font-size: 1.4rem; letter-spacing: -0.025em; font-weight: 700; color: #1d1d1d; transform: rotate(-0.03deg); margin-bottom: 1.5rem;} .SpecialItem_page .facility_infobox .info_item .desc { font-size: 1.25rem; letter-spacing: -0.025em; line-height: 1.85em; color: #1d1d1d; transform: rotate(-0.03deg);} .SpecialItem_page .facility_banner {position: relative; width: 100%} .SpecialItem_page .facility_banner .banner_img { position: relative; width: 100%; height: 0; padding-bottom: 50%; opacity: 1; background: no-repeat center/cover;} .SpecialItem_page .facility_banner .banner_img::before { content: ''; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 2; display: block; transition: all 1s ease; -webkit-transition: all 1s ease;} .SpecialItem_page .facility_banner .banner_img.aos-animate::before {width: 100%; background: rgba(0,0,0,0);} .SpecialItem_page .facility_banner .banner_img::after { content: ''; width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: #ddd; z-index: 1; display: block; transition: all 1s 0.3s ease; -webkit-transition: all 1s 0.3s ease;} .SpecialItem_page .facility_banner .banner_img.aos-animate::after { width: 0;} .SpecialItem_page .special_list { margin: 5rem 0; display: flex; align-items: center;} .SpecialItem_page .special_list .special_controlbox { width: 14%; display: flex; flex-direction: column; align-items: center;} .SpecialItem_page .special_list .special_controlbox .txtbox { display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem;} .SpecialItem_page .special_list .special_controlbox .txtbox .txt { font-family: 'playfair-display', "NotoSerifKR", serif; font-size: 1.563rem; line-height: 1; padding-right: 0.25rem; color: #1d1d1d; writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg);} .SpecialItem_page .special_list .special_controlbox .next_btn, .SpecialItem_page .special_list .special_controlbox .prev_btn { position: relative; top: auto; left: auto; right: auto; margin: 0; width: auto; height: auto; font-size: 1.2rem; color: #1d1d1d;} .SpecialItem_page .special_list .special_controlbox .next_btn { margin-bottom: 1.25rem;} .SpecialItem_page .special_list .special_sliderbox { flex: 1;} .SpecialItem_page .special_list .special_list_slider {width: 100%;} .SpecialItem_page .special_list .special_list_slider .swiper-slide { width: 68.5%; height: 0; padding-bottom: 60%; margin-right: 1.85rem;} .SpecialItem_page .special_list .special_list_slider .swiper-slide > a { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;} .SpecialItem_page .special_list .special_list_slider .special_list_thum { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center/cover; transition: all 0.35s ease-in-out;} .SpecialItem_page .special_list .special_list_slider .swiper-slide .txtbox { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding: 0px 8% 6%; box-sizing: border-box; transition: all 0.35s ease-in-out;} .SpecialItem_page .special_list .special_list_slider .swiper-slide .txtbox .num { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.25rem; letter-spacing: 0.025em;color: #fff;} .SpecialItem_page .special_list .special_list_slider .swiper-slide .txtbox .tit { font-family: "futura-pt", 'NanumSquare', sans-serif; font-size: 1.3rem; letter-spacing: 0.025em; color: #ffffff;} .SpecialItem_page .special_list .special_list_slider .swiper-slide:hover .special_list_thum{transform: scale(1.15);} .SpecialItem_page .special_list .special_list_slider .swiper-slide:hover .txtbox{opacity: 1;} .special_list .prev_btn::after, .special_list .next_btn::after {display: none;} /*------------------------------------------------------------------------------------------------*/ /* offer */ .specialOffer_page .contents {position:relative;background:#fff;z-index:360;top:0;} .specialOffer_page #list_item_btn { font-size:15px;color:#737373;border:1px solid #c6a582;text-align:center;display:block;margin:100px auto;width:210px;line-height:50px;transition:all 0.3s;-webkit-transition:all 0.3s; } .specialOffer_page #list_item_btn:hover {letter-spacing:3px;} /* promotion */ .specialOffer_page .list_wrap {margin:250px 0 100px;overflow:hidden;} .specialOffer_page .list_wrap h3 {font-size:30px; font-weight:600;color:#444444;margin:0 auto 80px;position:relative;margin-left: 7%;line-height: 1.5;} .specialOffer_page .list_wrap .tab {width: 100%;padding: 40px 0;background-color: #f8f8f9;margin-bottom: 70px;} .specialOffer_page .list_wrap .tab ul {width: 95%;margin: 0 auto;display: flex;justify-content: space-evenly;} .specialOffer_page .list_wrap .tab ul li {} .specialOffer_page .list_wrap .tab ul li a {font-size: 20px;color: #adadad;} .specialOffer_page .list_wrap .tab ul li.active a {color: #000000;text-decoration: underline;text-underline-offset: 15px;font-weight: bold;} .specialOffer_page .list_wrap .offers {width:90%;margin:0 auto;overflow:hidden;display:flex;justify-content:space-between;flex-wrap:wrap;} .specialOffer_page .list_wrap .offers dl {width:47%;margin:0 0 80px;min-height:500px;position:relative;} .specialOffer_page .list_wrap .offers dl dt {height:270px;width:100%;overflow:hidden;} .specialOffer_page .list_wrap .offers dl dt .img { width:100%;height:100%; transform: scale(1); transition:all 0.3s ease-in-out; } .specialOffer_page .list_wrap .offers dl dd {margin-top:30px;word-break:keep-all;} .specialOffer_page .list_wrap .offers dl dd a {display:block;} .specialOffer_page .list_wrap .offers dl dd h4 {font-size:20px;color:#222222;margin-bottom:15px;line-height:1.5;font-weight:bold;} .specialOffer_page .list_wrap .offers dl dd h4 span {display: block;font-size: 14px;color: #585858;margin-bottom: 25px;} .specialOffer_page .list_wrap .offers dl dd p { font-size:14px;color:#737373;line-height:1.5em;word-break:keep-all; white-space:normal;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; } .specialOffer_page .list_wrap .offers dl dd span.date {display:block;font-size:16px;color:#737373;margin-top:50px;position:absolute;left:0;bottom:0;} .specialOffer_page .list_wrap .offers dl dd .view_btn {width:160px;line-height:40px;text-align:center;color:#fff;background:#b49f82;margin-top:30px;transition:letter-spacing 0.3s ease-in-out;border:1px solid #b49f82} .specialOffer_page .list_wrap .offers dl dd .view_btn:hover {background:none;color:#b49f82;letter-spacing:2px;border:1px solid #b49f82} .specialOffer_page .cont_wrap{max-width:1030px; margin:0 auto; position:relative; padding:180px 0 180px;} .specialOffer_page .cont_wrap .tit_box{position:relative; display:block; padding:15px 0;} .specialOffer_page .cont_wrap .tit_box .tit{color:#212121; font-size:32px;text-align:center;margin-bottom:50px;} .specialOffer_page .cont_wrap .tit_box .tit .date{display:block; color:#737373;font-size:16px;margin-top:25px;} .specialOffer_page .cont_wrap .cont {padding:40px 0 90px; } .specialOffer_page .cont_wrap .cont h4 {font-size:28px;color:#212121;margin:80px 0 0px 0;text-align:center;font-weight:bold;} .specialOffer_page .cont_wrap .cont img {display:block;margin:0 auto;max-width:900px;height:auto;width: 90%;} .specialOffer_page .cont_wrap .cont p{margin-top:50px; color:#6d6d6e; font-size:16px; line-height:160%;text-align:center;line-height:1.8em;word-break:keep-all;} .specialOffer_page .cont_wrap .cont .loca {margin:10px 0 80px;line-height:2em;} .specialOffer_page .cont_wrap a{ margin:45px auto 0; width:215px; height:50px; line-height:55px; background-color:#c6a582; color:#fff; font-size:15px; display:block; text-align:center; } /* travel */ .travel_el .cont p {text-align:left;} .TouristArea_page {} .TouristArea_page .contents {padding-top:30px;} .TouristArea_page .contents .tlst {width:90%;margin:45px auto;} .TouristArea_page .contents .tlst .img {height:225px;width:100%;} .TouristArea_page .contents .tlst .cont {width:100%;margin:20px 0;} .TouristArea_page .contents .tlst .cont span {display:block;color:#76a3c1;font-size:18px;font-weight:normal;} .TouristArea_page .contents .tlst .cont h3 {font-size:30px;float:left;color:#3e3e3e;margin-bottom:30px;width:100%;margin-top:10px;font-weight:normal;} .TouristArea_page .contents .tlst .cont p {color:#6c6c6c;line-height:1.8em;font-size:16px;} /*------ woc - travel ------*/ .TouristArea_page .contents .tlst_01 .img {background:url(../../images/travel/1.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_02 .img {background:url(../../images/travel/2.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_03 .img {background:url(../../images/travel/3.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_04 .img {background:url(../../images/travel/4.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_05 .img {background:url(../../images/travel/5.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_06 .img {background:url(../../images/travel/6.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_07 .img {background:url(../../images/travel/7.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_08 .img {background:url(../../images/travel/8.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_09 .img {background:url(../../images/travel/9.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_10 .img {background:url(../../images/travel/10.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_11 .img {background:url(../../images/travel/11.jpg) no-repeat 50% 50%;background-size:cover;} .TouristArea_page .contents .tlst_12 .img {background:url(../../images/travel/12.jpg) no-repeat 50% 50%;background-size:cover;} /* ------------------------------------------------------------------------------- */ /* reserve */ .reservation_page .content {} .reservation_page .tab01 {display:none;} .reservation_page .tab02 {display:block;} .reservation_page .tab02 > h3 {font-size:20px;display:block;border-top:1px solid #5f5162;background:#f1f1f1;padding:20px;} .reservation_page .tab02 .info ul {width:95%;margin: 30px auto 0;} .reservation_page .tab02 .info ul li {line-height:1.8em;color:#333;font-size:15px; font-weight: bold;} .reservation_page .tab02 .price {margin:80px 0 70px;} .reservation_page .tab02 .price h3 {font-size:20px;display:block;border-top:1px solid #5f5162;background:#f1f1f1;padding:20px;} .reservation_page .tab02 .price ul {width:95%;margin: 30px auto 0;} .reservation_page .tab02 .price ul li {line-height:1.8em;color:#4d4d4d;font-size:15px;} .reservation_page .tab02 .notice ul {margin-top:50px;margin-left:30px;} .reservation_page .tab02 .notice ul li {line-height:1.8em;color:#4d4d4d;font-size:15px;} .reservation_page .tab02 .rv_notice {margin:80px 0 70px;} .reservation_page .tab02 .rv_notice h3 {font-size:20px;display:block;border-top:1px solid #5f5162;background:#f1f1f1;padding:20px;} .reservation_page .tab02 .rv_notice ul {width:95%;margin: 30px auto 0;} .reservation_page .tab02 .rv_notice ul li {line-height:1.8em;color:#4d4d4d;font-size:12px;} .reservation_page .tab02 .refund {margin-bottom:200px;} .reservation_page .tab02 .refund h3 {font-size:20px;display:block;border-top:1px solid #5f5162;background:#f1f1f1;padding:20px;} .reservation_page .tab02 .refund h4 {font-size:20px;text-align:left;margin: 20px 0 20px 5%;font-weight:normal;} .reservation_page .tab02 .refund table {width:95%;margin:40px auto 0;} .reservation_page .tab02 .refund table thead tr th {line-height:1.5em;padding:10px 0;background:#f1f1f1;border-right:1px solid #c0c0c0;font-weight:normal;font-size:14px;font-family:'NanumBarunGothic';} .reservation_page .tab02 .refund table thead tr th:nth-child(1) {border-left:1px solid #c0c0c0;} .reservation_page .tab02 .refund table tbody tr {border-bottom:1px solid #c0c0c0;} .reservation_page .tab02 .refund table tbody tr td { text-align:center;padding:10px 0;color:#a45959;font-family:'NanumBarunGothic';font-weight:normal;font-size:14px; border-right:1px solid #c0c0c0; } .reservation_page .tab02 .refund table tbody tr td:nth-child(1) {border-left:1px solid #c0c0c0;} .reservation_page .tab02 .refund ul {margin:30px 0 0 5%;} .reservation_page .tab02 .refund ul li {line-height:1.8em;color:#4d4d4d;font-size:15px;} .rv_table {display:block;margin:0 auto;} .reservation_page .content .click_btn { width:350px;color:#b09375;border:1px solid #b09375;text-align:center;display:block;margin:50px auto;font-size:18px;line-height:50px;overflow:hidden; font-family:'NanumBarunGothic'; } /* table */ .Notice_page .content {padding-top: 150px;} .Notice_page .content .cont {width:100%;} .Notice_page .iframe {width:95%;margin:0 auto 100px;} .Notice_page > h3 {font-size:25px;color:#444444;margin:0 auto 80px;position:relative;margin-left: 10%;line-height: 1.5;} .Notice_page .tab {width: 100%;padding: 40px 0;background-color: #f8f8f9;} .Notice_page .tab ul {width: 88%;margin: 0 auto;display: flex;justify-content: flex-start;} .Notice_page .tab ul li {margin-right: 50px;} .Notice_page .tab ul li a {font-size: 20px;color: #adadad;} .Notice_page .tab ul li.active a {color: #000000;text-decoration: underline;text-underline-offset: 15px;font-weight: bold;} .Notice_page .content> h3 {font-size:25px;color:#444444;margin:100px auto 80px;position:relative;margin-left: 10%;line-height: 1.5;} .Notice_page .content .tab {width: 100%;padding: 40px 0;background-color: #f8f8f9;margin-bottom: 70px;} .Notice_page .content .tab ul {width: 95%;margin: 0 auto;display: flex;justify-content: space-evenly;} .Notice_page .content .tab ul li {margin-right: 0;} .Notice_page .content .tab ul li a {font-size: 20px;color: #adadad;} .Notice_page .content .tab ul li.active a {color: #000000;text-decoration: underline;text-underline-offset: 15px;font-weight: bold;} @media screen and (max-width:599px) { } @media screen and (max-width:320px) { }