@charset "utf-8";
@import url("fonts.css");
@import url("default.css");

* {
	font-family: 'Noto Sans Light';/* Thin/Light/DemiLight/Regular/Medium/Bold/Black */
	/*box-sizing: border-box; */
}
.bold {
	font-family: 'Noto Sans Bold';
	/* font-weight: bold; */
}
p {
	line-height: 1.5em;
}
#sub > p {
	margin-bottom: 32px;
}
p.up {
	padding: 0 2.5%;
}
h1 {
	padding: 32px;
	font-family: 'Noto Sans Light';
	font-size: 2em;
	font-weight: normal;
	text-align: center;
}
h2 {
	padding: 0 32px 32px;
	color: rgba(0, 0, 0, .5);
	font-family: 'Noto Sans Light';
	font-size: 1.25em;
	text-align: center;
}
h3 {
	padding: 0 0 16px;
	color: rgba(0, 0, 0, .75);
	font-family: 'Noto Sans Light';
	font-size: 1.5em;
}
a,
a:visited,
a:hover,
a:active {
	color: #000;
}
img:hover {
	opacity: .9;
}
img:active {
	opacity: .95;
}
video.full {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	left: 0;
	min-width: 100%;
	width: auto;
	height: auto;
	z-index: -100;
   /*background: url(polina.jpg) no-repeat;*/
	background-size: cover;
}



.container {
	float: none;
	margin: 0 auto;
	width: 1280px;
	overflow: hidden;
}
#sangsa {
	overflow-x: hidden;
	overflow-y: auto;
	background: rgba(0, 0, 0, .6);
}
#sub {
	padding: 88px 0 128px;
	background: 
	  linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .25)),
	  url('../images/common/texture/wall.jpg');
	background-repeat: repeat;
	background-attachment: fixed;
}
#sub #route {
	display: none;
	position: relative;
	padding: 16px 0 32px;
	font-size: 0.75em;
	text-align: right;
	opacity: .5;
	background-color: red;
}
section {
	box-sizing: border-box;
	overflow: hidden;
}
section article {
	margin: 0 auto 32px;
	width: 100%;
	/* width: calc(100% - 64px); */
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 4px 8px 12px -4px rgba(0, 0, 0, .25);
	overflow: hidden;
}
section article.container {
	margin: 0 auto 32px; 
}
section.pad article,
section article.pad {
	padding: 32px;
}
section.r article,
section article.r {
	border-radius: 16px; 
}
section.bisection article,
section article.bisection,
section.trisection article,
section article.trisection,
section.quatering article,
section article.quatering,
section.quintisection article,
section article.quintisection,
section.intosix article,
section article.intosix {
	float: left;
	margin: 0 0 32px 0.833%;
}
section.bisection article:nth-child(2n),
section article.bisection:nth-child(2n),
section.trisection article:nth-child(3n),
section article.trisection:nth-child(3n),
section.quatering article:nth-child(4n),
section article.quatering:nth-child(4n),
section.quintisection article:nth-child(5n),
section article.quintisection:nth-child(5n),
section.intosix article:nth-child(6n),
section article.intosix:nth-child(6n) {
	margin-right: 0;
}
section.bisection article,
section article.bisection {
	width: 48.75%;
}
	section article > div.bisection > div {
		float: left;
		margin: 0 0 0 2.5%;
		width: 46.25%;
	}
	section article > div.bisection > div > img {
		float: left;
		width: 100%;
	}
	section article > div.bisection > div.bisection > img {/* half in 592px */
		float: left;
		margin: 0 5.4% 0 0;
		width: 47.2%;
	}
	section article > div.bisection > div.bisection > img:last-child {
		float: right;
		margin: 0;
	}
	section article > div.bisection > div > p,
	section article > div.bisection > div > table {
		margin: 0 0 32px;
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}
	section article > div.bisection > div > p:last-child,
	section article > div.bisection > div > table:last-child {
		margin: 0;
	}
section.trisection article,
section article.trisection {
	width: 32.222%;
}
section.quatering article,
section article.quatering {
	width: 23.9583%;
}
section.quintisection article,
section article.quintisection {
	width: 19%;
}
section.intosix article,
section article.intosix {
	width: 15.694%;
}



/* COMPANY */
#company #location a {
	float: left;
	width: 50%;
	height: 480px;
}
#company #location a img {
	height: 480px;
    transform: translate(50, 50);
    object-fit: cover;
}
#company #location iframe {
	float: left;
	width: 50%;
	height: 480px;
}
#company #location p {
	float: left;
	padding: 32px;
	width: 100%;
}
#company #history,
#company #contact {
	padding: 20px;
}
#company table {
	width: 100%;
}
#company td {
	padding: 12px 24px;
	/* line-height: 1em; */
	vertical-align: middle;
}
#company td:first-child {
	width: 35%;
	text-align: right;
}
#company img.qr {
	height: 128px;
}
#company td:last-child {
	width: 65%;
	padding: 0;
	text-align: left;
}



#product #imp article {
	padding: 32px;
	height: 400px;
}
#product #imp article > img,
#product #imp article > a img {
	float: left;
	margin: 0 0 8px;
	width: 100%;
	height: 50%;
}
#product #imp article > p {
	float: left;
	height: 50%;
	overflow: auto;
}
#product table td{
	padding: 4px;
	border: 1px solid #fff;
	height: 16px;
}
#product table.spec thead td {
	background-color: rgba(0, 0, 0, .2);
}
#product table.spec tbody td {
	background-color: rgba(0, 0, 0, .1);
}
#product table.tool tbody td {
	width: 33.3%;
}
#product img.label {
	z-index: 50;
	position: absolute;
	max-height: 64px;
}
#product img.label_new {
	z-index: 50;
	position: absolute;
	max-height: 64px;
}
#product .customer {
	margin: 32px 32px 0;
	overflow: hidden;
}
#product .customer button {
	float: right;
	margin: 0 0 0 8px;
	padding: 2px 10px;
	min-width: 32px;
	height: 32px;
	background-color: rgba(0, 0, 0, .25);
	color: #fff;
	font-size: 1em;
	/* 	text-align: center; */
	border-radius: 8px 8px 0 0;
	font-weight: bold;
}
#product .customer button.acrobat {
	background-color: rgba(180, 0, 0);
}
#product .customer button.acrobat:hover {
	background-color: rgba(140, 0, 0);
}
#product .customer button.acrobat:active {
	background-color: rgba(100, 0, 0);
}
#product .customer button.purchase {
	background-color: rgba(0, 120, 200);
}
#product .customer button.purchase:hover {
	background-color: rgba(0, 80, 160);
}
#product .customer button.purchase:active {
	background-color: rgba(27, 20, 100)/* #1b1464 */;
}
#product .customer button img {
	width: 100%;
}
#product #staubli {
}



#reference article {
	margin: 0;
	padding: 16px 0.78125%;
	border-top: 1px solid rgba(255, 255, 255, .4);
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	background-color: transparent;
	overflow: hidden;
	box-shadow: none;
}
#reference article:first-child {
	border-top: 0;
	padding: 0 0.78125% 16px;
}
#reference article:last-child {
	border-bottom: 0;
	padding: 16px 0.78125% 0;
}
#reference article > div {
	float: right;
	margin: 0 0.390625%;
	width: 18.90625%;
	text-align: left;
	overflow: hidden;
}
#reference article > div a {
	float: right;
	width: 242px;
	height: 297px;
}
#reference article > div img {
	position: relative;
	max-height: 297px;
}
#reference article > div img:first-child {
	position: absolute;
	margin: 0;
}
#reference article > div img:last-child {
	opacity: .8;
}
#reference article > div img:last-child:hover {
	opacity: .65;
}
#reference article > div img:last-child:active {
	opacity: .95;
}


#main #sub {
	padding: 40px 0 32px;
	background-color: transparent;
}
#main section {

	max-height: 480px;

	overflow-x: scroll;
}
#main section article {
	background-color: transparent;
}
#main section article#staubli {
	background-color: #2a7288;
}


#main section article > a > img {

}
#main section article > p {
	display: none;
}


/* HEADER, FOOTER */
header {
	z-index: 100;
	position: fixed;
	padding: 8px 0;
	width: 100%;
	height: 40px;
	/* border-top: 5px solid #1B1464; */
	background-color: rgba(255, 255, 255, .95);
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, .3);
	overflow: hidden;
}
footer {
	width: 100%;
	/* background: 
		linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .5)),
		url('../images/common/texture/wall.jpg'); */
	font-size: 0.75em;
	overflow: hidden;
}
header a {
	text-decoration: none;
}
footer a,
footer a:visited,
footer a:hover,
footer a:active,
footer p,
footer li {
	color: #fff;
}
footer > div:first-child {
	padding: 32px 0 0px;
	background-color: rgba(0, 0, 0, .15);
}
footer > div:last-child {
	padding: 16px 0 64px;	
}
header #id img {
	float: left;
	padding: 0 16px 0 0;
	max-height: 40px;
}
footer #id img {
	float: right;
	padding: 0 0 0 16px;
	max-height: 40px;
}
header #lang {
	float: right;
	overflow: hidden;
}
header #lang img,
header #lang img:visited {
	float: left;
	padding: 8px 0 8px 8px;
	height: 24px;
	opacity: .6;
}
header #lang img:hover {
	opacity: 1;
}
header #lang img:active {
	opacity: .4;
}
footer #lang {
	float: left;
	margin: 0 24px 0 0;
	overflow: hidden;
}
footer #lang img,
footer #lang img:visited {
	float: left;
	padding: 8px 8px 8px 0;
	height: 24px;
	opacity: .6;
}
footer #lang img:hover {
	opacity: 1;
}
footer #lang img:active {
	opacity: .4;
}
header ul {
	float: right;
	margin: 0 auto;
}
footer ul {
	float: left;
	margin: 0 auto;
}
header li {
	float: left;
	margin: 0 24px 0 0;
	padding: 14px 0;
	height: 16px;
}
#company header li.company,
#product header li.product,
#reference header li.reference,
#store header li.store {
	border-bottom: 4px solid #1b1464;
	font-weight: bold;
	color: #1b1464;
}
/*
li:hover::after { ※ https://sudal89.tistory.com/56
	transition: all 250ms ease-out; left: 0%; width: 100%;
} */
footer li {
	float: left;
	margin: 0 24px 0 0;
	padding: 14px 0;
	height: 16px;
}
footer li font {
	padding: 0 4px;
	opacity: .4;
}
footer p font {
	padding: 0 4px 0 0;
	opacity: .6;
}
footer .further {
	margin: 64px 0 0;
	padding: 0 0 64px;
	/* background: rgba(0, 0, 0, .2); */
}



#intro {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-image: url('../images/common/texture/wall.jpg');
	background-repeat: repeat;
}
#intro div {
	margin: 0 auto;
	width: 75%;
}



/* MEDIA QUERY */
@media screen and (orientation: portrait) {/* X4 */
	aspect-ratio: 16 / 9;
}
@media screen and (orientation: lanscape) {
	aspect-ratio: 9 / 16;
}
@media print {
  * {
	font-size: 12pt;
  }
}
@media screen and (max-width: 3840px) {
}
@media screen and (max-width: 2880px) {
	section.intosix article,
	section article.intosix {/* quintisection */
		margin: 0 0 32px 1.111%;
		width: 18.66666666666667%;
	}
}
@media screen and (max-width: 2400px) {
	section.intosix article,
	section article.intosix {/* quatering */
		margin: 0 0 32px 1.333%;
		width: 22.91666666666667%;
	}
}
@media screen and (max-width: 1920px) {
	section.intosix article,
	section article.intosix {/* trisection */
		margin: 0 0 32px 1.66666666666667%;
		width: 31.111%;
	}
}
@media screen and (max-width: 1280px/* 1344px=1280+64px */) {
	.container,
	section article.container {
		width: calc(100% - 64px);
		background-color: rgba(255, 0, 0, .02);a
	}
	section.intosix article,
	section article.intosix {/* bisection */
		margin: 0 0 32px 2.222%;
		width: 46.66666666666667%;
	}
	#reference section {
		width: 100%;
	}
}
@media screen and (max-width: 960px) {
	.container {
		background-color: rgba(0, 255, 0, .02);
	}
	#company #sub #location a img,
	#company #sub #location iframe {
		height: 360px;
	}
	section.intosix article,
	section article.intosix {/* only One */
		margin: 0 0 32px 3.333%;
		width: 93.333%;
	}
	#reference .doc {
		max-width: 64.21875%/* 822px */;
	}
		#reference .doc a {
		float: right;
		margin: 0 0 0 8px;
		width: 242px;
		height: 297px;
	}
}
@media screen and (max-width: 640px) {/* 상단 메뉴 축소 */
	.container {
		background-color: rgba(0, 0, 255, .02);
	}
	#sub article > div.bisection > div {
		margin: 0 0 32px 5.55555555555556%;
		width: 88.88888888888889%;
	}
	#company #sub #location a,
	#company #sub #location iframe {
		width: 100%;
	}
	section.intosix article,
	section article.intosix {/* only One */
		margin: 0 0 32px 5%;
		width: 90%;
	}
}
/*
글자 hover 시 라인 생성 ※ https://gaenarinari.tistory.com/93
	가운데부터
		h1 { 
		  color: #000;
		  display:inline-block; 
		  margin:0;
		  text-transform:uppercase; }
	오른쪽부터
		h1:after {
		  display:block;
		  content: '';
		  border-bottom: solid 3px #ea2129;  
		  transform: scaleX(0);  
		  transition: transform 250ms ease-in-out;
		}
	왼쪽부터
		h1:hover:after { transform: scaleX(1); }
		h1.fromRight:after{ transform-origin:100% 50%; }
		h1.fromLeft:after{  transform-origin:  0% 50%; }

	두꺼운 형광펜 효과
		a {
		  text-decoration: none;
		}
		.underline {
		  line-height: 1.2;
		  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
		  font-size: 3em;
		  font-weight: 700;
		  background-image: linear-gradient(transparent calc(100% - 3px), #000 3px);
		  background-repeat: no-repeat;
		  background-size: 0% 100%;
		  transition: background-size 0.8s;
		  color: #000;
		  cursor: pointer;
		}
		@media (min-width: 1000px) {
		  .underline {
			font-size: 5em;
		  }
		}
		.underline.yellow {
		  background-image: linear-gradient(transparent 60%, #F8CD07 40%);
		}
		.underline:hover {
		  background-size: 100% 100%;
		}
		

section.bisection article,
section article.bisection {
	margin: 32px 0 0 2.5%;
	width: 46.25%;
}
section.bisection article:nth-child(2n),
section article.bisection:nth-child(2n) {
	margin-right: 0;
}
section.trisection article,
section article.trisection {
	margin: 32px 0 0 1.66666666666667%;
	width: 31.111%;
}
section.trisection article:nth-child(3n),
section article.trisection:nth-child(3n) {
	margin-right: 0;
}



SCROLL:
	키워드 값
		overflow: visible;
		overflow: hidden;
		overflow: clip;
		overflow: scroll;
		overflow: auto;
		overflow: hidden visible;
	전역 값
		overflow: inherit;
		overflow: initial;
		overflow: unset;
.container {
	margin: 0 auto;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	with: 640px;
}

img.two-five {
	float: left;
	padding: 0 30%;
	max-width: 40%;
	min-height: 192px;
}

.scroll-fix {
	z-index: 1;
	position: fixed;
	top: 0;
}
.scroll-fix-container {
	width: 100%;	
	max-width: 1920px;
}
section article.container {
	float: none;
	margin: 0 auto;
	margin-top: 32px;
	width: 1280px;
}



section article > div,
section article > p,
section article > table {
	margin: 32px 32px 0;
	padding: 0;
	overflow: hidden;
}
section article > div:last-child,
section article > p:last-child,
section article > table:last-child {
	margin: 32px 32px;
}
section article > div.tight,
section article > div.bisection_tight {
	margin: 0;
}
section article > div.bisection_tight > div,
section article > div.bisection_tight > iframe,
section article > div.bisection_tight > p,
section article > div.bisection_tight > a {
	float: left;
	width: 50%;
}
section article > a {
	float: left;
	width: 100%;
	display: flex;
	text-align: center;
}
section article > a > img {
	margin: 0 auto;
	position: relative;
	width: 100%;
}
section.thumb article {
	padding: 32px 0 0;
}
section.thumb article > a {
	height: 256px;
}
section.thumb article > a > img {
	width: 90%;
	padding: 16px 0;
}
section.thumb article > p {
	height: 128px;
	overflow-y: auto;
}
{
	display: block;

	background-color: rgba(0, 0, 0, .15);※217, 217, 217
		background-image: url('../../images/common/texture/wall.jpg');
		background-repeat: repeat;

	justify-content: center;
		※ https://ipex.tistory.com/entry/CSS3-flex-Box-justifycontent-alignitems
}

15:08, April 2, 2026
*/