@charset "utf-8";
/* CSS Document */

#products.second-top .page-title-wrapper { background-image:url(/images/products/title_products.jpg); }

#signal .signal-parent, #traffic .traffic-parent, #power .power-parent  { background-color:#F1F9FF; }
#signal .signal-parent .third-level, #traffic .traffic-parent .third-level, #power .power-parent .third-level  { display: block;}
.btn.fa.fa-file-pdf-o { background-color: #D01C1F; color:#FFFFFF; border-radius: 50px;padding-left:1em; padding-right:1em; font-size: 0.85rem; float:right; }
.btn.fa.fa-file-pdf-o:before { padding-right:0.5em;}

img { height:auto;}
/*************************************
  products
*****************************************/

#main-wrapper .product-banner-wrapper { padding-top:60px;}
#main-wrapper .product-banner-wrapper .container-wrapper {width:100%; background-color: #005bac; }
#main-wrapper .product-banner-wrapper .container-wrapper .container { display: flex; align-items: stretch; flex-flow:row wrap;}
#main-wrapper .product-banner-wrapper .container-wrapper .container a {border-bottom:1px solid rgba(255,255,255,0.5); color:#FFFFFF; text-decoration: none; width:100%; }
#main-wrapper .product-banner-wrapper .container-wrapper .container a * { -webkit-transition: all 0.25s ease; transition: all 0.25s ease;}
#main-wrapper .product-banner-wrapper .container-wrapper .container a .box { text-align: center; padding:15px 15px 30px;position:relative; }
#main-wrapper .product-banner-wrapper .container-wrapper .container a .box h3 { font-size:18px; font-weight:bold;}
#main-wrapper .product-banner-wrapper .container-wrapper .container a .box h3 span { font-size: :14px;}
#main-wrapper .product-banner-wrapper .container-wrapper .container a .box div.icon { 
	background-color: #FFFFFF; 
	border-radius: 50%; 
	width:120px; 
	height:120px;
	display: inline-flex;
    align-items: center;
    justify-content: center;
	margin:30px auto 15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.25);
}

.btn.btn-outline-light {
    border-color: #FFFFFF;
	border-radius: 1rem;
	padding:0.25em 2em;
}
.product-banner-wrapper .container-wrapper .container a .box p { text-align: left; font-size: 14px;}
.product-banner-wrapper .container-wrapper .container a:hover .box { border:1px solid rgba(255,255,255,1.0);background-color:#00479d; -webkit-transform: scale(1.1);transform: scale(1.1); }

/*************************************
  products -index
*****************************************/
#main-inner .products-index-wrapper .box {
	margin-bottom:25px;
}
#main-inner .products-index-wrapper .subcat-title {
	background-color: #F1F9FF;
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	padding:20px;
}
#main-inner .products-index-wrapper .subcat-title h3 { 
	width: 92%;
    height: auto;
    vertical-align: middle;
	text-align: center;
	font-size:1.2rem;
	margin-bottom:0;
}
#main-inner .products-index-wrapper .subcat-title h3 img { display: block; width:auto; margin:0 auto 1em;padding-right:0;}
#main-inner .products-index-wrapper .subcat-title h3 span {display: block; font-size:0.9rem; }

#main-inner .photo-box {
  font-family: Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin:0;
  /*min-width: 250px;
  max-width: 310px;*/
  width: 100%;
  height:100%;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);*/
}
#main-inner .photo-box * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#main-inner .photo-box img {
  max-width: 100%;
  width:100%;
  vertical-align: top;
}
#main-inner .photo-box figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#main-inner .photo-box h3 {
	line-height: 1;
	letter-spacing: 1px;
	margin: 0;
	padding:10px;
	background:rgba(0, 91, 172, 0.8) ;
	color:#FFFFFF;
}

#main-inner .photo-box .title3 {
  font-size: 1.1rem;
}
#main-inner .photo-box a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#main-inner .photo-box:hover img,
#main-inner .photo-box:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

#power .nav-tabs .nav-item{width: 30%; text-align: center; font-size: 0.9rem;}
#power .nav-tabs .nav-link{border-color: #dee2e6; border-right: none; padding: 0.5rem;background-color: #F5F5F5;color: #999999;}
#power .nav-tabs .nav-item:last-of-type .nav-link{border-right: 1px solid #dee2e6;}
#power .nav-tabs .nav-link.active{border-color: #dee2e6 #dee2e6 #fff;background-color: white;color: #005ABC; font-weight: bold;}
.spec th { background-color:#f1f9ff;}

html[lang="en"] .table.spec th, .table.spec td{ font-size:0.85em;}

.product-single #main-inner > section h3 { background-color:#618dc2; color:#FFFFFF;padding:0.2em 0.5em; }

.product-single #main-inner > section h4 { border-bottom:none;width:100%;  }
.product-single #main-inner > section h4:after { display: none;}
.product-single #main-inner > section h4:before {
    content: " ";
    width: 0.7em;
    height: 0.2em;
    display: inline-block;
    background-color: #005BAC;
    margin-right: 0.5em;
    vertical-align: middle;
}
.product-single #main-inner > section .ex-box { padding:24px; border:3px solid #EEEEEE; }
.product-single #main-inner > section .ex-box .w-50 { width:100%;}
.product-single #main-inner > section .ex-box h4 { overflow: hidden;}
@media only screen and (min-width: 992px) {
	#main-wrapper .product-banner-wrapper { padding-top:100px;}
	#main-wrapper .product-banner-wrapper .container-wrapper .container {flex-flow: nowrap; align-items: stretch;}
	#main-wrapper .product-banner-wrapper .container-wrapper .container a {border:1px solid rgba(255,255,255,0.5); }
	#main-wrapper .product-banner-wrapper .container-wrapper .container a .box div.icon { margin:-90px auto 15px;}
	#main-inner .products-index-wrapper .subcat-title h3 { 
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:0;
	}
	#main-inner .products-index-wrapper .subcat-title h3 img { padding-right:0.5em; margin:0; }
	.product-single #main-inner > section .ex-box .w-50 { width:50%;}
	#power .nav-tabs .nav-item{font-size: 1.1rem;}
	.spec th {width: 35%; }
}


/*************************************
  kurashi
*****************************************/
#kurashi #main-inner .kurashi-box { 
	background: url(/images/products/img_kurashi.png) right bottom no-repeat;
	background-size:contain; 
    display: flex;
    flex-flow: wrap row;
    align-items: center;
    padding: 60px 40px;
    height: 330px;
	border:3px solid #5FA6ED;
}
#kurashi #main-inner .kurashi-box .title {
	font-size: 36px;
	font-weight:bold;
	text-align:left;
	color:#5FA6ED;
}
#kurashi #main-inner .kurashi-wrapper { width:100%; height:auto; padding-top:0;position:relative;}
#kurashi #main-inner .kurashi-wrapper .marker { width:25px; height:30px; position:absolute;}
#kurashi #main-inner .modal-content { width:80%; max-width:800px; margin:20% auto; justify-content: center; align-items: center; align-content: center; }
#kurashi #main-inner .modal-content .d-flex {width:100%; padding:24px; flex-wrap: wrap;justify-content: center; } 
#kurashi #main-inner .modal-content .d-flex img { width:400px; height:360px;margin-bottom: 1em;}
#kurashi #main-inner .modal-content .txt-box { width:100%; text-align: center;}
#kurashi #main-inner .modal-content .txt-box .btn.more { margin-bottom: 1em;}
#kurashi #main-inner .modal-content .txt-box > .btn.more:last-child { margin-bottom:0; }
#kurashi #main-inner .modal-content .close { width:6em; margin:0 auto 1em auto; text-align: center; cursor: pointer;}
html[lang="en"] #kurashi #main-inner .modal-content .txt-box .btn.more {font-size: 90%; max-width: 100%; white-space: normal;}
html[lang="en"] #kurashi #main-inner .modal-content .txt-box > .btn.more:last-child, html[lang="zh"] #kurashi #main-inner .modal-content .txt-box > .btn.more:last-child { margin-bottom:1em; }
#kurashi #main-inner .kurashi-wrapper #kurashi01 .marker { left:18%; top:12.5%;}
#kurashi #main-inner .kurashi-wrapper #kurashi02 .marker { left:30%; top:10%;}
#kurashi #main-inner .kurashi-wrapper #kurashi03 .marker { left:45%; top:10%;}
#kurashi #main-inner .kurashi-wrapper #kurashi04 .marker { left:75%; top:10%;}
#kurashi #main-inner .kurashi-wrapper #kurashi05 .marker { left:82%; top:15%;}
#kurashi #main-inner .kurashi-wrapper #kurashi06 .marker { left:78%; top:20%;}
#kurashi #main-inner .kurashi-wrapper #kurashi07 .marker { left:70%; top:22%;}
#kurashi #main-inner .kurashi-wrapper #kurashi08 .marker { left:43%; top:35%;}
#kurashi #main-inner .kurashi-wrapper #kurashi09 .marker { left:58%; top:43%;}
#kurashi #main-inner .kurashi-wrapper #kurashi10 .marker { left:5%; top:40%;}
#kurashi #main-inner .kurashi-wrapper #kurashi11 .marker { left:5%; top:55%;}
#kurashi #main-inner .kurashi-wrapper #kurashi12 .marker { left:50%; top:52%;}
#kurashi #main-inner .kurashi-wrapper #kurashi13 .marker { left:55%; top:73%;}
#kurashi #main-inner .kurashi-wrapper #kurashi14 .marker { left:70%; top:73%;}

@media only screen and (min-width: 768px) {
#kurashi #main-inner .kurashi-box { 
	background-size:cover; 
}
#kurashi #main-inner .kurashi-wrapper .marker { width:49px; height:60px; position:absolute;}
#kurashi #main-inner .kurashi-wrapper #kurashi01 .marker { left:120px; top:40px;}
#kurashi #main-inner .kurashi-wrapper #kurashi02 .marker { left:235px; top:20px;}
#kurashi #main-inner .modal-content .d-flex {width:100%; padding:24px; flex-wrap: nowrap; } 
#kurashi #main-inner .modal-content .txt-box { width:40%;padding-left:24px;text-align: left;}
}

@media only screen and (min-width: 1200px) {
#kurashi #main-inner .kurashi-wrapper #kurashi01 .marker { left:145px; top:45px;}
#kurashi #main-inner .kurashi-wrapper #kurashi02 .marker { left:235px; top:20px;}
}