// main: main.less

@import url('../fonts/NanumBarunGothic/nanumbarungothic.css');

body {
	font-family: @font-family-sans-serif;
	color: @font-color-base;
}

.topbar {
	width: 100%;
	padding: 8px 0;
	background-color: @dark-color;

	.topbar-column {
		&:first-child {
			float: left;
		}
		&:last-child {
			float: right;
			a {
				&:after {
					font-family: fontAwesome;
					content: " \f105";
				}
				color: @white-color;
			}
		}
	}

	h1 {
		width: 146px;
		height: 20px;
		margin: 0;
		padding: 0;
		background: url('../images/common/h1-fabricfarm.png') no-repeat 0 0;
	}
}

.navbar {
	margin-bottom: inherit;
}

.main-navigation {
	background-color: @white-color;
	padding-bottom: 5px;
	
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.24);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.24);
	-ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.24);
	-o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.24);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.24);
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	&.navbar-stuck {
		position: fixed;
		width: 100%;
		border-radius: 0;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.navbar-header {
		margin-left: inherit;
		h1 {
			font-size: 24px;
			font-weight: 700;

			a {
				span.sub-color {color:@pink-color;}
				color: @dark-color;
			}
			a:hover {
				text-decoration: none;
			}
		}
		.navbar-toggle {
			margin-bottom: inherit;
			.fa-bars {
				font-size: 24px;
			}
		}
	}

	.navbar-collapse {
		text-align: center;
		padding-top: 12px;

		.onepage-nav {
			li:first-child {
				@media (max-width: @screen-xs-max) {
					border-top: 1px solid #d2d2d2;
				}
			}
			li {
				> a {
					font-size: 18px;
					padding: 10px 20px;
					color: @dark-color;
					@media (max-width: @screen-xs-max) {
						font-size: 16px;
					}
					&:hover, &.active {
						@media (min-width: @screen-sm-min) {
							color: @pink-color;
							background-color: @white-color;
							span {border-bottom: 3px solid @dark-color; padding-bottom: 5px;}
						}
					}
				}
				@media (max-width: @screen-xs-max) {
					border-bottom: 1px solid #d2d2d2;
				}
			}

			@media (min-width: @screen-sm-min) {
				display: inline-block;
				float: none;
			}
		}

		.btn-nav {
			li {
				> a {
					padding: 8px 20px;
					border: 1px solid #d2d2d2;
					color: @dark-color;
				}
			}

			@media (min-width: @screen-sm-min) {
				float: right;
			}
		}
	}
}

header,
section {
	.btn {
		padding: 15px 45px;

		.fa {
			margin-left: 20px;
		}
	}

	.opacity-bottom {
		position: relative;

		&:before {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			.opacity(0.8);
			content: "";
		}
	}
}

.display-text p {
	text-align: center;
	color: @white-color;

	&.text-pink {
		color: @pink-color;
	}

	&.text-size-md {
		font-size: 40px;
		font-weight: 200;
	}

	&.text-size-lg {
		font-size: 64px;
		font-weight: 400;
	}
}

.main-header {
	padding: 190px 0 0;
	max-height: 956px;
	text-align: center;
	background: url('../images/main/bg-main-header.jpg') no-repeat center center scroll;

	.btn {
		margin: 120px 0;
	}

	.opacity-bottom {
		padding: 80px 0;

		&:before {
			background-color: @white-color;
		}
		
		.counts {
			strong {
				display: block;
			}

			.fa {
				font-size: 40px;
			}

			.count-subscript {
				margin: 12px 0 0;
				font-size: 18px;
			}

			.count-number {
				margin: 0;
				font-size: 24px;
			}
		}

		@media (min-width: @screen-sm-min) {
			.counts {
				strong {
					display: inline;
				}

				.fa {
					font-size: 60px;
				}

				.count-subscript {
					font-size: 20px;
				}

				.count-number {
					font-size: 30px;
				}
			}
		}

		.text-green {
			color: #01a231;
		}

		.text-blue {
			color: #077ee5;
		}

		.text-purple {
			color: #655fb6;
		}
	}
}

.section-introduce {
	padding: 430px 0 0;
	max-height: 1066px;
	text-align: center;
	background: url('../images/main/bg-introduce-section.jpg') no-repeat center center scroll;
	overflow: hidden;

	.display-text p {
		text-align: left;
	}

	.opacity-bottom {
		margin-top: 60px;
		padding: 30px 0 120px;

		&:before {
			background-color: @dark-color;
		}

		p {
			margin: 2px 0;
			color: @white-color;
			text-align: left;
		}

		.container {
			position: relative;

			.overimage {
				position: absolute;
				top: -340px;
				left: 495px;
	
				@media (max-width: @screen-sm-min) {
					display: none;
				}
			}
		}
	}
}

.section-guide {
	position: relative;
	padding: 340px 0 0;
	max-height: 1066px;
	text-align: left;
	background: url('../images/main/bg-guide-section.jpg') no-repeat center center scroll;
	overflow: hidden;

	.overimage {
		position: absolute;
		top: 160px;

		@media (max-width: @screen-sm-min) {
			display: none;
		}
	}

	.display-text {
		margin-left: 570px;
		vertical-align: bottom;

		p {
			text-align: left;
		}

		@media (max-width: @screen-sm-min) {
			margin-left: 0;
		}
	}

	.opacity-bottom {
		margin-top: 60px;
		padding: 30px 0 120px;

		&:before {
			background-color: @white-color;
		}

		p {
			margin: 2px 0;
			color: @white-color;
			text-align: left;
		}

		.container {
			position: relative;
			text-align: center;

			ul.list-inline {
				text-align: center;
				> li {
					&:after {
						display: table-cell;
						vertical-align: middle;
						padding-left: 15px;
						font-family: fontAwesome;
						content: " \f105";
						font-size: 20px;
					}

					&:last-child {
						&:after {
							display: none;
						}
					}

					.text-circle {
						display: table-cell;
						width: 120px;
						height: 120px;
						padding: 5px;
						background-color: @white-color;
						border: 1px solid #959282;
						border-radius: 70px;
						text-align: center;
						font-size: 16px;
						vertical-align: middle;

						i.fa {
							display: block;
							font-size: 36px;
							margin-bottom: 8px;
						}
					}

					@media (max-width: @screen-sm-min) {
						.text-circle {
							width: 110px;
							height: 110px;
							border-radius: 55px;

							i.fa {
								display: none;
							}
						}
					}
				}
			}

			a.btn {
				margin-top: 15px;
				color: @dark-color;
				border-color: #959282;
			}
		}
	}
}

.section-income {
	padding: 340px 0 0;
	max-height: 1066px;
	text-align: center;
	background: url('../images/main/bg-income-section.jpg') no-repeat center center scroll;
	overflow: hidden;

	.display-text p {
		text-align: left;
	}

	.opacity-bottom {
		margin-top: 60px;
		padding: 30px 0 180px;

		&:before {
			background-color: @dark-color;
		}

		p {
			margin: 2px 0;
			color: @white-color;
			text-align: left;
		}

		.container {
			position: relative;
			text-align: left;

			.overimage {
				position: absolute;
				top: -340px;
				left: 495px;
	
				@media (max-width: @screen-sm-min) {
					display: none;
				}
			}

			a.btn {
				margin-top: 30px;
				color: @white-color;
				border-color: @white-color;
			}
		}
	}
}

footer {
	background-color: @dark-color;

	.nav-footer {
		padding: 15px 0;
		border-bottom: 1px solid #333333;
		overflow: hidden;

		.customer-call {
			float: right;
			color: @white-color;
			font-size: 24px;

			&:before {
				color: #f0577c;
				font-family: fontAwesome;
				content: "\f095";
				margin-right: 5px;
				vertical-align: middle;
			}
		}
	}
	
	.addr-copyright {
		padding: 20px 0;

		p {
			line-height: 150%;
			margin: 0;
			color: #8c8c8c;

			strong, b {
				color: @white-color;
			}
		}
	}
}

.modal {
	.modal-dialog {
		.modal-content {
			.modal-header {
				background: @pink-color;
				padding: 15px 20px 7px;

				h4.modal-title {
					color: @white-color;
					font-weight: 700;
				}

				button {
					span {color: @white-color;}
				}
				.close {
					text-shadow: none;
					opacity: 1;
					margin-top: 0;
					font-size: 32px;
				}
			}
		}
	}
}