@charset "utf-8";

.content_wrapper h1, .content_wrapper h2, .content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
	margin:			0 0 0.7em 0;
}
.content_wrapper p, .content_wrapper code, .content_wrapper pre, .content_wrapper kbd {
	margin:			0 0 1em 0;
}
a {
	outline:		none;
}


html, body {
	margin:		0px;
	padding:	0px;
}
body {
	background-position:	50% 0 !important;
	background-size:		105% !important;
}
	.inner_wrapper {
		width:		1100px;
		margin:		0 auto;
	  	position:	relative;
	}

		.head_wrapper {
			width:		100%;
			height:		450px;
			position:	relative;
		}
			#keyvisual, .cm-slides-addon {
				width:		100%;
				height:		450px;
				position:	absolute;
				background-position:	center !important;
				background-size:		cover !important;
				top:		0;
				left:		0;
			}
				#logo {
					display:	block;
					position:	absolute;
					top:		0;
					left:		0;
					width:		100%;
					height:		450px;
				}
				.mobile_navigation {
					display:	none;
					padding:	15px 0;
					text-align:	center;
				}
					.mobile_navigation a {
						text-decoration:	none;
					}
				.navigation_wrapper {
					display:		block;
					position:		absolute;
					top:			0;
					left:			0;
				}
				.navigation_wrapper ul {
					list-style: none;
					margin:		0;
					padding:	0;
				}
						.navigation_wrapper > ul > li {
							display:	inline-block;
							padding:	0;
							margin:		14px 8px 3px 0;
							position:	relative;
							vertical-align:	top;
						}
								.navigation_wrapper > ul > li > a {
									display:			block;
									padding:			4px 25px;
									word-wrap:			break-word;
									position:			relative;
									
									-webkit-transition:	color 0.3s, background-color 0.3s, padding 0.3s;
									-moz-transition:	color 0.3s, background-color 0.3s, padding 0.3s;
									transition:			color 0.3s, background-color 0.3s, padding 0.3s;
								}
								.navigation_wrapper > ul > li > a:after {
									content:	"";
									position:	absolute;
									bottom:		-6px;
									left:		50%;
									width:		0px;
									height:		4px;
									
									-webklit-transition:	width 0.3s cubic-bezier(.5,.02,.38,1.5), left 0.3s cubic-bezier(.5,.02,.38,1.5);
									-moz-transition:		width 0.3s cubic-bezier(.5,.02,.38,1.5), left 0.3s cubic-bezier(.5,.02,.38,1.5);
									transition:				width 0.3s cubic-bezier(.5,.02,.38,1.5), left 0.3s cubic-bezier(.5,.02,.38,1.5);
								}
									
								.navigation_wrapper > ul > li:hover > a:after,
								.navigation_wrapper > ul > li.cm_current > a:after {
									left:		0;
									width:		100%;									
								}
								
								.subnavigation_wrapper > ul {		/* SUBNAVIGATION */
									display:	block;
									list-style:	none;
									margin:		0 0 20px 0;
									padding:	0;						
								}
										.subnavigation_wrapper > ul > li {
											display:	inline-block;
											margin:		5px 5px 5px 0;
											padding:	0;
											position:	relative;
										}	
										.subnavigation_wrapper > ul > li:after {
											content:		"|";
											display:		inline-block;
											vertical-align:	top;
											padding:		6px 23px;
										}
										.subnavigation_wrapper > ul > li:last-child:after {
											display:	none;
										}
												.subnavigation_wrapper > ul > li > a {
													display:			inline-block;
													position:			relative;
													padding:			6px 0px;
													margin:				0;
													word-wrap:			break-word;
													text-decoration:	none;
													vertical-align:		top;
													
													-webkit-transition:	color 0.3s, background-color 0.3s;
													-moz-transition:	color 0.3s, background-color 0.3s;
													transition:			color 0.3s, background-color 0.3s;
												}
												.subnavigation_wrapper > ul > li:first-child > a {
													padding:			6px 0px 6px 0;
												}
												.subnavigation_wrapper > ul > li > a:before {
													content:	"";
													position:	absolute;
													bottom:		-6px;
													left:		50%;
													width:		0px;
													height:		4px;
													
													-webklit-transition:	width 0.3s cubic-bezier(.5,.02,.38,1.5), left 0.3s cubic-bezier(.5,.02,.38,1.5);
													-moz-transition:		width 0.3s cubic-bezier(.5,.02,.38,1.5), left 0.3s cubic-bezier(.5,.02,.38,1.5);
													transition:				width 0.3s cubic-bezier(.5,.02,.38,1.5), left 0.3s cubic-bezier(.5,.02,.38,1.5);
												}
													
												.subnavigation_wrapper > ul > li:hover > a:before,
												.subnavigation_wrapper > ul > li.cm_current > a:before {
													left:		0;
													width:		100%;									
												}
														.subnavigation_wrapper li.cm_has_subnavigation > a:after {
															content:			"»";
															display:			inline-block;
															padding:			0 0 0 20px;
															vertical-align:		top;
																			
															-webkit-transition:	color 0.3s, background-color 0.3s;
															-moz-transition:	color 0.3s, background-color 0.3s;
															transition:			color 0.3s, background-color 0.3s;			
														}
														.subnavigation_wrapper > ul > li > ul {		/* SUB SUB NAVIGATION */
															transform-origin:	top;
															transform:			scale(1,0);
															list-style:			none;
															margin:				5px 0 0 0;
															padding:			0;
															position:			absolute;
															width:				220px;
															z-index:			1;
															
															visibility:			hidden;
															opacity:			0;
															-webkit-transition:	transform 0.3s ease-in-out 0.5s, visibility 0.3s ease-out 0.5s, opacity 0.3s ease-out 0.5s, height 0.3s ease-out 0.5s;	
															-moz-transition:	transform 0.3s ease-in-out 0.5s, visibility 0.3s ease-out 0.5s, opacity 0.3s ease-out 0.5s, height 0.3s ease-out 0.5s;	
															transition:			transform 0.3s ease-in-out 0.5s, visibility 0.3s ease-out 0.5s, opacity 0.3s ease-out 0.5s, height 0.3s ease-out 0.5s;	
														}	
														.subnavigation_wrapper > ul > li:hover > ul {	
															transform:			scale(1,1);
															visibility:			visible;
															opacity:			1;	
															-webkit-transition:	transform 0.3s cubic-bezier(.5,.02,.38,1.5), visibility 0.3s ease-out 0s, opacity 0.3s ease-out 0s, height 0.3s ease-out 0s;	
															-moz-transition:	transform 0.3s cubic-bezier(.5,.02,.38,1.5), visibility 0.3s ease-out 0s, opacity 0.3s ease-out 0s, height 0.3s ease-out 0s;	
															transition:			transform 0.3s cubic-bezier(.5,.02,.38,1.5), visibility 0.3s ease-out 0s, opacity 0.3s ease-out 0s, height 0.3s ease-out 0s;
														}													
																.subnavigation_wrapper > ul > li > ul > li {
																	margin:		0;
																	padding:	0;
																	position:	relative;
																}
																		.subnavigation_wrapper > ul > li > ul > li > a {
																			display:			block;
																			padding:			10px 20px;
																			word-wrap:			break-word;
																			text-decoration:	none;
																			
																			-webkit-transition:	color 0.3s, background-color 0.3s;
																			-moz-transition:	color 0.3s, background-color 0.3s;
																			transition:			color 0.3s, background-color 0.3s;
																		}
		.title_wrapper {
			position:	absolute;
			bottom:		0px;
			padding:	15px 0;
			width:		100%;
		}

	.borderline {
		height: 20px;
	}
		.content_wrapper {
			padding:		20px 45px 40px 45px;
			word-wrap:		break-word;
			line-height: 	1.7;
			width:			1100px;
			margin:			0 auto;
		}
				.design_content {	
					display:		inline-block;
					width:			830px;
					vertical-align:	top;
					margin:			0 50px 30px 0;
				}
				.sidebar_wrapper {
					display:		inline-block;
					width:			220px;
				}
		.footer_wrapper {
			text-align:	center;
			padding:	40px 0;
		}
		.footer_wrapper a {
			text-decoration:	none;
		}
		.footer_wrapper .scroll-up {
			font-size:	2.5vw;
			cursor:		pointer;
		}