/* Common Color */
@color_link					: #f05000;
@color_line					: #f05000;

/* Body */
@color_body_bg				: #F3F3F3;
@color_body_font			: #222222;


/* Color */
@color_black				: #131313;
@color_white				: #FFFFFF;
@color_grey					: #9C9C9C;
@color_lightgrey			: #DED8DC;
@color_darkgrey				: #333333;
@color_orange				: #f05000;
@color_gold					: #FCBF33;

@color_red					: #DB2828;
@color_yellow				: #ffff99;
@color_green				: #016936;
@color_blue					: #0E6EB8;

@color_olive				: #32CD32;
@color_teal					: #008080;
@color_violet				: #EE82EE;
@color_purple				: #B413EC;
@color_pink					: #FF1493;
@color_brown				: #A52A2A;



/* Screen Size */
@screen_mobile_max			: 699px;
@screen_tablet_min			: 700px;
@screen_tablet_max			: 999px;
@screen_computer_min		: 1000px;
@screen_computer_max		: 1280px;



/* Height */
@header_height				: 73px;
@copyright_height			: 210px;

@arrow_white_right			: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGpJREFUeNpi/P//PwO5gImBAoBLswK5mgWAeD8QGxDUDfIzFmwAxPehNC41ODUTZQA+zQQNIKQZ2QAFdDliogoUcAeA+AGxAQbDCUB8HogFSHU2Xo34NBPUiEszSMN+QhpBmHHAMgZAgAEAUrp5JbgNfFUAAAAASUVORK5CYII=";
@arrow_white_down			: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGZJREFUeNpi/P//PwO5gImBAjA4NAsQoV4Al+b1QJyAR6MBEJ8HYgW4CCi0oVgAiM8DcQKSGAwbAPF9KA0XR1eEzQCsGrFpRjcAp0ZcmmEGzMenEYQZCaQwUOA8wCXJOAKTJ0CAAQCa/cjdst0EzwAAAABJRU5ErkJggg==";
@arrow_black_right			: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHxJREFUeNpi/P//PwO5gJESzUzYBHV1dRXI0gzUKACk9gNpA5I1X758+QOQCgTi9YQMwOlnqMb1IIOABl4gOcAIGUAwtJEMcAQa8IBgaKMBkOYD6BpBgIWArQlAKh9kK6kBBtcIjQHiNBOjEatmaCKBhfAHmqVtijQDBBgA87BJrYSW2gEAAAAASUVORK5CYII=";
@arrow_black_down			: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHlJREFUeNpi/P//PwO5gImBAjAINOvq6goQUoyuBtnm9UDJBDwaDYDUeSCtgE1zIBDnYzMAqnE9SM3ly5cfYGgGCn4AUo7oBqBpvIBsKCN6PEP9tR+IJwLxBVwasWpGMqAfiB1waQQDkGZcWEdHRwGfPOMITJ4AAQYAc15YLzY0dgwAAAAASUVORK5CYII=";


.gen_transition(@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	-o-transition: @transition;
	transition: @transition;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
p {
	margin: 0.3em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	line-height: 2em;
	font-weight: 400;
}

h1 {
	font-size: 35px;
	font-weight: 500;

	&.title {
		padding: 0.5em 0 1em 0;
		font-size: 30px;
		font-weight: 400;
		line-height: 1em;
		letter-spacing: 5px;
	}
}

h2 {
	font-size: 31px;
	font-weight: 500;
}

h3 {
	font-size: 27px;
	font-weight: 500;
}

h4 {
	font-size: 23px;
	font-weight: 500;
}

h5 {
	font-size: 21px;
	font-weight: 500;
}

h6 {
	font-size: 17px;
	font-weight: 700;
}

@media (max-width:@screen_mobile_max) {
	h1 {
		font-size: 27px;
	}

	h2 {
		font-size: 23px;
	}

	h3 {
		font-size: 21px;
	}

	h4 {
		font-size: 17px;
	}

	h5 {
		font-size: 15px;
	}

	h6 {
		font-size: 13px;
	}
}

ul {
	li {
		line-height: 1.8rem;

		&.style-title {
			margin-left: -20px;
			font-weight: 700;
			list-style-type: none;
		}

		&.style-none {
			margin-left: -15px;
			list-style-type: none;
		}
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.color-black {
	color: @color_black  !important;
}

.color-white {
	color: @color_white  !important;
}

.color-grey {
	color: @color_grey  !important;
}

.color-lightgrey {
	color: @color_lightgrey  !important;
}

.color-darkgrey {
	color: @color_darkgrey  !important;
}

.color-orange {
	color: @color_orange  !important;
}

.color-red {
	color: @color_red  !important;
}

.color-yellow {
	color: @color_yellow  !important;
}

.color-green {
	color: @color_green  !important;
}

.color-blue {
	color: @color_blue  !important;
}

.color-gold {
	color: @color_gold  !important;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.font-weight-100 {
	font-weight: 100;
}

.font-weight-300 {
	font-weight: 300;
}

.font-weight-400 {
	font-weight: 400;
}

.font-weight-500 {
	font-weight: 500;
}

.font-weight-700 {
	font-weight: 700;
}

.font-weight-900 {
	font-weight: 900;
}

.width-100 {
	width: 100% !important;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.width {

	/* width style */
	&-max {
		width: 100% !important;
		width: -webkit-fill-available !important;
		width: -moz-available !important;
		width: fill-available !important;
	}

	&-full {
		width: 100% !important;
	}

	&-half {
		width: 50% !important;
	}

	&-huge {
		width: 30rem !important;
	}

	&-big {
		width: 15rem !important;
	}

	&-mid {
		width: 10rem !important;
	}

	&-sml {
		width: 6rem !important;
	}

	&-tiny {
		width: 3rem !important;
	}

	&-micro {
		width: 1.5rem !important;
	}

	&-limit {
		max-width: 1000px !important;
		margin: 0 auto;
	}
}

.height {

	/* height style */
	&-full {
		height: 100% !important;
	}

	&-huge {
		height: 30rem !important;
	}

	&-big {
		height: 15rem !important;
	}

	&-mid {
		height: 10rem !important;
	}

	&-sml {
		height: 6rem !important;
	}

	&-tiny {
		height: 3rem !important;
		line-height: 3rem !important;
	}
}

.margin {

	/* margin style */
	&-none {
		margin: 0 !important;
	}

	&-top {
		&-big {
			margin-top: 2.5rem !important;
		}

		&-mid {
			margin-top: 1.5rem !important;
		}

		&-sml {
			margin-top: 1rem !important;
		}

		&-tiny {
			margin-top: 0.3rem !important;
		}
	}

	&-bottom {
		&-big {
			margin-bottom: 2.5rem !important;
		}

		&-mid {
			margin-bottom: 1.5rem !important;
		}

		&-sml {
			margin-bottom: 1rem !important;
		}

		&-tiny {
			margin-bottom: 0.3rem !important;
		}
	}

	&-left {
		&-big {
			margin-left: 2.5rem !important;
		}

		&-mid {
			margin-left: 1.5rem !important;
		}

		&-sml {
			margin-left: 1rem !important;
		}

		&-tiny {
			margin-left: 0.3rem !important;
		}
	}

	&-right {
		&-big {
			margin-right: 2.5rem !important;
		}

		&-mid {
			margin-right: 1.5rem !important;
		}

		&-sml {
			margin-right: 1rem !important;
		}

		&-tiny {
			margin-right: 0.3rem !important;
		}
	}
}

.padding {

	/* padding style */
	&-big {
		padding: 50px !important;
	}

	&-mid {
		padding: 30px !important;
	}

	&-sml {
		padding: 15px !important;
	}

	&-tiny {
		padding: 7px !important;
	}

	&-none {
		padding: 0 !important;
	}
}

.align {

	/* align style */
	&-left {
		text-align: left;
	}

	&-center {
		text-align: center;
	}

	&-right {
		text-align: right;
	}

	&--left {
		text-align: left !important;
	}

	&--center {
		text-align: center !important;
	}

	&--right {
		text-align: right !important;
	}

	&-top {
		vertical-align: top !important;
	}

	&-middle {
		vertical-align: middle !important;
		vertical-align: -webkit-baseline-middle;
	}

	&-bottom {
		vertical-align: bottom !important;
	}

	&-auto {
		margin: 0 auto !important;
	}
}

.float {

	/* float style */
	&-left {
		float: left;
	}

	&-right {
		float: right;
	}

	&-clear {
		clear: both;
	}
}

.display {

	/* display style */
	&-inline {
		display: inline-block;
		zoom: 1;
		*display: inline;
		_display: inline;
	}

	&-none {
		display: none;
	}

	&-hidden {
		display: none !important;
	}

	&-block {
		display: block !important;
	}
}

.background-image {
	background-color: #000066;
	background-position-x: center;
	background-position-y: center;
	background-size: cover;
	background-repeat: no-repeat;

	.background-overlay {
		position: absolute;
		z-index: 99;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: @color_white;
		font-size: 6rem;
	}

	&:hover {
		.background-overlay {
			color: @color_orange;
			-webkit-animation: zoomout-zoomin 1.3s infinite ease-in-out;
			animation: zoomout-zoomin 1.3s infinite ease-in-out;
		}
	}

}

.content-loading {
	width: 100%;
	height: 100%;
	min-width: 100px;
	min-height: 100px;
	background: url(data:image/gif;base64,R0lGODlhKwALAPEAAP///wCt/oLW/gCt/iH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=) 50% 50% no-repeat;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
button {
	outline: none;

	border: 1px solid @color_lightgrey;
	padding: 10px 40px;
	background: @color_white;
	color: @color_grey;
	font-size: 15px;
	margin: 1px;

	[class^="icon-"]:before,
	[class*=" icon-"]:before {
		font-size: 19px;
	}

	&:hover {
		cursor: pointer;
		border: 1px solid @color_grey;
		color: @color_black;
		font-weight: 700;
	}

	&.button-grey {
		border: 1px solid @color_grey;
		color: @color_darkgrey;

		&:hover {
			border: 1px solid @color_black;
			color: @color_black;
		}
	}

	&.button-orange {
		border: 1px solid #ff9999;
		color: @color_darkgrey;

		&:hover {
			border: 1px solid @color_orange;
			color: @color_orange;
		}
	}
}

input[type=button] {
	outline: none;

	border: 1px solid @color_grey;
	padding: 7px 30px;
	background: @color_white;
	color: @color_darkgrey;
	font-size: 15px;

	&:hover {
		cursor: pointer;
		border: 1px solid @color_black;
		color: @color_black;
		font-weight: 700;
	}

	background: transparent url(@arrow_black_right) 95% 50% no-repeat;

}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.box-border {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid @color_lightgrey;
}

table {
	&.table {
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;


		th,
		td {
			padding: 0.3em 2em;
			overflow-x: hidden;
			text-overflow: ellipsis;
		}

		&.height-mid {

			th,
			td {
				padding: 0.7em 2em;
				overflow-x: hidden;
				text-overflow: ellipsis;
			}
		}

		thead {

			th,
			td {
				border-bottom: 3px double @color_grey;
				line-height: 1.1em;
			}
		}

		tbody {
			th {
				line-height: 1.1em;
			}

			td {
				font-weight: 400;
				line-height: 1.7em;
				color: @color_darkgrey;
			}
		}

		@media (max-width:@screen_tablet_max) {

			// 모바일(태블릿)
			th,
			td {
				padding: 0.3em 0.3em;
				overflow-x: hidden;
				text-overflow: inherit;
			}
		}

		&.hoverable {
			tbody {
				tr:hover {
					td {
						background-color: @color_yellow  !important;
					}
				}
			}

			tr:nth-child(2n):not(.no-sel)>td {
				background-color: rgba(0, 0, 50, .02);
			}
		}
	}

	&.line {
		tr:not(:last-child) {
			border-bottom: 1px solid @color_lightgrey;
		}
	}

	&.line-bottom {
		tr {
			border-bottom: 1px solid @color_lightgrey;
		}
	}

	&.line-all {

		th,
		td {
			border: 1px solid @color_lightgrey;
		}
	}

}

.border-bottom {
	border-bottom: 1px solid @color_lightgrey;
}

.bg-modal {
	display: none;
	position: fixed;
	top: @header_height;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;

	&.active {
		display: block;
	}
}

hr {
	border: 0;
	border-top: 1px solid @color_lightgrey;
	margin: 10px auto;
}

/* 회전 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.transform-X1 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
	transform: scaleX(-1);
}

.transform-Y1 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
	transform: scaleY(-1);
}

.transform-90 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
	transform: rotate(90deg);
}

.transform-180 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
	transform: rotate(180deg);
}

.transform-270 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
	transform: rotate(270deg);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.input-box {
	position: relative;
	height: 40px;
	line-height: 40px;

	input[type="text"] {
		margin: 0;
		width: calc(~"100% - 20px");
		width: -moz-calc(~"100% - 20px");
		width: -webkit-calc(~"100% - 20px");
		width: -o-calc(~"100% - 20px");
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		outline: 0;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		text-align: left;
		font-size: 15px;
		line-height: 15px;
		padding: 10px;
		background: #fff;
		border: 1px solid rgba(34, 36, 38, .15);
		border-radius: .28571429rem;
		box-shadow: none;
	}

	i {
		position: absolute;
		color: @color_grey;
		font-size: 25px;
		top: 0;
		right: 0;
		z-index: 2;

		&:hover {
			cursor: pointer;
			color: @color_black;
		}
	}

	&.required {
		input[type="text"] {
			width: calc(~"100% - 45px");
			width: -moz-calc(~"100% - 45px");
			width: -webkit-calc(~"100% - 45px");
			width: -o-calc(~"100% - 45px");
			padding: 10px 10px 10px 35px;
		}

		i {
			left: 7px;
			right: inherit;

			&:hover {
				color: @color_red;
			}
		}
	}
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.form {

	input[type="text"],
	input[type="number"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="password"],
	select,
	textarea {
		margin: 0.2rem 0;
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		outline: 0;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		text-align: left;
		font-size: 1rem;
		height: 28px;
		//	line-height: 28px;
		line-height: 1.5rem;
		padding: 0 10px;
		background: #fff;
		border: 1px solid #DEDEDF;
		border-radius: .28571429rem;
		box-shadow: none;
		vertical-align: middle;

		&.input-large {
			height: 43px;
			line-height: 43px;
			font-size: 31px;
			letter-spacing: 5px;
			padding: 0 15px;
		}
	}
}

form.width-full {

	input[type="text"],
	input[type="number"],
	input[type="date"],
	input[type="password"],
	select,
	textarea {
		width: auto;
		width: -webkit-fill-available;
		width: -moz-available;
		width: fill-available;
	}

	/*
	button {
		width: 100%;
		width: -webkit-fill-available;
		width: -moz-available;
		width: fill-available;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
*/
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.grid-container {
	position: relative;
	font-size: 0px;

	.gridbox {
		position: relative;
		display: inline-block;
		zoom: 1;
		*display: inline;
		_display: inline;
		vertical-align: top;
		text-align: justify;
		margin-bottom: 1.5em;

		&.margin-0 {
			margin-bottom: 0;
		}

		&.one {
			font-size: 15px;
			width: 100%;

			.txt-1 {
				position: relative;
			}
		}

		&.two {
			font-size: 15px;
			width: 50%;

			.txt-1 {
				padding-right: 15px;
			}

			.txt-2 {
				padding-left: 15px;
			}
		}

		&.two2 {
			font-size: 15px;

			&.cell-1 {
				width: 33%;
			}

			&.cell-2 {
				width: 67%;
			}

			.txt-1 {
				padding-right: 15px;
			}

			.txt-2 {
				padding-left: 15px;
			}
		}

		&.two3 {
			font-size: 15px;

			&.cell-1 {
				width: 67%;
			}

			&.cell-2 {
				width: 33%;
			}

			>.txt-1 {
				padding-right: 15px;
			}

			>.txt-2 {
				padding-left: 15px;
			}
		}

		&.two4 {
			font-size: 15px;

			&.cell-1 {
				width: 40%;
			}

			&.cell-2 {
				width: 60%;
			}

			.txt-1 {
				padding-right: 15px;
			}

			.txt-2 {
				padding-left: 15px;
			}
		}

		&.three {
			font-size: 15px;
			width: 33.33%;

			.txt-1 {
				padding-right: 20px;
			}

			.txt-2 {
				padding-left: 10px;
				padding-right: 10px;
			}

			.txt-3 {
				padding-left: 20px;
			}

		}

		&.four {
			font-size: 15px;
			width: 25%;

			.txt-1 {
				padding-right: 23px;
			}

			.txt-2 {
				padding-left: 8px;
				padding-right: 15px;
			}

			.txt-3 {
				padding-left: 15px;
				padding-right: 8px;
			}

			.txt-4 {
				padding-left: 23px;
			}
		}

		&.five {
			font-size: 15px;
			width: 20%;

			.txt-1 {
				padding-right: 24px;
			}

			.txt-2 {
				padding-left: 6px;
				padding-right: 18px;
			}

			.txt-3 {
				padding-left: 12px;
				padding-right: 12px;
			}

			.txt-4 {
				padding-left: 18px;
				padding-right: 6px;
			}

			.txt-5 {
				padding-left: 24px;
			}
		}

		&.six {
			font-size: 15px;
			width: 16.6%;

			.txt-1 {
				padding-right: 24px;
			}

			.txt-2 {
				padding-left: 6px;
				padding-right: 18px;
			}

			.txt-3 {
				padding-left: 12px;
				padding-right: 12px;
			}

			.txt-4 {
				padding-left: 18px;
				padding-right: 6px;
			}

			.txt-5 {
				padding-left: 24px;
				padding-right: 6px;
			}

			.txt-6 {
				padding-left: 24px;
			}
		}
	}

	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	&.fullsize {
		.gridbox {
			&.one {
				width: 100%;

				.txt-1 {}
			}

			&.two {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.two2 {
				font-size: 15px;

				&.cell-1 {
					width: 100%;
				}

				&.cell-2 {
					width: 100%;
				}

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.two3 {
				font-size: 15px;

				&.cell-1 {
					width: 100%;
				}

				&.cell-2 {
					width: 100%;
				}

				>.txt-1 {
					padding-right: 0;
				}

				>.txt-2 {
					padding-left: 0;
				}
			}

			&.two4 {
				font-size: 15px;

				&.cell-1 {
					width: 100%;
				}

				&.cell-2 {
					width: 100%;
				}

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.three {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-3 {
					padding-left: 0;
				}

			}

			&.four {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2,
				.txt-3 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-4 {
					padding-left: 0;
				}
			}

			&.five {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2,
				.txt-3,
				.txt-4 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-5 {
					padding-left: 0;
				}
			}

			&.six {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2,
				.txt-3,
				.txt-4,
				.txt-5 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-6 {
					padding-left: 0;
				}
			}
		}
	}

	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	@media (max-width:@screen_mobile_max) {
		.gridbox {
			&.one {
				width: 100%;

				.txt-1 {}
			}

			&.two {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.two2 {
				font-size: 15px;

				&.cell-1 {
					width: 100%;
				}

				&.cell-2 {
					width: 100%;
				}

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.two3 {
				font-size: 15px;

				&.cell-1 {
					width: 100%;
				}

				&.cell-2 {
					width: 100%;
				}

				>.txt-1 {
					padding-right: 0;
				}

				>.txt-2 {
					padding-left: 0;
				}
			}

			&.two4 {
				font-size: 15px;

				&.cell-1 {
					width: 100%;
				}

				&.cell-2 {
					width: 100%;
				}

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.three {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-3 {
					padding-left: 0;
				}

			}

			&.four {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2,
				.txt-3 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-4 {
					padding-left: 0;
				}
			}

			&.five {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2,
				.txt-3,
				.txt-4 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-5 {
					padding-left: 0;
				}
			}

			&.six {
				width: 100%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2,
				.txt-3,
				.txt-4,
				.txt-5 {
					padding-left: 0;
					padding-right: 0;
				}

				.txt-6 {
					padding-left: 0;
				}
			}
		}
	}


	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	@media (min-width:@screen_tablet_min) and (max-width:@screen_tablet_max) {
		.gridbox {
			display: inline-block;
			zoom: 1;
			*display: inline;
			_display: inline;
			vertical-align: top;
			text-align: justify;

			&.one {
				width: 100%;

				.txt-1 {}
			}

			&.two {
				width: 50%;

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.two2 {
				font-size: 15px;

				&.cell-1 {
					width: 50%;
				}

				&.cell-2 {
					width: 50%;
				}

				.txt-1 {
					padding-right: 0;
				}

				.txt-2 {
					padding-left: 0;
				}
			}

			&.two3 {
				font-size: 15px;

				&.cell-1 {
					width: 50%;
				}

				&.cell-2 {
					width: 50%;
				}

				>.txt-1 {
					padding-right: 0;
				}

				>.txt-2 {
					padding-left: 0;
				}
			}

			&.three {

				&.cell-1,
				&.cell-2 {
					width: 50%;
				}

				&.cell-3 {
					width: 100%;
				}

				.txt-1 {
					padding-right: 15px;
				}

				.txt-2 {
					padding-left: 15px;
					padding-right: 0;
				}

				.txt-3 {
					padding-left: 0;
				}

			}

			&.four {
				width: 50%;

				.txt-1 {
					padding-right: 15px;
				}

				.txt-2 {
					padding-left: 15px;
					padding-right: 0;
				}

				.txt-3 {
					padding-left: 0;
					padding-right: 15px;
				}

				.txt-4 {
					padding-left: 15px;
				}
			}

			&.five {

				&.cell-1,
				&.cell-2,
				&.cell-3,
				&.cell-4 {
					width: 50%;
				}

				&.cell-5 {
					width: 100%;
				}

				.txt-1 {
					padding-right: 15px;
				}

				.txt-2,
				{
				padding-left: 15px;
				padding-right: 0;
			}

			.txt-3 {
				padding-left: 0;
				padding-right: 15px;
			}

			.txt-4 {
				padding-left: 15px;
				padding-right: 0;
			}

			.txt-5 {
				padding-left: 0;
			}
		}

		&.six {

			&.cell-1,
			&.cell-2,
			&.cell-3,
			&.cell-4,
			&.cell-5,
			&.cell-6 {
				width: 33.33%;
			}

			.txt-1 {
				padding-right: 20px;
			}

			.txt-4 {
				padding-left: 0;
				padding-right: 20px;
			}

			.txt-2,
			.txt-5 {
				padding-left: 10px;
				padding-right: 10px;
			}

			.txt-3,
			.txt-6 {
				padding-left: 20px;
				padding-right: 0;
			}
		}
	}
}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.flex-box {
	width: 100%;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row; // 가로로 나열 , column:세로
	flex-wrap: wrap;


	&.flex {
		&-gap-tiny {
			gap: 5px;
		}

		&-gap-min {
			gap: 10px;
		}

		&-gap-mid {
			gap: 15px;
		}

		&-gap-big {
			gap: 20px;
		}

		&-gap-huge {
			gap: 30px;
		}

		&-align-start {
			align-items: start;
		}

		// 상단 정렬
		&-align-center {
			align-items: center;
		}

		// 중간 정렬
		&-align-end {
			align-items: end;
		}

		// 하단 정렬

		&-nowrap {
			flex-wrap: nowrap !important;
		}

		// item을 줄바꿈하지 않음


		&-reverse {
			@media (max-width:@screen_tablet_max) {
				flex-direction: row-reverse; // 역순으로 배열
			}
		}
	}


	>.item {
		flex-basis: 10px;
		flex-grow: 1; // 여분만큼 늘어남 , 0: 늘어나지 않음
		min-width: 250px;
		// height: 100px;	// 배경(높이)를 같게 주려면 값을 설정

		&.align-top {
			align-self: flex-start !important;
		}

		// 상단 정렬
		&.align-center {
			align-self: center !important;
		}

		// 중간 정렬
		&.align-end {
			align-self: flex-end !important;
		}

		// 하단 정렬
	}


	&.two12 {
		>.item:nth-child(1) {
			flex-grow: 1;
		}

		>.item:nth-child(2) {
			flex-grow: 2;
		}
	}

	&.two21 {
		>.item:nth-child(1) {
			flex-grow: 2;
		}

		>.item:nth-child(2) {
			flex-grow: 1;
		}
	}

	&.two13 {
		>.item:nth-child(1) {
			flex-grow: 1;
		}

		>.item:nth-child(2) {
			flex-grow: 3;
		}
	}

	&.two31 {
		>.item:nth-child(1) {
			flex-grow: 3;
		}

		>.item:nth-child(2) {
			flex-grow: 1;
		}
	}

	&.two23 {
		>.item:nth-child(1) {
			flex-grow: 2;
		}

		>.item:nth-child(2) {
			flex-grow: 3;
		}
	}

	&.two32 {
		>.item:nth-child(1) {
			flex-grow: 3;
		}

		>.item:nth-child(2) {
			flex-grow: 2;
		}
	}

	&.two17 {
		>.item:nth-child(1) {
			flex-grow: 1;
		}

		>.item:nth-child(2) {
			flex-grow: 7;
		}
	}

	&.two71 {
		>.item:nth-child(1) {
			flex-grow: 7;
		}

		>.item:nth-child(2) {
			flex-grow: 1;
		}
	}


	&.three133 {
		>.item:nth-child(1) {
			flex-grow: 1;
		}

		>.item:nth-child(2) {
			flex-grow: 3;
		}

		>.item:nth-child(3) {
			flex-grow: 3;
		}
	}

	&.three233 {
		>.item:nth-child(1) {
			flex-grow: 2;
		}

		>.item:nth-child(2) {
			flex-grow: 3;
		}

		>.item:nth-child(3) {
			flex-grow: 3;
		}
	}


	&.four1313 {
		>.item:nth-child(1) {
			flex-grow: 1;
		}

		>.item:nth-child(2) {
			flex-grow: 3;
		}

		>.item:nth-child(3) {
			flex-grow: 1;
		}

		>.item:nth-child(4) {
			flex-grow: 3;
		}
	}
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 폴딩 메뉴 */
dl.folding-faq {
	line-height: 2.5em;

	&.active {
		border: 1px solid #dbdbdb;
		border-top: 1px solid #ececec;
		border-radius: 5px;
		background: #fff;
		box-shadow: 0 2px 2px rgba(0, 0, 0, .18);
		padding: 21px;

		dt,
		dd {
			color: @color_black;
		}

		dt {
			font-size: 21px;
			color: @color_orange;
			padding: 10px 15px;

		}

		dd {
			display: block;
			font-size: 17px;
			padding: 10px 15px;

			-webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
		}
	}

	dt,
	dd {
		display: block;
		color: @color_darkgrey;
	}

	dt {
		font-size: 17px;
		font-weight: 600;

		&:before {
			content: '\f2c4';
			font-family: "vkoolicon";
			font-weight: bold !important;
			padding-right: 10px;
		}

		&:hover {
			cursor: pointer;
			color: @color_orange;
		}
	}

	dd {
		font-size: 15px;
		font-weight: 400;
		line-height: 1.9em;
		display: none;
		text-align: justify;

		&:before {
			content: '\e838 ';
			font-family: "vkoolicon";
			font-weight: bold !important;
			padding-right: 10px;
		}

		&:after {
			content: ' \e837';
			font-family: "vkoolicon";
			font-weight: bold !important;
			padding-left: 5px;
		}
	}
}

/* 목록타입 */
dl.list-vertical {

	dt,
	dd {
		display: block;
	}

	dt {
		font-weight: 400;
		border-bottom: 1px solid @color_lightgrey;
	}

}

.LIST_PAGE_BOX {
	text-align: center;
	padding: 20px 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* MODAL */
.modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: scaleX(1.1) scaleY(1.1);
	transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;

	&.show-modal {
		z-index: 99999;
		opacity: 1;
		visibility: visible;
		transform: scaleX(1.0) scaleY(1.0);
		transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
	}

	&.fit-size {
		.modal-inner {
			min-height: unset;

			.modal-content {
				height: unset;
				min-height: unset;

				.content {
					height: unset;
				}
			}
		}
	}


	.modal-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: @color_white;
		padding: 1rem 1.5rem;
		width: 90%;
		max-width: @screen_computer_max;
		height: -webkit-fill-available;
		height: fit-content;
		height: inherit;

		min-height: 90%;
		max-height: 90%;
		border-radius: 0.5rem;
		overflow-y: hidden;


		.modal-header {
			position: absolute;
			top: 7px;
			left: 20px;
			z-index: 99;
			font-size: 1.3em;
		}

		.modal-button {
			position: absolute;
			top: 7px;
			right: 20px;
			z-index: 99;

			.close-button,
			.fullsize-button {
				float: right;
				display: block;
				width: 30px;
				height: 33px;
				line-height: 33px;
				text-align: center;
				color: @color_grey;
				font-size: 25px;

				&:hover {
					cursor: pointer;
					color: @color_black;
				}
			}

			.close-button {
				&:before {
					content: '\e826';
					font-family: "vkoolicon";
					font-weight: bold !important;
				}
			}

			.fullsize-button {
				&:before {
					content: '\e825';
					font-family: "vkoolicon";
				}
			}

			@media (max-width:@screen_mobile_max) {
				.fullsize-button {
					display: none;
				}
			}

		}

		.modal-content {
			position: relative;
			height: 100%;
			min-height: 100%;
			margin-top: 30px;

			.content {
				position: relative;
				background: @color_white;
				width: 100%;
				height: ~"-moz-calc(100% - 50px)";
				height: ~"-webkit-calc(100% - 50px)";
				height: ~"-o-calc(100% - 50px)";
				height: ~"calc(100% - 50px)";

				.xls-document-view {
					max-width: 98vw;
					max-height: 95vh;
					overflow: auto;
				}

				iframe {
					overflow: hidden;
					background-color: @color_white;
				}

				.content-inner {
					padding: 10px 50px 50px 50px;
				}
			}

			@media (max-width:@screen_mobile_max) {
				.content {
					.content-inner {
						padding: 0;
					}
				}
			}
		}


		.modal-bottom {

			.cont_url {
				line-height: 20px;

				a {
					font-size: 11px;
					color: @color_red;


					&:before {
						color: @color_red;
						content: '\e804';
						font-family: "vkoolicon";
						padding-right: 5px;
					}
				}
			}
		}

		.modal-loading {
			display: none;
			position: absolute;
			width: 90px;
			height: 90px;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

	}

	&.is-mobile {
		.modal-inner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: @color_black;
			padding: 0;
			width: 100%;
			height: 100%;
			min-height: 20%;
			border-radius: unset;

			.modal-button {
				top: 0px;
				right: 0px;

				.fullsize-button {
					display: none;
				}

				.close-button {
					width: unset;
					height: unset;
					line-height: unset;
					font-size: 2rem;
					padding: 10px 30px;
					text-align: center;
					border-radius: unset;
				}
			}

			.modal-content {
				width: 100%;
				height: 100%;
			}

			.modal-header {
				position: relative;

				.title {
					display: none;
				}
			}

			.content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: @color_black;
				width: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;

				.xls-document-view {
					max-width: 100vw;
					max-height: 100vh;
					overflow: auto;
				}

				iframe {}


			}

			.modal-bottom {
				background: @color_black;

				.cont_url {
					line-height: 20px;

					a {
						font-size: 11px;
						color: @color_red;


						&:before {
							color: @color_red;
							content: '\e804';
							font-family: "vkoolicon";
							padding-right: 5px;
						}
					}
				}
			}

		}

		&.is-android-442 {
			// 안드로이드 4.4.2 구버전 전용

			.modal-inner {
				display: table;
				height: 100%;
				background: @color_black;
				top: 0;
				left: 0;
				transform: none;
				border-radius: 0;

				.modal-content {
					display: table-cell;
					width: 100%;
					vertical-align: middle;
				}
			}
		}
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (max-width:@screen_mobile_max) {}

@media (max-width:@screen_tablet_max) {}

@media (min-width:@screen_tablet_min) and (max-width:@screen_tablet_max) {}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.sk-cube-grid {
	width: 100%;
	height: 100%;
}

.sk-cube-grid .sk-cube {
	width: 33%;
	height: 33%;
	background-color: red;
	float: left;
	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {

	0%,
	70%,
	100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	}

	35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
	}
}

@keyframes sk-cubeGridScaleDelay {

	0%,
	70%,
	100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	}

	35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
	}
}




@-webkit-keyframes zoomout-zoomin {

	0%,
	70%,
	100% {
		-webkit-transform: scale(1) translate(-45%, -45%);
		transform: scale(1) translate(-45%, -45%);
	}

	35% {
		-webkit-transform: scale(1.5) translate(-45%, -45%);
		transform: scale(1.5) translate(-45%, -45%);
	}
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.ui.fitted.checkbox {
	&.custom1 {
		width: unset !important;
		min-width: 7rem !important;
		line-height: 1.5rem !important;
		padding: 4px 7px 4px 4px !important;

		input:checked~label.radio:before {
			background-color: #2185d0 !important;
		}

		input:checked~label.checkbox:before {
			background-color: #cdd021 !important;
		}

		label {
			color: @color_black;
			padding-top: 0;
			padding-left: 3.8rem !important;
			line-height: 1.5rem !important;

			&.checkbox:before {
				border-radius: 0.5rem;
			}

			&.checkbox:after {
				border-radius: 0.5rem;
			}

		}
	}
}

.ui {
	input[type=color] {
		padding: 0;
		height: 3em;
		line-height: 3em;
	}
}

.ui.pagination.menu {
	margin: 0;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	vertical-align: middle;
}

.ui.pagination.menu .item {
	min-width: 3em;
	text-align: center;
}

.ui.pagination.menu .active.item {
	border-top: none;
	padding-top: .92857143em;
	background-color: rgba(0, 0, 0, .05);
	color: rgba(0, 0, 0, .95);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.ui.pagination.menu .item {
	min-width: unset;
}


/* YOUTUBE EMBED */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container .background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.animation-light {
	position: absolute;
	-webkit-animation: light-ping 2s infinite ease-in-out;
	animation: light-ping 2s infinite ease-in-out;
}



@-webkit-keyframes light-ping {
	0% {
		top: 10%;
		right: 25%;
	}

	50% {
		top: 60%;
		right: 45%;

	}

	100% {
		top: 10%;
		right: 65%;
	}
}

@media (max-width:@screen_tablet_max) {
	.animation-light {
		-webkit-transform: scale(0.7) translate(0, 0);
		transform: scale(0.7) translate(0, 0);
	}

	@-webkit-keyframes light-ping {
		0% {
			top: 10%;
			right: 15%;
		}

		50% {
			top: 50%;
			right: 40%;
		}

		100% {
			top: 10%;
			right: 65%;
		}
	}
}

@media (max-width:@screen_mobile_max) {
	.animation-light {
		-webkit-transform: scale(0.4) translate(0, 0);
		transform: scale(0.4) translate(0, 0);
	}

	@-webkit-keyframes light-ping {
		0% {
			top: 10%;
			right: 25%;
		}

		50% {
			top: 35%;
			right: 35%;
		}

		100% {
			top: 10%;
			right: 55%;
		}
	}
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*  제품소개 애니메이션 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.pro-info-box {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #D8DADC;

	.vkool-product-car {

		img {
			width: 100%;
			display: block;
		}
	}

	@media (max-width:@screen_mobile_max) {}


	.sun {
		position: absolute;
		z-index: 99;
		top: 7%;
		right: 22%;
		margin: auto;
		width: 5%;
		height: 12%;
		border-radius: 50%;
		background: white;
		opacity: 0.9;
		box-shadow: 0px 0px 40px 15px white;

		.ray_box {
			position: absolute;
			margin: auto;
			top: 0px;
			left: 0;
			right: 0;
			bottom: 0;
			width: 70px;
			-webkit-animation: ray_anim 120s linear infinite;
			animation: ray_anim 120s linear infinite;

			.ray {
				background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 100%);
				background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 100%);
				margin-left: 10px;
				border-radius: 80% 80% 0 0;
				position: absolute;
				opacity: 0.1;
			}

			.ray1 {
				height: 170px;
				width: 30px;
				-webkit-transform: rotate(180deg);
				top: -175px;
				left: 15px;
			}

			.ray2 {
				height: 100px;
				width: 8px;
				-webkit-transform: rotate(220deg);
				top: -90px;
				left: 75px;
			}

			.ray3 {
				height: 170px;
				width: 50px;
				-webkit-transform: rotate(250deg);
				top: -80px;
				left: 100px;
			}

			.ray4 {
				height: 120px;
				width: 14px;
				-webkit-transform: rotate(305deg);
				top: 30px;
				left: 100px;
			}

			.ray5 {
				height: 140px;
				width: 30px;
				-webkit-transform: rotate(-15deg);
				top: 60px;
				left: 40px;
			}

			.ray6 {
				height: 90px;
				width: 50px;
				-webkit-transform: rotate(30deg);
				top: 60px;
				left: -40px;
			}

			.ray7 {
				height: 180px;
				width: 10px;
				-webkit-transform: rotate(70deg);
				top: -35px;
				left: -40px;
			}

			.ray8 {
				height: 120px;
				width: 30px;
				-webkit-transform: rotate(100deg);
				top: -45px;
				left: -90px;
			}

			.ray9 {
				height: 80px;
				width: 10px;
				-webkit-transform: rotate(120deg);
				top: -65px;
				left: -60px;
			}

			.ray10 {
				height: 190px;
				width: 23px;
				-webkit-transform: rotate(150deg);
				top: -185px;
				left: -60px;
			}
		}
	}



	.pro-txt {
		position: absolute;
		top: 28%;
		font-size: 1.8vw;
		letter-spacing: -0.1vw;
		line-height: 1.8vw;
		z-index: 99;

		&.pro-txt-1 {
			top: 28%;
			right: 62%;
			text-align: center;
			-webkit-animation: pro-txt-1-animation 10s linear infinite;
			animation: pro-txt-1-animation 10s linear infinite;

			.pro-txt-1-per {
				display: block;
				color: @color_red;
				font-weight: bold;
			}
		}

		&.pro-txt-2 {
			top: 28%;
			left: 62%;
			text-align: center;
			-webkit-animation: pro-txt-2-animation 10s linear infinite;
			animation: pro-txt-2-animation 10s linear infinite;

			.pro-txt-2-per {
				display: block;
				color: @color_red;
				font-weight: bold;
			}
		}

		&.pro-txt-3 {
			top: 25%;
			left: 50%;
			text-align: center;
			transform: translate(-50%, -50%);
			-webkit-animation: pro-txt-3-animation 10s linear infinite;
			animation: pro-txt-3-animation 10s linear infinite;

			.pro-txt-3-per {
				display: block;
				color: @color_red;
				font-weight: bold;
			}
		}
	}

	@media (min-width:@screen_computer_max) {
		.pro-txt {
			font-size: 35px;
			letter-spacing: -1px;
			line-height: 35px;
		}
	}

	.vkool-product-img {
		width: 100%;
		position: absolute;

		img {
			width: 100%;
			display: block;
		}


		&.vkool-product-ray1-arrow1 {
			z-index: 13;
			-webkit-animation: vkool-product-ray1-arrow1-animation 10s linear infinite;
			animation: vkool-product-ray1-arrow1-animation 10s linear infinite;
		}

		&.vkool-product-ray1-arrow1-1 {
			z-index: 13;
			-webkit-animation: vkool-product-ray1-arrow1-1-animation 10s linear infinite;
			animation: vkool-product-ray1-arrow1-1-animation 10s linear infinite;
		}

		&.vkool-product-ray1-arrow2 {
			z-index: 14;
			-webkit-animation: vkool-product-ray1-arrow2-animation 10s linear infinite;
			animation: vkool-product-ray1-arrow2-animation 10s linear infinite;
		}

		&.vkool-product-ray1-arrow2-1 {
			z-index: 14;
			-webkit-animation: vkool-product-ray1-arrow2-1-animation 10s linear infinite;
			animation: vkool-product-ray1-arrow2-1-animation 10s linear infinite;
		}

		&.vkool-product-ray1-arrow3 {
			z-index: 15;
			-webkit-animation: vkool-product-ray1-arrow3-animation 10s linear infinite;
			animation: vkool-product-ray1-arrow3-animation 10s linear infinite;
		}

		&.vkool-product-ray1-arrow3-1 {
			z-index: 15;
			-webkit-animation: vkool-product-ray1-arrow3-1-animation 10s linear infinite;
			animation: vkool-product-ray1-arrow3-1-animation 10s linear infinite;
		}


		&.vkool-product-ray3-arrow1 {
			z-index: 11;
			-webkit-animation: vkool-product-ray3-arrow1-animation 10s linear infinite;
			animation: vkool-product-ray3-arrow1-animation 10s linear infinite;
		}

		&.vkool-product-ray3-arrow2 {
			z-index: 12;
			-webkit-animation: vkool-product-ray3-arrow2-animation 10s linear infinite;
			animation: vkool-product-ray3-arrow2-animation 10s linear infinite;
		}

	}

}





@-webkit-keyframes ray_anim {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@-webkit-keyframes vkool-product-ray1-arrow1-animation {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes vkool-product-ray1-arrow1-1-animation {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	40% {
		opacity: 0;
	}

	55% {
		opacity: 1;
	}

	70% {
		opacity: 0;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@-webkit-keyframes vkool-product-ray1-arrow2-animation {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes vkool-product-ray1-arrow2-1-animation {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	45% {
		opacity: 0;
	}

	60% {
		opacity: 1;
	}

	75% {
		opacity: 0;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@-webkit-keyframes vkool-product-ray1-arrow3-animation {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes vkool-product-ray1-arrow3-1-animation {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	65% {
		opacity: 1;
	}

	80% {
		opacity: 0;
	}

	95% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@-webkit-keyframes vkool-product-ray3-arrow1-animation {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	60% {
		opacity: 0.3;
	}

	100% {
		opacity: 0.5;
	}
}

@-webkit-keyframes vkool-product-ray3-arrow2-animation {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
		top: -50%;
	}

	60% {
		opacity: 1;
		top: 0;
	}

	67% {
		opacity: 0;
		top: 0;
	}

	70% {
		opacity: 0;
		top: -50%;
	}

	75% {
		opacity: 1;
		top: 0;
	}

	77% {
		opacity: 0;
		top: 0;
	}

	80% {
		opacity: 0;
		top: -50%;
	}

	85% {
		opacity: 1;
		top: 0;
	}

	87% {
		opacity: 0;
		top: 0;
	}

	100% {
		opacity: 1;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@-webkit-keyframes pro-txt-1-animation {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes pro-txt-2-animation {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
	}

	55% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes pro-txt-3-animation {
	0% {
		opacity: 0;
	}

	35% {
		opacity: 0;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.icon-circle {
	color:@color_white;
	text-align: center;
	line-height: 21px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, .8), black);

	position: relative;
	display: inline-block;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	margin: 0 2px;

	&.black {
		border: 2px solid black;
	}
	&.gold {
		border: 2px solid gold;
	}

	&.silver {
		border: 2px solid silver;
	}

	&.small {
		line-height: 17px;
		font-size: 1rem;
		width: 19px;
		height: 19px;
		background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, .5), black);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	}



	&:hover{
		background: radial-gradient(circle at 30% 50%, rgba(26, 1, 13, 0.8), black);
	}
}