/***
 *** PAGE LEVEL LAYOUT COMPONENT CSS Document
 ***
 *** V. 1.00 by Darren, 2015.1.3
 ***
 *** - HOME
 *** - PRODUCT
 *** - PRODUCT INTRO
 *** - CONTACT
 ***
 ***/


/***
 *** BEGIN HOME
 ***/

#main-visual-banner{
    clear: both;
    width: 100%;
    background: #251717;
    margin:0 auto;
    padding:0;
}
#corp-intro-area {
	width: 100%;
	overflow: hidden;
	margin: 2.35% auto 4.2%;
	padding: 0;
}
	#corp-intro-area .cia-left-block {
		float: left;
		display: inline-block;
		width: 33%;
		overflow: hidden;
		margin: 0 0 0 1%;
		padding: 0;
		border-radius: 12px;
	}
		#corp-intro-area .cia-left-block img {
			width: 100%;
		}
	#corp-intro-area .cia-right-block {
		float: right;
		display: inline-block;
		width: 55%;
		overflow: hidden;
		margin: 3% 2% 0 0;
		padding: 0;
	}
		#corp-intro-area h2 {
			color: #0E2E53;
			font-size: 1.25em;
			letter-spacing: 0.1em;
		}
		#corp-intro-area p {
			color: #231815;
			font-size: 0.938em;
			line-height: 200%;
			text-align: justify;
		}
#main-service-item-area {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
	#main-service-item-area ul {
		position: relative;
		float: left;
		display: inline-block;
		width: 31.5%;
		overflow: hidden;
		margin: 0 0.85% 5%;
		padding: 0;
	}
	#main-service-item-area li {
		width: 100%%;
		overflow: hidden;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
		#main-service-item-area li img {
			width: 100%;
		}
		#main-service-item-area li .service-item-text {
			width: 100%;
			overflow: hidden;
			color: #0E2E53;
			font-size: 0.875em;
			letter-spacing: 2px;
			margin: 0;
			padding: 2.1% 0 3%;
		}


/***
 *** BEGIN PRODUCT
 ***/

#prod-item-area {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 0 8%;
}
	#prod-item-area ul {
		position: relative;
		float: left;
		display: inline-block;
		width: calc( 100% / 3.2 );
		height: 255px;
		overflow: hidden;
		margin: 0 0.85% 5%;
		padding: 0;

		@media (max-width: 1680px) {
			height: 245px;
		}
		@media (max-width: 800px) {
			height: 210px;
			margin-bottom: 3%;
		}
		@media (max-width: 640px) {
			height: 190px;
			margin-bottom: 3%;
		}
		@media (max-width: 480px) {
			width: calc( 100% / 2.25 );
			height: 190px;
			margin: 0 2.25% 3%;
		}
		@media (max-width: 320px) {
			height: 100px !important;
			margin-bottom: 3%;
		}

	}
	#prod-item-area li {
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
		#prod-item-area li img {
			width: 100%;
		}
		#prod-item-area li .prod-item-text {
			width: 100%;
			overflow: hidden;
			color: #0E2E53;
			font-size: 1em;
			letter-spacing: 2px;
			margin: 0;
			padding: 2.1% 0 3%;

			@media (max-width: 800px) {
				font-size: 0.938rem;
			}

		}
			#prod-item-area li .prod-item-text a:link, #prod-item-area li .prod-item-text a:visited, #prod-item-area li .prod-item-text a:hover {
				color: #0E2E53;
			}
		#prod-item-area li p {
			width: 95%;
			overflow: hidden;
			color: #333;
			font-size: 0.875em;
			line-height: 180%;
			text-align: left;
			margin: 0 auto;
			padding: 2.1% 0;
		}
			#prod-item-area li p a:link, #prod-item-area li p a:visited, #prod-item-area li p a:hover {
				color: #333;
			}
		#prod-item-area li .div-with-no-pic {
			width: 99%;
			height: 83.13%;
			border: #CCC 1px solid;

			@media (max-width: 1680px) {
				height: 86.13%;
			}
			@media (max-width: 800px) {
				height: 83.13%;
			}
			@media (max-width: 720px) {
				height: 75%;
			}
			@media (max-width: 640px) {
				height: 73.5%;
			}
			@media (max-width: 414px) {
				float: left;
				width: 45%;
				height: 88.3%;
				margin-right: 3%;
				vertical-align: middle;
			}
			@media (max-width: 360px) {
				height: 89.8%;
			}
			@media (max-width: 320px) {
				height: 91.6%;
			}

		}


/***
 *** BEGIN PRODUCT INTRO
 ***/

.pdf-download {
	float: right;
	width: 25%;
	font-size: 0.938rem;
	font-weight: 300;
	letter-spacing: 0.1rem;
	text-align: right;
	margin: 1% 0 0;
}
	.pdf-download a:link, .pdf-download a:visited, .pdf-download a:hover {
		color: #0E2E53;
	}
#prod-intro-area {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 0 8%;
}
	#prod-intro-area ul {
		position: relative;
		float: left;
		display: inline-block;
		width: 30.5%;
		height: 255px;
		overflow: hidden;
		margin: 3% 1.25%;
		padding: 0;

		@media (max-width: 1680px) {
			height: 245px;
		}
		@media (max-width: 800px) {
			height: 210px;
			margin-bottom: 3%;
		}
		@media (max-width: 640px) {
			height: 190px;
			margin-bottom: 3%;
		}
		@media (max-width: 480px) {
			width: calc( 100% / 2.25 );
			height: 190px;
			margin: 0 2.25% 3%;
		}
		@media (max-width: 320px) {
			height: 100px !important;
			margin-bottom: 3%;
		}

	}
	#prod-intro-area li {
		width: 100%%;
		overflow: hidden;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
		#prod-intro-area li img {
			width: 100%;
		}
		#prod-intro-area li .prod-name-text {
			width: 100%;
			height: 3rem;
			overflow: hidden;
			color: #0E2E53;
			font-size: 1em;
			letter-spacing: 2px;
			margin: 0;
			padding: 2.1% 0 3%;
		}


/***
 *** BEGIN CONTACT
 ***/

#contact-area {
	position: relative;
	width: 90.5%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}
	#contact-area ul {
		position: relative;
		width: 100%;
		overflow: hidden;
		margin: 0 auto 2.75%;
		padding: 0;
	}
	#contact-area li.service-item-pic {
		position: relative;
		display: inline-block;
		width: 26%;
		overflow: hidden;
		text-align: center;
		margin: 0 1.15% 0 0;
		padding: 0;
	}
		#contact-area li img {
			width: 100%;
		}
		.contact-text {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			overflow: hidden;
			background: RGBA( 35, 24, 21, 0.8 );
			color: #FFF;
			font-size: 0.875em;
			margin: 0;
			padding: 2.1% 0 3%;
		}
	#contact-area li.service-item-desc {
		position: relative;
		display: inline-block;
		width: 72%;
		overflow: hidden;
		color: #231815;
		font-size: 0.875em;
		line-height: 180%;
		text-align: justify;
		margin: 0;
		padding: 0;
		vertical-align: top;
	}
 .iframe-google-map {
    width: 100%;
    height: 395px;
    margin-top: 6%;
    border: 0; 
}