@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700);
/*@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*/
@import url(https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp);
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot?-ee0u0f');
	src:url('../fonts/icomoon/icomoon.eot?#iefix-ee0u0f') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff?-ee0u0f') format('woff'),
		url('../fonts/icomoon/icomoon.ttf?-ee0u0f') format('truetype'),
		url('../fonts/icomoon/icomoon.svg?-ee0u0f#icomoon') format('svg');
}
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'),
	   url('../fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'),
	   url('../fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'),
	   url('../fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

body {
	background: #fff;
	font-weight: 300;
	font-size: 22px;
	line-height: 1.8;
	font-family: 'Roboto', 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
	letter-spacing: -1px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a { outline: none; color: #cf4a5c; text-decoration: none; }
a:hover, a:focus { color: #69606b; }
img, ul, li, table, dl, dt, dd { margin: 0; padding: 0; }
html, body, .container, .header { height: 100%; }

/* background-color */
.company { background: #43434b; color: #b2b2c0; }
.products { background: #f2f2f2; color: #333; }
.rnd { background: #0c5c84; color: #f2f2f2; }
.contact { background: #43434b; color: #f1f1f1; }

/* error page */
.err-bg { width: 100%; height: 100%; display: table; background: url(../img/bg-error.jpg) fixed no-repeat;
					background-color: #43434b; background-size: cover; color: #f1f1f1; }
.err-head { width: 100%; position: absolute; top: 0; left: 0; padding: 1em; overflow: hidden; }
.err-head a { margin-left: 1em; color: #f7f7f7; font-size: 0.8em; font-weight: 500; text-shadow: 1px 1px 1px #666; }
.err-head a:hover { color: #ca4e4e; text-shadow: none; }
.err-msg { display: table-cell; text-align: center; vertical-align: middle; }
.err-msg p:first-child { font-size: 4em; font-weight: 500; text-transform: uppercase; }
.err-msg p:nth-child(2) { font-size: 1.5em; text-shadow: 1px 1px 0 #000; }
.err-msg a { color: #49B2F3; font-weight: 500; text-shadow: 1px 1px 0 #000; text-decoration: underline; }
.err-msg a:hover { color: #fff; }

/* scrollTo Top */
.top {
	position: fixed;
	bottom: 5%;
	right: 2%;
	text-decoration: none;
	color: #ebebeb;
	border: 1px solid #ebebeb;
	border-radius: 5px;
  background-color: rgba(0,0,0,0.3);
	padding: 2em 1em 0.2em;
	font-size: 0.8em;
	text-align: center;
	display: none;
	z-index: 100;
}
.top span::before {
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	height: 100%;
	color: #ebebeb;
	content: "\e096";
	text-transform: none;
	font-size: 1.8em;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	/*speak: none;*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.top a {
	color: #ebebeb;
}
.top a:hover {
	color: #fff;
}

/* Header */
.header {
	position: relative;
	margin: 0 auto;
	min-height: 560px;
	width: 100%;
	overflow: hidden;
}
.bg-img {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.bg-img1, .bg-img2, .bg-img3, .bg-img4 { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; display: none; }
.bg-img1 { background-image: url('../img/bg01-s.jpg'); }
.bg-img2 { background-image: url('../img/bg02-s.jpg'); }
.bg-img3 { background-image: url('../img/bg03-s.jpg'); }
.bg-img4 { background-image: url('../img/bg04-s.jpg'); }
.bg-img img { position: absolute; top: 0; left: 0; display: block; min-width: 100%; min-height: 100%; }
.logo { position: absolute; top: 5%; right: 2%; float: right; }
.title {
	z-index: 1000;
	margin: 0 auto;
	padding: 1.5em 0.5em;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	background: rgba(0,0,0,0.4);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.title h1 {
	padding: 0 0 0.2em;
	color: #fff;
	font-weight: 500;
	font-size: 3em;
	margin: 0 auto;
}
.title p {
	color: #fff;
	padding: 0 0 0.6em;
	font-weight: 300;
	font-size: 0.85em;
	margin: 0 auto;
}
.title h1, .title p.subline {
	line-height: 1.5;
}
.title p.subline {
	font-size: 1.2em;
  margin-top: 1em;
  letter-spacing: -1px;
}

/* nav */
.nav {
	padding: 1em;
	position: relative;
	margin-bottom: 1em;
}
.nav a {
	font-weight: 500;
	font-family: 'Malgun Gothic', '맑은 고딕';
	font-size: 1em;
	letter-spacing: -1px;
	padding: 0.3em 0;
	display: inline-block;
	opacity: 0.9;
	margin: 0 0.7em;
	white-space: nowrap;
	color: #ebebeb;
}
.nav a:hover {
	opacity: 1;
	color: #ffffff;
}
.nav a.current-page {
	color: #66ccff;
	border-bottom: 3px solid #66ccff;
}

/* Trigger Button */
button.trigger {
	position: fixed;
	bottom: 0px;
	left: 50%;
	z-index: 5000;
	display: block;
	margin-left: -0.5em;
	padding: 0;
	width: 1.2em;
	height: 1.2em;
	border: none;
	border-radius: 8px 8px 0 0;
	background: rgba(0,0,0,0.4);
	color: transparent;
	font-size: 2em;
	cursor: pointer;
}
.container:not(.notrans) button.trigger {
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}
.container.modify:not(.notrans) button.trigger {
	opacity: 0;
	pointer-events: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
button.trigger::before {
	position: absolute;
	bottom: 100%;
	left: -100%;
	padding: 0.5em;
	width: 300%;
	color: #fff;
	content: attr(data-info);
	font-size: 0.3em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
button.trigger:focus {
	outline: none;
}
button.trigger span {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
button.trigger span::before {
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	content: "\e097";
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	/*speak: none;*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Content */
.content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2em 1.25em;
}
.content > div:not(.title) {
	margin: -80px auto 0;
}
.content > div:not(.title) p {
	margin: 1.5em auto;
	text-align: justify;
}
.content > div:not(.title) p:first-child {
	font-size: 1.35em;
}
.content p {
	font-size: 0.9em;
}
.content .list {
  width: 100%;
  margin-top: 10em;
  padding: 0;
  list-style: none;
}
.content h1 {
	margin: 2em 0 0;
	font-size: 2em;
  font-weight: 500;
	color: #fff;
  letter-spacing: -1px;
  text-align: center;
  text-transform: uppercase;
}
.content h5 {
	margin: 0 0 1em;
	font-size: 0.8em;
  font-weight: 700;
  color: #66ccff;
  letter-spacing: -1px;
  text-align: center;
}
.content blockquote {
	padding: 0.25em;
	font-style: italic;
	font-size: 1.65em;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 1.4;
}
.content blockquote::before {
	content: '\201C';
}
.content blockquote::after {
	content: '\201D';
}

/* Footer */
footer {
	margin-top: 100px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	background: #333;
	padding: 50px;
	color: #ebebeb;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: -1px;
	overflow: hidden;
}
.footer-info, .footer-nav { width: 50%; }
.footer-info .copyright { color: #ccc; letter-spacing: 0; }
.footer-nav { text-align: right; }
.footer-nav a { margin-left: 1em; color: #ebebeb; }
.footer-nav a:hover { color: #66ccff; }

/* compnany-info */
.info-map { position: relative; display: block; margin-top: 2em; margin-bottom: 5em; }
.bg-map { position: relative; padding-top: 50%; opacity: 0.3; background-image: url('../img/com-map.png');
					background-repeat: no-repeat; background-position: top; background-size: contain; z-index: -1; }
.ripple-box { position: absolute; top: 22%; left: 43%; width: 100px; height: 100px; display: inline-block; overflow: hidden; }
.ripple { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; }
.ripple div { position: absolute; border-width: 4px; border-style: solid; opacity: 1; border-radius: 50%;
  						animation: ripple 3s cubic-bezier(0,0.2,0.8,1) infinite; box-sizing: content-box; }
.ripple div:nth-child(1) { border-color: #edf000 }
.ripple div:nth-child(2) { border-color: #46dff0; animation-delay: -1s; }
@keyframes ripple {
  0% { top: 48px; left: 48px; width: 0; height: 0; opacity: 1; }
  100% { top: 9px; left: 9px; width: 78px; height: 78px; opacity: 0; }
}
.info { position: absolute; top: 60%; width: 100%; display: flex; justify-content: space-between; }
.info-list { width: 30%; border-top: 2px solid #fff; letter-spacing: 0; }
.info-list .info-list-title { margin: 0.5em 0 2em; font-size: 1em; font-weight: 500; }
.info-list .info-num { margin: 0; font-size: 3em; font-weight: 700; /*color: #00adff;*/ color: #66ccff; line-height: 1; }
.info-list li { list-style: none; margin-bottom: 0.5em; }
.info-list .info-list-location { display: block; font-size: 1em; font-weight: 500; color: #fff; }
.info-list span { display: block; font-size: 0.8em; }

/* company-timeline*/
.time-item-wrap { width: 100%; padding: 10px; display: inline-block; }
.time-item1 { width: 100%; margin-bottom: 5px; padding: 1em 1em 0.5em; border-radius: 0 20px; text-align: center; font-size: 1.5em; color: #fff; font-weight: 700; }
.time-item-wrap:nth-child(1) .time-item1 { background-color: #f1c40f; }
.time-item-wrap:nth-child(2) .time-item1 { background-color: #01a79d; }
.time-item-wrap:nth-child(3) .time-item1 { background-color: #379df0; }
.time-item2 { width: 100%; background-color: #fff; border-radius: 20px 0; }
.time-item2 > ul { padding: 35px; text-align: left; font-size: 0.7em; color: #000; }
.time-item2 > ul > li { margin-bottom: 10px; }

/* company-certifications */
.certi ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
.certi ul li { margin-bottom: 25px; display: flex; flex-direction: column-reverse; }
.certi dt { text-align: center; font-size: 0.8em; }

/* showcase */
#frame {
	float: left;
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	overflow: hidden;
}
#frame .frame-inner {
	display: table;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	padding: 3em;
  color: #fff;
}
#frame .pic-wrapper {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#frame .pic img {
	border: 5px solid #ebebeb;
}
.gallery, .panel {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	line-height: 0;
	overflow: hidden;
}
.gallery li {
	display: inline-block;
	list-style: none;
	margin: 10px;
  background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	cursor: pointer;
	border: 1px solid #666;
	overflow: hidden;
	-webkit-transition: all ease-out .2s;
	-moz-transition: all ease-out .2s;
	-ms-transition: all ease-out .2s;
	transition: all ease-out .2s;
}
.gallery li:hover {
	box-shadow: inset 0 0 6px #000, inset 0 0 6px #000;
	border: 8px solid #e2e2e2;
}

/* company-biz-panel */
.panel-img1 { background-image: url('../img/com-bz1.jpg'); }
.panel-img2 { background-image: url('../img/com-bz2.jpg'); }
.panel-img3 { background-image: url('../img/com-bz3.jpg'); }
.panel-img4 { background-image: url('../img/com-bz4.jpg'); }
.panel ul { list-style: none; }
/*.panel-type1 */
.panel-item { display: inline-block; list-style: none; margin: 10px; width: 260px; height: 450px; cursor: pointer; border: 2px solid #e2e2e2; background-color: #ffffff; overflow: hidden;
	-webkit-transition: all ease-out .4s;
	-moz-transition: all ease-out .4s;
	-ms-transition: all ease-out .4s;
	transition: all ease-out .4s;
}
.panel-item:hover { background-color: #b49074; }
.panel-item figure { width: 260px; height: 260px; margin: 0; background-size: cover; background-position: center; }
.panel-item1, .panel-item2 { position: relative;
	-webkit-transition: all ease-out .4s;
	-moz-transition: all ease-out .4s;
	-ms-transition: all ease-out .4s;
	transition: all ease-out .4s;
}
.panel-item1 { top: 0px; margin: 0; padding: 0; color: #000; }
.panel-item1 span { font-size: 0.7em; font-weight: 600; color: #336699; }
.panel-item2 { top: 250px; margin: 0; font-size: 0.7em; color: #fff; line-height: 2; text-align: left; }
.panel-item2 ul { list-style: disc; padding: 0 1em; }

/* panel-type2 */
.panel-list { margin-top: 20px; display: flex; width: 100%; height: 230px; border-radius: 10px; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: 100% }
.panel-list:nth-child(even) { flex-direction: row-reverse; }
.panel-list figure { width: 50%; background-position: bottom; background-repeat: no-repeat; }
.panel-list-box { width: 100%; background-color: rgba(255,255,255,0.9); color: #000; padding-top: 45px; text-align: center; line-height: 1.5; }
.list-title { font-size: 1.1em; font-weight: 600; }
.list-span { font-size: 0.7em; font-weight: 600; color: #336699; }
.list-ul { margin-top: 15px; font-size: 0.8em; list-style: none;}

/* project */
.project { margin: 2em 0; padding: 1em 0; overflow: hidden; letter-spacing: -1px; }
.project a { color: #b2b2c0; }
.project a:hover { color: #fff; }
.project figure { display: inline-block; }
.project-box { display: inline-block; width: 100%; }
.project-box .project-title-deco { font-size: 0.8em; font-weight: 700; }
.project-box .project-title { color: #fff; font-size: 1.5em; }
.project-box ul { margin: 1em 0; }
.project-box ul li { width: 100%; padding: 0.4em 0; list-style: none; font-size: 0.9em; border-bottom: 1px solid #b2b2c0; overflow: hidden; }
.project-box ul li dt { width: 7em; color: #fff; font-weight: 700; }
.project-box .preview-btn { margin-top: 1em; padding: 0.5em 1em; border: 1px solid #b2b2c0; font-size: 0.8em; font-weight: 500; }

/* product-list */
.product-list { width: 100%; margin-bottom: 2em; }
.product-list figure { display: inline-block; width: 100%; background-size: cover; background-position: center; }
.product-list .item-box { display: inline-block; width: 100%; padding: 3em; color: #111; background-color: #fff; }
.product-list:nth-child(1) > figure {background-image: url('../img/pro01.jpg');}
.product-list:nth-child(2) > figure {background-image: url('../img/pro02.jpg');}
.product-list:nth-child(3) > figure {background-image: url('../img/pro03.jpg');}
.product-list:nth-child(4) > figure {background-image: url('../img/pro04.jpg');}
.product-list:nth-child(5) > figure {background-image: url('../img/pro05.jpg');}
.product-list:nth-child(6) > figure {background-image: url('../img/pro06.jpg');}
.product-list:nth-child(7) > figure {background-image: url('../img/pro07.jpg');}
.product-list:nth-child(8) > figure {background-image: url('../img/pro08.jpg');}
/* .product-list:nth-child(9) > figure {background-image: url('../img/pro09.jpg');} */

.product-list .item-box > span:nth-child(1) {font-size: 0.8em; color: #6699ff; font-weight: 700;}
.product-list .item-box > span:nth-child(3) {font-size: 1.8em; font-weight: 600; line-height: 1;}
.product-list .item-box > span:nth-child(5) {font-size: 0.9em; color: #6699ff; font-weight: 600;}
.product-list ul {font-size: 0.8em; margin-left: 25px;}
.adas-cam { display: flex; }
.adas-cam ul { width: 50%;}

/* tech-area */
.tech-area { position: relative; width: 100%; padding: 2em 1.25em; /*background-color: #00a5ff;*/ background-color: rgba(255,255,255,1); text-align: center; }
/*.tech-area::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url("../img/bg-tech-area.jpg");
	background-size: cover;
	z-index: -1;
	opacity: 1;
}*/
.tech-area h1 { margin: 1em 0 0; font-size: 2em; font-weight: 500; color: #0c5c84; text-transform: uppercase; }
.tech-area h5 { margin: 0 0 1em; font-size: 0.8em; font-weight: 700; color: #2080d9; }
.tech-area-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 1em; overflow: hidden; text-align: center; }
.tech-area-item { display: inline-block; margin: 35px 10px 20px; padding: 2em; background-color: #fff; color: #000; border-radius: 6px;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(12,92,132,0.3);
	  -moz-box-shadow: 0px 0px 15px 0px rgba(12,92,132,0.3);
		box-shadow: 0px 0px 15px 0px rgba(12,92,132,0.3);
}
.tech-area-item p { padding: 0.5em; font-size: 1.3em; border-bottom: 1px solid #66ccff; color: #2080d9; }
.tech-area-item span { display: inline-block; text-align: left; font-size: 0.9em; }
.tech-area-item ul { margin-top: 20px; text-align: left; font-size: 0.8em; list-style: none; padding-left: 15px; }
.tech-area-item ul li::before { content: "\2022"; color: #66ccff; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }

/* tech-achivements */
.achivement-year { margin: 1.5em 0 0.5em; color: #fff; font-size: 2em; font-weight: 600; }
.achivement-list { width: 100%; margin-top: 1em; padding: 1em; overflow: hidden; letter-spacing: -1px; background: rgba(255,255,255,0.1); }
.achivement-title { color: #fff; font-size: 1.3em; border-bottom: 1px solid #b2b2c0; }
.achivement-title-deco { font-size: 0.8em; font-weight: 700; }
.achivement-list ul { margin: 0.5em 0; }
.achivement-list ul li { display: flex; width: 100%; padding: 0.4em 0; list-style: none; font-size: 0.9em; overflow: hidden; }
.achivement-list ul li dt { width: 20%; color: #fff; font-weight: 700; }
.achivement-list ul li dd { width: 75%; }

/* tech stack */
.tech-stack { width: 100%; margin: 0 auto; padding-top: 2em; overflow: hidden; text-align: center; }
.tech-stack .tech-stack-item1 { display: inline-block; width: 100%; margin: 0; border-top: 3px solid #fff; padding-top: 1em; font-size: 1em; font-weight: 500; text-align: left; letter-spacing: 0;}
.tech-stack .tech-stack-item2 { display: inline-block; width: 100%; margin: 0; padding-top: 1em; }
.tech-stack ul { text-align: left; }
.tech-stack li { display: inline-block; list-style: none; margin: 5px; width: 100px; height: 100px; background-size: cover; background-position: center; }
.tech-stack li > span { display : none; }

/* viewer */
.viewer {
	background: #000;
}
.screen ul {
	overflow: hidden;
}
.screen li {
	display: none;
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	list-style: none;
	text-align: center;
}
.screen li img {
	max-width: 727px;
	max-height: 990px;
	width: auto;
	height: 100%;
}
.popup {
	display: table;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
}
#close {
	cursor: pointer;
}
#close img {
	max-width: 684px;
	max-height: 518px;
	width: 100%;
	height: 100%;
}
.under27 {
	display: none;
}
.viewer-back {
	display: table;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
#refresh, #back {
	color: #666;
	cursor: pointer;
	transition: all ease-in .2s;
	-webkit-transition: all ease-in .2s;
	-ms-transition: all ease-in .2s;
	-moz-transition: all ease-in .2s;
	-o-transition: all ease-in .2s;
}
#refresh:hover, #back:hover {
	color: #fff;
}
#refresh span:before {
	font-family: 'Glyphicons Halflings';
	content: "\e031";
	font-size: 0.8em;
	margin-right: 0.5em;
}
#back span:before {
	font-family: 'Glyphicons Halflings';
	content: "\e071";
	font-size: 0.8em;
	margin-right: 0.5em;
}
.btn-bg-p {
	display: table;
	width: 20%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1000;
}
.btn-bg-n {
	display: table;
	width: 20%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 80%;
    z-index: 1000;
}
.btn-wrapper {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.btn-p, .btn-n {
	opacity: 0;
	padding: 1em 0;
	cursor: pointer;
	color: transparent;
	transition: all ease-in .4s;
	-webkit-transition: all ease-in .4s;
	-ms-transition: all ease-in .4s;
	-moz-transition: all ease-in .4s;
	-o-transition: all ease-in .4s;
}
.btn-p:hover, .btn-n:hover {
	opacity: 1;
}
.btn-p span:before {
	font-family: 'Glyphicons Halflings';
	content: "\e251";
	font-size: 5em;
	color: #fff;
}
.btn-n span:before {
	font-family: 'Glyphicons Halflings';
	content: "\e250";
	font-size: 5em;
	color: #fff;
}
.btn-ex {
	width: 15%;
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 0.2em 1em;
	text-align: right;
	opacity: 0;
	z-index: 2000;
	transition: all ease-in .2s;
	-webkit-transition: all ease-in .2s;
	-ms-transition: all ease-in .2s;
	-moz-transition: all ease-in .2s;
	-o-transition: all ease-in .2s;
}
.btn-ex:hover {
	opacity: 1;
}
.btn-ex a {
	color: transparent;
}
.btn-ex span:before {
	font-family: 'Glyphicons Halflings';
	content: "\e014";
	font-size: 3em;
	font-weight: lighter;
	color: #fff;
}

/* contact */
.contact-form { padding: 1em 0; margin-bottom: 2em; }
.contact-form input, .contact-form textarea {
	width: 100%;
	font-size: 0.8em;
	background-color: #43434b;
	border: 1px solid #ccc;
	margin: 0.5em auto;
	padding: 1em;
	color: #fff;
}
.contact-form textarea { height: 150px; resize: none; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #f2f2f2; }
.contact-form input:-ms-input-placeholder, .contact-form textarea:-ms-input-placeholder { color: #f2f2f2; }
.contact-form input::-ms-input-placeholder, .contact-form textarea::-ms-input-placeholder { color: #f2f2f2; }
.contact-form input:focus, .contact-form textarea:focus { /*border: 1px solid #0099ff;*/ background-color: #0099ff; color: #fff; }
.contact-form .contact_btn {
	width: 250px;
	margin: 1em 1em 1em 0;
	padding: 1em;
	/*background: rgba(0,0,0,0.9);*/
	border: 1px solid #f1f1f1;
	color: #f1f1f1;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: -1px;
	cursor: pointer;
	border-radius: 0px;
}
.contact-form .contact_btn:hover { background: #0099ff; color: #fff; }
.contact-form .ckbox { display: inline-block; width: 1em; height: 1em; }
.contact iframe { width: 100%; height: 600px; border: 0; }

/* contact-map */
.contact .map-wrap { position: relative; border: 8px solid #fcd021; }
.contact .map { width: 100%; height: 600px; overflow: hidden; background-image: url('../img/contact_map.jpg'); background-size: cover; background-position: center; }
.contact .kakao-link { position: relative; top: -85px; float: right; text-align: right; line-height: 1; }
.kakao-link > button {
	background-color: rgba(252,208,33,0.5);
  border: 0px;
  display: block;
	margin: 0;
  padding: 15px 10px;
  position: relative;
	z-index: 1;
}
.kakao-link > button, .kakao-link > button::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}
.kakao-link > button a { color: #000; font-size: 0.8em; font-weight: 700; display: flex; align-items: center; }
.kakao-link > button::before, .kakao-link > button::after { background: #fcd021; content: ''; position: absolute; z-index: -1; }
.kakao-link .btn::after { position: absolute; height: 100%; right: 0; top: 0; width: 0; }
.kakao-link .btn:hover:after { position: absolute; width: 100%; left: 0; }

/* cantact-address */
.location { width: 100%; margin-top: 0.5em; margin-bottom: 5em; }
.location-list { width: 100%; margin-top: 0.5em; padding: 1.5em; background-color: #525256; color: #bebebe; line-height: 1.5; }
.location-list:first-child { background-color: #fcd021; color: #000; }
.location-country { margin: 0; font-size: 2em; font-weight: 700; letter-spacing: 0; }
.location-address { display: block; font-size: 1em; }
.location ul { list-style: none; margin-top: 5em; font-size: 0.9em; font-weight: 700; letter-spacing: 0; }
.ch-font { font-family: Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif; }

/* effect */
.intro-effect-push:not(.notrans) .header,
.intro-effect-push:not(.notrans) > .title,
.intro-effect-push:not(.notrans) .content > div,
.intro-effect-push:not(.notrans) .tech-area {
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
}

.intro-effect-push:not(.notrans) .header {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transition-duration: 1.2s;
	transition-duration: 1.2s;
}

.intro-effect-push .header {
	position: absolute;
	z-index: 1500;
}

.intro-effect-push > .title {
	position: relative;
	top: auto;
	left: auto;
	padding: 6em 1em 2em;
}

.intro-effect-push .content > div {
	margin-top: 50px;
}

.intro-effect-push > .title,
.intro-effect-push .content > div,
.intro-effect-push .tech-area {
	-webkit-transform: translateY(400px);
	transform: translateY(400px);
	opacity: 0;
}

.intro-effect-push.modify > .title,
.intro-effect-push.modify .content > div,
.intro-effect-push.modify .tech-area {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.intro-effect-push.modify .header {
	opacity: 0;
	-webkit-transform: translateY(-100%) scale(0.9);
	transform: translateY(-100%) scale(0.9);
}

/* Delays */
.intro-effect-push.modify:not(.notrans) > .title {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.intro-effect-push.modify:not(.notrans) .content > div,
.intro-effect-push.modify:not(.notrans) .tech-area {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

/* Media Queries */
@media screen and (min-width: 84em) {
	.product-list:nth-child(even) { display: flex; flex-direction: row; }
	.product-list:nth-child(odd) { display: flex; flex-direction: row-reverse; }
	.product-list figure, .product-list .item-box { width: 50%; height: 600px; }
	.tech-stack-item1, .tech-stack-item2 { float: left; display: block; max-width: 570px; }
	.tech-stack-item2 { border-top: 1px solid #fff; }
	.tech-area-item { max-width: 540px; }
}
@media screen and (max-width: 84em) {
	.product-list figure { height: 400px; }
}
@media screen and (max-width: 84em) and (min-width: 66em) {
	.product-list { width: 80%; margin: 0 auto; }
}
@media screen and (min-width: 66em) {
	.project-box ul li { display: flex; }
	.time-item-wrap { width: 33%; }
	.tech-area { border: 2em solid #0c5c84; border-top: 4em solid #0c5c84; }
}
@media screen and (max-width: 66em) {
    .footer-info .address { display: none; }
		.tech-stack li { width: 80px; height: 80px; }
		#frame .pic-data { width: 100%; margin: 0 auto; text-align: left; font-size: 0.9em; }
		.info { position: relative; top: 0; }
		.bg-map, .ripple-box { display: none; }
}
@media screen and (min-width: 48em) {
	.project { display: flex; width: 100%; }
	.project-box { width: 70%; margin-left: 30px;}
	.gallery li { width: 260px; height: 200px; }
	.panel #panel-type1 { display: block; }
	.panel #panel-type2 { display: none; }
	.location { display: flex; justify-content: space-between; }
	.location-list { width: 49%; }
}
@media screen and (max-width: 48em) {
	.title { font-size: 70%; }
	.title > p:not(.subline) { display: none; }
	.title .nav a { font-size: 100%; }
	.content, .tech-area { font-size: 80%; }
	button.trigger::before { display: none;	}
	footer { flex-direction: column-reverse; text-align: center; font-size: 0.7em; }
	footer img { width: 100px; }
    .footer-info { width: 100%; margin-top: 50px; }
	.footer-nav { width: 100%; text-align: center; }
	.logo { position: absolute; top: 1%; }
	.logo img, .err-head img { width: 80px; }
	.bg-txt { display: none; }
	.certi ul { justify-content: space-around; }
	#frame .pic-data { font-size: 0.7em; }
	.gallery li { width: 140px; height: 108px; }
	.project { text-align: center; }
	.project .project-box { margin-top: 2em; text-align: left; }
	.panel #panel-type1 { display: none; }
	.panel #panel-type2 { display: block; }
	.product-list .item-box { padding: 1.5em; }
	.product-list figure { height: 200px; }
	.project-box .project-title, .achivement-title { font-size: 1.2em; }
	.time-item2 > ul { font-size: 0.8em; }
	.tech-stack-item2 { overflow-x: scroll; white-space:nowrap; }
	.info { display: block; }
	.info-list { width: 100%; display: flex; justify-content: space-between; margin-bottom: 1em; padding-top: 0.5em; }
	.info-list ul { margin-top: 0.5em; width: 50%; text-align: right; }
}
@media screen and (max-width: 27em) {
	/*.intro-effect-push .header .title { top: 60px; -webkit-transform: translateX(-50%); 	transform: translateX(-50%); }*/
	.title { font-size: 60%; }
	.title nav { font-size: 1.2em; display: flex; justify-content: space-around; }
	.bg-img { display: none; }
	.bg-img1, .bg-img2, .bg-img3, .bg-img4 { display: block; }
	.top { background: rgba(0,0,0,0.3); bottom: 2%; font-size: 0.5em; }
	.top span:before { font-size: 1em; }
  .achivement-list ul li { flex-direction: column; }
	.achivement-list ul li dt, .achivement-list ul li dd { width: 100%; }
	.contact-form .contact_btn { width: 100%; }
	.viewer li img { width: 100%; }
/*	.over27 { display: none; }
	.under27 { display: block; } */
	.btn-bg-p, .btn-bg-n, .btn-ex { width: 10%; }
	.btn-bg-n { left: 85%; }
	.btn-p:hover, .btn-n:hover, .btn-ex:hover { opacity: 0; }
	/*.btn-p span:before, .btn-n span:before, .btn-ex span:before { font-size: 2em; } */
	.btn-ex { left: 85%; }
	.err-msg { font-size: 60%; }
	.err-head div:nth-child(2) { display: none; }
	.adas-cam { display: block; }
	.adas-cam ul { width: 100%;}
}