﻿@charset "utf-8";
/* CSS Document */



.w60{width:60%}
.w15{width:15%}
.tac {text-align: center}
.tar {text-align: right}
.tal {text-align: left}
.floatR{float:right}
.sep {height:20px}

/********************* page setting *********************/
.full{width: 100%; min-width: 1048px;}
.content {width:1500px; margin:auto}
.footer {width: 100%; min-width: 1048px;  margin-top:50px}
.copyright{background-color: #666;padding:15px 0;text-align:center; color:#FFF}

.footer-contact {background-color: #1c2957;color: white; text-align:center}

#details .full{width: 100%; min-width: 720px;}
#details .content {width:720px; margin:auto}
#details .footer{width: 100%; min-width: 720px;}
#details .copyright{background-color: #666;padding:20px 0; margin-top:30px}

.footer-contact {color:white; background:url(../images/common/footer_bg.jpg)no-repeat top center #1c2957;display:block;height:160px;}


/*footer_menu*/
.footer-contact ul#footer_menu {/*float:left;left:50%;position:relative;*/display: table;margin:  auto;}
.footer-contact ul#footer_menu li {float:left;/*left:-50%;position:relative;*/background:url(../images/common/footer_listmark.png)no-repeat left center;padding-left:20px;margin-right:20px;}
.footer-contact ul#footer_menu li a {color:#fff;text-decoration: none;}

/*contact*/
.footer-contact ul#contact {/*float:left;left:50%;position:relative;*/display: table;margin:10px auto;}
.footer-contact ul#contact li {float:left;/*left:-50%;position:relative;*/padding-left:24px;margin-right:20px;white-space:nowrap;display:block;line-height:20px;}
.footer-contact ul li#tel {background:url(../images/common/tel_icon.png)no-repeat left center;}
.footer-contact ul li#fax {background:url(../images/common/fax_icon.png)no-repeat left center;}
.footer-contact ul li#mail {background:url(../images/common/mail_icon.png)no-repeat left center;}
.footer-contact ul li a {color:white;text-decoration: none;}

.con-pad{padding:0 8px}

.footer-responsive a, .footer-responsive a:hover {color:#FFF; text-decoration: none}
/*********************************************************/

.mt26{margin-top:26px}
.fontL{font-size:110%}
.fontLL{font-size:120%}

a.btn { text-decoration:none}
.img-frame{border: 1px solid #ccc; padding:5px 0px;max-width:150px;max-height:100px;}

input.search-textfield {
    width: 89.5%;
    height: 36px;
    border-radius: 5px;
    font-size: 14px;
    margin-right: 3px;
    background-color: #FFFFFF;
    border: solid 1px #CCCCCC;
    color: #000000;
    padding: 3px 10px;
    box-sizing: border-box;
    vertical-align: inherit;
    font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif !important;
}


.box {display: -moz-inline-box;display: inline-block;vertical-align: top; }
#box1 {width:330px; margin-right:15px; }
#box2 {width:1134px; }


#box1 table.table01 td { font-weight:normal !important}

.search-list {padding:0; margin:0 0 20px 0; list-style:none}
.search-list li{border-bottom:1px  dotted #666; margin-top:30px}


.d-colL{ display:table-cell; width:77%;margin-right:2%; vertical-align:top}
.d-colR{ display:table-cell; width:21%;}

.company-name {font-size:140%; margin-bottom:10px; font-weight:bold; }
.company-name a{ text-decoration:none}

#item-list {width:784px;text-align:center; }
#item-list .entry {float:left; width:148px; margin-bottom:10px; padding:10px 0px;}
#item-list .entry img{max-width:138px;max-height:138px;border:1px solid #CCC;}
#item-list .entry a{text-decoration:none}
#item-list .entry a:hover{text-decoration: underline}
#item-list h3 {font-weight:bold}
#item-list h3 img{ vertical-align:middle; padding: 0 5px}
#item-list .entry p{text-align:center;margin-top:6px}
#item-list .devider {float:left; width:11px; height:11px;}
#item-list .break {clear:both; width:784px; height:11px;overflow:hidden;}




.details-info { border:1px solid #395ca2; padding:10px; background-color:#dde9ee }
.details-info h2{margin-top:0 !important}
.details-info hr{ border-color:#666}

.ttl{font-size:120%; font-weight:bold; margin-top:20px}
.details-contact {background-color: #E8E8E8;font-size: 11px;padding: 6px;}

.hor-btns { text-align:center; margin-top:40px;}









/******loading mask************/
/*We set the element we are applying our loading mask to relative  */
.loading-mask {position: relative; z-index:9999}

/*Because we set .loading-mask relative, we can span our ::before element over the whole parent element  */
.loading-mask::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  margin:-10px
}

/*Spin animation for .loading-mask::after  
*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*
The loading throbber is a single spinning element with three  
visible borders and a border-radius of 50%.  
Instead of a border we could also use a font-icon or any  
image using the content attribute.  
*/
.loading-mask::after {
  content: "";
  position: absolute;
  border-width: 3px;
  border-style: solid;
  border-color: transparent rgb(255, 255, 255) rgb(255, 255, 255);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  top: calc(15%);
  left: calc(50% - 18px);
  animation: 2s linear 0s normal none infinite running spin;
  filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33));
}




.remarks {list-style:none; padding:0; margin:-20px 0 0px 0;}
.remarks li {display:inline-block}
.details-info .remarks {margin:0 !important; text-align: right}

table.table-fit {border-collapse: collapse;border:1px solid #999;}
table.table-fit th {background-color: #eee;padding:5px;border:1px solid #999;white-space: nowrap;text-align: center;}
table.table-fit td {padding:5px;border:1px solid #999;}


.field-tab {margin:0; padding:0; list-style: none;}
.field-tab li{display:inline-block; padding:5px 10px; white-space: nowrap; border:1px solid #a6a6a6; color:#a6a6a6; border-radius:4px; margin:0 10px 10px 0; font-weight:bold}
.field-tab li.highlight{background-color: #4472c4; color:#FFF; border-color:#2f528f}

.btn-search{float:right; }

.no_image_product {
    /*border:1px dashed #4e7cb7;*/
    padding-top: 30px;
    padding-bottom: 30px;
    border-width: 2px;
}



.fair-list {padding:0; margin:0; list-style:none}
.fair-list li{display:inline-block; width:49%; margin:0; vertical-align: top}

.fair-list li input[type="text"]{width:70% !important;max-width: 250px !important;}
.fair-list li.other-list-item {width:100% !important;}

.categoryLabel div {display:inline-block;font-weight:normal;}
.categoryLabel span {display:inline-block;font-weight:normal;}
span.categoryLabel {display:inline-block;font-weight:normal;}


.InfoLeft {
    width: 250px;
}

.list-item-width21 {
    width: 21% !important;
}

.list-item-width26 {
    width: 26% !important;
}

.list-item-width28 {
    width: 28% !important;
}

.list-item-width30 {
    width: 30% !important;
}

.list-item-width32 {
    width: 32% !important;
}

.list-item-width40 {
    width: 40% !important;
}

.list-item-width42 {
    width: 42% !important;
}

.list-item-width50 {
    width: 50% !important;
}

.list-item-width54_5 {
    width: 54.5% !important;
}

.list-item-width60 {
    width: 63% !important;
}

.list-item-width70 {
    width: 70% !important;
}

.list-item-width100 {
    width: 100% !important;
}

.fair-list li select {
    max-width: 40px !important;
    padding: 0px;
}

.btn-bookmark {
    color: #ffffff;
    background-color: #d58512;
    border-color: #985f0d;
}
.btn-bookmark {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-bookmark {
    background-image: -webkit-linear-gradient(top, #ffc107 0%, #ff9800 100%);
    background-image: -o-linear-gradient(top, #ffc107 0%, #ff9800 100%);
    background-image: linear-gradient(to bottom, #ffc107 0%, #ff9800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffc107', endColorstr='#ffff9800', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}

.bookmark-yellow i {
    color: #ffc000;
}


.btn-info1 {
    color: #ffffff;
    background-color: #70ad47;
    border-color: #009688;
}
.btn-info2 {
    color: #ffffff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info3 {
    color: #ffffff;
    background-color: #4472c4;
    border-color: #256da0;
}
.btn-info4 {
    color: #ffffff;
    background-color: #ed7d31;
    border-color: #ed7d31;
}
.btn-info5 {
    color: #ffffff;
    background-color: #7030a0;
    border-color: #7030a0;
}
.btn-info6 {
    color: #000000;
    background-color: #ffeb3b;
    border-color: #ffeb3b;
}
.btn-info7 {
    color: #ffffff;
    background-color: #f44336;
    border-color: #f44336;
}

.btn-exhibitor-list {
    color: #ffffff;
    background-color: #e91e63;
    border-color: #c2185b;
}
.btn-exhibitor-list {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-exhibitor-list {
    background-image: -webkit-linear-gradient(top, #ffc107 0%, #ff9800 100%);
    background-image: -o-linear-gradient(top, #ffc107 0%, #ff9800 100%);
    background-image: linear-gradient(to bottom, #ffc107 0%, #ff9800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffc107', endColorstr='#ffff9800', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}



.btn-appoint {background:#333; vertical-align: middle; padding:8px 10px; color:#FFF !important; font-weight:bold; text-decoration: none !important; border-radius:6px;margin-top:10px; }
.btn-appoint:hover {opacity: .8}



/******Product Search***********/

	.top-logo {max-width: 100%; height: auto;}

.exhi-date{color: #666;}


.w100 {width:100%}
.d-table {display:table}
.d-row {display:table-row}
.d-col {display:table-cell}
.vac {vertical-align: middle}
.pT20{padding-top:20px}
.head-reg-btn {background:#7304fc; color:#FFF; font-weight:bold; padding:5px 10px; display:inline-block}
.head-reg-btn a, .head-reg-btn a:hover {font-size:120%; text-decoration: underline; color:#fcfa04}
.head-reg-btn a:hover {text-decoration:none}
.btn-login,.btn-login a:hover{background:#CCC; color:#000 !important; font-weight:bold; padding:15px 10px;text-decoration:none !important ; display:inline-block; white-space: nowrap}


#logo .d-col{vertical-align: top; margin:0 5px}

.searchby {width:100%}
.searchby [class^='col-']{vertical-align: middle; padding:20px ; background:#eee;}
.searchby [class^='col-']:nth-child(1),.searchby [class^='col-']:nth-child(2) {border-right:15px solid #FFF; }
.searchby [class^='col-']:nth-child(3) input {width:100%; }
.searchby [class^='col-']:nth-child(3) .d-col:nth-child(2) {width:20%;padding-left:10px }


.all-products .row [class^='col-'] {padding-left:5px; padding-right:5px }

.card{border:none !important}
.card-img{border: 4px double #e8e8e8;position: relative;}
.card-img-top {
width: 100%;
height: 34vh;
object-fit: contain;
}
.card-body{
    flex-grow:0;
	padding:0 !important
}

.exhi-name {padding:2px 8px; background:#CCC; display:inline-block}
.materials{position:absolute;background-color:rgb(255,255,255); padding:5px; }
.cc-logo{top:0px; left:0px;}
.cc-logo-txt {background-color: rgba(230,230,230, 0.6);
    color: #000;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;}
.highlight{bottom:0; background-color:rgba(0,0,0, 0.7); color:#FFF; width:100%; padding:10px;}

.all-products .btn-bookmark {background:#999}
.all-products .btn-bookmark i{color:#ffff00}
.all-products .btn-bkmark {text-align: right; }
.all-products .btn-bkmark .btn-bookmark {display:inline-block; padding:4px 10px 2px 10px; border-radius:5px 5px 0 0 }
.all-products .btn-bkmark .btn-bookmark.greybookmark{background:#e8e8e8; color:#999; text-shadow: none}
.all-products .btn-bkmark .btn-bookmark.greybookmark i{color:#999}

.label-nanotech {background:#103e93; color:#FFF}
.label-3DECOtech {background:#95c91f; color:#FFF}
.label-ASTEC {background:#01a932; color:#FFF}
.label-Convertech {background:#423786; color:#FFF}
.label-DER {background:#d0ac4b; color:#FFF}
.label-ENEX {background:#e50213; color:#FFF}
.label-JFlex {background:#01adbb; color:#FFF}
.label-MEMS {background:#dc143b; color:#FFF}
.label-neo {background:#e7344a; color:#FFF}
.label-renewable {background:#3bb8e8; color:#FFF}
.label-SURTECH {background:#00218a; color:#FFF}
.label-TCT {background:#cf7131; color:#FFF}
.label-InterAqua{background:#0a69c5; color:#FFF}

.pagination {display:table !important}
.pagination li{display:table-cell}

#footer_menu {margin:0; padding:0; list-style: none}


/************* details *************/
.label {

    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;

}
.label-new {background-color:#30a6e1;}
.label-demo {background-color:#d17c02;}
.label-sample {background-color:#8dcc61;}
.label-present {background-color:#e91e63;}
.label-release {background-color:#ff5722;}
.product_field{font-size:12px;padding:5px 8px;float:right;margin-left:3px;}
.label-pdf {background-color:#777777;}
.label-video {background-color:#009688;}
.label-seminar {background-color:#9fa8da;}
