@import url(style_set.less);

/* ********* 텍스트 기타 ********** */
.txt_cut {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.txt_center {
	text-align: center;
}

.txt_h {
	line-height: 1.65;
}

/* ********* 인풋 ********* */
.form_con:focus {
	border: 1px solid rgba(252, 58, 0, 0.5) !important;
	box-shadow: 0 0 0 0.3rem rgba(252, 58, 0, 0.2);
}

/* ***** 폰트 굵기 ***** */
.fw_300 {
	font-weight: 300;
}

.fw_400 {
	font-weight: 400;
}

.fw_500 {
	font-weight: 500;
}

.fw_600 {
	font-weight: 600;
}

.fw_700 {
	font-weight: 700;
}

.fw_800 {
	font-weight: 800;
}

/* ***** 폰트사이즈 ***** */
.fs_100 {
	font-size: 10rem;
}

.fs_90 {
	font-size: 90rem;
}

.fs_80 {
	font-size: 8rem;
}

.fs_72 {
	font-size: 7.2rem;
}

.fs_70 {
	font-size: 7rem;
}

.fs_64 {
	font-size: 6.4rem;
}

.fs_60 {
	font-size: 6rem;
}

.fs_54 {
	font-size: 5.4rem;
}

.fs_52 {
	font-size: 5.2rem;
}

.fs_50 {
	font-size: 5rem;
}

.fs_48 {
	font-size: 4.8rem;
}

.fs_46 {
	font-size: 4.6rem;
}

.fs_42 {
	font-size: 4.2rem;
}

.fs_40 {
	font-size: 4rem;
}

.fs_38 {
	font-size: 3.8rem;
}

.fs_36 {
	font-size: 3.6rem;
}

.fs_34 {
	font-size: 3.4rem;
}

.fs_32 {
	font-size: 3.2rem;
}

.fs_30 {
	font-size: 3rem;
}

.fs_28 {
	font-size: 2.8rem;
}

.fs_26 {
	font-size: 2.6rem;
}

.fs_24 {
	font-size: 2.4rem;
}

.fs_22 {
	font-size: 2.2rem;
}

.fs_20 {
	font-size: 2rem;
}

.fs_18 {
	font-size: 1.8rem;
}

.fs_16 {
	font-size: 1.6rem;
}

.fs_14 {
	font-size: 1.4rem;
}

/* ***** 폰트색상 ***** */
.fc_white {
	color: @color_white;
}

.fc_block {
	color: @color_black;
}

.fc_gray {
	color: #666;
}

.fc_blue {
	color: @color_blue;
}

.fc_red {
	color: @color_red;
}

/* ********** 애니메이션 효과  ********** */
.motion {
	opacity: 0;
	transition: all 0.6s 0.3s ease;
}

.motion.on {
	opacity: 1;
	transform: none;
}

// translate3d(x가로축, y세로축, z모서리 대칭-비스듬한 박스형태로 표현)
.motion_up {
	transform: translate3d(0, 30px, 0);
}

.motion_down {
	transform: translate3d(0, -30px, 0);
}

.motion_right {
	transform: translate3d(-30px, 0, 0);
}

.motion_left {
	transform: translate3d(30px, 0, 0);
}

@keyframes motion_none {
	0% {
		transform: translate3d(0, 0, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_hight_up {
	0% {
		transform: translate3d(0, 80px, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_up {
	0% {
		transform: translate3d(0, 30px, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0);
		opacity: 1;
	}
}

@keyframes motion_hight_down {
	0% {
		transform: translate3d(0, -80px, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_down {
	0% {
		transform: translate3d(0, -30px, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_hight_right {
	0% {
		transform: translate3d(-80px, 0, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_right {
	0% {
		transform: translate3d(-30px, 0, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_hight_left {
	0% {
		transform: translate3d(80px, 0, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_left {
	0% {
		transform: translate3d(30px, 0, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes motion_zoom_in {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.05);
		opacity: 1;
	}
}

@keyframes motion_zoom_down {
	0% {
		transform: scale(1.05);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes motion_w100 {
	0% {
		width: 100%;
	}

	100% {
		width: 0;
	}
}

@keyframes motion_w50 {
	0% {
		width: 50%;
	}

	100% {
		width: 0;
	}
}

@keyframes txt_blur {
	0% {
		opacity: 0;
		text-shadow: 0 0 0.5rem #fff;
		letter-spacing: 1rem;
		filter: blur(20px);
	}
	50% {
		text-shadow: 0 0 0 #fff;
	}
	100% {
		opacity: 1;
		letter-spacing: 0em;
		filter: blur(0px);
	}
}

/* ********** 반응형 ********** */
@media all and (max-width: 1440px) {
	html {
		font-size: 0.6944vw;
	}

	.fs_100 {
		font-size: 9rem;
	}

	.fs_90 {
		font-size: 8rem;
	}

	.fs_80 {
		font-size: 7rem;
	}

	.fs_72 {
		font-size: 6.2rem;
	}

	.fs_70 {
		font-size: 6rem;
	}

	.fs_60 {
		font-size: 5rem;
	}

	.fs_54,
	.fs_52 {
		font-size: 4.8rem;
	}

	.fs_50,
	.fs_48 {
		font-size: 4.6rem;
	}

	.fs_46 {
		font-size: 4.4rem;
	}
}

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

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

	.fs_100 {
		font-size: 8rem;
	}

	.fs_90 {
		font-size: 7rem;
	}

	.fs_80 {
		font-size: 6rem;
	}

	.fs_72 {
		font-size: 5.2rem;
	}

	.fs_70 {
		font-size: 5rem;
	}

	.fs_64 {
		font-size: 4.2rem;
	}

	.fs_60 {
		font-size: 4rem;
	}

	.fs_54,
	.fs_52 {
		font-size: 3.8rem;
	}

	.fs_50,
	.fs_48 {
		font-size: 3.6rem;
	}

	.fs_46 {
		font-size: 3.4rem;
	}

	.fs_18 {
		font-size: 1.6rem;
	}
}

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

	.fs_54,
	.fs_52 {
		font-size: 3.6rem;
	}

	.fs_50 {
		font-size: 3.4rem;
	}

	.fs_48,
	.fs_46 {
		font-size: 3.2rem;
	}

	.fs_42,
	.fs_40 {
		font-size: 3rem;
	}

	.fs_38,
	.fs_36 {
		font-size: 2.8rem;
	}

	.fs_34 {
		font-size: 2.6rem;
	}

	.fs_32,
	.fs_30 {
		font-size: 2.4rem;
	}

	.fs_28,
	.fs_26 {
		font-size: 2.2rem;
	}

	.fs_24 {
		font-size: 2rem;
	}
}

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

	.fs_100 {
		font-size: 7rem;
	}

	.fs_90 {
		font-size: 6.4rem;
	}

	.fs_80 {
		font-size: 5.6rem;
	}

	.fs_72,
	.fs_70 {
		font-size: 4.8rem;
	}

	.fs_64,
	.fs_60 {
		font-size: 3.6rem;
	}

	.fs_54,
	.fs_52 {
		font-size: 3.4rem;
	}

	.fs_50 {
		font-size: 3.2rem;
	}

	.fs_48,
	.fs_46 {
		font-size: 3rem;
	}

	.fs_42,
	.fs_40 {
		font-size: 2.8rem;
	}

	.fs_38,
	.fs_36 {
		font-size: 2.6rem;
	}

	.fs_34,
	.fs_32,
	.fs_30 {
		font-size: 2.4rem;
	}
}

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

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

	.fs_100 {
		font-size: 4.2rem;
	}

	.fs_90 {
		font-size: 4rem;
	}

	.fs_80 {
		font-size: 4rem;
	}

	.fs_72,
	.fs_70 {
		font-size: 3.6rem;
	}

	.fs_64,
	.fs_60 {
		font-size: 3rem;
	}

	.fs_54,
	.fs_52,
	.fs_50 {
		font-size: 2.8rem;
	}

	.fs_48,
	.fs_46 {
		font-size: 2.6rem;
	}

	.fs_42,
	.fs_40 {
		font-size: 2.4rem;
	}

	.fs_38,
	.fs_36,
	.fs_34 {
		font-size: 2.2rem;
	}

	.fs_32,
	.fs_30,
	.fs_28,
	.fs_26 {
		font-size: 2rem;
	}

	.fs_24,
	.fs_22 {
		font-size: 1.8rem;
	}
	.fs_20,
	.fs_18 {
		font-size: 1.6rem;
	}

	.fs_16,
	body {
		font-size: 1.4rem !important;
	}

	.fs_14 {
		font-size: 1.2rem;
	}
}

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

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

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