/* "/common/css/less-config.less" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Common Color */
@color_link					: #0E6EB8;
@color_line					: #0E6EB8;

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


/* Color */
@color_black				: #131313;
@color_white				: #FFFFFF;
@color_brightgrey			: #f6f6f6;
@color_lightgrey			: #F1F1F1;
@color_grey					: #9E9E9E;
@color_darkgrey				: #616161;
@color_bluegrey				: #607D8B;
@color_orange				: #FF5722;
@color_gold					: #FCBF33;

@color_red					: #F44336;
@color_yellow				: #FFFF66;
@color_green				: #4CAF50;
@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;


/* Option Slider */
@option_width				: 185px;
@option_bg					: #FFFFFF;


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

.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;
		line-height: 1.7rem;
		font-size: 1rem;
		margin-bottom: 1.5rem;
		overflow-wrap: break-word;

		label {
			display: block;
			text-align: left !important;
		}

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

		&.one {
			width: 100%;
			.txt-1 {
				position: relative;
			}
		}

		&.two, &.two2, &.two3, &.two4, &.two5, &.two6, &.two7, &.two8, &.two9 {
			.txt-1 {
				padding-right: 1rem;
			}
			.txt-2 {
				padding-left: 1rem;
			}
		}
		&.two {
			width: 49%;
			margin-left:.5%;
			margin-right:.5%;
		}
		&.two2 {
			&.cell-1 {
				width: 75.5%;
			}
			&.cell-2 {
				width: 24.5%;
			}
		}
		&.two3 {
			&.cell-1 {
				width: 24.5%;
			}
			&.cell-2 {
				width: 75.5%;
			}
		}
		&.two4 {
			&.cell-1 {
				width: 40%;
			}
			&.cell-2 {
				width: 60%;
			}
		}
		&.two5 {
			&.cell-1 {
				width: 60%;
			}
			&.cell-2 {
				width: 40%;
			}
		}
		&.two6 {
			&.cell-1 {
				width: 20%;
			}
			&.cell-2 {
				width: 80%;
			}
		}
		&.two7 {
			&.cell-1 {
				width: 80%;
			}
			&.cell-2 {
				width: 20%;
			}
		}
		&.two8 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2 {
				width: 85%;
			}
		}
		&.two9 {
			&.cell-1 {
				width: 85%;
			}
			&.cell-2 {
				width: 15%;
			}
		}

		&.three, &.three2, &.three3, &.three4, &.three5, &.three6, &.three7, &.three8, &.three9 {
			.txt-1 {
				padding-right: 1rem;
			}
			.txt-2 {
				padding-left: 1rem;
				padding-right: 1rem;
			}
			.txt-3 {
				padding-left: 1rem;
			}
		}
		&.three {
			.txt-1 {
				padding-right: 20px;
			}
			.txt-2 {
				padding-left: 10px;
				padding-right: 10px;
			}
			.txt-3 {
				padding-left: 20px;
			}
			width: 33.33%;
		}
		&.three2 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2 {
				width: 42.5%;
			}
			&.cell-3 {
				width: 42.5%;
			}
		}
		&.three3 {
			&.cell-1 {
				width: 20%;
			}
			&.cell-2 {
				width: 40%;
			}
			&.cell-3 {
				width: 40%;
			}
		}
		&.three4 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2 {
				width: 35%;
			}
			&.cell-3 {
				width: 50%;
			}
		}
		&.three5 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2 {
				width: 50%;
			}
			&.cell-3 {
				width: 35%;
			}
		}

		&.four, &.four2, &.four3, &.four4, &.four5, &.four6, &.four7, &.four8, &.four9 {
			.txt-1 {
				padding-right: 1rem;
			}
			.txt-2, .txt-3 {
				padding-left: 1rem;
				padding-right: 1rem;
			}
			.txt-4 {
				padding-left: 1rem;
			}
		}
		&.four {
			.txt-1 {
				padding-right: 22px;
			}
			.txt-2 {
				padding-left: 8px;
				padding-right: 1rem;
			}
			.txt-3 {
				padding-left: 1rem;
				padding-right: 8px;
			}
			.txt-4 {
				padding-left: 22px;
			}
			width: 25%;
		}
		&.four2 {
			&.cell-1,&.cell-3 {
				width: 20%;
			}
			&.cell-2,&.cell-4 {
				width: 30%;
			}
		}
		&.four3 {
			&.cell-1,&.cell-3 {
				width: 30%;
			}
			&.cell-2,&.cell-4 {
				width: 20%;
			}
		}
		&.four4 {
			&.cell-1,&.cell-3 {
				width: 15%;
			}
			&.cell-2,&.cell-4 {
				width: 35%;
			}
		}
		&.four5 {
			&.cell-1,&.cell-3 {
				width: 35%;
			}
			&.cell-2,&.cell-4 {
				width: 15%;
			}
		}
		&.four6 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2 {
				width: 45%;
			}
			&.cell-3,&.cell-4 {
				width: 20%;
			}
		}
		&.four7 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2,&.cell-3 {
				width: 20%;
			}
			&.cell-4 {
				width: 45%;
			}
		}
		&.four8 {
			&.cell-1 {
				width: 15%;
			}
			&.cell-2 {
				width: 28%;
			}
			&.cell-3 {
				width: 28%;
			}
			&.cell-4 {
				width: 29%;
			}
		}

		&.five {
			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 {
			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, &.two2, &.two3, &.two4, &.two5, &.two6, &.two7, &.two8, &.two9 {
				&.cell-1, &.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}

			&.three, &.three2, &.three3, &.three4, &.three5, &.three6, &.three7, &.three8, &.three9 {
				&.cell-1, &.cell-2, &.cell-3 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
				}
			}

			&.four, &.four2, &.four3, &.four4, &.four5, &.four6, &.four7, &.four8, &.four9 {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-4 {
					padding-left: 0;
				}
			}

			&.five {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5 {
					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 {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
					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, &.two2, &.two3, &.two4, &.two5, &.two6, &.two7, &.two8, &.two9 {
					&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
						width: 100%;
					}
					.txt-1 {
						padding-right: 0;
					}
					.txt-2 {
						padding-left: 0;
					}
			}

			&.three, &.three2, &.three3, &.three4, &.three5, &.three6, &.three7, &.three8, &.three9 {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
				}
			}

			&.four, &.four2, &.four3, &.four4, &.four5, &.four6, &.four7, &.four8, &.four9 {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-4 {
					padding-left: 0;
				}
			}

			&.five {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
					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 {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
					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, &.two2, &.two3, &.two4, &.two5, &.two6, &.two7, &.two8, &.two9 {
				&.cell-1, &.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}

			&.three, &.three2, &.three3, &.three4, &.three5, &.three6, &.three7, &.three8, &.three9 {
				&.cell-1, &.cell-2 {
					width: 50%;
				}
				&.cell-3 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 1rem;
				}
				.txt-2 {
					padding-left: 1rem;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
				}
			}

			&.four, &.four2, &.four3, &.four4, &.four5, &.four6, &.four7, &.four8, &.four9 {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4 {
					width: 50%;
				}
				.txt-1 {
					padding-right: 1rem;
				}
				.txt-2 {
					padding-left: 1rem;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
					padding-right: 1rem;
				}
				.txt-4 {
					padding-left: 1rem;
				}
			}

			&.five {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4 {
					width: 50%;
				}
				&.cell-5 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 1rem;
				}
				.txt-2, {
					padding-left: 1rem;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
					padding-right: 1rem;
				}
				.txt-4 {
					padding-left: 1rem;
					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;
				}
			}
		}
	}
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 카드형 박스 */
.card-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	.cards {
		max-width: 100%;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		min-height: 0;
		background: @color_brightgrey;
		padding: 0;
		margin: 0 0.5rem 1rem 0.5rem;
		border: none;
		border-radius: .28571429rem;
		-webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
		box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
		-webkit-transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
		transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
		transition: box-shadow .1s ease,transform .1s ease;
		transition: box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;

		.card-image {
			img {
				width: 100%;
				margin: 0;
				padding: 0;
			}
		}

		.card-content {
		}

		.card-button {
		
		}
		
		.card-cnt {
			position: absolute;
			top: 0;
			right: 0;
			background: @color_orange;
			color: @color_white;
			padding: 0.5rem;

			&.left {
				right: unset;
				left: 0;
			}
		}
	}

}



.steps-box {
	width: 100%;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	/*display: inline-flex;*/
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	margin: 1rem 0;
	-webkit-box-shadow: none;
	line-height: 1.1rem;
	border-radius: 0.3rem;
	border: 1px solid @color_grey;

	&:last-child {
		margin-bottom: 0;
	}

	&.tiny {
		.step {
			padding: 0.4rem 0.7rem !important;
		}
	}
	&.small {
		.step {
			padding: 0.7rem 1.2rem !important;
		}
	}
	&.big {
		.step {
			padding: 2rem 2rem !important;
		}
	}


	.step {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		vertical-align: middle;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin: 0 0;
		padding: 1.14285714rem 2rem;
		background: @color_white;
		color: @color_black;
		-webkit-box-shadow: none;
		border-radius: 0;
		border: none;
		border-right: 1px solid @color_grey;
		-webkit-transition: background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
		transition: background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
		transition: background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;
		transition: background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;

		&:not(.disabled){
			&:after {
				display: block;
				position: absolute;
				z-index: 2;
				content: '';
				top: 50%;
				right: -1px;
				border: medium none;
				background-color: @color_white;
				width: 1.1rem;
				height: 1.1rem;
				border-style: solid;
				border-color: @color_grey;
				border-width: 0 1px 1px 0;
				-webkit-transition: background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
				transition: background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
				transition: background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;
				transition: background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;
				-webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
				transform: translateY(-50%) translateX(50%) rotate(-45deg);
			}
		}


		&.bg-color-black {&:after { background-color: @color_black;}}
		&.bg-color-white {&:after { background-color: @color_white;}}
		&.bg-color-brightgrey {&:after { background-color: @color_brightgrey;}}
		&.bg-color-lightgrey {&:after { background-color: @color_lightgrey;}}
		&.bg-color-grey {&:after { background-color: @color_grey;}}
		&.bg-color-darkgrey {&:after { background-color: @color_darkgrey;}}
		&.bg-color-orange {&:after { background-color: #ffb971;}}
		&.bg-color-red {&:after { background-color: @color_red;}}
		&.bg-color-yellow {&:after { background-color: @color_yellow;}}
		&.bg-color-green {&:after { background-color: @color_green;}}
		&.bg-color-blue {&:after { background-color: @color_blue;}}
		&.bg-color-gold {&:after { background-color: #ffe098;}}
		&.bg-color-purple {&:after { background-color: @color_purple;}}
		&.bg-color-olive {&:after { background-color: @color_olive;}}
		&.bg-color-teal {&:after { background-color: @color_teal;}}
		&.bg-color-violet {&:after { background-color: @color_violet;}}
		&.bg-color-pink {&:after { background-color: @color_pink;}}
		&.bg-color-brown {&:after { background-color: @color_brown;}}

		&:first-child {
			border-radius: .28571429rem 0 0 .28571429rem;
		}
		&:last-child {
			border-right: none;
			margin-right: 0;
			border-radius: 0 .28571429rem .28571429rem 0;

			&:after {
				display: none;
			}
		}
		&.active {
			cursor: auto;
			background: @color_brightgrey;
			&:after {
				display: block;
				background: @color_brightgrey;
			}
		}

		.title {
			font-weight: 700;
		}

	}
}




.vertical-middle-out {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	&> .vertical-middle-in {
		width: 100%;
		max-width: 450px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		vertical-align: middle;
		-ms-flex-item-align: center!important;
		align-self: center!important;
		text-align: center;
	}
}