/*全站*/
html,
body {
  font-family: "Microsoft JhengHei" !important;
}

img {
  max-width: 100%;
}

.hideobj {
  display: none;
}

a {
  color: #000;
  background-color: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  background: none;
  color: #000;
  text-decoration: none;
}



/*會員登入項目*/
#login-tabs li {
  background: none;
}

#login-tabs a {
  color: #7d7d7d;
  background: none;
}

#login-tabs a:hover,
#login-tabs a:focus {
  text-decoration: underline;
  background: none;
  color: #000;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff !important;
}

.control-group ul .btn {
margin-top:0;
}
.controls .nav>li>a {
  font-size: 16px;
}


/**表單元素**/
fieldset.over-border {
  border: 1px solid #ccc !important;
  padding: 0 1.4em 1.4em 1.4em !important;
  margin: 0 0 1.4em 0 !important;
  border-radius: 16px;
}

legend.line-border {
  font-size: 16px !important;
  text-align: left !important;
  width: inherit;
  border-bottom: none;
  display: none;
}

fieldset>div {
  margin-top: 30px;
}

.red {
  color: #cc0000;
}

.radio-inline input[type='radio'] {
  margin-left: -20px;
  float: left;
}

.radio-inline {
  padding-left: 20px;
  font-weight: normal;
  margin-bottom: 0px;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}

.help-inline {
  vertical-align: middle;
  display: inline-block;
  padding-top: 5px;
  float: left;
  padding-left: 0px;
  cursor: default;
}

.control-label {
  cursor: default;
}

.form-show .input-prepend {
  clear: both;
}

fieldset.instep-border {
  border: 1px solid #ccc !important;
  padding: 0 16px 16px 16px !important;
  margin: 0 0 16px 0 !important;
  border-radius: 15px;
  /*圓角*/
  background: #eeeeee;
  height: 100px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}

fieldset.step-border {
  border: 1px solid #ccc !important;
  padding: 0 16px 16px 16px !important;
  margin: 0 0 16px 0 !important;
  border-radius: 15px;
  /*圓角*/
  height: 100px;
  text-align: center;
}

legend.stepline-border {
  text-align: center !important;
  width: inherit;
  border-bottom: none;
}

.enlarge {
  clear: both;
}


@media only screen and (max-width: 480px) {
  .navbar-inner li {
    display: block;
    width: 100%;
  }
}

/*#header*/
/*註冊*/
#hello_member ul li a:hover,
#hello_member ul li a:focus,
#hello_member ul li a:active {
/*  text-decoration: underline;*/
  background: none;
  color: #fff;	
}

/*inquiry*/
.btn-success {
    color: #fff;
    background-color: #777777;
    border-color: #717171;
}

.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open>.dropdown-toggle.btn-success,
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
    color: #fff;
    background-color: #9c9c9c;
    border-color: #9c9c9c;
}
.btn-info {
    color: #fff;
    background-color: #777777;
    border-color: #717171;
}

/*語言*/
#language_area ul li a {
  color: #000;
  background: none;
}

#language_area ul li a:hover,
#language_area ul li a:focus,
#language_area ul li a:active {
  background: none;
  text-decoration: underline;
}

#mainbanner {
  /*padding-top:5px;*/
  margin-top: -15px;
}

/*--側欄--*/
#sidebar {
  padding: 10px 0px
}

#sidebar .nav-header {
  /* background: #7d7d7d; */
  color: #363c86;
  font-weight: bolder;
  padding: 10px 15px 15px 15px;
  font-size: 24px;
}

#side_menu .nav{
  text-align: center;
}

.collapse.in {
  padding: 0;
}

.nav>li>a{
  font-size: 20px;
}
.nav>li>ul>li a {
  font-size: 18px;
}

#side_menu> .nav >li.active>a {
  background: url(../images/lightbulb.png)no-repeat;
  background-position: 15px;
}

#side_menu> .nav>li.active> a, #side_menu .nav> li:hover> a {
  font-weight:bold;
	
}

#side_menu> .nav>li>ul>li.active a, #side_menu .nav>li>ul> li:hover a {
  color: #15d6d6;
}

#side_menu> .nav >li.active>a ,.nav>li>a{
  text-align: left;
  padding-left: 65px;	
  font-weight: bold;
  color: #555;
}
.nav-header:after{
  content: " ";
  top: 58px;
  height: 1px;
  width: 207px;
  background-color: #5a5f9c;
  position: absolute;
  right: 15px;
}


.nav>li>a:hover, .nav>li>a:focus{
  background-color:rgba(54, 60, 134, 0.07);
}



/*RSS*/
#rss_area a {
  text-shadow: none;
}

#rss_area a:hover {
  text-shadow: none;
}

/*--內容區--*/
/*#content{
  padding:10px 0 0 0;
}*/
/*麵包屑*/
#content .breadcrumb {
  text-shadow: none;
  background: none;
  text-align: center;
  font-size: 16px;
  padding-top: 20px;
}

#content .breadcrumb li {
  text-shadow: none;
}

#content .breadcrumb li a {
  text-shadow: none;
  text-decoration: none;
}

#content .breadcrumb li a:hover {
  text-shadow: none;
  background: none;
  text-decoration: underline;
}

#content .breadcrumb li .divider {
  text-shadow: none;
  background: none;
}

ul.breadcrumb {
  background: none;
  text-align: center;
}

.breadcrumb>li+li:before {
  content: ">\00a0";
  padding: 0 0 0 10px;
}

.breadcrumb:after {
  content: " ";
  top: 124px;
  height: 45px;
  width: 1px;
  color: #bfbfbf;
  border-right: 1px solid;
  display: block;
  margin: 21px auto 0;
}

/*個數*/
.page-header {
  /* border-bottom: 1px #eee solid; */
  border-bottom: none;
}

/*產品頁*/

ul#roottreecid_2,ul#roottreecid_3 {
    text-align: left;
    padding-left: 65px;
}
.container_product , .container_product2 , .container_product3 , .container_product4  {
  /* background: #f4f4f4 !important; */
}

#index_container {
  position: relative;
  z-index: 2;
}

#index_container,
#container {
  padding-bottom: 0;
}

.thumbnail {
  border: none;
  padding: 0;
  margin-bottom: 0;
}

.container_product .thumbnails li {
  float: left;
  text-align: center;
  margin: 0 1% 5% 1%;
  width: 31%;
}

.container_product2 .thumbnails li , .container_product3 .thumbnails li , .container_product4 .thumbnails li  {
  float: left;
  width: 31.33%;
  text-align: center;
  margin: 0 1% 5% 1%; 
}

.container_product .cate-name a,
.cate-name-more a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.container_product2 .cate-name a,.container_product3 .cate-name a,,.container_product4 .cate-name a,
.cate-name-more a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.cate-name a:hover,
.cate-name-more a:hover {
  color: #363c86;
  font-weight: bold;
  text-decoration: underline;
  text-decoration: none;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.pro-desc {
  height: 80px;
  overflow-x: hidden;
  overflow-y: auto;
}

.spec {
  height: 38px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
  background-color: #555;
  border-color: #9d9d9d;
}

.pagination>li>a, .pagination>li>span {
  color: #555;
}
/*產品介紹頁*/
#pb_area {
  /* border: 1px solid #ccc; */
  overflow: hidden;
}

#pb_area_mobile { display: none; }

.thumbnail img {
  margin-right: auto;
  margin-left: auto;
  display: block;
  max-width: 100%;
}

.input-group {
  display: table;
  padding-bottom: 10px;
  width: 100%;
}

.input-group .form-control {
  margin-bottom: 0px;
}

.txtNormal {
  overflow: auto;
  width: 100%;
 /* margin-bottom: 60px;/* 實績 */*/
}

/* 文字置中對齊左 */
.txtNormal .aligntext {
  width: 50%; 
  margin: auto; 
  text-align:left;
  /* white-space:nowrap; */
}

#content .thumbnails .prodlist {
  /* height: 330px; */
  overflow: hidden;
  padding: 0;
}

#content .thumbnails .prodlist:nth-child(3n+1) {
  clear: both;
}

#content .thumbnails .catelist {
  /* height: 210px; */
  overflow: hidden;
  padding: 0;
}

#content .thumbnails .catelist > .product-cate > .thumbnail > a {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
}

.listtxtspec .input-prepend {
  padding: 1px 0px;
  margin: 0px;
}

.clear {
  clear: both;
}

/* .listimg {
  min-height: 265px;
} */

/*圖片hover放大效果*/
.btn-link, .imghover ,.projectList {
  overflow: hidden
}

.btn-link img ,.imghover img ,.projectList>a>img {
  cursor: pointer;
  transition: all 0.6s;
}

.btn-link:hover img, .btn-link:focus  ,.thumbnail:hover .imghover img ,.projectList:hover>a>img {
  transform: scale(1.1);
}

.btn-link:hover img,#container_product2 .thumbnail:hover .cate-name a, .btn-link:focus ,.projectList:hover>a>img {
  color: #363c86;
}


#container_product .thumbnail:hover .cate-name a{
  color: #fff; 
}

/*end-圖片hover放大效果*/

#lineqty {
  width: 30%;
}

.showsmall {
  margin: 16px -10px 0;
}

.showsmall ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.showsmall li {
  float: none;
  margin: 2px 2px 30px;
}

.showsmall li img {
  /* margin: 3px; */
  /* padding: 3px; */
  /*width: 50px;*/
}

/*頁籤**/
.nav-tabs .active a {
  font-weight: bold;
}

/*訊息用*/
.msgcont {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 10px;
}

.msg_img_title {
  width: 30%;
}

/*尾檔*/
#cominfo ul li {
  display: inline-block;
  margin: 0 16px 0 0;
}
.cominfoname{
  font-size: 22px;
  margin-bottom: 15px;
}
.cominfoicon{
  display: inline-block;
  margin-left: 10px;
}

#copyright {
  text-align: right;
  padding: 0;
  /*font-weight:bolder;*/
}

#footlink {
  float: right;
}

#footlink ul li a {
  border-radius: inherit;
  padding: 0 3px;
  font-size: 14px;
  line-height: 20px;
}

#footlink ul li a:hover,
.foot #footlink ul li a:focus,
.foot #footlink ul li a:active {
  background: none;
  text-decoration: underline;
}

.footer-bg a {
  color: #fff;
  line-height: 35px;
}


.footer-bg {
  display: block;
  background-color: #535353;
  color: #fff;
  padding-top: 50px;
  padding-bottom: 40px;
  padding-left: 95px;
  padding-right: 95px;
  border-width: 1px;
  position: relative;
}

.footer-text {
  float: none;
  width: 100%;
  text-align: center;
  line-height: 45px;
}

/*首頁用*/
#index_msg_ul a {
  background: #eee;
  padding: 8px 15px;
  font-size: 16px;
  color: #000;
}

#index_msg_ul a:hover {
  background: #eee;
  padding: 8px 15px;
  font-size: 16px;
  color: #000;
}

#index_msg_ul .msgcont {}

#idxprocarousel .span {
  small_class
}

.item {

  /*background-color : #EEE;*/
  height: {
    small_height
  }

  px;
  text-align: center;

  /* Firefox, Chrome */
  line-height: {
    small_height
  }

  px;
  /* IE */
  *font-size: 180px;
  /* 200px * 0.9 = 180px */
}

#idxprocarousel img {
  vertical-align: middle;
}

#idxprocarousel .caption {
  /*background : #666; padding : 5px;*/
}

#idxprocarousel .caption a {
  color: #000;
}

#content .pshow_title {
  border-left: 5px solid #ccc;
  font-size: 18px;
  font-weight: bold;
  background-color: #eee;
  padding: 7px;
}

ul {
  list-style: none;
}

#footer .ftbar {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

/***style for banner's arrows and pagination ****/
.swiper-banner .arrow-left,
.swiper-product .swiper-button-prev {
  position: absolute;
  left: 1%;
  top: 40%;
  width: 17px;
  height: 30px;
  z-index: 99;
}

.swiper-banner .arrow-right,
.swiper-product .swiper-button-next {
  position: absolute;
  right: 1%;
  top: 40%;
  width: 17px;
  height: 30px;
  z-index: 99;
}

.swiper-banner .page-banner,
.swiper-product .swiper-pagination {
  position: absolute;
  left: 0;
  z-index: 99;
  text-align: center;
  bottom: 30px;
  width: 100%;
}

.swiper-banner .swiper-pagination-switch,
.swiper-product .swiper-pagination-switch {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 1px 2px #555 inset;
  margin: 0 8px;
  cursor: pointer;
}

.swiper-banner .swiper-active-switch,
.swiper-product .swiper-active-switch {
  background: #fff403;
}

/***style for banner's arrows and pagination end ****/
/*style for google map  2015.10.21*/
.googlemap {
  width: 100%;
  height: 12em;
}

.listimg a.btn.btn-link {
  display: initial;
}

/*new css*/
.wrap1 {
  max-width: 1700px;
  margin: 0 auto;
  overflow: hidden;
}

.btn {
  font-weight: 700;
  padding: 10px 30px;
  font-size: 16px;
  border-Radius: 0;
  margin-top: 25px;
  text-decoration: none;
  outline: none;
}

.index-menu {
  float: right;
  z-index: 999;
  position: absolute;
  text-align: right;
  width: 93%;
  top: 50px;
}
.menu{ 
  float: right;
  z-index: 999;
  position: absolute;
  text-align: right;
  width: 93%;
  top: 20px;
}
.logo {
  float: left;
  z-index: 999;
  position: absolute;
  top: 50px;
  left: 5%;
}

.banner {
  padding: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.banner-title {
  font-size: 36px;
  z-index: 999;
  position: absolute;
  margin: -2.3% 0 0 1%;
  text-align: left;
}

.social , .index-social {
  display: inline-block;
}

.social div , .index-social div {
  z-index: 10;
}

.social div:not(:first-child) , .index-social div:not(:first-child){
  padding-top: 10px;
  text-align: center;
}

#gotop {
  right: 5%;
  position: absolute;
  top: -22px;
  border: 0;
  background: transparent;
  outline: none;
  z-index: 5;
}

.wrap {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  min-height: 560px;
}

.title-content {
  position: absolute;
  top: 200px;
  width: 100%;
  left: 20%;
}

.title-ch {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
}

.title-en {
  font-size: 20px;
  font-family: Montserrat;
  color: #363c86;
  letter-spacing: 3px;
}

/* .title-content:after {
  content: " ";
  position: absolute;
  top: 92px;
  height: 17px;
  width: 1px;
  color: #363c86;
  border-right: 1px solid;
  left: 50%;
} */

.sidebar {
  display: none;
}

/* .container_product_show .sidebar {
  display: block;
  width: 300px;
  float: left;
} */

.container_product_show .content {
  text-align: center;  
  /* display: block;
  width: 61%;
  float: left;
  margin: 0 7%; */
} 



.page-header {
  text-align: center;
  margin-top: 0;
}

.container_product .caption3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  padding: 25px;
}

.container_product .thumbnail .caption2 {
  background: rgba(0, 0, 0, 0.5);
  font-size: 26px;
  padding: 0 25px;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: all 0.5s ease-in-out;
  height: 90px;
}

.container_product .thumbnail .caption3:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 230px;
  color: #fff; 
  border-right: 1px solid;
  display: none;
  transition: all 1s ease-in-out;
  top: 100%;
  left: 50%;
}

.container_product .thumbnail:hover .caption2 {
  height: 100%;
}

.container_product .thumbnail:hover .caption3:after {
  bottom: 0;
  display: inline-block;
}

.container_product2 .caption2,.container_product3 .caption2,.container_product4 .caption2 {
  font-size: 18px;
  padding-bottom: 25px;
  padding-top: 20px;
}

.listtxtNormal {
  text-align: center;
  font-size: 20px;
  letter-spacing: 3px;
}

/* banner */
.swiper-slidepage .swiper-slideimg {
  display: block;
  background-position: center;
}

.swiper-slidepage .swiper-slideimg img {
  opacity: 0;
}

/* end */
/*productShow*/
.btn-primary {
  color: #FFF;
  background-color: #363c86;
  border-color: #363c86;
/*  margin-bottom: 50px;*/
}

.pro-name {
  font-size: 36px;
  color: #000;
}

.pro-no {
  font-size: 24px;
  color: #15d6d6;
  font-weight: bolder;
}

.cuatomnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #232323;
  z-index: 1010;
  margin: 0;
  opacity: 0;
  display: none;
}

.bimgarea.popup-gallery {
  /*text-align: center;*/
}

.bimgarea { display: none;}

.col6{
  width: 50%;
  float: left;
}
.container_product_show  tbody{
  text-align: center;
  font-size: 16px;
}

.container_product_show  tr:first-child {
  background-color: #eeeeee;
}

.container_product_show  table, tr, td {
  border: 1px solid #bfbfbf;
}


.prodesc{
  font-size: 16px;
  padding-top: 15px;
}

.prochar {
  padding-top: 70px;
  font-size: 16px;
}

.prochar h3{
  font-weight: bold;
}

/* contact */
.alert-info {
  color: #fff;
  background-color: #9c9c9c;
  border-color:#9c9c9c;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary, 
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open>.dropdown-toggle.btn-danger{
  color: #fff;
  background-color: #9c9c9c;
  border-color: #9c9c9c;
}

.btn-danger {
  color: #FFF;
  background-color: #7d7d7d;
  border-color: #7d7d7d;
}

.alert.alert-info, fieldset.over-border {
    border-radius: 0;
}

/* 工程實績 list1*/

.projectList {
  float: left;
  width: 31.3%;
  margin: 1%;
  position: relative;
  overflow: hidden;
}

.projectTitle {
  position: absolute;
  bottom: 0;
  font-size: 26px;
  color: #fff;
  text-align: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  height: 70px;
  margin-bottom: 0;
}

.projectList a {

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.projectTitle p {
    margin: 17px 0;
}
/*工程實績 list2*/
#tablist.table-bordered {
    border:none;
}
#tablist thead{
	display: none;
}

#tablist tr{
	border:none;
	width: calc(50% - 30px);
    margin: 0 15px 100px;
    float: left;
}

#tablist td{
	font-size: 18px;
	border:none;
	background:#fff;
	vertical-align: bottom;
	display: block;
    width: 100%;
}

.pic{
	overflow: hidden;
    position: relative;
    height: 330px;
}

.container_msg3 tr .pic img,.container_msg8 tr .pic img{
    transition: all 0.5s ease-in-out;
    transform: scale(1.0) translate(-50% ,0);
    position: absolute;
    left: 50%;
}
.container_msg3 tr:hover .pic img,.container_msg8 tr:hover .pic img{
	transform: scale(1.05) translate(-50% ,0);
}
.newsTitle {
	text-align: center;
}

/*工程實績 規劃案例 內容頁*/
.container_msg4 .content,
.container_msg5 .content, 
.container_msg6 .content,

.container_msg23 .content,
.container_msg31 .content,
.container_msg32 .content,
.container_msg33 .content{
    text-align: center;
}


/* 案例 list1*/

.caseList {
  width: 48%;
}
/* 案例 list2*/
.container_msg7 tbody {
    display: none;
}

/* 案例 list3*/



/* end */

.cuatomnav .menu-company {
  position: absolute;
  top: 136px;
  right: 142px;
}

.cuatomnav .menu-company span {
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.cuatomnav .menu-company .chinese-name {
  display: block;
  position: absolute;
  width: 32px;
  font-size: 18px;
  text-align: center;
  color: #FFF;
  right: 0;
  top: 24px;
  opacity: 0;
}
.cuatomnav .menu-company .chinese-name>a {
  color: #FFF;
}
.cuatomnav .menu-company .english-name>a {
	color: #fff4038a;
}
.cuatomnav .menu-company .english-name {
  position: absolute;
  right: 0px;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -moz-transform: rotate(90deg);
  /* Firefox */
  -webkit-transform: rotate(90deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  /* Opera */
  width: 240px;
  color: #00e2ff;
  font-size: 12px;
  top: 485px;
  right: 27px;
  opacity: 0;
  transform-origin: right bottom;
}

@media screen and (max-width: 767px) {
  /* 文字置中對齊左 */
  .txtNormal .aligntext {
    width: 98%;
    margin: auto;
    text-align: left;
    /* white-space:normal; */
    
  }

  .cuatomnav .menu-company{    
    margin-bottom: 36px;
    padding-bottom: 12px;
    border-bottom: 1px solid #CCC;
    position:static;
    top: 0;
    right: 0;

  }
  
  .cuatomnav .menu-company .chinese-name{
    font-size: 21px;
    /* font-weight: bold; */
  }
  .cuatomnav .menu-company .english-name,
  .cuatomnav .menu-company .chinese-name {
    position: static;
    width: initial;
    height: initial;
    top: initial;
    left: initial;
    transform: initial;
    -ms-transform: initial;
    -moz-transform: initial;
    -webkit-transform: initial;
    -o-transform: initial;
    text-align: left;
  }
  .col6{
    width:100%;
  float: none;
  }

}
.open_menu{
  overflow: hidden;
}
.open_menu .cuatomnav {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.close_menu-btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 100px;
  right: 142px;
  cursor: pointer;
}
@media screen and (max-width: 767px){
  .close_menu-btn {
    top: 50px;
    right: 24px;
    z-index: 2;
  }
}
.close_menu-btn span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #fff4038a;
  top: 50%;
  margin-top: -1px;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.open_menu .cuatomnav .menu-company .chinese-name {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.open_menu .cuatomnav .menu-company .english-name {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.close_menu .cuatomnav .menu-company .chinese-name {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.close_menu .cuatomnav .menu-company .english-name {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.open_menu .close_menu-btn span:nth-child(1) {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -moz-transform: rotate(45deg);
  /* Firefox */
  -webkit-transform: rotate(45deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
  /* Opera */
}

.open_menu .close_menu-btn span:nth-child(2) {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  /* IE 9 */
  -moz-transform: rotate(-45deg);
  /* Firefox */
  -webkit-transform: rotate(-45deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(-45deg);
  /* Opera */
}

.cuatomnav ul {
  padding: 0;
  top: 0;
  list-style: none;
}

.cuatomnav .navbar-inner {
  width: 100%;
  height: 100%;
  padding: 100px 142px;
  position: relative;
  overflow-y: auto;
}

@media screen and (max-width: 767px) {
  .cuatomnav .navbar-inner {
    padding: 48px 20px;
    overflow-y: auto;
  }
}

#custom_menu li a {
  font-size: 24px;
  line-height: 36px;
  color: #767676;
  position: relative;
  padding: 0;
}

#custom_menu li a .touch {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 8px;
  cursor: pointer;
}

#custom_menu li a .touch span {
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  background: #1b9aaa;
}

#custom_menu li a .touch span.vertical {
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#custom_menu li a .touch span.horizontal {
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#custom_menu {
  width: 300px;
}

#custom_menu>li {
  margin-bottom: 46px;
}

#custom_menu>li>a {
  padding-left: 64px;
  font-weight: bold;
}

#custom_menu>li>a::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 6px;
  width: 48px;
  height: 38px;
}

#custom_menu>li>a:after {
  display: block;
  line-height: 1.5;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff4038a;
  font-weight: bold;
  font-family: '微軟正黑體';
}

#custom_menu>li.active>a:after,
#custom_menu>li>a:hover:after {
  color: #FFF;
}

#custom_menu>li {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  opacity: 0;
}

.open_menu #custom_menu>li {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.close_menu #custom_menu>li {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

.open_menu #custom_menu>li#m2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: .2s;
}

.open_menu #custom_menu>li#m3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.open_menu #custom_menu>li#m4 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

/* menu首頁 */
.open_menu #custom_menu>li#m5 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}


#custom_menu li#m1>a:after {
  content: 'PROJECTS';
}

#custom_menu li#m2>a:after {
  content: 'ABOUT US';
}

#custom_menu li#m3>a:after {
  content: 'CONTACT';
}

#custom_menu li#m4>a:after {
  content: 'CONSULTATION';
}

#custom_menu li#m5>a:after {
  content: 'HOME';
}

#custom_menu li.active>a,
#custom_menu li a:hover,
#custom_menu li a:focus {
  color: #FFF;
  background: none;
}

#custom_menu li#m1>a:before {
  content: '';
  background: url('../images/menu-icon/menu_1_.png') center center/cover no-repeat;
  background: url('../images/menu-icon/menu_1.png') center center/cover no-repeat;
}

#custom_menu li#m1.active>a::before,
#custom_menu li#m1>a:hover::before,
#custom_menu li#m1>a:focus::before {
  background: url('../images/menu-icon/menu_1_.png') center center/cover no-repeat;
}

#custom_menu li#m2>a:before {
  content: '';
  background: url('../images/menu-icon/menu_2_.png') center center/cover no-repeat;
  background: url('../images/menu-icon/menu_2.png') center center/cover no-repeat;
}

#custom_menu li#m2.active>a::before,
#custom_menu li#m2>a:hover::before,
#custom_menu li#m2>a:focus::before {
  background: url('../images/menu-icon/menu_2_.png') center center/cover no-repeat;
}

#custom_menu li#m3>a:before {
  content: '';
  background: url('../images/menu-icon/menu_3_.png') center center/cover no-repeat;
  background: url('../images/menu-icon/menu_3.png') center center/cover no-repeat;
}

#custom_menu li#m3.active>a::before,
#custom_menu li#m3>a:hover::before,
#custom_menu li#m3>a:focus::before {
  background: url('../images/menu-icon/menu_3_.png') center center/cover no-repeat;
}

#custom_menu li#m4>a:before {
  content: '';
  background: url('../images/menu-icon/menu_4_.png') center center/cover no-repeat;
  background: url('../images/menu-icon/menu_4.png') center center/cover no-repeat;
}

#custom_menu li#m5>a:before {
  content: '';
  background: url('../images/menu-icon/menu_5_.png') center center/cover no-repeat;
  background: url('../images/menu-icon/menu_5.png') center center/cover no-repeat;
}

#custom_menu li#m4.active>a::before,
#custom_menu li#m4>a:hover::before,
#custom_menu li#m4>a:focus::before {
  background: url('../images/menu-icon/menu_4_.png') center center/cover no-repeat;
}

#custom_menu li#m5.active>a::before,
#custom_menu li#m5>a:hover::before,
#custom_menu li#m5>a:focus::before {
  background: url('../images/menu-icon/menu_5_.png') center center/cover no-repeat;
}

#custom_menu>li>ul {
  position: absolute;
  left: 200%;
  width: 480px;
  top: -20px;
  display: none;
  /* overflow: hidden;
  max-height: 0;
  transition-delay: 1s;
  -moz-transition-delay: 1s; 
  -webkit-transition-delay: 1s; 
  -o-transition-delay: 1s; 
  transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1); */
}

@media screen and (max-width: 1366px) {
  #custom_menu>li>ul {
    position: relative;
    left: initial;
    top: initial;
    width: 100%;
    margin-top: 12px;
  }

  #custom_menu>li>ul>li {
    margin-top: 12px;
  }
}

#custom_menu>li.active>ul {
  /* max-height: 100%; */
}

#custom_menu>li.active>a>.touch span.vertical {
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0;
  width: 0;
}

#custom_menu>li.active>a>.touch span.horizontal {
  width: 300px;
  background: #363c86;
}

@media screen and (max-width: 1366px) {
  #custom_menu>li.active>a>.touch span.horizontal {
    width: 20px;
  }
}

#custom_menu>li>ul>li>a {
  font-size: 20px;
}

@media screen and (max-width: 1366px) {
  #custom_menu>li>ul>li>a {
    padding-left: 60px;
    display: block;
  }
}

#custom_menu>li>ul>li>a::after {
  display: inline-block;
  margin-left: 40px;
  font-size: 18px;
}

@media screen and (max-width: 1366px) {
  #custom_menu>li>ul>li>a::after {
    display: block;
    line-height: 1;
    font-size: 12px;
    margin-left: 0;
    letter-spacing: 0.1em;
  }

}

#custom_menu>li>ul>li.inmsg3>a::after {
  content: 'All';
}
#custom_menu>li>ul>li.inmsg4>a::after {
  content: 'public construction';
}
#custom_menu>li>ul>li.inmsg5>a::after {
  content: 'Architectural landscape';
}
#custom_menu>li>ul>li.inmsg6>a::after {
  content: 'Indoor Business Space';
}


#custom_menu>li>ul>li#incateall>a::after {
  content: 'All';
}
#custom_menu>li>ul>li.incate2>a::after {
  content: 'Outdoor landscape';
}
#custom_menu>li>ul>li.incate3>a::after {
  content: 'Indoor Business Space';
}
#custom_menu>li>ul>li.inmsg7>a::after {
  content: 'All';
}
#custom_menu>li>ul>li.inmsg8>a::after {
  content: 'static state';
}
#custom_menu>li>ul>li.inmsg9>a::after {
  content: 'dynamic';
}


@media screen and (max-width: 1680px) {
  .logo {
    padding-left: 70px;
  }

  .banner-title {
    font-size: 34px;
  }
}

@media screen and (max-width: 1366px) {
  #mobile_toggle>a img {
    width: 80px;
  }

  .banner-title {
    font-size: 28px;
  }

  .logo {
    width: 365px;
  }

  .nbs-flexisel-inner {
    width: 75%;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 1325px) {
  #copyright {
    padding-top: 10px;
  }

  #footlink {
    text-align: center;
  }

  .footer-bg {
    width: 100%;
  }

  .footer-bg>.col-md-7 {
    width: 100%;
    text-align: center;
  }

  .footer-bg>.col-md-5 {
    width: 100%;
  }

  .swiper-banner .swiper-pagination-switch {
    width: 10px;
    height: 10px;
    margin: 0 6px;
  }
}

@media screen and (max-width: 1300px) {
  #copyright {
    text-align: center;
  }

  #footlink {
    float: none;
  }

  #footlink .nav-pills>li,
  #cominfo ul li {
    float: none;
    display: inline-block;
  }
  /* .container_product_show .content {
    display: block;
    width: 50%;
    float: left;
    margin: 0 7%;} */


}


@media screen and (max-width: 1180px) {
  #tablist .pic {
   height: 287px;
  }
  .title-content {top: 130px;}
}
@media screen and (max-width: 1024px) {
  .proj>a .cate-title:after {
    bottom: 23px;
  }

  .proj-info p {
    padding-top: 25px;
  }

  .button01 {
    margin-top: 15px;
    padding: 10px;
  }

  .proj-info p {
    font-size: 14pt;
  }

  .banner-title {
    margin: -2.4% 0 0 1%;
  }

  #mobile_toggle>a img {
    width: 70px;
  }

  .container_product_show .sidebar {
    display: none;
  }
  .container_product_show .content {
    width: 100%;
    margin: 0;
  }
	
  #tablist .pic {
   height: 244px;
  }	
	
}

@media screen and (max-width: 950px) {
  #cominfo ul li {
    margin: 0 16px 0 0;
  }

  .footer-bg {
    padding-left: 5%;
    padding-right: 5%;
  }

  .container_product .thumbnails li {
    float: none;
    max-width: 620px;
    width: 100%;
    margin: 0 auto 60px auto;
  }
	
  #tablist tr {
    width: 100%;
	margin: 0px 0px 100px 0px;
 }	
 #tablist .pic {
  height: 448px;
 }
	
}

@media screen and (max-width: 767px) {
  .logo {
    position: inherit;
    padding: 0 10px 10px 50px;
    width: 300px;
  }

  #index_header {
    background-color: #535353;
    padding: 45px;
    margin: -15px -15px 0 -15px;
  }

  #header {
    background-color: #535353;
    padding: 45px;
    margin: -15px -15px 0 -15px;
  }

  .index-menu {
    top: 5px;
    width: auto;
    right: 50px;
  }
  .index-menu {
    top: 8px;
    width: auto;
    right: 50px;
  }

  .menu {
    top: 8px;
  }

  .social div:first-child , .index-social div:first-child{
    z-index: 10;
    float: right;
    width: 60px;
  }

  .social div:not(:first-child) , .index-social div:not(:first-child) {
    float: left;
    padding-top: 16px;
    padding-right: 10px;
  }

  .container_product2 .thumbnails li,.container_product3 .thumbnails li,.container_product4 .thumbnails li {
    width: 46%;
  }
	
 .projectList {
    width: 100%;
	max-width: 480px;
    float: none;
    margin: 0 auto 50px auto;
    max-height: 625px;
 }
	
.projectTitle, .container_msg3 .txtNormal img,.projectTitle, .container_msg8 .txtNormal img{
	margin: 0 auto;
	}
	
 .container_msg3 .txtNormal, .container_msg8 .txtNormal {
    text-align: center;
  }
	
  #tablist .pic {
  height: 388px;
 }
	
 .title-content {
    top: 90px;
  }
	
  .title-content:after {
    height: 70px;
	top: 115px;
  }

  #content .thumbnails .prodlist:nth-child(3n+1) {
    clear: inherit;
  }
  #content .thumbnails .prodlist:nth-child(2n+1) {
    clear: both;
  }
		
}

.linkto {
  color: #555555; 
  font-size: 15px;
  width: 160px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #B3B3B3;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
}

.linkto:hover {
  border: 1px solid #000000;
}

@media screen and (max-width: 705px) {
  .footer-bg {
    padding-left: 10%;
    padding-right: 10%;
  }
  #cominfo img{
   width: 20px;
  }
  #tablist .pic {
  height: 354px;
 }

}
	
@media screen and (max-width: 645px) {	
  #tablist .pic {height: 320px;}
}
@media screen and (max-width: 580px) {
  .footer-bg {
    padding-left: 5%;
	  padding-right: 5%;
	}
  #tablist .pic {
	height: 283px;
  }
  .proj > a:hover .proj-info{
    display: none;
  }
  #tablist tr {
    margin: 0px 0px 70px 0px;
  }
  
  #cominfo ul li {
    display: block;
  }

  .footer-text {
    line-height: 30px;
  }

}

@media screen and (max-width: 490px) {
  
	#tablist .pic {
	height: 233px;
    }
   .container_product2 .thumbnails li,.container_product3 .thumbnails li,.container_product4 .thumbnails li {
    width: 96%;
    }	
   #tablist .pic {
	height: 230px;
   }	

   .title-content {
    top: 35px;
    left: 10%;
  }

}

@media screen and (max-width: 407px) {
  .logo {
    width: 235px;
    padding: 0px 10px 10px 20px;
  }

  /* .social div:not(:first-child) {
    display: none;
  } */
  .index-menu{
    right: 20px;
    top: 0px;
  }

  .menu{
    right: 20px;
    top: 0px;
  }

  #mobile_toggle>a img {
    width: 50px;
  }

  /* .social div:first-child {
    width: 75px; 
  } */

  .index-social div:not(:first-child) {
    padding-top: 17px;
  } 

  #index_header, #header {
    padding: 37px;
  }
	
 #tablist .pic {
	height: 186px;
  }
	
}

@media screen and (max-width: 361px) {
  .footer-bg {
    padding-left: 15%;
    padding-right: 15%;
  }
  #tablist .pic {height: 159px;}
  .title-content strong {font-size: 20px;}
}
	
	
@media screen and (max-width: 320px) {
  #tablist .pic {
	height: 138px;
  }
}