@import 'less-config.less';

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

.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;

		img {
			max-width: 100%;
		}


		&.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: 50%;
		}
		&.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;

		&: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;
			}
		}
		&.disabled {
			&:after {
				display: none;
			}
		}


		.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%;
		-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;
	}
}