@charset "utf-8";

.cpage {
	clear: both;
	position: relative;
	overflow: visible;
	width: 100%; height: auto;
	font-size: 0; 
}

.cpage .TRAN{
	opacity:0;transition:all 1s;
	transition-property:transform, opacity;
}
.ANI .TRAN{
	transform:translateX(0px) translateY(0px) scale(1) !important;
	opacity: 1.0 !important;
}

.firstSlider, .owl-carousel, .owl-stage-outer, .owl-stage, .owl-item { height: 100%; }
.firstSlider {
	position: relative;
	width: 100%; height: 100%;
}
.loader {
	width: 100%; height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* 슬라이더 버튼 */
.owl-nav {
	position: absolute;
	right: 0; left: 0; bottom: 54px;
	margin: auto;
	width: 200px; height: 27px;
}
.owl-nav i:before {
	font-size: 24px;
	color: #fff;
}
.owl-nav .owl-prev {
	position: absolute;
	top: 0; left: 0;
}
.owl-nav .owl-next {
	position: absolute;
	top: 0; right: 0;
}
.owl-carousel.owl-drag .owl-item { z-index: -1; }


/* 스크롤다운 */
.scrollDown {
	position: absolute;
	right: 0; left: 0;
	bottom: 1%;
	margin: auto;
	width: 20px; height: 30px;
	text-align: center;
	z-index: 20;
}
.scrollDown .scroll {
	opacity: 0;
	position: absolute;
	top: 75%; left: 50%;
	transform-origin: 50% 50%;
	transform: translate3d(-50%, -50%, 0);
	height: 10px;
}
.scrollDown .scroll-first {
	animation: scroll-movement ease-in-out infinite;
	animation-duration: 2s;
	animation-delay: 1s;
}
.scrollDown .scroll-second {
	animation: scroll-movement ease-in-out infinite;
	animation-duration: 2s;
}

.scrollDown .scroll:before {
	font-size: 24px;
	color: #fff;
	line-height: 1px;
}
@keyframes scroll-movement {
	0% {
		opacity: 0;
		top: 45%;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.slider_button a .fal::before { 
	opacity: 1;
	transition: opacity 0.5s;
}
.slider_button a:hover .fal::before { opacity: 0.5; }

/* section slider */
.section_slider li {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

.slider_bullet .fa-circle {
	margin-left: 1em;
	font-size: 10px;
	color: #a3a6a9;
}
.slider_bullet .fa-circle:first-child { margin-left: 0; }
.slider_bullet .fa-circle.SEL { color: #2d2f31; }


/* go button */
.btn_line {
	position: relative;
	display: inline-block;
	width: 400px; height: 54px;
	margin-right: 15px;
}
.btn_line::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; right: 0;
	margin: auto;
	width: 400px; height: 1px;
	background: #4c4d4e;
}
.btn_go {
	position: relative;
	display: inline-block;
	width: 15%;
	height: 54px;
	font-family: 'Meie Script', cursive;
	font-size: 54px;
	color: #4c4d4e;
	line-height: 30px;
	text-align: center;
	overflow: hidden;
}
.btn_go .go {
	width: 400%;
}
.btn_go .go span { display: none; }
.btn_go .go span:first-child { display: block; }
.btn_go .go span { display: inline-block; width: 25%; float: left; text-align: center;}

/* content arrow button */
.btn_sub_arrow {
	width: 20px;
	color: #282826;
	font-size: 15px;
	overflow: hidden;
}
.btn_sub_arrow .btn_motion {
	float: right;
	width: 400%;
}
.btn_sub_arrow .btn_motion span { display: none; }
.btn_sub_arrow .btn_motion span:first-child { display: block; }
.btn_sub_arrow .btn_motion span {
	display: inline-block;
	width: 25%;
	float: left;
	text-align: center;
}

/* 버튼 모션 좌우 */
@keyframes leftRepeat {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.7%, 29.36% {transform:translate3d(-25%,0,0);}
  33.32%,45.98% {transform:translate3d(-50%,0,0);}
  49.98%,62.64% {transform:translate3d(-75%,0,0);}
  66.64%,79.3% {transform:translate3d(-50%,0,0);}
  83.3%,95.96% {transform:translate3d(-25%,0,0);}
}
@keyframes rightRepeat {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.7%, 29.36% {transform:translate3d(25%,0,0);}
  33.32%,45.98% {transform:translate3d(50%,0,0);}
  49.98%,62.64% {transform:translate3d(75%,0,0);}
  66.64%,79.3% {transform:translate3d(50%,0,0);}
  83.3%,95.96% {transform:translate3d(25%,0,0);}
}


@media ( max-width: 1600px ) {
	
	.btn_line {
		width: 340px; height: 44px;
	}
	.btn_line::before {
		width: 340px;
	}
	.btn_go {
		height: 34px;
		font-size: 40px;
		line-height: 15px;
	}
}
@media ( max-width: 1220px ) {
	.scrollDown { display: none; }
	.btn_line {
		width: 290px;
	}
	.btn_line::before {
		width: 290px;
	}
	.btn_go {
		font-size: 34px;
		line-height: 9px;
	}


}
@media ( max-width: 414px ) {
	.btn_line {
		width: 220px;
	}
	.btn_line::before {
		width: 220px;
	}
	.btn_go {
		font-size: 30px;
	}
}

@media ( min-width: 1920px ) {
	.firstSlider { height: 100vh; }
}