*, *:before, *:after {
	box-sizing: border-box;
}
body {
	background-color: #f6f7fb;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.swiper-container {
	width: 100%;
	height: 670px;
}
.swiper-wrapper {
	width: 73.8%;
	will-change: transform;
}
@media (min-width: 630px) {
	.swiper-wrapper {width: 100%;}
}
.swiper-slide {
	min-width: 1160px;
	height: 620px;
	overflow: hidden;
}
.swiper-slide.swiper-slide-active .slide-image, .swiper-slide.swiper-slide-duplicate-active .slide-image {
	/*transform: scale3d(1, 1, 1) translateX(-19.75%);*/
}
@media (min-width: 630px) {
	.swiper-slide {width: 50%;}
}
@media (min-width: 768px) {
	.swiper-slide {width: 33.333333%;}
	/*.swiper-slide.swiper-slide-next .slide-image, .swiper-slide.swiper-slide-prev .slide-image, .swiper-slide.swiper-slide-duplicate-next .slide-image, .swiper-slide.swiper-slide-duplicate-prev .slide-image {transform: scale3d(1, 1, 1) translateX(-6%);}*/
}
@media (min-width: 1024px) {
	.swiper-slide {width: 25%;}
}
.swiper-pagination {
	/*position: relative;*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-pagination.swiper-pagination {
	bottom: 0;
}
.swiper-pagination-bullet {
	background: none;
	width: 42px;
	height: 39px;
	font-size: 13px;
	letter-spacing: .125em;
	line-height: 39px;
	color: #aaa;
	border-radius: 0;
	position: relative;
	transition: opacity 1s ease;
}
.swiper-pagination-bullet:after {content: ""; display: block; width: 100%; height: 1px; background: #aaa; position: absolute; bottom: 0;}
.swiper-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet {
	margin: 0;
}
@media (min-width: 768px) {
	.swiper-pagination-bullet {width: 8%;}
}
.slide-image {
	width: 1160px;
	height: 620px;
	background-repeat: no-repeat;
	background-size: fixed 100%;
	background-position: 50%;
	transform: scale3d(1.075, 1.075, 1.075);
	backface-visibility: hidden;
	will-change: transform;
	transition: transform 1500ms ease;
	position: relative;
}
.slide-image {position: relative;}
.slide-image H3 {position: absolute; top: 215px; left: 50%; text-align: center; opacity: 0; z-index: 9999;}
.ani-slide-after .slide-image H3 {left: 50%; transform: translateX(-50%); opacity: 1; transition: all 1.5s;}
.slide-image P {position: absolute; top: 329px; left: 50%; text-align: center; transform: translateX(-50%); opacity: 0; z-index: 9998;font-family: 'Noto Serif KR', serif;color:#fff;}
.slide-image P.height {position: absolute; top: 340px; left: 50%; text-align: center; transform: translateX(-50%); opacity: 0; z-index: 9998;}
.slide-image P.head {position: absolute; top: 168px; left: 50%; text-align: center; transform: translateX(-50%); opacity: 0; z-index: 9998;}
.ani-slide-after .slide-image P {left: 50%; transform: translateX(-50%); opacity: 1; transition: all 2s;}
.slide-image A {display: block; position: absolute; top: 380px; left: 50%; color: #fff; text-align: center; transform: translate(-50%, 50px); opacity: 0; z-index: 9997;}
.ani-slide-after .slide-image A {transform: translate(-50%, 0px); opacity: 1;}
.layers {position: relative; width: 1160px; height: 620px; overflow: hidden; margin: 0 auto;}
.layer {position: absolute; width: 1180px; height: 620px; z-index: 1;}

.layers .layer-1-1 {background: url(../main/visual_00_back.jpg) no-repeat center center;}
.layers .layer-1-2 {background: url(../main/visual_01_back.jpg) no-repeat center center;}
.layers .layer-1-3 {background: url(../main/layer-3.png) no-repeat; background-position: -180px 50px; background-size: 120%;}

.layers .layer-2-1 {background: url(../main/visual_02_back.jpg) no-repeat center center;}
.layers .layer-3-1 {background: url(../main/visual_03_back.jpg) no-repeat center center;}
.layers .layer-4-1 {background: url(../main/visual_04_back.jpg) no-repeat center center;}
.layers .layer-5-1 {background: url(../main/visual_05_back.jpg) no-repeat center center;}
.layers .layer-6-1 {background: url(../main/visual_06_back.jpg) no-repeat center center;}

.circle {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0%;
	left: 0%;
	margin: -22px 0 0 -22px;
	background: #015152;
	border-radius: 100%;
	backface-visibility: hidden;
	z-index: 9;
}

.btn {		
	position: relative;	
	padding: 15px 25px;
	font-size: 15px;
	font-family:'Jost';
	color: #fff;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);	
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.btn span{font-size:28px;font-weight:200;display:inline-block;line-height:22px;vertical-align: bottom;margin-bottom: 3px;}
.btn span:after{content:"";display:block;width:0;height:1px;background-color:#fff;position:absolute;left:50%;bottom:0;transition:0.3s;}
.btn:hover span:after{left:0;width:100%;}
.btn:before, .btn:after {
	content: '';
	position: absolute;	
	transition: inherit;
	z-index: -1;
}
.btn:hover {
	color: #015152;
	transition-delay: .15s;
}
.btn:hover:before {
	transition-delay: 0.2s;
}

.btn:hover:after {
	background: #fff;
	transition-delay: .5s;
}
.from-top:before, .from-top:after {
	left: 0;
	height: 0;
	width: 100%;
}
.from-top:before {
	bottom: 0;	
	border: 1px solid #fff;
	border-top: 0;
	border-bottom:none;
}
.from-top:after {
	top: 0;
	height: 0;
}
.from-top:hover:before, .from-top:hover:after {
	height: 100%;
}