/* 
 * main CSS Document
 * KOWEB
 */


/* area 공통 */
article[class^=area_] h2 {margin-bottom: 13rem; font-size: 42rem;   color: #222;}

.area_title h2 {margin-bottom:10rem; font-size:42rem; font-weight:600;}
.area_btn {position:relative; display:inline-block; padding-bottom:5rem; font-weight:700;}
.area_btn span {padding-left:13rem; transition:.3s;}
.area_btn::after {position:absolute; left:0; bottom:0; content:''; width:100%; height:2rem; background:#111;}
.area_btn:hover span {padding-left:25rem;}

.deco {position:absolute;}
.deco i {position: absolute; display: inline-block;}
.deco i img {width: 100%;}

/* area_visual */
.area_visual {position:relative; height: 970rem; overflow: hidden;}
.area_visual::after {position:absolute; left: 0; bottom: -1rem; content:''; width: 100%; height: 40rem; background:url(../image/main_round.svg) no-repeat center bottom / cover; z-index: 8;}
.area_visual .main_slider {width: 100%; height:100%;}
.area_visual .swiper-slide {height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.area_visual .vs_text {position: absolute; left:0; top:0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width:100%; height:100%; text-align: center; color: #fff; box-sizing: border-box; z-index: 8;}
.area_visual .vs_text h2 {flex-basis: 100%; text-transform: uppercase; font-size: var(--yx_FS72) !important; text-shadow: 0 5rem 100rem rgba(0, 0, 0, .5); letter-spacing: -8rem;}
.area_visual .vs_text h2 span {display: inline-block; animation: jump 2s infinite; font-size: var(--yx_FS72) !important; font-weight: bold; animation-delay: calc(.1s * var(--i));}
.area_visual .vs_text h2 span.space {margin-left: var(--yx_FS24);}
.area_visual .vs_text p {font-size: 42rem; font-weight: 600;}
.area_visual .swiper-pagination {position:absolute; bottom: 5%;}
.area_visual .swiper-pagination-bullet {position:relative; width:30rem; height:30rem; margin:0 !important; border-radius:100%; background:transparent; opacity:.5;}
.area_visual .swiper-pagination-bullet::after {position:absolute; left:50%; top:50%; content:''; width:5rem; height:5rem; border-radius:100%; background:#fff; transform:translate(-50%, -50%);}
.area_visual .swiper-pagination-bullet-active {opacity:1; border:1px solid #fff;}
.area_visual .deco {left:0; bottom: 0; width: 100%; z-index: 8;}
.area_visual .deco i:nth-child(1) {left: 230rem; bottom: -115rem; width: 412rem; height: 250rem; animation: jump 2s linear infinite; }
.area_visual .deco i:nth-child(2) {bottom: -20rem; width: 412rem; height: 250rem; animation: jump 1.5s linear infinite; }
.area_visual .deco i:nth-child(3) {right: 220rem; bottom: -70rem; width: 550rem; height: 235rem; animation: jump 2s linear infinite;}
.area_visual .deco i:nth-child(4) {right: 0; bottom: 15rem; width: 600rem; height: 235rem; animation: jump 1.5s linear infinite;}


/* area_intro */
.area_intro { padding:185rem 0; background:#fff;}
.area_intro .wrapper {display:grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap:0 80rem;}
.area_intro span {display:block; margin:0 0 80rem; font-size:17rem; color:#689b9e;}
.area_intro p {margin-top: 30rem; color: #444; line-height: 2;}
.area_intro .img {position:relative;}
.area_intro .img .deco {left:0; top:0; width: 100%; height: 100%;}
.area_intro .img .deco i:nth-child(1) {left: -210rem; top: 84rem; width: 48rem; animation: leftRight 3s linear 0s infinite alternate;}
.area_intro .img .deco i:nth-child(2) {left: -120rem; top: 20rem; width: 190rem; transform-origin: right bottom; animation: shake 3s linear 0s infinite alternate;}
.area_intro .img .deco i:nth-child(3) {right:-160rem; top: 100rem; width: 100rem; animation: rightLeft 3s linear 0s infinite alternate;}
.area_intro .img .deco i:nth-child(4) {right:-165rem; bottom: 80rem; width:210rem; transform-origin: left bottom; animation: shake 3s linear 0s infinite alternate;}
.area_intro .img > img {position: relative; max-width:100%; border-radius: 70rem ;}


/* area_room */
.area_room {position:relative; padding:120rem 0 240rem; color:#444; background:url(../image/ms_bg01.jpg) no-repeat top center / cover;}
.area_room .waves {position: absolute; left:0; top:0; transform: translate(0, -100%);} 
.area_room .waves use {animation: wave 25s cubic-bezier(.55,.5,.45,.5) infinite; animation-duration: 20s;}
.area_room::before {position:absolute; left:50%; top:0; content:''; width:1px; height:70%; margin-left:-100rem; background:linear-gradient(180deg, rgba(247,235,226,0) 0%, rgba(247,235,226,1) 15%);}
.area_room .area_title {position:relative; width: calc(50% - 100rem); z-index: 8;}
.area_room .area_title p {color: #333;}
.area_room .area_title a {transition: all 0.6s; display:inline-block; margin-top:40rem; padding:20rem 30rem 20rem 35rem; font-size: 15rem; font-weight: 600; color:#fff; border-radius: 50rem; background:#e75a56;}
.area_room .area_title a i{display: inline-block; margin-left: 14px;}
.area_room .area_title a:hover{background: var(--yx_CTwo);}
.area_room .tab_list {display:flex; justify-content: flex-end; width:70%;}
.area_room .tab_list li {position:relative; margin-left:30rem; padding-left:30rem; font-size:20rem; color:#7a6f70; cursor: pointer; transition:.3s;}
.area_room .tab_list li::before {position:absolute; left:0; top:50%; content:''; width:5rem; height:5rem; border-radius:100%; background:#b6b0a8; transform:translate(50%, -50%);}
.area_room .tab_list li:last-child::before {display:none;}
.area_room .tab_list li:hover {margin-top: .5rem; font-size:var(--yx_FS22); font-weight:800; color:#ee5e5e;}
.area_room .tab_container {position:relative; margin-top: var(--yx_FS72);}
.area_room .room_exp {width:100%; margin:30rem 0 0;}
.area_room .yx_InProList{display: block; width:100%; position: relative;}
.area_room .yx_ImgCover{padding-bottom: 100%; width: 100%; border-radius:36rem;}
.area_room .mySwiper .swiper-slide:hover .yx_ImgCover img{transform: scale(1.1);}
.area_room .mySwiper .swiper-slide:hover h3{color: var(--yx_CTwo);}
.area_room .yx_InProList h3 {margin-bottom:10rem; font-size:var(--yx_FS22); transition: all 0.6s; font-weight:800; color: #222;}
.area_room .yx_InProList p{font-size:var(--yx_FS16); color: #666; margin-top: 5px;}
.area_room .area_btn {margin-top:20rem; font-size: var(--yx_FS14); font-weight: 600; color:#aaa;}
.area_room .area_btn::after {background:#aaa; opacity: .5;}
.area_room .yx_InProList section {position:relative;}
.area_room .yx_InProList img {width:100%;}
.area_room .mySwiper .swiper-slide {height: auto; background-size: cover; background-repeat: no-repeat; background-position: center;}
.area_room .swiper-button {position:absolute; top:39%; display: block; width:60rem; height:60rem; margin-top:0 !important; cursor: pointer; border-radius: 100%; background-color: #fff; box-shadow: 5rem 0 20rem rgba(0, 0, 0, .08); z-index: 8;}
.area_room .swiper-button::after {position: absolute; left: 50%; top: 50%; content:''; width: 20rem; height: 20rem; margin-left: 3rem; background:url(../image/slider_arrow.svg) no-repeat center; transform: translate(-50%, -50%); opacity: .3;}
.area_room .room-button-prev {left: 0; transform: translate(-50%, -50%);}
.area_room .room-button-prev::after {margin-left: -2rem; transform: translate(-50%, -50%) scaleX(-1);}
.area_room .room-button-next {right:0; transform: translate(50%, -50%);}
.area_room .deco {position:absolute; left:0; top:0;}
.area_room .deco i:nth-child(1) {left: 85rem; top: -170rem; width: 35rem; height: 45rem; transform: scaleX(-1) rotate(-20deg);}
.area_room .deco i:nth-child(2) {left: 80rem; top: -135rem; width: 175rem; height: 175rem; animation: shake 3s linear 0s infinite alternate;}




/* area_event */
.area_event {position: relative; }
.area_event .waves {position: absolute; left:0; top:0; transform: translate(0, -99%); height: 240px; width: 100%;} 
.area_event .waves use {animation: wave 25s cubic-bezier(.55,.5,.45,.5) infinite; animation-duration: 20s;}
.area_event .area_title {position:relative; padding:150rem 0 245rem; color:#fff; background: url(../image/ms_bg02.jpg) no-repeat center; background-size: cover; } 
.area_event .area_title h2 {color: #fff;}
.area_event .area_title .area_btn {position:absolute; right:0; top:50%; color:#fff;}
.area_event .area_title .area_btn::after {background:#fff;}
.area_event .area_title .deco {width: 100%; height: 100%;}
.area_event .area_title .deco i {right: 215rem; bottom: -95rem; width: 380rem; height: 155rem; animation: goRL 3s linear 0s infinite alternate;}
.area_event .area_slider {position:relative; margin-top:-160rem;}
.area_event .area_slider:nth-child(2n) {border-left:1px solid #efefef;}
.area_event .area_slider .event_slider {border-radius: 0 70rem 70rem 0; background: #fff;  box-shadow: 13rem 10rem 33rem rgba(0, 0, 0, .04);}
.area_event .swiper-slide-active {border-left:none !important;}
.area_event .area_slider:before {position:absolute; left:0; top:0; content:''; width:33.33%; height:100%; background:#fff; transform:translateX(-100%); box-shadow: 13rem 10rem 33rem rgba(0, 0, 0, .04);}
.area_event .swiper-slide {padding:80rem; box-sizing:border-box; border-left:1px solid #efefef;}
.area_event .swiper-slide .sl_date {position:relative; display:inline-block; padding-bottom:2rem;   font-size:15rem; color:#689b9e;}
.area_event .swiper-slide .sl_date::after {position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:#689b9e;}
.area_event .swiper-slide dl {margin:40rem 0 50rem;}
.area_event .swiper-slide dl dt {transition: all 0.6s; margin-bottom:10rem; font-size:24rem; font-weight:800; color:#222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.area_event .swiper-slide dl dd {color:#666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.area_event .swiper-slide .sl_img {border-radius: 20rem; overflow: hidden;}
.area_event .swiper-slide img {max-width:100%; transition: all 0.6s;}
.area_event .swiper-slide:hover img{transform: scale(1.1);}
.area_event .swiper-slide:hover dt{color: var(--yx_CTwo);}
.area_event .event_pagination {position:absolute; left:-50rem; bottom:80rem; display:flex; flex-direction:column-reverse; width:auto; gap:20rem 0;}
.area_event .event_pagination span {display:block; width:8rem; height:8rem; margin:0 !important; background:#ddd; opacity:1;}
.area_event .event_pagination span.swiper-pagination-bullet-active {background:var(--yx_CTwo);}
.area_event .event_button {position:absolute; right:-30rem; top:80rem; transform:translate(100%, 0); border-radius: 80rem; background:#333;}
.area_event .event_button li {position:relative; left:auto; right:auto; top:auto; width:80rem; height:80rem; margin-top:0;}
.area_event .event_button li:after {font-size:14rem; color:rgba(255, 255, 255, .8);}
.area_event .event_button .swiper-button-prev:after {margin-top: 10rem; transform:rotate(90deg);}
.area_event .event_button .swiper-button-next::before {position:absolute; left:50%; top:0; content:''; width:30rem; height:1rem; background:#fff; opacity: .2; transform:translate(-50%, 0);}
.area_event .event_button .swiper-button-next:after {margin-top: -10rem; transform:rotate(90deg);}
.area_event > .deco {width: 100%;}
.area_event > .deco i:nth-child(1) {right: -75rem; top: -300rem; width: 274rem; height: 295rem; z-index: 77; transform-origin: center bottom; animation: shake 3s linear 0s infinite alternate;}
.area_event > .deco i:nth-child(2) {right: 135rem; top: -110rem; width: 149rem; height: 190rem; z-index: 77; transform-origin: center bottom; animation: shake 3s linear 1s infinite alternate;}


/* area_customer */
.area_customer {position: relative;}
.area_customer .deco {width: 100%; height:100%;}
.area_customer .deco i:nth-child(1) {right: 95rem; top: 15rem; width: 60rem; height: 122rem;}
.area_customer .deco i:nth-child(2) {right: 45rem; top: 123rem; width: 260rem; height: 200rem;}
.area_customer .deco i:nth-child(3) {right: 338rem; top: 97rem; width: 45rem; height: 45rem; animation: upDown 2s linear 0s infinite alternate;}
.area_customer .deco i:nth-child(4) {left: 70rem; top: 42%; width: 70rem; height: 95rem;}
.area_customer .deco i:nth-child(5) {left: 162rem; top: 52%; width: 45rem; height: 45rem; animation: upDown 2s linear 0s infinite alternate;}
.area_customer .deco i:nth-child(6) {left: -75rem; top: 55%; width: 190rem; height: 130rem;}
.area_customer .deco i:nth-child(7) {right: 45rem; bottom: 30rem; width: 200rem; height: 180rem;}

.area_customer .wrapper {display:grid; align-items:stretch; grid-template-columns: repeat(2, 1fr); padding:190rem 0 200rem;}
.area_customer .map {position:relative; border-radius: 70rem; background:url(../image/main_map.jpg) no-repeat center; border:1px solid #e1e1e1;}
.area_customer .map i {position:absolute; left:45%; top:43%; width:30rem; height:30rem;}
.area_customer .map i::before {position:absolute; left:50%; top:50%; content:''; width:30rem; height:30rem; margin:-10rem 0 0 -15rem; border-radius:100%; background:var(--yx_CTwo);; opacity:.15; animation:scale 2s both infinite;}

.area_customer .map_info {margin:50rem 0 34rem; padding-left:100rem;}
.area_customer .map_info .call {margin:50rem 0 60rem;}
.area_customer .map_info .call p {position:relative; padding-left:25rem; color:#444;}
.area_customer .map_info .call p:before {position:absolute; left:0; top:1.5rem; content:''; width:15rem; height:15rem; background:url(../image/main_location.svg) no-repeat center;}
.area_customer .map_info .call a {display:inline-block; margin-top:5rem; font-size:45rem; font-weight:1000; color: #222;}
.area_customer .map_info ul {display:grid; grid-template-columns:repeat(2, 1fr); border-bottom:1px solid #e1e1e1;}
.area_customer .map_info ul li {position:relative; border-top:1px solid #e1e1e1;}
.area_customer .map_info ul li:nth-child(2n)::before {position:absolute; left:0; top:50%; content:''; width:1rem; height:50%; background:#e1e1e1; transform:translate(0, -50%);}
.area_customer .map_info ul li a {position:relative; display:flex; align-items:center; gap:0 20rem; padding:36rem 30rem; box-sizing: border-box;}
.area_customer .map_info ul li a::after {opacity: 0; visibility: hidden; position: absolute; left:0; bottom: 0; content:''; width: 100%; height: 3rem; background-color:var(--yx_CTwo); transition: .3s;}
.area_customer .map_info ul li a i {display:block; }
.area_customer .map_info ul li a img.on {display:none;}
.area_customer .map_info ul li a dl dt {margin-top:5rem; font-weight:600; transition:all .3s; transform: all 0.6s;}
.area_customer .map_info ul li a dl dd {font-size:15rem; color:#666; transform: all 0.6s;}
.area_customer .map_info ul li a:hover img {display:none;}
.area_customer .map_info ul li a:hover img.on {display:block;}
.area_customer .map_info ul li a:hover dl dt {font-weight: 800; color:var(--yx_CTwo);}
.area_customer .map_info ul li:hover a::after {opacity: 1; visibility: visible;}
.area_customer .map_info ul li a .yx_icon{font-size:42rem; color:#666;  transform: all 0.6s;}
.area_customer .map_info ul li:hover .yx_icon{color: var(--yx_CTwo);}
.area_customer .map_info ul li:hover dd{color: var(--yx_CTwo);}

/* area_banner */
.area_banner {position:relative; text-align:center; color:#fff; background:url(../image/ms_bg03.jpg) no-repeat center / cover; background-attachment:fixed;}
.area_banner::before {position:absolute; left:0; top:0; content:''; width:100%; height:55rem; background:url(../image/main_wave.svg) repeat-x; transform: scaleY(-1);}
article.area_banner h2 {display: flex; justify-content: left; align-items: center; margin-bottom: 0; padding:180rem 0 130rem; font-size:35rem; font-weight:400; color:#fff; }
.area_banner h2 span {margin-top: 1rem; padding-left:15rem; font-size:39rem;}




@keyframes slide_bg {
    0%{ transform: scale(1.05); }
    100%{ transform: scale(1); }
}

@keyframes scale {
    0%{ transform: scale(1); }
    100%{ transform: scale(3); }
}


 @media (min-width:2000px){}
 @media all and (max-width:1560px){

    .area_event .event_pagination {position:relative; left:auto; bottom:auto; flex-wrap:nowrap; flex-direction: row; gap:0 20rem; width:100%; height:80rem; align-items:center; padding:0 80rem;box-sizing: border-box;}
    .area_event .event_button li {width:80rem; height:80rem;}

 }


 @media all and (max-width:1620px){
   .area_event .area_slider.wrapper {width: 100%; max-width: 100%;}
   .area_event .area_slider .event_slider {width: 90%; margin: 0;}
   .area_event .event_button {right: 30rem; transform: none;}
 }

 @media all and (max-width:1024px){

   article[class^=area_] h2 {font-size: 32rem;}

   .area_visual {height: 800rem !important;}
   .area_visual .vs_text h2 {font-size: 52rem; text-shadow: 0 5rem 50rem rgba(0, 0, 0, .5);}
   .area_visual .vs_text p {font-size: 18rem;}
   .area_visual .deco i:nth-child(1) {left: 175rem; width: 300rem; height: 200rem;}
   .area_visual .deco i:nth-child(2) {bottom: -40rem; width: 300rem; height: 200rem;}
   .area_visual .deco i:nth-child(3) {width: 400rem; height: 200rem; right: 145rem; bottom: -92rem;}
   .area_visual .deco i:nth-child(4) {bottom: -40rem; width: 400rem; height: 200rem;}
   
   .area_intro {padding: 105rem 0 150rem;}
   .area_intro .wrapper {grid-template-columns:1.5fr 1fr; gap:0 30rem;}
   .area_intro span {font-size: 14rem; margin-bottom:40rem;}
   .area_intro h2 {margin-bottom:10rem;}
   .area_intro img {margin-top:57rem;}
   .area_intro .img > img {border-radius: 30rem;}
   .area_intro .img .deco i:nth-child(1) {display: none;}
   .area_intro .img .deco i:nth-child(2) {left: -85rem; width: 135rem;}
   .area_intro .img .deco i:nth-child(3),
   .area_intro .img .deco i:nth-child(4) {display: none;}

   .area_room {padding: 100rem 0 150rem;}
   .area_room::before {display:none;}
   .area_room .waves {height: 200rem;}
   .area_room .area_title {position:relative; width:100%; padding-bottom:var(--yx_FS36); border-bottom:1px solid #f7ebe2;}
   .area_room .area_title a {position:absolute; right:0; top:6rem; margin-top:0; font-size: 14rem;}
   .area_room .tab_list, 
   .area_room .yx_ImgCover .room_exp {width:100%; margin:30rem 0 0 0;}
   .area_room .yx_ImgCover .room_exp h3 {font-size: 27rem;}
   .area_room .yx_ImgCover section {margin-top:65rem;}
   .area_room .tab_list li {padding-right: 15rem; margin-right: 15rem; font-size: var(--yx_FS18) !important;}
   .area_room .tab_list li::before {margin-top: -2rem;}
   .area_room .deco i:nth-child(1) {left: 30rem; top: -115rem; width: 20rem; height: 20rem;}
   .area_room .deco i:nth-child(2) {left: 32rem; top: -93rem; width: 95rem; height: 95rem;}
   .area_room .mySwiper {border-radius: 30rem;}

   .area_room .swiper-button {background: none; box-shadow: none; border-radius: 0;}
   .area_room .swiper-button::after {width: 100%; height: 100%; background-image: url(../image/slider_arrow_white.svg); background-size: 30%; opacity: 1;}
   .area_room .room-button-prev,
   .area_room .room-button-next {transform: translate(0, -50%);}
#footer .footer_logo img{
	height: 50px;
}
   .area_event  {background:#fff;}
   .area_event .area_title {padding:100rem 0 50rem;}
   .area_event .area_title .deco i {right: 115rem; bottom: -70rem; width: 300rem; height: 135rem;}
   .area_event .area_slider {margin-top:0; box-shadow: 13rem 10rem 33rem rgba(0, 0, 0, .04);}
   .area_event .area_slider:before {display:none;}
   .area_event .area_slider .event_slider {width: 100%; border-radius:0; box-shadow: none;}
   .area_event .swiper-slide {padding:50rem;}
   .area_event .swiper-slide .sl_date {font-size: 14rem;}
   .area_event .swiper-slide .sl_img {border-radius: 10rem;}
   .area_event .swiper-slide dl {margin:30rem 0 35rem;}
   .area_event .swiper-slide dl dt {font-size: 18rem; margin-bottom: 8rem;}
   .area_event .event_pagination {padding:0 160rem 0 50rem; border-top: 1rem solid #efefef;}
   .area_event > .deco i:nth-child(1) {right: -50rem; top: -130rem; width: 190rem; height: 200rem;}
   .area_event > .deco i:nth-child(2) {display: none;}

   .area_event .event_button {top: auto; bottom: 0; right: 0; display: flex; align-items: flex-end; width: auto; transform: none; border-radius: 0;}
   .area_event .event_button li {position: relative; left: auto; right: auto; top: auto; margin-top: 0;}
   .area_event .event_button .swiper-button-prev:after,
   .area_event .event_button .swiper-button-next:after {margin-top: 2rem; transform: none;}
   .area_event .event_button .swiper-button-next::before {left: 0; top: 50%; width: 1rem; height: 30rem; transform: translate(0, -50%);}

   .area_customer {display:flex; flex-wrap:wrap; flex-direction: column-reverse;}
   .area_customer .wrapper {padding: 150rem 0 135rem; grid-template-columns: 1fr;}
   .area_customer .map {width: 100%; height:550rem; border-radius: 30rem; background-size: cover;}
   .area_customer .map_info {margin:50rem 0 0; padding-left:0;}
   .area_customer .map_info .call {margin:30rem 0 40rem;}
   .area_customer .map_info .call a {font-size: 37rem;}
   .area_customer .deco {display: none;}

   .area_banner {padding:160rem 0 100rem;}
   article.area_banner h2 {flex-wrap: wrap; padding: 0;}
   article.area_banner h2 span {flex-basis: 100%; font-size: 37rem;}


 }

 @media all and (max-width:860px){
   html{font-size:0.13020833333333335vw;}

   .area_visual {height: 680rem !important;}
   .area_visual .vs_text h2 {margin-bottom: 5rem; font-size: 45rem; letter-spacing: -5.5rem;}
   .area_visual .deco i:nth-child(1) {left: 108rem; bottom: -100rem; width: 200rem; height: 155rem;}
   .area_visual .deco i:nth-child(2) {bottom: -50rem; width: 200rem; height: 155rem;}
   .area_visual .deco i:nth-child(3) {width: 300rem; height: 155rem; right: 118rem; bottom: -80rem;}
   .area_visual .deco i:nth-child(4) {bottom: -40rem; width: 300rem; height: 160rem;}

    .area_intro {padding:85rem 0 120rem;}
    .area_intro .wrapper {grid-template-columns:1fr; gap:50rem 0;}
    .area_intro span {margin-top:0;}
    .area_intro .img {height: 400rem; background: url(../image/intro_img.jpg) no-repeat center / cover; border-radius: 30rem;}
    .area_intro .img > img {display: none;}
    .area_intro .img .deco {display: none;}

    .area_room {padding:85rem 0 120rem;}
    .area_room .waves {height: auto;}
    .area_room .deco i:nth-child(1) {left: 32rem; top: -60rem; width: 15rem; height: 15rem;}
    .area_room .deco i:nth-child(2) {top: -45rem; left: 30rem; width: 75rem; height: 75rem;}


    .area_event .area_title {padding:80rem 0 50rem;}
    .area_event .event_button li {width:50rem; height:50rem;}
    .area_event .event_pagination {height:50rem; padding:0 100rem 0 50rem;gap:0 10rem;}
    .area_event .event_pagination span {width:5rem; height:5rem; }
    .area_event .deco {display: none;}

    .area_customer .wrapper {padding:80rem 0 120rem;}
    .area_customer .map {height: 460rem;}

    .area_banner {padding: 120rem 0 80rem;}
 }

 @media all and (max-width:540px){
   html{font-size:0.26666666666666665vw;}
   body {font-size: 13rem;}

   article[class^=area_] h2 {font-size: 20rem;}
    .area_btn {font-size:12rem;}
    .area_btn::after {height:1rem;}

    .area_visual {    height: 80vw !important;
    max-height: 500px;}
    .area_visual .vs_text {left:50%; max-width:92%; transform:translate(-50%, 0);}
    .area_visual .vs_text h2 {font-size:22rem; letter-spacing: -3rem; margin: 20rem 0 10rem; text-shadow: 0 5rem 30rem rgba(0, 0, 0, .1);}
    .area_visual .vs_text h2 span.space {margin-left: 10rem;}
    .area_visual .vs_text p {font-size:13rem;}
    .area_visual .swiper-pagination {margin-top: 50rem;}
    .area_visual .swiper-pagination-bullet {width:20rem; height:20rem;}
    .area_visual .swiper-pagination-bullet::after {width:4rem; height:4rem;}
    .area_visual .deco i:nth-child(1) {left: 60rem; bottom: -80rem;}
    .area_visual .deco i:nth-child(1), .area_visual .deco i:nth-child(2) {width: 120rem; height: 110rem;}
    .area_visual .deco i:nth-child(3) {right: 70rem; bottom: -67rem; width: 160rem; height: 100rem;}
    .area_visual .deco i:nth-child(4) {width: 160rem; height:100rem;}
.area_room .area_title p{font-size: 12px;}
    .area_intro {padding: 65rem 0 75rem;}
    .area_intro .wrapper {gap:30rem 0;}
    .area_intro span {margin:0 0 20rem; font-size:11rem;}
    .area_intro h2 {font-size:24rem;}
    .area_intro p {margin-top: 10rem; font-size: var(--yx_FS16); line-height: 1.7; font-weight: 300;}
    .area_intro .img {height: 220rem; border-radius: 15rem;}
.area_room .area_title a{display: none !important;}
    .area_room {padding: 55rem 0 75rem;}
    .area_room .waves {width: 100%;}
    .area_room .area_title  {padding-bottom: 30rem;  border-bottom: none;}
    .area_room .area_title a {position:relative; top:auto; margin-top:25rem; padding:12rem 20rem; font-size:12rem;}
    .area_room .area_title a span {padding-left:20rem; background-size:13rem;}
    .area_room .tab_list {flex-wrap: wrap; gap: 7rem 0; margin: 0; padding-top: 0; justify-content: left !important;}
    .area_room .tab_list li {padding-right:0; margin-right:30px; font-size:var(--yx_FS16) !important;}
	.area_room .tab_list li ul{
		width: 100%;
		justify-content: left;
	}
    .area_room .tab_list li::before {width:2rem; height:2rem; }
    .area_room .yx_InProList .room_exp {margin-top:30rem;}
    .area_room .yx_InProList .room_exp h3 {font-size:18rem;}
    .area_room .yx_InProList .room_exp p {font-weight: 300;}
    .area_room .yx_InProList .area_btn {margin-top:20rem; font-size: 12rem; font-weight: 400;}
    .area_room .yx_InProList section {margin-top:40rem;}
    .area_room .swiper-button {width: 40rem; height: 40rem;}
    .area_room .mySwiper {border-radius: 15rem;}
    .area_room .deco {width: 100%;}
    .area_room .deco i:nth-child(1) {top: -50rem; left: auto; right: 30rem; width: 10rem; height: 10rem; transform: scaleX(1) rotate(-20deg);}
    .area_room .deco i:nth-child(2) {top: -40rem; left: auto; right: 30rem; width: 50rem; height: 50rem;}
    
    .area_event .area_title {padding:48rem 0 40rem;}
    .area_event .area_title .area_btn {position:relative; top:auto; margin-top:20rem;}
    .area_event .swiper-slide {padding:35rem 20rem;}
    .area_event .swiper-slide .sl_date {font-size:12rem;}
    .area_event .swiper-slide dl {margin:20rem 0 25rem;}
    .area_event .swiper-slide dl dt {font-size:14rem; margin-bottom: 5rem;}
    .area_event .swiper-slide dl dd {font-weight: 300; font-size: 13rem;}
    .area_event .event_pagination {padding:0 100rem 0 20rem;}
    .area_event .waves {width: 100%;}
    
    .area_customer .wrapper {padding: 55rem 0 35rem;}
    .area_customer .map {height: 320rem; border-radius: 15rem;}
    .area_customer .map i {width:20rem; height:20rem;}
    .area_customer .map i img {width:20rem;}
    .area_customer .map_info {margin: 30rem 0;}
    .area_customer .map_info .call {margin:20rem 0 30rem;}
    .area_customer .map_info .call p {padding-left: 18rem;}
    .area_customer .map_info .call p:before {top: 2rem; width: 13rem; height: 13rem;}
    .area_customer .map_info .call a {font-size:22rem;}
    .area_customer .map_info ul {grid-template-columns:1fr;}
    .area_customer .map_info ul li a {padding:25rem 10rem;}
    .area_customer .map_info ul li a i {width: 42rem;}
    .area_customer .map_info ul li:nth-child(2n)::before {display:none;}
    .area_customer .map_info ul li a dl dd {font-size: 12rem; font-weight: 300;}

    .area_banner {padding:65rem 0 55rem; background-attachment:initial;}
    .area_banner::before {top: -1rem; height: 20rem;}
    .area_banner h2 {font-size: 16rem !important;}
    article.area_banner h2 span {font-size:20rem;}
 }


 @media all and (max-width:450px){

    html {overflow-x: hidden;}


   .area_visual .vs_text h2 {line-height: 1.2;}
   .area_visual .vs_text p {font-weight: 400;}

   .area_search ul li span {margin-bottom: 5rem;}

   .area_room .room_exp > p {font-weight: 300;}
   .area_customer .map_info ul li a dl dt {margin-top: 0;}

   .area_banner::before {top: 0; transform: scale(-1.1);}
   .area_banner h2, .area_banner h2 {font-size: 22rem;}
   .area_banner h2, .area_banner h2 span {font-size: 24rem;}
   
 }