@import 'common';

@import url('https://fonts.googleapis.com/css?family=Lato');

@mixin lato() {
	font-family: 'Lato', sans-serif;
}

body {
	@media (min-width: $lg) {
		padding-top: 30px;
	}
}

/*
#header {
	@media (min-width: $lg) {
		background-color: transparent;
		#nav {
			> ul {
				> li {
					> a {
						color: #fff;
						&:hover, &:focus {
							color: #e00014;
						}
					}
				}
			}
		}
	}
}
*/

body.scrolled {
	#header {
		@media (min-width: $lg) {
			background-color: #fff;
			#nav {
				> ul {
					> li {
						> a {`
							color: inherit;
						}
					}
				}
			}
		}
	}
}

/*
#btn-goto-top {
	@media (min-width: 1400px) {
		top: 50%;
		left: auto;
		right: 3%;
		margin-left: auto;
		margin-right: -16px;
		margin-top: 150px;
		width: 44px;
		height: 44px;
	}
}
*/

#btn-goto-top {
	z-index: 1001;
	position: fixed;
	bottom: 15px;
	right: 15px;
	display: none;
	width: 40px;
	height: 40px;
	background-color: #c2c2c3;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	line-height: 1em;
	@include titi();
	letter-spacing: 1px;
	@include trans();
	&:hover, &:focus {
		opacity: .8;
	}
	i {
		position: relative;
		top: 2px;
		margin-top: 3px;
		display: block;
		font-size: 20px;
		line-height: 1em;
	}
	@media (min-width: $sm) {
		
	}
	@media (min-width: 1400px) {
		top: 50%;
		right: 3%;
		margin-right: -15px;
		margin-top: 150px;
		width: 44px;
		height: 44px;
		i {
			margin-top: 5px;
		}
	}
}

#quick-nav {
	position: fixed;
	top: 50%;
	right: 3%;
	z-index: 1001;
	margin-top: -60px;
	> ul {
		> li {
			> a {
				display: block;
				padding: 0;
				width: 15px;
				height: 15px;
				background-color: #b5b6b6;
				border-radius: 50%;
			}
			&.active {
				> a {
					background-color: #f08501;
				}
			}
			& + li {
				a {
					margin-top: 20px;
				}
			}
		}
	}
}

#introduce {
	position: relative;
	.intro-item {
		height: 450px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-color: #2b2b2b;
		.figure {
			z-index: 0;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -225px;
			width: 100%;
			height: 450px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50% 50%;
			-ms-transform: scale(1.4);
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			@include trans($prop: transform, $sec: 10s);
		}
		.video {
			display: none;
			z-index: 1;
			position: absolute;
			left: 0;
			top: 0;
			height: 450px;
			background-color: #000;
			-ms-transform: scale(2.5);
			-webkit-transform: scale(2.5);
			transform: scale(2.5);
		}
		.cover {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			//background-color: rgba(#000, .5);
			box-shadow: inset 0 0 500px rgba(#000, 1);
		}
		.content {
			z-index: 2;
			position: relative;
			margin-top: 45px;
			padding-left: 20px;
			padding-right: 20px;
			//position: absolute;
			//top: 50%;
			//left: 50%;
			//margin-left: 0;
			//margin-top: 0;
			//width: 0;
			//height: 0;
			//background-color: rgba(#000, .75);
			.text {
				//padding-top: 30px;
				color: #fff;
				h2 {
					@include titi();
					font-weight: 600;
					font-size: 28px;
					line-height: 36px;
					letter-spacing: 2px;
					opacity: 0;
					text-shadow: 1px 2px 3px rgba(#000, .5);
				}
				hr {
					margin-top: 30px;
					margin-bottom: 20px;
					margin-left: auto;
					margin-right: auto;
					width: 0;
					border-top: 1px solid #fff;
				}
				p {
					font-size: 12px;
					line-height: 25px;
					opacity: 0;
					text-shadow: 1px 2px 3px rgba(#000, .5);
				}
			}
			.bar {
				position: relative;
				display: inline-block;
				margin-top: 25px;
				margin-bottom: 20px;
				width: 200px;
				height: 1px;
				.dot {
					z-index: 1;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -4px;
					margin-left: -3px;
					width: 7px;
					height: 7px;
					border-radius: 50%;
					background-color: #fff;
					opacity: 0;
				}
				.left {
					z-index: 0;
					position: absolute;
					top: 0;
					right: 50%;
					width: 0;
					height: 1px;
					background-color: #e40009;
				}
				.right {
					z-index: 0;
					position: absolute;
					top: 0;
					left: 50%;
					width: 0;
					height: 1px;
					background-color: #f0840c;
				}
			}
			
		}
		&.active {
			.figure {
				-ms-transform: scale(1);
				-webkit-transform: scale(1);
				transform: scale(1);
			}
			.content {
				//margin-left: -150px;
				//margin-top: -180px;
				//width: 300px;
				//height: 320px;
				//@include trans($sec: 1s, $timing: cubic-bezier(0, 0, 0.2, 1), $delay: .5s);
				.text {
					h2 {
						@include trans($prop: all, $sec: .5s, $delay: 1s);
						opacity: 1;
					}
					/*
					hr {
						width: 70px;
						@include trans($prop: all, $sec: .25s, $delay: 1.75s);
					}
					*/
					p {
						opacity: 1;
						@include trans($prop: all, $sec: .5s, $delay: 3s);
					}
				}
				.bar {
					.dot {
						opacity: 1;
						@include trans($prop: all, $sec: .5s, $delay: 1.5s);
					}
					.left {
						width: 50%;
						//max-width: 120px;
						@include trans($prop: all, $sec: 1s, $delay: 2s);
					}
					.right {
						width: 50%;
						//max-width: 120px;
						@include trans($prop: all, $sec: 1s, $delay: 2s);
					}
				}
			}
		}
	}
	.bx-controls {
		.bx-controls-direction {
			display: none;
		}
		.bx-pager {
			z-index: 51;
			position: absolute;
			bottom: 20px;
			width: 100%;
			height: 10px;
			line-height: 10px;
			text-align: center;
			.bx-pager-item {
				display: inline-block;
				.bx-pager-link {
					float: left;
					width: 10px;
					height: 10px;
					border: 1px solid #fff;
					border-radius: 50%;
					color: #fff;
					&.active {
						background-color: #fff;
					}
				}
				& + .bx-pager-item {
					.bx-pager-link {
						margin-left: 5px;
					}
				}
			}
		}
	}
	@media (min-width: $sm) {
		.intro-item {
			height: 670px;
			.figure {
				margin-top: -375px;
				height: 670px;
				& + .video {
					display: block;
				}
			}
			.video {
				width: 100%;
				height: 670px;
				-ms-transform: scale(1.8);
				-webkit-transform: scale(1.8);
				transform: scale(1.8);
			}
			.content {
				margin-top: 90px;
				margin-left: auto;
				margin-right: auto;
				padding-left: 50px;
				padding-right: 50px;
				width: 710px;
				.text {
					//padding-top: 70px;
					h2 {
						font-size: 48px;
						line-height: 60px;
					}
					hr {
						margin-top: 30px;
						margin-bottom: 35px;
					}
					p {
						font-size: 16px;
						line-height: 30px;
					}
				}
				.bar {
					width: 400px;
				}
			}
			&.active {
				.content {
					//margin-top: -255px;
					//margin-left: -355px;
					//width: 710px;
					//height: 455px;
					/*
					.bar {
						.left {
							max-width: 160px;
						}
						.right {
							max-width: 160px;
						}
					}
					*/
				}
			}
		}
		.bx-controls {
			.bx-pager {
				bottom: 40px;
				height: 16px;
				line-height: 16px;
				.bx-pager-item {
					display: inline-block;
					.bx-pager-link {
						width: 16px;
						height: 16px;
					}
					& + .bx-pager-item {
						.bx-pager-link {
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
	@media (min-width: $md) {
		.intro-item {
			.video {
				-ms-transform: scale(1.5);
				-webkit-transform: scale(1.5);
				transform: scale(1.5);
			}
			.content {
				width: 940px;
			}
		}		
	}
	@media (min-width: $lg) {
		overflow: hidden;
		.intro-item {
			height: 850px;
			.figure {
				margin-top: -425px;
				height: 850px;
			}
			.video {
				height: 850px;
				-ms-transform: scale(1.5);
				-webkit-transform: scale(1.5);
				transform: scale(1.5);
			}
			.content {
				margin-top: 250px;
				padding-right: 0;
				//margin-left: auto;
				//margin-right: auto;
				width: 1200px;
				.bar {
					width: 400px;
				}
			}
			&.active {
				.content {
					//margin-top: -200px;
					//margin-left: -343px;
					//width: 686px;
					//height: 460px;
				}
			}
		}
		.bx-controls {
			.bx-controls-direction {
				display: block;
				.bx-prev {
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 51;
					margin-top: 20px;
					margin-left: -560px;
				}
				.bx-next {
					position: absolute;
					top: 50%;
					right: 50%;
					z-index: 51;
					margin-top: 20px;
					margin-right: -560px;
				}
			}
			.bx-pager {
				display: table;
				table-layout: fixed;
				left: 50%;
				margin-left: -600px;
				width: 1200px;
				height: 40px;
				bottom: 50px;
				.bx-pager-item {
					display: table-cell;
					.bx-pager-link {
						display: block;
						width: 100%;
						height: 100%;
						line-height: 40px;
						border: 0;
						text-align: center;
						background-color: rgba(#000, .7);
						border-radius: 0;
						text-decoration: none;
						font-size: 15px;
						&.active {
							background-color: #f08501;
						}
						.sr-only {
							position: relative;
							width: inherit;
							height: inherit;
							margin: inherit;
							padding: 0;
							overflow: hidden;
							clip: inherit;
							border: 0;
						}
					}
					& + .bx-pager-item {
						padding-left: 1px;
						.bx-pager-link {
							margin: 0;
						}
					}
				}
			}
		}
	}
}

.section-header {
	margin-bottom: 30px;
	text-align: center;
	h3 {
		font-size: 28px;
		@include maven();
		letter-spacing: -1px;
	}
	hr {
		margin-top: 15px;
		margin-bottom: 15px;
		width: 50px;
		border-top: 4px solid #e40009;
	}
	p {
		font-size: 13px;
		ine-height: 22px;
	}
	@media (min-width: $sm) {
		margin-bottom: 60px;
		h3 {
			font-size: 40px;
		}
		hr {
			margin-top: 20px;
			margin-bottom: 20px;
		}
		p {
			font-size: 15px;
			line-height: 24px;
		}
	}
	@media (min-width: $lg) {
		margin-bottom: 85px;
		hr {
			margin-top: 25px;
			margin-bottom: 25px;
		}
	}
}

	.business-item {
		display: table;
		margin-bottom: 10px;
		height: 165px;
		width: 100%;
		background-color: #fff;
		text-decoration: none;
		color: #333;
		@include trans();
		> div {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			i:before {
				display: block;
				margin-bottom: 15px;
				height: 67px;
			}
			h4 {
				@include maven();
				font-weight: 700;
				font-size: 14px;
				line-height: 18px;
			}
			p {
				display: none;
			}
			.btn {
				display: none;
				@include trans();
			}
		}
		&:hover, &:focus {
			background-color: #ef4600;
			color: #fff;
			box-shadow: 0 0 15px rgba(#000, .2);
		}
	}
	.project {
		i:before {
			margin-bottom: -3px !important;
			content: url(/assets/images/ico_pencil.png);
		}
		&:hover, &:focus {
			i:before {
				content: url(/assets/images/ico_pencil_white.png);
			}
		}
	}
	.product {
		i:before {
			content: url(/assets/images/ico_beaker.png);
		}
		&:hover, &:focus {
			i:before {
				content: url(/assets/images/ico_beaker_white.png);
			}
		}
	}
	.service {
		i:before {
			content: url(/assets/images/ico_hospital.png);
		}
		&:hover, &:focus {
			i:before {
				content: url(/assets/images/ico_hospital_white.png);
			}
		}
	}
	.cro {
		i:before {
			content: url(/assets/images/ico_microscope.png);
		}
		&:hover, &:focus {
			i:before {
				content: url(/assets/images/ico_microscope_white.png);
			}
		}
	}
	@media (min-width: $sm) {
		.business-item {
			display: block;
			margin-bottom: 20px;
			padding-top: 80px;
			padding-bottom: 50px;
			height: 540px;
			> div {
				display: block;
				i:before {
					margin-top: 0;
					margin-bottom: 30px !important;
				}
				h4 {
					font-size: 21px;
					line-height: normal;
					font-weight: 700;
				}
				.bar {
					display: block;
					margin: 20px auto;
					width: 1px;
					height: 32px;
					background-color: #ccc;
				}
				p {
					display: block;
					font-size: 14px;
					line-height: 22px;
					color: #777;
					min-height: 88px;
				}
				.btn {
					display: inline-block;
					margin-top: 5px;
					width: 170px;
					height: 35px;
					border-radius: 0;
					background-color: #fff;
					@include maven();
					font-size: 12px;
					color: #666;
					box-shadow: none;
					line-height: 21px;
					border-color: #ccc;
				}
			}
			&:hover, &:focus {
				.bar {
					background-color: #fff;
				}
				p {
					color: #fff;
				}
				.btn {
					background-color: #ef4600;
					color: #fff;
					border-color: #fff;
				}
			}
		}
		.project {
			> div {
				i:before {
					margin-bottom: 6px !important;
				}
			}
		}
	}
	@media (min-width: $md) {
		.business-item {
			margin-bottom: 30px;
			padding-bottom: 40px;
		}
	}
	@media (min-width: 1600px) {
		padding-top: 85px;
		padding-bottom: 155px;
		> .container.section-body {
			width: 100%;
			max-width: 1600px;
			> .row {
				> div {
					width: 25%;
					&:nth-of-type(odd) {
						clear: none;
					}
				}
			}
		}
		.business-item {
			margin-bottom: 0;
			padding-top: 70px;
			height: 500px;
			> div {
				i:before {
					margin-bottom: 25px !important;
				}
				.bar {
					margin: 15px auto;
				}
			}
		}
		.project {
			> div {
				i:before {
					margin-bottom: 1px !important;
				}
			}
		}
	}
}

#rnd {
	position: relative;
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
	.figure {
		height: 270px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
	}
	.details {
		background-image: url(/assets/images/main/bg_rnd_details.gif);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		div {
			padding: 45px 20px 120px;
			text-align: center;
			.field {
				@include maven();
				color: rgba(#fff, .15);
				font-size: 12px;
			}
			h4 {
				margin-top: 15px;
				margin-bottom: 25px;
				font-size: 30px;
				color: #fff;
				font-weight: normal;
			}
			hr {
				width: 50px;
				border-top: 3px solid $kcolor;
			}
			.summary {
				margin-bottom: 30px;
				color: rgba(#fff, .4);
				font-size: 12px;
				line-height: 18px;
				font-weight: 300;
				word-break: keep-all;
				word-wrap: normal;
			}
			.chart {
				margin-top: 60px;
				.img-responsive {
					margin: 0 auto;
				}
			}
		}
	}
	.bx-controls {
		.bx-controls-direction {
			z-index: 51;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -100px;
			width: 200px;
			height: 45px;
			background-color: #fff;
			.bx-prev {
				float: left;
				width: 50%;
				text-align: center;
				line-height: 45px;
				font-size: 30px;
				color: #ccc;
				text-decoration: none;
				&:hover, &:focus {
					color: #e40009;
				}
			}
			.bx-next {
				float: left;
				width: 50%;
				text-align: center;
				line-height: 45px;
				font-size: 30px;
				text-decoration: none;
				color: #ccc;
				background-image: url(/assets/images/main/bar_rnd_controls.gif);
				background-repeat: no-repeat;
				background-position: 0 50%;
				&:hover, &:focus {
					color: #e40009;
				}
			}
		}
	}
	.pager {
		display: none;
	}
	@media (min-width: $sm) {
		.figure {
			height: 490px;
		}
		.details {
			div {
				padding: 75px 30px 150px;
				.field {
				}
				h4 {
					margin-top: 5px;
					margin-bottom: 50px;
					font-size: 50px;
				}
				.summary {
					font-size: 14px;
					line-height: 25px;
				}
			}
		}
		/*
		.bx-controls {
			.bx-controls-direction {
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -100px;
				width: 200px;
				height: 45px;
				background-color: #fff;
			}
		}
		*/
	}
	@media (min-width: $md) {
		overflow: hidden;
		.figure {
			margin-right: -15px;
			height: 700px;
		}
		.details {
			margin-left: -15px;
			height: 700px;
		}
		.bx-controls {
			.bx-controls-direction {
				box-shadow: -1px -1px 5px rgba(#000, .45);
			}
		}
	}
	@media (min-width: $lg) {
		.figure {
			height: 756px;
		}
		.details {
			height: 756px;
			div {
				padding: 120px 50px;
				.field {
					font-size: 13px;
				}
				h4 {
					margin-top: 10px;
					margin-bottom: 40px;
				}
				hr {
					margin-bottom: 30px;
				}
			}
		}
		.bx-controls {
			.bx-controls-direction {
				margin-left: -135px;
				width: 270px;
				height: 70px;
				.bx-prev {
					line-height: 70px;
				}
				.bx-next {
					line-height: 70px;
				}
			}
		}
		.pager {
			z-index: 51;
			position: absolute;
			top: 500px;
			left: 58.5%;
			display: block;
			margin-left: 100px;
			width: 250px;
			border-left: 3px solid rgba(#fff, .15);
			a {
				display: block;
				padding-left: 30px;
				width: 100%;
				height: 35px;
				line-height: 35px;
				font-size: 16px;
				text-decoration: none;
				opacity: .15;
				color: #fff;
				text-align: left;
				font-weight: 300;
				.num {
					@include maven();
					font-size: 18px;
					display: inline-block;
					min-width: 35px;
				}
				&:hover, &:focus {
					opacity: .5;
				}
				&.active {
					opacity: 1;
					font-size: 18px;
					.num {
						font-size: 20px;
					}
				}
				& + a {
					margin-top: 10px;
				}
			}
			.bar {
				position: absolute;
				left: -3px;
				top: 0;
				width: 3px;
				height: 35px;
				background-color: #fff;
				@include trans();
			}
		}
	}
}

#news {
	padding-top: 40px;
	padding-bottom: 45px;
	background-color: #f4f7ff;
	.section-header {
		hr {
			margin-bottom: 0;
		}
	}
	.news-item {
		display: block;
		margin-bottom: 10px;
		color: #fff;
		figure {
			position: relative;
			img {
				width: 100%;
			}
			figcaption {
				position: absolute;				
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				> div {
					position: relative;
					width: 100%;
					height: 100%;
					background: transparent;
					background: -webkit-linear-gradient(transparent 50%, #000 100%);
					background: -o-linear-gradient(transparent 50%, #000 100%);
					background: -moz-linear-gradient(transparent 50%, #000 100%);
					background: linear-gradient(transparent 50%, #000 100%);
					> div {
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 15px;
						width: 100%;
						height: 70px;
						p {
							overflow: hidden;
							margin-bottom: 5px;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						span {
							@include maven();
							opacity: .5;
							&:before {
								margin-right: 10px;
								font-family: 'fontello';
								content: '\e803';
							}
						}
					}
				}
			}
		}
		&:hover, &:focus {
			figure {
				figcaption {
					> div {
						> div {
							p {
								text-decoration: underline;
							}
						}
					}
				}
			}
		}
	}
	.btn-more {
		border-radius: 0;
		@include maven();
		font-size: 12px;
		color: #666;
		background-color: #f4f7ff;
		box-shadow: none;
		&:hover, &:focus {
			border-color: #f0840c;
			background-color: #f0840c;
			color: #fff;
			@include trans();
		}
	}
	@media (min-width: $sm) {
		padding-top: 70px;
		padding-bottom: 70px;
		.news-item {
			margin-bottom: 20px;
			figure {
				figcaption {
					> div {
						> div {
							padding: 40px;
							height: 120px;
							p {
								font-size: 15px;
							}
						}
					}
				}
			}
		}
		.btn-more {
			font-size: 13px;
			line-height: 23px;
		}
	}
	@media (min-width: $md) {
		padding-top: 80px;
		padding-bottom: 80px;
		.news-item {
			margin-bottom: 30px;
			figure {
				figcaption {
					> div {
						> div {
							padding: 30px;
							height: 100px;
						}
					}
				}
			}
		}
		.btn-more {
			margin: 0 auto;
			max-width: 400px;
		}
	}
}

#campaign {
	padding-top:20px;
	padding-bottom: 20px;
	background-color: #eee;

	background-position: 50% 50%;
	background-attachment: fixed;
	text-align: center;
	color: #fff;
	h3 {
		margin-bottom: 30px;
		@include titi();
		font-size: 45px;
		font-weight: 200;
		line-height: 45px;
	}
	p {
		font-size: 13px;
		line-height: 22px;
		font-weight: 300;
		b {
			display: inline-block;
			width: 51px;
			height: 37px;
			line-height: 37px;
			font-size: 15px;
			background-image: url(/assets/images/main/ico_circle_o.png);
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 100% 100%;
		}
	}
	@media (min-width: $sm) {
		padding-top: 100px;
		padding-bottom: 80px;
		h3 {
			font-size: 70px;
			line-height: 90px;
		}
		p {
			font-size: 18px;
			line-height: 30px;
			b {
				width: 64px;
				height: 46px;
				line-height: 46px;
				font-size: 22px;
			}
		}
	}
	@media (min-width: $lg) {
		padding-top: 125px;
		padding-bottom: 125px;
		h3 {
			font-size: 80px;
		}
	}
}

#information {
	section {
		border: 1px solid #dfdfdf;
		@media (min-width: $sm) {
			margin-bottom: 20px;
		}
		@media (min-width: $lg) {
			margin-bottom: 30px;
		}
	}
	#pr-video {
		position: relative;
		border: 0;
		.label {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			padding: 0;
			width: 60px;
			height: 60px;
			line-height: 60px;
			background-color: #e40009;
			border-radius: 0;
			@include maven();
			font-size: 13px;
			letter-spacing: 1px;
		}
	}
	#press {
		overflow: hidden;
		.label {
			float: left;
			margin-left: -1px;
			margin-top: -1px;
			padding: 0;
			width: 60px;
			height: 60px;
			line-height: 60px;
			background-color: #e40009;
			border-radius: 0;
			@include maven();
			font-size: 13px;
			letter-spacing: 1px;
		}
		h5 {
			overflow: hidden;
			padding-left: 20px;
			padding-right: 20px;
			font-size: 15px;
			line-height: 60px;
			text-overflow: ellipsis;
			white-space: nowrap;
			a {
				color: #333;
				text-decoration: none;
				&:hover, &:focus {
					color: $kcolor;
				}
			}
		}
		p {
			clear: both;
			padding: 20px 10px;
			font-size: 12px;
			line-height: 22px;
			color: #666;
		}
		.figure {
			margin-bottom: -1px;
			width: 100%;
			height: 110px;
			background-size: cover;
			background-position: 50% 50%;
		}
	}
	#contact {
		height: 135px;
		a {
			display: block;
			padding: 25px 25px 40px;
			text-align: center;
			color: #333;
			text-decoration: none;
			i {
				display: block;
				margin: 0 auto;
				width: 60px;
				height: 60px;
				background-image: url(/assets/images/ico_building.png);
				background-size: auto 100%;
				background-repeat: no-repeat;
				background-position: 50% 100%;
			}
			h5 {
				margin-top: 10px;
				font-size: 13px;
			}
			p {
				display: none;
			}
			&:hover, &:focus {
				h5 {
					color: $kcolor;
				}
			}
		}
	}
	#ir {
		height: 135px;
		a {
			display: block;
			padding: 25px;
			text-align: center;
			color: #333;
			text-decoration: none;
			i {
				display: block;
				margin: 0 auto;
				width: 60px;
				height: 60px;
				background-image: url(/assets/images/ico_chart.png);
				background-size: auto 100%;
				background-repeat: no-repeat;
				background-position: 50% 100%;
			}
			h5 {
				margin-top: 10px;
				font-size: 13px;
			}
			p {
				display: none;
			}
			&:hover, &:focus {
				h5 {
					color: $kcolor;
				}
			}
		}
	}
	#cs {
		.cs-info {
			padding: 25px 20px;
			text-align: center;
			h5 {
				margin-bottom: 10px;
				font-size: 13px;
			}
			.num {
				margin-bottom: 5px;
				font-size: 30px;
				@include lato();
				font-weight: bolder;
				color: #e40009;
			}
			.for-as {
				margin: 5px auto 10px;
				max-width: 300px;
				height: 31px;
				line-height: 31px;
				background-color: #f08501;
				color: #fff;
				font-size: 13px;
				letter-spacing: 1px;
			}
			.time {
				color: #666;
				line-height: 16px;
			}
		}
	}
	@media (min-width: $sm) {
		padding-top: 60px;
		padding-bottom: 40px;
		#pr-video {
			.label {
				width: 80px;
				height: 80px;
				line-height: 80px;
			}
		}
		#press {
			position: relative;
			//height: 334px;
			height: 304px;
			.label {
				width: 80px;
				height: 80px;
				line-height: 80px;
			}
			h5 {
				line-height: 80px;
				font-size: 20px;
			}
			p {
				padding: 25px 20px;
				height: 100px;
				font-size: 13px;
				line-height: 25px;
			}
			.figure {
				margin: 0;
				position: absolute;
				bottom: 0;
				left: 0;
				height: 150px;
				background-size: cover;
				background-position: 50% 50%;
			}
		}
		#contact {
			height: 157px;
			a {
				position: relative;
				text-align: left;
				div {
					width: 120px;
					i {
						position: absolute;
						top: 50%;
						right: 40px;
						margin-top: -35px;
						width: 70px;
						height: 70px;
						background-size: auto;
					}
					h5 {
						margin-bottom: 10px;
						font-size: 16px;
					}
					p {
						display: block;
						font-size: 13px;
						line-height: 20px;
						color: #666;
						word-break: keep-all;
						word-wrap: normal;
					}
				}
			}
		}
		#ir {
			height: 157px;
			a {
				position: relative;
				text-align: left;
				div {
					width: 120px;
					i {
						position: absolute;
						top: 50%;
						right: 40px;
						margin-top: -35px;
						width: 70px;
						height: 70px;
						background-size: auto;
					}
					h5 {
						margin-bottom: 10px;
						font-size: 16px;
					}
					p {
						display: block;
						font-size: 13px;
						line-height: 20px;
						color: #666;
						word-break: keep-all;
					}
				}
			}
		}
		#cs {
			height: 200px;
			.cs-info {
				padding-right: 0;
				padding-left: 30px;
				text-align: left;
				h5 {
					font-size: 16px;
				}
				.num {
					margin-bottom: 10px;
				}
				.for-as {
					//margin: 0 0 10px 0;
					margin-left: 0;
					max-width: 320px;
					text-align: center;
				}
				.time {
					line-height: 20px;
					font-size: 13px;
				}
			}
			.cs-menu {
				margin-top: 23px;
				margin-left: -20px;
				padding-right: 30px;
				ul {
					li {
						position: relative;
						a {
							display: block;
							padding-left: 35px;
							color: #666;
							font-size: 13px;
							line-height: 50px;
							text-decoration: none;
							&:after {
								float: right;
								margin-right: 18px;
								font-family: 'fontello';
								content: '\e801';
							}
							&:hover, &:focus {
								color: $kcolor;
								&:after {
									color: #666;
								}
							}
						}
						&:before {
							position: absolute;
							top: 18px;
							left: 16px;
							font-family: 'fontello';
						}
						&.notice:before {
							content: '\f0f7';
						}
						&.inquiry:before {
							content: '\f128';
						}
						&.catalog:before {
							left: 15px;
							content: '\e804';
						}
						& + li {
							border-top: 1px solid #dee2e5;
						}
					}
				}
			}
		}
	}
	@media (min-width: $md) {
		#pr-video {
			margin-bottom: 30px;
		}
		#press {
			margin-bottom: 30px;
			height: 402px;
		}
		#cs {
			.cs-menu {
				margin-left: -30px;
			}
		}
	}
	@media (min-width: $lg) {
		padding-top: 80px;
		padding-bottom: 50px;
		#contact {
			height: 152px;
			a {
				div {
					i {
						right: 30px;
					}
				}
			}
		}
		#ir {
			height: 152px;
			a {
				div {
					i {
						right: 30px;
					}
				}
			}
		}
		#press {
			height: 353px;
		}
		#cs {
			//height: 334px;
			height: 353px;
			.cs-info {
				padding: 25px 30px 15px;
				h5 {
					margin-bottom: 5px;
				}
				.num {
					margin-bottom: 5px;
					text-align: center;
				}
				.for-as {
				}
				.time {
					word-spacing: -1px;
				}
			}
			.cs-menu {
				margin-top: 0;
				margin-left: 0;
				padding-left: 30px;
				padding-right: 30px;
				ul {
					border-top: 2px solid #666;
				}
			}
		}
	}
}