@charset "UTF-8";

/********** main 공통 **********/
.button{
	margin-top: var(--space-25);
}
.setting-area{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-20);
}
.setting-area .arrows-box{
	display: flex;
    gap: 20px;
}
.setting-area .arrows-box .next,
.setting-area .arrows-box .prev{
	cursor: pointer;
}
.setting-area .arrows-box i.arrow{
	margin-left: 0;
}
.setting-area .pagination{
	display: flex;
	align-items: center;
	gap: 5px;
	width: auto;
	margin-top: 0;
}
.setting-area .pagination .swiper-pagination-current,
.setting-area .pagination .swiper-pagination-total{
	font-size: 0.77rem;
	font-weight: var(--fw-500);
	color: var(--gray01);
}
.setting-area .pagination .swiper-pagination-current{
	font-weight: var(--fw-800);
	color: var(--black02)
}
.setting-area .pagination .bar{
	display: block;
	width: 17px;
	height: 1px;
	background-color: var(--gray02);
}
	/* @main 공통 미디어쿼리 */
	@media all and (max-width: 1100px){
		.button{
			margin-top: var(--space-20);
		}
		.setting-area{
			margin-top: var(--space-15);
		}
	}
	@media all and (max-width: 640px){
		.setting-area{
			margin-top: var(--space-10);
		}
	}

/********** main-visual **********/
.main-visual{
	width: 100%;
	height: 100vh;
}
.main-visual .swiper{
	display: flex;
	align-items; center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.main-visual .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.main-visual .swiper-slide:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.2);
}
.main-visual .swiper-slide .text{
	margin-top: var(--space-20);
}
.main-visual .swiper-slide .button{
	padding: 0;
    border: none;
	margin-top: var(--space-55);
}
.main-visual .swiper-slide .button:hover{
	background-color: unset;
}
.main-visual .slide1{
	background: url('/img/main-visual1.jpg') no-repeat center/cover;
}
.main-visual .slide2{
	background: url('/img/main-visual2.jpg') no-repeat center/cover;
}
.main-visual .slide3{
	background: url('/img/main-visual3.jpg') no-repeat center/cover;
}
.main-visual .slide4{
	background: url('/img/main-visual4.jpg') no-repeat center/cover;
}
.main-visual .slide5{
	background: url('/img/main-visual5.jpg') no-repeat center/cover;
}
	/* @main-visual 미디어쿼리 */
	@media all and (max-width: 1100px){
		 .main-visual{
			height: 80vh;
		 }
		 .main-visual .slide2{
			background-position: 87% 50%;
		 }
		 .main-visual .slide3{
		 	background-image: url('/img/main-visual3_m.jpg');
			/*background-position: 89% 50%;*/
		 }
		 .main-visual .slide4{
			background-position: 89% 50%;
		 }
		 .main-visual .slide5{
		 	background-image: url('/img/main-visual5_m.jpg');
			/*background-position: 84% 50%;*/
		 }
		 .main-visual .swiper-slide .button {
			margin-top: var(--space-45);
		}
	}
	@media all and (max-width: 640px){
		 .main-visual{
			height: 90vh;
		 }
		 .main-visual .swiper-slide .button {
			margin-top: var(--space-35);
		}
	}

/********** main-about **********/
.main-about .img-area{
	width: 100%;
	height: 0;
	padding-bottom: 28%;
	position: relative;
	overflow: hidden;
}
.main-about .img-area img{
	width: 100%;
	height: auto;
	max-width: 10000%;
	position: absolute;
	bottom: -15%;
	left: 50%;
	transform: translateX(-50%);
}
	/* @main-about 미디어쿼리 */
	@media all and (max-width: 1100px){
		.main-about .img-area{
			padding-bottom: 35%;
		}
	}
	@media all and (max-width: 640px){
		.main-about .img-area{
			padding-bottom: 50%;
		}
		.main-about .img-area img{
			bottom: 0;
		}
	}

/********** main-portfolio **********/
.main-portfolio .portfolioSwiper{
	border-bottom: var(--border);
}
.main-portfolio .swiper-slide figure{
	width: 100%;
	height: 0;
	padding-bottom: 65%;
	overflow: hidden;
	position: relative;
	transition: var(--transition);
}
.main-portfolio .swiper-slide a:hover figure{
	opacity: 0.7;
}
.main-portfolio .swiper-slide figure img{
	width: 100%;
	max-width: 10000%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.main-portfolio .swiper-slide .text-box{
	text-align: center;
	margin-top: var(--space-20);
}
.main-portfolio .swiper-slide .text-box .text{
	font-weight: var(--fw-400);
	margin-top: var(--space-5);
}
.main-portfolio .swiper-slide .text-box .price{
	display: block;
	font-size: 0.94rem;
	font-weight: var(--fw-800);
	margin-top: var(--space-7);
}
	/* main-portfolio 미디어쿼리 */
	@media all and (max-width: 1100px){
	}
	@media all and (max-width: 640px){
	}

/********** main-review **********/
.main-review .reviewSwiper{
	border-top: var(--border02);
	border-bottom: var(--border);
}
.main-review .review-swiper .swiper-slide{
	padding: var(--space-30) var(--space-20);
	background-color: var(--gray04);
}
.main-review .review-swiper .swiper-slide .deco{
	font-size: 0.88rem;
	font-weight: var(--fw-800);
	color: var(--gray01);
}
.main-review .review-swiper .swiper-slide .text{
	font-size: 1.11rem;
	font-weight: var(--fw-800);
	color: var(--black);
	margin-top: 5px;
}
.main-review .review-swiper .swiper-slide .name{
	display: block;
	font-size: 0.83rem;
	margin-top: 10px;
}
	/* main-review 미디어쿼리 */
	@media all and (max-width: 1100px){
		.main-review .review-swiper .swiper-slide {
			padding: var(--space-20) var(--space-15);
		}
	}
	@media all and (max-width: 640px){
	}

/********** main-contact **********/
.main-contact{
	padding: var(--space-185) 0;
	background: url('/img/main-contact.jpg') no-repeat center/cover;
}
.main-contact .title-box .title{
	color: var(--white);
}
.main-contact .title-box .text{
	color: rgba(255, 255, 255, 0.8);
	margin-top: var(--space-20);
}
.main-contact .title-box .button{
	color:var(--white);
	border: 1px solid rgba(255, 255, 255, 0.7);
	margin-top: var(--space-55);
}
.main-contact .button:hover{
	background-color: rgba(255, 255, 255, 0.1);
}
	/* main-contact 미디어쿼리 */
	@media all and (max-width: 1200px){
		.main-contact {
			padding: var(--space-150) 0;
		}
		.main-contact .title-box .button{
			margin-top: var(--space-45);
		}
	}
	@media all and (max-width: 640px){
		.main-contact {
			padding: var(--space-135) 0;
		}
		.main-contact .title-box .button{
			margin-top: var(--space-35);
		}
	}