@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

.tit_main{margin-bottom:45rem; font-size:43rem; color:#000;}
a.y_btn{display:inline-block; min-width:100rem; padding:13rem 38rem; background:#976DF2; border-radius:30rem; color:#fff; text-align:center; transition:0.5s}
a.y_btn:hover{background:#000; color:#fff}

/* visual */
.area_visual{position:relative;height: 620rem;max-height: 620rem;}
.area_visual .list li,
.area_visual .bx-viewport{height:620rem}
.area_visual .list li{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height: 100%;}
.area_visual .list li .text{position:absolute; left:260rem; top:150rem; width:70%; color:#fff;}
.area_visual .list li .text h3{line-height:1.3; font-size:53rem; font-weight: 600;}
.area_visual .list li .text p{margin-top:25rem; font-size:20rem;}

.area_visual .btn{position:absolute; bottom:150rem; left:260rem; width:200rem;}
.area_visual .swiper-pagination{width:100%}
.area_visual .swiper-pagination .swiper-pagination-bullet{opacity:1; margin:0 5rem; border:2rem solid #fff; background:none;}
.area_visual .swiper-pagination .swiper-pagination-bullet-active{background:#fff;}
.area_visual div[class*="swiper-button"]{width:20rem;height:20rem;display: block; margin-top: 0;}
.area_visual .swiper-button-next{background:url(../../images/main/arr2_w.svg) no-repeat center; background-size: 10rem;}
.area_visual .swiper-button-prev:after{display:none;}
.area_visual .swiper-button-prev{left:0; background:url(../../images/main/arr2_w.svg) no-repeat center; background-size: 10rem; transform: scaleX(-1);}
.area_visual .swiper-button-next:after{display:none;}
.area_visual .swiper-container{height:100%;}

/* city */
.area_city{margin-top:130rem;}
.area_city .btn{z-index:10; position:absolute; width:70%; left:50%; top:45%; transform:translate(-50%, -50%);}
.area_city div[class*="swiper-button"]{display: block;width:65rem;height:65rem;border-radius:50%;background:#fff url(../../images/main/arr.svg) no-repeat center; background-size:29rem; box-shadow: 6rem 8rem 10rem rgba(0,0,0,0.15);margin-top: 0; transition:0.5s}
.area_city div[class*="swiper-button"]:hover{background:#000 url(../../images/main/arr_w.svg) no-repeat center; background-size:29rem; transition:0.5s}

.area_city .swiper-button-prev:after{display:none;}
.area_city .swiper-button-prev{left:0; transform: scaleX(-1);}
.area_city .swiper-button-next:after{display:none;}

.area_city .tit_main{text-align:center;}
.area_city .list li{overflow:hidden;border-radius:20rem;}
.area_city .list li .img{position:relative; }
.area_city .list li:before{z-index:1; opacity:0; content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#976DF2; transition:0.3s}
.area_city .list li:hover:before{opacity:1; transition:0.3s}
.area_city .list li .img img{width:100%;}
.area_city .list li .text{z-index:2; box-sizing:border-box; position:absolute; bottom:0; left:0; width:100%; padding:40rem; color:#fff;}
.area_city .list li .text h3{font-size:25rem}
.area_city .list li .text b{font-size:15rem}

.area_city .swiper-pagination-progressbar{display:none; position:static; margin-top:25rem; border-radius:5rem;}
.area_city .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#111}

/* 이유 */
.area_strengths{margin:130rem 0}
.area_strengths .tit_main{text-align:center;}
.area_strengths ul{display:flex;justify-content: center; margin-top:90rem}
.area_strengths ul li{width:400rem; text-align:center;}
.area_strengths ul li img{height:85rem}
.area_strengths ul li .text{margin-top:35rem}
.area_strengths ul li .text h3{font-size:25rem; color:#000}
.area_strengths ul li .text p{line-height:1.5; margin-top:10rem; color:#555; font-size:18rem; font-weight: 300;}

/* 서비스 */
.area_service{margin:130rem 0}
.area_service .inr{margin-left:calc(50% - 700px);}
.area_service .swiper-slide{width:1400px;}
.area_service .tit_main{text-align:center;}
.area_service .list li{display:flex; align-items: center;}
.area_service .list li > div{box-sizing:border-box; width:50%}
.area_service .list li .img{overflow:hidden;position:relative; border-radius:20rem; padding-top:45%; background: #f5f5f5;text-align:center;transition:opacity 0.5s ease-out 0s;}
.area_service .list li .img img{position:absolute; top:50%; left:50%; width:80%; transform:translate(-50%, -50%); transition:all 0.5s ease-out 0s;}
.area_service .list li .text{padding:0 80rem}
.area_service .list li .text b{color:#976DF2; letter-spacing:2rem; font-weight:500}
.area_service .list li .text h3{font-size:33rem; color:#000}
.area_service .list li .text p{margin:20rem 0 40rem 0; font-size:20rem; font-weight: 300; color:#555}
.area_service .list li .text a{display:inline-block; min-width:100rem; padding:13rem 38rem; background:#0a0e27; border-radius:30rem; color:#fff; text-align:center; transition:0.5s}
.area_service .list li .text a:hover{background:#976DF2; color:#fff}

.area_service .btn{position:relative; width:200rem; margin:60rem auto 0 auto;}
.area_service .swiper-pagination{width:100%; position:static;}
.area_service .swiper-pagination .swiper-pagination-bullet{opacity:1; margin:0 5rem; border:2rem solid #000; background:none;}
.area_service .swiper-pagination .swiper-pagination-bullet-active{background:#000;}
.area_service div[class*="swiper-button"]{top:0; width:20rem;height:20rem;display: block;margin-top: 0;}
.area_service .swiper-button-next{background:url(../../images/main/arr2.svg) no-repeat center; background-size: 10rem;}
.area_service .swiper-button-prev:after{display:none;}
.area_service .swiper-button-prev{left:0; background:url(../../images/main/arr2.svg) no-repeat center; background-size: 10rem; transform: scaleX(-1);}
.area_service .swiper-button-next:after{display:none;}

/* 예약 */
.area_reser{padding:130rem 0; background: #0a0e27;}
.area_reser .wrap{display:flex;flex-direction: row-reverse;align-items: center;}
.area_reser .wrap .text{width:45%; color:#fff;}
.area_reser .wrap .text .tit_main{margin-bottom:15rem; color:#fff;}
.area_reser .wrap .text p{margin-bottom:60rem; color:#fff; font-size:20rem; font-weight: 300;}
.area_reser .wrap .img{overflow:hidden; width:55%; border-radius:20rem}
.area_reser .wrap .img img{width:100%;}

/* 문의 */
.area_inquiry{padding:130rem 0;background-size:cover;background-position: center;}
.area_inquiry .tit_main{margin-bottom:0; color:#fff;}
.area_inquiry .wrap{display:flex;justify-content: space-between;align-items: center;}


@media screen and (max-width:1480px){
	.area_city div[class*="swiper-button"]{width:50rem; height:50rem;}

	.area_service .inr{margin-left:30rem}
}

@media screen and (max-width:1279px){
	.area_city{margin:130rem 30rem 0 30rem}
	.area_city .btn{display:none;}
	.area_city .swiper-button-next{right:0}
	.area_city .swiper-pagination-progressbar{display:block;}
	
	.area_service .inr{margin:0 30rem}
}

@media screen and (max-width:1023px){
	.area_visual .list li .text{top:50%; left:0; text-align:center; width:100%;transform: translateY(-50%); }
	.area_visual .list li .text h3{padding:0 10rem; font-size:40rem;}
	.area_visual .btn{left:0; bottom:40rem; width:100%}
	.area_visual div[class*="swiper-button"]{display:none;}

	.tit_main{font-size:35rem}
		
	.area_strengths ul li{width:33.3%}

	.area_service .list li .text h3{font-size:28rem;}

	#header{height:60px;}
}

@media screen and (max-width:860px){
	.area_visual .list li .text h3{font-size:28rem}	
	.area_visual .list li .text p{font-size:16rem}
	.area_visual .list li, 
	.area_visual .bx-viewport{height: 100%;}
	.area_visual{position:relative;max-height: none;}

	.area_city{margin:80rem 20rem 0 20rem;}
		
	.area_strengths{margin:80rem 0}
	.area_strengths .inr{margin:0 20rem}
	
	.area_reser{padding:80rem 0}
	.area_reser .wrap{flex-direction: column;}
	.area_reser .wrap .img{width:100%;}
	.area_reser .wrap .text{width:100%; margin-top:40rem; text-align:center;}

	.area_service{margin:80rem 0}
	.area_service .list li .text{padding: 0 40rem;}

	#header .btn_menu,
	#header .btn_close{display:block; top:20px;}	
}

@media screen and (max-width:540px){
	.area_visual .list li .text h3{margin:0 30rem; font-size:23rem;}

	.tit_main{margin-bottom:25rem; font-size:22rem}
	
	.area_city{margin-top:60rem;margin-left: 0;margin-right: 0;}
	.area_city .list li{border-radius:0;}
	.area_city .list li .text{position:static; margin-top:15rem; padding:0; color:#000; text-align:center;}
	.area_city .list li .text h3{font-size:18rem;}
	.area_city .list li .text b{font-size:14rem}
	.area_city .list li:before{display:none;}	
	.area_city .list li .img{overflow:hidden; border-radius:10rem;}
	.area_city .swiper-pagination-progressbar{width:90%; box-sizing:border-box; margin-top:32rem; margin-right:20rem; margin-left:20rem;}

	.area_strengths{margin:60rem 0}
	.area_strengths ul{flex-direction: column; margin-top:0}
	.area_strengths ul li{display:flex; width:100%; margin-bottom:30rem;}
	.area_strengths ul li:last-child{margin-bottom:0}
	.area_strengths ul li .text{width:calc(100% - 95rem); margin-top:0; text-align:left;}
	.area_strengths ul li .text h3{font-size:18rem}
	.area_strengths ul li .text p{margin-top:5rem; font-size:14rem; }
	.area_strengths ul li .img{width:95rem}
	.area_strengths ul li img{height:50rem;}
	
	.area_reser{padding:60rem 0}
	.area_reser .wrap .text p{margin-bottom: 25rem; font-size:16rem;}
	
	.area_service{margin:60rem 0}
	.area_service div[class*="swiper-button"]{display:none;}
	.area_service .btn{margin-top:25rem;}
	.area_service .list li{flex-direction: column;}
	.area_service .list li .img{width:100%; padding:30rem }
	.area_service .list li .img img{position:static; transform:none;}
	.area_service .list li .text{width:100%; margin-top:30rem; padding:0; text-align: center;}
	.area_service .list li .text b{font-size:13rem;}
	.area_service .list li .text h3{font-size:18rem;}
	.area_service .list li .text p{margin:10rem 0 20rem 0; font-size:14rem;}
	.area_service .list li .text a{padding:10rem 25rem; font-size:13rem;}

	a.y_btn{padding:10rem 25rem; font-size:13rem;}
	
	.area_inquiry{padding:60rem 0}
	.area_inquiry .wrap{flex-direction: column; text-align: center;}
	.area_inquiry .wrap h2{margin-bottom:25rem;}

	#header{height:60px;}
}